:root{
  --bg:#fff; --soft:#f7f7f5; --ink:#141414; --ink-2:#5c5c5c; --ink-3:#8a8a8a;
  --hair:rgba(0,0,0,.11); --accent:#c9552c;
  --nav-h:56px; --ease:cubic-bezier(.16,1,.3,1);
  --font:-apple-system,BlinkMacSystemFont,"SF Pro Display","SF Pro Text","Helvetica Neue",Helvetica,Arial,sans-serif;
  --gut:clamp(20px,4.5vw,72px);
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{font-family:var(--font);background:var(--bg);color:var(--ink);line-height:1.55;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;overflow-x:hidden}
img,video{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
::selection{background:rgba(201,85,44,.16)}

/* ── Layout: full spread ──────────────────── */
.wrap{width:100%;max-width:1560px;margin:0 auto;padding:0 var(--gut)}
.read{max-width:74ch}
section{position:relative}
.h-1{font-size:clamp(1.9rem,4.2vw,3.4rem);font-weight:660;letter-spacing:-.032em;line-height:1.1}
.h-2{font-size:clamp(1.45rem,2.6vw,2.15rem);font-weight:640;letter-spacing:-.026em;line-height:1.18}
.h-3{font-size:clamp(1.05rem,1.5vw,1.3rem);font-weight:620;letter-spacing:-.016em;line-height:1.3}
.lede{font-size:clamp(1.12rem,1.6vw,1.45rem);line-height:1.55;letter-spacing:-.012em;color:var(--ink-2);font-weight:400}
.body{font-size:clamp(1.02rem,1.1vw,1.14rem);line-height:1.68;color:var(--ink-2)}
.body+.body{margin-top:1.1em}
.sm{font-size:.95rem;line-height:1.62;color:var(--ink-2)}
.tiny{font-size:.82rem;line-height:1.55;color:var(--ink-3)}
strong{font-weight:620;color:var(--ink)}

/* ── Nav ──────────────────────────────────── */
nav{position:fixed;top:0;left:0;right:0;height:var(--nav-h);z-index:100;
  background:rgba(255,255,255,.8);backdrop-filter:saturate(180%) blur(18px);
  -webkit-backdrop-filter:saturate(180%) blur(18px);
  border-bottom:1px solid transparent;transition:border-color .4s var(--ease)}
.nav-in{max-width:1560px;margin:0 auto;padding:0 var(--gut);height:100%;
  display:flex;align-items:center;justify-content:space-between;gap:16px}
.nav-name{font-size:.95rem;font-weight:620;letter-spacing:-.014em;white-space:nowrap}
/* same shape as the cube's top bar: the name, and one line opposite */
.nav-role{font-size:.82rem;color:var(--ink-2);white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis}
.next-acts{display:flex;gap:12px;flex-wrap:wrap}
@media(max-width:620px){.nav-role{display:none}}

#bar{position:fixed;top:0;left:0;height:2px;background:var(--accent);z-index:101;width:0}

/* ── Reveal ───────────────────────────────── */
.r{opacity:0;transform:translateY(22px);transition:opacity .8s var(--ease),transform .8s var(--ease)}
.r.in{opacity:1;transform:none}
.r-d1{transition-delay:.07s}.r-d2{transition-delay:.14s}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.r{opacity:1;transform:none;transition:none}}
.stat .v{font-size:clamp(1.8rem,3.2vw,2.7rem);font-weight:680;letter-spacing:-.035em;line-height:1}
.stat .l{font-size:.9rem;color:var(--ink-2);margin-top:8px;line-height:1.45}

/* ── Story blocks ─────────────────────────── */
.two{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr));
  gap:clamp(26px,3.4vw,60px)}


/* ── Case pages ───────────────────────────── */
.back{display:inline-flex;align-items:center;gap:8px;font-size:.88rem;color:var(--ink-3);
  margin-bottom:24px;transition:gap .3s var(--ease),color .3s}
.back:hover{gap:12px;color:var(--ink)}
.case-top{padding:calc(var(--nav-h) + clamp(48px,7vw,96px)) 0 clamp(34px,4vw,56px)}
.hero-shot{margin:0 0 clamp(40px,5vw,76px);border-radius:12px;overflow:hidden;
  background:var(--soft);border:1px solid var(--hair)}
.hero-shot img{width:100%;height:auto;display:block}

/* The film was at the foot of the page, where most people never reached
   it. Surfaced instead, directly under the hero, marked so it reads as
   the thing to do first. */
.film{margin:0 0 clamp(44px,5vw,80px);padding:clamp(22px,2.6vw,34px);
  border:1px solid var(--hair);border-radius:14px;background:var(--soft)}
.film-head{display:flex;align-items:center;gap:14px;flex-wrap:wrap;
  margin-bottom:clamp(16px,2vw,22px)}
