@font-face{font-family:'Archivo125';src:url('/fonts/Archivo-wdth125-400.ttf') format('truetype');font-weight:400;font-display:block}
:root{--sec:160px;--gb:6000px;--bg:#C9D2E7;--bg-load:#DDE3EE;--ink:#0E0E10;--on-ink:#fff;--ink-hover:#262A33;--grey:#B8C0D2;--muted:#3D4459;--focus:#2B3FD0;--haze:201 210 231;--glow-a:rgb(255 196 190 / .4);--glow-b:rgb(255 206 196 / .3);--glow-c:rgb(176 160 236 / .3);--reel-a:#6F7A90;--reel-b:#9AA3B6;--reel-c:#7D879C;--reel-d:#A7AFC0;--rule:color-mix(in srgb,var(--ink) 25%,transparent);--u:1;--ox:max(0px,calc((100vw - 1440px) / 2))}
*{box-sizing:border-box}
html{background:var(--bg)}
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}
body{margin:0;background:var(--bg);color:var(--ink);font:400 16px/1.35 Poppins,system-ui,sans-serif;-webkit-font-smoothing:antialiased;overflow-x:hidden}
#glow{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden}
#glow i{position:absolute;border-radius:50%;filter:blur(40px);transition:transform 1.2s ease-out;will-change:transform}
#glow .warm{width:35vw;height:35vw;left:-17vw;top:-17vw;background:radial-gradient(circle,var(--glow-a),transparent 68%)}
#glow .warm2{width:30vw;height:30vw;left:-15vw;top:-15vw;background:radial-gradient(circle,var(--glow-b),transparent 68%)}
#glow .cool{width:36vw;height:36vw;left:-18vw;top:-18vw;background:radial-gradient(circle,var(--glow-c),transparent 68%)}
#gl{position:fixed;inset:0;width:100%;height:100%;z-index:1;pointer-events:none}
#app{position:relative;z-index:2}
#page{position:relative;width:100%}
.abs{position:absolute}
.d120,.d84,.d60,.d54,.d100{font-family:Archivo,Archivo125,sans-serif;font-weight:400;font-stretch:98%;text-transform:uppercase;margin:0;letter-spacing:-.01em}
.d120{font-size:120px;line-height:120px}
.d100{font-size:100px;line-height:105px}
.d84{font-size:84px;line-height:85px}
.d60{font-size:60px;line-height:60px}
.d54{font-size:54px;line-height:60px}
.t16{font:500 16px/20px Poppins;margin:0}
.t16r{font:400 16px/20px Poppins;margin:0}
.t14{font:400 14px/18px Poppins;margin:0}
.t12{font:400 12px/16px Poppins;margin:0}
.upper{text-transform:uppercase}
.slot{position:relative}
.slot>.tag{display:none}
.show-tags .slot{outline:1px dashed rgba(60,80,200,.55);outline-offset:0}
.show-tags .slot>.tag{display:block;position:absolute;left:0;top:-13px;font:400 11px/11px 'JetBrains Mono',monospace;color:#2b3fd0;background:rgba(255,255,255,.8);padding:1px 3px;white-space:nowrap;z-index:50;pointer-events:none}
.tag3{position:fixed;z-index:60;left:0;top:0;font:400 11px/11px 'JetBrains Mono',monospace;color:#2b3fd0;background:rgba(255,255,255,.85);padding:1px 3px;pointer-events:none;display:none;white-space:nowrap}
.show-tags .tag3{display:block}
.pill{display:inline-block;border:1px solid var(--rule);border-radius:999px;padding:5px 15px;font:400 14.5px/20px Poppins}
.btn{display:inline-flex;align-items:center;justify-content:center;border-radius:999px;background:var(--ink);color:var(--on-ink);padding:12px 28px;font:500 12px/14px Poppins;text-transform:uppercase;border:0}
.btn.out{background:transparent;color:var(--ink);border:1px solid var(--ink);padding:8px 18px}
.btn.round{width:64px;height:64px;padding:0}
.media{background:var(--grey);display:flex;align-items:center;justify-content:center;font:400 11px 'JetBrains Mono',monospace;color:var(--muted)}
.brand{display:inline-block;color:var(--ink);line-height:0}
.brand svg{height:100%;width:auto;display:block}
.brand path{fill:currentColor}
.brand.mono img{display:block}
a.brand{text-decoration:none}
::selection{background:var(--ink);color:var(--bg)}
:focus-visible{outline:2px solid var(--focus);outline-offset:3px;border-radius:2px}
html{scrollbar-width:thin;scrollbar-color:color-mix(in srgb,var(--ink) 40%,transparent) transparent}
.reel-panel .play svg{margin-left:3px}

#header{position:fixed;left:0;right:0;top:0;z-index:20;height:90px;padding:0 calc(40px + var(--ox));display:flex;justify-content:space-between;align-items:center;opacity:0;transition:opacity .6s}
body.ready #header{opacity:1}
body.ready #header{transition:opacity .25s ease,transform .25s ease}
body.ready.nav-hide #header{opacity:0;transform:translateY(-100%);pointer-events:none}
@media (prefers-reduced-motion:reduce){body.ready #header{transition:none}body.ready.nav-hide #header{transform:none}}
#hero-body{position:fixed!important;z-index:3}
#hero-body>span{display:block;white-space:pre-line;opacity:0;transform:translateY(6px);transition:opacity .9s ease,transform .9s cubic-bezier(.2,.7,.2,1)}
#hero-body.in>span{opacity:1;transform:none}
@media (prefers-reduced-motion: reduce){#hero-body>span{transition:none}}
#header nav{display:flex;gap:56px;align-items:center}
#header nav span{font:400 12px/12px Poppins;text-transform:uppercase}
#preloader{position:fixed;inset:0;z-index:100;background:var(--bg-load);display:flex;align-items:center;justify-content:center;transition:opacity .8s}
#preloader.done{opacity:0;pointer-events:none}
#preloader .bar{position:absolute;left:50%;bottom:48px;width:160px;height:1px;background:var(--rule);transform:translateX(-50%)}
#preloader .bar i{display:block;height:100%;width:0;background:var(--ink)}


.reel-wrap{position:absolute;left:0;width:100%}
.reel-panel{position:sticky;top:11vh;margin:0 auto;height:78vh;background:#0b0c10;border-radius:20px;color:#fff;overflow:hidden;will-change:width,transform}
.reel-panel .play{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);background:rgba(255,255,255,.9);color:#000}
.reel-panel .h12{position:absolute;left:0;right:0;top:50%;transform:translateY(-50%);text-align:center;color:#fff;mix-blend-mode:difference}



a.slot.t16{color:inherit;text-decoration:none}
a.slot.t16:hover{text-decoration:underline}

.hud{position:fixed;left:40px;top:96px;z-index:80;font:400 11px/14px 'JetBrains Mono',monospace;color:#1d2540;background:rgba(255,255,255,.75);padding:4px 8px;display:none;white-space:pre}
body.debug .hud{display:block}
#hero-reel{position:fixed;inset:0;z-index:0;pointer-events:none;will-change:opacity}
.hero-reel-media{position:absolute;inset:0;background:linear-gradient(115deg,var(--reel-a) 0%,var(--reel-b) 30%,var(--reel-c) 55%,var(--reel-d) 80%,var(--reel-a) 100%);background-size:300% 100%;animation:reelpan 14s linear infinite}
.hero-reel-label{position:absolute;right:40px;bottom:120px;font:400 11px/1 'JetBrains Mono',monospace;color:var(--muted);background:rgb(var(--haze) / .75);padding:3px 6px}
.hero-reel-haze{position:absolute;inset:0;background:radial-gradient(ellipse at 50% 55%,rgb(var(--haze) / .55),rgb(var(--haze) / .82) 70%)}
#hero-reel{transform-origin:50% 50%}
.hero-reel-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .8s}
.hero-reel-media.has-video{background:#0b0c10;animation:none}
.hero-reel-media.has-video .hero-reel-video{opacity:1}
.hero-reel-media.has-video .hero-reel-label{display:none}
#hero-reel.full .hero-reel-video{top:11vh;bottom:11vh;left:6.5vw;right:6.5vw;width:auto;height:auto;object-fit:contain}
#hero-reel.full .hero-reel-dark{opacity:0!important}
#hero-reel.full .hero-reel-content .h12{opacity:0}
.hero-reel-content .h12{transition:opacity .5s}
.hero-reel-content .play{transition:opacity .4s,transform .3s}
#hero-reel.full .hero-reel-content .play{opacity:.0}
#hero-reel.full .hero-reel-content:hover .play,#hero-reel.full .hero-reel-content .play:focus-visible{opacity:1}
.hero-reel-media,.hero-reel-dark,.hero-reel-haze{will-change:clip-path,opacity}
.hero-reel-dark{position:absolute;inset:0;background:#0b0c10;opacity:0}
.hero-reel-content{position:absolute;inset:11vh 6.5vw;color:#fff;opacity:0;pointer-events:none}
.hero-reel-content.live{pointer-events:auto}
.hero-reel-content .h12{position:absolute;left:0;right:0;top:50%;transform:translateY(-58%);text-align:center;color:#fff;font-size:64px;line-height:70px}
.hero-reel-content .h12 .l{display:block}
.hero-reel-content .play{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);background:rgba(255,255,255,.9);color:#000;cursor:pointer}
.hero-reel-content .play.playing{background:#fff;box-shadow:0 0 0 6px rgba(255,255,255,.25)}
@keyframes reelpan{to{background-position:300% 0}}
@media (prefers-reduced-motion:reduce){.hero-reel-media{animation:none}}
.play-reel{position:fixed;left:40px;top:calc(720px * var(--u));z-index:6;display:inline-flex;align-items:center;gap:10px;border:0;border-radius:999px;background:var(--ink);color:var(--on-ink);padding:12px 22px 12px 18px;font:500 12px/14px Poppins;text-transform:uppercase;letter-spacing:.04em;cursor:pointer;transition:transform .25s cubic-bezier(.2,.8,.2,1),background .25s}
.play-reel:hover{transform:translateY(-2px);background:var(--ink-hover)}
.play-reel:focus-visible{outline:2px solid var(--focus);outline-offset:3px}
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.gallery{position:absolute;left:0;width:100%;padding:0 calc(40px + var(--ox)) 0;box-sizing:border-box}
.statement{padding-top:110px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));column-gap:24px;align-items:last baseline}
.statement .st-lines{grid-column:1 / 3;margin:0;font:400 48px/52px Archivo,Archivo125,sans-serif;font-stretch:98%;letter-spacing:-.01em;text-transform:uppercase}
.statement .st-couplet{display:block;white-space:pre-line}
.statement .st-couplet + .st-couplet{margin-top:14px}
.statement .st-text{grid-column:3;align-self:center;justify-self:end;width:max(100%,31rem);max-width:40rem}
.gal-head{padding-top:var(--sec);display:flex;justify-content:space-between;align-items:flex-end;gap:32px;flex-wrap:wrap}
.gal-filters{display:flex;gap:8px;flex-wrap:wrap;padding-bottom:14px}
.gal-filter{border:1px solid var(--rule);background:transparent;border-radius:999px;padding:9px 16px;font:500 12px/1 Poppins;text-transform:uppercase;letter-spacing:.04em;color:var(--ink);cursor:pointer;transition:background .25s,color .25s,border-color .25s}
.gal-filter:hover{border-color:var(--ink)}
.gal-filter[aria-pressed="true"]{background:var(--ink);color:var(--on-ink);border-color:var(--ink)}
.gal-filter:focus-visible,.gal-tile:focus-visible,.gal-all:focus-visible{outline:2px solid var(--focus);outline-offset:3px}
.gal-grid{list-style:none;margin:64px min(0px,calc(6.5vw - 40px - var(--ox))) 0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:48px 24px}
.gal-tile{display:block;width:100%;padding:0;border:0;background:none;text-align:left;cursor:pointer;color:var(--ink);opacity:0;transform:translateY(48px);transition:opacity .9s cubic-bezier(.2,.8,.2,1),transform .9s cubic-bezier(.2,.8,.2,1)}
.gal-tile.in{opacity:1;transform:none}
.gal-grid li:nth-child(3n+2) .gal-tile{transition-delay:.08s}
.gal-grid li:nth-child(3n) .gal-tile{transition-delay:.16s}
.gal-grid li.out{display:none}
.gal-img{position:relative;display:block;aspect-ratio:16/9;border-radius:10px;overflow:hidden;background:var(--grey)}
.gal-img img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .7s cubic-bezier(.2,.8,.2,1)}
.gal-tile:hover .gal-img img{transform:scale(1.04)}
.gal-play{position:absolute;left:16px;bottom:16px;width:44px;height:44px;border-radius:50%;background:rgba(255,255,255,.92);color:#0E0E10;display:flex;align-items:center;justify-content:center;opacity:0;transform:translateY(6px);transition:opacity .35s,transform .35s}
.gal-play svg{margin-left:2px}
.gal-tile:hover .gal-play,.gal-tile:focus-visible .gal-play{opacity:1;transform:none}
.gal-cap{display:grid;grid-template-columns:1fr auto;gap:2px 12px;padding-top:14px}
.gal-brand{grid-column:1;font:500 12px/16px Poppins;text-transform:uppercase;letter-spacing:.06em;color:var(--muted)}
.gal-title{grid-column:1;font:500 16px/22px Poppins}
.gal-type{grid-column:2;grid-row:1/3;align-self:start;border:1px solid var(--rule);border-radius:999px;padding:3px 10px;font:400 12px/16px Poppins;white-space:nowrap}
.gal-all{display:inline-flex;align-items:center;gap:8px;margin-top:56px;font:500 14px/1 Poppins;text-transform:uppercase;letter-spacing:.04em;color:var(--ink);text-decoration:none;border-bottom:1px solid var(--ink);padding-bottom:6px}
@media (prefers-reduced-motion:reduce){.gal-tile{opacity:1;transform:none;transition:none}.gal-img img{transition:none}}
#work-modal{position:fixed;inset:0;z-index:120;background:rgba(14,14,16,.55);display:flex;align-items:center;justify-content:center;backdrop-filter:blur(6px)}
#work-modal[hidden]{display:none}
.work-modal-panel{position:relative;width:87vw;aspect-ratio:16/9;max-height:84vh;background:#000;border-radius:20px;overflow:hidden}
.work-modal-panel iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.work-close{z-index:2}
.reel-close{position:absolute;top:16px;right:16px;width:44px;height:44px;border-radius:50%;border:0;background:rgba(255,255,255,.12);color:#fff;display:flex;align-items:center;justify-content:center;cursor:pointer}
.reel-close:hover{background:rgba(255,255,255,.22)}
.reel-close:focus-visible{outline:2px solid #fff;outline-offset:3px}
#onion{position:fixed;inset:0;z-index:90;pointer-events:none;opacity:0;width:100vw;height:100vh;object-fit:fill}
body.onion #onion{opacity:.4}
html,body{transition:background-color .5s ease}#preloader{transition:opacity 1s ease,background-color .5s ease}

/* Hero supers switcher (prototype only) */
#hero-flat{display:none}
.supers-switch{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);white-space:nowrap;z-index:21;display:flex;align-items:center;gap:2px;padding:3px 3px 3px 12px;border:1px solid var(--rule);border-radius:999px;background:rgb(var(--haze) / .55);backdrop-filter:blur(8px);opacity:0;transition:opacity .6s}
body.ready .supers-switch{opacity:1}
.supers-switch span{font:400 11px/1 'JetBrains Mono',monospace;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);margin-right:6px}
.supers-switch .sep{width:1px;height:16px;background:var(--rule);margin:0 6px}
.supers-switch button{border:0;background:transparent;color:var(--ink);font:400 11px/1 'JetBrains Mono',monospace;text-transform:uppercase;padding:7px 9px;border-radius:999px;cursor:pointer;transition:background .25s,color .25s}
.supers-switch button[aria-pressed="true"]{background:var(--ink);color:var(--on-ink)}
.supers-switch button:not([aria-pressed="true"]):hover{background:color-mix(in srgb,var(--ink) 8%,transparent)}

/* Fixed contact bar: a quiet utility on the centred column */
.contact-bar{position:fixed;left:calc(40px + var(--ox));right:calc(40px + var(--ox));bottom:16px;z-index:19;height:52px;display:flex;align-items:center;gap:28px;padding:0 8px 0 24px;border:1px solid var(--rule);border-radius:999px;background:rgb(var(--haze) / .78);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);opacity:0;transform:translateY(12px);visibility:hidden;transition:opacity .35s ease,transform .35s cubic-bezier(.2,.7,.2,1),visibility 0s .35s}
.contact-bar.show{opacity:1;transform:none;visibility:visible;transition:opacity .35s ease,transform .35s cubic-bezier(.2,.7,.2,1)}
.contact-bar p{margin:0;font:500 14px/1 Poppins;color:var(--ink);white-space:nowrap}
.contact-bar a{font:500 14px/1 Poppins;color:var(--ink);text-decoration:none;white-space:nowrap;border-bottom:1px solid var(--rule);padding-bottom:2px}
.contact-bar a:hover{border-bottom-color:var(--ink)}
.contact-bar .cb-mail{margin-left:auto}
.contact-bar .cb-send{border:0;border-radius:999px;background:var(--ink);color:var(--on-ink);font:500 12px/14px Poppins;text-transform:uppercase;letter-spacing:.04em;padding:11px 20px;cursor:pointer;white-space:nowrap;transition:background .25s}
.contact-bar .cb-send:hover{background:var(--ink-hover)}
.contact-bar a:focus-visible,.contact-bar .cb-send:focus-visible{outline:2px solid var(--focus);outline-offset:3px}
@media (prefers-reduced-motion: reduce){.contact-bar,.contact-bar.show{transition:none;transform:none}}

/* TEMP Corporate placeholder tiles (work.js): plain tile in the grid's own style, not clickable */
.gal-temp{cursor:default}

/* Footer office column: stacked in flow, 21px between blocks */
a.slot.t16{color:inherit}


/* Lower half, layout B "Frame and panel": in flow inside the gallery block, 200px between sections */
.lh{margin-top:var(--sec);padding-bottom:0}
.lh>section+section{margin-top:var(--sec)}
#capabilities,#clients{margin-top:calc(var(--sec) - 6px)}
#contact{--pt:64px}
.lh-line:last-child{padding-bottom:0}
.lh-bleed{margin-left:min(0px,calc(6.5vw - 40px - var(--ox)));margin-right:min(0px,calc(6.5vw - 40px - var(--ox)))}
.lh .t16r{line-height:22px}
.lh .muted{color:var(--muted)}
.lh-frame{position:relative;margin-top:0;margin-bottom:0;aspect-ratio:21/9;border-radius:10px;overflow:hidden;background:var(--grey)}
.lh-frame img{width:100%;height:100%;object-fit:cover;object-position:50% 62%;display:block}
.lh-frame::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgb(0 0 0 / var(--shade,.62)),rgb(0 0 0 / 0) 52%)}
.lh-frame h2{position:absolute;z-index:1;left:40px;bottom:36px;color:#fff;white-space:nowrap}
.lh-still{margin:0;overflow:hidden;border-radius:8px;background:var(--grey);aspect-ratio:3/2}
.lh-still img{width:100%;height:100%;object-fit:cover;display:block}
.lh-cap-top{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));column-gap:24px}
.lh-pillwrap{padding-top:6px}
.lh-pillwrap .pill{margin:0;font-weight:400}
.lh-lead{grid-column:2 / 4;justify-self:end;text-align:left;margin:0;max-width:760px;font:400 32px/36px Archivo,Archivo125,sans-serif;font-stretch:98%;letter-spacing:-.01em;text-transform:uppercase}
.lh-cap-top[data-lead="desc"] .lh-lead{grid-column:3;justify-self:start;max-width:none}
.lh-lines{margin-top:64px}
.lh-line{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));column-gap:24px;align-items:end;border-top:1px solid var(--rule);padding:26px 0 30px}
.lh-line h3{grid-column:1 / 3;margin:0;font:400 72px/76px Archivo,Archivo125,sans-serif;font-stretch:98%;letter-spacing:-.01em;text-transform:uppercase}
.lh-line p{grid-column:3;margin:0 0 8px}
.lh-ins{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));column-gap:24px}
.lh-ins-left{display:flex;flex-direction:column;align-items:flex-start;gap:28px}
.lh-ins-left h2{margin:0}
.lh-ins-list{grid-column:2 / 4;display:grid;gap:44px}
.lh-ins-list article{max-width:760px}
.lh-ins-list h3{margin:10px 0 0;font:500 28px/34px Poppins}
.lh-meta{display:flex;gap:12px;align-items:center}
.lh-panel{background:var(--ground);border-radius:20px;padding:var(--pt) 56px 48px}
.lh-panel-top{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:64px}
.lh-panel h2{margin:0}
.lh-form{display:grid;gap:34px;align-content:start}
.lh-sub{margin:0 0 -6px}
.lh-field{border-bottom:1px solid var(--rule);padding:0 0 10px}
.lh-field:focus-within{border-bottom-color:var(--ink)}
.lh-field input{width:100%;border:0;background:transparent;font:400 20px/24px Poppins;text-transform:uppercase;outline:0;color:var(--ink)}
.lh-field input::placeholder{color:var(--ink);opacity:.85}
.lh-needrow{display:flex;justify-content:space-between;align-items:flex-end;gap:24px}
.lh-needl{margin:0 0 12px}
.lh-needs{display:flex;gap:8px;flex-wrap:wrap}
.lh-needs .btn{cursor:pointer;transition:background .2s,color .2s}
.lh-needs .btn[aria-pressed="true"]{background:var(--ink);color:var(--on-ink)}
.lh-facts{margin-top:64px;border-top:1px solid var(--rule);padding-top:28px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));column-gap:24px}
.lh-facts p{margin:0}
.lh-links a{text-decoration:none}
.lh-links a:hover{text-decoration:underline}
.lh-social{display:flex;gap:18px}
.lh-foot{display:flex;justify-content:space-between;align-items:center;gap:32px;padding:36px 0 56px}
.lh-foot nav{display:flex;gap:36px}
.lh-foot .brand{height:72px}
.lh-foot a{text-decoration:none;color:var(--ink)}
.lh-foot nav a:hover{text-decoration:underline}
.lh a{color:inherit}

