/* ============================================================================
   Components — buttons, the booking bar, cards, forms, accordion, badges.
   Depends on tokens.css, base.css, layout.css.
   ========================================================================= */

/* ── Buttons ───────────────────────────────────────────────────────────────
   Every button is a pill. The circular arrow that trails the primary button
   is the site's repeated affordance, taken straight from the references.
   ----------------------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  padding: 0.875rem var(--space-6);
  /* Fixed heights per size. Without these, a button containing the circular
     arrow was 28px taller than a plain one beside it, so pairs like
     "Book parking" + "See how it works" sat at different heights. */
  min-height: 2.875rem;
  border-radius: var(--radius-pill);
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: var(--weight-semibold);
  line-height: 1.2;
  letter-spacing: 0;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  border: 1px solid transparent;
  transition:
      background-color var(--duration-fast) var(--ease-out),
      border-color     var(--duration-fast) var(--ease-out),
      color            var(--duration-fast) var(--ease-out),
      box-shadow       var(--duration-base) var(--ease-out),
      transform        var(--duration-base) var(--ease-out);
}

.btn:disabled,
.btn[aria-disabled="true"] {
  opacity: 0.55;
  cursor: not-allowed;
  pointer-events: none;
}

.btn__arrow {
  display: grid;
  place-items: center;
  width: 1.75rem;
  height: 1.75rem;
  /* Pulled toward the edge so a trailing circular icon reads as optically
     centred rather than floating. On the scale, and re-tuned per size below —
     the old flat -0.5rem was calibrated for the default button and left the
     large one looking lopsided. */
  margin-right: calc(var(--space-2) * -1);
  border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, 0.18);
  flex-shrink: 0;
  transition: transform var(--duration-base) var(--ease-spring), background-color var(--duration-fast) var(--ease-out);
}

.btn__arrow svg { width: 0.85rem; height: 0.85rem; }
.btn:hover .btn__arrow { transform: translateX(3px); }

.btn--primary {
  background: var(--navy-900);
  color: var(--on-dark);
  box-shadow: var(--shadow-sm);
}

.btn--primary:hover {
  background: var(--navy-700);
  color: var(--on-dark);
  box-shadow: var(--shadow-lift);
  transform: translateY(-1px);
}

.btn--action { background: var(--action); color: var(--on-dark); }
.btn--action:hover { background: var(--action-hover); color: var(--on-dark); transform: translateY(-1px); }

.btn--secondary {
  background: var(--paper);
  color: var(--ink);
  border-color: var(--line-strong);
}

.btn--secondary:hover { background: var(--sky-50); border-color: var(--action); color: var(--action); }
.btn--secondary .btn__arrow { background: var(--sky-100); color: var(--navy-900); }

