/* ─────────────────────────────────────────
   JUHRUM — DESERT IRON
   Global Stylesheet
   Inspired by Unseen.co editorial language
───────────────────────────────────────── */

/* SEO utility — visible to crawlers, invisible to users */
.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}

/* Fonts loaded via <link> in HTML for optimal performance */

:root {
  /* ── CORE ── */
  --black:   #050505;
  --deep:    #090909;
  --surface: #101010;
  --lift:    #161616;
  --gold:    #C49A38;
  --gold-hi: #D4A93E;
  --gold-lo: #7C6022;
  --silver:  #AEAEAE;
  --dim:     #5A5A5A;
  --white:   #EDECE7;

  /* ── COOL SIDE ── */
  --steel:    #7A8A99;   /* cold metal accent */
  --ice:      #B8C5D0;   /* light cool highlight */
  --midnight: #0A0E12;   /* cool-tinted dark bg */

  /* ── WARM SIDE ── */
  --copper:   #B87333;   /* warm metal accent */
  --ember:    #D4956A;   /* warm highlight */
  --charcoal: #120E0A;   /* warm-tinted dark bg */

  /* ── FONTS ── */
  --fd: 'Bebas Neue', sans-serif;
  --fu: 'Barlow Condensed', sans-serif;
  --fb: 'Inter', 'Barlow', sans-serif;

  /* ── SPACING SCALE (Fibonacci-like, blueprint §6.1) ── */
  /* Micro: internal component spacing */
  --sp-1: 4px;   --sp-2: 8px;   --sp-3: 12px;  --sp-4: 16px;
  /* Meso: content block spacing */
  --sp-5: 24px;  --sp-6: 40px;  --sp-7: 60px;  --sp-8: 80px;
  /* Macro: section separation */
  --sp-9: 100px; --sp-10: 140px; --sp-11: 180px; --sp-12: 200px;
  /* Horizontal gutter */
  --gutter: 52px;
}

*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
html { font-size:16px;  }

body {
  background: var(--black);
  color: var(--white);
  font-family: var(--fb);
  font-weight: 300;
  font-size: 15px;
  line-height: 1.7;
  /* overflow-x moved to individual sections — body overflow:hidden breaks position:sticky on iOS */
  cursor: none;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ── READING PROGRESS BAR ── */
#jreadprogress {
  position: fixed; top: 0; left: 0; right: 0; height: 2px; z-index: 9999;
  background: linear-gradient(to right, var(--gold), var(--gold-hi));
  transform: scaleX(0); transform-origin: left;
  pointer-events: none;
  box-shadow: 0 0 8px rgba(196,154,56,.4);
}

/* ── SECTION DOT INDICATORS ── */
#jdots {
  position: fixed; right: 20px; top: 50%; transform: translateY(-50%);
  z-index: 850; display: flex; flex-direction: column; gap: 10px;
  pointer-events: all;
}
#jdots button {
  width: 6px; height: 6px; border-radius: 50%; border: none; padding: 0;
  background: rgba(196,154,56,.2); cursor: pointer;
  transition: background .3s, transform .3s, box-shadow .3s;
}
#jdots button.on {
  background: var(--gold);
  transform: scale(1.4);
  box-shadow: 0 0 8px rgba(196,154,56,.5);
}
#jdots button:hover { background: rgba(196,154,56,.6); }
@media (max-width: 900px) { #jdots { display: none; } }

/* ── CURSOR — additional Phase 7 states ── */
#jring.edge {
  animation: ringPulse 1.2s ease infinite;
  border-color: rgba(196,154,56,.4);
}
@keyframes ringPulse {
  0%, 100% { transform: translate(-50%,-50%) scale(1); opacity: 1; }
  50% { transform: translate(-50%,-50%) scale(1.3); opacity: .4; }
}
#jring.nav {
  width: 28px; height: 28px;
  border-color: rgba(196,154,56,.6);
  mix-blend-mode: difference;
}

/* no custom cursor on touch */
@media (hover: none) {
  body { cursor: auto !important; }
  #jcursor, #jring, #jlabel { display: none !important; }
}

/* ── IMG-BLOCK clip-path reveal ── */
.img-block {
  clip-path: inset(100% 0 0 0);
  transition: clip-path 1.1s cubic-bezier(.76,0,.24,1);
}
.img-block.in { clip-path: inset(0% 0 0 0); }

/* ── CURSOR ── */
#jcursor {
  position: fixed; width: 7px; height: 7px;
  background: var(--gold-hi); border-radius: 50%;
  pointer-events: none; z-index: 9999;
  transform: translate(-50%,-50%);
  transition: transform .15s, background .2s;
}
#jring {
  position: fixed; width: 38px; height: 38px;
  border: 1px solid rgba(196,154,56,.3); border-radius: 50%;
  pointer-events: none; z-index: 9998;
  transform: translate(-50%,-50%);
  transition: width .4s cubic-bezier(.23,1,.32,1),
              height .4s cubic-bezier(.23,1,.32,1),
              border-color .3s, border-radius .3s,
              box-shadow .3s;
}
/* hover link */
#jring.big { width: 68px; height: 68px; border-color: rgba(196,154,56,.55); }
/* hover CTA buttons — larger + glow */
#jring.cta {
  width: 80px; height: 80px;
  border-color: rgba(196,154,56,.7);
  box-shadow: 0 0 20px rgba(196,154,56,.15);
}
/* hover stats — crosshair */
#jring.cross {
  width: 52px; height: 52px;
  border-radius: 0;
  border-color: rgba(196,154,56,.5);
  transform: translate(-50%,-50%) rotate(45deg);
}
#jlabel {
  position: fixed; z-index: 9997; pointer-events: none;
  font-family: var(--fu); font-size: 12px; letter-spacing: .28em;
  text-transform: uppercase; color: var(--gold);
  transform: translate(-50%, calc(-50% + 30px));
  opacity: 0; transition: opacity .2s; white-space: nowrap;
}
#jlabel.on { opacity: 1; }

/* ── NAV ── */
.jnav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 800;
  padding: 28px 52px;
  display: flex; align-items: center; justify-content: space-between;
  background: transparent;
  border-bottom: 1px solid transparent;
  transition: background .5s ease, border-color .5s ease;
}
.jnav.opaque {
  background: rgba(5,5,5,.96);
  border-bottom-color: rgba(196,154,56,.08);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
/* inner pages — always opaque */
.jnav.always-opaque {
  background: rgba(5,5,5,.96);
  border-bottom-color: rgba(196,154,56,.08);
}
.jnav-logo {
  font-family: var(--fd); font-size: 21px; letter-spacing: .22em;
  color: var(--white); text-decoration: none; line-height: 1;
}
.jnav-logo b { color: var(--gold); font-weight: 400; }
.jnav-links { display: flex; gap: 44px; list-style: none; }
.jnav-links a {
  font-family: var(--fu); font-size: 11px; letter-spacing: var(--tk-wide);
  text-transform: uppercase; color: rgba(210,205,195,.7);
  text-decoration: none; transition: color .3s;
  position: relative; padding-bottom: 6px;
}
/* double underline — first line */
.jnav-links a::after {
  content: ''; position: absolute; bottom: 0; left: 0;
  width: 0; height: 1px; background: var(--gold);
  transition: width .4s cubic-bezier(.76,0,.24,1);
}
/* double underline — second line with gap */
.jnav-links a::before {
  content: ''; position: absolute; bottom: -3px; left: 0;
  width: 0; height: 1px; background: rgba(196,154,56,.35);
  transition: width .4s cubic-bezier(.76,0,.24,1) .05s;
}
.jnav-links a:hover, .jnav-links a.cur { color: var(--gold); }
.jnav-links a.cur::after, .jnav-links a:hover::after { width: 100%; }
.jnav-links a.cur::before, .jnav-links a:hover::before { width: 100%; }
.jnav-wa {
  font-family: var(--fu); font-size: 11px; letter-spacing: .2em;
  text-transform: uppercase; color: var(--black); background: var(--gold);
  padding: 12px 28px; text-decoration: none; transition: background .3s;
}
.jnav-wa:hover { background: var(--gold-hi); }

/* ── UTILS ── */
.tag {
  font-family: var(--fu); font-size: 13px; letter-spacing: .28em;
  text-transform: uppercase; color: var(--gold);
  display: flex; align-items: center; gap: 14px;
}
.tag::before { content: ''; width: 28px; height: 1px; background: var(--gold); flex-shrink:0; }

.reveal { opacity:0; transform:translateY(44px); transition: opacity .95s cubic-bezier(.23,1,.32,1), transform .95s cubic-bezier(.23,1,.32,1); }
.reveal.in { opacity:1; transform:none; }
.d1{transition-delay:.08s;} .d2{transition-delay:.16s;}
.d3{transition-delay:.24s;} .d4{transition-delay:.32s;}
.d5{transition-delay:.40s;} .d6{transition-delay:.48s;}

/* ── BUTTONS ── */
.btn-g {
  display: inline-flex; align-items: center; gap: 12px;
  font-family: var(--fu); font-size: 11px; letter-spacing: var(--tk-mid);
  text-transform: uppercase; color: var(--black); background: var(--gold);
  padding: 15px 38px; text-decoration: none; position: relative; overflow: hidden;
  transition: background .3s, transform .12s;
}
.btn-g::before {
  content: ''; position: absolute;
  top: 0; left: -75%;
  width: 50%; height: 100%;
  background: linear-gradient(105deg, transparent 20%, rgba(255,255,255,.35) 50%, transparent 80%);
  transform: skewX(-18deg);
  transition: left .6s cubic-bezier(.76,0,.24,1);
  z-index: 1;
}
.btn-g span { position: relative; z-index: 2; }
.btn-g:hover { background: var(--gold-hi); }
.btn-g:hover::before { left: 125%; }
.btn-g:active { transform: scale(.97); }

.btn-o {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--fu); font-size: 11px; letter-spacing: var(--tk-mid);
  text-transform: uppercase; color: var(--silver);
  text-decoration: none; border-bottom: 1px solid rgba(174,174,174,.25);
  padding-bottom: 4px; transition: color .3s, border-color .3s, gap .3s;
}
.btn-o:hover { color: var(--white); border-color: rgba(196,154,56,.6); gap: 16px; }
.btn-o:active { opacity: .8; }

