@font-face{font-family:Archivo;src:url('assets/fonts/archivo-latin.woff2') format('woff2');font-weight:400 800;font-display:swap}
@font-face{font-family:Hanken;src:url('assets/fonts/hanken-grotesk-latin.woff2') format('woff2');font-weight:400 700;font-display:swap}
:root{--orange:#de3a11;--paper:#f4f1e9;background:#080908;color:var(--paper);font-family:Hanken,Arial,sans-serif;color-scheme:dark}
*{box-sizing:border-box}body{margin:0}a{color:inherit;text-decoration:none}button,a{-webkit-tap-highlight-color:transparent}button:focus-visible,a:focus-visible{outline:2px solid var(--paper);outline-offset:8px}
.journey{height:1600svh}.hero{position:sticky;top:0;z-index:2;height:100svh;min-height:440px;overflow:hidden;background:#080908}.scene{position:fixed;inset:0;pointer-events:none}canvas{display:block;width:100%;height:100%}header{position:absolute;z-index:2;top:0;left:0;right:0;padding:35px 3.8vw;display:flex;align-items:center;justify-content:space-between}.wordmark{font-family:Archivo,sans-serif;font-size:39px;font-weight:800;letter-spacing:-3px;line-height:1}.wordmark span{display:inline-block;vertical-align:top;font-size:10px;color:var(--orange);margin:4px 0 0 5px;letter-spacing:0}footer{position:absolute;z-index:2;bottom:0;left:0;right:0;pointer-events:none;padding:32px 3.8vw;display:flex;align-items:center;justify-content:space-between;background:linear-gradient(transparent,#08090899)}h1{font-family:Archivo,sans-serif;font-size:clamp(19px,2vw,30px);font-weight:400;letter-spacing:-.7px;margin:0}
@media(max-width:640px){header{padding:26px 23px}.wordmark{font-size:34px}footer{padding:25px 23px}h1{font-size:21px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{transition:none!important;scroll-behavior:auto!important}}

/* Contact: a stable hit area around a magnetic surface. The sculpture's own
   particles gather around it on hover, so the label carries a dark halo. */
.contact{position:relative;display:grid;place-items:center;width:158px;height:58px;margin:-10px -8px;isolation:isolate}
.contact .contact-shell{position:relative;display:flex;align-items:center;justify-content:center;width:142px;height:44px;padding:0 18px;transform:translate(var(--mx,0px),var(--my,0px));transition:transform 220ms cubic-bezier(.16,1,.3,1)}
.contact .contact-label{font:600 16px Archivo,sans-serif;letter-spacing:-.3px;color:var(--paper);text-shadow:0 0 6px #080908,0 0 13px #080908,0 1px 3px #080908;transform:translate(var(--tx,0px),var(--ty,0px));transition:transform 200ms ease-out,color 180ms}
.contact:is(:hover,:focus-visible) .contact-label{color:#fff}
.contact:active .contact-shell{transform:translate(var(--mx,0px),var(--my,0px)) scale(.95);transition-duration:80ms}
.contact:focus-visible{outline:1px solid var(--orange);outline-offset:0}
@media(max-width:640px){.contact{width:136px}.contact .contact-shell{width:126px;height:43px;padding:0 15px}.contact .contact-label{font-size:15px}}
@media(prefers-reduced-motion:reduce){.contact .contact-shell,.contact .contact-label{transform:none!important}.contact:is(:hover,:focus-visible) .contact-label{color:var(--orange)}}

/* The introduction shares the sculpture's space rather than occupying a column. */
.about{position:absolute;inset:0;z-index:1;opacity:var(--about-opacity,0);pointer-events:none}
.about h2{position:absolute;left:3.3%;right:3.3%;top:24%;margin:0;font:500 clamp(65px,11.4vw,200px)/.94 Archivo,sans-serif;letter-spacing:-.075em}
.title-line{display:block;white-space:nowrap;transform:translate3d(var(--title-x,0px),var(--about-offset,0px),0)}
.title-human{position:relative;z-index:2}
.title-digital{margin-top:.1em;text-align:right;color:transparent;-webkit-text-stroke:1px #f4f1e9;transform:translate3d(calc(var(--title-x,0px) * -1),var(--about-offset,0px),0)}
.title-stop{-webkit-text-stroke:0;color:var(--orange)}
.about-story{position:absolute;left:57%;right:7%;top:70%;transform:translateY(var(--about-offset,0px))}
.story-lead{font:400 clamp(17px,1.7vw,27px)/1.35 Archivo,sans-serif;letter-spacing:-.6px;margin:0 0 17px}
.about-description{font-size:13px;line-height:1.65;max-width:355px;color:#a7aaa0;margin:0 0 20px}
.story-rule{display:block;height:1px;background:#ffffff24;width:100%;transform:scaleX(var(--about-opacity,0));transform-origin:left}.story-rule::before{content:'';display:block;width:28px;height:1px;background:var(--orange)}
footer h1{opacity:var(--hero-caption,1)}
@media(min-width:1800px){.about h2{top:22%;font-size:11vw}.about-story{top:72%}}
@media(max-width:640px){.hero{min-height:740px}.about h2{left:20px;right:20px;top:24%;font-size:12.1vw;line-height:1.08;letter-spacing:-.07em}.title-digital{margin-top:18px;-webkit-text-stroke:.7px #f4f1e9}.about-story{left:23px;right:23px;top:61%}.story-lead{font-size:21px;letter-spacing:-.6px;margin-bottom:14px}.about-description{font-size:12px;max-width:310px;margin-bottom:17px}}
@media(max-height:720px) and (min-width:641px){.about h2{font-size:min(10vw,130px);top:23%}.about-story{top:68%}.story-lead{font-size:18px;margin-bottom:10px}.about-description{font-size:12px;margin-bottom:10px}}


/* Opening statement. Set large so the sculpture can thread through it:
   particles nearer than the type draw on #front above it, the rest behind.
   --a reveals on load, --out tears the lines apart sideways on scroll and
   --px/--py add per-line (--z) parallax from the sculpture's tilt. */
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.intro{position:absolute;z-index:1;left:3.8vw;right:3.8vw;top:37%;margin:0;pointer-events:none;opacity:calc(1 - var(--out,0))}
.intro-vis{display:block}
.intro-kicker{display:flex;align-items:center;gap:12px;margin:0 0 3.2vh;font-size:10px;letter-spacing:2.2px;text-transform:uppercase;color:var(--orange);opacity:clamp(0,var(--a,0) * 2,1)}
.intro-kicker::before{content:'';width:6px;height:6px;background:var(--orange)}
.intro .ln{font:500 clamp(40px,5.25vw,104px)/.98 Archivo,sans-serif;letter-spacing:-.06em;color:var(--paper);transform:translate3d(calc(var(--px,0px) * var(--z,1) + var(--out,0) * var(--dir,1) * 32vw),calc(var(--py,0px) * var(--z,1)),0)}
.intro .ln-indent{padding-left:1.6em}
.ghost{font-style:normal;color:transparent;-webkit-text-stroke:1.2px var(--paper)}
.scene-front{z-index:1}
@media(max-width:640px){.intro{left:23px;right:23px;top:15%}.intro-kicker{margin-bottom:16px;font-size:9px}.intro .ln{font-size:11.2vw;line-height:1}.intro .ln>span{white-space:normal}.intro .ln-indent{padding-left:0}.ghost{-webkit-text-stroke:1px var(--paper)}}

/* What we build. The particles carry the drawings; this layer holds the copy,
   the giant scrubbed word, 3D-anchored labels and the act rail. Most values
   are driven from script.js: --build (section), --a (act presence), --t (act
   progress) and --v (smoothed scroll velocity). */
.giant{position:absolute;inset:0;overflow:hidden;opacity:calc(var(--build,0) * (1 - min(1, var(--handoff,0) * 2)))}
.giant span{position:absolute;left:0;bottom:-.2em;font:600 25vw/1 Archivo,sans-serif;letter-spacing:-.065em;white-space:nowrap;opacity:var(--a,0);transform:translate3d(calc(36vw - var(--t,0) * 62vw),0,0) skewX(calc(var(--v,0) * -12deg))}
.giant b{display:block;font-weight:inherit;color:transparent;-webkit-text-stroke:1px #f4f1e91a}
.giant b+b{position:absolute;inset:0;color:#de3a1117;-webkit-text-stroke:0;clip-path:inset(0 calc(100% - var(--t,0) * 100%) 0 0)}
.build{position:absolute;inset:0;z-index:3;pointer-events:none;opacity:var(--build,0)}
.build-head{position:absolute;left:3.8vw;top:19%;display:flex;align-items:center;gap:22px;font-size:10px;letter-spacing:2px;text-transform:uppercase;color:#8c9087}
.build-head h2{margin:0;font:inherit;color:var(--paper)}
.build-head h2::before{content:'';display:inline-block;width:6px;height:6px;margin:0 12px 1px 0;background:var(--orange)}
.act{position:absolute;left:3.8vw;top:28.5%;width:min(32vw,460px)}
.act-name{margin:0 0 20px;font:500 11px Hanken,sans-serif;letter-spacing:2.2px;text-transform:uppercase;color:var(--orange);opacity:clamp(0,var(--a,0) * 2,1)}
.act-line{margin:0;font:400 clamp(34px,3.3vw,58px)/1.02 Archivo,sans-serif;letter-spacing:-.045em}
.ln{display:block;overflow:hidden;padding-bottom:.1em;margin-bottom:-.1em}
.ln>span{display:block;white-space:nowrap;transform:translate3d(0,calc((1 - clamp(0,(var(--a,0) - var(--i,0) * .14) * 1.7,1)) * 112%),0)}
.act-desc{max-width:345px;margin:28px 0 26px;font-size:14px;line-height:1.6;color:#a7aaa0;opacity:clamp(0,(var(--a,0) - .35) * 2.6,1);transform:translateY(calc((1 - clamp(0,(var(--a,0) - .35) * 2.6,1)) * 16px))}
.act-tags{display:grid;gap:10px;margin:0;padding:0;list-style:none}
.act-tags li{font-size:10px;letter-spacing:1.6px;text-transform:uppercase;color:#8c9087;opacity:clamp(0,(var(--a,0) - .45 - var(--i,0) * .07) * 5,1);transform:translateX(calc((1 - clamp(0,(var(--a,0) - .45 - var(--i,0) * .07) * 5,1)) * -18px))}
.act-tags li::before{content:'';display:inline-block;width:16px;height:1px;margin:0 12px 3px 0;background:var(--orange)}
.tags3d{position:absolute;inset:0}
.tag3d{position:absolute;left:0;top:0;width:0;height:0;visibility:hidden;will-change:transform,opacity}
.tag3d-in{position:absolute;left:0;top:0;display:flex;align-items:center;gap:10px;transform:translateY(-50%);font-size:10px;letter-spacing:1.6px;text-transform:uppercase;color:#d6d3c8;white-space:nowrap;pointer-events:auto;cursor:default;transition:color .2s}
.tag3d-in::before{content:'';width:36px;height:1px;background:#ffffff47;transition:background-color .2s,width .25s cubic-bezier(.16,1,.3,1)}
.tag3d-in i{position:absolute;left:-4px;top:50%;width:7px;height:7px;margin-top:-3.5px;border:1px solid var(--orange);background:#080908}
.tag3d-in b{font-weight:400;color:var(--orange)}
.tag3d-in:hover{color:#fff}.tag3d-in:hover::before{width:48px;background:var(--orange)}
.tag3d.flip .tag3d-in{left:auto;right:0;flex-direction:row-reverse}
.tag3d.flip .tag3d-in i{left:auto;right:-4px}
.tag3d.down .tag3d-in{left:0;top:0;flex-direction:column;gap:8px;transform:translateX(-50%)}
.tag3d.down .tag3d-in::before{width:1px;height:28px}.tag3d.down .tag3d-in:hover::before{width:1px;height:36px}
.tag3d.down .tag3d-in i{left:50%;top:-4px;margin:0 0 0 -3.5px}
.build-rail{position:absolute;left:3.8vw;bottom:32px;display:flex;gap:24px;pointer-events:auto}
.build-rail button{position:relative;min-width:96px;padding:0 0 13px;border:0;background:none;color:#787e72;font:10px Hanken,sans-serif;letter-spacing:1.4px;text-align:left;cursor:pointer;transition:color .3s}
.build-rail b{display:block;margin-top:6px;font:500 16px/1 Archivo,sans-serif;letter-spacing:-.3px;color:#8c9087;transition:color .3s}
.build-rail i{position:absolute;left:0;right:0;bottom:0;height:1px;background:#ffffff1f}
.build-rail i::after{content:'';position:absolute;inset:0;background:var(--orange);transform:scaleX(var(--t,0));transform-origin:left}
.build-rail button[aria-current=true],.build-rail button:hover{color:var(--orange)}
.build-rail button[aria-current=true] b,.build-rail button:hover b{color:var(--paper)}
@media(max-width:900px){.tags3d{display:none}}
@media(max-width:900px) and (min-width:641px){.act{width:38vw}.act-line{font-size:30px}.act-desc{font-size:13px}.build-rail button{min-width:76px}.build-rail{gap:18px}}
@media(max-height:720px) and (min-width:641px){.build-head{top:17%}.act{top:25%}.act-line{font-size:clamp(30px,2.9vw,44px)}.act-desc{margin:20px 0 18px;font-size:13px}.act-tags{gap:7px}}
@media(max-width:640px){
  .giant span{bottom:auto;top:15%;font-size:34vw}
  .build-head{left:23px;right:23px;top:13%;justify-content:space-between}
  .act{left:23px;right:23px;top:59%;width:auto}
  .act-name{margin-bottom:12px}
  .act-line{font-size:31px}
  .act-desc{margin:16px 0 16px;font-size:12px;max-width:330px}
  .act-tags{display:flex;flex-wrap:wrap;gap:8px 18px}.act-tags li{font-size:8px;letter-spacing:1.2px}.act-tags li::before{width:10px;margin-right:8px}
  .build-rail{left:23px;bottom:25px;gap:12px}.build-rail button{min-width:40px;padding-bottom:10px;font-size:9px}.build-rail b{display:none}
}
@media(prefers-reduced-motion:reduce){.giant span{transform:none;left:3.8vw}.ln>span,.act-desc,.act-tags li{transform:none}.ln>span{opacity:clamp(0,(var(--a,0) - var(--i,0) * .14) * 1.7,1)}}

/* Selected work. Cases pin and stack; the one underneath recedes as the next
   slides over (--cover) and each reveals as it arrives (--in). Screenshots sit
   under an orange halftone so they read as particles; a lens follows the
   pointer to show the real colour. Values are set from work.js. */
@property --r{syntax:'<length>';inherits:true;initial-value:0px}
.work{position:relative;z-index:1;padding-top:24vh;overflow-x:clip;background:#080908;color:var(--paper)}
.work-head{display:grid;grid-template-columns:1fr minmax(240px,340px);align-items:end;gap:4vw;padding:0 3.8vw 30vh}
.work-kicker{grid-column:1/-1;display:flex;align-items:center;gap:22px;margin:0 0 5vh;font-size:10px;letter-spacing:2px;text-transform:uppercase;color:#8c9087}
.work-kicker span:first-child{color:var(--paper)}
.work-kicker span:first-child::before{content:'';display:inline-block;width:6px;height:6px;margin:0 12px 1px 0;background:var(--orange)}
.work-title{margin:0;font:500 clamp(64px,12vw,220px)/.9 Archivo,sans-serif;letter-spacing:-.075em}
.work-title>span{display:block;white-space:nowrap}
.wt-solid{transform:translate3d(var(--wx,0px),0,0)}
.wt-ghost{margin-left:.9em;color:transparent;-webkit-text-stroke:1px var(--paper);transform:translate3d(calc(var(--wx,0px) * -1),0,0)}
.work-intro{max-width:340px;margin:0 0 1.4em;font-size:14px;line-height:1.6;color:#a7aaa0}
.cases{position:relative}
.case{position:sticky;top:0;height:100svh;min-height:600px;overflow:hidden;background:#080908;border-top:1px solid #ffffff14}
.case::after{content:'';position:absolute;inset:0;background:#080908;opacity:calc(var(--cover,0) * .65);pointer-events:none}
.case-inner{display:grid;grid-template-columns:minmax(280px,30%) 1fr;align-items:center;gap:5vw;height:100%;padding:9vh 3.8vw;transform:translate3d(0,calc(var(--cover,0) * -5vh),0) scale(calc(1 - var(--cover,0) * .07));transform-origin:50% 0}
.case-meta>*{opacity:clamp(0,var(--in,1) * 1.6 - var(--k,0) * .12,1);transform:translateY(calc((1 - clamp(0,var(--in,1) * 1.6 - var(--k,0) * .12,1)) * 34px))}
.case-no{display:block;margin-bottom:4vh;font:800 clamp(80px,11vw,170px)/.8 Archivo,sans-serif;letter-spacing:-.06em;color:transparent;-webkit-text-stroke:1px #f4f1e940}
.case-name{margin:0;font:500 clamp(40px,4.4vw,76px)/.95 Archivo,sans-serif;letter-spacing:-.055em}
.case-sub{display:flex;align-items:center;gap:12px;margin:18px 0 26px;font-size:10px;letter-spacing:2px;text-transform:uppercase;color:var(--orange)}
.case-sub i{width:18px;height:1px;background:#ffffff40}
.case-desc{max-width:340px;margin:0 0 26px;font-size:14px;line-height:1.6;color:#a7aaa0}
.case-tags{display:grid;gap:10px;margin:0;padding:0;list-style:none}
.case-tags li{font-size:10px;letter-spacing:1.6px;text-transform:uppercase;color:#8c9087}
.case-tags li::before{content:'';display:inline-block;width:16px;height:1px;margin:0 12px 3px 0;background:var(--orange)}
.case-media{justify-self:end;width:100%;max-width:calc((100svh - 18vh - 34px) * 1.6);margin:0;min-width:0}
.case-frame{position:relative;border:1px solid #ffffff1f;background:#0e0f0e;clip-path:inset(calc((1 - var(--in,1)) * 14%) calc((1 - var(--in,1)) * 7%))}
.case-bar{display:flex;align-items:center;gap:6px;height:34px;padding:0 14px;border-bottom:1px solid #ffffff14;font-size:10px;letter-spacing:1.4px;color:#787e72}
.case-bar i{width:7px;height:7px;border:1px solid #ffffff38;border-radius:50%}
.case-bar span{margin-left:12px}
.case-shot{--r:0px;--mx:50%;--my:50%;position:relative;aspect-ratio:16/10;overflow:hidden;transition:--r .6s cubic-bezier(.16,1,.3,1)}
.case-shot img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:top;transform:translate3d(0,var(--py,0%),0) scale(1.08)}
.shot-mono{z-index:0;filter:grayscale(1) contrast(1.25) brightness(.64)}
.case-shot::before{content:'';position:absolute;inset:0;z-index:1;background:var(--orange);mix-blend-mode:multiply}
.case-shot::after{content:'';position:absolute;inset:0;z-index:2;background:radial-gradient(circle,transparent 0 1.05px,#080908 1.45px) 0 0/4px 4px;opacity:.72}
.shot-colour{z-index:3;-webkit-mask-image:radial-gradient(circle var(--r) at var(--mx) var(--my),#000 calc(100% - 1px),transparent);mask-image:radial-gradient(circle var(--r) at var(--mx) var(--my),#000 calc(100% - 1px),transparent)}
.lens-ring{position:absolute;left:var(--mx);top:var(--my);z-index:4;width:calc(var(--r) * 2);height:calc(var(--r) * 2);border:1px solid var(--orange);border-radius:50%;transform:translate(-50%,-50%);pointer-events:none;opacity:calc(var(--r) / 190px)}
.case-shot.lens{--r:190px;cursor:crosshair}
.case.lit .case-shot{--r:1400px}.case.lit .lens-ring{opacity:0}
.work-all{padding:16vh 3.8vw 20vh}
.all-btn{position:relative;isolation:isolate;display:flex;align-items:center;gap:22px;width:100%;padding:4.5vh 0;overflow:hidden;border:0;border-top:1px solid #ffffff24;border-bottom:1px solid #ffffff24;background:none;color:var(--paper);text-align:left;cursor:pointer}
.all-btn::before{content:'';position:absolute;inset:0;z-index:-1;background:var(--orange);transform:scaleY(0);transform-origin:bottom;transition:transform .55s cubic-bezier(.16,1,.3,1)}
.all-btn:is(:hover,:focus-visible)::before{transform:scaleY(1)}
.all-btn:focus-visible{outline:none}
.all-label{font:500 clamp(40px,7vw,128px)/1 Archivo,sans-serif;letter-spacing:-.06em;transition:transform .55s cubic-bezier(.16,1,.3,1)}
.all-btn:is(:hover,:focus-visible) .all-label{transform:translateX(2.4vw)}
.all-count{align-self:flex-start;margin-top:1.1em;font-size:12px;letter-spacing:2px;color:var(--orange);transition:color .3s}
.all-btn:is(:hover,:focus-visible) .all-count{color:var(--paper)}
.all-arrow{margin-left:auto;font:300 clamp(36px,5vw,90px)/1 Hanken,sans-serif;transition:transform .55s cubic-bezier(.16,1,.3,1)}
.all-btn:is(:hover,:focus-visible) .all-arrow{transform:rotate(45deg)}
.index{position:fixed;inset:0;width:100%;height:100%;max-width:none;max-height:none;margin:0;padding:0;overflow-y:auto;overscroll-behavior:contain;border:0;background:#0b0c0b;color:var(--paper)}
.index::backdrop{background:transparent}
.index[open]{animation:curtain .85s cubic-bezier(.76,0,.24,1) both}
.index.closing{animation:curtain-out .6s cubic-bezier(.76,0,.24,1) both}
@keyframes curtain{from{clip-path:inset(100% 0 0 0)}to{clip-path:inset(0)}}
@keyframes curtain-out{from{clip-path:inset(0)}to{clip-path:inset(0 0 100% 0)}}
.index-wrap{padding:5vh 3.8vw 12vh}
.index-head{display:flex;align-items:flex-start;justify-content:space-between;gap:24px}
.index-head h2{margin:0;font:500 clamp(56px,9vw,160px)/.9 Archivo,sans-serif;letter-spacing:-.07em}
.index-head sup{margin-left:.35em;font:400 12px Hanken,sans-serif;letter-spacing:2px;vertical-align:top;color:var(--orange)}
.index-close{display:flex;align-items:center;gap:12px;padding:10px 0;border:0;background:none;color:var(--paper);font:11px Hanken,sans-serif;letter-spacing:2px;text-transform:uppercase;cursor:pointer}
.index-close span{font-size:26px;color:var(--orange);transition:transform .4s cubic-bezier(.16,1,.3,1)}
.index-close:hover span{transform:rotate(90deg)}
.index-filters{display:flex;flex-wrap:wrap;gap:10px;margin:6vh 0 5vh}
.index-filters button{padding:10px 16px;border:1px solid #ffffff2e;border-radius:999px;background:none;color:#a7aaa0;font:11px Hanken,sans-serif;letter-spacing:1.4px;text-transform:uppercase;cursor:pointer;transition:background-color .25s,color .25s,border-color .25s}
.index-filters button:hover{border-color:var(--paper);color:var(--paper)}
.index-filters button[aria-pressed=true]{border-color:var(--paper);background:var(--paper);color:#080908}
.index-filters sup{margin-left:6px;font-size:9px;color:var(--orange)}
.index-cols,.index-row{display:grid;grid-template-columns:70px 2.1fr 1fr 1.6fr 70px;align-items:center;gap:20px}
.index-cols{padding-bottom:14px;border-bottom:1px solid #ffffff1f;font-size:10px;letter-spacing:2px;text-transform:uppercase;color:#787e72}
.index-cols span:last-child,.r-year{text-align:right}
.index-list{margin:0;padding:0;list-style:none}
.index-row{position:relative;padding:3.4vh 0;border-bottom:1px solid #ffffff14;opacity:0;transform:translateY(26px)}
.index[open] .index-row{animation:rowin .8s cubic-bezier(.16,1,.3,1) forwards;animation-delay:calc(.4s + var(--i,0) * .06s)}
.index-row.again{animation:rowin .6s cubic-bezier(.16,1,.3,1) forwards;animation-delay:calc(var(--i,0) * .05s)}
@keyframes rowin{to{opacity:1;transform:none}}
.index-row>*{transition:opacity .3s}
.index-list:hover .index-row:not(:hover)>*{opacity:.3}
.r-no{font-size:11px;letter-spacing:1.4px;color:#787e72}
.r-name{font:500 clamp(26px,3.2vw,54px)/1 Archivo,sans-serif;letter-spacing:-.05em;transition:transform .45s cubic-bezier(.16,1,.3,1),opacity .3s}
.index-row:hover .r-name{transform:translateX(18px)}
.r-sector,.r-services{font-size:12px;line-height:1.5;color:#a7aaa0}
.r-year{font-size:12px;color:#787e72}
.index-preview{position:fixed;left:0;top:0;z-index:5;width:min(30vw,440px);aspect-ratio:16/10;overflow:hidden;border:1px solid #ffffff24;background:#0e0f0e;opacity:0;pointer-events:none;transition:opacity .3s}
.index-preview.on{opacity:1}
.index-preview img{width:100%;height:100%;object-fit:cover;object-position:top}
.cover-type{display:grid;place-content:center;justify-items:center;gap:10px;width:100%;height:100%;background:#1d3a2f;color:#f3efe4}
.cover-type b{font:800 clamp(40px,6vw,96px)/.9 Archivo,sans-serif;letter-spacing:-.06em}
.cover-type span{font-size:10px;letter-spacing:3px;text-transform:uppercase;opacity:.75}
@media(max-width:760px){
  .work{padding-top:16vh}
  .work-head{grid-template-columns:1fr;gap:20px;padding:0 23px 34vh}
  .work-title{font-size:21vw}
  .case-inner{grid-template-columns:1fr;align-content:center;gap:4vh;padding:11vh 23px 5vh}
  .case-media{order:-1;max-width:none}
  .case-no{margin-bottom:2vh;font-size:60px}
  .case-name{font-size:36px}
  .case-sub{margin:12px 0 16px}
  .case-desc{margin-bottom:16px;font-size:13px}
  .case-tags{display:flex;flex-wrap:wrap;gap:8px 16px}.case-tags li{font-size:8px}
  .work-all{padding:10vh 23px 14vh}
  .all-btn{gap:12px}
  .index-wrap{padding:4vh 23px 10vh}
  .index-cols{display:none}
  .index-row{grid-template-columns:34px 1fr 44px;gap:12px;padding:2.6vh 0}
  .r-sector,.r-services{display:none}
  .index-preview{display:none}
}
@media(prefers-reduced-motion:reduce){.index[open],.index.closing{animation:none}.index[open] .index-row,.index-row.again{animation:none;opacity:1;transform:none}.case-shot{transition:none}.wt-solid,.wt-ghost,.case-inner{transform:none}}
.index-row[hidden]{display:none}

/* Coming soon: the screenshot stays behind the halftone but is blurred out. */
.case.soon .shot-mono{filter:grayscale(1) contrast(1.25) brightness(.7) blur(9px);transform:scale(1.1)}
.soon-tag{position:absolute;left:50%;top:50%;z-index:4;display:flex;align-items:center;gap:12px;padding:14px 22px;border:1px solid #ffffff38;background:#080908cc;color:var(--paper);font-size:11px;letter-spacing:2.4px;text-transform:uppercase;white-space:nowrap;transform:translate(-50%,-50%);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.soon-tag i{width:7px;height:7px;border-radius:50%;background:var(--orange);animation:soon-pulse 1.8s ease-in-out infinite}
@keyframes soon-pulse{50%{opacity:.25}}
.case.soon .case-sub{color:var(--paper)}
.r-soon{font-style:normal;color:var(--orange);letter-spacing:1.6px;text-transform:uppercase;font-size:10px}
.index-preview img.is-soon{filter:blur(18px) grayscale(1) brightness(.6);transform:scale(1.2)}
.cover-type img{width:clamp(48px,7vw,110px);height:auto;margin-bottom:6px}
@media(prefers-reduced-motion:reduce){.soon-tag i{animation:none}}
/* A typographic cover shows in its own colours, without the screenshot halftone. */
.case-shot.is-cover::before,.case-shot.is-cover::after{content:none}
.case-shot.is-cover .cover-type{position:absolute;inset:0}
.case-shot.is-cover .cover-type img{position:static;width:clamp(56px,7vw,120px);height:auto;transform:none;object-fit:contain}
.case-shot.is-cover .cover-type b{font-size:clamp(56px,8vw,140px)}
/* Particles draw the case numbers once they latch on, so the outline steps back. */
.p-latch .case-no{-webkit-text-stroke-color:transparent}
/* Particles draw the hollow "work." once they take over; the probe marks its baseline. */
.base-probe{display:inline-block;width:0;height:0}
.p-latch .wt-ghost{-webkit-text-stroke-color:transparent}
.p-latch .wt-ghost .title-stop{color:transparent}

/* Menu. The button is fixed so it is there wherever you are on the page. When
   open, the particle layer is raised above the overlay (.menu-open) so the
   particles can fly in and draw the focused item's number. */
header{padding-right:calc(3.8vw + 72px)}
.burger{position:fixed;top:30px;right:3.8vw;z-index:7;display:block;width:50px;height:50px;padding:0;border:1px solid #ffffff38;background:#08090899;color:var(--paper);cursor:pointer;transition:border-color .35s,background-color .35s}
/* Three lines of particles: a burger that reads instantly but is made of the
   site's own dots. Lines are uneven at rest, even out and ripple on hover,
   and the outer two cross into an X when open. */
.burger-icon{position:absolute;inset:0;display:grid;place-content:center;justify-items:start;gap:5px}
.br{display:flex;gap:1.6px;width:24px;transition:transform .7s cubic-bezier(.76,0,.24,1),opacity .4s}
.br i{width:3.5px;height:3.5px;flex:none;background:var(--paper);transition:transform .5s cubic-bezier(.16,1,.3,1) calc(var(--c) * 35ms),opacity .4s calc(var(--c) * 35ms),background-color .3s}
.br:nth-child(2) i:nth-child(n+4),.br:nth-child(3) i:nth-child(5){opacity:0;transform:translateX(-6px)}
.br:nth-child(2) i:first-child{background:var(--orange)}
.burger:is(:hover,:focus-visible){border-color:var(--orange)}
.burger:is(:hover,:focus-visible) .br i{opacity:1;transform:none;animation:dotwave 1.1s ease-in-out calc(var(--c) * 90ms) infinite}
@keyframes dotwave{50%{transform:translateY(-2.5px)}}
.burger[aria-expanded=true]{border-color:var(--orange);background:var(--orange)}
.burger[aria-expanded=true] .br i{opacity:1;transform:none;animation:none;background:#080908}
.burger[aria-expanded=true] .br:nth-child(1){transform:translateY(8.5px) rotate(45deg)}
.burger[aria-expanded=true] .br:nth-child(2){opacity:0;transform:scaleX(0)}
.burger[aria-expanded=true] .br:nth-child(3){transform:translateY(-8.5px) rotate(-45deg)}
.burger:focus-visible{outline:none}
.menu-open .scene:not(.scene-front){z-index:6}
.menu-open .giant{opacity:0;transition:opacity .4s}
.menu{position:fixed;inset:0;z-index:5;background:#080908;opacity:0;visibility:hidden;transition:opacity .6s cubic-bezier(.76,0,.24,1),visibility 0s .6s}
.menu.open{opacity:1;visibility:visible;transition:opacity .5s cubic-bezier(.76,0,.24,1)}
.menu-inner{position:relative;height:100%}
/* Items orbit the particle sphere; script.js places each <li> on the ellipse. */
.menu-list{position:absolute;inset:0;margin:0;padding:0;list-style:none}
.menu-list li{position:absolute;left:0;top:0;transform-origin:0 0;will-change:transform,opacity}
.menu-link{display:flex;flex-direction:column;align-items:center;gap:10px;padding:14px 18px;color:var(--paper);text-align:center;white-space:nowrap;transform:translate(-50%,-50%)}
.menu-link:focus-visible{outline:none}
.ml-no{font-size:11px;letter-spacing:2.4px;color:var(--orange);opacity:0;transition:opacity .5s .45s}
.ml-label{display:block;overflow:hidden;padding-bottom:.08em;font:500 clamp(30px,3.6vw,64px)/1 Archivo,sans-serif;letter-spacing:-.055em;transition:color .3s}
.ml-label>span{display:block;transform:translateY(115%);transition:transform .55s cubic-bezier(.76,0,.24,1)}
.menu.open .ml-no{opacity:1}
.menu.open .ml-label>span{transform:none;transition:transform 1s cubic-bezier(.16,1,.3,1) .35s}
.menu-link.on .ml-label{color:#fff}
.menu-foot{position:absolute;left:3.8vw;right:3.8vw;bottom:5vh;display:flex;justify-content:space-between;gap:20px;font-size:11px;letter-spacing:2px;text-transform:uppercase;color:#8c9087;opacity:0;transition:opacity .4s}
.menu.open .menu-foot{opacity:1;transition:opacity .6s .6s}
.menu-foot a{color:var(--paper);text-transform:none;letter-spacing:.4px;font-size:14px}
.menu-foot a:hover{color:var(--orange)}
@media(max-width:640px){
  header{padding-right:calc(23px + 60px)}
  .burger{top:22px;right:23px;width:46px;height:46px}
  .ml-label{font-size:24px}.ml-no{font-size:9px}.menu-link{gap:6px;padding:10px 12px}
  .menu-callout{width:200px}.mc-title{font-size:16px}.mc-text{font-size:10px}
  .menu-foot{left:23px;right:23px;flex-direction:column;gap:8px}
}
@media(prefers-reduced-motion:reduce){.ml-label>span,.menu.open .ml-label>span{transform:none;transition:none}.menu,.menu.open{transition:none}}

/* Callout for the focused item: placed by script.js just outside its brackets,
   joined to them by a particle leader line. Text swaps with a short lift. */
.menu-callout{position:absolute;left:0;top:0;z-index:2;width:300px;pointer-events:none;will-change:transform}
.mc-inner{display:grid;gap:6px;padding:12px 14px;border-left:1px solid var(--orange);background:#080908d9;transition:opacity .28s,transform .45s cubic-bezier(.16,1,.3,1)}
.menu-callout.swap .mc-inner{opacity:0;transform:translateY(10px)}
.mc-no{font-size:10px;letter-spacing:2.4px;color:var(--orange)}
.mc-title{font:500 20px/1.05 Archivo,sans-serif;letter-spacing:-.03em;color:var(--paper)}
.mc-text{font-size:11px;line-height:1.5;letter-spacing:1.2px;text-transform:uppercase;color:#a7aaa0}
.menu-list li .ml-label{transition:color .6s}
@media(max-width:640px){.menu-callout{width:190px}.mc-inner{padding:9px 11px}.mc-title{font-size:15px}.mc-text{font-size:9px;letter-spacing:.8px}}
@media(max-width:640px){.menu-foot{display:none}}

/* Next-section control: a square of particle dots forming an arrow. The border
   fills orange with progress through the hero (--p); the dots cascade down on
   a loop and drop through on hover. The label names where it goes next. */
.nav-next{display:flex;align-items:center;gap:18px;pointer-events:auto}
.next-label{display:flex;align-items:baseline;gap:10px;font-size:10px;letter-spacing:2.2px;text-transform:uppercase;color:#a7aaa0;transition:opacity .35s,transform .45s cubic-bezier(.16,1,.3,1)}
.next-label b{font-weight:400;color:var(--orange)}
.next-label.swap{opacity:0;transform:translateY(6px)}
#build{position:relative;width:50px;height:50px;padding:0;border:0;background:#08090899;cursor:pointer;overflow:hidden}
.build-ring{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.build-ring rect{fill:none;stroke:#ffffff38;stroke-width:1}
.build-ring rect+rect{stroke:var(--orange)}
.build-dots{position:absolute;left:50%;top:50%}
.build-dots i{position:absolute;left:0;top:0;width:3.5px;height:3.5px;margin:-1.75px 0 0 -1.75px;background:var(--paper);transform:translate(var(--x),var(--y));animation:cascade 1.8s ease-in-out var(--d) infinite}
.build-dots i:nth-child(5){background:var(--orange)}
@keyframes cascade{0%,100%{opacity:.35}30%{opacity:1}}
#build:is(:hover,:focus-visible) .build-dots i{animation:dropthrough .9s cubic-bezier(.76,0,.24,1) calc(var(--d) * .4) infinite}
@keyframes dropthrough{0%{transform:translate(var(--x),var(--y));opacity:1}45%{transform:translate(var(--x),calc(var(--y) + 26px));opacity:0}46%{transform:translate(var(--x),calc(var(--y) - 26px));opacity:0}100%{transform:translate(var(--x),var(--y));opacity:1}}
#build:is(:hover,:focus-visible){background:#de3a1122}
#build:focus-visible{outline:none}
#build:is(:hover,:focus-visible) .build-ring rect:first-child{stroke:var(--orange)}
@media(max-width:640px){.next-label{display:none}#build{width:46px;height:46px}}
@media(prefers-reduced-motion:reduce){.build-dots i,#build:is(:hover,:focus-visible) .build-dots i{animation:none;opacity:1}}
.ring-fill{stroke-dasharray:100;stroke-dashoffset:calc(100 - var(--p,0) * 100)}

/* Our process. A pinned horizontal journey: the track slides one panel per
   screen of scroll (--px), each panel's copy reveals with its presence (--a)
   and particles draw the phase in its .pp-art box. The rail fills as you go. */
.process{position:relative;z-index:1;height:860svh;background:#080908;color:var(--paper)}
.p-stage{position:sticky;top:0;height:100svh;overflow:hidden}
.p-head{position:absolute;left:3.8vw;top:13vh;z-index:2;display:flex;align-items:center;gap:22px;font-size:10px;letter-spacing:2px;text-transform:uppercase;color:#8c9087}
.p-head h2{margin:0;font:inherit;color:var(--paper)}
.p-head h2::before{content:'';display:inline-block;width:6px;height:6px;margin:0 12px 1px 0;background:var(--orange)}
.p-track{display:flex;height:100%;width:700vw;transform:translate3d(var(--px,0px),0,0)}
.p-panel{flex:0 0 100vw;display:grid;grid-template-columns:minmax(300px,34%) 1fr;align-items:center;gap:5vw;height:100%;padding:20vh 3.8vw 24vh}
.pp-copy{position:relative;opacity:clamp(0,var(--a,0) * 1.6,1)}
.pp-copy>*{transform:translate3d(calc((1 - var(--a,0)) * var(--dir,1) * 60px),0,0)}
.pp-no{position:absolute;left:-.04em;top:-.62em;z-index:-1;font:800 clamp(140px,19vw,300px)/1 Archivo,sans-serif;letter-spacing:-.06em;color:transparent;-webkit-text-stroke:1px #f4f1e91a;user-select:none}
.pp-time{margin:0 0 16px;font-size:10px;letter-spacing:2.2px;text-transform:uppercase;color:var(--orange)}
.pp-name{margin:0;font:500 clamp(54px,6.4vw,118px)/.92 Archivo,sans-serif;letter-spacing:-.065em}
.pp-name span{color:var(--orange)}
.pp-lede{margin:22px 0 0;font:400 clamp(19px,1.6vw,26px)/1.25 Archivo,sans-serif;letter-spacing:-.02em}
.pp-desc{max-width:400px;margin:16px 0 26px;font-size:14px;line-height:1.6;color:#a7aaa0}
.pp-list{display:grid;gap:10px;margin:0;padding:0;list-style:none}
.pp-list li{font-size:10px;letter-spacing:1.6px;text-transform:uppercase;color:#8c9087}
.pp-list li::before{content:'';display:inline-block;width:16px;height:1px;margin:0 12px 3px 0;background:var(--orange)}
.pp-art{align-self:stretch;min-height:0}
.p-title{margin:0;font:500 clamp(64px,8.8vw,164px)/.92 Archivo,sans-serif;letter-spacing:-.07em}
.pt-ghost{color:transparent;-webkit-text-stroke:1px var(--paper)}
.pt-ghost .title-stop{-webkit-text-stroke:0;color:var(--orange)}
.p-intro .ln>span{transform:translate3d(0,calc((1 - clamp(0,(var(--a,0) - var(--i,0) * .15) * 1.8,1)) * 110%),0)}
.p-intro .pp-desc{margin-top:28px}
.p-hint{display:flex;align-items:center;gap:12px;margin:0;font-size:10px;letter-spacing:2px;text-transform:uppercase;color:#8c9087}
.p-hint::after{content:'';width:46px;height:1px;background:linear-gradient(90deg,var(--orange),transparent)}
.p-rail{position:absolute;left:3.8vw;right:3.8vw;bottom:32px;z-index:2;display:grid;grid-template-columns:repeat(6,1fr);gap:16px}
.p-rail button{position:relative;padding:0 0 13px;border:0;background:none;color:#787e72;font:10px Hanken,sans-serif;letter-spacing:1.4px;text-align:left;cursor:pointer;transition:color .3s}
.p-rail b{display:block;margin-top:6px;font:500 15px/1 Archivo,sans-serif;letter-spacing:-.3px;color:#8c9087;transition:color .3s}
.p-rail i{position:absolute;left:0;right:0;bottom:0;height:1px;background:#ffffff1f}
.p-rail i::after{content:'';position:absolute;inset:0;background:var(--orange);transform:scaleX(var(--f,0));transform-origin:left}
.p-rail button[aria-current=true],.p-rail button:hover{color:var(--orange)}
.p-rail button[aria-current=true] b,.p-rail button:hover b{color:var(--paper)}
@media(max-height:760px) and (min-width:761px){.p-panel{padding:17vh 3.8vw 20vh}.pp-name{font-size:clamp(46px,5.4vw,90px)}.pp-desc{margin:12px 0 16px;font-size:13px}.pp-lede{margin-top:14px}}
@media(max-width:760px){
  .p-head{left:23px;top:11vh}
  .p-panel{grid-template-columns:1fr;grid-template-rows:30vh auto;align-content:start;gap:3vh;padding:17vh 23px 14vh}
  .pp-art{grid-row:1}
  .pp-no{font-size:110px;top:-.5em}
  .pp-name{font-size:48px}.pp-lede{font-size:18px;margin-top:12px}.pp-desc{font-size:12px;margin:10px 0 14px}
  .pp-list{display:flex;flex-wrap:wrap;gap:8px 16px}.pp-list li{font-size:8px}
  .p-title{font-size:17vw}
  .p-intro{grid-template-rows:30vh auto}
  .p-rail{left:23px;right:23px;bottom:24px;gap:8px}.p-rail b{display:none}.p-rail button{font-size:9px;padding-bottom:9px}
}
@media(prefers-reduced-motion:reduce){.pp-copy>*,.p-intro .ln>span{transform:none}}
.p-intro{grid-template-columns:minmax(0,48%) 1fr}.p-intro .p-title{font-size:clamp(56px,7.4vw,136px)}
@media(max-width:760px){.p-intro{grid-template-columns:1fr}.p-intro .p-title{font-size:16vw}}
.p-panel{contain:layout paint}.pp-copy{will-change:transform,opacity}
.case-media{display:block;color:inherit}
.case-link{display:inline-flex;align-items:center;gap:14px;margin-top:30px;padding:14px 0;border-bottom:1px solid #ffffff38;font:500 15px Archivo,sans-serif;letter-spacing:-.2px;color:var(--paper);transition:border-color .3s,gap .4s cubic-bezier(.16,1,.3,1)}
.case-link i{font-style:normal;color:var(--orange);transition:transform .4s cubic-bezier(.16,1,.3,1)}
.case-link:hover{border-color:var(--orange);gap:22px}.case-link:hover i{transform:translateX(4px)}
@media(max-width:760px){.case-link{margin-top:18px;padding:10px 0;font-size:14px}}
.p-latch .pp-no,.pp-no{-webkit-text-stroke-color:transparent}