/* ============================================================
   SPECTRUM TOURS & TRAVELS — DESIGN SYSTEM
   Direction: Unhurried luxury editorial × warm human precision
   Theme: Deep ink (dark) — travel context = evening/journey
   Rainbow: structural accent ONLY, not decorative everywhere
============================================================ */
:root {
  /* Colours — OKLCH, ink-tinted neutrals
     Lifted from near-black to ~13% so content is readable at low screen brightness */
  --ink:       oklch(13% 0.008 60);
  --ink-mid:   oklch(19% 0.009 60);
  --surface:   oklch(16% 0.008 60);
  --cream:     oklch(94% 0.012 80);
  --cream-dim: oklch(94% 0.012 80 / 0.55);
  --cream-faint: oklch(94% 0.012 80 / 0.14);
  --cream-ghost: oklch(94% 0.012 80 / 0.07);
  --gold:      oklch(74% 0.10 72);
  --gold-dim:  oklch(74% 0.10 72 / 0.55);
  --rule:      oklch(94% 0.012 80 / 0.10);
  --rule-strong: oklch(94% 0.012 80 / 0.18);

  /* Rainbow — used in 3 places max */
  --r1:#e63329;--r2:#f47c2b;--r3:#f5c518;--r4:#4caf50;--r5:#1976d2;--r6:#7b1fa2;
  --rainbow: linear-gradient(90deg,var(--r1),var(--r2),var(--r3),var(--r4),var(--r5),var(--r6));

  /* Fonts */
  --font-display: 'Geologica', sans-serif;
  --font-ui:      'Epilogue', sans-serif;
  --font-body:    'Source Serif 4', Georgia, serif;

  /* Spacing — 4pt scale */
  --s1:  4px;  --s2:  8px;  --s3: 12px;  --s4: 16px;
  --s5: 24px;  --s6: 32px;  --s7: 48px;  --s8: 64px;
  --s9: 96px;  --s10:128px;

  /* Motion */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --dur-fast: 180ms;
  --dur-med:  420ms;
  --dur-slow: 800ms;

  --nav-h: 68px;
}

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

body {
  background: var(--ink);
  color: var(--cream);
  font-family: var(--font-body);
  font-weight: 300;
  overflow-x: hidden;
  cursor: none;
  -webkit-font-smoothing: antialiased;
}

/* ============================================================
   SKIP LINK
============================================================ */
.skip-link {
  position: absolute; left: -9999px; top: auto;
  width: 1px; height: 1px; overflow: hidden;
}
.skip-link:focus {
  position: fixed; left: var(--s5); top: var(--s5);
  width: auto; height: auto; overflow: visible;
  padding: var(--s3) var(--s5);
  background: var(--gold); color: var(--ink);
  font-family: var(--font-ui); font-size: 11px; font-weight: 700;
  letter-spacing: 0.1em; text-transform: uppercase;
  text-decoration: none; z-index: 9999;
  outline: 2px solid var(--ink); outline-offset: 2px;
}

/* ============================================================
   SCROLLBAR — minimalist, OS-standard width, visible thumb
============================================================ */
html {
  scrollbar-width: thin;
  scrollbar-color: oklch(40% 0.012 60) oklch(16% 0.008 60);
}
::-webkit-scrollbar { width: 15px; }
::-webkit-scrollbar-track { background: oklch(16% 0.008 60); }
::-webkit-scrollbar-thumb {
  background: oklch(30% 0.010 60);
  border: 3px solid oklch(16% 0.008 60);
  border-radius: 8px;
  min-height: 48px;
}
::-webkit-scrollbar-thumb:hover { background: oklch(40% 0.012 60); }
::-webkit-scrollbar-corner { background: oklch(16% 0.008 60); }

/* ============================================================
   CUSTOM CURSOR — only transform/opacity, no layout props
============================================================ */
#cur-dot, #cur-ring {
  position: fixed; top: 0; left: 0;
  border-radius: 50%; pointer-events: none;
  z-index: 9999;
  will-change: transform;
}
#cur-dot {
  width: 5px; height: 5px;
  background: var(--cream);
  transform: translate(-50%,-50%);
  transition: opacity var(--dur-fast);
}
#cur-ring {
  width: 30px; height: 30px;
  border: 1px solid oklch(94% 0.012 80 / 0.35);
  transform: translate(-50%,-50%);
  transition: opacity var(--dur-fast), border-color var(--dur-fast);
}
body.is-hovering #cur-dot  { opacity: 0; }
body.is-hovering #cur-ring { border-color: var(--gold); width: 30px; height: 30px; }

/* ============================================================
   SCROLL PROGRESS — rainbow, single usage #1
============================================================ */
#scroll-bar {
  position: fixed; top: 0; left: 0; height: 2px;
  width: 0%; background: var(--rainbow);
  z-index: 9998; transition: width 0.08s linear;
}

/* ============================================================
   REVEAL
============================================================ */
.r  { opacity: 0; transform: translateY(32px); transition: opacity var(--dur-slow) var(--ease-out), transform var(--dur-slow) var(--ease-out); }
.rl { opacity: 0; transform: translateX(-48px); transition: opacity var(--dur-slow) var(--ease-out), transform var(--dur-slow) var(--ease-out); }
.rr { opacity: 0; transform: translateX(48px);  transition: opacity var(--dur-slow) var(--ease-out), transform var(--dur-slow) var(--ease-out); }
.r.on, .rl.on, .rr.on { opacity: 1; transform: none; }

/* ============================================================
   NAVIGATION
============================================================ */
#main-nav {
  position: fixed; top: 0; left: 0; width: 100%;
  height: var(--nav-h); z-index: 100;
  display: flex; align-items: center;
  padding: 0 var(--s8);
  background: linear-gradient(to bottom, oklch(13% 0.008 60 / 0.85) 0%, transparent 100%);
  transition: background var(--dur-med);
  border-bottom: 0;
}
#main-nav.scrolled {
  background: oklch(13% 0.008 60 / 0.97);
  backdrop-filter: blur(20px) saturate(1.2);
  -webkit-backdrop-filter: blur(20px) saturate(1.2);
  border-bottom: 0;
}
.nav-logo img { height: 36px; display: block; }
.nav-links {
  display: flex; align-items: center; gap: var(--s7);
  margin-left: auto; list-style: none;
}
.nav-links a {
  font-family: var(--font-ui); font-size: 11px; font-weight: 500;
  letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--cream-dim); text-decoration: none;
  transition: color var(--dur-fast);
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 var(--s2);
}
.nav-links a:hover { color: var(--cream); }
.nav-links a:focus-visible { color: var(--cream); outline: 2px solid var(--gold); outline-offset: 3px; }
.nav-book {
  margin-left: var(--s6);
  font-family: var(--font-ui); font-size: 11px; font-weight: 700;
  letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--ink); background: var(--cream);
  border: none; padding: 0 22px; min-height: 44px;
  display: inline-flex; align-items: center;
  text-decoration: none;
  transition: background var(--dur-fast);
}
.nav-book:hover { background: var(--gold); }
.nav-book:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }

