/* ═══════════════════════════════════════════
   RockTrailSleep v2.0 — Complete Stylesheet
   Mobile-first. Matches premium demo exactly.
═══════════════════════════════════════════ */

/* ── WordPress block style resets ── */
.wp-site-blocks,
.wp-block-group,
.entry-content,
.wp-block { all: unset; }
.wp-block-image img { height: auto; }
/* Disable WP's default padding on body */
body.wp-singular { padding: 0 !important; }


:root {
  --ink:   #1a1612;
  --stone: #2a2520;
  --mist:  #c8bfb0;
  --dust:  #e8e0d4;
  --chalk: #f8f4ee;
  --cream: #fdfcf9;
  --serif: 'Cormorant Garamond', Georgia, serif;
  --mono:  'DM Mono', monospace;
  --sans:  'Instrument Sans', sans-serif;
  --px:    1.25rem;
}

*,*::before,*::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body { background: var(--cream); color: var(--stone); font-family: var(--serif); -webkit-font-smoothing: antialiased; overflow-x: hidden; }
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; height: auto; }
button { font-family: inherit; }

/* ── CURSOR (fine pointer only) ── */
@media (pointer: fine) {
  html { cursor: none; }
  .cursor-dot, .cursor-ring {
    position: fixed; top: 0; left: 0;
    pointer-events: none; z-index: 9999; border-radius: 50%;
  }
  .cursor-dot { width: 7px; height: 7px; background: var(--chalk); mix-blend-mode: difference; transform: translate(-50%,-50%); }
  .cursor-ring { width: 38px; height: 38px; border: 1px solid rgba(255,255,255,0.4); mix-blend-mode: difference; transform: translate(-50%,-50%); transition: width 0.3s, height 0.3s; }
  body:has(a:hover) .cursor-ring,
  body:has(button:hover) .cursor-ring { width: 56px; height: 56px; }
}

/* ── NAV ── */
#site-nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  padding: 1.3rem var(--px);
  display: flex; justify-content: space-between; align-items: center;
  transition: background 0.4s, padding 0.4s, border-color 0.4s;
  border-bottom: 1px solid transparent;
}
#site-nav.scrolled {
  background: rgba(253,252,249,0.96); backdrop-filter: blur(12px);
  padding: 0.95rem var(--px); border-bottom-color: var(--dust);
}
.nav-logo { font-family: var(--mono); font-size: 0.62rem; letter-spacing: 0.26em; text-transform: uppercase; color: rgba(253,252,249,0.9); transition: color 0.4s; }
#site-nav.scrolled .nav-logo { color: var(--stone); }
.nav-links { display: none; gap: 2.5rem; list-style: none; }
.nav-links a { font-family: var(--mono); font-size: 0.56rem; letter-spacing: 0.16em; text-transform: uppercase; color: rgba(253,252,249,0.55); transition: opacity 0.2s, color 0.2s; }
#site-nav.scrolled .nav-links a { color: var(--stone); opacity: 0.45; }
.nav-links a:hover, #site-nav.scrolled .nav-links a:hover { color: var(--stone); opacity: 1; }
.nav-cta { display: none; font-family: var(--mono); font-size: 0.54rem; letter-spacing: 0.16em; text-transform: uppercase; padding: 0.6rem 1.2rem; border: 1px solid rgba(253,252,249,0.3); color: rgba(253,252,249,0.8); transition: all 0.2s; }
#site-nav.scrolled .nav-cta { border-color: var(--mist); color: var(--stone); }
.nav-cta:hover { background: rgba(253,252,249,0.12); }
#site-nav.scrolled .nav-cta:hover { background: var(--stone); color: var(--cream); border-color: var(--stone); }

/* Hamburger */
.nav-hamburger { display: flex; flex-direction: column; gap: 5px; background: none; border: none; cursor: pointer; padding: 6px; }
.nav-hamburger span { display: block; width: 22px; height: 1.5px; background: rgba(253,252,249,0.85); transition: background 0.3s, transform 0.3s, opacity 0.3s; }
#site-nav.scrolled .nav-hamburger span { background: var(--stone); }
.nav-hamburger.open span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.nav-hamburger.open span:nth-child(2) { opacity: 0; }
.nav-hamburger.open span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

/* Mobile menu */
.nav-mobile { position: fixed; inset: 0; z-index: 99; background: var(--cream); display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 2.5rem; opacity: 0; pointer-events: none; transition: opacity 0.3s; }
.nav-mobile.open { opacity: 1; pointer-events: all; }
.nav-mobile a { font-family: var(--mono); font-size: 0.78rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--stone); opacity: 0.4; transition: opacity 0.2s; }
.nav-mobile a:hover { opacity: 1; }
.nav-mobile-close { position: absolute; top: 1.4rem; right: var(--px); background: none; border: none; cursor: pointer; font-family: var(--mono); font-size: 0.52rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--stone); opacity: 0.35; min-height: 44px; }

