/* ============================================================
   Forge Luxury — Homepage Styles
   Font stack mirrors Apple's system UI font (SF Pro) since the
   real SF Pro font files are not licensed for open web embedding.
   ============================================================ */

:root {
  --color-black: #0a0a0a;
  --color-charcoal: #14161a;
  --color-cream: #f6f3ec;
  --color-sand: #d8c9a3;
  --color-gold: #c9a24b;
  --color-gold-light: #e6cd8a;
  --color-white: #ffffff;
  --color-text-muted: rgba(246, 243, 236, 0.7);
  --color-ink-muted: rgba(10, 10, 10, 0.62);

  /* Ocean teal — reserved for the homepage hero only (the "entry
     point"), so it reads as a one-time welcome accent rather than a
     colour repeated throughout the site. */
  --color-teal: #1c7d78;
  --color-teal-light: #6fd0c8;

  /* Apple-style section colour — each section below commits to one
     flat, confident colour (black or white) rather than a blended
     gradient, so moving from one to the next while scrolling reads as
     a distinct, deliberate chapter, the way apple.com cuts cleanly
     between black and white rather than fading through a gradient. */

  --max-width: 1280px;
  --nav-height: 84px;
  --ease: cubic-bezier(0.16, 1, 0.3, 1);

  /* True SF Pro on Apple devices via the system stack; Inter (same
     geometry, free to embed) fills in everywhere else so the site
     still reads consistently on Windows and Android. */
  --font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display",
    "SF Pro Text", "SF Pro Icons", "Inter", "Helvetica Neue", Helvetica,
    Arial, sans-serif;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: var(--font-family);
  background: var(--color-black);
  color: var(--color-white);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

a {
  text-decoration: none;
  color: inherit;
}

img {
  display: block;
  max-width: 100%;
}

button {
  font-family: inherit;
  cursor: pointer;
  border: none;
  background: none;
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--color-gold);
}

.eyebrow::before {
  content: "";
  width: 28px;
  height: 1px;
  background: var(--color-gold);
}

/* ---------------- Navigation ---------------- */

body.no-scroll {
  overflow: hidden;
  height: 100%;
}

.nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  height: var(--nav-height);
  display: flex;
  align-items: center;
  padding: 0 clamp(20px, 5vw, 64px);
  transition: background-color 0.5s var(--ease), box-shadow 0.5s var(--ease),
    height 0.4s var(--ease), backdrop-filter 0.5s var(--ease);
  background: linear-gradient(
    to bottom,
    rgba(10, 10, 10, 0.55) 0%,
    rgba(10, 10, 10, 0) 100%
  );
}

.nav.is-scrolled {
  height: 68px;
  background: rgba(10, 10, 10, 0.82);
  backdrop-filter: saturate(180%) blur(16px);
  -webkit-backdrop-filter: saturate(180%) blur(16px);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.06);
}

.nav-inner {
  width: 100%;
  max-width: 1440px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.brand {
  display: flex;
  align-items: baseline;
  gap: 8px;
  font-size: 19px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--color-white);
}

.brand-mark {
  color: var(--color-gold);
  font-weight: 700;
}

.brand-logo {
  height: 58px;
  width: auto;
  display: block;
  transition: height 0.4s var(--ease);
}

.nav.is-scrolled .brand-logo {
  height: 46px;
}

.nav-links {
  display: flex;
  align-items: center;
  gap: clamp(18px, 2.4vw, 40px);
  list-style: none;
}

.nav-links a {
  font-size: 14.5px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.86);
  letter-spacing: 0.01em;
  position: relative;
  padding: 6px 0;
  transition: color 0.25s var(--ease);
}

.nav-links a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 0;
  height: 1px;
  background: var(--color-gold);
  transition: width 0.3s var(--ease);
}

.nav-links a:hover {
  color: var(--color-white);
}

.nav-links a:hover::after {
  width: 100%;
}

.nav-links a.is-active {
  color: var(--color-white);
}

.nav-links a.is-active::after {
  width: 100%;
}

.nav-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--color-black);
  background: var(--color-gold);
  padding: 10px 20px;
  border-radius: 999px;
  letter-spacing: 0.01em;
  transition: transform 0.3s var(--ease), background 0.3s var(--ease);
  white-space: nowrap;
}

.nav-cta:hover {
  background: var(--color-gold-light);
  transform: translateY(-1px);
}

.nav-toggle {
  display: none;
  flex-direction: column;
  gap: 5px;
  width: 26px;
  z-index: 1200;
}

.nav-toggle span {
  height: 2px;
  width: 100%;
  background: var(--color-white);
  border-radius: 2px;
  transition: transform 0.3s var(--ease), opacity 0.3s var(--ease);
}

/* ---------------- Hero ---------------- */

.hero {
  position: relative;
  /* Fixed to exactly one screen (not min-height) so the flex-grow
     video row below always fills whatever vertical space is left
     over after the headline — as large as possible on every screen,
     but never taller than the viewport, so nothing is ever cropped
     below the fold. */
  height: 100svh;
  width: 100%;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-white);
  background: linear-gradient(165deg, #020304 0%, #030d12 45%, #041613 78%, #061c19 100%);
  padding: calc(var(--nav-height) + 18px) clamp(20px, 5vw, 64px) 28px;
}

.hero-glow {
  position: absolute;
  inset: -30%;
  z-index: 0;
  pointer-events: none;
  /* One warm gold accent, kept up in the top-right corner and away
     from the aquamarine base below, so it reads as a highlight rather
     than muddying the blue-to-teal blend into brown. */
  background: radial-gradient(
      circle at 82% 12%,
      rgba(201, 162, 75, 0.1),
      transparent 50%
    ),
    radial-gradient(
      circle at 10% 92%,
      rgba(111, 208, 200, 0.1),
      transparent 55%
    ),
    radial-gradient(
      circle at 6% 8%,
      rgba(37, 99, 158, 0.08),
      transparent 48%
    );
}

.hero-inner {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  max-width: 1240px;
  width: 100%;
  height: 100%;
  text-align: center;
}

/* Sized to the video's own resolution rather than stretched to fill
   the viewport — the frame scales down on smaller screens but is
   capped so it's never blown up past native quality. Sized as large
   as the space allows so the hero doesn't feel like a small panel
   floating in empty black space. */
.hero-frame {
  position: relative;
  width: auto;
  height: min(78vh, 820px);
  max-width: 100%;
  max-height: calc(100svh - var(--nav-height) - 220px);
  aspect-ratio: 9 / 16;
  border-radius: 26px;
  overflow: hidden;
  box-shadow: 0 40px 90px rgba(0, 0, 0, 0.55),
    0 0 0 1px rgba(255, 255, 255, 0.08);
}

.hero-frame-video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Three clips shown side by side as the entry point, with the active
   one in the centre and spotlighted larger, plus prev/next arrows
   underneath to navigate manually — cycles automatically too. */
.hero-content {
  flex: none;
}

.hero-showcase {
  margin-top: 0;
  width: 100%;
  /* Grows to fill whatever vertical space is left under the headline
     — the video row inside sizes itself off this, not a guessed vh
     number, so it's always as large as the screen allows and never
     taller than what's left in the viewport. */
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
}

.hero-video-row {
  flex: 1 1 auto;
  min-height: 0;
  max-height: 720px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(18px, 2.6vw, 32px);
  width: 100%;
}

/* All three sit side by side, sized off the fixed 9:16 ratio only —
   matching the footage's native 720x1280 resolution exactly — so
   nothing is ever cropped or distorted by object-fit: cover, on
   either the focused clip or the two side ones. The side clips are
   only moderately smaller (via max-width + a light scale), not
   narrow slivers, so all three stay clearly visible at once. */