.nav-burger {
  display: none; flex-direction: column; gap: 5px;
  cursor: none; background: none; border: none; padding: var(--s2);
  margin-left: auto;
}
.nav-burger span { width: 22px; height: 1px; background: var(--cream); display: block; }

/* ============================================================
   HERO
============================================================ */
#home {
  position: relative; min-height: 100vh;
  display: flex; flex-direction: column; justify-content: center;
  overflow: hidden;
}
.hero-bg {
  position: absolute; inset: 0; overflow: hidden;
}
.hero-bg img {
  width: 100%; height: 100%; object-fit: cover;
  opacity: 0.38;
  filter: saturate(0.7);
}
/* Dark gradient overlaid on top of the photo */
.hero-bg::after {
  content: '';
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 50% 60% at 68% 40%, oklch(72% 0.09 75 / 0.04) 0%, transparent 65%),
    linear-gradient(105deg, oklch(13% 0.008 60 / 0.82) 0%, oklch(13% 0.008 60 / 0.5) 55%, oklch(13% 0.008 60 / 0.3) 100%);
}
.hero-grain {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 512 512' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.72' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.025'/%3E%3C/svg%3E");
  opacity: 0.5;
}

/* Rainbow arc — structural, dramatic, single-instance */
.hero-arc {
  position: absolute; inset: 0; z-index: 2; overflow: hidden; pointer-events: none;
}
.hero-arc svg {
  position: absolute; bottom: -5%; right: -5%; width: 72%;
  opacity: 0;
  animation: arcReveal 2.4s 0.4s var(--ease-out) forwards;
}
@keyframes arcReveal {
  from { opacity: 0; transform: translateX(40px); }
  to   { opacity: 0.14; transform: none; }
}

/* Arc stroke draw — moved here from inline <style> in body */
@keyframes arcDash { to { stroke-dashoffset: 0; } }

.hero-content {
  position: relative; z-index: 5;
  padding: calc(var(--nav-h) + var(--s9)) var(--s8) var(--s8);
  max-width: 1100px;
  width: 100%;
}
.hero-kicker {
  font-family: var(--font-ui); font-size: 10px; font-weight: 700;
  letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--gold); margin-bottom: var(--s6);
  opacity: 0; animation: slideUp 0.7s 0.3s var(--ease-out) forwards;
}
.hero-h1 {
  font-family: var(--font-display);
  font-size: clamp(56px, 8.5vw, 120px);
  font-weight: 800; line-height: 0.95;
  letter-spacing: -0.04em;
  color: var(--cream);
  opacity: 0; animation: slideUp 0.85s 0.42s var(--ease-out) forwards;
}
.hero-h1 em {
  font-style: normal; font-weight: 300;
  color: var(--gold);
}
.hero-sub {
  font-size: clamp(15px, 1.5vw, 17px);
  font-weight: 300; line-height: 1.8;
  color: var(--cream-dim); max-width: 44ch;
  margin-top: var(--s5);
  opacity: 0; animation: slideUp 0.85s 0.56s var(--ease-out) forwards;
}
.hero-btns {
  margin-top: var(--s7); display: flex; gap: var(--s4); flex-wrap: wrap;
  opacity: 0; animation: slideUp 0.85s 0.7s var(--ease-out) forwards;
}
.btn-solid {
  font-family: var(--font-ui); font-size: 11px; font-weight: 700;
  letter-spacing: 0.1em; text-transform: uppercase;
  background: var(--cream); color: var(--ink);
  border: none; padding: 15px 34px; cursor: none;
  transition: background var(--dur-fast);
  text-decoration: none; display: inline-block;
}
.btn-solid:hover { background: var(--gold); }
.btn-solid:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
.btn-ghost {
  font-family: var(--font-ui); font-size: 11px; font-weight: 500;
  letter-spacing: 0.1em; text-transform: uppercase;
  background: transparent; color: var(--cream-dim);
  border: 1px solid var(--rule-strong); padding: 15px 34px; cursor: none;
  transition: color var(--dur-fast), border-color var(--dur-fast);
  text-decoration: none; display: inline-block;
}
.btn-ghost:hover { color: var(--cream); border-color: oklch(94% 0.012 80 / 0.4); }
.btn-ghost:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }

/* Vertical year stamp — purely typographic, not a badge */
.hero-year {
  position: absolute; top: calc(var(--nav-h) + 48px); right: var(--s8);
  z-index: 4; pointer-events: none;
  font-family: var(--font-ui); font-size: 9px; font-weight: 500;
  letter-spacing: 0.22em; text-transform: uppercase;
  color: oklch(94% 0.012 80 / 0.2);
  writing-mode: vertical-rl;
  opacity: 0; animation: slideUp 0.8s 1s var(--ease-out) forwards;
}

.hero-scroll {
  position: absolute; bottom: var(--s6); left: var(--s8); z-index: 5;
  display: flex; align-items: center; gap: var(--s4);
  font-family: var(--font-ui); font-size: 9px; font-weight: 500;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: oklch(94% 0.012 80 / 0.3);
  opacity: 0; animation: slideUp 0.8s 1.1s var(--ease-out) forwards;
}
.hero-scroll-line {
  width: 36px; height: 1px;
  background: oklch(94% 0.012 80 / 0.18);
  position: relative; overflow: hidden;
}
.hero-scroll-line::after {
  content: ''; position: absolute; left: -100%; top: 0;
  width: 100%; height: 100%;
  background: var(--gold);
  animation: lineWipe 2s 1.6s var(--ease-out) infinite;
}
@keyframes lineWipe {
  0%   { left: -100%; }
  100% { left: 200%; }
}
@keyframes slideUp {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: none; }
}