.btn-dark {
  display: inline-flex; align-items: center; gap: 12px;
  font-family: var(--fu); font-size: 11px; letter-spacing: var(--tk-mid);
  text-transform: uppercase; color: var(--white); background: rgba(255,255,255,.04);
  padding: 15px 38px; text-decoration: none; transition: background .3s, transform .12s;
  border: 1px solid rgba(196,154,56,.18); position: relative; overflow: hidden;
}
.btn-dark:hover { background: rgba(196,154,56,.08); border-color: rgba(196,154,56,.35); }
.btn-dark:active { transform: scale(.97); }

/* ── TICKER ── */
.ticker { background: var(--gold); overflow: hidden; padding: 17px 0; }
.ticker-t {
  display: flex; white-space: nowrap;
  animation: jTicker 28s linear infinite;
}
.ticker-i {
  font-family: var(--fd); font-size: 12px; letter-spacing: .28em;
  color: var(--black); padding: 0 44px;
  display: flex; align-items: center; gap: 44px; flex-shrink:0;
}
.ticker-dot { width: 4px; height: 4px; border-radius: 50%; background: rgba(0,0,0,.3); }
@keyframes jTicker { from{transform:translateX(0)} to{transform:translateX(-50%)} }

/* ── FOOTER ── */
.jfoot {
  background: var(--deep); border-top: 1px solid rgba(255,255,255,.04);
  padding: 36px 52px;
  display: flex; align-items: center; justify-content: space-between;
}
.jfoot-logo { font-family: var(--fd); font-size: 19px; letter-spacing: .2em; color: var(--white); }
.jfoot-logo b { color: var(--gold); font-weight: 400; }
.jfoot-tag {
  font-family: var(--fu); font-size: 12px; letter-spacing: .2em;
  text-transform: uppercase; color: rgba(196,154,56,.35);
}
.jfoot-copy { font-family: var(--fu); font-size: 12px; letter-spacing: .12em; color: var(--dim); }
.jfoot-legal { font-family: var(--fu); font-size: 10px; letter-spacing: .14em; color: var(--dim); margin-top: 6px; }
.jfoot-legal a { color: rgba(196,154,56,.55); text-decoration: none; transition: color .25s; }
.jfoot-legal a:hover { color: var(--gold); }

/* ── NOISE TEXTURE ── */
.noise::after {
  content: '';
  position: fixed; inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)' opacity='.035'/%3E%3C/svg%3E");
  pointer-events: none; z-index: 9985; opacity: .5;
}

@media (max-width: 900px) {
  .jnav { padding: 20px 24px; }
  .jnav-links { display: none; }
  .jfoot { padding: 24px; flex-direction: column; gap: 10px; text-align: center; }
}

/* ── SUBTLE GEOMETRIC DECORATIONS ── */
/* Dot grid — appears in reviews and booking sections */
.dot-grid {
  position: absolute; pointer-events: none; z-index: 0;
  width: 180px; height: 180px;
  background-image: radial-gradient(circle, rgba(196,154,56,.18) 1px, transparent 1px);
  background-size: 18px 18px;
}
.dot-grid.tl { top: 40px; left: 40px; }
.dot-grid.br { bottom: 40px; right: 40px; }
.dot-grid.tr { top: 40px; right: 40px; }

/* Corner bracket accent */
.bracket {
  position: absolute; pointer-events: none; z-index: 0;
  width: 48px; height: 48px;
}
.bracket.tl { top: 32px; left: 32px; border-top: 1px solid rgba(196,154,56,.2); border-left: 1px solid rgba(196,154,56,.2); }
.bracket.tr { top: 32px; right: 32px; border-top: 1px solid rgba(196,154,56,.2); border-right: 1px solid rgba(196,154,56,.2); }
.bracket.bl { bottom: 32px; left: 32px; border-bottom: 1px solid rgba(196,154,56,.2); border-left: 1px solid rgba(196,154,56,.2); }
.bracket.br-c { bottom: 32px; right: 32px; border-bottom: 1px solid rgba(196,154,56,.2); border-right: 1px solid rgba(196,154,56,.2); }

/* Cross/plus accent */
.cross-accent {
  position: absolute; pointer-events: none; z-index: 0;
  width: 24px; height: 24px;
}
.cross-accent::before, .cross-accent::after {
  content: ''; position: absolute; background: rgba(196,154,56,.22);
}
.cross-accent::before { width: 1px; height: 100%; left: 50%; transform: translateX(-50%); }
.cross-accent::after  { width: 100%; height: 1px; top: 50%; transform: translateY(-50%); }

/* Horizontal rule accent */
.rule-accent {
  width: 60px; height: 1px;
  background: linear-gradient(to right, var(--gold), transparent);
  opacity: .35;
}

/* Circle outline accent */
.circle-accent {
  position: absolute; pointer-events: none; z-index: 0;
  border-radius: 50%;
  border: 1px solid rgba(196,154,56,.08);
}

/* ── PHASE 9/10: ACCESSIBILITY ── */
/* Skip to content */
.skip-link {
  position: fixed; top: -100px; left: 24px; z-index: 99999;
  background: var(--gold); color: var(--black);
  font-family: var(--fu); font-size: 11px; letter-spacing: .18em;
  text-transform: uppercase; text-decoration: none;
  padding: 12px 20px; transition: top .3s;
}
.skip-link:focus { top: 16px; }

/* Focus states for keyboard nav */
a:focus-visible, button:focus-visible {
  outline: 1px solid var(--gold);
  outline-offset: 3px;
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
  }
  .reveal { opacity: 1 !important; transform: none !important; }
  .img-block { clip-path: none !important; }
  #jreadprogress { display: none; }
}

/* ── PHASE 10: PERFORMANCE ── */
/* GPU-accelerate animated elements */
.reveal { will-change: opacity, transform; }
.reveal.in { will-change: auto; } /* release after animation */
.pcard { will-change: transform; }
.pcard-img-wrap { will-change: transform; }
.prod-card { will-change: transform; }
.vcard { will-change: background, border-color; }
.img-block { will-change: clip-path; }
.img-block.in { will-change: auto; }
#jring { will-change: width, height, transform; }
#jcursor { will-change: left, top; }
#jreadprogress { will-change: transform; }

/* ═══════════════════════════════════════════════

/* ═══════════════════════════════════════════════
   PHASE 11 — TRUCK SCROLL SCRUB
   ═══════════════════════════════════════════════ */

#truck-scrub-outer {
  height: 1000vh;
  position: relative;
  z-index: 2;
}

#truck-scrub-sticky {
  position: sticky;
  top: 0;
  height: 100vh;
  width: 100%;
  background: #72726f;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

#truck-scrub-sticky::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 120px;
  background: linear-gradient(to bottom, #050505 0%, rgba(5,5,5,0) 100%);
  z-index: 8;
  pointer-events: none;
}
#truck-scrub-sticky::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 120px;
  background: linear-gradient(to top, #120E0A 0%, rgba(18,14,10,0) 100%);
  z-index: 8;
  pointer-events: none;
}

.ts-label-top {
  position: absolute;
  top: 52px; left: 52px;
  display: flex; align-items: center; gap: 16px;
  z-index: 10; opacity: 0; transition: opacity .6s;
}
#truck-scrub-sticky.active .ts-label-top { opacity: 1; }
.ts-tag { font-family: var(--fu); font-size: 11px; letter-spacing: .36em; text-transform: uppercase; color: var(--gold); }
.ts-divider { width: 24px; height: 1px; background: rgba(196,154,56,.4); }
.ts-sub { font-family: var(--fu); font-size: 11px; letter-spacing: .28em; text-transform: uppercase; color: rgba(20,20,18,.6); }

.ts-progress-wrap {
  position: absolute; bottom: 0; left: 0; right: 0;
  height: 1px; background: rgba(196,154,56,.15); z-index: 10;
}
.ts-progress-bar {
  height: 100%; width: 0%;
  background: linear-gradient(to right, rgba(196,154,56,.4), var(--gold));
  transition: width .04s linear;
}

#truck-canvas {
  position: absolute;
  left: 0; top: 0;
  width: 100%; height: 100%;
  z-index: 2;
  display: block;
}

.ts-loading {
  position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  z-index: 9;
  display: flex; flex-direction: column; align-items: center; gap: 12px;
}
.ts-loading-bar { width: 140px; height: 1px; background: rgba(20,20,18,.2); }
.ts-loading-fill { height: 100%; width: 0%; background: rgba(20,20,18,.6); transition: width .1s linear; }
.ts-loading-label { font-family: var(--fu); font-size: 10px; letter-spacing: .36em; text-transform: uppercase; color: rgba(20,20,18,.5); }

.ts-corner {
  position: absolute; width: 24px; height: 24px;
  z-index: 9; opacity: 0; transition: opacity .8s;
}
#truck-scrub-sticky.active .ts-corner { opacity: 1; }
.ts-corner-tl { top: 36px; left: 36px; border-top: 1px solid rgba(196,154,56,.5); border-left: 1px solid rgba(196,154,56,.5); }
.ts-corner-tr { top: 36px; right: 36px; border-top: 1px solid rgba(196,154,56,.5); border-right: 1px solid rgba(196,154,56,.5); }
.ts-corner-bl { bottom: 36px; left: 36px; border-bottom: 1px solid rgba(196,154,56,.5); border-left: 1px solid rgba(196,154,56,.5); }
.ts-corner-br { bottom: 36px; right: 36px; border-bottom: 1px solid rgba(196,154,56,.5); border-right: 1px solid rgba(196,154,56,.5); }

.ts-panels {
  position: absolute;
  right: 0; top: 0; bottom: 0;
  width: 38%;
  z-index: 6;
  display: flex; align-items: center;
  pointer-events: none;
}

.ts-panel {
  position: absolute;
  right: 52px;
  width: calc(100% - 52px - 40px);
  opacity: 0;
  transform: translateY(22px);
  transition: opacity .55s cubic-bezier(.76,0,.24,1), transform .55s cubic-bezier(.76,0,.24,1);
  pointer-events: none;
}
.ts-panel.active {
  opacity: 1;
  transform: translateY(0);
  pointer-events: all;
}