.film-tag{font-size:.72rem;font-weight:640;letter-spacing:.09em;text-transform:uppercase;
  color:#fff;background:var(--accent);padding:5px 10px;border-radius:100px;white-space:nowrap}
.film .vid{border-radius:10px;overflow:hidden;border:1px solid var(--hair);background:#000}
.film .vid video{width:100%;height:auto;display:block}
.film .cap{margin-top:12px}
.case-meta{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,170px),1fr));
  gap:clamp(18px,2.4vw,36px);margin-top:clamp(30px,3.6vw,50px);padding-top:26px;
  border-top:1px solid var(--hair)}
.case-meta .k{font-size:.8rem;color:var(--ink-3);margin-bottom:6px}
.case-meta .v{font-size:.98rem;line-height:1.5}

.step{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);
  gap:clamp(26px,4vw,72px);align-items:start;
  padding:clamp(38px,5vw,80px) 0;border-top:1px solid var(--hair)}
@media(max-width:900px){.step{grid-template-columns:1fr;gap:24px}}
.step-x{position:sticky;top:calc(var(--nav-h) + 28px)}
@media(max-width:900px){.step-x{position:static}}
.step-n{font-size:.8rem;font-weight:600;color:var(--ink-3);margin-bottom:12px}
.step h3{margin-bottom:14px}
.step-full{padding:clamp(38px,5vw,80px) 0;border-top:1px solid var(--hair)}

/* ── Images, one consistent scale ─────────── */
.shot{border-radius:10px;overflow:hidden;background:var(--soft);border:1px solid var(--hair)}
.shot img{width:100%;height:auto}
.cap{font-size:.86rem;color:var(--ink-3);margin-top:10px;line-height:1.5}
.cap-top{margin:0 0 11px}

/* ── Live embeds ──────────────────────────────
   Figma hands out a fixed 800x450 iframe. Held in a ratio box instead,
   so it fills the column at any width rather than sitting small in the
   middle of it. Taller on a phone, where 16:9 leaves a prototype the
   size of a stamp. */
.figma{position:relative;width:100%;aspect-ratio:16/9;overflow:hidden;
  border:1px solid var(--hair);border-radius:10px;background:var(--soft)}
.figma iframe{position:absolute;inset:0;width:100%;height:100%;border:0;display:block}
.embed+.embed{margin-top:clamp(30px,3.6vw,56px)}
.step-full>h3:first-child{margin-top:0}
@media(max-width:700px){.figma{aspect-ratio:3/4}}
.thumbs{--cg:clamp(10px,1.2vw,16px);display:grid;gap:var(--cg);align-items:start;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr))}
.thumbs-2{grid-template-columns:repeat(auto-fit,minmax(min(100%,420px),1fr))}
.thumbs-3{grid-template-columns:repeat(3,minmax(0,1fr))}
@media(max-width:900px){.thumbs-3{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:600px){.thumbs-3{grid-template-columns:1fr}}
/* Beside a step, every artefact gets the full column to itself, one below
   the next. These are dense boards and slides; two or four abreast in half
   a page makes them unreadable. Rows of phone screens are the exception,
   since they are narrow and meant to be compared side by side. */
.step .thumbs:not(.phones){grid-template-columns:1fr}
.thumbs .shot{cursor:zoom-in;transition:transform .45s var(--ease)}
.thumbs .shot:hover{transform:scale(1.02)}
/* no forced ratio: each artefact keeps its own shape, so nothing is cut */
.thumbs .shot img{width:100%;height:auto;display:block}
.thumbs.phones .shot img{aspect-ratio:9/16;object-fit:contain;background:var(--soft)}
.zoom{cursor:zoom-in}

/* ── Lists & panels ───────────────────────── */
.list{list-style:none}
.list li{position:relative;padding-left:22px;margin-bottom:12px;font-size:1rem;line-height:1.62;
  color:var(--ink-2)}
.list li::before{content:"";position:absolute;left:2px;top:10px;width:5px;height:5px;border-radius:50%;
  background:var(--accent)}
.list.num{counter-reset:n}
.list.num li{padding-left:36px}
.list.num li::before{counter-increment:n;content:counter(n,decimal-leading-zero);width:auto;height:auto;
  background:none;top:0;font-size:.8rem;font-weight:620;color:var(--ink-3)}

.qgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,250px),1fr));
  gap:clamp(14px,1.6vw,22px)}
