/* ============================================================================
   SAPPHIRE DENTAL STUDIO — Winter Garden, FL
   Clinical light, rounded surfaces, deep-teal ink, warm yellow accents.
   Palette taken from the practice's LIVE SITE theme: #40b0df cyan, #ffd53d yellow.
   The signature motif is the SOFTENED GEM — the logo's tessellation kept in the
   lattice and the diamond bullets, with rounded corners on every surface.
   Nothing here is shared with Northstone, Hearth & Hollis, Obsidian or Vantage.
   SOURCE OF TRUTH — inlined into every page by scripts/build.py
   ========================================================================= */

/* ---------- 1. Tokens ---------- */
:root {
  /* Palette taken from the practice's LIVE SITE theme tokens
     (--wp--preset--color--*), not from the logo:
        primary #40b0df / primary-dark #2d7b9c / primary-extra-dark #205870
        primary-light #d9eff9 / primary-extra-light #ecf7fc
        secondary #ffd53d / secondary-dark #ccaa31 / secondary-extra-dark #b3952b
     The theme ships NO near-black and NO yellow that clears 4.5:1 on a light
     ground (its darkest, #b3952b, is 2.90:1), so --abyss, --ink, --slate,
     --slate-dim and --gold-dp are derived by darkening the theme hues until
     they hit their contrast target. Every value below is measured on the
     ground it is actually used against. */

  /* surfaces — light, cool, clinical */
  --porcelain: #f4fafd;   /* page base — a tint of primary-extra-light */
  --paper:     #ffffff;   /* raised panel — theme "base" */
  --mist:      #ecf7fc;   /* theme primary-extra-light */
  --frost:     #d9eff9;   /* theme primary-light */

  /* the band — deep teal, derived; the theme has no dark step this low */
  --sapphire:  #205870;   /* theme primary-extra-dark — brand ink, 7.41:1 */
  --sapphire-2:#2d7b9c;   /* theme primary-dark — raised panel on the band */
  --sapphire-3:#2d7b9c;   /* hover — lighter than rest, white still 4.75:1 */
  --cyan:      #40b0df;   /* theme primary — 2.35:1 on porcelain, so FILLS,
                             rules and icons only, never small text on light */
  --abyss:     #0e2731;   /* derived — the full-bleed bands and footer */

  /* text ramp — derived from the primary hue, desaturated so it reads neutral */
  --ink:       #112f3c;   /* body on light — 13.33:1 on porcelain */
  --slate:     #385765;   /* secondary — 7.33:1 */
  --slate-dim: #527483;   /* tertiary — 4.76:1, still AA */
  --on-gem:    #eaf6fb;   /* body on the band — 14.10:1 on abyss */
  --on-gem-dim:#99cde2;   /* secondary on the band — 9.00:1 */

  /* accent ramp — the theme's yellow, with its legal uses spelled out */
  --gold:      #ffd53d;   /* theme secondary. 1.34:1 on porcelain -> LARGE
                             display, rules, icons only.
                             10.96:1 on abyss -> legal as text on the band */
  --gold-dp:   #836d1f;   /* derived — small yellow text on light, 4.78:1 */
  --gold-lt:   #f8e290;   /* yellow body text on the band — 12.02:1 */

  /* lines, glass, light */
  --line:      rgba(17,47,60,.14);
  --line-soft: rgba(17,47,60,.07);
  --line-gold: rgba(255,213,61,.42);
  --line-gem:  rgba(234,246,251,.16);
  --sheen:     linear-gradient(100deg,transparent 20%,rgba(255,213,61,.42) 48%,transparent 76%);
  --lift-1:    0 1px 2px rgba(32,88,112,.05), 0 4px 14px -6px rgba(32,88,112,.10);
  --lift-2:    0 2px 6px rgba(32,88,112,.07), 0 18px 44px -18px rgba(32,88,112,.20);
  --lift-3:    0 8px 20px rgba(32,88,112,.10), 0 40px 80px -32px rgba(32,88,112,.30);

  --ff:        "Manrope", "Manrope Fallback", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --ff-d:      "Cormorant Garamond", "Cormorant Fallback", "Iowan Old Style", Georgia, serif;

  --shell:     1440px;
  --gut:       clamp(1.25rem, 4.2vw, 5rem);
  --sect:      clamp(4rem, 7vw, 8rem);
  /* Radius scale. The house shape is a SOFTENED gem: round, but tighter and cooler
     than Hearth & Hollis's 24-48px organic curves, so the two never read alike. */
  --r:         8px;                        /* micro — chips, tags, badges, burger */
  --r-m:       14px;                       /* mid — inputs, small controls */
  --r-l:       20px;                       /* large — cards, panels, plans */
  --r-xl:      clamp(22px, 2.6vw, 34px);   /* the big surfaces — figures, stages */
  --r-pill:    999px;                      /* buttons and pills */
  --facet:     var(--r-xl);                /* legacy alias — kept so calc() sites hold */

  --e:         cubic-bezier(.22,.61,.28,1);
  --e-out:     cubic-bezier(.16,1,.3,1);
  --e-io:      cubic-bezier(.76,0,.24,1);
}

/* ---------- 1b. Metric-matched fallback faces ---------- */
/* With display=swap the real faces arrive after first paint, and because the
   hero h1 is set in the display face at clamp() sizes, its line COUNT changed
   when the swap happened — which pushed the hero paragraph and CTA down. That
   single reflow measured 0.131 of a 0.149 CLS on the homepage at 390px.
   size-adjust makes the fallback occupy the same advance width, so the headline
   wraps identically before and after the swap and nothing moves. Ratios were
   measured against the real faces at 100px:
     Cormorant Garamond / Times New Roman = 96.6%
     Manrope            / Arial           = 102.0%
   Calibrated by averaging the real/fallback advance-width ratio over 7 strings
   at 5 sizes, not from a single sample — a single-string ratio was 2.4% out and
   still flipped a line break in the meet-the-team h1.
   Only size-adjust is overridden: this site sets explicit line-heights almost
   everywhere, so ascent/descent overrides would buy nothing and risk changing
   line boxes where line-height is `normal`. */
@font-face {
  font-family: "Cormorant Fallback";
  src: local("Times New Roman"), local("Times"), local("Liberation Serif"), local("Nimbus Roman");
  size-adjust: 96.6%;
  font-display: swap;
}
@font-face {
  font-family: "Manrope Fallback";
  src: local("Arial"), local("Helvetica"), local("Liberation Sans"), local("Nimbus Sans");
  size-adjust: 102.0%;
  font-display: swap;
}

/* ---------- 2. Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0; background: var(--porcelain); color: var(--ink);
  font: 400 clamp(1rem, .96rem + .18vw, 1.125rem)/1.68 var(--ff);
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
  overflow-x: clip;   /* clip, not hidden — hidden on an ancestor kills position:sticky */
}
img, video, canvas, svg { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; }
h1, h2, h3, h4, p, figure, dl, dd, ul, ol { margin: 0; }
ul, ol { padding: 0; list-style: none; }

/* ---------- 3. Type ---------- */
/* Display sizes use em/ch-free measures. `ch` is a BODY-font unit: an 18ch cap on a
   Cormorant heading measures 18 Manrope characters, which is far narrower than the
   glyphs it is holding. See CLAUDE.md. */
.d1, .d2, .d3, .d4 {
  font-family: var(--ff-d); font-weight: 400; line-height: 1.02;
  letter-spacing: -.018em; text-wrap: balance; color: var(--sapphire);
}
.d1 { font-size: clamp(2.9rem, 1.1rem + 7.4vw, 8.2rem); line-height: .98; }
.d2 { font-size: clamp(2.3rem, 1.1rem + 4.6vw, 5.4rem); }
.d3 { font-size: clamp(1.75rem, 1.1rem + 2.5vw, 3.3rem); line-height: 1.08; }
.d4 { font-size: clamp(1.35rem, 1.05rem + 1.2vw, 2rem); line-height: 1.16; letter-spacing: -.01em; }
.d1 em, .d2 em, .d3 em { font-style: italic; color: var(--gold-dp); }
.gem .d1, .gem .d2, .gem .d3, .gem .d4 { color: var(--paper); }
.gem .d1 em, .gem .d2 em, .gem .d3 em { color: var(--gold); }

