/* =====================================================================
   RIVIERA AESTHETICS — shared design system
   "A clinical dossier, composed like an editorial."
   Warm bone / ink / brass · Fraunces + Jost
   ===================================================================== */

:root{
  --bone:#F3EEE6;        /* page */
  --paper:#FBF8F3;       /* raised surface */
  --panel:#EAE2D5;       /* subtle panel */
  --ink:#1B1712;         /* near-black warm — text, dark sections */
  --ink-soft:#4A443C;    /* body */
  --greige:#6E6154;      /* muted labels — WCAG AA on bone */
  --line:#DCD3C4;        /* hairline */
  --line-soft:#E8E1D4;
  --brass:#A9885E;       /* accent */
  --brass-deep:#7E6038;   /* darkened from #8A6B41 for WCAG AA on bone (4.27→5.03) */

  --f-display:'Fraunces', Georgia, 'Times New Roman', serif;
  --f-sans:'Jost', system-ui, -apple-system, sans-serif;
  --f-script:'Snell Roundhand', 'Brush Script MT', cursive;

  --container:1180px;
  --wide:1360px;
  --page-x:clamp(1.35rem, 5vw, 5rem);
  /* vertical rhythm — two steps, one source. .philosophy and .legal each carried
     their own near-miss clamp (2.5→4rem, 2.75→4.75rem) alongside .section's
     3.75→7.25rem and .tight's 3→5.5rem: four formulas for two jobs, which is
     why section spacing never quite matched across pages. */
  --sp-section:clamp(3.75rem, 3rem + 5vw, 7.25rem);
  --sp-tight:clamp(3rem, 2.5rem + 4vw, 5.5rem);
  /* one hero height for the whole site. Every page opens on a hero of exactly
     this height — the flagship .hero--editorial pages (home, treatments) and
     the interior .page-hero pages alike. Keyed to viewport WIDTH, never height,
     so the fold never moves just because the window is tall or short.
     Pages whose headline wraps to an extra line still grow past it; the token
     is the floor that stops the short ones sitting stubby. */
  --hero-h:clamp(500px, 27.8rem + 13vw, 620px);
  --ease:cubic-bezier(.22,1,.28,1);          /* refined expo-out */
  --ease-out:cubic-bezier(.16,1,.3,1);        /* strong decelerate */
  --ease-settle:cubic-bezier(.34,1.12,.5,1);  /* gentle settle */
}

/* ---------- page transitions ----------
   Cross-document view transitions. Every navigation on this site was a hard
   repaint — and because most pages open on a dark hero and the body beneath is
   bone, that flash was a full black↔cream punch on every click. Three lines,
   progressively enhanced: browsers without support navigate exactly as before.
   The UA suppresses this automatically under prefers-reduced-motion. */
@view-transition{navigation:auto}
::view-transition-old(root){animation:vt-out .28s var(--ease) both}
::view-transition-new(root){animation:vt-in .38s var(--ease-out) both}
@keyframes vt-out{to{opacity:0}}
@keyframes vt-in{from{opacity:0}}

/* ---------- reset ---------- */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;overflow-x:hidden}
body{
  font-family:var(--f-sans);background:var(--bone);color:var(--ink-soft);
  font-size:clamp(1rem,.55rem + .6vw,1.06rem);line-height:1.75;font-weight:300;
  letter-spacing:.01em;-webkit-font-smoothing:antialiased;overflow-x:hidden;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;cursor:pointer;background:none;border:none}
::selection{background:var(--brass);color:var(--paper)}
h1,h2,h3,h4{font-family:var(--f-display);color:var(--ink);font-weight:300;line-height:1.05;letter-spacing:-.015em}
em{font-style:italic}

/* ---------- layout helpers ---------- */
.container{width:100%;max-width:var(--container);margin-inline:auto;padding-inline:var(--page-x)}
.container.wide{max-width:var(--wide)}
.section{padding-block:var(--sp-section)}
.section.tight{padding-block:var(--sp-tight)}
.rule{height:1px;background:var(--line);border:0}
.center{text-align:center}
.reveal{opacity:0;transform:translateY(26px);transition:opacity .95s var(--ease-out),transform .95s var(--ease-out);transition-delay:var(--d,0ms)}
.reveal.in{opacity:1;transform:none}
/* ---- stagger --------------------------------------------------------------
   Sibling reveals were delayed with hand-written inline styles — 96 of them,
   using steps of 40/60/80/100/120/150/220ms with no rule behind which got
   which, so no two blocks on the site cascaded at the same rate.
   Reading the old values back, they were reaching for two rhythms: a quick one
   for a run of text (eyebrow → heading → paragraph → link) and a slower one for
   a grid of cards. That's the system now — two steps, applied by position.
   Containers opt in below; .stagger / .stagger--tight are there for new markup.
   Capped at 6: past that a cascade stops reading as choreography and starts
   reading as the page being slow. */
.stagger,
.points,.treatment-grid,.cond-grid,.split,.contact-grid{--stg:110ms}
.stagger--tight,
.page-hero .container,.cta .container,.hero-inner,.doctor-copy,.journey,.deflist{--stg:70ms}

:is(.stagger,.stagger--tight,.points,.treatment-grid,.cond-grid,.split,.contact-grid,
    .page-hero .container,.cta .container,.hero-inner,.doctor-copy,.journey,.deflist)
  > .reveal:nth-child(2){--d:var(--stg)}
:is(.stagger,.stagger--tight,.points,.treatment-grid,.cond-grid,.split,.contact-grid,
    .page-hero .container,.cta .container,.hero-inner,.doctor-copy,.journey,.deflist)
  > .reveal:nth-child(3){--d:calc(var(--stg) * 2)}
:is(.stagger,.stagger--tight,.points,.treatment-grid,.cond-grid,.split,.contact-grid,
    .page-hero .container,.cta .container,.hero-inner,.doctor-copy,.journey,.deflist)
  > .reveal:nth-child(4){--d:calc(var(--stg) * 3)}
:is(.stagger,.stagger--tight,.points,.treatment-grid,.cond-grid,.split,.contact-grid,
    .page-hero .container,.cta .container,.hero-inner,.doctor-copy,.journey,.deflist)
  > .reveal:nth-child(5){--d:calc(var(--stg) * 4)}
:is(.stagger,.stagger--tight,.points,.treatment-grid,.cond-grid,.split,.contact-grid,
    .page-hero .container,.cta .container,.hero-inner,.doctor-copy,.journey,.deflist)
  > .reveal:nth-child(n+6){--d:calc(var(--stg) * 5)}
/* signature masked-line headline reveal */
.ln{display:block;overflow:hidden;padding-bottom:.16em;margin-bottom:-.16em}
.ln-i{display:block;transform:translateY(114%);transition:transform 1.05s var(--ease-out);transition-delay:var(--d,0ms)}
.lines-in .ln-i{transform:translateY(0)}

/* ---------- type ---------- */
.eyebrow{
  font-family:var(--f-sans);font-size:.7rem;font-weight:400;letter-spacing:.34em;
  text-transform:uppercase;color:var(--greige);display:inline-flex;align-items:center;gap:.85rem;
}
.eyebrow::before{content:"";width:30px;height:1px;background:var(--brass);flex-shrink:0;transform:scaleX(0);transform-origin:left;transition:transform .85s var(--ease-out) .1s}
.in .eyebrow::before,.eyebrow.in::before{transform:scaleX(1)}
.eyebrow.plain::before{display:none}
/* actual logo "Riviera" wordmark used for the word Riviera in prominent headings */
.riviera-mark{display:inline-block;width:auto;height:2em;vertical-align:-.46em;margin:0 .06em}
h1 .riviera-mark,h2 .riviera-mark{height:.9em;vertical-align:-.2em}
.display{font-size:clamp(2.7rem,1.9rem + 5vw,5.4rem);line-height:1;letter-spacing:-.025em}
/* ---- section-level display headings ----------------------------------------
   Fraunces 300, tracked in. index.html used to carry an inline <style> block
   setting these to 500 / 0 tracking on the homepage only, so the homepage and
   the other 18 pages rendered the same markup two different ways. Resolved in
   favour of Light everywhere: the whole system — body, hero, philosophy
   statement, price amounts — runs 300, and at this size the weight jump read as
   emphasis rather than hierarchy. Size and tracking carry the hierarchy now. */
.h2{font-size:clamp(2rem,1.4rem + 3vw,3.6rem);letter-spacing:-.02em}
/* an .h2 following an eyebrow was spaced with style="margin-top:1.4rem" inline,
   identically, 33 times across 19 files */
.eyebrow + .h2{margin-top:1.4rem}
.h3{font-size:clamp(1.4rem,1.1rem + 1.4vw,2rem);letter-spacing:-.01em}
.lead{font-size:clamp(1.1rem,1rem + .55vw,1.4rem);color:var(--ink-soft);line-height:1.6}
.muted{color:var(--greige)}
.serif-accent{font-family:var(--f-display);font-style:italic;color:var(--brass-deep)}
.measure{max-width:62ch}
.measure-sm{max-width:46ch}
/* the eyebrow + heading block that opens a section — was style="max-width:560px"
   inline on all 14 occurrences */
.section-head{max-width:560px}

/* ---------- buttons & links ---------- */
.btn{
  position:relative;overflow:hidden;isolation:isolate;z-index:0;
  display:inline-flex;align-items:center;justify-content:center;gap:.6rem;
  font-family:var(--f-sans);font-size:.76rem;font-weight:400;letter-spacing:.2em;text-transform:uppercase;
  padding:1.05rem 2.1rem;min-height:52px;border-radius:2px;
  transition:color .55s var(--ease),border-color .6s var(--ease),transform .5s var(--ease-settle);
}
/* directional fill that rises from the base — replaces the flat colour fade */
.btn::after{content:"";position:absolute;inset:0;z-index:-1;transform:translateY(101%);transition:transform .6s var(--ease-out)}
.btn:hover::after{transform:translateY(0)}
.btn:active{transform:translateY(1px) scale(.992)}
.btn-solid{background:var(--ink);color:var(--bone);border:1px solid var(--ink)}
.btn-solid::after{background:var(--brass-deep)}
.btn-outline{background:transparent;color:var(--ink);border:1px solid var(--ink)}
.btn-outline::after{background:var(--ink)}
.btn-outline:hover{color:var(--bone)}
.btn-ghost{background:transparent;color:var(--bone);border:1px solid rgba(243,238,230,.4)}
.btn-ghost::after{background:var(--bone)}
.btn-ghost:hover{color:var(--ink);border-color:var(--bone)}
.link{
  font-family:var(--f-sans);font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;color:var(--ink);
  display:inline-flex;align-items:center;gap:.7rem;padding-bottom:.3rem;position:relative;width:fit-content;
}
.link::after{content:"";position:absolute;left:0;bottom:0;height:1px;width:100%;background:var(--brass);transform:scaleX(1);transform-origin:right;transition:transform .5s var(--ease)}
.link:hover::after{transform:scaleX(0);transform-origin:left}
.link .arw{transition:transform .45s var(--ease)}
.link:hover .arw{transform:translateX(5px)}
/* `summary` was missing from this list, so every FAQ accordion (7 on the
   consultation page, 4 on each of 6 condition pages) and the mobile Treatments
   accordion fell back to the browser's default focus ring instead of the brand
   one — the only keyboard-reachable controls on the site that did. */
