/* =========================================================
   Hinkley Aesthetics
   Design system. Change the tokens below to reskin the site.
   ========================================================= */

/* ---- Brand typefaces (self-hosted) ---- */
@font-face {
  font-family: 'Garet';
  src: url('../fonts/garet-light.woff2') format('woff2');
  font-weight: 300; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Garet';
  src: url('../fonts/garet-book.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Garet';
  src: url('../fonts/garet-medium.woff2') format('woff2');
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Garet';
  src: url('../fonts/garet-bold.woff2') format('woff2');
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Antura Script';
  src: url('../fonts/antura-script.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}

:root {
  /* Brand palette */
  --cream:      #FAFCF6;  /* page background */
  --sand:       #F5EFDF;  /* soft section fill */
  --sand-2:     #E5D19E;  /* light gold */
  --gold:       #D6B86E;  /* gold */
  --accent:     #AD802A;  /* deep gold, primary accent */
  --accent-dk:  #87521B;  /* brown */
  --ink:        #211A12;  /* espresso, text and dark bands */
  --ink-2:      #2E241A;
  --body:       #4E4234;
  --muted:      #8A7A62;
  --line:       #E7DFCB;
  --white:      #FFFFFF;

  /* Type */
  --display: 'Garet', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
  --sans: 'Garet', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
  --script: 'Antura Script', 'Snell Roundhand', cursive;

  /* Rhythm */
  --wrap: 1240px;
  --wrap-narrow: 820px;
  --gutter: 24px;
  --section: clamp(72px, 9vw, 140px);
  --radius: 2px;
  --radius-lg: 4px;

  /* Garet's x-height is 0.528em and Antura's is 0.504em, so this ratio is the
     scale at which the two share an x-height. It is the one number that makes a
     script word sit ON the line it shares with Garet rather than riding above
     it, and it holds at any size because both are proportions of the em.
     Verified on a 70px headline: both land in the band 217-289.
     This applies wherever the two faces mix. It does NOT apply to a line set
     entirely in the script, such as .signature-quote, where there is no Garet
     x-height to match. */
  --script-scale: 1.048;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--cream);
  color: var(--body);
  font-family: var(--sans);
  font-size: 16.5px;
  font-weight: 400;
  line-height: 1.78;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img { max-width: 100%; display: block; }
a { color: inherit; }

h1, h2, h3, h4 {
  font-family: var(--display);
  color: var(--ink);
  font-weight: 300;
  line-height: 1.1;
  letter-spacing: -0.02em;
  margin: 0 0 0.5em;
}
h1 { font-size: clamp(38px, 5.4vw, 70px); line-height: 1.06; text-wrap: balance; }
h2 { font-size: clamp(29px, 3.9vw, 48px); text-wrap: balance; }
h3 { font-size: clamp(20px, 2.1vw, 26px); line-height: 1.22; letter-spacing: -0.01em; }
h4 { font-size: 19px; letter-spacing: -0.01em; }

/* Antura Script accents. Used sparingly: hero accent line, sign-off, CTA. */
.script {
  font-family: var(--script);
  font-weight: 400;
  letter-spacing: 0;
  color: var(--accent);
  text-transform: none;
  display: inline-block;
  font-size: calc(1em * var(--script-scale));
  /* An inline-block contributes its whole margin box to the line, so a script
     set 1.3x larger than the Garet around it was opening a gap above its line.
     Line-height 1 plus a negative block margin puts the leading back where the
     heading set it; the ascenders and swashes still overhang, uncropped. */
  line-height: 1;
  margin-left: 0.06em; /* script has a tight left side-bearing next to Garet */
}
/* Headings are set tight, so the script's line box needs pulling back in.
   Body copy does not: there the inherited leading already has room. */
h1 .script, h2 .script, h3 .script, h4 .script { margin-block: -0.2em -0.08em; }
.section--ink .script, .hero .script, .cta .script { color: var(--sand-2); }
p { margin: 0 0 1.15em; }
p:last-child { margin-bottom: 0; }

/* ---------- Utilities ---------- */
.wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gutter); }
.wrap-narrow { max-width: var(--wrap-narrow); }
.section { padding: var(--section) 0; }
.section--tight { padding: clamp(56px, 6vw, 96px) 0; }
.section--sand { background: var(--sand); }
.section--ink { background: var(--ink); color: rgba(255,255,255,0.74); }
.section--ink h2, .section--ink h3, .section--ink h4 { color: var(--white); }
.center { text-align: center; }
.lead { font-size: clamp(18px, 1.5vw, 21px); line-height: 1.7; color: var(--body); }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.eyebrow {
  display: block;
  font-size: 11px;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  font-weight: 500;
  color: var(--accent);
  margin-bottom: 20px;
}
.section--ink .eyebrow { color: var(--sand-2); }

.rule { width: 48px; height: 1px; background: var(--accent); border: 0; margin: 24px 0; }
.center .rule { margin-inline: auto; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 16px 34px;
  font-family: var(--sans);
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  text-decoration: none;
  border: 1px solid var(--ink);
  background: var(--ink);
  color: var(--white);
  border-radius: var(--radius);
  cursor: pointer;
  transition: background .4s var(--ease), color .4s var(--ease), border-color .4s var(--ease), transform .4s var(--ease);
}
.btn:hover { background: var(--accent-dk); border-color: var(--accent-dk); color: var(--white); transform: translateY(-1px); }
.btn--ghost { background: transparent; color: var(--ink); border-color: var(--ink); }
.btn--ghost:hover { background: var(--ink); color: var(--white); border-color: var(--ink); }
.btn--light { background: var(--white); color: var(--ink); border-color: var(--white); }
.btn--light:hover { background: var(--accent); border-color: var(--accent); color: var(--white); }
.btn--outline-light { background: transparent; color: var(--white); border-color: rgba(255,255,255,0.5); }
.btn--outline-light:hover { background: var(--white); color: var(--ink); border-color: var(--white); }
.btn-row { display: flex; flex-wrap: wrap; gap: 14px; }
.center .btn-row { justify-content: center; }

.link-arrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 11.5px; font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase;
  text-decoration: none; color: var(--ink); border-bottom: 1px solid var(--accent);
  padding-bottom: 4px; transition: gap .35s var(--ease), color .35s var(--ease);
}
.link-arrow:hover { gap: 14px; color: var(--accent-dk); }