.hero-video-panel {
  position: relative;
  height: 100%;
  width: auto;
  max-width: clamp(140px, 20vw, 300px);
  aspect-ratio: 9 / 16;
  border-radius: 22px;
  overflow: hidden;
  background: #111214;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.35);
  opacity: 1;
  transform: scale(1);
  filter: brightness(1);
  order: 0;
  transition: opacity 0.5s var(--ease), transform 0.5s var(--ease),
    filter 0.5s var(--ease), box-shadow 0.5s var(--ease),
    max-width 0.5s var(--ease);
}

/* All three clips stay in full focus. The centre clip always stays in
   the centre — no reordering — and simply renders larger via a taller
   max-width ceiling; because the ratio is still locked at 9:16, more
   height is what actually grows, not width-for-width's-sake. */
.hero-video-panel.is-focused {
  max-width: clamp(210px, 28vw, 420px);
  box-shadow: 0 34px 90px rgba(0, 0, 0, 0.55);
  z-index: 2;
}

.hero-video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Prev/next arrow controls underneath — same translucent, blurred
   capsule style as the sound toggle elsewhere on the site. */
.hero-slideshow-nav {
  display: flex;
  gap: 16px;
}

.hero-nav-btn {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-white);
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.24);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  transition: background 0.3s var(--ease), border-color 0.3s var(--ease),
    transform 0.3s var(--ease);
}

.hero-nav-btn:hover {
  background: rgba(255, 255, 255, 0.18);
  border-color: rgba(255, 255, 255, 0.46);
  transform: translateY(-1px);
}

.hero-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  max-width: 600px;
}

.hero-label {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: rgba(255, 255, 255, 0.6);
}

.hero-tagline {
  font-size: clamp(34px, 5.2vw, 58px);
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -0.02em;
  max-width: 17ch;
}

.hero-subline {
  font-size: clamp(15px, 1.3vw, 17px);
  font-weight: 400;
  color: rgba(255, 255, 255, 0.6);
  max-width: 36ch;
}

/* Apple-style "pill" info bar: two lines of fine print plus a CTA
   button, all inside one rounded translucent capsule. */
.hero-pill {
  margin-top: 18px;
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 14px 22px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.hero-pill-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  text-align: left;
  font-size: 12.5px;
  line-height: 1.45;
  color: rgba(255, 255, 255, 0.78);
}

.hero-pill-text span:first-child {
  color: var(--color-white);
  font-weight: 500;
}

.hero-pill-btn {
  flex: none;
  padding: 11px 22px;
  border-radius: 999px;
  background: var(--color-gold);
  color: var(--color-black);
  font-size: 13.5px;
  font-weight: 600;
  letter-spacing: 0.01em;
  transition: background 0.3s var(--ease), transform 0.3s var(--ease);
}

.hero-pill-btn:hover {
  background: var(--color-gold-light);
  transform: translateY(-1px);
}

.hero-secondary-link {
  margin-top: 4px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13.5px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.7);
  border-bottom: 1px solid rgba(255, 255, 255, 0.25);
  padding-bottom: 2px;
  transition: color 0.25s var(--ease), border-color 0.25s var(--ease);
}

.hero-secondary-link:hover {
  color: var(--color-white);
  border-color: rgba(255, 255, 255, 0.7);
}

.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 15px 28px;
  border-radius: 999px;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.01em;
  transition: transform 0.35s var(--ease), background 0.3s var(--ease),
    box-shadow 0.35s var(--ease), color 0.3s var(--ease);
}

.btn-primary {
  background: var(--color-gold);
  color: var(--color-black);
  box-shadow: 0 8px 30px rgba(201, 162, 75, 0.28);
}

.btn-primary:hover {
  background: var(--color-gold-light);
  transform: translateY(-2px);
  box-shadow: 0 12px 36px rgba(201, 162, 75, 0.38);
}

.btn-ghost {
  color: var(--color-white);
  border: 1px solid rgba(255, 255, 255, 0.4);
  background: rgba(255, 255, 255, 0.04);
}

.btn-ghost:hover {
  border-color: rgba(255, 255, 255, 0.9);
  background: rgba(255, 255, 255, 0.1);
  transform: translateY(-2px);
}

.hero-scroll {
  position: absolute;
  right: clamp(20px, 5vw, 64px);
  bottom: 40px;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  color: rgba(255, 255, 255, 0.75);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.hero-scroll-line {
  width: 1px;
  height: 44px;
  background: linear-gradient(
    to bottom,
    rgba(255, 255, 255, 0.9),
    rgba(255, 255, 255, 0)
  );
  animation: scrollPulse 2.2s ease-in-out infinite;
}

@keyframes scrollPulse {
  0% {
    transform: scaleY(0.3);
    transform-origin: top;
    opacity: 0.4;
  }
  50% {
    transform: scaleY(1);
    transform-origin: top;
    opacity: 1;
  }
  100% {
    transform: scaleY(0.3);
    transform-origin: bottom;
    opacity: 0.4;
  }
}

/* ---------------- Section shell ---------------- */

section {
  position: relative;
}

.section-inner {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: clamp(72px, 11vh, 140px) clamp(20px, 5vw, 64px);
}

.section-head {
  max-width: 720px;
}

/* A lighter touch than the usual eyebrow + title + lede — just enough
   text so a section doesn't read as an empty gallery, without
   repeating what a headline above it already said. */
.section-head--compact {
  margin-top: 56px;
}

.section-head--compact .section-lede {
  margin-top: 12px;
}

.section-title {
  margin-top: 20px;
  font-size: clamp(30px, 4vw, 48px);
  font-weight: 600;
  letter-spacing: -0.015em;
  line-height: 1.12;
}

.section-lede {
  margin-top: 20px;
  font-size: clamp(15.5px, 1.4vw, 18px);
  line-height: 1.65;
  color: rgba(255, 255, 255, 0.66);
  max-width: 62ch;
}

/* Apple-style white chapter — a handful of sections flip all the way
   to white-on-black's opposite, so scrolling actually alternates
   between confident light and dark beats instead of staying dark
   throughout with only a colour accent changing. */
.section--light.intro,
.section--light.process,
.section--light.plans,
.section--light.custom-plan,
.section--light.feature-block,
.section--light {
  background: var(--color-white);
  color: var(--color-black);
}

.section--light .eyebrow {
  color: var(--color-gold);
}

.section--light .eyebrow::before {
  background: var(--color-gold);
}

.section--light .section-lede {
  color: var(--color-ink-muted);
}

.section--light .plan-grid-footnote {
  color: var(--color-ink-muted);
}

.section--light .process-track::before {
  background: repeating-linear-gradient(
    to right,
    rgba(10, 10, 10, 0.18) 0,
    rgba(10, 10, 10, 0.18) 6px,
    transparent 6px,
    transparent 14px
  );
}

.section--light .process-index {
  border: none;
}

.section--light .process-step p {
  color: var(--color-ink-muted);
}

/* ---------------- Intro / value prop ---------------- */

.intro {
  background: var(--color-black);
}

.intro-statement {
  max-width: 720px;
}

/* ---------------- Bespoke / feature mosaic ---------------- */

.bespoke {
  background: var(--color-black);
  color: var(--color-white);
}

.bespoke .eyebrow {
  color: var(--color-gold-light);
}

.bespoke .eyebrow::before {
  background: var(--color-gold-light);
}

.bespoke .section-title {
  color: var(--color-white);
}

.bespoke .section-lede {
  color: rgba(255, 255, 255, 0.66);
}

.bespoke-grid {
  margin-top: 48px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

/* Dark mosaic-style tiles, matching Apple's small feature cards —
   one consistent accent (gold) rather than a different colour each,
   so the section reads as a set rather than a scatter of hues. */
.bespoke-item {
  padding: 28px 24px;
  border-radius: 20px;
  background: rgba(201, 162, 75, 0.06);
  border: 1px solid rgba(201, 162, 75, 0.16);
  transition: background 0.3s var(--ease), border-color 0.3s var(--ease),
    transform 0.3s var(--ease);
}

.bespoke-item:hover {
  background: rgba(201, 162, 75, 0.1);
  border-color: rgba(201, 162, 75, 0.32);
  transform: translateY(-4px);
}

.bespoke-item-icon {
  width: 44px;
  height: 44px;
  border-radius: 13px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(201, 162, 75, 0.14);
  color: var(--color-gold-light);
}

/* Gold variant — identical to the default, kept for markup that still
   references it. */
.bespoke--gold .bespoke-item {
  background: rgba(201, 162, 75, 0.06);
  border-color: rgba(201, 162, 75, 0.18);
}

.bespoke--gold .bespoke-item:hover {
  background: rgba(201, 162, 75, 0.1);
  border-color: rgba(201, 162, 75, 0.34);
}

.bespoke--gold .bespoke-item-icon {
  background: rgba(201, 162, 75, 0.16);
  color: var(--color-gold-light);
}

.bespoke-item h4 {
  margin-top: 20px;
  font-size: 17.5px;
  font-weight: 600;
  letter-spacing: -0.005em;
}

.bespoke-item p {
  margin-top: 8px;
  font-size: 14.5px;
  line-height: 1.65;
  color: rgba(255, 255, 255, 0.62);
}

/* ---------------- Experiences / video reel ---------------- */

.experiences {
  background: var(--color-black);
  color: var(--color-white);
}

.experiences .eyebrow {
  color: var(--color-gold-light);
}

.experiences .eyebrow::before {
  background: var(--color-gold-light);
}

.experiences .section-lede {
  color: rgba(255, 255, 255, 0.62);
}

.experience-grid {
  margin-top: 56px;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(20px, 3vw, 32px);
  max-width: 620px;
  margin-left: auto;
  margin-right: auto;
}

/* Each card is capped well below the source clips' native 720px
   width, so every video is only ever downscaled — never stretched
   past its real resolution. */
.experience-card {
  position: relative;
  width: 100%;
  max-width: 380px;
  margin: 0 auto;
  aspect-ratio: 9 / 16;
  border-radius: 20px;
  overflow: hidden;
  background: #111214;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.45), 0 0 0 1px rgba(255, 255, 255, 0.06);
  transition: transform 0.4s var(--ease), box-shadow 0.4s var(--ease);
}

.experience-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 32px 70px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(201, 162, 75, 0.35);
}

.experience-video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  background: #111214;
}

