@font-face{font-family:"Barlow Condensed";src:url(/assets/fonts/BarlowCondensed-Medium.woff2) format("woff2");font-weight:500;font-display:swap}
@font-face{font-family:"Barlow Condensed";src:url(/assets/fonts/BarlowCondensed-SemiBold.woff2) format("woff2");font-weight:600 700;font-display:swap}
@font-face{font-family:"Barlow Condensed";src:url(/assets/fonts/BarlowCondensed-ExtraBold.woff2) format("woff2");font-weight:800;font-display:swap}
@font-face{font-family:"Source Serif 4";src:url(/assets/fonts/SourceSerif4.woff2) format("woff2");font-weight:200 900;font-display:swap}
:root{
  --moss:#16201a; --moss-2:#1e2b22; --moss-3:#2a3a2e;
  --birch:#efeee6; --lichen:#a7b2a2; --granite:#55605a;
  --tape:#f2b705; --tape-ink:#231a00; --tape-deep:#c48f00;
  --r-blue:#3d7ff2; --r-black:#0d110e; --r-dbl:#b3202f; --r-pro:#ff7a1f;
  --display:"Barlow Condensed", "Arial Narrow", sans-serif;
  --text:"Source Serif 4", Georgia, serif;
  --gut:clamp(16px,4vw,56px);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:72px}
body{margin:0;background:var(--moss);color:var(--birch);font:400 1.0625rem/1.65 var(--text);-webkit-font-smoothing:antialiased;overflow-x:hidden}
img,video,svg{display:block;max-width:100%}
a{color:inherit}
h1,h2,h3{font-family:var(--display);font-weight:800;line-height:.92;letter-spacing:-.01em;margin:0}
h2{font-size:clamp(2.6rem,6vw,4.75rem)}
h3{font-size:1.9rem}
p{margin:0 0 1em;max-width:62ch}
:focus-visible{outline:3px solid var(--tape);outline-offset:3px;border-radius:2px}
.skip{position:absolute;left:-999px;top:8px;background:var(--tape);color:var(--tape-ink);padding:.5em 1em;z-index:99}
.skip:focus{left:8px}

/* bar */
.bar{position:fixed;inset:0 0 auto;z-index:20;display:flex;align-items:center;gap:2rem;padding:14px var(--gut);transition:background .3s,backdrop-filter .3s}
.bar.solid{background:rgba(22,32,26,.88);backdrop-filter:blur(10px)}
.mark{display:flex;align-items:center;gap:.6rem;text-decoration:none;font:600 1.25rem/1 var(--display);letter-spacing:.01em}
.mark svg{width:26px;height:26px;fill:var(--tape)}
.bar nav{display:flex;gap:1.5rem;margin-left:auto}
.bar nav a{font:500 1.05rem/1 var(--display);text-decoration:none;color:var(--lichen)}
.bar nav a:hover{color:var(--birch)}
.bar-cta{font:600 1.05rem/1 var(--display);text-decoration:none;padding:.55em .9em;border:2px solid var(--tape);border-radius:3px}
.bar-cta:hover{background:var(--tape);color:var(--tape-ink)}

