/* ═══════════════════════════════════════════════════════════════
   RANDU TOURS — HERO SECTION  (hero.css)
   Vehicle-on-road cinematic hero with windshield portal zoom
═══════════════════════════════════════════════════════════════ */

/* ── Hero Wrapper ──────────────────────────────────────────── */
.hero-section {
  position: relative;
  height: 100vh;
  min-height: 640px;
  max-height: 1100px;
  display: flex;
  align-items: stretch;
  overflow: hidden;
  padding-top: var(--header-h);
  background: var(--hero-gradient);
}

/* Dot-grid overlay */
.hero-section::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle, hsla(220,68%,80%,0.05) 1px, transparent 1px);
  background-size: 36px 36px;
  pointer-events: none;
  z-index: 1;
}

/* ── Container ─────────────────────────────────────────────── */
.hero-container {
  position: relative;
  z-index: 5;
  display: grid;
  grid-template-columns: 52% 48%;
  gap: var(--sp-32);
  align-items: stretch;
  width: 100%;
  /* only top padding — bottom is handled by scroll hint */
  padding: var(--sp-16) 0 var(--sp-48);
}

/* ── Left side (text + widget) — same as before ────────────── */
.hero-left {
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: clamp(1rem, 2.2vh, 1.8rem);
}

.hero-script-tag {
  color: hsla(350, 85%, 70%, 0.95) !important;
}

.hero-title {
  font-family: var(--font-serif);
  color: var(--white);
  line-height: 1;
  margin: 0;
}
.hero-title .title-line    { display:block; font-size: clamp(3.6rem, 7.5vw, 8rem); letter-spacing:-0.02em; line-height:1; }
.hero-title .title-accent  { color: var(--red); font-style: italic; }
.hero-title .title-sm      { font-size: clamp(2rem, 3.8vw, 3.2rem); color: hsla(0,0%,100%,0.7); font-weight:400; font-style:italic; }

.hero-subtitle {
  font-size: clamp(0.95rem, 1.4vw, 1.1rem);
  color: hsla(0,0%,100%,0.75);
  line-height: 1.6;
  max-width: 480px;
  margin: 0;
}
.hero-subtitle strong { color: var(--red-light); font-weight:700; }

/* Polaroid stack — compact */
.polaroid-stack { position:relative; display:flex; align-items:flex-end; height:130px; margin:0; }
.polaroid { position:absolute; background:var(--white); padding:8px 8px 28px; border-radius:4px; box-shadow:0 8px 28px hsla(0,0%,0%,0.4); transition:transform var(--t-base) var(--ease-smooth); cursor:pointer; width:108px; }
.polaroid:hover { z-index:10; transform:translateY(-10px) rotate(0deg)!important; }
.polaroid-img { width:92px; height:76px; background-size:cover; background-position:center; border-radius:2px; }
.polaroid span { display:block; text-align:center; margin-top:3px; font-size:0.58rem; font-weight:600; color:var(--text-mid); letter-spacing:0.04em; }
.polaroid.rotated-left   { transform:rotate(-8deg); left:0; }
.polaroid.rotated-center { transform:rotate(2deg);  left:86px; z-index:2; }
.polaroid.rotated-right  { transform:rotate(12deg); left:172px; z-index:1; }

/* Booking widget — compact */
.booking-widget { background:hsla(0,0%,100%,0.07); backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px); border:1px solid hsla(0,0%,100%,0.12); border-radius:var(--r-lg); overflow:hidden; margin-top:0; }
.widget-tabs { display:flex; border-bottom:1px solid hsla(0,0%,100%,0.1); }
.widget-tab { flex:1; padding:10px var(--sp-16); font-size:var(--fs-xs); font-weight:600; color:hsla(0,0%,100%,0.55); display:flex; align-items:center; justify-content:center; gap:6px; transition:all var(--t-base); border-bottom:2.5px solid transparent; cursor:pointer; }
.widget-tab.active { color:var(--white); border-bottom-color:var(--red); }
.widget-tab:hover:not(.active) { color:hsla(0,0%,100%,0.8); }
.widget-body { padding:var(--sp-16); display:flex; flex-direction:column; gap:var(--sp-12); }
.widget-pane { display:none; }
.widget-pane.active { display:block; }
.widget-form-grid { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-bottom:10px; }
.widget-form-grid .form-group { display:flex; flex-direction:column; gap:4px; }
.widget-form-grid .form-group label { color:hsla(0,0%,100%,0.65); font-size:0.68rem; font-weight:600; letter-spacing:0.04em; text-transform:uppercase; display:flex; align-items:center; gap:4px; }
.widget-form-grid .form-group label i { font-size:0.6rem; color:var(--red-light); }
.widget-form-grid .form-group input,
.widget-form-grid .form-group select { background:hsla(0,0%,100%,0.08); border:1px solid hsla(0,0%,100%,0.15); color:var(--white); border-radius:8px; font-size:0.8rem; padding:7px 10px; width:100%; outline:none; }
.widget-form-grid .form-group select option { background:var(--blue-dark); color:var(--white); }
.widget-form-grid .form-group input:focus,
.widget-form-grid .form-group select:focus { border-color:var(--red); box-shadow:0 0 0 2px hsla(350,72%,45%,0.2); }
.widget-form-grid .form-group input::placeholder { color:hsla(0,0%,100%,0.3); }


/* ═══════════════════════════════════════════════════════════════
   RIGHT SIDE — VEHICLE ON ROAD SCENE
═══════════════════════════════════════════════════════════════ */
.hero-right {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: stretch;
  /* fill the full height of the grid row */
  min-height: 0;
  flex: 1;
}

/* ── Road Scene Container ──────────────────────────────────── */
.road-scene {
  /* fill parent completely — stretches to hero-right height */
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: var(--r-xl);
  overflow: hidden;
  background: linear-gradient(
    180deg,
    hsl(207,70%,55%) 0%,
    hsl(207,60%,70%) 28%,
    hsl(207,40%,82%) 42%,
    hsl(130,40%,55%) 43%,
    hsl(130,50%,40%) 55%,
    hsl(210,15%,28%) 55%,
    hsl(210,15%,22%) 100%
  );
  box-shadow: 0 24px 80px hsla(220,72%,12%,0.6),
              0 0 0 2px hsla(350,72%,45%,0.25),
              inset 0 0 80px hsla(220,72%,8%,0.15);
}