/* ============================================================
   AUDIENCE SPLIT — full-bleed, no symmetric card grid
============================================================ */
#audience {
  display: grid; grid-template-columns: 1fr 1fr;
  position: relative;
}
.aud-pane {
  padding: var(--s9) var(--s8) var(--s8);
  min-height: 480px;
  display: flex; flex-direction: column; justify-content: flex-end;
  position: relative; overflow: hidden; cursor: none;
}
.aud-pane.corp  { background: oklch(11% 0.012 240); }
.aud-pane.leis  { background: oklch(11% 0.010 60); }
/* Real background photo — sits behind all content */
.aud-bg-img {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover;
  opacity: 0.18; filter: saturate(0.5);
  z-index: 0; pointer-events: none;
  transition: opacity var(--dur-slow);
}
.aud-pane:hover .aud-bg-img { opacity: 0.28; }
.aud-pane > *:not(.aud-bg-img) { position: relative; z-index: 1; }
.aud-divider {
  position: absolute; top: 0; bottom: 0; left: 50%;
  width: 1px; background: var(--rule); z-index: 10; pointer-events: none;
}
/* Numbered ghost — no gradient, just opacity */
.aud-ghost {
  position: absolute; top: var(--s5); left: var(--s5);
  font-family: var(--font-display); font-size: 200px; font-weight: 400;
  color: oklch(94% 0.012 80 / 0.03);
  line-height: 1; pointer-events: none;
  transition: color var(--dur-slow);
}
.aud-pane:hover .aud-ghost { color: oklch(94% 0.012 80 / 0.055); }
.aud-eyebrow {
  font-family: var(--font-ui); font-size: 9px; font-weight: 700;
  letter-spacing: 0.2em; text-transform: uppercase;
  margin-bottom: var(--s4);
}
.aud-pane.corp .aud-eyebrow { color: oklch(72% 0.10 255); }
.aud-pane.leis .aud-eyebrow { color: var(--gold); }
.aud-h2 {
  font-family: var(--font-display);
  font-size: clamp(34px, 4vw, 54px);
  font-weight: 700; line-height: 1.05;
  letter-spacing: -0.025em;
  color: var(--cream); margin-bottom: var(--s5);
}
.aud-h2 em { font-style: normal; font-weight: 300; color: var(--gold); }
.aud-p {
  font-size: 14px; line-height: 1.8;
  color: var(--cream-dim); max-width: 38ch;
  margin-bottom: var(--s6);
}
.aud-link {
  font-family: var(--font-ui); font-size: 10px; font-weight: 700;
  letter-spacing: 0.1em; text-transform: uppercase;
  text-decoration: none; display: inline-flex; align-items: center; gap: var(--s3);
  min-height: 44px; padding: 0 var(--s2);
  transition: gap var(--dur-fast);
}
.aud-pane.corp .aud-link { color: oklch(72% 0.10 255); }
.aud-pane.leis .aud-link { color: var(--gold); }
.aud-link:hover { gap: var(--s5); }
.aud-link:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }

/* ============================================================
   CLIENTS TICKER
============================================================ */
#clients {
  padding: var(--s8) var(--s8);
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
}
.clients-cap {
  font-family: var(--font-ui); font-size: 9px; font-weight: 700;
  letter-spacing: 0.2em; text-transform: uppercase;
  color: oklch(94% 0.012 80 / 0.25);
  margin-bottom: var(--s6); text-align: center;
}
.ticker-wrap {
  overflow: hidden;
  -webkit-mask: linear-gradient(90deg, transparent, black 10%, black 90%, transparent);
  mask: linear-gradient(90deg, transparent, black 10%, black 90%, transparent);
}
.ticker {
  display: flex; width: max-content;
  /* Scrolled by JS RAF — no CSS animation so prefers-reduced-motion can't kill it */
  will-change: transform;
}
.ticker:hover { --ticker-paused: 1; }
.ticker-item {
  flex: 0 0 auto; padding: 0 var(--s8);
  font-family: var(--font-ui); font-size: 12px; font-weight: 700;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: oklch(94% 0.012 80 / 0.22);
  transition: color var(--dur-fast); white-space: nowrap; cursor: none;
}
.ticker-item:hover { color: oklch(94% 0.012 80 / 0.55); }
.ticker-sep {
  flex: 0 0 auto; padding: 0 var(--s3);
  color: oklch(94% 0.012 80 / 0.1); align-self: center;
  font-size: 18px; cursor: none;
}

/* ============================================================
   SECTION SHELL
============================================================ */
.sec { padding: var(--s10) var(--s8); }
.sec-alt { background: var(--surface); }
.sec-border { border-top: 1px solid var(--rule); }

.sec-eye {
  font-family: var(--font-ui); font-size: 9px; font-weight: 700;
  letter-spacing: 0.22em; text-transform: uppercase;
  color: oklch(94% 0.012 80 / 0.3);
  margin-bottom: var(--s5);
}
.sec-h2 {
  font-family: var(--font-display);
  font-size: clamp(38px, 5vw, 68px);
  font-weight: 700; line-height: 1.05;
  letter-spacing: -0.03em; color: var(--cream);
}
.sec-h2 em { font-style: normal; font-weight: 300; color: var(--gold); }
.sec-rule {
  display: block; width: 32px; height: 1px;
  background: var(--gold-dim); margin: var(--s4) 0 var(--s5);
}
.sec-p {
  font-size: 16px; line-height: 1.85;
  color: var(--cream-dim); max-width: 54ch;
}
.sec-p--mt { margin-top: var(--s4); }

/* ============================================================
   FLEET — accordion. One vehicle open, the others stay compact.
============================================================ */
.fleet-accordion {
  margin-top: var(--s8);
  display: flex;
  flex-direction: column;
  border: 1px solid var(--rule);
}
.fleet-item + .fleet-item { border-top: 1px solid var(--rule); }
.fleet-trigger {
  width: 100%;
  display: grid;
  grid-template-columns: 56px 1fr auto;
  gap: var(--s6);
  align-items: center;
  padding: var(--s6);
  background: var(--cream-ghost);
  border: 0;
  color: var(--cream);
  text-align: left;
  cursor: none;
  transition: background var(--dur-fast), padding-left var(--dur-med) var(--ease-out);
}
.fleet-trigger:hover { background: oklch(94% 0.012 80 / 0.05); padding-left: var(--s7); }
.fleet-trigger:focus-visible { outline: 2px solid var(--gold); outline-offset: -2px; }
.fleet-item.is-open > .fleet-trigger { display: none; }