/* Outlined, for use over photography */
.btn--ghost {
  background: rgba(255, 255, 255, 0.1);
  color: var(--on-dark);
  border-color: rgba(255, 255, 255, 0.34);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.btn--ghost:hover { background: rgba(255, 255, 255, 0.2); color: var(--on-dark); border-color: rgba(255,255,255,0.55); }

.btn--quiet { background: transparent; color: var(--action); padding-inline: var(--space-3); }
.btn--quiet:hover { background: var(--action-subtle); }

.btn--danger { background: var(--danger); color: #fff; }
.btn--danger:hover { background: #92150C; color: #fff; }

.btn--sm {
  padding: 0.5rem var(--space-4);
  min-height: 2.25rem;
  font-size: var(--text-sm);
  gap: var(--space-2);
}

.btn--sm .btn__arrow {
  width: 1.375rem;
  height: 1.375rem;
  margin-right: calc(var(--space-1) * -1);
}

.btn--lg {
  padding: 1rem var(--space-8);
  min-height: 3.25rem;
  font-size: var(--text-md);
}

.btn--lg .btn__arrow { margin-right: calc(var(--space-3) * -1); }

.btn--block { width: 100%; }

.btn--book { padding-inline: var(--space-5); }

/* Circular icon button — on cards, carousels and photo tiles. */
.arrow-btn {
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: var(--radius-pill);
  background: var(--paper);
  color: var(--navy-900);
  border: 1px solid var(--line);
  flex-shrink: 0;
  cursor: pointer;
  transition:
      background-color var(--duration-fast) var(--ease-out),
      color var(--duration-fast) var(--ease-out),
      transform var(--duration-base) var(--ease-spring);
}

.arrow-btn svg { width: 1rem; height: 1rem; }
.arrow-btn:hover { background: var(--navy-900); color: var(--on-dark); border-color: var(--navy-900); }
.arrow-btn--on-photo { background: rgba(255,255,255,0.92); border-color: transparent; }


/* ── Booking bar ───────────────────────────────────────────────────────────
   The focal point of the entire site. Tabs clip to its top edge; the bar
   itself straddles the hero's bottom edge.
   ----------------------------------------------------------------------- */

.booking-bar {
  position: relative;
  z-index: var(--z-barbar);
  max-width: var(--container);
  margin-inline: auto;
  /* Pulls the bar up so it sits half on the hero photo, half on the page.
     Uses the shared --bar-overlap token, which the hero's bottom padding also
     references — previously the two were separate literals and the compact
     hero (40px padding vs a 48px pull) overlapped 8px more than intended. */
  margin-top: calc(-1 * var(--bar-overlap));
  padding-inline: var(--gutter);
}

.booking-bar--flat { margin-top: var(--space-8); }

.booking-bar__tabs {
  display: flex;
  gap: var(--space-1);
  padding-left: var(--space-2);
}

.booking-tab {
  position: relative;
  padding: var(--space-3) var(--space-6) calc(var(--space-3) + 6px);
  margin-bottom: -6px;
  border-radius: var(--radius-md) var(--radius-md) 0 0;
  font-size: var(--text-base);
  font-weight: var(--weight-semibold);
  color: var(--ink-muted);
  background: rgba(255, 255, 255, 0.72);
  cursor: pointer;
  transition: background-color var(--duration-fast) var(--ease-out), color var(--duration-fast) var(--ease-out);
}

.booking-tab:hover { color: var(--ink); background: rgba(255, 255, 255, 0.9); }

.booking-tab[aria-selected="true"] {
  background: var(--paper);
  color: var(--navy-900);
}

.booking-bar__body {
  background: var(--paper);
  border-radius: var(--radius-lg);
  /* Square off the top-left corner so the active tab merges into the bar. */
  border-top-left-radius: var(--radius-xs);
  box-shadow: var(--shadow-bar);
  padding: var(--space-2);
}

/* ── Booking form grid ────────────────────────────────────────────────────
   Three layouts, not two. The row of four only appears once there is
   genuinely room for it:

     under 40rem   one field per row
     40–64rem      airport full width, the two date fields side by side,
                   button full width
     64rem and up  the single row of four

   The old single breakpoint at 56rem was about 90px too early: four columns
   need roughly 920px once the native date and time inputs are accounted for,
   and only ~830px is available inside the container at 896px. Between those
   widths the date fields were being squeezed and clipping their own text.
   ---------------------------------------------------------------------- */

.booking-form {
  display: grid;
  gap: var(--space-1);
  grid-template-columns: 1fr;
}

@media (min-width: 40rem) and (max-width: 63.999rem) {
  .booking-form {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .booking-form > [data-field="airport"],
  .booking-form > .booking-bar__submit { grid-column: 1 / -1; }
  .booking-bar__submit { padding-top: var(--space-2); }
}

@media (min-width: 64rem) {
  .booking-form {
    grid-template-columns: minmax(9.5rem, 0.85fr) minmax(0, 1.3fr) minmax(0, 1.3fr) minmax(11.5rem, auto);
    align-items: stretch;
    gap: var(--space-2);
  }
}

/* The email field on the Manage booking tab is wider than the reference field
   beside it — but ONLY once there is more than one column to span.
   This used to be an inline `grid-column: span 2`, which on a phone told a
   single-column grid to span two columns. CSS Grid obliged by creating an
   implicit second column, widening the row beyond the viewport. */
@media (min-width: 40rem) {
  .booking-field--wide { grid-column: span 2; }
}

.booking-field {
  display: grid;
  gap: var(--space-2);
  align-content: center;
  /* Even padding on all four sides. It was 12px vertical against 16px
     horizontal, which made the label sit visibly off-centre in the field. */
  padding: var(--space-4);
  border-radius: var(--radius-md);
  transition: background-color var(--duration-fast) var(--ease-out);
  min-width: 0;
}

.booking-field:hover,
.booking-field:focus-within { background: var(--sky-50); }

/* ── Separators ───────────────────────────────────────────────────────────
   Stacked layouts get a horizontal rule between fields; the wide layout gets
   a vertical one centred in the gutter.
   ---------------------------------------------------------------------- */

/* Stacked single column: a rule between every field. */
@media (max-width: 39.999rem) {
  .booking-field + .booking-field {
    border-top: 1px solid var(--line);
    border-radius: 0;
  }
}

/* Two-column tablet: a rule between every field would cut awkwardly down the
   middle of the side-by-side date pair, so only the row starts carry one. */
@media (min-width: 40rem) and (max-width: 63.999rem) {
  .booking-form > [data-field="from"],
  .booking-form > [data-field="to"] {
    border-top: 1px solid var(--line);
    border-radius: 0;
  }
}

@media (min-width: 64rem) {
  .booking-field + .booking-field { position: relative; }
  .booking-field + .booking-field::before {
    content: "";
    position: absolute;
    /* Centred in the 8px gutter rather than sitting on the field's own edge.
       Previously it sat flush left, leaving 24px of space on one side of the
       rule and 16px on the other. */
    left: calc(var(--space-2) / -2);
    top: 20%;
    bottom: 20%;
    width: 1px;
    background: var(--line);
  }
}

.booking-field__label {
  font-size: var(--text-2xs);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--ink-muted);
}

.booking-field__control {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  min-width: 0;
}

.booking-field__control > svg {
  width: 1.05rem;
  height: 1.05rem;
  color: var(--action);
  flex-shrink: 0;
}

.booking-field__inputs {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  min-width: 0;
  flex: 1;
}

/* The inputs themselves are deliberately chrome-free: the field container
   provides the affordance, so the bar reads as one object rather than a row
   of boxes. */
.booking-input {
  width: 100%;
  min-width: 0;
  border: none;
  background: transparent;
  padding: 0;
  font-family: var(--font-body);
  font-size: var(--text-md);
  font-weight: var(--weight-semibold);
  color: var(--ink);
  cursor: pointer;
}

.booking-input:focus { outline: none; }
.booking-input::-webkit-calendar-picker-indicator { cursor: pointer; opacity: 0.55; }
.booking-input::-webkit-calendar-picker-indicator:hover { opacity: 1; }

select.booking-input {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 1.25rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8' fill='none' stroke='%235C6B80' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right center;
  background-size: 0.7rem;
}

.booking-input--time { flex: 0 0 auto; width: auto; color: var(--ink-muted); }

.booking-bar__submit {
  display: grid;
  /* Inset less than the fields so the button reads as the primary action and
     stands slightly proud of them. 4px was arbitrary and left the button
     looking like it was bulging out of the bar. */
  padding: var(--space-2);
}

.booking-bar__submit .btn {
  height: 100%;
  /* Stops the CTA collapsing to text height in the stacked layouts. */
  min-height: 3rem;
}

/* Inline validation, tied to the field by aria-describedby. */
.booking-bar__error {
  display: none;
  align-items: flex-start;
  gap: var(--space-2);
  /* Left margin matches the field padding above it, so the message lines up
     with the field labels instead of sitting 4px adrift. */
  margin: var(--space-2) var(--space-4) var(--space-1);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  background: var(--danger-soft);
  color: var(--danger);
  font-size: var(--text-base);
  font-weight: var(--weight-medium);
}

.booking-bar__error[data-visible="true"] { display: flex; }
.booking-bar__error svg { width: 1.05rem; height: 1.05rem; flex-shrink: 0; margin-top: 0.15em; }

.booking-field.has-error { background: var(--danger-soft); }
.booking-field.has-error .booking-field__control > svg { color: var(--danger); }

/* Reassurance strip under the bar */
.booking-bar__assurances {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-3) var(--space-6);
  margin-top: var(--space-5);
  font-size: var(--text-base);
  color: var(--ink-muted);
}

.booking-bar__assurances li { display: inline-flex; align-items: center; gap: var(--space-2); }
.booking-bar__assurances svg { width: 1rem; height: 1rem; color: var(--verified); flex-shrink: 0; }


/* ── Floating hero chips ───────────────────────────────────────────────── */

.hero__chips {
  position: absolute;
  right: var(--gutter);
  top: calc(var(--header-h, 5.5rem) + var(--space-8));
  display: none;
  gap: var(--space-3);
  flex-direction: column;
  align-items: flex-end;
  z-index: var(--z-raised);
}

@media (min-width: 62rem) { .hero__chips { display: flex; } }

.float-chip {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-lg);
  background: rgba(255, 255, 255, 0.94);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: var(--shadow-lift);
  text-decoration: none;
  color: var(--ink);
  transition: transform var(--duration-base) var(--ease-out);
}

a.float-chip:hover { transform: translateY(-2px); color: var(--ink); }

.float-chip__label {
  font-size: var(--text-2xs);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--ink-muted);
}