.eyebrow {
  font: 600 .72rem/1.3 var(--ff); letter-spacing: .22em; text-transform: uppercase;
  color: var(--gold-dp); display: flex; align-items: center; gap: .7rem; margin-bottom: 1.1rem;
}
.eyebrow::before {
  content: ""; width: clamp(18px, 3vw, 40px); height: 1px; background: var(--gold);
  flex: none; transform-origin: left; 
}
.eyebrow--plain::before { display: none; }
.gem .eyebrow { color: var(--gold); }

.lede { font-size: clamp(1.08rem, 1rem + .5vw, 1.4rem); line-height: 1.62; color: var(--slate); }
.gem .lede { color: var(--on-gem-dim); }
.muted { color: var(--slate); }
.gem .muted { color: var(--on-gem-dim); }
.dim   { color: var(--slate-dim); font-size: .84rem; }
.gold  { color: var(--gold-dp); }
.gem .gold { color: var(--gold); }
.tnum  { font-variant-numeric: tabular-nums; }
p + p { margin-top: 1.05em; }

/* ---------- 4. Layout ---------- */
.shell { max-width: var(--shell); margin-inline: auto; padding-inline: var(--gut); }
.shell--narrow { max-width: 1020px; }
.shell--tight  { max-width: 780px; }
main > section { padding-block: var(--sect); position: relative; }
.section--tight { padding-block: calc(var(--sect) * .6); }
.section--flush { padding-block: 0; }
.section--mist  { background: var(--mist); }
.section--paper { background: var(--paper); }

/* the gem band — full-bleed deep sapphire with a faint facet lattice */
.gem { background: var(--abyss); color: var(--on-gem); }
.gem::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .5;
  background:
    radial-gradient(120% 90% at 12% -10%, rgba(64,176,223,.55), transparent 60%),
    radial-gradient(90% 80% at 92% 108%, rgba(32,88,112,.85), transparent 62%);
}
.gem > * { position: relative; z-index: 1; }

.grid { display: grid; gap: clamp(1rem, 1.8vw, 1.9rem); }
.g-2 { grid-template-columns: repeat(2, minmax(0,1fr)); }
.g-3 { grid-template-columns: repeat(3, minmax(0,1fr)); }
.g-4 { grid-template-columns: repeat(4, minmax(0,1fr)); }
.g-2f{ grid-template-columns: 1.35fr 1fr; }
.split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1.6rem, 4.4vw, 5.5rem); align-items: center; }
.split--wide { grid-template-columns: 7fr 5fr; }
.split--flip > *:first-child { order: 2; }

/* Section head: 6fr/5fr, bottom-aligned. A tall display headline in a narrow column
   used to leave the right 60% of the head empty — see CLAUDE.md. */
.shead { display: grid; grid-template-columns: 6fr 5fr; gap: clamp(1.5rem,3vw,4rem);
         align-items: end; margin-bottom: clamp(2rem,3.6vw,3.6rem); }
.shead > *:last-child { padding-bottom: .4rem; }
.mt-s{margin-top:.6rem}.mt-m{margin-top:1.2rem}.mt-l{margin-top:2rem}.mt-xl{margin-top:3.2rem}
.rule { height: 1px; background: var(--line); border: 0; }
.rule--gold { background: linear-gradient(90deg, var(--gold), transparent); }
.gem .rule { background: var(--line-gem); }

/* ---------- 5. Rounded surfaces ---------- */
/* Was a cut-gem chamfer (clip-path). Now a radius: same job, soft corner.
   overflow:clip, never hidden — hidden on an ancestor kills position:sticky. */
.fct      { border-radius: var(--r-xl); overflow: clip; }
.fct--all { border-radius: var(--r-xl); overflow: clip; }
.fct--tr  { border-radius: var(--r-xl); overflow: clip; }

/* The lattice — the logo's tessellation, drawn as hairlines. Decorative only. */
.lattice { position: relative; }
.lattice::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .55;
  background-image:
    linear-gradient(60deg,  var(--line-soft) 0 1px, transparent 1px 100%),
    linear-gradient(-60deg, var(--line-soft) 0 1px, transparent 1px 100%);
  background-size: 92px 160px;
  mask-image: linear-gradient(180deg, transparent, #000 22%, #000 78%, transparent);
}
.gem .lattice::before,
.lattice--gem::before {
  background-image:
    linear-gradient(60deg,  var(--line-gem) 0 1px, transparent 1px 100%),
    linear-gradient(-60deg, var(--line-gem) 0 1px, transparent 1px 100%);
}
@media (max-width: 860px) { .lattice::before { display: none; } }

/* ---------- 6. Panels & cards ---------- */
.panel {
  background: var(--paper); border: 1px solid var(--line-soft);
  box-shadow: var(--lift-1); padding: clamp(1.4rem, 2.4vw, 2.4rem);
  position: relative; border-radius: var(--r-l);
}
.panel--inset { background: var(--mist); box-shadow: none; }
.panel--flat  { box-shadow: none; }
.gem .panel {
  background: rgba(234,246,251,.045); border-color: var(--line-gem);
  box-shadow: none; backdrop-filter: blur(6px);
}
.fig { overflow: hidden; position: relative; background: var(--frost); border-radius: var(--r-xl); }
.fig img { width: 100%; height: 100%; object-fit: cover; }
.fig--tall { aspect-ratio: 3/4; }
.fig--wide { aspect-ratio: 16/9; }
.fig--sq   { aspect-ratio: 1/1; }
.fig--port { aspect-ratio: 4/5; }
.figcap { font: 500 .74rem/1.4 var(--ff); letter-spacing: .14em; text-transform: uppercase;
          color: var(--slate); margin-top: .8rem; }

