/* ==========================================================================
   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)}

/* ==========================================================================
   About page
   ========================================================================== */
/* hero: the story in one drawing. The route climbs from the Netherlands in 2020 to the UAE in 2022 and the sparrow flies it */
.ab-hero{position:relative; min-height:100vh; min-height:100svh; display:flex; flex-direction:column; justify-content:center; gap:clamp(40px,7svh,96px); padding:calc(var(--bar-h) + clamp(24px,5svh,72px)) 0 clamp(40px,7svh,96px); overflow:hidden; background:var(--sky-1); --fs-h1:clamp(44px,min(5.6vw,10svh),140px)}
.ab-top{position:relative; display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,1fr); column-gap:var(--s-5); align-items:center}
.ab-text{display:grid; gap:clamp(12px,2.2svh,28px); justify-items:start}
.ab-text h1{max-width:9em}
.ab-tag{font:italic 400 clamp(24px,2.6vw,56px)/1.1 var(--f-display); letter-spacing:-.01em; color:var(--mint)}
.ab-intro{max-width:36em; font-size:clamp(17px,1.25vw,24px); color:var(--text-2); text-wrap:pretty}
.ab-actions{display:flex; flex-wrap:wrap; align-items:center; gap:var(--s-2)}
.route{width:100%; max-width:min(100%,82svh); height:auto; justify-self:center; overflow:visible}
.route-line{fill:none; stroke:var(--line-2); stroke-width:1.5; stroke-dasharray:.012 .02}
.route-glow{fill:none; stroke:var(--mint); stroke-width:2; stroke-linecap:round; stroke-dasharray:1; stroke-dashoffset:1; animation:route-draw 2.4s var(--ease) .7s forwards}
@keyframes route-draw{to{stroke-dashoffset:0}}
.route-node{fill:var(--sky-1); stroke:var(--mint); stroke-width:2}
.route-node--on{fill:var(--mint)}
.route-ring{fill:none; stroke:var(--mint); stroke-width:1; transform-box:fill-box; transform-origin:center; animation:ring 2.8s ease-out infinite}
@keyframes ring{from{opacity:.7; transform:scale(.4)} to{opacity:0; transform:scale(1.9)}}
.route-year{font:500 64px/1 var(--f-display); letter-spacing:-.02em; fill:var(--text)}
.route-place{font:400 14px/1 var(--f-mono); letter-spacing:.12em; fill:var(--text-2)}
.route-fly{fill:var(--mint)}
.route text{animation:rise .8s var(--ease) both}
.route .t2{animation-delay:2.4s}
.route .t1{animation-delay:.6s}
.ab-text > *{animation:rise .85s var(--ease) both; animation-delay:calc(var(--n,0) * 110ms + .1s)}
.ab-text > :nth-child(2){--n:1}
.ab-text > :nth-child(4){--n:3}
.ab-text > :nth-child(5){--n:4}
.ab-text > :nth-child(6){--n:5}
.ab-text h1{animation:h1-in 1.15s var(--ease) .2s both}
.ab-hero .facts > div{animation:rise .7s var(--ease) both; animation-delay:calc(var(--n,0) * 90ms + 1s)}
.ab-hero .facts > :nth-child(2){--n:1}
.ab-hero .facts > :nth-child(3){--n:2}
.ab-hero .facts > :nth-child(4){--n:3}

/* who we are */
.ab-who{--from:var(--sky-1); --to:var(--sky-2)}
.who{display:grid; grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr); column-gap:var(--s-5); align-items:start}
.who-side{display:grid; gap:var(--s-5); position:sticky; top:calc(var(--bar-h) + 8vh)}
.who-body{display:grid; gap:var(--s-4)}
.who-lead{font:400 clamp(26px,2.5vw,52px)/1.16 var(--f-display); letter-spacing:-.02em; text-wrap:pretty}
.who-body p + p{max-width:44em; font-size:clamp(18px,1.25vw,24px); color:var(--text-2)}

/* what we can help with */
.ab-help{--from:var(--sky-2); --to:var(--sky-3)}
.ab-help .band{margin-bottom:clamp(64px,10vh,128px)}
.help-grid{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(14px,1.2vw,22px); margin-top:clamp(40px,6vh,88px)}
.help{display:flex; flex-direction:column; gap:14px; min-height:clamp(180px,13vw,250px); padding:clamp(22px,2vw,40px)}
.help-n{font:400 var(--fs-mono)/1 var(--f-mono); letter-spacing:.08em; color:var(--mint)}
.help h3{font-size:clamp(26px,2.1vw,44px)}
.help .tlink{margin-top:auto}
.help:hover{transform:translateY(-3px)}