.ts-panel-num {
  font-family: var(--fu);
  font-size: 10px;
  letter-spacing: .44em;
  text-transform: uppercase;
  color: var(--gold);
  display: block;
  margin-bottom: 14px;
}
.ts-panel-title {
  font-family: var(--fd);
  font-size: clamp(36px, 3.8vw, 56px);
  letter-spacing: .03em;
  color: #1a1a18;
  line-height: .92;
  margin-bottom: 20px;
}
.ts-panel-desc {
  font-size: 15px;
  font-weight: 300;
  color: rgba(20,20,18,.72);
  line-height: 1.85;
  margin-bottom: 24px;
  max-width: 340px;
}
.ts-panel-line {
  width: 32px; height: 1px;
  background: rgba(196,154,56,.5);
  margin-bottom: 18px;
}
.ts-panel-note {
  font-family: var(--fu);
  font-size: 12px;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: rgba(196,154,56,1);
  font-weight: 600;
}
.ts-panel-hint {
  font-family: var(--fu);
  font-size: 10px;
  letter-spacing: .32em;
  text-transform: uppercase;
  color: rgba(20,20,18,.45);
  animation: bounceDown 1.8s ease infinite;
  display: inline-block;
}
.ts-panel-cta .btn-g {
  pointer-events: all;
  background: #1a1a18;
  color: var(--gold);
  border-color: rgba(196,154,56,.3);
  margin-top: 4px;
}
.ts-panel-cta .btn-g:hover { background: #2a2a28; }

.ts-scroll-hint {
  position: absolute; bottom: 44px; left: 50%; transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  z-index: 11; opacity: 0; transition: opacity .6s;
}
#truck-scrub-sticky.active .ts-scroll-hint { opacity: 1; }
.ts-scroll-hint.hide { opacity: 0 !important; }
.ts-hint-icon {
  font-size: 28.84px; color: rgba(20,20,18,.85);
  animation: bounceDown 1.6s ease infinite; line-height: 1;
}
.ts-hint-text {
  font-family: var(--fu); font-size: 13.4px; letter-spacing: .28em;
  text-transform: uppercase; color: rgba(20,20,18,.85);
  white-space: nowrap; font-weight: 600;
}
.ts-hint-sub {
  font-family: var(--fu); font-size: 10.3px; letter-spacing: .22em;
  text-transform: uppercase; color: rgba(20,20,18,.55);
  white-space: nowrap;
}

@keyframes bounceDown {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(5px); }
}
  50%       { transform: translateY(5px); }
}

/* Mobile — panels go below canvas */
@media (max-width: 900px) {
  /* Hide right-side text panels with !important — prevents any specificity override */
  .ts-panels,
  #ts-panels,
  [dir="rtl"] .ts-panels {
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }
  /* Belt-and-suspenders: also hide individual panels */
  .ts-panel {
    display: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
  }
  .ts-label-top { left: 24px; top: 28px; }
  .ts-corner-tl { top: 18px; left: 18px; }
  .ts-corner-tr { top: 18px; right: 18px; }
  .ts-corner-bl { bottom: 18px; left: 18px; }
  .ts-corner-br { bottom: 18px; right: 18px; }
}

/* ── Logo watermark — subtle large bg text on inner pages ── */
.page-hero::after,
.con-hero::after {
  content: 'J';
  position: absolute;
  bottom: -5%;
  right: 5%;
  font-family: var(--fd);
  font-size: 40vw;
  color: rgba(196,154,56,.018);
  pointer-events: none;
  line-height: 1;
  z-index: 0;
  letter-spacing: -.02em;
}

/* ── Scroll nudge indicator ── */
.h-scroll {
  position: absolute; right: 72px; bottom: 44px;
  z-index: 4; opacity: 0; transition: opacity 1s 1.4s;
}
.h-scroll.in { opacity: 1; }
.h-scroll-nudge {
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  animation: nudgeDown 2.4s cubic-bezier(.4,0,.6,1) infinite;
}
.h-scroll-arrow {
  font-size: 22px; color: var(--gold); line-height: 1;
  display: block;
}
.h-scroll-label {
  font-family: var(--fu); font-size: 12px; letter-spacing: .22em;
  text-transform: uppercase; color: rgba(196,154,56,.85);
  white-space: nowrap;
}
@keyframes nudgeDown {
  0%   { transform: translateY(0);    opacity: 1; }
  30%  { transform: translateY(8px);  opacity: 1; }
  50%  { transform: translateY(0);    opacity: .7; }
  70%  { transform: translateY(6px);  opacity: 1; }
  85%  { transform: translateY(0);    opacity: .8; }
  100% { transform: translateY(0);    opacity: 1; }
}

/* ── Journey panel richness ── */
.panel-content {
  position: relative; z-index: 2;
  max-width: 560px; text-align: center;
  padding: 52px;
  border: 1px solid rgba(196,154,56,.07);
  background: rgba(5,5,5,.3);
}
.panel-content::before {
  content: ''; position: absolute;
  top: -1px; left: 40px; right: 40px; height: 1px;
  background: linear-gradient(to right, transparent, rgba(196,154,56,.3), transparent);
}
.panel-content::after {
  content: ''; position: absolute;
  bottom: -1px; left: 40px; right: 40px; height: 1px;
  background: linear-gradient(to right, transparent, rgba(196,154,56,.3), transparent);
}
.stage-title { margin-bottom: 20px; }
.stage-text { font-size: 16px; color: rgba(210,205,195,.75); line-height: 1.9; }
.stage-rule {
  width: 32px; height: 1px;
  background: linear-gradient(to right, var(--gold), transparent);
  margin: 0 auto 24px;
}
.stage-tag {
  font-family: var(--fu); font-size: 12px; letter-spacing: .3em;
  text-transform: uppercase; color: var(--gold);
  display: block; margin-bottom: 20px;
}

/* ── LANGUAGE DROPDOWN ── */
.lang-switcher {
  position: relative;
  display: flex;
  align-items: center;
  margin-right: 16px;
}
#lang-btn {
  font-family: var(--fu);
  font-size: 11px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--silver);
  background: transparent;
  border: 1px solid rgba(196,154,56,.25);
  padding: 8px 14px;
  cursor: pointer;
  transition: color .3s, border-color .3s;
  white-space: nowrap;
}
#lang-btn:hover {
  color: var(--gold);
  border-color: rgba(196,154,56,.6);
}
#lang-dropdown {
  display: none;
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  background: #0e0e0c;
  border: 1px solid rgba(196,154,56,.15);
  min-width: 160px;
  z-index: 9999;
  box-shadow: 0 20px 60px rgba(0,0,0,.7);
}
#lang-dropdown.open { display: block; }
.lang-option {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 13px 18px;
  font-family: var(--fu);
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--silver);
  cursor: pointer;
  border-bottom: 1px solid rgba(196,154,56,.06);
  transition: background .2s, color .2s;
}
.lang-option:last-child { border-bottom: none; }
.lang-option:hover { background: rgba(196,154,56,.07); color: var(--white); }
.lang-option.active { color: var(--gold); }
.lang-option .lang-native {
  font-size: 13px;
  letter-spacing: 0;
  text-transform: none;
  opacity: .7;
}

/* ── CONTACT STRIP FIX — proper scaling for 6 items ── */
.contact-strip {
  display: grid !important;
  grid-template-columns: repeat(6, 1fr);
}
.cs-item {
  min-width: 0;
  padding: var(--sp-7) clamp(12px, 1.8vw, var(--sp-6)) !important;
}
.cs-title {
  font-size: clamp(14px, 1.6vw, 26px) !important;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cs-label {
  font-size: clamp(9px, .8vw, 12px) !important;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cs-arrow {
  flex-shrink: 0;
  margin-left: 8px;
}

/* ── RTL GLOBAL TWEAKS ── */
[dir="rtl"] .cs-arrow { margin-left: 0; margin-right: 8px; transform: scaleX(-1); }
[dir="rtl"] .cs-item { flex-direction: row-reverse; }
[dir="rtl"] .jnav { flex-direction: row-reverse; }
[dir="rtl"] .jnav-links { flex-direction: row-reverse; }
[dir="rtl"] .lang-switcher { margin-right: 0; margin-left: 16px; }
[dir="rtl"] #lang-dropdown { right: auto; left: 0; }

/* Mobile contact strip */
@media (max-width: 768px) {
  .contact-strip {
    grid-template-columns: 1fr !important;
    display: flex !important;
    flex-direction: column;
  }
  .cs-title { font-size: 22px !important; white-space: normal; }
  .cs-label { font-size: 11px !important; white-space: normal; }
  .cs-item { padding: var(--sp-6) var(--sp-5) !important; }
}

/* ── STORY PAGE — image gallery ── */
.story-img-gallery {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-top: 40px;
  position: relative;
  z-index: 1;
}
.story-img-gallery .img-block {
  aspect-ratio: 4/3;
  overflow: hidden;
}
.story-img-gallery .img-block.tall {
  aspect-ratio: 3/4;
  grid-row: span 2;
}
.story-img-caption {
  font-family: var(--fu);
  font-size: 12px;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--dim);
  margin-top: 10px;
  text-align: center;
}

/* ── CONTACT PAGE — shop photo ── */
.contact-shop-photo {
  margin-top: 40px;
  position: relative;
  overflow: hidden;
  aspect-ratio: 16/9;
  border: 1px solid rgba(196,154,56,.1);
}
.contact-shop-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: brightness(.85) saturate(.8) contrast(1.05);
  transition: transform .6s cubic-bezier(.25,.46,.45,.94);
}
.contact-shop-photo:hover img { transform: scale(1.03); }
.contact-shop-photo::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(5,5,5,.5) 0%, transparent 50%);
  pointer-events: none;
}
.contact-shop-label {
  position: absolute;
  bottom: 20px;
  left: 24px;
  z-index: 2;
  font-family: var(--fu);
  font-size: 12px;
  letter-spacing: .35em;
  text-transform: uppercase;
  color: var(--gold);
}

/* ── CONTACT STRIP: 3 items only ── */
.contact-strip {
  grid-template-columns: repeat(3, 1fr) !important;
}
.cs-title {
  font-size: clamp(18px, 2.2vw, 32px) !important;
  white-space: normal !important;
}
.cs-label {
  font-size: clamp(9px, .85vw, 12px) !important;
}

/* ── NAV LINKS: bigger ── */
.jnav-links a {
  font-size: 12px !important;
  letter-spacing: .18em !important;
}

/* ── FOOTER: bigger text ── */
.jfoot-tag {
  font-size: 11px !important;
  letter-spacing: .2em !important;
}
.jfoot-copy {
  font-size: 11px !important;
  letter-spacing: .12em !important;
}

/* ── HERO SPACING FIX: prevent text overlapping bracket/tagline ── */
#hero {
  padding-top: 130px !important;
}
.h-tag {
  margin-bottom: 28px !important;
}
.hero-content {
  max-width: 680px;
}

