:root{
  --paper:#F7F1E7;
  --ink:#171926;
  --ink-60:rgba(23,25,38,.62);
  --ink-30:rgba(23,25,38,.30);
  --ink-12:rgba(23,25,38,.12);
  --gold:#E0CA3C;
  --gold-deep:#9A7B1F;
  --steel:#3E5C76;
  --steel-soft:#8FA6C4;
  --violet:#3E5C76;
  --rose:#9A7B1F;
  --teal:#3E5C76;
  --lime:#9A7B1F;
  --blue:#3E5C76;
  --amber:#9A7B1F;
  --amber-ink:#9A7B1F;
  --blue-ink:#3E5C76;
  --teal-ink:#3E5C76;
  --lime-ink:#9A7B1F;
  --ink-45:rgba(23,25,38,.46);
  --display:'Syne',sans-serif;
  --body:'Instrument Sans',sans-serif;
  --mono:'Instrument Sans',sans-serif;
  --gutter:clamp(20px,5vw,88px);
  --ease:cubic-bezier(.22,1,.36,1);
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  background:var(--paper);
  color:var(--ink);
  font-family:var(--body);
  font-size:17px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:clip;
}
html{overflow-x:clip}
html[data-theme="dark"]{
  --paper:#171926;
  --ink:#F8F7F4;
  --ink-60:rgba(248,247,244,.64);
  --ink-45:rgba(248,247,244,.48);
  --ink-30:rgba(248,247,244,.32);
  --ink-12:rgba(248,247,244,.14);
  --violet:#8FA6C4;
  --rose:#E0CA3C;
  --teal:#8FA6C4;
  --lime:#E0CA3C;
  --blue:#8FA6C4;
  --amber:#E0CA3C;
  --teal-ink:#8FA6C4;
  --lime-ink:#E0CA3C;
  --blue-ink:#8FA6C4;
  --amber-ink:#E0CA3C;
}
html{background:var(--paper)}
body{transition:background-color .5s var(--ease),color .5s var(--ease)}
@media(max-width:1024px){:root{--gutter:28px}}
::selection{background:var(--ink);color:var(--paper)}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}

/* ---------- scroll progress: orientation, in the four brand colors ---------- */
.progress{
  position:fixed;top:0;left:0;height:3px;width:100%;
  transform-origin:0 50%;transform:scaleX(0);
  background:var(--steel);
  z-index:60;
}

/* ---------- wayfinding rail: tells you where you are ---------- */
.rail{
  position:fixed;left:calc(var(--gutter)/2 - 8px);top:50%;
  transform:translateY(-50%) rotate(180deg);
  writing-mode:vertical-rl;
  font-family:var(--mono);font-weight:500;font-size:11px;letter-spacing:.22em;text-transform:uppercase;
  color:var(--ink-45);z-index:40;transition:color .5s var(--ease);
  pointer-events:none;white-space:nowrap;
}
@media(max-width:900px){.rail{display:none}}

/* ---------- cursor dot (desktop, reduced-motion gated in JS) ---------- */
.dot{
  position:fixed;top:0;left:0;width:10px;height:10px;border-radius:50%;
  background:var(--ink);pointer-events:none;z-index:70;
  transform:translate(-50%,-50%);
  transition:width .25s var(--ease),height .25s var(--ease),background-color .25s var(--ease),opacity .3s;
  mix-blend-mode:exclusion;opacity:0;
}
.dot.on{opacity:1}
.dot.grow{width:56px;height:56px;background:#fff}
@media(pointer:coarse){.dot{display:none}}

/* ---------- flowfield: soft colour orbs that drift and shift hue as you move between sections ---------- */
.flowfield{position:fixed;inset:0;z-index:-1;overflow:hidden;pointer-events:none}
.forb{
  position:absolute;top:22%;left:78%;width:52vw;aspect-ratio:1;border-radius:50%;
  transform:translate(-50%,-50%);
  background:var(--fc,var(--gold));
  filter:blur(min(90px,9vw));opacity:.28;
  transition:background-color 1.6s var(--ease);
  will-change:transform;
}
.forb-b{top:68%;left:22%;width:44vw;opacity:.22;background:var(--fc2,var(--steel))}
html[data-theme="dark"] .forb{opacity:.22}
html[data-theme="dark"] .forb-b{opacity:.17}
@media(prefers-reduced-motion:reduce){.forb{transition:none}}
@media(max-width:700px){.flowfield{display:none}}

/* ---------- nav ---------- */
nav{
  position:fixed;top:0;left:0;right:0;z-index:50;
  display:flex;justify-content:space-between;align-items:center;
  padding:22px var(--gutter);
  color:var(--ink);
}
nav .mark{font-family:var(--display);font-weight:800;font-size:20px;letter-spacing:.04em}
nav ul{display:flex;gap:clamp(18px,3vw,40px);list-style:none;font-family:var(--mono);font-weight:500;font-size:12px;letter-spacing:.14em;text-transform:uppercase}
nav ul a{position:relative;padding-bottom:3px}
nav ul a::after{content:'';position:absolute;left:0;bottom:0;height:1px;width:100%;background:currentColor;transform:scaleX(0);transform-origin:100% 50%;transition:transform .35s var(--ease)}
nav ul a:hover::after,nav ul a:focus-visible::after{transform:scaleX(1);transform-origin:0 50%}
@media(max-width:700px){nav ul li:nth-child(2){display:none}}

/* ---------- hero ---------- */
.hero{
  min-height:100svh;
  display:flex;flex-direction:column;justify-content:flex-end;
  padding:0 var(--gutter) clamp(40px,7vh,80px);
  position:relative;
}
.hero h1{
  font-family:var(--display);font-weight:800;
  font-size:clamp(64px,15.5vw,240px);
  line-height:.88;letter-spacing:-.02em;text-transform:uppercase;
  user-select:none;
}
.hero h1 .row{display:block;overflow:hidden}
.hero h1 .row span{display:inline-block;transform:translateY(0);animation:rise 1s var(--ease) both}
.hero h1 .row:nth-child(1) span{animation-delay:.05s}
.hero h1 .row:nth-child(2) span{animation-delay:.16s}
.hero h1 .row.offset{padding-left:clamp(40px,14vw,320px)}
.hero h1 .thin{
  font-size:clamp(13px,1.4vw,20px);font-family:var(--mono);font-weight:500;font-weight:400;
  letter-spacing:.3em;vertical-align:super;color:var(--ink-60);
}
@keyframes rise{from{transform:translateY(110%)}to{transform:translateY(0)}}
.hero .meta{
  display:flex;justify-content:space-between;align-items:flex-end;gap:32px;
  margin-top:clamp(28px,5vh,56px);
  border-top:1px solid var(--ink-12);padding-top:24px;
  flex-wrap:wrap;
}
.hero .meta p{max-width:46ch;font-size:clamp(16px,1.35vw,20px);color:var(--ink-60)}
.hero .meta p strong{color:var(--ink);font-weight:500}
.hero .meta .links{display:flex;gap:28px;font-family:var(--mono);font-weight:500;font-size:12px;letter-spacing:.16em;text-transform:uppercase}
.hero .meta .links a{display:inline-flex;align-items:center;gap:8px;padding-bottom:4px;border-bottom:1px solid var(--ink)}
.hero .meta .links a:hover{color:var(--violet);border-color:var(--violet)}
.hero .scrollcue{
  position:absolute;right:var(--gutter);top:38vh;
  font-family:var(--mono);font-weight:500;font-size:11px;letter-spacing:.24em;text-transform:uppercase;
  writing-mode:vertical-rl;color:var(--ink-45);
}
@media(max-width:700px){.hero .scrollcue{display:none}}

/* ---------- section shells ---------- */
section{padding:clamp(80px,14vh,160px) var(--gutter)}
.kicker{
  display:flex;align-items:baseline;gap:20px;
  font-family:var(--mono);font-weight:500;font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-60);
  margin-bottom:clamp(40px,7vh,88px);
}
.kicker::after{content:'';flex:1;height:1px;background:var(--ink-12)}
.reveal{transform:translateY(36px);transition:transform 1s var(--ease)}
.reveal.in{transform:none}
.fly{opacity:0;transform:translateY(72px) scale(.972);transition:opacity .85s var(--ease),transform 1s var(--ease)}
.fly.in{opacity:1;transform:none}