/* ── HERO ── */
.site-hero { height: 100svh; min-height: 580px; position: relative; display: flex; align-items: flex-end; overflow: hidden; }
.hero-reel { position: absolute; inset: 0; }
.hero-slide { position: absolute; inset: 0; opacity: 0; transition: opacity 1.4s cubic-bezier(0.4,0,0.2,1); }
.hero-slide.active { opacity: 1; }
.hero-slide-bg { position: absolute; inset: 0; transform: scale(1.08); transition: transform 8s ease; }
.hero-slide.active .hero-slide-bg { transform: scale(1); }
.hero-slide-bg img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hbg-1 { background: linear-gradient(165deg,#0d0b09 0%,#2a2018 40%,#1a1510 100%); }
.hbg-2 { background: linear-gradient(145deg,#0e1208 0%,#1e2a14 40%,#141a0e 100%); }
.hbg-3 { background: linear-gradient(155deg,#0a0c12 0%,#141c28 40%,#0e1420 100%); }
.hero-slide::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to top, rgba(10,8,6,0.9) 0%, rgba(10,8,6,0.42) 55%, rgba(10,8,6,0.15) 100%); }
.hero-grain { position: absolute; inset: 0; z-index: 2; pointer-events: none; opacity: 0.04; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); background-size: 256px; }
.hero-content { position: relative; z-index: 3; width: 100%; padding: 0 var(--px) 4rem; }
.hero-kicker { font-family: var(--mono); font-size: 0.52rem; letter-spacing: 0.26em; text-transform: uppercase; color: var(--mist); opacity: 0.45; display: flex; align-items: center; gap: 0.8rem; margin-bottom: 1.4rem; }
.hero-kicker::before { content: ''; display: block; width: 22px; height: 1px; background: var(--mist); opacity: 0.4; }
.hero-title { font-size: clamp(3.8rem,13vw,8.5rem); font-weight: 300; line-height: 0.9; color: var(--chalk); letter-spacing: -0.02em; margin-bottom: 1.4rem; }
.hero-title em { font-style: italic; color: var(--mist); }
.hero-tagline { font-family: var(--serif); font-size: clamp(0.95rem,3vw,1.15rem); font-weight: 300; color: rgba(253,252,249,0.5); line-height: 1.65; max-width: 380px; margin-bottom: 2rem; }
.hero-cta-row { display: flex; gap: 0.7rem; flex-wrap: wrap; }
.hero-right { display: none; }

/* Slide counter */
.slide-counter { position: absolute; bottom: 1.8rem; right: var(--px); z-index: 4; display: flex; align-items: center; gap: 1rem; }
.slide-dots { display: flex; gap: 0.45rem; align-items: center; }
.slide-dot { width: 16px; height: 1.5px; background: rgba(253,252,249,0.25); border: none; cursor: pointer; padding: 0; transition: all 0.3s; min-height: 12px; }
.slide-dot.active { width: 28px; background: var(--chalk); }
.slide-num { font-family: var(--mono); font-size: 0.46rem; letter-spacing: 0.14em; color: rgba(253,252,249,0.25); }

/* ── BUTTONS ── */
.btn { font-family: var(--mono); font-size: 0.56rem; letter-spacing: 0.18em; text-transform: uppercase; padding: 0.9rem 1.8rem; border: 1px solid; cursor: pointer; transition: all 0.22s; display: inline-flex; align-items: center; justify-content: center; white-space: nowrap; min-height: 44px; }
.btn-light  { background: var(--chalk); color: var(--stone); border-color: var(--chalk); }
.btn-light:hover { background: var(--dust); border-color: var(--dust); }
.btn-ghost  { background: transparent; color: rgba(253,252,249,0.55); border-color: rgba(253,252,249,0.22); }
.btn-ghost:hover { color: var(--chalk); border-color: rgba(253,252,249,0.55); }
.btn-dark   { background: var(--stone); color: var(--chalk); border-color: var(--stone); }
.btn-dark:hover { background: var(--ink); border-color: var(--ink); }
.btn-outline { background: transparent; color: var(--stone); border-color: var(--mist); }
.btn-outline:hover { border-color: var(--stone); }
.btn-chalk  { background: var(--chalk); color: var(--stone); border-color: var(--chalk); }
.btn-chalk:hover { background: var(--dust); }

/* ── SECTION LABEL ── */
.section-label { font-family: var(--mono); font-size: 0.52rem; letter-spacing: 0.24em; text-transform: uppercase; color: var(--stone); opacity: 0.3; display: flex; align-items: center; gap: 0.7rem; margin-bottom: 1.5rem; }
.section-label::before { content: ''; display: block; width: 22px; height: 1px; background: currentColor; }

/* ── MARQUEE ── */
.marquee-strip { background: var(--stone); padding: 0.85rem 0; overflow: hidden; }
.marquee-track { display: flex; gap: 2.5rem; white-space: nowrap; animation: marquee 22s linear infinite; }
.marquee-item { font-family: var(--mono); font-size: 0.5rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--mist); opacity: 0.3; flex-shrink: 0; }
.marquee-item::after { content: ' ·'; margin-left: 2.5rem; }
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* ── INTRO ── */
.intro-section { padding: 5rem var(--px); }
.intro-inner { display: flex; flex-direction: column; gap: 2.5rem; }
.intro-title { font-size: clamp(2rem,7vw,3.4rem); font-weight: 300; line-height: 1.08; letter-spacing: -0.01em; }
.intro-title em { font-style: italic; }
.intro-body { font-family: var(--sans); font-size: 0.9rem; line-height: 1.9; opacity: 0.6; }
.intro-body p { margin-bottom: 1.2rem; }
.intro-body p:last-child { margin-bottom: 0; }
.text-link { font-family: var(--mono); font-size: 0.52rem; letter-spacing: 0.18em; text-transform: uppercase; border-bottom: 1px solid var(--mist); padding-bottom: 0.12rem; opacity: 0.5; transition: opacity 0.2s; display: inline-block; margin-top: 1.5rem; }
.text-link:hover { opacity: 1; }

/* ── TRIPS ── */
.trips-section { padding: 0 0 5rem; }
.trips-header { padding: 0 var(--px); display: flex; flex-direction: column; gap: 1.5rem; margin-bottom: 2rem; }
.trips-title { font-size: clamp(1.8rem,6vw,3rem); font-weight: 300; line-height: 1.1; }
.trips-title em { font-style: italic; }
.trips-filter { display: flex; overflow-x: auto; scrollbar-width: none; border-bottom: 1px solid var(--dust); -webkit-overflow-scrolling: touch; }
.trips-filter::-webkit-scrollbar { display: none; }
.filter-btn { font-family: var(--mono); font-size: 0.52rem; letter-spacing: 0.15em; text-transform: uppercase; padding: 0.65rem 1.1rem; background: none; border: none; cursor: pointer; color: var(--stone); opacity: 0.3; white-space: nowrap; border-bottom: 1.5px solid transparent; margin-bottom: -1px; transition: opacity 0.2s, border-color 0.2s; min-height: 44px; }
.filter-btn.on { opacity: 1; border-bottom-color: var(--stone); }
.filter-btn:hover { opacity: 0.65; }
.trips-scroll-outer { padding: 0 var(--px); overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.trips-scroll-outer::-webkit-scrollbar { display: none; }
.trips-scroll-track { display: flex !important; flex-direction: row !important; flex-wrap: nowrap !important; gap: 1px; width: max-content !important; padding-bottom: 0.5rem; }

/* Trip card */
.trip-card { width: min(320px,82vw) !important; flex-shrink: 0 !important; background: var(--cream); border: 1px solid var(--dust); display: flex; flex-direction: column; transition: border-color 0.3s; }
.trip-card:hover { border-color: var(--mist); }
.trip-card-img { width: 100%; height: 200px; overflow: hidden; position: relative; flex-shrink: 0; background: var(--dust); }
.trip-card-img img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.7s ease; }
.trip-card:hover .trip-card-img img { transform: scale(1.05); }
.trip-card-placeholder { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; font-size: 2.5rem; color: var(--mist); opacity: 0.25; }
.trip-cat-badge { position: absolute; top: 1rem; left: 1rem; font-family: var(--mono); font-size: 0.44rem; letter-spacing: 0.16em; text-transform: uppercase; background: rgba(10,8,6,0.72); color: var(--mist); padding: 0.28rem 0.65rem; }
.trip-card-body { padding: 1.4rem; display: flex; flex-direction: column; flex: 1; }
.trip-card-title { font-size: 1.2rem; font-weight: 300; line-height: 1.15; margin-bottom: 0.6rem; }
.trip-card-desc { font-family: var(--sans); font-size: 0.78rem; line-height: 1.72; opacity: 0.55; margin-bottom: 1.1rem; flex: 1; }
.trip-card-meta { display: grid; grid-template-columns: 1fr 1fr; gap: 0.45rem 0.8rem; margin-bottom: 1rem; padding-bottom: 1rem; border-bottom: 1px solid var(--dust); }
.meta-key { font-family: var(--mono); font-size: 0.42rem; letter-spacing: 0.14em; text-transform: uppercase; opacity: 0.28; display: block; margin-bottom: 0.12rem; }
.meta-val { font-family: var(--sans); font-size: 0.75rem; opacity: 0.7; }
.trip-card-footer { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; flex-wrap: wrap; }
.trip-price-label { font-family: var(--mono); font-size: 0.42rem; letter-spacing: 0.13em; text-transform: uppercase; opacity: 0.28; display: block; margin-bottom: 0.1rem; }
.trip-price { font-family: var(--serif); font-size: 1.05rem; font-weight: 300; }
.trip-actions { display: flex; gap: 0.4rem; }
.btn-card-learn { font-family: var(--mono); font-size: 0.46rem; letter-spacing: 0.12em; text-transform: uppercase; padding: 0.55rem 0.9rem; border: 1px solid var(--dust); background: transparent; color: var(--stone); opacity: 0.55; cursor: pointer; transition: all 0.2s; min-height: 44px; min-width: 44px; }
.btn-card-learn:hover { opacity: 1; border-color: var(--mist); }
.btn-card-enquire { font-family: var(--mono); font-size: 0.46rem; letter-spacing: 0.12em; text-transform: uppercase; padding: 0.55rem 0.9rem; border: 1px solid var(--stone); background: var(--stone); color: var(--chalk); cursor: pointer; transition: all 0.2s; min-height: 44px; min-width: 44px; }
.btn-card-enquire:hover { background: var(--ink); }
.trips-empty { padding: 3rem var(--px); font-family: var(--sans); font-size: 0.88rem; opacity: 0.4; text-align: center; }

/* ── PHILOSOPHY ── */
.philosophy-section { background: var(--stone); padding: 5.5rem var(--px); position: relative; overflow: hidden; }
.philosophy-section::before { content: ''; position: absolute; top: -30%; right: -10%; width: 300px; height: 300px; border-radius: 50%; background: radial-gradient(circle, rgba(200,191,176,0.04) 0%, transparent 70%); pointer-events: none; }
.philosophy-label { color: var(--mist) !important; }
.philosophy-quote { font-size: clamp(1.5rem,5vw,3rem); font-weight: 300; font-style: italic; line-height: 1.4; color: var(--chalk); opacity: 0.88; margin-bottom: 1.8rem; }
.philosophy-attr { font-family: var(--mono); font-size: 0.5rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--mist); opacity: 0.3; }

/* ── HOW IT WORKS ── */
.how-section { padding: 5rem var(--px); }
.how-header { margin-bottom: 2.5rem; }
.how-title { font-size: clamp(1.8rem,6vw,3rem); font-weight: 300; line-height: 1.1; margin-bottom: 1rem; }
.how-title em { font-style: italic; }
.how-sub { font-family: var(--sans); font-size: 0.88rem; line-height: 1.8; opacity: 0.5; }
.how-steps { display: grid; grid-template-columns: 1fr; gap: 1px; background: var(--dust); border: 1px solid var(--dust); }
.how-step { background: var(--cream); padding: 2rem 1.5rem; }
.how-step-num { font-family: var(--serif); font-size: 3rem; font-weight: 300; color: var(--stone); opacity: 0.07; line-height: 1; display: block; margin-bottom: 1.1rem; }
.how-step-title { font-size: 1.15rem; font-weight: 300; line-height: 1.1; margin-bottom: 0.65rem; }
.how-step-title em { font-style: italic; }
.how-step-desc { font-family: var(--sans); font-size: 0.8rem; line-height: 1.72; opacity: 0.55; }

/* ── TERRAIN ── */
.terrain-section { background: var(--ink); padding: 5rem var(--px); }
.terrain-visual { margin-bottom: 3rem; position: relative; }
.terrain-img-main { width: 100%; aspect-ratio: 4/3; background: linear-gradient(160deg,#1a1510 0%,#2a2218 100%); position: relative; overflow: hidden; }
.terrain-img-main img { width: 100%; height: 100%; object-fit: cover; display: block; }
.terrain-placeholder { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; font-size: 4rem; opacity: 0.06; color: var(--mist); }
.terrain-img-float { position: absolute; bottom: -2rem; right: -0.5rem; width: 46%; aspect-ratio: 1/1; background: linear-gradient(140deg,#2a2218 0%,#1a1510 100%); border: 4px solid var(--ink); overflow: hidden; }
.terrain-img-float img { width: 100%; height: 100%; object-fit: cover; display: block; }
.terrain-float-placeholder { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; font-size: 2rem; opacity: 0.07; color: var(--mist); }
.terrain-label { color: var(--mist) !important; }
.terrain-title { font-size: clamp(1.8rem,6vw,3rem); font-weight: 300; line-height: 1.1; color: var(--chalk); margin-bottom: 1.4rem; }
.terrain-title em { font-style: italic; color: var(--mist); }
.terrain-body { font-family: var(--sans); font-size: 0.88rem; line-height: 1.85; color: var(--mist); opacity: 0.6; margin-bottom: 2.5rem; }
.terrain-stats { display: grid; grid-template-columns: repeat(3,1fr); gap: 1rem; padding-top: 2rem; border-top: 1px solid rgba(200,191,176,0.1); }
.terrain-stat-num { font-family: var(--serif); font-size: clamp(1.7rem,5vw,2.6rem); font-weight: 300; color: var(--chalk); line-height: 1; display: block; margin-bottom: 0.25rem; }
.terrain-stat-label { font-family: var(--mono); font-size: 0.42rem; letter-spacing: 0.13em; text-transform: uppercase; color: var(--mist); opacity: 0.3; }

/* ── TESTIMONIALS CAROUSEL ── */
.testimonials-section { padding: 5rem var(--px) 3rem; background: var(--cream); }
.t-carousel-wrap { max-width: 860px; margin: 0 auto; }
.t-carousel-header { margin-bottom: 0; }
.t-carousel-stage { overflow: hidden; border-top: 1px solid var(--dust); border-bottom: 1px solid var(--dust); margin: 2rem 0 0; }
.t-track { display: flex; transition: transform 0.65s cubic-bezier(0.4,0,0.2,1); will-change: transform; }
.t-slide { min-width: 100%; flex-shrink: 0; padding: 3.5rem 1rem; text-align: center; }
.t-slide-inner { max-width: 680px; margin: 0 auto; }
.t-quote { font-family: var(--serif); font-size: clamp(1.1rem,3.5vw,1.55rem); font-weight: 300; line-height: 1.65; color: var(--stone); opacity: 0.85; margin-bottom: 2rem; }
.t-quote::before { content: '\201C'; }
.t-quote::after  { content: '\201D'; }
.t-author { font-family: var(--mono); font-size: 0.5rem; letter-spacing: 0.2em; text-transform: uppercase; opacity: 0.32; }
.t-controls { display: flex; justify-content: center; align-items: center; gap: 1.2rem; padding: 1.5rem 0 0.5rem; }
.t-prev, .t-next { background: none; border: none; color: var(--stone); opacity: 0.22; cursor: pointer; font-size: 1rem; padding: 0.5rem; transition: opacity 0.2s; min-width: 44px; min-height: 44px; display: flex; align-items: center; justify-content: center; line-height: 1; }
.t-prev:hover, .t-next:hover { opacity: 0.7; }
.t-dots { display: flex; gap: 0.45rem; align-items: center; }
.t-dot { width: 5px; height: 5px; border-radius: 50%; background: var(--stone); opacity: 0.15; cursor: pointer; border: none; transition: opacity 0.2s, transform 0.2s; min-width: 20px; min-height: 20px; display: flex; align-items: center; justify-content: center; background: transparent; }
.t-dot::after { content: ''; display: block; width: 5px; height: 5px; border-radius: 50%; background: var(--stone); opacity: 0.3; transition: opacity 0.2s, transform 0.2s; }
.t-dot.active::after { opacity: 0.7; transform: scale(1.4); }

/* ── ENQUIRY ── */
.enquiry-section { background: var(--stone); padding: 5rem var(--px); }
.enquiry-inner { display: flex; flex-direction: column; gap: 3rem; }
.enquiry-label { color: var(--mist) !important; }
.enquiry-title { font-size: clamp(2rem,7vw,3.5rem); font-weight: 300; line-height: 1.05; color: var(--chalk); margin-bottom: 1rem; }
.enquiry-title em { font-style: italic; }
.enquiry-sub { font-family: var(--sans); font-size: 0.88rem; line-height: 1.8; color: var(--mist); opacity: 0.55; margin-bottom: 1.8rem; }
.enquiry-details { display: flex; flex-direction: column; gap: 1rem; }
.eq-detail-label { font-family: var(--mono); font-size: 0.44rem; letter-spacing: 0.17em; text-transform: uppercase; color: var(--mist); opacity: 0.28; display: block; margin-bottom: 0.18rem; }
.eq-detail-val { font-family: var(--serif); font-size: 0.95rem; font-weight: 300; color: rgba(253,252,249,0.62); }

/* ── FORMS ── */
.eq-form { display: flex; flex-direction: column; gap: 1.25rem; }
.eq-field { display: flex; flex-direction: column; gap: 0.4rem; }
.eq-label { font-family: var(--mono); font-size: 0.44rem; letter-spacing: 0.17em; text-transform: uppercase; color: var(--mist); opacity: 0.3; }
.eq-label--light { color: var(--stone); opacity: 0.35; }
.eq-input, .eq-select, .eq-textarea { background: transparent; border: none; border-bottom: 1px solid rgba(200,191,176,0.18); padding: 0.65rem 0; font-family: var(--serif); font-size: 0.92rem; font-weight: 300; color: var(--chalk); outline: none; width: 100%; transition: border-color 0.2s; -webkit-appearance: none; border-radius: 0; min-height: 44px; }
.eq-input::placeholder, .eq-textarea::placeholder { color: rgba(200,191,176,0.22); }
.eq-input:focus, .eq-select:focus, .eq-textarea:focus { border-bottom-color: rgba(200,191,176,0.5); }
.eq-select { cursor: pointer; color: rgba(200,191,176,0.42); }
.eq-select option { background: var(--stone); color: var(--chalk); }
.eq-textarea { resize: none; min-height: 80px; }
.eq-input--light, .eq-select--light, .eq-textarea--light { color: var(--stone); border-bottom-color: var(--dust); }
.eq-input--light::placeholder, .eq-textarea--light::placeholder { color: rgba(42,37,32,0.28); }
.eq-input--light:focus, .eq-select--light:focus, .eq-textarea--light:focus { border-bottom-color: var(--mist); }
.eq-select--light { color: rgba(42,37,32,0.4); }
.eq-select--light option { background: var(--cream); color: var(--stone); }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.form-note { font-family: var(--mono); font-size: 0.42rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--mist); opacity: 0.2; }
.form-note--light { color: var(--stone); }
.form-confirm { display: none; text-align: center; padding: 2rem 0; }
.form-confirm.show { display: block; }
.confirm-icon { font-size: 1.4rem; margin-bottom: 0.8rem; opacity: 0.35; color: var(--mist); }
.confirm-text { font-family: var(--sans); font-size: 0.85rem; line-height: 1.7; color: var(--mist); opacity: 0.6; }
.confirm-text--dark { color: var(--stone); }

/* ── FOOTER ── */
#site-footer { background: var(--ink); padding: 3.5rem var(--px) 2.5rem; }
.footer-inner { display: flex; flex-direction: column; gap: 2rem; }
.footer-logo { font-family: var(--mono); font-size: 0.62rem; letter-spacing: 0.26em; text-transform: uppercase; color: var(--dust); display: block; margin-bottom: 0.5rem; opacity: 0.55; }
.footer-tagline { font-family: var(--serif); font-size: 0.92rem; font-style: italic; font-weight: 300; color: var(--mist); opacity: 0.25; }
.footer-right {}
.footer-links { display: flex; flex-wrap: wrap; gap: 1.4rem; list-style: none; margin-bottom: 1rem; }
.footer-links a { font-family: var(--mono); font-size: 0.5rem; letter-spacing: 0.13em; text-transform: uppercase; color: var(--mist); opacity: 0.25; transition: opacity 0.2s; }
.footer-links a:hover { opacity: 0.7; }
.footer-copy { font-family: var(--mono); font-size: 0.44rem; letter-spacing: 0.1em; color: var(--mist); opacity: 0.15; }

/* ── SINGLE TRIP OVERLAY ── */
.single-overlay { position: fixed; inset: 0; z-index: 200; background: var(--cream); transform: translateY(100%); transition: transform 0.55s cubic-bezier(0.4,0,0.2,1); overflow-y: auto; -webkit-overflow-scrolling: touch; }
.single-overlay.open { transform: translateY(0); }
.single-close { position: fixed; top: 1rem; right: var(--px); z-index: 201; font-family: var(--mono); font-size: 0.5rem; letter-spacing: 0.14em; text-transform: uppercase; background: var(--cream); border: 1px solid var(--dust); padding: 0.6rem 1rem; cursor: pointer; color: var(--stone); opacity: 0; transition: opacity 0.3s 0.3s, background 0.2s; min-height: 44px; display: flex; align-items: center; }
.single-overlay.open .single-close { opacity: 0.6; }
.single-close:hover { opacity: 1 !important; background: var(--stone); color: var(--chalk); border-color: var(--stone); }
.single-hero { height: min(60vw, 420px); min-height: 280px; position: relative; background: var(--stone); display: flex; align-items: flex-end; overflow: hidden; }
.single-hero-bg { position: absolute; inset: 0; }
.single-hero-bg img { width: 100%; height: 100%; object-fit: cover; display: block; }
.single-hero-bg-placeholder { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; font-size: 5rem; opacity: 0.06; color: var(--mist); }
.single-hero::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to top, rgba(10,8,6,0.88) 0%, rgba(10,8,6,0.3) 60%, transparent 100%); }
.single-hero-content { position: relative; z-index: 2; padding: 0 var(--px) 2rem; width: 100%; }
.single-hero-cat { font-family: var(--mono); font-size: 0.5rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--mist); opacity: 0.45; display: block; margin-bottom: 0.7rem; }
.single-hero-title { font-size: clamp(1.8rem,6vw,4rem); font-weight: 300; line-height: 0.95; color: var(--chalk); margin-bottom: 0.4rem; }
.single-hero-title em { font-style: italic; }
.single-hero-price { font-family: var(--serif); font-size: 1.5rem; font-weight: 300; color: var(--chalk); display: block; }
.single-hero-price-label { font-family: var(--mono); font-size: 0.44rem; letter-spacing: 0.13em; text-transform: uppercase; color: var(--mist); opacity: 0.35; }
.single-meta-bar { display: grid; grid-template-columns: repeat(3,1fr); background: var(--dust); border-bottom: 1px solid var(--dust); }
.single-meta-item { padding: 1.1rem 1rem; border-right: 1px solid rgba(200,191,176,0.4); }
.single-meta-item:last-child { border-right: none; }
.single-meta-key { font-family: var(--mono); font-size: 0.42rem; letter-spacing: 0.14em; text-transform: uppercase; opacity: 0.28; display: block; margin-bottom: 0.25rem; }
.single-meta-val { font-family: var(--sans); font-size: 0.75rem; }
.single-body { padding: 2.5rem var(--px) 5rem; }
.single-content h2 { font-size: clamp(1.25rem,4vw,1.55rem); font-weight: 300; line-height: 1.15; margin-bottom: 0.9rem; margin-top: 2rem; }
.single-content h2:first-child { margin-top: 0; }
.single-content h2 em { font-style: italic; }
.single-content p { font-family: var(--sans); font-size: 0.88rem; line-height: 1.85; opacity: 0.6; margin-bottom: 1rem; }
.single-content strong { font-weight: 600; opacity: 1; }
.single-content em { font-style: italic; }
.single-content ul, .single-content ol { font-family: var(--sans); font-size: 0.88rem; line-height: 1.85; opacity: 0.6; margin-bottom: 1rem; padding-left: 1.4rem; }
.single-content li { margin-bottom: 0.35rem; }
.single-content h3 { font-size: 1.05rem; font-weight: 400; margin-bottom: 0.6rem; margin-top: 1.5rem; font-family: var(--sans); }
.single-itinerary { margin-top: 1.5rem; }
.itinerary-day { padding: 1.1rem 0; border-top: 1px solid var(--dust); display: grid; grid-template-columns: 55px 1fr; gap: 0.9rem; }
.itinerary-day-num { font-family: var(--mono); font-size: 0.46rem; letter-spacing: 0.12em; text-transform: uppercase; opacity: 0.28; padding-top: 0.1rem; }
.itinerary-day-title { font-size: 1rem; font-weight: 300; margin-bottom: 0.35rem; }
.itinerary-day-desc { font-family: var(--sans); font-size: 0.8rem; line-height: 1.7; opacity: 0.55; }
.single-aside { margin-top: 3rem; }
.aside-box { background: var(--stone); padding: 2rem; }
.aside-title { font-size: 1.2rem; font-weight: 300; color: var(--chalk); margin-bottom: 0.35rem; line-height: 1.15; }
.aside-sub { font-family: var(--sans); font-size: 0.78rem; color: var(--mist); opacity: 0.55; margin-bottom: 1.8rem; line-height: 1.6; }
.aside-form { display: flex; flex-direction: column; gap: 1rem; }
.aside-note { font-family: var(--mono); font-size: 0.42rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--mist); opacity: 0.22; text-align: center; margin-top: 0.3rem; }

