/* ============================================================
   POMPLA — site stylesheet
   One dark visual world: golden-hour high-altitude dusk.
   Edit colours in :root only; everything else reads from tokens.
   ============================================================ */

:root {
  /* Brand — locked */
  --coral:        #FF6B35;
  --coral-deep:   #E55A24;
  --coral-dim:    #C4491C;
  --blue:         #004E89;
  --cream:        #F2CC8F;
  --sage:         #8FBC8F;

  /* Warm-biased neutrals */
  --ink:          #140D0A;
  --ink-soft:     #1E1512;
  --paper:        #FBF6F1;
  --paper-dim:    rgba(251, 246, 241, 0.68);
  --paper-faint:  rgba(251, 246, 241, 0.40);
  --hairline:     rgba(251, 246, 241, 0.14);
  --hairline-lit: rgba(251, 246, 241, 0.30);
  --glass:        rgba(20, 13, 10, 0.44);

  /* Typefaces. Swap --font-hero and --font-display to put Golos back. */
  --font-hero:    "Archivo", "Golos Text", system-ui, sans-serif;
  --font-display: "Golos Text", system-ui, sans-serif;
  --font-body:    "Instrument Sans", system-ui, -apple-system, "Segoe UI", sans-serif;

  --step-0: 1rem;
  --step-1: 1.125rem;
  --step-2: 1.5rem;
  --step-3: clamp(1.75rem, 1.2rem + 2vw, 2.5rem);
  --step-4: clamp(2.25rem, 1.4rem + 3.4vw, 3.5rem);
  --hero:   clamp(3.2rem, 1.2rem + 9.2vw, 9.5rem);

  --rail:   clamp(1.25rem, 4vw, 4.5rem);
  --shadow: 0 24px 60px -20px rgba(10, 6, 4, 0.75);
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
section[id], header[id] { scroll-margin-top: 128px; }

body {
  margin: 0;
  background: var(--ink);
  color: var(--paper);
  font-family: var(--font-body);
  font-size: var(--step-0);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

h1, h2, h3 { font-family: var(--font-display); text-wrap: balance; margin: 0; }

a { color: inherit; }

.eyebrow {
  font-size: 0.75rem; font-weight: 600; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--paper-faint);
}

.wrap { width: min(1120px, 100%); margin: 0 auto; }

a:focus-visible, button:focus-visible, select:focus-visible, input:focus-visible {
  outline: 2px solid var(--coral); outline-offset: 3px; border-radius: 4px;
}
@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition-duration: 1ms !important; }
}

/* ============================ SCENE ============================ */

.scene { position: fixed; inset: 0; z-index: 0; overflow: hidden;
  background:
    radial-gradient(120% 78% at 50% 92%, rgba(255,107,53,0.55) 0%, rgba(255,107,53,0) 62%),
    linear-gradient(178deg, #0B1A2B 0%, #16304A 20%, #3E4A5C 38%, #8A5C46 56%,
                    #C87A44 70%, #E89A52 80%, #F2CC8F 92%, #E8A86A 100%);
}
/* The hero photograph. Swap the file here to change it site-wide. */
.scene-photo {
  position: absolute; inset: 0;
  background-image: url("../img/hero-valley.jpg");
  background-size: cover;
  background-position: center 45%;
}
@media (max-width: 900px) {
  .scene-photo { background-image: url("../img/hero-valley-mobile.jpg"); }
}
.scene-art { position: absolute; inset: 0; width: 100%; height: 100%; }

.scrim { position: absolute; inset: 0; pointer-events: none; }
.scrim-top  { background: linear-gradient(180deg, rgba(8,14,24,0.68) 0%, rgba(8,14,24,0.22) 20%, rgba(8,14,24,0) 40%); }
.scrim-core { background: radial-gradient(76% 54% at 50% 44%, rgba(8,6,4,0.48) 0%, rgba(8,6,4,0.22) 52%, rgba(8,6,4,0) 76%); }
/* Heavier than it looks it needs to be: the braided riverbed under the search
   bar is the brightest part of the frame. */
.scrim-base { background: linear-gradient(0deg, rgba(20,13,10,0.92) 0%, rgba(20,13,10,0.62) 12%, rgba(20,13,10,0.26) 28%, rgba(20,13,10,0) 46%); }
.grain { position: absolute; inset: 0; opacity: 0.09; mix-blend-mode: overlay; pointer-events: none; }

.page { position: relative; z-index: 1; }

/* ============================ NAV ============================ */

nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 40;
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 1.05rem var(--rail);
  background: linear-gradient(180deg, rgba(11,16,26,0.62) 0%, rgba(11,16,26,0) 100%);
  backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px);
  border-bottom: 1px solid transparent;
  transition: background 220ms ease-out;
}
body.docked nav, body.solid-nav nav {
  background: rgba(20, 13, 10, 0.88);
  backdrop-filter: blur(20px) saturate(1.2); -webkit-backdrop-filter: blur(20px) saturate(1.2);
}
.wordmark { display: inline-flex; align-items: center; text-decoration: none; }
.wordmark img { display: block; height: 26px; width: auto; }
footer .wordmark img { height: 30px; }

.nav-links { display: flex; align-items: center; gap: 1.9rem; }
.nav-links a {
  color: var(--paper-dim); text-decoration: none; font-size: 0.9rem; font-weight: 500;
  transition: color 160ms ease-out;
}
.nav-links a:hover, .nav-links a:focus-visible { color: var(--paper); }

/* ============================ HERO ============================ */

.hero { min-height: 100svh; display: grid; grid-template-rows: 1fr auto;
        padding: 0 var(--rail) clamp(1.25rem, 3vh, 2.25rem);
        /* above .panel-veil::before, so the blend ramp darkens the photograph
           without washing out the headline or the search bar */
        position: relative; z-index: 2; }
.hero-type { align-self: center; text-align: center; max-width: 1100px; margin: 0 auto; padding-top: 4rem; }
.hero-type h1 {
  font-family: var(--font-hero); font-weight: 800; font-size: var(--hero);
  line-height: 0.86; letter-spacing: -0.042em; color: #fff;
  text-shadow: 0 14px 50px rgba(10, 6, 4, 0.45);
}
.hero-type h1 .lede {
  display: block; font-family: var(--font-body); font-size: 0.235em; font-weight: 500;
  letter-spacing: 0.005em; line-height: 1.1; color: var(--paper-dim); margin-bottom: 0.42em;
}
.hero-sub {
  margin: 1.5rem auto 0; max-width: 46ch;
  font-size: clamp(1rem, 0.9rem + 0.4vw, 1.2rem); color: var(--paper-dim);
  text-shadow: 0 2px 20px rgba(10,6,4,0.6);
}
.scroll-cue {
  display: flex; align-items: center; justify-content: center; gap: 0.6rem; margin-top: 2.2rem;
  font-size: 0.72rem; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--paper-faint);
}
.scroll-cue .line { display: block; width: 46px; height: 1px;
  background: linear-gradient(90deg, rgba(251,246,241,0) 0%, rgba(251,246,241,0.5) 100%); }
.scroll-cue .line.rev { transform: scaleX(-1); }

/* ========================= SEARCH BAR ========================= */

.search-dock { width: min(1180px, 100%); margin: 0 auto; }
/* Trip type only earns its place when the destination is left open — with a
   destination chosen it filters nothing. */
/* Field order is: from · to · TYPE · date · button.
   The THIRD track is Trip Type — collapsing the fourth squeezes the date
   field to nothing and slides it under the button. */