.float-chip__value {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-tight);
  color: var(--navy-900);
  line-height: 1.1;
}

.float-chip__stars { display: flex; gap: 2px; color: var(--warm); }
.float-chip__stars svg { width: 0.9rem; height: 0.9rem; }


/* ── Trust strip ───────────────────────────────────────────────────────── */

.trust-strip {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--space-6) var(--space-10);
  padding-block: var(--space-8);
}

.trust-strip__item {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  color: var(--ink-muted);
  font-size: var(--text-base);
  font-weight: var(--weight-medium);
}

.trust-strip__item svg { width: 1.35rem; height: 1.35rem; color: var(--navy-900); opacity: 0.55; flex-shrink: 0; }


/* ── Cards ─────────────────────────────────────────────────────────────── */

.card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius-xl);
  overflow: hidden;
  transition: box-shadow var(--duration-base) var(--ease-out), transform var(--duration-base) var(--ease-out);
}

.card--link:hover { box-shadow: var(--shadow-lift); transform: translateY(-4px); }
.card__body { padding: var(--space-6); display: grid; gap: var(--space-3); align-content: start; flex: 1; }
.card__foot {
  padding: var(--space-5) var(--space-6);
  border-top: 1px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
}


/* Service card — photo, label bar, circular arrow, price. */

