@charset "UTF-8";
/*!
    Main Stylesheet Manifest

    This file imports all SCSS partials in the correct order.
    DO NOT add styles here — use the appropriate partial instead.

    Compile: sass --watch css:css

    Import order:
        1. Fonts & Variables (design tokens)
        2. Helpers (mixins & utilities)
        3. Utility classes (colors, typography)
        4. Base element styles
        5. Components (reusable patterns)
        6. Sections (ACF flexible content)
        7. Page-specific overrides

    @author development@bronte.co.nz
*/
/*
    Design Tokens — runtime CSS custom properties (the brand bridge)

    SINGLE SOURCE OF TRUTH for every brand-aware value. The defaults here are
    Pure Discoveries (teal). Each brand only OVERRIDES the handful it needs in
    brands/{slug}.css, scoped to body.brand-{slug}, enqueued after this file.
    So one codebase repaints into five brands with zero markup or SCSS changes.

    WHY TWO BLOCKS (:root vs body):
        A var() inside a custom property is substituted at the element where
        that property is DECLARED, then the resolved value inherits down. Brands
        override the CORE tokens on `body.brand-{slug}`. So any DERIVED token
        that reads a core token via var()/color-mix MUST be declared on `body`
        too — otherwise it resolves once at :root against the PD defaults and
        inherits down unchanged (the footer/mega "stuck on teal" bug).
        Rule of thumb: literal value or core default -> :root.
                       references var(--brand-*) / var(--text-*) -> body.

    RULE (enforced by .bin/lint-tokens.sh in CI):
        Component / section / header / footer / button / menu partials must NEVER
        hard-code a brand colour. Always reference these tokens:  color: var(--brand-deep);
        New brand values are DEFINED here and in brands/*.css — nowhere else.

    Structural values (spacing, breakpoints, font sizes, radius) stay as SCSS
    variables in _variables.scss — they are the same across all five brands.
*/
:root {
  /* ---- Brand core (Pure Discoveries defaults; overridden per brand) ---- */
  --brand-deep: #0d4a5b; /* primary — headings, links, dark UI            */
  --brand-sky: #47b5d7; /* accent — active/hover/focus, secondary CTA    */
  /* The accent as TEXT on a light ground (labels, eyebrows, "Explore"
     links, table headers). PD's sky is 2.37:1 on white, so text takes this
     darker blue of the same hue: 5.36:1 on white, 5.09:1 on --surface-tint.
     Buttons, icons, borders, fills and anything on a dark ground keep
     --brand-sky. Every brand restates it in brands/{slug}.css, and the dark
     section bands point it back at --brand-sky (_section-surfaces.scss). */
  --brand-sky-text: #1f7391;
  --brand-aqua: #8ccac6; /* soft accent — gradient stop, tints           */
  --brand-glass: #bffff3; /* lightest — glass highlights                  */
  --brand-ink: #082f3a; /* deepest dark — utility bar + footer ground    */
  /* ---- Signature gradient (literal stops; overridden per brand) ----
     --gradient-button-fg is the INK for elements WIDE enough that the 135deg
     gradient reaches its dark stop behind the label. Use it instead of a
     literal #fff or --text-on-dark, so a brand whose gradient is light all
     over (LTT's solid Kiwi Lime CTA) flips all ~40 of them at once.

     House rule (go-live, Oct 2026): EVERY stop of a brand's gradient must
     give at least 4.5:1 against --gradient-button-fg, so the label passes
     wherever it sits on the button, at any width and on hover (the hover
     slides the 160% background, so any stop can end up behind the text).
     The old light stops (#8ccac6, 1.85:1 with white) left the left half of
     every CTA unreadable. Check all three stops when changing a gradient. */
  --gradient-button: linear-gradient(135deg, #247a86, #1f7391, #0d4a5b);
  --gradient-button-fg: #ffffff;
  /* ---- Text (literals; overridden per brand) ---- */
  --text-primary: #1a3a44; /* body copy on light                          */
  --text-muted: #54737d; /* secondary copy, captions. Was #5a7a84, which
   is 4.38:1 on --surface-tint (fails AA); this
   is 4.84:1 there and 5.09:1 on white.          */
  --text-on-dark: #ffffff; /* copy on --brand-ink / --brand-deep          */
  --text-on-dark-muted: rgba(255, 255, 255, 0.72);
  /* ---- Surfaces & borders ---- */
  --surface: #ffffff;
  --surface-tint: #f5fafb; /* light section wash (brand-tinted)           */
  /* --surface-tint-deep is DERIVED from the two above, so it is declared on
     `body` (see WHY TWO BLOCKS at the top), not here. */
  --brand-border: #d0e8ef; /* hairlines on light                          */
  /* --text-subtle (fine print) reads --text-muted, so it is declared on
     `body` below, not here. */
  --border-on-dark: rgba(255, 255, 255, 0.14);
  /* ---- Elevation ---- */
  --shadow-header: 0 2px 8px rgba(13, 74, 91, 0.06);
  --shadow-dropdown: 0 8px 32px rgba(13, 74, 91, 0.12);
  --shadow-cta: 0 4px 14px rgba(8, 47, 58, 0.18);
  --shadow-cta-hover: 0 6px 18px rgba(8, 47, 58, 0.26);
  --shadow-panel: -4px 0 24px rgba(13, 74, 91, 0.12);
  /* ---- Scrims ---- */
  --backdrop: rgba(8, 47, 58, 0.4); /* mobile-menu overlay */
  --search-backdrop: rgba(8, 47, 58, 0.7);
  /* ---- Hero meta line: breadcrumb + eyebrow above every image hero ----
     Both sit directly over the photo, above the h1. They used to be
     uppercase, bold and wide-tracked, one on top of the other, so together
     they competed with the heading. The breadcrumb now reads as quiet
     wayfinding (normal case, regular weight, dimmed) and the eyebrow as a
     light label, so the h1 leads. Consumed by the hero-breadcrumb and
     hero-kicker mixins in _helpers.scss (every hero variant), so a brand can
     retune all of them from its own file.
     Contrast: with the --hero-scrim-text layer (below, on body) white at
     88% measured at least 4.5:1 over the lightest 5% of the photo behind it
     on every PD hero, at 375 and 1440 (go-live audit, Oct 2026). Lowering
     the opacity, or the scrim, needs that check redone. */
  --hero-crumb-fg: rgba(255, 255, 255, 0.88);
  --hero-sub-fg: rgba(255, 255, 255, 0.85); /* page-hero intro line; --text-on-dark-muted (72%) fell to 4.4:1 */
  --hero-crumb-size: 13px;
  --hero-crumb-weight: 400;
  --hero-crumb-tracking: 0.01em;
  --hero-kicker-size: 13px;
  --hero-kicker-weight: 600;
  --hero-kicker-tracking: 0.14em;
  /* ---- Utility bar (text on --brand-ink) ---- */
  --util-text: rgba(255, 255, 255, 0.55);
  --util-text-hover: rgba(255, 255, 255, 0.85);
  --util-divider: rgba(255, 255, 255, 0.15);
  /* ---- Footer neutral text (white-alpha, brand-independent) ---- */
  --footer-text: rgba(255, 255, 255, 0.6);
  --footer-text-dim: rgba(255, 255, 255, 0.4);
  --footer-link: rgba(255, 255, 255, 0.5);
  /* ---- Layout rhythm (shared, but token'd so the chrome can reference it) ---- */
  --header-h: 72px;
  --header-h-scrolled: 60px;
  --header-h-mobile: 56px;
  /* ---- Type families (mirror the SCSS font tokens for var() consumers) ---- */
  --font-body: "Open Sans", Helvetica, Arial, sans-serif;
  --font-display: "Playlist", "Playlist Macrons", "Open Sans", cursive; /* brand script face; macron vowels from 'Playlist Macrons' (_fonts.scss) */
  /* ---- Newsletter literals (white-alpha glass + fixed status colours) ---- */
  --newsletter-heading: var(--text-on-dark);
  --newsletter-glass-bg: color-mix(in srgb, #fff 6%, transparent);
  --newsletter-input-bg: color-mix(in srgb, #fff 8%, transparent);
  --newsletter-error: #ff9b9b; /* inline field messages on the dark band */
  --newsletter-error-strong: #c0392b; /* error text/border on the white summary box */
  --newsletter-error-bg: #ffffff; /* white summary box for legibility */
  --newsletter-success: #9fe6bf; /* confirmation message on the dark band */
  /* Testimonials & FAQ colours are no longer fixed here — they come from the
     editor-selected section background via the --sec-* scheme tokens defined
     in css/sections/_section-surfaces.scss. */
  /* ---- Tour single — semantic status / badge / rating colours ----
     Brand-INDEPENDENT meaning colours (departure availability, star rating,
     exclusion mark). They live here, not in a
     partial, so the token-purity gate stays satisfied while the single-tour
     SCSS consumes them via var(--…). The status pairs mirror the admin
     column hues in ltt_departure_status_meta(). */
  --status-available-fg: #2d7a4f;
  --status-available-bg: #e3f3ea;
  --status-filling-fg: #8a5f12; /* 4.98:1 on its bg (was #9a6c1a, 4.09) */
  --status-filling-bg: #fbf0d8;
  --status-onrequest-fg: #0b5cad;
  --status-onrequest-bg: #e3effb;
  --status-soldout-fg: #991b1b;
  --status-soldout-bg: #fbe6e6;
  --rating-star: #f59e0b;
  --exclusion-mark: #c97a5a;
  /* Tour inclusion groups (Dates & Pricing). One accent per group, used for the
     icon stroke, the tile wash and the item bullets. Two follow the brand; the
     other three are fixed hues so the five groups stay distinct in every brand
     (a brand file can override any of them). All pass 3:1 on white. */
  --inc-accommodation: var(--brand-deep);
  --inc-meals: #a8601d; /* warm amber */
  --inc-travel: color-mix(in srgb, var(--brand-sky) 55%, var(--brand-deep));
  --inc-experiences: #2f7a55; /* bush green */
  --inc-choice: #8a4a78; /* berry      */
  /* "Not included" row: the exclusion terracotta, so it reads as the odd one out. */
  --inc-excluded: var(--exclusion-mark);
  /* Route map — functional, brand-independent map colours (a road drawn over a
     green/yellow relief map needs the same legible red and start-green in every
     brand, so they live here as semantics, not in the partial). */
  --route-line: #c53030; /* the route "roads" — reads against the map relief */
  --route-start: #22c55e; /* the first pin — "start of journey" green */
  /* Site notice — the ALERT type only. A disruption warning has to read as a
     warning on every brand, so it is a fixed amber, not a brand colour.
     fg on bg 11:1, accent on bg 4.6:1 (the icon only). */
  --notice-alert-bg: #fdf0d2;
  --notice-alert-fg: #3d2a00;
  --notice-alert-accent: #9a5b00;
}

/*
    Brand-DERIVED tokens — declared on `body`, NOT :root, on purpose (see header).
    These read the core tokens via var()/color-mix, so they must resolve on the
    same element where brands override the core (body.brand-{slug}). A brand file
    may still override any of these explicitly; its body.brand-{slug} rule wins on
    specificity. Everything not overridden re-resolves to the brand core here.
*/
body {
  /* ---- The deeper of the two light section washes ----
     The wireframes carry two light tints — a pale one for ordinary bands
     (destinations, blog) and a deeper one for the lead/CTA band — and we had
     collapsed both onto a single value, so a CTA sitting next to an off-white
     section stopped separating from it.
     Derived rather than a literal: every brand overrides --surface-tint with
     its own hue (LTT a cool fog, LTGBus a warm sand), so a second fixed value
     would have painted PD's blue across all five. Nudging each brand's own
     tint toward its own deep gives every one a matching partner from one
     rule. Declared here and not in :root precisely because it reads var()s
     the brands override on body. */
  --surface-tint-deep: color-mix(in srgb, var(--surface-tint) 95%, var(--brand-deep));
  /* ---- Fine print (dates, countries, hints, small labels) ----
     Used to be a lighter grey than --text-muted (#7a9da6, and inline mixes
     of muted toward white), which sat at 2.7-3.3:1 and failed AA. Fine
     print is still text, so it now takes the muted grey itself (PD 5.09:1
     on white, 4.84:1 on the tint). Chosen by Vidur, Oct 2026: it looks
     about the same as muted, and that is accepted. A brand whose muted
     grey misses 4.5:1 on its own tint restates this (LTT does). */
  --text-subtle: var(--text-muted);
  /* ---- Tour-type colours (the island a tour covers) ----
     Three sites hand-rolled their own color-mix for the same three island
     badges (tour card, destination "tours that visit", location "journey
     cards"), so the three drifted apart and no brand could restate them.
     They are one idea, so they are one token trio. The defaults below
     reproduce Pure Discoveries' previous mixes exactly; LTT overrides them
     with its brand's tour colours (Kiwi Lime / Southern Sunset / Fiordland
     Deep), which is what a tour colour means in that brand. */
  --tour-north: var(--brand-sky);
  --tour-north-ink: var(--text-on-dark);
  --tour-south: var(--brand-deep);
  --tour-south-ink: var(--text-on-dark);
  --tour-both: color-mix(in srgb, var(--brand-sky) 45%, var(--brand-deep));
  --tour-both-ink: var(--text-on-dark);
  /* ---- Derived interaction states ---- */
  --brand-deep-hover: color-mix(in srgb, var(--brand-deep) 86%, #000);
  --brand-sky-hover: color-mix(in srgb, var(--brand-sky) 88%, #000);
  /* A solid accent FILL under white text (active chips, badges, avatars,
     default Gravity Forms buttons). --brand-sky is too light for white in
     PD (2.37:1) and LTT/LTG (4.04:1), so fills take the darker text accent.
     Resolved here on body, so a dark band repointing --brand-sky-text
     does not change it. */
  --brand-sky-fill: var(--brand-sky-text);
  --brand-sky-fill-hover: color-mix(in srgb, var(--brand-sky-fill) 86%, #000);
  /* ---- Footer (dark ground, brand-tinted accents) ---- */
  --footer-bg: linear-gradient(160deg, var(--brand-deep) 0%, var(--brand-ink) 60%);
  --footer-link-hover: var(--brand-glass);
  --footer-accent: var(--brand-sky); /* headings, icons, hovers — brand energy on the dark ground */
  --footer-divider: color-mix(in srgb, var(--brand-sky) 12%, transparent);
  /* ---- Mega menu (desktop) — derived tints from the brand palette ---- */
  --mega-wash-hover: color-mix(in srgb, var(--brand-sky) 16%, var(--surface));
  --mega-tag-bg: color-mix(in srgb, var(--brand-sky) 18%, var(--surface));
  --mega-text-faint: var(--text-subtle);
  --mega-on-deep-muted: color-mix(in srgb, var(--brand-glass) 68%, transparent);
  --mega-on-ink-muted: color-mix(in srgb, var(--brand-aqua) 70%, transparent);
  /* ---- Newsletter (dark glass panel inset on a light band above the footer) ---- */
  --newsletter-band-bg: var(--surface-tint); /* the band behind the panel */
  --newsletter-bg: linear-gradient(135deg, var(--brand-deep) 0%, var(--brand-ink) 100%);
  --newsletter-kicker: var(--brand-aqua);
  --newsletter-text: color-mix(in srgb, var(--brand-glass) 62%, transparent);
  --newsletter-glass-border: color-mix(in srgb, var(--brand-sky) 22%, transparent);
  --newsletter-input-border: color-mix(in srgb, var(--brand-sky) 30%, transparent);
  --newsletter-placeholder: color-mix(in srgb, var(--brand-glass) 38%, transparent);
  --newsletter-disclaimer: color-mix(in srgb, var(--brand-glass) 42%, transparent);
  /* ---- Blog (derived from the brand palette) ---- */
  --blog-avatar-bg: color-mix(in srgb, var(--brand-ink) 88%, #000); /* author avatar ground */
  --blog-avatar-fg: var(--brand-aqua); /* initials on the avatar */
  --blog-cat-pill-bg: color-mix(in srgb, var(--brand-sky) 45%, var(--brand-deep)); /* category overlay tag; white on it 4.9:1 (sky at 85% over a photo was 2.7) */
  --blog-hero-scrim: linear-gradient(180deg,
      color-mix(in srgb, var(--brand-deep) 20%, transparent) 0%,
      color-mix(in srgb, var(--brand-deep) 40%, transparent) 35%,
      color-mix(in srgb, var(--brand-deep) 72%, transparent) 65%,
      color-mix(in srgb, var(--brand-deep) 94%, transparent) 100%);
  --blog-progress: linear-gradient(90deg, var(--brand-sky), var(--brand-deep));
  --blog-inline-bg: linear-gradient(135deg,
      color-mix(in srgb, var(--brand-deep) 92%, transparent) 0%,
      color-mix(in srgb, var(--brand-ink) 95%, transparent) 100%);
  /* ---- Site notice banner (template-parts/header/site-notice.php) ----
     One bg / fg / accent trio per type; accent is the icon stroke. Each type
     needs its own look at a glance, so they take different ground weights:
     info dark, sale a solid accent, offer a soft sheen, closure a quiet
     wash, alert the fixed amber in :root. A brand restyles any of them by
     restating the trio in brands/{slug}.css (LTT paints sale and offer in
     its tour colours). Check contrast when you do: fg on bg must hold 4.5:1. */
  --notice-info-bg: var(--brand-deep);
  --notice-info-fg: var(--text-on-dark);
  --notice-info-accent: var(--brand-glass);
  --notice-sale-bg: var(--brand-aqua);
  --notice-sale-fg: var(--brand-ink);
  --notice-sale-accent: var(--brand-ink);
  --notice-offer-bg: linear-gradient(90deg,
      color-mix(in srgb, var(--brand-glass) 70%, var(--surface)) 0%,
      color-mix(in srgb, var(--brand-aqua) 40%, var(--surface)) 50%,
      color-mix(in srgb, var(--brand-glass) 70%, var(--surface)) 100%);
  --notice-offer-fg: var(--brand-deep);
  --notice-offer-accent: var(--brand-deep);
  --notice-closure-bg: var(--surface-tint-deep);
  --notice-closure-fg: var(--text-primary);
  --notice-closure-accent: var(--brand-deep);
  /* ---- Hero text scrim ----
     Every image hero sets its copy on the LEFT over a photo, and each hero's
     own top-to-bottom scrim is lightest exactly where the breadcrumb and
     eyebrow sit. Over a bright sky that left them at 2-3:1 (go-live audit,
     Oct 2026). This extra layer darkens only the text side, so the photo
     still reads on the right. On phones the copy spans the full width, so
     it becomes an even wash. Layered on top of each hero's own scrim. */
  --hero-scrim-text: linear-gradient(90deg,
      color-mix(in srgb, var(--brand-deep) 60%, transparent) 0%,
      color-mix(in srgb, var(--brand-deep) 45%, transparent) 45%,
      transparent 75%);
}

@media (max-width: 768px) {
  body {
    --hero-scrim-text: linear-gradient(180deg,
        color-mix(in srgb, var(--brand-deep) 55%, transparent) 0%,
        color-mix(in srgb, var(--brand-deep) 40%, transparent) 100%);
  }
}
/*
    Font Face Declarations

    Define custom web fonts here using @font-face.
    Font files should be stored in /assets/fonts/ or loaded from CDN.

    After adding fonts, update $font-family-primary or $font-family-secondary
    in _variables.scss to use them.

    Example:
        @font-face {
            font-family: 'CustomFont';
            src: url('../assets/fonts/custom.woff2') format('woff2'),
                 url('../assets/fonts/custom.woff') format('woff');
            font-weight: 400;
            font-style: normal;
            font-display: swap;
        }
*/
@font-face {
  font-family: "Playlist Macrons";
  src: url("../fonts/Norican-macrons.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0100-0101, U+0112-0113, U+012A-012B, U+014C-014D, U+016A-016B;
}
/*
    Design Tokens (Variables)

    Central source of truth for all design values.
    ALWAYS check here before adding new values elsewhere.

    How to use:
        1. Import in your partial: @use 'variables' as *;
        2. Use variables: color: $color-primary;

    Naming conventions:
        $color-{name}      — colours
        $spacing-{size}    — spacing (xs, sm, md, lg, xl, 2xl, 3xl, 4xl)
        $font-size-{size}  — font sizes
        $font-weight-{name} — font weights
        $screen-{size}     — breakpoints
*/
/*
    Helper Utilities

    Layout, positioning, and display utilities.
    For typography utilities, see _typography.scss.
    For colour utilities, see _colors.scss.

    Usage:
        <div class="pos-relative">
            <img class="bg-image" src="..." alt="...">
            <div class="z-above">Content above image</div>
        </div>
*/
.w-100 {
  width: 100%;
}

.h-100 {
  height: 100%;
}

.pos-relative {
  position: relative;
}

.pos-absolute {
  position: absolute;
}

.z-below {
  z-index: 5;
}

.z-base {
  z-index: 10;
}

.z-above {
  z-index: 15;
}

.mb-0 {
  margin-bottom: 0;
}

.last-child-mb-0 > :last-child {
  margin-bottom: 0;
}

.bg-image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 1;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.skip-link:focus {
  position: fixed;
  top: 8px;
  left: 8px;
  z-index: 1000;
  width: auto;
  height: auto;
  padding: 8px 16px;
  margin: 0;
  clip: auto;
  background: var(--brand-deep);
  color: var(--text-on-dark);
  border-radius: 6px;
}

/*
    Colour Utility Classes

    Background and text colour utilities generated from $colors map.
    All colours are defined in _variables.scss.

    Usage:
        <div class="bg-primary text-white">Primary background</div>
        <p class="text-muted">Secondary text</p>

    Available classes:
        .bg-{color}   — background colour
        .text-{color} — text colour

    Where {color} is: primary, secondary, dark, light, white, black, muted
*/
.bg-primary {
  background-color: var(--brand-sky);
}

.text-primary {
  color: var(--brand-sky);
}

.bg-secondary {
  background-color: var(--text-muted);
}

.text-secondary {
  color: var(--text-muted);
}

.bg-dark {
  background-color: var(--brand-deep);
}

.text-dark {
  color: var(--brand-deep);
}

.bg-light {
  background-color: var(--surface-tint);
}

.text-light {
  color: var(--surface-tint);
}

.bg-white {
  background-color: #fff;
}

.text-white {
  color: #fff;
}

.bg-black {
  background-color: #000;
}

.text-black {
  color: #000;
}

.bg-muted {
  background-color: var(--text-muted);
}

.text-muted {
  color: var(--text-muted);
}

/*
    Typography Utility Classes

    Apply these classes directly in HTML to control text appearance.
    All values come from _variables.scss for consistency.

    Usage:
        <p class="text-lg font-bold">Large bold text</p>
        <span class="text-muted text-sm">Small muted caption</span>
*/
.text-left {
  text-align: left;
}

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

.text-right {
  text-align: right;
}

.text-xs {
  font-size: 12px;
}

.text-sm {
  font-size: 14px;
}

.text-base {
  font-size: 16px;
}

.text-lg {
  font-size: 18px;
}

.text-xl {
  font-size: 24px;
}

.text-2xl {
  font-size: 32px;
}

.text-3xl {
  font-size: 48px;
}

.font-normal {
  font-weight: 400;
}

.font-medium {
  font-weight: 500;
}

.font-semibold {
  font-weight: 600;
}

.font-bold {
  font-weight: 700;
}

.leading-tight {
  line-height: 1.2;
}

.leading-base {
  line-height: 1.5;
}

.leading-loose {
  line-height: 1.8;
}

.font-primary {
  font-family: var(--font-body);
}

.font-secondary {
  font-family: Georgia, serif;
}

/* Registered-trade-mark sign. The display (script) face draws (R) as a huge
   circled glyph, so functions/custom.php wraps every (R) in page text in
   <sup class="reg-mark"> and it renders here in the body face as a small
   superscript: half the surrounding size, at least 8px in small print and
   at most 14px in big headings (client, 8 Oct 2026). */
.reg-mark {
  font-family: var(--font-body);
  font-size: clamp(8px, 0.5em, 14px);
  font-style: normal;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  line-height: 0;
  vertical-align: super;
  margin-left: 0.08em;
}

/*
    Button Styles

    Base button styles and variants.
    Applied to .btn class, <button>, and submit inputs.

    Usage:
        <a href="#" class="btn">Default button</a>
        <button class="btn btn-primary">Primary button</button>

    Add variants below as needed:
        .btn-primary  — primary colour button
        .btn-outline  — outlined button
        .btn-lg       — large button
*/
.btn,
button,
input[type=submit] {
  -webkit-appearance: none;
  border-radius: 0;
  display: inline-block;
  font-size: 16px;
  font-weight: 700;
  font-family: var(--font-body);
  padding: 8px 16px;
  line-height: 1.5;
  cursor: pointer;
  transition: 0.2s all;
  border: 0;
  text-transform: uppercase;
  text-align: center;
}
.btn:focus,
button:focus,
input[type=submit]:focus {
  outline: none;
}

/*
    HOUSE RULE — a gradient painted under a border needs background-origin.

    background-origin defaults to padding-box while background-clip defaults to
    border-box, and background-repeat defaults to repeat. So on any element that
    has BOTH --gradient-button and a border, the gradient is sized to the padding
    box but painted across the border, and the border strip fills with the
    WRAPPED tail of the next tile — the dark --brand-deep end of the gradient.
    That drew a dark hairline along the top edge and round the caps of every
    gradient pill on the site (reported by the client, 28 Jul 2026).

    Fix: background-origin: border-box, so the gradient is sized to the area it
    is actually painted into and there is nothing to wrap. It is a no-op on a
    borderless element, so it is safe to add anywhere.
*/
/*
    .btn-primary — signature "liquid glass" gradient pill.
    Uses --gradient-button so every brand gets its own gradient automatically.
*/
.btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 16px 40px;
  border-radius: 999px;
  background: var(--gradient-button);
  background-size: 160% 160%;
  color: var(--gradient-button-fg);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.08em;
  box-shadow: var(--shadow-cta);
  transition: background-position 0.4s ease, transform 0.2s ease, box-shadow 0.2s ease;
}
.btn-primary:hover {
  color: var(--gradient-button-fg);
  background-position: 100% 0;
  transform: translateY(-1px);
  box-shadow: var(--shadow-cta-hover);
}
@media (max-width: 768px) {
  .btn-primary {
    padding: 14px 28px;
    font-size: 14px;
    min-height: 44px;
  }
}

/*
    .btn-outline — token-aware secondary action.
*/
.btn-outline {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 16px 32px;
  border-radius: 999px;
  font-size: 15px;
  letter-spacing: 0.08em;
  border: 1.5px solid var(--sec-btn-border, var(--sec-link, var(--brand-deep)));
  background: transparent;
  color: var(--sec-link, var(--brand-deep));
}
.btn-outline:hover {
  background: var(--sec-link, var(--brand-deep));
  color: var(--sec-bg, var(--text-on-dark));
  border-color: var(--sec-link, var(--brand-deep));
}
@media (max-width: 768px) {
  .btn-outline {
    padding: 14px 24px;
    font-size: 14px;
    min-height: 44px;
  }
}

/*
    Navigation — wireframe look (shared.css) on WordPress menu markup.

        .nav               — desktop primary nav (header-menu)  → <ul class="nav">
        .mobile-menu__nav  — off-canvas accordion (mobile-menu) → <ul class="mobile-menu__nav">
        footer columns      — see _footer.scss

    Tokenised so it repaints per brand. Desktop breakpoint = 768px.
*/
/* ---- Desktop primary nav ---------------------------------------------- */
.nav {
  display: flex;
  align-items: center;
  gap: 0;
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: 16px;
  color: var(--text-muted);
  /* Narrow desktop: compress before the nav hands over to the hamburger.
     Eight items + full-size logo + search + a "Check Availability" CTA only
     fit from 1440px, so the whole header tightens below that (see the
     logo and CTA rules in _header.scss). */
  /* DELIBERATE DEVIATION FROM THE WIREFRAME.
     The wireframe hides .nav only at 768px, so between 769 and 1024 it
     renders all seven items plus the logo, search and CTA against a much
     narrower container. Measured, the wireframe itself overflows by 79px at
     800px wide and scrolls horizontally; this build overflowed by 24px.
     Reproducing that faithfully would mean shipping the bug, so the nav
     hands over to the hamburger a breakpoint earlier. */
}
.nav > li {
  position: relative;
}
.nav > li > a {
  display: block;
  padding: 22px 12px;
  cursor: pointer;
  transition: color 0.2s;
  position: relative;
  text-decoration: none;
  color: inherit;
  white-space: nowrap;
}
.nav > li > a:hover {
  color: var(--brand-deep);
}
.nav > li > a::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 12px;
  right: 12px;
  height: 2px;
  background: var(--brand-sky);
  transform: scaleX(0);
  transition: transform 0.25s ease;
}
.nav > li > a:hover::after {
  transform: scaleX(1);
}
.nav .current-menu-item > a,
.nav .current-menu-ancestor > a {
  font-weight: 500;
  color: var(--brand-deep);
}
.nav .current-menu-item > a::after,
.nav .current-menu-ancestor > a::after {
  transform: scaleX(1);
}
@media (min-width: 1025px) and (max-width: 1439px) {
  .nav {
    font-size: 15px;
  }
  .nav > li > a {
    padding: 20px 10px;
  }
  .nav > li > a::after {
    left: 10px;
    right: 10px;
  }
}
@media (max-width: 1024px) {
  .nav {
    display: none;
  }
}
.nav .sub-menu {
  position: absolute;
  top: 100%;
  left: 16px;
  min-width: 230px;
  margin: 0;
  padding: 8px;
  list-style: none;
  background: var(--surface);
  border: 1px solid var(--brand-border);
  border-radius: 8px;
  box-shadow: var(--shadow-dropdown);
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s;
  z-index: 200;
}
.nav .sub-menu a {
  display: block;
  padding: 8px 16px;
  font-size: 14px;
  color: var(--text-primary);
  text-decoration: none;
}
.nav .sub-menu a:hover {
  background: var(--surface-tint);
  color: var(--brand-deep);
}
.nav .menu-item-has-children:hover > .sub-menu,
.nav .menu-item-has-children:focus-within > .sub-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

/* ---- Mobile accordion nav --------------------------------------------- */
.mobile-menu__nav {
  list-style: none;
  margin: 0;
  padding: 0;
}
.mobile-menu__nav .menu-item {
  border-bottom: 1px solid color-mix(in srgb, var(--brand-border) 55%, var(--surface));
}
.mobile-menu__nav > .menu-item > a,
.mobile-menu__nav .submenu-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  min-height: 52px;
  padding: 14px 24px;
  font-size: 17px;
  font-weight: 500;
  color: var(--brand-deep);
  text-decoration: none;
  background: transparent;
  border: none;
  cursor: pointer;
  font-family: var(--font-body);
  transition: background 0.15s;
}
.mobile-menu__nav > .menu-item > a:hover, .mobile-menu__nav > .menu-item > a:active,
.mobile-menu__nav .submenu-toggle:hover,
.mobile-menu__nav .submenu-toggle:active {
  background: var(--surface-tint);
}
.mobile-menu__nav .menu-item-has-children {
  position: relative;
}
.mobile-menu__nav .menu-item-has-children > a {
  padding-right: 56px;
}
.mobile-menu__nav .submenu-toggle {
  position: absolute;
  top: 0;
  right: 0;
  width: 56px;
  min-height: 52px;
  justify-content: center;
  padding: 0;
}
.mobile-menu__nav .submenu-toggle::after {
  content: "";
  width: 10px;
  height: 10px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg);
  transition: transform 0.3s ease;
}
.mobile-menu__nav .submenu-toggle[aria-expanded=true]::after {
  transform: rotate(-135deg);
}
.mobile-menu__nav .sub-menu {
  list-style: none;
  margin: 0;
  padding: 0;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.35s cubic-bezier(0.4, 0, 0.2, 1);
  background: color-mix(in srgb, var(--surface-tint) 55%, var(--surface));
}
.mobile-menu__nav .sub-menu a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 48px;
  padding: 10px 24px 10px 40px;
  font-size: 15px;
  color: var(--text-muted);
  text-decoration: none;
  transition: background 0.15s, color 0.15s;
}
.mobile-menu__nav .sub-menu a:hover, .mobile-menu__nav .sub-menu a:active {
  background: var(--surface-tint);
  color: var(--brand-deep);
}
.mobile-menu__nav .menu-item-has-children.open > .sub-menu {
  max-height: 800px;
}

/*
    Desktop mega menu — Tours / Destinations / About panels.

    Port of the wireframe `.mega-*` design onto WordPress menu markup, fully
    brand-tokenised (no hard-coded brand colours — see bin/lint-tokens.sh). The
    flagged top-level <li> gets `.has-mega`; the LTT_Mega_Walker injects the
    matching `.mega-panel` partial inside it and suppresses the .sub-menu.

    Desktop only: the whole file is gated at >= 768px so the panels never show
    inside the mobile accordion (which is handled in _menus.scss).
*/
@media (min-width: 768px) {
  /* The flagged item becomes a static child so the absolutely-positioned
     panel spans the sticky header rather than the narrow <li>. */
  .nav > li.has-mega {
    position: static;
    /* Invisible hover bridge: lets the cursor cross from trigger to panel. */
  }
  .nav > li.has-mega::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    height: 10px;
    background: transparent;
    display: none;
  }
  .nav > li.has-mega:hover::after {
    display: block;
  }
  .mega-panel {
    position: absolute;
    top: 100%;
    left: 24px;
    right: 24px;
    max-width: 1344px;
    margin: 0 auto;
    background: var(--surface);
    border: 1px solid var(--brand-border);
    border-top: 3px solid var(--brand-sky);
    box-shadow: var(--shadow-dropdown);
    border-radius: 0 0 12px 12px;
    display: grid;
    grid-template-columns: 170px 210px 1fr 300px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(4px);
    transition: opacity 0.18s ease, transform 0.26s cubic-bezier(0.16, 1, 0.3, 1), visibility 0s linear 0.18s;
    z-index: 200;
    overflow: hidden;
  }
  .nav > li.has-mega:hover > .mega-panel,
  .nav > li.has-mega:focus-within > .mega-panel {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    transition: opacity 0.2s ease, transform 0.28s cubic-bezier(0.16, 1, 0.3, 1), visibility 0s;
    z-index: 210;
  }
  /* ---- Col 1: sidebar filters (Tours) -------------------------------- */
  .mega-sidebar {
    background: var(--surface-tint);
    border-right: 1px solid var(--brand-border);
    padding: 28px 18px;
    font-size: 13px;
  }
  .mega-sidebar .label {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1.4px;
    color: var(--brand-sky-text);
    margin-bottom: 10px;
  }
  .mega-sidebar ul {
    list-style: none;
    margin: 0 0 20px;
    padding: 0;
  }
  .mega-sidebar li {
    padding: 9px 12px;
    color: var(--text-muted);
    cursor: pointer;
    border-radius: 5px;
    transition: background 0.15s, color 0.15s;
    line-height: 1.4;
  }
  .mega-sidebar li:hover {
    background: var(--mega-wash-hover);
    color: var(--brand-deep);
  }
  .mega-sidebar li.active {
    background: var(--brand-sky-fill);
    color: var(--text-on-dark);
    font-weight: 600;
  }
  .mega-sidebar .divider {
    border-top: 1px solid var(--brand-border);
    margin: 14px 0;
  }
  .mega-sidebar .help-link {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 9px 12px;
    color: var(--text-muted);
    cursor: pointer;
    border-radius: 5px;
    font-size: 13px;
    text-decoration: none;
    transition: background 0.15s, color 0.15s;
  }
  .mega-sidebar .help-link svg {
    width: 14px;
    height: 14px;
    stroke: currentColor;
    fill: none;
    stroke-width: 1.5;
    flex-shrink: 0;
  }
  .mega-sidebar .help-link:hover {
    background: var(--mega-wash-hover);
    color: var(--brand-deep);
  }
  /* ---- Col 2: tour list ---------------------------------------------- */
  .mega-tour-list {
    border-right: 1px solid var(--brand-border);
    padding: 12px 0;
    max-height: 460px;
    overflow-y: auto;
  }
  .mega-tour-list::-webkit-scrollbar {
    width: 4px;
  }
  .mega-tour-list::-webkit-scrollbar-thumb {
    background: var(--brand-border);
    border-radius: 4px;
  }
  .mega-tour-empty {
    padding: 18px;
    font-size: 13px;
    color: var(--text-muted);
  }
  .mega-tour-item {
    display: block;
    padding: 10px 14px;
    text-decoration: none;
    cursor: pointer;
    border-left: 3px solid transparent;
    transition: background 0.12s, border-color 0.12s;
  }
  .mega-tour-item:hover, .mega-tour-item.active {
    background: var(--surface-tint);
    border-left-color: var(--brand-sky);
  }
  .mega-tour-item .tour-name {
    font-size: 14px;
    font-weight: 600;
    color: var(--brand-deep);
    margin-bottom: 3px;
  }
  .mega-tour-item .tour-meta {
    font-size: 11px;
    color: var(--text-muted);
    display: flex;
    align-items: center;
    gap: 6px;
  }
  .mega-tour-item .tour-meta .tag {
    display: inline-block;
    padding: 1px 6px;
    border-radius: 3px;
    font-size: 10px;
    font-weight: 600;
    background: var(--mega-tag-bg);
    color: var(--brand-deep);
  }
  .mega-tour-item .tour-desc {
    font-size: 12px;
    color: var(--text-muted);
    margin-top: 4px;
    line-height: 1.35;
  }
  /* ---- Col 3: detail -------------------------------------------------- */
  .mega-detail {
    padding: 24px 28px;
    border-right: 1px solid var(--brand-border);
    display: flex;
    flex-direction: column;
    transition: opacity 0.15s ease;
  }
  .mega-detail .detail-name {
    font-size: 26px;
    font-weight: 400;
    color: var(--brand-deep);
    margin-bottom: 2px;
    font-family: var(--font-body);
  }
  .mega-detail .detail-tree {
    font-size: 11px;
    color: var(--brand-sky-text);
    font-style: italic;
    margin-bottom: 14px;
  }
  .mega-detail .detail-desc {
    font-size: 13px;
    color: var(--text-primary);
    line-height: 1.6;
    margin-bottom: 18px;
  }
  .mega-detail .sig-label {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1.2px;
    color: var(--brand-sky-text);
    margin-bottom: 8px;
  }
  .mega-detail .sig-list {
    list-style: none;
    margin: 0 0 18px;
    padding: 0;
  }
  .mega-detail .sig-list li {
    font-size: 12px;
    color: var(--text-primary);
    padding: 4px 0 4px 16px;
    position: relative;
    line-height: 1.4;
  }
  .mega-detail .sig-list li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 9px;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--brand-sky);
  }
  .mega-detail .detail-meta-row {
    display: flex;
    gap: 24px;
    font-size: 12px;
    color: var(--text-muted);
    margin-top: auto;
    margin-bottom: 18px;
    padding-top: 14px;
    border-top: 1px solid var(--brand-border);
  }
  .mega-detail .meta-item {
    display: flex;
    align-items: center;
    gap: 6px;
  }
  .mega-detail .meta-ico {
    width: 22px;
    height: 22px;
    background: var(--surface-tint);
    border-radius: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--brand-sky);
  }
  .mega-detail .meta-ico svg {
    width: 13px;
    height: 13px;
    stroke: currentColor;
    fill: none;
    stroke-width: 1.6;
  }
  .mega-detail .detail-actions {
    display: flex;
    align-items: center;
    gap: 16px;
  }
  .mega-detail .view-tour-btn {
    padding: 10px 22px;
    background: var(--gradient-button);
    color: var(--gradient-button-fg);
    border-radius: 50px;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    transition: box-shadow 0.3s, transform 0.3s;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    text-decoration: none;
    box-shadow: var(--shadow-cta);
    border: 1px solid var(--border-on-dark);
  }
  .mega-detail .view-tour-btn:hover {
    box-shadow: var(--shadow-cta-hover);
    transform: translateY(-1px);
  }
  .mega-detail .dates-link {
    font-size: 12px;
    color: var(--brand-sky-text);
    text-decoration: underline;
    cursor: pointer;
    transition: color 0.15s;
  }
  .mega-detail .dates-link:hover {
    color: var(--brand-deep);
  }
  /* ---- Col 4: image slider ------------------------------------------- */
  .mega-image {
    margin: 20px 20px 20px 0;
    border-radius: 10px;
    min-height: 380px;
    position: relative;
    overflow: hidden;
    transition: opacity 0.15s ease;
  }
  .mega-image .mega-slides {
    position: relative;
    height: 100%;
    min-height: 380px;
  }
  .mega-image .mega-slide {
    position: absolute;
    inset: 0;
    background-color: var(--brand-deep);
    background-image: var(--gradient-button);
    background-size: cover;
    background-position: center;
    opacity: 0;
    transition: opacity 1s ease-in-out;
  }
  .mega-image .mega-slide.mega-slide-active {
    opacity: 1;
  }
  .mega-image .mega-slide::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 50%;
    background: linear-gradient(to top, var(--brand-ink), transparent);
    opacity: 0.6;
  }
  .mega-image .img-label {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 14px 16px 12px;
    z-index: 3;
    font-size: 11px;
    color: var(--text-on-dark);
    font-weight: 600;
    letter-spacing: 0.3px;
  }
  .mega-image .mega-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 5;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: var(--border-on-dark);
    backdrop-filter: blur(4px);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-on-dark);
    font-size: 15px;
    cursor: pointer;
    opacity: 0;
    transition: opacity 0.2s, background 0.2s;
    border: none;
  }
  .mega-image .mega-arrow.left {
    left: 8px;
  }
  .mega-image .mega-arrow.right {
    right: 8px;
  }
  .mega-image .mega-arrow:hover {
    background: var(--text-on-dark-muted);
  }
  .mega-image:hover .mega-arrow {
    opacity: 1;
  }
  .mega-image .mega-dots {
    position: absolute;
    bottom: 10px;
    right: 14px;
    z-index: 5;
    display: flex;
    gap: 5px;
  }
  .mega-image .mega-dots .dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--text-on-dark-muted);
    cursor: pointer;
    transition: background 0.2s;
    opacity: 0.6;
  }
  .mega-image .mega-dots .dot.active {
    background: var(--text-on-dark);
    opacity: 1;
  }
  /* ---- Destinations panel -------------------------------------------- */
  .mega-panel-destinations {
    grid-template-columns: 1fr 1fr 300px;
  }
  .mega-dest-col {
    padding: 28px 24px;
  }
  .mega-dest-col + .mega-dest-col {
    border-left: 1px solid var(--brand-border);
  }
  .mega-dest-col .mdc-label {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: var(--brand-sky-text);
    margin-bottom: 14px;
  }
  .mega-dest-col ul {
    list-style: none;
    margin: 0;
    padding: 0;
  }
  .mega-dest-col ul li {
    font-size: 14px;
    border-radius: 6px;
    border-left: 2px solid transparent;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
  }
  .mega-dest-col ul li:hover {
    background: var(--surface-tint);
    border-left-color: var(--brand-sky);
  }
  .mega-dest-col ul .mega-dest-link {
    display: block;
    padding: 8px 12px;
    color: var(--text-primary);
    text-decoration: none;
    cursor: pointer;
  }
  .mega-dest-col ul .mega-dest-link:hover {
    color: var(--brand-deep);
  }
  .mega-dest-col ul .li-sub {
    font-size: 12px;
    color: var(--mega-text-faint);
    display: block;
    margin-top: 1px;
  }
  .mega-dest-view-all {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 16px;
    font-size: 13px;
    font-weight: 600;
    color: var(--brand-sky-text);
    text-decoration: none;
    cursor: pointer;
    transition: color 0.15s;
  }
  .mega-dest-view-all svg {
    width: 14px;
    height: 14px;
    stroke: currentColor;
    fill: none;
    stroke-width: 2;
  }
  .mega-dest-view-all:hover {
    color: var(--brand-deep);
  }
  .mega-dest-featured {
    background: var(--brand-deep);
    position: relative;
    overflow: hidden;
  }
  .mega-dest-featured .mdf-img {
    width: 100%;
    height: 200px;
    background-color: var(--brand-ink);
    background-image: var(--gradient-button);
    background-size: cover;
    background-position: center;
  }
  .mega-dest-featured .mdf-body {
    padding: 20px 22px;
  }
  .mega-dest-featured .mdf-kicker {
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 2.5px;
    color: var(--brand-aqua);
    margin-bottom: 8px;
  }
  .mega-dest-featured .mdf-name {
    font-size: 18px;
    font-weight: 600;
    color: var(--text-on-dark);
    margin-bottom: 8px;
    line-height: 1.3;
  }
  .mega-dest-featured .mdf-desc {
    font-size: 13px;
    color: var(--mega-on-deep-muted);
    line-height: 1.6;
    margin-bottom: 16px;
  }
  .mega-dest-featured .mdf-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    font-weight: 600;
    color: var(--brand-aqua);
    text-transform: uppercase;
    letter-spacing: 1px;
    cursor: pointer;
    text-decoration: none;
    transition: color 0.15s;
  }
  .mega-dest-featured .mdf-link svg {
    width: 13px;
    height: 13px;
    stroke: currentColor;
    fill: none;
    stroke-width: 2;
  }
  .mega-dest-featured .mdf-link:hover {
    color: var(--brand-glass);
  }
  /* ---- About panel --------------------------------------------------- */
  .mega-panel-about {
    grid-template-columns: 220px 1fr 280px;
  }
  .mega-about-links {
    padding: 24px 20px;
    border-right: 1px solid var(--brand-border);
  }
  .mega-about-links .mdc-label {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: var(--brand-sky-text);
    margin-bottom: 14px;
  }
  .mega-about-links ul {
    list-style: none;
    margin: 0;
    padding: 0;
  }
  .mega-about-links li {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    font-size: 14px;
    color: var(--text-primary);
    cursor: pointer;
    border-radius: 6px;
    transition: background 0.15s, color 0.15s;
    border-left: 2px solid transparent;
  }
  .mega-about-links li svg {
    width: 15px;
    height: 15px;
    stroke: var(--mega-text-faint);
    fill: none;
    stroke-width: 1.8;
    flex-shrink: 0;
  }
  .mega-about-links li a {
    color: inherit;
    text-decoration: none;
  }
  .mega-about-links li:hover {
    background: var(--surface-tint);
    color: var(--brand-deep);
    border-left-color: var(--brand-sky);
  }
  .mega-about-links li:hover svg {
    stroke: var(--brand-sky);
  }
  .mega-about-story {
    padding: 28px;
    border-right: 1px solid var(--brand-border);
  }
  .mega-about-story .mas-kicker {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: var(--brand-sky-text);
    margin-bottom: 10px;
  }
  .mega-about-story h3 {
    font-family: var(--font-display);
    font-size: 26px;
    font-weight: 400;
    color: var(--brand-deep);
    margin-bottom: 12px;
    line-height: 1.3;
  }
  .mega-about-story p {
    font-size: 13px;
    color: var(--text-muted);
    line-height: 1.65;
    margin-bottom: 16px;
  }
  .mega-about-story .mas-stats {
    display: flex;
    gap: 24px;
    border-top: 1px solid var(--brand-border);
    padding-top: 16px;
  }
  .mega-about-story .ms-num {
    font-size: 24px;
    font-weight: 700;
    color: var(--brand-deep);
    line-height: 1;
  }
  .mega-about-story .ms-label {
    font-size: 11px;
    color: var(--mega-text-faint);
    margin-top: 3px;
  }
  .mega-about-contact {
    background: var(--brand-ink);
    padding: 28px 24px;
  }
  .mega-about-contact .mac-kicker {
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 2.5px;
    color: var(--brand-sky);
    margin-bottom: 16px;
  }
  .mega-about-contact .mac-item {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 13px;
    color: var(--mega-on-ink-muted);
    margin-bottom: 14px;
    line-height: 1.5;
  }
  .mega-about-contact .mac-item svg {
    width: 14px;
    height: 14px;
    stroke: var(--brand-sky);
    fill: none;
    stroke-width: 1.8;
    flex-shrink: 0;
    margin-top: 2px;
  }
  .mega-about-contact .mac-item a {
    color: var(--mega-on-ink-muted);
    text-decoration: none;
    transition: color 0.2s;
  }
  .mega-about-contact .mac-item a:hover {
    color: var(--brand-aqua);
  }
  .mega-about-contact .mac-cta {
    display: block;
    margin-top: 20px;
    padding: 10px 20px;
    background: var(--gradient-button);
    color: var(--gradient-button-fg);
    border: none;
    border-radius: 50px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    box-shadow: var(--shadow-cta);
    transition: box-shadow 0.3s, transform 0.3s;
  }
  .mega-about-contact .mac-cta:hover {
    box-shadow: var(--shadow-cta-hover);
    transform: translateY(-1px);
  }
  /* ---- Tablet: drop the Tours image column so 4 cols never overflow --- */
}
@media (min-width: 768px) and (max-width: 1080px) {
  .mega-panel-tours {
    grid-template-columns: 160px 200px 1fr;
  }
  .mega-image {
    display: none;
  }
  .mega-detail {
    border-right: none;
  }
}
/*
    Mobile (< 768px): the same mega designation drives a tailored accordion.
    The walker (mobile mode) injects a `.sub-menu.mega-mobile` into the flagged
    item, so the existing accordion toggle / max-height in _menus.scss runs it.
    These rules only add the section labels, second lines and the taller cap —
    links inherit the standard `.mobile-menu__nav .sub-menu a` styling.
*/
.mobile-menu__nav .menu-item-has-children.open > .sub-menu.mega-mobile {
  max-height: 2000px;
}
.mobile-menu__nav .mega-mobile .mm-label {
  padding: 16px 24px 4px;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1.4px;
  color: var(--brand-sky-text);
}
.mobile-menu__nav .mega-mobile a {
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 2px;
}
.mobile-menu__nav .mega-mobile .mm-sub {
  display: block;
  font-size: 12px;
  font-weight: 400;
  color: var(--mega-text-faint);
}
.mobile-menu__nav .mega-mobile .mm-address {
  padding: 10px 24px 14px 40px;
  font-size: 14px;
  color: var(--text-muted);
  line-height: 1.5;
}

/*
    Base Element Styles

    Global styles for HTML elements (body, a, img, headings, etc.).
    These apply site-wide without needing classes.

    For utility classes, see:
        _helpers.scss    — layout utilities
        _typography.scss — text utilities
        _colors.scss     — colour utilities
*/
* {
  box-sizing: border-box;
}

/*
    Container width — overrides Bootstrap's grid container.

    Bootstrap tops out at max-width 1320px with 12px gutter padding, giving
    1296px of content. The wireframes use max-width 1440px with 48px padding,
    giving 1344px. That 48px difference shifted every grid on every page, so
    the correction belongs here rather than in any one section.

    Ladder is the wireframe's own: 48 → 32 (≤1024) → 20 (≤768). Bootstrap's
    own max-widths live in min-width media queries at equal specificity, so
    this wins on cascade order — `main` is enqueued after `bootstrap_grid`.
    Rows keep their -12px negative margins, so columns still align to the
    container edge.
*/
.container {
  max-width: 1440px;
  padding-right: 48px;
  padding-left: 48px;
}
@media (max-width: 1024px) {
  .container {
    padding-right: 32px;
    padding-left: 32px;
  }
}
@media (max-width: 768px) {
  .container {
    padding-right: 20px;
    padding-left: 20px;
  }
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: var(--wp-admin--admin-bar--height); /**
* @link https://make.wordpress.org/core/2022/01/07/theme-focused-changes-and-filters-in-wordpress-5-9/#adjusting-for-fixed-header-navigation
*/
}

html,
body {
  min-height: 100vh;
}

body {
  font-family: var(--font-body);
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  color: var(--text-primary);
  display: flex;
  flex-direction: column;
  margin: 0;
}

a {
  transition: all 0.2s ease-in-out;
  text-decoration: none;
  color: var(--brand-deep);
}
a:hover {
  text-decoration: none;
  color: var(--brand-sky-text);
}

main {
  flex: 1;
}

svg,
img {
  max-width: 100%;
  height: auto;
  display: block;
}

p img {
  display: inline-block;
}

.text > :first-child {
  margin-top: 0;
}
.text > :last-child {
  margin-bottom: 0;
}
.text ol,
.text ul {
  line-height: inherit;
  padding-left: 20px;
}
.text li:last-child {
  margin-bottom: 0;
}

h1,
h2,
h3,
h4,
h5 {
  margin-top: 0;
}

@media (min-width: 768px) {
  .alignleft,
  img.alignleft {
    float: left;
    margin-right: 1em;
    margin-bottom: 1em;
  }
}

@media (min-width: 768px) {
  .alignright,
  img.alignright {
    float: right;
    margin-left: 1em;
    margin-bottom: 1em;
  }
}

.aligncenter,
img.aligncenter {
  margin: 1em auto;
}

/* Shared section header (heading + supporting line), centred above a block. */
.s-head {
  text-align: center;
  max-width: 640px;
  margin: 0 auto 64px;
}
.s-head :is(h2, h3, h4, h5, h6) {
  color: var(--sec-fg, var(--brand-deep));
  margin-bottom: 8px;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 44px;
}
@media (max-width: 768px) {
  .s-head :is(h2, h3, h4, h5, h6) {
    font-size: 36px;
  }
}
@media (max-width: 576px) {
  .s-head :is(h2, h3, h4, h5, h6) {
    font-size: 30px;
  }
}
.s-head p {
  color: var(--sec-fg-muted, var(--text-muted));
  font-size: 18px;
  margin: 0;
}

/*
    Site Header — faithful port of the wireframe (shared.css), brand-tokenised.

        .utility-bar   — top strip (phone/email left, agent login right)
        .header        — sticky bar: .logo + .nav + .header-right
        .search-overlay— full-width drop-down search
        .mobile-menu   — off-canvas panel (< 768)
        .scroll-top-btn— branded back-to-top

    Wireframe hard-codes PD hex; here every colour is a var(--…) token so the
    chrome repaints per brand. Mobile breakpoint = 768px (matches the wireframe).
*/
/* ---- Utility bar ------------------------------------------------------- */
.utility-bar {
  background: var(--brand-ink);
  font-size: 14px;
  color: var(--util-text);
  letter-spacing: 0.3px;
}
.utility-bar .container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 7px;
  padding-bottom: 7px;
}
.utility-bar .left {
  display: flex;
  align-items: center;
  gap: 6px;
}
.utility-bar .left .divider {
  width: 1px;
  height: 12px;
  background: var(--util-divider);
  margin: 0 10px;
}
.utility-bar .right {
  display: flex;
  align-items: center;
  gap: 16px;
}
.utility-bar a {
  color: var(--util-text);
  text-decoration: none;
  transition: color 0.2s;
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.utility-bar a:hover {
  color: var(--util-text-hover);
}
.utility-bar svg {
  width: 13px;
  height: 13px;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.5;
  flex-shrink: 0;
}
@media (max-width: 768px) {
  .utility-bar .left a:last-of-type,
  .utility-bar .left .divider {
    display: none;
  }
}

/* ---- Header ------------------------------------------------------------ */
.header {
  border-bottom: 1px solid var(--brand-border);
  position: sticky;
  top: 0;
  background: var(--surface);
  z-index: 100;
  box-shadow: var(--shadow-header);
}
.header .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 0;
  padding-bottom: 0;
  position: relative;
}

.admin-bar .header {
  top: 32px;
}

@media screen and (max-width: 782px) {
  .admin-bar .header {
    top: 46px;
  }
}
.logo {
  display: inline-flex;
  align-items: center;
  font-family: var(--font-display);
  font-size: 26px;
  font-weight: 400;
  color: var(--brand-deep);
  letter-spacing: 0.5px;
  text-decoration: none;
  padding: 18px 0;
  border-right: 1px solid var(--brand-border);
  padding-right: 32px;
  margin-right: 8px;
  flex-shrink: 0;
  /* Narrow desktop: the logo steps down in size (never squashed). */
  /* From $bp-tablet down the nav is a hamburger, so the divider has nothing
     left to divide. */
  /* Small phones (320): a never-shrink logo pushed the search button and
     hamburger 21px off-screen. Here the logo gives ground instead, scaling
     down inside its box rather than squashing. */
}
.logo img {
  width: auto;
  height: 38px;
  max-height: 38px;
}
@media (min-width: 1025px) and (max-width: 1439px) {
  .logo {
    font-size: 22px;
    padding-right: 16px;
  }
  .logo img {
    height: 32px;
    max-height: 32px;
  }
}
@media (min-width: 1025px) and (max-width: 1199px) {
  .logo img {
    height: 28px;
    max-height: 28px;
  }
}
@media (max-width: 1024px) {
  .logo {
    font-size: 22px;
    border-right: none;
    padding-right: 0;
    margin-right: 0;
  }
  .logo img {
    height: 30px;
    max-height: 30px;
  }
}
@media (max-width: 768px) {
  .logo {
    flex-shrink: 1;
    min-width: 0;
  }
  .logo img {
    max-width: 100%;
    object-fit: contain;
    object-position: left center;
  }
}

/* ---- Header right (search + hamburger) -------------------------------- */
.header-right {
  display: flex;
  align-items: center;
  gap: 14px;
  border-left: 1px solid var(--brand-border);
  padding-left: 24px;
  margin-left: 8px;
  /* Narrow desktop: tighten before the nav collapses (see _menus.scss). */
  /* From here down the nav is a hamburger, so the divider reads as clutter. */
}
@media (min-width: 1025px) and (max-width: 1439px) {
  .header-right {
    gap: 10px;
    padding-left: 16px;
  }
}
@media (max-width: 1024px) {
  .header-right {
    border-left: none;
    padding-left: 0;
    margin-left: auto;
    gap: 12px;
  }
}

.search-btn {
  width: 38px;
  height: 38px;
  padding: 0;
  background: transparent;
  border: 1px solid var(--brand-border);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s;
}
.search-btn:hover {
  border-color: var(--brand-sky);
  background: var(--surface-tint);
}
.search-btn svg {
  width: 18px;
  height: 18px;
  stroke: var(--text-muted);
  fill: none;
  stroke-width: 2;
  flex-shrink: 0;
}
@media (max-width: 768px) {
  .search-btn {
    width: 44px;
    height: 44px;
  }
  .search-btn svg {
    width: 20px;
    height: 20px;
  }
}

/* ---- Desktop CTA (View Tours) ------------------------------------------ */
.header-right .cta-btn {
  display: inline-flex;
  align-items: center;
  padding: 12px 28px;
  background: var(--gradient-button);
  color: var(--gradient-button-fg);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  border-radius: 50px;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: box-shadow 0.2s, transform 0.2s;
  /* Narrow desktop: shrink the pill before the nav collapses. */
  /* Small laptops: no room for the pill beside the full nav. The Tours
     panel and the mobile menu still carry the same links. */
  /* Off-canvas menu carries its own CTA (per the wireframe). Hidden from
     $bp-tablet down, matching where .nav hands over to the hamburger. */
}
.header-right .cta-btn:hover {
  box-shadow: var(--shadow-cta-hover);
  transform: translateY(-1px);
}
@media (min-width: 1025px) and (max-width: 1439px) {
  .header-right .cta-btn {
    padding: 11px 18px;
    letter-spacing: 0.5px;
  }
}
@media (min-width: 1025px) and (max-width: 1279px) {
  .header-right .cta-btn {
    display: none;
  }
}
@media (max-width: 1024px) {
  .header-right .cta-btn {
    display: none;
  }
}

/* ---- Hamburger --------------------------------------------------------- */
.mobile-menu-btn {
  display: none;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  background: transparent;
  border: 1px solid var(--brand-border);
  border-radius: 8px;
  cursor: pointer;
  flex-shrink: 0;
  padding: 0;
  position: relative;
  z-index: 1001;
  /* Takes over from the desktop nav at $bp-tablet, not $bp-mobile — see the
     note on .nav in _menus.scss. */
}
.mobile-menu-btn__line {
  display: block;
  width: 20px;
  height: 2px;
  background: var(--brand-deep);
  border-radius: 2px;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  transition: transform 0.3s ease, opacity 0.2s ease, top 0.3s ease;
}
.mobile-menu-btn__line:nth-child(1) {
  top: 13px;
}
.mobile-menu-btn__line:nth-child(2) {
  top: 21px;
}
.mobile-menu-btn__line:nth-child(3) {
  top: 29px;
}
.mobile-menu-btn.open .mobile-menu-btn__line:nth-child(1) {
  top: 21px;
  transform: translateX(-50%) rotate(45deg);
}
.mobile-menu-btn.open .mobile-menu-btn__line:nth-child(2) {
  opacity: 0;
}
.mobile-menu-btn.open .mobile-menu-btn__line:nth-child(3) {
  top: 21px;
  transform: translateX(-50%) rotate(-45deg);
}
@media (max-width: 1024px) {
  .mobile-menu-btn {
    display: flex;
  }
}

/* ---- Mobile menu backdrop + panel ------------------------------------- */
.mobile-menu-backdrop {
  position: fixed;
  inset: 0;
  background: var(--backdrop);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  z-index: 999;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s;
  pointer-events: none;
}
.mobile-menu-backdrop.open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.mobile-menu {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  max-width: 400px;
  background: var(--surface);
  z-index: 1000;
  transform: translateX(100%);
  /* Closed, the panel is only slid off-screen, so without visibility:hidden
     its links stay in the tab order: a keyboard user tabs through ~30
     invisible links on every page (axe aria-hidden-focus). visibility flips
     after the slide-out finishes, and at once on the way in. */
  visibility: hidden;
  transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1), visibility 0s linear 0.35s;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-shadow: var(--shadow-panel);
}
.mobile-menu.open {
  transform: translateX(0);
  visibility: visible;
  transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1), visibility 0s;
}
.mobile-menu__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 24px;
  border-bottom: 1px solid var(--brand-border);
  flex-shrink: 0;
}
.mobile-menu__logo {
  display: inline-flex;
  align-items: center;
  font-family: var(--font-display);
  font-size: 24px;
  font-weight: 400;
  color: var(--brand-deep);
  text-decoration: none;
}
.mobile-menu__logo img {
  height: 32px;
  width: auto;
}
.mobile-menu__close {
  width: 44px;
  height: 44px;
  background: transparent;
  border: 1px solid var(--brand-border);
  border-radius: 8px;
  cursor: pointer;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}
.mobile-menu__close span {
  display: block;
  width: 18px;
  height: 2px;
  background: var(--brand-deep);
  border-radius: 2px;
  position: absolute;
}
.mobile-menu__close span:first-child {
  transform: rotate(45deg);
}
.mobile-menu__close span:last-child {
  transform: rotate(-45deg);
}
.mobile-menu__body {
  flex: 1;
  overflow-y: auto;
  padding: 8px 0;
  -webkit-overflow-scrolling: touch;
}
.mobile-menu__footer {
  flex-shrink: 0;
  padding: 20px 24px 28px;
  border-top: 1px solid var(--brand-border);
  background: color-mix(in srgb, var(--surface-tint) 60%, var(--surface));
}
.mobile-menu__cta {
  display: block;
  width: 100%;
  padding: 16px 24px;
  background: var(--gradient-button);
  background-origin: border-box;
  color: var(--gradient-button-fg);
  font-size: 15px;
  font-weight: 800;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 50px;
  cursor: pointer;
  text-align: center;
  box-shadow: var(--shadow-cta);
  transition: all 0.3s;
  margin-bottom: 16px;
}
.mobile-menu__cta:hover {
  color: var(--gradient-button-fg);
  box-shadow: var(--shadow-cta-hover);
  transform: translateY(-1px);
}
.mobile-menu__contact {
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: center;
}
.mobile-menu__contact a {
  font-size: 14px;
  color: var(--text-muted);
  text-decoration: none;
  transition: color 0.15s;
}
.mobile-menu__contact a:hover {
  color: var(--brand-deep);
}

/* ---- Search overlay ---------------------------------------------------- */
.search-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 500;
  visibility: hidden;
  transform: translateY(-100%);
  transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1), visibility 0s linear 0.35s;
}
.search-overlay.active {
  visibility: visible;
  transform: translateY(0);
  transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}
.search-overlay-backdrop {
  position: fixed;
  inset: 0;
  background: var(--search-backdrop);
  backdrop-filter: blur(4px);
  opacity: 0;
  transition: opacity 0.35s;
  pointer-events: none;
  z-index: 499;
}
.search-overlay-backdrop.active {
  opacity: 1;
  pointer-events: all;
}
.search-overlay-inner {
  background: var(--surface);
  border-bottom: 3px solid var(--brand-sky);
  padding: 32px 48px 40px;
  box-shadow: var(--shadow-dropdown);
}
@media (max-width: 1024px) {
  .search-overlay-inner {
    padding: 28px 32px 36px;
  }
}
@media (max-width: 768px) {
  .search-overlay-inner {
    padding: 24px 20px 32px;
  }
}
@media (max-width: 480px) {
  .search-overlay-inner {
    padding: 20px 16px 28px;
  }
}
.search-overlay-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 24px;
}
.search-overlay-header span {
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 2.5px;
  color: var(--brand-sky-text);
}

.search-close-btn {
  width: 40px;
  height: 40px;
  padding: 0;
  border-radius: 50%;
  border: 1px solid var(--brand-border);
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s;
  flex-shrink: 0;
}
.search-close-btn:hover {
  border-color: var(--brand-sky);
  background: var(--surface-tint);
}
.search-close-btn svg {
  width: 18px;
  height: 18px;
  stroke: var(--text-muted);
  fill: none;
  stroke-width: 2;
  flex-shrink: 0;
}

.search-input-wrap {
  position: relative;
  margin-bottom: 28px;
}
.search-input-wrap .si-icon {
  position: absolute;
  left: 24px;
  top: 50%;
  transform: translateY(-50%);
  width: 22px;
  height: 22px;
  stroke: var(--text-muted);
  fill: none;
  stroke-width: 2;
  pointer-events: none;
}
.search-input-wrap input {
  width: 100%;
  padding: 20px 24px 20px 62px;
  font-size: 20px;
  font-family: var(--font-body);
  border: 2px solid var(--brand-border);
  border-radius: 50px;
  color: var(--brand-deep);
  outline: none;
  transition: border-color 0.2s;
  background: color-mix(in srgb, var(--surface-tint) 40%, var(--surface));
}
.search-input-wrap input:focus {
  border-color: var(--brand-sky);
  background: var(--surface);
}
.search-input-wrap input::placeholder {
  color: var(--text-muted);
}
@media (max-width: 768px) {
  .search-input-wrap input {
    font-size: 18px;
    padding: 16px 20px 16px 52px;
  }
}
@media (max-width: 480px) {
  .search-input-wrap input {
    font-size: 16px;
    padding: 14px 16px 14px 48px;
  }
}
@media (max-width: 480px) {
  .search-input-wrap .si-icon {
    left: 16px;
    width: 18px;
    height: 18px;
  }
}

.search-popular {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}
.search-popular-label {
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 2px;
  color: var(--text-muted);
  flex-shrink: 0;
}
.search-popular-tags {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.search-tag {
  padding: 7px 16px;
  border-radius: 50px;
  border: 1px solid var(--brand-border);
  background: var(--surface-tint);
  font-size: 14px;
  color: var(--brand-deep);
  cursor: pointer;
  transition: all 0.2s;
  font-weight: 500;
  text-decoration: none;
}
.search-tag:hover {
  border-color: var(--brand-sky);
  background: color-mix(in srgb, var(--brand-sky) 18%, var(--surface));
}

.admin-bar .search-overlay {
  top: 32px;
}

@media screen and (max-width: 782px) {
  .admin-bar .search-overlay {
    top: 46px;
  }
}
/* ---- Scroll-to-top ----------------------------------------------------- */
.scroll-top-btn {
  position: fixed;
  bottom: 32px;
  right: 32px;
  z-index: 900;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--gradient-button);
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--shadow-cta);
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.3s, transform 0.3s;
  pointer-events: none;
}
.scroll-top-btn.visible {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}
.scroll-top-btn:hover {
  box-shadow: var(--shadow-cta-hover);
  transform: translateY(-2px);
}
.scroll-top-btn:active {
  transform: scale(0.95);
}
.scroll-top-btn svg {
  width: 20px;
  height: 20px;
  stroke: var(--gradient-button-fg);
  fill: none;
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

body.menu-open {
  overflow: hidden;
}

/*
    Site Footer — faithful port of the wireframe (shared.css), brand-tokenised.

        .footer-top   — brand block + 5 link columns
        .footer-accred— accreditation badges
        .footer-bottom— copyright, NZ badge, legal

    Dark ground (--footer-bg = --brand-ink); accents are brand tokens, body text
    is neutral white-alpha so it works on every brand's dark colour.
*/
.footer {
  background: var(--footer-bg);
  color: var(--footer-text);
}
.footer .container {
  padding-top: 56px;
  padding-bottom: 0;
}

/* ---- Top: brand + columns --------------------------------------------- */
.footer-top {
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: 48px;
  margin-bottom: 48px;
}
@media (max-width: 992px) {
  .footer-top {
    grid-template-columns: 1fr;
    gap: 48px;
  }
}

.footer-brand-name {
  display: inline-flex;
  align-items: center;
  font-family: var(--font-display);
  font-size: 30px;
  font-weight: 400;
  color: var(--text-on-dark);
  letter-spacing: 0.5px;
  line-height: 1;
  margin-bottom: 4px;
  text-decoration: none;
}

.footer-brand-logo {
  display: inline-block;
  margin-bottom: 22px;
}
.footer-brand-logo img {
  height: 54px;
  width: auto;
  max-width: 100%;
}

.footer-brand-tagline {
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 4px;
  color: var(--footer-accent);
  margin-bottom: 18px;
}

.footer-brand p {
  font-size: 14px;
  color: var(--footer-text);
  line-height: 1.75;
  margin-bottom: 24px;
}

.footer-social {
  display: flex;
  gap: 10px;
  margin-bottom: 28px;
  list-style: none;
  padding: 0;
}
.footer-social a {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 1px solid var(--footer-divider);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.25s;
  text-decoration: none;
}
.footer-social a svg {
  width: 17px;
  height: 17px;
  fill: var(--footer-text);
  transition: fill 0.25s;
}
.footer-social a:hover {
  border-color: var(--footer-accent);
  background: color-mix(in srgb, var(--footer-accent) 10%, transparent);
}
.footer-social a:hover svg {
  fill: var(--footer-accent);
}

.footer-contact-snippet .fcs-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 13px;
  color: var(--footer-text);
  margin-bottom: 10px;
  line-height: 1.5;
}
.footer-contact-snippet .fcs-item svg {
  width: 14px;
  height: 14px;
  stroke: var(--footer-accent);
  fill: none;
  stroke-width: 1.8;
  flex-shrink: 0;
  margin-top: 2px;
}
.footer-contact-snippet .fcs-item a {
  color: var(--footer-text);
  text-decoration: none;
  transition: color 0.2s;
}
.footer-contact-snippet .fcs-item a:hover {
  color: var(--footer-accent);
}

/* Footer columns — WP footer-menu (depth 3): li = column, > a = heading.
   A third level is a second group stacked in the same column (e.g. Our
   Policies under Help), with its parent styled as another heading. */
.footer-cols {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 32px 24px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.footer-cols > li > a,
.footer-cols .sub-menu .menu-item-has-children > a {
  display: block;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 2.5px;
  color: var(--footer-accent);
  margin-bottom: 18px;
  font-weight: 600;
  text-decoration: none;
  pointer-events: none;
}
.footer-cols .sub-menu {
  list-style: none;
  margin: 0;
  padding: 0;
}
.footer-cols .sub-menu a {
  display: block;
  font-size: 14px;
  color: var(--footer-link);
  text-decoration: none;
  margin-bottom: 10px;
  transition: color 0.2s;
  line-height: 1.4;
}
.footer-cols .sub-menu a:hover {
  color: var(--footer-link-hover);
}
.footer-cols .sub-menu .menu-item-has-children {
  margin-top: 28px;
}
.footer-cols .sub-menu .menu-item-has-children > a {
  font-size: 11px;
  color: var(--footer-accent);
  margin-bottom: 18px;
}
@media (max-width: 992px) {
  .footer-cols {
    grid-template-columns: repeat(3, 1fr);
    gap: 24px 32px;
  }
}
@media (max-width: 768px) {
  .footer-cols {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 480px) {
  .footer-cols {
    grid-template-columns: 1fr;
  }
}

/* ---- Accreditations ---------------------------------------------------- */
.footer-accred {
  border-top: 1px solid var(--footer-divider);
  padding: 28px 0;
  display: flex;
  align-items: center;
  gap: 32px;
  flex-wrap: wrap;
}

.footer-accred-label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 2px;
  color: var(--footer-text-dim);
  font-weight: 600;
  flex-shrink: 0;
}

.footer-accred-badges {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
  list-style: none;
  margin: 0;
  padding: 0;
}

.accred-logo {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 46px;
  padding: 7px 12px;
  border-radius: 6px;
  background: var(--surface);
}
.accred-logo a {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  max-width: 100%;
}
.accred-logo img {
  height: 100%;
  width: auto;
  max-width: 104px;
  object-fit: contain;
}

.footer-accred-text {
  margin: 0;
  font-size: 12px;
  color: var(--footer-text-dim);
}

/* ---- Bottom bar -------------------------------------------------------- */
.footer-bottom {
  border-top: 1px solid var(--footer-divider);
  padding: 18px 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 12px;
  color: var(--footer-text-dim);
  flex-wrap: wrap;
  gap: 8px 24px;
}

.footer-bottom-left {
  display: flex;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
}

.footer-nz-badge {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--footer-text);
}
.footer-nz-badge svg {
  width: 14px;
  height: 14px;
  stroke: var(--footer-accent);
  fill: none;
  stroke-width: 1.8;
}

.footer-legal {
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
  list-style: none;
  margin: 0;
  padding: 0;
}
.footer-legal a {
  color: var(--footer-text-dim);
  text-decoration: none;
  transition: color 0.2s;
  font-size: 12px;
}
.footer-legal a:hover {
  color: var(--footer-accent);
}

/*
    Newsletter — global dark glass band rendered above the footer.
    Every colour comes from --newsletter-* / --brand-* tokens, so each brand
    repaints the band automatically. Structural neutrals only otherwise.
*/
/*
    The band sits between the testimonials section (usually the `primary` dark
    band) and the footer. All three started from --brand-deep, so they read as
    one unbroken dark block and the signup disappeared into it (client, 28 Jul
    2026). The band is now a light wash and the signup itself is an inset dark
    panel, which separates it from the section above AND the footer below
    without touching a single --newsletter-* colour: every child still sits on
    the same dark ground it was designed for.
*/
.newsletter {
  padding: 80px 0;
  background: var(--newsletter-band-bg);
}

.newsletter-inner {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 96px;
  align-items: center;
  padding: 64px;
  border-radius: 24px;
  background: var(--newsletter-bg);
  color: var(--newsletter-text);
  box-shadow: 0 24px 60px color-mix(in srgb, var(--brand-ink) 20%, transparent);
}
@media (max-width: 992px) {
  .newsletter-inner {
    grid-template-columns: 1fr;
    gap: 48px;
    padding: 32px;
  }
}

.newsletter-kicker {
  text-transform: uppercase;
  letter-spacing: 3px;
  font-size: 12px;
  font-weight: 600;
  color: var(--newsletter-kicker);
  margin-bottom: 16px;
}

.newsletter-left h2 {
  font-family: var(--font-display);
  font-size: 48px;
  font-weight: 400;
  line-height: 1.2;
  text-wrap: balance;
  color: var(--newsletter-heading);
  margin-bottom: 16px;
}
@media (max-width: 768px) {
  .newsletter-left h2 {
    font-size: 32px;
  }
}

.newsletter-intro {
  color: var(--newsletter-text);
  line-height: 1.8;
  margin-bottom: 24px;
}

.newsletter-benefits {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.newsletter-benefits li {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--newsletter-text);
}
.newsletter-benefits .nb-icon {
  flex: 0 0 auto;
  display: flex;
  width: 22px;
  height: 22px;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--newsletter-glass-bg);
}
.newsletter-benefits .nb-icon svg {
  width: 13px;
  height: 13px;
  fill: none;
  stroke: var(--newsletter-kicker);
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.newsletter-right {
  padding: 48px;
  background: var(--newsletter-glass-bg);
  border: 1px solid var(--newsletter-glass-border);
  border-radius: 8px;
  backdrop-filter: blur(8px);
}
.newsletter-right h3 {
  color: var(--newsletter-heading);
  margin-bottom: 8px;
}

.newsletter-form-intro {
  color: var(--newsletter-text);
  font-size: 14px;
  margin-bottom: 24px;
}

.newsletter-form {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 16px;
}
.newsletter-form input[type=text],
.newsletter-form input[type=email] {
  width: 100%;
  padding: 14px 18px;
  border-radius: 50px;
  border: 1px solid var(--newsletter-input-border);
  background: var(--newsletter-input-bg);
  color: var(--newsletter-heading);
}
.newsletter-form input[type=text]::placeholder,
.newsletter-form input[type=email]::placeholder {
  color: var(--newsletter-placeholder);
}
.newsletter-form input[type=text]:focus,
.newsletter-form input[type=email]:focus {
  outline: none;
  border-color: var(--brand-sky);
}
.newsletter-form .gform_button,
.newsletter-form button {
  background: var(--gradient-button);
  color: var(--gradient-button-fg);
  border: 0;
  padding: 14px 22px;
  border-radius: 50px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  cursor: pointer;
}

.newsletter-disclaimer,
.newsletter-form-placeholder {
  font-size: 12px;
  color: var(--newsletter-disclaimer);
  margin: 0;
}

/*
    Gravity Forms embedded in a dark glass newsletter surface — recolour the
    form theme and style its validation (error) and confirmation states. Shared
    by the footer band (.newsletter-form) and the blog index inline banner
    (.bin-form-wrap), which both render the same form on the same dark glass, so
    the GF skin lives once here. Inputs override the form theme's own
    custom-property styling, so a few declarations need !important to win.
*/
.newsletter-form,
.bin-form-wrap {
  /* Validation (error) state */
  /* Confirmation (submitted) state */
}
.newsletter-form .gform_wrapper,
.bin-form-wrap .gform_wrapper {
  margin: 0;
}
.newsletter-form .gform_fields,
.bin-form-wrap .gform_fields {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.newsletter-form .gfield_label,
.bin-form-wrap .gfield_label {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.newsletter-form input[type=text],
.newsletter-form input[type=email],
.bin-form-wrap input[type=text],
.bin-form-wrap input[type=email] {
  background: var(--newsletter-input-bg) !important;
  border: 1px solid var(--newsletter-input-border) !important;
  color: var(--newsletter-heading) !important;
  border-radius: 50px !important;
}
.newsletter-form input[type=text]::placeholder,
.newsletter-form input[type=email]::placeholder,
.bin-form-wrap input[type=text]::placeholder,
.bin-form-wrap input[type=email]::placeholder {
  color: var(--newsletter-placeholder) !important;
}
.newsletter-form input[type=text]:focus,
.newsletter-form input[type=email]:focus,
.bin-form-wrap input[type=text]:focus,
.bin-form-wrap input[type=email]:focus {
  border-color: var(--brand-sky) !important;
  box-shadow: none !important;
}
.newsletter-form .gform_footer,
.bin-form-wrap .gform_footer {
  margin: 16px 0 0;
  padding: 0;
}
.newsletter-form .gform_button,
.bin-form-wrap .gform_button {
  width: 100% !important;
  background: var(--gradient-button) !important;
  color: var(--gradient-button-fg) !important;
  border: 0 !important;
  padding: 14px 22px !important;
  border-radius: 50px !important;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  cursor: pointer;
}
.newsletter-form .gfield_required,
.bin-form-wrap .gfield_required {
  color: var(--newsletter-kicker);
}
.newsletter-form .gfield_error input[type=text],
.newsletter-form .gfield_error input[type=email],
.bin-form-wrap .gfield_error input[type=text],
.bin-form-wrap .gfield_error input[type=email] {
  border-color: var(--newsletter-error) !important;
}
.newsletter-form .gfield_validation_message,
.newsletter-form .validation_message,
.bin-form-wrap .gfield_validation_message,
.bin-form-wrap .validation_message {
  margin-top: 6px;
  padding: 0;
  background: none;
  border: 0;
  color: var(--newsletter-error);
  font-size: 12px;
}
.newsletter-form .gform_validation_errors,
.bin-form-wrap .gform_validation_errors {
  margin: 0 0 16px;
  padding: 8px 16px !important;
  background: var(--newsletter-error-bg) !important;
  border: 1px solid var(--newsletter-error-strong) !important;
  border-radius: 6px;
  box-shadow: none;
}
.newsletter-form .gform_validation_errors .gform_submission_error,
.bin-form-wrap .gform_validation_errors .gform_submission_error {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 !important;
  padding: 0 !important;
  min-height: 0 !important;
  background: none !important;
  border: 0 !important;
  color: var(--newsletter-error-strong) !important;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.5;
}
.newsletter-form .gform_validation_errors .gform-icon,
.bin-form-wrap .gform_validation_errors .gform-icon {
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  font-size: 18px;
  color: var(--newsletter-error-strong);
}
.newsletter-form .gform_validation_errors a,
.bin-form-wrap .gform_validation_errors a {
  color: var(--newsletter-error-strong);
}
.newsletter-form .gform_confirmation_message,
.bin-form-wrap .gform_confirmation_message {
  color: var(--newsletter-success);
  font-weight: 600;
  line-height: 1.5;
}

/**
 * Gravity Forms - Orbital Theme Overrides
 *
 * Styles for GF 2.9+ Orbital theme.
 * Uses CSS custom properties to override Orbital defaults.
 *
 * Structure:
 *   1. CSS Custom Properties (theme-wide overrides)
 *   2. Direct Style Overrides (elements Orbital doesn't fully control)
 *   3. Validation & Error States
 *   4. Honeypot Field (spam protection)
 */
.gform_wrapper.gform-theme--orbital[data-form-index] {
  --gf-color-primary: var(--brand-sky);
  --gf-ctrl-label-font-family-primary: var(--font-body);
  --gf-ctrl-label-font-size-primary: 14px;
  --gf-ctrl-label-font-weight-primary: 600;
  --gf-ctrl-label-color-primary: var(--brand-deep);
  --gf-ctrl-font-family: var(--font-body);
  --gf-ctrl-font-size: 16px;
  --gf-ctrl-line-height: 1.5;
  --gf-ctrl-color: var(--brand-deep);
  --gf-ctrl-color-placeholder: var(--text-muted);
  --gf-ctrl-bg-color: #fff;
  --gf-ctrl-border-color: var(--brand-border);
  --gf-ctrl-border-width: 1px;
  --gf-ctrl-border-radius: 4px;
  --gf-ctrl-padding-x: 16px;
  --gf-ctrl-padding-y: 12px;
  --gf-ctrl-border-color-focus: var(--brand-sky);
  --gf-ctrl-focus-ring-color: color-mix(in srgb, var(--brand-sky) 22%, transparent);
  --gf-ctrl-select-color: var(--brand-deep);
  --gf-ctrl-choice-label-color: var(--brand-deep);
  --gf-ctrl-btn-font-family: var(--font-body);
  --gf-ctrl-btn-font-size: 16px;
  --gf-ctrl-btn-font-weight: 600;
  --gf-ctrl-btn-color: #fff;
  --gf-ctrl-btn-color-hover: #fff;
  --gf-ctrl-btn-bg-color: var(--brand-sky-fill);
  --gf-ctrl-btn-bg-color-hover: var(--brand-sky-fill-hover);
  --gf-ctrl-btn-border-color: var(--brand-sky-fill);
  --gf-ctrl-btn-border-color-hover: var(--brand-sky-fill-hover);
  --gf-ctrl-btn-border-radius: 4px;
  --gf-ctrl-btn-padding-x: 24px;
  --gf-ctrl-btn-padding-y: 12px;
  --gf-field-pg-row-gap: 24px;
  --gf-form-gap-y: 24px;
}

.gform_wrapper.gform-theme--orbital {
  font-family: var(--font-body);
}
.gform_wrapper.gform-theme--orbital .gform_required_legend {
  display: none;
}
.gform_wrapper.gform-theme--orbital .gfield_required {
  color: inherit;
}
.gform_wrapper.gform-theme--orbital textarea {
  min-height: 120px;
  resize: vertical;
}
.gform_wrapper.gform-theme--orbital select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6' fill='none'%3E%3Cpath d='M1 1L5 5L9 1' stroke='%23959a9e' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 16px center;
  background-size: 10px;
  padding-right: 48px;
}
.gform_wrapper.gform-theme--orbital .gform_footer,
.gform_wrapper.gform-theme--orbital .gform_page_footer {
  margin-top: 24px;
  padding: 0;
}

.gform_wrapper.gform-theme--orbital .gfield_validation_message,
.gform_wrapper.gform-theme--orbital .validation_message {
  margin-top: 8px;
  font-size: 12px;
  line-height: 1.5;
  color: #dc3545;
}
.gform_wrapper.gform-theme--orbital .gfield_error input,
.gform_wrapper.gform-theme--orbital .gfield_error select,
.gform_wrapper.gform-theme--orbital .gfield_error textarea {
  border-color: #dc3545;
}
.gform_wrapper.gform-theme--orbital .gform_submission_error {
  margin-bottom: 24px;
  padding: 16px;
  font-size: 14px;
  color: #dc3545;
  background-color: rgba(220, 53, 69, 0.1);
  border-radius: 4px;
}
.gform_wrapper.gform-theme--orbital .gform_confirmation_message {
  padding: 24px;
  font-size: 16px;
  line-height: 1.5;
  color: #28a745;
  background-color: rgba(40, 167, 69, 0.1);
  border-radius: 4px;
}

.gform_wrapper .gform_validation_container {
  display: none !important;
  position: absolute !important;
  left: -9999px !important;
}

.enquiry-form .gform_wrapper,
.review-modal__form .gform_wrapper,
.callback-modal__form .gform_wrapper {
  margin: 0;
}
.enquiry-form .gform_fields,
.review-modal__form .gform_fields,
.callback-modal__form .gform_fields {
  row-gap: 32px !important;
  column-gap: 16px !important;
}
@media (max-width: 768px) {
  .enquiry-form .gfield--width-half,
  .review-modal__form .gfield--width-half,
  .callback-modal__form .gfield--width-half {
    grid-column: span 12 !important;
  }
}
.enquiry-form .gfield_label,
.review-modal__form .gfield_label,
.callback-modal__form .gfield_label {
  margin-bottom: 6px !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  color: var(--text-primary) !important;
}
.enquiry-form .gfield_required,
.review-modal__form .gfield_required,
.callback-modal__form .gfield_required {
  color: #dc3545 !important;
}
.enquiry-form input[type=text],
.enquiry-form input[type=email],
.enquiry-form input[type=tel],
.enquiry-form input[type=number],
.enquiry-form input[type=file],
.enquiry-form select,
.enquiry-form textarea,
.review-modal__form input[type=text],
.review-modal__form input[type=email],
.review-modal__form input[type=tel],
.review-modal__form input[type=number],
.review-modal__form input[type=file],
.review-modal__form select,
.review-modal__form textarea,
.callback-modal__form input[type=text],
.callback-modal__form input[type=email],
.callback-modal__form input[type=tel],
.callback-modal__form input[type=number],
.callback-modal__form input[type=file],
.callback-modal__form select,
.callback-modal__form textarea {
  padding: 14px 16px !important;
  font-family: var(--font-body) !important;
  font-size: 15px !important;
  color: var(--text-primary) !important;
  background-color: var(--surface) !important;
  border: 1.5px solid var(--brand-border) !important;
  border-radius: 10px !important;
  block-size: auto !important;
  min-block-size: 0 !important;
  box-shadow: none !important;
}
.enquiry-form input[type=text]:focus, .enquiry-form input[type=text]:focus-visible,
.enquiry-form input[type=email]:focus,
.enquiry-form input[type=email]:focus-visible,
.enquiry-form input[type=tel]:focus,
.enquiry-form input[type=tel]:focus-visible,
.enquiry-form input[type=number]:focus,
.enquiry-form input[type=number]:focus-visible,
.enquiry-form input[type=file]:focus,
.enquiry-form input[type=file]:focus-visible,
.enquiry-form select:focus,
.enquiry-form select:focus-visible,
.enquiry-form textarea:focus,
.enquiry-form textarea:focus-visible,
.review-modal__form input[type=text]:focus,
.review-modal__form input[type=text]:focus-visible,
.review-modal__form input[type=email]:focus,
.review-modal__form input[type=email]:focus-visible,
.review-modal__form input[type=tel]:focus,
.review-modal__form input[type=tel]:focus-visible,
.review-modal__form input[type=number]:focus,
.review-modal__form input[type=number]:focus-visible,
.review-modal__form input[type=file]:focus,
.review-modal__form input[type=file]:focus-visible,
.review-modal__form select:focus,
.review-modal__form select:focus-visible,
.review-modal__form textarea:focus,
.review-modal__form textarea:focus-visible,
.callback-modal__form input[type=text]:focus,
.callback-modal__form input[type=text]:focus-visible,
.callback-modal__form input[type=email]:focus,
.callback-modal__form input[type=email]:focus-visible,
.callback-modal__form input[type=tel]:focus,
.callback-modal__form input[type=tel]:focus-visible,
.callback-modal__form input[type=number]:focus,
.callback-modal__form input[type=number]:focus-visible,
.callback-modal__form input[type=file]:focus,
.callback-modal__form input[type=file]:focus-visible,
.callback-modal__form select:focus,
.callback-modal__form select:focus-visible,
.callback-modal__form textarea:focus,
.callback-modal__form textarea:focus-visible {
  border-color: var(--brand-sky) !important;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand-sky) 12%, transparent) !important;
  outline: none !important;
}
.enquiry-form select,
.review-modal__form select,
.callback-modal__form select {
  padding-right: 48px !important;
}
.enquiry-form input[type=file],
.review-modal__form input[type=file],
.callback-modal__form input[type=file] {
  padding: 8px 16px !important;
  cursor: pointer;
}
.enquiry-form input[type=file]::file-selector-button,
.review-modal__form input[type=file]::file-selector-button,
.callback-modal__form input[type=file]::file-selector-button {
  margin-right: 16px !important;
  padding: 7px 18px !important;
  border: 1.5px solid var(--brand-border) !important;
  border-radius: 50px !important;
  background: var(--surface-tint) !important;
  font-family: var(--font-body) !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  line-height: 18px !important;
  color: var(--brand-deep) !important;
  cursor: pointer;
  transition: background 0.2s, border-color 0.2s;
}
.enquiry-form input[type=file]:hover::file-selector-button,
.review-modal__form input[type=file]:hover::file-selector-button,
.callback-modal__form input[type=file]:hover::file-selector-button {
  border-color: var(--brand-sky) !important;
  background: var(--surface) !important;
}
.enquiry-form textarea,
.review-modal__form textarea,
.callback-modal__form textarea {
  block-size: 140px !important;
  min-block-size: 140px !important;
  resize: vertical !important;
}
.enquiry-form .gfield_error input,
.enquiry-form .gfield_error select,
.enquiry-form .gfield_error textarea,
.review-modal__form .gfield_error input,
.review-modal__form .gfield_error select,
.review-modal__form .gfield_error textarea,
.callback-modal__form .gfield_error input,
.callback-modal__form .gfield_error select,
.callback-modal__form .gfield_error textarea {
  border-color: #dc3545 !important;
  box-shadow: 0 0 0 3px rgba(220, 53, 69, 0.1) !important;
}
.enquiry-form .gform_validation_errors,
.review-modal__form .gform_validation_errors,
.callback-modal__form .gform_validation_errors {
  margin: 0 0 16px !important;
  padding: 12px 16px !important;
  background: rgba(220, 53, 69, 0.08) !important;
  border: 1px solid #dc3545 !important;
  border-radius: 10px !important;
  box-shadow: none !important;
}
.enquiry-form .gform_validation_errors .gform_submission_error,
.review-modal__form .gform_validation_errors .gform_submission_error,
.callback-modal__form .gform_validation_errors .gform_submission_error {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  align-items: flex-start;
  justify-content: flex-start !important;
  text-align: left !important;
  gap: 8px;
  margin: 0 !important;
  padding: 0 !important;
  min-height: 0 !important;
  background: none !important;
  border: 0 !important;
  color: #dc3545 !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  line-height: 1.5 !important;
}
.enquiry-form .gform_validation_errors .gform-icon,
.review-modal__form .gform_validation_errors .gform-icon,
.callback-modal__form .gform_validation_errors .gform-icon {
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  margin: 0 !important;
  font-size: 18px;
  line-height: 21px;
  color: #dc3545;
}
.enquiry-form .gform_footer,
.review-modal__form .gform_footer,
.callback-modal__form .gform_footer {
  margin-top: 8px !important;
  padding: 0 !important;
}
.enquiry-form .gform_button,
.review-modal__form .gform_button,
.callback-modal__form .gform_button {
  inline-size: 100% !important;
  block-size: auto !important;
  padding: 16px 40px !important;
  background: var(--gradient-button) !important;
  background-origin: border-box !important;
  color: var(--gradient-button-fg) !important;
  border: 1px solid var(--border-on-dark) !important;
  border-radius: 50px !important;
  font-family: var(--font-body) !important;
  font-size: 15px !important;
  font-weight: 800 !important;
  letter-spacing: 1.2px !important;
  text-transform: uppercase !important;
  box-shadow: var(--shadow-cta) !important;
  cursor: pointer;
  transition: transform 0.3s cubic-bezier(0.23, 1, 0.32, 1), box-shadow 0.3s ease;
}
.enquiry-form .gform_button:hover,
.review-modal__form .gform_button:hover,
.callback-modal__form .gform_button:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-cta-hover) !important;
}
.enquiry-form .gform_button:active,
.review-modal__form .gform_button:active,
.callback-modal__form .gform_button:active {
  transform: scale(0.99);
}
.enquiry-form .gform_confirmation_message,
.review-modal__form .gform_confirmation_message,
.callback-modal__form .gform_confirmation_message {
  padding: 24px !important;
  text-align: center;
  color: var(--brand-deep) !important;
  background: var(--surface-tint) !important;
  border: 1px solid var(--brand-sky) !important;
  border-radius: 10px !important;
  font-size: 16px;
}
.enquiry-form .gform_confirmation_message svg,
.review-modal__form .gform_confirmation_message svg,
.callback-modal__form .gform_confirmation_message svg {
  width: 48px;
  height: 48px;
  margin: 0 auto 12px;
  fill: none;
  stroke: var(--brand-sky);
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.enquiry-form .gform_confirmation_message h3,
.review-modal__form .gform_confirmation_message h3,
.callback-modal__form .gform_confirmation_message h3 {
  margin: 0 0 8px;
  font-size: 22px;
  font-weight: 700;
  color: var(--brand-deep);
}
.enquiry-form .gform_confirmation_message a,
.review-modal__form .gform_confirmation_message a,
.callback-modal__form .gform_confirmation_message a {
  color: var(--brand-deep);
  font-weight: 600;
}
.enquiry-form .enquiry-card__form .gfield.hidden_label .gfield_label,
.review-modal__form .enquiry-card__form .gfield.hidden_label .gfield_label,
.callback-modal__form .enquiry-card__form .gfield.hidden_label .gfield_label {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.enquiry-form .enquiry-card__form .gform_fields,
.review-modal__form .enquiry-card__form .gform_fields,
.callback-modal__form .enquiry-card__form .gform_fields {
  row-gap: 12px !important;
}
.enquiry-form .enquiry-card__form .gform_footer,
.review-modal__form .enquiry-card__form .gform_footer,
.callback-modal__form .enquiry-card__form .gform_footer {
  margin-top: 12px !important;
}
.enquiry-form .enquiry-card__form input[type=text],
.enquiry-form .enquiry-card__form input[type=tel],
.enquiry-form .enquiry-card__form select,
.review-modal__form .enquiry-card__form input[type=text],
.review-modal__form .enquiry-card__form input[type=tel],
.review-modal__form .enquiry-card__form select,
.callback-modal__form .enquiry-card__form input[type=text],
.callback-modal__form .enquiry-card__form input[type=tel],
.callback-modal__form .enquiry-card__form select {
  padding: 12px 14px !important;
  font-size: 14px !important;
  background-color: var(--surface-tint) !important;
}
.enquiry-form .enquiry-card__form .gform_button,
.review-modal__form .enquiry-card__form .gform_button,
.callback-modal__form .enquiry-card__form .gform_button {
  padding: 13px 10px !important;
  background: transparent !important;
  border: 1.5px solid color-mix(in srgb, var(--brand-sky) 45%, var(--surface)) !important;
  color: var(--brand-deep) !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  letter-spacing: 1px !important;
  box-shadow: none !important;
}
.enquiry-form .enquiry-card__form .gform_button:hover,
.review-modal__form .enquiry-card__form .gform_button:hover,
.callback-modal__form .enquiry-card__form .gform_button:hover {
  transform: none;
  background: var(--surface-tint) !important;
  border-color: var(--brand-sky) !important;
  box-shadow: none !important;
}
.enquiry-form .enquiry-card__form .gform_confirmation_message,
.review-modal__form .enquiry-card__form .gform_confirmation_message,
.callback-modal__form .enquiry-card__form .gform_confirmation_message {
  padding: 12px 0 !important;
  text-align: center;
  font-size: 15px;
  font-weight: 600 !important;
  color: var(--brand-deep) !important;
  background: transparent !important;
  border: 0 !important;
}

.hidden_label .gfield_label {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/*
    Components Manifest

    Import reusable UI components here (alphabetical order).
    Components are standalone patterns used across multiple sections.

    Examples: blog-card, team-card, testimonial-card, accordion

    Creating a new component:
        1. Create css/components/_my-component.scss
        2. Add @use 'my-component'; below
        3. Use .my-component class in templates

    Component structure:
        .my-component {
            .image { }
            .title { }
            .content { }
        }
*/
/*
    Agent portal — login / forgot-password / reset-success card.

    Standalone page (body.agent-login-page), token-pure. Port of PD-Agent-Login.html:
    teal gradient ground, centred white card, three toggled views.
*/
body.agent-login-page {
  background: var(--brand-deep);
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px 16px;
  position: relative;
  overflow-x: hidden;
  font-family: var(--font-body);
}
body.agent-login-page::before {
  content: "";
  position: fixed;
  inset: 0;
  background: radial-gradient(ellipse at 20% 50%, color-mix(in srgb, var(--brand-sky) 8%, transparent) 0%, transparent 60%), radial-gradient(ellipse at 80% 20%, color-mix(in srgb, var(--brand-aqua) 6%, transparent) 0%, transparent 50%), radial-gradient(ellipse at 50% 80%, color-mix(in srgb, var(--brand-ink) 40%, transparent) 0%, transparent 70%), linear-gradient(180deg, var(--brand-deep) 0%, var(--brand-deep-hover) 50%, var(--brand-ink) 100%);
  z-index: 0;
}
body.agent-login-page .login-card {
  background: var(--surface);
  max-width: 440px;
  width: 100%;
  border-radius: 16px;
  padding: 48px 40px;
  box-shadow: 0 8px 32px color-mix(in srgb, var(--brand-deep) 30%, transparent);
  position: relative;
  z-index: 1;
}
body.agent-login-page .login-logo {
  text-align: center;
  margin-bottom: 32px;
}
body.agent-login-page .login-logo-text {
  font-family: var(--font-display);
  font-size: 28px;
  font-weight: 400;
  color: var(--brand-deep);
  letter-spacing: 0.5px;
  line-height: 1;
}
body.agent-login-page .login-view,
body.agent-login-page .forgot-view,
body.agent-login-page .reset-success-view {
  display: none;
}
body.agent-login-page .login-view.active,
body.agent-login-page .forgot-view.active,
body.agent-login-page .reset-success-view.active {
  display: block;
  animation: lttPortalFade 0.3s ease;
}
@keyframes lttPortalFade {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
body.agent-login-page h1, body.agent-login-page h2 {
  font-weight: 700;
  color: var(--brand-deep);
  text-align: center;
  margin: 0 0 8px;
  line-height: 1.3;
}
body.agent-login-page h1 {
  font-size: 24px;
}
body.agent-login-page h2 {
  font-size: 22px;
}
body.agent-login-page .login-subtitle {
  font-size: 15px;
  color: var(--text-muted);
  text-align: center;
  line-height: 1.5;
  margin-bottom: 32px;
}
body.agent-login-page .form-group {
  margin-bottom: 20px;
}
body.agent-login-page .form-group label {
  display: block;
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 6px;
  letter-spacing: 0.2px;
}
body.agent-login-page .form-group input[type=email],
body.agent-login-page .form-group input[type=password],
body.agent-login-page .form-group input[type=text] {
  width: 100%;
  padding: 14px 16px;
  font-family: var(--font-body);
  font-size: 15px;
  color: var(--text-primary);
  background: var(--surface);
  border: 1.5px solid var(--brand-border);
  border-radius: 10px;
  outline: none;
  transition: border-color 0.25s ease, box-shadow 0.25s ease;
}
body.agent-login-page .form-group input:focus {
  border-color: var(--brand-sky);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand-sky) 15%, transparent);
}
body.agent-login-page .form-group input::placeholder {
  color: color-mix(in srgb, var(--text-muted) 72%, #fff);
  font-size: 14px;
}
body.agent-login-page .form-group input.error {
  border-color: var(--status-soldout-fg);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--status-soldout-fg) 12%, transparent);
}
body.agent-login-page .form-error {
  font-size: 13px;
  color: var(--status-soldout-fg);
  margin-top: 6px;
  display: none;
  line-height: 1.4;
}
body.agent-login-page .form-error.visible {
  display: block;
}
body.agent-login-page .password-wrapper {
  position: relative;
}
body.agent-login-page .password-wrapper input {
  padding-right: 48px;
}
body.agent-login-page .password-toggle {
  position: absolute;
  right: 6px;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  cursor: pointer;
  padding: 12px;
  color: color-mix(in srgb, var(--text-muted) 72%, #fff);
  transition: color 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}
body.agent-login-page .password-toggle:hover {
  color: var(--brand-deep);
}
body.agent-login-page .password-toggle:focus-visible {
  outline: 2px solid var(--brand-sky);
  outline-offset: 2px;
  border-radius: 4px;
}
body.agent-login-page .password-toggle svg {
  width: 20px;
  height: 20px;
}
body.agent-login-page .password-toggle .icon-eye-off {
  display: none;
}
body.agent-login-page .password-toggle.showing .icon-eye {
  display: none;
}
body.agent-login-page .password-toggle.showing .icon-eye-off {
  display: block;
}
body.agent-login-page .remember-row {
  display: flex;
  align-items: center;
  margin-bottom: 24px;
}
body.agent-login-page .remember-row input[type=checkbox] {
  width: 18px;
  height: 18px;
  margin-right: 10px;
  accent-color: var(--brand-deep);
  cursor: pointer;
  border-radius: 4px;
  flex-shrink: 0;
}
body.agent-login-page .remember-row label {
  font-size: 14px;
  color: var(--text-muted);
  cursor: pointer;
  user-select: none;
}
body.agent-login-page .btn-login {
  width: 100%;
  padding: 16px 40px;
  background: var(--gradient-button);
  color: var(--gradient-button-fg);
  border-radius: 50px;
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 800;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  border: 1px solid color-mix(in srgb, #fff 20%, transparent);
  box-shadow: 0 4px 20px color-mix(in srgb, var(--brand-deep) 30%, transparent), inset 0 1px 0 color-mix(in srgb, var(--brand-glass) 30%, transparent);
  cursor: pointer;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
body.agent-login-page .btn-login:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 28px color-mix(in srgb, var(--brand-deep) 40%, transparent), inset 0 1px 0 color-mix(in srgb, var(--brand-glass) 40%, transparent);
}
body.agent-login-page .btn-login:active {
  transform: translateY(0);
}
body.agent-login-page .btn-login:focus-visible {
  outline: 2px solid var(--brand-sky);
  outline-offset: 3px;
  border-radius: 50px;
}
body.agent-login-page .forgot-link,
body.agent-login-page .back-to-login {
  display: block;
  text-align: center;
  margin-top: 16px;
  font-size: 14px;
  color: var(--brand-sky-text);
  text-decoration: none;
  transition: color 0.2s ease;
}
body.agent-login-page .forgot-link:hover,
body.agent-login-page .back-to-login:hover {
  color: var(--brand-deep);
  text-decoration: underline;
}
body.agent-login-page .forgot-link:focus-visible,
body.agent-login-page .back-to-login:focus-visible {
  outline: 2px solid var(--brand-sky);
  outline-offset: 2px;
  border-radius: 4px;
}
body.agent-login-page .login-divider {
  border: none;
  border-top: 1px solid var(--brand-border);
  margin: 28px 0;
}
body.agent-login-page .login-bottom-text {
  font-size: 13px;
  color: var(--text-subtle);
  text-align: center;
  line-height: 1.6;
}
body.agent-login-page .login-bottom-text a {
  color: var(--brand-sky-text);
  text-decoration: none;
  font-weight: 600;
}
body.agent-login-page .login-bottom-text a:hover {
  color: var(--brand-deep);
  text-decoration: underline;
}
body.agent-login-page .back-to-site {
  display: block;
  text-align: center;
  margin-top: 16px;
  font-size: 13px;
  color: var(--text-subtle);
  text-decoration: none;
  transition: color 0.2s ease;
}
body.agent-login-page .back-to-site:hover {
  color: var(--brand-sky-text);
}
body.agent-login-page .reset-success-icon {
  width: 64px;
  height: 64px;
  margin: 0 auto 20px;
  background: linear-gradient(135deg, var(--brand-aqua), var(--brand-sky));
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}
body.agent-login-page .reset-success-icon svg {
  width: 32px;
  height: 32px;
  color: #fff;
}
body.agent-login-page .reset-success-message {
  font-size: 15px;
  color: var(--text-muted);
  text-align: center;
  line-height: 1.6;
  margin-bottom: 24px;
}
body.agent-login-page .login-error-banner {
  background: color-mix(in srgb, var(--status-soldout-fg) 8%, transparent);
  border: 1px solid color-mix(in srgb, var(--status-soldout-fg) 20%, transparent);
  border-radius: 10px;
  padding: 12px 16px;
  margin-bottom: 20px;
  font-size: 14px;
  color: var(--status-soldout-fg);
  text-align: center;
  line-height: 1.5;
  display: none;
}
body.agent-login-page .login-error-banner.visible {
  display: block;
  animation: lttPortalFade 0.3s ease;
}
@media (max-width: 480px) {
  body.agent-login-page {
    align-items: flex-start;
    padding: 48px 16px 16px;
  }
  body.agent-login-page .login-card {
    padding: 36px 24px;
    border-radius: 12px;
  }
  body.agent-login-page h1 {
    font-size: 22px;
  }
  body.agent-login-page h2 {
    font-size: 20px;
  }
  body.agent-login-page .login-logo-text {
    font-size: 24px;
  }
}
@media (prefers-reduced-motion: reduce) {
  body.agent-login-page .login-view.active,
  body.agent-login-page .forgot-view.active,
  body.agent-login-page .reset-success-view.active,
  body.agent-login-page .login-error-banner.visible {
    animation: none;
  }
}

/*
    Agent (trade) portal — gated dashboard chrome + tab-pages.

    Token-pure: the PD wireframe teal maps 1:1 to the brand tokens, so PD & LTT
    repaint for free. Status pills reuse the shared --status-* semantics. The
    portal is a standalone shell (its own <html>), so everything is scoped under
    .agent-portal to avoid touching the public site. Breakpoints 1024/768/480
    match PD-Agent-Dashboard.html.
*/
.agent-portal {
  --portal-bg: color-mix(in srgb, var(--brand-deep) 5%, #fff);
  --portal-row-hover: color-mix(in srgb, var(--brand-sky) 6%, #fff);
  --portal-track: color-mix(in srgb, var(--brand-deep) 6%, #fff);
  --portal-muted-light: color-mix(in srgb, var(--text-muted) 72%, #fff);
  --portal-departed-bg: color-mix(in srgb, var(--text-muted) 14%, #fff);
  margin: 0;
  background: var(--portal-bg);
  color: var(--text-primary);
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.6;
  /* ---- Sidebar ---- */
  /* ---- Main wrapper ---- */
  /* ---- Top bar ---- */
  /* Mobile hamburger + overlay */
  /* ---- Content ---- */
  /* ---- Welcome bar ---- */
  /* ---- Stat cards ---- */
  /* ---- Hold alert ---- */
  /* ---- Tables ---- */
  /* ---- Status badges (reuse the shared --status-* semantics) ---- */
  /* ---- Small action buttons ---- */
  /* ---- Section headers + widget cards ---- */
  /* ---- Upcoming departures ---- */
  /* ---- Quick actions ---- */
  /* ---- Filter bar ---- */
  /* ---- Booking detail row (My Bookings "View") ---- */
  /* ---- Book form ---- */
  /* ---- Book Tour: staff booking on behalf of an agent (Vicki, 22 Oct 2026) ---- */
  /* ---- Book Tour: departure price + rooms (Vicki, 7 Oct 2026) ---- */
  /* ---- Form actions (primary / outline pills) ---- */
  /* ---- Profile ---- */
  /* ==========================================================================
     Trade Resources — the asset library.

     Two zones. Tour kits are a list, not cards: agents scan down a column of
     tour names, and every row exposes its files without a click. The library
     is a grid of native <details>; the open one spans the full width so a
     14-file list isn't crammed into a third of the page. name="trade-library"
     gives us an exclusive accordion with no JS.
     ========================================================================== */
  /* ---- Tour kits ---- */
  /* ---- File affordances (chips in kits, tiles in the library) ---- */
  /* ---- Library ---- */
  /*
      Library files are tiles, not rows: an agent picking a flyer is choosing a
      design, and the filename does not tell them which one. A file with no
      preview (a Word doc, a PDF on a stack with no Imagick) shows its format
      in the same tile shape, so the grid stays even.
  */
  /* ---- Responsive ---- */
}
.agent-portal .agent-layout {
  display: flex;
  min-height: 100vh;
}
.agent-portal .agent-sidebar {
  width: 240px;
  background: var(--brand-deep);
  color: #fff;
  display: flex;
  flex-direction: column;
  position: fixed;
  inset: 0 auto 0 0;
  z-index: 200;
  transition: transform 0.3s ease;
}
.agent-portal .sidebar-logo {
  padding: 24px 20px 20px;
  border-bottom: 1px solid color-mix(in srgb, #fff 10%, transparent);
}
.agent-portal .sidebar-logo a {
  color: #fff;
  text-decoration: none;
  font-size: 18px;
  font-weight: 800;
  line-height: 1.1;
}
.agent-portal .sidebar-logo img {
  display: block;
  width: 100%;
  max-width: 190px;
  height: auto;
}
.agent-portal .sidebar-logo span {
  display: block;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 2px;
  color: color-mix(in srgb, #fff 50%, transparent);
  margin-top: 6px;
}
.agent-portal .sidebar-nav {
  flex: 1;
  padding: 12px 0;
  overflow-y: auto;
  /* Held-back tab: reads as a tab, refuses to behave like one. The native
     title attribute carries "Coming soon" on hover. */
}
.agent-portal .sidebar-nav a {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 20px;
  color: color-mix(in srgb, #fff 70%, transparent);
  text-decoration: none;
  font-size: 14px;
  font-weight: 600;
  border-left: 3px solid transparent;
  transition: all 0.2s;
}
.agent-portal .sidebar-nav a:hover {
  background: color-mix(in srgb, #fff 5%, transparent);
  color: #fff;
}
.agent-portal .sidebar-nav a.active {
  border-left-color: var(--brand-sky);
  background: color-mix(in srgb, var(--brand-sky) 12%, transparent);
  color: #fff;
}
.agent-portal .sidebar-nav a svg {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}
.agent-portal .sidebar-nav .nav-soon {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 20px;
  font-size: 14px;
  font-weight: 600;
  border-left: 3px solid transparent;
  color: color-mix(in srgb, #fff 32%, transparent);
  cursor: default;
}
.agent-portal .sidebar-nav .nav-soon svg {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}
.agent-portal .sidebar-footer {
  padding: 16px 20px;
  border-top: 1px solid color-mix(in srgb, #fff 10%, transparent);
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.agent-portal .sidebar-footer a {
  display: flex;
  align-items: center;
  gap: 10px;
  color: color-mix(in srgb, #fff 50%, transparent);
  text-decoration: none;
  font-size: 13px;
  transition: color 0.2s;
}
.agent-portal .sidebar-footer a:hover {
  color: #fff;
}
.agent-portal .sidebar-footer a svg {
  width: 16px;
  height: 16px;
}
.agent-portal .agent-main-wrapper {
  flex: 1;
  min-width: 0;
  margin-left: 240px;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}
.agent-portal .agent-topbar {
  background: var(--surface);
  border-bottom: 1px solid var(--brand-border);
  padding: 0 32px;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: sticky;
  top: 0;
  z-index: 100;
}
.agent-portal .topbar-left-group {
  display: flex;
  align-items: center;
  gap: 12px;
}
.agent-portal .topbar-brand {
  display: none;
  color: var(--brand-deep);
  font-weight: 800;
  text-decoration: none;
}
.agent-portal .topbar-brand img {
  display: block;
  width: auto;
  height: 24px;
}
.agent-portal .topbar-left {
  font-size: 17px;
  font-weight: 700;
  color: var(--brand-deep);
}
.agent-portal .topbar-right {
  display: flex;
  align-items: center;
  gap: 16px;
}
.agent-portal .topbar-agent {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  color: var(--text-primary);
}
.agent-portal .topbar-avatar {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--brand-sky-fill);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 700;
}
.agent-portal .topbar-cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 20px;
  background: var(--gradient-button);
  color: var(--gradient-button-fg);
  border: none;
  border-radius: 50px;
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
  transition: opacity 0.2s, transform 0.2s;
}
.agent-portal .topbar-cta:hover {
  opacity: 0.92;
  transform: translateY(-1px);
}
.agent-portal .topbar-cta svg {
  width: 15px;
  height: 15px;
}
.agent-portal .mobile-menu-toggle {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px;
}
.agent-portal .mobile-menu-toggle svg {
  width: 24px;
  height: 24px;
  stroke: var(--brand-deep);
}
.agent-portal .sidebar-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: var(--backdrop);
  z-index: 199;
}
.agent-portal .sidebar-overlay.visible {
  display: block;
}
.agent-portal .agent-content {
  flex: 1;
  min-width: 0;
  padding: 32px;
}
.agent-portal .welcome-bar {
  margin-bottom: 28px;
}
.agent-portal .welcome-bar h1 {
  font-size: 24px;
  font-weight: 700;
  color: var(--brand-deep);
  margin: 0 0 4px;
}
.agent-portal .welcome-bar .last-login {
  font-size: 13px;
  color: var(--portal-muted-light);
  margin: 0;
}
.agent-portal .stat-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 20px;
  margin-top: 20px;
}
.agent-portal .stat-card {
  background: var(--surface);
  border-radius: 12px;
  border: 1px solid var(--brand-border);
  padding: 24px;
  text-align: center;
}
.agent-portal .stat-card .stat-number {
  font-size: 32px;
  font-weight: 800;
  color: var(--brand-deep);
  line-height: 1.1;
}
.agent-portal .stat-card .stat-label {
  font-size: 13px;
  color: var(--text-muted);
  margin-top: 6px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.agent-portal .hold-alert {
  background: var(--surface);
  border-radius: 12px;
  border: 1px solid color-mix(in srgb, var(--status-filling-fg) 40%, #fff);
  border-left: 4px solid var(--status-filling-fg);
  padding: 20px 24px;
  margin-bottom: 28px;
}
.agent-portal .hold-alert-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
}
.agent-portal .hold-alert-header svg {
  width: 20px;
  height: 20px;
  stroke: var(--status-filling-fg);
}
.agent-portal .hold-alert-header h3 {
  font-size: 15px;
  font-weight: 700;
  color: var(--text-primary);
  margin: 0;
}
.agent-portal .hold-countdown {
  color: var(--status-filling-fg);
  font-weight: 700;
}
.agent-portal .dash-table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.agent-portal .dash-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}
.agent-portal .dash-table th {
  text-align: left;
  padding: 10px 14px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  color: var(--text-muted);
  border-bottom: 2px solid var(--brand-border);
  white-space: nowrap;
}
.agent-portal .dash-table td {
  padding: 10px 14px;
  border-bottom: 1px solid var(--portal-track);
  color: var(--text-primary);
  white-space: nowrap;
}
.agent-portal .dash-table tbody tr:hover {
  background: var(--portal-row-hover);
}
.agent-portal .dash-empty {
  text-align: center;
  color: var(--text-muted);
  white-space: normal;
  padding: 28px 14px;
}
.agent-portal .dash-empty a {
  color: var(--brand-sky-text);
  font-weight: 600;
}
.agent-portal .badge {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 50px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.agent-portal .badge-confirmed,
.agent-portal .badge-booked,
.agent-portal .badge-paid {
  background: var(--status-available-bg);
  color: var(--status-available-fg);
}
.agent-portal .badge-held,
.agent-portal .badge-requested,
.agent-portal .badge-pending {
  background: var(--status-filling-bg);
  color: var(--status-filling-fg);
}
.agent-portal .badge-departed {
  background: var(--portal-departed-bg);
  color: var(--text-muted);
}
.agent-portal .badge-cancelled {
  background: var(--status-soldout-bg);
  color: var(--status-soldout-fg);
}
.agent-portal .btn-sm {
  display: inline-block;
  padding: 5px 12px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  border: none;
  text-decoration: none;
  transition: all 0.2s;
}
.agent-portal .btn-sm-primary {
  background: var(--brand-deep);
  color: #fff;
}
.agent-portal .btn-sm-primary:hover {
  background: var(--brand-deep-hover);
}
.agent-portal .btn-sm-outline {
  background: transparent;
  color: var(--brand-deep);
  border: 1px solid var(--brand-border);
}
.agent-portal .btn-sm-outline:hover {
  background: var(--surface-tint);
}
.agent-portal .section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
}
.agent-portal .section-header h2 {
  font-size: 18px;
  font-weight: 700;
  color: var(--brand-deep);
  margin: 0;
}
.agent-portal .section-header .view-all {
  font-size: 13px;
  color: var(--brand-sky-text);
  text-decoration: none;
  font-weight: 600;
}
.agent-portal .section-header .view-all:hover {
  text-decoration: underline;
}
.agent-portal .widget-card {
  background: var(--surface);
  border-radius: 12px;
  border: 1px solid var(--brand-border);
  padding: 24px;
  margin-bottom: 28px;
}
.agent-portal .promo-card {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  border-left: 4px solid var(--brand-deep);
}
.agent-portal .promo-card h2 {
  font-size: 18px;
  font-weight: 700;
  color: var(--brand-deep);
  margin: 0 0 4px;
}
.agent-portal .promo-card p {
  margin: 0;
  color: var(--text-primary);
}
.agent-portal .promo-card .btn-sm {
  padding: 10px 18px;
  font-size: 14px;
}
.agent-portal .departure-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-bottom: 28px;
}
.agent-portal .departure-card {
  background: var(--surface);
  border-radius: 12px;
  border: 1px solid var(--brand-border);
  overflow: hidden;
  display: flex;
}
.agent-portal .departure-accent {
  width: 5px;
  flex-shrink: 0;
}
.agent-portal .departure-accent-1 {
  background: var(--brand-sky);
}
.agent-portal .departure-accent-2 {
  background: var(--brand-deep);
}
.agent-portal .departure-accent-3 {
  background: var(--brand-aqua);
}
.agent-portal .departure-body {
  padding: 20px;
  flex: 1;
}
.agent-portal .departure-body h4 {
  font-size: 15px;
  font-weight: 700;
  color: var(--brand-deep);
  margin: 0 0 8px;
}
.agent-portal .departure-meta {
  font-size: 13px;
  color: var(--text-muted);
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.agent-portal .departure-meta span {
  display: flex;
  align-items: center;
  gap: 6px;
}
.agent-portal .departure-meta svg {
  width: 14px;
  height: 14px;
  stroke: var(--portal-muted-light);
  flex-shrink: 0;
}
.agent-portal .departure-countdown {
  margin-top: 10px;
  font-size: 13px;
  font-weight: 700;
  color: var(--brand-sky-text);
}
.agent-portal .quick-actions {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-bottom: 28px;
}
.agent-portal .quick-action {
  background: var(--surface);
  border-radius: 12px;
  border: 1px solid var(--brand-border);
  padding: 28px 16px;
  text-align: center;
  cursor: pointer;
  text-decoration: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  transition: box-shadow 0.2s, transform 0.2s;
}
.agent-portal .quick-action:hover {
  box-shadow: 0 6px 20px color-mix(in srgb, var(--brand-deep) 10%, transparent);
  transform: translateY(-2px);
}
.agent-portal .quick-action svg {
  width: 40px;
  height: 40px;
  stroke: var(--brand-sky);
}
.agent-portal .quick-action span {
  font-size: 14px;
  font-weight: 600;
  color: var(--brand-deep);
}
.agent-portal .filter-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 20px;
  align-items: flex-end;
}
.agent-portal .filter-bar select,
.agent-portal .filter-bar input[type=date] {
  padding: 8px 12px;
  border: 1px solid var(--brand-border);
  border-radius: 8px;
  font-size: 13px;
  font-family: var(--font-body);
  color: var(--text-primary);
  background: var(--surface);
  cursor: pointer;
}
.agent-portal .filter-bar select:focus,
.agent-portal .filter-bar input[type=date]:focus {
  outline: none;
  border-color: var(--brand-sky);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand-sky) 15%, transparent);
}
.agent-portal .filter-bar label {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.agent-portal .filter-group {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.agent-portal .filter-actions {
  flex-direction: row;
  align-items: center;
  gap: 8px;
}
.agent-portal .booking-detail td {
  background: var(--surface-tint);
  white-space: normal;
}
.agent-portal .booking-detail-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 14px 24px;
  padding: 6px 0;
}
.agent-portal .booking-detail-grid .bd-label {
  display: block;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text-muted);
  margin-bottom: 2px;
}
.agent-portal .book-form {
  max-width: 680px;
}
.agent-portal .form-step {
  margin-bottom: 32px;
}
.agent-portal .form-step h3 {
  font-size: 16px;
  font-weight: 700;
  color: var(--brand-deep);
  margin: 0 0 16px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--brand-border);
}
.agent-portal .form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-bottom: 16px;
}
.agent-portal .form-row.full {
  grid-template-columns: 1fr;
}
.agent-portal .form-row.triple {
  grid-template-columns: 1fr 1fr 1fr;
}
.agent-portal .book-for-agent {
  padding: 16px 18px 2px;
  border: 1px solid var(--brand-border);
  border-left: 4px solid var(--brand-sky);
  border-radius: 8px;
  background: var(--surface-tint);
}
.agent-portal .book-for-agent h3 {
  border-bottom: 0;
  padding-bottom: 0;
  margin-bottom: 6px;
}
.agent-portal .book-for-agent .form-field select {
  width: 100%;
  min-width: 0;
  text-overflow: ellipsis;
}
.agent-portal .book-for-agent-hint {
  margin: 0 0 14px;
  font-size: 13px;
  color: var(--text-muted);
}
.agent-portal .book-price {
  margin: 4px 0 0;
  padding: 14px 16px;
  border-radius: 8px;
  background: var(--surface-tint);
}
.agent-portal .book-price[hidden] {
  display: none;
}
.agent-portal .book-price dl {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 32px;
  margin: 0;
}
.agent-portal .book-price div[hidden] {
  display: none;
}
.agent-portal .book-price p {
  margin: 8px 0 0;
  font-size: 12px;
  color: var(--text-muted);
}
.agent-portal .book-price dt {
  font-size: 12px;
  color: var(--text-muted);
}
.agent-portal .book-price dd {
  margin: 2px 0 0;
  font-weight: 700;
  color: var(--brand-deep);
}
.agent-portal .book-rooms {
  margin: 24px 0 20px;
  padding: 0;
  border: 0;
}
.agent-portal .book-rooms legend {
  font-weight: 700;
  color: var(--brand-deep);
  margin-bottom: 4px;
}
.agent-portal .book-rooms .form-row.triple {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.agent-portal .book-rooms-hint {
  margin: 0 0 12px;
  font-size: 13px;
  color: var(--text-muted);
}
.agent-portal .book-rooms-hint.is-error {
  color: var(--status-soldout-fg);
}
.agent-portal .form-field {
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.agent-portal .form-field label {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary);
}
.agent-portal .form-field input,
.agent-portal .form-field select {
  padding: 10px 14px;
  border: 1px solid var(--brand-border);
  border-radius: 8px;
  font-size: 14px;
  font-family: var(--font-body);
  color: var(--text-primary);
  background: var(--surface);
  transition: border-color 0.2s, box-shadow 0.2s;
}
.agent-portal .form-field input:focus,
.agent-portal .form-field select:focus {
  outline: none;
  border-color: var(--brand-sky);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand-sky) 15%, transparent);
}
.agent-portal .form-field input.error {
  border-color: var(--status-soldout-fg);
}
.agent-portal .counter-heading {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary);
  display: block;
  margin-bottom: 6px;
}
.agent-portal .passenger-counter {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 20px;
}
.agent-portal .counter-btn {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  border: 1px solid var(--brand-border);
  background: var(--surface);
  color: var(--brand-deep);
  font-size: 18px;
  font-weight: 700;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s;
}
.agent-portal .counter-btn:hover {
  background: var(--surface-tint);
}
.agent-portal .counter-value {
  font-size: 20px;
  font-weight: 700;
  color: var(--brand-deep);
  min-width: 32px;
  text-align: center;
}
.agent-portal .passenger-fields {
  border: 1px solid var(--brand-border);
  border-radius: 10px;
  padding: 16px;
  margin-bottom: 12px;
  background: var(--portal-row-hover);
}
.agent-portal .passenger-fields .passenger-label {
  font-size: 13px;
  font-weight: 700;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 10px;
}
.agent-portal .book-not-confirmed {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 13px;
  color: var(--text-muted);
  background: var(--surface-tint);
  border-radius: 8px;
  padding: 12px 14px;
}
.agent-portal .book-not-confirmed svg {
  width: 18px;
  height: 18px;
  stroke: var(--brand-sky);
  flex-shrink: 0;
  margin-top: 1px;
}
.agent-portal .book-not-confirmed strong {
  display: block;
  color: var(--text-primary);
  margin-bottom: 4px;
}
.agent-portal .book-not-confirmed p {
  margin: 0 0 6px;
}
.agent-portal .book-not-confirmed p:last-child {
  margin-bottom: 0;
}
.agent-portal .book-message,
.agent-portal .profile-message {
  border-radius: 8px;
  padding: 12px 16px;
  font-size: 14px;
  margin-bottom: 16px;
}
.agent-portal .book-message.is-ok,
.agent-portal .profile-message.is-ok {
  background: var(--status-available-bg);
  color: var(--status-available-fg);
}
.agent-portal .book-message.is-error,
.agent-portal .profile-message.is-error {
  background: var(--status-soldout-bg);
  color: var(--status-soldout-fg);
}
.agent-portal .book-empty,
.agent-portal .profile-note {
  font-size: 13px;
  color: var(--text-muted);
}
.agent-portal .profile-note {
  margin-top: 16px;
}
.agent-portal .profile-note a {
  color: var(--brand-deep);
}
.agent-portal .profile-address {
  display: block;
  margin-top: 4px;
  font-weight: 400;
  color: var(--text-muted);
}
.agent-portal .form-actions {
  display: flex;
  gap: 12px;
  margin-top: 24px;
}
.agent-portal .btn-primary {
  padding: 12px 28px;
  background: var(--gradient-button);
  color: var(--gradient-button-fg);
  border: none;
  border-radius: 50px;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  transition: opacity 0.2s, transform 0.2s;
}
.agent-portal .btn-primary:hover {
  opacity: 0.92;
  transform: translateY(-1px);
}
.agent-portal .btn-primary[disabled] {
  opacity: 0.5;
  cursor: default;
  transform: none;
}
.agent-portal .btn-outline {
  padding: 12px 28px;
  background: transparent;
  color: var(--brand-deep);
  border: 2px solid var(--brand-border);
  border-radius: 50px;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s;
}
.agent-portal .btn-outline:hover {
  background: var(--surface-tint);
  border-color: var(--brand-sky);
}
.agent-portal .profile-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 18px 24px;
  margin: 0;
}
.agent-portal .profile-grid dt {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text-muted);
  margin-bottom: 4px;
}
.agent-portal .profile-grid dd {
  margin: 0;
  font-size: 15px;
  font-weight: 600;
  color: var(--text-primary);
}
.agent-portal .trade-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 28px;
}
.agent-portal .trade-search {
  position: relative;
  flex: 1 1 320px;
  max-width: 420px;
}
.agent-portal .trade-search svg {
  position: absolute;
  left: 13px;
  top: 50%;
  translate: 0 -50%;
  width: 16px;
  height: 16px;
  stroke: var(--text-muted);
  pointer-events: none;
}
.agent-portal .trade-search input {
  width: 100%;
  padding: 10px 14px 10px 38px;
  font: inherit;
  font-size: 14px;
  color: var(--text-primary);
  background: var(--surface);
  border: 1px solid var(--brand-border);
  border-radius: 8px;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.agent-portal .trade-search input::placeholder {
  color: var(--text-muted);
}
.agent-portal .trade-search input:focus-visible {
  outline: none;
  border-color: var(--brand-sky);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand-sky) 22%, transparent);
}
.agent-portal .trade-search input::-webkit-search-decoration, .agent-portal .trade-search input::-webkit-search-cancel-button {
  appearance: none;
}
.agent-portal .trade-guide {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 13px;
  font-weight: 600;
  color: var(--brand-deep);
  text-decoration: none;
  border-bottom: 1px solid color-mix(in srgb, var(--brand-deep) 25%, transparent);
  padding-bottom: 2px;
  transition: color 0.2s, border-color 0.2s;
}
.agent-portal .trade-guide svg {
  width: 13px;
  height: 13px;
}
.agent-portal .trade-guide:hover {
  color: var(--brand-sky-text);
  border-bottom-color: var(--brand-sky);
}
.agent-portal .trade-noresults {
  margin: 0 0 28px;
  padding: 18px 20px;
  font-size: 14px;
  color: var(--text-muted);
  background: var(--surface);
  border: 1px dashed var(--brand-border);
  border-radius: 12px;
}
.agent-portal .trade-zone {
  margin-bottom: 40px;
}
.agent-portal .trade-zone:last-child {
  margin-bottom: 0;
}
.agent-portal .trade-zone__head {
  margin-bottom: 16px;
}
.agent-portal .trade-zone__head h2 {
  margin: 0;
  font-size: 17px;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: var(--brand-deep);
}
.agent-portal .trade-zone__head p {
  margin: 4px 0 0;
  font-size: 13px;
  color: var(--text-muted);
}
.agent-portal .kit-list {
  list-style: none;
  margin: 0;
  padding: 0;
  background: var(--surface);
  border: 1px solid var(--brand-border);
  border-radius: 12px;
  overflow: hidden;
}
.agent-portal .kit {
  display: grid;
  grid-template-columns: 48px minmax(150px, 1fr) auto;
  align-items: center;
  gap: 16px;
  padding: 14px 20px;
  border-top: 1px solid var(--brand-border);
  transition: background 0.2s;
}
.agent-portal .kit:first-child {
  border-top: 0;
}
.agent-portal .kit:hover {
  background: var(--portal-row-hover);
}
.agent-portal .kit-thumb {
  width: 48px;
  height: 48px;
  border-radius: 8px;
  object-fit: cover;
  background: var(--portal-track);
  border: 1px solid var(--brand-border);
}
.agent-portal .kit-thumb--none {
  display: block;
}
.agent-portal .kit-title {
  margin: 0;
  font-size: 15px;
  font-weight: 700;
  color: var(--brand-deep);
}
.agent-portal .kit-meta {
  margin: 2px 0 0;
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  color: var(--text-muted);
}
.agent-portal .kit-files {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}
.agent-portal .file-chip {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  text-decoration: none;
  color: var(--text-primary);
  transition: background 0.2s, border-color 0.2s, color 0.2s;
  padding: 7px 12px 7px 8px;
  justify-content: flex-start;
  border: 1px solid var(--brand-border);
  border-radius: 999px;
  background: var(--surface);
  font-size: 13px;
}
.agent-portal .file-chip:hover, .agent-portal .file-chip:focus-visible {
  border-color: var(--brand-sky);
  background: var(--portal-row-hover);
}
.agent-portal .file-chip .file-name {
  font-weight: 600;
}
.agent-portal .file-chip .file-size {
  margin-left: auto;
}
.agent-portal .file-ext {
  flex-shrink: 0;
  min-width: 34px;
  padding: 2px 5px;
  border-radius: 4px;
  background: color-mix(in srgb, var(--brand-deep) 8%, #fff);
  color: var(--brand-deep);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-align: center;
}
.agent-portal .file-size {
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  color: var(--text-muted);
  white-space: nowrap;
}
.agent-portal .lib-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 14px;
  align-items: start;
}
.agent-portal .lib-cat {
  display: block;
  background: var(--surface);
  border: 1px solid var(--brand-border);
  border-radius: 12px;
  color: var(--text-primary);
  text-decoration: none;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.agent-portal .lib-cat:hover {
  border-color: var(--brand-sky);
  box-shadow: 0 6px 20px color-mix(in srgb, var(--brand-deep) 8%, transparent);
}
.agent-portal .lib-cat:focus-visible,
.agent-portal .lib-cat > summary:focus-visible {
  outline: none;
  border-color: var(--brand-sky);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand-sky) 22%, transparent);
}
.agent-portal .lib-cat[open] {
  grid-column: 1/-1;
  border-color: var(--brand-sky);
}
.agent-portal .lib-cat > summary,
.agent-portal .lib-cat--offsite {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-areas: "icon title" "icon desc" "foot foot";
  column-gap: 12px;
  row-gap: 2px;
  padding: 16px 18px;
  cursor: pointer;
  list-style: none;
}
.agent-portal .lib-cat > summary::-webkit-details-marker,
.agent-portal .lib-cat--offsite::-webkit-details-marker {
  display: none;
}
.agent-portal .lib-icon {
  grid-area: icon;
  width: 22px;
  height: 22px;
  margin-top: 1px;
  stroke: var(--brand-sky);
}
.agent-portal .lib-title {
  grid-area: title;
  font-size: 14px;
  font-weight: 700;
  color: var(--brand-deep);
}
.agent-portal .lib-desc {
  grid-area: desc;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  min-height: 2.9em;
  font-size: 13px;
  line-height: 1.45;
  color: var(--text-muted);
}
.agent-portal .lib-foot {
  grid-area: foot;
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid var(--brand-border);
  font-size: 12px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--text-muted);
}
.agent-portal .lib-foot svg {
  width: 13px;
  height: 13px;
}
.agent-portal .lib-cat--offsite .lib-foot {
  color: var(--brand-sky-text);
}
.agent-portal .lib-chevron {
  margin-left: auto;
  transition: rotate 0.2s ease;
}
.agent-portal .lib-cat[open] .lib-chevron {
  rotate: 180deg;
}
.agent-portal .file-grid {
  list-style: none;
  margin: 0;
  padding: 4px 10px 12px;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 12px;
}
.agent-portal .file-grid li {
  display: flex;
}
.agent-portal .file-tile {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 8px;
  border: 1px solid var(--brand-border);
  border-radius: 10px;
  background: var(--surface);
  text-decoration: none;
  color: var(--text-primary);
  font-size: 13px;
  transition: border-color 0.2s, box-shadow 0.2s, color 0.2s;
}
.agent-portal .file-tile:hover, .agent-portal .file-tile:focus-visible {
  border-color: var(--brand-sky);
  box-shadow: 0 6px 18px color-mix(in srgb, var(--brand-deep) 10%, transparent);
  color: var(--brand-deep);
}
.agent-portal .file-tile .file-shot {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 4/3;
  border-radius: 7px;
  background: var(--portal-row-hover) center/contain no-repeat;
}
.agent-portal .file-tile .file-name {
  font-weight: 600;
  line-height: 1.35;
  overflow-wrap: anywhere;
}
.agent-portal .file-tile .file-meta {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: auto;
}
.agent-portal .file-tile .file-size {
  margin-left: auto;
}
.agent-portal .file-tile .file-download {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  stroke: var(--portal-muted-light);
}
.agent-portal .file-tile:hover .file-download {
  stroke: var(--brand-sky);
}
.agent-portal .file-ext--big {
  min-width: 0;
  padding: 4px 10px;
  font-size: 13px;
  letter-spacing: 0.08em;
}
.agent-portal .materials-empty {
  text-align: center;
  padding: 24px;
  color: var(--text-muted);
}
.agent-portal .materials-empty svg {
  display: block;
  width: 44px;
  height: 44px;
  stroke: var(--portal-muted-light);
  margin: 0 auto 12px;
}
.agent-portal .materials-empty p {
  margin: 0;
}
@media (max-width: 1024px) {
  .agent-portal .agent-sidebar {
    transform: translateX(-100%);
  }
  .agent-portal .agent-sidebar.open {
    transform: translateX(0);
  }
  .agent-portal .agent-main-wrapper {
    margin-left: 0;
  }
  .agent-portal .mobile-menu-toggle {
    display: block;
  }
  .agent-portal .topbar-brand {
    display: block;
  }
  .agent-portal .departure-cards {
    grid-template-columns: 1fr 1fr;
  }
  .agent-portal .quick-actions {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 768px) {
  .agent-portal .agent-content {
    padding: 20px 16px;
  }
  .agent-portal .agent-topbar {
    padding: 0 16px;
  }
  .agent-portal .stat-cards,
  .agent-portal .departure-cards {
    grid-template-columns: 1fr;
  }
  .agent-portal .quick-actions {
    grid-template-columns: 1fr 1fr;
  }
  .agent-portal .form-row,
  .agent-portal .form-row.triple {
    grid-template-columns: 1fr;
  }
  .agent-portal .book-rooms .form-row.triple {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .agent-portal .form-actions {
    flex-direction: column;
  }
  .agent-portal .btn-primary,
  .agent-portal .btn-outline {
    width: 100%;
    text-align: center;
  }
  .agent-portal .filter-bar {
    flex-direction: column;
    align-items: stretch;
  }
  .agent-portal .welcome-bar h1 {
    font-size: 20px;
  }
  .agent-portal .trade-toolbar {
    flex-direction: column;
    align-items: stretch;
  }
  .agent-portal .trade-search {
    flex: none;
    max-width: none;
  }
  .agent-portal .kit {
    grid-template-columns: 40px 1fr;
    gap: 12px 14px;
    padding: 14px 16px;
  }
  .agent-portal .kit-thumb {
    width: 40px;
    height: 40px;
  }
  .agent-portal .kit-files {
    grid-column: 1/-1;
    justify-content: flex-start;
  }
  .agent-portal .kit-files {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .agent-portal .file-chip {
    min-height: 44px;
  }
  .agent-portal .file-chip {
    padding: 7px 9px;
  }
  .agent-portal .file-chip .file-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}
@media (max-width: 480px) {
  .agent-portal .quick-actions {
    grid-template-columns: 1fr;
  }
  .agent-portal .topbar-agent {
    display: none;
  }
  .agent-portal .topbar-left {
    display: none;
  }
  .agent-portal .topbar-brand img {
    height: 20px;
  }
  .agent-portal .topbar-cta {
    white-space: nowrap;
  }
  .agent-portal .lib-grid {
    grid-template-columns: 1fr;
  }
  .agent-portal .kit-files {
    grid-template-columns: 1fr;
  }
  .agent-portal .file-chip .file-size {
    margin-left: auto;
  }
}

/*
    Agent portal Help: the guides list, a single guide, and the "How this
    screen works" strip on portal screens (template-parts/agent/help.php,
    functions/guide-portal.php).

    Guide bodies are shared with wp-admin Help, so the ltt-g-* classes inside
    them (steps, tips, "Watch out", on-screen labels, screenshots, tables) are
    styled here for the portal. Same tokens and parts as the rest of the
    portal: widget cards, the Trade Resources search, the small buttons.
*/
.agent-portal {
  /* ---- Top bar link ---- */
  /* ---- "How this screen works" ---- */
  /* ---- Help home ---- */
  /* ---- A single guide ---- */
  /* ---- Side rail ---- */
  /* ---- Screenshot zoom ---- */
}
.agent-portal .help-rail-block[hidden],
.agent-portal .ltt-g-toc[hidden],
.agent-portal .ltt-g-hit[hidden],
.agent-portal .ltt-g-none[hidden] {
  display: none;
}
.agent-portal .topbar-help {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 4px;
  font-size: 14px;
  font-weight: 600;
  color: var(--text-muted);
  text-decoration: none;
  transition: color 0.2s;
}
.agent-portal .topbar-help svg {
  width: 18px;
  height: 18px;
}
.agent-portal .topbar-help:hover, .agent-portal .topbar-help[aria-current=page] {
  color: var(--brand-deep);
}
.agent-portal .portal-sh {
  margin-bottom: 24px;
  background: var(--surface);
  border: 1px solid var(--brand-border);
  border-radius: 12px;
}
.agent-portal .portal-sh summary {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 18px;
  font-size: 14px;
  font-weight: 700;
  color: var(--brand-deep);
  cursor: pointer;
  list-style: none;
  border-radius: 12px;
}
.agent-portal .portal-sh summary::-webkit-details-marker {
  display: none;
}
.agent-portal .portal-sh summary svg {
  width: 18px;
  height: 18px;
  stroke: var(--brand-sky);
  flex: none;
}
.agent-portal .portal-sh summary:focus-visible {
  outline: 2px solid var(--brand-sky);
  outline-offset: 2px;
}
.agent-portal .portal-sh-toggle {
  margin-left: auto;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-muted);
}
.agent-portal .portal-sh[open] .portal-sh-show, .agent-portal .portal-sh:not([open]) .portal-sh-hide {
  display: none;
}
.agent-portal .portal-sh-body {
  padding: 0 18px 16px 46px;
}
.agent-portal .portal-sh-points {
  margin: 0 0 14px;
  padding: 0;
  list-style: none;
  counter-reset: sh;
  display: grid;
  gap: 6px;
  max-width: 75ch;
}
.agent-portal .portal-sh-points li {
  position: relative;
  padding-left: 26px;
  font-size: 14px;
  line-height: 1.5;
  color: var(--text-primary);
  counter-increment: sh;
}
.agent-portal .portal-sh-points li::before {
  content: counter(sh);
  position: absolute;
  left: 0;
  top: 1px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--portal-track);
  color: var(--brand-deep);
  font-size: 11px;
  font-weight: 700;
  line-height: 18px;
  text-align: center;
  font-variant-numeric: tabular-nums;
}
.agent-portal .portal-sh-more {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 16px;
  margin: 0;
  font-size: 13px;
}
.agent-portal .portal-sh-more a:not(.btn-sm) {
  color: var(--brand-deep);
  font-weight: 600;
  text-underline-offset: 3px;
}
.agent-portal .portal-sh-more .btn-sm {
  padding: 7px 14px;
}
.agent-portal .help-pdf-all {
  margin-left: auto;
}
.agent-portal .help-missing,
.agent-portal .help-none {
  margin: 0 0 20px;
  font-size: 14px;
  color: var(--text-muted);
}
.agent-portal .help-list {
  margin-bottom: 32px;
}
.agent-portal .help-list[hidden] {
  display: none;
}
.agent-portal .help-list ul {
  margin: 0;
  padding: 0;
  list-style: none;
  background: var(--surface);
  border: 1px solid var(--brand-border);
  border-radius: 12px;
  overflow: hidden;
}
.agent-portal .help-list li + li {
  border-top: 1px solid var(--brand-border);
}
.agent-portal .help-list li[hidden] {
  display: none;
}
.agent-portal .help-list a {
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-areas: "title go" "sum go";
  column-gap: 16px;
  row-gap: 2px;
  padding: 16px 20px;
  text-decoration: none;
  transition: background 0.15s;
}
.agent-portal .help-list a:hover {
  background: var(--portal-row-hover);
}
.agent-portal .help-list a:hover .help-list-go {
  translate: 3px 0;
  stroke: var(--brand-sky);
}
.agent-portal .help-list a:focus-visible {
  outline: 2px solid var(--brand-sky);
  outline-offset: -2px;
}
.agent-portal .help-list strong {
  grid-area: title;
  font-size: 15px;
  font-weight: 700;
  color: var(--brand-deep);
}
.agent-portal .help-list .help-list-sum {
  grid-area: sum;
  max-width: 80ch;
  font-size: 13px;
  line-height: 1.5;
  color: var(--text-muted);
}
.agent-portal .help-list .help-list-go {
  grid-area: go;
  align-self: center;
  width: 18px;
  height: 18px;
  stroke: var(--portal-muted-light);
  transition: translate 0.2s ease-out, stroke 0.2s;
}
.agent-portal .help-list .ltt-g-hit {
  display: none;
}
.agent-portal .ltt-g-best {
  margin-bottom: 20px;
}
.agent-portal .ltt-g-best h2 {
  margin: 0 0 8px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.agent-portal .ltt-g-best .dashicons {
  display: none;
}
.agent-portal .ltt-g-best ul {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 6px;
}
.agent-portal .ltt-g-best a {
  font-weight: 700;
  color: var(--brand-deep);
}
.agent-portal .ltt-g-best .ltt-g-hit {
  display: block;
  font-size: 13px;
  color: var(--text-muted);
}
.agent-portal .help-asked {
  margin-bottom: 28px;
}
.agent-portal .help-asked[hidden] {
  display: none;
}
.agent-portal .help-asked h2 {
  margin: 0 0 12px;
  font-size: 17px;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: var(--brand-deep);
}
.agent-portal .help-asked ul {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 8px 24px;
}
.agent-portal .help-asked a {
  font-size: 14px;
  color: var(--brand-deep);
  text-decoration: underline;
  text-decoration-color: color-mix(in srgb, var(--brand-deep) 25%, transparent);
  text-underline-offset: 3px;
}
.agent-portal .help-asked a:hover {
  color: var(--brand-sky-text);
  text-decoration-color: var(--brand-sky-text);
}
.agent-portal .help-contact {
  margin: 0;
  font-size: 14px;
  color: var(--text-muted);
}
.agent-portal .help-contact a {
  color: var(--brand-deep);
  font-weight: 600;
}
.agent-portal .help-crumb {
  margin: 0 0 16px;
}
.agent-portal .help-crumb a {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-muted);
  text-decoration: none;
}
.agent-portal .help-crumb a svg {
  width: 16px;
  height: 16px;
}
.agent-portal .help-crumb a:hover {
  color: var(--brand-deep);
}
.agent-portal .help-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 260px;
  gap: 28px;
  align-items: start;
}
.agent-portal .help-article {
  padding: 32px 36px 28px;
  margin-bottom: 0;
}
.agent-portal .help-article > h1 {
  margin: 0 0 8px;
  font-size: 26px;
  font-weight: 800;
  line-height: 1.25;
  letter-spacing: -0.01em;
  text-wrap: balance;
  color: var(--brand-deep);
}
.agent-portal .help-article > h2 {
  margin: 36px 0 10px;
  font-size: 18px;
  font-weight: 800;
  line-height: 1.3;
  color: var(--brand-deep);
  scroll-margin-top: 88px;
}
.agent-portal .help-article > h3 {
  margin: 24px 0 8px;
  font-size: 15px;
  font-weight: 700;
  color: var(--brand-deep);
}
.agent-portal .help-article p, .agent-portal .help-article li {
  max-width: 70ch;
}
.agent-portal .help-article p {
  margin: 0 0 14px;
}
.agent-portal .help-article a {
  color: var(--brand-deep);
  font-weight: 600;
  text-underline-offset: 3px;
}
.agent-portal .help-article a:hover {
  color: var(--brand-sky-text);
}
.agent-portal .help-article ul:not(.ltt-g-steps) {
  margin: 0 0 14px;
  padding-left: 20px;
}
.agent-portal .help-article ul:not(.ltt-g-steps) li {
  margin-bottom: 4px;
}
.agent-portal .ltt-g-lede {
  margin: 0 0 8px;
  font-size: 16px;
  line-height: 1.55;
  color: var(--text-muted);
}
.agent-portal .ltt-g-steps {
  margin: 0 0 18px;
  padding: 0;
  list-style: none;
  counter-reset: step;
}
.agent-portal .ltt-g-steps > li {
  position: relative;
  padding: 0 0 12px 38px;
  counter-increment: step;
}
.agent-portal .ltt-g-steps > li::before {
  content: counter(step);
  position: absolute;
  left: 0;
  top: 0;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--brand-deep);
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  line-height: 26px;
  text-align: center;
  font-variant-numeric: tabular-nums;
}
.agent-portal .ltt-g-steps > li:last-child {
  padding-bottom: 0;
}
.agent-portal .ltt-g-ui {
  display: inline-block;
  padding: 0 6px;
  border: 1px solid var(--brand-border);
  border-radius: 5px;
  background: var(--portal-bg);
  font-size: 0.92em;
  font-weight: 600;
  line-height: 1.5;
  color: var(--brand-deep);
  white-space: nowrap;
}
.agent-portal .ltt-g-tip,
.agent-portal .ltt-g-trap {
  margin: 0 0 18px;
  padding: 14px 18px;
  border-radius: 10px;
  font-size: 14px;
}
.agent-portal .ltt-g-tip p,
.agent-portal .ltt-g-trap p {
  margin: 0;
  max-width: 70ch;
}
.agent-portal .ltt-g-tip p + p,
.agent-portal .ltt-g-trap p + p {
  margin-top: 8px;
}
.agent-portal .ltt-g-tip {
  background: var(--surface-tint);
  border: 1px solid var(--brand-border);
}
.agent-portal .ltt-g-trap {
  background: var(--status-filling-bg);
  border: 1px solid color-mix(in srgb, var(--status-filling-fg) 25%, transparent);
  color: var(--text-primary);
}
.agent-portal .ltt-g-trap strong:first-child {
  color: var(--status-filling-fg);
}
.agent-portal .ltt-g-shot {
  margin: 6px 0 22px;
}
.agent-portal .ltt-g-shot img {
  display: block;
  max-width: 100%;
  height: auto;
  border: 1px solid var(--brand-border);
  border-radius: 10px;
  box-shadow: 0 6px 18px -10px color-mix(in srgb, var(--brand-deep) 35%, transparent);
  cursor: zoom-in;
}
.agent-portal .ltt-g-shot figcaption {
  margin-top: 8px;
  font-size: 12px;
  color: var(--text-muted);
}
.agent-portal .ltt-g-table {
  width: 100%;
  margin: 0 0 18px;
  border-collapse: collapse;
  font-size: 14px;
}
.agent-portal .ltt-g-table th, .agent-portal .ltt-g-table td {
  padding: 9px 12px;
  border-bottom: 1px solid var(--brand-border);
  text-align: left;
  vertical-align: top;
}
.agent-portal .ltt-g-table th {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.agent-portal .help-updated {
  margin: 28px 0 0 !important;
  padding-top: 14px;
  border-top: 1px solid var(--brand-border);
  font-size: 12px;
  color: var(--text-muted);
}
.agent-portal .help-rail {
  position: sticky;
  top: 88px;
  display: grid;
  gap: 18px;
}
.agent-portal .help-pdf {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 11px 18px;
  background: var(--gradient-button);
  color: var(--gradient-button-fg);
  border-radius: 50px;
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
  transition: opacity 0.2s, transform 0.2s;
}
.agent-portal .help-pdf svg {
  width: 16px;
  height: 16px;
}
.agent-portal .help-pdf:hover {
  opacity: 0.92;
  transform: translateY(-1px);
}
.agent-portal .help-pdf:focus-visible {
  outline: 2px solid var(--brand-sky);
  outline-offset: 3px;
}
.agent-portal .help-rail-block h2 {
  margin: 0 0 8px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.agent-portal .help-rail-block ol, .agent-portal .help-rail-block ul {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 2px;
}
.agent-portal .help-rail-block a {
  display: block;
  padding: 5px 10px;
  border-radius: 6px;
  font-size: 13px;
  line-height: 1.4;
  color: var(--text-primary);
  text-decoration: none;
}
.agent-portal .help-rail-block a:hover {
  background: var(--portal-row-hover);
  color: var(--brand-deep);
}
.agent-portal .help-rail-block a.is-current {
  background: var(--portal-track);
  color: var(--brand-deep);
  font-weight: 700;
}
.agent-portal .help-answers li {
  position: relative;
  padding: 4px 0 4px 16px;
  font-size: 13px;
  line-height: 1.45;
  color: var(--text-muted);
}
.agent-portal .help-answers li::before {
  content: "";
  position: absolute;
  left: 3px;
  top: 12px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--brand-sky);
}
.agent-portal .help-zoom {
  max-width: min(1200px, 94vw);
  padding: 20px;
  border: none;
  border-radius: 14px;
  background: var(--surface);
  box-shadow: 0 24px 60px -20px color-mix(in srgb, var(--brand-deep) 55%, transparent);
}
.agent-portal .help-zoom::backdrop {
  background: var(--backdrop);
}
.agent-portal .help-zoom img {
  display: block;
  max-width: 100%;
  max-height: 80vh;
  margin: 0 auto;
  cursor: zoom-out;
}
.agent-portal .help-zoom p {
  margin: 12px 0 0;
  font-size: 13px;
  color: var(--text-muted);
  text-align: center;
}
.agent-portal .help-zoom form {
  position: absolute;
  top: 10px;
  right: 10px;
  margin: 0;
}
.agent-portal .help-zoom-close {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border: 1px solid var(--brand-border);
  border-radius: 50%;
  background: var(--surface);
  color: var(--brand-deep);
  cursor: pointer;
}
.agent-portal .help-zoom-close svg {
  width: 18px;
  height: 18px;
}
@media (max-width: 1100px) {
  .agent-portal .help-layout {
    grid-template-columns: minmax(0, 1fr);
  }
  .agent-portal .help-rail {
    position: static;
    grid-row: 1;
  }
  .agent-portal .help-rail .help-rail-block {
    display: none;
  }
  .agent-portal .help-pdf {
    justify-self: start;
  }
}
@media (max-width: 768px) {
  .agent-portal .help-article {
    padding: 22px 18px;
  }
  .agent-portal .help-article > h1 {
    font-size: 22px;
  }
  .agent-portal .help-pdf-all {
    margin-left: 0;
  }
  .agent-portal .portal-sh-body {
    padding-left: 18px;
  }
  .agent-portal .help-list a {
    padding: 14px 16px;
  }
}
@media (max-width: 480px) {
  .agent-portal .topbar-help span {
    display: none;
  }
  .agent-portal .ltt-g-ui {
    white-space: normal;
  }
}

/*
    Booking modal (S5 · T5.1)

    Faithful port of the PD wireframe (PD-Booking-Modal.html): the three-step
    consumer flow Your Details → Payment → Confirmation, on a native <dialog>
    (focus-trap, ESC and top-layer come free; enter/exit animate via .is-open,
    toggled by js/custom.js). Brand colour comes only from var(--…) tokens.
*/
.booking-modal {
  padding: 0;
  border: 0;
  margin: auto;
  width: 92%;
  max-width: 560px;
  max-height: 90vh;
  background: transparent;
  color: var(--text-primary);
  overflow: visible;
}
.booking-modal::backdrop {
  background: color-mix(in srgb, var(--brand-ink) 92%, transparent);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  opacity: 0;
  transition: opacity 0.3s ease;
}
.booking-modal.is-open::backdrop {
  opacity: 1;
}

.booking-modal__panel {
  position: relative;
  background: var(--surface);
  border-radius: 20px;
  box-shadow: var(--shadow-dropdown);
  max-height: 90vh;
  overflow-y: auto;
  opacity: 0;
  transform: translateY(20px) scale(0.97);
  transition: opacity 0.35s cubic-bezier(0.23, 1, 0.32, 1), transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}
.booking-modal.is-open .booking-modal__panel {
  opacity: 1;
  transform: translateY(0) scale(1);
}

/* ---- Header ---- */
.booking-modal__header {
  position: sticky;
  top: 0;
  z-index: 4;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 24px 32px 8px;
  background: var(--surface);
  border-radius: 20px 20px 0 0;
}

.booking-modal__title {
  font-size: 20px;
  font-weight: 700;
  color: var(--brand-deep);
}

.booking-modal__close {
  position: relative;
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  padding: 0;
  border-radius: 50%;
  border: 1px solid var(--brand-border);
  background: var(--surface);
  cursor: pointer;
  transition: background 0.2s, border-color 0.2s;
}
.booking-modal__close::before, .booking-modal__close::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 15px;
  height: 2px;
  border-radius: 2px;
  background: var(--brand-deep);
}
.booking-modal__close::before {
  transform: translate(-50%, -50%) rotate(45deg);
}
.booking-modal__close::after {
  transform: translate(-50%, -50%) rotate(-45deg);
}
.booking-modal__close:hover {
  background: var(--surface-tint);
  border-color: var(--brand-sky);
}

/* ---- Progress dots ---- */
.booking-progress {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 20px 32px 8px;
}
.booking-progress__dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--brand-border);
  transition: background 0.3s, transform 0.3s;
}
.booking-progress__dot.is-active {
  background: linear-gradient(135deg, var(--brand-aqua), var(--brand-sky));
  transform: scale(1.2);
}
.booking-progress__dot.is-done {
  background: var(--brand-sky);
}
.booking-progress__line {
  width: 40px;
  height: 2px;
  background: var(--brand-border);
  transition: background 0.3s;
}
.booking-progress__line.is-done {
  background: var(--brand-sky);
}

/* ---- Body / steps ---- */
.booking-modal__body {
  padding: 16px 32px 32px;
}

.booking-step {
  display: none;
}
.booking-step.is-active {
  display: block;
  animation: bookingStepIn 0.3s cubic-bezier(0.23, 1, 0.32, 1) forwards;
}

@keyframes bookingStepIn {
  from {
    opacity: 0;
    transform: translateX(16px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}
/* ---- Tour context bar ---- */
.booking-tour-context {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 24px;
  padding: 14px 18px;
  background: var(--surface-tint);
  border-radius: 10px;
}
.booking-tour-context__icon {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: linear-gradient(135deg, var(--brand-aqua), var(--brand-sky));
  display: flex;
  align-items: center;
  justify-content: center;
}
.booking-tour-context__icon svg {
  width: 20px;
  height: 20px;
  stroke: var(--text-on-dark);
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.booking-tour-context__info {
  flex: 1;
}
.booking-tour-context__tour {
  font-size: 15px;
  font-weight: 700;
  color: var(--brand-deep);
}
.booking-tour-context__date {
  font-size: 13px;
  color: var(--text-muted);
}

/* ---- Form fields ---- */
.booking-form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-bottom: 16px;
}
.booking-form-row--full {
  grid-template-columns: 1fr;
}
.booking-form-row--thirds {
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}
@media (max-width: 480px) {
  .booking-form-row:not(.booking-form-row--thirds) {
    grid-template-columns: 1fr;
  }
}

.booking-field {
  display: flex;
  flex-direction: column;
}
.booking-field label {
  margin-bottom: 6px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.2px;
  color: var(--text-primary);
}
.booking-field .booking-req {
  color: #dc3545;
  margin-left: 2px;
}
.booking-field input[type=text],
.booking-field input[type=email],
.booking-field input[type=number],
.booking-field .booking-pax-select {
  width: 100%;
  padding: 12px 16px;
  border: 1px solid var(--brand-border);
  border-radius: 10px;
  font-family: var(--font-body);
  font-size: 15px;
  color: var(--text-primary);
  background: var(--surface);
  outline: none;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.booking-field input[type=text]:focus,
.booking-field input[type=email]:focus,
.booking-field input[type=number]:focus,
.booking-field .booking-pax-select:focus {
  border-color: var(--brand-sky);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand-sky) 18%, transparent);
}
.booking-field input[type=text].is-error,
.booking-field input[type=email].is-error,
.booking-field input[type=number].is-error,
.booking-field .booking-pax-select.is-error {
  border-color: #dc3545;
  box-shadow: 0 0 0 3px color-mix(in srgb, #dc3545 12%, transparent);
}
.booking-field .booking-pax-select {
  cursor: pointer;
}
.booking-field__error {
  display: none;
  margin-top: 4px;
  font-size: 12px;
  color: #dc3545;
}
.booking-field__error.is-visible {
  display: block;
}

/* ---- Buttons ---- */
.booking-btn-primary {
  display: block;
  width: 100%;
  margin-top: 24px;
  padding: 16px 24px;
  border: 0;
  border-radius: 50px;
  background: var(--gradient-button);
  color: var(--gradient-button-fg);
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: 800;
  letter-spacing: 0.3px;
  text-transform: none;
  cursor: pointer;
  box-shadow: var(--shadow-cta);
  transition: transform 0.2s, box-shadow 0.2s;
}
.booking-btn-primary:hover, .booking-btn-primary:focus {
  color: var(--gradient-button-fg);
  transform: translateY(-2px);
  box-shadow: var(--shadow-cta-hover);
}
.booking-btn-primary:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none;
}

.booking-btn-secondary {
  display: block;
  width: 100%;
  margin-top: 24px;
  padding: 14px 24px;
  border: 1px solid var(--brand-border);
  border-radius: 50px;
  background: transparent;
  color: var(--brand-deep);
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 600;
  text-transform: none;
  cursor: pointer;
  transition: background 0.2s, border-color 0.2s;
}
.booking-btn-secondary:hover {
  background: var(--surface-tint);
  border-color: var(--brand-sky);
}

.booking-btn-back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 24px;
  padding: 0;
  background: none;
  border: 0;
  font-size: 14px;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: none;
  cursor: pointer;
  transition: color 0.2s;
}
.booking-btn-back:hover {
  color: var(--brand-deep);
}
.booking-btn-back svg {
  width: 16px;
  height: 16px;
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ---- Step 2: order summary + Flywire placeholder ---- */
.booking-summary {
  margin-bottom: 24px;
  padding: 20px;
  background: var(--surface-tint);
  border-radius: 12px;
}
.booking-summary__title {
  margin-bottom: 14px;
  font-size: 14px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  color: var(--brand-deep);
}
.booking-summary__row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 0;
  font-size: 14px;
  color: var(--text-primary);
}
.booking-summary__row + .booking-summary__row {
  border-top: 1px solid var(--brand-border);
}
.booking-summary__row span:last-child {
  font-weight: 600;
}
.booking-summary__total {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 6px;
  padding-top: 14px;
  border-top: 2px solid var(--brand-deep);
  font-size: 16px;
  font-weight: 700;
  color: var(--brand-deep);
}

/* Payment opens in Flywire's OWN popup (js/custom.js, no embedTo) — we own only
   the surcharge note, the "Pay deposit" button and the recovery affordance. */
.booking-flywire__note {
  margin: 0 0 16px;
  font-size: 13px;
  line-height: 1.5;
  color: var(--text-muted);
}
.booking-flywire__pay {
  width: 100%;
}
.booking-flywire__pay:disabled {
  opacity: 0.6;
  cursor: default;
}
.booking-flywire__secure {
  margin: 8px 0 0;
  font-size: 12px;
  line-height: 1.5;
  color: var(--text-muted);
  text-align: center;
}
.booking-flywire__alert {
  display: flex;
  gap: 8px;
  margin: 0 0 16px;
  padding: 16px;
  border: 1px solid #dc3545;
  border-radius: 12px;
  background: color-mix(in srgb, #dc3545 8%, transparent);
}
.booking-flywire__alert[hidden] {
  display: none;
}
.booking-flywire__alert-icon {
  flex: none;
  width: 22px;
  height: 22px;
  margin-top: 1px;
  fill: none;
  stroke: #dc3545;
  stroke-width: 2;
  stroke-linecap: round;
}
.booking-flywire__alert-msg {
  margin: 0;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.4;
  color: #dc3545;
}
.booking-flywire__alert-help {
  margin: 4px 0 0;
  font-size: 13px;
  line-height: 1.5;
  color: var(--brand-deep);
}
.booking-flywire__alert-help a {
  color: inherit;
  font-weight: 700;
  text-decoration: underline;
}

.booking-rooms {
  margin: 0 0 16px;
  padding: 0;
  border: 0;
}
.booking-rooms legend {
  padding: 0;
  margin-bottom: 2px;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary);
}
.booking-rooms__hint {
  margin: 0 0 8px;
  font-size: 13px;
  color: var(--text-muted);
}
.booking-rooms__hint.is-error {
  color: #dc3545;
}
.booking-rooms .booking-form-row {
  margin-bottom: 0;
}

.booking-error-msg {
  margin: 0 0 8px;
  padding: 16px;
  border-radius: 10px;
  background: color-mix(in srgb, #dc3545 10%, transparent);
  font-size: 14px;
  color: #dc3545;
}
.booking-error-msg[hidden] {
  display: none;
}

/* ---- Step 3: confirmation ---- */
.booking-confirmation {
  padding-top: 12px;
  text-align: center;
}
.booking-confirmation h2 {
  margin-bottom: 8px;
  font-size: 26px;
  font-weight: 700;
  color: var(--brand-deep);
}
.booking-confirmation__subtitle {
  margin-bottom: 28px;
  font-size: 15px;
  color: var(--text-muted);
}

.booking-checkmark {
  position: relative;
  width: 80px;
  height: 80px;
  margin: 0 auto 24px;
}
.booking-checkmark__circle-svg {
  display: block;
  width: 80px;
  height: 80px;
}
.booking-checkmark__circle {
  fill: none;
  stroke: var(--brand-sky);
  stroke-width: 3;
  stroke-miterlimit: 10;
  stroke-dasharray: 252;
  stroke-dashoffset: 252;
  animation: bookingCheckCircle 0.6s cubic-bezier(0.65, 0, 0.45, 1) forwards;
}
.booking-checkmark__check {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 32px;
  height: 32px;
  transform: translate(-50%, -50%);
  fill: none;
  stroke: var(--brand-deep);
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 48;
  stroke-dashoffset: 48;
  animation: bookingCheckMark 0.4s 0.4s cubic-bezier(0.65, 0, 0.45, 1) forwards;
}

@keyframes bookingCheckCircle {
  to {
    stroke-dashoffset: 0;
  }
}
@keyframes bookingCheckMark {
  to {
    stroke-dashoffset: 0;
  }
}
.booking-confirm-details {
  margin-bottom: 24px;
  padding: 20px;
  background: var(--surface-tint);
  border-radius: 12px;
  text-align: left;
}
.booking-confirm-details__row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 0;
  font-size: 14px;
  color: var(--text-primary);
}
.booking-confirm-details__row + .booking-confirm-details__row {
  border-top: 1px solid var(--brand-border);
}
.booking-confirm-details__row span:first-child {
  color: var(--text-muted);
}
.booking-confirm-details__row span:last-child {
  font-weight: 600;
}

.booking-next-steps {
  padding: 20px;
  background: var(--surface-tint);
  border-radius: 12px;
  text-align: left;
}
.booking-next-steps__title {
  margin-bottom: 10px;
  font-size: 15px;
  font-weight: 700;
  color: var(--brand-deep);
}
.booking-next-steps__list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.booking-next-steps__list li {
  position: relative;
  padding: 6px 0 6px 24px;
  font-size: 14px;
  line-height: 1.6;
  color: var(--text-primary);
}
.booking-next-steps__list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 12px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  border: 2px solid var(--brand-sky);
}

/* ---- Confirm-exit guard ---- */
.booking-confirm-exit {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: color-mix(in srgb, var(--brand-ink) 55%, transparent);
  border-radius: 20px;
}
.booking-confirm-exit[hidden] {
  display: none;
}
.booking-confirm-exit__dialog {
  background: var(--surface);
  border-radius: 16px;
  padding: 32px;
  max-width: 380px;
  width: 100%;
  text-align: center;
  box-shadow: var(--shadow-dropdown);
}
.booking-confirm-exit__dialog h3 {
  margin: 0 0 8px;
  font-size: 18px;
  font-weight: 700;
  color: var(--brand-deep);
}
.booking-confirm-exit__dialog p {
  margin: 0 0 24px;
  font-size: 14px;
  line-height: 1.6;
  color: var(--text-muted);
}
.booking-confirm-exit__actions {
  display: flex;
  gap: 16px;
}
.booking-confirm-exit__leave, .booking-confirm-exit__stay {
  flex: 1;
  padding: 12px 16px;
  border-radius: 50px;
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 700;
  text-transform: none;
  cursor: pointer;
  transition: background 0.2s, transform 0.2s;
}
.booking-confirm-exit__leave {
  background: var(--surface);
  border: 1px solid var(--brand-border);
  color: var(--text-muted);
}
.booking-confirm-exit__leave:hover {
  background: var(--surface-tint);
}
.booking-confirm-exit__stay {
  border: 0;
  background: var(--gradient-button);
  color: var(--gradient-button-fg);
  box-shadow: var(--shadow-cta);
}
.booking-confirm-exit__stay:hover {
  transform: translateY(-1px);
}

/* ---- Mobile: bottom sheet ---- */
@media (max-width: 600px) {
  .booking-modal {
    width: 100%;
    max-width: 100%;
    max-height: none;
    margin: 0;
    position: fixed;
    inset: auto 0 0 0;
  }
  .booking-modal__panel {
    border-radius: 20px 20px 0 0;
    max-height: 92vh;
    transform: translateY(100%);
    transition: transform 0.4s cubic-bezier(0.32, 0.72, 0, 1), opacity 0.3s ease;
  }
  .booking-modal.is-open .booking-modal__panel {
    transform: translateY(0);
  }
  .booking-modal__header {
    padding: 24px 24px 0;
  }
  .booking-progress {
    padding: 16px 24px 8px;
  }
  .booking-modal__body {
    padding: 12px 24px 28px;
  }
}
/* ---- Reduced motion ---- */
@media (prefers-reduced-motion: reduce) {
  .booking-modal__panel {
    transform: none;
    transition: opacity 0.2s ease;
  }
  .booking-modal.is-open .booking-modal__panel {
    transform: none;
  }
  .booking-step.is-active {
    animation: none;
  }
  .booking-checkmark__circle,
  .booking-checkmark__check {
    animation: none;
    stroke-dashoffset: 0;
  }
  .booking-btn-primary:hover,
  .booking-confirm-exit__stay:hover {
    transform: none;
  }
}
/*
    Post-Payment Traveller Questionnaire  (S5 · T5.3)

    Standalone token-gated, noindex page — a faithful port of the PD wireframe
    (PD-Post-Payment.html) §§1-5. Every brand colour comes through the bridge
    tokens (var(--brand-*) / var(--text-*) / var(--surface*)); nothing hard-codes
    a hue, so the page repaints per brand like the rest of the engine.

    Motion (Emil framework): custom ease-out curves, scale-on-press feedback,
    interruptible transitions (not keyframes), reduced-motion honoured.
*/
.ppq-page {
  /* Component-scoped derived tokens (all reference the brand bridge). */
  --ppq-bg-2: color-mix(in srgb, var(--brand-sky) 7%, var(--surface));
  --ppq-text-light: color-mix(in srgb, var(--text-muted) 62%, var(--surface));
  --ppq-accent-soft: color-mix(in srgb, var(--brand-sky) 12%, transparent);
  --ppq-accent-ring: color-mix(in srgb, var(--brand-sky) 22%, transparent);
  --ppq-primary-ring: color-mix(in srgb, var(--brand-deep) 12%, transparent);
  --ppq-shadow-sm: 0 4px 24px color-mix(in srgb, var(--brand-deep) 8%, transparent);
  --ppq-shadow-md: 0 6px 24px color-mix(in srgb, var(--brand-deep) 12%, transparent);
  --ppq-danger: var(--newsletter-error-strong);
  --ppq-ok: var(--status-available-fg);
  --ppq-ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  background: var(--surface);
  color: var(--text-primary);
  font-family: var(--font-body);
}
.ppq-page .container {
  max-width: 960px;
  margin: 0 auto;
  padding-left: 24px;
  padding-right: 24px;
}

/* ---- Simple header ----------------------------------------------------- */
.ppq-header {
  background: var(--surface);
  border-bottom: 1px solid var(--brand-border);
  padding: 18px 0;
  position: sticky;
  top: 0;
  z-index: 100;
  box-shadow: var(--shadow-header);
}
.ppq-header .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.ppq-header-logo {
  font-family: var(--font-display);
  font-size: 26px;
  font-weight: 400;
  color: var(--brand-deep);
  text-decoration: none;
  letter-spacing: 0.5px;
}

.ppq-header-ref {
  font-size: 14px;
  color: var(--text-muted);
  display: flex;
  align-items: center;
  gap: 8px;
}
.ppq-header-ref strong {
  color: var(--brand-deep);
  font-weight: 700;
}

/* ---- Progress stepper -------------------------------------------------- */
.ppq-stepper {
  background: var(--surface);
  padding: 28px 0;
  border-bottom: 1px solid var(--brand-border);
}
.ppq-stepper .container {
  max-width: 900px;
}

.stepper-track {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  position: relative;
}
.stepper-track::before {
  content: "";
  position: absolute;
  top: 18px;
  left: 36px;
  right: 36px;
  height: 2px;
  background: var(--brand-border);
  z-index: 0;
}

.stepper-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  position: relative;
  z-index: 1;
  cursor: pointer;
  background: none;
  border: none;
  font-family: inherit;
  padding: 0;
  transition: transform 140ms var(--ppq-ease-out);
}
.stepper-step:active {
  transform: scale(0.96);
}

.stepper-circle {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 700;
  background: var(--surface);
  border: 2px solid var(--brand-border);
  color: var(--ppq-text-light);
  transition: background 200ms ease, color 200ms ease, border-color 200ms ease, box-shadow 200ms ease;
}

.stepper-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.stepper-step.completed .stepper-circle {
  background: var(--brand-deep);
  color: var(--text-on-dark);
  border-color: var(--brand-deep);
}
.stepper-step.completed .stepper-label {
  color: var(--brand-deep);
}

.stepper-step.active .stepper-circle {
  background: var(--surface);
  color: var(--brand-deep);
  border-color: var(--brand-sky);
  box-shadow: 0 0 0 4px var(--ppq-accent-ring);
  animation: ppqStepperPulse 2s ease-in-out infinite;
}
.stepper-step.active .stepper-label {
  color: var(--brand-sky-text);
  font-weight: 700;
}

@keyframes ppqStepperPulse {
  0%, 100% {
    box-shadow: 0 0 0 4px var(--ppq-accent-ring);
  }
  50% {
    box-shadow: 0 0 0 8px var(--ppq-accent-soft);
  }
}
/* A completed step (not the one being edited) swaps its number for a tick. */
.stepper-step.completed:not(.active) .stepper-circle {
  font-size: 0;
}
.stepper-step.completed:not(.active) .stepper-circle::after {
  content: "";
  width: 6px;
  height: 11px;
  border: solid var(--text-on-dark);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg) translateY(-1px);
}

/* ---- Completion tick + validation ------------------------------------- */
.ppq-header-logo img {
  display: block;
  height: 40px;
  width: auto;
}

.ppq-section-header {
  gap: 12px;
}

.ppq-section-header-left {
  margin-right: auto;
}

.ppq-section-check {
  display: none;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--status-available-fg);
  color: var(--text-on-dark);
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.ppq-section-check svg {
  width: 14px;
  height: 14px;
}
.ppq-section.complete .ppq-section-check {
  display: inline-flex;
}

/* Fields flagged missing when the traveller presses Complete. Scoped under
   .ppq-page so it out-specifies the base `.ppq-page .form-group input` border. */
.ppq-page .form-group.invalid input,
.ppq-page .form-group.invalid select,
.ppq-page .form-group.invalid textarea {
  border-color: var(--status-soldout-fg);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--status-soldout-fg) 16%, transparent);
}

.room-options.invalid {
  outline: 2px solid var(--status-soldout-fg);
  outline-offset: 6px;
  border-radius: 12px;
}

.ppq-privacy.invalid {
  outline: 2px solid var(--status-soldout-fg);
  outline-offset: 6px;
  border-radius: 8px;
}

.ppq-submit-message {
  padding: 12px 16px;
  border-radius: 10px;
  font-size: 14px;
  line-height: 1.5;
  margin-bottom: 16px;
}
.ppq-submit-message--error {
  background: var(--status-soldout-bg);
  color: var(--status-soldout-fg);
}
.ppq-submit-message--ok {
  background: var(--status-available-bg);
  color: var(--status-available-fg);
}

/* ---- Page intro -------------------------------------------------------- */
.ppq-intro {
  background: var(--surface-tint);
  padding: 56px 0 48px;
  text-align: center;
}
.ppq-intro h1 {
  font-size: 38px;
  font-weight: 800;
  color: var(--brand-deep);
  margin-bottom: 12px;
  line-height: 1.2;
}
.ppq-intro .subtitle {
  font-size: 18px;
  color: var(--text-muted);
  max-width: 560px;
  margin: 0 auto 16px;
  line-height: 1.6;
}
.ppq-intro .booking-ref-display {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--surface);
  border: 1px solid var(--brand-border);
  border-radius: 8px;
  padding: 8px 20px;
  font-size: 14px;
  color: var(--text-muted);
}
.ppq-intro .booking-ref-display strong {
  color: var(--brand-deep);
  font-weight: 700;
}

/* ---- Form container + accordion --------------------------------------- */
.ppq-form-container {
  background: var(--surface);
  padding: 48px 0 80px;
}
.ppq-form-container .container {
  max-width: 860px;
}

/* Locked notice (departure within the lock window — view-only) */
.ppq-locked-banner {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 24px;
  padding: 16px 20px;
  border-radius: 12px;
  background: var(--status-filling-bg);
  border: 1px solid color-mix(in srgb, var(--status-filling-fg) 30%, transparent);
  color: var(--status-filling-fg);
  font-size: 14px;
  line-height: 1.55;
}
.ppq-locked-banner strong {
  display: block;
  margin-bottom: 2px;
}
.ppq-locked-banner svg {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  margin-top: 1px;
}

.ppq-section {
  border: 1px solid var(--brand-border);
  border-radius: 14px;
  margin-bottom: 16px;
  overflow: hidden;
  transition: box-shadow 300ms ease;
}
.ppq-section.open {
  box-shadow: var(--ppq-shadow-sm);
}

/* View-only fields when the questionnaire is locked */
.ppq-page input:disabled,
.ppq-page select:disabled,
.ppq-page textarea:disabled {
  background: var(--ppq-bg-2);
  opacity: 0.7;
  cursor: not-allowed;
}

.ppq-section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 22px 28px;
  cursor: pointer;
  background: var(--surface);
  border: none;
  width: 100%;
  text-align: left;
  font-family: inherit;
  text-transform: none;
  transition: background 200ms ease;
}
.ppq-section-header:hover {
  background: var(--ppq-bg-2);
}
.ppq-section.open .ppq-section-header {
  background: var(--surface-tint);
  border-bottom: 1px solid var(--brand-border);
}

.ppq-section-header-left {
  display: flex;
  align-items: center;
  gap: 16px;
}

.ppq-section-number {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--surface-tint);
  color: var(--brand-deep);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 700;
  flex-shrink: 0;
  transition: background 200ms ease, color 200ms ease;
}
.ppq-section.open .ppq-section-number {
  background: var(--brand-deep);
  color: var(--text-on-dark);
}

.ppq-section-title {
  font-size: 18px;
  font-weight: 700;
  color: var(--brand-deep);
}

.ppq-section-chevron {
  width: 24px;
  height: 24px;
  color: var(--ppq-text-light);
  flex-shrink: 0;
  transition: transform 300ms var(--ppq-ease-out), color 200ms ease;
}
.ppq-section.open .ppq-section-chevron {
  transform: rotate(180deg);
  color: var(--brand-sky);
}

.ppq-section-body {
  max-height: 0;
  overflow: hidden;
  transition: max-height 400ms var(--ppq-ease-out);
}
.ppq-section.open .ppq-section-body {
  max-height: 12000px;
}

.ppq-section-content {
  padding: 28px;
}

.ppq-section-intro {
  font-size: 16px;
  color: var(--text-muted);
  margin-bottom: 28px;
  line-height: 1.7;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--brand-border);
}

/* ---- Form elements ----------------------------------------------------- */
.ppq-page {
  /* Dialling code joined to the number, so the pair reads as one field. The
     select stays narrow: js/custom.js shows just the code until it opens. */
}
.ppq-page .form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin-bottom: 20px;
}
.ppq-page .form-row.single {
  grid-template-columns: 1fr;
}
.ppq-page .form-row.triple {
  grid-template-columns: 1fr 1fr 1fr;
}
.ppq-page .form-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}
.ppq-page .form-group label {
  font-size: 13px;
  font-weight: 600;
  color: var(--brand-deep);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.ppq-page .form-group input,
.ppq-page .form-group select,
.ppq-page .form-group textarea {
  padding: 12px 16px;
  border: 1px solid var(--brand-border);
  border-radius: 8px;
  font-size: 16px;
  font-family: var(--font-body);
  color: var(--text-primary);
  background: var(--surface);
  transition: border-color 160ms ease, box-shadow 160ms ease;
  outline: none;
}
.ppq-page .form-group input:focus,
.ppq-page .form-group select:focus,
.ppq-page .form-group textarea:focus {
  border-color: var(--brand-sky);
  box-shadow: 0 0 0 3px var(--ppq-accent-ring);
}
.ppq-page .form-group textarea {
  resize: vertical;
  min-height: 100px;
}
.ppq-page .form-group select {
  appearance: none;
  background-repeat: no-repeat;
  background-position: right 16px center;
  padding-right: 40px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none'%3E%3Cpath d='M1 1.5l5 5 5-5' stroke='%235a7a84' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
.ppq-page .form-hint {
  font-size: 12px;
  color: var(--text-muted);
  margin-top: 2px;
  line-height: 1.5;
}
.ppq-page .ppq-phone {
  display: flex;
}
.ppq-page .ppq-phone select {
  flex: 0 0 96px;
  width: 96px;
  padding-left: 12px;
  padding-right: 28px;
  background-position: right 10px center;
  border-radius: 8px 0 0 8px;
  text-overflow: ellipsis;
}
.ppq-page .ppq-phone input {
  flex: 1 1 auto;
  min-width: 0;
  margin-left: -1px;
  border-radius: 0 8px 8px 0;
}
.ppq-page .ppq-phone select:focus,
.ppq-page .ppq-phone input:focus {
  position: relative;
  z-index: 1;
}
.ppq-page .ppq-diet-hint {
  margin: -6px 0 20px;
}
.ppq-page .ppq-field-label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: var(--brand-deep);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 12px;
}

/* ---- Traveller fieldset ------------------------------------------------ */
.traveller-fieldset {
  background: var(--ppq-bg-2);
  border-radius: 12px;
  padding: 24px;
  margin-bottom: 20px;
}

.traveller-fieldset-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
}

.traveller-fieldset-title {
  font-size: 16px;
  font-weight: 700;
  color: var(--brand-deep);
}

.emergency-heading {
  font-size: 14px;
  font-weight: 700;
  color: var(--brand-deep);
  margin: 24px 0 16px;
  padding-top: 20px;
  border-top: 1px solid var(--brand-border);
}

/* ---- Room type cards --------------------------------------------------- */
.room-options {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-bottom: 24px;
}

.room-option {
  position: relative;
  border: 2px solid var(--brand-border);
  border-radius: 12px;
  padding: 24px 20px;
  text-align: center;
  cursor: pointer;
  background: var(--surface);
  transition: border-color 200ms ease, background 200ms ease, box-shadow 200ms ease, transform 140ms var(--ppq-ease-out);
  display: block;
}
.room-option:hover {
  border-color: var(--brand-sky);
  background: var(--surface-tint);
}
.room-option:active {
  transform: scale(0.99);
}
.room-option.selected {
  border-color: var(--brand-deep);
  background: var(--surface-tint);
  box-shadow: 0 0 0 3px var(--ppq-primary-ring);
}
.room-option input[type=radio] {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.room-icon {
  width: 48px;
  height: 48px;
  margin: 0 auto 12px;
  color: var(--brand-sky);
  display: block;
}
.room-option.selected .room-icon {
  color: var(--brand-deep);
}

.room-option-label {
  display: block;
  font-size: 16px;
  font-weight: 700;
  color: var(--brand-deep);
  margin-bottom: 4px;
}

.room-option-desc {
  display: block;
  font-size: 13px;
  color: var(--text-muted);
}

.single-supplement-note {
  font-size: 13px;
  color: var(--text-muted);
  background: var(--ppq-bg-2);
  padding: 12px 16px;
  border-radius: 8px;
  border-left: 3px solid var(--brand-sky);
  margin-top: 16px;
}

/* ---- Your Choice cards ------------------------------------------------- */
.choice-day {
  margin-bottom: 32px;
}
.choice-day:last-child {
  margin-bottom: 0;
}

.choice-day-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
}

.choice-day-badge {
  background: var(--brand-deep);
  color: var(--text-on-dark);
  font-size: 12px;
  font-weight: 700;
  padding: 4px 12px;
  border-radius: 20px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.choice-day-title {
  font-size: 18px;
  font-weight: 700;
  color: var(--brand-deep);
}

.choice-options {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 16px;
  margin-bottom: 12px;
}

.choice-card {
  position: relative;
  border: 2px solid var(--brand-border);
  border-radius: 12px;
  overflow: hidden;
  cursor: pointer;
  background: var(--surface);
  display: flex;
  flex-direction: column;
  transition: border-color 250ms ease, box-shadow 250ms ease, transform 200ms var(--ppq-ease-out);
}
.choice-card:hover {
  border-color: var(--brand-sky);
  transform: translateY(-2px);
  box-shadow: var(--ppq-shadow-md);
}
.choice-card:active {
  transform: scale(0.99);
}
.choice-card.selected {
  border-color: var(--brand-deep);
  box-shadow: 0 0 0 3px var(--ppq-primary-ring), var(--ppq-shadow-md);
}
.choice-card input[type=radio] {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.choice-card-image {
  width: 100%;
  height: 160px;
  object-fit: cover;
  display: block;
}

.choice-card-body {
  padding: 16px;
  display: block;
}

.choice-card-option-label {
  display: block;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--brand-sky-text);
  margin-bottom: 4px;
}

.choice-card-title {
  display: block;
  font-size: 16px;
  font-weight: 700;
  color: var(--brand-deep);
  margin-bottom: 6px;
  line-height: 1.3;
}

.choice-card-duration {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  color: var(--ppq-text-light);
  margin-bottom: 8px;
}

.choice-card-desc {
  display: block;
  position: relative;
  font-size: 14px;
  color: var(--text-muted);
  line-height: 1.5;
  overflow: hidden;
  max-height: 6.3em;
  transition: max-height 320ms var(--ppq-ease-out);
}
.choice-card-desc::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1.6em;
  background: linear-gradient(to bottom, transparent, var(--surface));
  pointer-events: none;
  transition: opacity 200ms ease;
}
.choice-card-desc.is-open {
  max-height: 42em;
}
.choice-card-desc.is-open::after {
  opacity: 0;
}

.choice-card-more {
  display: inline-block;
  margin-top: 8px;
  padding: 0;
  background: none;
  border: 0;
  font-family: inherit;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: none;
  color: var(--brand-sky-text);
  cursor: pointer;
}
.choice-card-more:hover, .choice-card-more:focus {
  color: var(--brand-deep);
  text-decoration: underline;
}

.choice-card-learn {
  display: flex;
  align-items: center;
  gap: 6px;
  width: fit-content;
  margin-top: 12px;
  padding: 9px 16px;
  border: 1px solid var(--brand-border);
  border-radius: 8px;
  font-size: 13px;
  font-weight: 700;
  color: var(--brand-deep);
  background: var(--surface);
  text-decoration: none;
  transition: border-color 200ms ease, background 200ms ease;
}
.choice-card-learn svg {
  width: 13px;
  height: 13px;
}
.choice-card-learn:hover, .choice-card-learn:focus {
  color: var(--brand-deep);
  border-color: var(--brand-sky);
  background: var(--surface-tint);
}

@media (prefers-reduced-motion: reduce) {
  .choice-card-desc {
    transition: none;
  }
}
.choice-card-check {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--brand-deep);
  color: var(--text-on-dark);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transform: scale(0.8);
  transition: opacity 200ms ease, transform 200ms var(--ppq-ease-out);
}
.choice-card.selected .choice-card-check {
  opacity: 1;
  transform: scale(1);
}

.choice-decide-later {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  color: var(--text-muted);
  cursor: pointer;
  padding: 8px 0;
}
.choice-decide-later input[type=radio] {
  accent-color: var(--brand-sky);
  width: 16px;
  height: 16px;
}

/* ---- Dietary checkboxes ------------------------------------------------ */
.checkbox-group {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 20px;
}

.checkbox-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  border: 1px solid var(--brand-border);
  border-radius: 8px;
  cursor: pointer;
  font-size: 15px;
  color: var(--text-primary);
  background: var(--surface);
  transition: border-color 200ms ease, background 200ms ease;
}
.checkbox-item:hover {
  border-color: var(--brand-sky);
  background: var(--surface-tint);
}
.checkbox-item.checked {
  border-color: var(--brand-deep);
  background: var(--surface-tint);
}
.checkbox-item input[type=checkbox] {
  accent-color: var(--brand-deep);
  width: 18px;
  height: 18px;
}

.confidential-note {
  font-size: 13px;
  color: var(--text-muted);
  background: var(--ppq-bg-2);
  padding: 12px 16px;
  border-radius: 8px;
  margin-top: 8px;
  display: flex;
  align-items: flex-start;
  gap: 8px;
}
.confidential-note svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  margin-top: 2px;
  color: var(--brand-sky);
}

/* ---- Flights ----------------------------------------------------------- */
.flight-group {
  background: var(--ppq-bg-2);
  border-radius: 12px;
  padding: 24px;
  margin-bottom: 20px;
}

.flight-group-title {
  font-size: 15px;
  font-weight: 700;
  color: var(--brand-deep);
  margin-bottom: 16px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.flight-group-title svg {
  width: 20px;
  height: 20px;
  color: var(--brand-sky);
}

.flights-not-booked {
  margin-top: 20px;
}
.flights-not-booked.ppq-ec-same {
  margin: 0 0 16px;
}
.flights-not-booked label {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 15px;
  color: var(--text-primary);
  cursor: pointer;
  font-weight: 600;
}
.flights-not-booked input[type=checkbox] {
  accent-color: var(--brand-sky);
  width: 18px;
  height: 18px;
}

.flight-tips {
  display: none;
  margin-top: 16px;
  padding: 20px;
  background: var(--surface);
  border: 1px solid var(--brand-border);
  border-radius: 10px;
}
.flight-tips.visible {
  display: block;
}
.flight-tips h4 {
  font-size: 15px;
  font-weight: 700;
  color: var(--brand-deep);
  margin-bottom: 10px;
}
.flight-tips ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
.flight-tips li {
  font-size: 14px;
  color: var(--text-muted);
  padding: 6px 0 6px 20px;
  position: relative;
  line-height: 1.5;
}
.flight-tips li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 12px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--brand-sky);
}

/* ---- Submit ------------------------------------------------------------ */
.ppq-submit {
  padding: 40px 0 0;
  text-align: center;
}

.ppq-privacy {
  max-width: 640px;
  margin: 0 auto 24px;
  padding: 18px 22px;
  background: var(--ppq-bg-2);
  border: 1px solid var(--brand-border);
  border-radius: 12px;
  display: flex;
  align-items: flex-start;
  gap: 12px;
  text-align: left;
  cursor: pointer;
}
.ppq-privacy input[type=checkbox] {
  margin-top: 3px;
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  accent-color: var(--brand-deep);
  cursor: pointer;
}

.ppq-privacy-text {
  font-size: 13px;
  color: var(--text-muted);
  line-height: 1.55;
}
.ppq-privacy-text a {
  color: var(--brand-deep);
  font-weight: 600;
  text-decoration: underline;
}

.ppq-submit-btn {
  display: inline-block;
  width: 100%;
  max-width: 480px;
  padding: 18px 40px;
  background: var(--gradient-button);
  color: var(--gradient-button-fg);
  border: none;
  border-radius: 50px;
  font-size: 16px;
  font-weight: 800;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  cursor: pointer;
  font-family: inherit;
  text-decoration: none;
  box-shadow: var(--shadow-cta);
  transition: transform 160ms var(--ppq-ease-out), box-shadow 200ms ease;
}
.ppq-submit-btn:hover, .ppq-submit-btn:focus {
  color: var(--gradient-button-fg);
  transform: translateY(-2px);
  box-shadow: var(--shadow-cta-hover);
}
.ppq-submit-btn:active {
  transform: scale(0.98);
}

/* ---- Auto-save indicator (persistent, bottom-right) ------------------- */
.ppq-autosave {
  position: fixed;
  bottom: 24px;
  right: 24px;
  display: flex;
  align-items: center;
  gap: 6px;
  background: var(--surface);
  border: 1px solid var(--brand-border);
  border-radius: 8px;
  padding: 8px 16px;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-muted);
  box-shadow: var(--shadow-header);
  z-index: 50;
  opacity: 0.85;
  transition: opacity 300ms ease;
}
.ppq-autosave[hidden] {
  display: none;
}
.ppq-autosave.saving {
  animation: ppqSavePulse 1s ease-in-out;
}
.ppq-autosave svg {
  width: 16px;
  height: 16px;
  color: var(--ppq-ok);
}

@keyframes ppqSavePulse {
  0%, 100% {
    opacity: 0.85;
  }
  50% {
    opacity: 1;
  }
}
/* ---- Footer + not-found ------------------------------------------------ */
.ppq-footer {
  background: var(--brand-ink);
  padding: 24px 0;
  text-align: center;
}

.ppq-footer-content {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 24px;
  font-size: 13px;
  color: var(--footer-text);
}
.ppq-footer-content a {
  color: var(--brand-sky-text);
  text-decoration: none;
  transition: color 200ms ease;
}
.ppq-footer-content a:hover {
  color: var(--text-on-dark);
}

.ppq-footer-divider {
  width: 1px;
  height: 14px;
  background: var(--border-on-dark);
}

.ppq-notfound {
  max-width: 560px;
  margin: 0 auto;
  padding: 96px 24px;
  text-align: center;
}
.ppq-notfound h1 {
  font-size: 30px;
  font-weight: 800;
  color: var(--brand-deep);
  margin-bottom: 14px;
}
.ppq-notfound p {
  font-size: 16px;
  color: var(--text-muted);
  line-height: 1.6;
  margin-bottom: 28px;
}
.ppq-notfound .ppq-submit-btn {
  width: auto;
}

/* ---- Responsive -------------------------------------------------------- */
@media (max-width: 900px) {
  .ppq-page .form-row,
  .ppq-page .form-row.triple {
    grid-template-columns: 1fr;
  }
  .room-options,
  .choice-options {
    grid-template-columns: 1fr;
  }
  .ppq-intro h1 {
    font-size: 30px;
  }
  .ppq-section-content {
    padding: 20px;
  }
  .stepper-label {
    font-size: 10px;
  }
  .stepper-circle {
    width: 30px;
    height: 30px;
    font-size: 12px;
  }
}
@media (min-width: 641px) and (max-width: 900px) {
  .choice-options {
    grid-template-columns: 1fr 1fr;
  }
}
@media (max-width: 640px) {
  .ppq-header-logo {
    font-size: 22px;
  }
  .ppq-header-ref span {
    display: none;
  }
  .stepper-label {
    display: none;
  }
  .stepper-track::before {
    left: 20px;
    right: 20px;
  }
  .ppq-intro {
    padding: 40px 0 32px;
  }
  .ppq-intro h1 {
    font-size: 26px;
  }
  .ppq-intro .subtitle {
    font-size: 16px;
  }
  .ppq-section-header {
    padding: 16px 20px;
  }
  .ppq-section-title {
    font-size: 16px;
  }
  .ppq-section-content {
    padding: 16px;
  }
  .ppq-autosave {
    bottom: 16px;
    right: 16px;
  }
  .choice-day-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .ppq-page * {
    scroll-behavior: auto !important;
  }
  .stepper-step.active .stepper-circle,
  .ppq-autosave.saving {
    animation: none;
  }
  .stepper-step:active,
  .room-option:active,
  .choice-card:active,
  .ppq-submit-btn:active {
    transform: none;
  }
  .choice-card:hover {
    transform: none;
  }
}
/*
    Callback modal (S5)

    The "Request a Call Back" popup: a native <dialog> holding the callback
    Gravity Form (template-parts/callback-modal.php). Desktop is the booking and
    review modals' shell — same radii, same curve — so the three popups read as
    one product. Below $screen-md it becomes the tour page's day-detail bottom
    sheet: flips up, grab handle, drag down to dismiss (js/custom.js).

    ponytail: the dialog shell below deliberately repeats _review-modal.scss for
    the same reason that one repeats _booking-modal.scss — a live payment flow
    sits on the original. Three copies is the point at which factoring out a
    shared %modal-shell placeholder pays for itself; do that next, not now.

    Two pieces are specific to this form:
      · the context ribbon, naming the tour the guest launched from
      · the preferred-time chips, a real radio group styled as pill segments
        with :has() — no JS, so it stays keyboard-accessible and token-pure

    Brand colour comes only from var(--…) tokens.
*/
/* ---- Shell ---- */
.callback-modal {
  padding: 0;
  border: 0;
  margin: auto;
  width: 92%;
  max-width: 520px;
  max-height: 90vh;
  background: transparent;
  color: var(--text-primary);
  overflow: visible;
}
.callback-modal::backdrop {
  background: color-mix(in srgb, var(--brand-ink) 92%, transparent);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  opacity: 0;
  transition: opacity 0.3s ease;
}
.callback-modal.is-open::backdrop {
  opacity: 1;
}

.callback-modal__panel {
  position: relative;
  background: var(--surface);
  border-radius: 20px;
  box-shadow: var(--shadow-dropdown);
  max-height: 90vh;
  overflow-y: auto;
  overscroll-behavior: contain;
  opacity: 0;
  transform: translateY(20px) scale(0.97);
  transition: opacity 0.35s cubic-bezier(0.23, 1, 0.32, 1), transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}
.callback-modal__panel:focus {
  outline: none;
}
.callback-modal.is-open .callback-modal__panel {
  opacity: 1;
  transform: translateY(0) scale(1);
}

/* Grab handle — sheet chrome, so hidden until the sheet breakpoint. */
.callback-modal__grip {
  display: none;
}

/* ---- Header ---- */
.callback-modal__header {
  position: sticky;
  top: 0;
  z-index: 4;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 24px 32px 8px;
  background: var(--surface);
  border-radius: 20px 20px 0 0;
}

.callback-modal__title {
  margin: 0;
  font-size: 20px;
  font-weight: 700;
  color: var(--brand-deep);
}

.callback-modal__close {
  position: relative;
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  padding: 0;
  border-radius: 50%;
  border: 1px solid var(--brand-border);
  background: var(--surface);
  cursor: pointer;
  transition: background 0.2s, border-color 0.2s;
}
.callback-modal__close::before, .callback-modal__close::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 15px;
  height: 2px;
  border-radius: 2px;
  background: var(--brand-deep);
}
.callback-modal__close::before {
  transform: translate(-50%, -50%) rotate(45deg);
}
.callback-modal__close::after {
  transform: translate(-50%, -50%) rotate(-45deg);
}
.callback-modal__close:hover {
  background: var(--surface-tint);
  border-color: var(--brand-sky);
}

/* ---- Body ---- */
.callback-modal__body {
  padding: 0 32px 32px;
}

.callback-modal__intro {
  margin: 0 0 16px;
  font-size: 14px;
  line-height: 1.6;
  color: var(--text-muted);
}

/* ---- Context ribbon ----
   Names the tour (and departure) the CTA came from, so the popup visibly knows
   what the guest was reading. Filled by JS; stays hidden when there is nothing
   to name, e.g. a lead band on a page that isn't about one tour. */
.callback-modal__context {
  margin: 0 0 24px;
  padding: 10px 16px;
  border-left: 3px solid var(--brand-sky);
  border-radius: 0 8px 8px 0;
  background: var(--surface-tint);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.5;
  color: var(--brand-deep);
}

/* Gravity Forms styling comes from the shared enquiry skin — .callback-modal__form
   is listed alongside .enquiry-form in css/_forms.scss, so the popup inherits
   the 1.5px borders, 10px radii and gradient pill submit rather than restating
   them. Only the time chips below are specific to this form. */
/* ---- Preferred-time chips ----
   A real radio group, no JS: GF's choices laid out as pill segments. Wraps
   rather than squeezing the labels, so it survives the narrow Contact-page
   sidebar card as well as the popup.

   Unscoped on purpose: the ltt-* classes are a contract on the FORM, and the
   callback form renders in the sidebar card too. Scoping these to
   .callback-modal would leave that card with bare browser radios. */
.gfield.ltt-callback-time {
  /* ---- "Times shown for <zone>" ----
     We guess the guest's zone from the browser and say so out loud, because a
     private window can report the wrong one and a silently wrong time is worse
     than an obvious question. Built by JS: with no JS there is nothing to
     correct, since the chips are still labelled in NZ time. */
}
.gfield.ltt-callback-time .gfield_label {
  position: static !important;
  width: auto !important;
  height: auto !important;
  clip: auto !important;
  clip-path: none !important;
  overflow: visible !important;
}
.gfield.ltt-callback-time .gfield_radio {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
}
.gfield.ltt-callback-time .gchoice {
  flex: 1 1 auto;
  width: auto !important;
  grid-template-columns: 1fr !important;
}
.gfield.ltt-callback-time input[type=radio] {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: 0;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
.gfield.ltt-callback-time .gchoice label {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 2px;
  width: 100% !important;
  height: 100%;
  margin: 0;
  padding: 10px 14px;
  border: 1.5px solid color-mix(in srgb, var(--brand-border) 70%, var(--surface));
  border-radius: 50px;
  background: var(--surface);
  font-size: 14px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  line-height: 1.2;
  text-align: center;
  color: var(--brand-deep);
  cursor: pointer;
  transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease, transform 0.16s cubic-bezier(0.23, 1, 0.32, 1);
}
.gfield.ltt-callback-time .gchoice label:active {
  transform: scale(0.97);
}
@media (hover: hover) and (pointer: fine) {
  .gfield.ltt-callback-time .gchoice label:hover {
    background: var(--surface-tint);
    border-color: var(--brand-sky);
  }
}
@media (max-width: 576px) {
  .gfield.ltt-callback-time .gfield_radio {
    flex-direction: column !important;
  }
  .gfield.ltt-callback-time .gchoice {
    width: 100% !important;
  }
  .gfield.ltt-callback-time .gchoice label {
    flex-direction: row;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 16px;
    border-radius: 12px;
    text-align: left;
  }
}
.gfield.ltt-callback-time .gchoice:has(input:checked) label {
  background: var(--gradient-button);
  border-color: transparent;
  color: var(--gradient-button-fg);
}
.gfield.ltt-callback-time input:focus-visible + label {
  outline: 2px solid var(--brand-sky);
  outline-offset: 3px;
}
.gfield.ltt-callback-time .ltt-callback-tz {
  margin: 6px 0 8px !important;
  font-size: 13px;
  line-height: 1.5;
  color: var(--text-muted);
}
.gfield.ltt-callback-time .ltt-callback-tz .ltt-callback-tz__label {
  display: inline-flex !important;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px;
  margin: 0 !important;
  padding: 0 !important;
  font-size: inherit !important;
  font-weight: 400 !important;
  text-align: left !important;
  color: inherit !important;
}
.gfield.ltt-callback-time .ltt-callback-tz .ltt-callback-tz__sizer {
  position: relative;
  display: inline-grid;
  max-width: 100%;
  padding-right: 12px;
  border-bottom: 1px solid color-mix(in srgb, var(--brand-sky) 40%, transparent);
  font-weight: 600;
  color: var(--brand-deep);
  cursor: pointer;
}
.gfield.ltt-callback-time .ltt-callback-tz .ltt-callback-tz__sizer::after {
  content: "";
  position: absolute;
  right: 1px;
  top: 50%;
  width: 6px;
  height: 6px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: translateY(-70%) rotate(45deg);
  opacity: 0.6;
  pointer-events: none;
}
.gfield.ltt-callback-time .ltt-callback-tz .ltt-callback-tz__sizer:hover {
  border-bottom-color: var(--brand-sky);
}
.gfield.ltt-callback-time .ltt-callback-tz .ltt-callback-tz__sizer > * {
  grid-area: 1/1;
}
.gfield.ltt-callback-time .ltt-callback-tz .ltt-callback-tz__shown {
  white-space: nowrap;
}
.gfield.ltt-callback-time .ltt-callback-tz .ltt-callback-tz__sep {
  margin-left: -4px;
}
.gfield.ltt-callback-time .ltt-callback-tz .ltt-callback-tz__select {
  -webkit-appearance: none !important;
  appearance: none !important;
  position: absolute;
  inset: 0;
  width: 100% !important;
  min-width: 0 !important;
  height: auto !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: none !important;
  box-shadow: none !important;
  font-family: inherit !important;
  font-size: inherit !important;
  font-weight: inherit !important;
  line-height: inherit !important;
  color: transparent !important;
  cursor: pointer;
}
.gfield.ltt-callback-time .ltt-callback-tz .ltt-callback-tz__select:focus, .gfield.ltt-callback-time .ltt-callback-tz .ltt-callback-tz__select:focus-visible {
  box-shadow: none !important;
  outline: 2px solid var(--brand-sky);
  outline-offset: 3px;
}
.gfield.ltt-callback-time .ltt-callback-tz .ltt-callback-tz__select option {
  color: var(--text-primary);
}

/* The tour, the departure and the guest's time zone ride along with the
   request — system context, never something to fill in, so the fields are
   hidden wherever the form renders. */
.gfield.ltt-callback-tour,
.gfield.ltt-callback-departure,
.gfield.ltt-callback-zone {
  display: none;
}

/* ---- Success ---- */
.callback-modal__done {
  padding: 16px 0 8px;
  text-align: center;
  animation: callbackDoneIn 0.3s cubic-bezier(0.23, 1, 0.32, 1) both;
}
.callback-modal__done h3 {
  margin: 0 0 8px;
  font-size: 22px;
  color: var(--brand-deep);
}
.callback-modal__done p {
  margin: 0 auto;
  max-width: 38ch;
  font-size: 14px;
  line-height: 1.6;
  color: var(--text-muted);
}

.callback-modal__check {
  width: 64px;
  height: 64px;
  margin: 0 auto 16px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, var(--brand-aqua), var(--brand-sky));
}
.callback-modal__check svg {
  width: 30px;
  height: 30px;
  fill: none;
  stroke: var(--text-on-dark);
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 32;
  stroke-dashoffset: 32;
  animation: callbackCheckDraw 0.4s cubic-bezier(0.23, 1, 0.32, 1) 0.15s forwards;
}

.callback-modal__done-btn {
  margin-top: 24px;
  padding: 12px 32px;
  border: 1px solid var(--brand-border);
  border-radius: 50px;
  background: var(--surface);
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 700;
  color: var(--brand-deep);
  cursor: pointer;
  transition: background 0.2s, transform 0.16s cubic-bezier(0.23, 1, 0.32, 1);
}
.callback-modal__done-btn:hover {
  background: var(--surface-tint);
}
.callback-modal__done-btn:active {
  transform: scale(0.97);
}

@keyframes callbackDoneIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes callbackCheckDraw {
  to {
    stroke-dashoffset: 0;
  }
}
/* ---- Sheet: below $screen-md the popup flips up like the tour page's
   day-detail card (see _ts-itinerary.scss). A portrait tablet is a thumb
   device, so it gets the sheet too. ---- */
@media (max-width: 991px) {
  .callback-modal {
    position: fixed;
    inset: auto 0 0 0;
    width: 100%;
    max-width: 100%;
    max-height: none;
    margin: 0;
  }
  .callback-modal__panel {
    max-height: 86dvh;
    border-radius: 20px 20px 0 0;
    opacity: 1;
    transform: translateY(100%);
    transition: transform 0.35s cubic-bezier(0.32, 0.72, 0, 1);
  }
  .callback-modal.is-open .callback-modal__panel {
    transform: translateY(0);
  }
  .callback-modal__grip {
    display: flex;
    position: sticky;
    top: 0;
    z-index: 5;
    justify-content: center;
    padding: 10px 0 2px;
    background: var(--surface);
    border-radius: 20px 20px 0 0;
    touch-action: none;
  }
  .callback-modal__handle {
    width: 42px;
    height: 4px;
    border-radius: 2px;
    background: var(--brand-border);
  }
  .callback-modal__header {
    top: 16px;
    padding: 8px 24px 8px;
    border-radius: 0;
    touch-action: none;
  }
  .callback-modal__body {
    padding: 0 24px 48px;
  }
}
@media (max-width: 576px) {
  .callback-modal__body {
    padding: 0 16px 32px;
  }
  .callback-modal__header {
    padding: 8px 16px;
  }
  .callback-modal__title {
    font-size: 18px;
  }
}
@media (max-height: 480px) and (orientation: landscape) {
  .callback-modal__panel {
    max-height: 92dvh;
  }
}
/* ---- Reduced motion — the drag gesture still works, the movement goes ---- */
@media (prefers-reduced-motion: reduce) {
  .callback-modal__panel {
    transform: none;
    transition: opacity 0.2s ease;
  }
  .callback-modal.is-open .callback-modal__panel {
    transform: none;
  }
  .callback-modal__done {
    animation: none;
  }
  .callback-modal__check svg {
    animation: none;
    stroke-dashoffset: 0;
  }
  .gfield.ltt-callback-time .gchoice label:active,
  .callback-modal__done-btn:active {
    transform: none;
  }
}
/*
    Component · Featured Tour block — a compact in-content card linking to a
    tour CPT (rendered by the acf/featured-tour Gutenberg block). Image left,
    name + duration + "View Tour" link right. All colour via brand/surface
    tokens, so it repaints per brand with no code change.
*/
.featured-tour-block {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 18px;
  margin: 32px 0;
  border: 1px solid var(--brand-border);
  border-radius: 12px;
  background: var(--surface-tint);
  text-decoration: none;
  transition: box-shadow 0.2s ease;
}
.featured-tour-block:hover {
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
}
.featured-tour-block .ft-img {
  flex: 0 0 auto;
  width: 140px;
  height: 100px;
  border-radius: 8px;
  background-color: var(--surface);
  background-size: cover;
  background-position: center;
}
.featured-tour-block .ft-body {
  flex: 1;
  min-width: 0;
}
.featured-tour-block .ft-name {
  font-size: 16px;
  font-weight: 700;
  color: var(--brand-deep);
  line-height: 1.3;
  margin-bottom: 4px;
}
.featured-tour-block .ft-meta {
  font-size: 13px;
  color: var(--text-muted);
  margin-bottom: 10px;
}
.featured-tour-block .ft-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 1.2px;
  color: var(--brand-sky-text);
  text-decoration: none;
}
.featured-tour-block .ft-link:hover {
  color: var(--brand-deep);
}
.featured-tour-block .ft-link svg {
  width: 14px;
  height: 14px;
  transition: transform 0.2s ease;
}
.featured-tour-block:hover .ft-link svg {
  transform: translateX(3px);
}
@media (max-width: 768px) {
  .featured-tour-block {
    flex-direction: column;
    align-items: stretch;
    gap: 14px;
  }
  .featured-tour-block .ft-img {
    width: 100%;
    height: 140px;
  }
}

/* Editor-only prompt shown before a tour is chosen. */
.featured-tour-block--empty {
  display: block;
  color: var(--text-muted);
  font-style: italic;
  background: var(--surface-tint);
}

@media (prefers-reduced-motion: reduce) {
  .featured-tour-block {
    transition: none;
  }
  .featured-tour-block:hover {
    transform: none;
  }
  .featured-tour-block .ft-link svg, .featured-tour-block:hover .ft-link svg {
    transition: none;
    transform: none;
  }
}
/*
    HubSpot cookie consent banner (#hs-eu-cookie-confirmation)

    The HubSpot tracking code (portal 22514115, loaded by the deferred hs-scripts
    loader) injects its own consent banner: by default a wide modal card pinned
    to the TOP of the viewport, which sat over the header, logo and hero heading.
    This restyles it as a compact, non-blocking banner at the BOTTOM: a card in
    the bottom-left corner on desktop, a full-width bar on mobile. Theme CSS
    only, no portal setting changes. On brands without HubSpot nothing matches.

    How it overrides HubSpot without a pile of !important:
      1. HubSpot drives most of its layout from --hs-banner-* custom properties,
         set inline on #hs-banner-parent and inherited. Redeclaring them on the
         banner itself wins (a property declared on an element beats an inherited
         one), so position, width, colours and type are just token swaps.
      2. The few literals it does not expose (max-width, button min-width) are
         set under `body #hs-banner-parent ...`, one element more specific than
         HubSpot's `#hs-banner-parent #hs-eu-cookie-confirmation`, because its
         stylesheet is injected after ours and would win a tie.

    Consent: Accept and Decline stay the same size, side by side, both with
    full-strength brand ink and a 2px edge, so declining is as easy as accepting.
*/
#hs-eu-cookie-confirmation {
  --hs-banner-inset: auto auto 24px 24px;
  --hs-banner-width: 420px;
  --hs-banner-font-size: 14px;
  --hs-banner-font-family: var(--font-body);
  --hs-banner-padding: 24px 24px 20px;
  --hs-banner-corners: 16px;
  --hs-banner-button-corners: 999px;
  --hs-banner-color: var(--surface);
  --hs-banner-text-color: var(--text-primary);
  --hs-banner-accentColor: var(--brand-deep);
  --hs-banner-accept-color: var(--brand-deep);
  --hs-banner-accept-border-color: var(--brand-deep);
  --hs-banner-accept-text-color: var(--text-on-dark);
  --hs-banner-decline-color: var(--surface);
  --hs-banner-decline-border-color: var(--brand-deep);
  --hs-banner-decline-text-color: var(--brand-deep);
  --hs-banner-close-button-display: flex;
}

body #hs-banner-parent #hs-eu-cookie-confirmation {
  max-width: calc(100% - 48px);
  max-height: min(70vh, 100% - 48px);
  border: 1px solid var(--brand-border);
  box-shadow: var(--shadow-dropdown);
}
body #hs-banner-parent #hs-eu-cookie-confirmation #hs-eu-cookie-confirmation-inner {
  gap: 12px;
}
body #hs-banner-parent #hs-eu-cookie-confirmation #hs-eu-header-container {
  position: absolute;
  top: 8px;
  right: 8px;
}
body #hs-banner-parent #hs-eu-cookie-confirmation #hs-eu-close-button {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  color: var(--text-muted);
}
body #hs-banner-parent #hs-eu-cookie-confirmation #hs-eu-close-button svg {
  width: 12px;
  height: 12px;
  color: inherit;
}
body #hs-banner-parent #hs-eu-cookie-confirmation #hs-eu-close-button:hover {
  background: var(--surface-tint);
  color: var(--text-primary);
}
body #hs-banner-parent #hs-eu-cookie-confirmation #hs-eu-policy-wording,
body #hs-banner-parent #hs-eu-cookie-confirmation #hs-eu-cookie-disclaimer {
  padding-right: 24px;
  line-height: 1.5;
}
body #hs-banner-parent #hs-eu-cookie-confirmation #hs-eu-policy-wording a {
  color: var(--brand-deep);
  text-decoration: underline;
}
body #hs-banner-parent #hs-eu-cookie-confirmation #hs-eu-confirmation-button-group,
body #hs-banner-parent #hs-eu-cookie-confirmation #hs-eu-opt-in-buttons {
  flex: 1 1 100%;
}
body #hs-banner-parent #hs-eu-cookie-confirmation #hs-eu-opt-in-buttons {
  flex-wrap: nowrap;
  gap: 8px;
}
body #hs-banner-parent #hs-eu-cookie-confirmation #hs-eu-confirmation-button,
body #hs-banner-parent #hs-eu-cookie-confirmation #hs-eu-decline-button {
  flex: 1 1 0;
  min-width: 0;
  height: 40px;
  padding: 0 16px;
  border-width: 2px;
  font-weight: 600;
  line-height: 1;
  transition: background-color 0.2s cubic-bezier(0.23, 1, 0.32, 1), color 0.2s cubic-bezier(0.23, 1, 0.32, 1);
}
body #hs-banner-parent #hs-eu-cookie-confirmation #hs-eu-confirmation-button:hover {
  background: var(--brand-ink);
  border-color: var(--brand-ink);
}
body #hs-banner-parent #hs-eu-cookie-confirmation #hs-eu-decline-button:hover {
  background: var(--surface-tint);
}
body #hs-banner-parent #hs-eu-cookie-confirmation #hs-eu-close-button:focus-visible,
body #hs-banner-parent #hs-eu-cookie-confirmation #hs-eu-confirmation-button:focus-visible,
body #hs-banner-parent #hs-eu-cookie-confirmation #hs-eu-decline-button:focus-visible,
body #hs-banner-parent #hs-eu-cookie-confirmation #hs-eu-policy-wording a:focus-visible {
  outline: 2px solid var(--brand-deep);
  outline-offset: 2px;
}

body:has(#hs-eu-cookie-confirmation:not(.hs-hidden)) #hubspot-messages-iframe-container {
  z-index: 2147483646;
}

@media (max-width: 576px) {
  #hs-eu-cookie-confirmation {
    --hs-banner-inset: auto 0 0 0;
    --hs-banner-width: 100%;
    --hs-banner-corners: 16px 16px 0 0;
    --hs-banner-padding: 20px 16px 16px;
  }
  body #hs-banner-parent #hs-eu-cookie-confirmation {
    max-width: 100%;
    max-height: 60vh;
    border-width: 1px 0 0;
    padding-bottom: env(safe-area-inset-bottom, 0);
  }
}
/*
    Photo credit overlay: small text over the bottom right of an image, from the
    attachment's "Photo credit" field (ltt_image_credit()). The parent must be
    position: relative.
*/
.img-credit {
  position: absolute;
  right: 8px;
  bottom: 8px;
  z-index: 3;
  max-width: calc(100% - 16px);
  padding: 2px 8px;
  border-radius: 4px;
  background: color-mix(in srgb, var(--brand-deep) 65%, transparent);
  color: var(--text-on-dark);
  font-size: 11px;
  line-height: 1.5;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  pointer-events: none;
}

/*
    Review modal (S5)

    The "Write a Review" popup: a native <dialog> holding the review Gravity
    Form (template-parts/review-modal.php). Desktop is the booking modal's
    shell — same radii, same curve — so the two popups read as one product.
    Below $screen-md it becomes the tour page's day-detail bottom sheet:
    flips up, grab handle, drag down to dismiss (js/custom.js).

    ponytail: the ~40 lines of dialog shell below deliberately repeat
    _booking-modal.scss rather than refactoring an 806-line partial a live
    payment flow depends on. Factor them out if a third modal appears.

    Brand colour comes only from var(--…) tokens.
*/
/* ---- Shell ---- */
.review-modal {
  padding: 0;
  border: 0;
  margin: auto;
  width: 92%;
  max-width: 560px;
  max-height: 90vh;
  background: transparent;
  color: var(--text-primary);
  overflow: visible;
}
.review-modal::backdrop {
  background: color-mix(in srgb, var(--brand-ink) 92%, transparent);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  opacity: 0;
  transition: opacity 0.3s ease;
}
.review-modal.is-open::backdrop {
  opacity: 1;
}

.review-modal__panel {
  position: relative;
  background: var(--surface);
  border-radius: 20px;
  box-shadow: var(--shadow-dropdown);
  max-height: 90vh;
  overflow-y: auto;
  overscroll-behavior: contain;
  opacity: 0;
  transform: translateY(20px) scale(0.97);
  transition: opacity 0.35s cubic-bezier(0.23, 1, 0.32, 1), transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}
.review-modal__panel:focus {
  outline: none;
}
.review-modal.is-open .review-modal__panel {
  opacity: 1;
  transform: translateY(0) scale(1);
}

/* Grab handle — sheet chrome, so hidden until the sheet breakpoint. */
.review-modal__grip {
  display: none;
}

/* ---- Header ---- */
.review-modal__header {
  position: sticky;
  top: 0;
  z-index: 4;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 24px 32px 8px;
  background: var(--surface);
  border-radius: 20px 20px 0 0;
}

.review-modal__title {
  margin: 0;
  font-size: 20px;
  font-weight: 700;
  color: var(--brand-deep);
}

.review-modal__close {
  position: relative;
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  padding: 0;
  border-radius: 50%;
  border: 1px solid var(--brand-border);
  background: var(--surface);
  cursor: pointer;
  transition: background 0.2s, border-color 0.2s;
}
.review-modal__close::before, .review-modal__close::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 15px;
  height: 2px;
  border-radius: 2px;
  background: var(--brand-deep);
}
.review-modal__close::before {
  transform: translate(-50%, -50%) rotate(45deg);
}
.review-modal__close::after {
  transform: translate(-50%, -50%) rotate(-45deg);
}
.review-modal__close:hover {
  background: var(--surface-tint);
  border-color: var(--brand-sky);
}

/* ---- Body ---- */
.review-modal__body {
  padding: 0 32px 32px;
}

.review-modal__intro {
  margin: 0 0 24px;
  font-size: 14px;
  line-height: 1.6;
  color: var(--text-muted);
}

/* Gravity Forms styling comes from the shared enquiry skin — .review-modal__form
   is listed alongside .enquiry-form in css/_forms.scss, so the popup inherits
   the 1.5px borders, 10px radii and gradient pill submit rather than restating
   them. Only the star widget below is specific to this form. */
/* ---- Star rating ----
   A real radio group, no JS. Gravity renders the choices 5 → 1 in DOM order and
   row-reverse lays them out 1 → 5 on screen, so "everything after the checked
   one in the DOM" is "everything to its left" — which is exactly the fill. */
.review-modal .gfield.ltt-review-stars .gfield_radio {
  display: flex;
  flex-direction: row-reverse;
  justify-content: flex-end;
  gap: 6px;
}
.review-modal .gfield.ltt-review-stars .gchoice {
  display: flex;
}
.review-modal .gfield.ltt-review-stars input[type=radio] {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: 0;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
.review-modal .gfield.ltt-review-stars label {
  display: block;
  width: 34px;
  height: 34px;
  margin: 0;
  overflow: hidden;
  text-indent: 100%;
  white-space: nowrap;
  cursor: pointer;
  background: var(--brand-border);
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14l-5-4.87 6.91-1.01L12 2z'/%3E%3C/svg%3E");
  mask-repeat: no-repeat;
  mask-position: center;
  mask-size: contain;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14l-5-4.87 6.91-1.01L12 2z'/%3E%3C/svg%3E");
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  -webkit-mask-size: contain;
  transition: background 0.12s ease, transform 0.16s cubic-bezier(0.23, 1, 0.32, 1);
}
.review-modal .gfield.ltt-review-stars label:active {
  transform: scale(0.92);
}
.review-modal .gfield.ltt-review-stars .gchoice:has(input:checked) label,
.review-modal .gfield.ltt-review-stars .gchoice:has(input:checked) ~ .gchoice label {
  background: var(--brand-sky);
}
@media (hover: hover) and (pointer: fine) {
  .review-modal .gfield.ltt-review-stars .gfield_radio:hover label {
    background: var(--brand-border);
  }
  .review-modal .gfield.ltt-review-stars .gfield_radio:hover .gchoice:hover label,
  .review-modal .gfield.ltt-review-stars .gfield_radio:hover .gchoice:hover ~ .gchoice label {
    background: var(--brand-sky);
  }
}
.review-modal .gfield.ltt-review-stars input:focus-visible + label {
  outline: 2px solid var(--brand-sky);
  outline-offset: 3px;
}

/* ---- Success ---- */
.review-modal__done {
  padding: 16px 0 8px;
  text-align: center;
  animation: reviewDoneIn 0.3s cubic-bezier(0.23, 1, 0.32, 1) both;
}
.review-modal__done h3 {
  margin: 0 0 8px;
  font-size: 22px;
  color: var(--brand-deep);
}
.review-modal__done p {
  margin: 0 auto;
  max-width: 38ch;
  font-size: 14px;
  line-height: 1.6;
  color: var(--text-muted);
}

.review-modal__check {
  width: 64px;
  height: 64px;
  margin: 0 auto 16px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, var(--brand-aqua), var(--brand-sky));
}
.review-modal__check svg {
  width: 30px;
  height: 30px;
  fill: none;
  stroke: var(--text-on-dark);
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 32;
  stroke-dashoffset: 32;
  animation: reviewCheckDraw 0.4s cubic-bezier(0.23, 1, 0.32, 1) 0.15s forwards;
}

.review-modal__done-btn {
  margin-top: 24px;
  padding: 12px 32px;
  border: 1px solid var(--brand-border);
  border-radius: 50px;
  background: var(--surface);
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 700;
  color: var(--brand-deep);
  cursor: pointer;
  transition: background 0.2s, transform 0.16s cubic-bezier(0.23, 1, 0.32, 1);
}
.review-modal__done-btn:hover {
  background: var(--surface-tint);
}
.review-modal__done-btn:active {
  transform: scale(0.97);
}

@keyframes reviewDoneIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes reviewCheckDraw {
  to {
    stroke-dashoffset: 0;
  }
}
/* ---- Sheet: below $screen-md the popup flips up like the tour page's
   day-detail card (see _ts-itinerary.scss). A portrait tablet is a thumb
   device, so it gets the sheet too. ---- */
@media (max-width: 991px) {
  .review-modal {
    position: fixed;
    inset: auto 0 0 0;
    width: 100%;
    max-width: 100%;
    max-height: none;
    margin: 0;
  }
  .review-modal__panel {
    max-height: 86dvh;
    border-radius: 20px 20px 0 0;
    opacity: 1;
    transform: translateY(100%);
    transition: transform 0.35s cubic-bezier(0.32, 0.72, 0, 1);
  }
  .review-modal.is-open .review-modal__panel {
    transform: translateY(0);
  }
  .review-modal__grip {
    display: flex;
    position: sticky;
    top: 0;
    z-index: 5;
    justify-content: center;
    padding: 10px 0 2px;
    background: var(--surface);
    border-radius: 20px 20px 0 0;
    touch-action: none;
  }
  .review-modal__handle {
    width: 42px;
    height: 4px;
    border-radius: 2px;
    background: var(--brand-border);
  }
  .review-modal__header {
    top: 16px;
    padding: 8px 24px 8px;
    border-radius: 0;
    touch-action: none;
  }
  .review-modal__body {
    padding: 0 24px 48px;
  }
}
@media (max-width: 576px) {
  .review-modal__body {
    padding: 0 16px 32px;
  }
  .review-modal__header {
    padding: 8px 16px;
  }
  .review-modal__title {
    font-size: 18px;
  }
}
@media (max-height: 480px) and (orientation: landscape) {
  .review-modal__panel {
    max-height: 92dvh;
  }
}
/* ---- Reduced motion — the drag gesture still works, the movement goes ---- */
@media (prefers-reduced-motion: reduce) {
  .review-modal__panel {
    transform: none;
    transition: opacity 0.2s ease;
  }
  .review-modal.is-open .review-modal__panel {
    transform: none;
  }
  .review-modal__done {
    animation: none;
  }
  .review-modal__check svg {
    animation: none;
    stroke-dashoffset: 0;
  }
  .review-modal .gfield.ltt-review-stars label:active,
  .review-modal__done-btn:active {
    transform: none;
  }
}
/*
    Site notice banner — the strip above the utility bar
    (template-parts/header/site-notice.php, Site Settings → Notice banner).

    Every colour is a --notice-{type}-* token (css/_tokens.scss); this file
    only maps the active type onto three local properties, so a new type is
    one modifier block here plus its token trio.

    Closing collapses the strip's height rather than removing it in one
    frame, so the page below slides up instead of jumping (js/custom.js).
*/
.site-notice {
  --n-bg: var(--notice-info-bg);
  --n-fg: var(--notice-info-fg);
  --n-accent: var(--notice-info-accent);
  display: grid;
  grid-template-rows: 1fr;
  background: var(--n-bg);
  color: var(--n-fg);
  transition: grid-template-rows 0.36s cubic-bezier(0.23, 1, 0.32, 1), opacity 0.24s cubic-bezier(0.23, 1, 0.32, 1);
}
.site-notice[hidden] {
  display: none;
}
.site-notice.is-closing {
  grid-template-rows: 0fr;
  opacity: 0;
}
@media (prefers-reduced-motion: reduce) {
  .site-notice {
    transition: none;
  }
}
.site-notice ::selection {
  background: var(--n-fg);
  color: var(--n-bg);
}

.site-notice--alert {
  --n-bg: var(--notice-alert-bg);
  --n-fg: var(--notice-alert-fg);
  --n-accent: var(--notice-alert-accent);
}

.site-notice--sale {
  --n-bg: var(--notice-sale-bg);
  --n-fg: var(--notice-sale-fg);
  --n-accent: var(--notice-sale-accent);
}

.site-notice--offer {
  --n-bg: var(--notice-offer-bg);
  --n-fg: var(--notice-offer-fg);
  --n-accent: var(--notice-offer-accent);
}

.site-notice--closure {
  --n-bg: var(--notice-closure-bg);
  --n-fg: var(--notice-closure-fg);
  --n-accent: var(--notice-closure-accent);
}

.site-notice__clip {
  min-height: 0;
  overflow: hidden;
}

.site-notice__inner {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding-top: 10px;
  padding-bottom: 10px;
}

.site-notice__icon {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  fill: none;
  stroke: var(--n-accent);
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.site-notice__text {
  margin: 0;
  font-size: 14px;
  line-height: 1.45;
  font-weight: 600;
  text-wrap: balance;
}

.site-notice__message {
  margin-right: 0.6em;
}

.site-notice__link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: inherit;
  font-weight: 700;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  white-space: nowrap;
  transition: text-decoration-thickness 0.2s cubic-bezier(0.23, 1, 0.32, 1);
}
.site-notice__link svg {
  width: 14px;
  height: 14px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform 0.2s cubic-bezier(0.23, 1, 0.32, 1);
}
.site-notice__link:hover {
  color: inherit;
  text-decoration-thickness: 2px;
}
.site-notice__link:hover svg {
  transform: translateX(3px);
}
.site-notice__link:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 3px;
  border-radius: 2px;
}

.site-notice__close {
  position: absolute;
  top: 50%;
  right: 12px;
  translate: 0 -50%;
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: inherit;
  cursor: pointer;
  transition: background-color 0.2s cubic-bezier(0.23, 1, 0.32, 1);
}
.site-notice__close svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
}
.site-notice__close:hover {
  background: color-mix(in srgb, currentColor 12%, transparent);
}
.site-notice__close:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 1px;
}

.site-notice__inner:has(.site-notice__close) {
  padding-left: 48px;
  padding-right: 48px;
}

@media (max-width: 768px) {
  .site-notice__inner {
    justify-content: flex-start;
    align-items: flex-start;
  }
  .site-notice__inner:has(.site-notice__close) {
    padding-left: calc(var(--bs-gutter-x, 1.5rem) * 0.5);
    padding-right: 44px;
  }
  .site-notice__icon {
    margin-top: 1px;
  }
  .site-notice__text {
    text-wrap: pretty;
  }
  .site-notice__close {
    top: 6px;
    right: 4px;
    translate: none;
  }
}
/*
    Component · Tour Card — faithful port of the PD wireframe `.pd-card`
    (shared.css). One presentation card reused by the Tour Collection grid +
    slider and, in S4, the archive + related surfaces. Structural values match
    the wireframe 1:1; brand colours are mapped to tokens (CI: lint-tokens) so
    Pure Discoveries renders identically and every brand repaints for free.
*/
/* ---- Island / pace badges ---- */
.badge {
  padding: 5px 12px;
  border-radius: 4px;
  font-size: 14px;
  font-weight: 600;
  display: inline-block;
}

.badge-north {
  background: color-mix(in srgb, var(--tour-north) 88%, transparent);
  color: var(--tour-north-ink);
}

.badge-south {
  background: color-mix(in srgb, var(--tour-south) 88%, transparent);
  color: var(--tour-south-ink);
}

.badge-both {
  background: color-mix(in srgb, var(--tour-both) 88%, transparent);
  color: var(--tour-both-ink);
}

/* ---- Calendar (duration) badge ---- */
.cal-badge {
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 5;
  background: var(--surface);
  border-radius: 10px;
  width: 58px;
  text-align: center;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.2);
  overflow: hidden;
}
.cal-badge .num {
  display: block;
  font-size: 28px;
  font-weight: 800;
  color: var(--brand-deep);
  padding: 8px 0 3px;
  line-height: 1;
}
.cal-badge .label {
  display: block;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1.2px;
  color: #fff;
  background: var(--brand-deep);
  padding: 4px 0 5px;
}

/* ---- The card ---- */
.pd-card {
  flex: 0 0 400px;
  scroll-snap-align: start;
  border-radius: 14px;
  overflow: hidden;
  background: var(--surface);
  border: 1px solid var(--brand-border);
  transition: box-shadow 0.2s;
  /* Skip rendering off-screen cards entirely — their 4 full-bleed hero slide
     layers are the main GPU cost, and a slider/grid only shows a few at once.
     intrinsic-size reserves the box so scroll position + snap stay stable;
     `auto` lets the browser remember each card's real size once painted. */
  content-visibility: auto;
  contain-intrinsic-size: auto 400px auto 706px;
  /* Column so the CTA row can pin to the bottom: cards in a row stretch to
     the tallest, and a shorter tagline or tidbit used to lift one card's
     buttons above its neighbours'. */
  display: flex;
  flex-direction: column;
}
.pd-card:hover {
  box-shadow: 0 8px 30px color-mix(in srgb, var(--brand-deep) 12%, transparent);
}

/* Hero image slider */
.card-hero-slider {
  position: relative;
  height: 260px;
  overflow: hidden;
}
.card-hero-slider .slides {
  position: relative;
  height: 100%;
}
.card-hero-slider .slide {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  opacity: 0;
  transition: opacity 1.5s ease-in-out;
  /* Only the active slide (and, mid-crossfade, the outgoing/incoming pair
     flagged .slide-render by the JS) is rasterised. The rest stay laid out
     but unpainted — 8 full-bleed cover layers instead of 32, which is what
     was choking paint at 2x DPI and delaying hover/tooltip response. */
}
.card-hero-slider .slide.slide-active {
  opacity: 1;
}
.card-hero-slider .slide:not(.slide-active):not(.slide-render) {
  content-visibility: hidden;
}
.card-hero-slider .slide::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 65%;
  background: linear-gradient(to top, color-mix(in srgb, var(--brand-deep) 70%, transparent), transparent);
}
.card-hero-slider .hero-overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 20px 22px;
  z-index: 5;
  pointer-events: none;
}
.card-hero-slider .hero-overlay h3 {
  font-size: 28px;
  font-weight: 400;
  color: #fff;
  margin-bottom: 3px;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
  font-family: var(--font-body);
}
.card-hero-slider .hero-overlay .tree-meaning {
  font-size: 15px;
  color: rgba(255, 255, 255, 0.7);
  font-style: italic;
  font-family: var(--font-body);
}

/* Island badge — top left (the duration badge holds top right). */
.card-hero-slider .hero-badges {
  position: absolute;
  top: 14px;
  left: 14px;
  z-index: 5;
  display: flex;
  gap: 6px;
}

/* Hero slider dots */
.hero-dots {
  position: absolute;
  bottom: 12px;
  right: 22px;
  z-index: 5;
  display: flex;
  gap: 5px;
}
.hero-dots .dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.4);
  cursor: pointer;
  transition: background 0.2s;
}
.hero-dots .dot.active {
  background: #fff;
}

/* Hero slider arrows. Above the title overlay (z 5), which comes later in the
   DOM and covered the lower half of the arrow on tours whose name and meaning
   run to several lines (client, 9 Oct 2026). */
.hero-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 6;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.35);
  backdrop-filter: blur(4px);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 16px;
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.25s;
  /* 44px hit area around the 32px button. */
}
.hero-arrow::before {
  content: "";
  position: absolute;
  inset: -6px;
  border-radius: 50%;
}
.hero-arrow.left {
  left: 10px;
}
.hero-arrow.right {
  right: 10px;
}
.hero-arrow:hover {
  background: rgba(255, 255, 255, 0.6);
}

/* The arrows are invisible until the card is hovered, so only apply the
   (expensive) backdrop blur then — otherwise 16 idle blur layers repaint on
   every scroll frame and tank the framerate. */
.card-hero-slider:hover .hero-arrow {
  opacity: 1;
  backdrop-filter: blur(4px);
}

/* Card body */
.pd-card .card-body {
  padding: 22px;
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
}

.pd-card .tagline {
  font-size: 18px;
  color: color-mix(in srgb, var(--brand-deep) 55%, var(--text-muted));
  line-height: 1.65;
  margin-bottom: 20px;
  font-family: var(--font-body);
  /* Clamp to 3 lines so one long tagline (e.g. Mt Cook Lily) can't bloat the
     whole equal-height card row with empty space. Full copy is on the tour. */
  display: -webkit-box;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Highlight thumbnail strip */
.hl-strip-wrap {
  position: relative;
  margin-bottom: 8px;
  overflow: visible;
  /* Fade edge on the right of the strip. */
}
.hl-strip-wrap::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 40px;
  height: 62px;
  background: linear-gradient(to right, transparent, var(--surface));
  pointer-events: none;
  z-index: 2;
}

.hl-strip {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  scrollbar-width: none;
  padding-bottom: 32px;
  margin-bottom: -28px;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  cursor: grab;
}
.hl-strip:active {
  cursor: grabbing;
}
.hl-strip::-webkit-scrollbar {
  display: none;
}

.hl-thumb {
  flex: 0 0 88px;
  height: 62px;
  border-radius: 6px;
  background-size: cover;
  background-position: center;
  border: 1px solid var(--brand-border);
  cursor: pointer;
  position: relative;
  transition: transform 0.15s, box-shadow 0.15s;
}
.hl-thumb:hover {
  transform: translateY(-2px);
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.12);
}
.hl-thumb .tip {
  position: absolute;
  bottom: -28px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(0, 0, 0, 0.8);
  color: #fff;
  padding: 3px 10px;
  border-radius: 4px;
  font-size: 11px;
  white-space: nowrap;
  opacity: 0;
  /* Only the fade-OUT is animated. Appearance is instant (see :hover) so a
     busy GPU can't queue the show behind other compositor work — a fade-in
     transition is compositor-driven and is what made the tip feel laggy. */
  transition: opacity 0.2s;
  pointer-events: none;
  z-index: 10;
}
.hl-thumb:hover .tip {
  opacity: 1;
  transition: none;
}

.hl-see-more {
  flex: 0 0 72px;
  height: 62px;
  border-radius: 6px;
  background: color-mix(in srgb, var(--brand-sky) 8%, transparent);
  border: 1px dashed color-mix(in srgb, var(--brand-border) 60%, var(--surface));
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.2s;
  gap: 2px;
}
.hl-see-more:hover {
  background: color-mix(in srgb, var(--brand-sky) 14%, transparent);
}
.hl-see-more .plus {
  font-size: 18px;
  color: var(--brand-sky-text);
  font-weight: 300;
  line-height: 1;
}
.hl-see-more .label {
  font-size: 11px;
  color: var(--brand-sky-text);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  font-weight: 600;
}

.hl-strip-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 6px;
  margin-bottom: 16px;
}

/* Route map chip: a thumbnail of the map itself, so it reads as "the route"
   before the label is read. Opens the shared route map dialog. */
.route-map-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
  padding: 4px 14px 4px 4px;
  border: 1px solid color-mix(in srgb, var(--brand-border) 70%, var(--surface));
  border-radius: 50px;
  background: var(--surface);
  color: var(--brand-deep);
  font: 600 13px/1 var(--font-body);
  letter-spacing: 0.2px;
  cursor: pointer;
  white-space: nowrap;
  transition: border-color 0.2s, box-shadow 0.2s, transform 0.16s cubic-bezier(0.23, 1, 0.32, 1);
}
.route-map-btn svg {
  width: 15px;
  height: 15px;
  flex-shrink: 0;
}
.route-map-btn .route-map-thumb + svg {
  display: none;
}
.route-map-btn:hover {
  border-color: var(--brand-sky);
  box-shadow: 0 3px 12px color-mix(in srgb, var(--brand-deep) 14%, transparent);
}
.route-map-btn:hover .route-map-thumb {
  transform: scale(1.08);
}
.route-map-btn:active {
  transform: scale(0.97);
}
.route-map-btn:focus-visible {
  outline: 2px solid var(--brand-sky);
  outline-offset: 2px;
}

.route-map-thumb {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background-color: var(--surface-tint);
  background-size: 150%;
  background-position: 55% 40%;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--brand-border) 80%, transparent);
  transition: transform 0.3s cubic-bezier(0.23, 1, 0.32, 1);
}

/* Route map dialog: one per page, filled and stepped by js/custom.js. */
.route-map-dialog {
  margin: auto;
  width: min(560px, 100vw - 32px);
  max-height: calc(100dvh - 32px);
  padding: 0;
  border: 0;
  border-radius: 18px;
  background: var(--surface);
  color: var(--text-primary);
  box-shadow: 0 30px 80px color-mix(in srgb, var(--brand-ink) 35%, transparent);
  overflow: hidden;
}
.route-map-dialog::backdrop {
  background: var(--search-backdrop);
  backdrop-filter: blur(3px);
}
.route-map-dialog[open] {
  animation: rmdIn 0.32s cubic-bezier(0.23, 1, 0.32, 1);
}

@keyframes rmdIn {
  from {
    opacity: 0;
    transform: translateY(10px) scale(0.98);
  }
}
.rmd-panel {
  display: flex;
  flex-direction: column;
  max-height: calc(100dvh - 32px);
}

/* Grab handle: sheet chrome, hidden until the sheet breakpoint. */
.rmd-grip {
  display: none;
}

.rmd-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 20px 20px 4px 24px;
}

.rmd-title {
  margin: 0;
  font: 400 26px/1.15 var(--font-display);
  color: var(--brand-deep);
  text-wrap: balance;
}

.rmd-meta {
  margin: 4px 0 0;
  font-size: 13px;
  color: var(--text-muted);
}

.rmd-close {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 1px solid color-mix(in srgb, var(--brand-border) 70%, var(--surface));
  border-radius: 50%;
  background: var(--surface);
  color: var(--brand-deep);
  cursor: pointer;
  transition: border-color 0.2s, background 0.2s;
}
.rmd-close svg {
  width: 18px;
  height: 18px;
}
.rmd-close:hover {
  border-color: var(--brand-sky);
  background: var(--surface-tint);
}

.rmd-figure {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  margin: 0;
  padding: 8px 56px;
  display: flex;
  justify-content: center;
}

.rmd-img {
  display: block;
  width: auto;
  max-width: 100%;
  height: auto;
  max-height: min(62dvh, 560px);
  object-fit: contain;
  transition: opacity 0.22s ease-out;
}
.rmd-img.is-swapping {
  opacity: 0;
}

.rmd-step {
  position: absolute;
  top: 50%;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: color-mix(in srgb, var(--brand-deep) 8%, var(--surface));
  color: var(--brand-deep);
  cursor: pointer;
  transform: translateY(-50%);
  transition: background 0.2s, color 0.2s;
}
.rmd-step svg {
  width: 20px;
  height: 20px;
}
.rmd-step:hover {
  background: var(--brand-deep);
  color: var(--text-on-dark);
}
.rmd-step[hidden] {
  display: none;
}

.rmd-prev {
  left: 10px;
}

.rmd-next {
  right: 10px;
}
.rmd-next svg {
  transform: scaleX(-1);
}

.rmd-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 12px 20px 20px 24px;
  border-top: 1px solid color-mix(in srgb, var(--brand-border) 45%, var(--surface));
}

.rmd-count {
  font-size: 13px;
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}

.route-map-dialog .rmd-view {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 12px 26px;
  background: var(--gradient-button);
  background-origin: border-box;
  color: var(--gradient-button-fg);
  border: 1px solid color-mix(in srgb, #fff 15%, transparent);
  border-radius: 50px;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 1px;
  text-transform: uppercase;
  text-decoration: none;
  box-shadow: 0 2px 10px color-mix(in srgb, var(--brand-deep) 20%, transparent);
  transition: box-shadow 0.3s, transform 0.16s cubic-bezier(0.23, 1, 0.32, 1);
}
.route-map-dialog .rmd-view:hover {
  color: var(--gradient-button-fg);
  box-shadow: 0 4px 16px color-mix(in srgb, var(--brand-deep) 30%, transparent);
  transform: translateY(-1px);
}

/* Sheet: below 992px the dialog flips up from the bottom like the callback
   popup (_callback-modal.scss), grab handle and drag-to-dismiss included. */
@media (max-width: 991.98px) {
  .route-map-dialog {
    position: fixed;
    inset: auto 0 0 0;
    width: 100%;
    max-width: 100%;
    max-height: none;
    margin: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    overflow: visible;
  }
  .route-map-dialog[open] {
    animation: none;
  }
  .route-map-dialog::backdrop {
    opacity: 0;
    transition: opacity 0.3s ease;
  }
  .route-map-dialog.is-open::backdrop {
    opacity: 1;
  }
  .rmd-panel {
    max-height: 92dvh;
    background: var(--surface);
    border-radius: 20px 20px 0 0;
    box-shadow: var(--shadow-dropdown);
    transform: translateY(100%);
    transition: transform 0.35s cubic-bezier(0.32, 0.72, 0, 1);
  }
  .route-map-dialog.is-open .rmd-panel {
    transform: translateY(0);
  }
  .rmd-grip {
    display: flex;
    justify-content: center;
    padding: 10px 0 2px;
    touch-action: none;
  }
  .rmd-grip span {
    width: 42px;
    height: 4px;
    border-radius: 2px;
    background: color-mix(in srgb, var(--brand-border) 85%, var(--text-muted));
  }
  .rmd-head {
    padding: 6px 16px 2px 20px;
    touch-action: none;
  }
  .rmd-title {
    font-size: 23px;
  }
  .rmd-figure {
    padding: 4px 44px 8px;
  }
  .rmd-img {
    max-height: 56dvh;
  }
  .rmd-step {
    width: 34px;
    height: 34px;
  }
  .rmd-prev {
    left: 6px;
  }
  .rmd-next {
    right: 6px;
  }
  .rmd-foot {
    padding: 12px 16px calc(16px + env(safe-area-inset-bottom)) 20px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .route-map-dialog[open] {
    animation: none;
  }
  .rmd-panel {
    transition: none;
  }
  .rmd-img,
  .route-map-thumb {
    transition: none;
  }
}
.hl-strip-label {
  font-size: 13px;
  color: var(--text-subtle);
}

/* Tidbit */
.pd-card .tidbit {
  border-top: 1px solid color-mix(in srgb, var(--brand-border) 45%, var(--surface));
  padding-top: 16px;
  margin-bottom: 18px;
  font-size: 17px;
  color: color-mix(in srgb, var(--brand-deep) 55%, var(--text-muted));
  font-style: italic;
  line-height: 1.5;
}
.pd-card .tidbit strong {
  color: var(--brand-deep);
  font-style: normal;
}

/* CTA row */
.pd-card .card-actions {
  margin-top: auto;
  display: flex;
  gap: 10px;
  align-items: stretch;
  text-align: center;
  /* Each label stays on one line. When the pair no longer fits side by side
     (narrow 3-up cards around 1024-1300px) they stack full width, instead of
     one button wrapping to two lines beside a one-line neighbour. */
  flex-wrap: wrap;
}
.pd-card .card-actions .view-btn,
.pd-card .card-actions .callback-btn {
  flex: 1 1 0;
  min-width: max-content;
  white-space: nowrap;
}

.pd-card .view-btn {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 13px 10px;
  background: var(--gradient-button);
  background-origin: border-box;
  color: var(--gradient-button-fg);
  border-radius: 50px;
  font-size: 14px;
  font-weight: 800;
  cursor: pointer;
  transition: box-shadow 0.3s, transform 0.16s cubic-bezier(0.23, 1, 0.32, 1);
  letter-spacing: 1px;
  text-transform: uppercase;
  text-decoration: none;
  box-shadow: 0 2px 10px color-mix(in srgb, var(--brand-deep) 20%, transparent), inset 0 1px 0 color-mix(in srgb, var(--brand-glass) 30%, transparent);
  border: 1px solid rgba(255, 255, 255, 0.15);
}
.pd-card .view-btn:hover {
  color: var(--gradient-button-fg);
  box-shadow: 0 4px 16px color-mix(in srgb, var(--brand-deep) 30%, transparent);
  transform: translateY(-1px);
}
.pd-card .view-btn:active {
  transform: scale(0.97);
}

.pd-card .callback-btn {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 13px 10px;
  border: 1.5px solid color-mix(in srgb, var(--brand-border) 60%, var(--surface));
  color: var(--brand-deep);
  background: var(--surface);
  border-radius: 50px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.2s, border-color 0.2s, transform 0.16s cubic-bezier(0.23, 1, 0.32, 1);
  letter-spacing: 1px;
  text-transform: uppercase;
  text-decoration: none;
}
.pd-card .callback-btn:hover {
  background: var(--surface-tint);
  border-color: var(--brand-sky);
}
.pd-card .callback-btn:active {
  transform: scale(0.97);
}

/* ---- Mobile (faithful port of the wireframe card overrides) ---- */
@media (max-width: 768px) {
  .card-hero-slider {
    height: 240px;
    /* arrows can't be hovered on touch — keep them visible */
  }
  .card-hero-slider .hero-overlay h3 {
    font-size: 24px;
  }
  .card-hero-slider .hero-overlay .tree-meaning {
    font-size: 13px;
  }
  .card-hero-slider .hero-arrow {
    opacity: 1;
  }
  .pd-card {
    /* full-width stacked CTAs on mobile */
  }
  .pd-card .card-body {
    padding: 20px;
  }
  .pd-card .tagline {
    font-size: 16px;
  }
  .pd-card .card-actions {
    flex-direction: column;
    gap: 8px;
  }
  .pd-card .view-btn,
  .pd-card .callback-btn {
    min-height: 48px;
    font-size: 14px;
    padding: 13px 16px;
  }
  .hl-thumb {
    flex: 0 0 76px;
    height: 54px;
  }
  .hl-see-more {
    flex: 0 0 64px;
    height: 54px;
  }
}
@media (max-width: 480px) {
  .card-hero-slider {
    height: 220px;
  }
  .card-hero-slider .hero-overlay h3 {
    font-size: 22px;
  }
  .pd-card .card-body {
    padding: 16px;
  }
  .pd-card .tagline {
    font-size: 15px;
  }
  .pd-card .tidbit {
    font-size: 15px;
  }
  .pd-card .view-btn,
  .pd-card .callback-btn {
    min-height: 48px;
    font-size: 13px;
    padding: 12px 12px;
  }
  .hl-thumb {
    flex: 0 0 68px;
    height: 48px;
  }
  .hl-see-more {
    flex: 0 0 56px;
    height: 48px;
  }
  .hl-see-more .plus {
    font-size: 16px;
  }
  .hl-see-more .label {
    font-size: 10px;
  }
}
/* Touch devices: drop the hover lift, give a press response instead. */
@media (hover: none) {
  .pd-card:hover {
    transform: none;
    box-shadow: 0 8px 30px color-mix(in srgb, var(--brand-deep) 12%, transparent);
  }
  .pd-card:active {
    transform: scale(0.98);
    box-shadow: 0 4px 16px color-mix(in srgb, var(--brand-deep) 15%, transparent);
    transition-duration: 0.1s;
  }
  .hl-thumb:hover {
    transform: none;
  }
  .card-hero-slider .hero-arrow {
    opacity: 1;
  }
  /* hover tooltips don't make sense without a pointer */
  .hl-thumb .tip {
    display: none;
  }
}
/*
    Utility pages — the 404 hero and the password-protected panel.

    templates/404.php, templates/protected.php and the_password_form
    (functions/utility.php). The 404 borrows the search page's pill input
    (.search-hero-input-wrap) so the two search boxes are the same object.
    Every colour is a token; alpha goes through color-mix() on the neutrals.

    Contents
        1. 404 hero
        2. "Were you looking for" + places to start
        3. Password-protected panel + form
*/
/* ==========================================================================
   1. 404 HERO
   ========================================================================== */
.utility-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: var(--brand-deep);
  color: var(--text-on-dark);
  text-align: center;
  padding: 120px 0 104px;
}
@media (max-width: 768px) {
  .utility-hero {
    padding: 72px 0 64px;
  }
}

.utility-hero__media {
  position: absolute;
  inset: 0;
  z-index: -1;
  background-size: cover;
  background-position: center;
  transform: scale(1.04);
  animation: utility-hero-settle 1.6s cubic-bezier(0.23, 1, 0.32, 1) both;
  /* The same brand scrim as the page heroes, weighted to the middle where
     the centred copy and search box sit. */
}
.utility-hero__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 70% 60% at 50% 50%, color-mix(in srgb, var(--brand-ink) 55%, transparent), transparent 100%), linear-gradient(180deg, color-mix(in srgb, var(--brand-deep) 30%, transparent) 0%, color-mix(in srgb, var(--brand-deep) 50%, transparent) 50%, color-mix(in srgb, var(--brand-deep) 85%, transparent) 100%);
}

@keyframes utility-hero-settle {
  from {
    transform: scale(1.1);
    filter: blur(6px);
  }
  to {
    transform: scale(1.04);
    filter: blur(0);
  }
}
@media (prefers-reduced-motion: reduce) {
  .utility-hero__media {
    animation: none;
  }
}
.utility-hero__inner {
  max-width: 760px;
}

.utility-hero__title {
  margin: 0 auto 16px;
  font-family: var(--font-body);
  font-size: clamp(2.25rem, 4.6vw, 3.5rem);
  line-height: 1.12;
  letter-spacing: -0.02em;
  font-weight: 700;
  color: var(--text-on-dark);
  text-wrap: balance;
  text-shadow: 0 2px 20px color-mix(in srgb, #000 15%, transparent);
}

.utility-hero__lede {
  max-width: 34em;
  margin: 0 auto 36px;
  font-size: 18px;
  line-height: 1.6;
  color: var(--text-on-dark-muted);
  text-wrap: pretty;
}
@media (max-width: 768px) {
  .utility-hero__lede {
    font-size: 16px;
    margin-bottom: 28px;
  }
}

/* The search page's pill, plus a visible submit so the box reads as a form
   without JavaScript or a keyboard hint. */
.utility-hero__search {
  margin-bottom: 0;
  /* With the button stacked under the field on phones, centre the glass on
     the field (52px tall) rather than on the whole form. */
}
@media (max-width: 480px) {
  .utility-hero .utility-hero__search > svg {
    top: 28px;
  }
}
.utility-hero__search .search-hero-input {
  padding-right: 128px;
  box-shadow: 0 12px 40px color-mix(in srgb, #000 22%, transparent);
}
@media (max-width: 480px) {
  .utility-hero__search .search-hero-input {
    padding-right: 20px;
  }
}

.utility-hero__submit {
  position: absolute;
  top: 7px;
  right: 7px;
  bottom: 7px;
  padding: 0 26px;
  border-radius: 999px;
  background: var(--brand-deep);
  color: var(--text-on-dark);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: none;
  transition: all 0.2s ease-in-out;
  /* Phones: the icon and Enter carry it; the field keeps its full width. */
}
.utility-hero__submit:hover {
  background: var(--brand-ink);
}
.utility-hero__submit:focus-visible {
  outline: 2px solid var(--brand-sky);
  outline-offset: 2px;
}
@media (max-width: 480px) {
  .utility-hero__submit {
    position: static;
    width: 100%;
    margin-top: 12px;
    padding: 14px 24px;
    min-height: 48px;
    background: transparent;
    border: 1.5px solid color-mix(in srgb, #fff 55%, transparent);
    color: var(--text-on-dark);
  }
  .utility-hero__submit:hover {
    background: color-mix(in srgb, #fff 12%, transparent);
  }
}

/* ==========================================================================
   2. "WERE YOU LOOKING FOR" + PLACES TO START
   ========================================================================== */
.utility-hero__guess {
  margin-top: 36px;
}

.utility-hero__guess-title {
  margin: 0 0 14px;
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: 600;
  color: var(--text-on-dark);
}

/* A short stack, not a pill row: matches can be a two-word tour or a
   full-sentence FAQ, and a stack keeps both legible. */
.utility-guess {
  list-style: none;
  margin: 0 auto;
  padding: 0;
  max-width: 560px;
  display: grid;
  gap: 8px;
}

.utility-guess__link {
  display: flex;
  align-items: baseline;
  gap: 12px;
  padding: 12px 18px;
  border-radius: 12px;
  border: 1px solid color-mix(in srgb, #fff 22%, transparent);
  background: color-mix(in srgb, #fff 10%, transparent);
  backdrop-filter: blur(8px);
  color: var(--text-on-dark);
  text-decoration: none;
  text-align: left;
  transition: all 0.2s ease-in-out;
}
.utility-guess__link svg {
  align-self: center;
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform 0.25s cubic-bezier(0.23, 1, 0.32, 1);
}
.utility-guess__link:hover, .utility-guess__link:focus-visible {
  color: var(--text-on-dark);
  background: color-mix(in srgb, #fff 18%, transparent);
  border-color: color-mix(in srgb, #fff 40%, transparent);
}
.utility-guess__link:hover svg, .utility-guess__link:focus-visible svg {
  transform: translateX(3px);
}
.utility-guess__link:focus-visible {
  outline: 2px solid var(--brand-sky);
  outline-offset: 2px;
}

.utility-guess__name {
  flex: 1;
  font-weight: 600;
  text-wrap: pretty;
}

.utility-guess__type {
  flex-shrink: 0;
  font-size: 14px;
  color: var(--text-on-dark-muted);
}

.utility-routes {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin-top: 36px;
  padding-top: 28px;
  border-top: 1px solid color-mix(in srgb, #fff 18%, transparent);
}

/* The on-dark twin of the search page's .no-results-suggestions pills: the
   same four ways out, the same shape. */
.utility-routes__link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 10px 20px;
  border-radius: 999px;
  border: 1.5px solid color-mix(in srgb, #fff 30%, transparent);
  background: color-mix(in srgb, #fff 10%, transparent);
  font-size: 14px;
  font-weight: 600;
  color: var(--text-on-dark);
  text-decoration: none;
  transition: all 0.2s ease-in-out;
}
.utility-routes__link:hover, .utility-routes__link:focus-visible {
  color: var(--text-on-dark);
  background: color-mix(in srgb, #fff 18%, transparent);
  border-color: color-mix(in srgb, #fff 55%, transparent);
}
.utility-routes__link:focus-visible {
  outline: 2px solid var(--brand-sky);
  outline-offset: 2px;
}

/* ==========================================================================
   3. PASSWORD-PROTECTED PANEL + FORM
   ========================================================================== */
.utility-lock {
  background: var(--surface-tint);
  padding: 104px 0 120px;
}
@media (max-width: 768px) {
  .utility-lock {
    padding: 48px 0 64px;
  }
}

.utility-lock__panel {
  max-width: 540px;
  margin: 0 auto;
  padding: 52px 48px 44px;
  background: var(--surface);
  border: 1px solid var(--brand-border);
  border-radius: 16px;
  box-shadow: 0 18px 48px color-mix(in srgb, var(--brand-ink) 8%, transparent);
  text-align: center;
}
@media (max-width: 768px) {
  .utility-lock__panel {
    padding: 36px 22px 30px;
  }
}

.utility-lock__icon {
  width: 64px;
  height: 64px;
  margin: 0 auto 24px;
  padding: 18px;
  border-radius: 50%;
  background: var(--surface-tint);
  fill: none;
  stroke: var(--brand-deep);
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.utility-lock__title {
  margin: 0 0 10px;
  font-family: var(--font-body);
  font-size: clamp(1.625rem, 3vw, 2.125rem);
  line-height: 1.2;
  letter-spacing: -0.01em;
  font-weight: 700;
  color: var(--brand-deep);
  text-wrap: balance;
}

.utility-lock__lede {
  margin: 0 auto 32px;
  max-width: 30em;
  color: var(--text-muted);
  text-wrap: pretty;
}

.utility-lock__help {
  margin: 28px 0 0;
  padding-top: 22px;
  border-top: 1px solid var(--brand-border);
  font-size: 14px;
  color: var(--text-muted);
}
.utility-lock__help a {
  color: var(--brand-deep);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* The form also renders inside a post's content (the_content), so it carries
   its own layout rather than relying on the panel. */
.ltt-password-form {
  max-width: 440px;
  margin: 0 auto;
  text-align: left;
}

.ltt-password-form__label {
  display: block;
  margin-bottom: 8px;
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary);
}

.ltt-password-form__row {
  display: flex;
  gap: 10px;
}
@media (max-width: 480px) {
  .ltt-password-form__row {
    flex-direction: column;
  }
}

.ltt-password-form__input {
  flex: 1 1 auto;
  min-width: 0;
  height: 52px;
  padding: 0 20px;
  /* --text-muted, not the hairline --brand-border: a field edge needs 3:1. */
  border: 1.5px solid var(--text-muted);
  border-radius: 999px;
  background: var(--surface);
  font-family: var(--font-body);
  font-size: 16px;
  color: var(--text-primary);
  outline: none;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.ltt-password-form__input:focus {
  border-color: var(--brand-sky);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand-sky) 25%, transparent);
}
.ltt-password-form__input[aria-invalid=true] {
  border-color: #dc3545;
}

/* A content-width pill only ever shows the gradient's light stop behind its
   label, so it takes the dark ink (see --gradient-button-fg in _tokens.scss). */
.ltt-password-form__submit.btn-primary {
  height: 52px;
  padding: 0 30px;
  color: var(--brand-ink);
}
.ltt-password-form__submit.btn-primary:hover {
  color: var(--brand-ink);
}
@media (max-width: 480px) {
  .ltt-password-form__submit.btn-primary {
    width: 100%;
  }
}

.ltt-password-form__error {
  margin: 10px 0 0;
  font-size: 14px;
  color: #dc3545;
}

/*
    Sections Manifest

    Import ACF Flexible Content section styles here (alphabetical order).
    Each section corresponds to a layout in the Sections field group.

    Creating a new section:
        1. Create css/sections/_my-section.scss
        2. Add @use 'my-section'; below
        3. PHP template: template-parts/sections/s-my-section.php

    Section structure:
        .section-my-section {
            padding: $section-spacing-y 0;

            .title { }
            .content { }
        }
*/
/*
    Section surfaces — the editor-selectable background system.

    Every flexible-content section renders a `.section.section--bg-{option}`
    wrapper. The chosen option sets the band BACKGROUND plus a contrast-safe set
    of context tokens (--sec-*) that the section's components consume instead of
    their own hard-coded colours. So any block on any background stays legible.

    Four options (label for primary/secondary is relabelled per brand in PHP):
        white      — pure surface, light scheme (dark text)
        offwhite   — brand-tinted off-white, light scheme
        primary    — brand primary band, dark scheme (light text)
        secondary  — solid brand accent band, dark text by default; a brand whose
                     accent is itself dark overrides the --sec-* set in brands/*.css

    Context tokens every section component reads:
        --sec-bg          the band background colour (also used for icon inversion)
        --sec-fg          headings / strong text
        --sec-fg-muted    secondary text, captions, meta
        --sec-accent      decorative accent (stars, dividers, icon highlight)
        --sec-link        link text
        --sec-link-hover  link hover
        --sec-border      hairlines
        --sec-tint        soft fill (icon backings, hover washes)
        --sec-wash        very faint wash (oversized watermarks)
*/
.section {
  position: relative;
  padding: 80px 0;
  background: var(--sec-bg);
}
@media (max-width: 768px) {
  .section {
    padding: 56px 0;
  }
}
@media (max-width: 480px) {
  .section {
    padding: 48px 0;
  }
}

/* ---- Light scheme: white + brand-tinted off-white ---- */
.section--bg-white,
.section--bg-offwhite {
  --sec-fg: var(--text-primary);
  --sec-fg-muted: var(--text-muted);
  /* On a light band the bright brand accent (lime/sky) is near-invisible, so
     decorative accents use the dark brand colour to stay legible. */
  --sec-accent: var(--brand-deep);
  --sec-link: var(--brand-deep);
  --sec-link-hover: var(--brand-deep-hover);
  --sec-border: var(--brand-border);
  --sec-tint: color-mix(in srgb, var(--brand-sky) 14%, var(--surface));
  --sec-wash: color-mix(in srgb, var(--brand-deep) 5%, transparent);
  /* Secondary-action outline. A solid --brand-deep border made the outline
     button compete with the gradient primary sitting next to it; the
     wireframe uses a pale accent-tinted line instead. Derived from the
     brand accent so all five brands get a sensible value from one rule.
     Dark bands deliberately have no value here and fall back to --sec-link,
     which is the light accent there and needs the contrast. */
  --sec-btn-border: color-mix(in srgb, var(--brand-sky) 42%, var(--surface));
}

.section--bg-white {
  --sec-bg: var(--surface);
}

.section--bg-offwhite {
  --sec-bg: var(--surface-tint);
}

/* The lead/CTA band takes the deeper of the two light washes, so it separates
   from an ordinary off-white section sitting directly above or below it. The
   wireframe does this by giving .lead-capture its own deeper tint against the
   paler wash used elsewhere; keying off :has() means editors still just pick
   "off-white" and the distinction happens for them. */
.section--bg-offwhite.lead-capture,
.section--bg-offwhite:has(.lead-capture) {
  --sec-bg: var(--surface-tint-deep);
}

/* ---- Dark scheme: brand primary band ---- */
.section--bg-primary {
  --sec-bg: var(--brand-deep);
  --sec-fg: var(--text-on-dark);
  --sec-fg-muted: var(--text-on-dark-muted);
  --sec-accent: var(--brand-sky);
  --sec-link: var(--brand-sky);
  --sec-link-hover: var(--brand-glass);
  --sec-border: color-mix(in srgb, var(--brand-sky) 22%, transparent);
  --sec-tint: color-mix(in srgb, #fff 6%, transparent);
  --sec-wash: color-mix(in srgb, #fff 4%, transparent);
  /* Accent-coloured text in a section is written for a light ground
     (--brand-sky-text, the darker text blue). On this dark band it would sink
     into the navy, so it follows the band's own accent instead. */
  --brand-sky-text: var(--sec-accent);
}

/* ---- Accent band: solid brand secondary, dark text by default.
   A brand whose accent is dark re-declares these in brands/{slug}.css. ---- */
.section--bg-secondary {
  --sec-bg: var(--brand-sky);
  --sec-fg: var(--brand-ink);
  --sec-fg-muted: color-mix(in srgb, var(--brand-ink) 82%, transparent);
  --sec-accent: var(--brand-deep);
  --sec-link: var(--brand-ink);
  --sec-link-hover: var(--brand-deep);
  --sec-border: color-mix(in srgb, var(--brand-deep) 22%, transparent);
  --sec-tint: color-mix(in srgb, #fff 28%, transparent);
  --sec-wash: color-mix(in srgb, var(--brand-ink) 8%, transparent);
  /* Accent text on the accent band would vanish; use the band's accent. */
  --brand-sky-text: var(--sec-accent);
}

/*
    Page Hero — standalone hero above the page sections.

    Mirrors the wireframe: an inset rounded image (or full-bleed) holding
    crossfading Ken Burns slides under a teal (brand-deep) scrim, with the
    content + trust strip centred on top in a 1440 layout. Image-led with light
    text, so it does NOT use the --sec-* surface tokens. Brand colour comes from
    var(--brand-*); the scrim/shadows are neutral color-mix on #000/#fff, which
    the token-purity gate permits.
*/
.hero {
  position: relative;
  display: flex;
  align-items: center;
  overflow: hidden;
  min-height: 500px;
}
.hero--tall {
  min-height: 620px;
}
.hero--short {
  min-height: 420px;
}
@media (max-width: 1024px) {
  .hero {
    min-height: 440px;
  }
  .hero--tall {
    min-height: 480px;
  }
  .hero--short {
    min-height: 400px;
  }
}
@media (max-width: 768px) {
  .hero {
    min-height: 400px;
  }
  .hero--tall {
    min-height: 420px;
  }
  .hero--short {
    min-height: 360px;
  }
}

/* The framed image — inset rounded by default, edge-to-edge when full-bleed. */
.hero-image {
  position: absolute;
  inset: 16px 40px;
  border-radius: 14px;
  overflow: hidden;
  z-index: 0;
}
@media (max-width: 768px) {
  .hero-image {
    inset: 0;
    border-radius: 0;
  }
}

.hero--bleed .hero-image {
  inset: 0;
  border-radius: 0;
}

.hero-slide {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  opacity: 0;
  transition: opacity 1.5s ease-in-out;
  z-index: 0;
}
.hero-slide.active {
  opacity: 1;
}

/* Teal scrim, darkening down the image. */
.hero-image::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  background: var(--hero-scrim-text), linear-gradient(180deg, color-mix(in srgb, var(--brand-deep) 40%, transparent) 0%, color-mix(in srgb, var(--brand-deep) 55%, transparent) 35%, color-mix(in srgb, var(--brand-deep) 72%, transparent) 65%, color-mix(in srgb, var(--brand-deep) 88%, transparent) 100%);
}

.hero-layout {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: 100%;
  max-width: 1440px;
  margin: 0 auto;
  padding: 72px 60px 48px;
  min-height: inherit;
}
@media (max-width: 768px) {
  .hero-layout {
    padding: 48px 28px 32px;
  }
}

/* The 680px measure belongs to the headline, not the block: capping the whole
   column wrapped the CTA row whenever the buttons ran past it (About, with two
   long labels plus the video CTA). The title keeps the same measure, so every
   existing heading wraps exactly as before; only the button row gains room. */
.hero-content {
  max-width: 860px;
  text-align: left;
}

.hero-breadcrumb {
  font-size: var(--hero-crumb-size);
  font-weight: var(--hero-crumb-weight);
  letter-spacing: var(--hero-crumb-tracking);
  text-transform: none;
  color: var(--hero-crumb-fg);
  margin-bottom: 14px;
}
.hero-breadcrumb a,
.hero-breadcrumb span {
  color: inherit;
  text-decoration: none;
  transition: color 0.2s;
}
.hero-breadcrumb a:hover {
  color: var(--text-on-dark);
}
.hero-breadcrumb .separator {
  margin: 0 0.5em;
  opacity: 0.5;
}

.hero-kicker {
  font-size: var(--hero-kicker-size);
  font-weight: var(--hero-kicker-weight);
  letter-spacing: var(--hero-kicker-tracking);
  text-transform: uppercase;
  display: inline-block;
  margin-bottom: 16px;
  color: var(--text-on-dark);
  text-shadow: 0 1px 6px color-mix(in srgb, #000 20%, transparent);
}
@media (max-width: 768px) {
  .hero-kicker {
    margin-bottom: 12px;
  }
}
.hero-kicker.is-pill {
  padding: 6px 14px;
  border-radius: 999px;
  background: var(--brand-sky);
  letter-spacing: 0.12em;
  text-shadow: none;
}

.hero-title {
  margin: 0 0 24px;
  max-width: 680px;
  font-size: clamp(2.25rem, 4.6vw, 3.5rem);
  line-height: 1.15;
  letter-spacing: -0.5px;
  font-weight: 700;
  color: var(--text-on-dark);
  text-shadow: 0 2px 20px color-mix(in srgb, #000 15%, transparent);
}

.hero-alt-name {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin: -12px 0 28px;
  font-family: var(--font-body);
  font-size: 20px;
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: 0.3px;
  color: var(--text-on-dark);
  text-shadow: 0 1px 8px color-mix(in srgb, #000 15%, transparent);
}
.hero-alt-name::before {
  content: "";
  flex: 0 0 auto;
  width: 28px;
  height: 2px;
  margin-top: 0.62em;
  border-radius: 1px;
  background: var(--brand-sky);
}
@media (max-width: 576px) {
  .hero-alt-name {
    margin-top: -8px;
    font-size: 17px;
  }
}

.hero .sub {
  margin: 0 0 36px;
  max-width: 600px;
  font-size: 19px;
  line-height: 1.7;
  letter-spacing: 0.2px;
  color: var(--hero-sub-fg);
  text-shadow: 0 1px 8px color-mix(in srgb, #000 10%, transparent);
}

.hero-ctas {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px;
}
.hero-ctas .btn-outline {
  border-color: color-mix(in srgb, #fff 40%, transparent);
  color: var(--text-on-dark);
}
.hero-ctas .btn-outline:hover {
  background: color-mix(in srgb, #fff 12%, transparent);
  border-color: color-mix(in srgb, var(--brand-glass) 60%, transparent);
  color: var(--text-on-dark);
}
@media (max-width: 768px) {
  .hero-ctas {
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
  }
  .hero-ctas .btn,
  .hero-ctas .btn-primary,
  .hero-ctas .btn-outline {
    width: 100%;
  }
  .hero-ctas .btn-video {
    align-self: center;
  }
}

/* Video CTA — open play ring with an underlined text label beside it. */
.btn-video {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  padding: 0;
  background: transparent;
  border: 0;
  color: var(--text-on-dark);
  text-transform: none;
  letter-spacing: 0;
  cursor: pointer;
}

.btn-video-ring {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  border: 2px solid color-mix(in srgb, #fff 55%, transparent);
  transition: transform 0.25s ease, background 0.25s ease, border-color 0.25s ease;
}
.btn-video-ring svg {
  width: 18px;
  height: 18px;
  margin-left: 2px;
  fill: var(--text-on-dark);
}

.btn-video-label {
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.01em;
  border-bottom: 1px solid color-mix(in srgb, #fff 40%, transparent);
  padding-bottom: 2px;
  transition: border-color 0.2s ease;
}

.btn-video:hover .btn-video-ring {
  transform: scale(1.06);
  background: color-mix(in srgb, #fff 10%, transparent);
  border-color: color-mix(in srgb, var(--brand-glass) 70%, transparent);
}

.btn-video:hover .btn-video-label {
  border-bottom-color: var(--text-on-dark);
}

/* Video lightbox — full dark backdrop, centred rounded 16:9, floating close. */
.hero-video-modal {
  position: relative;
  margin: auto;
  width: 100%;
  max-width: min(1100px, 92vw);
  padding: 0;
  border: 0;
  background: transparent;
  overflow: visible;
}
.hero-video-modal::backdrop {
  background: color-mix(in srgb, #000 82%, transparent);
  backdrop-filter: blur(4px);
}
.hero-video-modal[open] {
  animation: heroModalIn 0.25s ease-out;
}

.hero-video-frame {
  position: relative;
  width: 100%;
  aspect-ratio: 16/9;
  border-radius: 14px;
  overflow: hidden;
  background: #000;
  box-shadow: 0 30px 80px color-mix(in srgb, #000 60%, transparent);
}
.hero-video-frame iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.hero-video-close {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  padding: 0;
  border-radius: 50%;
  border: 1px solid color-mix(in srgb, #fff 35%, transparent);
  background: color-mix(in srgb, #000 35%, transparent);
  backdrop-filter: blur(4px);
  color: var(--text-on-dark);
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  transition: background 0.2s ease;
}
.hero-video-close:hover {
  background: color-mix(in srgb, #000 55%, transparent);
}

@keyframes heroModalIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
/* Trust strip — hairline-topped row inside the hero layout. */
.hero-trust-strip {
  display: flex;
  margin-top: 48px;
  padding-top: 28px;
  border-top: 1px solid color-mix(in srgb, #fff 25%, transparent);
}
@media (max-width: 768px) {
  .hero-trust-strip {
    flex-wrap: wrap;
    gap: 16px;
    margin-top: 32px;
    padding-top: 20px;
  }
}
@media (max-width: 480px) {
  .hero-trust-strip {
    gap: 12px;
    margin-top: 24px;
  }
}

.trust-item {
  flex: 1;
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 0 20px;
}
.trust-item:first-child {
  padding-left: 0;
}
@media (max-width: 768px) {
  .trust-item {
    flex: 0 1 calc(50% - 8px);
    min-width: 0;
    padding: 0;
  }
}
.trust-item .trust-icon {
  flex-shrink: 0;
  margin-top: 2px;
  line-height: 0;
}
.trust-item .trust-icon svg {
  width: 28px;
  height: 28px;
  stroke: var(--text-on-dark);
  fill: none;
  stroke-width: 1.5;
}
.trust-item .trust-icon img {
  width: 28px;
  height: 28px;
  object-fit: contain;
}
.trust-item strong {
  display: block;
  margin-bottom: 2px;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.2px;
  color: var(--text-on-dark);
  text-shadow: 0 1px 4px color-mix(in srgb, #000 15%, transparent);
}
.trust-item span {
  display: block;
  font-size: 13px;
  line-height: 1.4;
  color: var(--text-on-dark-muted);
}

/* Entrance cascade + Ken Burns — only when motion is allowed (no JS needed:
   the animation plays on load, and reduced-motion shows everything static). */
@media (prefers-reduced-motion: no-preference) {
  .hero-content > * {
    animation: heroFadeUp 0.65s ease-out both;
  }
  .hero-content > *:nth-child(1) {
    animation-delay: 0.15s;
  }
  .hero-content > *:nth-child(2) {
    animation-delay: 0.35s;
  }
  .hero-content > *:nth-child(3) {
    animation-delay: 0.55s;
  }
  .hero-content > *:nth-child(4) {
    animation-delay: 0.75s;
  }
  .hero-content > *:nth-child(5) {
    animation-delay: 0.95s;
  }
  .hero-content > *:nth-child(6) {
    animation-delay: 1.15s;
  }
  .hero-slide {
    animation: heroKenBurns 20s ease-in-out infinite alternate;
  }
  .hero-slide:nth-child(2) {
    animation-direction: alternate-reverse;
  }
  .hero-slide:nth-child(3) {
    animation-delay: -5s;
  }
  .hero-slide:nth-child(4) {
    animation-delay: -10s;
    animation-direction: alternate-reverse;
  }
}
@keyframes heroFadeUp {
  from {
    opacity: 0;
    transform: translateY(18px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes heroKenBurns {
  0% {
    transform: scale(1) translate(0, 0);
  }
  33% {
    transform: scale(1.04) translate(-0.8%, 0.4%);
  }
  66% {
    transform: scale(1.06) translate(0.6%, -0.6%);
  }
  100% {
    transform: scale(1.08) translate(-0.4%, 0.8%);
  }
}
/*
    Section · Accreditations — the affiliations strip on a content page.

    Same badge list as the footer, but this band is usually light, so the tiles
    get a border instead of relying on a white fill to separate them from the
    ground. Two of the supplied logos are JPEGs with a baked-in white
    background, so every tile still sits on --surface — it is the only way the
    set reads as one row rather than a mix of cut-outs and hard squares.
*/
.accreditations .accred-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 24px;
  list-style: none;
  max-width: 760px;
  margin: 0 auto;
  padding: 0;
}
.accreditations .accred-tile {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 92px;
  width: 172px;
  padding: 16px;
  border: 1px solid var(--sec-border);
  border-radius: 8px;
  background: var(--surface);
  transition: box-shadow 200ms cubic-bezier(0.23, 1, 0.32, 1), transform 200ms cubic-bezier(0.23, 1, 0.32, 1);
}
.accreditations .accred-tile a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
}
.accreditations .accred-tile img {
  max-height: 100%;
  max-width: 100%;
  width: auto;
  object-fit: contain;
}
.accreditations .accred-tile:has(a):hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 24px color-mix(in srgb, var(--brand-ink) 12%, transparent);
}
@media (max-width: 992px) {
  .accreditations .accred-tile {
    height: 78px;
    width: 140px;
  }
}
@media (max-width: 576px) {
  .accreditations .accred-tile {
    height: 68px;
    width: calc(50% - 8px);
  }
}
.accreditations .accred-names {
  margin: 24px 0 0;
  text-align: center;
  font-size: 14px;
  color: var(--sec-fg-muted);
}
@media (max-width: 576px) {
  .accreditations .accred-grid {
    gap: 16px;
  }
}

/*
    Section · Text + CTA Card — copy and bullets beside a bordered CTA card.

    Faithful port of the PD-Contact wireframe's .agents-layout ("For Travel
    Agents"): a 1.2fr / 0.8fr split with kicker + script heading + body + a
    dot-marker list on the left, and a centred white card carrying a gradient
    pill button on the right.

    Structural values match the wireframe 1:1; every colour comes from the
    --sec-* scheme tokens (_section-surfaces.scss) or the brand tokens, so the
    block repaints per band and per brand (CI: lint-tokens).
*/
.agent-cta__layout {
  display: grid;
  grid-template-columns: 1.2fr 0.8fr;
  gap: 48px;
  align-items: center;
}

/* ---- Text column ---- */
.agent-cta__kicker {
  margin: 0 0 10px;
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 2px;
  color: var(--brand-sky-text);
}

.agent-cta__heading {
  margin: 0 0 16px;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 44px;
  line-height: 1;
  /* Script headings take the deep brand colour, matching .s-head. */
  color: var(--brand-deep);
}

.agent-cta__body {
  color: var(--sec-fg-muted);
  /* Wireframe keeps a 12px gap before the bullet list. */
}
.agent-cta__body p {
  margin: 0 0 12px;
  font-size: 16px;
  line-height: 1.7;
}
.agent-cta__body a {
  color: var(--sec-link);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.agent-cta__body a:hover {
  color: var(--sec-link-hover);
}
.agent-cta__body :last-child {
  margin-bottom: 12px;
}

.agent-cta__bullets {
  list-style: none;
  padding: 0;
  margin: 0 0 8px;
}
.agent-cta__bullets li {
  position: relative;
  padding-left: 24px;
  font-size: 15px;
  line-height: 1.7;
  color: var(--sec-fg);
  /* Dot marker, as the wireframe — not the tick used by media-text. */
}
.agent-cta__bullets li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 10px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--brand-sky);
}

.agent-cta__footnote {
  margin: 12px 0 0;
  font-size: 16px;
  line-height: 1.7;
  color: var(--sec-fg-muted);
}

/* ---- CTA card ---- */
.agent-cta__card {
  padding: 40px 32px;
  text-align: center;
  background: var(--surface);
  border: 1px solid var(--brand-border);
  border-radius: 14px;
  /* :not() keeps this off .agent-cta__contact, which sets its own type —
     a bare `> p` out-specifies the class and silently wins. */
}
.agent-cta__card h3 {
  margin: 0 0 10px;
  font-size: 22px;
  font-weight: 700;
  line-height: 1.2;
  color: var(--brand-deep);
}
.agent-cta__card > p:not(.agent-cta__contact) {
  margin: 0 0 20px;
  font-size: 14px;
  line-height: 1.6;
  color: var(--text-muted);
}

.agent-cta__btn {
  display: inline-block;
  padding: 16px 40px;
  border-radius: 50px;
  background: var(--gradient-button);
  color: var(--gradient-button-fg);
  font-size: 14px;
  font-weight: 800;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  text-decoration: none;
  box-shadow: var(--shadow-cta);
  transition: transform 0.3s cubic-bezier(0.23, 1, 0.32, 1), box-shadow 0.3s ease;
}
.agent-cta__btn:hover {
  color: var(--gradient-button-fg);
  transform: translateY(-2px);
  box-shadow: var(--shadow-cta-hover);
}
.agent-cta__btn:active {
  transform: scale(0.97);
}

.agent-cta__contact {
  margin: 20px 0 0;
  font-size: 13px;
  line-height: 1.6;
  color: var(--text-subtle);
}
.agent-cta__contact a {
  color: var(--brand-deep);
  font-weight: 600;
  text-decoration: none;
  overflow-wrap: anywhere;
}
.agent-cta__contact a:hover {
  color: var(--brand-sky-text);
}

/* ---- Responsive ---- */
/* Wireframe breakpoints are 1024 / 480, not the theme's 992 / 576. */
@media (max-width: 1024px) {
  .agent-cta__layout {
    grid-template-columns: 1fr;
    gap: 32px;
  }
}
@media (max-width: 768px) {
  .agent-cta.section {
    padding: 56px 0;
  }
  .agent-cta__heading {
    font-size: 34px;
  }
}
@media (max-width: 480px) {
  .agent-cta.section {
    padding: 48px 0;
  }
  .agent-cta__heading {
    font-size: 30px;
  }
}
/*
    Section · Profiles — people, at length.

    Three decisions carry this block:

    1. The portrait holds a 3:4 frame with the crop anchored to the top, so a
       head-and-shoulders studio shot is cut at the chest and never through the
       face. That is the failure Media + Text had here.
    2. Studio portraits arrive on a white background, so on a white band the
       photo would dissolve into the page. The frame gives it a hairline and a
       soft shadow, which is the same card language as the tour and vehicle
       cards, so a cut-out reads as a deliberate portrait rather than a
       floating head.
    3. A long profile is unscannable, so the two facts a reader actually wants
       (where they are based, where they love) sit beside the name as a short
       row before the prose starts.

    Every colour comes from the --sec-* scheme tokens, so it repaints across
    white / off-white / primary / secondary and across brands (CI: lint-tokens).
*/
.profiles {
  /* A hairline between people, so the set reads as a list without boxing
     each person in a card of their own. */
}
.profiles .profile-list {
  display: flex;
  flex-direction: column;
  gap: 96px;
}
.profiles .profile + .profile {
  padding-top: 96px;
  border-top: 1px solid var(--sec-border);
}
.profiles .profile {
  display: grid;
  grid-template-columns: 320px 1fr;
  gap: 56px;
  align-items: start;
}
.profiles .profile-portrait {
  position: relative;
  aspect-ratio: 3/4;
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid var(--sec-border);
  background: var(--sec-tint);
  box-shadow: 0 18px 40px color-mix(in srgb, var(--brand-ink) 10%, transparent);
}
.profiles .profile-portrait img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  /* Keep the head: crop the bottom of the frame, never the top. */
  object-position: top center;
  transition: transform 0.6s cubic-bezier(0.23, 1, 0.32, 1);
}
.profiles .profile-role {
  margin: 0 0 10px;
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 2.5px;
  color: var(--sec-accent);
}
.profiles .profile-name {
  margin: 0 0 18px;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 32px;
  line-height: 1.2;
  color: var(--sec-fg);
}
.profiles .profile-facts {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 28px;
  list-style: none;
  margin: 0 0 24px;
  padding: 0 0 24px;
  border-bottom: 1px solid var(--sec-border);
}
.profiles .profile-facts li {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 14px;
  color: var(--sec-fg);
}
.profiles .profile-facts svg {
  width: 17px;
  height: 17px;
  flex: 0 0 auto;
  fill: none;
  stroke: var(--sec-accent);
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.profiles .profile-facts .pf-label {
  color: var(--sec-fg-muted);
}
.profiles .profile-bio {
  color: var(--sec-fg-muted);
}
.profiles .profile-bio p {
  font-size: 16px;
  line-height: 1.75;
  margin: 0 0 16px;
}
.profiles .profile-bio p:last-child {
  margin-bottom: 0;
}
.profiles .profile-bio a {
  color: var(--sec-link);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.profiles .profile-bio a:hover {
  color: var(--sec-link-hover);
}

/* Hover-zoom only where a real pointer can hover; never on touch. */
@media (hover: hover) and (pointer: fine) {
  .profiles .profile-portrait:hover img {
    transform: scale(1.03);
  }
}
@media (max-width: 992px) {
  .profiles .profile-list {
    gap: 64px;
  }
  .profiles .profile + .profile {
    padding-top: 64px;
  }
  .profiles .profile {
    grid-template-columns: 240px 1fr;
    gap: 36px;
  }
  .profiles .profile-name {
    font-size: 28px;
  }
}
@media (max-width: 768px) {
  .profiles {
    /* Capped rather than full-bleed: a portrait blown to phone width is all
       face and no page. */
  }
  .profiles .profile {
    grid-template-columns: 1fr;
    gap: 24px;
  }
  .profiles .profile-portrait {
    max-width: 220px;
  }
  .profiles .profile-name {
    font-size: 26px;
  }
  .profiles .profile-facts {
    gap: 8px 20px;
  }
}
/*
    Page title band — the fallback h1 for a page with no hero title
    (ltt_ensure_page_h1() in functions/hero.php). A legal or policy page with
    the hero switched off still needs its one h1. It sits on the same 760px
    measure as the Rich Text section it usually precedes, and hands the
    vertical rhythm to that section (no bottom padding of its own).
*/
.page-title {
  padding-bottom: 0;
}
@media (max-width: 768px) {
  .page-title {
    padding-bottom: 0;
  }
}
.page-title .page-title__heading {
  max-width: 760px;
  margin: 0 auto;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 44px;
  line-height: 1.2;
  color: var(--sec-fg);
}
@media (max-width: 768px) {
  .page-title .page-title__heading {
    font-size: 34px;
  }
}

/*
    Section · Rich Text — long-form policy / legal copy.

    The measure is the whole point: a Terms & Conditions document runs to
    thousands of words, and at full container width the eye loses the line.
    Everything else is quiet on purpose so the structure carries the reading.
*/
.rich-text .rich-text__inner {
  max-width: 760px;
  margin: 0 auto;
}
.rich-text .rich-text__heading {
  color: var(--sec-fg);
  margin-bottom: 8px;
}
.rich-text .rich-text__intro {
  color: var(--sec-fg-muted);
  font-size: 18px;
  margin: 0 0 48px;
}
.rich-text .rich-text__body {
  color: var(--sec-fg);
  line-height: 1.8;
}
.rich-text .rich-text__body > :first-child {
  margin-top: 0;
}
.rich-text .rich-text__body h2,
.rich-text .rich-text__body h3,
.rich-text .rich-text__body h4 {
  color: var(--sec-fg);
  margin: 48px 0 8px;
  scroll-margin-top: 110px;
}
.rich-text .rich-text__body h2 {
  font-size: 24px;
}
.rich-text .rich-text__body h3 {
  font-size: 18px;
}
.rich-text .rich-text__body h4 {
  font-size: 16px;
}
.rich-text .rich-text__body p {
  margin: 0 0 24px;
}
.rich-text .rich-text__body ul,
.rich-text .rich-text__body ol {
  margin: 0 0 24px;
  padding-left: 24px;
}
.rich-text .rich-text__body ul li,
.rich-text .rich-text__body ol li {
  margin-bottom: 8px;
}
.rich-text .rich-text__body a {
  color: var(--sec-link);
  text-decoration: underline;
}
.rich-text .rich-text__body a:hover {
  color: var(--sec-link-hover);
}
.rich-text .rich-text__body hr {
  border: 0;
  border-top: 1px solid var(--sec-border);
  margin: 48px 0;
}

/*
    Section · Contact Methods — the "Other Ways to Reach Us" card row.

    Faithful port of the PD-Contact wireframe's .contact-methods-grid: three
    centred cards, each a 48px sky stroke icon over a title, a bold clickable
    detail line and a muted note. Card chrome matches .fg-card--icon so the two
    read as the same family.

    Structural values match the wireframe 1:1; every colour comes from the
    editor-selected band via the --sec-* scheme tokens (_section-surfaces.scss)
    or the brand tokens, so the block repaints per band and per brand
    (CI: lint-tokens).
*/
.contact-methods .s-head {
  /* Wireframe sets 40px under this header, tighter than the global 64px. */
  margin-bottom: 40px;
  /* ...and 12px between the heading and its supporting line. */
}
.contact-methods .s-head p {
  margin-top: 12px;
}

.cm-grid {
  --cm-gap: 28px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--cm-gap);
}

.cm-card {
  flex: 0 1 calc((100% - 2 * var(--cm-gap)) / 3);
  padding: 40px 28px;
  text-align: center;
  /* Raised card against the band. --surface is white in PD and the brand
     surface elsewhere, so it stays a "card" on any light band. */
  background: var(--surface);
  border: 1px solid var(--brand-border);
  border-radius: 14px;
  transition: transform 0.3s cubic-bezier(0.23, 1, 0.32, 1), box-shadow 0.3s ease;
}
@media (hover: hover) and (pointer: fine) {
  .cm-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-dropdown);
  }
}

.cm-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  margin: 0 auto 20px;
}
.cm-icon svg {
  width: 48px;
  height: 48px;
  fill: none;
  /* Sky accent, as the wireframe — reads distinctly against the dark
     title on a light card. */
  stroke: var(--brand-sky);
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.cm-title {
  margin: 0 0 10px;
  font-size: 22px;
  font-weight: 700;
  line-height: 1.2;
  color: var(--brand-deep);
}

.cm-detail {
  margin-bottom: 8px;
  font-size: 17px;
  font-weight: 600;
  line-height: 1.5;
  color: var(--brand-deep);
  /* Long email addresses must not blow out the card. */
  overflow-wrap: anywhere;
}
.cm-detail a {
  color: inherit;
  text-decoration: none;
  transition: color 0.2s ease;
}
.cm-detail a:hover {
  color: var(--brand-sky-text);
}

.cm-note {
  margin: 0;
  font-size: 14px;
  line-height: 1.6;
  color: var(--text-muted);
}

/* ---- Responsive ---- */
/* Wireframe breakpoints are 1024 / 480, not the theme's 992 / 576.
   Card padding holds at 40px 28px across every width. */
@media (max-width: 1024px) {
  .cm-grid {
    --cm-gap: 20px;
  }
}
@media (max-width: 768px) {
  .contact-methods.section {
    padding: 56px 0;
  }
  .cm-grid {
    --cm-gap: 16px;
  }
  .cm-card {
    flex-basis: 100%;
  }
}
@media (max-width: 480px) {
  .contact-methods.section {
    padding: 48px 0;
  }
}
/*
    Section · Enquiry Form + Sidebar — the main Contact band.

    Faithful port of the PD-Contact wireframe's .enquiry-layout: a 1.2fr / 0.8fr
    split with the enquiry form on the left and a stack of small cards down the
    right, collapsing to one column at the tablet breakpoint.

    The forms themselves are Gravity Forms — their Orbital output is dressed in
    css/_forms.scss, including the two-up rows and the compact sidebar variant
    scoped to .enquiry-card__form.

    Structural values match the wireframe 1:1; every colour comes from the
    --sec-* scheme tokens (_section-surfaces.scss) or the brand tokens
    (CI: lint-tokens).
*/
.enquiry-form__layout {
  display: grid;
  grid-template-columns: 1.2fr 0.8fr;
  gap: 48px;
  align-items: start;
}

/* ---- Form column ---- */
.enquiry-form__heading {
  margin: 0 0 8px;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 44px;
  line-height: 1;
  letter-spacing: -0.2px;
  /* Script headings take the deep brand colour, matching .s-head. */
  color: var(--brand-deep);
}

.enquiry-form__intro {
  margin: 0 0 32px;
  font-size: 16px;
  line-height: 1.7;
  color: var(--sec-fg-muted);
}

.enquiry-form__privacy {
  margin-top: 14px;
  font-size: 13px;
  line-height: 1.6;
  color: var(--text-subtle);
}
.enquiry-form__privacy p {
  margin: 0;
}
.enquiry-form__privacy a {
  color: var(--brand-sky-text);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.enquiry-form__privacy a:hover {
  text-decoration-thickness: 2px;
}

/* ---- Sidebar ---- */
.enquiry-form__sidebar {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.enquiry-card {
  padding: 28px 24px;
  background: var(--surface);
  border: 1px solid var(--brand-border);
  border-radius: 14px;
}

.enquiry-card__heading {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 10px;
  font-size: 18px;
  font-weight: 700;
  line-height: 1.2;
  color: var(--brand-deep);
}
.enquiry-card__heading svg {
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  fill: none;
  stroke: var(--brand-sky);
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.enquiry-card__body {
  margin: 0 0 14px;
  font-size: 14px;
  line-height: 1.65;
  color: var(--text-muted);
}

.enquiry-card__link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.3px;
  text-decoration: none;
  color: var(--brand-deep);
  transition: color 0.2s ease;
}
.enquiry-card__link svg {
  width: 14px;
  height: 14px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform 0.2s cubic-bezier(0.23, 1, 0.32, 1);
}
.enquiry-card__link:hover {
  color: var(--brand-sky-text);
}
.enquiry-card__link:hover svg {
  transform: translateX(3px);
}

/* ---- Opening hours ---- */
.enquiry-card__hours {
  list-style: none;
  padding: 0;
  margin: 0;
}
.enquiry-card__hours li {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 6px 0;
  font-size: 14px;
  color: var(--text-primary);
  border-bottom: 1px solid color-mix(in srgb, var(--brand-border) 60%, transparent);
}
.enquiry-card__hours li:last-child {
  border-bottom: none;
}
.enquiry-card__hours li span:last-child {
  color: var(--text-muted);
}

.enquiry-card__note {
  margin: 10px 0 0;
  font-size: 13px;
  line-height: 1.5;
  color: var(--text-muted);
}

/* ---- Responsive ---- */
/* Wireframe breakpoints are 1024 / 480, not the theme's 992 / 576. */
@media (max-width: 1024px) {
  .enquiry-form__layout {
    display: flex;
    flex-direction: column;
    gap: 24px;
  }
  .enquiry-form__sidebar {
    display: contents;
  }
  .enquiry-form__main {
    margin: 12px 0;
  }
  .enquiry-card--links {
    order: -1;
  }
}
@media (max-width: 768px) {
  .enquiry-form.section {
    padding: 56px 0;
  }
  .enquiry-form__heading {
    font-size: 34px;
  }
}
@media (max-width: 480px) {
  .enquiry-form.section {
    padding: 48px 0;
  }
  .enquiry-form__heading {
    font-size: 30px;
  }
}
/*
    Section · Office Location — centred heading, map embed, detail columns.

    Faithful port of the PD-Contact wireframe's .office-section: a script
    heading, a full-width rounded 400px map, then a three-column centred detail
    row that becomes a left-aligned stack on mobile.

    The map keeps the wireframe placeholder's tinted background so the band
    doesn't collapse or flash white while the iframe loads.

    Structural values match the wireframe 1:1; every colour comes from the
    --sec-* scheme tokens (_section-surfaces.scss) or the brand tokens
    (CI: lint-tokens).
*/
.office-heading {
  margin: 0 0 28px;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 44px;
  line-height: 1;
  text-align: center;
  /* Script headings take the deep brand colour, matching .s-head. */
  color: var(--brand-deep);
}

.office-map {
  width: 100%;
  height: 400px;
  margin-bottom: 32px;
  border-radius: 14px;
  overflow: hidden;
  /* Tinted placeholder behind the iframe — matches the wireframe's empty
     map state and avoids a white flash before the embed paints. */
  background: var(--sec-tint);
}
.office-map iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}

.office-details {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
  text-align: center;
}

.office-detail h4 {
  margin: 0 0 6px;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.2;
  color: var(--brand-deep);
}
.office-detail p {
  margin: 0;
  font-size: 15px;
  line-height: 1.6;
  color: var(--sec-fg-muted);
}

/* ---- Responsive ---- */
/* Wireframe breakpoints are 1024 / 480, not the theme's 992 / 576. */
@media (max-width: 1024px) {
  .office-details {
    gap: 24px;
  }
}
@media (max-width: 768px) {
  .office-location.section {
    padding: 56px 0;
  }
  .office-heading {
    font-size: 34px;
  }
  .office-map {
    height: 280px;
  }
  .office-details {
    grid-template-columns: 1fr;
    gap: 20px;
    text-align: left;
  }
}
@media (max-width: 480px) {
  .office-location.section {
    padding: 48px 0;
  }
  .office-heading {
    font-size: 30px;
  }
}
/*
    Section · Testimonials — guest reviews from the Testimonial CPT.
    Columns divided by hairlines (no card chrome) under a giant quote watermark.
    No stars and no initial-in-a-circle avatar (client, Sep 2026): the accent rule
    above the attribution is now the card's only accent, so it does that work on
    its own. The avatar circle only appears when there is a real guest photo.
    All colour comes from the section scheme tokens (--sec-*), set by the chosen
    background in _section-surfaces.scss — so the block stays legible on any of
    white / off-white / primary / secondary. Mirrors the PD wireframe (.test-*).
*/
.testimonials {
  overflow: hidden;
}
.testimonials::before {
  content: "“";
  position: absolute;
  top: -40px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 320px;
  line-height: 1;
  color: var(--sec-wash);
  font-family: var(--font-body);
  pointer-events: none;
}
.testimonials .container {
  position: relative;
  z-index: 1;
}
.testimonials .s-head :is(h2, h3, h4, h5, h6) {
  color: var(--sec-fg);
  font-family: var(--font-display);
  font-weight: 400;
}
.testimonials .s-head p {
  color: var(--sec-fg-muted);
  text-transform: uppercase;
  letter-spacing: 2px;
  font-weight: 500;
  font-size: 14px;
}

.test-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  margin-top: 48px;
}
@media (max-width: 992px) {
  .test-grid {
    grid-template-columns: 1fr;
  }
}

.test-card {
  display: flex;
  flex-direction: column;
  padding: 36px 32px;
  border-right: 1px solid var(--sec-border);
  transition: background 0.35s ease;
}
.test-card:last-child {
  border-right: none;
}
.test-card:hover {
  background: var(--sec-tint);
}
@media (max-width: 992px) {
  .test-card {
    border-right: none;
    border-bottom: 1px solid var(--sec-border);
    padding: 32px 20px;
  }
  .test-card:last-child {
    border-bottom: none;
  }
}

.test-quote {
  flex: 1;
  margin: 4px 0 28px;
  font-size: 20px;
  line-height: 1.8;
  font-style: italic;
  color: color-mix(in srgb, var(--sec-fg) 90%, transparent);
}
@media (max-width: 992px) {
  .test-quote {
    font-size: 17px;
  }
}

.test-divider {
  width: 40px;
  height: 2px;
  margin-bottom: 18px;
  background: var(--sec-accent);
}

.test-author {
  display: flex;
  align-items: center;
  gap: 14px;
}

.test-avatar {
  flex: 0 0 auto;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  overflow: hidden;
  background: color-mix(in srgb, var(--sec-fg) 12%, transparent);
  border: 2px solid var(--sec-border);
}
.test-avatar img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.test-info .name {
  font-size: 16px;
  line-height: 1.3;
  font-weight: 600;
  color: var(--sec-fg);
  letter-spacing: 0.3px;
}
.test-info .tour {
  margin-top: 2px;
  font-size: 12px;
  color: var(--sec-fg-muted);
  text-transform: uppercase;
  letter-spacing: 1px;
}

.test-footer {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 24px;
  margin-top: 48px;
}
.test-footer .test-footer-line {
  flex: 1;
  max-width: 120px;
  height: 1px;
  background: var(--sec-border);
}
.test-footer a {
  font-size: 14px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 2px;
  text-decoration: none;
  white-space: nowrap;
  color: var(--sec-link);
}
.test-footer a:hover {
  color: var(--sec-link-hover);
}

/*
    Section · Testimonials Wall — the filterable guest-review wall.

    Ported from the PD-Testimonials wireframe: a white summary bar, a sticky filter
    bar (tour + theme) and a masonry review grid (CSS multi-column) with read-more
    clamps + a load-more batch.

    No stars anywhere (client, Sep 2026), so the wireframe's score + star bars are
    gone from the summary. What is left is the review count and the theme tags, on
    a two-up bar that centres itself when a brand has no themes to show.

    The wall is a fixed LIGHT surface (like the wireframe), so its internals use the
    brand tokens directly — for Pure Discoveries --brand-sky / --brand-deep /
    --brand-border / --surface-tint resolve to the exact wireframe palette, and
    re-skin cleanly for any other brand. The optional intro heading sits on the
    band, so it keeps the --sec-* scheme tokens.
    Filtering / read-more / load-more live in js/custom.js.
*/
.testimonials-wall {
  overflow: hidden;
  padding-top: 0;
}
.testimonials-wall .s-head :is(h2, h3, h4, h5, h6) {
  color: var(--sec-fg);
  font-family: var(--font-display);
  font-weight: 400;
}
.testimonials-wall .s-head p {
  color: var(--sec-fg-muted);
  text-transform: uppercase;
  letter-spacing: 2px;
  font-weight: 500;
  font-size: 14px;
}

/* ---- Summary bar -------------------------------------------------------- */
.tw-summary {
  background: var(--surface);
  border-bottom: 1px solid var(--brand-border);
  padding: 32px 0;
}

.tw-summary__themes-title {
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1.2px;
  color: var(--brand-deep);
  margin-bottom: 12px;
}

.tw-summary__themes-list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 0;
  margin: 0;
  padding: 0;
  list-style: none;
}

.tw-theme-tag {
  display: inline-flex;
  align-items: center;
  color: var(--sec-fg, var(--brand-deep));
  font-size: 16px;
  line-height: 1.5;
}
.tw-theme-tag:not(:last-child)::after {
  content: "";
  width: 4px;
  height: 4px;
  margin: 0 12px;
  border-radius: 50%;
  background: var(--brand-sky);
}

/* ---- Sticky filter bar -------------------------------------------------- */
.tw-filters {
  background: var(--surface);
  border-bottom: 1px solid var(--brand-border);
  position: sticky;
  top: 0;
  z-index: 90;
  padding: 16px 0;
  transition: box-shadow 0.3s ease;
}
.tw-filters.is-stuck {
  box-shadow: 0 6px 24px color-mix(in srgb, var(--brand-deep) 10%, transparent);
}
@media (max-width: 768px) {
  .tw-filters {
    position: static;
  }
}

.tw-filters__inner {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 20px;
}
@media (max-width: 768px) {
  .tw-filters__inner {
    flex-direction: column;
    align-items: stretch;
    gap: 16px;
  }
}

.tw-filter-group {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 0 0 auto;
}
@media (max-width: 768px) {
  .tw-filter-group {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    width: 100%;
  }
}

.tw-filter-label {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--text-muted);
  white-space: nowrap;
}

.tw-filter-divider {
  width: 1px;
  align-self: stretch;
  background: var(--brand-border);
}
@media (max-width: 768px) {
  .tw-filter-divider {
    display: none;
  }
}

.tw-select {
  appearance: none;
  -webkit-appearance: none;
  padding: 8px 34px 8px 14px;
  border-radius: 50px;
  border: 1.5px solid var(--brand-border);
  background-color: var(--surface);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235a7a84' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 14px;
  color: var(--brand-deep);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}
.tw-select:focus-visible {
  outline: 2px solid var(--brand-sky);
  outline-offset: 1px;
}
@media (max-width: 768px) {
  .tw-select {
    width: 100%;
  }
}

.tw-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.tw-pill {
  padding: 8px 18px;
  border-radius: 50px;
  border: 1.5px solid var(--brand-border);
  background: var(--surface);
  color: var(--text-muted);
  font-size: 13px;
  font-weight: 600;
  text-transform: none;
  letter-spacing: normal;
  white-space: nowrap;
  cursor: pointer;
  transition: color 0.2s, background 0.2s, border-color 0.2s;
}
.tw-pill:hover {
  border-color: var(--brand-sky);
  color: var(--brand-deep);
  background: var(--surface-tint);
}
.tw-pill.is-active {
  background: var(--brand-deep);
  border-color: var(--brand-deep);
  color: #fff;
}

/* ---- Count label -------------------------------------------------------- */
.tw-count {
  margin: 48px 0 32px;
  font-size: 14px;
  font-weight: 600;
  color: var(--text-muted);
}
.tw-count strong {
  color: var(--brand-deep);
  font-weight: 600;
}

/* ---- Masonry review grid ------------------------------------------------ */
.tw-grid {
  columns: 2;
  column-gap: 28px;
}
.tw-grid:first-child {
  margin-top: 48px;
}
@media (max-width: 768px) {
  .tw-grid {
    columns: 1;
  }
}

.tw-card {
  break-inside: avoid;
  background: var(--surface);
  border: 1px solid var(--brand-border);
  border-radius: 14px;
  padding: 28px;
  margin-bottom: 28px;
  transition: box-shadow 0.3s ease, transform 0.3s ease;
}
.tw-card:hover {
  box-shadow: 0 12px 36px color-mix(in srgb, var(--brand-deep) 10%, transparent);
  transform: translateY(-3px);
}
@media (max-width: 768px) {
  .tw-card {
    padding: 22px;
  }
}

.tw-card__title {
  font-size: 18px;
  font-weight: 700;
  line-height: 1.35;
  color: var(--brand-deep);
  margin: 0 0 10px;
}

.tw-card__body {
  font-size: 15px;
  line-height: 1.7;
  letter-spacing: 0.2px;
  color: var(--text-primary);
  margin-bottom: 14px;
}
.tw-card__body.is-clamped {
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.tw-card__more {
  display: inline-block;
  margin-bottom: 16px;
  padding: 0;
  border: none;
  background: none;
  color: var(--brand-sky-text);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.3px;
  text-transform: none;
  cursor: pointer;
}
.tw-card__more[hidden] {
  display: none;
}
.tw-card__more:hover {
  color: var(--brand-deep);
}

.tw-card__photos {
  display: flex;
  gap: 8px;
  margin-bottom: 18px;
}

.tw-card__photo {
  width: 80px;
  height: 60px;
  padding: 0;
  border: none;
  background: none;
  border-radius: 8px;
  overflow: hidden;
  cursor: pointer;
}
.tw-card__photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease;
}
.tw-card__photo:hover img {
  transform: scale(1.05);
}
.tw-card__photo:focus-visible {
  outline: 2px solid var(--brand-sky);
  outline-offset: 2px;
}

.tw-card__reviewer {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-top: 18px;
  border-top: 1px solid var(--brand-border);
}

.tw-card__avatar {
  flex: 0 0 auto;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  overflow: hidden;
  background: var(--surface-tint);
}
.tw-card__avatar img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
@media (max-width: 768px) {
  .tw-card__avatar {
    width: 40px;
    height: 40px;
  }
}

.tw-card__meta {
  flex: 1;
  min-width: 0;
}

.tw-card__name {
  font-size: 14px;
  font-weight: 700;
  color: var(--brand-deep);
}

.tw-card__sub {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 3px;
}

.tw-card__country {
  font-size: 12px;
  color: var(--text-subtle);
}

.tw-card__badge {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 50px;
  background: color-mix(in srgb, var(--brand-sky) 12%, transparent);
  color: var(--brand-deep);
  font-size: 11px;
  font-weight: 600;
  text-decoration: none;
}

a.tw-card__badge {
  transition: background-color 0.15s ease;
}
a.tw-card__badge:hover, a.tw-card__badge:focus-visible {
  background: color-mix(in srgb, var(--brand-sky) 22%, transparent);
}

.tw-card__date {
  flex: 0 0 auto;
  align-self: flex-start;
  font-size: 12px;
  color: var(--text-subtle);
  white-space: nowrap;
}

/* ---- No results + load more -------------------------------------------- */
.tw-noresults {
  text-align: center;
  padding: 48px 0;
  font-size: 16px;
  color: var(--text-muted);
}

.tw-loadmore {
  display: flex;
  justify-content: center;
  margin-top: 48px;
}
.tw-loadmore[hidden] {
  display: none;
}

.tw-loadmore__btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 14px 32px;
  border-radius: 50px;
  border: none;
  background: linear-gradient(135deg, color-mix(in srgb, var(--brand-sky) 55%, #fff), var(--brand-sky), var(--brand-deep));
  color: #fff;
  font-size: 14px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 1px;
  cursor: pointer;
  transition: filter 0.2s, transform 0.2s;
}
.tw-loadmore__btn svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.tw-loadmore__btn:hover {
  filter: brightness(1.05);
  transform: translateY(-1px);
}

/* ---- Small mobile refinements (wireframe ≤480 breakpoint) --------------- */
@media (max-width: 480px) {
  .tw-summary {
    padding: 24px 0;
  }
  .tw-card {
    padding: 20px;
    margin-bottom: 16px;
  }
  .tw-card__title {
    font-size: 16px;
  }
  .tw-card__body {
    font-size: 14px;
  }
  .tw-loadmore__btn {
    padding: 14px 28px;
    font-size: 13px;
  }
}
/*
    Section · FAQ Accordion — questions from the FAQ CPT.
    A divided list (hairline rules, no card chrome) with a circular icon that
    inverts when its row opens. One row open at a time (.is-open toggled in
    js/custom.js). All colour comes from the section scheme tokens (--sec-*),
    so the accordion stays legible on any selected background.
*/
.faq {
  border-bottom: 1px solid var(--sec-border);
}

.faq__list {
  max-width: 780px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
}

.faq__item {
  border-bottom: 1px solid var(--sec-border);
  transition: background 0.2s ease;
}
.faq__item:first-child {
  border-top: 1px solid var(--sec-border);
}

.faq__question {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 22px 8px;
  min-height: 56px;
  background: none;
  border: 0;
  cursor: pointer;
  text-align: left;
  font-family: inherit;
  font-size: 17px;
  font-weight: 600;
  text-transform: none;
  letter-spacing: normal;
  line-height: 1.45;
  color: var(--sec-fg);
  transition: color 0.2s ease;
}
.faq__question:hover {
  color: var(--sec-link-hover);
}

.faq__icon {
  flex: 0 0 auto;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--sec-tint);
  transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1), background 0.3s ease;
}
.faq__icon svg {
  width: 14px;
  height: 14px;
  fill: none;
  stroke: var(--sec-fg);
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.faq__answer {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.faq__answer-inner {
  padding: 0 60px 24px 8px;
  color: var(--sec-fg-muted);
  font-size: 15.5px;
  line-height: 1.8;
}
.faq__answer-inner p {
  margin: 0 0 12px;
}
.faq__answer-inner p:last-child {
  margin-bottom: 0;
}

.faq__item.is-open .faq__icon {
  transform: rotate(180deg);
  background: var(--sec-fg);
}
.faq__item.is-open .faq__icon svg {
  stroke: var(--sec-bg);
}
.faq__item.is-open .faq__answer {
  max-height: 600px;
}

.faq__footer {
  text-align: center;
  margin-top: 48px;
}
.faq__footer a {
  font-size: 14px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 2px;
  color: var(--sec-link);
  text-decoration: none;
}
.faq__footer a:hover {
  color: var(--sec-link-hover);
}

/*
    Section · FAQ Help Centre — the searchable, category-grouped shell that wraps
    the shared .faq accordion (_faq.scss stays the row styling). Sticky search +
    filter pills, icon-headed category groups with an alternating tint, and a
    no-results line. All colour comes from the section scheme tokens (--sec-*),
    so it stays legible on any band and repaints per brand.
*/
.faq-centre {
  padding: 0;
}

/* ---- Sticky search + pills bar ---- */
.faq-centre__filters {
  position: sticky;
  top: 0;
  z-index: 90;
  background: var(--sec-bg);
  border-bottom: 1px solid var(--sec-border);
  padding: 20px 0;
  transition: box-shadow 0.25s ease;
}
.faq-centre__filters.is-stuck {
  box-shadow: 0 6px 20px color-mix(in srgb, var(--sec-fg) 12%, transparent);
}

.faq-centre__filters-inner {
  display: flex;
  flex-direction: column;
  gap: 16px;
  align-items: center;
}

.faq-centre__search {
  position: relative;
  width: 100%;
  max-width: 560px;
}

.faq-centre__search-icon {
  position: absolute;
  top: 50%;
  left: 20px;
  transform: translateY(-50%);
  width: 18px;
  height: 18px;
  fill: none;
  stroke: var(--sec-fg-muted);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  pointer-events: none;
}

.faq-centre__search-input {
  width: 100%;
  padding: 14px 48px 14px 50px;
  border: 1px solid var(--sec-border);
  border-radius: 50px;
  background: var(--surface);
  color: var(--text-primary);
  font-family: inherit;
  font-size: 16px;
  line-height: 1.4;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.faq-centre__search-input::placeholder {
  color: var(--sec-fg-muted);
}
.faq-centre__search-input:focus {
  outline: none;
  border-color: var(--sec-link);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--sec-link) 22%, transparent);
}
.faq-centre__search-input::-webkit-search-cancel-button {
  -webkit-appearance: none;
  appearance: none;
}

.faq-centre__search-clear {
  position: absolute;
  top: 50%;
  right: 12px;
  transform: translateY(-50%);
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--sec-tint);
  color: var(--sec-fg);
  cursor: pointer;
}
.faq-centre__search-clear svg {
  width: 14px;
  height: 14px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.faq-centre__search-clear:hover {
  background: var(--sec-border);
}

.faq-centre__pills {
  display: flex;
  flex-wrap: nowrap;
  justify-content: space-between;
  gap: 8px;
  width: 100%;
  overflow-x: auto;
  padding-bottom: 2px;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.faq-centre__pills::-webkit-scrollbar {
  display: none;
}

.faq-centre__pill {
  flex: 0 0 auto;
  padding: 9px 16px;
  border: 1px solid var(--sec-border);
  border-radius: 50px;
  background: var(--surface);
  color: var(--sec-fg);
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  text-transform: none;
  letter-spacing: normal;
  white-space: nowrap;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.faq-centre__pill:hover {
  border-color: var(--sec-link);
  color: var(--sec-link);
}
.faq-centre__pill.is-active {
  background: var(--sec-link);
  border-color: var(--sec-link);
  color: var(--sec-bg);
}

/* ---- No results ---- */
.faq-centre__no-results {
  text-align: center;
  padding: 48px 24px;
  color: var(--sec-fg-muted);
  font-size: 17px;
}
.faq-centre__no-results a {
  color: var(--sec-link);
  text-decoration: underline;
}
.faq-centre__no-results a:hover {
  color: var(--sec-link-hover);
}

/* ---- Category groups ---- */
.faq-centre__group {
  padding: 64px 0;
}
.faq-centre__group--tint {
  background: color-mix(in srgb, var(--sec-fg) 4%, transparent);
}
.faq-centre__group[hidden] {
  display: none;
}

.faq-centre__group-head {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  max-width: 780px;
  margin: 0 auto 32px;
  text-align: left;
}

.faq-centre__group-icon {
  flex: 0 0 auto;
  width: 48px;
  height: 48px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--sec-tint);
}
.faq-centre__group-icon svg {
  width: 24px;
  height: 24px;
  fill: none;
  stroke: var(--sec-accent);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.faq-centre__group-title {
  margin: 0;
  color: var(--sec-fg);
  font-size: 28px;
  line-height: 1.2;
}

.faq-centre .faq__item.is-open .faq__answer {
  max-height: 1500px;
}

/* ---- Responsive ---- */
@media (max-width: 768px) {
  .faq-centre__group {
    padding: 48px 0;
  }
  .faq-centre__group-head {
    gap: 12px;
    margin-bottom: 24px;
  }
  .faq-centre__group-icon {
    width: 40px;
    height: 40px;
    border-radius: 12px;
  }
  .faq-centre__group-icon svg {
    width: 20px;
    height: 20px;
  }
  .faq-centre__group-title {
    font-size: 23px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .faq-centre__filters,
  .faq-centre__search-input,
  .faq-centre__pill {
    transition: none;
  }
}
/*
    Section · Feature Grid — one reusable card grid with four card styles
    (image / icon / number / badge), faithful to the PD wireframes:
        image  — "Why Pure Discoveries" + "Our Philosophy" photo cards
        icon   — "Our Values" + Driver-Guide "What to Expect" / "Training"
        number — Driver-Guide "A Typical Day" numbered steps
        badge  — About "Recognised for Quality" accreditation row

    Every colour comes from the section scheme tokens (--sec-*) set by the chosen
    background in _section-surfaces.scss, or from the brand tokens — so the block
    stays legible on white / off-white / primary / secondary and repaints per
    brand with zero code change. Card entrance reuses the global .ltt-reveal
    scroll-reveal (keyframes live in _tour-collection.scss); reduced-motion-safe
    because the JS only arms below-the-fold cards.
*/
.feature-grid {
  overflow: hidden;
}
.feature-grid .s-head {
  text-align: center;
  max-width: 640px;
  margin: 0 auto 48px;
}
.feature-grid .s-head :is(h2, h3, h4, h5, h6) {
  font-family: var(--font-display);
  font-size: 44px;
  font-weight: 400;
  line-height: 1.2;
  color: var(--sec-fg);
  margin: 0;
}
@media (max-width: 768px) {
  .feature-grid .s-head :is(h2, h3, h4, h5, h6) {
    font-size: 34px;
  }
}
.feature-grid .s-head p {
  margin: 12px 0 0;
  font-size: 18px;
  line-height: 1.8;
  color: var(--sec-fg-muted);
}

/* ---- Shared grids ----
   Responsive steps per the wireframes: 4-col -> 2 at 992 -> 1 at 480;
   3-col -> 2 at 768 -> 1 at 480. ($screen-md 992, $screen-sm 768; 480 has no
   token, so it is a literal phone breakpoint shared by both column counts.) */
.fg-grid {
  display: grid;
  gap: 28px;
  /* Both collapse to a single column on small phones. */
}
.fg-grid--4 {
  grid-template-columns: repeat(4, 1fr);
}
@media (max-width: 992px) {
  .fg-grid--4 {
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
  }
}
.fg-grid--3 {
  grid-template-columns: repeat(3, 1fr);
}
@media (max-width: 768px) {
  .fg-grid--3 {
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
  }
}
@media (max-width: 480px) {
  .fg-grid {
    grid-template-columns: 1fr;
  }
}

/* Image cards carry a number + title + description, so a two-up phone layout
   gets cramped and hard to read. Stack the image-style grid to one column across
   the whole mobile range (the denser icon / number grids keep the --4/--3 steps). */
@media (max-width: 768px) {
  .feature-grid--image .fg-grid {
    grid-template-columns: 1fr;
  }
}

/* Badges: an intrinsically centred wrapping row (accreditations). */
.fg-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 48px;
}
@media (max-width: 768px) {
  .fg-row {
    gap: 32px;
  }
}
@media (max-width: 576px) {
  .fg-row {
    flex-direction: column;
    align-items: center;
    gap: 28px;
  }
}

/* ===========================================================================
   IMAGE cards — bg photo + dark overlay + big number + title + text (white).
   =========================================================================== */
.fg-card--image {
  position: relative;
  height: 440px;
  border-radius: 12px;
  overflow: hidden;
  /* Dark gradient overlay — heavier at the foot so the copy stays legible.
     Built from the deep brand colour so it tints per brand. */
  /* Brand accent hairline that draws in on hover. */
  /* Desktop only (>768px, matching the wireframe usp grid): the description is
     hidden until hover, and the image zoom / accent line animate on hover. On
     tablet & mobile (<=768px) there is NO hover behaviour at all — the
     description is simply always visible, so a tap can never leave a card
     stuck "open". Viewport-gated (not hover-gated) so narrow desktop windows
     and touch laptops match the wireframe too. */
}
@media (max-width: 992px) {
  .fg-card--image {
    height: 360px;
  }
}
@media (max-width: 576px) {
  .fg-card--image {
    height: 300px;
  }
}
.fg-card--image .fg-image {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  transition: transform 0.6s cubic-bezier(0.23, 1, 0.32, 1);
}
.fg-card--image .fg-image-scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, color-mix(in srgb, var(--brand-ink) 0%, transparent) 0%, color-mix(in srgb, var(--brand-ink) 10%, transparent) 40%, color-mix(in srgb, var(--brand-ink) 52%, transparent) 75%, color-mix(in srgb, var(--brand-ink) 78%, transparent) 100%);
  transition: background 0.4s ease;
}
.fg-card--image::after {
  content: "";
  position: absolute;
  top: 0;
  left: 24px;
  right: 24px;
  height: 3px;
  background: var(--brand-sky);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.4s cubic-bezier(0.23, 1, 0.32, 1);
  z-index: 3;
}
.fg-card--image .fg-image-body {
  position: absolute;
  inset: auto 0 0 0;
  z-index: 2;
  padding: 28px 24px;
  color: #fff;
}
.fg-card--image .fg-number {
  display: block;
  margin-bottom: 8px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color: color-mix(in srgb, #fff 55%, transparent);
}
.fg-card--image h3 {
  margin: 0;
  font-size: 26px;
  font-weight: 400;
  line-height: 1.2;
  color: #fff;
}
@media (max-width: 992px) {
  .fg-card--image h3 {
    font-size: 22px;
  }
}
.fg-card--image p {
  margin: 10px 0 0;
  font-size: 17px;
  line-height: 1.5;
  color: color-mix(in srgb, #fff 85%, transparent);
}
@media (min-width: 769px) {
  .fg-card--image {
    /* Ceiling sits above the longest description so no line is clipped;
       the card (440px) has the room. ponytail: raise if copy ever runs
       longer than ~10 lines. */
  }
  .fg-card--image p {
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    transition: max-height 0.45s cubic-bezier(0.23, 1, 0.32, 1), opacity 0.35s ease 0.05s;
  }
  .fg-card--image:hover .fg-image {
    transform: scale(1.05);
  }
  .fg-card--image:hover::after {
    transform: scaleX(1);
  }
  .fg-card--image:hover p {
    max-height: 260px;
    opacity: 1;
  }
}

/* ===========================================================================
   ICON cards — carded stroke-icon tiles with a hover lift.
   =========================================================================== */
.fg-card--icon {
  padding: 36px 28px;
  text-align: center;
  /* Raised white card so it contrasts with the band (the wireframe sits white
     cards on a light tint). --surface is white in PD and the brand surface
     elsewhere, so it stays a "card" on any light band and repaints per brand. */
  background: var(--surface);
  border: 1px solid var(--brand-border);
  border-radius: 14px;
  transition: transform 0.3s cubic-bezier(0.23, 1, 0.32, 1), box-shadow 0.3s ease;
  /* Optional arrow link under the card text. Same treatment as
     .media-text__link so the two read as one component across the site. */
  /* Optional per-card link.

     NOT the .media-text__link treatment. That one is a single-line uppercase
     CTA with a trailing chevron, sized for a wide left-aligned column; at this
     card's ~250px measure the tracking wraps the label into two shouting lines
     and its bordered box stretches into what reads as a divider rule.

     No chevron either. An inline-block SVG is an atomic inline, so the browser
     may always break before it — with editor-written labels of any length that
     leaves the arrow stranded alone on a second line, and a non-breaking space
     cannot prevent it. An underlined link in the accent colour is a complete
     affordance and survives any copy at any width.

     So: an ordinary text link, sentence case, near body size, with real
     text-decoration that follows the wrap instead of boxing it. */
}
@media (hover: hover) and (pointer: fine) {
  .fg-card--icon:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-dropdown);
  }
}
.fg-card--icon .fg-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  margin: 0 auto 24px;
}
.fg-card--icon .fg-icon svg {
  width: 48px;
  height: 48px;
  fill: none;
  /* Sky brand accent so the icon reads distinctly against the dark
     title (the wireframe icons are the sky accent, not ink). */
  stroke: var(--brand-sky);
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.fg-card--icon .fg-title {
  margin: 0 0 12px;
  font-size: 22px;
  font-weight: 700;
  line-height: 1.2;
  color: var(--sec-fg);
}
@media (max-width: 768px) {
  .fg-card--icon .fg-title {
    font-size: 20px;
  }
}
.fg-card--icon p {
  margin: 0;
  font-size: 16px;
  line-height: 1.8;
  color: var(--sec-fg-muted);
}
.fg-card--icon .fg-link-wrap {
  margin: 18px 0 0;
}
.fg-card--icon .fg-link {
  font-size: 15px;
  font-weight: 600;
  line-height: 1.5;
  color: var(--sec-link);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
  text-decoration-color: color-mix(in srgb, var(--sec-link) 40%, transparent);
  transition: color 0.2s ease, text-decoration-color 0.2s ease;
}
.fg-card--icon .fg-link:hover, .fg-card--icon .fg-link:focus-visible {
  color: var(--sec-link-hover);
  text-decoration-color: currentColor;
}

/* ---------------------------------------------------------------------------
   ICON cards on a phone. A paragraph of centred, muted grey text in a narrow
   card was hard to read (PD, Driver-Guide "Surprise and Delight"). On phones
   the copy is left-aligned in the body colour, and the icon steps down to sit
   beside the title so the text starts sooner. Light bands only; the dark-band
   treatment below already reads left-aligned.
   --------------------------------------------------------------------------- */
@media (max-width: 768px) {
  .feature-grid:not(.section--bg-primary) .fg-card--icon {
    display: grid;
    grid-template-columns: 36px 1fr;
    align-items: center;
    column-gap: 14px;
    padding: 24px 22px;
    text-align: left;
  }
  .feature-grid:not(.section--bg-primary) .fg-card--icon > * {
    grid-column: 1/-1;
  }
  .feature-grid:not(.section--bg-primary) .fg-card--icon .fg-icon {
    grid-column: 1;
    width: 36px;
    height: 36px;
    margin: 0;
  }
  .feature-grid:not(.section--bg-primary) .fg-card--icon .fg-icon svg {
    width: 32px;
    height: 32px;
  }
  .feature-grid:not(.section--bg-primary) .fg-card--icon .fg-title {
    grid-column: 2;
    margin: 0;
  }
  .feature-grid:not(.section--bg-primary) .fg-card--icon p {
    margin-top: 12px;
    line-height: 1.7;
    color: var(--sec-fg);
  }
}
/* ---------------------------------------------------------------------------
   ICON tiles on a dark band (the Fleet page's "Comfort at Every Seat").

   The card chrome above is hard-wired to the light treatment (--surface on
   --brand-border) while the text uses --sec-fg, which on a primary band is
   light — a white card with near-white text. On dark the wireframe drops the
   card entirely: no fill, no border, left-aligned, and the icon sits in a
   tinted rounded square. That is both the wireframe treatment and the fix.
   --------------------------------------------------------------------------- */
.feature-grid.section--bg-primary .fg-card--icon {
  padding: 0;
  text-align: left;
  background: none;
  border: 0;
  border-radius: 0;
}
@media (hover: hover) and (pointer: fine) {
  .feature-grid.section--bg-primary .fg-card--icon:hover {
    transform: none;
    box-shadow: none;
  }
}
.feature-grid.section--bg-primary .fg-card--icon .fg-icon {
  width: 56px;
  height: 56px;
  margin: 0 0 16px;
  background: var(--sec-tint);
  border: 1px solid var(--sec-border);
  border-radius: 12px;
}
.feature-grid.section--bg-primary .fg-card--icon .fg-icon svg {
  width: 28px;
  height: 28px;
  stroke: var(--sec-accent);
}
.feature-grid.section--bg-primary .fg-card--icon .fg-title {
  font-size: 20px;
}

/* The dark band breathes more than the carded light one. */
.feature-grid.section--bg-primary .fg-grid {
  gap: 40px 48px;
}
@media (max-width: 992px) {
  .feature-grid.section--bg-primary .fg-grid {
    gap: 32px 36px;
  }
}
@media (max-width: 768px) {
  .feature-grid.section--bg-primary .fg-grid {
    gap: 28px 32px;
  }
}

/* ===========================================================================
   NUMBER steps — oversized numeral + title + text (the "typical day" steps).
   =========================================================================== */
.fg-card--number {
  text-align: center;
  padding: 0 12px;
}
.fg-card--number .fg-number {
  display: block;
  font-family: var(--font-display);
  font-size: 64px;
  font-weight: 400;
  line-height: 1;
  color: var(--sec-accent);
}
.fg-card--number h3 {
  margin: 14px 0 8px;
  font-size: 20px;
  font-weight: 700;
  line-height: 1.2;
  color: var(--sec-fg);
}
.fg-card--number p {
  margin: 0;
  font-size: 16px;
  line-height: 1.5;
  color: var(--sec-fg-muted);
}

/* ===========================================================================
   TIMELINE — horizontal track of icon dots on a connecting line, each with a
   label + title + text below (the Driver-Guide "A Typical Day" steps).
   =========================================================================== */
.fg-timeline {
  display: flex;
  position: relative;
  max-width: 1000px;
  margin: 0 auto;
  /* The connecting line behind the dots (sky -> deep gradient). Inset so it
     runs between the first and last dot centres, not off the edges. */
}
.fg-timeline::before {
  content: "";
  position: absolute;
  top: 36px;
  left: 60px;
  right: 60px;
  height: 3px;
  background: linear-gradient(90deg, var(--brand-sky), var(--brand-deep));
  border-radius: 2px;
}
@media (max-width: 768px) {
  .fg-timeline {
    flex-direction: column;
    max-width: 420px;
    gap: 32px;
    /* Vertical line down the left through the dot centres. */
  }
  .fg-timeline::before {
    top: 0;
    bottom: 0;
    left: 36px;
    right: auto;
    width: 3px;
    height: auto;
    background: linear-gradient(180deg, var(--brand-sky), var(--brand-deep));
  }
}

.fg-step {
  flex: 1;
  text-align: center;
  position: relative;
  padding: 0 12px;
  /* Vertical layout: dot to the left, text to the right. */
}
.fg-step .fg-dot {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 72px;
  height: 72px;
  margin: 0 auto 20px;
  border-radius: 50%;
  background: var(--surface);
  border: 3px solid var(--brand-sky);
  position: relative;
  z-index: 2;
  transition: border-color 0.3s ease;
}
.fg-step .fg-dot svg {
  width: 32px;
  height: 32px;
  fill: none;
  stroke: var(--brand-sky);
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: stroke 0.3s ease;
}
@media (hover: hover) and (pointer: fine) {
  .fg-step:hover .fg-dot {
    border-color: var(--brand-deep);
  }
  .fg-step:hover .fg-dot svg {
    stroke: var(--brand-deep);
  }
}
.fg-step .fg-step-label {
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  color: var(--brand-sky-text);
  margin-bottom: 8px;
}
.fg-step h3 {
  font-size: 18px;
  font-weight: 700;
  color: var(--sec-fg);
  margin: 0 0 8px;
  line-height: 1.2;
}
.fg-step p {
  font-size: 16px;
  line-height: 1.5;
  color: var(--sec-fg-muted);
  max-width: 220px;
  margin: 0 auto;
}
@media (max-width: 768px) {
  .fg-step {
    display: flex;
    align-items: flex-start;
    gap: 20px;
    text-align: left;
    padding: 0;
  }
  .fg-step .fg-dot {
    margin: 0;
    flex: 0 0 auto;
    width: 72px;
    height: 72px;
  }
  .fg-step p {
    max-width: none;
    margin: 0;
  }
}

/* ===========================================================================
   BADGE items — circular icon container + name + description (accreditations).
   =========================================================================== */
.fg-card--badge {
  flex: 0 1 180px;
  max-width: 180px;
  text-align: center;
}
.fg-card--badge .fg-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 80px;
  height: 80px;
  margin: 0 auto 14px;
  background: var(--sec-tint);
  border: 1px solid var(--sec-border);
  border-radius: 50%;
}
.fg-card--badge .fg-icon svg {
  width: 36px;
  height: 36px;
  fill: none;
  stroke: var(--sec-accent);
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.fg-card--badge .fg-name {
  margin-bottom: 4px;
  font-size: 14px;
  font-weight: 700;
  color: var(--sec-fg);
}
.fg-card--badge .fg-desc {
  font-size: 12px;
  line-height: 1.5;
  color: var(--sec-fg-muted);
}

/*
    Section · Lead Capture — the reusable two-column "let us help you" band.

    Faithful port of the PD wireframe .lead-capture block: a feathered image on
    the left, content (kicker + heading + body + up to two CTAs + reassurance)
    on the right, min-height 420px, image bleeding to the band edges. Buttons
    reuse the shared .btn/.btn-primary/.btn-outline classes — never re-styled
    here, so they stay brand-tokenised. All colour comes from the section scheme
    tokens (--sec-*), set by the chosen background in _section-surfaces.scss, so
    the block re-skins per brand and the image feather blends into the band.

    Scroll-reveal: .ltt-reveal is armed + animated globally (see _tour-collection
    .scss + custom.js); reduced-motion safe.
*/
.lead-capture.section {
  padding: 0;
}
.lead-capture .container {
  padding-top: 0;
  padding-bottom: 0;
}
.lead-capture .lead-capture__layout {
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  min-height: 420px;
}
@media (max-width: 992px) {
  .lead-capture .lead-capture__layout {
    grid-template-columns: 1fr;
  }
}
.lead-capture .lead-capture__layout:not(:has(.lead-capture__media)) {
  grid-template-columns: 1fr;
}
.lead-capture .lead-capture__layout:not(:has(.lead-capture__media)) .lead-capture__text {
  max-width: 720px;
  margin: 0 auto;
  padding-left: 56px;
  text-align: center;
}
.lead-capture .lead-capture__layout:not(:has(.lead-capture__media)) .lead-capture__ctas {
  justify-content: center;
}

.lead-capture__media {
  position: relative;
  overflow: hidden;
  background: var(--sec-tint);
}
@media (max-width: 992px) {
  .lead-capture__media {
    min-height: 260px;
  }
}
.lead-capture__media::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(to right, transparent 50%, var(--sec-bg) 100%), linear-gradient(to bottom, var(--sec-bg) 0%, transparent 15%), linear-gradient(to top, var(--sec-bg) 0%, transparent 15%), linear-gradient(to left, transparent 85%, var(--sec-bg) 100%);
}
@media (max-width: 992px) {
  .lead-capture__media::after {
    background: linear-gradient(to top, var(--sec-bg) 0%, transparent 30%);
  }
}

.lead-capture__image {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  transition: transform 0.5s ease;
}
.lead-capture:hover .lead-capture__image {
  transform: scale(1.03);
}

.lead-capture__text {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 56px 56px 56px 40px;
}
@media (max-width: 992px) {
  .lead-capture__text {
    padding: 32px 24px;
  }
}

.lead-capture__kicker {
  margin: 0 0 8px;
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 2.5px;
  color: var(--sec-accent);
}

.lead-capture__heading {
  margin: 0 0 8px;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 36px;
  line-height: 1.2;
  color: var(--sec-fg);
}
@media (max-width: 576px) {
  .lead-capture__heading {
    font-size: 30px;
  }
}

.lead-capture__body {
  margin: 0 0 32px;
  font-size: 18px;
  line-height: 1.8;
  color: var(--sec-fg-muted);
}
@media (max-width: 992px) {
  .lead-capture__body {
    font-size: 16px;
  }
}

.lead-capture__ctas {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}
.lead-capture__ctas .btn {
  transition: background-position 0.4s ease, transform 0.16s cubic-bezier(0.23, 1, 0.32, 1), box-shadow 0.2s ease, background 0.2s ease, color 0.2s ease;
}
.lead-capture__ctas .btn:active {
  transform: scale(0.97);
}
@media (max-width: 576px) {
  .lead-capture__ctas {
    flex-direction: column;
    align-items: stretch;
  }
  .lead-capture__ctas .btn {
    width: 100%;
  }
}

.lead-capture__reassurance {
  margin: 24px 0 0;
  font-size: 14px;
  font-style: italic;
  line-height: 1.5;
  color: var(--sec-fg-muted);
}

/*
    Section · Lead CTA — the reusable centred call-to-action band.

    Faithful port of the PD wireframe CTA bands (.dg-cta-inner / .lead-inner): a
    centred heading + subline + up to two buttons + a small reassurance line.
    Buttons reuse the shared .btn/.btn-primary/.btn-outline classes — never
    re-styled here, so they stay brand-tokenised (incl. the lime CTA gradient).
    All colour comes from the section scheme tokens (--sec-*), set by the chosen
    background in _section-surfaces.scss, so the block re-skins per brand and
    stays legible on white / off-white / primary / secondary.

    Scroll-reveal: .ltt-reveal is armed + animated globally (see _tour-collection
    .scss + custom.js); reduced-motion safe (JS never arms anything).
*/
.lead-cta {
  text-align: center;
}
.lead-cta .lead-cta-inner {
  max-width: 760px;
  margin: 0 auto;
}
.lead-cta .lead-cta-title {
  margin: 0 0 16px;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 44px;
  line-height: 1.2;
  color: var(--sec-fg);
}
@media (max-width: 992px) {
  .lead-cta .lead-cta-title {
    font-size: 34px;
  }
}
@media (max-width: 576px) {
  .lead-cta .lead-cta-title {
    font-size: 30px;
  }
}
.lead-cta .lead-cta-sub {
  margin: 0 auto 32px;
  max-width: 56ch;
  font-size: 18px;
  line-height: 1.8;
  color: var(--sec-fg-muted);
}
@media (max-width: 992px) {
  .lead-cta .lead-cta-sub {
    font-size: 16px;
  }
}
.lead-cta .lead-cta-buttons {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 16px;
}
.lead-cta .lead-cta-buttons .btn {
  transition: background-position 0.4s ease, transform 0.16s cubic-bezier(0.23, 1, 0.32, 1), box-shadow 0.2s ease, background 0.2s ease, color 0.2s ease;
}
.lead-cta .lead-cta-buttons .btn:active {
  transform: scale(0.97);
}
@media (max-width: 576px) {
  .lead-cta .lead-cta-buttons {
    flex-direction: column;
    align-items: stretch;
  }
  .lead-cta .lead-cta-buttons .btn {
    width: 100%;
  }
}
.lead-cta .lead-cta-reassurance {
  margin: 24px 0 0;
  font-size: 14px;
  line-height: 1.5;
  color: var(--sec-fg-muted);
}

/*
    Section · Media + Text — the reusable two-column text/image block.

    One block, four wireframe treatments: the "Our Story" / driver-guide
    philosophy intros (.origin-layout / .dg-philosophy-grid), the alternating
    "What Makes Us Different" rows (.diff-row, image_side flips order), and the
    dark "Join Our Team / Careers" band (.join-layout) — the last achieved purely
    by choosing the `primary` background, no special markup.

    Structural values match the wireframe 1:1; every colour comes from the
    editor-selected band via the --sec-* scheme tokens (_section-surfaces.scss),
    so the block repaints across white / off-white / primary / secondary and
    every brand, and stays legible on each (CI: lint-tokens).

    The heading face tracks the chosen heading tag: H2 renders in the brand
    script display face (the "A Family Passion" / "Half the Tour" treatment); H3
    and below render in the bold sans face (the "We Own Our Coaches" treatment).
    So a page of alternating rows reads exactly like the wireframe with no extra
    control.
*/
.media-text {
  /* image_side controls which column the media sits in. Default = right. */
}
.media-text .media-text__layout {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 56px;
  align-items: center;
}
.media-text.media-text--image-left .media-text__media {
  order: -1;
}

/* ---- Text column ---- */
.media-text__kicker {
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 2.5px;
  color: var(--sec-accent);
  margin: 0 0 14px;
}

.media-text__heading {
  margin: 0 0 20px;
  color: var(--sec-fg);
  /* H2 → script display face (origin / philosophy intros). */
  /* H3–H6 → bold sans face (the alternating diff-rows / Careers heading). */
}
.media-text__heading:is(h2) {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 44px;
  /* Playlist is a script face with long descenders; at line-height 1 a
     two-line heading clips its own tails against the line below. */
  line-height: 1.15;
}
.media-text__heading:is(h3, h4, h5, h6) {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 26px;
  line-height: 1.2;
}

.media-text__body {
  /* Primary, not muted. This block carries three paragraphs of the page's
     real body copy — the origin and philosophy intros — and rendering it in
     the caption grey made the section's main text read as an aside. The
     wireframe sets it in --text-primary at 17px/1.75. Also raises contrast,
     since --sec-fg-muted is the lowest-contrast text token on a light band. */
  color: var(--sec-fg);
  /* The wireframe "highlight-quote" — a blockquote in the WYSIWYG renders as
     an accented pull-quote (driver-guide philosophy). */
}
.media-text__body p {
  font-size: 17px;
  line-height: 1.75;
  margin: 0 0 16px;
}
.media-text__body p:last-child {
  margin-bottom: 0;
}
.media-text__body blockquote {
  margin: 24px 0;
  padding-left: 20px;
  border-left: 3px solid var(--sec-accent);
  font-size: 20px;
  font-style: italic;
  line-height: 1.6;
  color: var(--sec-fg);
}
.media-text__body a {
  color: var(--sec-link);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.media-text__body a:hover {
  color: var(--sec-link-hover);
}
.media-text__body :last-child {
  margin-bottom: 0;
}

/* ---- Benefits checklist (Careers) ---- */
.media-text__bullets {
  list-style: none;
  padding: 0;
  margin: 28px 0 0;
}
.media-text__bullets li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 6px 0;
  font-size: 17px;
  line-height: 1.6;
  color: var(--sec-fg);
}

.media-text__check {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  margin-top: 5px;
  fill: none;
  stroke: var(--sec-accent);
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ---- Link / button ---- */
.media-text__links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  column-gap: 28px;
}

.media-text__link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 28px;
  font-size: 13px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  text-decoration: none;
  color: var(--sec-link);
  border-bottom: 1px solid color-mix(in srgb, var(--sec-link) 45%, transparent);
  padding-bottom: 2px;
  transition: color 0.2s ease, border-color 0.2s ease;
}
.media-text__link .media-text__arrow {
  width: 14px;
  height: 14px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform 0.2s cubic-bezier(0.23, 1, 0.32, 1);
}
.media-text__link:hover {
  color: var(--sec-link-hover);
  border-color: var(--sec-link-hover);
}
.media-text__link:hover .media-text__arrow {
  transform: translateX(3px);
}

/* On a primary band the link becomes the Careers pill button — a filled,
   tinted call to action that reads as a button on the dark ground. */
.media-text.section--bg-primary .media-text__link {
  border-bottom: 0;
  padding: 14px 32px;
  border-radius: 50px;
  background: var(--gradient-button);
  color: var(--gradient-button-fg);
  letter-spacing: 1px;
  box-shadow: var(--shadow-cta);
  transition: transform 0.2s cubic-bezier(0.23, 1, 0.32, 1), box-shadow 0.2s ease;
}
.media-text.section--bg-primary .media-text__link .media-text__arrow {
  stroke: currentColor;
}
.media-text.section--bg-primary .media-text__link:hover {
  color: var(--gradient-button-fg);
  transform: translateY(-2px);
  box-shadow: var(--shadow-cta-hover);
}
.media-text.section--bg-primary .media-text__link:active {
  transform: scale(0.97);
}

/* Small print under the button (e.g. "Careers are managed through..."). */
.media-text__footnote {
  margin-top: 24px;
  font-size: 14px;
  line-height: 1.5;
  color: var(--sec-fg-muted);
}

/* ---- Media column ---- */
.media-text__media {
  border-radius: 12px;
  overflow: hidden;
  aspect-ratio: 4/3;
}

/* A video sits in the same slot as the image, but at the player's own ratio —
   4/3 would letterbox a 16:9 embed inside the rounded frame. */
.media-text__media--video {
  aspect-ratio: 16/9;
}

.media-text__video {
  width: 100%;
  height: 100%;
}
.media-text__video iframe {
  width: 100%;
  height: 100%;
  display: block;
  border: 0;
}

.media-text__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.6s cubic-bezier(0.23, 1, 0.32, 1);
}

/* Hover-zoom only where a real pointer can hover; never on touch (avoids the
   sticky-hover tap state). */
@media (hover: hover) and (pointer: fine) {
  .media-text__media:hover .media-text__image {
    transform: scale(1.03);
  }
}
/* ---- Responsive ---- */
@media (max-width: 992px) {
  .media-text .media-text__layout {
    gap: 36px;
  }
  .media-text__heading.media-text__heading:is(h2) {
    font-size: 38px;
  }
}
@media (max-width: 768px) {
  .media-text .media-text__layout {
    grid-template-columns: 1fr;
    gap: 32px;
  }
  /* Single column: image leads regardless of image_side (the wireframe puts
     the picture first on mobile for every 2-col block). */
  .media-text .media-text__media,
  .media-text.media-text--image-left .media-text__media {
    order: -1;
  }
  .media-text__heading.media-text__heading:is(h2) {
    font-size: 34px;
  }
  .media-text__heading.media-text__heading:is(h3, h4, h5, h6) {
    font-size: 23px;
  }
}
@media (max-width: 480px) {
  .media-text__heading.media-text__heading:is(h2) {
    font-size: 30px;
  }
  .media-text__heading.media-text__heading:is(h3, h4, h5, h6) {
    font-size: 22px;
  }
  .media-text__body p {
    font-size: 15px;
  }
  .media-text__body blockquote {
    font-size: 18px;
  }
}
/*
    Section · Section Header — a standalone centred intro (script display heading
    + muted supporting line) opening a run of content sections. Port of the PD
    About wireframe ("What Makes Us Different"). Builds on the global .s-head
    (centring + max-width); here we only upsize the heading to the script display
    face and pull both colours from the section scheme tokens (--sec-*) so the
    band repaints per brand and stays legible on white / off-white / primary /
    secondary with no code change.
*/
.section-header .s-head {
  max-width: 760px;
  margin-bottom: 0;
}
.section-header .s-head :is(h2, h3, h4, h5, h6) {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 44px;
  line-height: 1.2;
  color: var(--sec-fg);
  margin: 0;
}
@media (max-width: 768px) {
  .section-header .s-head :is(h2, h3, h4, h5, h6) {
    font-size: 34px;
  }
}
.section-header .s-head p {
  margin: 12px 0 0;
  font-size: 18px;
  line-height: 1.5;
  color: var(--sec-fg-muted);
}

/*
    Section · Stats — the "By the Numbers" stat band. A full-width row of large
    numbers above small uppercase labels, separated by thin vertical hairlines
    (none after the last item). Faithful port of the PD About wireframe
    (.stats-*); structural values match 1:1. Every colour comes from the section
    scheme tokens (--sec-*), set by the editor-chosen background in
    _section-surfaces.scss, so the band repaints per brand and stays legible on
    white / off-white / primary / secondary with zero code change.

    Default background is Primary (dark) — set in s-stats.php via
    ltt_section_bg_class(…, 'primary'). The .ltt-reveal entrance (fade + rise,
    staggered by --reveal-index) is shared from _tour-collection.scss; here we
    only lay out the band. Responsive: 4-across → 2×2 below 992px → 1 below 768px.
*/
.stats .s-head {
  text-align: center;
  margin-bottom: 48px;
}
.stats .s-head :is(h2, h3, h4, h5, h6) {
  color: var(--sec-fg);
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 44px;
  line-height: 1.2;
  margin: 0;
}
@media (max-width: 768px) {
  .stats .s-head :is(h2, h3, h4, h5, h6) {
    font-size: 34px;
  }
}
.stats .s-head p {
  margin-top: 8px;
  color: var(--sec-fg-muted);
  text-transform: uppercase;
  letter-spacing: 2px;
  font-weight: 500;
  font-size: 14px;
}

.stats-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
}
@media (max-width: 992px) {
  .stats-row {
    grid-template-columns: repeat(2, 1fr);
    row-gap: 32px;
  }
}
@media (max-width: 768px) {
  .stats-row {
    grid-template-columns: 1fr;
    row-gap: 24px;
  }
}

.stat-item {
  text-align: center;
  padding: 24px 20px;
  position: relative;
}
.stat-item:not(:last-child)::after {
  content: "";
  position: absolute;
  right: 0;
  top: 20%;
  height: 60%;
  width: 1px;
  background: var(--sec-border);
}
.stat-item:nth-child(4n)::after {
  display: none;
}
@media (max-width: 992px) {
  .stat-item {
    padding: 20px 16px;
  }
  .stat-item:nth-child(even)::after {
    display: none;
  }
}
@media (max-width: 768px) {
  .stat-item::after {
    display: none;
  }
}

.stat-number {
  font-size: 48px;
  font-weight: 800;
  color: var(--sec-fg);
  font-family: var(--font-body);
  line-height: 1.2;
  margin-bottom: 8px;
}
@media (max-width: 992px) {
  .stat-number {
    font-size: 38px;
  }
}
@media (max-width: 768px) {
  .stat-number {
    font-size: 32px;
  }
}

.stat-label {
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: 2px;
  color: var(--sec-fg-muted);
  font-weight: 600;
}
@media (max-width: 768px) {
  .stat-label {
    font-size: 11px;
    letter-spacing: 1.5px;
  }
}

/*
    Section · Team Cards — staff & driver-guides from the Team Member CPT.
    Faithful port of the PD wireframe `.team-card` / `.guide-card`: a photo card
    (~280px image, rounded, hover image zoom) with the name, an uppercase accent
    role label and a short bio; the card lifts on hover. One block serves both the
    3-col "Office Team" and 4-col "Driver-Guides" grids via the columns control.

    All colour comes from the section scheme tokens (--sec-*), set by the chosen
    background in _section-surfaces.scss — so the block stays legible and on-brand
    on white / off-white / primary / secondary. The .ltt-reveal entrance keyframes
    are defined once in _tour-collection.scss; the cards just opt in.
*/
.team-cards .s-head {
  text-align: center;
  margin-bottom: 48px;
}
.team-cards .s-head :is(h2, h3, h4, h5, h6) {
  color: var(--sec-fg);
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 42px;
  margin: 0 0 12px;
}
@media (max-width: 768px) {
  .team-cards .s-head :is(h2, h3, h4, h5, h6) {
    font-size: 34px;
  }
}
.team-cards .s-head .s-intro {
  max-width: 660px;
  margin: 0 auto;
  color: var(--sec-fg-muted);
  font-size: 16px;
  line-height: 1.5;
}
.team-cards .s-head .s-intro a {
  color: var(--sec-link);
  text-decoration: none;
  font-weight: 600;
  transition: color 0.2s ease;
}
.team-cards .s-head .s-intro a:hover {
  color: var(--sec-link-hover);
}

.team-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}
.team-cards--cols-4 .team-grid {
  grid-template-columns: repeat(4, 1fr);
}
@media (max-width: 992px) {
  .team-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .team-cards--cols-4 .team-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 768px) {
  .team-grid {
    grid-template-columns: 1fr;
  }
  .team-cards--cols-4 .team-grid {
    grid-template-columns: 1fr;
  }
}

.team-card {
  background: var(--sec-bg);
  border: 1px solid var(--sec-border);
  border-radius: 14px;
  overflow: hidden;
  transition: box-shadow 0.3s ease, transform 0.3s ease;
}
@media (hover: hover) and (pointer: fine) {
  .team-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-dropdown);
  }
  .team-card:hover .team-card-img img {
    transform: scale(1.04);
  }
}

.team-card-img {
  width: 100%;
  height: 280px;
  overflow: hidden;
  background: var(--sec-tint);
}
.team-card-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.5s ease;
}

.team-card-body {
  padding: 22px 24px 26px;
}
.team-card-body .name {
  font-size: 18px;
  font-weight: 700;
  font-family: var(--font-body);
  color: var(--sec-fg);
  margin: 0 0 4px;
}
.team-card-body .role {
  margin-bottom: 10px;
  font-size: 14px;
  font-weight: 600;
  color: var(--sec-accent);
  text-transform: uppercase;
  letter-spacing: 1px;
}
.team-card-body .bio {
  margin: 0;
  font-size: 15px;
  line-height: 1.5;
  color: var(--sec-fg-muted);
}

.team-cards__footer {
  margin-top: 48px;
  text-align: center;
}
.team-cards__footer a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 16px;
  font-weight: 700;
  text-decoration: none;
  color: var(--sec-link);
  transition: color 0.2s ease;
}
.team-cards__footer a svg {
  width: 18px;
  height: 18px;
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
  transition: transform 0.2s ease;
}
.team-cards__footer a:hover {
  color: var(--sec-link-hover);
}
.team-cards__footer a:hover svg {
  transform: translateX(4px);
}

@media (prefers-reduced-motion: reduce) {
  .team-card,
  .team-card-img img,
  .team-cards__footer a svg {
    transition: none;
  }
  .team-card:hover {
    transform: none;
  }
  .team-card:hover .team-card-img img {
    transform: none;
  }
  .team-cards__footer a:hover svg {
    transform: none;
  }
}
/*
    Section · Tour Collection — faithful port of the PD wireframe layouts
    (shared.css): the "Our Tours" slider, the card grid, and the "Choose Your
    Journey" timeline. Structural values match the wireframe 1:1; brand colours
    map to tokens (CI: lint-tokens) so PD is pixel-identical and brands repaint.
*/
/* Scroll-reveal entrance: off-screen cards / timeline rows fade + rise into
   view, staggered by --reveal-index. JS (custom.js) arms only below-the-fold
   elements with .reveal-armed and adds .is-in via IntersectionObserver, then
   strips both classes on animationend so later interactive states (row dim /
   filter) aren't pinned by the animation's fill. No-JS or reduced-motion: the
   JS never arms anything, so content just shows. transform + opacity only. */
.ltt-reveal.reveal-armed {
  opacity: 0;
}

.ltt-reveal.is-in {
  animation: ltt-reveal-in 0.5s cubic-bezier(0.23, 1, 0.32, 1) both;
  animation-delay: calc(var(--reveal-index, 0) * 55ms);
}

@keyframes ltt-reveal-in {
  from {
    opacity: 0;
    transform: translateY(16px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
.tour-collection .s-head {
  text-align: center;
  margin-bottom: 16px;
}
.tour-collection .s-head :is(h2, h3, h4, h5, h6) {
  font-size: 44px;
  color: var(--brand-deep);
  font-weight: 400;
  font-family: var(--font-display);
  margin: 0;
}
.tour-collection .s-head p {
  font-size: 18px;
  color: var(--text-muted);
  margin-top: 12px;
  letter-spacing: 0.2px;
  font-weight: 400;
}

/* ---- Card grid (listing) ---- */
.tour-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-top: 32px;
}
.tour-grid .pd-card {
  flex: none;
  width: 100%;
}
@media (max-width: 992px) {
  .tour-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
  }
}
@media (max-width: 768px) {
  .tour-grid {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 480px) {
  .tour-grid {
    gap: 16px;
  }
}

/* ---- Card slider (Our Tours) ---- */
.tour-slider-wrap {
  position: relative;
  margin-top: 32px;
}

.tour-slider {
  display: flex;
  gap: 28px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding: 4px 0 20px;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.tour-slider::-webkit-scrollbar {
  display: none;
}
@media (max-width: 768px) {
  .tour-slider .pd-card {
    flex-basis: 85%;
  }
}

.slider-nav {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 16px;
  margin-top: 24px;
}

.slider-btn {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid color-mix(in srgb, var(--brand-border) 60%, var(--surface));
  background: var(--surface);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  color: var(--brand-sky);
  cursor: pointer;
  transition: background 0.2s, border-color 0.2s, color 0.2s, transform 0.16s cubic-bezier(0.23, 1, 0.32, 1);
}
.slider-btn:hover {
  background: var(--surface-tint);
  border-color: var(--brand-sky);
  color: var(--brand-deep);
}
.slider-btn:active {
  transform: scale(0.92);
}

.slider-count {
  font-size: 16px;
  color: var(--text-muted);
  font-weight: 500;
  letter-spacing: 0.5px;
}

/* ---- "Choose Your Journey" timeline ---- */
.cj-filters {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-bottom: 48px;
  flex-wrap: wrap;
}

.cj-filter-group {
  display: flex;
  background: var(--surface);
  border: 1.5px solid var(--brand-border);
  border-radius: 50px;
  padding: 4px;
  gap: 2px;
}
.cj-filter-group .group-label {
  display: flex;
  align-items: center;
  padding: 0 14px 0 16px;
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1.2px;
  color: var(--brand-sky-text);
  border-right: 1px solid var(--brand-border);
  margin-right: 4px;
}

.cj-tab {
  padding: 9px 20px;
  border-radius: 50px;
  font-size: 14px;
  font-weight: 600;
  color: var(--text-muted);
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease, box-shadow 0.2s ease, transform 0.16s cubic-bezier(0.23, 1, 0.32, 1);
  white-space: nowrap;
  border: none;
  background: transparent;
  text-transform: none;
  letter-spacing: normal;
}
.cj-tab:hover {
  color: var(--brand-deep);
  background: var(--surface-tint);
}
.cj-tab:active {
  transform: scale(0.96);
}
.cj-tab.active {
  background: var(--gradient-button);
  color: var(--gradient-button-fg);
  box-shadow: 0 2px 10px color-mix(in srgb, var(--brand-deep) 20%, transparent);
}

.cj-legend {
  display: flex;
  justify-content: center;
  gap: 28px;
  margin-bottom: 36px;
  flex-wrap: wrap;
}

.cj-legend-item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--text-muted);
  font-weight: 500;
}

.cj-legend-swatch {
  width: 28px;
  height: 10px;
  border-radius: 3px;
}
.cj-legend-swatch.north {
  background: linear-gradient(90deg, var(--brand-sky), color-mix(in srgb, var(--brand-sky) 78%, var(--brand-deep)));
}
.cj-legend-swatch.south {
  background: linear-gradient(90deg, var(--brand-deep), color-mix(in srgb, var(--brand-deep) 82%, var(--brand-sky)));
}
.cj-legend-swatch.both {
  background: linear-gradient(90deg, var(--brand-sky), var(--brand-deep));
}

.cj-layout {
  display: grid;
  grid-template-columns: 1fr 380px;
  gap: 32px;
  align-items: start;
}
@media (max-width: 992px) {
  .cj-layout {
    grid-template-columns: 1fr;
  }
}

.cj-timeline {
  background: var(--surface);
  border: 1.5px solid var(--brand-border);
  border-radius: 16px;
  padding: 32px 36px 28px;
  margin-bottom: 40px;
  position: relative;
}

.cj-timeline-header {
  display: grid;
  grid-template-columns: 180px 1fr;
  gap: 0;
  margin-bottom: 20px;
}

.cj-tl-label-col {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1.2px;
  color: var(--brand-sky-text);
  display: flex;
  align-items: flex-end;
  padding-bottom: 4px;
}

.cj-tl-axis {
  position: relative;
  border-bottom: 1.5px solid var(--brand-border);
}

/* Ticks sit at (day / longest) along the axis, the same scale the bars use,
   so a bar ends exactly under its day count. Each label centres on its tick
   mark; the last one (the longest tour) right-aligns so it stays inside. */
.cj-tl-axis-ticks {
  position: relative;
  height: 26px;
}
.cj-tl-axis-ticks span {
  position: absolute;
  bottom: 0;
  transform: translateX(-50%);
  padding-bottom: 8px;
  font-size: 11px;
  color: var(--text-subtle);
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
}
.cj-tl-axis-ticks span::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 1.5px;
  height: 5px;
  background: var(--brand-border);
}
.cj-tl-axis-ticks span:last-child {
  transform: translateX(-100%);
}
.cj-tl-axis-ticks span:last-child::after {
  left: auto;
  right: 0;
}

.cj-row-group {
  margin-bottom: 8px;
}
.cj-row-group.all-hidden {
  display: none;
}

.cj-row-group-label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  color: var(--brand-sky-text);
  padding: 14px 0 8px;
  border-top: 1px dashed var(--brand-border);
  margin-top: 4px;
}

.cj-row-group:first-child .cj-row-group-label {
  border-top: none;
  padding-top: 4px;
}

.cj-tour-row {
  display: grid;
  grid-template-columns: 180px 1fr;
  gap: 0;
  align-items: center;
  padding: 5px 0;
  cursor: pointer;
  border-radius: 8px;
  transition: background 0.15s;
}
.cj-tour-row:hover {
  background: color-mix(in srgb, var(--brand-sky) 8%, var(--surface));
}
.cj-tour-row.hidden {
  display: none;
}
.cj-tour-row.dimmed {
  opacity: 0.25;
  transition: opacity 0.2s, background 0.15s;
}
.cj-tour-row.highlighted {
  opacity: 1;
}

.cj-tour-name {
  font-size: 15px;
  font-weight: 600;
  color: var(--brand-deep);
  padding: 0 16px 0 8px;
  line-height: 1.3;
}
.cj-tour-name .cj-days-pill {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  color: var(--brand-sky-text);
  background: var(--surface-tint);
  border: 1px solid var(--brand-border);
  border-radius: 50px;
  padding: 2px 8px;
  margin-left: 6px;
  vertical-align: middle;
  white-space: nowrap;
}

.cj-bar-track {
  position: relative;
  height: 36px;
  display: flex;
  align-items: center;
}

.cj-bar {
  position: absolute;
  height: 28px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  padding: 0 12px;
  font-size: 12px;
  font-weight: 700;
  color: #fff;
  letter-spacing: 0.3px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
  transition: filter 0.2s, transform 0.15s, box-shadow 0.2s;
  cursor: pointer;
}
.cj-bar.north {
  background: linear-gradient(90deg, var(--brand-sky), color-mix(in srgb, var(--brand-sky) 78%, var(--brand-deep)));
}
.cj-bar.south {
  background: linear-gradient(90deg, var(--brand-deep), color-mix(in srgb, var(--brand-deep) 82%, var(--brand-sky)));
}
.cj-bar.both {
  background: linear-gradient(90deg, var(--brand-sky) 0%, color-mix(in srgb, var(--brand-sky) 78%, var(--brand-deep)) 40%, var(--brand-deep) 100%);
}

.cj-bar:hover,
.cj-tour-row:hover .cj-bar {
  filter: brightness(1.08);
  transform: scaleY(1.12);
  box-shadow: 0 4px 16px color-mix(in srgb, var(--brand-deep) 25%, transparent);
}

/* Detail panel (fills on click) */
.cj-detail-panel {
  background: var(--surface);
  border: 1.5px solid var(--brand-border);
  border-radius: 16px;
  padding: 0;
  display: flex;
  flex-direction: column;
  min-height: 120px;
  transition: opacity 0.2s ease;
  position: sticky;
  top: 100px;
  overflow: hidden;
}
.cj-detail-panel.empty {
  padding: 28px;
  align-items: center;
  justify-content: center;
  color: var(--text-subtle);
  font-size: 15px;
  font-style: italic;
  text-align: center;
}
.cj-detail-panel .cj-detail-img {
  width: 100%;
  height: 180px;
  background-size: cover;
  background-position: center;
  flex-shrink: 0;
}
.cj-detail-panel .cj-detail-btn {
  margin-top: 16px;
  display: block;
  width: 100%;
  text-align: center;
  padding: 13px 20px;
  background: var(--gradient-button);
  color: var(--gradient-button-fg);
  border: none;
  border-radius: 50px;
  font-size: 14px;
  font-weight: 800;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  box-shadow: 0 2px 10px color-mix(in srgb, var(--brand-deep) 20%, transparent), inset 0 1px 0 color-mix(in srgb, var(--brand-glass) 30%, transparent);
  transition: box-shadow 0.3s, transform 0.16s cubic-bezier(0.23, 1, 0.32, 1);
}
.cj-detail-panel .cj-detail-btn:hover {
  box-shadow: 0 4px 16px color-mix(in srgb, var(--brand-deep) 30%, transparent);
  transform: translateY(-1px);
  color: var(--gradient-button-fg);
}
.cj-detail-panel .cj-detail-btn:active {
  transform: scale(0.97);
}

.cj-detail-left {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 20px 24px 24px;
}

.cj-detail-name {
  font-family: var(--font-body);
  font-size: 30px;
  font-weight: 400;
  color: var(--brand-deep);
  line-height: 1.1;
}

.cj-detail-tree {
  font-size: 13px;
  color: var(--brand-sky-text);
  font-style: italic;
  letter-spacing: 0.2px;
}

.cj-detail-meta {
  display: flex;
  gap: 16px;
  margin-top: 4px;
  flex-wrap: wrap;
}

.cj-detail-meta-item {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  color: color-mix(in srgb, var(--brand-deep) 55%, var(--text-muted));
  font-weight: 500;
}
.cj-detail-meta-item svg {
  width: 16px;
  height: 16px;
  stroke: var(--brand-sky);
  fill: none;
  stroke-width: 2;
  flex-shrink: 0;
}

.cj-detail-desc {
  font-size: 15px;
  color: var(--text-muted);
  line-height: 1.65;
}

.cj-island-badge {
  display: inline-block;
  padding: 5px 14px;
  border-radius: 50px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}
.cj-island-badge.north {
  background: color-mix(in srgb, var(--brand-sky) 22%, var(--surface));
  color: var(--brand-deep);
}
.cj-island-badge.south {
  background: color-mix(in srgb, var(--brand-sky) 30%, var(--surface));
  color: color-mix(in srgb, var(--brand-deep) 88%, #000);
}
.cj-island-badge.both {
  background: linear-gradient(90deg, color-mix(in srgb, var(--brand-sky) 22%, var(--surface)), color-mix(in srgb, var(--brand-sky) 30%, var(--surface)));
  color: color-mix(in srgb, var(--brand-deep) 88%, #000);
}

/* CTA strip */
.cj-cta-strip {
  text-align: center;
  padding-top: 40px;
  border-top: 1px solid var(--brand-border);
  margin-top: 8px;
}
.cj-cta-strip p {
  font-size: 17px;
  color: color-mix(in srgb, var(--brand-deep) 55%, var(--text-muted));
  margin-bottom: 20px;
  line-height: 1.55;
}
.cj-cta-strip p strong {
  color: var(--brand-deep);
}

.cj-cta-actions {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}

.cj-cta-primary {
  padding: 15px 34px;
  background: var(--gradient-button);
  color: var(--gradient-button-fg);
  border-radius: 50px;
  font-size: 15px;
  font-weight: 800;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  border: none;
  box-shadow: 0 3px 16px color-mix(in srgb, var(--brand-deep) 25%, transparent), inset 0 1px 0 color-mix(in srgb, var(--brand-glass) 30%, transparent);
  transition: box-shadow 0.25s ease, transform 0.16s cubic-bezier(0.23, 1, 0.32, 1);
}
.cj-cta-primary:hover {
  box-shadow: 0 6px 24px color-mix(in srgb, var(--brand-deep) 35%, transparent);
  transform: translateY(-2px);
  color: var(--gradient-button-fg);
}
.cj-cta-primary:active {
  transform: scale(0.97);
}

/* Outline twin of the primary CTA (was an underlined text link). */
.cj-cta-secondary {
  padding: 13.5px 32.5px;
  font-size: 15px;
  font-weight: 800;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: var(--brand-deep);
  text-decoration: none;
  cursor: pointer;
  background: var(--surface);
  border: 1.5px solid var(--brand-deep);
  border-radius: 50px;
  transition: background 0.2s, color 0.2s, transform 0.16s cubic-bezier(0.23, 1, 0.32, 1);
}
.cj-cta-secondary:hover {
  background: var(--surface-tint);
  color: var(--brand-deep);
  transform: translateY(-2px);
}
.cj-cta-secondary:active {
  transform: scale(0.97);
}

@media (max-width: 768px) {
  .cj-cta-actions {
    flex-direction: column;
    gap: 10px;
    width: 100%;
  }
  .cj-cta-primary,
  .cj-cta-secondary {
    width: 100%;
    min-height: 48px;
  }
  .cj-cta-primary,
  .cj-cta-secondary {
    display: flex;
    align-items: center;
    justify-content: center;
  }
}
/* =====================================================================
 * Mobile — faithful port of the wireframe (shared.css). Slider cards go
 * near-full-width + snap-centred; "Choose Your Journey" drops the Gantt
 * timeline for a tap-to-expand card list with native <select> filters.
 * ===================================================================== */
/* Mobile-only journey components — hidden until the breakpoints below. */
.cj-mobile-filters {
  display: none;
  gap: 12px;
  margin-bottom: 36px;
}
.cj-mobile-filters label {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1.2px;
  color: var(--brand-sky-text);
}
.cj-mobile-filters select {
  appearance: none;
  -webkit-appearance: none;
  width: 100%;
  padding: 14px 44px 14px 18px;
  font-size: 16px; /* >=16px stops iOS zooming the field on focus */
  font-family: var(--font-body);
  color: var(--brand-deep);
  background: var(--surface) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2347B5D7' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E") no-repeat right 16px center;
  border: 1.5px solid color-mix(in srgb, var(--brand-sky) 28%, var(--surface));
  border-radius: 12px;
  min-height: 52px;
  cursor: pointer;
  transition: border-color 0.2s;
}
.cj-mobile-filters select:focus {
  border-color: var(--brand-sky);
  outline: 3px solid color-mix(in srgb, var(--brand-sky) 25%, transparent);
  outline-offset: 1px;
}

.cj-mobile-card-detail {
  display: none; /* desktop never shows it (the side panel does) */
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.35s cubic-bezier(0.4, 0, 0.2, 1), padding 0.35s ease, margin 0.35s ease;
  padding: 0;
  margin: 0;
  border-top: 0 solid color-mix(in srgb, var(--brand-sky) 28%, var(--surface));
}
.cj-mobile-card-detail .cj-mobile-desc {
  font-size: 15px;
  color: color-mix(in srgb, var(--brand-deep) 55%, var(--text-muted));
  line-height: 1.65;
  margin-bottom: 16px;
}
.cj-mobile-card-detail .cj-mobile-view-btn {
  display: block;
  width: 100%;
  padding: 15px 20px;
  background: var(--gradient-button);
  color: var(--gradient-button-fg);
  border: none;
  border-radius: 50px;
  font-size: 14px;
  font-weight: 800;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  min-height: 52px;
  box-shadow: 0 3px 14px color-mix(in srgb, var(--brand-deep) 25%, transparent), inset 0 1px 0 color-mix(in srgb, var(--brand-glass) 30%, transparent);
}
.cj-mobile-card-detail .cj-mobile-view-btn:active {
  transform: scale(0.97);
}

.cj-tour-row.cj-expanded .cj-mobile-card-detail {
  max-height: 600px;
  padding: 16px 0 20px;
  margin-top: 12px;
  border-top-width: 1px;
}

.cj-expand-indicator {
  display: none;
  width: 22px;
  height: 22px;
  flex-shrink: 0;
  transition: transform 0.3s ease, background 0.3s ease;
  background: var(--surface-tint);
  border-radius: 50%;
  padding: 3px;
  border: 1px solid var(--brand-border);
  color: var(--brand-sky);
}

.cj-tour-row.cj-expanded .cj-expand-indicator {
  transform: rotate(180deg);
  background: var(--brand-sky-fill);
  border-color: var(--brand-sky-fill);
  color: #fff;
}

.cj-tap-hint {
  display: none;
  font-size: 11px;
  color: var(--text-subtle);
  letter-spacing: 0.5px;
  margin-top: 8px;
}

/* Always-visible mobile preview (image + island + tree) — info before tapping. */
.cj-mobile-preview {
  display: none;
  align-items: center;
  gap: 12px;
  margin-top: 12px;
}

.cj-mobile-thumb {
  flex: 0 0 76px;
  width: 76px;
  height: 58px;
  border-radius: 8px;
  background-size: cover;
  background-position: center;
  border: 1px solid var(--brand-border);
}

.cj-mobile-preview-text {
  display: flex;
  flex-direction: column;
  gap: 5px;
  min-width: 0;
}

.cj-mobile-island {
  align-self: flex-start;
  padding: 3px 10px;
  border-radius: 50px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}
.cj-mobile-island.north {
  background: color-mix(in srgb, var(--brand-sky) 22%, var(--surface));
  color: var(--brand-deep);
}
.cj-mobile-island.south {
  background: color-mix(in srgb, var(--brand-sky) 30%, var(--surface));
  color: color-mix(in srgb, var(--brand-deep) 88%, #000);
}
.cj-mobile-island.both {
  background: linear-gradient(90deg, color-mix(in srgb, var(--brand-sky) 22%, var(--surface)), color-mix(in srgb, var(--brand-sky) 30%, var(--surface)));
  color: color-mix(in srgb, var(--brand-deep) 88%, #000);
}

.cj-mobile-tree-preview {
  font-size: 13px;
  color: var(--brand-sky-text);
  font-style: italic;
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

@media (max-width: 768px) {
  /* Slider: near-full-width, snap-centred cards */
  .tour-slider {
    gap: 20px;
    padding-left: 20px;
    padding-right: 20px;
  }
  .tour-slider .pd-card {
    flex: 0 0 calc(100vw - 56px);
    max-width: 400px;
    scroll-snap-align: center;
  }
  .slider-nav {
    gap: 12px;
  }
  .tour-collection .s-head :is(h2, h3, h4, h5, h6) {
    font-size: 36px;
  }
  .tour-collection .s-head p {
    font-size: 16px;
  }
  /* Choose Your Journey → tap-to-expand card list */
  .choose-journey {
    padding: 56px 0 52px;
  }
  .cj-filters {
    display: none;
  }
  .cj-mobile-filters {
    display: flex;
    flex-direction: column;
  }
  .cj-legend {
    display: none;
  }
  .cj-detail-panel {
    display: none;
  }
  .cj-layout {
    grid-template-columns: 1fr;
  }
  .cj-timeline {
    padding: 8px;
    border-radius: 12px;
    border: none;
    background: transparent;
    margin-bottom: 0;
  }
  .cj-timeline-header,
  .cj-tl-axis {
    display: none;
  }
  .cj-expand-indicator,
  .cj-tap-hint,
  .cj-mobile-card-detail {
    display: block;
  }
  .cj-mobile-preview {
    display: flex;
  }
  .cj-tour-row {
    display: flex;
    flex-direction: column;
    align-items: stretch; /* override the desktop centre-align — left-align the stacked content */
    gap: 0;
    padding: 16px 14px;
    margin-bottom: 8px;
    border-radius: 12px;
    border: 1.5px solid var(--brand-border);
    background: var(--surface);
    box-shadow: 0 1px 4px color-mix(in srgb, var(--brand-deep) 6%, transparent);
    transition: background 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
  }
  .cj-tour-row:active {
    background: color-mix(in srgb, var(--brand-sky) 6%, var(--surface));
  }
  .cj-tour-row.highlighted, .cj-tour-row.cj-expanded {
    background: color-mix(in srgb, var(--brand-sky) 8%, var(--surface));
    border-color: var(--brand-sky);
    border-left-width: 4px;
    box-shadow: 0 4px 16px color-mix(in srgb, var(--brand-deep) 8%, transparent);
  }
  .cj-tour-row.cj-expanded .cj-tap-hint {
    display: none;
  }
  .cj-tour-name {
    font-size: 16px;
    padding: 0;
    display: flex;
    align-items: center;
    width: 100%;
    gap: 8px;
  }
  .cj-tour-name .cj-days-pill {
    margin-left: auto;
    flex-shrink: 0;
  }
  .cj-bar-track,
  .cj-bar {
    display: none;
  }
  .cj-row-group-label {
    font-size: 12px;
    padding: 12px 0 6px;
  }
}
@media (max-width: 480px) {
  .tour-slider {
    gap: 16px;
    padding-left: 16px;
    padding-right: 16px;
  }
  .tour-slider .pd-card {
    flex: 0 0 calc(100vw - 40px);
    max-width: none;
  }
  .choose-journey {
    padding: 44px 0 40px;
  }
  .tour-collection .s-head :is(h2, h3, h4, h5, h6) {
    font-size: 30px;
  }
  .cj-tour-row.cj-expanded {
    border-left: 3px solid var(--brand-sky);
    background: color-mix(in srgb, var(--brand-sky) 10%, var(--surface));
  }
}
/* Touch devices — no hover tint on rows, press feedback instead. */
@media (hover: none) {
  .cj-tour-row:hover {
    background: transparent;
  }
  .cj-tour-row:active {
    background: var(--surface-tint);
  }
}
/* ---- Archive link footer (shown once the tours archive ships in S4) ---- */
.tour-collection__footer {
  margin-top: 40px;
  text-align: center;
}
.tour-collection__footer a {
  font-size: 14px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 2px;
  text-decoration: none;
  color: var(--brand-deep);
}
.tour-collection__footer a:hover {
  color: var(--brand-sky-text);
}

/*
    Section · Wave Divider — decorative SVG wave between two colour bands.
    The container paints the TOP colour; the SVG path is filled with the BOTTOM
    colour, so the curve is the boundary between the two bands. Both come from
    brand tokens set inline (--wave-top / --wave-bottom), so the block is fully
    brand-skinnable with zero code change and stays token-pure here.
    Flush by design (no section padding) so it butts against the bands.
*/
.wave-divider {
  /* Fallbacks; the inline style overrides per instance. */
  --wave-top: var(--surface);
  --wave-bottom: var(--brand-deep);
  display: block;
  width: 100%;
  line-height: 0; /* kill descender gap under the inline SVG */
  background: var(--wave-top);
  /* Mirror the curve to cap the TOP edge of a band. */
  /* Optionally drop the divider on small screens. */
}
.wave-divider svg {
  display: block;
  width: 100%;
  height: 70px;
  /* The back crest is a genuinely darker tone, not the same fill dimmed.
     Painting both paths the same colour and varying only opacity made the
     back crest read as a wash over the band above rather than a second
     layer of water, which is the whole point of the two-path wave. The
     wireframes hard-code a darker partner for each band colour; we mix
     toward black instead, so every brand derives its own back tone from
     whatever --wave-bottom that instance was given. */
}
@media (max-width: 768px) {
  .wave-divider svg {
    height: 44px;
  }
}
.wave-divider svg path {
  fill: var(--wave-bottom);
}
.wave-divider svg path.wave-divider__back {
  fill: color-mix(in srgb, var(--wave-bottom) 82%, #000);
}
.wave-divider--flip svg {
  transform: scaleY(-1);
}
@media (max-width: 768px) {
  .wave-divider--hide-mobile {
    display: none;
  }
}

/*
    Destination Hub · Hero (section-style)

    The Hub hero is a shorter, in-template variant of the shared page hero. It
    reuses every .hero* rule in _hero.scss (image, slides, layout, .sub, .ctas)
    and only adds: the .section padding/background reset (so the surface band
    padding doesn't double the hero-layout padding) and the wireframe breadcrumb.
    All colour comes from brand tokens — no literals.
*/
.dest-hub-hero.section {
  padding: 0;
  background: transparent;
}
.dest-hub-hero.hero {
  min-height: 500px;
}
.dest-hub-hero .hero-layout {
  min-height: 500px;
}
.dest-hub-hero .breadcrumb {
  font-size: var(--hero-crumb-size);
  font-weight: var(--hero-crumb-weight);
  letter-spacing: var(--hero-crumb-tracking);
  text-transform: none;
  color: var(--hero-crumb-fg);
  margin-bottom: 14px;
}
.dest-hub-hero .breadcrumb a,
.dest-hub-hero .breadcrumb span {
  color: inherit;
  text-decoration: none;
  transition: color 0.2s;
}
.dest-hub-hero .breadcrumb a:hover {
  color: var(--text-on-dark);
}
.dest-hub-hero .breadcrumb .sep {
  margin: 0 8px;
}
@media (max-width: 992px) {
  .dest-hub-hero.hero,
  .dest-hub-hero .hero-layout {
    min-height: 420px;
  }
}
@media (max-width: 768px) {
  .dest-hub-hero.hero,
  .dest-hub-hero .hero-layout {
    min-height: 380px;
  }
}
@media (max-width: 576px) {
  .dest-hub-hero.hero,
  .dest-hub-hero .hero-layout {
    min-height: 340px;
  }
}

/*
    Destination Hub · Island Selector

    Two large interactive island cards (North / South) with a Ken Burns slide
    stack and a teal scrim. Each card smooth-scrolls to its region grid. Faithful
    port of the wireframe .island-* block; brand hexes mapped to tokens.
*/
.island-selector {
  background: var(--surface);
}
.island-selector.section {
  padding: 0;
}
.island-selector .container {
  padding-top: 72px;
  padding-bottom: 72px;
}

.island-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 28px;
  margin-top: 0;
}

.island-card {
  position: relative;
  display: block;
  height: 400px;
  border-radius: 14px;
  overflow: hidden;
  cursor: pointer;
  text-decoration: none;
  box-shadow: 0 2px 12px color-mix(in srgb, #000 10%, transparent);
  transition: box-shadow 0.35s cubic-bezier(0.22, 1, 0.36, 1), transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}
.island-card:hover {
  box-shadow: 0 12px 36px color-mix(in srgb, var(--brand-deep) 20%, transparent);
  transform: translateY(-4px);
}
.island-card .island-slides {
  position: absolute;
  inset: 0;
}
.island-card .island-slide {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  opacity: 0;
  transition: opacity 1.5s ease-in-out, transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
  animation: dhKenBurns 20s ease-in-out infinite alternate;
}
@media (prefers-reduced-motion: reduce) {
  .island-card .island-slide {
    animation: none;
  }
}
.island-card .island-slide.active {
  opacity: 1;
}
.island-card .island-slide:nth-child(2) {
  animation-direction: alternate-reverse;
}
.island-card .island-slide:nth-child(3) {
  animation-delay: -7s;
}
.island-card:hover .island-slide {
  transform: scale(1.05);
}
.island-card::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(to bottom, color-mix(in srgb, var(--brand-deep) 0%, transparent) 0%, color-mix(in srgb, var(--brand-deep) 25%, transparent) 30%, color-mix(in srgb, var(--brand-deep) 72%, transparent) 50%, color-mix(in srgb, var(--brand-deep) 92%, transparent) 100%);
}

.island-card-content {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 2;
  padding: 32px 28px;
  color: #fff;
}
.island-card-content h2 {
  margin-bottom: 6px;
  font-family: var(--font-body);
  font-size: 38px;
  font-weight: 700;
  color: #fff;
  text-shadow: 0 2px 8px color-mix(in srgb, #000 20%, transparent);
}
.island-card-content .island-meta {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 10px;
}
.island-card-content .island-meta span {
  padding: 4px 12px;
  border-radius: 50px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: #fff;
  background: color-mix(in srgb, var(--brand-deep) 55%, transparent);
  backdrop-filter: blur(4px);
}
.island-card-content .island-tagline {
  max-width: 400px;
  font-size: 16px;
  line-height: 1.6;
  color: color-mix(in srgb, #fff 90%, transparent);
}
.island-card-content .island-tour-count {
  margin-top: 8px;
  font-size: 13px;
  font-style: italic;
  color: color-mix(in srgb, #fff 85%, transparent);
}

@keyframes dhKenBurns {
  0% {
    transform: scale(1) translate(0, 0);
  }
  100% {
    transform: scale(1.08) translate(-0.4%, 0.8%);
  }
}
@media (max-width: 992px) {
  .island-card {
    height: 340px;
  }
  .island-card-content h2 {
    font-size: 32px;
  }
  .island-selector .container {
    padding-left: 32px;
    padding-right: 32px;
  }
}
@media (max-width: 768px) {
  .island-grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }
  .island-card {
    width: 100%;
    height: 260px;
  }
  .island-card-content h2 {
    font-size: 28px;
  }
  .island-card-content .island-tagline {
    font-size: 14px;
  }
  .island-selector .container {
    padding-top: 48px;
    padding-bottom: 48px;
  }
}
@media (max-width: 576px) {
  .island-card {
    height: 220px;
  }
  .island-card-content {
    padding: 18px;
  }
  .island-card-content h2 {
    font-size: 24px;
  }
  .island-card-content .island-tour-count {
    font-size: 12px;
  }
  .island-selector .container {
    padding-left: 16px;
    padding-right: 16px;
  }
}
/*
    Destination Hub · Region Grids (North & South)

    A filterable 3-up grid of region cards under an interest-pill filter bar.
    Each card carries interest tags, a Ken Burns slide stack, a teal scrim and a
    hover-revealed "Explore" kicker + arrow. Faithful port of the wireframe
    .region-* / .interest-* blocks; brand hexes mapped to tokens. The North band
    sits on the brand tint, the South band on the surface — set in the template
    wrappers (.dh-region--tint / .dh-region--surface) so no inline styles.
*/
.region-section {
  position: relative;
}
.region-section.section {
  padding: 0;
}
.region-section .container {
  padding-top: 80px;
  padding-bottom: 80px;
}
.region-section .s-head {
  margin-bottom: 48px;
  max-width: 820px;
}

/* ---- Interest filter bar ---- */
.interest-filter {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin-top: 24px;
  margin-bottom: 8px;
}

.interest-pill {
  padding: 8px 20px;
  border-radius: 50px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.5px;
  text-transform: none;
  color: var(--text-muted);
  background: transparent;
  border: 1.5px solid var(--brand-border);
  cursor: pointer;
  transition: all 0.2s;
}
.interest-pill:hover {
  color: var(--brand-deep);
  border-color: var(--brand-sky);
  background: var(--surface-tint);
}
.interest-pill.active {
  color: #fff;
  background: var(--brand-deep);
  border-color: var(--brand-deep);
}

/* ---- Region grid ---- */
.region-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
}

.region-grid-empty {
  display: none;
  padding: 48px 20px;
  text-align: center;
  font-size: 16px;
  color: var(--text-muted);
}
.region-grid-empty.show {
  display: block;
}

.region-card {
  position: relative;
  display: block;
  width: calc(33.333% - 16px);
  height: 360px;
  border-radius: 14px;
  overflow: hidden;
  cursor: pointer;
  text-decoration: none;
  box-shadow: 0 2px 12px color-mix(in srgb, #000 10%, transparent);
  transition: box-shadow 0.35s cubic-bezier(0.22, 1, 0.36, 1);
  /* Filter states */
  /* Bottom scrim */
  /* Top accent line */
}
.region-card:hover {
  box-shadow: 0 12px 36px color-mix(in srgb, var(--brand-deep) 20%, transparent);
}
.region-card.filtered-out {
  display: none !important;
}
.region-card .region-slides {
  position: absolute;
  inset: 0;
}
.region-card .region-slide {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  opacity: 0;
  transition: opacity 1.5s ease-in-out, transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}
.region-card .region-slide.active {
  opacity: 1;
}
.region-card:hover .region-slide {
  transform: scale(1.05);
}
.region-card::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(to bottom, color-mix(in srgb, var(--brand-deep) 0%, transparent) 0%, color-mix(in srgb, var(--brand-deep) 10%, transparent) 40%, color-mix(in srgb, var(--brand-deep) 50%, transparent) 75%, color-mix(in srgb, var(--brand-deep) 75%, transparent) 100%);
  transition: background 0.4s ease;
}
.region-card:hover::after {
  background: linear-gradient(to bottom, color-mix(in srgb, var(--brand-deep) 0%, transparent) 0%, color-mix(in srgb, var(--brand-deep) 0%, transparent) 40%, color-mix(in srgb, var(--brand-deep) 30%, transparent) 75%, color-mix(in srgb, var(--brand-deep) 60%, transparent) 100%);
}
.region-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 22px;
  right: 22px;
  height: 3px;
  z-index: 3;
  background: var(--brand-sky);
  transform: scaleX(0);
  transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}
.region-card:hover::before {
  transform: scaleX(1);
}
.region-card:hover .region-tags {
  opacity: 0;
  transition: opacity 0.25s ease;
}

/* Interest tags on cards */
.region-tags {
  position: absolute;
  top: 14px;
  left: 14px;
  right: 14px;
  z-index: 3;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  transition: opacity 0.25s ease;
}

.region-tag {
  padding: 4px 10px;
  border-radius: 50px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: color-mix(in srgb, #fff 85%, transparent);
  background: color-mix(in srgb, var(--brand-deep) 70%, transparent);
  border: 1px solid color-mix(in srgb, #fff 12%, transparent);
  transition: background 0.25s, color 0.25s, border-color 0.25s;
}
.region-tag.tag-highlight {
  color: color-mix(in srgb, #fff 85%, transparent);
  background: color-mix(in srgb, var(--brand-deep) 70%, transparent);
  border-color: color-mix(in srgb, #fff 12%, transparent);
}

/* When a filter is active, highlight matching tags on visible cards */
.region-card:not(.filtered-out) .region-tag.tag-match {
  color: #fff;
  background: var(--brand-sky-fill);
  border-color: var(--brand-sky-fill);
}

.region-card-content {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 20px 22px;
  color: #fff;
  /* "Explore" kicker — appears on hover */
  /* Tagline: visible by default, hides on hover */
  /* Tour badge: visible by default, hides on hover */
}
.region-card-content .explore-kicker {
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 400;
  color: color-mix(in srgb, #fff 90%, transparent);
  text-shadow: 0 2px 10px color-mix(in srgb, #000 40%, transparent);
  transition: opacity 0.3s ease, max-height 0.3s ease;
}
.region-card-content h3 {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 4px;
  font-family: var(--font-body);
  font-size: 24px;
  font-weight: 600;
  color: #fff;
  text-shadow: 0 2px 8px color-mix(in srgb, #000 40%, transparent);
  transition: margin-bottom 0.35s ease;
}
.region-card-content h3 .hover-arrow {
  display: inline-flex;
  align-items: center;
  opacity: 0;
  transform: translateX(-6px);
  transition: opacity 0.3s ease 0.1s, transform 0.3s ease 0.1s;
}
.region-card-content h3 .hover-arrow svg {
  width: 20px;
  height: 20px;
  stroke: #fff;
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.region-card-content .region-tagline {
  max-height: 60px;
  margin-bottom: 8px;
  overflow: hidden;
  opacity: 1;
  font-size: 14px;
  line-height: 1.5;
  color: color-mix(in srgb, #fff 75%, transparent);
  transition: max-height 0.35s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.25s ease, margin-bottom 0.35s ease;
}
.region-card-content .region-tour-badge {
  display: inline-flex;
  align-self: flex-start;
  align-items: center;
  gap: 6px;
  max-height: 30px;
  padding: 4px 12px;
  overflow: hidden;
  border-radius: 50px;
  opacity: 1;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  color: color-mix(in srgb, #fff 85%, transparent);
  background: color-mix(in srgb, var(--brand-sky) 30%, transparent);
  backdrop-filter: blur(4px);
  transition: opacity 0.25s ease, max-height 0.35s ease;
}
.region-card-content .region-tour-badge svg {
  width: 12px;
  height: 12px;
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
}

.region-card:hover .region-card-content .explore-kicker {
  opacity: 1;
  max-height: 30px;
  margin-bottom: 2px;
}
.region-card:hover .region-card-content h3 {
  margin-bottom: 0;
}
.region-card:hover .region-card-content h3 .hover-arrow {
  opacity: 1;
  transform: translateX(0);
}
.region-card:hover .region-card-content .region-tagline {
  max-height: 0;
  opacity: 0;
  margin-bottom: 0;
}
.region-card:hover .region-card-content .region-tour-badge {
  opacity: 0;
  max-height: 0;
}

/* ---- Focus states ---- */
.island-card:focus-visible,
.region-card:focus-visible {
  outline: 3px solid var(--brand-sky);
  outline-offset: 2px;
  border-radius: 14px;
}

@media (max-width: 992px) {
  .region-grid {
    gap: 20px;
  }
  .region-card {
    height: 320px;
  }
  .region-card .region-card-content h3 {
    font-size: 22px;
  }
  .region-section .container {
    padding-left: 32px;
    padding-right: 32px;
  }
}
@media (max-width: 768px) {
  .region-card {
    width: 100%;
    height: 280px;
  }
  .region-card .region-card-content h3 {
    font-size: 18px;
  }
  .region-card .region-card-content .region-tagline {
    font-size: 13px;
  }
  .region-tag {
    font-size: 9px;
    padding: 3px 8px;
  }
  .interest-filter {
    gap: 8px;
  }
  .interest-pill {
    padding: 6px 14px;
    font-size: 12px;
  }
  .region-section .container {
    padding-top: 56px;
    padding-bottom: 56px;
  }
}
@media (max-width: 576px) {
  .region-card {
    width: 100%;
    height: 240px;
  }
  .region-card .region-card-content {
    padding: 16px 18px;
  }
  .region-card .region-card-content h3 {
    font-size: 20px;
  }
  .region-tag {
    font-size: 8px;
    padding: 3px 7px;
    letter-spacing: 0.4px;
  }
  .region-tags {
    gap: 4px;
    top: 10px;
    left: 10px;
    right: 10px;
  }
  /* No hover on touch — show tagline + badge + tags, hide hover-only chrome */
  .region-card .region-tagline {
    max-height: 60px !important;
    opacity: 1 !important;
    margin-bottom: 6px !important;
  }
  .region-card .region-tour-badge {
    opacity: 1 !important;
    max-height: 30px !important;
  }
  .region-card .region-tags {
    opacity: 1 !important;
  }
  .region-card .explore-kicker {
    display: none;
  }
  .region-card h3 .hover-arrow {
    display: none;
  }
  .interest-filter {
    gap: 6px;
    justify-content: center;
    flex-wrap: wrap;
  }
  .interest-pill {
    padding: 6px 14px;
    font-size: 11px;
  }
  .region-section .container {
    padding-left: 16px;
    padding-right: 16px;
    padding-top: 44px;
    padding-bottom: 44px;
  }
}
/*
    Destination Hub · Tours-by-Region Matrix

    A dark (brand-deep) band holding a sticky-header table: regions down the
    rows, tours across the columns, a check where a tour visits a region. Scrolls
    horizontally on narrow viewports. Faithful port of the wireframe .tour-matrix
    / .matrix-* block; brand hexes mapped to tokens.
*/
.tour-matrix {
  position: relative;
  overflow: hidden;
  background: var(--brand-deep);
}
.tour-matrix.section {
  padding: 0;
}
.tour-matrix::before {
  content: "";
  position: absolute;
  top: -60px;
  right: -60px;
  width: 400px;
  height: 400px;
  border-radius: 50%;
  background: radial-gradient(circle, color-mix(in srgb, var(--brand-sky) 8%, transparent) 0%, transparent 70%);
  pointer-events: none;
}
.tour-matrix .container {
  position: relative;
  z-index: 1;
  padding-top: 80px;
  padding-bottom: 80px;
}
.tour-matrix .s-head h2 {
  color: color-mix(in srgb, #fff 96%, transparent);
}
.tour-matrix .s-head p {
  color: color-mix(in srgb, #fff 45%, transparent);
}

.matrix-scroll {
  margin-top: 48px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border-radius: 12px;
  border: 1px solid color-mix(in srgb, var(--brand-sky) 20%, transparent);
  background: color-mix(in srgb, #fff 3%, transparent);
}
.matrix-scroll::-webkit-scrollbar {
  height: 6px;
}
.matrix-scroll::-webkit-scrollbar-track {
  background: color-mix(in srgb, #fff 5%, transparent);
  border-radius: 3px;
}
.matrix-scroll::-webkit-scrollbar-thumb {
  background: color-mix(in srgb, var(--brand-sky) 30%, transparent);
  border-radius: 3px;
}

.matrix-table {
  --matrix-fill: color-mix(in srgb, #fff 3%, var(--brand-deep));
  width: 100%;
  min-width: 900px;
  border-collapse: collapse;
  font-size: 14px;
}
.matrix-table thead th {
  position: sticky;
  top: 0;
  padding: 18px 14px;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  text-align: center;
  white-space: nowrap;
  color: var(--brand-sky);
  border-bottom: 2px solid color-mix(in srgb, var(--brand-sky) 25%, transparent);
  background: color-mix(in srgb, var(--brand-deep) 97%, transparent);
  backdrop-filter: blur(4px);
  transition: background 0.2s;
}
.matrix-table thead th:first-child {
  text-align: left;
  padding-left: 20px;
  min-width: 180px;
  font-weight: 600;
  letter-spacing: 1.5px;
  color: color-mix(in srgb, #fff 50%, transparent);
}
.matrix-table thead th a {
  display: inline-block;
  padding: 6px 12px;
  border-radius: 8px;
  border: 1px solid transparent;
  text-decoration: none;
  color: var(--brand-sky);
  cursor: pointer;
  transition: all 0.2s;
}
.matrix-table thead th a:hover {
  color: #fff;
  background: color-mix(in srgb, var(--brand-sky) 20%, transparent);
  border-color: color-mix(in srgb, var(--brand-sky) 30%, transparent);
}
.matrix-table thead th .matrix-days {
  display: block;
  margin-top: 3px;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.5px;
  color: color-mix(in srgb, #fff 35%, transparent);
}
.matrix-table tbody td {
  padding: 14px;
  text-align: center;
  color: color-mix(in srgb, #fff 30%, transparent);
  border-bottom: 1px solid color-mix(in srgb, var(--brand-sky) 8%, transparent);
  transition: background 0.2s;
}
.matrix-table tbody td:first-child {
  text-align: left;
  padding-left: 20px;
  font-weight: 600;
  color: color-mix(in srgb, #fff 75%, transparent);
}
.matrix-table tbody td:first-child a {
  display: inline-block;
  padding: 4px 10px;
  margin: -4px -10px;
  border-radius: 6px;
  border: 1px solid transparent;
  text-decoration: none;
  color: color-mix(in srgb, #fff 80%, transparent);
  transition: all 0.2s;
}
.matrix-table tbody td:first-child a:hover {
  color: #fff;
  background: color-mix(in srgb, var(--brand-sky) 15%, transparent);
  border-color: color-mix(in srgb, var(--brand-sky) 25%, transparent);
}
.matrix-table tbody tr:not(.matrix-island-label):hover td {
  background: color-mix(in srgb, var(--brand-sky) 10%, transparent);
}
.matrix-table thead th:first-child,
.matrix-table tbody tr:not(.matrix-island-label) td:first-child {
  position: sticky;
  left: 0;
  z-index: 1;
  background: var(--matrix-fill);
  box-shadow: 1px 0 0 color-mix(in srgb, var(--brand-sky) 20%, transparent);
}
.matrix-table thead th:first-child {
  z-index: 2;
}
.matrix-table tbody tr:not(.matrix-island-label):hover td:first-child {
  background: color-mix(in srgb, var(--brand-sky) 10%, var(--matrix-fill));
}
.matrix-table .matrix-island-name {
  position: sticky;
  left: 20px;
}
.matrix-table .matrix-island-label td {
  padding: 14px 20px 8px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 2px;
  color: var(--brand-sky);
  border-bottom: 1px solid color-mix(in srgb, var(--brand-sky) 15%, transparent);
  background: color-mix(in srgb, var(--brand-sky) 4%, transparent);
}

.matrix-check {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--brand-sky) 15%, transparent);
  transition: background 0.2s, transform 0.2s;
}
.matrix-check svg {
  width: 13px;
  height: 13px;
  stroke: var(--brand-sky);
  fill: none;
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

tr:hover .matrix-check {
  background: color-mix(in srgb, var(--brand-sky) 30%, transparent);
  transform: scale(1.1);
}
tr:hover .matrix-check svg {
  stroke: var(--brand-glass);
}

.matrix-empty {
  font-size: 18px;
  color: color-mix(in srgb, #fff 8%, transparent);
}

@media (max-width: 768px) {
  .tour-matrix .container {
    padding-top: 56px;
    padding-bottom: 56px;
  }
}
@media (max-width: 576px) {
  .matrix-scroll {
    border-radius: 10px;
  }
  .matrix-table {
    min-width: 700px;
    font-size: 13px;
  }
  .matrix-table thead th {
    padding: 12px 10px;
    font-size: 10px;
  }
  .matrix-table thead th:first-child {
    min-width: 120px;
    padding-left: 12px;
  }
  .matrix-table tbody td {
    padding: 10px;
  }
  .matrix-table tbody td:first-child {
    padding-left: 12px;
    font-size: 13px;
  }
  .matrix-table .matrix-island-name {
    left: 12px;
  }
  .matrix-check {
    width: 24px;
    height: 24px;
  }
  .matrix-check svg {
    width: 11px;
    height: 11px;
  }
  .tour-matrix .container {
    padding-left: 16px;
    padding-right: 16px;
  }
}
/*
    Destination Single · Hero refinements.

    The hero itself renders through the shared hero seam (template-parts/hero/
    hero.php). These rules only nudge it to the wireframe's destination spec
    (taller band, breadcrumb spacing) — scoped to the single-destination body
    class so no other hero is touched. Colour comes entirely from brand tokens.
*/
body.single-destination .hero {
  min-height: 540px;
}
@media (max-width: 992px) {
  body.single-destination .hero {
    min-height: 480px;
  }
}
@media (max-width: 768px) {
  body.single-destination .hero {
    min-height: 420px;
  }
}
@media (max-width: 576px) {
  body.single-destination .hero {
    min-height: 380px;
  }
}
body.single-destination .hero-layout {
  min-height: inherit;
}

/*
    Destination Single · 2. Region Overview.
    Two-column editorial: text + scannable highlights + expandable deeper story
    on the left, a 3-image lightbox collage on the right. Token-pure.
*/
.ds-region-overview {
  background: var(--surface);
}
.ds-region-overview .overview-layout {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 56px;
  align-items: start;
}
@media (max-width: 992px) {
  .ds-region-overview .overview-layout {
    gap: 40px;
  }
}
@media (max-width: 768px) {
  .ds-region-overview .overview-layout {
    grid-template-columns: 1fr;
    gap: 32px;
  }
}
.ds-region-overview .overview-text h2 {
  font-family: var(--font-display);
  font-size: 44px;
  font-weight: 400;
  color: var(--brand-deep);
  margin-bottom: 24px;
}
@media (max-width: 992px) {
  .ds-region-overview .overview-text h2 {
    font-size: 38px;
  }
}
@media (max-width: 768px) {
  .ds-region-overview .overview-text h2 {
    font-size: 34px;
  }
}
@media (max-width: 576px) {
  .ds-region-overview .overview-text h2 {
    font-size: 28px;
  }
}
.ds-region-overview .overview-intro {
  font-size: 17px;
  color: color-mix(in srgb, var(--brand-deep) 82%, #fff);
  line-height: 1.75;
  margin-bottom: 28px;
}
@media (max-width: 576px) {
  .ds-region-overview .overview-intro {
    font-size: 15px;
  }
}
.ds-region-overview .overview-text p {
  font-size: 16px;
  color: color-mix(in srgb, var(--brand-deep) 82%, #fff);
  line-height: 1.75;
  margin-bottom: 16px;
}
.ds-region-overview .overview-text p:last-child {
  margin-bottom: 0;
}
.ds-region-overview .overview-highlights {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-bottom: 28px;
}
@media (max-width: 576px) {
  .ds-region-overview .overview-highlights {
    grid-template-columns: 1fr;
    gap: 12px;
  }
}
.ds-region-overview .overview-highlight {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 14px 16px;
  background: color-mix(in srgb, var(--surface-tint) 55%, #fff);
  border-radius: 10px;
  border: 1px solid color-mix(in srgb, var(--brand-border) 55%, #fff);
  line-height: 1 !important;
  text-decoration: none;
  color: inherit;
}
.ds-region-overview .overview-highlight svg {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  margin-top: 1px;
  stroke: var(--brand-sky);
  fill: none;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.ds-region-overview .overview-highlight strong {
  display: block;
  font-size: 14px;
  font-weight: 700;
  color: var(--brand-deep);
  margin-bottom: 2px;
  line-height: 1.3 !important;
}
.ds-region-overview .overview-highlight span {
  display: block;
  font-size: 13px;
  color: var(--text-muted);
  line-height: 1.45 !important;
}
.ds-region-overview .overview-read-more {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  padding: 14px 0;
  margin-top: 4px;
  font-size: 14px;
  font-weight: 600;
  color: var(--text-muted);
  cursor: pointer;
  letter-spacing: 0.3px;
  border: none;
  background: none;
  border-top: 1px solid color-mix(in srgb, var(--brand-border) 55%, #fff);
  transition: color 0.2s;
}
.ds-region-overview .overview-read-more:hover {
  color: var(--brand-deep);
}
.ds-region-overview .overview-read-more svg {
  width: 14px;
  height: 14px;
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
  transition: transform 0.3s;
}
.ds-region-overview .overview-read-more.open {
  border-top-color: transparent;
}
.ds-region-overview .overview-read-more.open svg {
  transform: rotate(180deg);
}
.ds-region-overview .overview-deeper {
  display: grid;
  grid-template-rows: 0fr;
  opacity: 0;
  transition: grid-template-rows 0.5s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.4s ease;
}
.ds-region-overview .overview-deeper.open {
  grid-template-rows: 1fr;
  opacity: 1;
}
.ds-region-overview .overview-deeper.open .overview-deeper-inner {
  padding-top: 20px;
  border-top: 1px solid color-mix(in srgb, var(--brand-border) 55%, #fff);
}
.ds-region-overview .overview-deeper-inner {
  min-height: 0;
  overflow: hidden;
}
.ds-region-overview .overview-deeper-inner p {
  font-size: 16px;
  color: color-mix(in srgb, var(--brand-deep) 82%, #fff);
  line-height: 1.75;
  margin-bottom: 16px;
}
.ds-region-overview .overview-deeper-inner p:last-child {
  margin-bottom: 0;
}
.ds-region-overview .overview-collage {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 220px 220px;
  gap: 12px;
}
@media (max-width: 768px) {
  .ds-region-overview .overview-collage {
    grid-template-rows: 180px 180px;
  }
}
@media (max-width: 576px) {
  .ds-region-overview .overview-collage {
    grid-template-columns: 1fr;
    grid-template-rows: 200px 160px 160px;
  }
}
.ds-region-overview .overview-collage .col-img {
  border-radius: 10px;
  overflow: hidden;
  background-size: cover;
  background-position: center;
  transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
  cursor: pointer;
  position: relative;
}
.ds-region-overview .overview-collage .col-img::after {
  content: "";
  position: absolute;
  inset: 0;
  background: color-mix(in srgb, var(--brand-deep) 0%, transparent);
  transition: background 0.3s;
}
.ds-region-overview .overview-collage .col-img:hover::after {
  background: color-mix(in srgb, var(--brand-deep) 15%, transparent);
}
.ds-region-overview .overview-collage .col-img::before {
  content: "";
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 2;
  width: 32px;
  height: 32px;
  background: color-mix(in srgb, #fff 20%, transparent);
  backdrop-filter: blur(6px);
  border-radius: 50%;
  opacity: 0;
  transition: opacity 0.25s;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='15 3 21 3 21 9'/%3E%3Cpolyline points='9 21 3 21 3 15'/%3E%3Cline x1='21' y1='3' x2='14' y2='10'/%3E%3Cline x1='3' y1='21' x2='10' y2='14'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
}
.ds-region-overview .overview-collage .col-img:hover::before {
  opacity: 1;
}
.ds-region-overview .overview-collage .col-img:hover {
  transform: scale(1.02);
}
.ds-region-overview .overview-collage .col-img:first-child {
  grid-row: 1/3;
}
@media (max-width: 576px) {
  .ds-region-overview .overview-collage .col-img:first-child {
    grid-row: auto;
  }
}

/*
    Destination Single · 3. Key Experiences.
    A 3-column grid of experience cards on a brand-tinted band. Token-pure.
*/
.ds-key-experiences {
  background: var(--surface-tint);
}
.ds-key-experiences .s-head h2 {
  font-family: var(--font-display);
  font-weight: 400;
}
.ds-key-experiences .exp-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
  margin-top: 48px;
}
@media (max-width: 768px) {
  .ds-key-experiences .exp-grid {
    grid-template-columns: 1fr;
  }
}
.ds-key-experiences .exp-card {
  background: var(--surface);
  border-radius: 14px;
  border: 1px solid var(--brand-border);
  overflow: hidden;
  transition: transform 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94), box-shadow 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  position: relative;
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: inherit;
}
.ds-key-experiences .exp-card[href] {
  cursor: pointer;
}
.ds-key-experiences .exp-card[href]:hover {
  transform: translateY(-4px);
  box-shadow: 0 10px 32px color-mix(in srgb, var(--brand-deep) 10%, transparent);
}
.ds-key-experiences .exp-card-img {
  height: 200px;
  background-size: cover;
  background-position: center;
  position: relative;
  flex-shrink: 0;
}
@media (max-width: 576px) {
  .ds-key-experiences .exp-card-img {
    height: 180px;
  }
}
.ds-key-experiences .exp-card-img img {
  position: absolute;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
}
.ds-key-experiences .exp-card-body {
  padding: 22px;
  flex: 1;
  display: flex;
  flex-direction: column;
}
.ds-key-experiences .exp-card-body h3 {
  font-size: 18px;
  font-weight: 600;
  color: var(--brand-deep);
  margin-bottom: 8px;
}
.ds-key-experiences .exp-card-body p {
  font-size: 14px;
  color: var(--text-muted);
  line-height: 1.6;
  margin-bottom: 12px;
  flex: 1;
}
.ds-key-experiences .exp-card-cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: auto;
  padding-top: 8px;
  font-size: 13px;
  font-weight: 600;
  color: var(--brand-sky-text);
  transition: gap 0.2s;
}
.ds-key-experiences .exp-card-cta svg {
  width: 14px;
  height: 14px;
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.ds-key-experiences .exp-card:hover .exp-card-cta {
  gap: 10px;
}
.ds-key-experiences .exp-yc-tag,
.ds-key-experiences .exp-opt-tag {
  position: absolute;
  top: 14px;
  left: 14px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: color-mix(in srgb, var(--brand-sky) 40%, var(--brand-deep));
  color: var(--text-on-dark);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  padding: 5px 14px;
  border-radius: 50px;
  text-decoration: none;
  transition: background 0.2s;
}
.ds-key-experiences .exp-yc-tag svg,
.ds-key-experiences .exp-opt-tag svg {
  width: 12px;
  height: 12px;
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
}
.ds-key-experiences .exp-opt-tag {
  background: var(--brand-deep);
}
.ds-key-experiences .exp-yc-tag + .exp-opt-tag {
  top: 50px;
}
.ds-key-experiences .exp-optional-block {
  margin-top: 64px;
}
.ds-key-experiences .exp-optional-block .s-head p + p {
  margin-top: 12px;
}
.ds-key-experiences .exp-optional-block .s-head .exp-optional-all {
  margin-top: 18px;
}
.ds-key-experiences .exp-optional-block .exp-optional-all a {
  color: var(--sec-link, var(--brand-deep));
  font-weight: 600;
  text-decoration: underline;
  text-decoration-color: color-mix(in srgb, currentColor 35%, transparent);
  text-underline-offset: 4px;
}
.ds-key-experiences .exp-optional-block .exp-optional-all a svg {
  display: inline-block;
  width: 16px;
  height: 16px;
  margin-left: 4px;
  vertical-align: -3px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform 0.25s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.ds-key-experiences .exp-optional-block .exp-optional-all a:hover {
  text-decoration-color: currentColor;
}
.ds-key-experiences .exp-optional-block .exp-optional-all a:hover svg {
  transform: translateX(3px);
}
.ds-key-experiences .exp-optional-block .exp-optional-all a:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 3px;
}
.ds-key-experiences .exp-card-body .exp-tidbit {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin: 0;
  flex: 0 0 auto;
  padding: 10px 12px;
  border-radius: 10px;
  background: var(--surface-tint);
  border-left: 3px solid var(--brand-sky);
  font-size: 0.8125rem;
  line-height: 1.55;
  color: color-mix(in srgb, var(--text-muted) 80%, var(--text-primary));
}
.ds-key-experiences .exp-card-body .exp-tidbit svg {
  flex-shrink: 0;
  width: 15px;
  height: 15px;
  margin-top: 2px;
  fill: none;
  stroke: var(--brand-sky);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/*
    Destination Single · 3b. Guest Voices — single-card rotating testimonial
    slider on a white band. Reuses the testimonial visual tokens. Token-pure.

    No stars and no initial-in-a-circle avatar (client, Sep 2026). The card is a
    centred pull-quote now: opening mark, quote, accent rule, attribution — so the
    attribution centres with everything else instead of ranging left off a circle.
*/
.ds-guest-voices {
  background: var(--surface);
  position: relative;
  overflow: hidden;
}
.ds-guest-voices .s-head h2 {
  font-family: var(--font-display);
  font-weight: 400;
}
.ds-guest-voices .gv-slider {
  position: relative;
  max-width: 720px;
  margin: 48px auto 0;
}
.ds-guest-voices .gv-track {
  overflow: hidden;
  position: relative;
}
.ds-guest-voices .gv-card {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  flex-direction: column;
  text-align: center;
  align-items: center;
  display: flex;
  opacity: 0;
  pointer-events: none;
  transform: translateX(var(--gv-from, 40px));
  transition: opacity 0.5s ease, transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}
.ds-guest-voices .gv-card.active {
  position: relative;
  opacity: 1;
  pointer-events: auto;
  transform: translateX(0);
}
.ds-guest-voices .gv-card::before {
  content: "“";
  font-size: 80px;
  font-family: Georgia, serif;
  color: var(--brand-border);
  line-height: 0.6;
  margin-bottom: 18px;
}
.ds-guest-voices .gv-quote {
  font-size: 19px;
  color: var(--text-primary);
  line-height: 1.75;
  font-style: italic;
  margin-bottom: 28px;
  max-width: 580px;
  font-family: var(--font-body);
}
.ds-guest-voices .gv-divider {
  width: 36px;
  height: 2px;
  background: var(--brand-sky);
  margin-bottom: 20px;
  border-radius: 1px;
}
.ds-guest-voices .gv-author {
  display: flex;
  align-items: center;
  gap: 14px;
}
.ds-guest-voices .gv-author-text {
  text-align: center;
}
.ds-guest-voices .gv-name {
  font-size: 15px;
  font-weight: 600;
  color: var(--brand-deep);
}
.ds-guest-voices .gv-meta {
  font-size: 12px;
  color: var(--text-muted);
  margin-top: 2px;
  text-transform: uppercase;
  letter-spacing: 0.8px;
}
.ds-guest-voices .gv-controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  margin-top: 32px;
}
.ds-guest-voices .gv-arrow {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid var(--brand-border);
  background: var(--surface);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: border-color 0.2s, background 0.2s;
}
.ds-guest-voices .gv-arrow:hover {
  border-color: var(--brand-sky);
  background: var(--surface-tint);
}
.ds-guest-voices .gv-arrow svg {
  width: 18px;
  height: 18px;
  stroke: var(--brand-sky);
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.ds-guest-voices .gv-dots {
  display: flex;
  gap: 8px;
}
.ds-guest-voices .gv-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--brand-border);
  cursor: pointer;
  transition: background 0.2s, transform 0.2s;
}
.ds-guest-voices .gv-dot.active {
  background: var(--brand-sky);
  transform: scale(1.3);
}

/*
    Destination Single · 4. Customisable Day comparison — dark brand band with
    two side-by-side option cards. Preceded by the shared wave divider. Token-pure.
*/
.ds-your-choice {
  background: var(--brand-deep);
  position: relative;
  overflow: hidden;
}
.ds-your-choice::before {
  content: "";
  position: absolute;
  top: -80px;
  right: -80px;
  width: 400px;
  height: 400px;
  border-radius: 50%;
  background: radial-gradient(circle, color-mix(in srgb, var(--brand-sky) 10%, transparent) 0%, transparent 70%);
  pointer-events: none;
}
.ds-your-choice .container {
  position: relative;
  z-index: 1;
}
.ds-your-choice .s-head h2 {
  color: var(--text-on-dark);
  font-family: var(--font-display);
  font-weight: 400;
}
.ds-your-choice .s-head p {
  color: color-mix(in srgb, #fff 55%, transparent);
  max-width: 620px;
  margin-left: auto;
  margin-right: auto;
}
.ds-your-choice .yc-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 28px;
  margin-top: 48px;
}
@media (max-width: 992px) {
  .ds-your-choice .yc-grid {
    gap: 20px;
  }
}
@media (max-width: 768px) {
  .ds-your-choice .yc-grid {
    grid-template-columns: 1fr;
  }
}
.ds-your-choice .yc-option {
  background: color-mix(in srgb, #fff 5%, transparent);
  border: 1px solid color-mix(in srgb, var(--brand-sky) 20%, transparent);
  border-radius: 16px;
  overflow: hidden;
  transition: border-color 0.3s, background 0.3s, transform 0.3s;
  cursor: pointer;
  text-decoration: none;
  color: inherit;
  display: block;
}
.ds-your-choice .yc-option:hover {
  border-color: color-mix(in srgb, var(--brand-sky) 40%, transparent);
  background: color-mix(in srgb, #fff 8%, transparent);
  transform: translateY(-4px);
}
.ds-your-choice .yc-option-img {
  height: 220px;
  background-size: cover;
  background-position: center;
  position: relative;
}
@media (max-width: 576px) {
  .ds-your-choice .yc-option-img {
    height: 180px;
  }
}
.ds-your-choice .yc-option-img::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 60%;
  background: linear-gradient(to top, color-mix(in srgb, var(--brand-deep) 70%, transparent), transparent);
}
.ds-your-choice .yc-option-label {
  position: absolute;
  top: 16px;
  left: 16px;
  z-index: 2;
  background: var(--brand-sky-fill);
  color: var(--text-on-dark);
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  padding: 6px 16px;
  border-radius: 50px;
}
.ds-your-choice .yc-option-body {
  padding: 28px;
  display: flex;
  flex-direction: column;
  flex: 1;
}
@media (max-width: 576px) {
  .ds-your-choice .yc-option-body {
    padding: 20px;
  }
}
.ds-your-choice .yc-option-body h3 {
  font-size: 24px;
  font-weight: 600;
  color: var(--text-on-dark);
  margin-bottom: 6px;
  font-family: var(--font-body);
}
@media (max-width: 576px) {
  .ds-your-choice .yc-option-body h3 {
    font-size: 20px;
  }
}
.ds-your-choice .yc-option-body p {
  font-size: 15px;
  color: color-mix(in srgb, #fff 70%, transparent);
  line-height: 1.7;
  margin-bottom: 16px;
}
.ds-your-choice .yc-duration {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 600;
  color: var(--brand-aqua);
  text-transform: uppercase;
  letter-spacing: 0.8px;
  margin-bottom: 14px;
}
.ds-your-choice .yc-duration svg {
  width: 13px;
  height: 13px;
  stroke: var(--brand-aqua);
  fill: none;
  stroke-width: 2;
}
.ds-your-choice .yc-detail-list {
  list-style: none;
  margin: 0 0 0;
  padding: 0;
  flex: 1;
}
.ds-your-choice .yc-detail-list li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 14px;
  color: color-mix(in srgb, var(--brand-glass) 75%, transparent);
  margin-bottom: 8px;
  line-height: 1.5;
}
.ds-your-choice .yc-detail-list li svg {
  width: 16px;
  height: 16px;
  stroke: var(--brand-aqua);
  fill: none;
  stroke-width: 2;
  flex-shrink: 0;
  margin-top: 2px;
}
.ds-your-choice .yc-learn-more {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 20px;
  padding-top: 18px;
  border-top: 1px solid color-mix(in srgb, var(--brand-sky) 15%, transparent);
  font-size: 14px;
  font-weight: 600;
  color: var(--brand-sky-text);
  letter-spacing: 0.3px;
  transition: gap 0.2s, color 0.2s;
}
.ds-your-choice .yc-learn-more svg {
  width: 16px;
  height: 16px;
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.ds-your-choice .yc-option:hover .yc-learn-more {
  gap: 12px;
  color: var(--brand-glass);
}
.ds-your-choice .yc-available {
  text-align: center;
  margin-top: 32px;
  font-size: 15px;
  color: color-mix(in srgb, #fff 50%, transparent);
  letter-spacing: 0.3px;
}
.ds-your-choice .yc-available strong {
  color: color-mix(in srgb, #fff 80%, transparent);
}

/*
    Destination Single · Where You'll Stay.
    Property cards for the region, fed by the `accommodation_refs` relationship.
    Mirrors the .ds-key-experiences card language. Token-pure.
*/
.ds-accommodation {
  background: var(--surface);
}
.ds-accommodation .s-head h2 {
  font-family: var(--font-display);
  font-weight: 400;
}
.ds-accommodation .acc-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 22px;
  margin-top: 48px;
}
@media (max-width: 768px) {
  .ds-accommodation .acc-grid {
    grid-template-columns: 1fr;
  }
}
.ds-accommodation .acc-card {
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--brand-border);
  border-radius: 14px;
  overflow: hidden;
  transition: transform 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94), box-shadow 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.ds-accommodation .acc-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 10px 32px color-mix(in srgb, var(--brand-deep) 10%, transparent);
}
.ds-accommodation .acc-card-img {
  position: relative;
  height: 220px;
  flex-shrink: 0;
}
@media (max-width: 576px) {
  .ds-accommodation .acc-card-img {
    height: 180px;
  }
}
.ds-accommodation .acc-card-img img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.ds-accommodation .acc-nights {
  position: absolute;
  right: 14px;
  bottom: 14px;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--brand-deep) 82%, transparent);
  color: var(--text-on-dark);
  font-size: 0.8125rem;
  font-weight: 500;
}
.ds-accommodation .acc-nights svg {
  width: 14px;
  height: 14px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.ds-accommodation .acc-card-body {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 22px 24px 24px;
}
.ds-accommodation .acc-card-body h3 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 1.25rem;
  color: var(--brand-deep);
}
.ds-accommodation .acc-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 16px;
  font-size: 0.875rem;
  color: var(--text-muted);
}
.ds-accommodation .acc-loc {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.ds-accommodation .acc-loc svg {
  width: 15px;
  height: 15px;
  fill: none;
  stroke: var(--brand-sky);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.ds-accommodation .acc-stars {
  color: var(--brand-sky-text);
  letter-spacing: 2px;
}
.ds-accommodation .acc-established {
  font-size: 0.8125rem;
  color: var(--text-muted);
  font-style: italic;
}
.ds-accommodation .acc-desc {
  color: var(--text-primary);
  line-height: 1.65;
}
.ds-accommodation .acc-desc p {
  margin: 0 0 10px;
}
.ds-accommodation .acc-desc p:last-child {
  margin-bottom: 0;
}
.ds-accommodation .acc-features {
  list-style: none;
  margin: 4px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px 16px;
}
@media (max-width: 576px) {
  .ds-accommodation .acc-features {
    grid-template-columns: 1fr;
  }
}
.ds-accommodation .acc-features li {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 0.875rem;
  color: var(--text-primary);
}
.ds-accommodation .acc-features svg {
  flex-shrink: 0;
  width: 15px;
  height: 15px;
  margin-top: 3px;
  fill: none;
  stroke: var(--brand-sky);
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/*
    Destination Single · 6. Travel Information — one block (how PD visits).
    White band. Token-pure.
*/
.ds-travel-info {
  background: var(--surface);
}
.ds-travel-info .s-head h2 {
  font-family: var(--font-display);
  font-weight: 400;
}
.ds-travel-info .travel-info__grid {
  max-width: 640px;
  margin: 40px auto 0;
}
.ds-travel-info .travel-info__block h3 {
  font-size: 20px;
  font-weight: 700;
  color: var(--brand-deep);
  margin: 0 0 16px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.ds-travel-info .travel-info__block h3 svg {
  width: 24px;
  height: 24px;
  stroke: var(--brand-sky);
  fill: none;
  stroke-width: 1.8;
  flex-shrink: 0;
}
.ds-travel-info .travel-info__block p {
  font-size: 15.5px;
  color: color-mix(in srgb, var(--brand-deep) 82%, #fff);
  line-height: 1.75;
  margin: 0 0 12px;
}
.ds-travel-info .travel-info__block p:last-child {
  margin-bottom: 0;
}

/*
    Destination Single · 7. Tours That Visit — 3-column tour cards on a white
    band. Day count reuses the shared .cal-badge component. Token-pure.
*/
.ds-tours-visit {
  background: var(--surface);
}
.ds-tours-visit .s-head h2 {
  font-family: var(--font-display);
  font-weight: 400;
}
.ds-tours-visit .tv-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
  margin-top: 48px;
}
@media (max-width: 992px) {
  .ds-tours-visit .tv-grid {
    gap: 20px;
  }
}
@media (max-width: 768px) {
  .ds-tours-visit .tv-grid {
    grid-template-columns: 1fr;
  }
}
.ds-tours-visit .tv-card {
  background: var(--surface);
  border-radius: 14px;
  border: 1px solid var(--brand-border);
  overflow: hidden;
  transition: transform 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94), box-shadow 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  display: flex;
  flex-direction: column;
}
.ds-tours-visit .tv-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 20px 48px color-mix(in srgb, var(--brand-deep) 18%, transparent);
}
.ds-tours-visit .tv-card-img {
  height: 220px;
  background-size: cover;
  background-position: center;
  position: relative;
}
.ds-tours-visit .tv-card-img::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 65%;
  background: linear-gradient(to top, color-mix(in srgb, var(--brand-deep) 70%, transparent), transparent);
}
.ds-tours-visit .tv-card-img .tv-overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 18px 22px;
  z-index: 2;
}
.ds-tours-visit .tv-card-img .tv-overlay h3 {
  font-size: 22px;
  font-weight: 400;
  color: var(--text-on-dark);
  font-family: var(--font-body);
  text-shadow: 0 1px 3px color-mix(in srgb, #000 30%, transparent);
  margin-bottom: 2px;
}
.ds-tours-visit .tv-card-img .tv-overlay .tv-tree {
  font-size: 13px;
  color: color-mix(in srgb, #fff 60%, transparent);
  font-style: italic;
}
.ds-tours-visit .tv-badge {
  position: absolute;
  top: 14px;
  left: 14px;
  z-index: 2;
  padding: 4px 10px;
  border-radius: 4px;
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.8px;
}
.ds-tours-visit .tv-badge.tv-badge-both {
  background: color-mix(in srgb, var(--tour-both) 88%, transparent);
  color: var(--tour-both-ink);
}
.ds-tours-visit .tv-badge.tv-badge-north {
  background: color-mix(in srgb, var(--tour-north) 88%, transparent);
  color: var(--tour-north-ink);
}
.ds-tours-visit .tv-badge.tv-badge-south {
  background: color-mix(in srgb, var(--tour-south) 88%, transparent);
  color: var(--tour-south-ink);
}
.ds-tours-visit .tv-card-body {
  padding: 22px;
  flex: 1;
  display: flex;
  flex-direction: column;
}
@media (max-width: 576px) {
  .ds-tours-visit .tv-card-body {
    padding: 16px;
  }
}
.ds-tours-visit .tv-days-here {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 600;
  color: var(--brand-sky-text);
  margin-bottom: 10px;
  letter-spacing: 0.2px;
}
.ds-tours-visit .tv-days-here svg {
  width: 14px;
  height: 14px;
  stroke: var(--brand-sky);
  fill: none;
  stroke-width: 2;
}
.ds-tours-visit .tv-desc {
  font-size: 14px;
  color: color-mix(in srgb, var(--brand-deep) 82%, #fff);
  line-height: 1.6;
  margin-bottom: 14px;
}
.ds-tours-visit .tv-signature {
  font-size: 13px;
  color: var(--text-muted);
  line-height: 1.5;
  padding: 10px 0;
  border-top: 1px solid color-mix(in srgb, var(--brand-border) 55%, #fff);
  margin-top: auto;
}
.ds-tours-visit .tv-signature strong {
  color: var(--brand-deep);
  font-weight: 600;
}
.ds-tours-visit .tv-card-actions {
  display: flex;
  gap: 10px;
  margin-top: 16px;
}
.ds-tours-visit .tv-card-actions .view-btn {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12px 10px;
  background: var(--gradient-button);
  color: var(--gradient-button-fg);
  border-radius: 50px;
  font-size: 13px;
  font-weight: 800;
  cursor: pointer;
  transition: box-shadow 0.3s, transform 0.3s;
  letter-spacing: 1px;
  text-transform: uppercase;
  box-shadow: 0 2px 10px color-mix(in srgb, var(--brand-deep) 20%, transparent), inset 0 1px 0 color-mix(in srgb, var(--brand-glass) 30%, transparent);
  border: 1px solid color-mix(in srgb, #fff 15%, transparent);
  text-decoration: none;
}
.ds-tours-visit .tv-card-actions .view-btn:hover {
  box-shadow: 0 4px 16px color-mix(in srgb, var(--brand-deep) 30%, transparent);
  transform: translateY(-1px);
}
@media (max-width: 576px) {
  .ds-tours-visit .tv-card-actions .view-btn {
    min-height: 44px;
  }
}
.ds-tours-visit .tv-card-actions .callback-btn {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12px 10px;
  border: 1.5px solid color-mix(in srgb, var(--brand-sky) 35%, #fff);
  color: var(--brand-deep);
  border-radius: 50px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.2s, border-color 0.2s, transform 0.16s cubic-bezier(0.23, 1, 0.32, 1);
  letter-spacing: 1px;
  text-transform: uppercase;
  text-decoration: none;
}
.ds-tours-visit .tv-card-actions .callback-btn:hover {
  background: var(--surface-tint);
  border-color: var(--brand-sky);
}
.ds-tours-visit .tv-card-actions .callback-btn:active {
  transform: scale(0.97);
}
@media (max-width: 576px) {
  .ds-tours-visit .tv-card-actions .callback-btn {
    min-height: 44px;
  }
}

/*
    Destination region cards.

    Two consumers share the .dest-card visual (the @mixin below):
      .ds-nearby     — destination-single "Nearby Places", a fixed grid.
      .destinations  — the horizontal scroll strips, used by BOTH the home
                       "Explore New Zealand" section (s-dest-strip) and the
                       destination-single "Explore More" rail (.ds-related).
    Card styles stay scoped under these wrappers so they never collide. Token-pure.
*/
/* ---- 8. Nearby Places — fixed grid ---- */
.ds-nearby {
  background: var(--surface-tint);
}
.ds-nearby .s-head h2 {
  font-family: var(--font-display);
  font-weight: 400;
}
.ds-nearby .nearby-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  margin-top: 40px;
}
@media (max-width: 768px) {
  .ds-nearby .nearby-grid {
    grid-template-columns: 1fr 1fr;
  }
}
@media (max-width: 576px) {
  .ds-nearby .nearby-grid {
    grid-template-columns: 1fr;
  }
}
.ds-nearby .dest-card {
  border-radius: 10px;
  position: relative;
  overflow: hidden;
  cursor: pointer;
  text-decoration: none;
  box-shadow: 0 2px 12px color-mix(in srgb, #000 10%, transparent);
  transition: box-shadow 0.25s;
  height: 180px;
}
.ds-nearby .dest-card:hover {
  box-shadow: 0 8px 24px color-mix(in srgb, var(--brand-deep) 18%, transparent);
}
.ds-nearby .dest-card .dest-bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}
.ds-nearby .dest-card:hover .dest-bg {
  transform: scale(1.06);
}
.ds-nearby .dest-card::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 100px;
  background: linear-gradient(to top, color-mix(in srgb, var(--brand-deep) 65%, transparent), transparent);
  z-index: 1;
}
.ds-nearby .dest-card .content {
  position: absolute;
  bottom: 16px;
  left: 16px;
  z-index: 2;
}
.ds-nearby .dest-card h3 {
  font-size: 22px;
  color: var(--text-on-dark);
  font-weight: 400;
  font-family: var(--font-body);
  text-shadow: 0 1px 3px color-mix(in srgb, #000 30%, transparent);
}
.ds-nearby .dest-card .count {
  font-size: 12px;
  color: color-mix(in srgb, #fff 50%, transparent);
  margin-top: 3px;
  text-transform: uppercase;
  letter-spacing: 1px;
}
@media (max-width: 576px) {
  .ds-nearby .dest-card {
    height: 160px;
  }
}

/* ----------------------------------------------------------------------------
   Destination strips — horizontal scroll rows of region cards.

   Shared by the home "Explore New Zealand" section (s-dest-strip, source =
   islands → one row per island) and the destination-single "Explore More" rail
   (.ds-related, source = all → one row). Each card reveals an "Explore {name}"
   kicker + arrow on hover, matching the Hub region cards. Band colour comes from
   the section surface system (.section--bg-*) — never set here. Token-pure.
---------------------------------------------------------------------------- */
.destinations .s-head h2 {
  font-family: var(--font-display);
  font-weight: 400;
}
.destinations .dest-row {
  margin-top: 44px;
}
.destinations .dest-row + .dest-row {
  margin-top: 32px;
}
.destinations .dest-row-label {
  font-size: 13px;
  color: var(--brand-sky-text);
  text-transform: uppercase;
  letter-spacing: 2.5px;
  font-weight: 600;
  margin-bottom: 16px;
  margin-left: 40px;
  padding-left: 56px;
}
@media (max-width: 992px) {
  .destinations .dest-row-label {
    margin-left: 24px;
    padding-left: 48px;
  }
}
@media (max-width: 576px) {
  .destinations .dest-row-label {
    margin-left: 4px;
    padding-left: 32px;
    font-size: 12px;
  }
}
.destinations .dest-slider-wrap {
  position: relative;
  padding: 0 56px;
  margin: 0 40px;
}
@media (max-width: 992px) {
  .destinations .dest-slider-wrap {
    padding: 0 48px;
    margin: 0 24px;
  }
}
@media (max-width: 576px) {
  .destinations .dest-slider-wrap {
    padding: 0 32px;
    margin: 0 4px;
  }
}
.destinations .dest-strip {
  display: flex;
  gap: 16px;
  overflow-x: auto;
  scrollbar-width: none;
  padding: 0 0 32px;
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
}
.destinations .dest-strip::-webkit-scrollbar {
  display: none;
}
.destinations .dest-card {
  border-radius: 10px;
  position: relative;
  overflow: hidden;
  cursor: pointer;
  text-decoration: none;
  box-shadow: 0 2px 12px color-mix(in srgb, #000 10%, transparent);
  transition: box-shadow 0.25s;
  flex: 0 0 260px;
  height: 190px;
  scroll-snap-align: start;
  /* "Explore {name}" reveal — kicker fades in, arrow slides into the name,
     tour count collapses (same motion as the Hub region cards). */
}
.destinations .dest-card:hover {
  box-shadow: 0 8px 24px color-mix(in srgb, var(--brand-deep) 18%, transparent);
}
.destinations .dest-card .dest-bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}
.destinations .dest-card:hover .dest-bg {
  transform: scale(1.06);
}
.destinations .dest-card::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 100px;
  background: linear-gradient(to top, color-mix(in srgb, var(--brand-deep) 65%, transparent), transparent);
  z-index: 1;
}
.destinations .dest-card .content {
  position: absolute;
  bottom: 16px;
  left: 16px;
  z-index: 2;
}
.destinations .dest-card h3 {
  font-size: 22px;
  color: var(--text-on-dark);
  font-weight: 400;
  font-family: var(--font-body);
  text-shadow: 0 1px 3px color-mix(in srgb, #000 30%, transparent);
}
.destinations .dest-card .count {
  font-size: 12px;
  color: color-mix(in srgb, #fff 50%, transparent);
  margin-top: 3px;
  text-transform: uppercase;
  letter-spacing: 1px;
}
.destinations .dest-card .explore-kicker {
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 400;
  color: color-mix(in srgb, #fff 90%, transparent);
  text-shadow: 0 2px 10px color-mix(in srgb, #000 40%, transparent);
  transition: opacity 0.3s ease, max-height 0.3s ease;
}
.destinations .dest-card h3 {
  display: flex;
  align-items: center;
  gap: 8px;
}
.destinations .dest-card h3 .hover-arrow {
  display: inline-flex;
  align-items: center;
  opacity: 0;
  transform: translateX(-6px);
  transition: opacity 0.3s ease 0.1s, transform 0.3s ease 0.1s;
}
.destinations .dest-card h3 .hover-arrow svg {
  width: 18px;
  height: 18px;
  stroke: var(--text-on-dark);
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.destinations .dest-card .count {
  max-height: 30px;
  overflow: hidden;
  transition: opacity 0.25s ease, max-height 0.3s ease;
}
.destinations .dest-card:hover .explore-kicker {
  opacity: 1;
  max-height: 30px;
}
.destinations .dest-card:hover h3 .hover-arrow {
  opacity: 1;
  transform: translateX(0);
}
.destinations .dest-card:hover .count {
  opacity: 0;
  max-height: 0;
}
@media (max-width: 992px) {
  .destinations .dest-card {
    flex: 0 0 230px;
    height: 170px;
  }
  .destinations .dest-card h3 {
    font-size: 19px;
  }
}
@media (max-width: 576px) {
  .destinations .dest-card {
    flex: 0 0 190px;
    height: 140px;
    /* No hover on touch — keep the tour count, drop the hover-only chrome. */
  }
  .destinations .dest-card h3 {
    font-size: 17px;
  }
  .destinations .dest-card .explore-kicker,
  .destinations .dest-card h3 .hover-arrow {
    display: none;
  }
  .destinations .dest-card .count {
    opacity: 1;
    max-height: 30px;
  }
}
.destinations .dest-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 5;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid color-mix(in srgb, var(--brand-sky) 35%, #fff);
  background: var(--surface);
  color: var(--brand-sky);
  font-size: 24px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s, border-color 0.2s, color 0.2s;
  box-shadow: 0 2px 8px color-mix(in srgb, #000 6%, transparent);
}
.destinations .dest-arrow:hover {
  background: var(--surface-tint);
  border-color: var(--brand-sky);
  color: var(--brand-deep);
}
@media (max-width: 576px) {
  .destinations .dest-arrow {
    width: 36px;
    height: 36px;
    font-size: 18px;
    /* Keep a 44px hit area round the smaller phone button. */
  }
  .destinations .dest-arrow::before {
    content: "";
    position: absolute;
    inset: -4px;
    border-radius: 50%;
  }
}
.destinations .dest-arrow-left {
  left: 0;
}
.destinations .dest-arrow-right {
  right: 0;
}
.destinations .dest-view-all {
  text-align: center;
  padding: 28px 0 48px;
}
.destinations .dest-view-all a {
  font-size: 14px;
  color: var(--brand-sky-text);
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: 2px;
  font-weight: 600;
  border-bottom: 1px solid color-mix(in srgb, var(--brand-sky) 35%, #fff);
  padding-bottom: 3px;
  transition: color 0.25s, border-color 0.25s;
}
.destinations .dest-view-all a:hover {
  color: var(--brand-deep);
  border-color: var(--brand-deep);
}

/*
    Shared full-screen image lightbox — used by the Location gallery
    (location/gallery.php) and the Destination Single overview collage
    (dest-single/overview.php). Behaviour: initLightbox() in custom.js.
    Token-pure (#fff is a neutral, allowed).
*/
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 2000;
  background: color-mix(in srgb, var(--brand-ink) 92%, transparent);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  /* Closed, it is aria-hidden but its buttons were still in the tab order
     (axe aria-hidden-focus): visibility takes them out after the fade. */
  visibility: hidden;
  transition: opacity 0.35s ease, visibility 0s linear 0.35s;
}
.lightbox.active {
  opacity: 1;
  pointer-events: auto;
  visibility: visible;
  transition: opacity 0.35s ease, visibility 0s;
}

.lightbox-img {
  max-width: 90vw;
  max-height: 85vh;
  border-radius: 12px;
  box-shadow: 0 20px 60px color-mix(in srgb, #000 40%, transparent);
  object-fit: contain;
  transform: scale(0.92);
  transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}
.lightbox.active .lightbox-img {
  transform: scale(1);
}

.lightbox-caption {
  position: absolute;
  bottom: 32px;
  left: 50%;
  transform: translateX(-50%);
  color: color-mix(in srgb, #fff 85%, transparent);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.3px;
  text-shadow: 0 1px 8px color-mix(in srgb, #000 30%, transparent);
}

.lightbox-close {
  position: absolute;
  top: 24px;
  right: 28px;
  width: 44px;
  height: 44px;
  background: color-mix(in srgb, #fff 12%, transparent);
  border: 1px solid color-mix(in srgb, #fff 20%, transparent);
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s;
}
.lightbox-close:hover {
  background: color-mix(in srgb, #fff 25%, transparent);
}
.lightbox-close svg {
  width: 18px;
  height: 18px;
  stroke: #fff;
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
}

.lightbox-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 48px;
  height: 48px;
  background: color-mix(in srgb, #fff 10%, transparent);
  border: 1px solid color-mix(in srgb, #fff 20%, transparent);
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s;
}
.lightbox-nav:hover {
  background: color-mix(in srgb, #fff 25%, transparent);
}
.lightbox-nav svg {
  width: 20px;
  height: 20px;
  stroke: #fff;
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.lightbox-prev {
  left: 24px;
}

.lightbox-next {
  right: 24px;
}

/*
    Location / Attraction single — shared layout band.

    The wireframe's full-width 1440 content band. The theme has no global
    `.container` (it is scoped per chrome region), so the location sections get
    their own copy here, matched to the wireframe (0 48px → 0 32px → 0 20px).
*/
.article-section > .container,
.gallery-section > .container,
.visit-tips > .container,
.on-tours-section > .container,
.nearby-section > .container,
.back-region-section > .container {
  width: 100%;
  max-width: 1440px;
  margin: 0 auto;
  padding: 0 48px;
}

@media (max-width: 1024px) {
  .article-section > .container,
  .gallery-section > .container,
  .visit-tips > .container,
  .on-tours-section > .container,
  .nearby-section > .container,
  .back-region-section > .container {
    padding: 0 32px;
  }
}
@media (max-width: 768px) {
  .article-section > .container,
  .gallery-section > .container,
  .visit-tips > .container,
  .on-tours-section > .container,
  .nearby-section > .container,
  .back-region-section > .container {
    padding: 0 20px;
  }
}
/*
    Location hero — full-bleed Ken Burns image under a teal scrim, with the
    breadcrumb / kicker / title / sub / CTAs anchored to the bottom-left.
*/
.loc-hero {
  position: relative;
  min-height: 520px;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
}

.loc-hero-image {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center 40%;
  background-color: var(--brand-deep);
  animation: locKenBurns 20s ease-in-out infinite alternate;
}
.loc-hero-image::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--hero-scrim-text), linear-gradient(180deg, color-mix(in srgb, var(--brand-deep) 25%, transparent) 0%, color-mix(in srgb, var(--brand-deep) 40%, transparent) 40%, color-mix(in srgb, var(--brand-deep) 70%, transparent) 70%, color-mix(in srgb, var(--brand-deep) 90%, transparent) 100%);
}

@media (prefers-reduced-motion: reduce) {
  .loc-hero-image {
    animation: none;
  }
}
@keyframes locKenBurns {
  0% {
    transform: scale(1) translate(0, 0);
  }
  33% {
    transform: scale(1.04) translate(-0.8%, 0.4%);
  }
  66% {
    transform: scale(1.06) translate(0.6%, -0.6%);
  }
  100% {
    transform: scale(1.08) translate(-0.4%, 0.8%);
  }
}
.loc-hero-content {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 1440px;
  margin: 0 auto;
  padding: 80px 48px 56px;
}

.loc-breadcrumb {
  font-size: var(--hero-crumb-size);
  font-weight: var(--hero-crumb-weight);
  letter-spacing: var(--hero-crumb-tracking);
  text-transform: none;
  color: var(--hero-crumb-fg);
  margin-bottom: 20px;
}
.loc-breadcrumb a,
.loc-breadcrumb span {
  color: inherit;
  text-decoration: none;
  transition: color 0.2s;
}
.loc-breadcrumb a:hover {
  color: var(--text-on-dark);
}
.loc-breadcrumb .sep {
  margin: 0 8px;
  opacity: 0.5;
}

.loc-hero-kicker {
  font-size: var(--hero-kicker-size);
  font-weight: var(--hero-kicker-weight);
  letter-spacing: var(--hero-kicker-tracking);
  text-transform: uppercase;
  color: var(--text-on-dark);
  margin-bottom: 14px;
}

.loc-hero h1 {
  font-size: 56px;
  color: #fff;
  font-weight: 700;
  font-family: var(--font-body);
  line-height: 1.1;
  letter-spacing: -0.5px;
  margin-bottom: 18px;
  text-shadow: 0 2px 20px color-mix(in srgb, #000 15%, transparent);
}

.loc-hero-sub {
  font-size: 19px;
  color: color-mix(in srgb, #fff 85%, transparent);
  line-height: 1.7;
  max-width: 680px;
  letter-spacing: 0.2px;
  text-shadow: 0 1px 8px color-mix(in srgb, #000 10%, transparent);
  margin-bottom: 28px;
}

.loc-hero-ctas {
  display: flex;
  gap: 14px;
  align-items: center;
  flex-wrap: wrap;
  margin-bottom: 24px;
}
.loc-hero-ctas .btn {
  padding: 14px 32px;
  font-size: 13px;
}
.loc-hero-ctas .btn-outline {
  border-color: color-mix(in srgb, #fff 40%, transparent);
  color: var(--text-on-dark);
}
.loc-hero-ctas .btn-outline:hover {
  background: color-mix(in srgb, #fff 12%, transparent);
  border-color: color-mix(in srgb, var(--brand-glass) 60%, transparent);
  color: var(--text-on-dark);
}

@media (max-width: 1024px) {
  .loc-hero {
    min-height: 440px;
  }
  .loc-hero-content {
    padding: 64px 32px 48px;
  }
  .loc-hero h1 {
    font-size: 48px;
  }
}
@media (max-width: 768px) {
  .loc-hero {
    min-height: 380px;
  }
  .loc-hero-content {
    padding: 48px 20px 40px;
  }
  .loc-hero h1 {
    font-size: 36px;
  }
  .loc-hero-sub {
    font-size: 17px;
  }
}
@media (max-width: 480px) {
  .loc-hero {
    min-height: 340px;
  }
  .loc-hero-content {
    padding: 40px 16px 32px;
  }
  .loc-hero h1 {
    font-size: 30px;
  }
  .loc-hero-sub {
    font-size: 16px;
  }
}
/*
    Location article + sticky sidebar.
*/
.article-section {
  padding: 72px 0 80px;
  background: var(--surface);
}

.article-layout {
  display: grid;
  grid-template-columns: 1fr 340px;
  gap: 56px;
  align-items: start;
}

/* ---- Editorial body ---- */
.article-body h2 {
  font-family: var(--font-display);
  font-size: 44px;
  font-weight: 400;
  color: var(--brand-deep);
  margin-bottom: 28px;
  line-height: 1.1;
}
.article-body h3 {
  font-size: 22px;
  font-weight: 700;
  color: var(--brand-deep);
  margin-top: 36px;
  margin-bottom: 14px;
  line-height: 1.3;
}
.article-body p {
  font-size: 17px;
  color: var(--text-primary);
  line-height: 1.8;
  margin-bottom: 20px;
  letter-spacing: 0.15px;
}
.article-body p .maori-term {
  font-style: italic;
  color: var(--brand-deep);
  font-weight: 500;
}
.article-body .maori-term {
  font-style: italic;
  color: var(--brand-deep);
  font-weight: 500;
}
.article-body .maori-box {
  background: var(--surface-tint-deep);
  border-radius: 10px;
  padding: 16px 20px;
  margin: 0 0 24px;
}
.article-body .maori-box p {
  margin: 0;
}
.article-body .maori-box p + p {
  margin-top: 8px;
}
.article-body .maori-box__label {
  font-weight: 600;
  color: var(--brand-deep);
}
.article-body .pull-quote {
  border-left: 3px solid var(--brand-sky);
  padding: 20px 28px;
  margin: 32px 0;
  background: color-mix(in srgb, var(--brand-sky) 5%, var(--surface));
  border-radius: 0 10px 10px 0;
  font-size: 18px;
  font-style: italic;
  color: color-mix(in srgb, var(--brand-deep) 65%, var(--text-muted));
  line-height: 1.7;
}
.article-body .tip-box {
  background: var(--surface-tint);
  border: 1px solid var(--brand-border);
  border-radius: 12px;
  padding: 24px 28px;
  margin: 28px 0;
}
.article-body .tip-box h4 {
  font-size: 14px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  color: var(--brand-sky-text);
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.article-body .tip-box ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
.article-body .tip-box ul li {
  font-size: 15px;
  color: color-mix(in srgb, var(--brand-deep) 65%, var(--text-muted));
  line-height: 1.6;
  padding: 5px 0 5px 20px;
  position: relative;
}
.article-body .tip-box ul li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 13px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--brand-aqua);
}
.article-body .pd-callout {
  background: linear-gradient(135deg, color-mix(in srgb, var(--brand-deep) 4%, transparent), color-mix(in srgb, var(--brand-sky) 8%, transparent));
  border: 1px solid color-mix(in srgb, var(--brand-sky) 20%, transparent);
  border-radius: 12px;
  padding: 28px;
  margin: 32px 0 0;
}
.article-body .pd-callout h3 {
  font-size: 20px;
  margin-top: 0;
  margin-bottom: 10px;
}
.article-body .pd-callout p {
  font-size: 16px;
  color: color-mix(in srgb, var(--brand-deep) 65%, var(--text-muted));
  margin-bottom: 0;
}

/* ---- Embedded map ---- */
.article-map {
  margin: 28px 0;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid var(--brand-border);
}
.article-map iframe {
  display: block;
  width: 100%;
}
.article-map__caption {
  padding: 12px 16px;
  background: color-mix(in srgb, var(--brand-sky) 5%, var(--surface));
  font-size: 13px;
  color: var(--text-muted);
  display: flex;
  align-items: center;
  gap: 8px;
}
.article-map__caption svg {
  width: 15px;
  height: 15px;
  stroke: var(--brand-sky);
  fill: none;
  stroke-width: 2;
  flex-shrink: 0;
}

/* ---- Sticky sidebar ---- */
.loc-sidebar {
  position: sticky;
  top: 100px;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.sidebar-card {
  background: var(--surface);
  border: 1px solid var(--brand-border);
  border-radius: 14px;
  overflow: hidden;
}

.sidebar-card-header {
  background: var(--brand-deep);
  padding: 18px 24px;
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1.8px;
  color: var(--brand-aqua);
}

.sidebar-card-body {
  padding: 20px 24px;
}

.fact-row {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid var(--surface-tint);
}
.fact-row:last-child {
  border-bottom: none;
}

.fact-icon {
  width: 32px;
  height: 32px;
  background: var(--surface-tint);
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.fact-icon svg {
  width: 16px;
  height: 16px;
  stroke: var(--brand-sky);
  fill: none;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.fact-label {
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--text-subtle);
  margin-bottom: 2px;
}

.fact-value {
  font-size: 15px;
  color: var(--text-primary);
  font-weight: 500;
  line-height: 1.4;
}

/* ---- Tour prompt card ---- */
.tour-prompt-card {
  background: color-mix(in srgb, var(--brand-sky) 5%, var(--surface));
}
.tour-prompt-card .sidebar-card-body {
  text-align: center;
  padding: 24px 20px;
}
.tour-prompt-card__title {
  font-family: var(--font-display);
  font-size: 22px;
  color: var(--brand-deep);
  margin-bottom: 8px;
}
.tour-prompt-card__body {
  font-size: 14px;
  color: var(--text-muted);
  line-height: 1.6;
  margin-bottom: 16px;
}
.tour-prompt-card__link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 600;
  color: var(--brand-sky-text);
  text-decoration: none;
  transition: gap 0.2s;
}
.tour-prompt-card__link:hover {
  gap: 12px;
  color: var(--brand-sky-text);
}
.tour-prompt-card__link svg {
  width: 14px;
  height: 14px;
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
}

/* ---- Related attractions ---- */
.related-links-card .sidebar-card-body {
  padding: 16px 24px;
}

.related-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 0;
  border-bottom: 1px solid var(--surface-tint);
  text-decoration: none;
  color: var(--brand-deep);
  font-size: 15px;
  font-weight: 500;
  transition: color 0.2s;
}
.related-link:last-child {
  border-bottom: none;
}
.related-link:hover {
  color: var(--brand-sky-text);
}
.related-link svg {
  width: 16px;
  height: 16px;
  stroke: color-mix(in srgb, var(--brand-sky) 45%, var(--surface));
  fill: none;
  stroke-width: 2;
  transition: stroke 0.2s, transform 0.2s;
}
.related-link:hover svg {
  stroke: var(--brand-sky);
  transform: translateX(3px);
}

@media (max-width: 1024px) {
  .article-layout {
    grid-template-columns: 1fr 300px;
    gap: 40px;
  }
}
@media (max-width: 768px) {
  .article-layout {
    grid-template-columns: 1fr;
    gap: 32px;
  }
  .loc-sidebar {
    position: static;
  }
  .article-body h2 {
    font-size: 36px;
  }
}
@media (max-width: 480px) {
  .article-body h2 {
    font-size: 30px;
  }
  .article-body h3 {
    font-size: 20px;
  }
  .article-body p {
    font-size: 16px;
  }
}
/*
    Location gallery (masonry-ish grid). The full-screen lightbox it opens is the
    shared component in _lightbox.scss.
*/
.gallery-section {
  background: var(--surface-tint);
  padding: 72px 0 80px;
}

.gallery-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: auto auto;
  gap: 16px;
  margin-top: 48px;
}

.gallery-item {
  border-radius: 12px;
  overflow: hidden;
  position: relative;
  cursor: pointer;
  min-height: 240px;
  /* Hover scrim */
  /* Expand icon (white stroke data-URI — no colour literal) */
}
.gallery-item:nth-child(1) {
  grid-column: 1/3;
  grid-row: 1;
  min-height: 320px;
}
.gallery-item:nth-child(2) {
  grid-column: 3;
  grid-row: 1;
}
.gallery-item:nth-child(3), .gallery-item:nth-child(4), .gallery-item:nth-child(5) {
  min-height: 240px;
}
.gallery-item .gallery-bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}
.gallery-item:hover .gallery-bg {
  transform: scale(1.06);
}
.gallery-item::after {
  content: "";
  position: absolute;
  inset: 0;
  background: color-mix(in srgb, var(--brand-deep) 0%, transparent);
  z-index: 1;
  transition: background 0.3s;
}
.gallery-item:hover::after {
  background: color-mix(in srgb, var(--brand-deep) 15%, transparent);
}
.gallery-item::before {
  content: "";
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 3;
  width: 32px;
  height: 32px;
  background: color-mix(in srgb, #fff 20%, transparent);
  backdrop-filter: blur(6px);
  border-radius: 50%;
  opacity: 0;
  transition: opacity 0.25s;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='15 3 21 3 21 9'/%3E%3Cpolyline points='9 21 3 21 3 15'/%3E%3Cline x1='21' y1='3' x2='14' y2='10'/%3E%3Cline x1='3' y1='21' x2='10' y2='14'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
}
.gallery-item:hover::before {
  opacity: 1;
}

.gallery-caption {
  position: absolute;
  bottom: 14px;
  left: 16px;
  z-index: 2;
  font-size: 14px;
  color: #fff;
  font-weight: 600;
  letter-spacing: 0.3px;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 0.3s, transform 0.3s;
  text-shadow: 0 1px 4px color-mix(in srgb, #000 30%, transparent);
}
.gallery-item:hover .gallery-caption {
  opacity: 1;
  transform: translateY(0);
}

/*
    Six or more photos: drop the wide lead and tile evenly. The mosaic above is
    drawn for five, so a sixth lands alone on a third row and the wide first
    image reads as a mistake rather than a design. Higher specificity than the
    nth-child rules above (and in every breakpoint below), so it wins wherever
    it applies.
*/
.gallery-grid:has(.gallery-item:nth-child(6)) .gallery-item:nth-child(1) {
  grid-column: auto;
  grid-row: auto;
  min-height: 240px;
}
.gallery-grid:has(.gallery-item:nth-child(6)) .gallery-item:nth-child(2) {
  grid-column: auto;
  grid-row: auto;
}

@media (max-width: 1024px) {
  .gallery-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .gallery-item:nth-child(1) {
    grid-column: 1/3;
  }
  .gallery-item:nth-child(2) {
    grid-column: 1;
  }
  .gallery-item:nth-child(3) {
    grid-column: 2;
  }
  .gallery-item:nth-child(4) {
    grid-column: 1;
  }
  .gallery-item:nth-child(5) {
    grid-column: 2;
  }
}
@media (max-width: 768px) {
  .gallery-grid {
    grid-template-columns: 1fr 1fr;
  }
  .gallery-item:nth-child(1) {
    grid-column: 1/3;
    min-height: 240px;
  }
  .gallery-item:nth-child(n+2) {
    grid-column: auto;
    min-height: 180px;
  }
  .gallery-item:last-child:nth-child(odd) {
    grid-column: 1/3;
  }
}
@media (max-width: 480px) {
  .gallery-grid {
    grid-template-columns: 1fr;
  }
  .gallery-item,
  .gallery-item:nth-child(1),
  .gallery-item:last-child:nth-child(odd) {
    grid-column: 1;
    min-height: 200px;
  }
}
/*
    Location · Plan Your Visit — Getting There + Visitor Tips.
*/
.visit-tips {
  background: color-mix(in srgb, var(--brand-sky) 5%, var(--surface));
  border-top: 1px solid var(--brand-border);
}
.visit-tips > .container {
  padding-top: 72px;
  padding-bottom: 72px;
}

.visit-tips__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  max-width: 960px;
  margin: 40px auto 0;
}

.visit-tips__block h3 {
  font-size: 20px;
  font-weight: 700;
  color: var(--brand-deep);
  margin: 0 0 16px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.visit-tips__block h3 svg {
  width: 24px;
  height: 24px;
  stroke: var(--brand-sky);
  fill: none;
  stroke-width: 1.8;
  flex-shrink: 0;
}
.visit-tips__block p {
  font-size: 15.5px;
  color: color-mix(in srgb, var(--brand-deep) 65%, var(--text-muted));
  line-height: 1.75;
  margin: 0 0 12px;
}
.visit-tips__block p:last-child {
  margin-bottom: 0;
}

.visit-tips__detail {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 14px 16px;
  margin-bottom: 6px;
  font-size: 14.5px;
  color: color-mix(in srgb, var(--brand-deep) 65%, var(--text-muted));
  line-height: 1.55;
  background: var(--surface);
  border-radius: 10px;
  border: 1px solid color-mix(in srgb, var(--brand-border) 65%, var(--surface));
  transition: box-shadow 0.2s;
}
.visit-tips__detail:hover {
  box-shadow: 0 2px 8px color-mix(in srgb, var(--brand-deep) 6%, transparent);
}
.visit-tips__detail strong {
  color: var(--brand-deep);
  font-weight: 600;
}

.visit-tips__detail-icon {
  width: 20px;
  height: 20px;
  min-width: 20px;
  margin-top: 1px;
  stroke: var(--brand-sky);
  fill: none;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

@media (max-width: 768px) {
  .visit-tips__grid {
    grid-template-columns: 1fr;
    gap: 36px;
  }
}
/*
    Location · On Our Tours — dark band of "journey" cards.
*/
.on-tours-section {
  background: var(--brand-deep);
  padding: 80px 0;
  position: relative;
  overflow: hidden;
}
.on-tours-section::before {
  content: "";
  position: absolute;
  top: -80px;
  right: -80px;
  width: 400px;
  height: 400px;
  border-radius: 50%;
  background: radial-gradient(circle, color-mix(in srgb, var(--brand-sky) 10%, transparent) 0%, transparent 70%);
  pointer-events: none;
}
.on-tours-section .s-head h2 {
  color: var(--text-on-dark);
  font-family: var(--font-display);
  font-size: 44px;
  font-weight: 400;
}
.on-tours-section .s-head p {
  color: color-mix(in srgb, #fff 50%, transparent);
  font-size: 17px;
}

.journey-cards {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 24px;
  margin-top: 48px;
}
.journey-cards > .journey-card {
  flex: 0 1 calc((100% - 48px) / 3);
  min-width: 0;
}

.journey-card {
  background: var(--surface);
  border: 1px solid var(--brand-border);
  border-radius: 14px;
  overflow: hidden;
  transition: border-color 0.3s, transform 0.35s, box-shadow 0.35s;
  text-decoration: none;
  display: flex;
  flex-direction: column;
  color: inherit;
}
.journey-card:focus-visible {
  outline: 2px solid var(--brand-glass);
  outline-offset: 3px;
}
.journey-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 20px 48px color-mix(in srgb, var(--brand-deep) 18%, transparent);
}

.jc-img {
  height: 180px;
  background-size: cover;
  background-position: center;
  background-color: var(--brand-deep);
  position: relative;
}
.jc-img::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 60%;
  background: linear-gradient(to top, color-mix(in srgb, var(--brand-deep) 70%, transparent), transparent);
}

.jc-badge {
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 2;
  padding: 3px 10px;
  border-radius: 4px;
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.6px;
}

.jc-badge-both {
  background: color-mix(in srgb, var(--tour-both) 88%, transparent);
  color: var(--tour-both-ink);
}

.jc-badge-north {
  background: color-mix(in srgb, var(--tour-north) 88%, transparent);
  color: var(--tour-north-ink);
}

.jc-badge-south {
  background: color-mix(in srgb, var(--tour-south) 88%, transparent);
  color: var(--tour-south-ink);
}

.jc-img-overlay {
  position: absolute;
  bottom: 12px;
  left: 14px;
  z-index: 2;
}
.jc-img-overlay h3 {
  font-size: 20px;
  font-weight: 600;
  color: #fff;
  text-shadow: 0 1px 4px color-mix(in srgb, #000 30%, transparent);
  margin-bottom: 2px;
}
.jc-img-overlay .jc-tree {
  font-size: 12px;
  color: color-mix(in srgb, #fff 60%, transparent);
  font-style: italic;
}

.jc-body {
  padding: 22px;
  flex: 1;
  display: flex;
  flex-direction: column;
}

.jc-anchor {
  font-size: 12px;
  font-weight: 600;
  color: var(--brand-sky-text);
  margin-bottom: 10px;
  letter-spacing: 0.2px;
}

.jc-desc {
  font-size: 14px;
  color: var(--text-muted);
  line-height: 1.6;
  margin-bottom: 16px;
}

.jc-also-label {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: 10px;
  margin-top: auto;
}

.jc-thumbs {
  display: flex;
  gap: 6px;
  margin-bottom: 16px;
}

.jc-thumb {
  width: 52px;
  height: 40px;
  border-radius: 6px;
  background-size: cover;
  background-position: center;
  background-color: var(--surface-tint);
  border: 1.5px solid var(--brand-border);
  position: relative;
  transition: border-color 0.2s, transform 0.2s;
  display: block;
  text-decoration: none;
  /* Tooltip */
}
.jc-thumb:hover {
  border-color: var(--brand-sky);
  transform: scale(1.08);
}
.jc-thumb::after {
  content: attr(title);
  position: absolute;
  bottom: calc(100% + 6px);
  left: 50%;
  transform: translateX(-50%);
  background: var(--brand-deep);
  color: #fff;
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
  padding: 4px 10px;
  border-radius: 4px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s;
}
.jc-thumb:hover::after {
  opacity: 1;
}

.jc-thumb-more {
  width: 52px;
  height: 40px;
  border-radius: 6px;
  background: var(--surface-tint);
  border: 1.5px solid var(--brand-border);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 700;
  color: var(--brand-sky-text);
}

.jc-cta {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 600;
  color: var(--brand-sky-text);
  transition: gap 0.2s;
  padding-top: 14px;
  border-top: 1px solid color-mix(in srgb, var(--brand-border) 80%, var(--surface));
}
.journey-card:hover .jc-cta {
  gap: 10px;
}
.jc-cta svg {
  width: 14px;
  height: 14px;
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.on-tours-bottom {
  text-align: center;
  margin-top: 40px;
  font-size: 15px;
  color: color-mix(in srgb, #fff 45%, transparent);
  line-height: 1.6;
}

@media (max-width: 1024px) {
  .journey-cards > .journey-card {
    flex-basis: calc((100% - 24px) / 2);
  }
}
@media (max-width: 768px) {
  .journey-cards {
    flex-wrap: nowrap;
    justify-content: flex-start;
    gap: 14px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding-left: 20px;
    margin: 32px -20px 0;
    padding: 6px 20px 10px;
    scrollbar-width: none;
  }
  .journey-cards::-webkit-scrollbar {
    display: none;
  }
  .journey-cards > .journey-card {
    flex: 0 0 82%;
    max-width: 360px;
    scroll-snap-align: start;
  }
  .journey-cards > .journey-card:hover {
    transform: none;
  }
  .journey-cards .jc-desc {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 4;
    line-clamp: 4;
    overflow: hidden;
  }
  .journey-cards > .journey-card:only-child {
    flex-basis: 100%;
    margin: 0 auto;
  }
  .on-tours-section .s-head h2 {
    font-size: 36px;
  }
}
@media (max-width: 480px) {
  .on-tours-section .s-head h2 {
    font-size: 30px;
  }
}
/*
    Location · More to Explore Nearby — horizontal card rail.
*/
.nearby-section {
  background: color-mix(in srgb, var(--brand-sky) 5%, var(--surface));
  padding: 72px 0 80px;
}

.nearby-scroll {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  justify-content: center;
  margin-top: 48px;
}

.nearby-card {
  flex: 0 0 280px;
  border-radius: 12px;
  overflow: hidden;
  background: var(--surface);
  border: 1px solid var(--brand-border);
  scroll-snap-align: start;
  transition: transform 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94), box-shadow 0.35s;
  cursor: pointer;
  text-decoration: none;
  color: inherit;
  display: block;
}
.nearby-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 32px color-mix(in srgb, var(--brand-deep) 12%, transparent);
}

.nearby-card-img {
  height: 180px;
  position: relative;
  overflow: hidden;
}
.nearby-card-img .nearby-bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  background-color: var(--surface-tint);
  transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}

.nearby-card:hover .nearby-bg {
  transform: scale(1.06);
}

.nearby-card-body {
  padding: 18px 20px;
}
.nearby-card-body :is(h3, h4, h5, h6) {
  font-size: 18px;
  font-weight: 600;
  color: var(--brand-deep);
  margin-bottom: 4px;
  font-family: var(--font-body);
}
.nearby-card-body p {
  font-size: 14px;
  color: var(--text-muted);
  line-height: 1.5;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  overflow: hidden;
}

@media (max-width: 480px) {
  .nearby-card {
    flex: 0 0 260px;
  }
}
/*
    Location · Back to Region — region preview card + prompt.
*/
.back-region-section {
  background: var(--surface);
  padding: 56px 0 64px;
  border-top: 1px solid var(--brand-border);
}

.back-region-inner {
  display: flex;
  align-items: center;
  gap: 32px;
}

.region-card-preview {
  width: 260px;
  height: 160px;
  border-radius: 12px;
  overflow: hidden;
  position: relative;
  flex-shrink: 0;
  display: block;
  text-decoration: none;
}
.region-card-preview .region-bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  background-color: var(--surface-tint);
  transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}
.region-card-preview:hover .region-bg {
  transform: scale(1.06);
}
.region-card-preview::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 80px;
  background: linear-gradient(to top, color-mix(in srgb, var(--brand-deep) 60%, transparent), transparent);
}
.region-card-preview .region-name {
  position: absolute;
  bottom: 14px;
  left: 16px;
  z-index: 2;
  font-size: 20px;
  font-weight: 600;
  color: #fff;
  text-shadow: 0 1px 4px color-mix(in srgb, #000 30%, transparent);
}

.back-region-text h3 {
  font-family: var(--font-display);
  font-size: 32px;
  font-weight: 400;
  color: var(--brand-deep);
  margin-bottom: 10px;
  line-height: 1.2;
}
.back-region-text p {
  font-size: 16px;
  color: var(--text-muted);
  line-height: 1.65;
  margin-bottom: 16px;
}

.back-region-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 600;
  color: var(--brand-sky-text);
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  transition: color 0.2s;
}
.back-region-link:hover {
  color: var(--brand-deep);
}
.back-region-link svg {
  width: 16px;
  height: 16px;
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
  transition: transform 0.2s;
}
.back-region-link:hover svg {
  transform: translateX(4px);
}

@media (max-width: 768px) {
  .back-region-inner {
    flex-direction: column;
    text-align: center;
  }
  .region-card-preview {
    width: 100%;
    max-width: 300px;
  }
  .back-region-link {
    justify-content: center;
  }
}
/*
    Section · Location Grid — every published Location as a card grid,
    optionally grouped under destination headings.

    The cards are the Location page's nearby-card (_loc-nearby.scss); this file
    lays them out and styles the jump row and group headings from the section
    scheme tokens, so the block reads on any of the four bands.

    Grouped, each destination becomes a swipeable rail on phones: 50+ stacked
    full-width cards would make a page twenty screens long.
*/
.location-grid .location-grid__jump {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  margin: 0 auto 64px;
  max-width: 960px;
}
@media (max-width: 768px) {
  .location-grid .location-grid__jump {
    flex-wrap: nowrap;
    justify-content: flex-start;
    overflow-x: auto;
    margin: 0 -20px 48px;
    padding: 0 20px 2px;
    scrollbar-width: none;
  }
  .location-grid .location-grid__jump::-webkit-scrollbar {
    display: none;
  }
}
.location-grid .location-grid__chip {
  flex: 0 0 auto;
  padding: 8px 16px;
  border: 1px solid var(--sec-border);
  border-radius: 50px;
  background: var(--surface);
  color: var(--sec-fg);
  font-size: 14px;
  font-weight: 600;
  white-space: nowrap;
  text-decoration: none;
  transition: border-color 0.2s ease, color 0.2s ease;
}
.location-grid .location-grid__chip:hover {
  border-color: var(--sec-link);
  color: var(--sec-link);
}
.location-grid .location-grid__group,
.location-grid .location-grid__island {
  scroll-margin-top: 110px;
}
.location-grid .location-grid__island {
  color: var(--sec-fg);
  font-size: 32px;
  margin: 0 0 24px;
}
.location-grid .location-grid__group + .location-grid__group .location-grid__island {
  margin-top: 32px;
}
.location-grid .location-grid__group + .location-grid__group {
  margin-top: 64px;
}
@media (max-width: 768px) {
  .location-grid .location-grid__group + .location-grid__group {
    margin-top: 48px;
  }
}
.location-grid .location-grid__group-head {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 4px 16px;
  margin: 0 0 24px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--sec-border);
}
.location-grid .location-grid__group-title {
  color: var(--sec-fg);
  font-size: 24px;
  font-weight: 600;
  margin: 0;
}
@media (max-width: 768px) {
  .location-grid .location-grid__group-title {
    flex-basis: 100%;
  }
}
.location-grid .location-grid__count {
  color: var(--sec-fg-muted);
  font-size: 14px;
}
.location-grid .location-grid__dest-link {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--sec-link);
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
}
.location-grid .location-grid__dest-link svg {
  transition: transform 0.25s cubic-bezier(0.22, 1, 0.36, 1);
}
.location-grid .location-grid__dest-link:hover svg {
  transform: translateX(3px);
}
.location-grid .location-grid__cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 20px;
}
.location-grid .nearby-card {
  flex: none;
  min-width: 0;
}
.location-grid :is(.nearby-card, .location-grid__chip, .location-grid__dest-link):focus-visible {
  outline: 2px solid var(--sec-link);
  outline-offset: 3px;
}
@media (max-width: 768px) {
  .location-grid.location-grid--grouped .location-grid__cards {
    display: flex;
    gap: 14px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding-left: 20px;
    margin: 0 -20px;
    padding: 4px 20px 8px;
    scrollbar-width: none;
  }
  .location-grid.location-grid--grouped .location-grid__cards::-webkit-scrollbar {
    display: none;
  }
  .location-grid.location-grid--grouped .location-grid__cards .nearby-card {
    flex: 0 0 78%;
  }
  .location-grid.location-grid--grouped .location-grid__cards .nearby-card:hover {
    transform: none;
  }
  .location-grid.location-grid--grouped .location-grid__cards .nearby-card-img {
    height: 160px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .location-grid .location-grid__dest-link svg,
  .location-grid .location-grid__chip {
    transition: none;
  }
}
/*
    Section · Your Choice Options — one chapter per destination: a sticky
    column (destination, intro, tours) beside the options, set out as a
    this-or-that pair with a script "or" between them, because the guest picks
    one. Section scheme tokens throughout, so it reads on any of the four bands.

    The option copy reuses the tour page's Read more (.yc-option-text +
    .yc-readmore in js/custom.js); the clamp is styled here.
*/
.yco {
  --yco-card-bg: var(--surface);
  --yco-head-top: 120px;
  scroll-margin-top: 90px;
}
.yco .yco-jump {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  margin: 0 auto 64px;
}
@media (max-width: 768px) {
  .yco .yco-jump {
    flex-wrap: nowrap;
    justify-content: flex-start;
    overflow-x: auto;
    margin: 0 -20px 48px;
    padding: 2px 20px 4px;
    scrollbar-width: none;
  }
  .yco .yco-jump::-webkit-scrollbar {
    display: none;
  }
}
.yco .yco-jump__chip {
  flex: 0 0 auto;
  padding: 8px 18px;
  border: 1px solid var(--sec-border);
  border-radius: 50px;
  background: var(--yco-card-bg);
  color: var(--sec-fg);
  font-size: 14px;
  font-weight: 600;
  white-space: nowrap;
  text-decoration: none;
  transition: border-color 0.2s ease, color 0.2s ease;
}
.yco .yco-jump__chip:hover {
  border-color: var(--sec-link);
  color: var(--sec-link);
}
.yco .yco-chapter {
  display: grid;
  grid-template-columns: minmax(260px, 340px) 1fr;
  gap: 48px;
  align-items: start;
  scroll-margin-top: 110px;
}
.yco .yco-chapter + .yco-chapter {
  margin-top: 96px;
  padding-top: 96px;
  border-top: 1px solid var(--sec-border);
}
@media (max-width: 1100px) {
  .yco .yco-chapter {
    grid-template-columns: 1fr;
    gap: 32px;
  }
  .yco .yco-chapter + .yco-chapter {
    margin-top: 64px;
    padding-top: 64px;
  }
}
.yco .yco-chapter__head {
  position: sticky;
  top: var(--yco-head-top);
}
@media (max-width: 1100px) {
  .yco .yco-chapter__head {
    position: static;
  }
}
.yco .yco-chapter__title {
  margin: 0 0 16px;
  color: var(--sec-fg);
  font-family: var(--font-display);
  font-size: 48px;
  font-weight: 400;
  line-height: 1.1;
  text-wrap: balance;
}
@media (max-width: 768px) {
  .yco .yco-chapter__title {
    font-size: 38px;
  }
}
.yco .yco-chapter__intro {
  margin: 0 0 24px;
  max-width: 62ch;
  color: var(--sec-fg);
  font-size: 16px;
  line-height: 1.7;
}
.yco .yco-tours {
  margin-bottom: 24px;
}
.yco .yco-tours__label {
  margin: 0 0 10px;
  color: var(--sec-fg-muted);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1.2px;
  text-transform: uppercase;
}
.yco .yco-tours__list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.yco .yco-tour {
  display: inline-flex;
  align-items: stretch;
  border: 1px solid var(--sec-border);
  border-radius: 50px;
  background: var(--yco-card-bg);
  font-size: 13px;
  line-height: 1;
  text-decoration: none;
  overflow: hidden;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.yco .yco-tour:hover {
  border-color: var(--sec-link);
  box-shadow: 0 4px 12px color-mix(in srgb, var(--brand-deep) 10%, transparent);
}
.yco .yco-tour__name {
  padding: 8px 10px 8px 14px;
  color: var(--brand-deep);
  font-weight: 700;
}
.yco .yco-tour__day {
  padding: 8px 14px 8px 10px;
  border-left: 1px solid var(--sec-border);
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}
.yco .yco-chapter__link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--sec-link);
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
}
.yco .yco-chapter__link svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform 0.25s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.yco .yco-chapter__link:hover {
  color: var(--sec-link-hover);
  text-decoration: underline;
  text-underline-offset: 4px;
}
.yco .yco-chapter__link:hover svg {
  transform: translateX(3px);
}
.yco .yco-set {
  display: flex;
  align-items: stretch;
}
.yco .yco-set[data-count="1"] {
  max-width: 560px;
}
@media (max-width: 768px) {
  .yco .yco-set {
    flex-direction: column;
  }
}
.yco .yco-or {
  position: relative;
  flex: 0 0 64px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.yco .yco-or::before {
  content: "";
  position: absolute;
  top: 12%;
  bottom: 12%;
  left: 50%;
  width: 1px;
  background: var(--sec-border);
}
.yco .yco-or span {
  position: relative;
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  border: 1px solid var(--sec-border);
  border-radius: 50%;
  background: var(--sec-bg, var(--surface));
  color: var(--sec-accent);
  font-family: var(--font-display);
  font-size: 26px;
  line-height: 1;
  padding-bottom: 4px;
  box-shadow: 0 6px 18px color-mix(in srgb, var(--brand-deep) 10%, transparent);
}
@media (max-width: 768px) {
  .yco .yco-or {
    flex-basis: 72px;
  }
  .yco .yco-or::before {
    top: 50%;
    bottom: auto;
    left: 8%;
    right: 8%;
    width: auto;
    height: 1px;
  }
}
.yco .yco-set.reveal-armed.is-in .yco-or span {
  animation: yco-or-in 0.5s 0.18s cubic-bezier(0.16, 1, 0.3, 1) both;
}
.yco .yco-card {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  border: 1px solid var(--sec-border);
  border-radius: 18px;
  background: var(--yco-card-bg);
  overflow: hidden;
  box-shadow: 0 1px 2px color-mix(in srgb, var(--brand-deep) 6%, transparent);
  transition: box-shadow 0.35s ease, transform 0.35s cubic-bezier(0.2, 0.7, 0.2, 1);
}
@media (max-width: 768px) {
  .yco .yco-card {
    flex: none;
  }
}
.yco .yco-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 18px 40px color-mix(in srgb, var(--brand-deep) 12%, transparent);
}
.yco .yco-card:hover .yco-card__img {
  transform: scale(1.04);
}
.yco .yco-card:focus-within {
  box-shadow: 0 0 0 2px var(--sec-link), 0 18px 40px color-mix(in srgb, var(--brand-deep) 12%, transparent);
}
.yco .yco-card__media {
  position: relative;
  aspect-ratio: 3/2;
  background: color-mix(in srgb, var(--brand-sky) 18%, var(--surface));
  overflow: hidden;
}
.yco .yco-card__media::after {
  content: "";
  position: absolute;
  inset: auto 0 0;
  height: 45%;
  background: linear-gradient(to top, color-mix(in srgb, var(--brand-deep) 55%, transparent), transparent);
  pointer-events: none;
}
.yco .yco-card__img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.8s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.yco .yco-card__duration {
  position: absolute;
  left: 16px;
  bottom: 14px;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  max-width: calc(100% - 32px);
  padding: 6px 12px;
  border-radius: 50px;
  background: color-mix(in srgb, var(--brand-deep) 82%, transparent);
  color: #fff;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.3px;
  backdrop-filter: blur(6px);
}
.yco .yco-card__duration svg {
  flex: none;
  width: 14px;
  height: 14px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
}
.yco .yco-card__body {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: 24px 26px 26px;
}
@media (max-width: 768px) {
  .yco .yco-card__body {
    padding: 20px 20px 22px;
  }
}
.yco .yco-card__title {
  margin: 0 0 12px;
  color: var(--brand-deep);
  font-size: 21px;
  font-weight: 700;
  line-height: 1.3;
  text-wrap: balance;
}
.yco .yco-card__text {
  max-height: 7.2em;
  overflow: hidden;
  color: var(--text-muted);
  font-size: 15px;
  line-height: 1.6;
  -webkit-mask-image: linear-gradient(to bottom, #000 55%, transparent);
  mask-image: linear-gradient(to bottom, #000 55%, transparent);
}
.yco .yco-card__text p {
  margin: 0 0 10px;
}
.yco .yco-card__text p:last-child {
  margin-bottom: 0;
}
.yco .yco-card__text.is-expanded {
  max-height: 240em;
  -webkit-mask-image: none;
  mask-image: none;
}
.yco .yco-card__text.is-fit {
  max-height: none;
  -webkit-mask-image: none;
  mask-image: none;
}
.yco .yc-readmore {
  align-self: flex-start;
  margin-top: 8px;
  padding: 4px 0;
  border: 0;
  background: none;
  color: var(--sec-link);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: none;
  cursor: pointer;
  text-decoration: underline;
  text-decoration-color: color-mix(in srgb, currentColor 35%, transparent);
  text-underline-offset: 4px;
}
.yco .yc-readmore:hover {
  text-decoration-color: currentColor;
}
.yco .yc-readmore .yc-readmore-less {
  display: none;
}
.yco .yc-readmore.is-expanded .yc-readmore-more {
  display: none;
}
.yco .yc-readmore.is-expanded .yc-readmore-less {
  display: inline;
}
.yco .yco-card__details {
  display: grid;
  gap: 9px;
  margin: 20px 0 0;
  padding: 18px 0 0;
  border-top: 1px solid var(--sec-border);
  list-style: none;
}
.yco .yco-card__details li {
  display: flex;
  gap: 10px;
  color: var(--text-primary);
  font-size: 14px;
  line-height: 1.5;
}
.yco .yco-card__details svg {
  flex: none;
  width: 16px;
  height: 16px;
  margin-top: 2px;
  fill: none;
  stroke: var(--brand-sky);
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.yco .yco-card__link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: auto;
  padding-top: 22px;
  color: var(--brand-deep);
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
}
.yco .yco-card__link svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: var(--brand-sky);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform 0.25s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.yco .yco-card__link:hover {
  text-decoration: underline;
  text-underline-offset: 4px;
}
.yco .yco-card__link:hover svg {
  transform: translateX(3px);
}
.yco :is(.yco-jump__chip, .yco-tour, .yco-chapter__link, .yco-card__link, .yc-readmore):focus-visible {
  outline: 2px solid var(--sec-link);
  outline-offset: 3px;
}

/*
    Optional Experiences (s-optional-experiences.php): the same chapters, but
    the cards are extras a guest can add, not a this-or-that choice, so they sit
    in a plain two-up grid with no "or". Each card closes on the destination
    page's local fact, set off as a tinted note.
*/
.yco--optional .oe-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
  align-items: stretch;
}
@media (max-width: 768px) {
  .yco--optional .oe-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 16px;
  }
}
.yco--optional .oe-grid[data-count="1"] {
  grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 769px) {
  .yco--optional .oe-grid[data-count="1"] .yco-card {
    flex-direction: row;
  }
  .yco--optional .oe-grid[data-count="1"] .yco-card__media {
    flex: 0 0 46%;
    aspect-ratio: auto;
    min-height: 320px;
  }
}
.yco--optional .yco-card__media::after {
  content: none;
}
.yco--optional .yco-tour__name {
  padding-right: 14px;
}
.yco--optional .oe-tidbit {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 18px 0 0;
  padding: 12px 14px;
  border-radius: 10px;
  background: var(--surface-tint);
  color: color-mix(in srgb, var(--text-muted) 80%, var(--text-primary));
  font-size: 14px;
  line-height: 1.55;
}
.yco--optional .oe-tidbit svg {
  flex: none;
  width: 16px;
  height: 16px;
  margin-top: 2px;
  fill: none;
  stroke: var(--brand-sky);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

@keyframes yco-or-in {
  from {
    opacity: 0;
    transform: scale(0.4) rotate(-12deg);
  }
}
@media (prefers-reduced-motion: reduce) {
  .yco .yco-card,
  .yco .yco-card__img {
    transition: none;
  }
  .yco .yco-card:hover {
    transform: none;
  }
}
/*
    Section · Tours Grid — the "All Tours" filter bar + popover (S4 · T4.2).
    The card grid (.tour-grid) and the cards (.pd-card) are already styled by
    _tour-collection.scss / _tour-card.scss, so this file owns only the filter
    chrome. Brand colours come through tokens; the band colour is the section
    surface (--sec-bg). Filters are wired in js/custom.js.
*/
.tours-grid {
  /* ---- Quick pill row ---- */
  /* ---- Popover ---- */
  /* ---- Destination search ---- */
  /* ---- Pace segmented control ---- */
  /* ---- Actions ---- */
}
@media (max-width: 768px) {
  .tours-grid {
    padding: 56px 0;
  }
}
@media (max-width: 480px) {
  .tours-grid {
    padding: 44px 0;
  }
}
.tours-grid .tg-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
  margin-bottom: 36px;
}
.tours-grid .tg-filters.absorbed > .tg-pill, .tours-grid .tg-filters.absorbed > .tg-more-btn {
  display: none;
}
@media (max-width: 480px) {
  .tours-grid .tg-filters {
    gap: 6px;
  }
}
.tours-grid .tg-pill {
  padding: 8px 20px;
  border-radius: 50px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.5px;
  text-transform: none;
  color: var(--text-muted);
  background: transparent;
  border: 1.5px solid var(--brand-border);
  cursor: pointer;
  transition: all 0.2s;
}
.tours-grid .tg-pill:hover {
  border-color: var(--brand-sky);
  color: var(--brand-deep);
  background: var(--surface-tint);
}
.tours-grid .tg-pill.active {
  background: var(--brand-deep);
  color: #fff;
  border-color: var(--brand-deep);
}
@media (max-width: 480px) {
  .tours-grid .tg-pill {
    padding: 6px 14px;
    font-size: 11px;
  }
}
.tours-grid .tg-more-btn {
  padding: 8px 20px;
  border-radius: 50px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.5px;
  text-transform: none;
  color: var(--brand-sky-text);
  background: transparent;
  border: 1.5px dashed color-mix(in srgb, var(--brand-sky) 40%, #fff);
  cursor: pointer;
  transition: all 0.2s;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.tours-grid .tg-more-btn:hover {
  border-color: var(--brand-sky);
  background: var(--surface-tint);
}
.tours-grid .tg-more-btn.open {
  background: var(--surface-tint);
  border-style: solid;
  border-color: var(--brand-sky);
}
.tours-grid .tg-more-btn svg {
  width: 14px;
  height: 14px;
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
  transition: transform 0.3s;
}
.tours-grid .tg-more-btn.open svg {
  transform: rotate(180deg);
}
.tours-grid .tg-popover {
  display: none;
  background: #fff;
  border: 1px solid var(--brand-border);
  border-radius: 16px;
  padding: 28px 32px;
  box-shadow: 0 12px 40px color-mix(in srgb, var(--brand-deep) 12%, transparent);
  margin-top: 16px;
  margin-bottom: 24px;
}
.tours-grid .tg-popover.open {
  display: block;
}
@media (max-width: 768px) {
  .tours-grid .tg-popover {
    padding: 20px;
  }
}
.tours-grid .tg-popover-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 16px;
  margin-bottom: 8px;
  border-bottom: 1px solid color-mix(in srgb, var(--brand-border) 45%, #fff);
}
.tours-grid .tg-popover-title {
  font-size: 16px;
  font-weight: 700;
  color: var(--brand-deep);
}
.tours-grid .tg-popover-close {
  padding: 6px 16px;
  border-radius: 50px;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-muted);
  background: transparent;
  border: 1.5px solid var(--brand-border);
  cursor: pointer;
  transition: all 0.2s;
  display: flex;
  align-items: center;
  gap: 6px;
  text-transform: none;
  letter-spacing: normal;
}
.tours-grid .tg-popover-close:hover {
  border-color: var(--brand-sky);
  color: var(--brand-deep);
  background: var(--surface-tint);
}
.tours-grid .tg-popover-close svg {
  width: 12px;
  height: 12px;
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
}
.tours-grid .tg-popover-row {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  padding: 16px 0;
  border-bottom: 1px solid color-mix(in srgb, var(--brand-border) 45%, #fff);
}
.tours-grid .tg-popover-row:last-of-type {
  border-bottom: none;
}
@media (max-width: 768px) {
  .tours-grid .tg-popover-row {
    flex-direction: column;
    gap: 8px;
  }
}
.tours-grid .tg-popover-label {
  font-size: 12px;
  font-weight: 700;
  color: var(--brand-deep);
  text-transform: uppercase;
  letter-spacing: 1px;
  min-width: 100px;
  flex-shrink: 0;
  padding-top: 8px;
}
@media (max-width: 768px) {
  .tours-grid .tg-popover-label {
    min-width: auto;
    padding-top: 0;
  }
}
.tours-grid .tg-popover-content {
  flex: 1;
}
.tours-grid .interest-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.tours-grid .interest-pills .tg-pill {
  padding: 6px 14px;
  font-size: 12px;
}
@media (max-width: 480px) {
  .tours-grid .interest-pills .tg-pill {
    padding: 5px 10px;
    font-size: 11px;
  }
}
.tours-grid .dest-search-wrap {
  position: relative;
}
.tours-grid .dest-search {
  width: 100%;
  padding: 10px 16px 10px 38px;
  border: 1.5px solid var(--brand-border);
  border-radius: 50px;
  font-size: 14px;
  color: var(--text-primary);
  outline: none;
  transition: border-color 0.2s;
  font-family: var(--font-body);
}
.tours-grid .dest-search:focus {
  border-color: var(--brand-sky);
}
.tours-grid .dest-search::placeholder {
  color: color-mix(in srgb, var(--text-muted) 72%, #fff);
}
@media (max-width: 480px) {
  .tours-grid .dest-search {
    font-size: 13px;
    padding: 9px 14px 9px 34px;
  }
}
.tours-grid .dest-search-icon {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  width: 16px;
  height: 16px;
  stroke: var(--text-muted);
  fill: none;
  stroke-width: 2;
  pointer-events: none;
}
.tours-grid .dest-suggestions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 10px;
  align-items: center;
}
.tours-grid .dest-suggestions .tg-pill {
  padding: 5px 12px;
  font-size: 11px;
}
.tours-grid .dest-suggestions-label {
  font-size: 11px;
  color: var(--text-subtle);
  margin-right: 4px;
}
.tours-grid .dest-dropdown {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  background: #fff;
  border: 1px solid var(--brand-border);
  border-radius: 12px;
  box-shadow: 0 8px 24px color-mix(in srgb, var(--brand-deep) 10%, transparent);
  max-height: 200px;
  overflow-y: auto;
  z-index: 10;
  display: none;
}
.tours-grid .dest-dropdown.show {
  display: block;
}
.tours-grid .dest-dropdown-item {
  padding: 10px 16px;
  font-size: 14px;
  color: var(--text-primary);
  cursor: pointer;
  transition: background 0.15s;
  display: flex;
  align-items: center;
  gap: 10px;
}
.tours-grid .dest-dropdown-item:hover {
  background: var(--surface-tint);
}
.tours-grid .dest-dropdown-item svg {
  width: 14px;
  height: 14px;
  stroke: var(--brand-sky);
  fill: none;
  stroke-width: 2;
  flex-shrink: 0;
}
.tours-grid .dest-active-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
}
.tours-grid .dest-active-tag {
  padding: 5px 12px;
  border-radius: 50px;
  font-size: 12px;
  font-weight: 600;
  background: var(--brand-deep);
  color: #fff;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
}
.tours-grid .dest-active-tag:hover {
  background: var(--brand-deep-hover);
}
.tours-grid .dest-active-tag .remove {
  font-size: 14px;
  line-height: 1;
  opacity: 0.7;
}
.tours-grid .pace-group {
  display: inline-flex;
  gap: 0;
  border-radius: 50px;
  overflow: hidden;
  border: 1.5px solid var(--brand-border);
}
@media (max-width: 768px) {
  .tours-grid .pace-group {
    display: flex;
    flex-wrap: wrap;
    border-radius: 12px;
  }
}
@media (max-width: 480px) {
  .tours-grid .pace-group {
    flex-direction: column;
  }
}
.tours-grid .pace-btn {
  padding: 10px 20px;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-muted);
  background: #fff;
  border: none;
  cursor: pointer;
  transition: all 0.2s;
  display: flex;
  align-items: center;
  gap: 8px;
  border-right: 1px solid var(--brand-border);
  letter-spacing: 0.3px;
  text-transform: none;
}
.tours-grid .pace-btn:last-child {
  border-right: none;
}
.tours-grid .pace-btn:hover {
  background: var(--surface-tint);
  color: var(--brand-deep);
}
.tours-grid .pace-btn.active {
  background: var(--brand-deep);
  color: #fff;
}
.tours-grid .pace-btn.active .pace-dots .dot {
  background: color-mix(in srgb, #fff 30%, transparent);
}
.tours-grid .pace-btn.active .pace-dots .dot.filled {
  background: #fff;
}
@media (max-width: 768px) {
  .tours-grid .pace-btn {
    flex: 1 1 auto;
    min-width: 0;
    padding: 10px 14px;
    font-size: 11px;
    justify-content: center;
    text-align: center;
  }
}
@media (max-width: 480px) {
  .tours-grid .pace-btn {
    border-right: none;
    border-bottom: 1px solid var(--brand-border);
    padding: 12px 16px;
    font-size: 12px;
  }
  .tours-grid .pace-btn:last-child {
    border-bottom: none;
  }
}
.tours-grid .pace-dots {
  display: flex;
  gap: 3px;
  align-items: center;
}
.tours-grid .pace-dots .dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--brand-border);
}
.tours-grid .pace-dots .dot.filled {
  background: var(--brand-sky);
}
.tours-grid .tg-popover-actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 16px;
  margin-top: 8px;
  border-top: 1px solid color-mix(in srgb, var(--brand-border) 45%, #fff);
}
.tours-grid .tg-clear-btn {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-muted);
  background: none;
  border: none;
  cursor: pointer;
  transition: color 0.2s;
  text-transform: none;
  letter-spacing: normal;
}
.tours-grid .tg-clear-btn:hover {
  color: var(--brand-deep);
}
.tours-grid .tg-active-count {
  font-size: 13px;
  color: var(--brand-sky-text);
  font-weight: 600;
}

/*
    Section · Tour Finder — "Find Your Perfect Tour" (S4 · T4.2). Time-bracket
    selector, the revealed tour-row panels, the pairing note and the dark
    one-route callout. Band colour is the section surface (--sec-bg, off-white by
    default); all brand colour is token'd. Behaviour lives in js/custom.js.
*/
.tour-finder {
  /* ---- Time selector cards ---- */
  /* ---- Panels ---- */
  /* ---- Tour row card ---- */
  /* ---- Row image slider (fades into white on the right) ---- */
  /* ---- Pairing callout ---- */
  /* ---- One-route callout (dark) ---- */
}
@media (max-width: 768px) {
  .tour-finder {
    padding: 56px 0;
  }
}
@media (max-width: 480px) {
  .tour-finder {
    padding: 44px 0;
  }
}
.tour-finder .ft-time-cards {
  display: flex;
  gap: 16px;
  justify-content: center;
  margin-top: 40px;
}
@media (max-width: 992px) {
  .tour-finder .ft-time-cards {
    gap: 12px;
  }
}
@media (max-width: 768px) {
  .tour-finder .ft-time-cards {
    flex-direction: column;
    align-items: stretch;
  }
}
.tour-finder .ft-time-card {
  flex: 1;
  max-width: 280px;
  padding: 28px 24px;
  border-radius: 16px;
  border: 2px solid var(--brand-border);
  background: #fff;
  text-align: center;
  cursor: pointer;
  transition: all 0.25s ease-out;
  text-transform: none;
  letter-spacing: normal;
  font-weight: 400;
}
.tour-finder .ft-time-card:hover {
  border-color: var(--brand-sky);
  box-shadow: 0 4px 20px color-mix(in srgb, var(--brand-deep) 8%, transparent);
}
.tour-finder .ft-time-card.active {
  border-color: var(--brand-deep);
  background: var(--brand-deep);
}
.tour-finder .ft-time-card.active .ft-time-label {
  color: #fff;
}
.tour-finder .ft-time-card.active .ft-time-sub {
  color: color-mix(in srgb, #fff 70%, transparent);
}
.tour-finder .ft-time-card.active .ft-time-count {
  color: var(--brand-glass);
}
@media (max-width: 992px) {
  .tour-finder .ft-time-card {
    padding: 22px 18px;
  }
}
@media (max-width: 768px) {
  .tour-finder .ft-time-card {
    max-width: 100%;
    width: 100%;
    padding: 20px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .tour-finder .ft-time-card {
    transition: none;
  }
}
.tour-finder .ft-time-label {
  display: block;
  font-size: 26px;
  font-weight: 700;
  color: var(--brand-deep);
  line-height: 1.2;
}
@media (max-width: 992px) {
  .tour-finder .ft-time-label {
    font-size: 22px;
  }
}
@media (max-width: 480px) {
  .tour-finder .ft-time-label {
    font-size: 20px;
  }
}
.tour-finder .ft-time-sub {
  display: block;
  font-size: 14px;
  color: var(--text-muted);
  margin-top: 6px;
  line-height: 1.45;
}
@media (max-width: 480px) {
  .tour-finder .ft-time-sub {
    font-size: 13px;
  }
}
.tour-finder .ft-time-count {
  display: block;
  font-size: 12px;
  font-weight: 600;
  color: var(--brand-sky-text);
  margin-top: 10px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.tour-finder .ft-panels {
  margin-top: 36px;
}
.tour-finder .ft-panel {
  max-height: 0;
  overflow: hidden;
  grid-template-columns: 1fr;
  gap: 16px;
  display: grid;
  opacity: 0;
  transition: max-height 0.35s ease-out, opacity 0.35s ease-out;
}
.tour-finder .ft-panel.active {
  max-height: 2000px;
  opacity: 1;
  animation: ftReveal 0.35s ease-out;
}
@keyframes ftReveal {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.tour-finder .ft-tour {
  display: flex;
  gap: 20px;
  padding: 24px 28px;
  border-radius: 14px;
  border: 1.5px solid var(--brand-border);
  background: #fff;
  transition: all 0.25s ease-out;
  text-decoration: none;
  color: inherit;
  align-items: center;
  position: relative;
  overflow: hidden;
  min-height: 130px;
}
.tour-finder .ft-tour:hover {
  border-color: var(--brand-sky);
  box-shadow: 0 6px 24px color-mix(in srgb, var(--brand-deep) 8%, transparent);
  transform: translateY(-2px);
}
@media (max-width: 768px) {
  .tour-finder .ft-tour {
    flex-wrap: wrap;
    gap: 0;
    padding: 0;
    min-height: auto;
  }
}
@media (prefers-reduced-motion: reduce) {
  .tour-finder .ft-tour {
    transition: none;
  }
}
.tour-finder .ft-map {
  flex-shrink: 0;
  width: 52px;
  height: 76px;
  position: relative;
  z-index: 1;
}
@media (max-width: 768px) {
  .tour-finder .ft-map {
    order: 0;
    margin: 12px 0 12px 20px;
    width: 44px;
    height: 64px;
  }
}
@media (max-width: 480px) {
  .tour-finder .ft-map {
    margin-left: 16px;
    width: 38px;
    height: 55px;
  }
}
.tour-finder .ft-body {
  flex: 1;
  min-width: 0;
  position: relative;
  z-index: 1;
  /* Clear the 280px image slider on the right (it reaches 28px into the
     row padding), so no copy runs under the photo (client, 9 Oct 2026). */
  padding-right: 260px;
}
@media (max-width: 768px) {
  .tour-finder .ft-body {
    order: 1;
    padding: 0 20px 20px 12px;
  }
}
@media (max-width: 480px) {
  .tour-finder .ft-body {
    padding: 0 16px 16px 12px;
  }
}
.tour-finder .ft-tour-head {
  display: flex;
  align-items: baseline;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 6px;
}
.tour-finder .ft-tour-name {
  font-size: 18px;
  font-weight: 700;
  color: var(--brand-deep);
}
@media (max-width: 480px) {
  .tour-finder .ft-tour-name {
    font-size: 16px;
  }
}
.tour-finder .ft-badge {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding: 3px 10px;
  border-radius: 50px;
  background: var(--surface-tint);
  color: var(--brand-sky-text);
  white-space: nowrap;
}
.tour-finder .ft-tour-desc {
  font-size: 15px;
  color: color-mix(in srgb, var(--brand-deep) 70%, #fff);
  line-height: 1.55;
  margin-bottom: 6px;
}
@media (max-width: 480px) {
  .tour-finder .ft-tour-desc {
    font-size: 14px;
  }
}
.tour-finder .ft-tour-detail {
  font-size: 13px;
  color: var(--text-subtle);
}
.tour-finder .ft-tour-detail strong {
  color: var(--brand-sky-text);
}
.tour-finder .ft-slider {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 280px;
  overflow: hidden;
  border-radius: 0 14px 14px 0;
  pointer-events: none;
}
.tour-finder .ft-slider::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  width: 100%;
  background: linear-gradient(to right, #fff 0%, color-mix(in srgb, #fff 60%, transparent) 30%, transparent 70%);
  z-index: 2;
}
@media (max-width: 768px) {
  .tour-finder .ft-slider {
    position: relative;
    width: 100%;
    height: 160px;
    border-radius: 14px 14px 0 0;
    order: -1;
  }
  .tour-finder .ft-slider::before {
    background: linear-gradient(to bottom, transparent 30%, #fff 100%);
  }
}
@media (max-width: 480px) {
  .tour-finder .ft-slider {
    height: 120px;
  }
}
.tour-finder .ft-slide {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  opacity: 0;
  transition: opacity 1s ease-in-out;
}
.tour-finder .ft-slide.active {
  opacity: 1;
}
.tour-finder .ft-pairing {
  margin-top: 36px;
  padding: 28px 32px;
  border-radius: 16px;
  background: linear-gradient(135deg, var(--surface-tint) 0%, color-mix(in srgb, var(--brand-aqua) 22%, #fff) 100%);
  border: 1.5px solid color-mix(in srgb, var(--brand-sky) 24%, #fff);
  display: flex;
  gap: 20px;
  align-items: center;
}
@media (max-width: 768px) {
  .tour-finder .ft-pairing {
    flex-direction: column;
    text-align: center;
    gap: 16px;
  }
}
.tour-finder .ft-pairing-icon {
  flex-shrink: 0;
}
.tour-finder .ft-pairing-maps {
  display: flex;
  gap: 4px;
  align-items: center;
}
.tour-finder .ft-pairing-maps .ft-map {
  width: 36px;
  height: 52px;
  margin: 0;
}
.tour-finder .ft-pairing-plus {
  font-size: 18px;
  font-weight: 700;
  color: var(--brand-sky-text);
}
.tour-finder .ft-pairing-body {
  flex: 1;
}
.tour-finder .ft-pairing-body h4 {
  font-size: 17px;
  font-weight: 700;
  color: var(--brand-deep);
  margin-bottom: 4px;
}
@media (max-width: 480px) {
  .tour-finder .ft-pairing-body h4 {
    font-size: 15px;
  }
}
.tour-finder .ft-pairing-body p {
  font-size: 14px;
  color: color-mix(in srgb, var(--brand-deep) 70%, #fff);
  line-height: 1.55;
  margin: 0;
}
@media (max-width: 480px) {
  .tour-finder .ft-pairing-body p {
    font-size: 13px;
  }
}
.tour-finder .ft-callout {
  margin-top: 40px;
  padding: 56px 48px;
  background: linear-gradient(135deg, var(--brand-deep) 0%, var(--brand-deep-hover) 100%);
  border-radius: 20px;
  position: relative;
  overflow: hidden;
}
.tour-finder .ft-callout::before {
  content: "";
  position: absolute;
  top: -80px;
  right: -80px;
  width: 300px;
  height: 300px;
  border-radius: 50%;
  background: radial-gradient(circle, color-mix(in srgb, var(--brand-sky) 12%, transparent) 0%, transparent 70%);
  pointer-events: none;
}
.tour-finder .ft-callout::after {
  content: "";
  position: absolute;
  bottom: -60px;
  left: -40px;
  width: 200px;
  height: 200px;
  border-radius: 50%;
  background: radial-gradient(circle, color-mix(in srgb, var(--brand-glass) 6%, transparent) 0%, transparent 70%);
  pointer-events: none;
}
@media (max-width: 480px) {
  .tour-finder .ft-callout {
    padding: 32px 20px;
  }
}
.tour-finder .ft-callout-text {
  position: relative;
  z-index: 1;
  max-width: 620px;
  margin: 0 auto;
}
.tour-finder .ft-callout-text .ft-callout-kicker {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 2px;
  color: var(--brand-sky);
  margin-bottom: 10px;
}
.tour-finder .ft-callout-text h3 {
  font-family: var(--font-display);
  font-size: 34px;
  font-weight: 400;
  line-height: 1.2;
  color: #fff;
  margin: 0 0 20px;
}
@media (max-width: 480px) {
  .tour-finder .ft-callout-text h3 {
    font-size: 28px;
  }
}
.tour-finder .ft-callout-text p {
  font-size: 16px;
  line-height: 1.7;
  color: color-mix(in srgb, #fff 78%, transparent);
  margin: 0 0 16px;
}
@media (max-width: 480px) {
  .tour-finder .ft-callout-text p {
    font-size: 15px;
  }
}
.tour-finder .ft-callout-text .ft-callout-point {
  margin-top: 28px;
}
.tour-finder .ft-callout-text .ft-callout-point strong {
  display: block;
  margin-bottom: 4px;
  font-weight: 700;
  color: #fff;
}
.tour-finder .ft-callout-cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px 24px;
  margin-top: 32px;
}
.tour-finder .ft-callout-cta p {
  flex: 1 1 260px;
  margin: 0;
  color: #fff;
}
.tour-finder .ft-callout-cta .btn {
  flex: 0 0 auto;
}

/*
    Section · Promo Banner — one offer band: a rounded card with a background
    image behind a dark brand overlay, kicker + heading + body, and a CTA
    (S4 · T4.2). The card chrome is self-contained (its own overlay), so colour
    comes from tokens regardless of the section band.
*/
.promo-banner {
  padding: 60px 0;
}
.promo-banner .promo-card {
  border-radius: 20px;
  overflow: hidden;
  position: relative;
  min-height: 240px;
  display: flex;
  align-items: center;
}
.promo-banner .promo-bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
}
.promo-banner .promo-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, color-mix(in srgb, var(--brand-deep) 92%, transparent) 0%, color-mix(in srgb, var(--brand-deep-hover) 80%, transparent) 50%, color-mix(in srgb, var(--brand-deep) 60%, transparent) 100%);
}
.promo-banner .promo-inner {
  display: flex;
  align-items: center;
  gap: 40px;
  position: relative;
  z-index: 1;
  padding: 56px 60px;
  width: 100%;
}
@media (max-width: 992px) {
  .promo-banner .promo-inner {
    gap: 24px;
    padding: 40px 36px;
  }
}
@media (max-width: 768px) {
  .promo-banner .promo-inner {
    flex-direction: column;
    text-align: center;
    gap: 20px;
    padding: 36px 24px;
  }
}
.promo-banner .promo-text {
  flex: 1;
}
.promo-banner .promo-kicker {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 2px;
  color: var(--brand-glass);
  margin-bottom: 8px;
}
.promo-banner .promo-text h3 {
  font-family: var(--font-display);
  font-size: 30px;
  font-weight: 400;
  color: #fff;
  margin-bottom: 8px;
}
@media (max-width: 992px) {
  .promo-banner .promo-text h3 {
    font-size: 26px;
  }
}
@media (max-width: 480px) {
  .promo-banner .promo-text h3 {
    font-size: 22px;
  }
}
.promo-banner .promo-text p {
  font-size: 15px;
  color: color-mix(in srgb, #fff 70%, transparent);
  line-height: 1.6;
  max-width: 480px;
  margin: 0;
}
@media (max-width: 480px) {
  .promo-banner .promo-text p {
    font-size: 14px;
  }
}
.promo-banner .promo-cta {
  padding: 15px 34px;
  background: var(--gradient-button);
  color: var(--gradient-button-fg);
  border: none;
  border-radius: 50px;
  font-size: 14px;
  font-weight: 800;
  cursor: pointer;
  letter-spacing: 1px;
  text-transform: uppercase;
  transition: all 0.3s;
  box-shadow: 0 4px 20px color-mix(in srgb, var(--brand-sky) 30%, transparent);
  white-space: nowrap;
  flex-shrink: 0;
  font-family: var(--font-body);
  text-decoration: none;
  display: inline-block;
}
.promo-banner .promo-cta:hover {
  box-shadow: 0 6px 28px color-mix(in srgb, var(--brand-sky) 45%, transparent);
  transform: translateY(-2px);
}

/*
    Tour Single · Hero — Ken Burns background, gradient scrim, staggered cascade,
    dual CTAs and a trust strip. Token-pure: the PD teal palette comes from
    var(--brand-*); the cascade plays once on load via .tour-single.is-loaded.
*/
.tour-hero {
  position: relative;
  min-height: 540px;
  padding: 0;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  /* Hero CTAs (the wireframe inherited these globally — defined here so the
     look holds without a global .btn dependency). */
  /* Download Brochure — a clear/ghost text button (icon + label only), a lighter
     tertiary action beside the Book Now / View Itinerary pills. */
  /* More than one season on sale: the button opens a small season menu
     (shared menu styles below the hero block). */
}
.tour-hero .tour-hero-bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  animation: ts-ken-burns 20s ease-in-out infinite alternate;
}
.tour-hero .tour-hero-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--hero-scrim-text), linear-gradient(180deg, color-mix(in srgb, var(--brand-deep) 30%, transparent) 0%, color-mix(in srgb, var(--brand-deep) 50%, transparent) 40%, color-mix(in srgb, var(--brand-deep) 75%, transparent) 70%, color-mix(in srgb, var(--brand-deep) 92%, transparent) 100%);
}
.tour-hero .tour-hero-content {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 1440px;
  margin: 0 auto;
  padding: 80px 48px 56px;
}
.tour-hero .breadcrumb {
  font-size: var(--hero-crumb-size);
  font-weight: var(--hero-crumb-weight);
  letter-spacing: var(--hero-crumb-tracking);
  text-transform: none;
  color: var(--hero-crumb-fg);
  margin-bottom: 18px;
}
.tour-hero .breadcrumb a,
.tour-hero .breadcrumb span {
  color: inherit;
  text-decoration: none;
  transition: color 0.2s;
}
.tour-hero .breadcrumb a:hover {
  color: var(--text-on-dark);
}
.tour-hero .breadcrumb .sep, .tour-hero .breadcrumb .separator {
  margin: 0 8px;
  opacity: 0.5;
}
.tour-hero .tour-hero-kicker {
  font-size: var(--hero-kicker-size);
  font-weight: var(--hero-kicker-weight);
  letter-spacing: var(--hero-kicker-tracking);
  text-transform: uppercase;
  color: var(--text-on-dark);
  margin-bottom: 14px;
}
.tour-hero h1 {
  font-size: 56px;
  color: #fff;
  font-weight: 700;
  font-family: var(--font-body);
  line-height: 1.1;
  letter-spacing: -0.5px;
  margin-bottom: 18px;
  text-shadow: 0 2px 20px rgba(0, 0, 0, 0.15);
}
.tour-hero .sub {
  font-size: 19px;
  color: rgba(255, 255, 255, 0.85);
  line-height: 1.7;
  max-width: 640px;
  margin-bottom: 40px;
}
.tour-hero .hero-ctas {
  display: flex;
  gap: 16px;
  align-items: center;
  margin-bottom: 36px;
  /* Above the trust strip, so the brochure season menu can overlap it. */
  position: relative;
  z-index: 2;
}
.tour-hero .btn-primary,
.tour-hero .btn-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 14px 32px;
  border-radius: 50px;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.3px;
  text-decoration: none;
  cursor: pointer;
  transition: transform 0.16s ease, background 0.2s ease, box-shadow 0.3s ease;
}
.tour-hero .btn-primary {
  background: var(--gradient-button);
  background-origin: border-box;
  color: var(--gradient-button-fg);
  border: 1px solid rgba(255, 255, 255, 0.15);
  box-shadow: var(--shadow-cta);
}
.tour-hero .btn-primary:hover {
  transform: translateY(-1px);
  box-shadow: var(--shadow-cta-hover);
}
.tour-hero .btn-secondary {
  background: rgba(255, 255, 255, 0.1);
  color: var(--text-on-dark);
  border: 1.5px solid rgba(255, 255, 255, 0.35);
  backdrop-filter: blur(4px);
}
.tour-hero .btn-secondary:hover {
  background: rgba(255, 255, 255, 0.2);
}
.tour-hero .btn-primary:active,
.tour-hero .btn-secondary:active {
  transform: scale(0.97);
}
.tour-hero .btn-brochure {
  background: transparent;
  border: 0;
  backdrop-filter: none;
  box-shadow: none;
  padding: 14px 10px;
  color: rgba(255, 255, 255, 0.85);
}
.tour-hero .btn-brochure:hover {
  background: transparent;
  color: rgb(255, 255, 255);
  text-decoration: underline;
}
.tour-hero .btn-brochure:active {
  transform: scale(0.97);
}
.tour-hero .brochure-pick[open] summary {
  color: #fff;
  text-decoration: underline;
}
.tour-hero .hero-trust-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 28px 36px;
  margin-top: 0;
}
.tour-hero .trust-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  max-width: 250px;
}
.tour-hero .trust-item svg {
  width: 26px;
  height: 26px;
  stroke: var(--brand-glass);
  fill: none;
  stroke-width: 1.5;
  flex-shrink: 0;
}
.tour-hero .trust-item strong {
  display: block;
  font-size: 14px;
  font-weight: 700;
  color: #fff;
  line-height: 1.3;
}
.tour-hero .trust-item span {
  display: block;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.6);
  margin-top: 2px;
  line-height: 1.4;
}

/* Brochure season menu — shared by the hero and the sticky tour nav. */
.brochure-pick {
  position: relative;
}
.brochure-pick summary {
  list-style: none;
}
.brochure-pick summary::-webkit-details-marker {
  display: none;
}

.brochure-pick__menu {
  position: absolute;
  top: calc(100% + 4px);
  left: 50%;
  transform: translateX(-50%);
  z-index: 5;
  min-width: 220px;
  padding: 8px;
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.25);
}
.brochure-pick__menu a {
  display: block;
  padding: 10px 12px;
  border-radius: 8px;
  color: var(--brand-deep);
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
}
.brochure-pick__menu a:hover,
.brochure-pick__menu a:focus-visible {
  background: var(--surface-tint);
}

.brochure-pick__label {
  display: block;
  padding: 6px 12px 4px;
  color: var(--text-muted);
  font-size: 12px;
  letter-spacing: 1px;
  text-transform: uppercase;
}

/* Cascade — hidden until the page loads, then fades up in sequence. */
.tour-hero .breadcrumb,
.tour-hero .tour-hero-kicker,
.tour-hero h1,
.tour-hero .sub,
.tour-hero .hero-ctas,
.tour-hero .hero-trust-strip {
  opacity: 0;
  transform: translateY(18px);
}

.tour-single.is-loaded .tour-hero .breadcrumb {
  animation: ts-hero-fade 0.65s ease-out 0.1s forwards;
}
.tour-single.is-loaded .tour-hero .tour-hero-kicker {
  animation: ts-hero-fade 0.65s ease-out 0.25s forwards;
}
.tour-single.is-loaded .tour-hero h1 {
  animation: ts-hero-fade 0.65s ease-out 0.4s forwards;
}
.tour-single.is-loaded .tour-hero .sub {
  animation: ts-hero-fade 0.65s ease-out 0.55s forwards;
}
.tour-single.is-loaded .tour-hero .hero-ctas {
  animation: ts-hero-fade 0.65s ease-out 0.7s forwards;
}
.tour-single.is-loaded .tour-hero .hero-trust-strip {
  animation: ts-hero-fade 0.65s ease-out 0.85s forwards;
}

@keyframes ts-hero-fade {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes ts-ken-burns {
  from {
    transform: scale(1);
  }
  to {
    transform: scale(1.08);
  }
}
@media (prefers-reduced-motion: reduce) {
  .tour-hero .tour-hero-bg {
    animation: none;
  }
  .tour-hero .breadcrumb,
  .tour-hero .tour-hero-kicker,
  .tour-hero h1,
  .tour-hero .sub,
  .tour-hero .hero-ctas,
  .tour-hero .hero-trust-strip {
    opacity: 1;
    transform: none;
    animation: none;
  }
}
@media (max-width: 1200px) {
  .tour-hero h1 {
    font-size: 46px;
  }
}
@media (max-width: 768px) {
  .tour-hero {
    min-height: 440px;
  }
  .tour-hero .tour-hero-content {
    padding: 60px 20px 40px;
  }
  .tour-hero h1 {
    font-size: 36px;
  }
  .tour-hero .sub {
    font-size: 17px;
  }
  .tour-hero .hero-ctas {
    flex-direction: column;
    gap: 12px;
    align-items: stretch;
  }
  .tour-hero .btn-primary,
  .tour-hero .btn-secondary {
    width: 100%;
  }
  .tour-hero .hero-trust-strip {
    gap: 16px 0;
  }
  .tour-hero .trust-item {
    flex: 0 0 50%;
    max-width: none;
    padding-right: 12px;
  }
}
@media (max-width: 576px) {
  .tour-hero h1 {
    font-size: 30px;
  }
  .tour-hero .trust-item {
    flex: 0 0 100%;
  }
}
/* Departed lifecycle notice (D-23) — sits directly under the hero, before the
   section parts. Tokens only (token-purity gate). */
.tour-departed-banner {
  background: var(--surface-tint);
  border-top: 3px solid var(--brand-sky);
  border-bottom: 1px solid var(--brand-border);
}

.tour-departed-banner .tour-departed-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 18px 40px;
  display: flex;
  align-items: center;
  gap: 16px;
}

.tour-departed-banner svg {
  flex: 0 0 auto;
  width: 26px;
  height: 26px;
  stroke: var(--brand-deep);
  fill: none;
  stroke-width: 2;
}

.tour-departed-banner p {
  flex: 1 1 auto;
  margin: 0;
  color: var(--text-primary);
  font-size: 16px;
}

.tour-departed-banner p strong {
  color: var(--brand-deep);
}

.tour-departed-banner .btn-primary {
  flex: 0 0 auto;
  white-space: nowrap;
}

@media (max-width: 768px) {
  .tour-departed-banner .tour-departed-inner {
    flex-direction: column;
    align-items: flex-start;
    padding: 16px 20px;
    gap: 12px;
  }
  .tour-departed-banner .btn-primary {
    width: 100%;
    text-align: center;
  }
}
/* Tour Single · Quick Facts bar — a thin band of derived facts under the hero. */
.quick-facts {
  background: var(--surface);
  border-bottom: 1px solid var(--brand-border);
}
.quick-facts .container {
  display: flex;
  align-items: center;
  justify-content: center;
  padding-top: 0;
  padding-bottom: 0;
  overflow-x: auto;
  scrollbar-width: none;
}
.quick-facts .container::-webkit-scrollbar {
  display: none;
}
.quick-facts .qf-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 18px 28px;
  border-right: 1px solid var(--brand-border);
  white-space: nowrap;
  flex-shrink: 0;
}
.quick-facts .qf-item:last-child {
  border-right: none;
}
.quick-facts .qf-item svg {
  width: 20px;
  height: 20px;
  stroke: var(--brand-sky);
  fill: none;
  stroke-width: 1.5;
  flex-shrink: 0;
}
.quick-facts .qf-item .qf-label {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1.2px;
  color: var(--text-muted);
  line-height: 1;
}
.quick-facts .qf-item .qf-value {
  font-size: 15px;
  font-weight: 700;
  color: var(--brand-deep);
  line-height: 1.2;
}

@media (max-width: 768px) {
  .quick-facts .container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    padding: 0;
    overflow: visible;
  }
  .quick-facts .qf-item {
    padding: 14px 16px;
    white-space: normal;
    flex-direction: column;
    text-align: center;
    gap: 5px;
    border-bottom: 1px solid var(--brand-border);
  }
  .quick-facts .qf-item:nth-child(even) {
    border-right: none;
  }
  .quick-facts .qf-item:last-child {
    border-right: none;
    border-bottom: none;
  }
  .quick-facts .qf-item:last-child:nth-child(odd) {
    grid-column: 1/-1;
  }
  .quick-facts .qf-item:nth-last-child(2):nth-child(odd) {
    border-bottom: none;
  }
  .quick-facts .qf-item svg {
    margin: 0 auto;
    width: 18px;
    height: 18px;
  }
  .quick-facts .qf-item .qf-label {
    font-size: 9px;
    letter-spacing: 1px;
  }
  .quick-facts .qf-item .qf-value {
    font-size: 14px;
  }
}
/* Tour Single · Sticky section nav — scroll-spy links + Book Now, dropdown on mobile. */
.tour-nav {
  position: sticky;
  top: 0;
  z-index: 110;
  background: var(--surface);
  border-bottom: 1px solid var(--brand-border);
  box-shadow: 0 2px 12px color-mix(in srgb, var(--brand-deep) 6%, transparent);
  /* Download Brochure — a quiet text action beside Book Now, in the links' voice. */
  /* Mobile dropdown chrome — hidden on desktop. */
}
.tour-nav .container {
  display: flex;
  align-items: center;
  padding-top: 0;
  padding-bottom: 0;
}
.tour-nav .tour-nav-name {
  font-size: 16px;
  font-weight: 700;
  color: var(--brand-deep);
  white-space: nowrap;
  padding: 14px 20px 14px 0;
  border-right: 1px solid var(--brand-border);
  margin-right: 4px;
  flex-shrink: 0;
}
.tour-nav .tour-nav-left {
  display: flex;
  align-items: center;
  flex: 1;
  min-width: 0;
  overflow-x: auto;
  scrollbar-width: none;
}
.tour-nav .tour-nav-left::-webkit-scrollbar {
  display: none;
}
.tour-nav .tn-link {
  padding: 14px 18px;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-muted);
  text-decoration: none;
  white-space: nowrap;
  border-bottom: 2px solid transparent;
  transition: color 0.2s, border-color 0.2s;
  flex-shrink: 0;
}
.tour-nav .tn-link:hover {
  color: var(--brand-deep);
}
.tour-nav .tn-link.active {
  color: var(--brand-deep);
  border-bottom-color: var(--brand-sky);
}
.tour-nav .tour-nav-right {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 0 10px 12px;
  border-left: 1px solid var(--brand-border);
  margin-left: auto;
}
.tour-nav .tn-brochure {
  display: inline-flex;
  align-items: center;
  padding: 10px 12px;
  border-radius: 50px;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-muted);
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: color 0.2s, background 0.2s;
}
.tour-nav .tn-brochure svg {
  stroke: var(--brand-sky);
}
.tour-nav .tn-brochure:hover {
  color: var(--brand-deep);
  background: var(--surface-tint);
}
.tour-nav .tn-brochure:focus-visible {
  outline: 2px solid var(--brand-sky);
  outline-offset: 2px;
}
.tour-nav .brochure-pick[open] .tn-brochure {
  color: var(--brand-deep);
  background: var(--surface-tint);
}
.tour-nav .brochure-pick__menu {
  left: auto;
  right: 0;
  transform: none;
  top: calc(100% + 10px);
  border: 1px solid var(--brand-border);
  box-shadow: var(--shadow-dropdown);
}
.tour-nav .tn-book {
  display: inline-flex;
  align-items: center;
  padding: 10px 24px;
  border-radius: 50px;
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
  color: var(--gradient-button-fg);
  background: var(--gradient-button);
  background-origin: border-box;
  border: 1px solid rgba(255, 255, 255, 0.15);
  box-shadow: var(--shadow-cta);
  transition: transform 0.16s ease, box-shadow 0.3s ease;
}
.tour-nav .tn-book:hover {
  transform: translateY(-1px);
  box-shadow: var(--shadow-cta-hover);
}
.tour-nav .tn-book:active {
  transform: scale(0.97);
}
.tour-nav .tn-mobile-toggle {
  display: none;
  align-items: center;
  gap: 8px;
  padding: 12px 16px;
  font-size: 13px;
  font-weight: 700;
  color: var(--brand-deep);
  background: none;
  border: none;
  cursor: pointer;
  flex: 1;
  min-width: 0;
}
.tour-nav .tn-mobile-toggle svg {
  width: 16px;
  height: 16px;
  stroke: var(--brand-sky);
  fill: none;
  stroke-width: 2;
  transition: transform 0.3s;
}
.tour-nav.nav-open .tn-mobile-toggle svg {
  transform: rotate(180deg);
}
.tour-nav .tn-mobile-dropdown {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: var(--surface);
  border-top: 1px solid var(--brand-border);
  box-shadow: var(--shadow-dropdown);
  z-index: 100;
}
.tour-nav .tn-mobile-dropdown a {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 24px;
  font-size: 15px;
  font-weight: 600;
  color: var(--text-muted);
  text-decoration: none;
  border-bottom: 1px solid var(--brand-border);
  transition: background 0.15s, color 0.15s;
}
.tour-nav .tn-mobile-dropdown a:last-child {
  border-bottom: none;
}
.tour-nav .tn-mobile-dropdown a:hover, .tour-nav .tn-mobile-dropdown a.active {
  background: var(--surface-tint);
  color: var(--brand-deep);
}
.tour-nav .tn-mobile-dropdown a.active::before {
  content: "";
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--brand-sky);
  flex-shrink: 0;
}
.tour-nav .tn-mobile-dropdown .tn-dd-brochure {
  color: var(--brand-deep);
  background: var(--surface-tint);
}
.tour-nav .tn-mobile-dropdown .tn-dd-brochure svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: var(--brand-sky);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex-shrink: 0;
}
.tour-nav.nav-open .tn-mobile-dropdown {
  display: block;
}

@media (max-width: 768px) {
  .tour-nav .container {
    position: relative;
    min-height: 48px;
    padding-top: 6px;
    padding-bottom: 6px;
  }
  .tour-nav .tour-nav-name,
  .tour-nav .tour-nav-left {
    display: none;
  }
  .tour-nav .tn-mobile-toggle {
    display: flex;
  }
  .tour-nav .tour-nav-right {
    border-left: none;
    padding: 0;
  }
  .tour-nav .tour-nav-right .brochure-pick,
  .tour-nav .tour-nav-right .tn-brochure {
    display: none;
  } /* in the dropdown instead */
  .tour-nav .tn-book {
    padding: 9px 20px;
    font-size: 12px;
  }
}
/* Tour Single · Overview & tree story — two columns, editorial intro + tree card. */
.tour-overview .tour-overview-grid {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 64px;
  align-items: start;
}
.tour-overview .tour-overview-text h2 {
  font-family: var(--font-display);
  font-size: 44px;
  color: var(--brand-deep);
  font-weight: 400;
  margin-bottom: 24px;
}
.tour-overview .tour-overview-text p {
  font-size: 17px;
  color: var(--text-primary);
  line-height: 1.75;
  margin-bottom: 16px;
}
.tour-overview .selling-points {
  list-style: none;
  margin-top: 28px;
  padding: 0;
}
.tour-overview .selling-points li {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  font-size: 16px;
  color: var(--text-primary);
  line-height: 1.6;
  margin-bottom: 16px;
}
.tour-overview .selling-points li svg {
  width: 22px;
  height: 22px;
  stroke: var(--brand-sky);
  fill: none;
  stroke-width: 2;
  flex-shrink: 0;
  margin-top: 2px;
}
.tour-overview .overview-image {
  border-radius: 14px;
  overflow: hidden;
  height: 380px;
  background-size: cover;
  background-position: center;
}
.tour-overview .tree-story-card {
  background: var(--surface-tint);
  border: 1px solid var(--brand-border);
  border-radius: 14px;
  padding: 32px 28px;
  margin-top: 28px;
}
.tour-overview .tree-story-card .tree-icon {
  width: 48px;
  height: 48px;
  background: color-mix(in srgb, var(--brand-sky) 12%, transparent);
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 16px;
}
.tour-overview .tree-story-card .tree-icon svg {
  width: 24px;
  height: 24px;
  stroke: var(--brand-sky);
  fill: none;
  stroke-width: 1.5;
}
.tour-overview .tree-story-card h3 {
  font-family: var(--font-display);
  font-size: 26px;
  color: var(--brand-deep);
  font-weight: 400;
  margin-bottom: 16px;
}
.tour-overview .tree-story-card p {
  font-size: 16px;
  color: var(--text-primary);
  line-height: 1.7;
  font-style: italic;
}

@media (max-width: 1200px) {
  .tour-overview .tour-overview-grid {
    gap: 40px;
  }
}
@media (max-width: 768px) {
  .tour-overview .tour-overview-grid {
    grid-template-columns: 1fr;
    gap: 32px;
  }
  .tour-overview .overview-image {
    height: 260px;
  }
}
/*
    Tour Single · Your Route — adaptive NZ route map.

    A sticky custom-SVG map (a pin per stop + connecting lines that follow the
    itinerary) beside a scrolling list of stop cards; on mobile the map collapses
    and a "Show on Map" bottom-sheet takes over. Ported from the locked wireframe,
    brand-tokenised. Pins: upcoming = --brand-deep, current = --route-line
    (larger), visited = --brand-sky, start = --route-start. The legend reads the
    same tokens, so the key and the pins can never drift apart again.
*/
.route-map {
  background: var(--surface-tint);
  /* Holding state when a tour has no linked locations yet. */
}
.route-map .route-placeholder {
  margin-top: 32px;
  padding: 64px 24px;
  text-align: center;
  border: 2px dashed var(--brand-border);
  border-radius: 16px;
  color: var(--text-muted);
  background: color-mix(in srgb, var(--surface) 60%, transparent);
}
.route-map .route-placeholder svg {
  width: 40px;
  height: 40px;
  stroke: var(--brand-sky);
  fill: none;
  stroke-width: 1.25;
  opacity: 0.7;
}
.route-map .route-placeholder p {
  margin: 14px 0 0;
  font-size: 15px;
  font-style: italic;
}

.route-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  align-items: start;
  margin-top: 40px;
}

/* ---- Sticky map panel ------------------------------------------------- */
.route-map-panel {
  position: sticky;
  top: 60px;
  border-radius: 16px;
  background: var(--surface);
  border: 1px solid var(--brand-border);
  padding: 24px;
  box-shadow: 0 4px 20px color-mix(in srgb, var(--brand-deep) 6%, transparent);
}

.route-map-wrap {
  position: relative;
  width: 100%;
}
.route-map-wrap .nz-bg {
  width: 100%;
  height: auto;
  display: block;
}
.route-map-wrap .route-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

/* Route "roads" — a legible red over the green/yellow relief map (the wireframe
   accent), faint by default, lighting up as the journey is scrolled. Exact
   properties only (no `all`); under 300ms so the highlight feels immediate. */
.route-segment {
  fill: none;
  stroke: var(--route-line);
  stroke-width: 22;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 0.15;
  transition: opacity 0.25s cubic-bezier(0.23, 1, 0.32, 1);
  /* Transit legs (flight / ferry): butt caps so the gaps actually show — round
     caps overhang ~half the stroke width and fill small gaps into a solid line. */
}
.route-segment.ferry {
  stroke-linecap: butt;
  stroke-dasharray: 30, 26;
}
.route-segment.visited {
  opacity: 0.8;
}
.route-segment.active {
  opacity: 1;
}

/* City pins (wireframe scheme): default deep, start green, end deep, visited
   sky, current red + larger. Label colours shift with state. */
.city-marker {
  pointer-events: none;
  /* Pass-through waypoints (route goes via, no stop): smaller, muted. */
}
.city-marker circle {
  fill: var(--brand-deep);
  stroke: var(--surface);
  stroke-width: 6;
  transition: fill 0.25s cubic-bezier(0.23, 1, 0.32, 1), r 0.25s cubic-bezier(0.23, 1, 0.32, 1);
}
.city-marker text {
  font-family: var(--font-body);
  font-size: 48px;
  font-weight: 800;
  fill: var(--text-primary);
  paint-order: stroke;
  stroke: var(--surface);
  stroke-width: 12px;
  stroke-linejoin: round;
  transition: fill 0.25s cubic-bezier(0.23, 1, 0.32, 1);
}
.city-marker.start circle {
  fill: var(--route-start);
  r: 14;
}
.city-marker.end circle {
  fill: var(--brand-deep);
  r: 14;
}
.city-marker.visited circle {
  fill: var(--brand-sky);
}
.city-marker.visited text {
  fill: var(--brand-deep);
}
.city-marker.active circle {
  fill: var(--route-line);
  r: 18;
}
.city-marker.active text {
  fill: var(--route-line);
}
.city-marker.waypoint circle {
  fill: var(--surface);
  stroke: var(--brand-sky);
  stroke-width: 4;
}
.city-marker.waypoint text {
  font-size: 38px;
  fill: var(--text-muted);
}

/* ---- Legend ----------------------------------------------------------- */
.route-map-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 16px;
  justify-content: center;
  margin-top: 16px;
  font-size: 12px;
  color: var(--text-muted);
}
.route-map-legend .legend-item {
  display: flex;
  align-items: center;
  gap: 6px;
}
.route-map-legend .legend-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
}
.route-map-legend .legend-start {
  background: var(--route-start);
}
.route-map-legend .legend-current {
  background: var(--route-line);
}
.route-map-legend .legend-visited {
  background: var(--brand-sky);
}
.route-map-legend .legend-upcoming {
  background: var(--brand-deep);
}

/* ---- Stop cards ------------------------------------------------------- */
.route-stops-list {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.route-stop-card {
  border-radius: 16px;
  border: 1.5px solid var(--brand-border);
  background: var(--surface);
  overflow: hidden;
  transition: border-color 0.3s cubic-bezier(0.23, 1, 0.32, 1), box-shadow 0.3s cubic-bezier(0.23, 1, 0.32, 1), opacity 0.3s cubic-bezier(0.23, 1, 0.32, 1);
}
.route-stop-card.active {
  border-color: var(--brand-sky);
  box-shadow: 0 6px 24px color-mix(in srgb, var(--brand-deep) 10%, transparent);
}
.route-stop-card.visited {
  opacity: 0.7;
}
.route-stop-card.visited:hover {
  opacity: 1;
}

.rsc-hero {
  height: 200px;
  background-size: cover;
  background-position: center;
  background-color: var(--surface-tint);
  position: relative;
}
.rsc-hero::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 80px;
  background: linear-gradient(to bottom, transparent, color-mix(in srgb, var(--brand-deep) 45%, transparent));
}

.rsc-day {
  position: absolute;
  top: 14px;
  left: 14px;
  padding: 6px 14px;
  border-radius: 50px;
  background: rgba(255, 255, 255, 0.95);
  color: var(--brand-deep);
  font-size: 13px;
  font-weight: 700;
  backdrop-filter: blur(6px);
  z-index: 1;
  transition: background 0.3s cubic-bezier(0.23, 1, 0.32, 1), color 0.3s cubic-bezier(0.23, 1, 0.32, 1);
}
.route-stop-card.active .rsc-day {
  background: var(--route-line);
  color: #fff;
}

.rsc-island {
  position: absolute;
  top: 14px;
  right: 14px;
  padding: 5px 12px;
  border-radius: 50px;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  background: rgba(255, 255, 255, 0.9);
  color: var(--brand-sky-text);
  backdrop-filter: blur(6px);
  z-index: 1;
}

.rsc-travel {
  position: absolute;
  bottom: 10px;
  left: 12px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 10px;
  border-radius: 50px;
  background: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(4px);
  font-size: 11px;
  font-weight: 600;
  color: #fff;
  z-index: 1;
}
.rsc-travel svg {
  width: 12px;
  height: 12px;
  stroke: #fff;
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
}

.rsc-body {
  padding: 22px 24px;
}

.rsc-name {
  font-size: 20px;
  font-weight: 700;
  color: var(--brand-deep);
  margin-bottom: 8px;
}

.rsc-desc {
  font-size: 15px;
  color: var(--text-muted);
  line-height: 1.6;
  margin-bottom: 16px;
}

/* Highlights block */
.rsc-highlights-wrap {
  margin-top: 16px;
  padding: 16px 18px 18px;
  background: color-mix(in srgb, var(--surface-tint) 45%, var(--surface));
  border-radius: 12px;
  border: 1px solid color-mix(in srgb, var(--brand-border) 55%, var(--surface));
}

.rsc-highlights-label {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1.2px;
  color: var(--brand-sky-text);
  margin-bottom: 14px;
}
.rsc-highlights-label::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--brand-border);
}

.rsc-highlights-content {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.rsc-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.rsc-tag {
  font-size: 12px;
  font-weight: 600;
  padding: 5px 14px;
  border-radius: 50px;
  background: var(--surface-tint);
  color: var(--brand-deep);
}
.rsc-tag.yc {
  background: color-mix(in srgb, var(--brand-sky) 12%, transparent);
  color: var(--brand-sky-text);
}

.rsc-pois {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.rsc-poi {
  display: flex;
  align-items: baseline;
  gap: 10px;
  font-size: 13px;
  color: var(--text-muted);
  line-height: 1.5;
  padding-left: 2px;
}
.rsc-poi::before {
  content: "";
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--brand-sky);
  flex-shrink: 0;
  position: relative;
  top: -1px;
}

.rsc-choices {
  padding: 14px 16px;
  border-radius: 10px;
  background: color-mix(in srgb, var(--brand-sky) 5%, transparent);
  border: 1px solid color-mix(in srgb, var(--brand-sky) 12%, transparent);
}

.rsc-choices-label {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--brand-sky-text);
  margin-bottom: 8px;
}

.rsc-choice-item {
  display: flex;
  align-items: baseline;
  gap: 8px;
  font-size: 13px;
  color: var(--text-muted);
  line-height: 1.5;
  padding: 4px 0;
}
.rsc-choice-item::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--brand-sky);
  flex-shrink: 0;
  position: relative;
  top: 6px;
}
.rsc-choice-item strong {
  display: block;
  color: var(--brand-deep);
  font-weight: 600;
}

.rsc-accom {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  border-radius: 12px;
  background: var(--surface);
  border: 1px solid var(--brand-border);
}
.rsc-accom .rsc-accom-img {
  width: 52px;
  height: 52px;
  border-radius: 10px;
  background-size: cover;
  background-position: center;
  flex-shrink: 0;
  background-color: var(--surface-tint);
}
.rsc-accom .rsc-accom-info {
  flex: 1;
  min-width: 0;
}
.rsc-accom .rsc-accom-label {
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  color: var(--text-subtle);
}
.rsc-accom .rsc-accom-name {
  font-size: 13px;
  font-weight: 700;
  color: var(--brand-deep);
}
.rsc-accom .rsc-accom-alt {
  font-size: 12px;
  color: var(--text-muted);
  line-height: 1.4;
  margin-top: 2px;
}

/* ---- Card footer ------------------------------------------------------ */
.rsc-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid color-mix(in srgb, var(--brand-border) 55%, var(--surface));
}

.rsc-see-day {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 700;
  color: var(--brand-deep);
  padding: 10px 20px;
  border-radius: 50px;
  border: 2px solid var(--brand-deep);
  background: var(--surface);
  cursor: pointer;
  letter-spacing: 0.3px;
  transition: background 0.2s cubic-bezier(0.23, 1, 0.32, 1), color 0.2s cubic-bezier(0.23, 1, 0.32, 1), transform 0.16s cubic-bezier(0.23, 1, 0.32, 1);
}
.rsc-see-day:hover {
  background: var(--brand-deep);
  color: #fff;
}
.rsc-see-day:active {
  transform: scale(0.97);
}
.rsc-see-day svg {
  width: 14px;
  height: 14px;
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
}

.rsc-explore {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 600;
  color: var(--brand-sky-text);
  text-decoration: none;
  transition: color 0.2s cubic-bezier(0.23, 1, 0.32, 1), gap 0.2s cubic-bezier(0.23, 1, 0.32, 1);
}
.rsc-explore:hover {
  color: var(--brand-deep);
  gap: 10px;
}
.rsc-explore svg {
  width: 14px;
  height: 14px;
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
}

/* Desktop: secondary-row is transparent (see-day + explore sit on the footer
   flex, show-map is hidden); mobile re-stacks it into its own row below. */
.rsc-secondary-row {
  display: contents;
}

/* "Show on Map" — server-rendered, CSS-hidden until mobile. */
.rsc-show-map {
  display: none;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 700;
  color: var(--brand-sky-text);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding: 8px 16px;
  border-radius: 50px;
  border: 1.5px solid var(--brand-sky);
  background: var(--surface);
  cursor: pointer;
  transition: background 0.2s cubic-bezier(0.23, 1, 0.32, 1), transform 0.16s cubic-bezier(0.23, 1, 0.32, 1);
}
.rsc-show-map:hover {
  background: color-mix(in srgb, var(--brand-sky) 6%, transparent);
}
.rsc-show-map:active {
  transform: scale(0.97);
}
.rsc-show-map svg {
  width: 14px;
  height: 14px;
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
}

/* "View Route Map" under the section heading: mobile only, where the map
   lives in the bottom sheet rather than beside the cards. */
.route-view-map {
  display: none;
  align-items: center;
  gap: 8px;
  margin-top: 16px;
  font-size: 12px;
  font-weight: 700;
  color: var(--brand-sky-text);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding: 10px 20px;
  min-height: 44px;
  border-radius: 50px;
  border: 1.5px solid var(--brand-sky);
  background: var(--surface);
  cursor: pointer;
  transition: background 0.2s cubic-bezier(0.23, 1, 0.32, 1), transform 0.16s cubic-bezier(0.23, 1, 0.32, 1);
}
.route-view-map:hover {
  background: color-mix(in srgb, var(--brand-sky) 6%, transparent);
}
.route-view-map:active {
  transform: scale(0.97);
}
.route-view-map:focus-visible {
  outline: 2px solid var(--brand-sky);
  outline-offset: 2px;
}
.route-view-map svg {
  width: 16px;
  height: 16px;
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
  stroke-linejoin: round;
}

/* ---- Phones: the tour's static Tour map --------------------------------
   Rendered only when the tour has one, and shown only on phones, where it
   replaces the interactive map (and its sheet) above the stop cards. */
.route-static-map {
  display: none;
  margin: 24px 0 0;
  padding: 12px;
  border-radius: 12px;
  background: var(--surface);
  border: 1px solid var(--brand-border);
}
.route-static-map img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 6px;
}

/* ---- Mobile route-map bottom sheet ------------------------------------ */
.map-sheet-overlay {
  position: fixed;
  inset: 0;
  z-index: 999;
  background: color-mix(in srgb, var(--brand-deep) 50%, transparent);
  backdrop-filter: blur(4px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s cubic-bezier(0.23, 1, 0.32, 1);
}
.map-sheet-overlay.open {
  opacity: 1;
  pointer-events: auto;
}

.map-sheet {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  background: var(--surface);
  border-radius: 20px 20px 0 0;
  box-shadow: 0 -8px 40px color-mix(in srgb, var(--brand-deep) 20%, transparent);
  transform: translateY(100%);
  transition: transform 0.35s cubic-bezier(0.32, 0.72, 0, 1);
  max-height: 85vh;
  overflow-y: auto;
  /* X drawn as two pseudo-bars, not an inline <svg> — the global
     `svg{max-width:100%}` collapses a flex-item SVG's <line> X to a sliver. */
}
.map-sheet.open {
  transform: translateY(0);
}
.map-sheet .map-sheet-handle {
  display: flex;
  justify-content: center;
  padding: 12px 0 4px;
  touch-action: none;
  cursor: grab;
}
.map-sheet .map-sheet-handle span {
  width: 36px;
  height: 4px;
  border-radius: 2px;
  background: var(--brand-border);
}
.map-sheet .map-sheet-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 20px 16px;
}
.map-sheet .map-sheet-header h3 {
  font-size: 18px;
  font-weight: 700;
  color: var(--brand-deep);
}
.map-sheet .map-sheet-close {
  position: relative;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--surface-tint);
  border: 1px solid var(--brand-border);
  cursor: pointer;
  padding: 0;
  transition: background 0.2s cubic-bezier(0.23, 1, 0.32, 1), transform 0.16s cubic-bezier(0.23, 1, 0.32, 1);
}
.map-sheet .map-sheet-close:hover {
  background: var(--brand-border);
}
.map-sheet .map-sheet-close:active {
  transform: scale(0.94);
}
.map-sheet .map-sheet-close::before, .map-sheet .map-sheet-close::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 16px;
  height: 2px;
  border-radius: 1px;
  background: var(--brand-deep);
}
.map-sheet .map-sheet-close::before {
  transform: translate(-50%, -50%) rotate(45deg);
}
.map-sheet .map-sheet-close::after {
  transform: translate(-50%, -50%) rotate(-45deg);
}
.map-sheet .map-sheet-body {
  padding: 0 16px 24px;
}
.map-sheet .map-sheet-body .route-map-wrap {
  position: relative;
  width: 100%;
}
.map-sheet .map-sheet-body .nz-bg {
  width: 100%;
  height: auto;
  display: block;
}
.map-sheet .map-sheet-body .route-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
.map-sheet .map-sheet-body .route-map-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 12px;
  justify-content: center;
  margin-top: 12px;
  font-size: 11px;
  color: var(--text-muted);
}

/* ---- Tablet ----------------------------------------------------------- */
@media (max-width: 1024px) {
  .route-split {
    gap: 32px;
  }
}
/* ---- Mobile: drop the sticky map, single column, show-on-map button --- */
@media (max-width: 768px) {
  .route-split {
    grid-template-columns: 1fr;
  }
  .route-map-panel {
    display: none;
  }
  .route-static-map {
    display: block;
  }
  .route-static-map + .route-split {
    margin-top: 24px;
  }
  .route-stops-list {
    gap: 14px;
  }
  .rsc-show-map,
  .route-view-map {
    display: inline-flex;
  }
  .route-stop-card {
    border-radius: 12px;
  }
  .rsc-hero {
    height: 160px;
  }
  .rsc-body {
    padding: 16px 18px;
  }
  .rsc-name {
    font-size: 18px;
    margin-bottom: 6px;
  }
  .rsc-desc {
    font-size: 14px;
    margin-bottom: 12px;
  }
  .rsc-highlights-wrap {
    padding: 12px 14px;
    margin-top: 12px;
  }
  .rsc-pois {
    gap: 8px;
  }
  .rsc-poi {
    font-size: 12px;
  }
  .rsc-footer {
    margin-top: 14px;
    padding-top: 14px;
    flex-direction: column;
    gap: 10px;
    align-items: stretch;
  }
  .rsc-see-day {
    padding: 11px 20px;
    border-width: 1.5px;
    justify-content: center;
    width: 100%;
    text-align: center;
  }
  .rsc-secondary-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
  }
  .rsc-show-map {
    font-size: 11px;
    padding: 7px 14px;
    flex-shrink: 0;
    white-space: nowrap;
  }
  .rsc-explore {
    font-size: 12px;
    min-width: 0;
    justify-content: flex-end;
    text-align: right;
  }
  .rsc-accom {
    padding: 10px 12px;
  }
  .rsc-accom .rsc-accom-img {
    width: 40px;
    height: 40px;
  }
  .rsc-travel {
    font-size: 10px;
    padding: 3px 8px;
  }
  .rsc-choices {
    padding: 10px 12px;
  }
}
@media (max-width: 480px) {
  .rsc-hero {
    height: 140px;
  }
}
/* Reduced motion: keep colour/opacity state changes (they aid comprehension),
   drop transform-based motion and the press scale. */
@media (prefers-reduced-motion: reduce) {
  .map-sheet {
    transition: transform 0.001s linear;
  }
  .rsc-see-day:active,
  .rsc-show-map:active,
  .route-view-map:active,
  .map-sheet-close:active {
    transform: none;
  }
}
/*
    Tour Single · Your Route — the LTT Google Maps panel (doc 09 §6).

    EVERY RULE IS NAMESPACED UNDER .route-gmap, and that is load-bearing.
    sections/_sections.scss imports every partial on every brand, so an
    unscoped `.city-marker` or `.route-map-wrap` rule here would reach into
    PD's illustrated map — _ts-route.scss:90 sets `.city-marker {
    pointer-events: none }` at file scope, which would also kill clicks on
    markers that need them. Markers here are .route-gmap__marker. Nothing in
    this file may name a class _ts-route.scss owns.

    No hex literals anywhere, comments included: .bin/lint-tokens.sh greps
    every line of every non-exempt partial, so a colour written in a comment
    fails the build exactly like one written in a declaration.
*/
.route-gmap {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* ---- The map box ------------------------------------------------------
   Fixed aspect so the summary, the gate and the live map all occupy the same
   space. Nothing reflows when Google arrives. */
.route-gmap__stage {
  position: relative;
  width: 100%;
  /* The map is the point of this panel, so it takes the height. It used to
     be 4:5 with a 42-row wall of text underneath, which pushed the map into
     a square and made the sticky panel taller than the viewport. */
  height: clamp(460px, 72vh, 760px);
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid var(--brand-border);
  background: var(--surface-tint);
}

.route-gmap__canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

/* Rendered with the `hidden` attribute and only revealed on an error. Without
   this guard the class's own `display: flex` beats the user agent's
   `[hidden] { display: none }`, so the error layer sat over the map from the
   first paint and a successful load showed a blank box. See the matching note
   in components/_google-embed-gate.scss. */
.route-gmap__status[hidden] {
  display: none;
}

.route-gmap__status {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  text-align: center;
  background: var(--surface-tint);
}
.route-gmap__status p {
  margin: 0;
  max-width: 34ch;
  font-size: 13px;
  line-height: 1.55;
  color: var(--text-muted);
}

/* ---- Markers ----------------------------------------------------------
   DOM content on an AdvancedMarkerElement, so they take brand tokens and are
   focusable, which a generated PNG pin is not. */
.route-gmap__marker {
  position: relative;
  display: flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
}

.route-gmap__dot {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  flex: 0 0 26px;
  border-radius: 50%;
  background: var(--brand-deep);
  border: 2px solid var(--surface);
  box-shadow: 0 1px 4px color-mix(in srgb, var(--brand-ink) 35%, transparent);
  transition: transform 0.2s ease, background 0.2s ease;
}
.route-gmap__dot svg {
  width: 14px;
  height: 14px;
  stroke: var(--surface);
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.route-gmap__chip {
  display: inline-flex;
  align-items: baseline;
  gap: 5px;
  padding: 3px 9px;
  border-radius: 5px;
  background: var(--brand-deep);
  color: var(--ltt-lime, var(--surface));
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.35;
  white-space: nowrap;
  box-shadow: 0 1px 4px color-mix(in srgb, var(--brand-ink) 30%, transparent);
}

.route-gmap__chip-days {
  font-size: 10px;
  font-weight: 600;
  opacity: 0.8;
}

/* Label placement overrides for crowded stretches of coast. */
.route-gmap__marker--place-left {
  flex-direction: row-reverse;
}

.route-gmap__marker--place-above {
  flex-direction: column-reverse;
  align-items: center;
}

.route-gmap__marker--place-below {
  flex-direction: column;
  align-items: center;
}

.route-gmap__marker--icon .route-gmap__chip {
  display: none;
}

/* ---- Selection ---------------------------------------------------------
   Choosing a place shows the day's whole area and then picks one out of it:
   everything else steps back so the eye lands in one move. Clicking the same
   chip again clears it, as does Escape. */
.route-gmap.has-focus .route-gmap__marker.is-dimmed {
  opacity: 0.28;
  filter: saturate(0.4);
}
.route-gmap.has-focus .route-gmap__marker.is-dimmed .route-gmap__chip {
  display: none;
}
.route-gmap.has-focus .route-gmap__marker.is-focused {
  z-index: 20;
  /* A dropped label comes back when its place is the one selected. */
}
.route-gmap.has-focus .route-gmap__marker.is-focused .route-gmap__dot {
  transform: scale(1.25);
  background: var(--brand-sky);
  border-width: 3px;
  box-shadow: 0 2px 10px color-mix(in srgb, var(--brand-ink) 45%, transparent);
}
.route-gmap.has-focus .route-gmap__marker.is-focused .route-gmap__chip {
  display: inline-flex;
}

.route-gmap__marker.is-dimmed,
.route-gmap__marker.is-focused {
  transition: opacity 0.25s ease, filter 0.25s ease;
}

@media (prefers-reduced-motion: reduce) {
  .route-gmap.has-focus .route-gmap__marker.is-focused .route-gmap__dot {
    transform: none;
  }
}
/* Set by declutter() in route-map.js on every idle. A pin the eye could not
   have separated from its neighbour is dropped at this zoom; the route line
   still runs through the place, and zooming in brings it back. */
.route-gmap__marker.is-crowded {
  display: none;
}

/* Near the panel's right edge a label would be clipped, so it moves to the
   other side of its own pin instead of being dropped. */
.route-gmap__marker.is-flipped {
  flex-direction: row-reverse;
}

.route-gmap__marker.is-chip-hidden .route-gmap__chip {
  display: none;
}

/* A dropped label must never take a dropped click target with it: the dot
   stays, and it still opens its occurrence picker. */
.route-gmap__marker.is-chip-hidden {
  pointer-events: auto;
}

.route-gmap__marker.is-active {
  z-index: 5;
}
.route-gmap__marker.is-active .route-gmap__dot {
  transform: scale(1.18);
  background: var(--brand-sky);
}

.route-gmap__marker.is-visited .route-gmap__dot {
  background: var(--brand-sky);
}

/* Clicking a place in the written index lands the eye on its marker. One
   authored moment, on the element the visitor just asked about. */
.route-gmap__marker.is-pinged {
  z-index: 6;
}
.route-gmap__marker.is-pinged .route-gmap__dot {
  animation: route-gmap-ping 1.4s cubic-bezier(0.22, 1, 0.36, 1);
}

@keyframes route-gmap-ping {
  0% {
    transform: scale(1);
    box-shadow: 0 0 0 0 color-mix(in srgb, var(--brand-sky) 70%, transparent);
  }
  35% {
    transform: scale(1.3);
  }
  100% {
    transform: scale(1);
    box-shadow: 0 0 0 18px color-mix(in srgb, var(--brand-sky) 0%, transparent);
  }
}
/* ---- Occurrence picker ------------------------------------------------
   A revisited place shares one marker but has several cards. Rather than
   guessing which one a click meant, show the days and let the viewer pick. */
.route-gmap__picker {
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%);
  z-index: 10;
  min-width: 170px;
  padding: 6px;
  border-radius: 10px;
  background: var(--surface);
  border: 1px solid var(--brand-border);
  box-shadow: 0 8px 24px color-mix(in srgb, var(--brand-ink) 22%, transparent);
}

.route-gmap__picker-title {
  margin: 2px 8px 6px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-muted);
}

.route-gmap__picker-item {
  display: block;
  width: 100%;
  padding: 8px 10px;
  text-align: left;
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary);
  background: none;
  border: none;
  border-radius: 6px;
  cursor: pointer;
}
.route-gmap__picker-item:hover {
  background: var(--surface-tint);
}
.route-gmap__picker-item:focus-visible {
  outline: 2px solid var(--brand-deep);
  outline-offset: -2px;
}

/* ---- The written route ------------------------------------------------
   Two jobs: the whole itinerary when there is no map, and the map's index
   when there is one. The first cut was a flat 42-row table with "by sea"
   printed twenty times, which is a wall, not information. Grouped by day, the
   mode printed only where it changes, and scrollable so the sticky panel
   never outgrows the viewport. */
.route-gmap__index {
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.route-gmap__index-title {
  margin: 0 0 10px;
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
}

.route-gmap__days {
  margin: 0;
  padding: 0 4px 0 0;
  list-style: none;
  max-height: 320px;
  overflow-y: auto;
  overscroll-behavior: contain;
  /* The scrollbar is part of the design, not a browser default left showing. */
  scrollbar-width: thin;
  scrollbar-color: var(--brand-border) transparent;
}
.route-gmap__days::-webkit-scrollbar {
  width: 6px;
}
.route-gmap__days::-webkit-scrollbar-track {
  background: transparent;
}
.route-gmap__days::-webkit-scrollbar-thumb {
  background: var(--brand-border);
  border-radius: 3px;
}

.route-gmap__day {
  display: grid;
  grid-template-columns: 52px 1fr;
  align-items: start;
  gap: 10px;
  padding: 8px 0;
}
.route-gmap__day + .route-gmap__day {
  border-top: 1px solid color-mix(in srgb, var(--brand-border) 60%, transparent);
}

.route-gmap__day-label {
  margin: 3px 0 0;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-muted);
  white-space: nowrap;
}

.route-gmap__stops {
  margin: 0;
  padding: 0;
  list-style: none;
  min-width: 0;
}

/* A mode change, printed once, where it happens. */
.route-gmap__leg {
  display: flex;
  align-items: center;
  gap: 7px;
  margin: 5px 0 3px;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--brand-sky-text);
}
.route-gmap__leg::before {
  content: "";
  flex: 0 0 14px;
  height: 1px;
  background: currentColor;
  opacity: 0.55;
}
.route-gmap__leg:first-child {
  margin-top: 0;
}

.route-gmap__stop-row {
  margin: 0;
}

.route-gmap__stop {
  display: block;
  padding: 4px 8px;
  margin-left: -8px;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.35;
  color: var(--text-primary);
}
.route-gmap__stop.is-interactive {
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}
.route-gmap__stop.is-interactive:hover {
  background: var(--surface-tint);
  color: var(--brand-deep);
}
.route-gmap__stop.is-interactive:focus-visible {
  outline: 2px solid var(--brand-deep);
  outline-offset: 1px;
}
.route-gmap__stop.is-current {
  background: color-mix(in srgb, var(--brand-sky) 16%, transparent);
  color: var(--brand-deep);
}

/* ---- "Places visited" chips on the shared stop card -------------------
   These two classes sit OUTSIDE .route-gmap, because they are rendered inside
   the shared stop card. They are still LTT-only and cannot reach PD: route.php
   emits them from ltt_route_stop_vias(), which returns [] unless the renderer
   is gmap, and the fields feeding it are hidden from non-gmap installs. So on
   PD these selectors match nothing at all.

   They earn their place: ltt_tour_route_stops() collapses a multi-day stay in
   one destination into a single "Days 2-8" card, so without this the card
   names one place while the map shows ten. */
.rsc-vias {
  margin-top: 10px;
}

.rsc-vias-label {
  margin-bottom: 6px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-muted);
}

.rsc-vias-list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.rsc-via {
  display: inline-block;
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid var(--brand-border);
  background: var(--surface);
  font-size: 12px;
  font-weight: 600;
  color: var(--text-primary);
  text-decoration: none;
}

.rsc-via {
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

a.rsc-via:hover,
.rsc-via.is-interactive:hover {
  border-color: var(--brand-sky);
  color: var(--brand-deep);
}

/* Wired to the map by route-map.js. Only then does it look pressable — a chip
   that cannot move the map must not pretend it can. */
.rsc-via.is-interactive {
  cursor: pointer;
}
.rsc-via.is-interactive:focus-visible {
  outline: 2px solid var(--brand-deep);
  outline-offset: 2px;
}

/* Selected. Navy field, Kiwi Lime ink — the logo's own pairing, 8.8:1. */
.rsc-via.is-current {
  background: var(--brand-deep);
  border-color: var(--brand-deep);
  color: var(--ltt-lime, var(--surface));
}

/* The hover rule above paints the ink navy, which on the selected chip's navy
   field is navy on navy and the label disappears under the cursor. A selected
   chip lifts instead: the ring widens and the field lightens a step, so hover
   reads as "click to clear" without touching the text colour. */
.rsc-via.is-current:hover,
a.rsc-via.is-current:hover {
  background: color-mix(in srgb, var(--brand-deep) 86%, var(--brand-sky));
  border-color: var(--ltt-lime, var(--brand-sky));
  color: var(--ltt-lime, var(--surface));
}

.rsc-via.is-current:focus-visible {
  outline-color: var(--ltt-lime, var(--brand-deep));
}

/* ---- Editors only ----------------------------------------------------- */
.route-gmap__admin-note {
  padding: 12px 14px;
  border-radius: 8px;
  border: 1px dashed var(--brand-sky);
  background: color-mix(in srgb, var(--brand-sky) 8%, transparent);
  font-size: 13px;
  color: var(--text-primary);
}
.route-gmap__admin-note strong {
  display: block;
  margin-bottom: 4px;
}
.route-gmap__admin-note ul {
  margin: 0 0 6px;
  padding-left: 18px;
}
.route-gmap__admin-note p {
  margin: 0;
  font-size: 11px;
  color: var(--text-muted);
}

/* On mobile the sticky panel is hidden and the map lives in the sheet, but the
   written route must still be there — it is the itinerary, not a decoration. */
@media (max-width: 768px) {
  .route-gmap__stage {
    display: none;
  }
  .route-map-panel:has(.route-gmap) {
    display: block;
    position: static;
    padding: 16px;
    margin-bottom: 18px;
  }
}
/* In the mobile sheet it is the CANVAS that gets re-parented, not the stage —
   adopt() moves the live map node so the instance survives. This rule used to
   target .route-gmap__stage, which never enters the sheet, so the canvas
   inherited whatever height the sheet body happened to give it: 110px, a strip
   too short to read a route on. Size the thing that actually moves. */
.map-sheet-body .route-gmap__canvas,
.map-sheet-body .route-gmap__stage {
  display: block;
  position: relative;
  width: 100%;
  aspect-ratio: auto;
  height: 62vh;
  min-height: 320px;
  border: none;
  border-radius: 10px;
  overflow: hidden;
}

@media (prefers-reduced-motion: reduce) {
  .route-gmap__dot {
    transition: none;
  }
}
/*
    Tour Single · Day-by-Day itinerary — a continuous timeline of collapsible day
    cards grouped by leg/chapter strips, with the customisable-day options inline.
    (The desktop detail sidebar is deferred with the route map.)
*/
.itinerary {
  /* Split: timeline + sticky detail sidebar (cards are server-rendered HTML). */
  /* Toolbar */
  /* Day progress strip */
  /* Chapter header strips */
  /* .itin-chapter-num (the "Leg N" pill) was removed — the region name is the
     heading now, so there is no number to badge. */
  /* Day cards — continuous timeline */
  /* Collapsed header */
  /* Expanded body — JS sets max-height to the content height for an exact slide. */
  /* Customisable-day options inside the body */
}
.itinerary .itinerary-timeline {
  min-width: 0;
}
.itinerary .itin-split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 380px;
  gap: 40px;
  align-items: start;
  margin-top: 32px;
}
.itinerary .itin-detail-panel {
  position: sticky;
  top: 84px;
}
.itinerary .itin-detail-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 36px 28px;
  text-align: center;
  color: var(--text-muted);
  font-size: 13.5px;
  line-height: 1.5;
  border: 1px dashed var(--brand-border);
  border-radius: 16px;
  background: var(--surface-tint);
}
.itinerary .itin-detail-empty svg {
  width: 36px;
  height: 36px;
  stroke: var(--brand-sky);
  fill: none;
  stroke-width: 1.25;
  opacity: 0.6;
}
.itinerary .itin-detail-empty span {
  display: block;
  max-width: 24ch;
}
.itinerary .itin-detail-card {
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid var(--brand-border);
  background: var(--surface);
  box-shadow: 0 4px 20px color-mix(in srgb, var(--brand-deep) 6%, transparent);
}
.itinerary .idp-hero {
  height: 200px;
  background-size: cover;
  background-position: center;
  position: relative;
  background-color: var(--surface-tint);
}
.itinerary .idp-hero::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 90px;
  background: linear-gradient(to bottom, transparent, color-mix(in srgb, var(--brand-deep) 55%, transparent));
}
.itinerary .idp-day-badge {
  position: absolute;
  top: 12px;
  left: 12px;
  padding: 5px 14px;
  border-radius: 50px;
  background: rgba(255, 255, 255, 0.95);
  font-size: 12px;
  font-weight: 700;
  color: var(--brand-deep);
  z-index: 1;
}
.itinerary .idp-title-overlay {
  position: absolute;
  bottom: 14px;
  left: 16px;
  right: 16px;
  z-index: 1;
}
.itinerary .idp-title-overlay h3 {
  font-size: 20px;
  font-weight: 700;
  color: #fff;
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.3);
}
.itinerary .idp-title-overlay span {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.8);
}
.itinerary .idp-tabs {
  display: flex;
  border-bottom: 1px solid var(--brand-border);
}
.itinerary .idp-tab {
  flex: 1;
  padding: 12px 8px;
  text-align: center;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-muted);
  cursor: pointer;
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  transition: color 0.2s, border-color 0.2s;
}
.itinerary .idp-tab:hover {
  color: var(--brand-deep);
}
.itinerary .idp-tab.active {
  color: var(--brand-deep);
  border-bottom-color: var(--brand-sky);
}
.itinerary .idp-content {
  padding: 18px 20px;
}
.itinerary .idp-pane {
  display: none;
}
.itinerary .idp-pane.active {
  display: block;
}
.itinerary .idp-desc {
  font-size: 14px;
  color: var(--text-primary);
  line-height: 1.6;
  margin: 0 0 14px;
}
.itinerary .idp-meta {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.itinerary .idp-meta-row {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  color: var(--text-muted);
}
.itinerary .idp-meta-row svg {
  width: 15px;
  height: 15px;
  stroke: var(--brand-sky);
  fill: none;
  stroke-width: 1.5;
  flex-shrink: 0;
}
.itinerary .idp-meta-row strong {
  color: var(--brand-deep);
}
.itinerary .idp-explore-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 14px;
  font-size: 13px;
  font-weight: 600;
  color: var(--brand-sky-text);
  text-decoration: none;
  transition: gap 0.2s, color 0.2s;
}
.itinerary .idp-explore-link:hover {
  color: var(--brand-deep);
  gap: 10px;
}
.itinerary .idp-explore-link svg {
  width: 14px;
  height: 14px;
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
}
.itinerary .idp-accom-img {
  width: 100%;
  height: 140px;
  object-fit: cover;
  border-radius: 10px;
  margin-bottom: 14px;
  display: block;
}
.itinerary .idp-accom-name {
  font-size: 16px;
  font-weight: 700;
  color: var(--brand-deep);
  margin-bottom: 4px;
}
.itinerary .idp-accom-loc {
  font-size: 12px;
  color: var(--text-muted);
  margin-bottom: 10px;
}
.itinerary .idp-accom-alt {
  font-size: 12px;
  color: var(--text-muted);
  margin: -4px 0 10px;
}
.itinerary .idp-accom-features {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 14px;
}
.itinerary .idp-accom-feat {
  font-size: 11px;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: 50px;
  background: var(--surface-tint);
  color: var(--brand-deep);
}
.itinerary .idp-map-embed {
  width: 100%;
  height: 160px;
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid var(--brand-border);
  background: var(--surface-tint);
}
.itinerary .idp-map-embed iframe {
  width: 100%;
  height: 100%;
  border: none;
  display: block;
}
.itinerary .idp-empty-note {
  font-size: 13px;
  color: var(--text-muted);
  font-style: italic;
  padding: 8px 0;
}
.itinerary .idp-hl-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.itinerary .idp-hl-card {
  display: block;
  width: 100%;
  padding: 0;
  text-align: left;
  cursor: pointer;
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid var(--brand-border);
  background: var(--surface);
  transition: border-color 0.2s, box-shadow 0.2s;
}
.itinerary .idp-hl-card:hover {
  border-color: var(--brand-sky);
  box-shadow: 0 4px 14px color-mix(in srgb, var(--brand-deep) 12%, transparent);
}
.itinerary .idp-hl-card:hover .idp-hl-zoom {
  opacity: 1;
}
.itinerary .idp-hl-card:hover .idp-hl-img {
  transform: scale(1.04);
}
.itinerary .idp-hl-imgwrap {
  position: relative;
  display: block;
  overflow: hidden;
}
.itinerary .idp-hl-img {
  width: 100%;
  height: 80px;
  object-fit: cover;
  display: block;
  transition: transform 0.3s ease;
}
.itinerary .idp-hl-zoom {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.92);
  opacity: 0;
  transition: opacity 0.2s;
}
.itinerary .idp-hl-zoom svg {
  width: 13px;
  height: 13px;
  stroke: var(--brand-deep);
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.itinerary .idp-hl-name {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  padding: 8px 10px;
  font-size: 12px;
  font-weight: 700;
  color: var(--brand-deep);
  line-height: 1.3;
}
.itinerary .idp-poi {
  grid-column: 1/-1;
  display: flex;
  align-items: baseline;
  gap: 8px;
  font-size: 13px;
  color: var(--text-muted);
  line-height: 1.5;
  padding: 6px 0;
  border-bottom: 1px solid var(--brand-border);
}
.itinerary .idp-poi::before {
  content: "";
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--brand-sky);
  flex-shrink: 0;
}
.itinerary .idp-poi:last-child {
  border-bottom: none;
}
.itinerary .itin-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 24px;
  gap: 16px;
  flex-wrap: wrap;
}
.itinerary .itin-controls {
  display: flex;
  gap: 8px;
}
.itinerary .itin-btn {
  padding: 7px 16px;
  border-radius: 50px;
  border: 1.5px solid var(--brand-border);
  background: var(--surface);
  font-size: 12px;
  font-weight: 600;
  color: var(--brand-deep);
  cursor: pointer;
  transition: border-color 0.2s, background 0.2s, color 0.2s;
}
.itinerary .itin-btn:hover {
  border-color: var(--brand-sky);
  background: var(--surface-tint);
}
.itinerary .day-strip {
  display: flex;
  gap: 3px;
  align-items: center;
  overflow-x: auto;
  scrollbar-width: none;
  padding: 4px 0;
}
.itinerary .day-strip::-webkit-scrollbar {
  display: none;
}
.itinerary .day-dot {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  font-weight: 700;
  background: var(--surface-tint);
  color: var(--brand-deep);
  cursor: pointer;
  flex-shrink: 0;
  transition: background 0.2s, border-color 0.2s;
  border: 2px solid transparent;
}
.itinerary .day-dot:hover {
  background: color-mix(in srgb, var(--brand-sky) 18%, var(--surface));
}
.itinerary .day-dot.yc {
  border-color: var(--brand-sky);
}
.itinerary .itin-chapter {
  margin-top: 36px;
}
.itinerary .itin-chapter:first-child {
  margin-top: 0;
}
.itinerary .itin-chapter-head {
  position: relative;
  border-radius: 16px;
  overflow: hidden;
  min-height: 100px;
  display: flex;
  align-items: flex-end;
  margin-bottom: 16px;
  background: var(--brand-deep);
}
.itinerary .itin-chapter-bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  opacity: 0.4;
}
.itinerary .itin-chapter-inner {
  position: relative;
  z-index: 1;
  padding: 20px 24px;
  width: 100%;
  display: flex;
  align-items: center;
  gap: 14px;
}
.itinerary .itin-chapter-text {
  flex: 1;
}
.itinerary .itin-chapter-title {
  font-size: 20px;
  font-weight: 700;
  color: #fff;
}
.itinerary .itin-chapter-sub {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.7);
  margin-top: 2px;
}
.itinerary .itin-day {
  position: relative;
  padding-left: 56px;
  margin-bottom: -1px;
  border-left: 2px solid var(--brand-border);
}
.itinerary .itin-day:last-child {
  border-left-color: transparent;
}
.itinerary .itin-day:focus {
  outline: none;
}
.itinerary .itin-day:focus-visible .itin-header {
  outline: 2px solid var(--brand-sky);
  outline-offset: 2px;
}
.itinerary .itin-day.your-choice .day-circle {
  background: var(--gradient-button);
  color: var(--gradient-button-fg);
  box-shadow: 0 2px 8px color-mix(in srgb, var(--brand-sky) 30%, transparent);
}
.itinerary .itin-day.your-choice .itin-header {
  border-left: 3px solid var(--brand-sky);
}
.itinerary .itin-day.your-choice .itin-body {
  border-left: 3px solid var(--brand-sky);
}
.itinerary .day-circle {
  position: absolute;
  left: -15px;
  top: 50%;
  transform: translateY(-50%);
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--brand-deep);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
}
.itinerary .itin-day.open .day-circle {
  top: 36px;
  transform: none;
}
.itinerary .itin-header {
  display: flex;
  align-items: center;
  background: var(--surface);
  border: 1.5px solid var(--brand-border);
  cursor: pointer;
  transition: background 0.2s;
  overflow: hidden;
  min-height: 72px;
  position: relative;
}
.itinerary .itin-header:hover {
  background: color-mix(in srgb, var(--surface-tint) 50%, var(--surface));
}
.itinerary .itin-day:first-child .itin-header {
  border-radius: 14px 14px 0 0;
}
.itinerary .itin-day.open .itin-header {
  background: var(--surface-tint);
  border-bottom-color: transparent;
}
.itinerary .itin-header-img {
  width: 120px;
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  background-size: cover;
  background-position: center;
}
.itinerary .itin-header-img::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  width: 60px;
  background: linear-gradient(to right, var(--surface), transparent);
}
.itinerary .itin-day.open .itin-header .itin-header-img::before {
  background: linear-gradient(to right, var(--surface-tint), transparent);
}
.itinerary .itin-header-left {
  flex: 1;
  min-width: 0;
  padding: 16px 20px;
  position: relative;
  z-index: 1;
}
.itinerary .itin-title {
  font-size: 16px;
  font-weight: 700;
  color: var(--brand-deep);
  margin-bottom: 5px;
}
.itinerary .itin-meta {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  font-size: 12px;
  color: var(--text-muted);
}
.itinerary .itin-tag {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  border-radius: 50px;
  background: var(--surface-tint);
  color: var(--brand-deep);
  font-weight: 600;
}
.itinerary .itin-accommodation {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--brand-deep);
  font-weight: 600;
}
.itinerary .itin-accommodation svg {
  width: 14px;
  height: 14px;
  stroke: var(--brand-sky);
  fill: none;
  stroke-width: 1.5;
  flex-shrink: 0;
}
.itinerary .itin-meals-text {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: var(--text-muted);
}
.itinerary .itin-meals-text svg {
  width: 14px;
  height: 14px;
  stroke: var(--brand-sky);
  fill: none;
  stroke-width: 1.5;
  flex-shrink: 0;
}
.itinerary .yc-badge {
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 1.2px;
  padding: 3px 10px;
  border-radius: 50px;
  background: var(--gradient-button);
  color: var(--gradient-button-fg);
}
.itinerary .itin-chevron-wrap {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.9);
  border: 1px solid var(--brand-border);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  position: relative;
  z-index: 1;
  margin-right: 16px;
  transition: background 0.2s, border-color 0.2s;
}
.itinerary .itin-header:hover .itin-chevron-wrap {
  background: #fff;
  border-color: var(--brand-sky);
}
.itinerary .itin-chevron {
  width: 16px;
  height: 16px;
  stroke: var(--brand-deep);
  fill: none;
  stroke-width: 2;
  transition: transform 0.3s;
}
.itinerary .itin-day.open .itin-chevron {
  transform: rotate(180deg);
}
.itinerary .itin-body {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.4s ease;
  background: var(--surface);
  border: 1.5px solid var(--brand-border);
  border-top: none;
  margin-top: -1px;
}
.itinerary .itin-body-inner {
  padding: 24px;
}
.itinerary .itin-narrative,
.itinerary .itin-body p {
  font-size: 15px;
  color: var(--text-primary);
  line-height: 1.7;
  margin-bottom: 16px;
}
.itinerary .itin-highlights {
  list-style: none;
  margin: 0 0 16px;
  padding: 0;
}
.itinerary .itin-highlights li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 14px;
  color: var(--text-primary);
  line-height: 1.5;
  margin-bottom: 8px;
}
.itinerary .itin-highlights li::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--brand-sky);
  flex-shrink: 0;
  margin-top: 7px;
}
.itinerary .itin-highlights li a {
  color: var(--brand-deep);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.itinerary .itin-highlights li a:hover {
  color: var(--brand-sky-text);
}
.itinerary .itin-tidbit {
  background: var(--surface-tint);
  border: 1px solid var(--brand-border);
  border-radius: 10px;
  padding: 14px 16px;
  margin-bottom: 16px;
}
.itinerary .itin-tidbit .itin-tidbit-label {
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--brand-sky-text);
  margin-bottom: 8px;
}
.itinerary .itin-tidbit .itin-tidbit-option {
  font-size: 13px;
  font-weight: 700;
  color: var(--brand-deep);
  margin: 14px 0 6px;
}
.itinerary .itin-tidbit .itin-tidbit-label + .itin-tidbit-option {
  margin-top: 0;
}
.itinerary .itin-tidbit .itin-tidbit-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.itinerary .itin-tidbit .itin-tidbit-list li {
  position: relative;
  padding-left: 16px;
  font-size: 13px;
  color: var(--text-muted);
  line-height: 1.5;
  margin-bottom: 6px;
}
.itinerary .itin-tidbit .itin-tidbit-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 8px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--brand-sky);
}
.itinerary .itin-tidbit .itin-tidbit-list li:last-child {
  margin-bottom: 0;
}
.itinerary .itin-image {
  width: 100%;
  aspect-ratio: 2/1;
  min-height: 160px;
  border-radius: 8px;
  background-size: cover;
  background-position: center;
  margin-top: 12px;
}
.itinerary .yc-options {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-top: 16px;
}
.itinerary .yc-option {
  background: var(--surface-tint);
  border: 1px solid var(--brand-border);
  border-radius: 12px;
  overflow: hidden;
}
.itinerary .yc-option-img {
  aspect-ratio: 16/9;
  background-size: cover;
  background-position: center;
}
.itinerary .yc-option-body {
  padding: 14px 16px;
}
.itinerary .yc-option-label {
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  color: var(--brand-sky-text);
  margin-bottom: 6px;
}
.itinerary .yc-option h4 {
  font-size: 15px;
  font-weight: 600;
  color: var(--brand-deep);
  margin: 0;
}

/* Mobile-only detail-sheet chrome — hidden on desktop (the panel is the sidebar). */
.itinerary .itin-explore-mobile,
.itinerary .itin-sheet-head,
.itinerary .itin-sheet-backdrop {
  display: none;
}

@media (max-width: 992px) {
  .itinerary .itin-split {
    grid-template-columns: 1fr;
  }
  /* The detail panel becomes a bottom-sheet, opened from a day's Explore row. */
  .itinerary .itin-detail-panel {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    top: auto;
    z-index: 1000;
    max-height: 86vh;
    overflow-y: auto;
    background: var(--surface);
    border-radius: 20px 20px 0 0;
    box-shadow: 0 -8px 40px color-mix(in srgb, var(--brand-deep) 20%, transparent);
    transform: translateY(100%);
    visibility: hidden;
    transition: transform 0.35s cubic-bezier(0.32, 0.72, 0, 1), visibility 0.35s;
  }
  .itinerary .itin-detail-panel.sheet-open {
    transform: translateY(0);
    visibility: visible;
  }
  .itinerary .itin-detail-empty {
    display: none;
  }
  .itinerary .itin-detail-card {
    border: none;
    box-shadow: none;
    border-radius: 0;
  }
  .itinerary .itin-sheet-head {
    display: flex;
    position: sticky;
    top: 0;
    z-index: 3;
    align-items: flex-start;
    justify-content: center;
    padding: 12px 0 0;
    margin-bottom: -52px;
    background: none;
    pointer-events: none;
    touch-action: none;
  }
  .itinerary .itin-sheet-handle {
    width: 42px;
    height: 4px;
    border-radius: 2px;
    background: rgba(255, 255, 255, 0.85);
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.25);
    pointer-events: auto;
  }
  .itinerary .itin-sheet-close {
    position: absolute;
    right: 12px;
    top: 10px;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.55);
    border: none;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
    cursor: pointer;
    pointer-events: auto;
  }
  .itinerary .itin-sheet-close::before, .itinerary .itin-sheet-close::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    width: 16px;
    height: 2.4px;
    border-radius: 2px;
    background: #fff;
  }
  .itinerary .itin-sheet-close::before {
    transform: translate(-50%, -50%) rotate(45deg);
  }
  .itinerary .itin-sheet-close::after {
    transform: translate(-50%, -50%) rotate(-45deg);
  }
  .itinerary .idp-hero {
    height: 280px;
  }
  .itinerary .itin-explore-mobile {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    margin-top: 14px;
    padding: 12px 14px;
    border-radius: 12px;
    border: 1px solid var(--brand-border);
    background: var(--surface-tint);
    cursor: pointer;
    text-align: left;
  }
  .itinerary .itin-explore-mobile .iem-thumb {
    width: 46px;
    height: 46px;
    border-radius: 10px;
    background-size: cover;
    background-position: center;
    flex-shrink: 0;
  }
  .itinerary .itin-explore-mobile .iem-text {
    flex: 1;
    min-width: 0;
  }
  .itinerary .itin-explore-mobile .iem-name {
    display: block;
    font-size: 14px;
    font-weight: 700;
    color: var(--brand-deep);
  }
  .itinerary .itin-explore-mobile .iem-sub {
    display: block;
    font-size: 12px;
    color: var(--text-muted);
    margin-top: 2px;
  }
  .itinerary .itin-explore-mobile svg {
    width: 18px;
    height: 18px;
    stroke: var(--brand-sky);
    fill: none;
    stroke-width: 2;
    flex-shrink: 0;
  }
  .itinerary .itin-sheet-backdrop {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 999;
    background: color-mix(in srgb, var(--brand-deep) 50%, transparent);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s;
  }
  .itinerary .itin-sheet-backdrop.open {
    opacity: 1;
    pointer-events: auto;
  }
}
@media (max-width: 768px) {
  .itinerary .itin-day {
    position: relative;
    padding-left: 0;
    border-left: none;
    margin-bottom: 6px;
  }
  .itinerary .day-circle {
    position: absolute;
    left: 14px;
    top: 16px;
    transform: none;
    z-index: 2;
  }
  .itinerary .itin-day.open .day-circle {
    top: 16px;
  }
  .itinerary .itin-header {
    border-radius: 12px;
    border-width: 1px;
    min-height: auto;
  }
  .itinerary .itin-day:first-child .itin-header {
    border-radius: 12px;
  }
  .itinerary .itin-header-img {
    display: none;
  }
  .itinerary .itin-header-left {
    display: block;
    padding: 14px 14px 14px 52px;
  }
  .itinerary .itin-title {
    font-size: 15px;
    margin-bottom: 4px;
  }
  .itinerary .itin-meta {
    gap: 4px 10px;
    font-size: 11px;
    margin-top: 5px;
  }
  .itinerary .itin-chevron-wrap {
    width: 28px;
    height: 28px;
    margin-right: 10px;
    align-self: center;
  }
  .itinerary .itin-body {
    border-radius: 0 0 12px 12px;
  }
  .itinerary .itin-body-inner {
    padding: 16px;
  }
  .itinerary .yc-options {
    grid-template-columns: 1fr;
  }
  .itinerary .itin-chapter {
    margin-top: 24px;
  }
  .itinerary .itin-chapter-head {
    min-height: 72px;
    border-radius: 12px;
  }
  .itinerary .itin-chapter-title {
    font-size: 17px;
  }
  .itinerary .day-strip {
    display: none;
  }
}
/* Tour Single · Customise Your Day — dark band, one card per customisable day. */
.your-choice-section {
  background: var(--brand-deep);
  position: relative;
  overflow: hidden;
}
.your-choice-section::before {
  content: "";
  position: absolute;
  top: -80px;
  right: -80px;
  width: 300px;
  height: 300px;
  border-radius: 50%;
  background: radial-gradient(circle, color-mix(in srgb, var(--brand-sky) 10%, transparent) 0%, transparent 70%);
  pointer-events: none;
}
.your-choice-section .container {
  position: relative;
  z-index: 1;
}
.your-choice-section .s-head :is(h2, h3, h4) {
  color: #fff;
}
.your-choice-section .s-head p {
  color: rgba(255, 255, 255, 0.6);
}
.your-choice-section .yc-grid {
  display: flex;
  flex-direction: column;
  gap: 40px;
  margin-top: 48px;
}
.your-choice-section .yc-card {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid color-mix(in srgb, var(--brand-sky) 15%, transparent);
  border-radius: 18px;
  padding: 32px;
  overflow: hidden;
}
.your-choice-section .yc-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 24px;
}
.your-choice-section .yc-card h3 {
  font-size: 24px;
  font-weight: 700;
  color: #fff;
  min-width: 0;
}
.your-choice-section .yc-card .day-ref {
  white-space: nowrap;
  flex-shrink: 0;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  color: var(--brand-sky);
  padding: 5px 14px;
  border-radius: 50px;
  background: color-mix(in srgb, var(--brand-sky) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--brand-sky) 20%, transparent);
}
.your-choice-section .yc-card-options {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}
.your-choice-section .yc-card-option {
  display: block;
  color: inherit;
  text-decoration: none;
  border-radius: 14px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.08);
  transition: background 0.25s, border-color 0.25s;
  position: relative;
}
.your-choice-section .yc-card-option:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: color-mix(in srgb, var(--brand-sky) 30%, transparent);
}
.your-choice-section .yc-card-option:focus-visible {
  outline: 2px solid var(--brand-sky);
  outline-offset: 3px;
}
.your-choice-section .yc-option-more {
  display: flex;
  width: fit-content;
  align-items: center;
  gap: 6px;
  margin-top: 10px;
  font-size: 13px;
  font-weight: 600;
  color: var(--brand-sky);
}
.your-choice-section .yc-option-more svg {
  width: 14px;
  height: 14px;
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform 0.2s;
}
@media (prefers-reduced-motion: no-preference) {
  .your-choice-section .yc-card-option:hover .yc-option-more svg {
    transform: translateX(3px);
  }
}
.your-choice-section .yc-option-hero {
  height: 200px;
  background-size: cover;
  background-position: center;
  position: relative;
}
.your-choice-section .yc-option-hero::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 50px;
  background: linear-gradient(to bottom, transparent, color-mix(in srgb, var(--brand-deep) 60%, transparent));
}
.your-choice-section .yc-option-body {
  padding: 18px 20px;
}
.your-choice-section .yc-option-label {
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  color: var(--brand-sky);
  margin-bottom: 8px;
}
.your-choice-section .yc-card-option h4 {
  font-size: 16px;
  font-weight: 700;
  color: #fff;
  margin-bottom: 8px;
}
.your-choice-section .yc-card-option h4:last-child {
  margin-bottom: 0;
}
.your-choice-section .yc-option-blurb {
  margin: 0;
  font-size: 14px;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.72);
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  overflow: hidden;
}
.your-choice-section .yc-card-option .duration {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  color: var(--brand-sky);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  margin-top: 10px;
}
.your-choice-section .yc-card-option .duration svg {
  width: 12px;
  height: 12px;
  stroke: var(--brand-sky);
  fill: none;
  stroke-width: 1.5;
}
.your-choice-section .yc-card-note {
  margin-top: 18px;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.55);
  line-height: 1.6;
}
.your-choice-section .yc-bottom-note {
  text-align: center;
  margin-top: 40px;
  font-size: 16px;
  color: color-mix(in srgb, var(--brand-glass) 60%, transparent);
  font-style: italic;
}

@media (max-width: 768px) {
  .your-choice-section .yc-grid {
    gap: 20px;
  }
  .your-choice-section .yc-card {
    padding: 22px;
  }
  .your-choice-section .yc-card-options {
    grid-template-columns: 1fr;
  }
}
/* Tour Single · Accommodation gallery — horizontal carousel of stay cards. */
.accommodation {
  background: var(--surface-tint);
}
.accommodation .accom-wrap {
  position: relative;
  margin-top: 40px;
}
.accommodation .accom-carousel {
  display: flex;
  gap: 20px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  padding: 4px 0 20px;
  -webkit-overflow-scrolling: touch;
  scroll-behavior: smooth;
}
.accommodation .accom-carousel::-webkit-scrollbar {
  display: none;
}
.accommodation .accom-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--surface);
  border: 1.5px solid var(--brand-border);
  box-shadow: 0 2px 12px color-mix(in srgb, var(--brand-deep) 10%, transparent);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 5;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.accommodation .accom-arrow:hover {
  border-color: var(--brand-sky);
  box-shadow: 0 4px 16px color-mix(in srgb, var(--brand-deep) 15%, transparent);
}
.accommodation .accom-arrow svg {
  width: 18px;
  height: 18px;
  stroke: var(--brand-deep);
  fill: none;
  stroke-width: 2;
}
.accommodation .accom-arrow.left {
  left: -20px;
}
.accommodation .accom-arrow.right {
  right: -20px;
}
.accommodation .accom-card {
  flex: 0 0 300px;
  scroll-snap-align: start;
  background: var(--surface);
  border: 1px solid var(--brand-border);
  border-radius: 14px;
  overflow: hidden;
  transition: transform 0.3s, box-shadow 0.3s;
}
.accommodation .accom-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 36px color-mix(in srgb, var(--brand-deep) 14%, transparent);
}
.accommodation .accom-card-img {
  height: 180px;
  background-size: cover;
  background-position: center;
}
.accommodation .accom-card-body {
  padding: 18px 20px;
}
.accommodation .accom-stars {
  display: flex;
  gap: 2px;
  margin-bottom: 8px;
}
.accommodation .accom-stars svg {
  width: 14px;
  height: 14px;
  fill: var(--rating-star);
  stroke: none;
}
.accommodation .accom-card-body h4 {
  font-size: 17px;
  font-weight: 700;
  color: var(--brand-deep);
  margin-bottom: 4px;
}
.accommodation .accom-location {
  font-size: 13px;
  color: var(--brand-sky-text);
  font-weight: 600;
  margin-bottom: 6px;
}
.accommodation .accom-nights {
  font-size: 12px;
  color: var(--text-muted);
  margin-bottom: 10px;
}
.accommodation .accom-features {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.accommodation .accom-feat {
  font-size: 11px;
  font-weight: 600;
  padding: 3px 10px;
  border-radius: 50px;
  background: var(--surface-tint);
  color: var(--brand-deep);
}
.accommodation .accom-note {
  text-align: center;
  margin-top: 28px;
  font-size: 13px;
  color: var(--text-muted);
  font-style: italic;
}

@media (max-width: 768px) {
  .accommodation .accom-arrow {
    display: none;
  }
}
@media (max-width: 576px) {
  .accommodation .accom-card {
    flex: 0 0 260px;
  }
}
/* Tour Single · Dates & Pricing — price hero, month filter, departures (table +
   mobile cards), inclusions/exclusions. Status colours from the semantic tokens. */
.pricing {
  /* Month filter */
  /* Desktop table */
  /* Mobile cards — hidden on desktop, shown on mobile */
  /* Inclusions / exclusions — each list spans full width and flows into
     balanced columns. "Not included" is one more group row (.inc-excluded)
     in its own column, 40px below the included groups. */
  /* Inclusion groups — one ruled row per group: a tinted tile (icon, name,
     count) on the left, the items on the right. Each row is a <details> so
     phones can fold it; on desktop it never folds (js/custom.js). The accent
     comes from --inc-<group> in _tokens.scss. */
}
.pricing .price-hero {
  text-align: center;
  margin-bottom: 48px;
}
.pricing .price-amount {
  font-size: 48px;
  font-weight: 800;
  color: var(--brand-deep);
  line-height: 1.1;
}
.pricing .price-per {
  font-size: 18px;
  color: var(--text-muted);
  font-weight: 400;
}
.pricing .price-note {
  font-size: 14px;
  color: var(--text-muted);
  margin-top: 8px;
}
.pricing .price-single {
  font-size: 15px;
  color: var(--text-primary);
  margin-top: 8px;
}
.pricing .dep-filters {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 24px;
}
.pricing .dep-filters-label {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-muted);
  margin-right: 4px;
}
.pricing .dep-filter-pill {
  padding: 7px 18px;
  border-radius: 50px;
  border: 1.5px solid var(--brand-border);
  background: var(--surface);
  font-size: 13px;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: none;
  cursor: pointer;
  transition: border-color 0.2s, color 0.2s, background 0.2s;
  white-space: nowrap;
}
.pricing .dep-filter-pill:hover {
  border-color: var(--brand-sky);
  color: var(--brand-deep);
}
.pricing .dep-filter-pill:focus-visible {
  outline: 2px solid var(--brand-sky);
  outline-offset: 2px;
}
.pricing .dep-filter-pill.active {
  background: var(--brand-deep);
  color: #fff;
  border-color: var(--brand-deep);
}
.pricing .dep-filter-pill.active:not([data-month=all])::before {
  content: "";
  display: inline-block;
  width: 5px;
  height: 9px;
  margin: 0 8px 2px 0;
  border: solid currentColor;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
  vertical-align: middle;
}
@media (max-width: 768px) {
  .pricing .dep-filter-pill {
    min-height: 40px;
  }
}
.pricing .dep-filters-hint {
  font-weight: 400;
}
.pricing .departure-table-wrap {
  overflow-x: auto;
}
.pricing .departure-table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 48px;
}
.pricing .departure-table thead th {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  color: var(--brand-sky-text);
  padding: 14px 16px;
  border-bottom: 2px solid var(--brand-border);
  text-align: left;
}
.pricing .departure-table tbody td {
  padding: 14px 16px;
  font-size: 15px;
  color: var(--text-primary);
  border-bottom: 1px solid var(--brand-border);
  vertical-align: middle;
}
.pricing .departure-table tbody tr:hover {
  background: var(--surface-tint);
}
.pricing .status-badge {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  padding: 4px 12px;
  border-radius: 50px;
  display: inline-block;
  white-space: nowrap;
}
.pricing .status-available {
  background: var(--status-available-bg);
  color: var(--status-available-fg);
}
.pricing .status-filling {
  background: var(--status-filling-bg);
  color: var(--status-filling-fg);
}
.pricing .status-onrequest {
  background: var(--status-onrequest-bg);
  color: var(--status-onrequest-fg);
}
.pricing .status-soldout {
  background: var(--status-soldout-bg);
  color: var(--status-soldout-fg);
}
.pricing .book-row-btn,
.pricing .dep-card-cta {
  display: inline-block;
  padding: 9px 20px;
  border-radius: 50px;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  text-decoration: none;
  background: var(--gradient-button);
  background-origin: border-box;
  color: var(--gradient-button-fg);
  border: 1px solid rgba(255, 255, 255, 0.15);
  cursor: pointer;
  transition: transform 0.16s ease, box-shadow 0.3s ease;
  box-shadow: var(--shadow-cta);
}
.pricing .book-row-btn:hover,
.pricing .dep-card-cta:hover {
  transform: translateY(-1px);
  box-shadow: var(--shadow-cta-hover);
}
.pricing .book-row-btn:active,
.pricing .dep-card-cta:active {
  transform: scale(0.97);
}
.pricing .dep-no-results {
  text-align: center;
  padding: 32px 20px;
  font-size: 15px;
  color: var(--text-muted);
  display: none;
}
.pricing .dep-no-results.visible {
  display: block;
}
.pricing .departure-cards {
  display: none;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 48px;
}
.pricing .dep-card {
  border: 1.5px solid var(--brand-border);
  border-radius: 14px;
  background: var(--surface);
  padding: 18px 20px;
  transition: box-shadow 0.2s;
}
.pricing .dep-card:hover {
  box-shadow: 0 4px 16px color-mix(in srgb, var(--brand-deep) 8%, transparent);
}
.pricing .dep-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}
.pricing .dep-card-dates {
  font-size: 15px;
  font-weight: 700;
  color: var(--brand-deep);
}
.pricing .dep-card-dates span {
  display: block;
  font-size: 13px;
  font-weight: 400;
  color: var(--text-muted);
}
.pricing .dep-card-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}
.pricing .dep-card-price {
  font-size: 17px;
  font-weight: 800;
  color: var(--brand-deep);
}
.pricing .dep-card-price span {
  display: block;
  font-size: 12px;
  font-weight: 500;
  color: var(--text-muted);
}
.pricing .inclusions-grid {
  margin-top: 48px;
  padding-top: 48px;
  border-top: 1px solid var(--brand-border);
}
.pricing .inclusion-col + .inclusion-col {
  margin-top: 40px;
}
.pricing .inclusion-col h3 {
  font-size: 20px;
  font-weight: 600;
  color: var(--brand-deep);
  margin-bottom: 20px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.pricing .inclusion-col h3 svg {
  width: 20px;
  height: 20px;
  stroke-width: 2;
  fill: none;
}
.pricing .inclusion-col ul {
  list-style: none;
  margin: 0;
  padding: 0;
  columns: 2;
  column-gap: 48px;
}
.pricing .inclusion-col ul li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 15px;
  color: var(--text-primary);
  line-height: 1.6;
  margin-bottom: 12px;
  break-inside: avoid;
  -webkit-column-break-inside: avoid;
}
.pricing .inclusion-col ul li::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  flex-shrink: 0;
  margin-top: 9px;
}
.pricing .inclusion-col.included h3 svg {
  stroke: var(--brand-sky);
}
.pricing .inclusion-col.included ul li::before {
  background: var(--brand-sky);
}
.pricing .inc-group {
  --inc: var(--brand-deep);
  display: flow-root;
  padding: 20px 0;
  border-top: 1px solid var(--brand-border);
}
.pricing .inc-group:last-of-type {
  border-bottom: 1px solid var(--brand-border);
}
.pricing .inc-group summary {
  float: left;
  width: 248px;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  border-radius: 12px;
  background: color-mix(in srgb, var(--inc) 9%, var(--surface));
  list-style: none;
  cursor: default;
}
.pricing .inc-group summary::-webkit-details-marker {
  display: none;
}
.pricing .inc-group summary:focus-visible {
  outline: 2px solid var(--inc);
  outline-offset: 2px;
}
.pricing .inc-group .inc-items {
  margin-left: 288px;
  padding-top: 4px;
}
.pricing .inc-group .inc-items:not(.is-long) {
  columns: 1;
}
.pricing .inc-group.inc-group ul li::before {
  background: var(--inc);
}
.pricing .inc-icon {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border-radius: 10px;
  display: grid;
  place-items: center;
  background: var(--surface);
  box-shadow: 0 1px 2px color-mix(in srgb, var(--inc) 18%, transparent);
}
.pricing .inc-icon svg {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: var(--inc);
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.pricing .inc-label {
  font-size: 16px;
  font-weight: 700;
  color: var(--brand-deep);
  line-height: 1.25;
}
.pricing .inc-count {
  display: block;
  margin-top: 2px;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}
.pricing .inc-chevron {
  display: none;
}
.pricing .inclusion-col .inc-other {
  margin-top: 32px;
}
.pricing .inc-accommodation {
  --inc: var(--inc-accommodation);
}
.pricing .inc-meals {
  --inc: var(--inc-meals);
}
.pricing .inc-travel {
  --inc: var(--inc-travel);
}
.pricing .inc-experiences {
  --inc: var(--inc-experiences);
}
.pricing .inc-choice {
  --inc: var(--inc-choice);
}
.pricing .inc-excluded {
  --inc: var(--inc-excluded);
}

@media (max-width: 1200px) {
  .pricing .price-amount {
    font-size: 40px;
  }
  .pricing .inclusions-grid {
    gap: 32px;
  }
}
@media (max-width: 992px) {
  .pricing .inc-group summary {
    width: 220px;
  }
  .pricing .inc-group .inc-items {
    margin-left: 248px;
    columns: 1;
  }
}
@media (max-width: 768px) {
  .pricing .departure-table-wrap {
    display: none;
  }
  .pricing .departure-cards {
    display: flex;
  }
  .pricing .inclusion-col ul {
    columns: 1;
  }
  /* Phones: each group is a tappable band; js/custom.js leaves only the
     first one open, so the long list starts as five short lines. */
  .pricing .inc-group {
    padding: 0;
    border: 0;
  }
  .pricing .inc-group + .inc-group {
    margin-top: 10px;
  }
  .pricing .inc-group:last-of-type {
    border-bottom: 0;
  }
  .pricing .inc-group summary {
    float: none;
    width: auto;
    cursor: pointer;
    min-height: 64px;
    transition: background 0.2s ease;
  }
  .pricing .inc-group summary:hover {
    background: color-mix(in srgb, var(--inc) 13%, var(--surface));
  }
  .pricing .inc-group .inc-label {
    flex: 1;
  }
  .pricing .inc-group .inc-chevron {
    display: block;
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    fill: none;
    stroke: var(--text-muted);
    stroke-width: 2;
    transition: transform 0.25s cubic-bezier(0.22, 1, 0.36, 1);
  }
  .pricing .inc-group[open] .inc-chevron {
    transform: rotate(180deg);
  }
  .pricing .inc-group .inc-items {
    margin: 0;
    padding: 16px 8px 4px 16px;
  }
  .pricing .inclusion-col .inc-other {
    margin-top: 24px;
  }
}
@media (max-width: 576px) {
  .pricing .price-amount {
    font-size: 32px;
  }
}
/* Departed tour with no scheduled departures (D-23) — register-interest prompt. */
.dep-departed-note {
  margin: 24px 0 8px;
  padding: 18px 22px;
  background: var(--surface-tint);
  border: 1px solid var(--brand-border);
  border-radius: 12px;
}

.dep-departed-note p {
  margin: 0;
  color: var(--text-primary);
}

.dep-departed-note a {
  color: var(--brand-deep);
  font-weight: 600;
}

/* Tour Single · Related tours — a three-up grid of the shared tour cards. */
.related-tours {
  background: var(--surface-tint);
  /* The shared .pd-card is styled in components/_tour-card.scss — here it just
     fills its grid cell rather than flexing to a fixed width. */
}
.related-tours .related-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-top: 40px;
}
.related-tours .related-grid .pd-card {
  width: 100%;
  flex: unset;
}
.related-tours .related-note {
  text-align: center;
  margin-top: 32px;
  font-size: 15px;
  color: var(--text-muted);
  font-style: italic;
}
.related-tours .related-actions {
  display: flex;
  justify-content: center;
  margin-top: 24px;
}

@media (max-width: 1200px) {
  .related-tours .related-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 768px) {
  .related-tours {
    overflow: hidden;
  }
  .related-tours .related-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  .related-tours .related-grid .pd-card {
    width: 100%;
    max-width: 100%;
    min-width: 0;
  }
}
/*
    Search — the ?s= results page (search.php).

    Ported from the PD-Search wireframe. Every colour goes through a --brand-*
    / --text-* / --surface token so the page repaints per brand, and every alpha
    value goes through color-mix() rather than rgba() so the token-purity gate
    stays clean.

    Contents
        1. Hero (dark band + pill input)
        2. Filter pills
        3. Result sections
        4. Cards — tour / destination / blog+page / faq / review
        5. Highlight
        6. No results
        7. Popular searches + featured tours
        8. Responsive (992 / 768)
*/
/* ==========================================================================
   1. HERO
   ========================================================================== */
.search-hero {
  background: var(--brand-deep);
  padding: 48px 0 40px;
  text-align: center;
}
.search-hero h1 {
  font-family: var(--font-body);
  font-size: 28px;
  font-weight: 700;
  color: var(--text-on-dark);
  margin-bottom: 20px;
  letter-spacing: -0.3px;
}

.search-hero-input-wrap {
  max-width: 640px;
  margin: 0 auto 16px;
  position: relative;
}
.search-hero-input-wrap > svg {
  position: absolute;
  left: 20px;
  top: 50%;
  transform: translateY(-50%);
  width: 20px;
  height: 20px;
  stroke: var(--text-muted);
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  pointer-events: none;
}

.search-hero-input {
  width: 100%;
  padding: 16px 52px;
  border: 2px solid color-mix(in srgb, var(--text-on-dark) 25%, transparent);
  border-radius: 50px;
  font-family: var(--font-body);
  font-size: 18px;
  color: var(--text-primary);
  background: var(--surface);
  outline: none;
  transition: border-color 0.2s, box-shadow 0.2s;
  /* Kill the UA's own clear affordance — we ship our own button. */
}
.search-hero-input:focus {
  border-color: var(--brand-sky);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand-sky) 25%, transparent);
}
.search-hero-input::placeholder {
  color: color-mix(in srgb, var(--text-muted) 78%, var(--surface));
}
.search-hero-input::-webkit-search-cancel-button {
  display: none;
}

.search-hero-clear {
  position: absolute;
  right: 16px;
  top: 50%;
  transform: translateY(-50%);
  width: 28px;
  height: 28px;
  border: none;
  /* The theme's global button rule adds 8px 16px padding, which on a 28px
     border-box button leaves a zero-width content box and collapses the
     cross to nothing. */
  padding: 0;
  background: color-mix(in srgb, var(--brand-deep) 8%, transparent);
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s, background 0.2s;
}
.search-hero-clear.visible {
  opacity: 1;
  pointer-events: auto;
}
.search-hero-clear:hover {
  background: color-mix(in srgb, var(--brand-deep) 15%, transparent);
}
.search-hero-clear svg {
  width: 14px;
  height: 14px;
  stroke: var(--text-muted);
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
}

.search-result-count {
  color: var(--text-on-dark-muted);
  font-size: 15px;
  margin-top: 4px;
}
.search-result-count strong {
  color: var(--text-on-dark);
  font-weight: 600;
}

.search-correction {
  color: var(--text-on-dark-muted);
  font-size: 15px;
  margin-top: 4px;
}
.search-correction strong {
  color: var(--brand-aqua);
  font-weight: 600;
}

/* ==========================================================================
   2. FILTER PILLS
   ========================================================================== */
.search-filters {
  background: var(--surface);
  border-bottom: 1px solid var(--brand-border);
  padding: 16px 0;
  /* top: 0, not the header height — the site header is sticky only within
     its own short wrapper, so it scrolls away rather than staying pinned.
     Offsetting by --header-h would leave results scrolling through a gap. */
  position: sticky;
  top: 0;
  z-index: 20;
}
.search-filters .container {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.search-filters .container::-webkit-scrollbar {
  display: none;
}

.filter-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 18px;
  border-radius: 50px;
  border: 1.5px solid var(--brand-border);
  background: var(--surface);
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary);
  cursor: pointer;
  white-space: nowrap;
  /* Undo the theme's global uppercase button treatment — these are labels. */
  text-transform: none;
  transition: all 0.2s ease-in-out;
  /* A type with no hits this query is not a useful thing to press. */
}
.filter-pill:hover {
  border-color: var(--brand-sky);
  color: var(--brand-deep);
}
.filter-pill.active {
  background: var(--brand-deep);
  border-color: var(--brand-deep);
  color: var(--text-on-dark);
}
.filter-pill.is-empty {
  opacity: 0.45;
  pointer-events: none;
}

.pill-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  border-radius: 10px;
  font-size: 12px;
  font-weight: 700;
  padding: 0 6px;
  background: color-mix(in srgb, var(--brand-deep) 8%, transparent);
  color: var(--brand-deep);
}
.filter-pill.active .pill-count {
  background: color-mix(in srgb, var(--text-on-dark) 20%, transparent);
  color: var(--text-on-dark);
}

/* ==========================================================================
   3. RESULT SECTIONS
   ========================================================================== */
#searchResults {
  transition: opacity 0.15s ease-in-out;
}
#searchResults[aria-busy=true] {
  opacity: 0.5;
}

.results-section {
  padding: 48px 0;
  /* Clear the sticky filter bar, so an anchor or programmatic scroll doesn't
     land the heading underneath it. */
  scroll-margin-top: 88px;
  /* The alternating wash is stamped by PHP/JS, not :nth-child — hiding a
     section with a filter pill would silently break nth-child banding. */
}
.results-section.results-section--alt {
  background: var(--surface-tint);
}
.results-section[hidden] {
  display: none;
}

.results-section-heading {
  font-family: var(--font-body);
  font-size: 22px;
  font-weight: 700;
  color: var(--brand-deep);
  margin-bottom: 24px;
  display: flex;
  align-items: center;
  gap: 10px;
}

.rsh-count {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-muted);
  background: color-mix(in srgb, var(--brand-deep) 6%, transparent);
  padding: 2px 10px;
  border-radius: 12px;
}

/* ==========================================================================
   4. CARDS
   ========================================================================== */
/* --- Tour (horizontal) --- */
.tour-result-card {
  display: flex;
  gap: 24px;
  background: var(--surface);
  border: 1px solid var(--brand-border);
  border-radius: 12px;
  overflow: hidden;
  margin-bottom: 16px;
  transition: box-shadow 0.2s, transform 0.15s;
}
.tour-result-card:hover {
  box-shadow: 0 4px 20px color-mix(in srgb, var(--brand-deep) 10%, transparent);
  transform: translateY(-1px);
}

.trc-image {
  width: 220px;
  min-height: 180px;
  flex-shrink: 0;
  background-size: cover;
  background-position: center;
  background-color: var(--brand-border);
}

.trc-body {
  padding: 20px 24px 20px 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  flex: 1;
}

.trc-title {
  font-size: 19px;
  font-weight: 700;
  color: var(--brand-deep);
  margin-bottom: 6px;
}
.trc-title a {
  color: inherit;
  text-decoration: none;
}
.trc-title a:hover {
  text-decoration: underline;
}

.trc-desc {
  /* The theme sets a global top margin on <p>; these cards space themselves. */
  margin-top: 0;
  font-size: 15px;
  color: var(--text-muted);
  line-height: 1.6;
  margin-bottom: 10px;
}

.trc-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px;
  font-size: 13px;
  color: var(--text-muted);
  margin-bottom: 12px;
}
.trc-meta span {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.trc-meta svg {
  width: 14px;
  height: 14px;
  stroke: var(--brand-sky);
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.trc-cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  font-weight: 700;
  color: var(--brand-deep);
  text-decoration: none;
  transition: color 0.2s;
}
.trc-cta:hover {
  color: var(--brand-sky-text);
}
.trc-cta svg {
  width: 16px;
  height: 16px;
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* --- Destination (image tile) --- */
.dest-results-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
}

.dest-result-card {
  position: relative;
  border-radius: 12px;
  overflow: hidden;
  height: 220px;
  background-size: cover;
  background-position: center;
  background-color: var(--brand-border);
  transition: transform 0.2s;
}
.dest-result-card:hover {
  transform: translateY(-2px);
}
.dest-result-card::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 40%, color-mix(in srgb, var(--brand-deep) 70%, transparent) 100%);
}
.dest-result-card a {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 24px;
  text-decoration: none;
  color: var(--text-on-dark);
}

.drc-region {
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1px;
  opacity: 0.85;
  margin-bottom: 4px;
}

.drc-title {
  font-size: 22px;
  font-weight: 700;
}

.drc-sub {
  font-size: 14px;
  opacity: 0.85;
  margin-top: 4px;
}

/* --- Blog + Page --- */
.blog-result-card {
  background: var(--surface);
  border: 1px solid var(--brand-border);
  border-radius: 12px;
  padding: 20px 24px;
  margin-bottom: 12px;
  transition: box-shadow 0.2s;
}
.blog-result-card:hover {
  box-shadow: 0 4px 16px color-mix(in srgb, var(--brand-deep) 8%, transparent);
}

.brc-category {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  color: var(--brand-sky-text);
  margin-bottom: 6px;
}

.brc-title {
  font-size: 18px;
  font-weight: 700;
  color: var(--brand-deep);
  margin-bottom: 6px;
}
.brc-title a {
  color: inherit;
  text-decoration: none;
}
.brc-title a:hover {
  text-decoration: underline;
}

.brc-excerpt {
  margin-top: 0;
  font-size: 15px;
  color: var(--text-muted);
  line-height: 1.6;
  margin-bottom: 8px;
}

.brc-date {
  font-size: 13px;
  /* Deliberately lighter than .brc-excerpt so the date recedes. */
  color: var(--text-subtle);
}

/* --- FAQ (accordion) --- */
.faq-result-card {
  background: var(--surface);
  border: 1px solid var(--brand-border);
  border-radius: 12px;
  margin-bottom: 12px;
  overflow: hidden;
}

.faq-result-q {
  width: 100%;
  /* Rendered as a <button> for keyboard + screen-reader semantics, which
     pulls in the theme's global uppercase/bold button treatment. Undo it —
     these are sentence-case questions, not calls to action. */
  text-transform: none;
  padding: 18px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
  gap: 16px;
  text-align: left;
  background: none;
  border: none;
  font-family: var(--font-body);
  transition: background 0.2s;
}
.faq-result-q:hover {
  background: var(--surface-tint);
}
.faq-result-q span {
  font-size: 16px;
  font-weight: 600;
  color: var(--brand-deep);
  flex: 1;
}
.faq-result-q svg {
  width: 18px;
  height: 18px;
  stroke: var(--text-muted);
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex-shrink: 0;
  transition: transform 0.25s;
}
.faq-result-q[aria-expanded=true] svg {
  transform: rotate(180deg);
}

.faq-result-a {
  padding: 0 24px;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease, padding 0.3s ease;
}
.faq-result-a p {
  margin-top: 0;
  font-size: 15px;
  color: var(--text-muted);
  line-height: 1.7;
}
.faq-result-card.open .faq-result-a {
  padding: 0 24px 20px;
  max-height: 400px;
}

/* --- Review (testimonial) --- */
.review-result-card {
  background: var(--surface);
  border: 1px solid var(--brand-border);
  border-left: 3px solid var(--brand-sky);
  border-radius: 12px;
  padding: 24px;
  margin: 0 0 8px;
}

.rrc-quote {
  margin-top: 0;
  font-size: 16px;
  color: var(--text-primary);
  line-height: 1.7;
  margin-bottom: 8px;
}

.rrc-author {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-muted);
  font-style: normal;
}

/* ==========================================================================
   5. HIGHLIGHT
   ========================================================================== */
.search-highlight {
  background: color-mix(in srgb, var(--brand-sky) 15%, transparent);
  color: var(--brand-deep);
  padding: 1px 3px;
  border-radius: 3px;
  font-weight: 600;
  /* On the destination tiles the text sits white-on-photo. The default
     dark-teal-on-pale-blue treatment is unreadable there, so invert it. */
}
.dest-result-card .search-highlight {
  background: color-mix(in srgb, var(--brand-sky) 45%, transparent);
  color: var(--text-on-dark);
}

/* ==========================================================================
   6. NO RESULTS
   ========================================================================== */
.no-results {
  text-align: center;
  padding: 64px 0;
}
.no-results svg {
  width: 56px;
  height: 56px;
  /* Global `svg { display: block }` defeats the parent's text-align. */
  margin-inline: auto;
  stroke: var(--brand-border);
  fill: none;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  margin-bottom: 20px;
}
.no-results h2 {
  font-size: 24px;
  font-weight: 700;
  color: var(--brand-deep);
  margin-bottom: 8px;
}
.no-results p {
  font-size: 16px;
  color: var(--text-muted);
  margin: 0 auto 24px;
  max-width: 480px;
}

.no-results-suggestions {
  display: flex;
  justify-content: center;
  gap: 12px;
  flex-wrap: wrap;
}
.no-results-suggestions a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 20px;
  border-radius: 50px;
  border: 1.5px solid var(--brand-border);
  font-size: 14px;
  font-weight: 600;
  color: var(--brand-deep);
  text-decoration: none;
  transition: all 0.2s ease-in-out;
}
.no-results-suggestions a:hover {
  border-color: var(--brand-sky);
  background: var(--surface-tint);
}

/* ==========================================================================
   7. POPULAR SEARCHES + FEATURED TOURS
   ========================================================================== */
.popular-searches {
  background: var(--surface-tint);
  padding: 56px 0;
  scroll-margin-top: 88px;
}
.popular-searches h2 {
  font-family: var(--font-body);
  font-size: 24px;
  font-weight: 700;
  color: var(--brand-deep);
  text-align: center;
  margin-bottom: 24px;
}

.popular-searches__featured-heading {
  margin-top: 16px;
}

.popular-tags {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 40px;
}

.popular-tag {
  display: inline-block;
  padding: 8px 18px;
  border-radius: 50px;
  background: var(--surface);
  border: 1px solid var(--brand-border);
  font-size: 14px;
  font-weight: 500;
  color: var(--brand-deep);
  text-decoration: none;
  cursor: pointer;
  transition: all 0.2s ease-in-out;
}
.popular-tag:hover {
  border-color: var(--brand-sky);
  background: color-mix(in srgb, var(--brand-sky) 12%, var(--surface));
  color: var(--brand-deep);
}

.featured-tours-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-top: 16px;
}

/* ==========================================================================
   8. RESPONSIVE
   ========================================================================== */
@media (max-width: 992px) {
  .dest-results-grid {
    grid-template-columns: 1fr;
  }
  .featured-tours-row {
    grid-template-columns: 1fr 1fr;
  }
  .trc-image {
    width: 180px;
  }
}
@media (max-width: 768px) {
  .search-hero {
    padding: 36px 0 28px;
  }
  .search-hero h1 {
    font-size: 22px;
  }
  .search-hero-input {
    font-size: 16px;
    padding: 14px 48px;
  }
  .filter-pill {
    padding: 7px 14px;
    font-size: 13px;
  }
  .tour-result-card {
    flex-direction: column;
  }
  .trc-image {
    width: 100%;
    height: 180px;
    min-height: auto;
  }
  .trc-body {
    padding: 16px;
  }
  .featured-tours-row {
    grid-template-columns: 1fr;
  }
  .results-section {
    padding: 32px 0;
  }
}
/* The card lift is decoration; honour a reduced-motion preference. */
@media (prefers-reduced-motion: reduce) {
  .tour-result-card:hover,
  .dest-result-card:hover {
    transform: none;
  }
}
/*
    Tour Compare — the side-by-side comparison page (templates/page-tour-compare.php).

    Ported from the PD-Tour-Compare wireframe. Every colour goes through a
    --brand-* / --text-* / --surface token so the page repaints per brand, and
    every alpha value goes through color-mix() rather than rgba() so the
    token-purity gate stays clean. Nothing here is PD-shaped: the table sizes
    itself from the number of columns PHP rendered, so two tours and three look
    equally deliberate.

    Contents
        1. Selector row
        2. Scroll wrapper + sticky chrome
        3. Table — head, rows, cells
        4. Cell contents — highlights, ticks, status
        5. Differences-only mode
        6. CTA cards
        7. Empty state
        8. Motion
        9. Responsive (992 / 768 / 576 — the theme breakpoints)
*/
/* ==========================================================================
   1. SELECTOR ROW
   ========================================================================== */
.tc-selector {
  background: var(--surface);
  border-bottom: 1px solid var(--brand-border);
  padding: 32px 0;
}

.tc-slots {
  display: flex;
  gap: 20px;
  align-items: stretch;
}

.tc-slot {
  flex: 1;
  min-width: 0;
  position: relative;
}

.tc-select {
  width: 100%;
  padding: 16px 44px 16px 18px;
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: 600;
  color: var(--brand-deep);
  background-color: var(--surface);
  border: 2px solid var(--brand-border);
  border-radius: 12px;
  cursor: pointer;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23808080' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 16px center;
  transition: border-color 160ms cubic-bezier(0.23, 1, 0.32, 1), box-shadow 160ms cubic-bezier(0.23, 1, 0.32, 1);
}
.tc-select:hover {
  border-color: var(--brand-sky);
}
.tc-select:focus-visible {
  outline: none;
  border-color: var(--brand-sky);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand-sky) 22%, transparent);
}
.tc-select.is-empty {
  color: var(--text-subtle);
  font-weight: 400;
  border-style: dashed;
}

.tc-remove {
  position: absolute;
  right: -10px;
  top: -10px;
  width: 26px;
  height: 26px;
  padding: 0;
  border-radius: 50%;
  background: var(--surface);
  border: 1px solid var(--brand-border);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 2;
  box-shadow: var(--shadow-dropdown);
  transition: transform 160ms cubic-bezier(0.23, 1, 0.32, 1), border-color 160ms cubic-bezier(0.23, 1, 0.32, 1);
}
.tc-remove[hidden] {
  display: none;
}
.tc-remove svg {
  width: 12px;
  height: 12px;
  stroke: var(--text-subtle);
  fill: none;
  stroke-width: 2;
  transition: stroke 160ms cubic-bezier(0.23, 1, 0.32, 1);
}
.tc-remove:active {
  transform: scale(0.92);
}
.tc-remove:focus-visible {
  outline: 2px solid var(--brand-sky);
  outline-offset: 2px;
}

@media (hover: hover) and (pointer: fine) {
  .tc-remove:hover {
    border-color: var(--brand-sky);
  }
  .tc-remove:hover svg {
    stroke: var(--brand-sky);
  }
}
.tc-controls {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-top: 20px;
}

.tc-diff-toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 600;
  color: var(--text-secondary);
  cursor: pointer;
}
.tc-diff-toggle input {
  width: 16px;
  height: 16px;
  accent-color: var(--brand-sky);
  cursor: pointer;
}

/* ==========================================================================
   2. SCROLL WRAPPER + STICKY CHROME
   ========================================================================== */
.tc-comparison {
  background: var(--surface);
  padding: 0 0 60px;
}

.tc-scroll {
  overflow-x: visible;
  position: relative;
}
.tc-scroll:focus-visible {
  outline: 2px solid var(--brand-sky);
  outline-offset: 4px;
}

@media (max-width: 992px) {
  .tc-scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    background: linear-gradient(to right, var(--surface) 30%, transparent) left center/40px 100% no-repeat, linear-gradient(to left, var(--surface) 30%, transparent) right center/40px 100% no-repeat, radial-gradient(farthest-side at 0 50%, color-mix(in srgb, var(--brand-ink) 14%, transparent), transparent) left center/14px 100% no-repeat, radial-gradient(farthest-side at 100% 50%, color-mix(in srgb, var(--brand-ink) 14%, transparent), transparent) right center/14px 100% no-repeat;
    background-attachment: local, local, scroll, scroll;
  }
}
/* ==========================================================================
   3. TABLE
   ========================================================================== */
.tc-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  table-layout: fixed;
  /* --- Column headers ------------------------------------------------- */
  /* --- Body ----------------------------------------------------------- */
}
.tc-table th,
.tc-table td {
  padding: 18px 24px;
  text-align: left;
  vertical-align: middle;
  border-bottom: 1px solid color-mix(in srgb, var(--brand-border) 55%, var(--surface));
  font-size: 16px;
  color: var(--text-primary);
}
.tc-table thead th {
  position: sticky;
  top: 0;
  z-index: 20;
  background: var(--brand-deep);
  color: var(--text-on-dark);
  text-align: center;
  padding: 16px 24px;
  border-bottom: 3px solid var(--brand-sky);
}
.tc-table th:first-child,
.tc-table td:first-child {
  width: 180px;
}
.tc-table thead th:first-child {
  background: var(--brand-ink);
  z-index: 22;
}
.tc-table tbody th[scope=row] {
  background: var(--surface-tint);
  font-weight: 600;
  color: var(--brand-deep);
  font-size: 14px;
  text-align: left;
}
.tc-table tbody td {
  text-align: center;
}
.tc-table tbody tr:nth-child(even) td {
  background: color-mix(in srgb, var(--surface-tint) 45%, var(--surface));
}
.tc-table tbody tr:nth-child(even) th[scope=row] {
  background: color-mix(in srgb, var(--brand-sky) 16%, var(--surface));
}
.tc-table .tc-group th {
  background: var(--surface-tint);
  color: var(--brand-deep);
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1.2px;
  padding: 12px 24px;
  position: static;
}
.tc-table .tc-group-label {
  position: sticky;
  left: 24px;
}
.tc-table tbody tr.is-diff td,
.tc-table tbody tr.is-diff th[scope=row] {
  background: color-mix(in srgb, var(--brand-sky) 12%, var(--surface));
}
.tc-table tbody tr.is-diff th[scope=row] {
  background: color-mix(in srgb, var(--brand-sky) 20%, var(--surface));
}

.tc-corner-label {
  display: block;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1.4px;
  color: var(--text-on-dark-muted);
  text-align: left;
}

.tc-col-link {
  display: block;
  text-decoration: none;
  color: inherit;
}
.tc-col-link:focus-visible {
  outline: 2px solid var(--brand-glass);
  outline-offset: 3px;
}

@media (hover: hover) and (pointer: fine) {
  .tc-col-link .tc-col-media {
    transition: transform 240ms cubic-bezier(0.23, 1, 0.32, 1);
  }
  .tc-col-link .tc-col-name {
    transition: color 160ms ease;
  }
  .tc-col-link:hover .tc-col-media {
    transform: scale(1.03);
  }
  .tc-col-link:hover .tc-col-name {
    color: var(--brand-glass);
  }
}
.tc-col-media {
  display: block;
  position: relative;
  height: 132px;
  margin-bottom: 12px;
  border-radius: 10px;
  overflow: hidden;
  background-color: var(--brand-ink);
  background-size: cover;
  background-position: center;
}
.tc-col-media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, color-mix(in srgb, var(--brand-ink) 30%, transparent) 0%, transparent 45%, color-mix(in srgb, var(--brand-ink) 65%, transparent) 100%);
}
.tc-col-media .badge {
  position: absolute;
  left: 10px;
  bottom: 10px;
  z-index: 2;
  font-size: 12px;
  padding: 4px 10px;
}

.tc-col-days {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 2;
  padding: 4px 10px;
  border-radius: 20px;
  background: color-mix(in srgb, var(--surface) 92%, transparent);
  color: var(--brand-deep);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.4px;
}

.tc-col-name {
  display: block;
  font-family: var(--font-body);
  font-size: 26px;
  line-height: 1.15;
  font-weight: 400;
}

.tc-col-meaning {
  display: block;
  font-size: 12px;
  font-style: italic;
  font-weight: 400;
  color: var(--text-on-dark-muted);
  margin-top: 4px;
}

/* ==========================================================================
   4. CELL CONTENTS
   ========================================================================== */
.tc-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
}
.tc-mark svg {
  fill: none;
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.tc-mark--yes {
  background: var(--status-available-bg);
}
.tc-mark--yes svg {
  width: 16px;
  height: 16px;
  stroke: var(--status-available-fg);
}
.tc-mark--no {
  background: var(--status-soldout-bg);
}
.tc-mark--no svg {
  width: 14px;
  height: 14px;
  stroke: var(--status-soldout-fg);
  stroke-width: 3;
}

.tc-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  justify-content: center;
}

.tc-tag {
  padding: 4px 10px;
  border-radius: 20px;
  background: var(--surface-tint);
  color: var(--brand-deep);
  font-size: 12px;
  font-weight: 600;
}

.tc-subtle {
  display: block;
  font-size: 12px;
  color: var(--text-subtle);
  margin-top: 4px;
}

.tc-status {
  display: inline-flex;
  align-items: center;
  padding: 5px 14px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.8px;
}
.tc-status.status-available {
  background: var(--status-available-bg);
  color: var(--status-available-fg);
}
.tc-status.status-filling {
  background: var(--status-filling-bg);
  color: var(--status-filling-fg);
}
.tc-status.status-onrequest {
  background: var(--status-onrequest-bg);
  color: var(--status-onrequest-fg);
}
.tc-status.status-soldout {
  background: var(--status-soldout-bg);
  color: var(--status-soldout-fg);
}

.tc-status-date {
  display: block;
  font-size: 12px;
  color: var(--text-subtle);
  margin-top: 6px;
}

.tc-empty {
  color: var(--text-subtle);
}

/* ==========================================================================
   5. DIFFERENCES-ONLY MODE
   ========================================================================== */
.tc-diffs-only .tc-table tbody tr:not(.is-diff):not(.tc-group) {
  display: none;
}

/* ==========================================================================
   6. CTA CARDS
   ========================================================================== */
.tc-ctas {
  display: flex;
  gap: 24px;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 48px;
}

.tc-cta-card {
  flex: 1;
  max-width: 380px;
  min-width: 260px;
  background: var(--surface);
  border: 1px solid var(--brand-border);
  border-radius: 14px;
  padding: 28px 24px;
  text-align: center;
  transition: box-shadow 240ms cubic-bezier(0.23, 1, 0.32, 1), transform 200ms cubic-bezier(0.23, 1, 0.32, 1);
}
.tc-cta-card h3 {
  font-family: var(--font-display);
  font-size: 24px;
  font-weight: 400;
  color: var(--brand-deep);
  margin-bottom: 6px;
}

.tc-cta-meta {
  font-size: 14px;
  color: var(--text-secondary);
  margin-bottom: 18px;
}

.tc-cta-btns {
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
}
.tc-cta-btns .btn-primary,
.tc-cta-btns .btn-outline {
  transition: transform 160ms cubic-bezier(0.23, 1, 0.32, 1);
}
.tc-cta-btns .btn-primary:active,
.tc-cta-btns .btn-outline:active {
  transform: scale(0.97);
}

@media (hover: hover) and (pointer: fine) {
  .tc-cta-card:hover {
    box-shadow: var(--shadow-dropdown);
    transform: translateY(-2px);
  }
}
/* ==========================================================================
   7. EMPTY STATE
   ========================================================================== */
.tc-empty-state {
  text-align: center;
  padding: 72px 24px;
}
.tc-empty-state svg {
  width: 40px;
  height: 40px;
  stroke: var(--brand-border);
  fill: none;
  stroke-width: 1.5;
  margin-bottom: 16px;
}

.tc-empty-title {
  font-size: 24px;
  font-weight: 600;
  color: var(--brand-deep);
  margin-bottom: 6px;
}

.tc-empty-body {
  font-size: 16px;
  color: var(--text-secondary);
  margin-bottom: 24px;
}

/* ==========================================================================
   8. MOTION

   The table is swapped on every selection change, so this uses transitions
   rather than keyframes: a second change mid-animation retargets from wherever
   the first got to instead of snapping back to the start.
   ========================================================================== */
#tourCompareResults {
  overflow-anchor: none;
  transition: opacity 140ms cubic-bezier(0.23, 1, 0.32, 1);
}
#tourCompareResults.is-swapping {
  opacity: 0.35;
}

.tc-loading {
  position: fixed;
  left: 50%;
  bottom: 24px;
  z-index: 50;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 18px 10px 14px;
  border-radius: 999px;
  background: var(--brand-deep);
  color: var(--text-on-dark);
  font-size: 14px;
  font-weight: 600;
  white-space: nowrap;
  box-shadow: 0 6px 20px color-mix(in srgb, var(--brand-ink) 25%, transparent);
  opacity: 0;
  transform: translate(-50%, 8px);
  pointer-events: none;
  transition: opacity 160ms cubic-bezier(0.23, 1, 0.32, 1), transform 160ms cubic-bezier(0.23, 1, 0.32, 1);
}
.tc-loading.is-visible {
  opacity: 1;
  transform: translate(-50%, 0);
}
.tc-loading svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.5;
  stroke-linecap: round;
  animation: tcSpin 800ms linear infinite;
}

@keyframes tcSpin {
  to {
    transform: rotate(360deg);
  }
}
.tc-table tbody tr {
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 200ms cubic-bezier(0.23, 1, 0.32, 1) var(--tc-delay, 0ms), transform 200ms cubic-bezier(0.23, 1, 0.32, 1) var(--tc-delay, 0ms);
}

.tc-table tbody tr td,
.tc-table tbody tr th[scope=row] {
  transition: background-color 200ms ease;
}

#tourCompareResults.is-settled .tc-table tbody tr {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  .tc-table tbody tr {
    transform: none;
    transition: opacity 200ms ease;
  }
  .tc-remove:active,
  .tc-cta-btns .btn-primary:active,
  .tc-cta-btns .btn-outline:active,
  .tc-cta-card:hover {
    transform: none;
  }
  .tc-loading svg {
    animation-duration: 2400ms;
  }
}
/* ==========================================================================
   8b. CONDENSING STICKY HEADER

   Only where the header actually pins (above the scroller breakpoint). Below it
   the header scrolls away with the table, so there is nothing to condense.
   ========================================================================== */
.tc-sentinel {
  height: 1px;
}

@media (min-width: 993px) {
  .is-pinned .tc-table thead th {
    padding-top: 10px;
    padding-bottom: 10px;
  }
  .is-pinned .tc-col-media {
    height: 0;
    margin-bottom: 0;
    opacity: 0;
  }
  .is-pinned .tc-col-name {
    font-size: 19px;
  }
  .is-pinned .tc-col-meaning,
  .is-pinned .tc-corner-label {
    display: none;
  }
}
/* ==========================================================================
   9. RESPONSIVE
   ========================================================================== */
@media (max-width: 992px) {
  .tc-slots {
    flex-wrap: wrap;
  }
  .tc-slot {
    flex: 1 1 calc(50% - 10px);
    min-width: 200px;
  }
  .tc-table {
    min-width: calc(180px + var(--tc-cols, 3) * 240px);
  }
  .tc-table thead th {
    position: static;
  }
  .tc-table th:first-child,
  .tc-table td:first-child {
    position: sticky;
    left: 0;
    z-index: 10;
    background-color: var(--surface);
  }
  .tc-table th:first-child::after,
  .tc-table td:first-child::after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 6px;
    transform: translateX(100%);
    pointer-events: none;
    background: linear-gradient(to right, color-mix(in srgb, var(--brand-ink) 10%, transparent), transparent);
  }
  .tc-table thead th:first-child {
    position: sticky;
    z-index: 22;
    top: auto;
  }
}
@media (max-width: 768px) {
  .tc-selector {
    padding: 24px 0;
  }
  .tc-slot {
    flex: 1 1 100%;
  }
  .tc-table th,
  .tc-table td {
    padding: 14px 16px;
    font-size: 14px;
  }
  .tc-table th:first-child,
  .tc-table td:first-child,
  .tc-table thead th:first-child {
    width: 130px;
  }
  .tc-table tbody th[scope=row] {
    font-size: 12px;
  }
  .tc-table {
    min-width: calc(130px + var(--tc-cols, 3) * 200px);
  }
  .tc-col-media {
    height: 92px;
  }
  .tc-col-name {
    font-size: 18px;
  }
  .tc-ctas {
    flex-direction: column;
    align-items: center;
    margin-top: 32px;
  }
  .tc-cta-card {
    max-width: 100%;
    width: 100%;
  }
}
@media (max-width: 576px) {
  .tc-table {
    min-width: calc(120px + var(--tc-cols, 3) * 170px);
  }
  .tc-col-name {
    font-size: 16px;
  }
}
/* ===========================================================================
   Section · Vehicle Carousel — the fleet as a horizontally scrolling row of
   coach cards. Port of the PD Fleet wireframe (.vehicles-section /
   .vehicle-carousel / .vehicle-card / .vehicle-arrow).

   Every colour comes from the editor-selected band via the --sec-* scheme
   tokens (_section-surfaces.scss), so the block stays legible on any
   background and repaints per brand with no code change. Nothing here may
   hard-code a brand colour — CI: .bin/lint-tokens.sh.

   Scroll behaviour is the shared card-slider in js/custom.js, which measures
   the real card offset; the card width steps down at each breakpoint, so a
   fixed scroll distance would drift out of step with the snap points.
   =========================================================================== */
.vehicles .s-head {
  margin-bottom: 0;
}

.vehicles__wrap {
  position: relative;
  margin-top: 48px;
}

/* --- the scrolling track ------------------------------------------------- */
.vehicles__carousel {
  display: flex;
  gap: 24px;
  /* Snap so a flick always lands on a card edge rather than mid-card. */
  scroll-snap-type: x mandatory;
  overflow-x: auto;
  /* 4px of head-room so the cards' hover lift is not clipped by the scroller. */
  padding: 4px 0 20px;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.vehicles__carousel::-webkit-scrollbar {
  display: none;
}
@media (prefers-reduced-motion: reduce) {
  .vehicles__carousel {
    scroll-behavior: auto;
  }
}

/* --- arrows ------------------------------------------------------------- */
.vehicles__arrow {
  position: absolute;
  top: 50%;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  /* --surface, not --sec-bg: on an off-white band --sec-bg IS the band, so
     the arrow vanishes into it. */
  background: var(--surface);
  border: 1.5px solid var(--sec-border);
  border-radius: 50%;
  box-shadow: 0 2px 12px color-mix(in srgb, var(--brand-deep) 10%, transparent);
  transform: translateY(-50%);
  cursor: pointer;
  transition: border-color 0.25s ease, box-shadow 0.25s ease;
  /* .slider-btn's pressed shrink (_tour-collection.scss) sets transform on
     its own, which dropped the translateY(-50%) centring and made the arrow
     jump down while pressed. Keep the centring and shrink on top of it. */
  /* Half-overlapping the container edge, as the wireframe has them. */
  /* Below the medium breakpoint the row is touch-scrolled; the arrows would
     overlap the cards at that width. */
}
.vehicles__arrow svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: var(--sec-fg);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.vehicles__arrow:hover, .vehicles__arrow:focus-visible {
  border-color: var(--sec-accent);
}
.vehicles__arrow.slider-btn:active {
  transform: translateY(-50%) scale(0.92);
}
.vehicles__arrow--prev {
  left: -22px;
}
.vehicles__arrow--next {
  right: -22px;
}
@media (max-width: 992px) {
  .vehicles__arrow {
    display: none;
  }
}

/* --- card --------------------------------------------------------------- */
.vehicle-card {
  display: flex;
  flex: 0 0 340px;
  flex-direction: column;
  scroll-snap-align: start;
  overflow: hidden;
  /* --surface, not --sec-bg: the card has to read as a card ON the band. */
  background: var(--surface);
  border: 1px solid var(--sec-border);
  border-radius: 14px;
  transition: transform 0.3s cubic-bezier(0.23, 1, 0.32, 1), box-shadow 0.3s ease;
}
@media (hover: hover) and (pointer: fine) {
  .vehicle-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-dropdown);
  }
}
@media (max-width: 992px) {
  .vehicle-card {
    flex-basis: 300px;
  }
}
@media (max-width: 768px) {
  .vehicle-card {
    flex-basis: 280px;
  }
}
@media (max-width: 480px) {
  .vehicle-card {
    flex-basis: 260px;
  }
}

.vehicle-card__img {
  height: 220px;
  overflow: hidden;
}

.vehicle-card__photo {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.vehicle-card__body {
  padding: 22px 24px 24px;
}

.vehicle-card__type {
  margin: 0 0 6px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--sec-accent);
}

.vehicle-card__name {
  margin: 0 0 4px;
  font-size: 19px;
  font-weight: 700;
  line-height: 1.2;
  color: var(--sec-fg);
}

.vehicle-card__capacity {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0 0 16px;
  font-size: 14px;
  color: var(--sec-fg-muted);
}
.vehicle-card__capacity svg {
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentcolor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.vehicle-card__features {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.vehicle-card__feature {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 500;
  line-height: 1.5;
  color: var(--sec-fg);
}
.vehicle-card__feature svg {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  fill: none;
  stroke: var(--sec-accent);
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ===========================================================================
   Section · Fleet Gallery — five tiles (the first spanning two columns), each
   opening the shared lightbox. Port of the PD Fleet wireframe
   (.fleet-gallery-section / .fleet-gallery-grid / .fleet-gallery-item).

   Every colour comes from the editor-selected band via the --sec-* scheme
   tokens (_section-surfaces.scss), except the caption and the expand badge,
   which sit on top of a photograph and so are the structural white the lint
   allows. Nothing here may hard-code a brand colour — CI: .bin/lint-tokens.sh.

   The overlay tint is mixed from --brand-deep rather than stated literally, so
   it follows the brand.
   =========================================================================== */
.fleet-gallery__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-top: 48px;
  /* Phones and small tablets: a sideways-scrolling strip that snaps one photo
     at a time (client, 12 Oct 2026), with the next photo peeking in so it
     reads as swipeable. It runs to the screen edge, past the container's
     gutter, and the gutter comes back as scroll padding. */
}
@media (max-width: 767px) {
  .fleet-gallery__grid {
    display: flex;
    gap: 12px;
    /* 20px = the container's phone gutter (same bleed as the Location
       Grid rails, _location-grid.scss). */
    margin: 48px -20px 0;
    padding: 0 20px 4px;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-padding-left: 20px;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  .fleet-gallery__grid::-webkit-scrollbar {
    display: none;
  }
}

.fleet-gallery__item {
  position: relative;
  /* A button, so the tile is keyboard-reachable and announces itself; the
     chrome is reset because it must read as an image, not a control. */
  display: block;
  min-height: 240px;
  padding: 0;
  overflow: hidden;
  background: none;
  border: 0;
  border-radius: 12px;
  cursor: pointer;
  /* The lead tile is wide and taller. */
  /* After the first row the grid runs in threes, so a short last row would
     leave a hole: the last photo stretches to close it, whatever the count. */
  /* The strip: every photo the same size, snapping to the left edge. */
  /* Hover tint, under the caption and the badge. */
  /* Expand affordance. The glyph is a data-URI because it is decoration, not
     content; %23 is the escape the token lint expects for a colour in a URI. */
}
.fleet-gallery__item:first-child {
  grid-column: 1/3;
  grid-row: 1;
  min-height: 320px;
}
.fleet-gallery__item:nth-child(2) {
  grid-column: 3;
  grid-row: 1;
}
.fleet-gallery__item:last-child:nth-child(3n+1):not(:first-child) {
  grid-column: span 2;
}
.fleet-gallery__item:last-child:nth-child(3n):not(:nth-child(2)) {
  grid-column: span 3;
}
@media (max-width: 767px) {
  .fleet-gallery__item {
    flex: 0 0 82%;
    min-height: 0;
    aspect-ratio: 4/3;
    scroll-snap-align: start;
  }
  .fleet-gallery__item:first-child, .fleet-gallery__item:nth-child(2) {
    min-height: 0;
  }
}
.fleet-gallery__item::after {
  position: absolute;
  inset: 0;
  z-index: 1;
  content: "";
  background: transparent;
  transition: background 0.3s ease;
}
.fleet-gallery__item::before {
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 3;
  width: 32px;
  height: 32px;
  content: "";
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='15 3 21 3 21 9'/%3E%3Cpolyline points='9 21 3 21 3 15'/%3E%3Cline x1='21' y1='3' x2='14' y2='10'/%3E%3Cline x1='3' y1='21' x2='10' y2='14'/%3E%3C/svg%3E") no-repeat center;
  background-color: rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(6px);
  border-radius: 50%;
  opacity: 0;
  transition: opacity 0.25s ease;
}
.fleet-gallery__item:hover::after, .fleet-gallery__item:focus-visible::after {
  background: color-mix(in srgb, var(--brand-deep) 15%, transparent);
}
.fleet-gallery__item:hover::before, .fleet-gallery__item:focus-visible::before {
  opacity: 1;
}
.fleet-gallery__item:hover .fleet-gallery__bg, .fleet-gallery__item:focus-visible .fleet-gallery__bg {
  transform: scale(1.06);
}
.fleet-gallery__item:hover .fleet-gallery__caption, .fleet-gallery__item:focus-visible .fleet-gallery__caption {
  opacity: 1;
  transform: translateY(0);
}

.fleet-gallery__bg {
  position: absolute;
  inset: 0;
  background-position: center;
  background-size: cover;
  transition: transform 0.5s cubic-bezier(0.23, 1, 0.32, 1);
}
@media (prefers-reduced-motion: reduce) {
  .fleet-gallery__bg {
    transition: none;
  }
}

.fleet-gallery__caption {
  position: absolute;
  bottom: 14px;
  left: 16px;
  z-index: 2;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.3px;
  /* On a photograph, so it is the structural white rather than a band token. */
  color: #fff;
  text-align: left;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 0.3s ease, transform 0.3s ease;
}

/* No hover on a touch screen, so on the strip the caption is always shown. */
@media (max-width: 767px) {
  .fleet-gallery__caption {
    opacity: 1;
    transform: none;
  }
}
/* ---------------------------------------------------------------------------
   Carousel display: one row of equal photos the visitor scrolls sideways, with
   the Vehicle Carousel's arrows (.vehicles__arrow, _vehicle-carousel.scss) and
   the shared card slider in custom.js. Below $screen-sm it is the same snapping
   strip as the grid, so only the wider screens are set here.
   --------------------------------------------------------------------------- */
.fleet-gallery__wrap {
  position: relative;
  margin-top: 48px;
}
.fleet-gallery__wrap .fleet-gallery__grid {
  margin-top: 0;
}

@media (min-width: 768px) {
  .fleet-gallery--carousel .fleet-gallery__grid {
    display: flex;
    gap: 16px;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-behavior: smooth;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
  }
  .fleet-gallery--carousel .fleet-gallery__grid::-webkit-scrollbar {
    display: none;
  }
  .fleet-gallery--carousel .fleet-gallery__item,
  .fleet-gallery--carousel .fleet-gallery__item:first-child,
  .fleet-gallery--carousel .fleet-gallery__item:nth-child(2) {
    flex: 0 0 calc((100% - 2 * 16px) / 3);
    min-height: 0;
    aspect-ratio: 4/3;
    scroll-snap-align: start;
  }
}
@media (min-width: 768px) and (max-width: 992px) {
  .fleet-gallery--carousel .fleet-gallery__item,
  .fleet-gallery--carousel .fleet-gallery__item:first-child,
  .fleet-gallery--carousel .fleet-gallery__item:nth-child(2) {
    flex-basis: calc((100% - 16px) / 2);
  }
}
/* In a carousel the place names are the point, so they show without a hover,
   over a soft shade that keeps the white text readable on a bright photo. */
.fleet-gallery--carousel .fleet-gallery__item::after {
  background: linear-gradient(to top, rgba(0, 0, 0, 0.45), transparent 50%);
}
.fleet-gallery--carousel .fleet-gallery__caption {
  right: 16px;
  opacity: 1;
  transform: none;
}

/*
    Accommodation listing — journey-ordered property bands, room shots,
    island chapters, tour filtering, and supporting notes.
*/
.acc-listing {
  /* Filter */
  /* Island chapter */
  /* One property */
  /* wpautop wraps the description in paragraphs. */
  /* The four named shots — the point of the page. */
  /* Filtered out */
}
.acc-listing .s-head {
  margin-bottom: 40px;
}
.acc-listing .ab-filter {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px;
  padding: 20px 26px;
  margin-bottom: 72px;
  background: var(--sec-tint);
  border: 1px solid var(--sec-border);
  border-radius: 12px;
}
.acc-listing .ab-filter label {
  font-size: 16px;
  font-weight: 600;
  color: var(--sec-fg);
}
.acc-listing .ab-filter select {
  min-width: 260px;
  padding: 10px 14px;
  font: inherit;
  font-size: 16px;
  color: var(--sec-fg);
  background-color: var(--surface);
  /* Native arrow retained because a data URI cannot consume a CSS colour token. */
  border: 1px solid var(--sec-border);
  border-radius: 8px;
  cursor: pointer;
}
.acc-listing .ab-filter select:focus-visible {
  outline: 2px solid var(--sec-accent);
  outline-offset: 2px;
}
.acc-listing .ab-filter__count {
  margin-left: auto;
  font-size: 15px;
  color: var(--sec-fg-muted);
}
.acc-listing .ab-chapter {
  margin: 8px 0 56px;
  text-align: center;
}
.acc-listing .ab-chapter:not(:first-of-type) {
  margin-top: 40px;
}
.acc-listing .ab-chapter__title {
  position: relative;
  display: inline-block;
  padding: 0 34px;
  font-family: "Playlist", cursive;
  font-size: 40px;
  font-weight: 400;
  color: var(--sec-fg);
}
.acc-listing .ab-chapter__title::before, .acc-listing .ab-chapter__title::after {
  position: absolute;
  top: 55%;
  width: 56px;
  height: 1px;
  content: "";
  background: var(--sec-border);
}
.acc-listing .ab-chapter__title::before {
  right: 100%;
}
.acc-listing .ab-chapter__title::after {
  left: 100%;
}
.acc-listing .ab-chapter__sub {
  max-width: 640px;
  margin: 10px auto 0;
  font-size: 16px;
  color: var(--sec-fg-muted);
}
.acc-listing .ab-band {
  margin-bottom: 88px;
  scroll-margin-top: 110px;
}
.acc-listing .ab-band:last-of-type {
  margin-bottom: 0;
}
.acc-listing .ab-band__top {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: 56px;
  align-items: center;
  margin-bottom: 22px;
}
.acc-listing .ab-band--flip .ab-band__top {
  direction: rtl;
}
.acc-listing .ab-band--flip .ab-band__top > * {
  direction: ltr;
}
.acc-listing .ab-band__hero {
  position: relative;
  /* Rendered as a <button> so the hero opens the lightbox like the shots
     below it; strip the control chrome and keep the block layout. */
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  background: none;
  text-align: inherit;
  font: inherit;
  color: inherit;
  /* The global `button` rule uppercases; `font: inherit` does not undo it. */
  text-transform: none;
}
.acc-listing .ab-band__hero img {
  display: block;
  width: 100%;
  aspect-ratio: 16/10;
  object-fit: cover;
  border-radius: 14px;
}
.acc-listing button.ab-band__hero {
  cursor: pointer;
  /* A shadow lift rather than the thumbs' zoom: the sequence badge is
     positioned outside this box, so the frame cannot be clipped. */
}
.acc-listing button.ab-band__hero img {
  transition: box-shadow 0.35s cubic-bezier(0.23, 1, 0.32, 1);
}
.acc-listing button.ab-band__hero:hover img, .acc-listing button.ab-band__hero:focus-visible img {
  box-shadow: 0 10px 34px color-mix(in srgb, var(--brand-deep) 22%, transparent);
}
.acc-listing button.ab-band__hero:focus-visible {
  outline: 2px solid var(--sec-accent);
  outline-offset: 4px;
  border-radius: 14px;
}
.acc-listing .ab-band__info h3 {
  margin-bottom: 12px;
  font-size: 30px;
  font-weight: 600;
  line-height: 1.2;
  color: var(--sec-fg);
}
.acc-listing .ab-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 18px;
  margin-bottom: 6px;
  font-size: 15px;
  color: var(--sec-fg-muted);
}
.acc-listing .ab-meta svg {
  flex: none;
  width: 17px;
  height: 17px;
  margin-right: -4px;
  fill: none;
  stroke: var(--sec-accent);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.acc-listing .ab-meta--rating {
  margin-bottom: 18px;
}
.acc-listing .ab-stars {
  font-size: 15px;
  letter-spacing: 3px;
  color: var(--sec-accent);
}
.acc-listing .ab-nights {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}
.acc-listing .ab-est {
  font-style: italic;
  color: var(--sec-fg-muted);
}
.acc-listing .ab-desc {
  margin-bottom: 20px;
  font-size: 17px;
  line-height: 1.75;
  color: var(--sec-fg-muted);
}
.acc-listing .ab-desc p {
  margin: 0 0 10px;
}
.acc-listing .ab-desc p:last-child {
  margin-bottom: 0;
}
.acc-listing .ab-feats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px 20px;
  /* The theme's global `ul` keeps a list indent; this one is a flush
     two-column grid of ticks, not a bulleted list. */
  margin: 0;
  padding: 0;
  list-style: none;
}
.acc-listing .ab-feats li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 15px;
  color: var(--sec-fg);
}
.acc-listing .ab-feats svg {
  flex: none;
  width: 17px;
  height: 17px;
  margin-top: 3px;
  fill: none;
  stroke: var(--sec-accent);
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.acc-listing .ab-shots {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
  /* Without this the tiles stretch to the tallest in the row, and a
     button taller than its content centres that content vertically, so
     one wrapped caption nudges its neighbours' photos out of line. */
  align-items: start;
}
.acc-listing .ab-shot {
  display: block;
  padding: 0;
  font: inherit;
  text-align: left;
  /* As above: the global `button` rule would uppercase these captions. */
  text-transform: none;
  cursor: pointer;
  background: none;
  border: 0;
}
.acc-listing .ab-shot:hover .ab-shot__img, .acc-listing .ab-shot:focus-visible .ab-shot__img {
  transform: scale(1.03);
}
.acc-listing .ab-shot:focus-visible {
  outline: 2px solid var(--sec-accent);
  outline-offset: 4px;
  border-radius: 10px;
}
.acc-listing .ab-shot__img {
  display: block;
  width: 100%;
  aspect-ratio: 3/2;
  background-position: center;
  background-size: cover;
  border-radius: 10px;
  transition: transform 0.4s cubic-bezier(0.23, 1, 0.32, 1);
}
.acc-listing .ab-shot__meta {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin-top: 11px;
}
.acc-listing .ab-shot__icon {
  flex: none;
  width: 16px;
  height: 16px;
  margin-top: 2px;
  fill: none;
  stroke: var(--sec-accent);
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.acc-listing .ab-shot__cap {
  font-size: 14px;
  font-weight: 600;
  line-height: 1.45;
  color: var(--sec-fg-muted);
}
.acc-listing .ab-note {
  margin-top: 72px;
  font-size: 14px;
  font-style: italic;
  text-align: center;
  color: var(--sec-fg-muted);
}
.acc-listing .ab-band[hidden],
.acc-listing .ab-chapter[hidden] {
  display: none;
}
@media (max-width: 1100px) {
  .acc-listing .ab-band__top {
    grid-template-columns: 1fr;
    gap: 30px;
  }
  .acc-listing .ab-band--flip .ab-band__top {
    direction: ltr;
  }
}
@media (max-width: 860px) {
  .acc-listing .ab-shots {
    grid-template-columns: repeat(2, 1fr);
  }
  .acc-listing .ab-filter__count {
    width: 100%;
    margin-left: 0;
  }
}
@media (max-width: 600px) {
  .acc-listing .ab-band {
    margin-bottom: 64px;
  }
  .acc-listing .ab-band__info h3 {
    font-size: 25px;
  }
  .acc-listing .ab-feats {
    grid-template-columns: 1fr;
  }
  .acc-listing .ab-chapter__title {
    padding: 0 18px;
    font-size: 32px;
  }
  .acc-listing .ab-chapter__title::before, .acc-listing .ab-chapter__title::after {
    width: 26px;
  }
  .acc-listing .ab-filter select {
    width: 100%;
    min-width: 0;
  }
}
@media (prefers-reduced-motion: reduce) {
  .acc-listing .ab-shot__img {
    transition: none;
  }
  .acc-listing .ab-shot:hover .ab-shot__img,
  .acc-listing .ab-shot:focus-visible .ab-shot__img {
    transform: none;
  }
}

/*
    Pre- and post-tour accommodation rates — responsive property cards,
    optional pricing details, inclusions, and supporting notes.
*/
.acc-rates {
  /* Absent when the CMS has no rate. */
  /* Season under each price; the next season's price sits a step smaller. */
}
.acc-rates .pp-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 32px;
}
.acc-rates .pp-card {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--surface);
  border: 1px solid var(--sec-border);
  border-radius: 14px;
  transition: transform 0.35s cubic-bezier(0.23, 1, 0.32, 1), box-shadow 0.35s;
}
.acc-rates .pp-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 36px color-mix(in srgb, var(--brand-deep) 10%, transparent);
}
.acc-rates .pp-card h3 {
  margin-bottom: 12px;
  font-size: 24px;
  font-weight: 600;
  line-height: 1.2;
  color: var(--sec-fg);
}
.acc-rates .pp-card__img {
  display: block;
  width: 100%;
  height: 230px;
  object-fit: cover;
}
.acc-rates .pp-card__body {
  display: flex;
  flex: 1;
  flex-direction: column;
  padding: 26px 28px 30px;
}
.acc-rates .pp-card__when {
  margin-bottom: 10px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--sec-accent);
}
.acc-rates .pp-card__loc,
.acc-rates .pp-card__room {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-bottom: 7px;
  font-size: 15px;
  color: var(--sec-fg-muted);
}
.acc-rates .pp-card__loc svg,
.acc-rates .pp-card__room svg {
  flex: none;
  width: 17px;
  height: 17px;
  fill: none;
  stroke: var(--sec-accent);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.acc-rates .pp-card__price {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin: 18px 0 4px;
  font-size: 30px;
  font-weight: 700;
  color: var(--sec-fg);
}
.acc-rates .pp-card__unit {
  font-size: 15px;
  font-weight: 400;
  color: var(--sec-fg-muted);
}
.acc-rates .pp-card__valid {
  margin: 0 0 14px;
  font-size: 13px;
  color: var(--sec-fg-muted);
}
.acc-rates .pp-card__valid + .pp-card__price {
  margin-top: 0;
  font-size: 22px;
}
.acc-rates .pp-card__incl {
  display: grid;
  gap: 8px;
  /* The theme's global `ul` adds an indent; these are flush tick rows. */
  margin: 0;
  padding: 0;
  list-style: none;
}
.acc-rates .pp-card__incl li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 15px;
  color: var(--sec-fg);
}
.acc-rates .pp-card__incl svg {
  flex: none;
  width: 18px;
  height: 18px;
  margin-top: 4px;
  fill: none;
  stroke: var(--sec-accent);
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.acc-rates .pp-card__desc {
  padding-top: 18px;
  margin-top: auto;
  font-size: 15px;
  line-height: 1.7;
  color: var(--sec-fg-muted);
  border-top: 1px solid var(--sec-border);
}
.acc-rates .pp-card__more {
  align-self: flex-start;
  margin-top: 16px;
  font-size: 15px;
  font-weight: 600;
  color: var(--sec-link);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
  text-decoration-color: color-mix(in srgb, var(--sec-link) 40%, transparent);
}
.acc-rates .pp-note {
  margin-top: 44px;
  font-size: 14px;
  font-style: italic;
  line-height: 1.9;
  text-align: center;
  color: var(--sec-fg-muted);
}
@media (max-width: 992px) {
  .acc-rates .pp-grid {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 576px) {
  .acc-rates .pp-card__body {
    padding: 22px 22px 26px;
  }
}

/*
    Upcoming Departures — year tabs, tour filter and the departures table
    (template-parts/departures/upcoming.php). Shared by the page section and
    the trade portal's Availability tab, so everything is scoped to
    .upcoming-deps and colours fall back from the section scheme tokens to the
    plain surface tokens (the portal has no section band).

    Phones: the same table restacks into one card per departure.
*/
.upcoming-deps {
  --ud-fg: var(--sec-fg, var(--text-primary));
  --ud-muted: var(--sec-fg-muted, var(--text-muted));
  --ud-border: var(--sec-border, var(--brand-border));
  --ud-accent: var(--sec-accent, var(--brand-deep));
  --ud-link: var(--sec-link, var(--brand-deep));
  --ud-tint: var(--sec-tint, var(--surface-tint));
  color: var(--ud-fg);
  /* ---- Toolbar: year tabs + tour filter ---- */
  /* ---- Year blocks ---- */
  /* ---- Table ---- */
  /* Status pills: the same semantic tokens as the tour page's table. */
  /* Row button: the site's gradient pill at table scale. */
}
.upcoming-deps .ud-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px 24px;
  margin-bottom: 28px;
}
.upcoming-deps .ud-toolbar[hidden] {
  display: none;
}
.upcoming-deps .ud-years {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 4px;
  padding: 4px;
  border: 1px solid var(--ud-border);
  border-radius: 999px;
}
.upcoming-deps .ud-year-tab {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 8px 22px;
  border-radius: 999px;
  background: transparent;
  color: var(--ud-muted);
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: none;
  transition: background-color 0.2s cubic-bezier(0.23, 1, 0.32, 1), color 0.2s cubic-bezier(0.23, 1, 0.32, 1);
}
.upcoming-deps .ud-year-tab:hover {
  color: var(--ud-fg);
  background: var(--ud-tint);
}
.upcoming-deps .ud-year-tab:focus-visible {
  outline: 2px solid var(--ud-accent);
  outline-offset: 2px;
}
.upcoming-deps .ud-year-tab[aria-selected=true] {
  background: var(--brand-deep);
  color: var(--text-on-dark);
}
.upcoming-deps .ud-year-count {
  min-width: 26px;
  padding: 2px 8px;
  border-radius: 999px;
  background: color-mix(in srgb, currentColor 14%, transparent);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.5;
  font-variant-numeric: tabular-nums;
}
.upcoming-deps .ud-filter {
  display: flex;
  align-items: center;
  gap: 10px;
}
.upcoming-deps .ud-filter label {
  margin: 0;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ud-muted);
}
.upcoming-deps .ud-filter select {
  min-height: 44px;
  min-width: 220px;
  padding: 8px 40px 8px 16px;
  border: 1px solid var(--ud-border);
  border-radius: 10px;
  background-color: var(--surface);
  color: var(--text-primary);
  font-size: 15px;
}
.upcoming-deps .ud-year + .ud-year {
  margin-top: 48px;
}
.upcoming-deps.is-enhanced .ud-year + .ud-year {
  margin-top: 0;
}
.upcoming-deps .ud-year-heading {
  margin: 0 0 16px;
  font-size: 24px;
  color: var(--ud-fg);
}
.upcoming-deps.is-enhanced .ud-year-heading {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}
.upcoming-deps .ud-table {
  width: 100%;
  border-collapse: collapse;
  font-variant-numeric: tabular-nums;
}
.upcoming-deps .ud-table[hidden] {
  display: none;
}
.upcoming-deps .ud-table thead th {
  padding: 12px 16px;
  border-bottom: 2px solid var(--ud-border);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-align: left;
  text-transform: uppercase;
  color: var(--ud-muted);
  white-space: nowrap;
}
.upcoming-deps .ud-table tbody th,
.upcoming-deps .ud-table tbody td {
  padding: 12px 16px;
  border-bottom: 1px solid var(--ud-border);
  font-size: 15px;
  text-align: left;
  vertical-align: middle;
}
.upcoming-deps .ud-table tbody tr {
  transition: background-color 0.2s cubic-bezier(0.23, 1, 0.32, 1);
}
.upcoming-deps .ud-table tbody tr:not(.ud-month):hover {
  background: var(--ud-tint);
}
.upcoming-deps .ud-table tbody .ud-month th {
  padding: 36px 16px 10px;
  border-bottom: 2px solid var(--ud-accent);
  font-size: 22px;
  font-weight: 700;
  line-height: 1.2;
  color: var(--ud-accent);
}
.upcoming-deps .ud-table tbody .ud-month:first-child th {
  padding-top: 16px;
}
.upcoming-deps .ud-table tbody tr[hidden] {
  display: none;
}
.upcoming-deps .ud-table .ud-num {
  text-align: center;
}
.upcoming-deps .ud-tour {
  font-weight: 700;
  white-space: nowrap;
}
.upcoming-deps .ud-tour a {
  color: var(--ud-fg);
  text-decoration: none;
}
.upcoming-deps .ud-tour a:hover {
  color: var(--ud-link);
  text-decoration: underline;
}
.upcoming-deps .ud-dates {
  white-space: nowrap;
}
.upcoming-deps .ud-days-unit {
  display: none;
}
.upcoming-deps .ud-price {
  font-weight: 700;
  white-space: nowrap;
}
.upcoming-deps .ud-single {
  color: var(--ud-muted);
  white-space: nowrap;
}
.upcoming-deps .ud-action {
  text-align: right;
  white-space: nowrap;
}
.upcoming-deps .ud-badge {
  display: inline-block;
  padding: 4px 12px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
}
.upcoming-deps .status-available {
  background: var(--status-available-bg);
  color: var(--status-available-fg);
}
.upcoming-deps .status-filling {
  background: var(--status-filling-bg);
  color: var(--status-filling-fg);
}
.upcoming-deps .status-onrequest {
  background: var(--status-onrequest-bg);
  color: var(--status-onrequest-fg);
}
.upcoming-deps .status-soldout {
  background: var(--status-soldout-bg);
  color: var(--status-soldout-fg);
}
.upcoming-deps .ud-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 38px;
  padding: 8px 18px;
  border: 1px solid transparent;
  border-radius: 999px;
  background: var(--gradient-button);
  background-origin: border-box;
  color: var(--gradient-button-fg);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-decoration: none;
  text-transform: uppercase;
  box-shadow: var(--shadow-cta);
  transition: transform 0.16s cubic-bezier(0.23, 1, 0.32, 1), box-shadow 0.2s cubic-bezier(0.23, 1, 0.32, 1);
}
.upcoming-deps .ud-btn:hover {
  color: var(--gradient-button-fg);
  transform: translateY(-1px);
  box-shadow: var(--shadow-cta-hover);
}
.upcoming-deps .ud-btn:active {
  transform: scale(0.97);
}
.upcoming-deps .ud-btn:focus-visible {
  outline: 2px solid var(--ud-accent);
  outline-offset: 2px;
}
.upcoming-deps .ud-btn--quiet {
  background: transparent;
  border-color: var(--ud-border);
  color: var(--ud-link);
  box-shadow: none;
}
.upcoming-deps .ud-btn--quiet:hover {
  color: var(--ud-link);
  background: var(--ud-tint);
  box-shadow: none;
}
.upcoming-deps .ud-empty,
.upcoming-deps .ud-none {
  padding: 32px 0;
  text-align: center;
  color: var(--ud-muted);
}
.upcoming-deps .ud-note {
  margin: 16px 0 0;
  font-size: 13px;
  color: var(--ud-muted);
}

.upcoming-departures .ud-small-print {
  margin: 8px 0 0;
  font-size: 13px;
  color: var(--sec-fg-muted);
}

@media (prefers-reduced-motion: reduce) {
  .upcoming-deps .ud-btn,
  .upcoming-deps .ud-year-tab,
  .upcoming-deps .ud-table tbody tr {
    transition: none;
  }
}
/* ---- Tablet: tighten the cells before the table restacks ---- */
@media (max-width: 1200px) {
  .upcoming-deps .ud-table tbody th,
  .upcoming-deps .ud-table tbody td,
  .upcoming-deps .ud-table thead th {
    padding-left: 10px;
    padding-right: 10px;
  }
}
/* ---- Phones + small tablets: one card per departure ---- */
@media (max-width: 992px) {
  .upcoming-deps .ud-toolbar {
    align-items: stretch;
    flex-direction: column;
  }
  .upcoming-deps .ud-years {
    align-self: flex-start;
  }
  .upcoming-deps .ud-filter {
    flex-direction: column;
    align-items: stretch;
    gap: 6px;
  }
  .upcoming-deps .ud-filter select {
    min-width: 0;
    width: 100%;
  }
  .upcoming-deps .ud-table thead {
    display: none;
  }
  .upcoming-deps .ud-table,
  .upcoming-deps .ud-table tbody {
    display: block;
  }
  .upcoming-deps .ud-table tbody tr.ud-month {
    display: block;
    margin: 20px 0 10px;
  }
  .upcoming-deps .ud-table tbody tr.ud-month th {
    padding: 0;
    border: 0;
  }
  .upcoming-deps .ud-table tbody tr.ud-month:first-child {
    margin-top: 0;
  }
  .upcoming-deps .ud-table tbody tr.ud-month[hidden] {
    display: none;
  }
  .upcoming-deps .ud-table tbody tr:not(.ud-month) {
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-areas: "tour status" "dates days" "price single" "action action";
    gap: 6px 12px;
    margin-bottom: 12px;
    padding: 18px 18px 16px;
    border: 1px solid var(--ud-border);
    border-radius: 14px;
    background: var(--surface);
    color: var(--text-primary);
  }
  .upcoming-deps .ud-table tbody tr:not(.ud-month):hover {
    background: var(--surface);
  }
  .upcoming-deps .ud-table tbody th,
  .upcoming-deps .ud-table tbody td {
    padding: 0;
    border: 0;
  }
  .upcoming-deps .ud-tour {
    grid-area: tour;
    font-size: 17px;
    white-space: normal;
  }
  .upcoming-deps .ud-tour a {
    color: var(--brand-deep);
  }
  .upcoming-deps .ud-status {
    grid-area: status;
    text-align: right;
  }
  .upcoming-deps .ud-dates {
    grid-area: dates;
    white-space: normal;
    color: var(--text-muted);
  }
  .upcoming-deps .ud-table .ud-days {
    grid-area: days;
    text-align: right;
    color: var(--text-muted);
    white-space: nowrap;
  }
  .upcoming-deps .ud-days-unit {
    display: inline;
  }
  .upcoming-deps .ud-price {
    grid-area: price;
    font-size: 18px;
    color: var(--brand-deep);
  }
  .upcoming-deps .ud-single {
    grid-area: single;
    align-self: end;
    text-align: right;
    color: var(--text-muted);
  }
  .upcoming-deps .ud-price::before,
  .upcoming-deps .ud-single::before {
    content: attr(data-label);
    display: block;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-muted);
  }
  .upcoming-deps .ud-action {
    grid-area: action;
    margin-top: 8px;
    text-align: left;
  }
  .upcoming-deps .ud-btn {
    width: 100%;
    min-height: 44px;
  }
  .upcoming-deps .ud-btn--quiet {
    color: var(--brand-deep);
    border-color: var(--brand-border);
  }
}
/*
    Homepage-Specific Styles

    Styles that ONLY apply to the homepage.
    Use sparingly — prefer reusable section styles instead.

    Target with body.home class from WordPress.
*/
/*
    Blog — index (listing) + single (post).

    Faithful port of the PD wireframes (PD-Blog.html / PD-Blog-Post.html), built
    token-pure: every colour comes from a --brand-* / --blog-* / existing token,
    so body.brand-{slug} reskins the whole blog with zero overrides here. Layout
    rhythm + sizing stay as SCSS structural variables (shared across brands).

    Sections:
      1. Shared layout container (1440 wireframe band)
      2. Index — featured / filters / grid / blog-card / pagination
      3. Single — progress bar / hero / article body / sidebar / author bio / related / tour CTA
      4. Avatars (shared)
      5. Responsive (992 / 768 / 480)
*/
/* The wireframe's full-width 1440 content band (the bootstrap .container is
   narrower; the blog matches the hero's own 1440 layout instead). */
.blog-container {
  width: 100%;
  max-width: 1440px;
  margin: 0 auto;
  padding: 0 48px;
}

.is-hidden {
  display: none !important;
}

/* ==========================================================================
   INDEX — FEATURED POST
   ========================================================================== */
.blog-featured-section {
  background: var(--surface);
  padding: 64px 0;
}

.blog-featured-card {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  min-height: 360px;
  border: 1px solid var(--brand-border);
  border-radius: 14px;
  overflow: hidden;
  background: var(--surface);
  transition: box-shadow 0.3s cubic-bezier(0.23, 1, 0.32, 1);
}
.blog-featured-card:hover {
  box-shadow: var(--shadow-dropdown);
}

.blog-featured-img {
  position: relative;
  min-height: 360px;
  background-color: var(--surface-tint);
  background-size: cover;
  background-position: center;
  display: block;
}

.blog-featured-body {
  padding: 40px 36px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.blog-featured-body h2 {
  font-size: 28px;
  font-weight: 700;
  color: var(--brand-deep);
  line-height: 1.35;
  margin: 0 0 14px;
}
.blog-featured-body h2 a {
  color: inherit;
  text-decoration: none;
  transition: color 0.2s cubic-bezier(0.23, 1, 0.32, 1);
}
.blog-featured-body h2 a:hover {
  color: var(--brand-sky-text);
}

/* The category eyebrow (shared look across featured + cards). */
.bf-cat,
.bl-cat {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1.8px;
  color: var(--brand-sky-text);
  margin-bottom: 14px;
  display: inline-block;
  position: relative;
  padding-left: 20px;
}
.bf-cat::before,
.bl-cat::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 12px;
  height: 1px;
  background: var(--brand-sky);
}

.bf-excerpt {
  font-size: 15px;
  color: var(--text-muted);
  line-height: 1.7;
  margin-bottom: 20px;
}

.bf-meta {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 24px;
}

.bf-author-info {
  font-size: 13px;
  line-height: 1.4;
  display: flex;
  flex-direction: column;
}

.bf-author-name {
  font-weight: 600;
  color: var(--brand-deep);
}

.bf-date {
  color: var(--text-muted);
}

.bf-cta {
  width: fit-content;
}

/* ==========================================================================
   INDEX — CATEGORY FILTER PILLS
   ========================================================================== */
.blog-filters {
  background: var(--surface);
  border-bottom: 1px solid var(--brand-border);
  padding: 0 0 28px;
}

.blog-pills {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 10px;
}

.blog-pill {
  padding: 9px 20px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.5px;
  color: var(--text-muted);
  background: var(--surface-tint);
  border: 1px solid var(--brand-border);
  cursor: pointer;
  text-transform: none;
  white-space: nowrap;
  transition: background-color 0.2s cubic-bezier(0.23, 1, 0.32, 1), border-color 0.2s cubic-bezier(0.23, 1, 0.32, 1), color 0.2s cubic-bezier(0.23, 1, 0.32, 1);
}
.blog-pill:hover {
  background: var(--surface-tint);
  border-color: var(--brand-sky);
  color: var(--brand-deep);
}
.blog-pill.active {
  background: var(--brand-deep);
  color: var(--text-on-dark);
  border-color: var(--brand-deep);
}
.blog-pill:active {
  transform: scale(0.97);
}

/* ==========================================================================
   INDEX — POST GRID + BLOG CARD
   ========================================================================== */
.blog-grid-section {
  background: var(--surface-tint);
  padding: 64px 0 80px;
}

.blog-listing-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}

.bl-card {
  border: 1px solid var(--brand-border);
  border-radius: 12px;
  overflow: hidden;
  background: var(--surface);
  display: flex;
  flex-direction: column;
  transition: box-shadow 0.3s cubic-bezier(0.23, 1, 0.32, 1), transform 0.3s cubic-bezier(0.23, 1, 0.32, 1);
}
.bl-card:hover {
  box-shadow: var(--shadow-dropdown);
  transform: translateY(-3px);
}

.bl-card-img {
  height: 210px;
  background-color: var(--surface-tint);
  background-size: cover;
  background-position: center;
  position: relative;
  display: block;
}

.bl-cat-tag {
  position: absolute;
  bottom: 12px;
  left: 12px;
  background: var(--blog-cat-pill-bg);
  color: var(--text-on-dark);
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  padding: 5px 12px;
  border-radius: 999px;
}

.bl-card-body {
  padding: 24px;
  display: flex;
  flex-direction: column;
  flex: 1;
}
.bl-card-body .bl-cat {
  margin-bottom: 10px;
}

.bl-card-title {
  font-size: 20px;
  font-weight: 600;
  color: var(--brand-deep);
  line-height: 1.4;
  margin: 0 0 10px;
}
.bl-card-title a {
  color: inherit;
  text-decoration: none;
  transition: color 0.2s cubic-bezier(0.23, 1, 0.32, 1);
}
.bl-card-title a:hover {
  color: var(--brand-sky-text);
}

.bl-excerpt {
  font-size: 14px;
  color: var(--text-muted);
  line-height: 1.65;
  margin-bottom: 16px;
  flex: 1;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.bl-excerpt:has(.blog-excerpt-lead) {
  -webkit-line-clamp: 4;
  line-clamp: 4;
}

.blog-excerpt-lead {
  display: block;
  margin-bottom: 4px;
  font-weight: 600;
  color: var(--brand-deep);
}

.bl-card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 14px;
  border-top: 1px solid var(--brand-border);
}

.bl-author {
  display: flex;
  align-items: center;
  gap: 10px;
}

.bl-author-info {
  font-size: 12px;
  line-height: 1.4;
  display: flex;
  flex-direction: column;
}
.bl-author-info .bl-name {
  font-weight: 600;
  color: var(--brand-deep);
}
.bl-author-info .bl-date {
  color: var(--text-muted);
}

.bl-read-more {
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1.2px;
  color: var(--brand-sky-text);
  text-decoration: none;
  white-space: nowrap;
  transition: color 0.2s cubic-bezier(0.23, 1, 0.32, 1);
}
.bl-read-more:hover {
  color: var(--brand-deep);
}

/* ---- No-results + empty states ---- */
.blog-no-results {
  display: none;
  grid-column: 1/-1;
  text-align: center;
  padding: 64px 24px;
  color: var(--text-muted);
  font-size: 17px;
  line-height: 1.6;
}
.blog-no-results.is-shown {
  display: block;
}
.blog-no-results strong {
  display: block;
  font-size: 20px;
  color: var(--brand-deep);
  margin-bottom: 8px;
}

.blog-empty {
  text-align: center;
  padding: 64px 24px 48px;
  color: var(--text-muted);
}
.blog-empty p {
  max-width: 32em;
  margin: 0 auto 24px;
  text-wrap: pretty;
}

.blog-empty__title {
  margin: 0 0 10px;
  font-family: var(--font-body);
  font-size: clamp(1.5rem, 2.6vw, 2rem);
  font-weight: 700;
  line-height: 1.2;
  color: var(--brand-deep);
  text-wrap: balance;
}

/* The newest stories offered under an empty category / tag / author. */
.blog-empty__latest {
  margin-top: 0;
  padding-top: 48px;
  border-top: 1px solid var(--brand-border);
}

.blog-empty__more {
  margin: 48px 0 0;
  text-align: center;
}

/* ---- Pagination ---- */
.blog-pagination {
  margin-top: 48px;
}
.blog-pagination .page-numbers {
  list-style: none;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 8px;
  padding: 0;
  margin: 0;
}
.blog-pagination a.page-numbers,
.blog-pagination span.page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 42px;
  height: 42px;
  padding: 0 12px;
  border-radius: 999px;
  border: 1px solid var(--brand-border);
  background: var(--surface);
  color: var(--brand-deep);
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  transition: background-color 0.2s cubic-bezier(0.23, 1, 0.32, 1), border-color 0.2s cubic-bezier(0.23, 1, 0.32, 1), color 0.2s cubic-bezier(0.23, 1, 0.32, 1);
}
.blog-pagination a.page-numbers:hover {
  border-color: var(--brand-sky);
  background: var(--surface-tint);
}
.blog-pagination span.page-numbers.current {
  background: var(--brand-deep);
  color: var(--text-on-dark);
  border-color: var(--brand-deep);
}

/* ==========================================================================
   SINGLE — READING PROGRESS BAR
   ========================================================================== */
.reading-progress {
  position: fixed;
  top: 0;
  left: 0;
  width: 0;
  height: 3px;
  background: var(--blog-progress);
  z-index: 150;
  transition: width 0.1s linear;
}

/* ==========================================================================
   SINGLE — HERO
   ========================================================================== */
.blog-post-hero {
  position: relative;
  min-height: 500px;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  background: var(--brand-deep);
}
.blog-post-hero .blog-hero-image {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center 35%;
}
.blog-post-hero .blog-hero-image::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--hero-scrim-text), var(--blog-hero-scrim);
}
.blog-post-hero .blog-hero-content {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 1440px;
  margin: 0 auto;
  padding: 80px 48px 64px;
}

.blog-breadcrumb {
  font-size: var(--hero-crumb-size);
  font-weight: var(--hero-crumb-weight);
  letter-spacing: var(--hero-crumb-tracking);
  text-transform: none;
  color: var(--hero-crumb-fg);
  margin-bottom: 20px;
}
.blog-breadcrumb a,
.blog-breadcrumb span {
  color: inherit;
  text-decoration: none;
  transition: color 0.2s;
}
.blog-breadcrumb a:hover {
  color: var(--text-on-dark);
}
.blog-breadcrumb .separator {
  margin: 0 8px;
  opacity: 0.4;
}

.blog-category-pill {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 2px;
  color: var(--text-on-dark);
  background: var(--blog-cat-pill-bg);
  padding: 5px 14px;
  border-radius: 999px;
  margin-bottom: 18px;
  text-decoration: none;
}

.blog-post-title {
  font-size: 44px;
  color: var(--text-on-dark);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.5px;
  margin: 0 0 24px;
  max-width: 800px;
}

.blog-author-row {
  display: flex;
  align-items: center;
  gap: 14px;
  color: var(--text-on-dark-muted);
  font-size: 14px;
}

.blog-author-avatar {
  width: 44px;
  height: 44px;
  border: 2px solid var(--text-on-dark);
  flex-shrink: 0;
  font-size: 16px;
}

.blog-author-name {
  font-weight: 600;
  color: var(--text-on-dark);
}

.blog-author-meta {
  display: flex;
  align-items: center;
  gap: 8px;
}
.blog-author-meta .dot {
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: var(--text-on-dark-muted);
}

/* ==========================================================================
   SINGLE — ARTICLE LAYOUT + BODY
   ========================================================================== */
.blog-article-section {
  padding: 64px 0 80px;
  background: var(--surface);
}

.blog-article-layout {
  display: grid;
  grid-template-columns: 1fr 340px;
  gap: 60px;
  max-width: 1440px;
  margin: 0 auto;
  padding: 0 48px;
  /* Let the grid items shrink below their content's intrinsic width — without
     this, a wide block (code / table) keeps min-width:auto and bleeds the
     column off the right on mobile. Wide blocks then scroll internally. */
}
.blog-article-layout > * {
  min-width: 0;
}

.blog-article {
  max-width: 720px;
  min-width: 0;
  /* The lead paragraph: WP outputs the first paragraph; style by position
     and the editor-set .lead-paragraph class alike. */
  /* Photo slider: a run of images in a post (functions/blog-slider.php).
     A scroll-snap track, one photo per view, every photo cropped to the same
     3:2 so the arrows and the caption line never jump. The arrows sit on the
     photo's vertical middle: 100cqw / 3 is half of a 3:2 photo's height. */
}
.blog-article p {
  font-size: 17px;
  line-height: 1.8;
  color: var(--text-primary);
  margin-bottom: 24px;
  letter-spacing: 0.2px;
}
.blog-article h2 {
  font-size: 28px;
  font-weight: 700;
  color: var(--brand-deep);
  margin-top: 48px;
  margin-bottom: 18px;
  line-height: 1.3;
  padding-bottom: 12px;
  border-bottom: 2px solid var(--surface-tint);
  scroll-margin-top: 90px;
}
.blog-article h3 {
  font-size: 22px;
  font-weight: 600;
  color: var(--text-primary);
  margin-top: 32px;
  margin-bottom: 14px;
  line-height: 1.35;
}
.blog-article .lead-paragraph, .blog-article > p:first-child {
  font-size: 19px;
  line-height: 1.75;
  color: var(--brand-deep);
  font-weight: 400;
}
.blog-article img {
  width: 100%;
  height: auto;
  border-radius: 10px;
  margin: 32px 0 8px;
  display: block;
}
.blog-article figure {
  margin: 32px 0;
}
.blog-article figure img {
  margin: 0;
}
.blog-article .post-slider {
  position: relative;
  container-type: inline-size;
  margin: 32px 0;
}
.blog-article .post-slider__track {
  display: flex;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  border-radius: 10px;
  -webkit-overflow-scrolling: touch;
}
.blog-article .post-slider__track::-webkit-scrollbar {
  display: none;
}
.blog-article .post-slider__track:focus-visible {
  outline: 2px solid var(--brand-sky);
  outline-offset: 3px;
}
.blog-article .post-slider__slide {
  flex: 0 0 100%;
  min-width: 0;
  scroll-snap-align: start;
  scroll-snap-stop: always;
}
.blog-article .post-slider__slide figure {
  margin: 0;
}
.blog-article .post-slider__slide img {
  width: 100%;
  height: auto;
  aspect-ratio: 3/2;
  object-fit: cover;
  border-radius: 10px;
  margin: 0;
}
.blog-article .post-slider__btn {
  position: absolute;
  top: calc(33.3333333333cqw - 22px);
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  color: var(--brand-deep);
  cursor: pointer;
  background: color-mix(in srgb, var(--surface) 88%, transparent);
  border: 0;
  border-radius: 50%;
  box-shadow: 0 2px 10px color-mix(in srgb, var(--brand-ink) 18%, transparent);
  backdrop-filter: blur(6px);
  transition: background 0.2s, transform 0.16s cubic-bezier(0.23, 1, 0.32, 1);
}
.blog-article .post-slider__btn svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.blog-article .post-slider__btn:hover {
  background: var(--surface);
}
.blog-article .post-slider__btn:active {
  transform: scale(0.92);
}
.blog-article .post-slider__btn:focus-visible {
  outline: 2px solid var(--brand-sky);
  outline-offset: 2px;
}
.blog-article .post-slider__btn--prev {
  left: 14px;
}
.blog-article .post-slider__btn--next {
  right: 14px;
}
.blog-article .post-slider__count {
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 2;
  padding: 3px 10px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.5px;
  color: var(--text-on-dark);
  background: color-mix(in srgb, var(--brand-ink) 55%, transparent);
  border-radius: 50px;
}
.blog-article figcaption,
.blog-article .img-caption,
.blog-article .wp-caption-text {
  font-size: 13px;
  color: var(--text-muted);
  text-align: center;
  margin-top: 10px;
  margin-bottom: 0;
  font-style: italic;
}
.blog-article ul {
  list-style: none;
  padding: 0;
  margin: 0 0 24px;
}
.blog-article ul li {
  font-size: 17px;
  line-height: 1.8;
  color: var(--text-primary);
  padding-left: 24px;
  position: relative;
  margin-bottom: 8px;
}
.blog-article ul li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 12px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--brand-sky);
}
.blog-article ol {
  padding-left: 22px;
  margin: 0 0 24px;
}
.blog-article ol li {
  font-size: 17px;
  line-height: 1.8;
  color: var(--text-primary);
  margin-bottom: 8px;
}
.blog-article a:not(.btn):not(.wp-block-button__link):not(.wp-element-button):not(.ft-link) {
  color: var(--brand-sky-text);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.blog-article a:not(.btn):not(.wp-block-button__link):not(.wp-element-button):not(.ft-link):hover {
  color: var(--brand-deep);
}
.blog-article blockquote {
  background: var(--surface-tint);
  border-left: 4px solid var(--brand-sky);
  padding: 28px 32px;
  margin: 36px 0;
  border-radius: 0 10px 10px 0;
}
.blog-article blockquote p {
  font-size: 19px;
  font-style: italic;
  color: var(--brand-deep);
  line-height: 1.7;
  margin-bottom: 0;
}

/* The editor's pull-quote class mirrors blockquote. */
.blog-pull-quote {
  background: var(--surface-tint);
  border-left: 4px solid var(--brand-sky);
  padding: 28px 32px;
  margin: 36px 0;
  border-radius: 0 10px 10px 0;
}
.blog-pull-quote p {
  font-size: 19px;
  font-style: italic;
  color: var(--brand-deep);
  line-height: 1.7;
  margin-bottom: 0;
}

/* ---------------------------------------------------------------------------
   Core Gutenberg blocks (editor output) — brand-styled so a content editor's
   blocks match the theme. Token-pure; every colour via var(--brand-*) / surface
   tokens, so they repaint per brand.
   --------------------------------------------------------------------------- */
.blog-article {
  /* Pull-quote — brand accent bar + tint, overriding the core centred style. */
  /* Quote citation. */
  /* Tables. */
  /* Code. */
  /* Buttons — brand gradient primary + outline (mirrors .btn). The `a` in the
     selector lifts specificity above the article link rule. */
  /* Separator. */
  /* Columns stack on mobile. */
}
.blog-article .wp-block-pullquote {
  border: 0;
  border-left: 4px solid var(--brand-sky);
  background: var(--surface-tint);
  border-radius: 0 10px 10px 0;
  padding: 28px 32px;
  margin: 36px 0;
  text-align: left;
}
.blog-article .wp-block-pullquote blockquote {
  background: none;
  border: 0;
  padding: 0;
  margin: 0;
  border-radius: 0;
}
.blog-article .wp-block-pullquote p {
  font-size: 22px;
  font-style: italic;
  color: var(--brand-deep);
  line-height: 1.6;
  margin-bottom: 8px;
}
.blog-article .wp-block-pullquote cite {
  display: block;
  font-size: 14px;
  font-style: normal;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 1px;
}
.blog-article .wp-block-quote cite,
.blog-article blockquote cite {
  display: block;
  margin-top: 10px;
  font-size: 14px;
  font-style: normal;
  color: var(--text-muted);
}
.blog-article .wp-block-table {
  margin: 32px 0;
  overflow-x: auto;
}
.blog-article .wp-block-table table {
  width: 100%;
  border-collapse: collapse;
  font-size: 16px;
}
.blog-article .wp-block-table th,
.blog-article .wp-block-table td {
  padding: 12px 16px;
  border: 1px solid var(--brand-border);
  text-align: left;
  line-height: 1.6;
  color: var(--text-primary);
}
.blog-article .wp-block-table thead th {
  background: var(--surface-tint);
  color: var(--brand-deep);
  font-weight: 700;
}
.blog-article .wp-block-table tbody tr:nth-child(even) td {
  background: color-mix(in srgb, var(--surface-tint) 45%, transparent);
}
.blog-article .wp-block-code,
.blog-article pre {
  background: var(--brand-deep);
  color: var(--text-on-dark);
  border-radius: 10px;
  padding: 20px 24px;
  margin: 32px 0;
  overflow-x: auto;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 14px;
  line-height: 1.7;
}
.blog-article .wp-block-code code,
.blog-article pre code {
  font-family: inherit;
  color: inherit;
  background: none;
  padding: 0;
}
.blog-article .wp-block-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin: 32px 0;
}
.blog-article a.wp-block-button__link {
  display: inline-block;
  padding: 14px 30px;
  border-radius: 50px;
  font-weight: 600;
  font-size: 16px;
  text-decoration: none;
  background: var(--gradient-button);
  background-origin: border-box;
  color: var(--gradient-button-fg);
  border: 2px solid transparent;
  transition: transform 0.2s cubic-bezier(0.23, 1, 0.32, 1), box-shadow 0.2s ease;
}
.blog-article a.wp-block-button__link:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-cta);
  color: var(--gradient-button-fg);
}
.blog-article .wp-block-button.is-style-outline a.wp-block-button__link {
  background: none;
  color: var(--brand-deep);
  border-color: var(--brand-deep);
}
.blog-article .wp-block-button.is-style-outline a.wp-block-button__link:hover {
  background: var(--brand-deep);
  color: var(--text-on-dark);
}
.blog-article .wp-block-separator {
  border: 0;
  height: 1px;
  background: var(--brand-border);
  margin: 48px auto;
}
.blog-article .wp-block-separator:not(.alignwide):not(.is-style-wide) {
  max-width: 100px;
}
@media (max-width: 768px) {
  .blog-article .wp-block-columns {
    flex-wrap: wrap;
    gap: 0;
  }
  .blog-article .wp-block-column {
    flex-basis: 100% !important;
  }
}

/* Inline tour CTA inside the article body (editor block). */
.blog-inline-tour {
  display: flex;
  gap: 20px;
  background: var(--surface-tint);
  border: 1px solid var(--brand-border);
  border-radius: 12px;
  padding: 18px;
  margin: 32px 0;
  align-items: center;
  transition: box-shadow 0.2s cubic-bezier(0.23, 1, 0.32, 1);
}
.blog-inline-tour:hover {
  box-shadow: var(--shadow-dropdown);
}
.blog-inline-tour .blog-inline-tour-img {
  width: 140px;
  height: 100px;
  border-radius: 8px;
  background-color: var(--surface);
  background-size: cover;
  background-position: center;
  flex-shrink: 0;
}
.blog-inline-tour .blog-inline-tour-name {
  font-size: 16px;
  font-weight: 700;
  color: var(--brand-deep);
  margin-bottom: 4px;
}
.blog-inline-tour .blog-inline-tour-meta {
  font-size: 13px;
  color: var(--text-muted);
  margin-bottom: 10px;
}
.blog-inline-tour .blog-inline-tour-cta {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1.2px;
  color: var(--brand-sky-text);
  text-decoration: none;
  transition: color 0.2s cubic-bezier(0.23, 1, 0.32, 1);
}
.blog-inline-tour .blog-inline-tour-cta:hover {
  color: var(--brand-deep);
}
.blog-inline-tour .blog-inline-tour-cta svg {
  width: 14px;
  height: 14px;
}

/* ==========================================================================
   SINGLE — STICKY SIDEBAR
   ========================================================================== */
.blog-sidebar {
  position: relative;
}

.blog-sidebar-inner {
  /* The author card scrolls away; the TOC + Related Tours + Share follow you
     down (they live in .blog-sidebar-follow, which is sticky). height:100%
     (the grid cell stretches to the article height) gives that group room to
     travel the length of the article. */
  display: flex;
  flex-direction: column;
  gap: 28px;
  height: 100%;
}

/* The sticky group — everything except the author card follows on scroll.
   A tall group scrolls internally rather than overflowing the viewport. */
.blog-sidebar-follow {
  position: sticky;
  top: 80px;
  display: flex;
  flex-direction: column;
  gap: 28px;
  /* No internal scroll. A group taller than the viewport stays reachable
     anyway: sticky is bounded by .blog-sidebar-inner, so the tail scrolls
     into view as you reach the end of the article. */
}

.sidebar-share, .sidebar-tours, .sidebar-toc {
  background: var(--surface);
  border: 1px solid var(--brand-border);
  border-radius: 14px;
  padding: 24px;
}

.sidebar-share .sidebar-share-title, .sidebar-tours .sidebar-tours-title, .sidebar-toc .sidebar-toc-title {
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  color: var(--brand-deep);
  margin-bottom: 16px;
}

.sidebar-toc .sidebar-toc-title {
  padding-bottom: 12px;
  border-bottom: 1px solid var(--brand-border);
}

.sidebar-toc-list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.sidebar-toc-list li {
  margin-bottom: 2px;
}
.sidebar-toc-list a {
  display: block;
  font-size: 14px;
  color: var(--text-muted);
  text-decoration: none;
  padding: 7px 12px;
  border-radius: 6px;
  border-left: 2px solid transparent;
  line-height: 1.4;
  transition: background-color 0.2s cubic-bezier(0.23, 1, 0.32, 1), color 0.2s cubic-bezier(0.23, 1, 0.32, 1), border-color 0.2s cubic-bezier(0.23, 1, 0.32, 1);
}
.sidebar-toc-list a:hover {
  color: var(--brand-deep);
  background: var(--surface-tint);
}
.sidebar-toc-list a.active {
  color: var(--brand-deep);
  font-weight: 600;
  border-left-color: var(--brand-sky);
  background: var(--surface-tint);
}

.sidebar-tours .sidebar-tours-title {
  padding-bottom: 12px;
  border-bottom: 1px solid var(--brand-border);
}

.sidebar-mini-tour {
  display: flex;
  gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid var(--surface-tint);
  align-items: center;
  text-decoration: none;
}
.sidebar-mini-tour:last-child {
  border-bottom: none;
  padding-bottom: 0;
}
.sidebar-mini-tour .sidebar-mini-tour-img {
  width: 70px;
  height: 52px;
  border-radius: 8px;
  background-color: var(--surface-tint);
  background-size: cover;
  background-position: center;
  flex-shrink: 0;
}
.sidebar-mini-tour .sidebar-mini-tour-name {
  display: block;
  font-size: 14px;
  font-weight: 600;
  color: var(--brand-deep);
  margin-bottom: 2px;
}
.sidebar-mini-tour .sidebar-mini-tour-meta {
  display: block;
  font-size: 12px;
  color: var(--text-muted);
}

.sidebar-share-icons {
  display: flex;
  gap: 10px;
}
.sidebar-share-icons a {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid var(--brand-border);
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  color: var(--text-muted);
  transition: background-color 0.2s cubic-bezier(0.23, 1, 0.32, 1), border-color 0.2s cubic-bezier(0.23, 1, 0.32, 1), color 0.2s cubic-bezier(0.23, 1, 0.32, 1);
}
.sidebar-share-icons a:hover {
  border-color: var(--brand-sky);
  background: var(--surface-tint);
  color: var(--brand-deep);
}
.sidebar-share-icons a svg {
  width: 18px;
  height: 18px;
}

/* ==========================================================================
   SINGLE — AUTHOR BIO BAND
   ========================================================================== */
.blog-author-bio-section {
  background: var(--surface-tint);
  padding: 80px 0;
}

.blog-author-bio-inner {
  display: flex;
  gap: 32px;
  align-items: flex-start;
  background: var(--surface);
  border: 1px solid var(--brand-border);
  border-radius: 14px;
  padding: 36px;
}

.blog-author-bio-avatar {
  width: 96px;
  height: 96px;
  flex-shrink: 0;
  font-size: 32px;
}

.blog-author-bio-content {
  flex: 1;
}

.blog-author-bio-label {
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  color: var(--brand-sky-text);
  margin-bottom: 6px;
}

.blog-author-bio-name {
  font-size: 22px;
  font-weight: 700;
  color: var(--brand-deep);
  margin-bottom: 4px;
}

.blog-author-bio-role {
  font-size: 14px;
  color: var(--text-muted);
  margin-bottom: 14px;
}

.blog-author-bio-text {
  font-size: 15px;
  line-height: 1.7;
  color: var(--text-primary);
  margin-bottom: 20px;
}

.blog-author-recent-label {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  color: var(--brand-deep);
  margin-bottom: 10px;
}

.blog-author-recent-posts {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
}
.blog-author-recent-posts a {
  font-size: 14px;
  color: var(--brand-sky-text);
  text-decoration: none;
  transition: color 0.2s ease;
}
.blog-author-recent-posts a:hover {
  color: var(--brand-deep);
}

/* ==========================================================================
   SINGLE — RELATED POSTS (reuses .bl-card via blog-card partial)
   ========================================================================== */
.blog-related-section {
  padding: 80px 0;
  background: var(--surface);
}

.blog-related-header {
  margin-bottom: 48px;
}
.blog-related-header h2 {
  font-family: var(--font-display);
  font-size: 44px;
  font-weight: 400;
  color: var(--brand-deep);
  margin-bottom: 8px;
}
.blog-related-header p {
  font-size: 16px;
  color: var(--text-muted);
  margin: 0;
}

.blog-related-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}

/* ==========================================================================
   SINGLE — CLOSING TOUR CTA BAND
   ========================================================================== */
.blog-tour-cta-section {
  background: var(--surface-tint);
  padding: 80px 0;
}

.blog-tour-cta-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  align-items: center;
}

.blog-tour-cta-text h2 {
  font-family: var(--font-display);
  font-size: 44px;
  font-weight: 400;
  color: var(--brand-deep);
  margin-bottom: 14px;
}
.blog-tour-cta-text p {
  font-size: 17px;
  color: var(--text-muted);
  line-height: 1.7;
  margin-bottom: 28px;
}

.blog-tour-cta-buttons {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
}

.blog-tour-cta-card {
  background: var(--surface);
  border: 1px solid var(--brand-border);
  border-radius: 14px;
  overflow: hidden;
  display: block;
  text-decoration: none;
  transition: box-shadow 0.25s cubic-bezier(0.23, 1, 0.32, 1), transform 0.25s cubic-bezier(0.23, 1, 0.32, 1);
}
.blog-tour-cta-card:hover {
  box-shadow: var(--shadow-dropdown);
  transform: translateY(-4px);
}

.blog-tour-cta-card-img {
  display: block;
  height: 200px;
  background-color: var(--surface-tint);
  background-size: cover;
  background-position: center;
}

.blog-tour-cta-card-body {
  display: block;
  padding: 22px 24px;
}

.blog-tour-cta-card-badge {
  display: block;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1.8px;
  color: var(--brand-sky-text);
  margin-bottom: 6px;
}

.blog-tour-cta-card-name {
  display: block;
  font-size: 22px;
  font-weight: 700;
  color: var(--brand-deep);
  margin-bottom: 6px;
}

.blog-tour-cta-card-desc {
  display: block;
  font-size: 14px;
  color: var(--text-muted);
  line-height: 1.55;
  margin-bottom: 16px;
}

.blog-tour-cta-card-link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1.2px;
  color: var(--brand-sky-text);
}
.blog-tour-cta-card-link svg {
  width: 14px;
  height: 14px;
}

/* ==========================================================================
   SHARED — AUTHOR AVATARS (index + single)
   The PHP renders either a <img class="bl-avatar-img"> or an initials span.
   ========================================================================== */
.bf-avatar,
.bl-avatar,
.blog-author-avatar,
.blog-author-bio-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  overflow: hidden;
  background: var(--blog-avatar-bg);
  color: var(--blog-avatar-fg);
  font-weight: 700;
  flex-shrink: 0;
}

.bf-avatar {
  width: 36px;
  height: 36px;
  font-size: 13px;
  color: var(--text-on-dark);
}

.bl-avatar {
  width: 32px;
  height: 32px;
  font-size: 12px;
  color: var(--text-on-dark);
}

.bl-avatar-img,
.blog-author-avatar img,
.blog-author-bio-avatar img,
.bf-avatar img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* With a photo, swap the dark initials ground for white: whatever sits behind
   the photo shows through its anti-aliased edge, and dark read as a smudgy
   line inside the circle. Headshots are on white, so white disappears. The
   parent's overflow + radius does the clipping; the img needs no radius. */
.bf-avatar:has(img),
.bl-avatar:has(img),
.blog-author-avatar:has(img),
.blog-author-bio-avatar:has(img) {
  background: var(--surface);
}

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width: 992px) {
  /* Tablet */
  .blog-container {
    padding: 0 32px;
  }
  .blog-featured-section {
    padding: 48px 0;
  }
  .blog-featured-body {
    padding: 32px 28px;
  }
  .blog-featured-body h2 {
    font-size: 24px;
  }
  .blog-listing-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
  }
  .blog-grid-section {
    padding: 48px 0 64px;
  }
  /* Single — sidebar drops below the article, TOC becomes a horizontal rail. */
  .blog-article-layout {
    grid-template-columns: 1fr;
    gap: 48px;
    padding: 0 32px;
  }
  /* The whole sidebar dissolves into the article grid so each card becomes a
     grid item. The TOC then lifts ABOVE the article (order:-1) — it makes no
     sense buried at the very bottom — while the author, tours and share cards
     stack below the content in their natural DOM order. */
  .blog-sidebar,
  .blog-sidebar-inner,
  .blog-sidebar-follow {
    display: contents;
  }
  /* The hoisted cards now share the article's single grid column, so they need
     min-width:0 too (the `.blog-article-layout > *` rule can't reach them past
     the display:contents wrappers) — otherwise a card's intrinsic width
     inflates the shared column and the article bleeds off the right again. */
  .sidebar-toc,
  .sidebar-tours,
  .sidebar-share {
    min-width: 0;
  }
  .sidebar-toc {
    order: -1;
  }
  .sidebar-toc-list {
    display: flex;
    gap: 4px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 6px;
  }
  .sidebar-toc-list li {
    margin-bottom: 0;
    flex-shrink: 0;
  }
  .sidebar-toc-list a {
    white-space: nowrap;
    border-left: none;
    border-bottom: 2px solid transparent;
    border-radius: 0;
    padding: 8px 14px;
    font-size: 13px;
  }
  .sidebar-toc-list a.active {
    border-left-color: transparent;
    border-bottom-color: var(--brand-sky);
    background: transparent;
  }
  .blog-related-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .blog-tour-cta-inner {
    grid-template-columns: 1fr;
  }
  .blog-author-bio-inner {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }
}
@media (max-width: 768px) {
  /* Small tablet / large mobile */
  .blog-container {
    padding: 0 20px;
  }
  .blog-featured-card {
    grid-template-columns: 1fr;
  }
  .blog-featured-img {
    min-height: 240px;
  }
  .blog-featured-body {
    padding: 28px 24px;
  }
  .blog-pills {
    gap: 8px;
    overflow-x: auto;
    flex-wrap: nowrap;
    justify-content: flex-start;
    padding-bottom: 4px;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .blog-pills::-webkit-scrollbar {
    display: none;
  }
  .blog-pill {
    padding: 8px 16px;
    font-size: 12px;
  }
  .blog-listing-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
  }
  .blog-post-hero {
    min-height: 420px;
  }
  .blog-post-hero .blog-hero-content {
    padding: 64px 24px 48px;
  }
  .blog-post-title {
    font-size: 30px;
  }
  .blog-article h2 {
    font-size: 24px;
    margin-top: 36px;
  }
  .blog-article h3 {
    font-size: 19px;
  }
  .blog-inline-tour {
    flex-direction: column;
  }
  .blog-inline-tour .blog-inline-tour-img {
    width: 100%;
    height: 140px;
  }
  .blog-related-grid {
    grid-template-columns: 1fr;
  }
  .blog-related-header h2,
  .blog-tour-cta-text h2 {
    font-size: 34px;
  }
  .blog-author-bio-inner {
    padding: 28px 22px;
  }
}
@media (max-width: 576px) {
  /* Mobile */
  .blog-featured-section {
    padding: 36px 0;
  }
  .blog-featured-section h2 {
    font-size: 22px;
  }
  .blog-listing-grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }
  .blog-grid-section {
    padding: 48px 0 64px;
  }
  .bl-card-img,
  .blog-tour-cta-card-img {
    height: 180px;
  }
  .blog-post-hero {
    min-height: 380px;
  }
  .blog-post-title {
    font-size: 26px;
  }
  .blog-article p,
  .blog-article ul li {
    font-size: 16px;
  }
  .blog-article h2 {
    font-size: 22px;
  }
  .blog-article h3 {
    font-size: 18px;
  }
  .blog-article .lead-paragraph, .blog-article > p:first-child {
    font-size: 17px;
  }
  .blog-pull-quote p,
  .blog-article blockquote p {
    font-size: 17px;
  }
}
/* Respect reduced motion: kill the card lift/transform niceties. */
@media (prefers-reduced-motion: reduce) {
  .blog-featured-card,
  .bl-card,
  .blog-tour-cta-card,
  .blog-pill:active {
    transition: none;
    transform: none;
  }
  .reading-progress {
    transition: none;
  }
}