/* ---------- Header ---------- */
.header {
  position: fixed; inset: 0 0 auto 0; z-index: 100;
  transition: background .45s var(--ease), box-shadow .45s var(--ease), border-color .45s var(--ease);
  border-bottom: 1px solid transparent;
}
.header__inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: 24px; height: 100px;
}
.header__brand { position: relative; display: flex; align-items: center; text-decoration: none; z-index: 2; }
.header__brand .logo {
  height: 68px; width: auto; max-width: none;
  transition: opacity .45s var(--ease);
}
/* Gold mark stacks on top of the cream one; grid sizing would inherit the SVG's
   intrinsic 820px width and swallow the burger button on mobile. */
.header__brand .logo--gold { position: absolute; top: 0; left: 0; height: 100%; }
.header__brand .logo--gold { opacity: 0; }
.header.is-solid .header__brand .logo--cream { opacity: 0; }
.header.is-solid .header__brand .logo--gold { opacity: 1; }
/* Drawer open forces the solid state, so the gold mark shows on cream */
body.nav-open .header__brand .logo--cream { opacity: 0; }
body.nav-open .header__brand .logo--gold { opacity: 1; }
.header__nav { display: flex; align-items: center; gap: 34px; }
.header__nav a {
  font-size: 11.5px; font-weight: 500; letter-spacing: 0.15em; text-transform: uppercase;
  text-decoration: none; color: var(--white); position: relative; padding: 6px 0;
  transition: color .45s var(--ease), opacity .3s var(--ease);
}
.header__nav a::after {
  content: ''; position: absolute; left: 0; bottom: 0; height: 1px; width: 0;
  background: currentColor; transition: width .4s var(--ease);
}
.header__nav a:hover::after, .header__nav a[aria-current="page"]::after { width: 100%; }
.header__actions { display: flex; align-items: center; gap: 16px; }
.header .btn { padding: 13px 26px; font-size: 11px; }

/* Scrolled / solid state */
.header.is-solid { background: rgba(250,252,246,0.95); backdrop-filter: blur(12px); border-bottom-color: var(--line); }
.header.is-solid .header__nav a { color: var(--ink); }
.header.is-solid .btn--outline-light { color: var(--ink); border-color: var(--ink); }
.header.is-solid .btn--outline-light:hover { background: var(--ink); color: var(--white); }
.header.is-solid .burger span { background: var(--ink); }

/* Dropdown */
/* Every other nav link is a flex item, and flex blockifies its children, so
   those anchors are blocks whose 6px vertical padding counts toward their
   height. The Treatments link sits inside this wrapper instead, so it stayed
   inline, its padding did not count, and align-items: center placed it 3.5px
   lower than the rest. Blockifying it puts all five on the same line. */
.has-drop { position: relative; }
.has-drop > a { display: block; }
.drop {
  position: absolute; top: calc(100% + 14px); left: 50%; transform: translate(-50%, 8px);
  min-width: 268px; background: var(--white); border: 1px solid var(--line);
  padding: 10px; opacity: 0; visibility: hidden; transition: all .35s var(--ease);
  box-shadow: 0 24px 48px -24px rgba(23,19,15,0.28);
}
.has-drop:hover .drop, .has-drop:focus-within .drop { opacity: 1; visibility: visible; transform: translate(-50%, 0); }
.drop a {
  display: block; color: var(--ink) !important; padding: 11px 14px;
  letter-spacing: 0.1em; font-size: 11.5px; transition: background .3s var(--ease);
}
.drop a::after { display: none; }
.drop a:hover { background: var(--sand); }

