.hero {
  margin-top: 0.8rem;
  margin-bottom: 2rem;
}

.hero-layout {
  display: grid;
  grid-template-columns: 1.35fr 0.8fr;
  gap: 1rem;
  align-items: start;
}

.hero-copy,
.card {
  background: linear-gradient(160deg, var(--surface) 0%, var(--surface-tint-alt41) 100%);
  border-radius: var(--radius-lg);
  padding: 1.45rem;
  box-shadow: var(--shadow-soft);
  border: 1px solid var(--surface-tint-alt27);
}

.hero-copy h1 {
  font-size: clamp(2.1rem, 6vw, 4.1rem);
  line-height: 0.95;
  margin: 0.2rem 0 0.9rem;
  letter-spacing: -0.03em;
  max-width: 13ch;
}

.hero-copy p { color: var(--muted); }
.hero-actions { display: flex; gap: 0.75rem; margin-top: 1rem; flex-wrap: wrap; }

.hero-proof {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.7rem;
  margin-top: 1rem;
}

.proof-item {
  background: var(--surface-tint-alt31);
  border: 1px solid var(--surface-tint-alt20);
  border-radius: 12px;
  padding: 0.7rem;
}

.proof-item strong {
  display: block;
  font-size: 1.05rem;
}

.proof-item span {
  font-size: 0.78rem;
  color: var(--muted);
}

.btn {
  border: 1px solid transparent;
  border-radius: 999px;
  padding: 0.68rem 1.1rem;
  font-weight: 600;
  cursor: pointer;
  transition: transform 200ms ease, box-shadow 200ms ease, border-color 200ms ease;
}

.btn-accent {
  background: linear-gradient(130deg, var(--accent), var(--accent-warm-alt4));
  color: var(--text-on-accent-alt3);
}

.btn-ghost {
  background: transparent;
  border-color: var(--surface-tint-alt16);
  color: var(--text);
}

.btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 10px 24px rgba(var(--primary-rgb), 0.14);
}

.btn-sm-hide {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.block { width: 100%; }

.booking-panel h2,
.quote-panel h2 { margin-top: 0; }

.booking-panel label,
.quote-panel label {
  display: block;
  font-size: 0.82rem;
  color: var(--muted);
  margin: 0.55rem 0 0.25rem;
}

.booking-panel input,
.booking-panel select,
.quote-panel input,
.quote-panel select {
  width: 100%;
  border: 1px solid var(--surface-tint-alt9);
  border-radius: 10px;
  padding: 0.6rem 0.62rem;
  background: var(--surface);
  font-family: inherit;
  font-size: inherit;
  color: var(--text);
}

/* Flatpickr alt-input inherits panel styles; hide the real hidden input */
.booking-panel input.flatpickr-input.form-control,
.quote-panel input.flatpickr-input.form-control {
  display: none !important;
}

/* Flatpickr calendar z-index above fixed navbar */
.flatpickr-calendar { z-index: 1100 !important; }

.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0.6rem; }

.pricing-preview {
  min-height: 2.2rem;
  margin: 0.6rem 0 0.8rem;
  color: var(--primary);
  font-weight: 700;
}

.status { color: var(--muted); font-size: 0.88rem; min-height: 1.2rem; }

.security-note {
  font-size: 0.76rem;
  color: var(--muted);
  margin-top: 0.6rem;
}

.trust-strip {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.7rem;
  margin: 1.4rem 0 2.2rem;
}

.trust-chip {
  background: var(--surface-tint-alt40);
  border: 1px solid var(--surface-tint-alt21);
  border-radius: 12px;
  padding: 0.8rem;
  color: var(--primary-deep-alt15);
  font-weight: 600;
}

.steps,
.why-us {
  margin: 2.4rem 0;
}

.portal-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.9rem;
  margin: 2.2rem 0;
}

.portal-card {
  background: var(--surface);
  border: 1px solid var(--surface-tint-alt7);
  border-radius: var(--radius-md);
  padding: 1.1rem;
  box-shadow: 0 10px 24px rgba(var(--ink-alt3-rgb), 0.06);
  transition: transform 220ms ease, box-shadow 220ms ease;
}

.portal-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 16px 30px rgba(var(--ink-alt3-rgb), 0.12);
}