.service-card { display: flex; flex-direction: column; }

.service-card__media {
  position: relative;
  aspect-ratio: 4 / 3;
  background-color: var(--navy-900);
  background-image: var(--img-placeholder);
  background-size: cover;
  background-position: center;
}

.service-card__media[data-img="meet-and-greet"] { background-image: var(--img-service-meet, none), var(--img-placeholder); }
.service-card__media[data-img="park-and-ride"]  { background-image: var(--img-service-park, none), var(--img-placeholder); }
.service-card__media[data-img="short-stay"]     { background-image: var(--img-service-short, none), var(--img-placeholder); }
.service-card__media[data-img="long-stay"]      { background-image: var(--img-service-long, none), var(--img-placeholder); }

.service-card__badge {
  position: absolute;
  top: var(--space-4);
  left: var(--space-4);
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-pill);
  background: var(--warm);
  color: #3D1F00;
  font-size: var(--text-2xs);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
}

.service-card__title { font-size: var(--text-xl); color: var(--ink); }
.service-card__tagline { color: var(--ink-muted); font-size: var(--text-base); }

.service-card__price { display: grid; gap: 2px; }
.service-card__price-label {
  font-size: var(--text-2xs);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--ink-muted);
}

.price {
  font-family: var(--font-display);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-display);
  color: var(--navy-900);
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.price--lg { font-size: var(--text-3xl); }
.price--md { font-size: var(--text-2xl); }
.price--sm { font-size: var(--text-xl); }
.price__unit {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  color: var(--ink-muted);
  letter-spacing: 0;
}

/* Whole-card link overlay: keeps one tab stop per card while leaving the
   arrow button visually present. */
.stretched-link::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
}


/* Photo tile — used in the bento grid. Label bottom-left, arrow bottom-right. */

.photo-tile {
  position: relative;
  display: flex;
  align-items: flex-end;
  border-radius: var(--radius-xl);
  overflow: hidden;
  background-color: var(--navy-900);
  background-image: var(--img-placeholder);
  background-size: cover;
  background-position: center;
  color: var(--on-dark);
  text-decoration: none;
  isolation: isolate;
  transition: transform var(--duration-base) var(--ease-out);
}

.photo-tile[data-img="compound"] { background-image: var(--img-bento-compound), var(--img-placeholder); }
.photo-tile[data-img="handover"] { background-image: var(--img-bento-handover), var(--img-placeholder); }
.photo-tile[data-img="shuttle"]  { background-image: var(--img-bento-shuttle),  var(--img-placeholder); }

/* The Parking Options page renders each service as a large photo-tile keyed by
   its slug, so those need rules too — they share the same four files as the
   smaller service cards above. */
.photo-tile[data-img="meet-and-greet"] { background-image: var(--img-service-meet),  var(--img-placeholder); }
.photo-tile[data-img="park-and-ride"]  { background-image: var(--img-service-park),  var(--img-placeholder); }
.photo-tile[data-img="short-stay"]     { background-image: var(--img-service-short), var(--img-placeholder); }
.photo-tile[data-img="long-stay"]      { background-image: var(--img-service-long),  var(--img-placeholder); }

.photo-tile::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--scrim-card);
}