.btn:focus-visible,a:focus-visible,button:focus-visible,summary:focus-visible,
input:focus-visible,select:focus-visible,textarea:focus-visible{outline:2px solid var(--brass);outline-offset:4px}
/* the accordion rows are full-width; a 4px offset ring bleeds past the hairline */
.faq summary:focus-visible,.m-acc > summary:focus-visible{outline-offset:2px}
.skip{position:absolute;left:1rem;top:-100px;background:var(--ink);color:var(--bone);padding:.8rem 1.2rem;border-radius:4px;z-index:2000;transition:top .3s}
.skip:focus{top:1rem}
.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}

/* ---------- monogram ---------- */
.mono{display:block}
.mono text{font-family:var(--f-display)}

/* ---------- nav ---------- */
.nav{
  position:fixed;inset:0 0 auto 0;z-index:1000;display:flex;align-items:center;justify-content:space-between;
  padding:1.3rem var(--page-x);border-bottom:1px solid transparent;
  transition:background .5s var(--ease),box-shadow .5s var(--ease),padding .5s var(--ease),border-color .5s var(--ease);
}
.nav.scrolled{background:rgba(243,238,230,.9);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border-bottom-color:var(--line);padding-block:.9rem}
.brand{display:flex;align-items:center;gap:.85rem}
.brand .mono{height:44px;width:auto}
.brand-word{display:flex;flex-direction:column;line-height:1}
.brand-name{font-family:var(--f-display);font-size:1.1rem;color:var(--ink);letter-spacing:.16em;text-transform:uppercase}
.brand-sub{font-family:var(--f-sans);font-size:.52rem;letter-spacing:.28em;text-transform:uppercase;color:var(--brass-deep);margin-top:.4rem}
.nav-links{display:flex;align-items:center;gap:2.1rem}
.nav-links a{font-family:var(--f-sans);font-size:.74rem;font-weight:400;letter-spacing:.16em;text-transform:uppercase;color:var(--ink);position:relative;padding:.4rem 0}
.nav-links a::after{content:"";position:absolute;left:0;bottom:0;width:0;height:1px;background:var(--brass);transition:width .45s var(--ease)}
.nav-links a:hover::after,.nav-links a.is-active::after{width:100%}
.nav-links a.is-active{color:var(--brass-deep)}
/* ---------- treatments dropdown ---------- */
.nav-has-menu{position:relative;display:flex;align-items:center}
.nav-menu{
  position:absolute;top:100%;left:50%;transform:translateX(-50%) translateY(8px);
  min-width:262px;padding:.7rem 0;margin-top:.1rem;
  background:var(--bone);border:1px solid var(--line);border-radius:4px;
  box-shadow:0 24px 60px -24px rgba(24,16,9,.42);
  opacity:0;visibility:hidden;pointer-events:none;
  transition:opacity .38s var(--ease),transform .38s var(--ease),visibility .38s;
  z-index:1100;
}
/* invisible bridge so the cursor can cross the gap without the menu closing */
.nav-has-menu::after{content:"";position:absolute;top:100%;left:0;right:0;height:14px}
.nav-has-menu:hover .nav-menu,
.nav-has-menu:focus-within .nav-menu{
  opacity:1;visibility:visible;pointer-events:auto;transform:translateX(-50%) translateY(0);
}
.nav-menu a{
  display:block;padding:.6rem 1.4rem;font-size:.68rem;letter-spacing:.13em;
  text-transform:uppercase;color:var(--ink);white-space:nowrap;
  transition:color .3s var(--ease),background .3s var(--ease);
}
.nav-menu a::after{display:none}
.nav-menu a:hover{background:rgba(184,144,74,.1);color:var(--brass-deep)}
/* the light dropdown panel keeps dark ink links even over a dark hero
   (extra .nav-links qualifier outranks the dark-nav rule in hero-variant.css) */
body.hero-dark .nav:not(.scrolled) .nav-links .nav-menu a{color:var(--ink)}
body.hero-dark .nav:not(.scrolled) .nav-links .nav-menu a:hover{color:var(--brass-deep)}
.nav-actions{display:flex;align-items:center;gap:1.4rem}
.nav-cta{font-family:var(--f-sans);font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;border:1px solid var(--ink);border-radius:2px;padding:.8rem 1.5rem;min-height:44px;display:inline-flex;align-items:center;color:var(--ink);transition:background .5s var(--ease),color .5s var(--ease)}
.nav-cta:hover{background:var(--ink);color:var(--bone)}
.nav-toggle{display:none;width:44px;height:44px;align-items:center;justify-content:center}
.nav-toggle span{position:relative;width:24px;height:1px;background:var(--ink);display:block;transition:.4s var(--ease)}
.nav-toggle span::before,.nav-toggle span::after{content:"";position:absolute;left:0;width:24px;height:1px;background:var(--ink);transition:.4s var(--ease)}
.nav-toggle span::before{top:-7px}.nav-toggle span::after{top:7px}
body.menu-open .nav-toggle span{background:transparent}
body.menu-open .nav-toggle span::before{transform:rotate(45deg);top:0}
body.menu-open .nav-toggle span::after{transform:rotate(-45deg);top:0}
/* Top-aligned, not centred. `justify-content:safe center` was fine while the
   menu fitted the screen, but opening the Treatments accordion takes the content
   to ~1030px in an 812px viewport — centring then pushed "About" to y=22px,
   underneath the fixed nav, and pushed "Book a consultation" to y=953, off the
   bottom of the screen with no scroll affordance. Flowing from a fixed nav
   clearance keeps the first item where it belongs in both states. */
.mobile-menu{
  position:fixed;inset:0;z-index:900;background:var(--bone);
  display:flex;flex-direction:column;gap:.1rem;
  padding:clamp(5.6rem,4.8rem + 4vw,7rem) var(--page-x) calc(var(--page-x) + env(safe-area-inset-bottom,0px));
  overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;
  /* visibility, not just transform: the panel is translated off-screen when
     closed but was still `visible`, so its 19 links stayed in the tab order.
     A keyboard user on desktop tabbed past the nav and focus disappeared into
     a panel they could not see. visibility:hidden removes them; it is a discrete
     property, so it flips at the end of the close and the start of the open —
     the slide still animates. main.js also marks the panel inert. */
  transform:translateY(-100%);visibility:hidden;
  transition:transform .6s var(--ease),visibility .6s var(--ease);
  pointer-events:none;
}
body.menu-open .mobile-menu{transform:translateY(0);visibility:visible;pointer-events:auto}
/* :not(.btn) — this rule outranks .btn on specificity, so the menu's primary
   action was rendering as ink text on the ink button (invisible), in Fraunces
   30px, with the button's padding stripped. The nav links keep the display face;
   the button keeps the button system. */
.mobile-menu a:not(.btn){font-family:var(--f-display);font-size:clamp(1.9rem,8vw,2.6rem);color:var(--ink);padding:.4rem 0;border-bottom:1px solid var(--line-soft)}
/* Secondary contact block — the phone number previously existed on contact.html
   only, so a phone user sitting in the menu had no way to call. */
.mobile-menu .m-contact{display:flex;flex-direction:column;gap:.55rem;margin-top:1.5rem;padding-top:1.3rem;border-top:1px solid var(--line-soft)}
.mobile-menu .m-contact a,.mobile-menu .m-contact span{font-family:var(--f-sans);font-size:.8rem;letter-spacing:.16em;text-transform:uppercase;padding:0;border-bottom:0}
.mobile-menu .m-contact a{color:var(--ink)}
.mobile-menu .m-contact span{color:var(--greige)}
/* Sticky so the primary action stays reachable with the accordion expanded. It
   only pins once it would scroll away; collapsed, it just sits after the links. */
.mobile-menu .btn{
  position:sticky;bottom:env(safe-area-inset-bottom,0px);
  margin-top:1.9rem;align-self:stretch;justify-content:center;
  box-shadow:0 -20px 24px -10px var(--bone);
}
/* mobile treatments accordion — the dropdown's mobile equivalent */
.m-acc{border-bottom:1px solid var(--line-soft)}
.m-acc>summary{list-style:none;cursor:pointer;font-family:var(--f-display);font-size:clamp(1.9rem,8vw,2.6rem);color:var(--ink);padding:.4rem 0;display:flex;align-items:center;justify-content:space-between;gap:1rem}
.m-acc>summary::-webkit-details-marker{display:none}
.m-acc>summary::after{content:"+";font-family:var(--f-sans);font-weight:300;font-size:1.5rem;line-height:1;color:var(--brass-deep)}
.m-acc[open]>summary::after{content:"–"}
.m-acc-panel{display:flex;flex-direction:column;padding:.2rem 0 1.1rem}
.mobile-menu .m-acc-panel a{font-family:var(--f-sans);font-size:.92rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ink);padding:.7rem 0;border-bottom:1px solid var(--line-soft)}
.mobile-menu .m-acc-panel a:last-child{border-bottom:none}

/* ---------- home hero ---------- */
/* min-height (not aspect-ratio) preserves the 1872:930 proportion on wide screens
   while letting the hero grow when the copy is taller than that — avoids the copy
   overflowing/overlapping the nav in the mid-width range. */
.hero{position:relative;display:flex;align-items:center;overflow:hidden;min-height:clamp(460px,49.68vw,88vh);padding:6rem 0 2rem}
.hero .container{position:relative;z-index:2;width:100%;max-width:none;padding-left:clamp(1.5rem,3.4vw,3.5rem)}
.hero .eyebrow::before{display:none}
.hero .eyebrow{margin-bottom:1.8rem;letter-spacing:.42em}
.hero h1{font-size:clamp(2.6rem,1.9rem + 4.4vw,5rem);line-height:.99;letter-spacing:-.03em;color:var(--ink)}
.hero h1 em{color:var(--brass-deep)}
.hero-sub{max-width:48ch;margin-top:1.9rem;font-size:clamp(1.05rem,.95rem + .5vw,1.3rem);color:var(--ink-soft)}
.hero-actions{display:flex;flex-wrap:wrap;gap:1.1rem;margin-top:2.6rem}
@keyframes drop{0%{top:-38px}55%,100%{top:38px}}

/* ---------- inner page hero ---------- */
/* top padding was a flat 10.5rem (168px) at every width — generous on desktop,
   a third of the screen on a phone before a word is read */
/* min-height is the shared site-wide hero height. The copy stays anchored by the
   top padding (which is really nav clearance), so any slack lands at the bottom
   and the headline sits at the same y on every page — the short treatment pages
   used to come in ~120px under the main nav pages. */
