/* =========================================================
   HARVEST ADVERTISING · Roadside identity
   Layout: the site is a drive. Dark road bands (night) alternate with
   pasted-poster paper bands (chalk), bold sign colors (sun, cobalt).
   ========================================================= */
:root{
  --night:#141833;
  --night-2:#1E2350;
  --frame:#2E3561;
  --cobalt:#2D46E0;
  --cobalt-deep:#2236B8;
  --sun:#FFD447;
  --sun-2:#FFE27E;
  --chalk:#F5F4EF;
  --paper:#EAE7DC;
  --steel:#5B6182;
  --mist:#B9BCD3;
  --error:#B3361F;

  --display:"Big Shoulders Display","Arial Narrow","Roboto Condensed",Impact,sans-serif;
  --sans:"Instrument Sans",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;

  --step--1:.875rem; --step-0:1.0625rem; --step-1:1.25rem; --step-2:1.6rem;
  --step-3:clamp(2rem,3.6vw,2.9rem); --step-4:clamp(2.6rem,5.6vw,4.6rem); --step-5:clamp(3.4rem,8vw,7rem);

  --header-h:72px;
  --gutter:max(20px, env(safe-area-inset-left, 0px));
  --gutter-r:max(20px, env(safe-area-inset-right, 0px));
  --ease-out:cubic-bezier(.2,.9,.2,1);
  --ease-snap:cubic-bezier(.7,0,.25,1);
  --focus:var(--cobalt);
  color-scheme:light;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;overflow-x:clip}
body{margin:0;background:var(--chalk);color:var(--night);font:400 var(--step-0)/1.6 var(--sans);overflow-x:clip;text-rendering:optimizeLegibility}
[hidden]{display:none!important}
img,svg{display:block;max-width:100%}
img{height:auto}
a{color:inherit}
h1,h2,h3,p,ul,ol,figure{margin:0}
ul,ol{padding:0;list-style:none}
address{font-style:normal}
button{font:inherit;color:inherit}
:focus-visible{outline:3px solid var(--focus);outline-offset:3px}
.dark,.site-header,.hero,.drive,.sec-process,.site-footer,.mobile-menu{--focus:var(--sun)}

.wrap{width:100%;max-width:1320px;margin-inline:auto;padding-left:var(--gutter);padding-right:var(--gutter-r)}
.sr,.bb-static.sr-mode{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}
.skip{position:absolute;left:12px;top:-60px;z-index:200;background:var(--sun);color:var(--night);padding:12px 16px;font-weight:700;text-decoration:none}
.skip:focus{top:12px}

.h-display{font:900 var(--step-4)/.9 var(--display);text-transform:uppercase;letter-spacing:-.005em;text-wrap:balance}
.lead{font-size:var(--step-1);line-height:1.5}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:50px;padding:0 22px;font:700 1rem/1 var(--sans);text-decoration:none;border:2px solid transparent;cursor:pointer;transition:background-color .2s var(--ease-out),color .2s,border-color .2s,translate .2s var(--ease-out)}
.btn svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2.2}
.btn:active{translate:0 1px}
.btn-sun{background:var(--sun);color:var(--night)}
.btn-sun:hover{background:var(--sun-2)}
.btn-ghost{border-color:var(--chalk);color:var(--chalk)}
.btn-ghost:hover{background:var(--chalk);color:var(--night)}
.btn-night{background:var(--night);color:var(--chalk)}
.btn-night:hover{background:var(--cobalt)}
/* calendar icon: a page drops in */
.i-cal .cal-page{fill:currentColor;stroke:none;transition:translate .3s var(--ease-out)}
.btn:hover .i-cal .cal-page,.btn:focus-visible .i-cal .cal-page{translate:6px 0}

.link-arrow{display:inline-flex;align-items:center;gap:10px;font-weight:700;text-decoration:underline;text-decoration-thickness:3px;text-decoration-color:var(--sun);text-underline-offset:6px;min-height:44px}
.link-arrow svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2.4;transition:translate .25s var(--ease-out)}
.link-arrow:hover svg{translate:5px 0}

.sample-tag{position:absolute;left:10px;top:10px;z-index:3;background:rgba(20,24,51,.9);color:var(--chalk);font:600 .72rem/1 var(--sans);letter-spacing:.04em;padding:6px 8px}

/* ---------- header ---------- */
.site-header{position:sticky;top:env(safe-area-inset-top,0px);z-index:50;background:var(--night);color:var(--chalk);border-bottom:1px solid var(--frame)}
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);z-index:60;background:var(--night)}
.bar{display:flex;align-items:center;gap:24px;height:var(--header-h)}
.logo{display:inline-flex;align-items:center;gap:10px;text-decoration:none;min-height:44px}
.logo-mark{display:grid;place-items:center;width:32px;height:32px;background:var(--sun);color:var(--night);border:3px solid var(--chalk);font:900 1.15rem/1 var(--display)}
.logo-word{font:900 1.75rem/1 var(--display);text-transform:uppercase;letter-spacing:.01em}
.nav{margin-left:auto}
.nav ul{display:flex;gap:4px}
.nav a{display:inline-flex;align-items:center;min-height:44px;padding:0 12px;font-weight:600;text-decoration:none;position:relative}
.nav a::after{content:"";position:absolute;left:12px;right:12px;bottom:8px;height:3px;background:var(--sun);scale:0 1;transform-origin:left;transition:scale .25s var(--ease-out)}
.nav a:hover::after{scale:1 1}
.nav a[aria-current="page"]{background:var(--sun);color:var(--night);rotate:-2deg;margin-inline:4px}
.nav a[aria-current="page"]::after{display:none}
.header-cta{min-height:46px}
.menu-btn{display:none;margin-left:auto;align-items:center;gap:10px;min-height:44px;min-width:44px;padding:0 12px;background:transparent;border:2px solid var(--chalk);cursor:pointer;font-weight:700}
.menu-icon{display:grid;gap:5px;width:20px}
.menu-icon i{display:block;height:2.5px;background:currentColor;transition:rotate .3s var(--ease-out),translate .3s var(--ease-out)}
.menu-btn[aria-expanded="true"] .menu-icon i:first-child{translate:0 3.75px;rotate:45deg}
.menu-btn[aria-expanded="true"] .menu-icon i:last-child{translate:0 -3.75px;rotate:-45deg}
@media (max-width:959px){
  .nav,.header-cta{display:none}
  .menu-btn{display:inline-flex}
}
.mobile-menu{position:fixed;left:0;right:0;top:calc(var(--header-h) + env(safe-area-inset-top,0px));bottom:0;background:var(--night);color:var(--chalk);padding:32px max(20px,env(safe-area-inset-right,0px)) calc(32px + env(safe-area-inset-bottom,0px)) max(20px,env(safe-area-inset-left,0px));overflow-y:auto;display:flex;flex-direction:column;gap:28px;transform-origin:top center}
.mobile-menu ul{display:grid;gap:4px}
.mobile-menu a:not(.btn){display:block;font:900 clamp(2.6rem,12vw,4rem)/1 var(--display);text-transform:uppercase;text-decoration:none;padding:6px 0}
.mobile-menu a[aria-current="page"]{color:var(--sun)}
.mobile-menu .btn{align-self:flex-start}
.mm-meta{color:var(--mist);font-size:var(--step--1)}
html.js .mobile-menu.opening{animation:flipDown .45s var(--ease-out)}
@keyframes flipDown{from{transform:perspective(900px) rotateX(-70deg);opacity:.2}to{transform:none;opacity:1}}

