/* ============================================================
   DIBRA ATV ADVENTURE
   Palette sampled from the brand emblem.
   ============================================================ */

:root{
  /* --- core palette (from logo) --- */
  --ink:       #080706;
  --ink-2:     #100E0C;
  --ink-3:     #1A1613;
  --ink-4:     #241E19;
  --bone:      #EBE8E4;
  --sand:      #CABEB0;
  --ash:       #A29F9C;
  --steel:     #5E5C59;
  --mud:       #514538;
  --ember:     #5C2E18;
  --rust:      #A54D1B;
  --orange:    #D55F16;
  --hot:       #FF7A18;

  --line:      rgba(203,190,176,.14);
  --line-2:    rgba(203,190,176,.28);

  --f-disp: 'Anton', 'Arial Narrow', 'Haettenschweiler', Impact, sans-serif;
  --f-cond: 'Barlow Condensed', 'Arial Narrow', sans-serif;
  --f-body: 'Barlow', system-ui, -apple-system, 'Segoe UI', sans-serif;

  --wrap: 1240px;
  --pad: clamp(20px, 5vw, 64px);
  --rig-h: 132px;

  --ease: cubic-bezier(.16,1,.3,1);
  --ease-punch: cubic-bezier(.2,1.5,.4,1);
}

/* ============================================================
   RESET
   ============================================================ */
*,*::before,*::after{box-sizing:border-box}
html{
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
  overflow-x:hidden;
  overflow-x:clip;
}
body{
  margin:0;
  background:var(--ink);
  color:var(--bone);
  font-family:var(--f-body);
  font-size:clamp(15.5px,.55vw + 14px,17.5px);
  line-height:1.62;
  overflow-x:hidden;
  overflow-x:clip;
  -webkit-font-smoothing:antialiased;
}
img,svg{display:block;max-width:100%}
img{height:auto}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit;color:inherit}
h1,h2,h3,h4,p,ul,ol,figure,dl{margin:0}
ul,ol{padding:0;list-style:none}

::selection{background:var(--hot);color:#120A03}

.wrap{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:var(--pad)}
.wrap--nar{max-width:860px}

.skip{
  position:fixed;left:12px;top:-100px;z-index:999;
  background:var(--hot);color:#120A03;padding:10px 16px;border-radius:4px;
  font-family:var(--f-cond);font-weight:700;text-transform:uppercase;
  transition:top .2s;
}
.skip:focus{top:12px}

:focus-visible{outline:2px solid var(--hot);outline-offset:3px}

/* ============================================================
   GRAIN / ATMOSPHERE
   ============================================================ */
.grain{
  position:fixed;inset:-50%;z-index:9000;pointer-events:none;
  opacity:.05;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23n)'/%3E%3C/svg%3E");
  animation:grainShift 700ms steps(3) infinite;
}
@keyframes grainShift{
  0%  {transform:translate(0,0)}
  33% {transform:translate(-2%,1%)}
  66% {transform:translate(1%,-2%)}
  100%{transform:translate(0,0)}
}

/* ============================================================
   IGNITION / PRELOADER
   ============================================================ */
body.is-loading{overflow:hidden}

.ignition{
  position:fixed;inset:0;z-index:9500;
  background:var(--ink);
  display:grid;place-items:center;
  overflow:hidden;
}
.ignition.is-done{
  clip-path:inset(0 0 100% 0);
  transition:clip-path .75s cubic-bezier(.85,0,.15,1);
  pointer-events:none;
}
.ignition__beams{position:absolute;inset:0;display:grid;place-items:center}
.ignition__beams i{
  position:absolute;width:80vw;height:52vh;border-radius:50%;
  background:radial-gradient(ellipse at center,rgba(255,140,40,.34),transparent 62%);
  filter:blur(28px);opacity:0;
  animation:beamOn 2.1s var(--ease) forwards;
}
.ignition__beams i:nth-child(2){
  width:44vw;height:26vh;
  background:radial-gradient(ellipse at center,rgba(255,225,180,.5),transparent 66%);
  animation-delay:.1s;
}
@keyframes beamOn{
  0%{opacity:0;transform:scale(.3)}
  12%{opacity:1;transform:scale(1.03)}
  18%{opacity:.25}
  26%{opacity:1;transform:scale(1)}
  70%{opacity:.9}
  100%{opacity:0;transform:scale(1.5)}
}

.ignition__word{
  position:relative;z-index:2;
  font-family:var(--f-disp);
  font-size:clamp(52px,13vw,190px);
  line-height:.84;letter-spacing:-.02em;
  display:flex;flex-direction:column;align-items:center;
  /* lifted to clear the deck for the machine below it */
  transform:skewX(-7deg) translateY(-7vh);
}
.ignition__word span{display:block;opacity:0}
.ig-l{color:var(--bone);animation:slamIn .5s var(--ease-punch) .18s forwards}
.ig-r{
  color:var(--hot);font-size:.52em;letter-spacing:.16em;margin-top:.06em;
  text-shadow:0 0 34px rgba(255,122,24,.55);
  animation:slamIn .5s var(--ease-punch) .34s forwards;
}
@keyframes slamIn{
  0%{opacity:0;transform:scale(1.9) translateY(14px);filter:blur(16px)}
  70%{opacity:1;filter:blur(0)}
  100%{opacity:1;transform:scale(1) translateY(0);filter:blur(0)}
}

/* The preloader is a terrain run: mountain ridges, a rolling ground the
   machine tracks, a launch off the crest and an exit stage right. Sits
   behind the wordmark (z-index 1 vs 2) so the logo stays legible. */
.ignition__stage{
  position:absolute;inset:0;z-index:1;
  display:block;width:100%;height:100%;
}

