/* ==========================================================================
   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-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, first and last beats */
  /* 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 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}

/* ==========================================================================
   Beats: shared frame. Each beat paints previous sky -> own sky so the
   page has no hard colour steps without the fixed sky layer.
   ========================================================================== */
.beat{position:relative; padding-block:clamp(88px,13vh,136px); overflow-x:clip; background:var(--glow,linear-gradient(transparent,transparent)),linear-gradient(180deg,var(--from) 0,var(--to) 62%) var(--to)}
.beat--ground{--from:var(--sky-1); --to:var(--sky-1)}
.beat--takeoff{--from:var(--sky-1); --to:var(--sky-2)}
.beat--route{--from:var(--sky-2); --to:var(--sky-3)}
.beat--formation{--from:var(--sky-3); --to:var(--sky-4)}
.beat--proof{--from:var(--sky-4); --to:var(--sky-5)}
.beat--flock{--from:var(--sky-5); --to:var(--sky-7)}
.beat--glide{--from:var(--sky-7); --to:var(--sky-8)}
.beat--turn{--from:var(--sky-8); --to:var(--sky-9)}
.beat > .wrap{position:relative; z-index:1}
.beat-head{display:grid; gap:var(--s-3); justify-items:start}
.beat-head .lead{margin-top:var(--s-1)}

/* static sky furniture, section-local; the fixed sky layer replaces it */
.sky-still{position:absolute; pointer-events:none}

/* ==========================================================================
   Birds: perch zones and the static pre-posed pair
   ========================================================================== */