a.photo-tile:hover { transform: translateY(-3px); color: var(--on-dark); }

.photo-tile__inner {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-4);
  width: 100%;
  padding: var(--space-6);
}

.photo-tile__label { display: grid; gap: var(--space-1); }
.photo-tile__title { color: var(--on-dark); font-size: var(--text-xl); }
.photo-tile__note { color: var(--on-dark-muted); font-size: var(--text-base); max-width: 32ch; }


/* ── Statement section ─────────────────────────────────────────────────── */

.statement {
  max-width: 30ch;
  margin-inline: auto;
  text-align: center;
  font-family: var(--font-display);
  font-size: var(--text-3xl);
  font-weight: var(--weight-semibold);
  line-height: 1.2;
  letter-spacing: var(--tracking-display);
  color: var(--navy-900);
  text-wrap: balance;
}

.statement em { font-style: normal; color: var(--action); }


/* ── Numbered steps ────────────────────────────────────────────────────────
   Used only where the content is genuinely a sequence.
   ----------------------------------------------------------------------- */

.steps { display: grid; gap: var(--space-8); counter-reset: step; }

@media (min-width: 52rem) {
  .steps--row { grid-template-columns: repeat(3, 1fr); gap: var(--space-6); }
}

.step { display: grid; gap: var(--space-3); align-content: start; position: relative; }

.step__num {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-wide);
  color: var(--warm);
}

.step__title { font-size: var(--text-xl); }
.band--dark .step__title { color: var(--on-dark); }
.step__text { color: var(--ink-muted); font-size: var(--text-base); }
.band--dark .step__text { color: var(--on-dark-muted); }

/* Timeline variant on the How It Works page */
.timeline { display: grid; gap: 0; }

.timeline__item {
  position: relative;
  display: grid;
  gap: var(--space-2);
  padding: 0 0 var(--space-8) var(--space-10);
}

.timeline__item::before {
  content: "";
  position: absolute;
  left: 0.6875rem;
  top: 1.5rem;
  bottom: 0;
  width: 2px;
  background: var(--line);
}

.timeline__item:last-child { padding-bottom: 0; }
.timeline__item:last-child::before { display: none; }

.timeline__dot {
  position: absolute;
  left: 0;
  top: 0.25rem;
  width: 1.5rem;
  height: 1.5rem;
  border-radius: var(--radius-pill);
  background: var(--navy-900);
  color: var(--on-dark);
  display: grid;
  place-items: center;
  font-family: var(--font-mono);
  font-size: 0.625rem;
  font-weight: var(--weight-medium);
}


/* ── Review cards ──────────────────────────────────────────────────────── */

.review-card {
  display: grid;
  gap: var(--space-4);
  align-content: start;
  padding: var(--space-6);
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius-xl);
}

.stars { display: flex; gap: 2px; color: var(--warm); }
.stars svg { width: 1rem; height: 1rem; }
.stars--empty { color: var(--line-strong); }

.review-card__title { font-size: var(--text-lg); font-family: var(--font-display); font-weight: var(--weight-semibold); color: var(--ink); }
.review-card__body { color: var(--ink-body); font-size: var(--text-base); line-height: var(--leading-relaxed); }

.review-card__foot {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding-top: var(--space-4);
  border-top: 1px solid var(--line);
  margin-top: auto;
}

.review-card__avatar {
  width: 2.5rem;
  height: 2.5rem;
  border-radius: var(--radius-pill);
  background: var(--sky-100);
  color: var(--navy-900);
  display: grid;
  place-items: center;
  font-weight: var(--weight-bold);
  font-size: var(--text-base);
  flex-shrink: 0;
}

.review-card__who { display: grid; gap: 1px; min-width: 0; }
.review-card__name { font-weight: var(--weight-semibold); color: var(--ink); font-size: var(--text-base); }
.review-card__meta { font-size: var(--text-sm); color: var(--ink-muted); }

/* Rating summary with distribution bars */
.rating-summary { display: grid; gap: var(--space-6); }

@media (min-width: 48rem) {
  .rating-summary { grid-template-columns: auto 1fr; gap: var(--space-10); align-items: center; }
}

.rating-summary__score {
  font-family: var(--font-display);
  font-size: var(--text-5xl);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-display);
  color: var(--navy-900);
  line-height: 1;
}

.rating-bars { display: grid; gap: var(--space-2); }
.rating-bar { display: grid; grid-template-columns: 3.5rem 1fr 3rem; align-items: center; gap: var(--space-3); font-size: var(--text-sm); color: var(--ink-muted); }