/* ---------- hero shared ---------- */
.hero{position:relative;background:var(--night);color:var(--chalk);overflow:hidden;isolation:isolate}
.road{position:relative;height:44px;background:#0A0C1D;overflow:hidden;z-index:2}
.road-line{position:absolute;left:0;top:50%;height:4px;margin-top:-2px;width:calc(100% + 96px);background:repeating-linear-gradient(90deg,var(--sun) 0 48px,transparent 48px 96px)}
html.js .hero.is-live .road-line{animation:road 3.4s linear infinite}
@keyframes road{to{translate:-96px 0}}
.actions{display:flex;flex-wrap:wrap;gap:12px}

/* ---------- HERO 1 · tri-vision ---------- */
.hero-tri{padding-top:clamp(36px,6vw,72px)}
.hero-sky{position:absolute;inset:0;z-index:-1;background:
  radial-gradient(70% 55% at 78% 8%, rgba(45,70,224,.45) 0%, rgba(45,70,224,0) 70%),
  linear-gradient(180deg,#0F1230 0%, var(--night) 60%)}
.skyline{position:absolute;left:0;right:0;bottom:44px;width:100%;height:clamp(80px,14vw,200px);color:#0E1129}
.hero-tri-inner{position:relative;display:grid;gap:clamp(32px,5vw,56px);padding-bottom:clamp(40px,6vw,72px)}
.billboard{position:relative;margin-inline:auto;width:100%;max-width:1220px}
.bb-lamps{display:flex;justify-content:space-around;padding-inline:8%;height:28px}
.bb-lamps span{position:relative;width:56px;height:12px;background:var(--frame);margin-top:12px}
.bb-lamps span::before{content:"";position:absolute;left:24px;top:-12px;width:8px;height:14px;background:var(--frame)}
.bb-lamps span::after{content:"";position:absolute;left:-40px;top:12px;width:136px;height:clamp(120px,22vw,280px);background:linear-gradient(180deg,rgba(255,236,170,.32),rgba(255,236,170,0));clip-path:polygon(38% 0,62% 0,100% 100%,0 100%);pointer-events:none;z-index:2}
.bb-frame{position:relative;border:clamp(6px,.8vw,10px) solid var(--frame);background:#0B0E24;padding:clamp(5px,.6vw,9px)}
.bb-static{display:flex;align-items:center;min-height:clamp(170px,28vw,360px);padding:4% 5%;background:var(--sun);color:var(--night);font:900 clamp(2.2rem,6.4vw,6rem)/.88 var(--display);text-transform:uppercase;text-wrap:balance}
html.js .billboard.has-slats .bb-static{position:absolute;width:1px;height:1px;min-height:0;padding:0;overflow:hidden;clip-path:inset(50%)}
.bb-slats{display:none}
html.js .billboard.has-slats .bb-slats{display:grid;grid-template-columns:repeat(var(--n,12),1fr);gap:3px;perspective:1200px;height:clamp(170px,28vw,360px)}
.slat{position:relative;transform-style:preserve-3d;transition:transform 1s var(--ease-snap)}
.face{position:absolute;inset:0;backface-visibility:hidden;overflow:hidden}
.face span{position:absolute;top:50%;translate:0 -50%;width:calc(var(--n,12) * 100% + (var(--n,12) - 1) * 3px);padding-left:4.5%;white-space:nowrap;font:900 var(--bb-fs,clamp(2.4rem,7.4vw,7rem))/.86 var(--display);text-transform:uppercase}
.face.f0{background:var(--sun);color:var(--night)}
.face.f1{background:var(--cobalt);color:#fff}
.face.f2{background:var(--chalk);color:var(--night)}
.bb-legs{display:flex;justify-content:space-around;padding-inline:18%;height:clamp(40px,6vw,80px)}
.bb-legs i{width:clamp(10px,1.2vw,16px);background:var(--frame)}
.bb-pause{position:absolute;right:0;bottom:0;display:none;align-items:center;gap:8px;min-height:44px;padding:0 14px;background:var(--night);border:2px solid var(--frame);color:var(--chalk);font-weight:600;font-size:.9rem;cursor:pointer}
html.js .billboard.has-slats .bb-pause{display:inline-flex}
.bb-pause svg{width:16px;height:16px;fill:currentColor}
.bb-pause .pl{display:none}
.bb-pause[aria-pressed="true"] .p1,.bb-pause[aria-pressed="true"] .p2{display:none}
.bb-pause[aria-pressed="true"] .pl{display:block}
.hero-tri-copy{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:clamp(24px,4vw,64px);align-items:end}
.hero-tri-copy h1{font:600 clamp(1.7rem,3.1vw,2.7rem)/1.12 var(--sans);letter-spacing:-.015em;text-wrap:balance;max-width:22ch}
.hero-side{display:grid;gap:22px}
.hero-side p{color:#D6D8E7;max-width:46ch}
@media (max-width:860px){.hero-tri-copy{grid-template-columns:1fr}}

/* ---------- HERO 2 · gantry ---------- */
.hero-gantry{min-height:min(880px,94svh);display:flex;flex-direction:column}
.gantry-photo{position:absolute;inset:0;z-index:-1}
.gantry-photo img{width:100%;height:100%;object-fit:cover}
.gantry-photo .sample-tag{left:auto;right:max(16px,env(safe-area-inset-right,0px));top:auto;bottom:76px}
.gantry-inner{position:relative;flex:1;display:flex;flex-direction:column;justify-content:space-between;gap:40px;padding-bottom:clamp(36px,6vw,72px)}
.gantry{position:absolute;inset:0 var(--gutter-r) 0 var(--gutter);pointer-events:none}
.truss{position:absolute;left:0;right:0;top:26px;height:26px;background:
  repeating-linear-gradient(60deg,transparent 0 10px,#3C4372 10px 13px),
  repeating-linear-gradient(-60deg,transparent 0 10px,#3C4372 10px 13px),#252A52;border-block:4px solid #3C4372}
.post{position:absolute;top:26px;bottom:-44px;width:22px;background:linear-gradient(90deg,#252A52,#3C4372 50%,#252A52)}
.post-l{left:0}.post-r{right:0}
.signs{position:relative;display:grid;grid-template-columns:1fr 1fr 1fr;gap:clamp(10px,1.6vw,22px);padding:52px clamp(28px,4vw,56px) 0;margin:0}
.sign{position:relative;display:flex;flex-direction:column;justify-content:space-between;gap:18px;min-height:clamp(150px,17vw,230px);padding:clamp(16px,1.8vw,24px);background:var(--cobalt);color:#fff;border-radius:10px;box-shadow:inset 0 0 0 4px var(--cobalt),inset 0 0 0 7px #fff;font:800 clamp(1.9rem,3.8vw,3.9rem)/.9 var(--display);text-transform:uppercase;transform-origin:50% -26px}
.sign::before,.sign::after{content:"";position:absolute;top:-26px;width:6px;height:26px;background:#3C4372}
.sign::before{left:22%}.sign::after{right:22%}
.sign-arrow{flex:none}
.sign-arrow svg{width:clamp(30px,3vw,44px);height:auto;fill:none;stroke:currentColor;stroke-width:4;stroke-linecap:square}
.sign.s3{background:var(--sun);color:var(--night);box-shadow:inset 0 0 0 4px var(--sun),inset 0 0 0 7px var(--night)}
html.js .hero-gantry.is-in .sign{animation:swing 1.4s var(--ease-out) both}
html.js .hero-gantry.is-in .s2{animation-delay:.12s}
html.js .hero-gantry.is-in .s3{animation-delay:.24s}
@keyframes swing{0%{rotate:-9deg}35%{rotate:5deg}60%{rotate:-2.5deg}80%{rotate:1deg}100%{rotate:0deg}}
.gantry-copy{align-self:flex-start;max-width:620px;display:grid;gap:22px}
.scrim-local{background:linear-gradient(100deg,rgba(13,16,40,.9) 0%,rgba(13,16,40,.8) 75%,rgba(13,16,40,.55) 100%);padding:clamp(20px,3vw,32px);margin-left:clamp(28px,4vw,56px)}
.gantry-copy p{font-size:var(--step-1);line-height:1.5;color:#E7E8F1}
@media (max-width:760px){
  .signs{grid-template-columns:1fr;padding-inline:0;gap:14px}
  .post{display:none}
  .sign{min-height:auto;flex-direction:row;align-items:center;justify-content:flex-start;font-size:clamp(2rem,10vw,2.8rem)}
  .scrim-local{margin-left:0}
}

/* ---------- section scaffolding ---------- */
.sec{position:relative;overflow:hidden;padding-block:clamp(80px,11vw,150px);isolation:isolate}
.sec-head{display:grid;gap:14px;max-width:720px;margin-bottom:clamp(40px,6vw,72px)}
.sec-head p{color:var(--steel);max-width:58ch}
.giant{position:absolute;z-index:-1;left:-1vw;top:clamp(20px,4vw,60px);font:900 clamp(8rem,25vw,24rem)/.8 var(--display);text-transform:uppercase;color:transparent;-webkit-text-stroke:2px rgba(20,24,51,.13);white-space:nowrap;pointer-events:none;user-select:none;will-change:transform}
.giant-light{-webkit-text-stroke-color:rgba(20,24,51,.12)}
.giant-dark{-webkit-text-stroke-color:rgba(20,24,51,.22)}
.paper{background-color:var(--paper)}
.sec-intro,.sec-smb{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .08 0 0 0 0 .09 0 0 0 0 .2 0 0 0 .06 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}

/* ---------- reveal: posters getting pasted (transform only; content always visible) ---------- */
html.js .reveal{translate:0 26px;scale:.985;transition:translate .7s var(--ease-out),scale .7s var(--ease-out)}
html.js .reveal.in{translate:0 0;scale:1}

/* ---------- intro ---------- */
.intro-grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(40px,6vw,96px);align-items:center}
.intro-copy{display:grid;gap:22px;justify-items:start}
.intro-copy p:not(.lead){color:var(--steel);max-width:52ch}
.collage{position:relative;aspect-ratio:1/1.02;max-width:100%}
.poster{position:absolute;background:#fff;padding:clamp(6px,.8vw,10px);box-shadow:0 22px 34px -22px rgba(20,24,51,.55)}
.poster img{width:100%;height:100%;object-fit:cover}
.poster .sample-tag{left:18px;top:18px}
.p-a{left:0;top:2%;width:50%;aspect-ratio:4/5;rotate:-3deg;z-index:1}
.p-b{right:0;top:16%;width:58%;aspect-ratio:4/3;rotate:2.2deg;z-index:2}
.p-c{left:16%;bottom:0;width:60%;aspect-ratio:14/9;rotate:-1.4deg;z-index:3}
.tape{position:absolute;width:86px;height:26px;background:rgba(255,212,71,.78);z-index:4}
.tape.t1{left:-18px;top:14px;rotate:-38deg}
.tape.t2{right:-16px;top:10px;rotate:34deg}
@media (max-width:860px){.intro-grid{grid-template-columns:1fr}}

/* ---------- THE DRIVE ---------- */
.drive{position:relative;background:var(--night);color:var(--chalk);--focus:var(--sun)}
.drive-sticky{padding-block:clamp(80px,10vw,130px)}
.drive-head{display:flex;flex-wrap:wrap;align-items:end;justify-content:space-between;gap:12px 40px;margin-bottom:clamp(36px,5vw,56px)}
.drive-head p{color:var(--mist);max-width:40ch}
.drive-track{display:grid;gap:56px;padding-left:var(--gutter);padding-right:var(--gutter-r);max-width:1320px;margin-inline:auto;counter-reset:none}
.stop{position:relative;display:grid;grid-template-columns:auto minmax(0,1.4fr) minmax(0,1fr);grid-template-areas:"mile board plate" ". legs plate";column-gap:clamp(16px,3vw,40px);align-items:start}
.mile{grid-area:mile;display:grid;place-items:center;width:58px;min-height:92px;padding:10px 4px;background:var(--cobalt);color:#fff;border:3px solid #fff;border-radius:6px;font:800 1rem/1 var(--display);text-transform:uppercase;text-align:center;writing-mode:vertical-rl;rotate:180deg}
.stop-board{grid-area:board;position:relative;aspect-ratio:2.1/1;display:flex;flex-direction:column;justify-content:space-between;padding:clamp(16px,2.4vw,32px);border:clamp(6px,.7vw,9px) solid var(--frame);max-width:100%}
.stop-board h3{font:900 clamp(1.9rem,6.4vw,4.4rem)/.88 var(--display);text-transform:uppercase;overflow-wrap:anywhere}
.b-sun{background:var(--sun);color:var(--night)}
.b-cobalt{background:var(--cobalt);color:#fff}
.b-chalk{background:var(--chalk);color:var(--night)}
.b-night{background:#0B0E24;color:var(--sun);border-color:var(--sun)}
.stop-legs{grid-area:legs;display:flex;justify-content:space-around;padding-inline:22%;height:46px}
.stop-legs i{width:12px;background:var(--frame)}
.stop-plate{grid-area:plate;display:grid;gap:16px;align-self:center;max-width:40ch}
.stop-plate p{color:#DADCEA}
.stop-plate a{justify-self:start;display:inline-flex;align-items:center;min-height:44px;font-weight:700;text-decoration:underline;text-decoration-color:var(--sun);text-decoration-thickness:3px;text-underline-offset:6px}
.drive-road{display:none}
@media (max-width:760px){
  .stop{grid-template-columns:auto minmax(0,1fr);grid-template-areas:"mile board" ". legs" "plate plate"}
  .stop-plate{margin-top:8px}
}

/* horizontal drive (enabled by JS on wide screens without reduced motion) */
html.drive-h .drive{height:calc(var(--stops) * 75vh + 100vh)}
html.drive-h .drive-sticky{position:sticky;top:calc(var(--header-h) + env(safe-area-inset-top,0px));height:calc(100vh - var(--header-h));padding-block:clamp(32px,5vh,64px) 0;display:flex;flex-direction:column;overflow:hidden}
html.drive-h .drive-viewport{position:relative;flex:1;display:flex;flex-direction:column;justify-content:center;min-height:0}
html.drive-h .drive-track{display:flex;gap:9vw;width:max-content;max-width:none;margin:0;padding-inline:8vw 30vw;translate:var(--x,0) 0;will-change:translate}
html.drive-h .stop-board h3{font-size:clamp(2rem,3.3vw,3.7rem)}
html.drive-h .stop{width:min(62vw,860px);grid-template-columns:auto minmax(0,1.5fr) minmax(0,1fr)}
html.drive-h .drive-road{display:block;position:absolute;left:0;right:0;bottom:0;height:54px;background:#0A0C1D;overflow:hidden}
html.drive-h .drive-road span{position:absolute;left:0;top:50%;margin-top:-2px;height:4px;width:calc(100% + 120px);background:repeating-linear-gradient(90deg,var(--sun) 0 60px,transparent 60px 120px);translate:var(--road,0) 0}
@media (max-height:640px){html.drive-h .stop-board h3{font-size:clamp(2rem,4vw,3.4rem)}}

/* service icons and their meaning-driven motion */
.ic{width:clamp(48px,5vw,68px);height:auto;fill:none;stroke:currentColor;stroke-width:3;stroke-linecap:square;overflow:visible}
.ic *{transition:translate .45s var(--ease-out),rotate .5s var(--ease-snap),scale .4s var(--ease-out),opacity .3s}
.ic-target .t-ring{transform-origin:26px 26px;transform-box:view-box;scale:1.5;opacity:.4}
.ic-target .t-cross{translate:0 0}
.ic-board .flip{transform-origin:26px 18px;transform-box:view-box}
.ic-mega .w1,.ic-mega .w2{opacity:.25}
.ic-page .corner{transform-origin:34px 6px;transform-box:view-box}
.ic-stand .canopy{transform-origin:26px 18px;transform-box:view-box;scale:1 .55}
.stop:hover .t-ring,.stop:focus-within .t-ring,.stop.is-active .t-ring{scale:1;opacity:1}
.stop:hover .flip,.stop:focus-within .flip,.stop.is-active .flip{rotate:x 360deg}
.stop:hover .w1,.stop:focus-within .w1,.stop.is-active .w1{opacity:1;translate:2px 0}
.stop:hover .w2,.stop:focus-within .w2,.stop.is-active .w2{opacity:1;translate:4px 0;transition-delay:.1s}
.stop:hover .corner,.stop:focus-within .corner,.stop.is-active .corner{rotate:-18deg}
.stop:hover .canopy,.stop:focus-within .canopy,.stop.is-active .canopy{scale:1 1}


/* duotone accents: a misregistered print plate that snaps into register on hover */
.b-sun{--ic-acc:var(--cobalt)}.b-cobalt{--ic-acc:var(--sun)}.b-chalk{--ic-acc:var(--sun)}.b-night{--ic-acc:var(--cobalt)}
.ic .acc{fill:var(--ic-acc,var(--sun));stroke:none}
.ic .acc2{fill:var(--ic-acc,var(--sun))}
.stop:hover .acc,.stop:focus-within .acc,.stop.is-active .acc{translate:-4px -4px}

/* ---------- work wall ---------- */
.sec-work{background:var(--paper)}
.wall{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:clamp(20px,3vw,40px) clamp(16px,2.4vw,32px);margin-bottom:48px}
.wall-item a{display:grid;gap:14px;text-decoration:none}
.wall-item figure{position:relative;background:#fff;padding:clamp(6px,.7vw,9px);box-shadow:0 22px 30px -24px rgba(20,24,51,.6);transition:rotate .4s var(--ease-out),translate .4s var(--ease-out)}
.wall-item img{width:100%;height:100%;object-fit:cover}
.wall-item figure .sample-tag{left:16px;top:16px}
.wall-item a:hover figure,.wall-item a:focus-visible figure{rotate:0deg;translate:0 -6px}
.wall-cap{display:grid;gap:2px}
.wall-cap b{font:800 1.6rem/1 var(--display);text-transform:uppercase}
.wall-cap span{color:var(--steel);font-size:var(--step--1)}
.w1{grid-column:1 / span 7}.w1 figure{aspect-ratio:16/10;rotate:-1.2deg}
.w2{grid-column:8 / span 5;margin-top:12%}.w2 figure{aspect-ratio:4/5;rotate:1.6deg}
.w3{grid-column:2 / span 4}.w3 figure{aspect-ratio:4/5;rotate:1deg}
.w4{grid-column:6 / span 7;margin-top:0}.w4 figure{aspect-ratio:14/9;rotate:-1.6deg}
@media (max-width:1023px){.w2{margin-top:0}}
@media (max-width:760px){.wall{grid-template-columns:1fr}.w1,.w2,.w3,.w4{grid-column:auto;margin-top:0}}

/* ---------- process ---------- */
.sec-process{background:var(--cobalt);color:#fff}
.sec-process .sec-head{max-width:820px}
.process{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(24px,4vw,56px)}
.step{display:grid;gap:12px;align-content:start;border-top:4px solid #fff;padding-top:20px}
.step-n{font:900 clamp(4rem,8vw,7rem)/.8 var(--display);color:var(--sun)}
.step h3{font:900 var(--step-3)/.9 var(--display);text-transform:uppercase}
.step p{color:#E3E7FF;max-width:36ch}
@media (max-width:760px){.process{grid-template-columns:1fr}}

/* ---------- SMB ---------- */
.smb-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:clamp(32px,6vw,96px);align-items:start}
.smb-list{display:grid}
.smb-item{display:grid;gap:8px;padding-block:24px;border-top:3px solid var(--night)}
.smb-item:last-child{border-bottom:3px solid var(--night)}
.smb-item h3{font:800 var(--step-2)/1.05 var(--display);text-transform:uppercase}
.smb-item p{color:var(--steel);max-width:52ch}
@media (max-width:860px){.smb-grid{grid-template-columns:1fr}}

/* ---------- exit sign CTA ---------- */
.exit{position:relative;overflow:hidden;isolation:isolate;background:var(--sun);padding-block:clamp(100px,13vw,170px) clamp(80px,10vw,130px);--focus:var(--night)}
.exit .giant{top:auto;bottom:-3vw}
.exit-sign{position:relative;display:block;max-width:820px;margin-inline:auto;text-decoration:none;color:#fff}
.exit-tab{position:absolute;right:28px;top:-44px;background:var(--cobalt-deep);color:#fff;font:800 1.3rem/1 var(--display);text-transform:uppercase;padding:12px 18px 14px;border-radius:8px 8px 0 0;box-shadow:inset 0 0 0 3px var(--cobalt-deep),inset 0 0 0 5px #fff}
.exit-body{display:flex;gap:clamp(18px,3vw,36px);align-items:center;background:var(--cobalt);border-radius:14px;padding:clamp(24px,4vw,44px);box-shadow:inset 0 0 0 5px var(--cobalt),inset 0 0 0 9px #fff;transition:translate .3s var(--ease-out),background-color .3s}
.exit-arrow svg{width:clamp(56px,8vw,96px);height:auto;fill:none;stroke:#fff;stroke-width:5;stroke-linecap:square;transition:translate .35s var(--ease-out)}
.exit-title{display:block;font:900 clamp(2.6rem,7vw,5.8rem)/.85 var(--display);text-transform:uppercase}
.exit-sub{display:block;margin-top:12px;font-size:var(--step-1);line-height:1.4;color:#E9ECFF;max-width:38ch}
.exit-sign:hover .exit-body{translate:0 -4px;background:var(--cobalt-deep);box-shadow:inset 0 0 0 5px var(--cobalt-deep),inset 0 0 0 9px #fff}
.exit-sign:hover .exit-arrow svg,.exit-sign:focus-visible .exit-arrow svg{translate:6px -6px}

/* ---------- footer ---------- */
.site-footer{background:var(--night);color:var(--chalk);padding-block:clamp(56px,8vw,96px) calc(28px + env(safe-area-inset-bottom,0px));overflow:hidden}
.site-footer .footer-giant{font:900 clamp(3rem,12vw,14rem)/.8 var(--display);text-transform:uppercase;color:var(--sun);margin-bottom:clamp(40px,6vw,72px);white-space:nowrap}
.footer-grid{display:grid;grid-template-columns:1.4fr repeat(4,1fr);gap:32px;padding-top:32px;border-top:2px solid var(--frame)}
.footer-note{color:var(--mist);margin-top:14px;max-width:30ch;font-size:var(--step--1)}
.f-h{font:800 1.15rem/1 var(--display);text-transform:uppercase;color:var(--sun);margin-bottom:12px;letter-spacing:.02em}
.site-footer address,.site-footer p{color:#D6D8E7;font-size:var(--step--1)}
.f-links{display:grid;gap:2px}
.f-links a{display:inline-flex;min-height:36px;align-items:center;font-size:var(--step--1);text-decoration:none;color:#D6D8E7}
.f-links a:hover{color:var(--sun);text-decoration:underline}
.legal{margin-top:48px;color:var(--mist)!important}
@media (max-width:960px){.footer-grid{grid-template-columns:1fr 1fr}}
@media (max-width:480px){.footer-grid{grid-template-columns:1fr}}

/* ---------- page transition: tri-vision slats ---------- */
.slat-curtain{display:none}
html.js .slat-curtain{display:flex;position:fixed;inset:0;z-index:300;pointer-events:none}
.slat-curtain i{flex:1;background:var(--cobalt);scale:1 0;transform-origin:top}
.slat-curtain i:nth-child(even){background:var(--sun)}
html.is-leaving .slat-curtain i{scale:1 1;transition:scale .42s var(--ease-snap)}
html.is-entering .slat-curtain i{scale:1 1;transform-origin:bottom}
html.is-entered .slat-curtain i{scale:1 0;transform-origin:bottom;transition:scale .5s var(--ease-snap)}
.slat-curtain i:nth-child(2){transition-delay:.03s!important}.slat-curtain i:nth-child(3){transition-delay:.06s!important}.slat-curtain i:nth-child(4){transition-delay:.09s!important}.slat-curtain i:nth-child(5){transition-delay:.12s!important}.slat-curtain i:nth-child(6){transition-delay:.15s!important}.slat-curtain i:nth-child(7){transition-delay:.18s!important}.slat-curtain i:nth-child(8){transition-delay:.21s!important}

/* ---------- preview-only switcher ---------- */
.preview-bar{position:fixed;z-index:90;right:max(12px,env(safe-area-inset-right,0px));bottom:max(12px,env(safe-area-inset-bottom,0px));display:flex;align-items:center;gap:6px;padding:6px;background:#fff;color:var(--night);border:3px solid var(--night);font-size:.85rem;font-weight:700;--focus:var(--cobalt)}
.preview-bar span{padding:0 6px}
.preview-bar button{min-height:40px;padding:0 12px;border:2px solid var(--night);background:#fff;cursor:pointer;font-weight:700}
.preview-bar button[aria-pressed="true"]{background:var(--night);color:var(--sun)}

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;transition-delay:0s!important}
  html.js .reveal{translate:none;scale:none}
  .giant{transform:none!important}
}

/* =========================================================
   INNER PAGES
   ========================================================= */

/* ---------- page hero: one gantry sign carries the page title ---------- */
.page-hero{background:radial-gradient(70% 90% at 85% 0%,rgba(45,70,224,.42),rgba(45,70,224,0) 70%),linear-gradient(180deg,#0F1230,var(--night))}
.ph-inner{position:relative;display:grid;gap:clamp(24px,3vw,36px);padding-bottom:clamp(48px,7vw,88px)}
.ph-signs{position:relative;display:grid;grid-template-columns:minmax(0,2.2fr) minmax(0,1fr);gap:clamp(10px,1.6vw,22px);padding:52px clamp(28px,4vw,56px) 0}
.ph-sign{margin:0;min-height:clamp(170px,19vw,260px);font-size:clamp(3rem,8.4vw,8.2rem);font-weight:900;line-height:.86}
.ph-sign-sun{background:var(--sun);color:var(--night);box-shadow:inset 0 0 0 4px var(--sun),inset 0 0 0 7px var(--night)}
.ph-side{margin:0;justify-content:flex-end;font:600 1rem/1.3 var(--sans);text-transform:none;background:var(--night-2);box-shadow:inset 0 0 0 4px var(--night-2),inset 0 0 0 7px var(--mist)}
.ph-side-k{display:block;font:900 clamp(1.8rem,3vw,2.8rem)/.9 var(--display);text-transform:uppercase;color:var(--sun);margin-bottom:6px}
.ph-side-sun{background:var(--sun);color:var(--night);box-shadow:inset 0 0 0 4px var(--sun),inset 0 0 0 7px var(--night)}
.ph-side-sun .ph-side-k{color:var(--night)}
.ph-lead{max-width:58ch;font-size:var(--step-1);line-height:1.5;color:#DADCEA;padding-left:clamp(28px,4vw,56px)}
html.js .page-hero.is-in .sign{animation:swing 1.4s var(--ease-out) both}
html.js .page-hero.is-in .ph-side{animation-delay:.14s}
.chapter-nav{display:flex;flex-wrap:wrap;gap:8px;padding-left:clamp(28px,4vw,56px)}
.chapter-nav a{display:inline-flex;align-items:center;min-height:44px;padding:0 16px;border:2px solid var(--frame);font-weight:600;text-decoration:none;transition:background-color .2s,border-color .2s,color .2s}
.chapter-nav a:hover{background:var(--sun);border-color:var(--sun);color:var(--night)}
@media (max-width:760px){
  .ph-signs{grid-template-columns:1fr;padding-inline:0}
  .ph-sign{min-height:auto;flex-direction:row;align-items:center;justify-content:flex-start;gap:14px;font-size:clamp(2.6rem,13vw,4rem)}
  .ph-side{min-height:auto;flex-direction:row;align-items:baseline;justify-content:flex-start;gap:12px}
  .ph-side-k{margin:0}
  .ph-lead,.chapter-nav{padding-left:0}
}

/* ---------- shared bits ---------- */
.tags,.formats{display:flex;flex-wrap:wrap;gap:8px}
.tags li{padding:8px 12px;border:2px solid var(--night);font-weight:600;font-size:var(--step--1)}
.ch-ic{width:clamp(56px,6vw,76px)}
.reveal.in .acc{translate:-4px -4px}
.reveal.in .t-ring{scale:1;opacity:1}
.reveal.in .w1,.reveal.in .w2{opacity:1}
.reveal.in .canopy{scale:1 1}
.chapter{position:relative;overflow:hidden;isolation:isolate}
.chapter .ic .acc{transition-delay:.35s}

/* ---------- services chapters ---------- */
.ch-positioning{padding-block:clamp(80px,11vw,150px)}
.ch-positioning .ic{--ic-acc:var(--cobalt)}
.ch-grid{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:clamp(40px,7vw,110px);align-items:center}
.ch-copy{display:grid;gap:20px;justify-items:start}
.ch-copy p:not(.lead){color:var(--steel);max-width:54ch}
@media (max-width:860px){.ch-grid{grid-template-columns:1fr}.ch-poster{max-width:min(420px,88%)}}
.ch-poster{position:relative;background:#fff;padding:10px;rotate:2.4deg;box-shadow:0 26px 40px -26px rgba(20,24,51,.6);max-width:460px;justify-self:center}
.ch-poster img{width:100%;aspect-ratio:4/5;object-fit:cover}
.ch-poster .sample-tag{left:20px;top:20px}

.ch-billboards{background:var(--night);color:var(--chalk);--focus:var(--sun);min-height:clamp(560px,62vw,820px);display:flex;align-items:flex-end;padding-block:clamp(48px,6vw,80px)}
.ch-bleed{position:absolute;inset:0;z-index:-1}
.ch-bleed img{width:100%;height:100%;object-fit:cover;object-position:60% 50%}
.ch-bleed .sample-tag{left:auto;right:max(16px,env(safe-area-inset-right,0px));top:16px}
.bleed-card{max-width:560px;display:grid;gap:18px;padding:clamp(22px,3vw,36px);background:rgba(13,16,40,.9);border-left:6px solid var(--sun);--ic-acc:var(--sun)}
.bleed-card p{color:#E1E3EF}
.mini-steps{display:grid;gap:10px;margin-top:6px}
.mini-steps li{display:grid;grid-template-columns:7.5rem 1fr;gap:12px;padding-top:10px;border-top:1px solid var(--frame)}
.mini-steps b{font:800 1.25rem/1 var(--display);text-transform:uppercase;color:var(--sun)}
.mini-steps span{color:#D0D3E4;font-size:var(--step--1)}
@media (max-width:480px){.mini-steps li{grid-template-columns:1fr;gap:4px}}

.ch-campaigns{background:var(--paper);padding-block:clamp(80px,11vw,150px)}
.ch-campaigns .ic{--ic-acc:var(--sun)}
.ch-head{display:grid;gap:16px;justify-items:start;max-width:720px;margin-bottom:clamp(40px,5vw,64px)}
.channels{display:grid;grid-template-columns:1.25fr 1fr .9fr 1.1fr;border:3px solid var(--night)}
.channel{display:grid;align-content:space-between;gap:40px;min-height:clamp(240px,26vw,340px);padding:clamp(18px,2.4vw,30px);border-right:3px solid var(--night)}
.channel:last-child{border-right:0}
.channel:nth-child(even){padding-top:clamp(60px,7vw,110px)}
.channel h3{font:900 clamp(2rem,3.6vw,3.4rem)/.9 var(--display);text-transform:uppercase}
.channel p{font-size:var(--step--1);max-width:28ch}
.c-sun{background:var(--sun);color:var(--night)}
.c-cobalt{background:var(--cobalt);color:#fff}.c-cobalt p{color:#E3E7FF}
.c-chalk{background:var(--chalk);color:var(--night)}.c-chalk p{color:var(--steel)}
.c-night{background:var(--night);color:var(--chalk)}.c-night p{color:#C9CCDD}
.ch-note{margin-top:28px;color:var(--steel);max-width:62ch}
@media (max-width:960px){.channels{grid-template-columns:1fr 1fr}.channel:nth-child(2){border-right:0}.channel:nth-child(-n+2){border-bottom:3px solid var(--night)}.channel:nth-child(even){padding-top:clamp(18px,2.4vw,30px)}}
@media (max-width:520px){.channels{grid-template-columns:1fr}.channel{border-right:0;border-bottom:3px solid var(--night);min-height:auto}.channel:last-child{border-bottom:0}}

.ch-ads{padding-block:clamp(80px,11vw,150px)}
.ch-ads .ic{--ic-acc:var(--cobalt)}
.ads-grid{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:clamp(36px,6vw,90px);align-items:center}
.ads-photo{position:relative;margin-left:calc(var(--gutter) * -1);max-width:none}
.ads-photo img{width:100%;aspect-ratio:4/5;object-fit:cover;object-position:42% 50%}
.ads-copy{display:grid;gap:20px;justify-items:start}
.ads-copy p{color:var(--steel);max-width:50ch}
.formats li{font:800 clamp(1.4rem,2.2vw,1.9rem)/1 var(--display);text-transform:uppercase;padding:10px 14px;background:var(--night);color:var(--chalk)}
.formats li:nth-child(3n+2){background:var(--sun);color:var(--night);rotate:-2deg}
.formats li:nth-child(3n){background:var(--cobalt);color:#fff;rotate:1.5deg}
@media (max-width:860px){.ads-grid{grid-template-columns:1fr}.ads-photo{margin-left:0}.ads-photo img{aspect-ratio:16/11}}

.ch-stands{background:var(--night);color:var(--chalk);--focus:var(--sun);padding-block:clamp(80px,11vw,150px)}
.ch-stands .ic{--ic-acc:var(--cobalt)}
.stands-grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:clamp(24px,3vw,40px);align-items:start}
.stands-copy{grid-column:1 / span 5;display:grid;gap:20px;justify-items:start;padding-top:2vw}
.stands-copy p:not(.lead){color:#CFD2E3;max-width:46ch}
.stands-photo{grid-column:6 / span 7;position:relative}
.stands-photo img{width:100%;aspect-ratio:4/3;object-fit:cover}
.stands-steps{grid-column:4 / span 8;margin-top:clamp(-120px,-8vw,-40px);position:relative;z-index:2;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));background:var(--sun);color:var(--night)}
.stands-steps li{display:grid;gap:6px;padding:clamp(18px,2.4vw,28px);border-right:3px solid var(--night)}
.stands-steps li:last-child{border-right:0}
.stands-steps .step-n{font:900 2.6rem/.8 var(--display);color:var(--cobalt)}
.stands-steps b{font:900 1.7rem/1 var(--display);text-transform:uppercase}
.stands-steps span:not(.step-n){font-size:var(--step--1);color:#2B2F4E}
@media (max-width:860px){.stands-copy,.stands-photo,.stands-steps{grid-column:1 / -1}.stands-steps{margin-top:0;grid-template-columns:1fr}.stands-steps li{border-right:0;border-bottom:3px solid var(--night)}.stands-steps li:last-child{border-bottom:0}}

/* ---------- work page ---------- */
.sec-projects{padding-top:clamp(48px,6vw,80px)}
.projects-bar{display:flex;flex-wrap:wrap;gap:16px 32px;align-items:center;justify-content:space-between;margin-bottom:14px}
.filters{display:flex;flex-wrap:wrap;gap:8px}
.chip{min-height:44px;padding:0 16px;border:2px solid var(--night);background:transparent;font-weight:700;cursor:pointer;transition:background-color .2s,color .2s,rotate .25s var(--ease-out)}
.chip:hover{background:rgba(20,24,51,.08)}
.chip[aria-pressed="true"]{background:var(--night);color:var(--sun);rotate:-2deg}
.count{font-weight:600;color:var(--steel)}
.placeholder-note{color:var(--steel);font-size:var(--step--1);margin-bottom:clamp(32px,4vw,48px);max-width:70ch}
.projects{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:clamp(28px,3.4vw,48px) clamp(16px,2.4vw,32px);align-items:start}
.project[hidden]{display:none!important}
.project a{display:grid;gap:14px;text-decoration:none}
.project figure{position:relative;background:#fff;padding:clamp(6px,.7vw,9px);box-shadow:0 22px 30px -24px rgba(20,24,51,.6);transition:rotate .4s var(--ease-out),translate .4s var(--ease-out)}
.project img{width:100%;height:100%;object-fit:cover}
.project figure .sample-tag{left:16px;top:16px}
.project:nth-child(odd) figure{rotate:-1deg}.project:nth-child(even) figure{rotate:1.2deg}
.project a:hover figure,.project a:focus-visible figure{rotate:0deg;translate:0 -6px}
.pj-cap{display:grid;gap:2px}
.pj-cap b{font:800 1.6rem/1 var(--display);text-transform:uppercase}
.pj-cap span{color:var(--steel);font-size:var(--step--1)}
.pj-xl{grid-column:span 7}.pj-xl figure{aspect-ratio:16/10}
.pj-tall{grid-column:span 5}.pj-tall figure{aspect-ratio:4/5}
.pj-md{grid-column:span 6}.pj-md figure{aspect-ratio:3/2}
.project figure.pj-type.b-cobalt{background:var(--cobalt);color:#fff}.project figure.pj-type.b-sun{background:var(--sun);color:var(--night)}
.pj-type{display:flex;flex-direction:column;justify-content:space-between;padding:clamp(18px,2.4vw,30px)!important;border:8px solid #fff}
.pj-type-big{font:900 clamp(3rem,6vw,6rem)/.85 var(--display);text-transform:uppercase}
.pj-type-sm{font-size:var(--step--1);font-weight:600;opacity:.85}
.projects.is-filtered .project{grid-column:span 6}
.projects.is-filtered .project figure{aspect-ratio:3/2}
.empty{display:grid;gap:12px;padding:56px 0;justify-items:start}
.link-btn{background:none;border:0;padding:0;font-weight:700;text-decoration:underline;text-decoration-color:var(--sun);text-decoration-thickness:3px;text-underline-offset:5px;cursor:pointer;min-height:44px}
@media (max-width:760px){.projects{grid-template-columns:1fr}.project,.projects.is-filtered .project{grid-column:auto}}

/* ---------- case study ---------- */
.cs-hero{min-height:min(760px,86svh);display:flex;flex-direction:column}
.cs-photo{position:absolute;inset:0;z-index:-1}
.cs-photo img{width:100%;height:100%;object-fit:cover}
.cs-photo .sample-tag{left:auto;right:max(16px,env(safe-area-inset-right,0px));top:16px}
.cs-inner{flex:1;display:flex;flex-direction:column;justify-content:space-between;gap:40px;padding-block:28px clamp(36px,5vw,64px)}
.back-link{align-self:flex-start;display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 14px;background:rgba(13,16,40,.85);font-weight:700;text-decoration:none}
.back-link svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2.4;transition:translate .25s var(--ease-out)}
.back-link:hover svg{translate:-4px 0}
.cs-title-card{max-width:760px;display:grid;gap:14px;margin-left:0}
.cs-kicker{color:var(--sun);font-weight:700}
.cs-title-card h1{font-size:var(--step-5)}
.cs-title-card p:last-child{color:#E1E3EF;font-size:var(--step-1)}
.cs-facts{background:var(--sun)}
.facts{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));margin:0}
.facts div{padding:22px 18px 22px 0;border-right:2px solid rgba(20,24,51,.25);padding-left:18px}
.facts div:first-child{padding-left:0}
.facts div:last-child{border-right:0}
.facts dt{font:800 1rem/1 var(--display);text-transform:uppercase;letter-spacing:.03em;margin-bottom:6px;color:#2B2F4E}
.facts dd{margin:0;font-weight:600}
@media (max-width:860px){.facts{grid-template-columns:1fr 1fr}.facts div{border-right:0;border-bottom:2px solid rgba(20,24,51,.25);padding-left:0}}
.act-grid{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.6fr);gap:clamp(24px,5vw,80px);align-items:start}
.act-word{font:900 clamp(2.4rem,5.4vw,6.6rem)/.8 var(--display);text-transform:uppercase;color:transparent;-webkit-text-stroke:2px var(--night);position:sticky;top:calc(var(--header-h) + 32px);overflow-wrap:normal;word-break:normal}
.act-copy{display:grid;gap:20px;max-width:680px}
.act-copy p:not(.lead){color:var(--steel)}
.act-alt{background:var(--paper)}
.cs-gallery{position:relative;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));margin-top:clamp(48px,6vw,80px);align-items:start}
.cs-gallery .poster{position:relative}
.cs-gallery img{width:100%;height:100%;object-fit:cover}
.g1{grid-row:1;grid-column:1 / span 4;aspect-ratio:4/5;rotate:-2.5deg;z-index:2}
.g2{grid-row:1;grid-column:4 / span 6;aspect-ratio:14/9;margin-top:12%;rotate:1.5deg;z-index:3}
.g3{grid-row:1;grid-column:9 / span 4;aspect-ratio:4/3;rotate:-1deg;margin-top:2%;z-index:1}
@media (max-width:760px){.act-grid{grid-template-columns:1fr}.act-word{position:static}.cs-gallery{grid-template-columns:1fr;gap:24px}.g1,.g2,.g3{grid-column:auto;grid-row:auto;margin-top:0}}
.results{display:grid;gap:0;border-top:3px solid var(--night)}
.results li{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.4fr);gap:16px;padding-block:16px;border-bottom:3px solid var(--night)}
.results b{font:900 var(--step-2)/1 var(--display);text-transform:uppercase}
.results span{color:var(--steel)}
.cs-quote{margin:16px 0 0;padding:24px 24px 24px 28px;background:var(--night);color:var(--chalk);border-left:8px solid var(--sun)}
.cs-quote p{font-size:var(--step-1);line-height:1.45}
.cs-quote footer{margin-top:12px;color:var(--mist);font-size:var(--step--1)}
.next-project{background:var(--cobalt);color:#fff;--focus:var(--sun)}
.np-link{display:grid;grid-template-columns:auto 1fr auto;gap:12px 32px;align-items:center;padding-block:clamp(36px,5vw,60px);text-decoration:none}
.np-k{font-weight:700;color:var(--sun)}
.np-title{font:900 var(--step-4)/.9 var(--display);text-transform:uppercase}
.np-link svg{width:clamp(36px,5vw,64px);height:auto;fill:none;stroke:currentColor;stroke-width:2.4;transition:translate .3s var(--ease-out)}
.np-link:hover svg{translate:8px 0}
@media (max-width:640px){.np-link{grid-template-columns:1fr auto}.np-k{grid-column:1 / -1}}

/* ---------- about ---------- */
.name-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.3fr);gap:clamp(32px,6vw,96px);align-items:end}
.name-copy{display:grid;gap:18px}
.name-copy p:not(.lead){color:var(--steel);max-width:56ch}
.about-story{background:var(--paper)}
.story-grid{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(40px,7vw,110px);align-items:center}
.story-photo{position:relative;rotate:-2.4deg;max-width:420px}
.story-photo img{width:100%;aspect-ratio:4/5;object-fit:cover}
.story-photo .sample-tag{left:20px;top:20px}
.story-copy{display:grid;gap:18px}
.story-copy p:not(.lead){color:var(--steel);max-width:58ch}
.beliefs{display:grid;grid-template-columns:1.2fr 1fr 1fr;border:3px solid var(--night)}
.belief{display:grid;align-content:space-between;gap:40px;min-height:clamp(220px,24vw,300px);padding:clamp(20px,2.6vw,32px);border-right:3px solid var(--night)}
.belief:last-child{border-right:0}
.belief h3{font:900 clamp(2rem,3.4vw,3.2rem)/.9 var(--display);text-transform:uppercase}
.belief.b-cobalt p{color:#E3E7FF}.belief.b-chalk p{color:var(--steel)}
.about-beliefs{background:var(--chalk)}
.team{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(16px,2.4vw,32px)}
.member{display:grid;gap:4px}
.member b{font:800 1.5rem/1 var(--display);text-transform:uppercase;margin-top:10px}
.member span:not(.m-photo span){color:var(--steel);font-size:var(--step--1)}
.m-photo{aspect-ratio:4/5;display:grid;place-items:end start;padding:14px;background:var(--sun);border:3px solid var(--night)}
.m-photo span{font-weight:700;font-size:var(--step--1)}
.m-cobalt{background:var(--cobalt);color:#fff}.m-night{background:var(--night);color:var(--chalk)}.m-chalk{background:var(--paper)}
.about-team{background:var(--paper)}
.office-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.3fr);gap:clamp(32px,6vw,90px);align-items:center}
.office-copy{display:grid;gap:18px;justify-items:start}
.office-address{font-size:var(--step-1);line-height:1.5}
.office-hours{color:var(--steel)}
.map-card{position:relative;border:3px solid var(--night);overflow:hidden;aspect-ratio:10/7}
.map-card svg{width:100%;height:100%}
.m-bg{fill:var(--paper)}
.m-roads path{fill:none;stroke:#fff;stroke-width:14}
.m-hwy path{fill:none;stroke:var(--sun);stroke-width:22}
.m-halo{fill:var(--cobalt);opacity:.18}
.m-drop{fill:var(--cobalt)}
.m-dot{fill:var(--sun)}
.map-label{position:absolute;left:16px;top:16px;background:var(--night);color:var(--chalk);padding:8px 12px;font:800 1.2rem/1 var(--display);text-transform:uppercase}
.map-link{position:absolute;right:12px;bottom:12px;display:inline-flex;align-items:center;min-height:44px;padding:0 14px;background:var(--sun);color:var(--night);font-weight:700;text-decoration:none}
@media (max-width:860px){.name-grid,.story-grid,.office-grid{grid-template-columns:1fr}.story-photo{justify-self:center}.beliefs{grid-template-columns:1fr}.belief{border-right:0;border-bottom:3px solid var(--night);min-height:auto}.belief:last-child{border-bottom:0}.team{grid-template-columns:1fr 1fr}}

/* ---------- contact ---------- */
.sec-contact{padding-top:clamp(56px,7vw,96px)}
.contact-grid{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);gap:clamp(32px,5vw,72px);align-items:start}
.form-card{display:grid;gap:18px;background:#fff;border:3px solid var(--night);padding:clamp(20px,3.4vw,44px)}
.form-intro{color:var(--steel)}
.booking{display:grid;gap:22px}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:22px}
.field{display:grid;gap:8px;min-width:0;border:0;padding:0;margin:0}
.field legend{padding:0;margin-bottom:8px}
.field label,.field legend{font-weight:700}
.opt{font-weight:500;color:var(--steel)}
.field input[type=text],.field input[type=email],.field input[type=tel],.field input[type=date],.field textarea{width:100%;min-height:50px;padding:12px 14px;border:2px solid var(--night);border-radius:0;background:var(--chalk);color:var(--night);font:400 1rem/1.4 var(--sans)}
.field textarea{resize:vertical;min-height:150px}
.field input:focus-visible,.field textarea:focus-visible{outline:3px solid var(--cobalt);outline-offset:2px;background:#fff}
.field [aria-invalid="true"]{border-color:var(--error);box-shadow:inset 4px 0 0 var(--error)}
.hint{font-size:var(--step--1);color:var(--steel)}
.err{font-size:var(--step--1);font-weight:600;color:var(--error)}
.err:empty{display:none}
.err::before{content:"! ";font-weight:800}
.checks{display:flex;flex-wrap:wrap;gap:8px}
.check{position:relative;cursor:pointer}
.check input,.seg input{position:absolute;opacity:0;width:1px;height:1px}
.check span,.seg span{display:inline-flex;align-items:center;min-height:44px;padding:0 14px;border:2px solid var(--night);font-weight:600;transition:background-color .15s,color .15s,rotate .2s var(--ease-out)}
.check span::before{content:"";width:14px;height:14px;margin-right:10px;border:2px solid currentColor;transition:background-color .15s}
.check input:checked+span{background:var(--night);color:var(--sun);rotate:-1.5deg}
.check input:checked+span::before{background:var(--sun);border-color:var(--sun)}
.check input:focus-visible+span,.seg input:focus-visible+span{outline:3px solid var(--cobalt);outline-offset:2px}
.seg{display:flex;flex-wrap:wrap}
.seg label{cursor:pointer}
.seg label+label span{border-left:0}
.seg input:checked+span{background:var(--sun)}
.form-actions{display:flex;flex-wrap:wrap;gap:16px;align-items:center}
.btn-lg{min-height:56px;padding:0 26px;font-size:1.05rem}
.btn[disabled]{opacity:.6;cursor:progress}
.form-status{font-weight:600}
.form-status.is-error{color:var(--error)}
.error-summary{border:3px solid var(--error);padding:16px 18px;background:#FDF1EE}
.error-summary h3{font:800 1.3rem/1 var(--display);text-transform:uppercase;color:var(--error);margin-bottom:8px}
.error-summary ul{display:grid;gap:4px;list-style:disc;padding-left:20px}
.error-summary a{color:var(--error);font-weight:600}
.hp{position:absolute!important;left:-9999px;width:1px;height:1px;overflow:hidden}
.form-done{display:grid;gap:16px;justify-items:start}
.done-sign{display:inline-block;background:var(--cobalt);color:#fff;border-radius:10px;padding:18px 22px;box-shadow:inset 0 0 0 4px var(--cobalt),inset 0 0 0 7px #fff;font:900 clamp(2.4rem,6vw,4rem)/.9 var(--display);text-transform:uppercase}
html.js .form-done:not([hidden]) .done-sign{animation:swing 1.2s var(--ease-out) both;transform-origin:50% -20px}
.contact-side{display:grid;gap:0;border-top:3px solid var(--night)}
.side-plate{padding-block:20px;border-bottom:3px solid var(--night);display:grid;gap:4px}
.side-plate .f-h{color:var(--cobalt-deep);margin-bottom:4px}
.copy-row{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.copy-btn{min-height:40px;padding:0 12px;border:2px solid var(--night);background:transparent;font-weight:700;cursor:pointer}
.copy-btn:hover{background:var(--night);color:var(--chalk)}
.next-steps{display:grid;gap:6px;counter-reset:n}
.next-steps li{counter-increment:n;display:flex;gap:10px}
.next-steps li::before{content:counter(n);font:900 1.4rem/1 var(--display);color:var(--cobalt);min-width:1ch}
@media (max-width:960px){.contact-grid{grid-template-columns:1fr}}
@media (max-width:640px){.row2{grid-template-columns:1fr}}

/* ---------- 404 ---------- */
.ph-404{min-height:min(760px,86svh)}

.f-mail,.mm-meta a,.copy-row a{color:inherit;text-decoration:underline;text-decoration-color:var(--sun);text-decoration-thickness:2px;text-underline-offset:4px;overflow-wrap:anywhere}
.copy-row a{text-decoration-color:var(--cobalt)}

/* logo (option A, pasted-poster wordmark) */
.logo img{display:block;height:60px;width:auto;transition:rotate .35s var(--ease-out),scale .35s var(--ease-out)}
.site-header .logo:hover img{rotate:-2deg;scale:1.04}
.logo-foot img{height:110px}
@media (max-width:480px){.logo img{height:54px}.logo-foot img{height:96px}}

/* about: growth story */
.story-top{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(32px,6vw,90px);align-items:center;margin-bottom:clamp(48px,6vw,80px)}
.story-top h2{font-size:clamp(2.4rem,5.4vw,5rem);min-width:0;overflow-wrap:break-word}
.story-ill{position:relative;background:#fff;padding:10px;rotate:1.8deg;box-shadow:0 26px 40px -26px rgba(20,24,51,.6)}
.story-ill img{width:100%;aspect-ratio:6/5;object-fit:cover}
.story-ill .sample-tag{left:20px;top:20px}
.timeline{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0;border-top:4px solid var(--night);position:relative}
.tl-item{display:grid;gap:12px;align-content:start;padding:28px clamp(16px,2.4vw,32px) 8px 0;position:relative}
.tl-item+.tl-item{padding-left:clamp(16px,2.4vw,32px);border-left:3px solid rgba(20,24,51,.18)}
.tl-item::before{content:"";position:absolute;top:-14px;left:0;width:24px;height:24px;background:var(--sun);border:4px solid var(--night)}
.tl-item+.tl-item::before{left:clamp(16px,2.4vw,32px)}
.tl-mark{font:900 clamp(3rem,6vw,5.4rem)/.8 var(--display);text-transform:uppercase;color:var(--cobalt)}
.tl-now .tl-mark{color:var(--night);background:var(--sun);justify-self:start;padding:6px 10px 4px;rotate:-2deg}
.tl-item h3{font:900 var(--step-2)/1 var(--display);text-transform:uppercase}
.tl-item p{color:var(--steel);max-width:44ch}
.founders{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(20px,3vw,40px);max-width:900px}
.founder{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1fr);gap:20px;align-items:end}
.f-info{display:grid;gap:4px}
.f-info b{font:900 clamp(1.8rem,3vw,2.4rem)/.95 var(--display);text-transform:uppercase}
.f-info span{font-weight:700;color:var(--cobalt-deep)}
.f-info p{color:var(--steel);font-size:var(--step--1)}
@media (max-width:860px){.story-top{grid-template-columns:1fr}.timeline{grid-template-columns:1fr;border-top:0;border-left:4px solid var(--night);padding-left:24px}.tl-item,.tl-item+.tl-item{padding:0 0 32px;border-left:0}.tl-item::before,.tl-item+.tl-item::before{top:6px;left:-38px}.founders{grid-template-columns:1fr}}
@media (max-width:480px){.founder{grid-template-columns:1fr}}

/* real projects without a case study page yet */
.pj-body{display:grid;gap:14px}
.project figure.pj-type.b-night-t{background:var(--night);color:var(--sun)}
.pj-real .pj-type-big{font-size:clamp(2.4rem,4.6vw,4.6rem);overflow-wrap:break-word}

/* three real projects */
.pj-wide{grid-column:1 / -1}.pj-wide figure{aspect-ratio:21/8}
.pj-real figure{aspect-ratio:auto}
.pj-xl.pj-real figure{aspect-ratio:4/3}.pj-tall.pj-real figure{aspect-ratio:4/5}.pj-wide.pj-real figure{aspect-ratio:21/8}
.pj-tall.pj-real{margin-top:8%}
.wall-3 .w5{grid-column:3 / span 9}.wall-3 .w5 figure{aspect-ratio:21/9;rotate:-.8deg}
.wall-3 .w1 figure{aspect-ratio:4/3}
@media (max-width:760px){.pj-tall.pj-real{margin-top:0}.pj-wide.pj-real figure{aspect-ratio:4/3}.wall-3 .w5{grid-column:auto}.wall-3 .w5 figure{aspect-ratio:4/3}}

/* ---------- QA fixes ---------- */
html{scroll-padding-top:calc(var(--header-h) + env(safe-area-inset-top,0px) + 16px);-webkit-tap-highlight-color:rgba(255,212,71,.35)}
a,button,label,input,textarea,select,summary{touch-action:manipulation}
.f-mail{display:inline-flex;align-items:center;min-height:32px}
.act-copy .cs-quote p{color:var(--chalk)}
.mobile-menu{overscroll-behavior:contain}
/* road line: on inner pages it runs once (under 5s); on Home the billboard's pause button stops it too */
html.js .page-hero.is-live .road-line,html.js .cs-hero.is-live .road-line{animation:road 3.4s linear 1}
html.js .hero.motion-paused .road-line{animation-play-state:paused}