/* ── SCROLL HINT: always visible, gold pulse ── */
.h-scroll {
  right: 52px !important;
  bottom: 52px !important;
  opacity: 0;
  transition: opacity 1s 1.4s;
}
.h-scroll.in { opacity: 1 !important; }
.h-scroll-nudge {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  cursor: pointer;
}
.h-scroll-arrow-big {
  font-size: 32px !important;
  color: var(--gold);
  animation: nudgeDown 1.4s ease infinite !important;
}
.h-scroll-lbl {
  font-size: 11px !important;
  letter-spacing: .28em !important;
  color: var(--gold) !important;
  opacity: 1 !important;
}

/* Scroll pulse animation */
@keyframes heroPulse {
  0%   { transform: translateY(0); }
  25%  { transform: translateY(28px); }
  50%  { transform: translateY(0); }
  65%  { transform: translateY(18px); }
  80%  { transform: translateY(0); }
  90%  { transform: translateY(10px); }
  100% { transform: translateY(0); }
}
body.pulse-hint {
  overflow: hidden;
}

/* ── RTL GLOBAL LAYOUT ── */
[dir="rtl"] #hero {
  padding-left: 52px;
  padding-right: 52px;
}
[dir="rtl"] .hero-content {
  margin-left: auto !important;
  margin-right: 0 !important;
  text-align: right !important;
}
[dir="rtl"] .h-h1 .row { text-align: right !important; }
[dir="rtl"] .h-tag { flex-direction: row-reverse; }
[dir="rtl"] .h-ctas { flex-direction: row-reverse; }
[dir="rtl"] .h-stats {
  right: auto !important;
  left: 52px !important;
}
[dir="rtl"] .h-scroll {
  right: auto !important;
  left: 52px !important;
}
[dir="rtl"] .booking-ctas { flex-direction: row-reverse; }
[dir="rtl"] .rcard-text,
[dir="rtl"] .rcard-name,
[dir="rtl"] .rcard-meta,
[dir="rtl"] .stage-text,
[dir="rtl"] .stage-title,
[dir="rtl"] .stage-tag { text-align: right !important; }
[dir="rtl"] .panel-content { align-items: flex-end !important; text-align: right; }
[dir="rtl"] .ts-panels {
  right: 0 !important;
  left: auto !important;
}
[dir="rtl"] .ts-panel { text-align: right; }
[dir="rtl"] .ts-scroll-hint {
  left: 50% !important;
  right: auto !important;
  transform: translateX(-50%);
  text-align: center;
}
[dir="rtl"] .jfoot { direction: rtl; }
[dir="rtl"] .contact-strip { direction: rtl; }
[dir="rtl"] .cs-item { flex-direction: row-reverse; }
[dir="rtl"] .cs-arrow { transform: scaleX(-1); }
[dir="rtl"] .lang-switcher { margin-right: 0; margin-left: 16px; }
[dir="rtl"] #lang-dropdown { right: auto; left: 0; }
[dir="rtl"] .jnav { flex-direction: row-reverse; }
[dir="rtl"] .jnav-links { flex-direction: row-reverse; }
[dir="rtl"] .reviews-grid { direction: rtl; }
[dir="rtl"] .rcard-author { flex-direction: row-reverse; }
[dir="rtl"] .two-col { direction: rtl; }
[dir="rtl"] .vcard, [dir="rtl"] .contact-left { text-align: right; direction: rtl; }
[dir="rtl"] .soc-block { text-align: right; }
[dir="rtl"] .soc-btns { flex-direction: row-reverse; }

/* ── STORY PAGE ch-marker RTL ── */
[dir="rtl"] .ch-marker { flex-direction: row-reverse; }
[dir="rtl"] .ed-h2, [dir="rtl"] .ed-body { text-align: right; }
[dir="rtl"] .story-img-gallery { direction: rtl; }

/* ── Mobile contact strip ── */
@media (max-width: 768px) {
  .contact-strip {
    grid-template-columns: 1fr !important;
    display: flex !important;
    flex-direction: column;
  }
  .cs-title { font-size: 22px !important; }
  .cs-label { font-size: 11px !important; }
}


/* ══════════════════════════════════════════════
   THEME SYSTEM — LIGHT / DARK / DEVICE
   Desert-tinged light palette
═══════════════════════════════════════════════ */

/* Default is always dark */
:root {
  --bg-main: #050505;
  --bg-surface: #101010;
  --bg-lift: #161616;
  --text-primary: #EDECE7;
  --text-secondary: #AEAEAE;
  --text-dim: #5A5A5A;
  --border-subtle: rgba(196,154,56,.12);
  --nav-bg: rgba(5,5,5,.82);
  --ticker-text: #050505;
  --footer-bg: #0a0a0a;
  --card-bg: #101010;
  --pullquote-bg: #0a0808;
  --input-bg: rgba(255,255,255,.03);
  --input-border: rgba(196,154,56,.15);
}

/* Light mode overrides */
[data-theme="light"] {
  --bg-main: #F5EFE6;
  --bg-surface: #EDE4D6;
  --bg-lift: #E4D9C8;
  --text-primary: #1A1410;
  --text-secondary: #5C4A2A;
  --text-dim: #8A7560;
  --border-subtle: rgba(139,100,30,.18);
  --nav-bg: rgba(240,234,222,.92);
  --ticker-text: #1A1410;
  --footer-bg: #DDD0BC;
  --card-bg: #EDE4D6;
  --pullquote-bg: #E8DDD0;
  --input-bg: rgba(139,100,30,.06);
  --input-border: rgba(139,100,30,.2);
  --gold: #A07820;
  --gold-hi: #B88A28;
  --gold-lo: #7C6022;
  --white: #1A1410;
  --silver: #5C4A2A;
  --dim: #8A7560;
  --black: #F5EFE6;
  --surface: #EDE4D6;
  --deep: #EDE4D6;
}

[data-theme="light"] body {
  background: var(--bg-main);
  color: var(--text-primary);
}

[data-theme="light"] .jnav {
  background: var(--nav-bg);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-bottom: 1px solid rgba(139,100,30,.15);
}

[data-theme="light"] .jnav-links a {
  color: var(--text-secondary);
}

[data-theme="light"] #lang-btn {
  color: var(--text-secondary);
  border-color: rgba(139,100,30,.3);
  background: transparent;
}

[data-theme="light"] #lang-dropdown {
  background: #EDE4D6;
  border-color: rgba(139,100,30,.2);
  box-shadow: 0 20px 60px rgba(30,20,10,.2);
}

[data-theme="light"] .lang-option {
  color: var(--text-secondary);
}

[data-theme="light"] .lang-option:hover {
  background: rgba(139,100,30,.08);
  color: var(--text-primary);
}

[data-theme="light"] .jnav-wa {
  background: var(--gold);
  color: #fff;
}

[data-theme="light"] .ticker {
  background: var(--gold);
}

[data-theme="light"] .booking-mini,
[data-theme="light"] .trucks {
  background: #EDE4D6;
  border-color: rgba(139,100,30,.12);
}

[data-theme="light"] .pcard,
[data-theme="light"] .tcard {
  background: #E4D9C8;
  border-color: rgba(139,100,30,.1);
}

[data-theme="light"] .pcard-ov {
  background: linear-gradient(to top, rgba(240,233,220,.97) 0%, rgba(240,233,220,.22) 55%, transparent 100%);
}

[data-theme="light"] .pcard-name,
[data-theme="light"] .tcard-name { color: var(--text-primary); }

[data-theme="light"] .pcard-spec,
[data-theme="light"] .tcard-models { color: var(--text-dim); }

[data-theme="light"] .pullquote {
  background: var(--pullquote-bg);
}

[data-theme="light"] .pq-text { color: var(--text-primary); }

[data-theme="light"] .ed, [data-theme="light"] .ed.warm, [data-theme="light"] .ed.cold {
  background: var(--bg-main);
}

[data-theme="light"] .ed-h2 { color: var(--text-primary); }
[data-theme="light"] .ed-h2 .s { -webkit-text-stroke: 1px rgba(26,20,16,.18); color: transparent; }
[data-theme="light"] .ed-body { color: var(--text-secondary); }
[data-theme="light"] .ed-body strong { color: var(--text-primary); }
[data-theme="light"] .ed-body em { color: var(--gold); }

[data-theme="light"] .vcard {
  background: #EDE4D6;
  border-color: rgba(139,100,30,.1);
}

[data-theme="light"] .vcard-title { color: var(--text-primary); }
[data-theme="light"] .vcard-body { color: var(--text-secondary); }

[data-theme="light"] .values {
  background: #E4D9C8;
  border-color: rgba(139,100,30,.1);
}

[data-theme="light"] .values-h { color: var(--text-primary); }

[data-theme="light"] .rcard {
  background: #EDE4D6;
  border-color: rgba(139,100,30,.08);
}

[data-theme="light"] .rcard-text { color: var(--text-secondary); }
[data-theme="light"] .rcard-name { color: var(--text-primary); }

[data-theme="light"] .h-stats {
  background: rgba(240,233,220,.6);
  backdrop-filter: blur(16px);
  border-color: rgba(139,100,30,.2);
}

[data-theme="light"] .hst-n { color: var(--gold); }
[data-theme="light"] .hst-l { color: var(--text-dim); }

[data-theme="light"] .jfoot {
  background: var(--footer-bg);
  border-color: rgba(139,100,30,.15);
}

[data-theme="light"] .jfoot-logo, 
[data-theme="light"] .jfoot-copy { color: var(--text-secondary); }

[data-theme="light"] .btn-dark {
  background: rgba(26,20,16,.08);
  color: var(--text-primary);
  border-color: rgba(26,20,16,.2);
}

[data-theme="light"] .btn-dark:hover {
  background: rgba(26,20,16,.15);
}

[data-theme="light"] .btn-o {
  color: var(--text-secondary);
  border-color: rgba(139,100,30,.3);
}

[data-theme="light"] .btn-o:hover {
  color: var(--text-primary);
  border-color: rgba(139,100,30,.6);
}

[data-theme="light"] .noise::before {
  opacity: 0.015;
}

[data-theme="light"] .cta-band {
  background: var(--gold);
}

[data-theme="light"] .contact-strip {
  background: #EDE4D6;
  border-color: rgba(139,100,30,.12);
}

[data-theme="light"] .cs-val { color: var(--text-primary); }
[data-theme="light"] .cs-label { color: var(--text-dim); }

[data-theme="light"] .jform input,
[data-theme="light"] .jform textarea,
[data-theme="light"] .jform select {
  background: var(--input-bg);
  border-color: var(--input-border);
  color: var(--text-primary);
}