/* Brands panel (from direction A): clients as a big caps roll, formats and places as running lines */
.lh-roll{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));column-gap:24px;row-gap:56px}
.lh-roll .lh-pillwrap{padding-top:10px}
.lh-clients-wrap{grid-column:2 / 4;display:grid;gap:56px}
.lh-clients-wrap .lh-clients{grid-column:auto}
.lh-clients{margin:0;font:400 52px/58px Archivo,Archivo125,sans-serif;font-stretch:98%;letter-spacing:-.01em;text-transform:uppercase;text-wrap:balance}
.lh-runin{grid-column:2 / 4;margin:0;font:500 24px/34px Poppins;max-width:900px}
.lh-it{white-space:nowrap}
.lh-it i{font-style:normal;color:var(--muted);padding:0 .08em}
.lh-runin .lh-it i{padding:0 .3em}

.lh-more{text-transform:none;grid-column:auto}

/* Temporary photo switch on the wide frame's top corner (removed once the owner picks) */
.lh-btsswitch{position:absolute;z-index:2;top:14px;left:14px;display:flex;align-items:center;gap:2px;padding:3px 3px 3px 12px;border:1px solid rgb(255 255 255 / .35);border-radius:999px;background:rgb(0 0 0 / .35);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.lh-btsswitch span{font:400 11px/1 'JetBrains Mono',monospace;text-transform:uppercase;letter-spacing:.06em;color:#fff;opacity:.8;margin-right:6px}
.lh-btsswitch button{border:0;background:transparent;color:#fff;font:400 11px/1 'JetBrains Mono',monospace;padding:7px 9px;border-radius:999px;cursor:pointer}
.lh-btsswitch button[aria-pressed="true"]{background:#fff;color:#0E0E10}

/* Preloader wordmark: typed letter by letter */
.pre-type{color:var(--ink);line-height:0}
.pre-type svg{display:block;max-width:86vw;height:auto}
.pre-caret{fill:currentColor;animation:precaret .8s steps(1) infinite}
@keyframes precaret{50%{opacity:0}}
@media (prefers-reduced-motion: reduce){.pre-caret{animation:none}}

/* Header: one real button, then a small round theme button */
#header nav .nav-cta{display:inline-flex;align-items:center;height:32px;padding:0 18px;border-radius:999px;background:var(--ink);color:var(--on-ink);font:500 12px/14px Poppins;text-transform:uppercase;letter-spacing:.04em;text-decoration:none;white-space:nowrap;transition:background .25s}
#header nav .nav-cta:hover{background:var(--ink-hover)}
.theme-btn{display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;margin-left:-28px;padding:0;border:1px solid var(--rule);border-radius:50%;background:transparent;color:var(--ink);cursor:pointer;transition:background .25s}
.theme-btn:hover{background:color-mix(in srgb,var(--ink) 8%,transparent)}
.theme-btn:focus-visible,#header nav .nav-cta:focus-visible{outline:2px solid var(--focus);outline-offset:3px}

/* BTS filmstrip: one row, full-bleed to the frame's inset, scroll-snap, soft fade at the right edge */
.lh-under{margin-top:24px;display:flex;justify-content:flex-end;margin-right:min(0px,calc(6.5vw - 40px - var(--ox)))}
.lh-under p{max-width:38ch;text-align:left}
.lh-strip-wrap{position:relative;margin-top:24px}
.lh-strip-wrap::after{content:"";position:absolute;top:0;right:0;bottom:0;width:90px;pointer-events:none;background:linear-gradient(to left,var(--bg),transparent);transition:opacity .3s}
.lh-strip-wrap.at-end::after{opacity:0}
.lh-strip{list-style:none;margin:0;padding:0;display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;cursor:grab;-webkit-overflow-scrolling:touch}
.lh-strip::-webkit-scrollbar{display:none}
.lh-strip.dragging{cursor:grabbing;scroll-snap-type:none}
.lh-strip li{flex:0 0 230px;scroll-snap-align:start}
.lh-strip .lh-still{aspect-ratio:3/2;border-radius:8px}
.lh-strip:focus-visible{outline:2px solid var(--focus);outline-offset:4px}

/* Contact: headline and small line; project field; facts labels */
.lh-chead{display:flex;flex-direction:column;gap:20px;align-items:flex-start}
.lh-chead p{max-width:420px}
.lh-field textarea{display:block;width:100%;min-height:72px;border:0;background:transparent;font:400 20px/24px Poppins;text-transform:uppercase;outline:0;color:var(--ink);resize:none;overflow:hidden;padding:0}
.lh-field textarea::placeholder{color:var(--ink);opacity:.85}
.lh-fl{font:400 12px/16px Poppins;color:var(--muted);margin:0 0 10px!important;text-transform:uppercase;letter-spacing:.04em}
.lh-facts p+p{margin-top:6px}

/* Send stays a 64px circle even beside two rows of chips */
.lh-needrow .btn.round{flex:none;width:64px;height:64px;min-width:64px}

/* Contact form: name/email pair, writing box, optional tag */
.lh-pair{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:24px}
.lh-field.lh-box{border:1px solid var(--rule);border-radius:12px;padding:0;transition:border-color .2s}
.lh-field.lh-box:focus-within{border-color:var(--ink)}
.lh-field.lh-box textarea{box-sizing:border-box;min-height:168px;padding:18px 20px;font:400 18px/26px Poppins;text-transform:none;border-radius:12px}
.lh-field.lh-box textarea::placeholder{text-transform:uppercase;color:var(--ink);opacity:.6}
.lh-opt{font-size:.8em;color:var(--muted);text-transform:none;letter-spacing:0}

/* Header backing: once past the hero, a short top-down fade of the ground colour sits behind the header row */
#header::before{content:"";position:absolute;left:0;right:0;top:0;height:150px;z-index:-1;pointer-events:none;opacity:0;transition:opacity .4s ease;background:linear-gradient(to bottom,color-mix(in srgb,var(--bg) 94%,transparent) 0,color-mix(in srgb,var(--bg) 70%,transparent) 55%,transparent 100%)}
body.past-hero #header::before{opacity:1}

/* ==========================================================================
   Responsive Breakpoints (<1440px): Phase 1 Prototype
   ========================================================================== */

/* --- 2. Tablets and mid viewports (768px – 1023px) --- */
@media (max-width: 1023px) {
  /* Flat hero switch (?hero=flat below 1024px) */
  body.hero-flat #gl,
  body.hero-flat .supers-switch,
  body.hero-flat .lh-btsswitch {
    display: none !important;
  }
  body.hero-flat #hero-flat {
    display: block;
    position: fixed;
    z-index: 3;
    left: 24px;
    right: 24px;
    bottom: 162px;
    pointer-events: none;
    transition: opacity .6s ease;
  }
  body.hero-flat .hero-flat-title {
    margin: 0;
    font-family: Archivo, Archivo125, sans-serif;
    font-weight: 400;
    font-stretch: 98%;
    text-transform: uppercase;
    letter-spacing: -0.01em;
  }
  body.hero-flat .hero-flat-line {
    display: block;
    font-size: clamp(28px, 5.2vw, 58px);
    line-height: 1.05;
    color: var(--ink);
    overflow-wrap: break-word;
    word-break: normal;
  }
  body.hero-flat .hero-flat-line.hero-flat-name {
    font-size: clamp(20px, 3.8vw, 40px);
    line-height: 1.1;
    color: var(--muted);
  }
  body.hero-flat #hero-body {
    left: 24px !important;
    top: auto !important;
    bottom: 82px !important;
    width: auto !important;
    max-width: 360px !important;
  }
  body.hero-flat #hero-body > span {
    opacity: 1 !important;
    transform: none !important;
  }
  body.hero-flat .play-reel {
    left: 24px !important;
    top: auto !important;
    bottom: 24px !important;
  }

  /* Side gutters: 24px */
  .gallery { padding-left: 24px; padding-right: 24px; }
  #header { padding-left: 24px; padding-right: 24px; }
  .contact-bar { left: 24px; right: 24px; }
  .lh-bleed, .gal-grid { margin-left: 0; margin-right: 0; }
  .lh-under { margin-right: 0; }
  :root { --sec: 120px; }

  /* Rhythm scaling */
  .statement { padding-top: 80px; }

  /* Typography */
  .d120 { font-size: 56px; line-height: 60px; }
  .d60 { font-size: 44px; line-height: 48px; }

  /* Header */
  #header nav { gap: 20px; }
  .theme-btn { margin-left: 0; }

  /* Statement: stacks to 1 column */
  .statement { display: flex; flex-direction: column; gap: 32px; align-items: flex-start; }
  .statement .st-lines { grid-column: auto; font-size: 36px; line-height: 40px; }
  .statement .st-text { grid-column: auto; width: 100%; max-width: 36rem; align-self: flex-start; justify-self: start; }

  /* Work grid: 2 columns */
  .gal-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 36px 20px; margin-top: 48px; }

  /* BTS Frame */
  .lh-frame { aspect-ratio: 16/9; }
  .lh-frame h2 { font-size: clamp(40px, 5.5vw, 56px); line-height: 1.1; left: 32px; right: 32px; bottom: 28px; }

  /* Capabilities: dead first column collapses, pill sits above content */
  .lh-cap-top { display: flex; flex-direction: column; gap: 16px; }
  .lh-lead { grid-column: auto; max-width: 100%; font-size: 26px; line-height: 30px; }
  .lh-lines { margin-top: 48px; }
  .lh-line { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; padding: 22px 0 24px; }
  .lh-line h3 { grid-column: auto; font-size: 40px; line-height: 44px; }
  .lh-line p { grid-column: auto; margin: 0; max-width: 38rem; }

  /* Brands panel: dead first column collapses, pill sits above content */
  .lh-roll { display: grid; grid-template-columns: 1fr; row-gap: 20px; }
  .lh-roll .lh-pillwrap { padding-top: 0; }
  .lh-roll .lh-pillwrap:not(:first-child) { margin-top: 24px; }
  .lh-clients-wrap, .lh-runin { grid-column: auto; max-width: 100%; }
  .lh-clients-wrap { gap: 28px; margin-bottom: 8px; }
  .lh-clients { font-size: 32px; line-height: 38px; }
  .lh-runin { font-size: 18px; line-height: 26px; }

  /* Insights: 2 columns */
  .lh-ins { grid-template-columns: 240px 1fr; column-gap: 32px; }
  .lh-ins-left { gap: 20px; }
  .lh-ins-left h2 { font-size: 44px; line-height: 48px; }
  .lh-ins-list { grid-column: 2; gap: 32px; }
  .lh-ins-list h3 { font-size: 22px; line-height: 28px; }

  /* Contact panel: 2 columns stack to 1 */
  #contact { --pt: 44px; }
  .lh-panel { padding: var(--pt) 36px 36px; border-radius: 16px; }
  .lh-panel-top { grid-template-columns: 1fr; row-gap: 36px; }
  .lh-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 28px; column-gap: 24px; margin-top: 48px; }
  .lh-facts > div:last-child { grid-column: 1 / -1; }

  /* Fixed bottom contact bar */
  .contact-bar { gap: 12px; padding: 0 6px 0 16px; }
  .contact-bar p { font-size: 12px; }
  .contact-bar a { font-size: 12px; }
  .contact-bar .cb-send { padding: 9px 16px; font-size: 11px; }

  /* Footer */
  .lh-foot .brand { height: 56px; }
  .lh-foot nav { gap: 20px; flex-wrap: wrap; }
}

