/* =========================================================
   Laser Base — Homepage styles
   ========================================================= */

/* ---------- SITE HEADER ---------- */
.site-header {
	position: absolute;
	inset: 0 0 auto 0;
	z-index: 50;
	padding-block: 24px;
	color: var(--lb-white);
}
.site-header__inner {
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	align-items: center;
	gap: 24px;
	max-width: var(--lb-content-max);
	margin-inline: auto;
	padding-inline: 32px;
}
.site-header__tagline { display: flex; flex-direction: column; gap: 4px; line-height: 1.5; }
.site-header__tagline span:first-child { color: var(--lb-cream); }
.site-header__tagline span:last-child {
	font-family: var(--lb-font-body); font-weight: 400; font-size: 12px;
	letter-spacing: 3px; text-transform: uppercase; color: var(--lb-white);
}
.site-header__logo { display: inline-flex; align-items: center; justify-content: center; }
.site-header__logo img { width: auto; height: 88px; object-fit: contain; }
.site-header__actions { display: flex; align-items: center; justify-content: flex-end; gap: 20px; }
.site-header__actions .btn--primary {
	background: rgba(255, 255, 255, 0.10);
	color: var(--lb-white);
	border: 1px solid rgba(253, 235, 187, 0.20);
	border-radius: var(--lb-radius-sm);
	padding: 12px 32px;
	-webkit-backdrop-filter: blur(8px);
	backdrop-filter: blur(8px);
	transition: background-color .2s ease, color .2s ease, border-color .2s ease;
}
.site-header__actions .btn--primary:hover {
	background: var(--lb-cream); color: var(--lb-ink);
	border-color: var(--lb-cream);
}
.site-header__toggle {
	background: transparent; border: 0; width: 32px; height: 24px; padding: 0;
	display: inline-flex; flex-direction: column; justify-content: space-between;
}
.site-header__toggle span {
	display: block; width: 100%; height: 1.5px; background: var(--lb-white);
	transition: background 0.2s ease;
}
.site-header__toggle:hover span { background: var(--lb-cream); }

.site-nav {
	position: fixed; inset: 0; background: var(--lb-ink); z-index: 40;
	display: flex; padding: 130px 24px 48px;
	overflow-y: auto; /* short screens scroll instead of clipping items */
}
/* ---------- Full-screen mega navigation ---------- */
.nav-mega { display: block; padding: 0; }
.nav-mega__bar { display: flex; align-items: center; padding: 26px 32px; }
.nav-mega__brand {
	font-family: var(--lb-font-body); font-weight: 500; font-size: 13px;
	letter-spacing: 4px; text-transform: uppercase; color: var(--lb-white);
}
.nav-mega__grid {
	display: grid; gap: 12px;
	grid-template-columns: repeat(3, 1fr); grid-template-rows: 1fr 1fr;
	padding: 0 24px 24px; height: calc(100vh - 84px);
}
.nav-tile--about   { grid-column: 1; grid-row: 1; }
.nav-tile--wide    { grid-column: 2 / 4; grid-row: 1; }
.nav-tile--tech    { grid-column: 1; grid-row: 2; }
.nav-tile--offers  { grid-column: 2; grid-row: 2; }
.nav-tile--support { grid-column: 3; grid-row: 2; }
.nav-tile {
	position: relative; overflow: hidden;
	background-color: #141414; background-size: cover; background-position: center; background-repeat: no-repeat;
	display: flex; flex-direction: column; justify-content: flex-end;
	padding: 30px 32px; min-height: 200px;
}
.nav-tile::before {
	content: ""; position: absolute; inset: 0; z-index: 0;
	background: linear-gradient(to top, rgba(0,0,0,0.55), rgba(0,0,0,0.12));
	transition: background .3s ease;
}
.nav-tile:hover::before { background: linear-gradient(to top, rgba(0,0,0,0.72), rgba(0,0,0,0.3)); }
.nav-tile__num {
	position: absolute; top: 26px; left: 32px; z-index: 2;
	font-family: var(--lb-font-body); font-weight: 500; font-size: 12px;
	letter-spacing: 2px; color: var(--lb-cream);
}
.nav-tile__body { position: relative; z-index: 1; }
.nav-tile__title {
	display: block; font-family: var(--lb-font-heading); font-weight: 400;
	line-height: 1.05; font-size: clamp(26px, 2.4vw, 40px);
	color: var(--lb-white); letter-spacing: 0.5px; text-decoration: none;
}
a.nav-tile__title:hover { color: var(--lb-cream); }
.nav-tile--wide .nav-tile__title { font-size: clamp(30px, 3.2vw, 52px); }
.nav-mega .nav-tile__links {
	list-style: none; margin: 0; padding: 0; text-align: left; display: block;
	max-height: 0; opacity: 0; overflow: hidden;
	transition: max-height .4s ease, opacity .3s ease, margin-top .3s ease;
}
.nav-tile:hover .nav-tile__links,
.nav-tile:focus-within .nav-tile__links { max-height: 340px; opacity: 1; margin-top: 18px; }
/* Grid, not column-count: Safari fails to paint multicol content inside the
   max-height/opacity reveal transition (client-reported: hover showed nothing). */
.nav-mega .nav-tile__links--two { display: grid; grid-template-columns: 1fr 1fr; column-gap: 48px; }
.nav-mega .nav-tile__links li { margin-bottom: 10px; }
.nav-mega .nav-tile__links a {
	font-family: var(--lb-font-body); font-weight: 300; font-size: 15px;
	letter-spacing: 0.4px; text-transform: none; color: var(--lb-white-70);
	transition: color .2s ease;
}
.nav-mega .nav-tile__links a:hover { color: var(--lb-cream); }
.site-nav[hidden] { display: none; }
.site-nav__close {
	position: absolute; top: 26px; right: 24px;
	width: 44px; height: 44px;
	background: transparent; border: 1px solid var(--lb-white-40);
	color: var(--lb-white); font-size: 18px; line-height: 1;
	display: flex; align-items: center; justify-content: center;
	cursor: pointer; transition: border-color .2s ease, color .2s ease;
}
.site-nav__close:hover { border-color: var(--lb-cream); color: var(--lb-cream); }

/* ---------- SECTION BASE ---------- */
.section { position: relative; padding-block: 120px; }
.section__head { text-align: center; max-width: 880px; margin: 0 auto 64px; }
.section__head .eyebrow-sm { margin-bottom: 16px; color: var(--lb-grey-500); }

