@font-face{font-family:'BringBold';src:url('BringBold-Nineties.woff2') format('woff2');font-display:swap}
/* Self-hosted. Nothing here calls out to Google. */
@font-face{font-family:'Archivo';font-style:normal;font-weight:100 900;font-stretch:100%;font-display:swap;src:url('fonts/archivo-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Archivo';font-style:normal;font-weight:100 900;font-stretch:100%;font-display:swap;src:url('fonts/archivo-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:400;font-display:swap;src:url('fonts/ibm-plex-mono-400-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:400;font-display:swap;src:url('fonts/ibm-plex-mono-400-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:500;font-display:swap;src:url('fonts/ibm-plex-mono-500-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:500;font-display:swap;src:url('fonts/ibm-plex-mono-500-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Anton';font-style:normal;font-weight:400;font-display:swap;src:url('fonts/anton-400-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Anton';font-style:normal;font-weight:400;font-display:swap;src:url('fonts/anton-400-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
:root{
  /* type scale — 5 text steps + display clamps. 12px floor. */
  --fs-xs:12px; --fs-sm:13.5px; --fs-md:15px; --fs-lg:17px; --fs-xl:19px;
  --bg:#F7F6F2; --ink:#0D0E10; --muted:#61646B; --line:#E3E1D9;
  --blue:#5BC2E7; --blue-deep:#0E90C4; --dark:#0A0B0D; --dark-ink:#F2F3F4; --dark-muted:#9AA1A8; --dark-line:#1E2226;
}
*{box-sizing:border-box;margin:0}
html{scroll-behavior:smooth}
body{font-family:'Archivo',sans-serif;background:var(--bg);color:var(--ink);font-size:var(--fs-md);line-height:1.5;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img,video{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
.mono{font-family:'IBM Plex Mono',monospace}
h1,h2{font-family:'BringBold',sans-serif;font-weight:400;line-height:.92;letter-spacing:.005em}
.dot{color:var(--blue)}
.eyebrow{font-size:var(--fs-xs);letter-spacing:.16em;text-transform:uppercase;color:var(--muted);display:flex;gap:10px;align-items:center}
.tick{width:8px;height:8px;border-radius:50%;background:var(--blue);animation:pulse 2.4s infinite;flex:none}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.35}}
.reveal{opacity:0;transform:translateY(36px)}

/* nav */
.nav{position:fixed;inset:0 0 auto;z-index:20;display:flex;align-items:center;gap:34px;padding:20px 4vw;transition:background .3s,border-color .3s,color .3s;border-bottom:1px solid transparent;color:#F2F3F4}
.nav.scrolled{color:var(--ink)}
.nav .cta-pill{background:#F2F3F4;color:var(--ink)}
.nav.scrolled .cta-pill{background:var(--ink);color:var(--bg)}
.nav .mono{color:inherit;opacity:.7}
.nav.scrolled{background:rgba(247,246,242,.88);backdrop-filter:blur(12px);border-color:var(--line)}
.mark{font-family:'BringBold',sans-serif;font-size:23px;letter-spacing:.02em}
.links{display:flex;gap:26px;font-size:var(--fs-sm);margin-left:auto}
.links a{position:relative;padding:14px 0;display:inline-flex;align-items:center;min-height:44px}
.links a::after{content:'';position:absolute;left:0;bottom:10px;height:1.5px;width:100%;background:var(--blue);transform:scaleX(0);transform-origin:left;transition:transform .28s cubic-bezier(.7,0,.3,1)}
.links a:hover::after{transform:scaleX(1)}
.cta-pill{font-size:var(--fs-xs);letter-spacing:.08em;text-transform:uppercase;background:var(--ink);color:var(--bg);padding:11px 20px;border-radius:99px;transition:background .25s}
.cta-pill:hover{background:var(--blue-deep)}
.nav .mono{font-size:var(--fs-xs)}

/* hero — full bleed still, parallax */
.hero{position:sticky;top:0;min-height:100svh;display:flex;align-items:flex-end;overflow:hidden;z-index:0}
main.over{position:relative;z-index:2;background:var(--bg);box-shadow:0 -30px 60px rgba(0,0,0,.35)}
.hero-bg{position:absolute;inset:-6% 0;width:100%;height:112%;object-fit:cover;will-change:transform}
.mist{position:absolute;top:26%;height:36%;left:-25%;right:-25%;pointer-events:none;filter:blur(34px);opacity:0;
  background:radial-gradient(55% 90% at 50% 55%,rgba(255,255,255,.75),transparent 70%)}
.mist.m2{top:34%;opacity:0;filter:blur(50px)}
.hero-shade{position:absolute;inset:0;background:linear-gradient(180deg,rgba(10,11,13,.25) 0%,transparent 40%,rgba(10,11,13,.55) 100%)}
.hero-inner{position:relative;z-index:1;padding:0 4vw 11vh;color:#F2F3F4}
.hero-inner .eyebrow{color:#C9CFD4}
.hero h1{font-size:clamp(50px,7.6vw,128px);margin-top:26px}
.hero h1 .row{display:block;overflow:hidden}
.hero h1 .row>span{display:inline-block;transform:translateY(112%)}
#word{color:var(--blue);border-right:4px solid var(--blue);padding-right:6px}
.hero .sub{font-size:clamp(var(--fs-lg),1.4vw,20px);max-width:46ch;color:#C9CFD4;margin-top:28px;opacity:0;transform:translateY(20px)}
.cta-row{display:flex;gap:16px;align-items:center;margin-top:34px;flex-wrap:wrap;opacity:0;transform:translateY(20px)}
.btn{font-size:var(--fs-sm);letter-spacing:.07em;text-transform:uppercase;padding:17px 32px;border:1.5px solid var(--ink);transition:all .25s}
.btn.primary{background:var(--ink);color:var(--bg)}
.btn.primary:hover{background:var(--blue-deep);border-color:var(--blue-deep)}
.btn.ghost:hover{border-color:var(--blue-deep);color:var(--blue-deep)}
.hero .btn.primary{background:var(--blue);border-color:var(--blue);color:#070707}
.hero .btn.primary:hover{background:#F2F3F4;border-color:#F2F3F4}
.hero .btn.ghost{border-color:#F2F3F4;color:#F2F3F4}
.hero .btn.ghost:hover{border-color:var(--blue);color:var(--blue)}
.hero-chip{position:absolute;right:4vw;bottom:5vh;z-index:1;font-size:var(--fs-xs);letter-spacing:.14em;background:rgba(10,11,13,.6);color:var(--dark-ink);padding:7px 11px;display:flex;gap:8px;align-items:center;backdrop-filter:blur(6px)}
.hero-chip .live{width:6px;height:6px;border-radius:50%;background:var(--blue);animation:pulse 1.8s infinite}

/* tools marquee — pacman belt */
.tools{background:var(--dark);border-top:1px solid var(--dark-line);border-bottom:1px solid var(--dark-line);padding:34px 0 26px;overflow:hidden;position:relative}
.tools .label{position:absolute;left:4vw;top:9px;z-index:4;font-size:var(--fs-xs);letter-spacing:.2em;color:var(--dark-muted)}
.tools-track{display:flex;gap:56px;width:max-content;align-items:center;will-change:transform}
.tool{display:flex;gap:13px;align-items:center;min-height:44px;padding:6px 0;color:#EDEFF1;font-size:var(--fs-md);font-weight:500;transition:color .25s;flex:none}
.tool:hover{color:var(--blue)}
.tool img{width:32px;height:32px;object-fit:contain;filter:brightness(0) invert(1);opacity:.95}
.eaten{position:absolute;left:0;top:0;bottom:0;width:calc(4vw + 46px);background:var(--dark);z-index:2}
.pac{position:absolute;left:calc(4vw + 8px);top:50%;width:38px;height:38px;margin-top:-15px;z-index:3}
.pac i{position:absolute;left:0;width:38px;height:19px;background:var(--blue)}
.pac i.t{top:0;border-radius:38px 38px 0 0;transform-origin:50% 100%;animation:chompT .32s linear infinite alternate}
.pac i.b{bottom:0;border-radius:0 0 38px 38px;transform-origin:50% 0%;animation:chompB .32s linear infinite alternate}
@keyframes chompT{from{transform:rotate(0)}to{transform:rotate(-32deg)}}
@keyframes chompB{from{transform:rotate(0)}to{transform:rotate(32deg)}}

/* work band */
.work{background:var(--dark);color:var(--dark-ink);padding:13vh 4vw}
.work .head{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;margin-bottom:56px;flex-wrap:wrap}
.work h2{font-size:clamp(40px,6vw,96px)}
.work .head .mono{font-size:var(--fs-xs);color:var(--dark-muted);letter-spacing:.12em;text-transform:uppercase}
.tiles{display:grid;grid-template-columns:repeat(12,1fr);gap:18px}
.tile{position:relative;overflow:hidden;grid-column:span 6;opacity:0;transform:translateY(40px)}
.tile.tall{grid-column:span 3}
.tile video,.tile img{width:100%;aspect-ratio:16/10;object-fit:cover;transition:transform .7s cubic-bezier(.2,.6,.2,1)}
.tile.tall video,.tile.tall img{aspect-ratio:3/4}
.tile:hover video,.tile:hover img{transform:scale(1.045)}
.tile .tag{position:absolute;top:14px;left:14px;font-size:var(--fs-xs);letter-spacing:.14em;background:rgba(10,11,13,.75);color:var(--dark-ink);padding:6px 10px;display:flex;gap:7px;align-items:center;backdrop-filter:blur(6px)}
.tile .tag .live{width:6px;height:6px;border-radius:50%;background:var(--blue);animation:pulse 1.8s infinite}
.tile .cap{position:absolute;left:0;right:0;bottom:0;padding:34px 16px 14px;font-size:var(--fs-sm);letter-spacing:.1em;background:linear-gradient(transparent,rgba(10,11,13,.82));display:flex;justify-content:space-between;align-items:baseline}
.tile .cap .mono{font-size:var(--fs-xs);color:var(--dark-muted)}
.work .all{display:inline-flex;align-items:center;min-height:44px;margin-top:44px;font-size:var(--fs-sm);letter-spacing:.08em;text-transform:uppercase;border-bottom:1.5px solid var(--blue);padding-bottom:4px}
.work .all:hover{color:var(--blue)}

/* stats — droppable rows */
.stats{padding:4vh 0 0;background:var(--bg)}
.srow{display:grid;grid-template-columns:minmax(200px,.9fr) 1fr 1.2fr;gap:4vw;align-items:center;padding:6vh 4vw;border-bottom:1px solid var(--line)}

.srow:first-child{border-top:1px solid var(--line)}
.srow .big{font-family:'BringBold',sans-serif;font-size:clamp(64px,9vw,150px);line-height:1;white-space:nowrap}
.srow .big sup{font-size:.4em;vertical-align:super}
.srow .what{font-size:clamp(var(--fs-lg),1.5vw,21px);font-weight:600;max-width:20ch}
.srow .old{font-size:var(--fs-md);color:var(--muted);max-width:44ch}
.srow .old .strike{position:relative;white-space:nowrap}
.srow .old .strike::after{content:'';position:absolute;left:0;top:55%;height:1.5px;width:0;background:var(--ink)}
.srow.struck .old .strike::after{width:100%;transition:width .8s cubic-bezier(.7,0,.3,1)}
.stats .basis{padding:14px 4vw 0;font-size:var(--fs-xs);color:var(--muted)}

/* craft — with scan panel */
.craft{background:var(--bg);padding:14vh 4vw;display:grid;grid-template-columns:1.05fr .95fr;gap:5vw;align-items:center}
.craft h2{font-size:clamp(40px,5.6vw,88px);margin:14px 0 22px}
.lede{font-size:var(--fs-lg);max-width:50ch;color:var(--muted)}
.checks{margin-top:40px;display:flex;flex-direction:column;gap:0}
.check{display:grid;grid-template-columns:44px 1fr;gap:14px;padding:18px 0;border-top:1px solid var(--line);opacity:0;transform:translateY(24px)}
.check .num{font-size:var(--fs-xs);color:var(--blue-deep);letter-spacing:.12em;padding-top:3px}
.check h3{font-size:var(--fs-lg);font-weight:600;margin-bottom:5px}
.check p{font-size:var(--fs-sm);color:var(--muted)}
.scanwrap{position:relative;overflow:hidden;opacity:0;transform:translateY(26px)}
.scanwrap{aspect-ratio:4/5}
.scanwrap img{position:absolute;left:0;top:0;width:100%;height:132%;object-fit:cover;will-change:transform}

/* trial */
.trial{background:var(--dark);color:var(--dark-ink);padding:14vh 4vw;position:relative;overflow:hidden}
.trial>*{position:relative}
.trial .eyebrow{color:var(--dark-muted)}
.trial h2{font-size:clamp(30px,4.4vw,72px);margin:14px 0 10px;line-height:.96}
#stars{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.node.n2{left:50%}.node.n3{left:83.3%}
.trial .lede{color:var(--dark-muted)}
.flow{position:relative;display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:70px}
.fcard{position:relative;background:rgba(16,18,21,.82);border:1px solid var(--dark-line);padding:28px 24px 26px;opacity:0;transform:translateY(26px);backdrop-filter:blur(4px)}
.fcard .num{font-size:var(--fs-xs);color:var(--blue);letter-spacing:.14em;display:block;margin-bottom:16px}
.fcard h3{font-size:var(--fs-lg);font-weight:600;margin-bottom:8px}
.fcard p{font-size:var(--fs-sm);color:var(--dark-muted)}
.stamp{position:absolute;right:0;top:-74px;display:flex;flex-direction:column;align-items:center;transform:rotate(-6deg);z-index:2}
.stamp .h{font-family:'BringBold',sans-serif;font-size:clamp(44px,4.6vw,68px);color:var(--blue);line-height:1}
.stamp .u{font-size:var(--fs-xs);letter-spacing:.26em;color:var(--dark-muted);margin-top:4px}
.handle-row{display:flex;gap:12px;margin-top:52px;flex-wrap:wrap;align-items:center}
.handle{display:flex;align-items:center;background:#101215;border:1px solid var(--dark-line);padding:0 0 0 18px;min-width:min(360px,80vw)}
.handle span{color:var(--dark-muted);font-size:var(--fs-md)}
.handle input{flex:1;background:none;border:0;outline:0;color:var(--dark-ink);font-size:var(--fs-md);font-family:'Archivo',sans-serif;padding:17px 12px}
.handle input:focus{outline:2px solid var(--blue);outline-offset:-2px}
.btn.blue{background:var(--blue);border-color:var(--blue);color:#070707}
.btn.blue:hover{background:var(--dark-ink);border-color:var(--dark-ink)}
.small-note{font-size:var(--fs-xs);color:var(--dark-muted);margin-top:22px;max-width:56ch}
.small-note strong{color:var(--dark-ink)}
.why{font-size:var(--fs-md);color:var(--dark-muted);max-width:58ch;margin-top:14px}

/* footer */
footer{padding:12vh 4vw 5vh;border-top:1px solid var(--line)}
footer .big{font-family:'BringBold',sans-serif;font-size:clamp(46px,7vw,110px);line-height:.95;margin-bottom:8vh}
footer .big a{border-bottom:3px solid var(--blue)}
footer .big a:hover{color:var(--blue-deep)}
.foot-cols{display:flex;gap:8vw;flex-wrap:wrap;font-size:var(--fs-md);color:var(--muted)}
.foot-cols div{display:flex;flex-direction:column;gap:8px}
.foot-cols a{min-height:44px;display:inline-flex;align-items:center}
.foot-cols a:hover{color:var(--blue-deep)}
.foot-base{display:flex;justify-content:space-between;margin-top:8vh;font-size:var(--fs-xs);color:var(--muted);flex-wrap:wrap;gap:10px}

@media(max-width:900px){
  .links{display:none}
  .hero{grid-template-columns:1fr;padding-top:13vh}
  .hero-media{max-width:520px}
  .tiles{grid-template-columns:repeat(2,1fr)}
  .tile,.tile.tall{grid-column:span 2}
  .srow{grid-template-columns:1fr;gap:10px;padding:5vh 4vw}
  .craft{grid-template-columns:1fr}
  .flow{grid-template-columns:1fr}
  .stamp{position:static;transform:none;margin-bottom:10px;align-items:flex-start}
}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  .reveal,.tile,.check,.fcard,.scanwrap,.hero-media,.hero .sub,.cta-row{opacity:1!important;transform:none!important}
  .hero h1 .row>span{transform:none!important}
    }


/* ============ shared page furniture ============ */
.section{padding:12vh 4vw}
.section.tight{padding:9vh 4vw}
.section h2{font-size:clamp(34px,5vw,80px);margin-bottom:20px}
.section .lede{margin-bottom:0}
.sec-head{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;flex-wrap:wrap;margin-bottom:48px}
.sec-head .mono{font-size:var(--fs-xs);letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.dark-band{background:var(--dark);color:var(--dark-ink)}
.dark-band .lede,.dark-band .sec-head .mono{color:var(--dark-muted)}
.dark-band .eyebrow{color:var(--dark-muted)}
.hero.page{min-height:74svh}
.hero.page h1{font-size:clamp(44px,6.6vw,108px)}

/* ============ work index ============ */
.proj{display:grid;grid-template-columns:1.25fr .75fr;gap:4vw;align-items:center;padding:7vh 0;border-top:1px solid var(--dark-line);opacity:0;transform:translateY(34px)}
.proj .media{position:relative;overflow:hidden}
.proj .media video,.proj .media img{width:100%;aspect-ratio:16/10;object-fit:cover;transition:transform .8s cubic-bezier(.2,.6,.2,1)}
.proj:hover .media video,.proj:hover .media img{transform:scale(1.04)}
.proj .tag{position:absolute;top:14px;left:14px;font-size:var(--fs-xs);letter-spacing:.14em;background:rgba(10,11,13,.75);padding:6px 10px;display:flex;gap:7px;align-items:center;backdrop-filter:blur(6px)}
.proj .tag .live{width:6px;height:6px;border-radius:50%;background:var(--blue);animation:pulse 1.8s infinite}
.proj h3{font-family:'BringBold',sans-serif;font-weight:400;font-size:clamp(30px,3.4vw,52px);line-height:.98;margin-bottom:14px}
.proj p{font-size:var(--fs-md);color:var(--dark-muted);max-width:40ch;margin-bottom:20px}
.meta{display:flex;flex-direction:column;gap:0;border-top:1px solid var(--dark-line)}
.meta div{display:flex;justify-content:space-between;gap:16px;padding:9px 0;border-bottom:1px solid var(--dark-line);font-size:var(--fs-xs)}
.meta dt,.meta .k{font-family:'IBM Plex Mono',monospace;font-size:var(--fs-xs);letter-spacing:.12em;text-transform:uppercase;color:var(--dark-muted)}
.honest-line{margin-top:8vh;font-size:var(--fs-md);color:var(--dark-muted);max-width:60ch}

/* ============ services ============ */
.lanes{display:grid;grid-template-columns:repeat(2,1fr);gap:2px;background:var(--line);border:1px solid var(--line)}
.lane{background:var(--bg);padding:40px 34px 36px;opacity:0;transform:translateY(28px)}
.lane .num{font-family:'IBM Plex Mono',monospace;font-size:var(--fs-xs);letter-spacing:.14em;color:var(--blue-deep);display:block;margin-bottom:18px}
.lane h3{font-family:'BringBold',sans-serif;font-weight:400;font-size:clamp(26px,2.6vw,40px);margin-bottom:12px;line-height:1}
.lane p{font-size:var(--fs-md);color:var(--muted);margin-bottom:20px;max-width:38ch}
.lane ul{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:7px}
.lane li{font-size:var(--fs-sm);color:var(--muted);display:flex;gap:10px}
.lane li::before{content:'';width:5px;height:5px;border-radius:50%;background:var(--blue);flex:none;margin-top:8px}
.steps-row{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;margin-top:14px}
.stepc{border-top:1.5px solid var(--ink);padding-top:18px;opacity:0;transform:translateY(24px)}
.dark-band .stepc{border-top-color:var(--dark-ink)}
.stepc .num{font-family:'IBM Plex Mono',monospace;font-size:var(--fs-xs);letter-spacing:.14em;color:var(--blue);display:block;margin-bottom:12px}
.stepc h3{font-size:var(--fs-lg);font-weight:600;margin-bottom:7px}
.stepc p{font-size:var(--fs-sm);color:var(--muted)}
.dark-band .stepc p{color:var(--dark-muted)}

/* ============ studio ============ */
.split{display:grid;grid-template-columns:1.05fr .95fr;gap:5vw;align-items:center}
.split .imgwrap{position:relative;overflow:hidden;aspect-ratio:4/5;opacity:0;transform:translateY(26px)}
.split .imgwrap img{position:absolute;inset:0;width:100%;height:118%;object-fit:cover}
.pquote{font-family:'BringBold',sans-serif;font-weight:400;font-size:clamp(28px,3.4vw,54px);line-height:1.04;max-width:20ch}
.factlist{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;margin-top:12px}
.fact{border-top:1px solid var(--line);padding-top:16px;opacity:0;transform:translateY(22px)}
.dark-band .fact{border-top-color:var(--dark-line)}
.fact .k{font-family:'IBM Plex Mono',monospace;font-size:var(--fs-xs);letter-spacing:.14em;text-transform:uppercase;color:var(--muted);display:block;margin-bottom:8px}
.dark-band .fact .k{color:var(--dark-muted)}
.fact p{font-size:var(--fs-md)}

/* ============ contact ============ */
.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:5vw;align-items:start}
.bigmail{font-family:'BringBold',sans-serif;font-size:clamp(30px,4.4vw,68px);line-height:1;display:inline-block;border-bottom:3px solid var(--blue);padding-bottom:6px}
.bigmail:hover{color:var(--blue-deep)}
.clist{display:flex;flex-direction:column;gap:0;margin-top:6vh}
.crow{display:flex;justify-content:space-between;gap:20px;padding:16px 0;min-height:44px;align-items:center;border-bottom:1px solid var(--line);font-size:var(--fs-md)}
.dark-band .crow{border-bottom-color:var(--dark-line)}
.crow .k{font-family:'IBM Plex Mono',monospace;font-size:var(--fs-xs);letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.dark-band .crow .k{color:var(--dark-muted)}

@media(max-width:900px){
  .proj{grid-template-columns:1fr;gap:24px}
  .lanes{grid-template-columns:1fr}
  .steps-row{grid-template-columns:repeat(2,1fr)}
  .split,.contact-grid{grid-template-columns:1fr;gap:36px}
  .factlist{grid-template-columns:1fr}
}
@media(prefers-reduced-motion:reduce){
  .proj,.lane,.stepc,.fact,.split .imgwrap{opacity:1!important;transform:none!important}
}



/* ============ case pages ============ */
a.proj{color:inherit;text-decoration:none}
.proj .go{display:inline-flex;align-items:center;gap:10px;margin-top:24px;font-size:var(--fs-xs);letter-spacing:.14em;text-transform:uppercase;
  color:var(--dark-ink);border-bottom:1.5px solid var(--blue);padding-bottom:5px;transition:color .25s,gap .25s}
a.proj:hover .go{color:var(--blue);gap:16px}
.proj .dur{position:absolute;left:14px;bottom:14px;font-family:'IBM Plex Mono',monospace;font-size:var(--fs-xs);letter-spacing:.1em;
  background:rgba(10,11,13,.75);color:var(--dark-ink);padding:6px 11px;display:flex;gap:8px;align-items:center;backdrop-filter:blur(6px)}
.proj .dur .play{width:0;height:0;border-left:7px solid var(--blue);border-top:5px solid transparent;border-bottom:5px solid transparent}

.backlink{display:inline-flex;align-items:center;gap:10px;min-height:44px;font-family:'IBM Plex Mono',monospace;font-size:var(--fs-xs);
  letter-spacing:.14em;text-transform:uppercase;color:var(--dark-muted);transition:color .25s}
.backlink:hover{color:var(--blue)}

/* the film itself — 16:9, controls, sound */
.filmwrap{position:relative;background:#000;margin-top:34px}
.filmwrap video{width:100%;height:auto;aspect-ratio:16/9;display:block;background:#000}
.filmbar{display:flex;justify-content:space-between;gap:18px;flex-wrap:wrap;margin-top:16px;
  font-family:'IBM Plex Mono',monospace;font-size:var(--fs-xs);letter-spacing:.12em;text-transform:uppercase;color:var(--dark-muted)}

/* case facts + the note */
.casefacts{display:grid;grid-template-columns:repeat(4,1fr);gap:26px;margin-top:7vh}
.casenote{max-width:62ch}
.casenote p{font-size:var(--fs-lg);color:var(--muted);margin-bottom:22px}
.dark-band .casenote p{color:var(--dark-muted)}
.casenote p:last-child{margin-bottom:0}

/* stills gallery */
.gal{display:grid;grid-template-columns:repeat(2,1fr);gap:18px}
.gal.three{grid-template-columns:repeat(3,1fr)}
.gal figure{position:relative;overflow:hidden;background:var(--dark);opacity:0;transform:translateY(30px)}
.gal img{width:100%;height:auto;display:block;transition:transform .9s cubic-bezier(.2,.6,.2,1)}
.gal figure:hover img{transform:scale(1.035)}
.gal figcaption{position:absolute;left:0;right:0;bottom:0;padding:30px 14px 12px;font-family:'IBM Plex Mono',monospace;
  font-size:var(--fs-xs);letter-spacing:.14em;color:#F2F3F4;background:linear-gradient(transparent,rgba(10,11,13,.78))}

/* next project */
.case-next{border-top:1px solid var(--line);padding:9vh 4vw;display:flex;justify-content:space-between;align-items:baseline;gap:24px;flex-wrap:wrap}
.case-next .k{font-family:'IBM Plex Mono',monospace;font-size:var(--fs-xs);letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.case-next a{font-family:'BringBold',sans-serif;font-size:clamp(34px,5vw,76px);line-height:1;transition:color .25s}
.case-next a:hover{color:var(--blue-deep)}

@media(max-width:900px){
  .casefacts{grid-template-columns:repeat(2,1fr)}
  .gal,.gal.three{grid-template-columns:1fr}
}
@media(prefers-reduced-motion:reduce){
  .gal figure{opacity:1!important;transform:none!important}
}


/* small print under the two forms */
.fine-note{font-size:var(--fs-xs);color:var(--muted);margin-top:14px;letter-spacing:.01em;line-height:1.5}
.fine-note a{border-bottom:1px solid currentColor;padding-bottom:1px}
.fine-note a:hover{color:var(--blue-deep)}
.trialcard .fine-note{color:var(--dark-muted)}

/* ============ legal pages ============ */
.legal-head{background:var(--dark);color:var(--dark-ink);padding:20vh 4vw 9vh}
.legal-head .eyebrow{color:var(--dark-muted)}
.legal-head h1{font-family:'BringBold',sans-serif;font-weight:400;font-size:clamp(44px,6.6vw,108px);line-height:.92;margin-top:22px}
.legal-head .sub{margin-top:22px;color:var(--dark-muted);font-size:var(--fs-md)}
.legal-body{max-width:76ch}
.legal-body h2{font-family:'BringBold',sans-serif;font-weight:400;font-size:clamp(24px,2.6vw,38px);line-height:1;margin:60px 0 16px}
.legal-body h2:first-child{margin-top:0}
.legal-body h3{font-size:var(--fs-lg);font-weight:600;margin:28px 0 8px}
.legal-body p{font-size:var(--fs-md);color:var(--muted);margin-bottom:16px}
.legal-body ul{margin:0 0 18px;padding-left:19px;display:flex;flex-direction:column;gap:8px}
.legal-body li{font-size:var(--fs-md);color:var(--muted)}
.legal-body a{border-bottom:1.5px solid var(--blue);padding-bottom:1px}
.legal-body a:hover{color:var(--blue-deep)}
.legal-body strong{color:var(--ink);font-weight:600}
.tablewrap{overflow-x:auto;margin-bottom:22px}
.legal-body table{width:100%;border-collapse:collapse;font-size:var(--fs-sm);min-width:460px}
.legal-body th{text-align:left;font-family:'IBM Plex Mono',monospace;font-size:var(--fs-xs);letter-spacing:.12em;text-transform:uppercase;
  color:var(--muted);border-bottom:1px solid var(--ink);padding:0 18px 10px 0;vertical-align:bottom;font-weight:400}
.legal-body td{border-bottom:1px solid var(--line);padding:13px 18px 13px 0;color:var(--muted);vertical-align:top}
.legal-body th:last-child,.legal-body td:last-child{padding-right:0}
.legal-note{margin-top:64px;padding-top:22px;border-top:1px solid var(--line);font-size:var(--fs-sm);color:var(--muted);max-width:76ch}
.foot-legal{display:flex;gap:20px;flex-wrap:wrap}
.foot-legal a:hover{color:var(--blue-deep)}

/* ============ enquiry form ============ */
.enq{margin-top:34px;display:flex;flex-direction:column;gap:18px;max-width:560px}
.hp{position:absolute;left:-9999px;opacity:0;width:1px;height:1px}
.frow{display:flex;gap:18px;flex-wrap:wrap}
.field{display:flex;flex-direction:column;gap:8px;flex:1 1 100%}
.field.half{flex:1 1 calc(50% - 9px);min-width:200px}
.lbl{font-family:'IBM Plex Mono',monospace;font-size:var(--fs-xs);letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.req{color:var(--blue-deep)}
.enq input,.enq select,.enq textarea{width:100%;background:#FFFDF9;border:1px solid var(--line);color:var(--ink);
  font-family:'Archivo',sans-serif;font-size:var(--fs-md);padding:15px 14px;border-radius:0;min-height:48px}
.enq textarea{min-height:120px;resize:vertical}
.enq select{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1L6 6L11 1' stroke='%230E90C4' stroke-width='1.5' fill='none'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 16px center;background-size:12px;padding-right:40px}
.enq input:focus,.enq select:focus,.enq textarea:focus{outline:2px solid var(--blue-deep);outline-offset:-1px;border-color:transparent}
.enq input::placeholder,.enq textarea::placeholder{color:#A6A79F}
.enq button{align-self:flex-start;cursor:pointer;font-family:'Archivo',sans-serif;min-height:48px}

/* ============ contact trial card ============ */
.trialcard{position:relative;margin-top:6vh;background:var(--dark);color:var(--dark-ink);padding:34px 30px 30px;
  display:flex;flex-direction:column;gap:14px;align-items:flex-start}
.trialcard h3{font-family:'BringBold',sans-serif;font-weight:400;font-size:clamp(24px,2.4vw,34px);line-height:1}
.trialcard p{font-size:var(--fs-sm);color:var(--dark-muted);max-width:40ch}
.trialcard .btn.primary{background:var(--blue);border-color:var(--blue);color:#070707;margin-top:6px}
.trialcard .btn.primary:hover{background:var(--dark-ink);border-color:var(--dark-ink)}
.trialcard .fine{font-size:var(--fs-xs);letter-spacing:.14em;color:var(--dark-muted)}
.tstamp{position:absolute;right:26px;top:26px;font-family:'BringBold',sans-serif;font-size:34px;color:var(--blue);line-height:1}


/* ============ mobile menu ============ */
.burger{display:none;width:44px;height:44px;border:0;background:none;padding:0;cursor:pointer;
  flex-direction:column;justify-content:center;align-items:flex-end;gap:6px}
.burger span{display:block;width:26px;height:2px;background:currentColor;transition:transform .32s cubic-bezier(.7,0,.3,1),opacity .2s}
.burger[aria-expanded="true"] span:first-child{transform:translateY(4px) rotate(45deg)}
.burger[aria-expanded="true"] span:last-child{transform:translateY(-4px) rotate(-45deg)}
.menu{position:fixed;inset:0;z-index:19;background:var(--dark);color:var(--dark-ink);
  display:flex;flex-direction:column;justify-content:center;padding:14vh 6vw 6vh;
  opacity:0;transition:opacity .3s ease}
/* display:flex above beats the browser default [hidden]{display:none}, which
   left a full-screen invisible overlay swallowing every click on the page. */
.menu[hidden]{display:none}
.menu.open{opacity:1}
.menu-links{display:flex;flex-direction:column;gap:4px}
.menu-links a{font-family:'BringBold',sans-serif;font-size:clamp(38px,12vw,64px);line-height:1.06;
  padding:8px 0;opacity:0;transform:translateY(22px);min-height:44px}
.menu.open .menu-links a{opacity:1;transform:none;transition:opacity .4s ease,transform .4s cubic-bezier(.2,.7,.3,1)}
.menu.open .menu-links a:nth-child(1){transition-delay:.06s}
.menu.open .menu-links a:nth-child(2){transition-delay:.11s}
.menu.open .menu-links a:nth-child(3){transition-delay:.16s}
.menu.open .menu-links a:nth-child(4){transition-delay:.21s}
.menu.open .menu-links a:nth-child(5){transition-delay:.26s;color:var(--blue)}
.menu-links a[aria-current="page"]{color:var(--blue)}
.menu-foot{margin-top:auto;padding-top:6vh;display:flex;flex-direction:column;gap:10px;
  font-size:var(--fs-md);color:var(--dark-muted)}
.menu-foot a{min-height:44px;display:inline-flex;align-items:center}
body.menu-open{overflow:hidden}

@media(max-width:900px){
  .burger{display:flex}
  .nav{gap:14px}
  .nav .cta-pill{margin-left:auto}
  /* home work grid becomes a swipeable rail instead of a 3-viewport stack */
  .tiles{display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;
    margin:0 -4vw;padding:0 4vw 10px;-webkit-overflow-scrolling:touch}
  .tiles::-webkit-scrollbar{display:none}
  .tile,.tile.tall{flex:0 0 78%;grid-column:auto;scroll-snap-align:start}
  .tile video,.tile img,.tile.tall video,.tile.tall img{aspect-ratio:3/4}
  .work .head{margin-bottom:30px}
  .work{padding:10vh 4vw}
  .hero-inner{padding-bottom:9vh}
  .hero .sub{margin-top:20px}
  .cta-row{margin-top:24px;gap:10px}
  .btn{padding:15px 22px}
  footer .big{font-size:clamp(38px,10vw,60px)}
  .foot-base{margin-top:5vh}
  .trial,.craft,.section{padding-top:10vh;padding-bottom:10vh}
}
@media(prefers-reduced-motion:reduce){
  .menu-links a{opacity:1!important;transform:none!important}
}