/* Tech Arcanist — engineering premium */
:root{
  --bg:#0a121e; --bg-1:#0d1826; --panel:#0e1a2a; --panel-2:#122032;
  --line:rgba(224,234,245,.09); --line-2:rgba(224,234,245,.15); --line-3:rgba(224,234,245,.26);
  --text:#eef3fa; --text-2:#cbd7e6; --muted:#a7b8cd; --faint:#6b7f96;
  --accent:#5ab4ff; --accent-2:#3d9bf0; --accent-soft:rgba(90,180,255,.12); --accent-ink:#04121f;
  --ok:#66e3b0; --warn:#ffd24a;
  --r:12px; --r-sm:8px;
  --font:Geist,ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;
  --mono:"Geist Mono",ui-monospace,SFMono-Regular,Consolas,monospace;
  --wrap:1240px; --ease:cubic-bezier(.2,.7,.2,1);
  color-scheme:dark;
}
:root[data-theme="light"]{
  --bg:#fafaf8; --bg-1:#f3f3f0; --panel:#ffffff; --panel-2:#f5f5f2;
  --line:rgba(10,12,14,.08); --line-2:rgba(10,12,14,.14); --line-3:rgba(10,12,14,.24);
  --text:#0c0d0e; --text-2:#2b2e31; --muted:#62676c; --faint:#94989c;
  --accent:#0a9f4a; --accent-2:#087f3b; --accent-soft:rgba(10,159,74,.09); --accent-ink:#ffffff;
  --ok:#0a9f4a; color-scheme:light;
}
@view-transition{navigation:auto}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--text);font:400 16px/1.6 var(--font);-webkit-font-smoothing:antialiased;overflow-x:hidden;font-feature-settings:"ss01","cv11"}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
h1,h2,h3,h4{font-weight:500;letter-spacing:-.025em;line-height:1.08;margin:0 0 .5em}
h1{font-size:clamp(2.4rem,6vw,4.6rem);letter-spacing:-.04em}
h2{font-size:clamp(1.7rem,3.4vw,2.6rem);letter-spacing:-.035em}
h3{font-size:1.12rem;letter-spacing:-.015em;line-height:1.3}
p{margin:0 0 1em}
::selection{background:var(--accent);color:var(--accent-ink)}
.mono{font-family:var(--mono);font-feature-settings:normal}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 24px}
.dim{color:var(--muted)}
.muted{color:var(--muted)}
.label{font-family:var(--mono);font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;color:var(--faint);margin:0 0 14px}
.skip{position:absolute;left:-999px;top:10px;z-index:200;background:var(--accent);color:var(--accent-ink);padding:8px 12px;border-radius:6px}
.skip:focus{left:10px}
:focus-visible{outline:1.5px solid var(--accent);outline-offset:3px;border-radius:4px}
.draft-bar{position:sticky;top:0;z-index:60;background:var(--warn);color:#1a1200;text-align:center;font-size:.75rem;padding:6px;letter-spacing:.08em}

/* buttons */
.btn{display:inline-flex;align-items:center;gap:10px;height:44px;padding:0 20px;border-radius:999px;background:var(--text);color:var(--bg);font:500 .92rem var(--font);border:1px solid var(--text);cursor:pointer;transition:transform .25s var(--ease),background .2s,color .2s,border-color .2s;white-space:nowrap}
.btn:hover{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
.btn-line{background:transparent;color:var(--text);border-color:var(--line-3)}
.btn-line:hover{background:transparent;color:var(--text);border-color:var(--text)}
.btn-sm{height:34px;padding:0 14px;font-size:.84rem}
.btns{display:flex;flex-wrap:wrap;gap:10px;margin-top:26px}
.arrow-link{display:inline-flex;align-items:center;gap:8px;font-size:.9rem;font-weight:500;color:var(--text);border-bottom:1px solid var(--line-3);padding-bottom:2px;transition:border-color .2s,color .2s}
.arrow-link::after{content:"→";transition:transform .25s var(--ease)}
.arrow-link:hover{color:var(--accent);border-color:var(--accent)}
.arrow-link:hover::after{transform:translateX(4px)}

/* header */
.hdr{position:sticky;top:0;z-index:50;background:color-mix(in srgb,var(--bg) 72%,transparent);backdrop-filter:blur(18px) saturate(1.5);-webkit-backdrop-filter:blur(18px) saturate(1.5);border-bottom:1px solid var(--line)}
.hdr-in{display:flex;align-items:center;gap:28px;height:64px}
.brand{display:inline-flex;align-items:center;gap:10px;font-weight:600;letter-spacing:-.02em}
.brand img{border-radius:6px}
.nav{display:flex;gap:2px;margin-left:12px}
.nav a{padding:7px 12px;border-radius:999px;color:var(--muted);font-size:.9rem;transition:color .2s,background .2s}
.nav a:hover{color:var(--accent)}
.nav a[aria-current]{color:var(--accent);background:var(--accent-soft)}
.nav .ext{font-size:.7em;margin-left:3px;opacity:.6}
.hdr-act{margin-left:auto;display:flex;align-items:center;gap:8px}
.ib{display:inline-grid;place-items:center;width:36px;height:36px;border-radius:999px;border:1px solid var(--line-2);background:transparent;color:var(--text);cursor:pointer;transition:border-color .2s}
.ib:hover{border-color:var(--line-3)}
[data-theme="dark"] .i-moon,[data-theme="light"] .i-sun{display:none}
.kbd-btn{display:inline-flex;align-items:center;gap:8px;height:36px;padding:0 10px 0 12px;border-radius:999px;border:1px solid var(--line-2);background:var(--panel);color:var(--muted);font:400 .85rem var(--font);cursor:pointer}
.kbd-btn:hover{color:var(--text);border-color:var(--line-3)}
kbd{font:500 .68rem var(--mono);padding:2px 6px;border-radius:5px;border:1px solid var(--line-2);color:var(--faint);background:var(--bg-1)}
.nav-tg{display:none}
@media (max-width:920px){
  .nav{position:fixed;left:0;right:0;top:64px;flex-direction:column;background:var(--bg);border-bottom:1px solid var(--line);padding:14px 20px 22px;margin:0;gap:0;transform:translateY(calc(-100% - 80px));visibility:hidden;transition:transform .35s var(--ease),visibility 0s linear .35s;z-index:-1}
  .nav.open{transform:none;visibility:visible;transition:transform .35s var(--ease),visibility 0s}
  .nav a{padding:14px 4px;border-radius:0;border-bottom:1px solid var(--line);font-size:1.05rem}
  .nav a[aria-current]{background:none;color:var(--accent)}
  .nav-tg{display:inline-grid}
  .hide-sm{display:none}
  .kbd-btn{width:36px;padding:0;justify-content:center}
}

/* hero */
.hero{position:relative;overflow:hidden;border-bottom:1px solid var(--line);padding:clamp(70px,11vw,140px) 0 0}
.traces{position:absolute;inset:0;width:100%;height:100%;opacity:.9}
.hero-fade{position:absolute;inset:0;background:radial-gradient(ellipse 80% 70% at 20% 40%,var(--bg) 25%,transparent 75%),linear-gradient(transparent 60%,var(--bg));pointer-events:none}
.hero-in{position:relative}
.hero-meta{display:flex;flex-wrap:wrap;align-items:center;gap:10px;font-size:.78rem;color:var(--muted);margin-bottom:28px;letter-spacing:.02em}
.hero-meta .sep{color:var(--faint)}
.live{width:7px;height:7px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 0 var(--accent);animation:live 2.4s infinite}
@keyframes live{0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--accent) 60%,transparent)}70%{box-shadow:0 0 0 9px transparent}100%{box-shadow:0 0 0 0 transparent}}
.hero-h{font-size:clamp(2.6rem,7.6vw,6.4rem);font-weight:500;letter-spacing:-.05em;line-height:.98;margin:0 0 40px;max-width:15ch}
.hero-row{display:grid;grid-template-columns:minmax(0,1.2fr) auto;gap:40px;align-items:end}
.hero-lead{color:var(--text-2);font-size:1.08rem;max-width:62ch;margin:0}
.hero-cta{display:flex;gap:10px;flex-wrap:wrap}
@media (max-width:900px){.hero-row{grid-template-columns:1fr;gap:26px}}
.kpis{display:grid;grid-template-columns:repeat(4,1fr);margin:clamp(40px,6vw,72px) 0 0;border-top:1px solid var(--line)}
.kpi{padding:26px 24px 30px 0;border-right:1px solid var(--line);margin:0}
.kpi+.kpi{padding-left:24px}
.kpi:last-child{border-right:0}
.kpi dt{font-size:.74rem;color:var(--text-2);text-transform:uppercase;letter-spacing:.08em}
.kpi dd{margin:10px 0 0;font-size:clamp(2.2rem,4.4vw,3.6rem);font-weight:500;letter-spacing:-.05em;line-height:1}
.kpi sup{font-size:.45em;color:var(--accent);vertical-align:top;margin-left:2px;position:relative;top:.2em}
@media (max-width:760px){.kpis{grid-template-columns:1fr 1fr}.kpi:nth-child(2){border-right:0}.kpi:nth-child(3){padding-left:0}.kpi:nth-child(n+3){border-top:1px solid var(--line)}}