/* ---------- work index ---------- */
.work{padding-top:clamp(60px,10vh,120px)}

/* ---------- clients ---------- */
.clients ul{list-style:none;max-width:none}
.clients li:first-child a{border-top:1px solid var(--ink-12)}
.clients a{display:flex;align-items:baseline;justify-content:space-between;gap:24px;
  padding:clamp(14px,2.2vh,24px) 0;border-bottom:1px solid var(--ink-12);
  transition:padding-left .4s var(--ease)}
.clients .cname{font-family:var(--display);font-weight:800;font-size:clamp(24px,3.6vw,54px);
  line-height:1.05;letter-spacing:-.015em;color:var(--ink-30);transition:color .35s var(--ease)}
.clients .csec{font-family:var(--mono);font-weight:500;font-size:11px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--ink-30);opacity:0;transform:translateX(10px);white-space:nowrap;flex:none;
  transition:opacity .4s var(--ease),transform .4s var(--ease),color .35s var(--ease)}
.clients .csec::after{content:' \2197'}
.clients a:hover,.clients a:focus-visible{padding-left:clamp(10px,1.5vw,24px)}
.clients a:hover .cname,.clients a:focus-visible .cname{color:var(--hc)}
.clients a:hover .csec,.clients a:focus-visible .csec{opacity:1;transform:none;color:var(--ink-60)}
.clients li:nth-child(4n+1){--hc:var(--violet)}
.clients li:nth-child(4n+2){--hc:var(--rose)}
.clients li:nth-child(4n+3){--hc:var(--teal-ink)}
.clients li:nth-child(4n+4){--hc:var(--lime-ink)}
@media(max-width:900px){.clients a{flex-direction:column;gap:6px;align-items:flex-start}.clients .csec{opacity:1;transform:none;white-space:normal}}

/* ---------- testimonials ---------- */
/* ---------- about interstitial ---------- */
.about-intro{padding:clamp(64px,13vh,150px) var(--gutter);border-top:1px solid var(--ink-12)}
.ai-split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(32px,6vw,90px);align-items:center;max-width:1200px;margin-top:clamp(24px,4vh,48px)}
.ai-head{font-family:var(--display);font-weight:800;text-transform:uppercase;font-size:clamp(23px,3.8vw,50px);line-height:.92;letter-spacing:-.02em;overflow-wrap:anywhere}
.ai-body{border-left:1px solid var(--ink-12);padding-left:clamp(28px,5vw,72px);max-width:52ch}
.ai-body p{font-size:clamp(17px,1.5vw,21px);line-height:1.62;color:var(--ink-60)}
.ai-link{display:inline-block;margin-top:clamp(20px,3vh,30px);font-family:var(--mono);font-weight:600;font-size:12px;letter-spacing:.14em;text-transform:uppercase;padding-bottom:4px;border-bottom:1px solid var(--ink);transition:color .3s var(--ease),border-color .3s var(--ease)}
.ai-link:hover,.ai-link:focus-visible{color:var(--gold-deep);border-color:var(--gold-deep)}
@media(max-width:760px){.ai-split{grid-template-columns:1fr;gap:22px;align-items:start}.ai-body{border-left:0;padding-left:0}}

:root{--ease-dramatic:cubic-bezier(.85,0,.15,1)}

.quotes{display:block;max-width:none}