.portal-card h3 {
  margin: 0.3rem 0 0.45rem;
}

.portal-card p {
  margin: 0;
  color: var(--muted);
}

.steps-grid,
.value-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.9rem;
}

.step-card,
.value-card {
  background: var(--surface);
  border: 1px solid var(--surface-tint-alt25);
  border-radius: var(--radius-md);
  padding: 1rem;
  box-shadow: 0 8px 20px rgba(var(--primary-rgb), 0.06);
}

.step-index {
  display: inline-flex;
  padding: 0.2rem 0.55rem;
  border-radius: 999px;
  background: var(--surface-tint-alt29);
  color: var(--primary);
  font-size: 0.75rem;
  font-weight: 700;
}

.step-card h3,
.value-card h3 {
  margin: 0.7rem 0 0.45rem;
}

.step-card p,
.value-card p {
  margin: 0;
  color: var(--muted);
}

.group-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.9rem;
}

.group-card,
.faq-item,
.policy-item {
  background: var(--surface);
  border: 1px solid var(--surface-tint-alt10);
  border-radius: var(--radius-md);
  padding: 1.05rem;
  transition: transform 220ms ease, box-shadow 220ms ease;
}

.group-card h3,
.faq-item h3,
.policy-item h3 { margin-top: 0; }
.group-meta { color: var(--muted); font-size: 0.88rem; }

.group-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 16px 30px rgba(var(--primary-rgb), 0.12);
}

.section-sub {
  margin-top: 0.4rem;
  color: var(--muted);
  max-width: 56ch;
}

.groups-filter-panel {
  margin-bottom: 1rem;
}

.groups-filter-panel label {
  display: block;
  font-size: 0.82rem;
  color: var(--muted);
  margin: 0.2rem 0 0.25rem;
}

.groups-filter-panel input {
  width: 100%;
  border: 1px solid var(--surface-tint-alt9);
  border-radius: 10px;
  padding: 0.6rem 0.62rem;
  background: var(--surface);
  font-family: inherit;
  font-size: inherit;
  color: var(--text);
}

.group-topline {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}

.group-status {
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  padding: 0.2rem 0.55rem;
  font-size: 0.72rem;
  font-weight: 700;
}

.group-status-ok {
  background: var(--success-bg-alt3);
  color: var(--success-alt6);
}

.group-status-blocked {
  background: var(--danger-bg-alt2);
  color: var(--danger-alt2);
}

.group-availability {
  margin: 0.35rem 0 0.55rem;
  font-size: 0.86rem;
  color: var(--primary-soft-alt7);
}

.group-blocked {
  opacity: 0.85;
}

/* "On Request" — the term, not a badge. It reads in the same slot and at the
   same weight as the availability line it replaces, because it IS the answer
   to that question for these groups. Coloured as body copy on purpose: a
   warning colour would say the car is a problem, and it is not. */
.fleet-onreq-note {
  margin: 0.9rem 0 0;
  font-size: 0.82rem;
  color: var(--primary-soft-alt7);
}

.fleet-onreq-tag {
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--primary-soft-alt7);
}

.testimonial-band {
  margin: 2.6rem 0;
  background: linear-gradient(155deg, var(--primary-deep-alt11), var(--primary-soft-alt5));
  color: var(--surface-tint-alt39);
  border-radius: var(--radius-lg);
  padding: 1.5rem;
}

.testimonial-band blockquote {
  margin: 0;
  font-size: clamp(1.1rem, 2.8vw, 1.45rem);
  line-height: 1.35;
}

.testimonial-band p {
  margin: 0.7rem 0 0;
  color: var(--surface-tint-alt18);
}

.cta-band {
  margin: 2.4rem 0 0.8rem;
  background: var(--surface);
  border: 1px solid var(--surface-tint-alt22);
  border-radius: var(--radius-lg);
  padding: 1.3rem;
  display: flex;
  gap: 1rem;
  justify-content: space-between;
  align-items: center;
}

.cta-band h2 {
  margin: 0.25rem 0 0;
  font-size: clamp(1.2rem, 2.9vw, 1.9rem);
  max-width: 24ch;
}

.page-shell {
  margin-top: 1rem;
  margin-bottom: 2rem;
}