/* ---------- 1. HERO ---------- */
.section-hero {
	position: relative; padding: 0; min-height: 1200px;
	color: var(--lb-white); overflow: hidden; isolation: isolate;
	background: var(--lb-ink);
}
.hero__video {
	position: absolute; inset: 0;
	width: 100%; height: 100%;
	object-fit: cover;
	z-index: 0;
}
.hero__overlay {
	position: absolute; inset: 0; z-index: 1;
	background:
		radial-gradient(ellipse at 50% 55%, rgba(0,0,0,0.20) 0%, rgba(0,0,0,0.55) 70%),
		linear-gradient(180deg, rgba(0,0,0,0.50) 0%, rgba(0,0,0,0.30) 35%, rgba(0,0,0,0.25) 60%, rgba(0,0,0,0.70) 100%);
}
.hero__content {
	position: relative; z-index: 2;
	display: flex; flex-direction: column; align-items: center; text-align: center;
	max-width: 1200px; margin-inline: auto; padding-inline: 32px; padding-top: 510px;
}
.hero__eyebrow {
	display: inline-flex; align-items: baseline; gap: 6px;
	font-family: var(--lb-font-body); font-size: 10px;
	letter-spacing: 3.5px; text-transform: uppercase;
	line-height: 1.5; margin-bottom: 32px;
}
.hero__eyebrow-pre { color: var(--lb-white-90); font-weight: 400; letter-spacing: 3.5px; }
.hero__eyebrow-brand { color: var(--lb-white); font-weight: 600; letter-spacing: 3.5px; }
.hero__headline {
	font-family: var(--lb-font-heading); font-weight: 500;
	/* Figma: other-page heroes = 72px; clamp scales down on mobile (no mobile design) */
	font-size: clamp(30px, 6.2vw, 72px); line-height: 1; letter-spacing: -1.44px;
	color: var(--lb-white); margin-bottom: 36px;
	white-space: nowrap; text-transform: none;
}
.hero__headline-accent { color: var(--lb-cream); font-weight: 500; }
/* Figma: homepage hero is the largest at 96px (+2px tracking) */
body.home .hero__headline { font-size: clamp(34px, 8.4vw, 96px); letter-spacing: 2px; }
@media (max-width: 720px) {
	.hero__headline { white-space: normal; }
}
.hero__sub {
	font-family: var(--lb-font-body); font-weight: 300; font-size: 17px;
	line-height: 1.7; color: var(--lb-white-90); max-width: 640px;
	margin: 0 auto;
}
.hero__sub em { color: var(--lb-white); font-style: italic; font-weight: 400; }
/* Hero educational clip: static poster + click-to-play with sound (pages whose hero video has audio) */
.hero__play {
	margin-top: 40px; display: inline-flex; align-items: center; gap: 12px;
	padding: 12px 26px 12px 18px; cursor: pointer;
	background: rgba(255,255,255,0.10); color: var(--lb-white);
	border: 1px solid var(--lb-cream); border-radius: 999px;
	font-family: var(--lb-font-body); font-weight: 500; font-size: 12px;
	letter-spacing: 2px; text-transform: uppercase;
	backdrop-filter: blur(4px); transition: background .25s ease, transform .25s ease;
}
.hero__play svg { color: var(--lb-cream); }
.hero__play:hover { background: var(--lb-cream); color: var(--lb-ink); transform: translateY(-2px); }
.hero__play:hover svg { color: var(--lb-ink); }
/* static thumbnail background (replaces the autoplay bg video on click-to-play heroes) */
.hero__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; }
/* hide the scroll cue on heroes that have a Watch button (they'd collide) */
.section-hero:has(.hero__play) .hero__scroll { display: none; }
/* Video popup */
.video-modal {
	position: fixed; inset: 0; z-index: 60;
	display: flex; align-items: center; justify-content: center;
	background: rgba(0,0,0,0.9); padding: 40px;
}
.video-modal[hidden] { display: none; }
.video-modal__inner { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; }
.video-modal__player { max-width: min(1000px, 100%); max-height: 86vh; width: auto; height: auto; background: #000; }
.video-modal__close {
	position: absolute; top: 24px; right: 28px; width: 46px; height: 46px; border-radius: 50%;
	background: rgba(255,255,255,0.12); border: 1px solid var(--lb-white-40);
	color: var(--lb-white); font-size: 20px; line-height: 1; cursor: pointer;
	display: flex; align-items: center; justify-content: center;
	transition: background .2s ease, color .2s ease, border-color .2s ease;
}
.video-modal__close:hover { background: var(--lb-cream); color: var(--lb-ink); border-color: var(--lb-cream); }
.hero__scroll {
	position: absolute; bottom: 180px; left: 50%; transform: translateX(-50%);
	z-index: 2;
	display: flex; flex-direction: column; align-items: center; gap: 18px;
}
.hero__scroll span:first-child {
	writing-mode: vertical-rl;
	font-family: var(--lb-font-body); font-weight: 400; font-size: 9px;
	letter-spacing: 3px; text-transform: uppercase; color: var(--lb-white-40);
}
.hero__scroll-bolt {
	color: var(--lb-cream); font-size: 14px; line-height: 1;
}
/* Centered hero variant: vertically centre the hero text and keep the scroll
   cue a consistent distance above it. Fixes the cue colliding with long hero
   copy (e.g. Men's) — the cue was pinned to the hero bottom while the text was
   pinned to the top, so their gap drifted page to page. The asymmetric padding
   reserves the cue zone so centred text can never reach it. */
.section-hero.hero--centered { display: flex; flex-direction: column; }
.section-hero.hero--centered .hero__content {
	flex: 1 1 auto; justify-content: center;
	padding-top: 150px;    /* clear the fixed header */
	padding-bottom: 210px; /* reserve the scroll-cue zone */
}
/* sit the cue near the very bottom (the global 180px was eating into the copy) */
.section-hero.hero--centered .hero__scroll { bottom: 90px; }
.hero__bottom {
	position: absolute; left: 0; right: 0; bottom: 0; z-index: 2;
	display: flex; justify-content: space-between; align-items: flex-end;
	padding: 24px 32px 32px; color: var(--lb-white);
}
.hero__bottom-left { display: flex; flex-direction: column; gap: 4px; }
.hero__bottom-left .small {
	font-family: var(--lb-font-body); font-weight: 300; font-size: 10px;
	letter-spacing: 4px; text-transform: uppercase; color: var(--lb-white-40);
}
.hero__bottom-left .strong {
	font-family: var(--lb-font-body); font-weight: 400; font-size: 12px;
	letter-spacing: 3px; text-transform: uppercase; color: var(--lb-white);
}
.hero__bottom-right { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
.hero__stars { display: inline-flex; gap: 4px; color: var(--lb-cream); font-size: 14px; letter-spacing: 2px; }
.hero__bottom-right .label {
	font-family: var(--lb-font-body); font-weight: 300; font-size: 10px;
	letter-spacing: 2px; text-transform: uppercase; color: var(--lb-white-70);
}
.hero__bottom-right .meta {
	font-family: var(--lb-font-body); font-weight: 300; font-size: 10px;
	letter-spacing: 1px; color: var(--lb-white-40);
}

/* ---------- 2. TREATMENTS (was 3) ---------- */
.section-treatments {
	/* Two-tone: dark behind the title + top of the cards, white behind the
	   bottom of the cards so they overhang a dark→white boundary (per Figma). */
	background: linear-gradient(
		to bottom,
		var(--lb-ink) 0%,
		var(--lb-ink) calc(100% - 240px),
		var(--lb-white) calc(100% - 240px),
		var(--lb-white) 100%
	);
	color: var(--lb-white);
	padding-block: 100px 100px;
	position: relative;
}
/* Allow cards to bleed into the next section visually */
.section-treatments + .section { padding-top: 80px; }
.treatments__head { text-align: center; margin-bottom: 64px; }
.treatments__head .eyebrow-sm { display: block; margin-bottom: 14px; color: var(--lb-white-40); }
.treatments__headline {
	font-family: var(--lb-font-heading); font-weight: 400;
	font-size: clamp(36px, 4vw, 56px); line-height: 1.1; color: var(--lb-white);
}
.treatments__grid {
	display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px;
	position: relative;
}
.treatment-card {
	position: relative; overflow: hidden;
	border-radius: var(--lb-radius-md);
	aspect-ratio: 305/428;
	background: var(--lb-grey-900);
	isolation: isolate;
}
.treatment-card__media { position: absolute; inset: 0; }
.treatment-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s ease; }
.treatment-card:hover .treatment-card__media img { transform: scale(1.04); }
/* Permanent bottom fade so the default title stays legible on the image */
.treatment-card__media::after {
	content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none;
	background: linear-gradient(to top, rgba(0,0,0,0.60) 0%, rgba(0,0,0,0.12) 32%, transparent 55%);
}

/* Dark backdrop — hidden by default, fades in on hover */
.treatment-card__overlay {
	position: absolute; inset: 0; z-index: 1;
	background: rgba(10, 10, 10, 0.62);
	opacity: 0; transition: opacity .35s ease;
	pointer-events: none;
}
.treatment-card:hover .treatment-card__overlay,
.treatment-card:focus-within .treatment-card__overlay { opacity: 1; }

/* Big category title — visible by default, fades out on hover */
.treatment-card__title {
	position: absolute; left: 24px; right: 24px; bottom: 24px; z-index: 3;
	margin: 0;
	font-family: var(--lb-font-heading); font-weight: 500; font-size: 32px;
	line-height: 1; color: var(--lb-white);
	text-shadow: 0 1px 12px rgba(0,0,0,0.5);
	transition: opacity .3s ease;
}
.treatment-card:hover .treatment-card__title,
.treatment-card:focus-within .treatment-card__title { opacity: 0; }

/* Hover content (eyebrow + sub + pills) — hidden by default, fades in on hover */
.treatment-card__hover {
	position: absolute; left: 24px; right: 24px; bottom: 24px; z-index: 3;
	display: flex; flex-direction: column; gap: 12px;
	color: var(--lb-white);
	opacity: 0; transform: translateY(8px);
	transition: opacity .35s ease, transform .35s ease;
	pointer-events: none;
}
.treatment-card:hover .treatment-card__hover,
.treatment-card:focus-within .treatment-card__hover {
	opacity: 1; transform: translateY(0);
	pointer-events: auto;
}
.treatment-card__chips a { color: inherit; text-decoration: none; }
.treatment-card__chips a:hover { color: var(--lb-cream); }
.treatment-card__eyebrow {
	font-family: var(--lb-font-body); font-weight: 500; font-size: 11px;
	letter-spacing: 2.5px; text-transform: uppercase;
	color: var(--lb-white);
}
.treatment-card__sub {
	font-family: var(--lb-font-body); font-weight: 400; font-size: 11px;
	color: var(--lb-white-70); line-height: 1.5;
}
.treatment-card__chips {
	display: flex; flex-wrap: wrap; gap: 6px;
	margin-top: 4px;
}
.treatment-card__chips li {
	font-family: var(--lb-font-body); font-weight: 400; font-size: 10px;
	letter-spacing: 1px; text-transform: uppercase;
	color: var(--lb-white-90);
	padding: 4px 10px;
	border: 1px solid var(--lb-white-30);
	border-radius: var(--lb-radius-sm);
}
.treatments__footer {
	display: flex; flex-direction: column; align-items: center; gap: 20px;
	padding-top: 220px; /* clear the overhang */
	text-align: center;
}
.treatments__link {
	font-family: var(--lb-font-body); font-weight: 500; font-size: 11px;
	letter-spacing: 2.75px; text-transform: uppercase;
	color: var(--lb-white);
	border-bottom: 1px solid var(--lb-white-30);
	padding-bottom: 4px;
}
.treatments__link:hover { color: var(--lb-cream); border-color: var(--lb-cream); }
.treatments__ctas { display: flex; gap: 16px; flex-wrap: wrap; justify-content: center; }
.treatments__ctas .btn--ink { background: var(--lb-white); color: var(--lb-ink); }
.treatments__ctas .btn--ink:hover { background: var(--lb-cream); }

/* ---------- 4. OFFER ---------- */
.section-offer {
	background-color: var(--lb-grey-900);
	background-size: cover; background-position: center 68%;
	color: var(--lb-white); padding-block: 120px; text-align: center;
}
.offer__inner { display: flex; flex-direction: column; align-items: center; gap: 20px; max-width: 900px; }
.offer__headline {
	font-family: var(--lb-font-heading); font-weight: 500;
	font-size: var(--lb-heading-section); line-height: 1.1; color: var(--lb-white);
	letter-spacing: 0;
}
.offer__sub {
	color: var(--lb-white-90); font-size: 16px; font-weight: 300;
	max-width: 720px; line-height: 1.6;
}
.offer__claim {
	font-family: var(--lb-font-body); font-weight: 500; font-size: 11px;
	letter-spacing: 3px; text-transform: uppercase; color: var(--lb-white);
	margin-top: 12px;
}
.offer__buttons { display: flex; gap: 24px; flex-wrap: wrap; justify-content: center; margin-top: 8px; }
.offer__clinic-btn {
	font-family: var(--lb-font-body); font-weight: 500; font-size: 11px;
	letter-spacing: 2.5px; text-transform: uppercase; color: var(--lb-white);
	padding: 14px 36px;
	border: 1px solid var(--lb-white);
	background: transparent;
	transition: background-color .2s ease, color .2s ease;
}
.offer__clinic-btn:hover { background: var(--lb-white); color: var(--lb-ink); }
.offer__headline em { font-weight: 700; font-style: normal; }
/* Email-capture variant (clinic pages) */
.offer__form { display: flex; width: 100%; max-width: 540px; margin-top: 8px; }
.offer__form input {
	flex: 1; min-width: 0; color: var(--lb-white);
	background: rgba(255,255,255,0.10); border: 1px solid var(--lb-white-40); border-right: 0;
	padding: 16px 20px; font-family: var(--lb-font-body); font-size: 14px;
	-webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
.offer__form input::placeholder { color: var(--lb-white-70); }
.offer__form input:focus { outline: none; border-color: var(--lb-cream); }
.offer__form button {
	background: var(--lb-cream); color: var(--lb-ink); border: 0; cursor: pointer;
	font-family: var(--lb-font-body); font-weight: 600; font-size: 12px;
	letter-spacing: 2px; text-transform: uppercase; padding: 0 32px; white-space: nowrap;
	transition: background-color .2s ease;
}
.offer__form button:hover { background: var(--lb-white); }

/* ---------- 5. PROCESS ---------- */
.section-process { background: var(--lb-white); padding-block: 140px; }
/* The section wrapper (.lb-container1) is unpadded so the step grid runs
   full-bleed; the header needs the container padding back or it touches
   the screen edge on mobile. */
.section-process .section__head { padding-inline: var(--lb-container-pad-x); }
.process__grid {
	display: grid; grid-template-columns: repeat(3, 1fr); gap: 0;
}
.process-step {
	position: relative; color: var(--lb-white); overflow: hidden;
	aspect-ratio: 480/600;
}
.process-step__media { position: absolute; inset: 0; }
.process-step__media img { width: 100%; height: 100%; object-fit: cover; }
.process-step::after {
	content: ''; position: absolute; inset: 0;
	background: linear-gradient(180deg, rgba(0,0,0,0.15) 0%, rgba(0,0,0,0.45) 60%, rgba(0,0,0,0.8) 100%);
}
.process-step__num,
.process-step h3,
.process-step p {
	position: relative; z-index: 2;
}
.process-step__num {
	position: absolute; top: 32px; left: 32px; z-index: 2;
	font-family: var(--lb-font-heading); font-weight: 500; font-size: 48px;
	color: var(--lb-white-30); line-height: 1;
}
.process-step h3 {
	position: absolute; bottom: 64px; left: 32px; right: 32px;
	font-family: var(--lb-font-heading); font-weight: 500; font-size: 40px;
	color: var(--lb-white);
}
.process-step p {
	position: absolute; bottom: 32px; left: 32px; right: 32px;
	font-family: var(--lb-font-body); font-weight: 400; font-size: 12px;
	line-height: 1.4; letter-spacing: 2px; text-transform: uppercase;
	color: var(--lb-white-60);
}

/* ---------- 6. CLINICS ---------- */
.section-clinics { background: var(--lb-off-white); padding-block: 140px; }
.clinics__grid {
	display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px;
	align-items: start;
}
.clinic-tile {
	position: relative; overflow: hidden; border-radius: var(--lb-radius-md); margin: 0;
	aspect-ratio: 3/4.4;
}
/* Middle tile staggered down, per Figma */
.clinic-tile--offset { margin-top: 80px; }
.clinic-tile img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.clinic-tile:hover img { transform: scale(1.04); }
.clinic-tile::after {
	content: ''; position: absolute; inset: 0;
	background: linear-gradient(180deg, transparent 45%, rgba(0,0,0,0.75) 100%);
}
.clinic-tile figcaption {
	position: absolute; left: 28px; right: 28px; bottom: 28px; z-index: 2; color: var(--lb-white);
	display: flex; flex-direction: column; gap: 6px;
}
.clinic-tile figcaption h3 {
	font-family: var(--lb-font-heading); font-weight: 500; font-size: 26px;
	color: var(--lb-white); order: 1;
}
.clinic-tile figcaption .eyebrow-sm {
	color: var(--lb-white-60); display: block; order: 2;
	font-size: 10px; letter-spacing: 2.5px;
}

/* ---------- 7. WHY ---------- */
.section-why {
	background-color: var(--lb-ink);
	background-size: cover; background-position: center;
	color: var(--lb-white); padding-block: 140px;
}
.why__bolt {
	display: block; margin: 0 auto 16px; color: var(--lb-cream);
	font-size: 18px; line-height: 1;
}
.why__heading {
	font-family: var(--lb-font-heading); font-weight: 500;
	font-size: var(--lb-heading-section); line-height: 1; color: var(--lb-white);
	letter-spacing: 1px;
}
.why__grid {
	display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px;
	margin-top: 56px;
}
.why-card {
	padding: 64px 32px;
	border: 1px solid var(--lb-yellow);
	border-radius: 0;
	background: rgba(0,0,0,0.24);
	-webkit-backdrop-filter: blur(10px);
	backdrop-filter: blur(10px);
	text-align: center;
	transition: background-color .3s ease, transform .3s ease;
}
.why-card:hover { background: rgba(0,0,0,0.40); transform: translateY(-4px); }
.why-card h4 {
	font-family: var(--lb-font-heading); font-weight: 500; font-size: 22px;
	color: var(--lb-cream); margin-bottom: 12px;
}
.why-card p {
	font-family: var(--lb-font-body); font-weight: 300; font-size: 14px;
	color: var(--lb-white-90); line-height: 1.6;
}

/* ---------- 8. ACCREDITATIONS ---------- */
.section-accreditation { background: var(--lb-white); padding-block: 120px; }
.accreditation__slider { position: relative; overflow: hidden; }
/* Continuous marquee: track holds two identical copies of the badges (the second
   set is cloned in JS) and slides left by 50%, looping seamlessly. Trailing margin
   on every item — rather than flex gap — keeps the boundary spacing equal so the
   -50% wrap has no jump. */
.accreditation__track {
	display: flex; width: max-content; padding: 4px;
	animation: lb-marquee var(--lb-marquee-time, 28s) linear infinite;
}
.accreditation__slider:hover .accreditation__track,
.accreditation__track:focus-within { animation-play-state: paused; }
.accreditation__item {
	flex: 0 0 auto; width: 240px; margin-right: 32px;
	display: flex; flex-direction: column;
	align-items: center; gap: 14px; text-align: center;
}
@keyframes lb-marquee {
	from { transform: translateX(0); }
	to   { transform: translateX(-50%); }
}
/* Respect reduced-motion: stop the animation and let users scroll the row by hand. */
@media (prefers-reduced-motion: reduce) {
	.accreditation__slider { overflow-x: auto; }
	.accreditation__track { animation: none; }
}
.accreditation__item img { height: 72px; width: auto; object-fit: contain; }
.accreditation__rainbow { display: inline-flex; }
.accreditation__rainbow svg { height: 72px; width: 72px; border-radius: 50%; }
.accreditation__item h4 {
	font-family: var(--lb-font-heading); font-weight: 500; font-size: 20px;
	color: var(--lb-grey-950); margin-top: 4px;
}
.accreditation__item p { font-family: var(--lb-font-body); font-weight: 300; font-size: 12px; color: var(--lb-grey-500); line-height: 1.5; max-width: 220px; }


/* ---------- 9. TECH ---------- */
.section-tech { position: relative; background: var(--lb-ink); color: var(--lb-white); padding-block: 0; overflow: hidden; }
.tech__frame { position: relative; line-height: 0; font-size: 0; }
.tech__bg { display: block; width: 100%; height: auto; }
/* right-side scrim so the copy stays legible over the photo */
.tech__overlay { position: absolute; inset: 0; line-height: normal; font-size: initial; }
.tech__overlay::before {
	content: ''; position: absolute; inset: 0;
	background: linear-gradient(90deg, transparent 38%, rgba(0,0,0,0.35) 62%, rgba(0,0,0,0.62) 100%);
}
.tech__overlay .tech__copy {
	position: absolute; top: 50%; right: max(48px, calc((100% - 1200px) / 2 + 24px));
	transform: translateY(-50%);
	width: min(42%, 560px);
}
.tech__copy { display: flex; flex-direction: column; gap: 22px; }
.tech__lead { font-family: var(--lb-font-body); font-weight: 300; font-size: 16px; color: var(--lb-white-90); line-height: 1.6; max-width: 540px; }
.tech__features { display: flex; flex-direction: column; gap: 8px; }
.tech__features li {
	font-family: var(--lb-font-body); font-weight: 500; font-size: 13px;
	letter-spacing: 2px; text-transform: uppercase;
	color: var(--lb-white); padding-left: 22px; position: relative;
}
.tech__features li::before {
	content: '•'; position: absolute; left: 0; top: -1px;
	color: var(--lb-cream); font-size: 18px; line-height: 1;
}

/* ---------- 10. RESULTS ---------- */
.section-results { background: var(--lb-white); padding-block: 140px; }
.results__grid {
	display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px;
	margin-bottom: 56px;
}
.result-card { margin: 0; display: flex; flex-direction: column; }
.result-card__compare {
	position: relative; aspect-ratio: 1; overflow: hidden;
	border-radius: var(--lb-radius-md); background: var(--lb-ink);
}
.result-card__compare img {
	position: absolute; inset: 0; width: 100%; height: 100%;
	object-fit: cover;
}
.result-card__before { z-index: 1; }
.result-card__after { z-index: 2; clip-path: inset(0 0 0 50%); transition: none; }
.result-card__compare { cursor: ew-resize; user-select: none; }
.result-card__compare.is-dragging { cursor: grabbing; }
.compare-handle {
	position: absolute; top: 0; bottom: 0;
	width: 2px; background: var(--lb-white);
	left: 50%; z-index: 4; pointer-events: none;
	box-shadow: 0 0 12px rgba(0,0,0,0.4);
}
.compare-handle::before {
	content: ''; position: absolute;
	top: 50%; left: 50%; transform: translate(-50%, -50%);
	width: 44px; height: 44px;
	background: var(--lb-white); border-radius: 50%;
	box-shadow: 0 4px 16px rgba(0,0,0,0.35);
}
.compare-handle::after {
	content: '⇆'; position: absolute;
	top: 50%; left: 50%; transform: translate(-50%, -50%);
	color: var(--lb-ink); font-size: 18px; font-weight: 700;
	line-height: 1;
}
.result-card__tag {
	position: absolute; top: 16px; z-index: 3;
	font-family: var(--lb-font-heading); font-weight: 700; font-size: 14px;
	letter-spacing: 1px; text-transform: uppercase;
	padding: 4px 10px; border-radius: var(--lb-radius-sm);
}
.result-card__tag--before { left: 16px; background: var(--lb-ink); color: var(--lb-white); }
.result-card__tag--after { right: 16px; background: var(--lb-white); color: var(--lb-ink); }
.result-card figcaption {
	display: flex; justify-content: space-between; align-items: baseline;
	padding: 16px 4px 0; gap: 12px;
}
.result-card figcaption h3 {
	font-family: var(--lb-font-heading); font-weight: 500; font-size: 24px; color: var(--lb-ink);
}
.result-card figcaption span {
	font-family: var(--lb-font-heading); font-weight: 400; font-size: 14px;
	color: var(--lb-grey-400); letter-spacing: 1px;
}
.results__parked { display: none; }
.results__footer { text-align: center; }
.results__cta {
	display: inline-block; background: var(--lb-cream); color: var(--lb-ink);
	font-family: var(--lb-font-body); font-weight: 600; font-size: 13px;
	letter-spacing: 2.5px; text-transform: uppercase;
	padding: 18px 48px; border-radius: var(--lb-radius-sm);
	transition: background-color .2s ease, transform .2s ease;
}
.results__cta:hover { background: var(--lb-white); transform: translateY(-2px); }

/* ---------- 11. COMMUNITY ---------- */
.section-community { background: var(--lb-off-white); padding-block: 140px; }
.community__grid {
	display: grid; grid-template-columns: repeat(6, 1fr); gap: 16px;
}
.community-card {
	aspect-ratio: 300/455; overflow: hidden; border-radius: 14px;
	display: block; background: var(--lb-grey-100);
	isolation: isolate; transform: translateZ(0); /* keep the rounded clip over the zoomed img */
}
.community-card img { width: 100%; height: 100%; object-fit: cover; border-radius: inherit; transition: transform .5s ease; }
.community-card:hover img { transform: scale(1.04); }

/* ---------- 12. TESTIMONIALS ---------- */
.section-testimonials { background: var(--lb-white); padding-block: 140px; }
.testimonials__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; }
.testimonials__grid blockquote {
	margin: 0; padding: 40px;
	border: 1px solid var(--lb-grey-100); border-radius: var(--lb-radius-md);
	display: flex; flex-direction: column; gap: 16px;
}
.testimonials__grid p { font-family: var(--lb-font-body); font-weight: 400; font-size: 16px; color: var(--lb-ink); line-height: 1.6; font-style: italic; }
.testimonials__grid footer { font-family: var(--lb-font-body); font-weight: 500; font-size: 12px; letter-spacing: 1px; color: var(--lb-grey-500); text-transform: uppercase; }

/* ---------- 13. LOYALTY ---------- */
.section-loyalty {
	background-color: var(--lb-ink); background-size: cover; background-position: center;
	color: var(--lb-white); padding-block: 100px;
}
.loyalty__inner { display: flex; flex-direction: column; align-items: center; gap: 24px; text-align: center; }
.loyalty__headline {
	font-family: var(--lb-font-heading); font-weight: 600;
	font-size: var(--lb-heading-section); color: var(--lb-cream); line-height: 1;
}
.loyalty__lead { max-width: 720px; font-size: 16px; font-weight: 300; color: var(--lb-white-90); }
.loyalty__cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; width: 100%; max-width: 980px; margin-top: 16px; }
.loyalty__cards > div {
	background: rgba(255,255,255,0.06); padding: 28px 20px;
	border-radius: var(--lb-radius-md); display: flex; flex-direction: column; gap: 8px; align-items: center;
}
.loyalty__cards strong {
	font-family: var(--lb-font-heading); font-weight: 600; font-size: 36px;
	color: var(--lb-cream); line-height: 1;
}
.loyalty__cards span {
	font-family: var(--lb-font-body); font-weight: 500; font-size: 11px;
	letter-spacing: 2px; text-transform: uppercase; color: var(--lb-white);
}
.loyalty__cards p { font-family: var(--lb-font-body); font-weight: 300; font-size: 12px; color: var(--lb-white-70); }

