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

/* ==========================================================================
   Service page. Same tokens, bar, buttons and footer as the home page; the
   sections below are specific to a service.
   ========================================================================== */
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}
.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)}
.icon{width:clamp(40px,2.6vw,52px); height:auto; aspect-ratio:1; fill:none; stroke:var(--mint); stroke-width:1.4; stroke-linecap:round; stroke-linejoin:round}
.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}}

/* hero: one screen, sized from the viewport height like the home page */
.svc-hero{position:relative; min-height:100vh; min-height:100svh; display:flex; flex-direction:column; justify-content:center; padding:calc(var(--bar-h) + clamp(16px,4svh,64px)) 0 clamp(32px,7svh,96px); overflow:hidden; background:var(--sky-1); --fs-h1:clamp(42px,min(5vw,9.4svh),128px)}
.svc-hero h1{max-width:8.4em}
h1 em{font-style:italic; font-weight:400; color:var(--mint)}
.stars{position:absolute; inset:0 0 20% 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),radial-gradient(circle at 96% 66%,rgba(241,244,240,.3) 0 1px,transparent 1.6px);
  -webkit-mask-image:linear-gradient(#000 55%,transparent); mask-image:linear-gradient(#000 55%,transparent)}
.hero{position:relative; 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,36px); justify-items:start}
.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{color:var(--text)}
.crumbs [aria-current]{color:var(--text)}
.hero-sub{max-width:33em; font-size:clamp(17px,2svh,26px); color:var(--text-2); text-wrap:pretty}
.hero-actions{display:flex; flex-wrap:wrap; align-items:center; gap:var(--s-2); max-width:100%}
/* the service hero has its own device: a boarding pass for this stop, the sparrow crossing its corner */
.hero-sky{--pw:min(38vw,62svh,800px); display:grid; justify-items:center; align-content:center; gap:clamp(14px,2.6svh,32px)}
.pass{--pp:clamp(20px,calc(var(--pw) * .055),44px); position:relative; width:var(--pw); margin-top:calc(var(--pw) * .15); padding:var(--pp); border:1px solid var(--line-2); border-radius:22px; background:linear-gradient(180deg,#12291F,#0B1A15); box-shadow:0 40px 120px rgba(0,0,0,.45)}
.pass-bird{position:absolute; right:-7%; top:calc(var(--pw) * -.21); width:50%; pointer-events:none}
.pass-top,.pass dt,.pass-end small{font:400 clamp(10px,calc(var(--pw) * .018),13px)/1.4 var(--f-mono); letter-spacing:.1em; text-transform:uppercase; color:var(--text-2)}
.pass-top{display:flex; justify-content:space-between; gap:16px; max-width:52%}
.pass-route{display:grid; grid-template-columns:auto minmax(0,1fr) auto; align-items:end; gap:clamp(12px,calc(var(--pw) * .03),24px); margin-top:clamp(22px,calc(var(--pw) * .1),72px)}
.pass-end{display:grid; gap:6px}
.pass-end strong{font:500 clamp(22px,calc(var(--pw) * .064),48px)/1 var(--f-display); letter-spacing:-.02em}
.pass-end:last-child{text-align:right}
.pass-line{position:relative; margin-bottom:.7em; border-top:1px dashed var(--line-2)}
.pass-line i{position:absolute; top:-4px; left:calc(var(--i) * 20% - 10%); width:7px; height:7px; margin-left:-3.5px; border:1px solid var(--mint); border-radius:50%; background:#0F2119}
.pass-dot{position:absolute; top:-5px; left:0; width:9px; height:9px; border-radius:50%; background:var(--amber); animation:pass-travel 7s cubic-bezier(.45,0,.55,1) 1.4s infinite both}
@keyframes pass-travel{
  0%{left:0; opacity:0}
  8%,92%{opacity:1}
  100%{left:calc(100% - 9px); opacity:0}
}
.pass-fields{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:clamp(14px,calc(var(--pw) * .04),30px) 24px; margin:clamp(22px,calc(var(--pw) * .08),56px) 0 0}
.pass dd{margin:4px 0 0; font:500 clamp(18px,calc(var(--pw) * .038),30px)/1.15 var(--f-display); letter-spacing:-.01em}
.pass dd.is-you{color:var(--amber)}
.pass-cut{position:relative; margin:clamp(20px,calc(var(--pw) * .07),48px) calc(var(--pp) * -1) 0; border-top:1px dashed var(--line-2)}
.pass-cut::before,.pass-cut::after{content:""; position:absolute; top:-12px; width:24px; height:24px; border:1px solid var(--line-2); border-radius:50%; background:var(--sky-1)}
.pass-cut::before{left:-13px; clip-path:inset(0 0 0 50%)}
.pass-cut::after{right:-13px; clip-path:inset(0 50% 0 0)}
.pass-stub{display:flex; flex-wrap:wrap; gap:8px; padding-top:clamp(16px,calc(var(--pw) * .05),34px)}
.pass-stub li{padding:7px 13px; border:1px solid var(--line-2); border-radius:999px; font:400 clamp(10px,calc(var(--pw) * .018),13px)/1 var(--f-mono); letter-spacing:.08em; text-transform:uppercase}
.hero-sky .says{max-width:18em; font-size:clamp(18px,2.4svh,32px); text-align:center}
.swoop{position:relative; animation:swoop 1.15s cubic-bezier(.16,.7,.24,1) .25s 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}
}
.bird{display:block; width:100%; height:auto; aspect-ratio:760/470; overflow:visible; fill:var(--mint)}
/* two wingbeats every few seconds: the wingless body and the separate wing replace the whole mark only while it beats */
.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)}}