.ignition__bar{
  position:absolute;z-index:4;left:50%;bottom:4vh;transform:translateX(-50%);
  width:min(240px,52vw);height:3px;background:rgba(203,190,176,.16);overflow:hidden;
}
.ignition__bar span{display:block;height:100%;width:0;background:var(--hot);box-shadow:0 0 14px var(--hot)}

.ignition__flash{
  position:absolute;inset:0;background:#fff;opacity:0;pointer-events:none;
}
.ignition__flash.pop{animation:flash .34s ease-out}
@keyframes flash{0%{opacity:.85}100%{opacity:0}}

/* ============================================================
   HEADER
   ============================================================ */
.hdr{
  position:fixed;top:0;left:0;right:0;z-index:400;
  display:flex;align-items:center;gap:clamp(12px,2vw,32px);
  padding:14px var(--pad);
  transition:background .35s var(--ease),backdrop-filter .35s,padding .35s var(--ease),border-color .35s;
  border-bottom:1px solid transparent;
}
.hdr.is-stuck{
  background:rgba(8,7,6,.86);
  backdrop-filter:blur(14px) saturate(120%);
  border-bottom-color:var(--line);
  padding-block:8px;
}
.hdr__logo img{width:auto;height:clamp(44px,5.4vw,62px);transition:height .35s var(--ease)}
.hdr.is-stuck .hdr__logo img{height:clamp(36px,4.2vw,46px)}

.hdr__nav{display:flex;gap:clamp(10px,1.5vw,26px);margin-left:auto}
.hdr__nav a{
  font-family:var(--f-cond);font-weight:600;font-size:16px;
  text-transform:uppercase;letter-spacing:.06em;color:var(--sand);
  padding:6px 2px;position:relative;white-space:nowrap;
  transition:color .2s;
}
.hdr__nav a::after{
  content:'';position:absolute;left:0;right:100%;bottom:0;height:2px;background:var(--hot);
  transition:right .3s var(--ease);
}
.hdr__nav a:hover,.hdr__nav a.is-active{color:var(--bone)}
.hdr__nav a:hover::after,.hdr__nav a.is-active::after{right:0}

.hdr__right{display:flex;align-items:center;gap:clamp(8px,1.2vw,16px);margin-left:auto}
.hdr__nav + .hdr__right{margin-left:0}

.lang{display:flex;align-items:center;gap:2px;font-family:var(--f-cond);font-weight:700}
.lang__btn{
  background:none;border:0;cursor:pointer;padding:5px 6px;
  color:var(--steel);letter-spacing:.08em;font-size:14px;transition:color .2s;
}
.lang__btn:hover{color:var(--sand)}
.lang__btn.is-on{color:var(--hot)}
.lang__sep{color:var(--steel);opacity:.5}

.burger{
  display:none;background:none;border:1px solid var(--line-2);border-radius:3px;
  width:42px;height:38px;cursor:pointer;padding:0;
  flex-direction:column;justify-content:center;align-items:center;gap:5px;
}
.burger i{display:block;width:18px;height:2px;background:var(--bone);transition:transform .3s var(--ease),opacity .2s}
.burger[aria-expanded="true"] i:nth-child(1){transform:translateY(7px) rotate(45deg)}
.burger[aria-expanded="true"] i:nth-child(2){opacity:0}
.burger[aria-expanded="true"] i:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* ============================================================
   BUTTONS
   ============================================================ */
.btn{
  --bg:var(--hot);
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  font-family:var(--f-cond);font-weight:800;font-style:italic;
  font-size:clamp(15px,.4vw + 14px,18px);
  text-transform:uppercase;letter-spacing:.05em;
  padding:14px 26px;border:0;cursor:pointer;
  background:var(--bg);color:#160A02;
  clip-path:polygon(0 0,100% 0,calc(100% - 12px) 100%,0 100%);
  position:relative;overflow:hidden;
  transition:transform .18s var(--ease-punch),box-shadow .25s,filter .2s;
}
.btn::before{
  content:'';position:absolute;inset:0;transform:translateX(-101%);
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.5),transparent);
  transition:transform .55s var(--ease);
}
.btn:hover{transform:translateY(-2px) skewX(-3deg);box-shadow:0 10px 30px -8px rgba(255,122,24,.6)}
.btn:hover::before{transform:translateX(101%)}
.btn:active{transform:translateY(0) scale(.98)}
.btn--hot{--bg:linear-gradient(100deg,var(--orange),var(--hot))}
.btn--ghost{
  background:transparent;color:var(--bone);
  box-shadow:inset 0 0 0 2px var(--line-2);
}
.btn--ghost:hover{color:var(--hot);box-shadow:inset 0 0 0 2px var(--hot)}
.btn--sm{padding:9px 16px;font-size:14px;gap:7px}
.btn--full{width:100%;padding-block:17px}

/* ============================================================
   HERO
   ============================================================ */
.hero{
  position:relative;min-height:100svh;
  display:flex;align-items:flex-end;
  padding:clamp(110px,14vh,180px) 0 clamp(120px,16vh,190px);
  overflow:hidden;isolation:isolate;
}
.hero__media{position:absolute;inset:-8% 0 -8%;z-index:-2}
.hero__img{
  width:100%;height:100%;object-fit:cover;object-position:52% 42%;
  filter:contrast(1.14) saturate(1.06) brightness(.82) sepia(.14) hue-rotate(-8deg);
  will-change:transform;
}
.hero__scrim{
  position:absolute;inset:0;
  background:
    radial-gradient(120% 90% at 78% 22%,rgba(255,122,24,.20),transparent 55%),
    linear-gradient(to top,var(--ink) 4%,rgba(8,7,6,.72) 38%,rgba(8,7,6,.36) 70%,rgba(8,7,6,.62) 100%),
    linear-gradient(100deg,rgba(8,7,6,.86) 0%,rgba(8,7,6,.32) 52%,transparent 78%);
}
.hero__ridge{
  position:absolute;left:0;right:0;bottom:-1px;height:26vh;pointer-events:none;
  background:linear-gradient(to top,var(--ink) 18%,transparent);
}
.hero__dust{position:absolute;inset:0;z-index:-1;width:100%;height:100%}

