/* BidRock site: one stylesheet, tokens first. Timberline palette; Space Grotesk + Public Sans. */
:root{
  --pine:#1F3A33;
  --pine-deep:#162B26;
  --ink:#12241F;
  --fern:#4E6E5D;
  --fern-soft:#5E7D6B;
  --amber:#E8A33D;
  --amber-deep:#C98620;
  --sage:#8B9C8E;
  --sage-text:#A7B8AA; /* sage lightened for text: AA on pine and pine-deep */
  --bone:#F3EEE3;
  --mist:#ADC0B0;
  --line:#2C443C;
  --card:#254338;
  --display:'Space Grotesk',Arial,sans-serif;
  --body:'Public Sans',Arial,sans-serif;
  --hdr:4rem;
  --wrap:max(72rem,62vw);
}
/* altimeter readout: an integer the scroll timeline can animate */
@property --elev{syntax:'<integer>';inherits:false;initial-value:0}

@font-face{font-family:'Space Grotesk';font-weight:500;font-display:swap;src:url(/assets/fonts/space-grotesk-latin-500-normal.woff2) format('woff2')}
@font-face{font-family:'Space Grotesk';font-weight:700;font-display:swap;src:url(/assets/fonts/space-grotesk-latin-700-normal.woff2) format('woff2')}
@font-face{font-family:'Public Sans';font-weight:400;font-display:swap;src:url(/assets/fonts/public-sans-latin-400-normal.woff2) format('woff2')}
@font-face{font-family:'Public Sans';font-weight:500;font-display:swap;src:url(/assets/fonts/public-sans-latin-500-normal.woff2) format('woff2')}
@font-face{font-family:'Public Sans';font-weight:600;font-display:swap;src:url(/assets/fonts/public-sans-latin-600-normal.woff2) format('woff2')}
@font-face{font-family:'Public Sans';font-weight:700;font-display:swap;src:url(/assets/fonts/public-sans-latin-700-normal.woff2) format('woff2')}

*{box-sizing:border-box}
/* the native scrollbar stays draggable and wears the palette. Chromium ignores the ::-webkit
   rules once scrollbar-color is set, so the standard properties only go to browsers without them */