/* Sky clouds */
.rs-cloud {
  position: absolute;
  background: hsla(0,0%,100%,0.7);
  border-radius: 50px;
  animation: cloudDrift linear infinite;
}
.rs-cloud-1 { width:120px; height:36px; top:8%; left:10%; animation-duration:28s; }
.rs-cloud-2 { width:80px;  height:26px; top:14%; left:55%; animation-duration:22s; animation-delay:-8s; }
.rs-cloud-3 { width:100px; height:30px; top:6%;  left:70%; animation-duration:32s; animation-delay:-14s; }
.rs-cloud::before,
.rs-cloud::after {
  content:'';
  position:absolute;
  background:inherit;
  border-radius:50%;
}
.rs-cloud::before { width:60%; height:200%; top:-80%; left:15%; }
.rs-cloud::after  { width:40%; height:160%; top:-60%; left:45%; }

@keyframes cloudDrift {
  from { transform:translateX(-130px); }
  to   { transform:translateX(calc(100vw + 130px)); }
}

/* Mountains / treeline */
.rs-mountains {
  position: absolute;
  bottom: 47%;
  left: 0; right: 0;
  height: 100px;
  background:
    linear-gradient(135deg,
      hsl(130,50%,35%) 0%,
      hsl(130,40%,42%) 100%);
  clip-path: polygon(
    0% 100%,
    0% 60%, 5% 30%, 10% 60%, 15% 20%, 22% 65%,
    28% 35%, 35% 70%, 42% 15%, 48% 60%,
    55% 25%, 62% 65%, 70% 30%, 78% 60%,
    85% 20%, 90% 55%, 95% 35%, 100% 60%, 100% 100%
  );
}

/* Road surface (perspective trapezoid) */
.rs-road {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  height: 58%;
  background: hsl(210, 12%, 24%);
  clip-path: polygon(32% 0%, 68% 0%, 100% 100%, 0% 100%);
}

/* Road centre lines — animated to simulate movement */
.rs-road-lines {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  height: 58%;
  clip-path: polygon(32% 0%, 68% 0%, 100% 100%, 0% 100%);
  pointer-events: none;
  overflow: hidden;
}

.rs-dash {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  background: hsl(50, 90%, 65%);
  border-radius: 4px;
  animation: dashMove 0.8s linear infinite;
}
.rs-dash:nth-child(1) { width:4px; height:40px; bottom:75%; animation-delay:0s; }
.rs-dash:nth-child(2) { width:5px; height:55px; bottom:55%; animation-delay:-0.2s; }
.rs-dash:nth-child(3) { width:7px; height:72px; bottom:35%; animation-delay:-0.4s; }
.rs-dash:nth-child(4) { width:10px;height:90px; bottom:12%; animation-delay:-0.6s; }

@keyframes dashMove {
  from { transform: translateX(-50%) translateY(0); opacity:1; }
  to   { transform: translateX(-50%) translateY(120px); opacity:0.3; }
}

/* Road side lines (white) */
.rs-side-lines {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 58%;
  pointer-events: none;
}
.rs-side-line-l,
.rs-side-line-r {
  position: absolute;
  bottom: 0;
  width: 3px;
  height: 100%;
  background: linear-gradient(to top, hsla(0,0%,100%,0.6), transparent);
}
.rs-side-line-l { left: 0%;  transform: skew(-20deg); transform-origin: bottom; }
.rs-side-line-r { right: 0%; transform: skew(20deg);  transform-origin: bottom; }

/* Roadside grass edges */
.rs-grass-l,
.rs-grass-r {
  position: absolute;
  bottom: 0;
  width: 32%;
  height: 58%;
  background: linear-gradient(180deg, hsl(130,50%,38%), hsl(130,45%,30%));
}
.rs-grass-l { left: 0;  clip-path: polygon(0 0, 100% 0, 0 100%); }
.rs-grass-r { right: 0; clip-path: polygon(0 0, 100% 0, 100% 100%); }

/* ── PALM TREES (animated past) ───────────────────────────── */
.rs-trees {
  position: absolute;
  bottom: 44%;
  left: 0; right: 0;
  height: 120px;
  pointer-events: none;
  z-index: 2;
}

.rs-tree {
  position: absolute;
  bottom: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  animation: treeSway 4s ease-in-out infinite alternate;
}

.rs-tree-trunk {
  width: 8px;
  background: linear-gradient(to right, hsl(30,40%,35%), hsl(30,40%,50%));
  border-radius: 4px 4px 0 0;
}
.rs-tree-crown {
  font-size: 1.6rem;
  line-height: 1;
  transform: translateY(4px);
  filter: saturate(0.8) brightness(0.85);
}

.rs-tree.left-1  { left:3%;  }
.rs-tree.left-2  { left:10%; transform:scale(0.75); transform-origin:bottom; }
.rs-tree.right-1 { right:3%; }
.rs-tree.right-2 { right:10%; transform:scale(0.75); transform-origin:bottom; }

.rs-tree.left-1  .rs-tree-trunk { height: 55px; }
.rs-tree.left-2  .rs-tree-trunk { height: 40px; }
.rs-tree.right-1 .rs-tree-trunk { height: 55px; }
.rs-tree.right-2 .rs-tree-trunk { height: 40px; }

@keyframes treeSway {
  from { transform-origin: bottom center; transform: rotate(-2deg); }
  to   { transform-origin: bottom center; transform: rotate(2deg);  }
}
.rs-tree.left-2  { animation-delay: 0.5s; }
.rs-tree.right-1 { animation-delay: 0.8s; }
.rs-tree.right-2 { animation-delay: 0.3s; }