/* ---------- 14. APP ---------- */
.section-app { background: var(--lb-warm-white); padding-block: 120px; }
.app__inner { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; }
.app__copy { display: flex; flex-direction: column; gap: 16px; }
.app__copy p { max-width: 480px; color: var(--lb-grey-500); }
.app__stores { display: flex; gap: 16px; margin-top: 16px; }
.app__stores img { height: 48px; width: auto; object-fit: contain; }
.app__media img { width: 100%; max-width: 420px; height: auto; margin-inline: auto; display: block; border-radius: var(--lb-radius-lg); }

/* ---------- 15. INSTAGRAM GRID ---------- */
.section-instagram { background: var(--lb-white); padding-block: 100px; }
.instagram__grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 12px; }
.ig-tile { aspect-ratio: 1; overflow: hidden; border-radius: var(--lb-radius-sm); display: block; background: var(--lb-grey-100); }
.ig-tile img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease; }
.ig-tile:hover img { transform: scale(1.06); }

/* ---------- 16. BOOKING ---------- */
.section-booking {
	background-color: var(--lb-ink); background-size: cover; background-position: center;
	color: var(--lb-white); padding-block: 140px;
}
.booking__inner { max-width: 820px; margin-inline: auto; display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; }
.booking__headline { color: var(--lb-white); margin: 8px 0 28px; }
/* Figma: League Spartan, "Book" bold — not the italic serif (extra specificity to beat the global .display-lg-mixed em below) */
.section-booking .booking__headline em { font-family: var(--lb-font-heading); font-weight: 700; font-style: normal; letter-spacing: 0; }
.booking__ctas { display: flex; gap: 20px; flex-wrap: wrap; justify-content: center; }
.booking__btn {
	display: inline-block;
	background: rgba(255,255,255,0.10);
	-webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
	border: 1px solid rgba(255,255,255,0.50); color: var(--lb-white);
	font-family: var(--lb-font-body); font-weight: 500; font-size: 12px;
	letter-spacing: 2.5px; text-transform: uppercase;
	padding: 18px 44px;
	transition: background-color .2s ease, color .2s ease, border-color .2s ease;
}
.booking__btn:hover { background: var(--lb-cream); border-color: var(--lb-cream); color: var(--lb-ink); }
.booking__note {
	font-family: var(--lb-font-body); font-weight: 300; font-size: 13px;
	color: var(--lb-white-70); margin-top: 24px; letter-spacing: 0.5px;
}