.experience-scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top,
    rgba(0, 0, 0, 0.62) 0%,
    rgba(0, 0, 0, 0) 34%
  );
  pointer-events: none;
}

.experience-label {
  position: absolute;
  left: 18px;
  bottom: 16px;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--color-white);
}

/* ---------------- Process / how it works ---------------- */

.process {
  background: var(--color-black);
}

.process-track {
  margin-top: 64px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 28px;
  position: relative;
}

.process-track::before {
  content: "";
  position: absolute;
  top: 27px;
  left: 6%;
  right: 6%;
  height: 1px;
  background: repeating-linear-gradient(
    to right,
    rgba(255, 255, 255, 0.18) 0,
    rgba(255, 255, 255, 0.18) 6px,
    transparent 6px,
    transparent 14px
  );
}

.process-step {
  position: relative;
}

.process-index {
  position: relative;
  z-index: 1;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--color-black);
  border: 1.5px dashed rgba(201, 162, 75, 0.55);
  color: var(--color-gold-light);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 17px;
  font-weight: 600;
}

/* On a dark section the default black-on-black connector and circle
   fill both disappear. Rather than a thin connecting line, each item
   gets its own bordered card — matching the plan cards and custom
   itinerary card elsewhere on this page — with a dotted gold ring
   around the step number inside it. */
.process-track--dark {
  gap: clamp(20px, 3vw, 32px);
  row-gap: clamp(24px, 3.5vw, 40px);
}

.process-track--dark::before {
  display: none;
}

.process-track--dark .process-step {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 20px;
  padding: 28px 24px;
  box-shadow: 0 20px 50px rgba(10, 10, 10, 0.24);
  transition: transform 0.4s var(--ease), border-color 0.4s var(--ease);
}

.process-track--dark .process-step:hover {
  transform: translateY(-4px);
  border-color: rgba(201, 162, 75, 0.35);
}

.process-track--dark .process-index {
  background: var(--color-black);
  border: 1.5px dashed rgba(201, 162, 75, 0.55);
}

.process-track--dark .process-step h4 {
  color: var(--color-white);
}

.process-track--dark .process-step p {
  color: rgba(255, 255, 255, 0.66);
}

.process-step h4 {
  margin-top: 22px;
  font-size: 17.5px;
  font-weight: 600;
  letter-spacing: -0.005em;
}

.process-step p {
  margin-top: 10px;
  font-size: 14.5px;
  line-height: 1.65;
  color: rgba(255, 255, 255, 0.62);
}

/* ---------------- Explore / link out ---------------- */

.explore {
  background: var(--color-black);
}

.explore .eyebrow {
  color: var(--color-gold);
}

.explore .eyebrow::before {
  background: var(--color-gold);
}

.explore-grid {
  margin-top: 56px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}

/* Bold colour-field cards instead of photography — keeps this section
   distinct from the video reel just above it and adds real colour
   rather than relying on more black/cream/gold. */
.explore-card {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  aspect-ratio: 4 / 5;
  border-radius: 24px;
  overflow: hidden;
  padding: 32px;
  box-shadow: 0 20px 50px rgba(10, 10, 10, 0.16);
  transition: transform 0.4s var(--ease), box-shadow 0.4s var(--ease);
}

.explore-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 30px 70px rgba(10, 10, 10, 0.26);
}

.explore-card--gold {
  background: linear-gradient(155deg, #33240f 0%, #0a0a0a 100%);
}

.explore-card-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 30%;
  z-index: 0;
}

.explore-card-scrim {
  position: absolute;
  inset: 0;
  z-index: 0;
  background: linear-gradient(
    to top,
    rgba(10, 10, 10, 0.88) 0%,
    rgba(10, 10, 10, 0.28) 48%,
    rgba(10, 10, 10, 0.4) 100%
  );
}

.explore-card--dark {
  background: linear-gradient(155deg, #26221a 0%, #0a0a0a 100%);
}

.explore-card--dark .explore-card-bg {
  object-position: center 40%;
}

.explore-card-bg-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}

.explore-card-scrim--dark {
  background: linear-gradient(
    to top,
    rgba(10, 8, 4, 0.9) 0%,
    rgba(10, 8, 4, 0.3) 48%,
    rgba(10, 8, 4, 0.4) 100%
  );
}

.explore-card--dark .explore-card-icon {
  background: rgba(201, 162, 75, 0.18);
  color: var(--color-gold-light);
}

.explore-card--dark .explore-card-link {
  color: var(--color-gold-light);
}

.explore-card-icon {
  position: relative;
  z-index: 1;
  width: 56px;
  height: 56px;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.16);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-white);
}

.explore-card-content {
  position: relative;
  z-index: 1;
  margin-top: 20px;
  color: var(--color-white);
}

.explore-card-title {
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -0.01em;
}

.explore-card-content p {
  margin-top: 10px;
  font-size: 14.5px;
  line-height: 1.65;
  color: rgba(255, 255, 255, 0.82);
  max-width: 34ch;
}

.explore-card-link {
  margin-top: 20px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--color-white);
  letter-spacing: 0.01em;
}

.explore-card-link svg {
  transition: transform 0.3s var(--ease);
}

.explore-card:hover .explore-card-link svg {
  transform: translateX(4px);
}

/* ---------------- CTA band ---------------- */

.cta-band {
  background: var(--color-black);
  color: var(--color-white);
  position: relative;
  overflow: hidden;
}