/* Burger + mobile drawer */
.burger { display: none; width: 46px; height: 46px; background: none; border: 0; padding: 0;
  position: relative; z-index: 2; cursor: pointer; margin-right: -8px; }
.burger span { left: 8px; width: 30px; }
.burger span { position: absolute; left: 0; height: 1px; width: 100%; background: var(--white); transition: all .4s var(--ease); }
.burger span:nth-child(1) { top: 15px; }
.burger span:nth-child(2) { top: 23px; }
.burger span:nth-child(3) { top: 31px; }
body.nav-open .burger span { background: var(--ink); }
body.nav-open .burger span:nth-child(1) { top: 23px; transform: rotate(45deg); }
body.nav-open .burger span:nth-child(2) { opacity: 0; }
body.nav-open .burger span:nth-child(3) { top: 23px; transform: rotate(-45deg); }

.drawer {
  position: fixed; inset: 0; z-index: 90; background: var(--cream);
  padding: 120px var(--gutter) 48px; overflow-y: auto;
  transform: translateY(-100%); transition: transform .5s var(--ease); visibility: hidden;
}
body.nav-open .drawer { transform: translateY(0); visibility: visible; }
body.nav-open { overflow: hidden; }
.drawer a { display: block; text-decoration: none; color: var(--ink); font-family: var(--display); font-weight: 300; font-size: 27px; letter-spacing: -0.02em; padding: 14px 0; border-bottom: 1px solid var(--line); }
.drawer .drawer__sub a { font-family: var(--sans); font-size: 13px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); border: 0; padding: 8px 0 8px 18px; }
.drawer__foot { margin-top: 36px; display: flex; flex-direction: column; gap: 14px; }
.drawer .drawer__foot .btn {
  width: 100%; font-family: var(--sans); font-size: 12px; letter-spacing: 0.2em;
  text-transform: uppercase; padding: 17px 24px; border: 1px solid var(--ink);
  color: var(--white); background: var(--ink);
}
.drawer .drawer__foot .btn--ghost { background: transparent; color: var(--ink); }
.drawer__meta { font-size: 13px; letter-spacing: 0.06em; color: var(--muted); margin-top: 28px; line-height: 2; }
/* Same specificity as `.drawer a`, so the responsive override below was
   winning on source order and setting the email at menu-link size. */
.drawer .drawer__meta a { display: inline; font-family: var(--sans); font-size: 13px;
  letter-spacing: 0.04em; border: 0; padding: 0; }

/* ---------- Hero ---------- */
.hero { position: relative; min-height: 100svh; display: flex; align-items: flex-end; overflow: hidden; }
.hero--inner { min-height: 62svh; }
.hero__media { position: absolute; inset: 0; }
.hero__media img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.06); animation: heroZoom 14s var(--ease) forwards; }
@keyframes heroZoom { to { transform: scale(1); } }
@media (prefers-reduced-motion: reduce) { .hero__media img { animation: none; transform: none; } }
.hero__media::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(23,19,15,0.62) 0%, rgba(23,19,15,0.28) 38%, rgba(23,19,15,0.78) 100%);
}
.hero__inner { position: relative; z-index: 2; padding-bottom: clamp(64px, 8vw, 116px); padding-top: 175px; max-width: 780px; }
.hero h1 { color: var(--white); margin-bottom: 24px; }
.hero .eyebrow { color: var(--sand-2); }
.hero p { color: rgba(255,255,255,0.86); font-size: clamp(17px, 1.5vw, 20px); max-width: 560px; margin-bottom: 34px; }
.hero__scroll {
  position: absolute; right: var(--gutter); bottom: 42px; z-index: 2;
  writing-mode: vertical-rl; font-size: 10px; letter-spacing: 0.3em; text-transform: uppercase;
  color: rgba(255,255,255,0.7); text-decoration: none;
}
.hero__scroll::after { content: ''; display: block; width: 1px; height: 48px; background: rgba(255,255,255,0.5); margin: 12px auto 0; }

/* ---------- Marquee / trust bar ---------- */
.trust { background: var(--ink); color: rgba(255,255,255,0.7); padding: 22px 0; }
/* Six items no longer fit on one line at any desktop width, and 5 + 1 reads as
   an accident. Constraining the row balances the wrap into 3 + 3. */
.trust__inner { display: flex; flex-wrap: wrap; justify-content: center; max-width: 790px; gap: 10px 26px; font-size: 10.5px; font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase; text-align: center; }
.trust__inner span { display: inline-flex; align-items: center; gap: 12px; }
.trust__inner span::before { content: ''; width: 4px; height: 4px; background: var(--accent); border-radius: 50%; }

