/* Fluid type scale.
   The class is doubled on purpose: Tailwind's preflight resets headings with
   `h1, h2 { font-size: inherit }` from an unlayered stylesheet, which would
   otherwise win over these rules and collapse every heading to 16px. */
.text-fluid-hero.text-fluid-hero {
  font-size: clamp(2.1rem, 5.8vw, 5.25rem);
  line-height: 1.07;
}
.text-fluid-headline.text-fluid-headline {
  font-size: clamp(1.75rem, 3.8vw, 3.6rem);
  line-height: 1.18;
}
.text-fluid-quote.text-fluid-quote {
  font-size: clamp(1.15rem, 2.2vw, 1.95rem);
  line-height: 1.45;
}

::-webkit-scrollbar {
  width: 6px;
}
::-webkit-scrollbar-track {
  background: #061a15;
}
::-webkit-scrollbar-thumb {
  background: #c8963e;
  border-radius: 9999px;
}

/* In-page links must clear the floating nav, which sits higher on desktop
   because of the contact bar above it. */
section[id],
#tailored-inquiry {
  scroll-margin-top: 6rem;
}
@media (min-width: 1024px) {
  section[id],
  #tailored-inquiry {
    scroll-margin-top: 9.5rem;
  }
}

/* Scroll lock applied while the off-canvas menu is open. */
body.nav-locked {
  overflow: hidden;
}

/* Quick-filter pills scroll sideways on phones; hide the scrollbar itself. */
.quick-pill-rail {
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.quick-pill-rail::-webkit-scrollbar {
  display: none;
}

/* Keep the trip modal inside the viewport on short/small screens. */
.trip-modal {
  max-height: calc(100vh - 2rem);
  max-height: calc(100dvh - 2rem);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.trip-modal:not([open]) {
  display: none;
}

/* Visible focus for keyboard users, including the checkbox-driven tag pills. */
:focus-visible {
  outline: 2px solid #c8963e;
  outline-offset: 2px;
}
.tag-pill:focus-within {
  outline: 2px solid #c8963e;
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}

/* FAQ accordion: suppress the native disclosure triangle in favour of the
   Material Symbols chevron in the markup. */
summary::-webkit-details-marker,
summary::marker {
  display: none;
  content: "";
}
.faq-item summary:focus-visible {
  outline: 2px solid #c8963e;
  outline-offset: -2px;
}

/* ===========================================================================
   MOTION SYSTEM
   ---------------------------------------------------------------------------
   Everything below is progressive enhancement. The hidden-before-reveal states
   are scoped to `html.js`, a class set by an inline script in partials/head.php.
   If that script never runs (JS disabled, script blocked, parse error) the
   class is absent and every element simply renders in its final visible state.
   Never write a `[data-reveal]` rule that is not scoped to `.js`.
   =========================================================================== */

/* --- Reveal on scroll -------------------------------------------------- */
.js [data-reveal] {
  opacity: 0;
  transition:
    opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: opacity, transform;
}
.js [data-reveal="up"]    { transform: translate3d(0, 28px, 0); }
.js [data-reveal="down"]  { transform: translate3d(0, -20px, 0); }
/* Sideways offsets stay under 20px on purpose. Anything larger pokes past the
   right edge while the element waits below the fold, which grows the document
   scroll width. Clipping it at html level would be the obvious fix, but that
   stops `position: sticky` working - so the offset lives inside the narrowest
   page gutter (px-5 = 20px) instead. */
.js [data-reveal="left"]  { transform: translate3d(-18px, 0, 0); }
.js [data-reveal="right"] { transform: translate3d(18px, 0, 0); }
.js [data-reveal="zoom"]  { transform: scale(0.94); }
.js [data-reveal="blur"]  { filter: blur(10px); transition-property: opacity, transform, filter; }

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

/* Once a reveal has played there is nothing left to composite. */
.js [data-reveal].is-revealed {
  will-change: auto;
}

/* --- Scroll progress bar ----------------------------------------------- */
#scroll-progress {
  position: fixed;
  top: 0;
  left: 0;
  height: 3px;
  width: 100%;
  transform: scaleX(0);
  transform-origin: 0 50%;
  background: linear-gradient(90deg, #c8963e, #e0b572, #efcb88);
  z-index: 70;
  pointer-events: none;
}

/* --- Header condense on scroll ----------------------------------------- */
#site-header .nav-shell {
  transition:
    height 0.35s cubic-bezier(0.22, 1, 0.36, 1),
    background-color 0.35s ease,
    box-shadow 0.35s ease;
}
#site-header.is-scrolled .nav-shell {
  background-color: rgba(252, 249, 243, 0.96);
  box-shadow: 0 18px 40px -18px rgba(6, 26, 21, 0.4);
}
@media (min-width: 768px) {
  #site-header.is-scrolled .nav-shell { height: 4rem; }
}