.rating-bar__track { height: 0.5rem; border-radius: var(--radius-pill); background: var(--sky-100); overflow: hidden; }
.rating-bar__fill { height: 100%; border-radius: var(--radius-pill); background: var(--warm); }


/* ── Accordion (FAQs) ──────────────────────────────────────────────────────
   Native <details>/<summary>: keyboard accessible with no JavaScript, and
   correct for assistive technology out of the box.
   Hairline rules, no numbering — an FAQ is not a sequence.
   ----------------------------------------------------------------------- */

.accordion { display: grid; }

.accordion__item { border-top: 1px solid var(--line); }
.accordion__item:last-child { border-bottom: 1px solid var(--line); }

.accordion__item > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-6);
  padding: var(--space-6) 0;
  cursor: pointer;
  list-style: none;
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-tight);
  color: var(--ink);
  transition: color var(--duration-fast) var(--ease-out);
}

.accordion__item > summary::-webkit-details-marker { display: none; }
.accordion__item > summary:hover { color: var(--action); }

.accordion__chevron {
  display: grid;
  place-items: center;
  width: 2.25rem;
  height: 2.25rem;
  flex-shrink: 0;
  border-radius: var(--radius-pill);
  background: var(--sky-50);
  color: var(--navy-900);
  transition: transform var(--duration-base) var(--ease-out), background-color var(--duration-fast) var(--ease-out);
}

.accordion__chevron svg { width: 0.85rem; height: 0.85rem; }
.accordion__item[open] .accordion__chevron { transform: rotate(180deg); background: var(--navy-900); color: var(--on-dark); }

.accordion__panel { padding-bottom: var(--space-6); max-width: var(--container-text); }

.accordion__group-title {
  margin-top: var(--space-10);
  margin-bottom: var(--space-2);
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--action);
}

.accordion__group-title:first-child { margin-top: 0; }


/* ── Comparison table ──────────────────────────────────────────────────── */

.table-wrap {
  overflow-x: auto;
  border: 1px solid var(--line);
  border-radius: var(--radius-xl);
  background: var(--paper);
  -webkit-overflow-scrolling: touch;
  /* Lets a horizontal swipe inside the table scroll the table without also
     dragging the page sideways. */
  overscroll-behavior-x: contain;
}

/* A soft fade on the right edge, so it is visible that the table continues
   past the screen rather than simply being cut off. Only where the table
   actually overflows. */
@media (max-width: 47.999rem) {
  .table-wrap {
    background-image: linear-gradient(to right, transparent calc(100% - 2.5rem), rgba(15, 37, 87, 0.06) 100%);
    background-attachment: local, scroll;
  }
}

.data-table { width: 100%; border-collapse: collapse; min-width: 42rem; }

.data-table th,
.data-table td {
  padding: var(--space-4) var(--space-5);
  text-align: left;
  border-bottom: 1px solid var(--line);
  font-size: var(--text-base);
  vertical-align: middle;
}

.data-table thead th {
  background: var(--sky-50);
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--ink-muted);
  white-space: nowrap;
}

.data-table tbody tr:last-child td { border-bottom: none; }
.data-table tbody tr:hover { background: var(--sky-50); }
.data-table td.is-numeric, .data-table th.is-numeric { text-align: right; font-variant-numeric: tabular-nums; }

.tick   { color: var(--verified); }
.cross  { color: var(--ink-faint); }
.tick svg, .cross svg { width: 1.15rem; height: 1.15rem; }


/* ── Badges and pills ──────────────────────────────────────────────────── */

.badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 0.3rem var(--space-3);
  border-radius: var(--radius-pill);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  line-height: 1.3;
  white-space: nowrap;
}

.badge svg { width: 0.85rem; height: 0.85rem; }

.badge--sky      { background: var(--sky-100);      color: var(--navy-900); }
.badge--verified { background: var(--verified-soft); color: var(--verified); }
.badge--warm     { background: var(--warm-soft);     color: var(--warm-ink); }
.badge--danger   { background: var(--danger-soft);   color: var(--danger); }
.badge--muted    { background: var(--mist);          color: var(--ink-muted); }


/* ── Feature list ──────────────────────────────────────────────────────── */

.feature-list { display: grid; gap: var(--space-3); }

.feature-list li {
  display: grid;
  grid-template-columns: 1.35rem 1fr;
  gap: var(--space-3);
  align-items: start;
  font-size: var(--text-base);
  color: var(--ink-body);
}