.content-hero {
  background: linear-gradient(145deg, var(--primary-deep-alt12), var(--primary-soft-alt2));
  color: var(--surface-tint-alt33);
  border-radius: var(--radius-lg);
  padding: 2rem 1.35rem;
  margin-bottom: 1.2rem;
  text-align: center;
}

.content-hero .eyebrow {
  color: var(--surface-tint-alt17);
}

.content-hero h1 {
  margin: 0.2rem 0 0.35rem;
}

.content-hero p {
  margin: 0 auto;
  color: var(--surface-tint-alt23);
  max-width: 62ch;
}

.content-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
}

.prose-card,
.info-card,
.activity-card {
  background: var(--surface);
  border: 1px solid var(--surface-tint-alt7);
  border-radius: var(--radius-md);
  padding: 1.1rem;
  box-shadow: 0 8px 20px rgba(var(--primary-rgb), 0.06);
}

.prose-card h2,
.info-card h3,
.activity-card h3 {
  margin-top: 0;
}

.prose-card p,
.info-card p,
.activity-card p {
  color: var(--muted);
  line-height: 1.6;
}

.mini-list {
  margin: 0;
  padding-left: 1rem;
  color: var(--muted);
}

.mini-list li + li {
  margin-top: 0.4rem;
}

.activities-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.9rem;
}

.contact-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.9rem;
}

.contact-item {
  background: var(--surface);
  border: 1px solid var(--surface-tint-alt7);
  border-radius: 12px;
  padding: 0.9rem;
}

.contact-item h3 {
  margin: 0 0 0.35rem;
}

.contact-item p {
  margin: 0;
  color: var(--muted);
}

.hero,
.trust-strip,
.steps,
.why-us,
.group-grid,
.testimonial-band,
.cta-band {
  animation: reveal-up 560ms ease both;
}

@keyframes reveal-up {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.faq-list { display: grid; gap: 0.65rem; }
.policy-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.8rem; }

@media (max-width: 960px) {
  .hero-layout { grid-template-columns: 1fr; }
  .hero-proof { grid-template-columns: 1fr 1fr; }
  .steps-grid,
  .value-grid { grid-template-columns: 1fr; }
  .portal-grid { grid-template-columns: 1fr; }
  .content-grid,
  .activities-grid,
  .contact-grid { grid-template-columns: 1fr; }
  .group-grid { grid-template-columns: repeat(2, 1fr); }
  .trust-strip { grid-template-columns: 1fr; }
  .cta-band {
    flex-direction: column;
    align-items: flex-start;
  }
}

@media (max-width: 640px) {
  .btn-sm-hide { display: none; }
  .hero-copy,
  .card,
  .testimonial-band,
  .cta-band { padding: 1rem; }
  .hero-proof { grid-template-columns: 1fr; }
  .group-grid,
  .policy-grid { grid-template-columns: 1fr; }
  .grid-2 { grid-template-columns: 1fr; }
}

/* ─── Cookie Consent Banner ───────────────────────────────────────────────── */
.cookie-banner {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: var(--primary-deep-alt8);
  border-top: 1px solid rgba(var(--surface-rgb), 0.12);
  z-index: 9999;
  padding: 1rem 0;
  transform: translateY(100%);
  /* Parked, not gone: on a phone the banner sits at `top: --isl-header` and
     is pushed up by its own height, which is TALLER than the header — so a
     dismissed banner stayed on screen once the page scrolled. Visibility
     transitions in steps, so it hides only after the slide finishes and
     shows the instant it is asked for. */
  visibility: hidden;
  transition: transform 0.35s ease, visibility 0.35s ease;
}

.cookie-banner.cookie-visible {
  transform: translateY(0);
  visibility: visible;
}

.cookie-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 1.5rem;
  display: flex;
  align-items: center;
  gap: 1.5rem;
  flex-wrap: wrap;
}

.cookie-text {
  flex: 1;
  font-size: 0.875rem;
  color: rgba(var(--surface-rgb), 0.75);
  margin: 0;
  min-width: 200px;
  line-height: 1.5;
}

.cookie-text a {
  color: var(--accent);
  text-decoration: underline;
}

.cookie-actions {
  display: flex;
  gap: 0.75rem;
  flex-shrink: 0;
}

