/* ==========================================================================
   TrekVibe design system
   Anton (headlines) - Montserrat (body) - Caveat (script accents)
   White / Adventure Yellow #FFC107 / Black / Trail Green #607C34
   Self-hosted fonts, no framework, no external requests.
   ========================================================================== */

@font-face{font-family:Anton;src:url(../fonts/Anton-400.woff2)format("woff2");
  font-weight:400;font-style:normal;font-display:swap;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+2000-206F,U+20B9,U+2122,U+2212}
@font-face{font-family:Montserrat;src:url(../fonts/Montserrat.woff2)format("woff2");
  font-weight:100 900;font-style:normal;font-display:swap;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+2000-206F,U+20B9,U+2122,U+2212}
@font-face{font-family:Caveat;src:url(../fonts/Caveat-600.woff2)format("woff2");
  font-weight:600;font-style:normal;font-display:swap;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+2000-206F,U+20B9,U+2122,U+2212}

:root{
  --ink:#0b0d0c;          /* near-black page ground */
  --ink-2:#141815;        /* raised surface */
  --ink-3:#1e241f;        /* card / border ground */
  --paper:#ffffff;
  --mist:#c9d2c9;         /* body text on dark */
  --mist-dim:#8b968c;
  --yellow:#ffc107;
  --yellow-deep:#e0a800;
  --green:#607c34;
  --green-lit:#7d9c47;
  --line:rgba(255,255,255,.11);
  --shadow:0 18px 50px -18px rgba(0,0,0,.75);

  --pad:clamp(1.25rem,5vw,4.5rem);
  --max:1240px;
  --r:14px;
  --ease:cubic-bezier(.2,.7,.25,1);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:84px}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