.feature-list svg { width: 1.35rem; height: 1.35rem; color: var(--verified); margin-top: 0.1em; }
.band--dark .feature-list li { color: var(--on-dark-muted); }
.band--dark .feature-list svg { color: var(--warm); }


/* ── Forms ─────────────────────────────────────────────────────────────── */

.form { display: grid; gap: var(--space-5); }

.form-row { display: grid; gap: var(--space-5); }

@media (min-width: 40rem) {
  .form-row--2 { grid-template-columns: repeat(2, 1fr); }
  .form-row--3 { grid-template-columns: repeat(3, 1fr); }
}

.field { display: grid; gap: var(--space-2); min-width: 0; }

.field__label {
  font-size: var(--text-base);
  font-weight: var(--weight-semibold);
  color: var(--ink);
}

.field__label .req { color: var(--danger); margin-left: 2px; }
.field__hint { font-size: var(--text-sm); color: var(--ink-muted); }

.input,
.textarea,
.select {
  width: 100%;
  padding: 0.8125rem var(--space-4);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-md);
  background: var(--paper);
  color: var(--ink);
  font-size: var(--text-md);
  font-family: var(--font-body);
  transition: border-color var(--duration-fast) var(--ease-out), box-shadow var(--duration-fast) var(--ease-out);
}

.input::placeholder, .textarea::placeholder { color: var(--ink-faint); }

.input:focus, .textarea:focus, .select:focus {
  outline: none;
  border-color: var(--action);
  box-shadow: var(--ring);
}

.textarea { min-height: 8rem; resize: vertical; line-height: var(--leading-relaxed); }

.select {
  appearance: none;
  -webkit-appearance: none;
  padding-right: var(--space-10);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8' fill='none' stroke='%235C6B80' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--space-4) center;
  background-size: 0.7rem;
}

.input--mono { font-family: var(--font-mono); text-transform: uppercase; letter-spacing: 0.06em; }

.field.has-error .input,
.field.has-error .textarea,
.field.has-error .select { border-color: var(--danger); background: var(--danger-soft); }

.field__error {
  display: none;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  color: var(--danger);
}

.field.has-error .field__error { display: flex; }
.field__error svg { width: 0.95rem; height: 0.95rem; flex-shrink: 0; }

/* Checkbox and radio */
.check { display: grid; grid-template-columns: auto 1fr; gap: var(--space-3); align-items: start; cursor: pointer; }
.check input { width: 1.15rem; height: 1.15rem; margin-top: 0.15em; accent-color: var(--action); cursor: pointer; }
.check__text { font-size: var(--text-base); color: var(--ink-body); }

/* Honeypot — invisible to people, tempting to bots. Not display:none, which
   some bots specifically skip. */
.hp-field {
  position: absolute !important;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* Selectable option card, used to pick a service at checkout */
.option-card {
  position: relative;
  display: grid;
  gap: var(--space-3);
  padding: var(--space-5);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-lg);
  background: var(--paper);
  cursor: pointer;
  transition: border-color var(--duration-fast) var(--ease-out), box-shadow var(--duration-base) var(--ease-out);
}

.option-card:hover { border-color: var(--action); }
.option-card:has(input:checked) { border-color: var(--action); box-shadow: var(--ring); background: var(--action-subtle); }
.option-card:has(input:focus-visible) { outline: 2px solid var(--action); outline-offset: 2px; }
.option-card input { position: absolute; opacity: 0; pointer-events: none; }


/* ── Alerts ────────────────────────────────────────────────────────────── */

.alert {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--space-4);
  padding: var(--space-5);
  border-radius: var(--radius-lg);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
}

.alert svg { width: 1.25rem; height: 1.25rem; flex-shrink: 0; margin-top: 0.1em; }
.alert__title { font-weight: var(--weight-semibold); margin-bottom: var(--space-1); }

.alert--info    { background: var(--sky-50);        color: var(--navy-900); }
.alert--success { background: var(--verified-soft); color: var(--verified); }
.alert--warning { background: var(--warm-soft);     color: var(--warm-ink); }
.alert--error   { background: var(--danger-soft);   color: var(--danger); }


/* ── CTA band ──────────────────────────────────────────────────────────── */

.cta-band {
  position: relative;
  margin-inline: var(--inset);
  border-radius: var(--radius-2xl);
  background:
      radial-gradient(100% 160% at 88% 12%, var(--navy-700) 0%, transparent 58%),
      var(--navy-900);
  overflow: hidden;
}