/* --- 3. Mobile portrait / phablets (<=767px) --- */
@media (max-width: 767px) {
  /* Header: 64px height, nav links hidden, logo + CTA + theme toggle kept */
  #header { height: 64px; }
  #header .brand { height: 44px; }
  #header nav span { display: none; }
  #header nav { gap: 10px; }
  #header nav .theme-btn { margin-left: 0; }
  #header nav .nav-cta { height: 30px; padding: 0 14px; font-size: 11px; }
  #header::before { height: 100px; }

  /* Rhythm scaling */
  .statement { padding-top: 60px; gap: 24px; }
  .gal-head { gap: 20px; }

  /* Typography */
  .d120 { font-size: 42px; line-height: 46px; }
  .d60 { font-size: 34px; line-height: 38px; }
  .statement .st-lines { font-size: 26px; line-height: 30px; }
  .lh-lead { font-size: 22px; line-height: 26px; }
  .lh-line h3 { font-size: 30px; line-height: 34px; }
  .lh-clients { font-size: 24px; line-height: 30px; }
  .lh-runin { font-size: 16px; line-height: 22px; }

  /* Work grid: 1 column */
  .gal-grid { grid-template-columns: 1fr; gap: 32px; margin-top: 36px; }
  .gal-all { margin-top: 36px; }

  /* Modal */
  .work-modal-panel { width: 94vw; border-radius: 12px; }

  /* BTS Frame: taller 4:5 frame, title wraps cleanly, smaller film strip */
  .lh-frame { aspect-ratio: 4/5; border-radius: 8px; }
  .lh-frame::after { background: linear-gradient(to top, rgb(0 0 0 / calc(var(--shade, 0.62) + 0.12)), rgb(0 0 0 / 0) 65%); }
  .lh-frame h2 { font-size: clamp(34px, 8vw, 44px); line-height: 1.1; left: 20px; right: 20px; bottom: 20px; white-space: normal; }
  .lh-under { display: block; }
  .lh-under p { max-width: 100%; }
  :root { --sec: 80px; }
  .pill { padding: 4px 12px; font-size: 13px; line-height: 18px; }
  .lh-strip li { flex: 0 0 160px; }
  .lh-strip-wrap::after { width: 44px; }

  /* Insights: 1 column */
  .lh-ins { display: flex; flex-direction: column; gap: 28px; }
  .lh-ins-left { flex-direction: row; justify-content: space-between; align-items: center; width: 100%; gap: 16px; }
  .lh-ins-left h2 { font-size: 36px; line-height: 40px; }
  .lh-ins-list { grid-column: auto; gap: 24px; }
  .lh-ins-list h3 { font-size: 18px; line-height: 24px; }

  /* Contact panel */
  #contact { --pt: 36px; }
  .lh-panel { padding: var(--pt) 24px 28px; }
  .lh-pair { grid-template-columns: 1fr; row-gap: 24px; }
  .lh-field.lh-box textarea { min-height: 140px; font-size: 16px; line-height: 24px; }
  .lh-needrow { display: flex; flex-direction: column; align-items: stretch; gap: 20px; }
  .lh-needrow .btn.round { align-self: flex-end; }
  .lh-facts { grid-template-columns: 1fr; row-gap: 24px; margin-top: 40px; }
  .lh-facts > div:last-child { grid-column: auto; }

  /* Fixed bottom contact bar: show only CTA button, never overflow */
  .contact-bar {
    left: auto;
    right: 24px;
    bottom: 16px;
    height: auto;
    padding: 0;
    border: none;
    background: transparent;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
  .contact-bar .cb-lead,
  .contact-bar .cb-mail,
  .contact-bar .cb-wa {
    display: none;
  }
  .contact-bar .cb-send {
    padding: 11px 18px;
    font-size: 11px;
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.22);
  }

  /* Footer: stacks into single column */
  .lh-foot { flex-direction: column; align-items: flex-start; gap: 24px; padding: 28px 0 40px; }
  .lh-foot .brand { height: 48px; }
  .lh-foot nav { flex-direction: column; gap: 14px; }
}

