/* ============================================================================
   CAPITAL AESTHETIC  |  DESIGN SYSTEM
   ----------------------------------------------------------------------------
   Direction: SPECTRUM. A dark editorial world built on the client's brand
   palette: deep navy #0A1A3E, salmon coral #EFA497, white. The world is a
   navy blue-black; the single loud accent is the coral. The melanin tone
   spectrum sits on top of it as the structural device: section rules, gallery
   filters, service bars, dividers, footer band.

   This file governs every page of the site. Interior pages must:
     1. use the tokens below, never new hexes
     2. use the shared shell (.nav, .foot, .sec, .wrap, .btn, .chip, .mono)
     3. add page specific rules in their own small <style> block, built on tokens

   File order:  1 tokens  2 base  3 utilities  4 buttons + chips  5 nav
                6 section shell  7 hero  8 marquee  9 results plates
               10 suites  11 services  12 skin of color (with the campaign band
               and the real skin row)  13 path  14 people  15 quotes
               16 book + forms  17 footer  18 interior page helpers
               19 motion  20 responsive  21 practice page  22 service menu
               23 image band vocabulary  24 edge devices  25 two more devices
               26 mobile heroes  27 scroll motion  28 mobile rails
               29 light theme  30 editorial cleanup
   ========================================================================== */

/* ============================================================================
   1. TOKENS
   ========================================================================== */
:root{
  /* --- THE SPECTRUM: the entire color system, drawn from real skin tones.
         Used for tone filters, service bars, dividers, plate fills.
         Tone 01 is the lightest, tone 06 the deepest.                     --- */
  --t1:#F0D9BE;                 /* 01 porcelain   Fitzpatrick I to II   */
  --t2:#E0B384;                 /* 02 honey       Fitzpatrick II to III */
  --t3:#C68A50;                 /* 03 bronze      Fitzpatrick III to IV */
  --t4:#A5652F;                 /* 04 amber       Fitzpatrick IV        */
  --t5:#7A4222;                 /* 05 mahogany    Fitzpatrick V         */
  --t6:#4E2614;                 /* 06 umber       Fitzpatrick VI        */
  --spectrum:linear-gradient(90deg,
    var(--t1) 0%, var(--t2) 20%, var(--t3) 40%,
    var(--t4) 60%, var(--t5) 80%, var(--t6) 100%);

  /* --- WORLD: four steps of navy blue-black, used to build band rhythm.
         --ink is the page floor, --ink-2 alternating bands,
         --ink-3 raised cards, --panel the deepest inset. The ladder walks
         toward the brand navy #0A1A3E without ever reaching it, so the
         brand navy still reads as a colour and not as the ground.        --- */
  --ink:#05091A;
  --ink-2:#081126;
  --ink-3:#0D1832;
  --panel:#122043;

  /* --- LINES: hairlines only. No soft shadows anywhere.                --- */
  --line:rgba(214,224,244,.14);
  --line-2:rgba(214,224,244,.08);
  --line-accent:rgba(239,164,151,.38);

  /* --- TYPE COLOR --- */
  --paper:#F3F5FA;              /* primary text     14.7:1 on --panel    */
  --paper-dim:#B7C0D8;          /* secondary text    8.8:1 on --panel    */
  --paper-faint:#7E8AA8;         /* mono meta, 5.7:1 on --ink             */
  --accent:#EFA497;             /* THE ONE LOUD ACCENT, the brand coral. */
  --accent-ink:#132040;         /* text that sits on the coral, 8.0:1    */
  --em:#D79A8E;                 /* the QUIET emphasis word inside a headline:
                                   the coral pulled back so it never competes
                                   with the loud accent on the buttons. It was
                                   tone 03 bronze in the warm world and read as
                                   leftover gold once the ground went navy.  */

  /* --- TYPE: a human editorial serif for statements and a quiet sans for
         everything functional. Newsreader brings the warmth of a magazine
         masthead; DM Sans keeps treatment information calm and legible. --- */
  --display:'Newsreader',Georgia,'Times New Roman',serif;
  --voice:'DM Sans','Avenir Next','Helvetica Neue',Arial,sans-serif;
  --data:'DM Sans','Avenir Next','Helvetica Neue',Arial,sans-serif;

  /* --- MEASURE + RHYTHM --- */
  --wrap:1240px;
  --wrap-narrow:920px;
  --gut:28px;                   /* wrap side padding, desktop            */
  --sec-y:104px;                /* section vertical rhythm, desktop      */
  --navh:72px;

  /* --- IMAGERY HOOKS ---------------------------------------------------
     Generated atmosphere art lands in assets/img/gen/ as large source PNGs.
     The site references the optimized .jpg twins produced by
     tools/optimize-images.py (run it after every generation pass).
     Every hook is OPTIONAL: each one has a gradient fallback beneath it,
     so a missing file degrades to the tone system, never to a hole.    */
  --img-hero:url('../img/gen/hero-marble.jpg');
  --img-silk:url('../img/gen/tone-silk.jpg');
  --img-grain:url('../img/gen/texture-grain.jpg');
}

/* ============================================================================
   2. BASE
   ========================================================================== */
*,*::before,*::after{box-sizing:border-box}

html,body{
  margin:0;padding:0;
  /* clip, not hidden: hidden makes body a scroll container and silently
     disables position:sticky on every descendant (the .nav). clip blocks
     horizontal overflow without creating a scroll container. */
  overflow-x:clip;
  max-width:100%;
  background:var(--ink);
}
@supports not (overflow-x:clip){
  html,body{overflow-x:hidden}
  .nav{position:fixed;left:0;right:0}
  body{padding-top:var(--navh,72px)}
}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;scroll-padding-top:88px}

body{
  font-family:var(--voice);
  font-weight:400;
  color:var(--paper);
  font-size:17px;
  line-height:1.7;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

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

:focus-visible{outline:2px solid var(--accent);outline-offset:3px}

::selection{background:var(--accent);color:var(--accent-ink)}

/* ============================================================================
   3. UTILITIES
   ========================================================================== */
.wrap{width:100%;max-width:var(--wrap);margin:0 auto;padding:0 var(--gut)}
.wrap--narrow{max-width:var(--wrap-narrow)}

/* full bleed band: content runs to the viewport edge with its own padding */
.bleed{width:100%;padding:0 clamp(20px,4vw,64px)}

.mono{font-family:var(--data);font-size:11.5px;letter-spacing:.14em;text-transform:uppercase}

/* BANNED (Adam 2026-08-19): the little separator dot read too AI. All 105
   instances were stripped from markup; this keeps any stray/future .dot hidden. */
.dot{display:none}

.sr-only{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}

.skip{
  position:absolute;left:-9999px;top:0;background:var(--accent);color:var(--accent-ink);
  padding:12px 18px;font-family:var(--data);font-size:14px;z-index:99;
}
.skip:focus{left:8px;top:8px}

/* the signature rule: a 3px spectrum hairline */
.spectrum-rule{height:3px;width:100%;background:var(--spectrum)}

/* ============================================================================
   4. BUTTONS + CHIPS
   ========================================================================== */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  font-family:var(--data);font-size:12.5px;letter-spacing:.16em;text-transform:uppercase;
  padding:15px 24px;text-decoration:none;border:1px solid transparent;
  border-radius:0;cursor:pointer;line-height:1;
  transition:background .2s ease,color .2s ease,border-color .2s ease;
}
.btn--accent{background:var(--accent);color:var(--accent-ink);font-weight:500}
/* hover lifts the coral toward white rather than borrowing a spectrum tone:
   the tones are melanin data, not decoration. */
.btn--accent:hover{background:#F7C7BE}
.btn--ghost{border-color:var(--line);color:var(--paper);background:transparent}
.btn--ghost:hover{border-color:var(--accent);color:var(--accent)}
.btn--line{border-color:var(--accent);color:var(--accent);background:transparent}
.btn--line:hover{background:var(--accent);color:var(--accent-ink)}
.btn--big{padding:19px 34px;font-size:13px}
.btn--full{width:100%;border:0}
.btn-row{display:flex;flex-wrap:wrap;gap:14px;align-items:center}

/* the soft CTA: a text link that reads as an invitation, not a transaction */
.softlink{
  display:inline-flex;align-items:center;gap:10px;text-decoration:none;
  font-size:16px;color:var(--paper);
  border-bottom:1px solid var(--line-accent);padding-bottom:4px;
}
.softlink:hover{color:var(--accent);border-bottom-color:var(--accent)}
.softlink .arw{font-family:var(--data);font-size:13px;color:var(--accent)}

/* data chip: restrained mono detailing (serials, tone codes, counts) */
.datachip{
  display:inline-flex;align-items:center;gap:8px;
  font-family:var(--data);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--paper-dim);border:1px solid var(--line-2);padding:6px 10px;
}
.datachip--accent{color:var(--accent);border-color:var(--line-accent)}
.datachip .sw{width:9px;height:9px;flex:none;display:block}

/* interactive filter chip */
.chip{
  display:inline-flex;align-items:center;gap:9px;
  background:transparent;border:1px solid var(--line);color:var(--paper-dim);
  font-family:var(--data);font-size:11.5px;letter-spacing:.13em;text-transform:uppercase;
  padding:10px 15px;cursor:pointer;transition:.18s ease;
}
.chip:hover{border-color:var(--accent);color:var(--paper)}
.chip.is-on{border-color:var(--accent);color:var(--accent-ink);background:var(--accent)}
.chip__sw{width:12px;height:12px;flex:none;display:block}
.chip__sw--all{background:linear-gradient(90deg,var(--t1),var(--t3),var(--t6))}
.chip__fitz{color:inherit;opacity:.62;letter-spacing:.1em}

/* ============================================================================
   5. NAV
   ========================================================================== */
.nav{
  position:sticky;top:0;z-index:60;
  background:rgba(5,9,26,.9);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
}
.nav__in{
  max-width:var(--wrap);margin:0 auto;padding:14px var(--gut);
  display:flex;align-items:center;gap:26px;
}
.brand{text-decoration:none;display:block;line-height:1;flex:none}
.brand__word{
  display:block;font-size:16px;font-weight:800;letter-spacing:.17em;
}
.brand__sub{
  display:block;font-family:var(--data);font-size:9.5px;letter-spacing:.32em;
  color:var(--accent);margin-top:6px;
}
.nav__links{margin-left:auto;display:flex;gap:24px;align-items:center}
.nav__links a{
  text-decoration:none;font-size:14.5px;color:var(--paper-dim);
  padding:4px 0;border-bottom:1px solid transparent;white-space:nowrap;
}
.nav__links a:hover,.nav__links a[aria-current="page"]{color:var(--paper);border-bottom-color:var(--accent)}
.nav__cta{flex:none}

/* mobile toggle + panel */
.nav__toggle{
  display:none;margin-left:auto;background:transparent;border:1px solid var(--line);
  color:var(--paper);width:44px;height:44px;align-items:center;justify-content:center;
  cursor:pointer;flex:none;padding:0;
}
.nav__bars{display:block;width:18px;height:1px;background:var(--paper);position:relative}
.nav__bars::before,.nav__bars::after{
  content:"";position:absolute;left:0;width:18px;height:1px;background:var(--paper);
  transition:transform .22s ease,top .22s ease;
}
.nav__bars::before{top:-6px}
.nav__bars::after{top:6px}
.nav__toggle[aria-expanded="true"] .nav__bars{background:transparent}
.nav__toggle[aria-expanded="true"] .nav__bars::before{top:0;transform:rotate(45deg)}
.nav__toggle[aria-expanded="true"] .nav__bars::after{top:0;transform:rotate(-45deg)}

.nav__panel{
  display:none;position:fixed;z-index:59;
  inset:var(--navh) 0 0;
  border-top:1px solid var(--line-2);background:var(--ink);
  padding:clamp(18px,4vh,40px) var(--gut) max(24px,env(safe-area-inset-bottom));
  overflow-y:auto;overscroll-behavior:contain;
}
.nav__panel.is-open{display:flex;flex-direction:column;animation:nav-panel-in .22s ease both}
.nav__panel ul{list-style:none;margin:0 auto;padding:0;width:100%;max-width:720px}
.nav__panel li{border-bottom:1px solid var(--line-2)}
.nav__panel li > a{
  display:flex;align-items:center;justify-content:space-between;gap:14px;
  padding:clamp(12px,2vh,18px) 0;text-decoration:none;
  font-family:var(--display);font-size:clamp(1.85rem,6.4vw,3.2rem);
  font-weight:500;line-height:1;color:var(--paper);letter-spacing:-.025em;
}
.nav__panel li > a:hover,.nav__panel li > a[aria-current="page"]{color:var(--accent)}
.nav__panel li:last-child{border-bottom:0}
.nav__panel .idx{display:none}
.nav__panel-foot{width:100%;max-width:720px;margin:auto auto 0;padding-top:28px}
.nav__panel-note{margin:0 0 12px;color:var(--paper-dim);font-size:13px;line-height:1.45}
.nav__panel .btn{
  width:100%;min-height:56px;margin:0;padding:18px 24px;
  justify-content:center;text-align:center;
}
html.nav-open,html.nav-open body{overflow:hidden}
html.nav-open .nav{
  position:fixed;left:0;right:0;top:0;
  background:var(--ink);
  backdrop-filter:none;-webkit-backdrop-filter:none;
}
@keyframes nav-panel-in{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}

/* ============================================================================
   6. SECTION SHELL
   ========================================================================== */
.sec{padding:var(--sec-y) 0;position:relative}
.sec--ink{background:var(--ink)}
.sec--alt{background:var(--ink-2)}
.sec--panel{background:var(--panel)}
.sec--tight{padding:74px 0}

.sec__head{max-width:960px;margin:0 0 52px}
.sec__head--center{margin-left:auto;margin-right:auto;text-align:center}

.kicker{
  margin:0 0 20px;font-family:var(--data);font-size:11.5px;letter-spacing:.22em;
  text-transform:uppercase;color:var(--accent);display:flex;align-items:center;gap:10px;
}
/* the accent square marker was removed (Adam 2026-08-19): kickers read as a
   clean subtitle, not a marked label. */
.sec__head--center .kicker{justify-content:center}

.h2{
  margin:0;font-weight:700;font-size:clamp(2.1rem,4.45vw,3.65rem);
  line-height:1.08;letter-spacing:-.012em;
}
.h2 em{font-style:normal;color:var(--em)}
.h2 em.accent{color:var(--accent)}
.lede{margin:24px 0 0;max-width:62ch;color:var(--paper-dim);font-size:17.5px;line-height:1.62}

/* spectrum divider between bands, with an optional label */
.divider{
  position:relative;width:100%;height:64px;background:var(--ink);
  display:flex;align-items:center;justify-content:center;
}
.divider--alt{background:var(--ink-2)}
.divider::before{
  content:"";position:absolute;left:0;right:0;top:50%;height:3px;transform:translateY(-50%);
  background:var(--spectrum);
}
.divider__label{
  position:relative;z-index:2;background:var(--ink);padding:0 24px;
  font-family:var(--data);font-size:11px;letter-spacing:.26em;text-transform:uppercase;
  color:var(--paper-dim);white-space:nowrap;
}
.divider--alt .divider__label{background:var(--ink-2)}

/* ============================================================================
   7. HERO
   ========================================================================== */