.cta-band::before {
  content: "";
  position: absolute;
  inset: -40%;
  background: radial-gradient(
    circle at 30% 30%,
    rgba(201, 162, 75, 0.22),
    transparent 55%
  );
  pointer-events: none;
}

.cta-inner {
  position: relative;
  z-index: 1;
  max-width: var(--max-width);
  margin: 0 auto;
  padding: clamp(80px, 12vh, 140px) clamp(20px, 5vw, 64px);
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.cta-inner .eyebrow {
  color: var(--color-gold-light);
}

.cta-inner .eyebrow::before {
  background: var(--color-gold-light);
}

.cta-title {
  margin-top: 22px;
  font-size: clamp(30px, 4vw, 48px);
  font-weight: 600;
  letter-spacing: -0.015em;
  max-width: 18ch;
  line-height: 1.12;
}

.cta-lede {
  margin-top: 20px;
  font-size: clamp(15.5px, 1.4vw, 18px);
  line-height: 1.65;
  color: rgba(255, 255, 255, 0.66);
  max-width: 54ch;
}

.cta-actions {
  margin-top: 40px;
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
  justify-content: center;
}

/* ---------------- Footer ---------------- */

.footer {
  background: #0d0e10;
  color: rgba(255, 255, 255, 0.66);
}

.footer-inner {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 72px clamp(20px, 5vw, 64px) 36px;
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: 40px;
}

.footer-brand {
  font-size: 19px;
  font-weight: 600;
  color: var(--color-white);
}

.footer-brand span {
  color: var(--color-gold);
}

.footer-logo {
  height: 68px;
  width: auto;
  display: block;
}

.footer-tagline {
  margin-top: 16px;
  font-size: 14px;
  line-height: 1.65;
  max-width: 34ch;
  color: rgba(255, 255, 255, 0.5);
}

.footer-col h5 {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.4);
}

.footer-col ul {
  list-style: none;
  margin-top: 18px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.footer-col a {
  font-size: 14.5px;
  color: rgba(255, 255, 255, 0.7);
  transition: color 0.25s var(--ease);
}

.footer-col a:hover {
  color: var(--color-gold-light);
}

.footer-bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  padding: 24px clamp(20px, 5vw, 64px) 32px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  font-size: 12.5px;
  color: rgba(255, 255, 255, 0.4);
  max-width: var(--max-width);
  margin: 0 auto;
}

.footer-social {
  display: flex;
  align-items: center;
  gap: 12px;
}

.footer-social-link {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.16);
  color: rgba(255, 255, 255, 0.6);
  transition: color 0.25s var(--ease), border-color 0.25s var(--ease),
    transform 0.25s var(--ease);
}

.footer-social-link:hover {
  color: var(--color-gold-light);
  border-color: var(--color-gold-light);
  transform: translateY(-2px);
}

/* ---------------- Scroll reveal ---------------- */

.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.8s var(--ease), transform 0.8s var(--ease);
}

.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Continuously driven by scroll position in JS — fades in on entry
   and dissolves out again as it scrolls past the top of the screen. */
.fade-scroll {
  will-change: opacity, transform;
}

/* ---------------- Page hero (landscape video, full-bleed) ---------------- */

.page-hero {
  position: relative;
  height: 100svh;
  min-height: 560px;
  width: 100%;
  overflow: hidden;
  display: flex;
  align-items: flex-end;
  color: var(--color-white);
  background: #0a0a0a;
}

.page-hero-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  z-index: 0;
}

.page-hero-scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(
      to bottom,
      rgba(6, 8, 10, 0.5) 0%,
      rgba(6, 8, 10, 0.1) 32%,
      rgba(6, 8, 10, 0.3) 62%,
      rgba(6, 8, 10, 0.88) 100%
    ),
    linear-gradient(
      to right,
      rgba(6, 8, 10, 0.35) 0%,
      rgba(6, 8, 10, 0) 45%
    );
}

.page-hero-content {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 clamp(20px, 5vw, 64px) clamp(64px, 9vh, 110px);
}

.page-hero-eyebrow {
  color: var(--color-gold-light);
}

.page-hero-eyebrow::before {
  background: var(--color-gold-light);
}

.page-hero-title {
  margin-top: 22px;
  font-size: clamp(34px, 5.2vw, 58px);
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -0.02em;
  max-width: 16ch;
}

.page-hero-subtitle {
  margin-top: 20px;
  font-size: clamp(15.5px, 1.4vw, 18px);
  line-height: 1.65;
  color: rgba(255, 255, 255, 0.82);
  max-width: 50ch;
}

/* Mute/unmute control for the page-hero video. */
.sound-toggle {
  position: absolute;
  left: clamp(20px, 5vw, 64px);
  bottom: 40px;
  z-index: 2;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-white);
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.28);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  transition: background 0.3s var(--ease), border-color 0.3s var(--ease),
    transform 0.3s var(--ease);
}

.sound-toggle:hover {
  background: rgba(255, 255, 255, 0.18);
  border-color: rgba(255, 255, 255, 0.5);
  transform: translateY(-1px);
}

.sound-icon {
  display: none;
}

.sound-icon--muted {
  display: block;
}

.sound-toggle[aria-pressed="true"] .sound-icon--muted {
  display: none;
}

.sound-toggle[aria-pressed="true"] .sound-icon--unmuted {
  display: block;
}

/* ---------------- Plans hero (text-led, no video) ---------------- */

.plans-hero {
  position: relative;
  min-height: 62vh;
  width: 100%;
  overflow: hidden;
  display: flex;
  align-items: center;
  color: var(--color-white);
  background: linear-gradient(165deg, #0a0a0a 0%, #14161a 55%, #1d1912 100%);
  padding: calc(var(--nav-height) + 48px) clamp(20px, 5vw, 64px) 64px;
}

.plans-hero-glow {
  position: absolute;
  inset: -30%;
  z-index: 0;
  pointer-events: none;
  background: radial-gradient(
      circle at 82% 22%,
      rgba(201, 162, 75, 0.24),
      transparent 55%
    ),
    radial-gradient(circle at 6% 85%, rgba(28, 125, 120, 0.22), transparent 52%);
}

.plans-hero-inner {
  position: relative;
  z-index: 1;
  max-width: 720px;
  margin: 0 auto;
  text-align: center;
}

.plans-hero-title {
  margin-top: 22px;
  font-size: clamp(34px, 5.2vw, 58px);
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -0.02em;
}

.plans-hero-subtitle {
  margin-top: 22px;
  font-size: clamp(15.5px, 1.4vw, 18px);
  line-height: 1.65;
  color: rgba(255, 255, 255, 0.72);
  max-width: 56ch;
  margin-left: auto;
  margin-right: auto;
}

.plans-hero .eyebrow {
  justify-content: center;
}

/* ---------------- Plans grid ---------------- */

.plans {
  background: var(--color-black);
}

.plan-grid {
  margin-top: 48px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  align-items: stretch;
}

.plan-card {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 32px 28px;
  border-radius: 22px;
  background: var(--color-black);
  color: var(--color-white);
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 20px 50px rgba(10, 10, 10, 0.24);
  transition: transform 0.4s var(--ease), box-shadow 0.4s var(--ease),
    border-color 0.4s var(--ease);
}

.plan-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 30px 65px rgba(10, 10, 10, 0.32);
}


.plan-card-icon {
  width: 52px;
  height: 52px;
  border-radius: 15px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.1);
  color: var(--color-white);
}


.plan-card-pax {
  margin-top: 22px;
  display: block;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-gold-light);
}

.plan-card-title {
  margin-top: 8px;
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -0.01em;
}

.plan-card-vehicle {
  margin-top: 6px;
  font-size: 13.5px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.62);
}

.plan-card-desc {
  margin-top: 16px;
  font-size: 14.5px;
  line-height: 1.65;
  color: rgba(255, 255, 255, 0.68);
  flex: 1;
}

.plan-card-price {
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px solid rgba(255, 255, 255, 0.14);
  display: flex;
  align-items: baseline;
  gap: 8px;
}

