:root {
	/* Colors */
	--clr-white:      #fff;
	--clr-gold:       #b38e59;
	--clr-red:        #400000;
	--clr-bg:         #400000;
	--clr-bg-mid:     #4a0000;
	--clr-bg-dark:    #3a0000;
	--clr-border:     #6a2416;

	/* Typography */
	--font-body:      "Fraunces", serif;
	--font-ui:        "Teko", sans-serif;

	/* Spacing */
	--space-xs:       0.3125rem;  /* 5px  */
	--space-sm:       0.625rem;   /* 10px */
	--space-md:       1.25rem;    /* 20px */
	--space-lg:       1.875rem;   /* 30px */
	--space-xl:       3.125rem;   /* 50px */

	/* Borders */
	--border-thin:    0.0625rem;  /* 1px */
	--border-mid:     0.125rem;   /* 2px */
	--border-thick:   0.1875rem;  /* 3px */

	--reviews-height-desktop: 60dvh;

	/* Layout */
	--size-max:       87.5rem;    /* 1400px */

	/* Background textures */
	--bg-dot:         url(../img/bg-2.png);
	--bg-dot-size:    11.25rem 11.25rem;
	--bg-line:        url(../img/bg-3.png);
	--bg-line-size:   18.75rem 5.625rem;
}

html {
	font-size: 16px;
}

body {
	font-size: 1rem;
	font-family: var(--font-body);
	background-color: var(--clr-bg);
	color: var(--clr-white);
	line-height: 1.5;
	font-weight: 300;
	font-optical-sizing: auto;
}

a        { color: var(--clr-gold); }
a:link   { color: var(--clr-gold); }
a:visited { color: var(--clr-gold); }

a:hover,
a:active {
	color: var(--clr-gold);
	text-decoration: none;
}

.site:not(.home .site){
	display: grid;
	grid-template-areas: 
	"site-header site-content"
	"site-header reviews"
	"site-header  site-footer";
	grid-template-columns: 15vw 1fr;
}



/* ============================================================
   HEADER
   ============================================================ */

.header:not(.home .header) {
	grid-area: site-header;
	background: transparent var(--bg-dot) repeat 0 0;
	background-size: var(--bg-dot-size);
	height: 100dvh;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	position: sticky;
	top: 0;
	left: 0;
	border-inline-end: 1px solid var(--clr-gold);
}

.header__logo:not(.home .header__logo)  {
	inline-size: 65%;
	position: absolute;
	top: 2rem;
	transform: translateX(-10%);
}


.header__navigation {
	width: 100%;
}

.header__navigation ul {
	width: 100%;
	text-align: center;
	margin-block-end: 0;
	padding-block: 0;
	padding-inline: 0;
display: flex;
flex-direction: column;
}

.header__navigation ul li {
	margin-block: 0;
	margin-inline: 0;
	font-size: 1.3rem;
	letter-spacing: 0.125rem;
	text-transform: uppercase;
	font-family: var(--font-ui);
}

.header__navigation ul li a {
	display: block;
	padding-block: var(--space-sm);
text-decoration: none;
	border-bottom: 1px dotted var(--clr-gold);

}

.header__navigation ul li:first-of-type a {
	border-block-start: 1px dotted var(--clr-gold);
}

.header__navigation ul li.current-menu-item a {
	color: var(--clr-white);
	text-decoration: none;
}

.home .header {
	width: 20vw;
	position: absolute;
	top: 0;
	left: 0;
	padding: 0 0 0 4rem;
	z-index: 100;
}

.home .header__logo {
	transform: translateX(-25%);
}


/* ============================================================
   MOBILE MENU
   ============================================================ */

.mobile-menu {
	display: none;
}

.mobile-menu__button {
	inline-size: 1.875rem;
	position: relative;
}

.mobile-menu__bar {
	inline-size: 100%;
	block-size: var(--border-mid);
	margin-block-end: 0.3rem;
	background-color: var(--clr-gold);
}

.mobile-menu.is-open {
	position: fixed;
	inset-block-start: 0;
	inset-inline-start: 0;
	inline-size: 100%;
	z-index: 9999999;
}

.mobile-menu.is-open .mobile-menu__bar:nth-child(1) {
	position: absolute;
	transform: rotate(-45deg);
}

.mobile-menu.is-open .mobile-menu__bar:nth-child(2) {
	position: absolute;
	transform: rotate(45deg);
}

.mobile-menu.is-open .mobile-menu__bar:nth-child(3) {
	display: none;
}

.social-navigation {
	grid-area: site-social-navigation;
	background-color: var(--clr-gold);
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
}


/* ============================================================
   SITE WRAPPER
   ============================================================ */

.site {
	background-color: var(--clr-bg-mid);
}


/* ============================================================
   FEATURED IMAGE
   ============================================================ */

.featured-img {
	border-block-end: var(--border-mid) solid var(--clr-gold);
	position: relative;
	height: 100svh;
}

.featured-img figure {
	margin: 0;
	width: 100%;
	height: 100%;
}