.q-viewport{
  position:relative;overflow:hidden;
  height:clamp(320px,44vh,520px);
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 10%,#000 90%,transparent 100%);
  mask-image:linear-gradient(90deg,transparent 0,#000 10%,#000 90%,transparent 100%);
}
.q-track{display:flex;align-items:center;height:100%;transition:transform 1s var(--ease-dramatic)}
.q-slide{
  flex:0 0 auto;width:min(640px,72vw);box-sizing:border-box;
  padding:0 clamp(20px,3vw,40px);
  opacity:.32;transition:opacity .9s var(--ease-dramatic);
}
.q-slide.is-active{opacity:1}

.q-slide blockquote{
  font-size:clamp(17px,1.5vw,21px);line-height:1.55;
  border-left:2px solid var(--qc,var(--ink));padding-left:22px;
  opacity:.4;transform:translateY(10px);
  transition:opacity .9s var(--ease-dramatic),transform .9s var(--ease-dramatic);
}
.q-slide figcaption{
  margin-top:18px;padding-left:24px;font-family:var(--mono);font-weight:500;
  font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-60);
  opacity:.4;transform:translateY(10px);
  transition:opacity .9s var(--ease-dramatic) .12s,transform .9s var(--ease-dramatic) .12s;
}
.q-slide figcaption b{color:var(--ink);font-weight:500;display:block}
.q-slide.is-active blockquote,.q-slide.is-active figcaption{opacity:1;transform:translateY(0)}

.q-arrow{
  position:absolute;top:50%;transform:translateY(-50%);
  height:66%;width:clamp(56px,7vw,120px);
  border:none;background:transparent;padding:0;margin:0;
  -webkit-appearance:none;appearance:none;outline:none;
  display:flex;align-items:center;justify-content:center;
  cursor:pointer;z-index:3;
}
.q-prev{left:0}
.q-next{right:0}
.q-arrow:focus-visible{outline:2px solid var(--gold-deep);outline-offset:6px;border-radius:2px}

.chev{
  --bw:clamp(6px,1.1vh,12px);
  display:block;
  width:clamp(60px,8.4vh,128px);height:clamp(60px,8.4vh,128px);
  border-top:var(--bw) solid var(--ink-60);
  opacity:.7;
  transition:opacity .35s var(--ease),transform .35s var(--ease),border-color .35s var(--ease);
}
.q-prev .chev{border-left:var(--bw) solid var(--ink-60);transform:rotate(-45deg)}
.q-next .chev{border-right:var(--bw) solid var(--ink-60);transform:rotate(45deg)}
.q-arrow:hover .chev,.q-arrow:focus-visible .chev{opacity:1;border-color:var(--ink)}
.q-prev:hover .chev{transform:rotate(-45deg) translate(-4px,-4px)}
.q-next:hover .chev{transform:rotate(45deg) translate(4px,-4px)}

.q-dots{display:flex;justify-content:center;gap:12px;margin-top:clamp(20px,3vh,32px)}
.q-dot{width:8px;height:8px;border-radius:50%;border:none;padding:0;background:var(--ink-12);cursor:pointer;transition:background-color .4s var(--ease),transform .4s var(--ease)}
.q-dot.is-active{background:var(--gold-deep);transform:scale(1.4)}
.q-dot:hover{background:var(--ink-30)}