.page-hero{min-height:var(--hero-h);padding:clamp(7.75rem,6.5rem + 5vw,10.5rem) 0 clamp(2.5rem,5vw,4.5rem);border-bottom:1px solid var(--line)}
.page-hero .eyebrow{margin-bottom:1.8rem}
.page-hero h1{font-size:clamp(2.6rem,1.9rem + 4.5vw,5rem);letter-spacing:-.025em}
.page-hero .lead{margin-top:1.8rem;max-width:56ch}
.crumbs{font-size:.68rem;letter-spacing:.18em;text-transform:uppercase;color:var(--greige);margin-bottom:2rem;display:flex;gap:.6rem;align-items:center}
.crumbs a:hover{color:var(--ink)}
.crumbs span{color:var(--brass)}

/* ---------- trust strip ---------- */
/* bone, not paper: the philosophy shelf directly below is paper, and the site's
   own tonal rule 1 (adjacent sections never share a tone) was being broken here
   — the strip and the shelf read as one undifferentiated light band */
.trust{border-bottom:1px solid var(--line);background:var(--bone)}
.trust .container{display:flex;flex-wrap:wrap;justify-content:center;gap:.7rem 3rem;padding-block:1.5rem}
.trust span{display:inline-flex;align-items:center;gap:.7rem;font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:var(--ink)}
.trust span::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--brass);flex-shrink:0}

/* ---------- editorial statement ---------- */
.statement .container{display:grid;grid-template-columns:1fr 2fr;gap:clamp(2rem,6vw,5rem)}
.statement .lbl{font-size:.7rem;letter-spacing:.24em;text-transform:uppercase;color:var(--greige);padding-top:.7rem}
.statement p{font-family:var(--f-display);font-size:clamp(1.6rem,1.2rem + 2.4vw,2.9rem);line-height:1.28;color:var(--ink);font-weight:300;letter-spacing:-.01em}
/* keep the Riviera eyebrow kicker uniform with other sections (don't inherit the big statement type) */
.statement p.eyebrow{font-family:var(--f-sans);font-size:.7rem;font-weight:400;line-height:1;letter-spacing:.34em;color:var(--greige)}
.statement p em{color:var(--brass-deep)}
.statement .sub{font-family:var(--f-sans);font-size:1.05rem;line-height:1.7;color:var(--ink-soft);margin-top:1.8rem;max-width:60ch}
/* centred variant — single column, everything aligned to the middle within a readable width */
.statement--center .container{grid-template-columns:1fr;text-align:center;justify-items:center;gap:clamp(1.2rem,2.4vw,1.9rem);max-width:900px}
.statement--center p{max-width:60ch}
.statement--center .link{justify-self:center}
/* =====================================================================
   TONAL SYSTEM
   Three surfaces, alternated so no page ever runs flat cream:
     bone   var(--bone)   base surface — the default, no class needed
     paper  var(--paper)  alternate light shelf   → .section--paper
     ink    var(--ink)    punctuation             → .section--ink
   Four rules keep this uniform across every page:
     1. Adjacent sections never share a tone.
     2. Every page opens ink (.hero / .page-hero) and closes ink (.cta + footer).
     3. Any page whose unbroken light run exceeds ~3 screens takes one ink
        interstitial mid-page.
     4. That interstitial is always carried by the statement component — a short
        centred pull quote. Ink is punctuation, never a third slab of body copy.
   Declared here as classes rather than inline styles: the rhythm was previously
   repeated verbatim in 15 files, which is exactly why it had drifted.
   ===================================================================== */
.section--paper{background:var(--paper);border-block:1px solid var(--line)}
/* the brass halo from the top edge keeps an interstitial distinct from the flat
   .cta band that closes the page */
.section--ink{background:var(--ink) radial-gradient(125% 78% at 50% -10%,rgba(169,136,94,.14),transparent 62%);color:#C9BCA9;border-block:0}
.section--ink h2,.section--ink h3{color:var(--bone)}
.section--ink p{color:var(--bone)}
.section--ink p em{color:var(--brass)}
.section--ink .eyebrow,.section--ink .lbl,.section--ink .sub{color:#a99a86}
.section--ink .link{color:var(--bone)}
/* the wordmark PNG is dark ink on transparent — recolour it to warm bone */
.section--ink .riviera-mark{filter:brightness(0) invert(1) sepia(.32) saturate(1.5) hue-rotate(353deg)}

/* ---------- split (label left / content right) ---------- */
.split{display:grid;grid-template-columns:.85fr 1.15fr;gap:clamp(2rem,6vw,5.5rem);align-items:start}
.split-aside{position:sticky;top:7rem}
.split-aside .eyebrow{margin-bottom:1.4rem}
.split-aside h2{margin-bottom:1.2rem}
.split-body > * + *{margin-top:1.4rem}
.split-body p{color:var(--ink-soft)}
/* the standfirst paragraph opening a split body — was style="color:var(--ink)"
   inline on all 13 occurrences */
.split-body .lead{color:var(--ink)}
.split-body h3{font-family:var(--f-display);font-weight:300;color:var(--ink);font-size:clamp(1.25rem,1.05rem + .7vw,1.55rem);letter-spacing:-.01em;margin-top:2.4rem}
.split-body h3 + p{margin-top:.9rem}
.split-body ul{padding-left:1.3rem;display:grid;gap:.55rem}
.split-body h3 + ul,.split-body p + ul{margin-top:.9rem}
.split-body li{color:var(--ink-soft)}
.split-body li::marker{color:var(--brass)}

/* treatment-area illustration (bruxism / jaw slimming / platysmal bands) */
.area-figure{margin:2.2rem 0 0;max-width:400px;border:1px solid var(--line);border-radius:8px;overflow:hidden;background:var(--paper)}
.area-figure img{display:block;width:100%;height:auto}
@media (max-width:900px){.area-figure{margin-inline:auto}}

/* ---------- treatment index ---------- */
.index{border-top:1px solid var(--line)}
.index a,.index .row{display:grid;grid-template-columns:auto 1fr auto;gap:1.5rem 2.5rem;align-items:baseline;
  padding:clamp(1.8rem,3vw,2.6rem) 0;border-bottom:1px solid var(--line);position:relative;transition:padding .5s var(--ease)}
.index a::before{content:"";position:absolute;inset:0 -100vw;background:var(--paper);opacity:0;z-index:-1;transition:opacity .5s var(--ease)}
.index a:hover::before{opacity:1}
.index a:hover{padding-left:1.4rem}
.index a::after{content:"";position:absolute;left:0;top:50%;width:2px;height:54%;background:var(--brass);transform:translateY(-50%) scaleY(0);transform-origin:center;transition:transform .6s var(--ease-out)}
.index a:hover::after{transform:translateY(-50%) scaleY(1)}
/* min-width so the titles share a left edge. Each row is its own grid, so an
   `auto` first track sizes to that row's own numeral — I, II, III and IV are all
   different widths, which left the titles stepping raggedly to the right. */
.index .num{min-width:2.4rem;font-family:var(--f-display);font-style:italic;font-size:1rem;color:var(--brass-deep);transition:transform .6s var(--ease),color .6s var(--ease)}
.index a:hover .num{transform:translateX(5px);color:var(--brass-deep)}
/* display:block — .ttl/.desc are spans, and without this the description runs
   inline straight off the end of the title. Latent since the component was
   written: styles.css defined .index in full but no page had ever used it. */
.index .ttl{display:block;font-family:var(--f-display);font-weight:300;color:var(--ink);font-size:clamp(1.5rem,1.1rem + 1.8vw,2.4rem);letter-spacing:-.01em;line-height:1.15}
.index .desc{display:block;font-size:.95rem;color:var(--ink-soft);margin-top:.5rem;max-width:52ch}
.index .go{font-size:.68rem;letter-spacing:.18em;text-transform:uppercase;color:var(--greige);white-space:nowrap;display:inline-flex;align-items:center;gap:.6rem;align-self:center}
.index .go .arw{transition:transform .45s var(--ease)}
.index a:hover .go{color:var(--ink)}
.index a:hover .go .arw{transform:translateX(8px)}
.index .go.soon{color:var(--brass);border:1px solid var(--line);border-radius:100px;padding:.4rem .9rem}

/* ---------- doctor module ---------- */
.doctor{border-top:1px solid var(--line)}
.doctor .container{display:grid;grid-template-columns:1fr 1.1fr;gap:clamp(2.5rem,6vw,6rem);align-items:center}
.doctor h2{margin:1.3rem 0 .4rem}
.doctor .role{font-size:.78rem;letter-spacing:.18em;text-transform:uppercase;color:var(--brass-deep)}
.doctor p{margin-top:1.4rem;color:var(--ink-soft)}
.doctor .link{margin-top:2rem}

/* The homepage doctor photo is landscape, so the portrait frame crops to her
   face; the source is soft, so a mild convolution sharpen crisps the render.
   (Was an inline <style> rule in index.html; the SVG filter it references lives
   in that page's markup, so this is inert elsewhere.) */
.doctor-figure .frame img{object-position:40% 20%;filter:url(#doctor-sharpen) contrast(1.03) saturate(1.03)}

/* image frame + fallback */
.frame{position:relative;aspect-ratio:4/5;overflow:hidden;border:1px solid var(--line);background:var(--panel);display:flex;align-items:center;justify-content:center;text-align:center}
.frame.tall{aspect-ratio:3/4}
.frame.wide{aspect-ratio:3/2}
.frame img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 20%;transition:transform 1.5s var(--ease-out)}
.doctor-figure:hover .frame img,.split-aside:hover .frame img{transform:scale(1.045)}
.frame-fallback{padding:2rem;color:var(--greige);display:flex;flex-direction:column;align-items:center;gap:1rem}
.frame-fallback small{font-size:.62rem;letter-spacing:.2em;text-transform:uppercase;line-height:1.9}
.figcap{margin-top:1rem;font-size:.68rem;letter-spacing:.22em;text-transform:uppercase;color:var(--greige);display:flex;justify-content:space-between}

/* ---------- credentials / values list ---------- */
.deflist{border-top:1px solid var(--line)}
.deflist .item{display:grid;grid-template-columns:auto 1fr;gap:1.5rem 2.5rem;padding:clamp(1.6rem,2.5vw,2.2rem) 0;border-bottom:1px solid var(--line)}
.deflist .n{font-family:var(--f-display);font-style:italic;color:var(--brass-deep);font-size:1rem}
.deflist .k{font-family:var(--f-display);font-size:1.3rem;color:var(--ink);font-weight:300}
.deflist .v{font-size:.95rem;color:var(--ink-soft);margin-top:.5rem;max-width:60ch}
/* the GMC number: emphasised without going bold, which would fight a 300-weight
   body face. The register link is underlined because it leaves the site — a
   verifiable claim should look verifiable. */
.deflist .v strong{font-weight:400;color:var(--ink)}
.deflist .v a{color:var(--brass-deep);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px;transition:color .4s var(--ease)}
.deflist .v a:hover{color:var(--ink)}

/* horizontal labeled points */
.points{display:grid;grid-template-columns:repeat(4,1fr);gap:2.4rem;margin-top:3.5rem}
.points .p{padding-top:1.6rem;border-top:1px solid var(--line)}
.points .p .n{font-family:var(--f-display);font-style:italic;color:var(--brass-deep);font-size:1rem}
.points .p h3{font-family:var(--f-display);font-size:1.25rem;color:var(--ink);font-weight:300;margin:.9rem 0 .7rem}
.points .p p{font-size:.92rem;color:var(--ink-soft)}

/* ---------- areas chips ---------- */
.areas{display:flex;flex-wrap:wrap;gap:.7rem;margin-top:1.8rem}
.areas li{list-style:none;font-size:.8rem;letter-spacing:.04em;color:var(--ink);border:1px solid var(--line);border-radius:100px;padding:.6rem 1.15rem;background:var(--paper)}

/* ---------- journey timeline ---------- */
.journey{counter-reset:step}
.journey .step{display:grid;grid-template-columns:auto 1fr;gap:clamp(1.5rem,4vw,3rem);padding:clamp(1.8rem,3vw,2.6rem) 0;border-top:1px solid var(--line);align-items:baseline}
.journey .step:last-child{border-bottom:1px solid var(--line)}
.journey .step .no{font-family:var(--f-display);font-style:italic;font-size:1.4rem;color:var(--brass-deep)}
.journey .step h3{font-family:var(--f-display);font-size:clamp(1.4rem,1.1rem + 1.2vw,1.9rem);color:var(--ink);font-weight:300}
.journey .step p{margin-top:.6rem;color:var(--ink-soft);max-width:60ch}

/* ---------- FAQ ---------- */
/* margin/measure were style="margin-top:2.6rem;max-width:820px" inline on all 8 */
.faqs{border-top:1px solid var(--line);margin-top:2.6rem;max-width:820px}
.faq{border-bottom:1px solid var(--line)}
.faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:2rem;padding:clamp(1.4rem,2.4vw,2rem) 0;font-family:var(--f-display);font-size:clamp(1.2rem,1rem + .9vw,1.6rem);color:var(--ink);font-weight:300;transition:color .45s var(--ease)}
.faq summary:hover{color:var(--brass-deep)}
.faq summary::-webkit-details-marker{display:none}
.faq .ic{position:relative;width:20px;height:20px;flex-shrink:0}
.faq .ic::before,.faq .ic::after{content:"";position:absolute;background:var(--brass);transition:transform .4s var(--ease)}
.faq .ic::before{top:9px;left:0;width:20px;height:1px}
.faq .ic::after{top:0;left:9px;width:1px;height:20px}
.faq[open] .ic::after{transform:scaleY(0)}
.faq .ans{padding:0 0 clamp(1.4rem,2.4vw,2rem);color:var(--ink-soft);max-width:64ch}
.faq .ans p + p{margin-top:1rem}

/* ---------- pricing ---------- */
.price-group{margin-top:clamp(2.5rem,5vw,4rem)}
.price-group:first-of-type{margin-top:0}
.price-head{display:flex;align-items:baseline;gap:1.2rem;margin-bottom:1.4rem}
.price-head .g-num{font-family:var(--f-display);font-style:italic;color:var(--brass-deep);font-size:1rem}
.price-head h2{font-size:clamp(1.6rem,1.2rem + 1.6vw,2.3rem)}
.price-group .note{color:var(--ink-soft);max-width:60ch;margin-bottom:1.4rem;font-size:.95rem}
.price-table{border-top:1px solid var(--line)}
.price-row{display:grid;grid-template-columns:1fr auto;gap:1.5rem 2rem;align-items:baseline;padding:1.15rem 0;border-bottom:1px solid var(--line)}
.price-row .name{font-size:1.05rem;color:var(--ink)}
.price-row .name small{display:block;font-size:.82rem;color:var(--greige);letter-spacing:.02em;margin-top:.2rem}
.price-row .amt{font-family:var(--f-display);font-size:1.15rem;color:var(--ink);white-space:nowrap;font-variant-numeric:tabular-nums}
.price-row .amt.free{color:var(--brass-deep);font-style:italic}

/* ---------- contact / form ---------- */
.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2.5rem,6vw,5rem)}
.contact-lines{display:grid;gap:1.4rem;margin-top:2.4rem}
.contact-lines a,.contact-lines div{display:flex;flex-direction:column;gap:.35rem}
.contact-lines .social{flex-direction:row}
.contact-lines .k{font-size:.66rem;letter-spacing:.22em;text-transform:uppercase;color:var(--greige)}
.contact-lines .v{font-family:var(--f-display);font-size:1.2rem;color:var(--ink)}
.contact-lines a .v{width:fit-content;border-bottom:1px solid transparent;transition:border-color .4s}
.contact-lines a:hover .v{border-color:var(--brass)}
form{display:grid;gap:1.3rem}
.field{display:grid;gap:.55rem}
.field label{font-size:.66rem;letter-spacing:.2em;text-transform:uppercase;color:var(--greige)}
.field input,.field select,.field textarea{font-family:var(--f-sans);font-size:1rem;font-weight:300;color:var(--ink);background:transparent;border:none;border-bottom:1px solid var(--line);padding:.7rem 0;transition:border-color .4s var(--ease)}
/* the native control rendered with the OS chrome — a grey system arrow and a
   different type stack from every other field on the form */
