/* ==========================================================================
 KPCIRC: Kwatra Precision Cancer Institute & Research Centre
 Design system v2.0 · "Boutique clinical"
 Deep violet · off-white · charcoal · lavender · brand plum from mark.svg
 ========================================================================== */

/* ---------- 1. Tokens ---------------------------------------------------- */
:root {
 color-scheme: light only;

 /* Oxblood spine, from the brand mark */
 --ox-950: #240B0E;
 --ox-900: #3A1216;
 --ox-800: #4E171D;
 --ox-700: #6B2027; /* OXBLOOD, brand primary */
 --ox-600: #822C33;
 --ox-500: #9B4249;
 --ox-400: #B4636A;

 /* Terracotta, brand secondary */
 --tc-400: #B0562F; /* TERRACOTTA: edges, rules, fills. Non-text role */
 --tc-ink:  #9E4A24; /* TERRACOTTA as TEXT. 5.2:1 on warm, 5.6:1 on ivory */
 --tc-ink-2:#8A3F1E; /* deeper, for text on the deepest warm band */
 --tc-300: #D19A76;
 --tc-200: #EBCDB8;
 --tc-100: #F5E3D5;
 --tc-50: #FBF3EC;

 /* Bridge & legacy aliases */
 --plum: #7C3320;
 --grad-warm: #7C3320; /* SURFACE role: warm end of brand gradients */
 --plum-bg:#F9EFF4;
 --plum-line:#C9A3B6;
 --maroon: #6B2027;
 --terra: #B0562F;
 --terra-700: #8F4423;
 --terra-50: #FBF1EA;

 /* Ink & ivory ground */
 --ink: #241A16;
 --ink-2: #4C3A33;
 --ink-3: #7A665C;
 --paper: #FBF6ED; /* IVORY, the ground */
 --surface: #FFFFFF; /* raised card, reads as light against ivory */
 --surface-2:#F5EDE1; /* warm band */
 --surface-3:#EDE1D1; /* deeper warm band */
 --ivory-edge:#EFE4D4; /* hairline on ivory */
 --line: #E7DBCB;
 --line-2: #D6C5B2;
 --line-3: #B9A493;

 /* Semantic */
 --link: #822C33;
 --link-hover: #6B2027;
 --btn-solid-bg: var(--tc-300);
 --btn-solid-fg: var(--ox-900);
 --primary: var(--ox-700);
 --on-primary: #FFFFFF;
 --accent: var(--terra-700);
 --accent-solid: #A8471F; --accent-solid-fg:#FFFFFF;
 --focus: var(--tc-400);
 --info: #24566E; --info-bg: #E9F1F5;
 --caution:#8A5B00; --caution-bg:#FBF3E2;
 --danger: #A32020; --danger-bg: #FBECEC;
 --ok: #2C6B4F; --ok-bg: #EAF3EE;

 /* Type */
 --font-display: "Fraunces", "Source Serif 4", Georgia, serif;
 --font-brand: "Poppins", "Futura", "Avenir Next", "Century Gothic", sans-serif;
 --font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
 --font-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

 /* Spacing */
 --s-1:4px; --s-2:8px; --s-3:12px; --s-4:16px; --s-5:24px;
 --s-6:32px; --s-7:48px; --s-8:64px; --s-9:96px; --s-10:128px;

 /* Shape */
 --r-sm:4px; --r-md:8px; --r-lg:14px; --r-xl:22px; --r-pill:100px;
 --sh-1: 0 1px 2px rgba(36,26,22,.06), 0 2px 6px rgba(36,26,22,.05);
 --sh-2: 0 4px 12px rgba(36,26,22,.08), 0 12px 32px rgba(36,26,22,.07);
 --sh-3: 0 16px 48px rgba(36,26,22,.16);
 --glow: 0 0 0 1px rgba(176,86,47,.35), 0 8px 30px rgba(107,32,39,.12);

 /* Layout */
 --wrap: 1280px;
 --wrap-narrow: 880px;
 --header-h: 72px;

 /* Motion */
 --dur-fast:140ms; --dur:240ms; --dur-slow:420ms;
 --ease: cubic-bezier(.22,.61,.24,1);

 --z-nav:100; --z-drawer:200; --z-overlay:300; --z-toast:400;
}




/* ---------- 2. Base ------------------------------------------------------ */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:calc(var(--header-h) + 20px)}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--font-body);
 font-size:16.5px;line-height:1.6;-webkit-font-smoothing:antialiased;overflow-wrap:break-word}
img,svg,video{max-width:100%;height:auto;display:block}
h1,h2,h3,h4{font-family:var(--font-display);font-weight:600;line-height:1.14;margin:0 0 var(--s-4);
 letter-spacing:-.018em;text-wrap:balance}
h1{font-size:clamp(2.3rem,1.4rem + 2.9vw,4rem);letter-spacing:-.032em}
h2{font-size:clamp(1.65rem,1.15rem + 1.7vw,2.6rem);letter-spacing:-.024em}
h3{font-size:clamp(1.12rem,1rem +.5vw,1.35rem);letter-spacing:-.012em}
h4,.h-sm{font-size:1.02rem;font-family:var(--font-body);font-weight:650;letter-spacing:-.005em}
.card .h-sm,.card-flat .h-sm,.media-slot .h-sm{margin-bottom:8px}
p{margin:0 0 var(--s-4);max-width:68ch}
ul,ol{margin:0 0 var(--s-4);padding-left:1.2em}
li{margin-bottom:.35em}
a{color:var(--link);text-underline-offset:3px}
a:hover{color:var(--link-hover)}
/* Link colour is a token so component rules are never out-specified by it. */
strong{font-weight:650}
hr{border:0;height:1px;margin:var(--s-7) 0;
  background:linear-gradient(90deg,var(--tc-400),var(--line) 22%,var(--line) 78%,transparent)}
