/* ============================================================================
   RELAX MED AESTHETICS — base.css
   Tokens, reset, typography, buttons, nav, footer, shared components.
   ref RMA-2026-01

   SPLIT RULE: anything used on more than one page lives HERE.
   Per-page files (home/treatments/results/page/assistant.css) hold only
   layouts unique to that page.

   >>> MINT DISCIPLINE — do not violate <<<
   --mint is a FILL or a STROKE, never text. It appears on exactly five things:
       .btn-book, .nav-cta, .ba-pill--step, focus rings, and the .swoosh
       brand stroke (the logo's own flourish, echoed as the site's signature).
   Text on mint is ALWAYS --ink.
   --teal-ink is the ONLY teal permitted as text, on exactly one thing:
       .goal-word
   Nothing else in this site is teal. Measured: mint on white is 1.70:1 and
   fails WCAG outright; ink on mint is 10.44:1 and passes. Everything else
   earns attention through type scale and whitespace.
   ============================================================================ */

:root{
  /* --- surface ---------------------------------------------------------- */
  --paper:#FBFAF7;            /* warm porcelain */
  --white:#FFFFFF;
  --paper-2:#F3F0E9;          /* warm greige, section alternation */
  --sand:#EFE8DD;             /* warmest tone — "warm and approachable" */
  /* Dark ground is DEEP SEA-TEAL, not black — the brand's mint sits inside
     this hue family, so dark sections read as Relax, not as a generic
     dark-mode band. */
  --deep:#0F211F;
  --deep-2:#132A27;

  /* --- ink -------------------------------------------------------------- */
  --ink:#191B19;              /* body text */
  --charcoal:#373935;         /* sampled from the logo wordmark */
  --muted:#63676A;
  --ink-on-dark:#F4F4F1;
  --line:rgba(25,27,25,.12);
  --line-strong:rgba(25,27,25,.26);

  /* --- brand accent. FILL ONLY. Sampled from the logo swoosh. ----------- */
  --mint:#6CDBD6;
  --mint-deep:#4FC5BF;        /* hover fill */
  --mint-tint:rgba(108,219,214,.14);
  --teal-ink:#1F7A72;         /* the ONLY teal used as text — 4.92:1 */

  /* --- semantic aliases required by website-references/CLAUDE.md -------- */
  --brand-primary:var(--charcoal);
  --brand-accent:var(--mint);
  --brand-neutral:var(--paper-2);

  /* --- type ------------------------------------------------------------- */
  --font-display:"Playfair Display", "Times New Roman", Georgia, serif;
  --font-ui:"Jost", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-body:"Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --track-ui:.18em;

  --fs-hero:clamp(2.75rem, 7vw, 5.5rem);
  --fs-h1:clamp(2.25rem, 5vw, 3.75rem);
  --fs-h2:clamp(1.875rem, 3.6vw, 2.875rem);
  --fs-h3:clamp(1.25rem, 2vw, 1.625rem);
  --fs-body:clamp(1rem, .96rem + .2vw, 1.0625rem);
  --fs-sm:.875rem;
  --fs-xs:.75rem;

  /* --- metrics ---------------------------------------------------------- */
  --maxw:1280px;
  --maxw-prose:68ch;
  --pad:clamp(1.25rem, 4vw, 2.5rem);
  --nav-h:76px;
  --nav-h-mobile:60px;
  --sect-y:clamp(4rem, 9vw, 7.5rem);
  /* Imagery + cards get a soft 10px radius — echoing the rounded tablet
     frame in the clinic's own social template. BUTTONS ARE PILLS, matching
     the concept's "Book on Fresha" pill and the BEFORE/AFTER pill language. */
  --r:10px;
  --r-sm:4px;
  --r-pill:999px;
  --shadow-1:0 1px 2px rgba(25,27,25,.05), 0 8px 24px rgba(25,27,25,.06);
  --shadow-2:0 12px 48px rgba(25,27,25,.14);
  --ease:cubic-bezier(.2,.7,.2,1);
  --dur:240ms;
}

/* ============================================================================
   RESET
   ============================================================================ */
*,*::before,*::after{ box-sizing:border-box; }
html{
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
  /* Sticky header offset. Without this every anchor lands UNDER the nav. */
  scroll-padding-top:calc(var(--nav-h) + 16px);
}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--font-body);
  font-size:var(--fs-body);
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img,picture,video,svg{ max-width:100%; display:block; }
img{ height:auto; }
button,input,select,textarea{ font:inherit; color:inherit; }
button{ background:none; border:0; cursor:pointer; }
a{ color:inherit; text-decoration:none; }
ul,ol{ list-style:none; margin:0; padding:0; }
h1,h2,h3,h4,p,figure,blockquote{ margin:0; }
iframe{ border:0; }

