/* ==========================================================================
   La Palapa ATV'S, Puerto Penasco / Rocky Point, Sonora MX
   Spec build by NeonFrame Web Design. "Throttle-down scroll" concept.
   Palette from owner logo. Anton + Inter + tiny Caveat. Mobile-first.
   ========================================================================== */

/* ---------- Tokens ---------- */
:root {
  /* brand palette (from logo.webp) */
  --red:        #CC1C1C;   /* primary CTA / go-book */
  --red-dark:   #A81414;
  --gold:       #D4892A;   /* sunset gold, hover/rail/dust */
  --gold-soft:  #E6A24A;
  --sand:       #C8A96A;   /* desert sand, borders/labels */
  --ink:        #0A0A0A;   /* deep black cinematic bg */
  --ink-2:      #121110;
  --palm:       #1A1A1A;
  --cream:      #F5F5F0;   /* flag-white / body on dark */
  --cream-dim:  #C9C7BF;
  --near-black: #1A1A1A;   /* text on sand/light panels */
  --panel:      #F6F4EC;   /* sand-tinted off-white panels */
  --panel-2:    #EFEAD9;
  --panel-line: #E0D7BF;

  /* flag livery stripe (reserved colors) */
  --flag-green: #006847;
  --flag-white: #F5F5F0;
  --flag-red:   #CE1126;   /* stripe only, never CTA */

  /* fonts */
  --font-display: 'Anton', 'Bebas Neue', Impact, sans-serif;
  --font-hand:    'Caveat', 'Segoe Script', cursive;
  --font-body:    'Inter', system-ui, -apple-system, sans-serif;

  /* sizing */
  --gutter: clamp(1.15rem, 4vw, 2.5rem);
  --max-w: 1280px;
  --nav-h: 64px;

  /* motion */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);

  --radius: 6px;
  --shadow-card: 0 18px 50px rgba(0,0,0,0.45);
  --shadow-gold: 0 0 0 1px var(--gold), 0 12px 40px rgba(212,137,42,0.28);
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 16px;
  line-height: 1.6;
  color: var(--cream);
  background: var(--ink);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
  min-height: 100vh;
}
body.is-locked { overflow: hidden; }

img, picture, video { display: block; max-width: 100%; height: auto; }
svg { display: block; }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 400;
  line-height: 0.96;
  letter-spacing: 0.012em;
  text-transform: uppercase;
}
h1 { font-size: clamp(2.6rem, 11vw, 6.5rem); }
h2 { font-size: clamp(2rem, 6vw, 4.25rem); }
h3 { font-size: clamp(1.35rem, 3.4vw, 2.1rem); }
h4 { font-size: clamp(1.05rem, 2vw, 1.3rem); }

p { margin: 0 0 1em; }
a { color: inherit; text-decoration: none; transition: color 0.18s ease; }
button { font-family: inherit; cursor: pointer; background: none; border: none; color: inherit; }
ul, ol { list-style: none; }
strong { font-weight: 600; }

:focus { outline: none; }
:focus-visible {
  outline: 3px solid var(--gold);
  outline-offset: 3px;
  border-radius: 3px;
}
::selection { background: var(--red); color: var(--cream); }

/* ---------- Utility ---------- */
.wrap { max-width: var(--max-w); margin: 0 auto; padding: 0 var(--gutter); width: 100%; }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}
.hand { font-family: var(--font-hand); font-weight: 700; letter-spacing: 0.01em; }
.overline {
  display: inline-block;
  font-family: var(--font-body);
  font-size: 0.72rem; font-weight: 600;
  letter-spacing: 0.24em; text-transform: uppercase;
  color: var(--sand);
}

/* skip link */
.skip {
  position: absolute; left: 8px; top: -60px; z-index: 2000;
  background: var(--red); color: var(--cream); padding: 0.6rem 1rem;
  border-radius: 4px; font-weight: 600; transition: top 0.2s ease;
}
.skip:focus { top: 8px; }

/* ---------- Flag hairline livery stripe ---------- */
.flag-stripe {
  display: block; width: 100%; height: 3px; border: 0;
  background: linear-gradient(to right,
    var(--flag-green) 0 33.333%,
    var(--flag-white) 33.333% 66.666%,
    var(--flag-red) 66.666% 100%);
}
.flag-stripe--short { width: 64px; height: 4px; border-radius: 2px; }

/* ---------- Film grain / noise overlay ---------- */
.noise {
  position: absolute; inset: 0; pointer-events: none;
  opacity: 0.05; mix-blend-mode: overlay; z-index: 3;
  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='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 200px;
}

/* ---------- Warm photo grade (uniform look across gallery/fleet) ---------- */
.graded { filter: saturate(1.08) contrast(1.05) brightness(0.99); }

/* ---------- Buttons ---------- */
.btn {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center; gap: 0.6em;
  font-family: var(--font-display);
  font-size: 1rem; letter-spacing: 0.1em; text-transform: uppercase;
  padding: 0.95rem 1.7rem;
  border: 2px solid transparent; border-radius: var(--radius);
  transition: background 0.2s var(--ease-out), color 0.2s var(--ease-out),
              border-color 0.2s var(--ease-out), transform 0.2s var(--ease-out),
              box-shadow 0.2s var(--ease-out);
  white-space: nowrap; cursor: pointer;
}
.btn__arrow { transition: transform 0.2s var(--ease-out); }
.btn:hover .btn__arrow { transform: translateX(4px); }

.btn--red { background: var(--red); color: var(--cream); border-color: var(--red); }
.btn--red:hover { background: var(--red-dark); border-color: var(--red-dark); transform: translateY(-2px); box-shadow: 0 10px 30px rgba(204,28,28,0.35); }

.btn--ghost {
  background: rgba(212,137,42,0.08);
  color: var(--cream);
  border-color: var(--gold);
  box-shadow: 0 0 0 1px rgba(212,137,42,0.15) inset, 0 6px 20px rgba(0,0,0,0.3);
}
.btn--ghost:hover {
  background: var(--gold);
  color: var(--ink);
  transform: translateY(-2px);
  box-shadow: 0 10px 28px rgba(212,137,42,0.4);
}
/* On light panels, ghost button needs darker text + visible border */
.section--light .btn--ghost { color: var(--near-black); background: rgba(212,137,42,0.12); }
.section--light .btn--ghost:hover { color: var(--ink); background: var(--gold); }

.btn--dark { background: var(--ink); color: var(--cream); border-color: var(--ink); }
.btn--dark:hover { background: var(--red); border-color: var(--red); }

/* ==========================================================================
   Loader
   ========================================================================== */