.fleet-panel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows var(--dur-slow) var(--ease-out);
}
.fleet-item.is-open > .fleet-panel { grid-template-rows: 1fr; }
.fleet-panel-inner {
  min-height: 0;
  overflow: hidden;
  display: grid;
  grid-template-columns: 1fr 1fr;
}
.fleet-panel-visual {
  background: oklch(16% 0.010 75);
  min-height: 320px;
  position: relative;
  overflow: hidden;
}
.fleet-panel-visual img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.78;
}
.fleet-panel-visual--type {
  display: flex;
  align-items: center;
  justify-content: center;
}
.fleet-panel-visual--type span {
  font-family: var(--font-display);
  font-size: clamp(72px, 10vw, 132px);
  font-weight: 800;
  letter-spacing: -0.05em;
  color: oklch(94% 0.012 80 / 0.08);
}
.fleet-panel-info {
  padding: var(--s7);
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.fleet-panel-num {
  font-family: var(--font-display);
  font-size: 72px;
  font-weight: 300;
  color: oklch(94% 0.012 80 / 0.08);
  line-height: 1;
  margin-bottom: var(--s5);
}
.fleet-name {
  font-family: var(--font-display); font-size: 38px;
  font-weight: 800; line-height: 1.05; letter-spacing: -0.03em;
  color: var(--cream); margin-bottom: var(--s3);
}
.fleet-name em { font-style: normal; font-weight: 300; color: var(--gold); }
.fleet-cap {
  font-family: var(--font-ui); font-size: 9px; font-weight: 700;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--gold); margin-bottom: var(--s5);
}
.fleet-desc {
  font-size: 14px; line-height: 1.8;
  color: var(--cream-dim); max-width: 42ch;
}
.fleet-quote {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 40px; width: fit-content; margin-top: var(--s5);
  padding: 0 var(--s5);
  font-family: var(--font-ui); font-size: 10px; font-weight: 700;
  letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--ink); background: var(--cream);
  text-decoration: none; transition: background var(--dur-fast);
}
.fleet-quote:hover { background: var(--gold); }
.fleet-quote:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }

.fleet-row-copy { display: flex; flex-direction: column; gap: var(--s1); }
.fleet-row-num {
  font-family: var(--font-display); font-size: 20px;
  font-weight: 300; color: oklch(94% 0.012 80 / 0.25);
}
.fleet-row-name {
  font-family: var(--font-display); font-size: 26px;
  font-weight: 800; line-height: 1.05; letter-spacing: -0.025em;
  color: var(--cream);
}
.fleet-row-name em { font-style: normal; font-weight: 300; color: var(--gold); }
.fleet-row-sub {
  font-size: 13px; color: var(--cream-dim); margin-top: 4px; line-height: 1.6;
}
.fleet-row-tag {
  font-family: var(--font-ui); font-size: 9px; font-weight: 700;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: oklch(94% 0.012 80 / 0.35);
  white-space: nowrap;
}
/* ============================================================
   WHY — two-column: header + pillars left, quote panel right
   Right panel is self-contained — no sticky/overflow issues
============================================================ */
#why.sec {
  display: grid;
  grid-template-columns: 1fr 0.85fr;
  gap: var(--s9);
  align-items: start;
}
/* The left column holds heading + pillar list naturally */
#why .why-left { display: flex; flex-direction: column; }

.pillar-list {
  display: flex; flex-direction: column;
  margin-top: var(--s7);
}
.pillar {
  padding: var(--s6) 0;
  border-bottom: 1px solid var(--rule);
  display: grid; grid-template-columns: 36px 1fr; gap: var(--s5);
  cursor: none;
  transition: padding-left var(--dur-med) var(--ease-out);
}
.pillar:first-child { border-top: 1px solid var(--rule); }
.pillar:hover { padding-left: var(--s3); }
.pillar-n {
  font-family: var(--font-display); font-size: 13px;
  font-style: italic; color: oklch(94% 0.012 80 / 0.2);
  padding-top: 5px;
}
.pillar-title {
  font-family: var(--font-ui); font-size: 11px; font-weight: 700;
  letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--gold); margin-bottom: var(--s2);
}
.pillar-body {
  font-size: 13px; line-height: 1.85; color: var(--cream-dim);
}

/* Right column — sticky, fills height gracefully */
.why-right {
  position: sticky; top: calc(var(--nav-h) + var(--s6));
  display: flex; flex-direction: column;
  gap: var(--s6);
}
.why-years {
  font-family: var(--font-display);
  font-size: clamp(80px, 11vw, 150px);
  font-weight: 400; color: oklch(94% 0.012 80 / 0.035);
  line-height: 0.85; user-select: none;
}
.why-years em { font-style: italic; }

/* Stat strip — replaces ghost numbers with real data */
.why-stats {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 1px; background: var(--rule);
  border: 1px solid var(--rule);
}
.why-stat {
  background: var(--surface);
  padding: var(--s6) var(--s6);
}
.why-stat-n {
  font-family: var(--font-display);
  font-size: clamp(32px, 4vw, 52px);
  font-weight: 400; line-height: 1;
  color: var(--cream);
}
.why-stat-n em { font-style: normal; font-weight: 300; color: var(--gold); }
.why-stat-l {
  font-family: var(--font-ui); font-size: 9px; font-weight: 700;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: oklch(94% 0.012 80 / 0.35);
  margin-top: var(--s2);
}

/* Quote: NO border-left stripe */
.why-quote-wrap {
  padding: var(--s6) var(--s7);
  background: var(--cream-ghost);
  border: 1px solid var(--rule);
}
.why-quote-mark {
  font-family: var(--font-display); font-size: 48px;
  font-weight: 400; color: var(--gold-dim);
  line-height: 0.5; margin-bottom: var(--s4);
  display: block;
}
.why-quote {
  font-family: var(--font-display); font-size: clamp(16px, 1.6vw, 22px);
  font-style: italic; font-weight: 300;
  color: var(--cream-dim); line-height: 1.6;
}
.why-quote-attr {
  font-family: var(--font-ui); font-size: 9px;
  letter-spacing: 0.1em; text-transform: uppercase;
  color: oklch(94% 0.012 80 / 0.3);
  margin-top: var(--s4);
}

/* ============================================================
   TOURS — editorial row list, no card grid
============================================================ */
.tour-list { margin-top: var(--s8); }
.tour-row {
  display: grid; grid-template-columns: 64px 1fr auto;
  gap: var(--s6); align-items: baseline;
  padding: var(--s6) 0;
  border-bottom: 1px solid var(--rule);
  cursor: none; position: relative;
  transition: padding-left var(--dur-med) var(--ease-out);
}
.tour-row:first-child { border-top: 1px solid var(--rule); }
/* Rainbow rule draw — rainbow usage #2 (structural, single element per row) */
.tour-row::after {
  content: ''; position: absolute; left: 0; bottom: -1px;
  height: 1px; width: 0;
  background: var(--rainbow);
  transition: width var(--dur-slow) var(--ease-out);
}
.tour-row:hover::after { width: 100%; }
.tour-row:hover { padding-left: var(--s5); }
.tour-idx {
  font-family: var(--font-display); font-size: 12px; font-weight: 300;
  color: oklch(94% 0.012 80 / 0.25); text-align: right;
}
.tour-title {
  font-family: var(--font-display);
  font-size: clamp(22px, 2.8vw, 38px);
  font-weight: 400; color: var(--cream); line-height: 1.1;
}
.tour-title em { font-style: italic; font-weight: 300; }
.tour-sub { font-size: 13px; color: var(--cream-dim); margin-top: 4px; }
.tour-tag {
  font-family: var(--font-ui); font-size: 9px; font-weight: 700;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: oklch(94% 0.012 80 / 0.3);
  white-space: nowrap; text-align: right;
}
.tour-cta { margin-top: var(--s8); }