.featured-img figure img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 50% 50%;
}

.featured-img__words {
	position: absolute;
	left: 0;
	bottom: 0;
	padding: 4rem;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: flex-start;
	pointer-events: none;
}

.featured-img__word {
	font-family: var(--font-body);
	font-size: 7.5vw;
	color: var(--clr-gold);
	line-height: 1.2cap;
	display: block;
	letter-spacing: -8px;
	font-weight: 200;
	text-transform: uppercase;
}

.featured-img__word--passionate {
}


.featured-img__char {
	animation: charReveal 0.55s cubic-bezier(0.22, 1, 0.36, 1) both;
}

@keyframes charReveal {
	from { transform: translateY(110%); }
	to   { transform: translateY(0); }
}


/* ============================================================
   CONTENT
   ============================================================ */

.content:not(.home .content) {
	grid-area: site-content;
	padding-block: 0 6.25rem;
	padding-inline: 0;
	background: transparent var(--bg-line) repeat-x 0 0;
	background-size: var(--bg-line-size);
	position: relative;
}

.content__header {
	margin-block-end: 4rem;
	position: relative;
	z-index: 10;
}

.content .content__header-title {
	text-align: center;
	font-size: 1.1rem;
	font-family: var(--font-ui);
	letter-spacing: 0.125rem;
	text-transform: uppercase;
	margin-block-end: var(--space-sm);
}

.content .content__header-intro {
	font-size: 1.5rem;
	line-height: 1.3;
	color: var(--clr-gold);
	max-width: 40ch;
	margin-inline: auto;
	margin-block-end: var(--space-xl);
	font-family: var(--font-body);
	text-align: center;
	text-wrap: balance;
}

.content__container {
	padding-block-start: 5rem;
position: relative;
}

.content__body {
	width: 90%;
	margin: 0 auto;
	position: relative;
	z-index: 11;
}

.content p {
	font-weight: 300;
	margin-block-end: var(--space-md);
}

.content p strong {
	color: var(--clr-gold);
}

.content h2 {
	color: var(--clr-gold);
	font-family: var(--font-body);
	margin-block: var(--space-lg);
	margin-inline: 0;
	font-size: 2rem;
}

.content h3:not(.wp-block-accordion-heading) {
	color: var(--clr-gold);
	font-family: var(--font-body);
	margin-block: var(--space-lg);
	margin-inline: 0;
	font-size: 1.25rem;

}

.content h4 {
	font-family: var(--font-body);
	color: var(--clr-gold);
	font-size: 1rem;
	margin-block: var(--space-md);
	margin-inline: 0;
	text-transform: uppercase;

}

.content hr.break {
	display: block;
	inline-size: 100%;
	margin-block: 3.75rem;
	margin-inline: 0;
	block-size: var(--border-mid);
	background-color: var(--clr-gold);
	border: 0;
}

.wp-block-table thead {
	border-bottom: 0;
}

.content .wp-block-image {
	position: relative;
	overflow: hidden;
	margin-block-end: var(--space-lg);
}

.content .wp-block-image::before {
	content: "";
	inset: 1rem 1.5rem;
	border: 1px solid var(--clr-gold);
	position: absolute;
	z-index: 50;
	border-radius: .5rem;
	pointer-events: none;
}

.content .wp-block-image::after {
	content: "";
	inset: 1.5rem 1rem;
	border: 1px solid var(--clr-gold);
	position: absolute;
	z-index: 51;
	border-radius: .5rem;
		pointer-events: none;
	pointer-events: none;

}

.content .wp-block-image img {
}

.content p.signature {
	inline-size: 9.375rem;
	margin-block: var(--space-md);
	margin-inline: 0;
}

.content table {
	inline-size: 100%;
	margin-block-end: var(--space-lg);
}

.content table * {
	border: 0;
}

.content table thead th,
.content table thead td {
	font-family: var(--font-ui);
	font-size: 1rem;
	text-transform: uppercase;
	color: var(--clr-gold);
	padding-block: var(--space-sm);
	padding-inline: 0;
	border-block-end: var(--border-thin) dotted var(--clr-border);
}

.content table tbody td {
		vertical-align: top;
line-height: 1.5;
	padding-block: var(--space-sm);
	padding-inline: 0 var(--space-sm);
	border-block-end: var(--border-thin) solid var(--clr-border);
}


.content table td p:only-child,
.content table tbody td p:last-child {
	margin-bottom: 0;
}

.content table td p:only-of-type {
	margin-bottom: 1rem;
}

.content table td:nth-child(1),
.content table td:nth-child(2) {
	border-block-start: var(--border-thin) solid var(--clr-border);
}

.content ul {
	margin: 1rem 0 1rem 1rem;
	padding: 0;
}

.content ul li {
	list-style: square;
	padding-left: .65rem;
}

.content ul li::marker {
	color: var(--clr-gold);
}


.content table td ul {
	margin-top: 0;
}
.content .hb-review__text p:nth-child(1) {
	position: relative;
	z-index: 3;
}