/* ═══════════════════════════════════════════════════════════════
   THE VEHICLE — Toyota KDH Van (front-face, CSS-drawn)
═══════════════════════════════════════════════════════════════ */
.hero-van {
  position: absolute;
  bottom: 10%;
  left: 50%;
  transform: translateX(-50%);
  /* wider van fills the road better */
  width: clamp(240px, 48%, 340px);
  z-index: 10;
  transform-origin: bottom center;
  animation: vanBounce 1.8s ease-in-out infinite alternate;
}

@keyframes vanBounce {
  from { transform: translateX(-50%) translateY(0px);   }
  to   { transform: translateX(-50%) translateY(-5px); }
}

/* Van body */
.van-body {
  position: relative;
  background: linear-gradient(160deg,
    hsl(220,50%,88%) 0%,
    hsl(220,45%,78%) 40%,
    hsl(220,40%,65%) 100%);
  border-radius: 16px 16px 6px 6px;
  padding: 12px 16px 18px;
  box-shadow:
    0 4px 0 hsl(220,40%,55%),
    0 8px 0 hsl(220,40%,45%),
    0 12px 32px hsla(0,0%,0%,0.6),
    inset 0 1px 0 hsla(0,0%,100%,0.4);
}

/* Van roof raised section */
.van-roof {
  position: absolute;
  top: -28px; left: 20px; right: 20px;
  height: 32px;
  background: linear-gradient(160deg,
    hsl(220,48%,84%) 0%,
    hsl(220,44%,74%) 100%);
  border-radius: 12px 12px 0 0;
  box-shadow: inset 0 1px 0 hsla(0,0%,100%,0.35);
}

/* Red stripe on top (matches logo) */
.van-stripe {
  position: absolute;
  left: 0; right: 0;
  height: 6px;
  background: linear-gradient(90deg, var(--red) 0%, var(--red-light) 50%, var(--red) 100%);
}
.van-stripe.top    { top: 0; border-radius: 16px 16px 0 0; }
.van-stripe.bottom { bottom: 18px; }

/* ── WINDSHIELD (the portal window) ─────────────────────────── */
.van-windshield {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: 10px 10px 4px 4px;
  overflow: hidden;
  background: hsl(210,40%,15%);
  box-shadow:
    inset 0 3px 16px hsla(0,0%,0%,0.5),
    0 0 0 3px hsl(220,30%,55%),
    0 0 0 5px hsl(220,30%,45%);
}

/* Sri Lanka place image inside windshield */
.ws-img {
  position: absolute;
  inset: -5%;
  background-size: cover;
  background-position: center;
  transition: opacity 0.6s ease, transform 0.6s ease;
  transform: scale(1.05);
}

/* Windshield glare / reflection */
.ws-glare {
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 40%;
  background: linear-gradient(
    160deg,
    hsla(0,0%,100%,0.18) 0%,
    transparent 70%
  );
  pointer-events: none;
  z-index: 2;
  border-radius: 10px 10px 0 0;
}

/* Windshield wiper (decorative) */
.ws-wiper {
  position: absolute;
  bottom: 25%;
  left: 50%;
  transform: translateX(-50%) rotate(-30deg);
  transform-origin: left center;
  width: 70%;
  height: 2px;
  background: hsla(0,0%,0%,0.5);
  border-radius: 2px;
  z-index: 3;
}
.ws-wiper::before {
  content:'';
  position:absolute;
  right:-4px; top:-2px;
  width:8px; height:6px;
  background: hsla(0,0%,0%,0.5);
  border-radius:2px;
}

/* Location tag inside windshield */
.ws-location-tag {
  position: absolute;
  bottom: var(--sp-8);
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 6px;
  background: hsla(0,0%,0%,0.6);
  backdrop-filter: blur(8px);
  color: var(--white);
  font-size: 0.65rem;
  font-weight: 700;
  padding: 5px 12px;
  border-radius: var(--r-pill);
  border: 1px solid hsla(0,0%,100%,0.15);
  white-space: nowrap;
  z-index: 4;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.ws-location-tag i { color: var(--red-light); }

/* ── Side windows ──────────────────────────────────────────── */
.van-side-windows {
  display: flex;
  justify-content: space-between;
  margin-top: 6px;
  gap: 6px;
}
.van-side-win {
  flex: 1;
  height: 32px;
  background: linear-gradient(160deg,
    hsl(200,60%,70%) 0%,
    hsl(200,50%,50%) 100%);
  border-radius: 4px;
  box-shadow: inset 0 2px 8px hsla(0,0%,0%,0.3);
  position: relative;
  overflow: hidden;
}
.van-side-win::after {
  content:'';
  position:absolute;
  top:0; left:0; right:0;
  height:50%;
  background: hsla(0,0%,100%,0.15);
}

/* ── Front grill + headlights ──────────────────────────────── */
.van-front {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 8px;
  gap: 6px;
}

.van-headlight {
  width: 38px;
  height: 20px;
  background: linear-gradient(135deg,
    hsl(55,100%,90%) 0%,
    hsl(50,90%,75%) 100%);
  border-radius: 6px;
  box-shadow:
    0 0 12px 4px hsla(55,100%,75%,0.6),
    0 0 24px 8px hsla(55,100%,75%,0.25);
  animation: headlightPulse 2.5s ease-in-out infinite alternate;
}
@keyframes headlightPulse {
  from { box-shadow: 0 0 12px 4px hsla(55,100%,75%,0.6),  0 0 24px 8px hsla(55,100%,75%,0.25); }
  to   { box-shadow: 0 0 20px 8px hsla(55,100%,75%,0.85), 0 0 40px 16px hsla(55,100%,75%,0.4); }
}

.van-grille {
  flex: 1;
  height: 20px;
  background: hsl(220,30%,28%);
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 0 6px;
  box-shadow: inset 0 2px 6px hsla(0,0%,0%,0.5);
}
.van-grille-bar {
  flex: 1;
  height: 6px;
  background: hsl(220,25%,40%);
  border-radius: 2px;
}

/* Red accent stripe on grille */
.van-grille::after {
  content:'';
  position:absolute;
  width:60px;
  height:3px;
  background:var(--red);
  border-radius:2px;
  margin-top:0;
}

/* Logo plate */
.van-plate {
  text-align: center;
  font-size: 0.55rem;
  font-weight: 800;
  letter-spacing: 0.2em;
  color: hsl(220,30%,30%);
  background: hsl(50,80%,90%);
  border: 1.5px solid hsl(220,30%,55%);
  border-radius: 3px;
  padding: 2px 10px;
  margin: 6px auto 0;
  width: fit-content;
}

/* ── Wheels ────────────────────────────────────────────────── */
.van-wheels {
  position: absolute;
  bottom: -18px;
  left: -10px; right: -10px;
  display: flex;
  justify-content: space-between;
}

.van-wheel {
  width: 54px;
  height: 54px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 35% 35%,
      hsl(210,15%,35%) 0%,
      hsl(210,15%,20%) 40%,
      hsl(210,10%,12%) 100%);
  box-shadow:
    0 4px 12px hsla(0,0%,0%,0.5),
    inset 0 2px 6px hsla(0,0%,100%,0.08);
  position: relative;
  animation: wheelSpin 0.4s linear infinite;
}
.van-wheel::before {
  content:'';
  position:absolute;
  inset:8px;
  border-radius:50%;
  background:
    radial-gradient(circle at 35% 35%,
      hsl(210,15%,50%) 0%,
      hsl(210,15%,35%) 60%,
      hsl(210,10%,22%) 100%);
}
.van-wheel::after {
  content:'';
  position:absolute;
  inset:18px;
  border-radius:50%;
  background: hsl(210,8%,55%);
}