/* buttons */
.btn{display:inline-block;font:600 1.2rem/1 var(--display);text-decoration:none;padding:.8em 1.2em;border-radius:3px;transition:transform .15s}
.btn:active{transform:translateY(1px)}
.btn-tape{background:var(--tape);color:var(--tape-ink)}
.btn-tape:hover{background:#ffc82e}
.btn-ghost{border:2px solid rgba(239,238,230,.6)}
.btn-ghost:hover{border-color:var(--birch)}
.btn-big{font-size:1.5rem;padding:.85em 1.4em}

/* hero */
.hero{position:relative;min-height:100svh;display:flex;align-items:flex-end;overflow:hidden;isolation:isolate}
.hero-plane{position:absolute;will-change:transform}
.hero-video{inset:-8% 0 -8% 0;z-index:-2}
.hero-video video{width:100%;height:100%;object-fit:cover}
.hero-scrim{position:absolute;inset:auto 0 0 0;height:75%;z-index:-1;background:linear-gradient(to top,rgba(22,32,26,.92) 8%,rgba(22,32,26,.55) 45%,rgba(22,32,26,0))}
.hero-copy{padding:0 var(--gut) clamp(96px,15vh,150px);max-width:1100px}
.hero h1{font-size:clamp(4.5rem,15vw,13rem);line-height:.82;letter-spacing:-.02em;margin-bottom:.25em;text-shadow:0 6px 30px rgba(0,0,0,.35)}
.h-line{display:block}
.lede{font-size:clamp(1.1rem,1.6vw,1.35rem);max-width:46ch;color:#e3e6dc}
.hero-actions{display:flex;flex-wrap:wrap;gap:.75rem;margin-top:1.5rem}
.tape{left:-5%;right:-5%;bottom:-10px;height:90px;z-index:-1;opacity:.85;pointer-events:none}
.tape svg{width:100%;height:100%}
.tape path{fill:none;stroke:var(--tape);stroke-width:7;stroke-linecap:round;stroke-dasharray:1400;stroke-dashoffset:1400;animation:tie 1.8s .4s cubic-bezier(.6,.05,.3,1) forwards;vector-effect:non-scaling-stroke}
@keyframes tie{to{stroke-dashoffset:0}}
.credit-tag{position:absolute;right:var(--gut);bottom:18px;font:500 .95rem/1 var(--display);color:var(--lichen);margin:0}
.h-line{opacity:0;transform:translateY(.25em);animation:rise .9s cubic-bezier(.2,.7,.2,1) forwards}
.h-line+.h-line{animation-delay:.12s}
@keyframes rise{to{opacity:1;transform:none}}

/* before */
.before{background:var(--birch);color:var(--moss);padding:clamp(72px,12vw,140px) var(--gut)}
.before-grid{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:clamp(32px,6vw,96px);max-width:1240px;margin:0 auto;align-items:start}
.before h2{margin-bottom:.45em}
.before-head p{font-size:1.2rem}
.before .btn-tape{margin-top:.5rem}
.checklist{list-style:none;margin:0;padding:0;border-top:3px solid var(--moss)}
.checklist li{padding:1rem 0;border-bottom:1px solid rgba(22,32,26,.2)}
.checklist strong{font:700 1.3rem/1.1 var(--display);display:block;margin-bottom:.2rem;letter-spacing:.01em}

/* network */
.network{padding:clamp(72px,11vw,130px) var(--gut);max-width:1240px;margin:0 auto}
.network-sub{color:var(--lichen);font-size:1.15rem;margin-top:.8rem}
.ratio{display:flex;height:84px;margin:2.5rem 0 2rem;border-radius:3px;overflow:hidden;gap:3px}
.seg{flex:var(--n) 1 0;display:flex;align-items:flex-end;padding:.6rem .7rem;font:600 1.05rem/1 var(--display);white-space:nowrap;overflow:hidden;transform-origin:left;transform:scaleX(0);transition:transform 1.1s cubic-bezier(.2,.7,.2,1)}
.seg b{font-size:2.3rem;margin-right:.35rem;line-height:.8}
.ratio.in .seg{transform:none}
.ratio.in .seg:nth-child(2){transition-delay:.12s}.ratio.in .seg:nth-child(3){transition-delay:.2s}.ratio.in .seg:nth-child(4){transition-delay:.28s}
.r-blue{background:var(--r-blue);color:#fff}
.r-black{background:var(--r-black);color:var(--birch);box-shadow:inset 0 0 0 2px var(--granite)}
.r-dbl{background:var(--r-dbl);color:#fff}
.r-pro{background:var(--r-pro);color:#2a1100}
.facts{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1.5rem;margin:0}
.facts div{border-top:1px solid var(--moss-3);padding-top:.8rem}
.facts dt{font:500 1rem/1 var(--display);color:var(--lichen);margin-bottom:.4rem}
.facts dd{margin:0;font-size:1.05rem}

/* trails */
.trails{background:var(--moss-2);padding:clamp(72px,11vw,130px) var(--gut)}
.trails-head{max-width:1240px;margin:0 auto 2rem}
.level-bar{position:sticky;top:58px;z-index:5;background:var(--moss-2);display:flex;flex-wrap:wrap;align-items:center;gap:.6rem 1.5rem;padding:.8rem 0;border-bottom:1px solid var(--moss-3)}
.trails-head h2{font-size:clamp(3rem,8vw,6.5rem);margin-bottom:.15em}
.trails-head>p{color:var(--lichen);margin-bottom:1rem}
.level{display:inline-flex;flex-wrap:wrap;gap:4px;background:var(--moss);padding:4px;border-radius:4px}
.level button{display:flex;align-items:center;gap:.5rem;font:600 1.15rem/1 var(--display);color:var(--lichen);background:none;border:0;padding:.7em 1em;border-radius:3px;cursor:pointer}
.level button[aria-checked=true]{background:var(--birch);color:var(--moss)}
.level button:hover:not([aria-checked=true]){color:var(--birch)}
.dot{width:14px;height:14px;display:inline-block;border-radius:50%}
.dot.r-black{border-radius:2px;transform:rotate(45deg);width:12px;height:12px}
.dot.r-dbl{border-radius:2px;transform:rotate(45deg);width:12px;height:12px}
.tally{margin:0;font:600 1.3rem/1 var(--display)}
.tally span{color:var(--tape);font-size:1.6rem}
.catalog{list-style:none;margin:0 auto;padding:0;max-width:1240px;display:grid;grid-template-columns:repeat(auto-fill,minmax(270px,1fr));gap:28px 22px}
.trail{position:relative;transition:opacity .35s,filter .35s}
.trail figure{margin:0;aspect-ratio:7/4;overflow:hidden;border-radius:3px;background:var(--moss)}
.trail img,.trail video{width:100%;height:100%;object-fit:cover}
.trail-body{padding:.75rem 0 0;display:grid;grid-template-columns:1fr auto;gap:.15rem .8rem;align-items:baseline}
.trail h3{font-size:1.65rem;line-height:1}
.trail .len{font:600 1.3rem/1 var(--display);color:var(--birch)}
.trail .rating{grid-column:1/-1;display:flex;align-items:center;gap:.45rem;font:500 1.02rem/1.2 var(--display);color:var(--lichen)}
.trail .flag{position:absolute;top:10px;left:10px;font:600 .95rem/1 var(--display);background:var(--tape);color:var(--tape-ink);padding:.35em .55em;border-radius:2px;display:none}
.trail.has-clip .flag{display:block}
.trail.above{opacity:.38;filter:grayscale(.85)}
.trail.above figure::after{content:"Above your level today";position:absolute;right:10px;top:10px;font:600 .95rem/1 var(--display);background:var(--moss);color:var(--birch);padding:.35em .55em;border-radius:2px}
.trail figure{position:relative}
.catalog-note{max-width:1240px;margin:2.5rem auto 0;color:var(--lichen);font-size:.95rem}

/* loop */
.loop{position:relative;height:320vh;background:var(--birch);color:var(--moss)}
.loop-sticky{position:sticky;top:0;height:100svh;overflow:hidden;display:flex;flex-direction:column;justify-content:center;padding:72px 0 40px}
.loop-intro{padding:0 var(--gut);max-width:880px}
.loop-intro h2{margin-bottom:.35em}
.loop-intro p{font-size:1.15rem}
.loop-track{position:relative;margin-top:clamp(24px,5vh,56px);will-change:transform;padding-left:var(--gut)}
.loop-tape{position:absolute;left:0;top:34px;width:4200px;max-width:none;height:60px}
.loop-tape path{fill:none;stroke:var(--tape-deep);stroke-width:6;stroke-linecap:round}
.loop-steps{list-style:none;margin:0;padding:0;display:flex;gap:28px;counter-reset:s;width:max-content}
.loop-steps li{counter-increment:s;width:250px;padding-top:110px;position:relative}
.loop-steps li::before{content:counter(s);position:absolute;top:40px;left:0;width:48px;height:48px;border-radius:50%;background:var(--moss);color:var(--birch);display:grid;place-items:center;font:800 1.4rem/1 var(--display)}
.loop-steps li.road::before{background:var(--birch);color:var(--moss);box-shadow:inset 0 0 0 3px #7c4ccf}
.loop-steps b{display:block;font:800 1.9rem/.95 var(--display);margin-bottom:.35rem}
.loop-steps span{font-size:1rem;color:#46524a}
.loop-steps .road b{color:#5b3aa6}

/* footage */
.footage{padding:clamp(72px,11vw,130px) var(--gut);max-width:1400px;margin:0 auto}
.footage h2{margin-bottom:2rem}
.reel{display:grid;grid-template-columns:2fr 1fr;grid-template-rows:auto auto auto;gap:14px}
.reel figure{margin:0;position:relative;overflow:hidden;border-radius:3px;background:#000}
.reel video{width:100%;height:100%;object-fit:cover;aspect-ratio:16/9}
.reel-big{grid-row:1/4}
.reel-big video{height:100%}
.reel figcaption{position:absolute;left:12px;bottom:10px;font:600 1.15rem/1 var(--display);text-shadow:0 2px 8px rgba(0,0,0,.7)}
.reel-credit{margin-top:1.2rem;color:var(--lichen);font-size:.95rem}

/* close */
.close{background:var(--moss-2);padding:clamp(72px,11vw,130px) var(--gut)}
.close-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(32px,6vw,96px);max-width:1240px;margin:0 auto}
.close h2{margin-bottom:.5em}
.join{background:var(--birch);color:var(--moss);padding:clamp(24px,4vw,48px);border-radius:4px}
.join h3{font-size:clamp(2.4rem,4.5vw,3.6rem);margin-bottom:.4em}
.join .btn-big{margin:.6rem 0 1.6rem}
.elsewhere{list-style:none;margin:0;padding:0;border-top:1px solid rgba(22,32,26,.25)}
.elsewhere li{padding:.7rem 0;border-bottom:1px solid rgba(22,32,26,.15);font-size:1rem}
.elsewhere a{font:700 1.2rem/1 var(--display)}
.foot{padding:40px var(--gut) 56px;color:var(--lichen);font-size:.92rem;border-top:1px solid var(--moss-3)}
.foot p{margin:.2rem 0}

/* responsive */
@media (max-width:900px){
  .bar nav{display:none}
  .bar-cta{margin-left:auto}
  .before-grid,.close-grid{grid-template-columns:1fr}
  .facts{grid-template-columns:1fr 1fr}
  .reel{grid-template-columns:1fr}
  .reel-big{grid-row:auto}
  .seg{font-size:0}
  .seg b{font-size:1.9rem;margin:0}
  .ratio{height:70px}
  .level-bar{top:54px}
}
@media (max-width:520px){
  .level button{padding:.6em .7em;font-size:1.05rem}
  .loop-steps li{width:210px}
  .hero h1{font-size:clamp(4rem,21vw,6rem)}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .h-line{opacity:1;transform:none;animation:none}
  .tape path{animation:none;stroke-dashoffset:0}
  .seg{transform:none;transition:none}
  .hero-plane{transform:none!important}
  .loop{height:auto}
  .loop-sticky{position:static;height:auto;overflow:visible}
  .loop-track{transform:none!important;overflow-x:auto;padding-bottom:16px}
  .trail{transition:none}
}