/* Every field is one equal share of the bar, in both states. The bar's own
   width never changes (it's min(1180px, 100%)); collapsing Trip Type just
   splits the same space three ways instead of four, so the fields stay
   equal to each other and nothing looks stretched. */
.search.no-type {
  grid-template-columns:
    minmax(0, 1fr) minmax(0, 1fr) minmax(0, 0fr) minmax(0, 1fr) auto;
}
.search {
  width: min(1180px, 100%); margin: 0 auto;
  background: var(--glass);
  backdrop-filter: blur(22px) saturate(1.25); -webkit-backdrop-filter: blur(22px) saturate(1.25);
  border: 1px solid var(--hairline-lit); border-radius: 14px; box-shadow: var(--shadow);
  display: grid; align-items: stretch;
  grid-template-columns:
    minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr) auto;
  transition: grid-template-columns 340ms cubic-bezier(0.4, 0, 0.2, 1),
              padding 200ms ease-out, background 200ms ease-out;
}
body.docked .search {
  position: fixed; top: 68px; left: var(--rail); right: var(--rail);
  width: auto; max-width: 1180px; margin: 0 auto; z-index: 35;
  background: rgba(20, 13, 10, 0.86); border-radius: 12px;
  box-shadow: 0 18px 44px -18px rgba(10, 6, 4, 0.9);
}
body.docked .field { padding-block: 0.62rem; }
body.docked .btn-search { padding-block: 0.7rem; }
body.docked .cal { bottom: auto; top: calc(100% + 12px); }

.field {
  position: relative; display: flex; flex-direction: column; justify-content: center; gap: 0.3rem;
  padding: 0.95rem 1.05rem; border-right: 1px solid var(--hairline);
  text-align: left; background: none; font: inherit; color: inherit; cursor: pointer;
  min-width: 0;
  transition: background 160ms ease-out,
              padding 340ms cubic-bezier(0.4, 0, 0.2, 1),
              opacity 200ms ease-out;
}

/* Only this field clips — it's the one that collapses. Never put overflow
   on .field generally: it clips the calendar popover inside #dateField. */
#typeField { overflow: hidden; }
/* On the way OUT the .no-type rules keep this field's contents out of flow.
   On the way BACK IN they're removed the instant the class drops, so the label
   is in flow again while the column is still ~0px wide — it wrapped onto
   several lines and spiked the whole bar 74px -> 91px mid-animation. Nowrap
   means it can never wrap at any width; overflow above hides the spill. */
#typeField > label { white-space: nowrap; }

/* Collapsing Trip Type: fade the contents while its column closes.
   visibility (not display) takes it out of the tab order WITHOUT removing it
   from the grid — removing it re-flows the remaining tracks and the bar
   visibly jumps at the end of the animation. */
#typeField { transition-property: opacity, padding, background; }
.search.no-type #typeField {
  opacity: 0; pointer-events: none; visibility: hidden;
  padding-left: 0; padding-right: 0; border-right-width: 0;
  transition: opacity 200ms ease-out,
              padding 340ms cubic-bezier(0.4, 0, 0.2, 1),
              visibility 0s linear 340ms;
}
/* The select carries its own intrinsic width and right padding; without
   zeroing both, the column floors at ~41px instead of closing. */
.search.no-type #typeField select { width: 0; min-width: 0; padding: 0; }
/* Taking the contents out of flow is what keeps the bar the same HEIGHT.
   At zero width the label "Trip type" wrapped onto several lines and, because
   a grid row sizes to its tallest cell, that dragged every field taller
   (74px -> 91px). Absolute children contribute no height; overflow clips them. */
.search.no-type #typeField > * { position: absolute; top: 0; left: 0; }
.field:hover { background: rgba(251,246,241,0.05); }
.field:focus-within { background: rgba(251,246,241,0.07); }
.field > label {
  font-size: 0.68rem; font-weight: 600; letter-spacing: 0.13em; text-transform: uppercase;
  color: var(--paper-faint); cursor: pointer;
}
.field select, .field input {
  appearance: none; -webkit-appearance: none; background: transparent; border: 0;
  margin: 0; font-family: inherit; font-size: 1.02rem; font-weight: 500;
  color: var(--paper); width: 100%; cursor: pointer;
  /* room on the right so long values never run under the caret */
  padding: 0 1.35rem 0 0;
  text-overflow: ellipsis; white-space: nowrap; overflow: hidden;
}
.field input { cursor: text; }
.field input::placeholder { color: var(--paper-faint); font-weight: 400; }
.field select:focus, .field input:focus { outline: none; }
.field select option { background: #1E1512; color: #FBF6F1; }
.field .caret {
  position: absolute; right: 1.1rem; bottom: 1.05rem; width: 9px; height: 9px;
  border-right: 2px solid var(--coral); border-bottom: 2px solid var(--coral);
  transform: rotate(45deg); pointer-events: none;
}
.field.is-anywhere select,
.field.is-anytype select { color: var(--paper-faint); font-weight: 400; }

.btn-search {
  display: flex; align-items: center; justify-content: center; gap: 0.55rem;
  padding: 1rem 2.1rem; border: 0; border-radius: 0 13px 13px 0;
  background: var(--coral); color: #fff; font-family: var(--font-display);
  font-size: 1rem; font-weight: 700; cursor: pointer; white-space: nowrap;
  transition: background 160ms ease-out, transform 160ms ease-out;
}
.btn-search:hover { background: var(--coral-deep); }
.btn-search:active { background: var(--coral-dim); transform: translateY(1px); }

/* ========================== CALENDAR ========================== */

.cal {
  position: absolute; bottom: calc(100% + 12px); right: 0; width: 328px; padding: 1rem;
  background: rgba(24, 16, 13, 0.94);
  backdrop-filter: blur(26px) saturate(1.3); -webkit-backdrop-filter: blur(26px) saturate(1.3);
  border: 1px solid var(--hairline-lit); border-radius: 14px; box-shadow: var(--shadow);
  z-index: 30; cursor: default;
}
.cal[hidden] { display: none; }
.cal-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 0.85rem; }
.cal-month { font-family: var(--font-display); font-size: 0.98rem; font-weight: 700; }
.cal-nav {
  display: grid; place-items: center; width: 30px; height: 30px;
  border: 1px solid var(--hairline); border-radius: 8px; background: transparent;
  color: var(--paper); font-size: 0.85rem; cursor: pointer;
  transition: border-color 160ms ease-out, background 160ms ease-out;
}
.cal-nav:hover:not(:disabled) { border-color: var(--coral); background: rgba(255,107,53,0.12); }
.cal-nav:disabled { opacity: 0.3; cursor: not-allowed; }
/* minmax(0,1fr) + an explicit height, NOT aspect-ratio: inside a
   position:fixed search bar the cells have no definite height to measure
   against, and aspect-ratio blows every column up to ~114px so the last
   two days of the week fall outside the popover. */
