/* ==========================================================================
   Slipstream. Tokens
   Colour law: mint = the sparrow and what it does. Amber = the visitor and
   what they get. Agency facts get neither. Noise is grey. Mint and amber
   are never placed on each other.
   ========================================================================== */
:root{
  /* sky ramp, one stop per beat */
  --sky-1:#060807; --sky-2:#07120E; --sky-3:#0A1D17; --sky-4:#0D2A21; --sky-5:#10382C;
  --sky-6:#124636; --sky-7:#0F3329; --sky-8:#0B2019; --sky-9:#0A1712; --sky-foot:#050706;
  /* meaning */
  --mint:#46DE9F; --mint-hi:#5FE8AD; --amber:#FF6A1A;
  /* neutrals and supports */
  --text:#F1F4F0; --text-2:#B4C4BB; --ink:#05130C;
  --line:rgba(241,244,240,.12); --line-2:rgba(241,244,240,.26);
  --noise:#3A423E; --noise-text:#8B9590; --teal:#0E8F8A; --haze:#B8FFE0;
  --amber-rgb:255,106,26;
  /* type */
  --f-display:"Hubot Sans","Helvetica Neue",Arial,sans-serif;
  --f-body:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  --f-mono:'JetBrains Mono',ui-monospace,'SF Mono',Menlo,Consolas,monospace;
  --fs-h1:clamp(40px,min(6.4vw,11vh),96px);
  --fs-h2:clamp(34px,4.8vw,76px);
  --fs-close:clamp(48px,8vw,128px);
  --fs-manifesto:clamp(30px,4.2vw,66px);
  --fs-result:clamp(36px,5vw,72px);
  --fs-peak:clamp(72px,11vw,168px);
  --fs-says:clamp(20px,2.2vw,32px);
  --fs-h3:clamp(24px,2.5vw,38px);
  --fs-body:18px;
  --fs-mono:12px;
  --fs-tag:11px;
  /* space */
  --s-1:8px; --s-2:16px; --s-3:24px; --s-4:40px; --s-5:64px; --s-6:104px; --s-7:168px;
  --pad:clamp(20px,5vw,80px);
  --max:1280px;
  --bar-h:64px;
  --bar-bg:#050706;
  --band:clamp(160px,23svh,240px);              /* the ground band under the horizon, beats 1 and 9 */
  /* birds: the sparrow, its reserved perch zone, the visitor's relative size */
  --sparrow-w:200px; --perch-w:240px; --perch-h:150px;
  --you-k:.4; --you-k-peak:.6;
  --ease:cubic-bezier(.2,.8,.25,1);
}
@media (max-width:1100px){
  :root{ --sparrow-w:150px; --perch-w:180px; --perch-h:112px; }
}
@media (max-width:900px){
  :root{
    --fs-body:16px; --bar-h:56px;
    --s-5:48px; --s-6:72px; --s-7:104px;
    --sparrow-w:64px; --perch-w:80px; --perch-h:56px; --you-k:.47;
    --band:clamp(140px,21svh,190px);
  }
}
@media (min-width:600px) and (max-width:900px){
  :root{ --sparrow-w:96px; --perch-w:120px; --perch-h:80px; }
}
@media (max-width:900px) and (max-height:700px){
  :root{ --fs-h1:34px; --band:clamp(104px,18svh,140px); }
}

/* ==========================================================================
   Base
   ========================================================================== */
*,*::before,*::after{box-sizing:border-box}
html{
  -webkit-text-size-adjust:100%; text-size-adjust:100%;
  scroll-behavior:smooth; scroll-padding-top:calc(var(--bar-h) + 16px);
  background:var(--sky-1);
}
body{
  margin:0; background:var(--sky-1); color:var(--text);
  font:400 var(--fs-body)/1.6 var(--f-body);
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
}
h1,h2,h3,p,ol,ul,dl,dt,dd,figure,blockquote{margin:0}
ol,ul{padding:0; list-style:none}
a{color:inherit}
svg{display:block}
button,input{font:inherit; color:inherit}
:focus-visible{outline:2px solid var(--text); outline-offset:2px}
::selection{background:var(--text); color:var(--ink)}

.sr{position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap}
.defs{position:absolute; width:0; height:0; overflow:hidden}
.skip{position:fixed; left:var(--pad); top:8px; z-index:60; padding:10px 16px; background:var(--text); color:var(--ink); border-radius:999px; font-weight:500; text-decoration:none; transform:translateY(-200%)}
.skip:focus-visible{transform:none}
[tabindex="-1"]:focus{outline:none}

/* progressive enhancement switches (see the contract in the script element) */
html:not(.js) .js-only{display:none !important}
html.flight .still{display:none}

.wrap{width:100%; max-width:calc(var(--max) + 2 * var(--pad)); margin-inline:auto; padding-inline:var(--pad)}