/* ── MODAL ── */
.modal-overlay { position: fixed; inset: 0; z-index: 300; background: rgba(26,22,18,0.78); backdrop-filter: blur(6px); display: flex; align-items: flex-end; justify-content: center; opacity: 0; pointer-events: none; transition: opacity 0.3s; padding: 0; }
.modal-overlay.open { opacity: 1; pointer-events: all; }
.modal { background: var(--cream); width: 100%; padding: 2rem var(--px) 3rem; position: relative; max-height: 92vh; overflow-y: auto; transform: translateY(12px); transition: transform 0.3s; }
.modal-overlay.open .modal { transform: translateY(0); }
.modal-close { position: absolute; top: 1rem; right: var(--px); background: none; border: none; font-family: var(--mono); font-size: 0.5rem; letter-spacing: 0.13em; text-transform: uppercase; opacity: 0.35; cursor: pointer; min-width: 44px; min-height: 44px; display: flex; align-items: center; justify-content: flex-end; }
.modal-close:hover { opacity: 0.8; }
.modal-title { font-size: 1.3rem; font-weight: 300; margin-bottom: 0.25rem; line-height: 1.2; }
.modal-sub { font-family: var(--sans); font-size: 0.78rem; opacity: 0.4; margin-bottom: 1.8rem; }