/* marquee */
.marquee{border-bottom:1px solid var(--line);overflow:hidden;padding:18px 0;mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.marquee-track{display:flex;gap:44px;width:max-content;animation:mq 70s linear infinite;font-size:.82rem;color:var(--muted);white-space:nowrap}
.marquee-track span{display:inline-flex;align-items:center;gap:44px}
.marquee-track span::after{content:"";width:4px;height:4px;background:var(--faint);transform:rotate(45deg)}
.marquee:hover .marquee-track{animation-play-state:paused}
@keyframes mq{to{transform:translateX(-50%)}}

/* sections */
.sec{padding:clamp(56px,6.5vw,88px) 0}
/* two plain sections in a row: don't stack bottom + top padding */
.sec:not(.band)+.sec:not(.band){padding-top:0}
.sec.tight{padding:40px 0 56px}
.band{background:var(--bg-1);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.sh{margin-bottom:32px}
.sh-label{display:flex;align-items:center;gap:12px;font-size:.74rem;color:var(--muted);text-transform:uppercase;letter-spacing:.1em;margin:0 0 18px}
.sh-label span{color:var(--accent);padding:2px 7px;border:1px solid color-mix(in srgb,var(--accent) 40%,transparent);border-radius:4px;letter-spacing:.04em}
.sh-row{display:flex;justify-content:space-between;align-items:end;gap:24px;flex-wrap:wrap}
.sh-row h2{margin:0;max-width:20ch}
.sh-text{color:var(--muted);max-width:62ch;margin:18px 0 0;font-size:1.02rem}

/* awards */
.awards{display:grid;grid-template-columns:repeat(4,1fr);border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.award{display:flex;flex-direction:column;gap:6px;padding:26px 24px 28px;border-right:1px solid var(--line);transition:background .25s}
.award:last-child{border-right:0}
.award:hover{background:var(--panel)}
.award-n{font-size:.72rem;color:var(--faint);margin-bottom:22px}
.award strong{font-size:1.3rem;font-weight:500;letter-spacing:-.025em}
.award span:last-child{color:var(--muted);font-size:.9rem;line-height:1.45}
@media (max-width:900px){.awards{grid-template-columns:1fr 1fr}.award:nth-child(2){border-right:0}.award:nth-child(-n+2){border-bottom:1px solid var(--line)}}
@media (max-width:520px){.awards{grid-template-columns:1fr}.award{border-right:0;border-bottom:1px solid var(--line)}}

/* case studies */
.cases{display:grid;gap:clamp(40px,6vw,80px)}
.case{display:grid;grid-template-columns:1.25fr 1fr;gap:clamp(28px,4vw,56px);align-items:center}
.case:nth-child(even) .case-media{order:2}
.case-media{position:relative;display:block;border-radius:var(--r);overflow:hidden;border:1px solid var(--line);aspect-ratio:16/9;background:var(--panel)}
.case-media img{width:100%;height:100%;object-fit:cover;transition:transform .9s var(--ease),filter .6s}
.case:hover .case-media img{transform:scale(1.035)}
.corner{position:absolute;width:14px;height:14px;border-color:var(--accent);border-style:solid;pointer-events:none;opacity:0;transition:opacity .3s}
.corner.tl{top:10px;left:10px;border-width:1.5px 0 0 1.5px}.corner.br{bottom:10px;right:10px;border-width:0 1.5px 1.5px 0}
.case:hover .corner,.cs-cover .corner,.series-cover .corner{opacity:1}
.case-n{font-size:.78rem;color:var(--accent);margin-bottom:16px}
.case-n span{color:var(--faint)}
.case h3{font-size:clamp(1.5rem,2.6vw,2.1rem);letter-spacing:-.035em;line-height:1.1;margin-bottom:14px}
.case h3 a:hover{color:var(--accent)}
.case-sum{color:var(--muted)}
.spec{display:flex;flex-wrap:wrap;margin:22px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.spec div{padding:12px 22px 12px 0;margin-right:22px;border-right:1px solid var(--line)}
.spec div:last-child{border:0}
.spec dt{font-size:.66rem;text-transform:uppercase;letter-spacing:.08em;color:var(--faint)}
.spec dd{margin:4px 0 0;font-size:.88rem;color:var(--text)}
.ok{color:var(--ok)!important}
.ticks{list-style:none;padding:0;margin:0 0 20px}
.ticks li{position:relative;padding-left:20px;margin:6px 0;color:var(--text-2);font-size:.94rem}
.ticks li::before{content:"";position:absolute;left:0;top:.62em;width:8px;height:1.5px;background:var(--accent)}
.tags{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:24px}
.tags span{font:400 .74rem var(--mono);padding:4px 9px;border-radius:999px;border:1px solid var(--line-2);color:var(--muted)}
@media (max-width:860px){.case{grid-template-columns:1fr}.case:nth-child(even) .case-media{order:0}}
.more{margin-top:clamp(40px,5vw,64px)}

/* project cards */
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
@media (max-width:980px){.grid3{grid-template-columns:1fr 1fr}}
@media (max-width:620px){.grid3{grid-template-columns:1fr}}
.pcard{display:flex;flex-direction:column;border:1px solid var(--line);border-radius:var(--r);overflow:hidden;background:var(--panel);transition:border-color .3s,transform .4s var(--ease)}
.pcard:hover{border-color:var(--line-3);transform:translateY(-4px)}
.pcard[hidden]{display:none}
.pcard-media{position:relative;aspect-ratio:16/9;overflow:hidden;background:var(--panel-2);border-bottom:1px solid var(--line)}
.pcard-media img{width:100%;height:100%;object-fit:cover;transition:transform .8s var(--ease)}
.pcard:hover .pcard-media img{transform:scale(1.05)}
.pcard-kind{position:absolute;top:12px;left:12px;font-size:.66rem;letter-spacing:.06em;text-transform:uppercase;padding:4px 8px;border-radius:4px;background:color-mix(in srgb,var(--bg) 78%,transparent);backdrop-filter:blur(8px);color:var(--text-2);border:1px solid var(--line-2)}
.pcard-body{padding:18px 20px 22px}
.pcard-cats{font-size:.68rem;letter-spacing:.06em;text-transform:uppercase;color:var(--accent);margin:0 0 10px}
.pcard h3{margin:0 0 8px;font-size:1.08rem}
.pcard-sum{color:var(--muted);font-size:.9rem;margin:0;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}

/* capabilities */
.caps{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--line);border-left:1px solid var(--line)}
.cap{position:relative;padding:28px 24px 30px;border-right:1px solid var(--line);border-bottom:1px solid var(--line);transition:background .3s}
.cap:hover{background:var(--panel)}
.cap-ico{display:inline-grid;place-items:center;width:42px;height:42px;border-radius:10px;border:1px solid var(--line-2);color:var(--accent);margin-bottom:26px;transition:border-color .3s}
.cap:hover .cap-ico{border-color:var(--accent)}
.cap-n{position:absolute;top:26px;right:22px;font-size:.7rem;color:var(--faint)}
.cap h3{margin-bottom:8px}
.cap p{color:var(--muted);font-size:.9rem;margin:0}
@media (max-width:980px){.caps{grid-template-columns:1fr 1fr}}
@media (max-width:520px){.caps{grid-template-columns:1fr}}

/* series rows */
.series-rows{border-top:1px solid var(--line)}
.srow{display:grid;grid-template-columns:56px minmax(160px,.9fr) 2fr 200px 24px;gap:20px;align-items:center;padding:22px 0;border-bottom:1px solid var(--line);transition:padding .35s var(--ease),background .3s}
.srow:hover{padding-left:12px;padding-right:12px;background:var(--panel)}
.srow-n{font-size:.75rem;color:var(--faint)}
.srow-t{font-size:1.25rem;font-weight:500;letter-spacing:-.025em}
.srow-d{color:var(--muted);font-size:.92rem}
.srow-f{font-size:.72rem;color:var(--faint);text-transform:uppercase;letter-spacing:.06em}
.srow-a{color:var(--faint);transition:transform .3s var(--ease),color .3s}
.srow:hover .srow-a{color:var(--accent);transform:translateX(4px)}
@media (max-width:860px){.srow{grid-template-columns:40px 1fr 20px}.srow-d,.srow-f{display:none}}

/* journey log */
.log{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:0;border-top:1px solid var(--line);border-left:1px solid var(--line)}
.log-i{display:flex;gap:18px;padding:26px 24px 28px;border-right:1px solid var(--line);border-bottom:1px solid var(--line)}
.log-n{font-size:.72rem;color:var(--faint);padding-top:3px}
.log-tag{font-size:.66rem;text-transform:uppercase;letter-spacing:.08em;color:var(--accent);margin:0 0 8px}
.log-i h3{margin-bottom:8px}
.log-i p:last-child{color:var(--muted);font-size:.9rem;margin:0}
@media (max-width:900px){.log{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.log{grid-template-columns:1fr}}

/* stack */
.stack{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.stack-g{border:1px solid var(--line);border-radius:var(--r);padding:22px 22px 18px;background:var(--panel)}
.stack-g ul{list-style:none;padding:0;margin:0;display:flex;flex-wrap:wrap;gap:6px}
.stack-g li{font:400 .8rem var(--mono);padding:5px 10px;border-radius:6px;background:var(--panel-2);border:1px solid var(--line);color:var(--text-2)}
@media (max-width:900px){.stack{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.stack{grid-template-columns:1fr}}

/* page hero */
.phero{padding:clamp(48px,6vw,88px) 0 clamp(32px,4vw,52px);border-bottom:1px solid var(--line);position:relative;overflow:hidden}
.phero::before{content:"";position:absolute;inset:0;background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px);background-size:56px 56px;mask-image:linear-gradient(115deg,#000 0%,transparent 55%);-webkit-mask-image:linear-gradient(115deg,#000 0%,transparent 55%);opacity:.6;pointer-events:none}
.phero .wrap{position:relative}
.phero h1{max-width:18ch}
.phero-lead{color:var(--text-2);font-size:1.1rem;max-width:64ch;margin:0}
.nf{min-height:62vh;display:flex;align-items:center}
.crumbs{display:flex;flex-wrap:wrap;gap:8px;font-size:.74rem;color:var(--faint);margin-bottom:22px;text-transform:uppercase;letter-spacing:.06em}
.crumbs a{color:var(--muted)}
.crumbs a:hover{color:var(--accent)}
.credit{margin-top:20px;font-size:.88rem;color:var(--muted);padding-left:14px;border-left:1.5px solid var(--accent);max-width:70ch}
.series-hero{display:grid;grid-template-columns:1.2fr .8fr;gap:48px;align-items:center}
.series-cover{position:relative;margin:0;border-radius:var(--r);overflow:hidden;border:1px solid var(--line-2)}
@media (max-width:900px){.series-hero{grid-template-columns:1fr}}

/* toolbar */
.toolbar{display:flex;flex-wrap:wrap;gap:16px;justify-content:space-between;align-items:center;margin-bottom:28px}
.filters{display:flex;flex-wrap:wrap;gap:6px}
.flt{display:inline-flex;align-items:center;gap:8px;height:34px;padding:0 14px;border-radius:999px;border:1px solid var(--line-2);background:transparent;color:var(--muted);font:400 .85rem var(--font);cursor:pointer;transition:all .2s}
.flt span{font:400 .7rem var(--mono);color:var(--faint)}
.flt:hover{color:var(--text);border-color:var(--line-3)}
.flt.active{background:var(--text);color:var(--bg);border-color:var(--text)}
.flt.active span{color:color-mix(in srgb,var(--bg) 60%,transparent)}
.search{display:flex;align-items:center;gap:10px;height:38px;padding:0 14px;border-radius:999px;border:1px solid var(--line-2);background:var(--panel);color:var(--faint);min-width:280px}
.search input{border:0;outline:0;background:transparent;color:var(--text);font:inherit;font-size:.9rem;width:100%}
.empty{text-align:center;color:var(--muted);padding:60px 0}
@media (max-width:640px){.search{min-width:0;width:100%}}

/* case study page */
.cs-hero{padding:clamp(48px,7vw,96px) 0 0;border-bottom:1px solid var(--line)}
.cs-hero h1{font-size:clamp(2.2rem,5.4vw,4.2rem);max-width:22ch}
.cs-lead{color:var(--text-2);font-size:1.12rem;max-width:72ch;line-height:1.65}
.cs-lead p{margin-bottom:.8em}
.cs-lead .col{display:block}
.cs-lead .cols{display:block}
.cs-lead .btns{margin-top:18px}
.cs-lead .btn{height:40px}
.cs-lead strong,.cs-lead b{color:var(--text);font-weight:500}
.hl{color:var(--accent)}
.cs-spec{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));margin:40px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.cs-spec>div{padding:16px 20px 18px 0;margin:0}
.cs-spec>div+div{border-left:1px solid var(--line);padding-left:20px}
.cs-spec dt{font-size:.66rem;text-transform:uppercase;letter-spacing:.08em;color:var(--faint)}
.cs-spec dd{margin:6px 0 0;font-size:.86rem;color:var(--text);line-height:1.5}
.cs-spec dd a:hover{color:var(--accent)}
.cs-spec.inline{display:flex;flex-wrap:wrap;margin:28px 0 0}
.cs-spec.inline>div{padding-right:28px}
.cs-cover{position:relative;width:100%;box-sizing:border-box;margin:0 0 -1px;border-radius:var(--r) var(--r) 0 0;overflow:hidden;border:1px solid var(--line);border-bottom:0;aspect-ratio:16/9;max-height:78vh;background:var(--panel)}
.cs-cover img{width:100%;height:100%;object-fit:cover}
@media (max-width:700px){.cs-spec>div+div{border-left:0;padding-left:0}.cs-spec>div{border-bottom:1px solid var(--line)}.cs-cover{aspect-ratio:16/10}}

/* doc layout + prose */
.doc{display:grid;grid-template-columns:230px minmax(0,1fr);gap:56px;align-items:start}
.toc{position:sticky;top:88px;max-height:calc(100vh - 110px);overflow:auto}
.toc ol{list-style:none;margin:0;padding:0}
.toc a{display:flex;gap:12px;padding:7px 0;color:var(--muted);font-size:.86rem;line-height:1.35;border-bottom:1px solid var(--line);transition:color .2s}
.toc a span{font-size:.7rem;color:var(--faint);padding-top:2px}
.toc a:hover,.toc a.active{color:var(--text)}
.toc a.active span{color:var(--accent)}
@media (max-width:1000px){.doc{grid-template-columns:1fr}.toc{display:none}}
.prose{min-width:0;max-width:860px;font-size:1rem;color:var(--text-2)}
.prose>.col,.prose>.cols{margin-bottom:28px}
.prose>.col{border:1px solid var(--line);border-radius:var(--r);padding:clamp(20px,3vw,32px);background:var(--panel)}
.prose h2{font-size:1.5rem;letter-spacing:-.03em;margin:0 0 .8em;color:var(--text);scroll-margin-top:90px;display:flex;align-items:baseline;gap:12px}
.prose h2::before{content:"";flex:none;width:10px;height:10px;border:1.5px solid var(--accent);transform:rotate(45deg) translateY(-2px)}
.prose h3,.prose h4{color:var(--text);margin:1.4em 0 .5em;scroll-margin-top:90px}
.prose .col>h2:first-child,.prose .col>h3:first-child{margin-top:0}
.prose a{color:var(--text);border-bottom:1px solid color-mix(in srgb,var(--accent) 55%,transparent);transition:color .2s}
.prose a:hover{color:var(--accent)}
.prose a.btn{border-bottom:1px solid var(--line-3)}
.prose a.btn:not(.btn-ghost){background:var(--accent);border-color:var(--accent);color:var(--accent-ink);font-weight:600}
.prose a.btn:not(.btn-ghost):hover{background:#fff;border-color:#fff;color:#04121f}
.prose .btn-ghost{background:transparent;color:var(--text);border-color:var(--line-3)}
.prose .btn-ghost:hover{border-color:var(--accent);color:var(--accent)}
.prose ul,.prose ol{padding-left:1.25em;margin:0 0 1.1em}
.prose li{margin:.35em 0}
.prose li::marker{color:var(--faint)}
.prose strong,.prose b{color:var(--text);font-weight:600}
.prose mark{background:var(--accent-soft);color:var(--text);padding:0 4px;border-radius:3px}
.prose hr{border:0;border-top:1px solid var(--line-2);margin:28px 0}
.prose blockquote{margin:1.2em 0;padding:4px 0 4px 18px;border-left:1.5px solid var(--accent);color:var(--text)}
.prose figure{margin:0 0 18px}
.prose figure.img img{border-radius:var(--r-sm);border:1px solid var(--line);cursor:zoom-in;background:var(--panel-2)}
.prose figcaption,.prose .caption{font:400 .76rem var(--mono);color:var(--faint);margin-top:10px;text-transform:uppercase;letter-spacing:.05em;text-align:left}
.prose figcaption mark,.prose figcaption strong{background:none;color:inherit;font-weight:400;padding:0}
.cols{display:grid;gap:20px;grid-template-columns:repeat(var(--n,2),minmax(0,1fr))}
.cols-2{--n:2}.cols-3{--n:3}.cols-4{--n:4}
.cols>.col{min-width:0}
.prose>.cols>.col{border:1px solid var(--line);border-radius:var(--r);padding:22px;background:var(--panel)}
.prose>.cols>.col:has(>figure:only-child){border:0;padding:0;background:none}
.prose>.col>.col{border:0;padding:0;background:none}
@media (max-width:760px){.cols,.cols-3,.cols-4{grid-template-columns:1fr}}
.table-wrap{overflow-x:auto;margin:0 0 18px;border:1px solid var(--line);border-radius:var(--r-sm)}
.prose table{border-collapse:collapse;width:100%;font-size:.9rem}
.prose th,.prose td{padding:11px 14px;border-bottom:1px solid var(--line);text-align:left;vertical-align:top}
.prose tr:first-child td,.prose th{font:500 .72rem var(--mono);text-transform:uppercase;letter-spacing:.06em;color:var(--muted);background:var(--panel-2)}
.prose tr:last-child td{border-bottom:0}
.prose code{font:400 .86em var(--mono);background:var(--panel-2);border:1px solid var(--line);padding:1px 6px;border-radius:5px;color:var(--text)}
pre.code{position:relative;margin:0 0 18px;padding:18px 20px;border-radius:var(--r-sm);border:1px solid var(--line-2);background:#050607;color:#d9dde1;font:400 .84rem/1.65 var(--mono);overflow:auto}
pre.code code{background:none;border:0;padding:0;color:inherit;font-size:inherit}
.copy{position:absolute;top:8px;right:8px;font:500 .68rem var(--mono);padding:5px 10px;border-radius:5px;border:1px solid rgba(255,255,255,.16);background:#0d0f11;color:#9aa0a6;cursor:pointer;opacity:0;transition:opacity .2s;text-transform:uppercase;letter-spacing:.06em}
pre.code:hover .copy,.copy:focus{opacity:1}
.copy.done{color:var(--ok);border-color:var(--ok)}
.note{position:relative;padding:12px 16px 12px 18px;border-radius:var(--r-sm);background:var(--panel-2);border:1px solid var(--line);color:var(--text-2)!important;font-size:.93rem}
.note::before{content:"";position:absolute;left:0;top:10px;bottom:10px;width:2px;background:var(--accent);border-radius:2px}
.embed{position:relative;aspect-ratio:16/9;margin:0 0 18px;border-radius:var(--r-sm);overflow:hidden;border:1px solid var(--line);background:#000}
.embed iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.widget{margin:0 0 18px}
.widget iframe{display:block;width:100%;min-height:460px;border:1px solid var(--line);border-radius:var(--r-sm);background:var(--panel)}
.pdf{border:1px solid var(--line-2);border-radius:var(--r);overflow:hidden;margin:0 0 18px;background:var(--panel)}
.pdf-bar{display:flex;flex-wrap:wrap;align-items:center;gap:8px;padding:10px 12px 10px 16px;border-bottom:1px solid var(--line)}
.pdf-name{flex:1;min-width:150px;font:500 .8rem var(--mono);text-transform:uppercase;letter-spacing:.04em;color:var(--text)}
.pdf-bar .btn{height:30px;padding:0 12px;font-size:.8rem}
.pdf-view{display:block;width:100%;height:78vh;min-height:420px;background:#fff}
.gallery{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:10px;margin-bottom:18px}
.gallery figure{margin:0}
.pager{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin:56px 0 0}
.pager a{display:flex;flex-direction:column;gap:6px;padding:22px 24px;border:1px solid var(--line);border-radius:var(--r);font-weight:500;letter-spacing:-.015em;transition:border-color .3s,background .3s}
.pager a:hover{border-color:var(--line-3);background:var(--panel)}
.pager .mono{font-size:.7rem;text-transform:uppercase;letter-spacing:.08em;color:var(--faint);font-weight:400}
.pager .nx{text-align:right}
@media (max-width:600px){.pager{grid-template-columns:1fr}.pager .nx{text-align:left}}

/* series chapter list */
.toc-list{list-style:none;margin:0;padding:0;border-top:1px solid var(--line);columns:2;column-gap:40px}
.toc-list li{break-inside:avoid}
.toc-list a,.toc-list .soon>span{display:grid;grid-template-columns:40px 1fr auto 18px;gap:14px;align-items:center;padding:15px 4px;border-bottom:1px solid var(--line);transition:padding .3s var(--ease),color .2s}
.toc-list a:hover{padding-left:12px;color:var(--accent)}
.toc-list .n{font-size:.74rem;color:var(--faint)}
.toc-list .t{line-height:1.35}
.toc-list .k{font-size:.64rem;text-transform:uppercase;letter-spacing:.06em;color:var(--faint);border:1px solid var(--line-2);padding:2px 7px;border-radius:4px}
.toc-list .a{color:var(--faint)}
.toc-list .soon>span{color:var(--faint);grid-template-columns:40px 1fr}
@media (max-width:820px){.toc-list{columns:1}}

/* reader */
.reader{display:grid;grid-template-columns:280px minmax(0,1fr);gap:56px;padding-top:36px;padding-bottom:80px;align-items:start}
.rd-nav{position:sticky;top:84px;max-height:calc(100vh - 100px);overflow:auto;padding-right:8px;scrollbar-width:thin}
.rd-series{display:block;padding:0 0 16px;margin-bottom:8px;border-bottom:1px solid var(--line);font-weight:500;font-size:1.05rem;letter-spacing:-.02em}
.rd-series .label{display:block;margin-bottom:6px}
.rd-nav ol{list-style:none;margin:0;padding:0}
.rd-nav a{display:flex;gap:12px;padding:8px 10px;border-radius:6px;color:var(--muted);font-size:.86rem;line-height:1.35;transition:color .2s,background .2s}
.rd-nav a span{font-size:.7rem;color:var(--faint);padding-top:2px;min-width:2ch}
.rd-nav a:hover{color:var(--text);background:var(--panel)}
.rd-nav a[aria-current]{color:var(--text);background:var(--panel-2)}
.rd-nav a[aria-current] span{color:var(--accent)}
.rd-main h1{font-size:clamp(2rem,4vw,3.2rem);max-width:24ch}
.rd-main .prose{max-width:none}
.rd-prog{height:2px;background:var(--line);margin:22px 0 36px}
.rd-prog i{display:block;height:100%;background:var(--accent)}
.rd-tg{display:none;margin-bottom:16px}
/* wide reader: pages built around interactive guides get the full screen width (chapter list becomes a drawer) */
.reader.wide{grid-template-columns:minmax(0,1fr);max-width:1520px;gap:16px}
.rd-main{min-width:0}
.reader.wide .rd-nav{display:none;position:static;max-height:55vh;border:1px solid var(--line);border-radius:var(--r);padding:14px;background:var(--panel)}
.reader.wide .rd-nav.open{display:block}
.reader.wide .rd-tg{display:inline-flex}
.reader.wide .rd-main h1{max-width:none}
.reader.wide .widget iframe{border-radius:var(--r)}
@media (max-width:1000px){.reader{grid-template-columns:1fr;gap:20px}.rd-nav{display:none;position:static;max-height:55vh;border:1px solid var(--line);border-radius:var(--r);padding:14px}.rd-nav.open{display:block}.rd-tg{display:inline-flex}}

/* library */
.lib{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.lib-c{display:flex;flex-direction:column;border:1px solid var(--line);border-radius:var(--r);overflow:hidden;background:var(--panel);transition:border-color .3s,transform .4s var(--ease)}
.lib-c:hover{border-color:var(--line-3);transform:translateY(-4px)}
.lib-media{aspect-ratio:16/9;background:var(--panel-2);overflow:hidden;border-bottom:1px solid var(--line)}
.lib-media img{width:100%;height:100%;object-fit:cover;transition:transform .8s var(--ease)}
.lib-c:hover .lib-media img{transform:scale(1.05)}
.lib-body{padding:24px}
.lib-meta{font-size:.7rem;color:var(--faint);text-transform:uppercase;letter-spacing:.06em;display:flex;gap:10px}
.lib-meta span{color:var(--accent)}
.lib-body p:last-child{color:var(--muted);font-size:.9rem;margin:0}
@media (max-width:980px){.lib{grid-template-columns:1fr 1fr}}
@media (max-width:600px){.lib{grid-template-columns:1fr}}

/* about */
.about{display:grid;grid-template-columns:1.4fr .8fr;gap:56px;align-items:end}
.now{border:1px solid var(--line-2);border-radius:var(--r);padding:22px 24px;background:var(--panel)}
.now ul{list-style:none;margin:0;padding:0}
.now li{display:flex;flex-direction:column;padding:12px 0;border-bottom:1px solid var(--line)}
.now li:last-child{border:0;padding-bottom:0}
.now span{color:var(--muted);font-size:.9rem}
.now em{font-style:normal;font-size:.7rem;color:var(--faint);margin-top:2px}
@media (max-width:900px){.about{grid-template-columns:1fr}}
.chron{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.chron-i{display:grid;grid-template-columns:220px minmax(0,1fr);gap:32px;padding:32px 0;border-bottom:1px solid var(--line)}
.chron-l{display:flex;flex-direction:column;gap:10px;font-size:.74rem;color:var(--faint)}
.chron-tag{color:var(--accent);text-transform:uppercase;letter-spacing:.08em;font-size:.68rem}
.chron-r{max-width:70ch}
.chron-r h3{font-size:1.4rem;letter-spacing:-.03em;margin-bottom:12px}
.chron-r p{color:var(--muted)}
.chron-r p strong,.chron-r p b{color:var(--text);font-weight:500}
.chron-out{color:var(--text)!important;padding-left:14px;border-left:1.5px solid var(--accent)}
@media (max-width:760px){.chron-i{grid-template-columns:1fr;gap:12px}.chron-l{flex-direction:row}}
.tcard{border:1px solid var(--line);border-radius:var(--r);padding:24px;background:var(--panel)}
.tcard p:not(.log-tag){color:var(--muted);font-size:.92rem}
.contact{display:grid;grid-template-columns:1fr 1.1fr;gap:48px;align-items:start}
.clist{border-top:1px solid var(--line)}
.clist a{display:flex;justify-content:space-between;gap:16px;padding:18px 0;border-bottom:1px solid var(--line);font-size:1.05rem;transition:color .2s,padding .3s var(--ease);word-break:break-word}
.clist a:hover{color:var(--accent);padding-left:8px}
.clist .mono{font-size:.72rem;color:var(--faint);text-transform:uppercase;letter-spacing:.08em;padding-top:5px}
@media (max-width:860px){.contact{grid-template-columns:1fr}}

/* footer */
.ftr{border-top:1px solid var(--line);padding:clamp(48px,6vw,80px) 0 28px;background:var(--bg)}
.ftr-cta{padding-bottom:40px;border-bottom:1px solid var(--line);margin-bottom:40px}
.ftr-mail{display:inline-flex;align-items:baseline;gap:14px;font-size:clamp(1.6rem,5.2vw,4.2rem);font-weight:500;letter-spacing:-.045em;line-height:1.05;word-break:break-all;transition:color .25s}
.ftr-mail span{font-size:.5em;color:var(--faint);transition:transform .3s var(--ease),color .25s}
.ftr-mail:hover{color:var(--accent)}
.ftr-mail:hover span{color:var(--accent);transform:translate(4px,-4px)}
.ftr-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr 1fr;gap:32px}
.ftr-grid p.muted{margin-top:14px;font-size:.9rem;max-width:34ch}
.ftr-grid>div>a:not(.brand){display:block;padding:4px 0;color:var(--muted);font-size:.9rem;transition:color .2s}
.ftr-grid>div>a:not(.brand):hover{color:var(--text)}
.ftr-bot{display:flex;flex-wrap:wrap;gap:20px;justify-content:space-between;margin-top:56px;padding-top:22px;border-top:1px solid var(--line);font-size:.72rem;color:var(--faint);text-transform:uppercase;letter-spacing:.06em}
.status{display:inline-flex;align-items:center;gap:8px}
.status i{width:6px;height:6px;border-radius:50%;background:var(--accent);box-shadow:0 0 8px var(--accent)}
@media (max-width:820px){.ftr-grid{grid-template-columns:1fr 1fr}.ftr-grid>div:first-child{grid-column:1/-1}}

/* command palette */
.palette{position:fixed;inset:0;z-index:120;background:color-mix(in srgb,var(--bg) 60%,transparent);backdrop-filter:blur(6px);display:flex;justify-content:center;align-items:flex-start;padding:12vh 16px 16px}
.palette[hidden]{display:none}
.pal-box{width:100%;max-width:640px;border:1px solid var(--line-2);border-radius:14px;background:var(--panel);box-shadow:0 40px 100px -20px rgba(0,0,0,.6);overflow:hidden}
.pal-in{display:flex;align-items:center;gap:12px;padding:0 16px;border-bottom:1px solid var(--line);color:var(--faint)}
.pal-in input{flex:1;height:56px;border:0;outline:0;background:transparent;color:var(--text);font:400 1rem var(--font)}
.pal-list{list-style:none;margin:0;padding:8px;max-height:56vh;overflow:auto}
.pal-list li a{display:grid;grid-template-columns:1fr auto;gap:2px 16px;padding:10px 12px;border-radius:8px}
.pal-list li a strong{font-weight:500}
.pal-list li a small{grid-column:1;color:var(--muted);font-size:.82rem}
.pal-list li a em{grid-row:1;grid-column:2;font:400 .68rem var(--mono);font-style:normal;color:var(--faint);text-transform:uppercase;letter-spacing:.05em;align-self:center}
.pal-list li.sel a{background:var(--panel-2);box-shadow:inset 2px 0 0 var(--accent)}
.pal-list .none{padding:20px;color:var(--muted);text-align:center}

/* lightbox */
.lightbox{position:fixed;inset:0;z-index:130;display:grid;place-items:center;padding:28px;background:rgba(4,5,6,.94);cursor:zoom-out}
.lightbox[hidden]{display:none}
.lightbox img{max-width:min(1500px,96vw);max-height:88vh;width:auto;border-radius:8px}
.lightbox button{position:absolute;top:16px;right:18px;height:34px;padding:0 14px;border-radius:999px;border:1px solid rgba(255,255,255,.25);background:transparent;color:#fff;font:500 .78rem var(--mono);text-transform:uppercase;letter-spacing:.06em;cursor:pointer}

/* reveal */
.js .rv{opacity:0;transform:translateY(18px);transition:opacity .8s var(--ease),transform .8s var(--ease)}
.js .rv.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important;scroll-behavior:auto!important}.js .rv{opacity:1;transform:none}}

.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.rd-prog.thin{margin:10px 0 20px}

/* ---------- code blocks (line numbers + syntax colours) ---------- */
.codeblock{position:relative;margin:0 0 18px;border:1px solid var(--line-2);border-radius:var(--r-sm);background:#08101c;overflow:hidden}
.codeblock[data-lang]::before{content:attr(data-lang);display:block;padding:8px 14px;border-bottom:1px solid var(--line);font:500 .7rem var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--muted);background:#0b1524}
.codeblock pre.code{margin:0;border:0;border-radius:0;background:transparent;white-space:pre;tab-size:4;font-size:.86rem;line-height:1.7;padding:14px 18px}
.codeblock pre.code .ln{display:inline}
.codeblock pre.numbered{counter-reset:ln;padding-left:0}
.codeblock pre.numbered .ln{counter-increment:ln}
.codeblock pre.numbered .ln::before{content:counter(ln);display:inline-block;width:3.2em;padding-right:1.1em;margin-right:.2em;text-align:right;color:#4d6178;user-select:none;-webkit-user-select:none}
.codeblock .copy{top:6px;right:8px;opacity:1}
.codeblock[data-lang] .copy{top:4px}
.tok-keyword{color:#c9a7ff}
.tok-string,.tok-string2{color:#ffb27a}
.tok-number,.tok-bool,.tok-literal{color:#ffd24a}
.tok-comment{color:#6b7f96;font-style:italic}
.tok-className,.tok-typeName,.tok-namespace{color:#66e3b0}
.tok-definition{color:#5ab4ff}
.tok-propertyName{color:#8fd0ff}
.tok-meta{color:#a7b8cd}
.tok-operator,.tok-punctuation{color:#93a7bf}
.tok-variableName,.tok-variableName2{color:#e2eaf5}

/* section cards that hold a visualizer take the visualizer's colour (set by site.js) */
.prose .col.viz-card{transition:background .4s}
.prose .col.viz-card .widget iframe{border-color:transparent}

/* ---------- chapter cards (course pages) ---------- */
.chgrid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.chcard{display:flex;flex-direction:column;height:100%;border:1px solid var(--line);border-radius:var(--r);overflow:hidden;background:var(--panel);transition:border-color .3s,transform .4s var(--ease)}
a.chcard:hover{border-color:var(--line-3);transform:translateY(-4px)}
.chcard-media{position:relative;aspect-ratio:16/9;background:var(--panel-2);overflow:hidden;border-bottom:1px solid var(--line)}
.chcard-media img{width:100%;height:100%;object-fit:cover;transition:transform .8s var(--ease)}
a.chcard:hover .chcard-media img{transform:scale(1.05)}
.rd-sub{margin:18px 0 6px}
.chgrid-h{margin:48px 0 18px;font-size:clamp(1.3rem,2.2vw,1.7rem);font-weight:500;letter-spacing:-.02em}
.chcard-b{display:flex;flex-direction:column;gap:8px;padding:14px 16px 16px}
.chcard-n{align-self:flex-start;font-size:.68rem;letter-spacing:.06em;text-transform:uppercase;padding:3px 8px;border-radius:5px;color:var(--accent);border:1px solid var(--line-2);background:var(--accent-soft)}
.chcard-t{font-weight:500;line-height:1.35;letter-spacing:-.01em}
a.chcard:hover .chcard-t{color:var(--accent)}
.chgrid .soon .chcard{border-style:dashed;color:var(--faint)}
@media (max-width:1100px){.chgrid{grid-template-columns:repeat(3,1fr)}}
@media (max-width:760px){.chgrid{grid-template-columns:1fr 1fr}}
@media (max-width:460px){.chgrid{grid-template-columns:1fr}}

/* ---------- small colour accents ---------- */
:root{--blue:#66e3b0;--amber:#ffd24a;--violet:#c9a7ff;--orange:#ff8a3d;--grad-acc:linear-gradient(90deg,var(--accent),#66e3b0)}
:root[data-theme="light"]{--blue:#1f6fe0;--amber:#c27a00;--violet:#6b4fd8}
/* soft green/blue glow behind the hero traces */
.hero-glow{position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(42vw 34vw at 82% 18%,color-mix(in srgb,var(--accent) 12%,transparent),transparent 70%),
             radial-gradient(38vw 30vw at 62% 70%,color-mix(in srgb,var(--blue) 10%,transparent),transparent 70%)}
.hero-h .dim{background:linear-gradient(90deg,var(--muted),color-mix(in srgb,var(--blue) 55%,var(--muted)));-webkit-background-clip:text;background-clip:text;color:transparent}
.kpi sup{background:var(--grad-acc);-webkit-background-clip:text;background-clip:text;color:transparent}
.sh-label span{background:color-mix(in srgb,var(--accent) 8%,transparent)}
/* awards: each gets its own colour line + glow on hover */
.award{position:relative;overflow:hidden}
.award::before{content:"";position:absolute;left:0;right:0;top:0;height:2px;background:var(--ac,var(--accent));opacity:.85}
.award::after{content:"";position:absolute;width:220px;height:220px;right:-90px;top:-110px;border-radius:50%;background:radial-gradient(circle,color-mix(in srgb,var(--ac,var(--accent)) 22%,transparent),transparent 70%);opacity:0;transition:opacity .4s}
.award:hover::after{opacity:1}
.award:nth-child(2){--ac:#66e3b0}.award:nth-child(3){--ac:var(--orange)}.award:nth-child(4){--ac:var(--violet)}
.award strong{position:relative}
/* capabilities: a colour per discipline */
.cap-aero{--cc:var(--orange)}.cap-robotics{--cc:var(--accent)}.cap-ai{--cc:var(--violet)}.cap-iot{--cc:#66e3b0}
.cap-pcb{--cc:#3ddcc0}.cap-cad{--cc:#ff8a65}.cap-web{--cc:#5cc8ff}.cap-learn{--cc:#ffd25a}
.cap .cap-ico{color:var(--cc,var(--accent));background:color-mix(in srgb,var(--cc,var(--accent)) 9%,transparent);border-color:color-mix(in srgb,var(--cc,var(--accent)) 30%,transparent)}
.cap:hover .cap-ico{border-color:var(--cc,var(--accent))}
.cap:hover{background:linear-gradient(160deg,color-mix(in srgb,var(--cc,var(--accent)) 7%,transparent),transparent 60%)}
.pcard-cats,.log-tag{background:var(--grad-acc);-webkit-background-clip:text;background-clip:text;color:transparent}

/* ---------- photo strip of real project work ---------- */
.reel{overflow:hidden;padding:4px 0 0;mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);-webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
.reel-track{display:flex;gap:14px;width:max-content;animation:mq 80s linear infinite}
.reel:hover .reel-track{animation-play-state:paused}
.reel-item{position:relative;flex:none;width:280px;aspect-ratio:16/10;border-radius:12px;overflow:hidden;border:1px solid var(--line)}
.reel-item img{width:100%;height:100%;object-fit:cover;filter:grayscale(.55) brightness(.8);transition:filter .5s,transform .8s var(--ease)}
.reel-item span{position:absolute;left:10px;bottom:8px;right:10px;font-size:.68rem;color:#fff;text-shadow:0 1px 8px rgba(0,0,0,.8);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;opacity:0;transition:opacity .3s}
.reel-item:hover img{filter:none;transform:scale(1.05)}
.reel-item:hover span{opacity:1}
@media (max-width:600px){.reel-item{width:200px}}

/* ---------- homepage v3 additions ---------- */
.btn-accent-line{background:transparent;color:var(--accent);border-color:color-mix(in srgb,var(--accent) 55%,transparent)}
.btn-accent-line:hover{background:var(--accent);color:var(--accent-ink);border-color:var(--accent)}
.kpi{position:relative}
.kpi dd{color:var(--text)}
.first-tag{display:flex;align-items:center;gap:10px;font-size:.78rem;color:var(--accent);text-transform:uppercase;letter-spacing:.08em;margin:0 0 14px}
.first-tag span{padding:2px 7px;border:1px solid color-mix(in srgb,var(--accent) 45%,transparent);border-radius:4px;color:var(--accent)}
.first-journey{font-size:1.05rem;color:var(--text);margin:-4px 0 12px;font-weight:500}
.story-head{display:grid;grid-template-columns:1.4fr .9fr;gap:40px;align-items:end;margin-bottom:24px}
.story-head .sh{margin-bottom:0}
@media (max-width:900px){.story-head{grid-template-columns:1fr}}
.home .hero-h{font-size:clamp(2.6rem,6.4vw,5.6rem);max-width:none;margin-bottom:32px}
.home .hero-h .dim{display:block;font-size:.5em;letter-spacing:-.035em;line-height:1.15;margin-top:.28em;max-width:26ch}
/* interactive particle field in the hero */
.field{position:absolute;inset:0;width:100%;height:100%;display:block}