.cta-band__inner {
  display: grid;
  gap: var(--space-6);
  /* Fluid: a fixed 64px top and bottom took roughly a third of a 375px
     screen for what is a two-line call to action. */
  padding-block: var(--band-y);
  padding-inline: var(--space-2);
  justify-items: center;
  text-align: center;
}

.cta-band__title { color: var(--on-dark); font-size: var(--text-3xl); max-width: 20ch; }
.cta-band__text { color: var(--on-dark-muted); max-width: 48ch; font-size: var(--text-lg); }
.cta-band__actions { display: flex; flex-wrap: wrap; gap: var(--space-3); justify-content: center; }


/* ── Empty state ───────────────────────────────────────────────────────── */

.empty-state {
  display: grid;
  gap: var(--space-4);
  justify-items: center;
  text-align: center;
  padding: var(--band-y) var(--space-6);
  background: var(--paper);
  border: 1px dashed var(--line-strong);
  border-radius: var(--radius-xl);
}

.empty-state__icon {
  display: grid;
  place-items: center;
  width: 3.5rem;
  height: 3.5rem;
  border-radius: var(--radius-pill);
  background: var(--sky-100);
  color: var(--navy-900);
}

.empty-state__icon svg { width: 1.5rem; height: 1.5rem; }


/* ── Summary panel (checkout, confirmation, manage booking) ────────────── */

.summary {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius-xl);
  overflow: hidden;
}

.summary__head {
  padding: var(--space-5) var(--space-6);
  background: var(--sky-50);
  border-bottom: 1px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
}

.summary__title { font-size: var(--text-lg); font-family: var(--font-display); font-weight: var(--weight-semibold); }
.summary__body { padding: var(--space-6); display: grid; gap: var(--space-4); }

.summary-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-5);
  font-size: var(--text-base);
}

.summary-row__label { color: var(--ink-muted); }
.summary-row__value { font-weight: var(--weight-semibold); color: var(--ink); text-align: right; }

.summary__total {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-5);
  padding: var(--space-5) var(--space-6);
  border-top: 1px solid var(--line);
  background: var(--mist);
}

.summary__total-label { font-weight: var(--weight-semibold); color: var(--ink); }


/* ── Scroll reveal ─────────────────────────────────────────────────────────
   Elements marked data-reveal start slightly offset and fade in when they
   enter the viewport. reveal.js adds `is-visible`. If JavaScript never runs,
   the fallback below keeps everything visible.
   ----------------------------------------------------------------------- */

[data-reveal] {
  opacity: 1;
  transform: none;
}

.js [data-reveal] {
  opacity: 0;
  transform: translateY(18px);
  transition:
      opacity   var(--duration-slow) var(--ease-out),
      transform var(--duration-slow) var(--ease-out);
}

.js [data-reveal].is-visible { opacity: 1; transform: none; }

.js [data-reveal-delay="1"] { transition-delay: 70ms; }
.js [data-reveal-delay="2"] { transition-delay: 140ms; }
.js [data-reveal-delay="3"] { transition-delay: 210ms; }
.js [data-reveal-delay="4"] { transition-delay: 280ms; }

@media (prefers-reduced-motion: reduce) {
  .js [data-reveal] { opacity: 1; transform: none; transition: none; }
}


/* ── Hero load sequence ────────────────────────────────────────────────────
   One orchestrated moment on the home page: eyebrow, headline, lead, actions,
   then the booking bar rising into place.
   ----------------------------------------------------------------------- */

@media (prefers-reduced-motion: no-preference) {
  .js .hero--animate .hero__content > * {
    animation: hero-rise var(--duration-hero) var(--ease-out) backwards;
  }
  .js .hero--animate .hero__content > *:nth-child(1) { animation-delay: 60ms; }
  .js .hero--animate .hero__content > *:nth-child(2) { animation-delay: 140ms; }
  .js .hero--animate .hero__content > *:nth-child(3) { animation-delay: 220ms; }
  .js .hero--animate .hero__content > *:nth-child(4) { animation-delay: 300ms; }

  .js .hero--animate ~ .booking-bar {
    animation: hero-rise var(--duration-hero) var(--ease-out) 360ms backwards;
  }

  .js .hero--animate .float-chip {
    animation: hero-fade var(--duration-hero) var(--ease-out) 480ms backwards;
  }
}

@keyframes hero-rise {
  from { opacity: 0; transform: translateY(22px); }
  to   { opacity: 1; transform: none; }
}

@keyframes hero-fade {
  from { opacity: 0; transform: translateY(-10px); }
  to   { opacity: 1; transform: none; }
}