@keyframes wheelSpin {
  to { transform: rotate(360deg); }
}

/* ── Van Shadow on road ─────────────────────────────────────── */
.van-shadow {
  position: absolute;
  bottom: -8px;
  left: 50%;
  transform: translateX(-50%);
  width: 85%;
  height: 16px;
  background: hsla(0,0%,0%,0.45);
  border-radius: 50%;
  filter: blur(8px);
}

/* ── Road dust / motion blur ────────────────────────────────── */
.van-dust {
  position: absolute;
  bottom: -4px;
  left: -20px; right: -20px;
  height: 20px;
  background: radial-gradient(ellipse at center bottom,
    hsla(210,15%,60%,0.3) 0%,
    transparent 70%);
  filter: blur(4px);
  animation: dustPulse 0.8s ease-in-out infinite alternate;
}
@keyframes dustPulse {
  from { opacity:0.4; transform:scaleX(0.9); }
  to   { opacity:0.8; transform:scaleX(1.1); }
}

/* ── WINDSHIELD ZOOM OVERLAY (full-screen during scroll) ────── */
.ws-zoom-portal {
  position: fixed;
  inset: 0;
  z-index: 998;
  pointer-events: none;
  opacity: 0;
  background-size: cover;
  background-position: center;
  transition: opacity 0.3s ease;
}
.ws-zoom-portal.visible {
  opacity: 1;
  pointer-events: auto;
}

/* ── Location badge — INSIDE road-scene, top-right corner ─────── */
.scene-location-float {
  position: absolute;
  top: var(--sp-12);
  right: var(--sp-12);
  /* NOT outside — sits inside the road scene frame */
  z-index: 20;
  display: flex;
  flex-direction: column;
  gap: 3px;
  align-items: flex-end;
  animation: float 4s ease-in-out infinite;
  pointer-events: none;
}
.scene-location-float .loc-badge {
  background: hsla(0,0%,0%,0.65);
  backdrop-filter: blur(10px);
  color: var(--white);
  font-size: 0.68rem;
  font-weight: 700;
  padding: 5px 12px;
  border-radius: var(--r-pill);
  border: 1px solid hsla(350,72%,55%,0.45);
  white-space: nowrap;
  display: flex;
  align-items: center;
  gap: 5px;
}
.scene-location-float .loc-badge i { color: var(--red-light); font-size:0.6rem; }
.scene-location-float .loc-sub {
  font-size: 0.58rem;
  color: hsla(0,0%,100%,0.5);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-align: right;
  padding-right: 4px;
}

/* ── Floating decorations around scene ──────────────────────── */
.hero-floats {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 2;
}

.float-el {
  position: absolute;
  animation: float 6s ease-in-out infinite;
}