[data-theme="light"] .ph-h1 { color: var(--text-primary); }
[data-theme="light"] .ph-h1 .g { color: #A07820; }
[data-theme="light"] .ph-h1 .s { -webkit-text-stroke: 1px rgba(26,20,16,.2); color: transparent; }
[data-theme="light"] .ph-sub { color: var(--text-secondary); }

[data-theme="light"] .filter-wrap {
  border-color: rgba(139,100,30,.08);
}

[data-theme="light"] .fb {
  color: var(--text-dim);
  border-color: rgba(139,100,30,.15);
}

[data-theme="light"] .fb:hover, [data-theme="light"] .fb.on {
  color: var(--gold);
  border-color: rgba(139,100,30,.4);
  background: rgba(139,100,30,.05);
}

[data-theme="light"] .h-h1 .row span { color: var(--text-primary); }
[data-theme="light"] .h-sub { color: var(--text-secondary); }
[data-theme="light"] .hero-veil {
  background: radial-gradient(ellipse 80% 60% at 30% 40%, rgba(240,233,220,.25) 0%, rgba(240,230,210,.4) 40%, rgba(245,239,230,.75) 100%);
}

[data-theme="light"] .stage-title,
[data-theme="light"] .stage-text { color: var(--text-primary); }

[data-theme="light"] .story-panel-img::after {
  background: linear-gradient(to top, rgba(240,233,220,.92) 0%, rgba(240,233,220,.3) 55%, transparent 100%);
}

[data-theme="light"] .map-section {
  background: #EDE4D6;
  border-color: rgba(139,100,30,.12);
}

/* Theme Switcher Button */
.theme-switcher {
  position: relative;
  display: flex;
  align-items: center;
  margin-right: 12px;
}

#theme-btn {
  font-family: var(--fu);
  font-size: 11px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--silver);
  background: transparent;
  border: 1px solid rgba(196,154,56,.25);
  padding: 8px 12px;
  cursor: pointer;
  transition: color .3s, border-color .3s;
  white-space: nowrap;
  display: flex;
  align-items: center;
  gap: 6px;
}

#theme-btn:hover {
  color: var(--gold);
  border-color: rgba(196,154,56,.6);
}

#theme-dropdown {
  display: none;
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  background: #0e0e0c;
  border: 1px solid rgba(196,154,56,.15);
  min-width: 170px;
  z-index: 9999;
  box-shadow: 0 20px 60px rgba(0,0,0,.7);
}

#theme-dropdown.open { display: block; }

.theme-option {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 13px 18px;
  font-family: var(--fu);
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--silver);
  cursor: pointer;
  border-bottom: 1px solid rgba(196,154,56,.06);
  transition: background .2s, color .2s;
}

.theme-option:last-child { border-bottom: none; }
.theme-option:hover { background: rgba(196,154,56,.07); color: var(--white); }
.theme-option.active { color: var(--gold); }

.theme-option-icon {
  font-size: 14px;
  line-height: 1;
  flex-shrink: 0;
}

[data-theme="light"] #theme-dropdown {
  background: #EDE4D6;
  border-color: rgba(139,100,30,.2);
  box-shadow: 0 20px 60px rgba(30,20,10,.2);
}

[data-theme="light"] .theme-option {
  color: #5C4A2A;
}

[data-theme="light"] .theme-option:hover {
  background: rgba(139,100,30,.08);
  color: #1A1410;
}

[data-theme="light"] #theme-btn {
  color: #5C4A2A;
  border-color: rgba(139,100,30,.3);
}

/* Floating WhatsApp Button */
.wa-float {
  position: fixed;
  bottom: 32px;
  left: 32px;
  z-index: 850;
  width: 54px;
  height: 54px;
  background: #25D366;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 24px rgba(37,211,102,.35);
  transition: transform .3s cubic-bezier(.23,1,.32,1), box-shadow .3s;
  cursor: pointer;
  text-decoration: none;
}

.wa-float:hover {
  transform: scale(1.1);
  box-shadow: 0 8px 32px rgba(37,211,102,.5);
}

.wa-float svg {
  width: 28px;
  height: 28px;
  fill: #fff;
}

@media (max-width: 900px) {
  .wa-float { bottom: 20px; left: 20px; width: 48px; height: 48px; }
  .wa-float svg { width: 24px; height: 24px; }
}

/* Map Section on Homepage */
.map-section {
  background: var(--surface);
  border-top: 1px solid rgba(196,154,56,.07);
  border-bottom: 1px solid rgba(196,154,56,.07);
  padding: var(--sp-9) var(--gutter);
}

.map-inner {
  max-width: 1400px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 52px;
  align-items: center;
}

.map-text-side {
  display: flex;
  flex-direction: column;
  gap: var(--sp-5);
}

.map-h2 {
  font-family: var(--fd);
  font-size: clamp(44px, 6vw, 88px);
  line-height: .92;
  letter-spacing: .03em;
  color: var(--white);
}

.map-h2 .g { color: var(--gold); }

.map-body {
  font-size: 14px;
  font-weight: 300;
  color: var(--silver);
  line-height: 1.85;
  max-width: 380px;
}

.map-details {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.map-detail-row {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-family: var(--fu);
  font-size: 12px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--silver);
}

.map-detail-row .md-icon {
  color: var(--gold);
  font-size: 15px;
  flex-shrink: 0;
  margin-top: 1px;
}

.map-embed-wrap {
  position: relative;
  border: 1px solid rgba(196,154,56,.12);
  overflow: hidden;
}

.map-embed-wrap iframe {
  width: 100%;
  height: 380px;
  border: none;
  display: block;
  filter: grayscale(30%) contrast(1.05) brightness(0.85);
}

.map-embed-wrap::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  box-shadow: inset 0 0 0 1px rgba(196,154,56,.1);
}

@media (max-width: 900px) {
  .map-section { padding: var(--sp-8) 24px; }
  .map-inner { grid-template-columns: 1fr; gap: 32px; }
  .map-embed-wrap iframe { height: 280px; }
}

/* Brand Logo Strip */
.brand-strip {
  background: var(--black);
  border-top: 1px solid rgba(196,154,56,.07);
  border-bottom: 1px solid rgba(196,154,56,.07);
  padding: 28px 0;
  overflow: hidden;
  position: relative;
}

.brand-strip::before,
.brand-strip::after {
  content: '';
  position: absolute;
  top: 0; bottom: 0;
  width: 100px;
  z-index: 2;
  pointer-events: none;
}

.brand-strip::before {
  left: 0;
  background: linear-gradient(to right, var(--black), transparent);
}

.brand-strip::after {
  right: 0;
  background: linear-gradient(to left, var(--black), transparent);
}

.brand-track {
  display: flex;
  gap: 0;
  animation: brandScroll 28s linear infinite;
  width: max-content;
}

.brand-track:hover { animation-play-state: paused; }

@keyframes brandScroll {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

.brand-item {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 52px;
  opacity: 0.35;
  transition: opacity .4s;
  flex-shrink: 0;
}

.brand-item:hover { opacity: 0.75; }

.brand-item svg {
  height: 32px;
  width: auto;
  fill: var(--white);
}

.brand-item .brand-wordmark {
  font-family: var(--fd);
  font-size: 22px;
  letter-spacing: .18em;
  color: var(--white);
  white-space: nowrap;
}

[data-theme="light"] .brand-strip {
  background: #F5EFE6;
  border-color: rgba(139,100,30,.1);
}

[data-theme="light"] .brand-strip::before {
  background: linear-gradient(to right, #F5EFE6, transparent);
}

[data-theme="light"] .brand-strip::after {
  background: linear-gradient(to left, #F5EFE6, transparent);
}

[data-theme="light"] .brand-item svg,
[data-theme="light"] .brand-item .brand-wordmark {
  fill: #1A1410;
  color: #1A1410;
}


/* ═══════════════════════════════════════════════
   JUHRUM v6 — MOBILE OVERHAUL
   Covers all 17 audit issues + lang/theme fixes
   ═══════════════════════════════════════════════ */

/* ── MOBILE NAV: hamburger drawer ── */
.mob-nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 8px;
  margin-left: 8px;
  z-index: 901;
  -webkit-tap-highlight-color: transparent;
}
.mob-nav-toggle span {
  display: block;
  width: 22px;
  height: 1px;
  background: var(--gold);
  transition: transform 0.35s cubic-bezier(.76,0,.24,1), opacity 0.25s;
  transform-origin: center;
}
.mob-nav-toggle.open span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.mob-nav-toggle.open span:nth-child(2) { opacity: 0; transform: scaleX(0); }
.mob-nav-toggle.open span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

/* Mobile drawer overlay */
.mob-nav-drawer {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 899;
  pointer-events: none;
}
.mob-nav-drawer.open { pointer-events: all; }
.mob-nav-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(5,5,5,.7);
  opacity: 0;
  transition: opacity 0.35s;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}
.mob-nav-drawer.open .mob-nav-backdrop { opacity: 1; }
.mob-nav-panel {
  position: absolute;
  top: 0; right: 0;
  width: min(80vw, 320px);
  height: 100%;
  background: #090909;
  border-left: 1px solid rgba(196,154,56,.12);
  transform: translateX(100%);
  transition: transform 0.38s cubic-bezier(.76,0,.24,1);
  display: flex;
  flex-direction: column;
  padding: 80px 36px 40px;
  gap: 0;
  overflow-y: auto;
}
.mob-nav-drawer.open .mob-nav-panel { transform: translateX(0); }

/* Nav links inside drawer */
.mob-nav-links {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0;
  margin-bottom: 40px;
}
.mob-nav-links li {
  border-bottom: 1px solid rgba(196,154,56,.06);
}
.mob-nav-links a {
  display: block;
  font-family: var(--fd);
  font-size: 32px;
  letter-spacing: .04em;
  color: rgba(210,205,195,.8);
  text-decoration: none;
  padding: 16px 0;
  transition: color 0.25s, padding-left 0.25s;
}
.mob-nav-links a:hover,
.mob-nav-links a.cur { color: var(--gold); padding-left: 6px; }

/* WA button inside drawer */
.mob-nav-wa {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--fu);
  font-size: 11px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--black);
  background: var(--gold);
  padding: 14px 24px;
  text-decoration: none;
  margin-top: 8px;
  min-height: 44px;
}
.mob-nav-wa:hover { background: var(--gold-hi); }