/* ---------- 7. Buttons ---------- */
.btn {
  --bg: var(--sapphire); --fg: var(--paper);
  display: inline-flex; align-items: center; justify-content: center; gap: .65rem;
  min-height: 54px; padding: 0 clamp(1.4rem, 2.4vw, 2.2rem);
  background: var(--bg); color: var(--fg);
  font: 600 .92rem/1 var(--ff); letter-spacing: .04em;
  border: 1px solid var(--bg); cursor: pointer; position: relative; overflow: hidden;
  border-radius: var(--r-pill);
  transition: transform .5s var(--e-out), background .4s var(--e), color .4s var(--e), border-color .4s var(--e);
  will-change: transform;
}
.btn > * { position: relative; z-index: 1; }
/* the refraction sweep — a gold sheen that crosses the face on hover */
.btn::after {
  content: ""; position: absolute; inset: 0; background: var(--sheen);
  transform: translateX(-115%); transition: transform .85s var(--e-out); z-index: 0;
}
.btn:hover::after, .btn:focus-visible::after { transform: translateX(115%); }
.btn:hover { background: var(--sapphire-3); border-color: var(--sapphire-3); }
.btn--gold  { --bg: var(--gold); --fg: var(--sapphire); }
.btn--gold:hover { background: #ffe173; border-color: #ffe173; }
.btn--ghost { --bg: transparent; --fg: var(--sapphire); border-color: var(--line); }
.btn--ghost:hover { background: var(--sapphire); color: var(--paper); border-color: var(--sapphire); }
.gem .btn--ghost { --fg: var(--paper); border-color: var(--line-gem); }
.gem .btn--ghost:hover { background: var(--paper); color: var(--sapphire); border-color: var(--paper); }
.btn--sm { min-height: 46px; font-size: .84rem; padding: 0 1.15rem; }
.btn--wide { width: 100%; }
.btn[disabled] { opacity: .55; cursor: not-allowed; }

/* a text link that draws its own gold underline */
/* padding-block on an inline-block grows the hit rectangle to the 44px floor
   without changing the line box, so a standalone "→" link is a real target while a
   link inside a sentence still sits on its baseline. */
.tlink { position: relative; font-weight: 600; color: var(--sapphire); display: inline-block;
         padding-block: .6rem; }
.tlink::after {
  content: ""; position: absolute; left: 0; bottom: .45rem; width: 100%; height: 1px;
  background: var(--gold); transform: scaleX(0); transform-origin: right;
  transition: transform .5s var(--e-out);
}
.tlink:hover::after, .tlink:focus-visible::after { transform: scaleX(1); transform-origin: left; }
.gem .tlink { color: var(--gold); }

/* ---------- 8. Accessibility ---------- */
/* A clipped box is invisible at any nesting depth; a translated one is only invisible
   if you know its containing block. Never hide chrome by moving it off-screen. */
.skip {
  position: fixed; top: .75rem; left: .75rem; z-index: 9999;
  width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%);
  background: var(--sapphire); color: var(--paper); padding: 0;
  font: 600 .85rem/1 var(--ff); letter-spacing: .1em; text-transform: uppercase;
}
.skip:focus {
  width: auto; height: auto; clip: auto; clip-path: none;
  padding: .95rem 1.3rem; outline: 2px solid var(--gold); outline-offset: 2px;
}
.vh { position: absolute !important; width: 1px; height: 1px; margin: -1px;
      padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
:focus-visible { outline: 2px solid var(--gold-dp); outline-offset: 3px; }
.gem :focus-visible, .hdr :focus-visible { outline-color: var(--gold); }

/* ---------- 9. Motion system ---------- */
/* transform / opacity / filter only. Every reveal is IntersectionObserver-driven
   and one-shot. NOTE: `.fct` clips its element, and a clipped box has a zero-area
   intersection rectangle — an observer watching it never fires. So a clipped element
   is NEVER a reveal target: site.js observes an unclipped ancestor and forwards
   data-in down to [data-rvchild]. See CLAUDE.md. */
.rv  { opacity: 0; transform: translateY(26px) scale(.988); filter: blur(5px);
       transition: opacity .8s var(--e-out), transform .9s var(--e-out), filter .8s var(--e-out);
       transition-delay: var(--d, 0ms); }
.rv[data-in="true"] { opacity: 1; transform: none; filter: none; }

/* line mask. .18em of descender headroom — at .06em the tails of g, y and p
   grazed the mask edge at display sizes. */
.rvt { display: block; overflow: hidden; padding-bottom: .18em; margin-bottom: -.18em; }
.rvt > span { display: block; transform: translateY(106%);
              transition: transform 1.05s var(--e-out); transition-delay: var(--d, 0ms); }
.rvt[data-in="true"] > span { transform: none; }

.rvl { transform: scaleX(0); transform-origin: left;
       transition: transform 1s var(--e-io); transition-delay: var(--d, 0ms); }
.rvl[data-in="true"] { transform: scaleX(1); }

/* the bloom — light expands behind a focal element. The inverse of a dark site's
   lit edge: it is what makes a white page feel lit rather than blank. */
.bloom { position: relative; isolation: isolate; }
.bloom::before {
  content: ""; position: absolute; z-index: -1; inset: -18% -12%;
  background: radial-gradient(60% 60% at 50% 45%, rgba(64,176,223,.16), transparent 70%);
  transform: scale(.55); opacity: 0;
  transition: transform 1.3s var(--e-out), opacity 1.1s var(--e);
  transition-delay: var(--d, 0ms);
}
.bloom[data-in="true"]::before { transform: scale(1); opacity: 1; }
.gem .bloom::before { background: radial-gradient(60% 60% at 50% 45%, rgba(255,213,61,.16), transparent 70%); }

/* the refraction sweep — a one-shot specular pass across media on entry */
.sheen { position: relative; overflow: hidden; }
.sheen::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 2;
  background: linear-gradient(104deg, transparent 38%, rgba(255,255,255,.55) 50%, transparent 62%);
  transform: translateX(-130%);
}
.sheen[data-in="true"]::after { animation: sweep 1.5s var(--e-out) .35s 1 both; }
@keyframes sweep { to { transform: translateX(130%); } }

/* per-character rise, used on one h1 per page only */
.chars .w { display: inline-block; overflow: hidden; padding-bottom: .18em; margin-bottom: -.18em; }
.chars .c { display: inline-block; transform: translateY(106%);
            transition: transform .72s var(--e-out); transition-delay: calc(var(--i, 0) * 11ms); }
.chars[data-in="true"] .c { transform: none; }

/* scroll-linked: written by ONE rAF-batched driver in site.js */
.pll  { transform: translate3d(0, calc(var(--sp, 0) * 34px), 0); will-change: transform; }
/* a source registers with the scroll driver to receive --sp, but is not itself moved;
   its children read the value by inheritance */
.pll-src { }
.pll--slow { transform: translate3d(0, calc(var(--sp, 0) * 16px), 0); }

/* magnetic CTA — desktop, fine pointer only */
.magnet { transform: translate3d(var(--mx, 0), var(--my, 0), 0); }

