/* ============================================================================
   CAPITAL AESTHETIC  |  DESIGN SYSTEM
   ----------------------------------------------------------------------------
   Direction: SPECTRUM. A dark editorial world whose entire color system is
   built from real melanin tones. The tone spectrum is 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
   ========================================================================== */

/* ============================================================================
   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 dark, used to build band rhythm.
         --ink is the page floor, --ink-2 alternating bands,
         --ink-3 raised cards, --panel the deepest inset.                 --- */
  --ink:#0A0705;
  --ink-2:#100B07;
  --ink-3:#17100A;
  --panel:#1B120B;

  /* --- LINES: hairlines only. No soft shadows anywhere.                --- */
  --line:rgba(240,217,190,.14);
  --line-2:rgba(240,217,190,.08);
  --line-gold:rgba(232,180,92,.38);

  /* --- TYPE COLOR --- */
  --paper:#F6EDE3;              /* primary text        AA on all inks    */
  --paper-dim:#C6B2A0;          /* secondary text      AA on all inks    */
  --paper-faint:#8C7768;        /* mono meta, 5.1:1 on --ink             */
  --gold:#E8B45C;               /* THE ONE LOUD ACCENT. Nothing else.    */
  --gold-ink:#170D03;           /* text that sits on gold                */

  /* --- TYPE: two families only. One voice face, one data face.         --- */
  --voice:'Archivo','Helvetica Neue',Helvetica,Arial,sans-serif;
  --data:'IBM Plex Mono',ui-monospace,SFMono-Regular,Menlo,monospace;

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

  /* --- 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-variation-settings:'wdth' 100;
  color:var(--paper);
  font-size:17px;
  line-height:1.6;
  -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(--gold);outline-offset:3px}

::selection{background:var(--gold);color:var(--gold-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}

.dot{
  display:inline-block;width:3px;height:3px;border-radius:50%;
  background:currentColor;opacity:.5;vertical-align:middle;margin:0 .55em;
}

.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(--gold);color:var(--gold-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--gold{background:var(--gold);color:var(--gold-ink);font-weight:500}
.btn--gold:hover{background:var(--t1)}
.btn--ghost{border-color:var(--line);color:var(--paper);background:transparent}
.btn--ghost:hover{border-color:var(--gold);color:var(--gold)}
.btn--line{border-color:var(--gold);color:var(--gold);background:transparent}
.btn--line:hover{background:var(--gold);color:var(--gold-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-gold);padding-bottom:4px;
}
.softlink:hover{color:var(--gold);border-bottom-color:var(--gold)}
.softlink .arw{font-family:var(--data);font-size:13px;color:var(--gold)}

/* 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--gold{color:var(--gold);border-color:var(--line-gold)}
.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(--gold);color:var(--paper)}
.chip.is-on{border-color:var(--gold);color:var(--gold-ink);background:var(--gold)}
.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(10,7,5,.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:17px;font-weight:700;letter-spacing:.2em;
  font-variation-settings:'wdth' 112;
}
.brand__sub{
  display:block;font-family:var(--data);font-size:9.5px;letter-spacing:.32em;
  color:var(--gold);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(--gold)}
.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;border-top:1px solid var(--line-2);background:var(--ink-2)}
.nav__panel.is-open{display:block}
.nav__panel ul{list-style:none;margin:0;padding:8px var(--gut) 22px}
.nav__panel li{border-bottom:1px solid var(--line-2)}
.nav__panel a{
  display:flex;align-items:center;justify-content:space-between;gap:14px;
  padding:16px 0;text-decoration:none;font-size:18px;color:var(--paper);
}
.nav__panel .idx{font-family:var(--data);font-size:11px;letter-spacing:.18em;color:var(--gold)}
.nav__panel .btn{margin:18px var(--gut) 0;width:calc(100% - var(--gut) * 2)}

/* ============================================================================
   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:880px;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(--gold);display:flex;align-items:center;gap:10px;
}
.kicker::before{content:"";width:8px;height:8px;background:var(--gold);flex:none}
.sec__head--center .kicker{justify-content:center}

.h2{
  margin:0;font-weight:600;font-size:clamp(2rem,4.1vw,3.5rem);
  line-height:1.03;letter-spacing:-.022em;font-variation-settings:'wdth' 104;
}
.h2 em{font-style:normal;color:var(--t3)}
.h2 em.gold{color:var(--gold)}
.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(232,180,92,.16), transparent 68%),
    radial-gradient(46% 40% at 8% 78%, rgba(122,66,34,.32), transparent 70%),
    linear-gradient(180deg,#0E0906 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(--gold);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:700;
  font-size:clamp(2.9rem,7.4vw,6.9rem);
  line-height:.9;letter-spacing:-.026em;text-transform:uppercase;
  font-variation-settings:'wdth' 108;
}
.h1 .l{display:block}
.h1 em{font-style:normal}
.outline{
  color:transparent;
  -webkit-text-stroke:3px var(--gold);
  text-stroke:3px var(--gold);
  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-gold);overflow:hidden;
  background:linear-gradient(170deg,var(--t4),#120B06);
}
.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(--gold);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(--gold);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(--gold);
}
.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(--gold);
  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:#150D07;
  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%, #170D06) 0%,
      color-mix(in srgb, var(--t) 28%, #170D06) 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,240,220,.28) 0%, transparent 32%),
    radial-gradient(64% 44% at 68% 26%, color-mix(in srgb, var(--t) 90%, #FFF3E2) 0%, transparent 66%),
    linear-gradient(170deg,
      color-mix(in srgb, var(--t) 86%, #170D06) 0%,
      color-mix(in srgb, var(--t) 50%, #170D06) 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(255,244,230,.05) 0 1px, rgba(255,255,255,0) 1px 8px),
    repeating-linear-gradient(2deg, rgba(10,7,5,.10) 0 1px, rgba(255,255,255,0) 1px 11px),
    radial-gradient(120% 84% at 50% 32%, transparent 38%, rgba(8,5,3,.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(10,7,5,.72) 100%);
}
/* registration crop marks, one per corner */
.plate__frame > .cm{position:absolute;width:16px;height:16px;border:1px solid rgba(246,237,227,.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(246,237,227,.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(10,7,5,.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(10,7,5,.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(--gold);background:rgba(10,7,5,.72);border:1px solid var(--line-gold);
  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(246,237,227,.75);transform:translateX(-.5px);
}
.plate__grip{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  width:36px;height:36px;border:1px solid var(--gold);background:rgba(10,7,5,.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(--gold)}
.plate__grip::after{right:7px;transform:translateY(-50%);border-left:5px solid var(--gold)}

.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(--t3);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(--gold);
  text-decoration:none;border-bottom:1px solid var(--line-gold);padding-bottom:3px;
}
.suite__tel:hover{border-bottom-color:var(--gold)}

/* ============================================================================
   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(--gold)}
.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:#120B06;
  background-image:linear-gradient(125deg, color-mix(in srgb, var(--t) 58%, #120B06) 0%, #120B06 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(10,7,5,.10) 0 1px, rgba(10,7,5,0) 1px 17px),
    linear-gradient(180deg,transparent 52%,rgba(16,11,7,.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(10,7,5,.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(--gold);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(--gold);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%, #140C06) 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(246,237,227,.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:rgba(20,12,6,.66);white-space:nowrap;
}
/* deeper columns need the label inverted to hold contrast */
.tone-col__fitz--light{color:rgba(246,237,227,.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(--gold);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(--t3)}
.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:#0C0805;
}
.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(16,11,7,.45) 0%,transparent 26%,rgba(16,11,7,.55) 100%);
}
.campaign__figs .campaign__fig:first-child::after{
  background:
    linear-gradient(90deg,rgba(16,11,7,1) 0%,rgba(16,11,7,0) 26%),
    linear-gradient(180deg,rgba(16,11,7,.45) 0%,transparent 26%,rgba(16,11,7,.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:#120B06}
.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(10,7,5,.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(--gold);
}
.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%, #120B06 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(10,7,5,.10) 0%,transparent 34%,rgba(10,7,5,.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(--gold);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(--gold)}
.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-gold)}
.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(--gold);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(--gold)}

/* ============================================================================
   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(--gold)}

/* ============================================================================
   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(--gold);text-decoration:none;border-bottom:1px solid var(--line-gold)}
.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(--gold)}

.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(--gold);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(--gold) 50%),
                   linear-gradient(135deg,var(--gold) 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:#6E5B4E}
.field input:focus,.field select:focus,.field textarea:focus{border-bottom-color:var(--gold)}
.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:34px;font-weight:700;line-height:.94;letter-spacing:.02em;font-variation-settings:'wdth' 112}
.foot__tag{color:var(--paper-faint);margin:18px 0 0;line-height:1.9}
.foot__h{color:var(--gold);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(--gold);border-bottom-color:var(--gold)}
.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(--gold);text-decoration:none;border-bottom:1px solid var(--line-gold);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(232,180,92,.13), transparent 70%),
             radial-gradient(44% 44% at 4% 90%, rgba(122,66,34,.28), transparent 72%);
}
.page-head .wrap{position:relative;z-index:1}
.page-head h1{
  margin:0;font-weight:700;font-size:clamp(2.3rem,5.4vw,4.4rem);line-height:.94;
  letter-spacing:-.026em;text-transform:uppercase;font-variation-settings:'wdth' 106;
}
.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(--gold);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(--gold)}
.rich a{color:var(--gold)}

/* 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(--gold));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)
   ========================================================================== */
.js .reveal{opacity:0;transform:translateY(14px)}
.js .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}
  .js .reveal{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}
  .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}
  body{font-size:16px}
  .nav__in{padding:12px var(--gut);gap:14px}
  .brand__word{font-size:15px;letter-spacing:.16em}

  .hero{padding:48px 0 50px}
  .h1{font-size:clamp(2.5rem,12.2vw,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.75rem,7.2vw,2.3rem);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(--gold)}