.plan-card-price-label {
  font-size: 12.5px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.5);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.plan-card-price-value {
  font-size: 21px;
  font-weight: 700;
  letter-spacing: -0.01em;
}

.plan-card-price-value small {
  font-size: 13px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.55);
}

.plan-card-btn {
  margin-top: 22px;
  justify-content: center;
  width: 100%;
}

.plan-grid-footnote {
  margin-top: 28px;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.5);
  text-align: center;
}

/* ---------------- Custom itinerary ---------------- */

.custom-plan {
  background: var(--color-white);
}

.custom-plan-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
  width: 100%;
  max-width: 1100px;
  margin: 0 auto;
  padding: clamp(32px, 4vw, 56px);
  border-radius: 26px;
  background: linear-gradient(155deg, #1a1a1a 0%, #050505 100%);
  color: var(--color-white);
  border: 1px solid rgba(201, 162, 75, 0.28);
  box-shadow: 0 24px 60px rgba(10, 10, 10, 0.32);
}

.custom-plan-content {
  max-width: 560px;
}

.custom-plan-title {
  margin-top: 16px;
  font-size: clamp(24px, 3vw, 34px);
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.15;
}

.custom-plan-desc {
  margin-top: 16px;
  font-size: 14.5px;
  line-height: 1.65;
  color: rgba(255, 255, 255, 0.82);
}

.custom-plan-card .btn-primary {
  margin-top: 26px;
}

.custom-plan-price {
  flex: none;
  display: flex;
  flex-direction: column;
  gap: 8px;
  text-align: right;
}

.custom-plan-price .plan-card-price-label {
  color: rgba(255, 255, 255, 0.66);
}

.custom-plan-price-value {
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -0.01em;
}

/* ---------------- Sample itinerary accordion ---------------- */

.sample-itinerary {
  background: var(--color-black);
  color: var(--color-white);
}

.sample-itinerary .eyebrow {
  color: var(--color-gold-light);
}

.sample-itinerary .eyebrow::before {
  background: var(--color-gold-light);
}

.sample-itinerary .section-title {
  color: var(--color-white);
}

.sample-itinerary .section-lede {
  color: rgba(255, 255, 255, 0.64);
}

.itinerary-list {
  margin-top: 48px;
  display: flex;
  flex-direction: column;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
}

.itinerary-day {
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}

.itinerary-day-toggle {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 24px;
  padding: 22px 4px;
  text-align: left;
  color: var(--color-white);
}

.itinerary-day-index {
  flex: none;
  width: 80px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-gold-light);
}

.itinerary-day-title {
  flex: 1;
  font-size: clamp(16px, 1.6vw, 19px);
  font-weight: 500;
  letter-spacing: -0.005em;
}

.itinerary-day-chevron {
  flex: none;
  transition: transform 0.35s var(--ease);
  color: rgba(255, 255, 255, 0.5);
}

.itinerary-day-toggle[aria-expanded="true"] .itinerary-day-chevron {
  transform: rotate(180deg);
  color: var(--color-gold-light);
}

.itinerary-day-body {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.45s var(--ease);
}

.itinerary-day-toggle[aria-expanded="true"] + .itinerary-day-body {
  grid-template-rows: 1fr;
}

.itinerary-day-body-inner {
  overflow: hidden;
}

.itinerary-day-body-inner p {
  padding: 0 4px 26px 104px;
  font-size: 14.5px;
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.7);
  max-width: 68ch;
}

/* ---------------- Contact page ---------------- */

.contact {
  background: var(--color-white);
  color: var(--color-black);
}

.contact-grid {
  margin-top: 8px;
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: clamp(32px, 5vw, 64px);
  align-items: start;
}

.contact-info {
  position: sticky;
  top: calc(var(--nav-height) + 24px);
}

.contact-email {
  margin-top: 18px;
  display: block;
  font-size: clamp(22px, 2.6vw, 30px);
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--color-black);
  border-bottom: 2px solid var(--color-gold);
  padding-bottom: 4px;
  width: fit-content;
  transition: color 0.25s var(--ease), border-color 0.25s var(--ease);
}

.contact-email:hover {
  color: var(--color-gold);
  border-color: var(--color-gold);
}

.contact-info-desc {
  margin-top: 18px;
  font-size: 14.5px;
  line-height: 1.65;
  color: var(--color-ink-muted);
  max-width: 42ch;
}

.contact-info-block {
  margin-top: 32px;
  padding-top: 24px;
  border-top: 1px solid rgba(10, 10, 10, 0.1);
}

.contact-info-block h4 {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-ink-muted);
}

.contact-info-block p {
  margin-top: 10px;
  font-size: 14.5px;
  line-height: 1.65;
  color: var(--color-ink-muted);
  max-width: 40ch;
}

.contact-info-list {
  margin-top: 12px;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.contact-info-list li {
  font-size: 14.5px;
  color: var(--color-ink-muted);
  padding-left: 18px;
  position: relative;
}

.contact-info-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 8px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--color-gold);
}

/* ---------------- Contact form ---------------- */

.contact-form {
  padding: clamp(32px, 4vw, 48px);
  border-radius: 24px;
  background: var(--color-cream);
  border: 1px solid rgba(10, 10, 10, 0.08);
  box-shadow: 0 24px 60px rgba(10, 10, 10, 0.1);
}

.contact-form-title {
  margin-top: 10px;
  font-size: clamp(24px, 2.8vw, 32px);
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--color-black);
}

.form-row {
  margin-top: 24px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}

.contact-form > .form-field {
  margin-top: 24px;
}

.form-label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: var(--color-ink-muted);
  margin-bottom: 8px;
}

.form-input {
  width: 100%;
  padding: 13px 16px;
  border-radius: 12px;
  border: 1px solid rgba(10, 10, 10, 0.16);
  background: var(--color-white);
  font-family: inherit;
  font-size: 14.5px;
  color: var(--color-black);
  transition: border-color 0.25s var(--ease), background 0.25s var(--ease);
}

.form-input:focus {
  outline: none;
  border-color: var(--color-gold);
  background: var(--color-white);
}

.form-textarea {
  resize: vertical;
  min-height: 140px;
  line-height: 1.6;
}

.form-submit {
  margin-top: 28px;
  width: 100%;
  justify-content: center;
}

.form-note {
  margin-top: 14px;
  font-size: 12.5px;
  line-height: 1.6;
  color: var(--color-ink-muted);
  text-align: center;
}

/* Honeypot field for Web3Forms spam protection — kept in the DOM and
   in the tab order's blind spot, but invisible to real visitors. */
.form-honeypot {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
}

.form-status {
  margin-top: 16px;
  font-size: 13.5px;
  line-height: 1.6;
  text-align: center;
  color: var(--color-gold);
  display: none;
}

.form-status.is-visible {
  display: block;
}

.form-status.is-error {
  color: #b3453f;
}

/* ---------------- Feature blocks (mosaic sections) ---------------- */

.feature-block {
  background: var(--color-black);
}

.feature-block--dark {
  background: var(--color-black);
  color: var(--color-white);
}

.feature-block--dark .section-title {
  color: var(--color-white);
}

.feature-block--dark .section-lede {
  color: rgba(255, 255, 255, 0.66);
}

.feature-block--dark .eyebrow {
  color: var(--color-gold-light);
}

.feature-block--dark .eyebrow::before {
  background: var(--color-gold-light);
}

.feature-block--tight .section-inner {
  padding-top: 0;
}

/* Two images side by side, each captioned — used for cultural and
   food pairings. */
.media-duo {
  margin-top: 48px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}

.media-duo-item {
  position: relative;
  margin: 0;
  border-radius: 20px;
  overflow: hidden;
  aspect-ratio: 4 / 3;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.18);
}

.media-duo-item--large {
  aspect-ratio: 16 / 10;
}