.qcard{border:1px solid var(--hair);border-radius:12px;padding:clamp(18px,2vw,26px);background:var(--bg)}
.qcard .who{font-size:.98rem;font-weight:620;margin-bottom:3px}
.qcard .tagline{font-size:.85rem;color:var(--ink-3);margin-bottom:12px}
.qcard blockquote{font-size:.98rem;line-height:1.6;color:var(--ink)}
.qcard .n{font-size:.78rem;font-weight:620;color:var(--accent);margin-bottom:8px}
.qcard p{font-size:.94rem;line-height:1.6;color:var(--ink-2)}
.panel{border:1px solid var(--hair);border-radius:12px;padding:clamp(18px,2vw,26px);background:var(--soft)}
.panel h4{font-size:1rem;font-weight:620;margin-bottom:10px}
.link{display:inline-flex;align-items:center;gap:7px;color:var(--accent);font-weight:560;
  font-size:1rem;margin-top:18px}
.link:hover{gap:11px}
.link span{transition:transform .3s var(--ease)}

/* ── Cards ────────────────────────────────── */
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr));
  gap:clamp(20px,2.6vw,36px);margin-top:clamp(34px,4vw,56px)}
.card{display:flex;flex-direction:column}
.card h3{margin:16px 0 8px}
.card .card-t{font-size:.84rem;color:var(--ink-3);margin-bottom:8px}
.card p{font-size:.98rem;line-height:1.62;color:var(--ink-2);max-width:52ch}

.vid{border-radius:10px;overflow:hidden;border:1px solid var(--hair);background:#000}
.vid video{width:100%;display:block}

.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(50%,150px),1fr));
  gap:clamp(20px,2.6vw,44px)}
.kpi .v{font-size:clamp(1.6rem,2.8vw,2.4rem);font-weight:680;letter-spacing:-.03em;line-height:1}
.kpi .l{font-size:.9rem;color:var(--ink-2);margin-top:8px;line-height:1.45}

.next{display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;
  padding:clamp(34px,4vw,56px) 0;border-top:1px solid var(--hair)}
.btn{display:inline-flex;align-items:center;gap:9px;background:var(--ink);color:#fff;
  font-weight:560;font-size:1rem;padding:13px 26px;border-radius:980px;transition:opacity .3s}
.btn:hover{opacity:.85}
.btn-o{background:transparent;color:var(--ink);border:1px solid var(--hair)}
footer{padding:36px 0 60px;font-size:.9rem;color:var(--ink-3);display:flex;flex-wrap:wrap;
  gap:12px 30px;justify-content:space-between;border-top:1px solid var(--hair);margin-top:20px}

#lb{position:fixed;inset:0;z-index:200;display:none;align-items:center;justify-content:center;
  padding:clamp(56px,7vw,96px) clamp(56px,7vw,110px);
  background:rgba(255,255,255,.985);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
#lb.on{display:flex}
.lb-stage{margin:0;display:flex;flex-direction:column;align-items:center;gap:14px;
  max-width:100%;max-height:100%}
#lb img{max-width:100%;max-height:82vh;width:auto;height:auto;object-fit:contain;
  border-radius:8px;border:1px solid var(--hair);background:var(--soft)}
#lb figcaption{display:flex;gap:14px;align-items:baseline;font-size:.86rem;color:var(--ink-3);
  text-align:center;flex-wrap:wrap;justify-content:center}
.lb-count{font-variant-numeric:tabular-nums;color:var(--ink-2);font-weight:600;white-space:nowrap}
.lb-close,.lb-nav{position:fixed;z-index:2;width:46px;height:46px;border-radius:50%;
  border:1px solid var(--hair);background:rgba(255,255,255,.94);color:var(--ink);
  display:grid;place-items:center;cursor:pointer;box-shadow:0 5px 18px rgba(20,20,20,.09);
  transition:border-color .3s,transform .3s var(--ease),opacity .3s}
.lb-close svg,.lb-nav svg{width:20px;height:20px}
.lb-close:hover,.lb-nav:hover{border-color:rgba(0,0,0,.3);transform:scale(1.06)}
.lb-close{top:clamp(14px,2.2vw,28px);right:clamp(14px,2.2vw,28px)}
.lb-nav{top:50%;margin-top:-23px}
.lb-prev{left:clamp(10px,1.6vw,26px)}
.lb-next{right:clamp(10px,1.6vw,26px)}
.lb-nav[hidden]{display:none}
@media(max-width:640px){
  #lb{padding:64px 12px}
  .lb-nav{top:auto;bottom:16px;margin-top:0}
  .lb-prev{left:calc(50% - 56px)}.lb-next{right:calc(50% - 56px)}
}

/* ── Carousel: four at a time, snapping ───── */
.thumbs-4{grid-template-columns:repeat(4,minmax(0,1fr))}
@media(max-width:1100px){.thumbs-4{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:700px){.thumbs-4{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* ── Credit ───────────────────────────────── */
.credit-bar{border-top:1px solid var(--hair);padding:26px 0 34px}
.credit{font-size:.78rem;color:var(--ink-3);letter-spacing:.01em}
@media(max-width:560px){.credit .c-full{display:none}}
footer .credit{margin-top:10px}