@media(max-width:700px){
  .q-viewport{height:clamp(220px,50vh,340px);
    mask-image:linear-gradient(90deg,transparent 0,#000 6%,#000 94%,transparent 100%);
    -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 6%,#000 94%,transparent 100%);
  }
  .q-arrow{height:44%;width:34px}
  .chev{--bw:4px;width:32px;height:32px}
  .q-slide{width:82vw}
}

/* ---------- contact ---------- */
/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;gap:.5em;font-family:var(--mono);font-weight:600;font-size:12px;letter-spacing:.14em;text-transform:uppercase;line-height:1;padding:.9em 1.6em;border-radius:2px;border:1px solid transparent;cursor:pointer;white-space:nowrap;transition:background .3s var(--ease),color .3s var(--ease),border-color .3s var(--ease),box-shadow .45s var(--ease),transform .3s var(--ease)}
.btn-primary{background:var(--gold);color:#171926;border-color:var(--gold)}
.btn-primary:hover,.btn-primary:focus-visible{background:#EAD65A;box-shadow:0 8px 26px rgba(224,202,60,.42);transform:translateY(-2px)}
.btn-secondary{background:var(--steel);color:#F8F7F4;border-color:var(--steel)}
.btn-secondary:hover,.btn-secondary:focus-visible{background:#48688A;box-shadow:0 8px 26px rgba(62,92,118,.4);transform:translateY(-2px)}
nav ul a.nav-cta{padding:.6em 1.15em;border:1px solid var(--gold);border-radius:2px;line-height:1;background:var(--gold);color:#171926;transition:background .3s var(--ease),color .3s var(--ease),border-color .3s var(--ease),box-shadow .45s var(--ease),transform .3s var(--ease)}
nav ul a.nav-cta::after{display:none}
nav ul a.nav-cta:hover,nav ul a.nav-cta:focus-visible{background:#EAD65A;border-color:#EAD65A;color:#171926;box-shadow:0 4px 16px rgba(224,202,60,.34);transform:translateY(-1px)}
@media(prefers-reduced-motion:reduce){.btn:hover,nav ul a.nav-cta:hover{transform:none}}

.contact{border-top:1px solid var(--ink-12)}
.contact h2{
  font-family:var(--display);font-weight:800;text-transform:uppercase;
  font-size:clamp(28px,9vw,140px);line-height:.95;letter-spacing:-.02em;
  margin-bottom:clamp(32px,6vh,60px);overflow-wrap:anywhere;
}
.contact h2 a{
  color:var(--ink);
  transition:color .35s var(--ease);
}
.contact h2 a:hover,.contact h2 a:focus-visible{color:var(--gold-deep)}
.contact .row{display:flex;gap:clamp(18px,3vw,36px);flex-wrap:wrap;align-items:center;font-family:var(--mono);font-weight:500;font-size:12px;letter-spacing:.16em;text-transform:uppercase}
.contact .row a:not(.btn){padding-bottom:4px;border-bottom:1px solid var(--ink)}
.contact .row a:not(.btn):hover{color:var(--gold-deep);border-color:var(--gold-deep)}

/* ---------- footer ---------- */
footer{
  display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;
  padding:28px var(--gutter) 36px;
  font-family:var(--mono);font-weight:500;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-60);
}
:focus-visible{outline:2px solid var(--violet);outline-offset:4px}

/* touch devices have no hover: show color states by default */
@media(hover:none){
  .clients .cname{color:var(--hc)}
  .clients .csec{opacity:1;transform:none}
  .quotes figure:nth-child(1) blockquote{border-color:var(--violet)}
  .quotes figure:nth-child(2) blockquote{border-color:var(--teal)}
  .quotes figure:nth-child(3) blockquote{border-color:var(--rose)}
}
@media(max-width:480px){
  nav ul{gap:14px;font-size:11px;letter-spacing:.1em}
}

@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001s!important;transition-duration:.001s!important}
  .reveal{transform:none}
  .fly{transform:none;opacity:1}
  .dot{display:none}
  .stackcard{opacity:1;transform:none}
  .sc-media img{transform:none!important}
}

/* ---------- case study pages: full-screen chapters ---------- */
.chapter{min-height:100svh;display:flex;flex-direction:column;justify-content:center;position:relative;padding:clamp(56px,9vh,104px) var(--gutter)}
.chero{justify-content:flex-start;min-height:auto;padding-top:clamp(58px,6vh,80px);padding-bottom:clamp(24px,3.5vh,44px)}
.ghost{position:absolute;right:-1vw;top:4vh;font-family:'Alfa Slab One',serif;font-weight:400;font-size:clamp(160px,32vw,540px);line-height:1;color:transparent;-webkit-text-stroke:3px var(--c);opacity:.18;user-select:none;pointer-events:none;z-index:0}
.chapter>*{position:relative;z-index:1}
.chero .ghost{position:absolute}
.chero .eyebrow{font-family:var(--mono);font-weight:500;font-size:12px;letter-spacing:.22em;text-transform:uppercase;color:var(--ink-60);margin-bottom:16px;display:flex;gap:22px;align-items:baseline}
.chero .eyebrow i{width:10px;height:10px;border-radius:50%;background:var(--c);display:inline-block;font-style:normal}
.chero h1{font-family:var(--display);font-weight:800;font-size:clamp(30px,8vw,116px);line-height:.92;letter-spacing:-.02em;max-width:20ch;text-wrap:balance}
.chero h1 .row{display:block;overflow:hidden}
.chero h1 .row span{display:inline-block;animation:rise 1s var(--ease) both}
.chero h1 .row:nth-child(2) span{animation-delay:.12s}
.chero .tag{max-width:46ch;color:var(--ink-60);font-size:clamp(17px,1.6vw,22px);line-height:1.5;margin-top:16px}
.cmeta{display:flex;gap:clamp(28px,5vw,72px);flex-wrap:wrap;border-top:1px solid var(--ink-12);margin-top:clamp(16px,2.4vh,28px);padding-top:14px}
.cmeta div{font-family:var(--mono);font-weight:500;font-size:12px;letter-spacing:.12em;text-transform:uppercase}
.cmeta small{display:block;color:var(--ink-60);margin-bottom:6px}
.cmeta a{border-bottom:1px solid var(--ink)}
.cmeta a:hover{color:var(--c);border-color:var(--c)}

/* full-bleed frameless imagery */
.bleed{position:relative;width:100%;height:clamp(240px,52svh,560px);overflow:hidden;background:var(--paper)}
.bleed img{position:absolute;left:0;top:0;width:100%;height:auto;min-height:100%;object-fit:cover;object-position:center top;will-change:transform}
@media(prefers-reduced-motion:reduce){.bleed{height:auto}.bleed img{position:relative;height:auto;min-height:0;transform:none}}

/* editorial chapters: large legible letters */
.kick{font-family:var(--mono);font-weight:500;font-size:12px;letter-spacing:.22em;text-transform:uppercase;color:var(--ink-60);display:flex;align-items:baseline;gap:20px;margin-bottom:clamp(28px,5vh,48px)}
.kick::after{content:'';flex:1;height:1px;background:var(--ink-12)}
.chapter .kick.later{margin-top:clamp(48px,7vh,80px)}
.bigline{font-family:var(--display);font-weight:800;font-size:clamp(26px,4.6vw,66px);line-height:1.05;letter-spacing:-.015em;max-width:20ch;margin-bottom:26px}
.bigline em{font-style:normal;color:var(--c-ink)}
.lede{font-size:clamp(19px,2vw,27px);line-height:1.55;max-width:48ch;color:var(--ink-60)}
.lede strong{color:var(--ink);font-weight:500}

/* HMW: the pivot question, scroll-filled word by word */
.hmw-ch{border-top:1px solid var(--ink-12);border-bottom:1px solid var(--ink-12)}
.hmw{font-family:var(--display);font-weight:800;font-size:clamp(26px,5vw,72px);line-height:1.16;letter-spacing:-.015em;max-width:22ch}
.hmw .w{color:var(--ink-12);transition:color .45s var(--ease)}
.hmw .w.on{color:var(--ink)}
.hmw .w.q{transition-delay:.05s}
.hmw .w.q.on{color:var(--c-ink)}
@media(prefers-reduced-motion:reduce){.hmw .w{color:var(--ink)}.hmw .w.q{color:var(--c-ink)}}

/* moves: full-screen center splits, frameless floating imagery */
.move{display:grid;grid-template-columns:minmax(0,.72fr) minmax(0,1.28fr);gap:clamp(28px,4vw,64px);min-height:100svh;align-items:center;padding:clamp(48px,7vh,80px) var(--gutter);position:relative}
.move .mnum{position:absolute;left:var(--gutter);top:clamp(28px,5vh,56px);font-family:var(--mono);font-weight:500;font-size:12px;letter-spacing:.22em;text-transform:uppercase;color:var(--c-ink)}
.move h3{font-family:var(--display);font-weight:800;font-size:clamp(26px,3.6vw,54px);line-height:1;letter-spacing:-.015em;margin-bottom:20px;overflow-wrap:anywhere}
.move p{font-size:clamp(17px,1.5vw,20px);line-height:1.68;color:var(--ink-60);max-width:44ch}
.move .imgs{display:grid;gap:clamp(18px,2.5vw,30px)}
.move .imgs.layer{display:block;position:relative}
.move .imgs.layer figure{margin:0}
.move .imgs.layer figure:nth-child(1){width:78%}
.move .imgs.layer figure:nth-child(2){position:absolute;right:0;bottom:-10%;width:52%}
.move .imgs.layer figure:nth-child(2) img{outline:5px solid var(--paper);border-radius:2px}
.move .imgs.layer.lg figure:nth-child(1){width:94%}
.move .imgs.layer.lg figure:nth-child(2){width:58%;bottom:-20%}
/* Move 01's calendar pair is proportioned differently (the list-view crop is taller
   relative to its width) than Move 03's video/photo pair, so the shared .lg overlap
   numbers overlapped far more here - tuned separately to land at a similar ~110px peek */
.move:nth-of-type(1) .imgs.layer.lg figure:nth-child(2){width:46%;bottom:-42%}
.move:nth-of-type(4) .imgs.layer.lg figure:nth-child(2){bottom:-33%}
.move .imgs.artifact img{width:auto;max-width:100%;height:auto;max-height:82vh;display:block;margin:0 auto}
.move .imgs.big img,.move .imgs.big video{width:110%;max-width:none;margin-left:-5%}
.move .imgs.small img{width:90%;margin:0 auto}
.move .imgs figure{overflow:visible}
.move .imgs,.move .imgs figure,.move .imgs img{max-width:100%}
.move .imgs img{width:100%;display:block;filter:drop-shadow(0 28px 56px rgba(16,16,16,.16));transition:transform .9s var(--ease)}
.move .imgs figure:hover img{transform:translateY(-8px)}
.move .imgs video{width:100%;display:block;filter:drop-shadow(0 28px 56px rgba(16,16,16,.16));transition:transform .9s var(--ease)}
.move .imgs.small video{width:90%;margin:0 auto}
.move .imgs.portrait img{height:min(72svh,720px);width:auto;max-width:100%;margin:0 auto;display:block}
.move .imgs figure:hover video{transform:translateY(-8px)}
.move:nth-of-type(even){grid-template-columns:minmax(0,1.28fr) minmax(0,.72fr)}
.move:nth-of-type(even) .imgs{order:-1}
/* homepage move: full-width stepped row of three cards */
.move.full{grid-template-columns:1fr;min-height:auto;align-items:start;gap:clamp(28px,4vh,48px);padding-bottom:clamp(72px,12vh,140px)}
.move.full .mtext{max-width:58ch}
.move.full .showcase{display:flex;gap:clamp(16px,2.2vw,36px);width:100%;align-items:flex-start}
.move.full .showcase figure{margin:0;flex:1;min-width:0;aspect-ratio:4/3;overflow:hidden;background:var(--paper);
  border:1px solid var(--ink-12);box-shadow:0 26px 54px -18px rgba(16,16,16,.35);
  transition:transform .5s var(--ease),box-shadow .5s var(--ease)}
.move.full .showcase figure img,.move.full .showcase figure video{width:100%;height:100%;object-fit:cover;object-position:top;display:block}
.move.full .showcase figure{transform-origin:center center}
.move.full .showcase figure:first-child{transform-origin:left center}
.move.full .showcase figure:last-child{transform-origin:right center}
.move.full .showcase:not(.nat) figure:hover{z-index:20;position:relative;transform:scale(1.32);box-shadow:0 60px 110px -24px rgba(16,16,16,.55)}
.move.full .showcase.nat{align-items:flex-start;margin:0 calc(var(--gutter) * -0.6)}
.move.full .showcase.nat figure{aspect-ratio:auto;overflow:hidden}
.move.full .showcase.nat figure img,.move.full .showcase.nat figure video{width:100%;height:auto;object-fit:contain}
@media(max-width:860px){
  .move.full .showcase.nat{margin:0}
  .move.full .showcase{flex-direction:column;gap:18px}
  .move.full .showcase figure{transform:none;width:100%}
  .move.full .showcase figure:hover{transform:none}
}
@media(max-width:860px){
  .move,.move:nth-of-type(even){grid-template-columns:1fr;min-height:auto;padding-top:clamp(72px,12vh,110px)}
  .move .imgs,.move:nth-of-type(even) .imgs{order:2}
  .move .imgs.layer figure:nth-child(1){width:90%}
  .move .imgs.layer figure:nth-child(2){position:static;width:64%;margin:-8% 0 0 auto}
  .move .imgs.layer.lg figure:nth-child(1){width:100%}
  .move .imgs.layer.lg figure:nth-child(2){width:74%}
  .move .imgs.big img,.move .imgs.small img,.move .imgs.big video,.move .imgs.small video{width:100%;margin:0}
}

/* impact: numbers that land */
.impact-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:clamp(32px,5vw,72px);margin-top:clamp(40px,7vh,72px)}
.impact-stats b{display:block;font-family:var(--display);font-weight:800;font-size:clamp(60px,8vw,132px);letter-spacing:-.03em;color:var(--c-ink);line-height:1;font-variant-numeric:tabular-nums}
.impact-stats small{display:block;margin-top:16px;font-family:var(--mono);font-weight:500;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-60);max-width:26ch;line-height:1.7}

/* team + next */
.team{columns:2;column-gap:clamp(32px,5vw,80px);max-width:860px;font-size:15px;color:var(--ink-60);list-style:none}
.team li{padding:8px 0;border-bottom:1px solid var(--ink-12);break-inside:avoid}
.team li b{color:var(--ink);font-weight:500}
@media(max-width:640px){.team{columns:1}}
/* credits list — three-column bullets */
.credits{list-style:none;columns:3;column-gap:clamp(28px,4vw,72px);max-width:960px;margin-top:clamp(8px,2vh,20px)}
.credits li{position:relative;padding:10px 0 10px 20px;border-bottom:1px solid var(--ink-12);break-inside:avoid;color:var(--ink);font-size:clamp(15px,1.2vw,18px)}
.credits li::before{content:'';position:absolute;left:2px;top:18px;width:6px;height:6px;border-radius:50%;background:var(--ink-30)}
.credits li .by{display:inline-block;margin-left:8px;font-family:var(--mono);font-weight:500;font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-30);vertical-align:middle}
.credits-note{margin-top:clamp(18px,2.6vh,28px);font-family:var(--mono);font-weight:500;font-size:12px;letter-spacing:.05em;line-height:1.7;color:var(--ink-30);max-width:64ch}
@media(max-width:760px){.credits{columns:2}}
@media(max-width:440px){.credits{columns:1}}
.next{display:flex;flex-direction:column;justify-content:center;min-height:78svh;border-top:1px solid var(--ink-12);padding:clamp(56px,9vh,104px) var(--gutter)}
.next h2{font-family:var(--display);font-weight:800;text-transform:uppercase;font-size:clamp(28px,8.5vw,124px);line-height:.95;letter-spacing:-.02em;transition:color .4s var(--ease);text-wrap:balance}
.next:hover h2,.next:focus-visible h2{color:var(--nc)}
.next .go{display:inline-flex;align-items:center;gap:10px;margin-top:28px;font-family:var(--mono);font-weight:500;font-size:12px;letter-spacing:.18em;text-transform:uppercase}
.next .go .arrow{transition:transform .4s var(--ease)}
.next:hover .go .arrow{transform:translateX(10px)}
.p-violet{--c:var(--violet);--c-ink:var(--violet)}
.p-teal{--c:var(--teal);--c-ink:var(--teal-ink)}
.p-rose{--c:var(--rose);--c-ink:var(--rose)}
.p-lime{--c:var(--lime);--c-ink:var(--lime-ink)}
.p-blue{--c:var(--blue);--c-ink:var(--blue-ink)}
.p-amber{--c:var(--amber);--c-ink:var(--amber-ink)}
.p-steel{--c:var(--steel-soft);--c-ink:var(--teal-ink)}