:focus-visible{
  outline:3px solid var(--mint);
  outline-offset:3px;
  border-radius:var(--r);
}

.skip-link{
  position:absolute; left:-9999px; top:0; z-index:2000;
  background:var(--ink); color:var(--ink-on-dark);
  padding:.85rem 1.25rem; font-family:var(--font-ui);
  text-transform:uppercase; letter-spacing:var(--track-ui); font-size:var(--fs-xs);
}
.skip-link:focus{ left:0; }
.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;
}

/* ============================================================================
   TYPOGRAPHY
   ============================================================================ */
.display,h1,h2,h3{
  font-family:var(--font-display);
  font-weight:400;
  line-height:1.08;
  letter-spacing:-.015em;
  color:var(--ink);
}
h1{ font-size:var(--fs-h1); }
h2{ font-size:var(--fs-h2); }
h3{ font-size:var(--fs-h3); line-height:1.25; }

.eyebrow{
  font-family:var(--font-ui);
  font-size:var(--fs-xs);
  text-transform:uppercase;
  letter-spacing:var(--track-ui);
  font-weight:500;
  color:var(--muted);
  display:block;
  margin-bottom:1rem;
}
.lede{ font-size:clamp(1.0625rem,1.6vw,1.25rem); color:var(--muted); max-width:60ch; }
.prose{ max-width:var(--maxw-prose); }
.prose p + p{ margin-top:1.1em; }
.rule{ height:1px; background:var(--line); border:0; margin:0; }

/* The clinic's own social-template pattern, promoted to a site component:
   a teal display-italic goal word over a light sans sub-line. Used on gallery
   captions, treatment page headers, and the featured-service block. */
.goal-word{
  display:block;
  font-family:var(--font-display);
  font-style:italic;
  font-weight:400;
  font-size:clamp(1.5rem,3vw,2.25rem);
  letter-spacing:.01em;
  color:var(--teal-ink);        /* the ONLY teal text in the site */
  line-height:1.1;
}
/* EXCEPTION to the mint-as-text ban, and the only one: on the deep sea-teal
   ground mint measures ~10:1 (the 1.70:1 failure is specific to white).
   Anywhere else, teal text stays --teal-ink. */
.section--dark .goal-word{ color:var(--mint); }

.goal-line{
  display:block;
  font-family:var(--font-body);
  font-weight:300;
  font-size:clamp(1rem,1.6vw,1.1875rem);
  color:var(--muted);
  line-height:1.35;
  margin-top:.35rem;
}

/* ============================================================================
   LAYOUT
   ============================================================================ */
.wrap{ width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:var(--pad); }
.section{ padding-block:var(--sect-y); }
.section--tight{ padding-block:calc(var(--sect-y) * .6); }
.section--alt{ background:var(--paper-2); }
.section--sand{ background:var(--sand); }
.section--dark{ background:var(--deep); color:var(--ink-on-dark); }
.section--dark h1,.section--dark h2,.section--dark h3{ color:var(--ink-on-dark); }
.section--dark .eyebrow,.section--dark .lede{ color:rgba(244,244,241,.72); }
.section-head{ margin-bottom:clamp(2rem,4vw,3.25rem); }
.grid{ display:grid; gap:clamp(1.25rem,2.5vw,2rem); }
.grid-2{ grid-template-columns:repeat(auto-fit,minmax(min(100%,26rem),1fr)); }
.grid-3{ grid-template-columns:repeat(auto-fit,minmax(min(100%,19rem),1fr)); }

/* ============================================================================
   BUTTONS
   ============================================================================ */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.6em;
  font-family:var(--font-ui); font-size:var(--fs-xs); font-weight:500;
  text-transform:uppercase; letter-spacing:var(--track-ui);
  padding:1.0625rem 2.25rem; min-height:50px;
  border:1px solid var(--ink); border-radius:var(--r-pill);
  background:var(--ink); color:var(--ink-on-dark);
  transition:background var(--dur) var(--ease), color var(--dur) var(--ease),
             border-color var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.btn:hover{ background:transparent; color:var(--ink); }
.btn:active{ transform:translateY(1px); }

.btn-ghost{ background:transparent; color:var(--ink); }
.btn-ghost:hover{ background:var(--ink); color:var(--ink-on-dark); }

/* THE booking button. Mint fill, ink label — 10.44:1. Never mint text. */
.btn-book{
  background:var(--mint); border-color:var(--mint); color:var(--ink);
  font-weight:600;
}
.btn-book:hover{ background:var(--mint-deep); border-color:var(--mint-deep); color:var(--ink); }