.content .hb-review__text {
	position: relative;
}

.content .hb-review__text-left-quote {
	font-family: georgia;
	font-size: 11.25rem;
	color: var(--clr-gold);
	position: absolute;
	inset-inline-start: -1.25rem;
	inset-block-start: var(--space-xl);
	opacity: .25;
}

.content #contact-form {
	margin-block-start: var(--space-lg);
	background: transparent var(--bg-line) repeat-x 0 0;
	background-size: var(--bg-line-size);
}

table td abbr {
	color: var(--clr-gold);
	border-block-end: 0;
	text-decoration: none;
}


.content .hb-stats {
	margin-top: 4rem;
}

.content .hb-stats h2 {
	font-family: var(--font-ui);
	text-transform: uppercase;
	font-size: 2rem;
}


.content .hb-stats__items {
	display: flex;
	flex-wrap: wrap;
gap: 1em;
margin: 0;
padding: 0;
}

.hb-stat__label {
	font-family: var(--font-ui);
	text-transform: uppercase;
	font-size: 1.2rem;
	letter-spacing: 2px;
	display: block;
	position: relative;
	z-index: 2;
	margin-bottom: 2rem;
}

.hb-stat__value {
	display: block;
	font-size: 1rem;
	position: relative;
	z-index: 1;
}

.hb-stat--value-large .hb-stat__value  {
	font-size: 1.85rem;
	line-height: 1.2;
}