/* what a site does for you */
.svc-why{--from:var(--sky-1); --to:var(--sky-2)}
.why-grid{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(14px,1.2vw,22px); margin-top:clamp(40px,6vh,88px)}
.why{display:flex; flex-direction:column; gap:14px; padding:clamp(24px,2.2vw,44px)}
.why:hover,.case:hover,.read:hover{border-color:var(--line-2); transform:translateY(-3px)}
.why-top{display:flex; align-items:center; justify-content:space-between; font:400 var(--fs-mono)/1 var(--f-mono); letter-spacing:.08em; color:var(--text-2)}
.why h3{margin-top:clamp(8px,1.4vh,20px); font-size:clamp(28px,2.4vw,52px)}
.why p{font-size:clamp(17px,1.1vw,21px); color:var(--text-2)}

/* the approach: heading stays put, five steps scroll past, the sparrow flies down the route line */
.svc-approach{--from:var(--sky-2); --to:var(--sky-4); --lane:clamp(150px,13vw,260px)}
.approach{display:grid; grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr) var(--lane); column-gap:var(--s-4); align-items:start}
.approach .sec-head{position:sticky; top:calc(var(--bar-h) + 12vh)}
.steps{display:grid; gap:clamp(14px,1.2vw,22px)}
.step{display:grid; grid-template-columns:clamp(64px,6vw,120px) minmax(0,1fr); column-gap:clamp(16px,2vw,36px); padding:clamp(24px,2.2vw,44px)}
.step .step-n{margin:0; font:400 clamp(40px,4vw,84px)/.9 var(--f-display); color:var(--text-2); transition:color .4s}
.step h3{font-size:clamp(26px,2vw,42px)}
.step p{margin-top:10px; font-size:clamp(17px,1.1vw,21px); color:var(--text-2)}
.step.is-lit{border-color:rgba(70,222,159,.5)}
.step.is-lit .step-n{color:var(--mint)}
.rail{position:relative; align-self:stretch}
.rail::before{content:""; position:absolute; top:0; bottom:0; left:50%; width:1px; background:linear-gradient(180deg,transparent,rgba(70,222,159,.45) 6%,rgba(70,222,159,.45) 94%,transparent)}
.rail-bird{position:sticky; top:44vh; display:block; padding-block:12px}
.rail-bird .bird{width:min(100%,200px); margin-inline:auto}

/* built to be found */
.svc-seo{--from:var(--sky-4); --to:var(--sky-5)}
.seo{display:grid; grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr); column-gap:var(--s-5); align-items:start}
.seo .sec-head{position:sticky; top:calc(var(--bar-h) + 12vh)}
.acc{display:grid; gap:12px}
.acc details{padding:0 clamp(20px,2vw,36px)}
.acc details[open]{border-color:rgba(70,222,159,.5)}
.acc summary{display:flex; align-items:center; justify-content:space-between; gap:16px; min-height:clamp(72px,6vw,104px); cursor:pointer; list-style:none; font:500 clamp(22px,1.8vw,36px)/1.15 var(--f-display); letter-spacing:-.015em}
.acc summary::-webkit-details-marker{display:none}
.acc summary::after{content:"+"; flex:none; font:400 28px/1 var(--f-mono); color:var(--mint); transition:transform .25s var(--ease)}
.acc details[open] summary::after{transform:rotate(45deg)}
.acc p{max-width:46em; padding-bottom:1.1em; font-size:clamp(17px,1.1vw,21px); color:var(--text-2)}

/* proof */
.svc-proof{--from:var(--sky-5); --to:var(--sky-6)}
.proof-head{display:flex; flex-wrap:wrap; align-items:flex-end; justify-content:space-between; gap:var(--s-3)}
.cases{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(14px,1.2vw,22px); margin-top:clamp(40px,6vh,88px)}
.case{display:flex; flex-direction:column; gap:16px; padding:clamp(24px,2.2vw,44px)}
.case-meta{font:400 var(--fs-mono)/1.5 var(--f-mono); letter-spacing:.08em; text-transform:uppercase; color:var(--text-2)}
.case-meta strong{font-weight:400; color:var(--text)}
.case-result{font:500 clamp(34px,3vw,64px)/1.02 var(--f-display); letter-spacing:-.02em; color:var(--amber)}
.case blockquote p{font-size:clamp(18px,1.2vw,23px)}
.case blockquote footer{margin-top:10px; font:400 var(--fs-mono)/1.5 var(--f-mono); letter-spacing:.08em; text-transform:uppercase; color:var(--text-2)}
.case .tlink{margin-top:auto; padding-top:8px}