.cookie-btn {
  padding: 0.5rem 1.25rem;
  border-radius: 6px;
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
  transition: background 0.2s, border-color 0.2s, color 0.2s;
}

.cookie-btn-gold {
  background: var(--accent);
  color: var(--primary-deep-alt7);
  border: none;
}

.cookie-btn-gold:hover {
  background: var(--accent-warm-alt3);
}

.cookie-btn-outline {
  background: transparent;
  color: rgba(var(--surface-rgb), 0.7);
  border: 1px solid rgba(var(--surface-rgb), 0.25);
}

.cookie-btn-outline:hover {
  border-color: rgba(var(--surface-rgb), 0.5);
  color: var(--surface);
}

@media (max-width: 640px) {
  .cookie-inner {
    flex-direction: column;
    align-items: flex-start;
    gap: 1rem;
  }
  .cookie-actions {
    width: 100%;
  }
  .cookie-btn {
    flex: 1;
    text-align: center;
  }
}

/* ── The time sheet (owner 2026-09-18; `site-loader.js`, enhanceTimeBox) ───
   A transparent button lies over the time <select>, which keeps showing the
   value in whatever dress its page gives it; the sheet is the list. The
   chosen time wears the accent and is the one filled thing on the sheet.
   The parts of the day are a switch, not four more buttons (owner
   2026-09-18, "2b"): each has a colour of its own on its icon, and the open
   one takes a faint wash of it. Night and evening are the island's info and
   bad tones; morning and afternoon have no token, so they are written here. */
.time-wrap { position: relative; display: block; }
.time-open {
  position: absolute; inset: 0; width: 100%;
  margin: 0; padding: 0; border: 0; background: transparent;
  cursor: pointer; border-radius: 3px;
}
.time-open:focus-visible { outline: 2px solid var(--isl-accent, currentColor); outline-offset: 4px; }
.time-sheet {
  position: absolute; z-index: 1000; width: 320px; box-sizing: border-box;
  padding: 10px;
  background: var(--isl-card, #fff); color: var(--isl-ink, #111);
  border: 1px solid var(--isl-line, #ddd); border-radius: 12px;
  box-shadow: 0 14px 30px -12px rgba(0, 0, 0, .62);
  font-family: inherit;
}
.time-parts,
.time-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
.time-parts {
  gap: 0; margin-bottom: 12px; padding: 3px;
  background: var(--isl-bg, #f4f4f4); border-radius: 999px;
}
.time-sheet button {
  font: inherit; font-size: 15px; color: inherit;
  background: var(--isl-bg, #f4f4f4);
  border: 1px solid var(--isl-line, #ddd); border-radius: 8px;
  padding: 11px 0; cursor: pointer;
}
.time-parts button {
  display: flex; align-items: center; justify-content: center; gap: 4px;
  min-width: 0; padding: 8px 0; font-size: 12.5px;
  color: var(--isl-dim, #555); background: transparent;
  border-color: transparent; border-radius: 999px;
}
.time-parts svg {
  flex: none; width: 15px; height: 15px;
  fill: none; stroke: var(--part); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
}
.time-parts [data-part="0"] { --part: var(--isl-info, #7a70b8); }
.time-parts [data-part="1"] { --part: #E9C98F; }
.time-parts [data-part="2"] { --part: #E0A86A; }
.time-parts [data-part="3"] { --part: var(--isl-bad, #d0604f); }
.time-parts button[aria-pressed="true"] {
  color: var(--isl-ink, #111);
  background: color-mix(in oklab, var(--part) 16%, var(--isl-bg, #fff));
  border-color: color-mix(in oklab, var(--part) 40%, var(--isl-bg, #fff));
}
.time-grid button[aria-pressed="true"] {
  background: var(--isl-accent, #333); color: var(--isl-accent-ink, #fff);
  border-color: var(--isl-accent, #333);
}
.time-sheet button:focus-visible { outline: 2px solid var(--isl-accent, currentColor); outline-offset: 2px; }
@media (max-width: 767px) {
  .time-sheet {
    position: fixed; left: 0; right: 0; bottom: 0; width: auto;
    border-radius: 14px 14px 0 0; border-width: 1px 0 0;
    padding: 14px 14px calc(14px + env(safe-area-inset-bottom));
    box-shadow: 0 -12px 30px rgba(0, 0, 0, .5);
  }
}