/* --- Nav scrim -----------------------------------------------------------
   Sits under the nav (z-50) and over the page, so the pill itself is never
   blurred by it - only whatever scrolls underneath. The mask fades the blur
   out at the bottom edge instead of ending on a hard line, and the whole
   thing is inert so it cannot swallow clicks. */
#nav-scrim {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 6rem;
  z-index: 45;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.35s ease;
  backdrop-filter: blur(14px) saturate(115%);
  -webkit-backdrop-filter: blur(14px) saturate(115%);
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 60%, transparent 100%);
          mask-image: linear-gradient(to bottom, #000 0%, #000 60%, transparent 100%);
}
body.is-scrolled #nav-scrim {
  opacity: 1;
}
@media (min-width: 1024px) {
  /* Taller: the nav starts 2rem down on desktop, so there is more gap to cover. */
  #nav-scrim { height: 7.75rem; }
}

/* --- Back to top -------------------------------------------------------- */
#back-to-top {
  opacity: 0;
  visibility: hidden;
  transform: translate3d(0, 14px, 0);
  transition: opacity 0.3s ease, transform 0.3s ease, visibility 0.3s;
}
#back-to-top.is-visible {
  opacity: 1;
  visibility: visible;
  transform: none;
}

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

.hero-slide {
  opacity: 0;
  transition: opacity 1.2s ease-in-out;
  will-change: opacity;
}
.hero-slide.is-active {
  opacity: 1;
}

/* Slow Ken Burns drift, only on the slide currently on screen. Alternating
   direction stops every slide from pushing the subject the same way. */
.hero-slide.is-active .hero-slide-img {
  animation: kenburns 14s ease-out forwards;
}
.hero-slide:nth-child(even).is-active .hero-slide-img {
  animation-name: kenburns-alt;
}

@keyframes kenburns {
  from { transform: scale(1.04) translate3d(0, 0, 0); }
  to   { transform: scale(1.16) translate3d(-1.5%, -1.5%, 0); }
}
@keyframes kenburns-alt {
  from { transform: scale(1.16) translate3d(1.5%, 1%, 0); }
  to   { transform: scale(1.04) translate3d(0, 0, 0); }
}

/* Caption text swaps with a short lift rather than a hard cut. */
.hero-caption {
  transition: opacity 0.45s ease, transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}
.hero-caption.is-swapping {
  opacity: 0;
  transform: translate3d(0, 10px, 0);
}

/* The paragraph under the headline moves with the slides, the same way. */
.hero-blurb {
  transition: opacity 0.5s ease, transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}
.hero-blurb.is-swapping {
  opacity: 0;
  transform: translate3d(0, 12px, 0);
}

/* Dots double as an autoplay timer: the fill drains across the slide. */
.hero-dot {
  position: relative;
  overflow: hidden;
  transition: width 0.45s cubic-bezier(0.22, 1, 0.36, 1), background-color 0.3s ease;
}
.hero-dot-fill {
  position: absolute;
  inset: 0;
  transform: scaleX(0);
  transform-origin: 0 50%;
  background: #efcb88;
  border-radius: inherit;
}
.hero-dot.is-active .hero-dot-fill {
  animation: dot-timer var(--hero-delay, 6500ms) linear forwards;
}
.hero-carousel.is-paused .hero-dot.is-active .hero-dot-fill {
  animation-play-state: paused;
}
@keyframes dot-timer {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}