.hero{position:relative;overflow:hidden;padding:88px 0 78px;isolation:isolate}
.hero__bg{
  position:absolute;inset:-20% -10% auto -10%;height:150%;z-index:-2;
  background:
    radial-gradient(58% 52% at 78% 8%, rgba(239,164,151,.16), transparent 68%),
    radial-gradient(46% 40% at 8% 78%, rgba(30,60,124,.40), transparent 70%),
    linear-gradient(180deg,#070F24 0%,var(--ink) 72%);
}
/* generated marble plate, if present. Absent = the gradient above stands alone. */
.hero__art{
  position:absolute;inset:0;z-index:-1;pointer-events:none;
  background-image:var(--img-hero);
  background-size:cover;background-position:60% 30%;
  opacity:.34;mix-blend-mode:screen;
  -webkit-mask-image:linear-gradient(105deg,transparent 0,transparent 34%,#000 78%);
  mask-image:linear-gradient(105deg,transparent 0,transparent 34%,#000 78%);
}
.hero__in{display:grid;grid-template-columns:minmax(0,1fr) 268px;gap:60px;align-items:stretch}

.eyebrow{
  font-family:var(--data);font-size:11.5px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--accent);margin:0 0 22px;
}
.hero__creds{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 26px}
.hero__creds .datachip{font-size:10px;letter-spacing:.13em;padding:5px 9px}

.h1{
  margin:0;font-weight:800;
  font-size:clamp(3rem,9.3vw,8.4rem);
  line-height:.94;letter-spacing:-.012em;text-transform:uppercase;
}
.h1 .l{display:block}
.h1 em{font-style:normal}
.outline{
  color:transparent;
  -webkit-text-stroke:3px var(--accent);
  text-stroke:3px var(--accent);
  padding-right:.04em;
}

.hero__sub{max-width:52ch;margin:30px 0 0;color:var(--paper-dim);font-size:18px;line-height:1.62}
.hero__cta{display:flex;flex-wrap:wrap;gap:14px 26px;margin-top:34px;align-items:center}

/* the physician's own line, high on the page */
.voiceline{
  margin:38px 0 0;padding:22px 0 0;border-top:1px solid var(--line-2);
  display:grid;grid-template-columns:74px 1fr;gap:20px;align-items:start;max-width:62ch;
}
.voiceline__mark{
  width:74px;height:74px;border:1px solid var(--line-accent);overflow:hidden;
  background:linear-gradient(170deg,var(--t4),#0A1329);
}
.voiceline__mark img{
  width:100%;height:100%;object-fit:cover;object-position:50% 14%;
  filter:grayscale(1) contrast(1.12) brightness(1.04);mix-blend-mode:luminosity;
}
.voiceline p{margin:0;font-size:18.5px;line-height:1.5;color:var(--paper);letter-spacing:-.01em}
.voiceline cite{
  display:block;margin-top:10px;font-style:normal;
  font-family:var(--data);font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--paper-faint);
}

.hero__facts{
  list-style:none;margin:44px 0 0;padding:24px 0 0;border-top:1px solid var(--line-2);
  display:grid;grid-template-columns:repeat(3,1fr);gap:24px;
  font-size:14px;color:var(--paper-faint);line-height:1.45;
}
.hero__facts .num{
  display:block;font-family:var(--data);font-size:22px;letter-spacing:.02em;
  color:var(--paper);margin-bottom:8px;
}

/* the tone ladder: the site's signature, first screen */
.ladder{border-left:1px solid var(--line-2);padding-left:22px;display:flex;flex-direction:column}
.ladder__cap{
  margin:0 0 16px;font-family:var(--data);font-size:11px;letter-spacing:.24em;
  text-transform:uppercase;color:var(--paper-faint);
}
.ladder__rows{display:flex;flex-direction:column;gap:6px;flex:1 1 auto;min-height:0}
.lrow{display:flex;align-items:stretch;gap:12px;flex:1 1 0;min-height:34px}
.lrow__bar{flex:1 1 auto;background:var(--t);transition:transform .3s ease;transform-origin:left center}
.lrow:hover .lrow__bar{transform:scaleX(1.05)}
.lrow__num{font-family:var(--data);font-size:11px;color:var(--paper-faint);letter-spacing:.1em;align-self:center}
.lrow__name{
  font-family:var(--data);font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--paper-dim);width:76px;flex:none;align-self:center;
}
.ladder__note{
  margin:20px 0 0;font-size:13.5px;line-height:1.55;color:var(--paper-faint);
  border-top:1px solid var(--line-2);padding-top:16px;
}

/* ============================================================================
   8. MARQUEE STRIP
   ========================================================================== */
.strip{
  border-top:1px solid var(--line-2);border-bottom:1px solid var(--line-2);
  background:var(--ink-2);overflow:hidden;padding:16px 0;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 7%,#000 93%,transparent 100%);
  mask-image:linear-gradient(90deg,transparent 0,#000 7%,#000 93%,transparent 100%);
}
.strip__track{
  display:flex;align-items:center;white-space:nowrap;
  font-family:var(--data);font-size:11.5px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--paper-dim);animation:slide 46s linear infinite;
}
.strip__track > span{padding:0 26px}
.strip__track .sep{width:7px;height:7px;padding:0;flex:none;background:var(--accent);border-radius:50%;opacity:.85}
@keyframes slide{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* ============================================================================
   9. RESULTS PLATES
   The gallery is the whole argument. Plates carry: a numeral, crop marks,
   a split reveal between before and after, a suite serial and a tone code.
   ========================================================================== */
.results__bar{
  display:flex;flex-wrap:wrap;gap:18px 26px;align-items:flex-end;justify-content:space-between;
  margin:0 0 22px;
}
.tone-filter{display:flex;flex-wrap:wrap;gap:8px}
.filter-count{font-family:var(--data);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--paper-faint);margin:0}
.filter-count b{color:var(--accent);font-weight:500}

.evidence{
  display:flex;flex-wrap:wrap;gap:10px 22px;align-items:center;
  margin:0 0 30px;padding:14px 0;border-top:1px solid var(--line-2);border-bottom:1px solid var(--line-2);
}
.evidence__claim{
  margin:0;font-family:var(--data);font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--accent);
}
.evidence__note{margin:0;font-size:14px;color:var(--paper-faint);line-height:1.5}
.evidence__flag{
  margin:0 0 30px;padding:12px 0 12px 16px;border-left:2px solid var(--accent);
  font-family:var(--data);font-size:11px;letter-spacing:.1em;line-height:1.8;
  text-transform:uppercase;color:var(--paper-dim);max-width:86ch;
}

.plates{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.plate{border:1px solid var(--line-2);background:var(--ink-2);transition:border-color .25s ease}
.plate:hover{border-color:var(--line)}
.plate[hidden]{display:none}

.plate__frame{
  position:relative;aspect-ratio:4/5;overflow:hidden;
  --split:52%;
  background:#0C1731;
  touch-action:pan-y;
}
/* BEFORE: the tone, flat and unlit */
.plate__before{
  position:absolute;inset:0;
  background:
    linear-gradient(170deg,
      color-mix(in srgb, var(--t) 46%, #0E1A36) 0%,
      color-mix(in srgb, var(--t) 28%, #0E1A36) 100%);
}
/* AFTER: the same tone, lit. Rim light plus a key from the upper right */
.plate__after{
  position:absolute;inset:0;
  clip-path:inset(0 0 0 var(--split));
  background:
    linear-gradient(255deg, rgba(255,244,240,.28) 0%, transparent 32%),
    radial-gradient(64% 44% at 68% 26%, color-mix(in srgb, var(--t) 90%, #FFF4F0) 0%, transparent 66%),
    linear-gradient(170deg,
      color-mix(in srgb, var(--t) 86%, #0E1A36) 0%,
      color-mix(in srgb, var(--t) 50%, #0E1A36) 100%);
}
/* studio texture: fine vertical ruling plus a vignette, so a plate never reads flat */
.plate__grain{
  position:absolute;inset:0;pointer-events:none;
  background-image:
    repeating-linear-gradient(92deg, rgba(240,245,255,.05) 0 1px, rgba(255,255,255,0) 1px 8px),
    repeating-linear-gradient(2deg, rgba(5,9,26,.10) 0 1px, rgba(255,255,255,0) 1px 11px),
    radial-gradient(120% 84% at 50% 32%, transparent 38%, rgba(4,7,20,.66) 100%);
  opacity:.94;
}
/* photographic tooth. Optional file: without it the ruling above still carries. */
.plate__grain::after{
  content:"";position:absolute;inset:0;
  background-image:var(--img-grain);background-size:340px 340px;
  mix-blend-mode:overlay;opacity:.42;
}
.plate__frame::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,transparent 54%,rgba(5,9,26,.72) 100%);
}
/* registration crop marks, one per corner */
.plate__frame > .cm{position:absolute;width:16px;height:16px;border:1px solid rgba(243,245,250,.38);z-index:3}
.cm--tl{top:10px;left:10px;border-right:0;border-bottom:0}
.cm--tr{top:10px;right:10px;border-left:0;border-bottom:0}
.cm--bl{bottom:10px;left:10px;border-right:0;border-top:0}
.cm--br{bottom:10px;right:10px;border-left:0;border-top:0}

.plate__no{
  position:absolute;right:36px;bottom:10px;z-index:3;
  font-family:var(--data);font-size:46px;line-height:1;letter-spacing:.02em;
  color:transparent;-webkit-text-stroke:1px rgba(243,245,250,.32);
}
.plate__tag{
  position:absolute;top:15px;z-index:4;
  font-family:var(--data);font-size:10px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--paper);background:rgba(5,9,26,.74);padding:5px 8px;
}
.plate__tag--before{left:36px}
.plate__tag--after{right:36px}

.plate__reserve{
  position:absolute;left:36px;bottom:16px;z-index:4;
  font-family:var(--data);font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--paper-dim);background:rgba(5,9,26,.74);border:1px solid var(--line-2);
  padding:5px 9px;white-space:nowrap;
}

/* ---- populated plates: a matched illustrative pair sits over the tone fill.
        The gradient stays underneath as the fallback if a file is missing. ---- */
.plate__before img,.plate__after img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 50%;
}
.plate__frame--photo .plate__grain{opacity:.55}
.plate__frame--photo .plate__grain::after{opacity:.3}
.plate__chip{
  position:absolute;left:36px;bottom:16px;z-index:4;
  font-family:var(--data);font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--accent);background:rgba(5,9,26,.72);border:1px solid var(--line-accent);
  padding:5px 9px;white-space:nowrap;
}

/* the split reveal handle */
.plate__handle{
  position:absolute;top:0;bottom:0;left:var(--split);width:1px;z-index:5;
  background:rgba(243,245,250,.75);transform:translateX(-.5px);
}
.plate__grip{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  width:36px;height:36px;border:1px solid var(--accent);background:rgba(5,9,26,.62);
  display:block;
}
.plate__grip::before,.plate__grip::after{
  content:"";position:absolute;top:50%;width:0;height:0;
  border-top:4px solid transparent;border-bottom:4px solid transparent;
}
.plate__grip::before{left:7px;transform:translateY(-50%);border-right:5px solid var(--accent)}
.plate__grip::after{right:7px;transform:translateY(-50%);border-left:5px solid var(--accent)}

.plate__meta{padding:18px 20px 22px}
.plate__title{margin:0;font-size:19px;font-weight:600;letter-spacing:-.012em}
.plate__serial{
  margin:11px 0 0;display:flex;flex-wrap:wrap;gap:8px 14px;align-items:center;
  font-family:var(--data);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--paper-faint);
}
.plate__serial .tone{color:var(--em);display:inline-flex;align-items:center;gap:7px}
.plate__serial .tone .sw{width:9px;height:9px;background:var(--t);display:block}
.plate__note{margin:12px 0 0;font-size:13.5px;color:var(--paper-faint);line-height:1.5}
.plate__by{
  margin:10px 0 0;padding-top:10px;border-top:1px solid var(--line-2);
  font-family:var(--data);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--paper-dim);
}

.results__foot{
  margin-top:34px;padding-top:24px;border-top:1px solid var(--line-2);
  display:flex;flex-wrap:wrap;gap:20px;align-items:center;justify-content:space-between;
}
.results__consent{color:var(--paper-faint);margin:0;max-width:64ch;line-height:1.7}

/* ============================================================================
   10. SUITES  (full bleed, two halves that touch: one address, two floors)
   ========================================================================== */
.suites{background:var(--ink-2);padding:var(--sec-y) 0 0}
.suites__grid{display:grid;grid-template-columns:1fr 1fr;margin-top:54px}
.suite{
  position:relative;padding:56px clamp(24px,3.6vw,60px) 62px;
  background:var(--ink);border-top:3px solid var(--t);
}
.suite + .suite{border-left:1px solid var(--line-2);background:var(--panel)}
.suite__num{
  margin:0;font-family:var(--data);font-size:clamp(56px,7vw,96px);line-height:.9;
  color:transparent;-webkit-text-stroke:1.5px var(--t);letter-spacing:.02em;
}
.suite__name{margin:22px 0 0;font-size:clamp(26px,2.6vw,34px);font-weight:600;letter-spacing:-.022em}
.suite__kind{
  margin:8px 0 0;font-family:var(--data);font-size:11.5px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--paper-faint);
}
.suite__body{margin:20px 0 0;color:var(--paper-dim);font-size:16.5px;line-height:1.6;max-width:46ch}
.suite__list{
  margin:20px 0 0;padding:0;list-style:none;display:flex;flex-wrap:wrap;gap:8px;
}
.suite__foot{margin:26px 0 0;display:flex;flex-wrap:wrap;gap:16px 24px;align-items:center}
.suite__tel{
  font-family:var(--data);font-size:15px;letter-spacing:.08em;color:var(--accent);
  text-decoration:none;border-bottom:1px solid var(--line-accent);padding-bottom:3px;
}
.suite__tel:hover{border-bottom-color:var(--accent)}

/* ============================================================================
   11. SERVICES  (category cards with imagery hooks and suite serials)
   ========================================================================== */
.svc-group + .svc-group{margin-top:56px}
.svc-group__head{
  display:flex;flex-wrap:wrap;gap:10px 18px;align-items:baseline;
  margin:0 0 22px;padding-bottom:14px;border-bottom:1px solid var(--line);
}
.svc-group__head h3{margin:0;font-size:20px;font-weight:600;letter-spacing:-.015em}
.svc-group__head .mono{color:var(--accent)}
.svc-group__head .note{margin:0;font-size:14px;color:var(--paper-faint);margin-left:auto}

.svc-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.svc{
  display:flex;flex-direction:column;background:var(--ink-2);
  border:1px solid var(--line-2);border-top:2px solid var(--t);
  transition:border-color .25s ease,transform .25s ease;
}
.svc:hover{border-color:var(--line)}
/* Category art. The tone gradient is the floor; the generated atmosphere plate
   (assets/img/gen/cat-*.png) screens over it, so a missing file loses nothing. */