/* type */
h1,h2,h3{font-family:var(--f-display); font-weight:500; font-optical-sizing:auto; letter-spacing:-.02em; text-wrap:balance}
h1{font-size:var(--fs-h1); line-height:.98; max-width:8.5em}   /* about 14ch at display size; em keeps the fallback face on the same lines */
h2{font-size:var(--fs-h2); line-height:1.02; max-width:15ch}
h3{font-size:var(--fs-h3); line-height:1.1; letter-spacing:-.015em}
.lines{max-width:none}
.lead{color:var(--text-2); max-width:34em; text-wrap:pretty}
.label,.altline{font:400 var(--fs-mono)/1.5 var(--f-mono); letter-spacing:.08em; color:var(--text-2)}
.label{text-transform:uppercase}
.altline{display:flex; flex-wrap:wrap; align-items:center; gap:6px 14px}
.alt{text-transform:uppercase; white-space:nowrap; color:var(--text)}
.alt::before{content:""; display:inline-block; width:28px; height:1px; margin-right:12px; vertical-align:middle; background:var(--line-2)}
.kick{letter-spacing:.04em}

/* the sparrow's nine lines */
.says{font:italic 400 var(--fs-says)/1.22 var(--f-display); font-optical-sizing:auto; letter-spacing:-.01em; color:var(--mint); max-width:13em; text-wrap:balance}

/* links and buttons */
.tlink{display:inline-flex; align-items:center; gap:10px; font-weight:500; text-decoration:underline; text-decoration-color:var(--line-2); text-decoration-thickness:1px; text-underline-offset:.35em; transition:text-decoration-color .2s}
.tlink:hover{text-decoration-color:currentColor}
.tlink svg{width:14px; height:14px; flex:none; transition:transform .25s var(--ease)}
.tlink:hover svg{transform:translateX(4px)}
.btn{display:inline-flex; align-items:center; justify-content:center; gap:10px; min-height:48px; padding:0 24px; border:1.5px solid transparent; border-radius:999px; font:500 16px/1 var(--f-body); text-decoration:none; white-space:nowrap; cursor:pointer; transition:background-color .2s, border-color .2s, color .2s}
.btn--mint{background:var(--mint); color:var(--ink)}
.btn--mint:hover{background:var(--mint-hi)}
.btn--amber{background:transparent; border-color:var(--amber); color:var(--amber)}
.btn--amber:hover{background:rgba(var(--amber-rgb),.12)}
.btn--xl{min-height:64px; padding:0 40px; font-size:18px}

/* ==========================================================================
   Chrome: the one top bar
   ========================================================================== */