.btn-lg{ padding:1.25rem 2.5rem; font-size:var(--fs-sm); }
.btn-block{ display:flex; width:100%; }

/* Text link with the thin brand rule under it (concept: "MEET OUR TEAM") */
.link-rule{
  display:inline-flex; align-items:center; gap:.6em;
  font-family:var(--font-ui); font-size:var(--fs-xs); font-weight:500;
  text-transform:uppercase; letter-spacing:var(--track-ui);
  padding-bottom:.5rem; border-bottom:1px solid var(--line-strong);
  transition:border-color var(--dur) var(--ease), gap var(--dur) var(--ease);
}
.link-rule:hover{ border-color:var(--ink); gap:.9em; }
.section--dark .link-rule{ border-color:rgba(244,244,241,.4); }
.section--dark .link-rule:hover{ border-color:var(--ink-on-dark); }

/* ============================================================================
   FILTER CHIPS — shared by the results gallery
   ============================================================================ */
.chips{ display:flex; flex-wrap:wrap; gap:.625rem; }
.chip{
  font-family:var(--font-ui); font-size:var(--fs-xs); font-weight:500;
  text-transform:uppercase; letter-spacing:var(--track-ui);
  padding:.75rem 1.375rem; min-height:44px;
  border:1px solid var(--line-strong); border-radius:var(--r-pill);
  background:transparent; color:var(--muted);
  transition:background var(--dur) var(--ease), border-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
.chip:hover{ border-color:var(--ink); color:var(--ink); }
.chip[aria-pressed="true"]{ background:var(--ink); border-color:var(--ink); color:var(--ink-on-dark); }

/* ============================================================================
   CARDS
   ============================================================================ */
.card{
  background:var(--white); border:1px solid var(--line); border-radius:var(--r);
  overflow:hidden; display:flex; flex-direction:column;
  transition:box-shadow var(--dur) var(--ease), transform var(--dur) var(--ease);
}
a.card:hover{ box-shadow:var(--shadow-1); transform:translateY(-2px); }
.card-media{ aspect-ratio:4/3; overflow:hidden; background:var(--paper-2); }
.card-media img{ width:100%; height:100%; object-fit:cover; }
/* Typographic stand-in for a treatment with no photo yet — never recycle an
   existing photo onto a different treatment. */
.media-fallback{
  width:100%; height:100%; display:flex; align-items:center; justify-content:center;
  text-align:center; padding:1.5rem; font-family:var(--font-display); font-size:var(--fs-h3);
  line-height:1.2; color:var(--muted); background:var(--paper-2);
}
.card-body{ padding:1.5rem; display:flex; flex-direction:column; gap:.625rem; flex:1; }
.card-title{ font-family:var(--font-display); font-size:var(--fs-h3); line-height:1.2; }
.card-text{ color:var(--muted); font-size:var(--fs-sm); }

/* ============================================================================
   REVEAL ON SCROLL
   Defaults VISIBLE. JS adds .reveal-init to hide, then .is-in to show, with a
   3s safety net. A JS failure must leave a readable page, never a blank one.
   ============================================================================ */
.reveal{ opacity:1; transform:none; }
.reveal-init{ opacity:0; transform:translateY(18px); }
.reveal-init.is-in{
  opacity:1; transform:none;
  transition:opacity 620ms var(--ease), transform 620ms var(--ease);
}

/* ============================================================================
   REDUCED MOTION — copied from samurai/css/styles.css:1177-1184
   ============================================================================ */
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto !important; }
  *,*::before,*::after{
    animation-duration:.01ms !important; animation-iteration-count:1 !important;
    transition-duration:.01ms !important; scroll-behavior:auto !important;
  }
  .reveal-init{ opacity:1 !important; transform:none !important; }
}

/* ============================================================================
   ?audit=1 — placeholder audit flag (plan section 10)
   Outlines every stand-in so CONTENT-NEEDED.md is self-verifying.
   ============================================================================ */
body.is-audit [data-placeholder]{
  outline:2px dashed #C2410C !important; outline-offset:3px; position:relative;
}
body.is-audit [data-placeholder]::after{
  content:"NEEDS: " attr(data-placeholder);
  position:absolute; top:0; left:0; z-index:60;
  background:#C2410C; color:#fff;
  font:600 10px/1.4 var(--font-ui); letter-spacing:.06em;
  padding:3px 7px; max-width:100%; pointer-events:none;
}

/* ============================================================================
   STICKY NAV  (contract clause 1: "sticky navigation with dropdowns and
   smooth scrolling"). Markup is injected by js/layout.js — never hand-written.
   ============================================================================ */