@media(max-width:768px){
  .hero h1{font-size:clamp(44px,13.5vw,150px)}
  .hero h1 .row.offset{padding-left:clamp(20px,9vw,120px)}
  .chero h1{font-size:clamp(24px,7.4vw,88px)}
  .bigline{font-size:clamp(22px,5vw,50px)}
  .hmw{font-size:clamp(22px,5vw,54px)}
  .move h3{font-size:clamp(18px,4.6vw,44px)}
  .next h2{font-size:clamp(20px,6.5vw,60px)}
  .impact-stats b{font-size:clamp(46px,11vw,88px)}
}

/* particle vortex: forming loading intro (behind hero copy) + counter */
.vortex{position:absolute;inset:0;width:100%;height:100%;z-index:0;pointer-events:none}
.hero .scrollcue,.hero h1,.hero .meta{position:relative;z-index:1}
.loadpct{position:fixed;top:clamp(84px,14vh,150px);right:var(--gutter);z-index:60;font-family:var(--display);font-weight:800;font-size:clamp(40px,7vw,104px);letter-spacing:-.02em;color:var(--ink);transition:opacity .6s ease;pointer-events:none;min-width:3.2ch;text-align:right}
.loadpct.hide{opacity:0}
@media(prefers-reduced-motion:reduce){.loadpct{display:none}}
/* loading gate: page hidden until the vortex finishes forming */
html.loading body{overflow:hidden}
nav,.hero .scrollcue,.hero .meta{transition:opacity .9s ease}
html.loading nav,html.loading .hero .scrollcue,html.loading .hero .meta{opacity:0}
html.loading .hero h1 .row span{animation-play-state:paused}