.perch{position:relative; flex:none; width:var(--perch-w); height:var(--perch-h); pointer-events:none}
.still{position:absolute; inset:0}
/* the glide bob always runs on an HTML box, never on an SVG element, so the compositor can carry it */
.perch > .still,.bobber{animation:bob 3.4s ease-in-out infinite}
.scene{position:absolute; left:50%; top:50%; width:var(--sparrow-w); height:calc(var(--sparrow-w) * .6184); margin:calc(var(--sparrow-w) * -.3092) 0 0 calc(var(--sparrow-w) * -.5); overflow:visible}
.spar{fill:var(--mint)}
.you-fill{fill:var(--amber)}
.you-k{transform:scale(var(--you-k))}
.you-k--peak{transform:scale(var(--you-k-peak))}
.trail{fill:none; stroke:url(#trail-g); stroke-width:1.5px; stroke-linecap:round; vector-effect:non-scaling-stroke}
.trail--hi{stroke:url(#trail-g-hi); transform:translate(0,-20px)}
.trail--lo{stroke:url(#trail-g-lo); transform:translate(0,20px)}
.tag{position:absolute; left:calc(50% + var(--sparrow-w) * var(--tx,0)); top:calc(50% + var(--sparrow-w) * var(--ty,0)); transform:translateX(-50%); padding:3px 7px 2px; border-radius:2px; background:var(--amber); color:var(--ink); font:400 var(--fs-tag)/1.3 var(--f-mono); letter-spacing:.08em; text-transform:uppercase; white-space:nowrap; max-width:min(72vw,300px); overflow:hidden; text-overflow:ellipsis}
#sp-outline{vector-effect:non-scaling-stroke}
@keyframes bob{50%{translate:0 -7px}}

/* ==========================================================================
   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(8,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}
}

/* ==========================================================================
   Beat 1. Ground
   ========================================================================== */
.beat--ground{min-height:100vh; min-height:100svh; display:flex; flex-direction:column; padding:calc(var(--bar-h) + clamp(12px,4svh,64px)) 0 0}
.stars{inset:0 0 28% 0; 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 41% 81%,rgba(241,244,240,.25) 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 61% 55%,rgba(241,244,240,.3) 0 1px,transparent 1.6px),
    radial-gradient(circle at 68% 26%,rgba(241,244,240,.45) 0 1px,transparent 1.6px),
    radial-gradient(circle at 74% 71%,rgba(241,244,240,.3) 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 86% 47%,rgba(241,244,240,.35) 0 1px,transparent 1.6px),
    radial-gradient(circle at 92% 29%,rgba(241,244,240,.55) 0 1px,transparent 1.6px),
    radial-gradient(circle at 96% 66%,rgba(241,244,240,.3) 0 1px,transparent 1.6px),
    radial-gradient(circle at 35% 47%,rgba(241,244,240,.22) 0 1px,transparent 1.6px);
  -webkit-mask-image:linear-gradient(#000 55%,transparent); mask-image:linear-gradient(#000 55%,transparent)}
h1 em{font-style:italic; font-weight:400; color:var(--amber)}
@media (min-width:901px){
  /* the hero is sized from the viewport height, so it fills exactly one screen on a laptop and on a wide monitor alike */
  :root{--band:clamp(96px,14svh,200px)}
  .beat--ground{--max:max(1280px,min(100vw - 2 * var(--pad),160svh)); --fs-h1:clamp(48px,min(7.4vw,11svh),176px)}
  .beat--ground h1{max-width:6.3em}
}
@media (min-width:901px) and (max-height:700px){
  .hero-does{display:none}
}
.hero{flex:1 0 auto; display:grid; grid-template-columns:minmax(0,1.35fr) minmax(0,1fr); column-gap:var(--s-4); align-items:center}
.hero-text{display:grid; gap:clamp(12px,2.6svh,40px); justify-items:start}
.hero-sub{max-width:31em; font-size:clamp(17px,2svh,26px); color:var(--text-2); text-wrap:pretty}
.tagline{font-style:normal; color:var(--amber)}
.hero-actions{display:flex; flex-wrap:wrap; align-items:center; gap:var(--s-2); max-width:100%; margin-top:var(--s-1)}
.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)}
.hero-does{display:flex; flex-wrap:wrap; align-items:center; gap:6px 0; font:400 clamp(12px,1.3svh,15px)/1.4 var(--f-mono); letter-spacing:.08em; text-transform:uppercase; color:var(--text-2)}
.hero-does span::after{content:"·"; margin-inline:.8em; color:var(--noise-text)}
.hero-does em{font-style:normal; color:var(--text)}
/* the hero stage: the sparrow at brand-mark size, crossing a pale moon; it shrinks to flying size on take-off */
.hero-sky{--d:min(34vw,58svh,860px); display:grid; justify-items:center; align-content:center; gap:clamp(10px,2.4svh,28px)}
.hero-stage{position:relative; width:var(--d); aspect-ratio:1; display:grid; place-items:center}
.hero-stage::before{content:""; position:absolute; left:20%; top:8%; width:68%; aspect-ratio:1; border-radius:50%; background:radial-gradient(circle at 34% 30%,rgba(184,255,224,.2),rgba(70,222,159,.09) 46%,rgba(70,222,159,.03) 74%); box-shadow:0 0 0 1px rgba(241,244,240,.07),0 0 120px rgba(70,222,159,.1)}
.hero-stage .perch{--sparrow-w:calc(var(--d) * .78)}
.ground-band{position:relative; z-index:1; flex:none; height:var(--band); margin-top:clamp(8px,2.4svh,40px)}
.noise{position:absolute; inset:0 0 30% 0; overflow:hidden; content-visibility:auto; contain-intrinsic-size:auto 150px}
.noise i{position:absolute; left:var(--x); top:var(--y); width:calc(26px * var(--s) * var(--z,1)); height:calc(16px * var(--s) * var(--z,1)); 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; animation:drift calc(var(--d) * var(--q,.55)) linear infinite reverse; animation-delay:calc(var(--d) * var(--q,.55) * var(--f) * -1)}
/* a looser flock: fewer birds, the far ones fainter */
.noise i:nth-child(n+25){display:none}
.noise i:nth-child(3n){opacity:.55}
/* three depths of noise: far birds crawl, the middle ones pass, the near ones rush by */
.noise i:nth-child(3n+2){--z:1.4; --q:.3}
.noise i:nth-child(6n+1){--z:1.7; --q:.14}
@keyframes drift{
  from{transform:translateX(calc(-1 * var(--x) - 30px))}
  to{transform:translateX(calc(100vw - var(--x) + 30px))}
}
.horizon{position:absolute; inset:auto 0 30% 0; height:1px; background:linear-gradient(90deg,transparent,var(--line-2) 14%,var(--line-2) 86%,transparent)}
.you-ground{inset:auto; left:78%; top:12%; display:grid; justify-items:center; gap:8px}
.you-solo{width:calc(var(--sparrow-w) * var(--you-k)); height:auto; aspect-ratio:760/470; overflow:visible}
.you-ground .you-solo{animation:struggle .8s ease-in-out infinite}
.tag--flow{position:static; transform:none}
.flutter{transform:translate(1686px,302px) rotate(38deg) scale(1,.45) rotate(-38deg) translate(-1686px,-302px); animation:flutter .2s ease-in-out infinite alternate}
@keyframes flutter{
  to{transform:translate(1686px,302px) rotate(38deg) scale(1,.14) rotate(-38deg) translate(-1686px,-302px)}
}
/* flapping hard and getting nowhere: the small bird is knocked about inside the noise */
@keyframes struggle{
  20%{translate:3px -2px; rotate:-3deg}
  45%{translate:-2px 2px; rotate:2.5deg}
  70%{translate:4px 1px; rotate:-2deg}
}
.cue{position:absolute; left:max(var(--pad),calc((100% - var(--max)) / 2)); bottom:20px; display:inline-flex; align-items:center; gap:12px; font:400 var(--fs-mono)/1 var(--f-mono); letter-spacing:.08em; text-transform:uppercase; text-decoration:none; color:var(--text-2)}
.cue::before{content:""; width:1px; height:26px; background:linear-gradient(var(--text-2),transparent)}
.cue:hover{color:var(--text)}
@media (max-width:900px){
  .beat--ground{padding-top:calc(var(--bar-h) + clamp(14px,3.6vh,32px))}
  .hero{grid-template-columns:minmax(0,1fr)}
  .hero-actions{width:100%; gap:12px}
  .btn--lg{min-height:52px; padding:0 24px; font-size:16px}
  .hero-sky{--d:min(42vw,180px); justify-items:end; padding:clamp(10px,3svh,32px) 0 0}
  .hero-does span:last-of-type::after{content:none}
  .hero-does em{flex-basis:100%}
  .ground-band{margin-top:clamp(8px,2vh,16px)}
  .you-ground{left:62%}
  .noise i:nth-child(n+13){display:none}
}

/* a spot = the perch that holds the static pair, with the sparrow's line beside it */
.spot{display:grid; justify-items:start}
.spot .says{margin-top:calc(var(--sparrow-w) * .42)}
.perch--m{display:none}
@media (max-width:900px){
  .perch--m{display:block}
  .perch--d{display:none}
  .spot{grid-template-columns:minmax(0,1fr) auto; align-items:end; gap:var(--s-2); width:100%; padding-bottom:28px}
  .spot .says{order:-1; margin-top:0; padding-bottom:20px}
  .spot .perch{margin-right:calc(var(--sparrow-w) * var(--mr,1.1))}
  .tag{left:calc(50% + var(--sparrow-w) * var(--txm,var(--tx,0))); top:calc(50% + var(--sparrow-w) * var(--tym,var(--ty,0)))}
  .still .tag{max-width:calc(var(--sparrow-w) * 2.1)}
}

/* ==========================================================================
   Beat 2. Takeoff
   ========================================================================== */
.takeoff-head{display:grid; grid-template-columns:minmax(0,1fr) auto; gap:var(--s-3) var(--s-2); align-items:center}
.takeoff-head h2{grid-column:1 / -1}
.takeoff-main{display:grid; grid-template-columns:max(25%,calc(var(--sparrow-w) * 1.58)) minmax(0,1fr); column-gap:var(--s-3); margin-top:var(--s-6)}
.takeoff-main .perch{grid-column:1}
.manifesto{grid-column:2; max-width:18ch; font:400 var(--fs-manifesto)/1.18 var(--f-display); font-optical-sizing:auto; letter-spacing:-.02em}
.w--noise{color:var(--noise-text)}
.w--key{font-style:normal; color:var(--mint)}
html.flight .manifesto .w{color:rgba(241,244,240,.42); transition:color .4s}
html.flight .manifesto .w.is-lit{color:var(--text)}
html.flight .manifesto .w--noise.is-lit{color:var(--noise-text)}
html.flight .manifesto .w--key.is-lit{color:var(--mint)}
.takeoff-foot{display:grid; grid-template-columns:repeat(12,minmax(0,1fr)); column-gap:var(--s-3); align-items:start; margin-top:var(--s-6)}
.takeoff-foot .spot{grid-column:7 / -1; grid-row:1}
.crew{grid-column:1 / span 5; grid-row:1; display:grid; gap:var(--s-2)}
.crew p + p + p{color:var(--text-2)}
.facts{display:flex; flex-wrap:wrap; gap:8px 28px; margin-top:var(--s-2); padding-top:var(--s-2); border-top:1px solid var(--line); font:400 var(--fs-mono)/1.5 var(--f-mono); letter-spacing:.08em; text-transform:uppercase; color:var(--text-2)}
@media (max-width:900px){
  .takeoff-main{display:block; margin-top:var(--s-5)}
  .takeoff-foot{display:flex; flex-direction:column; gap:var(--s-5); margin-top:var(--s-5)}
}

/* ==========================================================================
   Beat 3. The route
   ========================================================================== */
/* nine service cards on solid panels, so nothing in the sky ever runs behind the copy. The sparrow flies
   down the open lane to the right of the grid and lights each row of cards as it passes. */
.beat--route{--lane:calc(var(--sparrow-w) * 2.15); --rail:36px; --n:2; --gap:clamp(14px,1.2vw,22px)}
@media (min-width:901px){
  .beat--route{--max:max(1280px,min(100vw - 2 * var(--pad),1920px)); --fs-h2:clamp(40px,4.6vw,116px)}
}
@media (min-width:1700px){
  .beat--route{--n:3}
}
.route-head{display:grid; grid-template-columns:minmax(0,1fr) var(--lane); column-gap:var(--s-4); align-items:end}
.route-head .lead{font-size:clamp(18px,1.25vw,26px)}
.route-says{padding-left:var(--rail)}
.route-stage{margin-top:clamp(40px,6vh,88px); padding-right:calc(var(--lane) + var(--s-4))}
.stops{display:grid; grid-template-columns:repeat(var(--n),minmax(0,1fr)); gap:var(--gap)}
.stop{--k:1; position:relative; display:flex; flex-direction:column; gap:14px; padding:clamp(22px,1.9vw,36px); border:1px solid var(--line); border-radius:20px; background:linear-gradient(180deg,#11281F,#0C1D17); transition:border-color .25s, transform .25s var(--ease)}
.stop:hover{border-color:var(--line-2); transform:translateY(-3px)}
.stop:has(.pick[aria-pressed="true"]){border-color:var(--amber)}
.stop:nth-child(2n){--k:2}
.stop-top{display:flex; align-items:center; justify-content:space-between; gap:12px}
.stop-code{font:400 var(--fs-mono)/1.2 var(--f-mono); letter-spacing:.08em; color:var(--text-2)}
.stop-code span{margin-right:10px; color:var(--text); transition:color .4s}
.ring{position:relative; flex:none; width:13px; height:13px; border:1.5px solid var(--mint); border-radius:50%}
.ring::after{content:""; position:absolute; inset:2.5px; border-radius:50%; background:var(--mint)}
.stop-icon{width:clamp(40px,2.6vw,52px); height:auto; aspect-ratio:1; margin-top:clamp(6px,1.2vh,16px); fill:none; stroke:var(--mint); stroke-width:1.4; stroke-linecap:round; stroke-linejoin:round}
.stop-name{font-size:clamp(26px,1.9vw,40px)}
.stop-copy{font-size:clamp(17px,1.05vw,20px); color:var(--text-2)}
.stop-actions{display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:12px 16px; margin-top:auto; padding-top:clamp(10px,1.6vh,22px)}
/* every perch of a row sits at the same spot in the lane, whichever column its card is in */
.stop .perch{position:absolute; top:calc(50% - var(--perch-h) / 2); left:calc((var(--n) - var(--k) + 1) * 100% + (var(--n) - var(--k)) * var(--gap) + var(--rail) + var(--sparrow-w) * .2)}
@media (min-width:901px) and (max-width:1699px){
  .stop:nth-child(9){grid-column:1 / -1; --k:2}
}
@media (min-width:1700px){
  .stop:nth-child(3n+1){--k:1}
  .stop:nth-child(3n+2){--k:2}
  .stop:nth-child(3n){--k:3}
}
.stop-all{grid-column:1 / -1; display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:16px 32px; padding:clamp(20px,1.7vw,32px) clamp(22px,1.9vw,36px); border:1px dashed var(--line-2); border-radius:20px}
.stop-all p{font:400 clamp(22px,1.6vw,34px)/1.2 var(--f-display); letter-spacing:-.01em; color:var(--text-2)}
.stop-all strong{font-weight:500; color:var(--text)}
/* amber is earned: a stop turns amber only once the visitor has chosen it */
.pick{display:inline-flex; align-items:center; gap:8px; min-height:44px; padding:0 18px; border:1px solid var(--line-2); border-radius:999px; background:none; color:var(--text); font:500 clamp(14px,.9vw,17px)/1 var(--f-body); white-space:nowrap; cursor:pointer; transition:background-color .2s, border-color .2s, color .2s}
.pick::before{content:"+"; content:"+" / ""; font:400 16px/1 var(--f-mono); color:var(--amber)}
.pick:hover{border-color:var(--amber)}
.pick-on{display:none}
.pick[aria-pressed="true"]{background:var(--amber); border-color:var(--amber); color:var(--ink)}
.pick[aria-pressed="true"]::before{content:"\2713"; content:"\2713" / ""; color:inherit}
.pick[aria-pressed="true"] .pick-add{position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap}
.pick[aria-pressed="true"] .pick-on{display:inline}
@media (max-width:900px){
  .route-head{grid-template-columns:minmax(0,1fr)}
  .route-says{padding:0; margin-top:var(--s-3)}
  .route-stage{margin-top:var(--s-5); padding-right:0}
  .stops{grid-template-columns:minmax(0,1fr)}
  .stop-top{justify-content:flex-start}
  .stop-code{margin-right:auto}
  .stop .perch{position:relative; top:auto; left:auto; margin-right:var(--sparrow-w)}
  .stop-actions{justify-content:flex-start}
}
/* the boarding pass under the service cards: a solid card like the stops, the flight record on the left and
   the Google Partner badge on a stub torn off along a dashed line, with a notch cut at each end of the tear */
.ticket{--stub:clamp(220px,19vw,300px); --notch:11px; display:grid; grid-template-columns:minmax(0,1fr) var(--stub); margin-top:var(--gap); border:1px solid var(--line); border-radius:20px; background:linear-gradient(180deg,#11281F,#0C1D17);
  -webkit-mask:radial-gradient(circle at right var(--stub) top 0,transparent var(--notch),#000 calc(var(--notch) + .5px)) top / 100% 51% no-repeat,radial-gradient(circle at right var(--stub) bottom 0,transparent var(--notch),#000 calc(var(--notch) + .5px)) bottom / 100% 51% no-repeat;
  mask:radial-gradient(circle at right var(--stub) top 0,transparent var(--notch),#000 calc(var(--notch) + .5px)) top / 100% 51% no-repeat,radial-gradient(circle at right var(--stub) bottom 0,transparent var(--notch),#000 calc(var(--notch) + .5px)) bottom / 100% 51% no-repeat}
.ticket-main{display:grid; gap:var(--s-3); padding:clamp(22px,1.9vw,36px)}
.ticket-head{display:flex; flex-wrap:wrap; gap:6px 12px; font:400 var(--fs-mono)/1.5 var(--f-mono); letter-spacing:.08em; text-transform:uppercase; color:var(--text)}
.ticket-head span:nth-child(2){color:var(--text-2)}
.ticket dl{display:grid; gap:var(--s-2) var(--s-3)}
.ticket dl > div{display:grid; gap:6px; align-content:start}
.ticket dt{font:400 var(--fs-tag)/1.4 var(--f-mono); letter-spacing:.08em; text-transform:uppercase; color:var(--text-2)}
.ticket-trip{grid-template-columns:repeat(3,minmax(0,1fr)); padding-bottom:var(--s-3); border-bottom:1px dashed var(--line-2)}
.ticket-trip dd{font:500 clamp(18px,1.5vw,24px)/1.2 var(--f-display); letter-spacing:-.01em; overflow-wrap:anywhere}
.ticket-you{color:var(--amber)}
.ticket-label{margin-bottom:calc(var(--s-3) * -.5)}
.ticket-record{grid-template-columns:repeat(auto-fit,minmax(min(100%,128px),1fr))}
.ticket-record dd{order:-1}
.ticket-record dd{font:500 clamp(28px,2.6vw,40px)/1 var(--f-display); font-variant-numeric:lining-nums; letter-spacing:-.02em}
.ticket-stub{display:grid; align-content:center; padding:clamp(22px,1.9vw,36px); border-left:1px dashed var(--line-2)}
.ticket-stub a{display:grid; justify-items:start; gap:var(--s-2); text-decoration:none}
.ticket-stub strong{display:block; font-weight:500}
.ticket-stub span span{display:block; margin-top:4px; font-size:15px; color:var(--text-2)}
.ticket-stub a:hover strong{text-decoration:underline; text-underline-offset:.3em}
.gring{flex:none; display:grid; place-items:center; width:44px; height:44px; border:1px solid var(--line-2); border-radius:50%; font:500 18px/1 var(--f-body)}
/* on a narrow screen the stub tears off along the bottom instead */
@media (max-width:900px){
  .ticket{grid-template-columns:minmax(0,1fr); -webkit-mask:none; mask:none}
  .ticket-trip{grid-template-columns:repeat(2,minmax(0,1fr))}
  .ticket-trip > div:last-child{grid-column:1 / -1}
  .ticket-stub{border-left:0; border-top:1px dashed var(--line-2)}
  .ticket-stub a{grid-template-columns:auto minmax(0,1fr); align-items:center}
}

/* ==========================================================================
   Beat 4. In formation
   ========================================================================== */
.formation-grid{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,.6fr); column-gap:var(--s-4); align-items:start; margin-top:var(--s-6); --gutter:clamp(230px,28vw,403px); --tie:clamp(24px,calc(var(--gutter) - var(--perch-w) / 2 - var(--sparrow-w) * .6 - 4px),120px)}
.legs-col{position:relative}
.formation-says{position:absolute; left:calc(100% - var(--gutter) + 16px); top:calc(var(--s-3) + var(--perch-h) + var(--sparrow-w) * .44); width:calc(var(--gutter) - var(--tie) - 8px)}
.leg{position:relative; min-height:clamp(250px,36vh,340px); padding-right:var(--gutter)}
.leg:first-child{min-height:max(clamp(250px,36vh,340px),calc(var(--s-3) + var(--perch-h) + var(--sparrow-w) * .44 + 112px))}
.leg-text{display:grid; gap:12px; justify-items:start; align-content:start; padding-top:var(--s-3); border-top:1px solid var(--line-2)}
.leg-tag{font:400 var(--fs-mono)/1.5 var(--f-mono); letter-spacing:.08em; text-transform:uppercase; color:var(--text-2)}
.leg-text > p{color:var(--text-2)}
.leg .perch{position:absolute; top:var(--s-3); left:calc(100% - var(--gutter) + 16px)}
.promises{position:sticky; top:22vh; display:grid; gap:var(--s-3)}
.promise{position:relative; padding:var(--s-2) 0; border-top:1px solid var(--line)}
.promise h3{font-size:clamp(20px,1.7vw,24px); letter-spacing:-.01em}
.promise p{margin-top:4px; font-size:16px; color:var(--text-2)}
.tie{position:absolute; right:calc(100% + 16px); top:calc(var(--s-2) + .7em); width:var(--tie); height:2px; background:linear-gradient(90deg,transparent,var(--mint) 40%)}
@media (max-width:900px){
  .formation-grid{display:block; margin-top:var(--s-5)}
  .formation-says{position:static; width:auto; margin-bottom:var(--s-4)}
  .leg,.leg:first-child{min-height:0; padding:0 0 var(--s-4)}
  .leg-top{display:flex; align-items:center; justify-content:space-between; width:100%}
  .leg .perch{position:relative; top:auto; left:auto; margin-right:var(--sparrow-w)}
  .promises{position:static; margin-top:var(--s-4)}
  .tie{display:none}
}

/* ==========================================================================
   Beat 5. Proof
   ========================================================================== */
.proof-head{display:grid; grid-template-columns:minmax(0,7fr) minmax(0,5fr); column-gap:var(--s-4); align-items:start}
.proof-head .spot{padding:var(--s-4) 0 0 6%}
.cases{margin-top:var(--s-6)}
.case{position:relative; display:grid; grid-template-columns:repeat(12,minmax(0,1fr)); column-gap:var(--s-3); padding:var(--s-4) 0 var(--s-5); border-top:1px solid var(--line-2)}
.case-body{grid-column:1 / span 8; display:grid; grid-template-columns:minmax(0,1.2fr) minmax(0,1fr); gap:var(--s-3) var(--s-4); align-items:start}
.case:nth-child(even) .case-body{grid-column:5 / span 8}
.case-top{grid-column:1 / -1}
.case-meta{display:flex; flex-wrap:wrap; align-items:center; gap:6px 18px; font:400 var(--fs-mono)/1.5 var(--f-mono); letter-spacing:.08em; text-transform:uppercase}
.case-meta a{text-decoration-color:var(--line-2); text-decoration-thickness:1px; text-underline-offset:.35em}
.case-meta a:hover{text-decoration-color:currentColor}
.case-meta span{color:var(--text-2)}
.case-meta b{font-weight:400}
.case-result{max-width:11ch; font-size:var(--fs-result); line-height:1.02; color:var(--amber); font-variant-numeric:lining-nums tabular-nums}
/* a result written as a line rather than a figure: same amber, a size that keeps it to a few lines */
.case-result--line{max-width:15ch; font-size:clamp(30px,3.3vw,50px); line-height:1.06; text-wrap:balance}
.case-quote{display:grid; gap:var(--s-2); padding-top:.45em}
.case-quote p{font-size:clamp(18px,1.5vw,21px); line-height:1.5; text-wrap:pretty}
.case-quote footer{font:400 var(--fs-mono)/1.5 var(--f-mono); letter-spacing:.08em; text-transform:uppercase; color:var(--text-2)}
.case-shot{grid-column:1 / -1; aspect-ratio:16/10; overflow:hidden; border-radius:3px}
.case-shot:empty{display:none}
.case .perch{position:absolute; top:calc(50% - var(--perch-h) / 2); left:calc(83.3% - var(--perch-w) / 2)}
.case:nth-child(even) .perch{left:calc(16.7% - var(--perch-w) / 2)}
.rester{position:absolute; top:-30px; right:0; width:36px; height:auto; aspect-ratio:760/470; overflow:visible; fill:var(--amber)}
.case:nth-child(even) .rester{right:auto; left:0}
.proof-more{padding-top:var(--s-4); border-top:1px solid var(--line-2)}
@media (max-width:900px){
  .proof-head{display:block}
  .proof-head .spot{padding:var(--s-4) 0 28px}
  .cases{margin-top:var(--s-4)}
  .case{display:block; padding:var(--s-2) 0 var(--s-4)}
  .case-body,.case:nth-child(even) .case-body{display:block}
  .case-top{display:flex; align-items:center; justify-content:space-between; gap:12px}
  .case .perch,.case:nth-child(even) .perch{position:relative; top:auto; left:auto; margin-right:var(--sparrow-w)}
  .case-quote{margin-top:var(--s-2); padding-top:0}
  .rester,.case:nth-child(even) .rester{top:-17px; left:auto; right:0; width:20px}
}

/* ==========================================================================
   Beat 6. The flock: an in-flow V of client birds, tip at the sparrow
   ========================================================================== */
.flock-stage{position:relative; display:grid; grid-template-columns:var(--tip) calc(var(--colw) * var(--cols,6)) var(--fgap) minmax(0,1fr); grid-template-rows:repeat(var(--rows,13),var(--row)) auto; margin-top:var(--s-6); --row:48px; --colw:clamp(60px,6.1vw,84px); --tip:clamp(190px,19.5vw,270px); --fgap:clamp(56px,4.6vw,66px)}
.flock-tip{grid-column:1; grid-row:var(--tip-from,6) / span 3; place-self:center}
.flock-says{grid-column:1 / span 2; grid-row:var(--says-from,11) / span 3; max-width:9em}
.flock{grid-column:2; grid-row:1 / span var(--rows,13); display:grid; grid-template-columns:repeat(var(--cols,6),var(--colw)); grid-template-rows:repeat(var(--rows,13),var(--row))}
.slot{position:relative; grid-column:var(--c); grid-row:var(--r)}
.slot a,.slot-in{display:inline-grid; justify-items:start; align-content:start; gap:5px; text-decoration:none}
.fb{width:36px; height:auto; aspect-ratio:760/470; overflow:visible; fill:var(--amber); transition:transform .3s var(--ease)}
.slot a:hover .fb,.slot.is-lit .fb{transform:translateY(-3px)}
.slot-name{font:400 var(--fs-tag)/1.3 var(--f-mono); letter-spacing:.08em; text-transform:uppercase; white-space:nowrap; color:var(--text-2); transition:color .2s}
.slot a:hover .slot-name,.slot.is-lit .slot-name{color:var(--text)}
.fb--open{fill:none; stroke:var(--amber); stroke-width:1.5px; stroke-dasharray:.014 .011}
.slot--you .slot-name,.slot--you a:hover .slot-name{color:var(--amber)}
.slot-cta{position:absolute; left:48px; top:0; font:500 13px/1.5 var(--f-body); white-space:nowrap; color:var(--amber); text-decoration:underline; text-decoration-color:rgba(var(--amber-rgb),.5); text-decoration-thickness:1px; text-underline-offset:.3em}
.slot--you a:hover .slot-cta{text-decoration-color:currentColor}
.flock-you{position:relative; inset:auto; grid-column:2; grid-row:var(--tip-from,6) / span 3; place-self:center start; display:grid; justify-items:center; gap:8px; margin-left:max(calc(var(--colw) * 1.9),168px); pointer-events:none}
.you-solo--peak{width:calc(var(--sparrow-w) * var(--you-k-peak))}
.quote{position:relative; grid-column:4; grid-row:var(--r) / span 5; align-self:start; display:grid; gap:var(--s-2)}
.quote blockquote{font:400 clamp(22px,2vw,28px)/1.25 var(--f-display); font-optical-sizing:auto; letter-spacing:-.01em; text-wrap:balance}
.quote figcaption{font:400 var(--fs-mono)/1.6 var(--f-mono); letter-spacing:.08em; text-transform:uppercase; color:var(--text-2)}
.quote figcaption span{display:block; color:var(--text)}
.quote-tie{position:absolute; right:calc(100% + 14px); top:11px; width:calc(var(--fgap) + var(--span) * var(--colw) + var(--colw) - 60px); height:1px; background:var(--line-2)}
@media (max-width:900px){
  .flock-stage{grid-template-columns:auto minmax(0,1fr); grid-template-rows:none; row-gap:var(--s-4); margin-top:var(--s-5)}
  .flock-says{grid-column:1 / -1; grid-row:1; max-width:none}
  .flock-tip{grid-column:1; grid-row:2; place-self:center start}
  .flock-you{grid-column:2; grid-row:2; margin-left:var(--s-4)}
  .flock{grid-column:1 / -1; grid-row:3; grid-template-columns:minmax(0,1fr) minmax(0,1fr); grid-template-rows:none; gap:var(--s-3) var(--s-2); padding-bottom:40px}
  .slot{grid-column:auto; grid-row:auto}
  .slot:nth-child(even){top:38px}
  .fb{width:30px}
  .slot-cta{position:static}
  .slot--you a{max-width:100%}
  .slot--you .slot-name{white-space:normal; overflow-wrap:anywhere}
  /* a reserved row for the pair where the list of names and the quotes leave no open sky */
  .flock-rest{grid-column:1 / -1; justify-self:end; margin:0 var(--sparrow-w) calc(var(--sparrow-w) * .85) 0}
  .quote{grid-column:1 / -1; grid-row:auto; padding-top:var(--s-3); border-top:1px solid var(--line-2)}
  .quote-tie{display:none}
}

/* ==========================================================================
   Beat 7. The glide
   ========================================================================== */
/* three stories, no pictures: each is a solid, type-only card (topic, date, title, summary). They sit side by
   side on a wide screen and as full-width rows on a laptop. The sparrow glides down the open lane on the right. */
.beat--glide{--lane:calc(var(--sparrow-w) * 1.6); --gap:clamp(14px,1.2vw,22px)}
@media (min-width:901px){
  .beat--glide{--max:max(1280px,min(100vw - 2 * var(--pad),1920px)); --fs-h2:clamp(40px,4.6vw,116px)}
}
.glide-stage{display:grid; grid-template-columns:minmax(0,1fr) var(--lane); column-gap:var(--s-4); margin-top:clamp(40px,6vh,88px)}
.posts{display:grid; gap:var(--gap)}
.post{position:relative; display:grid; grid-template-columns:clamp(130px,12vw,190px) minmax(0,1fr) minmax(0,1.05fr); gap:14px clamp(20px,2.4vw,48px); align-items:start; padding:clamp(24px,2.2vw,40px); border:1px solid var(--line); border-radius:20px; background:linear-gradient(180deg,#11281F,#0C1D17); transition:border-color .3s, transform .25s var(--ease)}
.post:hover{border-color:var(--line-2); transform:translateY(-3px)}
.post.is-under{border-color:rgba(70,222,159,.5)}
.post-top{grid-row:1 / span 2; display:grid; gap:12px; justify-items:start}
.post-cat{display:inline-flex; align-items:center; gap:8px; padding:7px 13px; border:1px solid rgba(70,222,159,.45); border-radius:999px; font:400 var(--fs-mono)/1 var(--f-mono); letter-spacing:.08em; text-transform:uppercase; color:var(--mint)}
.post-cat::before{content:""; width:6px; height:6px; border-radius:50%; background:var(--mint)}
.post-date{font:400 var(--fs-mono)/1.5 var(--f-mono); letter-spacing:.08em; text-transform:uppercase; color:var(--text-2)}
.post-title{grid-row:1 / span 2; font-size:clamp(26px,2.2vw,44px); line-height:1.1; text-wrap:pretty}
.post-title a{text-decoration:none}
.post-title a::after{content:""; position:absolute; inset:0}
@supports selector(:has(a)){
  .post-title a:focus-visible{outline:none}
  .post:has(a:focus-visible){outline:2px solid var(--text); outline-offset:4px}
}
.u{padding-bottom:.06em; background:linear-gradient(var(--mint),var(--mint)) right bottom / 0 2px no-repeat; transition:background-size .55s var(--ease)}
.post:hover .u,.post:focus-within .u,.post.is-under .u{background-size:100% 2px}
.post-copy{max-width:38em; font-size:clamp(17px,1.05vw,20px); color:var(--text-2)}
.post-read{display:inline-flex; align-items:center; gap:10px; font-weight:500}
.post-read svg{width:14px; height:14px; transition:transform .25s var(--ease)}
.post:hover .post-read svg{transform:translateX(4px)}
@media (min-width:1700px){
  .posts{grid-template-columns:repeat(3,minmax(0,1fr))}
  .post{display:flex; flex-direction:column; gap:clamp(18px,1.3vw,26px); min-height:clamp(400px,24vw,520px)}
  .post-top{display:flex; align-items:center; justify-content:space-between; width:100%}
  .post-read{width:100%; margin-top:auto; padding-top:clamp(16px,1.2vw,22px); border-top:1px solid var(--line)}
}
.glide-lane{position:relative}
.glide-lane .perch{position:absolute; left:calc((100% - var(--perch-w)) / 2)}
.glide-lane [data-perch="post-1"]{top:24%}
.glide-lane [data-perch="post-2"]{top:50%}
.glide-lane [data-perch="post-3"]{top:74%}
.glide-more{margin-top:var(--s-4)}
@media (max-width:900px){
  .glide-stage{grid-template-columns:minmax(0,1fr); margin-top:var(--s-5)}
  .glide-lane{order:-1; margin-bottom:var(--s-3)}
  .glide-lane .perch{display:none}
  .post{display:flex; flex-direction:column; gap:14px}
  .post-top{display:flex; align-items:center; gap:12px; width:100%}
  .post-date{margin-right:auto}
  .post .perch{margin-right:calc(var(--sparrow-w) * .5)}
}

/* ==========================================================================
   Beat 8. Your turn, and the footer
   ========================================================================== */
.beat--flock{--glow:radial-gradient(58% 44% at 100% 52%,rgba(var(--amber-rgb),.1),transparent 70%)}
.beat--glide{--glow:radial-gradient(60% 42% at 100% 56%,rgba(var(--amber-rgb),.16),transparent 70%)}
/* sunrise: the light peaks on the horizon line and the ground under it is already the footer's dark */
.beat--turn{--horizon:calc(var(--band) * .3); --glow:linear-gradient(0deg,var(--sky-foot) 0,rgba(5,7,6,.7) var(--horizon),rgba(var(--amber-rgb),.3) var(--horizon),rgba(var(--amber-rgb),.12) calc(var(--horizon) + 15vh),rgba(var(--amber-rgb),.04) calc(var(--horizon) + 36vh),rgba(var(--amber-rgb),0) calc(var(--horizon) + 62vh)),radial-gradient(60% 40% at 100% 52%,rgba(var(--amber-rgb),.14),transparent 70%)}
.beat--turn{min-height:100vh; min-height:100svh; display:flex; flex-direction:column; padding-bottom:0}
.closing{flex:1 0 auto; display:grid; grid-template-columns:minmax(0,1.5fr) minmax(0,1fr); column-gap:var(--s-4); align-items:start}
.closing-text{display:grid; grid-template-columns:minmax(0,1fr); gap:var(--s-3); justify-items:start}
.closing-h{max-width:none; font-size:var(--fs-close); line-height:.95; letter-spacing:-.03em; overflow-wrap:anywhere}
.closing-h.is-long{font-size:clamp(40px,5.6vw,92px)}
.name-slot em{font-style:italic; font-weight:400; color:var(--amber)}
.plan{display:grid; grid-template-columns:minmax(0,1fr); gap:12px; justify-items:start; margin-top:var(--s-2)}
.plan-title{font-size:clamp(20px,1.7vw,24px); letter-spacing:-.01em; overflow-wrap:anywhere}
.plan-chips{display:flex; flex-wrap:wrap; gap:8px}
.plan-chips:empty{display:none}
.chip{display:inline-flex; align-items:center; gap:4px; min-height:36px; padding:0 4px 0 14px; border:1px solid rgba(var(--amber-rgb),.55); border-radius:999px; color:var(--amber); font:500 14px/1 var(--f-body)}
.chip-x{display:grid; place-items:center; width:28px; height:28px; border:0; border-radius:50%; background:none; color:inherit; font:400 16px/1 var(--f-mono); cursor:pointer}
.chip-x:hover{background:rgba(var(--amber-rgb),.16)}
.plan-empty{color:var(--text-2)}
.trap{position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden}
/* the flight plan form is always open, with the stops picked on the route already ticked; the services
   on the form stand for the plan. */
html.js .plan:not(.is-open) .plan-form{display:none}
.plan.is-open .plan-chips,.plan.is-open .plan-empty{display:none}
.plan-services{display:flex; flex-wrap:wrap; gap:8px; min-width:0; margin:0; padding:0; border:0}
.plan-services legend{width:100%; margin-bottom:10px; padding:0; font:400 var(--fs-tag)/1.4 var(--f-mono); letter-spacing:.08em; text-transform:uppercase; color:var(--text-2)}
.plan-check{position:relative; display:inline-flex; align-items:center; min-height:40px; padding:0 14px; border:1px solid var(--line-2); border-radius:999px; font:500 14px/1 var(--f-body); cursor:pointer; transition:background-color .2s, border-color .2s, color .2s}
.plan-check input{position:absolute; inset:0; width:100%; height:100%; margin:0; opacity:0; cursor:pointer}
.plan-check span::before{content:"+"; content:"+" / ""; margin-right:8px; font:400 15px/1 var(--f-mono); color:var(--amber)}
.plan-check:hover{border-color:var(--amber)}
.plan-check:has(input:checked){background:var(--amber); border-color:var(--amber); color:var(--ink)}
.plan-check:has(input:checked) span::before{content:"\2713"; content:"\2713" / ""; color:inherit}
.plan-check:has(input:focus-visible){outline:2px solid var(--text); outline-offset:2px}
.plan-form{display:grid; gap:var(--s-2); justify-items:start; width:100%; max-width:640px}
.plan-fields{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--s-2); width:100%}
.plan-field{display:grid; gap:6px}
.plan-field label{font:400 var(--fs-tag)/1.4 var(--f-mono); letter-spacing:.08em; text-transform:uppercase; color:var(--text-2)}
.plan-field input{width:100%; min-height:48px; padding:0 16px; border:1px solid var(--line-2); border-radius:12px; background:rgba(5,7,6,.5); font-size:16px; transition:border-color .2s, background-color .2s}
.plan-field input:focus{outline:none; border-color:var(--amber); background:rgba(5,7,6,.8)}
.plan-form.is-tried input:invalid{border-color:rgba(var(--amber-rgb),.75)}
.plan-status{color:var(--text-2)}
.plan-status:empty{display:none}
.plan-form.is-sent .plan-fields,.plan-form.is-sent .plan-send{display:none}
.plan-form.is-sent .plan-status{font:400 clamp(20px,1.7vw,24px)/1.3 var(--f-display); color:var(--text)}
@media (max-width:600px){
  .plan-fields{grid-template-columns:minmax(0,1fr)}
}
.contact-line{display:flex; flex-wrap:wrap; gap:6px 28px; margin-top:var(--s-3); padding-top:var(--s-3); border-top:1px solid var(--line-2); font:400 var(--fs-mono)/1.6 var(--f-mono); letter-spacing:.06em; color:var(--text-2)}
.contact-line a{color:var(--text); text-decoration-color:var(--line-2); text-decoration-thickness:1px; text-underline-offset:.35em}
.contact-line a:hover{text-decoration-color:currentColor}
.closing-spot{padding:calc(var(--sparrow-w) * .62) 0 0 calc(var(--sparrow-w) * .66)}
.ground-band--dawn .horizon{height:2px; background:linear-gradient(90deg,transparent,var(--amber) 14%,var(--amber) 86%,transparent)}
.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)}
@media (max-width:900px){
  .closing{grid-template-columns:minmax(0,1fr)}
  .closing-spot{order:-1; min-height:28svh; align-content:center; padding:0 0 28px; --mr:.4}
  .closing-spot .perch{margin-left:calc(var(--sparrow-w) * 1.5)}
  .plan-send,.plan-send .btn{width:100%}
  .foot-cols{grid-template-columns:1fr 1fr; gap:var(--s-4) var(--s-3)}
  .totop{margin-left:0}
}

/* ==========================================================================
   Flight mode. html.flight is set by the script only when motion is allowed.
   One fixed sky behind the content (colour, altitude furniture, the trail)
   and one fixed flyer overlay above it (the birds). Without the class both
   layers stay out of the page and every beat keeps its own painted sky.
   ========================================================================== */
.sky,.flyer{display:none}
html.flight .sky,html.flight .flyer{display:block; position:fixed; inset:0; overflow:hidden; pointer-events:none}
html.flight .sky{z-index:0; background:var(--sky-1)}
html.flight .flyer{z-index:30}
html.flight main,html.flight .foot{position:relative; z-index:1}
html.flight .beat{background:none}
html.flight .beat .sky-still,html.flight .beat .noise,html.flight .beat .horizon{display:none}
/* the two solo poses stay in the layout, unseen, as anchors for the visitor's bird */
html.flight .you-ground,html.flight .flock-you{display:grid; visibility:hidden}
html.flight .you-ground .flutter,html.flight .you-ground .you-solo{animation:none}
/* flight mode is switched on in the head; both layers stay unseen until the engine has placed them */
html.flight:not(.live) .sky > *,html.flight:not(.live) .flyer{visibility:hidden}

.sky > *{position:absolute; left:0; right:0; top:0}
.sky-haze{height:16vh; background:linear-gradient(180deg,transparent,rgba(184,255,224,.06) 50%,transparent)}
.sky-haze--thin{height:8vh; background:linear-gradient(180deg,transparent,rgba(184,255,224,.045) 50%,transparent)}
.sky-cloud{right:auto; width:calc(200% + var(--tile)); height:var(--thick); background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 900 24' preserveAspectRatio='none'%3E%3Cpath d='M10 14C180 3 470 0 640 9 560 17 250 24 10 14z' fill='%23F1F4F0' fill-opacity='.045'/%3E%3C/svg%3E") 0 0 / var(--tile) 100% repeat-x; animation:cloud-drift var(--dur) linear infinite}
@keyframes cloud-drift{
  from{translate:calc(var(--tile) * -1) 0}
  to{translate:0 0}
}
.sky-glow{bottom:0; background:radial-gradient(60% 42% at 100% 56%,rgba(var(--amber-rgb),.16),transparent 70%); opacity:0}
.sky-ground{height:var(--band)}
.sky-dawn{position:absolute; inset:auto 0 30% 0; height:62vh; background:linear-gradient(0deg,rgba(var(--amber-rgb),.3),rgba(var(--amber-rgb),.12) 24%,rgba(var(--amber-rgb),.04) 58%,transparent); opacity:0}
.sky-earth{position:absolute; inset:70% 0 auto 0; height:100vh; background:linear-gradient(180deg,rgba(5,7,6,.7),var(--sky-foot) calc(var(--band) * .3)); opacity:0}
.sky-horizon--dawn{height:2px; background:linear-gradient(90deg,transparent,var(--amber) 14%,var(--amber) 86%,transparent); opacity:0}
.sky .is-off{visibility:hidden}
.sky .is-off,.sky .is-off *{animation-play-state:paused}
.sky-trail{bottom:0}
.sky-trail svg{width:100%; height:100%; overflow:visible}
.trail-live{fill:none; stroke:url(#trail-live); stroke-width:1.5px; stroke-linecap:round; stroke-linejoin:round}

.flyer-svg{position:absolute; inset:0; width:100%; height:100%; overflow:visible}
.flyer .tag--live{left:0; top:0; display:flex; gap:.55em; max-width:min(76vw,330px); transform:translate(-400px,-400px); transition:opacity .2s}
.tag-name{overflow:hidden; text-overflow:ellipsis; max-width:26ch}
/* where the full tag has no room at rest it tightens, and where even that has none it steps aside */
.tag--live.is-tight .tag-name{max-width:12ch}
.tag--live.is-hushed{opacity:0}
.is-grounded [data-fx]{transform-box:fill-box; transform-origin:50% 50%; animation:struggle .8s ease-in-out infinite}
.tag-stops:empty{display:none}
.seed{position:absolute; left:-5px; top:-5px; width:10px; height:10px; border-radius:50%; background:var(--amber); opacity:0}
html.js .profile-dot{left:0; top:0}

/* content that waits for the sparrow */
#sp-body path{vector-effect:non-scaling-stroke}
html.flight .stop.is-lit .stop-code span{color:var(--mint)}
html.flight .ring::after{transform:scale(0); transition:transform .3s var(--ease)}
html.flight .stop.is-lit .ring::after{transform:none}
html.flight .tie{transform:scaleX(0); transform-origin:100% 50%; transition:transform .5s var(--ease)}
html.flight .promise.is-tied .tie{transform:none}
html.flight .rester.is-away{visibility:hidden}
html.flight .slot:not(.slot--you) .fb{fill-opacity:0; stroke:var(--amber); stroke-width:1px; stroke-opacity:.75; transition:fill-opacity .3s, stroke-opacity .3s, transform .3s var(--ease)}
html.flight .slot.is-in .fb{fill-opacity:1; stroke-opacity:0; animation:slot-in .45s var(--ease)}
@keyframes slot-in{
  0%{transform:translateY(5px) scaleY(.72)}
  55%{transform:translateY(-4px) scaleY(1.05)}
}
@media (max-width:900px){
  .tag-name{max-width:12ch}
  .tag--live.is-tight .tag-stops{display:none}
  /* room for the visitor's bird and its tag at the right end of each perch row */
  .takeoff-head .perch{margin-right:calc(var(--sparrow-w) * 1.1)}
  .stop-top,.leg-top,.case-top{margin-bottom:24px}
  .post-top{margin-bottom:calc(var(--sparrow-w) * .82)}
  /* long lines on tablets: body copy keeps a readable measure */
  .crew p,.stop-copy,.leg-text > p,.promise p,.case-quote p,.post-copy{max-width:34em}
}
@media (min-width:901px){
  .lines span{display:block}
}

/* touch: every link and control is at least 44px tall */
@media (max-width:900px),(pointer:coarse){
  .tlink,.totop,.case-meta a,.contact-line a,.foot-cols a,.foot-base a{display:inline-flex; align-items:center; min-height:44px}
  .pick{min-height:44px}
  .slot a,.slot-in{min-height:44px}
  .chip{min-height:44px; padding-right:0}
  .chip-x{width:44px; height:44px}
  .stop-actions{row-gap:4px}
  .contact-line{flex-direction:column; gap:0}
  .contact-line span{display:flex; align-items:center; gap:.7em}
  .foot-cols ul{gap:0}
  .foot-cols li{display:flex; align-items:center; gap:.6em; min-height:44px}
  .foot-base ul{row-gap:0}
}

@media print{
  :root{--text:#111; --text-2:#444; --ink:#fff; --line:rgba(0,0,0,.14); --line-2:rgba(0,0,0,.3); --mint:#0A7A4C; --amber:#8A4A00; --noise-text:#555}
  html,body{background:#fff}
  .bar,.skip,.sky,.flyer,.ground-band,.js-only{display:none !important}
  .beat,.foot{min-height:0; padding-block:28px; background:none !important}
  html.flight main,html.flight .foot{position:static}
  html.flight .still{display:block}
  html.flight .flock-you{display:grid; visibility:visible}
  html.flight .manifesto .w,html.flight .stop-name{color:inherit}
  html.flight .manifesto .w--key{color:var(--mint)}
  html.flight .slot:not(.slot--you) .fb{fill-opacity:1; stroke-opacity:0}
  html.flight .rester.is-away{visibility:visible}
  html.flight .tie{transform:none}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none !important; transition:none !important}
}

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