/* ---------- Split ---------- */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(40px, 6vw, 90px); align-items: center; }
.split--reverse .split__media { order: 2; }
.split__media { position: relative; }
.split__media img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: var(--radius-lg); }
.split__media--tall img { aspect-ratio: 3 / 4; }
.split__badge {
  position: absolute; bottom: -28px; right: -22px; background: var(--sand);
  /* 15px at the foot, not 20: the label's own line box carries ~5px of slack
     under its ink. Garet has ordinary metrics, so this is stable. */
  padding: 20px 30px 15px; max-width: 240px; border-radius: var(--radius-lg);
}
/* font-weight: 400 is load-bearing. <strong> defaults to bold, and Antura is
   supplied at 400 only, so browsers were either synthesising a faux bold or
   falling back to another script face for the bold weight. Different face,
   different vertical metrics, which is why this box looked correctly spaced
   in one browser and badly spaced in another. */
/* The wordmark is an inline SVG with a tight viewBox, so its box IS its ink.
   Vertical placement is geometry rather than font metrics, which is what makes
   it sit identically in Safari and Chrome. See build/build.js for why. */
.badge-name { display: block; width: 148px; height: auto; color: var(--accent-dk); margin-bottom: 6px; }
.split__badge span { display: block; font-size: 10px; font-weight: 500; line-height: 1.45; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); }
.signature-quote { font-family: var(--script); font-size: 40px; line-height: 1.3; color: var(--accent); margin-top: 18px; }

/* ---------- Section head ---------- */
.sec-head { max-width: 640px; margin-bottom: clamp(40px, 5vw, 64px); }
.sec-head.center { margin-inline: auto; }
.sec-head p { color: var(--muted); }
.sec-head--row { display: flex; align-items: flex-end; justify-content: space-between; gap: 40px; max-width: none; }
.sec-head--row > div { max-width: 620px; }

/* ---------- Cards ---------- */
.grid { display: grid; gap: 28px; }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }

.card {
  background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-lg);
  overflow: hidden; display: flex; flex-direction: column; text-decoration: none;
  transition: transform .5s var(--ease), box-shadow .5s var(--ease), border-color .5s var(--ease);
}
a.card:hover { transform: translateY(-6px); box-shadow: 0 30px 60px -34px rgba(23,19,15,0.35); border-color: var(--sand-2); }
.card__media { overflow: hidden; background: var(--sand); }
.card__media img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; transition: transform 1s var(--ease); }
a.card:hover .card__media img { transform: scale(1.05); }
.card__body { padding: 28px 28px 30px; flex: 1; display: flex; flex-direction: column; }
.card__eyebrow { font-size: 10px; font-weight: 500; letter-spacing: 0.2em; text-transform: uppercase; color: var(--accent); margin-bottom: 12px; }
.card h3 { margin-bottom: 12px; }
.card p { font-size: 15.5px; line-height: 1.7; color: var(--body); }
.card__more { margin-top: auto; padding-top: 20px; font-size: 10.5px; font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink); display: inline-flex; align-items: center; gap: 8px; }
a.card:hover .card__more { color: var(--accent-dk); }

/* "See everything" tile that completes the signature grid */
.card--cta {
  background: var(--ink); border-color: var(--ink); color: rgba(255,255,255,0.7);
  justify-content: center; padding: 44px 34px; text-align: left;
}
.card--cta h3 { color: var(--white); }
.card--cta p { color: rgba(255,255,255,0.66); }
.card--cta .card__eyebrow { color: var(--sand-2); }
.card--cta .card__more { color: var(--white); }
a.card--cta:hover { background: var(--accent-dk); border-color: var(--accent-dk); }

/* Centre a trailing partial row of quote cards */
.quotes--tail { max-width: calc(66.666% - 8px); margin-inline: auto; grid-template-columns: repeat(2, 1fr); }

/* Treatment menu list */
.menu-filters { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 44px; }
.chip {
  border: 1px solid var(--line); background: transparent; color: var(--body);
  padding: 10px 22px; border-radius: 100px; font-family: var(--sans); font-size: 10.5px; font-weight: 500;
  letter-spacing: 0.16em; text-transform: uppercase; cursor: pointer;
  transition: all .35s var(--ease);
}
.chip:hover { border-color: var(--ink); color: var(--ink); }
.chip.is-active { background: var(--ink); border-color: var(--ink); color: var(--white); }