.topnav{
  position:fixed; inset:0 0 auto 0; z-index:1000;
  height:var(--nav-h);
  display:flex; align-items:center;
  background:var(--paper);
  border-bottom:1px solid var(--line);
  transition:background var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.topnav-inner{
  width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:var(--pad);
  display:flex; align-items:center; justify-content:space-between; gap:1.5rem;
}

/* Transparent over the hero video on the homepage, solid once scrolled.
   (demo-law-group nav-transparent trick.) */
.topnav--over{ background:transparent; border-bottom-color:transparent; }
.topnav--over .nav-link,
.topnav--over .nav-caret,
.topnav--over .brand-word{ color:var(--white); }
.topnav--over .hamburger span{ background:var(--white); }
.topnav.is-solid{ background:var(--paper); border-bottom-color:var(--line); }
.topnav.is-solid .nav-link,
.topnav.is-solid .nav-caret,
.topnav.is-solid .brand-word{ color:var(--ink); }
.topnav.is-solid .hamburger span{ background:var(--ink); }

/* --- brand ------------------------------------------------------------- */
.brand{ display:flex; align-items:center; gap:.5rem; flex:0 0 auto; }
.brand{ position:relative; display:flex; align-items:center; }
/* The full lockup is ~2.25:1 against the old wordmark's 3.05:1, and its second
   line ("med aesthetics") is roughly a sixth of its height — so mark height is
   what decides whether that line reads or turns to mush. 38px keeps it just
   legible inside the unchanged 76px mobile nav; desktop goes to 52px in a 92px
   nav below. Both marks are the same height, so the crossfade cannot shift the
   nav's shape on scroll. */
.brand-mark{ height:38px; width:auto; transition:opacity var(--dur) var(--ease); }
.brand-mark--light{ position:absolute; left:0; top:50%; transform:translateY(-50%); opacity:0; }
/* Over the hero video the charcoal wordmark is unreadable; swap to the white
   knockout, and swap back once the nav goes solid. */
.topnav--over:not(.is-solid) .brand-mark--dark{ opacity:0; }
.topnav--over:not(.is-solid) .brand-mark--light{ opacity:1; }
.brand-word{
  font-family:var(--font-display); font-size:1.5rem; letter-spacing:-.01em;
  color:var(--ink);
}

/* --- desktop list ------------------------------------------------------ */
.nav-list{ display:none; align-items:center; gap:.25rem; }
.nav-item{ position:relative; display:flex; align-items:center; }
.nav-link,
.nav-caret{
  font-family:var(--font-ui); font-size:var(--fs-xs); font-weight:500;
  text-transform:uppercase; letter-spacing:var(--track-ui);
  color:var(--ink); padding:.75rem .875rem; min-height:44px;
  display:inline-flex; align-items:center;
  transition:opacity var(--dur) var(--ease);
}
.nav-link:hover,.nav-caret:hover{ opacity:.6; }
.nav-item[data-nav].is-active > .nav-link{ text-decoration:underline; text-underline-offset:6px; }

.nav-caret{ padding-inline:.25rem .5rem; }
.caret-icon{ width:9px; height:9px; transition:transform var(--dur) var(--ease); }
.nav-item.is-open .caret-icon{ transform:rotate(180deg); }

/* Book Now — visually differentiated and separate, per the brief. */
.nav-cta{
  margin-left:.75rem;
  padding:.8125rem 1.625rem; min-height:44px;
  display:inline-flex; align-items:center;
  background:var(--mint); color:var(--ink); border-radius:var(--r-pill);
  font-family:var(--font-ui); font-size:var(--fs-xs); font-weight:600;
  text-transform:uppercase; letter-spacing:var(--track-ui);
  transition:background var(--dur) var(--ease);
}
.nav-cta:hover{ background:var(--mint-deep); }
.topnav--over .nav-cta{ color:var(--ink); }

/* --- dropdown panels ---------------------------------------------------
   Visibility is owned by [hidden] + .is-open, set together by setOpen() in
   layout.js. CSS animates but NEVER controls visibility alone — a :hover-only
   rule would leave keyboard users with nothing.
   ----------------------------------------------------------------------- */
.nav-dd{
  position:absolute; top:100%; left:0;
  padding-top:.5rem;            /* no dead gap between trigger and panel */
  min-width:15rem;
  opacity:0; transform:translateY(-6px); pointer-events:none;
  transition:opacity var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.nav-dd[hidden]{ display:none; }
.nav-item.is-open .nav-dd{ opacity:1; transform:none; pointer-events:auto; }
.nav-dd-list{
  background:var(--white); border:1px solid var(--line); border-radius:var(--r);
  box-shadow:var(--shadow-2); padding:.5rem; overflow:hidden;
}
.nav-dd-list a{
  display:block; padding:.75rem 1rem; min-height:44px;
  font-family:var(--font-ui); font-size:var(--fs-xs); font-weight:500;
  text-transform:uppercase; letter-spacing:var(--track-ui);
  color:var(--ink); border-radius:var(--r);
  transition:background var(--dur) var(--ease);
}
.nav-dd-list a:hover{ background:var(--paper-2); }

/* --- treatments mega-menu (columns built from RMA_CATEGORIES) ---------- */
/* The mega-menu must NOT be anchored to its nav item — at 5 columns it is far
   wider than the item and overflows off the left edge of the viewport. Anchor
   it to the VIEWPORT and centre it instead.
   The X-centring lives in `transform`, so the open/close animation has to
   compose with it rather than overwrite it (see the two rules below). */
.nav-dd--mega{
  position:fixed;
  top:var(--nav-h); left:50%; right:auto;
  width:min(72rem, calc(100vw - 3rem));
  min-width:0;
  transform:translateX(-50%) translateY(-6px);
}
.nav-item.is-open .nav-dd--mega{ transform:translateX(-50%); }
.mega-inner{
  background:var(--white); border:1px solid var(--line); border-radius:var(--r);
  box-shadow:var(--shadow-2); padding:2rem;
}
.mega-cols{
  display:grid; gap:1.75rem;
  grid-template-columns:repeat(auto-fit,minmax(11rem,1fr));
}
.mega-col-head{
  display:block; font-family:var(--font-ui); font-size:var(--fs-xs); font-weight:600;
  text-transform:uppercase; letter-spacing:var(--track-ui);
  color:var(--ink); padding-bottom:.75rem; margin-bottom:.5rem;
  border-bottom:1px solid var(--line);
}
.mega-col-head:hover{ color:var(--teal-ink); }
.mega-col li a{
  display:block; padding:.4375rem 0; font-size:var(--fs-sm); color:var(--muted);
  transition:color var(--dur) var(--ease);
}
.mega-col li a:hover{ color:var(--ink); }
.mega-foot{
  display:inline-flex; align-items:center; gap:.6em; margin-top:1.75rem;
  font-family:var(--font-ui); font-size:var(--fs-xs); font-weight:500;
  text-transform:uppercase; letter-spacing:var(--track-ui);
  padding-bottom:.5rem; border-bottom:1px solid var(--line-strong);
}

/* --- hamburger --------------------------------------------------------- */
.hamburger{
  display:inline-flex; flex-direction:column; justify-content:center; gap:5px;
  width:44px; height:44px; padding:0 10px;
}
.hamburger span{ display:block; height:1.5px; background:var(--ink); transition:background var(--dur) var(--ease); }

/* --- no-JS fallback ----------------------------------------------------
   The nav is JS-injected. If layout.js fails, this bar is the only way to
   reach the clinic — it is not optional.
   ----------------------------------------------------------------------- */
.nojs-bar{
  position:relative; z-index:1001;
  background:var(--ink); color:var(--ink-on-dark);
  display:flex; flex-wrap:wrap; gap:1rem; align-items:center; justify-content:center;
  padding:.875rem var(--pad);
  font-family:var(--font-ui); font-size:var(--fs-xs);
  text-transform:uppercase; letter-spacing:var(--track-ui);
}
.nojs-bar a{ text-decoration:underline; text-underline-offset:3px; }

/* ============================================================================
   MOBILE DRAWER — accordion.
   Deliberately asymmetric from desktop: the parent row is a PURE disclosure
   and every destination is a child row. No split 44px targets on a phone.
   ============================================================================ */
.drawer{
  position:fixed; inset:0 0 0 auto; z-index:1200;
  width:min(88vw, 24rem);
  background:var(--paper);
  display:flex; flex-direction:column;
  /* MUST be FULLY off-screen when closed — the samurai bug in
     website-references/restaurant/NOTES.md. Asserted in verification. */
  transform:translateX(100%);
  transition:transform 320ms var(--ease);
  overflow-y:auto; overscroll-behavior:contain;
}
.drawer.is-open{ transform:translateX(0); }
.drawer-backdrop{
  position:fixed; inset:0; z-index:1100;
  background:rgba(25,27,25,.5);
  opacity:0; pointer-events:none;
  transition:opacity var(--dur) var(--ease);
}
.drawer-backdrop.is-open{ opacity:1; pointer-events:auto; }
body.drawer-locked{ overflow:hidden; }

.drawer-head{
  display:flex; align-items:center; justify-content:space-between;
  padding:1rem var(--pad); border-bottom:1px solid var(--line);
  min-height:var(--nav-h-mobile);
}
.drawer-close{ width:44px; height:44px; display:inline-flex; align-items:center; justify-content:center; font-size:1.5rem; line-height:1; }
.drawer-body{ flex:1; padding:.5rem var(--pad) 1.5rem; }

.drawer-item{ border-bottom:1px solid var(--line); }
.drawer-item > a,
.drawer-acc{
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
  width:100%; padding:1.0625rem 0; min-height:48px;
  font-family:var(--font-ui); font-size:var(--fs-sm); font-weight:500;
  text-transform:uppercase; letter-spacing:var(--track-ui);
  color:var(--ink); text-align:left;
}
.drawer-acc .caret-icon{ width:11px; height:11px; flex:0 0 auto; }
.drawer-acc[aria-expanded="true"] .caret-icon{ transform:rotate(180deg); }
.drawer-sub[hidden]{ display:none; }
.drawer-sub{ padding:0 0 .75rem .875rem; }
.drawer-sub a{
  display:block; padding:.75rem 0; min-height:44px;
  font-family:var(--font-ui); font-size:var(--fs-xs);
  text-transform:uppercase; letter-spacing:var(--track-ui);
  color:var(--muted);
}
.drawer-sub a:hover{ color:var(--ink); }
.drawer-foot{ padding:1.25rem var(--pad) 2rem; border-top:1px solid var(--line); }

@media (min-width:1024px){
  /* Taller nav so the official lockup's second line is legible. --nav-h is a
     token every offset reads (scroll-padding-top, the mega panel's top, the
     hero/page/results tops), so raising it here moves all of them together —
     do not hardcode 92px anywhere. */
  :root{ --nav-h:92px; }
  .brand-mark{ height:52px; }
  .nav-list{ display:flex; }
  .hamburger{ display:none; }
  .drawer,.drawer-backdrop{ display:none; }
}

/* ============================================================================
   FOOTER
   ============================================================================ */
.site-footer{ background:var(--deep); color:var(--ink-on-dark); padding-block:clamp(3rem,6vw,4.5rem) 2rem; }
.footer-grid{
  display:grid; gap:2.5rem;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,14rem),1fr));
  padding-bottom:2.5rem; border-bottom:1px solid rgba(244,244,241,.16);
}
.footer-h{
  font-family:var(--font-ui); font-size:var(--fs-xs); font-weight:600;
  text-transform:uppercase; letter-spacing:var(--track-ui);
  color:rgba(244,244,241,.6); margin-bottom:1rem;
}
.footer-list li{ margin-bottom:.125rem; }
/* Hit area, not type size: these were 17px tall and they carry the phone,
   WhatsApp and email actions. Padding takes them past the 24px WCAG 2.5.8
   floor without changing how the footer looks; the li margin gives the
   height back. */
