/* Doctor website — cinematic (ported 1:1 from the approved prototype, 14 Oct 2026). Shared tokens are the BRIEF's, identical names in every site. */
:root {
  --ground:#F4F8FA; --ground-2:#EAF2F6; --ink:#0E1B26; --ink-2:#44566A; --line:rgba(14,27,38,.10);
  --glass:rgba(255,255,255,.66); --night:#071521; --night-2:#0C2333;
  --arogo:#1B6E9C; --arogo-2:#2E86BE; --cyan:#8FF0FA; --gold:#E9B949; --ok:#2FA98C; --danger:#E5574A; --wa:#25D366;
  --accent:#0E6F6A; --accent-2:#3FB6C4;
  --fg:var(--ink); --fg-2:var(--ink-2); --card-line:rgba(255,255,255,.55);
  --serif:"Instrument Serif", Georgia, "Times New Roman", serif;
  --sans:"Barlow", system-ui, -apple-system, "Segoe UI", sans-serif;
  --cond:"Barlow Condensed", "Barlow", system-ui, sans-serif;
  --shadow:0 24px 60px -24px rgba(14,60,90,.28);
  --hdr:66px; --pad:clamp(18px,4.6vw,72px);
  --night-t:0;
}
body.is-night { --fg:#EAF6FA; --fg-2:#A9C3D1; --glass:rgba(12,35,51,.66); --line:rgba(255,255,255,.14); --card-line:rgba(143,240,250,.22); }
*,*::before,*::after { box-sizing:border-box; }
html { scroll-behavior:auto; -webkit-text-size-adjust:100%; }
body { margin:0; font:400 17px/27px var(--sans); color:var(--fg); background:var(--ground); overflow-x:hidden; transition:color .5s ease; }
img { max-width:100%; display:block; }
a { color:inherit; }
.tnum, .tnum * { font-family:var(--cond); font-weight:600; font-variant-numeric:tabular-nums; letter-spacing:.01em; }
.sr-only { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
.skip { position:fixed; left:12px; top:-60px; z-index:99; background:#fff; padding:10px 16px; border-radius:999px; }
.skip:focus { top:12px; }
:focus-visible { outline:3px solid var(--accent-2); outline-offset:3px; border-radius:8px; }
.ic { width:1.15em; height:1.15em; fill:none; stroke:currentColor; stroke-width:1.9; stroke-linecap:round; stroke-linejoin:round; flex:none; }

/* ---------- the stage: icy ground, night overlay, one canvas ---------- */
#bg { position:fixed; inset:0; z-index:0; background:radial-gradient(120% 90% at 78% 8%, #FFFFFF 0%, var(--ground) 38%, var(--ground-2) 100%); }
#night { position:fixed; inset:0; z-index:1; opacity:var(--night-t); pointer-events:none; background:linear-gradient(165deg,#06121C 0%,#0B1F2E 38%,#0D3C56 84%,#165A82 130%); }
#stage { position:fixed; inset:0; width:100%; height:100%; z-index:2; display:block; opacity:0; transition:opacity .9s ease; pointer-events:none; }
body.gl-ready #stage { opacity:1; }
body.gl-ready.calm #stage { opacity:.5; }
#story { position:relative; z-index:3; }

/* ---------- type ---------- */
.eyebrow { margin:0 0 14px; font:600 14px/1 var(--cond); letter-spacing:.16em; text-transform:uppercase; color:var(--accent); display:flex; align-items:center; gap:10px; }
.eyebrow::before { content:""; width:26px; height:2px; background:currentColor; border-radius:2px; }
/* "specialty · district" (spans around a text dot): a flex row shrank each part into a column beside a stranded "·" on a phone. Flow it as TEXT: the rule stays at the start of line one, a long district wraps like words. */
.eyebrow:has(> span) { display:block; line-height:1.3; }
.eyebrow:has(> span)::before { display:inline-block; vertical-align:middle; margin:-2px 10px 0 0; }
body.is-night .eyebrow { color:var(--cyan); }
.title { margin:0 0 16px; font:400 clamp(2.75rem, 5.2vh + 1.3vw, 5rem)/1.02 var(--serif); letter-spacing:-.012em; color:var(--fg); }
.title em { font-style:italic; color:var(--accent); }
body.is-night .title em { color:var(--cyan); }
.stick .panel:not(.hero-panel) .title { font-size:clamp(2.75rem, 4.1vh + 1vw, 3.9rem); }
.title.sm { font-size:clamp(2.2rem, 3.6vh + 1vw, 3.1rem); }
.lede { margin:0 0 18px; color:var(--fg-2); }
.muted { color:var(--ink-2); margin:2px 0; }
.sub { margin:26px 0 10px; font:600 15px/1 var(--cond); letter-spacing:.14em; text-transform:uppercase; color:var(--ink-2); }
.gold { color:#9A7410; }
.creds { margin:0 0 14px; color:var(--ink-2); font-weight:500; }

/* ---------- buttons ---------- */
.btn { display:inline-flex; align-items:center; justify-content:center; gap:9px; border:1px solid transparent; border-radius:999px; padding:12px 22px; font:600 16px/1 var(--sans); cursor:pointer; text-decoration:none; transition:transform .25s cubic-bezier(.2,.7,.2,1), box-shadow .25s ease, background .25s ease; white-space:nowrap; }
.btn:hover { transform:translateY(-2px); }
.btn-primary { background:linear-gradient(135deg,var(--accent),#0B5C58); color:#fff; box-shadow:0 12px 26px -12px rgba(14,111,106,.7), inset 0 1px 0 rgba(255,255,255,.28); }
.btn-wa { background:var(--wa); color:#06361b; box-shadow:0 12px 26px -12px rgba(37,211,102,.7), inset 0 1px 0 rgba(255,255,255,.4); }
.btn-ghost { background:rgba(255,255,255,.5); color:var(--ink); border-color:rgba(14,27,38,.16); backdrop-filter:blur(8px); }
body.is-night .btn-ghost { color:#fff; background:rgba(255,255,255,.08); border-color:rgba(255,255,255,.26); }
.btn-lg { padding:16px 26px; font-size:17px; } .btn-sm { padding:10px 18px; font-size:15px; }
.ctas, .row { display:flex; flex-wrap:wrap; gap:12px; }

/* ---------- header: a floating glass bar, same in all three site types ---------- */
.hdr { position:fixed; z-index:50; top:0; left:0; right:0; padding:10px var(--pad) 0; pointer-events:none; }
.hdr-in { max-width:1320px; margin:0 auto; display:flex; align-items:center; gap:18px; padding:8px 10px 8px 12px; border-radius:999px; pointer-events:auto;
  background:rgba(255,255,255,.62); backdrop-filter:blur(18px) saturate(1.3); -webkit-backdrop-filter:blur(18px) saturate(1.3);
  border:1px solid rgba(255,255,255,.7); box-shadow:var(--shadow), inset 0 1px 0 #fff; color:var(--ink); }
body.is-night .hdr-in { background:rgba(12,35,51,.6); border-color:rgba(143,240,250,.2); color:#fff; box-shadow:0 24px 60px -24px rgba(0,0,0,.6); }
.brand { display:flex; align-items:center; gap:11px; text-decoration:none; min-width:0; }
.mono { flex:none; width:40px; height:40px; border-radius:50%; display:grid; place-items:center; background:linear-gradient(135deg,var(--accent-2),var(--accent)); color:#fff; font:600 16px/1 var(--cond); letter-spacing:.04em; box-shadow:inset 0 1px 0 rgba(255,255,255,.4); }
.brand-t { display:flex; flex-direction:column; min-width:0; line-height:1.15; }
.brand-t b { font-weight:600; font-size:16px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.bk-short { display:none; }
.brand-t small { font-size:13px; opacity:.7; white-space:nowrap; }
.hnav { margin:0 auto; display:flex; gap:4px; }
.hnav a { text-decoration:none; font-weight:500; font-size:15px; padding:9px 15px; border-radius:999px; opacity:.82; transition:background .2s, opacity .2s; }
.hnav a:hover, .hnav a.on { background:rgba(14,111,106,.1); opacity:1; }
body.is-night .hnav a:hover { background:rgba(143,240,250,.12); }
.hcta { display:flex; align-items:center; gap:8px; margin-left:auto; }
.hnav + .hcta { margin-left:0; }
.menu { display:none; width:42px; height:42px; border-radius:50%; border:1px solid rgba(14,27,38,.14); background:rgba(255,255,255,.5); color:inherit; place-items:center; cursor:pointer; }
.mnav { max-width:1320px; margin:8px auto 0; border-radius:26px; padding:10px; display:flex; flex-direction:column; pointer-events:auto; background:rgba(255,255,255,.86); backdrop-filter:blur(18px); border:1px solid #fff; box-shadow:var(--shadow); color:var(--ink); }
.mnav[hidden] { display:none; }
.mnav a { text-decoration:none; padding:14px 16px; border-radius:16px; font-weight:500; display:flex; align-items:center; gap:10px; }
.mnav a:active { background:rgba(14,111,106,.1); }
.mnav .mlogin { border-top:1px solid var(--line); margin-top:6px; border-radius:0 0 16px 16px; color:var(--accent); font-weight:600; }

.rail { position:fixed; z-index:40; right:18px; top:50%; transform:translateY(-50%); display:flex; flex-direction:column; gap:12px; }
.rail button { position:relative; width:12px; height:12px; padding:0; border-radius:50%; border:2px solid rgba(14,27,38,.35); background:transparent; cursor:pointer; transition:all .3s; }
body.is-night .rail button { border-color:rgba(255,255,255,.5); }
.rail button.on { background:var(--accent); border-color:var(--accent); transform:scale(1.25); }
.rail button span { position:absolute; right:22px; top:50%; transform:translateY(-50%); font:600 12px/1 var(--cond); letter-spacing:.12em; text-transform:uppercase; white-space:nowrap; padding:6px 10px; border-radius:999px; background:rgba(255,255,255,.9); color:var(--ink); opacity:0; pointer-events:none; transition:opacity .2s; }
.rail button:hover span, .rail button:focus-visible span { opacity:1; }

.aud { position:fixed; z-index:45; right:16px; bottom:16px; display:flex; align-items:center; gap:4px; padding:5px 6px 5px 14px; border-radius:999px; font:500 13px/1 var(--sans); background:rgba(255,255,255,.78); backdrop-filter:blur(14px); border:1px solid #fff; box-shadow:var(--shadow); color:var(--ink); }
body.is-night .aud { background:rgba(12,35,51,.7); color:#fff; border-color:rgba(143,240,250,.2); }
.aud span { opacity:.65; margin-right:4px; }
.aud button { border:0; background:transparent; color:inherit; font:600 13px/1 var(--sans); padding:8px 13px; border-radius:999px; cursor:pointer; }
.aud button[aria-pressed="true"] { background:var(--accent); color:#fff; }

/* ---------- stations: a tall section; ONE sticky viewport-high frame inside it ---------- */
.stn { position:relative; height:calc(var(--h) * 1vh); }
.stn.flow { height:auto; min-height:100vh; min-height:100svh; padding:calc(var(--hdr) + clamp(36px,7vh,72px)) 0 clamp(56px,8vh,96px); }
.fly { height:calc(var(--fly, 60) * 1vh); }
.stick { position:sticky; top:0; height:100vh; height:100svh; display:grid; align-items:center; padding:calc(var(--hdr) + 22px) var(--pad) 26px; pointer-events:none; overflow:hidden; }
.stick > * { grid-area:1/1; }
.panel { pointer-events:auto; justify-self:start; width:min(540px, 42vw); max-height:calc(100svh - var(--hdr) - 56px); overflow:hidden; padding:clamp(18px,3.2vh,34px) clamp(20px,2.4vw,34px);
  background:var(--glass); backdrop-filter:blur(16px) saturate(1.25); -webkit-backdrop-filter:blur(16px) saturate(1.25); border-radius:22px; border:1px solid var(--card-line);
  box-shadow:var(--shadow), inset 0 1px 0 rgba(255,255,255,.75); transition:background .5s ease, border-color .5s ease, opacity .6s ease, transform .6s ease; }
.hero-panel { background:none; border:0; box-shadow:none; backdrop-filter:none; -webkit-backdrop-filter:none; padding-left:0; width:min(600px, 46vw); }
.hero-panel .title { font-size:clamp(3.4rem, 8vh + 2vw, 7rem); line-height:.95; margin-bottom:18px; }
.scrollhint { margin:26px 0 0; font:500 13px/1 var(--cond); letter-spacing:.16em; text-transform:uppercase; color:var(--ink-2); opacity:.7; }
.panel-night { opacity:0; transform:translateY(14px); pointer-events:none; }
body.is-deep-night [data-panel="day"] { opacity:0; transform:translateY(-14px); pointer-events:none; }
body.is-deep-night .panel-night { opacity:1; transform:none; pointer-events:auto; }

.steps { list-style:none; counter-reset:s; margin:0 0 14px; padding:0; display:grid; gap:9px; }
.steps li { counter-increment:s; position:relative; padding:2px 0 2px 44px; font-size:16px; line-height:22px; color:var(--fg-2); opacity:.62; transition:opacity .35s ease, color .35s ease; }
.steps li::before { content:attr(data-n); position:absolute; left:0; top:-1px; width:30px; height:30px; border-radius:50%; display:grid; place-items:center; font:600 16px/1 var(--cond); border:1.5px solid currentColor; transition:all .35s ease; }
.steps li b { color:var(--fg); font-weight:600; }
.steps li.on { opacity:1; }
.steps li.on::before { background:var(--accent); border-color:var(--accent); color:#fff; box-shadow:0 0 0 5px rgba(14,111,106,.14); }
.cap { margin:0; font:500 15px/1 var(--cond); letter-spacing:.1em; text-transform:uppercase; color:var(--accent); }
.bens { list-style:none; padding:0; margin:0; display:grid; gap:10px; }
.bens li { padding:12px 16px 12px 18px; border-radius:16px; border:1px solid var(--line); background:rgba(255,255,255,.5); font-size:17px; line-height:23px; opacity:.6; transition:all .4s ease; border-left:4px solid transparent; }
.bens li b { font-weight:600; }
.bens li.on { opacity:1; border-left-color:var(--accent-2); background:rgba(255,255,255,.88); box-shadow:0 14px 30px -18px rgba(14,60,90,.35); }
[data-aud-show] { display:none; }
html[data-aud="patients"] [data-aud-show="patients"], html[data-aud="doctors"] [data-aud-show="doctors"] { display:inline; }
.chips-row { display:flex; flex-wrap:wrap; gap:8px; margin:0; } .chips-row span { padding:7px 14px; border-radius:999px; background:rgba(14,111,106,.1); color:var(--accent); font:600 14px/1 var(--cond); letter-spacing:.1em; text-transform:uppercase; }
.two-doors { align-self:end; justify-self:end; margin:0 4vw 6vh 0; font:400 clamp(2rem,4.4vh + 1.4vw,3.8rem)/1 var(--serif); text-align:right; color:var(--ink); opacity:0; transform:translateY(16px); transition:opacity .7s ease, transform .7s ease; text-shadow:0 2px 24px rgba(255,255,255,.9); pointer-events:none; }
.two-doors em { color:var(--accent); } .two-doors.on { opacity:1; transform:none; }

/* ---------- about + visit (DOM; the camera is calm above them) ---------- */
.wrap { max-width:1180px; margin:0 auto; padding:0 var(--pad); }
.stn.flow .wrap + .wrap { margin-top:clamp(32px,5vh,64px); }   /* the chips, the clinic, the gallery, the words: one block ran straight into the next */
.wrap.two { display:grid; grid-template-columns:minmax(0,380px) minmax(0,1fr); gap:clamp(24px,4vw,64px); align-items:start; margin-bottom:clamp(48px,8vh,96px); }
.card { background:var(--glass); backdrop-filter:blur(14px) saturate(1.2); -webkit-backdrop-filter:blur(14px) saturate(1.2); border:1px solid var(--card-line); border-radius:22px; padding:clamp(20px,2.4vw,30px); box-shadow:var(--shadow), inset 0 1px 0 rgba(255,255,255,.75); color:var(--ink); }
.portrait .avatar { width:112px; height:112px; border-radius:50%; overflow:hidden; margin-bottom:16px; box-shadow:0 14px 30px -14px rgba(14,60,90,.5); } .portrait .avatar svg { width:100%; height:100%; display:block; }
.portrait h3 { margin:0; font:400 2.2rem/1.05 var(--serif); }
.facts { margin:18px 0 0; display:grid; gap:12px; } .facts div { display:grid; gap:2px; padding-top:12px; border-top:1px solid var(--line); } .facts dt { font:600 12px/1 var(--cond); letter-spacing:.14em; text-transform:uppercase; color:var(--ink-2); } .facts dd { margin:0; font-weight:500; }
.facts small { font:400 13px var(--sans); color:var(--ink-2); }
.prose p { margin:0 0 14px; max-width:60ch; color:var(--ink); }
.timeline { list-style:none; margin:0; padding:0 0 0 18px; border-left:2px solid rgba(14,111,106,.25); display:grid; gap:14px; }
.timeline li { position:relative; } .timeline li::before { content:""; position:absolute; left:-25px; top:8px; width:10px; height:10px; border-radius:50%; background:var(--accent-2); box-shadow:0 0 0 4px rgba(63,182,196,.2); }
.timeline b { display:block; font-weight:600; } .timeline span { color:var(--ink-2); } .timeline em { font:600 14px var(--cond); font-style:normal; color:var(--accent); margin-left:8px; }
.svc-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(250px,1fr)); gap:16px; margin:18px 0 22px; }
.svc { padding:20px; border-radius:22px; background:var(--glass); backdrop-filter:blur(12px); border:1px solid var(--card-line); box-shadow:var(--shadow), inset 0 1px 0 rgba(255,255,255,.75); color:var(--ink); transform-style:preserve-3d; transition:transform .5s cubic-bezier(.2,.7,.2,1); }
.svc:hover { transform:translateY(-6px) rotateX(3deg); }
.svc img { width:68px; height:68px; margin:-4px 0 10px -6px; filter:drop-shadow(0 12px 14px rgba(14,60,90,.28)); }
.svc h3 { margin:0 0 6px; font:600 19px/1.2 var(--sans); } .svc p { margin:0; color:var(--ink-2); font-size:16px; line-height:23px; }
.chips { display:flex; flex-wrap:wrap; gap:8px; } .chips span { padding:8px 15px; border-radius:999px; background:rgba(255,255,255,.7); border:1px solid var(--line); font-size:15px; color:var(--ink); }
.visit-grid { display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,1fr); gap:clamp(18px,3vw,36px); margin:22px 0 40px; align-items:start; }
.board { border-radius:24px; padding:clamp(18px,2.4vw,30px); color:#E6F6FA; background:linear-gradient(160deg,#0B1F2E 0%,#0D3C56 62%,#1B6E9C 160%); box-shadow:var(--shadow), inset 0 1px 0 rgba(255,255,255,.18); }
.board-h, .board .brow { display:grid; grid-template-columns:1.1fr 1fr 1fr; gap:10px; align-items:center; }
.board-h { font:600 12px/1 var(--cond); letter-spacing:.18em; text-transform:uppercase; color:var(--cyan); padding-bottom:12px; border-bottom:1px solid rgba(143,240,250,.25); }
.board .brow { padding:13px 0; border-bottom:1px solid rgba(255,255,255,.08); font:600 20px/1 var(--cond); letter-spacing:.04em; } .board .brow.today { color:var(--cyan); } .board .brow.closed span:not(:first-child) { color:rgba(255,255,255,.35); }
.board .brow span:first-child { font:500 17px var(--sans); letter-spacing:0; }
.board-n { margin:16px 0 0; font-size:14px; line-height:20px; color:rgba(230,246,250,.7); }
.stack { display:grid; gap:16px; } .loc h3, .stack .card h3 { margin:6px 0 6px; font:600 21px/1.2 var(--sans); } .card .ico { width:60px; height:60px; margin:-6px 0 4px -4px; filter:drop-shadow(0 10px 12px rgba(14,60,90,.28)); }
.emergency { margin:16px 0 0; font-size:14px; line-height:20px; color:var(--ink-2); padding-top:12px; border-top:1px solid var(--line); }
.cta-band { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:22px; padding:clamp(24px,3.4vw,44px); border-radius:28px; margin:8px 0 44px; color:#fff; background:linear-gradient(135deg,#0B1F2E 0%,#0D3C56 55%,#1B6E9C 150%); box-shadow:var(--shadow); }
.cta-band .title { color:#fff; margin:0; } .cta-band .title em { color:var(--cyan); } .cta-band .eyebrow { color:var(--cyan); }
.cta-band .btn-ghost { color:#fff; background:rgba(255,255,255,.08); border-color:rgba(255,255,255,.3); }
.faqs { display:grid; gap:10px; max-width:820px; margin-bottom:56px; }
.faqs details { background:var(--glass); backdrop-filter:blur(12px); border:1px solid var(--card-line); border-radius:18px; padding:16px 20px; color:var(--ink); }
.faqs summary { cursor:pointer; font-weight:600; list-style:none; display:flex; justify-content:space-between; gap:12px; } .faqs summary::after { content:"+"; font:600 22px/1 var(--cond); color:var(--accent); transition:transform .3s; } .faqs details[open] summary::after { transform:rotate(45deg); } .faqs p { margin:10px 0 0; color:var(--ink-2); }
.foot { margin-top:24px; padding:36px 0 40px; background:linear-gradient(180deg,rgba(255,255,255,0),rgba(255,255,255,.7) 40%); border-top:1px solid var(--line); color:var(--ink); }
.foot-in { display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:26px; } .foot b { display:block; margin-bottom:6px; } .foot p { margin:3px 0; font-size:15px; line-height:22px; } .foot a { color:var(--accent); text-decoration:none; font-weight:500; }
.legal { grid-column:1/-1; display:flex; flex-wrap:wrap; justify-content:space-between; gap:8px 24px; padding-top:18px; border-top:1px solid var(--line); font-size:13px; color:var(--ink-2); }

/* ---------- booking modal (a mock: same steps as the live site) ---------- */
.modal { position:fixed; inset:0; z-index:90; display:grid; place-items:center; padding:16px; background:rgba(7,21,33,.5); backdrop-filter:blur(8px); }
.modal[hidden] { display:none; }
.sheet { width:min(520px,100%); max-height:calc(100svh - 32px); overflow:auto; background:#fff; border-radius:28px; box-shadow:0 40px 90px -30px rgba(7,21,33,.7); color:var(--ink); }
.sheet header { display:flex; align-items:center; gap:12px; padding:18px 18px 12px 20px; } .sheet header b { display:block; font-size:18px; } .sheet header small { color:var(--ink-2); font-size:14px; }
.sheet .close { margin-left:auto; width:40px; height:40px; border-radius:50%; border:0; background:var(--ground-2); font-size:24px; line-height:1; cursor:pointer; }
.steps-bar { display:flex; gap:6px; padding:0 20px 12px; } .steps-bar i { flex:1; height:4px; border-radius:2px; background:var(--ground-2); } .steps-bar i.on { background:var(--accent-2); }
.step { display:none; padding:6px 20px 22px; } .step.on { display:block; }
.field { margin:0 0 14px; border:0; padding:0; min-width:0; } .field label, .field legend { display:block; font-weight:600; font-size:14px; margin-bottom:6px; padding:0; }
.field input { width:100%; padding:13px 15px; border:1.5px solid rgba(14,27,38,.16); border-radius:14px; font:500 17px var(--sans); background:#fff; } .field input:focus { outline:none; border-color:var(--accent-2); box-shadow:0 0 0 4px rgba(63,182,196,.2); }
.field-row { display:grid; grid-template-columns:1fr 110px; gap:12px; } .field.small input { text-align:center; }
.seg { display:flex; gap:6px; } .seg label { flex:1; margin:0; position:relative; } .seg input { position:absolute; opacity:0; } .seg span { display:block; text-align:center; padding:12px 6px; border-radius:14px; border:1.5px solid rgba(14,27,38,.16); font-weight:500; cursor:pointer; } .seg input:checked + span { background:var(--accent); color:#fff; border-color:var(--accent); } .seg input:focus-visible + span { outline:3px solid var(--accent-2); outline-offset:2px; }
.hint { color:var(--ink-2); font-size:14px; line-height:20px; margin:6px 0 14px; } .hint.top { margin-top:0; }
.actions { display:flex; gap:10px; justify-content:flex-end; margin-top:8px; }
.datestrip { display:flex; gap:8px; overflow-x:auto; padding:2px 0 12px; scrollbar-width:none; } .datestrip::-webkit-scrollbar { display:none; }
.datestrip button { flex:none; width:64px; padding:10px 0; border-radius:16px; border:1.5px solid rgba(14,27,38,.14); background:#fff; cursor:pointer; font:500 13px var(--sans); color:var(--ink-2); } .datestrip button b { display:block; font:600 24px/1.1 var(--cond); color:var(--ink); } .datestrip button.on { background:var(--accent); border-color:var(--accent); color:#fff; } .datestrip button.on b { color:#fff; } .datestrip button[disabled] { opacity:.4; cursor:not-allowed; }
.grp h4 { margin:8px 0 8px; font:600 13px/1 var(--cond); letter-spacing:.14em; text-transform:uppercase; color:var(--ink-2); }
.slots { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin-bottom:6px; } .slots button { padding:11px 0; border-radius:999px; border:1.5px solid rgba(14,27,38,.14); background:#fff; font:600 17px var(--cond); cursor:pointer; color:var(--ink); } .slots button.on { background:var(--accent); border-color:var(--accent); color:#fff; } .slots button[disabled] { color:#A9B7C3; text-decoration:line-through; cursor:not-allowed; }
.ok-badge { display:inline-block; padding:8px 16px; border-radius:999px; background:rgba(47,169,140,.14); color:#1E7F67; font-weight:600; margin-bottom:12px; } .ok-box { padding:16px; border-radius:18px; background:var(--ground); line-height:26px; margin-bottom:10px; } .ok-box b { font-weight:600; }

/* ---------- low frames (shown only without WebGL / ?quality=low) ---------- */
.lf { display:none; margin:0; }
body.tier-low #stage, body.tier-low #night { display:none; }
body.tier-low .lf { display:block; justify-self:end; pointer-events:none; }
body.tier-low .lf canvas { display:block; width:100%; height:auto; border-radius:34px; box-shadow:var(--shadow); transform:perspective(1400px) rotateY(-9deg) rotateX(3deg); background:#fff; }
body.tier-low .lf-wa, body.tier-low .lf-app { width:min(300px,76vw); } body.tier-low .lf-q { width:min(560px,90vw); } body.tier-low .lf-hero { width:min(360px,70vw); }
body.tier-low .lf-hist { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; width:min(520px,92vw); } body.tier-low .lf-hist canvas { transform:none; border-radius:18px; box-shadow:none; background:transparent; } body.tier-low .lf-hist canvas[data-lf="id"] { grid-column:1/-1; }
body.tier-low .lf-ben { display:grid; grid-template-columns:repeat(2,110px); gap:14px; } body.tier-low .lf-ben img { width:110px; filter:drop-shadow(0 14px 16px rgba(14,60,90,.28)); }
.lf-hero .orb { position:relative; aspect-ratio:1; border-radius:50%; background:radial-gradient(circle at 34% 28%,#fff 0,rgba(255,255,255,.55) 10%,rgba(63,182,196,.35) 42%,rgba(14,111,106,.5) 100%); box-shadow:inset 0 -14px 40px rgba(14,111,106,.35), 0 30px 60px -24px rgba(14,60,90,.5); }
.lf-hero .orb i { position:absolute; inset:30%; background:linear-gradient(135deg,#0E6F6A,#3FB6C4); border-radius:12%; clip-path:polygon(33% 0,67% 0,67% 33%,100% 33%,100% 67%,67% 67%,67% 100%,33% 100%,33% 67%,0 67%,0 33%,33% 33%); filter:drop-shadow(0 6px 10px rgba(14,111,106,.5)); }
body.tier-low .stn { height:auto; } body.tier-low .fly { display:none; }
body.tier-low .stick, html.still .stick { position:relative; height:auto; min-height:0; display:grid; grid-template-columns:minmax(0,540px) minmax(0,1fr); gap:clamp(20px,4vw,56px); align-items:center; padding-top:clamp(96px,14vh,140px); padding-bottom:clamp(36px,6vh,72px); overflow:visible; }
body.tier-low .stick > *, html.still .stick > * { grid-area:auto; }
body.tier-low .panel, html.still .panel { width:auto; max-width:540px; }
body.tier-low .panel-night, body.tier-low .two-doors { display:none; }
body.tier-low #bg { background:radial-gradient(120% 90% at 78% 8%, #FFFFFF 0%, var(--ground) 38%, var(--ground-2) 100%); }

/* motion off / reduced motion: normal flow, the canvas shows each station as a still */
html.still .stn:not(.flow) { height:auto; min-height:100vh; min-height:100svh; } html.still .fly { display:none; }
html.still .stick { min-height:100vh; min-height:100svh; align-content:center; } html.still .panel-night { display:none; } html.still .two-doors { display:none; }

/* ---------- tall-and-narrow (phones): text sits UNDER the 3D, never over it ---------- */
@media (max-aspect-ratio: 9/10), (max-width: 760px) {
  :root { --hdr:64px; }
  body { font-size:16px; line-height:25px; }
  .hnav, .hlogin, .rail { display:none; } .menu { display:inline-grid; }
  .brand-t small { display:none; } .brand-t b { max-width:none; font-size:15.5px; } .bk-long { display:none; } .bk-short { display:inline; }
  .hdr-in { gap:10px; padding-right:8px; } .hcta { gap:6px; } .hcta .btn-sm { padding:9px 18px; }
  .stick { align-items:end; padding:calc(var(--hdr) + 8px) 14px 14px; }
  .panel, .hero-panel { justify-self:stretch; width:auto; max-height:46svh; padding:16px 18px; }
  .hero-panel { background:var(--glass); border:1px solid var(--card-line); box-shadow:var(--shadow); backdrop-filter:blur(14px); padding-left:18px; }
  .title { font-size:clamp(2.125rem, 9.4vw, 2.9rem); margin-bottom:10px; } .hero-panel .title { font-size:clamp(2.6rem, 11.5vw, 3.6rem); margin-bottom:8px; }
  .steps { gap:6px; } .steps li { font-size:15px; line-height:20px; padding-left:38px; } .steps li::before { width:26px; height:26px; font-size:14px; }
  .steps li:not(.on) { display:none; } .lede { font-size:16px; line-height:24px; margin-bottom:12px; } .scrollhint { display:none; } .creds { font-size:15px; line-height:21px; margin-bottom:8px; }
  .bens li { padding:9px 12px; font-size:15px; line-height:20px; } .bens { gap:6px; } .bens li:not(.on) { display:none; }
  .ctas { gap:8px; } .btn-lg { padding:13px 18px; font-size:16px; } .hero-panel .ctas .btn-ghost { display:none; }
  .aud { left:10px; right:auto; top:auto; bottom:calc(8px + env(safe-area-inset-bottom, 0px)); font-size:11px; gap:2px; padding:2px 3px 2px 10px; } .aud button { padding:6px 10px; font-size:11px; }
  .stick { padding-bottom:calc(46px + env(safe-area-inset-bottom, 0px)); } .foot { padding-bottom:72px; }
  .two-doors { align-self:start; justify-self:center; margin:calc(var(--hdr) + 52px) 0 0; text-align:center; }
  .wrap.two, .visit-grid { grid-template-columns:1fr; } .cta-band { flex-direction:column; align-items:flex-start; }
  body.tier-low .stick, html.still .stick { grid-template-columns:1fr; }
  .board .brow { font-size:17px; white-space:nowrap; } .board-h, .board .brow { grid-template-columns:1.2fr 1fr 1fr; gap:6px; }
}
@media (prefers-reduced-motion: reduce) { .btn, .svc, .panel { transition:none; } }
@media print { .hdr, .rail, .aud, #stage, #night { display:none; } }

/* ---------- production additions: things the data decides ---------- */
[hidden] { display:none !important; }
.hint.err { color:#B42318; }
.sheet .actions .btn { text-decoration:none; }
.aud[hidden] { display:none; }
/* photos, awards, achievements: styled like the rest (glass cards, the education timeline) */
.extras { margin-top:clamp(40px,7vh,72px); }
.gallery { display:grid; grid-template-columns:repeat(auto-fill,minmax(200px,1fr)); gap:14px; margin:14px 0 26px; }
.gallery figure { margin:0; border-radius:22px; overflow:hidden; background:var(--glass); border:1px solid var(--card-line); box-shadow:var(--shadow), inset 0 1px 0 rgba(255,255,255,.75); }
.gallery img { width:100%; aspect-ratio:4/3; object-fit:cover; display:block; }
.gallery figcaption { padding:10px 14px 12px; font-size:14px; line-height:20px; color:var(--ink-2); }
[data-awards] li, [data-achievements] li { padding-right:6px; }
.portrait .avatar img { width:100%; height:100%; object-fit:cover; display:block; }
.error { margin:6px 0 12px; color:#B42318; font-size:14px; line-height:20px; }
.error[hidden] { display:none; }
.avatar .initials { display:grid; place-items:center; width:100%; height:100%; font:600 40px/1 var(--cond); letter-spacing:.04em; color:#fff; background:linear-gradient(135deg,var(--accent-2),var(--accent)); }
.board .where { display:block; font:500 12px/16px var(--sans); letter-spacing:0; color:rgba(230,246,250,.65); }
.stars { color:var(--gold); letter-spacing:2px; margin-bottom:6px; }
blockquote.svc { margin:0; } blockquote.svc footer { margin-top:10px; font-size:15px; color:var(--ink-2); }
.social { margin-top:10px; }
.preview-bar { position:sticky; top:0; z-index:95; padding:10px 16px; background:#10284A; color:#fff; font:500 14px/1.4 var(--sans); text-align:center; }
.timeline a { color:var(--accent); }