.bar{position:fixed; inset:0 0 auto 0; z-index:40; height:var(--bar-h); display:flex; align-items:center; gap:var(--s-3); padding-inline:var(--pad); background:var(--bar-bg); border-bottom:1px solid var(--line)}
.bar-mark{flex:none; display:flex; align-items:center; min-height:44px}
.wm{display:block; height:26px; width:auto; aspect-ratio:688.57/111.03}
.wm-a{fill:var(--text)}
.wm-b{fill:var(--mint)}
.bar-nav{display:flex; align-items:center; gap:clamp(20px,2.6vw,40px); margin-inline:auto}
.bar-nav a{display:flex; align-items:center; min-height:44px; font:500 15px/1 var(--f-body); text-decoration:none; color:var(--text-2); transition:color .2s}
.bar-nav a:hover,.bar-nav a:focus-visible{color:var(--text)}
.bar-flight{display:flex; align-items:center; min-width:0}
.profile{display:none; position:relative; flex:none; width:clamp(200px,24vw,300px); height:28px}
.profile-curve{position:absolute; inset:0; width:100%; height:100%; overflow:visible}
.profile-curve path{fill:none; stroke:var(--line-2); stroke-width:1px; vector-effect:non-scaling-stroke}
.profile ol{position:absolute; inset:0; display:grid; grid-template-columns:repeat(9,1fr)}
.profile a{position:relative; display:block; height:100%; text-decoration:none}
.profile a::before{content:""; position:absolute; left:50%; top:var(--y); width:5px; height:5px; margin:-2.5px 0 0 -2.5px; border-radius:50%; background:var(--text-2); transition:transform .2s var(--ease), background-color .2s}
.profile a:hover::before,.profile a:focus-visible::before,.profile a[aria-current]::before{background:var(--text); transform:scale(1.7)}
.profile-label{position:absolute; top:calc(100% + 12px); left:50%; transform:translateX(-50%); padding:5px 9px; border:1px solid var(--line-2); background:var(--sky-foot); font:400 var(--fs-tag)/1.3 var(--f-mono); letter-spacing:.08em; text-transform:uppercase; white-space:nowrap; opacity:0; pointer-events:none; transition:opacity .15s}
.profile a:hover .profile-label,.profile a:focus-visible .profile-label{opacity:1}
.profile-dot{position:absolute; left:var(--px); top:var(--py,85.7%); width:7px; height:7px; margin:-3.5px 0 0 -3.5px; border-radius:50%; pointer-events:none}
.profile-dot--you{--px:3%; background:var(--amber)}
.profile-dot--sparrow{--px:8%; background:var(--mint)}
.readout,.bar-clock{font:400 var(--fs-mono)/1 var(--f-mono); letter-spacing:.08em; text-transform:uppercase; color:var(--text-2); white-space:nowrap}
.readout{width:23em}
.bar-cta{flex:none; min-height:40px; padding:0 20px; font-size:15px}
.bar-cta.is-quiet{background:transparent; border-color:var(--mint); color:var(--mint)}
.bar-cta.is-quiet:hover{background:rgba(70,222,159,.12)}
.stages{display:none}
.stages summary{display:flex; align-items:center; gap:8px; min-width:0; min-height:44px; padding:0 14px; overflow:hidden; border:1px solid var(--line-2); border-radius:999px; font:400 var(--fs-tag)/1 var(--f-mono); letter-spacing:.08em; text-transform:uppercase; white-space:nowrap; cursor:pointer; list-style:none}
.stages summary::-webkit-details-marker{display:none}
.stages summary::after{content:""; width:6px; height:6px; margin-top:-3px; border-right:1.5px solid currentColor; border-bottom:1.5px solid currentColor; transform:rotate(45deg)}
.stages[open] summary::after{margin-top:3px; transform:rotate(-135deg)}
.stages ol{position:absolute; top:100%; left:0; right:0; padding:4px var(--pad) 20px; background:var(--sky-foot); border-bottom:1px solid var(--line-2)}
.stages li a{display:flex; justify-content:space-between; align-items:center; gap:var(--s-2); min-height:44px; border-bottom:1px solid var(--line); font:400 var(--fs-mono)/1 var(--f-mono); letter-spacing:.08em; text-transform:uppercase; text-decoration:none}
.stages li a span:last-child{color:var(--text-2)}
@media (max-width:1380px){
  .bar-flight{display:none}
}
@media (max-width:1180px){
  .bar-clock{display:none}
}
@media (max-width:900px){
  .bar{gap:12px}
  .wm{height:21px}
  .bar-nav{display:none}
  .stages{display:block; min-width:0; margin-left:auto}
  .bar-cta{min-height:44px; padding:0 16px; font-size:14px}
}
@media (max-width:420px){
  .bar{gap:10px}
  .stages summary{gap:6px; padding:0 12px}
  .bar-cta{padding:0 12px}
}


/* ==========================================================================
   Footer
   ========================================================================== */
.foot{position:relative; padding:var(--s-6) 0 var(--s-4); background:var(--sky-foot)}
.foot-top{display:flex; flex-wrap:wrap; align-items:flex-end; justify-content:space-between; gap:var(--s-4)}
.foot-mark{display:block}
.lockup{display:block; width:clamp(220px,24vw,340px); height:auto; aspect-ratio:688.57/111.03}
.foot-tag{font:400 clamp(26px,3.2vw,46px)/1.1 var(--f-display); font-optical-sizing:auto; letter-spacing:-.02em}
.foot-cols{display:grid; grid-template-columns:1.4fr 1fr 1fr 1.3fr; gap:var(--s-4); margin-top:var(--s-5); padding-top:var(--s-4); border-top:1px solid var(--line)}
.foot-cols ul{display:grid; gap:8px; margin-top:var(--s-2)}
.foot-cols li{color:var(--text-2)}
.foot-cols a{color:var(--text); text-decoration:none}
.foot-cols a:hover{text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:.3em}
.foot-cols [data-clock]{font:400 var(--fs-mono)/1 var(--f-mono); letter-spacing:.08em}
.foot-base{display:flex; flex-wrap:wrap; align-items:center; gap:12px 28px; margin-top:var(--s-5); padding-top:var(--s-3); border-top:1px solid var(--line); font-size:14px; color:var(--text-2)}
.foot-base ul{display:flex; flex-wrap:wrap; gap:8px 24px}
.foot-base a{color:var(--text-2)}
.foot-base a:hover{color:var(--text)}
.totop{display:inline-flex; align-items:center; gap:10px; margin-left:auto; text-decoration:none}
.totop svg{width:24px; height:auto; aspect-ratio:760/470; overflow:visible; transition:transform .3s var(--ease)}
.totop:hover svg{transform:translateY(-8px)}

/* ==========================================================================
   Inner-page kit. Same tokens, bar, buttons and footer as the home page.
   ========================================================================== */