.svc__art{
  position:relative;height:152px;overflow:hidden;
  background-color:#0A1329;
  background-image:linear-gradient(125deg, color-mix(in srgb, var(--t) 58%, #0A1329) 0%, #0A1329 76%);
}
.svc__art::before{
  content:"";position:absolute;inset:0;
  background-image:var(--cat,none);
  background-size:var(--cat-size,cover);
  background-position:var(--cat-pos,50% 50%);
  background-repeat:no-repeat;
  filter:brightness(1.32) saturate(1.04);
  mix-blend-mode:screen;opacity:.95;
}
.svc__art::after{
  content:"";position:absolute;inset:0;
  background:
    repeating-linear-gradient(90deg, rgba(5,9,26,.10) 0 1px, rgba(5,9,26,0) 1px 17px),
    linear-gradient(180deg,transparent 52%,rgba(8,17,38,.9) 100%);
}
.svc__serial{
  position:absolute;left:14px;top:12px;z-index:2;
  font-family:var(--data);font-size:10.5px;letter-spacing:.18em;color:var(--paper);
  background:rgba(5,9,26,.72);padding:4px 8px;
}

/* category art sources. Declared here so the relative paths resolve against
   this stylesheet. Cards carry the modifier class plus their own crop vars. */
.svc--inject{--cat:url('../img/gen/cat-injectables.jpg')}
.svc--laser{--cat:url('../img/gen/cat-lasers.jpg')}
.svc--facial{--cat:url('../img/gen/cat-facials.jpg')}
.svc--wellness{--cat:url('../img/gen/cat-wellness.jpg')}
.svc--surgical{--cat:url('../img/gen/cat-surgical.jpg')}
.svc__body{padding:20px 20px 22px;display:flex;flex-direction:column;flex:1}
.svc__body h4{margin:0;font-size:19px;font-weight:600;letter-spacing:-.014em}
.svc__desc{margin:10px 0 0;color:var(--paper-dim);font-size:15px;line-height:1.55}
.svc__list{
  margin:14px 0 0;padding-top:14px;border-top:1px solid var(--line-2);
  font-family:var(--data);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--paper-faint);line-height:1.9;
}
.svc__more{margin-top:auto;padding-top:16px}

/* ============================================================================
   12. SKIN OF COLOR  (full bleed band, the differentiator)
   ========================================================================== */
.tone-band{background:var(--panel);position:relative;overflow:hidden;padding:var(--sec-y) 0}
.tone-band__art{
  position:absolute;inset:0;z-index:0;pointer-events:none;
  background-image:var(--img-silk);background-size:cover;background-position:center;
  opacity:.3;mix-blend-mode:screen;
}
.tone-band > .wrap{position:relative;z-index:1}
.tone-grid{display:grid;grid-template-columns:minmax(0,1.12fr) minmax(0,.88fr);gap:clamp(32px,5vw,72px);align-items:stretch}
.tone-list{list-style:none;margin:32px 0 34px;padding:0;display:grid;gap:0}
.tone-list li{
  display:grid;grid-template-columns:104px 1fr;gap:18px;align-items:start;
  padding:18px 0;border-top:1px solid var(--line-2);
  color:var(--paper-dim);font-size:16px;line-height:1.55;
}
.tone-list li:last-child{border-bottom:1px solid var(--line-2)}
.tone-list .mono{color:var(--accent);white-space:nowrap}
.tone-list b{display:block;color:var(--paper);font-weight:600;margin-bottom:5px;font-size:17px}

.tone-proof{
  display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--line-2);
  margin:0 0 30px;border:1px solid var(--line-2);
}
.tone-proof div{background:var(--panel);padding:18px 20px}
.tone-proof .n{
  display:block;font-family:var(--data);font-size:26px;color:var(--accent);letter-spacing:.02em;margin-bottom:8px;
}
.tone-proof p{margin:0;font-size:13.5px;color:var(--paper-faint);line-height:1.5}

.tone-art{display:flex;gap:6px;min-height:520px}
.tone-col{
  position:relative;flex:1;
  background:linear-gradient(180deg,var(--t) 0%, color-mix(in srgb, var(--t) 26%, #0B152E) 100%);
}
.tone-col__lab{
  position:absolute;left:50%;bottom:18px;transform:translateX(-50%) rotate(180deg);
  writing-mode:vertical-rl;
  font-family:var(--data);font-size:10.5px;letter-spacing:.22em;text-transform:uppercase;
  color:rgba(243,245,250,.78);white-space:nowrap;
}
.tone-col__fitz{
  position:absolute;left:50%;top:16px;transform:translateX(-50%);
  font-family:var(--data);font-size:9.5px;letter-spacing:.12em;
  color:#02040E;white-space:nowrap;
}
/* deeper columns need the label inverted to hold contrast */
.tone-col__fitz--light{color:rgba(243,245,250,.86)}

/* ---- the campaign band: full bleed generated atmosphere portraits.
        No named person, no patient claim. Atmosphere only. ---- */
.campaign{position:relative;background:var(--ink-2);overflow:hidden}
.campaign__grid{display:grid;grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);align-items:stretch}
.campaign__say{
  display:flex;flex-direction:column;justify-content:center;
  padding:clamp(44px,6vw,86px) clamp(20px,4vw,64px);
}
.campaign__say .mono{color:var(--accent);margin:0 0 18px}
.campaign__say h2{
  margin:0;font-size:clamp(2rem,4vw,3.4rem);font-weight:600;line-height:1.02;letter-spacing:-.026em;
  max-width:14ch;
}
.campaign__say h2 em{font-style:normal;color:var(--em)}
.campaign__sub{margin:22px 0 0;max-width:44ch;color:var(--paper-dim);font-size:16.5px;line-height:1.6}
/* the triptych runs light to deep, left to right, like the spectrum rule */
.campaign__figs{display:grid;grid-auto-flow:column;grid-auto-columns:1fr}
.campaign__fig{
  position:relative;margin:0;min-height:clamp(380px,40vw,560px);overflow:hidden;background:#060D20;
}
.campaign__fig img{width:100%;height:100%;object-fit:cover;object-position:50% 20%;position:absolute;inset:0}
.campaign__fig::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(8,17,38,.45) 0%,transparent 26%,rgba(8,17,38,.55) 100%);
}
.campaign__figs .campaign__fig:first-child::after{
  background:
    linear-gradient(90deg,rgba(8,17,38,1) 0%,rgba(8,17,38,0) 26%),
    linear-gradient(180deg,rgba(8,17,38,.45) 0%,transparent 26%,rgba(8,17,38,.55) 100%);
}
.campaign__cap{
  position:absolute;right:22px;bottom:18px;z-index:2;
  font-family:var(--data);font-size:9.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--paper-faint);
}

/* ---- real skin strip: documentary portraits, graded lightly so texture,
        pigment and age stay visible. This is the honest half of the story. ---- */
.tone-band .kicker{margin-bottom:18px}
.skinrow{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:12px;margin:0 0 14px}
.skinrow figure{margin:0;position:relative;overflow:hidden;border:1px solid var(--line-2);background:#0A1329}
.skinrow figure{height:clamp(230px,20vw,290px)}
.skinrow img{width:100%;height:100%;object-fit:cover;display:block;filter:contrast(1.02) saturate(1.02)}
.skinrow figcaption{
  position:absolute;left:10px;bottom:10px;z-index:2;
  font-family:var(--data);font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--paper);background:rgba(5,9,26,.74);padding:4px 8px;
}
.skinrow__note{
  margin:0 0 30px;font-family:var(--data);font-size:10.5px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--paper-faint);
}

/* ============================================================================
   13. THE PATH  (four numbered steps, a narrow contained band)
   ========================================================================== */
.path{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line-2);border:1px solid var(--line-2)}
.step{background:var(--ink);padding:26px 24px 30px}
.step__no{
  margin:0;font-family:var(--data);font-size:12px;letter-spacing:.2em;color:var(--accent);
}
.step h3{margin:14px 0 0;font-size:18px;font-weight:600;letter-spacing:-.012em}
.step p{margin:10px 0 0;font-size:14.5px;color:var(--paper-faint);line-height:1.55}

/* ============================================================================
   14. PEOPLE  (profile spreads + contributors row)
   ========================================================================== */
.profile{
  display:grid;grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr);
  gap:clamp(30px,4vw,56px);align-items:start;
  padding:52px 0;border-top:1px solid var(--line-2);
}
.profile--flip{grid-template-columns:minmax(0,1.18fr) minmax(0,.82fr)}
.profile--flip .profile__art{order:2}

.portrait{
  position:relative;isolation:isolate;overflow:hidden;
  background:linear-gradient(170deg,var(--t) 0%, #0A1329 88%);
  aspect-ratio:4/5;
}
.portrait img{
  width:100%;height:100%;object-fit:cover;object-position:50% 20%;
  filter:grayscale(1) contrast(1.14) brightness(.94);
  mix-blend-mode:luminosity;
}
.portrait::after{
  content:"";position:absolute;inset:0;z-index:2;pointer-events:none;
  background:linear-gradient(180deg,rgba(5,9,26,.10) 0%,transparent 34%,rgba(5,9,26,.86) 100%);
}
.portrait__tag{position:absolute;left:16px;bottom:16px;z-index:3;color:var(--paper)}
.profile__credit{
  margin:10px 0 0;display:flex;justify-content:space-between;gap:12px;
  font-family:var(--data);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--paper-faint);
}
.profile__credit a{color:var(--accent);text-decoration:none}

.profile__name{margin:0;font-size:clamp(1.9rem,3.1vw,2.7rem);font-weight:600;letter-spacing:-.024em;line-height:1.05}
.profile__post{display:block;margin-top:10px;font-family:var(--data);font-size:12px;letter-spacing:.2em;color:var(--accent)}
.profile__role{
  margin:16px 0 0;font-family:var(--data);font-size:11.5px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--paper-dim);
}
.profile__cols{margin:22px 0 0;columns:2;column-gap:34px}
.profile__cols p{margin:0 0 14px;color:var(--paper-dim);font-size:16px;line-height:1.62;break-inside:avoid}
/* the pull quote rides in the portrait rail, magazine style */
.pullquote{margin:24px 0 0;padding:22px 0 0;border-top:1px solid var(--line-accent)}
.pullquote p{
  margin:0;font-size:clamp(18px,1.5vw,21px);line-height:1.42;letter-spacing:-.016em;color:var(--paper);
}
.pullquote cite{
  display:block;margin-top:14px;font-style:normal;
  font-family:var(--data);font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--paper-faint);
}

.contributors{
  margin-top:8px;padding-top:38px;border-top:1px solid var(--line);
  display:grid;grid-template-columns:220px 1fr;gap:34px;
}
.contributors__lab{color:var(--accent);margin:6px 0 12px}
.contributors__note{margin:0;font-size:14px;color:var(--paper-faint);line-height:1.6;max-width:34ch}
.contrib-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.contrib{display:grid;grid-template-columns:78px 1fr;gap:16px;align-items:center}
.contrib .portrait{aspect-ratio:1/1}
.contrib .n{display:block;font-size:15.5px;font-weight:600;color:var(--paper)}
.contrib .r{
  display:block;margin-top:5px;font-family:var(--data);font-size:10.5px;letter-spacing:.13em;
  text-transform:uppercase;color:var(--paper-faint);line-height:1.6;
}
.contrib .h{display:block;margin-top:5px;font-family:var(--data);font-size:10.5px;letter-spacing:.13em;color:var(--accent)}

/* ============================================================================
   15. QUOTES
   ========================================================================== */
.quote-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.q{
  margin:0;padding:30px 26px 26px;background:var(--ink);
  border:1px solid var(--line-2);border-left:3px solid var(--t);
  display:flex;flex-direction:column;justify-content:space-between;
}
.q--wide{grid-column:span 2}
.q blockquote{margin:0;font-size:19px;line-height:1.48;letter-spacing:-.012em;color:var(--paper)}
.q--wide blockquote{font-size:24px}
.q figcaption{
  margin-top:22px;font-family:var(--data);font-size:11.5px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--paper-faint);
}
.q figcaption .src{color:var(--accent)}

/* ============================================================================
   16. BOOK + FORMS
   ========================================================================== */
.book{background:var(--ink);padding-bottom:112px}
.book__grid{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:clamp(34px,5vw,64px);align-items:start}
.book__alt{margin:22px 0 0;color:var(--paper-faint);font-size:15px;line-height:1.7}
.book__alt a{color:var(--accent);text-decoration:none;border-bottom:1px solid var(--line-accent)}
.finance{
  margin:28px 0 0;padding:18px 20px;border:1px solid var(--line-2);background:var(--ink-2);
}
.finance p{margin:8px 0 0;font-size:14.5px;color:var(--paper-dim);line-height:1.6}
.finance .mono{color:var(--accent)}

.form{background:var(--ink-2);border:1px solid var(--line-2);border-top:3px solid var(--t4);padding:32px 30px 34px}
.form__lab{color:var(--accent);margin:0 0 24px}
.field{margin-bottom:20px}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.field label{
  display:block;font-family:var(--data);font-size:11px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--paper-faint);margin-bottom:9px;
}
.field input,.field select,.field textarea{
  width:100%;font-family:var(--voice);font-size:16px;color:var(--paper);
  background:transparent;border:0;border-bottom:1px solid var(--line);
  padding:11px 0;border-radius:0;outline:none;
}
.field textarea{resize:vertical;line-height:1.5}
.field select{
  appearance:none;-webkit-appearance:none;
  background-image:linear-gradient(45deg,transparent 50%,var(--accent) 50%),
                   linear-gradient(135deg,var(--accent) 50%,transparent 50%);
  background-position:calc(100% - 11px) 20px, calc(100% - 6px) 20px;
  background-size:5px 5px,5px 5px;background-repeat:no-repeat;
}
.field select option{background:var(--ink-3);color:var(--paper)}
.field input::placeholder,.field textarea::placeholder{color:#707E9E}
.field input:focus,.field select:focus,.field textarea:focus{border-bottom-color:var(--accent)}
.form__note{margin:18px 0 0;font-size:13.5px;color:var(--paper-faint);line-height:1.55}

/* ============================================================================
   17. FOOTER
   ========================================================================== */
.foot{background:var(--ink-2);padding-bottom:38px}
.foot .wrap{padding-top:64px}
.foot__top{display:grid;grid-template-columns:1.45fr 1fr 1.15fr 1fr .9fr;gap:34px;padding-bottom:52px}
.foot__word{margin:0;font-size:29px;font-weight:800;line-height:1.02;letter-spacing:.01em}
.foot__tag{color:var(--paper-faint);margin:18px 0 0;line-height:1.9}
.foot__h{color:var(--accent);margin:0 0 16px}
.foot__col p{margin:0 0 9px;font-size:15px;color:var(--paper-dim)}
.foot__col a{text-decoration:none;color:var(--paper-dim);border-bottom:1px solid transparent}
.foot__col a:hover{color:var(--accent);border-bottom-color:var(--accent)}
.foot__dim{color:var(--paper-faint) !important;font-size:13.5px !important}
.foot__nav{list-style:none;margin:0;padding:0}
.foot__nav li{margin:0 0 9px}
.hours{list-style:none;margin:0;padding:0}
.hours li{
  display:flex;justify-content:space-between;gap:14px;
  font-family:var(--data);font-size:11.5px;letter-spacing:.06em;
  color:var(--paper-dim);padding:6px 0;border-bottom:1px solid var(--line-2);text-transform:uppercase;
}
.hours .off{color:var(--paper-faint)}
.foot__band{display:flex;height:14px}
.foot__band span{flex:1;display:block}
.foot__legal{
  display:flex;flex-wrap:wrap;gap:18px;justify-content:space-between;align-items:center;
  padding-top:22px;color:var(--paper-faint);
}
.foot__legal p{margin:0}
.foot__book{color:var(--accent);text-decoration:none;border-bottom:1px solid var(--line-accent);padding-bottom:3px}

/* ============================================================================
   18. INTERIOR PAGE HELPERS  (for practice / services / results / skin of
       color / contact. Home does not use these.)
   ========================================================================== */
.page-head{position:relative;overflow:hidden;padding:70px 0 56px;background:var(--ink);border-bottom:1px solid var(--line-2)}
.page-head__bg{
  position:absolute;inset:0;z-index:0;pointer-events:none;
  background:radial-gradient(52% 60% at 82% 6%, rgba(239,164,151,.13), transparent 70%),
             radial-gradient(44% 44% at 4% 90%, rgba(30,60,124,.34), transparent 72%);
}
.page-head .wrap{position:relative;z-index:1}
.page-head h1{
  margin:0;font-weight:800;font-size:clamp(2rem,4.5vw,3.7rem);line-height:.98;
  letter-spacing:-.01em;text-transform:uppercase;
}
.crumbs{
  margin:0 0 18px;font-family:var(--data);font-size:11px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--paper-faint);
}
.crumbs a{color:var(--accent);text-decoration:none}

/* long form copy on interior pages */
.rich{max-width:68ch}
.rich p{margin:0 0 18px;color:var(--paper-dim);font-size:17px;line-height:1.68}
.rich h3{margin:34px 0 12px;font-size:22px;font-weight:600;letter-spacing:-.015em;color:var(--paper)}
.rich ul{margin:0 0 20px;padding-left:0;list-style:none}
.rich li{
  position:relative;padding-left:22px;margin:0 0 10px;color:var(--paper-dim);font-size:16.5px;line-height:1.6;
}
.rich li::before{content:"";position:absolute;left:0;top:11px;width:8px;height:1px;background:var(--accent)}
.rich a{color:var(--accent)}