.hero__inner{position:relative;width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:var(--pad)}

.slam{opacity:0;transform:translateY(26px) scale(.97);filter:blur(6px)}
body.is-ready .slam{
  animation:slamUp .85s var(--ease) forwards;
  animation-delay:var(--d,0s);
}
@keyframes slamUp{to{opacity:1;transform:none;filter:blur(0)}}

.hero__eyebrow{
  display:inline-flex;align-items:center;gap:10px;
  font-family:var(--f-cond);font-weight:700;font-size:clamp(13px,.3vw + 12px,15px);
  text-transform:uppercase;letter-spacing:.34em;color:var(--sand);
  margin-bottom:clamp(14px,2vh,22px);
}
.dot{
  width:8px;height:8px;border-radius:50%;background:var(--hot);flex:none;
  box-shadow:0 0 0 0 rgba(255,122,24,.7);animation:pulse 2.2s infinite;
}
@keyframes pulse{
  70%{box-shadow:0 0 0 13px rgba(255,122,24,0)}
  100%{box-shadow:0 0 0 0 rgba(255,122,24,0)}
}

.hero__h1{
  position:relative;
  font-family:var(--f-disp);font-weight:400;
  font-size:clamp(52px,11.2vw,168px);
  line-height:.85;letter-spacing:-.018em;
  text-transform:uppercase;
  transform:skewX(-6deg);
  margin-bottom:clamp(18px,2.6vh,30px);
  text-shadow:0 12px 46px rgba(0,0,0,.6);
}
.hero__h1 .ln{display:block}
.hero__h1 .ln--hot{
  color:transparent;
  background:linear-gradient(96deg,var(--hot) 8%,var(--orange) 48%,#FFB067 92%);
  -webkit-background-clip:text;background-clip:text;
  filter:drop-shadow(0 0 32px rgba(255,122,24,.4));
}
.hero__h1 .rip{
  display:block;height:5px;width:0;margin-top:.14em;
  background:linear-gradient(90deg,var(--hot),var(--rust) 70%,transparent);
}
body.is-ready .hero__h1 .rip{animation:ripOut .9s var(--ease) .8s forwards}
@keyframes ripOut{to{width:min(420px,54%)}}

.hero__sub{
  max-width:44ch;color:#CFC9C2;
  font-size:clamp(16px,.5vw + 15px,20px);
  margin-bottom:clamp(24px,3.4vh,38px);
}

.hero__acts{display:flex;flex-wrap:wrap;gap:12px;margin-bottom:clamp(30px,5vh,52px)}

.hero__stats{
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  gap:clamp(10px,2vw,28px);max-width:720px;
  border-top:1px solid var(--line);padding-top:clamp(14px,2vh,22px);
}
.hero__stats li{display:flex;flex-direction:column;gap:1px}
.hero__stats b{
  font-family:var(--f-disp);font-size:clamp(24px,3.2vw,42px);line-height:1;
  color:var(--bone);letter-spacing:-.01em;
}
.hero__stats b i{font-style:normal;font-size:.46em;color:var(--hot);margin-left:.1em}
.hero__stats span{
  font-family:var(--f-cond);font-size:clamp(11.5px,.25vw + 11px,13.5px);
  text-transform:uppercase;letter-spacing:.14em;color:var(--steel);line-height:1.3;
}

.hero__scroll{
  /* pinned to the right gutter so it never collides with the stat row */
  position:absolute;right:var(--pad);bottom:calc(var(--rig-h) - 6px);
  display:flex;flex-direction:column;align-items:center;gap:7px;z-index:3;
  font-family:var(--f-cond);font-weight:700;font-size:12px;
  text-transform:uppercase;letter-spacing:.28em;color:var(--steel);
  opacity:0;transition:color .2s;
}
body.is-ready .hero__scroll{animation:fadeIn .8s ease 1.5s forwards}
.hero__scroll:hover{color:var(--hot)}
.hero__scroll svg{animation:bob 1.9s var(--ease) infinite}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(7px)}}
@keyframes fadeIn{to{opacity:1}}

/* ============================================================
   MARQUEE
   ============================================================ */