.cal-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 3px; }
.cal-dow {
  min-width: 0;
  text-align: center; font-size: 0.64rem; font-weight: 600; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--paper-faint); padding-bottom: 0.4rem;
}
.cal-day {
  position: relative; min-width: 0; height: 38px; padding: 0;
  display: grid; place-items: center; border: 0;
  border-radius: 8px; background: transparent; color: var(--paper-dim); font-family: inherit;
  font-size: 0.85rem; font-variant-numeric: tabular-nums; cursor: pointer;
  transition: background 140ms ease-out, color 140ms ease-out;
}
.cal-day:hover:not(:disabled) { background: rgba(251,246,241,0.1); color: var(--paper); }
.cal-day:disabled { color: rgba(251,246,241,0.18); cursor: default; }
.cal-pad { min-width: 0; height: 38px; }
.cal-day.has-dep::after {
  content: ""; position: absolute; bottom: 5px; width: 4px; height: 4px;
  border-radius: 50%; background: var(--coral);
}
.cal-day.selected { background: var(--coral); color: #fff; font-weight: 600; }
.cal-day.selected::after { background: #fff; }
.cal-foot {
  display: flex; align-items: center; gap: 0.45rem; margin-top: 0.85rem; padding-top: 0.75rem;
  border-top: 1px solid var(--hairline); font-size: 0.74rem; color: var(--paper-faint);
}
.cal-dot { width: 4px; height: 4px; border-radius: 50%; background: var(--coral); flex: none; }

/* ========================== PANELS ========================== */

.panel { position: relative; padding: clamp(4.5rem, 9vw, 7.5rem) var(--rail); }
/* The hero photo and the first panel used to meet at a hard line: the panel
   began at 0.78 alpha, and its backdrop-filter drew a razor-sharp blur edge.
   No blur here, and a tall ramp above the panel carries the photo down into
   the dark instead of cutting it. */
.panel-veil {
  background: linear-gradient(180deg,
    rgba(20,13,10,0.88) 0%,
    rgba(20,13,10,0.95) 26%,
    var(--ink) 70%);
}
.panel-veil::before {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 100%;
  height: min(72vh, 620px);
  background: linear-gradient(180deg,
    rgba(20,13,10,0) 0%,
    rgba(20,13,10,0.10) 30%,
    rgba(20,13,10,0.30) 55%,
    rgba(20,13,10,0.58) 76%,
    rgba(20,13,10,0.78) 90%,
    rgba(20,13,10,0.88) 100%);
  pointer-events: none;
}
.panel-solid { background: var(--ink); }
.panel-lift  { background: var(--ink-soft); }

.panel-head { max-width: 40ch; margin-bottom: clamp(2.5rem, 5vw, 3.75rem); }
.panel-head h2 { margin-top: 0.7rem; font-size: var(--step-4); font-weight: 800;
                 line-height: 1.04; letter-spacing: -0.035em; }
.panel-head p { margin: 0.9rem 0 0; max-width: 52ch; color: var(--paper-dim); font-size: var(--step-1); }

.steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
         gap: clamp(1.75rem, 3.5vw, 3rem); }
.step { display: flex; flex-direction: column; gap: 0.75rem; }
.step-n { display: flex; align-items: center; gap: 0.75rem; font-family: var(--font-display);
          font-size: 0.8rem; font-weight: 700; letter-spacing: 0.1em; color: var(--coral); }
.step-n .rule { flex: 1; height: 1px;
  background: linear-gradient(90deg, rgba(255,107,53,0.55) 0%, rgba(255,107,53,0) 100%); }
.step h3 { font-size: var(--step-2); font-weight: 700; letter-spacing: -0.02em; }
.step p { margin: 0; color: var(--paper-dim); }

.trust { display: grid; grid-template-columns: repeat(auto-fit, minmax(258px, 1fr));
         gap: 1px; background: var(--hairline); border-block: 1px solid var(--hairline); }
.trust-item { background: var(--ink-soft); padding: 1.85rem 1.6rem;
              display: flex; flex-direction: column; gap: 0.5rem; }
.trust-item h3 { font-size: 1.05rem; font-weight: 700; color: var(--paper); }
.trust-item p { margin: 0; font-size: 0.94rem; color: var(--paper-dim); }
.trust-item .tick {
  width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center;
  background: rgba(143,188,143,0.16); color: var(--sage); font-size: 0.68rem;
  font-weight: 700; margin-bottom: 0.2rem;
}

.operators {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 2rem;
  padding: clamp(2rem, 4vw, 3rem); border: 1px solid var(--hairline); border-radius: 16px;
  background: radial-gradient(140% 180% at 0% 0%, rgba(0,78,137,0.32) 0%, rgba(0,78,137,0) 60%), var(--ink-soft);
}
.operators h2 { font-size: var(--step-3); font-weight: 800; letter-spacing: -0.03em; max-width: 22ch; }
.operators p { margin: 0.7rem 0 0; max-width: 46ch; color: var(--paper-dim); }

.btn-ghost {
  display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.85rem 1.6rem;
  border: 1.5px solid var(--paper-dim); border-radius: 8px; background: transparent;
  color: var(--paper); font-family: var(--font-display); font-size: 0.95rem; font-weight: 600;
  text-decoration: none; white-space: nowrap; cursor: pointer;
  transition: border-color 160ms ease-out, background 160ms ease-out, color 160ms ease-out;
}
.btn-ghost:hover { border-color: var(--coral); background: rgba(255,107,53,0.1); color: #fff; }

/* ===================== RESULTS + TRIP PAGES ===================== */

.inner { padding: 148px var(--rail) clamp(4rem, 8vw, 6rem); background: var(--ink); min-height: 100vh; }

.results-head {
  display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between;
  gap: 1rem; margin-bottom: 2.25rem;
}
.results-head h1 { font-size: var(--step-3); font-weight: 800; letter-spacing: -0.03em; }
.results-count { color: var(--paper-faint); font-size: 0.92rem; }

.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 1.5rem; }

.card {
  display: flex; flex-direction: column; text-decoration: none; color: inherit;
  background: var(--ink-soft); border: 1px solid var(--hairline); border-radius: 12px;
  overflow: hidden; transition: border-color 180ms ease-out, transform 180ms ease-out;
}
.card:hover { border-color: var(--hairline-lit); transform: translateY(-3px); }
.card-img {
  aspect-ratio: 16 / 10; background: linear-gradient(150deg, #3E4A5C, #7A4B37 60%, #2A1410);
  background-size: cover; background-position: center; position: relative;
}
.card-date {
  position: absolute; left: 12px; top: 12px; padding: 0.34rem 0.7rem; border-radius: 6px;
  background: rgba(20,13,10,0.82); backdrop-filter: blur(8px);
  font-size: 0.76rem; font-weight: 600; letter-spacing: 0.02em;
}
.card-body { padding: 1.15rem 1.25rem 1.35rem; display: flex; flex-direction: column; gap: 0.5rem; flex: 1; }
.card-op { font-size: 0.74rem; font-weight: 600; letter-spacing: 0.11em;
           text-transform: uppercase; color: var(--coral); }
.card h3 { font-size: 1.18rem; font-weight: 700; letter-spacing: -0.018em; line-height: 1.25; }
.card-meta { font-size: 0.88rem; color: var(--paper-dim); }
.card-foot {
  display: flex; align-items: baseline; justify-content: space-between; gap: 1rem;
  margin-top: auto; padding-top: 0.9rem; border-top: 1px solid var(--hairline);
}
.card-price { font-family: var(--font-display); font-size: 1.22rem; font-weight: 700; }
.card-price span { font-size: 0.78rem; font-weight: 500; color: var(--paper-faint); }
.seats { font-size: 0.8rem; font-weight: 600; color: var(--sage); }
.seats.low { color: #FFC107; }

.empty-state {
  padding: 3.5rem 2rem; text-align: center; border: 1px dashed var(--hairline);
  border-radius: 14px; background: var(--ink-soft);
}
.empty-state h2 { font-size: var(--step-2); font-weight: 700; margin-bottom: 0.6rem; }
.empty-state p { color: var(--paper-dim); max-width: 44ch; margin: 0 auto 1.5rem; }
.nearby { display: flex; flex-wrap: wrap; gap: 0.6rem; justify-content: center; }
.chip {
  padding: 0.55rem 1rem; border: 1px solid var(--hairline-lit); border-radius: 999px;
  background: transparent; color: var(--paper); font: inherit; font-size: 0.88rem;
  text-decoration: none; cursor: pointer; transition: border-color 160ms, background 160ms;
}
.chip:hover { border-color: var(--coral); background: rgba(255,107,53,0.1); }

/* Trip detail */
.trip-grid { display: grid; grid-template-columns: 1.65fr 1fr; gap: clamp(2rem, 4vw, 3.5rem); align-items: start; }
.trip-hero {
  aspect-ratio: 16 / 9; border-radius: 14px; margin-bottom: 2rem;
  background: linear-gradient(150deg, #3E4A5C, #7A4B37 60%, #2A1410);
  background-size: cover; background-position: center;
}
.trip-title { font-size: var(--step-4); font-weight: 800; letter-spacing: -0.035em; line-height: 1.05; }
.trip-sub { margin: 0.85rem 0 0; color: var(--paper-dim); font-size: var(--step-1); }
.trip-section { margin-top: 2.5rem; }
.trip-section h2 { font-size: var(--step-2); font-weight: 700; letter-spacing: -0.02em; margin-bottom: 1rem; }
.day { display: flex; gap: 1rem; padding: 0.9rem 0; border-top: 1px solid var(--hairline); }
.day-n { flex: none; width: 62px; font-size: 0.74rem; font-weight: 700; letter-spacing: 0.1em;
         text-transform: uppercase; color: var(--coral); padding-top: 0.2rem; }
.day p { margin: 0; color: var(--paper-dim); }
.list { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.55rem; }
.list li { display: flex; gap: 0.6rem; color: var(--paper-dim); }
.list li::before { content: "✓"; color: var(--sage); font-size: 0.82rem; flex: none; padding-top: 0.15rem; }
.list.excl li::before { content: "×"; color: var(--paper-faint); }

.booking-box {
  position: sticky; top: 148px; padding: 1.5rem; border: 1px solid var(--hairline-lit);
  border-radius: 14px; background: var(--ink-soft); box-shadow: var(--shadow);
  display: flex; flex-direction: column; gap: 1rem;
}
.booking-price { font-family: var(--font-display); font-size: 2rem; font-weight: 800; letter-spacing: -0.03em; }
.booking-price span { font-size: 0.85rem; font-weight: 500; color: var(--paper-faint); }
.booking-row {
  display: flex; justify-content: space-between; gap: 1rem; font-size: 0.92rem;
  padding: 0.5rem 0; border-top: 1px solid var(--hairline);
}
.booking-row dt { color: var(--paper-faint); margin: 0; }
.booking-row dd { margin: 0; font-weight: 600; text-align: right; }
.btn-book {
  display: flex; align-items: center; justify-content: center; padding: 1rem 1.5rem;
  border: 0; border-radius: 9px; background: var(--coral); color: #fff;
  font-family: var(--font-display); font-size: 1.02rem; font-weight: 700;
  text-decoration: none; cursor: pointer; transition: background 160ms ease-out;
}
.btn-book:hover { background: var(--coral-deep); }
.btn-book[aria-disabled="true"] { background: #4A3B34; color: var(--paper-faint); cursor: not-allowed; }
.booking-note { font-size: 0.8rem; color: var(--paper-faint); text-align: center; margin: 0; }

.loading { padding: 4rem 0; text-align: center; color: var(--paper-faint); }

/* ============================ FOOTER ============================ */

footer { position: relative; background: var(--ink); border-top: 1px solid var(--hairline);
         padding: clamp(3rem, 6vw, 4.5rem) var(--rail) 2rem; }
.foot-grid { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 2.5rem 3rem; }
.foot-col { display: flex; flex-direction: column; gap: 0.65rem; min-width: 140px; }
.foot-col .eyebrow { margin-bottom: 0.2rem; }
.foot-col a { color: var(--paper-dim); text-decoration: none; font-size: 0.92rem;
              transition: color 160ms ease-out; }
.foot-col a:hover { color: var(--coral); }
.foot-brand { max-width: 30ch; }
.foot-brand p { margin: 0.85rem 0 0; font-size: 0.92rem; color: var(--paper-faint); }
.foot-base {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1rem;
  margin-top: clamp(2.5rem, 5vw, 3.5rem); padding-top: 1.5rem;
  border-top: 1px solid var(--hairline); font-size: 0.82rem; color: var(--paper-faint);
}

/* ========================== RESPONSIVE ========================== */

@media (max-width: 980px) {
  .trip-grid { grid-template-columns: 1fr; }
  .booking-box { position: static; }
}
@media (max-width: 900px) {
  /* .search.no-type (0,2,0) outranks .search (0,1,0) whatever the order, so
     without restating it here the desktop five-track rule leaked into the
     stacked phone layout and squeezed three fields onto one line. Trip Type
     leaves the grid outright — there's no width to animate on a phone, so
     display:none is honest and keeps every remaining row full size. */
  .search.no-type { grid-template-columns: 1fr 1fr; }
  .search.no-type #typeField { display: none; }
  .search.no-type #dateField { grid-column: 1 / -1; border-right: 0; }

  .search { grid-template-columns: 1fr 1fr; }
  .field:nth-child(even) { border-right: 0; }
  .field:nth-child(3), .field:nth-child(4) { border-top: 1px solid var(--hairline); }
  .btn-search { grid-column: 1 / -1; border-radius: 0 0 13px 13px; border-top: 1px solid var(--hairline); }
  .cal { right: 0; left: auto; }
}
@media (max-width: 620px) {
  .nav-links { gap: 1.1rem; }
  .nav-links a.hide-sm { display: none; }
  .search, .search.no-type { grid-template-columns: 1fr; }
  .field { border-right: 0; border-bottom: 1px solid var(--hairline); }
  .hero-type { padding-top: 5rem; }
  .hero-type h1 { line-height: 0.94; }
  .scroll-cue .line { display: none; }
  .cal { width: min(328px, calc(100vw - 3rem)); }
  .operators { flex-direction: column; align-items: flex-start; }
  .inner { padding-top: 190px; }
}

/* ========================== LEGAL PAGES ========================== */

.legal { max-width: 68ch; }
.legal .eyebrow { display: block; margin-bottom: 0.7rem; }
.legal h1 {
  font-size: var(--step-4); font-weight: 800; letter-spacing: -0.035em; line-height: 1.05;
}
.legal .updated { margin: 1rem 0 0; color: var(--paper-faint); font-size: 0.9rem; }
.legal h2 {
  margin: 2.75rem 0 0.85rem; font-size: 1.32rem; font-weight: 700; letter-spacing: -0.02em;
  padding-top: 1.75rem; border-top: 1px solid var(--hairline);
}
.legal h3 { margin: 1.75rem 0 0.5rem; font-size: 1.02rem; font-weight: 700; }
.legal p, .legal li { color: var(--paper-dim); }
.legal p { margin: 0 0 1rem; }
.legal ul, .legal ol { margin: 0 0 1rem; padding-left: 1.15rem; display: grid; gap: 0.5rem; }
.legal a { color: var(--coral); }
.legal strong { color: var(--paper); font-weight: 600; }

/* Refund/cancellation windows read as a table, because that's what they are */
.policy-table { width: 100%; margin: 0 0 1.25rem; border-collapse: collapse; font-size: 0.95rem; }
.policy-table th, .policy-table td {
  text-align: left; padding: 0.8rem 1rem; border-bottom: 1px solid var(--hairline);
  vertical-align: top;
}
.policy-table th {
  font-size: 0.7rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--paper-faint);
}
.policy-table td { color: var(--paper-dim); }
.policy-table td:first-child { color: var(--paper); font-weight: 600; white-space: nowrap; }
.table-scroll { overflow-x: auto; }

/* Anything Nimit still has to fill in before these go live */
.fill-in {
  background: rgba(255, 193, 7, 0.16); color: #FFD98A; border-radius: 4px;
  padding: 0.1em 0.4em; font-weight: 600; font-size: 0.94em;
}
.notice {
  margin: 2rem 0 0; padding: 1.15rem 1.35rem; border-radius: 10px;
  border: 1px solid rgba(255, 193, 7, 0.32); background: rgba(255, 193, 7, 0.07);
}
.notice p { margin: 0; font-size: 0.92rem; color: var(--paper-dim); }
.notice strong { color: #FFD98A; }

/* ========================== CHECKOUT ========================== */

.checkout-grid {
  display: grid; grid-template-columns: 1.5fr 1fr;
  gap: clamp(2rem, 4vw, 3.5rem); align-items: start;
}
.checkout-head { margin-bottom: 2.25rem; }
.checkout-head h1 {
  font-size: var(--step-4); font-weight: 800; letter-spacing: -0.035em; line-height: 1.05;
}
.checkout-head p { margin: 0.8rem 0 0; color: var(--paper-dim); max-width: 52ch; }

.form-section { margin-bottom: 2.5rem; }
.form-section h2 {
  font-size: 1.2rem; font-weight: 700; letter-spacing: -0.018em; margin-bottom: 0.4rem;
}
.form-section > p { margin: 0 0 1.25rem; color: var(--paper-faint); font-size: 0.92rem; }

.form-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; }
.form-row { display: flex; flex-direction: column; gap: 0.4rem; }
.form-row.wide { grid-column: 1 / -1; }
.form-row label {
  font-size: 0.72rem; font-weight: 600; letter-spacing: 0.11em;
  text-transform: uppercase; color: var(--paper-faint);
}
.form-row input, .form-row select {
  appearance: none; -webkit-appearance: none;
  background: var(--ink-soft); border: 1px solid var(--hairline);
  border-radius: 9px; padding: 0.85rem 1rem;
  font-family: inherit; font-size: 1rem; color: var(--paper);
  transition: border-color 160ms ease-out, background 160ms ease-out;
}
.form-row input::placeholder { color: rgba(251,246,241,0.28); }
.form-row input:focus, .form-row select:focus {
  outline: none; border-color: var(--coral); background: rgba(255,107,53,0.06);
}
.form-row .hint { font-size: 0.8rem; color: var(--paper-faint); }

.consent {
  display: flex; gap: 0.8rem; align-items: flex-start;
  padding: 1.1rem 1.25rem; border: 1px solid var(--hairline);
  border-radius: 10px; background: var(--ink-soft);
}
.consent input { flex: none; width: 18px; height: 18px; margin-top: 2px; accent-color: var(--coral); }
.consent label { font-size: 0.92rem; color: var(--paper-dim); line-height: 1.55; }
.consent a { color: var(--coral); }

/* Order summary */
.summary {
  position: sticky; top: 120px; padding: 1.6rem;
  border: 1px solid var(--hairline-lit); border-radius: 14px;
  background: var(--ink-soft); box-shadow: var(--shadow);
}
.summary h2 {
  font-size: 0.72rem; font-weight: 600; letter-spacing: 0.13em;
  text-transform: uppercase; color: var(--paper-faint); margin-bottom: 1.1rem;
}
.summary-trip { display: flex; flex-direction: column; gap: 0.3rem; padding-bottom: 1.1rem; }
.summary-trip .op {
  font-size: 0.72rem; font-weight: 600; letter-spacing: 0.11em;
  text-transform: uppercase; color: var(--coral);
}
.summary-trip h3 { font-size: 1.12rem; font-weight: 700; letter-spacing: -0.015em; line-height: 1.3; }
.summary-trip .when { font-size: 0.9rem; color: var(--paper-dim); }

.summary-line {
  display: flex; justify-content: space-between; gap: 1rem;
  padding: 0.6rem 0; border-top: 1px solid var(--hairline);
  font-size: 0.94rem; color: var(--paper-dim);
}
.summary-line span:last-child { color: var(--paper); font-variant-numeric: tabular-nums; }
.summary-total {
  display: flex; justify-content: space-between; align-items: baseline; gap: 1rem;
  padding: 0.9rem 0 0.25rem; margin-top: 0.35rem; border-top: 1px solid var(--hairline-lit);
}
.summary-total dt { font-size: 0.95rem; font-weight: 600; }
.summary-total dd {
  margin: 0; font-family: var(--font-display); font-size: 1.7rem; font-weight: 800;
  letter-spacing: -0.03em; font-variant-numeric: tabular-nums;
}
.summary-note { margin: 0.9rem 0 0; font-size: 0.82rem; color: var(--paper-faint); line-height: 1.5; }

.btn-pay {
  display: flex; align-items: center; justify-content: center; gap: 0.5rem;
  width: 100%; margin-top: 1.2rem; padding: 1.05rem 1.5rem;
  border: 0; border-radius: 10px; background: var(--coral); color: #fff;
  font-family: var(--font-display); font-size: 1.05rem; font-weight: 700;
  cursor: pointer; transition: background 160ms ease-out;
}
.btn-pay:hover:not(:disabled) { background: var(--coral-deep); }
.btn-pay:disabled { background: #4A3B34; color: var(--paper-faint); cursor: not-allowed; }

.pay-methods {
  display: flex; align-items: center; justify-content: center; gap: 0.5rem;
  margin-top: 0.9rem; font-size: 0.78rem; color: var(--paper-faint);
}
.pay-methods .dot { width: 3px; height: 3px; border-radius: 50%; background: var(--paper-faint); }

.preview-banner {
  display: flex; gap: 0.85rem; align-items: flex-start;
  margin-bottom: 2rem; padding: 1rem 1.25rem;
  border: 1px solid rgba(255,193,7,0.32); border-radius: 10px;
  background: rgba(255,193,7,0.07);
}
.preview-banner p { margin: 0; font-size: 0.9rem; color: var(--paper-dim); }
.preview-banner strong { color: #FFD98A; }

@media (max-width: 900px) {
  .checkout-grid { grid-template-columns: 1fr; }
  .summary { position: static; }
  .form-grid { grid-template-columns: 1fr; }
}

/* ============== MOBILE: COLLAPSED SEARCH ON RESULTS ==============
   Four stacked fields plus a button eat half a phone screen, which is
   exactly the space the listings need. On small screens the pinned bar
   collapses to one summary line; tapping it opens the full search. */

.search-summary { display: none; }

@media (max-width: 760px) {
  body.pinned .search-summary {
    position: fixed; top: 62px; left: var(--rail); right: var(--rail); z-index: 36;
    display: flex; align-items: center; gap: 0.85rem;
    padding: 0.7rem 0.9rem 0.7rem 1.1rem;
    border: 1px solid var(--hairline-lit); border-radius: 12px;
    background: rgba(20, 13, 10, 0.94);
    backdrop-filter: blur(18px) saturate(1.2); -webkit-backdrop-filter: blur(18px) saturate(1.2);
    box-shadow: 0 14px 34px -16px rgba(10, 6, 4, 0.9);
    font: inherit; color: inherit; text-align: left; cursor: pointer;
  }
  .summary-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 0.1rem; }
  .summary-route {
    font-size: 0.95rem; font-weight: 600; color: var(--paper);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  .summary-when { font-size: 0.8rem; color: var(--paper-faint); }
  .summary-edit {
    flex: none; font-size: 0.78rem; font-weight: 600; letter-spacing: 0.06em;
    text-transform: uppercase; color: var(--coral);
  }

  /* Collapsed: summary only */
  body.pinned.search-collapsed .search { display: none; }
  body.pinned.search-collapsed .inner { padding-top: 152px; }

  /* Open: full search, summary steps aside */
  body.pinned:not(.search-collapsed) .search-summary { display: none; }
  body.pinned:not(.search-collapsed) .inner { padding-top: 400px; }
}

/* Departures shown when the chosen date came up empty */
.nearby-trips { margin-top: clamp(2.5rem, 5vw, 3.5rem); }
.nearby-trips > h2 {
  font-size: 0.72rem; font-weight: 600; letter-spacing: 0.13em;
  text-transform: uppercase; color: var(--paper-faint); margin-bottom: 1.25rem;
}
.gap-flag {
  position: absolute; right: 12px; top: 12px;
  padding: 0.34rem 0.7rem; border-radius: 6px;
  background: rgba(255, 107, 53, 0.92); color: #fff;
  font-size: 0.72rem; font-weight: 600;
}

/* ===================== BOOKING DETAILS PAGE ===================== */

.steps-bar {
  display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap;
  margin-bottom: 1.75rem; font-size: 0.78rem; letter-spacing: 0.06em;
}
.step-pill { display: flex; align-items: center; gap: 0.45rem; color: var(--paper-faint); }
.step-pill .n {
  display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%;
  border: 1px solid var(--hairline-lit); font-size: 0.7rem; font-weight: 600;
}
.step-pill.done { color: var(--sage); }
.step-pill.done .n { border-color: var(--sage); }
.step-pill.now { color: var(--paper); }
.step-pill.now .n { background: var(--coral); border-color: var(--coral); color: #fff; }
.steps-bar .sep { color: var(--paper-faint); }

fieldset.form-section { border: 0; margin: 0 0 2.5rem; padding: 0; }
fieldset.form-section legend {
  padding: 0; font-family: var(--font-display);
  font-size: 1.2rem; font-weight: 700; letter-spacing: -0.018em;
}

.traveller {
  padding: 1.15rem 1.25rem; margin-bottom: 0.85rem;
  border: 1px solid var(--hairline); border-radius: 10px; background: var(--ink-soft);
}
.traveller-head {
  font-size: 0.72rem; font-weight: 600; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--coral); margin-bottom: 0.85rem;
}
.traveller .form-grid { grid-template-columns: 2fr 1fr 1.2fr; }

.form-row textarea {
  background: var(--ink-soft); border: 1px solid var(--hairline); border-radius: 9px;
  padding: 0.85rem 1rem; font-family: inherit; font-size: 1rem; color: var(--paper);
  min-height: 96px; resize: vertical;
  transition: border-color 160ms ease-out, background 160ms ease-out;
}
.form-row textarea:focus {
  outline: none; border-color: var(--coral); background: rgba(255,107,53,0.06);
}
.form-row textarea::placeholder { color: rgba(251,246,241,0.28); }

.field-error { border-color: var(--coral) !important; }
.form-note {
  margin: 0 0 1.25rem; padding: 0.9rem 1.1rem; border-radius: 9px;
  border: 1px solid var(--hairline); background: var(--ink-soft);
  font-size: 0.88rem; color: var(--paper-dim);
}

/* Payment hand-off, revealed once details are saved */
.handoff { max-width: 44rem; }
.handoff .tick-big {
  width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center;
  background: rgba(143,188,143,0.16); color: var(--sage);
  font-size: 1.2rem; font-weight: 700; margin-bottom: 1.1rem;
}
.handoff h1 { font-size: var(--step-3); font-weight: 800; letter-spacing: -0.03em; }
.handoff p { color: var(--paper-dim); margin: 0.9rem 0 0; }
.handoff .btn-pay { max-width: 22rem; }

@media (max-width: 700px) {
  .traveller .form-grid { grid-template-columns: 1fr; }
}

/* ====================== OPERATOR PROFILES ====================== */

.page-head { max-width: 620px; margin-bottom: 2.6rem; }
.page-head h1 { margin: 0.4rem 0 0.7rem; font-size: var(--step-4); font-weight: 800; }
.page-head p { color: var(--paper-dim); margin: 0; line-height: 1.7; }

.op-cards {
  display: grid; gap: 1.1rem;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
}
.op-card {
  display: flex; flex-direction: column; padding: 1.5rem;
  border: 1px solid var(--hairline);
  border-radius: 14px; background: var(--ink-soft); text-decoration: none; color: inherit;
  transition: transform 180ms ease-out, border-color 180ms ease-out;
}
.op-card:hover { transform: translateY(-3px); border-color: var(--coral); }
.op-card-head { display: flex; align-items: center; gap: 0.95rem; }
.op-card-head h3 { margin: 0; font-size: 1.12rem; line-height: 1.25; font-weight: 700; }
.op-based { font-size: 0.86rem; color: var(--paper-faint); }

.op-logo {
  width: 54px; height: 54px; flex: 0 0 54px; border-radius: 13px;
  object-fit: cover; background: rgba(251,246,241,0.06); border: 1px solid var(--hairline);
}
.op-logo.is-mono {
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display); font-size: 1.5rem; font-weight: 800;
  color: #fff; background: var(--coral); border-color: transparent;
}
.op-logo.lg { width: 82px; height: 82px; flex-basis: 82px; border-radius: 18px; font-size: 2.2rem; }

.op-tagline { margin: 0.9rem 0 1.1rem; color: var(--paper-dim); font-size: 0.97rem; line-height: 1.55; }
.op-card-head { min-height: 54px; }

.op-stat-row {
  /* margin-top:auto pins the stat row to the card's bottom edge so a grid of
     cards with different tagline lengths still lines up along one rule. */
  display: flex; flex-wrap: wrap; gap: 0.45rem 1.1rem; margin-top: auto;
  padding-top: 1rem; border-top: 1px solid var(--hairline);
  font-size: 0.84rem; color: var(--paper-faint);
}

/* ---- single profile ---- */

.op-crumb { display: inline-block; margin-bottom: 1.5rem; color: var(--coral);
  text-decoration: none; font-size: 0.92rem; }
.op-crumb:hover { text-decoration: underline; }

.op-head { margin-bottom: 2rem; }
.op-head-top { display: flex; gap: 1.4rem; align-items: flex-start; }
.op-head-top h1 { margin: 0; font-size: clamp(1.9rem, 4vw, 2.7rem); line-height: 1.1; font-weight: 800; }
.op-head-top .op-tagline { margin-top: 0.6rem; font-size: 1.05rem; }
.op-head-meta {
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 1rem;
  margin-top: 1rem; font-size: 0.88rem; color: var(--paper-faint);
}
.op-verified {
  display: inline-flex; align-items: center; gap: 0.35rem; padding: 0.28rem 0.7rem;
  border-radius: 999px; background: rgba(255,107,53,0.14); color: var(--coral);
  font-weight: 600; font-size: 0.8rem; cursor: help;
}

.op-stats {
  display: grid; gap: 1px; margin: 0 0 2.4rem;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  background: var(--hairline); border: 1px solid var(--hairline);
  border-radius: 14px; overflow: hidden;
}
.op-stat { background: var(--ink-soft); padding: 1.25rem 1.4rem; }
.op-stat strong {
  display: block; font-family: var(--font-display); font-size: 1.85rem;
  font-weight: 800; line-height: 1; color: var(--paper);
}
.op-stat span { display: block; margin-top: 0.4rem; font-size: 0.84rem; color: var(--paper-faint); }

.op-section { margin-bottom: 2.6rem; }
.op-section h2 { font-size: 1.25rem; font-weight: 700; margin: 0 0 0.85rem; }
.op-section > p { color: var(--paper-dim); margin: 0; line-height: 1.7; max-width: 62ch; }

.op-tags { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.op-tag {
  padding: 0.4rem 0.85rem; border-radius: 999px; border: 1px solid var(--hairline);
  background: rgba(251,246,241,0.04); font-size: 0.86rem; color: var(--paper-dim);
}

.op-footnote {
  margin-top: 2.5rem; padding-top: 1.4rem; border-top: 1px solid var(--hairline);
  font-size: 0.86rem; color: var(--paper-faint); line-height: 1.65; max-width: 70ch;
}

/* Operator name on a trip page links through to their profile. */
.op-link { color: inherit; text-decoration: none; border-bottom: 1px solid var(--hairline-lit); }
.op-link:hover { color: var(--coral); border-bottom-color: var(--coral); }

@media (max-width: 560px) {
  .op-head-top { gap: 1rem; }
  .op-logo.lg { width: 62px; height: 62px; flex-basis: 62px; font-size: 1.7rem; }
}

/* ========================= FOOTER MASCOT =========================
   Pompi signs off every page from the footer rule. Small on purpose —
   he's a signature, not a sales asset. */

.foot-base { position: relative; }

/* Perched on the footer rule at the far right. Absolute, so it doesn't take a
   slot in .foot-base's space-between row — as a flex child it landed in the
   middle, between the copyright and the tagline. */
.foot-mascot {
  position: absolute; right: 0; bottom: 100%; line-height: 0; margin-bottom: -2px;
}
.foot-mascot img {
  display: block; width: 68px; height: auto;
  transition: transform 420ms cubic-bezier(0.34, 1.35, 0.64, 1);
  transform-origin: 50% 100%;
}
.foot-mascot:hover img { transform: translateY(-7px) rotate(-4deg); }
@media (prefers-reduced-motion: reduce) { .foot-mascot img { transition: none; } }
@media (max-width: 640px) { .foot-mascot img { width: 56px; } }

/* Same character, used where a page has nothing to show. */
.empty-state .mascot-empty {
  display: block; width: 112px; height: auto; margin: 0 auto 1rem; opacity: 0.95;
}

/* ========================= PHOTO GALLERIES ========================= */

.gallery {
  display: grid; gap: 0.6rem;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
}
.gallery img {
  width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block;
  border-radius: 10px; border: 1px solid var(--hairline);
  background: var(--ink-soft); cursor: zoom-in;
  transition: transform 180ms ease-out, border-color 180ms ease-out;
}
.gallery img:hover { transform: scale(1.02); border-color: var(--hairline-lit); }
.gallery img:focus-visible { outline: 2px solid var(--coral); outline-offset: 2px; }

.lightbox {
  position: fixed; inset: 0; z-index: 200;
  display: flex; align-items: center; justify-content: center; gap: 0.5rem;
  padding: clamp(1rem, 4vw, 3rem);
  background: rgba(10, 6, 4, 0.92);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
}
.lightbox[hidden] { display: none; }
.lightbox figure { margin: 0; max-width: 100%; max-height: 100%; text-align: center; }
.lightbox img {
  max-width: 100%; max-height: calc(100vh - 8rem);
  border-radius: 12px; display: block; margin: 0 auto;
}
.lightbox figcaption {
  margin-top: 0.8rem; font-size: 0.82rem; color: var(--paper-faint);
}
.lb-close, .lb-nav {
  flex: 0 0 auto; width: 44px; height: 44px; border-radius: 50%;
  border: 1px solid var(--hairline-lit); background: rgba(20, 13, 10, 0.7);
  color: var(--paper); font: inherit; font-size: 1.1rem; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background 160ms ease-out, border-color 160ms ease-out;
}
.lb-close:hover, .lb-nav:hover { background: var(--coral); border-color: var(--coral); }
.lb-close { position: absolute; top: 1rem; right: 1rem; }
.lb-nav[hidden] { display: none; }

@media (max-width: 560px) {
  .gallery { grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); }
  .lb-nav { width: 38px; height: 38px; }
}

/* ======================= CONFIRMATION PAGE ======================= */

.confirm { max-width: 640px; margin: 0 auto; text-align: center; }
.confirm-mascot { display: block; width: 108px; height: auto; margin: 0 auto 1.2rem; }
.confirm h1 { font-size: var(--step-4); font-weight: 800; margin: 0.4rem 0 0.9rem; line-height: 1.05; }
.confirm-lede { font-size: 1.08rem; color: var(--paper-dim); margin: 0 0 2rem; line-height: 1.65; }

.confirm-card {
  text-align: left; border: 1px solid var(--hairline); border-radius: 14px;
  background: var(--ink-soft); padding: 0.4rem 1.4rem; margin-bottom: 1.6rem;
}
.confirm-row {
  display: flex; justify-content: space-between; gap: 1.5rem;
  padding: 0.85rem 0; border-bottom: 1px solid var(--hairline);
}
.confirm-row:last-child { border-bottom: 0; }
.confirm-row dt { margin: 0; font-size: 0.86rem; color: var(--paper-faint); }
.confirm-row dd { margin: 0; font-weight: 600; text-align: right; }
/* Only the reference gets the loud treatment — keyed on a class, not on
   position, because the reference row is absent when Airtable isn't wired up
   and the styling would land on whatever happened to be first. */
.confirm-row.is-ref dd {
  font-family: var(--font-display); font-size: 1.1rem; letter-spacing: 0.06em; color: var(--coral);
}

.confirm-next { text-align: left; margin: 2.4rem 0 1.5rem; }
.confirm-next h2 { font-size: 1.15rem; font-weight: 700; margin: 0 0 0.9rem; }
.confirm-next ol { margin: 0; padding-left: 1.2rem; color: var(--paper-dim); }
.confirm-next li { margin-bottom: 0.8rem; line-height: 1.65; }

.confirm-note { font-size: 0.9rem; color: var(--paper-faint); line-height: 1.65; margin: 0 0 0.8rem; }
.confirm-note a { color: var(--coral); }

/* Reference shown on the hand-off panel, before payment. */
.booking-ref {
  display: inline-flex; flex-direction: column; gap: 0.25rem; align-items: center;
  margin: 1.4rem auto 0; padding: 0.7rem 1.4rem;
  border: 1px dashed var(--hairline-lit); border-radius: 12px;
  font-size: 0.78rem; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--paper-faint);
}
.booking-ref strong {
  font-family: var(--font-display); font-size: 1.25rem; letter-spacing: 0.06em;
  text-transform: none; color: var(--coral);
}

/* ====================== OPERATOR SIGN-UP ====================== */

/* Both of these were referenced from checkout.html before they existed —
   the "optional" tag and the validation message were rendering unstyled. */
.legend-opt {
  margin-left: 0.5rem; padding: 0.18rem 0.5rem; border-radius: 999px;
  border: 1px solid var(--hairline); background: rgba(251,246,241,0.04);
  font-family: var(--font-body); font-size: 0.68rem; font-weight: 500;
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--paper-faint);
  vertical-align: middle;
}
.form-error {
  margin: 0 0 1.25rem; padding: 0.9rem 1.1rem; border-radius: 9px;
  border: 1px solid var(--coral); background: rgba(255,107,53,0.1);
  font-size: 0.9rem; color: var(--paper);
}
.form-error[hidden] { display: none; }

.op-signup { max-width: 720px; margin: 0 auto; }
.op-signup .page-head { max-width: none; }

.op-why {
  display: grid; gap: 1px; margin: 0 0 3rem;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  background: var(--hairline); border: 1px solid var(--hairline);
  border-radius: 14px; overflow: hidden;
}
.op-why > div { background: var(--ink-soft); padding: 1.4rem; }
.op-why h3 { margin: 0 0 0.5rem; font-size: 1rem; font-weight: 700; }
.op-why p { margin: 0; font-size: 0.9rem; line-height: 1.6; color: var(--paper-dim); }

@media (max-width: 620px) {
  .op-signup .form-grid { grid-template-columns: 1fr; }
}

/* ============================================================
   PRE-LAUNCH LANDING PAGE (index.html while booking is closed)

   One button. Everything else appears only once someone has decided to
   press it. Scoped under .hero-soon / .join-* so removing the holding page
   at launch means deleting this block and nothing else.
   ============================================================ */

.hero-soon { padding-bottom: clamp(4rem, 9vw, 7rem); }
/* Clears the fixed nav so the badge never tucks under the wordmark. */
.hero-soon .hero-type { padding-top: 5.5rem; }
.hero-soon .hero-sub { max-width: 44ch; margin-left: auto; margin-right: auto; }
/* The booking site's hero size is tuned for one short word ("adventure?").
   "travel journey." is two, and at 9.5rem it wraps into a wall. Scaled down
   so it holds one line on a laptop and stays a headline, not a barricade. */
.hero-soon .hero-type h1 { font-size: clamp(2.5rem, 1rem + 5.6vw, 5.6rem); }
.hero-soon .hero-type h1 .key { text-wrap: balance; }
/* .lede is sized in em of the headline, so shrinking the headline shrank the
   first line to near-caption size. Pin it to its own scale. */
.hero-soon .hero-type h1 .lede {
  font-size: clamp(1rem, 0.75rem + 1vw, 1.45rem); margin-bottom: 0.5em;
}

.soon-badge {
  display: inline-flex; align-items: center; gap: 0.5rem;
  margin-bottom: 1.4rem; padding: 0.4rem 0.9rem 0.4rem 0.75rem;
  border-radius: 999px; border: 1px solid rgba(255,107,53,0.45);
  background: rgba(255,107,53,0.12);
  font-size: 0.72rem; font-weight: 600; letter-spacing: 0.14em;
  text-transform: uppercase; color: #FFB694;
}
.soon-badge::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%;
  background: var(--coral); flex: none;
  animation: soon-pulse 2.4s ease-in-out infinite;
}
@keyframes soon-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%      { opacity: 0.35; transform: scale(0.72); }
}
@media (prefers-reduced-motion: reduce) { .soon-badge::before { animation: none; } }

/* ---- the dock ---- */
/* A fixed min-height so revealing the form doesn't shove the page down and
   move the thing the visitor is looking at. */
.join-dock {
  width: min(560px, 100%); margin: 0 auto; text-align: center;
  min-height: 150px; display: flex; flex-direction: column; justify-content: center;
}

.btn-join {
  align-self: center;
  border: none; border-radius: 999px; cursor: pointer;
  padding: 1.05rem 2.5rem;
  background: var(--coral); color: #fff;
  font-family: var(--font-display); font-size: 1.02rem; font-weight: 700;
  letter-spacing: -0.01em;
  box-shadow: 0 14px 34px -12px rgba(255,107,53,0.7);
  transition: background 0.18s ease, transform 0.12s ease;
}
.btn-join:hover { background: var(--coral-deep); }
.btn-join:active { transform: translateY(1px); }
.btn-join:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
.btn-join[hidden] { display: none !important; }

/* ---- the revealed pill ---- */
.join-form[hidden] { display: none !important; }
.join-form { animation: join-in 0.22s ease both; }
@keyframes join-in {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) { .join-form { animation: none; } }

/* Light pill against the dark hero — the one bright object on the screen,
   so there is no question about where to type. */
.join-pill {
  display: flex; align-items: center; gap: 0.25rem;
  background: var(--paper); border-radius: 999px;
  padding: 6px 6px 6px 1.35rem;
  box-shadow: 0 18px 44px -16px rgba(10,6,4,0.8);
}
.join-pill input {
  flex: 1 1 0; min-width: 0; width: 100%;
  border: 0; background: transparent; padding: 0.72rem 0.35rem;
  font-family: var(--font-body); font-size: 0.96rem; color: #140D0A;
}
.join-pill input::placeholder { color: rgba(20,13,10,0.42); }
.join-pill input:focus { outline: none; }
.join-pill input.field-error { box-shadow: none; }
.join-pill input.field-error::placeholder { color: rgba(196,73,28,0.8); }

.join-sep { width: 1px; height: 24px; background: rgba(20,13,10,0.14); flex: none; }

.join-go {
  flex: none; width: 46px; height: 46px; border-radius: 50%;
  border: none; cursor: pointer; background: var(--coral); color: #fff;
  font-size: 1.15rem; line-height: 1;
  display: inline-flex; align-items: center; justify-content: center;
  transition: background 0.18s ease;
}
.join-go:hover:not(:disabled) { background: var(--coral-deep); }
.join-go:disabled { background: #C9BDB5; cursor: default; }
.join-go:focus-visible { outline: 2px solid #140D0A; outline-offset: 2px; }
.join-go .go-label { display: none; }

.join-form .form-error {
  margin: 0.85rem auto 0; max-width: 42ch;
  text-align: left; font-size: 0.86rem;
}

/* ---- the operator line ---- */
.join-alt {
  margin: 1.15rem 0 0; font-size: 0.86rem; color: var(--paper-faint);
}
.join-alt a {
  color: var(--paper-dim); text-decoration: underline;
  text-underline-offset: 3px; text-decoration-color: rgba(251,246,241,0.3);
}
.join-alt a:hover { color: var(--coral); text-decoration-color: var(--coral); }

/* ---- thank you ---- */
.join-done {
  animation: join-in 0.22s ease both; outline: none;
}
.join-done h2 {
  margin: 0.45rem 0 0; font-size: var(--step-2);
  font-weight: 800; letter-spacing: -0.02em;
}
.join-done p {
  margin: 0.65rem auto 0; max-width: 42ch;
  color: var(--paper-dim); font-size: 0.96rem; line-height: 1.6;
}
.join-done a { color: var(--coral); }
.join-mascot { display: block; width: 62px; height: auto; margin: 0 auto; }

/* The operator block further down carries an eyebrow the booking site's
   version doesn't have. */
#operators .eyebrow { display: block; margin-bottom: 0.6rem; }

@media (max-width: 560px) {
  .hero-soon .hero-type { padding-top: 4.25rem; }
  /* Two inputs side by side stops being readable well before this width,
     so the pill becomes a stacked card and the arrow becomes a full button. */
  .join-pill {
    flex-direction: column; align-items: stretch; gap: 0;
    border-radius: 20px; padding: 0.35rem 0.35rem 0.35rem;
  }
  .join-pill input { padding: 0.85rem 1rem; }
  .join-sep { width: auto; height: 1px; margin: 0 1rem; }
  /* Full width on mobile, so it reads as a button rather than a mystery
     arrow. The label is hidden on desktop where the pill shape and the
     circular arrow already say "submit". */
  .join-go {
    width: 100%; height: 48px; border-radius: 16px; margin-top: 0.35rem;
    gap: 0.5rem; font-family: var(--font-display); font-weight: 700;
    font-size: 0.95rem;
  }
  .join-go .go-label { display: inline; }
  /* Below 560px the pill becomes a stacked card, which is 195px tall against
     the collapsed state's 132px. The hero centres its type in the remaining
     space, so that 63px of growth would shove the headline up when the form
     opens. Reserving the taller height keeps the page still. */
  .join-dock { min-height: 195px; }
}