:root{--forest:#064734;--ink:#0B2A20;--leaf:#E0FFC2;--leaf2:#F3FFE8;--mut:#4C6B5E;--line:#CFE3D2;
--d:"Bricolage Grotesque",system-ui,sans-serif;--s:"Instrument Serif",Georgia,serif;--m:"DM Mono",ui-monospace,monospace;--b:"DM Sans",system-ui,sans-serif}
*{box-sizing:border-box;margin:0}
html{scroll-behavior:smooth;overflow-x:hidden;-webkit-text-size-adjust:100%}
@media (pointer:coarse){html.snap{scroll-snap-type:y mandatory}}
body{background:#fff;color:var(--ink);font:400 1rem/1.55 var(--b)}
a{color:inherit}
:focus-visible{outline:3px solid var(--forest);outline-offset:3px}
img{max-width:100%}
.wrap{width:min(1180px,100% - 2.5rem);margin-inline:auto}
h1,h2,h3{font-family:var(--d);line-height:.95;letter-spacing:-.035em;color:var(--forest)}
h1{font-size:clamp(2.8rem,15vw,6rem);font-weight:700}
h2{font-size:clamp(2.1rem,10.5vw,4rem);font-weight:700}
h3{font-size:1.25rem;font-weight:500;letter-spacing:-.02em}
em{font-family:var(--s);font-style:italic;font-weight:400;color:var(--forest);background:linear-gradient(transparent 60%,var(--leaf) 60%);padding-inline:.04em}
.eyebrow{display:inline-block;font:500 .72rem var(--m);letter-spacing:.14em;text-transform:uppercase;color:var(--forest);background:var(--leaf);padding:.4rem .75rem;border-radius:999px}
.sub{color:var(--mut);font-size:1.1rem;margin-top:.9rem;max-width:34rem}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;min-height:52px;padding:.7rem 1.6rem;border-radius:999px;border:2px solid var(--forest);background:var(--forest);color:var(--leaf);font:500 1rem var(--b);text-decoration:none;cursor:pointer}
.btn svg{flex:none;--hs:var(--forest)}
.btn.ghost{background:transparent;color:var(--forest)}
.btn.leaf{background:var(--leaf);border-color:var(--leaf);color:var(--forest)}
.btn.line{background:transparent;border-color:#fff;color:#fff}
.ph{background:var(--img,none) center/cover,var(--g)}
.g0{--g:linear-gradient(140deg,#7FCB9F,#2F8A63 55%,#0C5A44)}
.g1{--g:linear-gradient(200deg,#A8DE98,#3F9A72 50%,#0A4F3B)}
.g2{--g:linear-gradient(160deg,#6FBF94,#2A7C5C 55%,#06382A)}

header{position:fixed;inset:0 0 auto;z-index:40;background:rgba(255,255,255,.9);backdrop-filter:blur(14px);padding-top:env(safe-area-inset-top);border-bottom:1px solid rgba(207,227,210,.7)}
.hb{display:flex;align-items:center;justify-content:space-between;height:56px;width:min(1180px,100% - 2rem);margin-inline:auto}
.logo{display:flex;align-items:center;gap:.6rem;text-decoration:none;font:500 .85rem var(--m);letter-spacing:.26em;color:var(--forest)}
.logo img{height:30px}
#menu{min-height:40px;padding:0 1.1rem;background:var(--leaf);color:var(--forest);border:0;border-radius:999px;font:500 .95rem var(--b);cursor:pointer}
nav{display:none;position:absolute;top:100%;left:0;right:0;flex-direction:column;background:#fff;padding:.5rem 1rem 1rem;border-bottom:1px solid var(--line)}
body.menu nav{display:flex}
nav a{padding:.95rem 1rem;border-radius:14px;font-weight:500;font-size:1.1rem;text-decoration:none;color:var(--forest)}
nav a.on,nav a:hover{background:var(--leaf)}

/* home: full-screen slides */
.slide{position:relative;min-height:100vh;min-height:100svh;display:flex;flex-direction:column;justify-content:flex-end;padding:calc(56px + env(safe-area-inset-top) + 1rem) 1.25rem calc(78px + env(safe-area-inset-bottom));scroll-snap-align:start;overflow:hidden;isolation:isolate;color:#fff}
.slide .bg{position:absolute;inset:0;z-index:-2;transform:scale(1.14);transition:transform 7s ease-out}
.slide.on .bg{transform:none}
.bg video{width:100%;height:100%;object-fit:cover;display:block}
.slide::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(rgba(4,54,42,.3),rgba(4,54,42,0) 28%,rgba(4,54,42,.9))}
.slide.light,.slide.dark{justify-content:center}
.slide.light::after,.slide.dark::after{display:none}
.slide.light{background:var(--leaf);color:var(--forest)}
.slide.dark{background:var(--forest)}
.sc{width:100%;max-width:1180px;margin-inline:auto;display:flex;flex-direction:column;align-items:flex-start;gap:.9rem}
.slide h1,.slide h2{color:#fff}
.slide.light h2{color:var(--forest)}
.slide em{color:var(--leaf);background:none}
.slide.light em{color:var(--forest);background:#fff}
.slide .sub{color:#E8F6EC;margin:0}
.slide.light .sub{color:var(--mut)}
.hero h1{font-size:clamp(2.8rem,16vw,7.5rem);line-height:.88}
.trip-s h2{font-size:clamp(3.2rem,19vw,8rem);line-height:.85;overflow-wrap:anywhere}
.acts{align-self:stretch;display:grid;gap:.7rem;margin-top:.4rem}
.row{align-self:stretch;display:flex;justify-content:space-between;align-items:center;gap:1rem;margin-top:.5rem}
.from{font:500 1.05rem var(--d)}
.swipe{font:500 .72rem var(--m);letter-spacing:.2em;text-transform:uppercase;color:#E8F6EC}
.swipe::after{content:"\2191";display:block;font-size:1.2rem;animation:bob 1.4s ease-in-out infinite}
@keyframes bob{50%{transform:translateY(-6px)}}
.rise>*{opacity:0;transform:translateY(28px);transition:opacity .7s ease,transform .8s cubic-bezier(.2,.7,.2,1)}
.on .rise>*{opacity:1;transform:none}
.rise>:nth-child(2){transition-delay:.1s}.rise>:nth-child(3){transition-delay:.2s}.rise>:nth-child(4){transition-delay:.3s}.rise>:nth-child(5){transition-delay:.4s}.rise>:nth-child(6){transition-delay:.5s}
.stmt{font:700 clamp(2.1rem,9.6vw,3.6rem)/1.05 var(--d);letter-spacing:-.035em;color:var(--forest)}
.w{opacity:.14;transition:opacity .4s}
.on .w{opacity:1;transition-delay:calc(var(--i)*70ms)}
.dots{position:fixed;right:7px;top:50%;translate:0 -50%;z-index:30;display:grid;gap:7px;mix-blend-mode:difference;pointer-events:none}
.dots i{width:5px;height:5px;border-radius:5px;background:#fff;opacity:.5;transition:height .3s,opacity .3s}
.dots i.on{height:20px;opacity:1}
.steps2{list-style:none;padding:0;display:grid;gap:.8rem;margin:.4rem 0 .6rem;align-self:stretch}
.steps2 li{display:flex;align-items:center;gap:.9rem;font-size:1.05rem;color:#E8F6EC}
.steps2 b{flex:none;display:grid;place-items:center;width:40px;height:40px;border-radius:50%;background:var(--leaf);color:var(--forest);font:500 1rem var(--m)}
.mark{height:54px}

/* carousel */
.crews .sc{gap:1.25rem}
.cr{align-self:stretch;display:flex;gap:1rem;overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-inline:1.25rem;padding:.6rem 1.25rem 1.2rem;margin-inline:-1.25rem;scrollbar-width:none}
.cr::-webkit-scrollbar{display:none}
.gc{flex:0 0 min(60vw,290px);scroll-snap-align:start;background:#fff;padding:.55rem .55rem 0;border-radius:18px;rotate:var(--r);scale:var(--k,1);box-shadow:0 14px 30px rgba(6,71,52,.2)}
.gc .ph{aspect-ratio:3/4;border-radius:12px}
.gc figcaption{padding:.7rem .3rem .9rem;font-weight:500;color:var(--forest);font-size:.95rem}
.cctl{display:none;gap:.7rem;margin-top:1.2rem}
@media (pointer:fine){.cctl{display:flex}}
.cb{width:52px;height:52px;border-radius:50%;border:2px solid var(--forest);background:transparent;color:var(--forest);font-size:1.3rem;cursor:pointer}
.cb:hover{background:var(--forest);color:var(--leaf)}

/* pages */
.pg{padding:calc(56px + env(safe-area-inset-top) + 2rem) 0 4rem;min-height:70vh}
.pg h1{margin-top:1rem}
.cards{display:grid;gap:1rem;margin-top:1.75rem}
.tcard{position:relative;min-height:62svh;border-radius:26px;overflow:hidden;text-decoration:none;display:flex;flex-direction:column;justify-content:flex-end;gap:.4rem;padding:1.4rem;color:#fff}
.tcard::before{content:"";position:absolute;inset:0;background:linear-gradient(transparent 35%,rgba(4,54,42,.88))}
.tcard>*{position:relative}
.tcard .eyebrow{align-self:flex-start}
.tcard h3{font-size:clamp(2.6rem,13vw,3.6rem);font-weight:700;color:#fff;line-height:.9}
.tcard p{color:#EAF7EE}
.thero{min-height:74svh;display:flex;align-items:flex-end;padding:calc(56px + env(safe-area-inset-top) + 1rem) 0 1.75rem;position:relative;color:#fff}
.thero::before{content:"";position:absolute;inset:0;background:linear-gradient(rgba(4,54,42,.25),rgba(4,54,42,.88))}
.thero .wrap{position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:.8rem}
.thero h1{font-size:clamp(3.4rem,19vw,7rem);color:#fff;line-height:.88}
.thero .sub{color:#EAF7EE;margin:0}
.back{padding:.45rem .95rem;border-radius:999px;background:rgba(255,255,255,.92);color:var(--forest);text-decoration:none;font-weight:500;font-size:.9rem}
.tbody{padding-block:1.5rem 9rem;display:grid;gap:2rem;max-width:860px}
.tbody h2,.pg h2{font-size:clamp(1.8rem,8vw,2.4rem);margin-bottom:1rem}
.chips{display:flex;gap:.5rem;flex-wrap:wrap}
.chips span{padding:.5rem 1rem;background:var(--leaf);border-radius:999px;color:var(--forest);font-weight:500;font-size:.95rem}
.pick{background:var(--leaf);border-radius:24px;padding:1.2rem;display:grid;gap:1rem}
.seg{display:grid;gap:.6rem}
.pill{display:flex;justify-content:space-between;align-items:center;gap:.5rem;min-height:56px;padding:.6rem 1.1rem;border-radius:16px;border:2px solid transparent;background:#fff;color:var(--forest);font:500 1rem var(--b);text-align:left;cursor:pointer}
.pill small{color:var(--mut);font-size:.9rem}
.pill.on{border-color:var(--forest)}
.qty{display:flex;justify-content:space-between;align-items:center;font-weight:500;color:var(--forest)}
.qty div{display:flex;align-items:center;gap:.9rem;background:#fff;border-radius:999px;padding:.25rem}
.qty button{width:44px;height:44px;border-radius:50%;border:0;background:var(--forest);color:var(--leaf);font-size:1.4rem;cursor:pointer}
.qty b{min-width:1.5ch;text-align:center;font-size:1.2rem}
details{border-top:1px solid var(--line)}
details:last-of-type{border-bottom:1px solid var(--line)}
summary{padding:1.05rem 2rem 1.05rem 0;cursor:pointer;list-style:none;position:relative;min-height:54px;font-weight:500;font-size:1.1rem}
summary::-webkit-details-marker{display:none}
summary::after{content:"+";position:absolute;right:.25rem;top:.85rem;font-size:1.6rem;line-height:1;color:var(--forest)}
details[open] summary::after{content:"\2212"}
summary small{font:500 .72rem var(--m);letter-spacing:.14em;text-transform:uppercase;color:var(--mut);display:block}
details p{padding:0 0 1.2rem;color:var(--mut)}
.two{display:grid;gap:2rem}
.tick{list-style:none;padding:0;display:grid;gap:.45rem;color:var(--mut)}
.tick li::before{content:"\2713";color:var(--forest);font-weight:700;margin-right:.6rem}
.no li::before{content:"\2715";color:#B5482A}
.gal{display:grid;grid-template-columns:1fr 1fr;grid-auto-rows:140px;gap:.6rem}
.gal div{border-radius:16px}
.gal div:nth-child(1){grid-column:span 2;grid-row:span 2}
.gal div:nth-child(4){grid-column:span 2}
.rv{opacity:0;transform:translateY(24px);transition:opacity .7s,transform .7s}
.rv.in{opacity:1;transform:none}
.rbar{position:fixed;left:0;right:0;bottom:0;z-index:35;display:flex;align-items:center;justify-content:space-between;gap:1rem;background:rgba(255,255,255,.95);backdrop-filter:blur(12px);border-top:1px solid var(--line);padding:.65rem 1rem calc(.65rem + env(safe-area-inset-bottom))}
.rbar .price{font:700 1.3rem var(--d);color:var(--forest);line-height:1.1}
.rbar .price small{display:block;font:400 .8rem var(--b);color:var(--mut)}
.rbar .btn{flex:1;max-width:260px}

label{display:grid;gap:.35rem;font-weight:500;font-size:.95rem;color:var(--forest)}
input,select,textarea{width:100%;min-height:52px;font:400 1rem var(--b);padding:.7rem .9rem;border:1px solid var(--line);border-radius:14px;background:var(--leaf2);color:var(--ink)}
textarea{min-height:120px;resize:vertical}
form.stack{display:grid;gap:1rem;max-width:560px;margin-top:1.5rem}
.msg{min-height:1.5rem;font-weight:500;color:var(--forest)}
.msg.err{color:#B5482A}
.prose{max-width:60ch;color:var(--mut);margin-top:1rem}
.lk{display:grid;gap:.8rem;max-width:420px;margin-inline:auto;text-align:center;padding-inline:1.25rem}
.lk img{height:90px;margin:0 auto}
.lk .sub{margin-inline:auto}

footer{background:#04362A;padding-block:1.5rem 5rem;color:#A9D3BC;font-size:.95rem;scroll-snap-align:end}
footer .wrap{display:flex;justify-content:space-between;gap:.75rem 1.5rem;flex-wrap:wrap}
footer a{margin-right:1rem}
.fab{position:fixed;right:14px;bottom:calc(14px + env(safe-area-inset-bottom));z-index:45;width:46px;height:46px;border-radius:50%;display:grid;place-items:center;background:#1EBE5A;color:#fff;--hs:#1EBE5A;box-shadow:0 6px 16px rgba(4,54,42,.35);text-decoration:none}
.fab svg{width:26px;height:26px}
body.trip .fab{bottom:calc(88px + env(safe-area-inset-bottom))}

@media (min-width:900px){
  #menu{display:none}
  nav{display:flex;position:static;flex-direction:row;background:none;padding:0;border:0;gap:.3rem}
  nav a{font-size:1rem;padding:.45rem 1rem}
  .hb{height:68px}
  .slide{padding:calc(68px + 2rem) 3rem 4.5rem}
  .acts{display:flex;align-self:flex-start}
  .crews .sc{display:grid;grid-template-columns:minmax(0,420px) minmax(0,1fr);align-items:center;gap:3rem}
  .cr{margin-inline:0;padding-inline:.5rem}
  .steps2{grid-template-columns:repeat(3,1fr)}
  .cards{grid-template-columns:repeat(3,1fr)}
  .tcard{min-height:520px}
  .two{grid-template-columns:1fr 1fr}
  .gal{grid-auto-rows:170px}
  .pg{padding-top:calc(68px + 3rem)}
  .thero{padding-top:calc(68px + 2rem);min-height:80vh}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .slide .bg{transform:none;transition:none}
  .rise>*,.rv{opacity:1;transform:none;transition:none}
  .w{opacity:1;transition:none}
  .swipe::after{animation:none}
}

/* ---- landing: video hero, endless photo strip, colour-melting sections ---- */
body.home{background:var(--bg,#064734);color:var(--fg,#fff);transition:color .3s}
.sec{position:relative;padding-block:clamp(3.5rem,12vw,6rem)}
.sec h2,.sec h3,.sec .stmt{color:inherit}
.sec .eyebrow{background:color-mix(in srgb,var(--fg,#fff) 14%,transparent);color:inherit}
.sec em{background:none;color:inherit}
.sec .sub{color:inherit;opacity:.78}
.sec .btn{background:var(--fg);border-color:var(--fg);color:var(--bg)}
.sec .btn.line{background:transparent;color:var(--fg)}
.sec .cb{color:inherit;border-color:currentColor}
.sec .cb:hover{background:var(--fg);color:var(--bg)}
.sec .cctl{margin-top:1.2rem}

.hero{position:relative;min-height:100vh;min-height:100svh;display:flex;flex-direction:column;justify-content:flex-end;padding:calc(56px + env(safe-area-inset-top) + 1rem) 1.25rem calc(78px + env(safe-area-inset-bottom));overflow:hidden;color:#fff;isolation:isolate}
.hv{position:absolute;inset:0;z-index:-2}
.hv video{width:100%;height:100%;object-fit:cover;display:block}
.hero::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(rgba(4,54,42,.5),rgba(4,54,42,0) 26%,rgba(4,54,42,.15) 55%,rgba(4,54,42,.88))}
.hc{width:100%;max-width:1180px;margin-inline:auto;display:flex;flex-direction:column;align-items:flex-start;gap:.9rem}
.hero h1{font-size:clamp(2.8rem,16vw,7.5rem);line-height:.88;color:#fff}
.hero em{color:var(--leaf);background:none}
.hero .sub{color:#E8F6EC;margin:0}
.hero .eyebrow{background:rgba(224,255,194,.94);color:var(--forest)}
.hc>*{animation:hup 1s cubic-bezier(.2,.7,.2,1) both}
.hc>:nth-child(2){animation-delay:.12s}.hc>:nth-child(3){animation-delay:.24s}.hc>:nth-child(4){animation-delay:.36s}.hc>:nth-child(5){animation-delay:.48s}
@keyframes hup{from{opacity:0;transform:translateY(26px)}}
header{transition:background .3s,border-color .3s}
body.home:not(.scrolled) header{background:transparent;border-color:transparent;backdrop-filter:none}
body.home:not(.scrolled) .logo{color:#fff}
body.home:not(.scrolled) .logo img{filter:brightness(0) invert(1)}
body.home:not(.scrolled) #menu{background:rgba(255,255,255,.22);color:#fff}

.stmt{font:700 clamp(2.1rem,9.6vw,4rem)/1.05 var(--d);letter-spacing:-.035em;max-width:20ch}
.wr.in .w{opacity:1;transition-delay:calc(var(--i)*70ms)}
.strip{overflow:hidden;margin-top:clamp(1.5rem,5vw,2.5rem)}
.strip>div{display:flex;width:max-content;animation:mq 55s linear infinite}
.strip.rev>div{animation-duration:70s;animation-direction:reverse}
.strip span{flex:none;height:clamp(160px,46vw,250px);aspect-ratio:var(--ar,1);border-radius:18px;margin-right:12px}
.strip.rev span{height:clamp(120px,34vw,190px)}
@keyframes mq{to{transform:translateX(-50%)}}

.trs .tcard{flex:0 0 min(74vw,330px);min-height:440px;scroll-snap-align:start;scale:var(--k,1)}
.pil ol{list-style:none;padding:0;margin-top:2rem}
.pil li{display:grid;grid-template-columns:3rem 1fr;gap:1rem;padding-block:1.4rem;border-top:1px solid color-mix(in srgb,var(--fg,#fff) 25%,transparent)}
.pil li b{font:500 .95rem var(--m);letter-spacing:.1em;opacity:.7;padding-top:.4rem}
.pil h3{font-size:clamp(1.6rem,7vw,2.3rem);line-height:1}
.pil p{margin-top:.5rem;opacity:.78;max-width:40ch}
.crw{display:grid;gap:1.25rem}
.fin{text-align:center;padding-bottom:7rem}
.fin .wrap{display:flex;flex-direction:column;align-items:center;gap:1.2rem}
.fin .acts{align-self:stretch;max-width:420px;margin-inline:auto;width:100%}
footer{background:#04362A}

@media (min-width:900px){
  .hero{padding:calc(68px + 2rem) 3rem 4.5rem}
  .crw{grid-template-columns:minmax(0,420px) minmax(0,1fr);align-items:center;gap:3rem}
  .pil ol{display:grid;grid-template-columns:1fr 1fr;column-gap:4rem}
  .fin .acts{display:flex;justify-content:center;max-width:none}
  body.home:not(.scrolled) nav a{color:#fff}
  body.home:not(.scrolled) nav a:hover,body.home:not(.scrolled) nav a.on{background:rgba(255,255,255,.2)}
}
@media (prefers-reduced-motion:reduce){.strip>div{animation:none}.strip{overflow-x:auto}.hc>*{animation:none}.wr .w{opacity:1}}

/* ---- hero: pinned full-screen video, next section slides over it ---- */
.hero{position:sticky;top:0;z-index:0;height:100vh;height:100svh;min-height:0;padding:calc(56px + env(safe-area-inset-top) + 1rem) 1.25rem calc(78px + env(safe-area-inset-bottom))}
.hero .hc{flex-direction:row;align-items:flex-end;justify-content:space-between;gap:1rem}
.hero .cap{display:grid;gap:.55rem;justify-items:start}
.hero .cap h1{font:500 1.15rem/1.2 var(--d);letter-spacing:-.01em;color:#fff;margin:0}
.cue{background:none;border:0;color:#fff;font:500 .72rem var(--m);letter-spacing:.2em;text-transform:uppercase;cursor:pointer;display:grid;justify-items:center;gap:.2rem;padding:.4rem}
.cue::after{content:"\2193";font-size:1.2rem;animation:bobd 1.4s ease-in-out infinite}
@keyframes bobd{50%{transform:translateY(6px)}}
.after{position:relative;z-index:1;background:var(--bg,#064734);border-radius:clamp(22px,6vw,40px) clamp(22px,6vw,40px) 0 0}
.help{text-align:center}
.help .wrap{display:flex;flex-direction:column;align-items:center;gap:1rem;max-width:640px}
.help h2{font-size:clamp(2.2rem,10vw,3.6rem)}
.sec .btn svg{--hs:var(--fg)}
@media (min-width:900px){.hero{padding:calc(68px + 2rem) 3rem 4.5rem}.hero .cap h1{font-size:1.4rem}}
@media (prefers-reduced-motion:reduce){.cue::after{animation:none}}

/* ---- bike world ---- */
.wh{transform-box:fill-box;transform-origin:center;transform:rotate(var(--sp,0deg))}
@keyframes spin{to{transform:rotate(360deg)}}
.mode{display:inline-flex;background:rgba(255,255,255,.92);border-radius:999px;padding:4px}
.mode a{padding:.5rem 1.1rem;border-radius:999px;text-decoration:none;color:var(--forest);font-weight:500;font-size:.92rem}
.mode a.on{background:var(--forest);color:var(--leaf)}
.bn{position:relative;min-height:400px;border-radius:28px;overflow:hidden;display:flex;flex-direction:column;justify-content:flex-end;align-items:flex-start;gap:.9rem;padding:1.5rem;color:#fff;text-decoration:none;isolation:isolate}
.bn::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(rgba(4,54,42,.1),rgba(4,54,42,.85))}
.bn h2{color:#fff;font-size:clamp(2.4rem,11vw,4.2rem)}
.bn em{color:var(--leaf)}
.bn .eyebrow{background:rgba(224,255,194,.94);color:var(--forest)}
.bn .btn{background:var(--leaf);border-color:var(--leaf);color:var(--forest)}
.bn svg{position:absolute;top:1.2rem;right:1.2rem;width:96px;color:#fff}
.bn .wh{animation:spin 3s linear infinite}
.hero.bk{padding-bottom:calc(112px + env(safe-area-inset-bottom))}
.lane{position:absolute;left:0;right:0;bottom:calc(66px + env(safe-area-inset-bottom));height:0;border-top:3px dashed rgba(255,255,255,.65);z-index:1}
.lane svg{position:absolute;bottom:2px;left:0;width:76px;height:44px;color:#fff;animation:ride 9s linear infinite}
.lane .wh{animation:spin .7s linear infinite}
@keyframes ride{from{transform:translateX(-90px)}to{transform:translateX(100vw)}}
.clip{overflow:hidden}
.tape{background:var(--leaf);color:var(--forest);transform:rotate(-2.5deg);margin:0 -10% 2.5rem;padding:.8rem 0;white-space:nowrap;overflow:hidden}
.tape>div{display:inline-flex;animation:mq 34s linear infinite}
.tape span{font:700 clamp(1.6rem,6vw,2.6rem) var(--d);text-transform:uppercase;padding-right:2rem}
.tape span::after{content:"\2726";padding-left:2rem}

/* the road beside the itinerary */
.ride{position:relative;padding-left:68px;margin-top:1rem}
.road{position:absolute;left:22px;top:0;bottom:0;width:0;border-left:3px dashed var(--line)}
.road::before{content:"";position:absolute;left:-3px;top:0;width:3px;height:var(--y,0px);background:var(--forest)}
.bike{position:absolute;left:0;top:0;width:0;height:0;z-index:2;color:var(--forest);will-change:transform}
.bike svg{position:absolute;width:84px;height:49px;left:-42px;top:-24px;transform:rotate(90deg)}
.stop{position:relative;padding-bottom:2.2rem}
.stop::before{content:"";position:absolute;left:-54px;top:.35rem;width:18px;height:18px;border-radius:50%;background:#fff;border:3px solid var(--line);transition:background .3s,border-color .3s}
.stop.hit::before{background:var(--forest);border-color:var(--forest)}
.stop small{font:500 .72rem var(--m);letter-spacing:.12em;text-transform:uppercase;color:var(--mut)}
.stop h3{font-size:1.55rem;margin:.25rem 0 .4rem}
.stop p{color:var(--mut);max-width:56ch}
@media (min-width:900px){.hero.bk{padding-bottom:6.5rem}}
@media (prefers-reduced-motion:reduce){.lane svg,.lane .wh,.bn .wh,.tape>div{animation:none}}

/* ---- dark themes: deep green (main site) and blood red (bike world) ---- */
body{--pg:#05160F;--tx:#E8F3EC;--tm:#9DB8AC;--ln:rgba(255,255,255,.13);--ac:#E0FFC2;--acf:#06140F;--ach:#fff;--pn:#0C2B21;--hd:rgba(5,22,15,.9);background:var(--pg);color:var(--tx)}
body.bikemode{--pg:#140505;--tx:#F6E4E2;--tm:#B58C86;--ac:#E0161B;--acf:#fff;--ach:#FF2D2D;--pn:#2B0A0A;--hd:rgba(20,5,5,.92)}
body.home{background:var(--bg,var(--pg))}
body:not(.bikemode) .g0{--g:linear-gradient(140deg,#1F6B52,#0E3D2E 55%,#071A13)}
body:not(.bikemode) .g1{--g:linear-gradient(200deg,#2A8A68,#0F4636 55%,#071A13)}
body:not(.bikemode) .g2{--g:linear-gradient(160deg,#17543F,#0B2E23 55%,#06140F)}
.bikemode .g0{--g:linear-gradient(140deg,#D4141A,#8E0B10 50%,#1F0505)}
.bikemode .g1{--g:linear-gradient(200deg,#E01E22,#9E0C12 55%,#2A0707)}
.bikemode .g2{--g:linear-gradient(160deg,#7A0B10,#44090B 55%,#140505)}
h1,h2,h3{color:var(--tx)}
.sub{color:var(--tm)}
em{color:inherit;background:linear-gradient(transparent 62%,color-mix(in srgb,var(--ac) 40%,transparent) 62%)}
body .sec em{background:linear-gradient(transparent 62%,color-mix(in srgb,var(--ac) 40%,transparent) 62%);color:inherit}
.eyebrow{background:color-mix(in srgb,var(--ac) 16%,transparent);color:var(--ac)}
body .sec .eyebrow{background:color-mix(in srgb,var(--ac) 16%,transparent);color:var(--ac)}
body.bikemode .eyebrow,body.bikemode .sec .eyebrow,body.bikemode .hero .eyebrow{background:var(--ac);color:#fff}
.hero .eyebrow{background:rgba(224,255,194,.94);color:#06140F}
body .btn,body .sec .btn{background:var(--ac);border-color:var(--ac);color:var(--acf)}
body .btn:hover,body .sec .btn:hover{background:var(--ach);border-color:var(--ach)}
body .btn.ghost{background:transparent;color:var(--ac)}
body .btn.line,body .sec .btn.line{background:transparent;border-color:#fff;color:#fff}
body .btn svg,body .sec .btn svg{--hs:var(--ac)}
body .btn:hover svg{--hs:var(--ach)}
body .btn.line svg{--hs:transparent}
header{background:var(--hd);border-color:var(--ln)}
.logo{color:#fff}
.logo img,.lk img{filter:brightness(0) invert(1)}
#menu{background:var(--ac);color:var(--acf)}
nav a{color:#fff}
nav a.on,nav a:hover{background:var(--ac);color:var(--acf)}
@media (max-width:899px){nav{background:var(--pn);border-color:var(--ln)}}
label{color:var(--tx)}
input,select,textarea{background:var(--pn);color:var(--tx);border-color:var(--ln)}
details{border-color:var(--ln)}
summary{color:var(--tx)}
summary::after{color:var(--ac)}
details p,.tick,.prose,.stop p,.stop small{color:var(--tm)}
.tick li::before{color:var(--ac)}
.no li::before{color:#E5736A}
.chips span{background:color-mix(in srgb,var(--ac) 20%,transparent);color:var(--tx)}
.pick{background:var(--pn);border:1px solid var(--ln)}
.pick h3,.qty{color:var(--tx)}
.qty div{background:rgba(255,255,255,.08)}
.qty button{background:var(--ac);color:var(--acf)}
.rbar{background:var(--hd);border-color:var(--ln)}
.rbar .price{color:var(--tx)}
.rbar .price small{color:var(--tm)}
.mode{background:rgba(255,255,255,.14)}
.mode a{color:#fff}
.mode a.on{background:var(--ac);color:var(--acf)}
.msg{color:var(--ac)}
.msg.err{color:#FF8A80}
footer{background:rgba(0,0,0,.4);color:var(--tm)}
.pil ol{border:1px solid var(--ln);border-radius:24px;background:linear-gradient(165deg,rgba(255,255,255,.05),var(--pn));padding:.25rem 1.25rem}
.pil li:first-child{border-top:0}
.tcard{border:1px solid rgba(255,255,255,.1)}
.road{border-left-color:rgba(255,255,255,.28)}
.road::before{background:var(--ac)}
.bike{color:var(--tx)}
.stop::before{background:var(--pg);border-color:rgba(255,255,255,.3)}
.stop.hit::before{background:var(--ac);border-color:var(--ac)}
.stop h3{color:var(--tx)}

/* bike world extras */
.bikemode .hero::after{background:linear-gradient(rgba(20,5,5,.6),rgba(20,5,5,0) 26%,rgba(20,5,5,.2) 55%,rgba(20,5,5,.92))}
.bikemode .thero::before{background:linear-gradient(rgba(20,5,5,.3),rgba(20,5,5,.9))}
.bikemode .tcard::before{background:linear-gradient(transparent 35%,rgba(20,5,5,.9))}
.bikemode .tape{background:#E0161B;color:#fff}
.bikemode .tape span::after{color:#140505}
.bikemode .bike svg{filter:drop-shadow(0 0 8px rgba(224,22,27,.6))}
.bike svg{width:122px;height:70px;left:-61px;top:-35px}
.bike,.lane svg,.bn svg{--acc:#E0161B}
.lane svg{width:132px;height:76px;color:#F6E4E2}
@keyframes ride{from{transform:translateX(-170px)}to{transform:translateX(100vw)}}
.hero.bk{padding-bottom:calc(168px + env(safe-area-inset-bottom))}
@media (min-width:900px){.hero.bk{padding-bottom:8.5rem}}
.bn svg{width:140px;height:auto}
.bn.fire{--g:linear-gradient(160deg,#D4141A,#8E0B10 50%,#1F0505)}
.bn.fire::before{background:linear-gradient(rgba(20,5,5,.15),rgba(20,5,5,.9))}
.bn.fire .btn{background:#E0161B;border-color:#E0161B;color:#fff}
.bn.fire .eyebrow{background:#E0161B;color:#fff}
.bn.fire em{color:#FF9A9A;background:none}

/* ---- main site: black + emerald, no white surfaces ---- */
body{--pg:#030705;--tx:#DDEBE3;--tm:#8FA89C;--ln:rgba(120,255,180,.15);--ac:#34D186;--acf:#03100A;--ach:#5BE8A3;--ol:#34D186;--pn:#0A1812;--hd:rgba(3,7,5,.9)}
body.bikemode{--ol:#fff}
body:not(.bikemode) .g0{--g:linear-gradient(140deg,#0F3B2B,#08231A 55%,#030705)}
body:not(.bikemode) .g1{--g:linear-gradient(200deg,#145239,#0A2B1F 55%,#030705)}
body:not(.bikemode) .g2{--g:linear-gradient(160deg,#0B2E22,#061A12 55%,#030705)}
body:not(.bikemode) .hero::after{background:linear-gradient(rgba(0,0,0,.55),rgba(0,0,0,0) 26%,rgba(0,0,0,.2) 55%,rgba(0,0,0,.9))}
body:not(.bikemode) .thero::before{background:linear-gradient(rgba(0,0,0,.3),rgba(0,0,0,.9))}
body:not(.bikemode) .tcard::before,body:not(.bikemode) .bn:not(.fire)::before{background:linear-gradient(transparent 35%,rgba(0,0,0,.9))}
body:not(.bikemode) .hero .eyebrow{background:var(--ac);color:var(--acf)}
body .btn.line,body .sec .btn.line{border-color:var(--ol);color:var(--ol)}
body.home:not(.scrolled) #menu{background:rgba(0,0,0,.45);border:1px solid var(--ln);backdrop-filter:blur(8px)}
.gc{background:var(--pn);border:1px solid var(--ln);box-shadow:0 14px 30px rgba(0,0,0,.55)}
.gc figcaption{color:var(--tx)}
.back{background:rgba(0,0,0,.55);color:var(--tx);border:1px solid var(--ln);backdrop-filter:blur(8px)}
.cb,.sec .cb{border-color:var(--ol);color:var(--ol)}
.cb:hover,.sec .cb:hover{background:var(--ol);color:var(--acf)}
.mode{background:rgba(255,255,255,.07);border:1px solid var(--ln)}
.tcard{border-color:var(--ln)}

/* ---- bike world: fiery crimson (the main site stays black + emerald) ---- */
body.bikemode{--pg:#8A0B11;--tx:#FFF1EE;--tm:#FFC9C3;--ln:rgba(255,255,255,.24);--ac:#1F0709;--acf:#fff;--ach:#000;--pn:#6E0910;--hd:rgba(110,6,10,.94);--ol:#fff}
body.bikemode:not(.home){background:linear-gradient(180deg,#A80E15,#8A0B11 45%,#6E0910)}
.bikemode .g0{--g:linear-gradient(140deg,#FF2D2D,#C2121A 50%,#6E0910)}
.bikemode .g1{--g:linear-gradient(200deg,#E8262A,#A80E15 55%,#4A070B)}
.bikemode .g2{--g:linear-gradient(160deg,#C2121A,#8A0B11 55%,#3A050A)}
.bikemode .hero::after{background:linear-gradient(rgba(60,0,4,.55),rgba(60,0,4,0) 26%,rgba(60,0,4,.15) 55%,rgba(70,0,6,.92))}
.bikemode .thero::before{background:linear-gradient(rgba(60,0,4,.25),rgba(80,0,6,.92))}
.bikemode .tcard::before{background:linear-gradient(transparent 30%,rgba(60,0,4,.92))}
.bikemode .tape{background:#1F0709;color:#fff}
.bikemode .tape span::after{color:#E0161B}
body.bikemode em,body.bikemode .sec em{background:linear-gradient(transparent 62%,rgba(255,255,255,.3) 62%);color:inherit}
.bikemode .chips span{background:rgba(0,0,0,.28);border:1px solid rgba(255,255,255,.3);color:#fff}
/* cards that stand out */
.bikemode .tcard{border:2px solid rgba(255,255,255,.6);box-shadow:0 18px 48px rgba(255,30,30,.5),0 4px 0 rgba(0,0,0,.25)}
.bikemode .pick{background:linear-gradient(145deg,#FF3030,#C2121A 55%,#8E0B10);border:1px solid rgba(255,255,255,.45);box-shadow:0 16px 44px rgba(255,40,40,.4)}
.bikemode .qty div{background:rgba(0,0,0,.3)}
.bikemode .pil ol{background:linear-gradient(165deg,rgba(255,255,255,.14),rgba(0,0,0,.25));border:1px solid rgba(255,255,255,.32);box-shadow:0 14px 40px rgba(0,0,0,.25)}
.bikemode .stop{background:linear-gradient(160deg,rgba(255,255,255,.16),rgba(0,0,0,.2));border:1px solid rgba(255,255,255,.3);border-radius:18px;padding:1rem 1.1rem;margin-bottom:1rem;box-shadow:0 10px 28px rgba(0,0,0,.25)}
.bikemode .stop::before{top:1.2rem}
.bikemode .road::before{background:#fff}
.bikemode .stop.hit::before{background:#fff;border-color:#fff}
.bikemode .bike svg{filter:drop-shadow(0 4px 10px rgba(0,0,0,.5))}
.bikemode .rbar{box-shadow:0 -10px 30px rgba(0,0,0,.35)}
body.bikemode footer{background:#5A080D;color:#FFC9C3}

/* ---- date-range calendar ---- */
.cal{background:var(--pn);border:1px solid var(--ln);border-radius:24px;padding:1.1rem}
.cal h3{margin-bottom:.8rem}
.calh{display:flex;align-items:center;justify-content:space-between;margin-bottom:.5rem}
.calh b{font:500 1.05rem var(--d);color:var(--tx)}
.calh button{width:44px;height:44px;border-radius:50%;border:1px solid var(--ln);background:transparent;color:var(--tx);font-size:1.2rem;cursor:pointer}
.calh button:disabled{opacity:.3;cursor:default}
.calw,.calg{display:grid;grid-template-columns:repeat(7,1fr)}
.calw span{text-align:center;font:500 .72rem var(--m);color:var(--tm);padding:.3rem 0}
.calg .d{position:relative;height:44px;border:0;background:none;color:var(--tx);font:500 .98rem var(--b);cursor:pointer;border-radius:0;padding:0}
.calg .d.off{opacity:.3;cursor:default}
.calg .d.today::after{content:"";position:absolute;bottom:5px;left:50%;width:4px;height:4px;margin-left:-2px;border-radius:50%;background:var(--ac)}
.calg .d.in{background:color-mix(in srgb,var(--ac) 24%,transparent)}
.calg .d.s,.calg .d.e{background:var(--ac);color:var(--acf)}
.calg .d.s{border-radius:999px 0 0 999px}
.calg .d.e{border-radius:0 999px 999px 0}
.calg .d.s.e{border-radius:999px}
.calg .d.s.today::after,.calg .d.e.today::after{background:var(--acf)}
.calsum{margin-top:.8rem;color:var(--tm);font-size:.95rem}
.calsum b{color:var(--tx);font-weight:500}
.clr{margin-left:.5rem;background:none;border:0;color:var(--ac);text-decoration:underline;cursor:pointer;font:inherit}
.bikemode .cal{background:linear-gradient(160deg,rgba(255,255,255,.16),rgba(0,0,0,.22));border:1px solid rgba(255,255,255,.35);box-shadow:0 14px 40px rgba(0,0,0,.25)}
.bikemode .calg .d.in{background:rgba(255,255,255,.26)}
.bikemode .calg .d.s,.bikemode .calg .d.e{background:#fff;color:#8A0B11}
.bikemode .calg .d.s.today::after,.bikemode .calg .d.e.today::after{background:#8A0B11}
.bikemode .clr,.bikemode .calg .d.today::after{color:#fff}
.bikemode .calg .d.today::after{background:#fff}

/* ---- bike pages: the calendar is a hot red card ---- */
.bikemode .cal{background:linear-gradient(145deg,#FF3030,#C2121A 55%,#8E0B10);border:1px solid rgba(255,255,255,.45);box-shadow:0 16px 44px rgba(255,40,40,.4)}
.bikemode .calg .d.s,.bikemode .calg .d.e{background:#fff;color:#B3121A}
.bikemode .calg .d.in{background:rgba(255,255,255,.24)}
.bikemode .calg .d.today::after{background:#fff}
.bikemode .calg .d.s.today::after,.bikemode .calg .d.e.today::after{background:#B3121A}
.bikemode .clr{color:#fff}
.bikemode .calsum,.bikemode .calsum b{color:#FFF1EE}
.bikemode .calh button{border-color:rgba(255,255,255,.5)}

/* ---- all trips page: road + bike sections, cards with photo and optional video ---- */
.pgh{min-height:0;padding-bottom:.5rem}
.tsec{padding-block:2rem .5rem}
.tsec.bk{padding-bottom:5rem}
.sh{display:flex;justify-content:space-between;align-items:flex-end;gap:1rem;margin-bottom:1rem}
.sh h2{margin-top:.8rem;font-size:clamp(1.9rem,8vw,3rem)}
.sh .cctl{margin:0}
.tcard::before{z-index:1}
.tcard>*{z-index:2}
.tcard .cv{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0;opacity:0;transition:opacity .6s}
.tcard .cv.on{opacity:1}
body .tcard.hot.ph{--g:linear-gradient(140deg,#FF2D2D,#C2121A 50%,#6E0910)}
.tcard.hot{border:2px solid rgba(255,255,255,.6);box-shadow:0 18px 48px rgba(255,30,30,.45),0 4px 0 rgba(0,0,0,.25)}
.tcard.hot::before{background:linear-gradient(transparent 30%,rgba(60,0,4,.92))}
.tcard.hot .eyebrow{background:#1F0709;color:#fff}
body .eyebrow.hot{background:#E0161B;color:#fff}

/* ---- dates dropdown ---- */
.cal{position:relative;background:none;border:0;padding:0;box-shadow:none}
.calf{display:flex;align-items:center;gap:.9rem;width:100%;min-height:56px;padding:.6rem 1.1rem;border-radius:16px;border:1px solid var(--ln);background:var(--pn);color:var(--tx);font:500 1rem var(--b);text-align:left;cursor:pointer}
.calf .cl{font:500 .72rem var(--m);letter-spacing:.14em;text-transform:uppercase;color:var(--tm)}
.calf .clab{flex:1;text-align:right}
.calf i{font-style:normal;transition:transform .25s}
.cal.open .calf i{transform:rotate(180deg)}
.cal.open .calf{border-color:var(--ac)}
.calpop{position:absolute;left:0;right:0;top:calc(100% + 8px);z-index:25;background:var(--pn);border:1px solid var(--ln);border-radius:20px;padding:1rem;box-shadow:0 24px 60px rgba(0,0,0,.55)}
.calpop[hidden]{display:none}
.bikemode .cal{background:none;border:0;box-shadow:none}
.bikemode .calf{background:linear-gradient(145deg,#FF3030,#C2121A 55%,#8E0B10);border:1px solid rgba(255,255,255,.45);color:#fff;box-shadow:0 10px 28px rgba(255,40,40,.35)}
.bikemode .calf .cl{color:#FFE3DC}
.bikemode .cal.open .calf{border-color:#fff}
.bikemode .calpop{background:linear-gradient(145deg,#E8262A,#B3121A 60%,#8E0B10);border-color:rgba(255,255,255,.45)}

/* hero video crop focus: when a portrait video is cropped on a wide screen, --vy picks which band stays visible (e.g. .hero{--vy:35%}) */
.hv video{object-position:50% var(--vy,50%)}

/* ============================================================
   BIKE THEME — WHITE PAGE / RED HIGHLIGHTS / BLACK TEXT
   Per issue #2: white background, red for important highlights,
   black for body text and small inputs.
   ============================================================ */
body.bikemode{
  --pg:#FFFFFF;
  --tx:#0A0A0A;
  --tm:#555555;
  --ln:#E5E5E5;
  --ac:#E0161B;      /* red = highlights only */
  --acf:#FFFFFF;
  --ach:#B3121A;
  --pn:#F7F7F7;
  --hd:rgba(255,255,255,.94);
  --ol:#E0161B;
}
body.bikemode:not(.home){ background:#FFFFFF; }

/* failed-photo fallbacks go light, not dark red */
.bikemode .g0{--g:linear-gradient(140deg,#FFE8E8,#FFD1D1 50%,#FFF5F5)}
.bikemode .g1{--g:linear-gradient(200deg,#FFDDDD,#FFC2C2 55%,#FFF0F0)}
.bikemode .g2{--g:linear-gradient(160deg,#FFD6D6,#FFB8B8 55%,#FFF2F2)}

/* header: logo/nav must go black on white — they were forced white before */
body.bikemode .logo{ color:var(--tx); }
body.bikemode .logo img{ filter:brightness(0); }
body.bikemode nav a{ color:var(--tx); }
body.bikemode nav a.on,
body.bikemode nav a:hover{ background:var(--ac); color:#fff; }
/* …but keep white while the header floats over the hero video */
body.bikemode.home:not(.scrolled) .logo{ color:#fff; }
body.bikemode.home:not(.scrolled) .logo img{ filter:brightness(0) invert(1); }
body.bikemode.home:not(.scrolled) nav a{ color:#fff; }
body.bikemode .lk img{ filter:brightness(0); }

/* back pill + trip-style switcher */
body.bikemode .back{
  background:rgba(255,255,255,.94);
  color:var(--tx);
  border:1px solid var(--ln);
}
body.bikemode .mode{
  background:#FFFFFF;
  border:1px solid var(--ln);
}
body.bikemode .mode a{ color:var(--tx); }
body.bikemode .mode a.on{ background:var(--ac); color:#fff; }

/* photo cards keep their dark overlay (white text on photo stays readable) */
.bikemode .tcard,
.bikemode .tcard.hot{
  border:2px solid rgba(255,255,255,.6);
  box-shadow:0 18px 48px rgba(224,22,27,.16),0 4px 0 rgba(0,0,0,.08);
}
.bikemode .tcard .eyebrow,
.bikemode .tcard.hot .eyebrow{ background:var(--ac); color:#fff; }

/* marquee tape: red band, white type */
.bikemode .tape{ background:var(--ac); color:#fff; }
.bikemode .tape span::after{ color:#fff; }

/* itinerary: white cards on the white page */
.bikemode .stop{
  background:#FFFFFF;
  border:1px solid var(--ln);
  border-radius:18px;
  padding:1rem 1.1rem;
  margin-bottom:1rem;
  box-shadow:0 10px 28px rgba(0,0,0,.05);
}
.bikemode .stop::before{ background:#fff; border-color:#D0D0D0; }
.bikemode .stop.hit::before{ background:var(--ac); border-color:var(--ac); }
.bikemode .stop small,
.bikemode .stop p{ color:var(--tm); }
.bikemode .stop h3{ color:var(--tx); }
.bikemode .road{ border-left-color:#E0E0E0; }
.bikemode .road::before{ background:var(--ac); }
.bikemode .bike{ color:var(--tx); }
.bikemode .bike svg{ filter:drop-shadow(0 4px 10px rgba(224,22,27,.25)); }

/* calendar: white card, red selected days */
.bikemode .cal{
  background:#FFFFFF;
  border:1px solid var(--ln);
  border-radius:24px;
  box-shadow:0 14px 40px rgba(0,0,0,.05);
}
.bikemode .calf{
  background:#FFFFFF;
  border:1px solid var(--ln);
  color:var(--tx);
  box-shadow:none;
}
.bikemode .calf .cl{ color:var(--tm); }
.bikemode .cal.open .calf{ border-color:var(--ac); }
.bikemode .calpop{
  background:#FFFFFF;
  border:1px solid var(--ln);
  box-shadow:0 24px 60px rgba(0,0,0,.12);
}
.bikemode .calh button{ border-color:var(--ln); color:var(--tx); }
.bikemode .calg .d{ color:var(--tx); }
.bikemode .calg .d.in{ background:rgba(224,22,27,.12); }
.bikemode .calg .d.s,
.bikemode .calg .d.e{ background:var(--ac); color:#fff; }
.bikemode .calg .d.today::after{ background:var(--ac); }
.bikemode .calg .d.s.today::after,
.bikemode .calg .d.e.today::after{ background:#fff; }
.bikemode .calsum,
.bikemode .calsum b{ color:var(--tx); }
.bikemode .clr{ color:var(--ac); }

/* booking panel */
.bikemode .pick{
  background:#FFFFFF;
  border:1px solid var(--ln);
  box-shadow:0 12px 34px rgba(224,22,27,.08);
}
.bikemode .pick h3,
.bikemode .qty{ color:var(--tx); }
.bikemode .qty div{ background:#F0F0F0; }
.bikemode .qty button{ background:var(--ac); color:#fff; }
.bikemode .chips span{
  background:#F0F0F0;
  border:1px solid var(--ln);
  color:var(--tx);
}

/* “how we ride” numbered list */
.bikemode .pil ol{
  background:#FFFFFF;
  border:1px solid var(--ln);
  box-shadow:0 10px 30px rgba(0,0,0,.05);
}
.bikemode .pil li{ border-top-color:var(--ln); }
.bikemode .pil p{ color:var(--tm); }

/* sticky reserve bar */
.bikemode .rbar{
  background:rgba(255,255,255,.96);
  border-color:var(--ln);
  box-shadow:0 -10px 30px rgba(0,0,0,.08);
}
.bikemode .rbar .price{ color:var(--ac); }
.bikemode .rbar .price small{ color:var(--tm); }

/* footer on white */
body.bikemode footer{
  background:#FFFFFF;
  color:var(--tm);
  border-top:1px solid var(--ln);
}

/* misc contrast fixes for the light page */
body.bikemode em,
body.bikemode .sec em{
  background:linear-gradient(transparent 62%,rgba(224,22,27,.18) 62%);
  color:inherit;
}
.bikemode .cb,
.bikemode .sec .cb{ color:var(--tx); border-color:var(--tx); }
.bikemode .cb:hover,
.bikemode .sec .cb:hover{ background:var(--ac); border-color:var(--ac); color:#fff; }
.bikemode .msg{ color:var(--ac); }
.bikemode .msg.err{ color:#B5482A; }
.bikemode .no li::before{ color:#B5482A; }
/* ── issue #1: page wouldn't scroll to the end on some phones ────────── */

/* 1. clip instead of hidden: stops horizontal overflow without making
      <html> a scroll container (the thing that broke height calc)       */
html{scroll-behavior:smooth;overflow-x:clip;-webkit-text-size-adjust:100%}
/* fallback for browsers without `clip` (Safari < 16): keep old behaviour  */
@supports not (overflow-x:clip){
  body{overflow-x:hidden}
}

/* 2. reserve room for the fixed rbar + fab on trip pages                */
body.trip .tbody{padding-bottom:calc(9rem + 120px + env(safe-area-inset-bottom))}
body.trip footer{padding-bottom:calc(5rem + 120px + env(safe-area-inset-bottom))}

/* 3. scroll-padding keeps scroll-into-view (calendar, anchor links)
      from parking content behind the fixed bars                         */
html{scroll-padding-top:calc(56px + env(safe-area-inset-top));
     scroll-padding-bottom:calc(120px + env(safe-area-inset-bottom))}
     /* ── issue #3: bike itinerary cards get a red glowing border ─────────── */

.bikemode .stop{
  background:#FFFFFF;
  border:2px solid var(--ac);                        /* red border */
  border-radius:18px;
  padding:1rem 1.1rem;
  margin-bottom:1rem;
  box-shadow:
    0 0 0 1px rgba(224,22,27,.10),                   /* tight inner ring */
    0 0 22px rgba(224,22,27,.28),                    /* the glow */
    0 12px 30px rgba(0,0,0,.06);                     /* soft lift */
  transition:box-shadow .35s ease, border-color .35s ease;
}

/* the dot on the road: red ring to match the card */
.bikemode .stop::before{
  background:#FFFFFF;
  border-color:var(--ac);
  box-shadow:0 0 10px rgba(224,22,27,.45);
  transition:background .3s, border-color .3s, box-shadow .3s;
}

/* the stop the bike has already ridden past: brighter, filled dot, stronger glow */
.bikemode .stop.hit{
  border-color:var(--ac);
  box-shadow:
    0 0 0 1px rgba(224,22,27,.22),
    0 0 34px rgba(224,22,27,.55),
    0 12px 30px rgba(0,0,0,.07);
}
.bikemode .stop.hit::before{
  background:var(--ac);
  border-color:var(--ac);
  box-shadow:0 0 14px rgba(224,22,27,.75);
}

/* gentle pulse on the active card so the eye lands on it while scrolling */
@media (prefers-reduced-motion:no-preference){
  @keyframes stopGlow{
    0%,100%{box-shadow:0 0 0 1px rgba(224,22,27,.22),0 0 30px rgba(224,22,27,.45),0 12px 30px rgba(0,0,0,.07)}
    50%    {box-shadow:0 0 0 1px rgba(224,22,27,.35),0 0 42px rgba(224,22,27,.68),0 12px 30px rgba(0,0,0,.07)}
  }
  .bikemode .stop.hit{animation:stopGlow 2.6s ease-in-out infinite}
}
.dl-btn{ justify-self:start }