/* ============================================================
   ABOUT — full-bleed asymmetric layout
============================================================ */
#about.sec {
  display: grid; grid-template-columns: 0.85fr 1.15fr;
  gap: var(--s9); align-items: center;
}
.about-visual { position: relative; }
.about-img-frame {
  width: 100%; aspect-ratio: 3/4;
  background: oklch(14% 0.010 75);
  overflow: visible; position: relative;
}
.about-img-frame img {
  width: 100%; height: 100%; object-fit: cover;
}
/* Real photo sits behind SVG map overlay */
.about-bg-img {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover;
  opacity: 0.3; filter: saturate(0.4);
  z-index: 0; pointer-events: none;
}
/* Placeholder map art */
.about-map {
  width: 100%; height: 100%;
  display: flex; align-items: center; justify-content: center;
  overflow: hidden; position: relative; z-index: 1;
}
.about-map svg { width: 75%; }
/* Gradient overlay clipped inside frame using inner wrapper trick */
.about-img-inner {
  position: absolute; inset: 0; overflow: hidden;
}
.about-img-inner::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(to top, oklch(13% 0.008 60 / 0.6) 0%, transparent 50%);
}
.about-stamp {
  position: absolute; bottom: var(--s5); right: calc(-1 * var(--s5));
  background: var(--ink);
  border: 1px solid var(--rule-strong);
  padding: var(--s5) var(--s6);
  z-index: 2;
}
.about-stamp-n {
  font-family: var(--font-display); font-size: 48px;
  font-weight: 400; color: var(--cream); line-height: 1;
}
.about-stamp-n em { font-style: italic; }
.about-stamp-l {
  font-family: var(--font-ui); font-size: 9px; font-weight: 700;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: oklch(94% 0.012 80 / 0.4); margin-top: var(--s1);
}
.about-text .sec-h2 { margin-top: var(--s4); }
/* Mission: NO border-left stripe — use full background tint */
.about-mission {
  margin-top: var(--s6);
  padding: var(--s5) var(--s6);
  background: oklch(72% 0.09 75 / 0.07);
  font-family: var(--font-display); font-size: 20px;
  font-style: italic; font-weight: 300;
  color: oklch(94% 0.012 80 / 0.65); line-height: 1.65;
}

/* Registration credentials */
.about-creds {
  margin-top: var(--s7);
  display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: var(--s2) var(--s6);
  border-top: 1px solid var(--rule);
  padding-top: var(--s6);
}
.about-cred dt {
  font-family: var(--font-ui); font-size: 8px; font-weight: 700;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: oklch(94% 0.012 80 / 0.28); margin-bottom: var(--s1);
}
.about-cred dd {
  font-family: var(--font-ui); font-size: 12px; font-weight: 500;
  letter-spacing: 0.04em; color: var(--cream-dim);
}

/* ============================================================
   BOOKING — form left, contacts right
============================================================ */
.booking-grid {
  display: grid; grid-template-columns: 1fr 1.3fr;
  gap: var(--s9); align-items: start; margin-top: var(--s8);
}
.form { display: flex; flex-direction: column; gap: var(--s5); }
.form-row-2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s4); }
.form-field { display: flex; flex-direction: column; gap: var(--s2); }
.form-lbl {
  font-family: var(--font-ui); font-size: 9px; font-weight: 700;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: oklch(94% 0.012 80 / 0.38);
}
.form-ctrl {
  background: var(--cream-ghost);
  border: 1px solid var(--rule);
  color: var(--cream);
  font-family: var(--font-body); font-size: 14px;
  padding: 13px 15px; outline: none;
  transition: border-color var(--dur-fast), background var(--dur-fast);
  -webkit-appearance: none; border-radius: 0;
}
.form-ctrl::placeholder { color: oklch(94% 0.012 80 / 0.2); }
.form-ctrl:focus {
  border-color: var(--rule-strong);
  background: oklch(94% 0.012 80 / 0.05);
}
.form-ctrl:focus-visible { outline: none; }
select.form-ctrl { cursor: none; }
select.form-ctrl option { background: var(--ink); }
textarea.form-ctrl { resize: vertical; min-height: 96px; }
.form-submit {
  font-family: var(--font-ui); font-size: 11px; font-weight: 700;
  letter-spacing: 0.1em; text-transform: uppercase;
  background: var(--cream); color: var(--ink);
  border: none; padding: 17px 36px; cursor: none; width: 100%;
  transition: background var(--dur-fast);
}
.form-submit:hover { background: var(--gold); }
.form-submit:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
#form-ok {
  display: none; font-family: var(--font-ui); font-size: 10px;
  letter-spacing: 0.12em; color: oklch(65% 0.12 155);
  text-align: center; padding-top: var(--s3);
}

.contacts { display: flex; flex-direction: column; gap: var(--s5); }
/* Contact entry: NO top rainbow stripe on each card */
.contact-entry {
  display: grid; grid-template-columns: auto 1fr;
  gap: var(--s5); align-items: start;
  padding: var(--s5) var(--s6);
  border: 1px solid var(--rule);
}
.contact-entry-divider {
  width: 1px; background: var(--gold-dim); align-self: stretch;
}
.contact-name {
  font-family: var(--font-display); font-size: 24px;
  font-weight: 400; color: var(--cream); line-height: 1.1; margin-bottom: var(--s1);
}
.contact-name em { font-style: italic; font-weight: 300; }
.contact-role {
  font-family: var(--font-ui); font-size: 9px; font-weight: 700;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: oklch(94% 0.012 80 / 0.32); margin-bottom: var(--s4);
}
.contact-line {
  font-size: 13px; color: var(--cream-dim); margin-bottom: var(--s2);
}
.contact-line a {
  color: inherit; text-decoration: none; transition: color var(--dur-fast);
  display: inline-flex; align-items: center; min-height: 44px;
}
.contact-line a:hover { color: var(--cream); }
.contact-line a:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }

.office-block {
  padding: var(--s5) var(--s6);
  background: var(--cream-ghost);
}
.office-label {
  font-family: var(--font-ui); font-size: 9px; font-weight: 700;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: oklch(94% 0.012 80 / 0.3); margin-bottom: var(--s4);
}
.office-addr {
  font-family: var(--font-display); font-size: 17px;
  font-weight: 300; line-height: 1.75; color: var(--cream-dim);
  font-style: normal;
}
.office-phones {
  margin-top: var(--s4); display: flex; gap: var(--s5); flex-wrap: wrap;
}
.office-ph {
  font-family: var(--font-ui); font-size: 10px; font-weight: 700;
  letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--gold); text-decoration: none;
  display: inline-flex; align-items: center; min-height: 44px;
}
.office-ph:hover { color: var(--gold-dim); }
.office-ph:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
.office-wa {
  font-family: var(--font-ui); font-size: 10px; font-weight: 500;
  letter-spacing: 0.1em; text-transform: uppercase;
  color: oklch(94% 0.012 80 / 0.35); text-decoration: none;
  display: inline-flex; align-items: center; min-height: 44px;
}
.office-wa:hover { color: var(--cream-dim); }
.office-wa:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }

/* ============================================================
   FOOTER
============================================================ */
footer {
  padding: var(--s8) var(--s8) var(--s6);
  border-top: 1px solid var(--rule);
}
/* Footer cap — removed rainbow stripe, replaced with subtle rule */
.footer-cap { height: 1px; background: var(--rule-strong); margin-bottom: var(--s7); }
.footer-grid {
  display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr;
  gap: var(--s7); margin-bottom: var(--s8);
}
.footer-brand img { height: 30px; display: block; margin-bottom: var(--s5); }
.footer-brand p {
  font-size: 13px; line-height: 1.8;
  color: oklch(94% 0.012 80 / 0.38); max-width: 28ch;
}
.foot-col-h {
  font-family: var(--font-ui); font-size: 9px; font-weight: 700;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: oklch(94% 0.012 80 / 0.28); margin-bottom: var(--s5);
}
.foot-links { list-style: none; display: flex; flex-direction: column; gap: var(--s3); }
.foot-links li {
  font-size: 13px; color: oklch(94% 0.012 80 / 0.35);
}
.foot-links a {
  font-size: 13px; color: oklch(94% 0.012 80 / 0.45);
  text-decoration: none; transition: color var(--dur-fast);
  display: inline-flex; align-items: center; min-height: 44px;
}
.foot-links a:hover { color: var(--cream); }
.foot-links a:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
.footer-base {
  display: flex; justify-content: space-between; align-items: center;
  padding-top: var(--s5); border-top: 1px solid var(--rule);
}
.footer-copy { font-size: 11px; color: oklch(94% 0.012 80 / 0.22); }

/* ============================================================
   MOBILE MENU
============================================================ */
#mob-menu {
  position: fixed; top: 0; left: 0; right: 0; z-index: 200;
  background: var(--ink);
  border-bottom: 1px solid var(--rule-strong);
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  padding: calc(var(--nav-h) + var(--s2)) var(--s5) var(--s5);
  opacity: 0; pointer-events: none;
  transform: translateY(-16px);
  box-shadow: 0 28px 60px oklch(3% 0.006 60 / 0.45);
  transition: opacity var(--dur-med) var(--ease-out), transform var(--dur-med) var(--ease-out);
}
#mob-menu.open { opacity: 1; pointer-events: all; transform: none; }
.mob-link {
  font-family: var(--font-display); font-size: clamp(21px, 5.8vw, 28px);
  font-weight: 800; font-style: normal;
  color: var(--cream-dim); text-decoration: none;
  transition: color var(--dur-fast), padding-left var(--dur-fast);
  padding: 14px 0;
  border-top: 1px solid var(--rule);
  line-height: 1;
}
.mob-link:last-child { border-bottom: 1px solid var(--rule); }
.mob-link:hover { color: var(--cream); padding-left: var(--s3); }
.mob-link:focus-visible { outline: 2px solid var(--gold); outline-offset: 4px; }
.mob-close {
  position: absolute; top: 12px; right: var(--s5);
  background: none; border: none; cursor: none;
  font-family: var(--font-ui); font-size: 10px; font-weight: 700;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: oklch(94% 0.012 80 / 0.48);
  min-height: 44px; min-width: 72px;
  display: inline-flex; align-items: center; justify-content: flex-end;
  padding: 0 var(--s2);
}
.mob-close:focus-visible { outline: 2px solid var(--gold); }

/* ============================================================
   TOUCH DEVICES — restore system cursor, hide custom cursor
============================================================ */
@media (pointer: coarse) {
  body, a, button, select, .aud-pane, .ticker-item { cursor: auto !important; }
  #cur-dot, #cur-ring { display: none !important; }
}

/* ============================================================
   CLIENTS PROSE — static AI-citable paragraph under ticker
============================================================ */
.clients-prose {
  text-align: center;
  font-family: var(--font-ui); font-size: 11px;
  letter-spacing: 0.04em; line-height: 1.7;
  color: oklch(94% 0.012 80 / 0.3);
  margin-top: var(--s5); padding: 0 var(--s6);
  max-width: 72ch; margin-inline: auto;
}


/* ============================================================
   TESTIMONIALS — editorial row list, not a card grid
============================================================ */
#testimonials.sec { display: block; }

.testi-list {
  margin-top: var(--s8);
  display: flex; flex-direction: column;
}
.testi-row {
  display: grid;
  grid-template-columns: 1fr 280px;
  gap: var(--s8);
  align-items: start;
  padding: var(--s7) 0;
  border-top: 1px solid var(--rule);
}
.testi-row:last-child { border-bottom: 1px solid var(--rule); }
.testi-body {
  font-family: var(--font-body); font-size: clamp(18px, 2.2vw, 26px);
  font-style: italic; font-weight: 300;
  line-height: 1.6; color: oklch(90% 0.01 80 / 0.8);
}
.testi-body::before {
  content: '"';
  font-size: 1.2em; color: var(--gold-dim);
  margin-right: 2px;
}
.testi-body::after {
  content: '"';
  font-size: 1.2em; color: var(--gold-dim);
  margin-left: 2px;
}
.testi-attr {
  display: flex; flex-direction: column; gap: var(--s2);
  padding-top: var(--s2);
}
.testi-name {
  font-family: var(--font-ui); font-size: 12px;
  font-weight: 700; letter-spacing: 0.08em;
  color: var(--cream);
}
.testi-role {
  font-family: var(--font-ui); font-size: 10px;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: oklch(94% 0.012 80 / 0.35); line-height: 1.6;
}