/* --- 4. Small phones (<=479px, e.g. 360px - 412px) --- */
@media (max-width: 479px) {
  /* Flat hero below 480px: 16px gutter */
  body.hero-flat #hero-flat {
    left: 16px;
    right: 16px;
    bottom: 146px;
  }
  body.hero-flat #hero-body {
    left: 16px !important;
    bottom: 70px !important;
    max-width: calc(100vw - 32px) !important;
  }
  body.hero-flat .play-reel {
    left: 16px !important;
    bottom: 16px !important;
  }

  /* Side gutters: 16px */
  .gallery { padding-left: 16px; padding-right: 16px; }
  #header { padding-left: 16px; padding-right: 16px; }
  .contact-bar { right: 16px; bottom: 16px; }

  /* Rhythm scaling */
  .statement { padding-top: 48px; gap: 20px; }
  .gal-head { gap: 16px; }

  /* Typography */
  .d120 { font-size: 36px; line-height: 40px; }
  .d60 { font-size: 30px; line-height: 34px; }
  .statement .st-lines { font-size: 22px; line-height: 26px; }
  .statement .st-couplet + .st-couplet { margin-top: 10px; }
  .lh-lead { font-size: 19px; line-height: 23px; }
  .lh-line h3 { font-size: 24px; line-height: 28px; }
  .lh-clients { font-size: 20px; line-height: 26px; }
  .lh-runin { font-size: 14px; line-height: 20px; }

  /* Header compact */
  #header .brand { height: 38px; }
  #header nav { gap: 8px; }
  #header nav .nav-cta { height: 28px; padding: 0 10px; font-size: 10px; letter-spacing: 0.02em; }
  #header nav .theme-btn { width: 28px; height: 28px; }

  /* Filters */
  .gal-filters { gap: 6px; }
  .gal-filter { padding: 6px 10px; font-size: 11px; }

  /* Modal */
  .work-modal-panel { width: 96vw; border-radius: 8px; }

  /* BTS Frame */
  .lh-frame h2 { font-size: 30px; line-height: 34px; left: 16px; right: 16px; bottom: 16px; }
  .lh-strip li { flex: 0 0 135px; }
  .lh-strip-wrap::after { width: 32px; }
  .lh-btsswitch { top: 8px; left: 8px; padding: 2px 2px 2px 8px; }
  .lh-btsswitch button { padding: 5px 7px; font-size: 10px; }

  /* Insights */
  .lh-ins-left { flex-direction: column; align-items: flex-start; gap: 14px; }

  /* Contact panel */
  #contact { --pt: 24px; }
  .lh-panel { padding: var(--pt) 16px 20px; border-radius: 12px; }
  .lh-form { gap: 24px; }
  .lh-field input, .lh-field textarea { font-size: 16px; line-height: 22px; }
  .lh-field:not(.lh-box) textarea { min-height: 60px; }
  .lh-needs { gap: 6px; }
  .lh-needs .btn { padding: 6px 12px; font-size: 11px; }
  .lh-needrow .btn.round { width: 56px; height: 56px; min-width: 56px; }
  .lh-facts { margin-top: 36px; padding-top: 20px; }

  /* Footer */
  .lh-foot { padding: 24px 0 36px; gap: 20px; }
  .lh-foot .brand { height: 40px; }
  .lh-foot nav { gap: 12px; font-size: 14px; }
}