/* a generic bordered card for interior grids */
.card{background:var(--ink-2);border:1px solid var(--line-2);border-top:2px solid var(--t,var(--accent));padding:26px 24px 28px}
.card h3{margin:0;font-size:20px;font-weight:600;letter-spacing:-.015em}
.card p{margin:12px 0 0;color:var(--paper-dim);font-size:15.5px;line-height:1.58}

/* closing CTA band, repeated at the foot of every interior page */
.cta-band{background:var(--ink-3);border-top:1px solid var(--line-2);border-bottom:1px solid var(--line-2);padding:64px 0}
.cta-band__in{display:flex;flex-wrap:wrap;gap:26px;align-items:center;justify-content:space-between}
.cta-band h2{margin:0;font-size:clamp(1.6rem,2.8vw,2.4rem);font-weight:600;letter-spacing:-.02em;max-width:22ch}

/* ============================================================================
   19. MOTION  (subtle only, and never a barrier to reading)
   ----------------------------------------------------------------------------
   THE ONE RULE THIS FILE OBEYS: the hidden state is applied by site.js, never
   by CSS on its own. `.is-armed` only ever lands on an element because the
   script put it there, so if site.js 404s, throws, or is blocked, nothing is
   hidden and the page reads exactly as it does with no JavaScript at all.
   (The old form was `.js .reveal{opacity:0}`, which hid content the moment the
   inline head script ran, and needed a 1.6s blanket timer to undo itself.)

   --m is the master motion switch, read by every armed state here and in
   section 27. 1 = armed, 0 = show everything. site.js flips it to 0 on
   html.ca-settled for a renderer that never scrolls, and back to 1 the moment
   a real visitor touches the page. Full inventory: section 27.
   ========================================================================== */
:root{--m:1}
html.ca-settled{--m:0}

.reveal.is-armed{opacity:calc(1 - var(--m));transform:translateY(calc(14px * var(--m)))}
.reveal.is-in{opacity:1;transform:none;transition:opacity .6s ease,transform .6s ease}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .strip__track{animation:none}
  :root{--m:0}
  .reveal,.reveal.is-armed{opacity:1;transform:none;transition:none}
  .lrow__bar,.btn,.svc{transition:none}
}

/* ============================================================================
   20. RESPONSIVE
   ========================================================================== */
@media (max-width:1180px){
  .plates{grid-template-columns:repeat(2,1fr)}
  .svc-grid{grid-template-columns:repeat(2,1fr)}
  .contrib-grid{grid-template-columns:repeat(2,1fr)}
}

@media (max-width:1040px){
  .campaign__grid{grid-template-columns:1fr}
  .campaign__fig{min-height:clamp(230px,46vw,330px)}
  .campaign__cap{display:none}
  .skinrow{grid-template-columns:repeat(2,1fr)}
  .nav__links{display:none}
  .nav__cta{display:none}
  .nav__toggle{display:inline-flex}
  .theme-tog{margin-left:auto}   /* group with the hamburger on the right */
  .hero__in{grid-template-columns:1fr;gap:44px}
  .ladder{border-left:0;border-top:1px solid var(--line-2);padding-left:0;padding-top:26px}
  .quote-grid{grid-template-columns:repeat(2,1fr)}
  .q--wide{grid-column:span 2}
  .tone-grid{grid-template-columns:1fr;gap:40px}
  .tone-art{min-height:260px}
  .path{grid-template-columns:repeat(2,1fr)}
  .profile{grid-template-columns:1fr;gap:26px}
  .profile--flip .profile__art{order:0}
  .profile__cols{columns:1}
  .contributors{grid-template-columns:1fr;gap:22px}
  .book__grid{grid-template-columns:1fr;gap:44px}
  .foot__top{grid-template-columns:1fr 1fr 1fr;gap:38px 30px}
  .cta-band__in{flex-direction:column;align-items:flex-start}
}

@media (max-width:780px){
  :root{--gut:20px;--sec-y:56px;--navh:68px}
  body{font-size:16px}
  .nav__in{padding:12px var(--gut);gap:14px}
  .brand__word{font-size:15px;letter-spacing:.16em}
  .theme-tog{width:36px;height:44px;border-color:transparent}
  .nav__panel{padding-top:22px}
  .nav__panel li > a{font-size:clamp(1.9rem,9vw,2.5rem);padding:13px 0}

  .hero{padding:48px 0 50px}
  .h1{font-size:clamp(2.7rem,13.4vw,4.4rem)}
  .outline{-webkit-text-stroke-width:1.6px}
  .hero__sub{font-size:16.5px;margin-top:24px}
  .hero__cta{gap:14px}
  .hero__cta .btn{flex:1 1 100%}
  .voiceline{grid-template-columns:46px 1fr;gap:14px;margin-top:32px}
  .voiceline__mark{width:46px;height:46px}
  .voiceline p{font-size:17px}
  .hero__facts{grid-template-columns:1fr;gap:16px;margin-top:36px}
  .hero__facts .num{font-size:19px;margin-bottom:4px}

  /* the ladder turns into a horizontal spectrum band */
  .ladder__rows{flex-direction:row;gap:4px;align-items:stretch}
  .lrow{flex:1;flex-direction:column;gap:8px;align-items:stretch;min-width:0}
  .lrow__bar{height:70px;flex:none;width:100%}
  .lrow__name{display:none}
  .lrow__num{text-align:center;font-size:10px}

  .sec__head{margin-bottom:34px}
  .h2{font-size:clamp(1.9rem,8vw,2.55rem);line-height:1.06}
  .lede{font-size:16px}
  .divider{height:46px}
  .divider__label{font-size:9.5px;letter-spacing:.16em;padding:0 12px;max-width:92vw;overflow:hidden;text-overflow:ellipsis}

  .results__bar{gap:14px}
  .chip{font-size:10.5px;padding:9px 11px;gap:7px}
  .chip__fitz{display:none}
  .plates{grid-template-columns:1fr;gap:14px}
  .plate__frame{aspect-ratio:4/3}
  .plate__meta{padding:16px 16px 18px}
  .results__foot .btn{width:100%}

  .suites{padding-top:var(--sec-y)}
  .suites__grid{grid-template-columns:1fr;margin-top:34px}
  .suite{padding:34px 20px 40px}
  .suite + .suite{border-left:0;border-top:3px solid var(--t)}

  .svc-grid{grid-template-columns:1fr;gap:14px}
  .svc-group + .svc-group{margin-top:40px}
  .svc-group__head .note{margin-left:0;flex:1 1 100%}

  .tone-list li{grid-template-columns:1fr;gap:6px}
  .tone-proof{grid-template-columns:1fr}
  .tone-art{min-height:170px;gap:4px}
  .tone-col__lab{font-size:9.5px;letter-spacing:.14em;bottom:12px}
  .tone-col__fitz{display:none}

  .path{grid-template-columns:1fr}
  .profile{padding:32px 0}
  .portrait{aspect-ratio:1/1}
  .pullquote p{font-size:18px;max-width:none}
  .contrib-grid{grid-template-columns:1fr}

  .quote-grid{grid-template-columns:1fr}
  .q--wide{grid-column:span 1}
  .q blockquote,.q--wide blockquote{font-size:18px}

  .book{padding-bottom:64px}
  .form{padding:26px 20px 28px}
  .field-row{grid-template-columns:1fr;gap:0}
  .book__grid .btn{width:100%}

  .foot .wrap{padding-top:46px}
  .foot__top{grid-template-columns:1fr;gap:32px;padding-bottom:38px}
  .foot__word{font-size:30px}
  .foot__legal{flex-direction:column;align-items:flex-start;gap:12px}
}

/* ============================================================================
   21. PRACTICE PAGE  (practice.html only)
   ----------------------------------------------------------------------------
   Everything here is prefixed .prac- and is used on no other page. Built
   entirely on the tokens above. Three page specific ideas:
     a. the FLOOR SPINE, a single vertical spectrum rule running through both
        suites, because the argument of the page is that they are one practice
     b. the CREDENTIAL LEDGER, mono label against plain value, a document
     c. the TONE MONOGRAM, a dignified stand in where no consented portrait
        exists yet, so the team grid never shows a hole
   ========================================================================== */

/* --- page head art: the marble plate, quieter than the home hero --- */
.prac-head{padding-bottom:62px}
.prac-head__art{
  position:absolute;inset:0;z-index:0;pointer-events:none;
  background-image:var(--img-hero);background-size:cover;background-position:64% 28%;
  opacity:.22;mix-blend-mode:screen;
  -webkit-mask-image:linear-gradient(100deg,transparent 0,transparent 46%,#000 92%);
  mask-image:linear-gradient(100deg,transparent 0,transparent 46%,#000 92%);
}
.prac-head h1{max-width:16ch}
.prac-head .lede{margin-top:26px}
.prac-head__facts{
  list-style:none;margin:38px 0 0;padding:24px 0 0;border-top:1px solid var(--line-2);
  display:grid;grid-template-columns:repeat(3,1fr);gap:22px;
  font-size:15.5px;color:var(--paper);line-height:1.45;max-width:1000px;
}
.prac-head__facts .mono{display:block;color:var(--paper-faint);margin-bottom:8px}

/* --- a. the floor spine --- */
.prac-floors{position:relative;padding-left:34px}
.prac-floors::before{
  content:"";position:absolute;left:0;top:0;bottom:0;width:3px;
  background:linear-gradient(180deg,var(--t2) 0%,var(--t3) 32%,var(--t4) 58%,var(--t6) 100%);
}
.prac-floor{
  display:grid;grid-template-columns:216px minmax(0,1fr);gap:clamp(24px,4vw,54px);
  padding:40px 0;border-top:1px solid var(--line-2);position:relative;
}
.prac-floor:first-child{border-top:0;padding-top:8px}
/* the tick that ties each floor back to the spine */
.prac-floor::before{
  content:"";position:absolute;left:-34px;top:52px;width:26px;height:1px;background:var(--t);
}
.prac-floor:first-child::before{top:20px}
.prac-floor__no{
  margin:0;font-family:var(--data);font-size:clamp(64px,8.4vw,124px);line-height:.82;
  color:transparent;-webkit-text-stroke:1.5px var(--t);letter-spacing:.02em;
}
.prac-floor__lab{margin:16px 0 0;color:var(--accent)}
.prac-floor__body h3{margin:0 0 14px;font-size:clamp(22px,2.2vw,28px);font-weight:600;letter-spacing:-.02em}
.prac-floor__body > p{margin:0;color:var(--paper-dim);font-size:16.5px;line-height:1.66;max-width:62ch}
.prac-floors__note{
  margin:34px 0 0;padding-top:20px;border-top:1px solid var(--line-2);
  color:var(--paper-faint);font-size:15px;line-height:1.7;max-width:76ch;
}

/* --- the first person passages read a shade brighter than body copy --- */
.prac-voice{max-width:64ch;margin-top:22px}
.prac-voice p{color:var(--paper-dim);font-size:16.5px;line-height:1.7}
.prac-voice p:first-child{
  color:var(--paper);font-size:19px;line-height:1.52;letter-spacing:-.014em;
}

/* --- b. the credential ledger --- */
.prac-ledger{margin:32px 0 0;border-top:1px solid var(--line)}
.prac-ledger > div{
  display:grid;grid-template-columns:212px minmax(0,1fr);gap:20px;
  padding:13px 0;border-bottom:1px solid var(--line-2);align-items:baseline;
}
.prac-ledger dt{
  font-family:var(--data);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--paper-faint);
}
.prac-ledger dd{margin:0;font-size:15.5px;line-height:1.5;color:var(--paper)}

/* --- the German Aesthetics aside --- */
.prac-note{
  margin:30px 0 0;padding:22px 24px 24px;background:var(--ink-3);
  border:1px solid var(--line-2);border-left:3px solid var(--t3);max-width:64ch;
}
.prac-note .mono{color:var(--accent);margin:0 0 12px}
.prac-note p{margin:0 0 16px;color:var(--paper-dim);font-size:15.5px;line-height:1.6}

/* --- the two founder spreads sit flush to the band, the section owns the air --- */
.prac-spread{padding-bottom:0;border-top:0}

/* --- the team grid --- */
.prac-team{display:grid;grid-template-columns:repeat(4,1fr);gap:22px;align-items:stretch}
.prac-member{display:flex;flex-direction:column}
.prac-member .portrait{aspect-ratio:4/5}
.prac-member__n{margin:16px 0 0;font-size:18px;font-weight:600;letter-spacing:-.014em}
.prac-member__r{
  margin:8px 0 0;color:var(--paper-faint);line-height:1.7;
}
.prac-member__b{margin:12px 0 0;color:var(--paper-dim);font-size:14.5px;line-height:1.6}
.prac-member__h{
  margin:auto 0 0;padding:14px 0 0;border-top:1px solid var(--line-2);
  font-family:var(--data);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--paper-faint);
}
.prac-member__h a{color:var(--accent);text-decoration:none;border-bottom:1px solid var(--line-accent)}

/* --- c. the tone monogram, used where no consented portrait exists --- */
.prac-mono{
  aspect-ratio:4/5;position:relative;overflow:hidden;
  background:linear-gradient(170deg, color-mix(in srgb, var(--t) 62%, #0A1329) 0%, #081126 88%);
  display:flex;align-items:center;justify-content:center;
}
.prac-mono span{
  font-family:var(--data);font-size:clamp(44px,4vw,62px);letter-spacing:.06em;
  color:transparent;-webkit-text-stroke:1.5px rgba(243,245,250,.5);
}
.prac-mono::after{
  content:"";position:absolute;inset:0;
  background:repeating-linear-gradient(90deg, rgba(5,9,26,.14) 0 1px, rgba(5,9,26,0) 1px 15px);
}

/* --- the roll call of everyone else --- */
.prac-roll{margin-top:48px;padding-top:34px;border-top:1px solid var(--line)}
.prac-roll__lab{color:var(--accent);margin:0 0 20px}
.prac-roll ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line-2);border:1px solid var(--line-2)}
.prac-roll li{background:var(--ink);padding:18px 20px;border-left:2px solid var(--t)}
.prac-roll .n{display:block;font-size:16px;font-weight:600;color:var(--paper)}
.prac-roll .r{
  display:block;margin-top:6px;font-family:var(--data);font-size:10.5px;letter-spacing:.13em;
  text-transform:uppercase;color:var(--paper-faint);line-height:1.6;
}

/* --- the standards cards --- */
.prac-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.prac-cards .card{background:var(--ink-2)}
.prac-cards__no{margin:0 0 14px;color:var(--accent)}

/* --- the affiliation band. The AAPS mark is blue on transparent, so it sits
       on a paper plate to hold contrast rather than being tinted. --- */
.prac-badge{display:grid;grid-template-columns:340px minmax(0,1fr);gap:clamp(28px,4vw,56px);align-items:start}
.prac-badge__plate{
  background:var(--paper);border:1px solid var(--line-2);padding:30px 32px;
  display:flex;align-items:center;justify-content:center;
}
.prac-badge__plate img{width:100%;max-width:276px;height:auto}
.prac-badge__h{font-size:clamp(1.6rem,2.6vw,2.2rem);margin-bottom:18px}
.prac-badge__say > p{margin:0 0 18px;color:var(--paper-dim);font-size:16.5px;line-height:1.66;max-width:70ch}
.prac-badge__chips{list-style:none;margin:22px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:8px}

