/* ============ DESIGN SYSTEM v3 — the live system, amplified ============
   Tokens adopted from the production site (_astro), then extended:
   warm paper, ink, IBM Plex trio, #2f5ef5 — plus the owned-gold semantic. */
:root{
  --ink:#0b1320;--ink-soft:#1c2436;--ink-2:#2a3346;
  --paper:#f5f1ea;--paper-2:#ebe5d9;--paper-3:#fcfaf6;
  --rule:#d9d0bf;--rule-soft:#e7dfd0;
  --muted:#6b6457;--muted-2:#8a8270;
  --accent:#2f5ef5;--accent-2:#6b8efa;--accent-deep:#1c3fb8;
  --own:#a8761c;--own-2:#d9a441;--own-soft:#eac97e;
  --ok:#2f7a4a;
  --serif:"IBM Plex Serif","Times New Roman",serif;
  --sans:"IBM Plex Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,Menlo,monospace;
  --container:1240px;--gutter:clamp(20px,4vw,56px);
  --radius:14px;--radius-sm:8px;
  --shadow-1:0 1px 2px rgba(11,19,32,.04),0 4px 18px rgba(11,19,32,.06);
  --shadow-2:0 14px 50px rgba(11,19,32,.18);
  --t-fast:.18s cubic-bezier(.4,.1,.2,1);--t-med:.32s cubic-bezier(.4,.1,.2,1);
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:var(--sans);color:var(--ink);background:var(--paper);font-size:16.5px;line-height:1.62;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
.wrap{max-width:var(--container);margin:0 auto;padding:0 var(--gutter)}
.kick{font:500 12px/1.5 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--accent-deep)}
.dark .kick{color:var(--accent-2)}
.chapter{display:flex;align-items:baseline;gap:14px;margin-bottom:10px}
.chapter .no{font:400 15px var(--mono);color:var(--muted-2)}
.chapter .rule{flex:1;height:1px;background:var(--rule);transform-origin:left;transform:scaleX(0);transition:transform 1s cubic-bezier(.2,.6,.2,1) .15s}
.in .chapter .rule,.chapter.in .rule{transform:scaleX(1)}
.chip{font:400 11.5px/1.3 var(--mono);padding:4px 9px;border-radius:5px;display:inline-block}
.chip-l{background:#e7ecfd;color:var(--accent-deep)}
.chip-g{background:#f3e9d2;color:#7a5a14}
.chip-d{background:rgba(107,142,250,.16);color:var(--accent-2)}
.dark{background:var(--ink);color:var(--paper)}
.dark .muted,.dark p{color:rgba(245,241,234,.72)}
.light .muted{color:var(--muted)}

/* staged + objectives */



.dark 

.util-in{max-width:1280px;margin:0 auto;padding:7px 24px;display:flex;justify-content:space-between;align-items:center;gap:16px;font-size:12.5px;flex-wrap:wrap;color:rgba(252,250,246,.65)}
.util-in .dot{display:inline-block;width:6px;height:6px;border-radius:50%;background:#5dd49a;margin-right:8px;animation:pulse 2.4s ease-in-out infinite}
.util-in a{color:rgba(252,250,246,.85);border-bottom:1px dashed rgba(252,250,246,.35);padding-bottom:1px}
nav{position:sticky;top:0;z-index:50;background:rgba(245,241,234,.92);backdrop-filter:blur(14px);border-bottom:1px solid var(--rule)}
.nav-in{max-width:1280px;margin:0 auto;padding:0 24px;height:68px;display:flex;align-items:center;gap:26px}
.logo-img{height:34px;width:auto;display:block}
.nav-links{display:flex;gap:4px;flex:1}
.nav-links a{position:relative;color:var(--ink-soft);font:500 14px var(--sans);padding:8px 11px;border-radius:8px;transition:background var(--t-fast)}
.nav-links a:hover{background:rgba(11,19,32,.05)}
.nav-links a.on{color:var(--accent-deep)}
.nav-links a.on::after{content:"";position:absolute;left:11px;right:11px;bottom:2px;height:2px;background:var(--accent);border-radius:2px}
.btn{display:inline-flex;align-items:center;gap:8px;font:500 14.5px var(--sans);padding:11px 22px;border-radius:999px;transition:all var(--t-fast);cursor:pointer;border:1px solid transparent;line-height:1.2}
.btn-primary{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.btn-primary:hover{background:var(--ink-2);transform:translateY(-1px);box-shadow:var(--shadow-1)}
.btn-accent{background:var(--accent);color:#fff;border-color:var(--accent)}
.btn-accent:hover{background:var(--accent-deep);transform:translateY(-1px);box-shadow:0 8px 26px rgba(47,94,245,.35)}
.btn-outline{background:transparent;color:var(--ink);border-color:var(--ink)}
.btn-outline:hover{background:rgba(11,19,32,.06)}
.dark .btn-outline{color:var(--paper);border-color:rgba(245,241,234,.55)}
.dark .btn-outline:hover{background:rgba(245,241,234,.08)}
.btn-own{background:transparent;color:#7a5a14;border-color:var(--own)}
.dark .btn-own{color:var(--own-soft);border-color:rgba(217,164,65,.6)}
.btn-own:hover{background:rgba(217,164,65,.12)}

/* hero — editorial, on paper, serif at scale (the live site's own move, bigger) */
.hero{position:relative;overflow:hidden;padding:clamp(64px,9vw,118px) 0 clamp(56px,8vw,100px);
background:
 radial-gradient(1100px 520px at 85% -10%,rgba(47,94,245,.07),transparent 60%),
 radial-gradient(800px 480px at 8% 110%,rgba(217,164,65,.08),transparent 60%),
 var(--paper)}
.hero::before{content:"";position:absolute;inset:0;background-image:linear-gradient(var(--rule-soft) 1px,transparent 1px),linear-gradient(90deg,var(--rule-soft) 1px,transparent 1px);background-size:56px 56px;opacity:.35;mask-image:radial-gradient(900px 500px at 70% 20%,#000 0%,transparent 75%)}
.hero>.wrap{position:relative}
h1{font-family:var(--serif);font-weight:400;font-size:clamp(42px,6.2vw,88px);line-height:1.05;letter-spacing:-.02em;color:var(--ink)}
h1 em{font-style:italic;color:var(--accent-deep)}
h1 .own-t{font-style:italic;color:var(--own)}
.hero .sub{margin:26px 0 34px;font-size:clamp(17px,1.5vw,20px);color:var(--muted);max-width:42em;line-height:1.65}
.hero .sub b{color:var(--ink);font-weight:600}
.cta-row{display:flex;gap:14px;flex-wrap:wrap}
.hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(30px,4vw,64px);align-items:center}

/* boundary diagram — blueprint on paper */
.diagram{background:var(--paper-3);border:1px solid var(--rule);border-radius:var(--radius);box-shadow:var(--shadow-1);padding:18px}
.diagram svg{width:100%;height:auto;display:block}
.dg-cap{margin-top:12px;font:400 12px var(--mono);color:var(--muted)}
@keyframes flowUp{0%{transform:translateY(44px);opacity:0}14%{opacity:1}82%{opacity:1}100%{transform:translateY(-44px);opacity:0}}
@keyframes flowRight{0%{transform:translateX(0);opacity:0}14%{opacity:1}82%{opacity:1}100%{transform:translateX(112px);opacity:0}}
@keyframes pulse{0%,100%{opacity:.5}50%{opacity:1}}
.dotUp{animation:flowUp 3.6s linear infinite}.dotUp.d2{animation-delay:1.2s}.dotUp.d3{animation-delay:2.4s}
.dotR{animation:flowRight 3s linear infinite}.dotR.d2{animation-delay:1s}.dotR.d3{animation-delay:2s}
.pulseEl{animation:pulse 4s ease-in-out infinite}

/* sections & type */
section{padding:clamp(60px,7vw,104px) 0}
h2{font-family:var(--serif);font-weight:400;font-size:clamp(30px,3.6vw,48px);line-height:1.12;letter-spacing:-.015em;margin:12px 0 18px}
h2.sm{font-size:clamp(24px,2.6vw,34px)}
.dark h2{color:var(--paper)}
.lead{font-size:clamp(16.5px,1.35vw,18.5px);max-width:50em;color:var(--ink-soft)}
.dark .lead{color:rgba(245,241,234,.8)}
.grid{display:grid;gap:22px}
.g4{grid-template-columns:repeat(4,1fr)}.g3{grid-template-columns:repeat(3,1fr)}.g2{grid-template-columns:repeat(2,1fr)}

/* cards — paper-3 with warm rules, lift on hover (their language, more air) */
.card{background:var(--paper-3);border:1px solid var(--rule);border-radius:var(--radius);padding:26px;box-shadow:var(--shadow-1);transition:transform var(--t-med),box-shadow var(--t-med),border-color var(--t-med)}
.card:hover{transform:translateY(-4px);box-shadow:var(--shadow-2);border-color:#cfc4ad}
.card h3{font:600 17.5px var(--sans);margin:12px 0 8px;letter-spacing:-.01em}
.card p{font-size:14.5px;color:var(--muted)}
.card .n{font-family:var(--serif);font-weight:400;font-size:clamp(30px,2.6vw,40px);line-height:1;letter-spacing:-.02em;color:var(--ink);margin-top:16px}
.card .nl{font-size:13.5px;color:var(--muted);margin-top:7px}
.mods{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
.mods span{font:450 12.5px var(--sans);background:var(--paper);border:1px solid var(--rule);border-radius:999px;padding:6px 12px;color:var(--ink-soft)}
.dark .mods span{background:rgba(245,241,234,.06);border-color:rgba(245,241,234,.18);color:rgba(245,241,234,.85)}
.sect-link{font:600 15px var(--sans);color:var(--accent-deep);display:inline-flex;gap:6px;margin-top:24px;border-bottom:1px solid transparent;transition:border-color var(--t-fast)}
.sect-link:hover{border-color:var(--accent-deep)}
.dark .sect-link{color:var(--accent-2)}

/* platform feature cards with photography (the live site's 7/9 photo device) */
.plat-card{padding:0;overflow:hidden;display:flex;flex-direction:column}
.plat-card .ph{aspect-ratio:16/9;overflow:hidden;border-bottom:1px solid var(--rule)}
.plat-card .ph img{width:100%;height:100%;object-fit:cover;transition:transform .8s cubic-bezier(.2,.6,.2,1)}
.plat-card:hover .ph img{transform:scale(1.04)}
.plat-card .bd{padding:24px 26px 26px}
.plat-logo{height:26px;width:auto;margin-bottom:10px}

/* stats — serif numerals, count-up */
.stat{border-left:2px solid var(--accent-2);padding-left:20px}
.stat .n{font-family:var(--serif);font-weight:400;font-size:clamp(36px,3.6vw,54px);line-height:1;letter-spacing:-.02em;color:var(--paper)}
.light .stat .n{color:var(--ink)}
.stat .l{margin-top:9px;font-size:14px;color:rgba(245,241,234,.66)}
.light .stat .l{color:var(--muted)}
.stat .chip{margin-top:10px;background:rgba(245,241,234,.08);color:rgba(245,241,234,.55)}
.fed{display:inline-flex;align-items:center;gap:10px;border:1px solid rgba(217,164,65,.5);border-radius:999px;padding:9px 16px;font:500 12px var(--mono);letter-spacing:.08em;color:var(--own-soft);margin-bottom:24px}
.band-d{background:linear-gradient(180deg,var(--ink) 0%,var(--ink-soft) 100%)}
ul.plain{list-style:none}
.never li,.tick li{margin:11px 0;padding-left:28px;position:relative;font-size:15.5px}
.never li::before{content:"✕";position:absolute;left:0;color:#a33;font-weight:700}
.tick li::before{content:"✓";position:absolute;left:0;color:var(--ok);font-weight:700}
table{width:100%;border-collapse:collapse;background:var(--paper-3);border:1px solid var(--rule);border-radius:12px;overflow:hidden;font-size:14px;margin-top:16px;box-shadow:var(--shadow-1)}
th,td{text-align:left;padding:11px 14px;border-bottom:1px solid var(--rule-soft);vertical-align:top}
th{font:600 12px var(--sans);text-transform:uppercase;letter-spacing:.06em;color:var(--muted);background:var(--paper-2)}
.mono{font-family:var(--mono);font-size:12.5px}
.t-ok{color:var(--ok);font-weight:600}.t-miss{color:#a33;font-weight:600}.t-new{color:#7a5a14;font-weight:600}

/* scroll reveal */
.rv{opacity:0;transform:translateY(22px);transition:opacity .7s cubic-bezier(.2,.6,.2,1),transform .7s cubic-bezier(.2,.6,.2,1)}
.rv.in{opacity:1;transform:none}
.rv.d1{transition-delay:.08s}.rv.d2{transition-delay:.16s}.rv.d3{transition-delay:.24s}

/* footer — canonical structure, warm night edition */
footer{background:var(--ink);color:rgba(245,241,234,.65);padding:64px 0 0;font-size:14px}
.f-row{display:grid;grid-template-columns:1.5fr repeat(3,1fr);gap:40px 34px}
.f-brand p{margin-top:16px;max-width:38ch;font-size:14px;line-height:1.55}
.f-brand strong{color:var(--paper);font-weight:500}
.f-contact{margin-top:14px;font-size:13px;color:rgba(245,241,234,.5)}
.f-contact a{color:var(--accent-2);border-bottom:1px solid}
.f-mod{margin-top:20px;padding:14px 16px;background:rgba(255,255,255,.04);border-left:3px solid var(--accent-2);border-radius:4px;max-width:38ch}
.f-mod .k{font:600 10px var(--mono);letter-spacing:1.4px;text-transform:uppercase;color:var(--accent-2);margin-bottom:6px}
.f-mod p{margin:0 0 8px;font-size:13px;line-height:1.5;color:rgba(245,241,234,.8)}
.f-mod a{font-size:13px;color:var(--accent-2);border-bottom:1px solid}
.f-mod .arch{margin-top:6px;font-size:12px;color:rgba(245,241,234,.55)}
.f-mod .arch a{color:rgba(245,241,234,.75);border-bottom:1px dotted}
.f-colwrap{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;grid-column:2/5}
.f-col .h{font:600 12px var(--sans);letter-spacing:.08em;text-transform:uppercase;color:var(--paper);margin-bottom:14px}
.f-col ul{list-style:none}.f-col li{margin:8px 0}
.f-col a{color:rgba(245,241,234,.62);font-size:13.5px;transition:color var(--t-fast)}
.f-col a:hover{color:var(--paper)}
.f-bottom{border-top:1px solid rgba(245,241,234,.12);margin-top:48px;padding:20px 0;display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;font-size:13px}
.f-bottom a{margin-left:18px;color:rgba(245,241,234,.62)}
.f-bottom a:hover{color:var(--paper)}
.logo-inv{filter:brightness(0) invert(1)}

@media(max-width:960px){.g4,.g3{grid-template-columns:repeat(2,1fr)}.hero-grid{grid-template-columns:1fr}.nav-links{display:none}.f-row{grid-template-columns:1fr}.f-colwrap{grid-column:1;grid-template-columns:repeat(2,1fr)}}
@media(max-width:600px){.g4,.g3,.g2{grid-template-columns:1fr}}
@media(prefers-reduced-motion:reduce){
 html{scroll-behavior:auto}
 .rv{opacity:1;transform:none;transition:none}
 .dotUp,.dotR,.pulseEl,.util-in .dot{animation:none}
 .chapter .rule{transform:scaleX(1);transition:none}
 .plat-card .ph img{transition:none}
}

/* v4 — expansion layer: announce bar, tabs, testimonials, photo strips, figures */
.announce{background:linear-gradient(90deg,#1c3fb8,#2f5ef5);color:#fff;font-size:13.5px}
.announce .wrap{display:flex;gap:10px;align-items:center;justify-content:center;padding:9px var(--gutter);flex-wrap:wrap;text-align:center}
.announce a{color:#fff;border-bottom:1px solid rgba(255,255,255,.5);font-weight:500}
.announce .tagchip{font:600 10.5px var(--mono);letter-spacing:.08em;background:rgba(255,255,255,.18);border-radius:999px;padding:3px 9px}
.tabs{display:flex;gap:8px;flex-wrap:wrap;margin:26px 0 0}
.tabs button{font:500 14.5px var(--sans);padding:10px 20px;border-radius:999px;border:1px solid var(--rule);background:var(--paper-3);color:var(--ink-soft);cursor:pointer;transition:all var(--t-fast)}
.tabs button.on{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.tabpanes{position:relative;margin-top:22px}
.tabpane{display:none}
.tabpane.on{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(22px,3vw,44px);align-items:center;animation:paneIn .45s cubic-bezier(.2,.6,.2,1)}
@keyframes paneIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.tabpane .shot{border:1px solid var(--rule);border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow-2);background:var(--paper-3)}
.tabpane .shot img{width:100%;height:auto}
.quote-band blockquote{font-family:var(--serif);font-style:italic;font-size:clamp(18px,1.7vw,22px);line-height:1.45;color:var(--ink)}
.quote-band footer{margin-top:14px;font:400 13px var(--sans);color:var(--muted)}
.photostrip{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:30px}
.photostrip figure{border-radius:var(--radius-sm);overflow:hidden;border:1px solid var(--rule);box-shadow:var(--shadow-1);position:relative;aspect-ratio:4/3}
.photostrip img{width:100%;height:100%;object-fit:cover;transition:transform .8s cubic-bezier(.2,.6,.2,1)}
.photostrip figure:hover img{transform:scale(1.05)}
.photostrip figcaption{position:absolute;left:0;right:0;bottom:0;padding:20px 12px 10px;background:linear-gradient(transparent,rgba(11,19,32,.78));color:#fff;font:500 12px var(--sans)}
.figure-panel{border:1px solid var(--rule);border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow-1);background:#fff}
.figure-panel img{width:100%;height:auto}
.figure-panel figcaption{padding:12px 16px;font:400 12.5px var(--mono);color:var(--muted);border-top:1px solid var(--rule-soft)}
.team{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-top:28px}
.team .card{text-align:left;padding:20px}
.team img{width:76px;height:76px;border-radius:50%;object-fit:cover;border:2px solid var(--paper-2);box-shadow:var(--shadow-1)}
.team h3{margin-top:12px;font-size:16px}
.team p{font-size:13px}
.browser{border:1px solid var(--rule);border-radius:12px;overflow:hidden;box-shadow:var(--shadow-2);background:#fff}
.browser .bar{display:flex;gap:6px;align-items:center;padding:9px 12px;background:var(--paper-2);border-bottom:1px solid var(--rule)}
.browser .bar i{width:9px;height:9px;border-radius:50%;background:var(--rule);display:inline-block}
.browser img{width:100%;height:auto;display:block}
@media(max-width:960px){.tabpane.on{grid-template-columns:1fr}.photostrip{grid-template-columns:repeat(2,1fr)}.team{grid-template-columns:repeat(2,1fr)}}
@media(max-width:600px){.photostrip,.team{grid-template-columns:1fr}}

/* ═══ v5 — cinematic layer: full-bleed media, Ken Burns, video, glass ═══ */
.cinema{position:relative;min-height:min(88vh,860px);display:flex;align-items:center;overflow:hidden;background:var(--ink)}
.cinema .bg{position:absolute;inset:-6%;background-size:cover;background-position:center;animation:kenburns 26s ease-in-out infinite alternate;filter:saturate(.9)}
@keyframes kenburns{from{transform:scale(1) translate(0,0)}to{transform:scale(1.09) translate(-1.4%,1.2%)}}
.cinema .scrim{position:absolute;inset:0;background:linear-gradient(100deg,rgba(11,19,32,.92) 0%,rgba(11,19,32,.78) 34%,rgba(11,19,32,.28) 70%,rgba(11,19,32,.55) 100%)}
.cinema .wrap{position:relative;padding-top:64px;padding-bottom:64px;width:100%}
.cinema h1{color:#fff;text-shadow:0 2px 30px rgba(11,19,32,.45)}
.cinema h1 em{color:var(--accent-2)}
.cinema h1 .own-t{color:var(--own-soft)}
.cinema .kick{color:var(--own-soft)}
.cinema .sub{color:rgba(245,241,234,.86)}
.cinema .sub b{color:#fff}
.glass{background:rgba(252,250,246,.9);backdrop-filter:blur(14px);border:1px solid rgba(252,250,246,.6);border-radius:var(--radius);box-shadow:var(--shadow-2)}
.band-img{position:relative;height:clamp(300px,44vw,520px);overflow:hidden}
.band-img .bg{position:absolute;inset:-8%;background-size:cover;background-position:center;will-change:transform}
.band-img .cap{position:absolute;left:0;right:0;bottom:0;padding:60px var(--gutter) 26px;background:linear-gradient(transparent,rgba(11,19,32,.82))}
.band-img .cap .in{max-width:var(--container);margin:0 auto;color:#fff}
.band-img .cap .k{font:500 11px var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--own-soft)}
.band-img .cap h3{font-family:var(--serif);font-weight:400;font-size:clamp(20px,2.4vw,30px);margin-top:6px}
.lite-yt{position:relative;aspect-ratio:16/9;border-radius:var(--radius);overflow:hidden;cursor:pointer;border:1px solid var(--rule);box-shadow:var(--shadow-2);background:#000}
.lite-yt img{width:100%;height:100%;object-fit:cover;opacity:.92;transition:transform .8s cubic-bezier(.2,.6,.2,1),opacity .3s}
.lite-yt:hover img{transform:scale(1.04);opacity:1}
.lite-yt .play{position:absolute;inset:0;display:flex;align-items:center;justify-content:center}
.lite-yt .play span{width:72px;height:72px;border-radius:50%;background:rgba(252,250,246,.94);display:flex;align-items:center;justify-content:center;box-shadow:0 10px 40px rgba(11,19,32,.5);transition:transform var(--t-fast)}
.lite-yt:hover .play span{transform:scale(1.08)}
.lite-yt .play svg{margin-left:4px}
.lite-yt .vt{position:absolute;left:0;right:0;bottom:0;padding:44px 18px 14px;background:linear-gradient(transparent,rgba(11,19,32,.85));color:#fff;font:500 14px var(--sans)}
.lite-yt iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.lite-yt.slot{cursor:default}
.lite-yt.slot .bgph{position:absolute;inset:0;background-size:cover;background-position:center;filter:grayscale(.25) brightness(.8)}
.lite-yt.slot .badge{position:absolute;top:12px;left:12px;font:600 10.5px var(--mono);letter-spacing:.08em;background:var(--own-2);color:#241a04;border-radius:999px;padding:5px 10px}
.mediarow{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(24px,3.4vw,52px);align-items:center}
.mediarow.rev{grid-template-columns:.95fr 1.05fr}
.mediarow.rev>*:first-child{order:2}
@media(max-width:960px){.mediarow,.mediarow.rev{grid-template-columns:1fr}.mediarow.rev>*:first-child{order:0}.cinema{min-height:74vh}}
@media(prefers-reduced-motion:reduce){.cinema .bg{animation:none}.lite-yt img,.band-img .bg{transition:none;transform:none!important}}

/* ═══ v6 — Clay-grade composition, serious register ═══ */
.bento{display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:minmax(150px,auto);gap:16px;margin-top:38px}
.bento .tile{background:var(--paper-3);border:1px solid var(--rule);border-radius:16px;padding:26px;box-shadow:var(--shadow-1);position:relative;overflow:hidden;transition:transform var(--t-med),box-shadow var(--t-med),border-color var(--t-med)}
.bento .tile:hover{transform:translateY(-3px);box-shadow:var(--shadow-2);border-color:#c9bda3}
.bento .t-hero{grid-column:span 2;grid-row:span 2}
.bento .t-wide{grid-column:span 2}
.bento .t-gold{background:linear-gradient(160deg,#fdf8ec,#f6ecd4);border-color:#e4d3ac}
.bento .t-ink{background:linear-gradient(165deg,var(--ink),var(--ink-soft));border-color:var(--ink-2);color:var(--paper)}
.bento .t-ink p{color:rgba(245,241,234,.72)}
.bento .t-ink h3{color:var(--paper)}
.bento h3{font:600 17px var(--sans);margin:10px 0 8px}
.bento p{font-size:14px;color:var(--muted)}
.bento .big{font-family:var(--serif);font-weight:400;font-size:clamp(34px,3vw,46px);line-height:1;letter-spacing:-.02em}
.stack{position:relative;min-height:380px}
.stack .sh{position:absolute;border-radius:12px;overflow:hidden;border:1px solid var(--rule);box-shadow:var(--shadow-2);background:#fff;transition:transform .5s cubic-bezier(.2,.6,.2,1)}
.stack .sh img{width:100%;height:100%;object-fit:cover;display:block}
.stack .sh1{width:74%;top:0;left:0;transform:rotate(-1.2deg);z-index:2}
.stack .sh2{width:56%;bottom:0;right:0;transform:rotate(1.4deg);z-index:3}
.stack:hover .sh1{transform:rotate(-1.2deg) translateY(-6px)}
.stack:hover .sh2{transform:rotate(1.4deg) translateY(-6px)}
.sniprail{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:26px}
.snip{background:var(--paper-3);border:1px solid var(--rule);border-radius:14px;overflow:hidden;box-shadow:var(--shadow-1);transition:transform var(--t-med),box-shadow var(--t-med)}
.snip:hover{transform:translateY(-3px);box-shadow:var(--shadow-2)}
.dark .snip{background:var(--ink-soft);border-color:rgba(245,241,234,.14)}
.snip .lite-yt{border-radius:0;border:0;box-shadow:none;aspect-ratio:16/9}
.snip .meta{padding:14px 16px 16px}
.snip .series{font:600 10px var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--accent-deep)}
.dark .snip .series{color:var(--accent-2)}
.snip h4{font:600 15px var(--sans);margin:6px 0 4px}
.dark .snip h4{color:var(--paper)}
.snip .dur{font:400 11.5px var(--mono);color:var(--muted)}
.dark .snip .dur{color:rgba(245,241,234,.55)}
@media(max-width:960px){.bento{grid-template-columns:repeat(2,1fr)}.sniprail{grid-template-columns:1fr}}
@media(max-width:600px){.bento{grid-template-columns:1fr}.bento .t-hero,.bento .t-wide{grid-column:span 1}}

.transcript{margin-top:12px;border:1px solid var(--rule);border-radius:10px;background:var(--paper-3)}
.transcript summary{cursor:pointer;font:600 12.5px var(--mono);letter-spacing:.06em;color:var(--accent-deep);padding:10px 14px}
.transcript .tbody{padding:4px 16px 14px;font-size:13.5px;line-height:1.65;color:var(--muted)}
.transcript .tbody p{margin-top:10px}
.dark .transcript{background:var(--ink-soft);border-color:rgba(245,241,234,.16)}
.dark .transcript summary{color:var(--accent-2)}
.dark .transcript .tbody{color:rgba(245,241,234,.75)}
.steps-audio{display:grid;grid-template-columns:repeat(2,1fr);gap:8px;margin-top:14px}
.steps-audio .sa{display:flex;align-items:center;gap:10px;border:1px solid var(--rule);border-radius:10px;padding:8px 10px;background:var(--paper-3)}
.steps-audio .sa span{font:600 11px var(--mono);color:var(--muted);white-space:nowrap}
.steps-audio audio{width:100%;height:30px}
@media(max-width:700px){.steps-audio{grid-template-columns:1fr}}

/* ── v26.1 — hero rhythm + dark-surface button contrast (July 14) ── */
.cinema h1{margin-top:20px}
.cinema .sub{margin-top:28px;margin-bottom:0;max-width:56ch}
.cinema .cta-row{margin-top:38px;row-gap:12px}
.hero h1{margin-top:18px}
.hero .sub{margin-top:26px;margin-bottom:0}
.hero .cta-row{margin-top:36px;row-gap:12px}
.cinema .btn-outline{color:#fff;border-color:rgba(252,250,246,.72);background:rgba(11,19,32,.28)}
.cinema .btn-outline:hover{background:rgba(252,250,246,.16);border-color:#fff;color:#fff}
.dark .btn-outline{color:#fff;border-color:rgba(252,250,246,.6)}
.dark .btn-outline:hover{background:rgba(252,250,246,.14);color:#fff}

/* ── v26.2 — util bar restored + portal button + link visibility (July 14) ── */
.util-bar{background:var(--ink-2,#101a2e);color:rgba(252,250,246,.85);font:500 13px var(--sans);border-bottom:1px solid rgba(255,255,255,.06)}
.util-in{max-width:1280px;margin:0 auto;padding:7px 24px;display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap}
.util-bar .dot{display:inline-block;width:6px;height:6px;border-radius:50%;background:#5dd49a;margin-right:8px}
.util-portal{display:inline-block;background:#fff;color:var(--ink)!important;font:700 12px var(--sans);padding:5px 14px;border-radius:999px;text-decoration:none;margin-left:10px}
.util-portal:hover{background:var(--own,#e8b84b);color:var(--ink)!important}
@media(max-width:760px){.util-in>div:last-child{display:none}}
.sect-link{color:var(--accent);border-bottom:1px solid rgba(47,94,245,.35)}
.sect-link:hover{border-bottom-color:var(--accent)}

/* ── v26.3 — mobile drawer (July 14) ── */
.nav-burger{display:none;margin-left:12px;background:none;border:1px solid var(--rule);border-radius:8px;padding:8px 10px;cursor:pointer}
.nav-burger span{display:block;width:20px;height:2px;background:var(--ink);margin:4px 0}
.nav-drawer{display:none;background:var(--paper);border-bottom:1px solid var(--rule);position:relative;z-index:899}
.nav-drawer.open{display:block}
.nav-drawer a{display:block;padding:13px 24px;color:var(--ink-soft);text-decoration:none;font:600 15px var(--sans);border-top:1px solid var(--rule-soft,rgba(11,19,32,.06))}
.nav-drawer a:hover{background:rgba(47,94,245,.06);color:var(--ink)}
.nav-drawer .btn{display:block;margin:12px 24px 16px;text-align:center}
@media(max-width:900px){.nav-links{display:none}nav .btn-primary{display:none}.nav-burger{display:block}}