.footer-list a,.footer-list span{
  font-size:var(--fs-sm); color:rgba(244,244,241,.86);
  display:inline-block; padding-block:.5rem;
}
.footer-list a:hover{ color:var(--mint); }
.footer-bottom{
  padding-top:2rem; display:flex; flex-wrap:wrap; gap:1rem;
  align-items:center; justify-content:space-between;
  font-size:var(--fs-xs); color:rgba(244,244,241,.5);
}
.footer-bottom a:hover{ color:var(--mint); }
.footer-legal{ display:flex; flex-wrap:wrap; gap:1.25rem; align-items:center; }
/* 20px tall before this — see the .footer-list note. */
.footer-legal a{ display:inline-block; padding-block:.375rem; }

/* ============================================================================
   BEFORE & AFTER STACK  (.ba)
   The clinic's OWN convention: images stacked VERTICALLY, white BEFORE pill
   and mint AFTER pill anchored top-left at the seam.

   GENERALISED FOR N STATES. There is no before/after pair in this codebase —
   `states` is an ordered array, N>=2, index 0 is the baseline by definition.
   Pill placement: state 0's pill is BOTTOM-anchored, every later state's pill
   is TOP-anchored, so each seam carries a stacked pair exactly as the client's
   template does. Colour derives from INDEX, never from label text.
   ============================================================================ */
