/* Layout: 1120px column; centered nav; case studies use a sticky "On this page" rail + 640px reading column. Dark-first. */
:root{
  --bg:#0D0D0F; --surface:#151518; --raised:#1D1D21; --ink:#F4F4F6; --muted:#9A9AA3; --faint:#85858F; --line:#25252A; --card:#F4F4F6; --card2:#E7E7EB; --card-ink:#5C5C66;
  --logo:#FFFFFF; --accent:#B1A9FF; --grad:linear-gradient(120deg,#7D9BFF,#A48BFF); --print:#F3F1EC; --glow:rgba(255,255,255,.035); --grain:.035; --hl:#C9CBFF; --hl-ink:#14143A; --good:#3FCB7E; --bad:#F2605A; --callout:#18181C; --callout-line:#B1A9FF;
  --todo:#F0C46B; --todo-bg:rgba(240,196,107,.07); --todo-line:rgba(240,196,107,.35);
  --f:"Plus Jakarta Sans","Helvetica Neue",Arial,sans-serif; --mono:var(--f);
  color-scheme:dark;
}
@media (prefers-color-scheme: light){:root:not([data-theme="dark"]){
  --bg:#FFFFFF; --surface:#F6F6F8; --raised:#EEEEF1; --ink:#121214; --muted:#5C5C66; --faint:#686872; --line:#E6E6EA; --card:#F6F6F8; --card2:#ECECEF; --card-ink:#5C5C66;
  --logo:#333333; --accent:#5753C6; --grad:linear-gradient(120deg,#3E63DD,#6E56CF); --print:#FFFFFF; --glow:rgba(87,83,198,.05); --grain:.022; --hl:#E6E7FF; --hl-ink:#1B1A4A; --good:#0E7A44; --bad:#C0352F; --callout:#F3F3FF; --callout-line:#5753C6;
  --todo:#9A6400; --todo-bg:#FFF7E6; --todo-line:#E8C98A; color-scheme:light}}
:root[data-theme="light"]{
  --bg:#FFFFFF; --surface:#F6F6F8; --raised:#EEEEF1; --ink:#121214; --muted:#5C5C66; --faint:#686872; --line:#E6E6EA; --card:#F6F6F8; --card2:#ECECEF; --card-ink:#5C5C66;
  --logo:#333333; --accent:#5753C6; --grad:linear-gradient(120deg,#3E63DD,#6E56CF); --print:#FFFFFF; --glow:rgba(87,83,198,.05); --grain:.022; --hl:#E6E7FF; --hl-ink:#1B1A4A; --good:#0E7A44; --bad:#C0352F; --callout:#F3F3FF; --callout-line:#5753C6;
  --todo:#9A6400; --todo-bg:#FFF7E6; --todo-line:#E8C98A; color-scheme:light}

*{box-sizing:border-box}
::selection{background:var(--hl);color:var(--hl-ink);text-shadow:none}
.hl::selection,.hl *::selection{background:var(--hl-ink);color:var(--hl)}
html{scroll-behavior:smooth}
body{margin:0;overflow-x:clip;background:var(--bg);color:var(--ink);font-family:var(--f);font-weight:400;font-size:16px;line-height:1.6;letter-spacing:.01em;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
:focus-visible{outline:2px solid var(--callout-line);outline-offset:3px;border-radius:4px;corner-shape:squircle}
h1,h2,h3,h4{font-weight:500;letter-spacing:-.01em;line-height:1.15;margin:0;text-wrap:balance}
p{margin:0}
.wrap{max-width:1352px;margin:0 auto;padding-inline:clamp(16px,5.3vw,80px)}
.label{font-size:13px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);font-weight:400}
.muted{color:var(--muted)}
strong{font-weight:500;color:var(--ink)}
.hl{background:var(--hl);color:var(--hl-ink);padding:.06em .18em;margin:0 -.04em;border-radius:4px;corner-shape:squircle;text-decoration:none;box-decoration-break:clone;-webkit-box-decoration-break:clone}

/* atmosphere: a soft light at the top of the page + fine film grain */
body{position:relative;isolation:isolate}
body::before{content:"";position:absolute;inset:0 0 auto 0;height:900px;z-index:-1;pointer-events:none;
  background:radial-gradient(70% 60% at 20% 0%,var(--glow),transparent 72%)}
body::after{content:"";position:fixed;inset:0;z-index:30;pointer-events:none;opacity:var(--grain);background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .5  0 0 0 0 .5  0 0 0 0 .5  0 0 0 1 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");background-size:160px 160px;mix-blend-mode:normal}

/* minimal arrow cursor: theme-aware; links get a gold pointing hand */
:root{--cur:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 22 22'%3E%3Cpath d='M4 2.5v15.2l4.1-3.9 2.9 5.9 2.5-1.2-2.9-5.8 5.7-.2z' fill='%23F5F7FD' stroke='%230D0D0F' stroke-width='1.4' stroke-linejoin='round'/%3E%3C/svg%3E") 4 2, auto;--cur-link:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath d='M9 2.8a1.6 1.6 0 0 0-1.6 1.6V13l-1.2-1.2a1.7 1.7 0 0 0-2.4 2.4l4.1 5.4a5.3 5.3 0 0 0 4.2 2.1h2.5a5.2 5.2 0 0 0 5.2-5.2V12a1.6 1.6 0 0 0-3.2 0v-.8a1.6 1.6 0 0 0-3.2 0v-.6a1.4 1.4 0 0 0-2.8 0V4.4A1.6 1.6 0 0 0 9 2.8z' fill='%23B1A9FF' stroke='%2314143A' stroke-width='1.3' stroke-linejoin='round'/%3E%3C/svg%3E") 9 3, pointer}
@media (prefers-color-scheme: light){:root:not([data-theme="dark"]){--cur:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 22 22'%3E%3Cpath d='M4 2.5v15.2l4.1-3.9 2.9 5.9 2.5-1.2-2.9-5.8 5.7-.2z' fill='%23121214' stroke='%23FFFFFF' stroke-width='1.4' stroke-linejoin='round'/%3E%3C/svg%3E") 4 2, auto}}
:root[data-theme="light"]{--cur:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 22 22'%3E%3Cpath d='M4 2.5v15.2l4.1-3.9 2.9 5.9 2.5-1.2-2.9-5.8 5.7-.2z' fill='%23121214' stroke='%23FFFFFF' stroke-width='1.4' stroke-linejoin='round'/%3E%3C/svg%3E") 4 2, auto}
@media (hover:hover) and (pointer:fine){
  html,body{cursor:var(--cur)}
  a,button,[role="tab"],.city,.tools .ic,.rail{cursor:var(--cur-link)!important}
}
/* ---- case study components (REX) ---- */
.cs-lede{margin-top:20px;max-width:68ch;font-size:clamp(16px,1.4vw,18px);line-height:1.7;color:var(--muted)}
.cs-lede strong{color:var(--ink);font-weight:500}
.media{margin:24px 0 0}
.media-box{position:relative;aspect-ratio:16/9;border-radius:18px;corner-shape:squircle;border:1px dashed var(--todo-line);background:linear-gradient(160deg,var(--surface),var(--raised));display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;padding:20px;text-align:center}
.media-box p{margin:0;max-width:46ch;font-size:13.5px;line-height:1.5;color:var(--muted)}
.media-kind{font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--todo);border:1px solid var(--todo-line);background:var(--todo-bg);padding:3px 9px;border-radius:999px;corner-shape:round}
.cs-cover .media{margin-top:36px}
.glance{margin:0;display:grid}
.glance dt{font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--faint);margin-bottom:4px}
.glance dd{margin:0;font-size:15px;color:var(--ink);line-height:1.5}
.live{display:inline-flex;align-items:center;gap:8px;color:var(--ink);font-weight:500}
.live i{width:8px;height:8px;border-radius:50%;corner-shape:round;background:#3FCB7E;box-shadow:0 0 0 4px color-mix(in srgb,#3FCB7E 25%,transparent)}
.feat .media{margin:0 0 12px}.feat .media-box{aspect-ratio:4/3}
.feat h4{font-size:15.5px;font-weight:500;margin:0 0 4px}
.feat p{margin:0;font-size:14px;color:var(--muted);line-height:1.55}
.pull{margin:0 0 32px;font-size:clamp(22px,2.4vw,30px);line-height:1.3;letter-spacing:-.01em;color:var(--ink);border-left:2px solid var(--accent);padding-left:20px;text-wrap:balance}
.qflow{list-style:none;margin:24px 0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;counter-reset:q}
.qflow li{position:relative;display:flex;flex-direction:column;gap:8px;padding:16px;border-radius:18px;corner-shape:squircle;border:1px solid var(--line);background:var(--surface)}
.qflow li:not(:last-child)::after{content:"→";position:absolute;right:-9px;top:22px;color:var(--accent);font-size:14px;background:var(--bg);line-height:1;padding:2px 0}
.qn{width:24px;height:24px;border-radius:50%;corner-shape:round;display:grid;place-items:center;font-size:12px;font-weight:600;color:var(--bg);background:var(--accent)}
.qflow b{font-size:14.5px;font-weight:500;color:var(--ink);line-height:1.35}
.qflow em{font-style:normal;font-size:13px;color:var(--muted);line-height:1.5}
.dec{padding-block:40px;border-top:1px solid var(--line)}
.dec:first-of-type{border-top:0;padding-top:8px}
.dec-head{display:flex;align-items:baseline;gap:14px;margin-bottom:18px}
.dec-n{font-size:13px;color:var(--accent);font-variant-numeric:tabular-nums;font-weight:600}
.dec-head h3{font-size:clamp(19px,2vw,23px);font-weight:500}
.pdw{margin:0;display:grid;gap:12px}
.pdw div{display:grid;grid-template-columns:90px minmax(0,1fr);gap:16px}
.pdw dt{font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--faint);padding-top:3px}
.pdw dd{margin:0;font-size:15.5px;line-height:1.65;color:var(--muted)}
.pdw dd strong{color:var(--ink);font-weight:500}
.note{margin-top:12px;font-size:13px;color:var(--faint);font-style:italic}
@media (max-width:900px){.qflow{grid-template-columns:repeat(2,minmax(0,1fr))}.qflow li::after{display:none}}
@media (max-width:620px){.qflow,.glance{grid-template-columns:minmax(0,1fr)}.pdw div{grid-template-columns:minmax(0,1fr);gap:2px}}
.gl-ic{display:inline-grid;place-items:center;width:30px;height:30px;border-radius:10px;corner-shape:squircle;margin-bottom:10px;color:var(--accent);background:color-mix(in srgb,var(--accent) 12%,transparent)}
.ico{width:17px;height:17px}
.glance{grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.glance div{padding:16px;border:1px solid var(--line);border-radius:18px;corner-shape:squircle;background:var(--surface)}
.fr-head{display:flex;justify-content:space-between;gap:16px;margin:28px 0 10px;font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--faint)}
.friction{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.friction li{position:relative;padding:18px 18px 18px 18px;border-radius:18px;corner-shape:squircle;border:1px solid var(--line);background:var(--surface);display:flex;flex-direction:column;gap:8px;transition:border-color .25s,transform .25s}
.friction li:hover{border-color:color-mix(in srgb,var(--bad) 45%,var(--line));transform:translateY(-2px)}
.friction b{font-size:15px;font-weight:500;color:var(--ink);padding-right:28px}
.friction p{margin:0;font-size:14px;line-height:1.55;color:var(--muted)}
.dec{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:clamp(24px,4vw,56px);align-items:start}
.dec-m{position:sticky;top:calc(env(safe-area-inset-top,0px) + 96px)}
.dec-m .media:first-child{margin-top:0}
.pdw .why dd{color:var(--ink)}
.pdw .why dt{color:var(--accent)}
.changes{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.changes li{padding:18px;border-radius:18px;corner-shape:squircle;border:1px solid var(--line);background:var(--surface);display:flex;flex-direction:column;gap:6px;transition:border-color .25s}
.changes li:hover{border-color:color-mix(in srgb,var(--accent) 45%,var(--line))}
.ch-k{font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--faint);margin-bottom:6px}
.ch-b{font-size:13.5px;color:var(--faint)}
.ch-a{font-size:clamp(20px,2vw,24px);font-weight:500;color:var(--accent);line-height:1.2}
.ch-d{font-size:13.5px;color:var(--muted);line-height:1.5}
.ch-head{justify-content:flex-start}
@media (max-width:980px){.dec{grid-template-columns:minmax(0,1fr)}.dec-m{position:static}.friction,.changes,.glance{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:620px){.friction,.changes,.glance{grid-template-columns:minmax(0,1fr)}}
/* decisions: plain editorial rows, label colour only */
.pdw{gap:0;border-top:1px solid var(--line)}
.pdw div,.pdw .prob,.pdw .sol,.pdw .why{padding:16px 0;border:0;border-bottom:1px solid var(--line);border-radius:0;background:none;grid-template-columns:96px minmax(0,1fr)}
.pdw .prob dt{color:var(--bad)}
.pdw .sol dt{color:var(--good)}

.pdw dd,.pdw .sol dd,.pdw .why dd{color:var(--muted)}
.pdw .sol dd,.pdw .why dd{color:var(--ink)}
.hl-bad{background:color-mix(in srgb,var(--bad) 22%,transparent);color:var(--ink);padding:1px 4px;border-radius:4px;corner-shape:squircle;box-decoration-break:clone;-webkit-box-decoration-break:clone}
.hl-good{background:color-mix(in srgb,var(--good) 22%,transparent);color:var(--ink);padding:1px 4px;border-radius:4px;corner-shape:squircle;box-decoration-break:clone;-webkit-box-decoration-break:clone}
.ch-a{color:var(--good)!important}
.ch-b s{text-decoration-color:var(--bad);color:color-mix(in srgb,var(--bad) 70%,var(--muted))}
.friction li{border-left:2px solid color-mix(in srgb,var(--bad) 55%,var(--line))}
/* lessons (interactive) */
.lessons{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(20px,3vw,40px);align-items:stretch}
.l-tabs{display:flex;flex-direction:column;gap:8px}
.l-tabs button{all:unset;cursor:pointer;display:flex;gap:14px;align-items:baseline;padding:16px 18px;border-radius:18px;corner-shape:squircle;border:1px solid var(--line);color:var(--muted);transition:background .25s,border-color .25s,color .25s}
.l-tabs button:hover{color:var(--accent);border-color:color-mix(in srgb,var(--accent) 55%,transparent)}
.l-tabs button[aria-selected="true"]{background:var(--surface);color:var(--ink);border-color:color-mix(in srgb,var(--accent) 45%,var(--line))}
.l-tabs button:focus-visible{outline:2px solid var(--callout-line);outline-offset:2px}
.ln{flex:none;font-size:12.5px;font-variant-numeric:tabular-nums;color:var(--faint);min-width:20px}
.l-tabs button[aria-selected="true"] .ln{color:var(--accent)}
.lt{font-size:15.5px;line-height:1.45;font-weight:500}
.l-panels{position:relative;border-radius:22px;corner-shape:squircle;border:1px solid var(--line);background:linear-gradient(160deg,var(--surface),transparent);padding:clamp(24px,3vw,36px);min-height:100%}
.lpanel{animation:lpin .4s cubic-bezier(.22,.8,.25,1)}
@keyframes lpin{from{opacity:0;translate:0 8px}}
.lp-k{margin:0 0 14px;font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--accent)}
.lpanel h3{font-size:clamp(22px,2.4vw,28px);line-height:1.25;font-weight:500;letter-spacing:-.01em;margin:0 0 16px;text-wrap:balance}
.lp-b{margin:0;font-size:16.5px;line-height:1.75;color:var(--muted)}
.lp-b .hl{color:var(--hl-ink)}
/* skills */
.skills-wrap{margin-top:64px}
.sk-lbl{display:block;margin-bottom:16px}
.skills2{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px}
.skills2 a{height:100%;display:flex;flex-direction:column;gap:10px;padding:18px;border-radius:18px;corner-shape:squircle;border:1px solid var(--line);background:var(--surface);transition:border-color .25s,transform .3s cubic-bezier(.34,1.56,.64,1)}
.skills2 a:hover{border-color:color-mix(in srgb,var(--accent) 45%,var(--line));transform:translateY(-3px)}
.skills2 a:focus-visible{outline:2px solid var(--callout-line);outline-offset:2px}
.sk-ic{width:36px;height:36px;border-radius:12px;corner-shape:squircle;display:grid;place-items:center;color:var(--accent);background:color-mix(in srgb,var(--accent) 12%,transparent)}
.sk-ic svg{width:18px;height:18px}
.sk-t{font-size:14.5px;font-weight:500;line-height:1.4;color:var(--ink);flex:1}
.sk-s{font-size:12.5px;color:var(--faint);line-height:1.4}
.sk-s em{font-style:normal;opacity:0;transition:opacity .2s}
.skills2 a:hover .sk-s em{opacity:1}
@media (max-width:1000px){.skills2{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:760px){.lessons{grid-template-columns:minmax(0,1fr)}.skills2{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:460px){.skills2{grid-template-columns:minmax(0,1fr)}}
@media (prefers-reduced-motion:reduce){.lpanel{animation:none}}
/* rhythm: spacing, line height, letter spacing across case studies */
.cs .body{letter-spacing:.005em}
.part{padding-top:clamp(88px,10vw,128px)}
.part > .label{padding-bottom:18px;margin-bottom:28px;font-size:13px;letter-spacing:.08em}
.part h2{font-size:clamp(26px,2.8vw,34px);line-height:1.22;letter-spacing:-.015em;margin-bottom:20px;max-width:28ch}
.part p.t,.body .t{font-size:16.5px;line-height:1.8;max-width:68ch}
.part p.t + p.t{margin-top:16px}
.cs-lede{line-height:1.75}
.glance,.friction,.changes{gap:16px}
.glance div,.friction li,.changes li{padding:20px}
.feat h4,.friction b{letter-spacing:0;line-height:1.4}.friction p,.ch-d,.feat p{line-height:1.65}
.pdw{gap:14px}
.pdw dd{line-height:1.7}
.dec{padding-block:56px}
.dec-head{margin-bottom:22px}
.dec-head h3{line-height:1.3;letter-spacing:-.01em}
.pull{margin-bottom:40px;line-height:1.35}
.qflow{gap:12px;margin-block:28px}
.qflow li{padding:18px}
.media{margin-top:28px}
.fr-head{margin-top:32px;margin-bottom:12px}
.part .media + p.t,.part .media + .t{margin-top:28px}
/* header */
.top{position:sticky;top:env(safe-area-inset-top,0px);z-index:20;background:color-mix(in srgb,var(--bg) 96%,transparent);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}
.top .wrap{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;min-height:64px}
.mono{font-weight:700;font-size:18px;letter-spacing:-.02em;width:max-content}
.top nav{display:flex;gap:32px;font-size:16px;font-weight:400}
.top nav a{color:color-mix(in srgb,var(--ink) 75%,var(--bg))}
.top nav a:hover{color:var(--accent)}
.top nav a{position:relative}
.top nav a.on{color:var(--accent)}
.top nav a.on::after{content:"";position:absolute;left:50%;bottom:5px;width:4px;height:4px;border-radius:50%;background:var(--accent);transform:translateX(-50%)}
.theme{justify-self:end;background:none;border:0;color:var(--muted);cursor:pointer;width:32px;height:32px;display:grid;place-items:center;border-radius:10px;corner-shape:squircle}
.theme:hover{color:var(--ink);background:var(--surface)}
.theme svg{width:16px;height:16px}

/* placeholders */
.todo{display:inline-flex;align-items:center;font-family:var(--mono);font-size:10.5px;letter-spacing:.05em;text-transform:uppercase;color:var(--todo);background:var(--todo-bg);border:1px dashed var(--todo-line);border-radius:4px;corner-shape:squircle;padding:1px 6px;white-space:nowrap;vertical-align:middle;font-weight:400}
.slot{border:1px dashed var(--todo-line);background:var(--todo-bg);border-radius:10px;corner-shape:squircle;padding:12px 14px;color:var(--todo);font-size:14px;line-height:1.5;font-weight:400}
.slot b{display:block;font-weight:500;color:var(--ink);opacity:.9}
.slot i{display:block;font-style:normal;font-family:var(--mono);font-size:11.5px;color:var(--muted);margin-top:4px}
.img{position:relative;aspect-ratio:16/10;max-width:100%;border-radius:14px;corner-shape:squircle;background:linear-gradient(160deg,var(--card),var(--card2));border:1px solid var(--line);display:grid;place-items:center;text-align:center;padding:12px;overflow:hidden}
.img span{font-family:var(--mono);font-size:11.5px;color:var(--card-ink)}

/* home */
.hero{padding-block:clamp(48px,7vw,68px) clamp(40px,5vw,72px)}
.eyebrow{font-size:16px;color:var(--muted);margin-bottom:16px}
.hero h1{font-size:clamp(28px,3vw,40px);line-height:1.2;max-width:34ch}
.hero h1{letter-spacing:-.015em}
.hero h1 .h1-2{color:var(--muted)}
.co-mark{display:inline-flex;align-items:center;vertical-align:middle;margin-inline:3px 1px;transform:translateY(2px)}
.co-mark{border-radius:4px;corner-shape:squircle;transition:opacity .2s}
.co-mark:hover{opacity:.75}
.co-logo{height:1.25em;width:auto;color:var(--logo);display:block}

.hero .sub{margin-top:24px;max-width:66ch;color:var(--muted);font-size:clamp(16px,1.3vw,19px);line-height:1.45}
.hero .note{margin-top:14px}
.sec-label{font-size:20px;color:var(--muted);margin-bottom:28px;font-weight:400;letter-spacing:0}

.rail{display:grid;grid-auto-flow:column;grid-auto-columns:calc((100% - 52px)/3);gap:26px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;scrollbar-width:none;-ms-overflow-style:none}
.rail::-webkit-scrollbar{display:none}
/* two projects: share the full width instead of leaving an empty third column */
@media (min-width:721px){.rail:not(:has(> .card:nth-child(3))){grid-auto-columns:calc((100% - 26px)/2);cursor:auto}.grid3:not(:has(> .card:nth-child(3))),.grid3:has(> .card:nth-child(4):last-child){grid-template-columns:repeat(2,minmax(0,1fr))}}
.rail{cursor:grab}
.rail.dragging{cursor:grabbing;scroll-snap-type:none;scroll-behavior:auto}
.rail.dragging .card{pointer-events:none}
.rail-head{display:flex;justify-content:space-between;align-items:center;gap:16px;margin-bottom:28px}
.rail-head .sec-label{margin:0}
#sw.sec-label{color:var(--ink);font-weight:500;font-size:clamp(20px,2vw,24px);letter-spacing:-.01em}
#sw.sec-label{white-space:nowrap}
@media (hover:hover){.rn-btn:hover:not(:disabled){background:color-mix(in srgb,var(--accent) 12%,transparent);border-color:color-mix(in srgb,var(--accent) 55%,transparent);color:var(--accent)}#railNext:hover:not(:disabled) svg{transform:translateX(2px)}#railPrev:hover:not(:disabled) svg{transform:translateX(-2px)}}
.rn-btn:active:not(:disabled){transform:scale(.94)}
.dots{display:flex;gap:6px}
.dots button{all:unset;cursor:pointer;width:6px;height:6px;border-radius:99px;corner-shape:round;background:var(--line);transition:width .25s,background .25s}
.dots button[aria-current="true"]{width:18px;background:var(--ink)}
.arrow{width:40px;height:40px;border-radius:99px;corner-shape:round;border:1px solid var(--line);background:none;color:var(--ink);cursor:pointer;display:grid;place-items:center;transition:background .2s,opacity .2s}
.arrow:hover:not(:disabled){background:color-mix(in srgb,var(--accent) 12%,transparent);color:var(--accent)}
.arrow:disabled{opacity:.3;cursor:default}
.arrow svg{width:16px;height:16px}
.card{display:flex;flex-direction:column;gap:24px;scroll-snap-align:start;min-width:0}
.sw{padding-bottom:clamp(64px,8vw,104px)}
.card-txt{display:flex;flex-direction:column;min-width:0}
.card .co{font-size:14px;color:var(--muted);margin-bottom:6px}
.card :is(h2,h3){transition:color .25s ease;font-size:18px;font-weight:500;letter-spacing:0;line-height:1.3;text-wrap:pretty}
.card p{font-size:14px;color:var(--muted);line-height:1.6;margin-top:12px;max-width:52ch}

.band{--bp:clamp(56px,8vw,96px);padding-block:var(--bp)}
.band{position:relative}
.band::before{content:"";position:absolute;top:0;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,var(--line) 20%,var(--line) 80%,transparent)}
.split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2.3fr);gap:clamp(20px,4vw,48px)}
.split .k{font-size:18px;color:var(--muted);font-weight:400;letter-spacing:0}
.big{font-size:clamp(24px,2.6vw,34px);line-height:1.35;letter-spacing:-.01em;font-weight:400}
.plist{display:grid;gap:22px;margin-top:40px}
.plist :is(h3,h4){font-size:18px;font-weight:500;letter-spacing:0}
.plist-2{grid-template-columns:repeat(2,minmax(0,1fr));gap:28px 40px}
@media (max-width:620px){.plist-2{grid-template-columns:minmax(0,1fr)}}
.card.soon{cursor:default}
.card .img.thumb.soon-cover{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;overflow:hidden;text-align:center;background:radial-gradient(90% 110% at 50% 0%,#2C2C32 0%,#18181B 60%,#0F0F11 100%)}
.card .img.thumb.soon-cover::after{content:"";position:absolute;inset:0;border-radius:inherit;background:radial-gradient(60% 60% at 50% 50%,transparent,rgba(0,0,0,.55));pointer-events:none}
.card .soon-cover.has-img img{position:absolute;inset:0;filter:grayscale(1) brightness(.5) blur(1.5px)}
.card:hover .soon-cover.has-img img{transform:none;filter:grayscale(1) brightness(.5) blur(1.5px)}
/* ghost screens: faint, blurred device outlines standing in for the product */
.card .soon-cover .sc-ghost{position:absolute;inset:18% 16% -18%;display:flex;justify-content:center;align-items:flex-end;gap:5%;filter:blur(1.5px);opacity:.55}
.card .soon-cover .sc-ghost i{display:block;flex:0 0 24%;aspect-ratio:9/17;border-radius:18px;corner-shape:squircle;border:1px solid rgba(255,255,255,.16);background:linear-gradient(180deg,rgba(255,255,255,.09),rgba(255,255,255,0) 70%)}
.card .soon-cover .sc-ghost i:nth-child(2){flex-basis:28%;transform:translateY(-10%)}
.card .soon-cover .sc-lock{position:relative;z-index:2;display:grid;place-items:center;width:clamp(44px,4.4vw,54px);aspect-ratio:1;border-radius:50%;corner-shape:round;color:#fff;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.2);backdrop-filter:blur(8px);box-shadow:0 0 0 8px rgba(255,255,255,.03),0 12px 30px -12px rgba(0,0,0,.7)}
.card .soon-cover .sc-lock svg{width:42%;height:42%}
.card .soon-cover .sc-bar{position:relative;z-index:2;display:flex;flex-direction:column;align-items:center;gap:6px;font-family:inherit}
.card .soon-cover .sc-bar b{display:inline-flex;align-items:center;gap:8px;font-size:12px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:#fff}
.card .soon-cover .sc-bar b i{font-style:normal;display:inline-block;width:4px;height:4px;border-radius:50%;corner-shape:round;background:var(--accent);font-size:0}
.card .soon-cover .sc-bar small{font-size:12.5px;letter-spacing:.01em;color:rgba(238,241,251,.62)}
.plist p{font-size:15px;color:var(--muted);margin-top:4px}

.tst{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2.3fr);gap:clamp(20px,4vw,48px)}
.t-side{display:flex;flex-direction:column;gap:20px;align-items:flex-start}
.t-side h2{font-size:18px;color:var(--muted);font-weight:400;letter-spacing:0}
.arrow{width:34px;height:34px;border-radius:99px;corner-shape:round;border:1px solid var(--line);background:none;color:var(--ink);cursor:pointer;display:grid;place-items:center;transition:background .2s,border-color .2s,opacity .2s}
.arrow:hover:not(:disabled){background:color-mix(in srgb,var(--accent) 12%,transparent);border-color:color-mix(in srgb,var(--accent) 55%,transparent);color:var(--accent)}

.arrow svg{width:14px;height:14px}
.t-view{overflow:hidden;touch-action:pan-y;min-width:0}
.t-view:focus-visible{outline:2px solid var(--callout-line);outline-offset:6px;border-radius:4px;corner-shape:squircle}
.t-track{display:flex;gap:40px}
.t-card{flex:0 0 calc((100% - 40px)/2);min-width:0;margin:0;padding-left:20px;border-left:1px solid var(--line);display:flex;flex-direction:column;gap:18px;transition:opacity .6s}
.t-card[aria-hidden="true"]{opacity:.25}
.t-card blockquote{margin:0;font-size:16px;line-height:1.65;color:var(--ink)}
.t-person{display:flex;flex-direction:column;gap:2px}
.t-person .n{font-size:14px;font-weight:500;display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.t-person .r{font-size:13px;color:var(--muted)}

.foot{border-top:1px solid var(--line);padding-block:32px}
.foot .wrap{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap}
.foot p{font-size:16px;color:var(--ink)}
.foot nav{display:flex;gap:28px;font-size:15px;flex-wrap:wrap;align-items:center}
.foot nav a:hover,.foot nav button:hover{color:var(--accent)}
.foot nav button{all:unset;cursor:pointer;color:var(--ink)}

/* work page */
.page-h{padding-block:clamp(48px,7vw,80px) 36px}
.page-h h1{font-size:clamp(30px,3.4vw,42px)}
.grid3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:48px 26px;padding-bottom:120px}

/* about */
.ab-hero{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);gap:clamp(24px,5vw,64px);align-items:center;padding-block:clamp(48px,8vw,96px)}
.ab-hero h1{font-size:clamp(32px,4vw,44px)}
.ab-hero .tag{margin-top:10px;color:var(--muted);font-size:15.5px}
.city{--gold:#E6E7FF;--gold-line:#C9CBF7;--gold-ink:#1B1A4A;--gold-muted:#4B4F8A;position:relative;color:var(--ink);border-bottom:1px dashed var(--faint);cursor:default;outline-offset:3px}
.city-card{position:absolute;left:50%;bottom:calc(100% + 12px);width:220px;padding:14px 16px 16px;border-radius:18px;corner-shape:squircle;background:var(--gold);border:1px solid var(--gold-line);box-shadow:0 20px 44px -16px rgba(0,0,0,.6);display:flex;flex-direction:column;gap:4px;text-align:left;opacity:0;pointer-events:none;transform:translate(-50%,6px) scale(.97);transform-origin:50% 100%;transition:opacity .2s,transform .3s cubic-bezier(.34,1.56,.64,1);z-index:5}
.city-card::after{content:"";position:absolute;left:50%;top:100%;width:10px;height:10px;background:var(--gold);border-right:1px solid var(--gold-line);border-bottom:1px solid var(--gold-line);transform:translate(-50%,-5px) rotate(45deg)}
.city:hover .city-card,.city:focus .city-card{opacity:1;transform:translate(-50%,0) scale(1)}
.gw{width:100%;height:auto;color:var(--gold-ink);margin-bottom:8px}
.cc-t{font-size:14px;font-weight:600;color:var(--gold-ink)}
.cc-d{font-size:12.5px;line-height:1.45;color:var(--gold-muted)}
@media (prefers-reduced-motion:reduce){.city-card{transition:opacity .2s;transform:translate(-50%,0)}}
.tools{margin-top:28px}
.tools .row{display:flex;gap:10px;margin:12px 0 0;padding:0;list-style:none;flex-wrap:wrap}
.tools .ic{width:38px;height:38px;border-radius:10px;corner-shape:squircle;overflow:hidden;box-shadow:0 0 0 1px var(--line)}
.tools .ic img{display:block;width:100%;height:100%}
.tools .ic.inset img{transform:scale(1.143)}
.tools .ic{transition:transform .35s cubic-bezier(.34,1.56,.64,1);cursor:default}
.tools .ic:hover{transform:rotate(-10deg) translateY(-3px) scale(1.06)}
.tools .ic:nth-child(even):hover{transform:rotate(10deg) translateY(-3px) scale(1.06)}
@media (prefers-reduced-motion:reduce){.tools .ic,.tools .ic:hover{transition:none;transform:none}}
.portrait{position:relative;margin:0;width:min(340px,100%);aspect-ratio:4/5;justify-self:end;border-radius:26px;corner-shape:squircle;overflow:hidden;
  background:var(--surface);box-shadow:0 0 0 1px var(--line),0 30px 60px -30px rgba(0,0,0,.6);isolation:isolate}
.portrait::before{content:"";position:absolute;inset:auto -30% -40% -30%;height:70%;z-index:-1;background:radial-gradient(closest-side,color-mix(in srgb,var(--accent) 18%,transparent),transparent)}
.portrait img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 50%;
  filter:grayscale(1) contrast(1.08) brightness(.92);transition:filter .6s ease,scale .8s cubic-bezier(.22,.8,.25,1)}
.portrait::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,transparent 55%,color-mix(in srgb,var(--bg) 55%,transparent));transition:opacity .6s}
.portrait:hover img{filter:none;scale:1.03}
.portrait:hover::after{opacity:0}
.pt-tag{position:absolute;left:14px;bottom:14px;z-index:1;font-size:12px;padding:5px 10px;border-radius:999px;corner-shape:round;background:color-mix(in srgb,var(--bg) 70%,transparent);backdrop-filter:blur(6px);color:var(--ink);transition:opacity .4s}
.portrait:hover .pt-tag{opacity:0}

@media (hover:none){.pt-tag{display:none}}
@media (prefers-reduced-motion:reduce){.portrait img{transition:none}}
.journey{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.6fr);gap:clamp(24px,5vw,64px);align-items:center}
/* journey collage: polaroids taped to a dotted moodboard; they sway gently, hover pulls one off the board */
.collage{position:relative;aspect-ratio:1/1.16;max-width:100%;margin:0;padding:0;list-style:none;border:1px solid var(--line);border-radius:20px;corner-shape:squircle;
  background:radial-gradient(circle,var(--line) 1.2px,transparent 1.4px) 0 0/18px 18px,var(--surface)}
.pola{position:absolute;width:31.5%;padding:6px 6px 0;background:var(--print);border-radius:4px;corner-shape:squircle;cursor:pointer;
  box-shadow:0 1px 2px rgba(0,0,0,.18),0 14px 28px -18px rgba(0,0,0,.6);
  rotate:var(--r);transform-origin:50% 0;animation:sway 6s ease-in-out infinite alternate;animation-delay:var(--d);
  transition:scale .4s cubic-bezier(.22,.8,.25,1),rotate .4s cubic-bezier(.22,.8,.25,1),box-shadow .3s}
.pola::before{content:"";position:absolute;top:-8px;left:50%;width:46px;height:16px;translate:-50% 0;rotate:var(--t);
  background:color-mix(in srgb,var(--accent) 55%,transparent);box-shadow:0 1px 1px rgba(0,0,0,.08);z-index:1;
  mask:linear-gradient(90deg,transparent 0 2px,#000 2px calc(100% - 2px),transparent 0)}
@keyframes sway{from{rotate:calc(var(--r) - .9deg)}to{rotate:calc(var(--r) + .9deg)}}
.pola .ph{aspect-ratio:1/1;border-radius:2px;background:linear-gradient(160deg,var(--card),var(--card2));overflow:hidden;position:relative}
.pola .ph img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.pola .cap{margin:0;min-height:50px;display:flex;align-items:center;justify-content:center;text-align:center;padding:6px 4px 8px;font-family:"Caveat","Segoe Print","Bradley Hand",cursive;font-size:clamp(13px,1.2vw,16px);line-height:1.05;color:#2B2A33;text-wrap:balance}
.pola:hover,.pola:focus-visible{animation:none;rotate:0deg;scale:1.6;box-shadow:0 2px 4px rgba(0,0,0,.18),0 26px 44px -18px rgba(0,0,0,.65);outline:none}
.pola:focus-visible .ph{outline:2px solid var(--callout-line);outline-offset:2px}
.pola.q1{left:2%;top:6%;--r:-4deg;--t:-4deg;--d:-1s}
.pola.q2{left:66.5%;top:8%;--r:3deg;--t:3deg;--d:-3s}
.pola.q3{left:16%;top:53%;--r:3deg;--t:-2deg;--d:-2s}
.pola.q4{left:52%;top:56%;--r:-3deg;--t:5deg;--d:-4s}
.pola.q5{left:34.5%;top:3%;--r:-1deg;--t:-3deg;--d:-5s}
@media (prefers-reduced-motion:reduce){.pola{animation:none;transition:none}}
.journey h2{font-size:clamp(24px,2.8vw,30px);margin-bottom:18px}
.journey .txt{display:grid;gap:14px;color:var(--muted);font-size:16px;line-height:1.75;max-width:62ch}
.journey .txt strong{color:var(--ink);font-weight:500}
.journey{align-items:start}
.collage{position:sticky;top:calc(env(safe-area-inset-top,0px) + 96px)}
.j-close{margin-top:32px;padding-top:24px;border-top:1px solid var(--line);font-size:clamp(19px,2vw,22px);line-height:1.45;font-weight:500;color:var(--ink);max-width:40ch}
.j-close span{display:block;color:var(--muted);font-weight:400}
.love{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2.3fr);gap:clamp(20px,4vw,48px)}
.love-intro h2{font-size:18px;font-weight:500;letter-spacing:0;margin-bottom:10px;color:var(--ink)}
.love-intro p{color:var(--muted);font-size:15.5px;line-height:1.7;max-width:34ch}
.love-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(24px,3vw,40px)}
.hob{display:flex;flex-direction:column;gap:18px;min-width:0}
.hob h3{font-size:clamp(20px,2vw,24px);font-weight:500;line-height:1.25}
.hob-ph{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-top:4px}
.hob-ph.one{grid-template-columns:minmax(0,1fr)}
.hob-ph.one .hp{aspect-ratio:1/1}
.hp{aspect-ratio:1/1;border-radius:14px;corner-shape:squircle;background:linear-gradient(160deg,var(--card),var(--card2));display:grid;place-items:center;overflow:hidden;position:relative}
.hp span{font-size:11.5px;color:var(--card-ink)}
.hp img,.hp video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hob-tag{align-self:flex-start;font-size:13px;letter-spacing:.02em;color:var(--muted);padding:5px 11px;border:1px solid var(--line);border-radius:999px;corner-shape:round}
.hob-q{margin:0;font-size:clamp(22px,2.2vw,28px);font-weight:500;line-height:1.3;letter-spacing:-.01em;color:var(--ink);text-wrap:balance}
.hob-q .qm{color:var(--faint)}
.hob-q cite{display:block;margin-top:10px;font-style:normal;font-size:14px;font-weight:400;letter-spacing:.01em;color:var(--muted)}
.hob-note{color:var(--muted);font-size:15.5px;line-height:1.7;max-width:44ch}
.pill-link{display:inline-flex;align-items:center;gap:8px;font-size:14px;padding:8px 14px;border:1px solid var(--line);border-radius:10px;corner-shape:squircle;color:var(--ink)}
.dq{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2.3fr);gap:clamp(20px,4vw,48px)}
.dq-item{grid-area:1/1;margin:0;opacity:0;transform:translateY(8px);transition:opacity .6s,transform .6s cubic-bezier(.22,.8,.25,1);pointer-events:none}
.dq-item.on{opacity:1;transform:none;pointer-events:auto}
.dq-item blockquote{margin:0;font-size:clamp(20px,2.1vw,26px);font-weight:400;line-height:1.35;letter-spacing:-.01em;color:var(--ink);max-width:44ch;text-wrap:balance}
.dq-item figcaption{margin-top:10px;font-size:14px;color:var(--muted)}
.dq-dots{grid-area:2/1;display:flex;gap:8px;margin-top:18px}

.dq-dots button{all:unset;cursor:pointer;width:6px;height:6px;border-radius:99px;corner-shape:round;background:var(--line);transition:width .3s,background .3s}
.dq-dots button[aria-selected="true"]{width:20px;background:var(--ink)}
.dq-dots button:focus-visible{outline:2px solid var(--callout-line);outline-offset:3px}
@media (prefers-reduced-motion:reduce){.dq-item{transition:none}}
.phil{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2.3fr);gap:clamp(20px,4vw,48px)}
.phil-intro h2{font-size:18px;font-weight:500;letter-spacing:0;color:var(--ink);margin-bottom:10px}
.phil-intro p{color:var(--muted);font-size:15.5px;line-height:1.7;max-width:36ch}
.phil-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:clamp(24px,4vw,56px)}
.pp{display:grid;grid-template-columns:44px minmax(0,1fr);column-gap:18px;align-items:start;align-content:start;padding-block:26px;border-top:1px solid var(--line);min-width:0}
.pp:nth-child(-n+2){border-top:0;padding-top:0}
.pp-ic{grid-row:1/3;width:44px;height:44px;border-radius:14px;corner-shape:squircle;display:grid;place-items:center;color:var(--accent);
  background:color-mix(in srgb,var(--accent) 12%,transparent);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--accent) 28%,transparent);
  transition:transform .35s cubic-bezier(.34,1.56,.64,1)}
.pp-ic svg{width:22px;height:22px}
.pp:hover .pp-ic{transform:rotate(-8deg) scale(1.06)}
.pp:nth-child(even):hover .pp-ic{transform:rotate(8deg) scale(1.06)}
.pp h3{font-size:17px;font-weight:500;letter-spacing:0;color:var(--ink);margin:2px 0 6px}
.pp p{color:var(--muted);font-size:15px;line-height:1.65}
@media (prefers-reduced-motion:reduce){.pp-ic{transition:none}.pp:hover .pp-ic{transform:none}}
@media (max-width:1100px){.pp{grid-template-columns:minmax(0,1fr)}.pp-ic{grid-row:auto;width:38px;height:38px;margin-bottom:12px}.pp p{font-size:14px}.phil{grid-template-columns:minmax(0,.8fr) minmax(0,2.3fr)}}

/* case study */
.cs-cover{padding-block:clamp(40px,6vw,72px) 0}
.cs-cover .back{display:inline-flex;align-items:center;gap:12px;margin-bottom:36px;font-size:14px;letter-spacing:.01em;color:var(--muted);text-decoration:none}
.back .b-ic{width:36px;height:36px;border-radius:50%;corner-shape:round;border:1px solid var(--line);background:var(--surface);display:grid;place-items:center;color:var(--ink);transition:border-color .2s,background .2s}
.back .b-ic svg{width:16px;height:16px;transition:transform .25s ease}
.back .b-all{color:var(--ink);font-weight:600}
.back .b-sep{color:var(--faint)}
.back .b-cur{color:var(--muted);max-width:40vw;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.back:hover .b-ic{border-color:color-mix(in srgb,var(--accent) 55%,transparent);background:color-mix(in srgb,var(--accent) 12%,transparent);color:var(--accent)}.back:hover .b-all,.back:hover :is(b,strong){color:var(--accent)}
.back:hover .b-ic svg{transform:translateX(-3px)}
.back:focus-visible{outline:none}.back:focus-visible .b-ic{outline:2px solid var(--accent);outline-offset:2px}
@media (prefers-reduced-motion:reduce){.back .b-ic svg{transition:none}}
.cs-cover .co{font-size:14px;color:var(--muted)}
.cs-cover h1{font-size:clamp(30px,4.4vw,48px);margin-top:8px;max-width:24ch}
.cs-cover .img{margin-top:36px;aspect-ratio:16/8}
.cs{padding-block:40px 40px}
.body{min-width:0}
.body .t,.body .intro,.body .meta,.body .chal,.body .learn,.body .own,.body .stats,.body .resp{max-width:720px}
.topics{position:sticky;top:calc(env(safe-area-inset-top,0px) + 64px);z-index:18;margin-bottom:8px;isolation:isolate}
/* full-bleed backdrop so the bar spans the window like the header, instead of a darker box inside the column */
.topics::before{content:"";position:absolute;top:0;bottom:0;left:50%;width:100vw;transform:translateX(-50%);z-index:-1;background:color-mix(in srgb,var(--bg) 97%,transparent);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}
.tp-in{display:flex;align-items:center;gap:14px;padding-block:10px}
.tp-lbl{flex:none;font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--faint)}
.sn-list{list-style:none;margin:0;padding:2px;display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;min-width:0;padding-left:10px}
.sn-list.fl{-webkit-mask:linear-gradient(90deg,transparent,#000 24px);mask:linear-gradient(90deg,transparent,#000 24px)}
.sn-list.fr{-webkit-mask:linear-gradient(90deg,#000 calc(100% - 40px),transparent);mask:linear-gradient(90deg,#000 calc(100% - 40px),transparent)}
.sn-list.fl.fr{-webkit-mask:linear-gradient(90deg,transparent,#000 24px,#000 calc(100% - 40px),transparent);mask:linear-gradient(90deg,transparent,#000 24px,#000 calc(100% - 40px),transparent)}
.sn-list::-webkit-scrollbar{display:none}
.sn-list li{flex:none}
.sn-list a{display:flex;align-items:center;gap:7px;padding:7px 12px;border-radius:999px;corner-shape:round;border:1px solid var(--line);font-size:13.5px;color:var(--muted);white-space:nowrap;transition:background .2s,color .2s,border-color .2s}
.sn-list a span{font-variant-numeric:tabular-nums;font-size:11.5px;color:var(--faint)}
.sn-list a:hover{color:var(--accent);border-color:color-mix(in srgb,var(--accent) 55%,transparent);background:color-mix(in srgb,var(--accent) 8%,transparent)}
.sn-list a.on{background:var(--ink);color:var(--bg);border-color:var(--ink)}
.sn-list a.on span{color:color-mix(in srgb,var(--bg) 60%,var(--ink))}
.sn-list a:focus-visible{outline:2px solid var(--callout-line);outline-offset:2px}
.readbar{position:absolute;left:0;right:0;bottom:-1px;height:2px;pointer-events:none}
.readbar i{display:block;height:100%;width:0;background:var(--accent);transition:width .1s linear}
.meta{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:28px}
.meta .label{font-size:11.5px;margin-bottom:8px;display:block}
.meta ul{list-style:none;margin:0;padding:0;display:grid;gap:10px;font-size:14px;color:var(--muted)}
.meta .grp+.grp{margin-top:22px}
.intro{margin-top:48px;color:var(--muted);font-size:17px;line-height:1.75}
.part{padding-top:clamp(64px,8vw,96px);scroll-margin-top:130px}
.part > .label{display:block;padding-bottom:22px;margin-bottom:32px;font-size:15px;letter-spacing:.02em;background:linear-gradient(90deg,var(--line),transparent) left bottom/100% 1px no-repeat}
.part h2{font-size:clamp(26px,2.6vw,34px);margin-bottom:18px}
.part p.t{color:var(--muted);font-size:17px;line-height:1.75}
.part p.t + p.t{margin-top:12px}
.chal{display:grid;gap:22px}
.chal h4{font-size:15px;font-weight:500;display:flex;gap:10px;align-items:center}
.chal h4 svg{width:15px;height:15px;color:var(--callout-line);flex:none}
.chal p{font-size:14px;color:var(--muted);margin-top:4px;padding-left:25px}
.resp + .resp{margin-top:64px}
.resp h3{font-size:clamp(21px,2.3vw,25px);margin-bottom:18px}
.pill{display:inline-block;font-size:12px;padding:1px 8px;border-radius:4px;corner-shape:squircle;margin-bottom:8px;font-weight:400}
.pill.prev{color:var(--bad);background:color-mix(in srgb,var(--bad) 14%,transparent)}
.pill.new{color:var(--good);background:color-mix(in srgb,var(--good) 14%,transparent)}
.resp h4{font-size:17px;font-weight:400;margin-bottom:8px}
.stage + .stage{margin-top:32px}
.stage .img{margin-top:16px}
.principle{margin-top:16px;background:var(--callout);border-left:2px solid var(--callout-line);padding:12px 16px;font-size:14px;font-style:italic;color:var(--muted)}
.cap{margin-top:10px;font-size:13px;color:var(--muted)}
.cap strong{display:block;font-size:14px}
.stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.stat{background:var(--surface);border:1px solid var(--line);border-radius:12px;corner-shape:squircle;padding:18px;display:flex;flex-direction:column;gap:6px}
.stat .n{font-size:clamp(28px,3.2vw,36px);font-weight:400;letter-spacing:-.02em;color:var(--todo);line-height:1}
.stat .k{font-size:13px;color:var(--muted)}
.stat .src{font-family:var(--mono);font-size:10.5px;color:var(--faint);text-transform:uppercase;letter-spacing:.05em}
.own{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.learn{display:grid;gap:18px}
.learn h4{font-size:15.5px;font-weight:500}
.learn p{font-size:14px;color:var(--muted);margin-top:4px}
.next{display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:24px;row-gap:6px;align-items:center;border-top:1px solid var(--line);padding-block:clamp(36px,5vw,56px);text-decoration:none;color:var(--ink)}
.next .nx-k{grid-column:1;font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--faint)}
.next .nx-t{grid-column:1;font-size:clamp(22px,2.6vw,30px);font-weight:500;letter-spacing:-.015em;line-height:1.25;transition:color .25s ease}
.next .nx-d{grid-column:1;max-width:60ch;font-size:15px;line-height:1.55;color:var(--muted)}
.next .nx-go{position:relative;overflow:hidden;grid-column:2;grid-row:1/4;display:grid;place-items:center;width:56px;height:56px;border-radius:50%;corner-shape:round;border:1px solid var(--line);color:var(--ink);background:transparent;transition:background .35s ease,border-color .35s ease,color .35s ease}
.next .nx-go svg{position:absolute;width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;transition:transform .45s cubic-bezier(.65,0,.35,1),opacity .3s ease}
.next .nx-go .a2{transform:translateX(-28px);opacity:0}
@media (hover:hover){
  .next:hover .nx-t{color:var(--accent)}
  .next:hover .nx-go{border-color:color-mix(in srgb,var(--accent) 55%,transparent);background:color-mix(in srgb,var(--accent) 12%,transparent);color:var(--accent)}
  .next:hover .nx-go .a1{transform:translateX(28px);opacity:0}
  .next:hover .nx-go .a2{transform:none;opacity:1}
}
.next:focus-visible{outline:none}.next:focus-visible .nx-go{outline:2px solid var(--accent);outline-offset:3px}
@media (max-width:620px){.next .nx-go{width:44px;height:44px}.next .nx-d{font-size:14px}}
@media (prefers-reduced-motion:reduce){.next .nx-go,.next .nx-go svg,.next .nx-t{transition:none}}

@media (max-width:900px){
  .grid3{grid-template-columns:repeat(2,minmax(0,1fr))}
  .cs{grid-template-columns:minmax(0,1fr)}
  .toc{display:none}
}
@media (max-width:720px){
  .collage{position:relative;top:auto;width:min(100%,420px);margin-inline:auto}
  .split,.tst,.ab-hero,.journey,.phil,.meta,.stats,.own,.love,.love-grid,.dq,.phil-grid{grid-template-columns:minmax(0,1fr)}
  .pp:nth-child(2){border-top:1px solid var(--line);padding-top:26px}
  .rail{grid-auto-columns:minmax(240px,82%)}
  .t-card{flex-basis:100%}
  .t-side{flex-direction:row;justify-content:space-between;align-items:center;width:100%}
  .portrait{order:-1;width:min(260px,70%);justify-self:start}
}
@media (max-width:520px){
  .grid3{grid-template-columns:minmax(0,1fr)}
  .top nav{gap:18px}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important}html{scroll-behavior:auto}}

/* ===== one type rhythm across the site ===== */
:root{--lh-body:1.7;--ls-body:0.08px;--lh-head:1.22;--ls-head:-0.4px}
body{line-height:var(--lh-body);letter-spacing:var(--ls-body)}
#app :is(p,dd,li,blockquote,figcaption,td,th){line-height:var(--lh-body);letter-spacing:var(--ls-body)}
#app :is(h1,h2,h3,h4){line-height:var(--lh-head);letter-spacing:var(--ls-head)}
/* UI elements keep compact metrics */
#app :is(.label,.fr-head,.lp-k,.tp-lbl,.sk-lbl,.ch-k,.glance dt,.pdw dt,.media-kind){letter-spacing:.07em;line-height:1.4}
#app :is(.sn-list li,.skills li,.skills2 li,.tools li,.chips,.games li,.pill-link,.hob-tag,.cs-row li,.collage li,.cap,.rp,.pola,.city-card *,.t-person *,.foot *,.top *){line-height:1.35}
#app .cap{line-height:1.05;letter-spacing:0}

.shot{margin:0 0 16px}
.shot img,.shot video{display:block;width:100%;height:auto;border-radius:18px;corner-shape:squircle;border:1px solid var(--line);background:#18181B}
.shot figcaption{margin-top:10px;font-size:13.5px;line-height:1.55;color:var(--muted)}
.hero-shot{margin-top:40px}
.hero-shot video{display:block;width:100%;height:auto;aspect-ratio:16/9;border-radius:24px;corner-shape:squircle;border:1px solid var(--line);background:#0B1240;object-fit:cover}

.paper{list-style:none;margin:28px 0 0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;position:relative}
.paper li{padding:16px;border-radius:14px;corner-shape:squircle;border:1px dashed color-mix(in srgb,var(--bad) 45%,var(--line));background:var(--surface);display:flex;flex-direction:column;gap:4px}
.paper b{font-size:14.5px;font-weight:500;color:var(--ink)}
.paper em{font-style:normal;font-size:13px;color:var(--muted);line-height:1.5}
.paper .pk{font-size:11.5px;letter-spacing:.07em;text-transform:uppercase;color:var(--faint)}

.levels{list-style:none;margin:28px 0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.levels li{position:relative;padding:18px;border-radius:18px;corner-shape:squircle;border:1px solid var(--line);background:var(--surface);display:flex;flex-direction:column;gap:8px}
.levels li:not(:last-child)::after{content:"→";position:absolute;right:-10px;top:24px;color:var(--accent);font-size:14px;background:var(--bg);line-height:1;padding:2px 0}
.lv-ring{width:26px;height:26px;flex:none}
.lv-ring circle{fill:none;stroke-width:3}
.lv-ring .bg{stroke:var(--line)}.lv-ring .fg{stroke:var(--accent);stroke-linecap:round}
.levels b{font-size:15px;font-weight:600;color:var(--ink)}
@media (max-width:900px){.levels{grid-template-columns:repeat(2,minmax(0,1fr))}.levels li::after{display:none}}
@media (max-width:520px){.levels{grid-template-columns:minmax(0,1fr)}}
.chipflow{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin:12px 0 12px}
.chipflow span{font-size:13px;padding:6px 12px;border-radius:999px;corner-shape:round;border:1px solid var(--line);background:var(--surface);color:var(--ink)}
.chipflow i{font-style:normal;color:var(--accent);font-size:13px}
.rscale{display:flex;flex-wrap:wrap;gap:5px;margin:12px 0 4px;align-items:center}
.rscale span{min-width:36px;height:36px;padding:0 8px;display:grid;place-items:center;border-radius:12px;corner-shape:squircle;border:1px solid var(--line);background:var(--surface);font-size:14px;font-weight:600;color:var(--ink)}
.rscale span.cd{font-weight:500;font-size:12.5px;color:var(--muted)}
.changes.two{grid-template-columns:repeat(2,minmax(0,1fr))}
@media (max-width:620px){.changes.two{grid-template-columns:minmax(0,1fr)}}
.live i{margin-left:4px}
.rs-cap{display:block;font-size:12.5px;color:var(--faint);margin:4px 0 12px}

/* ===== CAP clip player ===== */
:root{--pw:clamp(270px,calc((100vh - 270px) * .4621),370px)}
.dec.ph,.ph-split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.8fr);gap:clamp(28px,4vw,56px);align-items:start}
.dec.ph .dec-m,.ph-split>.clips{position:sticky;top:calc(env(safe-area-inset-top,0px) + 112px);justify-self:center}
.dec.ph .dec-m{display:flex;justify-content:center;width:100%}
.clips{position:relative}
.sol-tag{display:inline-flex;align-items:center;gap:8px;margin:0 0 12px 4px;font-size:12px;letter-spacing:.07em;text-transform:uppercase;color:var(--accent);font-weight:600}
.sol-tag i{width:8px;height:8px;border-radius:50%;corner-shape:round;background:var(--accent);box-shadow:0 0 0 4px color-mix(in srgb,var(--accent) 22%,transparent)}
.pv{outline:1.5px solid color-mix(in srgb,var(--accent) 55%,transparent);outline-offset:5px}
.cue{margin:18px 4px 0;display:flex;align-items:flex-start;gap:10px;font-size:14px;line-height:1.5;color:var(--ink);min-height:3em}
.cue b{flex:none;width:7px;height:7px;margin-top:.55em;border-radius:50%;corner-shape:round;background:var(--accent)}
.cue.in{animation:cueIn .35s ease}
@keyframes cueIn{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.cue.in{animation:none}}
.levels.two{grid-template-columns:repeat(2,minmax(0,1fr))}.levels.two li::after{display:none}
.clips{width:var(--pw)}
.pv{position:relative;padding:7px;border-radius:36px;corner-shape:squircle;background:linear-gradient(145deg,#2E2E33,#111113);box-shadow:0 24px 48px -24px rgba(0,0,0,.55),0 0 0 1px rgba(255,255,255,.06) inset}
.pv video{display:block;width:100%;height:auto;aspect-ratio:780/1688;border-radius:29px;corner-shape:squircle;background:#F6F6F6;cursor:pointer;object-fit:cover}
.cl-pp,.cl-ex{position:absolute;bottom:18px;width:34px;height:34px;border-radius:50%;corner-shape:round;border:0;display:grid;place-items:center;background:rgba(0,0,0,.6);color:#fff;cursor:pointer;opacity:0;transition:opacity .2s;backdrop-filter:blur(4px)}
.cl-pp{left:18px}.cl-ex{right:18px}
.cl-pp svg,.cl-ex svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.cl-pp .i-pl{fill:currentColor;stroke:none;display:none}
.clips.paused .cl-pp .i-pl{display:block}.clips.paused .cl-pp .i-pa{display:none}
.pv:hover .cl-pp,.pv:hover .cl-ex,.cl-pp:focus-visible,.cl-ex:focus-visible,.clips.paused .cl-pp{opacity:1}
@media (hover:none){.cl-pp,.cl-ex{opacity:1}}
.cl-pp:focus-visible,.cl-ex:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.cl-bar{position:absolute;left:30px;right:30px;bottom:10px;height:2px;border-radius:2px;background:rgba(255,255,255,.18);overflow:hidden}
.cl-bar i{display:block;height:100%;background:var(--accent);transform:scaleX(0);transform-origin:left}
.vlb{position:fixed;inset:0;z-index:200;display:none;align-items:center;justify-content:center;background:rgba(0,0,0,.9);backdrop-filter:blur(6px);padding:24px}
.vlb.on{display:flex}
.vlb video{height:min(92vh,1688px);max-width:100%;width:auto;aspect-ratio:780/1688;border-radius:24px;corner-shape:squircle;background:#000}
.vlb-x{position:absolute;top:16px;right:16px;width:44px;height:44px;border-radius:50%;corner-shape:round;border:1px solid rgba(255,255,255,.25);background:rgba(255,255,255,.08);color:#fff;font-size:18px;cursor:pointer}
@media (max-width:980px){.dec.ph,.ph-split{grid-template-columns:minmax(0,1fr)}.ph-split>.clips,.dec.ph .dec-m{position:static}.clips{width:min(100%,340px)}}
@media (max-width:520px){.levels.two{grid-template-columns:minmax(0,1fr)}}
.mini3{list-style:none;margin:28px 0 0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-top:1px solid var(--line)}
.mini3 li{padding:20px 24px 4px 0;display:flex;flex-direction:column;gap:6px}
.mini3 li+li{padding-left:24px;border-left:1px solid var(--line)}
.mini3 b{font-size:15.5px;font-weight:500;color:var(--ink);display:flex;align-items:center;gap:10px}
.mini3 p{margin:0;font-size:14.5px;line-height:1.6;color:var(--muted);max-width:34ch}
.mini3.bad b::before{content:"✕";flex:none;width:18px;height:18px;border-radius:50%;corner-shape:round;display:grid;place-items:center;font-size:9px;color:var(--bad);background:color-mix(in srgb,var(--bad) 14%,transparent)}
.mini3 .m-ic{color:var(--accent);margin-bottom:2px}.mini3 .m-ic svg{width:20px;height:20px}
#s-why{padding-top:clamp(24px,3vw,40px)}
#s-why .mini3{border-top:0;margin-top:0}
#s-why .mini3 li{padding-top:4px}
@media (max-width:760px){.mini3{grid-template-columns:minmax(0,1fr)}.mini3 li+li{padding-left:0;border-left:0;border-top:1px solid var(--line)}.mini3 li{padding:16px 0}}
.mini3.fld p{color:var(--ink)}
.mini3.fld .f-ar{color:var(--accent);margin-right:8px}
.ftest{margin:28px 0 0;font-size:clamp(17px,1.6vw,20px);line-height:1.5;color:var(--muted)}
.sc-k{margin:0 0 10px;font-size:12px;letter-spacing:.07em;text-transform:uppercase;color:var(--faint)}
.also-k{margin-top:56px}
.mini3.also{margin-top:0}
.mini3.also:has(> li:only-child){grid-template-columns:minmax(0,1fr)}
.mini3.also > li:only-child p{max-width:68ch}
.mini3.also .chipflow{margin:10px 0 12px}
.gl-row{margin:0;display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);gap:0}
.gl-row div{padding:4px 20px 4px 0}.gl-row div+div{padding-left:20px;border-left:1px solid var(--line)}
.gl-row dt{font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--faint);margin-bottom:6px}
.gl-row dd{margin:0;font-size:14.5px;line-height:1.5;color:var(--ink)}
@media (max-width:900px){.gl-row{grid-auto-flow:row;grid-template-columns:repeat(2,minmax(0,1fr));row-gap:18px}.gl-row div+div{border-left:0;padding-left:0}}
.why-line{margin:28px 0 0;font-size:15px;line-height:1.7;color:var(--muted);max-width:78ch}
.wl-k{display:inline-block;margin-right:12px;font-size:12px;letter-spacing:.07em;text-transform:uppercase;color:var(--accent)}

/* ===== stacked solution cards ===== */
@media (min-width:981px){
.stack{position:relative;margin-top:36px}
.dec.ph.sk{position:sticky;top:calc(var(--stk-top,128px) + var(--i)*14px);z-index:calc(1 + var(--i));min-height:calc(100vh - var(--stk-top,128px) - 70px);box-sizing:border-box;align-items:center;margin:0 0 42vh;padding:clamp(24px,3vw,40px);border:1px solid var(--line);border-top:1px solid var(--line);border-radius:28px;corner-shape:squircle;background:var(--bg);box-shadow:0 -18px 40px -28px rgba(0,0,0,.35);transform-origin:50% 0;transition:transform .25s ease,filter .25s ease}
.dec.ph.sk:last-child{margin-bottom:0}
.dec.ph.sk .dec-m{position:static}
.dec.ph.sk .dec-txt>*{opacity:0;transform:translateY(18px);transition:opacity .6s ease,transform .6s ease}
.dec.ph.sk.in .dec-txt>*{opacity:1;transform:none}
.dec.ph.sk.in .dec-txt>*:nth-child(2){transition-delay:.12s}
.dec.ph.sk .clips{opacity:0;transform:translateY(24px) scale(.98);transition:opacity .7s ease .15s,transform .7s ease .15s}
.dec.ph.sk.in .clips{opacity:1;transform:none}
.dec.ph.sk.behind{filter:brightness(.97)}
:root{--pw:clamp(250px,calc((100vh - 300px) * .4621),350px)}
}
@media (min-width:981px) and (prefers-reduced-motion:reduce){.dec.ph.sk .dec-txt>*,.dec.ph.sk .clips{opacity:1;transform:none;transition:none}}
.lessons{margin-top:36px;align-items:stretch}
.l-tabs{gap:10px}
.l-tabs button{flex:1 1 0;display:flex;align-items:center}
.l-panels{display:flex;flex-direction:column;justify-content:center}
.lpanel .lp-k{margin-bottom:14px}
.lpanel h3{margin:0 0 16px}
.lpanel .lp-b{margin:0}
@media (max-width:760px){.l-tabs button{flex:none}}
.gp{color:var(--accent);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}
.gp:hover{text-decoration-thickness:2px}
a.gpl{color:var(--accent);text-decoration:none;border-bottom:1px solid color-mix(in srgb,var(--accent) 45%,transparent);padding-bottom:1px}
a.gpl:hover{border-bottom-color:var(--accent)}
.img.thumb{padding:0;background:#0B1240;border:0}
.img.thumb img{width:100%;height:100%;object-fit:cover;object-position:center;display:block}
.img.thumb img,.img.thumb .teaser{transition:transform .9s cubic-bezier(.22,.8,.25,1),opacity .45s ease,filter .45s ease}
.img.thumb .teaser{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transform:scale(1.06);filter:blur(6px)}
.img.thumb.playing .teaser{opacity:1;transform:scale(1);filter:none}
.card:hover .img.thumb img{transform:scale(1.04);filter:brightness(.85)}
.img.thumb .t-cta{position:absolute;left:16px;bottom:16px;display:inline-flex;align-items:center;gap:8px;padding:8px 14px;border-radius:999px;corner-shape:round;background:rgba(0,0,0,.66);backdrop-filter:blur(8px);color:#fff;font-size:13px;font-weight:500;opacity:0;transform:translateY(8px);transition:opacity .35s ease .1s,transform .35s ease .1s}
.card:hover .img.thumb .t-cta,.card:focus-visible .img.thumb .t-cta{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.img.thumb img,.img.thumb .teaser,.img.thumb .t-cta{transition:none}.card:hover .img.thumb img{transform:none}}

/* ===== landscape (desktop) solution cards ===== */
.dec.ph.land{grid-template-columns:minmax(0,.78fr) minmax(0,1.22fr)}
.clips.land{width:100%}
.clips.land .pv{padding:0;border-radius:18px;corner-shape:squircle;overflow:hidden;background:#202024;outline-offset:4px}
.clips.land .br-bar{display:flex;gap:6px;align-items:center;height:26px;padding:0 12px;background:#202024}
.clips.land .br-bar i{width:9px;height:9px;border-radius:50%;corner-shape:round;background:rgba(255,255,255,.22)}
.clips.land .pv video{aspect-ratio:1920/1048;border-radius:0;background:#F4F5F8}
.clips.land .cl-pp,.clips.land .cl-ex{bottom:14px}.clips.land .cl-pp{left:14px}.clips.land .cl-ex{right:14px}
.clips.land .cl-bar{left:0;right:0;bottom:0;border-radius:0}
.vlb video.land{height:auto;width:min(94vw,1600px);aspect-ratio:1920/1048}
@media (min-width:981px){.dec.ph.sk.land{align-items:center}}
@media (max-width:980px){.clips.land{width:100%}}

/* REX: text row on top, full-width video below */
.dec.ph.land{display:block;padding-block:56px}
.dec.ph.land .dec-m{position:static;margin-top:28px}
.dec.ph.land .pdw{grid-template-columns:repeat(3,minmax(0,1fr));gap:0;border-top:1px solid var(--line)}
.dec.ph.land .pdw div,.dec.ph.land .pdw .prob,.dec.ph.land .pdw .sol,.dec.ph.land .pdw .why{display:block;padding:16px 24px 16px 0;border-bottom:0}
.dec.ph.land .pdw div+div{padding-left:24px;border-left:1px solid var(--line)}
.dec.ph.land .pdw dt{margin-bottom:8px;padding-top:0}
.dec.ph.land .pdw dd{font-size:15px}
.dec.ph.land .clips.land .sol-tag{margin-left:0}
.clips.land .cue{justify-content:center;text-align:center;margin-top:16px}
@media (max-width:760px){
  .dec.ph.land{padding-block:40px}
  .dec.ph.land .pdw{grid-template-columns:minmax(0,1fr)}
  .dec.ph.land .pdw div+div{padding-left:0;border-left:0;border-top:1px solid var(--line)}
  .dec.ph.land .pdw div,.dec.ph.land .pdw .prob,.dec.ph.land .pdw .sol,.dec.ph.land .pdw .why{padding:14px 0}
  .dec.ph.land .dec-m{margin-top:20px}
  .clips.land .pv{border-radius:12px;corner-shape:squircle}
  .clips.land .br-bar{height:18px;padding:0 8px;gap:4px}.clips.land .br-bar i{width:6px;height:6px}
  .clips.land .cue{font-size:13px;justify-content:flex-start;text-align:left}
  .clips.land .cl-pp,.clips.land .cl-ex{width:30px;height:30px;bottom:10px}
  .clips.land .cl-pp{left:10px}.clips.land .cl-ex{right:10px}
  .vlb{padding:12px}
}
.dec.ph.land .pdw .sol,.dec.ph.land .pdw .why{padding-left:24px;border-left:1px solid var(--line)}
@media (max-width:760px){.dec.ph.land .pdw .sol,.dec.ph.land .pdw .why{padding-left:0;border-left:0}}
@media (min-width:761px){.dec.ph.land .clips.land{max-width:min(100%,calc((100vh - 290px) * 1.78));margin-inline:auto}}
@media (min-width:981px){
  .dec.ph.sk.land{display:flex;flex-direction:column;justify-content:flex-start;gap:0;min-height:0;height:calc(100vh - var(--stk-top,128px) - 20px);padding:22px 32px 18px;overflow:hidden}
  .dec.ph.sk.land .dec-head{margin-bottom:12px}
  .dec.ph.sk.land .pdw div,.dec.ph.sk.land .pdw .prob,.dec.ph.sk.land .pdw .sol,.dec.ph.sk.land .pdw .why{padding-top:12px;padding-bottom:4px}
  .dec.ph.sk.land .pdw dt{margin-bottom:6px}
  .dec.ph.sk.land .pdw dd{font-size:14px;line-height:1.55}
  .dec.ph.sk.land .chipflow{margin:8px 0}.dec.ph.sk.land .chipflow span{padding:4px 10px;font-size:12.5px}
  .dec.ph.sk.land .dec-m{flex:1;min-height:0;margin-top:24px;display:flex;justify-content:center;align-items:flex-start}
  .dec.ph.sk.land .dec-m>.clips{margin-top:0}
  .dec.ph.sk.land .clips.land{max-width:min(100%,calc(var(--vh-room,420px) * 1.83));margin-inline:auto}
  .dec.ph.sk.land .sol-tag{margin-bottom:8px}
  .dec.ph.sk.land .clips.land .cue{margin-top:8px;min-height:0}
}
@media (max-width:1100px){
  .dec.ph .pdw div,.dec.ph .pdw .prob,.dec.ph .pdw .sol,.dec.ph .pdw .why{grid-template-columns:minmax(0,1fr);gap:6px}
}

.mini3.also:has(> li:nth-child(2):last-child){grid-template-columns:repeat(2,minmax(0,1fr))}
@media (max-width:760px){.mini3.also:has(> li:nth-child(2):last-child){grid-template-columns:minmax(0,1fr)}}

.mob-tag{display:flex;margin:36px 0 18px}
.m3{display:grid;grid-template-rows:subgrid;grid-row:span 4;row-gap:0}
.m3 h4{margin:0 0 8px;font-size:16px;font-weight:500;color:var(--ink)}
.m3 p{margin:0 0 22px;font-size:14.5px;line-height:1.6;color:var(--muted)}
.m3 .clips.rm{width:100%;max-width:300px;margin:0 auto;display:grid;grid-template-rows:subgrid;grid-row:span 2}
.m3 .clips.rm .cue{align-self:start;min-height:0;margin-top:16px}
.clips.rm .pv video{aspect-ratio:680/1468}
@media (max-width:900px){.m3,.m3 .clips.rm{display:block}.m3 .clips.rm{max-width:300px;margin:0 auto}}
.mrows{display:grid;gap:0;border-top:1px solid var(--line)}
.mrow{display:grid;grid-template-columns:minmax(0,.75fr) minmax(0,1.25fr);gap:clamp(24px,4vw,56px);align-items:center;padding:clamp(32px,4vw,56px) 0;border-bottom:1px solid var(--line)}
.mr-t .dec-n{display:block;margin-bottom:10px}
.mr-t h3{margin:0 0 10px;font-size:clamp(18px,1.8vw,21px);font-weight:500;color:var(--ink)}
.mr-t p{margin:0;font-size:15px;line-height:1.65;color:var(--muted);max-width:40ch}
.mr-d{--dh:min(460px,62vh);display:flex;justify-content:center;align-items:flex-start;gap:clamp(16px,2.4vw,32px)}
.dvc{margin:0}
.dvc.tab{width:calc(var(--dh) * .749)}.dvc.pho{width:calc(var(--dh) * .463)}
.dvc .clips.rm{width:100%;max-width:none;margin:0}
.dvc .pv{border-radius:26px;corner-shape:squircle}.dvc.tab .pv{border-radius:24px;corner-shape:squircle;padding:8px}
.dvc .pv video{border-radius:20px;corner-shape:squircle}
.dvc.tab .pv video{aspect-ratio:900/1202}
.dvc .cue{font-size:12.5px;min-height:3.2em;margin-top:12px;justify-content:flex-start;text-align:left}
.dvc figcaption{margin-top:4px;font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--faint)}
@media (max-width:980px){.mrow{grid-template-columns:minmax(0,1fr)}.mr-t p{max-width:none}}
@media (max-width:620px){.mr-d{--dh:400px;gap:14px}.mr-d{justify-content:flex-start;overflow-x:auto;padding-bottom:4px}.dvc{flex:none}}
.mr-l{list-style:none;margin:16px 0 0;padding:0;display:grid;gap:14px}
.mr-l li{font-size:14.5px;line-height:1.6;color:var(--muted);padding-left:16px;position:relative}
.mr-l li::before{content:"";position:absolute;left:0;top:.62em;width:6px;height:6px;border-radius:50%;corner-shape:round;background:var(--accent)}
.mr-l b{color:var(--ink);font-weight:500}
.mrow .mr-d{--dh:min(520px,66vh)}
.mini3.bad:has(> li:nth-child(4)){grid-template-columns:repeat(4,minmax(0,1fr))}
@media (max-width:980px){.mini3.bad:has(> li:nth-child(4)){grid-template-columns:repeat(2,minmax(0,1fr))}.mini3.bad:has(> li:nth-child(4)) li:nth-child(3){padding-left:0;border-left:0}}
@media (max-width:760px){.mini3.bad:has(> li:nth-child(4)){grid-template-columns:minmax(0,1fr)}}
.changes:not(.two)>li:last-child:nth-child(odd){grid-column:1/-1}
.mini3.bad:has(> li:nth-child(5)){grid-template-columns:repeat(6,minmax(0,1fr))}.mini3.bad:has(> li:nth-child(5)) li{grid-column:span 2}.mini3.bad:has(> li:nth-child(5)) li:nth-child(n+4){grid-column:span 3;border-top:1px solid var(--line);padding-top:16px;margin-top:12px}.mini3.bad:has(> li:nth-child(5)) li:nth-child(4){padding-left:0;border-left:0}.mini3.bad:has(> li:nth-child(5)) li:nth-child(n+4) p{max-width:44ch}
@media (max-width:980px){.mini3.bad:has(> li:nth-child(5)){grid-template-columns:repeat(2,minmax(0,1fr))}.mini3.bad:has(> li:nth-child(5)) li,.mini3.bad:has(> li:nth-child(5)) li:nth-child(n+4){grid-column:auto}.mini3.bad:has(> li:nth-child(5)) li:nth-child(3){border-top:1px solid var(--line);padding-top:16px;margin-top:12px}.mini3.bad:has(> li:nth-child(5)) li:nth-child(4){padding-left:24px;border-left:1px solid var(--line)}.mini3.bad:has(> li:nth-child(5)) li:nth-child(5){grid-column:1/-1;padding-left:0;border-left:0}}
@media (max-width:760px){.mini3.bad:has(> li:nth-child(5)){grid-template-columns:minmax(0,1fr)}.mini3.bad:has(> li:nth-child(5)) li,.mini3.bad:has(> li:nth-child(5)) li:nth-child(n){grid-column:auto;padding:16px 0;margin-top:0;border-left:0}.mini3.bad:has(> li:nth-child(5)) li:first-child{border-top:0}}
@media (min-width:721px) and (max-width:1000px){
  .journey{grid-template-columns:minmax(0,1fr)}
  .collage{position:relative;top:auto;width:min(100%,460px);margin-inline:auto}
}
@media (min-width:721px) and (max-width:1000px){.love{grid-template-columns:minmax(0,1fr)}.love-intro{max-width:52ch}}
@media (max-width:900px){.gl-row div:last-child:nth-child(odd){grid-column:1/-1}}
@media (max-width:620px){.mr-d{flex-direction:column;align-items:center;overflow:visible;--dh:auto}.dvc.tab{width:100%}.dvc.pho{width:62%}}
/* device pair: equal height, labels on top, captions aligned */
.mr-d{align-items:flex-start}
.dvc{display:flex;flex-direction:column}
.dvc figcaption{order:-1;margin:0 0 10px 2px;font-size:11px;letter-spacing:.1em}
.dvc .pv,.dvc.tab .pv{padding:7px;border-radius:26px;corner-shape:squircle}
.dvc .pv video{border-radius:22px;corner-shape:squircle}
.dvc .cue{min-height:2.9em;margin-top:14px;font-size:13px}
@media (min-width:621px){.dvc.tab{width:calc((var(--dh) - 14px) * .7488 + 14px)}.dvc.pho{width:calc((var(--dh) - 14px) * .4632 + 14px)}}
@media (max-width:620px){.mr-d{align-items:center}.dvc.pho{align-self:center}}
.qline{list-style:none;margin:36px 0 40px;padding:0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:0 28px;position:relative}
.qline li{position:relative;display:flex;flex-direction:column;gap:10px;padding-top:2px}
.qline li:not(:last-child)::before{content:"";position:absolute;top:15px;left:40px;right:-20px;height:1px;background:linear-gradient(90deg,var(--accent),color-mix(in srgb,var(--accent) 25%,transparent))}
.qline .qn{width:30px;height:30px;font-size:13px;margin-bottom:6px;background:transparent;color:var(--accent);border:1.5px solid var(--accent)}
.qline b{font-size:17px;font-weight:500;line-height:1.35;color:var(--ink);letter-spacing:-.005em}
.qline .qa{display:flex;flex-direction:column;gap:2px;font-size:14px;line-height:1.5;color:var(--muted);text-decoration:none}
.qline .qa span{font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--faint)}
.qline .qa em{font-style:normal;font-size:12.5px;color:var(--accent);margin-top:2px}
.qline .qa:hover{color:var(--accent)}
@media (max-width:900px){
  .qline{grid-template-columns:minmax(0,1fr);gap:26px}
  .qline li{padding-left:46px}
  .qline .qn{position:absolute;left:0;top:0;margin:0}
  .qline li:not(:last-child)::before{top:38px;bottom:-22px;left:15px;right:auto;width:1px;height:auto;background:linear-gradient(180deg,var(--accent),color-mix(in srgb,var(--accent) 25%,transparent))}
}
@media (min-width:901px){
  .qline{grid-template-rows:auto auto 1fr;row-gap:0}
  .qline li{display:grid;grid-template-rows:subgrid;grid-row:span 3;gap:0}
  .qline .qn{margin-bottom:18px}
  .qline b{margin-bottom:16px}
  .qline .qa em{margin-top:auto;padding-top:10px}
}
.qline .qa{gap:4px}
.qline .qa span{margin-bottom:2px}
.qline .qa em{padding-top:8px}
.mini3.bad.num{counter-reset:pr}
.mini3.bad.num li{counter-increment:pr}
.mini3.bad.num b::before{content:counter(pr);font-size:10.5px;font-weight:600;color:#fff;background:var(--bad)}
.before{margin:36px 0 8px}
.bf-k{margin:0 0 12px;font-size:13px;color:var(--muted)}
.bf-k span{display:inline-block;margin-right:10px;font-size:11px;letter-spacing:.08em;text-transform:uppercase;padding:3px 8px;border-radius:999px;corner-shape:round;color:var(--bad);border:1px solid color-mix(in srgb,var(--bad) 45%,transparent)}
.bf-row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.bf-shot{position:relative;margin:0}
.bf-shot img{display:block;width:100%;height:auto;aspect-ratio:1919/910;object-fit:cover;object-position:top left;border-radius:12px;corner-shape:squircle;border:1px solid var(--line)}
.bf-c{display:block;margin-top:10px;font-size:13.5px;color:var(--muted)}
.pin{position:absolute;transform:translate(-50%,-50%);width:26px;height:26px;border-radius:50%;corner-shape:round;display:grid;place-items:center;font-style:normal;font-size:12.5px;font-weight:600;color:#fff;background:var(--bad);box-shadow:0 0 0 4px color-mix(in srgb,var(--bad) 28%,transparent),0 4px 10px rgba(0,0,0,.35)}
@media (max-width:760px){.bf-row{grid-template-columns:minmax(0,1fr)}.pin{width:22px;height:22px;font-size:11px}}
/* thumbnails: show full 16:9 frame, no edge cropping on hover */
.card .img,.img.thumb{aspect-ratio:16/9}
.img.thumb img,.img.thumb .teaser{object-fit:cover;object-position:center}
.img.thumb .teaser{transform:none}
.img.thumb.playing .teaser{transform:none}
.card:hover .img.thumb img{transform:none}
/* audit: touch targets */
.top nav a,.mono{display:inline-flex;align-items:center;min-height:44px}
.top nav{gap:clamp(8px,2vw,32px)}
.top nav a{padding:0 6px}
.dq-dots{gap:4px}
.dq-dots button{position:relative;margin:0 4px}
.dq-dots button::after{content:"";position:absolute;inset:-14px -6px}
@media (max-width:1100px){
  .foot nav{gap:4px 6px}
  .foot nav > a,.foot nav > span > button,.foot nav > .muted{display:inline-flex;align-items:center;min-height:44px;padding:0 10px}
  .foot nav{margin-left:-10px}
  .back{min-height:44px}
}
.todo{font-size:11px}
.pin,.mini3.bad.num b::before{background:#C0352F}
.pin{box-shadow:0 0 0 4px rgba(192,53,47,.3),0 4px 10px rgba(0,0,0,.35)}
.top-r{justify-self:end;display:flex;align-items:center;gap:8px}
.top-r .theme{justify-self:auto}
.cv{display:inline-flex;align-items:center;gap:6px;min-height:36px;padding:0 14px;border-radius:999px;corner-shape:round;border:1px solid var(--line);color:var(--ink);font-size:14px;font-weight:500;text-decoration:none;transition:border-color .2s,background .2s}
.cv svg{color:var(--muted);transition:transform .2s,color .2s}
.cv:hover{border-color:color-mix(in srgb,var(--ink) 35%,transparent);background:var(--surface)}
.cv:hover svg{color:var(--ink);transform:translate(1px,-1px)}
.cv:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.cv::after{content:"";position:absolute;inset:-4px 0}
.cv{position:relative}
.skip{position:fixed;left:16px;top:-60px;z-index:100;padding:10px 16px;border-radius:12px;corner-shape:squircle;background:var(--ink);color:var(--bg);font-size:14px;font-weight:500;text-decoration:none;transition:top .15s}.skip:focus{top:12px}#app:focus{outline:none}
.nav-cv{gap:5px}.nav-cv svg{opacity:.6;transition:transform .2s,opacity .2s}.nav-cv:hover svg{opacity:1;transform:translate(1px,-1px)}
@media (max-width:520px){.nav-cv svg{display:none}}
.hw-tl{position:relative;display:inline-flex;gap:2px;padding:4px;border:1px solid var(--line);border-radius:999px;corner-shape:round;background:var(--surface);max-width:100%;overflow-x:auto;scrollbar-width:none}
.hw-tl button{all:unset;position:relative;z-index:1;cursor:pointer;padding:9px 18px;border-radius:999px;corner-shape:round;font-size:14.5px;color:var(--muted);white-space:nowrap;transition:color .25s}
.hw-tl button:hover{color:var(--ink)}
.hw-tl button[aria-selected=true]{color:var(--bg)}
.hw-tl button:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.hw-ind{position:absolute;z-index:0;top:4px;bottom:4px;left:0;width:0;border-radius:999px;corner-shape:round;background:var(--ink);transition:transform .35s cubic-bezier(.22,.8,.25,1),width .35s cubic-bezier(.22,.8,.25,1)}
@keyframes hwIn{from{opacity:0;transform:translateY(6px)}}
@media (prefers-reduced-motion:reduce){.hw-ind{transition:none}}
.hm-ph img:not(:first-child){aspect-ratio:16/10}

@media (hover:hover){.hw-cap:has(li:hover) li:not(:hover){opacity:.45}}

#app .hw-lede{font-size:clamp(21px,2.1vw,28px);line-height:1.4;letter-spacing:-.012em;font-weight:400;color:var(--ink);max-width:34ch;text-wrap:pretty}
#app .hw-lede span{color:var(--muted)}

/* day / night switch */
.theme.dn{width:auto;height:auto;padding:0;border-radius:999px;corner-shape:round;background:none;position:relative}
.theme.dn:hover{background:none}
.theme.dn::after{content:"";position:absolute;inset:-8px -4px}
.dn-track{position:relative;display:block;width:56px;height:30px;border-radius:999px;corner-shape:round;overflow:hidden;
  background:linear-gradient(180deg,#1A1A1F,#232329);box-shadow:inset 0 0 0 1px rgba(255,255,255,.08),inset 0 2px 6px rgba(0,0,0,.45);transition:background .5s ease,box-shadow .5s ease}
.dn-knob{position:absolute;top:3px;left:3px;width:24px;height:24px;border-radius:50%;corner-shape:round;display:grid;place-items:center;
  background:radial-gradient(circle at 35% 30%,#3A3550,#25222F);box-shadow:0 2px 6px rgba(0,0,0,.5),0 0 0 1px rgba(255,255,255,.06);
  transform:translateX(26px);transition:transform .55s cubic-bezier(.68,-.35,.27,1.35),background .5s ease}
.dn-knob svg{width:18px;height:18px;overflow:visible}
.dn-core{fill:#ECECEF;transition:r .5s cubic-bezier(.68,-.35,.27,1.35),fill .5s ease;r:7px}
.dn-bite{transition:cx .5s cubic-bezier(.68,-.35,.27,1.35),cy .5s ease;cx:16.5px;cy:7px}
.dn-rays{stroke:#fff;stroke-width:2;stroke-linecap:round;fill:none;transform-origin:12px 12px;transform:scale(.3) rotate(-90deg);opacity:0;transition:transform .55s cubic-bezier(.68,-.35,.27,1.35),opacity .3s ease}
.dn-star{position:absolute;width:2px;height:2px;border-radius:50%;corner-shape:round;background:#fff;opacity:.9;transition:opacity .4s ease,transform .5s ease}
.dn-star.s1{left:9px;top:8px}.dn-star.s2{left:16px;top:18px;width:2px;height:2px;opacity:.7}.dn-star.s3{left:23px;top:10px;width:2px;height:2px;opacity:.8}
.dn-cloud{position:absolute;height:8px;border-radius:8px;corner-shape:round;background:#fff;opacity:0;transform:translateY(10px);transition:opacity .4s ease,transform .5s cubic-bezier(.22,.8,.25,1)}
.dn-cloud::before{content:"";position:absolute;left:4px;top:-4px;width:8px;height:8px;border-radius:50%;corner-shape:round;background:inherit}
.dn-cloud.c1{right:7px;top:16px;width:18px}.dn-cloud.c2{right:16px;top:9px;width:12px;transform:translateY(10px) scale(.8)}
@media (hover:hover){.theme.dn:hover .dn-star{animation:dnTwinkle 1.4s ease-in-out infinite}.theme.dn:hover .dn-star.s2{animation-delay:.3s}.theme.dn:hover .dn-star.s3{animation-delay:.6s}}
@keyframes dnTwinkle{50%{opacity:.25;transform:scale(.6)}}
@media (max-width:370px){.dn-track{width:48px;height:26px}.dn-knob{width:20px;height:20px;transform:translateX(22px)}.dn-knob svg{width:15px;height:15px}.dn-star.s1{left:7px;top:7px}.dn-star.s2{left:13px;top:15px}.dn-star.s3{left:19px;top:8px}.dn-cloud.c1{right:5px;top:13px;width:15px}.dn-cloud.c2{right:12px;top:7px;width:10px}}
/* light (day) state */
html.is-light .dn-track{background:linear-gradient(180deg,#C9CBF7,#E6E7FF);box-shadow:inset 0 0 0 1px rgba(87,83,198,.18),inset 0 2px 6px rgba(87,83,198,.18)}
html.is-light .dn-knob{transform:translateX(0);background:radial-gradient(circle at 35% 30%,#7D9BFF,#5753C6);box-shadow:0 2px 8px rgba(87,83,198,.45)}
html.is-light .dn-core{fill:#fff;r:4.6px}
html.is-light .dn-bite{cx:30px;cy:2px}
html.is-light .dn-rays{transform:scale(1) rotate(0);opacity:1}
html.is-light .dn-star{opacity:0;transform:translateY(-8px)}
html.is-light .dn-cloud{opacity:.95;transform:none}
html.is-light .dn-cloud.c2{transform:scale(.8)}
@media (hover:hover){html.is-light .theme.dn:hover .dn-rays{transform:scale(1) rotate(45deg)}}
.theme.dn:focus-visible{outline:none}.theme.dn:focus-visible .dn-track{outline:2px solid var(--accent);outline-offset:3px}
/* whole-page theme change: a circle grows from the switch (View Transitions, where supported) */
::view-transition-old(root),::view-transition-new(root){animation:none;mix-blend-mode:normal}
::view-transition-new(root){z-index:2}
@media (prefers-reduced-motion:reduce){.dn-knob,.dn-core,.dn-bite,.dn-rays,.dn-star,.dn-cloud,.dn-track{transition:none!important;animation:none!important}}

/* back to top (case studies): appears after the first screen; the ring fills as you read */
.to-top{all:unset;box-sizing:border-box;position:fixed;right:max(20px,env(safe-area-inset-right));bottom:max(20px,env(safe-area-inset-bottom));z-index:60;width:48px;height:48px;border-radius:50%;corner-shape:round;display:grid;place-items:center;cursor:pointer;color:var(--ink);
  background:color-mix(in srgb,var(--surface) 82%,transparent);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);box-shadow:0 8px 24px -10px rgba(0,0,0,.45);
  opacity:0;transform:translateY(12px) scale(.9);pointer-events:none;transition:opacity .3s ease,transform .35s cubic-bezier(.22,.8,.25,1)}
.to-top[hidden]{display:none}
.to-top.show{opacity:1;transform:none;pointer-events:auto}
.to-top .tt-ring{position:absolute;inset:0;width:100%;height:100%;transform:rotate(-90deg)}
.to-top .tt-ring circle{fill:none;stroke-width:1.5;stroke:var(--line)}
.to-top .tt-ring .tt-prog{stroke:var(--accent);stroke-dasharray:100;stroke-dashoffset:var(--tt,100);stroke-linecap:round;transition:stroke-dashoffset .1s linear}
.to-top .tt-ic{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;transition:transform .3s cubic-bezier(.22,.8,.25,1)}
@media (hover:hover){.to-top:hover{color:var(--accent);background:color-mix(in srgb,var(--accent) 14%,var(--surface))}.to-top:hover .tt-ic{transform:translateY(-3px)}}
.to-top:active .tt-ic{transform:translateY(-3px)}
.to-top:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
@media (max-width:720px){.to-top{width:44px;height:44px;right:max(16px,env(safe-area-inset-right));bottom:max(16px,env(safe-area-inset-bottom))}}
@media (prefers-reduced-motion:reduce){.to-top,.to-top .tt-ic,.to-top .tt-ring .tt-prog{transition:none}}
@media (hover:hover){a.card:hover :is(h2,h3){color:var(--accent)}}

/* mobile menu */
.burger{display:none}
@media (max-width:720px){
  .top .wrap{grid-template-columns:auto 1fr auto}
  .top-r{grid-column:3;gap:6px}
  .burger{all:unset;box-sizing:border-box;display:grid;place-content:center;gap:6px;width:44px;height:44px;border-radius:50%;corner-shape:round;cursor:pointer;color:var(--ink)}
  .burger span{display:block;width:20px;height:1.6px;border-radius:2px;background:currentColor;transition:transform .35s cubic-bezier(.65,0,.35,1),opacity .2s}
  .burger[aria-expanded="true"] span:nth-child(1){transform:translateY(3.8px) rotate(45deg)}
  .burger[aria-expanded="true"] span:nth-child(2){transform:translateY(-3.8px) rotate(-45deg)}
  .burger:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
  #mainNav{position:fixed;left:0;right:0;top:calc(env(safe-area-inset-top,0px) + 65px);z-index:19;flex-direction:column;align-items:stretch;gap:0 !important;padding:8px 16px 20px;
    background:var(--bg);border-bottom:1px solid var(--line);box-shadow:0 24px 40px -20px rgba(0,0,0,.45);
    opacity:0;transform:translateY(-8px);pointer-events:none;visibility:hidden;transition:opacity .25s ease,transform .3s cubic-bezier(.22,.8,.25,1),visibility 0s .3s}
  .top.menu-open #mainNav{opacity:1;transform:none;pointer-events:auto;visibility:visible;transition:opacity .25s ease,transform .3s cubic-bezier(.22,.8,.25,1)}
  #mainNav a{min-height:56px;padding:0 4px !important;font-size:22px;letter-spacing:-.01em;border-bottom:1px solid var(--line);justify-content:space-between}
  #mainNav a:last-child{border-bottom:0}
  #mainNav a.on::after{left:auto;right:6px;bottom:auto;top:50%;transform:translateY(-50%);width:6px;height:6px}
  #mainNav .nav-cv svg{display:inline-block;width:14px;height:14px}
  body.no-scroll{overflow:hidden}
}
@media (max-width:720px) and (prefers-reduced-motion:reduce){#mainNav,.burger span{transition:none!important}}

/* ===== Aces of Aces ===== */
.ac-ph{margin:28px 0 0}.ac-ph .img{aspect-ratio:16/9;width:100%}
.ac-hero{margin-top:40px}.ac-hero .img{aspect-ratio:1920/900;border-radius:24px}
.ac-pwr{list-style:none;padding:0;margin:28px 0 0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.ac-pwr li{padding:20px;border:1px solid var(--line);border-radius:18px;corner-shape:squircle;background:var(--surface)}
.ac-pwr .k{display:block;font-size:12px;letter-spacing:.07em;text-transform:uppercase;color:var(--accent);margin-bottom:8px}
.ac-pwr p{margin:0;font-size:15px;line-height:1.55;color:var(--ink)}
.ac-cats{display:flex;flex-wrap:wrap;gap:8px;margin:20px 0}
.ac-cats span{padding:7px 14px;border-radius:999px;corner-shape:round;border:1px solid var(--line);background:var(--surface);font-size:14px;color:var(--ink)}
.ac-stats{grid-template-columns:repeat(3,minmax(0,1fr));margin-top:8px}
.ac-phones{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.ac-tall .img{aspect-ratio:9/16;max-height:520px}
.ac-road{list-style:none;padding:0;margin:20px 0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;counter-reset:r}
.ac-road li{padding:18px;border-radius:16px;corner-shape:squircle;border:1px solid var(--line);background:var(--surface);position:relative}
.ac-road li::after{content:"";position:absolute;left:18px;right:18px;top:0;height:3px;border-radius:0 0 3px 3px;background:var(--accent);opacity:calc(1 - var(--i,0)*.2)}
.ac-road li:nth-child(2){--i:1}.ac-road li:nth-child(3){--i:2}.ac-road li:nth-child(4){--i:3}
.ac-road span{display:block;font-size:12px;letter-spacing:.07em;text-transform:uppercase;color:var(--faint)}
.ac-road b{display:block;margin-top:6px;font-size:18px;font-weight:500;color:var(--ink)}
.ac-four{grid-template-columns:repeat(4,minmax(0,1fr))}
@media (max-width:900px){.ac-four,.ac-road{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:760px){.ac-pwr{grid-template-columns:minmax(0,1fr)}.ac-phones{gap:10px}}
.ag-stats.ac-stats{grid-template-columns:repeat(3,minmax(0,1fr))}@media (max-width:620px){.ag-stats.ac-stats div{padding:14px}.ag-stats.ac-stats dd{font-size:22px}}
@media (max-width:460px){.ac-four,.ac-road{grid-template-columns:minmax(0,1fr)}.ac-phones{grid-template-columns:repeat(3,minmax(0,1fr))}}
.am-hero{display:grid;grid-template-columns:minmax(0,3.2fr) minmax(0,1fr);gap:16px;align-items:end;margin-top:40px}
.am-t,.am-p{margin:0}
.am-t img,.am-p img{display:block;width:100%;height:auto;border:1px solid var(--line);background:#fff}
.am-t img{border-radius:18px;corner-shape:squircle;aspect-ratio:954/768;object-fit:cover}
.am-p img{border-radius:22px;corner-shape:squircle;aspect-ratio:750/1624;object-fit:cover;object-position:top}
.am-t figcaption,.am-p figcaption{margin-top:10px;font-size:13.5px;color:var(--muted);line-height:1.45}
.am-t figcaption:empty,.am-p figcaption:empty{display:none}
.am-phones{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;margin:28px 0 8px}
.am-wide{margin-top:24px}
.am-tabs2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin:16px 0 8px}
.am-flow{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-top:20px}
.am-flow>i{font-style:normal;color:var(--faint)}
.am-n{display:inline-flex;align-items:center;gap:8px;padding:12px 16px;border:1px solid var(--line);border-radius:14px;corner-shape:squircle;background:var(--surface);font-size:15px;color:var(--ink)}
.am-n em{font-style:normal;font-size:12.5px;color:var(--muted)}
.am-pair{border-color:color-mix(in srgb,var(--accent) 40%,var(--line))}.am-pair em{color:var(--accent);font-size:15px}
.am-pair b{font-weight:500}
.am-prog{list-style:none;padding:0;margin:10px 0 0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.am-prog li{padding:16px;border:1px solid var(--line);border-radius:14px;corner-shape:squircle;display:flex;flex-direction:column;gap:4px}
.am-prog b{font-weight:500;font-size:15px;color:var(--ink)}.am-prog span{font-size:13px;color:var(--muted)}
.am-prog li.on{border-color:color-mix(in srgb,var(--accent) 45%,var(--line));background:color-mix(in srgb,var(--accent) 8%,var(--surface))}
.am-prog li.on span{color:var(--accent)}
#s-patient .chipflow{margin-top:8px}
@media (max-width:900px){.am-phones{grid-template-columns:repeat(2,minmax(0,1fr))}.am-hero{grid-template-columns:minmax(0,2.4fr) minmax(0,1fr)}}
@media (max-width:620px){.am-tabs2,.am-prog{grid-template-columns:minmax(0,1fr)}.am-hero{grid-template-columns:minmax(0,1fr)}.am-hero .am-p{display:none}}

.am-dm{margin:0;width:min(100%,300px)}
.am-dm img{display:block;width:100%;height:auto;border:1px solid var(--line);border-radius:24px;corner-shape:squircle;background:#fff;aspect-ratio:750/1624;object-fit:cover;object-position:top;margin-top:12px}
.am-dm.t{width:100%}
.am-dm.t img{border-radius:16px;aspect-ratio:954/768}
.dec.ph.sk.am-dec .dec-txt>*{opacity:1;transform:none}
.am-dec-t{grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr)}
.ag-min{grid-template-columns:repeat(4,minmax(0,1fr))}
.ag-fc{margin:10px 0 0;font-size:13.5px;color:var(--muted);line-height:1.45}
.ag-ph3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin:8px 0 24px}
.ag-ph2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.ag-chain li.ag-tx{color:var(--ink)}
.ag-chain li.ag-tx .ag-cn{background:color-mix(in srgb,var(--bad) 16%,transparent);border-color:var(--bad)}
.ag-chw{margin:28px 0 12px}.ag-chw .ag-chain{margin:0}
.ag-brk{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));margin:14px 0 34px}
.ag-brk span{grid-column:2/5;position:relative;height:10px;margin-right:12px;border:1.5px solid color-mix(in srgb,var(--bad) 70%,transparent);border-top:0;border-radius:0 0 8px 8px}
.ag-brk span::after{content:attr(data-l);position:absolute;top:18px;left:50%;transform:translateX(-50%);font-size:12px;font-weight:500;letter-spacing:.06em;text-transform:uppercase;color:var(--bad);white-space:nowrap}
.ag-txm{display:none}
@media (max-width:900px){.ag-brk{display:none}.ag-txm{display:block;font-style:normal;font-size:12px;letter-spacing:.04em;color:var(--bad);margin-top:2px}}
.ag-txk{margin-top:-8px;margin-bottom:20px}
.ag-five{margin:10px 0 0;padding-left:20px;display:grid;gap:8px}
.ag-five li{font-size:15px;line-height:1.55;color:var(--muted)}.ag-five b{color:var(--ink);font-weight:500}
.ag-q{list-style:none;padding:0;margin:20px 0 0;border-top:1px solid var(--line)}
.ag-q li{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.6fr);gap:20px;padding:16px 0;border-bottom:1px solid var(--line)}
.ag-q span{font-size:15px;font-weight:500;color:var(--ink)}.ag-q p{margin:0;font-size:15px;line-height:1.55;color:var(--muted)}
.ag-fts{display:grid;gap:16px}
.ag-ft{padding:clamp(20px,2.4vw,30px);border:1px solid var(--line);border-radius:22px;corner-shape:squircle;background:var(--surface)}
.ag-ft-h{display:flex;align-items:baseline;gap:12px;margin-bottom:12px}.ag-ft-h h3{margin:0;font-size:clamp(18px,1.8vw,22px);font-weight:500;letter-spacing:-.01em}
.ag-ft .chipflow{margin:0 0 14px}
.ag-ft .ac-ph{margin-top:20px}.ag-ft .ac-ph .img,.ag-ph2 .img{aspect-ratio:2/1}
.ag-val{margin:16px 0 0;font-size:15px;line-height:1.55;color:var(--ink)}
.ag-val span{display:inline-block;margin-right:10px;font-size:11.5px;letter-spacing:.09em;text-transform:uppercase;color:var(--good);font-weight:600}
.ag-roles{margin-top:16px}
@media (max-width:900px){.ag-min{grid-template-columns:repeat(2,minmax(0,1fr))}.ag-ph3{grid-template-columns:minmax(0,1fr)}}
@media (max-width:620px){.ag-min,.ag-ph2{grid-template-columns:minmax(0,1fr)}.ag-q li{grid-template-columns:minmax(0,1fr);gap:4px}}
.ag-own2{margin-top:12px}.ag-own2 p:not(.am-k){margin:0;font-size:14.5px;line-height:1.6;color:var(--muted)}
.ag-pain{list-style:none;padding:0;margin:24px 0 0;border-top:1px solid var(--line)}
.ag-pain li{display:grid;grid-template-columns:minmax(0,.9fr) 24px minmax(0,1.6fr);align-items:baseline;padding:14px 0;border-bottom:1px solid var(--line)}
.ag-pain b{font-size:15.5px;font-weight:500;color:var(--ink)}.ag-pain span{color:var(--bad)}.ag-pain em{font-style:normal;font-size:15px;color:var(--muted);line-height:1.5}
.ag-q b{color:var(--ink);font-weight:500}
.ag-vp{margin-top:clamp(48px,6vw,80px);padding:clamp(24px,3vw,40px);border-radius:28px;corner-shape:squircle;background:linear-gradient(160deg,color-mix(in srgb,var(--accent) 14%,var(--surface)),var(--surface) 65%);border:1px solid color-mix(in srgb,var(--accent) 30%,var(--line))}
.ag-vp .label{border-color:color-mix(in srgb,var(--accent) 30%,var(--line))}
.ag-vp-ph .img{aspect-ratio:16/8}
.ag-dph{aspect-ratio:16/10;margin-top:12px;width:100%}
.am-dm.t img.ag-dimg{aspect-ratio:16/10;object-fit:contain}
.ilb img{max-width:min(94vw,1600px);max-height:88vh;width:auto;height:auto;border-radius:12px;background:#fff;cursor:zoom-out}
.ag-dimg{display:block;width:100%;height:auto;margin-top:12px;border:1px solid var(--line);border-radius:14px;corner-shape:squircle;background:#fff;cursor:zoom-in}
#s-storage .ac-ph .img{aspect-ratio:2/1}
.ag-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.ag-grid1{grid-template-columns:minmax(0,1fr);margin-top:14px}
.ag-ln{margin:0;font-size:15px;line-height:1.55;color:var(--muted)}
@media (max-width:760px){.ag-grid{grid-template-columns:minmax(0,1fr)}.ag-pain li{grid-template-columns:minmax(0,1fr);gap:2px}.ag-pain span{display:none}}

.ag-wd{display:block;padding:clamp(22px,3vw,40px);margin:0 0 20px;border:1px solid var(--line);border-radius:28px;corner-shape:squircle;background:var(--surface)}
.ag-wd .pdw{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0;border-top:1px solid var(--line);margin-top:6px}
.ag-wd .pdw div,.ag-wd .pdw .prob,.ag-wd .pdw .sol,.ag-wd .pdw .why{display:block;padding:16px 24px 16px 0;border-bottom:0}
.ag-wd .pdw div+div,.ag-wd .pdw .sol,.ag-wd .pdw .why{padding-left:clamp(20px,2.4vw,32px);border-left:1px solid var(--line)}.ag-wd .pdw .prob,.ag-wd .pdw .sol{padding-right:clamp(20px,2.4vw,32px)}.ag-wd .pdw div,.ag-wd .pdw .prob,.ag-wd .pdw .sol,.ag-wd .pdw .why{padding-top:20px;padding-bottom:20px}
.ag-wd .pdw dt{margin-bottom:8px}
.ag-wd .chipflow{margin:12px 0 4px;gap:4px 6px}.ag-wd .chipflow span{padding:4px 10px;font-size:12.5px}.ag-wd .chipflow i{font-size:12px}
.ag-wd .dec-m{margin-top:20px}
.ag-wd .am-dm.t{width:100%;max-width:none}
.ag-wd .am-dm.t img.ag-dimg{aspect-ratio:16/10;object-fit:cover;object-position:top left;border-radius:16px;margin-top:14px;box-shadow:0 30px 60px -30px rgba(0,0,0,.35)}
@media (max-width:860px){.ag-wd .pdw{grid-template-columns:minmax(0,1fr)}.ag-wd .pdw div+div,.ag-wd .pdw .sol,.ag-wd .pdw .why{padding-left:0;border-left:0;border-top:1px solid var(--line)}.ag-wd .pdw div,.ag-wd .pdw .prob,.ag-wd .pdw .sol,.ag-wd .pdw .why{padding:14px 0}}
/* AMDHA project theme (brand teal #3894B5) */
/* ===== UI audit fixes ===== */

@media (max-width:620px){.clips.land .cl-pp,.clips.land .cl-ex{width:38px;height:38px}}
.foot nav a{position:relative}.foot nav a::after{content:"";position:absolute;inset:-12px -8px}
.img.thumb{outline:1px solid var(--line);outline-offset:-1px}
/* ===== AGS 3D case study ===== */
.ag-wf{list-style:none;margin:20px 0 8px;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.ag-wf li{display:flex;gap:14px;padding:18px;border-radius:18px;corner-shape:squircle;border:1px solid var(--line);background:var(--surface)}
.ag-wf b{display:block;font-weight:500;font-size:15.5px}
.ag-role{display:inline-block;margin:6px 0 6px;font-size:11.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--accent)}
.ag-wf p{margin:0;font-size:14px;line-height:1.55;color:var(--muted)}
@media (max-width:980px){.ag-wf{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:620px){.ag-wf{grid-template-columns:minmax(0,1fr)}}

.ag-usp{list-style:none;margin:20px 0 28px;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.ag-usp li{padding:18px;border-radius:18px;corner-shape:squircle;border:1px solid color-mix(in srgb,var(--accent) 35%,var(--line));background:color-mix(in srgb,var(--accent) 6%,var(--surface));display:flex;flex-direction:column;gap:4px}
.ag-usp b{font-size:clamp(17px,1.6vw,20px);font-weight:500;color:var(--ink)}
.ag-usp span{font-size:14px;color:var(--muted);line-height:1.5}
@media (max-width:720px){.ag-usp{grid-template-columns:minmax(0,1fr)}}
.ag-dk{margin-top:36px}

@media (min-width:1001px){.skills2:has(> li:nth-child(6):last-child){grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (min-width:761px){.skills2:has(> li:nth-child(3):last-child){grid-template-columns:repeat(3,minmax(0,1fr))}}
.ag-hero img{display:block;width:100%;height:auto;border-radius:24px;corner-shape:squircle}
.ag-scope{margin-top:20px;font-size:15px;color:var(--muted);line-height:1.6}
.ag-scope span,.ag-pipe-k{display:block;font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--faint);margin-bottom:4px}
.ag-own-k{margin-top:28px}
.ag-own{margin:8px 0 0;padding:0;list-style:none;display:grid;gap:8px}
.ag-own li{position:relative;padding-left:20px;font-size:15px;line-height:1.55;color:var(--ink)}
.ag-own li::before{content:"";position:absolute;left:2px;top:.62em;width:6px;height:6px;border-radius:50%;background:var(--accent)}
/* seven-step desktop chain */
.ag-chain{list-style:none;margin:28px 0 8px;padding:0;display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:0}
.ag-chain li{position:relative;display:flex;flex-direction:column;gap:10px;padding-right:12px;font-size:13.5px;line-height:1.45;color:var(--muted)}
.ag-chain li:not(:last-child)::after{content:"";position:absolute;top:14px;left:34px;right:4px;height:1px;background:repeating-linear-gradient(90deg,color-mix(in srgb,var(--bad) 55%,transparent) 0 4px,transparent 4px 8px)}
.ag-cn{display:grid;place-items:center;width:28px;height:28px;border-radius:50%;corner-shape:round;font-size:12px;font-weight:600;color:var(--bad);border:1.5px solid color-mix(in srgb,var(--bad) 60%,transparent)}
@media (max-width:900px){.ag-chain{grid-template-columns:minmax(0,1fr);gap:14px}.ag-chain li{flex-direction:row;align-items:center;gap:12px}.ag-chain li:not(:last-child)::after{top:30px;left:13.5px;right:auto;width:1px;height:14px;background:repeating-linear-gradient(180deg,color-mix(in srgb,var(--bad) 55%,transparent) 0 3px,transparent 3px 6px)}.ag-cn{flex:none}}
/* limitations */
.ag-lim{list-style:none;margin:32px 0 0;padding:0;border-top:1px solid var(--line)}
.ag-lim li{display:grid;grid-template-columns:minmax(0,1fr) 24px minmax(0,1fr);gap:12px;align-items:baseline;padding:14px 0;border-bottom:1px solid var(--line);font-size:15px;line-height:1.5}
.ag-lim b{font-weight:500;color:var(--ink)}
.ag-lim span:last-child{color:var(--muted)}
.ag-ar{color:var(--bad)}
@media (max-width:620px){.ag-lim li{grid-template-columns:minmax(0,1fr);gap:2px}.ag-ar{display:none}}
/* shifts: reuse .changes cards */
.ag-shifts .ch-a{font-size:clamp(18px,1.7vw,21px)}
/* flow */
.ag-h3{font-size:clamp(18px,1.8vw,22px);font-weight:500;margin:36px 0 10px;letter-spacing:-.01em}
.ag-tree{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin:14px 0 6px}
.ag-tree .chipflow{margin:0}
.ag-tree em{font-style:normal;color:var(--muted)}
.ag-leaf{display:inline-flex;flex-wrap:wrap;gap:6px;padding:6px;border-radius:14px;corner-shape:squircle;border:1px dashed color-mix(in srgb,var(--accent) 45%,var(--line))}
.ag-leaf span{font-size:13px;padding:6px 12px;border-radius:999px;corner-shape:round;background:color-mix(in srgb,var(--accent) 10%,transparent);color:var(--ink)}
.ag-steps{list-style:none;margin:12px 0 0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.ag-steps li{display:flex;gap:14px;padding:18px;border-radius:18px;corner-shape:squircle;border:1px solid var(--line);background:var(--surface)}
.ag-sn{flex:none;display:grid;place-items:center;width:28px;height:28px;border-radius:50%;corner-shape:round;font-size:12.5px;font-weight:600;color:var(--accent);border:1.5px solid var(--accent)}
.ag-steps b{display:block;font-weight:500;font-size:15.5px;margin-bottom:4px}
.ag-steps p{margin:0;font-size:14px;line-height:1.55;color:var(--muted)}
@media (max-width:980px){.ag-steps{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:620px){.ag-steps{grid-template-columns:minmax(0,1fr)}}
.ag-pipe-k{margin:28px 0 8px}
.ag-pipe{margin-top:0}
.ag-pipe span:last-child{border-color:color-mix(in srgb,var(--good) 55%,transparent);color:var(--good)}
/* viewport */
.ag-panels{display:grid;grid-template-columns:1fr 2.2fr 1fr;gap:8px;margin:24px 0 6px}
.ag-panels div{display:flex;flex-direction:column;gap:4px;justify-content:center;min-height:120px;padding:16px;border-radius:16px;corner-shape:squircle;border:1px solid var(--line);background:var(--surface)}
.ag-panels .ag-c{align-items:center;text-align:center;background:radial-gradient(90% 120% at 50% 0%,#1A2366,#0B1036 60%,#060920);border-color:transparent;color:#fff}
.ag-panels b{font-weight:500;font-size:15px}
.ag-panels span{font-size:13px;color:var(--muted)}
.ag-panels .ag-c span{color:rgba(238,241,251,.7)}
.ag-cap{font-size:13.5px;color:var(--faint);margin:0 0 28px}
@media (max-width:620px){.ag-panels{grid-template-columns:minmax(0,1fr)}.ag-panels div{min-height:0}}
.ag-tools{margin-bottom:24px}
.mini3.ag-tools:has(> li:nth-child(5)){grid-template-columns:repeat(5,minmax(0,1fr))}
@media (max-width:1100px){.mini3.ag-tools:has(> li:nth-child(5)){grid-template-columns:repeat(3,minmax(0,1fr))}.mini3.ag-tools li:nth-child(4){padding-left:0;border-left:0}}
@media (max-width:760px){.mini3.ag-tools:has(> li:nth-child(5)){grid-template-columns:minmax(0,1fr)}}
.ag-who,.ag-adm{list-style:none;padding:0;margin:10px 0 0;display:grid;gap:10px}
.ag-who{grid-template-columns:repeat(3,minmax(0,1fr))}
.ag-adm{grid-template-columns:repeat(2,minmax(0,1fr));margin:12px 0 8px}
.ag-who li,.ag-adm li{padding:14px 16px;border:1px solid var(--line);border-radius:14px;corner-shape:squircle;display:flex;flex-direction:column;gap:4px}
.ag-who b,.ag-adm b{font-size:14px;color:var(--ink)}.ag-who span,.ag-adm span{font-size:13px;color:var(--muted);line-height:1.45}
@media (max-width:760px){.ag-who{grid-template-columns:repeat(2,minmax(0,1fr))}.ag-adm{grid-template-columns:minmax(0,1fr)}}
@media (max-width:460px){.ag-who{grid-template-columns:minmax(0,1fr)}}
.ag-duo{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;margin:24px 0 8px}
.ag-clip{margin:0}.ag-clip figcaption{margin:0 0 10px;font-size:13px;font-weight:600;color:var(--ink)}.ag-clip figcaption::before{content:"";display:inline-block;width:7px;height:7px;border-radius:50%;corner-shape:round;background:var(--accent);margin-right:8px;vertical-align:1px}
.ag-cl .pv video{aspect-ratio:16/9!important}
.ag-cl .cue{font-size:13px;margin-top:12px}
.ag-sync{list-style:none;padding:0;margin:12px 0 28px;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px}
.ag-sync li{padding:14px;border:1px solid var(--line);border-radius:14px;corner-shape:squircle;display:flex;flex-direction:column;gap:4px}
.ag-sync b{font-size:14px}.ag-sync span{font-size:13px;color:var(--muted);line-height:1.45}
@media (max-width:1100px){.ag-sync{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:860px){.ag-duo{grid-template-columns:minmax(0,1fr)}}
@media (max-width:620px){.ag-sync{grid-template-columns:minmax(0,1fr)}}
.ag-modes{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin:20px 0}
.ag-mode{padding:20px;border-radius:18px;corner-shape:squircle;border:1px solid var(--line);background:var(--surface)}
.ag-mode.on{border-color:color-mix(in srgb,var(--accent) 50%,var(--line))}
.ag-mk{font-weight:500;font-size:16px;margin:0 0 12px}
.ag-mode.on .ag-mk{color:var(--accent)}
.ag-mode dl{margin:0;display:grid;gap:10px}
.ag-mode dl div{display:grid;grid-template-columns:52px minmax(0,1fr);gap:10px}
.ag-mode dt{font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--faint);padding-top:2px}
.ag-mode dd{margin:0;font-size:14.5px;line-height:1.5;color:var(--ink)}
.ag-mode em{font-style:normal;color:var(--muted)}
@media (max-width:620px){.ag-modes{grid-template-columns:minmax(0,1fr)}}
/* text-only decisions */
.ag-decs{display:grid;gap:12px}
/* impact */
/* AGS impact */
.ag-hst{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin:24px 0 16px}
.ag-hst>div{padding:clamp(22px,2.6vw,32px);border:1px solid var(--line);border-radius:24px;corner-shape:squircle;background:var(--surface);display:flex;flex-direction:column;gap:6px}
.ag-hn{font-size:clamp(36px,4.4vw,52px);font-weight:600;letter-spacing:-.03em;line-height:1.05;color:var(--good);display:flex;align-items:baseline;gap:12px;flex-wrap:wrap}
.ag-hn small{font-size:.42em;font-weight:500;letter-spacing:0;color:var(--muted)}
.ag-hn s{font-size:.42em;font-weight:500;letter-spacing:0;color:color-mix(in srgb,var(--bad) 70%,var(--muted));text-decoration-color:var(--bad)}
.ag-hst b{font-size:17px;font-weight:500;color:var(--ink)}
.ag-hst p{margin:0;font-size:14px;line-height:1.55;color:var(--muted)}
.ag-cmp{border-top:1px solid var(--line);margin:8px 0 18px}
.ag-cr{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1fr) minmax(0,1.3fr);gap:20px;align-items:baseline;padding:15px 0;border-bottom:1px solid var(--line)}
.ag-ch{padding:12px 0}.ag-ch span{font-size:12px;letter-spacing:.07em;text-transform:uppercase;color:var(--faint)}
.ag-ck{font-size:12px;letter-spacing:.07em;text-transform:uppercase;color:var(--faint)}
.ag-cb{font-size:15px;color:var(--muted);text-decoration:line-through;text-decoration-color:color-mix(in srgb,var(--bad) 70%,transparent)}
.ag-ca{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 10px}
.ag-ca b{font-size:17px;font-weight:500;color:var(--good)}
.ag-ca em{font-style:normal;font-size:13.5px;color:var(--muted)}
.ag-cr:not(.ag-ch){transition:background .2s}.ag-cr:not(.ag-ch):hover{background:color-mix(in srgb,var(--ink) 3%,transparent)}
@media (max-width:620px){.ag-hst{grid-template-columns:minmax(0,1fr)}.ag-ch{display:none}.ag-cr{grid-template-columns:minmax(0,1fr) minmax(0,1.2fr);gap:4px 16px}.ag-ck{grid-column:1/-1}}
.ag-vpf{margin:20px 0 0}.ag-vpf img{display:block;width:100%;height:auto;border-radius:16px;corner-shape:squircle;border:1px solid var(--line);box-shadow:0 30px 60px -30px rgba(0,0,0,.35);cursor:zoom-in}
.ag-clip .pv video,.clips.land.ag-clip .pv video,.clips.land.am-clip .pv video{aspect-ratio:1440/900;object-fit:contain;object-position:center top;height:auto}
@media (min-width:981px){
.dec.ph.sk.land.ag-sk{display:grid;grid-template-columns:minmax(0,.72fr) minmax(0,2.28fr);gap:clamp(24px,3vw,44px);align-items:center;height:auto;min-height:calc(100vh - var(--stk-top,128px) - 40px);overflow:visible;padding:clamp(22px,2.4vw,34px)}
.dec.ph.sk.land.ag-sk .dec-head{margin-bottom:14px}
.dec.ph.sk.land.ag-sk .pdw{grid-template-columns:minmax(0,1fr)}
.dec.ph.sk.land.ag-sk .pdw div,.dec.ph.sk.land.ag-sk .pdw .prob,.dec.ph.sk.land.ag-sk .pdw .sol,.dec.ph.sk.land.ag-sk .pdw .why{padding:12px 0!important;border-left:0!important;border-top:1px solid var(--line)}
.dec.ph.sk.land.ag-sk .pdw dd{font-size:14.5px;line-height:1.6}
.dec.ph.sk.land.ag-sk .chipflow{margin:10px 0 0}
.dec.ph.sk.land.ag-sk .dec-m{flex:none;display:flex;justify-content:center;margin:0;min-height:0}
.dec.ph.sk.land.ag-sk .clips.land{width:100%;max-width:min(100%,calc((100vh - var(--stk-top,128px) - 168px) * 1.6))!important;margin:0 auto}
.dec.ph.sk.land.ag-sk .clips.land .cue{margin-top:10px;min-height:0}
.dec.ph.sk.land.ag-sk .sol-tag{margin-bottom:10px}
}
.am-clip.p{width:min(100%,300px,calc((100vh - 200px) * .4684));margin-inline:auto}.dec.ph.am-dec{align-items:center}.dec.ph.am-dec .dec-m{display:flex;justify-content:center}.am-clip.p .pv video{aspect-ratio:712/1520}.am-clip.t{width:100%}.am-clip.t .pv video{aspect-ratio:1440/900;object-fit:contain}
.ag-sk .clips.land .pv,.ag-sk .clips.land .br-bar{background:color-mix(in srgb,var(--ink) 9%,var(--bg))}
.ag-sk .clips.land .br-bar i:nth-child(1){background:#FF5F57}.ag-sk .clips.land .br-bar i:nth-child(2){background:#FEBC2E}.ag-sk .clips.land .br-bar i:nth-child(3){background:#28C840}
.ag-sk .clips.land .pv{box-shadow:0 30px 60px -28px rgba(0,0,0,.35)}
.am-also{list-style:none;margin:14px 0 0;padding:0;display:grid;grid-template-columns:minmax(0,3.42fr) minmax(0,1fr) minmax(0,1fr);gap:20px;align-items:start}
.am-also li{display:flex;flex-direction:column;gap:6px}
.am-also b{font-size:16px;font-weight:500;color:var(--ink);margin-top:12px}
.am-also p{margin:0;font-size:14.5px;line-height:1.55;color:var(--muted)}
.am-af{margin:0}
.am-af img{display:block;width:100%;height:auto;cursor:zoom-in;border:1px solid var(--line);background:#fff}
.am-af.t img{aspect-ratio:1440/900;border-radius:14px;corner-shape:squircle}
.am-af.p img{aspect-ratio:712/1520;border-radius:22px;corner-shape:squircle;padding:5px;background:linear-gradient(145deg,#2E2E33,#111113);border:0}
@media (max-width:860px){.am-also{grid-template-columns:repeat(2,minmax(0,1fr))}.am-also li.w{grid-column:1/-1}}
.am-hv video{display:block;width:100%;height:auto;aspect-ratio:16/9;border-radius:24px;corner-shape:squircle;background:#0B1A24}
.am-ds{margin:28px 0 8px}.am-dsk{margin-top:24px}
.ac-im{margin:28px 0 0}.ac-im img{display:block;width:100%;height:auto;border-radius:18px;corner-shape:squircle;border:1px solid var(--line);cursor:zoom-in;background:#fff}
.ac-hero-im img{border-radius:24px;aspect-ratio:16/9;border:0}
.ac-kit img{background:#fff;padding:clamp(10px,2vw,24px)}
.ac-wg{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin-top:28px}.ac-wg .ac-im{margin:0}.ac-wg img{aspect-ratio:16/9}
.ac-p6{grid-template-columns:repeat(6,minmax(0,1fr));gap:12px;margin-top:24px}.ac-pm{margin:0}.ac-pm img{aspect-ratio:9/20;border-radius:16px;padding:4px;background:linear-gradient(145deg,#2E2E33,#111113);border:0}
@media (max-width:860px){.ac-p6{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:560px){.ac-wg{grid-template-columns:minmax(0,1fr)}}
.ac-vid{margin:28px 0 0}
.ac-tabs{margin-top:28px}
.ac-tl{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:16px}
.ac-tl button{font:inherit;font-size:14px;display:inline-flex;gap:8px;align-items:center;padding:9px 14px;border-radius:999px;corner-shape:round;border:1px solid var(--line);background:var(--surface);color:var(--muted);cursor:pointer;transition:background .2s,color .2s}
.ac-tl button span{font-size:11.5px;color:var(--faint)}
.ac-tl button[aria-selected="true"]{background:var(--ink);color:var(--bg);border-color:var(--ink)}.ac-tl button[aria-selected="true"] span{color:inherit;opacity:.6}
.ac-tl button:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.ac-tp{margin:0}.ac-tp.on{animation:cueIn .35s ease}
.ac-frame{border-radius:18px;corner-shape:squircle;overflow:hidden;border:1px solid var(--line);background:color-mix(in srgb,var(--ink) 9%,var(--bg));box-shadow:0 30px 60px -30px rgba(0,0,0,.35)}
.ac-frame .br-bar{display:flex;gap:6px;align-items:center;height:28px;padding:0 14px}.ac-frame .br-bar i{width:9px;height:9px;border-radius:50%}
.ac-frame .br-bar i:nth-child(1){background:#FF5F57}.ac-frame .br-bar i:nth-child(2){background:#FEBC2E}.ac-frame .br-bar i:nth-child(3){background:#28C840}
.ac-frame img,.ac-frame video{display:block;width:100%;height:auto;aspect-ratio:16/9;cursor:zoom-in;background:#cfe6f4}.ac-frame video{cursor:default}
.ac-tp figcaption{margin:14px 4px 0;font-size:15px;line-height:1.55;color:var(--muted)}
.ac-car{margin-top:28px;position:relative}
.ac-track{display:grid;grid-auto-flow:column;grid-auto-columns:clamp(220px,calc((100vh - 280px) * .45),270px);gap:20px;overflow-x:auto;scroll-snap-type:x mandatory;padding:4px 2px 18px;scrollbar-width:thin}
.ac-ms{margin:0;scroll-snap-align:start}
.ac-phone{padding:6px;border-radius:30px;corner-shape:squircle;background:linear-gradient(145deg,#2E2E33,#111113);box-shadow:0 24px 48px -24px rgba(0,0,0,.5)}
.ac-phone img{display:block;width:100%;height:auto;aspect-ratio:9/20;border-radius:24px;corner-shape:squircle;cursor:zoom-in}
.ac-ms figcaption{margin:14px 4px 0;display:flex;flex-direction:column;gap:4px}.ac-ms b{font-size:16px;font-weight:500;color:var(--ink)}.ac-ms span{font-size:14px;line-height:1.5;color:var(--muted)}
.ac-nav{display:flex;gap:8px;justify-content:flex-end;margin-top:6px}
.ac-nav button{width:40px;height:40px;border-radius:50%;corner-shape:round;border:1px solid var(--line);background:var(--surface);color:var(--ink);font-size:16px;cursor:pointer}
.ac-nav button:disabled{opacity:.35;cursor:default}
.ac-nav button:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
@media (max-width:620px){.ac-tl{flex-wrap:nowrap;overflow-x:auto;padding-bottom:4px}.ac-tl button{white-space:nowrap;flex:none}.ac-track{grid-auto-columns:70%}}
.ac-tl button{position:relative;overflow:hidden}
.ac-tl button::after{content:"";position:absolute;left:0;bottom:0;height:2px;width:100%;background:currentColor;opacity:.55;transform:scaleX(0);transform-origin:left}
.ac-tabs.run .ac-tl button[aria-selected="true"]::after{animation:acfill var(--acd,4500ms) linear forwards}
@keyframes acfill{to{transform:scaleX(1)}}
.ac-tp{display:block}.ac-tp[hidden]{display:none}
.ac-mv{margin:28px 0 0}.ac-mv video{background:#0b0b0d}
.ac-ml{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:clamp(20px,3vw,40px);align-items:stretch}
.ac-steps{position:relative;display:flex;flex-direction:column;gap:10px;margin:0;justify-content:center}
.ac-tl .ac-st{display:grid;grid-template-columns:auto minmax(0,1fr);gap:16px;align-items:start;text-align:left;width:100%;padding:18px 20px 18px 22px;border-radius:20px;corner-shape:squircle;background:transparent;border:1px solid transparent;color:var(--muted);white-space:normal}
.ac-tl .ac-st:hover{background:var(--surface)}
.ac-tl .ac-st[aria-selected="true"]{background:var(--surface);border-color:var(--line);color:var(--ink)}
.ac-tl .ac-st .ac-sn{font-size:12.5px;letter-spacing:.06em;color:var(--faint);padding-top:3px}
.ac-tl .ac-st[aria-selected="true"] .ac-sn{color:var(--accent);opacity:1}
.ac-tl .ac-sb{display:flex;flex-direction:column;gap:6px;font-size:inherit;color:inherit}.ac-sb b{font-size:18px;font-weight:500;color:inherit}
.ac-tl .ac-st .ac-sd{font-size:15px;line-height:1.55;color:var(--muted);display:none}
.ac-tl .ac-st[aria-selected="true"] .ac-sd{color:color-mix(in srgb,var(--ink) 72%,transparent);display:block;animation:cueIn .35s ease}
.ac-tl .ac-st::after{left:0;top:16px;bottom:16px;width:2px;height:auto;transform:scaleY(0);transform-origin:top;background:var(--accent);opacity:1;border-radius:2px}
.ac-tabs.run .ac-tl .ac-st[aria-selected="true"]::after{animation:acfillv var(--acd,8s) linear forwards}
@keyframes acfillv{to{transform:scaleY(1)}}
.ac-stage{position:relative;display:grid;place-items:center;padding:clamp(16px,2.5vw,32px);border-radius:28px;corner-shape:squircle;background:radial-gradient(90% 70% at 50% 30%,color-mix(in srgb,var(--accent) 16%,transparent),transparent 70%),color-mix(in srgb,var(--ink) 5%,var(--bg));border:1px solid var(--line);min-height:0}
.ac-mp{margin:0;width:min(100%,calc((100vh - 260px) * .466),340px)}.ac-mp[hidden]{display:none}
.ac-mp video{display:block;width:100%;height:auto;aspect-ratio:384/824;border-radius:13% / 6%;background:#1c1b21;box-shadow:0 40px 70px -30px rgba(0,0,0,.55),0 0 0 1px rgba(255,255,255,.04)}
@media (max-width:860px){.ac-ml{grid-template-columns:minmax(0,1fr)}
 .ac-steps{flex-direction:row;justify-content:flex-start;overflow-x:auto;gap:8px;padding-bottom:4px}
 .ac-tl .ac-st{flex:none;width:auto;padding:9px 14px;border-radius:999px;border-color:var(--line);background:var(--surface);grid-template-columns:auto auto;gap:8px;align-items:center}
 .ac-tl .ac-st[aria-selected="true"]{background:var(--ink);color:var(--bg)}.ac-tl .ac-st[aria-selected="true"] .ac-sn{color:inherit;opacity:.6}
 .ac-sb b{font-size:14px;font-weight:400}.ac-tl .ac-st .ac-sn{padding:0;font-size:11.5px}
 .ac-tl .ac-st[aria-selected="true"] .ac-sd{display:none}
 .ac-tl .ac-st::after{left:0;right:0;top:auto;bottom:0;width:100%;height:2px;transform:scaleX(0);transform-origin:left;background:currentColor;opacity:.55}
 .ac-tabs.run .ac-tl .ac-st[aria-selected="true"]::after{animation:acfill var(--acd,8s) linear forwards}
 .ac-stage{order:2}.ac-mp{width:min(78%,280px)}}
.ac-mcap{display:none}
@media (max-width:860px){.ac-mcap{order:3;display:block;margin:14px 4px 0;font-size:15px;line-height:1.55;color:var(--muted)}}
#app img{transition:opacity .35s ease}
#app img[loading="lazy"]:not(.is-in){opacity:0}
#app .img.thumb,.ac-frame,.am-af img,.ac-im img{background-color:color-mix(in srgb,var(--ink) 6%,var(--bg))}
/* next case study: card layout for web, tablet and mobile */
.next:has(.nx-im){grid-template-columns:minmax(0,1.15fr) minmax(0,1fr) auto;grid-template-rows:1fr auto auto auto 1fr;column-gap:clamp(24px,3.5vw,48px);row-gap:10px;align-items:start;margin-block:clamp(40px,6vw,72px) clamp(24px,4vw,48px);border-top-width:1px;padding:clamp(14px,1.6vw,20px);padding-right:clamp(20px,3vw,40px);border:1px solid var(--line);border-radius:28px;corner-shape:squircle;background:var(--surface);transition:border-color .3s ease,box-shadow .3s ease}
.next:has(.nx-im) .nx-im{grid-column:1;grid-row:1/-1;align-self:center;width:100%;height:auto;aspect-ratio:16/9;border-radius:18px;margin:0}
.next:has(.nx-im) .nx-k{grid-column:2;grid-row:2}
.next:has(.nx-im) .nx-t{grid-column:2;grid-row:3}
.next:has(.nx-im) .nx-d{grid-column:2;grid-row:4;max-width:46ch}
.next:has(.nx-im) .nx-go{grid-column:3;grid-row:2/5;align-self:center}
.next .nx-im{display:block;overflow:hidden;border:1px solid var(--line);background:color-mix(in srgb,var(--ink) 6%,var(--bg))}
.next .nx-im img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .6s cubic-bezier(.2,.7,.2,1)}
@media (hover:hover){.next:has(.nx-im):hover{border-color:color-mix(in srgb,var(--accent) 40%,var(--line));box-shadow:0 30px 60px -40px rgba(0,0,0,.35)}.next:hover .nx-im img{transform:scale(1.04)}}
/* tablet: image on top, text and arrow below */
@media (max-width:900px){
 .next:has(.nx-im){grid-template-columns:minmax(0,1fr) auto;grid-template-rows:auto;row-gap:8px;padding:14px 14px 22px;border-radius:24px}
 .next:has(.nx-im) .nx-im{grid-column:1/-1;grid-row:1;margin-bottom:14px}
 .next:has(.nx-im) .nx-k{grid-column:1;grid-row:2;padding-inline:8px}
 .next:has(.nx-im) .nx-t{grid-column:1;grid-row:3;padding-inline:8px}
 .next:has(.nx-im) .nx-d{grid-column:1;grid-row:4;padding-inline:8px;max-width:60ch}
 .next:has(.nx-im) .nx-go{grid-column:2;grid-row:2/5;margin-right:8px}}
/* mobile: arrow drops under the text so the title gets the full width */
@media (max-width:560px){
 .next:has(.nx-im){grid-template-columns:minmax(0,1fr);padding:12px 12px 20px}
 .next:has(.nx-im) .nx-k,.next:has(.nx-im) .nx-t,.next:has(.nx-im) .nx-d{padding-inline:6px}
 .next:has(.nx-im) .nx-go{grid-column:1;grid-row:5;justify-self:start;margin:10px 0 0 6px}}
@media (prefers-reduced-motion:reduce){.next .nx-im img,.next:has(.nx-im){transition:none}}
.hw-row{border-bottom:1px solid var(--line)}
.hw-row summary{list-style:none;cursor:pointer;display:grid;grid-template-columns:52px minmax(0,1fr) auto;align-items:center;gap:12px;padding:clamp(18px,2.4vw,28px) 0;border-radius:6px}
.hw-row summary::-webkit-details-marker{display:none}
.hw-row summary:focus-visible{outline:2px solid var(--accent);outline-offset:4px}

.hw-mph{display:grid;grid-template-columns:1.4fr 1fr;grid-template-rows:1fr 1fr;gap:8px}
.hw-mph img{display:block;width:100%;height:100%;object-fit:cover;border-radius:14px;corner-shape:squircle}
.hw-mph img:first-child{grid-row:1/3;object-position:12% 50%}
.hw-mph img:not(:first-child){aspect-ratio:16/10}

@media (max-width:560px){
 .hw-row summary{grid-template-columns:32px minmax(0,1fr) auto;gap:10px}
 .hw-mph{grid-template-columns:1fr 1fr;grid-template-rows:auto auto}.hw-mph img:first-child{grid-row:auto;grid-column:1/-1;aspect-ratio:16/10}.hw-mph img:not(:first-child){aspect-ratio:1/1}}

/* Selected work: featured grid (2 large + 3 small), shuffled per visit */
.feat{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:clamp(36px,4vw,52px) clamp(18px,2vw,28px)}
.feat>.card{grid-column:span 2;gap:20px}
.feat>.card:nth-child(-n+2){grid-column:span 3}
.feat>.card:nth-child(-n+2) :is(h2,h3){font-size:clamp(19px,1.7vw,22px)}
.feat>.card p{max-width:60ch}
.feat>.card:nth-child(n+3) p{font-size:13.5px}
.sw-all{display:inline-flex;align-items:center;gap:8px;font-size:14.5px;color:var(--ink);text-decoration:none;padding:10px 16px;border-radius:999px;corner-shape:round;border:1px solid var(--line);transition:border-color .25s,background .25s,color .25s}
.sw-all span{transition:transform .3s}
.sw-all:hover{border-color:color-mix(in srgb,var(--accent) 55%,var(--line));color:var(--accent);background:color-mix(in srgb,var(--accent) 8%,transparent)}
.sw-all:hover span{transform:translateX(3px)}
.sw-all:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.sw-all-b{display:none}
@media (max-width:900px){.feat{grid-template-columns:repeat(2,minmax(0,1fr))}.feat>.card,.feat>.card:nth-child(-n+2){grid-column:span 1}.feat>.card:nth-child(1){grid-column:1/-1}}
@media (max-width:620px){.feat{grid-template-columns:minmax(0,1fr)}.feat>.card,.feat>.card:nth-child(1){grid-column:1/-1}.rail-head .sw-all{display:none}.sw-all-b{display:flex;justify-content:center;margin-top:32px}}
.sw-act{display:flex;align-items:center;gap:10px}
.sw-shuf{font:inherit;font-size:14.5px;display:inline-flex;align-items:center;gap:10px;padding:7px 16px 7px 7px;border-radius:999px;corner-shape:round;border:1px solid var(--line);background:var(--surface);color:var(--ink);cursor:pointer;transition:border-color .25s,box-shadow .3s,transform .15s}
.sw-shuf:hover{border-color:color-mix(in srgb,var(--accent) 50%,var(--line))}
.sw-shuf:active{transform:scale(.96)}
.sw-shuf:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.sw-shuf.spin{box-shadow:0 0 0 6px color-mix(in srgb,var(--accent) 16%,transparent);border-color:color-mix(in srgb,var(--accent) 60%,var(--line))}
.die{position:relative;width:30px;height:30px;flex:none;display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(3,1fr);padding:6px;gap:1px;border-radius:9px;corner-shape:squircle;color:var(--bg);
 background:linear-gradient(145deg,color-mix(in srgb,var(--ink) 88%,var(--accent)),var(--ink));box-shadow:inset 0 1px 0 rgba(255,255,255,.18),inset 0 -2px 0 rgba(0,0,0,.25),0 4px 10px -4px rgba(0,0,0,.4);transition:transform .35s cubic-bezier(.22,.8,.25,1)}
.die i{width:4.5px;height:4.5px;border-radius:50%;background:currentColor;place-self:center;transform:scale(0);transition:transform .14s ease}
.die i.on{transform:scale(1)}
@media (hover:hover){.sw-shuf:hover .die{transform:rotate(-14deg) translateY(-1px)}}
.sw-shuf.spin .die{animation:dieRoll .62s cubic-bezier(.3,.7,.25,1)}
@keyframes dieRoll{0%{transform:rotate(0) translateY(0)}25%{transform:rotate(-120deg) translateY(-7px) scale(.9)}55%{transform:rotate(-260deg) translateY(-3px) scale(.95)}80%{transform:rotate(-350deg) translateY(1px) scale(1.04)}100%{transform:rotate(-360deg)}}
.sw-lb{display:inline-grid}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.feat>.card{will-change:transform}
@media (prefers-reduced-motion:reduce){.die,.die i{transition:none}.sw-shuf.spin .die{animation:none}}
@media (max-width:620px){.sw-shuf{padding:6px 14px 6px 6px;font-size:14px}}

@media (prefers-reduced-motion:reduce){.feat>.card,.sw-shuf svg{transition:none}}

#app .foot .foot-copy{flex-basis:100%;display:flex;flex-wrap:wrap;gap:6px 10px;margin:20px 0 0;padding-top:20px;border-top:1px solid var(--line);font-size:13px;color:var(--faint)}
/* journey: Full story / Short cut */
.j-head{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:14px 20px;margin-bottom:22px}
.j-head h2{margin:0!important;max-width:22ch}
.j-body .j-story{color:var(--ink)}
.j-story .ky{font-weight:400;color:inherit;transition:background-color .35s ease,color .35s ease}
.j-story .fl{background:linear-gradient(currentColor,currentColor) 0 58%/0% 1.5px no-repeat;transition:background-size .5s cubic-bezier(.22,.8,.25,1),color .35s ease,opacity .35s ease}
.j-body[data-mode="tldr"] .j-story .fl{background-size:100% 1.5px;color:var(--faint);opacity:.6}
.j-body[data-mode="tldr"] .j-story .ky{background:var(--hl);color:var(--hl-ink);border-radius:4px;corner-shape:squircle;padding:.04em .16em;margin:0 -.02em;box-decoration-break:clone;-webkit-box-decoration-break:clone}
#app .j-body[data-mode="tldr"] .j-story .ky strong{background:none;padding:0;margin:0;color:var(--hl-ink);font-weight:600}
.j-chip{font:inherit;display:inline-flex;align-items:center;gap:8px;padding:6px 13px 6px 7px;border-radius:999px;corner-shape:round;border:1px dashed color-mix(in srgb,var(--accent) 55%,var(--line));background:transparent;color:var(--ink);font-size:13px;line-height:1.2;cursor:pointer;flex:none;transition:background .3s,border-color .3s,transform .15s}
.j-chip:hover{background:color-mix(in srgb,var(--accent) 6%,transparent)}
.j-chip:active{transform:scale(.97)}
.j-chip:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.j-chip[aria-pressed="true"]{border-style:solid;background:color-mix(in srgb,var(--accent) 12%,transparent)}
.j-ic{width:20px;height:20px;border-radius:50%;display:grid;place-items:center;background:color-mix(in srgb,var(--accent) 16%,transparent);color:var(--accent);font-size:11px;transition:transform .45s cubic-bezier(.22,.8,.25,1)}
@media (hover:hover){.j-chip:hover .j-ic{transform:rotate(-25deg)}}
.j-chip[aria-pressed="true"] .j-ic{transform:rotate(-180deg)}
.j-lb{display:inline-grid}.j-lb span{grid-area:1/1;transition:opacity .25s,transform .3s}
.j-chip[aria-pressed="true"] .x1,.j-chip:not([aria-pressed="true"]) .x2{opacity:0;transform:translateY(6px)}
@media (prefers-reduced-motion:reduce){.j-story .fl,.j-story .ky,.j-story strong,.j-ic,.j-lb span{transition:none}}
/* multiplayer-style cursor */
/* footer v2: Let's build together + cat */
.foot.ft2{position:relative;border-top:1px solid var(--line);padding-block:clamp(40px,5vw,56px) 20px;margin-top:clamp(24px,4vw,40px)}
.ft2 .wrap{display:block;position:relative}
.ft-main{display:flex;flex-direction:column;align-items:center;text-align:center}
#app .ft-h{margin:0;font-size:clamp(28px,3.8vw,44px);font-weight:600;letter-spacing:-.03em;line-height:1.02;color:var(--ink)}
#app .ft-sub{margin:10px 0 0;max-width:46ch;font-size:clamp(15px,1.3vw,17px);line-height:1.6;color:var(--muted)}
.ft-acts{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin-top:20px}
.ft-mail,.ft-pill{font:inherit;display:inline-flex;align-items:center;justify-content:center;height:40px;padding:0 18px;border-radius:999px;corner-shape:round;font-size:14px;text-decoration:none;transition:transform .15s,background .25s,color .25s,box-shadow .25s}
.ft-mail{position:relative;border:0;background:var(--ink);color:var(--bg);cursor:pointer;overflow:hidden}
.ft-mail .ft-ok{position:absolute;inset:0;display:grid;place-items:center;background:var(--good);color:#fff;transform:translateY(100%);transition:transform .3s cubic-bezier(.22,.8,.25,1)}
.ft-mail.done .ft-ok{transform:none}
.ft-mail:hover{opacity:.88}
.ft-pill{background:transparent;color:var(--muted);border:1px solid var(--line)}
.ft-pill:hover{color:var(--ink);border-color:color-mix(in srgb,var(--ink) 35%,transparent)}
.ft-mail:active,.ft-pill:active{transform:scale(.97)}
.ft-mail:focus-visible,.ft-pill:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
#app .foot.ft2 .foot-copy{justify-content:center;margin:clamp(28px,4vw,40px) 0 0;padding-top:16px}
@keyframes ftBeat{0%,60%,100%{transform:scale(1)}30%{transform:scale(1.25)}}
/* cat */
.ft-cat{--cat:#2B2A33;--cat-in:#F2A7B8;--cat-ln:#9A97A8;position:absolute;right:clamp(0px,2vw,24px);top:calc(-1 * clamp(40px,5vw,56px) - 89px);width:150px;height:92px;cursor:pointer;user-select:none;-webkit-tap-highlight-color:transparent}
:root[data-theme="light"] .ft-cat{--cat:#2B2A33}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .ft-cat{--cat:#E9E4D8;--cat-ln:#8C8A80}}
:root[data-theme="dark"] .ft-cat{--cat:#E9E4D8;--cat-ln:#8C8A80}
.ft-cat svg{display:block;overflow:visible}
.cat-tail{transform-origin:88px 74px;animation:catTail 3.2s ease-in-out infinite}
@keyframes catTail{0%,100%{transform:rotate(0)}50%{transform:rotate(-14deg)}}
.cat-head{transform-origin:62px 60px;transition:transform .35s cubic-bezier(.22,.8,.25,1)}
.cat-ear{transform-box:fill-box;transition:transform .25s}
.cat-ear.l{transform-origin:100% 100%}.cat-ear.r{transform-origin:0 100%}
.ft-cat:hover .cat-ear.l{transform:rotate(-8deg)}.ft-cat:hover .cat-ear.r{transform:rotate(8deg)}
.cat-eye{transform-box:fill-box;transform-origin:center}
.ft-cat.blink .cat-eye{animation:catBlink .18s ease-in-out}
@keyframes catBlink{50%{transform:scaleY(.1)}}
.cat-pu{transition:transform .12s linear}
.ft-cat.happy .cat-eye{transform:scaleY(.25)}
.cat-paw{transform-origin:48px 84px;transform-box:view-box}
.ft-cat.swat .cat-paw{animation:catSwat .45s cubic-bezier(.3,.7,.3,1)}
@keyframes catSwat{40%{transform:translate(-14px,-16px) rotate(-30deg)}}
.ft-bub{position:absolute;left:30px;top:-24px;padding:5px 10px;border-radius:12px 12px 12px 3px;background:var(--surface);border:1px solid var(--line);font-size:12.5px;color:var(--ink);white-space:nowrap;opacity:0;transform:translateY(6px) scale(.9);transform-origin:0 100%;transition:opacity .2s,transform .25s cubic-bezier(.22,.8,.25,1);pointer-events:none}
.ft-cat.talk .ft-bub{opacity:1;transform:none}
.ft-yarn{position:absolute;left:8px;bottom:1px;transition:transform .6s cubic-bezier(.22,.8,.25,1)}
.ft-yarn svg{display:block;transition:transform .6s cubic-bezier(.22,.8,.25,1)}
.ft-cat.swat .ft-yarn{transform:translateX(-46px)}.ft-cat.swat .ft-yarn svg{transform:rotate(-360deg)}
@media (max-width:620px){.foot.ft2{margin-top:72px}.ft-cat{transform:scale(.8);transform-origin:100% 100%;right:0}.ft-acts{width:100%}.ft-mail{width:100%}.ft-pill{flex:1}}
@media (prefers-reduced-motion:reduce){.cat-tail{animation:none}.cat-paw,.ft-yarn,.ft-yarn svg{transition:none;animation:none!important}}
/* case studies: text runs the full content width */
#app .cs-cover :is(h1,.cs-lede),#app .cs .body :is(h2,h3,p,.t,.why-line,.ftest,dd,li p){max-width:none}
#app .cs-cover h1{text-wrap:pretty}
@keyframes stRing{0%{stroke-dashoffset:100;opacity:1}70%,86%{stroke-dashoffset:0;opacity:1}100%{stroke-dashoffset:0;opacity:0}}



/* ===== Story player ===== */
html.st-lock,html.st-lock body{overflow:hidden}
.stp{position:fixed;inset:0;z-index:10001;display:none;flex-direction:column;align-items:center;justify-content:center;gap:14px;padding:18px 24px;background:var(--out);color:var(--tx);font-family:var(--f);--out:#04050A;--hi:#A9C1FF;--bg1:#18205a;--bg2:#0A1033;--bg3:#060918;--tx:#fff;--tx2:#C3C8DE;--tx3:#8b92b8;--ln:rgba(255,255,255,.12);--card:rgba(255,255,255,.05);--on-hi:#0A1033;--btn:#fff;--btxt:#0A1033;--bad:var(--bad);--wave:#3C4FB8;--sw:min(1200px,calc(100vw - 48px),calc((100dvh - 140px) * 16 / 9))}
.stp[data-theme="amdha"]{--out:#030b10;--bg1:#14405a;--bg2:#0a1f2d;--bg3:#04101a;--hi:#5CC8F0;--on-hi:#04202e;--btxt:#0a1f2d;--tx2:#C2D3DD;--tx3:#7e98a8;--wave:#1d5a78}
.stp[data-theme="aces"]{--out:#dcebf5;--bg1:#ffffff;--bg2:#e2f1fa;--bg3:#b8def3;--hi:#1C6FB6;--tx:#0f1f35;--tx2:#34465e;--tx3:#667a90;--ln:rgba(15,31,53,.13);--card:rgba(255,255,255,.72);--on-hi:#fff;--btn:#0f1f35;--btxt:#fff;--bad:#c0352f;--wave:#79b5dc}
.stp[data-theme="ags"]{--out:#e4e6ec;--bg1:#ffffff;--bg2:#f1f2f6;--bg3:#dcdfe7;--hi:#D92D3F;--tx:#141a2e;--tx2:#3b4257;--tx3:#737a8f;--ln:rgba(20,26,46,.12);--card:rgba(255,255,255,.75);--on-hi:#fff;--btn:#141a2e;--btxt:#fff;--bad:#D92D3F;--wave:#b8bccb}
.stp.open{display:flex;animation:stFade .35s ease}
@keyframes stFade{from{opacity:0}}
.stp-bar,.stp-foot{width:var(--sw);display:flex;align-items:center;gap:14px}
.stp-act{font-size:13px;color:var(--tx3);font-variant-numeric:tabular-nums}
.stp-act b{color:var(--tx);font-weight:600}
.stp-bar .stp-b{margin-left:auto}
.stp-b{width:40px;height:40px;border-radius:50%;border:1px solid var(--ln);background:var(--card);display:grid;place-items:center;cursor:pointer;color:var(--tx);padding:0}
.stp-b svg{width:15px;height:15px;fill:currentColor}
.stp-b:hover{background:var(--ln)}
.stp :focus-visible{outline:2px solid var(--hi);outline-offset:2px}
.stp-segs{flex:1;display:flex;gap:4px}
.stp-segs button{flex:var(--w,1);height:4px;padding:0;border:0;border-radius:4px;background:var(--ln);cursor:pointer;position:relative;overflow:hidden}
.stp-segs button::after{content:"";position:absolute;inset:0;background:var(--hi);transform-origin:0 50%;transform:scaleX(var(--p,0))}
.stp-ctl{display:flex;gap:6px}
.stp-stage{position:relative;width:var(--sw);aspect-ratio:16/9;border-radius:22px;overflow:hidden;background:radial-gradient(90% 90% at 70% 0%,var(--bg1) 0%,var(--bg2) 55%,var(--bg3) 100%);container-type:size;cursor:pointer;line-height:1.3}
.stp-stage::after{content:"";position:absolute;inset:0;pointer-events:none;border-radius:inherit;box-shadow:inset 0 0 0 1px var(--ln)}
.stp-stage.paused *{animation-play-state:paused!important}
.stp .sc{position:absolute;inset:0;display:none;flex-direction:column;justify-content:center;padding:7cqh 7cqw}
.stp .sc.on{display:flex}
.stp .sk{font-size:clamp(10px,1.3cqw,15px);letter-spacing:.14em;text-transform:uppercase;color:var(--hi);font-weight:600}
.stp .sb{margin:1.6cqh 0 0;font-size:4.8cqw;line-height:1.1;letter-spacing:-.035em;font-weight:600;max-width:20ch;color:var(--tx)}
.stp .sm{margin:2cqh 0 0;font-size:2cqw;line-height:1.45;color:var(--tx2);max-width:40ch}
.stp .sm b{color:var(--tx);font-weight:600}
.stp em{font-style:normal;color:var(--hi)}
.stp .a{opacity:0}
.stp .sc.on .a{animation:stUp .6s cubic-bezier(.22,.8,.25,1) forwards;animation-delay:calc(var(--d,0s) * .65)}
.stp .sc.on .af{animation-name:stFade2}
@keyframes stUp{from{opacity:0;transform:translateY(3cqh)}to{opacity:1;transform:none}}
@keyframes stFade2{from{opacity:0}to{opacity:1}}
/* art */
.stp .s-art.ship{position:absolute;right:5cqw;bottom:13cqh;width:44cqw;color:var(--hi)}
.stp .s-art svg{width:100%;height:auto;overflow:visible}
.stp .sc.on .hull{animation:stBob 3.2s ease-in-out infinite}
@keyframes stBob{50%{transform:translateY(-1.2%) rotate(-.6deg)}}
.stp .wave{fill:none;stroke:var(--wave);stroke-width:2;stroke-linecap:round}
.stp .sc.on .w1{animation:stWav 4s linear infinite}.stp .sc.on .w2{animation:stWav 6s linear infinite reverse}
@keyframes stWav{to{transform:translateX(-80px)}}
.stp .s-art.lv{position:absolute;right:7cqw;top:50%;transform:translateY(-50%);display:flex;flex-direction:column;gap:1.6cqh}
.stp .s-art.lv span{margin-left:calc(var(--x) * 4cqw);padding:1.4cqh 2.2cqw;border-radius:1.2cqw;background:var(--card);border:1px solid var(--ln);font-size:1.9cqw;font-weight:500;color:var(--tx2)}
/* paper */
.stp .papers{position:absolute;right:6cqw;top:50%;width:40cqw;height:60cqh;transform:translateY(-50%)}
.stp .pc{position:absolute;width:21cqw;padding:2.2cqw;border-radius:1.2cqw;background:#F3EFE4;color:#2a2620;box-shadow:0 2cqh 5cqh -2cqh rgba(0,0,0,.6);opacity:0}
.stp .pc b{display:block;font-size:1.55cqw;line-height:1.25;font-weight:600}
.stp .pc i{display:block;height:.55cqw;margin-top:1cqw;border-radius:9px;background:#d9d1bd}
.stp .pc i:nth-of-type(2){width:80%}.stp .pc i:nth-of-type(3){width:60%}
.stp .pc.p1{left:0;top:4%;--r:-7deg}.stp .pc.p2{left:18cqw;top:22%;--r:5deg}.stp .pc.p3{left:6cqw;top:56%;--r:-2deg}
.stp .sc.on .pc{animation:stDrop .55s cubic-bezier(.3,1.3,.5,1) forwards;animation-delay:calc(var(--d) * .65)}
@keyframes stDrop{from{opacity:0;transform:translateY(-6cqh) rotate(0)}to{opacity:1;transform:rotate(var(--r))}}
/* big number */
.stp .snum{margin:2.4cqh 0 0;font-size:13cqw;line-height:.95;letter-spacing:-.05em;font-weight:700;color:var(--tx)}
/* three */
.stp .s3{display:grid;grid-template-columns:repeat(3,1fr);gap:2.2cqw;margin-top:5cqh}
.stp .s3>div{padding:3cqw 2.4cqw;border-radius:1.6cqw;background:var(--card);border:1px solid var(--ln)}
.stp .s3 svg{width:4cqw;height:4cqw;fill:none;stroke:var(--hi);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.stp .s3n{font-size:1.4cqw;font-weight:600;color:var(--hi);font-variant-numeric:tabular-nums}
.stp .s3 b{display:block;margin-top:1.8cqh;font-size:2.1cqw;font-weight:600;color:var(--tx)}
.stp .s3 p{margin:.8cqh 0 0;font-size:1.5cqw;color:var(--tx3);line-height:1.4}
/* quote */
.stp .s-quote,.stp .s-end{align-items:center;text-align:center}
.stp .s-quote .sb{font-size:4.3cqw;max-width:22ch}
.stp .s-quote .sm{max-width:44ch}
/* questions */
.stp .sqs{list-style:none;margin:4cqh 0 0;padding:0;display:flex;flex-wrap:wrap;gap:1.2cqw;max-width:80cqw}
.stp .sqs li{display:flex;align-items:center;gap:1cqw;padding:1.3cqh 1.8cqw 1.3cqh 1.2cqw;border-radius:99px;background:var(--card);border:1px solid var(--ln);font-size:1.75cqw;color:var(--tx)}
.stp .sqs span{display:grid;place-items:center;width:2.6cqw;height:2.6cqw;border-radius:50%;background:var(--hi);color:var(--on-hi);font-size:1.3cqw;font-weight:700}
/* chain */
.stp .sch{list-style:none;margin:4.5cqh 0 0;padding:0;display:grid;grid-template-columns:repeat(7,1fr);gap:.9cqw}
.stp .sch li{display:flex;flex-direction:column;gap:1cqh;padding:1.6cqw 1.2cqw;border-radius:1.2cqw;background:var(--card);border:1px solid var(--ln);font-size:1.45cqw;line-height:1.3;color:var(--tx2)}
.stp .sch li span{font-size:1.25cqw;color:var(--tx3);font-weight:600}
.stp .sch li.mk{border-color:color-mix(in srgb,var(--bad) 45%,transparent);background:color-mix(in srgb,var(--bad) 9%,transparent);color:var(--tx)}
.stp .sch li.mk span{color:var(--bad)}
.stp .sch-n{margin:2.4cqh 0 0;font-size:1.6cqw;color:var(--bad)}
/* decision */
.stp .s-dec{padding:0}
.stp .dq{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;padding:0 10cqw;opacity:0}
.stp .dq p{margin:1.6cqh 0 0;font-size:4.1cqw;line-height:1.15;letter-spacing:-.03em;font-weight:600;max-width:20ch;color:var(--tx)}
.stp .s-dec.on .dq{animation:stQIn .5s ease forwards,stQOut .45s ease forwards;animation-delay:0s,1.4s}
@keyframes stQIn{from{opacity:0;transform:scale(.97)}to{opacity:1;transform:none}}
@keyframes stQOut{to{opacity:0;transform:translateY(-3cqh)}}
.stp .da{position:absolute;inset:0;display:grid;grid-template-columns:1fr auto;align-items:center;gap:5cqw;padding:0 8cqw 0 7cqw;opacity:0}
.stp .da.land{grid-template-columns:30cqw 1fr;gap:4cqw;padding:0 5cqw 0 6cqw}
.stp .s-dec.on .da{animation:stFade2 .45s ease forwards;animation-delay:1.4s}
.stp .dn{display:block;font-size:clamp(10px,1.25cqw,14px);letter-spacing:.14em;text-transform:uppercase;color:var(--hi);font-weight:600}
.stp .dw{display:block;margin-top:1.4cqh;font-size:1.55cqw;color:var(--tx3);text-decoration:line-through;text-decoration-color:color-mix(in srgb,var(--hi) 55%,transparent)}
.stp .da h3{margin:1.2cqh 0 0;font-size:3.7cqw;line-height:1.1;letter-spacing:-.03em;font-weight:600;max-width:15ch;color:var(--tx)}
.stp .da.land h3{font-size:3.1cqw}
.stp .dch{display:flex;flex-wrap:wrap;gap:.6cqw;margin-top:2cqh;font-size:1.3cqw}
.stp .dch span{padding:.4cqw .9cqw;border-radius:99px;background:color-mix(in srgb,var(--hi) 14%,transparent);color:var(--tx)}
.stp .dch i{font-style:normal;color:var(--tx3);align-self:center}
.stp .dsub{margin:2cqh 0 0;font-size:1.7cqw;line-height:1.45;color:var(--tx2);max-width:30ch}
.stp .da.land .dsub{font-size:1.5cqw}
.stp .dcap{margin:3.6cqh 0 0;display:flex;align-items:center;gap:1cqw;font-size:1.55cqw;color:var(--tx);min-height:2.4em}
.stp .dcap::before{content:"";flex:none;width:.8cqw;height:.8cqw;border-radius:50%;background:var(--hi);box-shadow:0 0 0 .5cqw color-mix(in srgb,var(--hi) 20%,transparent)}
.stp .dcap span{animation:stFade2 .4s ease}
.stp .dm{position:relative;height:86cqh;aspect-ratio:var(--ar);border-radius:3.4cqh;padding:.9cqh;background:#000;box-shadow:0 4cqh 8cqh -3cqh rgba(0,0,0,.8),0 0 0 1px rgba(255,255,255,.1)}
.stp .dm video{display:block;width:100%;height:100%;object-fit:cover;border-radius:2.6cqh;background:#0b0e1f}
.stp .da.land .dm{height:auto;width:100%;max-height:80cqh;padding:3.6cqh .7cqh .7cqh;border-radius:1.6cqh;background:#151826}
.stp .da.land .dm video{height:auto;aspect-ratio:var(--ar);border-radius:.9cqh;object-fit:contain;background:#fff}
.stp .dbar{position:absolute;left:1.6cqh;top:1.3cqh;display:flex;gap:.8cqh}
.stp .dbar i{width:1.1cqh;height:1.1cqh;border-radius:50%;background:rgba(255,255,255,.22)}
.stp .s-dec.on .dm{animation:stPh .6s cubic-bezier(.22,.8,.25,1) both;animation-delay:1.4s}
@keyframes stPh{from{transform:translateY(8cqh);opacity:0}}
/* impact */
.stp .sba{display:flex;align-items:center;gap:3cqw;margin-top:3cqh;flex-wrap:wrap}
.stp .sba s{font-size:6cqw;font-weight:600;color:var(--tx3);letter-spacing:-.04em;text-decoration-thickness:.4cqw}
.stp .sba span{font-size:4cqw;color:var(--hi)}
.stp .sba b{font-size:11cqw;line-height:.95;font-weight:700;letter-spacing:-.05em;color:var(--tx)}
.stp .schips{display:flex;gap:1.2cqw;flex-wrap:wrap;margin-top:5cqh}
.stp .schips span{padding:1cqw 1.6cqw;border-radius:99px;border:1px solid var(--ln);font-size:1.5cqw;color:var(--tx2)}
.stp .srows{list-style:none;margin:3.5cqh 0 0;padding:0;display:flex;flex-direction:column;gap:1.4cqh;max-width:80cqw}
.stp .srows li{display:grid;grid-template-columns:28cqw 18cqw 3cqw 1fr;align-items:baseline;gap:1.4cqw;padding-bottom:1.4cqh;border-bottom:1px solid var(--ln);font-size:1.8cqw}
.stp .srows span{color:var(--tx3)}.stp .srows s{color:var(--tx3)}.stp .srows i{font-style:normal;color:var(--hi)}.stp .srows b{color:var(--tx);font-weight:600;font-size:2.3cqw}
/* end */
.stp .s-end{cursor:default}
.stp .s-end .sb{font-size:3.7cqw;max-width:24ch}
.stp .send{display:flex;gap:1.2cqw;margin-top:5cqh;flex-wrap:wrap;justify-content:center}
.stp .send button{height:max(40px,5.6cqh);padding:0 max(18px,2.2cqw);border-radius:99px;border:1px solid var(--ln);background:var(--card);color:var(--tx);font:inherit;font-size:max(14px,1.5cqw);cursor:pointer}
.stp .send button.pri{background:var(--btn);color:var(--btxt);border-color:var(--btn);font-weight:600}
/* portrait: vertical story */
@media (max-aspect-ratio:1/1){
  .stp{padding:0;gap:0;justify-content:flex-start;--sw:100vw}
  .stp-bar{position:absolute;top:0;left:0;z-index:3;padding:12px 16px 8px}
  .stp-stage{width:100vw;height:100dvh;aspect-ratio:auto;border-radius:0}
  .stp-foot{position:absolute;left:0;bottom:0;z-index:3;padding:10px 16px calc(14px + env(safe-area-inset-bottom));background:linear-gradient(to top,color-mix(in srgb,var(--out) 92%,transparent),transparent)}
  .stp .sc{padding:16cqh 7cqw 14cqh}
  .stp .sk{font-size:12px}
  .stp .sb{font-size:9.4cqw}.stp .sm{font-size:4.4cqw}
  .stp .s-art.ship{width:86cqw;right:7cqw;bottom:16cqh}
  .stp .s-art.lv{position:relative;right:auto;top:auto;transform:none;margin-top:5cqh}
  .stp .s-art.lv span{margin-left:calc(var(--x) * 7cqw);font-size:4.2cqw;padding:1.4cqh 4cqw;border-radius:3cqw;align-self:flex-start}
  .stp .papers{position:relative;right:auto;top:auto;transform:none;width:86cqw;height:34cqh;margin-top:4cqh}
  .stp .pc{width:46cqw;padding:4cqw;border-radius:3cqw}.stp .pc b{font-size:3.6cqw}.stp .pc i{height:1.2cqw;margin-top:2cqw}
  .stp .pc.p1{left:0;top:0}.stp .pc.p2{left:38cqw;top:22%}.stp .pc.p3{left:8cqw;top:58%}
  .stp .snum{font-size:22cqw}
  .stp .s3{grid-template-columns:1fr;gap:1.6cqh;margin-top:3.5cqh}
  .stp .s3>div{display:grid;grid-template-columns:auto 1fr;column-gap:4cqw;align-items:center;padding:2.4cqh 5cqw;border-radius:4cqw}
  .stp .s3 svg{width:8cqw;height:8cqw;grid-row:span 2}.stp .s3n{grid-row:span 2;font-size:4cqw}
  .stp .s3 b{margin:0;font-size:4.4cqw}.stp .s3 p{font-size:3.5cqw;margin:0}
  .stp .s-quote .sb{font-size:8.2cqw}
  .stp .sqs{flex-direction:column;gap:1.2cqh;max-width:none}.stp .sqs li{font-size:4cqw;padding:1.4cqh 4cqw 1.4cqh 2.4cqw;gap:3cqw}.stp .sqs span{width:6cqw;height:6cqw;font-size:3.2cqw}
  .stp .sch{grid-template-columns:1fr 1fr;gap:1.2cqh 2cqw;margin-top:3cqh}.stp .sch li{flex-direction:row;align-items:center;gap:2cqw;padding:1.4cqh 3cqw;border-radius:3cqw;font-size:3.4cqw}.stp .sch li span{font-size:3cqw}.stp .sch-n{font-size:3.8cqw}
  .stp .dq p{font-size:8.2cqw}
  .stp .da,.stp .da.land{grid-template-columns:1fr;grid-template-rows:auto 1fr;align-items:start;justify-items:center;gap:2.4cqh;padding:14cqh 7cqw 13cqh;text-align:center}
  .stp .dt{display:flex;flex-direction:column;align-items:center}
  .stp .dn{font-size:11px}
  .stp .dw{font-size:3.6cqw}
  .stp .da h3,.stp .da.land h3{font-size:7.2cqw;margin-top:.8cqh}
  .stp .dsub,.stp .dch{display:none}
  .stp .dcap{display:block;margin-top:1.4cqh;font-size:3.8cqw;min-height:1.4em}
  .stp .dcap::before{display:inline-block;vertical-align:middle;margin-right:2cqw;width:2cqw;height:2cqw}
  .stp .dm{height:100%;max-height:56cqh;border-radius:3cqh}
  .stp .da.land .dm{width:100%;height:auto;align-self:center;padding:2.6cqw .9cqw .9cqw;border-radius:2.4cqw}
  .stp .da.land .dm video{border-radius:1.4cqw}
  .stp .dbar{left:2.4cqw;top:1cqw}.stp .dbar i{width:1.4cqw;height:1.4cqw}
  .stp .sba s{font-size:11cqw}.stp .sba span{font-size:8cqw}.stp .sba b{font-size:19cqw;width:100%}
  .stp .schips span{font-size:3.6cqw;padding:2cqw 3.4cqw}
  .stp .srows{max-width:none;gap:1.6cqh}.stp .srows li{grid-template-columns:1fr auto auto;row-gap:.4cqh;font-size:3.6cqw}.stp .srows span{grid-column:1/-1}.stp .srows b{font-size:4.4cqw}
  .stp .s-end .sb{font-size:7.6cqw}
}
@media (prefers-reduced-motion:reduce){.stp .sc.on *{animation-duration:.01s!important}}
.stp[data-theme="aces"] .dm,.stp[data-theme="ags"] .dm{box-shadow:0 4cqh 8cqh -4cqh rgba(20,30,60,.35),0 0 0 1px rgba(0,0,0,.08)}
.stp[data-theme="aces"] .pc,.stp[data-theme="ags"] .pc{box-shadow:0 2cqh 4cqh -2cqh rgba(20,30,60,.3)}
.stp[data-theme="aces"] .sba s,.stp[data-theme="ags"] .sba s{color:var(--tx3)}
#app .ai-lede{margin:0;font-size:clamp(17px,1.6vw,20px);line-height:1.6;color:var(--ink);max-width:62ch}
#app .ai-lede em{font-style:normal;color:var(--accent)}
#app .ai-tools{list-style:none;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin:22px 0 0}
#app .ai-tools li{padding:16px 18px;border:1px solid var(--line);border-radius:14px;corner-shape:squircle;background:var(--surface)}
#app .ai-tools .tk{display:block;font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
#app .ai-tools b{display:block;margin-top:6px;font-size:16px;font-weight:600;color:var(--ink)}
#app .ai-tools .d{display:block;margin-top:4px;font-size:14px;line-height:1.5;color:var(--muted)}
#app .ai-where{display:flex;flex-wrap:wrap;gap:8px;margin:18px 0 0;align-items:center}
#app .ai-where .wk{font-size:13px;color:var(--muted);margin-right:4px}
#app .ai-where i{font-style:normal;padding:5px 11px;border-radius:999px;border:1px solid var(--line);font-size:13px;line-height:1.35;color:var(--ink)}
@media (max-width:860px){#app .ai-tools{grid-template-columns:minmax(0,1fr)}}
/* ===== AGS 3D: the Viewport section ===== */
.vp-hero{margin:24px 0 0}
#app .vp-hero video{display:block;width:100%;height:auto;aspect-ratio:16/9;border-radius:16px;corner-shape:squircle;border:1px solid var(--line);background:#0e1116;box-shadow:0 30px 60px -30px rgba(0,0,0,.35)}
.vp-hero figcaption{margin:12px 4px 0;font-size:14px;color:var(--muted)}
.vp-sub{margin:40px 0 0;font-size:clamp(19px,1.9vw,23px);font-weight:600;letter-spacing:-.015em;color:var(--ink)}
.vp-tabs{margin-top:16px}
.vp-tabs .ac-frame video{background:#0e1116}
/* the recordings carry an empty white strip at the bottom: crop it in CSS, no re-encode */
#app .vp-hero video,#app .vp-tabs .ac-frame video{aspect-ratio:1280/610;object-fit:cover;object-position:50% 0}
.vp-tabs .ac-tp figcaption b{color:var(--ink);font-weight:600}

/* tab titles: progress fills the active pill */
.vp-tabs .ac-tl{gap:6px;position:relative;padding:2px 2px 6px}
.vp-tabs .ac-tl button{gap:10px;padding:10px 16px 10px 12px;font-size:14.5px;font-weight:500;color:var(--muted);background:transparent;border-color:var(--line);isolation:isolate}
.vp-tabs .ac-tl button .vt-n{display:grid;place-items:center;min-width:24px;height:24px;padding:0 6px;border-radius:999px;font-size:11.5px;font-variant-numeric:tabular-nums;color:var(--muted);background:color-mix(in srgb,var(--ink) 8%,transparent)}
.vp-tabs .ac-tl button:hover{color:var(--ink);border-color:color-mix(in srgb,var(--ink) 30%,var(--line))}
.vp-tabs .ac-tl button[aria-selected="true"]{color:var(--ink);background:color-mix(in srgb,var(--accent) 12%,var(--bg));border-color:color-mix(in srgb,var(--accent) 55%,var(--line))}
.vp-tabs .ac-tl button[aria-selected="true"] .vt-n{background:var(--accent);color:var(--bg);opacity:1}
.vp-tabs .ac-tl button::after{top:0;bottom:0;height:auto;z-index:-1;opacity:1;background:color-mix(in srgb,var(--accent) 16%,transparent)}
.vp-tabs .ac-tl button[aria-selected="false"]::after{transform:scaleX(0)}
/* ===== Section reveal: a quiet fade-and-rise as content scrolls in ===== */
html.rv-on .rv{opacity:0;translate:0 28px}
html.rv-on .rv.rv-in{opacity:1;translate:none;transition:opacity .7s cubic-bezier(.22,.8,.25,1),translate .8s cubic-bezier(.22,.8,.25,1)}
@media (prefers-reduced-motion:reduce){html.rv-on .rv{opacity:1!important;translate:none!important;transition:none!important}}
#app .ag-h3{grid-template-columns:repeat(3,minmax(0,1fr))}
@media (max-width:860px){#app .ag-h3{grid-template-columns:minmax(0,1fr)}}
.vp-dec{margin:32px 0 0;padding:clamp(18px,2.4vw,26px);border:1px solid var(--line);border-radius:18px;corner-shape:squircle;background:var(--bg)}
.vp-dk{margin:0 0 12px;font-size:15px;font-weight:600;color:var(--ink)}
.vp-rep{margin-top:44px;padding-top:32px;border-top:1px solid color-mix(in srgb,var(--accent) 30%,var(--line))}
.vp-rep .chipflow{margin:16px 0 0}
#app .vp-rep .vp-sub{margin:0}
#app .vp-rep>.t{margin-top:10px}
.vp-rv{margin:20px 0 0}
#app .vp-rv video{display:block;width:100%;height:auto;aspect-ratio:16/9;background:#fff}
.vp-rv figcaption{margin:12px 4px 0;font-size:14px;color:var(--muted)}

.vp-arc li:not(:last-child)::after{content:"→";position:absolute;right:-9px;top:50%;translate:0 -50%;z-index:1;width:18px;text-align:center;color:var(--accent);background:transparent;font-size:14px}
.vp-part{margin-top:48px}
.vp-pn{display:flex;align-items:center;gap:10px;margin:0;font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--accent);font-weight:600}
.vp-pn span{display:grid;place-items:center;width:26px;height:26px;border-radius:50%;background:var(--accent);color:var(--bg);font-size:11.5px;letter-spacing:0}
#app .vp-part>.vp-sub{margin-top:10px}
.vp-rep{margin-top:56px;padding-top:40px;border-top:1px solid color-mix(in srgb,var(--accent) 30%,var(--line))}
#app .vp-big{margin:10px 0 0;font-size:clamp(24px,2.6vw,32px);line-height:1.2;letter-spacing:-.02em;font-weight:600;color:var(--ink)}
#app .vp-rep>.t{margin-top:12px}
.vp-map{list-style:none;padding:0;margin:24px 0 0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.vp-map li{display:grid;grid-template-rows:auto auto auto 1fr auto;gap:6px;padding:16px;border:1px solid var(--line);border-radius:16px;corner-shape:squircle;background:var(--bg)}
.vp-map .mk{font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--accent);font-weight:600}
.vp-map li:first-child .mk{color:var(--good)}
.vp-map b{font-size:15.5px;font-weight:600;color:var(--ink);line-height:1.3}
.vp-map i{font-style:normal;color:var(--accent);font-size:15px;line-height:1}
.vp-map .mt{font-size:13.5px;line-height:1.5;color:var(--muted)}
#app .vp-map img{display:block;width:100%;height:auto;aspect-ratio:910/900;object-fit:cover;object-position:top;margin-top:8px;border-radius:8px;border:1px solid var(--line);background:#fff;box-shadow:0 14px 28px -20px rgba(0,0,0,.45)}
@media (max-width:980px){.vp-map{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:620px){.vp-arc li:not(:last-child)::after{content:"↓";right:auto;left:20px;top:auto;bottom:-13px;translate:none}.vp-map{grid-template-columns:minmax(0,1fr)}#app .vp-map img{aspect-ratio:910/560}}

/* ===== minimal Viewport ===== */
#app .vp-min.ag-vp{background:none;border:0;border-radius:0;padding:clamp(64px,8vw,96px) 0 0;margin-top:0}
#app .im-min>.ag-note:last-child{margin-bottom:0}
#app .vp-min .label{border-color:var(--line)}
.vpm-arc{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin:18px 0 0;font-size:14px;color:var(--muted)}
.vpm-arc span{color:var(--ink);font-weight:500}
.vpm-arc i{font-style:normal;color:var(--faint)}
#app .vp-min .vp-hero{margin-top:28px}
#app .vp-min .vp-hero video{box-shadow:none}
.vpm-finds{margin:14px 4px 0;font-size:14px;color:var(--muted)}
#app .vp-min .vp-hero figcaption{display:none}
#app .vp-min .vp-part{margin-top:64px}
#app .vp-min .vp-rep{margin-top:72px;padding-top:0;border-top:0}
.vp-min .vp-pn{color:var(--muted);font-weight:500;letter-spacing:.12em}
.vp-min .vp-pn span{width:auto;height:auto;background:none;color:var(--accent);font-size:12px;font-weight:600}
#app .vp-min .vp-sub{font-size:clamp(20px,2vw,24px)}
/* tabs: plain text, thin progress line */
#app .vp-min .vp-tabs .ac-tl{gap:4px 22px;border-bottom:1px solid var(--line);padding:0 0 0;flex-wrap:wrap}
#app .vp-min .vp-tabs .ac-tl button{padding:10px 0 12px;border:0;border-radius:0;background:none;font-size:14.5px;color:var(--muted);gap:8px}
#app .vp-min .vp-tabs .ac-tl button .vt-n{min-width:0;height:auto;padding:0;background:none;font-size:11.5px;color:var(--faint)}
#app .vp-min .vp-tabs .ac-tl button[aria-selected="true"]{background:none;color:var(--ink)}
#app .vp-min .vp-tabs .ac-tl button[aria-selected="true"] .vt-n{background:none;color:var(--accent)}
#app .vp-min .vp-tabs .ac-tl button::after{top:auto;bottom:-1px;height:2px;z-index:1;background:var(--accent)}
#app .vp-min .vp-tabs .ac-tl button[aria-selected="true"]:not(.x)::before{content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;background:color-mix(in srgb,var(--accent) 25%,transparent)}
#app .vp-min .vp-tabs .ac-frame{box-shadow:none}
@media (max-width:900px){#app .vp-min .vp-tabs .ac-tl{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none}#app .vp-min .vp-tabs .ac-tl::-webkit-scrollbar{display:none}#app .vp-min .vp-tabs .ac-tl button{flex:none}}
/* decisions: no box, hairlines only */
#app .vp-min .vp-dec{margin-top:36px;padding:0;border:0;background:none;border-radius:0}
#app .vp-min .vp-dk{font-size:13px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);font-weight:500;margin-bottom:6px}

/* report map: page first, quiet text */
#app .vp-min .vp-map{gap:24px;margin-top:28px}
#app .vp-min .vp-map li{display:flex;flex-direction:column;gap:4px;padding:0;border:0;background:none;border-radius:0}
#app .vp-min .vp-map img{order:-1;margin:0 0 10px;aspect-ratio:910/1000;box-shadow:0 1px 0 var(--line)}
#app .vp-min .vp-map .mk{color:var(--accent);font-size:11px}
#app .vp-min .vp-map li:first-child .mk{color:var(--accent)}
#app .vp-min .vp-map b{font-size:15px}
#app .vp-min .vp-map .mt{font-size:13.5px}
#app .vp-min .vp-rv .ac-frame{box-shadow:none}
#app .vp-min .why-line{margin-top:56px;padding-top:20px;border-top:1px solid var(--line)}
@media (max-width:620px){#app .vp-min .vp-map{grid-template-columns:repeat(2,minmax(0,1fr));gap:20px 14px}#app .vp-min .vp-map img{aspect-ratio:910/1000}}
#app .vp-min .vp-map{gap:0 28px;border-top:1px solid var(--line);padding-top:18px}
#app .vp-min .vp-map li{padding-left:14px;border-left:2px solid color-mix(in srgb,var(--accent) 35%,transparent)}
@media (max-width:620px){#app .vp-min .vp-map{grid-template-columns:minmax(0,1fr);gap:16px}}
.vpm-acc{margin:28px 0 0;padding:16px 0 0;border-top:1px solid var(--line);font-size:16px;line-height:1.65;color:var(--muted)}
.vpm-acc .k{display:block;margin-bottom:4px;font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--accent);font-weight:600}
.vpm-acc strong{color:var(--ink);font-weight:600}
@media (min-width:861px){.mini3.also:has(> li:nth-child(4)) > li:nth-child(3n+1){padding-left:0;border-left:0}.mini3.also:has(> li:nth-child(4)) > li:nth-child(n+4){padding-top:20px;margin-top:4px;border-top:1px solid var(--line)}}
#app .ag-hv video{aspect-ratio:1920/980;background:#f4f6f9;object-fit:cover}
/* ===== minimal Impact (AGS) ===== */
.im-row{list-style:none;padding:0;margin:20px 0 28px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr))}
.im-row li{display:flex;flex-direction:column;gap:4px;padding:0 24px}
.im-row li:first-child{padding-left:0}
.im-row li+li{border-left:1px solid var(--line)}
.im-n{font-size:clamp(28px,3.2vw,40px);font-weight:600;letter-spacing:-.03em;line-height:1.05;color:var(--good)}
.im-l{font-size:14px;line-height:1.45;color:var(--muted)}
.im-l s{margin-left:6px;color:color-mix(in srgb,var(--bad) 70%,var(--muted));text-decoration-color:var(--bad)}
#app .im-min .ag-cmp{margin:0 0 12px}
#app .im-min .ag-cr{padding:10px 0;gap:16px}
#app .im-min .ag-ch{padding:8px 0}
#app .im-min .ag-cb{font-size:14px}
#app .im-min .ag-ca b{font-size:15px}
#app .im-min .ag-ca em{font-size:13px}
#app .im-min .ag-ck{font-size:11.5px}
#app .im-min /* larger tap areas on touch screens, no visual change */
@media (max-width:620px){.mono{position:relative;padding-inline:8px;margin-inline:-8px}
  a.live.gpl{position:relative}a.live.gpl::after{content:"";position:absolute;inset:-9px -6px}
  .theme.dn{position:relative}.theme.dn::after{content:"";position:absolute;inset:-10px -4px}}
.eyebrow .nw{white-space:nowrap}
/* ===== How I like to work: minimal rows ===== */
.hx{margin-top:clamp(28px,3.5vw,40px);border-top:1px solid var(--line)}
.hx-ai{font-style:normal;font-size:.7em;color:var(--accent);margin-left:2px}
@keyframes hxIn{from{opacity:0;translate:0 -4px}}
#app .hx-p{margin:0;font-size:15.5px;line-height:1.65;color:var(--muted)}
.hx .hw-mph{margin-top:18px}
#app .hx .ai-lede{font-size:clamp(16px,1.4vw,18px)}

.hw-tabs2{margin-top:clamp(28px,3.5vw,40px)}
.vb{display:flex;gap:26px;border-bottom:1px solid var(--line);overflow-x:auto;scrollbar-width:none}
.vb button{flex:none;border:0;background:none;padding:12px 0;font:inherit;font-size:16px;font-weight:500;color:var(--muted);position:relative}
.vb button[aria-selected="true"]{color:var(--ink)}
.vb button[aria-selected="true"]::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;background:var(--accent)}
.vb button:hover{color:var(--ink)}
.vb-p{padding-top:22px;animation:hxIn .35s ease}
#app .vb-s{margin:0 0 16px;font-size:14px;color:var(--faint)}

.hw-tabs2 .vb button:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:4px}
/* ===== Design philosophy: minimal ===== */
#app .phil-band{--bp:clamp(48px,6vw,72px)}
#app .phil-min .phil-grid{grid-template-columns:repeat(4,minmax(0,1fr));column-gap:0;border-top:1px solid var(--line)}
#app .phil-min .pp{display:flex;flex-direction:column;gap:6px;padding:20px 20px 4px;border-top:0}
#app .phil-min .pp:first-child{padding-left:0}
#app .phil-min .pp+.pp{border-left:1px solid var(--line)}
#app .phil-min .pp-ic{width:auto;height:auto;margin:0 0 6px;background:none;border:0;color:var(--accent)}
#app .phil-min .pp-ic svg{width:18px;height:18px}
#app .phil-min .pp h3{margin:0;font-size:15.5px;font-weight:600;text-wrap:pretty}
#app .phil-min .pp p{font-size:14px;line-height:1.55}
@media (max-width:1100px){#app .phil-min .phil-grid{grid-template-columns:repeat(2,minmax(0,1fr))}#app .phil-min .pp:nth-child(3){padding-left:0;border-left:0}#app .phil-min .pp:nth-child(n+3){border-top:1px solid var(--line);margin-top:16px}}
@media (max-width:560px){#app .phil-min .phil-grid{grid-template-columns:minmax(0,1fr)}#app .phil-min .pp{padding:14px 0;flex-direction:row;flex-wrap:wrap;column-gap:10px}#app .phil-min .pp+.pp{border-left:0;border-top:1px solid var(--line);margin-top:0}#app .phil-min .pp-ic{margin:2px 0 0}#app .phil-min .pp h3{flex:1}#app .phil-min .pp p{flex-basis:100%}}

.jm-h{margin:44px 0 0;font-size:clamp(17px,1.6vw,19px);font-weight:600;letter-spacing:-.01em;color:var(--ink)}
.jm{margin:16px 0 0;overflow-x:auto;scrollbar-width:thin;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.jm:focus-visible,.smap-w:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.jm-in{position:relative;min-width:760px}
.jm-l{position:absolute;left:0;top:0;width:100%;height:100px;overflow:visible}
.jm-l polyline{fill:none;stroke:color-mix(in srgb,var(--ink) 30%,transparent);stroke-width:1.5;vector-effect:non-scaling-stroke;stroke-linejoin:round}
.jm ol{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(7,minmax(0,1fr))}
.jm li{display:flex;flex-direction:column;padding:0 12px 18px;min-width:0}
.jm li+li{border-left:1px solid color-mix(in srgb,var(--line) 70%,transparent)}
.jm-e{position:relative;height:100px;display:block}
.jm-e i{position:absolute;left:50%;width:11px;height:11px;margin:-5.5px 0 0 -5.5px;border-radius:50%;background:var(--bg);border:2px solid var(--ink)}
.jm-e i.lo{border-color:var(--bad);background:var(--bad)}
.jm-f{font-size:12px;color:var(--muted);text-align:center;margin:-2px 0 14px}
.jm li b{display:flex;flex-direction:column;gap:2px;font-size:14px;font-weight:600;color:var(--ink);line-height:1.3}
.jm li b span{font-size:11.5px;font-weight:500;color:var(--muted);font-variant-numeric:tabular-nums}
.jm li p{margin:8px 0 0;font-size:13.5px;line-height:1.5;color:var(--muted)}
.jm-no{opacity:.6}
.jm-cap,.smap-f figcaption{margin:14px 0 0;font-size:14px;line-height:1.6;color:var(--muted)}
.jm-k{display:inline-flex;align-items:center;gap:7px;padding:3px 10px;border:1px solid var(--line);border-radius:999px;font-size:12.5px;line-height:1.4;font-weight:500;color:var(--ink);vertical-align:1px;white-space:nowrap}
.jm-k i{width:9px;height:9px;border-radius:50%;background:var(--bad)}
.jm-k.on i{width:14px;height:3px;border-radius:2px;background:var(--accent)}
.smap-f figcaption{display:flex;align-items:center;flex-wrap:wrap;gap:6px 12px}
.smap-f{margin:32px 0 0}
.smap-w{overflow-x:auto;scrollbar-width:thin;border:1px solid var(--line);border-radius:18px;corner-shape:squircle;padding:clamp(16px,2.4vw,28px)}
.smap{display:block;width:100%;max-width:840px;min-width:620px;height:auto;margin:0 auto}
.sm-l{fill:none;stroke:color-mix(in srgb,var(--ink) 22%,transparent);stroke-width:1.2}
.sm-l.on{stroke:var(--accent);stroke-width:2}
.sm-b rect{fill:var(--bg);stroke:color-mix(in srgb,var(--ink) 22%,transparent);stroke-width:1.2}
.sm-b text{fill:var(--muted);font:500 15px "Plus Jakarta Sans",system-ui,sans-serif;text-anchor:middle}
.sm-b.on rect{fill:color-mix(in srgb,var(--accent) 12%,var(--bg));stroke:var(--accent);stroke-width:1.6}
.sm-b.on text{fill:var(--ink);font-weight:600}
.wf-f{margin:20px auto 0;max-width:880px}
.wf-f img{background:#fff}
.rm-c{gap:10px}
.rmw{display:inline-flex;align-items:baseline;font-size:22px;line-height:1;letter-spacing:-.05em}
.rmw b{font-weight:800;color:var(--ink)}
.rmw em{font-style:normal;font-weight:800;color:transparent;-webkit-text-stroke:1.3px var(--ink)}
.rmw i{display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--accent);margin-left:3px;transition:transform .3s cubic-bezier(.3,1.6,.5,1)}
.rm-tip{font-size:13px;font-weight:500;letter-spacing:0;color:var(--muted);opacity:0;transform:translateX(-4px);transition:opacity .2s ease,transform .2s ease}
.rm-c:hover .rmw i,.rm-c:focus-visible .rmw i{transform:translateY(-10px)}
.rm-c:hover .rm-tip,.rm-c:focus-visible .rm-tip{opacity:1;transform:none}
@media (hover:none){.rm-tip{display:none}}
@media (prefers-reduced-motion:reduce){.rmw i,.rm-tip{transition:none}.rm-c:hover .rmw i{transform:none}}
.pc-grid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));border-top:1px solid var(--line)}
.pc-grid li{position:relative;display:flex;flex-direction:column;padding:22px 28px 24px 0;border-bottom:1px solid var(--line)}
.pc-grid li:nth-child(2n){padding:22px 0 24px 28px;border-left:1px solid var(--line)}
.pc-q{width:30px;height:30px;border-radius:50%;margin-bottom:18px;background:conic-gradient(from var(--r),var(--accent) 0 90deg,color-mix(in srgb,var(--ink) 26%,transparent) 90deg,color-mix(in srgb,var(--ink) 7%,transparent) 360deg);transition:transform .5s cubic-bezier(.3,.7,.2,1)}
.pc-grid li:hover .pc-q{transform:rotate(90deg)}
.pc-n{position:absolute;top:26px;right:28px;font-size:12px;font-variant-numeric:tabular-nums;color:var(--faint)}
.pc-grid li:nth-child(2n) .pc-n{right:0}
.pc-grid b{font-size:15.5px;font-weight:600;color:var(--ink)}
.pc-grid p{margin:6px 0 0;font-size:14px;line-height:1.6;color:var(--muted)}
.pc-t{margin-top:12px;font-size:12.5px;line-height:1.5;color:var(--faint)}
@media (max-width:620px){.pc-grid{grid-template-columns:minmax(0,1fr)}.pc-grid li,.pc-grid li:nth-child(2n){padding:20px 0;border-left:0}.pc-grid li:nth-child(2n) .pc-n,.pc-n{right:0;top:24px}}
@media (prefers-reduced-motion:reduce){.pc-q{transition:none}.pc-grid li:hover .pc-q{transform:none}}
.ht-grid li,.ht-grid li:nth-child(2n){padding-top:20px}
.ht-grid b{font-size:15.5px}
.phx{display:grid;gap:24px}
@media (min-width:900px){.phx{grid-template-columns:minmax(220px,300px) minmax(0,1fr);gap:clamp(40px,5vw,72px)}}
.phx-in h2{margin:0 0 8px;font-size:18px;font-weight:500;letter-spacing:0;color:var(--ink)}
.phx-in p{margin:0;font-size:15.5px;line-height:1.7;color:var(--muted)}
.phx-l{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.phx-l li{display:grid;grid-template-columns:1fr;gap:6px 40px;padding:22px 0;border-bottom:1px solid var(--line)}
@media (min-width:700px){.phx-l li{grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);align-items:baseline}}
.phx-l h3{margin:0;font-size:clamp(20px,2.1vw,26px);font-weight:500;letter-spacing:-.015em;line-height:1.25;color:var(--ink);text-wrap:balance}
.phx-l h3 span{color:var(--accent)}
.phx-l p{margin:0;font-size:15px;line-height:1.65;color:var(--muted)}
@media (min-width:1024px){.ab-hero{grid-template-columns:minmax(0,1fr) clamp(240px,26vw,340px);align-items:end}}
@media (max-width:1023px){#app .ab-hero{grid-template-columns:minmax(0,1fr);gap:32px}#app .ab-hero .portrait{order:-1;justify-self:center;width:min(300px,64%)}}
@media (max-width:720px){#app .ab-hero{gap:28px}#app .ab-hero .portrait{width:min(260px,70%)}}
.ab-hero>div{container-type:inline-size;min-width:0}
.ab-nm{margin:0;font-size:clamp(52px,17vw,176px)!important;font-size:min(176px,24cqi)!important;line-height:.86;letter-spacing:-.055em;font-weight:800}
.ab-hero .ab-nm{line-height:.88}
.ab-nm>span{display:block;line-height:.88}
.ab-nm .o{color:transparent;-webkit-text-stroke:1.5px var(--ink)}
.ab-meta{display:flex;flex-wrap:wrap;align-items:center;gap:10px 22px;margin:32px 0 0;padding-top:20px;border-top:1px solid var(--line)}
.ab-role{font-size:16px;font-weight:500;color:var(--ink)}
.ab-sep{width:4px;height:4px;border-radius:50%;background:var(--faint)}
.ab-loc{display:inline-flex;align-items:center;gap:7px;font-size:15px;color:var(--muted)}
.ab-loc>svg{width:15px;height:15px;flex:none;transition:color .2s}
.ab-loc .city{transition:color .2s,border-color .2s}
.ab-loc:hover>svg,.ab-loc:focus-within>svg{color:var(--accent)}
.ab-loc .city:hover,.ab-loc .city:focus-visible{color:var(--accent);border-bottom-color:var(--accent);border-bottom-style:solid}
.ab-p{margin:16px 0 0;max-width:58ch;font-size:16.5px;line-height:1.7;color:var(--muted)}
.portrait.bw img,.portrait.bw:hover img{filter:grayscale(1);scale:1}
.portrait.bw:hover::after{opacity:1}
@media (max-width:620px){.ab-sep{display:none}.ab-meta{flex-direction:column;align-items:flex-start;gap:8px}}
@container (max-width:620px){.ab-sep{display:none}.ab-meta{flex-direction:column;align-items:flex-start;gap:8px}}
@media (max-width:520px){.ab-loc{position:relative}.ab-loc .city{position:static}.ab-loc .city-card{left:0;width:min(240px,calc(100vw - 32px));transform:translate(0,6px)}.ab-loc .city:hover .city-card,.ab-loc .city:focus .city-card{transform:none}.ab-loc .city-card::after{left:var(--cc-ar,128px)}}
.ab-nm .nm1{position:relative;width:max-content;cursor:default}
.cn{position:relative;display:inline-block}
.ncat{--cat:#2B2A33;--cat-in:#F2A7B8;--cat-ln:#9A97A8;position:absolute;left:50%;bottom:var(--nc-top,.6em);width:.56em;height:.62em;transform:translateX(-50%);pointer-events:none}
:root[data-theme="dark"] .ncat{--cat:#E9E4D8;--cat-ln:#8C8A80}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .ncat{--cat:#E9E4D8;--cat-ln:#8C8A80}}
.nc-win{position:absolute;inset:0;overflow:hidden}
.nc-hd>ellipse,.nc-el,.nc-er{stroke:var(--bg);stroke-width:3;paint-order:stroke}
.nc-hd{position:absolute;left:0;bottom:0;width:100%;height:auto;transform:translateY(105%);transition:transform .28s cubic-bezier(.5,0,.75,0)}
.nc-paw{position:absolute;bottom:-.075em;width:.12em;height:.07em;border-radius:50% 50% 40% 40%;background:var(--cat);box-shadow:0 0 0 2px var(--bg);transform:scale(0);transform-origin:50% 100%;transition:transform .18s ease-in}
.nc-paw.l{left:.1em}.nc-paw.r{right:.1em}
.nc-bub{position:absolute;right:92%;bottom:62%;font-size:13px;line-height:1;letter-spacing:0;font-weight:500;padding:6px 10px;border-radius:999px 999px 4px 999px;background:var(--ink);color:var(--bg);white-space:nowrap;opacity:0;transform:translate(6px,6px) scale(.9);transform-origin:100% 100%;transition:opacity .15s,transform .15s}
.nc-pu{transform:translate(var(--ex,0),var(--ey,0));transition:transform .12s linear}
.nc-eyes,.nc-el,.nc-er{transform-box:fill-box;transform-origin:50% 50%}
.nc-el,.nc-er{transform-origin:50% 100%}
.nm1.on .nc-hd{transform:translateY(16%);transition:transform .55s cubic-bezier(.34,1.56,.64,1)}
.nm1.on .nc-paw{transform:scale(1);transition:transform .3s cubic-bezier(.34,1.56,.64,1) .2s}
.nm1.on .nc-bub{opacity:1;transform:none;transition:opacity .2s .55s,transform .35s cubic-bezier(.34,1.56,.64,1) .55s}
.nm1.on .nc-eyes{animation:ncBlink 3.2s 1s infinite}
.nm1.on .nc-el{animation:ncEar .5s .6s 1}
.nm1.on .nc-er{animation:ncEar .5s .8s 1}
@media (max-width:620px){.nc-bub{font-size:11px;padding:5px 8px}}
@keyframes ncBlink{0%,92%,100%{transform:scaleY(1)}96%{transform:scaleY(.1)}}
@keyframes ncEar{50%{transform:rotate(-12deg)}}
@media (prefers-reduced-motion:reduce){.nc-hd,.nc-paw,.nc-bub,.nc-pu{transition:none!important}.nm1.on .nc-eyes,.nm1.on .nc-el,.nm1.on .nc-er{animation:none}}
.sm-n{fill:none;stroke:color-mix(in srgb,var(--accent) 55%,transparent);stroke-width:1.2;stroke-dasharray:3 3}
.sm-nt rect{fill:color-mix(in srgb,var(--accent) 7%,var(--bg));stroke:color-mix(in srgb,var(--accent) 55%,transparent);stroke-width:1.2;stroke-dasharray:4 3}
.sm-nt text{fill:var(--ink);font:500 12.5px "Plus Jakarta Sans",system-ui,sans-serif;text-anchor:middle}
.ab-tools{display:flex;align-items:flex-end;gap:10px 16px;flex-wrap:wrap;margin-top:26px}
.ab-tk{font-size:13px;color:var(--faint);padding-bottom:8px}
.ab-dock{list-style:none;margin:0;padding:0;display:flex;align-items:flex-end;gap:6px;height:58px}
.ab-dock li{position:relative;width:34px;height:34px;flex:none;outline:none;transition:width .16s ease-out,height .16s ease-out}
.ab-ti{display:block;width:100%;height:100%;border-radius:9px;overflow:hidden;box-shadow:0 0 0 1px var(--line)}
@supports (corner-shape:squircle){.ab-ti{border-radius:30%;corner-shape:squircle}}
.ab-ti img{display:block;width:100%;height:100%}
.ab-ti.inset img{transform:scale(1.143)}
.ab-dock li:focus-visible{width:46px;height:46px}
.ab-dock li:focus-visible .ab-ti{box-shadow:0 0 0 2px var(--accent)}
.ab-tl{position:absolute;left:50%;bottom:calc(100% + 8px);transform:translateX(-50%) translateY(4px);white-space:nowrap;font-size:12px;line-height:1.3;padding:4px 9px;border-radius:7px;background:var(--ink);color:var(--bg);opacity:0;pointer-events:none;transition:opacity .15s,transform .15s;z-index:3}
.ab-dock li:hover .ab-tl,.ab-dock li:focus-visible .ab-tl{opacity:1;transform:translateX(-50%)}
@media (hover:none){.ab-tl{display:none}.ab-dock{height:auto;flex-wrap:wrap}}
@media (max-width:620px){.ab-dock{height:auto;flex-wrap:wrap}.ab-dock li{width:34px;height:34px}.ab-tl{display:none}}
@media (prefers-reduced-motion:reduce){.ab-dock li{transition:none}}
.ldr{display:none}
html.ld-on .ldr{position:fixed;inset:0;z-index:9999;display:grid;place-items:center;background:var(--bg);transition:transform .75s cubic-bezier(.7,0,.2,1)}
html.ld-on{overflow:hidden}
html.ld-on.ld-out{overflow:auto}
html.ld-out .ldr{transform:translateY(-100%)}
.ldr-mk{display:inline-flex;align-items:baseline;font-size:clamp(48px,7vw,80px);font-weight:800;letter-spacing:-.05em;line-height:1;color:var(--ink)}
.ldr-mk b{opacity:0;transform:translateY(16px);animation:ldUp .55s .1s cubic-bezier(.3,1.3,.5,1) forwards}
.ldr-mk em{font-style:normal;color:transparent;-webkit-text-stroke:1.6px var(--ink);opacity:0;transform:translateY(16px);animation:ldUp .55s .3s cubic-bezier(.3,1.3,.5,1) forwards}
.ldr-mk i{display:inline-block;width:.2em;height:.2em;border-radius:50%;background:var(--accent);margin-left:.08em;transform:scale(0);animation:ldDot 1.1s .7s cubic-bezier(.3,1.6,.5,1) forwards}
.ldr-wl{position:absolute;left:0;right:0;bottom:14%;text-align:center;font-size:13px;color:var(--faint);opacity:0;animation:ldFd .45s .9s forwards;padding:0 16px}
@keyframes ldUp{to{opacity:1;transform:none}}
@keyframes ldFd{to{opacity:1}}
@keyframes ldDot{0%{transform:scale(0)}35%{transform:scale(1)}55%{transform:scale(1) translateY(-.5em)}80%,100%{transform:scale(1)}}
.st-cta{display:flex;align-items:center;flex-wrap:wrap;gap:10px 16px;margin:24px 0 0}
.st-btn{all:unset;cursor:pointer;display:inline-flex;align-items:center;gap:12px;padding:6px 18px 6px 6px;border:1px solid var(--line);border-radius:999px;font-size:15px;font-weight:500;color:var(--ink);transition:border-color .2s,background .2s}
.st-btn:hover{border-color:var(--accent);background:color-mix(in srgb,var(--accent) 6%,transparent)}
.st-btn:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.st-bp{display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:var(--accent);color:var(--bg);flex:none;transition:transform .25s cubic-bezier(.3,1.5,.5,1)}
.st-btn:hover .st-bp{transform:scale(1.08)}
.st-bp svg{width:11px;height:11px;margin-left:2px}
.st-bd{font-size:13px;color:var(--muted);font-variant-numeric:tabular-nums}
.st-q{font-size:14px;color:var(--faint)}
.st-nav{all:unset;cursor:pointer;flex:none;display:inline-flex;align-items:center;gap:8px;font-size:13.5px;font-weight:500;color:var(--ink);padding:5px 12px 5px 5px;border-radius:999px;background:color-mix(in srgb,var(--accent) 14%,var(--bg));box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--accent) 45%,var(--line));white-space:nowrap;transition:background .2s}
.st-nav:hover{background:color-mix(in srgb,var(--accent) 22%,var(--bg))}
.st-nav:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.st-nav b{display:grid;place-items:center;width:22px;height:22px;border-radius:50%;background:var(--accent);color:var(--bg)}
.st-nav b svg{width:8px;height:8px;margin-left:1px}
.st-nav small{font-size:12px;color:var(--muted);font-weight:400;font-variant-numeric:tabular-nums}
.st-dv{flex:none;width:1px;height:20px;background:var(--line);margin-left:-4px}
@media (max-width:620px){.tp-lbl{display:none}.st-nav{padding-right:10px}.st-nav small{display:none}.st-q{flex-basis:100%}}
.rmw i,.ldr-mk i,.st-bp,.st-nav b{background:var(--grad)!important}
.ft-main>.ft-nav{display:flex;justify-content:center;flex-wrap:wrap;gap:8px;width:100%;margin:0 0 clamp(28px,4vw,40px)}
.ft-pl{display:inline-flex;align-items:center;gap:8px;min-height:40px;padding:8px 18px;border-radius:999px;border:1px solid var(--line);background:var(--surface);color:var(--ink);font-size:14.5px;font-weight:500;text-decoration:none;transition:border-color .2s,color .2s}
.ft-pl svg{width:12px;height:12px;opacity:.6;transition:transform .2s,opacity .2s}
.ft-pl:hover{border-color:color-mix(in srgb,var(--accent) 55%,var(--line));color:var(--accent)}
.ft-pl:hover svg{transform:translateX(3px);opacity:1}
.ft-pl:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
@media (prefers-reduced-motion:reduce){.ft-pl,.ft-pl svg{transition:none}}
.ag-note{font-size:13px;margin-top:12px}
@media (max-width:620px){.im-row{grid-template-columns:minmax(0,1fr);gap:0}.im-row li{padding:12px 0;flex-direction:row;align-items:baseline;gap:12px}.im-row li+li{border-left:0;border-top:1px solid var(--line)}.im-n{font-size:26px;min-width:5.2em}#app .im-min .ag-cr{padding:9px 0;gap:2px 14px}}
.ag-note{font-size:13.5px;color:var(--faint);margin:6px 0 20px}
.ag-bars{list-style:none;margin:0 0 40px;padding:0;border-top:1px solid var(--line)}
.ag-bars li{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,2fr) minmax(0,1fr);gap:16px;align-items:center;padding:12px 0;border-bottom:1px solid var(--line);font-size:14.5px}
.ag-bk{color:var(--muted)}
.ag-bt{height:8px;border-radius:999px;background:color-mix(in srgb,var(--ink) 7%,transparent);overflow:hidden}
.ag-bt i{display:block;height:100%;width:var(--w);border-radius:inherit;background:var(--accent)}
.ag-bv{text-align:right;color:var(--ink);font-variant-numeric:tabular-nums}
.ag-tot .ag-bk,.ag-tot .ag-bv{color:var(--ink);font-weight:600}
@media (max-width:620px){.ag-bars li{grid-template-columns:minmax(0,1fr) auto;gap:6px 12px}.ag-bt{grid-column:1/-1;grid-row:2}}
.ag-stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin:0}
.ag-stats div{padding:18px;border-radius:18px;corner-shape:squircle;border:1px solid var(--line);background:var(--surface)}
.ag-stats dt{font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--faint)}
.ag-stats dd{margin:8px 0 0;font-size:clamp(22px,2.2vw,28px);font-weight:500;letter-spacing:-.01em;color:var(--ink)}
.ag-stats small{display:block;font-size:13px;font-weight:400;color:var(--muted);letter-spacing:0}
@media (max-width:900px){.ag-stats{grid-template-columns:repeat(2,minmax(0,1fr))}}