/* ---------- 17. CONTACT ---------- */
.section-contact { background: var(--lb-ink); color: var(--lb-white); padding-block: 140px; }
.contact__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; max-width: 1024px; margin-inline: auto; }
.contact-card {
	background: rgba(255,255,255,0.04); border: 1px solid var(--lb-white-20);
	border-radius: var(--lb-radius-md); padding: 40px;
	display: flex; flex-direction: column; gap: 12px;
}
.contact-card h3 {
	font-family: var(--lb-font-heading); font-weight: 500; font-size: 30px;
	color: var(--lb-white); line-height: 1.2;
}
.contact-card p, .contact-card a { font-family: var(--lb-font-body); font-weight: 400; font-size: 14px; color: var(--lb-white-90); }
.contact-card a:hover { color: var(--lb-cream); }
.contact-card__map { margin-top: 8px; color: var(--lb-cream); font-weight: 500; }

/* ---------- SITE FOOTER ---------- */
/* ---------- FULL-BLEED SOCIAL STRIP ---------- */
.social-strip { width: 100%; background: var(--lb-ink); font-size: 0; }
.social-strip img { display: block; width: 100%; height: auto; }

/* ---------- FOOTER ---------- */
.site-footer { background: var(--lb-ink); color: var(--lb-white); padding: 64px 0 32px; }
.site-footer__logo { display: flex; justify-content: center; margin-bottom: 56px; }
.site-footer__logo img { width: auto; height: 84px; }