@supports not selector(::-webkit-scrollbar){html{scrollbar-width:thin;scrollbar-color:#8B9C8E #162B26}}
html::-webkit-scrollbar{width:12px}
html::-webkit-scrollbar-track{background:#162B26}
html::-webkit-scrollbar-thumb{background:#8B9C8E;border:3px solid #162B26;border-radius:6px}
html::-webkit-scrollbar-thumb:hover{background:#E8A33D}
/* type scales up gently on big monitors so 27"+ screens don't feel sparse */
html{font-size:clamp(100%,.42vw + .644rem,125%);overflow-x:clip;scroll-padding-top:calc(var(--hdr) + 1rem)}
body{margin:0;background:var(--pine);color:var(--bone);font-family:var(--body);font-size:1.0625rem;line-height:1.6;-webkit-font-smoothing:antialiased}
a{color:var(--amber)}
a:hover{color:#F0B55E}
:focus-visible{outline:2px solid var(--amber);outline-offset:2px}
img{display:block;max-width:100%;height:auto}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 1.5rem}
h1,h2,h3{font-family:var(--display);line-height:1.12;margin:0}
h2{font-size:clamp(1.875rem,3.4vw,2.75rem);letter-spacing:-.5px;margin-top:.625rem}
h3{font-size:1.5rem}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.skip{position:absolute;left:1rem;top:-4rem;z-index:30;background:var(--amber);color:var(--pine-deep);padding:.5rem 1rem;border-radius:.5rem;font-weight:700}
.skip:focus{top:.75rem;color:var(--pine-deep)}

/* ---------- header ---------- */
header{position:sticky;top:0;z-index:20;background:rgba(22,43,38,.92);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.nav{display:flex;align-items:center;gap:1.75rem;height:var(--hdr)}
.brand{display:flex;align-items:center;gap:.7rem;text-decoration:none;color:var(--bone)}
.brand:hover{color:var(--bone)}
.brand svg{display:block;width:1.875rem;height:1.875rem}
.brand b{font-family:var(--display);font-weight:700;font-size:1.3125rem;letter-spacing:1.5px}
.nav nav{margin-left:auto;display:flex;gap:1.625rem;align-items:center}
.nav nav a{color:var(--mist);text-decoration:none;font-size:.9375rem;font-weight:500}
.nav nav a:hover,.nav nav a[aria-current]{color:var(--bone)}
.btn{
  display:inline-block;font-family:var(--display);font-weight:700;font-size:1rem;letter-spacing:.3px;
  text-decoration:none;cursor:pointer;padding:.75rem 1.5rem;border-radius:.625rem;border:0;
  background:var(--amber);color:var(--pine-deep);transition:background .15s,transform .15s; /* AA: 6.9:1 */
}
.btn:hover{background:var(--amber-deep);color:var(--pine-deep)} /* 4.9:1 */
.btn.ghost{background:transparent;border:1.5px solid var(--fern-soft);color:var(--bone)}
.btn.ghost:hover{border-color:var(--mist);background:rgba(173,192,176,.08);color:var(--bone)}
/* `.nav nav a` (mist) outranks `.btn`, so the header CTA restates its ink */
.nav .btn{padding:.5625rem 1.125rem;font-size:.875rem;color:var(--pine-deep);white-space:nowrap}
.nav .btn:hover{color:var(--pine-deep)}
/* route progress under the header (scroll-driven; hidden where the altimeter rail shows) */
.progress{position:absolute;left:0;right:0;bottom:-2px;height:2px;background:var(--amber);transform-origin:0 50%;transform:scaleX(0);display:none}

/* ---------- the window frame every screenshot sits in ---------- */
.shot{margin:0;border:1px solid var(--fern);border-radius:10px;overflow:hidden;background:var(--pine);box-shadow:0 1.75rem 3.5rem -1.25rem rgba(232,163,61,.16),0 1.25rem 2.5rem -1rem rgba(0,0,0,.5)}
.shot-bar{display:flex;align-items:center;gap:.4rem;height:1.875rem;padding:0 .75rem;background:var(--pine);border-bottom:1px solid var(--fern)}
.shot-bar i{width:.5625rem;height:.5625rem;border-radius:50%;background:var(--sage)}
.shot-bar span{margin-left:.5rem;font-size:.75rem;font-weight:500;color:var(--sage-text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* launch blocker, never ships: holds the slot until the real proposal screen can be captured */
.shot.pending .shot-hold{
  display:flex;align-items:center;justify-content:center;aspect-ratio:16/9;padding:1.5rem;text-align:center;
  background:repeating-linear-gradient(135deg,var(--pine-deep) 0 14px,var(--ink) 14px 28px);color:var(--bone);font-family:var(--display);font-weight:500;
}
.shot.pending{border-style:dashed}

/* ---------- hero ---------- */
.hero{position:relative;overflow:hidden;background:linear-gradient(#1B342E,#1F3A33 45%,#25463B);min-height:calc(100vh - var(--hdr));min-height:calc(100svh - var(--hdr));display:flex;align-items:center}
/* the summit sits just outside the product window's right edge at every width ≥1000px, so it is never hidden behind the window; the route climbs the right flank in the clear */
.hero-art{position:absolute;inset:0;overflow:hidden;pointer-events:none;--mtn-h:max(36vw,94vh);--mtn-h:max(36vw,94svh);--peak-x:calc(50% + var(--wrap)/2 - 1.5rem)}
/* every ridge layer shares one 4:1 box so the summit sits at 62.5% / 15% in all of them */
.hl{position:absolute;bottom:-1px;display:block;overflow:visible;height:var(--mtn-h);width:calc(var(--mtn-h)*4);left:calc(var(--peak-x) - var(--mtn-h)*2.5)}
/* the low ridges run the full width under the copy; only the peak rises, behind the product window */
.hl-far,.hl-near,.hl-fore{left:0;width:100%;height:clamp(7rem,30vh,22rem)}
.hero-glow{position:absolute;left:var(--peak-x);bottom:calc(var(--mtn-h)*.85);width:calc(var(--mtn-h)*2.2);height:calc(var(--mtn-h)*2.2);translate:-50% 50%;background:radial-gradient(closest-side,rgba(232,163,61,.14),rgba(232,163,61,.04) 55%,transparent)}
.hero-summit{fill:var(--amber);stroke:var(--pine-deep);stroke-width:3;transform-box:fill-box;transform-origin:center}
.hero-grid{position:relative;z-index:2;display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(2rem,4vw,4.5rem);align-items:center;width:100%;padding-top:2.5rem;padding-bottom:3rem}
.eyebrow{font-family:var(--display);font-size:.875rem;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;color:var(--sage-text);margin:0 0 1rem}
.hero h1{font-size:clamp(2.5rem,4.6vw,5.5rem);font-weight:700;letter-spacing:-1px}
.hero h1 .glow{color:var(--amber);white-space:nowrap} /* "Climb it." never splits across lines */
.lede{font-size:clamp(1.0625rem,1.35vw,1.25rem);color:var(--bone);max-width:52ch;margin:1.25rem 0 0}
.cta{display:flex;gap:.875rem;margin-top:1.875rem;flex-wrap:wrap}
.meta{margin:1.375rem 0 0;font-size:.875rem;color:var(--bone)}

/* ---------- proof strip ---------- */
.proof{position:relative;z-index:1;background:var(--pine);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.proof ul{list-style:none;margin:0;padding:1.5rem 0;display:grid;grid-template-columns:repeat(4,1fr);gap:1.5rem}
.proof li{color:var(--sage-text);font-weight:600;font-size:.9688rem;line-height:1.35;padding-left:.875rem;border-left:2px solid var(--fern)}

/* ---------- sections ---------- */
section{position:relative;padding:6rem 0}
.deep{background:var(--pine-deep)}
.pine{background:var(--pine)}
.survey{background:linear-gradient(rgba(139,156,142,.05) 1px,transparent 1px) 0 0/100% 3rem,linear-gradient(90deg,rgba(139,156,142,.05) 1px,transparent 1px) 0 0/3rem 100%,var(--pine-deep)}
.kicker{font-family:var(--display);font-size:.875rem;font-weight:700;letter-spacing:2.5px;text-transform:uppercase;color:var(--sage-text);margin:0}
.sub{color:var(--mist);max-width:62ch;margin:1rem 0 0}
/* each section rises as a nearer ridge: a silhouette cap on its top edge */
.cap{position:absolute;left:0;bottom:calc(100% - 1px);width:100%;height:clamp(2.5rem,6vw,6.5rem);display:block;pointer-events:none}
.cap.flip{transform:scaleX(-1)}
.cap polyline{fill:none;stroke:var(--fern);stroke-width:2;vector-effect:non-scaling-stroke}
.deep>.cap,.survey>.cap{color:var(--pine-deep)}
.pine>.cap{color:var(--pine)}

/* ---------- route rows: screenshot + copy, alternating ---------- */
.row{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr);gap:clamp(2rem,4vw,4rem);align-items:center;margin-top:4rem}
.row.flip{grid-template-columns:minmax(0,.75fr) minmax(0,1.25fr)}
.row.flip .shot{order:2}
.pin{width:2.125rem;height:2.125rem;border-radius:.5625rem;display:flex;align-items:center;justify-content:center;background:var(--pine);border:2px solid var(--amber);margin-bottom:1rem;font-family:var(--display);font-weight:700;color:var(--amber);font-size:.9375rem}
.summit .pin{background:var(--amber);color:var(--pine-deep)}
.camp{font-size:.8125rem;font-weight:700;letter-spacing:2px;text-transform:uppercase;color:var(--mist);margin:0}
.row h3{font-size:clamp(1.5rem,2.2vw,2rem);margin:.375rem 0 .75rem}
.row p:not(.camp){margin:0;color:var(--mist)}
.row ul{margin:1rem 0 0;padding:0 0 0 1.125rem;color:var(--mist)}
.row li{margin-top:.375rem}

/* ---------- connect your AI ---------- */
.points{list-style:none;margin:1.5rem 0 0;padding:0;display:flex;flex-direction:column;gap:1rem}
.points b{display:block;font-family:var(--display);font-size:1.0625rem;color:var(--bone)}
.points span{color:var(--mist);font-size:.9375rem}

/* ---------- plan cards ---------- */
.plans{display:grid;grid-template-columns:repeat(3,1fr);gap:1.25rem;margin-top:2.5rem;align-items:stretch}
.plan{display:flex;flex-direction:column;background:var(--card);border:1px solid var(--line);border-radius:1rem;padding:1.75rem}
.plan.lead{border-top:4px solid var(--amber);padding-top:calc(1.75rem - 3px);background:#2A4A3E}
.plan h3{font-size:1.375rem}
.plan .tag{margin:.25rem 0 0;font-size:.9375rem;color:var(--mist)}
.plan .price{font-family:var(--display);font-weight:700;font-size:1.75rem;line-height:1.2;margin:1.125rem 0 0;color:var(--bone)}
.plan .approx{margin:.125rem 0 0;font-size:.9375rem;color:var(--mist);min-height:1.5em}
.plan ul{list-style:none;margin:1.125rem 0 1.5rem;padding:0;display:flex;flex-direction:column;gap:.5rem;font-size:.9688rem;color:var(--bone)}
.plan li{padding-left:1.125rem;position:relative}
.plan li::before{content:"";position:absolute;left:0;top:.6em;width:.5rem;height:2px;background:var(--amber)}
.plan .btn{margin-top:auto;text-align:center}
.link-more{display:inline-block;margin-top:1.75rem;font-weight:600}
.m2m{display:none}
[data-billing=monthly] .m2m{display:block}
[data-billing=monthly] .ann{display:none}
.billing{display:inline-flex;margin-top:2rem;border:1px solid var(--fern-soft);border-radius:.625rem;overflow:hidden}
.billing button{font:600 .9375rem var(--body);padding:.5625rem 1.125rem;background:transparent;color:var(--bone);border:0;cursor:pointer}
.billing button[aria-pressed=true]{background:var(--amber);color:var(--pine-deep)}
.early{margin:1.25rem 0 0;color:var(--mist);font-size:.9375rem}
.band{margin-top:3rem;border:1px solid var(--line);border-radius:1rem;padding:1.75rem;display:grid;grid-template-columns:1fr 1fr;gap:1.5rem 2.5rem}
.band>div:first-child{grid-column:1/-1}
.band h3{font-size:1.25rem}
.band p{margin:.375rem 0 0;color:var(--mist);font-size:.9688rem}
.band b{color:var(--bone)}
.trial-card{display:flex;flex-wrap:wrap;gap:1rem 2rem;align-items:center;justify-content:space-between;margin-top:1.25rem;background:var(--card);border:1px solid var(--line);border-radius:1rem;padding:1.5rem 1.75rem}
.trial-card p{margin:.25rem 0 0;color:var(--mist)}
.faq{margin-top:2rem;max-width:50rem}
.faq details{border-top:1px solid var(--line);padding:1rem 0}
.faq details:last-child{border-bottom:1px solid var(--line)}
.faq summary{cursor:pointer;font-family:var(--display);font-weight:700;font-size:1.125rem}
.faq p{margin:.625rem 0 0;color:var(--mist)}

/* ---------- gear up: the trial form ---------- */
.panel{position:relative;background:linear-gradient(160deg,var(--card),var(--pine-deep));border:1px solid var(--line);border-radius:1.25rem;padding:3.5rem 3rem;display:grid;grid-template-columns:1.2fr 1fr;gap:3rem;align-items:center;box-shadow:0 2rem 4rem -2rem rgba(0,0,0,.5)}
.trial-form{display:flex;gap:.75rem;margin-top:1.625rem;flex-wrap:wrap}
.trial-form input{flex:1;min-width:230px;padding:.8125rem 1rem;border-radius:.625rem;border:1.5px solid var(--fern-soft);background:var(--pine);color:var(--bone);font-family:var(--body);font-size:1rem}
.trial-form input::placeholder{color:#A3B5A6}
.trial-form input:focus{outline:2px solid var(--sage);outline-offset:1px;border-color:var(--sage)}
.form-note{margin:.875rem 0 0;font-size:.84375rem;color:var(--mist)}
.form-ok{display:none;margin:.875rem 0 0;font-size:.9375rem;color:#8FD0B0;font-weight:600}
.form-err{display:none;margin:.875rem 0 0;font-size:.90625rem;color:#F6B3A0;font-weight:600}
.form-ok .btn{margin-top:.75rem}
.spec{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.75rem;font-size:.9375rem;color:var(--mist)}
.spec li{display:flex;gap:.625rem;align-items:baseline}
.spec li::before{content:"—";color:var(--amber);font-weight:700}

/* ---------- inner pages ---------- */
.page-head{position:relative;overflow:hidden;padding:4.5rem 0 5.5rem;background:linear-gradient(#1B342E,#1F3A33 60%,#25463B)}
.page-head h1{font-size:clamp(2.25rem,4.2vw,3.75rem);letter-spacing:-.75px}
.page-head .sub{font-size:1.125rem}
.prose{max-width:46rem}
.prose h2{font-size:1.5rem;margin-top:2.25rem}
.prose p,.prose li{color:var(--mist)}
.draft{border:1.5px dashed var(--amber);border-radius:.625rem;padding:.875rem 1.125rem;color:var(--bone);margin:0 0 1.5rem}
.ph{color:var(--amber);font-weight:600}
.cols{display:grid;grid-template-columns:repeat(3,1fr);gap:1.25rem;margin-top:2rem}
.cols>div{background:var(--card);border:1px solid var(--line);border-radius:1rem;padding:1.5rem}
.cols h3{font-size:1.1875rem}
.cols p{margin:.5rem 0 0;color:var(--mist);font-size:.9688rem}

/* ---------- footer ---------- */
footer{position:relative;z-index:5;background:var(--pine-deep);border-top:1px solid var(--line);padding:2.25rem 0;font-size:.875rem;color:var(--mist)}
footer .wrap{display:flex;align-items:center;gap:.75rem 1.5rem;flex-wrap:wrap}
footer .brand svg{width:1.375rem;height:1.375rem}
footer .brand b{font-size:1rem}
footer .tagline{font-family:var(--display);font-weight:700;color:var(--amber)}
footer .links{margin-left:auto;display:flex;flex-wrap:wrap;gap:.25rem 1.375rem}
footer a{color:var(--mist);text-decoration:none}
footer .links a{display:inline-block;padding:.25rem 0}
footer a:hover{color:var(--bone)}

/* altimeter rail (decorative; only shown with scroll timelines on wide screens) */
.alt{display:none}

/* ---------- responsive ---------- */
@media (max-width:1000px){
  .hero{min-height:0}
  .hero-art{--mtn-h:max(60vw,16rem);--peak-x:72%}
  .hero-grid{grid-template-columns:minmax(0,1fr)}
  .row,.row.flip{grid-template-columns:minmax(0,1fr)}
  .row.flip .shot{order:0}
  .plans,.cols{grid-template-columns:minmax(0,1fr)}
  .band{grid-template-columns:minmax(0,1fr)}
  .panel{grid-template-columns:minmax(0,1fr);padding:2.5rem 1.75rem}
  .proof ul{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:640px){
  .nav{gap:.75rem}
  .nav nav{gap:.75rem}
  .brand{gap:.5rem}
  .brand b{font-size:1.125rem;letter-spacing:1px}
  .nav .btn{padding:.5rem .75rem}
  .nav nav a:not(.btn):not(.keep){display:none}
  section{padding:4rem 0}
  .trial-form input{min-width:0;width:100%;flex:1 1 100%}
  .trial-form .btn{flex:1 1 100%;text-align:center}
  footer .links{margin-left:0}
}
@media (max-width:370px){
  .brand b{font-size:1.125rem}
  .nav nav a.keep{display:none}
}
/* slightly tilted toward the viewer on wide screens only (perspective under 6 degrees) */
@media (min-width:1200px){
  .hero .shot{transform:perspective(1800px) rotateY(-5deg) rotateX(1.5deg);transform-origin:40% 50%}
}

/* ================= MOTION =================
   Everything below is progressive enhancement. With prefers-reduced-motion the
   page above is the whole experience: static, complete, nothing hidden. */
@media (prefers-reduced-motion:no-preference){
  html{scroll-behavior:smooth}
  /* ---- hero arrival (time-based, runs once) ---- */
  @keyframes rise-in{from{opacity:0;transform:translateY(1.25rem)}}
  @keyframes pop{from{opacity:0;transform:scale(0)}60%{transform:scale(1.35)}}
  .hero-copy>*{animation:rise-in .6s cubic-bezier(.2,.7,.2,1) both}
  .hero-copy>:nth-child(2){animation-delay:.06s}
  .hero-copy>:nth-child(3){animation-delay:.12s}
  .hero-copy>:nth-child(4){animation-delay:.18s}
  .hero-copy>:nth-child(5){animation-delay:.24s}
  @keyframes fade-in{from{opacity:0}}
  .hero .shot{animation:fade-in .8s .2s ease-out both} /* opacity only: the wide-screen tilt is a transform too */
  .hero-summit{animation:pop .5s .9s both}
  .btn:active{transform:scale(.97)}

  /* ---- reveals: IntersectionObserver + transition, never per-frame (.io set by JS) ---- */
  .io [data-rise]{opacity:0;transform:translateY(14px);transition:opacity .7s ease,transform .7s cubic-bezier(.2,.7,.2,1);transition-delay:calc(var(--i,0)*90ms)}
  .io .shot[data-rise]{transform:none} /* screenshots fade in, they never move */
  .io [data-rise].in{opacity:1;transform:none}
}

/* ================= THE HIKE =================
   A fixed vector stage behind a normal document. hike.js moves the layers with transform only;
   screenshots never move. No JS or reduced motion: the stage stands still, the page is complete. */
#stage{position:fixed;inset:0;z-index:0;overflow:hidden;pointer-events:none;contain:strict}
#stage{perspective:820px;perspective-origin:50% 62%}
/* the sky turns through a day: each hour crossfades over the last on the compositor */
#sky{position:absolute;inset:0;background:linear-gradient(transparent 56%,rgba(173,192,176,.12) 62%,transparent 70%),linear-gradient(#152A33,#1F3A33 72%)}
.z{position:absolute;inset:0;opacity:0;transition:opacity .9s linear}
.z-morning{background:linear-gradient(#1C3A34,#2B4D43 72%)}
.z-midday{background:linear-gradient(transparent 52%,rgba(139,156,142,.16) 62%,transparent 74%),linear-gradient(#2D5248,#4A6B5E 72%)}
.z-afternoon{background:linear-gradient(transparent 54%,rgba(201,166,107,.2) 66%,transparent 78%),linear-gradient(#35584D,#5B7466 72%)}
.z-alpenglow{background:linear-gradient(transparent 50%,rgba(232,163,61,.28) 66%,transparent 80%),linear-gradient(#3C5A4F,#2A4A3E)}
.z-dusk{background:radial-gradient(1.5px 1.5px at 12% 9%,#F3EEE3,transparent),radial-gradient(1.5px 1.5px at 44% 15%,#F3EEE3,transparent),radial-gradient(1px 1px at 76% 6%,#F3EEE3,transparent),radial-gradient(1px 1px at 28% 24%,#F3EEE3,transparent),radial-gradient(1.5px 1.5px at 90% 20%,#F3EEE3,transparent),linear-gradient(#2A3F4A,#1F3540)}
#stage[data-zone=morning] .z-morning,#stage[data-zone=midday] .z-midday,#stage[data-zone=afternoon] .z-afternoon,#stage[data-zone=alpenglow] .z-alpenglow,#stage[data-zone=dusk] .z-dusk{opacity:1}
/* clouds are the only thing that moves sideways, which is right for clouds */
.cloud{position:absolute;display:block;height:3vh;border-radius:999px;background:rgba(243,238,227,.07)}
.c1{top:14%;width:34vh;left:-40vh}
.c2{top:26%;width:22vh;left:-30vh}
@media (prefers-reduced-motion:no-preference){
  @keyframes cloud{to{transform:translate3d(calc(100vw + 60vh),0,0)}}
  .c1{animation:cloud 150s linear infinite}
  .c2{animation:cloud 210s linear -70s infinite}
}
/* one far range, standing still; hike.js scales it 1 to 1.06 across the whole walk */
#far{position:absolute;left:0;bottom:0;width:100%;height:78vh;transform-origin:50% 100%;fill:var(--far);stroke:var(--rim);stroke-opacity:.45;stroke-width:2}
#stage{--far:#1A322C;--rim:none}
#stage[data-zone=morning]{--far:#21403A}
#stage[data-zone=midday]{--far:#30524A}
#stage[data-zone=afternoon]{--far:#3D5F54}
/* near the top the ridge catches the light: a glow behind the view, not a wire through it */
#stage[data-zone=alpenglow]{--far:#3A5C50;--rim:#E8A33D}
#stage[data-zone=dusk]{--far:#22383F;--rim:#E8A33D}
/* the gates: all in one group, so walking is one transform per frame */
#trail3d{position:absolute;inset:0;transform-style:preserve-3d}
.hike #trail3d{will-change:transform}
/* drawn at half size, scaled 2x, and held on its own layer: the browser keeps one small texture instead of redrawing a huge one as the gate grows. This is the difference between 30 and 60fps at 2560 on an integrated GPU */
.gate{position:absolute;left:50%;bottom:0;width:120vh;height:60vh;margin-left:-60vh;visibility:hidden;opacity:0;transform:translateZ(var(--z)) scale(2);transform-origin:50% 100%;transition:opacity .5s linear}
.gate.live{visibility:visible;opacity:1;will-change:transform}
.gate svg{display:block;width:100%;height:100%}
.g-water{fill:#6F8F8A;opacity:.55}
.route-clip{position:absolute;left:50%;width:14%;margin-left:-7%;top:0;bottom:0;overflow:hidden;transform:translate3d(0,100%,0)}
.route-line{position:absolute;inset:0;width:100%;height:100%;transform:translate3d(0,-100%,0)}
.route-line polyline{fill:none;stroke:#E8A33D;stroke-width:2.5;vector-effect:non-scaling-stroke}
.hike .route-clip,.hike .route-line{will-change:transform}
.g-flag{fill:#E8A33D}
#ground{position:absolute;left:0;right:0;bottom:0;height:34vh;overflow:hidden;perspective:520px;perspective-origin:50% 0;-webkit-mask-image:linear-gradient(transparent,#000 42%);mask-image:linear-gradient(transparent,#000 42%)}
#ground .plane{position:absolute;left:50%;bottom:-6vh;width:min(70vw,44rem);margin-left:calc(min(70vw,44rem)/-2);height:200vh;overflow:hidden;transform-origin:50% 100%;transform:rotateX(68deg);background:#2A3F36}
#ground .tread{position:absolute;left:0;right:0;top:-240px;bottom:-240px;background:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22240%22%20height%3D%22240%22%3E%3Cg%20fill%3D%22%23E5D9BF%22%20fill-opacity%3D%22.16%22%3E%3Cellipse%20cx%3D%2240%22%20cy%3D%2236%22%20rx%3D%2216%22%20ry%3D%227%22%2F%3E%3Cellipse%20cx%3D%22170%22%20cy%3D%2270%22%20rx%3D%2211%22%20ry%3D%225%22%2F%3E%3Cellipse%20cx%3D%2296%22%20cy%3D%22120%22%20rx%3D%2220%22%20ry%3D%228%22%2F%3E%3Cellipse%20cx%3D%22210%22%20cy%3D%22168%22%20rx%3D%2214%22%20ry%3D%226%22%2F%3E%3Cellipse%20cx%3D%2250%22%20cy%3D%22205%22%20rx%3D%2210%22%20ry%3D%225%22%2F%3E%3C%2Fg%3E%3Cg%20stroke%3D%22%2310211C%22%20stroke-opacity%3D%22.35%22%20stroke-width%3D%223%22%3E%3Cpath%20d%3D%22M20%2090h26M130%2022h20M150%20140h30M92%20222h24%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E") 0 0/240px 240px}
.hike #ground .tread{will-change:transform}
/* the document floats above the stage: its grounds go clear, the content stays as it is */
.has-stage main{position:relative;z-index:1}
.has-stage .hero,.has-stage .proof,.has-stage .deep,.has-stage .pine,.has-stage .survey{background:transparent}
.has-stage .cap{display:none}
.has-stage .proof{border-color:transparent}
.hike .alt{display:block;position:fixed;z-index:15;right:0;top:calc(var(--hdr) + .75rem);bottom:calc(.75rem + env(safe-area-inset-bottom));width:0;pointer-events:none;font-family:var(--display);color:var(--bone)}
.hike .alt-track{position:absolute;right:3px;top:0;bottom:0;width:3px;display:block;border-radius:3px;background:repeating-linear-gradient(to bottom,rgba(243,238,227,.75) 0 1px,transparent 1px 6.894%),rgba(139,156,142,.6)}
.alt-mark{position:absolute;right:7px;top:calc(var(--at)*100%);translate:0 -50%;font-style:normal;font-size:9px;font-weight:500;line-height:1;white-space:nowrap}
/* the dot's box is the track's height, so its translate percentage is the climb */
.hike .alt-dot{position:absolute;left:0;bottom:0;width:100%;height:100%;display:block}
.hike .alt-dot::after{content:"";position:absolute;left:50%;top:0;width:.625rem;height:.625rem;margin:-.3125rem 0 0 -.3125rem;border-radius:50%;background:var(--amber)}
.alt-chip{position:absolute;right:44px;top:0;translate:0 -50%;display:flex;gap:.25rem;white-space:nowrap;padding:.1875rem .4375rem;background:var(--ink);border-radius:999px;font-size:11px;font-weight:700;letter-spacing:.5px}
.hike .alt-num{color:var(--amber);font-variant-numeric:tabular-nums}
/* iPhone Safari won't let us style or hide its indicator, so its thumb is the marker there */
@supports (-webkit-touch-callout:none){.hike .alt-dot{display:none}}
@media (max-width:999px){
    header{backdrop-filter:none;background:var(--pine-deep)}
}

/* signposts: every camp opens with one */
.sign{position:relative;display:inline-grid;grid-template-columns:auto 1fr auto;grid-template-rows:auto auto;column-gap:.625rem;align-items:center;min-width:15rem;min-height:4.5rem;margin:0 0 .875rem;padding:.625rem .875rem;background:var(--pine);border:2px solid var(--sage);border-radius:.375rem;color:var(--bone);font-family:var(--display);text-transform:uppercase}
.sign-name{grid-column:2;font-size:.8125rem;font-weight:700;letter-spacing:1.25px;line-height:1.2}
.sign-elev{grid-column:2;font-size:1.125rem;font-weight:700;letter-spacing:.5px;line-height:1.25;font-variant-numeric:tabular-nums}
.sign-arrow{grid-column:3;grid-row:1/3;width:1.125rem;height:1.125rem}
.wp{grid-column:1;grid-row:1/3;display:block;width:14px;height:14px;background:var(--pine-deep);border:2px solid var(--bone)}
.wp.flag{width:24px;height:24px;background:none;border:0}
@keyframes wp-pop{0%{transform:scale(0)}60%{transform:scale(1.3)}100%{transform:scale(1)}}
@media (prefers-reduced-motion:no-preference){
  .io .sign:not(.in) .wp{transform:scale(0)}
  .io .sign.in .wp{animation:wp-pop .35s .12s both}
}
@media (max-width:999px){
  .sign{min-width:12.5rem;min-height:3.75rem;padding:.4375rem .75rem}
  .sign-name{font-size:.75rem}
  .sign-elev{font-size:1rem}
}

/* the header is a flat band over the stage: nothing blurs through it */
.has-stage header{backdrop-filter:none;background:rgba(22,43,38,.95)}
/* stations: the terrain reads behind, the content reads as placed */
.has-stage .row{background:rgba(22,43,38,.72);border:1px solid var(--line);border-radius:1.25rem;padding:24px}
.has-stage .row [data-rise]{transition-delay:.06s}
@media (prefers-reduced-motion:no-preference){
  .io .has-stage .row[data-rise],.has-stage.io .row[data-rise]{transform:translateY(28px)}
  .io .row[data-rise]{transform:translateY(28px)}
  .io .row[data-rise].in{transform:none}
}
@media (max-width:999px){
  .has-stage .row{padding:1rem}
  .has-stage #route>.wrap,.has-stage #ai>.wrap{padding-left:.75rem;padding-right:.75rem}
  /* the rail stops short of the content; the chip gets out of the way of the form */
  .has-stage #route>.wrap,.has-stage #ai>.wrap,.has-stage #crew>.wrap,.has-stage #gear>.wrap{padding-right:16px}
}

/* ---------- the route ---------- */
.has-stage [id]{scroll-margin-top:calc(var(--hdr) + .75rem)}
.has-stage .row:first-child{margin-top:0}
.has-stage .sign-wide{display:inline-grid;margin:0}
.trailhead{position:relative;padding:.5rem 0 0}
.trailhead .wrap{position:relative;z-index:2}
.sign-wide .sign-elev{font-size:.875rem;letter-spacing:.25px;text-transform:none;font-weight:500}
.subfact{margin:0 0 .5rem!important;font-size:.875rem;font-weight:600;color:var(--sage-text)!important}
.station{background:rgba(22,43,38,.72);border:1px solid var(--line);border-radius:1.25rem;padding:2rem}
.station h2{margin-top:.25rem}
.station .kicker{margin-top:.25rem}
.cols-4{grid-template-columns:repeat(4,1fr)}
.coming{opacity:.78;border-style:dashed!important;position:relative}
.flag-coming{display:inline-block;margin-bottom:.5rem;padding:.0625rem .5rem;border:1px solid var(--amber);border-radius:999px;color:var(--amber);font:700 .6875rem var(--display);letter-spacing:1px;text-transform:uppercase}
.peak-h{font-size:clamp(2.25rem,4.4vw,4rem)}
.peak-grid{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,.7fr);gap:2rem;align-items:center;margin-top:1.75rem}
.peak-grid .points{margin-top:0}
.assist{margin-top:1.5rem;background:var(--card);border:1px dashed var(--line);border-radius:1rem;padding:1.25rem 1.5rem}
.assist h3{font-size:1.1875rem}
.assist p{margin:.375rem 0 0;color:var(--mist)}
.view{margin-top:3rem;background:rgba(22,43,38,.72);border:1px solid var(--line);border-radius:1.25rem;padding:24px}
.view .plans{margin-top:1.25rem}
.end-dot{display:inline-block;box-sizing:content-box;width:.875rem;height:.875rem;padding:.875rem;background:var(--amber);background-clip:content-box;border-radius:50%}
/* gear check: one look fixed, chips swap the other; on phones one frame swaps */
.has-stage .row.looks{display:block}
.looks-copy{max-width:44rem}
.looks-copy p{margin:0;color:var(--mist)}
.looks-frames{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1.25rem;margin-top:1.5rem}
@media (max-width:1000px){
  .nav nav a:not(.btn):not(.keep){display:none}
  .cols-4,.peak-grid{grid-template-columns:minmax(0,1fr)}
  .station{padding:1rem}
  .has-stage #crew>.wrap,.has-stage #gear>.wrap{padding-left:.75rem;padding-right:.75rem}
  .looks-frames{grid-template-columns:minmax(0,1fr)}
  
}
.lite #ground{display:none}
@media (max-width:999px){#ground{display:none}.full #ground{display:block}}
@media (max-width:1000px){
  /* on phones the copy sits on the path, so the plates go nearly solid */
  .has-stage .row,.station,.view{background:rgba(22,43,38,.92)}
}
@media (min-width:1000px){
  /* wide screens: the chip rides in the margin, clear of the stations */
  .alt-chip{right:14px}
  .alt-mark{right:9px}
}
@media (max-width:1000px){
  .view{padding:1rem}
}
@media (min-width:1000px){
  /* the rail sits just inside the scrollbar, so ticks and thumb read as one instrument */
  .hike .alt-track{right:4px}
  .sb-classic .alt-track{right:2px}
}
@media (min-width:1000px){
  /* wide screens climb upward: the summit at the top of the rail, chip and dot rising with you */
  .alt-mark{top:calc((1 - var(--at))*100%)}
  .hike .alt-dot::after{top:auto;bottom:0;margin:0 0 -.3125rem -.3125rem}
  .alt-chip{top:auto;bottom:0;translate:0 50%}
}
/* one section gap from the Peak to the Summit, so the wait reads as arrival */
.has-stage #ai{padding-bottom:3rem}
.has-stage #gear{padding-top:0}
/* the sun: low left at dawn, overhead at the ridge, low right and larger near the top */
.sun{position:absolute;left:0;top:0;width:9vh;height:9vh;margin:-4.5vh 0 0 -4.5vh;border-radius:50%;background:radial-gradient(closest-side,#F3EEE3 62%,rgba(243,238,227,.16) 66%,transparent)}
.hike .sun{will-change:transform}
.sun::after{content:"";position:absolute;inset:-160%;border-radius:50%;opacity:0;background:radial-gradient(closest-side,rgba(232,163,61,.3),transparent);transition:opacity .9s linear}
#stage[data-zone=alpenglow] .sun::after,#stage[data-zone=dusk] .sun::after{opacity:1}
/* crest lines: Sage on the ridge and the gates, warming to amber on the ridge near the top */
#stage{--rim:#8B9C8E}
.gate path:not(.g-water):not(.g-flag){stroke:#8B9C8E;stroke-opacity:.22;stroke-width:3}

/* the sign is just the section's name and an arrow */
.sign{min-width:0;min-height:0;grid-template-rows:auto;display:inline-flex;gap:.625rem;padding:.4375rem .875rem}
.sign .sign-name{font-size:.9375rem}
/* the looks: two prints, labelled big; variants beneath */
.look-label{padding:.625rem .75rem;background:var(--pine);font-family:var(--display);font-weight:700;font-size:1.125rem;color:var(--bone)}
.look .shot-bar{display:none}
.also{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem;margin-top:1rem;color:var(--mist);font-size:.9375rem}
.also button{min-height:2.5rem;padding:.25rem .75rem;border:1.5px solid var(--fern-soft);border-radius:.375rem;background:transparent;color:var(--bone);font:600 .875rem var(--body);cursor:pointer}
.also button[aria-pressed=true]{background:var(--amber);border-color:var(--amber);color:var(--pine-deep)}
@media (min-width:1000px){
  /* every station is one object: a plain board on two posts, standing on the trail */
  .walk [data-station]{position:relative;background:var(--pine);border:2px solid var(--sage);border-radius:.375rem;padding:24px;transform-origin:50% 100%;will-change:transform,opacity;margin-bottom:64px;box-shadow:none}
  .walk [data-station]::before,.walk [data-station]::after{content:"";position:absolute;top:100%;width:10px;height:66px;background:var(--pine-deep);border-left:1px solid var(--line);border-right:1px solid var(--line)}
  .walk [data-station]::before{left:12%}
  .walk [data-station]::after{right:12%}
  /* boards come one at a time: about 90vh of walking between one being flat and the next */
  .walk #route .row{margin-top:24vh}
  .walk #route .row:first-of-type{margin-top:0}
  .walk section{padding-top:0;padding-bottom:0}
  .walk #route,.walk #crew,.walk #ai,.walk #gear{padding-top:24vh}
  .walk #gear{padding-bottom:6rem}
  .walk .view{margin-top:24vh}
  .walk .hero{align-items:flex-start}
  .walk .hero-grid{width:calc(100% - 3rem);margin-top:1.5rem;padding:32px}
  .walk .hero .shot{transform:none}
  /* boards arrive by walking, so the old rise-in stands down */
  .walk [data-rise]:not([data-station]){opacity:1!important;transform:none!important;transition:none!important;animation:none!important}
  .walk [data-station][data-rise]{transition:none!important;animation:none!important}
  .walk .plan,.walk .cols>div,.walk .assist,.walk .panel{background-image:none}
  .walk .plan,.walk .cols>div,.walk .assist{background:var(--pine-deep)}
}
/* Team buys by the seat */
.seats{display:flex;align-items:center;justify-content:space-between;gap:.75rem;margin-top:auto;margin-bottom:.75rem;font-size:.9688rem;color:var(--bone)}
.seats input{width:5rem;padding:.4375rem .5rem;border-radius:.5rem;border:1.5px solid var(--fern-soft);background:var(--pine);color:var(--bone);font:600 1rem var(--body)}
.seats+.btn{margin-top:0}
@media (max-width:999px){
  /* phones: the same plain boards, standing still; they rise in as you reach them */
  .has-stage [data-station]{position:relative;background:var(--pine);border:2px solid var(--sage);border-radius:.375rem;padding:1rem;margin-bottom:40px}
  .has-stage [data-station]::before,.has-stage [data-station]::after{content:"";position:absolute;top:100%;width:8px;height:42px;background:var(--pine-deep);border-left:1px solid var(--line);border-right:1px solid var(--line)}
  .has-stage [data-station]::before{left:12%}
  .has-stage [data-station]::after{right:12%}
  .has-stage .hero-grid{width:calc(100% - 1.5rem);margin:.75rem auto 0;padding:1rem}
  /* the first screen is the pitch alone; the takeoff shot waits whole just below it */
  .has-stage .hero-copy{min-height:calc(100vh - var(--hdr) - 2.75rem);min-height:calc(100svh - var(--hdr) - 2.75rem);display:flex;flex-direction:column;justify-content:center}
  /* that hero shot is the takeoff shot, so the Takeoff board keeps its words only */
  .has-stage #takeoff>.shot{display:none}
  .has-stage .row{margin-top:2.5rem}
  .has-stage .row:first-of-type{margin-top:0}
  .has-stage section{padding-top:2.5rem;padding-bottom:0}
  .has-stage #gear{padding-bottom:3rem}
  .has-stage .plan,.has-stage .cols>div,.has-stage .assist{background:var(--pine-deep)}
  .has-stage .view{margin-top:2.5rem}
  /* the altimeter on phones is the small chip, bottom left */
  .hike .alt{top:auto;right:auto;left:10px;bottom:calc(10px + env(safe-area-inset-bottom));width:auto}
  .hike .alt-track{display:none}
  .alt-chip{position:static;translate:none;box-shadow:0 0 0 4px var(--pine-deep)} /* stays legible over text */
  .hike .alt.clear .alt-chip{opacity:0}
}