/* back-to-top */
.totop{position:fixed;right:var(--gutter);bottom:clamp(20px,4vh,40px);z-index:55;
  width:52px;height:52px;border:1px solid var(--ink-12);border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-family:var(--display);font-weight:800;font-size:22px;line-height:1;
  background-image:linear-gradient(90deg,var(--violet),var(--rose),var(--lime),var(--teal),var(--violet));
  background-size:220% 100%;-webkit-background-clip:text;background-clip:text;
  color:var(--ink);-webkit-text-fill-color:var(--ink);
  animation:flowgrad 10s linear infinite;
  opacity:0;pointer-events:none;transform:translateY(12px);
  transition:opacity .45s var(--ease),transform .45s var(--ease),border-color .35s var(--ease),color .45s var(--ease)}
.totop.on{opacity:1;pointer-events:auto;transform:none}
.totop:hover,.totop:focus-visible{color:transparent;-webkit-text-fill-color:transparent;border-color:var(--ink)}
@media(prefers-reduced-motion:reduce){.totop{animation:none;background-position:0 50%}}
@keyframes flowgrad{from{background-position:0% 50%}to{background-position:220% 50%}}

/* theme toggle: b/w when off, brand color when on */
.theme-toggle{width:20px;height:20px;border-radius:50%;border:1.5px solid currentColor;cursor:pointer;padding:0;
  color:inherit;-webkit-appearance:none;appearance:none;
  background:linear-gradient(90deg,currentColor 50%,transparent 50%);
  transition:transform .4s var(--ease);flex:none}
.theme-toggle:hover{transform:rotate(180deg)}
html[data-theme="dark"] .theme-toggle{border-color:transparent;
  background:conic-gradient(var(--gold) 0 50%,var(--steel-soft) 50% 100%)}

/* more case studies: compact index, mirrors the clients list */
.morecases{padding:clamp(56px,9vh,104px) var(--gutter);border-top:1px solid var(--ink-12)}
.morecases ul{list-style:none}
.morecases li:first-child a{border-top:1px solid var(--ink-12)}
.morecases a{display:flex;justify-content:space-between;align-items:baseline;gap:24px;
  padding:clamp(12px,1.8vh,20px) 0;border-bottom:1px solid var(--ink-12);
  transition:padding-left .4s var(--ease)}
.morecases .cname{font-family:var(--display);font-weight:800;font-size:clamp(20px,2.6vw,36px);
  line-height:1.05;letter-spacing:-.015em;color:var(--ink-30);transition:color .35s var(--ease)}