/* --- responsive --- */
@media (max-width:1180px){
  .prac-team{grid-template-columns:repeat(2,1fr)}
  .prac-cards{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:1040px){
  .prac-head__facts{grid-template-columns:1fr;gap:16px}
  .prac-floor{grid-template-columns:1fr;gap:18px;padding:32px 0}
  .prac-floor__lab{margin-top:10px}
  .prac-badge{grid-template-columns:1fr;gap:30px}
  .prac-badge__plate{max-width:340px}
  .prac-roll ul{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:780px){
  .prac-head{padding-bottom:44px}
  .prac-head h1{max-width:none}
  .prac-floors{padding-left:22px}
  .prac-floor::before{left:-22px;width:16px}
  .prac-floor__no{font-size:clamp(56px,17vw,84px)}
  .prac-voice p:first-child{font-size:17.5px}
  .prac-ledger > div{grid-template-columns:1fr;gap:6px;padding:14px 0}
  .prac-team{grid-template-columns:1fr;gap:30px}
  .prac-member .portrait,.prac-mono{aspect-ratio:1/1}
  .prac-cards{grid-template-columns:1fr}
  .prac-roll ul{grid-template-columns:1fr}
  .prac-badge__plate{padding:22px 24px}
}

/* ============================================================================
   22. SERVICE MENU PAGE  (services.html only)
   ----------------------------------------------------------------------------
   The menu is the longest page on the site, so it needs three things the
   home page never needed: a jumpable category index, a category banner that
   reuses the existing .svc__art art hooks at a wider crop, and a dense two
   column treatment list that still reads as a menu rather than a spreadsheet.
   Everything below is built on the tokens above. No new hexes, no new fonts.
   NOTE: position:sticky is unusable site wide because html and body carry
   overflow-x:hidden, so the index is a jump band, not a sticky rail.
   ========================================================================== */

/* --- page head: copy on the left, the two suite rail on the right ------- */
.svc-headgrid{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:clamp(32px,4vw,64px);align-items:start}
.suite-rail{border-left:1px solid var(--line-2);padding-left:24px}
.suite-rail__lab{margin:0 0 16px;color:var(--paper-faint)}
.suite-rail__item{
  display:block;text-decoration:none;padding:18px 0 20px;
  border-top:2px solid var(--t);
}
.suite-rail__item + .suite-rail__item{margin-top:8px}
.suite-rail__no{
  display:block;font-family:var(--data);font-size:40px;line-height:.9;letter-spacing:.02em;
  color:transparent;-webkit-text-stroke:1px var(--t);
}
.suite-rail__item b{display:block;margin-top:12px;font-size:17px;font-weight:600;letter-spacing:-.012em;color:var(--paper)}
.suite-rail__body{display:block;margin-top:8px;font-size:14px;line-height:1.55;color:var(--paper-dim)}
.suite-rail__ser{display:block;margin-top:12px;color:var(--paper-faint);font-size:10px;letter-spacing:.14em}
.suite-rail__item:hover b{color:var(--accent)}
.suite-rail__foot{margin:20px 0 0;padding-top:14px;border-top:1px solid var(--line-2);color:var(--paper-faint)}

/* --- page head stat row ------------------------------------------------- */
.svc-stats{
  list-style:none;margin:40px 0 0;padding:26px 0 0;border-top:1px solid var(--line-2);
  display:grid;grid-template-columns:repeat(3,1fr);gap:26px;
  font-size:14px;color:var(--paper-faint);line-height:1.45;max-width:900px;
}
.svc-stats p{margin:0}
.svc-stats .num{
  display:block;font-family:var(--data);font-size:22px;letter-spacing:.02em;
  color:var(--paper);margin-bottom:8px;
}

/* --- the category index ------------------------------------------------- */
.svc-index{background:var(--ink-2);border-bottom:1px solid var(--line-2);padding:30px 0 34px}
.svc-index__lab{margin:0 0 16px;color:var(--accent)}
.svc-jump{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line-2);border:1px solid var(--line-2)}
.svc-jump a{
  display:block;background:var(--ink);padding:16px 18px 18px;text-decoration:none;
  border-top:2px solid var(--t,var(--accent));transition:background .2s ease;
}
.svc-jump a:hover{background:var(--ink-3)}
.svc-jump b{display:block;font-size:16px;font-weight:600;letter-spacing:-.012em;color:var(--paper)}
.svc-jump .mono{display:block;margin-top:8px;color:var(--paper-faint);font-size:10.5px;letter-spacing:.13em}

/* --- suite headings ----------------------------------------------------- */
.svc-suitehead{max-width:900px;margin:0 0 12px}
.svc-suitehead__no{margin:0 0 18px;color:var(--accent)}

/* --- one category ------------------------------------------------------- */
.svccat{padding:52px 0 0;scroll-margin-top:24px}
.svccat--first{padding-top:34px}
.svccat__head{display:grid;grid-template-columns:320px minmax(0,1fr);gap:32px;margin:0 0 6px}
.svccat__art{height:auto;min-height:200px}
.svccat__say{display:flex;flex-direction:column;justify-content:center}
.svccat__name{margin:0;font-size:clamp(1.45rem,2.3vw,1.95rem);font-weight:600;letter-spacing:-.022em;line-height:1.08}
.svccat__lede{margin:16px 0 0;color:var(--paper-dim);font-size:16px;line-height:1.6;max-width:64ch}
.svccat__meta{margin:16px 0 0;color:var(--paper-faint);line-height:1.9}
.svccat__back{margin:18px 0 0;text-align:right}
.svccat__back a{color:var(--paper-faint);text-decoration:none;border-bottom:1px solid var(--line-2);padding-bottom:3px}
.svccat__back a:hover{color:var(--accent);border-bottom-color:var(--line-accent)}

/* --- the treatment list ------------------------------------------------- */
.svclist{
  list-style:none;margin:26px 0 0;padding:0;
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:46px;
  border-top:1px solid var(--line);
}
.svclist__item{
  display:grid;grid-template-columns:98px minmax(0,1fr);gap:16px;
  padding:19px 0 20px;border-bottom:1px solid var(--line-2);
}
.svclist__serial{margin:2px 0 0;color:var(--accent);font-size:10.5px;letter-spacing:.13em}
.svclist__name{margin:0;font-size:17.5px;font-weight:600;letter-spacing:-.014em;line-height:1.2}
.svclist__desc{margin:9px 0 0;color:var(--paper-dim);font-size:15px;line-height:1.55}
.svclist__subs{
  margin:11px 0 0;color:var(--paper-faint);font-size:10px;letter-spacing:.12em;line-height:1.85;
}

/* --- surgical support cards + membership grid --------------------------- */
.svc-notes{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin:44px 0 0}
.path--4{list-style:none;margin:22px 0 0;padding:0}
.svc-mem{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.svc-memrules{margin:34px 0 0;padding:28px 0 0;border-top:1px solid var(--line)}
.svc-memrules__lab{margin:0 0 16px;color:var(--accent)}
.svc-memrules .rich{max-width:82ch}
.svc-memrules .rich li{margin-bottom:12px}

/* --- closing band ------------------------------------------------------- */
.cta-band__act{display:flex;flex-direction:column;gap:16px;align-items:flex-start;flex:none}
.cta-band__tel{margin:0;color:var(--paper-faint);line-height:1.9}
.cta-band__tel a{color:var(--accent);text-decoration:none;border-bottom:1px solid var(--line-accent);padding-bottom:2px}

/* the closing band on this page carries a headline and a lede, so the
   heading needs display leading rather than the inherited body leading */
.cta-band--menu h2{line-height:1.06;max-width:24ch}
.cta-band--menu .lede{font-size:16.5px}

/* --- responsive --------------------------------------------------------- */
@media (max-width:1180px){
  .svc-headgrid{grid-template-columns:minmax(0,1fr) 280px}
  .svc-jump{grid-template-columns:repeat(2,1fr)}
  .svc-notes{grid-template-columns:1fr 1fr}
  .svc-mem{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:1040px){
  .svc-headgrid{grid-template-columns:1fr;gap:38px}
  .suite-rail{border-left:0;border-top:1px solid var(--line-2);padding-left:0;padding-top:24px;
    display:grid;grid-template-columns:1fr 1fr;gap:0 26px;align-items:start}
  .suite-rail__lab{grid-column:1 / -1}
  .suite-rail__item + .suite-rail__item{margin-top:0}
  .suite-rail__foot{grid-column:1 / -1}
  .svclist{grid-template-columns:minmax(0,1fr);column-gap:0}
  .svccat__head{grid-template-columns:1fr;gap:22px}
  .svccat__art{min-height:170px}
  .svc-stats{grid-template-columns:1fr;gap:18px}
}
@media (max-width:780px){
  .suite-rail{grid-template-columns:1fr}
  .suite-rail__item + .suite-rail__item{margin-top:10px}
  .svc-index{padding:24px 0 26px}
  .svc-jump{grid-template-columns:1fr}
  .svc-jump a{padding:14px 16px 16px}
  .svccat{padding-top:40px}
  .svccat__back{text-align:left}
  .svclist__item{grid-template-columns:1fr;gap:0}
  .svclist__serial{margin:0 0 8px}
  .svc-notes{grid-template-columns:1fr}
  .svc-mem{grid-template-columns:1fr}
  .cta-band__act{width:100%}
  .cta-band__act .btn{width:100%}
}

/* ============================================================================
   23. IMAGE BAND VOCABULARY  (shared, adopt on every page)
   ----------------------------------------------------------------------------
   The site is image led. The rule for every band below: at any scroll
   position, a large image or oversized display type owns the viewport.
   Thumbnails and background tints do not count as imagery.

   THE COMPONENTS, and what each one is for:

     .band-img        one full bleed image band with copy over it.
                      Height via --band-h (default 78vh, min 520px).
                      Crop via --band-pos. Source via --band-src.
     .band-img__say   the copy well inside a band. Always sits over a scrim.
     .scrim           the legibility layer. Modifiers: --up (copy at bottom),
                      --left (copy at left), --plate (heavy, for dense copy).
                      Never place text over an image without one.
     .triptych        2 to 4 full height image panels that touch, with one
                      headline laid across the whole run. --tri-h sets height.
     .strip-img       an edge to edge row of image cells, no gaps, captions
                      bottom left. --strip-h sets height, --strip-cells count.
     .tile-grid       the big image tile mosaic (services). Tiles are large,
                      never thumbnails: --tile-h floors every cell.
     .tile-img        one mosaic tile. Carries ONLY name, serial, short line.
     .figure-duo      two oversized portrait panels side by side (real people).
     .plates--teaser  the results plates at teaser scale: two big plates, not
                      a six up grid. Reuses every .plate__* rule above.
     .display         the oversized editorial headline used inside image bands.
                      --display-max sets the ceiling. .display--xl for heroes.
     .tone-bar        the Spectrum signature as a full bleed six segment band.
     .meta-row        one sparse mono line of data chips under a display line.

   HOUSE RULES for interior pages adopting these:
     1. Every band of copy must be preceded or followed by an image band.
     2. Max two short paragraphs per band. Detail lives in .rich further down.
     3. Any text over imagery needs a .scrim. Paper on scrimmed ink clears AA.
     4. Illustrative imagery (ba-*) always carries its chip plus a band note.
   ========================================================================== */

/* --- shared media layer ------------------------------------------------- */
.imgfill{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}

/* --- the legibility scrims ---------------------------------------------- */
.scrim{position:absolute;inset:0;z-index:1;pointer-events:none}
.scrim--up{
  background:linear-gradient(to top,
    rgba(4,7,20,.95) 0%, rgba(4,7,20,.86) 26%,
    rgba(4,7,20,.40) 62%, rgba(4,7,20,.30) 100%);
}
.scrim--left{
  background:
    linear-gradient(100deg, rgba(4,7,20,.96) 0%, rgba(4,7,20,.82) 38%,
      rgba(4,7,20,.34) 72%, rgba(4,7,20,.24) 100%),
    linear-gradient(to top, rgba(4,7,20,.72) 0%, transparent 34%);
}
.scrim--plate{background:rgba(4,7,20,.74)}
/* lighter than --up: for portraits, where the face must keep the frame */
.scrim--soft{
  background:linear-gradient(to top,
    rgba(4,7,20,.93) 0%, rgba(4,7,20,.70) 22%,
    rgba(4,7,20,.18) 52%, rgba(4,7,20,.30) 100%);
}
.scrim--edge{
  background:linear-gradient(to bottom, rgba(4,7,20,.62) 0%, transparent 22%,
    transparent 66%, rgba(4,7,20,.92) 100%);
}

/* --- .band-img: the workhorse full bleed band --------------------------- */
.band-img{
  position:relative;isolation:isolate;overflow:hidden;
  min-height:var(--band-h,78vh);
  display:flex;align-items:var(--band-al,flex-end);
  background:var(--ink);
}
.band-img--short{--band-h:58vh}
.band-img--tall{--band-h:92vh}
.band-img__media{
  position:absolute;inset:0;z-index:0;
  background-image:var(--band-src);
  background-size:cover;
  /* --band-pos-m lets a band re-aim its focal point for the portrait crop a
     phone gives it. Falls back to the desktop position when unset. */
  background-position:var(--band-pos,50% 50%);
}
.band-img__say{position:relative;z-index:2;width:100%;padding:clamp(40px,6vw,88px) 0}
.band-img__say .wrap{width:100%}

/* --- .display: the oversized editorial headline ------------------------- */
.display{
  margin:0;font-weight:600;text-transform:uppercase;
  font-size:clamp(2rem,var(--display-vw,6vw),var(--display-max,5rem));
  line-height:1.02;letter-spacing:-.014em;
  max-width:var(--display-w,17ch);
}
.display--xl{--display-vw:8.4vw;--display-max:7rem}
.display em{font-style:normal;color:var(--em)}
.display em.accent{color:var(--accent)}
.display .outline{display:inline-block}

/* one short line under a display headline. Never more than 35 words. */
.band-lede{
  margin:22px 0 0;max-width:46ch;color:var(--paper);
  font-size:clamp(16.5px,1.3vw,19px);line-height:1.5;
}
.band-note{
  margin:16px 0 0;font-family:var(--data);font-size:10px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--paper-dim);line-height:1.8;max-width:70ch;
}
.meta-row{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 22px;padding:0;list-style:none}

/* --- .tone-bar: the Spectrum signature, full bleed ---------------------- */
.tone-bar{display:flex;width:100%;position:relative;z-index:3}
.tone-bar span{
  flex:1;display:flex;align-items:flex-end;justify-content:center;
  height:var(--bar-h,58px);padding-bottom:9px;
  font-family:var(--data);font-size:10px;letter-spacing:.2em;
  color:#02040E;
}
.tone-bar span.on-dark{color:rgba(243,245,250,.86)}

/* --- .triptych: full height panels that touch --------------------------- */
.triptych{position:relative;background:var(--ink);isolation:isolate}
.triptych__run{display:grid;grid-auto-flow:column;grid-auto-columns:1fr}
.triptych__panel{
  position:relative;margin:0;overflow:hidden;
  min-height:var(--tri-h,82vh);background:#060D20;
}
.triptych__panel img{position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;object-position:var(--tri-pos,50% 20%)}
.triptych__panel + .triptych__panel::before{
  content:"";position:absolute;left:0;top:0;bottom:0;width:1px;z-index:3;
  background:rgba(4,7,20,.5);
}
.triptych__over{
  position:absolute;left:0;right:0;bottom:0;z-index:4;
  padding:clamp(32px,5vw,72px) 0 clamp(26px,3.5vw,44px);
  background:linear-gradient(to top, rgba(4,7,20,.95) 0%, rgba(4,7,20,.82) 40%, transparent 100%);
}
.triptych__cap{
  position:absolute;right:18px;top:18px;z-index:5;
  font-family:var(--data);font-size:9.5px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--paper);background:rgba(4,7,20,.76);padding:5px 9px;
}

/* --- .strip-img: an edge to edge row of image cells ---------------------- */
.strip-img{
  display:grid;grid-template-columns:repeat(var(--strip-cells,4),1fr);
  background:var(--ink);
}
.strip-img figure{
  position:relative;margin:0;overflow:hidden;
  min-height:var(--strip-h,66vh);background:#0A1329;
}
.strip-img img{position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;object-position:var(--cell-pos,50% 22%);
  filter:contrast(1.03) saturate(1.02)}
.strip-img figcaption{
  position:absolute;left:16px;bottom:16px;z-index:2;
  font-family:var(--data);font-size:10px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--paper);background:rgba(4,7,20,.8);padding:6px 10px;
}