.tcard { display: grid; grid-template-columns: 200px 1fr; gap: 0; border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden; background: var(--white); }
.tcard img { width: 100%; height: 100%; min-height: 230px; object-fit: cover; object-position: center 30%; background: var(--sand); }
.tcard__body { padding: 28px 30px; }
.tcard__cat { font-size: 10px; font-weight: 500; letter-spacing: 0.2em; text-transform: uppercase; color: var(--accent); margin-bottom: 10px; display: block; }
.tcard h3 { font-size: 25px; margin-bottom: 10px; }
.tcard p { font-size: 15.5px; margin-bottom: 0; }
.tcard .link-arrow { margin-top: 16px; }
.is-hidden { display: none !important; }

/* ---------- Numbered steps ---------- */
.steps { display: grid; gap: 0; }
.step { display: grid; grid-template-columns: 120px 1fr; gap: 30px; padding: 34px 0; border-top: 1px solid var(--line); align-items: start; }
.step:last-child { border-bottom: 1px solid var(--line); }
.step__n { font-family: var(--display); font-weight: 300; font-size: 40px; color: var(--gold); line-height: 1; letter-spacing: -0.03em; }
.step h3 { margin-bottom: 10px; }
.step p { margin-bottom: 0; color: var(--muted); }
.section--ink .step { border-color: rgba(255,255,255,0.14); }
.section--ink .step p { color: rgba(255,255,255,0.66); }

/* ---------- Values ---------- */
.value { padding: 34px 0; border-top: 1px solid var(--line); }
.value h4 { font-size: 22px; margin-bottom: 10px; }
.value p { font-size: 15.5px; color: var(--muted); margin: 0; }
.section--ink .value { border-color: rgba(255,255,255,0.14); }
.section--ink .value p { color: rgba(255,255,255,0.62); }

/* ---------- Results ---------- */
.results { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px 24px; align-items: start; }
.results--strip { grid-template-columns: repeat(3, 1fr); }

.result { margin: 0; cursor: zoom-in; }
/* Two frames, and only two. Clinic photography is normalised to 4:3 at build
   time; supplier cards stay at their native 2.44:1 because the attribution is
   printed into the artwork and cropping it would make the image unusable.
   Tiles are sorted so a row is never mixed, so every row comes out level. */
.result img {
  display: block; width: 100%; height: auto;
  aspect-ratio: 4 / 3; object-fit: cover;
  border-radius: var(--radius-lg); background: var(--sand);
  transition: opacity .5s var(--ease);
}
.result--wide img { aspect-ratio: 1600 / 655; }
.result:hover img { opacity: 0.92; }
.section--ink .result img { background: rgba(255,255,255,0.05); }

/* Two lines, two weights. The treatment reads first, the concern sits under it,
   which is what stops a mixed gallery looking like noise. */
.result figcaption {
  display: flex; flex-direction: column; gap: 3px;
  padding: 14px 2px 0; border-top: 1px solid var(--line); margin-top: 14px;
}
.result__treatment {
  font-size: 10px; font-weight: 500; letter-spacing: 0.2em;
  text-transform: uppercase; color: var(--accent);
}
.result__concern { font-size: 15px; color: var(--body); line-height: 1.4; }

.section--ink .result figcaption { border-color: rgba(255,255,255,0.16); }
.section--ink .result__treatment { color: var(--sand-2); }
.section--ink .result__concern { color: rgba(255,255,255,0.78); }

.disclaimer { font-size: 12.5px; color: var(--muted); margin-top: 36px; line-height: 1.7; max-width: 780px; }
.section--ink .disclaimer { color: rgba(255,255,255,0.5); }

/* ---------- Testimonials ---------- */
.quotes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; grid-auto-rows: 1fr; }
.quote {
  background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-lg);
  padding: 36px 32px; display: flex; flex-direction: column;
  min-height: 340px; /* keeps every card the same size across both rows */
}
.quote blockquote { flex: 1; }
.quote figcaption { margin-top: auto; padding-top: 4px; }
/* defined after .quotes so the two-up tail row keeps card width identical to the row above */
.quotes.quotes--tail { grid-template-columns: repeat(2, 1fr); max-width: calc(66.666% - 8px); margin-inline: auto; }
.quote__stars { display: flex; gap: 5px; margin-bottom: 18px; }
.quote__stars svg { width: 14px; height: 14px; fill: var(--gold); }
.quote p { font-family: var(--display); font-weight: 300; font-size: 19px; line-height: 1.6; color: var(--ink); letter-spacing: -0.01em; margin-bottom: 20px; }
.quote cite { font-style: normal; font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--muted); }

/* ---------- CTA band ---------- */
.cta { position: relative; overflow: hidden; }
.cta__media { position: absolute; inset: 0; }
.cta__media img { width: 100%; height: 100%; object-fit: cover; }
.cta__media::after { content: ''; position: absolute; inset: 0; background: rgba(23,19,15,0.72); }
.cta__inner { position: relative; z-index: 2; padding: clamp(80px, 10vw, 150px) var(--gutter); text-align: center; }
/* text-align does not reach a flex row, so centre it explicitly */
.cta__inner .btn-row { justify-content: center; }
.cta h2 { color: var(--white); }
.cta p { color: rgba(255,255,255,0.78); max-width: 560px; margin: 0 auto 32px; }