/* Drawer gold accent line top */
.mob-nav-panel::before {
  content: '';
  position: absolute;
  top: 0; left: 36px; right: 36px;
  height: 1px;
  background: linear-gradient(to right, var(--gold), transparent);
  opacity: .3;
}

/* ── MOBILE NAV RIGHT CONTROLS: compact ── */
@media (max-width: 900px) {
  .mob-nav-toggle { display: flex; }
  .mob-nav-drawer { display: block; }

  /* Compact nav right strip */
  .jnav > div:last-child {
    gap: 6px !important;
  }
  /* Hide WhatsApp text label in nav, keep as icon-only pill */
  .jnav-wa {
    font-size: 10px !important;
    padding: 10px 14px !important;
    letter-spacing: .12em !important;
    white-space: nowrap;
    min-height: 36px;
  }
  /* Compact theme + lang buttons */
  #theme-btn {
    font-size: 10px !important;
    padding: 7px 10px !important;
    letter-spacing: .12em !important;
  }
  #lang-btn {
    font-size: 10px !important;
    padding: 7px 10px !important;
    letter-spacing: .12em !important;
  }
  /* Dropdowns: ensure they don't clip off-screen */
  #theme-dropdown,
  #lang-dropdown {
    right: 0 !important;
    left: auto !important;
    max-width: calc(100vw - 24px);
  }
}

/* Hide hamburger on desktop */
@media (min-width: 901px) {
  .mob-nav-toggle { display: none !important; }
  .mob-nav-drawer { display: none !important; }
}

/* ── HERO: hide large logo mark on mobile (issue #16) ── */
@media (max-width: 900px) {
  #hero-logo-mark { display: none !important; }
  #hero { padding-top: 100px !important; }
  .h-scroll { right: 24px !important; bottom: 36px !important; }
  /* Ensure hero bracket doesn't overlap content */
  .bracket.tl { top: 90px !important; left: 24px !important; }
}

/* ── HERO STATS: guaranteed readable on narrow screens (issue #6) ── */
@media (max-width: 420px) {
  .h-stats {
    left: 12px !important;
    right: 12px !important;
    bottom: 12px !important;
    padding: 12px 16px !important;
  }
  .hst-n { font-size: 20px !important; }
  .hst-l { font-size: 11px !important; letter-spacing: .12em !important; }
}

/* ── TRUCK SCRUB: mobile — panel overlaid INSIDE sticky at bottom ── */
@media (max-width: 900px) {
  #truck-scrub-outer { height: 400vh; } /* 400vh = 4 screens, enough for 6 scenes */

  /* Panel now sits inside the sticky viewport, bottom-anchored */
  .ts-mobile-panel {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 12;
    background: linear-gradient(to top, rgba(5,5,5,.97) 0%, rgba(5,5,5,.88) 70%, rgba(5,5,5,0) 100%);
    padding: 52px 24px 28px;
    pointer-events: none;
  }
  .ts-mobile-panel-num {
    font-family: var(--fu);
    font-size: 12px;
    letter-spacing: .44em;
    text-transform: uppercase;
    color: var(--gold);
    display: block;
    margin-bottom: 8px;
  }
  .ts-mobile-panel-title {
    font-family: var(--fd);
    font-size: clamp(24px, 7vw, 38px);
    letter-spacing: .03em;
    color: var(--white);
    line-height: .92;
    margin-bottom: 10px;
  }
  .ts-mobile-panel-desc {
    font-size: 12px;
    font-weight: 300;
    color: rgba(210,205,195,.8);
    line-height: 1.7;
    margin-bottom: 8px;
  }
  .ts-mobile-panel-note {
    font-family: var(--fu);
    font-size: 10px;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: var(--gold);
    font-weight: 600;
  }
  .ts-mobile-panel-cta { margin-top: 12px; pointer-events: all; }
}
@media (min-width: 901px) {
  .ts-mobile-panel { display: none; }
}

/* ── STORY HORIZONTAL SCROLL: GSAP handles mobile too, allow horizontal ── */
@media (max-width: 900px) {
  #story-pin-container {
    overflow: hidden;
  }
  .story-panel {
    padding: 0 24px !important;
  }
  .panel-content {
    padding: 32px 24px !important;
    max-width: calc(100vw - 48px) !important;
  }
  .stage-title {
    font-size: clamp(28px, 8vw, 44px) !important;
  }
  .stage-text {
    font-size: 14px !important;
  }
  .story-panel-img {
    /* images kept — user wants them visible on mobile */
    max-width: 160px;
    margin: 0 auto 20px;
  }
  .story-panel-img img {
    width: 100%;
    height: auto;
    object-fit: cover;
  }
}

/* ── PRODUCT CARDS: touch-reveal on mobile (issue #5) ── */
/* On touch devices, show content by default — no hover required */
@media (hover: none) {
  .pcard-cat {
    transform: translateX(0) !important;
    opacity: 1 !important;
  }
  .pcard-spec {
    max-height: 160px !important;
    opacity: 1 !important;
    transform: translateY(0) !important;
  }
  .pcard-cta {
    opacity: 1 !important;
  }
  /* Tap to expand alternative — pcard gets active state via JS */
  .pcard-name {
    font-size: 22px;
  }
  .prod-card .pcard-cat { opacity: 1 !important; transform: none !important; }
  .prod-card .pcard-spec { max-height: 120px !important; opacity: 1 !important; transform: none !important; }
}

/* ── FILTER ROW: scroll affordance (issue #10) ── */
@media (max-width: 900px) {
  .filter-wrap {
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-right: 40px !important; /* space for fade edge */
    /* Fade edge hint */
    -webkit-mask-image: linear-gradient(to right, black 85%, transparent 100%);
    mask-image: linear-gradient(to right, black 85%, transparent 100%);
  }
  .filter-wrap::-webkit-scrollbar { display: none; }
  .fb {
    flex-shrink: 0;
    cursor: pointer !important; /* override cursor:none on touch */
    min-height: 44px; /* touch target */
  }
}

/* ── PRODUCT CARDS CTA (card 12): stack on small screens (issue #11) ── */
@media (max-width: 560px) {
  .pcard:nth-child(12) .pcard-content {
    flex-direction: column !important;
    gap: 16px !important;
    align-items: flex-start !important;
    padding: 24px !important;
  }
  .pcard:nth-child(12) .pcard-name { font-size: 24px !important; }
  .pcard:nth-child(12) { height: auto !important; min-height: 160px !important; }
}

/* ── STORY IMAGE GALLERY: single column on mobile (issue #12) ── */
@media (max-width: 600px) {
  .story-img-gallery {
    grid-template-columns: 1fr !important;
  }
  .story-img-gallery .img-block.tall {
    aspect-ratio: 4/3 !important;
    grid-row: auto !important;
  }
}

/* ── CONTACT PAGE: force single column grid (issue #7) ── */
@media (max-width: 900px) {
  .con-main {
    grid-template-columns: 1fr !important;
  }
  .con-right {
    border-left: none !important;
    border-top: 1px solid rgba(196,154,56,.1) !important;
    padding-top: 40px !important;
  }
}

/* ── FLOATING WA: offset from booking CTAs (issue #13) ── */
@media (max-width: 900px) {
  .wa-float {
    bottom: 80px; /* lift above any bottom-anchored content */
    left: 16px;
  }
}

/* ── BUTTON TOUCH TARGETS: minimum 44px (issue #9) ── */
.btn-g, .btn-dark {
  min-height: 44px;
}
.btn-o {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding-bottom: 4px;
}
@media (max-width: 900px) {
  .booking-ctas {
    flex-direction: column !important;
    gap: 12px !important;
    width: 100%;
  }
  .booking-ctas .btn-g,
  .booking-ctas .btn-dark {
    width: 100%;
    justify-content: center;
    padding: 16px 24px;
    text-align: center;
  }
}

/* ── FOOTER: center on mobile (issue #14) ── */
@media (max-width: 900px) {
  .jfoot {
    text-align: center !important;
    align-items: center !important;
  }
}

/* ── MAP SECTION: mobile (existing, reinforced) ── */
@media (max-width: 600px) {
  .map-inner { gap: 24px; }
  .map-embed-wrap iframe { height: 220px; }
  .map-h2 { font-size: clamp(36px, 10vw, 64px); }
}

/* ── GENERAL MOBILE SPACING ── */
@media (max-width: 900px) {
  /* Section padding reduction */
  .booking-mini { padding: var(--sp-8) 24px !important; }
  .reviews { padding: var(--sp-8) 24px !important; }
  section.booking-mini .booking-inner { gap: var(--sp-6) !important; }
}

/* ── RTL MOBILE NAV ── */
[dir="rtl"] .mob-nav-panel {
  right: auto;
  left: 0;
  border-left: none;
  border-right: 1px solid rgba(196,154,56,.12);
  transform: translateX(-100%);
}
[dir="rtl"] .mob-nav-drawer.open .mob-nav-panel {
  transform: translateX(0);
}
[dir="rtl"] .mob-nav-panel::before {
  background: linear-gradient(to left, var(--gold), transparent);
}
[dir="rtl"] .mob-nav-links a { padding: 16px 0; }
[dir="rtl"] .mob-nav-links a:hover,
[dir="rtl"] .mob-nav-links a.cur { padding-left: 0; padding-right: 6px; }

/* Light theme mobile nav drawer */
[data-theme="light"] .mob-nav-panel {
  background: #EDE4D6;
  border-color: rgba(139,100,30,.15);
}
[data-theme="light"] .mob-nav-links a { color: #5C4A2A; }
[data-theme="light"] .mob-nav-links a:hover,
[data-theme="light"] .mob-nav-links a.cur { color: var(--gold); }
[data-theme="light"] .mob-nav-backdrop { background: rgba(240,234,222,.6); }


/* Dropdown positioning on very narrow screens */
@media (max-width: 480px) {
  .theme-switcher,
  .lang-switcher { position: static; }
  #theme-dropdown,
  #lang-dropdown {
    position: fixed;
    top: 64px;
    right: 12px;
    left: 12px;
    max-width: none;
    z-index: 9999;
  }
}

/* ══════════════════════════════════════════
   MOBILE FIXES — v7
   ══════════════════════════════════════════ */

/* ── GLOBAL MOBILE FIT: prevent horizontal overflow ── */
/* NOTE: overflow-x:hidden on body can break position:sticky in some browsers. 
   We clip overflow on individual sections instead. */
@media (max-width: 900px) {
  body {
    width: 100%;
    max-width: 100%;
  }
}

