/* ─── Tokens ─────────────────────────────────────────────── */
:root{
  --paper:#F7F7F2;
  --ink:#000;
  --ink-2:#3A3A36;
  --rule:2px solid var(--ink);
  --hair:1px solid var(--ink);
  --sans:"Archivo",system-ui,sans-serif;
  --pad:clamp(14px,1.6vw,22px);
  --ease:cubic-bezier(.2,.8,.2,1);

  /* brand swatches: each project keeps its own palette */
  --yuna-bg:#EDE5D8; --yuna-ink:#115430; --yuna-acc:#66BA24;
  --it-a:#DB7B5C; --it-b:#A4D1D0; --it-linen:#F3EBEA; --it-ink:#141414;
  --ak-bg:#2D3CFF; --ak-acc:#9BE564;
  --rep-bg:#C8F03C; --rep-ink:#0E0E0E;
  --ace-bg:#0F3B3A; --ace-acc:#7FF2D6;
  --fg-bg:#0D2238; --fg-acc:#F2B33D;
  --layer-bg:#0B0B0E; --layer-acc:#A48CFD; --layer-mint:#A3F9C0;
}

/* ─── Base ───────────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important;animation:none!important}}
body{background:var(--paper);color:var(--ink);font:400 17px/1.5 var(--sans);font-stretch:100%;-webkit-font-smoothing:antialiased;overflow-x:clip}
img,video{display:block;max-width:100%}
a{color:inherit}
:focus-visible{outline:3px solid #000;outline-offset:2px;box-shadow:0 0 0 6px #fff}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:-999px;top:8px;background:var(--ink);color:var(--paper);padding:8px 12px;z-index:10}
.skip:focus{left:8px}

/* ─── The grid: every block is a cell with a 2px rule ───── */
.sheet{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));border-left:var(--rule);border-top:var(--rule);max-width:1680px;margin:0 auto}
.c{border-right:var(--rule);border-bottom:var(--rule);padding:var(--pad);min-width:0;position:relative}
.s12{grid-column:span 12}.s9{grid-column:span 9}.s8{grid-column:span 8}.s7{grid-column:span 7}.s6{grid-column:span 6}.s5{grid-column:span 5}.s4{grid-column:span 4}.s3{grid-column:span 3}
.flush{padding:0}

/* ─── Type ───────────────────────────────────────────────── */
.tok{font-size:13px;font-weight:500;letter-spacing:.01em}
.cond{font-stretch:62%}
.mega{font-weight:900;font-stretch:62%;line-height:.8;letter-spacing:-.015em}
.h2{font-weight:800;font-stretch:72%;font-size:clamp(34px,4.2vw,68px);line-height:.92;letter-spacing:-.01em}
.h3{font-weight:800;font-stretch:80%;font-size:clamp(22px,2vw,30px);line-height:1}
.lede{font-weight:600;font-stretch:88%;font-size:clamp(20px,1.75vw,28px);line-height:1.15}
.body{max-width:58ch}
.body p+p{margin-top:.9em}
.dim{color:var(--ink-2)}
.stat{font-weight:900;font-stretch:62%;font-size:clamp(48px,5.4vw,96px);line-height:.82;letter-spacing:-.01em}

/* ─── Top bar ────────────────────────────────────────────── */
.top{display:flex;justify-content:space-between;align-items:center;gap:16px;font-weight:600;font-stretch:108%}
.top a{text-decoration:none}
.top .home{font-weight:800;white-space:nowrap}
.top nav{display:flex;gap:clamp(12px,2vw,26px)}
.top nav a:hover,.top .home:hover{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:4px}