.morecases .csec{font-family:var(--mono);font-weight:500;font-size:11px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--ink-30);opacity:0;transform:translateX(10px);white-space:nowrap;
  transition:opacity .4s var(--ease),transform .4s var(--ease),color .35s var(--ease)}
.morecases a:hover,.morecases a:focus-visible{padding-left:clamp(10px,1.5vw,24px)}
.morecases a:hover .cname,.morecases a:focus-visible .cname{color:var(--hc)}
.morecases a:hover .csec,.morecases a:focus-visible .csec{opacity:1;transform:none;color:var(--ink-60)}
@media(max-width:640px){.morecases a{flex-direction:column;gap:6px;align-items:flex-start}.morecases .csec{opacity:1;transform:none}}
@media(hover:none){.morecases .cname{color:var(--hc)}.morecases .csec{opacity:1;transform:none}}

/* hover peek: card image floats in on the right of the case index */
.case-peek{position:fixed;right:var(--gutter);top:50%;width:min(30vw,420px);aspect-ratio:16/10;
  z-index:70;pointer-events:none;overflow:hidden;background:var(--paper);
  border:1px solid var(--ink-12);box-shadow:0 34px 70px -18px rgba(16,16,16,.4);
  opacity:0;transform:translateY(-50%) scale(.95);
  transition:opacity .35s var(--ease),transform .35s var(--ease)}
.case-peek.on{opacity:1;transform:translateY(-50%) scale(1)}
.case-peek img{width:100%;height:100%;object-fit:cover;display:block}
@media(hover:none),(max-width:900px){.case-peek{display:none}}

/* about page */
.about-grid{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(32px,5vw,80px);align-items:start;min-height:auto}
.about-grid .portrait{margin:0;position:relative;aspect-ratio:1;overflow:visible;border:none;background:transparent}
.about-grid .portrait img{width:100%;height:100%;object-fit:contain;display:block;filter:grayscale(1);transition:filter .7s var(--ease)}
.about-grid .portrait:hover img{filter:grayscale(0)}
.about-grid .portrait .mono-mark{display:none}
.about-grid .portrait.noimg img{display:none}
.about-grid .portrait.noimg{border-radius:50%;background:var(--ink)}
.about-grid .portrait.noimg .mono-mark{display:flex;position:absolute;inset:0;align-items:center;justify-content:center;font-family:var(--display);font-weight:800;font-size:clamp(80px,10vw,160px);color:var(--paper)}
.about-grid .bio p{margin-bottom:1.2em;color:var(--ink-60);max-width:58ch}
.about-grid .bio p strong{color:var(--ink);font-weight:500}
.caps{list-style:none;columns:2;column-gap:clamp(32px,5vw,80px);max-width:900px}
.caps li{padding:10px 0;border-bottom:1px solid var(--ink-12);break-inside:avoid;color:var(--ink-60);font-size:clamp(15px,1.2vw,18px)}
.row-links{display:flex;gap:clamp(24px,4vw,56px);flex-wrap:wrap;font-family:var(--mono);font-weight:500;font-size:12px;letter-spacing:.16em;text-transform:uppercase}
.row-links a{padding-bottom:4px;border-bottom:1px solid var(--ink)}
.row-links a:hover{color:var(--violet);border-color:var(--violet)}
@media(max-width:860px){.about-grid{grid-template-columns:1fr}.caps{columns:1}}

/* skip link */
.skiplink{position:fixed;left:-9999px;top:0;z-index:200;background:var(--ink);color:var(--paper);
  padding:12px 18px;font-family:var(--mono);font-weight:500;font-size:12px;letter-spacing:.14em;text-transform:uppercase}
.skiplink:focus{left:10px;top:10px}
/* image captions */
.move .imgs figcaption,.move .showcase.nat figcaption{font-family:var(--mono);font-weight:500;font-size:9.5px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink-30);margin-top:12px;display:flex;align-items:center;gap:8px;line-height:1.5}
.move .imgs figcaption::before,.move .showcase.nat figcaption::before{content:'';width:16px;height:1px;background:var(--c);flex:none}
.move .showcase.nat figure{overflow:visible}

/* IA before/after artifact */
.ia-chapter{min-height:auto;padding-top:clamp(56px,9vh,100px);padding-bottom:clamp(56px,9vh,100px)}
.ia-fig{margin:clamp(28px,5vh,52px) 0 0;width:100%}
.ia-fig .ia-svg text{font-family:var(--body)}
.ia-fig .ia-svg{width:100%;height:auto;display:block;border:1px solid var(--ink-12);padding:clamp(14px,2vw,28px);background:var(--paper)}
.ia-fig figcaption{font-family:var(--mono);font-weight:500;font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-30);margin-top:14px;display:flex;align-items:center;gap:8px}
.ia-fig figcaption::before{content:'';width:16px;height:1px;background:var(--c);flex:none}
@media(max-width:700px){.ia-fig .ia-svg text{font-family:var(--body)}
.ia-fig .ia-svg{padding:8px}}

.hmw-note{font-family:var(--mono);font-weight:500;font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-30);margin-top:clamp(20px,3vh,34px)}

.bio-cta{margin-top:1.6em}
.bio-cta a{font-family:var(--mono);font-weight:500;font-size:12px;letter-spacing:.16em;text-transform:uppercase;border-bottom:1px solid var(--ink);padding-bottom:4px}
.bio-cta a:hover{color:var(--violet);border-color:var(--violet)}

/* dark: shadows off — a dark shadow on a dark page reads as discolouration */
html[data-theme="dark"] .move .imgs img,
html[data-theme="dark"] .move .imgs video{filter:none}
html[data-theme="dark"] .move .showcase figure,
html[data-theme="dark"] .move .imgs.layer .float,
html[data-theme="dark"] .case-peek,
html[data-theme="dark"] .ia-fig .ia-svg{box-shadow:none}

/* ---------- card -> page colour expansion (after rachsmith PWxoLN) ---------- */
.xcover{position:fixed;z-index:300;pointer-events:none;transform-origin:50% 50%;border-radius:12px;
  transition:transform .58s cubic-bezier(.72,0,.24,1),border-radius .28s linear}