.site-footer__cols {
	display: grid; grid-template-columns: 1.25fr 1.25fr 1fr 1fr; gap: 40px 32px;
}
.site-footer h4 {
	font-family: var(--lb-font-body); font-weight: 600; font-size: 11px;
	letter-spacing: 3px; text-transform: uppercase; color: var(--lb-white);
	margin-bottom: 20px;
}
.site-footer a { color: var(--lb-white-70); transition: color .2s ease; }
.site-footer a:hover { color: var(--lb-cream); }

/* Clinic columns */
.footer-clinic ul { display: flex; flex-direction: column; gap: 18px; }
.footer-clinic li {
	display: flex; gap: 12px; align-items: flex-start;
	font-family: var(--lb-font-body); font-weight: 300; font-size: 14px; color: var(--lb-white-70);
	line-height: 1.5;
}
.footer-ico { flex: 0 0 auto; color: var(--lb-cream); margin-top: 2px; }
.footer-ico svg { width: 16px; height: 16px; display: block; }
.footer-maps {
	display: inline-flex; align-items: center; gap: 8px; margin-top: 24px;
	font-family: var(--lb-font-body); font-weight: 500; font-size: 11px;
	letter-spacing: 2px; text-transform: uppercase; color: var(--lb-white-70);
}
.footer-maps svg { width: 14px; height: 14px; }