/* --- 5. Touch / Hover-none interactions --- */
@media (hover: none) {
  .gal-play { opacity: 1; transform: none; }
  #hero-reel.full .hero-reel-content .play { opacity: 1; }
}

/* Clients: logo wall. Marks are flat black PNGs used as a mask, so they take the ink colour in both themes.
   Two rows drift slowly in opposite directions; the duration (--dur) is set in JS from the track width. */
#clients{position:relative;display:flow-root;height:auto}
.lg-wall{--b:50px;--gap:64px;--fl:0px;margin-top:64px;display:flex;flex-direction:column;gap:56px;overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
.lg-row{display:flex;width:max-content;animation:lg-drift var(--dur,200s) linear infinite}
.lg-row.rev{animation-direction:reverse}
.lg-track{display:flex;flex:none;align-items:center;gap:var(--gap);margin:0;padding:0 var(--gap) 0 0;list-style:none}
.lg-i{display:flex;align-items:center;justify-content:center}
.lg-m{display:block;flex:none;width:max(calc(var(--b) * var(--w)),calc(var(--fl) * var(--r)));aspect-ratio:var(--r);background:var(--ink);opacity:.7;-webkit-mask-repeat:no-repeat;-webkit-mask-position:center;-webkit-mask-size:contain;mask-repeat:no-repeat;mask-position:center;mask-size:contain;transition:opacity .25s}
@media (hover:hover){.lg-wall:hover .lg-row{animation-play-state:paused}.lg-i:hover .lg-m{opacity:1}}
@keyframes lg-drift{to{transform:translateX(-50%)}}
@media (max-width:1439px){.lg-wall{--b:44px;--gap:56px}}
@media (max-width:1023px){.lg-wall{--b:38px;--gap:48px}}
@media (max-width:767px){.lg-wall{--b:26px;--gap:36px;--fl:20px;margin-top:40px;gap:36px}}
/* Reduced motion: no drift, one static centred block that wraps. */
@media (prefers-reduced-motion:reduce){
  .lg-wall{overflow:visible;-webkit-mask-image:none;mask-image:none;gap:0}
  .lg-row{width:100%;max-width:100%;animation:none;transform:none;justify-content:center}
  .lg-row .lg-dup{display:none}
  .lg-row .lg-track{flex:0 1 auto;max-width:100%;flex-wrap:wrap;justify-content:center;gap:40px;padding:0 0 40px}
  .lg-row:last-child .lg-track{padding-bottom:0}
}

/* ?foot=inner: footer aligned with the contact box's inner content, for comparison. Default stays on the box's outer edge. */
.lh{--panel-px:56px}
@media (max-width:1023px){.lh{--panel-px:36px}}
@media (max-width:767px){.lh{--panel-px:24px}}
@media (max-width:479px){.lh{--panel-px:16px}}
body.foot-inner .lh .lh-foot{padding-left:var(--panel-px);padding-right:var(--panel-px)}
/* Footer links nudged 4px left; the logo stays on the box edge (owner, 11 Nov). */
.lh .lh-foot nav{position:relative;left:-4px}

/* BTS body line, proposal (?under=new): more air above and below, a slightly larger measure and size, still on the frame's right edge */
.lh-frame-sec[data-under="new"] .lh-under{margin-top:40px}
.lh-frame-sec[data-under="new"] .lh-under p{max-width:42ch;font:400 18px/27px Poppins}
.lh-frame-sec[data-under="new"] .lh-strip-wrap{margin-top:72px}
@media (max-width:767px){
  .lh-frame-sec[data-under="new"] .lh-under{margin-top:28px}
  .lh-frame-sec[data-under="new"] .lh-under p{max-width:100%;font:400 16px/24px Poppins}
  .lh-frame-sec[data-under="new"] .lh-strip-wrap{margin-top:44px}
}

/* Capabilities without its pill and lead (owner, 11 Nov): the four rows sit close under BTS. */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
#capabilities{margin-top:calc(var(--sec) * .6)}
#capabilities .lh-lines{margin-top:0}
/* BTS tagline: the fixed 120px line is wider than the frame below ~1380px and was clipped ("ACTIO"). Scale it between 1024 and 1439; 1440+ unchanged. */
@media (min-width:1024px) and (max-width:1439px){.lh-frame h2{font-size:min(120px, calc(9.2vw - 16px));line-height:1.04}}
/* BTS body line moved to the left, on the frame's left edge (owner, 11 Nov). */
.lh-under{justify-content:flex-start;margin-right:0;margin-left:min(0px,calc(6.5vw - 40px - var(--ox)))}
@media (max-width:1023px){.lh-under{margin-left:0}}