/* Layout: a navy sluice-box hero where gold settles behind riffle ridges, then pale riverbank bands.
   Brand blue leads; gold is the thing that settles and stays. */
:root{
  --paper:#EEF2F6; --paper-2:#E1E8F0; --card:#F7F9FB;
  --ink:#13233A; --ink-soft:#4C5B70; --rule:#C5D0DC;
  --blue:#315585; --blue-light:#4A7DB9; --teal:#3C7C80;
  --gold:#9A6E22; --gold-bright:#D7A84E;
  --deep:#0D1B2E; --deep-2:#16294A; --on-deep:#E9EEF5; --on-deep-soft:#A8B6CA;
  --f-display:"Gloock", "Iowan Old Style", Georgia, serif;
  --f-body:"Hanken Grotesk", "Helvetica Neue", Arial, sans-serif;
  --f-mono:"IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;
}
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]){
  --paper:#0F1A28; --paper-2:#14223A; --card:#18273D; --ink:#E6ECF4; --ink-soft:#9DAAC0; --rule:#283A52;
  --blue:#86ABDC; --blue-light:#9EC0EA; --teal:#78B6B9; --gold:#D9AA52; color-scheme:dark;
}}
:root[data-theme="dark"]{
  --paper:#0F1A28; --paper-2:#14223A; --card:#18273D; --ink:#E6ECF4; --ink-soft:#9DAAC0; --rule:#283A52;
  --blue:#86ABDC; --blue-light:#9EC0EA; --teal:#78B6B9; --gold:#D9AA52; color-scheme:dark;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion: reduce){ html{scroll-behavior:auto} }
body{background:var(--paper); color:var(--ink); font-family:var(--f-body); font-size:17px; line-height:1.6; -webkit-font-smoothing:antialiased; margin:0}
body::before{content:""; position:fixed; inset:0 0 auto; height:env(safe-area-inset-top,0px); z-index:30; background:var(--deep)}
img{max-width:100%; display:block}
a{color:inherit}
:focus-visible{outline:2px solid var(--gold-bright); outline-offset:3px; border-radius:2px}
.wrap{max-width:1180px; margin-inline:auto; padding-left:max(16px, env(safe-area-inset-left,0px)); padding-right:max(16px, env(safe-area-inset-right,0px))}
h1,h2,h3{font-family:var(--f-display); font-weight:400; text-wrap:balance; margin:0; letter-spacing:-.01em}
p{margin:0}
[hidden]{display:none!important}
.label{font-family:var(--f-mono); font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:var(--blue)}
.on-deep .label{color:var(--gold-bright)}
.hl{color:var(--blue)}
.on-deep .hl{color:var(--gold-bright)}
.skip{position:absolute; left:-9999px}
.skip:focus{left:16px; top:16px; z-index:50; background:var(--card); padding:10px 14px}

.btn{display:inline-flex; align-items:center; gap:10px; font-family:var(--f-body); font-weight:600; font-size:16px; text-decoration:none; padding:15px 24px; border-radius:2px; border:1px solid transparent; cursor:pointer; transition:transform .2s ease, background .2s ease, border-color .2s ease}
.btn svg{width:18px; height:18px}
.btn-gold{background:var(--gold-bright); color:#13233A}
.btn-gold:hover{background:#E6BC66; transform:translateY(-1px)}
.btn-line{border-color:rgba(233,238,245,.35); color:var(--on-deep)}
.btn-line:hover{border-color:var(--on-deep)}
.btn-ink{background:var(--blue); color:#F4F7FB}
:root[data-theme="dark"] .btn-ink{color:#0F1A28}
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]) .btn-ink{color:#0F1A28} }
.btn-ink:hover{transform:translateY(-1px)}
.more{display:inline-flex; align-items:center; gap:8px; white-space:nowrap; font-weight:600; color:var(--blue); text-decoration:none; border-bottom:1px solid currentColor; padding-bottom:2px}
.more:hover{gap:12px}
.more{transition:gap .2s}

/* ---------- nav ---------- */
.nav{position:sticky; top:env(safe-area-inset-top,0px); z-index:20; background:rgba(13,27,46,.9); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); border-bottom:1px solid rgba(233,238,245,.08); color:var(--on-deep)}
.nav .wrap{display:flex; align-items:center; justify-content:space-between; gap:20px; padding-block:14px}
.brand{display:block; flex:none}
.brand img{height:26px; width:auto}
.nav nav ul{list-style:none; display:flex; gap:24px; margin:0; padding:0}
.nav nav a{text-decoration:none; font-size:14.5px; color:var(--on-deep-soft); transition:color .2s; white-space:nowrap}
.nav nav a:hover,.nav nav a[aria-current="page"]{color:var(--on-deep)}
.nav nav a[aria-current="page"]{box-shadow:inset 0 -2px 0 var(--gold-bright); padding-bottom:4px}
.nav .actions{display:flex; align-items:center; gap:10px}
.nav .btn{padding:10px 16px; font-size:14px}
.menu-btn{display:none; background:transparent; border:1px solid rgba(233,238,245,.3); color:var(--on-deep); border-radius:2px; width:42px; height:40px; cursor:pointer; place-items:center}
.menu-btn svg{width:20px; height:20px}
@media (max-width:1020px){
  .menu-btn{display:grid}
  .nav nav{position:absolute; left:0; right:0; top:100%; background:var(--deep); border-bottom:1px solid rgba(233,238,245,.1); padding:8px max(16px, env(safe-area-inset-right,0px)) 20px max(16px, env(safe-area-inset-left,0px))}
  .nav nav ul{flex-direction:column; gap:0}
  .nav nav a{display:block; padding:12px 0; font-size:17px; border-bottom:1px solid rgba(233,238,245,.08)}
  .nav nav a[aria-current="page"]{box-shadow:none; color:var(--gold-bright)}
  .nav nav:not(.open){display:none}
}
@media (max-width:420px){ .brand img{height:20px} .nav .btn{padding:9px 12px; font-size:13px} }

/* ---------- home hero ---------- */
.on-deep{background:var(--deep); color:var(--on-deep)}
.hero{position:relative; overflow:hidden; isolation:isolate}
.hero canvas{position:absolute; inset:0; width:100%; height:100%; z-index:-2; display:block}
.hero::after{content:""; position:absolute; inset:0; z-index:-1; background:linear-gradient(90deg, rgba(13,27,46,.94) 0%, rgba(13,27,46,.58) 45%, rgba(13,27,46,0) 75%); pointer-events:none}
.hero .wrap{padding-block:clamp(72px,11vw,140px) clamp(190px,22vw,250px)}
.coords{font-family:var(--f-mono); font-size:12px; letter-spacing:.16em; text-transform:uppercase; color:var(--on-deep-soft); display:flex; gap:14px; flex-wrap:wrap; align-items:center}
.coords i{width:28px; height:1px; background:var(--gold-bright); display:inline-block}
.hero h1{font-size:clamp(46px,7.6vw,108px); line-height:.97; margin-top:28px; max-width:11.5em}
.hero h1 em{font-style:normal; color:var(--gold-bright); display:block}
.lede{margin-top:28px; max-width:34em; font-size:clamp(17px,1.6vw,20px); color:var(--on-deep-soft)}
.ctas{margin-top:40px; display:flex; flex-wrap:wrap; gap:14px; align-items:center}
.gauge{position:absolute; right:max(16px, env(safe-area-inset-right,0px)); bottom:58px; font-family:var(--f-mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--on-deep-soft); text-align:right; line-height:1.7}
.gauge b{color:var(--gold-bright); font-weight:500}
@media (max-width:640px){ .gauge{display:none} .hero::after{background:linear-gradient(180deg, rgba(13,27,46,.92) 0%, rgba(13,27,46,.78) 60%, rgba(13,27,46,.1) 85%)} }

/* ---------- page hero (inner pages) ---------- */
.page-hero{position:relative; overflow:hidden}
.page-hero .wrap{padding-block:clamp(64px,9vw,120px) clamp(96px,11vw,140px); position:relative; z-index:1}
.page-hero h1{font-size:clamp(42px,6.4vw,88px); line-height:.98; margin-top:20px; max-width:13em}
.page-hero .lede{max-width:36em}
.page-hero .bed{position:absolute; left:0; right:0; bottom:0; height:64px; z-index:0}
.split{display:grid; grid-template-columns:minmax(0,7fr) minmax(0,4fr); gap:clamp(32px,6vw,80px); align-items:end}
.portrait{border-radius:3px; overflow:hidden; aspect-ratio:4/5; max-width:100%; box-shadow:0 30px 60px -30px rgba(0,0,0,.6); position:relative}
.portrait img{width:100%; height:100%; object-fit:cover; object-position:50% 25%}
.portrait figcaption{position:absolute; left:0; right:0; bottom:0; padding:14px 16px; font-family:var(--f-mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:#E9EEF5; background:linear-gradient(0deg, rgba(13,27,46,.8), transparent)}
@media (max-width:820px){ .split{grid-template-columns:minmax(0,1fr)} .split .portrait{max-width:360px} }

/* ---------- generic bands ---------- */
.band{padding-block:clamp(80px,10vw,136px)}
.band.tight{padding-block:clamp(56px,7vw,96px)}
.alt{background:var(--paper-2)}
.head{display:flex; justify-content:space-between; align-items:flex-end; gap:24px; flex-wrap:wrap; margin-bottom:clamp(36px,5vw,60px)}
.head h2{font-size:clamp(36px,4.6vw,62px); line-height:1.02; max-width:14em; margin-top:14px}
.head > p{color:var(--ink-soft); max-width:26em}
.on-deep .head > p{color:var(--on-deep-soft)}
.prose{max-width:38em; display:grid; gap:18px; color:var(--ink-soft); font-size:18px}
.prose strong{color:var(--ink); font-weight:500}

/* ---------- definition ---------- */
.define{display:grid; grid-template-columns:minmax(0,5fr) minmax(0,6fr); gap:clamp(40px,7vw,110px); align-items:center}
.dict{border-left:1px solid var(--rule); padding-left:clamp(20px,3vw,36px)}
.dict .word{font-family:var(--f-display); font-size:clamp(54px,7vw,92px); line-height:1; margin-top:18px}
.dict .pron{font-family:var(--f-mono); font-size:14px; color:var(--ink-soft); margin-top:10px}
.dict .pron em{color:var(--blue); font-style:italic}
.dict ol{margin:28px 0 0; padding:0; list-style:none; display:grid; gap:18px; counter-reset:d}
.dict li{counter-increment:d; display:grid; grid-template-columns:28px minmax(0,1fr); font-size:18px; color:var(--ink-soft)}
.dict li::before{content:counter(d) "."; font-family:var(--f-mono); font-size:14px; color:var(--blue); padding-top:3px}
.dict li strong{color:var(--ink); font-weight:500}
.thesis{font-family:var(--f-display); font-size:clamp(34px,4.4vw,60px); line-height:1.05}
.thesis-note{margin-top:22px; color:var(--ink-soft); max-width:30em}
@media (max-width:820px){ .define{grid-template-columns:minmax(0,1fr)} }

/* ---------- pillars ---------- */
.pillars{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); border-top:1px solid var(--rule)}
.pillar{padding:34px 32px 10px 0; display:grid; gap:14px; align-content:start}
.pillar + .pillar{border-left:1px solid var(--rule); padding-left:32px}
.pillar svg{width:46px; height:46px; color:var(--blue); fill:none; stroke:currentColor; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round}
.pillar h3{font-size:34px; line-height:1.1}
.pillar p{color:var(--ink-soft)}
.pillar .tag{font-family:var(--f-mono); font-size:11.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-soft)}
@media (max-width:820px){ .pillars{grid-template-columns:minmax(0,1fr)} .pillar + .pillar{border-left:0; padding-left:0; border-top:1px solid var(--rule)} }

/* ---------- three jobs ---------- */
.jobs-grid{display:grid; grid-template-columns:minmax(0,4fr) minmax(0,7fr); gap:clamp(32px,6vw,90px); align-items:center}
.jobs h2{font-size:clamp(40px,5.2vw,72px); line-height:1}
.jobs p.sub{margin-top:22px; color:var(--on-deep-soft); max-width:26em}
.braid{width:100%; height:auto; display:block; overflow:visible}
.braid .chan{fill:none; stroke:rgba(233,238,245,.13); stroke-width:22; stroke-linecap:round}
.braid .flow{fill:none; stroke:#D7A84E; stroke-width:2.4; stroke-dasharray:3 15; stroke-linecap:round; animation:flow 1.6s linear infinite}
.braid .flow.b{animation-duration:1.9s} .braid .flow.c{animation-duration:2.2s}
.braid .coin{fill:#D7A84E}
.braid .coin-t{fill:#13233A; font-family:var(--f-display); font-size:30px}
.braid .end{fill:#0D1B2E; stroke:#D7A84E; stroke-width:2}
.braid .lbl{fill:#E9EEF5; font-family:var(--f-display); font-size:30px}
.braid .sub2{fill:#A8B6CA; font-family:var(--f-mono); font-size:13px; letter-spacing:.12em}
@keyframes flow{ to{ stroke-dashoffset:-36 } }
@media (prefers-reduced-motion: reduce){ .braid .flow{animation:none} }
@media (max-width:820px){ .jobs-grid{grid-template-columns:minmax(0,1fr)} }

/* ---------- tabs / needs ---------- */
.tabs{display:inline-flex; border:1px solid var(--rule); border-radius:2px; padding:4px; gap:4px; background:var(--card); flex-wrap:wrap}
.tabs button{font:600 15px var(--f-body); color:var(--ink-soft); background:transparent; border:0; padding:11px 20px; border-radius:1px; cursor:pointer; transition:background .2s, color .2s}
.tabs button[aria-selected="true"]{background:var(--ink); color:var(--paper)}
.panel{display:grid; grid-template-columns:minmax(0,5fr) minmax(0,7fr); gap:clamp(32px,6vw,90px)}
.panel .big{font-family:var(--f-display); font-size:clamp(32px,3.8vw,52px); line-height:1.06}
.panel .more{margin-top:28px}
.needs{list-style:none; margin:0; padding:0; display:grid}
.needs li{display:grid; grid-template-columns:64px minmax(0,1fr); gap:6px 18px; padding:26px 0; border-top:1px solid var(--rule)}
.needs li:last-child{border-bottom:1px solid var(--rule)}
.glyph{grid-row:span 2; width:48px; height:48px; border-radius:50%; border:1px solid var(--rule); display:grid; place-items:center; color:var(--blue)}
.glyph svg{width:24px; height:24px; fill:none; stroke:currentColor; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round}
.needs h3{font-size:26px; line-height:1.15}
.needs p{color:var(--ink-soft)}
@media (max-width:820px){ .panel{grid-template-columns:minmax(0,1fr)} }

/* ---------- rule of 72 ---------- */
.calc{background:var(--card); border:1px solid var(--rule); border-radius:3px; padding:clamp(24px,4vw,48px); display:grid; grid-template-columns:minmax(0,4fr) minmax(0,7fr); gap:clamp(28px,5vw,64px); align-items:center}
.readout{font-family:var(--f-display); font-size:clamp(64px,9vw,120px); line-height:.9; font-variant-numeric:tabular-nums}
.readout small{font-family:var(--f-body); font-size:18px; color:var(--ink-soft); display:block; margin-top:14px; line-height:1.4}
.ctrl{margin-top:30px}
.ctrl label{display:flex; justify-content:space-between; font-family:var(--f-mono); font-size:13px; letter-spacing:.08em; color:var(--ink-soft); text-transform:uppercase}
.ctrl label b{color:var(--ink); font-weight:500; font-variant-numeric:tabular-nums}
input[type=range]{-webkit-appearance:none; appearance:none; width:100%; height:28px; background:transparent; margin-top:8px}
input[type=range]::-webkit-slider-runnable-track{height:2px; background:var(--rule)}
input[type=range]::-moz-range-track{height:2px; background:var(--rule)}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none; width:22px; height:22px; border-radius:50%; background:var(--blue); margin-top:-10px; border:4px solid var(--card); box-shadow:0 0 0 1px var(--blue)}
input[type=range]::-moz-range-thumb{width:16px; height:16px; border-radius:50%; background:var(--blue); border:4px solid var(--card); box-shadow:0 0 0 1px var(--blue)}
.track-wrap{min-width:0}
.track{position:relative; height:150px; margin-inline:14px}
.track .axis{position:absolute; left:0; right:0; bottom:34px; height:1px; background:var(--ink-soft); opacity:.5}
.track .tick{position:absolute; bottom:12px; transform:translateX(-50%); font-family:var(--f-mono); font-size:11.5px; color:var(--ink-soft); font-variant-numeric:tabular-nums; white-space:nowrap}
.track .tick::before{content:""; position:absolute; left:50%; top:-9px; width:1px; height:6px; background:var(--ink-soft); opacity:.6}
.dbl{position:absolute; bottom:34px; transform:translate(-50%,50%); border-radius:50%; background:var(--gold); transition:left .35s ease, width .35s ease, height .35s ease}
.dbl span{position:absolute; bottom:calc(100% + 8px); left:50%; transform:translateX(-50%); font-family:var(--f-mono); font-size:11.5px; color:var(--ink); white-space:nowrap; font-variant-numeric:tabular-nums}
.mult{display:flex; justify-content:space-between; align-items:baseline; gap:16px; border-top:1px solid var(--rule); margin-top:18px; padding-top:16px; flex-wrap:wrap}
.mult b{font-family:var(--f-display); font-weight:400; font-size:34px; color:var(--blue); font-variant-numeric:tabular-nums}
.mult span{color:var(--ink-soft); font-size:15px}
.fine{margin-top:18px; font-size:13px; color:var(--ink-soft); font-style:italic}
@media (max-width:820px){ .calc{grid-template-columns:minmax(0,1fr)} }

/* ---------- steps ---------- */
.steps{list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); position:relative}
.steps::before{content:""; position:absolute; left:0; right:0; top:23px; height:1px; background:var(--rule)}
.steps li{position:relative; padding-right:22px}
.steps .n{width:46px; height:46px; border-radius:50%; background:var(--paper); border:1px solid var(--blue); color:var(--blue); display:grid; place-items:center; font-family:var(--f-mono); font-size:14px; position:relative}
.alt .steps .n{background:var(--paper-2)}
.steps h3{font-size:28px; margin-top:24px}
.steps p{color:var(--ink-soft); margin-top:8px; font-size:16px}
@media (max-width:900px){
  .steps{grid-template-columns:minmax(0,1fr); gap:30px}
  .steps::before{left:23px; right:auto; top:0; bottom:0; width:1px; height:auto}
  .steps li{display:grid; grid-template-columns:46px minmax(0,1fr); column-gap:22px; padding:0}
  .steps h3{margin-top:4px; font-size:26px}
  .steps .n{grid-row:span 2}
}

/* detailed steps (approach page) */
.stages{list-style:none; margin:0; padding:0; display:grid; gap:0; counter-reset:s}
.stage{display:grid; grid-template-columns:120px minmax(0,5fr) minmax(0,4fr); gap:clamp(20px,4vw,56px); padding:40px 0; border-top:1px solid var(--rule); align-items:start}
.stage:last-child{border-bottom:1px solid var(--rule)}
.stage .num{font-family:var(--f-display); font-size:64px; line-height:.9; color:var(--blue)}
.stage .river{display:block; font-family:var(--f-mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-soft); margin-top:10px}
.stage h3{font-size:clamp(30px,3.2vw,42px); line-height:1.05}
.stage p{color:var(--ink-soft); margin-top:12px; max-width:30em}
.stage .get{background:var(--card); border:1px solid var(--rule); border-radius:3px; padding:18px 20px}
.stage .get b{display:block; font-family:var(--f-mono); font-weight:500; font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--blue); margin-bottom:6px}
@media (max-width:820px){ .stage{grid-template-columns:minmax(0,1fr); gap:14px} .stage .num{font-size:48px} }

/* ---------- cards & grids ---------- */
.grid{display:grid; gap:clamp(16px,2vw,24px)}
.g2{grid-template-columns:repeat(2,minmax(0,1fr))}
.g3{grid-template-columns:repeat(3,minmax(0,1fr))}
.g4{grid-template-columns:repeat(4,minmax(0,1fr))}
@media (max-width:980px){ .g4{grid-template-columns:repeat(2,minmax(0,1fr))} .g3{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:620px){ .g2,.g3,.g4{grid-template-columns:minmax(0,1fr)} }
.card{background:var(--card); border:1px solid var(--rule); border-radius:3px; padding:28px; display:grid; gap:12px; align-content:start; min-width:0}
.card h3{font-size:26px; line-height:1.12}
.card p{color:var(--ink-soft)}
.card .glyph{grid-row:auto}
.card .k{font-family:var(--f-mono); font-size:11.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--blue)}
.on-deep .card{background:var(--deep-2); border-color:rgba(233,238,245,.1)}
.on-deep .card p{color:var(--on-deep-soft)}
.chips{display:flex; flex-wrap:wrap; gap:8px; margin-top:4px}
.chips span{font-family:var(--f-mono); font-size:12px; letter-spacing:.04em; border:1px solid var(--rule); border-radius:999px; padding:5px 12px; color:var(--ink-soft)}
.problem{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.3fr); gap:clamp(24px,5vw,70px); padding:40px 0; border-top:1px solid var(--rule)}
.problem:last-child{border-bottom:1px solid var(--rule)}
.problem h3{font-size:clamp(30px,3.2vw,44px); line-height:1.05}
.problem p{color:var(--ink-soft); font-size:18px}
@media (max-width:820px){ .problem{grid-template-columns:minmax(0,1fr); gap:12px} }

.checks{list-style:none; margin:0; padding:0; display:grid; gap:14px}
.checks li{display:grid; grid-template-columns:28px minmax(0,1fr); gap:12px; font-size:18px}
.checks li::before{content:""; width:20px; height:20px; margin-top:4px; border-radius:50%; border:1.5px solid var(--blue); background:radial-gradient(circle, var(--gold-bright) 0 3px, transparent 3.5px)}
.checks.no li::before{background:none; border-color:var(--ink-soft); opacity:.7}
.checks.no li{color:var(--ink-soft)}

.quote{font-family:var(--f-display); font-size:clamp(28px,3.4vw,46px); line-height:1.15; max-width:22em}
.quote cite{display:block; margin-top:22px; font-family:var(--f-mono); font-style:normal; font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:var(--on-deep-soft)}

/* ---------- timeline ---------- */
.timeline{list-style:none; margin:0; padding:0; position:relative}
.timeline::before{content:""; position:absolute; left:11px; top:8px; bottom:8px; width:1px; background:var(--rule)}
.timeline li{position:relative; display:grid; grid-template-columns:minmax(0,220px) minmax(0,1fr); gap:clamp(16px,4vw,48px); padding:0 0 44px 48px}
.timeline li::before{content:""; position:absolute; left:4px; top:8px; width:15px; height:15px; border-radius:50%; background:var(--paper); border:2px solid var(--blue)}
.timeline li:last-child::before{background:var(--gold-bright); border-color:var(--gold-bright)}
.timeline .where{font-family:var(--f-mono); font-size:12px; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-soft); padding-top:6px}
.timeline h3{font-size:28px; line-height:1.1}
.timeline p{color:var(--ink-soft); margin-top:8px; max-width:34em}
.timeline .lesson{display:inline-block; margin-top:12px; font-family:var(--f-mono); font-size:12.5px; color:var(--blue); letter-spacing:.04em}
@media (max-width:720px){ .timeline li{grid-template-columns:minmax(0,1fr); gap:6px; padding-left:40px} }

/* ---------- gallery (masonry columns) ---------- */
.gallery{columns:3 280px; column-gap:16px}
.gallery > *{break-inside:avoid; margin:0 0 16px}
.ph{margin:0 0 16px; border-radius:3px; overflow:hidden; position:relative; background:var(--deep); display:block}
.ph img{width:100%; height:auto}
.ph figcaption{position:absolute; left:0; right:0; bottom:0; padding:28px 18px 14px; color:#E9EEF5; font-size:14.5px; background:linear-gradient(0deg, rgba(13,27,46,.85), transparent)}
.story{background:var(--card); border:1px solid var(--rule); border-radius:3px; padding:22px; display:grid; gap:10px; align-content:start}
.story svg{width:34px; height:34px; color:var(--blue); fill:none; stroke:currentColor; stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round}
.story h3{font-size:22px; line-height:1.15}
.story p{color:var(--ink-soft); font-size:15.5px}

/* ---------- roles ---------- */
.role{display:grid; gap:10px; padding-top:22px; border-top:2px solid var(--blue); align-content:start}
.role .k{font-family:var(--f-mono); font-size:11.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-soft)}
.role h3{font-size:28px; line-height:1.1}
.role p{color:var(--ink-soft)}

/* ---------- founder teaser ---------- */
.founder{display:grid; grid-template-columns:minmax(0,4fr) minmax(0,7fr); gap:clamp(32px,6vw,80px); align-items:center}
.founder .portrait{max-width:420px}
.founder h2{font-size:clamp(38px,4.8vw,66px); line-height:1.02; margin-top:14px}
.founder .prose{margin-top:24px}
.founder .more{margin-top:28px}
@media (max-width:820px){ .founder{grid-template-columns:minmax(0,1fr)} .founder .portrait{max-width:320px} }

/* ---------- faq ---------- */
.faq{display:grid; border-top:1px solid var(--rule)}
.faq details{border-bottom:1px solid var(--rule)}
.faq summary{list-style:none; cursor:pointer; display:flex; justify-content:space-between; gap:24px; align-items:center; padding:24px 0; font-family:var(--f-display); font-size:clamp(22px,2.4vw,28px); line-height:1.2}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:""; flex:none; width:14px; height:14px; border-right:1.5px solid var(--blue); border-bottom:1.5px solid var(--blue); transform:rotate(45deg) translate(-3px,-3px); transition:transform .25s}
.faq details[open] summary::after{transform:rotate(-135deg) translate(-3px,-3px)}
.faq .ans{padding:0 0 26px; color:var(--ink-soft); max-width:40em; font-size:18px}
.faq .ans a{color:var(--blue)}

/* ---------- info bar ---------- */
.infobar{display:flex; flex-wrap:wrap; gap:14px 36px; margin-top:34px; font-family:var(--f-mono); font-size:13px; letter-spacing:.08em; text-transform:uppercase; color:var(--on-deep-soft)}
.infobar span{display:flex; gap:10px; align-items:center}
.infobar svg{width:18px; height:18px; color:var(--gold-bright); fill:none; stroke:currentColor; stroke-width:1.6}

/* ---------- seminar band ---------- */
.seminar{border-block:1px solid var(--rule)}
.seminar .wrap{display:flex; justify-content:space-between; align-items:center; gap:28px 48px; flex-wrap:wrap; padding-block:clamp(44px,6vw,72px)}
.seminar h2{font-size:clamp(30px,3.6vw,46px); line-height:1.05}
.seminar p{color:var(--ink-soft); max-width:30em; margin-top:10px}

/* ---------- final cta ---------- */
.final{position:relative; overflow:hidden}
.final .wrap{padding-block:clamp(90px,12vw,150px); position:relative; z-index:1}
.final h2{font-size:clamp(46px,7vw,100px); line-height:.97; max-width:10em}
.final p{margin-top:24px; color:var(--on-deep-soft); font-size:19px; max-width:28em}
.email{display:inline-flex; align-items:center; gap:4px; border:1px solid rgba(233,238,245,.25); border-radius:2px; padding:4px 4px 4px 16px; font-family:var(--f-mono); font-size:14.5px; color:var(--on-deep); max-width:100%}
.email span{user-select:all; -webkit-user-select:all; overflow-wrap:anywhere}
.email button{font:500 12px var(--f-mono); letter-spacing:.12em; text-transform:uppercase; background:rgba(233,238,245,.08); color:var(--on-deep); border:0; padding:10px 12px; border-radius:1px; cursor:pointer; margin-left:10px; flex:none}
.email button:hover{background:rgba(233,238,245,.16)}
.ridges-deco{position:absolute; right:-40px; bottom:-6px; width:min(560px,70vw); opacity:.55; pointer-events:none; z-index:0}

/* ---------- footer ---------- */
footer{background:var(--deep); color:var(--on-deep-soft); border-top:1px solid rgba(233,238,245,.08); font-size:14px}
footer .wrap{padding-block:48px 44px; display:grid; gap:28px}
.foot-top{display:grid; grid-template-columns:minmax(0,1.3fr) repeat(3,minmax(0,1fr)); gap:28px}
.foot-top img{height:24px; width:auto}
.foot-top p{margin-top:14px; max-width:22em}
.foot-top h4{font-family:var(--f-mono); font-weight:500; font-size:11.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--on-deep); margin:0 0 12px}
.foot-top ul{list-style:none; margin:0; padding:0; display:grid; gap:8px}
.foot-top a{text-decoration:none}
.foot-top a:hover{color:var(--on-deep)}
.foot-base{border-top:1px solid rgba(233,238,245,.08); padding-top:22px; display:grid; gap:14px}
.disclose{font-size:12.5px; line-height:1.65; max-width:72em; opacity:.85}
@media (max-width:820px){ .foot-top{grid-template-columns:repeat(2,minmax(0,1fr))} .foot-top > div:first-child{grid-column:span 2} }
.more svg{width:16px; height:16px; flex:none}