/* ============================================================
   FAQ — two-column: questions left, contact panel right
============================================================ */
#faq.sec {
  display: grid;
  grid-template-columns: 1fr 340px;
  gap: var(--s9);
  align-items: start;
}
#faq .faq-left { display: flex; flex-direction: column; }
.faq-list {
  margin-top: var(--s7);
  display: flex; flex-direction: column;
}
.faq-item {
  border-top: 1px solid var(--rule);
}
.faq-item:last-child { border-bottom: 1px solid var(--rule); }
.faq-q {
  font-family: var(--font-ui); font-size: 14px;
  font-weight: 600; letter-spacing: 0.01em;
  color: var(--cream); cursor: pointer;
  padding: var(--s5) 0;
  list-style: none;
  display: flex; justify-content: space-between; align-items: center;
  gap: var(--s5);
  transition: color 0.2s var(--ease-out);
}
.faq-q::-webkit-details-marker { display: none; }
.faq-q::after {
  content: '+';
  font-family: var(--font-ui); font-size: 20px; font-weight: 300;
  color: oklch(72% 0.09 75 / 0.5);
  flex-shrink: 0;
  transition: transform 0.25s var(--ease-out), color 0.2s;
}
details[open] .faq-q { color: var(--gold); }
details[open] .faq-q::after { transform: rotate(45deg); color: var(--gold); }
.faq-a {
  padding: 0 0 var(--s6);
  padding-right: var(--s6);
}
.faq-a p {
  font-family: var(--font-ui); font-size: 13px;
  line-height: 1.9; color: var(--cream-dim);
}

/* Right panel — sticky contact prompt */
.faq-contact-panel {
  position: sticky; top: calc(var(--nav-h) + var(--s6));
  background: var(--ink-mid);
  border: 1px solid var(--rule-strong);
  padding: var(--s7) var(--s6);
  display: flex; flex-direction: column; gap: var(--s5);
}
.faq-panel-eye {
  font-family: var(--font-ui); font-size: 9px; font-weight: 700;
  letter-spacing: 0.2em; text-transform: uppercase;
  color: oklch(94% 0.012 80 / 0.3);
}
.faq-panel-h {
  font-family: var(--font-display); font-size: 28px;
  font-weight: 400; line-height: 1.15; color: var(--cream);
}
.faq-panel-h em { font-style: italic; color: var(--gold); }
.faq-panel-p {
  font-size: 13px; line-height: 1.8; color: var(--cream-dim);
}
.faq-panel-phone {
  font-family: var(--font-ui); font-size: 22px; font-weight: 700;
  letter-spacing: 0.02em; color: var(--cream);
  text-decoration: none; display: block;
  transition: color var(--dur-fast);
}
.faq-panel-phone:hover { color: var(--gold); }
.faq-panel-note {
  font-family: var(--font-ui); font-size: 10px;
  letter-spacing: 0.06em; color: oklch(94% 0.012 80 / 0.28);
}
.faq-panel-wa {
  font-family: var(--font-ui); font-size: 11px; font-weight: 600;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--gold-dim); text-decoration: none;
  display: inline-flex; align-items: center; gap: var(--s2);
  min-height: 44px; transition: opacity var(--dur-fast);
}
.faq-panel-wa:hover { opacity: 0.75; }

/* Why quote attribution */
.why-quote-attr {
  font-family: var(--font-ui); font-size: 10px;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: oklch(94% 0.012 80 / 0.35);
  margin-top: var(--s3);
}

/* ============================================================
   REDUCED MOTION
============================================================ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

/* ============================================================
   RESPONSIVE
============================================================ */
@media (max-width: 900px) {
  #main-nav { padding: 0 var(--s5); }
  .nav-links, .nav-book { display: none; }
  .nav-burger { display: flex; }

  .sec { padding: var(--s9) var(--s5); }

  /* Hero: keep content vertically centred with nav clearance on mobile */
  #home { min-height: 100svh; }
  .hero-content {
    padding: calc(var(--nav-h) + var(--s6)) var(--s5) var(--s7);
  }
  .hero-year { display: none; }
  .hero-scroll { left: var(--s5); }

  /* Audience: single column, lift photo opacity so it reads on small screens */
  #audience { grid-template-columns: 1fr; }
  .aud-divider { display: none; }
  .aud-pane { min-height: 400px; }
  .aud-bg-img { opacity: 0.28; }

  #clients { padding: var(--s7) var(--s5); }

  .fleet-panel-inner { grid-template-columns: 1fr; }
  .fleet-panel-visual { min-height: 240px; }

  #why.sec { grid-template-columns: 1fr; gap: var(--s7); }
  .why-right { position: static; }

  #faq.sec { grid-template-columns: 1fr; }
  .faq-contact-panel { position: static; top: auto; }

  .testi-row { grid-template-columns: 1fr; gap: var(--s5); }

  #about.sec { grid-template-columns: 1fr; gap: var(--s7); }
  /* Stamp stays inside frame, no bleed */
  .about-stamp { right: 0; bottom: 0; }
  /* Credentials grid: 2 columns on tablet */
  .about-creds { grid-template-columns: 1fr 1fr; }

  .booking-grid { grid-template-columns: 1fr; gap: var(--s7); }
  .form-row-2 { grid-template-columns: 1fr; }

  footer { padding: var(--s7) var(--s5) var(--s5); }
  .footer-grid { grid-template-columns: 1fr 1fr; gap: var(--s6); }

  /* Tighten footer link spacing — 44px min-height in a single col is too airy */
  .foot-links { gap: 0; }
  .foot-links a { min-height: 40px; }
}

@media (max-width: 600px) {
  .hero-h1 { font-size: 42px; }
  .sec-h2 { font-size: 32px; }

  /* Audience panes shorter on phones, enough for content */
  .aud-pane { min-height: 340px; padding: var(--s7) var(--s5) var(--s6); }
  .aud-h2 { font-size: 36px; }

  /* Tours & fleet: hide tags to reduce horizontal crunch */
  .tour-row { grid-template-columns: 40px 1fr; }
  .tour-tag { display: none; }
  .fleet-trigger { grid-template-columns: 40px 1fr; gap: var(--s4); padding: var(--s5); }
  .fleet-trigger:hover { padding-left: var(--s5); }
  .fleet-row-tag { display: none; }

  /* About credentials: single column on phones */
  .about-creds { grid-template-columns: 1fr; gap: var(--s3); }

  /* Testimonials: attr block stacks below quote on phones */
  .testi-row { grid-template-columns: 1fr; gap: var(--s4); }
  .testi-body { font-size: clamp(17px, 4.5vw, 22px); }

  /* Footer: full single column */
  .footer-grid { grid-template-columns: 1fr; }
  .footer-base { flex-direction: column; gap: var(--s3); text-align: center; }
}

/* ============================================================
   ROUTE PAGE LAYOUT  (.rp-*)
   Used by: route-chardham-yatra, route-somnath-dwarka,
            route-statue-of-unity
============================================================ */