/* Link columns (two stacked groups each) */
.footer-links { display: flex; flex-direction: column; gap: 36px; }
.footer-links ul { display: flex; flex-direction: column; gap: 14px; }
.footer-links a { font-family: var(--lb-font-body); font-weight: 300; font-size: 14px; }

/* Socials */
.site-footer__socials { display: flex; gap: 14px; margin-top: 48px; }
.site-footer__socials a {
	width: 44px; height: 44px; border: 1px solid var(--lb-white-20);
	display: inline-flex; align-items: center; justify-content: center; color: var(--lb-white);
	transition: background-color .2s ease, color .2s ease, border-color .2s ease;
}
.site-footer__socials a:hover { background: var(--lb-cream); border-color: var(--lb-cream); color: var(--lb-ink); }
.site-footer__socials svg { width: 18px; height: 18px; }

.site-footer__divider { border: 0; border-top: 1px solid var(--lb-white-20); margin: 40px 0 24px; }
.site-footer__bottom {
	display: flex; justify-content: space-between; align-items: center;
	font-family: var(--lb-font-body); font-weight: 400; font-size: 12px;
	letter-spacing: 2px; text-transform: uppercase; color: var(--lb-white-40);
}
.site-footer__legal-nav { display: flex; gap: 32px; }
.site-footer__legal-nav a { color: var(--lb-white-40); font-size: 12px; letter-spacing: 2px; }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 1180px) {
	.treatments__grid { grid-template-columns: repeat(2, 1fr); }
	.community__grid { grid-template-columns: repeat(3, 1fr); }
	.instagram__grid { grid-template-columns: repeat(4, 1fr); }
	.clinics__grid { grid-template-columns: 1fr 1fr; grid-auto-rows: 500px; }
	.accreditation__item { width: 220px; }
	.why__grid { grid-template-columns: repeat(2, 1fr); }
	.why__pricing { grid-template-columns: repeat(2, 1fr); }
	.testimonials__grid { grid-template-columns: 1fr; max-width: 720px; margin-inline: auto; }
	.results__grid { grid-template-columns: repeat(2, 1fr); }
	/* tighten the copy column on mid screens */
	.tech__overlay .tech__copy { width: min(48%, 420px); right: 40px; }
	.app__inner { grid-template-columns: 1fr; }
	.contact__grid { grid-template-columns: 1fr; max-width: 600px; }
}
@media (max-width: 1024px) {
	.site-header__inner { grid-template-columns: 1fr auto auto; padding-inline: 24px; }
	.site-header__tagline { display: none; }
	.site-header__logo img { height: 64px; }
}
@media (max-width: 880px) {
	.section { padding-block: 80px; }
	.section__head { margin-bottom: 40px; }
	/* 3-class selectors so these win over page-css hero overrides (treatment/faq/blog/etc.) */
	.section.section-hero { min-height: 640px; }
	.section.section-hero .hero__content { padding-top: 190px; padding-bottom: 150px; padding-inline: 24px; }
	.hero__headline { white-space: normal; }
	.hero__sub { font-size: 14px; }
	.hero__cta .btn { font-size: 10px; padding: 12px 20px; }
	.section.section-hero .hero__scroll { bottom: 84px; }
	.section-hero.hero--centered .hero__content { padding-top: 110px; padding-bottom: 150px; }
	.hero__bottom { padding: 16px 20px 20px; }
	.hero__bottom-left .small, .hero__bottom-left .strong { font-size: 9px; letter-spacing: 2px; }

	.treatments__grid { grid-template-columns: 1fr; }
	.section-treatments { background: var(--lb-ink); } /* cards stack on mobile — drop the two-tone */
	/* Tech: stack photo then copy — overlay won't fit over the shrunken image */
	.tech__overlay { position: static; }
	.tech__overlay::before { display: none; }
	.tech__overlay .tech__copy {
		position: static; transform: none; width: auto;
		padding: 48px 24px 64px; text-align: left;
	}
	/* No hover on touch — show the expanded state by default */
	.treatment-card__overlay { opacity: 1; }
	.treatment-card__title { opacity: 0; }
	.treatment-card__hover { opacity: 1; transform: none; pointer-events: auto; }
	.community__grid { grid-template-columns: repeat(2, 1fr); }
	.instagram__grid { grid-template-columns: repeat(3, 1fr); }
	.clinics__grid { grid-template-columns: 1fr; grid-auto-rows: 400px; }
	.accreditation__item { width: 220px; }
	.why__grid { grid-template-columns: 1fr; }
	.why__pricing { grid-template-columns: 1fr 1fr; }
	.loyalty__cards { grid-template-columns: repeat(2, 1fr); }
	.results__grid { grid-template-columns: 1fr; }
	.process__grid { grid-template-columns: 1fr; }
	/* Mobile: title + caption flow from the bottom instead of fixed offsets, so wrapping text can't overlap */
	.process-step {
		aspect-ratio: 4/3;
		display: flex; flex-direction: column; justify-content: flex-end;
		padding: 24px;
	}
	.process-step h3 { position: static; font-size: 32px; margin-bottom: 10px; }
	.process-step p { position: static; }
	.site-footer__cols { grid-template-columns: 1fr 1fr; gap: 40px 24px; }
	.nav-tile__body{margin-top: 30px;}
}
@media (max-width: 600px) {
	.site-header__actions .btn--primary { padding: 10px 16px; font-size: 10px; letter-spacing: 2px; }
	.site-header__logo img { height: 52px; }
	.hero__bottom { flex-direction: column; gap: 16px; align-items: flex-start; }
	.hero__bottom-right { align-items: flex-start; }
	/* one centered card per view on small screens (no half-peek) */
	.accreditation__item { width: 200px; margin-right: 16px; }
	.loyalty__cards { grid-template-columns: 1fr; }
	.community__grid { grid-template-columns: 1fr; }
	.instagram__grid { grid-template-columns: repeat(2, 1fr); }
	.site-footer__cols { grid-template-columns: 1fr; }
	.site-footer__bottom { flex-direction: column; gap: 16px; text-align: center; }
	
}

/* =========================================================
   HOME REVISIONS (matching Figma 2026-05-29 walkthrough)
   ========================================================= */

/* Mixed-font heading variant (e.g. "Client Love" with italic Love).
   The italic word uses Playfair Display serif italic; rest is League Spartan. */
.display-lg-mixed {
	font-family: var(--lb-font-heading); font-weight: 500;
	font-size: var(--lb-heading-section); line-height: 1.05;
	overflow-wrap: break-word; hyphens: none;
}
.display-lg-mixed em {
	font-family: var(--lb-font-display); font-weight: 400; font-style: italic;
	letter-spacing: -0.5px;
}
.section-tech .display-lg--serif { font-size: var(--lb-heading-section) !important; }