.loader {
  position: fixed; inset: 0; z-index: 1500;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 1.25rem; background: var(--ink);
  transition: opacity 0.6s ease, visibility 0.6s ease;
}
.loader.is-done { opacity: 0; visibility: hidden; pointer-events: none; }
.loader__logo { width: clamp(180px, 50vw, 280px); height: auto; opacity: 0; transform: scale(0.96); transition: opacity 0.5s ease, transform 0.6s var(--ease-out); }
.loader.is-ready .loader__logo { opacity: 1; transform: scale(1); }
.loader__stripe { width: clamp(180px, 50vw, 280px); }
.loader__track { width: clamp(180px, 50vw, 280px); height: 3px; background: rgba(212,137,42,0.18); border-radius: 2px; overflow: hidden; }
.loader__bar { height: 100%; width: 0%; background: var(--gold); border-radius: 2px; transition: width 0.12s linear; }
.loader__meta { font-family: var(--font-body); font-size: 0.72rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--sand); }

/* ==========================================================================
   Scroll progress + speedometer rail
   ========================================================================== */
.progress-top {
  position: fixed; top: 0; left: 0; height: 3px; width: 0%;
  background: var(--gold); z-index: 1200;
}
.rail {
  position: fixed; right: 18px; top: 50%; transform: translateY(-50%);
  z-index: 900; display: none; flex-direction: column; align-items: center; gap: 0.8rem;
}
.rail__label { writing-mode: vertical-rl; font-family: var(--font-body); font-size: 0.62rem; letter-spacing: 0.28em; text-transform: uppercase; color: var(--sand); }
.rail__track { width: 3px; height: 180px; background: rgba(200,169,106,0.2); border-radius: 2px; overflow: hidden; position: relative; }
.rail__fill { position: absolute; top: 0; left: 0; width: 100%; height: 0%; background: linear-gradient(to bottom, var(--gold), var(--red)); border-radius: 2px; }
.rail__pct { font-family: var(--font-display); font-size: 0.8rem; color: var(--gold); }

/* ==========================================================================
   Nav
   ========================================================================== */
.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 1000;
  background: linear-gradient(to bottom, rgba(10,10,10,0.78) 0%, rgba(10,10,10,0.55) 70%, rgba(10,10,10,0.0) 100%);
  transition: background 0.3s ease, box-shadow 0.3s ease, backdrop-filter 0.3s ease;
}
.nav.is-scrolled { background: rgba(10,10,10,0.95); box-shadow: 0 1px 0 rgba(200,169,106,0.22), 0 8px 30px rgba(0,0,0,0.5); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.nav__inner { display: flex; align-items: center; justify-content: space-between; gap: 1rem; height: var(--nav-h); }
.nav__brand { display: flex; flex-direction: column; gap: 3px; }
.nav__logo { height: 34px; width: auto; }
.nav__brand .flag-stripe { width: 100%; max-width: 120px; }
.nav__right { display: flex; align-items: center; gap: 1rem; }
.nav__links { display: none; }

.lang-toggle {
  display: inline-flex; align-items: center; border: 1.5px solid var(--sand);
  border-radius: 999px; overflow: hidden; font-family: var(--font-display);
  font-size: 0.82rem; letter-spacing: 0.06em;
}
.lang-toggle button { padding: 0.3rem 0.7rem; color: var(--cream); transition: background 0.18s ease, color 0.18s ease; }
.lang-toggle button.is-active { background: var(--gold); color: var(--ink); }

.nav__cta { display: none; }

.nav__menu-btn {
  display: inline-flex; align-items: center; gap: 0.5rem;
  font-family: var(--font-display); font-size: 0.9rem; letter-spacing: 0.08em;
  color: var(--cream); text-transform: uppercase;
}
.nav__menu-btn__bars { display: inline-flex; flex-direction: column; gap: 4px; width: 22px; }
.nav__menu-btn__bars span { display: block; height: 2px; background: var(--cream); border-radius: 2px; }

/* full-screen mobile menu */
.menu {
  position: fixed; inset: 0; z-index: 1100; background: rgba(10,10,10,0.98);
  transform: translateY(-100%); transition: transform 0.4s var(--ease-out);
  display: flex; flex-direction: column; padding: var(--gutter);
}
.menu.is-open { transform: translateY(0); }
.menu__top { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 2rem; }
.menu__top .lang-toggle { border-color: var(--sand); }
.menu__close { font-family: var(--font-display); font-size: 1rem; letter-spacing: 0.08em; color: var(--cream); text-transform: uppercase; }
.menu__links { display: flex; flex-direction: column; gap: 0.4rem; }
.menu__links a {
  font-family: var(--font-display); font-size: clamp(1.8rem, 8vw, 2.6rem);
  letter-spacing: 0.02em; text-transform: uppercase; color: var(--cream);
  padding: 0.3rem 0; transition: color 0.18s ease;
}
.menu__links a:hover, .menu__links a:focus-visible { color: var(--gold); }
.menu__cta { margin-top: auto; }
.menu__cta .btn { width: 100%; }

/* ==========================================================================
   Hero
   ========================================================================== */
.hero {
  position: relative; min-height: 100svh; display: flex; align-items: flex-end;
  overflow: hidden; background: var(--ink);
  padding-bottom: clamp(3.5rem, 9vh, 6rem);
}
/* HERO PHOTO SWAP POINT:
   Currently uses the authentic entrance/palapa scene (Entrance_Sign.webp).
   When an action/dune shot arrives, swap the <picture> sources in index.html
   (and the preload in <head>) for the new file. Everything else stays. */
.hero__media { position: absolute; inset: 0; z-index: 0; }
.hero__media img {
  width: 100%; height: 100%; object-fit: cover; object-position: center 38%;
  transform: scale(1.04); transition: transform 7s ease-out;
  filter: saturate(1.12) contrast(1.1) brightness(1.0);
}
.hero.is-loaded .hero__media img { transform: scale(1); }
.hero__scrim {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    linear-gradient(to top, rgba(10,10,10,0.94) 0%, rgba(10,10,10,0.55) 40%, rgba(10,10,10,0.25) 70%, rgba(10,10,10,0.45) 100%),
    linear-gradient(to right, rgba(10,10,10,0.78) 0%, rgba(10,10,10,0.45) 35%, rgba(10,10,10,0.12) 55%, rgba(10,10,10,0) 75%);
}
/* Desktop: dedicated dark "text panel" on the left of the hero so the copy has its own
   space and the fleet photo gets the right side cleanly. Below 900px this disappears
   and the original full-bleed photo + bottom scrim layout takes over. */
@media (min-width: 900px) {
  .hero__scrim {
    background:
      linear-gradient(to right,
        rgba(10,10,10,0.96) 0%,
        rgba(10,10,10,0.96) 32%,
        rgba(10,10,10,0.72) 42%,
        rgba(10,10,10,0.32) 52%,
        rgba(10,10,10,0.05) 62%,
        rgba(10,10,10,0) 70%),
      linear-gradient(to top, rgba(10,10,10,0.55) 0%, rgba(10,10,10,0.15) 35%, rgba(10,10,10,0) 60%);
  }
}
.hero__vignette {
  position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background: radial-gradient(120% 90% at 75% 30%, rgba(212,137,42,0.22), rgba(212,137,42,0) 55%);
  mix-blend-mode: screen;
}
.hero .wrap { position: relative; z-index: 4; }
/* Desktop: anchor hero copy to the LEFT panel created by the heavy left-side scrim above.
   Text starts at the gutter from the viewport edge (further left than the rest of the page so
   it sits FULLY inside the dark text-panel area, not centered with the rest of the layout). */
@media (min-width: 900px) {
  .hero {
    /* center vertically inside the left panel, not flex-end at the bottom, so the copy reads
       like an editorial hero with the photo as a feature beside it */
    align-items: center;
    padding-bottom: 0;
  }
  .hero .wrap {
    /* min big enough for "HIT THE DUNES." in Anton at the h1's max font (~104px) to fit */
    max-width: clamp(460px, 42vw, 560px);
    margin-left: var(--gutter);
    margin-right: auto;
    padding-left: 0;
  }
  /* In the editorial layout, the h1 line-height can tighten a touch */
  .hero__title { line-height: 1.0; }
}
.hero__kicker { font-size: clamp(1.4rem, 6vw, 2.2rem); color: var(--gold-soft); margin-bottom: 0.4rem; text-shadow: 0 2px 18px rgba(0,0,0,0.6); }
.hero__title { color: var(--cream); margin-bottom: 1rem; text-shadow: 0 4px 30px rgba(0,0,0,0.55); }
.hero__title .accent { color: var(--red); }
.hero__sub { font-size: clamp(1rem, 2.4vw, 1.2rem); max-width: 40ch; color: var(--cream); margin-bottom: 1.5rem; }
.hero__ctas { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-bottom: 1.5rem; }
.hero__meta {
  display: flex; flex-wrap: wrap; gap: 0.4rem 1rem; align-items: center;
  font-size: 0.72rem; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--sand);
}
.hero__meta .dot { width: 4px; height: 4px; border-radius: 50%; background: var(--gold); }
.hero__scrollcue {
  position: absolute; left: 50%; bottom: 1.1rem; transform: translateX(-50%); z-index: 4;
  font-size: 0.62rem; letter-spacing: 0.24em; text-transform: uppercase; color: var(--sand);
  display: flex; flex-direction: column; align-items: center; gap: 0.4rem;
}
.hero__scrollcue .line { width: 1px; height: 26px; background: linear-gradient(to bottom, var(--gold), transparent); animation: cue 1.8s var(--ease-in-out) infinite; }
@keyframes cue { 0%,100% { transform: scaleY(0.4); transform-origin: top; opacity: 0.5; } 50% { transform: scaleY(1); opacity: 1; } }