/* --- .tile-grid: the big services mosaic --------------------------------
   GOTCHA, learned the hard way: a url() written inside a custom property is
   resolved against the stylesheet that SUBSTITUTES it, not the document that
   declares it. Setting --tile-src inline on the element resolves to
   assets/css/assets/img/... and silently 404s to a black tile. Category art
   sources therefore live HERE, as classes, exactly like .svc--* above. */
.tile-grid{
  display:grid;grid-template-columns:repeat(6,1fr);gap:10px;
}
.tile-img{
  position:relative;overflow:hidden;grid-column:span var(--span,2);
  min-height:var(--tile-h,44vh);
  /* the category plates are near-black source art: they need a tone floor to
     screen against, or the tile renders as a black hole. */
  background:linear-gradient(142deg, color-mix(in srgb, var(--t) 52%, #081126) 0%, #060D20 76%);
  border-top:2px solid var(--t,var(--accent));text-decoration:none;color:inherit;
  display:block;
}
/* category art sources: paths are relative to THIS file */
/* Real in-clinic procedure covers (the CA+LC 2026 shoot; client-owned). */
.tile-img--inject{--tile-src:url('../img/staff/proc-injectables.jpg')}
.tile-img--laser{--tile-src:url('../img/staff/proc-lasers.jpg')}
.tile-img--facial{--tile-src:url('../img/staff/proc-facials.jpg')}
.tile-img--surgical{--tile-src:url('../img/staff/proc-body.jpg')}
.tile-img--wellness{--tile-src:url('../img/staff/proc-wellness.jpg')}

.tile-img__media{
  display:block;position:absolute;inset:0;z-index:0;
  background-image:var(--tile-src);
  background-size:cover;background-position:var(--tile-pos,50% 50%);
  filter:brightness(1.55) saturate(1.06) contrast(1.06);
  mix-blend-mode:screen;
  transition:transform .5s ease;
}
.tile-img:hover .tile-img__media{transform:scale(1.035)}
.tile-img__say{
  display:block;position:absolute;left:0;right:0;bottom:0;z-index:2;
  padding:clamp(20px,2.4vw,32px);
}
.tile-img__ser{
  display:block;font-family:var(--data);font-size:10px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--accent);margin:0 0 10px;
}
.tile-img__n{
  display:block;margin:0;font-size:clamp(1.25rem,2.1vw,1.9rem);font-weight:600;
  letter-spacing:-.02em;line-height:1.05;color:var(--paper);
}
.tile-img__l{
  display:block;margin:9px 0 0;font-size:14.5px;line-height:1.4;color:var(--paper-dim);max-width:26ch;
}

/* --- .plates--teaser: the gallery at teaser scale ----------------------- */
.plates--teaser{grid-template-columns:repeat(2,1fr);gap:14px}
.plates--teaser .plate{background:transparent;border-color:var(--line-2)}
.plates--teaser .plate__frame{aspect-ratio:16/11}
.plates--teaser .plate__no{font-size:64px}
.plates--teaser .plate__meta{padding:16px 18px 20px}

/* --- .figure-duo: two oversized real portraits -------------------------- */
.figure-duo{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.figure-duo__fig{
  position:relative;margin:0;overflow:hidden;
  min-height:var(--duo-h,80vh);background:#0A1329;
}
.figure-duo__fig img{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;object-position:var(--duo-pos,50% 18%);
  filter:grayscale(.15) contrast(1.06);
}
.figure-duo__say{
  position:absolute;left:0;right:0;bottom:0;z-index:2;padding:clamp(24px,2.6vw,38px);
}
.figure-duo__n{
  margin:0;font-size:clamp(1.6rem,2.6vw,2.3rem);font-weight:600;
  letter-spacing:-.024em;line-height:1.04;
}
.figure-duo__r{
  margin:10px 0 0;font-family:var(--data);font-size:10.5px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--accent);
}
.figure-duo__q{
  margin:16px 0 0;padding-top:16px;border-top:1px solid var(--line-accent);
  font-size:16.5px;line-height:1.45;color:var(--paper);max-width:38ch;
}
.figure-duo__q cite{
  display:block;margin-top:10px;font-style:normal;font-family:var(--data);
  font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--paper-dim);
}

/* --- a split image band: giant numeral half plus image half ------------- */
.duo-band{display:grid;grid-template-columns:1fr 1fr;background:var(--ink)}
.duo-band__half{
  position:relative;overflow:hidden;padding:clamp(38px,4.6vw,74px);
  min-height:var(--duo-band-h,62vh);display:flex;flex-direction:column;justify-content:flex-end;
  border-top:3px solid var(--t);
}
.duo-band__art{
  position:absolute;inset:0;z-index:0;
  background-image:var(--img-grain);background-size:cover;background-position:var(--half-pos,50% 50%);
  opacity:.5;
}
.duo-band__half > *{position:relative;z-index:2}
.duo-band__no{
  margin:0;font-family:var(--data);line-height:.8;letter-spacing:.02em;
  font-size:clamp(88px,13vw,208px);
  color:transparent;-webkit-text-stroke:2px var(--t);
}
.duo-band__n{margin:22px 0 0;font-size:clamp(24px,2.6vw,34px);font-weight:600;letter-spacing:-.022em}
.duo-band__l{margin:12px 0 0;color:var(--paper-dim);font-size:16.5px;line-height:1.5;max-width:34ch}
.duo-band__f{margin:20px 0 0;display:flex;flex-wrap:wrap;gap:14px 24px;align-items:center}

/* --- responsive: bands shorten, runs stack, tiles go full width --------- */
@media (max-width:1040px){
  .tile-grid{grid-template-columns:repeat(2,1fr)}
  .tile-img{grid-column:span 1;--tile-h:38vh}
  .strip-img{--strip-cells:2;--strip-h:42vh}
  .figure-duo{grid-template-columns:1fr;--duo-h:62vh}
  .plates--teaser{grid-template-columns:1fr}
  .duo-band{grid-template-columns:1fr}
  .triptych__panel{--tri-h:56vh}
}
@media (max-width:780px){
  .band-img{--band-h:66vh}
  .band-img--tall{--band-h:88vh}
  .band-img--short{--band-h:46vh}
  .display{--display-w:13ch}
  .tile-grid{grid-template-columns:1fr;gap:8px}
  .tile-img{--tile-h:34vh}
  .strip-img{--strip-cells:2;--strip-h:32vh}
  /* the triptych stacks on a phone. It NEVER drops a panel: dropping the
     third one would delete the deepest tone from the page, on the device
     most of this practice's patients actually use. */
  .triptych__run{grid-auto-flow:row;grid-auto-columns:auto}
  .triptych__panel{--tri-h:44vh}
  .triptych__over{position:relative;padding-top:26px;background:var(--ink)}
  .tone-bar span{font-size:9px;letter-spacing:.12em;--bar-h:44px}
  .figure-duo{--duo-h:56vh}
  .duo-band__half{--duo-band-h:auto;padding:34px 20px 40px}
  .band-img__say{padding:34px 0 30px}
}

/* --- band variants used by the home page, available to every page -------- */

/* the hero band: image floor, copy well, spectrum bar pinned to the bottom */
.hero-band{
  flex-direction:column;justify-content:flex-end;align-items:stretch;
}
.hero-band .band-img__say{padding:clamp(64px,9vw,130px) 0 clamp(30px,4vw,54px)}

/* the grain ground shared by a whole duo-band (the two suites) */
.duo-band{position:relative;overflow:hidden;isolation:isolate}
.duo-band__ground{
  position:absolute;inset:0;z-index:0;
  background-image:var(--img-grain);background-size:cover;background-position:50% 50%;
  opacity:.62;
}
.duo-band__head{
  grid-column:1 / -1;position:relative;z-index:2;
  padding:clamp(40px,5vw,78px) clamp(38px,4.6vw,74px) 0;
}
.duo-band__half{background:transparent}
.duo-band__half + .duo-band__half{border-left:1px solid var(--line-2)}

/* a tight heading row that introduces the image band directly beneath it.
   Kept short on purpose: it must never read as a band of its own. */
.band-head{padding:clamp(38px,4vw,58px) 0 clamp(18px,2.2vw,26px);background:var(--ink)}
.band-head--alt{background:var(--ink-2)}
.band-head__row{display:flex;flex-wrap:wrap;gap:18px 34px;align-items:flex-end;justify-content:space-between}
.band-foot{padding:clamp(16px,1.8vw,22px) 0 clamp(30px,3.4vw,44px);background:var(--ink)}
.band-foot .wrap{
  display:flex;flex-wrap:wrap;gap:18px 30px;align-items:center;justify-content:space-between;
}
.band-foot--alt{background:var(--ink-2)}

@media (max-width:780px){
  .duo-band__half + .duo-band__half{border-left:0;border-top:1px solid var(--line-2)}
  .band-head{padding:34px 0 18px}
  .band-foot{padding:18px 0 38px}
  .band-foot .btn{width:100%}
}

/* ============================================================================
   24. EDGE DEVICES  (the edgy layer, shared with every page)
   ----------------------------------------------------------------------------
   Seven devices that keep the composition from settling into tidy cards.
   Use them SPARINGLY: one or two per band, never all seven on a page.

     .display--bleed   display type wider than its wrap, so letters clip on the
                       viewport edge instead of sitting safely centred.
     .display--over    display type that hangs UP into the image band above it
                       (negative margin), breaking the band seam.
     .inktext          image-in-text mask. ONE word per page, no more. Carries a
                       coral hairline stroke so the glyph edge always holds AA.
     .edge-label       a rotated mono serial riding a band edge, vertical.
     .ghost-no         an enormous outlined numeral overlapping a band seam.
     .duotone          hard-contrast image treatment for portraits shot on a
                       neutral studio ground, so they join the dark world.
                       NEVER apply it to the documentary skin portraits: the
                       whole point of those is true, unaltered tone.
     .stick-band       the pinned image moment. One image holds the viewport
                       while short statements scroll past it.
     .strip--alt       the second ticker, running the other way, as a divider.
   ========================================================================== */

/* --- 1. type that breaks the grid --------------------------------------- */
/* The bleed runs the type past its wrap, but never past the SCREEN: at tablet
   widths a 112% box can put whole words outside the viewport. The min() caps the box at the
   screen less a hairline gutter; at 1440 and up 112% is still the smaller of
   the two, so the desktop composition is untouched. */
.display--bleed{max-width:none;width:min(112%,calc(100vw - 56px));margin-left:-1.2%}
.display--over{position:relative;z-index:4;margin-top:calc(-1 * var(--over,.28em))}

/* --- 2. image in text, one moment per page ------------------------------ */
.inktext{
  /* the solid accent is the fallback: background-clip:text has no meaning without
     the mask, and a gradient cannot be contrast tested. */
  color:var(--accent);
  background-image:var(--ink-src,linear-gradient(96deg,
    var(--t1) 0%, var(--t2) 26%, var(--accent) 54%, var(--t3) 78%, var(--t2) 100%));
  background-size:100% 100%;background-position:50% 50%;
  -webkit-background-clip:text;background-clip:text;
  color:transparent;-webkit-text-fill-color:transparent;
  -webkit-text-stroke:1px rgba(239,164,151,.55);
  padding-right:.03em;
}

/* --- 3. rotated mono labels riding the band edges ----------------------- */
.edge-label{
  position:absolute;z-index:6;margin:0;
  writing-mode:vertical-rl;
  font-family:var(--data);font-size:10px;letter-spacing:.36em;text-transform:uppercase;
  color:var(--paper-dim);white-space:nowrap;pointer-events:none;
}
.edge-label--l{left:9px;bottom:26px;transform:rotate(180deg)}
.edge-label--r{right:9px;top:26px}
.edge-label--accent{color:var(--accent)}

/* --- 4. the ghost numeral, overlapping a seam --------------------------- */
.ghost-no{
  /* placed with --gh-* rather than raw inline offsets, so the phone
     breakpoint can pull a numeral back off the screen edge. */
  position:absolute;z-index:3;margin:0;pointer-events:none;
  top:var(--gh-t,auto);right:var(--gh-r,auto);
  bottom:var(--gh-b,auto);left:var(--gh-l,auto);
  font-family:var(--data);line-height:.74;letter-spacing:.01em;
  font-size:var(--ghost-size,clamp(130px,17vw,290px));
  color:transparent;-webkit-text-stroke:1.5px rgba(243,245,250,.20);
}
.ghost-no--accent{-webkit-text-stroke-color:rgba(239,164,151,.34)}