/* ── MOBILE CATALOGUE BLOCK (06) — shown BEFORE truck on mobile ── */
.mob-catalogue-block {
  display: none; /* hidden on desktop */
}
@media (max-width: 900px) {
  .mob-catalogue-block {
    display: block;
    background: var(--black);
    border-bottom: 1px solid rgba(196,154,56,.1);
    padding: 52px 24px 44px;
    position: relative;
    box-sizing: border-box;
    width: 100%;
  }
  .mob-catalogue-inner {
    max-width: 100%;
    text-align: left;
  }
  .mob-catalogue-num {
    font-family: var(--fu);
    font-size: 12px;
    letter-spacing: .44em;
    text-transform: uppercase;
    color: var(--gold);
    display: block;
    margin-bottom: 14px;
  }
  .mob-catalogue-title {
    font-family: var(--fd);
    font-size: clamp(32px, 9vw, 52px);
    letter-spacing: .03em;
    color: var(--white);
    line-height: .92;
    margin-bottom: 16px;
  }
  .mob-catalogue-desc {
    font-size: 14px;
    font-weight: 300;
    color: var(--silver);
    line-height: 1.75;
    margin-bottom: 20px;
    max-width: 100%;
  }
  .mob-catalogue-scroll-hint {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    margin-top: 28px;
    padding-top: 24px;
    border-top: 1px solid rgba(196,154,56,.1);
    cursor: pointer;
  }
  .mob-cat-hint-icon {
    font-size: 20px;
    color: rgba(196,154,56,.6);
    animation: bounceDown 1.8s ease infinite;
    display: block;
    line-height: 1;
  }
  .mob-cat-hint-text {
    font-family: var(--fu);
    font-size: 12px;
    letter-spacing: .32em;
    text-transform: uppercase;
    color: rgba(196,154,56,.5);
  }
}

/* ── TRUCK SCRUB MOBILE FIX: DO NOT add overflow:hidden to outer — breaks sticky! ── */
@media (max-width: 900px) {
  #truck-scrub-outer {
    width: 100%;
    /* NO overflow: hidden here — it breaks position: sticky on the inner element */
  }
  #truck-scrub-sticky {
    width: 100%;
    overflow: hidden; /* OK here, sticky element itself can have overflow: hidden */
    justify-content: center;
    align-items: center;
  }
  #truck-canvas {
    width: 100% !important;
    max-width: 100vw !important;
    height: 100% !important;
  }
  .ts-label-top {
    left: 16px;
    right: 16px;
    width: auto;
    max-width: calc(100vw - 32px);
    white-space: normal;
  }
  .ts-tag, .ts-sub {
    white-space: normal;
  }
}

/* ── BRAND STRIP: mobile fit ── */
@media (max-width: 900px) {
  .brand-strip {
    width: 100%;
    max-width: 100vw;
    overflow: hidden;
  }
  .brand-item {
    padding: 0 32px;
  }
  .brand-item .brand-wordmark {
    font-size: 18px;
  }
  .brand-item svg {
    height: 24px;
  }
}

/* ── MAP SECTION: mobile ── */
@media (max-width: 900px) {
  .map-section {
    width: 100%;
    max-width: 100vw;
    box-sizing: border-box;
  }
  .map-inner {
    flex-direction: column !important;
    padding: 40px 24px !important;
    gap: 28px !important;
    max-width: 100% !important;
  }
  .map-text-side {
    width: 100% !important;
    max-width: 100% !important;
  }
  .map-embed-wrap {
    width: 100% !important;
  }
  .map-embed-wrap iframe {
    width: 100% !important;
    height: 240px !important;
  }
}

/* ── SECTIONS: prevent horizontal bleed ── */
@media (max-width: 900px) {
  section, .booking-mini, .reviews, .story-intro, .contact-strip, .jfoot {
    max-width: 100%;
    box-sizing: border-box;
    /* NOTE: NO overflow:hidden here — it kills position:sticky on #truck-scrub-outer */
  }
  .story-intro {
    padding: 52px 24px 36px;
  }
  .reviews-inner {
    max-width: 100%;
    padding: 0;
  }
}

/* ── HERO CTA full width on small mobile ── */
@media (max-width: 900px) {
  .h-ctas {
    flex-direction: column;
    gap: 12px;
    width: 100%;
    max-width: 340px;
  }
  .h-ctas .btn-g,
  .h-ctas .btn-o {
    width: 100%;
    justify-content: center;
    text-align: center;
  }
}

/* ══════════════════════════════════════════
   MOBILE FIXES — v8 additions
   ══════════════════════════════════════════ */

/* ── NAV LOGO: 5% smaller on mobile ── */
@media (max-width: 900px) {
  .jnav-logo img {
    height: 30px !important; /* nav logo is 32px desktop, 30px = ~5% smaller */
    width: auto !important;
  }
}

/* ── JOURNEY SECTION: scroll-down indicator after last panel ── */
#journey-scroll-down {
  display: none; /* hidden on desktop — JS shows it on mobile */
}
@media (max-width: 900px) {
  #journey-scroll-down {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 40px 24px 32px;
    background: var(--deep);
    border-top: 1px solid rgba(196,154,56,.12);
    cursor: pointer;
  }
  .jsd-arrow {
    font-size: 32px;
    color: var(--gold);
    animation: bounceDown 1.6s ease infinite;
    display: block;
    line-height: 1;
  }
  .jsd-label {
    font-family: var(--fu);
    font-size: 11px;
    letter-spacing: .38em;
    text-transform: uppercase;
    color: rgba(196,154,56,.7);
    text-align: center;
  }
  .jsd-sub {
    font-family: var(--fu);
    font-size: 12px;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: rgba(196,154,56,.4);
    text-align: center;
  }
}

/* ── TRUCK SCRUB: prominent scroll hint on mobile ── */
@media (max-width: 900px) {
  .ts-scroll-hint {
    opacity: 1 !important; /* always visible on mobile, not hidden behind .active */
    bottom: 24px !important;
  }
  .ts-hint-icon {
    font-size: 36px !important;
    color: rgba(20,20,18,.9) !important;
  }
  .ts-hint-text {
    font-size: 15px !important;
    color: rgba(20,20,18,.9) !important;
  }
  .ts-hint-sub {
    font-size: 11px !important;
    color: rgba(20,20,18,.65) !important;
  }
  /* Mobile panel strip below canvas — ensure visible */
  .ts-mobile-panel {
    display: block !important;
  }
}

/* ══════════════════════════════════════════
   MOBILE FIXES — v8b additions
   ══════════════════════════════════════════ */

/* ── TRUCK: "Keep scrolling DOWN" top prompt — mobile only ── */
.ts-mob-scroll-prompt {
  display: none;
}
@media (max-width: 900px) {
  .ts-mob-scroll-prompt {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    position: absolute;
    top: 72px; /* below nav */
    left: 50%;
    transform: translateX(-50%);
    z-index: 14;
    background: rgba(5,5,5,.65);
    border: 1px solid rgba(196,154,56,.18);
    padding: 10px 20px;
    border-radius: 2px;
    pointer-events: none;
    animation: promptPulse 2.4s ease infinite;
    white-space: nowrap;
  }
  .ts-mob-prompt-icon {
    font-size: 22px;
    color: var(--gold);
    line-height: 1;
    animation: bounceDown 1.4s ease infinite;
    display: block;
  }
  .ts-mob-prompt-text {
    font-family: var(--fu);
    font-size: 12px;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: rgba(196,154,56,.9);
  }
  /* Fade prompt out once user has scrolled into the section */
  .ts-mob-scroll-prompt.hide {
    opacity: 0;
    transition: opacity .6s;
    pointer-events: none;
  }
}
@keyframes promptPulse {
  0%, 100% { opacity: 1; }
  50% { opacity: .6; }
}

/* ── STORY PANELS: swipe indicator — mobile only ── */
.story-swipe-hint {
  display: none;
}
@media (max-width: 900px) {
  .story-swipe-hint {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    position: absolute;
    bottom: 36px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 20;
    pointer-events: none;
    text-align: center;
  }
  .story-swipe-arrow {
    font-size: 26px;
    color: rgba(196,154,56,.9);
    animation: bounceDown 1.6s ease infinite;
    display: block;
    line-height: 1;
  }
  .story-swipe-label {
    font-family: var(--fu);
    font-size: 12px;
    letter-spacing: .28em;
    text-transform: uppercase;
    color: rgba(196,154,56,.7);
    white-space: nowrap;
  }
  /* Last panel uses same style */
  .story-swipe-down {
    bottom: 36px;
  }
  .story-swipe-down .story-swipe-arrow {
    font-size: 30px;
  }
}


/* ── STORY PANEL IMG: restored on mobile ── */
@media (max-width: 900px) {
  /* Make sure story panels are position:relative for absolute children */
  .story-panel {
    position: relative;
  }
}

/* ── RTL LAYOUT SUPPORT ── */
[dir="rtl"] .jnav { direction: rtl; }
[dir="rtl"] .jnav-links { flex-direction: row-reverse; }
[dir="rtl"] .jnav-right { flex-direction: row-reverse; }
[dir="rtl"] .h-stats { direction: rtl; }
[dir="rtl"] .hst-item { text-align: left; flex-direction: row-reverse; }
[dir="rtl"] .hst-l { text-align: left; }
[dir="rtl"] .hero-btns { flex-direction: row-reverse; }
[dir="rtl"] .pcard-content { text-align: right; direction: rtl; }
[dir="rtl"] .pcard-cat { flex-direction: row-reverse; }
[dir="rtl"] .ts-panel { direction: rtl; text-align: right; }
[dir="rtl"] .booking-area { direction: rtl; text-align: right; }
[dir="rtl"] .jfoot { direction: rtl; }
[dir="rtl"] .jfoot-cols { flex-direction: row-reverse; }
[dir="rtl"] .jfoot-col { text-align: right; }
[dir="rtl"] .tick-track { direction: ltr; } /* ticker stays LTR */
[dir="rtl"] .review-card { direction: rtl; text-align: right; }
[dir="rtl"] .rcard-header { flex-direction: row-reverse; }
[dir="rtl"] .val-card { text-align: right; direction: rtl; }
[dir="rtl"] .info-row { flex-direction: row-reverse; text-align: right; }
[dir="rtl"] .map-detail-row { flex-direction: row-reverse; }
[dir="rtl"] .con-left { direction: rtl; text-align: right; }
[dir="rtl"] .con-right { direction: rtl; text-align: right; }
[dir="rtl"] .ed-body { direction: rtl; text-align: right; }
[dir="rtl"] .nb-item { text-align: right; }
[dir="rtl"] .nb-grid { direction: rtl; }
[dir="rtl"] .stage-tag { direction: rtl; }
[dir="rtl"] .stage-text { direction: rtl; text-align: right; }
[dir="rtl"] .cs-row { flex-direction: row-reverse; }
[dir="rtl"] .sh-stats { direction: rtl; flex-direction: row-reverse; }
[dir="rtl"] .sh-stat-l { text-align: left; }
[dir="rtl"] .img-badge { text-align: right; }
[dir="rtl"] .booking-h3 { text-align: right; }
[dir="rtl"] .booking-btns { flex-direction: row-reverse; }