.cloud-1  { top:15%; left:4%;   font-size:2.5rem; color:hsla(0,0%,100%,0.08); animation-duration:9s; }
.cloud-2  { top:55%; right:5%;  font-size:1.8rem; color:hsla(0,0%,100%,0.05); animation-duration:11s; animation-delay:2s; }
.plane-dash { top:22%; right:18%; font-size:1.2rem; color:hsla(350,85%,65%,0.5); animation-duration:7s; transform:rotate(45deg); }
.heart-orange { top:72%; left:8%;  font-size:0.85rem; color:var(--red);           opacity:0.7; animation-duration:5s; }
.heart-blue   { top:38%; left:2%;  font-size:0.7rem;  color:hsl(200,80%,65%);    opacity:0.5; animation-delay:1.5s; }
.heart-yellow { bottom:22%; right:4%; font-size:0.75rem; color:#F59E0B;           opacity:0.5; animation-delay:0.8s; }

/* ── Scroll hint ────────────────────────────────────────────── */
.hero-scroll-hint {
  position: absolute;
  bottom: var(--sp-20);
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  z-index: 5;
  animation: fadeUpIn 1s var(--ease-smooth) 2.5s both;
}
.hero-scroll-hint span {
  font-size: 0.6rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: hsla(0,0%,100%,0.35);
}
.scroll-hint-bar {
  width: 1.5px;
  height: 36px;
  background: linear-gradient(to bottom, var(--red), transparent);
  border-radius: var(--r-pill);
  animation: scrollBarPulse 1.5s ease-in-out infinite;
}
@keyframes scrollBarPulse {
  0%,100% { height:36px; opacity:1; }
  50%      { height:52px; opacity:0.4; }
}

/* ══════════════════════════════════════
   MOBILE HERO
══════════════════════════════════════ */
@media (max-width: 1024px) {
  .hero-section { height:auto; max-height:none; }
  .hero-container {
    grid-template-columns: 1fr;
    text-align: center;
    gap: var(--sp-24);
    padding: var(--sp-20) 0 var(--sp-64);
  }
  .hero-right { order:-1; min-height:320px; height:38vh; }
  .hero-left {
  height: 100%; gap: var(--sp-12); }
  .widget-form-grid { grid-template-columns:1fr 1fr; }
  .hero-title .title-line,
  .hero-title .title-accent { font-size: clamp(2rem,8vw,3.5rem); }
  .hero-title .title-sm { font-size: clamp(1.4rem,5vw,2rem); }
  .hero-van { width: clamp(140px, 35%, 220px); }
  .scene-location-float { top:var(--sp-8); right:var(--sp-8); }
  .hero-subtitle { max-width: 100%; }
  .polaroid-stack { justify-content:center; }
}

@media (max-width: 768px) {
  .hero-right { min-height:260px; height:32vh; }
  .hero-van   { width: clamp(120px, 36%, 180px); }
  .widget-form-grid { grid-template-columns:1fr; }
}

@media (max-width: 480px) {
  .hero-container { padding: var(--sp-12) var(--sp-12) var(--sp-48); }
  .rs-tree.left-2, .rs-tree.right-2 { display:none; }
}


/* ══════════════════════════════════════════════════════════════
   HERO CTA BUTTONS + STATS ROW
══════════════════════════════════════════════════════════════ */

/* CTA row */
.hero-ctas {
  display: flex;
  align-items: center;
  gap: var(--sp-20);
  flex-wrap: wrap;
}

/* Primary WhatsApp button */
.hero-btn-primary {
  background: linear-gradient(135deg, var(--red) 0%, var(--red-hover) 100%);
  color: var(--white);
  padding: 16px 36px;
  border-radius: var(--r-pill);
  font-weight: 700;
  font-size: 1.05rem;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  box-shadow: 0 8px 24px hsla(350,72%,45%,0.4),
              0 0 0 1px hsla(350,72%,60%,0.2);
  transition: all 0.3s var(--ease-smooth);
  text-decoration: none;
}
.hero-btn-primary:hover {
  transform: translateY(-3px);
  box-shadow: 0 16px 40px hsla(350,72%,45%,0.55),
              0 0 0 1px hsla(350,72%,60%,0.35);
  background: linear-gradient(135deg, var(--red-light) 0%, var(--red) 100%);
}

/* Ghost outline button */
.btn-ghost-hero {
  background: transparent;
  border: 2px solid hsla(0,0%,100%,0.35);
  color: var(--white);
  padding: 14px 32px;
  border-radius: var(--r-pill);
  font-weight: 600;
  font-size: 1.05rem;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: all 0.3s var(--ease-smooth);
  text-decoration: none;
}
.btn-ghost-hero:hover {
  background: hsla(0,0%,100%,0.1);
  border-color: hsla(0,0%,100%,0.6);
  transform: translateY(-2px);
}
.btn-ghost-hero i { transition: transform 0.3s var(--ease-bounce); }
.btn-ghost-hero:hover i { transform: translateX(4px); }

/* Stats row */
.hero-stats-row {
  display: flex;
  align-items: center;
  gap: var(--sp-20);
  padding: var(--sp-16) 0 0;
}

.hero-stat {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.hs-num {
  font-family: var(--font-serif);
  font-size: clamp(2rem, 3.5vw, 2.8rem);
  font-weight: 700;
  color: var(--white);
  line-height: 1;
}
.hs-num sup {
  font-size: 0.55em;
  vertical-align: super;
  color: var(--red-light);
}

.hs-lbl {
  font-size: 0.75rem;
  font-weight: 600;
  color: hsla(0,0%,100%,0.5);
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.hs-sep {
  width: 1px;
  height: 44px;
  background: hsla(0,0%,100%,0.15);
}

/* Mobile adjustments for new hero elements */
@media (max-width: 1024px) {
  .hero-ctas { justify-content: center; }
  .hero-stats-row { justify-content: center; }
}


/* ══════════════════════════════════════════════════════════════
   QUICK BOOK SECTION
══════════════════════════════════════════════════════════════ */

.quick-book-section {
  background: var(--blue-darker, hsl(220,75%,13%));
  padding: var(--sp-64) 0;
  position: relative;
  overflow: hidden;
}

/* Diagonal top divider */
.quick-book-section::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 4px;
  background: linear-gradient(90deg,
    var(--red) 0%,
    var(--blue-light) 50%,
    var(--red) 100%);
}

/* Subtle dot pattern */
.quick-book-section::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle, hsla(220,68%,80%,0.04) 1px, transparent 1px);
  background-size: 30px 30px;
  pointer-events: none;
}

/* Header */
.qb-section-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--sp-32);
  margin-bottom: var(--sp-40);
}

.qb-header-left { flex: 1; }

.qb-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: hsla(350,72%,45%,0.15);
  border: 1px solid hsla(350,72%,45%,0.3);
  color: var(--red-light);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 5px 14px;
  border-radius: var(--r-pill);
  margin-bottom: var(--sp-12);
}

.qb-title {
  font-family: var(--font-serif);
  font-size: clamp(1.8rem, 3.5vw, 2.8rem);
  color: var(--white);
  line-height: 1.1;
  margin: 0 0 var(--sp-8);
}

.qb-subtitle {
  color: hsla(0,0%,100%,0.55);
  font-size: clamp(0.95rem, 1.4vw, 1.1rem);
  margin: 0;
}

/* Trust badges on the right */
.qb-trust-badges {
  display: flex;
  gap: var(--sp-24);
  flex-shrink: 0;
}

.qb-trust-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  color: hsla(0,0%,100%,0.55);
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.qb-trust-item i {
  font-size: 1.3rem;
  color: var(--red-light);
}

/* The card */
.qb-card {
  background: hsla(0,0%,100%,0.04);
  border: 1px solid hsla(0,0%,100%,0.1);
  border-radius: 20px;
  overflow: hidden;
  backdrop-filter: blur(10px);
  box-shadow: 0 32px 80px hsla(0,0%,0%,0.3);
}

/* Tabs */
.qb-tabs {
  display: flex;
  background: hsla(0,0%,0%,0.2);
  border-bottom: 1px solid hsla(0,0%,100%,0.08);
}