/* ---------- TECH SECTION OVERRIDES (smaller cream cta) ---------- */
.section-tech .display-lg--serif { font-family: var(--lb-font-display); font-weight: 400; letter-spacing: -1px; font-size: var(--lb-heading-section); }
.tech__cta {
	align-self: flex-start;
	font-family: var(--lb-font-body); font-weight: 500; font-size: 11px;
	letter-spacing: 2.5px; text-transform: uppercase;
	background: var(--lb-cream); color: var(--lb-ink);
	padding: 14px 28px; border-radius: 4px;
	transition: background-color .2s ease;
}
.tech__cta:hover { background: var(--lb-white); }

/* ---------- TESTIMONIALS w/ STARS + GOOGLE ---------- */
.section-testimonials .display-lg-mixed { color: var(--lb-ink); }
.testimonials__sub {
	display: inline-flex; align-items: center; gap: 12px; justify-content: center;
	margin-top: 16px;
	font-family: var(--lb-font-body); font-weight: 500; font-size: 13px;
	letter-spacing: 2.5px; text-transform: uppercase; color: var(--lb-grey-500);
}
.testimonials__stars { color: var(--lb-ink); letter-spacing: 3px; font-size: 16px; }
.testimonials__google {
	font-family: 'Poppins', sans-serif; font-weight: 600; font-size: 16px;
	text-transform: none; letter-spacing: 0; color: #4285F4;
}
.testimonials__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-top: 24px; }
.testimonials__grid .testimonial {
	margin: 0; padding: 24px;
	border: 1px solid var(--lb-grey-100); border-radius: 4px;
	background: var(--lb-white);
	display: flex; flex-direction: column; gap: 10px;
}
.testimonial__stars { color: var(--lb-ink); font-size: 12px; letter-spacing: 2px; }
.testimonials__grid .testimonial p {
	font-family: var(--lb-font-body); font-weight: 400; font-size: 13px;
	line-height: 1.5; color: var(--lb-grey-700); font-style: italic;
}
.testimonials__grid .testimonial footer {
	display: flex; justify-content: space-between; align-items: center;
	padding-top: 12px; border-top: 1px solid var(--lb-grey-100); margin-top: auto;
}
.testimonial__name { font-family: var(--lb-font-heading); font-weight: 500; font-size: 18px; color: var(--lb-ink); }
.testimonial__google-icon { width: 18px; height: 18px; opacity: 0.85; }
<!--
/*  ---------- new css added by teachincal support ----------
 .testimonials__footer { text-align: center; margin-top: 32px; } */


.testimonials__footer {
    text-align: center;
    margin-top: 32px;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 24px;
}
.btn--ghost-dark {
	display: inline-flex; align-items: center; gap: 8px;
	font-family: var(--lb-font-body); font-weight: 500; font-size: 11px;
	letter-spacing: 2.5px; text-transform: uppercase;
	background: transparent; color: var(--lb-ink);
	border: 1px solid var(--lb-ink); padding: 14px 32px;
	transition: background-color .2s ease, color .2s ease;
}
.btn--ghost-dark:hover { background: var(--lb-ink); color: var(--lb-white); }

/* ---------- LOYALTY (light bg, 2 big cards) ---------- */
.section-loyalty-home {
	background-color: var(--lb-off-white);
	background-size: cover; background-position: top;
	padding-block: 120px; color: var(--lb-ink);
}
.loyalty-home__inner { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; }
.loyalty-home__heading { color: var(--lb-ink); margin: 16px 0 24px; font-weight: 400; }
/* Figma: all League Spartan, "Our" bold — not the italic serif */
.loyalty-home__heading em { font-family: var(--lb-font-heading); font-weight: 700; font-style: normal; letter-spacing: 0; }
.loyalty-home__lead { font-family: var(--lb-font-body); font-weight: 300; font-size: 16px; line-height: 1.7; color: var(--lb-grey-700); margin-bottom: 16px; }
.loyalty-home__sub { font-family: var(--lb-font-body); font-weight: 300; font-size: 14px; line-height: 1.7; color: var(--lb-grey-500); margin-bottom: 32px; }
.btn--ink-pill {
	display: inline-flex; align-items: center;
	background: var(--lb-ink); color: var(--lb-white);
	font-family: var(--lb-font-body); font-weight: 500; font-size: 11px;
	letter-spacing: 2.5px; text-transform: uppercase;
	padding: 16px 36px;
}
.btn--ink-pill:hover { background: var(--lb-cream); color: var(--lb-ink); }
.loyalty-home__cards { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.loyalty-home-card {
	padding: 48px 28px; text-align: center;
	background: transparent;
	border: 2px solid #FDEBBB; border-radius: 0;
	display: flex; flex-direction: column; gap: 12px;
	transition: background-color .3s ease, transform .3s ease;
}
.loyalty-home-card:hover { background: rgba(253,235,187,0.35); transform: translateY(-4px); }
.loyalty-home-card__icon { display: flex; justify-content: center; line-height: 0; margin-bottom: 8px; }
.loyalty-home-card__icon img { width: 48px; height: 48px; object-fit: contain; }
.loyalty-home-card h3 {
	font-family: var(--lb-font-body); font-weight: 500; font-size: 11px;
	letter-spacing: 2.5px; text-transform: uppercase; color: var(--lb-grey-500);
}
.loyalty-home-card__amount {
	font-family: var(--lb-font-heading); font-weight: 500; font-size: 28px;
	color: var(--lb-ink); margin-top: 4px;
}

/* ---------- APP / EASY BOOKING (light) ---------- */
.section-app-light { background: var(--lb-warm-white); padding-block: 120px; }
.app-light__inner { display: grid; grid-template-columns: 1.2fr 1fr; gap: 64px; align-items: center; }
.app-light__heading { margin: 16px 0 16px; color: var(--lb-ink); }
/* Figma: all League Spartan, "Easy" bold — not the italic serif */
.app-light__heading em { font-family: var(--lb-font-heading); font-weight: 700; font-style: normal; letter-spacing: 0; }
.app-light__lead { font-family: var(--lb-font-body); font-weight: 300; font-size: 16px; color: var(--lb-grey-500); margin-bottom: 32px; }
.app-light__stores { display: flex; gap: 16px; flex-wrap: wrap; align-items: center; }
.store-badge { display: inline-flex; transition: transform .2s ease; }
.store-badge img { height: 44px; width: auto; display: block; }
.store-badge:hover { transform: translateY(-2px); }

/* Phone image */
.app-light__phone { display: flex; justify-content: center; }
.app-light__phone-img { width: 100%; max-width: 420px; height: auto; display: block; }

/* ---------- INSTAGRAM SECTION (with play overlay + stats) ---------- */
.instagram__head {
	display: flex; justify-content: space-between; align-items: flex-end;
	margin-bottom: 48px;
}
.instagram__heading { color: var(--lb-ink); margin-top: 8px; font-weight: 600; }
/* Figma: all League Spartan, "baseuk" lighter grey — not the italic serif */
.instagram__heading em { font-family: var(--lb-font-heading); font-weight: 400; font-style: normal; color: var(--lb-grey-500); }
.instagram__socials { display: flex; gap: 20px; color: var(--lb-grey-700); }
.instagram__socials a:hover { color: var(--lb-cream); }

.instagram__track {
	display: grid; grid-auto-flow: column; grid-auto-columns: calc((100% - 60px) / 4.3);
	gap: 20px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth;
	padding-bottom: 4px; scrollbar-width: none; -ms-overflow-style: none;
}
.instagram__track::-webkit-scrollbar { display: none; }
.ig-tile { position: relative; scroll-snap-align: start; aspect-ratio: 3/4.1; overflow: hidden; border-radius: 8px; background: var(--lb-grey-100); }
.ig-tile img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease; }
.ig-tile:hover img { transform: scale(1.06); }
.ig-tile__play {
	position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 2;
	width: 56px; height: 56px; border-radius: 50%;
	background: rgba(255,255,255,0.92);
	display: inline-flex; align-items: center; justify-content: center;
}
.ig-tile__play::before {
	content: ''; display: block;
	border-style: solid; border-width: 9px 0 9px 15px;
	border-color: transparent transparent transparent var(--lb-ink);
	margin-left: 3px;
}
.ig-tile__stats {
	position: absolute; left: 14px; bottom: 14px; z-index: 2;
	display: flex; gap: 14px;
	font-family: 'Poppins'; font-weight: 500; font-size: 12px;
	color: var(--lb-white); text-shadow: 0 1px 4px rgba(0,0,0,0.6);
}
.ig-tile__stat { display: inline-flex; align-items: center; gap: 5px; }
.instagram__nav { display: flex; justify-content: flex-end; gap: 12px; margin-top: 32px; }
.instagram__arrow {
	width: 48px; height: 48px; border-radius: 8px;
	border: 1px solid var(--lb-grey-100); background: var(--lb-white);
	color: var(--lb-ink); font-size: 18px; cursor: pointer;
	display: flex; align-items: center; justify-content: center;
	transition: background-color .2s ease, color .2s ease;
}
.instagram__arrow:hover { background: var(--lb-ink); color: var(--lb-cream); }
@media (max-width: 1180px) { .instagram__track { grid-auto-columns: calc((100% - 40px) / 3.2); } }
@media (max-width: 880px)  { .instagram__track { grid-auto-columns: calc((100% - 20px) / 2.2); } }
@media (max-width: 600px)  { .instagram__track { grid-auto-columns: 80%; } }