.hb-stat__value p {
	max-width: 80ch;
}
.content .hb-stat {
	border-radius: 1rem;
	outline: 1px solid var(--clr-gold); 
	position:relative;
	list-style: none;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	flex: 1 1 calc(20% - .5rem);
	padding: 1.5rem;
	line-height: 1.35;
	background-size: 100% auto;
	background: rgb(from var(--clr-bg) r g b / 0.85) url(https://viviennelawrence.cc/dev/wp-content/uploads/2026/06/stats-bg.jpg) fixed no-repeat 0 0;
}

.content .hb-stat.hair {
	background-size: cover !important;
	background: rgb(from var(--clr-bg) r g b / 0.85) url(https://viviennelawrence.cc/dev/wp-content/uploads/2022/05/0009682-Modifier-copy.jpeg) no-repeat 0% 50%;
}

.content .hb-stat.height {
	background-size: cover !important;
	background: rgb(from var(--clr-bg) r g b / 0.85) url(https://viviennelawrence.cc/dev/wp-content/uploads/2022/05/8.jpg) no-repeat 50% 0%;
}

.content .hb-stat--dress-size {
	background-size: cover !important;
	background: rgb(from var(--clr-bg) r g b / 0.85) url(https://viviennelawrence.cc/dev/wp-content/uploads/2026/06/dress-size.jpg) no-repeat 50% 0%;
}


.content .hb-stat ul:last-of-type,
.content .hb-stat p {
	margin-bottom: 0;
}

.content .hb-stat::after {
	content: "";
	inset: 0;
	background-color: var(--clr-bg);
	position: absolute;
	z-index: 0;
	opacity: .75;
	border-radius: 1rem;
}


.content .hb-stat--1-column {
	flex: 0 1 calc(25% - 1em);
}

.content .hb-stat--2-columns {
	flex: 0 1 calc(50% - 1em);
}

.content .hb-stat--3-columns {
	flex: 0 1 calc(75% - 1em);
}

.content .hb-stat--full {
	flex: 0 1 100%;
}

.content .hb-stat--full .hb-stat__label {
	margin-bottom: 3rem;
}

.content .hb-stat--feature .hb-stat__value {
	font-size: 1.5rem;
	line-height: 1.3;
}



/* ============================================================
   DUO BLOCK
   ============================================================ */

.duo-list {
	display: flex;
	flex-wrap: wrap;
}

.duo {
	margin-block-end: var(--space-lg);
	padding-block-end: 0.9375rem;
	position: relative;
	border-block-end: var(--border-thick) solid var(--clr-gold);
}

.duo__name {
	background-color: var(--clr-gold);
	text-align: center;
	color: var(--clr-bg);
	padding-block: var(--space-md) 0.9375rem;
	padding-inline: 0;
	font-size: 1.5rem;
	margin-block-end: 0;
	text-transform: uppercase;
}

.duo__image {
	position: relative;
	margin-block-end: var(--space-md);
	overflow: hidden;
	border-block-end: var(--border-thick) solid var(--clr-gold);
	display: flex;
	justify-content: center;
	align-items: center;
}

.duo a .duo__image img {
	padding: 0;
	transition: all .8s ease-out;
	position: relative;
}

.duo a:hover .duo__image::before {
	content: "Visit Site";
	position: absolute;
	z-index: 99999;
	padding-block: var(--space-sm);
	padding-inline: var(--space-md);
	display: block;
	border: var(--border-mid) solid var(--clr-gold);
	text-transform: uppercase;
	font-family: var(--font-body);
}

.duo a:hover .duo__image::after {
	content: "";
	position: absolute;
	inset: 0;
	background-color: rgba(0,0,0,.5);
}

.duo a:hover .duo__image img {
	transform: scale(1.1);
}

.duo__description {
	color: var(--clr-white);
}

.duo__donation {
	color: var(--clr-gold);
	margin-block-end: 0;
}


/* ============================================================
   EDITOR-MANAGED BLOCKS (box, qa, review, gallery)
   ============================================================ */

.content .box {
	border: var(--border-mid) solid var(--clr-gold);
	padding: var(--space-xs);
	margin-block-end: var(--space-lg);
}

.content .box .inner-border {
	padding: var(--space-xl);
	border: var(--border-thin) solid var(--clr-gold);
}

.content .box h3 {
	text-align: center;
}

.content .box.rate-group {
	border-width: var(--border-thick);
	background: transparent var(--bg-line) repeat-x 0 0;
	background-size: var(--bg-line-size);
}

.content .box.rate-group h3 {
	font-size: 2rem !important;
	margin-block-end: var(--space-xl);
	text-transform: uppercase;
}

.content .box.rate-group h3 span {
	display: inline-block;
	padding-block-end: var(--space-xs);
	border-block-end: var(--border-thin) solid var(--clr-gold);
}

.content .review h3 {
	font-size: 1.3125rem;
}

.content .review .author {
	text-transform: uppercase;
	font-family: var(--font-ui);
	color: var(--clr-gold);
	font-size: 1.125rem;
	letter-spacing: 0.0625rem;
	margin-block-start: var(--space-lg);
}

.content .qa {
	padding-block: var(--space-lg);
	border-block-end: var(--border-thin) solid var(--clr-gold);
}

.content .qa:nth-child(1) {
	border-block-start: var(--border-thin) solid var(--clr-gold);
}

.content .qa h3.q {
	margin-block-end: 0.9375rem;
	margin-block-start: 0;
}

.content .gallery-wrapper li {
	margin-block-end: var(--space-lg);
}

.content .wp-block-gallery a {
	display: block;
	overflow: hidden;
}

.content .wp-block-gallery a img {
	transition: transform .65s ease;
}

.content .wp-block-gallery a:hover img {
	transform: scale(1.05);
}

.content .gallery-wrapper li img {
	padding: var(--space-xs);
	background-color: var(--clr-gold);
}

.content .wp-block-gallery .wp-block-image::before,
.content .wp-block-gallery .wp-block-image::after {
	content: "";
	transition: inset .5s ease;
}

.content .wp-block-gallery .wp-block-image:hover::before {
	content: "";
	inset: 1.5rem 1rem;
}

.content .wp-block-gallery .wp-block-image:hover::after {
	content: "";
	inset: 1rem 1.5rem;
}


/* ============================================================
   FORMS (Ninja Forms)
   ============================================================ */

   .content .gform_wrapper {
	padding: 2.25rem;
	border: 1px solid var(--clr-gold);
   }

.content .nf-field-element input,
.content .nf-field-element select,
.content .nf-field-element textarea {
	padding-block: var(--space-xs);
	padding-inline: var(--space-sm);
	border: var(--border-thick) solid var(--clr-gold);
	background-color: var(--clr-gold);
}

.content .nf-field-element input:focus,
.content .nf-field-element select:focus,
.content .nf-field-element textarea:focus {
	background-color: var(--clr-white);
}

.content .nf-form-fields-required {
	display: none;
}

.content .nf-field-element textarea {
	block-size: 6.25rem;
}

.content .nf-field-label label {
	text-transform: uppercase;
	font-family: var(--font-body);
	font-weight: 300;
}

.content .field-wrap input[type="button"] {
	padding-block: var(--space-sm);
	padding-inline: var(--space-md);
	color: var(--clr-white);
	text-transform: uppercase;
	font-family: var(--font-body);
	font-weight: 300;
	font-size: 1.25rem;
	border-radius: 0.1875rem;
	margin-block-start: var(--space-lg);
}


/* ============================================================
   UTILITY CLASSES
   ============================================================ */

.content .center      { text-align: center; }
.content .caps        { text-transform: uppercase; }
.content .color-gold  { color: var(--clr-gold); }
.content .text-xs   { font-size: 0.75rem;  }  /* 12px — labels, captions     */
.content .text-sm   { font-size: 0.875rem; }  /* 14px — secondary text       */
.content .text-base { font-size: 1rem;     }  /* 16px — body default         */
.content .text-md   { font-size: 1.125rem; }  /* 18px                        */
.content .text-lg   { font-size: 1.35rem;  }  /* ~22px — matches h2/h3       */
.content .text-xl   { font-size: 1.75rem; line-height: 1.1;  }  /* 28px — intro / subheads     */
.content .text-2xl  { font-size: 2.25rem;  }  /* 36px                        */
.content .text-3xl  { font-size: 3rem;     }  /* 48px — display / hero       */


.blob {
	background: radial-gradient(circle,rgba(106, 36, 22, 1) 0%, rgba(106, 36, 22, 0) 100%);
pointer-events: none;
}

.blob--1 {
	width: 70vw;
	height: 70vw;
	position: fixed;
	top: 0;
	left: 50%;
	border-radius: 100%;
	filter: blur(50px);
	display: block;
	z-index: 0;
	opacity: 1;
	mix-blend-mode: screen;
	transform: translate(50%,-50%);
}

.blob--2 {
	width: 70vw;
	height: 70vw;
	position: fixed;
	top: 50%;
	right: 0;
	border-radius: 100%;
	filter: blur(50px);
	display: block;
	z-index: 0;
	opacity: .75;
	mix-blend-mode: screen;
	transform: translate(50%,-50%);
}

.blob--3 {
	width: 70vw;
	height: 70vw;
	position: fixed;
	bottom: 0%;
	left: 0;
	border-radius: 100%;
	filter: blur(50px);
	display: block;
	z-index: 0;
	opacity: .75;
	mix-blend-mode: screen;
	transform: translate(-50%,50%);
}

/* ============================================================
   HOME PAGE OVERRIDES
   ============================================================ */


   .home .site {
   }

body.home .header,
body.home .content {
	background-image: none;
}



body.home .header__logo {
	margin-block-end: 0;
}

body.home .header__navigation {
	display: none;
}

body.home .site {
	background: var(--clr-bg-mid) var(--bg-dot) repeat 0 0;
	background-size: var(--bg-dot-size);
}

body.home .button {
	display: block;
	text-align: center;
	font-size: 1.25rem;
	text-transform: uppercase;
	margin-block: var(--space-xl);
	margin-inline: auto;
	letter-spacing: 0.0625rem;
	font-family: var(--font-ui);
}

body.home .button a {
	display: block;

	text-decoration: none;
	padding-block: var(--space-sm);
	padding-inline: var(--space-xl);
	border: var(--border-mid) solid var(--clr-gold);
	border-radius: .5rem;
	background-color: var(--clr-bg-mid);
}

body.home .content #links {
	text-align: center;
	margin-block: var(--space-md);
	margin-inline: 0;
	padding: 0;
}

body.home .content #links li {
	display: inline-block;
	margin-block: 0;
	margin-inline: var(--space-sm);
	inline-size: 4.375rem;
}

body.home .content #links li.slixa,
body.home .content #links li.eros {
	inline-size: 6.25rem;
}

body.home .content__body {
	width: 50%;
}


/* ============================================================
   HB REVIEW BLOCK
   ============================================================ */

.hb-review {
	width: 100%;
	margin: 0 auto;
	grid-area: reviews;
	display: flex;
}

.hb-reviews__wrapper h2 {
	display: flex;
	gap: .5rem;
}


/* ============================================================
   HB REVIEWS SWIPER
   ============================================================ */

.hb-reviews-swiper {
	width: 100%;
	margin: 0;
	--swiper-theme-color:      var(--clr-gold);
	--swiper-pagination-bottom: var(--space-sm);
	overflow: hidden;
	height: var(--reviews-height-desktop);
	gap: 0;
	background: rgb(from var(--clr-bg) r g b / 0.25);
display: flex;
background-size: 300px;
backdrop-filter: blur(5px);
position: relative;
border-top: 1px solid var(--clr-gold);
}


.hb-reviews-swiper .hb-review__photo {
	object-fit: cover;
	object-position: top;
	display: flex;
	
}

.hb-reviews-swiper .hb-review__image {
	flex: 0 0 auto;
	height: var(--reviews-height-desktop);
	aspect-ratio: 6.83 / 10.24;
border-left: 1px solid var(--clr-gold);
}

.hb-reviews-swiper .hb-review__content {
	flex: 1 1 auto;
	padding-block: 4rem;
	overflow-y: scroll;
	height: var(--reviews-height-desktop);
	mask: linear-gradient(180deg,rgba(0, 0, 0, 1) 85%, rgba(0, 0, 0, 0) 100%);

	
}

.swiper-horizontal > .swiper-pagination-bullets, .swiper-pagination-bullets.swiper-pagination-horizontal, .swiper-pagination-custom, .swiper-pagination-fraction {
	width: auto;
	left: 50%;
	transform: translateX(-50%);
	padding: .25rem .25rem .25rem;
	background-color: var(--clr-gold);
	border-radius: 9999px;
	line-height: 1cap;
	bottom: 1rem;
}

.hb-reviews-swiper .hb-review__content p {
line-height: 1.6;
}

.hb-review__content-container {
	padding-inline: 8rem;
}

.hb-reviews-swiper .hb-review__content p {
	margin-bottom: 1rem;
}

.swiper-pagination-bullet {
	background-color: var(--clr-bg);
	opacity: 0.4;
}

.swiper-pagination-bullet-active {
	opacity: 1;
}

.hb-reviews-swiper .swiper-button-prev,
.hb-reviews-swiper .swiper-button-next {
	--swiper-navigation-size: 30px;
	top: 50%;
	width: var(--swiper-navigation-size);
	transform: translateY(-50%);
	background-color: var(--clr-gold);
	border-radius: 9999px;
	border: 0;
	
}

.hb-reviews-swiper .swiper-button-prev {
	left: 1rem;
}

.hb-reviews-swiper .swiper-button-next {
	right: 1rem;
}

.swiper-button-next::after, .swiper-button-prev::after {
	color: var(--clr-border);
font-size: 16px;
font-weight:600;
}

.hb-reviews-timer {
	position: absolute;
	inset-block-end: 1rem;
	inset-inline-start: var(--space-md);
	inline-size: 1.75rem;
	block-size: 1.75rem;
	z-index: 10;
}

.hb-reviews__wrapper {
	position: relative;
}

.hb-reviews__wrapper h2 {
	font-size: 1.3rem;
	text-transform: uppercase;
	position: absolute;
	top: 0;
	left: 50%;
	z-index: 10;
	background: var(--clr-gold);
	color: var(--clr-bg);
	padding: .25rem .85rem .25rem;
	font-weight: normal;
	letter-spacing: 2px;
	font-family: var(--font-ui);
	text-align: center;
	transform: translate(-50%,-50%);
	line-height: 1;
	border-radius: 9999px;
	margin: 0 auto;
	display: flex;
	align-items: center;
	gap: 1rem;

}

.hb-reviews__wrapper h2 svg {
	width: .65rem;
	fill: var(--clr-bg);
}

.hb-reviews-timer svg {
	inline-size: 100%;
	block-size: 100%;
	transform: rotate(-90deg);
}

.hb-reviews-timer__track {
	fill: none;
	stroke: rgba(255, 255, 255, 0.12);
	stroke-width: 2;
}

.hb-reviews-timer__progress {
	fill: none;
	stroke: var(--clr-gold);
	stroke-width: 2;
	stroke-linecap: round;
	stroke-dasharray: 69.12;
	stroke-dashoffset: 0;
}

.hb-review__headline {
	font-family: var(--font-body);
	font-size: 1.65rem;

	color: var(--clr-gold);
	margin-block: 0 1.5rem;
	margin-inline: 0;
}

.hb-review__text {
	font-weight: 300;
	line-height: 1.8rem;
}

.hb-review__text h3 {
	color: var(--clr-gold);
	text-transform: uppercase;
	font-family: var(--font-ui);
	font-size: 1.2rem;
	margin: 2rem 0;
}

.hb-review__text p:last-child {
	margin-block-end: 0;
}

.hb-review__reviewer {
	text-transform: uppercase;
	font-family: var(--font-ui);
	font-size: 1.125rem;
	letter-spacing: var(--border-thin);
	color: var(--clr-gold);
	margin-block: var(--space-md) 0;
}

.hb-review__placeholder {
	opacity: 0.5;
	font-style: italic;
}


/* ============================================================
   HB FAQ BLOCK
   ============================================================ */


   .wp-block-accordion-item
  {
border-radius: 1rem;
margin-bottom: .5rem;
border: 2px solid var(--clr-gold); 

   }



   .wp-block-accordion {
	max-width: calc(var(--size-max) * .65);
	margin: 0 auto;
   }

.wp-block-accordion-heading__toggle-icon {
	text-indent: -5000em;
	font-size: 1rem;
	width: 1rem;
	height: 1rem;
	display: flex;
	align-items: center;
	justify-content: center;
	transform-origin: center;
	position: relative;
}

.wp-block-accordion-heading__toggle-icon::before {
	content: "";
	width: 100%;
	height: 1px;
	position: absolute;
	background-color: var(--clr-gold);
}

.wp-block-accordion-heading__toggle-icon::after {
	content: "";
	width: 1px;
	height: 100%;
	position: absolute;
	background-color: var(--clr-gold);
}


.wp-block-accordion-heading__toggle:hover .wp-block-accordion-heading__toggle-title {
	text-decoration: none;
	
}

.wp-block-accordion-heading__toggle {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: var(--space-md);
	inline-size: 100%;
	padding-block: var(--space-lg);
	padding-inline: 2.5rem;
	background: transparent;
	color: var(--clr-white);
	font-family: var(--font-body);
	font-size: 1.5rem;
	text-align: start;
	cursor: pointer;
	font-style: italic;
	transition: color 0.2s ease;
	
}

.hb-faq__question:hover {
	color: var(--clr-gold);
}

.wp-block-accordion-heading__toggle[aria-expanded="true"] {
	color: var(--clr-gold);
}



.wp-block-accordion-panel p:last-child {
	margin-bottom: 0;
}

.hb-faq__question[aria-expanded="true"] .hb-faq__icon::after {
	transform: rotate(90deg);
}

.wp-block-accordion-panel {
	padding-block-end: var(--space-lg);
	font-weight: 300;
	line-height: 1.8rem;
	padding-inline: 2.5rem;
}

.hb-faq__answer p:last-child {
	margin-block-end: 0;
}

.hb-faq__placeholder {
	opacity: 0.5;
	font-style: italic;
}


/* ============================================================
   TABS (hb-tab block)
   ============================================================ */


.gutena-tabs-block {
	gap: 0;
}

.gutena-tabs-block > .gutena-tabs-tab {
	gap: 0;
	width: 90%;
	margin: 0 auto;
	border-radius: .5rem;
	overflow: hidden;
	border: 1px solid var(--clr-gold);
	transform: translateY(50%);
	position: relative;
	z-index: 100;
	box-shadow: rgba(0, 0, 0, 0.15) 0px 5px 15px 0px;
}


.gutena-tabs-block > .gutena-tabs-tab > .gutena-tab-title {
list-style: none;
margin: 0;
padding: 0;
}





.gutena-tabs-block > .gutena-tabs-tab > .gutena-tab-title {
	flex: 1 1 auto;
	justify-content: center;
	display: flex;
	gap: 0;
	padding-block: calc(var(--space-sm) + .5rem);
	padding-inline: calc(var(--space-sm) + .5rem);
	background: var(--clr-bg);
	border-radius: 0;
	color: var(--clr-gold);
	font-family: var(--font-ui);
	font-size: 1.4rem;
	border: 0;
	border-right: 1px solid var(--clr-gold);
	box-shadow: none;
	line-height: 1.4cap;
	letter-spacing: 0.0625rem;
	text-transform: uppercase;
	cursor: pointer;
	position: relative;
	transition: background-color 0.2s ease, color 0.2s ease;
}





.gutena-tabs-block > .gutena-tabs-tab > .gutena-tab-title:last-of-type  {
	border-right: 0;
}

.gutena-tabs-block > .gutena-tabs-tab > .gutena-tab-title.active:hover,
.gutena-tabs-block > .gutena-tabs-tab > .gutena-tab-title.active {
	background-color: var(--clr-gold);
	color: var(--clr-bg);
	border-radius: 0;
}

.gutena-tabs-block > .gutena-tabs-tab > .gutena-tab-title:hover
 {
	background-color: var(--clr-bg-mid);
	color: var(--clr-white);
	border-radius: 0;
	border: 0;
	border-right: 1px solid var(--clr-gold);

}


.gutena-tabs-content  {
	background-color: color-mix(in srgb, var(--clr-bg) 20%, transparent);
padding: 6rem 4rem;
border: var(--border-thin) solid var(--clr-gold);
border-radius: .5rem;
}

.hb-tab.is-hidden {
	display: none;
}

/* Editor-only: nav is a read-only label strip; tabs are never hidden */
.hb-tabs__nav--editor .hb-tabs__button {
	pointer-events: none;
	inset-block-end: 0;
}

.hb-tab__heading {
	font-family: var(--font-ui);
	font-size: 0.75rem;
	text-transform: uppercase;
	letter-spacing: 0.0625rem;
	color: var(--clr-gold);
	opacity: 0.6;
	margin-block-end: var(--space-sm);
	padding-block-end: var(--space-sm);
	border-block-end: var(--border-thin) dashed var(--clr-gold);
}

.gutena-tabs-block > .gutena-tabs-content > .gutena-tab-block {
	background-color: transparent;
	color: #fff;
}


/* ============================================================
   FOOTER
   ============================================================ */

.footer {
	grid-area: site-footer;
	text-align: center;
	font-size: 0.75rem;
	color: var(--clr-red);
	padding-block: var(--space-md);
	padding-inline: 0;
	text-transform: uppercase;
	letter-spacing: 0.125rem;
	background-color: var(--clr-gold);
}

.footer__container {
max-inline-size: 85%;
margin-inline: auto;
display: flex;
justify-content: space-between;
}

.footer a {
	font-weight: 600;
	color: var(--clr-red);
	text-decoration: underline;
	text-underline-offset: 4px;
}


/* ============================================================
   RESPONSIVE — max-width: 768px
   ============================================================ */

@media only screen and (max-width: 768px) {

	.checker {
		display: none;
	}

	.site {
		border-block-start: 0;
	}

	.mobile-menu {
		display: flex;
		block-size: 6.25rem;
		align-items: center;
		justify-content: center;
		position: fixed;
		top: 0;
		right: 0;
		inline-size: 6.25rem;
		z-index: 99999;
	}

	.menu-active .mobile-menu__bar {
		transition: transform .25s ease;
	}

	.menu-active .mobile-menu__bar:nth-child(1) {
		position: absolute;
		transform: rotate(-45deg);
	}
	.menu-active .mobile-menu__bar:nth-child(2) {
		position: absolute;
		transform: rotate(45deg);
	}

	.menu-active .mobile-menu__bar:nth-child(3) {
		opacity: 0;
	}

	.featured-img {
		height: auto;
	}

	.header__navigation {
		transition: clip-path .65s ease;
		border: 0;
		position: fixed;
		inset: 0;
		z-index: 9999;
		background: var(--clr-bg) var(--bg-dot) repeat 0 0;
		background-size: var(--bg-dot-size);
		display: flex;
		align-items: center;
		justify-content: center;
		clip-path: polygon(100% 0, 100% 0, 100% 100%, 100% 100%);

	}

	.menu-active .header__navigation {
		clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);


	}

	.header__navigation ul {
		transition: transform .65s ease, opacity .65s ease;
		transition-delay: .2s;
		border: 0;
		margin: 0;
		padding: 0;
		transform: translateX(100vw);
		opacity: 0;
		inline-size: 100%;
	}

		.menu-active .header__navigation ul {
		transform: translateX(0);
		opacity: 1;
		}

	.header:not(.home .header) {
		height: 6.25rem;
		z-index: 9999;
		background-color: var(--clr-bg);
		border-bottom: 1px solid var(--clr-gold);
		border-right: 0;
	}

	.header__logo:not(.home .header__logo) {
		width: 25%;
		margin: 0;
		top: auto;
	}

	.header__navigation ul li {
		display: block;
		font-size: 2rem;
		margin-block: 0;
		margin-inline: 0;
	}

	.content .hb-stats__items {
		display: flex;
		gap: 0;
	}

	.content .hb-stat--feature .hb-stat__value {
		font-size: inherit;
	}
	.header__navigation.is-open {
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.content .hb-stat {
		border-radius: 0;
		flex: 0 0 50%;
	}

	.content .content__header-intro {
		border-bottom: 1px solid var(--clr-gold);
		font-size: 1.25rem;
		padding-block-end: 1.5rem;
	}

.content .hb-stat--favourite-colour,
	.content .hb-stat--on-my-bookshelf,
	.content .hb-stat--full,
	.content .hb-stat--3-columns,
	.content .hb-stat--languages,
	.content .hb-stat--2-columns {
		flex: 0 0 100%;
	}

	.content .hb-stat::after {
		border-radius: 0;
	}
.content .hb-stat--full .hb-stat__label,
	.hb-stat__label {
		margin-bottom: .75rem;
	}

	p.img {
		margin-block: var(--space-lg);
		margin-inline: 0;
	}

	.content {
		padding-block: 0 var(--space-lg);
		padding-inline: 0;
	}

	.duo {
		border-block-end-width: var(--border-mid);
	}

	.duo__image {
		margin-block: 0 var(--space-lg);
		margin-inline: 0;
	}

	.no-padding-mobile {
		padding-inline: 0;
	}

	.content__intro {
		font-size: 1.75rem;
		line-height: 2rem;
	}

	.content .qa h3.q {
		font-size: 1.5rem !important;
	}

	.content .box .inner-border {
		padding: var(--space-md);
	}

	body.home .content #links li {
		margin-block: 0;
		margin-inline: var(--space-xs);
		inline-size: 3.125rem;
	}

	body.home .content #links li.slixa,
	body.home .content #links li.eros {
		inline-size: 5rem;
	}

	body.home .content__body {
		width: 90%;
	}

	.gutena-tabs-block > .gutena-tabs-tab {
		transform: translateY(0);
	}

	.footer {
		padding-block: var(--space-md);
		padding-inline: 0;
		line-height: 1.3rem;
	}

	.site:not(.home .site){
	display: grid;
	grid-template-areas: 
	"site-header"
	"site-content"
	"site-reviews"
	"site-footer";
	grid-template-columns: 100vw;
	grid-template-rows: 6.25rem 1fr;
	align-items: center;
	justify-content: center;
}