.page-fade{position:fixed;inset:0;z-index:300;pointer-events:none;opacity:1;transition:opacity .55s var(--ease)}
.page-fade.out{opacity:0}

html.xfading::before{content:'';position:fixed;inset:0;z-index:400;background:var(--xfade);
  pointer-events:none;opacity:1;transition:opacity .55s var(--ease)}
html.xfading.xfaded::before{opacity:0}
@media(prefers-reduced-motion:reduce){html.xfading::before{display:none}}

.about-intro{position:relative;overflow:hidden}
.about-intro .collage{position:absolute;inset:0;z-index:0;pointer-events:none}
.about-intro .collage span{position:absolute;display:block;overflow:hidden;border-radius:3px;box-shadow:0 18px 40px -14px rgba(0,0,0,.55);opacity:0;transform:scale(.92) rotate(var(--r,0deg));transition:opacity .5s var(--ease),transform .5s var(--ease)}
.about-intro .collage span img{width:100%;height:100%;object-fit:cover;filter:grayscale(1) contrast(1.05)}
.about-intro .scrim{position:absolute;inset:0;z-index:1;background:linear-gradient(135deg,rgba(8,8,10,.95) 0%,rgba(8,8,10,.82) 50%,rgba(8,8,10,.93) 100%);opacity:0;transition:opacity .5s var(--ease)}
.about-intro .ai-split{position:relative;z-index:2}
.about-intro:has(.ai-link:hover) .collage span,.about-intro:has(.ai-link:focus-visible) .collage span{opacity:1;transform:scale(1) rotate(var(--r,0deg));transition:opacity .6s var(--ease) var(--d,0s),transform .6s var(--ease) var(--d,0s)}
.about-intro:has(.ai-link:hover) .scrim,.about-intro:has(.ai-link:focus-visible) .scrim{opacity:1}
.about-intro:has(.ai-link:hover) .ai-head,.about-intro:has(.ai-link:focus-visible) .ai-head,.about-intro:has(.ai-link:hover) .ai-body p,.about-intro:has(.ai-link:focus-visible) .ai-body p{color:#fff}
.about-intro:has(.ai-link:hover) .ai-body,.about-intro:has(.ai-link:focus-visible) .ai-body{border-color:rgba(255,255,255,.32)}
.about-intro:has(.ai-link:hover) .ai-link,.about-intro:has(.ai-link:focus-visible) .ai-link{color:var(--gold);border-color:var(--gold)}
@media(max-width:760px){.about-intro .collage,.about-intro .scrim{display:none}}

/* ==================================================================
   case-study stack: a two-column grid of contained cards, one per
   project. Normal document flow throughout — each card fades/rises
   into place as it's scrolled into view, cascading down the grid.
   ================================================================== */
.stack{padding:0 var(--gutter) clamp(80px,14vh,160px)}

.stackgrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(28px,4vw,56px)}
@media(max-width:760px){.stackgrid{grid-template-columns:1fr}}

/* the card frame itself never moves - only the photo behind the mask tilts in 3D */
.stackcard{
  position:relative;display:block;background:none;
  opacity:0;transform:translateY(46px) scale(.97);
  transition:opacity .9s var(--ease),transform .9s var(--ease);
}
.stackcard.in{opacity:1;transform:none}
.stackgrid>.stackcard:nth-child(2n){transition-delay:.12s}
.stackgrid>.stackcard.in{transition-delay:0s}

.sc-media{
  position:relative;aspect-ratio:3/2;overflow:hidden;background:var(--ink);
  border-radius:16px;perspective:1200px;margin-bottom:20px;
}
.sc-media img{
  width:100%;height:100%;object-fit:cover;object-position:center 20%;
  transform:scale(1.04);transition:transform .5s var(--ease);
}
@media(hover:none),(pointer:coarse){.sc-media img{transform:scale(1.04)!important;transition:none}}

.sc-num{
  position:absolute;top:16px;right:16px;z-index:1;
  padding:6px 13px;border-radius:100px;background:rgba(8,8,10,.55);backdrop-filter:blur(6px);
  font-family:var(--mono);font-weight:500;font-size:11px;letter-spacing:.1em;color:#fff;
}
.sc-num i{font-style:normal;color:rgba(255,255,255,.55)}

.sc-body{padding:0}
.sc-tags{
  font-family:var(--mono);font-size:13.5px;letter-spacing:.03em;line-height:1.5;
  color:var(--blue-ink);margin-bottom:10px;
}

/* title: a flip-clock style reveal, letter by letter, tied only to scroll-entrance
   (.stackcard.in) - never to hover or to the image's cursor tilt. The arrow sits in normal
   flow at zero width, so at rest the title lines up flush with the tags line above it; on
   hover it expands open and genuinely pushes the title text over. */
.sc-title{
  font-family:var(--display);font-weight:800;text-wrap:balance;
  font-size:clamp(28px,3vw,40px);line-height:1.08;letter-spacing:-.015em;
  color:var(--ink);
}
.sc-arrow{
  display:inline-block;overflow:hidden;vertical-align:top;
  width:0;margin-right:0;opacity:0;
  font-weight:800;color:var(--blue-ink);
  transition:width .4s var(--ease),margin-right .4s var(--ease),opacity .3s var(--ease);
}
.stackcard:hover .sc-arrow,.stackcard:focus-visible .sc-arrow{
  width:1.05em;margin-right:.28em;opacity:1;
}
.sc-title .tchar{display:inline-block;overflow:hidden;vertical-align:top}
.sc-title .tchar>span{display:inline-block;transform:translateY(115%);transition:transform .6s var(--ease)}
.stackcard.in .sc-title .tchar>span{transform:translateY(0)}
@media(prefers-reduced-motion:reduce),(hover:none),(pointer:coarse){
  .sc-title .tchar>span{transform:none;transition:none}
}
@media(hover:none),(pointer:coarse){
  .sc-arrow{width:1.05em;margin-right:.28em;opacity:1}
}

@media(max-width:480px){.sc-title{font-size:clamp(23px,7vw,30px)}}