/* the team */
.ab-team{--from:var(--sky-3); --to:var(--sky-5)}
.team{display:grid; grid-template-columns:repeat(8,minmax(0,1fr)); gap:clamp(14px,1.2vw,22px); margin-top:clamp(40px,6vh,88px)}
.person{grid-column:span 2; display:flex; flex-direction:column; overflow:hidden; transform:perspective(900px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)); transition:transform .3s var(--ease), border-color .3s}
.person--lead{grid-column:span 4; flex-direction:row}
.person-photo{overflow:hidden; aspect-ratio:1/1.05; background:#050706}
.person--lead .person-photo{flex:0 0 46%; aspect-ratio:auto; min-height:clamp(260px,22vw,440px)}
.person-photo img{width:100%; height:100%; object-fit:cover; object-position:50% 18%; filter:saturate(.82); transition:transform .7s var(--ease), filter .4s}
.person:hover .person-photo img{transform:scale(1.07); filter:none}
.person:hover{border-color:rgba(70,222,159,.5)}
.person-body{flex:1; display:grid; gap:6px; align-content:start; padding:clamp(16px,1.4vw,28px)}
.person--lead .person-body{align-content:center; gap:12px; padding:clamp(22px,2.2vw,48px)}
.person h3{font-size:clamp(20px,1.5vw,30px)}
.person--lead h3{font-size:clamp(30px,2.6vw,56px)}
.person-role{font-size:clamp(15px,1vw,19px); color:var(--text-2)}
.person--lead .person-role{font-size:clamp(17px,1.2vw,23px)}
.person .tlink{margin-top:8px; font-size:clamp(15px,1vw,18px)}

/* trust */
.ab-trust{--from:var(--sky-5); --to:var(--sky-8)}
.trust{display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr); gap:clamp(14px,1.2vw,22px); margin-top:clamp(40px,6vh,88px); align-items:stretch}
.quote{display:grid; align-content:space-between; gap:var(--s-4); margin:0; padding:clamp(28px,3vw,64px)}
.quote blockquote{margin:0}
.quote blockquote p{font:400 clamp(26px,2.4vw,50px)/1.14 var(--f-display); letter-spacing:-.02em; text-wrap:balance}
.quote blockquote p::before{content:"“"; color:var(--amber)}
.quote blockquote p::after{content:"”"; color:var(--amber)}
.quote figcaption{display:flex; flex-wrap:wrap; align-items:center; gap:12px 18px; font:400 var(--fs-mono)/1.5 var(--f-mono); letter-spacing:.08em; text-transform:uppercase; color:var(--text-2)}
.quote figcaption img{width:64px; aspect-ratio:1; border-radius:50%; object-fit:cover}
.quote figcaption strong{font-weight:400; color:var(--text)}
.quote .tlink{margin-left:auto; text-transform:none; letter-spacing:0; font:500 16px/1 var(--f-body); color:var(--text)}
.proof-side{display:grid; gap:clamp(14px,1.2vw,22px)}
.clients{padding:clamp(22px,2vw,40px)}
.clients ul{display:flex; flex-wrap:wrap; gap:8px; margin-top:var(--s-2)}
.clients li a,.clients li span{display:inline-flex; align-items:center; min-height:40px; padding:0 14px; border:1px solid var(--line-2); border-radius:999px; text-decoration:none; font-size:clamp(14px,.95vw,17px); transition:border-color .2s, color .2s}
.clients li a:hover{border-color:var(--amber); color:var(--amber)}
.creds{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--s-3); margin:0; padding:clamp(22px,2vw,40px)}
.creds dt{font:400 var(--fs-mono)/1.5 var(--f-mono); letter-spacing:.08em; text-transform:uppercase; color:var(--text-2)}
.creds dd{margin:6px 0 0; font-size:clamp(16px,1.1vw,21px)}
.creds a{text-decoration-color:var(--line-2); text-decoration-thickness:1px; text-underline-offset:.3em}
.creds [data-clock]{font:400 var(--fs-mono)/1 var(--f-mono); letter-spacing:.08em; color:var(--text-2)}

@media (max-width:1100px){
  .who,.trust{grid-template-columns:minmax(0,1fr)}
  .who-side{position:static; margin-bottom:var(--s-4)}
  .help-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .team{grid-template-columns:repeat(2,minmax(0,1fr))}
  .person{grid-column:span 1}
  .person--lead{grid-column:span 2}
}
@media (max-width:900px){
  .ab-hero{min-height:0}
  .ab-top{grid-template-columns:minmax(0,1fr); row-gap:var(--s-4)}
  .route{max-width:520px}
  .quote .tlink{margin-left:0}
}
@media (max-width:600px){
  .help-grid,.team{grid-template-columns:minmax(0,1fr)}
  .person,.person--lead{grid-column:auto}
  .person--lead{flex-direction:column}
  .person--lead .person-photo{flex:none; min-height:0; aspect-ratio:1/1.05}
  .creds{grid-template-columns:minmax(0,1fr)}
}

@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}