/* Hero */
.rp-hero {
  position: relative;
  height: 70vh;
  min-height: 480px;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
}
.rp-hero-bg {
  position: absolute;
  inset: 0;
}
.rp-hero-bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 40%;
  display: block;
}
.rp-hero-bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top,
    oklch(9% 0.008 60 / 0.92) 0%,
    oklch(9% 0.008 60 / 0.45) 50%,
    transparent 100%
  );
}
.rp-hero-content {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 var(--s7) var(--s9);
}
.rp-eyebrow {
  font-family: var(--font-ui);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gold);
  margin: 0 0 var(--s4);
}
.rp-h1 {
  font-family: var(--font-display);
  font-size: clamp(42px, 7vw, 80px);
  font-weight: 800;
  letter-spacing: -0.04em;
  line-height: 1.0;
  color: var(--cream);
  margin: 0 0 var(--s5);
}
.rp-h1 em {
  font-style: normal;
  font-weight: 300;
  color: var(--gold);
}
.rp-sub {
  font-family: var(--font-ui);
  font-size: 16px;
  color: var(--cream-dim);
  margin: 0 0 var(--s7);
  letter-spacing: 0.03em;
}
.rp-cta {
  display: inline-block;
  background: var(--gold);
  color: var(--ink);
  font-family: var(--font-ui);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 14px 32px;
  text-decoration: none;
  transition: opacity 0.2s;
}
.rp-cta:hover { opacity: 0.85; }

/* Body section */
.rp-body {
  background: var(--ink);
}
.rp-layout {
  display: grid;
  grid-template-columns: 1fr 340px;
  gap: var(--s9);
  align-items: start;
  max-width: 1200px;
  margin: 0 auto;
  padding: var(--s10) var(--s7);
}

/* Main content */
.rp-main { min-width: 0; }

.rp-sec-h {
  font-family: var(--font-display);
  font-size: clamp(26px, 3.5vw, 36px);
  font-weight: 700;
  letter-spacing: -0.03em;
  color: var(--cream);
  margin: 0 0 var(--s6);
}
.rp-sec-h3 {
  font-family: var(--font-display);
  font-size: clamp(19px, 2.5vw, 24px);
  font-weight: 600;
  color: var(--cream);
  margin: var(--s9) 0 var(--s5);
}
.rp-p {
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.75;
  color: var(--cream-dim);
  margin: 0 0 var(--s6);
  max-width: 68ch;
}

/* Cards in main content */
.rp-card {
  background: var(--ink-mid);
  padding: var(--s7);
  margin-bottom: var(--s6);
}
.rp-card-label {
  font-family: var(--font-ui);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold);
  margin: 0 0 var(--s3);
}
.rp-card-h {
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 700;
  color: var(--cream);
  margin: 0 0 var(--s5);
}
.rp-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--s4);
}
.rp-list li {
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  color: var(--cream-dim);
  padding-left: var(--s6);
  position: relative;
}
.rp-list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 10px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--gold);
  flex-shrink: 0;
}

/* Itinerary variant */
.rp-itinerary {
  background: var(--ink-mid);
  padding: var(--s7);
  margin-bottom: var(--s6);
}
.rp-itinerary-label {
  font-family: var(--font-ui);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold);
  margin: 0 0 var(--s3);
}
.rp-itinerary-h {
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 700;
  color: var(--cream);
  margin: 0 0 var(--s5);
}
.rp-itinerary-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--s4);
}
.rp-itinerary-list li {
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  color: var(--cream-dim);
  padding-left: var(--s6);
  position: relative;
}
.rp-itinerary-list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 10px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--gold);
}

/* Sidebar */
.rp-sidebar { position: sticky; top: calc(var(--nav-h) + var(--s6)); }

.rp-sidebar-card {
  background: var(--ink-mid);
  padding: var(--s8);
}
.rp-sidebar-eye {
  font-family: var(--font-ui);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold);
  margin: 0 0 var(--s3);
}
.rp-sidebar-h {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 700;
  color: var(--cream);
  margin: 0 0 var(--s5);
}
.rp-sidebar-p {
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.7;
  color: var(--cream-dim);
  margin: 0 0 var(--s5);
}
.rp-sidebar-list {
  list-style: none;
  padding: 0;
  margin: 0 0 var(--s5);
  display: flex;
  flex-direction: column;
  gap: var(--s3);
}
.rp-sidebar-list li {
  font-family: var(--font-ui);
  font-size: 14px;
  color: var(--cream-dim);
  padding-left: var(--s5);
  position: relative;
}
.rp-sidebar-list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 8px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--gold-dim);
}
.rp-sidebar-note {
  font-family: var(--font-ui);
  font-size: 13px;
  color: oklch(94% 0.012 80 / 0.35);
  margin: 0 0 var(--s7);
  line-height: 1.6;
}
.rp-sidebar-btn {
  display: block;
  background: var(--gold);
  color: var(--ink);
  font-family: var(--font-ui);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  text-align: center;
  padding: 14px 20px;
  text-decoration: none;
  margin-bottom: var(--s4);
  transition: opacity 0.2s;
}
.rp-sidebar-btn:hover { opacity: 0.85; }
.rp-sidebar-wa {
  display: block;
  text-align: center;
  font-family: var(--font-ui);
  font-size: 14px;
  color: oklch(70% 0.15 155);
  text-decoration: none;
  padding: 10px;
}
.rp-sidebar-wa:hover { opacity: 0.8; }

/* Route page footer */
.site-footer-rp {
  background: var(--ink);
  border-top: 1px solid var(--rule);
  padding: var(--s8) var(--s7);
}
.rp-footer-inner {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: var(--s7);
  flex-wrap: wrap;
}
.rp-footer-logo {
  height: 32px;
  width: auto;
  opacity: 0.7;
  flex-shrink: 0;
}
.rp-footer-copy {
  font-family: var(--font-ui);
  font-size: 13px;
  color: oklch(94% 0.012 80 / 0.35);
  margin: 0;
  flex: 1;
}
.rp-footer-links {
  display: flex;
  gap: var(--s6);
  flex-wrap: wrap;
}
.rp-footer-links a {
  font-family: var(--font-ui);
  font-size: 13px;
  color: oklch(94% 0.012 80 / 0.5);
  text-decoration: none;
  transition: color 0.2s;
}
.rp-footer-links a:hover { color: var(--cream); }

/* Route page responsive */
@media (max-width: 960px) {
  .rp-layout {
    grid-template-columns: 1fr;
    gap: var(--s8);
    padding: var(--s8) var(--s6);
  }
  .rp-sidebar { position: static; }
}
@media (max-width: 600px) {
  .rp-hero-content { padding: 0 var(--s5) var(--s8); }
  .rp-layout { padding: var(--s7) var(--s5); }
  .rp-footer-inner { flex-direction: column; align-items: flex-start; gap: var(--s4); }
}