/* ── REVEAL ── */
.reveal { opacity: 0; transform: translateY(18px); transition: opacity 0.72s ease, transform 0.72s ease; }
.reveal.visible { opacity: 1; transform: none; }
.reveal-d1 { transition-delay: 0.1s; }
.reveal-d2 { transition-delay: 0.2s; }
.reveal-d3 { transition-delay: 0.3s; }

/* ═════════════════════════════
   TABLET 640px+
═════════════════════════════ */
@media (min-width: 640px) {
  :root { --px: 2rem; }
  .trip-card { width: 360px !important; }
  .trip-card-img { height: 220px; }
  .how-steps { grid-template-columns: 1fr 1fr; }
  .single-meta-bar { grid-template-columns: repeat(5,1fr); }
  .modal { max-width: 480px; align-self: center; }
  .modal-overlay { align-items: center; padding: 1.5rem; }
  .footer-inner { flex-direction: row; justify-content: space-between; align-items: flex-end; }
  .footer-links { justify-content: flex-end; }
}

/* ═════════════════════════════
   DESKTOP 1024px+
═════════════════════════════ */
@media (min-width: 1024px) {
  :root { --px: 3rem; }
  .nav-links { display: flex; }
  .nav-cta { display: inline-flex; }
  .nav-hamburger { display: none; }

  /* Hero two-col */
  .hero-content { display: grid; grid-template-columns: 1fr 400px; gap: 4rem; align-items: end; }
  .hero-right { display: flex; flex-direction: column; padding-bottom: 0.5rem; }
  .hero-cta-row { display: none; }
  .hero-right .hero-cta-row { display: flex; }
  .hero-right-label { font-family: var(--mono); font-size: 0.52rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--mist); opacity: 0.3; display: block; margin-bottom: 1.2rem; }
  .hero-stat-row { display: flex; flex-direction: column; gap: 1rem; margin-bottom: 2.5rem; }
  .hero-stat { display: flex; align-items: baseline; gap: 0.8rem; padding-bottom: 1rem; border-bottom: 1px solid rgba(200,191,176,0.1); }
  .hero-stat:last-child { border-bottom: none; padding-bottom: 0; }
  .hero-stat-num { font-family: var(--serif); font-size: 2.2rem; font-weight: 300; color: var(--chalk); line-height: 1; }
  .hero-stat-label { font-family: var(--mono); font-size: 0.48rem; letter-spacing: 0.13em; text-transform: uppercase; color: var(--mist); opacity: 0.38; }
  .hero-tagline { margin-bottom: 0; }

  .slide-counter { right: 3rem; bottom: 2.5rem; }

  .intro-section { padding: 8rem 3rem; }
  .intro-inner { flex-direction: row; gap: 7rem; align-items: start; }
  .intro-left { flex: 1; }
  .intro-right { flex: 1; padding-top: 4rem; }

  .trips-section { padding-bottom: 8rem; }
  .trips-header { flex-direction: row; justify-content: space-between; align-items: flex-end; }
  .trip-card { width: 380px !important; }
  .trip-card-img { height: 240px; }

  .philosophy-section { padding: 8rem 3rem; }

  .how-section { padding: 8rem 3rem; }
  .how-header { display: grid; grid-template-columns: 1fr 1fr; gap: 4rem; align-items: end; }
  .how-steps { grid-template-columns: repeat(4,1fr); }

  .terrain-section { padding: 8rem 3rem; }
  .terrain-inner { display: grid; grid-template-columns: 1fr 1fr; gap: 5rem; align-items: center; }
  .terrain-visual { margin-bottom: 0; }
  .terrain-img-main { aspect-ratio: 4/5; }

  .testimonials-section { padding: 8rem 3rem 5rem; }

  .enquiry-section { padding: 8rem 3rem; }
  .enquiry-inner { flex-direction: row; gap: 6rem; align-items: start; }
  .enquiry-left { flex: 1; }
  .enquiry-right { flex: 1; }

  #site-footer { padding: 4rem 3rem 3rem; }

  /* Single overlay desktop */
  .single-hero { height: 60vh; max-height: 560px; }
  .single-hero-content { display: grid; grid-template-columns: 1fr auto; gap: 3rem; align-items: end; }
  .single-meta-bar { grid-template-columns: repeat(5,1fr); }
  .single-body { display: grid; grid-template-columns: 1fr 340px; gap: 5rem; align-items: start; }
  .single-aside { margin-top: 0; }
  .aside-box { position: sticky; top: 5rem; }
  .single-close { top: 2rem; }
}

/* ─── REDUCED MOTION ─── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
  .marquee-track { animation: none; }
  .reveal { opacity: 1 !important; transform: none !important; }
}
