@font-face{font-family:'General Sans';src:url(../fonts/GeneralSans-Regular.woff) format('woff');font-weight:400;font-display:swap}@font-face{font-family:'General Sans';src:url(../fonts/GeneralSans-Medium.woff) format('woff');font-weight:500;font-display:swap}@font-face{font-family:'General Sans';src:url(../fonts/GeneralSans-Semibold.woff) format('woff');font-weight:600;font-display:swap}@font-face{font-family:'Geist Mono';src:url(../fonts/GeistMono-Regular.woff2) format('woff2');font-weight:400;font-display:swap}@font-face{font-family:'Geist Mono';src:url(../fonts/GeistMono-SemiBold.woff2) format('woff2');font-weight:600;font-display:swap}
:root{
  --bg:#EEEDEA;--ink:#161616;--ink2:#5E5E5C;--ink3:#8C8C89;--rule:#D3D2CE;--line:38,38,36;
  --dark:#0E0E0E;--on:#EDECE8;--on2:#9C9C98;--on3:#6E6E6B;--rule-d:#2A2A29;
  --pad:32px;--ease:cubic-bezier(.2,.7,.2,1);
}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){--bg:#EEEDEA}}
:root[data-theme="dark"]{--bg:#EEEDEA}
*{box-sizing:border-box;margin:0;padding:0}
html{background:var(--bg);scroll-behavior:smooth;overflow-x:clip}
body{background:var(--bg);color:var(--ink);font-family:'General Sans',system-ui,sans-serif;-webkit-font-smoothing:antialiased;overflow-x:clip}
img{display:block;max-width:100%}
a{color:inherit}
.mono{font-family:'Geist Mono',ui-monospace,monospace;font-size:11px;letter-spacing:.04em;text-transform:uppercase;line-height:15px}
.arrow{width:8px;height:8px;fill:none;stroke:currentColor;stroke-width:1.4;flex:none;transition:transform .35s var(--ease)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

/* ---------- header (fixed, inverts over dark sections) ---------- */
.site-head{position:fixed;top:0;left:0;right:0;z-index:50;display:grid;grid-template-columns:1fr auto 1fr;align-items:start;padding:24px var(--pad);mix-blend-mode:difference;color:#fff;pointer-events:none}
.site-head>*{pointer-events:auto}
.site-head{transition:transform .5s var(--ease)}
.site-head.up{transform:translateY(-110%)}
.coord{transition:opacity .4s}.past .coord{opacity:0}
.brand{display:block;width:99px;height:15px;color:#fff}
.brand svg{width:99px;height:15px;display:block}
.coord{display:flex;gap:10px;align-items:flex-start;color:#B0B0B0}
.coord i{width:6px;height:9px;background:#fff;margin-top:3px;display:block}
.coord b{font-weight:400;display:block}
.site-nav{justify-self:end;display:flex;gap:24px}
.site-nav a{display:inline-flex;align-items:center;gap:6px;color:#A8A8A8;text-decoration:none;transition:color .2s}
.site-nav a:hover,.site-nav a[aria-current]{color:#fff;font-weight:600}
.site-nav a:hover .arrow{transform:translate(2px,-2px)}
.menu-btn{display:none;justify-self:end;background:none;border:0;color:#fff;cursor:pointer;padding:0;line-height:15px}
a:focus-visible,button:focus-visible{outline:1px solid currentColor;outline-offset:4px}

/* mobile menu */
.menu{position:fixed;inset:0;z-index:60;background:var(--dark);color:var(--on);display:flex;flex-direction:column;justify-content:space-between;padding:20px 16px 32px;opacity:0;visibility:hidden;transition:opacity .35s var(--ease),visibility .35s}
.menu.open{opacity:1;visibility:visible}
.menu-top{display:flex;justify-content:space-between;align-items:center}
.menu-top svg.wm{width:99px;height:15px;color:var(--on)}
.menu-top button{background:none;border:0;color:var(--on);cursor:pointer}
.menu ul{list-style:none;display:flex;flex-direction:column;gap:6px}
.menu ul a{display:flex;justify-content:space-between;align-items:center;text-decoration:none;font-size:40px;font-weight:500;letter-spacing:-.02em;padding:6px 0;border-bottom:1px solid var(--rule-d)}
.menu ul a .arrow{width:14px;height:14px}

/* ---------- buttons ---------- */
.btn{font-family:'General Sans',sans-serif;text-transform:none;letter-spacing:0;line-height:1;display:inline-flex;align-items:center;justify-content:center;gap:10px;height:52px;padding:0 26px;border:0;border-radius:999px;background:var(--ink);color:#F2F1EE;text-decoration:none;font-size:15px;font-weight:500;white-space:nowrap;cursor:pointer;box-shadow:inset 0 0 0 4px var(--ink),inset 0 0 0 5px rgba(255,255,255,.2);transition:box-shadow .3s,transform .3s var(--ease)}
.btn .arrow{width:9px;height:9px}
.btn:hover{box-shadow:inset 0 0 0 4px var(--ink),inset 0 0 0 5px rgba(255,255,255,.55)}
.btn:hover .arrow{transform:translate(2px,-2px)}
.btn:active{transform:scale(.98)}
.dark .btn{background:var(--on);color:var(--dark);box-shadow:inset 0 0 0 4px var(--on),inset 0 0 0 5px rgba(0,0,0,.18)}
.dark .btn:hover{box-shadow:inset 0 0 0 4px var(--on),inset 0 0 0 5px rgba(0,0,0,.5)}
.btn.back .arrow{transform:rotate(-135deg)}
.btn.back:hover .arrow{transform:rotate(-135deg) translate(2px,-2px)}
.btn.up .arrow{transform:rotate(-45deg)}
.btn.up:hover .arrow{transform:rotate(-45deg) translate(2px,-2px)}

/* ---------- hero ---------- */
.hero{position:relative;height:100svh;min-height:560px;overflow:hidden}
.hero canvas{position:absolute;inset:0;width:100%;height:100%;display:block;cursor:default}
.hud{position:absolute;left:0;top:0;z-index:1;pointer-events:none;opacity:0;will-change:transform;mix-blend-mode:difference;color:#fff}
.hud span{position:absolute;left:14px;white-space:nowrap;font-size:10px;line-height:13px}
.hud span:nth-of-type(1){top:6px}.hud span:nth-of-type(2){top:19px;color:#bdbdbd}
.hud b{font-weight:400}
.hud.flip span{left:auto;right:14px;text-align:right}
.copy{position:absolute;left:var(--pad);right:var(--pad);bottom:clamp(48px,9vh,96px);z-index:2;display:flex;flex-direction:column;align-items:flex-start;gap:28px}
.hero h1{font-weight:500;font-size:clamp(20px,1.9vw,28px);line-height:1.28;letter-spacing:-.01em;max-width:26ch;text-wrap:pretty}
.hero h1 .w{display:inline-block;opacity:0;transform:translateY(.4em);transition:opacity .9s var(--ease),transform .9s var(--ease)}
.on h1 .w{opacity:1;transform:none}
.meta{display:flex;flex-direction:column;align-items:flex-start;gap:6px;color:var(--ink2)}
.meta .row{display:flex;align-items:center;gap:28px;margin-top:10px;flex-wrap:wrap}
.meta .rule{width:min(360px,100%);height:1px;background:var(--ink3);opacity:.5;margin:6px 0}
.fade{opacity:0;transition:opacity 1.2s ease .9s}.on .fade{opacity:1}

/* ---------- sections ---------- */
section.s{position:relative;padding:clamp(96px,13vw,180px) var(--pad)}
.dark{background:var(--dark);color:var(--on)}
.light{background:var(--bg);color:var(--ink)}
.s-head{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:24px;align-items:end;margin-bottom:clamp(48px,6vw,88px)}
.label{grid-column:1/4;color:var(--ink2)}
.dark .label{color:var(--on2)}
.s-title{grid-column:4/13;font-size:clamp(40px,6.4vw,104px);font-weight:500;letter-spacing:-.02em;line-height:.95}
.lede{font-size:clamp(18px,1.6vw,24px);line-height:1.35;font-weight:500;letter-spacing:-.01em;max-width:36ch;text-wrap:pretty}
.body{font-size:16px;line-height:1.55;color:var(--ink2);max-width:52ch;text-wrap:pretty}
.dark .body{color:var(--on2)}

/* about */
.about-grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:24px}
.about-grid .label{grid-column:1/4}
.about-text{grid-column:4/12}
.statement{font-size:clamp(28px,3.6vw,56px);font-weight:500;letter-spacing:-.016em;line-height:1.05;text-wrap:balance}
.statement em{font-style:normal;color:var(--on3)}
.about-text .body{margin-top:32px}
.clients{grid-column:4/13;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));margin-top:clamp(64px,8vw,120px);border-top:1px solid var(--rule-d)}
.clients li{list-style:none;display:flex;justify-content:space-between;gap:12px;padding:18px 24px 18px 0;border-bottom:1px solid var(--rule-d);color:var(--on)}
.clients li:not(:nth-child(3n+1)){padding-left:24px;border-left:1px solid var(--rule-d)}
.clients li span:last-child{color:var(--on3)}

/* work */
section.s.work{padding-left:0;padding-right:0}
.work .s-head,.work .filters,.also{margin-left:var(--pad);margin-right:var(--pad)}
.work .s-head .lede{grid-column:9/13;align-self:end;font-size:16px;line-height:1.45;color:var(--ink2);font-weight:400}
.work .s-title{grid-column:1/9}
.filters{display:flex;justify-content:space-between;align-items:center;gap:16px;margin-bottom:20px}
.seg{position:relative;display:inline-grid;grid-auto-flow:column;grid-auto-columns:1fr;padding:4px;border-radius:999px;background:#F8F7F5;box-shadow:0 1px 2px rgba(0,0,0,.04),0 8px 24px rgba(0,0,0,.05)}
.seg button{position:relative;z-index:1;border:0;background:none;height:40px;padding:0 20px;border-radius:999px;font:500 14px/1 'General Sans',sans-serif;color:#9A9A97;cursor:pointer;white-space:nowrap;transition:color .3s}
.seg button[aria-pressed="true"]{color:#F2F1EE}
.seg i{position:absolute;z-index:0;top:4px;bottom:4px;left:0;border-radius:999px;background:var(--ink);transition:transform .45s var(--ease),width .45s var(--ease)}
.count{color:var(--ink3)}
.wall{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:3px}
.tile{position:relative;display:block;overflow:hidden;background:#111;text-decoration:none;color:#fff;aspect-ratio:16/10;transition:opacity .4s var(--ease)}
.tile img{width:100%;height:100%;object-fit:cover;transition:transform 1.1s var(--ease),opacity .5s}
.tile .cap{position:absolute;left:0;right:0;bottom:0;display:flex;justify-content:space-between;align-items:flex-end;gap:16px;padding:18px 20px;background:linear-gradient(transparent,rgba(0,0,0,.6));opacity:0;transform:translateY(8px);transition:opacity .4s var(--ease),transform .5s var(--ease)}
.tile .cap h3{font-size:20px;font-weight:500;letter-spacing:-.01em;line-height:1.15}
.tile .cap p{color:#C9C9C6;margin-top:4px}
.tile .idx{position:absolute;top:14px;left:16px;color:rgba(255,255,255,.75);opacity:0;transition:opacity .4s}
.tile .cap .arrow{width:10px;height:10px;margin-bottom:6px}
.tile:hover img,.tile:focus-visible img{transform:scale(1.035)}
.tile:hover .cap,.tile:hover .idx,.tile:focus-visible .cap,.tile:focus-visible .idx{opacity:1;transform:none}
.tile.hide{display:none}
.also{margin-top:clamp(80px,9vw,140px);display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:24px}
.also .label{grid-column:1/4}
.also ul{grid-column:4/13;list-style:none;border-top:1px solid var(--rule)}
.also li{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr) minmax(0,1.2fr);gap:24px;padding:16px 0;border-bottom:1px solid var(--rule);align-items:baseline}
.also li b{font-weight:500;font-size:18px;letter-spacing:-.01em}
.also li span{color:var(--ink2)}

/* expertise */
.xp{list-style:none;border-top:1px solid var(--rule-d)}
.xp li{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:24px;align-items:center;padding:clamp(18px,2.2vw,30px) 0;border-bottom:1px solid var(--rule-d);transition:color .3s}
.xp .n{grid-column:1/4;color:var(--on3)}
.xp h3{grid-column:4/10;font-size:clamp(28px,4.2vw,68px);font-weight:500;letter-spacing:-.02em;line-height:1;transition:transform .5s var(--ease)}
.xp p{grid-column:10/13;color:var(--on2);font-size:15px;line-height:1.45}
.xp li:hover h3{transform:translateX(14px)}
.xp li:hover .n{color:var(--on)}

/* sectors */
.sectors{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px}
.sector{border-top:1px solid var(--ink);padding-top:18px;display:flex;flex-direction:column;gap:56px}
.sector .n{color:var(--ink3)}
.sector h3{font-size:clamp(24px,2.2vw,34px);font-weight:500;letter-spacing:-.014em;line-height:1.05}
.sector p{margin-top:14px;font-size:15px;line-height:1.5;color:var(--ink2);text-wrap:pretty}

/* defense product presentation */
.dpp-grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:24px;align-items:start}
.dpp-grid .label{grid-column:1/4}
.dpp-text{grid-column:4/10}
.dpp-text .s-title{font-size:clamp(40px,5.6vw,92px)}
.dpp-text .body{margin-top:32px;font-size:18px;max-width:46ch}
.dpp-list{grid-column:4/13;margin-top:56px;list-style:none;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-top:1px solid var(--rule-d)}
.dpp-list li{padding:16px 0;border-bottom:1px solid var(--rule-d);display:flex;gap:14px;color:var(--on)}
.dpp-list li span{color:var(--on3)}
.dpp-cta{grid-column:4/13;margin-top:48px;display:flex;align-items:center;gap:24px;flex-wrap:wrap}
.dpp-cta .mono{color:var(--on3)}
.strip{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:3px;margin:clamp(72px,8vw,120px) calc(var(--pad)*-1) 0}
.strip figure{background:#000;display:flex;align-items:center;justify-content:center;overflow:hidden}
.strip img{width:100%;height:auto;transition:transform 1.2s var(--ease)}
.strip figure:hover img{transform:scale(1.04)}
.strip-cap{display:flex;justify-content:space-between;margin-top:14px;color:var(--on3)}

/* research */
.rs{list-style:none;border-top:1px solid var(--ink)}
.rs a{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:24px;padding:clamp(22px,2.6vw,36px) 0;border-bottom:1px solid var(--rule);text-decoration:none;align-items:baseline}
.rs .n{grid-column:1/4;color:var(--ink3)}
.rs h3{grid-column:4/9;font-size:clamp(24px,2.6vw,40px);font-weight:500;letter-spacing:-.014em;line-height:1.05;transition:transform .5s var(--ease)}
.rs p{grid-column:9/12;font-size:15px;line-height:1.45;color:var(--ink2)}
.rs .go{grid-column:12/13;justify-self:end;display:inline-flex;align-items:center;gap:6px;color:var(--ink2)}
.rs a:hover h3{transform:translateX(10px)}
.rs a:hover .go{color:var(--ink);font-weight:600}
.rs a:hover .arrow{transform:translate(2px,-2px)}

/* contact / footer */
.contact{padding-bottom:32px}
.contact-grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:24px;align-items:end}
.contact-grid .label{grid-column:1/4;align-self:start}
.contact-grid h2{grid-column:4/13;font-size:clamp(44px,8vw,140px);font-weight:500;letter-spacing:-.022em;line-height:.92}
.contact-row{grid-column:4/13;display:flex;gap:16px;flex-wrap:wrap;align-items:center;margin-top:40px}
.contact-row .mono{color:var(--on3);margin-left:8px}
.foot{margin-top:clamp(120px,14vw,220px)}
.foot .big{width:100%;height:auto;color:var(--on);display:block}
.foot-row{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px;margin-top:28px;padding-top:16px;border-top:1px solid var(--rule-d);color:var(--on3)}
.foot-row a{text-decoration:none;color:var(--on2)}
.foot-row a:hover{color:var(--on)}
.foot-row div{display:flex;flex-direction:column;gap:4px}

/* reveal */
[data-r]{opacity:0;transform:translateY(18px);transition:opacity 1s var(--ease),transform 1s var(--ease)}
[data-r].in{opacity:1;transform:none}

/* ---------- responsive ---------- */
@media (max-width:1020px){
  .sectors{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:48px}
  .wall{grid-template-columns:repeat(2,minmax(0,1fr))}
  .xp p{grid-column:4/13}
  .xp h3{grid-column:4/13}
}
@media (max-width:760px){
  :root{--pad:16px}
  .site-head{grid-template-columns:1fr auto;padding:18px var(--pad)}
  .coord,.site-nav{display:none}
  .menu-btn{display:block}
  .copy{bottom:48px;grid-template-columns:1fr}
  .meta{text-align:left;align-items:flex-start}
  .hero h1{font-size:20px;max-width:30ch}
  .s-head,.about-grid,.also,.dpp-grid,.contact-grid{grid-template-columns:1fr;gap:16px}
  .s-head>*,.about-grid>*,.also>*,.dpp-grid>*,.contact-grid>*{grid-column:1/-1 !important}
  .label{margin-bottom:8px}
  .clients{grid-template-columns:1fr 1fr}
  .clients li:not(:nth-child(3n+1)){padding-left:0;border-left:0}
  .clients li:nth-child(even){padding-left:16px;border-left:1px solid var(--rule-d)}
  .clients li{padding-right:12px}
  .filters{flex-direction:column;align-items:flex-start;overflow-x:auto}
  .seg button{padding:0 14px;font-size:13px;height:36px}
  .wall{grid-template-columns:1fr;gap:24px}
  .tile{aspect-ratio:auto;background:none;color:var(--ink);overflow:visible}
  .tile img{aspect-ratio:16/10;height:auto}
  .tile .cap{position:static;opacity:1;transform:none;background:none;padding:12px var(--pad) 0}
  .tile .cap h3{font-size:18px}.tile .cap p{color:var(--ink2)}
  .tile .idx{display:none}
  .also li{grid-template-columns:1fr;gap:2px}
  .xp li{grid-template-columns:1fr;gap:6px}
  .xp li>*{grid-column:1/-1 !important}
  .sectors{grid-template-columns:1fr}
  .sector{gap:20px}
  .dpp-list{grid-template-columns:1fr}
  .strip{grid-template-columns:1fr}
  .rs a{grid-template-columns:1fr auto;gap:8px}
  .rs .n{grid-column:1/2}.rs .go{grid-column:2/3;grid-row:1}
  .rs h3,.rs p{grid-column:1/-1}
  .foot-row{grid-template-columns:1fr 1fr;row-gap:24px}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  [data-r]{opacity:1;transform:none;transition:none}
  .hero h1 .w{transition:none}
}

/* ======== multi-page additions ======== */
.pagetop{padding:clamp(120px,14vw,200px) var(--pad) clamp(56px,6vw,96px)}
.back-row{display:flex;align-items:center;gap:20px;flex-wrap:wrap;margin-bottom:clamp(48px,6vw,96px)}
.crumb{color:var(--ink3)}.crumb a{text-decoration:none;color:var(--ink2)}.crumb a:hover{color:var(--ink)}
.p-title{font-size:clamp(48px,9vw,156px);font-weight:500;letter-spacing:-.022em;line-height:.9}
.p-grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:24px;margin-top:clamp(40px,5vw,72px)}
.p-meta{grid-column:1/5;list-style:none;border-top:1px solid var(--ink)}
.p-meta li{display:grid;grid-template-columns:110px 1fr;gap:16px;padding:12px 0;border-bottom:1px solid var(--rule)}
.p-meta li span:first-child{color:var(--ink3)}
.p-text{grid-column:6/13}
.p-text .lede{max-width:30ch;font-size:clamp(22px,2.2vw,32px);line-height:1.2}
.p-text .body{margin-top:24px;font-size:17px;max-width:58ch}
.gallery{background:var(--dark);padding:3px 0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:3px}
.gallery figure{background:#000;display:flex;align-items:center;justify-content:center;overflow:hidden}
.gallery figure.full{grid-column:1/-1}
.gallery img{width:100%;height:auto}
.next{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:24px;align-items:end;text-decoration:none;color:inherit}
.next .label{grid-column:1/4}
.next h2{grid-column:4/9;font-size:clamp(40px,6vw,96px);font-weight:500;letter-spacing:-.02em;line-height:.95;transition:transform .5s var(--ease)}
.next .thumb{grid-column:9/13;aspect-ratio:16/10;overflow:hidden;background:#111}
.next .thumb img{width:100%;height:100%;object-fit:cover;transition:transform 1s var(--ease)}
.next:hover h2{transform:translateX(12px)}.next:hover .thumb img{transform:scale(1.04)}
.cta-band{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:24px;align-items:end}
.cta-band .label{grid-column:1/4;align-self:start}
.cta-band h2{grid-column:4/13;font-size:clamp(44px,8vw,140px);font-weight:500;letter-spacing:-.022em;line-height:.92}
.cta-band .contact-row{grid-column:4/13}
.more{display:flex;justify-content:space-between;align-items:center;gap:16px;margin:clamp(40px,5vw,64px) var(--pad) 0;flex-wrap:wrap}
.more .mono{color:var(--ink3)}
/* about */
.team{list-style:none;border-top:1px solid var(--rule-d)}
.team li{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:24px;align-items:baseline;padding:clamp(16px,2vw,26px) 0;border-bottom:1px solid var(--rule-d)}
.team .n{grid-column:1/4;color:var(--on3)}
.team h3{grid-column:4/13;font-size:clamp(28px,4.4vw,72px);font-weight:500;letter-spacing:-.02em;line-height:1}
.dl2{grid-column:4/13;list-style:none;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:24px;border-top:1px solid var(--rule)}
.dl2 li{display:grid;grid-template-columns:40px 1fr;gap:12px;padding:16px 0;border-bottom:1px solid var(--rule)}
.dl2 li span{color:var(--ink3)}
.dl2 b{font-weight:500;font-size:18px;letter-spacing:-.01em;display:block}
.dl2 p{color:var(--ink2);font-size:15px;line-height:1.45;margin-top:4px}
.clients.on-light{border-top-color:var(--rule)}
.clients.on-light li{color:var(--ink);border-color:var(--rule)}
.clients.on-light li:not(:nth-child(3n+1)){border-left-color:var(--rule)}
.clients.on-light li span:last-child{color:var(--ink3)}
/* article */
.article{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:24px}
.article header{grid-column:1/13}
.a-title{font-size:clamp(40px,6.6vw,112px);font-weight:500;letter-spacing:-.02em;line-height:.95;max-width:16ch;text-wrap:balance}
.a-meta{display:flex;gap:24px;flex-wrap:wrap;color:var(--ink3);margin-top:28px}
.a-body{grid-column:4/11;margin-top:clamp(56px,6vw,96px)}
.a-body p{font-size:19px;line-height:1.6;color:#2A2A29;margin-bottom:1.1em;max-width:62ch;text-wrap:pretty}
.a-body p.lead{font-size:clamp(22px,2vw,28px);line-height:1.35;font-weight:500;color:var(--ink);letter-spacing:-.01em}
.a-body h2{font-size:clamp(24px,2.2vw,32px);font-weight:500;letter-spacing:-.02em;margin:2em 0 .6em}
.a-body blockquote{margin:1.6em 0;padding-left:24px;border-left:1px solid var(--ink);font-size:clamp(22px,2vw,30px);line-height:1.25;font-weight:500;letter-spacing:-.015em;max-width:30ch}
/* contact */
.c-grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:24px}
.c-side{grid-column:1/5;display:flex;flex-direction:column;gap:28px}
.c-side .body{max-width:34ch}
.c-side ul{list-style:none;border-top:1px solid var(--rule-d)}
.c-side li{display:flex;justify-content:space-between;padding:14px 0;border-bottom:1px solid var(--rule-d)}
.c-side li a{text-decoration:none;color:var(--on)}.c-side li span{color:var(--on3)}
form.cf{grid-column:6/13;display:grid;grid-template-columns:1fr 1fr;gap:28px 24px}
.cf label{display:flex;flex-direction:column;gap:10px;color:var(--on3)}
.cf .wide{grid-column:1/-1}
.cf input,.cf select,.cf textarea{font:500 18px/1.3 'General Sans',sans-serif;color:var(--on);background:transparent;border:0;border-bottom:1px solid var(--rule-d);padding:10px 0;border-radius:0;outline:none;transition:border-color .3s;width:100%}
.cf select{appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--on2) 50%),linear-gradient(135deg,var(--on2) 50%,transparent 50%);background-position:calc(100% - 12px) 55%,calc(100% - 7px) 55%;background-size:5px 5px;background-repeat:no-repeat}
.cf select option{background:var(--dark);color:var(--on)}
.cf textarea{min-height:140px;resize:vertical}
.cf input:focus,.cf select:focus,.cf textarea:focus{border-bottom-color:var(--on)}
.cf .send{grid-column:1/-1;display:flex;align-items:center;gap:20px;flex-wrap:wrap}

.cf .status{color:var(--on2)}
.hp{display:none}
@media (max-width:760px){
  .p-grid,.next,.cta-band,.article,.c-grid{grid-template-columns:1fr;gap:16px}
  .p-grid>*,.next>*,.cta-band>*,.article>*,.c-grid>*{grid-column:1/-1 !important}
  .p-meta li{grid-template-columns:96px 1fr}
  .gallery{grid-template-columns:1fr}
  .team li{grid-template-columns:1fr;gap:4px}.team li>*{grid-column:1/-1}
  .dl2{grid-template-columns:1fr}
  form.cf{grid-template-columns:1fr}
  .a-body p{font-size:17px}
}

/* ======== round 3 ======== */
/* hero: text left, button right */
.copy{flex-direction:row !important;justify-content:space-between;align-items:flex-end !important;gap:32px}
.copy .left{display:flex;flex-direction:column;gap:28px}
.copy .cta-r{opacity:0;transition:opacity 1.2s ease 1.1s}.on .copy .cta-r{opacity:1}
/* work on black */
.work.dark .s-head .lede{color:var(--on2)}
.work.dark .tile{background:#000}
.more .mono{color:var(--ink3)}.dark .more .mono{color:var(--on3)}
/* contributed list */
.contrib{list-style:none;border-top:1px solid var(--rule)}
.dark .contrib{border-top-color:var(--rule-d)}
.contrib li{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr) minmax(0,1.2fr);gap:24px;padding:16px 0;border-bottom:1px solid var(--rule);align-items:baseline}
.dark .contrib li{border-bottom-color:var(--rule-d)}
.contrib li b{font-weight:500;font-size:clamp(17px,1.4vw,20px);letter-spacing:-.01em}
.contrib li span{color:var(--ink2)}
.dark .contrib li span{color:var(--on2)}
.contrib li .mono{color:var(--ink3)}.dark .contrib li .mono{color:var(--on3)}
/* filter: smoother */
.seg i{transition:transform .6s cubic-bezier(.65,0,.15,1),width .6s cubic-bezier(.65,0,.15,1)}
.seg button{transition:color .45s var(--ease)}
.wall{transition:opacity .28s var(--ease)}
.wall.fading{opacity:0}
.tile.enter{animation:tileIn .7s var(--ease) both}
@keyframes tileIn{from{opacity:0;transform:translateY(16px) scale(.985)}to{opacity:1;transform:none}}
/* pager (bottom buttons) */
.pager{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;padding:28px var(--pad);border-top:1px solid var(--rule)}
.dark .pager,.pager.dark{border-top-color:var(--rule-d)}
.pager .nxt{display:flex;align-items:center;gap:20px;text-decoration:none;color:inherit}
.pager .nxt small{display:block;color:var(--ink3)}
.dark .pager .nxt small,.pager.dark .nxt small{color:var(--on3)}
/* next project block */
.nextp{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:24px;align-items:end}
.nextp .label{grid-column:1/4;align-self:start}
.nextp h2{grid-column:4/9;font-size:clamp(40px,6vw,96px);font-weight:500;letter-spacing:-.02em;line-height:.95}
.nextp .thumb{grid-column:9/13;aspect-ratio:16/10;overflow:hidden;background:#111;display:block}
.nextp .thumb img{width:100%;height:100%;object-fit:cover;transition:transform 1s var(--ease)}
.nextp .thumb:hover img{transform:scale(1.04)}
.nextp .btns{grid-column:4/13;display:flex;gap:12px;flex-wrap:wrap;margin-top:8px}
/* slider */
.viewer{background:var(--dark);color:var(--on);padding:0 var(--pad) 32px}
.stage{position:relative;height:min(78vh,62vw);min-height:280px;background:#000;overflow:hidden;user-select:none;touch-action:pan-y}
.stage img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;opacity:0;transform:scale(1.015);transition:opacity .7s var(--ease),transform 1.1s var(--ease)}
.stage img.cur{opacity:1;transform:none}
.stage .nav{position:absolute;top:0;bottom:0;width:30%;border:0;background:none;cursor:pointer;z-index:2}
.stage .nav.prev{left:0;cursor:w-resize}.stage .nav.next{right:0;cursor:e-resize}
.v-bar{display:flex;justify-content:space-between;align-items:center;gap:16px;padding-top:16px}
.v-ctrl{display:flex;gap:8px}
.v-ctrl .btn{width:48px;padding:0}
.v-ctrl .btn.back .arrow,.v-ctrl .btn .arrow{width:10px;height:10px}
.thumbs{display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;flex:1;min-width:0}
.thumbs::-webkit-scrollbar{display:none}
.thumbs button{flex:none;width:86px;aspect-ratio:16/10;border:0;padding:0;background:#000;cursor:pointer;opacity:.4;transition:opacity .3s;outline-offset:2px}
.thumbs button img{width:100%;height:100%;object-fit:cover;display:block}
.thumbs button[aria-current="true"],.thumbs button:hover{opacity:1}
.progress{height:1px;background:var(--rule-d);margin-top:16px;position:relative;overflow:hidden}
.progress i{position:absolute;left:0;top:0;bottom:0;background:var(--on);transition:width .6s var(--ease)}
@media (max-width:760px){
  .copy{flex-direction:column !important;align-items:flex-start !important}
  .contrib li{grid-template-columns:1fr;gap:2px}
  .nextp{grid-template-columns:1fr}.nextp>*{grid-column:1/-1 !important}
  .stage{height:62vw}
  .thumbs button{width:64px}
  .pager{flex-direction:column;align-items:flex-start}
}
.s:not(.work) .also{margin-left:0;margin-right:0}
.btn.back .arrow,.btn.up .arrow{order:-1}
.v-ctrl .btn:not(.back) .arrow{transform:rotate(45deg)}
.v-ctrl .btn:not(.back):hover .arrow{transform:rotate(45deg) translate(2px,-2px)}

/* ======== round 4 ======== */
.pagetop{padding:clamp(96px,9vw,128px) var(--pad) clamp(40px,4vw,64px)}
.back-row{margin-bottom:clamp(28px,3vw,44px)}
.p-title{font-size:clamp(44px,6.4vw,104px)}
.p-grid{margin-top:clamp(28px,3vw,44px)}
.p-text .lede{font-size:clamp(20px,1.8vw,26px)}
.gallery{display:flex;flex-direction:column;gap:3px;padding:0;background:var(--dark)}
.gallery figure{background:#000;display:flex;justify-content:center;align-items:center}
.gallery img{width:auto;max-width:100%;max-height:94vh;height:auto}
.foot{border-top:1px solid var(--rule-d);padding-top:clamp(56px,6vw,96px);margin-top:clamp(80px,9vw,140px)}
.foot-row{border-top:0;padding-top:0}
.rs .thumb{grid-column:1/4;width:clamp(72px,8vw,120px);aspect-ratio:4/5;overflow:hidden;background:#111}
.rs .thumb img{width:100%;height:100%;object-fit:cover;transition:transform 1s var(--ease)}
.rs a:hover .thumb img{transform:scale(1.06)}
.rs a{align-items:center}
.a-hero{grid-column:4/11;margin-top:clamp(40px,5vw,72px);background:#000;overflow:hidden}
.a-hero img{width:100%;height:auto;max-height:86vh;object-fit:cover}
/* gsap helpers */
.gsap [data-r].g{opacity:1;transform:none;transition:none}
.split-line{overflow:hidden;padding-bottom:.06em;margin-bottom:-.06em}
.pt{position:fixed;inset:0;z-index:100;background:var(--dark);transform-origin:50% 0;pointer-events:none}
.pt svg{position:absolute;left:50%;top:50%;width:120px;height:18px;margin:-9px 0 0 -60px;color:var(--on)}
@media (max-width:760px){.rs .thumb{grid-column:1/2;width:64px}.a-hero{grid-column:1/-1}}
.gsap .btn{transition:box-shadow .3s}
@media (max-width:760px){.dark .tile{color:var(--on)}.dark .tile .cap p{color:var(--on3)}}

/* ======== round 5 ======== */
::selection{background:var(--ink);color:var(--bg)}
.dark ::selection,.dark::selection{background:var(--on);color:var(--dark)}
.foot{margin-top:clamp(56px,6vw,96px);padding-top:clamp(32px,4vw,56px)}
section.contact{padding-bottom:20px}
.foot-row{margin-top:20px}
.gallery video{display:block;width:100%;max-height:94vh;background:#000}
.hero h1 .w{will-change:transform}
/* loader */
.ld{position:fixed;inset:0;z-index:200;background:var(--dark);color:var(--on);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:28px}
.ld svg{width:min(320px,62vw);height:auto;overflow:visible}
.ld svg path{fill:transparent;stroke:var(--on);stroke-width:2.2;vector-effect:non-scaling-stroke}
.ld .ld-row{position:absolute;left:var(--pad);right:var(--pad);bottom:28px;display:flex;justify-content:space-between;color:var(--on3)}
.ld .ld-bar{position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--rule-d)}
.ld .ld-bar i{position:absolute;left:0;top:0;bottom:0;width:0;background:var(--on)}
.gsap .hero h1 .w,.gsap .hero .fade,.gsap .hero .cta-r{transition:none}
html.preload::after{content:"";position:fixed;inset:0;background:#0E0E0E;z-index:300}
/* ======== round 6 ======== */
.split-line{padding:.1em 0 .24em;margin:-.1em 0 -.24em}
.foot-row{grid-template-columns:repeat(3,minmax(0,1fr))}
.cta-band{position:relative;isolation:isolate}
.cta-band .glow{position:absolute;z-index:-1;left:calc(var(--pad)*-1);right:calc(var(--pad)*-1);top:-18%;bottom:-40%;background:url(../img/horizon.webp) center 72%/cover no-repeat;opacity:.9;-webkit-mask-image:linear-gradient(to bottom,transparent 0%,#000 38%,#000 70%,transparent 100%);mask-image:linear-gradient(to bottom,transparent 0%,#000 38%,#000 70%,transparent 100%)}
.has-aura{position:relative;overflow:hidden;isolation:isolate}
.has-aura .aura{position:absolute;z-index:-1;right:-6vw;top:50%;width:min(56vw,820px);aspect-ratio:3/4;transform:translateY(-45%);background:url(../img/aura.webp) center/cover no-repeat;opacity:.85;-webkit-mask-image:radial-gradient(closest-side,#000 62%,transparent 100%);mask-image:radial-gradient(closest-side,#000 62%,transparent 100%)}
.hands-wrap{margin:0 calc(var(--pad)*-1) clamp(56px,7vw,112px);height:clamp(220px,40vw,560px)}
.hands-wrap canvas{width:100%;height:100%;display:block}
@media (max-width:760px){.foot-row{grid-template-columns:1fr 1fr}.has-aura .aura{width:110vw;right:-40vw;opacity:.55}}
.hands-wrap{-webkit-mask-image:linear-gradient(to bottom,transparent,#000 18%,#000 78%,transparent),linear-gradient(to right,transparent,#000 6%,#000 94%,transparent);-webkit-mask-composite:source-in;mask-image:linear-gradient(to bottom,transparent,#000 18%,#000 78%,transparent),linear-gradient(to right,transparent,#000 6%,#000 94%,transparent);mask-composite:intersect}
.cta-band .glow{top:42%;bottom:-38%;opacity:.8;background-position:center 66%}

/* ======== round 7 ======== */
section.contact{position:relative;isolation:isolate;overflow:hidden}
.cta-band .glow{display:none}
section.contact>.glow{position:absolute;z-index:-1;left:0;right:0;bottom:0;height:min(150vh,1500px);background:url(../img/horizon.webp) center 58%/cover no-repeat;opacity:.85;
  -webkit-mask-image:linear-gradient(to bottom,transparent 0%,#000 30%,#000 52%,rgba(0,0,0,.35) 78%,transparent 100%);mask-image:linear-gradient(to bottom,transparent 0%,#000 30%,#000 52%,rgba(0,0,0,.35) 78%,transparent 100%)}
section.contact .cta-band,section.contact .foot{position:relative}
.foot{border-top-color:rgba(237,236,232,.12)}
.has-sky{position:relative;overflow:hidden;isolation:isolate}
.has-sky .sky{position:absolute;inset:0;z-index:-1;background:url(../img/horizon.webp) center/cover no-repeat;filter:blur(18px) saturate(1.15);opacity:0;transition:opacity .8s var(--ease);
  -webkit-mask-image:radial-gradient(circle at var(--x,70%) var(--y,50%),#000 0,rgba(0,0,0,.55) 14vmax,transparent 30vmax);mask-image:radial-gradient(circle at var(--x,70%) var(--y,50%),#000 0,rgba(0,0,0,.55) 14vmax,transparent 30vmax)}
.has-sky.on .sky{opacity:.9}
section.contact>.glow{top:0;height:auto;background-size:100% 120%;background-position:center 72%;opacity:.8;
  -webkit-mask-image:linear-gradient(to bottom,transparent 0%,transparent 22%,#000 48%,#000 66%,rgba(0,0,0,.4) 84%,transparent 100%);mask-image:linear-gradient(to bottom,transparent 0%,transparent 22%,#000 48%,#000 66%,rgba(0,0,0,.4) 84%,transparent 100%)}
.pager.dark{background:transparent}

/* ======== round 8 ======== */
:root{--strato:linear-gradient(180deg,#0E0E0E 0%,#0E0E0E 14.0%,rgb(2,4,20) 26.34%,rgb(5,6,25) 28.50%,rgb(6,10,30) 30.58%,rgb(9,14,38) 32.67%,rgb(12,19,45) 34.83%,rgb(16,25,52) 36.92%,rgb(20,31,60) 39.08%,rgb(25,39,71) 41.17%,rgb(31,47,81) 43.33%,rgb(35,57,96) 45.42%,rgb(45,70,110) 47.50%,rgb(58,85,125) 49.66%,rgb(72,104,143) 51.75%,rgb(98,125,158) 53.91%,rgb(139,152,169) 56.00%,rgb(190,180,175) 58.09%,rgb(241,204,164) 60.25%,rgb(254,214,102) 62.34%,rgb(253,173,28) 64.50%,rgb(162,52,21) 66.58%,rgb(86,34,17) 68.67%,rgb(66,25,10) 70.83%,rgb(53,18,8) 72.92%,rgb(44,13,4) 75.08%,rgb(37,8,3) 77.17%,rgb(30,5,3) 79.33%,rgb(23,3,2) 81.42%,rgb(19,2,1) 83.50%,rgb(13,0,0) 85.66%,rgb(9,0,0) 87.75%,rgb(7,0,0) 89.91%,rgb(5,0,0) 92.00%,#0E0E0E 100.0%,#0E0E0E 100%)}
section.contact>.glow{background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .05 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"),var(--strato);background-size:160px 160px,100% 100%;opacity:1;-webkit-mask-image:none;mask-image:none}
.cta-band{grid-template-columns:1fr !important;justify-items:center;text-align:center}
.cta-band>*{grid-column:1/-1 !important}
.cta-band .label{justify-self:center;align-self:center;margin-bottom:6px}
.cta-band h2{font-size:clamp(36px,4.6vw,72px) !important;letter-spacing:-.018em}
.cta-band .contact-row{justify-content:center;margin-top:28px}
section.contact .cta-band{padding-bottom:clamp(220px,28vw,420px)}
.foot{border-top:0 !important;margin-top:0;padding-top:0}
.foot .big{display:none}
.foot-row{grid-template-columns:auto 1fr auto auto !important;align-items:end;gap:40px;margin-top:0;padding:28px 0 8px}
.foot .small{width:86px;height:13px;color:var(--on);display:block}
.foot-row div{flex-direction:row;gap:20px}
.has-sky .sky{background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .05 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"),linear-gradient(180deg,#0E0E0E 0%,#0E0E0E -1.0%,rgb(2,4,20) 12.92%,rgb(5,6,25) 15.62%,rgb(6,10,30) 18.23%,rgb(9,14,38) 20.84%,rgb(12,19,45) 23.54%,rgb(16,25,52) 26.15%,rgb(20,31,60) 28.85%,rgb(25,39,71) 31.46%,rgb(31,47,81) 34.16%,rgb(35,57,96) 36.77%,rgb(45,70,110) 39.38%,rgb(58,85,125) 42.08%,rgb(72,104,143) 44.69%,rgb(98,125,158) 47.39%,rgb(139,152,169) 50.00%,rgb(190,180,175) 52.61%,rgb(241,204,164) 55.31%,rgb(254,214,102) 57.92%,rgb(253,173,28) 60.62%,rgb(162,52,21) 63.23%,rgb(86,34,17) 65.84%,rgb(66,25,10) 68.54%,rgb(53,18,8) 71.15%,rgb(44,13,4) 73.85%,rgb(37,8,3) 76.46%,rgb(30,5,3) 79.16%,rgb(23,3,2) 81.77%,rgb(19,2,1) 84.38%,rgb(13,0,0) 87.08%,rgb(9,0,0) 89.69%,rgb(7,0,0) 92.39%,rgb(5,0,0) 95.00%,#0E0E0E 100.0%,#0E0E0E 100%);background-size:160px 160px,100% 100%;filter:none}
/* contact page */
.contact-page .cta-band{padding-bottom:0}
.hands-wrap{margin-bottom:clamp(40px,5vw,80px)}
.c-grid{display:flex;flex-direction:column;align-items:center;text-align:center;gap:40px}
.c-side{align-items:center}.c-side .body{max-width:44ch}
form.cf{width:min(720px,100%);text-align:left}
form.cf .send{justify-content:center}
@media (max-width:760px){.foot-row{grid-template-columns:1fr !important;gap:14px}}
/* GALE POV + field */
.povfig{position:relative;background:#000;aspect-ratio:16/9;overflow:hidden}
.povfig .pv{position:absolute;inset:0}
.povfig video{position:absolute;inset:0;width:100%;height:100%;max-height:none;object-fit:cover;opacity:0;transition:opacity .9s ease}
.povfig video.on{opacity:1}
.pov{position:absolute;inset:0;z-index:3;pointer-events:none;color:rgba(255,255,255,.9);font-family:'Geist Mono',monospace;font-size:11px;line-height:14px;letter-spacing:.08em;text-transform:uppercase;text-shadow:0 1px 6px rgba(0,0,0,.55)}
.pov>*{position:absolute}
.pov-tl{left:var(--pad);top:clamp(18px,2.2vw,32px);display:flex;align-items:center;gap:10px}
.pov-rec{width:6px;height:6px;border-radius:50%;background:#fff;animation:pov-blink 1.6s steps(1) infinite}
@keyframes pov-blink{50%{opacity:.15}}
.pov-tr{right:var(--pad);top:clamp(18px,2.2vw,32px);font-variant-numeric:tabular-nums}
.pov-hdg{left:50%;top:clamp(16px,2vw,28px);transform:translateX(-50%);width:min(36vw,420px);text-align:center}
.pov-tape{position:relative;height:18px;overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 22%,#000 78%,transparent);mask-image:linear-gradient(90deg,transparent,#000 22%,#000 78%,transparent)}
.pov-strip{position:absolute;left:50%;top:0;height:100%;will-change:transform}
.pov-strip i{position:absolute;bottom:0;width:1px;height:5px;background:rgba(255,255,255,.7)}
.pov-strip i.mj{height:9px}
.pov-strip span{position:absolute;top:0;transform:translateX(-50%);font-size:9px;line-height:9px;opacity:.75}
.pov-caret{display:block;width:0;height:0;margin:3px auto 0;border-inline:4px solid transparent;border-bottom:5px solid #fff}
.pov-hdg [data-p]{display:block;margin-top:3px;font-variant-numeric:tabular-nums}
.pov-ret{left:50%;top:50%;width:clamp(56px,6vw,84px);transform:translate(-50%,-50%);overflow:visible}
.pov-ret path{fill:none;stroke:rgba(255,255,255,.85);stroke-width:1;vector-effect:non-scaling-stroke}
.pov-ret circle{fill:#fff}
.pov-bl{left:var(--pad);bottom:clamp(18px,2.2vw,32px);display:flex;gap:clamp(16px,2.4vw,36px)}
.pov-bl b{font-weight:400;color:#fff}
.pov-br{right:var(--pad);bottom:clamp(18px,2.2vw,32px);opacity:.75}
.fieldfig .stage-wrap{position:relative;aspect-ratio:16/9;background:#05070A}
.fieldfig canvas{display:block;width:100%;height:100%;max-height:none}
@media (max-width:760px){.pov{font-size:9px;line-height:12px}.pov-x,.pov-br,.pov-hdg{display:none}.pov-tl,.pov-tr{top:12px}.pov-bl{bottom:10px;gap:14px}.pov-ret{width:44px}}
@media (prefers-reduced-motion:reduce){.pov-rec{animation:none}}
.labfig{background:#0E0E0E;padding:clamp(40px,5vw,80px) 0 0}
.labfig iframe{display:block;width:100%;border:0;height:2400px;background:#0E0E0E}
.seg i{transition:transform .32s cubic-bezier(.3,.7,.2,1),width .32s cubic-bezier(.3,.7,.2,1)}
.seg button{transition:color .2s}
.seg button:focus:not(:focus-visible){outline:none}
.wall{transition:opacity .14s}
.tile.enter{animation-duration:.45s}

.hero h1{text-wrap:wrap;word-spacing:normal;overflow-wrap:normal;white-space:normal}
.hero h1 .ww{display:inline;white-space:nowrap}

/* full-width, uncropped project images */
.gallery{gap:0}
.gallery figure.gimg{display:block;background:#000;overflow:visible}
.gallery figure.gimg img{display:block;width:100%;height:auto;max-height:none;max-width:none;transform:none!important}
/* loader: stratosphere */
.ld{overflow:hidden}
.ld-sky{position:absolute;inset:0;z-index:-1;background:var(--strato);transform:translateY(55%);animation:ldsky 2.4s cubic-bezier(.2,.7,.2,1) forwards}
@keyframes ldsky{to{transform:translateY(8%)}}
.ld{isolation:isolate}

/* fitted galleries (Vestra, Exploration) */
.gallery.fit{padding:clamp(24px,4vw,64px) var(--pad);gap:clamp(24px,4vw,64px)}
.gallery.fit figure.gimg{display:flex;justify-content:center;background:transparent}
.gallery.fit figure.gimg img{width:auto;max-width:min(100%,1100px);max-height:82vh}
/* loader: stratosphere glow around the wordmark */
.ld-sky{inset:auto;left:50%;top:50%;width:min(1100px,140vw);height:min(560px,70vh);transform:translate(-50%,-50%) scale(.6);opacity:0;
  background:radial-gradient(ellipse 50% 50% at 50% 50%,rgba(255,214,102,.55) 0%,rgba(253,173,28,.35) 18%,rgba(162,52,21,.28) 34%,rgba(58,85,125,.32) 52%,rgba(16,25,52,.25) 70%,transparent 100%);
  filter:blur(30px);animation:ldglow 2.2s cubic-bezier(.2,.7,.2,1) forwards,ldpulse 3s ease-in-out 2.2s infinite}
@keyframes ldglow{to{opacity:1;transform:translate(-50%,-50%) scale(1)}}
@keyframes ldpulse{50%{transform:translate(-50%,-50%) scale(1.06)}}
.has-sky .sky{background-position:center}

/* ======== round 9 ======== */
section.contact>.glow{filter:blur(22px);left:-40px;right:-40px;top:-40px}
.has-sky .sky{filter:blur(22px)}
.foot-row{border-top:1px solid rgba(237,236,232,.14)!important;padding-top:22px!important}
/* readable header when scrolled */
.site-head{transition:transform .5s var(--ease),background .4s,backdrop-filter .4s;padding-top:18px;padding-bottom:18px}
.site-head.past{mix-blend-mode:normal;background:rgba(14,14,14,.92);-webkit-backdrop-filter:blur(18px) saturate(1.2);backdrop-filter:blur(18px) saturate(1.2);border-bottom:1px solid rgba(237,236,232,.08)}
/* page-transition curtain: stratosphere glow */
.pt{background:radial-gradient(ellipse 45% 40% at 50% 50%,rgba(255,214,102,.35) 0%,rgba(253,173,28,.22) 20%,rgba(162,52,21,.18) 38%,rgba(58,85,125,.22) 58%,transparent 85%),var(--dark)}

/* header adapts to the section under it */
.site-head.past.on-light{background:rgba(238,237,234,.93);border-bottom-color:rgba(22,22,22,.08)}
.site-head.past.on-light .brand,.site-head.past.on-light .menu-btn{color:var(--ink)}
.site-head.past.on-light .site-nav a{color:var(--ink2)}
.site-head.past.on-light .site-nav a:hover,.site-head.past.on-light .site-nav a[aria-current]{color:var(--ink)}
/* no gradient on loading */
.ld-sky{display:none}
.pt{background:var(--dark)}

@media (max-width:760px){
  .pager{flex-direction:row!important;align-items:center!important;flex-wrap:nowrap}
  .pager .btn,.nextp .btns .btn,.dpp-cta .btn{height:44px;padding:0 18px;font-size:14px}
  .nextp .btns{gap:8px}
  .hero{min-height:620px}
  .copy{bottom:28px}
  .s-title{font-size:clamp(36px,10vw,48px)}
  section.s{padding-top:72px;padding-bottom:72px}
  .site-head.past{padding-top:14px;padding-bottom:14px}
  .gallery.fit{padding:16px 0;gap:12px}
  .gallery.fit figure.gimg img{max-width:100%;max-height:none}
  .labfig{padding-top:24px}
  .cta-band h2{font-size:clamp(32px,9vw,44px)!important}
  .hands-wrap{height:200px}
}
@media (max-width:760px){.site-head{align-items:center}.menu-btn{line-height:1}}

/* ======== round 10: content + trust ======== */
:root{--ink3:#6F6F6C;--on3:#8C8C88}
.pk{grid-column:4/13;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;margin-top:56px}
.pk article{border-top:1px solid var(--rule-d);padding-top:18px;display:flex;flex-direction:column;gap:10px}
.pk .mono{color:var(--on3)}
.pk h3{font-size:clamp(20px,1.7vw,26px);font-weight:500;letter-spacing:-.012em}
.pk p{color:var(--on2);font-size:15px;line-height:1.5}
.nda{grid-column:4/13;margin-top:28px;color:var(--on3)}
.credit-note{color:var(--ink3);margin-bottom:16px;max-width:70ch;text-transform:none;letter-spacing:.02em;line-height:1.5}
.dark .credit-note{color:var(--on3)}
.cao{margin-top:32px;display:grid;gap:0;border-top:1px solid var(--rule)}
.cao div{display:grid;grid-template-columns:120px 1fr;gap:16px;padding:14px 0;border-bottom:1px solid var(--rule)}
.cao dt{color:var(--ink3)}
.cao dd{font-size:16px;line-height:1.5;color:var(--ink)}
.concept-note{margin-top:20px;color:var(--ink3)}
.steps{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px}
.steps article,.eng div{border-top:1px solid var(--ink);padding-top:18px;display:flex;flex-direction:column;gap:10px}
.steps .mono,.eng .mono{color:var(--ink3)}
.steps h3,.eng h3{font-size:clamp(20px,1.8vw,28px);font-weight:500;letter-spacing:-.014em}
.steps p,.eng p{color:var(--ink2);font-size:15px;line-height:1.5}
.eng{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;margin-top:clamp(56px,6vw,96px)}
.conf{list-style:none;margin-top:32px;border-top:1px solid var(--rule-d)}
.conf li{padding:14px 0;border-bottom:1px solid var(--rule-d);color:var(--on)}
.mail{display:inline-block;margin-left:20px;color:var(--on);font-size:18px;text-decoration:none;border-bottom:1px solid rgba(237,236,232,.3);padding-bottom:2px;transition:border-color .3s}
.mail:hover{border-color:var(--on)}
.c-side .mail{margin-left:0}
.c-side .nda{color:var(--on3);max-width:44ch;line-height:1.6;text-transform:none;letter-spacing:.02em}
.cta-band .contact-row{align-items:center}
/* contact: two lights meet */
.meet{position:relative;height:clamp(200px,32vw,420px);margin:0 calc(var(--pad)*-1) clamp(40px,5vw,80px);overflow:hidden}
.meet i{position:absolute;top:50%;width:62%;height:70%;filter:blur(40px);opacity:0;transform:translateY(-50%)}
.meet .l{left:-30%;background:radial-gradient(ellipse at 70% 50%,rgba(98,125,158,.9),rgba(35,57,96,.6) 40%,transparent 70%);animation:meetL 2.6s cubic-bezier(.2,.7,.2,1) .3s forwards,breath 5s ease-in-out 3s infinite}
.meet .r{right:-30%;background:radial-gradient(ellipse at 30% 50%,rgba(253,173,28,.9),rgba(162,52,21,.6) 40%,transparent 70%);animation:meetR 2.6s cubic-bezier(.2,.7,.2,1) .3s forwards,breath 5s ease-in-out 3s infinite}
.meet b{position:absolute;left:50%;top:50%;width:0;height:2px;transform:translate(-50%,-50%);background:linear-gradient(90deg,transparent,#FFD666 30%,#FFF1C8 50%,#FFD666 70%,transparent);box-shadow:0 0 40px 10px rgba(255,200,90,.35);animation:line 1.6s cubic-bezier(.2,.7,.2,1) 2.1s forwards}
@keyframes meetL{to{left:-2%;opacity:1}}
@keyframes meetR{to{right:-2%;opacity:1}}
@keyframes line{to{width:min(70%,900px)}}
@keyframes breath{50%{transform:translateY(-50%) scale(1.05)}}
@media (prefers-reduced-motion:reduce){.meet i{opacity:1;animation:none}.meet .l{left:-2%}.meet .r{right:-2%}.meet b{width:60%;animation:none}}
@media (max-width:760px){
  .pk,.steps,.eng{grid-template-columns:1fr;gap:28px}
  .pk,.nda{grid-column:1/-1}
  .cao div{grid-template-columns:1fr;gap:4px}
  .mail{margin-left:0;margin-top:16px;display:block}
  .meet{height:220px}
}
.site-head>div:empty{display:none}@media (min-width:761px){.site-head{grid-template-columns:auto 1fr}}

/* contact: two lights merge into one orb */
.meet{position:relative;height:clamp(300px,38vw,520px);margin:0 calc(var(--pad)*-1) clamp(40px,5vw,80px);overflow:hidden}
.meet i,.meet b{position:absolute;top:50%;left:50%;border-radius:50%;filter:blur(28px);box-shadow:none}
.meet i{width:clamp(140px,18vw,260px);height:clamp(140px,18vw,260px);margin:calc(clamp(140px,18vw,260px)/-2) 0 0 calc(clamp(140px,18vw,260px)/-2);opacity:0;
  background:radial-gradient(circle at 50% 50%,#FFE7A3 0%,#FDAD1C 30%,#C2512A 52%,#3A557D 74%,transparent 76%);animation:none;right:auto;transform:none}
.meet .l{animation:mL 2.2s cubic-bezier(.45,0,.2,1) .2s forwards}
.meet .r{animation:mR 2.2s cubic-bezier(.45,0,.2,1) .2s forwards}
.meet b{width:clamp(220px,28vw,400px);height:clamp(220px,28vw,400px);margin:calc(clamp(220px,28vw,400px)/-2) 0 0 calc(clamp(220px,28vw,400px)/-2);opacity:0;transform:scale(.4);filter:blur(18px);
  background:radial-gradient(circle at 50% 46%,#FFF1C8 0%,#FFD666 16%,#FDAD1C 34%,#C2512A 52%,#4E6E9E 70%,#1A2850 84%,transparent 86%);
  animation:mO 1.6s cubic-bezier(.2,.7,.2,1) 2s forwards,mB 6s ease-in-out 3.6s infinite}
@keyframes mL{0%{opacity:0;transform:translateX(-46vw)}25%{opacity:.95}85%{opacity:.95;transform:translateX(0)}100%{opacity:0;transform:translateX(0)}}
@keyframes mR{0%{opacity:0;transform:translateX(46vw)}25%{opacity:.95}85%{opacity:.95;transform:translateX(0)}100%{opacity:0;transform:translateX(0)}}
@keyframes mO{to{opacity:1;transform:scale(1)}}
@keyframes mB{50%{transform:scale(1.06)}}
@media (prefers-reduced-motion:reduce){.meet i{display:none}.meet b{opacity:1;transform:none;animation:none}}
@media (max-width:760px){.meet{height:300px}}
.meet .l{background:radial-gradient(circle,#9EC2F0 0%,#4E6E9E 40%,#1A2850 70%,transparent 74%)}
.meet .r{background:radial-gradient(circle,#FFE7A3 0%,#FDAD1C 38%,#C2512A 64%,transparent 72%)}
.meet b{background:radial-gradient(circle at 50% 42%,#FFF4D6 0%,#FFD666 14%,#FDAD1C 28%,#D2662F 40%,#8A7FB0 54%,#4E6E9E 66%,#1A2850 80%,transparent 84%)}

/* DPP: same rhythm as the other sections */
#dpp .dpp-grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:24px}
#dpp .dpp-lede{grid-column:4/11;font-size:clamp(18px,1.5vw,22px);line-height:1.5;color:var(--on2);max-width:52ch;text-wrap:pretty}
#dpp .pk{grid-column:4/13;margin-top:clamp(72px,8vw,128px);gap:clamp(32px,3.5vw,56px)}
#dpp .pk article{gap:14px;padding-top:24px}
#dpp .pk h3{font-size:clamp(22px,1.9vw,30px)}
#dpp .pk p{max-width:34ch}
#dpp .dpp-cta{grid-column:4/13;margin-top:clamp(64px,7vw,112px)}
#dpp .nda{grid-column:4/13;margin-top:24px}
@media (max-width:760px){#dpp .dpp-grid{grid-template-columns:1fr}#dpp .dpp-grid>*{grid-column:1/-1}#dpp .pk{margin-top:48px}#dpp .dpp-cta{margin-top:48px}}
.strip-cap{margin-top:28px}
.meet .l,.meet .r{left:50%!important;right:auto!important;top:50%}
.meet .l{animation:mL 2.6s cubic-bezier(.45,0,.2,1) .2s forwards}
.meet .r{animation:mR 2.6s cubic-bezier(.45,0,.2,1) .2s forwards}
.meet b{animation:mO 1.6s cubic-bezier(.2,.7,.2,1) 2.4s forwards,mB 6s ease-in-out 4s infinite}
@keyframes mL{0%{opacity:0;transform:translateX(-42vw)}20%{opacity:1}80%{opacity:1;transform:translateX(-4%)}100%{opacity:0;transform:translateX(0)}}
@keyframes mR{0%{opacity:0;transform:translateX(42vw)}20%{opacity:1}80%{opacity:1;transform:translateX(4%)}100%{opacity:0;transform:translateX(0)}}
/* DPP compact */
#dpp .s-head{display:flex;flex-direction:column;align-items:flex-start;gap:16px;margin-left:calc((100% - 0px) * 3/12 + 6px);margin-bottom:clamp(28px,3vw,44px)}
#dpp .s-head .label{margin:0}
#dpp .s-title{font-size:clamp(36px,4.4vw,68px)}
#dpp .dpp-lede{grid-column:4/11;font-size:clamp(17px,1.3vw,20px)}
#dpp .pk{margin-top:clamp(48px,5vw,72px)}
#dpp .dpp-cta{margin-top:clamp(40px,4vw,56px);display:flex;align-items:center;gap:16px;flex-wrap:wrap}
#dpp .nda{margin-top:18px}
#dpp .strip{margin-top:clamp(56px,6vw,88px)}
@media (max-width:760px){#dpp .s-head{margin-left:0}}

/* contact page layout */
.contact-page .c-grid{display:flex;flex-direction:column;align-items:stretch;text-align:left;gap:0}
.c-top{display:flex;justify-content:space-between;align-items:flex-end;gap:32px;padding-bottom:28px;border-bottom:1px solid var(--rule-d)}
.c-top .body{max-width:44ch;margin:0;font-size:clamp(17px,1.3vw,20px);color:var(--on2)}
.c-top .mail{margin:0;font-size:clamp(20px,2vw,28px);white-space:nowrap}
.c-nda{margin:20px 0 clamp(48px,5vw,80px);color:var(--on3);max-width:60ch;text-transform:none;letter-spacing:.02em;line-height:1.6}
.contact-page form.cf{width:100%;max-width:none;text-align:left}
.contact-page form.cf .send{justify-content:flex-end}
@media (max-width:760px){.c-top{flex-direction:column;align-items:flex-start;gap:20px}.c-top .mail{white-space:normal}}
.contact-page form.cf .send .status:empty{display:none}
/* filter: active pill uses the light button style on dark sections */
.dark .seg{background:rgba(255,255,255,.05);box-shadow:inset 0 0 0 1px rgba(255,255,255,.1)}
.dark .seg i{background:var(--on);box-shadow:inset 0 0 0 4px var(--on),inset 0 0 0 5px rgba(0,0,0,.18)}
.dark .seg button{height:48px;padding:0 24px;font-size:15px;color:#8F8E8A}
.dark .seg button:hover{color:var(--on)}
.dark .seg button[aria-pressed="true"],.dark .seg button[aria-pressed="true"]:hover{color:var(--dark)}
@media (max-width:760px){.dark .seg button{height:40px;padding:0 14px;font-size:13px}}
/* about: stacked process rows */
.rows{list-style:none;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:0 24px;border-top:1px solid var(--ink)}
.rows li{grid-column:1/-1;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:24px;align-items:baseline;padding:clamp(24px,2.6vw,36px) 0;border-bottom:1px solid var(--rule)}
.rows h3{grid-column:4/8;font-size:clamp(24px,2.4vw,36px);font-weight:500;letter-spacing:-.014em;line-height:1.05}
.rows p{grid-column:8/13;font-size:16px;line-height:1.5;color:var(--ink2);max-width:46ch}
.rows-head{margin-top:clamp(96px,10vw,160px)}
/* credits on dark */
.credits-s .cr-body{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:24px}
.credits-s .cr-body>*{grid-column:4/13}
.credits-s .contrib li b{color:var(--on)}
/* sectors: two by two */
.sectors{grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(56px,6vw,88px) clamp(32px,4vw,64px)}
.sector p{max-width:44ch}
/* research: dark page */
.research-top{background:var(--dark);color:var(--on)}
.research-top .rs{border-top-color:var(--rule-d)}
.research-top .rs a{border-bottom-color:var(--rule-d);color:var(--on)}
.research-top .rs p,.research-top .rs .go{color:var(--on2)}
.research-top .rs a:hover .go{color:var(--on)}
.rs .go em{font-style:normal;margin-right:14px;color:var(--ink3);font-weight:400}
.dark .rs .go em{color:var(--on3)}
.rs .go{white-space:nowrap}
.rs h3{grid-column:4/8}.rs p{grid-column:8/11}.rs .go{grid-column:11/13}
/* about intro */
.intro-h .split-line{padding-bottom:.06em}
@media (max-width:760px){
  .rows li{grid-template-columns:1fr;gap:10px}.rows h3,.rows p{grid-column:1/-1}
  .credits-s .cr-body{grid-template-columns:1fr}.credits-s .cr-body>*{grid-column:1/-1}
  .sectors{grid-template-columns:1fr;gap:40px}
  .rs h3,.rs p{grid-column:1/-1}.rs .go{grid-column:2/3}
}
.gsap .intro-h,.gsap .intro-p{visibility:hidden}
.rows{display:block;border-top:0}
.rows li{grid-column:auto;margin-left:calc((100% - 11*24px)/12*3 + 72px);grid-template-columns:minmax(0,1fr) minmax(0,1.25fr);border-bottom:1px solid var(--rule)}
.rows li:first-child{border-top:1px solid var(--ink)}
.rows h3,.rows p{grid-column:auto}
@media (max-width:760px){.rows li{margin-left:0;grid-template-columns:1fr}}
.research-top{background:#141414}
.credits-s{background:#141414}
/* softer, smaller cursor glow */
.has-sky .sky{-webkit-mask-image:radial-gradient(circle at var(--x,70%) var(--y,50%),#000 0,rgba(0,0,0,.4) 7vmax,transparent 17vmax);mask-image:radial-gradient(circle at var(--x,70%) var(--y,50%),#000 0,rgba(0,0,0,.4) 7vmax,transparent 17vmax)}
.has-sky.on .sky{opacity:.38}
.contact-page{padding-bottom:20px!important}
.foot-row{grid-template-columns:auto 1fr auto !important}@media (max-width:760px){.foot-row{grid-template-columns:1fr !important;gap:14px}}
/* ---------- hero v2: statement + stratosphere horizon ---------- */
.hero2{height:auto;min-height:100svh;display:flex;flex-direction:column;padding:clamp(120px,19vh,190px) var(--pad) clamp(32px,5vh,56px)}
.hero2 .copy{position:static;display:flex;flex-direction:column;gap:clamp(20px,2.4vw,32px);max-width:1180px}
.hero2 h1{font-size:clamp(36px,4.45vw,72px);line-height:1.04;letter-spacing:-.022em;max-width:20ch;font-weight:500}
.dart-line{flex-direction:row;color:var(--ink3)}
.dart-line b{font-weight:500;color:var(--ink)}
.horizon{position:relative;margin:auto calc(var(--pad)*-1) 0;height:clamp(72px,11vh,120px);overflow:hidden;flex:none}
.hero2 .copy{margin-bottom:clamp(48px,7vh,96px)}
.horizon i{position:absolute;inset:-40% -10%;background:linear-gradient(90deg,#05070F 0%,#0B1124 14%,#1A2747 28%,#2E4670 38%,#5D7697 46%,#A7A7A4 51%,#E6C58E 55%,#F0B653 59%,#C9782A 63%,#8A3C14 68%,#4A1A0A 76%,#1E0905 88%,#0E0606 100%);filter:blur(6px);background-size:140% 100%;animation:horizon 18s ease-in-out infinite alternate}
@keyframes horizon{from{background-position:0% 50%}to{background-position:100% 50%}}
.hero-foot{display:flex;justify-content:space-between;align-items:center;gap:24px;margin-top:clamp(24px,3vh,36px)}
.hero-foot .meta{color:var(--ink2)}
@media (prefers-reduced-motion:reduce){.horizon i{animation:none}}
@media (max-width:760px){
  .hero2{padding:120px var(--pad) 28px;min-height:100svh}
  .hero2 h1{font-size:clamp(32px,9vw,40px);max-width:none}
  .dart-line{flex-wrap:wrap}
  .horizon{height:64px}
  .hero-foot{flex-direction:column;align-items:flex-start;gap:20px}
}
.hero2 .copy{flex-direction:column !important;align-items:flex-start !important;justify-content:flex-start !important;left:auto;right:auto;bottom:auto;width:100%}
.hero2 h1{max-width:23ch}
.horizon i{background-size:115% 100%}
@media (max-width:760px){.hero2{min-height:0}.hero2 .copy{margin-bottom:56px}.horizon{margin-top:0}}
.hero2 h1{max-width:29ch}@media (max-width:760px){.hero2 h1{max-width:none}}
/* ---------- hero v3: editorial, rolling word, horizon strip ---------- */
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.hero3{height:auto;min-height:100svh;display:flex;flex-direction:column;padding:0;overflow:hidden}
.h3-stage{position:relative;flex:1;min-height:560px;margin:0 var(--pad)}
.h3-stage p{position:absolute;margin:0}
.h3-a,.h3-c{font-size:clamp(44px,6.2vw,108px);line-height:1;letter-spacing:-.04em;font-weight:500}
.h3-a{left:0;top:clamp(110px,20vh,200px)}
.h3-b{right:0;top:calc(clamp(110px,20vh,200px) + clamp(44px,6.2vw,108px)*.72);color:var(--ink2)}
.h3-c{left:calc((100% - 11*24px)/12*2 + 48px);top:calc(clamp(110px,20vh,200px) + clamp(44px,6.2vw,108px)*2.1);display:flex;align-items:center;gap:.22em;white-space:nowrap}
.h3-c .brk{color:var(--ink3);font-weight:400;transform:translateY(-.04em)}
.slot{position:relative;display:inline-block;height:1.12em;overflow:hidden;clip-path:inset(0);transition:width .9s cubic-bezier(.7,0,.2,1);vertical-align:middle}
.slot span{position:absolute;left:0;top:0;line-height:1.12;white-space:nowrap;transition:transform .9s cubic-bezier(.7,0,.2,1),opacity .6s}
.slot .cur{transform:translateY(0)}
.slot .in{transform:translateY(105%)}
.slot .out{transform:translateY(-105%);opacity:0}
.h3-d{right:0;bottom:clamp(40px,7vh,80px);font-size:clamp(22px,2.2vw,36px);line-height:1.1;letter-spacing:-.02em;text-align:right}
.hero3 .hero-foot{margin:0 var(--pad);padding:0 0 clamp(20px,3vh,32px);margin-top:0}
.hero3 .horizon{margin:0;height:clamp(90px,16vh,170px)}
.hero3 .horizon i{inset:-20% 0;background:url(../img/horizon.webp) center 58%/cover no-repeat;filter:blur(2px) saturate(1.05);animation:none;transform:scale(1.08)}
.dart-line b{font-weight:400;color:var(--ink)}
@media (max-width:760px){
  .h3-stage{min-height:480px}
  .h3-a{top:110px;font-size:15vw}
  .h3-b{left:0;right:auto;top:calc(110px + 15vw*1.15)}
  .h3-c{left:0;top:calc(110px + 15vw*1.15 + 44px);font-size:13vw}
  .h3-d{left:0;right:auto;text-align:left;bottom:28px;font-size:24px}
  .hero3 .hero-foot{flex-direction:column;align-items:flex-start;gap:18px}
  .hero3 .horizon{height:90px}
}
.slot span{padding-right:.06em}
/* ---------- hero v4: one block, two rolling words (tech / entertainment) ---------- */
.hero4{height:auto;min-height:100svh;display:flex;flex-direction:column;justify-content:space-between;padding:clamp(130px,24vh,240px) var(--pad) clamp(32px,6vh,64px)}
.h4-l{margin:0;font-size:clamp(44px,6.6vw,116px);line-height:1.04;letter-spacing:-.04em;font-weight:500;display:flex;align-items:center;gap:.22em;white-space:nowrap}
.h4-l .brk{color:var(--ink3);font-weight:400;transform:translateY(-.04em)}
.h4-l .brk+.slot{margin-left:-.06em}.h4-l .slot+.brk{margin-left:-.06em}
.hero4 .hero-foot{margin:clamp(64px,10vh,120px) 0 0;padding:0;align-items:flex-end}
.h4-meta{display:flex;flex-direction:column;gap:6px;color:var(--ink2)}
.h4-meta p{margin:0}
.h4-glow{display:block;width:56px;height:3px;border-radius:3px;margin-bottom:14px;background:linear-gradient(90deg,#1A2747,#5D7697 35%,#E6C58E 58%,#F0B653 70%,#C9782A 85%,#4A1A0A);filter:saturate(1.05)}
@media (max-width:760px){
  .hero4{padding:120px var(--pad) 32px}
  .h4-l{font-size:11.5vw;flex-wrap:nowrap}
  .hero4 .hero-foot{flex-direction:column;align-items:flex-start;gap:24px}
}
@media (max-width:760px){
  .hero4{min-height:0;padding:140px var(--pad) 36px}
  .h4-l{flex-wrap:wrap;font-size:13.5vw;row-gap:0}
  .h4-l:first-child .lead{flex-basis:100%}
  .hero4 .hero-foot{margin-top:88px}
}
/* tile hover: second project image */
.tile .alt{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .55s var(--ease),transform 1.1s var(--ease);pointer-events:none}
.tile:hover .alt,.tile:focus-visible .alt{opacity:1}
.tile .cap{z-index:2}
@media (hover:none),(max-width:760px){.tile .alt{display:none}}
/* ---------- hero v5 (restored Figma version 1) ---------- */
.hero5{height:auto;min-height:100svh;display:flex;flex-direction:column;padding:clamp(150px,33vh,300px) 0 clamp(48px,8vh,80px) clamp(32px,4.7vw,68px)}
.hero5 .copy{position:static;display:flex;flex-direction:column;align-items:flex-start;gap:clamp(24px,3vw,40px);padding-right:var(--pad)}
.hero5 h1{font-size:clamp(34px,4.45vw,64px);line-height:1.04;letter-spacing:-.022em;max-width:23ch;font-weight:500}
.hero5 .meta{gap:6px;color:var(--ink2)}
.hero5 .bar{height:clamp(56px,9vh,82px);margin-top:clamp(40px,6vh,56px);background:linear-gradient(90deg,#05070F 0%,#0C1226 14%,#1B2A4E 28%,#2F4772 38%,#5F7898 46%,#A9A7A2 52%,#E7C48D 57%,#EFB24F 61%,#C7742A 66%,#86391A 72%,#4A1A0E 80%,#200A07 90%,#0E0505 100%)}
.hero5 .cta-r{align-self:flex-end;margin:clamp(40px,7vh,64px) var(--pad) 0 0}
@media (max-width:760px){
  .hero5{padding:130px 0 40px var(--pad);min-height:0}
  .hero5 h1{font-size:clamp(30px,8.6vw,40px)}
  .hero5 .bar{height:56px}
  .hero5 .cta-r{align-self:flex-start;margin:32px 0 0}
}
.hero5 .copy{flex-direction:column !important;align-items:flex-start !important;justify-content:flex-start !important;width:100%;left:auto;right:auto;bottom:auto}.hero5 h1{max-width:26ch}
.hero5 h1{max-width:17.4em}@media (max-width:760px){.hero5 h1{max-width:none}}
/* hero v5 headline: rotating word in horizon gradient, framed by two bars */
.hero5 h1{max-width:19.5em}
.rot{display:inline-flex;align-items:center;white-space:nowrap;vertical-align:bottom}
.rot::before,.rot::after{content:"";display:block;width:.075em;height:1.02em;background:var(--ink);flex:none}
.rot::before{margin-right:.08em}.rot::after{margin-left:.04em}
.rot .slot{height:1.16em}
.rot .slot span{line-height:1.16;background:linear-gradient(90deg,#0B1124 0%,#1F3157 22%,#4E6A90 42%,#A9A7A2 56%,#EDBE6A 70%,#D88A33 84%,#8A3C14 100%);-webkit-background-clip:text;background-clip:text;color:transparent;padding-right:.04em}
@media (max-width:760px){.hero5 h1{max-width:none}}
.hero5 h1{max-width:18em}@media (max-width:760px){.hero5 h1{max-width:none}}
/* fixed three-line headline; rotating word always on its own last line */
.hero5 h1{max-width:none;font-size:clamp(32px,3.9vw,56px);line-height:1.08}
.hero5 h1 .hl{display:block;white-space:nowrap}
.hero5 .copy{gap:clamp(32px,4vw,56px)}
.hero5 .bar{margin-top:clamp(64px,9vh,104px)}
@media (max-width:760px){.hero5 h1{font-size:clamp(26px,7.4vw,34px)}.hero5 h1 .hl{white-space:normal}.hero5 h1 .hl:last-child{white-space:nowrap}}
/* ---------- team experience: names, not logos ---------- */
.xpx .names{list-style:none;display:flex;flex-wrap:wrap;gap:clamp(18px,2vw,28px) clamp(28px,3.4vw,56px);margin-left:calc((100% - 11*24px)/12*3 + 72px);border-top:1px solid var(--ink);padding-top:clamp(28px,3vw,44px)}
.xpx .names li{position:relative;padding-bottom:22px;outline:none;cursor:default}
.xpx .nm{font-size:clamp(26px,3.1vw,48px);font-weight:500;letter-spacing:-.022em;line-height:1;color:#B9B8B3;transition:color .35s var(--ease)}
.xpx .det{position:absolute;left:0;top:calc(100% - 16px);white-space:nowrap;color:var(--ink2);opacity:0;transform:translateY(-4px);transition:opacity .3s,transform .4s var(--ease);pointer-events:none}
.xpx .names li:hover .nm,.xpx .names li:focus-visible .nm{color:var(--ink)}
.xpx .names li:hover .det,.xpx .names li:focus-visible .det{opacity:1;transform:none}
.xpx .xpx-note{margin:clamp(32px,4vw,56px) 0 0 calc((100% - 11*24px)/12*3 + 72px)}
@media (hover:none){.xpx .nm{color:var(--ink)}.xpx .det{position:static;display:block;opacity:1;transform:none;margin-top:6px;white-space:normal}}
@media (max-width:760px){.xpx .names{margin-left:0;flex-direction:column;gap:18px}.xpx .xpx-note{margin-left:0}.xpx .nm{color:var(--ink)}.xpx .det{position:static;display:block;opacity:1;transform:none;margin-top:6px;white-space:normal}.xpx .names li{padding-bottom:0}}
/* research thumbnails 16:9 */
.rs .thumb{width:clamp(150px,15vw,240px);aspect-ratio:16/9}
@media (max-width:760px){.rs .thumb{width:120px}}
/* consistency: section label sits opposite the first line of its title, everywhere */
.s-head,.about-grid,.also{align-items:baseline}
.s-head>.label,.about-grid>.label,.also>.label{align-self:baseline}
@media (max-width:760px){.s-head,.about-grid,.also{align-items:start}}
/* DPP: label back in the left column, opposite the title, like every other section */
#dpp .s-head{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:24px;align-items:baseline;margin-left:0}
#dpp .s-head .label{grid-column:1/4}
#dpp .s-head .s-title{grid-column:4/13}
@media (max-width:760px){#dpp .s-head{grid-template-columns:1fr;gap:16px;align-items:start}#dpp .s-head>*{grid-column:1/-1}}
/* experience names: ink fills the word left to right on hover */
.xpx .nm{display:inline-block;color:transparent;background:linear-gradient(90deg,#1B2A4E 0%,#2F4772 9%,#5F7898 17%,#A9A7A2 24%,#E7C48D 30%,#EFB24F 35%,#C7742A 41%,#86391A 47%,#B9B8B3 50%,#B9B8B3 100%);background-size:200% 100%;background-position:100% 0;-webkit-background-clip:text;background-clip:text;transition:background-position .9s cubic-bezier(.65,0,.25,1)}
.xpx .names li:hover .nm,.xpx .names li:focus-visible .nm{color:transparent;background-position:0 0}
@media (hover:none),(max-width:760px){.xpx .nm{background-position:0 0}}
.brand svg,.menu-top svg.wm{width:59px;height:17px}
.foot .small{width:52px;height:15px}
/* never clip ascenders/descenders: text-clipped names and masked heading lines */
.xpx .nm{padding:.12em .04em .2em 0;margin:-.12em 0 -.2em;line-height:1.1}
.split-line-mask{padding:.1em 0 .16em;margin:-.1em 0 -.16em}
.rot .slot{height:1.24em}.rot .slot span{line-height:1.24}
[class*="line-mask"]{padding:.1em 0 .16em;margin:-.1em 0 -.16em}

/* two-up galleries (portrait case-study images) */
.gallery.duo{display:grid;grid-template-columns:1fr 1fr;gap:6px;background:#0c0c0c}
.gallery.duo .film{grid-column:1/-1}
.gallery.duo figure.gimg:last-child:nth-child(even){grid-column:1/-1;justify-self:center;width:calc(50% - 3px)}
.gallery.duo figure.film video{display:block;width:100%;height:auto}
@media (max-width:760px){.gallery.duo{grid-template-columns:1fr}.gallery.duo figure.gimg:last-child:nth-child(even){width:100%}}

/* services: text + visual, not links */
.sv-list{border-top:1px solid var(--line,rgba(0,0,0,.12))}
.sv{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(20px,4vw,64px);align-items:center;padding:clamp(24px,3vw,40px) 0;border-bottom:1px solid var(--line,rgba(0,0,0,.12))}
.sv-t h3{font-size:clamp(28px,3.4vw,52px);line-height:1.05;letter-spacing:-.02em;font-weight:500;margin:0 0 16px;padding-top:.06em}
.sv-t p{max-width:46ch;color:var(--ink2,#555);font-size:clamp(15px,1.1vw,18px);line-height:1.5;margin:0 0 18px}
.sv-t .mono{font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink3,#888)}
.sv-img{margin:0;aspect-ratio:16/10;overflow:hidden;background:#111}
.sv-img img{width:100%;height:100%;object-fit:cover;display:block}
@media (max-width:760px){.sv{grid-template-columns:1fr}.sv-img{order:-1}}
.sv{padding:clamp(20px,2.4vw,32px) 0}

.gallery.duo figure.wide{grid-column:1/-1;background:#000}
.gallery.duo figure.wide img{width:100%;height:auto}
/* two-up rows: shorter image zooms to fill the row, no black bars */
@media (min-width:761px){.gallery.duo figure.gimg:not(.wide):not(.film){overflow:hidden}.gallery.duo figure.gimg:not(.wide):not(.film) img{height:100%;object-fit:cover}}

/* block curtain + loader */
.bk{position:fixed;inset:0;z-index:300;pointer-events:none;display:none}
.ld .ld-mark{display:block}
.pt{display:none!important}

/* pill buttons: on hover our stratosphere gradient lights the outer ring of the pill (inside the frame and just around it),
   follows the cursor with a slow glide, and drifts slowly around the ring */
@property --ang{syntax:'<angle>';inherits:false;initial-value:0deg}
.btn{position:relative;isolation:isolate}
.btn::before,.btn::after{content:"";position:absolute;border-radius:inherit;pointer-events:none;opacity:0;z-index:-1;
  background:radial-gradient(120px circle at var(--mx,50%) var(--my,50%),rgba(236,196,128,.85) 0%,rgba(227,176,106,.7) 20%,rgba(194,122,50,.5) 40%,rgba(74,100,144,.4) 62%,rgba(28,43,79,0) 85%),
             conic-gradient(from var(--ang),rgba(28,43,79,.35),rgba(74,100,144,.35),rgba(185,180,174,.3),rgba(227,176,106,.4),rgba(194,122,50,.35),rgba(107,50,24,.3),rgba(28,43,79,.35));
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0);
  transition:opacity .6s var(--ease);animation:btnring 9s linear infinite paused}
.btn::before{inset:0;padding:4px}
.btn::after{inset:-7px;padding:9px;filter:blur(9px)}
.btn:hover::before,.btn:focus-visible::before{opacity:.8;animation-play-state:running}
.btn::after{display:none}
@keyframes btnring{to{--ang:360deg}}
.btn>*{position:relative}
@media (hover:none){.btn::before,.btn::after{display:none}}
@media (prefers-reduced-motion:reduce){.btn::before,.btn::after{animation:none}}

/* nav: on hover the word fills with our gradient and a slow sheen runs through it */
.site-nav a{background:linear-gradient(90deg,#5F7898 0%,#A9A7A2 16%,#E7C48D 30%,#EFB24F 42%,#C7742A 56%,#86391A 68%,#2F4772 84%,#5F7898 100%);background-size:200% 100%;-webkit-background-clip:text;background-clip:text}
@keyframes navsheen{to{background-position:-200% 0}}
@media (hover:hover){.site-nav a:hover,.site-head.past.on-light .site-nav a:hover{color:transparent;animation:navsheen 3.2s linear infinite}
.site-nav a:hover .arrow{stroke:#EFB24F;transform:translate(2px,-2px) rotate(0deg);transition:transform .45s var(--ease)}}
/* hero: the stratosphere bar breathes slowly */
.hero5 .bar{background-size:150% 100%;animation:barpulse 7s ease-in-out infinite alternate}
@keyframes barpulse{0%{background-position:0% 50%;filter:brightness(.92) saturate(.95)}50%{filter:brightness(1.12) saturate(1.15)}100%{background-position:100% 50%;filter:brightness(.96) saturate(1)}}
@media (prefers-reduced-motion:reduce){.hero5 .bar,.site-nav a:hover{animation:none}}
/* hero: the gradient inside the rotating word drifts slowly */
.rot .slot span{background-size:220% 100%;animation:wordsheen 4.5s ease-in-out infinite alternate}
@keyframes wordsheen{from{background-position:0% 50%}to{background-position:100% 50%}}
/* last section: the bright horizon starts near the top of the frame and settles into place as you scroll to the bottom */
section.contact>.glow{background-size:160px 160px,100% 100%;background-repeat:repeat,no-repeat;background-position:0 0,center var(--gy,0px);will-change:background-position}
@media (prefers-reduced-motion:reduce){.rot .slot span{animation:none}}

/* services: sticky stage — titles scroll on the left, the image for the active one swaps on the right */
.svx{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(24px,4vw,72px);align-items:start;border-top:1px solid var(--rule)}
.svx .sv-list{border-top:0}
.svx .sv{display:flex;align-items:center;min-height:64vh;padding:0;border-bottom:1px solid var(--rule);grid-template-columns:none}
.svx .sv:last-child{border-bottom:0}
.svx .sv-t h3{color:#B9B8B3;transition:color .25s}
.svx .sv-t p,.svx .sv-t .mono{opacity:.35;transition:opacity .3s}
.svx .sv.on .sv-t h3{color:transparent;background:linear-gradient(90deg,#1B2A4E 0%,#2F4772 14%,#5F7898 28%,#A9A7A2 44%,#E7C48D 58%,#EFB24F 68%,#C7742A 82%,#86391A 100%);-webkit-background-clip:text;background-clip:text}
.svx .sv.on .sv-t p,.svx .sv.on .sv-t .mono{opacity:1}
.svx .sv-img.m{display:none}
.svx-stage{position:sticky;top:calc(50vh - min(19vw,280px));height:min(38vw,560px)}
.svx-frame{position:relative;height:100%;overflow:hidden;background:#111}
.svx-img{position:absolute;inset:0;margin:0;overflow:hidden;transform:translate3d(0,100%,0);will-change:transform;transition:none}
.svx-img img{width:100%;height:100%;object-fit:cover;display:block;transform:translate3d(0,-100%,0) scale(1.06);will-change:transform;transition:none}
.svx-img.on{transform:translate3d(0,0,0);z-index:2;transition:transform .55s cubic-bezier(.6,0,.2,1)}
.svx-img.on img{transform:translate3d(0,0,0) scale(1);transition:transform .55s cubic-bezier(.6,0,.2,1)}
.svx-img.was{transform:translate3d(0,0,0);z-index:1}
.svx-img.was img{transform:translate3d(0,0,0) scale(1)}
@media (max-width:900px){.svx{grid-template-columns:1fr}.svx-stage{display:none}.svx .sv{display:grid;grid-template-columns:1fr;min-height:0;padding:clamp(20px,4vw,32px) 0;gap:16px}.svx .sv-img.m{display:block;order:-1}
  .svx .sv-t h3{color:var(--ink)}.svx .sv-t p,.svx .sv-t .mono{opacity:1}}
/* footer: big SCC mark, assembled from blocks when it scrolls in */
.foot .big{position:relative;display:block!important;width:100%;height:auto;color:var(--on);margin-bottom:clamp(20px,3vw,40px)}
.foot .bigwrap{position:relative}
.foot .bigwrap canvas{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}

/* closing section: our wave gradient — a dark bowl rimmed in blue and teal over a red-orange glow */
section.contact>.glow{background:
 radial-gradient(58% 52% at 50% 26%,#050508 0%,#050508 52%,rgba(5,5,8,0) 72%),
 radial-gradient(95% 80% at 50% 16%,rgba(5,5,8,0) 46%,rgba(20,36,200,.95) 56%,rgba(40,90,190,.9) 61%,rgba(95,150,165,.85) 67%,rgba(190,100,60,0) 80%),
 radial-gradient(50% 55% at 86% 100%,rgba(228,142,56,.95) 0%,rgba(228,142,56,0) 70%),
 radial-gradient(50% 55% at 14% 100%,rgba(150,40,15,.9) 0%,rgba(150,40,15,0) 70%),
 linear-gradient(180deg,#050508 0%,#06060b 24%,#3a2030 42%,#c8381a 62%,#dc441a 80%,#c25a24 100%);
 background-size:100% 100%;background-repeat:no-repeat;background-position:0 0;transform:translate3d(0,var(--gy,0px),0);will-change:transform}

/* ===== palette: every gradient follows the closing wave gradient (blue · teal · red-orange · amber) ===== */
:root{--strato:linear-gradient(180deg,#050508 0%,#06060b 18%,#0d1240 30%,#1424C8 42%,#2850BE 49%,#5F96A5 56%,#B07A5A 61%,#C8381A 68%,#DC441A 77%,#E48E38 86%,#C25A24 93%,#3A140A 100%)}
.hero5 .bar{background:linear-gradient(90deg,#050508 0%,#0d1240 10%,#1424C8 24%,#2850BE 32%,#5F96A5 42%,#B07A5A 50%,#C8381A 60%,#DC441A 70%,#E48E38 82%,#C25A24 92%,#3A140A 100%);background-size:150% 100%}
.rot .slot span{background-image:linear-gradient(90deg,#1424C8 0%,#2850BE 16%,#5F96A5 32%,#C8381A 52%,#DC441A 66%,#E48E38 82%,#C25A24 100%)}
.site-nav a{background-image:linear-gradient(90deg,#2850BE 0%,#5F96A5 16%,#DC441A 34%,#E48E38 48%,#C25A24 62%,#1424C8 82%,#2850BE 100%)}
.xpx .nm{background-image:linear-gradient(90deg,#1424C8 0%,#2850BE 9%,#5F96A5 18%,#C8381A 28%,#DC441A 36%,#E48E38 43%,#C25A24 48%,#B9B8B3 50%,#B9B8B3 100%)}
.svx .sv.on .sv-t h3{background-image:linear-gradient(90deg,#1424C8 0%,#2850BE 16%,#5F96A5 32%,#C8381A 54%,#DC441A 68%,#E48E38 84%,#C25A24 100%)}
.btn::before,.btn::after{background:radial-gradient(120px circle at var(--mx,50%) var(--my,50%),rgba(228,142,56,.9) 0%,rgba(220,68,26,.75) 22%,rgba(95,150,165,.55) 46%,rgba(20,36,200,.45) 64%,rgba(5,5,8,0) 85%),
  conic-gradient(from var(--ang),rgba(20,36,200,.4),rgba(40,80,190,.38),rgba(95,150,165,.34),rgba(200,56,26,.38),rgba(228,142,56,.42),rgba(194,90,36,.34),rgba(20,36,200,.4))}
.has-sky .sky{background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .05 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"),var(--strato);background-size:160px 160px,100% 100%}

/* home hero: the wave gradient fills the right side and drifts with the cursor */
.hero5{position:relative;isolation:isolate}
.hwave{position:absolute;z-index:-1;top:0;right:0;bottom:0;width:62%;overflow:hidden;pointer-events:none;
  -webkit-mask-image:linear-gradient(90deg,transparent 0%,#000 26%);mask-image:linear-gradient(90deg,transparent 0%,#000 26%)}
.hwave i{position:absolute;inset:-12%;display:block;filter:blur(14px);
  transform:translate3d(var(--hx,0px),var(--hy,0px),0) rotate(var(--hr,0deg)) scale(1.04);will-change:transform;
  background:
   radial-gradient(58% 52% at 60% 26%,#EEEDEA 0%,#EEEDEA 50%,rgba(238,237,234,0) 72%),
   radial-gradient(95% 80% at 60% 16%,rgba(238,237,234,0) 46%,rgba(20,36,200,.95) 56%,rgba(40,90,190,.9) 61%,rgba(95,150,165,.85) 67%,rgba(190,100,60,0) 80%),
   radial-gradient(55% 55% at 92% 100%,rgba(228,142,56,.95) 0%,rgba(228,142,56,0) 70%),
   radial-gradient(60% 50% at 0% 85%,rgba(150,40,15,.9) 0%,rgba(150,40,15,0) 70%),
   linear-gradient(180deg,#EEEDEA 0%,#EEEDEA 24%,#d8b3a6 42%,#c8381a 62%,#dc441a 80%,#c25a24 100%);
  animation:wavepulse 8s ease-in-out infinite alternate}
@keyframes wavepulse{0%{filter:blur(14px) brightness(.95) saturate(1)}100%{filter:blur(14px) brightness(1.08) saturate(1.12)}}
.hero5 .bar{display:none}
.hero5 .copy,.hero5 .cta-r{position:relative;z-index:1}
@media (max-width:900px){.hwave{width:100%;top:auto;height:46%;-webkit-mask-image:linear-gradient(180deg,transparent 0%,#000 30%);mask-image:linear-gradient(180deg,transparent 0%,#000 30%)}}
@media (prefers-reduced-motion:reduce){.hwave i{animation:none}}
@media (min-width:901px){
.hero5 h1{max-width:44vw;font-size:clamp(32px,3.5vw,56px)}
.hero5 h1 .hl{display:inline;white-space:normal}
.hero5 h1 .hl:last-child{display:block;white-space:nowrap}
.hwave{width:56%;-webkit-mask-image:linear-gradient(90deg,transparent 0%,#000 30%);mask-image:linear-gradient(90deg,transparent 0%,#000 30%)}
}
/* hero wave: an organic soft shape on the right, no straight edge */
@media (min-width:901px){
.hwave{left:0;width:auto;
  -webkit-mask-image:radial-gradient(ellipse 52% 78% at 84% 54%,#000 0%,#000 38%,rgba(0,0,0,.55) 62%,transparent 86%);
  mask-image:radial-gradient(ellipse 52% 78% at 84% 54%,#000 0%,#000 38%,rgba(0,0,0,.55) 62%,transparent 86%)}
.hwave i{inset:-8% -6% -8% 30%}
}

/* hero: the whole hero carries the wave, flipped (warm glow on top, light bowl at the bottom) */

.hero5 .hwave{inset:0;left:0;right:0;top:0;bottom:0;width:auto;height:auto;-webkit-mask-image:none;mask-image:none}
.hero5 .hwave i{inset:-6%;transform:translate3d(var(--hx,0px),var(--hy,0px),0) rotate(var(--hr,0deg)) scale(1.04,-1.04)}
html:has(.hero5) .site-head:not(.past){mix-blend-mode:normal;color:var(--ink)}
html:has(.hero5) .site-head:not(.past) .site-nav a{color:#161616}
.hero5 .meta{color:var(--ink)}
html:has(.hero5) .site-head:not(.past) .brand{color:var(--ink)}
.hero5 .rot .slot span{background-image:linear-gradient(90deg,#0d1240 0%,#1424C8 22%,#1d3a8a 40%,#7a1e0c 62%,#96280F 78%,#3A140A 100%)}

/* hero gradient C: only the gradient moves (its glow centres drift and pulse from the bottom-right toward the top-left);
   the layer itself never moves, so no edge can show */
@property --gx{syntax:'<length-percentage>';inherits:false;initial-value:0%}
@property --gy{syntax:'<length-percentage>';inherits:false;initial-value:0%}
@property --gs{syntax:'<number>';inherits:false;initial-value:1}
.hero5 .hwave{bottom:8vh}
.hero5 .hwave i{inset:0;filter:none;animation:none;transform:none;background:#EEEDEA}
.hero5 .hwave i::before{content:"";position:absolute;inset:0;
  --cx:calc(var(--hx,0px)*-.9);--cy:calc(var(--hy,0px)*-.9);
  background:
   radial-gradient(calc(60% * var(--gs)) calc(70% * var(--gs)) at calc(100% + var(--gx) + var(--cx)) calc(100% + var(--gy) + var(--cy)),rgba(228,142,56,.95),rgba(228,142,56,0) 70%),
   radial-gradient(calc(55% * var(--gs)) calc(60% * var(--gs)) at calc(78% + var(--gx) + var(--cx)*.7) calc(92% + var(--gy) + var(--cy)*.7),rgba(220,68,26,.8),rgba(220,68,26,0) 70%),
   radial-gradient(50% 55% at calc(96% + var(--gx)*.5 + var(--cx)*.4) calc(40% + var(--gy)*.5 + var(--cy)*.4),rgba(40,80,190,.55),rgba(40,80,190,0) 70%),
   radial-gradient(40% 45% at calc(66% + var(--gx)*.8 + var(--cx)*.5) calc(70% + var(--gy)*.8 + var(--cy)*.5),rgba(95,150,165,.45),rgba(95,150,165,0) 70%);
  animation:glowdiag 7s cubic-bezier(.45,0,.55,1) infinite alternate}
@keyframes glowdiag{0%{--gx:4%;--gy:4%;--gs:.9}100%{--gx:-10%;--gy:-10%;--gs:1.22}}
@media (prefers-reduced-motion:reduce){.hero5 .hwave i::before{animation:none}}

/* hero -> Selected Work: on scroll the warm glow floods the hero, then deepens into the dark of Selected Work.
   The gradient layer is sticky inside the (taller) hero; --sp (0..1) is the scroll progress set in main.js */
.hero5{overflow:clip;min-height:calc(100svh + 45vh);padding-bottom:calc(clamp(48px,8vh,80px) + 45vh)}
.hero5 .hwave{inset:0;bottom:0;overflow:clip}
.hero5 .hwave i{position:sticky;inset:auto;top:0;height:100svh;width:100%;overflow:hidden}
.hero5 .hwave i::before{
  --k:calc(1 + var(--sp,0) * 2.1);--mx:calc(var(--sp,0) * -38%);--my:calc(var(--sp,0) * -30%);
  background:
   radial-gradient(calc(60% * var(--gs) * var(--k)) calc(70% * var(--gs) * var(--k)) at calc(100% + var(--gx) + var(--cx) + var(--mx)) calc(100% + var(--gy) + var(--cy) + var(--my)),rgba(228,142,56,.95),rgba(228,142,56,0) 70%),
   radial-gradient(calc(55% * var(--gs) * var(--k)) calc(60% * var(--gs) * var(--k)) at calc(78% + var(--gx) + var(--cx)*.7 + var(--mx)) calc(92% + var(--gy) + var(--cy)*.7 + var(--my)),rgba(220,68,26,.8),rgba(220,68,26,0) 70%),
   radial-gradient(calc(50% * var(--k)) calc(55% * var(--k)) at calc(96% + var(--gx)*.5 + var(--cx)*.4 + var(--mx)*.6) calc(40% + var(--gy)*.5 + var(--cy)*.4 + var(--my)*.6),rgba(40,80,190,.55),rgba(40,80,190,0) 70%),
   radial-gradient(calc(40% * var(--k)) calc(45% * var(--k)) at calc(66% + var(--gx)*.8 + var(--cx)*.5 + var(--mx)) calc(70% + var(--gy)*.8 + var(--cy)*.5 + var(--my)),rgba(95,150,165,.45),rgba(95,150,165,0) 70%)}
/* the dusk: dark rises from the bottom first, then covers everything */
.hero5 .hwave i::after{content:"";position:absolute;inset:0;pointer-events:none;
  --a:clamp(0,calc((var(--sp,0) - .6) * 2.9),1);
  background:linear-gradient(rgba(14,14,14,var(--a)),rgba(14,14,14,var(--a))),linear-gradient(0deg,#0E0E0E 0%,#0E0E0E 35%,rgba(14,14,14,.55) 70%,rgba(14,14,14,0) 100%);
  opacity:clamp(0,calc((var(--sp,0) - .3) * 2.6),1)}
.hero5 .hwave i::before{z-index:0}.hero5 .hwave i::after{z-index:1}
@media (max-width:760px){.hero5{min-height:calc(100svh + 30vh);padding-bottom:calc(40px + 30vh)}}
/* the hero copy fades as the dusk comes in */
.hero5:not(.hlens-hero) .copy,.hero5:not(.hlens-hero) .cta-r{filter:opacity(clamp(0,calc(1 - (var(--sp,0) - .15) * 1.9),1))}

/* hero: WebGL gradient (canvas) replaces the CSS glow when available; the dusk overlay stays on top */
.hero5 .hwave i .hgl{position:absolute;inset:0;width:100%;height:100%;display:block;z-index:0}
.hero5 .hwave i.gl::before{display:none}
/* glass lens */
.hlens{position:fixed;left:0;top:0;z-index:40;border-radius:50%;overflow:hidden;pointer-events:none;opacity:0;transition:opacity .25s;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.6),inset 0 10px 22px rgba(255,255,255,.28),inset 0 -12px 22px rgba(0,0,0,.10),0 14px 34px rgba(10,10,20,.16);will-change:transform}
.hlens::after{content:"";position:absolute;inset:0;border-radius:50%;pointer-events:none;
  background:radial-gradient(60% 40% at 32% 22%,rgba(255,255,255,.32),rgba(255,255,255,0) 70%),radial-gradient(80% 80% at 50% 50%,rgba(255,255,255,0) 62%,rgba(255,255,255,.14) 100%)}
.hlens-in{position:absolute;left:0;top:0;will-change:transform}
.hlens-bg{position:absolute;inset:0;width:100%;height:100%;display:block}
.hlens::after{z-index:2}
.hero5.hlens-hero{position:absolute;inset:0;min-height:0;height:100%;overflow:visible;background:none}

/* Selected Work rises into the dusk instead of waiting below it */
.hero5+.work{position:relative;z-index:1;margin-top:-40vh;background:linear-gradient(180deg,rgba(14,14,14,0) 0,#0E0E0E 30vh,#0E0E0E 100%)}
@media (max-width:760px){.hero5+.work{margin-top:-28vh;background:linear-gradient(180deg,rgba(14,14,14,0) 0,#0E0E0E 26vh,#0E0E0E 100%)}}

/* hero = the contact wave, centred, on our off-white. On scroll the off-white bowl darkens into the
   contact (black) version, then everything sinks to black and runs into Selected Work. --sp is set in main.js */
.hero5 .hwave i{--d:clamp(0%,calc(var(--sp,0) * 210%),100%);
  --bw:color-mix(in srgb,#EEEDEA,#050508 var(--d));--bw0:color-mix(in srgb,rgba(238,237,234,0),rgba(5,5,8,0) var(--d));
  --mid:color-mix(in srgb,#d8b3a6,#3a2030 var(--d))}
.hero5 .hwave i::before{animation:wavebreathe 9s ease-in-out infinite alternate;
  background:
   radial-gradient(calc(60% * var(--gs)) calc(62% * var(--gs)) at calc(50% + var(--cx)*.6) 26%,var(--bw) 0%,var(--bw) 52%,var(--bw0) 72%),
   radial-gradient(calc(95% * var(--gs)) calc(96% * var(--gs)) at calc(50% + var(--cx)) calc(16% + var(--cy)*.5),var(--bw0) 46%,rgba(20,36,200,.95) 56%,rgba(40,90,190,.9) 61%,rgba(95,150,165,.85) 67%,rgba(190,100,60,0) 80%),
   radial-gradient(50% 55% at calc(86% + var(--cx)*.4) 100%,rgba(228,142,56,.95) 0%,rgba(228,142,56,0) 70%),
   radial-gradient(50% 55% at calc(14% + var(--cx)*.4) 100%,rgba(150,40,15,.9) 0%,rgba(150,40,15,0) 70%),
   linear-gradient(180deg,var(--bw) 0%,var(--bw) 34%,var(--mid) 52%,#c8381a 70%,#dc441a 86%,#c25a24 100%)}
@keyframes wavebreathe{0%{--gs:.97}100%{--gs:1.04}}
.hero5 .hwave i::after{--a:clamp(0,calc((var(--sp,0) - .62) * 3),1);opacity:clamp(0,calc((var(--sp,0) - .45) * 2.6),1)}
@media (prefers-reduced-motion:reduce){.hero5 .hwave i::before{animation:none}}
html:has(.hero5) .site-head:not(.past) .menu-btn{color:var(--ink)}

/* ===== palette v3: off-white -> light blue -> blue -> violet-black, orange kept to a trace ===== */
/* closing section: the original wave — black bowl, blue + teal rim, red-orange glow below */
section.contact>.glow{background:
 radial-gradient(58% 52% at 50% 26%,#050508 0%,#050508 52%,rgba(5,5,8,0) 72%),
 radial-gradient(95% 80% at 50% 16%,rgba(5,5,8,0) 46%,rgba(20,36,200,.95) 56%,rgba(40,90,190,.9) 61%,rgba(95,150,165,.85) 67%,rgba(190,100,60,0) 80%),
 radial-gradient(50% 55% at 86% 100%,rgba(228,142,56,.95) 0%,rgba(228,142,56,0) 70%),
 radial-gradient(50% 55% at 14% 100%,rgba(150,40,15,.9) 0%,rgba(150,40,15,0) 70%),
 linear-gradient(180deg,#050508 0%,#06060b 24%,#3a2030 42%,#c8381a 62%,#dc441a 80%,#c25a24 100%);
 background-size:100% 100%;background-repeat:no-repeat;background-position:0 0}

/* home hero: the same wave flipped vertically — off-white bowl rising from the bottom, light blue, blue,
   violet-black at the top. On scroll the bowl darkens and everything sinks to black into Selected Work */
.hero5 .hwave i{--bw:color-mix(in srgb,#EEEDEA,#050508 var(--d));--bw0:color-mix(in srgb,rgba(238,237,234,0),rgba(5,5,8,0) var(--d));
  --mid:color-mix(in srgb,#b9c9ea,#18123c var(--d))}
.hero5 .hwave i::before{
  background:
   radial-gradient(calc(58% * var(--gs)) calc(52% * var(--gs)) at 50% 74%,var(--bw) 0%,var(--bw) 52%,var(--bw0) 72%),
   radial-gradient(calc(95% * var(--gs)) calc(80% * var(--gs)) at 50% 84%,var(--bw0) 44%,rgba(169,193,236,.95) 52%,rgba(40,80,190,.95) 59%,rgba(20,36,200,.95) 64%,rgba(42,20,88,.9) 72%,rgba(10,6,20,0) 86%),
   radial-gradient(38% 40% at 90% 0%,rgba(228,142,56,.2) 0%,rgba(228,142,56,0) 70%),
   linear-gradient(0deg,var(--bw) 0%,var(--bw) 26%,var(--mid) 38%,#2850BE 52%,#1424C8 62%,#26124c 78%,#0a0614 100%)}

/* header over the violet-black top of the home hero: light */
html:has(.hero5) .site-head:not(.past),html:has(.hero5) .site-head:not(.past) .brand,html:has(.hero5) .site-head:not(.past) .menu-btn{color:var(--on)}
html:has(.hero5) .site-head:not(.past) .site-nav a{color:#EDECE8}
/* phones: the hero copy sits on the violet-blue top of the flipped wave, so it turns light */
@media (max-width:760px){
.hero5 h1,.hero5 .meta{color:#EDECE8}
.hero5 .rot .slot span{background-image:linear-gradient(90deg,#c9d6f2 0%,#EEEDEA 50%,#a9c1ec 100%)}
.hero5 .cta-r .btn{background:#EDECE8;color:var(--ink);box-shadow:inset 0 0 0 4px #EDECE8,inset 0 0 0 5px rgba(0,0,0,.18)}
}

/* home hero (v4): the dark closing wave, flipped — black bowl at the bottom, blue rim, violet-black top.
   No off-white field anywhere; the copy is light */
.hero5 h1,.hero5 .meta{color:#EDECE8}
.hero5 .rot .slot span{background-image:linear-gradient(90deg,#9fb6ff 0%,#EEEDEA 50%,#a9c1ec 100%)}
.hero5 .cta-r .btn{background:#EDECE8;color:var(--ink);box-shadow:inset 0 0 0 4px #EDECE8,inset 0 0 0 5px rgba(0,0,0,.18)}
.hero5 .hwave i{background:#050508}
.hero5 .hwave i:not(.gl)::before{background:
   radial-gradient(58% 52% at 50% 74%,#050508 0%,#050508 52%,rgba(5,5,8,0) 72%),
   radial-gradient(95% 80% at 50% 84%,rgba(5,5,8,0) 46%,rgba(20,36,200,.95) 56%,rgba(40,90,190,.9) 61%,rgba(95,150,165,.85) 67%,rgba(190,100,60,0) 80%),
   radial-gradient(50% 55% at 86% 0%,rgba(228,142,56,.95) 0%,rgba(228,142,56,0) 70%),
   radial-gradient(50% 55% at 14% 0%,rgba(150,40,15,.9) 0%,rgba(150,40,15,0) 70%),
   linear-gradient(0deg,#050508 0%,#06060b 24%,#3a2030 42%,#c8381a 62%,#dc441a 80%,#c25a24 100%)}
.hero5 .rot::before,.hero5 .rot::after{background:#EDECE8}
.hero5 .hwave i::after{--a:clamp(0,calc((var(--sp,0) - .8) * 5),1);opacity:clamp(0,calc((var(--sp,0) - .62) * 3.2),1)}

/* hero v6: poster gradient on our off-white — header and CTA back to ink, headline light over the bands */
html:has(.hero5) .site-head:not(.past),html:has(.hero5) .site-head:not(.past) .brand,html:has(.hero5) .site-head:not(.past) .menu-btn{color:var(--ink)}
html:has(.hero5) .site-head:not(.past) .site-nav a{color:#161616}
.hero5 .cta-r .btn{background:var(--ink);color:#F2F1EE;box-shadow:inset 0 0 0 4px var(--ink),inset 0 0 0 5px rgba(255,255,255,.2)}
.hero5 .rot .slot span{background-image:linear-gradient(90deg,#FFD9B0 0%,#EEEDEA 50%,#BFD8F0 100%)}
.hero5 .hwave i{background:#EEEDEA}
.hero5 .hwave i:not(.gl)::before{animation:none;background:linear-gradient(180deg,#F0A046 12%,#F06A28 30%,#E2401C 40%,#8E1E10 50%,#1E0E10 60%,#141A3A 68%,#2C4BA8 80%,#5A86CC 92%,#96C4E2 100%);
  -webkit-mask-image:linear-gradient(90deg,#000 55%,transparent 85%),linear-gradient(180deg,transparent 10%,#000 30%);-webkit-mask-composite:source-in;mask-image:linear-gradient(90deg,#000 55%,transparent 85%),linear-gradient(180deg,transparent 10%,#000 30%);mask-composite:intersect}
@media (max-width:760px){
.hero5 .cta-r .btn{background:#EDECE8;color:var(--ink);box-shadow:inset 0 0 0 4px #EDECE8,inset 0 0 0 5px rgba(0,0,0,.18)}
}

/* hero v7 (D6 sunrise on off-white): dark copy, no CSS blur anywhere (no light frame at the edges) */
.hero5 h1,.hero5 .meta{color:var(--ink)}
.hero5 .rot::before,.hero5 .rot::after{background:var(--ink)}
.hero5 .rot .slot span{background-image:linear-gradient(90deg,#0d1240 0%,#1424C8 30%,#7a1e3a 70%,#C8381A 100%)}
.hero5 .cta-r .btn{background:var(--ink);color:#F2F1EE;box-shadow:inset 0 0 0 4px var(--ink),inset 0 0 0 5px rgba(255,255,255,.2)}
.hero5 .hwave,.hero5 .hwave i,.hero5 .hwave i::before{filter:none!important}
.hero5 .hwave i:not(.gl)::before{-webkit-mask-image:none;mask-image:none;background:radial-gradient(98% 102% at 50% 113%,#F4AA54 0%,#EE9444 9%,#E26E34 17%,#CC4E2E 24%,#9a3238 30%,#601e40 36%,#30163e 41%,#181838 45%,#1a2468 50%,#2848a8 56%,#4a7cc0 63%,#82aad2 70%,rgba(184,204,232,.7) 77%,rgba(238,237,234,0) 89%),#EEEDEA}
@media (max-width:760px){
.hero5 h1,.hero5 .meta{color:var(--ink)}
.hero5 .rot .slot span{background-image:linear-gradient(90deg,#0d1240 0%,#1424C8 30%,#7a1e3a 70%,#C8381A 100%)}
.hero5 .cta-r .btn{background:var(--ink);color:#F2F1EE;box-shadow:inset 0 0 0 4px var(--ink),inset 0 0 0 5px rgba(255,255,255,.2)}
}

/* ===== D6 sunrise everywhere: closing section + hovers + buttons ===== */
section.contact>.glow{background:radial-gradient(98% 102% at 50% 113%,rgba(243,166,81,1.000) 0.0%,rgba(241,161,78,1.000) 3.0%,rgba(239,153,73,1.000) 6.0%,rgba(237,144,68,1.000) 9.0%,rgba(233,133,62,1.000) 12.0%,rgba(227,119,57,1.000) 15.0%,rgba(220,105,53,1.000) 18.0%,rgba(210,92,50,1.000) 21.0%,rgba(195,78,50,1.000) 24.0%,rgba(175,65,52,1.000) 27.0%,rgba(151,52,56,1.000) 30.0%,rgba(123,41,59,1.000) 33.0%,rgba(98,34,61,1.000) 36.0%,rgba(71,28,62,1.000) 39.0%,rgba(50,27,65,1.000) 42.0%,rgba(36,29,75,1.000) 45.0%,rgba(31,35,91,0.999) 48.0%,rgba(31,46,115,0.996) 51.0%,rgba(36,59,139,0.984) 54.0%,rgba(42,72,159,0.955) 57.0%,rgba(47,82,171,0.904) 60.0%,rgba(51,88,177,0.831) 63.0%,rgba(52,90,178,0.724) 66.0%,rgba(50,87,176,0.596) 69.0%,rgba(46,80,169,0.463) 72.0%,rgba(41,72,157,0.349) 75.0%,rgba(36,62,137,0.243) 78.0%,rgba(31,52,114,0.154) 81.0%,rgba(27,44,92,0.082) 84.0%,rgba(24,37,76,0.037) 87.0%,rgba(22,32,61,0.011) 90.0%,rgba(14,14,14,0.002) 93.0%,rgba(14,14,14,0.000) 96.0%,rgba(14,14,14,0.000) 99.0%,rgba(14,14,14,0.000) 102.0%,rgba(14,14,14,0.000) 105.0%,rgba(14,14,14,0.000) 108.0%),#0E0E0E;background-size:100% 100%;background-repeat:no-repeat;background-position:0 0;filter:none!important;left:0!important;right:0!important;top:0!important}
.s.light+section.contact{background:#EEEDEA}
.s.light+section.contact>.glow{background:radial-gradient(98% 102% at 50% 113%,rgba(243,166,81,1.000) 0.0%,rgba(241,161,78,1.000) 3.0%,rgba(239,153,73,1.000) 6.0%,rgba(237,144,68,1.000) 9.0%,rgba(233,133,62,1.000) 12.0%,rgba(227,119,57,1.000) 15.0%,rgba(220,105,53,1.000) 18.0%,rgba(210,92,50,1.000) 21.0%,rgba(195,78,50,1.000) 24.0%,rgba(175,65,52,1.000) 27.0%,rgba(151,52,56,1.000) 30.0%,rgba(123,41,59,1.000) 33.0%,rgba(98,34,61,1.000) 36.0%,rgba(71,28,62,1.000) 39.0%,rgba(50,27,65,1.000) 42.0%,rgba(36,29,75,1.000) 45.0%,rgba(31,35,91,1.000) 48.0%,rgba(32,47,115,1.000) 51.0%,rgba(38,63,141,1.000) 54.0%,rgba(49,82,163,1.000) 57.0%,rgba(63,103,179,1.000) 60.0%,rgba(79,122,190,0.997) 63.0%,rgba(99,142,199,0.984) 66.0%,rgba(120,160,207,0.947) 69.0%,rgba(141,175,215,0.871) 72.0%,rgba(159,188,221,0.766) 75.0%,rgba(176,199,227,0.623) 78.0%,rgba(191,208,230,0.462) 81.0%,rgba(202,215,232,0.300) 84.0%,rgba(210,220,233,0.171) 87.0%,rgba(216,224,233,0.072) 90.0%,rgba(221,227,233,0.022) 93.0%,rgba(226,230,234,0.004) 96.0%,rgba(238,238,238,0.000) 99.0%,rgba(238,238,238,0.000) 102.0%,rgba(238,238,238,0.000) 105.0%,rgba(238,238,238,0.000) 108.0%),#EEEDEA}
.s.light+section.contact .cta-band{color:var(--ink)}
.s.light+section.contact .cta-band .label{color:var(--ink2)}
.s.light+section.contact .cta-band .btn{background:var(--ink);color:#F2F1EE;box-shadow:inset 0 0 0 4px var(--ink),inset 0 0 0 5px rgba(255,255,255,.2)}
.s.light+section.contact .foot{border-top-color:rgba(237,236,232,.18)}
/* palette of hovers / buttons / headings */
:root{--strato:radial-gradient(98% 102% at 50% 113%,rgba(243,166,81,1.000) 0.0%,rgba(241,161,78,1.000) 3.0%,rgba(239,153,73,1.000) 6.0%,rgba(237,144,68,1.000) 9.0%,rgba(233,133,62,1.000) 12.0%,rgba(227,119,57,1.000) 15.0%,rgba(220,105,53,1.000) 18.0%,rgba(210,92,50,1.000) 21.0%,rgba(195,78,50,1.000) 24.0%,rgba(175,65,52,1.000) 27.0%,rgba(151,52,56,1.000) 30.0%,rgba(123,41,59,1.000) 33.0%,rgba(98,34,61,1.000) 36.0%,rgba(71,28,62,1.000) 39.0%,rgba(50,27,65,1.000) 42.0%,rgba(36,29,75,1.000) 45.0%,rgba(31,35,91,1.000) 48.0%,rgba(32,47,115,1.000) 51.0%,rgba(38,63,141,1.000) 54.0%,rgba(49,82,163,1.000) 57.0%,rgba(63,103,179,1.000) 60.0%,rgba(79,122,190,0.997) 63.0%,rgba(99,142,199,0.984) 66.0%,rgba(120,160,207,0.947) 69.0%,rgba(141,175,215,0.871) 72.0%,rgba(159,188,221,0.766) 75.0%,rgba(176,199,227,0.623) 78.0%,rgba(191,208,230,0.462) 81.0%,rgba(202,215,232,0.300) 84.0%,rgba(210,220,233,0.171) 87.0%,rgba(216,224,233,0.072) 90.0%,rgba(221,227,233,0.022) 93.0%,rgba(226,230,234,0.004) 96.0%,rgba(238,238,238,0.000) 99.0%,rgba(238,238,238,0.000) 102.0%,rgba(238,238,238,0.000) 105.0%,rgba(238,238,238,0.000) 108.0%)}
.rot .slot span,.svx .sv.on .sv-t h3{background-image:linear-gradient(90deg,#F4AA54 0%,#E26E34 14%,#CC4E2E 26%,#9a3238 38%,#601e40 48%,#30163e 56%,#1a2468 64%,#2848a8 74%,#4a7cc0 86%,#82aad2 100%)}
.site-nav a{background-image:linear-gradient(90deg,#2848a8 0%,#4a7cc0 14%,#E26E34 34%,#F4AA54 48%,#CC4E2E 62%,#601e40 76%,#2848a8 100%)}
.xpx .nm{background-image:linear-gradient(90deg,#2848a8 0%,#4a7cc0 9%,#9a3238 20%,#CC4E2E 30%,#E26E34 38%,#F4AA54 45%,#B9B8B3 50%,#B9B8B3 100%)}
.btn::before,.btn::after{background:radial-gradient(120px circle at var(--mx,50%) var(--my,50%),rgba(244,170,84,.95) 0%,rgba(226,110,52,.8) 20%,rgba(154,50,56,.6) 40%,rgba(40,72,168,.5) 62%,rgba(5,5,8,0) 85%),
  conic-gradient(from var(--ang),rgba(40,72,168,.45),rgba(74,124,192,.4),rgba(244,170,84,.45),rgba(226,110,52,.42),rgba(154,50,56,.4),rgba(96,30,64,.38),rgba(40,72,168,.45))}
.hero5 .rot .slot span{background-image:linear-gradient(90deg,#1a2468 0%,#2848a8 30%,#9a3238 70%,#CC4E2E 100%)}
.s.light+section.contact>.glow{filter:none!important}
.s.light+section.contact .contact-row a:not(.btn){color:var(--ink)}

/* ======== soft menu (mobile) ======== */
.menu{opacity:1;visibility:hidden;clip-path:inset(0 0 100% 0 round 0 0 28px 28px);transition:clip-path .75s cubic-bezier(.76,0,.24,1),visibility 0s linear .75s;will-change:clip-path}
.menu.open{visibility:visible;clip-path:inset(0 0 0 0 round 0);transition:clip-path .85s cubic-bezier(.76,0,.24,1),visibility 0s}
.menu ul li{overflow:hidden}
.menu ul a{transform:translateY(105%);transition:transform .5s cubic-bezier(.5,0,.75,0)}
.menu.open ul a{transform:none;transition:transform 1s cubic-bezier(.16,1,.3,1) calc(.32s + var(--i,0)*.07s)}
.menu-top,.menu>span{opacity:0;transform:translateY(-8px);transition:opacity .3s ease,transform .3s ease}
.menu.open .menu-top,.menu.open>span{opacity:1;transform:none;transition:opacity .6s ease .45s,transform .8s cubic-bezier(.16,1,.3,1) .45s}
.menu.open>span{transition-delay:.7s}
.menu-btn{transition:opacity .3s ease}
html.menu-on .menu-btn{opacity:0}
@media (prefers-reduced-motion:reduce){.menu,.menu.open,.menu ul a,.menu.open ul a,.menu-top,.menu>span{transition:none;transform:none}}
/* hero eyebrow */
.hero5 .eyebrow{font-size:clamp(15px,1.45vw,21px);font-weight:500;letter-spacing:-.005em;color:var(--ink);margin-bottom:calc(clamp(24px,3vw,40px)*-1 + clamp(10px,1.1vw,16px))}
.hero5 .meta span:last-child{max-width:none}

/* ===== film grain on every gradient (replaces the patterned shader noise) ===== */
:root{--grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n' x='0' y='0'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3' seed='7' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
.hero5 .hwave i .grain{position:absolute;inset:0;z-index:2;pointer-events:none;background:var(--grain) 0 0/220px 220px repeat;mix-blend-mode:overlay;opacity:.55}
section.contact>.glow::after{content:"";position:absolute;inset:0;pointer-events:none;background:var(--grain) 0 0/220px 220px repeat;mix-blend-mode:overlay;opacity:.55}
.meet::after{content:"";position:absolute;inset:0;pointer-events:none;background:var(--grain) 0 0/220px 220px repeat;mix-blend-mode:overlay;opacity:.6;
  -webkit-mask-image:radial-gradient(circle at 50% 50%,#000 0,#000 clamp(110px,14vw,200px),transparent clamp(150px,18vw,250px));mask-image:radial-gradient(circle at 50% 50%,#000 0,#000 clamp(110px,14vw,200px),transparent clamp(150px,18vw,250px))}
@media (prefers-reduced-motion:no-preference){.hero5 .hwave i .grain,section.contact>.glow::after{animation:grn 1.2s steps(6) infinite}}
@keyframes grn{0%{background-position:0 0}17%{background-position:-63px 41px}33%{background-position:88px -27px}50%{background-position:-31px -94px}67%{background-position:52px 77px}83%{background-position:-104px 12px}100%{background-position:0 0}}

/* contact page orb in the D6 sunrise colours */
.meet .l{background:radial-gradient(circle,#82aad2 0%,#4a7cc0 34%,#2848a8 58%,#1a2468 72%,transparent 76%)}
.meet .r{background:radial-gradient(circle,#F4AA54 0%,#E26E34 34%,#CC4E2E 54%,#9a3238 68%,transparent 74%)}
.meet b{background:radial-gradient(circle at 50% 46%,#F6B866 0%,#F4AA54 8%,#EE9444 16%,#E26E34 25%,#CC4E2E 33%,#9a3238 41%,#601e40 49%,#30163e 56%,#1a2468 63%,#2848a8 71%,#4a7cc0 78%,#82aad2 84%,transparent 90%)}

/* gradient-filled text: give descenders (g, y, p) room so they are never cut */
.svx .sv-t h3,.xpx .nm,.site-nav a{padding-bottom:.14em;margin-bottom:-.14em}
.rot .slot{height:1.34em;margin-bottom:-.1em}.rot .slot span{line-height:1.24;padding-bottom:.1em}
@media (max-width:760px){.hero5 h1 .hl{display:inline}.hero5 h1 .hl:last-child{display:block}}
/* line-reveal masks: room for descenders (g, y, p) and accents so letters are never cut */
.split-line-mask,:has(> .split-line):not(.intro-h):not(.g){padding:.08em 0 .2em!important;margin:-.08em 0 -.2em!important}
.split-line{overflow:visible!important}
/* external film link under a gallery */
.ext-link{padding-top:clamp(48px,6vw,96px);padding-bottom:clamp(48px,6vw,96px)}
.ext-row{display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap;border-top:1px solid var(--rule);padding-top:24px}
/* services: more breathing room between title, copy and tags */
.svx .sv-t h3{margin-bottom:clamp(14px,1.4vw,22px)!important}
.svx .sv-t p{line-height:1.65;margin-bottom:clamp(20px,1.8vw,28px)}
.svx .sv-t .mono{display:block;line-height:1.7}
/* hero: scroll cue */
.hero5 .scroll-cue{position:absolute;left:50%;top:calc(100svh - 96px);transform:translateX(-50%);z-index:3;display:flex;flex-direction:column;align-items:center;gap:12px;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:#EEEDEA;text-decoration:none;opacity:calc(1 - var(--sp,0) * 8);transition:opacity .3s}
.hero5 .scroll-cue i{position:relative;display:block;width:1px;height:44px;background:rgba(238,237,234,.28);overflow:hidden}
.hero5 .scroll-cue i::after{content:"";position:absolute;left:0;top:0;width:1px;height:45%;background:#EEEDEA;animation:cue 1.8s cubic-bezier(.65,0,.35,1) infinite}
@keyframes cue{0%{transform:translateY(-100%)}100%{transform:translateY(230%)}}
@media (prefers-reduced-motion:reduce){.hero5 .scroll-cue i::after{animation:none}}
@media (max-width:760px){.hero5 .scroll-cue{top:calc(100svh - 84px)}}
/* scroll cue: smaller, quieter line */
.hero5 .scroll-cue{font-size:9.5px;gap:9px;letter-spacing:.16em}
.hero5 .scroll-cue i{height:30px;background:rgba(238,237,234,.12)}
.hero5 .scroll-cue i::after{background:rgba(238,237,234,.45)}
/* scroll cue: no loop; the line fills top-to-bottom as you scroll, and empties as you scroll back */
.hero5 .scroll-cue{opacity:clamp(0,calc(1 - (var(--sp,0) - .22) * 8),1);transition:none}
.hero5 .scroll-cue i::after{animation:none!important;top:0;height:100%;transform-origin:50% 0;transform:scaleY(clamp(.04,calc(var(--sp,0) * 5),1));background:linear-gradient(180deg,rgba(238,237,234,.15),rgba(238,237,234,.7))}
/* hero copy sits higher, clear of the gradient */
@media (min-width:761px){.hero5{padding-top:clamp(108px,19vh,190px)}}
/* buttons follow the ground: dark buttons on off-white, light buttons on black */
.s.light+section.contact .btn,.s.light .btn,.pagetop.light .btn{background:var(--ink);color:#F2F1EE;box-shadow:inset 0 0 0 4px var(--ink),inset 0 0 0 5px rgba(255,255,255,.2)}
/* studio insights */
.article .a-title{font-size:clamp(36px,4.6vw,76px);line-height:1.02;max-width:22ch}
.article .a-dek{margin-top:clamp(18px,2vw,28px);max-width:44ch;font-size:clamp(18px,1.5vw,22px);line-height:1.45;color:var(--ink2)}
.a-body p{text-wrap:pretty}
#insights .rs h3{font-size:clamp(22px,2vw,32px);line-height:1.12}
/* insights: 16:9 thumbnails and hero, light page */
.rs .thumb{aspect-ratio:16/9!important;width:clamp(150px,15vw,240px)!important;grid-column:1/4}
.a-hero{aspect-ratio:16/9}.a-hero img{width:100%;height:100%;max-height:none;object-fit:cover}
.insights-top{background:var(--bg);color:var(--ink)}
@media (max-width:760px){.rs .thumb{width:100%!important;grid-column:1/-1!important}}
/* hero → Selected Work: a little longer and slower */
.hero5{min-height:calc(100svh + 60vh);padding-bottom:calc(clamp(48px,8vh,80px) + 60vh)}
.hero5+.work{margin-top:-52vh}
@media (max-width:760px){.hero5{min-height:calc(100svh + 42vh);padding-bottom:calc(40px + 42vh)}.hero5+.work{margin-top:-48vh}}
/* home: the nav sheen on hover works here too (the hero colour overrides used to win) */
@media (hover:hover){html:has(.hero5) .site-head .site-nav a:hover{color:transparent}}
/* scroll cue: two chevrons that pulse instead of the line */
.hero5 .scroll-cue i{display:none}
.hero5 .scroll-cue .chev{width:16px;height:16px;fill:none;stroke:#EEEDEA;stroke-width:2;stroke-linecap:square;overflow:visible}
.hero5 .scroll-cue .chev path{opacity:.25;animation:chev 1.6s ease-in-out infinite}
.hero5 .scroll-cue .chev .c2{animation-delay:.25s}
@keyframes chev{0%,100%{opacity:.2;transform:translateY(0)}45%{opacity:.85;transform:translateY(2px)}}
@media (prefers-reduced-motion:reduce){.hero5 .scroll-cue .chev path{animation:none;opacity:.6}}
/* work filter: gradient sheen on hover, draggable pill */
.seg{touch-action:pan-y;user-select:none;-webkit-user-select:none}
.seg i{cursor:grab}.seg.dragging,.seg.dragging *{cursor:grabbing}
.seg.dragging i{transition:width .2s var(--ease)!important}
.seg.dragging button[aria-pressed="true"]:not(.over){color:#8F8E8A!important}
.dark .seg.dragging button.over{color:var(--dark)!important;background:none}
.hero5 .scroll-cue .chev{width:20px;height:20px}

/* work filter: the same light ring as every other pill button, on hover */
.seg button::before{content:"";position:absolute;inset:0;padding:3px;border-radius:999px;pointer-events:none;opacity:0;z-index:-1;
  background:radial-gradient(120px circle at var(--mx,50%) var(--my,50%),rgba(244,170,84,.95) 0%,rgba(226,110,52,.8) 20%,rgba(154,50,56,.6) 40%,rgba(40,72,168,.5) 62%,rgba(5,5,8,0) 85%),
  conic-gradient(from var(--ang),rgba(40,72,168,.45),rgba(74,124,192,.4),rgba(244,170,84,.45),rgba(226,110,52,.42),rgba(154,50,56,.4),rgba(96,30,64,.38),rgba(40,72,168,.45));
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0);
  transition:opacity .6s var(--ease);animation:btnring 9s linear infinite paused}
@media (hover:hover){.seg:not(.dragging) button:hover::before{opacity:.8;animation-play-state:running}}
.seg.dragging button.over::before{opacity:.8;animation-play-state:running}
@media (prefers-reduced-motion:reduce){.seg button::before{animation:none}}
/* filter hover: ring only on the pill itself; other words get the gradient over the letters */
.seg button:not([aria-pressed="true"])::before{display:none}
@media (hover:hover){.seg:not(.dragging) button:not([aria-pressed="true"]):hover{color:transparent!important;background:linear-gradient(90deg,#2848a8 0%,#4a7cc0 14%,#E26E34 34%,#F4AA54 48%,#CC4E2E 62%,#601e40 76%,#2848a8 100%) 0 0/200% 100%;-webkit-background-clip:text;background-clip:text;animation:navsheen 3.2s linear infinite}}
/* the ring waits for the pill to arrive, then fades in */
.seg.moving button::before{opacity:0!important;transition:opacity .15s}
.seg button[aria-pressed="true"]::before{transition:opacity .5s var(--ease) .05s}
.seg.moving button[aria-pressed="true"]{color:#8F8E8A}
.seg button[aria-pressed="true"]{transition:color .3s var(--ease) .08s}
/* chevrons only, tucked under the Start a project button, aligned right */
.hero5 .cta-r{display:flex;flex-direction:column;align-items:flex-end}
.hero5 .cta-r .scroll-cue{position:static;transform:none;left:auto;top:auto;margin-top:clamp(20px,2.4vh,32px);padding-right:24px;gap:0}
.hero5 .cta-r .scroll-cue .chev{stroke:var(--ink);width:18px;height:18px}
@media (max-width:760px){.hero5 .cta-r{align-items:flex-start}.hero5 .cta-r .scroll-cue{align-self:flex-start;padding-left:calc(var(--btnw,150px) - 42px)}}
@media (max-width:760px){.hero5 .cta-r .scroll-cue{padding-left:128px;padding-right:0}}