.qb-tab {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: var(--sp-16) var(--sp-24);
  font-size: var(--fs-sm);
  font-weight: 600;
  color: hsla(0,0%,100%,0.45);
  border: none;
  background: transparent;
  cursor: pointer;
  border-bottom: 3px solid transparent;
  transition: all 0.25s ease;
  position: relative;
}

.qb-tab i { font-size: 0.9rem; }

.qb-tab.active {
  color: var(--white);
  border-bottom-color: var(--red);
  background: hsla(0,0%,100%,0.04);
}

.qb-tab:hover:not(.active) {
  color: hsla(0,0%,100%,0.75);
  background: hsla(0,0%,100%,0.03);
}

/* Panes */
.qb-pane { display: none; }
.qb-pane.active { display: block; }

/* Form row — all fields in a horizontal line */
.qb-form-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr) auto;
  gap: var(--sp-20);
  align-items: end;
  padding: var(--sp-28, 1.75rem) var(--sp-32);
}

@media (min-width: 1101px) {
  .qb-transfer-grid {
    grid-template-columns: repeat(4, 1fr) !important;
  }
  .qb-transfer-grid .qb-submit-btn {
    grid-column: span 2 !important;
  }
  .qb-tour-grid {
    grid-template-columns: repeat(3, 1fr) !important;
  }
  .qb-tour-grid .qb-submit-btn {
    grid-column: span 2 !important;
  }
  .qb-vehicle-grid {
    grid-template-columns: repeat(3, 1fr) !important;
  }
}

/* Individual field */
.qb-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.qb-field label {
  font-size: 0.68rem;
  font-weight: 700;
  color: hsla(0,0%,100%,0.55);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  display: flex;
  align-items: center;
  gap: 5px;
}

.qb-field label i {
  color: var(--red-light);
  font-size: 0.6rem;
}

.qb-field input {
  background: hsla(0,0%,100%,0.07);
  border: 1.5px solid hsla(0,0%,100%,0.12);
  color: var(--white);
  border-radius: 10px;
  font-size: var(--fs-sm);
  padding: 11px 14px;
  outline: none;
  width: 100%;
  transition: border-color 0.25s, box-shadow 0.25s;
  font-family: var(--font-sans);
}

.qb-field select {
  background: hsla(0,0%,100%,0.07);
  border: 1.5px solid hsla(0,0%,100%,0.12);
  color: var(--white);
  border-radius: 10px;
  font-size: var(--fs-sm);
  padding: 11px 36px 11px 14px !important;
  outline: none;
  width: 100%;
  transition: border-color 0.25s, box-shadow 0.25s;
  font-family: var(--font-sans);
}

.qb-field input::placeholder { color: hsla(0,0%,100%,0.3); }

.qb-field select option { background: hsl(220,72%,18%); color: var(--white); }

.qb-field input:focus,
.qb-field select:focus {
  border-color: var(--red);
  box-shadow: 0 0 0 3px hsla(350,72%,45%,0.18);
}

/* Book submit button */
.qb-submit-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 13px 28px;
  background: linear-gradient(135deg, var(--red) 0%, var(--red-hover) 100%);
  color: var(--white);
  border: none;
  border-radius: 10px;
  font-weight: 700;
  font-size: var(--fs-sm);
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.3s var(--ease-smooth);
  box-shadow: 0 6px 20px hsla(350,72%,45%,0.4);
  font-family: var(--font-sans);
  height: 46px;
}

.qb-submit-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 32px hsla(350,72%,45%,0.55);
  background: linear-gradient(135deg, var(--red-light) 0%, var(--red) 100%);
}

.qb-submit-btn i { font-size: 1rem; }

/* Responsive */
@media (max-width: 1100px) {
  .qb-form-row {
    grid-template-columns: 1fr 1fr;
    gap: var(--sp-12);
  }
  .qb-submit-btn {
    grid-column: 1 / -1;
    width: 100%;
  }
}

@media (max-width: 768px) {

  /* Section padding — tighter on mobile */
  .quick-book-section {
    padding: var(--sp-48) 0;
  }

  /* Header stacks, centered */
  .qb-section-header {
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: var(--sp-20);
    margin-bottom: var(--sp-28);
  }

  .qb-header-left {
    width: 100%;
  }

  .qb-title {
    font-size: clamp(1.5rem, 6vw, 2rem);
  }

  .qb-subtitle {
    font-size: 0.92rem;
  }

  /* Trust badges — horizontal row, centered */
  .qb-trust-badges {
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: var(--sp-20);
    width: 100%;
    margin-bottom: var(--sp-24);
  }

  .qb-trust-item {
    flex-direction: column;
    align-items: center;
    font-size: 0.65rem;
    gap: 4px;
    min-width: 70px;
  }

  .qb-trust-item i {
    font-size: 1.1rem;
  }

  /* Tabs — single row, no wrap, equal width */
  .qb-tabs {
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
  }

  .qb-tabs::-webkit-scrollbar {
    display: none;
  }

  .qb-tab {
    flex: 1;
    min-width: 0;
    padding: 12px 8px;
    font-size: 0.72rem;
    gap: 5px;
    white-space: nowrap;
  }

  .qb-tab i {
    font-size: 0.8rem;
  }

  /* Form — single column, compact */
  .qb-form-row {
    grid-template-columns: 1fr;
    gap: var(--sp-12);
    padding: var(--sp-16) var(--sp-16);
  }

  /* Book Now button full width */
  .qb-submit-btn {
    grid-column: 1 / -1;
    width: 100%;
    height: 50px;
    font-size: 1rem;
    margin-top: 4px;
  }

  /* Card border radius smaller */
  .qb-card {
    border-radius: 14px;
  }

  /* Fields */
  .qb-field label {
    font-size: 0.7rem;
  }

  .qb-field input,
  .qb-field select {
    padding: 12px 12px;
    font-size: 0.9rem;
  }
}


/* ═══════════════════════════════════════════════════════════════
   HERO FULL-BLEED LAYOUT OVERRIDES  (must come last)
   Breaks hero-container free from .container max-width/padding
═══════════════════════════════════════════════════════════════ */