.gutena-tabs-block > .gutena-tabs-tab > .gutena-tab-title {
	padding-block: calc(var(--space-sm) + .5rem);
}

.header__logo {
	width: 30%;
	position: static;
}

.content .content__header-intro {
	padding-inline: 1rem;
}

.content__container {
	padding-block-start: 2rem;
}

.content h2 {
	font-size: 1.65rem;
}
.gutena-tabs-content {
	padding-inline: 1rem;
}

.gutena-tabs-block > .gutena-tabs-tab {
	width: 100%;
	border-radius: .5rem .5rem 0 0;
}

.gutena-tabs-block > .gutena-tabs-content {
	border-radius: 0 0 .5rem .5rem;
	border-top: 0;
}

.gutena-tabs-content::before {
	content: "← Swipe for More →";
	font-size: .73rem;
	position: absolute;
	top: .2rem;
	left: 0;
	right: 0;
	width: 100%;
	font-family: var(--font-ui);
	text-transform: uppercase;
	color: var(--clr-gold);
	text-align: center;
	letter-spacing: 2px;
}

.hb-review {
	padding-top: 0;
	flex-direction: column;
}

.hb-review__content-container {
	padding-inline: 2rem;
}

.hb-reviews-swiper .hb-review__image {
	display: none;
}

.hb-review__content {
	order: 2;
}

.hb-reviews-swiper {
	height: auto;
}

.hb-reviews-swiper .swiper-button-prev, .hb-reviews-swiper .swiper-button-next {
	top: 3rem;
}


}