@media (prefers-reduced-motion: reduce) {
  .rv, .rvt > span, .rvl, .chars .c { opacity: 1 !important; transform: none !important; filter: none !important; }
  .bloom::before { opacity: 1 !important; transform: none !important; }
  .sheen::after { display: none; }
  .pll, .pll--slow, .magnet { transform: none !important; }
  * { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}

/* ---------- 10. Header ---------- */
.hdr {
  position: fixed; inset: 0 0 auto; z-index: 900;
  transition: background .45s var(--e), box-shadow .45s var(--e), transform .55s var(--e-out);
}
.hdr[data-solid="true"] {
  background: rgba(244,250,253,.86); backdrop-filter: blur(18px) saturate(1.4);
  box-shadow: 0 1px 0 var(--line-soft), var(--lift-1);
}
.hdr[data-hide="true"] { transform: translateY(-102%); }
/* Over a dark hero the header has no background yet, so navy chrome disappears
   into the photograph. Light it until data-solid flips. */
.hdr--over:not([data-solid="true"]) .wm__n,
.hdr--over:not([data-solid="true"]) .nav a,
.hdr--over:not([data-solid="true"]) .hdr__tel { color: #fff; }
.hdr--over:not([data-solid="true"]) .wm__s { color: var(--gold); }
.hdr--over:not([data-solid="true"]) .nav a::after { background: var(--gold); }
.hdr--over:not([data-solid="true"]) .burger { border-color: rgba(255,255,255,.4); }
.hdr--over:not([data-solid="true"]) .burger i,
.hdr--over:not([data-solid="true"]) .burger i::before,
.hdr--over:not([data-solid="true"]) .burger i::after { background: #fff; }
.hdr__in { display: flex; align-items: center; gap: clamp(1rem, 2.5vw, 2.4rem);
           min-height: 82px; padding-block: .7rem; }
/* The practice's real logo. The lockup is stacked (gem over two lines of type),
   so at a 62px header height its wordmark would be unreadable — the header takes
   the GEM MARK only and keeps the typographic wordmark beside it, and the footer,
   which has the room, takes the full lockup. The mark is navy + gold on
   transparent, so a reversed variant (navy -> --on-gem, gold untouched) is used
   on every dark ground: the drawer, the landing-page header and the hero header
   before it goes solid. */
.wm__mk { display: block; flex: none; width: auto; height: 34px; align-self: center; }
.wm__mk--lt { display: none; }
.hdr--over:not([data-solid="true"]) .wm__mk--dk { display: none; }
.hdr--over:not([data-solid="true"]) .wm__mk--lt { display: block; }
.drawer__top .wm__mk, .lphdr .wm__mk { height: 30px; }
.ftr__logo { display: block; width: clamp(150px, 15vw, 200px); height: auto; margin-bottom: .4rem; }
@media (max-width: 520px) { .wm__mk { height: 28px; } }

.wm { display: flex; align-items: center; gap: .55rem; flex: none;
      min-height: 44px; align-content: center; padding-block: .5rem; }
.wm__n { font: 400 1.42rem/1 var(--ff-d); letter-spacing: .04em; color: var(--sapphire);
         text-transform: uppercase; }
.wm__s { font: 600 .7rem/1 var(--ff); letter-spacing: .3em; text-transform: uppercase;
         color: var(--gold-dp); }
.nav { display: flex; align-items: center; gap: clamp(.4rem, 1.2vw, 1rem); margin-left: auto; }
.nav a {
  position: relative; padding: .7rem .85rem; font-weight: 500; font-size: .95rem;
  color: var(--ink); white-space: nowrap; min-height: 44px; display: inline-flex;
  align-items: center; transition: color .35s var(--e);
}
.nav a::after {
  content: ""; position: absolute; left: .85rem; right: .85rem; bottom: .42rem; height: 1px;
  background: var(--gold); transform: scaleX(0); transform-origin: right;
  transition: transform .5s var(--e-out);
}
.nav a:hover::after, .nav a:focus-visible::after, .nav a[aria-current="page"]::after {
  transform: scaleX(1); transform-origin: left;
}
.nav a[aria-current="page"] { color: var(--sapphire); }
.hdr__cta { display: flex; align-items: center; gap: .8rem; flex: none; }
.hdr__tel { font-weight: 600; font-size: .95rem; color: var(--sapphire); white-space: nowrap;
            min-height: 44px; display: inline-flex; align-items: center; }

/* read-progress arc. NOTE: sits inside .hdr so it adds no height, and it is
   listed in build.py's fixed-chrome exemption so GHL's full-bleed escape skips it. */
.rail { position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: transparent; }
.rail i { display: block; height: 100%; background: linear-gradient(90deg, var(--sapphire), var(--gold));
          transform: scaleX(var(--read, 0)); transform-origin: left; }

.burger { display: none; width: 48px; height: 48px; align-items: center; justify-content: center;
          background: none; border: 1px solid var(--line); cursor: pointer; border-radius: var(--r-m); }
.burger i { display: block; width: 20px; height: 1px; background: var(--ink); position: relative;
            transition: background .3s var(--e); }
.burger i::before, .burger i::after {
  content: ""; position: absolute; left: 0; width: 20px; height: 1px; background: var(--ink);
  transition: transform .45s var(--e-out);
}
.burger i::before { top: -6px; } .burger i::after { top: 6px; }
.burger[aria-expanded="true"] i { background: transparent; }
.burger[aria-expanded="true"] i::before { transform: translateY(6px) rotate(45deg); }
.burger[aria-expanded="true"] i::after  { transform: translateY(-6px) rotate(-45deg); }

.drawer {
  position: fixed; inset: 0; z-index: 950; background: var(--abyss); color: var(--on-gem);
  display: grid; grid-template-rows: auto 1fr auto; padding: 1.1rem var(--gut) 2rem;
  opacity: 0; visibility: hidden; transform: translateY(-2%);
  transition: opacity .45s var(--e), transform .55s var(--e-out), visibility .45s;
}
.drawer[data-open="true"] { opacity: 1; visibility: visible; transform: none; }
.drawer__top { display: flex; align-items: center; justify-content: space-between; min-height: 62px; }
.drawer__top .wm__n { color: var(--paper); }
.drawer nav { display: grid; align-content: center; gap: .3rem; }
.drawer nav a {
  font: 400 clamp(1.7rem, 7vw, 2.6rem)/1.24 var(--ff-d); color: var(--paper);
  padding: .3rem 0; opacity: 0; transform: translateY(14px);
  transition: opacity .5s var(--e-out), transform .6s var(--e-out), color .3s var(--e);
}
.drawer[data-open="true"] nav a { opacity: 1; transform: none; }
.drawer nav a:hover { color: var(--gold); }
.drawer__foot { display: grid; gap: .7rem; border-top: 1px solid var(--line-gem); padding-top: 1.3rem; }
.drawer__foot a { color: var(--on-gem-dim); font-size: .95rem; min-height: 44px; display: flex; align-items: center; }
.drawer__foot .btn { color: var(--paper); }
/* the close control sits on the dark drawer, so it cannot inherit the header's
   navy bars or its light-ground border */
.drawer .burger { border-color: var(--line-gem); }
.drawer .burger i,
.drawer .burger i::before,
.drawer .burger i::after { background: var(--paper); }
.drawer .burger[aria-expanded="true"] i { background: transparent; }

/* ---------- 11. Hero ---------- */
/* NOTE for build.py: the wrapper must be exactly <div class="hero__media"> with no
   extra classes — the role regex is a literal string, and a miss silently drops the
   hero from the 2200px rule to the 1100px card fallback. Decoration goes on an inner
   element, never on the wrapper. */
.hero { position: relative; min-height: 94svh; display: grid; align-items: end;
        padding-block: clamp(7rem, 14vw, 11rem) clamp(2.6rem, 5vw, 5rem); overflow: hidden; }
.hero__media { position: absolute; inset: 0; z-index: 0; }
.hero__media img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 42%; }
.hero__media::after {
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(180deg, rgba(14,39,49,.60) 0%, rgba(14,39,49,.30) 28%, rgba(14,39,49,.72) 72%, rgba(14,39,49,.92) 100%),
    linear-gradient(94deg, rgba(14,39,49,.80) 0%, rgba(14,39,49,.34) 52%, transparent 78%);
}
.hero__in { position: relative; z-index: 2; }
.hero__h { color: var(--paper); max-width: 15.5em; }
.hero__h em { color: var(--gold); font-style: italic; }
.hero__p { color: #dbeef8; max-width: 34em; margin-top: clamp(1.1rem, 2vw, 1.7rem); }
.hero__cta { display: flex; flex-wrap: wrap; gap: .85rem; margin-top: clamp(1.6rem, 3vw, 2.6rem); }
.hero__meta { display: flex; flex-wrap: wrap; gap: clamp(1.2rem, 3vw, 3rem);
              margin-top: clamp(2rem, 4vw, 3.4rem); padding-top: 1.5rem;
              border-top: 1px solid rgba(234,246,251,.2); }
.hero__meta div { display: grid; gap: .2rem; }
.hero__meta dt, .hero__meta b { font: 400 clamp(1.5rem,3vw,2.3rem)/1 var(--ff-d); color: var(--gold); }
.hero__meta dd, .hero__meta span { margin: 0; font-size: .82rem; letter-spacing: .1em;
              text-transform: uppercase; color: #b6dcec; font-weight: 500; }

/* page hero — the inner-page variant */
.phero { padding-block: clamp(8.5rem, 15vw, 12rem) clamp(2.5rem, 5vw, 4rem); position: relative; }
.phero__h { max-width: 14em; }
.crumb { display: flex; flex-wrap: wrap; gap: .5rem; font-size: .8rem; color: var(--slate);
         margin-bottom: 1.4rem; }
.crumb a { min-height: 44px; display: inline-flex; align-items: center; }
.crumb a:hover { color: var(--sapphire); }
.crumb span { color: var(--slate-dim); }

/* ---------- 12. Trust bar ---------- */
.trust { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: clamp(1rem,2vw,2rem); }
.trust div { display: grid; gap: .35rem; padding-left: 1.1rem; border-left: 1px solid var(--line); }
.trust b { font: 400 clamp(1.7rem,3.2vw,2.6rem)/1 var(--ff-d); color: var(--sapphire); }
.trust span { font-size: .86rem; color: var(--slate); line-height: 1.45; }

/* credential marquee */
.marq { overflow: hidden; padding-block: 1.4rem; border-block: 1px solid var(--line-soft);
        -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
        mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.marq ul { display: flex; gap: clamp(2rem,5vw,5rem); width: max-content; animation: marq 46s linear infinite; }
.marq li { font: 500 .8rem/1 var(--ff); letter-spacing: .18em; text-transform: uppercase;
           color: var(--slate); white-space: nowrap; display: flex; align-items: center; gap: 1rem; }
.marq li::after { content: "◆"; color: var(--gold); font-size: .55rem; }
@keyframes marq { to { transform: translateX(-50%); } }
.marq:hover ul { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) { .marq ul { animation: none; } }

/* ---------- 13. Cards ---------- */
.card {
  background: var(--paper); border: 1px solid var(--line-soft); box-shadow: var(--lift-1);
  border-radius: var(--r-l);
  padding: clamp(1.3rem, 2.2vw, 2rem); display: flex; flex-direction: column; gap: .7rem;
  position: relative; overflow: hidden;
  transition: box-shadow .55s var(--e), transform .55s var(--e-out), border-color .45s var(--e);
}
.card:hover { box-shadow: var(--lift-2); transform: translateY(-4px); border-color: var(--line-gold); }
.card__n { font: 500 .72rem/1 var(--ff); letter-spacing: .2em; text-transform: uppercase;
           color: var(--gold-dp); }
.card__t { font: 400 clamp(1.25rem,1.7vw,1.6rem)/1.2 var(--ff-d); color: var(--sapphire); }
.card__b { color: var(--slate); font-size: .96rem; line-height: 1.6; flex: 1; }
.card__go { font-weight: 600; font-size: .88rem; color: var(--sapphire); display: inline-flex;
            align-items: center; gap: .45rem; margin-top: .3rem; }
.card__go span { transition: transform .45s var(--e-out); }
.card:hover .card__go span { transform: translateX(5px); }
a.card:focus-visible { outline: 2px solid var(--gold-dp); outline-offset: 3px; }
.card ul { display: grid; gap: .35rem; margin-top: .3rem; }
.card ul li { font-size: .9rem; color: var(--slate); padding-left: 1.1rem; position: relative; }
.card ul li::before { content: "◆"; position: absolute; left: 0; top: .28em; font-size: .5rem; color: var(--gold); }

/* doctor card — the portrait treatment unifies three photographs shot in three
   different places: same crop, same grade at rest, full colour on hover. */
.doc { display: grid; gap: 1rem; }
.doc__p { position: relative; overflow: hidden; aspect-ratio: 4/5; background: var(--frost);
          border-radius: var(--r-xl); }
.doc__p img { width: 100%; height: 100%; object-fit: cover;
              filter: saturate(.62) contrast(1.04); transform: scale(1.02);
              transition: filter .8s var(--e), transform 1.1s var(--e-out); }
.doc:hover .doc__p img, .doc:focus-within .doc__p img { filter: none; transform: scale(1.06); }
.doc__p::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, transparent 52%, rgba(14,39,49,.62));
}
.doc__cap { position: absolute; left: 0; right: 0; bottom: 0; padding: 1.1rem; z-index: 1; }
.doc__n { font: 400 1.4rem/1.15 var(--ff-d); color: var(--paper); }
.doc__r { font: 600 .7rem/1 var(--ff); letter-spacing: .2em; text-transform: uppercase;
          color: var(--gold); margin-top: .45rem; }
.doc__b { color: var(--slate); font-size: .95rem; line-height: 1.62; }

/* ---------- 14. Stats ---------- */
.stats { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: clamp(1rem,2.4vw,2.4rem); }
.stats div { display: grid; gap: .4rem; }
.stats b { font: 400 clamp(2.4rem,5vw,4.2rem)/1 var(--ff-d); color: var(--sapphire); }
.gem .stats b { color: var(--gold); }
.stats span { font-size: .84rem; color: var(--slate); line-height: 1.5; }
.gem .stats span { color: var(--on-gem-dim); }

/* ---------- 15. Process ---------- */
.steps { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: clamp(1.2rem,2.4vw,2.4rem); }
.steps > li { position: relative; padding-top: 2.6rem; }
.steps > li::before {
  content: ""; position: absolute; top: 1.1rem; left: 0; right: 0; height: 1px; background: var(--line);
}
.steps__n { position: absolute; top: 0; left: 0; font: 400 1.05rem/1 var(--ff-d); color: var(--gold-dp);
            background: var(--porcelain); padding-right: .7rem; }
.steps h3 { font: 400 clamp(1.15rem,1.6vw,1.45rem)/1.2 var(--ff-d); color: var(--sapphire);
            margin-bottom: .5rem; }
.steps p { font-size: .95rem; color: var(--slate); line-height: 1.62; }

/* ---------- 16. Testimonials ---------- */
.quote { display: grid; gap: 1rem; }
.quote__stars { display: flex; gap: .2rem; color: var(--gold-dp); font-size: .85rem; letter-spacing: .1em; }
.gem .quote__stars { color: var(--gold); }   /* --gold-dp is for LIGHT grounds only */
.quote blockquote { font: 400 clamp(1.15rem,1.8vw,1.6rem)/1.5 var(--ff-d); color: var(--sapphire); }
.gem .quote blockquote { color: var(--paper); }
.quote figcaption { font-size: .86rem; color: var(--slate); }
.gem .quote figcaption { color: var(--on-gem-dim); }
.quote cite { font-style: normal; font-weight: 600; color: var(--ink); }
.gem .quote cite { color: var(--gold); }

/* ---------- 17. Before / after slider ---------- */
/* Pure CSS clip-path driven by a range input. The WRAPPER is never the
   IntersectionObserver target — a clipped box has a zero-area intersection
   rectangle and the observer would never fire. site.js observes an ancestor. */
.ba { --p: 50%; position: relative; overflow: hidden; aspect-ratio: 108/65;
      background: var(--frost); touch-action: pan-y; border-radius: var(--r-xl); }
.ba img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ba__after { clip-path: inset(0 0 0 var(--p)); }
.ba__range { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0;
             cursor: ew-resize; -webkit-appearance: none; appearance: none; background: none; z-index: 3; }
.ba__range::-webkit-slider-thumb { -webkit-appearance: none; width: 56px; height: 100vh; cursor: ew-resize; }
.ba__range::-moz-range-thumb { width: 56px; height: 100vh; border: 0; background: transparent; cursor: ew-resize; }
.ba__handle { position: absolute; top: 0; bottom: 0; left: var(--p); width: 0; z-index: 2; pointer-events: none; }
.ba__handle::after {
  content: ""; position: absolute; top: 0; bottom: 0; left: -1px; width: 2px;
  background: var(--paper); box-shadow: 0 0 0 1px rgba(14,39,49,.25);
}
.ba__handle::before {
  content: ""; position: absolute; top: 50%; left: 50%; width: 46px; height: 46px;
  transform: translate(-50%,-50%); background: var(--paper); border-radius: 50%;
  box-shadow: var(--lift-2); border: 1px solid var(--line);
}
.ba__range:focus-visible + .ba__handle::after { background: var(--gold); box-shadow: 0 0 0 2px var(--gold); }
.ba__tag { position: absolute; bottom: .85rem; z-index: 2; font: 600 .72rem/1 var(--ff);
           letter-spacing: .18em; text-transform: uppercase; padding: .55rem .8rem;
           background: rgba(14,39,49,.72); color: var(--paper); backdrop-filter: blur(4px);
           border-radius: var(--r-pill); }
.ba__tag--b { left: .85rem; } .ba__tag--a { right: .85rem; color: var(--gold); }
.ba__note { font-size: .78rem; color: var(--slate-dim); margin-top: .7rem; }

/* ---------- 18. THE SMILE STUDIO ---------- */
/* The canvas is aria-hidden and only ever DRAWS. Every piece of state lives in a
   real form control beside it, so the whole feature is keyboard-operable with no
   parallel implementation — the same contract Vantage's perimeter.js keeps. */
.ss { display: grid; grid-template-columns: 1.55fr 1fr; gap: clamp(1.4rem, 3vw, 3rem); align-items: start; }
.ss__stage { position: relative; aspect-ratio: 108/65; background: var(--abyss);
             border-radius: var(--r-xl); overflow: hidden;
             overflow: hidden; box-shadow: var(--lift-3); }
.ss__cv { position: absolute; inset: 0; width: 100%; height: 100%; }
.ss__stage[data-ready="false"] .ss__cv,
.ss__stage[data-ready="false"] .ss__chrome { display: none; }
.ss__stage[data-ready="true"]  .ss__fb { display: none; }
.ss__fb { position: absolute; inset: 0; }
.ss__fb img { width: 100%; height: 100%; object-fit: cover; }

.ss__chrome { position: absolute; inset: 0; pointer-events: none; z-index: 2; }
.ss__chrome > * { pointer-events: auto; }
.ss__cap { position: absolute; bottom: .9rem; left: .9rem; right: .9rem; display: flex;
           justify-content: space-between; font: 600 .72rem/1 var(--ff);
           letter-spacing: .18em; text-transform: uppercase; pointer-events: none; }
.ss__cap span { padding: .5rem .75rem; background: rgba(14,39,49,.7); color: var(--paper);
                border-radius: var(--r-pill);
                backdrop-filter: blur(4px); }
.ss__cap span:last-child { color: var(--gold); }
.ss__seam { position: absolute; top: 0; bottom: 0; left: var(--p, 50%); width: 0; z-index: 3; pointer-events: none; }
.ss__seam::after { content: ""; position: absolute; inset: 0 -1px; width: 2px; background: var(--gold); opacity: .9; }

.ss__panel { display: grid; gap: clamp(1rem, 1.8vw, 1.5rem); }
.ss__set { border: 0; padding: 0; margin: 0; display: grid; gap: .7rem; }
.ss__set legend { padding: 0; font: 600 .7rem/1 var(--ff); letter-spacing: .2em;
                  text-transform: uppercase; color: var(--gold-dp); }
.ss__hint { font-size: .8rem; color: var(--slate-dim); }

/* the shade guide — a WRAPPING grid, never a horizontal scroller. A wide row of
   swatches is exactly the content that overflow-x:hidden clips into invisibility
   while scrollWidth still reports zero. See CLAUDE.md. */
.ss__shades { display: grid; grid-template-columns: repeat(auto-fill, minmax(56px, 1fr)); gap: .45rem; }
.ss__sw { position: relative; display: grid; gap: .3rem; justify-items: center; cursor: pointer;
          padding: .45rem .2rem; min-height: 62px; }
/* radios hidden with the CLIP recipe, never left:-9999px — a clipped box is
   invisible at any nesting depth; a moved one is only invisible if you know its
   containing block. */
.ss__sw input { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
                overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); border: 0; }
.ss__chip { width: 30px; height: 30px; background: var(--c); border: 1px solid rgba(17,47,60,.55);
            border-radius: 50%; transition: transform .4s var(--e-out), box-shadow .4s var(--e); }
.ss__code { font: 500 .72rem/1 var(--ff); color: var(--slate); letter-spacing: .04em; }
.ss__sw:hover .ss__chip { transform: scale(1.1); }
.ss__sw input:checked + .ss__chip { transform: scale(1.16); box-shadow: 0 0 0 2px var(--porcelain), 0 0 0 4px var(--sapphire); }
.ss__sw input:checked ~ .ss__code { color: var(--sapphire); font-weight: 700; }
.ss__sw input:focus-visible + .ss__chip { outline: 2px solid var(--gold-dp); outline-offset: 3px; }

.ss__layers { display: flex; flex-wrap: wrap; gap: .5rem; }
.ss__layer { display: inline-flex; align-items: center; gap: .5rem; min-height: 46px;
             padding: 0 1rem; background: var(--paper); border: 1px solid var(--line);
             font: 500 .86rem/1 var(--ff); cursor: pointer; color: var(--ink);
             border-radius: var(--r-pill);
             transition: background .35s var(--e), border-color .35s var(--e), color .35s var(--e); }
.ss__layer::before { content: ""; width: 9px; height: 9px; background: transparent;
                     border: 1px solid var(--slate-dim); border-radius: 50%;
                     transition: background .35s var(--e), border-color .35s var(--e); }
.ss__layer[aria-pressed="true"] { background: var(--sapphire); border-color: var(--sapphire); color: var(--paper); }
.ss__layer[aria-pressed="true"]::before { background: var(--gold); border-color: var(--gold); }

.ss__range { width: 100%; height: 44px; -webkit-appearance: none; appearance: none;
             background: none; cursor: ew-resize; }
.ss__range::-webkit-slider-runnable-track { height: 3px; background: var(--frost); border-radius: var(--r-pill); }
.ss__range::-moz-range-track { height: 3px; background: var(--frost); border-radius: var(--r-pill); }
.ss__range::-webkit-slider-thumb { -webkit-appearance: none; width: 26px; height: 26px;
    margin-top: -11.5px; background: var(--sapphire); border: 2px solid var(--paper);
    box-shadow: var(--lift-1); border-radius: 50%; cursor: ew-resize; }
.ss__range::-moz-range-thumb { width: 26px; height: 26px; background: var(--sapphire);
    border: 2px solid var(--paper); border-radius: 50%; cursor: ew-resize; }
.ss__range:disabled { opacity: .4; cursor: not-allowed; }

/* <output> is implicitly role="status" aria-live="polite" — the correct element,
   so no hand-rolled live region is needed. */
.ss__plan { display: grid; gap: .55rem; padding: clamp(1rem,1.6vw,1.4rem);
            background: var(--abyss); color: var(--on-gem); border-radius: var(--r-l); }
.ss__plan b { font: 400 clamp(1.15rem,1.6vw,1.45rem)/1.2 var(--ff-d); color: var(--gold); }
.ss__plan p { font-size: .9rem; color: var(--on-gem-dim); line-height: 1.6; }
.ss__plan .who { font: 600 .7rem/1.4 var(--ff); letter-spacing: .14em; text-transform: uppercase;
                 color: var(--gold-lt); }
.ss__disc { font-size: .78rem; color: var(--slate-dim); line-height: 1.55; }
.gem .ss__disc { color: var(--on-gem-dim); }
.ss__cases { display: flex; flex-wrap: wrap; gap: .4rem; }
.ss__case { min-height: 44px; padding: 0 .85rem; background: none; border: 1px solid var(--line);
            font: 500 .8rem/1 var(--ff); cursor: pointer; transition: all .35s var(--e);
            border-radius: var(--r-pill); }
.ss__case[aria-pressed="true"] { background: var(--sapphire); color: var(--paper); border-color: var(--sapphire); }

/* The Smile Studio sits inside a .gem band, and the light-ground tokens collapse
   there. In the old navy palette the pressed fill (--sapphire on --abyss) measured
   1.22:1 — the pill had a label but effectively no shape. On the band the states
   invert: rest is a translucent panel with a hairline that clears the 3:1 UI
   boundary (WCAG 1.4.11), pressed is the yellow accent at 10.96:1.
   --slate and --slate-dim are LIGHT-ground tokens; on --abyss --slate measured
   2.53:1, so .check and .ss__hint are remapped to --on-gem-dim (9.00:1). */
.gem .ss__layer,
.gem .ss__case {
  background: rgba(234,246,251,.07);
  border-color: rgba(234,246,251,.38);   /* 3.14:1 against --abyss */
  color: var(--on-gem);
}
.gem .ss__layer:hover,
.gem .ss__case:hover {
  background: rgba(234,246,251,.15); border-color: var(--gold);
}
.gem .ss__layer[aria-pressed="true"],
.gem .ss__case[aria-pressed="true"] {
  background: var(--gold); border-color: var(--gold); color: var(--sapphire);
}
.gem .ss__layer[aria-pressed="true"]::before {
  background: var(--sapphire); border-color: var(--sapphire);
}
.gem .ss__hint,
.gem .check       { color: var(--on-gem-dim); }
.gem .ss__code    { color: var(--on-gem-dim); }
.gem .ss__sw input:checked ~ .ss__code { color: var(--gold); }
.gem .ss__range::-webkit-slider-runnable-track { background: rgba(234,246,251,.30); }
.gem .ss__range::-moz-range-track              { background: rgba(234,246,251,.30); }

/* --- Light island inside a dark band -------------------------------------
   A .panel that keeps a light background inside a .gem section is a LIGHT
   ground again, but every `.gem X` colour override above is written for the
   dark band and cascades straight into it. That put --on-gem-dim text at
   1.72:1 and a gold .tlink at 1.42:1 on a white form panel. Reset the ramp for
   anything inside such a panel rather than hand-patching each element inline. */
.gem .panel--light { color: var(--ink); }
.gem .panel--light .d1, .gem .panel--light .d2,
.gem .panel--light .d3, .gem .panel--light .d4 { color: var(--sapphire); }
.gem .panel--light .d1 em, .gem .panel--light .d2 em,
.gem .panel--light .d3 em { color: var(--gold-dp); }
.gem .panel--light .lede,
.gem .panel--light .muted,
.gem .panel--light .check,
.gem .panel--light .ss__hint,
.gem .panel--light .ss__code,
.gem .panel--light .form__note { color: var(--slate); }
.gem .panel--light .eyebrow { color: var(--gold-dp); }
.gem .panel--light .tlink   { color: var(--sapphire); }
.gem .panel--light .rule    { background: var(--line); }
/* the custom dark-band checkbox reverts to the native control on a light panel */
.gem .panel--light .check input {
  appearance: auto; -webkit-appearance: auto;
  background: none; border: 0; border-radius: 0; accent-color: var(--sapphire);
}
.gem .panel--light :focus-visible { outline-color: var(--gold-dp); }

/* --gold-dp is the LIGHT-ground yellow (4.78:1 on porcelain, but only 3.08:1 on
   --abyss). On the band the numerals take the band's own yellow, at 10.96:1. */
.gem .steps__n,
.gem .ss__set legend { color: var(--gold); }
.gem .plan ul li::before,
.gem .card ul li::before { color: var(--gold); }

.gem .check input {
  appearance: none; -webkit-appearance: none; margin: 0;
  background: rgba(234,246,251,.07);
  border: 1px solid rgba(234,246,251,.38);
  border-radius: var(--r); display: grid; place-content: center; cursor: pointer;
  transition: background .3s var(--e), border-color .3s var(--e);
}
.gem .check input:hover { border-color: var(--gold); }
.gem .check input:checked { background: var(--gold); border-color: var(--gold); }
.gem .check input:checked::after {
  content: ""; width: 11px; height: 6px;
  border-left: 2px solid var(--sapphire); border-bottom: 2px solid var(--sapphire);
  transform: rotate(-45deg) translateY(-2px);
}

/* ---------- 19. Accordion / FAQ ---------- */
.acc { display: grid; }
.acc details { border-bottom: 1px solid var(--line); }
.acc summary { list-style: none; cursor: pointer; padding: 1.35rem 3rem 1.35rem 0;
               position: relative; font: 400 clamp(1.05rem,1.5vw,1.3rem)/1.35 var(--ff-d);
               color: var(--sapphire); min-height: 56px; display: flex; align-items: center;
               transition: color .35s var(--e); }
.acc summary::-webkit-details-marker { display: none; }
.acc summary::after, .acc summary::before {
  content: ""; position: absolute; right: .55rem; top: 50%; background: var(--gold-dp);
  transition: transform .45s var(--e-out), opacity .35s var(--e);
}
.acc summary::after  { width: 15px; height: 1px; transform: translateY(-50%); }
.acc summary::before { width: 1px; height: 15px; right: 1.02rem; transform: translateY(-50%); }
.acc details[open] summary::before { transform: translateY(-50%) rotate(90deg); opacity: 0; }
.acc summary:hover { color: var(--sapphire-3); }
.acc__b { padding: 0 3rem 1.5rem 0; color: var(--slate); font-size: .98rem; line-height: 1.7; }
.acc__b p + p { margin-top: .8em; }

/* ---------- 20. Key facts (AEO extractable) ---------- */
.spec { display: grid; gap: 0; }
.spec > div { display: grid; grid-template-columns: 15rem 1fr; gap: clamp(1rem,2vw,2rem);
              padding: 1.15rem 0; border-bottom: 1px solid var(--line-soft); }
.spec dt { font: 600 .78rem/1.5 var(--ff); letter-spacing: .12em; text-transform: uppercase;
           color: var(--gold-dp); }
.spec dd { margin: 0; color: var(--ink); font-size: .98rem; line-height: 1.65; }
.spec dd > .tlink { min-height: 44px; display: inline-flex; align-items: center; }

/* ---------- 21. Membership / pricing ---------- */
.plans { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: clamp(1rem,2vw,1.8rem); align-items: start; }
.plan { background: var(--paper); border: 1px solid var(--line); padding: clamp(1.4rem,2.2vw,2.1rem);
        display: grid; gap: .9rem; position: relative; border-radius: var(--r-l);
        transition: box-shadow .5s var(--e), transform .5s var(--e-out); }
.plan:hover { box-shadow: var(--lift-2); transform: translateY(-4px); }
.plan--best { border-color: var(--sapphire); box-shadow: var(--lift-2); }
.plan--best::before { content: "Most chosen"; position: absolute; top: 0; right: 0;
    background: var(--sapphire); color: var(--paper); font: 600 .72rem/1 var(--ff);
    letter-spacing: .16em; text-transform: uppercase; padding: .55rem .8rem;
    border-radius: 0 var(--r-l) 0 var(--r-l); }
.plan__n { font: 400 clamp(1.3rem,1.9vw,1.7rem)/1.15 var(--ff-d); color: var(--sapphire); }
.plan__p { display: flex; align-items: baseline; gap: .4rem; }
.plan__p b { font: 400 clamp(2.2rem,4vw,3.2rem)/1 var(--ff-d); color: var(--ink); }
.plan__p span { font-size: .85rem; color: var(--slate); }
.plan__v { font-size: .82rem; color: var(--gold-dp); font-weight: 600; }
.plan ul { display: grid; gap: .5rem; }
.plan ul li { font-size: .92rem; color: var(--slate); padding-left: 1.3rem; position: relative; line-height: 1.55; }
.plan ul li::before { content: "✓"; position: absolute; left: 0; color: var(--gold-dp); font-weight: 700; font-size: .82rem; }
.plan__perk { font-size: .85rem; color: var(--ink); background: var(--mist); padding: .8rem;
              border-radius: var(--r-m); }

/* ---------- 22. Forms ---------- */
.form { display: grid; gap: 1rem; }
.field { display: grid; gap: .4rem; }
.field > label { font: 600 .76rem/1 var(--ff); letter-spacing: .1em; text-transform: uppercase; color: var(--slate); }
.field input, .field select, .field textarea {
  font: 400 1rem/1.4 var(--ff); color: var(--ink); background: var(--paper);
  border: 1px solid var(--line); padding: .95rem 1rem; min-height: 54px; width: 100%;
  border-radius: var(--r-m); -webkit-appearance: none; appearance: none;
  transition: border-color .3s var(--e), box-shadow .3s var(--e);
}
.field textarea { min-height: 120px; resize: vertical; border-radius: var(--r-l); }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none; border-color: var(--sapphire); box-shadow: 0 0 0 3px rgba(32,88,112,.12);
}
.field--err input, .field--err select, .field--err textarea { border-color: #8a2f2f; }
.field__e { font-size: .8rem; color: #8a2f2f; font-weight: 600; }
.field__e[hidden] { display: none; }
.form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.form__note { font-size: .78rem; color: var(--slate-dim); line-height: 1.55; }
.check { display: flex; gap: .7rem; align-items: flex-start; font-size: .88rem; color: var(--slate); }
.check { min-height: 44px; align-items: center; }
.check input { width: 24px; height: 24px; flex: none; accent-color: var(--sapphire);
               border-radius: var(--r); }

/* ---------- 23. Landing-page header + footer ---------- */
.lphdr { position: relative; z-index: 5; border-bottom: 1px solid var(--line-gem); }
.lphdr__in { display: flex; align-items: center; justify-content: space-between; gap: 1rem;
             min-height: 76px; padding-block: .8rem; }
.lphdr .wm__n { color: var(--paper); } .lphdr .wm__s { color: var(--gold); }
.lphdr a { color: var(--gold); font-weight: 600;
           min-height: 44px; display: inline-flex; align-items: center; }

.ftr { background: var(--abyss); color: var(--on-gem); padding-block: clamp(3rem,6vw,5.5rem) 2rem; }
.ftr__grid { display: grid; grid-template-columns: 1.7fr 1fr 1fr 1.3fr; gap: clamp(1.5rem,3vw,3rem); }
.ftr h3 { font: 600 .72rem/1 var(--ff); letter-spacing: .2em; text-transform: uppercase;
          color: var(--gold); margin-bottom: 1.1rem; }
.ftr a, .ftr li { color: var(--on-gem-dim); font-size: .92rem; }
.ftr li a, .ftr__grid > div a { min-height: 44px; display: inline-flex; align-items: center; }
.ftr a:hover { color: var(--gold); }
.ftr .wm__n { color: var(--paper); font-size: 1.6rem; }
.ftr__bot { margin-top: clamp(2.4rem,4vw,3.6rem); padding-top: 1.6rem; border-top: 1px solid var(--line-gem);
            display: flex; flex-wrap: wrap; gap: 1rem; justify-content: space-between;
            font-size: .8rem; color: var(--on-gem-dim); }   /* NOT --slate-dim: 3.09:1 on abyss */

/* ---------- 24. Sticky mobile CTA ---------- */
/* .mbar is position:fixed, so every breakpoint that shows it must also add the
   matching body padding-bottom in the SAME media query. Drop one and the last rows
   of every page sit under the bar. */
.mbar { position: fixed; inset: auto 0 0; z-index: 800; display: none;
        grid-template-columns: 1fr 1.3fr; border-top: 1px solid var(--line);
        background: rgba(244,250,253,.94); backdrop-filter: blur(14px);
        padding-bottom: env(safe-area-inset-bottom); }
.mbar a { display: flex; align-items: center; justify-content: center; gap: .5rem;
          min-height: 58px; font: 600 .9rem/1 var(--ff); color: var(--sapphire); }
.mbar a + a { background: var(--sapphire); color: var(--paper); }

/* ---------- 25. Breakpoints ---------- */
/* The header bar is wordmark + nav + phone + CTA, all flex:none. Together they
   out-measure the viewport from about 1470px down, and because body is
   overflow-x: clip that NEVER shows up as scrollWidth — the CTA is simply sliced
   off the right edge. Same trap as Site 4's header in CLAUDE.md. Two changes fix
   it: the nav collapses to the burger at 1300 rather than 1180, and the
   "Dental Studio" subtitle (136px on its own) drops wherever the full nav is
   showing, since the gem mark and "Sapphire" already carry the brand. */
@media (max-width: 1560px) { .wm__s { display: none; } }

@media (max-width: 1300px) {
  .nav { display: none; }
  .burger { display: inline-flex; margin-left: auto; }
  .hdr__tel { display: none; }
  .ftr__grid { grid-template-columns: 1fr 1fr; }
  .spec > div { grid-template-columns: 11rem 1fr; }
  .ss { grid-template-columns: 1fr; }
}
@media (max-width: 1024px) {
  .trust { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .g-4 { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .steps { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .plans { grid-template-columns: 1fr; }
  .g-2f { grid-template-columns: 1fr; }
}
@media (max-width: 860px) {
  /* .mbar appears here — and body gains the matching padding in the SAME block. */
  .mbar { display: grid; }
  body { padding-bottom: calc(58px + env(safe-area-inset-bottom)); }
  .shead { grid-template-columns: 1fr; }
  .shead > *:last-child { padding-bottom: 0; }
  .split, .split--wide { grid-template-columns: 1fr; }
  .split--flip > *:first-child { order: 0; }
  .g-3 { grid-template-columns: 1fr; }
  .stats { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .hero { min-height: 88svh; }
  .ss__stage { aspect-ratio: 4/3; }
  .ba { aspect-ratio: 4/3; }
}
@media (max-width: 640px) {
  /* The header used to put a flex:none wordmark AND a flex:none CTA group in one
     bar; below 640 they out-measured the viewport and shoved the burger past the
     right edge. body{overflow-x:clip} hid the evidence, so scrollWidth stayed 0
     at every width while the only nav control on phones was unreachable. */
  .hdr__cta .btn { display: none; }
  .wm__s { display: none; }
  .g-2, .g-4, .g-2f { grid-template-columns: 1fr; }
  .steps, .trust, .stats { grid-template-columns: 1fr; }
  .ftr__grid { grid-template-columns: 1fr; }
  .spec > div { grid-template-columns: 1fr; gap: .3rem; }
  .form__row { grid-template-columns: 1fr; }
  .hero__meta { gap: 1.1rem 2rem; }
  .acc summary { padding-right: 2.4rem; }
  .acc__b { padding-right: 0; }
}

/* ============================================================================
   26. The second motion layer — depth, light and entrance
   Everything here is transform / opacity / filter, driven either by CSS alone or
   by the single rAF scroll driver in site.js. Nothing here is required for the
   page to be usable, and all of it is switched off under prefers-reduced-motion.
   ========================================================================= */

/* ---------- 26a. Page-load curtain ---------- */
/* Pure CSS animation, deliberately: if this depended on JS and the script failed,
   a full-viewport panel would sit over the page forever. An animation runs whether
   or not JS does, and fill-mode holds the finished state. */
.curtain {
  position: fixed; inset: 0; z-index: 9998; pointer-events: none;
  background: var(--abyss); transform-origin: top;
  animation: curtain-up .9s var(--e-io) .12s both;
}
.curtain::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
}
.curtain i {
  position: absolute; inset: 0; display: grid; place-items: center;
  font: 400 clamp(1.6rem, 4vw, 2.6rem)/1 var(--ff-d); letter-spacing: .16em;
  text-transform: uppercase; color: var(--paper); font-style: normal;
  animation: curtain-mark .62s var(--e-out) both;
}
@keyframes curtain-up   { to { transform: translateY(-101%); } }
@keyframes curtain-mark { 0% { opacity: 0; transform: translateY(9px); }
                          55% { opacity: 1; transform: none; }
                          100% { opacity: 0; transform: translateY(-9px); } }

/* ---------- 26b. Pointer spotlight on the gem bands ---------- */
/* A light that follows the cursor across the dark sections. The inverse of a dark
   site's lit edge, and the thing that stops a large flat navy band reading as dead. */
/* NOTE the --gx/--gy names. These MUST NOT be --mx/--my: custom properties inherit,
   and .magnet (the cursor-following CTA) reads --mx/--my. A gem section declaring
   --mx:50% therefore translated every magnetic button inside it by half its own
   width — which is what pushed the final CTA off the page on six pages at once. */
.gem { --gx: 50%; --gy: 50%; }
.gem::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 0;
  background: radial-gradient(420px circle at var(--gx) var(--gy),
              rgba(255,213,61,.13), rgba(64,176,223,.10) 42%, transparent 68%);
  opacity: 0; transition: opacity .6s var(--e);
}
.gem[data-lit="true"]::after { opacity: 1; }

/* ---------- 26c. Card tilt ---------- */
.tilt { transform: perspective(1100px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) translateY(var(--ty, 0)); 
        transform-style: preserve-3d; transition: transform .45s var(--e-out); }
.tilt[data-tilting="true"] { transition: transform .08s linear; }

/* ---------- 26d. Wipe reveal for media ---------- */
/* The image wipes open as the figure enters, landing on a full rounded rectangle.
   NOTE: this element is CLIPPED, so it must never be the IntersectionObserver
   target — it carries data-rvchild and site.js forwards data-in to it from an
   unclipped ancestor. Both ends stay polygon() so the clip-path can interpolate. */
.rvf {
  border-radius: var(--r-xl);
  clip-path: polygon(0 0, 0 0, 0 100%, 0 100%);
  transition: clip-path 1.15s var(--e-io); transition-delay: var(--d, 0ms);
}
.rvf[data-in="true"] {
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
}

/* ---------- 26e. Gold shimmer across a display heading on reveal ---------- */
.shine { position: relative; }
.shine[data-in="true"] {
  background-image: linear-gradient(96deg, currentColor 34%, var(--gold) 50%, currentColor 66%);
  background-size: 260% 100%; background-position: 130% 0;
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: shine 1.7s var(--e-out) .45s 1 forwards;
}
.shine em { -webkit-text-fill-color: var(--gold-dp); }
.gem .shine em, .hero .shine em { -webkit-text-fill-color: var(--gold); }
@keyframes shine { to { background-position: -30% 0; } }

/* ---------- 26f. Scroll-linked hero ---------- */
.hero__media img { will-change: transform; transform: scale(calc(1 + var(--sp, 0) * .07)) translate3d(0, calc(var(--sp, 0) * 26px), 0); }
.hero__in { transform: translate3d(0, calc(var(--sp, 0) * -18px), 0); }

/* ---------- 26g. Figure hover: the image breathes, the frame does not ---------- */
.fig img { transition: transform 1.2s var(--e-out), filter .8s var(--e); }
.fig:hover img, a:hover .fig img { transform: scale(1.045); }

/* ---------- 26h. Section seam ---------- */
/* A hairline that draws itself across the joint between two bands. */
.seam { position: relative; height: 1px; background: var(--line-soft); overflow: visible; }
.seam::after {
  content: ""; position: absolute; left: 50%; top: 0; width: 0; height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
  transform: translateX(-50%); transition: width 1.4s var(--e-io);
}
.seam[data-in="true"]::after { width: min(560px, 70%); }

@media (prefers-reduced-motion: reduce) {
  .curtain { display: none; }
  .gem::after { display: none; }
  .tilt { transform: none !important; }
  .rvf { clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%) !important; }
  .shine[data-in="true"] { animation: none; -webkit-text-fill-color: currentColor;
                           background-image: none; }
  .hero__media img, .hero__in { transform: none !important; }
  .fig:hover img, a:hover .fig img { transform: none; }
  .seam[data-in="true"]::after { width: min(560px, 70%); transition: none; }
}