/* RTL font stack */
[dir="rtl"] body,
[dir="rtl"] p,
[dir="rtl"] h1, [dir="rtl"] h2, [dir="rtl"] h3,
[dir="rtl"] .ed-body, [dir="rtl"] .pcard-spec,
[dir="rtl"] .booking-text, [dir="rtl"] .ts-panel-desc,
[dir="rtl"] .stage-text, [dir="rtl"] .review-text {
  font-family: 'Noto Sans Arabic', 'Noto Nastaliq Urdu', var(--fb), sans-serif;
  line-height: 1.9;
}
[lang="hi"] body,
[lang="hi"] p,
[lang="hi"] h1, [lang="hi"] h2, [lang="hi"] h3,
[lang="hi"] .ed-body, [lang="hi"] .pcard-spec,
[lang="hi"] .booking-text, [lang="hi"] .ts-panel-desc,
[lang="hi"] .stage-text, [lang="hi"] .review-text {
  font-family: 'Noto Sans Devanagari', var(--fb), sans-serif;
  line-height: 1.85;
}

/* ══════════════════════════════════════════════
   RTL COMPREHENSIVE LAYOUT FIXES v2
   ══════════════════════════════════════════════ */

/* ── NAV ── */
[dir="rtl"] .jnav { direction: rtl; }
[dir="rtl"] .jnav > * { direction: rtl; }
[dir="rtl"] .jnav-links { flex-direction: row-reverse; }
[dir="rtl"] .jnav-links li { list-style: none; }
[dir="rtl"] .jnav-right { flex-direction: row-reverse; gap: 8px; }
[dir="rtl"] .mob-nav-drawer { direction: rtl; text-align: right; }
[dir="rtl"] .mob-nav-links { text-align: right; }

/* ── HERO ── */
[dir="rtl"] .hero-content { text-align: right; }
[dir="rtl"] .h-tag { text-align: right; }
[dir="rtl"] .h-h1 .row { justify-content: flex-end; }
[dir="rtl"] .h-sub { text-align: right; margin-left: auto; }
[dir="rtl"] .h-ctas { flex-direction: row-reverse; justify-content: flex-end; }
[dir="rtl"] .h-stats { right: auto !important; left: 52px; }
[dir="rtl"] .h-scroll { right: auto !important; left: 88px; }

/* ── TICKER — always LTR ── */
.ticker, .tick-track, .ticker-t, .ticker-i { direction: ltr !important; }

/* ── TRUCK 3D SECTION ── */
[dir="rtl"] .ts-panels { right: 0 !important; left: auto !important; text-align: right; direction: rtl; }
[dir="rtl"] .ts-panel { right: 52px !important; left: auto !important; text-align: right; direction: rtl; }
[dir="rtl"] .ts-panel-title { text-align: right; }
[dir="rtl"] .ts-panel-desc { text-align: right; direction: rtl; }
[dir="rtl"] .ts-panel-note { text-align: right; }
[dir="rtl"] .ts-hint { text-align: right; }
[dir="rtl"] .ts-mobile-panel { text-align: right; direction: rtl; }

/* ── BOOKING ── */
[dir="rtl"] .booking-area { direction: rtl; text-align: right; }
[dir="rtl"] .booking-h3 { text-align: right; }
[dir="rtl"] .booking-text { text-align: right; }
[dir="rtl"] .booking-btns, [dir="rtl"] .booking-ctas { flex-direction: row-reverse; }
[dir="rtl"] .booking-info { text-align: right; }

/* ── JOURNEY SECTION (keep LTR for GSAP scroll) ── */
.story-track, .story-panel { direction: ltr !important; }
[dir="rtl"] .panel-content { text-align: right; direction: rtl; }
[dir="rtl"] .stage-tag { text-align: right; direction: rtl; }
[dir="rtl"] .stage-title { text-align: right; }
[dir="rtl"] .stage-text { text-align: right; direction: rtl; }

/* ── STORY SECTION HEADING ── */
[dir="rtl"] .story-h2, [dir="rtl"] .story-section { text-align: right; direction: rtl; }
[dir="rtl"] .story-sub { text-align: right; }

/* ── REVIEWS ── */
[dir="rtl"] .review-card { direction: rtl; text-align: right; }
[dir="rtl"] .rcard-header { flex-direction: row-reverse; }
[dir="rtl"] .rcard-meta { text-align: right; }
[dir="rtl"] .review-text { text-align: right; direction: rtl; }
[dir="rtl"] .rating-wrap { direction: rtl; text-align: right; }

/* ── PRODUCTS PAGE ── */
[dir="rtl"] .prod-hero { text-align: right; direction: rtl; }
[dir="rtl"] .prod-hero h1, [dir="rtl"] .prod-hero p { text-align: right; }
[dir="rtl"] .filter-bar { direction: rtl; justify-content: flex-end; }
[dir="rtl"] .pcard-content { text-align: right; direction: rtl; }
[dir="rtl"] .pcard-cat { flex-direction: row-reverse; text-align: right; }
[dir="rtl"] .pcard-cat::before { margin-right: 0; margin-left: 8px; }
[dir="rtl"] .pcard-name { text-align: right; }
[dir="rtl"] .pcard-spec { text-align: right; direction: rtl; }
[dir="rtl"] .pcard-cta { text-align: right; }
[dir="rtl"] .pcard-idx { right: auto; left: var(--gutter); }
[dir="rtl"] .prod-bottom { direction: rtl; text-align: right; }
[dir="rtl"] .cs-row { flex-direction: row-reverse; }
[dir="rtl"] .cs-item { text-align: right; direction: rtl; }
[dir="rtl"] .cs-arrow { margin-right: 0; margin-left: 0; transform: scaleX(-1); }
[dir="rtl"] .trucks-grid { direction: rtl; }
[dir="rtl"] .truck-col { text-align: right; }

/* ── CONTACT PAGE ── */
[dir="rtl"] .con-hero { text-align: right; direction: rtl; }
[dir="rtl"] .con-hero h1 { text-align: right; }
[dir="rtl"] .con-left { direction: rtl; text-align: right; }
[dir="rtl"] .con-right { direction: rtl; text-align: right; }
[dir="rtl"] .con-btns { flex-direction: row-reverse; }
[dir="rtl"] .info-row { flex-direction: row-reverse; text-align: right; }
[dir="rtl"] .info-label { text-align: right; }
[dir="rtl"] .info-val { text-align: right; }
[dir="rtl"] .hg-item { text-align: right; }
[dir="rtl"] .hg-day { text-align: right; }
[dir="rtl"] .hg-time { text-align: right; }
[dir="rtl"] .hours-grid { direction: rtl; }
[dir="rtl"] .map-section { direction: rtl; text-align: right; }
[dir="rtl"] .map-detail-row { flex-direction: row-reverse; }
[dir="rtl"] .map-body { text-align: right; }
[dir="rtl"] .dir-title { text-align: right; }
[dir="rtl"] .dir-step { text-align: right; direction: rtl; }
[dir="rtl"] .social-grid { direction: rtl; }

/* ── STORY PAGE ── */
[dir="rtl"] .story-hero { text-align: right; direction: rtl; }
[dir="rtl"] .sh-stats { flex-direction: row-reverse; direction: rtl; }
[dir="rtl"] .sh-stat-l { text-align: left; }
[dir="rtl"] .ed-chapter { direction: rtl; text-align: right; }
[dir="rtl"] .ed-body { direction: rtl; text-align: right; }
[dir="rtl"] .ch-title { text-align: right; }
[dir="rtl"] .img-block { direction: rtl; }
[dir="rtl"] .img-badge { text-align: right; }
[dir="rtl"] .pq-text { text-align: right; direction: rtl; }
[dir="rtl"] .pq-attr { text-align: right; }
[dir="rtl"] .val-grid { direction: rtl; }
[dir="rtl"] .val-card { text-align: right; direction: rtl; }
[dir="rtl"] .nb-grid { direction: rtl; flex-direction: row-reverse; }
[dir="rtl"] .nb-item { text-align: right; }
[dir="rtl"] .nb-n { text-align: right; }
[dir="rtl"] .nb-l { text-align: right; }

/* ── FOOTER ── */
[dir="rtl"] .jfoot { direction: rtl; }
[dir="rtl"] .jfoot-cols { flex-direction: row-reverse; }
[dir="rtl"] .jfoot-col { text-align: right; }
[dir="rtl"] .jfoot-col ul { text-align: right; }
[dir="rtl"] .jfoot-col ul li { text-align: right; }
[dir="rtl"] .jfoot-bottom { flex-direction: row-reverse; }
[dir="rtl"] .jfoot-bottom-links { flex-direction: row-reverse; }

/* ── GALLERY / PROD-GALLERY ── */
[dir="rtl"] .gallery-header { flex-direction: row-reverse; }
[dir="rtl"] .gallery-header p { text-align: left; }

/* ── CS-ROW (cross-sell / CTA rows) ── */
[dir="rtl"] .cs-row, [dir="rtl"] .cs-grid { flex-direction: row-reverse; }
[dir="rtl"] .cs-title { text-align: right; }
[dir="rtl"] .cs-body { text-align: right; direction: rtl; }

/* ── RTL ts-panels: keep position, flip text only ── */
[dir="rtl"] .ts-panels { right: 0; left: auto; }
[dir="rtl"] .ts-panel { right: 52px; left: auto; text-align: right; direction: rtl; }
[dir="rtl"] .ts-panel-desc { text-align: right; direction: rtl; }
[dir="rtl"] .ts-panel-note { text-align: right; }
[dir="rtl"] .ts-panel-num { text-align: right; }
[dir="rtl"] .ts-panel-title { text-align: right; }

/* ── RTL hero tag ── */
[dir="rtl"] .h-tag b { left: auto; right: 0; }