main{--max:max(1280px,min(100vw - 2 * var(--pad),1760px))}
.bar-nav a[aria-current]{color:var(--text)}
.stages li a span:last-child{color:inherit}
img{display:block; max-width:100%; height:auto}
.sec{position:relative; padding-block:clamp(80px,12vh,150px); background:linear-gradient(180deg,var(--from),var(--to) 62%) var(--to)}
.sec > .wrap{position:relative; z-index:1}
.sec-head{display:grid; gap:var(--s-3); justify-items:start}
.sec-head h2{max-width:16ch; font-size:clamp(38px,4.2vw,104px)}
.sec-head .lead{font-size:clamp(18px,1.25vw,26px)}
.card{position:relative; border:1px solid var(--line); border-radius:20px; background:linear-gradient(180deg,#11281F,#0C1D17); transition:border-color .3s, transform .25s var(--ease)}
.card::after{content:""; position:absolute; inset:0; border-radius:inherit; background:radial-gradient(460px circle at var(--mx,50%) var(--my,50%),rgba(70,222,159,.11),transparent 62%); opacity:0; transition:opacity .35s; pointer-events:none}
.card:hover::after{opacity:1}
.card:hover{border-color:var(--line-2)}
.btn--lg{min-height:clamp(52px,5.8svh,76px); padding:0 clamp(26px,3svh,40px); font-size:clamp(16px,1.85svh,22px)}
.btn--line{border-color:var(--line-2); color:var(--text)}
.btn--line:hover{border-color:var(--text)}
.btn svg{width:14px; height:14px; flex:none; transition:transform .25s var(--ease)}
.btn:hover svg{transform:translateX(4px)}
.spar{fill:var(--mint)}
.you-fill{fill:var(--amber)}
.bobber{animation:bob 3.4s ease-in-out infinite}
@keyframes bob{50%{translate:0 -7px}}
.bird{display:block; width:100%; height:auto; aspect-ratio:760/470; overflow:visible; fill:var(--mint)}
.hb-flap{opacity:0; animation:hb-flap 3.8s steps(1,end) 2.2s infinite}
.hb-rest{animation:hb-rest 3.8s steps(1,end) 2.2s infinite}
.hb-wing{transform:translate(1686px,302px) rotate(38deg) scale(1,1) rotate(-38deg) translate(-1686px,-302px); animation:hb-wing 3.8s ease-in-out 2.2s infinite}
@keyframes hb-rest{0%{opacity:0} 17%,100%{opacity:1}}
@keyframes hb-flap{0%{opacity:1} 17%,100%{opacity:0}}
@keyframes hb-wing{0%,8%,16%,100%{transform:translate(1686px,302px) rotate(38deg) scale(1,1) rotate(-38deg) translate(-1686px,-302px)} 4%,12%{transform:translate(1686px,302px) rotate(38deg) scale(1,.35) rotate(-38deg) translate(-1686px,-302px)}}
.stars{position:absolute; inset:0 0 30% 0; pointer-events:none; opacity:.9;
  background-image:radial-gradient(circle at 7% 22%,rgba(241,244,240,.55) 0 1px,transparent 1.6px),radial-gradient(circle at 18% 63%,rgba(241,244,240,.3) 0 1px,transparent 1.6px),radial-gradient(circle at 29% 9%,rgba(241,244,240,.4) 0 1px,transparent 1.6px),radial-gradient(circle at 47% 31%,rgba(241,244,240,.35) 0 1px,transparent 1.6px),radial-gradient(circle at 56% 12%,rgba(241,244,240,.6) 0 1.2px,transparent 1.8px),radial-gradient(circle at 68% 26%,rgba(241,244,240,.45) 0 1px,transparent 1.6px),radial-gradient(circle at 81% 14%,rgba(241,244,240,.5) 0 1.2px,transparent 1.8px),radial-gradient(circle at 92% 29%,rgba(241,244,240,.55) 0 1px,transparent 1.6px);
  -webkit-mask-image:linear-gradient(#000 55%,transparent); mask-image:linear-gradient(#000 55%,transparent)}
.crumbs{display:flex; flex-wrap:wrap; align-items:center; gap:0 .7em; font:400 var(--fs-mono)/1.5 var(--f-mono); letter-spacing:.08em; text-transform:uppercase; color:var(--text-2)}
.crumbs a{text-decoration:none}
.crumbs a:hover,.crumbs [aria-current]{color:var(--text)}
.facts{position:relative; display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:0 var(--s-3); margin:0; border-top:1px solid var(--line-2)}
.facts > div{padding-top:clamp(16px,1.6vw,26px)}
.facts dt{font:400 var(--fs-mono)/1.5 var(--f-mono); letter-spacing:.08em; text-transform:uppercase; color:var(--text-2)}
.facts dd{margin:6px 0 0; font:500 clamp(20px,1.6vw,32px)/1.15 var(--f-display); letter-spacing:-.01em}
.facts a{text-decoration-color:var(--line-2); text-decoration-thickness:1px; text-underline-offset:.3em}
.facts a:hover{text-decoration-color:currentColor}
.facts [data-clock]{font:400 var(--fs-mono)/1 var(--f-mono); letter-spacing:.08em; color:var(--text-2)}
/* the sparrow rides the right edge of the screen: it drops as you scroll, beats its wings while the page moves */
.flight{display:none}
html.js .flight{display:block; position:fixed; z-index:35; top:calc(var(--bar-h) + 28px); bottom:28px; right:clamp(6px,1vw,24px); width:clamp(48px,3.6vw,76px); pointer-events:none}
.flight::before{content:""; position:absolute; top:0; bottom:0; left:50%; width:1px; background:var(--line)}
.flight-fill{position:absolute; top:0; bottom:0; left:50%; width:1px; background:linear-gradient(180deg,rgba(70,222,159,0),var(--mint)); transform-origin:50% 0; transform:scaleY(var(--p,0))}
.flight-bird{position:absolute; left:0; top:0; width:100%; will-change:transform}
.flight .hb-rest,.flight .hb-flap,.flight .hb-wing{animation:none}
.flight .hb-flap{opacity:0}
.flight.is-flapping .hb-rest{opacity:0}
.flight.is-flapping .hb-flap{opacity:1}
.flight.is-flapping .hb-wing{animation:wing-beat .24s ease-in-out infinite alternate}
@keyframes wing-beat{to{transform:translate(1686px,302px) rotate(38deg) scale(1,.35) rotate(-38deg) translate(-1686px,-302px)}}
.flock{position:absolute; inset:auto 0 0 0; height:26%; overflow:hidden; pointer-events:none; -webkit-mask-image:linear-gradient(transparent,#000 45%); mask-image:linear-gradient(transparent,#000 45%)}
.flock i{position:absolute; left:100%; top:var(--y); width:calc(26px * var(--s)); height:calc(16px * var(--s)); background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='1360 60 760 470'%3E%3Cg transform='translate(0,942) scale(0.1,-0.1)' fill='%2338443F'%3E%3Cpath d='M18370 8601 c0 -5 -28 -58 -61 -118 -269 -473 -584 -770 -1169 -1100 -254 -144 -608 -309 -880 -412 l-86 -33 -119 89 c-173 129 -365 262 -475 329 -204 124 -308 156 -505 155 -191 -1 -353 -43 -505 -132 -148 -86 -227 -174 -310 -344 -32 -66 -69 -130 -83 -143 -40 -38 -107 -52 -251 -53 -78 -1 -119 -4 -101 -8 69 -17 141 -68 235 -165 81 -85 157 -192 297 -421 506 -829 1002 -1319 1636 -1619 451 -214 944 -305 1487 -275 1030 57 1939 283 2920 724 259 117 592 277 586 282 -2 3 -26 -7 -53 -20 -227 -115 -599 -238 -872 -288 -294 -54 -789 -23 -1166 72 -293 75 -627 214 -844 353 -64 41 -234 169 -420 315 l-91 73 -68 -49 c-227 -165 -509 -275 -852 -332 -100 -17 -325 -28 -420 -22 -75 5 -62 7 100 13 122 4 223 13 295 27 450 86 745 232 1016 501 477 475 746 1211 785 2151 7 182 -3 459 -17 459 -5 0 -9 -4 -9 -9z'/%3E%3Cpath d='M20884 6029 c-338 -215 -1203 -616 -1544 -717 -193 -57 -260 -67 -445 -67 -142 1 -184 4 -255 23 -47 12 -96 24 -110 27 -60 14 328 -127 417 -151 119 -32 340 -44 432 -24 179 39 462 197 1026 573 285 190 514 345 530 359 19 17 -3 7 -51 -23z'/%3E%3C/g%3E%3C/svg%3E") center/100% 100% no-repeat; opacity:var(--o); animation:flock-drift var(--t) linear infinite; animation-delay:calc(var(--t) * var(--f) * -1)}
@keyframes flock-drift{to{transform:translateX(calc(-100vw - 120px))}}
/* motion kit */
@keyframes rise{from{opacity:0; transform:translateY(34px)}}
@keyframes pop{from{opacity:0; transform:scale(.6)}}
@keyframes h1-in{from{opacity:0; clip-path:inset(0 0 100% 0); transform:translateY(.3em)} to{opacity:1; clip-path:inset(-10% 0 -10% 0); transform:none}}
html.js .rv{opacity:0; transform:translateY(40px); transition:opacity .8s var(--ease), transform .8s var(--ease), border-color .3s; transition-delay:calc(var(--d,0) * 110ms)}
html.js .rv--side{transform:translateX(110px)}
html.js .rv.is-in{opacity:1; transform:none}
html.js .rv h2{clip-path:inset(0 0 100% 0); transform:translateY(.35em); transition:clip-path .95s var(--ease) .12s, transform .95s var(--ease) .12s}
html.js .rv.is-in h2{clip-path:inset(-10% 0 -10% 0); transform:none}
html.js [data-par]{transform:translateY(calc(var(--par,0) * 1%)) scale(1.16)}
html.js [data-words] .w{opacity:.22; transition:opacity .35s}
html.js [data-words] .w.is-on{opacity:1}
.band{overflow:hidden; padding-block:clamp(22px,3.4vh,52px); border-block:1px solid var(--line)}
.band-track{display:flex; width:max-content; gap:clamp(28px,3vw,64px); transform:skewX(calc(var(--skew,0) * 1deg)); animation:band-move 46s linear infinite; font:400 clamp(44px,5.4vw,128px)/1 var(--f-display); letter-spacing:-.02em; white-space:nowrap}
.band-track span{color:rgba(241,244,240,.2)}
.band-track span:nth-child(3n+1){font-style:italic; color:var(--mint)}
@keyframes band-move{to{translate:-50% 0}}
/* your turn */
.kit-cta{--from:var(--sky-8); --to:var(--sky-9); overflow:hidden}
.kit-cta::after{content:""; position:absolute; inset:auto 0 0 0; height:48%; background:linear-gradient(0deg,rgba(var(--amber-rgb),.26),rgba(var(--amber-rgb),.08) 42%,transparent); pointer-events:none}
.cta{display:grid; grid-template-columns:minmax(0,1.3fr) minmax(0,1fr); column-gap:var(--s-4); align-items:center}
.cta-text{display:grid; gap:var(--s-3); justify-items:start}
.cta h2{max-width:10em; font-size:clamp(44px,5.6vw,136px); line-height:.98}
.cta .lead{font-size:clamp(18px,1.25vw,26px)}
.cta-actions{display:flex; flex-wrap:wrap; align-items:center; gap:var(--s-2) var(--s-3)}
.contact-line{display:flex; flex-wrap:wrap; gap:8px 28px; margin-top:var(--s-2); padding-top:var(--s-3); border-top:1px solid var(--line-2); font:400 var(--fs-mono)/1.5 var(--f-mono); letter-spacing:.08em}
.contact-line span{color:var(--text-2)}
.cta-sky{display:grid; justify-items:center; gap:var(--s-2)}
.cta-pair{width:min(100%,620px); height:auto; overflow:visible}
.cta-pair text{font:400 19px/1 var(--f-mono); letter-spacing:.1em; fill:var(--ink)}

/* ==========================================================================
   Services page
   ========================================================================== */
.sv-hero{position:relative; min-height:100vh; min-height:100svh; display:flex; flex-direction:column; justify-content:center; padding:calc(var(--bar-h) + clamp(24px,5svh,72px)) 0 clamp(48px,8svh,104px); overflow:hidden; background:var(--sky-1); --fs-h1:clamp(46px,min(6vw,11svh),150px)}
.sv-top{position:relative; display:grid; grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr); column-gap:var(--s-5); align-items:center}
.sv-text{display:grid; gap:clamp(12px,2.2svh,28px); justify-items:start}
.sv-text h1{max-width:7.5em}
.sv-text h1 em{font-style:italic; font-weight:400; color:var(--mint)}
.sv-lead{max-width:22em; font:400 clamp(22px,2vw,42px)/1.16 var(--f-display); letter-spacing:-.015em; text-wrap:balance}
.sv-intro{max-width:34em; font-size:clamp(17px,1.25vw,24px); color:var(--text-2)}
.sv-actions{display:flex; flex-wrap:wrap; align-items:center; gap:var(--s-2)}
/* the hero device: a departures board. Every service is a flight you can board */
.board{position:relative; margin-top:clamp(40px,6vw,96px); padding:clamp(18px,1.8vw,36px); perspective:1200px}
.board-bird{position:absolute; right:-4%; top:clamp(-150px,-9.5vw,-70px); width:clamp(130px,15vw,300px); pointer-events:none; z-index:2}
.board-head{display:flex; align-items:baseline; justify-content:space-between; gap:16px; padding-bottom:clamp(12px,1.2vw,20px); border-bottom:1px dashed var(--line-2); font:400 var(--fs-mono)/1.4 var(--f-mono); letter-spacing:.1em; text-transform:uppercase; color:var(--text-2)}
.board-head strong{font-weight:400; color:var(--text)}
.board-head [data-clock]{color:var(--mint)}
.row{display:grid; grid-template-columns:clamp(62px,4.6vw,96px) minmax(0,1fr) auto clamp(98px,7.6vw,150px); align-items:center; gap:clamp(8px,1vw,24px); min-height:clamp(46px,5.2svh,66px); padding-inline:clamp(4px,.6vw,12px); border-bottom:1px solid var(--line); text-decoration:none; transform-origin:50% 0; animation:flap .7s var(--ease) both; animation-delay:calc(var(--n) * 90ms + .7s); transition:background-color .2s, padding .25s var(--ease)}
@keyframes flap{from{opacity:0; transform:rotateX(-88deg)}}
.row:hover,.row:focus-visible{background:rgba(70,222,159,.08); padding-left:clamp(10px,1.1vw,22px)}
.row-code,.row-steps,.row-status{font:400 clamp(11px,.78vw,14px)/1.3 var(--f-mono); letter-spacing:.08em; text-transform:uppercase; color:var(--text-2)}
.row-name{font:500 clamp(17px,1.32vw,30px)/1.15 var(--f-display); letter-spacing:-.01em; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.row-status{display:inline-flex; align-items:center; gap:8px; color:var(--mint)}
.row-status i{width:7px; height:7px; border-radius:50%; background:var(--mint); animation:blink 1.6s ease-in-out infinite; animation-delay:calc(var(--n) * 200ms)}
@keyframes blink{50%{opacity:.25}}
.row--soon .row-name{color:var(--text-2)}
.row--soon .row-status{color:var(--amber)}
.swoop{animation:swoop 1.15s cubic-bezier(.16,.7,.24,1) 1.5s both}
@keyframes swoop{
  from{opacity:0; transform:translate(46%,-34%) scale(.72) rotate(11deg)}
  28%{opacity:1}
  62%{transform:translate(0,4%) scale(1) rotate(-3.2deg)}
  to{opacity:1; transform:none}
}
.sv-text > *{animation:rise .85s var(--ease) both; animation-delay:calc(var(--n,0) * 110ms + .1s)}
.sv-text > :nth-child(2){--n:1}
.sv-text > :nth-child(4){--n:3}
.sv-text > :nth-child(5){--n:4}
.sv-text > :nth-child(6){--n:5}
.sv-text h1{animation:h1-in 1.15s var(--ease) .2s both}
.board{animation:board-in 1.1s var(--ease) .35s both}
@keyframes board-in{from{opacity:0; transform:translateY(56px) rotate(-2.5deg)}}
.sv-band{background:var(--sky-1)}

/* one section per service */
.svc{padding-block:clamp(72px,10vh,132px)}
.svc--smm{--from:var(--sky-1); --to:var(--sky-2)}
.svc--ads{--from:var(--sky-2); --to:var(--sky-3)}
.svc--seo{--from:var(--sky-3); --to:var(--sky-4)}
.svc--sea{--from:var(--sky-4); --to:var(--sky-5)}
.svc--brd{--from:var(--sky-5); --to:var(--sky-6)}
.svc--web{--from:var(--sky-6); --to:var(--sky-6)}
.svc--web.svc--after-sea{--from:var(--sky-5)}
.svc--prd{--from:var(--sky-6); --to:var(--sky-7)}
.svc--geo{--from:var(--sky-7); --to:var(--sky-7)}
.svc--gfx{--from:var(--sky-7); --to:var(--sky-7)}
.svc-grid{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); column-gap:var(--s-5); align-items:start}
.svc--flip .svc-main{order:2}
.svc-main{display:grid; grid-template-columns:minmax(0,1fr); min-width:0; gap:var(--s-3); justify-items:start; position:sticky; top:calc(var(--bar-h) + 6vh)}
.svc-tag{display:flex; flex-wrap:wrap; align-items:center; gap:10px 16px; font:400 var(--fs-mono)/1.4 var(--f-mono); letter-spacing:.1em; text-transform:uppercase; color:var(--text-2)}
.svc-n{font:400 clamp(30px,2.6vw,56px)/.9 var(--f-display); letter-spacing:-.02em; color:var(--text-2); transition:color .5s}
.svc.is-lit .svc-n{color:var(--mint)}
.svc-label{padding:6px 12px; border:1px solid rgba(70,222,159,.45); border-radius:999px; color:var(--mint)}
.icon{width:clamp(44px,3vw,64px); height:auto; aspect-ratio:1; fill:none; stroke:var(--mint); stroke-width:1.3; stroke-linecap:round; stroke-linejoin:round}
html.js .svc .icon > *{stroke-dasharray:90; stroke-dashoffset:90; transition:stroke-dashoffset 1.4s ease .2s}
html.js .svc.is-lit .icon > *{stroke-dashoffset:0}
.svc h2{max-width:11em; font-size:clamp(36px,3.9vw,92px); line-height:1.02}
.svc-intro{max-width:36em; font-size:clamp(17px,1.2vw,23px); color:var(--text-2); text-wrap:pretty}
.svc-actions{display:flex; flex-wrap:wrap; align-items:center; gap:var(--s-2) var(--s-3)}
.svc-actions .btn{max-width:100%; padding-block:12px; white-space:normal; line-height:1.3; text-align:center}
.svc-side{display:grid; gap:clamp(14px,1.2vw,22px)}
.gains{display:grid; gap:clamp(14px,1.2vw,22px)}
.gain{padding:clamp(22px,2vw,40px)}
.gain:hover,.soon:hover,.work:hover{transform:translateY(-3px)}
.gain h3{font-size:clamp(24px,1.9vw,40px)}
.gain p{margin-top:10px; font-size:clamp(16px,1.1vw,21px); color:var(--text-2)}
.steps{padding:clamp(22px,2vw,40px)}
.steps-head{display:flex; justify-content:space-between; gap:16px; padding-bottom:14px; margin-bottom:6px; border-bottom:1px dashed var(--line-2); font:400 var(--fs-mono)/1.4 var(--f-mono); letter-spacing:.1em; text-transform:uppercase; color:var(--text-2)}
.steps-head span:last-child{color:var(--mint)}
.steps li{display:grid; grid-template-columns:clamp(40px,3vw,56px) minmax(0,1fr); align-items:baseline; min-height:clamp(44px,4.4svh,58px); padding-block:10px; border-bottom:1px solid var(--line); font:500 clamp(18px,1.35vw,27px)/1.2 var(--f-display); letter-spacing:-.01em}
.steps li:last-child{border-bottom:0}
.steps li span{font:400 var(--fs-mono)/1 var(--f-mono); letter-spacing:.08em; color:var(--text-2); transition:color .4s}
html.js .steps li{opacity:0; transform:translateX(36px); transition:opacity .6s var(--ease), transform .6s var(--ease); transition-delay:calc(var(--n) * 110ms + .25s)}
html.js .svc.is-lit .steps li{opacity:1; transform:none}
.svc.is-lit .steps li span{color:var(--mint)}

/* coming soon, and proof */
.sv-soon{--from:var(--sky-7); --to:var(--sky-8)}
.soon-top{display:flex; flex-wrap:wrap; align-items:flex-end; justify-content:space-between; gap:var(--s-3)}
.soon-grid{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:clamp(14px,1.2vw,22px); margin-top:clamp(40px,6vh,88px)}
.soon{display:grid; gap:14px; justify-items:start; padding:clamp(24px,2.2vw,44px); border-style:dashed}
.soon .svc-label{border-color:rgba(var(--amber-rgb),.5); color:var(--amber)}
.soon h3{font-size:clamp(30px,2.6vw,56px)}
.soon p:last-child{max-width:30em; font-size:clamp(17px,1.15vw,22px); color:var(--text-2)}
.sv-work{--from:var(--sky-8); --to:var(--sky-8)}
.work-grid{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(14px,1.2vw,22px); margin-top:clamp(40px,6vh,88px)}
.work{overflow:hidden}
.work a{display:block; text-decoration:none}
.work-photo{overflow:hidden; aspect-ratio:16/10}
.work-photo img{width:100%; height:100%; object-fit:cover; filter:saturate(.85); transition:filter .4s}
.work:hover .work-photo img{filter:none}
.work-body{display:grid; gap:10px; padding:clamp(18px,1.6vw,32px)}
.work-cat{font:400 var(--fs-mono)/1.4 var(--f-mono); letter-spacing:.08em; text-transform:uppercase; color:var(--mint)}
.work h3{font-size:clamp(22px,1.6vw,32px); line-height:1.14}

@media (max-width:1100px){
  .svc-grid{grid-template-columns:minmax(0,1fr); row-gap:var(--s-4)}
  .svc--flip .svc-main{order:0}
  .svc-main{position:static}
  .work-grid{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:900px){
  .sv-hero{min-height:0}
  .sv-top{grid-template-columns:minmax(0,1fr); row-gap:var(--s-4)}
  .board{margin-top:22vw}
  .board-bird{right:0; top:-21vw; width:38vw}
  .row{grid-template-columns:minmax(0,1fr) auto; row-gap:2px; padding-block:10px}
  .row-code{grid-column:1; grid-row:1}
  .row-name{grid-column:1; grid-row:2}
  .row-steps{display:none}
  .row-status{grid-column:2; grid-row:1 / span 2}
  .soon-grid{grid-template-columns:minmax(0,1fr)}
}
@media (prefers-reduced-motion:reduce){
  html.js .steps li{opacity:1; transform:none}
  html.js .svc .icon > *{stroke-dashoffset:0}
}

@media (max-width:1100px){
  html.js .flight{display:none}
}
@media (max-width:900px){
  .facts{grid-template-columns:repeat(2,minmax(0,1fr)); row-gap:var(--s-2)}
  .btn--lg{min-height:52px; padding:0 24px; font-size:16px}
  .cta{grid-template-columns:minmax(0,1fr); row-gap:var(--s-5)}
  .cta-sky{order:-1}
  .contact-line{flex-direction:column; gap:0}
  .contact-line a,.crumbs a,.tlink,.totop,.foot-cols a,.foot-base a,.facts a{display:inline-flex; align-items:center; min-height:44px}
  .foot-cols{grid-template-columns:1fr 1fr}
  .foot-cols ul{gap:0}
}
@media (max-width:520px){
  .foot-cols{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none !important; transition:none !important}
  html.js .rv,html.js .rv h2{opacity:1; clip-path:none; transform:none}
  html.js .flight,.flock{display:none}
  html.js [data-par]{transform:none}
}

/* ==========================================================================
   WordPress
   ========================================================================== */
.admin-bar .bar{top:32px}
@media (max-width:782px){.admin-bar .bar{top:46px}}
.screen-reader-text{position:absolute; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0}