.field select{
  appearance:none;-webkit-appearance:none;border-radius:0;cursor:pointer;padding-right:1.8rem;
  background-image:linear-gradient(45deg,transparent 50%,var(--brass-deep) 50%),linear-gradient(135deg,var(--brass-deep) 50%,transparent 50%);
  background-position:calc(100% - 10px) calc(50% + 1px),calc(100% - 5px) calc(50% + 1px);
  background-size:5px 5px,5px 5px;background-repeat:no-repeat;
}
.field select:focus{background-image:linear-gradient(45deg,transparent 50%,var(--ink) 50%),linear-gradient(135deg,var(--ink) 50%,transparent 50%)}
/* map links sit under the address as a quiet secondary action */
.map-links{display:flex;gap:1.1rem;margin-top:.5rem}
.map-links a{font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;color:var(--brass-deep);border-bottom:1px solid var(--line);padding-bottom:2px;width:fit-content;transition:border-color .4s var(--ease),color .4s var(--ease)}
.map-links a:hover{color:var(--ink);border-bottom-color:var(--brass)}
.field textarea{resize:vertical;min-height:74px}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-bottom-color:var(--brass)}
/* was #b3a894 — 2.03:1 on bone, the only text on the site that failed AA
   outright. --greige is the existing muted-label token and reaches 5.19:1,
   so this needs no new colour, just the right one. */
.field input::placeholder,.field textarea::placeholder{color:var(--greige)}
.row-2{display:grid;grid-template-columns:1fr 1fr;gap:1.3rem}
.form-note{font-size:.76rem;color:var(--greige)}
/* Direct route out of the form. With no endpoint wired the submit hands off to a
   mailto:, which silently does nothing for anyone without a mail client set up —
   so the alternative has to be visible before they click, not after. */