/* ─── Hero ───────────────────────────────────────────────── */
.hero-eq{grid-column:span 8;padding-top:clamp(18px,2.4vw,34px);padding-bottom:clamp(10px,1.4vw,18px)}
/* hero word cloud: js/cloud.js packs the role titles, as project-swatch chips, around the headline */
.hero-eq{min-height:clamp(420px,42vw,700px)}
.cloud{position:absolute;inset:var(--pad);display:flex;flex-wrap:wrap;align-content:flex-start;gap:.3em;font-size:clamp(12px,1.3vw,22px);line-height:1}
.cloud>span{visibility:hidden;font-weight:700;padding:.15em .35em;border:var(--hair)}
.cloud>.big{font-size:4em;font-weight:900;font-stretch:62.5%;border:0;padding:0}
.cloud.on>span{display:none}
.cloud svg{display:block;overflow:visible}
.cloud .hd{fill:var(--ink);letter-spacing:-.015em}
.cloud .it-a{stop-color:var(--it-a)}.cloud .it-b{stop-color:var(--it-b)}
/* chips: swatch fill, 2px rule, lift onto a hard shadow on hover (same language as .phone/.slab) */
.cloud .chip{transform-box:fill-box;transform-origin:center;transition:transform .18s var(--ease);animation:chipIn .55s var(--ease) backwards}
.cloud .chip .bg{stroke:var(--ink);stroke-width:2px}
.cloud .chip .sh{fill:var(--ink);opacity:0;transition:transform .18s var(--ease),opacity .18s}
.cloud .chip:hover{transform:translate(-6px,-6px)}
.cloud .chip:hover .sh{opacity:1;transform:translate(6px,6px)}
.cloud .chip.v:hover{transform:translate(6px,-6px)}
.cloud .chip.v:hover .sh{transform:translate(-6px,6px)}
.cloud .yuna .bg{fill:var(--yuna-bg)}.cloud .yuna text{fill:var(--ink)}
.cloud .it .bg{fill:url(#cloud-it)}.cloud .it text{fill:var(--ink)}
.cloud .ak .bg{fill:var(--ak-bg)}.cloud .ak text{fill:#fff}
.cloud .rep .bg{fill:var(--rep-bg)}.cloud .rep text{fill:var(--ink)}
.cloud .ace .bg{fill:var(--ace-bg)}.cloud .ace text{fill:#EFFFFA}
.cloud .layer .bg{fill:var(--layer-bg)}.cloud .layer text{fill:#F4F4F5}
@keyframes chipIn{from{opacity:0;transform:scale(.7)}}
/* marks: small moving details, in the cloud gaps and (sparingly) on the case studies and footer */
.mk{transform-box:fill-box;transform-origin:center}
.mk-star{fill:var(--rep-bg);stroke:var(--ink);stroke-width:2px;stroke-linejoin:round;animation:mkSpin 9s linear infinite}
.mk-dot{fill:var(--it-a);stroke:var(--ink);stroke-width:2px;animation:mkBob 3.2s ease-in-out infinite}
.mk-plus{fill:none;stroke:var(--ak-bg);stroke-width:3px;stroke-linecap:square;animation:mkTurn 4s var(--ease) infinite}
.mk-ring{fill:none;stroke:var(--ace-bg);stroke-width:2.5px;animation:mkPulse 2.8s ease-in-out infinite}
.mk-squig{fill:none;stroke:var(--ink);stroke-width:2.5px;stroke-linecap:round;stroke-dasharray:6 4;animation:mkDash 1.6s linear infinite}
@keyframes mkSpin{to{transform:rotate(360deg)}}
@keyframes mkBob{50%{transform:translateY(-22%)}}
@keyframes mkTurn{0%,40%{transform:rotate(0)}60%,100%{transform:rotate(90deg)}}
@keyframes mkPulse{50%{transform:scale(1.35);opacity:.55}}
@keyframes mkDash{to{stroke-dashoffset:-20}}
.deco{position:absolute;width:24px;height:24px;overflow:visible;pointer-events:none}
.deco.wide{width:48px}
.foot .decos{display:flex;align-items:center;gap:14px}
.foot .deco{position:static}
.hero-side{grid-column:span 4;display:flex;flex-direction:column;justify-content:space-between;gap:28px}
.hero-side dl{display:grid;grid-template-columns:auto 1fr;gap:6px 14px;font-size:15px;border-top:var(--hair);padding-top:12px}
.hero-side dt{font-weight:700}

/* hero legend: the brands, as links */
.legend{display:grid;grid-template-columns:repeat(3,1fr);border:var(--rule)}
.legend a{aspect-ratio:1.5/1;display:flex;align-items:flex-end;justify-content:space-between;gap:6px;padding:8px;font-size:13px;font-weight:700;text-decoration:none;border-right:var(--rule);position:relative;transition:transform .18s var(--ease),box-shadow .18s var(--ease)}
.legend a::after{content:'→';opacity:0;transform:translateX(-8px);transition:opacity .2s,transform .25s var(--ease)}
.legend a:nth-child(3n){border-right:0}
.legend a:nth-child(-n+3){border-bottom:var(--rule)}
/* hover: lift onto a hard shadow, like the word-cloud chips; the shadow fills the vacated cell */
.legend a:hover,.legend a:focus-visible{z-index:1;transform:translate(-6px,-6px);box-shadow:0 0 0 2px var(--ink),6px 6px 0 2px var(--ink)}
.legend a:hover::after,.legend a:focus-visible::after{opacity:1;transform:none}

/* ─── Project swatches ───────────────────────────────────── */
.sw{display:flex;flex-direction:column;justify-content:space-between;overflow:hidden;text-decoration:none;color:inherit;isolation:isolate}
.sw .meta{display:flex;justify-content:space-between;gap:12px;position:relative;z-index:2}
.sw .name{position:relative;z-index:2}
.sw .name h3{font-weight:800;font-stretch:72%;font-size:clamp(40px,4.4vw,76px);line-height:.88}
.sw .name p{min-height:3.6em;margin-top:10px;font-weight:600;font-stretch:90%;font-size:clamp(16px,1.25vw,19px);line-height:1.2;max-width:28ch}
.sw .stat{display:block;margin-top:14px}
.sw .stat small{color:inherit;display:block;font-size:13px;font-weight:500;font-stretch:100%;letter-spacing:.01em;margin-top:6px;line-height:1.3}
.sw .box{position:relative;flex:1;min-height:clamp(200px,20vw,330px);margin:12px 0 24px}
.sw .art{position:absolute;z-index:1;max-height:100%;object-fit:cover;object-position:top;transition:transform .55s var(--ease)}
.sw:hover .art,.sw:focus-visible .art{transform:translate(-2%,-3%) rotate(0deg)!important}
.sw .go{font-weight:700}
.sw:hover .go{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:4px}
.sw.yuna{background:var(--yuna-bg)}.sw.yuna .stat{color:var(--yuna-ink)}
.sw.it{background:linear-gradient(155deg,var(--it-a) 0%,#C9A08A 48%,var(--it-b) 100%)}
.sw.ak{background:var(--ak-bg);color:#fff}.sw.ak .stat{color:var(--ak-acc)}.sw.ak .stat small{color:#fff}
.sw.rep{background:var(--rep-bg);color:var(--rep-ink)}
.sw.ace{background:var(--ace-bg);color:#EFFFFA}.sw.ace .stat{color:var(--ace-acc)}
.sw.layer{background:radial-gradient(70% 60% at 80% 20%,rgba(147,51,234,.45),transparent 70%),var(--layer-bg);color:#F4F4F5}.sw.layer .stat{color:var(--layer-mint)}
.phone{border-radius:clamp(14px,1.6vw,26px);border:2px solid var(--ink);box-shadow:10px 10px 0 var(--ink)}
.slab{border:2px solid var(--ink);box-shadow:10px 10px 0 var(--ink)}

/* ─── Equation band ──────────────────────────────────────── */
.eq{display:flex;flex-direction:column;gap:14px}
.eq .op{font-weight:900;font-stretch:62%;font-size:clamp(40px,4vw,64px);line-height:.8}
.eq h2,.eq h3{font-weight:900;font-stretch:62%;font-size:clamp(40px,4.2vw,70px);line-height:.85}
.eq p{max-width:36ch}
.eq .proof{min-height:4.5em;margin-top:auto;padding-top:14px;border-top:var(--hair);font-size:14px}
.eq.result{background:var(--ink);color:var(--paper)}
.eq.result .proof{border-color:var(--paper)}

/* ─── Summary row: problem, what I did, result ──────────── */
.sum{display:flex;flex-direction:column;gap:12px}
.sum .tok{font-weight:700}
.sum p:not(.tok){font-weight:600;font-stretch:90%;font-size:clamp(18px,1.35vw,22px);line-height:1.22;max-width:36ch}
.sum.result{background:var(--ink);color:var(--paper)}
.sum.result .stat{color:var(--rep-bg)}

/* ─── Section heads ──────────────────────────────────────── */
.head{display:flex;justify-content:space-between;align-items:end;gap:20px;flex-wrap:wrap}
.head .tok{max-width:44ch;text-align:right}

/* ─── Identity wall ──────────────────────────────────────── */
.id{display:flex;flex-direction:column;gap:10px;overflow:hidden}
.id figure{flex:1;display:grid;place-items:center;min-height:0}
.id.flush{min-height:clamp(260px,28vw,480px)}
.q-card img{object-fit:contain!important}
.id img{width:100%;height:100%;object-fit:cover}
.id figcaption,.id .cap{display:flex;justify-content:space-between;gap:10px;font-size:13px;font-weight:500}
.id.dark{background:var(--fg-bg);color:#E9EEF5}
.id.ak{background:var(--ak-bg);color:#fff}
.id.light{background:#fff}
.id.contain img{object-fit:contain}

/* identity cells: fixed ratios so nothing letterboxes */
.idc{padding:0;aspect-ratio:1;overflow:hidden;background:#0D2238}
.idc.wide{aspect-ratio:16/9}
.idc.white{background:#fff}
.idc img{width:100%;height:100%;object-fit:cover}
.idc.white{padding:var(--pad) var(--pad) 56px}
.idc.white img{object-fit:contain}
.idc figcaption{position:absolute;left:var(--pad);bottom:var(--pad);background:var(--paper);border:var(--hair);padding:3px 8px;font-size:13px;font-weight:600}

/* ─── Quotes ─────────────────────────────────────────────── */
.q blockquote{font-weight:700;font-stretch:84%;font-size:clamp(20px,1.7vw,27px);line-height:1.15}
.q cite{display:block;margin-top:16px;font-style:normal;font-size:14px}

/* ─── Experience ─────────────────────────────────────────── */
.xp{width:100%;border-collapse:collapse;font-size:16px}
.xp td{padding:10px 12px 10px 0;border-bottom:var(--hair);vertical-align:baseline}
.xp tr:last-child td{border-bottom:0}
.xp td:first-child{white-space:nowrap;font-weight:600;width:1%}
.xp .co{font-weight:800;font-stretch:80%;font-size:19px}
.xp td:last-child{color:var(--ink-2)}

/* ─── Contact ────────────────────────────────────────────── */
.cta{background:var(--rep-bg)}
.cta .mail{display:inline-block;font-weight:900;font-stretch:62%;font-size:clamp(34px,5.6vw,92px);line-height:.85;text-decoration:none;overflow-wrap:anywhere;margin-top:18px}
.cta .mail:hover{text-decoration:underline;text-decoration-thickness:6px;text-underline-offset:8px}
.offer li{list-style:none;padding:12px 0;border-bottom:var(--hair)}
.offer li:last-child{border-bottom:0}
.offer b{display:block;font-weight:800;font-stretch:80%;font-size:21px}
.links{display:flex;gap:20px;flex-wrap:wrap;font-weight:700}
.foot{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;font-size:14px}

/* ─── Case page ──────────────────────────────────────────── */
.case-title{display:flex;flex-direction:column;justify-content:space-between;gap:28px;min-height:clamp(340px,40vw,620px)}
.case-title h1{font-size:clamp(64px,8.6vw,160px)}
.hero-fig{min-height:clamp(340px,40vw,640px)}
.hero-fig .stage{padding-right:clamp(24px,4vw,64px)}
.hero-fig .stage img{max-width:240px}
.case-title .lede{max-width:24ch}
.spec{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:14px 24px;font-size:15px}
.spec dt{font-size:13px;font-weight:500;margin-bottom:2px}
.spec dd{font-weight:700;font-stretch:90%;line-height:1.25}
.spec dd{margin:0}
.spec .div{grid-column:1/-1;border-top:var(--hair);margin:4px 0}
.fig{background:var(--paper);overflow:hidden;display:flex;flex-direction:column}
.fig>img,.fig>video{flex:1;min-height:0}
.fig>.stage{flex:1}
.fig img,.fig video{width:100%;height:100%;object-fit:cover}
.fig.contain img{object-fit:contain}
.fig .figtag{font-weight:900;font-stretch:62.5%;font-size:clamp(28px,2.6vw,44px);line-height:1;padding:14px var(--pad) 12px;border-bottom:var(--rule);color:var(--ink)}
.fig figcaption{font-size:13px;font-weight:500;padding:10px var(--pad);border-top:var(--rule);background:var(--paper);color:var(--ink)}
.stage{display:flex;justify-content:center;align-items:center;gap:clamp(10px,2.4vw,40px);padding:clamp(24px,5vw,80px) clamp(14px,3vw,48px)}
.stage img{flex:1 1 0;min-width:0;max-width:300px;width:auto;height:auto}
.story h2{margin-bottom:18px}
.stick{position:sticky;top:var(--pad)}
.story .step{font-weight:900;font-stretch:62%;font-size:clamp(28px,2.6vw,40px);line-height:1;margin-bottom:12px}
.missed{background:var(--ink);color:var(--paper)}
.missed .h2{color:var(--rep-bg)}
.nums{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:24px}
.nums div small{display:block;font-size:14px;font-weight:500;margin-top:8px;line-height:1.3;max-width:24ch}
.before{display:grid;place-items:center;text-align:center;min-height:clamp(260px,30vw,460px);background:repeating-linear-gradient(-45deg,transparent 0 14px,rgba(0,0,0,.07) 14px 16px)}
.before b{display:block;font-weight:900;font-stretch:62%;font-size:clamp(34px,3.6vw,56px);line-height:.9}
.next{display:flex;justify-content:space-between;align-items:end;gap:20px;text-decoration:none;min-height:200px}
.next:hover .mega{text-decoration:underline;text-decoration-thickness:6px;text-underline-offset:10px}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chips span{border:var(--hair);padding:3px 10px;border-radius:99px;font-size:13px;font-weight:600}
.swatchrow{display:grid;grid-template-columns:repeat(auto-fit,minmax(90px,1fr));gap:0;border:var(--rule)}
.swatchrow div{aspect-ratio:1;display:flex;flex-direction:column;justify-content:flex-end;padding:8px;font-size:12px;font-weight:600;border-right:var(--hair)}
.swatchrow div:last-child{border-right:0}

/* ─── Responsive ─────────────────────────────────────────── */
@media (max-width:1080px){
  .hero-eq,.hero-side{grid-column:span 12}
  .hero-eq{min-height:0;aspect-ratio:16/10}
  .idc.t12{aspect-ratio:16/9}
  .t6{grid-column:span 6}.t12{grid-column:span 12}
}
@media (max-width:720px){
  .sheet>.c{grid-column:span 12}
  .m6{grid-column:span 6!important}
  .top{flex-wrap:wrap}
  .legend{display:none}
  .top{font-size:15px}.top nav{gap:12px}
  .hero-eq{aspect-ratio:1}
  .case-title h1{font-size:19vw}
  .head .tok{text-align:left}
  .xp td:last-child{display:none}
  .phone,.slab{box-shadow:6px 6px 0 var(--ink)}
}

/* ─── Type polish, targets, video control ─────────────────── */
.h2,.mega,.lede,.sw .name p,.head .tok,.q blockquote{text-wrap:balance}
.body p,.eq p,.offer li{text-wrap:pretty}
.links a,.top nav a{display:inline-block;padding:10px 0}
.vid{position:relative}
.vid button{position:absolute;right:var(--pad);top:var(--pad);z-index:2;font:700 13px var(--sans);background:var(--paper);color:var(--ink);border:var(--rule);padding:6px 12px;cursor:pointer}