/* --- 5. duotone: studio portraits joined to the dark world -------------- */
.duotone{position:relative;isolation:isolate;background:#060D20}
.duotone img{filter:grayscale(1) contrast(1.34) brightness(.88)}
.duotone::before{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(158deg,var(--t3) 0%,var(--t5) 52%,#0C1731 100%);
  mix-blend-mode:color;opacity:.86;
}
.duotone::after{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:radial-gradient(78% 62% at 46% 26%, transparent 24%, rgba(4,7,20,.72) 100%);
}

/* --- 6. the pinned image moment ----------------------------------------- */
.stick-band{
  display:grid;grid-template-columns:minmax(0,var(--pin-w,1fr)) minmax(0,1fr);
  background:var(--ink);position:relative;align-items:start;
}
.stick-band__pin{
  position:sticky;top:0;height:100vh;min-height:520px;overflow:hidden;
  background:#060D20;
}
.stick-band__pin img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  object-position:var(--pin-pos,50% 40%);
}
.stick-band__flow{padding:clamp(56px,7vw,110px) clamp(28px,4vw,72px)}
.stick-step{
  padding:clamp(38px,5vw,64px) 0;border-top:1px solid var(--line-2);
  min-height:var(--step-h,44vh);display:flex;flex-direction:column;justify-content:center;
}
.stick-step:first-of-type{border-top:0}
.stick-step__ser{margin:0 0 14px;color:var(--accent)}
.stick-step h3{
  margin:0;font-size:clamp(1.35rem,2.4vw,2.05rem);font-weight:600;
  letter-spacing:-.022em;line-height:1.06;max-width:20ch;
}
.stick-step p{margin:14px 0 0;color:var(--paper-dim);font-size:16.5px;line-height:1.55;max-width:44ch}
.stick-step__n{
  display:block;font-family:var(--data);font-size:clamp(34px,4vw,58px);
  line-height:1;color:var(--accent);margin:0 0 12px;letter-spacing:.01em;
}

/* --- 7. the second ticker, running the other way ------------------------ */
.strip--alt{background:var(--ink);border-color:var(--line-2)}
.strip--alt .strip__track{animation-direction:reverse;animation-duration:54s;color:var(--paper-faint)}
.strip--alt .sep{background:var(--t3)}

/* --- responsive: devices that would crowd a phone step down or step out - */
@media (max-width:1040px){
  .stick-band{grid-template-columns:1fr}
  .stick-band__pin{position:relative;height:52vh;min-height:340px;top:auto}
  .stick-step{--step-h:auto}
}
@media (max-width:780px){
  .display--bleed{width:106%;margin-left:0}
  .edge-label{display:none}
  .ghost-no{--ghost-size:clamp(96px,28vw,150px)}
  .stick-band__flow{padding:38px 20px 44px}
  .stick-step{padding:26px 0}
}

/* ============================================================================
   25. TWO MORE DEVICES  (numeral-as-target, and the shock cut)
   ----------------------------------------------------------------------------
     .tile-img__no    an oversized category numeral inside the tile's own link,
                      so the numeral IS the click target. Always aria-hidden:
                      the accessible name is the category text beside it.
     .tile-img__spine the procedure serial rotated onto the tile's left edge,
                      turning the mosaic into a register rather than a card set.
     .shock           one band that is mostly empty: a single display line on
                      ink, no image, no CTA. ONE per page, never two. The edge
                      comes from the restraint next to the density around it.
   ========================================================================== */

/* the real procedure photos run bright at the top (windows, sky), so the
   numeral needs a settling veil under it or it disappears into the highlights.
   Same veil in both themes: the tile is a dark world. */
.tile-img::after{
  content:"";position:absolute;inset:0 0 auto 0;height:36%;z-index:1;pointer-events:none;
  background:linear-gradient(200deg, rgba(6,13,32,.62) 0%, rgba(6,13,32,.26) 48%, rgba(6,13,32,0) 82%);
}
.tile-img__no{
  position:absolute;right:clamp(14px,1.6vw,26px);top:clamp(6px,1vw,14px);z-index:2;
  margin:0;font-family:var(--data);line-height:.8;letter-spacing:.01em;
  font-size:clamp(58px,6.4vw,120px);
  color:transparent;-webkit-text-stroke:1.5px rgba(243,245,250,.52);
}
.tile-img:hover .tile-img__no{-webkit-text-stroke-color:rgba(239,164,151,.62)}

.tile-img__spine{
  position:absolute;left:11px;bottom:clamp(96px,11vw,150px);z-index:3;margin:0;
  writing-mode:vertical-rl;transform:rotate(180deg);
  font-family:var(--data);font-size:9.5px;letter-spacing:.34em;text-transform:uppercase;
  color:var(--accent);white-space:nowrap;
}

.shock{
  background:var(--ink);position:relative;overflow:hidden;isolation:isolate;
  min-height:var(--shock-h,74vh);
  display:flex;align-items:center;
  border-top:1px solid var(--line-2);border-bottom:1px solid var(--line-2);
}
/* the stone ground. Held well back: the type is what owns this band. */
.shock__ground{
  position:absolute;inset:0;z-index:0;pointer-events:none;
  background-image:var(--img-grain);background-size:cover;background-position:50% 50%;
  opacity:.7;
}
.shock__ground::after{
  content:"";position:absolute;inset:0;
  background:radial-gradient(72% 84% at 22% 50%, rgba(4,7,20,.62) 0%, rgba(4,7,20,.90) 100%);
}
.shock .wrap{position:relative;z-index:2}
.shock__line{
  margin:0;font-weight:700;text-transform:uppercase;
  font-size:clamp(2.3rem,var(--shock-vw,9.3vw),var(--shock-max,7.55rem));
  line-height:.96;letter-spacing:-.015em;
  max-width:var(--shock-w,17ch);
}
.shock__line em{font-style:normal;color:var(--accent)}
.shock__ser{margin:0 0 26px;color:var(--paper-faint)}

@media (max-width:780px){
  .tile-img__no{font-size:clamp(48px,15vw,80px)}
  .tile-img__spine{display:none}
  .shock{--shock-h:56vh}
}

/* ============================================================================
   26. MOBILE HEROES + PHONE TYPE  (<= 780px)
   ----------------------------------------------------------------------------
   Every display line that was composed on a 1440 grid has to be re-scaled
   for a 390 column, and the hero
   furniture (ghost numerals, edge serials, tone bar) has to step out of the
   headline's way instead of crowding it.

   These rules set font-size DIRECTLY rather than through --display-vw: a
   per-headline inline --display-vw would otherwise beat the phone breakpoint
   and strand a headline at its clamp floor.
   ========================================================================== */
@media (max-width:780px){

  /* --- 1. heights in svh, so a collapsing iOS URL bar cannot resize a hero */
  .band-img{min-height:var(--band-h-m,var(--band-h,66vh))}
  .band-img--tall{--band-h-m:min(86svh,780px)}
  .band-img--short{--band-h-m:46svh}
  .hero-band{--band-h-m:min(88svh,800px)}
  .shock{min-height:min(56svh,520px)}

  /* --- 2. a phone re-aims the crop: --band-pos-m, desktop position as the
           fallback, so a band only opts in when its focal point needs it. --- */
  .band-img__media{background-position:var(--band-pos-m,var(--band-pos,50% 50%))}

  /* --- 3. display type, re-scaled for a 350px column ---------------------
     The longest single word on the site ("experience", "Neuromodulators")
     sets the ceiling: at these sizes no word can outrun the column. */
  /* --display-fs-m is the per-headline phone escape hatch: a few lines carry
     a bound phrase too long for 350px at the shared size and set their own. */
  .display{
    font-size:var(--display-fs-m,clamp(1.55rem,8vw,2.45rem));
    line-height:1.02;letter-spacing:-.006em;
    /* A word that still cannot fit a 350px column hyphenates rather than
       running off the screen. */
    hyphens:auto;-webkit-hyphens:auto;overflow-wrap:break-word;
  }
  .display--xl{font-size:clamp(1.75rem,8.75vw,2.8rem)}
  /* nothing bleeds off a phone: a 20px gutter is not a bleed, it is a clip */
  .display--bleed{width:100%;margin-left:0}
  .display--over{margin-top:calc(-1 * var(--over-m,.1em))}
  .shock__line{font-size:clamp(1.65rem,8.3vw,2.65rem);max-width:none;line-height:1.04;
    hyphens:auto;-webkit-hyphens:auto;overflow-wrap:break-word}

  /* --- 4. hero furniture yields to the headline ------------------------- */
  /* the ghost numeral is decoration; on a phone it lands on top of the words,
     so it goes back behind the scrim and shrinks rather than competing. */
  /* a ghost numeral is texture, not content: on a phone it drops behind the
     scrim, shrinks, and keeps the page gutter instead of kissing the edge. */
  .ghost-no{--ghost-size:clamp(78px,22vw,116px);z-index:1;opacity:.8}
  /* the longhand, not the custom property: an inline --gh-* wins the variable,
     but it never sets `right` or `left` itself, so these still land. */
  .ghost-no[style*="--gh-r"]{right:16px}
  .ghost-no[style*="--gh-l"]{left:16px}
  .hero-band .ghost-no{opacity:.7}
  /* the 15 lands on the CTA at phone width: it moves into the empty top of
     the image rather than competing with the button. */
  .res-hero .ghost-no{bottom:auto;top:9%}
  .hero-band .tone-bar span{--bar-h:36px}

  /* --- 5. a hero CTA is a thumb target, not a row ------------------------ */
  .hero-band .btn-row{flex-direction:column;align-items:stretch;gap:12px}
  .hero-band .btn-row .btn{width:100%;justify-content:center}
  .hero-band .btn-row .softlink{align-self:flex-start}
  .hero-band .band-lede{font-size:16.5px;line-height:1.55}
  .hero-band .meta-row{gap:6px}

  /* a band head takes the page gutter on a phone, not the desktop inset, so a
     display line there gets the same 350px column every other headline gets */
  .duo-band__head{padding:34px 20px 0}

  /* --- 6. deeper scrims: a phone crop shows more of the lit half of the
           image under the headline than the desktop crop ever does. ------- */
  .hero-band .scrim--left{
    background:
      linear-gradient(to top, rgba(4,7,20,.97) 0%, rgba(4,7,20,.93) 40%,
        rgba(4,7,20,.74) 68%, rgba(4,7,20,.40) 100%);
  }
  .hero-band .scrim--up{
    background:linear-gradient(to top,
      rgba(4,7,20,.96) 0%, rgba(4,7,20,.92) 38%,
      rgba(4,7,20,.66) 66%, rgba(4,7,20,.38) 100%);
  }
  /* over an image the faint mono grey drops under AA at 11px: the current
     crumb takes the dim step instead. Same palette, one token up. */
  .hero-band .crumbs{color:var(--paper-dim)}
}

/* --- 7. per hero: the longest bound line on each page sets its own scale.
       These are the sizes at which every hero headline keeps its intended
       line breaks at 390 instead of shedding a word onto a line of its own. */
@media (max-width:780px){
  .home-hero  .display--xl{font-size:clamp(1.55rem,7.8vw,2.5rem)}
  .p2-hero    .display--xl{font-size:clamp(1.55rem,7.7vw,2.45rem)}
  .res-hero   .display--xl{font-size:clamp(1.6rem,8.4vw,2.65rem)}
  .soc-hero   .display--xl{font-size:clamp(1.55rem,8.15vw,2.6rem)}
  .ct-hero    .display--xl{font-size:clamp(1.7rem,8.9vw,2.9rem)}
  .sx-hero    .display--xl{font-size:clamp(1.7rem,8.9vw,2.9rem)}
}

/* a break that belongs to the desktop composition only. The phone lets the
   line flow. The space after the tag is deliberate: it is what keeps the two
   words apart once the break itself is gone. */
@media (max-width:780px){ br.br-d{display:none} }

/* --- 8. the smallest phones (<=400px): keep the wordmark short of the menu
       button on a 360px screen. -------------------------------------------- */
@media (max-width:400px){
  .nav__in{gap:10px;padding:12px 16px}
  .brand__word{font-size:13.5px;letter-spacing:.11em}
  .brand__sub{font-size:8.5px;letter-spacing:.26em}
}

/* ============================================================================
   27. SCROLL MOTION  (entrance variants, band parallax, nav condense)
   ----------------------------------------------------------------------------
   Everything here is transform / opacity / clip-path only. Nothing animates a
   layout property per frame, nothing runs on a timer, nothing blocks paint.

   HOW IT IS WIRED
     site.js walks a short list of selectors at load. For each match that
     starts BELOW the fold it adds `reveal is-armed` plus one variant class,
     and hands it to a single shared IntersectionObserver. Anything already on
     screen at load is left alone, so no element the visitor is looking at can
     flash. `--m` (section 19) is the master switch: 1 armed, 0 show all.

   THE VARIANTS
     .reveal                 base. Fade up 14px. (Section 19.)
     .reveal--stagger        the container holds still; its CHILDREN come in
                             one after another, 55ms apart, capped at eight.
                             A .display / .h2 / .shock__line child rises
                             further and lands with a slight overshoot.
     .reveal--media          pairs with --stagger. The <img> inside each child
                             settles from 1.06 to 1 over the fade.
     .reveal--rise           a display headline on its own: 30px, overshoot.
     .reveal--bar            the spectrum devices (tone bar, spectrum rule,
                             divider, footer band) wipe in left to right on a
                             mask, which cannot distort the numerals the way a
                             scaleX would, and cannot blind the observer the
                             way a clip-path does (see rule 5).

   THE REST
     band parallax           CSS scroll-driven (animation-timeline:view())
                             where supported, a rAF scroll handler for the
                             hero only where it is not, static under reduced
                             motion. Never more than 3.6%, media overscaled to
                             1.12 so an edge can never appear.
     plate wipe              site.js tweens --split from closed to its resting
                             position once, the first time a plate is seen.
                             Pointer and keyboard control are untouched after.
     nav condense            html.nav-condensed, set by an IO sentinel that
                             site.js inserts at the top of the document.
   ========================================================================== */

/* --- 1. the container of a stagger group never moves itself -------------- */
.reveal--stagger.is-armed{opacity:1;transform:none}

/* --- 2. staggered children ----------------------------------------------- */
.reveal--stagger.is-armed > *{
  opacity:calc(1 - var(--m));
  transform:translateY(calc(18px * var(--m)));
}
/* a headline inside a group travels further, and overshoots by a hair */
.reveal--stagger.is-armed > .display,
.reveal--stagger.is-armed > .h2,
.reveal--stagger.is-armed > .shock__line{
  transform:translateY(calc(30px * var(--m)));
}
/* Two things this rule has to get right at once.
   1. The stagger is carried by --d, a PER PROPERTY delay, not by
      transition-delay: a blanket delay would also postpone the colour half
      below, and every button in a group would answer a hover a third of a
      second late.
   2. The colour half is repeated from .btn on purpose: this selector outranks
      it, and without the repeat a button that happens to be a direct child of
      a group would lose its hover fade for the rest of the session. */
.reveal--stagger.is-in > *{
  opacity:1;transform:none;
  transition:opacity .62s ease var(--d,0s),
             transform .66s cubic-bezier(.22,.72,.28,1) var(--d,0s),
             background .2s ease,color .2s ease,border-color .2s ease;
}
.reveal--stagger.is-in > .display,
.reveal--stagger.is-in > .h2,
.reveal--stagger.is-in > .shock__line{
  /* transform:none MUST be repeated here: the armed rule
     `.reveal--stagger.is-armed > .display` has the same specificity (0,3,0),
     so if `is-armed` lingers alongside `is-in` the armed translateY(30px) wins
     the tie and the headline stays stuck 30px down, overlapping the line below
     (services .sx-band__ct was colliding). Repeating it here + source order
     makes the settled state win. */
  transform:none;
  transition:opacity .7s ease var(--d,0s),
             transform .82s cubic-bezier(.22,1.1,.36,1) var(--d,0s);
}
.reveal--stagger.is-in > *:nth-child(2){--d:.055s}
.reveal--stagger.is-in > *:nth-child(3){--d:.11s}
.reveal--stagger.is-in > *:nth-child(4){--d:.165s}
.reveal--stagger.is-in > *:nth-child(5){--d:.22s}
.reveal--stagger.is-in > *:nth-child(6){--d:.275s}
.reveal--stagger.is-in > *:nth-child(7){--d:.33s}
.reveal--stagger.is-in > *:nth-child(n+8){--d:.385s}

/* --- 3. the image inside a staggered cell settles out of an overscale ---- */
.reveal--media.is-armed > * > img{transform:scale(calc(1 + .06 * var(--m)))}
.reveal--media.is-in > * > img{
  transform:none;transition:transform 1.15s cubic-bezier(.16,.74,.24,1);
}

/* --- 4. a display headline on its own ------------------------------------ */
.reveal--rise.is-armed{transform:translateY(calc(30px * var(--m)))}
.reveal--rise.is-in{
  opacity:1;transform:none;
  transition:opacity .7s ease,transform .82s cubic-bezier(.22,1.1,.36,1);
}

/* --- 5. the spectrum devices wipe, they never stretch --------------------
   TRAP, found in testing: the obvious way to write this is
   `clip-path:inset(0 100% 0 0)`, and it works, right up until the
   IntersectionObserver that is supposed to reveal the bar reports it as NOT
   intersecting, because Chrome folds clip-path into the intersection rect. A
   fully clipped element hides itself from its own trigger and never comes
   back. A mask is paint-only, invisible to the observer, and wipes the
   numerals in the tone bar without stretching a single glyph. */
.reveal--bar.is-armed{
  opacity:1;transform:none;
  -webkit-mask-image:linear-gradient(90deg,#000 0 100%);
          mask-image:linear-gradient(90deg,#000 0 100%);
  -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
  -webkit-mask-size:calc(100% - 100% * var(--m)) 100%;
          mask-size:calc(100% - 100% * var(--m)) 100%;
}
.reveal--bar.is-in{
  -webkit-mask-size:100% 100%;mask-size:100% 100%;
  transition:-webkit-mask-size .95s cubic-bezier(.22,.68,.3,1),
                     mask-size .95s cubic-bezier(.22,.68,.3,1);
}

/* --- 6. parallax on the full bleed image bands ---------------------------
   The media layer is overscaled first, so a translate can never uncover an
   edge: 1.12 leaves 6% of headroom top and bottom, the travel is 3.6%.
   --par is the hero-only JS fallback and stays 0 everywhere else. */
.band-img__media{transform:translate3d(0,var(--par,0px),0) scale(1.12)}
.shock__ground{transform:scale(1.12)}

@keyframes ca-par{
  from{transform:translate3d(0,calc(var(--amp,3.6%) * -1),0) scale(1.12)}
  to  {transform:translate3d(0,var(--amp,3.6%),0) scale(1.12)}
}

/* GOTCHA, and it cost an hour: `animation-timeline:view()` on the media layer
   itself resolves against the nearest SCROLL CONTAINER, and .band-img carries
   overflow:hidden, which is one. The timeline was therefore measured against a
   box that never scrolls and sat frozen at 50% forever (no error, no warning,
   just a band that refused to move). The subject has to be the band, which
   sits in normal document flow, so the band NAMES a view timeline and the
   media layer inside it borrows the name. */
@supports (animation-timeline:view()){
  @media (prefers-reduced-motion:no-preference){
    .band-img{view-timeline-name:--ca-band;view-timeline-axis:block}
    .shock{view-timeline-name:--ca-shock;view-timeline-axis:block}
    .band-img__media,.shock__ground{
      animation:ca-par linear both;
      animation-range:cover;
      will-change:transform;
    }
    .band-img__media{animation-timeline:--ca-band}
    .shock__ground{animation-timeline:--ca-shock}
  }
}

/* --- 7. the nav condenses once the hero is behind you --------------------
   Background and the spectrum rule are the loud half of this; the 5px of
   padding is a one-shot transition on a single 70px element, not a per-frame
   animation, and the sticky nav sits in flow so nothing below it reflows
   more than once. */
.nav{transition:background-color .3s ease}
.nav__in{transition:padding-top .3s ease,padding-bottom .3s ease}
.nav .spectrum-rule{transition:opacity .3s ease}
html.nav-condensed .nav{background:rgba(5,9,26,.97)}
html.nav-condensed .nav__in{padding-top:9px;padding-bottom:9px}
html.nav-condensed .nav .spectrum-rule{opacity:.5}

/* --- 8. reduced motion: every one of the above is static and visible ------
   The tickers (section 8) are already stopped by section 19. */
@media (prefers-reduced-motion:reduce){
  .nav__panel.is-open{animation:none}
  .reveal--stagger.is-armed > *,
  .reveal--stagger.is-in > *,
  .reveal--rise.is-armed,
  .reveal--media.is-armed > * > img,
  .reveal--media.is-in > * > img{
    opacity:1;transform:none;transition:none;
  }
  .reveal--bar.is-armed,.reveal--bar.is-in{
    -webkit-mask-image:none;mask-image:none;transition:none;
  }
  .band-img__media,.shock__ground{transform:none;animation:none;will-change:auto}
  .nav,.nav__in,.nav .spectrum-rule{transition:none}
}

/* ============================================================================
   28. MOBILE RAILS  (<= 780px)
   ----------------------------------------------------------------------------
   Adam, 2026-08-18: the long registers cost too much thumb on a phone. Under
   781px the big vertical lists turn into horizontal snap rails: one card per
   entry, the next card cut by the screen edge so the swipe reads on sight.
   Desktop grids are untouched; every rule here lives behind the query, and
   this section sits LAST in the file on purpose so it wins the earlier
   one-column phone rules at equal specificity.

   Shared members: .tile-grid (home services mosaic), .quote-grid (reviews and
   practice copy). Page-scoped rails copy these props in their own style
   blocks: .sx-list (services register), .p2-team (practice roster),
   .res-mini-grid (reserved plates).

   .swipe-tip is the mono microline above a rail. Hidden on desktop.
   ========================================================================== */
.swipe-tip{display:none}
@media (max-width:780px){
  .swipe-tip{
    display:flex;align-items:center;gap:12px;margin:0 0 14px;
    font-family:var(--data);font-size:10px;letter-spacing:.2em;
    text-transform:uppercase;color:var(--paper-faint);
  }
  .swipe-tip::after{
    content:"";flex:1;height:1px;
    background:linear-gradient(90deg,var(--accent) 0,var(--line-2) 40%,transparent 100%);
  }

  .tile-grid,.quote-grid{
    display:grid;grid-template-columns:none;grid-auto-flow:column;
    overflow-x:auto;overflow-y:hidden;overscroll-behavior-x:contain;
    scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;
    scrollbar-width:none;
    /* bleed through the wrap gutter so the rail runs to the screen edge */
    margin-left:calc(var(--gut) * -1);margin-right:calc(var(--gut) * -1);
    padding-left:var(--gut);padding-right:var(--gut);
    scroll-padding-left:var(--gut);
  }
  .tile-grid::-webkit-scrollbar,.quote-grid::-webkit-scrollbar{display:none}
  .tile-grid > *,.quote-grid > *{scroll-snap-align:start}

  .tile-grid{grid-auto-columns:76vw;gap:8px}
  .tile-img{--tile-h:46vh}
  .quote-grid{grid-auto-columns:min(82vw,340px);gap:10px}
  .q--wide{grid-column:auto}

  /* the shock band earns its emptiness on a desktop; on a phone it was half
     a screen of black between two dense runs. Trimmed, not deleted. */
  .shock{min-height:min(42svh,400px)}
}

/* ============================================================================
   29. LIGHT THEME  (opt-in via html[data-theme="light"]; default stays dark)
   ----------------------------------------------------------------------------
   The whole world is token driven, so light mode is a token swap plus a short
   list of decoratives that were authored as "paper on ink" and need to flip.
   This theme is tuned to the client's live capitalaestheticdc.com look: a white
   to cool-white ground, brand navy #0A1A3E as the ink, and the brand coral
   #EFA497 on the primary buttons with navy text.
   THE SPECTRUM (--t1..--t6) is real melanin data, theme independent: it never
   flips. Full bleed hero photos keep their own dark scrims and light copy in
   both themes (dark hero, light page is the intended editorial read).
   ========================================================================== */
:root[data-theme="light"]{
  /* WORLD: four cool papers, lightest floor to deepest inset. */
  --ink:#FBFCFE;                /* page floor        */
  --ink-2:#EDF1F8;              /* alternating band  */
  --ink-3:#FFFFFF;              /* raised card       */
  --panel:#E4EAF5;              /* deepest inset     */

  /* LINES: hairlines flip to the brand navy. */
  --line:rgba(10,26,62,.16);
  --line-2:rgba(10,26,62,.08);
  --line-accent:rgba(171,65,44,.42);

  /* TYPE COLOR: paper flips to the brand navy. The coral cannot carry text on
     white (1.96:1), so the ACCENT TOKEN deepens to a coral that clears AA as
     text (5.8:1 on the floor, 4.9:1 on the deepest inset) and the true brand
     coral is put back on the fills below, where it belongs. */
  --paper:#0A1A3E;             /* primary text   16.6:1 on --ink */
  --paper-dim:#3C4C6E;         /* secondary       8.4:1 on --ink */
  --paper-faint:#556588;       /* mono meta       5.6:1 on --ink */
  --accent:#AB412C;            /* deep coral, readable as text   */
  --accent-ink:#FFF4F1;        /* text on the deep coral fill    */
  --em:#95503F;                /* the quiet emphasis, 5.9:1      */

  /* THEME-COLOR for the mobile browser chrome is set from site.js. */
}

/* nav bar was authored with a literal dark wash; give it a paper wash. */
:root[data-theme="light"] .nav{background:rgba(251,252,254,.9)}

/* THE BRAND BUTTON. On the client's live site the primary call to action is a
   flat coral block with dark navy type, so the fills that read as buttons get
   the true coral back (the deepened token above is only for text and rules). */
:root[data-theme="light"] .btn--accent,
:root[data-theme="light"] .chip.is-on,
:root[data-theme="light"] .skip{
  background:#EFA497;color:#0A1A3E;border-color:#EFA497;
}
:root[data-theme="light"] .btn--accent:hover{background:#E88B7B;color:#0A1A3E}
:root[data-theme="light"] ::selection{background:#EFA497;color:#0A1A3E}

/* decoratives authored as low-alpha PAPER that float over page bands (not over
   photos): flip the stroke to ink so they stay visible on paper. Elements that
   always sit over dark imagery or deep tone swatches (plate marks/no/handle,
   tile numerals, tone-column and tone-bar labels) are intentionally left. */
:root[data-theme="light"] .ghost-no{-webkit-text-stroke-color:rgba(10,26,62,.16)}
/* .prac-mono keeps its paper stroke in BOTH themes: the monogram plate ground
   is a hardcoded dark tone gradient, so an ink stroke vanishes on it. */

/* ---------------------------------------------------------------------------
   THE SWITCHER. A hairline square icon button that lives in the nav bar next
   to the primary links; a sun to go light, a moon to go back to dark.
   --------------------------------------------------------------------------- */
.theme-tog{
  flex:none;width:40px;height:40px;padding:0;
  display:inline-flex;align-items:center;justify-content:center;
  background:transparent;border:1px solid var(--line);
  color:var(--paper-dim);cursor:pointer;
  transition:color .2s ease,border-color .2s ease;
}
.theme-tog:hover{color:var(--accent);border-color:var(--accent)}
.theme-tog svg{width:18px;height:18px}
.theme-tog__moon{display:none}
.theme-tog__sun{display:block}
:root[data-theme="light"] .theme-tog__sun{display:none}
:root[data-theme="light"] .theme-tog__moon{display:block}

/* ----------------------------------------------------------------------------
   IMAGE BANDS ARE A DARK WORLD IN BOTH THEMES.
   Text over a full-bleed photograph must stay light, so re-scope the entire
   dark palette inside every image container: all token-driven descendants
   (headline fragments, sub-copy, hairlines, chips, the coral accent) then read
   over the photo exactly as they do in dark mode. The page around them stays
   paper. This is the intended editorial read: dark hero, light page.
   --------------------------------------------------------------------------- */
:root[data-theme="light"] .band-img,
:root[data-theme="light"] .hero-band,
:root[data-theme="light"] .triptych__over,
:root[data-theme="light"] .triptych__panel,
:root[data-theme="light"] .tile-img,
:root[data-theme="light"] .figure-duo__fig,
:root[data-theme="light"] .p2-mem,
:root[data-theme="light"] .plate,
:root[data-theme="light"] .plate__frame,
:root[data-theme="light"] .ct-steps,
:root[data-theme="light"] .duo-band,
:root[data-theme="light"] .stick-band,
:root[data-theme="light"] .duotone,
:root[data-theme="light"] .svc__art,
:root[data-theme="light"] .campaign__fig,
:root[data-theme="light"] .strip-img figure,
:root[data-theme="light"] .ct-hoursband__art,
:root[data-theme="light"] .skinrow figure,
:root[data-theme="light"] .tone-art{
  --paper:#F3F5FA;
  --paper-dim:#B7C0D8;
  --paper-faint:#7E8AA8;
  --line:rgba(214,224,244,.14);
  --line-2:rgba(214,224,244,.08);
  --line-accent:rgba(239,164,151,.38);
  --accent:#EFA497;
  --accent-ink:#132040;
  --em:#D79A8E;
  --ink:#05091A;
  --ink-2:#081126;
  --ink-3:#0D1832;
  --panel:#122043;
  /* re-declare color here so bare-inheriting headlines (.display has no color
     of its own; it would otherwise inherit body's already-computed dark ink)
     pick up the light token instead of the computed page color. */
  color:var(--paper);
}
/* THE ONE EXCEPTION. .plates--teaser .plate is a TRANSPARENT card, so its
   caption block sits on the page ground rather than on a dark plate. The
   .plate rescope above would keep that caption light and vanish it on paper,
   so hand the page palette straight back to the meta block. The frame above
   it is still an image and still a dark world. */
:root[data-theme="light"] .plates--teaser .plate__meta{
  --paper:#0A1A3E;
  --paper-dim:#3C4C6E;
  --paper-faint:#556588;
  --line:rgba(10,26,62,.16);
  --line-2:rgba(10,26,62,.08);
  --line-accent:rgba(171,65,44,.42);
  --accent:#AB412C;
  --accent-ink:#FFF4F1;
  --em:#95503F;
  color:var(--paper);
}

/* ghost numerals inside image bands stay paper (the plain-band flip would turn
   them to ink and vanish them over the photo). */
:root[data-theme="light"] .band-img .ghost-no,
:root[data-theme="light"] .hero-band .ghost-no,
:root[data-theme="light"] .stick-band .ghost-no{
  -webkit-text-stroke-color:rgba(243,245,250,.16);
}

/* ============================================================================
   30. EDITORIAL CLEANUP  (2026-08-24)
   ----------------------------------------------------------------------------
   The photography and client palette remain the visual anchors. This pass
   removes the concept-board furniture around them: oversized serials, ticker
   copy, outlined display effects and uniformly shouted all-caps headlines.
   ========================================================================== */

body{font-size:16.5px;line-height:1.65}

h1,h2,.display,.h1,.h2,.shock__line{
  font-family:var(--display);
  font-optical-sizing:auto;
  font-weight:500;
}

.display{
  text-transform:none;
  letter-spacing:-.035em;
  line-height:.96;
}
.display--bleed{width:100%;margin-left:0}
.shock__line{
  text-transform:none;
  letter-spacing:-.035em;
  line-height:.98;
  font-weight:500;
}
.h1{font-weight:500;text-transform:none;letter-spacing:-.035em;line-height:.96}
.h2{font-weight:500;letter-spacing:-.03em;line-height:1.02}

/* Image-filled and outlined words read like generated concept art. Keep the
   brand coral, but let the letterforms be quiet and fully legible. */
.inktext{
  color:var(--accent);
  background:none;
  -webkit-background-clip:initial;
  background-clip:initial;
  -webkit-text-fill-color:currentColor;
  -webkit-text-stroke:0;
}
.outline{
  color:var(--accent);
  -webkit-text-stroke:0;
  text-stroke:0;
}

/* Functional type is sentence case with restrained tracking. */
.btn{
  font-family:var(--voice);
  font-size:13px;
  font-weight:600;
  letter-spacing:.02em;
  text-transform:none;
}
.kicker,.eyebrow,.mono,.band-note,.datachip,.figure-duo__r,
.plate__serial,.tile-img__ser,.filter-count,.evidence__flag,
.triptych__cap,.strip-img figcaption{
  font-family:var(--voice);
  letter-spacing:.07em;
}
.kicker,.eyebrow{font-weight:700;letter-spacing:.09em}
.band-note{font-size:12px;line-height:1.55;letter-spacing:.015em;text-transform:none}
.lede,.band-lede{line-height:1.5}

/* Remove decorative register language. Information remains in the real
   headings, captions and controls beside the imagery. */
.edge-label,.ghost-no,.tile-img__no,.tile-img__spine,
.shock__ser,.res-mega__no,.res-mega__ser{display:none}

/* Moving credential tickers and labelled dividers made each transition feel
   like another block of copy. Preserve the spectrum as a clean hairline. */
.strip{
  height:3px;
  padding:0;
  border:0;
  background:var(--spectrum);
  -webkit-mask-image:none;
  mask-image:none;
}
.strip__track{display:none}
.divider{height:28px}
.divider::before{height:1px;opacity:.7}
.divider__label{display:none}

/* Let the client-owned treatment photography read naturally instead of as a
   blue screen blend, while keeping a dark text-safe lower edge. */
.tile-img__media{
  filter:brightness(.82) saturate(.94) contrast(1.02);
  mix-blend-mode:normal;
}
.tile-img::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:1;
  pointer-events:none;
  background:linear-gradient(to top,rgba(4,7,20,.9) 0%,rgba(4,7,20,.32) 46%,transparent 76%);
}
.tone-bar span{color:#000}
.duotone img{filter:none}
.duotone::before{opacity:.18}
.duotone::after{opacity:.42}

/* Fewer badges and less theatrical empty space put the photographs and the
   next useful action back in control of the page rhythm. */
.hero-band .meta-row{display:none}
.home-hero .softlink{display:none}
.shock{min-height:min(48vh,560px)}
.shock__ground{opacity:.38}
:root[data-theme="light"] .shock{background:var(--ink-2)}
:root[data-theme="light"] .shock__ground{display:none}
.sec{padding-top:88px;padding-bottom:88px}

@media (max-width:780px){
  .display{
    font-size:clamp(2rem,10.7vw,3rem);
    line-height:.98;
    letter-spacing:-.03em;
    hyphens:none;
    -webkit-hyphens:none;
    overflow-wrap:normal;
    word-break:normal;
  }
  .display--xl{font-size:clamp(2.45rem,12.5vw,3.55rem)}
  .shock{min-height:min(34svh,340px)}
  .shock__line{
    font-size:clamp(2rem,10.4vw,3rem);
    line-height:1;
    hyphens:none;
    -webkit-hyphens:none;
    overflow-wrap:normal;
    word-break:normal;
  }
  .sec{padding-top:68px;padding-bottom:68px}
  .hero-band{--band-h-m:min(82svh,740px)}
}