.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(--gold);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(--gold);text-decoration:none;border-bottom:1px solid var(--line-gold)}

/* --- 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%, #120B06) 0%, #100B07 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(246,237,227,.5);
}
.prac-mono::after{
  content:"";position:absolute;inset:0;
  background:repeating-linear-gradient(90deg, rgba(10,7,5,.14) 0 1px, rgba(10,7,5,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(--gold);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(--gold)}

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

/* --- 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(--gold);border-bottom-color:var(--line-gold)}

/* --- 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(--gold);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(--gold)}
.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(--gold);text-decoration:none;border-bottom:1px solid var(--line-gold);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(8,5,3,.95) 0%, rgba(8,5,3,.86) 26%,
    rgba(8,5,3,.40) 62%, rgba(8,5,3,.30) 100%);
}
.scrim--left{
  background:
    linear-gradient(100deg, rgba(8,5,3,.96) 0%, rgba(8,5,3,.82) 38%,
      rgba(8,5,3,.34) 72%, rgba(8,5,3,.24) 100%),
    linear-gradient(to top, rgba(8,5,3,.72) 0%, transparent 34%);
}
.scrim--plate{background:rgba(8,5,3,.74)}
/* lighter than --up: for portraits, where the face must keep the frame */
.scrim--soft{
  background:linear-gradient(to top,
    rgba(8,5,3,.93) 0%, rgba(8,5,3,.70) 22%,
    rgba(8,5,3,.18) 52%, rgba(8,5,3,.30) 100%);
}
.scrim--edge{
  background:linear-gradient(to bottom, rgba(8,5,3,.62) 0%, transparent 22%,
    transparent 66%, rgba(8,5,3,.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;
  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:700;text-transform:uppercase;
  font-size:clamp(2.4rem,var(--display-vw,6.4vw),var(--display-max,5.4rem));
  line-height:.9;letter-spacing:-.028em;font-variation-settings:'wdth' 108;
  max-width:var(--display-w,17ch);
}
.display--xl{--display-vw:8.6vw;--display-max:7.6rem}
.display em{font-style:normal;color:var(--t3)}
.display em.gold{color:var(--gold)}
.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:rgba(20,12,6,.72);
}
.tone-bar span.on-dark{color:rgba(246,237,227,.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:#0C0805;
}
.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(8,5,3,.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(8,5,3,.95) 0%, rgba(8,5,3,.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(8,5,3,.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:#120B06;
}
.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(8,5,3,.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%, #100B07) 0%, #0C0805 76%);
  border-top:2px solid var(--t,var(--gold));text-decoration:none;color:inherit;
  display:block;
}
/* category art sources: paths are relative to THIS file */
.tile-img--inject{--tile-src:url('../img/gen/cat-injectables.jpg')}
.tile-img--laser{--tile-src:url('../img/gen/cat-lasers.jpg')}
.tile-img--facial{--tile-src:url('../img/gen/cat-facials.jpg')}
.tile-img--surgical{--tile-src:url('../img/gen/cat-surgical.jpg')}
.tile-img--wellness{--tile-src:url('../img/gen/cat-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(--gold);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:#120B06;
}
.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(--gold);
}
.figure-duo__q{
  margin:16px 0 0;padding-top:16px;border-top:1px solid var(--line-gold);
  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-vw:11vw;--display-w:13ch}
  .display--xl{--display-vw:13.4vw}
  .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
                       gold 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 --------------------------------------- */
.display--bleed{max-width:none;width:112%;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{
  /* solid gold is the fallback: background-clip:text has no meaning without
     the mask, and a gradient cannot be contrast tested. */
  color:var(--gold);
  background-image:var(--ink-src,linear-gradient(96deg,
    var(--t1) 0%, var(--t2) 26%, var(--gold) 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(232,180,92,.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--gold{color:var(--gold)}

/* --- 4. the ghost numeral, overlapping a seam --------------------------- */
.ghost-no{
  position:absolute;z-index:3;margin:0;pointer-events:none;
  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(246,237,227,.20);
}
.ghost-no--gold{-webkit-text-stroke-color:rgba(232,180,92,.34)}

/* --- 5. duotone: studio portraits joined to the dark world -------------- */
.duotone{position:relative;isolation:isolate;background:#0C0805}
.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%,#150D06 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(8,5,3,.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:#0C0805;
}
.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(--gold)}
.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(--gold);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.
   ========================================================================== */

.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(246,237,227,.26);
}
.tile-img:hover .tile-img__no{-webkit-text-stroke-color:rgba(232,180,92,.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(--gold);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(8,5,3,.62) 0%, rgba(8,5,3,.90) 100%);
}
.shock .wrap{position:relative;z-index:2}
.shock__line{
  margin:0;font-weight:700;text-transform:uppercase;
  font-size:clamp(2.4rem,8.4vw,7rem);line-height:.88;letter-spacing:-.03em;
  font-variation-settings:'wdth' 108;max-width:15ch;
}
.shock__line em{font-style:normal;color:var(--gold)}
.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}
}