/* ---------- Contact ---------- */
.contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(40px, 6vw, 80px); }
.contact-list { list-style: none; margin: 0; padding: 0; }
.contact-list li { padding: 24px 0; border-top: 1px solid var(--line); }
.contact-list li:last-child { border-bottom: 1px solid var(--line); }
.contact-list span { display: block; font-size: 10px; font-weight: 500; letter-spacing: 0.22em; text-transform: uppercase; color: var(--accent); margin-bottom: 8px; }
.contact-list a, .contact-list strong { font-family: var(--display); font-size: 21px; color: var(--ink); font-weight: 300; letter-spacing: -0.01em; text-decoration: none; line-height: 1.4; }
.contact-list a:hover { color: var(--accent-dk); }

.form { display: grid; gap: 18px; }
.field label { display: block; font-size: 10px; font-weight: 500; letter-spacing: 0.22em; text-transform: uppercase; color: var(--muted); margin-bottom: 8px; }
.field input, .field textarea, .field select {
  width: 100%; padding: 15px 18px; border: 1px solid var(--line); background: var(--white);
  font-family: var(--sans); font-size: 16px; font-weight: 400; color: var(--ink);
  border-radius: var(--radius); transition: border-color .3s var(--ease);
}
.field input:focus, .field textarea:focus, .field select:focus { outline: none; border-color: var(--accent); }
.field textarea { min-height: 150px; resize: vertical; }
.form__note { font-size: 12.5px; color: var(--muted); }
.form__status { font-size: 14px; color: var(--accent-dk); }

.map-embed { width: 100%; margin-top: clamp(48px, 5vw, 72px); aspect-ratio: 16 / 7; border: 1px solid var(--line); border-radius: var(--radius-lg); filter: grayscale(1) contrast(1.05); }

/* ---------- Footer ---------- */
.footer { background: var(--ink); color: rgba(255,255,255,0.6); padding: clamp(64px, 7vw, 96px) 0 34px; }
.footer a { color: rgba(255,255,255,0.6); text-decoration: none; transition: color .3s var(--ease); }
.footer a:hover { color: var(--white); }
.footer__top { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1.2fr; gap: 40px; padding-bottom: 56px; }
.footer__brand img { height: 76px; width: auto; margin-bottom: 24px; }
.footer__brand p { font-size: 15px; max-width: 300px; }
.footer h4 { color: var(--white); font-family: var(--sans); font-weight: 500; font-size: 10px; letter-spacing: 0.22em; text-transform: uppercase; margin-bottom: 22px; }
.footer ul { list-style: none; margin: 0; padding: 0; }
.footer li { margin-bottom: 12px; font-size: 15px; }
.footer__bottom {
  border-top: 1px solid rgba(255,255,255,0.12); padding-top: 28px;
  display: flex; flex-wrap: wrap; gap: 14px 30px; justify-content: space-between;
  font-size: 12.5px; letter-spacing: 0.05em;
}
.socials { display: flex; gap: 14px; }
.socials a {
  width: 40px; height: 40px; border: 1px solid rgba(255,255,255,0.2); border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  transition: background .35s var(--ease), border-color .35s var(--ease);
}
.socials a:hover { background: var(--accent); border-color: var(--accent); }
.socials svg { width: 16px; height: 16px; fill: currentColor; }

/* ---------- Reveal ---------- */
.reveal { opacity: 0; transform: translateY(26px); transition: opacity .9s var(--ease), transform .9s var(--ease); }
.reveal.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; transition: none; } }

/* ---------- Lightbox ---------- */
.lightbox {
  position: fixed; inset: 0; z-index: 200; background: rgba(23,19,15,0.94);
  display: none; align-items: center; justify-content: center; padding: 40px;
}
.lightbox.is-open { display: flex; }
.lightbox img { max-width: min(1100px, 92vw); max-height: 86vh; object-fit: contain; }
.lightbox__close {
  position: absolute; top: 24px; right: 28px; background: none; border: 0; color: #fff;
  font-size: 30px; line-height: 1; cursor: pointer; padding: 8px;
}
.lightbox__cap { position: absolute; bottom: 26px; left: 0; right: 0; text-align: center; color: rgba(255,255,255,0.7); font-size: 13px; padding: 0 24px; }


/* ---------- Breadcrumbs ---------- */
.crumbs { padding: 26px 0 0; font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); }
.crumbs a { color: var(--muted); text-decoration: none; transition: color .3s var(--ease); }
.crumbs a:hover { color: var(--accent-dk); }
.crumbs__sep { margin: 0 10px; color: var(--sand-2); }
.crumbs [aria-current="page"] { color: var(--ink); }