.marq{
  background:linear-gradient(96deg,var(--orange),var(--hot));
  color:#160A02;overflow:hidden;
  border-block:2px solid var(--ink);
  transform:rotate(-.6deg);
  margin-block:-14px;position:relative;z-index:5;
}
.marq__track{
  display:flex;gap:0;width:max-content;
  animation:marq 34s linear infinite;
  padding-block:11px;
}
.marq:hover .marq__track{animation-play-state:paused}
.marq__track span{
  font-family:var(--f-disp);font-size:clamp(15px,1.5vw,22px);
  text-transform:uppercase;letter-spacing:.06em;
  padding-inline:clamp(14px,2vw,26px);white-space:nowrap;
  display:flex;align-items:center;gap:clamp(14px,2vw,26px);
}
.marq__track span::after{content:'';width:9px;height:9px;background:#160A02;transform:rotate(45deg);flex:none}
@keyframes marq{to{transform:translateX(-50%)}}

/* ============================================================
   SECTION SHELL + HEADINGS
   ============================================================ */
.sec{position:relative;padding-block:clamp(74px,11vh,140px)}
.sec--tours{padding-top:clamp(64px,9vh,110px)}

.shead{margin-bottom:clamp(34px,5vh,60px);position:relative}
.shead__no{
  display:block;font-family:var(--f-disp);font-size:clamp(13px,.3vw + 12px,15px);
  letter-spacing:.4em;color:var(--rust);margin-bottom:10px;
}
.shead__t{
  font-family:var(--f-disp);font-weight:400;
  font-size:clamp(38px,6.6vw,92px);line-height:.9;
  text-transform:uppercase;letter-spacing:-.015em;
  transform:skewX(-6deg);
}
.shead__t::after{
  content:'';display:block;width:64px;height:4px;margin-top:.22em;
  background:linear-gradient(90deg,var(--hot),transparent);
}
.shead__l{max-width:52ch;margin-top:16px;color:var(--ash);font-size:clamp(16px,.4vw + 15px,19px)}

/* --- reveal on scroll --- */
.reveal{
  opacity:0;transform:translateY(38px);
  transition:opacity .7s var(--ease),transform .7s var(--ease);
  transition-delay:calc(var(--i,0) * 70ms);
}
.reveal.in{opacity:1;transform:none}

/* ============================================================
   TOURS
   ============================================================ */
.tours{
  display:grid;gap:clamp(16px,2vw,26px);
  grid-template-columns:repeat(2,minmax(0,1fr));
}
.tour{
  position:relative;background:var(--ink-2);
  border:1px solid var(--line);
  clip-path:polygon(0 0,100% 0,100% calc(100% - 22px),calc(100% - 22px) 100%,0 100%);
  overflow:hidden;
  transition:transform .4s var(--ease),border-color .3s,background .3s;
}
.tour:nth-child(odd){transform:rotate(-.35deg)}
.tour:nth-child(even){transform:rotate(.3deg)}
.tour:hover{transform:rotate(0) translateY(-6px);border-color:rgba(255,122,24,.45);background:var(--ink-3)}
.tour--wide{grid-column:span 2;display:grid;grid-template-columns:1.05fr .95fr}

.tour__media{position:relative;aspect-ratio:16/10;overflow:hidden;background:var(--ink-3)}
.tour--wide .tour__media{aspect-ratio:auto;height:100%;min-height:340px}
.tour__media img{
  width:100%;height:100%;object-fit:cover;
  filter:contrast(1.1) saturate(.9) brightness(.86);
  transition:transform .8s var(--ease),filter .5s;
}
.tour:hover .tour__media img{transform:scale(1.07);filter:contrast(1.14) saturate(1.05) brightness(.95)}
.tour__media::after{
  content:'';position:absolute;inset:0;
  background:linear-gradient(to top,rgba(8,7,6,.9),transparent 58%);
}

.tour__lvl{
  position:absolute;left:0;top:16px;z-index:2;
  font-family:var(--f-cond);font-weight:800;font-style:italic;font-size:12.5px;
  text-transform:uppercase;letter-spacing:.12em;
  padding:5px 14px 5px 12px;color:#160A02;
  clip-path:polygon(0 0,100% 0,calc(100% - 9px) 100%,0 100%);
}
.lvl--1{background:var(--sand)}
.lvl--2{background:var(--hot)}
.lvl--3{background:#D93A0F;color:#FFE9DC}

.tour__flag{
  position:absolute;right:-30px;top:16px;z-index:2;
  transform:rotate(34deg);
  background:var(--bone);color:var(--ink);
  font-family:var(--f-cond);font-weight:800;font-size:11.5px;
  text-transform:uppercase;letter-spacing:.14em;
  padding:5px 34px;
}
.tour__flag--top{background:var(--hot);color:#160A02}

.tour__body{padding:clamp(20px,2.4vw,30px) clamp(20px,2.4vw,32px) clamp(24px,3vw,34px)}
.tour--wide .tour__body{display:flex;flex-direction:column;justify-content:center}

.tour__meta{
  display:flex;align-items:center;gap:9px;
  font-family:var(--f-cond);font-weight:600;font-size:13.5px;
  text-transform:uppercase;letter-spacing:.14em;color:var(--hot);
  margin-bottom:9px;
}
.tour__meta em{font-style:normal;color:var(--steel)}
.tour__price{
  font-weight:800;font-style:italic;letter-spacing:.08em;
  color:var(--bone);white-space:nowrap;
}
.tour__t{
  font-family:var(--f-disp);font-weight:400;
  font-size:clamp(25px,2.7vw,40px);line-height:.98;
  text-transform:uppercase;letter-spacing:-.01em;transform:skewX(-4deg);
  margin-bottom:12px;
}
.tour__d{color:var(--ash);font-size:clamp(15px,.3vw + 14px,16.5px);margin-bottom:18px}

.tour__tags{display:flex;flex-wrap:wrap;gap:7px;margin-bottom:22px}
.tour__tags li{
  font-family:var(--f-cond);font-weight:600;font-size:12.5px;
  text-transform:uppercase;letter-spacing:.1em;color:var(--sand);
  border:1px solid var(--line-2);padding:3px 11px;border-radius:2px;
}

.tour__cta{
  display:inline-flex;align-items:center;gap:11px;
  font-family:var(--f-cond);font-weight:800;font-style:italic;font-size:15.5px;
  text-transform:uppercase;letter-spacing:.06em;color:var(--bone);
  transition:color .25s,gap .25s var(--ease);
}
.tour__cta svg{transition:transform .3s var(--ease)}
.tour__cta:hover{color:var(--hot);gap:16px}
.tour__cta:hover svg{transform:translateX(3px)}

.tours__note{
  margin-top:clamp(28px,4vh,44px);text-align:center;
  color:var(--steel);font-size:15.5px;max-width:60ch;margin-inline:auto;
}

/* ============================================================
   DESTINATIONS & PRICES
   Poster-style rows: orange-outlined pill, price in a solid slab
   with a torn leading edge.
   ============================================================ */
.sec--rates{background:linear-gradient(180deg,transparent,rgba(84,69,56,.12) 50%,transparent)}

.rates{display:grid;gap:clamp(9px,1.2vh,13px)}

.rate__btn{
  display:grid;grid-template-columns:auto 1fr auto;align-items:center;
  gap:clamp(12px,2.2vw,22px);
  width:100%;text-align:left;cursor:pointer;
  background:rgba(26,22,19,.5);
  border:1px solid rgba(213,95,22,.45);
  border-radius:999px;padding-left:clamp(16px,2.4vw,26px);
  overflow:hidden;color:var(--bone);
  transition:border-color .28s var(--ease),background .28s var(--ease),
             transform .28s var(--ease),box-shadow .28s var(--ease);
}
.rate__btn:hover,.rate__btn:focus-visible{
  border-color:var(--hot);background:rgba(213,95,22,.1);
  transform:translateX(6px);
  box-shadow:-6px 0 0 0 var(--hot),0 10px 30px -14px rgba(255,122,24,.5);
  outline:none;
}

.rate__ico{width:clamp(22px,3vw,28px);height:clamp(22px,3vw,28px);color:var(--orange);flex:none;
  transition:color .28s var(--ease),transform .28s var(--ease)}
.rate__btn:hover .rate__ico{color:var(--hot);transform:scale(1.1) rotate(-4deg)}

.rate__name{
  font-family:var(--f-disp);font-weight:400;text-transform:uppercase;
  letter-spacing:.015em;line-height:1.12;
  font-size:clamp(15px,2.5vw,25px);
  padding:clamp(13px,1.8vh,19px) 0;
}

.rate__price{
  align-self:stretch;display:flex;align-items:center;justify-content:flex-end;
  background:var(--orange);color:#141210;
  font-family:var(--f-disp);font-style:italic;
  font-size:clamp(15px,2.5vw,25px);letter-spacing:.01em;white-space:nowrap;
  padding:0 clamp(16px,2.4vw,30px) 0 clamp(24px,4vw,48px);
  clip-path:polygon(clamp(10px,1.6vw,20px) 0,100% 0,100% 100%,0 100%);
  transition:background .28s var(--ease);
}
.rate__btn:hover .rate__price{background:var(--hot)}

.rates__note{
  margin-top:clamp(26px,3.6vh,40px);text-align:center;
  color:var(--steel);font-size:15.5px;max-width:64ch;margin-inline:auto;
}

/* keep the single-row pill on phones — the name just wraps */
@media (max-width:560px){
  .rate__btn{padding-left:14px;gap:11px}
  .rate__btn:hover,.rate__btn:focus-visible{transform:none;box-shadow:0 0 0 1px var(--hot)}
  .rate__ico{width:20px;height:20px}
  .rate__name{font-size:14.5px;letter-spacing:0;padding:11px 0;line-height:1.2}
  .rate__price{font-size:15px;padding:0 13px 0 21px;
    clip-path:polygon(9px 0,100% 0,100% 100%,0 100%)}
}

/* ============================================================
   WHY / FEATURES
   ============================================================ */
.sec--why{isolation:isolate;overflow:hidden}
.why__bg{position:absolute;inset:0;z-index:-1;opacity:.16}
.why__bg img{width:100%;height:100%;object-fit:cover;filter:grayscale(.3) contrast(1.2)}
.sec--why::after{
  content:'';position:absolute;inset:0;z-index:-1;
  background:linear-gradient(to bottom,var(--ink),rgba(8,7,6,.62) 40%,var(--ink));
}

.feats{display:grid;gap:1px;grid-template-columns:repeat(3,minmax(0,1fr));background:var(--line)}
.feat{
  background:rgba(8,7,6,.72);
  padding:clamp(24px,2.8vw,38px) clamp(20px,2.4vw,32px);
  transition:background .35s,transform .35s var(--ease);
  backdrop-filter:blur(2px);
}
.feat:hover{background:var(--ink-3);transform:translateY(-4px)}
.feat__ic{
  display:grid;place-items:center;width:50px;height:50px;margin-bottom:18px;
  color:var(--hot);border:1px solid rgba(255,122,24,.35);
  clip-path:polygon(0 0,100% 0,100% calc(100% - 11px),calc(100% - 11px) 100%,0 100%);
  transition:background .3s,color .3s;
}
.feat__ic svg{width:25px;height:25px}
.feat:hover .feat__ic{background:var(--hot);color:#160A02;border-color:var(--hot)}
.feat h3{
  font-family:var(--f-cond);font-weight:800;font-style:italic;
  font-size:clamp(19px,1.4vw,23px);text-transform:uppercase;letter-spacing:.02em;
  margin-bottom:9px;
}
.feat p{color:var(--ash);font-size:15.5px}

/* ============================================================
   SPLIT / ABOUT
   ============================================================ */
.split{
  display:grid;grid-template-columns:1fr 1fr;align-items:center;
  gap:clamp(28px,4vw,72px);
  max-width:var(--wrap);margin-inline:auto;
  padding:clamp(50px,8vh,100px) var(--pad);
}
.split__media{position:relative;aspect-ratio:4/3;overflow:hidden;transform:rotate(-1deg)}
.split__media::after{
  content:'';position:absolute;inset:0;
  box-shadow:inset 0 0 0 1px var(--line-2),inset 0 -80px 90px -40px var(--ink);
}
.split__media img{width:100%;height:100%;object-fit:cover;filter:contrast(1.12) saturate(.94) brightness(.9)}
.split__tape{
  position:absolute;left:-14px;bottom:26px;z-index:2;
  background:var(--hot);color:#160A02;
  font-family:var(--f-cond);font-weight:800;font-style:italic;font-size:14px;
  text-transform:uppercase;letter-spacing:.16em;
  padding:7px 20px;transform:rotate(-2.5deg);
}
.split__t{
  font-family:var(--f-disp);font-weight:400;
  font-size:clamp(30px,4.2vw,60px);line-height:.94;
  text-transform:uppercase;transform:skewX(-5deg);margin-bottom:20px;
}
.split__t em{font-style:normal;color:var(--hot);display:block}
.split__body p{color:var(--ash);margin-bottom:16px;max-width:46ch}
.split__body .btn{margin-top:10px}

/* ============================================================
   GALLERY
   ============================================================ */
.gal{
  display:grid;gap:6px;
  grid-template-columns:repeat(4,minmax(0,1fr));
  grid-auto-rows:clamp(120px,15vw,210px);
  padding-inline:clamp(6px,1.4vw,18px);
}
.gal__i{position:relative;overflow:hidden;background:var(--ink-3);margin:0}
.gal__i:nth-child(1),.gal__i:nth-child(6){grid-column:span 2;grid-row:span 2}
.gal__i:nth-child(9){grid-column:span 2}
.gal__i img{
  width:100%;height:100%;object-fit:cover;
  filter:grayscale(.55) contrast(1.16) brightness(.78);
  transition:transform .9s var(--ease),filter .5s;
}
.gal__i::after{
  content:'';position:absolute;inset:0;
  background:linear-gradient(140deg,rgba(255,122,24,.32),transparent 60%);
  opacity:0;transition:opacity .4s;
}
.gal__i:hover img{transform:scale(1.09);filter:grayscale(0) contrast(1.14) brightness(1)}
.gal__i:hover::after{opacity:1}

.gal__note{
  margin-top:clamp(24px,3.4vh,40px);text-align:center;
  font-family:var(--f-cond);font-weight:700;font-size:clamp(16px,.4vw + 15px,19px);
  text-transform:uppercase;letter-spacing:.14em;color:var(--steel);
}
.gal__note a{color:var(--hot);border-bottom:2px solid transparent;transition:border-color .25s}
.gal__note a:hover{border-bottom-color:var(--hot)}

/* ============================================================
   STEPS
   ============================================================ */
.steps{display:grid;gap:clamp(16px,2.4vw,32px);grid-template-columns:repeat(3,minmax(0,1fr));counter-reset:s}
.step{position:relative;padding-top:26px;border-top:2px solid var(--line-2);transition:border-color .35s}
.step:hover{border-top-color:var(--hot)}
.step__n{
  display:block;font-family:var(--f-disp);
  font-size:clamp(44px,5.4vw,78px);line-height:.82;
  color:transparent;-webkit-text-stroke:1.5px var(--ember);
  margin-bottom:14px;transition:-webkit-text-stroke-color .35s,color .35s;
}
.step:hover .step__n{-webkit-text-stroke-color:var(--hot)}
.step h3{
  font-family:var(--f-disp);font-size:clamp(22px,2.2vw,32px);
  text-transform:uppercase;letter-spacing:.01em;transform:skewX(-5deg);
  margin-bottom:10px;
}
.step p{color:var(--ash);font-size:15.5px}

/* ============================================================
   FAQ
   ============================================================ */
.sec--faq{background:var(--ink-2);border-block:1px solid var(--line)}
.faq{border-top:1px solid var(--line)}
.faq__i{border-bottom:1px solid var(--line)}
.faq__i summary{
  display:flex;align-items:center;justify-content:space-between;gap:20px;
  padding:20px 4px;cursor:pointer;list-style:none;
  font-family:var(--f-cond);font-weight:700;
  font-size:clamp(17px,1.3vw,21px);text-transform:uppercase;letter-spacing:.02em;
  transition:color .25s;
}
.faq__i summary::-webkit-details-marker{display:none}
.faq__i summary:hover{color:var(--hot)}
.faq__i summary i{
  position:relative;flex:none;width:20px;height:20px;
}
.faq__i summary i::before,.faq__i summary i::after{
  content:'';position:absolute;left:50%;top:50%;background:var(--hot);
  transform:translate(-50%,-50%);transition:transform .3s var(--ease),opacity .2s;
}
.faq__i summary i::before{width:16px;height:2px}
.faq__i summary i::after{width:2px;height:16px}
.faq__i[open] summary i::after{transform:translate(-50%,-50%) rotate(90deg);opacity:0}
.faq__i[open] summary{color:var(--hot)}
.faq__i p{padding:0 4px 24px;color:var(--ash);max-width:72ch;animation:faqIn .4s var(--ease)}
@keyframes faqIn{from{opacity:0;transform:translateY(-8px)}}

/* ============================================================
   CONTACT
   ============================================================ */
.sec--contact{isolation:isolate;overflow:hidden;padding-bottom:clamp(96px,14vh,170px)}
.contact__bg{position:absolute;inset:0;z-index:-1}
.contact__bg img{width:100%;height:100%;object-fit:cover;filter:contrast(1.2) saturate(1.1) brightness(.5)}
.sec--contact::after{
  content:'';position:absolute;inset:0;z-index:-1;
  background:linear-gradient(to bottom,var(--ink) 2%,rgba(8,7,6,.82) 34%,rgba(8,7,6,.9));
}

.contact{display:grid;grid-template-columns:1fr 1fr;gap:clamp(30px,4vw,70px);align-items:start}
.contact__t{
  font-family:var(--f-disp);font-weight:400;
  font-size:clamp(34px,5vw,72px);line-height:.9;
  text-transform:uppercase;transform:skewX(-6deg);margin-bottom:18px;
}
.contact__t em{font-style:normal;color:var(--hot);display:block;filter:drop-shadow(0 0 26px rgba(255,122,24,.35))}
.contact__l{color:var(--ash);max-width:42ch;margin-bottom:clamp(24px,3.4vh,36px)}

.contact__list{display:grid;gap:1px;background:var(--line);border:1px solid var(--line)}
.contact__list a{
  display:flex;align-items:center;gap:14px;
  padding:15px 18px;background:rgba(8,7,6,.75);
  transition:background .28s,transform .28s var(--ease);
}
.contact__list a:hover{background:var(--ink-3);transform:translateX(5px)}
.contact__list svg{width:22px;height:22px;flex:none;color:var(--hot)}
.contact__list b{
  font-family:var(--f-cond);font-weight:700;font-size:18px;letter-spacing:.02em;
  margin-right:auto;
}
.contact__list small{
  font-family:var(--f-cond);font-size:12.5px;text-transform:uppercase;
  letter-spacing:.16em;color:var(--steel);
}

/* --- booking form --- */
.bform{
  background:rgba(16,14,12,.9);
  border:1px solid var(--line-2);
  padding:clamp(22px,2.6vw,36px);
  clip-path:polygon(0 0,100% 0,100% calc(100% - 26px),calc(100% - 26px) 100%,0 100%);
  backdrop-filter:blur(6px);
}
.bform__row{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.fld{display:block;margin-bottom:14px}
.fld > span{
  display:block;margin-bottom:6px;
  font-family:var(--f-cond);font-weight:700;font-size:13px;
  text-transform:uppercase;letter-spacing:.16em;color:var(--sand);
}
.fld input,.fld select,.fld textarea{
  width:100%;background:var(--ink);border:1px solid var(--line-2);
  padding:12px 14px;border-radius:0;color:var(--bone);
  font-size:16px;transition:border-color .25s,box-shadow .25s,background .25s;
}
.fld textarea{resize:vertical;min-height:88px}
.fld select{appearance:none;cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23A29F9C' stroke-width='2'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 14px center;padding-right:38px;
}
.fld input:focus,.fld select:focus,.fld textarea:focus{
  outline:0;border-color:var(--hot);box-shadow:0 0 0 3px rgba(255,122,24,.16);background:var(--ink-2);
}
.fld input:user-invalid{border-color:#D93A0F}
.fld input::placeholder,.fld textarea::placeholder{color:var(--steel)}
input[type=date]::-webkit-calendar-picker-indicator{filter:invert(.7) sepia(1) saturate(4) hue-rotate(340deg);cursor:pointer}
.bform .btn{margin-top:6px}
.bform__fine{margin-top:12px;font-size:13px;color:var(--steel);line-height:1.5}

/* --- where we are: address card + live map --- */
.locate{
  display:grid;grid-template-columns:minmax(0,.86fr) minmax(0,1.14fr);
  gap:1px;background:var(--line-2);
  margin-top:clamp(34px,5vh,64px);
  border:1px solid var(--line-2);
  clip-path:polygon(0 0,100% 0,100% calc(100% - 26px),calc(100% - 26px) 100%,0 100%);
}
.locate__card{
  background:rgba(16,14,12,.94);
  padding:clamp(24px,2.8vw,40px);
  display:flex;flex-direction:column;align-items:flex-start;
  backdrop-filter:blur(6px);
}
.locate__eyebrow{
  font-family:var(--f-cond);font-weight:700;font-size:12.5px;
  text-transform:uppercase;letter-spacing:.3em;color:var(--rust);
  margin-bottom:8px;
}
.locate__t{
  font-family:var(--f-disp);font-weight:400;
  font-size:clamp(26px,2.8vw,42px);line-height:.95;
  text-transform:uppercase;transform:skewX(-5deg);margin-bottom:16px;
}
.locate__addr{font-style:normal;display:block;margin-bottom:12px}
.locate__addr b{
  display:block;font-family:var(--f-cond);font-weight:700;
  font-size:clamp(17px,1.2vw,21px);letter-spacing:.02em;color:var(--bone);
}
.locate__addr span{
  display:block;font-family:var(--f-cond);font-size:15px;
  text-transform:uppercase;letter-spacing:.14em;color:var(--steel);margin-top:3px;
}
.locate__hint{color:var(--ash);font-size:15.5px;max-width:38ch;margin-bottom:14px}
.locate__geo{
  font-family:var(--f-cond);font-weight:600;font-size:13.5px;
  letter-spacing:.16em;color:var(--steel);margin-bottom:auto;
  padding-bottom:20px;
}
.locate__geo span{color:var(--hot);margin-right:7px}
.locate__acts{display:flex;flex-wrap:wrap;gap:10px}

.locate__map{position:relative;background:var(--ink-3);min-height:340px}
.locate__map iframe{
  position:absolute;inset:0;width:100%;height:100%;border:0;
  /* knock the daylight out of the map so it sits in the dark palette
     without becoming unreadable */
  filter:grayscale(.22) contrast(1.04) brightness(.92) saturate(.94);
}

/* ============================================================
   FOOTER
   ============================================================ */
.ftr{
  background:var(--ink-2);border-top:1px solid var(--line);
  padding-top:clamp(40px,6vh,64px);
  padding-bottom:calc(var(--rig-h) + 16px);
}
.ftr__in{
  display:flex;flex-wrap:wrap;align-items:center;gap:clamp(20px,3vw,48px);
  padding-bottom:clamp(26px,4vh,40px);
}
.ftr__brand{display:flex;align-items:center;gap:16px;margin-right:auto}
.ftr__brand img{width:auto;height:64px}
.ftr__brand p{
  font-family:var(--f-cond);font-weight:600;font-size:15px;
  text-transform:uppercase;letter-spacing:.1em;color:var(--steel);max-width:22ch;
}
.ftr__nav{display:flex;flex-wrap:wrap;gap:6px 20px}
.ftr__nav a{
  font-family:var(--f-cond);font-weight:600;font-size:14.5px;
  text-transform:uppercase;letter-spacing:.1em;color:var(--sand);transition:color .2s;
}
.ftr__nav a:hover{color:var(--hot)}
.ftr__soc{display:flex;gap:8px}
.ftr__soc a{
  display:grid;place-items:center;width:42px;height:42px;
  border:1px solid var(--line-2);color:var(--sand);
  transition:color .25s,border-color .25s,background .25s,transform .25s var(--ease);
}
.ftr__soc a svg{width:20px;height:20px}
.ftr__soc a:hover{color:#160A02;background:var(--hot);border-color:var(--hot);transform:translateY(-3px)}

.ftr__legal{
  display:flex;flex-wrap:wrap;gap:10px 24px;justify-content:space-between;
  border-top:1px solid var(--line);padding-top:20px;
  font-family:var(--f-cond);font-size:13.5px;text-transform:uppercase;
  letter-spacing:.1em;color:var(--steel);
}
.ftr__legal a{transition:color .2s}
.ftr__legal a:hover{color:var(--hot)}

/* ============================================================
   THE TRAIL RIG — scroll-driven quad
   ============================================================ */
.rig{
  position:fixed;left:0;right:0;bottom:0;z-index:300;
  height:var(--rig-h);pointer-events:none;
  transition:transform .5s var(--ease),opacity .4s;
}
.rig::before{
  content:'';position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(to top,rgba(8,7,6,.94) 34%,rgba(8,7,6,.5) 68%,transparent);
}
.rig__svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}

.rig__mark{pointer-events:auto;cursor:pointer}
.rig__mark .flag{fill:#2E2721;transition:fill .3s}
.rig__mark .pole{stroke:#4A4038;stroke-width:2;transition:stroke .3s}
.rig__mark .lbl{
  font-family:'Barlow Condensed',sans-serif;font-size:12.5px;font-weight:700;
  text-transform:uppercase;letter-spacing:.12em;fill:#6B6058;
  transition:fill .3s;text-anchor:middle;
}
.rig__mark.on .flag{fill:var(--hot)}
.rig__mark.on .pole{stroke:var(--hot)}
.rig__mark.on .lbl{fill:var(--bone)}
.rig__mark:hover .lbl{fill:var(--hot)}
.rig__mark:hover .flag{fill:var(--sand)}

/* --- whatsapp: a static button that lives in the hero, not a floater --- */
.wa-static{
  display:inline-flex;align-items:center;gap:11px;
  padding:13px 22px 13px 15px;
  background:#25D366;color:#05330F;
  font-family:var(--f-cond);font-weight:800;font-style:italic;
  font-size:clamp(15px,.4vw + 14px,18px);
  text-transform:uppercase;letter-spacing:.05em;
  clip-path:polygon(0 0,100% 0,calc(100% - 12px) 100%,0 100%);
  transition:transform .18s var(--ease-punch),box-shadow .25s;
}
.wa-static svg{flex:none}
.wa-static:hover{transform:translateY(-2px) skewX(-3deg);box-shadow:0 10px 30px -8px rgba(37,211,102,.65)}
.wa-static:active{transform:translateY(0) scale(.98)}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:1080px){
  .hdr__nav{
    position:fixed;inset:0 0 auto;top:0;
    flex-direction:column;gap:0;
    background:rgba(8,7,6,.97);backdrop-filter:blur(18px);
    padding:96px var(--pad) 40px;
    transform:translateY(-102%);transition:transform .5s var(--ease);
    height:100svh;justify-content:center;
    margin:0;
  }
  .hdr__nav.open{transform:none}
  .hdr__nav a{
    font-family:var(--f-disp);font-size:clamp(30px,7vw,54px);
    letter-spacing:0;transform:skewX(-6deg);padding:10px 0;color:var(--bone);
  }
  .hdr__nav a::after{height:3px}
  .burger{display:flex}
  .hdr__right{margin-left:auto}
  .feats{grid-template-columns:repeat(2,minmax(0,1fr))}
}

@media (max-width:900px){
  .locate{grid-template-columns:1fr}
  .locate__map{min-height:0;aspect-ratio:4/3}
  .locate__geo{padding-bottom:16px}
  .split{grid-template-columns:1fr}
  .contact{grid-template-columns:1fr}
  .steps{grid-template-columns:1fr}
  .step{padding-top:18px}
  .tour--wide{grid-column:span 2;grid-template-columns:1fr}
  .tour--wide .tour__media{min-height:0;aspect-ratio:16/9}
  .gal{grid-template-columns:repeat(3,minmax(0,1fr))}
}

@media (max-width:720px){
  :root{--rig-h:96px}
  .hero{min-height:92svh}
  .hero__h1{font-size:clamp(46px,13vw,80px)}
  .hero__stats{grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
  .tours{grid-template-columns:1fr}
  .tour,.tour--wide{grid-column:span 1}
  .tour:nth-child(odd),.tour:nth-child(even){transform:none}
  .feats{grid-template-columns:1fr}
  .gal{grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-rows:34vw}
  .gal__i:nth-child(9){grid-column:span 1}
  .bform__row{grid-template-columns:1fr}
  .hdr__cta span{display:none}
  .btn--sm{padding:9px 11px}
  .ftr__brand{margin-right:0;width:100%}
  .hero__scroll{display:none}
  /* six labels will not fit across a phone — show only the one the
     machine is standing on, fade the rest out. */
  .rig__mark .lbl{font-size:10px;letter-spacing:.06em;opacity:0;transition:opacity .3s}
  .rig__mark.cur .lbl{opacity:1}
}

@media (max-width:420px){
  .marq__track span{font-size:14px}
  .contact__list b{font-size:16px}
}

/* ============================================================
   MOTION / PRINT
   ============================================================ */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{
    animation-duration:.001ms !important;animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
  }
  .slam,.reveal{opacity:1 !important;transform:none !important;filter:none !important}
  .grain{display:none}
  .rig{display:none}
  .ignition{display:none}
  .hero__h1 .rip{width:min(420px,54%)}
}

@media print{
  .rig,.hdr,.grain,.ignition,.hero__dust{display:none}
  body{background:#fff;color:#000}
}