:focus-visible{outline:3px solid var(--focus);outline-offset:2px;border-radius:3px}
::selection{background:var(--tc-200);color:var(--ox-900)}
.skip-link{position:absolute;left:16px;top:-120px;z-index:var(--z-toast);background:var(--ox-700);
 color:#fff;padding:12px 18px;border-radius:var(--r-md);font-weight:600;transition:top var(--dur) var(--ease)}
.skip-link:focus{top:16px;color:#fff}

/* ---------- 3. Layout ---------------------------------------------------- */
.wrap{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:20px}
@media (min-width:768px){.wrap{padding-inline:40px}}
.wrap-narrow{max-width:var(--wrap-narrow)}
section{padding-block:var(--s-8)}
@media (min-width:1024px){section{padding-block:var(--s-9)}}
section.tight{padding-block:var(--s-7)}
.band-alt{background:var(--surface-2)}
.band-lav{background:linear-gradient(180deg,var(--tc-50),var(--paper))}
.band-deep{background:var(--ox-800);color:#E8DFF3}
.band-deep h1,.band-deep h2,.band-deep h3,.band-deep h4{color:#fff}
/* Cards keep their own surface inside a dark band, so reset the inherited ink. */
.band-deep .card,.band-deep .dr-card{color:var(--ink)}
.band-deep .card h1,.band-deep .card h2,.band-deep .card h3,.band-deep .card h4,
.band-deep .dr-card h1,.band-deep .dr-card h2,.band-deep .dr-card h3,.band-deep .dr-card h4{color:var(--ink)}
.band-deep .card p,.band-deep .card li,.band-deep .dr-card p{color:var(--ink-2)}
.band-deep .card .card-num{color:var(--ox-500)}
.band-deep p{color:#E8D6CB}
.band-deep a:not(.btn){color:#F0C7AE}
.grid{display:grid;gap:var(--s-4)}
.g-2{grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}
.g-3{grid-template-columns:repeat(auto-fit,minmax(250px,1fr))}
.g-4{grid-template-columns:repeat(auto-fit,minmax(205px,1fr))}
.g-5{grid-template-columns:repeat(auto-fit,minmax(168px,1fr))}
.split{display:grid;gap:var(--s-7);grid-template-columns:1fr}
@media (min-width:900px){.split{grid-template-columns:1.02fr.98fr;align-items:start}
.split.wide-left{grid-template-columns:1.35fr.65fr}
.split.sticky-right>:last-child{position:sticky;top:calc(var(--header-h) + 24px)}}
.stack>*+*{margin-top:var(--s-4)}

/* ---------- 4. Type helpers ---------------------------------------------- */
.eyebrow{font-family:var(--font-mono);font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;
 color:var(--ox-500);font-weight:500;margin:0 0 var(--s-3);display:flex;align-items:center;gap:10px}
.eyebrow::before{content:"";width:20px;height:1.5px;background:var(--tc-400);flex:none}
.eyebrow.plain::before{display:none}
.band-deep .eyebrow{color:var(--tc-300)}
.band-deep .eyebrow::before{background:var(--tc-400)}
.lede{font-size:clamp(1.02rem,.98rem +.35vw,1.18rem);color:var(--ink-2);line-height:1.55;max-width:58ch}
.band-deep .lede{color:#E8D6CB}
.muted{color:var(--ink-3)}
.mono{font-family:var(--font-mono);font-variant-numeric:tabular-nums}
.center{text-align:center}
.center .lede,.center p{margin-inline:auto}
.center .eyebrow{justify-content:center}
.section-head{max-width:62ch;margin-bottom:var(--s-7)}
.section-head.center{margin-inline:auto}
.section-head h2{margin-bottom:var(--s-3)}

/* ---------- 5. Buttons & tags -------------------------------------------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;min-height:46px;
 padding:11px 22px;border-radius:var(--r-pill);font-size:.94rem;font-weight:600;line-height:1.2;
 border:1.5px solid transparent;cursor:pointer;text-decoration:none;white-space:nowrap;
 font-family:inherit;transition:all var(--dur) var(--ease)}
.btn svg{width:17px;height:17px;flex:none}
.btn-primary{background:var(--ox-700);color:#fff;border-color:var(--ox-700)}
.btn-primary:hover{background:var(--ox-600);border-color:var(--ox-600);color:#fff;box-shadow:var(--sh-2);transform:translateY(-1px)}
.btn-accent{background:var(--accent-solid);color:var(--accent-solid-fg);border-color:var(--accent-solid)}
.btn-accent:hover{background:#7A3A1D;border-color:#7A3A1D;color:#fff}
.btn-ghost{background:transparent;color:var(--ox-600);border-color:var(--line-2)}
.btn-ghost:hover{border-color:var(--ox-500);color:var(--ox-500);background:var(--tc-50)}
.btn-onink,.band-deep .btn-onink,.cta-band .btn-onink{background:transparent;color:#fff;border-color:rgba(255,255,255,.42)}
.btn-onink:hover,.band-deep .btn-onink:hover,.cta-band .btn-onink:hover{background:#fff;color:var(--ox-800);border-color:#fff}
.btn-onink-solid,.band-deep .btn-onink-solid,.cta-band .btn-onink-solid{background:var(--btn-solid-bg);color:var(--btn-solid-fg);border-color:var(--btn-solid-bg)}
.btn-onink-solid:hover,.band-deep .btn-onink-solid:hover,.cta-band .btn-onink-solid:hover{background:#fff;border-color:#fff;color:var(--ox-900)}
.btn-sm{min-height:38px;padding:7px 15px;font-size:.86rem}
.btn-row{display:flex;flex-wrap:wrap;gap:var(--s-3)}
.center .btn-row,.center.btn-row{justify-content:center}
@media (prefers-reduced-motion:reduce){.btn:hover{transform:none}}

.tag{display:inline-flex;align-items:center;gap:5px;padding:3px 10px;font-family:var(--font-mono);
 font-size:.66rem;letter-spacing:.08em;text-transform:uppercase;border-radius:var(--r-pill);
 border:1px solid var(--line-2);color:var(--ink-3);background:var(--surface);white-space:nowrap}
.tag-now{color:var(--ok);border-color:#A9CDBA;background:var(--ok-bg)}
.tag-build{color:var(--caution);border-color:#DEC08A;background:var(--caution-bg)}
.tag-v{color:var(--ox-600);border-color:var(--tc-300);background:var(--tc-50)}
.tag-inperson{color:var(--ox-600);border-color:var(--tc-300);background:var(--tc-50)}
.tag-virtual{color:var(--info);border-color:#A9C7D6;background:var(--info-bg)}
.tag-oncall{color:var(--terra-700);border-color:#DDB29A;background:var(--terra-50)}
.tag-board{color:var(--plum);border-color:var(--plum-line);background:var(--plum-bg)}
.tag-list{display:flex;flex-wrap:wrap;gap:6px}
.pill-row{display:flex;flex-wrap:wrap;gap:7px;list-style:none;padding:0;margin:0}
.pill-row li{border:1px solid var(--line-2);border-radius:var(--r-pill);padding:6px 14px;
 font-size:.85rem;background:var(--surface)}

/* ---------- 6. Header ---------------------------------------------------- */
.topbar{background:var(--ox-900);color:#E0C9BC;font-size:.79rem}
.topbar .wrap{display:flex;flex-wrap:wrap;gap:16px;align-items:center;justify-content:space-between;
 min-height:38px;padding-block:6px}
.topbar a{color:#F0DCD1;text-decoration:none}
.topbar a:hover{color:#fff;text-decoration:underline}
.topbar-list{display:flex;gap:18px;align-items:center;flex-wrap:wrap}
.topbar-list a{display:inline-flex;align-items:center;min-height:26px}
.topbar-list span{display:inline-flex;align-items:center;gap:6px}
.topbar svg{width:14px;height:14px;opacity:.8}
@media (max-width:760px){.topbar-meta{display:none}}

.site-header{position:sticky;top:0;z-index:var(--z-nav);background:var(--surface);
 border-bottom:1px solid var(--line)}
.site-header.scrolled{box-shadow:var(--sh-1)}
.header-inner{display:flex;align-items:center;gap:20px;min-height:var(--header-h)}
.brand{display:flex;align-items:center;gap:11px;text-decoration:none;color:var(--ink);flex:none}
.brand img{width:36px;height:44px}
.brand-text{display:flex;flex-direction:column;line-height:1.03}
.brand-name{font-family:var(--font-brand);font-weight:700;font-size:1.2rem;letter-spacing:.055em;
  color:var(--ox-700);position:relative;display:inline-block;line-height:1.1}
.brand-name::after{content:"";position:absolute;left:0;right:0;bottom:-3px;height:2px;
  background:linear-gradient(90deg,var(--tc-400) 0 38%,var(--tc-200) 38% 100%);
  transform:scaleX(1);transform-origin:left;transition:transform var(--dur) var(--ease)}
.brand:hover .brand-name::after{transform:scaleX(1.06)}
.brand-sub{font-family:var(--font-brand);font-weight:500;font-size:.56rem;letter-spacing:.15em;text-transform:uppercase;
 color:var(--ink-3);margin-top:2px}


@media (max-width:430px){.brand-sub{display:none}.brand img{width:32px;height:39px}}

.nav{margin-left:auto;display:none}
@media (min-width:1200px){.nav{display:block}.nav-toggle{display:none!important}}
.nav>ul{display:flex;gap:1px;list-style:none;margin:0;padding:0}
.nav>ul>li{position:relative}
.nav-link{display:inline-flex;align-items:center;gap:4px;padding:9px 10px;white-space:nowrap;line-height:1.25;
 font-size:.875rem;font-weight:550;color:var(--ink-2);text-decoration:none;border-radius:var(--r-sm);
 background:none;border:0;cursor:pointer;font-family:inherit;transition:all var(--dur-fast) var(--ease)}
.nav-link:hover,.nav-link[aria-expanded="true"]{color:var(--ox-600);background:var(--tc-50)}
.nav-link .chev{width:12px;height:12px;transition:transform var(--dur) var(--ease)}
.nav-link[aria-expanded="true"] .chev{transform:rotate(180deg)}
.nav-link[aria-current="page"]{color:var(--ox-600);box-shadow:inset 0 -2px 0 var(--tc-400)}
/* --- Mega menu: full-width, three-zone panel ------------------------------
 rail (sections) | panes (links) | feature. Hovering a rail item swaps the
 pane; nothing moves, so the menu never feels like it is tumbling.
 ------------------------------------------------------------------------- */
.nav > ul > li{position:static}
.mega{position:absolute;left:0;right:0;top:100%;background:var(--surface);
 border-top:1px solid var(--line);border-bottom:1px solid var(--line);
 box-shadow:0 30px 60px -20px rgba(36,26,22,.28);z-index:2;
 animation:megaIn 180ms var(--ease) both}
@keyframes megaIn{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.mega{animation:none}}
.mega[hidden]{display:none!important}
.mega-inner{display:grid;grid-template-columns:1fr;gap:0;padding-block:0}
@media (min-width:1100px){
.mega-inner{grid-template-columns:236px minmax(0,1fr) 300px;align-items:stretch;gap:0}
}

/* rail */
.mega-rail{display:flex;flex-direction:column;gap:2px;padding:26px 22px 26px 0;
 border-right:1px solid var(--line)}
.rail-btn{display:flex;align-items:center;justify-content:space-between;gap:10px;width:100%;
 padding:11px 14px;border:0;border-radius:var(--r-md);background:none;font:inherit;
 font-size:.9rem;font-weight:600;color:var(--ink-2);text-align:left;cursor:pointer;
 transition:background var(--dur-fast) var(--ease),color var(--dur-fast) var(--ease)}
.rail-btn svg{width:15px;height:15px;opacity:0;transform:translateX(-4px);
 transition:opacity var(--dur-fast) var(--ease),transform var(--dur-fast) var(--ease);flex:none}
.rail-btn:hover{background:var(--tc-50);color:var(--ox-600)}
.rail-btn[aria-selected="true"]{background:var(--ox-700);color:#fff}
.rail-btn[aria-selected="true"] svg{opacity:1;transform:none}

/* panes */
.mega-panes{padding:26px 30px}
.mega-pane[hidden]{display:none!important}
.mega-pane ul{list-style:none;margin:0;padding:0;
 display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:0 20px}
.mega-pane a{display:block;padding:7px 11px;margin-left:-11px;border-radius:var(--r-md);
 text-decoration:none;color:var(--ink);
 transition:background var(--dur-fast) var(--ease),color var(--dur-fast) var(--ease)}
.mega-pane a:hover{background:var(--tc-50);color:var(--ox-600)}
.mega-pane .t{font-weight:560;font-size:.9rem;display:block;line-height:1.35}


/* feature */
.mega-feature{border-left:1px solid var(--line);background:var(--surface-2);
 display:flex;flex-direction:column}
.mega-feature img{width:100%;height:150px;object-fit:cover;display:block;background:#FBF3EC}
.mega-feature .mf-body{padding:18px 22px 22px}
.mega-feature .mf-eyebrow{font-family:var(--font-mono);font-size:.6rem;letter-spacing:.16em;
 text-transform:uppercase;color:var(--ox-500);margin:0 0 5px}
.mega-feature .mf-title{font-family:var(--font-display);font-size:1.1rem;font-weight:640;
 letter-spacing:-.014em;margin:0 0 9px;color:var(--ink);line-height:1.2}
.mega-feature .mf-text{font-size:.79rem;line-height:1.55;color:var(--ink-2);margin:0 0 14px}


@media (max-width:1099px){
.mega-rail{flex-direction:row;overflow-x:auto;border-right:0;border-bottom:1px solid var(--line);padding:16px 0}
.mega-feature{display:none}
}

.header-actions{display:flex;gap:8px;align-items:center;margin-left:auto}
@media (min-width:1200px){.header-actions{margin-left:12px}}
.icon-btn{display:inline-grid;place-items:center;width:44px;height:44px;border-radius:var(--r-md);
 border:1px solid var(--line-2);background:var(--surface);color:var(--ink);cursor:pointer}
.icon-btn svg{width:19px;height:19px}
.icon-btn:hover{border-color:var(--ox-500);color:var(--ox-600)}
.header-cta{display:none}
@media (min-width:1460px){.header-cta{display:inline-flex}}
.nav-toggle{display:inline-flex;align-items:center;gap:7px;min-height:44px;padding:8px 13px;
 border:1px solid var(--line-2);background:var(--surface);color:var(--ink);border-radius:var(--r-md);
 font-family:inherit;font-size:.86rem;font-weight:600;cursor:pointer}
.nav-toggle svg{width:19px;height:19px}

.drawer{position:fixed;inset:0;z-index:var(--z-drawer);display:grid;grid-template-columns:1fr min(430px,93vw)}
.drawer[hidden]{display:none!important}
.drawer-scrim{background:rgba(46,15,19,.6);border:0;cursor:pointer;backdrop-filter:blur(2px)}
.drawer-panel{background:var(--surface);overflow-y:auto;padding:20px 20px 80px;border-left:1px solid var(--line)}
.drawer-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px}
.drawer-close{min-height:44px;min-width:44px;border:1px solid var(--line-2);background:var(--surface);
 border-radius:var(--r-md);cursor:pointer;color:var(--ink)}
.drawer-close svg{width:19px;height:19px;margin-inline:auto}
.drawer nav ul{list-style:none;margin:0;padding:0}
.d-group{border-top:1px solid var(--line)}
.d-top{width:100%;display:flex;justify-content:space-between;align-items:center;gap:10px;padding:13px 4px;
 background:none;border:0;font:inherit;font-weight:640;color:var(--ink);cursor:pointer;text-align:left;
 min-height:50px;text-decoration:none}
.d-top svg{width:15px;height:15px;transition:transform var(--dur) var(--ease);flex:none}
.d-top[aria-expanded="true"] svg{transform:rotate(180deg)}
.d-sub{padding:0 0 10px 4px}
.d-sub[hidden]{display:none!important}
.d-sub a{display:block;padding:10px;min-height:44px;color:var(--ink-2);text-decoration:none;
 border-left:2px solid var(--line);font-size:.92rem}
.d-sub a:hover{color:var(--ox-600);border-left-color:var(--tc-400);background:var(--tc-50)}

/* ---------- 7. Search overlay -------------------------------------------- */
.search-overlay{position:fixed;inset:0;z-index:var(--z-overlay);background:rgba(46,15,19,.55);
 backdrop-filter:blur(3px);padding:8vh 16px 16px;overflow-y:auto}
.search-overlay[hidden]{display:none!important}
.search-panel{max-width:660px;margin-inline:auto;background:var(--surface);border-radius:var(--r-xl);
 box-shadow:var(--sh-3);overflow:hidden}
.search-bar{display:flex;align-items:center;gap:12px;padding:16px 20px;border-bottom:1px solid var(--line)}
.search-bar svg{width:21px;height:21px;color:var(--ink-3);flex:none}
.search-bar input{flex:1;font:inherit;font-size:1.06rem;border:0;background:none;color:var(--ink);outline:none;min-height:36px}
.search-hint{padding:10px 20px;font-size:.78rem;color:var(--ink-3);background:var(--surface-2);
 font-family:var(--font-mono);letter-spacing:.02em}
.search-results{list-style:none;margin:0;padding:8px;max-height:52vh;overflow-y:auto}
.search-results li{margin:0}
.search-results a{display:flex;gap:12px;align-items:baseline;padding:11px 12px;border-radius:var(--r-md);
 text-decoration:none;color:var(--ink)}
.search-results a:hover,.search-results a:focus-visible{background:var(--tc-50)}
.search-results .r-t{font-weight:620;font-size:.95rem}
.search-results .r-d{font-size:.8rem;color:var(--ink-3);display:block}
.search-results .r-k{font-family:var(--font-mono);font-size:.64rem;letter-spacing:.08em;text-transform:uppercase;
 color:var(--ox-500);border:1px solid var(--tc-300);border-radius:var(--r-pill);padding:2px 8px;flex:none}
.search-empty{padding:28px 20px;text-align:center;color:var(--ink-3)}

/* ---------- 8. Hero ------------------------------------------------------ */
.hero{position:relative;overflow:hidden;padding-block:var(--s-8) var(--s-8);
 background:linear-gradient(155deg,var(--ox-900) 0%,var(--ox-800) 42%,var(--grad-warm) 100%);color:#EDE4F5}
.hero::after{content:"";position:absolute;inset:0;pointer-events:none;
 background:radial-gradient(circle at 78% 18%,rgba(176,86,47,.28),transparent 55%),
 radial-gradient(circle at 12% 92%,rgba(209,154,118,.24),transparent 50%)}
.hero .wrap{position:relative;z-index:1}
.hero h1{color:#fff}
.hero .lede{color:#EBD8CC;max-width:52ch}
.hero-kicker{font-family:var(--font-mono);font-size:.7rem;letter-spacing:.18em;text-transform:uppercase;
 color:#EFC4A8;margin-bottom:var(--s-4)}
.hero-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(118px,1fr));gap:var(--s-4);
 margin-top:var(--s-7);padding-top:var(--s-5);border-top:1px solid rgba(255,255,255,.16)}
.hero-stat .v{font-family:var(--font-display);font-size:1.55rem;font-weight:650;color:#fff;
 font-variant-numeric:tabular-nums;line-height:1.08}
.hero-stat .l{font-size:.82rem;color:#DCC4B5;line-height:1.4}

.page-hero{background:linear-gradient(150deg,var(--ox-900),var(--ox-700) 75%,var(--grad-warm));
 color:#EDE4F5;padding-block:var(--s-7) var(--s-8)}
.page-hero h1{color:#fff}
.page-hero .lede{color:#EBD8CC}
.page-hero .eyebrow{color:#EFC4A8}
.page-hero .eyebrow::before{background:var(--tc-400)}
.breadcrumb{font-size:.8rem;margin-bottom:var(--s-5);color:#E3CBBC}
.breadcrumb ol{list-style:none;display:flex;flex-wrap:wrap;gap:8px;margin:0;padding:0}
.breadcrumb li::after{content:"/";margin-left:8px;opacity:.5}
.breadcrumb li:last-child::after{content:""}
.breadcrumb a{color:#F0DCD1;display:inline-block;padding:3px 0;min-height:24px}
.breadcrumb [aria-current="page"]{color:#fff;font-weight:600}

/* ---------- 9. Cards ----------------------------------------------------- */
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:20px;
 transition:border-color var(--dur) var(--ease),box-shadow var(--dur) var(--ease),transform var(--dur) var(--ease)}
.card>:last-child{margin-bottom:0}
.card h3{margin-bottom:10px}
.card p{font-size:.93rem;color:var(--ink-2)}
a.card{text-decoration:none;color:inherit;display:block}
a.card:hover{border-color:var(--tc-400);box-shadow:var(--glow);transform:translateY(-2px);color:inherit}
@media (prefers-reduced-motion:reduce){a.card:hover{transform:none}}
.card-icon{width:40px;height:40px;border-radius:var(--r-md);background:var(--tc-50);color:var(--ox-600);
 display:grid;place-items:center;margin-bottom:14px;border:1px solid var(--tc-200)}
.card-icon svg{width:21px;height:21px}
.card-num{font-family:var(--font-mono);font-size:.68rem;letter-spacing:.12em;color:var(--ox-500);margin-bottom:8px;text-transform:uppercase}
.card-more{display:inline-flex;align-items:center;gap:6px;font-weight:620;font-size:.87rem;color:var(--ox-600);margin-top:12px}
.card-more svg{width:14px;height:14px;transition:transform var(--dur) var(--ease)}
a.card:hover .card-more svg{transform:translateX(3px)}
.card-flat{border:0;border-top:2px solid var(--ox-700);border-radius:0;padding:14px 0 0;background:none}
.band-deep .card-flat{border-top-color:var(--tc-400)}
.band-deep .card-flat p{color:#E8D6CB;font-size:.92rem}
.card-deep{background:rgba(255,255,255,.055);border:1px solid rgba(255,255,255,.14);border-radius:var(--r-lg);padding:20px}
.card-deep h3,.card-deep h4{color:#fff}
.card-deep p{color:#EFDCD0;font-size:.92rem}
.card-deep small,.band-deep small{color:#EFDCD0}
.band-deep .card-num{color:var(--tc-300)}

/* ---------- 10. Entry tiles ---------------------------------------------- */
.entry-grid{display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(215px,1fr))}
.entry{display:flex;align-items:center;gap:13px;padding:16px 18px;border-radius:var(--r-lg);
 background:var(--surface);border:1px solid var(--line);text-decoration:none;color:var(--ink);
 font-weight:600;font-size:.94rem;line-height:1.3;min-height:74px;
 transition:all var(--dur) var(--ease)}
.entry .ei{width:38px;height:38px;flex:none;border-radius:var(--r-md);display:grid;place-items:center;
 background:var(--tc-50);color:var(--ox-600);border:1px solid var(--tc-200)}
.entry .ei svg{width:20px;height:20px}
.entry .ea{margin-left:auto;width:15px;height:15px;color:var(--line-3);transition:all var(--dur) var(--ease);flex:none}
.entry:hover{border-color:var(--ox-500);box-shadow:var(--glow);color:var(--ox-700);transform:translateY(-2px)}
.entry:hover .ei{background:var(--ox-700);color:#fff;border-color:var(--ox-700)}
.entry:hover .ea{color:var(--ox-600);transform:translateX(3px)}
@media (prefers-reduced-motion:reduce){.entry:hover{transform:none}}

/* ---------- 11. Diagrams ------------------------------------------------- */
.flowrail{position:relative;padding-left:38px}
.flowrail::before{content:"";position:absolute;left:13px;top:8px;bottom:8px;width:2px;
 background:linear-gradient(180deg,var(--tc-300),var(--ox-500),var(--tc-300))}
.flowrail>.fr{position:relative;padding-bottom:20px}
.flowrail>.fr:last-child{padding-bottom:0}
.flowrail>.fr::before{content:"";position:absolute;left:-31px;top:5px;width:12px;height:12px;
 border-radius:50%;background:var(--surface);border:2.5px solid var(--ox-500)}
.flowrail .fr-t{font-weight:640;font-size:.98rem;display:block;margin-bottom:2px}
.flowrail .fr-d{font-size:.87rem;color:var(--ink-3)}
.band-deep .flowrail::before{background:linear-gradient(180deg,var(--tc-400),rgba(255,255,255,.25),var(--tc-400))}
.band-deep .flowrail>.fr::before{background:var(--ox-800);border-color:var(--tc-300)}
.band-deep .flowrail .fr-d{color:#E3CBBC}

.chain{display:flex;flex-wrap:wrap;align-items:stretch;gap:8px;list-style:none;margin:0 0 var(--s-4);padding:0}
.chain li{flex:1 1 132px;min-width:120px;background:var(--surface);border:1px solid var(--line);
 border-radius:var(--r-md);padding:12px 13px;font-size:.85rem;font-weight:600;position:relative;color:var(--ink)}
.chain li .cn{display:block;font-family:var(--font-mono);font-size:.62rem;letter-spacing:.1em;
 color:var(--ox-500);margin-bottom:4px}
.chain li .cd{display:block;font-weight:400;font-size:.78rem;color:var(--ink-3);margin-top:3px;line-height:1.35}
.band-deep .chain li{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.15);color:#fff}
.band-deep .chain li .cn{color:var(--tc-300)}
.band-deep .chain li .cd{color:#E3CBBC}

.stack-diagram{display:grid;gap:10px}
.sd-row{display:grid;gap:8px;grid-template-columns:repeat(auto-fit,minmax(108px,1fr))}
.sd-box{border:1px solid var(--line);border-radius:var(--r-md);padding:12px 11px;background:var(--surface);
 text-align:center;font-size:.85rem;font-weight:600;color:var(--ink);display:flex;flex-direction:column;justify-content:center;gap:3px}
.sd-box small{display:block;font-weight:400;color:var(--ink-3);font-size:.73rem;line-height:1.3}
.sd-box.hub{background:var(--ox-700);color:#fff;border-color:var(--ox-700)}
.sd-box.hub small{color:var(--tc-300)}
.sd-box.alt{background:var(--tc-50);border-color:var(--tc-200);color:var(--ox-700)}
.sd-arrow{text-align:center;color:var(--tc-400);font-size:1.1rem;line-height:1}
.band-deep .sd-box,.hero .sd-box{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.20);color:#fff}
.band-deep .sd-box small,.hero .sd-box small{color:#EBD5C7}
.band-deep .sd-box.hub,.hero .sd-box.hub{background:var(--tc-300);color:var(--ox-900);border-color:var(--tc-300)}
.band-deep .sd-box.hub small,.hero .sd-box.hub small{color:var(--ox-700)}
.band-deep .sd-box.alt,.hero .sd-box.alt{background:rgba(209,154,118,.22);border-color:rgba(209,154,118,.45);color:#fff}
.hero .sd-arrow,.band-deep .sd-arrow{color:var(--tc-300)}
.hero .eyebrow{color:#EFC4A8}
.hero .eyebrow::before{background:var(--tc-400)}

.hub-fig{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:20px}
.hero .hub-fig{background:#2B0E11;border-color:rgba(255,255,255,.20);color:#F3E4DA}
.hero .hub-fig .eyebrow{color:#F5D6C2}
.hero .hub-fig .eyebrow::before{background:#E0A277}
.hero .hub-fig h2,.hero .hub-fig h3,.hero .hub-fig h4,.hero .hub-fig .h-sm{color:#fff}
.hero .hub-fig p,.hero .hub-fig li,.hero .hub-fig small{color:#EBD5C7}
.hub-note{font-size:.82rem;margin:14px 0 0}
.hero .hub-fig .card-flat{border-top-color:var(--tc-300)}
.hero .hub-fig .card-flat p{color:#E8D0C2}
.band-deep .hub-fig{background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.14)}
.hub-fig svg{width:100%;height:auto}

.numgrid{display:grid;gap:10px;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));list-style:none;padding:0;margin:0}
.numgrid a{display:block;padding:15px;border-radius:var(--r-md);border:1px solid var(--line);
 background:var(--surface);text-decoration:none;color:var(--ink);transition:all var(--dur) var(--ease);height:100%}
.numgrid a:hover{border-color:var(--ox-500);background:var(--tc-50);color:var(--ox-700);transform:translateY(-2px)}
.numgrid .n{font-family:var(--font-mono);font-size:.66rem;color:var(--ox-500);letter-spacing:.1em;display:block;margin-bottom:5px}
.numgrid .t{font-weight:620;font-size:.92rem;display:block;line-height:1.3}
.numgrid .d{font-size:.79rem;color:var(--ink-3);display:block;margin-top:4px;line-height:1.4}
@media (prefers-reduced-motion:reduce){.numgrid a:hover{transform:none}}

/* ---------- 12. Callouts & quotes ---------------------------------------- */
.callout{border-left:3px solid var(--ox-500);background:var(--tc-50);padding:18px 20px;
 border-radius:0 var(--r-md) var(--r-md) 0;margin-block:var(--s-5)}
.callout>:last-child{margin-bottom:0}
.callout-title{font-family:var(--font-mono);font-size:.68rem;letter-spacing:.13em;text-transform:uppercase;
 color:var(--ox-500);font-weight:600;margin-bottom:9px;display:block}
.callout-info{border-left-color:var(--info);background:var(--info-bg)}
.callout-info .callout-title{color:var(--info)}
.callout-warn{border-left-color:var(--danger);background:var(--danger-bg)}
.callout-warn .callout-title{color:var(--danger)}
.band-deep .callout{background:rgba(255,255,255,.07);border-left-color:var(--tc-300)}
.band-deep .callout-title{color:var(--tc-300)}
.pull{font-family:var(--font-display);font-size:clamp(1.3rem,1rem + 1.4vw,2rem);line-height:1.28;
 color:var(--ink);letter-spacing:-.02em;max-width:24ch}
.band-deep .pull{color:#fff}

/* ---------- 13. Tables --------------------------------------------------- */
.table-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:var(--r-lg);background:var(--surface);margin-bottom:var(--s-4)}
table{width:100%;border-collapse:collapse;font-size:.9rem;min-width:600px}
thead th{text-align:left;background:var(--surface-2);color:var(--ink);font-weight:700;font-size:.74rem;
 letter-spacing:.07em;text-transform:uppercase;padding:12px 16px;border-bottom:1px solid var(--line-2);
 vertical-align:bottom;white-space:nowrap}
tbody td,tbody th{padding:13px 16px;border-bottom:1px solid var(--line);vertical-align:top;text-align:left}
tbody th{font-weight:640}
tbody tr:last-child td,tbody tr:last-child th{border-bottom:0}
tbody tr:hover{background:var(--tc-50)}
td.price,th.price{font-family:var(--font-mono);font-variant-numeric:tabular-nums;white-space:nowrap;font-size:.86rem}
caption{caption-side:top;text-align:left;padding:13px 16px;font-weight:650;border-bottom:1px solid var(--line)}
.table-note{font-size:.82rem;color:var(--ink-3);margin-top:-4px;margin-bottom:var(--s-6);max-width:80ch}
.scroll-hint{font-size:.75rem;color:var(--ink-3);font-family:var(--font-mono);margin-bottom:6px}
@media (min-width:760px){.scroll-hint{display:none}}

/* ---------- 14. Accordion & tabs ----------------------------------------- */
.acc{border-top:1px solid var(--line)}
.acc-item{border-bottom:1px solid var(--line)}
.acc-btn{width:100%;display:flex;gap:16px;align-items:flex-start;justify-content:space-between;
 padding:16px 4px;background:none;border:0;font:inherit;color:var(--ink);text-align:left;cursor:pointer;min-height:56px}
.acc-btn:hover{color:var(--ox-600)}
.acc-t{font-weight:640;font-size:1rem}
.acc-meta{display:block;font-size:.81rem;color:var(--ink-3);font-weight:400;margin-top:3px}
.acc-ico{width:20px;height:20px;flex:none;margin-top:4px;color:var(--ox-500);transition:transform var(--dur) var(--ease)}
.acc-btn[aria-expanded="true"] .acc-ico{transform:rotate(45deg)}
.acc-panel{padding:0 4px 20px}
.acc-panel[hidden]{display:none!important}

.tabs{display:flex;flex-wrap:wrap;gap:6px;border-bottom:1px solid var(--line);margin-bottom:var(--s-6)}
.tab{padding:11px 16px;min-height:46px;background:none;border:0;border-bottom:3px solid transparent;
 font:inherit;font-weight:620;font-size:.91rem;color:var(--ink-3);cursor:pointer}
.tab:hover{color:var(--ox-600)}
.tab[aria-selected="true"]{color:var(--ox-600);border-bottom-color:var(--tc-400)}
[role="tabpanel"][hidden]{display:none!important}

/* ---------- 15. Media slots ---------------------------------------------- */
.media-slot{border:1.5px dashed var(--line-3);border-radius:var(--r-lg);
 background:repeating-linear-gradient(135deg,transparent,transparent 11px,rgba(107,32,39,.05) 11px,rgba(107,32,39,.05) 22px),var(--surface-2);
 padding:20px;display:flex;flex-direction:column;gap:11px;margin-block:var(--s-4);position:relative}
.media-slot::before{content:attr(data-kind);position:absolute;top:-10px;left:16px;background:var(--ox-700);
 color:#fff;font-family:var(--font-mono);font-size:.6rem;letter-spacing:.12em;text-transform:uppercase;
 padding:3px 10px;border-radius:var(--r-pill)}
.media-slot.is-video::before{background:var(--terra-700)}
.media-slot.is-diagram::before{background:var(--plum)}
.media-slot-head{display:flex;flex-wrap:wrap;gap:10px;align-items:baseline;justify-content:space-between;margin-top:4px}
.media-slot-id{font-family:var(--font-mono);font-size:.7rem;letter-spacing:.1em;color:var(--ox-500);font-weight:500}
.media-slot-spec{font-family:var(--font-mono);font-size:.7rem;color:var(--ink-3)}
.media-slot h4{margin:0;font-size:.98rem;font-family:var(--font-display);font-weight:640}
.media-slot p{margin:0;font-size:.87rem;color:var(--ink-2);max-width:66ch}
.media-slot ul{margin:0;padding-left:1.1em;font-size:.83rem;color:var(--ink-2)}
.media-slot li{margin-bottom:.2em}
.slot-consent{font-size:.76rem;color:var(--caution);background:var(--caution-bg);border:1px solid #E4CB9A;
 border-radius:var(--r-sm);padding:7px 10px;display:flex;gap:7px;align-items:flex-start}
.slot-consent svg{width:14px;height:14px;flex:none;margin-top:2px}
.ratio-16x9{min-height:250px}.ratio-4x3{min-height:230px}.ratio-1x1{min-height:220px}.ratio-portrait{min-height:300px}
body.hide-slots .media-slot{display:none!important}
.slot-toggle{position:fixed;right:16px;bottom:16px;z-index:var(--z-toast);display:inline-flex;align-items:center;
 gap:8px;min-height:44px;padding:9px 15px;border-radius:var(--r-pill);border:1px solid var(--line-2);
 background:var(--surface);color:var(--ink);font:inherit;font-size:.82rem;font-weight:620;cursor:pointer;box-shadow:var(--sh-2)}
.slot-toggle svg{width:16px;height:16px}
.slot-toggle:hover{border-color:var(--ox-500);color:var(--ox-600)}
@media print{.slot-toggle{display:none}}

/* ---------- 16. Doctor cards --------------------------------------------- */
.filter-bar{display:flex;flex-wrap:wrap;gap:12px;align-items:flex-end;padding:16px;background:var(--surface);
 border:1px solid var(--line);border-radius:var(--r-lg);margin-bottom:var(--s-5)}
.field{display:flex;flex-direction:column;gap:5px;min-width:180px;flex:1 1 180px}
.field label{font-size:.75rem;font-weight:650;letter-spacing:.05em;text-transform:uppercase;color:var(--ink-3)}
.field select,.field input,.field textarea{font:inherit;font-size:.92rem;padding:10px 12px;min-height:46px;
 border:1px solid var(--line-2);border-radius:var(--r-md);background:var(--surface);color:var(--ink)}
.field textarea{min-height:110px;resize:vertical}
.field .hint{font-size:.77rem;color:var(--ink-3)}
.filter-count{font-family:var(--font-mono);font-size:.8rem;color:var(--ink-3);margin-bottom:var(--s-4)}
.panel-grid{display:grid;gap:16px;grid-template-columns:repeat(auto-fill,minmax(290px,1fr))}
.dr-card{display:flex;flex-direction:column;background:var(--surface);border:1px solid var(--line);
 border-radius:var(--r-lg);overflow:hidden}
.dr-card.is-lead{border-color:var(--tc-400);box-shadow:var(--glow)}
.dr-photo{position:relative;aspect-ratio:4/3;overflow:hidden;border-bottom:1px solid var(--line);background:#FBF3EC}
.dr-photo img{width:100%;height:100%;object-fit:cover;object-position:center 32%;display:block}


.dr-photo .ph-note{position:absolute;left:0;right:0;bottom:0;padding:6px 9px;font-family:var(--font-mono);
 font-size:.6rem;letter-spacing:.05em;color:var(--ink-3);background:var(--surface);
 border-top:1px solid var(--line);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
body.hide-slots .dr-photo .ph-note{display:none}
.ph-label{font-family:var(--font-mono);font-size:.63rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3)}
.ph-spec{font-family:var(--font-mono);font-size:.66rem;color:var(--ox-500);margin-top:4px}
.dr-photo svg{width:30px;height:30px;color:var(--line-3);margin:0 auto 8px}
.dr-body{padding:16px;display:flex;flex-direction:column;gap:8px;flex:1}
.dr-name{font-family:var(--font-display);font-size:1.08rem;font-weight:650;margin:0;line-height:1.22}
.dr-name .tbc{color:var(--ink-3);font-style:italic;font-weight:400;font-size:.93rem}
.dr-role{font-size:.85rem;color:var(--ox-600);font-weight:620;line-height:1.35}
.dr-qual{font-family:var(--font-mono);font-size:.74rem;color:var(--ink-3)}
.dr-card p{font-size:.87rem;color:var(--ink-2);margin:0}
.dr-meta{font-size:.82rem;color:var(--ink-2);display:flex;flex-direction:column;gap:4px}
.dr-meta div{display:flex;gap:7px;align-items:flex-start}
.dr-meta svg{width:14px;height:14px;flex:none;margin-top:3px;color:var(--ink-3)}
.dr-foot{margin-top:auto;padding-top:10px;border-top:1px solid var(--line)}
.empty-state{border:1px dashed var(--line-2);border-radius:var(--r-lg);padding:var(--s-7);text-align:center;color:var(--ink-3)}

/* ---------- 17. Steps, lists, stats -------------------------------------- */
.steps{counter-reset:st;list-style:none;padding:0;margin:0}
.steps>li{counter-increment:st;position:relative;padding-left:52px;padding-bottom:22px;
 border-left:1px solid var(--line);margin-left:16px}
.steps>li:last-child{border-left-color:transparent;padding-bottom:0}
.steps>li::before{content:counter(st,decimal-leading-zero);position:absolute;left:-16px;top:0;width:32px;height:32px;
 border-radius:50%;background:var(--ox-700);color:#fff;display:grid;place-items:center;
 font-family:var(--font-mono);font-size:.7rem;font-weight:500}
.steps h4{margin-bottom:4px}
.steps p{margin-bottom:0;font-size:.91rem;color:var(--ink-2)}
.check-list{list-style:none;padding:0}
.check-list li{display:flex;gap:10px;align-items:flex-start;margin-bottom:10px;font-size:.94rem}
.check-list svg{width:18px;height:18px;flex:none;margin-top:3px;color:var(--ox-500)}
.x-list li svg{color:var(--danger)}
.def-list{display:grid;border-top:1px solid var(--line)}
.def-list>div{display:grid;grid-template-columns:1fr;gap:4px;padding:14px 0;border-bottom:1px solid var(--line)}
@media (min-width:720px){.def-list>div{grid-template-columns:230px 1fr;gap:20px}}
.def-list dt{font-weight:640}
.def-list dd{margin:0;color:var(--ink-2);font-size:.93rem}
.stat-strip{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:var(--s-5)}
.stat{border-top:2px solid var(--tc-400);padding-top:14px}
.stat .v{font-family:var(--font-display);font-size:clamp(1.6rem,1.2rem + 1.2vw,2.2rem);font-weight:650;
 color:var(--ox-700);line-height:1.05;font-variant-numeric:tabular-nums}
.stat .l{font-size:.85rem;color:var(--ink-2);margin-top:5px}
.band-deep .stat .v{color:#fff}
.band-deep .stat .l{color:#DCC4B5}
.ps-note{font-size:.84rem;color:var(--ink-2)}

/* ---------- 18. PDF actions ---------------------------------------------- */
.pdf-actions{display:flex;flex-wrap:wrap;gap:8px;align-items:center;padding:14px 16px;background:var(--tc-50);
 border:1px solid var(--tc-200);border-radius:var(--r-lg);margin-block:var(--s-5)}
.pdf-actions .pa-label{font-family:var(--font-mono);font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;
 color:var(--ox-500);margin-right:4px}
.pdf-actions .btn{min-height:38px;padding:7px 14px;font-size:.85rem}
.band-deep .pdf-actions{background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.16)}
.band-deep .pdf-actions .pa-label{color:var(--tc-300)}

/* ---------- 19. Configurator & network ----------------------------------- */
.config{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-xl);padding:24px;box-shadow:var(--sh-1)}
.config fieldset{border:0;padding:0;margin:0 0 22px}
.config legend{font-weight:650;font-size:.95rem;margin-bottom:10px;padding:0;display:flex;gap:9px;align-items:center}
.config legend .qn{font-family:var(--font-mono);font-size:.66rem;color:var(--ox-500);border:1px solid var(--tc-300);
 border-radius:var(--r-pill);padding:2px 8px;letter-spacing:.08em}
.opts{display:flex;flex-wrap:wrap;gap:8px}
.opt{position:relative}
.opt input{position:absolute;opacity:0;width:1px;height:1px}
.opt span{display:inline-flex;align-items:center;min-height:42px;padding:9px 15px;border-radius:var(--r-pill);
 border:1px solid var(--line-2);background:var(--surface);font-size:.88rem;font-weight:550;cursor:pointer;
 transition:all var(--dur-fast) var(--ease);color:var(--ink)}
.opt span:hover{border-color:var(--ox-500);color:var(--ox-600)}
.opt input:checked+span{background:var(--ox-700);border-color:var(--ox-700);color:#fff}
.opt input:focus-visible+span{outline:3px solid var(--focus);outline-offset:2px}
.config-out{border-top:1px solid var(--line);padding-top:20px;margin-top:4px}
.config-result{background:var(--tc-50);border:1px solid var(--tc-200);border-radius:var(--r-lg);padding:20px}
.config-result h3{margin-bottom:6px;color:var(--ox-600)}
.config-result .rt{font-family:var(--font-mono);font-size:.68rem;letter-spacing:.12em;text-transform:uppercase;
 color:var(--ox-500);display:block;margin-bottom:8px}

.net-filter{display:flex;flex-wrap:wrap;gap:7px;margin-bottom:var(--s-5)}
.net-chip{min-height:40px;padding:8px 15px;border-radius:var(--r-pill);border:1px solid var(--line-2);
 background:var(--surface);font:inherit;font-size:.86rem;font-weight:550;cursor:pointer;color:var(--ink)}
.net-chip:hover{border-color:var(--ox-500);color:var(--ox-600)}
.net-chip[aria-pressed="true"]{background:var(--ox-700);border-color:var(--ox-700);color:#fff}

/* ---------- 20. Footer --------------------------------------------------- */
.site-footer{background:var(--ox-950);color:#DCC7BA;padding-block:var(--s-8) var(--s-6);margin-top:var(--s-9)}
.site-footer a{color:#F0DCD1;text-decoration:none}
.site-footer a:hover{color:#fff;text-decoration:underline}
.footer-grid{display:grid;gap:var(--s-6);grid-template-columns:repeat(auto-fit,minmax(175px,1fr))}
.footer-brand{grid-column:1/-1}
@media (min-width:1080px){.footer-brand{grid-column:span 1}}
.footer-brand .brand-name{color:#fff}
.footer-brand .brand-sub{color:#B49B8D}
.footer-grid h3{font-family:var(--font-body);font-size:.72rem;letter-spacing:.13em;text-transform:uppercase;
 color:#C2A493;margin-bottom:14px;font-weight:700}
.footer-grid ul{list-style:none;padding:0;margin:0}
.footer-grid li{font-size:.87rem}
.footer-grid li a{display:inline-block;padding:5px 0;min-height:24px}
.footer-legal{border-top:1px solid rgba(255,255,255,.12);margin-top:var(--s-7);padding-top:var(--s-5);
 font-size:.8rem;color:#B49B8D}
.footer-legal p{max-width:100%}
.footer-legal strong{color:#DCC7BA}
.reg-line{font-family:var(--font-mono);font-size:.74rem}

/* ---------- 21. Motion & print ------------------------------------------- */
@media (prefers-reduced-motion:reduce){
 *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}
}
@media print{
.site-header,.topbar,.drawer,.slot-toggle,.search-overlay,.cta-band{display:none!important}
 body{background:#fff;font-size:11pt}
.media-slot{break-inside:avoid}
}

/* ---------- 22. CTA band ------------------------------------------------- */
.cta-band{background:linear-gradient(135deg,var(--ox-800),var(--ox-700) 60%,var(--grad-warm));
 color:#EDE4F5;border-radius:var(--r-xl);padding:34px;position:relative;overflow:hidden}
.cta-band::after{content:"";position:absolute;inset:0;pointer-events:none;
 background:radial-gradient(circle at 88% 12%,rgba(176,86,47,.28),transparent 55%)}
.cta-band>*{position:relative;z-index:1}
.cta-band h2{color:#fff;margin-bottom:10px}
.cta-band p{color:#E8D6CB}


/* ---------- 23. OnKommon lockup ------------------------------------------
 Every mention of OnKommon on this site carries the mark. Swap
 assets/img/onkommon-logo.svg for the official asset; nothing else changes.
 -------------------------------------------------------------------------- */
.onk-lockup{display:inline-flex;align-items:center;gap:9px;padding:6px 13px 6px 9px;
 border:1px solid var(--line-2);border-radius:var(--r-pill);background:#FFFFFF;
 text-decoration:none;color:#241A16;font-size:.83rem;font-weight:600;white-space:nowrap;
 transition:all var(--dur) var(--ease);vertical-align:middle}
.onk-lockup img{height:22px;width:auto;display:block}
.onk-lockup .onk-role{font-family:var(--font-mono);font-size:.62rem;letter-spacing:.1em;
 text-transform:uppercase;color:#6B5A52;font-weight:500}
.onk-lockup:hover{border-color:var(--tc-400);box-shadow:var(--glow);color:#241A16}
.onk-lockup svg{width:12px;height:12px;color:#6B5A52;flex:none}
.onk-lockup-lg{padding:12px 20px 12px 14px;gap:14px;font-size:.95rem;border-radius:var(--r-lg)}
.onk-lockup-lg img{height:38px}
.band-deep .onk-lockup,.hero .onk-lockup{background:#FFFFFF;border-color:rgba(255,255,255,.35);color:#241A16}
.band-deep .onk-lockup .onk-role,.hero .onk-lockup .onk-role{color:#6B5A52}
.band-deep .onk-lockup svg,.hero .onk-lockup svg{color:#6B5A52}
.onk-inline{display:inline-flex;align-items:center;gap:6px;white-space:nowrap}
.onk-inline img{height:17px;width:auto;display:inline-block;vertical-align:-3px}
.onk-badge{display:inline-flex;align-items:center;gap:8px;font-family:var(--font-mono);font-size:.63rem;
 letter-spacing:.11em;text-transform:uppercase;color:var(--ink-3)}
.onk-badge img{height:19px;width:auto}
.partner-strip{display:flex;flex-wrap:wrap;align-items:center;gap:14px;padding:16px 18px;
 border:1px solid var(--line);border-radius:var(--r-lg);background:var(--surface-2)}
.partner-strip .ps-label{font-family:var(--font-mono);font-size:.65rem;letter-spacing:.12em;
 text-transform:uppercase;color:var(--ink-3)}
.band-deep .partner-strip{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.2)}
.band-deep .partner-strip .ps-label,.hero .partner-strip .ps-label{color:#EFC4A8}


/* ---------- 24. Expanded nav, mega columns, home interactions -------------- */
@media (min-width:1200px){.nav-link{padding:9px 7px;font-size:.83rem}}
@media (min-width:1400px){.nav-link{padding:9px 10px;font-size:.87rem}}

/* Interactive route picker on the home page */
.picker{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-xl);
 padding:22px;box-shadow:var(--sh-1)}
.picker-tabs{display:flex;flex-wrap:wrap;gap:7px;margin-bottom:20px}
.picker-tab{min-height:42px;padding:9px 16px;border-radius:var(--r-pill);border:1px solid var(--line-2);
 background:var(--surface);font:inherit;font-size:.88rem;font-weight:600;cursor:pointer;color:var(--ink);
 transition:all var(--dur-fast) var(--ease)}
.picker-tab:hover{border-color:var(--ox-500);color:var(--ox-600)}
.picker-tab[aria-selected="true"]{background:var(--ox-700);border-color:var(--ox-700);color:#fff}
.picker-panel[hidden]{display:none!important}
.picker-panel .pp-lede{font-size:.98rem;color:var(--ink-2);margin-bottom:16px;max-width:62ch}
.route{display:grid;gap:10px;grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}
.route a{display:flex;flex-direction:column;gap:4px;padding:14px 16px;border-radius:var(--r-md);
 border:1px solid var(--line);background:var(--paper);text-decoration:none;color:var(--ink);
 transition:all var(--dur) var(--ease)}
.route a:hover{border-color:var(--ox-500);background:var(--tc-50);transform:translateY(-2px)}
.route .rt{font-weight:640;font-size:.94rem}
.route .rd{font-size:.82rem;color:var(--ink-3);line-height:1.4}
@media (prefers-reduced-motion:reduce){.route a:hover{transform:none}}

/* Compact index list, used for the A–Z libraries */
.az{columns:2;column-gap:32px;list-style:none;padding:0;margin:0}
@media (min-width:900px){.az{columns:3}}
.az li{break-inside:avoid;margin-bottom:4px}
.az a{display:block;padding:7px 9px;border-radius:var(--r-sm);text-decoration:none;color:var(--ink);font-size:.92rem}
.az a:hover{background:var(--tc-50);color:var(--ox-600)}

/* Stat band */
.figure-row{display:grid;gap:var(--s-5);grid-template-columns:repeat(auto-fit,minmax(150px,1fr))}
.figure{text-align:left}
.figure .fv{font-family:var(--font-display);font-size:clamp(1.8rem,1.3rem + 1.4vw,2.6rem);font-weight:650;
 line-height:1;color:var(--ox-700)}
.figure .fl{font-size:.86rem;color:var(--ink-2);margin-top:8px;line-height:1.4}
.band-deep .figure .fv{color:#fff}
.band-deep .figure .fl{color:#E8D6CB}


/* ---------- 25. Illustration frames --------------------------------------
 Authored SVG art in assets/img/art/. Each file carries its own dark-mode
 block, so one file serves both themes. To swap in real photography later,
 replace the <img> src, the frame, caption and sizing stay as they are.
 -------------------------------------------------------------------------- */
.artframe{margin:0 0 var(--s-4);border-radius:var(--r-lg);overflow:hidden;border:1px solid var(--line);
 background:var(--surface-2)}
.artframe img{width:100%;height:auto;display:block;background:#FBF3EC}
/* Photographs dropped in later should crop to a fixed ratio; SVG art should not. */
.artframe.photo img{aspect-ratio:16/10;object-fit:cover}
.artframe.photo.tall img{aspect-ratio:4/5}
.artframe.photo.wide img{aspect-ratio:21/9}
.artframe.photo.square img{aspect-ratio:1/1}


.artframe figcaption{padding:11px 15px;font-size:.82rem;color:var(--ink-3);line-height:1.45;
 border-top:1px solid var(--line);background:var(--surface)}
.artframe figcaption b{color:var(--ink-2);font-weight:640}
.art-plain{border:0;background:none}
.art-plain img{border-radius:var(--r-lg)}

/* Hero artwork */
.hero-art{border-radius:var(--r-xl);overflow:hidden;border:1px solid rgba(255,255,255,.20);
 background:rgba(255,255,255,.07);box-shadow:0 18px 50px rgba(20,6,8,.35)}
.hero-art img{width:100%;height:auto;display:block;background:#FBF3EC}
.hero-art .ha-cap{margin:0;padding:15px 18px;background:rgba(36,11,14,.55);
 border-top:1px solid rgba(255,255,255,.16);color:#EFDACD;font-size:.84rem;line-height:1.5;max-width:none}
.hero-art .ha-cap b{color:#fff;font-weight:650}
/* Image-led hero: give the artwork real estate */
.split.hero-split{grid-template-columns:1fr}
@media (min-width:960px){.split.hero-split{grid-template-columns:1fr 1.08fr;gap:var(--s-8);align-items:center}}

/* Image + text pairing used across content pages */
.media-pair{display:grid;gap:var(--s-6);grid-template-columns:1fr;align-items:center}
@media (min-width:860px){.media-pair{grid-template-columns:1fr 1fr}
.media-pair.flip>figure{order:2}}

/* Compact production note that replaces a full media-slot where art now sits */
.shotnote{font-family:var(--font-mono);font-size:.7rem;letter-spacing:.06em;color:var(--ink-3);
 border-left:2px solid var(--line-2);padding:2px 0 2px 10px;margin-top:-6px;margin-bottom:var(--s-4)}
body.hide-slots .shotnote{display:none}


/* ---------- 26. Open recruitment seats ------------------------------------ */
.tag-open{color:var(--ok);border-color:#A9CDBA;background:var(--ok-bg)}
.tag-soon{color:var(--ink-3);border-color:var(--line-2);background:var(--surface-2)}
.dr-card.is-open{border-style:dashed;border-color:var(--line-2);background:var(--surface-2)}
.dr-card.is-open .dr-body{gap:9px}
.seat-note{font-size:.86rem;color:var(--ink-3);border-left:2px solid var(--tc-300);padding-left:11px;margin:0}


/* ---------- 27. Audience switcher ---------------------------------------- */
.audience{background:var(--ox-950);border-bottom:1px solid rgba(255,255,255,.09)}
.audience .wrap{display:flex;align-items:center;gap:16px;min-height:40px;padding-block:5px;flex-wrap:wrap}
.aud-label{font-family:var(--font-mono);font-size:.62rem;letter-spacing:.16em;text-transform:uppercase;
 color:#9E8375;flex:none}
.aud-nav{display:flex;gap:4px;flex-wrap:wrap}
.aud-nav a{display:inline-flex;align-items:center;min-height:28px;padding:4px 13px;border-radius:var(--r-pill);
 font-size:.79rem;font-weight:560;color:#D8BCAC;text-decoration:none;border:1px solid transparent;
 /* Background only, never transition text colour, or the active state paints
 an interpolated low-contrast value for a frame. */
 transition:background-color var(--dur-fast) var(--ease),border-color var(--dur-fast) var(--ease);
 white-space:nowrap}
.aud-nav a:hover{color:#fff;background:rgba(255,255,255,.09)}
/* No transition on the active state: JS sets it after load, and an
 interpolated frame would paint an unreadable colour for ~140ms. */
.aud-nav a[aria-current="true"]{background:var(--tc-300);color:var(--ox-950);
 border-color:var(--tc-300);font-weight:650;transition:none}
@media (max-width:640px){.aud-label{display:none}.aud-nav a{font-size:.74rem;padding:4px 10px}}


/* ==========================================================================
 28. PREMIUM PASS
 More air, more contrast between sections, fewer identical blocks. The site
 should read as a boutique institute, not a template with content poured in.
 ========================================================================== */

/* --- Type: larger display sizes, tighter tracking, longer leading on body --- */
h1{font-size:clamp(2.5rem,1.5rem + 3.3vw,4.6rem);letter-spacing:-.036em;line-height:1.04}
h2{font-size:clamp(1.75rem,1.2rem + 1.9vw,2.9rem);letter-spacing:-.026em;line-height:1.1}
.lede{font-size:clamp(1.06rem,1rem +.42vw,1.28rem);line-height:1.6}
p{line-height:1.68}
.section-head{margin-bottom:var(--s-8)}
section{padding-block:var(--s-9)}
@media (min-width:1024px){section{padding-block:calc(var(--s-9) + 16px)}}
/* .tight sections are connectors between ideas, not ideas in themselves, so
   they take roughly half the rhythm. Note the selector: section.tight is
   (0,1,1) and a bare .tight will never override it. */
section.tight{padding-block:var(--s-6)}
@media (min-width:1440px){section.tight{padding-block:var(--s-7)}}

/* --- Rhythm: alternate section grounds automatically so nothing repeats ---- */
.band-lav{background:linear-gradient(180deg,var(--tc-50),var(--paper))}
.band-edge{border-top:1px solid var(--line)}

/* --- Eyebrow: smaller, more spaced, more deliberate ----------------------- */
.eyebrow{font-size:.665rem;letter-spacing:.2em;margin-bottom:var(--s-4)}
.eyebrow::before{width:26px}

/* --- Cards: quieter borders, more internal air, better hover -------------- */
.card{padding:24px;border-color:var(--line)}
.card h3{margin-bottom:12px}
.card p{font-size:.94rem;line-height:1.62}
a.card:hover{border-color:var(--tc-400);box-shadow:0 12px 34px rgba(107,32,39,.10);transform:translateY(-3px)}
.grid{gap:var(--s-5)}

/* --- Figures: bigger numbers, more presence ------------------------------- */
.stat .v{font-size:clamp(1.9rem,1.4rem + 1.5vw,2.7rem);letter-spacing:-.02em}
.stat{border-top-width:1px;border-top-color:var(--line-2);padding-top:18px}
.hero-stats{margin-top:var(--s-8);padding-top:var(--s-6)}
.hero-stat .v{font-size:1.7rem;letter-spacing:-.02em}

/* --- Hero: taller, quieter, more cinematic ------------------------------- */
.hero{padding-block:var(--s-9) var(--s-9)}
@media (min-width:1024px){.hero{padding-block:calc(var(--s-9) + 24px) calc(var(--s-9) + 12px)}}
.hero h1{margin-bottom:var(--s-5)}
.hero-kicker{font-size:.665rem;letter-spacing:.22em}
.page-hero{padding-block:var(--s-8) var(--s-9)}

/* --- Editorial banner: a full-bleed statement between sections ------------ */
.banner{position:relative;overflow:hidden;border-radius:var(--r-xl);
 background:linear-gradient(120deg,var(--ox-900),var(--ox-700) 55%,var(--grad-warm));
 color:#F2E2D6;padding:clamp(30px,4vw,56px)}
.banner::after{content:"";position:absolute;inset:0;pointer-events:none;
 background:radial-gradient(circle at 85% 15%,rgba(209,154,118,.30),transparent 55%)}
.banner>*{position:relative;z-index:1}
.banner .b-eyebrow{font-family:var(--font-mono);font-size:.66rem;letter-spacing:.2em;
 text-transform:uppercase;color:#EFC4A8;margin:0 0 14px}
.banner h2{color:#fff;max-width:20ch;margin-bottom:14px}
.banner p{color:#EBD5C7;max-width:56ch}
.banner .b-figs{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:var(--s-5);
 margin-top:var(--s-6);padding-top:var(--s-5);border-top:1px solid rgba(255,255,255,.18)}
.banner .b-fig .v{font-family:var(--font-display);font-size:1.9rem;font-weight:650;color:#fff;line-height:1}
.banner .b-fig .l{font-size:.82rem;color:#DCC0AE;margin-top:7px;line-height:1.45}

/* --- Quote / pull statement ---------------------------------------------- */
.statement{max-width:24ch;font-family:var(--font-display);font-weight:600;
 font-size:clamp(1.6rem,1.1rem + 2vw,3rem);line-height:1.14;letter-spacing:-.028em;color:var(--ink)}
.band-deep .statement{color:#fff}
.statement-note{font-size:.87rem;color:var(--ink-3);max-width:46ch;margin-top:var(--s-5)}
.band-deep .statement-note{color:#DCC0AE}

/* --- Video slot: a real player frame, not a dashed box ------------------- */
.videoframe{position:relative;border-radius:var(--r-lg);overflow:hidden;border:1px solid var(--line);
 background:var(--surface-2)}
.videoframe img{width:100%;height:auto;display:block;background:#FBF3EC}
.videoframe .vf-play{position:absolute;inset:0;display:grid;place-items:center;pointer-events:none}
.videoframe .vf-play span{width:62px;height:62px;border-radius:50%;background:rgba(107,32,39,.92);
 display:grid;place-items:center;box-shadow:0 8px 24px rgba(36,11,14,.32)}
.videoframe .vf-play svg{width:24px;height:24px;color:#fff;margin-left:3px}
.videoframe figcaption{padding:13px 16px;font-size:.83rem;color:var(--ink-3);line-height:1.5;
 border-top:1px solid var(--line);background:var(--surface)}
.videoframe figcaption b{color:var(--ink-2);font-weight:640}
.videoframe .vf-meta{font-family:var(--font-mono);font-size:.66rem;letter-spacing:.08em;
 color:var(--ox-600);display:block;margin-top:5px}



/* --- Section divider rule ------------------------------------------------ */
.rule{height:1px;background:linear-gradient(90deg,var(--line),transparent);margin-block:var(--s-7)}

/* --- Tables: quieter, more premium --------------------------------------- */
thead th{font-size:.7rem;letter-spacing:.1em;padding:14px 18px}
tbody td,tbody th{padding:15px 18px}
.table-wrap{border-radius:var(--r-lg)}

/* --- Reduce visual repetition in long card grids -------------------------- */
.grid.g-3>.card:nth-child(3n+1),.grid.g-2>.card:nth-child(2n+1){background:var(--surface)}


/* ---------- 29. Home masthead hero --------------------------------------- */
.hero-home{padding-block:var(--s-8) var(--s-9)}

.hero-lead{display:grid;gap:var(--s-5);grid-template-columns:1fr;margin-top:0}
@media (min-width:960px){.hero-lead{grid-template-columns:1.15fr.85fr;gap:var(--s-8);align-items:end}}
.hl-main>*:last-child{margin-bottom:0}
.hl-side>*:last-child{margin-bottom:0}
@media (min-width:960px){.hl-side{padding-bottom:6px}}
.hero-claim{font-family:var(--font-display);font-weight:600;
 font-size:clamp(2rem,1.2rem + 3vw,3.6rem);line-height:1.06;letter-spacing:-.032em;color:#fff;margin:0}
.hero-lead .lede{margin:0;color:#EBD8CC}
.hero-lead .btn-row{grid-column:1/-1;margin-top:var(--s-3)}

.hero-plate{margin:var(--s-8) 0 0;border-radius:var(--r-xl);overflow:hidden;
 border:1px solid rgba(255,255,255,.20);box-shadow:0 26px 60px -18px rgba(15,4,6,.55)}
.hero-plate img{width:100%;height:auto;display:block;background:#FBF3EC}
.hero-plate figcaption{margin:0;padding:18px 22px;background:rgba(36,11,14,.62);
 border-top:1px solid rgba(255,255,255,.16);color:#EBD5C7;font-size:.87rem;line-height:1.6;max-width:none}
.hero-plate figcaption b{color:#fff;font-weight:650}

.hero-facts{display:grid;gap:var(--s-5);grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
 margin-top:var(--s-7);padding-top:var(--s-6);border-top:1px solid rgba(255,255,255,.16)}
.fact .fv{display:block;font-family:var(--font-display);font-size:2.1rem;font-weight:650;color:#fff;
 line-height:1;letter-spacing:-.02em}
.fact .fl{display:block;font-size:.79rem;color:#EFDCD1;line-height:1.5;margin-top:9px}


/* ---------- 30. Utility-bar OnKommon link -------------------------------- */
.topbar-onk{display:inline-flex;align-items:center;gap:7px;padding:3px 11px;border-radius:var(--r-pill);
 background:rgba(255,255,255,.94);color:#241A16!important;font-weight:600;font-size:.74rem;
 border:1px solid rgba(255,255,255,.3)}
.topbar-onk img{height:15px;width:auto;display:block}
.topbar-onk svg{width:11px;height:11px;opacity:.6}
.topbar-onk:hover{background:#fff;text-decoration:none!important;color:#241A16!important}

.fam-count{font-family:var(--font-mono);font-size:.62rem;letter-spacing:.1em;color:var(--ink-3);
 border:1px solid var(--line-2);border-radius:var(--r-pill);padding:3px 9px;vertical-align:middle;
 margin-left:10px;font-weight:500}


/* ---------- 31. Doctor coverage map -------------------------------------- */
.cov-table{min-width:760px}
.cov-table tbody th{width:230px;font-weight:640;font-size:.9rem}
.cov-table td{vertical-align:top}
.cov-group th{background:var(--ox-700);color:#fff;font-family:var(--font-mono);font-size:.64rem;
 letter-spacing:.16em;text-transform:uppercase;padding:9px 18px}
.cov-table tbody tr.cov-group:hover{background:var(--ox-700)}
.cov-person{display:inline-flex;align-items:center;flex-wrap:wrap;gap:6px;margin:0 12px 7px 0}
.cov-name{font-size:.9rem;font-weight:600;color:var(--ink)}
.cov-person.is-pending .cov-name{font-weight:400;font-style:italic;color:var(--ink-3)}
.cov-fmt{font-family:var(--font-mono);font-size:.6rem;letter-spacing:.06em;text-transform:uppercase;
 border:1px solid var(--line-2);border-radius:var(--r-pill);padding:2px 7px;color:var(--ink-3);
 background:var(--surface);white-space:nowrap}
.cov-none{font-size:.85rem;color:var(--ink-3);font-style:italic}
.cov-board{font-weight:640;color:var(--ok);white-space:nowrap;width:130px}

.onk-prod{display:inline-flex;align-items:center;gap:6px;text-decoration:none;color:inherit}
.onk-prod svg{width:13px;height:13px;opacity:.5;flex:none}
.onk-prod:hover{color:var(--ox-600)}
.onk-prod:hover svg{opacity:1}

/* fixed three-up (never breaks to 4) */
.g-3f{grid-template-columns:1fr}
@media (min-width:640px){.g-3f{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1000px){.g-3f{grid-template-columns:repeat(3,1fr)}}

/* Narrow screens: the OnKommon lockup must wrap rather than push the page wide. */
@media (max-width:560px){
.onk-lockup{flex-wrap:wrap;white-space:normal;max-width:100%;row-gap:2px}
.onk-lockup .onk-role{white-space:normal;line-height:1.35;flex:1 1 100%}
.onk-lockup svg{order:-1}
.onk-lockup-lg{padding:10px 14px}
.onk-lockup-lg img{height:30px}
}
.onk-lockup{max-width:100%}
.table-wrap{max-width:100%;min-width:0}


/* ---------- 32. Appointment booker ---------------------------------------- */
.bk-overlay{position:fixed;inset:0;z-index:80;background:rgba(36,26,22,.55);
 backdrop-filter:blur(3px);display:flex;align-items:flex-start;justify-content:center;
 padding:24px 16px;overflow:auto}
.bk-overlay[hidden]{display:none!important}
.bk-panel{position:relative;width:min(940px,100%);background:var(--surface);
 border-radius:var(--r-lg);box-shadow:var(--sh-3);padding:30px 30px 26px;margin:auto}
.bk-close{position:absolute;top:14px;right:14px;width:36px;height:36px;display:grid;place-items:center;
 border:1px solid var(--line);border-radius:50%;background:var(--surface);color:var(--ink-2);cursor:pointer}
.bk-close:hover{border-color:var(--ox-500);color:var(--ox-700)}
.bk-close svg{width:16px;height:16px}
.bk-head{margin-bottom:18px}
.bk-eyebrow{font-family:var(--font-mono);font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;
 color:var(--tc-400);margin:0 0 6px}
.bk-head h2{margin:0;font-size:1.55rem}

.bk-call{display:flex;align-items:center;gap:14px;padding:15px 18px;text-decoration:none;
 border:1px solid var(--ox-500);border-radius:var(--r-md);background:var(--tc-50);color:var(--ink)}
.bk-call:hover{border-color:var(--ox-700);box-shadow:var(--glow)}
.bk-call-ic{display:grid;place-items:center;width:42px;height:42px;border-radius:50%;
 background:var(--ox-700);color:#fff;flex:none}
.bk-call-ic svg{width:19px;height:19px}
.bk-call-t{display:flex;flex-direction:column;line-height:1.35}
.bk-call-t b{font-size:1rem}
.bk-call-t span{font-size:.84rem;color:var(--ink-2)}
.bk-call-go{margin-left:auto;font-family:var(--font-mono);font-size:.62rem;letter-spacing:.12em;
 text-transform:uppercase;color:#fff;background:var(--tc-400);padding:4px 9px;border-radius:var(--r-pill)}
.bk-or{display:flex;align-items:center;gap:12px;margin:18px 0;color:var(--ink-3);font-size:.8rem}
.bk-or::before,.bk-or::after{content:"";flex:1;height:1px;background:var(--line)}

.bk-grid{display:grid;gap:24px}
@media (min-width:760px){.bk-grid{grid-template-columns:1fr 1fr}}
.bk-cal-bar{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}
.bk-month{margin:0;font-weight:640;font-size:.98rem}
.bk-nav{width:32px;height:32px;display:grid;place-items:center;border:1px solid var(--line);
 border-radius:var(--r-sm);background:var(--surface);color:var(--ink-2);cursor:pointer}
.bk-nav:hover:not(:disabled){border-color:var(--ox-500);color:var(--ox-700)}
.bk-nav:disabled{opacity:.32;cursor:default}
.bk-nav svg{width:15px;height:15px}
.bk-dow,.bk-days{display:grid;grid-template-columns:repeat(7,1fr);gap:4px}
.bk-dow{margin-bottom:5px}
.bk-dow span{text-align:center;font-family:var(--font-mono);font-size:.62rem;letter-spacing:.06em;
 color:var(--ink-3)}
.bk-day{aspect-ratio:1;display:grid;place-items:center;border:1px solid transparent;
 border-radius:var(--r-sm);background:var(--surface-2);color:var(--ink);font-size:.86rem;
 font-family:inherit;cursor:pointer}
.bk-day:hover:not(:disabled){border-color:var(--ox-500);background:var(--tc-50)}
.bk-day.is-pad{background:none;cursor:default}
.bk-day:disabled{color:var(--ink-3);background:none;cursor:default}
.bk-day.is-closed{text-decoration:line-through;opacity:.5}
.bk-day.is-today{box-shadow:inset 0 -2px 0 var(--tc-400)}
.bk-day.is-on{background:var(--ox-700);color:#fff;border-color:var(--ox-700);font-weight:640}
.bk-legend{margin:10px 0 0;font-size:.76rem;color:var(--ink-3)}

.bk-field{margin-bottom:16px}
.bk-field label,.bk-lbl{display:block;font-size:.8rem;font-weight:600;margin-bottom:6px;color:var(--ink-2)}
.bk-field select,.bk-field input{width:100%;padding:10px 12px;font:inherit;font-size:.9rem;
 border:1px solid var(--line-2);border-radius:var(--r-sm);background:var(--surface);color:var(--ink)}
.bk-field select:focus-visible,.bk-field input:focus-visible{outline:2px solid var(--focus);outline-offset:1px}
.bk-slot-h{margin:8px 0 6px;font-family:var(--font-mono);font-size:.62rem;letter-spacing:.12em;
 text-transform:uppercase;color:var(--ink-3)}
.bk-slot-row{display:flex;flex-wrap:wrap;gap:6px}
.bk-slot{padding:6px 11px;font:inherit;font-size:.82rem;border:1px solid var(--line-2);
 border-radius:var(--r-pill);background:var(--surface);color:var(--ink-2);cursor:pointer}
.bk-slot:hover{border-color:var(--ox-500);color:var(--ox-700)}
.bk-slot.is-on{background:var(--ox-700);border-color:var(--ox-700);color:#fff;font-weight:600}
.bk-empty{margin:0;font-size:.84rem;color:var(--ink-3)}
.bk-summary{display:flex;flex-direction:column;gap:2px;padding:12px 14px;margin-bottom:14px;
 border-left:3px solid var(--tc-400);background:var(--tc-50);border-radius:0 var(--r-sm) var(--r-sm) 0}
.bk-summary b{font-size:.92rem}
.bk-summary span{font-size:.84rem;color:var(--ink-2)}
.bk-actions{display:flex;flex-wrap:wrap;gap:8px}
.bk-confirm.is-disabled{opacity:.4;pointer-events:none}
.bk-fine{margin:12px 0 0;font-size:.76rem;color:var(--ink-3);line-height:1.5}
.hero-call{margin:14px 0 0;font-size:.88rem;color:#EFDCD1}
.hero-call a{color:#fff;font-weight:600}
.band-note{max-width:74ch;margin:26px auto 0;font-size:.92rem;color:#EFDCD1;text-align:center;line-height:1.65}

.bk-inline{display:grid;gap:22px;align-items:center;padding:26px;margin-top:34px;
 border:1px solid var(--line);border-radius:var(--r-lg);background:var(--surface-2)}
@media (min-width:820px){.bk-inline{grid-template-columns:1.15fr.85fr}}
.bk-inline h2{margin-top:0}
.bk-inline-facts{border-top:0;margin:0}
.steps-num li .st-tag{display:inline-block;font-family:var(--font-mono);font-size:.6rem;letter-spacing:.12em;
 text-transform:uppercase;color:#fff;background:var(--tc-400);padding:3px 8px;border-radius:var(--r-pill);
 margin-bottom:7px}
.rev-strip{display:grid;gap:14px;margin-top:32px;padding:20px 22px;border:1px solid var(--line);
 border-radius:var(--r-lg);background:var(--surface)}
@media (min-width:720px){.rev-strip{grid-template-columns:repeat(4,1fr)}}
.rev-item{display:flex;flex-direction:column;gap:4px}
.rev-item .rv{font-family:var(--font-display);font-size:1.7rem;line-height:1;color:var(--ox-700)}
.rev-item .rl{font-size:.8rem;color:var(--ink-2);line-height:1.45}
.board-table{min-width:640px}
.board-table th[scope="row"]{width:210px;font-weight:640}
.board-table td:nth-child(2){width:120px;white-space:nowrap;font-family:var(--font-mono);font-size:.78rem;color:var(--ink-2)}

/* Long labels (and the bracketed placeholders still in the SITE dict) must never
 push the page wider than the viewport. */
.bk-inline>*{min-width:0}
.btn{max-width:100%;overflow-wrap:anywhere}
.btn-row{max-width:100%}
.steps-num li,.rev-item,.hero-lead{min-width:0}
.hero-call{overflow-wrap:anywhere}

/* ---------- 33. A to Z consultant list ------------------------------------ */
.az-bar{display:flex;flex-wrap:wrap;gap:14px;align-items:center;margin-bottom:14px}
.az-input{flex:1 1 280px;min-width:0;padding:11px 14px;font:inherit;font-size:.92rem;
 border:1px solid var(--line-2);border-radius:var(--r-pill);background:var(--surface);color:var(--ink)}
.az-input:focus-visible{outline:2px solid var(--focus);outline-offset:1px}
.az-jumps{display:flex;flex-wrap:wrap;gap:3px}
.az-jump{min-width:26px;height:26px;padding:0 5px;font:inherit;font-size:.74rem;font-weight:600;
 border:1px solid var(--line);border-radius:var(--r-sm);background:var(--surface);
 color:var(--ink-2);cursor:pointer}
.az-jump:hover{border-color:var(--ox-500);color:var(--ox-700);background:var(--tc-50)}
.az-count{font-family:var(--font-mono);font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;
 color:var(--ink-3);margin:0 0 10px}
.az-list{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.az-row{border-bottom:1px solid var(--line)}
.az-row[hidden]{display:none!important}
.az-row a{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 16px;padding:13px 12px;
 text-decoration:none;color:var(--ink)}
.az-row a:hover{background:var(--tc-50)}
.az-name{font-weight:640;font-size:1rem;flex:1 1 240px;min-width:0;max-width:100%;overflow-wrap:anywhere}
.az-role{font-size:.88rem;color:var(--ink-2);flex:1 1 240px;min-width:0;overflow-wrap:anywhere}
.az-empty{margin:18px 0 0;color:var(--ink-3)}
.role-line{font-family:var(--font-mono);font-size:.76rem;letter-spacing:.08em;text-transform:uppercase;
 color:#EFC4A8;margin:0 0 14px;display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.dr-photo-lg{margin:0}
.dr-photo-lg img{width:100%;max-width:360px;border-radius:var(--r-lg);display:block;background:#FBF3EC}
.dr-photo-lg figcaption{font-size:.78rem;color:var(--ink-3);margin-top:9px;max-width:360px;line-height:1.5}

/* ---------- 34. Home hero (no masthead: the header carries the brand) ------ */
.hero-home .hero-lead{max-width:none}
.hero-eyebrow{font-family:var(--font-mono);font-size:.68rem;letter-spacing:.16em;
 text-transform:uppercase;color:#EFC4A8;margin:0 0 20px}
.hero-home .hero-claim{margin:0 0 18px}
.hero-home .lede{max-width:46ch}
.hero-call{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 14px;margin:22px 0 0;
 font-size:.9rem;color:#EFDCD1}
.hero-call a{color:#fff;font-weight:640;font-size:1.05rem;text-decoration:none;
 border-bottom:1px solid rgba(255,255,255,.45);padding-bottom:1px}
.hero-call a:hover{border-bottom-color:#fff}
.hero-call-hrs{font-family:var(--font-mono);font-size:.7rem;letter-spacing:.09em;
 text-transform:uppercase;color:#E5BBA4}
.steps-num li .st-tag-fee{background:var(--ox-700)}

/* ---------- 35. PDF read / download ---------------------------------------- */
.pdf-actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
.pdf-actions .btn{gap:7px}
.pdf-actions svg{width:15px;height:15px;flex:none}
.pdf-meta{display:flex;flex-wrap:wrap;gap:4px 12px;margin:4px 0 10px;font-family:var(--font-mono);
 font-size:.66rem;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3)}
.pdf-file{color:var(--tc-400)}
.doc-jump{display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px;padding:14px 18px;
 border:1px solid var(--line);border-radius:var(--r-pill);background:var(--surface-2)}
.doc-jump .dj-label{font-family:var(--font-mono);font-size:.65rem;letter-spacing:.12em;
 text-transform:uppercase;color:var(--ink-3)}
.doc-jump a{font-size:.87rem;font-weight:560;text-decoration:none;color:var(--ink);
 padding:4px 10px;border-radius:var(--r-pill)}
.doc-jump a:hover{background:var(--tc-50);color:var(--ox-700)}
.pdf-strip{display:flex;flex-wrap:wrap;align-items:center;gap:16px;padding:22px 24px;
 border:1px solid var(--ox-500);border-radius:var(--r-lg);background:var(--tc-50)}
.pdf-strip .ps-txt{flex:1 1 260px;min-width:0}
.pdf-strip .ps-eyebrow{font-family:var(--font-mono);font-size:.64rem;letter-spacing:.13em;
 text-transform:uppercase;color:var(--tc-400);margin:0 0 5px}
.pdf-strip .ps-title{margin:0 0 4px;font-family:var(--font-display);font-size:1.22rem;font-weight:600}
.pdf-strip .ps-meta{margin:0;font-size:.8rem;color:var(--ink-2)}
.pdf-strip .pdf-dl svg{width:16px;height:16px;flex:none}
.pdf-strip .btn{gap:8px}

.az-row a{max-width:100%}
@media (min-width:760px){.az-name{flex:0 0 260px}}

/* ==========================================================================
   36. Terracotta / ivory / oxblood  ·  the three-colour system, applied
   --------------------------------------------------------------------------
   The palette was oxblood-on-white with terracotta reserved for eyebrows, so
   the site read as one colour. Terracotta now carries the structural accents,
   ivory carries the ground, and oxblood keeps depth and authority. Every rule
   here is a colour or an edge; none of them changes layout.
   ========================================================================== */

/* --- Ground: alternating ivory and white gives the page a warm rhythm ------ */
body{background:var(--paper)}
section{background:transparent}
.band-alt{background:var(--surface-2);
  border-block:1px solid var(--ivory-edge)}
.tight{background:transparent}

/* A hairline of terracotta at the head of every warm band. */
.band-alt{position:relative}
.band-alt::before{content:"";position:absolute;inset-inline:0;top:0;height:2px;
  background:linear-gradient(90deg,var(--tc-400) 0 14%,var(--tc-200) 14% 34%,transparent 34%)}

/* --- Section heads: a terracotta rule instead of a bare gap ---------------- */
.section-head{position:relative;padding-top:22px}
.section-head::before{content:"";position:absolute;left:0;top:0;width:56px;height:2px;
  background:var(--tc-400)}
.section-head.center::before{left:50%;transform:translateX(-50%)}
.band-deep .section-head::before{background:var(--tc-300)}
.page-hero .section-head::before,.hero .section-head::before{background:var(--tc-300)}

/* --- Cards: white on ivory, with a terracotta edge that arrives on hover --- */
.card{border-color:var(--ivory-edge);box-shadow:0 1px 0 rgba(107,32,39,.04)}
.card{position:relative;overflow:hidden}
.card::after{content:"";position:absolute;left:0;top:0;height:3px;width:100%;
  background:var(--tc-400);transform:scaleX(0);transform-origin:left;
  transition:transform var(--dur) var(--ease)}
a.card:hover::after{transform:scaleX(1)}
a.card:hover{border-color:var(--tc-300)}
.card-num{color:var(--tc-ink)}
.card-icon{background:var(--tc-100);border-color:var(--tc-300);color:var(--tc-ink)}
.card-flat{border-top-color:var(--tc-400)}

/* --- Numbers and figures read terracotta; the words stay oxblood ---------- */
.fact .fv,.hero-stat .v,.b-fig .v{color:var(--tc-300)}
.stat .v,.rev-item .rv,.figure .fv{color:var(--tc-ink)}
.band-deep .stat .v,.band-deep .rev-item .rv,.band-deep .figure .fv{color:var(--tc-300)}
.band-alt .stat .v,.band-alt .rev-item .rv,section:not(.band-deep):not(.hero):not(.page-hero):not(.cta-band) .rev-item .rv,
section:not(.band-deep):not(.hero):not(.page-hero):not(.cta-band) .stat .v{color:var(--tc-ink)}
.fam-count{color:var(--tc-ink)}

/* --- Steps: oxblood marker, terracotta spine ------------------------------ */
.steps>li{border-left-color:var(--tc-200)}
.steps>li::before{background:var(--ox-700);box-shadow:0 0 0 3px var(--paper),0 0 0 4px var(--tc-200)}
.band-deep .steps>li{border-left-color:rgba(209,154,118,.45)}
.band-deep .steps>li::before{box-shadow:0 0 0 3px var(--ox-900),0 0 0 4px rgba(209,154,118,.5)}

/* --- Tables: a terracotta rule under the head ----------------------------- */
.table-wrap{border-color:var(--ivory-edge)}
thead th{border-bottom:2px solid var(--tc-300);color:var(--ox-700);background:var(--surface-2)}
tbody tr:hover{background:var(--tc-50)}
td.price,th.price{color:var(--ox-700);font-weight:640}

/* --- Links: an oxblood word on a terracotta underline --------------------- */
main a:not(.btn):not(.card):not(.tag):not(.az-row a):not(.onk-prod):not(.pdf-read):not(.pdf-dl){
  text-decoration-color:var(--tc-300);text-underline-offset:.18em;
  text-decoration-thickness:1px}
main a:not(.btn):not(.card):not(.tag):hover{text-decoration-color:var(--tc-400)}

/* --- Accordions and dividers ---------------------------------------------- */
.acc-item{border-bottom-color:var(--ivory-edge)}
.acc-btn[aria-expanded="true"]{color:var(--ox-700)}
.acc-btn[aria-expanded="true"] .acc-t{box-shadow:inset 0 -2px 0 var(--tc-300)}

/* --- Quotes and pulled statements ----------------------------------------- */
blockquote,.pull{border-left:3px solid var(--tc-400)}

/* --- Tags: three registers, one family ------------------------------------ */
.tag-v{color:var(--ox-600);border-color:var(--tc-200);background:var(--tc-50)}
.tag-soon{color:var(--tc-ink-2);border-color:var(--tc-200);background:var(--tc-50)}

/* --- Buttons: terracotta is the secondary voice --------------------------- */
.btn-ghost{border-color:var(--tc-200);color:var(--ox-700)}
.btn-ghost:hover{border-color:var(--tc-400);color:var(--ox-700);background:var(--tc-50)}
.btn-primary{background:var(--ox-700);border-color:var(--ox-700)}
.btn-primary:hover{background:var(--ox-600);border-color:var(--tc-400)}

/* --- Eyebrows keep their terracotta dash, lengthened ---------------------- */
.eyebrow::before{width:26px;background:var(--tc-400)}

/* --- Footer: ivory type on oxblood, terracotta rules ---------------------- */
.footer-brand .brand-name::after{background:linear-gradient(90deg,var(--tc-300) 0 38%,rgba(209,154,118,.35) 38% 100%)}

/* ==========================================================================
   37. Trans-luxury: air, hairlines and restraint
   --------------------------------------------------------------------------
   The style match for a boutique institute is "exaggerated minimalism":
   confident display type, generous negative space, one accent held to
   structural roles. These rules buy the air and thin the edges. Nothing here
   changes the document structure, so nothing new can overflow.
   ========================================================================== */

/* --- More room between ideas, at desktop only ----------------------------- */
@media (min-width:1024px){
  section{padding-block:var(--s-8)}
  .band-alt,.band-deep{padding-block:var(--s-9)}
  .section-head{margin-bottom:var(--s-7)}
}
@media (min-width:1440px){
  section{padding-block:var(--s-9)}
  .band-alt,.band-deep{padding-block:calc(var(--s-9) + 12px)}
}

/* --- Hairlines, not borders ------------------------------------------------ */
.card,.table-wrap,.az-list,.acc-item,.doc-jump,.rev-strip,.bk-inline{
  border-color:var(--ivory-edge)}
.card{box-shadow:none}
a.card:hover{box-shadow:0 10px 34px -18px rgba(107,32,39,.30)}
.site-header{border-bottom:1px solid var(--ivory-edge)}

/* --- Display type: a touch more presence, tighter tracking ---------------- */
h1,.hero-claim,.mh-name{letter-spacing:-.03em}
h2{letter-spacing:-.026em}
.lede{color:var(--ink-2);max-width:56ch}

/* --- The warm ground gets a barely-there weave ---------------------------- */
body{
  background-image:
    radial-gradient(circle at 12% 8%, rgba(176,86,47,.035), transparent 42%),
    radial-gradient(circle at 88% 4%, rgba(107,32,39,.030), transparent 38%);
  background-attachment:fixed;
  background-repeat:no-repeat}

/* --- Focus: terracotta, and unmistakable ---------------------------------- */
:where(a,button,input,select,textarea,summary,[tabindex]):focus-visible{
  outline:2px solid var(--tc-400);outline-offset:2px;border-radius:2px}

/* --- The three colours, stated once, at the foot of the page -------------- */
.brand-rule{display:flex;height:3px;margin:0;border:0;overflow:hidden}
.brand-rule span{flex:1}
.brand-rule span:nth-child(1){background:var(--ox-700)}
.brand-rule span:nth-child(2){background:var(--tc-400);flex:0 0 22%}
.brand-rule span:nth-child(3){background:var(--tc-200);flex:0 0 12%}

@media (prefers-reduced-motion:reduce){
  .card::after,.brand-name::after{transition:none}
}

/* --- Focus ring by ground -------------------------------------------------
   Terracotta clears 3:1 on every ivory and white surface, but only 2.3:1 on the
   middle of the oxblood hero gradient and 1.8:1 on its warm end. On those bands
   the ring switches to the light terracotta tint, which clears 5.9:1 at worst.
   -------------------------------------------------------------------------- */
.hero,.page-hero,.band-deep,.cta-band,.site-footer,.audience{--focus:var(--tc-200)}
.hero :focus-visible,.page-hero :focus-visible,.band-deep :focus-visible,
.cta-band :focus-visible,.site-footer :focus-visible,.audience :focus-visible{
  outline-color:var(--tc-200)}

/* ==========================================================================
   38. The wordmark, and a deeper terracotta pass
   --------------------------------------------------------------------------
   The lockup is set in Poppins: a geometric sans against the Fraunces
   editorial body, which is the usual pairing for an institution that wants a
   modern mark on classical pages. Everything else here extends terracotta into
   the places it had not reached.
   ========================================================================== */

/* --- Lockup --------------------------------------------------------------- */
.brand-name{font-feature-settings:"ss01";}
.brand-sub{color:var(--tc-ink)}
.site-footer .brand-sub{color:var(--tc-200)}
@media (max-width:1199px){.brand-name{font-size:1.14rem;letter-spacing:.045em}}
@media (max-width:430px){.brand-name{font-size:1.06rem}}

/* The audience switcher, the utility bar and the mega feature all pick up the
   brand face, so the chrome reads as one system rather than three. */
.aud-nav a,.topbar-list a,.mf-eyebrow,.ps-eyebrow,.bk-eyebrow{font-family:var(--font-brand);font-weight:500}
.aud-label{font-family:var(--font-brand);font-weight:500;letter-spacing:.14em}

/* --- Terracotta, further in ----------------------------------------------- */
/* Nav: the active item sits on a terracotta underline, not an oxblood one. */
.nav-link[aria-current="page"]{box-shadow:inset 0 -2px 0 var(--tc-400);color:var(--ox-700)}
.nav-link:hover,.nav-link[aria-expanded="true"]{background:var(--tc-50);color:var(--ox-700)}
.mega{border-top-color:var(--tc-400);border-top-width:2px}
.rail-btn[aria-selected="true"]{background:var(--tc-50);color:var(--ox-700);
  box-shadow:inset 3px 0 0 var(--tc-400)}

/* Lists: terracotta ticks and markers. */
.checklist li svg,.pill-row li::before{color:var(--tc-400)}
.pill-row li{border-color:var(--tc-200);background:var(--tc-50);color:var(--ox-700)}
ul:not([class]) li::marker,ol:not([class]) li::marker{color:var(--tc-400)}

/* Definition lists and the coverage map. */
.def-list dt{color:var(--tc-ink)}
.def-list>div{border-top-color:var(--ivory-edge)}
.cov-table tbody tr:not(.cov-group) th{color:var(--ox-700)}
.cov-fmt{background:var(--tc-50);border-color:var(--tc-200);color:var(--ox-700)}

/* The A to Z list: a terracotta letter rail and a warm row hover. */
.az-jump{border-color:var(--ivory-edge);color:var(--tc-ink)}
.az-jump:hover{border-color:var(--tc-400);background:var(--tc-50);color:var(--ox-700)}
.az-input{border-color:var(--tc-200)}
.az-input:focus-visible{border-color:var(--tc-400)}
.az-row a:hover{background:var(--tc-50);box-shadow:inset 3px 0 0 var(--tc-400)}
.az-count{color:var(--tc-ink)}

/* Booking: the calendar reads warm, the chosen day reads oxblood. */
.bk-day:hover:not(:disabled){border-color:var(--tc-400);background:var(--tc-50)}
.bk-day.is-today{box-shadow:inset 0 -2px 0 var(--tc-400)}
.bk-slot:hover{border-color:var(--tc-400);color:var(--ox-700)}
.bk-call{border-color:var(--tc-400);background:var(--tc-50)}
.bk-call-ic{background:var(--ox-700)}
.bk-call-go{background:var(--tc-400)}
.bk-summary{border-left-color:var(--tc-400);background:var(--tc-50)}

/* PDF strip and doc jump. */
.pdf-strip{border-color:var(--tc-300);background:var(--tc-50)}
.pdf-strip .ps-eyebrow{color:var(--tc-ink)}
.doc-jump a:hover{background:var(--tc-50);color:var(--ox-700)}
.pdf-file{color:var(--tc-ink)}

/* Search overlay and the drawer. */
.search-panel{border-top:2px solid var(--tc-400)}
.drawer{border-left:2px solid var(--tc-400)}
.d-top:hover,.d-sub:hover{color:var(--ox-700);background:var(--tc-50)}

/* Accordion chevrons and step tags. */
.acc-btn svg{color:var(--tc-400)}
/* An unclassed svg in a flex row will stretch to the row height. A bare chevron
   once made every accordion button on this page 1000px tall, so size any direct
   svg child defensively rather than relying on the author remembering .acc-ico. */
.acc-btn>svg{width:20px;height:20px;flex:none;align-self:flex-start;margin-top:4px}
.steps-num li .st-tag{background:var(--tc-400)}

/* Breadcrumbs: a terracotta separator. */
.breadcrumb li+li::before{color:var(--tc-300)}

/* The OnKommon lockup keeps its own identity but sits on a warm chip. */
.onk-lockup{border-color:var(--tc-200)}
.onk-lockup:hover{border-color:var(--tc-400)}
.topbar-onk{border-color:var(--tc-200);background:var(--tc-50)}
.topbar-onk:hover{border-color:var(--tc-400)}

/* ==========================================================================
   39. The waiting line
   --------------------------------------------------------------------------
   The signature element. A vertical spine where the stations are stops and the
   GAPS BETWEEN THEM ARE DRAWN TO SCALE with how long that wait usually takes.
   Every other journey graphic spaces its steps evenly, which quietly says the
   waiting is not the hard part. Here it is, so it gets the height.

     data-w  1 = same day   2 = a few days   3 = a week or two   4 = a month+
   ========================================================================== */

.jn-picks{display:grid;gap:12px;grid-template-columns:1fr}
@media (min-width:680px){.jn-picks{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1080px){.jn-picks{grid-template-columns:repeat(4,1fr)}}
.jn-pick{display:flex;flex-direction:column;gap:6px;padding:20px 18px 18px;
  text-decoration:none;color:var(--ink);background:var(--surface);
  border:1px solid var(--ivory-edge);border-radius:var(--r-lg);
  border-top:3px solid var(--tc-200);
  transition:border-top-color var(--dur) var(--ease),transform var(--dur) var(--ease),
             box-shadow var(--dur) var(--ease)}
.jn-pick:hover{border-top-color:var(--tc-400);transform:translateY(-2px);
  box-shadow:0 10px 30px -18px rgba(107,32,39,.32)}
.jn-pick-n{font-family:var(--font-mono);font-size:.64rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--tc-ink)}
.jn-pick-t{font-family:var(--font-display);font-size:1.28rem;font-weight:600;line-height:1.15;
  color:var(--ox-700)}
.jn-pick-q{font-size:.88rem;color:var(--ink-2);line-height:1.5}
.jn-more{margin:22px 0 0;font-size:.95rem}
@media (prefers-reduced-motion:reduce){.jn-pick:hover{transform:none}}

/* --- The phase, and its photograph ---------------------------------------- */
.jn-head{max-width:64ch;margin-bottom:var(--s-7)}
.jn-phase-n{font-family:var(--font-mono);font-size:.66rem;letter-spacing:.15em;
  text-transform:uppercase;color:var(--tc-ink);margin:0 0 10px}
.jn-q{font-family:var(--font-display);font-size:clamp(1.1rem,1rem + .5vw,1.35rem);
  font-style:italic;color:var(--ox-700);margin:0 0 14px;line-height:1.35}
.jn-grid{display:grid;gap:var(--s-7);align-items:start}
@media (min-width:1000px){.jn-grid{grid-template-columns:minmax(0,1fr) minmax(0,.72fr)}
  .jn-figure{position:sticky;top:120px}}
.jn-figure{margin:0}
.jn-figure img{width:100%;height:auto;display:block;border-radius:var(--r-lg);
  border:1px solid var(--ivory-edge);background:#FBF3EC}
.jn-figure figcaption{margin-top:10px;font-size:.82rem;color:var(--ink-3);line-height:1.5}

/* --- The line itself ------------------------------------------------------ */
.jn-line{list-style:none;margin:0;padding:0;position:relative}
.jn-station{position:relative;display:grid;grid-template-columns:38px 1fr;gap:16px;
  align-items:start}
.jn-n{grid-column:1;width:32px;height:32px;border-radius:50%;display:grid;place-items:center;
  background:var(--ox-700);color:#fff;font-family:var(--font-mono);font-size:.74rem;
  box-shadow:0 0 0 4px var(--paper),0 0 0 5px var(--tc-200)}
.band-alt .jn-n{box-shadow:0 0 0 4px var(--surface-2),0 0 0 5px var(--tc-200)}
.jn-body{grid-column:2;padding-bottom:4px;min-width:0}
.jn-body h3{margin:2px 0 8px;font-size:1.16rem}
.jn-what{font-size:.95rem;color:var(--ink-2);margin-bottom:12px;max-width:56ch}
.jn-meta{display:flex;flex-wrap:wrap;gap:6px 28px;margin:0 0 10px;border:0}
.jn-meta>div{border:0;padding:0;display:flex;flex-direction:column;gap:1px}
.jn-meta dt{font-family:var(--font-mono);font-size:.6rem;letter-spacing:.12em;
  text-transform:uppercase;color:var(--ink-3);margin:0}
.jn-meta dd{margin:0;font-size:.88rem;font-weight:560;color:var(--ox-700)}
.jn-link{margin:0;font-size:.88rem}

/* --- The gap. This is the whole point. ------------------------------------ */
.jn-gap{position:relative;display:grid;grid-template-columns:38px 1fr;
  grid-template-rows:auto 1fr;column-gap:16px;align-items:start;padding-block:14px}
.jn-gap-rule{grid-column:1;grid-row:1 / -1;justify-self:center;width:2px;border-radius:1px;
  background:repeating-linear-gradient(180deg,var(--tc-300) 0 5px,transparent 5px 11px)}
.jn-gap[data-w="1"] .jn-gap-rule{height:34px}
.jn-gap[data-w="2"] .jn-gap-rule{height:74px}
.jn-gap[data-w="3"] .jn-gap-rule{height:124px}
.jn-gap[data-w="4"] .jn-gap-rule{height:186px}
.jn-wait{grid-column:2;grid-row:1;display:flex;align-items:baseline;gap:9px;margin:0 0 6px}
.jn-wait-dur{font-family:var(--font-display);font-size:1.24rem;font-weight:600;
  color:var(--tc-ink);line-height:1}
.jn-wait-lbl{font-family:var(--font-mono);font-size:.6rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink-3)}
.jn-risk{grid-column:2;grid-row:2;align-self:start;margin:0;font-size:.9rem;color:var(--ink-2);
  line-height:1.6;max-width:52ch;border-left:2px solid var(--tc-200);padding-left:14px}

/* A long wait earns a heavier mark, so the eye reads duration before it reads
   the words. */
.jn-gap[data-w="4"] .jn-wait-dur,.jn-gap[data-w="3"] .jn-wait-dur{font-size:1.45rem}
.jn-gap[data-w="4"] .jn-gap-rule{background:repeating-linear-gradient(180deg,
  var(--tc-400) 0 5px,transparent 5px 11px);width:3px}

@media (max-width:520px){
  .jn-station,.jn-gap{grid-template-columns:30px 1fr;gap:12px}
  .jn-n{width:26px;height:26px;font-size:.66rem}
  .jn-gap[data-w="3"] .jn-gap-rule{height:96px}
  .jn-gap[data-w="4"] .jn-gap-rule{height:140px}
}

/* ---------- 40. The lockup: the mark carries as much weight as the words --- */
.brand{gap:13px}
.brand img{width:42px;height:51px}
.brand-text{gap:3px}
.brand-name{font-size:1.32rem;letter-spacing:.06em}
@media (max-width:1199px){.brand img{width:38px;height:46px}}
@media (max-width:430px){.brand img{width:34px;height:41px}.brand{gap:10px}}
.site-footer .brand img{width:48px;height:58px}
.drawer .brand-name,.mega-feature .brand-name{font-family:var(--font-brand)}

/* ---------- 41. The hero claim -------------------------------------------
   The brand tagline promoted to the H1. The two halves are sequential, not a
   pair: understanding is what makes transforming possible. The second line
   drops to the warm ivory tint so it reads as the consequence rather than a
   second shout. Large display text, so 3:1 applies and #EBD8CC clears 5.9:1
   against the warmest end of the hero gradient.
   ------------------------------------------------------------------------- */
.hc-then{color:#EBD8CC}

/* Grouped accordion: two sets of questions under one heading. */
.q-group{font-family:var(--font-mono);font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--tc-ink);margin:0 0 10px;padding-top:var(--s-5)}
.q-group:first-of-type{padding-top:0}
.acc + .q-group{margin-top:var(--s-6)}

/* ---------- 42. Footer, shortened, and the policy pages ------------------- */
.foot-top{display:grid;gap:var(--s-5);align-items:start;padding-bottom:var(--s-6);
  border-bottom:1px solid rgba(255,255,255,.12)}
@media (min-width:820px){.foot-top{grid-template-columns:1fr auto;gap:var(--s-7)}}
.foot-contact{font-size:.88rem;line-height:1.6}
.foot-contact p{margin:0 0 4px;color:#D9C6BB}
.foot-contact a{color:#fff}
.foot-hours{font-family:var(--font-mono);font-size:.74rem;letter-spacing:.06em;color:#B49B8D}
.socials{display:flex;gap:8px;margin-top:14px}
.soc{width:38px;height:38px;display:grid;place-items:center;border-radius:50%;
  border:1px solid rgba(255,255,255,.24);color:#EBD8CC;
  transition:border-color var(--dur) var(--ease),color var(--dur) var(--ease),
             background var(--dur) var(--ease)}
.soc:hover{border-color:var(--tc-300);color:#fff;background:rgba(255,255,255,.08)}
.soc svg{width:18px;height:18px}
.foot-nav{display:grid;gap:var(--s-5) var(--s-6);padding-block:var(--s-6);
  grid-template-columns:repeat(2,1fr)}
@media (min-width:820px){.foot-nav{grid-template-columns:repeat(4,1fr)}}
.foot-h{font-family:var(--font-mono);font-size:.64rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--tc-300);margin:0 0 10px}
.foot-nav ul{list-style:none;margin:0;padding:0}
.foot-nav li{margin-bottom:7px}
.foot-nav a{font-size:.88rem;color:#D9C6BB;text-decoration:none}
.foot-nav a:hover{color:#fff;text-decoration:underline;text-decoration-color:var(--tc-300)}
.foot-legal{padding-top:var(--s-5);border-top:1px solid rgba(255,255,255,.12)}
.foot-legal>p:first-child{font-size:.82rem;line-height:1.65;color:#C0AA9E;max-width:88ch;margin:0 0 12px}
.foot-legal a{color:#EBD8CC}

/* Policy pages: a table of contents beside the text. */
.pol-grid{display:grid;gap:var(--s-6)}
@media (min-width:1000px){.pol-grid{grid-template-columns:250px minmax(0,1fr);gap:var(--s-8)}
  .pol-toc{position:sticky;top:120px;align-self:start}}
.pol-toc-h{font-family:var(--font-mono);font-size:.64rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--tc-ink);margin:0 0 10px}
.pol-toc ol,.pol-toc ul{list-style:none;margin:0;padding:0;counter-reset:pt}
.pol-toc li{margin-bottom:7px;font-size:.86rem;line-height:1.4}
.pol-toc a{color:var(--ink-2);text-decoration:none}
.pol-toc a:hover{color:var(--ox-700);text-decoration:underline;text-decoration-color:var(--tc-300)}
.pol-sec{padding-bottom:var(--s-5);margin-bottom:var(--s-5);border-bottom:1px solid var(--ivory-edge)}
.pol-sec:last-of-type{border-bottom:0}
.pol-sec h2{font-size:1.28rem;margin-bottom:10px;scroll-margin-top:110px}
.pol-sec p{font-size:.95rem;color:var(--ink-2);max-width:66ch}
.pol-eff{font-family:var(--font-mono);font-size:.72rem;letter-spacing:.06em;color:var(--ink-3);
  margin:0 0 var(--s-5)}
.pol-note{border-left:3px solid var(--tc-400);background:var(--tc-50);padding:16px 18px;
  border-radius:0 var(--r-md) var(--r-md) 0}
.pol-note p{font-size:.88rem;margin-bottom:8px;color:var(--ink-2)}

/* ---------- 43. Doctor page: covers, formats, colleagues ------------------ */
.dr-covers{list-style:none;margin:0 0 18px;padding:0;display:flex;flex-wrap:wrap;gap:7px}
.dr-covers a{display:inline-block;padding:5px 12px;font-size:.85rem;text-decoration:none;
  color:var(--ox-700);background:var(--tc-50);border:1px solid var(--tc-200);
  border-radius:var(--r-pill)}
.dr-covers a:hover{border-color:var(--tc-400);background:var(--tc-100)}
.dr-engage{margin:0 0 18px;border:0;display:grid;gap:8px}
.dr-engage>div{border:0;padding:0;display:grid;grid-template-columns:110px 1fr;gap:12px;
  align-items:baseline}
.dr-engage dt{margin:0;font-family:var(--font-mono);font-size:.64rem;letter-spacing:.12em;
  text-transform:uppercase;color:var(--tc-ink)}
.dr-engage dd{margin:0;font-size:.9rem;color:var(--ink-2)}
@media (max-width:520px){.dr-engage>div{grid-template-columns:1fr;gap:2px}}
.dr-also-list{list-style:none;margin:0;padding:0;border-top:1px solid var(--ivory-edge)}
.dr-also-list li{border-bottom:1px solid var(--ivory-edge)}
.dr-also-list a{display:flex;flex-direction:column;gap:1px;padding:11px 10px;
  text-decoration:none;color:var(--ink)}
.dr-also-list a:hover{background:var(--tc-50);box-shadow:inset 3px 0 0 var(--tc-400)}
.dr-also-list b{font-size:.95rem;font-weight:640}
.dr-also-list span{font-size:.83rem;color:var(--ink-2)}

/* A hub card whose title is the page's top-level item: h2 for the outline,
   sized like the h3 it replaces. */
.card .h-card{font-family:var(--font-display);font-size:1.16rem;font-weight:600;
  line-height:1.2;letter-spacing:-.012em;margin:0 0 10px}

/* ==========================================================================
   44. Motion
   --------------------------------------------------------------------------
   Subtle tier: a fade with a 12px rise, 340ms, decelerating. The offset stays
   small on purpose so it reads as a fade arriving rather than a slide.

   THE SAFETY RULE, and the reason the old system was ripped out: content is
   only ever hidden while an observer is provably running. The hiding is gated
   on :root.anim, which the script adds ONLY after the IntersectionObserver has
   been constructed, and which a 1200ms failsafe removes if anything at all goes
   wrong. No JS, a thrown error, an old browser, a crawler: all of them see the
   finished page. A cancer site must never be able to render blank.
   ========================================================================== */

:root.anim [data-anim]{opacity:0}
:root.anim [data-anim="rise"]{transform:translateY(12px)}
:root.anim [data-anim="stagger"]>*{opacity:0;transform:translateY(12px)}

[data-anim].is-in,
:root.anim [data-anim].is-in{opacity:1;transform:none;
  transition:opacity .34s var(--ease-out),transform .34s var(--ease-out)}
:root.anim [data-anim="stagger"].is-in>*{opacity:1;transform:none;
  transition:opacity .34s var(--ease-out),transform .34s var(--ease-out)}
/* 45ms apart: enough to read as a sequence, not so much that the last card lags. */
:root.anim [data-anim="stagger"].is-in>*:nth-child(1){transition-delay:0ms}
:root.anim [data-anim="stagger"].is-in>*:nth-child(2){transition-delay:45ms}
:root.anim [data-anim="stagger"].is-in>*:nth-child(3){transition-delay:90ms}
:root.anim [data-anim="stagger"].is-in>*:nth-child(4){transition-delay:135ms}
:root.anim [data-anim="stagger"].is-in>*:nth-child(5){transition-delay:180ms}
:root.anim [data-anim="stagger"].is-in>*:nth-child(n+6){transition-delay:225ms}

:root{--ease-out:cubic-bezier(.22,.61,.36,1)}

/* The header settles onto the page once you leave the top. One property, and it
   is the only thing on the page that reacts to scroll. */
.site-header{transition:box-shadow .25s var(--ease-out),border-color .25s var(--ease-out)}
.site-header.is-stuck{box-shadow:0 6px 24px -14px rgba(107,32,39,.28);border-bottom-color:var(--tc-200)}

/* Press feedback: a control should acknowledge the tap inside 100ms. */
.btn{transition:background var(--dur-fast) var(--ease),border-color var(--dur-fast) var(--ease),
  color var(--dur-fast) var(--ease),transform .09s var(--ease-out),box-shadow var(--dur) var(--ease)}
.btn:active{transform:translateY(1px) scale(.99)}
.jn-pick:active,.card[href]:active,a.card:active{transform:translateY(0) scale(.995)}

@media (prefers-reduced-motion:reduce){
  :root.anim [data-anim],
  :root.anim [data-anim="rise"],
  :root.anim [data-anim="stagger"]>*{opacity:1!important;transform:none!important;transition:none!important}
  .btn:active,.jn-pick:active,a.card:active{transform:none}
}
@media print{
  :root.anim [data-anim],:root.anim [data-anim="stagger"]>*{opacity:1!important;transform:none!important}
}