.form-alt{font-size:.82rem;color:var(--ink-soft);margin-top:-.5rem}
.form-alt a{color:var(--brass-deep);border-bottom:1px solid var(--line);padding-bottom:1px;transition:border-color .4s var(--ease),color .4s var(--ease)}
.form-alt a:hover{color:var(--ink);border-bottom-color:var(--brass)}
.form-status{font-size:.82rem;color:var(--ink-soft);margin-top:.2rem}
.form-status.is-error{color:#7A2A2A}
.form-success,.form-error{padding:1.1rem 1.3rem;margin-bottom:1.5rem;border:1px solid;border-radius:2px}
.form-success{font-family:var(--f-display);font-size:1.15rem;line-height:1.5;color:var(--ink);background:var(--panel);border-color:var(--brass)}
.form-error{font-size:.9rem;line-height:1.5;color:#7A2A2A;background:#F7ECEC;border-color:#7A2A2A}

/* ---------- testimonials ---------- */
/* bone, not paper: the journey shelf directly above is paper, and two adjacent
   paper sections read as one undifferentiated block (rule 1) */
.testimonials{border-block:1px solid var(--line)}
.testimonials .t-head{max-width:560px}
.testimonials .t-head h2{margin-top:1.4rem}
.testimonials .quotes{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(1.6rem,3vw,2.8rem);margin-top:clamp(2.6rem,4vw,3.6rem)}
.quote{display:flex;flex-direction:column;gap:1.3rem;padding-top:1.7rem;border-top:1px solid var(--line)}
.quote .mark{font-family:var(--f-display);font-style:italic;font-size:2.6rem;line-height:.5;color:var(--brass-deep);height:.4em}
.quote blockquote{font-family:var(--f-display);font-weight:300;font-size:clamp(1.15rem,1rem + .7vw,1.45rem);line-height:1.5;letter-spacing:-.01em;color:var(--ink)}
.quote figcaption{margin-top:auto;font-size:.7rem;letter-spacing:.2em;text-transform:uppercase;color:var(--greige)}
@media (max-width:900px){.testimonials .quotes{grid-template-columns:1fr;gap:2rem}}

/* ---------- CTA band (ink) ---------- */
.cta{background:var(--ink);color:#C9BCA9}
.cta .eyebrow{color:#a99a86}
.cta .eyebrow::before{background:var(--brass)}
.cta h2{color:var(--bone)}
.cta p{color:#C9BCA9;margin-top:1.4rem;max-width:46ch}
.cta .container{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(2rem,5vw,4rem);align-items:center}
.cta-actions{display:flex;flex-wrap:wrap;gap:1rem;justify-content:flex-end}

/* ---------- footer ---------- */
.footer{background:var(--ink);color:#9a8c78;border-top:1px solid #322b23;padding-block:3.4rem}
.footer .container{display:flex;flex-wrap:wrap;justify-content:space-between;gap:2.5rem;align-items:flex-start}
.footer .mono text{fill:var(--bone)}
.footer-brand .brand-name{color:var(--bone);font-size:1.25rem;letter-spacing:.14em;text-transform:uppercase;margin-top:1rem}
.footer-brand .brand-sub{color:#b89f7d;margin-top:.5rem;font-size:.62rem;letter-spacing:.24em;text-transform:uppercase}
.footer-links{display:flex;gap:3.5rem;flex-wrap:wrap}
/* align-content:start is load-bearing. The columns are flex items and stretch to
   the tallest, then grid's default align-content (stretch) divides that leftover
   height between the auto rows. Because the columns hold different numbers of
   links, row 1 ended up a different height in each — so "Anti-Wrinkle
   Injections", "About Dr Omeshwari" and the phone number sat on three different
   baselines despite their headings all starting at the same top. */
.footer-links .col{display:grid;gap:.85rem;align-content:start}
.footer-links .h{font-size:.64rem;letter-spacing:.22em;text-transform:uppercase;color:#b3a688;margin-bottom:.3rem}
.footer-links a{font-size:.9rem;color:#C9BCA9;transition:color .3s}
.footer-links a:hover{color:var(--bone)}
/* replaces a repeated inline style:color:#b3a688;font-size:.9rem on 19 pages */
.footer-addr{font-size:.9rem;color:#b3a688;line-height:1.6}
.footer-bottom{border-top:1px solid #322b23;margin-top:2.6rem;padding-top:1.7rem;font-size:.72rem;display:flex;flex-wrap:wrap;justify-content:space-between;gap:1rem 1.6rem;color:#b3a688}
.footer-co{display:flex;flex-direction:column;gap:.4rem}
.footer-company{color:#8f8571;font-size:.68rem;letter-spacing:.01em}
.footer-legal{display:flex;flex-wrap:wrap;align-items:center;gap:.85rem 1.4rem}
.footer-legal a{color:#C9BCA9;transition:color .3s}
.footer-legal a:hover{color:var(--bone)}
.footer-legal .sep{color:#4f463a}

/* ---------- legal / prose pages ---------- */
.legal{padding-block:var(--sp-tight)}
.legal .prose{max-width:70ch}
.legal .prose h2{font-size:clamp(1.35rem,1.05rem + 1.3vw,1.9rem);letter-spacing:-.01em;margin-top:3rem}
.legal .prose h2:first-of-type{margin-top:0}
.legal .prose h3{font-size:clamp(1.05rem,.95rem + .5vw,1.3rem);letter-spacing:-.005em;margin-top:2rem}
.legal .prose p{margin-top:1.1rem;color:var(--ink-soft)}
.legal .prose ul{margin-top:1.1rem;padding-left:1.3rem;display:grid;gap:.5rem}
.legal .prose li{color:var(--ink-soft)}
.legal .prose li::marker{color:var(--brass)}
.legal .prose a{color:var(--brass-deep);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
.legal .prose a:hover{color:var(--ink)}
.legal .prose .updated{font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;color:var(--greige);margin-top:0;margin-bottom:2.4rem}
.legal .prose .lede{font-size:1.12rem;color:var(--ink-soft);margin-top:0}
.legal .prose hr{height:1px;background:var(--line);border:0;margin-block:2.6rem}

/* ---------- brand logo (wordmark) ---------- */
.logo{display:inline-flex;align-items:center;gap:.72rem;line-height:1}
.logo .word{font-family:var(--f-display);font-weight:400;font-size:1.5rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ink)}
.nav.scrolled .logo .word{font-size:1.38rem}
/* real logo artwork */
.brand-logo{height:46px;width:auto;display:block;transition:height .5s var(--ease)}
.nav.scrolled .brand-logo{height:39px}
.footer-logo{height:56px;width:auto;display:block}
@media (max-width:600px){.brand-logo{height:33px}.nav.scrolled .brand-logo{height:30px}.footer-logo{height:44px}}

/* ---------- philosophy (editorial pause into Treatments) ---------- */
/* asymmetry is deliberate — the eyebrow sits tight to the top edge and the
   statement breathes out below — but it now derives from the shared step
   instead of being its own third clamp */
.philosophy{background:var(--paper);border-block:1px solid var(--line);text-align:center;padding-block:calc(var(--sp-tight) * .72) var(--sp-tight)}
.philosophy .eyebrow{color:var(--greige);justify-content:center;margin-bottom:clamp(1.4rem,1.9vw,2rem)}
/* weight + tracking come from the section-heading rule near the top of this file;
   re-declaring them here (300 / -.015em) is what silently un-did the homepage
   override for this one element */
.phil-statement{font-size:clamp(1.7rem,1.15rem + 2.6vw,3.15rem);line-height:1.26;color:var(--ink);max-width:20ch;margin-inline:auto}
.phil-statement em{font-style:italic;color:var(--brass-deep)}
.phil-rule{display:block;width:54px;height:1px;background:var(--brass);margin:clamp(2rem,3vw,2.8rem) auto;transform:scaleX(0);transition:transform .9s var(--ease-out) .1s}
.reveal.in .phil-rule,.in .phil-rule{transform:scaleX(1)}
.phil-sub{max-width:56ch;margin-inline:auto;color:var(--ink-soft);font-size:clamp(1rem,.95rem + .3vw,1.12rem);line-height:1.7}

/* ---------- treatment cards ---------- */
/* four-across lookbook row — see the photo variant below for why */
.treatment-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(1rem,1.4vw,1.5rem);margin-top:clamp(2.4rem,4vw,3.4rem)}
.t-card{--pad:clamp(1.7rem,2.4vw,2.3rem);position:relative;display:flex;flex-direction:column;background:var(--paper);border:1px solid var(--line);border-radius:3px;padding:var(--pad);min-height:288px;overflow:hidden;color:inherit;
  transition:transform .55s var(--ease-out),box-shadow .55s var(--ease-out),border-color .55s var(--ease)}
.t-card::before{content:"";position:absolute;left:0;top:0;height:2px;width:100%;background:linear-gradient(90deg,var(--brass),var(--brass-deep));transform:scaleX(0);transform-origin:left;transition:transform .6s var(--ease-out)}
.t-card:hover,.t-card:focus-visible{transform:translateY(-5px);box-shadow:0 28px 56px -34px rgba(27,23,18,.32);border-color:var(--line-soft);outline:none}
.t-card:hover::before,.t-card:focus-visible::before{transform:scaleX(1)}
.t-card:focus-visible{box-shadow:0 0 0 2px var(--brass),0 28px 56px -34px rgba(27,23,18,.32)}
.t-card .t-num{font-family:var(--f-display);font-style:italic;font-size:1rem;color:var(--brass-deep)}
/* min-height reserves exactly two lines so titles of different lengths keep
   their descriptions on a shared baseline. Derived from the line-height rather
   than hand-set: it was 2.28em here, 2.32em on the photo variant and 2.4em on
   mobile — three magic numbers expressing the same "two lines" intent, each of
   which silently stops matching the moment a line-height changes. */
.t-card h3{--h3-lh:1.14;font-family:var(--f-display);font-weight:300;color:var(--ink);font-size:clamp(1.4rem,1.15rem + .85vw,1.85rem);letter-spacing:-.01em;line-height:var(--h3-lh);margin-top:1.45rem;min-height:calc(2em * var(--h3-lh))}
.t-card p{position:relative;margin-top:1.55rem;font-size:.94rem;color:var(--ink-soft);flex-grow:1}
.t-card p::before{content:"";position:absolute;top:-.85rem;left:0;width:32px;height:1px;background:var(--line);transition:width .55s var(--ease),background .55s var(--ease)}
.t-card:hover p::before,.t-card:focus-visible p::before{width:52px;background:var(--brass)}
@media (max-width:600px){.t-card h3{min-height:0}}
.t-card .t-link{margin-top:1.9rem;font-family:var(--f-sans);font-size:.68rem;letter-spacing:.18em;text-transform:uppercase;color:var(--brass-deep);display:inline-flex;align-items:center;gap:.6rem}
.t-card .t-link .arw{transition:transform .45s var(--ease)}
.t-card:hover .t-link .arw,.t-card:focus-visible .t-link .arw{transform:translateX(6px)}
.t-card .soon-tag{position:absolute;top:1.4rem;right:1.4rem;font-size:.58rem;letter-spacing:.18em;text-transform:uppercase;color:var(--brass-deep);border:1px solid var(--line);border-radius:100px;padding:.35rem .7rem}

/* ---------- editorial photo variant of the primary treatment cards ----------
   Shown four-across as a single lookbook row rather than two-across: the plate
   is smaller but the 4:5 framing is unchanged, so the portraits are never cut
   any tighter — the row simply stops consuming two screens of scroll. Type and
   spacing step down to match the narrower column. */
.t-card--photo{--pad:clamp(1.05rem,1.15vw,1.4rem);padding-top:0;min-height:0}
.t-card--photo .t-media{position:relative;margin:0 calc(-1 * var(--pad)) 0;aspect-ratio:4/5;overflow:hidden;background:var(--paper)}
.t-card--photo .t-media img{width:100%;height:100%;object-fit:cover;object-position:var(--focus,50% 16%);display:block;transition:transform 1.2s var(--ease-out);filter:saturate(.96) contrast(1.02)}
.t-card--photo:hover .t-media img,.t-card--photo:focus-visible .t-media img{transform:scale(1.038)}
/* premium finish: soft warm vignette for depth + gallery hairline, with only the bottom edge settling into the paper — never the face */
.t-card--photo .t-media::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(118% 82% at 50% 34%,transparent 60%,rgba(58,44,28,.06) 100%),
    linear-gradient(to bottom,transparent 80%,rgba(251,248,243,.42) 93%,var(--paper) 100%);
  box-shadow:inset 0 0 0 1px rgba(27,23,18,.055)}
.t-card--photo .t-num{margin-top:1rem;font-size:.9rem}
.t-card--photo h3{--h3-lh:1.16;font-size:clamp(1.12rem,.92rem + .5vw,1.42rem);margin-top:.5rem}
.t-card--photo p{margin-top:.95rem;font-size:.855rem;line-height:1.6}
.t-card--photo p::before{top:-.62rem;width:26px}
.t-card--photo:hover p::before,.t-card--photo:focus-visible p::before{width:44px}
.t-card--photo .t-link{margin-top:1.15rem;font-size:.63rem}
.t-card--photo .soon-tag{top:1rem;right:1rem;background:rgba(251,248,243,.82);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);border-color:var(--line-soft);z-index:2}
/* below the four-up threshold fall straight to two-across — three columns would
   orphan the fourth card */
@media (max-width:1000px){.treatment-grid{grid-template-columns:repeat(2,1fr);gap:clamp(1.2rem,2vw,1.7rem)}}
@media (max-width:600px){
  .t-card{min-height:0}
  .treatment-grid{gap:.85rem}
  .t-card--photo{--pad:.95rem}
  /* .t-card h3{min-height:0} above also matches photo cards — they still need
     the two-line reservation because they sit two-up, so re-derive it here */
  .t-card--photo h3{font-size:1.02rem;min-height:calc(2em * var(--h3-lh))}
  .t-card--photo p{display:none}
  .t-card--photo .t-link{margin-top:.95rem}
  /* the pill would otherwise span most of a two-up card and sit across the face */
  .t-card--photo .soon-tag{top:.6rem;right:.6rem;font-size:.5rem;letter-spacing:.1em;padding:.28rem .5rem}
}

/* ---------- secondary condition tiles (Other Conditions We Treat) ---------- */
/* share the treatment-card system so they visually complement the primary cards,
   marked as a secondary tier via a flatter surface and no leading number */
.cond-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.3rem;margin-top:clamp(2rem,3.4vw,3rem)}
.cond-grid .t-card{min-height:222px}
.cond-grid .t-card h3{margin-top:0;font-size:clamp(1.25rem,1.05rem + .6vw,1.55rem)}
@media (max-width:900px){.cond-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:600px){.cond-grid{grid-template-columns:1fr}.cond-grid .t-card{min-height:0}}


/* ---------- interactive face map ---------- */
/* --- shared base (used by anti-wrinkle & dermal-fillers diagrams too) --- */
.face-map{display:grid;grid-template-columns:.85fr 1.15fr;gap:clamp(2rem,5vw,4.5rem);align-items:start;margin-top:clamp(2rem,4vw,3.2rem)}
.face-figure{position:sticky;top:7rem;max-width:400px;margin-inline:auto;width:100%;aspect-ratio:1/1}
.face-photo{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;display:block}
.face-svg{width:100%;height:auto;display:block}
.face-svg.face-overlay{position:absolute;inset:0;height:100%}
.face-fallback{position:absolute;inset:0;display:none;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:.9rem;color:var(--greige);border:1px solid var(--line);background:var(--paper)}
.face-fallback small{font-size:.62rem;letter-spacing:.2em;text-transform:uppercase;line-height:1.9}
/* highlight = whisper-soft tint + dashed anatomical outline (clinical, not filled) */
.face-svg .zone{fill:var(--brass);opacity:0;filter:blur(9px);transform-box:fill-box;transform-origin:center;transform:scale(.7);
  transition:opacity .75s var(--ease-out),transform 1.05s var(--ease-out)}
.face-svg .zone.active{opacity:.1;transform:scale(1)}
/* dashed outline traces the concern's exact area; pathLength="1" keeps dash density even across every shape */
.face-svg .ring{fill:none;stroke:var(--brass);stroke-width:1.25;stroke-linecap:round;stroke-dasharray:.02 .028;
  opacity:0;transform-box:fill-box;transform-origin:center;transform:scale(.93);
  transition:opacity .55s var(--ease-out),transform .9s var(--ease-out);vector-effect:non-scaling-stroke}
.face-svg .ring.active{opacity:.92;transform:scale(1)}
.area-list{list-style:none;display:grid;gap:0}
.area-btn{width:100%;text-align:left;background:none;border:0;border-bottom:1px solid var(--line);display:flex;align-items:center;gap:1rem;padding:.85rem 0;font-family:var(--f-sans);font-size:1.02rem;font-weight:300;color:var(--ink-soft);cursor:pointer;transition:color .55s var(--ease),padding-left .55s var(--ease-out),transform .6s var(--ease-out)}
.area-list li:last-child .area-btn{border-bottom:0}
.dot{position:relative;width:7px;height:7px;border-radius:50%;flex-shrink:0;background:transparent;border:1px solid var(--line);
  box-shadow:0 0 0 0 rgba(169,136,94,0);transition:background .5s var(--ease),border-color .5s var(--ease),box-shadow .75s var(--ease-out),transform .6s var(--ease-settle)}
.area-btn:hover,.area-btn:focus-visible,.area-btn.active{color:var(--ink);padding-left:.4rem;outline:none}
.area-btn:hover .dot,.area-btn:focus-visible .dot,.area-btn.active .dot{background:var(--brass);border-color:var(--brass);transform:scale(1.2);box-shadow:0 0 0 5px rgba(169,136,94,.12)}
.face-note{margin-top:1.6rem;font-size:.86rem;color:var(--greige)}

/* --- treatments page: centred figure with concerns flanking both sides --- */
.face-map--split{grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);gap:clamp(1.1rem,3vw,3.2rem);align-items:center;margin-top:clamp(2.4rem,4vw,3.6rem)}
.face-map--split .face-figure{position:relative;top:auto;width:clamp(240px,30vw,430px);max-width:none}
.face-map--split .face-figure::after{content:"";position:absolute;inset:-6%;border-radius:50%;pointer-events:none;
  background:radial-gradient(circle at 50% 46%,rgba(169,136,94,.10),rgba(169,136,94,0) 62%);opacity:0;transition:opacity .9s var(--ease-out)}
.face-map--split.has-active .face-figure::after{opacity:1}
.face-map--split .area-list{display:flex;flex-direction:column;justify-content:center;gap:clamp(.15rem,.7vw,.55rem)}
.face-map--split .area-btn{width:auto;border-bottom:0;gap:.85rem;padding:.62rem .1rem;font-size:clamp(.94rem,.9rem + .2vw,1.05rem);letter-spacing:.005em}
.face-map--split .area-btn:hover,.face-map--split .area-btn:focus-visible,.face-map--split .area-btn.active{padding-left:.1rem}
.face-map--split .area-txt{position:relative;white-space:nowrap}
.face-map--split .area-txt::after{content:"";position:absolute;left:0;right:0;bottom:-.18em;height:1px;background:var(--brass);transform:scaleX(0);transform-origin:var(--uline,left);transition:transform .55s var(--ease-out)}
.face-map--split .area-btn:hover .area-txt::after,.face-map--split .area-btn:focus-visible .area-txt::after,.face-map--split .area-btn.active .area-txt::after{transform:scaleX(1)}
.face-map--split .lead-line{height:1px;width:14px;flex-shrink:0;background:var(--line);transition:width .6s var(--ease-out),background .55s var(--ease)}
.face-map--split .area-btn:hover .lead-line,.face-map--split .area-btn:focus-visible .lead-line,.face-map--split .area-btn.active .lead-line{width:30px;background:var(--brass)}
/* left column: right-aligned, connector reaches in toward the face */
.area-list--left .area-btn{justify-content:flex-end;text-align:right}
.area-list--left .area-txt{--uline:right}
.face-map--split .area-list--left .area-btn:hover,.face-map--split .area-list--left .area-btn:focus-visible,.face-map--split .area-list--left .area-btn.active{transform:translateX(4px)}
/* right column: mirror image */
.area-list--right .area-btn{justify-content:flex-start;text-align:left}
.area-list--right .area-txt{--uline:left}
.face-map--split .area-list--right .area-btn:hover,.face-map--split .area-list--right .area-btn:focus-visible,.face-map--split .area-list--right .area-btn.active{transform:translateX(-4px)}
/* rings inherit the shared dashed-outline + scale-in reveal (see .face-svg .ring above) */
.face-map--split + .face-note{margin:clamp(2rem,3.5vw,3rem) auto 0;max-width:60ch;text-align:center;font-size:.84rem}

/* other diagram pages (2-column) stack below 820 */
@media (max-width:820px){
  .face-map:not(.face-map--split){grid-template-columns:1fr;gap:2rem}
  .face-map:not(.face-map--split) .face-figure{position:relative;top:auto;max-width:280px;order:-1}
}
/* treatments split map stacks — figure on top, both concern lists below */
@media (max-width:860px){
  .face-map--split{grid-template-columns:1fr;gap:0.4rem;justify-items:center}
  .face-map--split .face-figure{order:-1;width:min(260px,66vw)}
  .face-map--split .area-list{width:100%;max-width:400px;gap:0}
  .face-map--split .area-list--left,.face-map--split .area-list--right{align-self:stretch}
  .face-map--split .area-btn{width:100%;padding:.85rem 0;border-bottom:1px solid var(--line)}
  .face-map--split .area-list--left .area-btn,.face-map--split .area-list--right .area-btn{justify-content:flex-start;text-align:left}
  .face-map--split .area-list li:last-child .area-btn{border-bottom:1px solid var(--line)}
  .face-map--split .area-list--right li:last-child .area-btn{border-bottom:0}
  .face-map--split .area-list--left .dot{order:-1}
  .face-map--split .lead-line{display:none}
  .face-map--split .area-btn:hover,.face-map--split .area-btn:focus-visible,.face-map--split .area-btn.active{transform:none;padding-left:.35rem}
}
@media (max-width:1180px){
  .nav-links,.nav-actions .nav-cta{display:none}
  .nav-toggle{display:flex}
}

/* ---------- responsive ---------- */
@media (max-width:1040px){
  .nav-links,.nav-actions .nav-cta{display:none}
  .nav-toggle{display:flex}
  .statement .container,.split,.doctor .container,.contact-grid,.cta .container{grid-template-columns:1fr}
  .split-aside{position:static}
  .doctor-figure{max-width:460px}
  .points{grid-template-columns:repeat(2,1fr);gap:2rem}
  .cta-actions{justify-content:flex-start}
}
@media (max-width:600px){
  .logo .bar,.logo .stack{display:none}
  .logo .word{font-size:1.3rem}
  .points{grid-template-columns:1fr}
  .row-2{grid-template-columns:1fr}
  .index a,.index .row{grid-template-columns:1fr;gap:.5rem}
  .index .num,.index .go{display:none}
  .price-row{grid-template-columns:1fr auto}
  .footer .container{flex-direction:column}
  .trust .container{gap:.7rem 1.6rem}
}

/* Reduced motion means less movement, not less feedback. The previous rule was
   `transition:none` on everything, which also removed the colour and border
   changes that tell you a control is interactive — leaving buttons and links
   that respond to the pointer with nothing at all. Movement is removed; colour,
   opacity and outline still transition, briefly. */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation:none !important;
    transition-property:color,background-color,border-color,outline-color,opacity,box-shadow,fill,stroke !important;
    transition-duration:.16s !important;
  }
  html{scroll-behavior:auto !important}
  /* anything whose resting state is a transform must be reset, since it can no
     longer be transitioned away */
  .reveal{opacity:1;transform:none}
  .ln-i{transform:none}
  .eyebrow::before{transform:scaleX(1)}
  .phil-rule{transform:scaleX(1)}
  .frame img{transform:none}
  .points .p::after{transform:scaleX(1)}
  .nav-links a::after{transform:scaleX(0)}
  .nav-links a:hover::after,.nav-links a.is-active::after{transform:scaleX(1)}
  .mobile-menu > *{opacity:1;transform:none}
  .btn::after,.nav-cta::after{transform:translateY(101%)}
  .btn:hover::after,.nav-cta:hover::after{transform:translateY(0)}
  body.nav-hidden:not(.menu-open) .nav{transform:none}
}

/* =====================================================================
   INTERACTION PASS
   Components that were styled but had no response to the pointer at all.
   Every rule here is a state change on an element the user can already
   reach — nothing new is introduced to the page.
   ===================================================================== */

/* price rows — 30+ lines of static text on the pricing page, the single
   longest stretch of the site with no interaction of any kind */
.price-row{transition:background .45s var(--ease),padding-inline .45s var(--ease)}
.price-row:hover{background:rgba(169,136,94,.05);padding-inline:.7rem}
.price-row .amt{transition:color .45s var(--ease)}
.price-row:hover .amt{color:var(--brass-deep)}

/* the four numbered points — the rule above each was inert */
.points .p{position:relative}
.points .p::after{content:"";position:absolute;left:0;top:-1px;height:1px;width:100%;
  background:var(--brass);transform:scaleX(0);transform-origin:left;
  transition:transform .7s var(--ease-out)}
.points .p:hover::after{transform:scaleX(1)}
.points .p .n{transition:color .5s var(--ease)}
.points .p:hover .n{color:var(--brass-deep)}

/* journey steps and credential rows share the numbered-list idiom, so they
   share the response */
.journey .step,.deflist .item{transition:padding-left .5s var(--ease)}
.journey .step:hover,.deflist .item:hover{padding-left:.75rem}
.journey .step .no,.deflist .n{transition:transform .55s var(--ease),color .5s var(--ease)}
.journey .step:hover .no,.deflist .item:hover .n{transform:translateX(3px);color:var(--brass-deep)}

/* pull quotes */
.quote{transition:border-color .5s var(--ease)}
.quote:hover{border-top-color:var(--brass)}

/* area chips */
.areas li{transition:border-color .4s var(--ease),background .4s var(--ease),transform .4s var(--ease-settle)}
.areas li:hover{border-color:var(--brass);background:var(--bone);transform:translateY(-1px)}

/* the nav CTA was a flat colour swap while every other button on the site
   used the rising directional fill — the one inconsistency in the button system */
.nav-cta{position:relative;overflow:hidden;isolation:isolate;z-index:0;transition:color .5s var(--ease),border-color .5s var(--ease)}
.nav-cta::after{content:"";position:absolute;inset:0;z-index:-1;background:var(--ink);
  transform:translateY(101%);transition:transform .55s var(--ease-out)}
.nav-cta:hover{background:transparent}
.nav-cta:hover::after{transform:translateY(0)}

/* nav underline animated `width`, which lays out on every frame; scaleX is
   composited. Same look, off the layout thread. */
.nav-links a::after{width:100%;transform:scaleX(0);transform-origin:right;
  transition:transform .45s var(--ease)}
.nav-links a:hover::after,.nav-links a.is-active::after{transform:scaleX(1);transform-origin:left}

/* =====================================================================
   Formerly hero-variant.css — merged in to cut a render-blocking request.
   Must stay AFTER the rules above: cascade order here is load-bearing
   (see the .nav-menu comment near the top of this file).
   ===================================================================== */

/* =====================================================================
   RIVIERA AESTHETICS — hero variants
   The homepage video hero (.hero--editorial + --texture + --video + --dark),
   the nav's behaviour over a dark hero, and the shared dark treatment for
   interior .page-hero sections. Loaded by all 19 pages after styles.css.
   ===================================================================== */

/* Warm, understated architectural backdrop — no photograph.
   `.hero.hero--editorial` (two classes) intentionally outranks the base
   `.hero` rules in styles.css, incl. its responsive overrides. */
.hero.hero--editorial{
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  /* The shared site-wide hero height (--hero-h, defined in styles.css) — the
     same token .page-hero uses, so home and treatments open at exactly the
     height every other page does. The old value was 74vh, which made these two
     the only heroes that grew and shrank with the browser's HEIGHT: on a tall
     window they towered over the rest. */
  min-height:var(--hero-h);
  padding:clamp(7rem,8.5vw,8.5rem) 0 clamp(2.75rem,4.5vw,4rem);
  overflow:hidden;
  background:
    radial-gradient(125% 100% at 50% 4%,#FCFAF6 0%,var(--bone) 47%,#EBE3D5 100%);
}

/* Subtle architectural arch — a single hairline alcove framing the content.
   Very faint, drawn in the brand hairline colour, open at the base so no
   line ever crosses the copy or the button. */
.hero.hero--editorial .hero-arch{
  position:absolute;
  left:50%;
  top:clamp(2.25rem,5vw,4rem);
  transform:translateX(-50%);
  width:min(760px,86vw);
  height:min(540px,62vw);
  border:1px solid var(--line);
  border-bottom:0;
  border-radius:min(380px,43vw) min(380px,43vw) 0 0 / min(340px,58vw) min(340px,58vw) 0 0;
  opacity:.55;
  z-index:0;
  pointer-events:none;
}

/* Soft warm glow behind the logo + a whisper-light grounding at the base. */
.hero.hero--editorial::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:1;
  pointer-events:none;
  background:
    radial-gradient(70% 60% at 50% 40%,rgba(169,136,94,.06),rgba(169,136,94,0) 62%),
    radial-gradient(120% 120% at 50% 122%,rgba(27,23,18,.05),rgba(27,23,18,0) 55%);
}

/* Content column — centred, generously spaced, not too wide. */
.hero.hero--editorial .hero-inner{
  position:relative;
  z-index:2;
  max-width:720px;
  margin:0 auto;
  padding-inline:var(--page-x);
  display:flex;
  flex-direction:column;
  align-items:center;
}

/* Logo — prominent but elegant, correctly proportioned (native ratio kept). */
.hero.hero--editorial .hero-logo{
  width:clamp(280px,40vw,480px);
  height:auto;
  margin-bottom:clamp(1.5rem,3vw,2.4rem);
}

.hero.hero--editorial h1{margin:0}
/* Weight/tracking for the homepage headline. These lived in an inline <style>
   block in index.html; when that block was removed the homepage hero dropped to
   the base h1 weight (300 / -.015em) while every interior .page-hero h1 stayed
   at 500 — the two hero treatments no longer matched. Colour is deliberately
   not set here: .hero--dark below owns it. */
.hero.hero--editorial h1.hero-editorial{font-weight:500;letter-spacing:0;line-height:1.06}
.hero.hero--editorial h1.hero-editorial em{font-style:italic;font-weight:500}
.hero.hero--editorial h1.hero-editorial .l{display:block}

/* Supporting copy — centred, comfortable reading measure. */
.hero.hero--editorial .hero-sub{
  max-width:54ch;
  margin:clamp(1.4rem,2.6vw,2rem) auto 0;
  text-align:center;
}

/* Primary call-to-action. */
.hero.hero--editorial .hero-actions{
  justify-content:center;
  margin-top:clamp(1.9rem,3.2vw,2.5rem);
}

/* ---------- responsive ---------- */
/* Tablet: keep it centred and airy but rein in the vertical height.
   The min-height from the base rule is deliberately NOT reset here — it is the
   thing keeping these heroes level with the interior .page-hero pages. */
@media (max-width:820px){
  .hero.hero--editorial{
    padding:clamp(5.75rem,11vw,7rem) 0 clamp(2.5rem,6vw,3.75rem);
  }
  .hero.hero--editorial .hero-arch{
    top:clamp(2.5rem,7vw,4rem);
    width:88vw;
    height:64vw;
  }
}

/* Mobile: centred, legible, and not excessively tall. */
@media (max-width:600px){
  .hero.hero--editorial{padding:6rem 0 3rem}
  .hero.hero--editorial .hero-logo{width:min(300px,80vw)}
  .hero.hero--editorial .hero-sub{max-width:40ch}
  .hero.hero--editorial .hero-arch{top:5.5rem;width:92vw;height:74vw;opacity:.45}
  .hero.hero--editorial .hero-actions .btn{width:100%;justify-content:center}
}

/* Removed: .nav--brandsplit — an alternative nav no page uses. */

/* Text-led hero (no hero logo): raise the copy while clearing the taller
   centred-logo nav. Scoped so the other variants are untouched. */
.hero.hero--editorial.hero--textlead{
  padding-top:clamp(7.75rem,9.5vw,9rem);
}
/* A more refined (smaller) headline — reads more couture and lets the
   centred brand logo hold its own rather than being overpowered. */
.hero.hero--editorial.hero--textlead h1{
  font-size:clamp(2.1rem,1.55rem + 3vw,3.9rem);
}
@media (max-width:820px){
  .hero.hero--editorial.hero--textlead{padding-top:clamp(6.5rem,13vw,8rem)}
}
@media (max-width:600px){
  .hero.hero--editorial.hero--textlead{padding-top:6.75rem}
}

/* =====================================================================
   MODIFIER: .hero--texture  —  warm plaster / grain MATERIAL
   Layers a soft mottled "plaster wall" + a fine film grain over the base
   gradient. Both are inline SVG (feTurbulence) data URIs — no external
   files, no photograph. Add alongside .hero--editorial.
   ===================================================================== */
.hero.hero--editorial.hero--texture{
  background:
    /* fine film grain — barely-there tooth */
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.05 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E"),
    /* soft large-scale plaster mottle — uneven warmth like a limewash wall */
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='900' height='900'%3E%3Cfilter id='p'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.012' numOctaves='2' seed='7' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.05 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23p)'/%3E%3C/svg%3E"),
    radial-gradient(125% 100% at 50% 4%,#FCFAF6 0%,var(--bone) 47%,#EBE3D5 100%);
  background-size:160px 160px, 900px 900px, cover;
  background-position:center;
}

/* =====================================================================
   MODIFIER: .hero--video  —  full-bleed background video
   Sits above the warm fallback (keep .hero--texture on the element so the
   material shows before the clip loads, if it 404s, or under reduced
   motion). A warm bone wash keeps the dark copy legible over any footage.
   ===================================================================== */
.hero.hero--editorial.hero--video{overflow:hidden}
.hero.hero--editorial.hero--video .hero-video{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  z-index:0;
  background:transparent;   /* let the texture fallback show through while loading */
}
/* Legibility wash: overall warm tint + a stronger glow behind the centred copy. */
.hero.hero--editorial.hero--video::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:1;
  pointer-events:none;
  background:
    linear-gradient(0deg,rgba(243,238,230,.52),rgba(243,238,230,.52)),
    radial-gradient(66% 68% at 50% 46%,rgba(243,238,230,.86),rgba(243,238,230,.32) 66%,rgba(243,238,230,.12) 100%);
}
/* Respect users who prefer reduced motion — hide the clip, keep the material. */
@media (prefers-reduced-motion:reduce){
  .hero.hero--editorial.hero--video .hero-video{display:none}
}
/* Mobile: the background video plays on phones too (same footage as desktop).
   The poster still shows as the loading/reduced-motion fallback (see the
   .hero--dark mobile block below and the prefers-reduced-motion rule above). */


/* =====================================================================
   THEME: .hero--dark  —  espresso ground, gold accents, cream copy
   Restored with the legibility work kept. Two things here are deliberate and
   should not be reverted to the original values:

   1. The scrim's centre radial DARKENS rather than lightens. The original
      lightened the middle (.16 centre → .62 edge), which is exactly where the
      copy sits, so a bright frame of footage ran straight under the headline.
      Measured on the rendered page with the text hidden, the worst pixel behind
      the headline was 1.07:1. With the pool of shade fitted to the copy column
      it is 6.49:1.
   2. The italic uses --brass-hero (#D8B888), not --brass (#A9885E). The palette
      brass is tuned for bone; over footage it fell to 1.2:1, making "Art" and
      "yourself" the least readable words on the page.
   ===================================================================== */
.hero.hero--editorial.hero--dark{
  background:radial-gradient(120% 120% at 50% 0%,#20180F 0%,#171009 55%,#0E0A06 100%);
  --brass-hero:#D8B888;
}
.hero.hero--editorial.hero--dark.hero--video .hero-video{
  filter:brightness(1.04) contrast(1.06) saturate(1.08);
  transform:scale(1.02);
}
.hero.hero--editorial.hero--dark.hero--video::after{
  background:
    radial-gradient(120% 90% at 50% 118%,rgba(126,96,56,.20),rgba(126,96,56,0) 55%),
    radial-gradient(60% 64% at 50% 45%,rgba(12,8,5,.74),rgba(12,8,5,.42) 70%,rgba(12,8,5,.16) 100%),
    radial-gradient(80% 84% at 50% 44%,rgba(12,8,5,0),rgba(12,8,5,.58) 100%),
    linear-gradient(0deg,rgba(12,8,5,.42),rgba(12,8,5,.42));
}
.hero.hero--editorial.hero--dark .hero-arch{border-color:rgba(169,136,94,.34);opacity:.6}
.hero.hero--editorial.hero--dark h1.hero-editorial,
.hero.hero--editorial.hero--dark h1.hero-editorial .cap{color:#F4EFE6}
.hero.hero--editorial.hero--dark h1.hero-editorial em{color:var(--brass-hero)}
.hero.hero--editorial.hero--dark h1.hero-editorial,
.hero.hero--editorial.hero--dark .hero-sub{text-shadow:0 1px 34px rgba(12,8,5,.55)}
.hero.hero--editorial.hero--dark .hero-sub{
  color:#F4EFE6;font-weight:400;letter-spacing:.1em;
  font-size:clamp(.85rem,.75rem + .35vw,1rem);line-height:2;max-width:56ch;
}
.hero.hero--editorial.hero--dark .btn-solid{background:var(--brass);border-color:var(--brass);color:#171009}
.hero.hero--editorial.hero--dark .btn-solid::after{background:#C7A876}
.hero.hero--editorial.hero--dark .btn-solid:hover{color:#171009}
.hero.hero--editorial.hero--dark .btn-outline{color:#F4EFE6;border-color:rgba(244,239,230,.45)}
.hero.hero--editorial.hero--dark .btn-outline::after{background:#F4EFE6}
.hero.hero--editorial.hero--dark .btn-outline:hover{color:#171009;border-color:#F4EFE6}

/* =====================================================================
   NAV BEHAVIOUR OVER A DARK HERO  (body.hero-dark)
   The hero's own surface, type and buttons now live in the .hero--atlas block
   below. What remains here is only the part that concerns the fixed nav riding
   over a dark hero and flipping once it scrolls onto the light body.
   (The old theme block also carried the video scrim, the arch, the hero-sub
   treatment and duplicate button rules — all of which either targeted elements
   that no longer exist or fought the atlas rules on specificity.)
   ===================================================================== */

/* --- NAV over the dark hero (transparent, not yet scrolled) --- */
.brand-logo--dark{display:none}                       /* default: single-logo pages unaffected */
body.hero-dark .brand-logo--light{display:block}
body.hero-dark .brand-logo--dark{display:none}
body.hero-dark .nav:not(.scrolled) .nav-links a{color:#F4EFE6}
body.hero-dark .nav:not(.scrolled) .nav-links a.is-active{color:var(--brass)}
body.hero-dark .nav:not(.scrolled) .nav-toggle span,
body.hero-dark .nav:not(.scrolled) .nav-toggle span::before,
body.hero-dark .nav:not(.scrolled) .nav-toggle span::after{background:#F4EFE6}
/* Once scrolled onto the light body, the nav bg turns light → revert to dark. */
body.hero-dark .nav.scrolled .brand-logo--light{display:none}
body.hero-dark .nav.scrolled .brand-logo--dark{display:block}

/* --- MENU OPEN: the nav is now over the BONE mobile menu, not the dark hero ---
   Without this, opening the menu at the top of any page left the cream logo and
   the cream close bars sitting on the bone panel at 1.01:1 — the close control
   was, measurably, invisible. The menu-open state is a light surface regardless
   of what the hero underneath is doing, so the nav flips to its dark treatment.
   Placed after the .scrolled rules so it wins in both scroll states. */
body.menu-open .nav .brand-logo--light{display:none}
body.menu-open .nav .brand-logo--dark{display:block}
body.hero-dark.menu-open .nav .nav-toggle span{background:transparent}
body.hero-dark.menu-open .nav .nav-toggle span::before,
body.hero-dark.menu-open .nav .nav-toggle span::after{background:var(--ink)}
/* No mobile poster background needed — the <video poster> attribute supplies it
   (see the note above). This block used to duplicate the poster as a CSS
   background via --hero-poster while the 2.6 MB mp4 ALSO downloaded and played
   underneath it, so phones paid for both. */

/* =====================================================================
   NAV VARIANT: .nav--logoleft  —  logo left (normal size) · links centred ·
   CTA top-right. A 1fr/auto/1fr grid centres the links in the viewport
   regardless of the logo/CTA widths. On mobile the links + CTA hide, logo
   stays left and the toggle sits right.
   ===================================================================== */
.nav--logoleft{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;column-gap:1.5rem}
.nav--logoleft .brand{grid-column:1;justify-self:start}      /* logo keeps the site-default height (46px) */
.nav--logoleft .nav-links{grid-column:2;justify-self:center}
.nav--logoleft .nav-actions{grid-column:3;justify-self:end}

/* Nav CTA matches the rest of the banner — cream over the dark hero, ink once
   the nav scrolls onto the light body (same treatment as the links). */
body.hero-dark .nav-cta{transition:background .5s var(--ease),color .5s var(--ease),border-color .5s var(--ease)}
body.hero-dark .nav:not(.scrolled) .nav-cta{color:#F4EFE6;border-color:rgba(244,239,230,.5)}
body.hero-dark .nav:not(.scrolled) .nav-cta:hover{background:#F4EFE6;border-color:#F4EFE6;color:#171009}
body.hero-dark .nav.scrolled .nav-cta{color:var(--ink);border-color:var(--ink)}
body.hero-dark .nav.scrolled .nav-cta:hover{background:var(--ink);border-color:var(--ink);color:#F4EFE6}

/* =====================================================================
   UNIFORM DARK PAGE-HERO  —  interior pages (no video)
   Gives every non-video page the same dramatic espresso-and-gold backdrop
   as the flagship video heroes, so the transparent → frosted nav (cream
   logo + gold links, flipping on scroll) behaves identically site-wide.
   The existing `.page-hero` content markup is untouched — only the surface
   and the type colours change, scoped under `body.hero-dark`.
   ===================================================================== */
body.hero-dark .page-hero{
  position:relative;
  background:
    /* warm gold light spilling from the top edge */
    radial-gradient(100% 78% at 50% -8%,rgba(126,96,56,.22),rgba(126,96,56,0) 62%),
    /* deep espresso base — matches the dark video hero */
    radial-gradient(120% 120% at 50% 0%,#20180F 0%,#171009 55%,#0E0A06 100%);
  border-bottom:1px solid rgba(169,136,94,.24);
}
/* faint gold grounding at the base so the hand-off to the light body reads
   as an intentional edge, not an abrupt cut. */
body.hero-dark .page-hero::after{
  content:"";position:absolute;inset:auto 0 0 0;height:40%;z-index:0;pointer-events:none;
  background:radial-gradient(120% 100% at 50% 100%,rgba(126,96,56,.16),rgba(126,96,56,0) 60%);
}
body.hero-dark .page-hero .container{position:relative;z-index:1}
/* Type on dark: gold eyebrow + breadcrumb accents, cream headline, softened
   cream lead — the same palette as the flagship heroes. */
body.hero-dark .page-hero .eyebrow{color:var(--brass)}
/* Headline in Fraunces to match the flagship video heroes exactly. */
body.hero-dark .page-hero h1{font-family:var(--f-display);font-weight:500;letter-spacing:0;line-height:1.06;color:#F4EFE6}
body.hero-dark .page-hero h1 .serif-accent{font-family:var(--f-display);font-weight:500;color:var(--brass)}
body.hero-dark .page-hero .lead{color:rgba(244,239,230,.82)}
body.hero-dark .page-hero .crumbs,
body.hero-dark .page-hero .crumbs a{color:rgba(244,239,230,.6)}
body.hero-dark .page-hero .crumbs a:hover{color:var(--brass)}
body.hero-dark .page-hero .crumbs span{color:var(--brass)}
/* Outline buttons in a dark hero (e.g. the consultation page CTAs) glow cream;
   solid buttons already carry the brass fill from the base styles. */
body.hero-dark .page-hero .btn-outline{color:#F4EFE6;border-color:rgba(244,239,230,.45)}
body.hero-dark .page-hero .btn-outline::after{background:#F4EFE6}
body.hero-dark .page-hero .btn-outline:hover{color:#171009;border-color:#F4EFE6}

/* mobile menu — the links appeared as one block; they now arrive in sequence
   behind the panel, which is what makes the panel feel like it opens rather
   than simply existing */
.mobile-menu > *{opacity:0;transform:translateY(14px);
  transition:opacity .5s var(--ease-out),transform .5s var(--ease-out)}
body.menu-open .mobile-menu > *{opacity:1;transform:none}
body.menu-open .mobile-menu > *:nth-child(1){transition-delay:.12s}
body.menu-open .mobile-menu > *:nth-child(2){transition-delay:.17s}
body.menu-open .mobile-menu > *:nth-child(3){transition-delay:.22s}
body.menu-open .mobile-menu > *:nth-child(4){transition-delay:.27s}
body.menu-open .mobile-menu > *:nth-child(5){transition-delay:.32s}
body.menu-open .mobile-menu > *:nth-child(6){transition-delay:.37s}
body.menu-open .mobile-menu > *:nth-child(n+7){transition-delay:.42s}

/* nav retracts on downward scroll on small screens, where a fixed bar costs
   ~11% of the viewport; it returns the moment the user scrolls up */
@media (max-width:1180px){
  .nav{transition:background .5s var(--ease),box-shadow .5s var(--ease),
    padding .5s var(--ease),border-color .5s var(--ease),transform .45s var(--ease)}
  body.nav-hidden:not(.menu-open) .nav{transform:translateY(-102%)}
}

/* ---------- social ---------- */
/* Inline SVG rather than an icon font or a third-party script: three glyphs do
   not justify a webfont, and a social widget would put a tracker on a medical
   page. Links open in a new tab with rel="noopener noreferrer". */
.social{display:flex;gap:.7rem;margin-top:1.4rem}
.social a{
  display:inline-flex;align-items:center;justify-content:center;
  width:44px;height:44px;border-radius:50%;
  border:1px solid rgba(201,188,169,.28);color:#C9BCA9;
  transition:color .45s var(--ease),border-color .45s var(--ease),
             background .45s var(--ease),transform .45s var(--ease-settle);
}
.social a:hover{color:var(--ink);background:var(--bone);border-color:var(--bone);transform:translateY(-2px)}
.social a:focus-visible{outline:2px solid var(--brass);outline-offset:3px}
.social svg{width:17px;height:17px;fill:currentColor;display:block}
/* on light surfaces (the contact page column) */
.social--ink a{border-color:var(--line);color:var(--ink-soft)}
.social--ink a:hover{background:var(--ink);border-color:var(--ink);color:var(--bone)}
@media (max-width:600px){.social{justify-content:flex-start}}

/* ---------- whatsapp float ---------- */
/* fixed, independent of scroll and the mobile menu (z-index below its 900) */
.whatsapp-float{
  position:fixed;right:1.25rem;bottom:1.25rem;z-index:500;
  display:flex;align-items:center;justify-content:center;
  width:54px;height:54px;border-radius:50%;
  background:#25D366;color:#fff;
  box-shadow:0 6px 18px rgba(27,23,18,.28);
  transition:transform .35s var(--ease-out),box-shadow .35s var(--ease-out);
}
.whatsapp-float:hover{transform:translateY(-3px);box-shadow:0 10px 22px rgba(27,23,18,.32)}
.whatsapp-float:focus-visible{outline:2px solid var(--brass);outline-offset:3px}
.whatsapp-float svg{width:28px;height:28px;fill:currentColor;display:block}
@media (max-width:600px){.whatsapp-float{right:1rem;bottom:1rem;width:50px;height:50px}}