/* The section itself centres the container vertically */
.hero-section {
  align-items: center !important;
}

/* Override .container inherited constraints inside hero */
.hero-section .hero-container {
  max-width: 100% !important;
  padding-left:  max(4vw, 2rem) !important;
  padding-right: max(4vw, 2rem) !important;
  padding-top:   0 !important;
  padding-bottom: 4vh !important;
  margin: 0 !important;
}

/* Left column: use full column height, spaced evenly */
.hero-left {
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: clamp(1.1rem, 2.2vh, 2rem) !important;
  padding-right: 2vw;
}

/* Script "It's Time To" bigger */
.hero-script-tag {
  font-size: clamp(1.1rem, 1.8vw, 1.5rem) !important;
}

/* Main title lines */
.hero-title { margin: 0 !important; }
.hero-title .title-line   { font-size: clamp(3.8rem, 8vw, 8rem) !important; line-height: 0.95 !important; }
.hero-title .title-sm     { font-size: clamp(2rem, 4vw, 3.4rem)  !important; margin-top: 0.15em; }

/* Subtitle */
.hero-subtitle {
  font-size: clamp(0.95rem, 1.3vw, 1.15rem) !important;
  line-height: 1.65 !important;
  max-width: 520px !important;
  color: hsla(0,0%,100%,0.82) !important;
}

/* Polaroid stack bigger */
.polaroid-stack {
  height: clamp(110px, 14vh, 150px) !important;
  margin: 0 !important;
}
.polaroid {
  width: clamp(90px, 10vw, 120px) !important;
  padding: 8px 8px 28px !important;
}
.polaroid-img {
  width: 100% !important;
  height: clamp(65px, 8vw, 90px) !important;
}
.polaroid.rotated-left   { left: 0 !important; }
.polaroid.rotated-center { left: clamp(65px, 8vw, 90px) !important; }
.polaroid.rotated-right  { left: clamp(130px, 16vw, 180px) !important; }

/* CTA buttons row */
.hero-ctas {
  gap: clamp(0.75rem, 1.5vw, 1.5rem) !important;
  flex-wrap: nowrap !important;
}
.hero-btn-primary,
.btn-ghost-hero {
  padding: clamp(13px, 1.5vh, 18px) clamp(24px, 3vw, 42px) !important;
  font-size: clamp(0.95rem, 1.2vw, 1.1rem) !important;
}

/* Stats row */
.hero-stats-row {
  gap: clamp(1rem, 2.5vw, 2rem) !important;
  padding-top: 0 !important;
}
.hs-num { font-size: clamp(2rem, 3.5vw, 3rem) !important; }
.hs-lbl { font-size: clamp(0.7rem, 0.9vw, 0.85rem) !important; }
.hs-sep { height: clamp(36px, 5vh, 52px) !important; }

/* Road scene: full right column */
.hero-right {
  min-height: 0 !important;
  height: 100% !important;
  align-self: stretch !important;
}
.road-scene {
  height: 100% !important;
  min-height: clamp(350px, 55vh, 640px) !important;
}

/* Van bigger */
.hero-van {
  width: clamp(260px, 50%, 360px) !important;
}

/* Scroll hint at very bottom */
.hero-scroll-hint {
  bottom: max(12px, 1.5vh) !important;
}

/* ── MOBILE: single column ── */
@media (max-width: 900px) {
  .hero-section .hero-container {
    grid-template-columns: 1fr !important;
    padding-left: max(5vw, 1.5rem) !important;
    padding-right: max(5vw, 1.5rem) !important;
    padding-top: 1rem !important;
    padding-bottom: 5rem !important;
    gap: 1.5rem !important;
  }
  .hero-right { order: -1; height: clamp(260px, 40vw, 400px) !important; }
  .hero-left { padding-right: 0 !important; text-align: center; }
  .hero-ctas { justify-content: center !important; flex-wrap: wrap !important; }
  .hero-stats-row { justify-content: center !important; }
  .hero-subtitle { max-width: 100% !important; }
  .polaroid-stack { justify-content: center !important; left: 50% !important; transform: translateX(-50%) !important; width: 250px !important; }
}


/* ═══════════════════════════════════════════════════════════════
   DESTINATION SLIDER  (replaces road-scene in hero-right)
═══════════════════════════════════════════════════════════════ */

/* Hero-right now just holds the slider */
.hero-right {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
  align-self: stretch;
}

/* Slider wrapper fills hero-right */
.dest-slider {
  display: flex;
  flex-direction: column;
  height: 100%;
  gap: 0;
  background: hsla(0,0%,100%,0.04);
  border: 1px solid hsla(0,0%,100%,0.1);
  border-radius: 20px;
  overflow: hidden;
  backdrop-filter: blur(12px);
  box-shadow:
    0 24px 64px hsla(220,72%,8%,0.5),
    0 0 0 1px hsla(350,72%,45%,0.15);
}

/* Header row */
.ds-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 22px 14px;
  border-bottom: 1px solid hsla(0,0%,100%,0.08);
  flex-shrink: 0;
}

.ds-header-left { display: flex; flex-direction: column; gap: 2px; }

.ds-label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 1rem;
  font-weight: 700;
  color: var(--white);
  letter-spacing: 0.02em;
}
.ds-label i { color: var(--red-light); font-size: 0.9rem; }

.ds-sublabel {
  font-size: 0.7rem;
  color: hsla(0,0%,100%,0.45);
  letter-spacing: 0.05em;
}

/* Nav buttons */
.ds-nav-btns { display: flex; gap: 8px; }

.ds-btn {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: hsla(0,0%,100%,0.08);
  border: 1.5px solid hsla(0,0%,100%,0.15);
  color: var(--white);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.25s ease;
  font-size: 0.75rem;
}
.ds-btn:hover {
  background: var(--red);
  border-color: var(--red);
  transform: scale(1.08);
  box-shadow: 0 4px 16px hsla(350,72%,45%,0.45);
}
.ds-btn:disabled {
  opacity: 0.3;
  cursor: not-allowed;
  transform: none;
}