/* ---------- CONTACT (light bg with form + image) ---------- */
.section-contact-home { background: var(--lb-white); padding-block: 120px 80px; }
.contact-home__inner { display: grid; grid-template-columns: 1.1fr 1fr; gap: 64px; align-items: center; }
.contact-home__heading { color: var(--lb-ink); margin-top: 12px; margin-bottom: 32px; }
/* The two enquiry buttons had no container layout, so they collapsed onto each
   other. Stack them with a gap, equal width, centred labels. */
.contact-home__leadforms { display: flex; flex-direction: column; gap: 14px; align-items: stretch; max-width: 360px; }
.contact-home__leadforms .btn { justify-content: center; }
/* Figma: League Spartan, "Contact" bold — not the italic serif */
.contact-home__heading em { font-family: var(--lb-font-heading); font-weight: 700; font-style: normal; letter-spacing: 0; }
.contact-home__form { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.contact-home__form input,
.contact-home__form select,
.contact-home__form textarea {
	font-family: var(--lb-font-body); font-size: 14px; padding: 14px 0;
	background: transparent; color: var(--lb-ink);
	border: 0; border-bottom: 1px solid var(--lb-grey-100);
	border-radius: 0;
}
.contact-home__form input:focus, .contact-home__form select:focus, .contact-home__form textarea:focus {
	outline: none; border-bottom-color: var(--lb-ink);
}
.contact-home__form select { color: var(--lb-grey-500); }
/* Figma: only First/Last share a row — Email, Phone, Clinic and Message are full width */
.contact-home__form input[type="email"],
.contact-home__form input[type="tel"],
.contact-home__form select { grid-column: span 2; }
.contact-home__form textarea { grid-column: span 2; resize: vertical; }
.contact-home__send {
	grid-column: span 2; justify-self: start; margin-top: 16px;
	background: var(--lb-cream); color: var(--lb-ink);
	border: 0; padding: 14px 36px;
	font-family: var(--lb-font-body); font-weight: 500; font-size: 12px;
	letter-spacing: 2.5px; text-transform: uppercase; cursor: pointer;
	transition: background-color .2s ease;
}
.contact-home__send:hover { background: var(--lb-ink); color: var(--lb-cream); }
.contact-home__media { margin: 0; aspect-ratio: 1; overflow: hidden; border-radius: 4px; background: var(--lb-grey-100); }
.contact-home__media img { width: 100%; height: 100%; object-fit: cover; }

/* Responsive */
@media (max-width: 1180px) {
	.testimonials__grid { grid-template-columns: repeat(2, 1fr); }
	.loyalty-home__inner { grid-template-columns: 1fr; gap: 40px; }
	.loyalty-home__cards { grid-template-columns: 1fr 1fr; }
	.app-light__inner { grid-template-columns: 1fr; gap: 48px; }
	.app-light__phone { order: -1; }
	.instagram__grid { grid-template-columns: repeat(3, 1fr); }
	.contact-home__inner { grid-template-columns: 1fr; }
}
@media (max-width: 880px) {
	.section-loyalty-home, .section-app-light, .section-contact-home { padding-block: 80px; }
	.testimonials__grid { grid-template-columns: 1fr; }
	.loyalty-home__cards { grid-template-columns: 1fr; }
	.instagram__grid { grid-template-columns: repeat(2, 1fr); }
	.contact-home__form { grid-template-columns: 1fr; }
	/* every field back to the single column (span 2 would force an implicit 2nd col) */
	.contact-home__form input,
	.contact-home__form select,
	.contact-home__form textarea,
	.contact-home__send { grid-column: 1; }
	.contact-home__send { justify-self: stretch; width: 100%; margin-top: 8px; padding-block: 16px; }
	/* offer email capture stacks: input full width, button below */
	.offer__form { flex-direction: column; gap: 12px; }
	.offer__form input { width: 100%; border-right: 1px solid var(--lb-white-40); }
	.offer__form button { width: 100%; padding-block: 16px; }
	/* mega nav: stack tiles, always show sublinks (no hover on touch) */
	.nav-mega__grid { display: block; height: auto; padding: 0 16px 32px; }
	.nav-tile { min-height: 170px; margin-bottom: 12px; padding: 24px; }
	.nav-mega .nav-tile__links { max-height: none; opacity: 1; margin-top: 14px; }
	.nav-mega .nav-tile__links--two { grid-template-columns: 1fr; }
	.instagram__head { flex-direction: column; align-items: flex-start; gap: 16px; }
}

/* ---------- form submission notice ---------- */
.lb-form-note {
	background: var(--lb-cream); color: var(--lb-ink);
	font-family: var(--lb-font-body); font-weight: 500; font-size: 15px;
	padding: 18px 24px; margin-bottom: 20px;
}
.lb-form-note--error { background: #2a2a2a; color: var(--lb-white); }

/* =========================================================
   Mobile alignment — left-align body sections site-wide
   Client: "on mobile the sections and fonts aren't lining up."
   Cause: body sections flip between centred and left-aligned as you
   scroll. Fix: one consistent LEFT edge for headings + copy on mobile.
   Hero stays centred (full-bleed, intentional). Once QA'd, the
   page-id scope is dropped so this applies site-wide.
   ========================================================= */
@media (max-width: 880px) {
	/* Left-align headings, copy and eyebrows. !important because the dev set
	   text-align:center inline on many elements (54 across the templates),
	   and inline styles beat normal rules. Mobile-only, so desktop centring
	   (often intentional) is untouched. */
	.section:not(.section-hero) :is(
		h1, h2, h3, h4, h5, p, li, .eyebrow-sm,
		[class$="__head"], [class$="__headline"], [class$="__heading"],
		[class$="__intro"], [class$="__lead"], [class$="__sub"]
	) {
		text-align: left !important;
	}
	/* flex/column inner blocks → pack content to the left edge */
	.section:not(.section-hero) :is(
		[class$="__head"], [class$="__inner"]
	) {
		align-items: flex-start;
	}
}