/* ---------- Tick list ---------- */
.ticks { list-style: none; margin: 0; padding: 0; columns: 2; column-gap: 44px; }
.ticks li { position: relative; padding: 10px 0 10px 26px; break-inside: avoid; border-bottom: 1px solid var(--line); }
.ticks li::before {
  content: ''; position: absolute; left: 0; top: 20px;
  width: 7px; height: 7px; border-radius: 50%; background: var(--gold);
}

/* ---------- Good to know ---------- */
.spec { margin: 0; padding: 0; border-top: 1px solid var(--line); }
.spec__row { display: grid; grid-template-columns: 190px 1fr; gap: 24px; padding: 16px 0; border-bottom: 1px solid var(--line); }
.spec dt { font-size: 10px; font-weight: 500; letter-spacing: 0.2em; text-transform: uppercase; color: var(--accent); padding-top: 5px; }
.spec dd { margin: 0; color: var(--body); }
.spec__note { font-size: 13px; color: var(--muted); margin-top: 16px; }

/* Course pricing and opening hours. The same shape: a label on the left, a
   figure on the right, so both can be compared at a glance rather than read
   as a sentence. */
.tiers, .hours { max-width: 340px; margin: 0; }
.tiers__row, .hours__row {
  display: flex; align-items: baseline; gap: 12px;
  padding: 7px 0; border-bottom: 1px dotted var(--line);
}
.tiers__row:first-child, .hours__row:first-child { padding-top: 0; }
.tiers__row:last-child, .hours__row:last-child { border-bottom: 0; padding-bottom: 0; }
.tiers__amt, .hours dd {
  margin-left: auto; margin-right: 0;
  font-variant-numeric: tabular-nums; color: var(--ink);
}
.hours dt { color: var(--body); }
.hours__row--closed dt, .hours__row--closed dd { color: var(--muted); }

/* Placeholder for facts only the clinic can supply. Deliberately loud. */
.tbc {
  display: inline-block; background: #FBECC6; color: #6B4A0F;
  border: 1px dashed var(--accent); border-radius: 2px;
  padding: 1px 9px; font-size: 12px; font-weight: 500;
  letter-spacing: 0.06em; text-transform: uppercase; white-space: normal;
}

/* ---------- Clinical note ---------- */
.note {
  background: var(--sand); border-left: 2px solid var(--accent);
  padding: 22px 26px; border-radius: 0 var(--radius-lg) var(--radius-lg) 0;
  font-size: 15.5px; color: var(--body); margin-bottom: 8px;
}
.note strong { color: var(--ink); }

/* ---------- FAQs ----------
   Native <details>, so a question is still readable and findable with no
   JavaScript, and Ctrl+F on a closed answer still works in most browsers. */