/* hero text rise-in (JS toggles .is-loaded on hero) */
.hero__rise { opacity: 0; transform: translateY(26px); transition: opacity 0.7s var(--ease-out), transform 0.7s var(--ease-out); }
.hero.is-loaded .hero__rise { opacity: 1; transform: translateY(0); }
.hero.is-loaded .hero__rise:nth-child(2) { transition-delay: 0.08s; }
.hero.is-loaded .hero__rise:nth-child(3) { transition-delay: 0.16s; }
.hero.is-loaded .hero__rise:nth-child(4) { transition-delay: 0.24s; }
.hero.is-loaded .hero__rise:nth-child(5) { transition-delay: 0.32s; }

/* ==========================================================================
   Speed marquee
   ========================================================================== */
.marquee {
  background: var(--ink-2); border-top: 1px solid rgba(200,169,106,0.18);
  border-bottom: 1px solid rgba(200,169,106,0.18);
  overflow: hidden; white-space: nowrap; padding: 0.7rem 0;
}
.marquee__track { display: inline-flex; align-items: center; will-change: transform; animation: marquee 26s linear infinite; }
.marquee__item {
  font-family: var(--font-display); font-size: clamp(1.1rem, 3vw, 1.6rem);
  letter-spacing: 0.06em; text-transform: uppercase; color: var(--sand); padding: 0 1.4rem;
}
.marquee__sep { color: var(--gold); font-size: 1rem; padding: 0 0.2rem; }
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* ==========================================================================
   Section scaffolding
   ========================================================================== */
.section { position: relative; padding: clamp(3.5rem, 9vw, 6.5rem) 0; }
.section--dark { background: var(--ink); color: var(--cream); }
.section--sand-dark { background: linear-gradient(180deg, var(--ink) 0%, #100d08 100%); color: var(--cream); }
.section--light { background: var(--panel); color: var(--near-black); }
.section__num {
  font-family: var(--font-display); font-size: clamp(3rem, 12vw, 7rem);
  line-height: 1; color: transparent; -webkit-text-stroke: 1.5px rgba(200,169,106,0.35);
  position: absolute; top: clamp(1rem, 3vw, 2rem); right: var(--gutter); z-index: 0; pointer-events: none;
}
.section--light .section__num { -webkit-text-stroke: 1.5px rgba(200,169,106,0.6); }
.section__head { position: relative; z-index: 1; margin-bottom: clamp(2rem, 5vw, 3rem); max-width: 42ch; }
.section__head h2 { margin: 0.5rem 0 0.6rem; }
.section--light .section__head h2 { color: var(--near-black); }
.section__intro { color: var(--cream-dim); font-size: 1.05rem; }
.section--light .section__intro { color: #57534a; }

/* dust-wipe divider between sections */
.divider { position: relative; height: 0; }
.divider .flag-stripe { position: absolute; left: 0; right: 0; bottom: 0; }

/* reveal animation */
.rise { opacity: 0; transform: translateY(28px); transition: opacity 0.7s var(--ease-out), transform 0.7s var(--ease-out); }
.rise.is-in { opacity: 1; transform: translateY(0); }

/* ==========================================================================
   Fleet
   ========================================================================== */
.fleet__grid {
  display: grid; grid-template-columns: 1fr; gap: 1.25rem; position: relative; z-index: 1;
}
.fleet-card {
  position: relative; background: var(--ink-2); border: 1px solid rgba(200,169,106,0.22);
  border-radius: var(--radius); overflow: hidden; display: flex; flex-direction: column;
  transition: transform 0.25s var(--ease-out), box-shadow 0.25s var(--ease-out), border-color 0.25s var(--ease-out);
}
.fleet-card:hover { transform: translateY(-4px); border-color: var(--gold); box-shadow: var(--shadow-gold); }
.fleet-card__media { position: relative; aspect-ratio: 4 / 3; overflow: hidden; background: var(--ink); }
.fleet-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s var(--ease-out); }
.fleet-card:hover .fleet-card__media img { transform: scale(1.06); }
.fleet-card__price {
  position: absolute; top: 0.85rem; left: 0.85rem; z-index: 2;
  background: var(--red); color: var(--cream); font-family: var(--font-display);
  font-size: 1.05rem; letter-spacing: 0.03em; padding: 0.35rem 0.7rem; border-radius: 4px;
  box-shadow: 0 6px 18px rgba(0,0,0,0.4); transition: transform 0.25s var(--ease-out);
  display: inline-flex; align-items: baseline; gap: 0.3rem;
}
.fleet-card__price .per { font-family: var(--font-body); font-size: 0.62rem; font-weight: 600; letter-spacing: 0.06em; opacity: 0.92; }
.fleet-card:hover .fleet-card__price { transform: translateY(-3px); }
.fleet-card__body { padding: 1.1rem 1.15rem 1.3rem; display: flex; flex-direction: column; gap: 0.5rem; flex: 1; }
.fleet-card__name { color: var(--cream); }
.fleet-card__seats { font-size: 0.72rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--gold); }
.fleet-card__desc { color: var(--cream-dim); font-size: 0.95rem; flex: 1; }
.fleet-card__reserve {
  display: inline-flex; align-items: center; gap: 0.45rem; margin-top: 0.4rem;
  font-family: var(--font-display); font-size: 0.92rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--red);
}
.fleet-card__reserve .u { position: relative; }
.fleet-card__reserve .u::after { content: ""; position: absolute; left: 0; bottom: -2px; width: 0; height: 2px; background: var(--gold); transition: width 0.25s var(--ease-out); }
.fleet-card__reserve:hover { color: var(--gold); }
.fleet-card__reserve:hover .u::after { width: 100%; }
.fleet__note { margin-top: 1.25rem; font-size: 0.82rem; color: var(--sand); text-align: center; }