/* --- Reduced motion ------------------------------------------------------
   The global reduced-motion block above already neutralises durations. These
   rules additionally make sure nothing is left stuck in a hidden state and
   that the carousel stops drifting entirely. */
@media (prefers-reduced-motion: reduce) {
  .js [data-reveal] {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
  }
  .hero-slide.is-active .hero-slide-img,
  .hero-dot.is-active .hero-dot-fill {
    animation: none !important;
  }
  .hero-slide { transition: opacity 0.2s linear; }
}

/* ------------------------------------------------------------------
   Car hire category chips. Same shape as the Services jump rail; the
   current category is filled.
   ------------------------------------------------------------------ */
.fleet-chip { background: #f1f2ef; color: #6c746f; }
.fleet-chip:hover { background: #e8eae6; color: #16191c; }
.fleet-chip.is-active { background: #16191c; color: #ffffff; }
.fleet-chip:focus-visible { outline: 2px solid #14513c; outline-offset: 2px; }

/* A card outside the chosen category. */
.fleet-card[hidden] { display: none; }

/* Toasts (modal.css) clear the floating header: 12px + 64px, or 32px + 80px on large screens. */
:root { --pm-toast-top: 88px; }
@media (min-width: 1024px) { :root { --pm-toast-top: 124px; } }

/* ------------------------------------------------------------------
   Vehicle gallery viewer (car-hire.js). Full screen on a dark ground,
   photo centred, thumbnails along the bottom.
   ------------------------------------------------------------------ */
dialog.pt-gallery {
  width: 100vw; max-width: 100vw; height: 100dvh; max-height: 100dvh;
  margin: 0; padding: 0; border: 0;
  background: rgba(13, 15, 17, .96); color: #fff;
  font-family: Montserrat, system-ui, sans-serif;
  display: none; grid-template-rows: auto 1fr auto;
}
dialog.pt-gallery[open] { display: grid; }
dialog.pt-gallery::backdrop { background: rgba(13, 15, 17, .9); }
@media (prefers-reduced-motion: no-preference) {
  dialog.pt-gallery[open] { animation: pt-gallery-in .18s ease-out; }
}
@keyframes pt-gallery-in { from { opacity: 0; } }

.pt-gallery-bar { display: flex; align-items: center; gap: 1rem; padding: .75rem 1rem .75rem 1.25rem; }
.pt-gallery-title { flex: 1; min-width: 0; font-weight: 600; font-size: .95rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pt-gallery-count { font-size: .8rem; color: rgba(255, 255, 255, .65); font-variant-numeric: tabular-nums; }

.pt-gallery-btn, .pt-gallery-nav {
  display: flex; align-items: center; justify-content: center;
  border: 0; border-radius: 9999px; cursor: pointer;
  background: rgba(255, 255, 255, .1); color: #fff;
  transition: background-color .15s;
}
.pt-gallery-btn { width: 40px; height: 40px; }
.pt-gallery-btn:hover, .pt-gallery-nav:hover { background: rgba(255, 255, 255, .2); }
.pt-gallery-btn:focus-visible, .pt-gallery-nav:focus-visible, .pt-gallery-thumb:focus-visible { outline: 2px solid #d9b57c; outline-offset: 2px; }

.pt-gallery-stage {
  min-height: 0; display: flex; align-items: center; justify-content: center;
  padding: 0 .75rem;
}
.pt-gallery-stage img, .pt-gallery-stage video {
  max-width: 100%; max-height: 100%; object-fit: contain; border-radius: 6px;
  user-select: none;
}
.pt-gallery-stage iframe {
  width: min(100%, 1100px); aspect-ratio: 16 / 9; max-height: 100%;
  border: 0; border-radius: 8px; background: #000;
}

.pt-gallery-nav {
  position: fixed; top: 50%; transform: translateY(-50%);
  width: 48px; height: 48px;
}
.pt-gallery-nav .material-symbols-outlined { font-size: 30px; }
.pt-gallery-nav.is-prev { left: 1rem; }
.pt-gallery-nav.is-next { right: 1rem; }
.pt-gallery-nav[hidden] { display: none; }
@media (max-width: 640px) {
  /* Swipe does the work on a phone; the arrows stay small and out of the way. */
  .pt-gallery-nav { width: 38px; height: 38px; background: rgba(0, 0, 0, .35); }
  .pt-gallery-nav.is-prev { left: .4rem; }
  .pt-gallery-nav.is-next { right: .4rem; }
}

.pt-gallery-thumbs {
  display: flex; gap: .5rem; justify-content: safe center;
  overflow-x: auto; padding: .85rem 1rem 1.1rem; scrollbar-width: none;
}
.pt-gallery-thumbs::-webkit-scrollbar { display: none; }
.pt-gallery-thumbs[hidden] { display: none; }
.pt-gallery-thumb {
  position: relative; flex-shrink: 0;
  width: 72px; height: 52px; padding: 0; overflow: hidden;
  border: 2px solid transparent; border-radius: 8px;
  background: rgba(255, 255, 255, .08); color: #fff; cursor: pointer;
  opacity: .55; transition: opacity .15s, border-color .15s;
}
.pt-gallery-thumb img { width: 100%; height: 100%; object-fit: cover; }
.pt-gallery-thumb:hover { opacity: .85; }
.pt-gallery-thumb[aria-selected="true"] { opacity: 1; border-color: #d9b57c; }
.pt-gallery-thumb.is-video .material-symbols-outlined {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  font-size: 24px; background: rgba(0, 0, 0, .35);
}

/* A trip card outside the current filter (home.js). */
#journeys-grid [data-trip][hidden] { display: none; }

/* ------------------------------------------------------------------
   Event route: pickup points as a vertical timeline, ending at the
   destination (partials/event-route.blade.php).
   ------------------------------------------------------------------ */
.pt-route { position: relative; margin: 0; padding: 0; list-style: none; }
.pt-route-stop { position: relative; padding: 0 0 1.25rem 1.9rem; }
.pt-route-stop::before {
  content: ""; position: absolute; left: .42rem; top: .9rem; bottom: -.15rem;
  width: 2px; background: repeating-linear-gradient(to bottom, #b9cbbf 0 6px, transparent 6px 11px);
}
.pt-route-stop.is-end { padding-bottom: 0; }
.pt-route-stop.is-end::before { display: none; }
.pt-route-dot {
  position: absolute; left: 0; top: .2rem;
  width: 1rem; height: 1rem; border-radius: 9999px;
  background: #fff; border: 3px solid #14513c;
}
.pt-route-stop.is-end .pt-route-dot { background: #14513c; box-shadow: 0 0 0 4px rgba(20, 81, 60, .14); }

/* "Choose where you join" options in the booking card. */
.pt-join {
  display: flex; align-items: center; gap: .75rem;
  padding: .7rem .85rem; border-radius: .75rem;
  border: 1px solid #e3e6e2; background: #fff;
  transition: border-color .15s, background-color .15s, box-shadow .15s;
}
.pt-join:hover { border-color: rgba(20, 81, 60, .5); background: #f6faf8; box-shadow: 0 0 0 3px rgba(20, 81, 60, .08); }
.pt-join:focus-visible { outline: 2px solid #14513c; outline-offset: 2px; }
.pt-join.is-full { background: #fbfbfa; }
.pt-join[aria-disabled="true"] { pointer-events: none; opacity: .6; }

/* Event descriptions, written in Markdown in the admin. */
.pt-prose { font-size: 15px; line-height: 1.7; color: rgba(35, 40, 42, .9); overflow-wrap: anywhere; }
@media (min-width: 640px) { .pt-prose { font-size: 1rem; } }
.pt-prose > * + * { margin-top: 1rem; }
.pt-prose h1, .pt-prose h2, .pt-prose h3, .pt-prose h4 { color: #16191c; font-weight: 600; line-height: 1.3; letter-spacing: -.01em; }
.pt-prose h1, .pt-prose h2 { font-size: 1.35rem; margin-top: 2rem; }
.pt-prose h3 { font-size: 1.15rem; margin-top: 1.75rem; }
.pt-prose h4 { font-size: 1rem; margin-top: 1.5rem; }
.pt-prose > :first-child { margin-top: 0; }
.pt-prose strong { font-weight: 600; color: #16191c; }
.pt-prose a { color: #14513c; font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }
.pt-prose ul, .pt-prose ol { padding-left: 1.4rem; }
.pt-prose ul { list-style: disc; }
.pt-prose ol { list-style: decimal; }
.pt-prose li + li { margin-top: .35rem; }
.pt-prose li::marker { color: #14513c; }
.pt-prose blockquote { border-left: 3px solid #cfe0d7; padding-left: 1rem; color: #4f5d55; font-style: italic; }
.pt-prose hr { border: 0; border-top: 1px solid #e6e8e4; margin: 2rem 0; }
.pt-prose code { font-size: .9em; background: #f3f5f2; border-radius: 4px; padding: .1em .35em; }

/* Share buttons */
.pt-share { margin-top: 1.25rem; padding-top: 1.1rem; border-top: 1px solid #e6e8e4; }
.pt-share-label { font-size: .75rem; font-weight: 600; color: #6c746f; margin-bottom: .6rem; }
.pt-share-row { display: flex; flex-wrap: wrap; gap: .45rem; }
.pt-share-btn { display: inline-flex; align-items: center; gap: .35rem; padding: .5rem .8rem; border-radius: 999px; border: 1px solid #e6e8e4; background: #fff; color: #16191c; font-size: .78rem; font-weight: 600; line-height: 1; cursor: pointer; transition: border-color .15s, background .15s; }
.pt-share-btn:hover { border-color: rgba(20, 81, 60, .45); background: #f6faf8; }
.pt-share-btn:focus-visible { outline: 2px solid #14513c; outline-offset: 2px; }
.pt-share-btn svg { width: 16px; height: 16px; }
.pt-share-btn .material-symbols-outlined { font-size: 17px; }
.pt-share-btn[hidden] { display: none; }
.pt-share-native { background: #14513c; border-color: #14513c; color: #fff; }
.pt-share-native:hover { background: #0f3f2f; border-color: #0f3f2f; }

/* Event poster and photos to download */
.pt-downloads { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; }
@media (min-width: 640px) { .pt-downloads { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.pt-download { margin: 0; border: 1px solid #e6e8e4; border-radius: 12px; overflow: hidden; background: #fff; min-width: 0; }
.pt-download-img { display: block; aspect-ratio: 4 / 3; background: #f3f4f1; }
.pt-download-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pt-download-poster { grid-row: span 2; }
.pt-download-poster .pt-download-img { aspect-ratio: auto; height: calc(100% - 46px); min-height: 220px; }
.pt-download-poster .pt-download-img img { object-fit: contain; background: #f3f4f1; }
.pt-download figcaption { display: flex; align-items: center; justify-content: space-between; gap: .5rem; padding: .55rem .7rem; font-size: .78rem; color: #3a4043; min-height: 46px; }
.pt-download-btn { display: inline-flex; align-items: center; gap: .25rem; flex-shrink: 0; color: #14513c; font-weight: 700; }
.pt-download-btn .material-symbols-outlined { font-size: 19px; }
.pt-download-btn:hover { text-decoration: underline; }

/* The event poster, beside the booking card: shown whole, never cropped. */
.pt-poster { margin: 0; border: 1px solid #e6e8e4; border-radius: 12px; overflow: hidden; background: #fff; box-shadow: 0 1px 2px rgba(16, 24, 20, .04); }
.pt-poster > a { display: block; background: #f3f4f1; }
.pt-poster img { display: block; width: 100%; height: auto; max-height: 75vh; object-fit: contain; margin: 0 auto; }
.pt-poster figcaption { display: flex; align-items: center; justify-content: space-between; gap: .5rem; padding: .65rem .9rem; font-size: .8rem; color: #3a4043; border-top: 1px solid #eef0ec; }