/* Viewport — clips the scrolling track */
.ds-viewport {
  flex: 1;
  overflow: hidden;
  position: relative;
  padding: 14px 16px 12px;
}

/* Track — holds all cards in a row */
.ds-track {
  display: flex;
  gap: 12px;
  height: 100%;
  transition: transform 0.45s cubic-bezier(0.4, 0, 0.2, 1);
  will-change: transform;
}

/* Individual destination card */
.ds-card {
  flex-shrink: 0;
  /* width set by JS to fill 3-up */
  height: 100%;
  border-radius: 14px;
  overflow: hidden;
  position: relative;
  cursor: pointer;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  box-shadow: 0 8px 24px hsla(0,0%,0%,0.35);
}
.ds-card:hover {
  transform: translateY(-5px) scale(1.02);
  box-shadow: 0 16px 40px hsla(0,0%,0%,0.5);
}

/* Card image */
.ds-card-img {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  transition: transform 0.5s ease;
}


/* Gradient overlay */
.ds-card-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    transparent 30%,
    hsla(220,72%,10%,0.55) 65%,
    hsla(220,72%,8%,0.92) 100%
  );
}

/* Card text body */
.ds-card-body {
  position: absolute;
  bottom: 0;
  left: 0; right: 0;
  padding: 14px 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.ds-card-tag {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: var(--red);
  color: var(--white);
  font-size: 0.58rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 3px 9px;
  border-radius: 20px;
  width: fit-content;
}
.ds-card-tag i { font-size: 0.55rem; }

.ds-card-name {
  font-family: var(--font-serif);
  font-size: 1rem;
  font-weight: 700;
  color: var(--white);
  line-height: 1.2;
  margin: 0;
}

.ds-card-desc {
  font-size: 0.65rem;
  color: hsla(0,0%,100%,0.6);
  line-height: 1.4;
  margin: 0;
}

/* Dot indicators */
.ds-dots {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 10px 0 14px;
  flex-shrink: 0;
}

.ds-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: hsla(0,0%,100%,0.25);
  cursor: pointer;
  transition: all 0.3s ease;
}
.ds-dot.active {
  width: 20px;
  border-radius: 3px;
  background: var(--red);
  box-shadow: 0 0 8px hsla(350,72%,45%,0.5);
}
.ds-dot:hover:not(.active) { background: hsla(0,0%,100%,0.5); }

/* Mobile: show 2 cards, stack */
@media (max-width: 900px) {
  .hero-right { min-height: clamp(300px, 45vw, 420px); }
  .dest-slider { border-radius: 14px; }
}

@media (max-width: 600px) {
  .hero-right { min-height: 300px; }
  .ds-header { padding: 12px 14px 10px; }
}


/* ═══════════════════════════════════════════════════════════════
   DESTINATION SLIDER — POLAROID CARD STYLE
   Overrides the previous dark-card style with polaroid aesthetic
═══════════════════════════════════════════════════════════════ */

/* Slider background — dark glass to contrast white polaroids */
.dest-slider {
  background: hsla(220,60%,14%,0.7) !important;
  padding-bottom: 4px !important;
}

/* Cards viewport — give some breathing room on edges */
.ds-viewport {
  padding: 18px 16px 10px !important;
}

/* Track gap */
.ds-track { gap: 14px !important; }

/* ── POLAROID CARD ── */
.ds-card {
  /* White polaroid paper */
  background: #ffffff !important;
  border-radius: 4px !important;
  overflow: visible !important;
  box-shadow:
    0 6px 20px hsla(0,0%,0%,0.35),
    0 1px 3px hsla(0,0%,0%,0.2) !important;
  position: relative !important;
  display: flex !important;
  flex-direction: column !important;
  /* Slight alternating rotation */
  transition: transform 0.35s ease, box-shadow 0.35s ease !important;
  padding: 8px 8px 32px !important;
}

/* Alternating slight rotations for natural polaroid feel */
.ds-card:nth-child(3n+1) { transform: rotate(-2.5deg); }
.ds-card:nth-child(3n+2) { transform: rotate(0.8deg);  }
.ds-card:nth-child(3n+3) { transform: rotate(2deg);    }

/* Straighten + lift on hover */
.ds-card:hover {
  transform: rotate(0deg) translateY(-8px) scale(1.08) !important;
  box-shadow:
    0 18px 40px hsla(0,0%,0%,0.45),
    0 4px 12px hsla(0,0%,0%,0.3) !important;
  z-index: 10 !important;
}

/* ── CARD IMAGE — fills the upper polaroid area ── */
.ds-card-img {
  position: relative !important;
  inset: auto !important;
  width: 100% !important;
  flex: 1 !important;
  min-height: 0 !important;
  border-radius: 2px !important;
  background-size: cover !important;
  background-position: center !important;
}

/* Remove the dark gradient overlay */
.ds-card-overlay { display: none !important; }

/* ── CARD BODY — sits below image on white strip ── */
.ds-card-body {
  position: static !important;
  padding: 6px 2px 0 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 2px !important;
}

/* Hide the category tag (keep it clean like a real polaroid) */
.ds-card-tag { display: none !important; }

/* Location name — dark handwritten-style text on white strip */
.ds-card-name {
  font-family: var(--font-script, cursive) !important;
  font-size: 1.4rem !important;
  font-weight: 400 !important;
  color: #2a2a2a !important;
  text-align: center !important;
  line-height: 1.2 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  width: 100% !important;
}

/* Hide description — polaroids just have the name */
.ds-card-desc { display: none !important; }

/* ── Tape / pin decoration at top of card ── */
.ds-card::before {
  content: '';
  position: absolute;
  top: -8px;
  left: 50%;
  transform: translateX(-50%);
  width: 28px;
  height: 12px;
  background: hsla(55,90%,80%,0.75);
  border-radius: 2px;
  box-shadow: 0 1px 3px hsla(0,0%,0%,0.2);
  z-index: 5;
}

/* Dots — show on dark background */
.ds-dots { padding: 8px 0 12px !important; }

/* Nav buttons stay white/red as before */
.ds-btn { background: hsla(0,0%,100%,0.12) !important; }