/* ==========================================================================
   Reserve form
   ========================================================================== */
.reserve { position: relative; }
.reserve__card {
  position: relative; z-index: 1; max-width: 760px; margin: 0 auto;
  background: var(--panel); color: var(--near-black);
  border-radius: 12px; overflow: hidden; box-shadow: var(--shadow-card);
}
.reserve__header { background: var(--red); color: var(--cream); padding: 1.4rem var(--gutter) 1.3rem; }
.reserve__header h2 { color: var(--cream); }
.reserve__header .sub { font-size: 0.98rem; margin: 0.5rem 0 0; color: rgba(255,255,255,0.92); }
.reserve__body { padding: clamp(1.25rem, 4vw, 2rem); }
.form-grid { display: grid; grid-template-columns: 1fr; gap: 1.05rem; }
.field { display: flex; flex-direction: column; gap: 0.4rem; }
.field--full { grid-column: 1 / -1; }
.field label { font-size: 0.82rem; font-weight: 600; letter-spacing: 0.04em; color: #3a382f; }
.field .opt { color: #8a8678; font-weight: 400; }
.field .req { color: var(--red); }
.field input, .field select, .field textarea {
  font-family: var(--font-body); font-size: 16px; /* prevents iOS zoom */
  color: var(--near-black); background: #fff;
  border: 1.5px solid var(--panel-line); border-radius: var(--radius);
  padding: 0.8rem 0.85rem; transition: border-color 0.18s ease, box-shadow 0.18s ease;
  width: 100%;
}
.field textarea { min-height: 96px; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus {
  border-color: var(--gold); box-shadow: 0 0 0 3px rgba(212,137,42,0.25);
}
.field__error { font-size: 0.8rem; color: var(--red); min-height: 0; display: none; }
.field.has-error input, .field.has-error select, .field.has-error textarea { border-color: var(--red); }
.field.has-error .field__error { display: block; }

/* Live price summary card (between Vehicle pills and Riders) */
.price-summary {
  background: linear-gradient(135deg, #fff8ec 0%, #fdeed0 100%);
  border: 1.5px solid var(--sand);
  border-radius: var(--radius);
  padding: 1rem 1.1rem;
  color: var(--near-black);
}
.price-summary__empty {
  font-size: 0.92rem; color: #6b6450; font-style: italic;
  text-align: center;
}
.price-summary__row {
  display: flex; align-items: baseline; justify-content: space-between; gap: 0.6rem;
  padding: 0.25rem 0;
}
.price-summary__row--total {
  margin-top: 0.4rem; padding-top: 0.65rem;
  border-top: 1.5px dashed var(--sand);
}
.price-summary__label {
  font-size: 0.82rem; font-weight: 600; letter-spacing: 0.04em; color: #3a382f;
  text-transform: uppercase;
}
.price-summary__detail {
  font-family: var(--font-body); font-size: 1rem; font-weight: 500; color: var(--near-black);
  text-align: right;
}
.price-summary__total-label {
  font-family: var(--font-display); font-size: 1.05rem; letter-spacing: 0.05em;
  text-transform: uppercase; color: var(--near-black);
}
.price-summary__total-amt {
  font-family: var(--font-display); font-size: clamp(1.7rem, 5vw, 2.3rem);
  color: var(--red); letter-spacing: 0.01em;
  text-shadow: 0 1px 0 rgba(255,255,255,0.6);
}
.price-summary__note {
  margin: 0.6rem 0 0; font-size: 0.78rem; color: #6b6450; line-height: 1.5;
}

/* vehicle pill group */
.vehicle-pills { display: grid; grid-template-columns: 1fr 1fr; gap: 0.6rem; }
.vehicle-pills .pill {
  position: relative; display: flex; flex-direction: column; gap: 0.15rem;
  border: 1.5px solid var(--panel-line); border-radius: var(--radius);
  padding: 0.7rem 0.8rem; cursor: pointer; background: #fff; transition: border-color 0.18s ease, background 0.18s ease;
}
.vehicle-pills .pill input { position: absolute; opacity: 0; pointer-events: none; }
.vehicle-pills .pill .name { font-family: var(--font-display); font-size: 1rem; letter-spacing: 0.02em; color: var(--near-black); }
.vehicle-pills .pill .rate { font-size: 0.78rem; font-weight: 600; color: var(--red); }
.vehicle-pills .pill:hover { border-color: var(--gold); }
.vehicle-pills .pill:has(input:checked) { border-color: var(--red); background: #fff5f3; box-shadow: 0 0 0 1.5px var(--red) inset; }
.vehicle-pills .pill:has(input:focus-visible) { box-shadow: 0 0 0 3px rgba(212,137,42,0.3); }

.form-submit { margin-top: 1.4rem; }
.form-submit .btn { width: 100%; }
.form-submit .btn[disabled] { opacity: 0.85; cursor: progress; }
/* waiver-locked state: clearly "not yet" vs the in-flight submitting state */
.form-submit .btn.is-locked[disabled] { opacity: 0.5; cursor: not-allowed; }
.form-submit__hint { margin-top: 0.6rem; text-align: center; font-size: 0.82rem; color: var(--red); font-weight: 600; }
.form-submit__hint[hidden] { display: none; }
.spinner {
  width: 18px; height: 18px; border: 2px solid rgba(255,255,255,0.45);
  border-top-color: var(--gold); border-radius: 50%; display: inline-block;
  animation: spin 0.7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
.form-reassure { margin-top: 0.85rem; text-align: center; font-size: 0.85rem; color: #6b6759; }
/* Honeypot field: hidden from real users, visible to bots */
.hp-field {
  position: absolute !important;
  left: -10000px !important;
  top: auto !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
}

.form-error-notice {
  display: none; margin-top: 1rem; padding: 1rem 1.1rem; border-radius: var(--radius);
  background: #fdecea; border: 1px solid #f3b9b3; color: #8a1c14; font-size: 0.92rem;
}
.form-error-notice.is-shown { display: block; }
.form-error__msg { margin: 0 0 0.75rem; font-weight: 500; line-height: 1.5; }
.form-error__buttons { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-bottom: 0.75rem; }
.form-error__btn { flex: 1 1 140px; font-size: 0.82rem; padding: 0.7rem 1rem; }
.form-error__btn.btn--ghost { color: #8a1c14; border-color: #8a1c14; background: transparent; }
.form-error__btn.btn--ghost:hover { background: #8a1c14; color: #fff; }
.form-error__phone { margin: 0; font-size: 0.86rem; color: #6b1810; }

/* Success state extras: WhatsApp button + tagline */
.reserve__success .sx-extra {
  margin: 0.8rem 0 0.6rem; font-size: 0.9rem; color: #6b6759; font-weight: 500;
}
.reserve__success .sx-whatsapp {
  margin-bottom: 1.4rem;
  background: #25D366; border-color: #25D366; color: #fff;
}
.reserve__success .sx-whatsapp:hover { background: #1ebe5b; border-color: #1ebe5b; transform: translateY(-2px); box-shadow: 0 10px 30px rgba(37,211,102,0.35); }

/* success state */
.reserve__success { display: none; padding: clamp(1.5rem, 5vw, 2.5rem); text-align: center; }
.reserve__card.is-success .reserve__body { display: none; }
.reserve__card.is-success .reserve__success { display: block; }
.success-check {
  width: 64px; height: 64px; margin: 0 auto 1rem; border-radius: 50%;
  background: var(--flag-green); display: flex; align-items: center; justify-content: center;
}
.success-check svg { width: 32px; height: 32px; stroke: #fff; }
.reserve__success .sx-title { font-family: var(--font-hand); font-weight: 700; font-size: 2.2rem; color: var(--flag-green); margin-bottom: 0.4rem; }
.reserve__success .sx-body { color: #3a382f; max-width: 44ch; margin: 0 auto 1rem; }
.reserve__success .sx-reset { font-family: var(--font-display); letter-spacing: 0.06em; text-transform: uppercase; color: var(--red); border-bottom: 2px solid var(--gold); padding-bottom: 2px; }

/* ==========================================================================
   Reservation waiver step (in the form) + Waiver / Rental Agreement modal
   ========================================================================== */
.waiver-step {
  display: flex; flex-direction: column; gap: 0.6rem; align-items: flex-start;
  background: var(--panel-2); border: 1.5px solid var(--panel-line); border-radius: var(--radius);
  padding: 0.85rem;
}
.waiver-step__btn { font-size: 0.82rem; padding: 0.7rem 1.1rem; }
.waiver-step__status { font-size: 0.88rem; }
.waiver-step__status-pending { color: #8a7d5a; font-weight: 600; }
.waiver-step__status-signed { display: inline-flex; align-items: center; gap: 0.4rem; color: var(--flag-green); font-weight: 600; }
.waiver-check { width: 18px; height: 18px; stroke: var(--flag-green); flex: none; }
.field.has-error .waiver-step { border-color: var(--red); }

@media (min-width: 480px) {
  .waiver-step { flex-direction: row; align-items: center; justify-content: space-between; }
}

/* ---- modal shell ---- */
.waiver { position: fixed; inset: 0; z-index: 1500; display: flex; align-items: flex-start; justify-content: center; padding: clamp(0.5rem, 3vw, 2.5rem); }
.waiver[hidden] { display: none; }
.waiver__overlay { position: fixed; inset: 0; background: rgba(8,7,5,0.74); backdrop-filter: blur(3px); }
.waiver__dialog {
  position: relative; z-index: 1; width: 100%; max-width: 720px; max-height: 94vh;
  display: flex; flex-direction: column;
  background: var(--panel); color: var(--near-black);
  border-radius: 12px; overflow: hidden; box-shadow: 0 30px 90px rgba(0,0,0,0.6);
  animation: waiverIn 0.28s var(--ease-out) both;
}
@keyframes waiverIn { from { opacity: 0; transform: translateY(14px) scale(0.99); } to { opacity: 1; transform: none; } }

.waiver__head {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem;
  background: var(--red); color: var(--cream); padding: 1.05rem clamp(1rem, 4vw, 1.6rem);
  flex: none;
}
.waiver__title { color: var(--cream); font-size: clamp(1.25rem, 4.5vw, 1.7rem); line-height: 1.05; }
.waiver__sub { font-family: var(--font-body); font-size: 0.9rem; color: rgba(255,255,255,0.92); margin-top: 0.3rem; }
.waiver__close {
  flex: none; width: 40px; height: 40px; border-radius: 50%; font-size: 1.6rem; line-height: 1;
  color: var(--cream); background: rgba(255,255,255,0.12); display: flex; align-items: center; justify-content: center;
  transition: background 0.18s ease;
}
.waiver__close:hover { background: rgba(255,255,255,0.26); }

/* ---- scrollable verbatim contract ---- */
.waiver__scroll {
  overflow-y: auto; -webkit-overflow-scrolling: touch;
  padding: clamp(1rem, 4vw, 1.6rem); border-bottom: 1px solid var(--panel-line);
  background: var(--cream);
}
/* In-modal EN/ES contract toggle */
.waiver__contract-lang {
  display: inline-flex; align-items: center;
  border: 1.5px solid var(--sand); border-radius: 999px;
  overflow: hidden; margin: 0 0 1rem;
  font-family: var(--font-display); font-size: 0.78rem; letter-spacing: 0.08em;
}
.waiver__contract-lang-btn {
  padding: 0.4rem 0.95rem; color: var(--near-black); background: transparent;
  text-transform: uppercase; transition: background 0.15s ease, color 0.15s ease;
}
.waiver__contract-lang-btn:hover { background: rgba(212,137,42,0.12); }
.waiver__contract-lang-btn.is-active { background: var(--gold); color: var(--ink); }
.waiver__contract[hidden] { display: none; }

/* Standalone waiver page (waiver.html) — same components as the modal, laid out as a full-page card */
.page--waiver .waiver-page__body { padding: clamp(1.25rem, 4vw, 2rem); }
.page--waiver .waiver-page__scroll {
  background: var(--cream); color: var(--near-black);
  border: 1.5px solid var(--panel-line); border-radius: var(--radius);
  padding: clamp(1rem, 3vw, 1.6rem);
  margin-bottom: 1.4rem;
  /* Tall contract area; the page itself scrolls, not the inner block */
}
.page--waiver .waiver-page__form { color: var(--near-black); }
.page--waiver .reserve__card.is-success .waiver-page__body { display: none; }
.page--waiver .reserve__card.is-success .reserve__success { display: block; }
.page--waiver .waiver__actions { margin-top: 1.4rem; }
.page--waiver .waiver__submit { width: 100%; }
.waiver__contract {
  font-family: var(--font-body); /* legal text: legibility over flair */
  font-size: 0.92rem; line-height: 1.6; color: #2a2820;
}
.waiver__contract p { margin: 0 0 0.85rem; }
.waiver__c-brand { font-weight: 600; letter-spacing: 0.06em; font-size: 1.02rem; color: var(--near-black); }
.waiver__c-h { font-weight: 600; color: var(--near-black); margin-top: 1.1rem; }
.waiver__contract ul { margin: 0 0 0.95rem; padding-left: 1.25rem; }
.waiver__contract li { margin-bottom: 0.5rem; }
.waiver__contract li::marker { color: var(--red); }
.waiver__c-staff { font-style: italic; color: #6b6450; }
.waiver__c-blank { letter-spacing: 0.02em; }
.waiver__c-sign-line { margin-top: 1rem; }
.waiver__c-date { font-weight: 600; color: var(--near-black); }
.waiver__c-note { margin: 1rem 0 0; font-size: 0.82rem; font-style: italic; color: #6b6450; border-top: 1px dashed var(--panel-line); padding-top: 0.75rem; }

/* ---- customer data + signing form ---- */
.waiver__form { overflow-y: auto; padding: clamp(1rem, 4vw, 1.6rem); background: var(--panel); }
.waiver__sec { font-family: var(--font-display); letter-spacing: 0.04em; text-transform: uppercase; color: var(--near-black); font-size: 1.05rem; margin: 0.2rem 0 0.85rem; }
.waiver__sec:not(:first-child) { margin-top: 1.6rem; }
.waiver-grid { display: grid; grid-template-columns: 1fr; gap: 0.9rem; }
@media (min-width: 560px) { .waiver-grid { grid-template-columns: 1fr 1fr; } }
.waiver-grid .field--full { grid-column: 1 / -1; }

.waiver__signed-place {
  margin-top: 1.1rem; font-size: 0.92rem; color: #3a382f;
  background: var(--panel-2); border-left: 3px solid var(--gold); border-radius: 4px; padding: 0.7rem 0.85rem;
}
.waiver__signed-date { font-weight: 600; color: var(--near-black); }

.waiver__agree { display: flex; align-items: flex-start; gap: 0.6rem; margin-top: 1.1rem; font-size: 0.92rem; color: #2a2820; cursor: pointer; line-height: 1.5; }
.waiver__agree input { flex: none; width: 20px; height: 20px; margin-top: 2px; accent-color: var(--red); cursor: pointer; }
.waiver__agree-err { margin-top: 0.25rem; }
.waiver__form .field__error { display: none; }
.waiver__form .field.has-error .field__error { display: block; }
.waiver__form .field.has-error input { border-color: var(--red); }
.waiver__agree-err.is-shown, .waiver__sig-err.is-shown { display: block; }

.waiver__sig-help { font-size: 0.86rem; color: #6b6759; margin-bottom: 0.6rem; }
.waiver__sig { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 0.6rem; }
.waiver__sig-canvas-wrap { position: relative; flex: 1 1 240px; }
.waiver__sig-canvas {
  display: block; width: 100%; height: 180px; touch-action: none;
  background: #fff; border: 1.5px solid var(--panel-line); border-radius: var(--radius);
  cursor: crosshair;
}
.waiver__sig-canvas:focus-visible { outline: 3px solid rgba(212,137,42,0.55); outline-offset: 2px; }
.waiver__sig-baseline { position: absolute; left: 12px; right: 12px; bottom: 44px; border-bottom: 1px dashed var(--sand); pointer-events: none; }
.waiver__sig-placeholder { position: absolute; left: 14px; bottom: 50px; font-size: 0.84rem; color: #b3ac95; pointer-events: none; transition: opacity 0.15s ease; }
.waiver__sig-canvas-wrap.has-ink .waiver__sig-placeholder { opacity: 0; }
.waiver__sig-clear { font-family: var(--font-display); letter-spacing: 0.05em; text-transform: uppercase; font-size: 0.82rem; color: var(--red); border: 1.5px solid var(--panel-line); border-radius: var(--radius); padding: 0.55rem 1rem; background: #fff; transition: border-color 0.18s ease, color 0.18s ease; }
.waiver__sig-clear:hover { border-color: var(--red); }
.waiver__typed { margin-top: 1rem; }

.waiver__actions { display: flex; gap: 0.7rem; margin-top: 1.5rem; flex-wrap: wrap; }
.waiver__cancel { background: transparent; color: var(--near-black); border-color: var(--panel-line); }
.waiver__cancel:hover { border-color: var(--near-black); }
.waiver__submit { flex: 1; min-width: 160px; }
.waiver__submit[disabled] { opacity: 0.45; cursor: not-allowed; }

/* ==========================================================================
   How It Works
   ========================================================================== */
.steps { display: grid; grid-template-columns: 1fr; gap: 1.5rem; position: relative; z-index: 1; }
.step { display: flex; gap: 1rem; align-items: flex-start; }
.step__icon {
  flex: none; width: 54px; height: 54px; border-radius: 50%;
  border: 2px solid var(--gold); display: flex; align-items: center; justify-content: center;
}
.step__icon svg { width: 26px; height: 26px; stroke: var(--gold); fill: none; stroke-width: 2; }
.step__num { font-family: var(--font-display); font-size: 0.78rem; letter-spacing: 0.14em; color: var(--red); }
.step h3 { margin: 0.2rem 0 0.3rem; color: var(--near-black); }
.step p { color: #57534a; margin: 0; }

/* ==========================================================================
   Why / Experience
   ========================================================================== */
.why__layout { display: grid; grid-template-columns: 1fr; gap: 2rem; position: relative; z-index: 1; align-items: center; }
.why__photo { position: relative; border-radius: 10px; overflow: hidden; box-shadow: var(--shadow-card); }
.why__photo img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 4 / 3; }
.why__photo .cap {
  position: absolute; left: 1rem; bottom: 0.8rem; font-family: var(--font-hand);
  font-weight: 700; font-size: 1.5rem; color: var(--cream); text-shadow: 0 2px 12px rgba(0,0,0,0.7);
}
.why__stats { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem 1.5rem; }
.why-stat { border-left: 3px solid var(--gold); padding-left: 0.9rem; }
.why-stat__num { font-family: var(--font-display); font-size: clamp(1.8rem, 5vw, 2.6rem); color: var(--cream); line-height: 1; }
.why-stat__num .red { color: var(--red); }
.why-stat__label { display: block; margin-top: 0.3rem; font-size: 0.92rem; color: var(--cream-dim); }

/* ==========================================================================
   Gallery: uniform 4:3 grid, every thumb the same size regardless of source ratio
   ========================================================================== */
.gallery__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.9rem;
  position: relative;
  z-index: 1;
}
.gallery__item {
  position: relative; border-radius: 8px;
  overflow: hidden; cursor: pointer; background: var(--ink-2); display: block; width: 100%;
  aspect-ratio: 4 / 3;
  padding: 0; border: 0;
}
.gallery__item img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s var(--ease-out); }
.gallery__item:hover img { transform: scale(1.05); }
.gallery__item .cap {
  position: absolute; left: 0.8rem; bottom: 0.6rem; font-family: var(--font-hand);
  font-weight: 700; font-size: 1.35rem; color: var(--cream); text-shadow: 0 2px 10px rgba(0,0,0,0.8);
  opacity: 0; transform: translateY(8px); transition: opacity 0.25s ease, transform 0.25s ease;
}
.gallery__item::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(10,10,10,0.55), transparent 45%); opacity: 0; transition: opacity 0.25s ease; }
.gallery__item:hover .cap, .gallery__item:focus-visible .cap { opacity: 1; transform: translateY(0); }
.gallery__item:hover::after, .gallery__item:focus-visible::after { opacity: 1; }

/* lightbox */
.lightbox {
  position: fixed; inset: 0; z-index: 1400; background: rgba(5,5,5,0.96);
  display: none; align-items: center; justify-content: center; padding: clamp(1rem, 4vw, 3rem);
}
.lightbox.is-open { display: flex; }
.lightbox__img { max-width: 92vw; max-height: 86vh; border-radius: 6px; box-shadow: 0 30px 80px rgba(0,0,0,0.6); }
.lightbox__btn {
  position: absolute; top: 50%; transform: translateY(-50%); width: 52px; height: 52px;
  border-radius: 50%; background: rgba(255,255,255,0.08); color: var(--cream); font-size: 1.6rem;
  display: flex; align-items: center; justify-content: center; transition: background 0.18s ease;
}
.lightbox__btn:hover { background: var(--red); }
.lightbox__prev { left: clamp(0.6rem, 3vw, 2rem); }
.lightbox__next { right: clamp(0.6rem, 3vw, 2rem); }
.lightbox__close { position: absolute; top: clamp(0.8rem, 3vw, 1.6rem); right: clamp(0.8rem, 3vw, 1.6rem); width: 46px; height: 46px; border-radius: 50%; background: rgba(255,255,255,0.08); color: var(--cream); font-size: 1.4rem; display: flex; align-items: center; justify-content: center; }
.lightbox__close:hover { background: var(--red); }
.lightbox__count { position: absolute; bottom: clamp(0.8rem, 3vw, 1.6rem); left: 50%; transform: translateX(-50%); font-family: var(--font-display); letter-spacing: 0.1em; color: var(--sand); }

/* ==========================================================================
   Visit / Contact
   ========================================================================== */
.visit__layout { display: grid; grid-template-columns: 1fr; gap: 2rem; position: relative; z-index: 1; }
.visit__info { display: flex; flex-direction: column; gap: 1.3rem; }
.visit-block h3 { color: var(--cream); font-size: 1.2rem; margin-bottom: 0.4rem; }
.visit-block p, .visit-block a { color: var(--cream-dim); font-size: 1rem; }
.visit-block a:hover { color: var(--gold); }
.badge-open {
  display: inline-flex; align-items: center; gap: 0.5rem; align-self: flex-start;
  background: var(--gold); color: var(--ink); font-family: var(--font-display);
  font-size: 0.85rem; letter-spacing: 0.06em; text-transform: uppercase;
  padding: 0.45rem 0.85rem; border-radius: 999px;
}
.badge-open .pulse { width: 8px; height: 8px; border-radius: 50%; background: var(--flag-green); }
.visit__phones a { display: block; font-family: var(--font-display); font-size: 1.3rem; letter-spacing: 0.02em; color: var(--cream); }
.visit__phones a:hover { color: var(--gold); }
.visit__phones .tag-primary { font-family: var(--font-body); font-size: 0.7rem; font-weight: 600; letter-spacing: 0.14em; color: var(--gold); display: inline-block; margin-left: 0.5rem; vertical-align: middle; }
.map-link {
  display: inline-flex; align-items: center; gap: 0.5rem; margin-top: 0.5rem;
  font-family: var(--font-display); letter-spacing: 0.04em; text-transform: uppercase;
  color: var(--red); font-size: 0.95rem;
}
.map-link:hover { color: var(--gold); }
.visit__map {
  border-radius: 10px; overflow: hidden; border: 1px solid rgba(200,169,106,0.25);
  background: var(--ink-2); position: relative;
  min-height: 340px; display: flex; flex-direction: column;
}
/* Embedded map fills the panel; on desktop the grid stretches the panel to match the
   info column, on mobile it falls back to the min-height. */
.visit__map-frame {
  display: block; width: 100%; flex: 1 1 auto; min-height: 320px; border: 0;
  filter: saturate(0.95);
}
.visit__map-directions {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
  padding: 0.7rem 1rem; background: var(--ink); color: var(--gold);
  font-family: var(--font-display); letter-spacing: 0.06em; text-transform: uppercase;
  font-size: 0.85rem; border-top: 1px solid rgba(200,169,106,0.25);
  transition: background 0.18s ease, color 0.18s ease;
}
.visit__map-directions:hover { background: var(--red); color: var(--cream); }
.visit__cta { margin-top: 0.5rem; }

/* ==========================================================================
   Footer
   ========================================================================== */
.foot { background: var(--ink); border-top: 1px solid rgba(200,169,106,0.18); padding: clamp(2.5rem, 6vw, 4rem) 0 6.5rem; }
.foot__grid { display: grid; grid-template-columns: 1fr; gap: 2rem; }
.foot__brand a { display: inline-block; }
.foot__brand img { display: block; height: 44px; width: auto; margin-bottom: 0.6rem; }
/* Match the rendered logo width so the flag strip sits directly under the logo. Logo aspect 480x320, so at 44px tall it renders 66px wide. */
.foot__brand .flag-stripe { display: block; width: 66px; margin-bottom: 0.8rem; }
.foot__brand p { color: var(--cream-dim); font-size: 0.95rem; max-width: 38ch; }
.foot__col h4 { color: var(--gold); font-size: 0.95rem; letter-spacing: 0.06em; margin-bottom: 0.8rem; }
.foot__col ul { display: flex; flex-direction: column; gap: 0.5rem; }
.foot__col a, .foot__col li { color: var(--cream-dim); font-size: 0.95rem; }
.foot__col a:hover { color: var(--gold); }
/* Instagram icon link in footer */
.foot__ig { display: inline-flex; align-items: center; gap: 0.45rem; transition: color 0.18s ease; }
.foot__ig .ig-icon { flex: none; width: 20px; height: 20px; }
.foot__ig:hover { color: var(--gold); }
.foot__ig:hover .ig-icon { color: var(--gold); }
.foot__signoff { font-family: var(--font-hand); font-weight: 700; font-size: 1.6rem; color: var(--gold); margin-top: 1rem; }
.foot__bottom {
  margin-top: 2.5rem; padding-top: 1.5rem; border-top: 1px solid rgba(200,169,106,0.14);
  display: flex; flex-wrap: wrap; gap: 0.5rem 1.5rem; justify-content: space-between;
  font-size: 0.82rem; color: var(--sand);
}
.foot__bottom a:hover { color: var(--gold); }

/* ==========================================================================
   Mobile pinned Reserve bar
   ========================================================================== */
.mobile-bar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 950;
  display: flex; gap: 0.5rem; padding: 0.6rem var(--gutter) calc(0.6rem + env(safe-area-inset-bottom, 0));
  background: rgba(10,10,10,0.96); border-top: 1px solid rgba(200,169,106,0.22);
  backdrop-filter: blur(8px);
}
.mobile-bar .btn--red { flex: 1; }
.mobile-bar .icon-btn {
  flex: none; width: 52px; border: 2px solid var(--gold); border-radius: var(--radius);
  display: flex; align-items: center; justify-content: center; color: var(--gold);
  transition: background 0.18s ease, color 0.18s ease;
}
.mobile-bar .icon-btn:hover { background: var(--gold); color: var(--ink); }
.mobile-bar .icon-btn svg { width: 22px; height: 22px; }

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (min-width: 600px) {
  .form-grid { grid-template-columns: 1fr 1fr; }
  .field--full { grid-column: 1 / -1; }
  .fleet__grid { grid-template-columns: 1fr 1fr; }
  .gallery__grid { grid-template-columns: 1fr 1fr; }
  .foot__grid { grid-template-columns: 2fr 1fr 1fr; }
}

@media (min-width: 900px) {
  :root { --nav-h: 72px; }
  .nav__links { display: flex; align-items: center; gap: 1.35rem; flex-wrap: nowrap; white-space: nowrap; }
  .nav__links a {
    font-family: var(--font-body); font-size: 0.92rem; font-weight: 500;
    letter-spacing: 0.02em; color: var(--cream); position: relative;
  }
  .nav__links a::after { content: ""; position: absolute; left: 0; bottom: -4px; width: 0; height: 2px; background: var(--gold); transition: width 0.22s var(--ease-out); }
  .nav__links a:hover::after { width: 100%; }
  .nav__cta { display: inline-flex; }
  .nav__cta.btn { padding: 0.6rem 1.2rem; font-size: 0.9rem; }
  .nav__menu-btn { display: none; }
  .rail { display: flex; }
  .fleet__grid { grid-template-columns: repeat(4, 1fr); }
  .gallery__grid { grid-template-columns: repeat(3, 1fr); }
  .why__layout { grid-template-columns: 1.05fr 1fr; gap: 3rem; }
  .steps { grid-template-columns: repeat(3, 1fr); gap: 2rem; }
  .visit__layout { grid-template-columns: 1fr 1fr; gap: 3rem; }
  .mobile-bar { display: none; }
  .foot { padding-bottom: clamp(2.5rem, 6vw, 4rem); }
  .why__stats { grid-template-columns: 1fr 1fr; }
}

/* The full desktop nav (6 links + language toggle + Reserve CTA) needs ~1020px to fit on one
   line. Between 900-1039px it would wrap to two lines and shove the Reserve button around (looks
   broken on smaller laptops; fine on wide monitors). In that range, fall back to the hamburger +
   bottom Reserve bar, which is a clean known-good layout. Full desktop nav only at >=1040px. */
@media (min-width: 900px) and (max-width: 1039px) {
  .nav__links { display: none; }
  .nav__cta { display: none; }
  .nav__menu-btn { display: inline-flex; }
  .mobile-bar { display: flex; }
}

@media (min-width: 1100px) {
  .fleet__grid { gap: 1.5rem; }
}

/* ==========================================================================
   Multipage additions (nav active state, page-top spacing, section CTAs,
   home teasers, reserve CTA band). Layout/visual language unchanged.
   ========================================================================== */

/* Active nav tab: keep the gold underline permanently shown + bolder label. */
.nav__links a.is-active { color: var(--gold); }
.menu__links a.is-active { color: var(--gold); }
@media (min-width: 900px) {
  .nav__links a.is-active::after { width: 100%; }
}

/* Subpages have no tall hero, so the first section must clear the fixed nav. */
.section--page-top { padding-top: calc(var(--nav-h) + clamp(2.25rem, 6vw, 4rem)); }
/* The decorative section-number (01, 02, etc.) on subpages must also clear the nav,
   otherwise it sits ABOVE the page-top padding and gets clipped behind the fixed nav. */
.section--page-top .section__num { top: calc(var(--nav-h) + clamp(1rem, 3vw, 2rem)); }

/* Centered call-to-action under a section's content. Bottom margin gives breathing room
   above the dust-wipe flag-stripe divider so the button never sits on the white band. */
.section__cta { position: relative; z-index: 1; margin-top: clamp(2rem, 5vw, 3rem); margin-bottom: clamp(2rem, 5vw, 3rem); text-align: center; }
.section__cta .btn { min-width: 220px; }

/* Home "fleet at a glance" cards hide the long description for a tighter teaser. */
#fleet-teaser .fleet-card__desc { display: none; }

/* Home condensed Why stats: same grid, just used standalone (no photo column). */
.why__stats--teaser { margin-top: clamp(1rem, 3vw, 1.5rem); }

/* Home strong Reserve CTA band. */
.reserve-band__inner { position: relative; z-index: 1; max-width: 52ch; }
.reserve-band__inner h2 { margin: 0.5rem 0 0.6rem; }
.reserve-band__ctas { display: flex; flex-wrap: wrap; gap: 0.9rem; margin-top: clamp(1.5rem, 4vw, 2rem); }
.reserve-band .section--light .section__intro,
.reserve-band .section__intro { color: #57534a; }

/* Visit address line: readable, allow it to wrap on narrow screens. */
.visit__address { line-height: 1.5; }

/* ==========================================================================
   Reduced motion (honored everywhere, non-negotiable)
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  .hero__media img { transform: none !important; }
  .marquee__track { animation: none !important; }
  .hero__scrollcue .line { animation: none !important; }
  .rise { opacity: 1 !important; transform: none !important; }
  .hero__rise { opacity: 1 !important; transform: none !important; }
  .spinner { animation: spin 0.7s linear infinite; } /* keep tiny submit spinner so users see progress */
}