.media-duo-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.6s var(--ease);
}

/* Culture section: both photos are portrait shots with slightly different
   native ratios (0.75 and 0.8) — use a shared portrait box with
   object-fit: contain so neither image is ever cropped, and both tiles
   read as exactly the same size. */
.media-duo--culture .media-duo-item {
  aspect-ratio: 3 / 4;
  background: #111214;
}

.media-duo--culture .media-duo-item img {
  object-fit: contain;
}

/* Auto-cycling crossfade — used where a tile has more than one photo
   worth showing (e.g. two angles of the same landmark). */
.media-duo-item.slideshow .slideshow-slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  z-index: 0;
  transition: opacity 1.4s var(--ease), transform 0.6s var(--ease);
}

.media-duo-item.slideshow .slideshow-slide.is-active {
  opacity: 1;
  z-index: 1;
}

.media-duo-item figcaption {
  position: absolute;
  left: 18px;
  bottom: 14px;
  z-index: 1;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--color-white);
}

.media-duo-item::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top,
    rgba(0, 0, 0, 0.55) 0%,
    rgba(0, 0, 0, 0) 32%
  );
  pointer-events: none;
}

/* Three-tile mosaic — a wide image, a framed portrait video (shown at
   its own resolution, never stretched), and a smaller image. Every
   tile gets an explicit aspect-ratio (not left to the grid to guess),
   so the row lines up neatly instead of each tile taking on its
   photo's own natural height. */
.feature-trio {
  margin-top: 48px;
  display: grid;
  grid-template-columns: 1.3fr 0.8fr 1fr;
  gap: 24px;
  align-items: stretch;
}

.trio-item--tall {
  aspect-ratio: 16 / 10;
}

.trio-frame,
.trio-item:not(.trio-item--tall) {
  aspect-ratio: 4 / 5;
}

.trio-item {
  position: relative;
  margin: 0;
  border-radius: 20px;
  overflow: hidden;
  background: #111214;
  box-shadow: 0 24px 60px rgba(10, 10, 10, 0.14);
}

.trio-item img {
  width: 100%;
  height: 100%;
  /* contain, not cover — the whole photo stays visible inside its
     frame rather than being cropped to fill a mismatched box. */
  object-fit: contain;
  display: block;
  transition: transform 0.6s var(--ease);
}

.trio-item figcaption {
  position: absolute;
  left: 16px;
  bottom: 14px;
  z-index: 1;
  font-size: 12.5px;
  font-weight: 500;
  color: var(--color-white);
}

.trio-item::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top,
    rgba(0, 0, 0, 0.55) 0%,
    rgba(0, 0, 0, 0) 34%
  );
  pointer-events: none;
}

.trio-frame {
  position: relative;
  border-radius: 20px;
  overflow: hidden;
  background: #111214;
  box-shadow: 0 24px 60px rgba(10, 10, 10, 0.2);
}

.trio-frame-video {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

/* Wildlife trio — sized off each asset's real aspect ratio (the
   leopard photo, the portrait clip, the elephants photo) so every
   tile fills its frame exactly with no crop and no letterboxing.
   Laid out with generous space and a gentle stagger between tiles
   (rather than a tight, forced-equal-height row), so the three read
   as a loose, curated arrangement instead of a packed strip. */
.feature-trio--wildlife {
  grid-template-columns: 1.4fr 0.7fr 1fr;
  gap: clamp(28px, 4vw, 56px);
  align-items: start;
}

.feature-trio--wildlife .trio-item--tall {
  aspect-ratio: 3 / 2;
  border-radius: 28px;
}

.feature-trio--wildlife .trio-frame {
  aspect-ratio: 9 / 16;
  border-radius: 28px;
  margin-top: clamp(24px, 6vw, 64px);
}

.feature-trio--wildlife .trio-item:not(.trio-item--tall) {
  aspect-ratio: 3 / 4;
  border-radius: 28px;
  margin-top: clamp(12px, 3vw, 28px);
}

.feature-trio--wildlife .trio-item,
.feature-trio--wildlife .trio-frame {
  box-shadow: 0 30px 70px rgba(10, 10, 10, 0.18);
}

.trio-frame-caption {
  position: absolute;
  left: 16px;
  bottom: 14px;
  z-index: 1;
  font-size: 12.5px;
  font-weight: 500;
  color: var(--color-white);
}

.trio-frame::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top,
    rgba(0, 0, 0, 0.55) 0%,
    rgba(0, 0, 0, 0) 34%
  );
  pointer-events: none;
}

/* Two-item variant of the trio grid — a landscape image beside a
   framed portrait video, used where there's no third asset to fill
   a three-tile mosaic. */
.media-frame-duo {
  grid-template-columns: 1.3fr 0.9fr;
}

/* Single large image, centred — used for a standalone feature like
   accommodation. Sized off the photo's own aspect ratio (portrait,
   3:4) rather than a fixed landscape box, so the entire frame stays
   visible instead of being cropped to fit a mismatched shape. */
.media-solo {
  margin-top: 48px;
  display: flex;
  justify-content: center;
}

.media-solo-item {
  position: relative;
  margin: 0;
  width: min(520px, 100%);
  border-radius: 20px;
  overflow: hidden;
  aspect-ratio: 3 / 4;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.18);
}

.media-solo-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.6s var(--ease);
}

/* Single centred portrait video — used where a section has just one
   clip rather than a mosaic of tiles. */
.video-solo {
  margin-top: 48px;
  display: flex;
  justify-content: center;
}

.video-solo-frame {
  position: relative;
  width: min(380px, 70vw);
  aspect-ratio: 9 / 16;
  border-radius: 24px;
  overflow: hidden;
  background: #111214;
  box-shadow: 0 30px 70px rgba(10, 10, 10, 0.22);
}

.video-solo-frame video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Two portrait clips side by side — same 9:16 source ratio as the box,
   so object-fit: cover never has to crop either one. */
.video-duo {
  margin-top: 48px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  max-width: 760px;
  margin-left: auto;
  margin-right: auto;
}

.video-duo-item {
  position: relative;
  border-radius: 24px;
  overflow: hidden;
  aspect-ratio: 9 / 16;
  background: #111214;
  box-shadow: 0 30px 70px rgba(10, 10, 10, 0.22);
}

.video-duo-item video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

@media (max-width: 640px) {
  .video-duo {
    grid-template-columns: 1fr;
    max-width: 380px;
  }
}

/* Full-width landscape clip — used to lead off a section before a
   duo of portrait clips underneath, so several videos can share one
   section without stretching the page out. */
.video-wide {
  margin-top: 48px;
  position: relative;
  border-radius: 24px;
  overflow: hidden;
  aspect-ratio: 16 / 9;
  background: #111214;
  box-shadow: 0 30px 70px rgba(10, 10, 10, 0.22);
}

.video-wide video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.video-wide + .video-duo {
  margin-top: 24px;
}

/* ---------------- Discover slideshow ---------------- */
/* One section holds several slides (text + one or two videos each);
   only one is shown at a time, cutting down on full-page scroll
   sections while still surfacing every clip. */

.discover-slideshow {
  position: relative;
  display: grid;
}

/* All slides share the same grid cell, so the container's height is
   always the tallest slide and the outgoing/incoming slides can
   cross-fade smoothly instead of popping via display: none. */
.discover-slide {
  grid-area: 1 / 1;
  opacity: 0;
  transform: translateY(14px);
  pointer-events: none;
  visibility: hidden;
  transition: opacity 0.7s var(--ease), transform 0.7s var(--ease),
    visibility 0s linear 0.7s;
}

.discover-slide.is-active {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
  visibility: visible;
  transition: opacity 0.7s var(--ease), transform 0.7s var(--ease),
    visibility 0s linear 0s;
}

.discover-slide .section-head--compact {
  margin-top: 0;
}

.discover-slideshow-nav {
  margin-top: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 24px;
}