.ba{ position:relative; margin:0; }
.ba-stack{ display:block; background:var(--paper-2); overflow:hidden; border-radius:var(--r); }
.ba-state{ position:relative; display:block; }
.ba-state img{
  width:100%;
  /* Per-item aspect. The client's supplied series are NOT one shape: the lip
     crops are ~4/3, the scalp pair 3/2, the jawline strip 16/7. Forcing one
     ratio would crop a face out of frame. */
  aspect-ratio:var(--ba-aspect, 4/3);
  object-fit:cover;
  object-position:var(--ba-focus, 50% 50%);
  display:block;
}
/* Grid cards: one square per result (client, 5 Nov). Stacked states crop
   toward the seam so baked-in BEFORE/AFTER pills stay in frame; portrait
   series go side by side (.ba-stack--row, set in ba.js). The lightbox keeps
   the uncropped stack above. Wide multi-stage cards are left alone. */
.ba:not(.ba--wide) .ba-open .ba-stack{ aspect-ratio:1/1; display:flex; flex-direction:column; }
.ba:not(.ba--wide) .ba-open .ba-stack--row{ flex-direction:row; }
.ba:not(.ba--wide) .ba-open .ba-state{ flex:1 1 0; min-width:0; min-height:0; }
.ba:not(.ba--wide) .ba-open .ba-state picture{ display:block; height:100%; }
.ba:not(.ba--wide) .ba-open .ba-state img{ height:100%; aspect-ratio:auto; }
.ba:not(.ba--wide) .ba-open .ba-stack:not(.ba-stack--row) .ba-state:first-child img{ object-position:var(--ba-focus, 50% 100%); }
.ba:not(.ba--wide) .ba-open .ba-stack:not(.ba-stack--row) .ba-state:last-child img{ object-position:var(--ba-focus, 50% 0%); }