/* one thing to read */
.svc-read{--from:var(--sky-6); --to:var(--sky-8)}
.read{display:grid; grid-template-columns:auto minmax(0,1fr) auto; align-items:center; gap:clamp(20px,2.4vw,48px); padding:clamp(24px,2.2vw,44px)}
.read-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)}
.read-cat::before{content:""; width:6px; height:6px; border-radius:50%; background:var(--mint)}
.read h3{font-size:clamp(24px,2.2vw,44px)}
.read h3 a{text-decoration:none}
.read h3 a::after{content:""; position:absolute; inset:0}
.read p{margin-top:8px; max-width:44em; font-size:clamp(17px,1.05vw,20px); color:var(--text-2)}
.read-go{display:inline-flex; align-items:center; gap:10px; font-weight:500}
.read-go svg{width:14px; height:14px; transition:transform .25s var(--ease)}
.read:hover .read-go svg{transform:translateX(4px)}

/* your turn */
.svc-cta{--from:var(--sky-8); --to:var(--sky-9); overflow:hidden}
.svc-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:9em; font-size:clamp(46px,6.2vw,150px); line-height:.98}
.cta .lead{font-size:clamp(18px,1.25vw,26px)}
.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)}
.more{position:relative; margin-top:clamp(56px,9vh,120px)}
.more ul{display:flex; flex-wrap:wrap; gap:10px; margin-top:var(--s-2)}
.more a{display:inline-flex; align-items:center; min-height:44px; padding:0 18px; border:1px solid var(--line-2); border-radius:999px; text-decoration:none; font-size:clamp(15px,.95vw,18px); transition:border-color .2s}
.more a:hover{border-color:var(--mint)}


/* ==========================================================================
   Motion. Entrance on load, reveals on scroll, a slow flock in the hero.
   All of it is switched off under prefers-reduced-motion at the end.
   ========================================================================== */
@keyframes rise{from{opacity:0; transform:translateY(34px)}}
.hero-text > *{animation:rise .85s var(--ease) both; animation-delay:calc(var(--n,0) * 110ms + .1s)}
.hero-text > :nth-child(2){--n:1}
.hero-text > :nth-child(3){--n:2}
.hero-text > :nth-child(4){--n:3}
.hero-text > :nth-child(5){--n:4}
.pass{animation:pass-in 1.1s var(--ease) .35s both}
@keyframes pass-in{from{opacity:0; transform:translateY(56px) rotate(3deg)}}
.swoop{animation-delay:.95s}
.pass-line{transform-origin:0 50%; animation:line-in .9s var(--ease) 1.15s both}
@keyframes line-in{from{transform:scaleX(0)}}
.pass-fields > div,.pass-stub li{animation:rise .7s var(--ease) both; animation-delay:calc(var(--n,0) * 90ms + 1.2s)}
.pass-fields > :nth-child(2),.pass-stub li:nth-child(2){--n:1}
.pass-fields > :nth-child(3),.pass-stub li:nth-child(3){--n:2}
.pass-fields > :nth-child(4),.pass-stub li:nth-child(4){--n:3}
.pass-stub li{animation-delay:calc(var(--n,0) * 90ms + 1.6s)}
.hero-sky .says{animation:rise .8s var(--ease) 1.9s both}
.rail-bird .hb-rest,.rail-bird .hb-flap,.rail-bird .hb-wing{animation-duration:2.8s; animation-delay:0s}
.flock{position:absolute; inset:auto 0 0 0; height:24%; 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))}}
/* scroll reveals: the script adds .is-in when a block enters, then takes both classes off again */
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 .icon > *{stroke-dasharray:90; stroke-dashoffset:90; transition:stroke-dashoffset 1.2s ease calc(var(--d,0) * 110ms + .3s)}
html.js .rv.is-in .icon > *{stroke-dashoffset:0}

@media (max-width:1100px){
  .why-grid,.cases{grid-template-columns:minmax(0,1fr)}
  .approach{grid-template-columns:minmax(0,1fr) var(--lane)}
  .approach .sec-head,.seo .sec-head{position:static; grid-column:1 / -1; margin-bottom:var(--s-5)}
  .seo{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:900px){
  .svc-hero{min-height:0; padding-top:calc(var(--bar-h) + clamp(14px,3.6vh,32px))}
  .hero{grid-template-columns:minmax(0,1fr); row-gap:var(--s-4)}
  .hero-actions{width:100%; gap:12px}
  .btn--lg{min-height:52px; padding:0 24px; font-size:16px}
  .hero-sky{--pw:min(100%,520px); justify-items:stretch}
  .pass{width:100%; margin-top:22vw}
  .pass-bird{top:-24vw; right:-2%; width:46%}
  .hero-sky .says{text-align:left}
  .approach{grid-template-columns:minmax(0,1fr)}
  .rail{display:none}
  .step{grid-template-columns:minmax(0,1fr); row-gap:14px}
  .read{grid-template-columns:minmax(0,1fr); justify-items:start}
  .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,.more a,.crumbs a,.tlink,.totop,.foot-cols a,.foot-base 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{opacity:1; transform:none}
  .flock{display: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}