.faqs { border-top: 1px solid var(--line); }
.faq { border-bottom: 1px solid var(--line); }
.faq summary {
  display: flex; align-items: flex-start; gap: 20px;
  padding: 20px 0; cursor: pointer; list-style: none;
  font-size: 18px; color: var(--ink); line-height: 1.4;
  transition: color .3s var(--ease);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary:hover { color: var(--accent); }
.faq summary::after {
  content: ''; flex: none; margin-left: auto; margin-top: 9px;
  width: 11px; height: 11px;
  border-right: 1.5px solid var(--accent); border-bottom: 1.5px solid var(--accent);
  transform: rotate(45deg); transform-origin: 70% 70%;
  transition: transform .35s var(--ease);
}
.faq[open] summary::after { transform: rotate(225deg); }
.faq__a { padding: 0 40px 24px 0; color: var(--body); }
.faq__a p { margin: 0; }
.faq__a a { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }

@media (prefers-reduced-motion: reduce) {
  .faq summary, .faq summary::after { transition: none; }
}

/* Treatment page steps sit in a narrow column, so tighten them */
.wrap-narrow .step { grid-template-columns: 78px 1fr; gap: 20px; padding: 26px 0; }
.wrap-narrow .step__n { font-size: 30px; }
.wrap-narrow .step h3 { font-size: 20px; }

/* Whole treatment card is a link on the menu */
a.tcard { text-decoration: none; color: inherit; transition: transform .5s var(--ease), box-shadow .5s var(--ease), border-color .5s var(--ease); }
a.tcard:hover { transform: translateY(-4px); box-shadow: 0 30px 60px -34px rgba(33,26,18,0.32); border-color: var(--sand-2); }
a.tcard img { transition: transform 1s var(--ease); }
a.tcard:hover .link-arrow { gap: 14px; color: var(--accent-dk); }

/* ---------- Responsive ---------- */
@media (max-width: 1080px) {
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
  .footer__top { grid-template-columns: 1fr 1fr; gap: 44px; }
}
@media (max-width: 960px) {
  .header__nav, .header__actions .btn { display: none; }
  .burger { display: block; }
  .grid-3, .quotes, .results { grid-template-columns: repeat(2, 1fr); }
  .ticks { columns: 1; }
  .quotes.quotes--tail { max-width: none; grid-template-columns: repeat(2, 1fr); }
  .split { grid-template-columns: 1fr; }
  .split--reverse .split__media { order: 0; }
  .split__badge { position: static; margin-top: 20px; max-width: none; display: inline-block; }
  .contact-grid { grid-template-columns: 1fr; }
  .sec-head--row { flex-direction: column; align-items: flex-start; }
}
@media (max-width: 700px) {
  body { font-size: 16px; }
  .header__inner { height: 80px; }
  .header__brand .logo { height: 52px; }
  .quote { min-height: 0; }
  .grid-2, .grid-3, .grid-4, .quotes, .quotes.quotes--tail { grid-template-columns: 1fr; }
  .results { grid-template-columns: 1fr; gap: 30px; }
  .results--strip { grid-template-columns: 1fr; }
  .tcard { grid-template-columns: 1fr; }
  .tcard img { min-height: 260px; aspect-ratio: 4 / 3; }
  .step, .wrap-narrow .step { grid-template-columns: 1fr; gap: 12px; padding: 26px 0; }
  .spec__row { grid-template-columns: 1fr; gap: 6px; }
  .step__n { font-size: 32px; }
  .hero { min-height: 92svh; }
  .hero__inner { padding-top: 130px; }
  .hero__scroll { display: none; }
  /* Buttons run the full width of the text column, so their edges line up with
     the headline and paragraph above them. Full width of the CONTAINER, not of
     the screen: `.cta__inner` used to drop the wrap's gutter and push its
     buttons out to the viewport edge, which is what made them look oversized. */
  .btn { width: 100%; padding: 16px 26px; font-size: 11px; letter-spacing: 0.13em; }
  .btn-row { flex-direction: column; align-items: stretch; gap: 12px; }

  /* The script runs 1.3x the heading around it. At desktop sizes that reads as
     an accent; at 38px on a 375px screen it takes over the headline. */
  .script--lead { margin-left: 0.12em; }

  /* Treatment menu: the desktop card is a small image beside the text, which
     is what makes a 25-item list scannable. Stacking it put a 280px photograph
     between every entry, so the list became a scroll rather than a menu. */
  .tcard { grid-template-columns: 104px 1fr; height: 146px; }
  .tcard img { min-height: 100%; aspect-ratio: auto; }
  .tcard__body { display: flex; flex-direction: column; justify-content: center; padding: 12px 16px 12px 18px; }
  .tcard__cat { margin-bottom: 5px; }
  /* Every card the same height, so the menu scans as a list. The name gets two
     lines before it truncates and the description two after it; both clamp
     rather than push the card taller. */
  .tcard h3 { font-size: 17px; line-height: 1.25; margin-bottom: 5px; }
  .tcard h3, .tcard p { display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; }
  .tcard h3 { -webkit-line-clamp: 2; }
  .tcard p { font-size: 13.5px; line-height: 1.5; margin: 0; -webkit-line-clamp: 2; }
  .tcard .link-arrow { display: none; }
  /* Signature cards varied by 26px on intro length alone. */
  .card p { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; }

  /* 10px letterspaced caps are legible on a monitor and not on a phone.
     11px is the floor: any higher and the labels stop reading as labels. */
  .eyebrow, .spec dt, .result__treatment, .tcard__cat, .card__eyebrow,
  .card__more, .link-arrow, .contact-list span, .field label, .footer h4,
  .trust__inner, .split__badge span, .chip { font-size: 11px; }
  /* Let the list wrap and fit two or three to a line: stacking one per line
     turned it into a block. Tighter gutters so more pairs up. */
  .trust__inner { gap: 9px 18px; }

  /* Menu: the primary label was wrapping to two lines inside the drawer. */
  .drawer .drawer__foot .btn { font-size: 11px; letter-spacing: 0.16em; padding: 16px 20px; }
  .drawer .drawer__sub a { padding: 11px 0 11px 18px; }

  /* Comfortable tap targets: the footer list and the filter chips were both
     under the 44px most guidance asks for. */
  .footer ul a { display: inline-block; padding: 5px 0; }
  .chip { min-height: 42px; }
  /* 16:7 leaves a 143px sliver on a phone: too short to orient by. */
  .map-embed { aspect-ratio: 4 / 3; }
  .footer__top { grid-template-columns: 1fr; gap: 36px; }
  .drawer a { font-size: 26px; }
}

/* ---------- Print ---------- */
@media print {
  .header, .drawer, .footer, .cta, .hero__scroll { display: none !important; }
  body { background: #fff; color: #000; }
}