.ba-pill{
  position:absolute; left:var(--ba-pill-x,14px);
  display:inline-flex; align-items:center;
  padding:.4375rem .875rem;
  /* 12px floor: these label a patient's before/after states and were 11px. */
  font-family:var(--font-ui); font-size:.75rem; font-weight:600;
  text-transform:uppercase; letter-spacing:.1em;
  color:var(--ink);                  /* ALWAYS ink, on both pill colours */
  border-radius:var(--r);
  white-space:nowrap; z-index:2;
}
.ba-pill--base{ background:var(--white); bottom:var(--ba-pill-y,14px); }
.ba-pill--step{ background:var(--mint); top:var(--ba-pill-y,14px); }

.ba-badge{
  position:absolute; top:12px; right:12px; z-index:3;
  background:rgba(25,27,25,.82); color:var(--ink-on-dark);
  padding:.375rem .75rem; border-radius:var(--r-pill);
  font-family:var(--font-ui); font-size:.75rem; font-weight:600;
  text-transform:uppercase; letter-spacing:.08em;
}
.ba-cap{ display:block; font-size:var(--fs-sm); color:var(--muted); margin-top:.5rem; }
/* These two live in base, not home.css: the before/after caption link also
   renders on /results.html and .visit-links also renders on /contact.html,
   neither of which loads home.css. Both were under the 24px WCAG floor. */
.ba-tx{ display:inline-block; padding-block:.375rem; }
.visit-links li{ padding:0; }
.visit-links a{ display:inline-block; padding-block:.4375rem; }
.ba figcaption{ padding-top:1rem; }

.ba-disclaimer{
  font-size:var(--fs-xs); color:var(--muted); line-height:1.55;
  max-width:70ch; margin-top:1.5rem;
}

/* ============================================================================
   LIGHTBOX — shared (results gallery)
   ============================================================================ */
.lightbox{
  position:fixed; inset:0; z-index:1500;
  background:rgba(15,17,15,.94);
  display:none; align-items:center; justify-content:center;
  padding:clamp(1rem,4vw,3rem);
}
.lightbox.is-open{ display:flex; }
body.lightbox-locked{ overflow:hidden; }
.lightbox-panel{
  position:relative; width:min(100%,46rem); max-height:100%;
  overflow-y:auto; overscroll-behavior:contain;
  background:var(--paper); border-radius:var(--r); padding:clamp(1rem,3vw,2rem);
}
.lightbox-close,
.lightbox-prev,
.lightbox-next{
  /* Must sit ABOVE .cmp-range (z-index 4), which is full-bleed over the
     comparison and would otherwise swallow every click on these controls. */
  position:absolute; z-index:10;
  width:48px; height:48px; border-radius:var(--r-pill);
  display:inline-flex; align-items:center; justify-content:center;
  background:rgba(25,27,25,.86); color:var(--ink-on-dark); font-size:1.375rem; line-height:1;
}
.lightbox-close{ top:14px; right:14px; }
.lightbox-prev{ left:14px; top:50%; transform:translateY(-50%); }
.lightbox-next{ right:14px; top:50%; transform:translateY(-50%); }
.lightbox-prev:hover,.lightbox-next:hover,.lightbox-close:hover{ background:var(--ink); }
.lightbox-counter{
  position:absolute; bottom:14px; left:50%; transform:translateX(-50%);
  font-family:var(--font-ui); font-size:var(--fs-xs); letter-spacing:var(--track-ui);
  color:rgba(244,244,241,.8);
}
@media (max-width:640px){
  .lightbox-prev{ left:6px; } .lightbox-next{ right:6px; }
}