.discover-dots {
  display: flex;
  align-items: center;
  gap: 10px;
}

.discover-dot {
  width: 8px;
  height: 8px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.28);
  cursor: pointer;
  transition: background 0.3s var(--ease), transform 0.3s var(--ease);
}

.discover-dot:hover {
  background: rgba(255, 255, 255, 0.5);
}

.discover-dot.is-active {
  background: var(--color-gold);
  transform: scale(1.3);
}

/* Editorial split: a boxed portrait video paired with a short headline,
   side by side rather than a full-bleed stretched banner — used for
   single-clip moments that don't need a whole mosaic. */
.split-feature {
  display: grid;
  grid-template-columns: minmax(260px, 380px) 1fr;
  align-items: center;
  gap: clamp(32px, 6vw, 80px);
}

.split-feature-media {
  position: relative;
  width: 100%;
  aspect-ratio: 9 / 16;
  border-radius: 24px;
  overflow: hidden;
  background: #111214;
  box-shadow: 0 30px 70px rgba(10, 10, 10, 0.22);
}

.split-feature-media video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.split-feature-text .eyebrow {
  display: block;
}

.split-feature-text .section-title {
  margin-top: 16px;
  max-width: 14ch;
}

.split-feature--reverse {
  grid-template-columns: 1fr minmax(260px, 380px);
}

.split-feature--reverse .split-feature-media {
  order: 2;
}

.split-feature--reverse .split-feature-text {
  order: 1;
}

@media (max-width: 720px) {
  .split-feature,
  .split-feature--reverse {
    grid-template-columns: 1fr;
    justify-items: center;
    text-align: center;
  }

  .split-feature-media {
    width: min(320px, 70vw);
    order: 1;
  }

  .split-feature-text {
    order: 2;
  }

  .split-feature-text .section-title {
    max-width: none;
  }
}

/* ---------------- Cinematic video break ---------------- */

.cinematic {
  position: relative;
  height: 72vh;
  min-height: 440px;
  max-height: 680px;
  overflow: hidden;
  display: flex;
  align-items: center;
  color: var(--color-white);
  background: #0a0a0a;
}

.cinematic-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.cinematic-scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top,
    rgba(6, 8, 10, 0.75) 0%,
    rgba(6, 8, 10, 0.2) 45%,
    rgba(6, 8, 10, 0.55) 100%
  );
}

.cinematic-content {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 clamp(20px, 5vw, 64px);
}

.cinematic-title {
  margin-top: 18px;
  font-size: clamp(26px, 3.6vw, 42px);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.01em;
  max-width: 20ch;
}

/* ---------------- Teaser banner ---------------- */

.teaser {
  background: var(--color-black);
}

/* Full photo shown at its own aspect ratio — object-fit: contain, not
   a cropped background-image, so nothing outside the frame is lost. */
.teaser-banner {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 24px;
  overflow: hidden;
  aspect-ratio: 3 / 4;
  background: #111214;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.4);
  transition: transform 0.4s var(--ease);
}

.teaser-banner img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

.teaser-scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top,
    rgba(6, 8, 10, 0.45) 0%,
    rgba(6, 8, 10, 0.05) 40%,
    rgba(6, 8, 10, 0.15) 100%
  );
}

.teaser-content {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1;
  padding: clamp(28px, 4vw, 48px);
  color: var(--color-white);
}

.teaser-title {
  margin-top: 14px;
  font-size: clamp(22px, 3vw, 32px);
  font-weight: 600;
  letter-spacing: -0.01em;
  max-width: 22ch;
}

.teaser-content p {
  margin-top: 12px;
  font-size: 14.5px;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.78);
  max-width: 44ch;
}

.teaser-link {
  margin-top: 20px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--color-gold-light);
  letter-spacing: 0.01em;
}

.teaser-link svg {
  transition: transform 0.3s var(--ease);
}

.teaser-banner:hover .teaser-link svg {
  transform: translateX(4px);
}

/* Two side-by-side banner tiles instead of one full-width strip. */
.teaser-duo {
  margin-top: 48px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}

/* ---------------- Responsive ---------------- */

@media (max-width: 980px) {
  .experience-grid {
    max-width: 420px;
  }

  .hero-scroll {
    display: none;
  }

  .hero-video-panel {
    max-width: clamp(100px, 25vw, 200px);
  }

  .hero-video-panel.is-focused {
    max-width: clamp(140px, 34vw, 270px);
  }

  .bespoke-grid {
    grid-template-columns: 1fr;
  }

  .explore-grid {
    grid-template-columns: 1fr;
  }

  .explore-card {
    aspect-ratio: 16 / 11;
  }

  .process-track {
    grid-template-columns: 1fr 1fr;
    row-gap: 40px;
  }

  .process-track::before {
    display: none;
  }

  .footer-inner {
    grid-template-columns: 1fr 1fr;
  }

  .media-duo {
    grid-template-columns: 1fr;
  }

  .feature-trio {
    grid-template-columns: 1fr 1fr;
  }

  .trio-item--tall {
    grid-column: 1 / -1;
    aspect-ratio: 16 / 10;
  }

  .trio-frame,
  .trio-item:not(.trio-item--tall) {
    aspect-ratio: 4 / 5;
  }

  .feature-trio--wildlife {
    gap: 28px;
  }

  .feature-trio--wildlife .trio-item--tall {
    aspect-ratio: 3 / 2;
    margin-top: 0;
  }

  .feature-trio--wildlife .trio-frame {
    aspect-ratio: 9 / 16;
    margin-top: 0;
  }

  .feature-trio--wildlife .trio-item:not(.trio-item--tall) {
    aspect-ratio: 3 / 4;
    margin-top: 0;
  }

  .media-frame-duo {
    grid-template-columns: 1fr 1fr;
  }

  .teaser-duo {
    grid-template-columns: 1fr;
  }

  .plan-grid {
    grid-template-columns: 1fr;
    max-width: 440px;
    margin-left: auto;
    margin-right: auto;
  }

  .custom-plan-card {
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
  }

  .custom-plan-price {
    text-align: left;
  }

  .itinerary-day-body-inner p {
    padding-left: 4px;
  }

  .contact-grid {
    grid-template-columns: 1fr;
  }

  .contact-info {
    position: static;
  }
}

@media (max-width: 720px) {
  .experience-grid {
    grid-template-columns: 1fr;
    max-width: 300px;
  }

  .feature-trio {
    grid-template-columns: 1fr;
  }

  .trio-item--tall,
  .trio-frame,
  .trio-item {
    aspect-ratio: 4 / 3;
  }

  .feature-trio--wildlife {
    gap: 24px;
  }

  .feature-trio--wildlife .trio-item--tall {
    aspect-ratio: 3 / 2;
    margin-top: 0;
  }

  .feature-trio--wildlife .trio-frame {
    aspect-ratio: 9 / 16;
    margin-top: 0;
  }

  .feature-trio--wildlife .trio-item:not(.trio-item--tall) {
    aspect-ratio: 3 / 4;
    margin-top: 0;
  }

  .cinematic {
    height: 60vh;
    min-height: 380px;
  }

  .itinerary-day-toggle {
    gap: 14px;
  }

  .itinerary-day-index {
    width: 56px;
    font-size: 11.5px;
  }

  .hero-pill {
    flex-direction: column;
    align-items: stretch;
    padding: 16px;
    gap: 14px;
    border-radius: 22px;
  }

  .hero-pill-text {
    text-align: center;
  }

  .hero-pill-btn {
    text-align: center;
  }

  .form-row {
    grid-template-columns: 1fr;
  }

  .nav-links {
    display: none;
  }

  .nav-toggle {
    display: flex;
  }

  .nav.is-menu-open {
    background: rgba(10, 10, 10, 0.96);
    backdrop-filter: blur(20px);
  }

  .nav.is-menu-open .nav-links {
    display: flex;
    position: fixed;
    inset: 0;
    top: var(--nav-height);
    height: calc(100svh - var(--nav-height));
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 32px;
    background: rgba(10, 10, 10, 0.98);
  }

  .nav.is-menu-open .nav-links a {
    font-size: 22px;
  }

  .process-track {
    grid-template-columns: 1fr;
  }

  .footer-inner {
    grid-template-columns: 1fr;
    gap: 32px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero-scroll-line {
    animation: none;
  }

  .reveal,
  .fade-scroll {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .hero-video-panel,
  .hero-video-panel.is-focused {
    transition: none;
  }
}

/* ============ PRIVACY POLICY MODAL ============ */
.privacy-modal {
  position: fixed;
  inset: 0;
  z-index: 999;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 24px;
}

.privacy-modal.is-open {
  display: flex;
}

.privacy-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(10, 10, 10, 0.72);
  backdrop-filter: blur(4px);
}

.privacy-modal-dialog {
  position: relative;
  width: 100%;
  max-width: 640px;
  max-height: 85vh;
  background: var(--color-white);
  color: var(--color-black);
  border-radius: 20px;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.45);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.privacy-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 22px 26px;
  border-bottom: 1px solid rgba(10, 10, 10, 0.1);
  flex-shrink: 0;
}