body{
  margin:0;background:var(--ink);color:var(--mist);
  font-family:Montserrat,"Helvetica Neue",Arial,sans-serif;
  font-size:clamp(.95rem,.35vw + .88rem,1.02rem);line-height:1.65;font-weight:500;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
img,svg,video{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
:focus-visible{outline:3px solid var(--yellow);outline-offset:3px;border-radius:4px}

/* --- type ---------------------------------------------------------------- */
h1,h2,h3,.anton{
  font-family:Anton,"Arial Narrow",Impact,sans-serif;font-weight:400;
  text-transform:uppercase;letter-spacing:.012em;line-height:.94;
  color:var(--paper);margin:0;
}
h1{font-size:clamp(2.35rem,5.9vw,4.7rem)}
h2{font-size:clamp(1.9rem,4.6vw,3.5rem)}
h3{font-size:clamp(1.15rem,1.9vw,1.5rem);line-height:1.08}
p{margin:0 0 1.05em}
.script{font-family:Caveat,cursive;font-weight:600;text-transform:none;
  color:var(--yellow);letter-spacing:0;line-height:1.1}
.accent{color:var(--yellow)}
.eyebrow{font-size:.72rem;font-weight:800;letter-spacing:.22em;text-transform:uppercase;
  color:var(--yellow);margin:0 0 .9rem}
.lede{font-size:clamp(1rem,1.4vw,1.2rem);color:#dfe6df;max-width:62ch}
.muted{color:var(--mist-dim)}
.rupee::before{content:"\20B9"}

/* --- layout -------------------------------------------------------------- */
.wrap{width:100%;max-width:var(--max);margin-inline:auto;padding-inline:var(--pad)}
section{padding-block:clamp(3.5rem,8vw,7rem);position:relative}
.section-head{display:flex;flex-wrap:wrap;align-items:end;gap:1.25rem 2rem;
  justify-content:space-between;margin-bottom:clamp(1.75rem,3.5vw,3rem)}
.section-head p{margin:.7rem 0 0;max-width:52ch}
.rule{height:1px;background:var(--line);border:0;margin:0}

/* --- buttons ------------------------------------------------------------- */
.btn{display:inline-flex;align-items:center;gap:.6rem;padding:.95rem 1.6rem;border-radius:999px;
  font-weight:800;font-size:.82rem;letter-spacing:.1em;text-transform:uppercase;
  transition:transform .25s var(--ease),background .25s,box-shadow .25s,color .25s;
  will-change:transform}
.btn:hover{transform:translateY(-2px)}
.btn-primary{background:var(--yellow);color:#1a1204;box-shadow:0 10px 26px -10px rgba(255,193,7,.6)}
.btn-primary:hover{background:#ffcf3d;box-shadow:0 16px 34px -12px rgba(255,193,7,.7)}
.btn-ghost{border:2px solid rgba(255,255,255,.28);color:var(--paper)}
.btn-ghost:hover{border-color:var(--yellow);color:var(--yellow)}
.btn-wa{background:#25d366;color:#04240f;box-shadow:0 10px 26px -12px rgba(37,211,102,.7)}
.btn-wa:hover{background:#3ee27a}
.btn-sm{padding:.62rem 1.05rem;font-size:.7rem}

/* --- chips / pills ------------------------------------------------------- */
.pill{display:inline-flex;align-items:center;gap:.4rem;padding:.3rem .72rem;border-radius:999px;
  font-size:.66rem;font-weight:800;letter-spacing:.11em;text-transform:uppercase;
  background:rgba(255,255,255,.08);border:1px solid var(--line);color:#e7ede7;white-space:nowrap}
.pill-green{background:rgba(96,124,52,.9);border-color:transparent;color:#f2f7ea}
.pill-yellow{background:var(--yellow);border-color:transparent;color:#1a1204}
.g1{--gb:#4e7a3a}.g2{--gb:#6f8a2f}.g3{--gb:#b98a10}.g4{--gb:#c46a15}.g5{--gb:#b23c1b}
.pill-grade{background:color-mix(in srgb,var(--gb) 88%,black);border-color:transparent;color:#fff}

/* --- header -------------------------------------------------------------- */
.site-head{position:fixed;inset:0 0 auto;z-index:60;transition:background .3s,backdrop-filter .3s,
  border-color .3s;border-bottom:1px solid transparent}
.site-head.stuck{background:rgba(11,13,12,.86);backdrop-filter:blur(14px);border-color:var(--line)}
.head-in{display:flex;align-items:center;gap:1.5rem;justify-content:space-between;
  min-height:72px;width:100%;max-width:var(--max);margin-inline:auto;padding-inline:var(--pad)}
.brand{display:flex;align-items:center;gap:.6rem;flex:0 0 auto}
.brand img{width:48px;height:48px;border-radius:50%;flex:0 0 auto}
@media (max-width:600px){.brand img{width:42px;height:42px}}
/* The menu carries Login and Register as well as the pages, so the row is close
   to full at 1280-1500px: the gap has to give before a label wraps. */
.nav{display:flex;align-items:center;gap:clamp(1.05rem,1.5vw,1.6rem)}
.nav a{font-size:.76rem;font-weight:700;letter-spacing:.13em;text-transform:uppercase;
  color:#e2e8e2;position:relative;padding-block:.35rem;white-space:nowrap}
.nav a:not(.btn)::after{content:"";position:absolute;left:0;right:100%;bottom:0;height:2px;
  background:var(--yellow);transition:right .3s var(--ease)}
.nav a:not(.btn):hover::after,.nav a:not(.btn)[aria-current=page]::after{right:0}
/* Buttons in the nav (Cart, Book on WhatsApp) are already buttons - the underline
   on top of a pill reads as a mistake. Colour change on hover is the whole cue. */
.nav a.btn::after{display:none}
.nav-toggle{display:none;width:44px;height:44px;align-items:center;justify-content:center}
.nav-toggle span{display:block;width:22px;height:2px;background:var(--paper);position:relative}
.nav-toggle span::before,.nav-toggle span::after{content:"";position:absolute;left:0;width:22px;
  height:2px;background:var(--paper);transition:transform .3s var(--ease)}
.nav-toggle span::before{top:-7px}.nav-toggle span::after{top:7px}
[aria-expanded=true] span{background:transparent}
[aria-expanded=true] span::before{transform:translateY(7px)rotate(45deg)}
[aria-expanded=true] span::after{transform:translateY(-7px)rotate(-45deg)}
@media (max-width:900px){
  .nav-toggle{display:flex}
  .nav{position:fixed;inset:72px 0 auto;flex-direction:column;align-items:stretch;gap:0;
    background:rgba(11,13,12,.98);backdrop-filter:blur(16px);border-bottom:1px solid var(--line);
    padding:.5rem var(--pad) 1.4rem;transform:translateY(-120%);transition:transform .4s var(--ease);
    max-height:calc(100dvh - 72px);overflow:auto}
  .nav.open{transform:none}
  .nav a{padding:.95rem 0;border-bottom:1px solid var(--line);font-size:.9rem}
  .nav .btn{margin-top:1rem;justify-content:center}
}

/* --- hero ---------------------------------------------------------------- */
.hero{min-height:100svh;display:grid;align-items:end;position:relative;isolation:isolate;
  padding-bottom:clamp(2.5rem,7vh,5rem);overflow:hidden}
.hero-canvas,.hero-photo{position:absolute;inset:0;width:100%;height:100%;z-index:-2}
.hero-photo{object-fit:cover;transition:opacity .8s ease}
.hero canvas{display:block;width:100%;height:100%}
.hero::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:linear-gradient(180deg,rgba(11,13,12,.72)0%,rgba(11,13,12,.15)32%,
    rgba(11,13,12,.62)72%,var(--ink)100%)}
.hero-copy{position:relative;max-width:min(100%,820px)}
.hero h1{text-shadow:0 6px 34px rgba(0,0,0,.55)}
.hero .script{font-size:clamp(1.6rem,3.6vw,2.8rem);margin-bottom:-.25rem;display:block}
.hero-sub{margin-top:1.15rem;max-width:44ch;font-size:clamp(.98rem,1.2vw,1.12rem);color:#e6ece6;
  text-shadow:0 2px 14px rgba(0,0,0,.6)}
.hero-cta{display:flex;flex-wrap:wrap;gap:.85rem;margin-top:1.5rem}
.hero-stats{display:flex;flex-wrap:wrap;gap:clamp(1.5rem,4vw,3.5rem);margin-top:clamp(1.4rem,3.4vh,2.4rem);
  padding-top:1.3rem;border-top:1px solid var(--line)}
.hero-stats div{min-width:96px}
.hero-stats b{display:block;font-family:Anton,sans-serif;font-weight:400;font-size:clamp(1.45rem,2.5vw,2rem);
  color:var(--paper);line-height:1}
.hero-stats span{font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;color:var(--mist-dim)}
.scroll-hint{position:absolute;right:var(--pad);bottom:1.4rem;font-size:.6rem;
  letter-spacing:.28em;text-transform:uppercase;color:var(--mist-dim);display:flex;
  flex-direction:column;align-items:center;gap:.45rem}
@media (max-height:760px),(max-width:860px){.scroll-hint{display:none}}
.scroll-hint::after{content:"";width:1px;height:34px;background:linear-gradient(var(--yellow),transparent);
  animation:drop 2.2s var(--ease) infinite}
@keyframes drop{0%{transform:scaleY(0);transform-origin:top}
  45%{transform:scaleY(1);transform-origin:top}
  55%{transform:scaleY(1);transform-origin:bottom}
  100%{transform:scaleY(0);transform-origin:bottom}}

/* --- marquee trust strip ------------------------------------------------- */
.strip{background:var(--yellow);color:#1a1204;overflow:hidden;padding-block:.72rem}
.strip-track{display:flex;gap:2.5rem;width:max-content;animation:slide 34s linear infinite}
.strip span{font-family:Anton,sans-serif;font-size:.98rem;letter-spacing:.06em;white-space:nowrap;
  text-transform:uppercase;display:flex;align-items:center;gap:2.5rem}
.strip span::after{content:"";width:6px;height:6px;background:#1a1204;border-radius:50%}
@keyframes slide{to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){.strip-track{animation:none}.scroll-hint::after{animation:none}}

/* --- cards --------------------------------------------------------------- */
.grid{display:grid;gap:clamp(1rem,1.8vw,1.6rem)}
.grid-3{grid-template-columns:repeat(auto-fill,minmax(min(100%,310px),1fr))}
.grid-2{grid-template-columns:repeat(auto-fit,minmax(min(100%,380px),1fr))}

.card{position:relative;display:flex;flex-direction:column;background:var(--ink-2);
  border:1px solid var(--line);border-radius:var(--r);overflow:hidden;
  transition:transform .45s var(--ease),border-color .45s,box-shadow .45s}
.card:hover{transform:translateY(-6px);border-color:rgba(255,193,7,.45);box-shadow:var(--shadow)}
.card-media{position:relative;aspect-ratio:4/3;overflow:hidden;background:var(--ink-3)}
.card-media img{width:100%;height:100%;object-fit:cover;transition:transform .8s var(--ease)}
.card:hover .card-media img{transform:scale(1.06)}
.card-media::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,transparent 40%,rgba(11,13,12,.85))}
.card-tags{position:absolute;z-index:2;top:.8rem;left:.8rem;right:.8rem;display:flex;gap:.4rem;
  flex-wrap:wrap}
.card-alt{position:absolute;z-index:2;bottom:.75rem;left:.9rem;font-size:.68rem;font-weight:800;
  letter-spacing:.14em;text-transform:uppercase;color:#fff;text-shadow:0 2px 8px rgba(0,0,0,.8)}
.card-body{padding:1.1rem 1.15rem 1.25rem;display:flex;flex-direction:column;gap:.6rem;flex:1}
.card-body h3{color:var(--paper)}
.card-body p{margin:0;font-size:.87rem;color:var(--mist-dim);line-height:1.5}
.card-meta{display:flex;flex-wrap:wrap;gap:.4rem;margin-top:auto;padding-top:.35rem}
.card-foot{display:flex;align-items:center;justify-content:space-between;gap:1rem;
  padding-top:.85rem;border-top:1px solid var(--line)}
.price{font-family:Anton,sans-serif;font-size:1.42rem;color:var(--paper);line-height:1}
.price s{font-family:Montserrat,sans-serif;font-size:.76rem;color:var(--mist-dim);margin-left:.4rem;
  font-weight:600}
.price small{display:block;font-family:Montserrat,sans-serif;font-size:.6rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--mist-dim);font-weight:700;margin-top:.28rem}
.card a.stretch::after{content:"";position:absolute;inset:0;z-index:3}

/* --- spotlight ----------------------------------------------------------- */
.spot{display:grid;gap:clamp(1.4rem,3vw,3rem);align-items:center;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,330px),1fr))}
.spot-media{position:relative;border-radius:var(--r);overflow:hidden;aspect-ratio:5/4}
.spot-media img{width:100%;height:100%;object-fit:cover}
.spot-badge{position:absolute;bottom:1rem;left:1rem;right:1rem;display:flex;gap:.5rem;flex-wrap:wrap}
.spot ul{list-style:none;margin:1.3rem 0 1.8rem;padding:0;display:grid;gap:.6rem}
.spot li{display:flex;gap:.7rem;font-size:.93rem;color:#dbe2db}
.spot li::before{content:"";flex:0 0 auto;width:8px;height:8px;margin-top:.52rem;border-radius:2px;
  background:var(--yellow);transform:rotate(45deg)}

/* --- filters ------------------------------------------------------------- */
.filters{display:flex;flex-wrap:wrap;gap:.9rem 1.6rem;align-items:center;padding:1.1rem 0;
  border-block:1px solid var(--line);position:sticky;top:72px;z-index:40;
  background:rgba(11,13,12,.94);backdrop-filter:blur(12px)}
.fgroup{display:flex;align-items:center;gap:.45rem;flex-wrap:wrap}
.fgroup > b{font-size:.62rem;letter-spacing:.18em;text-transform:uppercase;color:var(--mist-dim);
  margin-right:.2rem;font-weight:800}
.chip{padding:.4rem .8rem;border-radius:999px;border:1px solid var(--line);font-size:.7rem;
  font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:#dfe6df;
  transition:background .2s,color .2s,border-color .2s}
.chip:hover{border-color:rgba(255,193,7,.5);color:var(--yellow)}
.chip[aria-pressed=true]{background:var(--yellow);border-color:var(--yellow);color:#1a1204}
.result-count{margin-left:auto;font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--mist-dim);font-weight:700}
.empty{padding:4rem 0;text-align:center;color:var(--mist-dim)}

/* --- trek page ----------------------------------------------------------- */
.trek-hero{position:relative;min-height:min(76svh,720px);display:grid;align-items:end;
  padding-block:8rem clamp(2rem,5vw,3.5rem);overflow:hidden;isolation:isolate}
.trek-hero img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2}
.trek-hero::after{content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(180deg,rgba(11,13,12,.78),rgba(11,13,12,.25)45%,var(--ink))}
.crumbs{font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;color:var(--mist-dim);
  margin-bottom:1rem}
.crumbs a:hover{color:var(--yellow)}
.trek-hero h1{font-size:clamp(2.1rem,6.4vw,4.6rem);max-width:16ch}
.trek-tags{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:1.2rem}

.facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:1px;
  background:var(--line);border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.facts div{background:var(--ink-2);padding:1rem 1.1rem}
.facts dt{font-size:.6rem;letter-spacing:.16em;text-transform:uppercase;color:var(--mist-dim);
  font-weight:800;margin-bottom:.35rem}
.facts dd{margin:0;font-family:Anton,sans-serif;font-size:1.12rem;color:var(--paper);
  letter-spacing:.01em;line-height:1.15}
.facts dd.sm{font-family:Montserrat,sans-serif;font-size:.84rem;font-weight:600;color:#dfe6df}

.trek-layout{display:grid;gap:clamp(1.6rem,3vw,3rem);align-items:start;
  grid-template-columns:minmax(0,1fr)}
@media (min-width:1020px){.trek-layout{grid-template-columns:minmax(0,1fr) 340px}
  .trek-layout > aside{align-self:stretch}}
.trek-body > *+*{margin-top:clamp(2.2rem,4vw,3.4rem)}
.trek-body h2{font-size:clamp(1.5rem,3vw,2.2rem);margin-bottom:1rem}
.checks{list-style:none;margin:0;padding:0;display:grid;gap:.55rem}
.checks li{display:flex;gap:.65rem;font-size:.9rem;line-height:1.5}
.checks li::before{content:"";flex:0 0 auto;width:18px;height:18px;margin-top:.15rem;border-radius:50%;
  background:var(--green) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E")center/11px no-repeat}
.checks.no li::before{background:#7a2f22 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.5' stroke-linecap='round'%3E%3Cpath d='M18 6 6 18M6 6l12 12'/%3E%3C/svg%3E")center/10px no-repeat}

details.acc{border:1px solid var(--line);border-radius:10px;background:var(--ink-2);
  margin-bottom:.55rem;overflow:hidden}
details.acc[open]{border-color:rgba(255,193,7,.4)}
details.acc summary{list-style:none;cursor:pointer;padding:1rem 1.15rem;display:flex;gap:.9rem;
  align-items:center;font-weight:700;color:var(--paper);font-size:.94rem}
details.acc summary::-webkit-details-marker{display:none}
details.acc summary::after{content:"";margin-left:auto;flex:0 0 auto;width:10px;height:10px;
  border-right:2px solid var(--yellow);border-bottom:2px solid var(--yellow);
  transform:rotate(45deg)translateY(-2px);transition:transform .3s var(--ease)}
details.acc[open] summary::after{transform:rotate(225deg)translateY(-2px)}
.daynum{flex:0 0 auto;width:38px;height:38px;border-radius:9px;background:var(--green);
  color:#fff;font-family:Anton,sans-serif;font-size:.86rem;display:grid;place-items:center;
  letter-spacing:.04em}
details.acc .acc-body{padding:0 1.15rem 1.15rem 4.05rem;color:var(--mist);font-size:.9rem}
details.acc.qa .acc-body{padding-left:1.15rem}

.rail{position:sticky;top:96px;background:var(--ink-2);border:1px solid var(--line);
  border-radius:var(--r);padding:1.4rem;box-shadow:var(--shadow)}
.rail .price{font-size:2.3rem}
.rail .btn{width:100%;justify-content:center;margin-top:.65rem}
.rail ul{list-style:none;margin:1.2rem 0 0;padding:1.1rem 0 0;border-top:1px solid var(--line);
  display:grid;gap:.5rem;font-size:.78rem;color:var(--mist-dim)}
.rail li{display:flex;gap:.5rem;align-items:center}
.rail li b{color:#e7ede7;font-weight:700}
.note{font-size:.72rem;color:var(--mist-dim);margin-top:.9rem;line-height:1.5}

.book-bar{position:fixed;inset:auto 0 0;z-index:65;display:none;align-items:center;gap:1rem;
  padding:.7rem var(--pad) calc(.7rem + env(safe-area-inset-bottom));
  background:rgba(11,13,12,.95);backdrop-filter:blur(14px);border-top:1px solid var(--line)}
.book-bar .price{font-size:1.32rem}
.book-bar .btn{margin-left:auto;flex:0 0 auto}
@media (max-width:1019px){
  .book-bar{display:flex}
  body.trek .wa-float{display:none}
  .rail{position:static;box-shadow:none}
  main{padding-bottom:78px}
}
.reel{position:relative;max-width:340px;margin-inline:auto;border-radius:var(--r);
  overflow:hidden;border:1px solid var(--line);box-shadow:var(--shadow);background:#000}
.reel video{width:100%;height:auto;display:block;aspect-ratio:608/1080;object-fit:cover}
/* --- 3D route view -------------------------------------------------------- */
.tmap{position:sticky;top:86px;z-index:5;margin-bottom:1.1rem;border:1px solid var(--line);
  border-radius:var(--r);overflow:hidden;background:#0b0d0c;height:min(54vh,430px)}
@media (max-width:640px){.tmap{height:min(46vh,320px);top:80px}}
.tmap canvas{display:block;width:100%;height:100%;touch-action:pan-y;cursor:grab}
.tmap canvas:active{cursor:grabbing}
.tmap-layer{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.tmap-label{position:absolute;top:0;left:0;white-space:nowrap;font-size:.58rem;font-weight:800;
  letter-spacing:.11em;text-transform:uppercase;color:#fff;padding:.18rem .42rem;border-radius:5px;
  background:rgba(11,13,12,.72);border:1px solid rgba(255,255,255,.16);opacity:0;
  transition:opacity .35s ease,background .35s ease,border-color .35s ease}
.tmap-label.on{background:var(--yellow);color:#1a1204;border-color:transparent}
.tmap-fallback{position:absolute;inset:0;display:grid;place-items:center;padding:1.2rem;
  text-align:center;color:var(--mist-dim);font-size:.8rem}
.tmap-fallback[hidden]{display:none}
.tmap-fallback svg{width:100%;height:auto}
.tmap-head{position:absolute;z-index:2;top:0;left:0;right:0;display:flex;align-items:flex-start;
  gap:.6rem;padding:.75rem .85rem;
  background:linear-gradient(rgba(11,13,12,.82),transparent)}
.tmap-day{font-family:Anton,sans-serif;font-size:.82rem;letter-spacing:.05em;color:var(--yellow);
  text-transform:uppercase;line-height:1.2}
.tmap-day b{display:block;color:#fff;font-size:.72rem;font-family:Montserrat,sans-serif;
  font-weight:700;letter-spacing:.02em;text-transform:none;margin-top:.15rem;max-width:24ch}
.tmap-alt{margin-left:auto;text-align:right;font-family:Anton,sans-serif;font-size:1.05rem;
  color:#fff;line-height:1}
.tmap-alt span{display:block;font-family:Montserrat,sans-serif;font-size:.52rem;font-weight:800;
  letter-spacing:.16em;color:var(--mist-dim);text-transform:uppercase;margin-top:.2rem}
.tmap-foot{position:absolute;z-index:2;left:0;right:0;bottom:0;display:flex;align-items:center;
  gap:.5rem;padding:.7rem .85rem;background:linear-gradient(transparent,rgba(11,13,12,.86))}
.tmap-btn{width:34px;height:34px;border-radius:50%;background:rgba(255,255,255,.12);
  border:1px solid var(--line);display:grid;place-items:center;color:#fff;flex:0 0 auto;
  transition:background .25s,border-color .25s}
.tmap-btn:hover{background:var(--yellow);color:#1a1204;border-color:transparent}
.tmap-scrub{flex:1;height:3px;background:rgba(255,255,255,.16);border-radius:2px;position:relative}
.tmap-scrub i{position:absolute;inset:0 auto 0 0;background:var(--yellow);border-radius:2px;
  transition:width .5s var(--ease)}
.tmap-credit{position:absolute;z-index:2;right:.6rem;bottom:2.9rem;font-size:.52rem;
  letter-spacing:.08em;color:rgba(255,255,255,.42);text-transform:uppercase}
.day-list details.acc.live{border-color:var(--yellow);background:#1a1d16}
.gal{display:grid;gap:.6rem;grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr))}
.gal img{border-radius:10px;aspect-ratio:4/3;object-fit:cover;width:100%}

/* --- feature blocks ------------------------------------------------------ */
.feat{display:grid;gap:1.4rem;grid-template-columns:repeat(auto-fit,minmax(min(100%,250px),1fr))}
.feat article{padding:1.6rem 1.4rem;border:1px solid var(--line);border-radius:var(--r);
  background:linear-gradient(180deg,var(--ink-2),rgba(20,24,21,.35));transition:border-color .4s}
.feat article:hover{border-color:rgba(255,193,7,.4)}
.feat .ico{width:44px;height:44px;border-radius:50%;background:var(--green);display:grid;
  place-items:center;margin-bottom:1rem;font-size:1.25rem}
.feat h3{font-size:1.06rem;margin-bottom:.5rem}
.feat p{font-size:.88rem;color:var(--mist-dim);margin:0}

.cta-band{background:
  linear-gradient(rgba(11,13,12,.82),rgba(11,13,12,.88)),var(--ink-3) center/cover;
  border-block:1px solid var(--line);text-align:center}
.cta-band .btn{margin-top:1.6rem}

/* --- footer -------------------------------------------------------------- */
.socials{display:flex;gap:.6rem;margin-top:1rem}
.social{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;
  border:1px solid var(--line);background:rgba(255,255,255,.05);color:#dfe6df;
  transition:background .25s,color .25s,border-color .25s,transform .25s var(--ease)}
.social svg{width:18px;height:18px;fill:currentColor}
.social:hover{background:var(--yellow);color:#1a1204;border-color:transparent;
  transform:translateY(-2px)}
.site-foot{background:#080a09;border-top:1px solid var(--line);padding-block:clamp(2.6rem,5vw,4rem) 2rem}
.foot-grid{display:grid;gap:2rem;grid-template-columns:repeat(auto-fit,minmax(min(100%,190px),1fr))}
.foot-grid h4{font-family:Anton,sans-serif;font-weight:400;text-transform:uppercase;
  letter-spacing:.08em;font-size:.85rem;color:var(--paper);margin:0 0 .9rem}
.foot-grid ul{list-style:none;margin:0;padding:0;display:grid;gap:.5rem;font-size:.84rem}
.foot-grid a:hover{color:var(--yellow)}
.foot-bottom{display:flex;flex-wrap:wrap;gap:1rem;justify-content:space-between;
  margin-top:2.6rem;padding-top:1.4rem;border-top:1px solid var(--line);
  font-size:.72rem;color:var(--mist-dim)}
.wa-float{position:fixed;right:16px;bottom:16px;z-index:70;width:56px;height:56px;border-radius:50%;
  background:#25d366;display:grid;place-items:center;box-shadow:0 12px 30px -8px rgba(0,0,0,.7);
  transition:transform .3s var(--ease)}
.wa-float:hover{transform:scale(1.08)}
.wa-float svg{width:28px;height:28px;fill:#04240f}

/* --- reveal on scroll ---------------------------------------------------- */
/* Only hide for reveal when JS is actually running - without it the page must
   still be fully readable (and crawlable). */
.js .rv{opacity:0;transform:translateY(22px);
  transition:opacity .7s var(--ease),transform .7s var(--ease)}
.js .rv.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  .js .rv{opacity:1;transform:none;transition:none}
  .card:hover,.btn:hover,.wa-float:hover{transform:none}
  .card-media img,.card:hover .card-media img{transition:none;transform:none}
}
.skip{position:absolute;left:-9999px}
.skip:focus{left:1rem;top:1rem;z-index:99;padding:.7rem 1rem;background:var(--yellow);color:#000;
  border-radius:8px}

/* --- departures in the booking rail --------------------------------------- */
.departures{list-style:none;margin:1.1rem 0 0;padding:0;display:grid;gap:.45rem;border:0}
.departure{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:.2rem .6rem;
  align-items:center;padding:.6rem .7rem;border-radius:10px;
  background:rgba(255,255,255,.05);border:1px solid var(--line);font-size:.8rem}
.departure.is-full{opacity:.5}
.departure-when{grid-column:1;grid-row:1;font-weight:700;color:#e7ede7;white-space:nowrap}
.departure-seats{grid-column:1;grid-row:2;font-size:.66rem;letter-spacing:.06em;
  text-transform:uppercase;color:var(--mist-dim);font-weight:700;white-space:nowrap}
.departure-seats.low{color:var(--yellow)}
.departure-seats.full{color:#c98b7a}
.departure .btn{grid-column:2;grid-row:1/3;padding:.45rem .95rem;font-size:.64rem;
  justify-content:center}

/* WordPress nav menus arrive as <li>; the header lays out with flex, so strip
   the list chrome rather than fighting it. */
.nav li{list-style:none;display:flex;margin:0;padding:0}
.nav ul{display:contents;margin:0;padding:0;list-style:none}
@media (max-width:900px){.nav li{display:block}.nav li a{display:block}
  /* Login/Register carry an icon and are laid out inline by the auth plugin;
     in the stacked mobile menu they have to fill the row like every other item. */
  .nav li.tv-menu-account > a{display:flex !important;width:100%}
  .nav li.tv-menu-account + li.tv-menu-account{margin-left:0}}

/* --- archive page header -------------------------------------------------- */
/* Two columns on desktop: the headline was leaving half the row empty and
   pushing the cards a full screen down. */
.page-head{display:grid;gap:1.1rem 3rem;padding-block:6.5rem 1.4rem;
  grid-template-columns:minmax(0,1fr)}
.page-head h1{font-size:clamp(2.3rem,5.4vw,4.2rem)}
.page-head .lede{margin:0}
@media (min-width:900px){
  .page-head{grid-template-columns:minmax(0,1.02fr) minmax(0,.98fr);
    align-items:end;padding-block:7.5rem 1.8rem}
}
.page-stats{display:flex;flex-wrap:wrap;gap:1.6rem 2.6rem;margin:1.5rem 0 0;
  padding-top:1.2rem;border-top:1px solid var(--line)}
.page-stats dt{font-size:.6rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--mist-dim);font-weight:800;margin-bottom:.3rem}
.page-stats dd{margin:0;font-family:Anton,sans-serif;font-size:1.45rem;color:var(--paper);
  line-height:1}

/* --- WooCommerce cart & checkout on a dark theme --------------------------
   Woo ships light-theme defaults, so labels and headings render dark-on-dark
   and are invisible. Everything below is restating colour and box styling in
   the brand's terms rather than restyling Woo's layout. */
.woocommerce-cart main, .woocommerce-checkout main,
.woocommerce-account main{padding-block:7rem 4rem}
.woocommerce-cart .wrap, .woocommerce-checkout .wrap{max-width:var(--max)}

.woocommerce h1,.woocommerce h2,.woocommerce h3{color:var(--paper)}
.woocommerce form .form-row label,
.woocommerce-checkout label,
.woocommerce-billing-fields label,
.tv-travellers label{display:block;color:#dfe6df;font-size:.74rem;font-weight:700;
  letter-spacing:.06em;margin-bottom:.35rem}
.woocommerce form .form-row label .required,
.tv-travellers .required{color:var(--yellow);text-decoration:none;border:0}

.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select,
.woocommerce-checkout input[type=text],.woocommerce-checkout input[type=email],
.woocommerce-checkout input[type=tel],.woocommerce-checkout input[type=number],
.woocommerce-checkout input[type=password],.woocommerce-checkout textarea,
.woocommerce-checkout select,
.tv-travellers input,.tv-travellers select{
  width:100%;padding:.75rem .85rem;border-radius:10px;
  background:var(--ink-3);border:1px solid var(--line);color:var(--paper);
  font:inherit;font-size:.9rem}
.woocommerce form .form-row input.input-text:focus,
.tv-travellers input:focus,.tv-travellers select:focus,
.woocommerce-checkout select:focus{outline:2px solid var(--yellow);outline-offset:1px}
.woocommerce form .form-row{margin-bottom:1rem}
.select2-container--default .select2-selection--single{
  background:var(--ink-3);border:1px solid var(--line);height:auto;padding:.55rem .35rem}
.select2-container--default .select2-selection--single .select2-selection__rendered{color:var(--paper)}
.select2-dropdown{background:var(--ink-2);border-color:var(--line);color:var(--mist)}

#customer_details{display:grid;gap:2rem;grid-template-columns:minmax(0,1fr)}
@media (min-width:900px){#customer_details{grid-template-columns:repeat(2,minmax(0,1fr))}}
#customer_details .col-1,#customer_details .col-2{width:auto;float:none}

.woocommerce-checkout #order_review,
.woocommerce-checkout-review-order{background:var(--ink-2);border:1px solid var(--line);
  border-radius:var(--r);padding:1.4rem}
.woocommerce table.shop_table{background:transparent;border:0;color:var(--mist)}
.woocommerce table.shop_table th,.woocommerce table.shop_table td{
  border-top:1px solid var(--line);color:var(--mist);padding:.7rem .4rem}
.woocommerce table.shop_table tfoot th,.woocommerce table.shop_table .order-total td{
  color:var(--paper);font-weight:800}
.woocommerce .cart_item .product-name{color:#e7ede7}
.woocommerce-checkout #payment{background:transparent;border-radius:0}
.woocommerce-checkout #payment ul.payment_methods{border-bottom:1px solid var(--line);padding:0 0 1rem}
.woocommerce-checkout #payment div.payment_box{background:var(--ink-3);color:var(--mist)}
.woocommerce-checkout #payment div.payment_box::before{border-bottom-color:var(--ink-3)}
.woocommerce #payment #place_order,.woocommerce a.button,.woocommerce button.button,
.woocommerce input.button,.woocommerce .button.alt{
  background:var(--yellow);color:#1a1204;border-radius:999px;font-weight:800;
  letter-spacing:.1em;text-transform:uppercase;font-size:.8rem;padding:.95rem 1.6rem}
.woocommerce #payment #place_order:hover,.woocommerce a.button:hover,
.woocommerce button.button:hover{background:#ffcf3d;color:#1a1204}
.woocommerce-info,.woocommerce-message,.woocommerce-error{
  background:var(--ink-2);border-top-color:var(--yellow);color:var(--mist)}
.woocommerce-info a,.woocommerce-message a{color:var(--yellow)}

/* --- traveller details ---------------------------------------------------- */
.tv-travellers{margin-top:2.2rem}
.tv-travellers h3{font-family:Anton,sans-serif;text-transform:uppercase;letter-spacing:.02em;
  font-size:1.3rem;color:var(--paper);margin:0 0 .4rem}
.tv-traveller{border:1px solid var(--line);border-radius:var(--r);background:var(--ink-2);
  padding:1.1rem 1.2rem 1.3rem;margin:1rem 0 0}
.tv-traveller legend{display:flex;flex-wrap:wrap;align-items:baseline;gap:.6rem;padding:0 .4rem}
.tv-traveller-n{font-family:Anton,sans-serif;text-transform:uppercase;color:var(--yellow);
  font-size:.95rem;letter-spacing:.04em}
.tv-traveller-trek{font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;color:var(--mist-dim);
  font-weight:700}
.tv-fields{display:grid;gap:.9rem 1rem;grid-template-columns:repeat(2,minmax(0,1fr));margin-top:.9rem}
.tv-field{margin:0}
.tv-field.tv-wide{grid-column:1/-1}
@media (max-width:620px){.tv-fields{grid-template-columns:minmax(0,1fr)}
  .tv-field.tv-half{grid-column:auto}}

/* Woo's own wrapper class is not always present on the checkout form, so target
   the body class too - otherwise section headings stay dark-on-dark. */
.woocommerce-checkout h3,.woocommerce-cart h3,.woocommerce-account h3,
.woocommerce-checkout #order_review_heading,
.woocommerce-billing-fields > h3,.woocommerce-additional-fields > h3{
  color:var(--paper);font-family:Anton,sans-serif;text-transform:uppercase;
  letter-spacing:.02em;font-size:1.25rem;margin:0 0 1rem}
.woocommerce-checkout label,.woocommerce-cart label{color:#dfe6df}
.woocommerce-checkout textarea,.woocommerce-cart textarea{
  background:var(--ink-3);border:1px solid var(--line);color:var(--paper);
  border-radius:10px;padding:.75rem .85rem;font:inherit;font-size:.9rem;width:100%}
.woocommerce-checkout ::placeholder{color:var(--mist-dim)}

/* Shipping is disabled, so there is no second column to fill - one column reads
   better than a half-empty grid. */
#customer_details{grid-template-columns:minmax(0,1fr)!important}
.woocommerce-checkout form.checkout{display:grid;gap:2.2rem;
  grid-template-columns:minmax(0,1fr)}
@media (min-width:1000px){
  .woocommerce-checkout form.checkout{grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr);
    align-items:start}
  .woocommerce-checkout form.checkout #customer_details{grid-column:1}
  .woocommerce-checkout form.checkout .tv-travellers{grid-column:1}
  .woocommerce-checkout form.checkout #order_review_heading,
  .woocommerce-checkout form.checkout #order_review{grid-column:2}
  .woocommerce-checkout form.checkout #order_review{position:sticky;top:96px}
}

/* --- checkout: pair the billing fields up ---------------------------------
   Woo marks almost every billing field "form-row-wide", which in a half-width
   column means one field per row and a very tall, mostly empty form. Grid the
   wrapper and let short fields share a row. */
.woocommerce-billing-fields__field-wrapper,
.woocommerce-shipping-fields__field-wrapper{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.85rem 1rem}
.woocommerce-billing-fields__field-wrapper .form-row,
.woocommerce-shipping-fields__field-wrapper .form-row{
  margin:0;padding:0;float:none;min-width:0;
  /* Woo's `.woocommerce form .form-row-first{width:47%}` is one specificity point
     above anything sane we can write here, and it makes each field half the width
     of its own grid cell. This is the one place the override has to be forced. */
  width:100%!important}
/* Woo sizes .form-row-first/-last at 47% each; inside a grid cell that leaves the
   input floating in half its column. */
.woocommerce-billing-fields__field-wrapper .form-row input,
.woocommerce-billing-fields__field-wrapper .form-row select,
.woocommerce-billing-fields__field-wrapper .form-row .select2-container{width:100%!important}
/* Full-width only where the content genuinely needs it. */
#billing_address_1_field,#billing_address_2_field,#billing_company_field,
.woocommerce-billing-fields__field-wrapper .form-row-wide.tv-full{grid-column:1/-1}
/* Everything short pairs up. */
#billing_first_name_field,#billing_last_name_field,#billing_country_field,
#billing_state_field,#billing_city_field,#billing_postcode_field,
#billing_phone_field,#billing_email_field{grid-column:span 1}
@media (max-width:640px){
  .woocommerce-billing-fields__field-wrapper{grid-template-columns:minmax(0,1fr)}
  .woocommerce-billing-fields__field-wrapper .form-row{grid-column:1/-1!important}
}

/* Tighter vertical rhythm - the form was twice as tall as it needed to be. */
.woocommerce-checkout .form-row label,.tv-travellers label{margin-bottom:.28rem}
.woocommerce-checkout .form-row input.input-text,
.woocommerce-checkout .form-row select,
.woocommerce-checkout input[type=text],.woocommerce-checkout input[type=email],
.woocommerce-checkout input[type=tel],.woocommerce-checkout input[type=number],
.woocommerce-checkout select,.tv-travellers input,.tv-travellers select{
  padding:.6rem .75rem;font-size:.86rem}
.woocommerce-checkout .select2-container--default .select2-selection--single{padding:.4rem .3rem}
.tv-traveller{padding:.9rem 1rem 1.05rem}
.tv-fields{gap:.7rem .9rem;margin-top:.7rem}
.woocommerce-additional-fields{margin-top:1.4rem}

/* --- cart page ------------------------------------------------------------
   Woo's cart is a full-width table, a floated totals box and its own purple
   buttons. Rebuilt as a two-column layout in brand colours. */
.woocommerce-cart .woocommerce{display:grid;gap:2rem 2.5rem;grid-template-columns:minmax(0,1fr)}
@media (min-width:1000px){
  .woocommerce-cart .woocommerce{grid-template-columns:minmax(0,1.4fr) minmax(0,.6fr);
    align-items:start}
  .woocommerce-cart .woocommerce-cart-form{grid-column:1}
  .woocommerce-cart .cart-collaterals{grid-column:2;position:sticky;top:96px}
}
.woocommerce-cart .cart-collaterals,
.woocommerce-cart .cart_totals{width:100%!important;float:none!important}

.woocommerce-cart table.cart{width:100%;border-collapse:collapse}
.woocommerce-cart table.cart thead th{
  font-family:Anton,sans-serif;font-weight:400;text-transform:uppercase;letter-spacing:.08em;
  font-size:.78rem;color:var(--mist-dim);border-bottom:1px solid var(--line);padding:.7rem .6rem}
.woocommerce-cart table.cart td{border-top:1px solid var(--line);padding:1rem .6rem;
  vertical-align:middle;background:transparent}
.woocommerce-cart table.cart img{width:64px;height:64px;object-fit:cover;border-radius:10px}
.woocommerce-cart td.product-name a{color:var(--paper);font-weight:700}
.woocommerce-cart td.product-name a:hover{color:var(--yellow)}
.woocommerce-cart td.product-price,.woocommerce-cart td.product-subtotal{color:#e7ede7}
.woocommerce-cart td.product-subtotal{font-weight:800;color:var(--paper)}
.woocommerce-cart .product-remove a.remove{
  color:var(--mist-dim)!important;background:transparent!important;font-size:1.3rem;line-height:1}
.woocommerce-cart .product-remove a.remove:hover{color:#e06a52!important}
.woocommerce-cart .quantity input.qty{width:68px;text-align:center;padding:.5rem .3rem;
  background:var(--ink-3);border:1px solid var(--line);color:var(--paper);border-radius:8px}

/* coupon row: input and button on one line, sized like each other */
.woocommerce-cart td.actions{padding:1.1rem .6rem}
.woocommerce-cart .coupon{display:flex;gap:.6rem;align-items:center;flex-wrap:wrap;float:none!important}
.woocommerce-cart .coupon label{display:none}
.woocommerce-cart .coupon input#coupon_code{
  width:200px!important;background:var(--ink-3)!important;border:1px solid var(--line)!important;
  color:var(--paper)!important;border-radius:999px;padding:.7rem 1.1rem;font-size:.84rem}
.woocommerce-cart td.actions .button{float:none}

/* Every Woo button in brand terms - `.alt` is Woo's purple and it is specific. */
.woocommerce a.button,.woocommerce button.button,.woocommerce input.button,
.woocommerce a.button.alt,.woocommerce button.button.alt,.woocommerce input.button.alt,
.woocommerce-cart .wc-proceed-to-checkout a.checkout-button,
.woocommerce #respond input#submit.alt,.woocommerce #payment #place_order{
  background:var(--yellow)!important;color:#1a1204!important;border:0!important;
  border-radius:999px!important;font-weight:800!important;letter-spacing:.09em;
  text-transform:uppercase;font-size:.78rem;padding:.85rem 1.5rem!important;
  box-shadow:0 10px 26px -12px rgba(255,193,7,.55)}
.woocommerce a.button:hover,.woocommerce button.button:hover,
.woocommerce button.button.alt:hover,
.woocommerce-cart .wc-proceed-to-checkout a.checkout-button:hover{
  background:#ffcf3d!important;color:#1a1204!important}
/* Update cart is disabled until a quantity changes - say so quietly. */
.woocommerce button.button:disabled,.woocommerce button.button[disabled]{
  background:rgba(255,255,255,.08)!important;color:var(--mist-dim)!important;
  box-shadow:none;opacity:1}

.woocommerce-cart .cart_totals{background:var(--ink-2);border:1px solid var(--line);
  border-radius:var(--r);padding:1.4rem}
.woocommerce-cart .cart_totals h2{font-size:1.25rem;margin:0 0 1rem}
.woocommerce-cart .cart_totals table th{color:var(--mist-dim);font-weight:700;font-size:.8rem}
.woocommerce-cart .cart_totals .order-total td,
.woocommerce-cart .cart_totals .order-total th{color:var(--paper);font-size:1.05rem}
.woocommerce-cart .wc-proceed-to-checkout{padding:1rem 0 0}
.woocommerce-cart .wc-proceed-to-checkout a.checkout-button{display:block;text-align:center}
.woocommerce-cart .return-to-shop{margin-top:1.2rem}

/* Give the trek name room; the other cart columns only need their content. */
.woocommerce-cart table.cart{table-layout:auto}
.woocommerce-cart table.cart td.product-remove,
.woocommerce-cart table.cart th.product-remove{width:34px;padding-right:0}
.woocommerce-cart table.cart td.product-thumbnail,
.woocommerce-cart table.cart th.product-thumbnail{width:76px}
.woocommerce-cart table.cart td.product-name,
.woocommerce-cart table.cart th.product-name{width:auto;min-width:190px;line-height:1.35}
.woocommerce-cart table.cart td.product-price,
.woocommerce-cart table.cart td.product-subtotal,
.woocommerce-cart table.cart th.product-price,
.woocommerce-cart table.cart th.product-subtotal{width:110px;white-space:nowrap}
.woocommerce-cart table.cart td.product-quantity,
.woocommerce-cart table.cart th.product-quantity{width:88px}
.woocommerce-cart .woocommerce-message{margin-bottom:1.6rem}

/* Cart: stop the table overflowing under the totals card, and keep the
   thumbnail square (Woo's width/height attributes distort it otherwise). */
@media (min-width:1000px){
  .woocommerce-cart .woocommerce{grid-template-columns:minmax(0,1fr) minmax(270px,320px)}
}
.woocommerce-cart .woocommerce-cart-form{min-width:0;overflow-x:auto}
.woocommerce-cart table.cart td.product-thumbnail img{
  width:56px!important;height:56px!important;object-fit:cover;border-radius:10px;max-width:none}
.woocommerce-cart table.cart td.product-thumbnail,
.woocommerce-cart table.cart th.product-thumbnail{width:66px}
.woocommerce-cart table.cart td.product-price,
.woocommerce-cart table.cart td.product-subtotal,
.woocommerce-cart table.cart th.product-price,
.woocommerce-cart table.cart th.product-subtotal{width:96px}
.woocommerce-cart table.cart td.product-quantity,
.woocommerce-cart table.cart th.product-quantity{width:74px}
.woocommerce-cart table.cart td.product-name,
.woocommerce-cart table.cart th.product-name{min-width:150px}

/* Let the browser size the cart columns - the fixed widths above added up to
   more than the column and pushed Subtotal out of view. */
.woocommerce-cart .woocommerce-cart-form{overflow-x:visible}
.woocommerce-cart table.cart td,.woocommerce-cart table.cart th{width:auto!important}
.woocommerce-cart table.cart td.product-remove,
.woocommerce-cart table.cart th.product-remove{width:28px!important;padding-right:0}
.woocommerce-cart table.cart td.product-thumbnail,
.woocommerce-cart table.cart th.product-thumbnail{width:62px!important}
.woocommerce-cart table.cart td.product-price,
.woocommerce-cart table.cart td.product-subtotal{white-space:nowrap}
.woocommerce-cart table.cart th{white-space:nowrap}
@media (max-width:520px){
  .woocommerce-cart table.cart td.product-thumbnail,
  .woocommerce-cart table.cart th.product-thumbnail,
  .woocommerce-cart table.cart td.product-price,
  .woocommerce-cart table.cart th.product-price{display:none}
}

/* --- generic pages -------------------------------------------------------- */
.page-section{padding-block:7rem 4rem}
.page-title{margin-bottom:1.6rem}
.page-content{max-width:none}
/* Prose pages still want a comfortable measure; shop pages want the full width. */
.page-content > p,.page-content > ul,.page-content > ol,.page-content > h2,
.page-content > h3,.page-content > blockquote{max-width:70ch}
.woocommerce-cart .page-content > *,.woocommerce-checkout .page-content > *,
.woocommerce-account .page-content > *{max-width:none}

/* Hero sat in a full-viewport section with the copy pinned to the bottom, which
   left a dead band between the header and the headline. */
.hero{min-height:min(86svh,780px)}
@media (min-width:1100px){.hero{min-height:min(84svh,760px)}}
.hero .script{margin-bottom:-.35rem}
.hero-stats{margin-top:clamp(1.1rem,2.6vh,1.9rem);padding-top:1.1rem}

/* --- section rhythm -------------------------------------------------------
   Sections were padded for a much taller viewport; on a laptop it read as a
   screen of black between every block. */
section{padding-block:clamp(2.4rem,5vw,4.4rem)}
.section-head{margin-bottom:clamp(1.2rem,2.4vw,2rem);align-items:end}
.section-head p{margin-top:.55rem}
.section-head h2{margin-top:.15rem}
/* Heading block and its CTA on one row, CTA pinned to the baseline. */
@media (min-width:820px){
  .section-head{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:1rem 2.5rem}
  .section-head > div{grid-column:1}
  .section-head > .btn,.section-head > a.btn{grid-column:2;align-self:end;justify-self:end}
}
.spot{gap:clamp(1.2rem,2.4vw,2.4rem)}
#featured .section-head .lede{max-width:52ch}

/* --- card entrance --------------------------------------------------------
   Cards rise and settle in sequence rather than all at once; the stagger is set
   per grid in site.js so it works for any number of cards. */
 /* superseded by the variable-driven transform below */
.card.rv{transition:opacity .55s var(--ease),--rise .65s var(--ease),
  --card-scale .65s var(--ease),--lift .3s var(--ease),
  border-color .45s,box-shadow .45s}
@media (prefers-reduced-motion:reduce){
  .js .card.rv,.js .card.rv.in{transform:none;transition:none}
}

/* Registered so they interpolate. An unregistered custom property is a string as
   far as animation is concerned, so `transition: transform` on a transform built
   out of var() is unreliable - the browser keeps the value the transition started
   with. Registering them lets the variables animate and the transform simply
   follows. */
@property --rise{syntax:"<length>";inherits:false;initial-value:0px}
@property --lift{syntax:"<length>";inherits:false;initial-value:0px}
@property --card-scale{syntax:"<number>";inherits:false;initial-value:1}
@property --tilt-x{syntax:"<angle>";inherits:false;initial-value:0deg}
@property --tilt-y{syntax:"<angle>";inherits:false;initial-value:0deg}

/* --- card motion ----------------------------------------------------------
   Entrance: the image wipes up behind the card as the card itself rises.
   Hover: the card tilts a few degrees towards the pointer with a light that
   follows it. Transform and opacity only, so it stays on the compositor. */
.card{
  --tilt-x:0deg; --tilt-y:0deg; --glow-x:50%; --glow-y:0%;
  --lift:0px; --rise:0px; --card-scale:1;
  /* One composed transform driven entirely by variables. Entrance and tilt both
     write to it, so neither can reset the other - which is what happened when
     the reveal rule set `transform:none` and silently killed the tilt. */
  transform:perspective(900px) rotateX(var(--tilt-x)) rotateY(var(--tilt-y))
    translateY(calc(var(--lift) + var(--rise))) scale(var(--card-scale));
  transform-style:preserve-3d;
  will-change:transform;
}
.card:hover,.card:focus-within{--lift:-6px}
/* The composed transform has to be restated at the same specificity as the
   generic reveal rule (`.js .rv`), or that rule's plain translateY wins and the
   tilt silently does nothing. */
.js .card.rv,.js .card.rv.in{
  transform:perspective(900px) rotateX(var(--tilt-x)) rotateY(var(--tilt-y))
    translateY(calc(var(--lift) + var(--rise))) scale(var(--card-scale))}
.js .card.rv{--rise:26px;--card-scale:.985}
.js .card.rv.in{--rise:0px;--card-scale:1}
.cards-tilt .card{transition:--tilt-x .16s ease-out,--tilt-y .16s ease-out,
  --lift .3s var(--ease),border-color .45s,box-shadow .45s}
/* Slower on the way out, so the card settles rather than snapping back. */
.cards-tilt .card.is-idle{transition:--tilt-x .55s var(--ease),--tilt-y .55s var(--ease),
  --lift .45s var(--ease),border-color .45s,box-shadow .45s}

/* light that follows the pointer */
.card-media::before{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;opacity:0;
  transition:opacity .35s ease;
  background:radial-gradient(circle at var(--glow-x) var(--glow-y),
    rgba(255,214,120,.32),transparent 58%)}
.card:hover .card-media::before,.card:focus-within .card-media::before{opacity:1}

/* image wipes up on entrance */
.js .card.rv .card-media img{clip-path:inset(100% 0 0 0);
  transition:clip-path .8s var(--ease) .12s,transform .8s var(--ease)}
.js .card.rv.in .card-media img{clip-path:inset(0 0 0 0)}

/* the CTA fills on hover and its label nudges forward */
.card .card-foot .btn{position:relative;overflow:hidden;z-index:2}
.card .card-foot .btn::after{
  content:"";position:absolute;inset:0;z-index:-1;background:var(--yellow);
  transform:translateY(101%);transition:transform .35s var(--ease)}
.card:hover .card-foot .btn::after,.card:focus-within .card-foot .btn::after{transform:none}
.card:hover .card-foot .btn,.card:focus-within .card-foot .btn{
  color:#1a1204;border-color:transparent}
.card:hover .card-tags .pill,.card:focus-within .card-tags .pill{
  transform:translateY(-2px)}
.card-tags .pill{transition:transform .35s var(--ease)}
.card:hover .price,.card:focus-within .price{color:var(--yellow)}
.price{transition:color .35s var(--ease)}

@media (prefers-reduced-motion:reduce),(hover:none){
  .card{transform:none!important}
  .js .card.rv .card-media img{clip-path:none;transition:none}
  .card-media::before{display:none}
  .card .card-foot .btn::after{display:none}
}

/* Trip hero was nearly a full screen with the title pinned low, so the facts row
   and the booking rail both started below the fold. */
.trek-hero{min-height:min(60svh,580px);padding-block:6rem clamp(1.4rem,3vw,2.2rem)}
@media (max-width:700px){.trek-hero{min-height:min(52svh,440px);padding-block:5.2rem 1.2rem}}
.trek-hero h1{font-size:clamp(1.95rem,5.2vw,3.9rem)}
.trek-hero .crumbs{margin-bottom:.7rem}
.trek-hero .trek-tags{margin-top:.9rem}
.trek-hero + section{padding-top:1.6rem!important}

/* --- checkout column placement --------------------------------------------
   Grid auto-placement put the order summary on the row after the traveller
   fieldsets, so it appeared near the bottom with a screen of empty column above
   it. Pin the summary to the top rows of column two and let the form flow down
   column one underneath. */
@media (min-width:1000px){
  .woocommerce-checkout form.checkout > *{grid-column:1}
  .woocommerce-checkout form.checkout > #order_review_heading{grid-column:2;grid-row:1}
  .woocommerce-checkout form.checkout > #order_review{
    grid-column:2;grid-row:2/span 50;position:sticky;top:96px;align-self:start}
}
/* The summary reads as a panel, not a bare table. */
.woocommerce-checkout #order_review{background:var(--ink-2);border:1px solid var(--line);
  border-radius:var(--r);padding:1.2rem}
.woocommerce-checkout #order_review_heading{margin-bottom:.7rem}
.woocommerce-checkout .woocommerce-checkout-review-order-table{margin:0}
.woocommerce-checkout .woocommerce-checkout-review-order-table th,
.woocommerce-checkout .woocommerce-checkout-review-order-table td{padding:.6rem .3rem}
.woocommerce-checkout .woocommerce-checkout-review-order-table .order-total th,
.woocommerce-checkout .woocommerce-checkout-review-order-table .order-total td{
  font-size:1.02rem;color:var(--paper)}

/* Retry help on the pay-for-order page. */
.tv-pay-help{background:var(--ink-2);border:1px solid var(--line);border-left:3px solid var(--yellow);
  border-radius:var(--r);padding:1.1rem 1.2rem;margin:0 0 1.6rem;max-width:62ch}
.tv-pay-help p{margin:0 0 .8rem;font-size:.9rem;color:var(--mist)}
.tv-pay-help strong{color:var(--paper)}
/* Payment method list reads as choices, not a bare radio list. */
.woocommerce-checkout #payment ul.payment_methods li{list-style:none;padding:.7rem .2rem;
  border-bottom:1px solid var(--line)}
.woocommerce-checkout #payment ul.payment_methods li:last-child{border-bottom:0}
.woocommerce-checkout #payment ul.payment_methods label{display:inline;font-size:.92rem;
  color:var(--paper);font-weight:700;letter-spacing:0;text-transform:none}
.woocommerce-checkout #payment div.payment_box p{font-size:.84rem;margin:0}

/* --- about page ------------------------------------------------------------ */
.about-hero{position:relative;isolation:isolate;padding-block:7.5rem clamp(2rem,4vw,3rem);
  overflow:hidden}
.about-hero-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2}
.about-hero::after{content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(180deg,rgba(11,13,12,.86),rgba(11,13,12,.55) 45%,var(--ink))}
.about-hero h1{font-size:clamp(2.2rem,5.4vw,4.2rem)}
.about-hero .lede{margin-top:1.1rem;max-width:60ch}
.about-stats{padding-block:0}
.about-stats-grid{margin-top:0;border-top:0;padding-top:0;
  border-bottom:1px solid var(--line);padding-bottom:1.6rem}
.about-stats-grid dd{font-size:clamp(1.4rem,2.4vw,1.9rem)}

.steps{list-style:none;margin:0;padding:0;display:grid;gap:1rem;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr))}
.steps li{display:flex;gap:.9rem;padding:1.2rem 1.2rem 1.3rem;border:1px solid var(--line);
  border-radius:var(--r);background:linear-gradient(180deg,var(--ink-2),rgba(20,24,21,.35))}
.step-n{font-family:Anton,sans-serif;font-size:1.05rem;color:var(--yellow);line-height:1;
  flex:0 0 auto;padding-top:.15rem}
.steps h3{font-size:1rem;margin-bottom:.4rem}
.steps p{margin:0;font-size:.88rem;color:var(--mist-dim)}

.place{padding:1.5rem 1.5rem 1.7rem;border:1px solid var(--line);border-radius:var(--r);
  background:var(--ink-2)}
.place h3{font-size:1.3rem;margin:.2rem 0 .6rem}
.place p{margin:0;color:var(--mist-dim);font-size:.92rem;line-height:1.6}

/* --- contact page ---------------------------------------------------------- */
.contact-layout{display:grid;gap:1.6rem;grid-template-columns:minmax(0,1fr)}
@media (min-width:960px){
  .contact-layout{grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);
    gap:2.4rem;align-items:start}
}
.contact-ways{display:grid;gap:.6rem;align-content:start}
.way{display:flex;align-items:center;gap:.85rem;padding:.9rem 1rem;border-radius:var(--r);
  border:1px solid var(--line);background:var(--ink-2);color:#e7ede7;
  transition:border-color .3s,background .3s,transform .3s var(--ease)}
.way:hover{border-color:rgba(255,193,7,.5);transform:translateX(3px)}
.way-static{cursor:default}
.way-static:hover{border-color:var(--line);transform:none}
.way-wa{border-color:rgba(37,211,102,.45)}
.way-wa:hover{border-color:#25d366}
.way-ico{width:38px;height:38px;flex:0 0 auto;border-radius:50%;background:rgba(255,255,255,.07);
  display:grid;place-items:center;font-size:1.05rem}
.way-wa .way-ico{background:rgba(37,211,102,.16)}
.way b{display:block;font-size:.94rem;color:var(--paper)}
.way small{display:block;font-size:.78rem;color:var(--mist-dim);margin-top:.12rem}
.contact-note{margin-top:.6rem;padding:1.1rem 1.15rem;border-radius:var(--r);
  border:1px solid var(--line);border-left:3px solid var(--yellow);background:var(--ink-2)}
.contact-note p{margin:0 0 .8rem;font-size:.88rem;color:var(--mist)}
.contact-note strong{color:var(--paper)}
.contact-note .socials{margin:0}

.contact-form{background:var(--ink-2);border:1px solid var(--line);border-radius:var(--r);
  padding:clamp(1.2rem,2.4vw,2rem)}
.contact-form h2{font-size:1.5rem;margin-bottom:.35rem}
.contact-form .note{margin:0 0 1.2rem}

/* Contact Form 7 in brand terms - it ships unstyled, which is the white box. */
.wpcf7 form{display:grid;gap:.9rem}
.wpcf7 p{margin:0}
.wpcf7 label{display:block;font-size:.74rem;font-weight:700;letter-spacing:.06em;
  color:#dfe6df;margin-bottom:.35rem}
.wpcf7 input[type=text],.wpcf7 input[type=email],.wpcf7 input[type=tel],
.wpcf7 input[type=url],.wpcf7 textarea,.wpcf7 select{
  width:100%;padding:.72rem .85rem;border-radius:10px;background:var(--ink-3);
  border:1px solid var(--line);color:var(--paper);font:inherit;font-size:.9rem}
.wpcf7 textarea{min-height:130px;resize:vertical}
.wpcf7 input:focus,.wpcf7 textarea:focus{outline:2px solid var(--yellow);outline-offset:1px}
.wpcf7 ::placeholder{color:var(--mist-dim)}
.wpcf7 input[type=submit]{width:auto;justify-self:start;background:var(--yellow);color:#1a1204;
  border:0;border-radius:999px;padding:.85rem 1.7rem;font-weight:800;letter-spacing:.09em;
  text-transform:uppercase;font-size:.78rem;cursor:pointer;
  box-shadow:0 10px 26px -12px rgba(255,193,7,.55);transition:background .25s,transform .25s var(--ease)}
.wpcf7 input[type=submit]:hover{background:#ffcf3d;transform:translateY(-2px)}
.wpcf7-spinner{filter:invert(1)}
.wpcf7 .wpcf7-not-valid-tip{color:#e8917c;font-size:.78rem;margin-top:.3rem}
.wpcf7 .wpcf7-response-output{border-radius:10px;border-width:1px;padding:.8rem 1rem;
  font-size:.86rem;color:var(--mist);margin:.4rem 0 0}

/* The trek filters set `hidden` on non-matching cards, but `.card` declares
   `display:flex`, and an author rule beats the user-agent rule for [hidden].
   Result: the count updated correctly while every card stayed on screen. */
[hidden]{display:none!important}

/* Contact Form 7 wraps each field in its own container, so the form's grid gap
   never applies between them - the fields ended up flush against each other. */
.wpcf7 form > p,.wpcf7 form > div{margin:0 0 .9rem}
.wpcf7 form > p:last-of-type,.wpcf7 form > div:last-of-type{margin-bottom:0}
.wpcf7-form-control-wrap{display:block;margin-bottom:.9rem}
.wpcf7 br{display:none}
.wpcf7 input[type=submit]{margin-top:.4rem}

/* Shared icon set: monochrome, inherits colour from its container. */
.way-ico .icon{width:19px;height:19px;fill:currentColor}
.way-wa .way-ico{color:#25d366}
.social .icon{width:18px;height:18px;fill:currentColor}
.wa-float .icon{width:28px;height:28px;fill:#04240f}

/* --- checkout: steps ------------------------------------------------------ */
.tv-step{display:flex;align-items:center;gap:.65rem;font-family:Anton,sans-serif;
  font-weight:400;text-transform:uppercase;letter-spacing:.03em;font-size:1.15rem;
  color:var(--paper);margin:0 0 1rem;padding-top:.2rem}
.tv-step span{flex:0 0 auto;width:28px;height:28px;border-radius:50%;background:var(--yellow);
  color:#1a1204;display:grid;place-items:center;font-size:.85rem}
.tv-step em{margin-left:auto;font-family:Montserrat,sans-serif;font-style:normal;
  font-size:.68rem;font-weight:800;letter-spacing:.14em;color:var(--mist-dim);
  text-transform:uppercase}
.woocommerce-checkout .woocommerce-billing-fields > h3,
.woocommerce-checkout #order_review_heading{display:none}
.woocommerce-checkout .woocommerce-additional-fields > h3{font-size:.95rem;
  color:var(--mist-dim);letter-spacing:.1em;margin:.4rem 0 .6rem}
.tv-travellers h3{display:none}
.tv-travellers{margin-top:1.8rem}

/* Trekker cards: three columns of fields on a wide screen so a booking for four
   does not run to four screens. */
@media (min-width:900px){
  .tv-fields{grid-template-columns:repeat(3,minmax(0,1fr))}
  .tv-field.tv-wide{grid-column:span 3}
  .tv-field.tv-half{grid-column:span 1}
}
.tv-traveller{padding:.85rem .95rem 1rem}
.tv-traveller legend{padding:0 .3rem}
.tv-traveller-n{font-size:.86rem}

/* Order panel heading is shown again (it reads "Your order") now that payment is
   no longer numbered as a step. */
.woocommerce-checkout #order_review_heading{display:block;font-family:Anton,sans-serif;
  text-transform:uppercase;letter-spacing:.03em;font-size:1.15rem;color:var(--paper);
  margin:0 0 .8rem}
.tv-panel-sub{font-family:Anton,sans-serif;font-weight:400;text-transform:uppercase;
  letter-spacing:.04em;font-size:.95rem;color:var(--mist-dim);
  margin:1.2rem 0 .4rem;padding-top:1rem;border-top:1px solid var(--line)}
.woocommerce-checkout .woocommerce-privacy-policy-text p{font-size:.74rem;color:var(--mist-dim)}

/* --- journal --------------------------------------------------------------
   The blog reuses the trek card (.card/.card-media/.card-body); what follows
   is only what an article needs on top of it. */
.page-section--top{padding-block:1.8rem 4rem}
.post-meta{margin:0;font-size:.72rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;
  color:var(--mist-dim)}
.post-meta .dot,.eyebrow .dot{opacity:.55;margin-inline:.2rem}
.post-card .card-body{gap:.55rem}
.post-card h3{font-size:1.02rem;line-height:1.25}
.post-more{margin-top:auto;padding-top:.5rem;font-size:.76rem;font-weight:800;letter-spacing:.1em;
  text-transform:uppercase;color:var(--yellow)}
.post-card:hover .post-more span{display:inline-block;transform:translateX(4px);transition:transform .3s var(--ease)}

/* Newest post: image beside the text instead of above it. */
.post-card--wide{margin-bottom:clamp(1rem,1.8vw,1.6rem)}
@media (min-width:900px){
  .post-card--wide{display:grid;grid-template-columns:1.05fr 1fr;align-items:stretch}
  .post-card--wide .card-media{aspect-ratio:auto;height:100%;min-height:320px}
  .post-card--wide .card-body{padding:clamp(1.4rem,2.4vw,2.4rem);justify-content:center;gap:.75rem}
  .post-card--wide h3{font-size:clamp(1.35rem,2.4vw,2rem);line-height:1.14}
  .post-card--wide .card-body > p:last-of-type{font-size:.95rem;max-width:52ch}
}

/* --- one article ---------------------------------------------------------- */
.post-head{padding-block:7rem 1.6rem;max-width:calc(var(--max) - 0px)}
.post-head h1{font-size:clamp(2rem,4.6vw,3.4rem);margin:.5rem 0 .9rem;max-width:22ch}
.post-hero{margin:0 auto 2.6rem;border-radius:var(--r);overflow:hidden;border:1px solid var(--line)}
.post-hero img{display:block;width:100%;height:clamp(220px,42vw,520px);object-fit:cover}
.post-body{max-width:70ch;color:var(--mist);font-size:1.02rem;line-height:1.75}
.post-body > *+*{margin-top:1.15rem}
.post-body h2{font-size:clamp(1.35rem,2.4vw,1.9rem);margin-top:2.6rem;color:var(--paper)}
.post-body h3{font-size:clamp(1.1rem,1.8vw,1.35rem);margin-top:2rem;color:var(--paper)}
.post-body a{color:var(--yellow);text-decoration:underline;text-underline-offset:3px}
.post-body ul,.post-body ol{padding-left:1.2rem}
.post-body li+li{margin-top:.45rem}
.post-body img{border-radius:var(--r);border:1px solid var(--line)}
.post-body blockquote{margin-left:0;padding:.2rem 0 .2rem 1.2rem;border-left:3px solid var(--yellow);
  color:var(--paper);font-size:1.06rem}
.post-body code{background:var(--ink-3);padding:.15rem .4rem;border-radius:6px;font-size:.9em}
.post-body hr{border:0;border-top:1px solid var(--line);margin-block:2.2rem}

.post-cta{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:1.2rem 2rem;
  margin:3rem 0 0;padding:clamp(1.4rem,2.4vw,2.2rem);border-radius:var(--r);
  border:1px solid var(--line);background:var(--ink-2)}
.post-cta h2{font-size:clamp(1.2rem,2.2vw,1.6rem);margin:0}
.post-cta p{margin:.5rem 0 0;color:var(--mist-dim);max-width:44ch}
.post-cta-actions{display:flex;flex-wrap:wrap;gap:.7rem}

/* --- pagination ----------------------------------------------------------- */
.pagination{margin-top:3rem}
.pagination .nav-links{display:flex;flex-wrap:wrap;gap:.5rem;align-items:center;justify-content:center}
.pagination .page-numbers{display:inline-flex;align-items:center;justify-content:center;min-width:42px;
  height:42px;padding:0 .9rem;border-radius:999px;border:1px solid var(--line);color:var(--mist);
  font-size:.8rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;transition:.2s var(--ease)}
.pagination .page-numbers:hover{border-color:var(--yellow);color:var(--yellow)}
.pagination .page-numbers.current{background:var(--yellow);border-color:transparent;color:#1a1204}
.pagination .screen-reader-text{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}

/* --- Har Ki Dun giveaway page --------------------------------------------- */
.hero--offer{min-height:min(94vh,880px)}
.offer-hero{position:relative;z-index:2;max-width:44rem}
.offer-flag{display:flex;flex-wrap:wrap;gap:.5rem;margin:0 0 1rem}
.offer-hero h1{font-size:clamp(2.4rem,6.4vw,5rem);line-height:.94}
.offer-hero h1 .accent{color:var(--yellow)}
.offer-hero .lede{margin:1rem 0 1.6rem}
.offer-closed{margin:1.2rem 0 1.6rem;color:var(--mist)}

.countdown{margin:0 0 1.7rem}
.clock{display:flex;gap:.55rem;margin-top:.6rem}
.clock span{display:flex;flex-direction:column;align-items:center;gap:.15rem;min-width:74px;
  padding:.7rem .6rem;border-radius:12px;border:1px solid var(--line);
  background:rgba(11,13,12,.55);backdrop-filter:blur(8px)}
.clock b{font-family:Anton,sans-serif;font-weight:400;font-size:1.9rem;line-height:1;color:var(--paper);
  font-variant-numeric:tabular-nums}
.clock small{font-size:.6rem;font-weight:800;letter-spacing:.18em;text-transform:uppercase;color:var(--mist-dim)}
@media (max-width:520px){.clock span{min-width:0;flex:1}.clock b{font-size:1.45rem}}

.offer-price-band{background:var(--ink-2);border-block:1px solid var(--line)}
.price-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,210px),1fr));
  gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.price-cell{background:var(--ink-2);padding:clamp(1.1rem,2vw,1.7rem)}
.price-cell--main{background:linear-gradient(140deg,rgba(255,193,7,.14),transparent 70%)}
.price-now{display:flex;align-items:baseline;gap:.6rem;flex-wrap:wrap;margin:.5rem 0 .35rem;
  font-family:Anton,sans-serif;font-size:clamp(1.8rem,3.4vw,2.6rem);color:var(--paper)}
.price-now s{font-size:.55em;color:var(--mist-dim)}
.price-big{margin:.5rem 0 .35rem;font-family:Anton,sans-serif;font-size:clamp(1.8rem,3.4vw,2.6rem);
  line-height:1;color:var(--yellow)}
.price-big small{font-size:.5em;color:var(--mist-dim)}
.price-big--sm{font-size:clamp(1.1rem,1.9vw,1.4rem);color:var(--paper);line-height:1.2}
.price-note{margin:0;font-size:.78rem;color:var(--mist-dim);line-height:1.5}

.entry-steps{list-style:none;margin:2.2rem 0 0;padding:0;display:grid;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,215px),1fr));gap:clamp(.9rem,1.6vw,1.3rem)}
.entry-step{position:relative;display:block;padding:1.3rem 1.2rem 1.4rem;border:1px solid var(--line);
  border-radius:var(--r);background:var(--ink-2);
  transition:border-color .3s var(--ease),transform .3s var(--ease)}
.entry-step:hover{border-color:rgba(255,193,7,.45);transform:translateY(-4px)}
.entry-step-n{display:block;font-family:Anton,sans-serif;font-size:1.5rem;color:var(--yellow);opacity:.55}
.entry-step h3{margin:.4rem 0 .35rem;font-size:1.02rem;color:var(--paper)}
.entry-step p{margin:0;font-size:.85rem;color:var(--mist-dim);line-height:1.55}

.tick{list-style:none;margin:0;padding:0;display:grid;gap:.7rem}
.tick li{position:relative;padding-left:1.9rem;color:var(--mist);font-size:.95rem}
.tick li::before{content:"";position:absolute;left:0;top:.3rem;width:1.1rem;height:1.1rem;border-radius:50%;
  background:var(--green);box-shadow:inset 0 0 0 2px rgba(255,255,255,.18)}
.tick li::after{content:"";position:absolute;left:.36rem;top:.55rem;width:.34rem;height:.6rem;
  border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg)}

.book-box{padding:clamp(1.3rem,2.4vw,2rem);border:1px solid var(--line);border-radius:var(--r);
  background:linear-gradient(150deg,rgba(96,124,52,.22),transparent 65%),var(--ink-3)}
.book-box h3{margin:.35rem 0 .6rem;font-size:clamp(1.2rem,2.2vw,1.6rem)}
.book-box p{color:var(--mist-dim);font-size:.9rem;line-height:1.6}

.enter-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(1.4rem,3vw,3rem);align-items:start}
@media (max-width:900px){.enter-grid{grid-template-columns:1fr}}
.fine{list-style:none;margin:1.4rem 0 0;padding:0;display:grid;gap:.5rem}
.fine li{position:relative;padding-left:1rem;font-size:.82rem;color:var(--mist-dim);line-height:1.55}
.fine li::before{content:"";position:absolute;left:0;top:.55rem;width:5px;height:5px;border-radius:50%;
  background:var(--yellow);opacity:.8}

.enter-form{padding:clamp(1.3rem,2.4vw,2rem);border:1px solid var(--line);border-radius:var(--r);
  background:var(--ink-2)}
.entry-form{display:grid;gap:.85rem}
.entry-form label{display:grid;gap:.35rem;font-size:.74rem;font-weight:800;letter-spacing:.13em;
  text-transform:uppercase;color:var(--mist-dim)}
.entry-form .opt{letter-spacing:.06em;text-transform:none;font-weight:600;opacity:.7}
.entry-form input[type=text],.entry-form input[type=tel],.entry-form input[type=email],
.entry-form textarea{width:100%;
  padding:.85rem 1rem;border-radius:11px;border:1px solid var(--line);background:var(--ink-3);
  color:var(--paper);font:inherit;font-size:.95rem;letter-spacing:normal;text-transform:none}
.entry-form input:focus,.entry-form textarea:focus{outline:0;border-color:var(--yellow)}
.entry-form .checks{border:1px solid var(--line);border-radius:11px;padding:.9rem 1rem;display:grid;gap:.6rem}
.entry-form legend{padding:0 .4rem;font-size:.7rem;font-weight:800;letter-spacing:.14em;
  text-transform:uppercase;color:var(--mist-dim)}
.entry-form .check{display:flex;align-items:center;gap:.6rem;font-size:.85rem;font-weight:600;
  letter-spacing:normal;text-transform:none;color:var(--mist)}
.entry-form .check input{width:18px;height:18px;accent-color:var(--yellow);flex:none}
.entry-form button{justify-content:center;margin-top:.3rem}
.entry-form .fine-print{margin:0;font-size:.72rem;color:var(--mist-dim);line-height:1.5}
.entry-form .hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.entry-error{margin:0 0 1rem;padding:.8rem 1rem;border-radius:11px;font-size:.86rem;
  border:1px solid rgba(255,193,7,.5);background:rgba(255,193,7,.1);color:#ffe9a8}
.entry-done h3{font-size:clamp(1.3rem,2.4vw,1.8rem);margin:0 0 .6rem}
.entry-done p{color:var(--mist-dim);margin:0 0 1.2rem;line-height:1.6}

/* --- giveaway: photographs, gate and parallax ------------------------------ */
.hero--offer{position:relative;overflow:hidden;min-height:min(96vh,900px);
  display:flex;align-items:center;isolation:isolate}
.offer-hero-media{position:absolute;inset:0;z-index:0;overflow:hidden}
.offer-hero-img{width:100%;height:100%;object-fit:cover;will-change:transform;transform:scale(1.16)}
/* The photograph has to lose enough contrast for Anton over it to stay legible. */
.hero--offer::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(100deg,rgba(11,13,12,.94) 0%,rgba(11,13,12,.78) 42%,rgba(11,13,12,.35) 72%,rgba(11,13,12,.6) 100%)}
.hero--offer > .wrap{position:relative;z-index:2}
@media (max-width:820px){
  /* On a phone the hero is a column, so the wash has to run down it, not across.
     It also stops being 96vh tall - the copy ended halfway up an empty screen. */
  .hero--offer{min-height:0;padding-block:6.5rem 3rem;align-items:flex-start}
  .hero--offer::after{background:linear-gradient(180deg,rgba(11,13,12,.55) 0%,rgba(11,13,12,.82) 48%,rgba(11,13,12,.95) 100%)}
}

/* --- the username gate ---------------------------------------------------- */
.gate{margin:1.6rem 0 0;max-width:34rem}
.gate label{display:block;font-size:.76rem;font-weight:800;letter-spacing:.13em;text-transform:uppercase;
  color:var(--mist);margin-bottom:.6rem}
.gate-row{display:flex;align-items:stretch;gap:.5rem;padding:.4rem;border-radius:999px;
  border:1px solid rgba(255,255,255,.22);background:rgba(11,13,12,.62);backdrop-filter:blur(10px)}
.gate-at{display:grid;place-items:center;padding-inline:.85rem 0;font-family:Anton,sans-serif;
  font-size:1.15rem;color:var(--mist-dim)}
.gate-row input{flex:1;min-width:0;border:0;background:transparent;color:var(--paper);
  font:inherit;font-size:1rem;padding:.55rem .2rem}
.gate-row input:focus{outline:0}
.gate-row input::placeholder{color:var(--mist-dim)}
.gate-row .btn{padding:.75rem 1.4rem;white-space:nowrap}
.gate-note{margin:.7rem 0 0;font-size:.8rem;color:var(--mist-dim)}
@media (max-width:520px){
  .gate-row{flex-wrap:wrap;border-radius:var(--r)}
  .gate-row .btn{width:100%;justify-content:center}
}

.entry-step-link{display:inline-block;margin-top:.7rem;font-size:.74rem;font-weight:800;
  letter-spacing:.1em;text-transform:uppercase;color:var(--yellow)}
.entry-step-link:hover{color:#ffd257}

/* --- full-bleed parallax bands -------------------------------------------- */
.px-band{position:relative;overflow:hidden;isolation:isolate;
  min-height:clamp(320px,52vh,540px);display:flex;align-items:center}
.px-band--tall{min-height:clamp(380px,64vh,640px)}
.px-band-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0;
  will-change:transform;transform:scale(1.16)}
.px-band::after{content:"";position:absolute;inset:0;z-index:1;
  background:linear-gradient(90deg,rgba(11,13,12,.88) 0%,rgba(11,13,12,.5) 55%,rgba(11,13,12,.25) 100%)}
/* The horizontal wash covers a phone-width band almost end to end - the photo
   read as a black box. Down the frame it leaves the picture visible. */
@media (max-width:820px){
  .px-band::after{background:linear-gradient(180deg,rgba(11,13,12,.25) 0%,rgba(11,13,12,.55) 55%,rgba(11,13,12,.9) 100%)}
  .px-band{align-items:flex-end;min-height:clamp(300px,58vh,420px)}
  .px-band-copy{padding-bottom:1.6rem}
}
.px-band-copy{position:relative;z-index:2;width:100%}
.px-band-copy h2{font-size:clamp(1.9rem,5vw,3.6rem);line-height:.98;margin:.4rem 0 0}

/* --- gallery -------------------------------------------------------------- */
.shots{margin-top:2.2rem;display:grid;gap:clamp(.8rem,1.5vw,1.2rem);
  grid-template-columns:repeat(auto-fit,minmax(min(100%,290px),1fr))}
.shot{position:relative;margin:0;border-radius:var(--r);overflow:hidden;border:1px solid var(--line);
  background:var(--ink-2)}
.shot img{display:block;width:100%;height:clamp(210px,24vw,290px);object-fit:cover;
  transition:transform .8s var(--ease)}
.shot:hover img{transform:scale(1.05)}
.shot figcaption{position:absolute;left:0;right:0;bottom:0;padding:2.4rem .9rem .8rem;
  font-size:.78rem;color:#eef3ee;line-height:1.4;
  background:linear-gradient(transparent,rgba(11,13,12,.9) 62%)}
/* The first shot earns a double-width cell on a wide screen. */
@media (min-width:1000px){
  .shots{grid-template-columns:repeat(3,1fr)}
  /* The lead shot gets width, not height - a taller first cell drags the whole
     row with it and leaves a hole beside it. */
  .shot:first-child{grid-column:span 2}
}

.enter-shot{margin:1.6rem 0 0;border-radius:var(--r);overflow:hidden;border:1px solid var(--line)}
.enter-shot img{display:block;width:100%;height:clamp(200px,26vw,300px);object-fit:cover}

/* --- trek reviews ---------------------------------------------------------- */
.stars{display:inline-flex;gap:.1rem;font-size:1rem;line-height:1}
.star{color:rgba(255,255,255,.22)}
.star--on{color:var(--yellow)}
.review-average{display:flex;align-items:center;gap:.6rem;margin:0;font-size:.95rem;color:var(--mist)}
.review-average b{font-family:Anton,sans-serif;font-size:1.4rem;color:var(--paper)}
.reviews{margin-top:2rem}
.review{padding:clamp(1.1rem,2vw,1.6rem);border:1px solid var(--line);border-radius:var(--r);
  background:var(--ink-2)}
.review h3{margin:.6rem 0 .5rem;font-size:1.05rem;color:var(--paper)}
.review-text{margin:0;font-size:.92rem;line-height:1.65;color:var(--mist)}
.review-by{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem;margin:1rem 0 0;font-size:.82rem;
  color:var(--mist-dim)}
.review-by b{color:var(--paper)}
.review-date{margin-left:auto}
.review-write{margin-top:2.4rem;padding:clamp(1.2rem,2.2vw,1.9rem);border:1px solid var(--line);
  border-radius:var(--r);background:linear-gradient(150deg,rgba(96,124,52,.16),transparent 62%),var(--ink-2)}
.review-write h3{margin:0 0 .5rem;font-size:clamp(1.1rem,2vw,1.4rem)}
.review-note{margin:0 0 1rem;font-size:.9rem;color:var(--mist-dim);max-width:56ch}
/* The plugin's own form ships light-theme styling; pull it onto the dark page. */
.review-write input[type=text],.review-write input[type=email],.review-write textarea,
.review-write select{width:100%;padding:.8rem 1rem;border-radius:11px;border:1px solid var(--line);
  background:var(--ink-3);color:var(--paper);font:inherit;font-size:.95rem}
.review-write label{font-size:.74rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase;
  color:var(--mist-dim)}
.review-write button,.review-write input[type=submit]{margin-top:.6rem;padding:.85rem 1.6rem;border:0;
  border-radius:999px;background:var(--yellow);color:#1a1204;font-weight:800;letter-spacing:.06em;
  text-transform:uppercase;cursor:pointer}