/* ============================================================================
   SAPPHIRE DENTAL STUDIO — Winter Garden, FL
   Porcelain light, cut-gem geometry, sapphire navy ink, champagne gold hairlines.
   Palette taken from the practice's real logo: #001868 navy, #D8B860 gold.
   The signature motif is the FACET — chamfered corners cut from the logo's
   tessellated gem, never a border-radius.
   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 {
  /* surfaces — light, cool, porcelain */
  --porcelain: #f7f9fd;   /* page base */
  --paper:     #ffffff;   /* raised panel */
  --mist:      #ecf0f8;   /* quiet mid-tone between porcelain and paper */
  --frost:     #e2e9f6;   /* inset / rule ground */

  /* the gem — deep sapphire, used full-bleed for contrast sections */
  --sapphire:  #001868;   /* brand ink — 15.78:1 on porcelain */
  --sapphire-2:#0b2a8a;   /* raised gem panel */
  --sapphire-3:#12379f;   /* hover / gradient stop */
  --abyss:     #000b2e;   /* deepest — footer and gem bands */

  /* text ramp */
  --ink:       #0a1330;   /* body on light — 17.34:1 */
  --slate:     #46527a;   /* secondary on light — 7.25:1 */
  --slate-dim: #6f7a9d;   /* tertiary, decorative only — never body copy */
  --on-gem:    #eef2fb;   /* body on sapphire — 17.8:1 on abyss */
  --on-gem-dim:#a9b6dc;   /* secondary on sapphire — 7.4:1 on abyss */

  /* accent ramp — champagne gold, with its legal uses spelled out */
  --gold:      #d8b860;   /* 1.92:1 on porcelain -> LARGE display, rules, icons only
                             10.07:1 on abyss    -> legal as text on the gem */
  --gold-dp:   #8a6b22;   /* 4.99:1 on porcelain -> small gold text on light */
  --gold-lt:   #ebd9a0;   /* 13.77:1 on abyss    -> gold body text on the gem */

  /* lines, glass, light */
  --line:      rgba(10,19,48,.14);
  --line-soft: rgba(10,19,48,.07);
  --line-gold: rgba(216,184,96,.42);
  --line-gem:  rgba(238,242,251,.16);
  --sheen:     linear-gradient(100deg,transparent 20%,rgba(216,184,96,.42) 48%,transparent 76%);
  --lift-1:    0 1px 2px rgba(0,24,104,.05), 0 4px 14px -6px rgba(0,24,104,.10);
  --lift-2:    0 2px 6px rgba(0,24,104,.07), 0 18px 44px -18px rgba(0,24,104,.20);
  --lift-3:    0 8px 20px rgba(0,24,104,.10), 0 40px 80px -32px rgba(0,24,104,.30);

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

  --shell:     1440px;
  --gut:       clamp(1.25rem, 4.2vw, 5rem);
  --sect:      clamp(4rem, 7vw, 8rem);
  --r:         2px;                        /* micro-radius; the language is the chamfer */
  --facet:     clamp(14px, 2.1vw, 28px);   /* the cut-gem corner */

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

/* ---------- 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(18,55,159,.55), transparent 60%),
    radial-gradient(90% 80% at 92% 108%, rgba(0,24,104,.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. The facet — the signature geometry ---------- */
/* A cut-gem chamfer on two opposing corners. This is the house shape: it replaces
   border-radius everywhere a softer language would have used one. */
.fct { clip-path: polygon(var(--facet) 0, 100% 0, 100% calc(100% - var(--facet)), calc(100% - var(--facet)) 100%, 0 100%, 0 var(--facet)); }
.fct--all { clip-path: polygon(var(--facet) 0, calc(100% - var(--facet)) 0, 100% var(--facet), 100% calc(100% - var(--facet)), calc(100% - var(--facet)) 100%, var(--facet) 100%, 0 calc(100% - var(--facet)), 0 var(--facet)); }
.fct--tr  { clip-path: polygon(0 0, calc(100% - var(--facet)) 0, 100% var(--facet), 100% 100%, 0 100%); }

/* 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;
}
.panel--inset { background: var(--mist); box-shadow: none; }
.panel--flat  { box-shadow: none; }
.gem .panel {
  background: rgba(238,242,251,.045); border-color: var(--line-gem);
  box-shadow: none; backdrop-filter: blur(6px);
}
/* a hairline gold seam along the chamfer */
.seam::after {
  content: ""; position: absolute; right: -1px; bottom: -1px;
  width: calc(var(--facet) * 1.42); height: 1px; background: var(--gold);
  transform-origin: right bottom; transform: rotate(-45deg); opacity: .85; pointer-events: none;
}

.fig { overflow: hidden; position: relative; background: var(--frost); }
.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;
  clip-path: polygon(12px 0, 100% 0, 100% calc(100% - 12px), calc(100% - 12px) 100%, 0 100%, 0 12px);
  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: #2b1f00; }
.btn--gold:hover { background: #e6c874; border-color: #e6c874; }
.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(27,63,160,.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(216,184,96,.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(247,249,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; }
.wm { display: flex; align-items: baseline; gap: .6rem; 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); }
.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(0,11,46,.60) 0%, rgba(0,11,46,.30) 28%, rgba(0,11,46,.72) 72%, rgba(0,11,46,.92) 100%),
    linear-gradient(94deg, rgba(0,11,46,.80) 0%, rgba(0,11,46,.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: #dfe6f7; 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(238,242,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: #c3cde8; 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);
  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); }
.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(0,11,46,.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); font-size: .85rem; letter-spacing: .1em; }
.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; }
.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(0,11,46,.25);
}
.ba__handle::before {
  content: ""; position: absolute; top: 50%; left: 50%; width: 46px; height: 46px;
  transform: translate(-50%,-50%) rotate(45deg); background: var(--paper);
  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(0,11,46,.72); color: var(--paper); backdrop-filter: blur(4px); }
.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);
             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(0,11,46,.7); color: var(--paper);
                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(10,19,48,.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);
             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); transform: rotate(45deg);
                     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); }
.ss__range::-moz-range-track { height: 3px; background: var(--frost); }
.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); }
.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); }
.ss__case[aria-pressed="true"] { background: var(--sapphire); color: var(--paper); border-color: var(--sapphire); }

/* ---------- 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;
        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; }
.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; }

/* ---------- 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%;
  transition: border-color .3s var(--e), box-shadow .3s var(--e);
}
.field textarea { min-height: 120px; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none; border-color: var(--sapphire); box-shadow: 0 0 0 3px rgba(0,24,104,.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); }

/* ---------- 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(--slate-dim); }

/* ---------- 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(247,249,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 ---------- */
@media (max-width: 1180px) {
  .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(216,184,96,.13), rgba(18,55,159,.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. Facet reveal for media ---------- */
/* The chamfer opens as the figure enters. 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. */
.rvf {
  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(var(--facet) 0, 100% 0, 100% calc(100% - var(--facet)),
                     calc(100% - var(--facet)) 100%, 0 100%, 0 var(--facet));
}

/* ---------- 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(var(--facet) 0, 100% 0, 100% calc(100% - var(--facet)),
                            calc(100% - var(--facet)) 100%, 0 100%, 0 var(--facet)) !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; }
}