.privacy-modal-header h3 {
  font-size: 19px;
  font-weight: 600;
  color: var(--color-black);
  margin: 0;
}

.privacy-modal-close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: none;
  background: rgba(10, 10, 10, 0.06);
  color: var(--color-black);
  cursor: pointer;
  transition: background 0.2s var(--ease);
  flex-shrink: 0;
}

.privacy-modal-close:hover {
  background: rgba(10, 10, 10, 0.12);
}

.privacy-modal-body {
  padding: 22px 26px;
  overflow-y: auto;
  font-size: 14.5px;
  line-height: 1.7;
  color: rgba(10, 10, 10, 0.78);
}

.privacy-modal-body h4 {
  font-size: 15.5px;
  font-weight: 600;
  color: var(--color-black);
  margin: 22px 0 8px;
  padding-bottom: 6px;
  border-bottom: 1px solid rgba(201, 162, 75, 0.35);
}

.privacy-modal-body h4:first-of-type {
  margin-top: 4px;
}

.privacy-modal-body p {
  margin: 0 0 12px;
}

.privacy-modal-body ul {
  margin: 0 0 12px;
  padding-left: 20px;
}

.privacy-modal-body li {
  margin-bottom: 6px;
}

.privacy-modal-effective {
  font-style: italic;
  color: var(--color-ink-muted);
  font-size: 13px;
  margin-bottom: 14px !important;
}

.privacy-modal-note {
  font-style: italic;
  font-size: 12.5px;
  color: var(--color-ink-muted);
  margin-top: 18px !important;
}

.privacy-modal-footer {
  padding: 18px 26px;
  border-top: 1px solid rgba(10, 10, 10, 0.1);
  flex-shrink: 0;
}

.privacy-modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
}

.privacy-modal-actions--view {
  display: none;
}

.privacy-modal.is-view-mode .privacy-modal-actions--agree {
  display: none;
}

.privacy-modal.is-view-mode .privacy-modal-actions--view {
  display: flex;
}

/* Terms trigger row inside the inquiry form */
.form-terms {
  margin: 4px 0 8px;
}

.terms-trigger {
  display: flex;
  align-items: center;
  gap: 10px;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  text-align: left;
  color: var(--color-black);
}

.terms-trigger-box {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  border-radius: 4px;
  border: 1.5px solid rgba(10, 10, 10, 0.35);
  position: relative;
  transition: border-color 0.2s var(--ease), background 0.2s var(--ease);
}

.terms-trigger.is-agreed .terms-trigger-box {
  background: var(--color-gold);
  border-color: var(--color-gold);
}

.terms-trigger.is-agreed .terms-trigger-box::after {
  content: "";
  position: absolute;
  left: 5px;
  top: 1px;
  width: 5px;
  height: 9px;
  border: solid var(--color-white);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

.terms-trigger-text {
  font-size: 13.5px;
  color: rgba(10, 10, 10, 0.75);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.terms-trigger.is-agreed .terms-trigger-text {
  color: var(--color-black);
  text-decoration: none;
}

.form-terms-error {
  display: none;
  margin-top: 8px;
  font-size: 12.5px;
  color: #b3453f;
}

.form-terms-error.is-visible {
  display: block;
}

/* Privacy Policy link in the footer */
.footer-privacy-link {
  background: none;
  border: none;
  padding: 0;
  color: rgba(255, 255, 255, 0.6);
  font-size: inherit;
  font-family: inherit;
  cursor: pointer;
  transition: color 0.25s var(--ease);
}

.footer-privacy-link:hover {
  color: var(--color-gold-light);
}

@media (max-width: 640px) {
  .privacy-modal-dialog {
    max-height: 90vh;
  }

  .privacy-modal-header,
  .privacy-modal-body,
  .privacy-modal-footer {
    padding-left: 18px;
    padding-right: 18px;
  }
}

/* ============ INQUIRY CONFIRMATION SCREEN ============ */
.inquiry-confirmation[hidden] {
  display: none !important;
}

.inquiry-confirmation {
  background: var(--color-cream);
  border-radius: 22px;
  padding: clamp(28px, 3.5vw, 44px);
}

.inquiry-confirmation-ref {
  margin: 6px 0 20px;
  font-size: 14.5px;
  color: rgba(10, 10, 10, 0.7);
}

.inquiry-confirmation-ref strong {
  color: var(--color-black);
  letter-spacing: 0.02em;
  background: rgba(201, 162, 75, 0.16);
  padding: 3px 10px;
  border-radius: 6px;
}

.inquiry-confirmation-summary {
  margin: 0 0 22px;
  display: grid;
  gap: 14px;
}

.inquiry-confirmation-summary dt {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: rgba(10, 10, 10, 0.5);
  margin-bottom: 4px;
}

.inquiry-confirmation-summary dd {
  margin: 0;
  font-size: 15px;
  line-height: 1.6;
  color: var(--color-black);
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(10, 10, 10, 0.08);
  white-space: pre-wrap;
}

.inquiry-confirmation-summary dd:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

/* Buttons inside the confirmation panel sit on a light card, so the
   ghost button needs dark-on-light styling instead of its default
   white-on-dark treatment. */
.inquiry-confirmation .btn-ghost {
  color: var(--color-black);
  border: 1px solid rgba(10, 10, 10, 0.28);
  background: rgba(10, 10, 10, 0.03);
}

.inquiry-confirmation .btn-ghost:hover {
  border-color: rgba(10, 10, 10, 0.6);
  background: rgba(10, 10, 10, 0.08);
}

/* Inline field-level validation error (email format check) */
.form-field-error {
  display: none;
  margin-top: 6px;
  font-size: 12.5px;
  color: #b3453f;
}

.form-field-error.is-visible {
  display: block;
}

.form-input.is-invalid {
  border-color: #b3453f;
}

/* The custom itinerary footnote sits on a white section background, not
   the default dark one .plan-grid-footnote is styled for. */
.custom-plan .plan-grid-footnote {
  color: var(--color-ink-muted);
  margin-top: 24px;
}

.footer-legal-links {
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
}

/* Quiet, non-mandatory note in the inquiry form pointing to the Booking
   Cancellation Policy. Purely informational, doesn't gate submission. */
.form-cancellation-note {
  margin-top: 10px;
  font-size: 12.5px;
  line-height: 1.6;
  color: rgba(10, 10, 10, 0.55);
}

.inline-policy-link {
  background: none;
  border: none;
  padding: 0;
  font: inherit;
  color: rgba(10, 10, 10, 0.75);
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
}

.inline-policy-link:hover {
  color: var(--color-black);
}