/* Seed One homepage, PX3 Lens direction.
   Tokens follow the confirmed VI palette. No lime or yellow (client instruction, 20 Sep 2026). */
/* Geist Mono (SIL OFL 1.1, self-hosted from the supplied file) */
@font-face{font-family:"Geist Mono";src:url("assets/fonts/GeistMono-Variable.woff2") format("woff2");font-weight:100 900;font-style:normal;font-display:swap}
:root{
  --ink:#231F20; --body:#57524F; --mid:#6E6E72; --line:rgba(35,31,32,.12); --dash:rgba(35,31,32,.1);
  --green:#007E3F; --grass:#3DAE5B; --purple:#4B2D77; --lav:#A596CF; --orange:#F2521C; --orange-vi:#FD602F;
  --grey:#F3F3F0; --white:#fff;
  --gut:clamp(20px,4.45vw,64px); --max:1600px; --edge:max(var(--gut),calc((100vw - var(--max)) / 2 + var(--gut)));
  --r-lg:clamp(20px,1.9vw,30px); --r-md:clamp(16px,1.3vw,20px);
  --ease:cubic-bezier(.16,1,.3,1); --ease2:cubic-bezier(.65,0,.35,1);
  --mono:'Geist Mono',ui-monospace,Menlo,monospace;
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:96px}
/* Lenis smooth scroll (MIT, vendored in assets/vendor) */
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}
.lenis.lenis-smooth [data-lenis-prevent]{overscroll-behavior:contain}
.lenis.lenis-stopped{overflow:clip}
body{font-family:'Google Sans',system-ui,-apple-system,'Helvetica Neue',Arial,sans-serif;color:var(--ink);background:var(--white);font-size:clamp(16px,1.1vw,18px);line-height:1.5;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:clip}
img,video,svg{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
ul,ol{list-style:none}
h1,h2,h3{font-weight:400;letter-spacing:-.045em;line-height:.95;text-wrap:balance}
p{text-wrap:pretty}
:focus-visible{outline:2px solid var(--green);outline-offset:3px;border-radius:4px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:fixed;left:16px;top:16px;z-index:100;background:var(--ink);color:#fff;padding:12px 18px;border-radius:999px;transform:translateY(-200%);transition:transform .3s var(--ease)}
.skip:focus{transform:none}
.wrap{width:100%;max-width:var(--max);margin:0 auto;padding-left:var(--gut);padding-right:var(--gut)}
.mono{font-family:var(--mono);font-size:12px;letter-spacing:.06em;text-transform:uppercase;font-weight:500;line-height:1.4}
.lab{color:var(--mid)}

/* Icons: Lucide (ISC licence) via Iconify, inlined */
.i{fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;flex:none}

/* Buttons */
.pill{display:inline-flex;align-items:center;gap:14px;height:56px;padding:0 8px 0 26px;border-radius:999px;font-size:15px;font-weight:500;white-space:nowrap;transition:background .4s var(--ease),color .4s var(--ease),transform .5s var(--ease)}
.pill .ic{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;transition:transform .5s var(--ease)}
.pill .ic svg{width:16px;height:16px}
.pill:hover .ic{transform:translateX(3px) rotate(-45deg)}
.pill.ink{background:var(--ink);color:#fff}.pill.ink .ic{background:#fff;color:var(--ink)}
.pill.ink:hover{background:var(--green)}
.pill.white{background:#fff;color:var(--ink)}.pill.white .ic{background:var(--ink);color:#fff}
.pill.white:hover .ic{background:var(--green)}
.pill.sm{height:44px;padding:0 5px 0 18px;font-size:14px;gap:10px}.pill.sm .ic{width:34px;height:34px}
.ul{display:inline-flex;align-items:center;gap:10px;font-weight:500;font-size:15px;padding-bottom:5px;background:linear-gradient(currentColor,currentColor) 0 100%/100% 1px no-repeat;transition:background-size .6s var(--ease)}
.ul svg{width:15px;height:15px;transition:transform .5s var(--ease)}
.ul:hover{background-size:0 1px;background-position:100% 100%}
.ul:hover svg{transform:translateX(4px)}

/* Glass: kept flat. A light tint, one hairline, no depth shadows. Chromium adds a faint rim refraction (html.lq). */
.gl,.gd{position:relative;isolation:isolate;-webkit-backdrop-filter:blur(16px) saturate(140%);backdrop-filter:blur(16px) saturate(140%)}
.gl{background:rgba(255,255,255,.5);box-shadow:inset 0 0 0 1px rgba(255,255,255,.6)}
.gd{color:#fff;background:rgba(255,255,255,.1);box-shadow:inset 0 0 0 1px rgba(255,255,255,.2)}
.lq .gl,.lq .gd{backdrop-filter:url(#lqr) blur(16px) saturate(140%)}
.full-bar.gd{-webkit-backdrop-filter:blur(10px) saturate(130%);backdrop-filter:blur(10px) saturate(130%)}


/* Gradient system: the only use of colour on the page. Soft fields of VI colour drift slowly on a clinical white base.
   Brand green, purple, lavender and orange only; orange and green are never blended directly, so nothing turns yellow. */
@property --a1x{syntax:'<percentage>';inherits:false;initial-value:18%}
@property --a1y{syntax:'<percentage>';inherits:false;initial-value:20%}
@property --a2x{syntax:'<percentage>';inherits:false;initial-value:84%}
@property --a2y{syntax:'<percentage>';inherits:false;initial-value:30%}
@property --a3x{syntax:'<percentage>';inherits:false;initial-value:50%}
@property --a3y{syntax:'<percentage>';inherits:false;initial-value:96%}
.grad{position:relative;isolation:isolate;overflow:hidden;background:
  radial-gradient(78% 88% at var(--a1x) var(--a1y),var(--c1),transparent 76%),
  radial-gradient(82% 92% at var(--a2x) var(--a2y),var(--c2),transparent 76%),
  radial-gradient(96% 84% at var(--a3x) var(--a3y),var(--c3),transparent 80%),
  radial-gradient(40% 40% at var(--mx,50%) var(--my,50%),rgba(255,255,255,var(--mh,0)),transparent 70%),
  var(--base)}
.grad::after{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .5 0 0 0 0 .5 0 0 0 0 .5 0 0 0 1 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");opacity:.055}
.grad>*{position:relative;z-index:1}
@keyframes gdrift{
  0%{--a1x:16%;--a1y:18%;--a2x:86%;--a2y:28%;--a3x:48%;--a3y:98%}
  35%{--a1x:34%;--a1y:40%;--a2x:70%;--a2y:12%;--a3x:22%;--a3y:78%}
  70%{--a1x:22%;--a1y:74%;--a2x:92%;--a2y:60%;--a3x:66%;--a3y:36%}
  100%{--a1x:52%;--a1y:24%;--a2x:74%;--a2y:88%;--a3x:18%;--a3y:52%}}
/* Colour families: each gradient stays inside one hue, white plus the colour plus a deeper and a paler tone of it. */
.hue-g{--c1:rgba(61,174,91,.8);--c2:rgba(0,126,63,.46);--c3:rgba(142,206,160,.7);--base:#DDEBE1;--t1:#3DAE5B;--t2:#007E3F;--tc:rgba(61,174,91,.18);--tc2:rgba(0,126,63,.08)}
.hue-o{--c1:rgba(253,96,47,.7);--c2:rgba(212,68,24,.38);--c3:rgba(250,168,136,.62);--base:#F4E1D8;--t1:#FD602F;--t2:#D4441A;--tc:rgba(253,96,47,.14);--tc2:rgba(212,68,24,.07);--dl:-11s;--dur:30s}
.hue-p{--c1:rgba(165,150,207,.88);--c2:rgba(75,45,119,.46);--c3:rgba(190,178,226,.7);--base:#E6E1F0;--t1:#A596CF;--t2:#4B2D77;--tc:rgba(165,150,207,.22);--tc2:rgba(75,45,119,.08);--dl:-17s;--dur:24s}
.wash.hue-g{--c1:rgba(61,174,91,.5);--c2:rgba(0,126,63,.22);--c3:rgba(170,220,184,.6);--base:rgba(228,238,231,.8);--dl:-13s;--dur:32s}
.gtext{padding:0 .04em;margin:0 -.04em;background:linear-gradient(100deg,#A596CF,#4B2D77 45%,#8C79C4 70%,#4B2D77);background-size:220% 100%;background-position:30% 0;-webkit-background-clip:text;background-clip:text;color:transparent!important}
@keyframes gtext{to{background-position:100% 0}}

/* A · Navigation: a solid white pill, matching the white "How we build" button. */
.nav{position:fixed;left:0;right:0;top:0;z-index:50;padding:14px var(--gut) 0;pointer-events:none;color:var(--ink)}
.nav-bar{pointer-events:auto;max-width:calc(var(--max) - 2 * var(--gut) + 28px);margin:0 auto;height:64px;border-radius:999px;position:relative;background:#fff;box-shadow:none;display:flex;align-items:center;justify-content:space-between;padding:0 10px 0 24px;transition:background .6s var(--ease),box-shadow .6s var(--ease),transform .7s var(--ease)}
.nav.solid .nav-bar{box-shadow:0 0 0 1px rgba(35,31,32,.07)}
.nav,.nav-bar,.brand,.brand img,.nav-r .pill.sm,.nav-r .pill.sm .ic{transition-property:padding,height,width,transform,background,box-shadow;transition-duration:.6s;transition-timing-function:var(--ease)}
.nav.compact{padding-top:8px}
.nav.compact .nav-bar{height:52px;padding-left:20px;padding-right:6px}
.nav.compact .brand{--lh:29px}
.nav.compact .nav-r .pill.sm{height:40px}
.nav.compact .nav-r .pill.sm .ic{width:30px;height:30px}
/* Optically centred on the wordmark, not the leaf: the wordmark's centre sits at 66.5% of the artwork height, so lift by 16.5%. */
.brand{--lh:35px;display:block;height:var(--lh);transform:translateY(calc(var(--lh) * -.165))}
.brand img{height:var(--lh);width:auto}
.links{display:flex;gap:4px;position:absolute;left:50%;transform:translateX(-50%)}
.links a{font-size:14px;padding:9px 14px;border-radius:999px;transition:background .3s var(--ease)}
.links a:hover{background:rgba(35,31,32,.06)}
.nav-r{display:flex;align-items:center;gap:18px}
.pill.nv{background:var(--ink);color:#fff}.pill.nv .ic{background:#fff;color:var(--ink)}
.pill.nv:hover .ic{background:var(--green);color:#fff}
.full-bar .st i{position:relative;width:8px;height:8px;border-radius:2px;background:var(--grass)}
.full-bar .st i::after{content:"";position:absolute;inset:0;border-radius:2px;background:var(--grass);animation:pulse 2.4s ease-in-out infinite;will-change:transform,opacity}
@keyframes pulse{0%{transform:scale(1);opacity:.55}70%,100%{transform:scale(3);opacity:0}}
.burger{display:none;width:44px;height:44px;border-radius:50%;background:var(--ink);position:relative}
.burger span{position:absolute;left:14px;right:14px;height:1.5px;background:#fff;transition:transform .4s var(--ease)}
.burger span:first-child{top:18px}.burger span:last-child{top:25px}
.nav.open .burger span:first-child{transform:translateY(3.5px) rotate(45deg)}.nav.open .burger span:last-child{transform:translateY(-3.5px) rotate(-45deg)}
.menu{display:none}

/* B · Hero */
.hero{position:relative;height:100svh;min-height:720px;max-height:1200px;overflow:hidden;background:#0b0c0d;color:#fff}
.hero-media{position:absolute;inset:0;will-change:transform}
.hero-video{width:100%;height:100%;object-fit:cover;transform:scale(1.08);opacity:0;transition:transform 2.4s var(--ease),opacity 1.4s var(--ease)}
.ready .hero-video{transform:scale(1);opacity:1}
.hero-scrim{position:absolute;inset:0;background:linear-gradient(90deg,rgba(8,9,10,.62) 0%,rgba(8,9,10,.28) 42%,rgba(8,9,10,0) 70%),linear-gradient(0deg,rgba(8,9,10,.7) 0%,rgba(8,9,10,.15) 45%,rgba(8,9,10,0) 70%),linear-gradient(180deg,rgba(8,9,10,.35),transparent 22%);transition:opacity 1s var(--ease)}
.hero-grid{position:absolute;inset:0;max-width:var(--max);margin:0 auto;padding:0 var(--gut);display:grid;grid-template-columns:repeat(6,1fr);pointer-events:none;opacity:0;transition:opacity 2s var(--ease) .6s}
.ready .hero-grid{opacity:1}
.hero-grid i{border-left:1px dashed rgba(255,255,255,.14)}.hero-grid i:last-child{border-right:1px dashed rgba(255,255,255,.14)}
.hero-in{position:absolute;left:0;right:0;bottom:0;margin:0 auto;padding-bottom:clamp(36px,5vw,72px);will-change:transform,opacity}
.kick{color:rgba(255,255,255,.72);margin-bottom:clamp(18px,1.8vw,28px)}
.js .hero .kick{opacity:0;transform:translateY(6px);transition:opacity 1.2s var(--ease) 1.75s,transform 1.2s var(--ease) 1.75s}
.ready .hero .kick{opacity:1;transform:none}
.hero-h{font-size:clamp(44px,6.4vw,118px);letter-spacing:-.058em;line-height:.98;font-weight:400}
.hero-h .hl{display:block;overflow:hidden;padding:.08em .08em .24em;margin:-.08em -.08em -.24em;white-space:nowrap}
.hero-h .hl>*{vertical-align:baseline}
.hero-h .g{color:#fff}
.hw{display:inline-block;transform:translateY(140%);transition:transform 1.3s var(--ease)}
.ready .hw{transform:none}
.hero-cta{display:flex;align-items:center;gap:14px;margin-top:clamp(28px,2.8vw,44px);opacity:0;transform:translateY(16px);transition:opacity 1s var(--ease) 1.1s,transform 1.2s var(--ease) 1.1s}
.ready .hero-cta{opacity:1;transform:none}
.hero-p{max-width:34em;margin-top:clamp(20px,2vw,30px);font-size:clamp(17px,1.4vw,21px);line-height:1.45;color:rgba(255,255,255,.92);opacity:0;transition:opacity 1.4s var(--ease) 1.1s}
.ready .hero-p{opacity:1}

/* C · Focus marquee: slow, large */
.mq{position:relative;z-index:2;background:#fff;padding:clamp(30px,3.3vw,48px) 0;border-bottom:1px solid var(--line);overflow:hidden}
.mq-track{display:flex;width:max-content;animation:mq 26s linear infinite}

.mq-set{display:flex;align-items:center;gap:clamp(14px,1.7vw,24px);padding-right:clamp(14px,1.7vw,24px);font-size:clamp(32px,4.85vw,70px);letter-spacing:-.045em;text-transform:uppercase;line-height:1;white-space:nowrap}
.mq-set .sl{color:#D4D1CC;font-weight:300}
.cp{width:.52em;height:.52em;flex:none;fill:none;stroke:var(--ink);stroke-width:.9}
@keyframes mq{to{transform:translateX(-50%)}}

/* Dashed six-column grid behind the white sections */
.gridded{position:relative}
.gridl{position:absolute;inset:0;max-width:var(--max);margin:0 auto;padding:0 var(--gut);display:grid;grid-template-columns:repeat(6,1fr);pointer-events:none;z-index:0}
.gridl i{border-left:1px dashed var(--dash)}.gridl i:last-child{border-right:1px dashed var(--dash)}
.gridded>section{position:relative;z-index:1}

/* D · Mission */
.mission{display:grid;grid-template-columns:2fr 4fr;padding-top:clamp(100px,10.4vw,160px);padding-bottom:clamp(100px,10.4vw,160px)}
.mission .big{font-size:clamp(30px,3.9vw,60px);letter-spacing:-.04em;line-height:1.08}
.fill .fw{color:#C9C5BF;transition:color .5s var(--ease)}
.fill .fw.on{color:var(--ink)}
.mission .sm{display:grid;gap:clamp(14px,1.4vw,20px);max-width:36em;margin-top:clamp(36px,4.2vw,60px)}
.mission .sm p{color:var(--body);font-size:clamp(18px,1.4vw,21px);line-height:1.5}

/* E · Specimen band: full-bleed and editorial, like the research-bench band, with the portfolio marquee along its foot */
.band{height:clamp(600px,60vw,920px);overflow:hidden;background:#C9CCD9;color:var(--ink)}
.band-media{position:absolute;inset:-4% 0;will-change:transform}
.band-media video{width:100%;height:100%;object-fit:cover}
.band-sh{position:absolute;inset:0;background:linear-gradient(90deg,rgba(255,255,255,.72) 0%,rgba(255,255,255,.34) 38%,rgba(255,255,255,0) 64%),linear-gradient(180deg,rgba(255,255,255,.4),transparent 30%),linear-gradient(0deg,rgba(255,255,255,.78),rgba(255,255,255,.3) 14%,transparent 26%)}
.band-t{position:absolute;left:var(--edge);right:var(--edge);top:clamp(60px,6.2vw,96px);max-width:1000px}
.band-t .lab{color:rgba(35,31,32,.66);margin-bottom:22px}
.band-t h2{font-size:clamp(40px,6.1vw,92px);letter-spacing:-.05em}
.band-p{font-size:clamp(16px,1.25vw,19px);color:rgba(35,31,32,.78);max-width:460px;margin-top:26px}
.marq{overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent);mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent)}
.marq-track{display:flex;align-items:center;gap:clamp(56px,6.7vw,96px);width:max-content;padding-right:clamp(56px,6.7vw,96px);animation:mq 60s linear infinite}
.marq:hover .marq-track{animation-play-state:paused}
.marq-track img{height:clamp(26px,2.3vw,36px);width:auto;filter:grayscale(1) brightness(.7);opacity:.72;transition:opacity .4s var(--ease),transform .4s var(--ease)}
.marq-track li:hover img{opacity:1;transform:translateY(-3px)}

/* F · Method */
.method{padding-top:clamp(100px,10.4vw,160px)}
.ph{display:flex;justify-content:space-between;align-items:flex-end;gap:40px;padding-bottom:clamp(36px,3.5vw,50px)}
.ph.flush{padding-left:0;padding-right:0}
.ph h2{font-size:clamp(44px,6.1vw,96px);margin-top:24px}
.ph-r{width:min(430px,100%)}
.ph-r p{font-size:18px;color:var(--body);margin-bottom:22px}
.steps{display:grid;grid-template-columns:repeat(5,1fr);border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:#fff}
.step{border-right:1px solid var(--line)}.step:last-child{border-right:0}
@media (max-width:1023px) and (min-width:561px){
  .steps{grid-template-columns:repeat(6,1fr)}
  .step:nth-child(-n+2){grid-column:span 3}.step:nth-child(n+3){grid-column:span 2;border-top:1px solid var(--line)}
  .step:nth-child(2){border-right:0}
  .step:nth-child(-n+2) .st-tile{height:clamp(220px,30vw,280px)}
}
.st-tile{height:clamp(200px,18.8vw,290px);display:flex;flex-direction:column;justify-content:space-between;padding:clamp(18px,1.7vw,24px);color:var(--ink)}
.st-tile .tl{color:rgba(35,31,32,.72)}
.st-tile .num{font-size:clamp(56px,6.2vw,96px);font-weight:400;letter-spacing:-.06em;line-height:.9}

.step:hover .st-tile{--mh:.4}
.step .tx{padding:26px 26px 60px}
.step h3{font-size:clamp(26px,2.1vw,32px);letter-spacing:-.035em;margin:0 0 12px}
.step .tx>p:last-child{font-size:14.5px;color:var(--body);line-height:1.45}

/* Parallax frames: the image is taller than its frame and drifts inside it */
.plx{overflow:hidden}
.plx img{width:100%;height:118%;margin-top:-9%;object-fit:cover;will-change:transform;transform:translate3d(0,var(--py,0px),0);transition:scale 1.4s var(--ease)}
.rv-tile{clip-path:inset(0 0 100% 0);transition:clip-path 1.4s var(--ease)}
.rv-tile.in{clip-path:inset(0 0 0 0)}
.steps .step:nth-child(2) .rv-tile{transition-delay:.08s}.steps .step:nth-child(3) .rv-tile{transition-delay:.16s}.steps .step:nth-child(4) .rv-tile{transition-delay:.24s}.steps .step:nth-child(5) .rv-tile{transition-delay:.32s}

/* G · Full-bleed band */
.full{height:clamp(560px,62.5vw,960px);overflow:hidden;margin-top:0;color:#fff;background:#111}
.full-media{position:absolute;inset:0}
.full-media img{height:124%;margin-top:-12%;object-position:50% 40%}
.full-sh{position:absolute;inset:0;background:linear-gradient(0deg,rgba(10,10,12,.55),transparent 40%),linear-gradient(180deg,rgba(10,10,12,.6),transparent 38%)}
.full-t{position:absolute;left:var(--edge);right:var(--edge);top:clamp(60px,6.2vw,96px);max-width:1000px}
.full h2{font-size:clamp(40px,6.1vw,92px);letter-spacing:-.05em}
.full-bar{position:absolute;left:var(--gut);right:var(--gut);bottom:clamp(24px,3.3vw,48px);min-height:96px;border-radius:999px;display:flex;align-items:center;justify-content:space-between;gap:20px;padding:12px 20px 12px 36px;font-size:clamp(15px,1.25vw,18px)}
.full-bar .st{display:flex;align-items:center;gap:14px}

/* H · Case studies: white, hairline rows; the open study sits on a soft gradient field */
.cases{padding-top:clamp(100px,10.4vw,160px);padding-bottom:clamp(100px,10.4vw,160px)}
.acc{border-top:1px solid var(--line);color:var(--ink)}
.ai{border-bottom:1px solid var(--line);position:relative}
.ai::before{content:"";position:absolute;inset:0;border-radius:var(--r-lg);opacity:0;transition:opacity .9s var(--ease);background:radial-gradient(52% 78% at var(--a2x) var(--a1y),var(--ca),transparent 72%),radial-gradient(44% 66% at var(--a3x) var(--a2y),var(--cb),transparent 72%),#F7F7F4}
.ai:nth-child(1){--ca:rgba(61,174,91,.32);--cb:rgba(0,126,63,.14)}
.ai:nth-child(2){--ca:rgba(253,96,47,.26);--cb:rgba(212,68,24,.12)}
.ai:nth-child(3){--ca:rgba(165,150,207,.42);--cb:rgba(75,45,119,.14)}
.ai.open::before{opacity:1}
.ai>*{position:relative}
.ai h3{font-size:inherit;letter-spacing:0;line-height:inherit}
.ai-h{width:100%;display:grid;grid-template-columns:90px 1fr auto 44px;align-items:center;gap:20px;text-align:left;padding:30px 28px}
.ai-h .t{font-size:clamp(22px,2.3vw,34px);letter-spacing:-.035em;line-height:1.1;transition:transform .6s var(--ease)}
.ai-h:hover .t{transform:translateX(8px)}
.ai-h .n,.ai-h .yr{color:var(--mid)}
.ai-h .x{width:44px;height:44px;border-radius:50%;box-shadow:inset 0 0 0 1px var(--line);display:grid;place-items:center;transition:transform .6s var(--ease),background .4s var(--ease),color .4s var(--ease)}
.ai-h .x svg{width:16px;height:16px}
.ai-h:hover .x{background:var(--ink);color:#fff}
.ai.open .ai-h .x{transform:rotate(45deg)}
.ai-b{display:grid;grid-template-rows:0fr;transition:grid-template-rows .9s var(--ease)}
.ai.open .ai-b{grid-template-rows:1fr}
.ai-in{overflow:hidden;min-height:0;display:grid;grid-template-columns:1fr minmax(0,620px);gap:clamp(30px,4.2vw,60px);padding:0 28px 36px 138px;opacity:0;transform:translateY(-10px);transition:opacity .5s var(--ease),transform .8s var(--ease)}
.ai.open .ai-in{opacity:1;transform:none;transition-delay:.18s}
.ai-in .h{font-size:clamp(22px,2.1vw,30px);letter-spacing:-.03em;line-height:1.15}
.ai-in .b{font-size:16px;color:var(--body);margin-top:18px}
.info{margin-top:34px}.info div{display:grid;grid-template-columns:170px 1fr;padding:14px 0;border-top:1px solid var(--line);font-size:15px}
.info dt{color:var(--mid)}
.ul.w{margin-top:30px}
.ai .im{height:clamp(260px,27.8vw,400px);border-radius:18px;position:relative}
.ai .im{overflow:hidden}
.art .h{stroke:rgba(255,255,255,.32)}
.ai .im figcaption{position:absolute;left:clamp(20px,2vw,28px);bottom:clamp(20px,2vw,28px);color:var(--ink)}
.ai .im figcaption .mono{color:rgba(35,31,32,.72)}
.ai .im figcaption b{display:block;font-size:clamp(44px,4.9vw,76px);font-weight:400;letter-spacing:-.055em;margin-top:8px;line-height:.95}

/* I · Impact: gradient bento */
.nums{padding-bottom:clamp(50px,5.2vw,80px)}
.bento{display:grid;grid-template-columns:1.25fr 1fr 1fr;grid-template-rows:repeat(2,clamp(220px,20vw,300px));gap:14px}
.tile{border-radius:var(--r-lg);padding:clamp(20px,1.9vw,28px);display:flex;flex-direction:column;justify-content:space-between;color:var(--ink)}
.t-a{grid-row:1/3}
.tile .tl{color:rgba(35,31,32,.72)}
.tile b{display:block;font-size:clamp(52px,6.2vw,96px);font-weight:400;letter-spacing:-.055em;line-height:.95;font-variant-numeric:tabular-nums}
.t-a b{font-size:clamp(84px,11vw,168px)}
.tile .tb p{font-size:14.5px;color:rgba(35,31,32,.72);margin-top:10px;max-width:280px}
.art{position:absolute;z-index:0;fill:none;stroke:rgba(255,255,255,.75);stroke-width:.8;pointer-events:none}
/* One placement for every white drawing: square, oversized, bleeding in from the top right. */
.grad>.art{right:-18%;top:-26%;width:84%;height:auto;aspect-ratio:1}
.bento .tile>.art{width:clamp(220px,23vw,332px);right:clamp(-72px,-5vw,-36px);top:clamp(-76px,-5.2vw,-40px)}
.ai .im>.art{width:60%;right:-10%;top:-24%}
.bento .tile:nth-child(2){transition-delay:.08s}.bento .tile:nth-child(3){transition-delay:.16s}.bento .tile:nth-child(4){transition-delay:.24s}.bento .tile:nth-child(5){transition-delay:.32s}

/* J · Team: typographic, no portraits. Each builder carries a colour line that draws in on reveal and a soft field on hover. */
.team{padding-top:clamp(50px,5.2vw,80px);padding-bottom:clamp(72px,7vw,110px);background:linear-gradient(180deg,#fff,#F6F6F2 12%,#F6F6F2 82%,#fff)}
.team .ph h2{max-width:none}
/* Impact: centred stack */
.ph-c{flex-direction:column;align-items:center;text-align:center;gap:18px}
.ph-c .lg{margin-left:auto;margin-right:auto}
.ph-c .ph-r{width:min(520px,100%)}.ph-c .ph-r p{margin-bottom:16px}
/* People: headline set full width, note beneath on the right */
.ph-w{flex-direction:column;align-items:stretch;gap:28px}
.ph-w h2{font-size:clamp(56px,9.4vw,152px)}
.ph-w .ph-note{align-self:flex-end;width:min(360px,100%);text-align:left}
.ph-note{width:min(320px,100%);font-size:16px;color:var(--body);line-height:1.45}
.ph-note .ul{margin-top:18px;color:var(--ink)}
.tg{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(20px,2.1vw,30px);margin-top:clamp(20px,2.8vw,40px)}
.tm{position:relative;padding:clamp(22px,2.2vw,32px) 0 clamp(26px,2.8vw,40px);isolation:isolate}
.tm::before{content:"";position:absolute;inset:0 -14px;z-index:-1;border-radius:var(--r-md);opacity:0;transition:opacity .8s var(--ease);background:radial-gradient(80% 70% at 20% 0%,var(--tc),transparent 70%),radial-gradient(60% 60% at 100% 100%,var(--tc2),transparent 70%)}
.tm:hover::before{opacity:1}
.tm-line{position:absolute;left:0;right:0;top:0;height:1px;background:var(--line);overflow:hidden}
.tm-line::after{content:"";position:absolute;inset:0;height:2px;top:-.5px;background:linear-gradient(90deg,var(--t1),var(--t2));transform:scaleX(0);transform-origin:0 50%;transition:transform 1.6s var(--ease) .2s}
.tm.in .tm-line::after{transform:scaleX(.34)}
.tm:hover .tm-line::after{transform:scaleX(1);transition-duration:1s;transition-delay:0s}
.tm-line{height:2px;background:linear-gradient(var(--line),var(--line)) 0 0/100% 1px no-repeat}
.tm .n{color:var(--mid)}
.tm h3{font-size:clamp(24px,2vw,30px);letter-spacing:-.035em;line-height:1.1;margin-top:clamp(30px,3.3vw,48px)}
.tm .role{margin-top:12px;color:rgba(35,31,32,.72);display:flex;align-items:center;gap:10px}
.tm .role::before{content:"";width:16px;height:16px;border-radius:50%;flex:none;background:linear-gradient(135deg,var(--t1),var(--c3))}
.tm .bio{margin-top:clamp(24px,2.5vw,36px);font-size:15px;color:var(--body);line-height:1.5;max-width:340px}
.tg .tm:nth-child(2){transition-delay:.08s}.tg .tm:nth-child(3){transition-delay:.16s}.tg .tm:nth-child(4){transition-delay:.24s}

/* K + L · Finale: full-bleed like the hero. The hero film runs very faintly, whited out, under a slow gradient wash;
   the call to action, portfolio marquee and footer all sit in it. */
.finale{position:relative;isolation:isolate;overflow:hidden;background:#fff;color:var(--ink)}
.finale-media{position:absolute;inset:0;z-index:0}
.finale-media video{width:100%;height:100%;object-fit:cover;opacity:.24;filter:grayscale(.55) contrast(.9) brightness(1.18)}
.finale-wash{position:absolute;inset:0;z-index:0}
.finale>.art{position:absolute;z-index:1;right:-3%;top:-14%;width:min(620px,42vw);height:auto;fill:none;stroke:rgba(255,255,255,.7);stroke-width:.7;pointer-events:none}
.finale>section,.finale>div:not(.finale-media):not(.finale-wash),.finale>footer{position:relative;z-index:2}
.cta{padding-top:clamp(72px,7.2vw,110px);padding-bottom:0}
.cta-top{display:flex;justify-content:space-between;align-items:flex-start;gap:40px}
.cta-top>.lab{color:rgba(35,31,32,.7)}
.cta-r{width:min(440px,100%)}
.cta-r p{font-size:clamp(19px,1.6vw,24px);letter-spacing:-.02em;line-height:1.25}
.cta-b{display:flex;align-items:center;gap:26px;margin-top:30px;flex-wrap:wrap}
.giant{font-size:clamp(64px,10.4vw,190px);letter-spacing:-.07em;line-height:1.02;white-space:nowrap;margin:clamp(28px,3.6vw,56px) 0 clamp(40px,4.4vw,64px) -.05em}
.giant span{display:inline-block;will-change:transform}
.band-logos{position:absolute;left:var(--edge);right:var(--edge);bottom:0;height:clamp(96px,8.3vw,124px);border-top:1px solid rgba(35,31,32,.16);display:grid;grid-template-columns:auto 1fr;align-items:center;gap:clamp(24px,3.3vw,48px)}
.band-logos .mono{letter-spacing:.12em;white-space:nowrap;color:var(--ink)}
/* L · Footer */
.foot{position:relative;z-index:2;background:#fff;border-top:1px solid var(--line);padding-top:clamp(64px,6.2vw,90px);padding-bottom:36px}
.fg{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:40px}
.flg{height:64px;width:auto}
.fp{margin-top:22px;font-size:15px;max-width:31em;color:var(--body)}
.foot .fh{margin-bottom:18px}
.foot li{font-size:16px;margin-bottom:2px}
.foot li a{display:inline-block;padding:5px 0;background:linear-gradient(currentColor,currentColor) 0 100%/0 1px no-repeat;transition:background-size .5s var(--ease)}
.foot li a:hover{background-size:100% 1px}
.strip{display:flex;height:4px;margin-top:clamp(48px,5vw,72px)}.strip i{flex:1}
.strip i:nth-child(1){background:var(--purple)}.strip i:nth-child(2){background:var(--green)}.strip i:nth-child(3){background:var(--orange-vi)}.strip i:nth-child(4){background:var(--mid)}.strip i:nth-child(5){background:var(--ink)}
.bot{display:flex;justify-content:space-between;gap:20px;margin-top:20px;font-size:13px;color:var(--body)}
.legal a{margin-left:28px;display:inline-block;padding:6px 0}

/* Reveals */
.js .reveal{opacity:0;transform:translateY(28px);transition:opacity 1.1s var(--ease),transform 1.2s var(--ease)}
.js .reveal.in{opacity:1;transform:none}
.js .fade-h{opacity:0;transform:translateY(18px);transition:opacity 1s var(--ease),transform 1.1s var(--ease)}
.js .fade-h.in{opacity:1;transform:none}
.words .wm{display:inline-block;overflow:hidden;vertical-align:top;padding:.08em .07em .24em;margin:-.08em -.07em -.24em}
.words .wi{display:inline-block;transform:translateY(140%);transition:transform 1.1s var(--ease)}
.words.in .wi{transform:none}
.light{color:#fff}

/* Responsive */
@media (min-width:600px) and (max-width:1023px){.hero-h{font-size:max(60px,6.4vw)}}
@media (max-width:1180px){
  .tg{grid-template-columns:1fr 1fr;row-gap:10px}
  .bento{grid-template-columns:1fr 1fr;grid-template-rows:auto}.tile{min-height:230px}.t-a{grid-row:auto;grid-column:1/-1;min-height:300px}
}
@media (max-width:900px){
  .links,.nav-r .pill{display:none}
  .burger{display:block}
  .nav-bar{height:58px;padding:0 7px 0 20px}
  .menu{color:var(--ink);display:flex;flex-direction:column;pointer-events:auto;max-width:520px;margin:10px 0 0 auto;border-radius:28px;background:rgba(255,255,255,.96);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);padding:14px;box-shadow:0 30px 60px -30px rgba(35,31,32,.4);transform-origin:top right;transform:scale(.96) translateY(-8px);opacity:0;visibility:hidden;transition:opacity .4s var(--ease),transform .5s var(--ease),visibility 0s .5s}
  .menu a{font-size:26px;letter-spacing:-.03em;padding:12px 14px;border-radius:16px}
  .nav.open .menu{opacity:1;visibility:visible;transform:none;transition-delay:0s}
  .hero{min-height:520px}
  .hero-in{padding-bottom:28px}
  .hero-h .hl{white-space:normal}
  .band-logos{grid-template-columns:1fr;gap:10px;align-content:center;height:130px}
  .cta-top{flex-direction:column}
  .finale>.art{width:90vw;top:-2%}
  .hero-cta{flex-wrap:wrap}
  .mission{grid-template-columns:1fr;gap:26px}
  .ph{flex-direction:column;align-items:flex-start}
  .ai-h{grid-template-columns:40px 1fr 44px;padding:26px 16px;gap:14px}
  .ai-h .yr{display:none}
  .ai-in{grid-template-columns:1fr;padding:0 16px 26px}
  .info div{grid-template-columns:120px 1fr}
  .full-bar{border-radius:28px;flex-direction:column;align-items:flex-start;padding:22px}
  .fg{grid-template-columns:1fr 1fr}.fg>div:first-child{grid-column:1/-1}
}
@media (max-width:560px){
  .tg{grid-template-columns:1fr}
  .bento{grid-template-columns:1fr}
  .steps{grid-template-columns:1fr}.step{border-right:0!important}.step+.step{border-top:1px solid var(--line)}
  .bot{flex-direction:column}.legal a,.legal .vid-toggle{margin:0 20px 0 0}
  .gridl i:nth-child(n+4),.hero-grid i:nth-child(n+4){display:none}.gridl,.hero-grid{grid-template-columns:repeat(3,1fr)}
  .gridl i:nth-child(3),.hero-grid i:nth-child(3){border-right:1px dashed var(--dash)}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
  .gtext{background-position:30% 0}
  .hw,.words .wi{transform:none}
  .js .fade-h{opacity:1;transform:none}
  .js .dots>*{opacity:1;scale:1}
  .step .st-tile,.step .tx{filter:none!important;opacity:1!important}
  .js .reveal{opacity:1;transform:none}
  .rv-tile{clip-path:none}
  .hero-video,.hero-cta,.hero-p,.hero-grid,.js .hero .kick{opacity:1;transform:none}
}

/* Capture mode for review screenshots (#still): skip transitions */
.still *,.still *::before{transition-duration:0s!important;transition-delay:0s!important}


/* VI dot glyph under each numbered section label */
.lg{display:block;width:clamp(20px,1.7vw,26px);height:clamp(20px,1.7vw,26px);margin-top:clamp(14px,1.4vw,20px);fill:var(--ink)}
.cta-top .lg{margin-bottom:0}

/* Dot glyphs assemble dot by dot as they arrive (once) */
.js .dots>*{transform-box:fill-box;transform-origin:center;opacity:0;scale:.25;transition:opacity .45s var(--ease),scale .8s cubic-bezier(.34,1.56,.64,1);transition-delay:calc(var(--d) * 45ms + .1s)}
.js .dots.in>*{opacity:1;scale:1}


/* Footer video control: pauses every background video on the page */
.vid-toggle{font:inherit;font-size:13px;color:var(--body);padding:6px 0;margin-left:28px;background:linear-gradient(currentColor,currentColor) 0 100%/0 1px no-repeat;transition:background-size .5s var(--ease)}
.vid-toggle:hover{background-size:100% 1px}

/* Method: pinned sequence on large screens. The five stages light in turn and stay lit. */
.pin-rail{display:none}
@media (min-width:1024px) and (min-height:700px){
  .pin-on .method{height:calc(var(--pin-h,700px) + 150vh);padding-top:clamp(100px,10.4vw,160px)}
  .pin-on .method-in{position:sticky;top:var(--pt,90px)}
  .pin-on .pin-rail{display:block;height:2px;background:var(--line);margin:0}
  .pin-on .pin-rail i{display:block;height:100%;background:var(--ink);transform-origin:0 50%;transform:scaleX(.02)}
  .pin-on .steps{border-top:0}
  .pin-on .step .st-tile{opacity:.42;transition:opacity .9s var(--ease)}
  .pin-on .step .st-tile .num{transition:transform .9s var(--ease)}
  .pin-on .step .tx{opacity:.4;transition:opacity .9s var(--ease)}
  .pin-on .step.lit .st-tile{opacity:1}
  .pin-on .step.lit .tx{opacity:1}
  .pin-on .step.now .st-tile .num{transform:translateY(-8px)}
  /* While pinned, the section is sized to the screen height so it fits on laptops */
  .pin-on .method .ph{padding-bottom:min(clamp(36px,3.5vw,50px),4.6vh)}
  .pin-on .method .ph h2{font-size:min(clamp(44px,6.1vw,96px),9.8vh);margin-top:min(24px,2.6vh)}
  .pin-on .method .lg{margin-top:min(clamp(14px,1.4vw,20px),2.2vh)}
  .pin-on .st-tile{height:min(clamp(200px,18.8vw,290px),30vh)}
  .pin-on .st-tile .num{font-size:min(clamp(56px,6.2vw,96px),9.9vh)}
  .pin-on .step .tx{padding:min(26px,2.9vh) 26px min(60px,4.2vh)}
  .pin-on .step h3{margin-bottom:min(12px,1.3vh)}
}

/* Enquiry drawer */
.drawer{position:fixed;inset:0 0 0 auto;width:min(600px,100vw);height:100dvh;max-width:none;max-height:none;margin:0 0 0 auto;padding:0;border:0;background:#fff;color:var(--ink);overflow:hidden}
.drawer::backdrop{background:rgba(35,31,32,.32);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)}
.drawer[open]{animation:drawerIn .6s var(--ease) both}
.drawer[open]::backdrop{animation:fadeIn .5s var(--ease) both}
.drawer.closing{animation:drawerOut .42s cubic-bezier(.65,0,.35,1) both}
.drawer.closing::backdrop{animation:fadeOut .42s ease both}
@keyframes drawerIn{from{transform:translateX(100%)}to{transform:none}}
@keyframes drawerOut{from{transform:none}to{transform:translateX(100%)}}
@keyframes fadeIn{from{opacity:0}}@keyframes fadeOut{to{opacity:0}}
.drawer-in{position:relative;height:100%;overflow-y:auto;overscroll-behavior:contain;padding:clamp(24px,3vw,40px) clamp(22px,3.3vw,48px) 48px}
.drawer-field{position:absolute;left:0;right:0;top:0;height:300px;z-index:0;-webkit-mask-image:linear-gradient(#000 30%,transparent);mask-image:linear-gradient(#000 30%,transparent)}
.drawer-in>*:not(.drawer-field){position:relative;z-index:1}
.drawer-top{display:flex;justify-content:space-between;align-items:center}
.drawer-x{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;background:rgba(255,255,255,.7);box-shadow:inset 0 0 0 1px var(--line);transition:background .3s var(--ease)}
.drawer-x:hover{background:#fff}.drawer-x svg{width:18px;height:18px}
.drawer h2{font-size:clamp(36px,4vw,54px);letter-spacing:-.045em;margin-top:clamp(48px,6vw,80px);max-width:9em}
.drawer-lead{font-size:17px;color:var(--body);margin-top:16px;max-width:30em}
.drawer-open body{overflow:hidden}

/* Enquiry form (drawer and contact page) */
.enq{margin-top:36px;display:grid;gap:22px}
.enq-who{border:0;display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.enq-who legend{color:var(--mid);margin-bottom:12px;width:100%}
.enq-who label{position:relative;cursor:pointer}
.enq-who input{position:absolute;opacity:0;inset:0;margin:0;cursor:pointer}
.enq-who span{display:inline-flex;align-items:center;height:40px;padding:0 16px;border-radius:999px;font-size:14px;box-shadow:inset 0 0 0 1px var(--line);transition:background .3s var(--ease),color .3s var(--ease),box-shadow .3s var(--ease)}
.enq-who label:hover span{box-shadow:inset 0 0 0 1px rgba(35,31,32,.35)}
.enq-who input:checked+span{background:var(--ink);color:#fff;box-shadow:none}
.enq-who input:focus-visible+span{outline:2px solid var(--green);outline-offset:3px}
.enq-row{display:grid;grid-template-columns:1fr 1fr;gap:22px}
.fld{display:grid;gap:8px}
.fld label{font-family:var(--mono);font-size:12px;letter-spacing:.06em;text-transform:uppercase;font-weight:500;color:var(--body)}
.fld label i{font-style:normal;color:var(--mid)}
.fld input,.fld textarea{font:inherit;font-size:17px;color:var(--ink);background:transparent;border:0;border-bottom:1px solid rgba(35,31,32,.22);padding:10px 0 12px;border-radius:0;outline:0;transition:border-color .3s var(--ease)}
.fld textarea{resize:vertical;min-height:110px;line-height:1.45}
.fld input:hover,.fld textarea:hover{border-bottom-color:rgba(35,31,32,.45)}
.fld input:focus,.fld textarea:focus{border-bottom-color:var(--green);box-shadow:0 1px 0 var(--green)}
.fld ::placeholder{color:#9A9690}
.fld .err{display:none;font-size:13px;color:#B8360E}
.fld.bad input{border-bottom-color:#B8360E}
.fld.bad .err{display:block}
.enq-foot{display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap;margin-top:6px}
.enq-foot .mono{color:var(--mid);text-transform:none;letter-spacing:.02em}
.enq button[disabled]{opacity:.6;cursor:progress}
.enq-status{font-size:14px;color:var(--body);min-height:1.4em}
.enq-done{margin-top:48px;opacity:0;transform:translateY(12px);transition:opacity .8s var(--ease),transform .9s var(--ease);outline:0}
.enq-done.in{opacity:1;transform:none}
.done-mark{width:64px;height:64px;border-radius:50%;display:grid;place-items:center;color:#fff;background:linear-gradient(135deg,#3DAE5B,#007E3F)}
.done-mark svg{width:26px;height:26px;stroke-width:2}
.enq-done h3{font-size:clamp(30px,3vw,40px);letter-spacing:-.04em;margin-top:28px}
.enq-done p{color:var(--body);margin-top:12px;font-size:17px}
@media (max-width:560px){.enq-row{grid-template-columns:1fr}}

/* ================= Subpages ================= */
.pf-dot{display:inline-block;width:10px;height:10px;border-radius:50%;flex:none;background:linear-gradient(135deg,var(--t1),var(--c3))}
/* Page header: a single-hue gradient field with the white drawing bleeding in from the top right */
.phero{position:relative;overflow:hidden;min-height:clamp(440px,40vw,580px);display:flex;align-items:flex-end;padding:clamp(120px,11vw,150px) 0 clamp(44px,4.4vw,64px)}
.phero>.art{right:-5%;top:-34%;width:min(640px,46vw);height:auto;stroke:rgba(255,255,255,.55)}
.phero-in{position:relative;z-index:1;width:100%}
.phero-row{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,2fr);gap:clamp(32px,5vw,80px);align-items:end;margin-top:clamp(20px,2.4vw,32px)}
.phero h1{font-size:var(--h1);letter-spacing:-.05em;line-height:.98;max-width:11em}
.phero-lead{font-size:clamp(16px,1.25vw,18px);line-height:1.5;max-width:26em;color:rgba(35,31,32,.82)}
.crumb{display:inline-flex;align-items:center;gap:8px;font-size:14px;font-weight:500;margin-bottom:clamp(28px,3vw,44px);padding:6px 14px 6px 10px;border-radius:999px;background:rgba(255,255,255,.55);box-shadow:inset 0 0 0 1px rgba(255,255,255,.7);transition:background .3s var(--ease)}
.crumb:hover{background:#fff}.crumb svg{width:15px;height:15px}

/* Case study */
.cs{padding-top:clamp(56px,6vw,90px);padding-bottom:clamp(90px,9vw,140px)}
.facts{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.facts div{padding:22px 24px 26px 0}.facts div+div{padding-left:24px;border-left:1px solid var(--line)}
.facts dt{color:var(--mid)}.facts dd{font-size:clamp(16px,1.3vw,19px);margin-top:10px;letter-spacing:-.01em}
.cs-body{display:grid;grid-template-columns:2fr 4fr;margin-top:clamp(64px,7vw,110px)}
.cs-copy p{font-size:clamp(18px,1.45vw,21px);line-height:1.5;max-width:36em;margin-bottom:1.1em;color:var(--ink)}
.cs-copy p:first-child{font-size:clamp(22px,2vw,28px);line-height:1.3;letter-spacing:-.02em}
.cs-role{margin-top:clamp(28px,3vw,40px);padding-top:22px;border-top:1px solid var(--line);font-size:17px!important;color:var(--body)!important}
.cs-role .mono{display:block;color:var(--mid);margin-bottom:10px}
.cs-tiles{display:grid;gap:14px;margin-top:clamp(64px,7vw,110px)}
.cs-tiles.n3{grid-template-columns:repeat(3,1fr)}.cs-tiles.n2{grid-template-columns:repeat(2,1fr)}
.cs-tiles .tile{min-height:clamp(260px,24vw,340px)}
.cs-tiles .tile b{font-size:clamp(48px,5.4vw,84px)}
.cs-next{padding-bottom:clamp(90px,9vw,140px)}
.next-card{position:relative;display:grid;grid-template-columns:1fr auto;grid-template-rows:auto 1fr auto;gap:14px 40px;min-height:clamp(260px,24vw,340px);border-radius:var(--r-lg);padding:clamp(24px,2.8vw,40px);transition:transform .8s var(--ease)}
.next-card>.art{right:-10%;top:-40%;width:min(600px,48%)}
.next-card .mono{grid-column:1/-1;color:rgba(35,31,32,.72)}
.next-name{grid-column:1;align-self:end;font-size:clamp(40px,5vw,76px);letter-spacing:-.05em;line-height:.95}
.next-lead{grid-column:1;font-size:17px;color:rgba(35,31,32,.8);max-width:30em}
.next-go{grid-column:2;grid-row:2/4;align-self:end;width:64px;height:64px;border-radius:50%;background:var(--ink);color:#fff;display:grid;place-items:center;transition:transform .6s var(--ease),background .4s var(--ease)}
.next-go svg{width:22px;height:22px}
.next-card:hover{transform:translateY(-4px)}.next-card:hover .next-go{transform:translateX(6px);background:var(--green)}

/* Closing call to action on subpages */

/* Portfolio */
.pf{padding-top:clamp(40px,4.4vw,64px);padding-bottom:clamp(90px,9vw,140px)}
.pf-bar{display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap;margin-bottom:clamp(28px,3vw,40px)}
.pf-filter{display:flex;flex-wrap:wrap;gap:8px}
.pf-filter button{height:42px;padding:0 18px;border-radius:999px;font-size:14px;box-shadow:inset 0 0 0 1px var(--line);transition:background .3s var(--ease),color .3s var(--ease),box-shadow .3s var(--ease)}
.pf-filter button:hover{box-shadow:inset 0 0 0 1px rgba(35,31,32,.35)}
.pf-filter button[aria-pressed=true]{background:var(--ink);color:#fff;box-shadow:none}
.pf-count{color:var(--mid)}
.pf-card.off{display:none}

/* Contact page */
.contact{display:grid;grid-template-columns:1.5fr 1fr;gap:clamp(40px,6vw,100px);padding-top:clamp(56px,6vw,90px);padding-bottom:clamp(90px,9vw,140px);scroll-margin-top:90px}
.enq-page{margin-top:0}
.contact-aside{display:grid;gap:clamp(36px,4vw,56px);align-content:start}
.contact-aside .lab{margin-bottom:14px}
.who li{display:grid;gap:4px;padding:16px 0;border-top:1px solid var(--line)}
.who b{font-weight:500;font-size:17px}.who span{font-size:15px;color:var(--body)}
.areas li{display:flex;align-items:center;gap:12px;font-size:17px;padding:12px 0;border-top:1px solid var(--line)}
.contact .enq-done{margin-top:0}

/* Legal placeholders */
.legal-body{padding-top:clamp(56px,6vw,90px);padding-bottom:clamp(120px,12vw,180px)}
.legal-body>*{max-width:720px}
.legal-note{font-size:clamp(20px,1.8vw,26px);letter-spacing:-.015em;line-height:1.35;margin-bottom:28px}
.legal-note .mono{display:block;color:var(--mid);margin-bottom:12px}

@media (max-width:1023px){
  .cs-tiles.n3{grid-template-columns:1fr 1fr}
  .contact{grid-template-columns:1fr}
}
@media (max-width:900px){
  .facts{grid-template-columns:1fr 1fr}.facts div:nth-child(3){padding-left:0;border-left:0}.facts div:nth-child(n+3){border-top:1px solid var(--line)}
  .cs-body{grid-template-columns:1fr;gap:18px}
  .next-card{grid-template-columns:1fr}.next-go{grid-column:1;grid-row:auto;justify-self:end}
}
@media (max-width:560px){
  .cs-tiles.n3,.cs-tiles.n2{grid-template-columns:1fr}
  .phero>.art{width:110vw;right:-30%;top:-10%}
}

/* ---------- Subpages: one type scale, a step below the homepage (hero 92 / sections 88 at 1440) ---------- */
.sub{--h1:clamp(42px,5.4vw,80px);--h2:clamp(32px,3.9vw,58px);--h3:clamp(24px,2.2vw,32px)}
.sub .ph{padding-bottom:clamp(30px,3vw,46px)}
.sub .ph h2{font-size:var(--h2);letter-spacing:-.045em;line-height:1;margin-top:20px;max-width:14em}
.sec{padding-top:clamp(90px,9vw,140px)}
.split{display:grid;grid-template-columns:2fr 4fr}
.split-l .stick{position:sticky;top:120px}
.split h2{font-size:var(--h2);letter-spacing:-.045em;line-height:1;max-width:13em}
.split-l h2{margin-top:20px;max-width:7em}
.prose{display:grid;gap:1em;max-width:36em;margin-top:clamp(26px,2.8vw,40px)}
.prose p{font-size:clamp(17px,1.3vw,19px);line-height:1.55;color:var(--body)}
.prose p:first-child{font-size:clamp(20px,1.65vw,24px);line-height:1.4;letter-spacing:-.015em;color:var(--ink)}

/* What we do */
.apart li{display:grid;grid-template-columns:56px 1fr;gap:12px;align-items:baseline;padding:clamp(20px,2vw,28px) 0;border-top:1px solid var(--line)}
.apart li:last-child{border-bottom:1px solid var(--line)}
.apart .n{color:var(--mid)}
.apart .t{font-size:var(--h3);letter-spacing:-.035em;line-height:1.12;max-width:20em}
.apart li:nth-child(2){transition-delay:.06s}.apart li:nth-child(3){transition-delay:.12s}.apart li:nth-child(4){transition-delay:.18s}.apart li:nth-child(5){transition-delay:.24s}
.areas3{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.areas3 .tile{min-height:clamp(300px,27vw,400px)}
.areas3 .tile>.art{width:clamp(220px,23vw,332px);right:clamp(-72px,-5vw,-36px);top:clamp(-76px,-5.2vw,-40px);aspect-ratio:1}
.areas3 .tile h3{font-size:var(--h3);letter-spacing:-.04em;line-height:1.05}
.areas3 .tile b{font-size:clamp(40px,4.4vw,64px)}
.areas3 .tile:nth-child(2){transition-delay:.08s}.areas3 .tile:nth-child(3){transition-delay:.16s}
.crit{display:grid;grid-template-columns:repeat(5,1fr);gap:14px}
.crit li{position:relative;display:flex;flex-direction:column;justify-content:space-between;gap:40px;min-height:clamp(210px,17vw,250px);padding:clamp(18px,1.6vw,24px);border-radius:var(--r-lg);background:#F6F6F2}
.crit .mono{color:var(--mid)}
.crit .i{position:absolute;top:clamp(18px,1.6vw,24px);right:clamp(18px,1.6vw,24px);width:20px;height:20px;color:var(--green)}
.crit p{font-size:clamp(17px,1.35vw,20px);letter-spacing:-.015em;line-height:1.3}
.crit li:nth-child(2){transition-delay:.06s}.crit li:nth-child(3){transition-delay:.12s}.crit li:nth-child(4){transition-delay:.18s}.crit li:nth-child(5){transition-delay:.24s}
.speed-cols{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,4vw,56px);margin-top:clamp(28px,3vw,44px);max-width:46em}
.speed-cols p{font-size:clamp(17px,1.3vw,19px);line-height:1.55;color:var(--body)}

/* Team: four portrait cards, staggered. Portraits stay in natural colour with a soft wash of their colour rising from the bottom-left corner;
   the full bio opens in a side panel (the enquiry drawer's sibling). */
.people{padding-bottom:clamp(90px,9vw,140px)}
.crew{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(16px,1.8vw,26px);align-items:start}
.mate{position:relative}
.crew .mate:nth-child(2){transition-delay:.08s}.crew .mate:nth-child(3){transition-delay:.16s}.crew .mate:nth-child(4){transition-delay:.24s}
.mate-ph{display:block;aspect-ratio:4/5;border-radius:var(--r-lg)}
.mate-ph img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:opacity .9s var(--ease),transform 1.4s var(--ease)}
.mate-ph::before,.pic::before{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;background:radial-gradient(95% 65% at 0% 100%,var(--c1),transparent 72%);opacity:.8;transition:opacity .9s var(--ease)}
.mate:hover .mate-ph::before,.area:hover .pic::before{opacity:.45}
.mate:hover .mate-ph img{transform:scale(1.035)}
.mate-x{position:absolute;right:14px;bottom:14px;z-index:2;width:44px;height:44px;border-radius:50%;display:grid;place-items:center;background:rgba(255,255,255,.82);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);transition:background .4s var(--ease),color .4s var(--ease),transform .6s var(--ease)}
.mate-x svg{width:16px;height:16px}
.mate:hover .mate-x{background:var(--ink);color:#fff;transform:rotate(90deg)}
.mate-meta{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-top:20px}
.mate-meta .n{color:var(--mid)}
.mate .role,.bio .role{color:rgba(35,31,32,.72);display:flex;align-items:center;gap:10px}
.mate .role::before,.bio .role::before{content:"";width:12px;height:12px;border-radius:50%;flex:none;background:linear-gradient(135deg,var(--t1),var(--c3))}
.mate h3{font-size:var(--h3);letter-spacing:-.04em;line-height:1.05;margin-top:14px}
.mate-b{text-align:left;letter-spacing:inherit}
.mate-b::after{content:"";position:absolute;inset:0;z-index:3;border-radius:var(--r-lg)}
.mate-b:focus-visible{outline:0}.mate-b:focus-visible::after{outline:2px solid var(--ink);outline-offset:6px}
.mate-sum{font-size:15px;line-height:1.45;color:var(--body);margin-top:12px;max-width:24em}
.mate-bio{margin-top:18px;font-size:15px;line-height:1.55;color:var(--body)}.mate-bio p+p{margin-top:.8em}
.js .mate-bio{display:none}
@media (min-width:1024px){.crew .mate:nth-child(even){margin-top:clamp(48px,5.5vw,88px)}}

.bio{width:min(700px,100vw)}
.bio .drawer-in{transition:opacity .26s ease}
.bio .drawer-in.swap{opacity:0}
.bio-head{display:grid;grid-template-columns:clamp(120px,22vw,168px) 1fr;gap:clamp(20px,2.6vw,32px);align-items:end;margin-top:clamp(36px,4.4vw,56px)}
.bio-ph{aspect-ratio:4/5;border-radius:18px;overflow:hidden;background:var(--base)}
.bio-ph img{width:100%;height:100%;object-fit:cover}
.bio h2{font-size:clamp(30px,3.4vw,44px);letter-spacing:-.045em;line-height:1.02;margin:0 0 14px;max-width:none}
.bio-body{margin-top:clamp(28px,3.2vw,40px)}
.bio-body p{font-size:16px;line-height:1.6;color:var(--body);margin-bottom:1em}
.bio-body p:first-child{font-size:clamp(19px,1.6vw,22px);line-height:1.42;letter-spacing:-.012em;color:var(--ink)}
.bio-next{width:100%;display:flex;justify-content:space-between;align-items:center;gap:20px;text-align:left;margin-top:clamp(28px,3vw,40px);padding:22px 0 4px;border-top:1px solid var(--line)}
.bio-next .mono{display:block;color:var(--mid)}
.bio-next .t{display:block;font-size:clamp(22px,2vw,28px);letter-spacing:-.035em;margin-top:8px}
.bio-next .x{width:52px;height:52px;border-radius:50%;flex:none;display:grid;place-items:center;background:var(--ink);color:#fff;transition:transform .5s var(--ease),background .4s var(--ease)}
.bio-next .x svg{width:18px;height:18px}
.bio-next:hover .x{transform:translateX(4px);background:var(--green)}

/* Portfolio: the homepage case-study accordion, one row per company */
.pf-card.off{display:none}
.pf-acc .ai.hue-g{--ca:rgba(61,174,91,.32);--cb:rgba(0,126,63,.14)}
.pf-acc .ai.hue-o{--ca:rgba(253,96,47,.26);--cb:rgba(212,68,24,.12)}
.pf-acc .ai.hue-p{--ca:rgba(165,150,207,.42);--cb:rgba(75,45,119,.14)}
.pf-acc .ai-h .yr{display:flex;align-items:center;gap:10px}
.pf-acc .ai-in{align-items:start}
.pf-acc .ai-in .b{font-size:16px;line-height:1.6;max-width:40em}
.pf-acc .ai-in .b+.b{margin-top:12px}
.ai .im .pf-chip{position:absolute;left:clamp(20px,2vw,28px);top:clamp(20px,2vw,28px);height:68px;padding:0 20px;display:grid;place-items:center;border-radius:14px;background:rgba(255,255,255,.88);box-shadow:inset 0 0 0 1px #fff}
.pf-chip img{max-height:36px;max-width:150px;width:auto}

@media (max-width:1180px){
  .crit{grid-template-columns:repeat(3,1fr)}
}
@media (max-width:1023px){
  .areas3{grid-template-columns:1fr 1fr}.areas3 .tile:last-child{grid-column:1/-1}
}
@media (max-width:900px){
  .split{grid-template-columns:1fr;gap:22px}
  .split-l .stick{position:static}
  .split-l h2{max-width:none}
  .crew{grid-template-columns:1fr 1fr}
  .speed-cols{grid-template-columns:1fr}
  .phero-row{grid-template-columns:1fr;gap:18px}
  .pf-acc .ai-h .yr{display:none}
}
@media (max-width:767px){
  .crit{grid-template-columns:1fr 1fr}
}
@media (max-width:560px){
  .areas3,.crit{grid-template-columns:1fr}
  .crit li{min-height:0;gap:28px}
  .sub .giant{font-size:min(64px,15vw)}
  .apart li{grid-template-columns:40px 1fr}
  .crew{gap:28px 12px}.mate h3{font-size:21px}.mate-sum{font-size:14px}.mate-x{width:36px;height:36px;right:10px;bottom:10px}
  .mate-meta{flex-direction:column;align-items:flex-start;gap:6px;margin-top:14px}
  .bio-head{grid-template-columns:110px 1fr}
}

/* Photographs on subpages: rounded, natural colour, the page's colour rising softly from the bottom-left corner */
.pic{display:block;border-radius:var(--r-lg)}
.pic img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform 1.4s var(--ease)}
.split-pic{aspect-ratio:4/5;width:min(100%,340px,38vh);margin-top:clamp(28px,3vw,44px)}
.area{position:relative}
.area .pic{aspect-ratio:4/3}
.area:hover .pic img{transform:scale(1.035)}
.area-meta{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-top:20px}
.area-meta .n{color:var(--mid)}
.area-meta .role{color:rgba(35,31,32,.72);display:flex;align-items:center;gap:10px}
.area-meta .role::before{content:"";width:12px;height:12px;border-radius:50%;flex:none;background:linear-gradient(135deg,var(--t1),var(--c3))}
.area h3{font-size:var(--h3);letter-spacing:-.04em;line-height:1.05;margin-top:14px}
.area-d{font-size:15px;line-height:1.45;color:var(--body);margin-top:12px;max-width:26em}

/* What we do: the homepage's full-bleed film band and image section, set to the subpage type scale */
.sub .band-t h2,.sub .full h2{font-size:var(--h2);max-width:12em}
.film-band{height:clamp(520px,50vw,780px);margin-top:clamp(90px,9vw,140px)}
.full-media video{width:100%;height:100%;object-fit:cover}
.film-full{height:auto;min-height:clamp(600px,60vw,920px);margin-top:clamp(90px,9vw,140px);display:flex;flex-direction:column;justify-content:space-between;padding:clamp(60px,6.2vw,96px) 0 clamp(24px,3.3vw,48px)}
.film-full .full-sh{background:linear-gradient(90deg,rgba(10,10,12,.66),rgba(10,10,12,.22) 62%,rgba(10,10,12,.08)),linear-gradient(0deg,rgba(10,10,12,.5),transparent 40%)}
.film-full .full-t,.film-full .full-bar{position:relative;z-index:1;left:auto;right:auto;top:auto;bottom:auto}
.film-full .full-t{margin:0 var(--edge)}
.film-full .full-bar{margin:48px var(--gut) 0}
.film-full .lab{color:rgba(255,255,255,.75);margin-bottom:22px}
.film-full .speed-cols p,.full-p{color:rgba(255,255,255,.86)}
.full-p{font-size:clamp(17px,1.3vw,19px);line-height:1.55;max-width:34em;margin-top:clamp(24px,2.6vw,36px)}
.pf+.film-full{margin-top:0}
.areas3.photo{gap:clamp(16px,1.8vw,26px)}
.areas3.photo .area:nth-child(2){transition-delay:.08s}.areas3.photo .area:nth-child(3){transition-delay:.16s}
@media (max-width:1023px){.areas3.photo{grid-template-columns:repeat(3,1fr)}.areas3.photo .area:last-child{grid-column:auto}}
@media (max-width:900px){.split-pic{width:min(100%,300px)}}
@media (max-width:767px){.areas3.photo{grid-template-columns:1fr;gap:40px}.area .pic{aspect-ratio:16/10}}

/* Gradient motion is reserved for the impact grid: it drifts only while on screen. Every other field is static. */
.bento .tile.grad{animation:gdrift var(--dur,26s) ease-in-out infinite alternate;animation-delay:var(--dl,0s);animation-play-state:paused}
.bento.on .tile.grad{animation-play-state:running}
/* Static fields: each holds its own arrangement so no two read the same */
.steps .step:nth-child(1) .st-tile{--a1x:22%;--a1y:26%;--a2x:88%;--a2y:70%;--a3x:40%;--a3y:100%}
.steps .step:nth-child(2) .st-tile{--a1x:30%;--a1y:48%;--a2x:92%;--a2y:14%;--a3x:70%;--a3y:96%}
.steps .step:nth-child(3) .st-tile{--a1x:14%;--a1y:70%;--a2x:74%;--a2y:24%;--a3x:52%;--a3y:104%}
.steps .step:nth-child(4) .st-tile{--a1x:36%;--a1y:22%;--a2x:96%;--a2y:56%;--a3x:10%;--a3y:92%}
.steps .step:nth-child(5) .st-tile{--a1x:26%;--a1y:40%;--a2x:80%;--a2y:88%;--a3x:66%;--a3y:8%}
.ai:nth-child(1) .im{--a1x:24%;--a1y:30%;--a2x:86%;--a2y:64%;--a3x:48%;--a3y:104%}
.ai:nth-child(2) .im{--a1x:18%;--a1y:62%;--a2x:78%;--a2y:20%;--a3x:60%;--a3y:100%}
.ai:nth-child(3) .im{--a1x:30%;--a1y:24%;--a2x:92%;--a2y:78%;--a3x:20%;--a3y:96%}
.ai:nth-child(1)::before{--a1y:30%;--a2x:88%;--a2y:26%;--a3x:62%}.ai:nth-child(2)::before{--a1y:60%;--a2x:80%;--a2y:64%;--a3x:70%}.ai:nth-child(3)::before{--a1y:36%;--a2x:92%;--a2y:36%;--a3x:56%}
.finale-wash{--a1x:30%;--a1y:62%;--a2x:86%;--a2y:26%;--a3x:60%;--a3y:104%}
.phero{--a1x:22%;--a1y:36%;--a2x:88%;--a2y:22%;--a3x:52%;--a3y:110%}
.cs-tiles .tile:nth-child(1){--a1x:24%;--a1y:30%;--a2x:86%;--a2y:70%}.cs-tiles .tile:nth-child(2){--a1x:34%;--a1y:60%;--a2x:90%;--a2y:18%}.cs-tiles .tile:nth-child(3){--a1x:18%;--a1y:22%;--a2x:78%;--a2y:84%}
.next-card{--a1x:28%;--a1y:54%;--a2x:90%;--a2y:24%;--a3x:60%;--a3y:104%}

/* Elusys logo is a wide SVG; match the optical size of the raster logos */
.marq-track .lg-elusys{height:clamp(30px,2.6vw,40px)}

/* Phones held sideways: keep the whole hero statement on screen */
@media (max-height:500px) and (orientation:landscape){
  .hero{min-height:0;height:100svh}
  .hero-in{padding-bottom:20px}
  .kick{margin-bottom:10px}
  .hero-h{font-size:clamp(32px,5.4vw,44px)}
  .hero-p{font-size:15px;margin-top:12px;max-width:40em}
  .hero-cta{margin-top:16px}
  .hero-cta .pill{height:46px}
}

/* Scroll performance: keep repaints inside each full-bleed section, and the moving media on their own layers */
.hero,.band,.full,.finale,.mq{contain:paint}
.band-media,.full-media img,.finale-media video{will-change:transform}
.pin-on .method-in{will-change:transform}

/* ---------- preview gate (added by tools/deploy_preview.py; not part of the handover) ---------- */
.gate{display:none}
html.locked,html.locked body{overflow:hidden}
html.locked .gate{display:grid;grid-template-rows:auto 1fr auto;position:fixed;inset:0;z-index:20000;background:#0b0c0d;color:#fff;padding:0 var(--edge);isolation:isolate}
.gate-bg{position:absolute;inset:-6%;width:112%;height:112%;object-fit:cover;opacity:.32;filter:blur(24px) saturate(1.1);z-index:-2;pointer-events:none}
.gate::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,rgba(8,9,10,.7),rgba(8,9,10,.3) 70%),linear-gradient(0deg,rgba(8,9,10,.7),transparent 50%);pointer-events:none}
.gate-grid{position:absolute;inset:0;max-width:var(--max);margin:0 auto;padding:0 var(--gut);display:grid;grid-template-columns:repeat(6,1fr);z-index:-1;pointer-events:none}
.gate-grid i{border-left:1px dashed rgba(255,255,255,.12)}.gate-grid i:last-child{border-right:1px dashed rgba(255,255,255,.12)}
.gate-top{height:92px;display:flex;align-items:center}
.gate-pill{height:56px;padding:0 24px;border-radius:999px;background:#fff;display:inline-flex;align-items:center}
.gate-pill img{height:30px;width:auto;transform:translateY(-5px)}
.gate-mid{display:flex;align-items:center}
.gate-form{width:100%;max-width:620px}
.gate-kicker{font-family:var(--mono);font-size:12px;letter-spacing:.08em;text-transform:uppercase;font-weight:500;color:rgba(255,255,255,.7);margin-bottom:26px}
.gate-form label{display:block;font-size:clamp(34px,4vw,60px);line-height:1;letter-spacing:-.05em;color:#fff;margin-bottom:44px;text-wrap:balance}
.gate-form .f{display:flex;align-items:center;border-bottom:1px solid rgba(255,255,255,.4);transition:border-color .3s var(--ease)}
.gate-form .f:focus-within{border-color:#fff}
.gate-form input{flex:1;border:0;background:transparent;font:inherit;font-size:20px;letter-spacing:.18em;color:#fff;padding:14px 0;outline:none;min-width:0}
.gate-form input::placeholder{letter-spacing:.04em;color:rgba(255,255,255,.4)}
.gate-form button{width:48px;height:48px;border-radius:50%;background:#fff;color:var(--ink);display:grid;place-items:center;transition:background .3s var(--ease),color .3s var(--ease),transform .4s var(--ease)}
.gate-form button svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.gate-form button:hover{background:var(--green);color:#fff;transform:translateX(3px)}
.gate-msg{font-size:15px;margin-top:14px;min-height:1.4em;color:#FF9C7A}
.gate-bot{padding:0 0 30px;display:flex;flex-direction:column;gap:18px}
.gate-bot .strip{margin:0}
.gate-credit{display:flex;justify-content:space-between;align-items:center;gap:24px}
.gate-bot p{font-size:13px;color:rgba(255,255,255,.55)}
.gate-bot .ps{display:block;color:#fff;opacity:.45;transition:opacity .3s var(--ease)}.gate-bot .ps:hover{opacity:.9}
.gate-bot .ps svg{display:block;height:22px;width:auto}
@keyframes gateUp{to{opacity:1;transform:none}}@keyframes gateIn{to{opacity:1}}
.gate-top,.gate-kicker,.gate-form label,.gate-form .f{opacity:0;transform:translateY(14px);animation:gateUp .9s var(--ease) forwards}
.gate-top{animation-delay:.1s}.gate-kicker{animation-delay:.3s}.gate-form label{animation-delay:.42s}.gate-form .f{animation-delay:.56s}
.gate-bot{opacity:0;animation:gateIn 1s var(--ease) .7s forwards}
.gate-bot .strip i{transform:scaleX(0);transform-origin:left;transition:transform .5s var(--ease)}
.gate-bot .strip i:nth-child(2){transition-delay:.06s}.gate-bot .strip i:nth-child(3){transition-delay:.12s}.gate-bot .strip i:nth-child(4){transition-delay:.18s}.gate-bot .strip i:nth-child(5){transition-delay:.24s}
.gate.drawn .strip i{transform:scaleX(1);transition-duration:.5s}
.gate.drawn .strip i:nth-child(1){transition-delay:.9s}.gate.drawn .strip i:nth-child(2){transition-delay:.96s}.gate.drawn .strip i:nth-child(3){transition-delay:1.02s}.gate.drawn .strip i:nth-child(4){transition-delay:1.08s}.gate.drawn .strip i:nth-child(5){transition-delay:1.14s}
.gate.shake .f{animation:gateShake .45s cubic-bezier(.36,.07,.19,.97)}
@keyframes gateShake{10%,90%{transform:translateX(-2px)}20%,80%{transform:translateX(4px)}30%,50%,70%{transform:translateX(-6px)}40%,60%{transform:translateX(6px)}}
.gate.leaving{transition:opacity .7s var(--ease),transform .7s var(--ease);opacity:0;transform:translateY(-2%);pointer-events:none}
@media (prefers-reduced-motion:reduce){.gate-top,.gate-kicker,.gate-form label,.gate-form .f,.gate-bot{animation:none!important;opacity:1;transform:none}.gate-bot .strip i{transform:none!important}}