/* ============================================================================
   COMPARE SLIDER — lightbox only, 2-state results only.
   Satisfies contract clause 1 ("a before and after slider on each result").
   A styled range input drives clip-path: this buys pointer drag, touch,
   keyboard and screen-reader semantics for free, with no pointer maths and no
   conflict with the lightbox's own horizontal swipe handler (the input
   swallows the gesture).
   ============================================================================ */
.cmp{ position:relative; overflow:hidden; border-radius:var(--r); background:var(--paper-2); }
.cmp-layer{ display:block; }
.cmp-layer img{ width:100%; aspect-ratio:var(--ba-aspect, 4/3); object-fit:cover; object-position:var(--ba-focus, 50% 50%); display:block; }
.cmp-layer--top{
  position:absolute; inset:0;
  clip-path:inset(0 calc(100% - var(--cmp-pos,50%)) 0 0);
}
.cmp-divider{
  position:absolute; top:0; bottom:0; left:var(--cmp-pos,50%);
  width:2px; background:var(--white); pointer-events:none; z-index:3;
  box-shadow:0 0 0 1px rgba(25,27,25,.18);
}
.cmp-divider::after{
  content:""; position:absolute; top:50%; left:50%;
  width:44px; height:44px; transform:translate(-50%,-50%);
  border-radius:var(--r-pill); background:var(--white); box-shadow:var(--shadow-1);
}
.cmp-range{
  position:absolute; inset:0; z-index:4;
  width:100%; height:100%; margin:0;
  appearance:none; -webkit-appearance:none;
  background:transparent; cursor:ew-resize;
}
.cmp-range::-webkit-slider-thumb{
  -webkit-appearance:none; width:48px; height:100%; background:transparent; cursor:ew-resize;
}
.cmp-range::-moz-range-thumb{ width:48px; height:100%; background:transparent; border:0; cursor:ew-resize; }
.cmp-range:focus-visible{ outline:3px solid var(--mint); outline-offset:2px; }
.cmp .ba-pill{ z-index:5; }
.cmp .ba-pill--base{ bottom:auto; top:var(--ba-pill-y,14px); }
.cmp .ba-pill--step{ left:auto; right:var(--ba-pill-x,14px); }

/* Lightbox view toggle — Stack (default, brand-true) / Slide (contracted). */
.lb-modes{ display:inline-flex; gap:0; margin-bottom:1rem; border:1px solid var(--line-strong); border-radius:var(--r-pill); overflow:hidden; }
.lb-mode{
  padding:.5rem 1.125rem; min-height:40px;
  font-family:var(--font-ui); font-size:var(--fs-xs); font-weight:500;
  text-transform:uppercase; letter-spacing:var(--track-ui); color:var(--muted);
  transition:background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.lb-mode[aria-pressed="true"]{ background:var(--ink); color:var(--ink-on-dark); }
.lightbox-disc{ font-size:var(--fs-xs); color:var(--muted); line-height:1.55; margin-top:1rem; }

/* ============================================================================
   SWOOSH — the site's signature.
   The logo's script flourish, echoed as a thin mint stroke that draws itself
   under key headlines on scroll. Injected by main.js after .section-head h2
   and .page-head h1; never hand-placed twice on one screen.
   ============================================================================ */
.swoosh{
  display:block;
  width:clamp(72px, 9vw, 118px);
  height:22px;
  margin-top:.875rem;
  overflow:visible;
}
.swoosh path{
  fill:none;
  stroke:var(--mint);
  stroke-width:2.25;
  stroke-linecap:round;
  stroke-dasharray:160;
  stroke-dashoffset:160;
}
.swoosh.is-drawn path{
  animation:swooshDraw 900ms cubic-bezier(.4,0,.2,1) forwards;
}
@keyframes swooshDraw{ to{ stroke-dashoffset:0; } }
@media (prefers-reduced-motion: reduce){
  .swoosh path{ stroke-dashoffset:0 !important; animation:none !important; }
}

/* Buttons press feedback — scale, not layout shift. */
.btn:active, .nav-cta:active, .chip:active{ transform:scale(.97); }

/* Card press/hover refinement: soft lift, imagery radius. */
.card{ border-radius:var(--r); }
.card-media{ border-radius:0; }
a.card{ will-change:transform; }