:root{--ink:#0c1a10;--cream:#f3efe3;--red:#d63b2f;--lime:#a5e05a;--amber:#f0b24a;--coral:#ff6a5c;--ease:cubic-bezier(.2,.7,.2,1);--focus:#ffbf47}
html,body{background:var(--ink);color:var(--cream)}
body{font-family:"Figtree",system-ui,sans-serif}
.stage{position:relative;min-height:100svh;display:flex;flex-direction:column;isolation:isolate;overflow:hidden}
.base{position:absolute;inset:0;z-index:-3;background:url("../img/hub-overgrown.webp") center/cover;filter:saturate(.9) brightness(.78)}
#clip{position:absolute;inset:0;z-index:2;pointer-events:none;width:100%;height:100%}

/* top bar */
.bar{position:relative;z-index:8;display:flex;justify-content:space-between;align-items:flex-start;gap:16px;padding:clamp(12px,2vw,24px) clamp(16px,3vw,40px) 0}
.brand{display:block;width:clamp(86px,9vw,128px);filter:drop-shadow(0 4px 18px rgba(0,0,0,.45))}
.brand img{width:100%;height:auto}
.tag{margin-top:6px;font:600 11px/1.3 "Figtree",sans-serif;letter-spacing:.14em;text-transform:uppercase;text-align:right;color:rgba(243,239,227,.82);text-shadow:0 1px 8px rgba(0,0,0,.6)}
.tag span{display:block;opacity:.7;letter-spacing:.08em;text-transform:none;font-weight:500;font-size:11.5px;margin-top:2px}

/* headline block */
.copy{position:relative;z-index:6;text-align:center;padding:clamp(8px,2vh,22px) clamp(16px,4vw,48px) clamp(14px,2.4vh,26px);margin-top:calc(-1 * clamp(40px,6vw,76px))}
.copy::before{content:"";position:absolute;left:0;right:0;top:calc(-1 * clamp(80px,10vw,150px));bottom:0;background:linear-gradient(180deg,rgba(8,16,10,.82) 0%,rgba(8,16,10,.7) 55%,rgba(8,16,10,0) 100%);z-index:-1;pointer-events:none}
.kick{display:inline-block;position:relative;font:700 12px/1 "Figtree",sans-serif;letter-spacing:.2em;text-transform:uppercase;color:var(--lime);padding:0 0 9px}
.kick::after{content:"";position:absolute;left:0;right:0;bottom:0;height:3px;background:repeating-linear-gradient(90deg,var(--lime) 0 14px,transparent 14px 20px);transform-origin:0 50%;animation:stripeIn 1.1s .5s var(--ease) both}
@keyframes stripeIn{from{transform:scaleX(0)}to{transform:scaleX(1)}}
h1{font-family:"Archivo",sans-serif;font-stretch:112%;font-weight:900;text-transform:uppercase;line-height:.95;letter-spacing:-.01em;font-size:clamp(1.9rem,4.6vw,3.8rem);margin:.28em auto .3em;max-width:none;text-wrap:balance}
h1 .w{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.06em}
h1 .w>i{display:inline-block;font-style:normal;transform:translateY(105%);animation:rise .9s var(--ease) forwards;animation-delay:calc(.35s + var(--i) * .09s)}
h1 .acc{color:var(--lime)}
@keyframes rise{to{transform:none}}
.lede{max-width:68ch;text-wrap:balance;margin:0 auto;font-size:clamp(.95rem,1.25vw,1.12rem);line-height:1.5;color:rgba(243,239,227,.92);opacity:0;animation:fade 1s .9s var(--ease) forwards}
.lede b{color:#fff}
@keyframes fade{to{opacity:1}}

/* lanes */
.lanes{position:relative;z-index:3;flex:1;display:flex;min-height:0;margin-top:calc(-1 * clamp(10px,2vh,24px))}
.lane{position:relative;flex:1 1 0;min-width:0;display:flex;flex-direction:column;justify-content:flex-end;color:#fff;text-decoration:none;overflow:hidden;transition:flex-grow .7s var(--ease);isolation:isolate;border-left:1px solid rgba(255,255,255,.14)}
.lane:first-child{border-left:0}
.lane__img{position:absolute;inset:0;z-index:-2;clip-path:inset(0 0 100% 0);animation:wipeY 1.15s cubic-bezier(.55,.1,.35,1) forwards;animation-delay:calc(var(--n) * .28s)}
.lane__img img{width:100%;height:100%;object-fit:cover;transform:scale(1.08);animation:drift 22s ease-in-out infinite alternate;animation-delay:calc(var(--n) * -5s);transition:filter .6s}
@keyframes drift{from{transform:scale(1.08) translate3d(-1.2%,0,0)}to{transform:scale(1.16) translate3d(1.2%,-1%,0)}}
@keyframes wipeY{to{clip-path:inset(0 0 0 0)}}
@keyframes wipeX{to{clip-path:inset(0 0 0 0)}}
.lane::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(6,14,8,.25) 0%,rgba(6,14,8,.05) 28%,rgba(6,14,8,.62) 66%,rgba(6,14,8,.9) 100%);transition:opacity .5s}
.lane::after{content:"";position:absolute;inset:-20% -60%;z-index:-1;background:linear-gradient(105deg,transparent 42%,rgba(255,255,255,.13) 50%,transparent 58%);transform:translateX(-80%);animation:sweep 8.5s ease-in-out infinite;animation-delay:calc(2.6s + var(--n) * 2.4s);pointer-events:none}
@keyframes sweep{0%{transform:translateX(-80%)}35%,100%{transform:translateX(80%)}}

.lane__in{padding:clamp(14px,2.2vw,32px);display:flex;flex-direction:column;gap:6px;opacity:0;transform:translateY(16px);animation:laneIn .9s var(--ease) forwards;animation-delay:calc(1.1s + var(--n) * .16s)}
@keyframes laneIn{to{opacity:1;transform:none}}
.num{font:700 12px/1 "Figtree",sans-serif;letter-spacing:.2em;color:var(--c)}
.name{font-family:"Archivo",sans-serif;font-stretch:125%;font-weight:900;text-transform:uppercase;line-height:.9;font-size:clamp(1.7rem,3.05vw,3rem);letter-spacing:-.01em;margin-top:2px}
.sub{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;margin-top:6px;font-weight:600;font-size:.95rem}
.sub em{font-style:normal;color:var(--c);letter-spacing:.04em}
.sub span{padding:.22em .65em;border:1px solid rgba(255,255,255,.4);border-radius:999px;font-size:.78rem;letter-spacing:.04em;white-space:nowrap}
.sum{max-width:36ch;font-size:clamp(.88rem,1vw,1rem);line-height:1.45;color:rgba(255,255,255,.9);margin-top:2px}
.go{position:relative;display:flex;align-items:center;gap:10px;margin-top:12px;height:34px;font:800 .8rem/1 "Figtree",sans-serif;letter-spacing:.14em;text-transform:uppercase}
.go__label{position:relative;z-index:2;display:inline-flex;align-items:center;gap:.6em}
.go__label svg{width:16px;height:16px;transition:transform .4s var(--ease)}
.go__track{position:absolute;left:0;right:0;bottom:0;height:3px;background:repeating-linear-gradient(90deg,var(--c) 0 12px,transparent 12px 18px);opacity:.9;transform-origin:0 50%;transform:scaleX(.28);transition:transform .7s var(--ease)}
.go__mower{position:absolute;bottom:-3px;left:0;width:14px;height:21px;transform:translateX(0) rotate(-90deg);transform-origin:50% 50%;transition:left .7s var(--ease);background:url("../img/mower.svg") center/contain no-repeat;filter:drop-shadow(0 2px 3px rgba(0,0,0,.5));z-index:3}
.lane:hover .go__track,.lane:focus-visible .go__track{transform:scaleX(1)}
.lane:hover .go__mower,.lane:focus-visible .go__mower{left:calc(100% - 14px)}
.lane:hover .go__label svg,.lane:focus-visible .go__label svg{transform:translateX(5px)}
.lane:focus-visible{outline-offset:-4px}

/* lane accents + hover growth (desktop) */
.lane--1{--c:var(--lime)}.lane--2{--c:var(--amber)}.lane--3{--c:var(--coral)}
@media (hover:hover) and (min-width:900px){
  .lanes:has(.lane:hover) .lane:not(:hover){flex-grow:.9}
  .lane:hover{flex-grow:1.25}
  .lane:hover .lane__img img{filter:saturate(1.15) brightness(1.06)}
  .lane:hover::before{opacity:.8}
}

/* intro mowers (decorative; never capture clicks) */
.pass{position:absolute;top:0;left:50%;width:clamp(34px,4vw,56px);aspect-ratio:2/3;margin-left:calc(clamp(34px,4vw,56px) / -2);z-index:4;pointer-events:none;background:url("../img/mower.svg") center/contain no-repeat;filter:drop-shadow(0 8px 10px rgba(0,0,0,.45));transform:translateY(-120%);animation:passY 1.15s cubic-bezier(.55,.1,.35,1) forwards;animation-delay:calc(var(--n) * .28s)}
@keyframes passY{0%{transform:translateY(-120%);opacity:1}92%{opacity:1}100%{transform:translateY(var(--lh,100vh));opacity:0}}
.pass::after{content:"";position:absolute;left:-20%;right:-20%;top:60%;height:6px;background:linear-gradient(90deg,transparent,rgba(185,235,110,.9),transparent);filter:blur(3px)}

footer.hf{position:relative;z-index:6;padding:12px clamp(16px,3vw,40px);font-size:12px;color:rgba(243,239,227,.72);display:flex;flex-wrap:wrap;gap:6px 18px;justify-content:space-between;background:rgba(6,12,8,.88)}
footer.hf a{color:var(--lime)}

/* ---------- mobile / stacked ---------- */
@media (max-width:899px){
  .stage{min-height:0}
  .copy{margin-top:0;padding-top:6px}
  .copy::before{top:-120px}
  .tag{display:none}
  .bar{justify-content:center}
  .lanes{flex-direction:column;margin-top:0}
  .lane{flex:none;min-height:min(34svh,300px);border-left:0;border-top:1px solid rgba(255,255,255,.18)}
  .lane__img{clip-path:inset(0 100% 0 0);animation-name:wipeX}
  .lane__in{padding:16px 18px 18px;gap:4px}
  .name{font-size:clamp(1.9rem,9vw,2.6rem)}
  .sum{max-width:44ch}
  .go{margin-top:8px}
  .pass{top:50%;left:0;margin-left:0;margin-top:calc(clamp(34px,4vw,56px) * -.75);transform:translateX(-120%) rotate(-90deg);animation-name:passX}
  @keyframes passX{0%{transform:translateX(-120%) rotate(-90deg);opacity:1}92%{opacity:1}100%{transform:translateX(100vw) rotate(-90deg);opacity:0}}
  .pass{width:44px}
}
@media (max-width:899px) and (min-width:560px){ .lane{min-height:min(30svh,260px)} .lane__in{max-width:560px} }
@media (prefers-reduced-motion:reduce){
  .lane__img{clip-path:none;animation:none}.lane__img img{animation:none;transform:none}
  .lane__in,.lede,h1 .w>i{opacity:1;transform:none;animation:none}
  .kick::after{animation:none}.lane::after{animation:none;display:none}.pass{display:none}
  .go__track{transform:scaleX(1)}
}