:root {
    --blue-dark:    #004477;
    --blue-mid:     #004477;
    --blue-light:   #006bb3;
    --brand-amber:        #F5A623;
    --brand-amber-hover:  #E8961A;
    --brand-amber-active: #D48510; /* WCAG AA on white / light backgrounds */
    --brand-amber-subtle: #FDF4E3;
    --brand-navy:         #0A2540;
    --brand-navy-hover:   #071A2E;
    --brand-navy-light:   #15375C;
    --white:        #ffffff;
    --cream:        #f7f9f7;
    --ink:          #0d2035;
    --text-on-dark: #e8f0f7;
    --text-muted:   #8aaec4;
    --text-muted-accessible: #b5ceda; /* WCAG AA on #004477 / #004477 */
    --border-dark:  #1a4060;
    --border-light: #d0e0ec;
}

/* =====================================================================
   ACCESSIBILITY: WCAG AA COLOR CONTRAST OVERRIDES
   Tailwind utility classes with low-contrast colors are remapped here
   so we don't have to edit every PHP template. Overrides target the
   TEXT color only — background/border uses of the same shade stay.
   ===================================================================== */

/* Amber #F5A623 as TEXT on light backgrounds — bump to #D48510 (≥4.5:1) */
.text-\[\#F5A623\] {
    color: #D48510 !important;
}

/* Hover state for amber links on light backgrounds — darker for visible feedback */
.hover\:text-\[\#E8961A\]:hover {
    color: #A8690A !important;
}

/* Muted blue-gray #8aaec4 on dark-blue backgrounds — bump to #b5ceda
   (≥6.8:1 on #004477). Applies to footer links, review captions, etc. */
.text-\[\#8aaec4\],
a.text-\[\#8aaec4\],
p.text-\[\#8aaec4\],
span.text-\[\#8aaec4\],
.block.text-\[\#8aaec4\] {
    color: #b5ceda !important;
}

/* Keep mailto hover readable */
footer a[href^="mailto:"]:hover {
    color: #ffffff !important;
}

/* Amber subtle badge: #E8961A text on #FDF4E3 is AA-readable */
.bg-\[\#FDF4E3\].text-\[\#E8961A\],
.bg-\[\#FDF4E3\] .text-\[\#E8961A\],
span.text-\[\#E8961A\] {
    color: #D48510 !important;
}

/* Ink/0.60 opacity body copy on cream — strengthen to 0.75 */
.text-\[\#0d2035\]\/60 {
    color: rgba(13, 32, 53, 0.78) !important;
}
.text-\[\#0d2035\]\/70 {
    color: rgba(13, 32, 53, 0.85) !important;
}

/* Language switcher "EN/DE/ES" active state in nav */
nav .text-\[\#F5A623\].font-bold {
    color: #F5A623 !important;
}

/* Amber BUTTON backgrounds: white label everywhere for one uniform button style
   (per client request). Note: white on amber is below WCAG AA contrast. */
a.bg-\[\#F5A623\],
button.bg-\[\#F5A623\],
.bg-\[\#F5A623\].text-white,
.bg-\[\#F5A623\][class*="text-white"] {
    background-color: #F5A623 !important;
    color: #ffffff !important;
}
a.bg-\[\#F5A623\]:hover,
button.bg-\[\#F5A623\]:hover,
.hover\:bg-\[\#E8961A\]:hover {
    background-color: #E8961A !important;
}

/* Gradient CTA strip (from-[#F5A623] to-[#E8961A]) */
.from-\[\#F5A623\] {
    --tw-gradient-from: #F5A623 !important;
    --tw-gradient-to: rgba(245, 166, 35, 0) !important;
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to) !important;
}
.to-\[\#E8961A\] {
    --tw-gradient-to: #E8961A !important;
}

/* =====================================================================
   UNIFIED BUTTON ROUNDING — rounded-lg (8px) for all CTA buttons
   Covers: green bg buttons, outline buttons, border buttons, submit
   Does NOT affect: rounded-full (avatars, badges, pills)
   ===================================================================== */

/* All amber CTA buttons & links */
a.bg-\[\#F5A623\],
button.bg-\[\#F5A623\],
a.bg-\[\#E8961A\],
button.bg-\[\#E8961A\],
.bg-\[\#F5A623\][class*="font-"],
.bg-\[\#E8961A\][class*="font-"] {
    border-radius: 0.5rem !important; /* rounded-lg = 8px */
}

/* Outline / border buttons (reviews, fleet, etc.) */
a[class*="border-2"][class*="border-\[\#F5A623\]"],
a[class*="border-2"][class*="border-white"],
a[class*="border"][class*="text-\[\#e8f0f7\]"][class*="font-\["],
a.border-2 {
    border-radius: 0.5rem !important;
}

/* Form submit buttons */
button[type="submit"] {
    border-radius: 0.5rem !important;
}

/* Nav CTA "Request a Quote" */
nav a[class*="bg-\[\#F5A623\]"] {
    border-radius: 0.5rem !important;
}

/* Fleet CTA buttons */
.fleet-cta {
    border-radius: 0.5rem !important;
}

/* Cookie banner buttons */
#cookie-banner button {
    border-radius: 0.5rem !important;
}

/* Catch-all: any link/button styled as Oswald uppercase CTA = rounded-lg */
a[class*="font-\[\'Oswald\'\]"][class*="uppercase"],
button[class*="font-\[\'Oswald\'\]"][class*="uppercase"] {
    border-radius: 0.5rem !important;
}

/* Links with border-2 that act as outline buttons */
a[class*="inline-block"][class*="border-2"],
a[class*="inline-flex"][class*="border-2"] {
    border-radius: 0.5rem !important;
}

/* Scrollbar thumb — kept aesthetic, not content */

/* Headings — Oswald */
.heading {
    font-family: 'Oswald', sans-serif;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

/* Italic accent — DM Serif Display */
.italic-accent {
    font-family: 'DM Serif Display', serif;
    font-style: italic;
}

/* Smooth scroll */
html {
    scroll-behavior: smooth;
}

/* ===== MODERN TOUCHES ===== */

/* Subtle gradient backgrounds for sections */
section {
    position: relative;
}


/* Cards get subtle hover lift */
a[class*="border"]:hover,
div[class*="fleet-card"]:hover {
    transform: translateY(-2px);
}

/* Line-clamp (Tailwind plugin not loaded, hand-roll) */
.line-clamp-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.line-clamp-3 {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
@media (min-width: 768px) {
    .md\:line-clamp-none {
        display: block;
        -webkit-line-clamp: unset;
        overflow: visible;
    }
}

/* Gradient text for special headings */
.gradient-text {
    background: linear-gradient(135deg, #F5A623, #0A2540);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Cookie banner: gentle slide-up entrance so it reads as intentional. */
#cookie-banner { animation: cookieSlideUp .45s cubic-bezier(.16,.84,.44,1) both; }
@keyframes cookieSlideUp {
    from { opacity: 0; transform: translateY(1.25rem); }
    to   { opacity: 1; transform: translateY(0); }
}

/* Amber CTAs: refined directional shadow + subtle lift on hover.
   (Replaced the previous 360° 20px glow, which read too loud for a
   premium corporate brand.) */
a[class*="bg-[#F5A623]"],
button[class*="bg-[#F5A623]"] {
    transition: box-shadow .2s ease, transform .2s ease, background-color .2s ease;
}
a[class*="bg-[#F5A623]"]:hover,
button[class*="bg-[#F5A623]"]:hover {
    box-shadow: 0 6px 18px -4px rgba(245, 166, 35, 0.45);
    transform: translateY(-1px);
}
a[class*="bg-[#F5A623]"]:active,
button[class*="bg-[#F5A623]"]:active {
    transform: translateY(0);
    box-shadow: 0 2px 8px -2px rgba(245, 166, 35, 0.4);
}

/* Smooth image loading */
img {
    transition: opacity 0.3s ease;
}

/* ===== FAQ ===== */
/* Smooth height animation via grid-template-rows 0fr->1fr (no max-height cap,
   so long answers never get clipped and the motion stays fluid both ways). */
.faq-answer {
    display: grid;
    grid-template-rows: 0fr;
    opacity: 0;
    transition: grid-template-rows .38s cubic-bezier(.4,0,.2,1), opacity .28s ease;
}
.faq-answer > * { overflow: hidden; min-height: 0; }
.faq-answer.open {
    grid-template-rows: 1fr;
    opacity: 1;
}

/* Hover open removed — FAQ opens on click only */

.faq-toggle svg {
    transition: transform 0.3s ease;
}

.faq-toggle.open svg {
    transform: rotate(180deg);
    color: #F5A623;
}

.faq-toggle.open {
    /* left amber strip removed per request */
}

/* ===== GALLERY ===== */
.gallery-track {
    display: flex;
    transition: transform 0.4s ease;
}

.gallery-track img {
    flex-shrink: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* ===== MEGA MENU ===== */
/* Default: closed state — invisible but kept in DOM for transition */
.mega-dropdown {
    /* Every mega panel is the same width and centered under its own trigger,
       so opening different menus no longer jumps left/right by different amounts. */
    left: 50%;
    opacity: 0;
    transform: translate(-50%, -4px);
    visibility: hidden;
    pointer-events: none;
    transition: opacity 120ms ease-in, transform 120ms ease-in, visibility 0s linear 120ms;
}

/* A small caret centred under the trigger, pointing up at the open tab. */
.mega-dropdown::before {
    content: '';
    position: absolute;
    top: 2px;
    left: 50%;
    transform: translateX(-50%);
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
    border-bottom: 8px solid #0D2846;
    filter: drop-shadow(0 -1px 0 rgba(255,255,255,.14));
    z-index: 1;
}

/* Open state: keyboard focus inside, or JS-added .mega-open.
   (The CSS :hover trigger was removed — JS .mega-open is now the single
   source of truth, so hover and JS can no longer fight and leave a menu
   stuck open when a second one is opened.) */
.mega-parent:focus-within .mega-dropdown,
.mega-parent.mega-open .mega-dropdown {
    opacity: 1;
    transform: translate(-50%, 0);
    visibility: visible;
    pointer-events: auto;
    transition: opacity 200ms cubic-bezier(.16,.84,.44,1), transform 200ms cubic-bezier(.16,.84,.44,1), visibility 0s linear 0s;
}

.mega-parent.mega-open .mega-arrow,
.mega-parent:focus-within .mega-arrow {
    transform: rotate(180deg);
}

/* ===== SERVICES DROPDOWN (dark premium redesign) ===== */
.services-dropdown-panel {
    width: 620px;
    max-width: 620px;
    background:
        radial-gradient(120% 80% at 0% 0%, rgba(245,166,35,.08), transparent 55%),
        linear-gradient(180deg, #0D2846 0%, #0A1F38 100%);
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 14px;
    padding: 22px;
    box-shadow:
        0 24px 60px -18px rgba(0,0,0,.65),
        0 8px 24px -12px rgba(0,0,0,.5),
        inset 0 1px 0 rgba(255,255,255,.06);
    position: relative;
    overflow: hidden;
}
/* amber hairline along the very top edge of the panel */
.services-dropdown-panel::before {
    content: '';
    position: absolute; top: 0; left: 22px; right: 22px; height: 2px;
    background: linear-gradient(90deg, transparent, rgba(245,166,35,.85), transparent);
}

.services-dropdown-label {
    color: #F5A623;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    margin: 0 0 14px 0;
    display: flex;
    align-items: center;
    gap: 8px;
}
.services-dropdown-label::after {
    content: '';
    flex: 1;
    height: 1px;
    background: linear-gradient(90deg, rgba(245,166,35,.35), transparent);
}

.services-dropdown-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4px;
}

.services-dropdown-item {
    display: block;
    position: relative;
    padding: 11px 26px 11px 13px;
    border-radius: 8px;
    text-decoration: none;
    transition: background-color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}
/* sliding chevron that appears on hover — signals "go" */
.services-dropdown-item:not(.services-dropdown-item--flag)::after {
    content: '\203A';
    position: absolute;
    right: 12px; top: 50%;
    transform: translateY(-50%) translateX(-4px);
    color: #F5A623;
    font-size: 16px;
    line-height: 1;
    opacity: 0;
    transition: opacity 160ms ease, transform 160ms ease;
}
.services-dropdown-item:not(.services-dropdown-item--flag):hover::after {
    opacity: 1;
    transform: translateY(-50%) translateX(0);
}

.services-dropdown-title {
    display: block;
    color: #ffffff;
    font-size: 13px;
    font-weight: 500;
    margin-bottom: 2px;
}

.services-dropdown-desc {
    display: block;
    color: rgba(255,255,255,0.5);
    font-size: 11px;
    transition: color 150ms ease;
}

.services-dropdown-item:hover,
.services-dropdown-item.is-active {
    background: linear-gradient(90deg, rgba(245,166,35,0.14), rgba(245,166,35,0.04));
}

.services-dropdown-item:hover .services-dropdown-desc,
.services-dropdown-item.is-active .services-dropdown-desc {
    color: rgba(255,255,255,0.7);
}

.services-dropdown-item:focus-visible {
    outline: 2px solid #F5A623;
    outline-offset: 2px;
}

/* Fleet items with a small vehicle preview photo on the left */
.services-dropdown-item--thumb {
    display: flex;
    align-items: center;
    gap: 11px;
}
.services-dropdown-thumb {
    width: 56px;
    height: 40px;
    object-fit: cover;
    border-radius: 7px;
    flex-shrink: 0;
    border: 1px solid rgba(255,255,255,.14);
    background: #0a1f38;
}
.services-dropdown-text {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.services-dropdown-viewall {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 10px;
    padding: 9px 12px;
    border-radius: 5px;
    color: #F5A623;
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    transition: background-color 150ms ease, gap 150ms ease;
}

.services-dropdown-viewall:hover,
.services-dropdown-viewall.is-active {
    background: rgba(245,166,35,0.10);
    gap: 9px;
}

.services-dropdown-viewall:focus-visible {
    outline: 2px solid #F5A623;
    outline-offset: 2px;
}

/* SEO location section: on mobile the photo should sit ABOVE its text block so
   the reader sees the image first, then reads. On desktop (>= 768px) the
   original left/right zigzag order is restored. Applied to the photo column. */
@media (max-width: 767px) {
    .seo-photo-first { order: -1; }
}

/* Place photo (city/country): cropped to a tidy rectangle, a touch shorter on
   phones so it does not dominate the screen. */
.seo-img-cover {
    width: 100%;
    height: 22rem;
    object-fit: cover;
}
@media (max-width: 767px) {
    .seo-img-cover { height: 15rem; }
}

/* Service photos (the coaches): show the WHOLE vehicle, never crop it. Natural
   aspect ratio inside the rounded card, capped so it stays balanced. */
.seo-img-full {
    display: block;
    width: 100%;
    height: auto;
    object-fit: contain;
}

/* Gallery dots (shared gallery.js): 28px tap target with a small visible dot,
   so the touch area meets accessibility guidance without enlarging the visual. */
.gallery-dot {
    width: 24px;
    height: 24px;
    padding: 0;
    border: none;
    background: none;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.gallery-dot::before {
    content: "";
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #15375C;
    transition: background .2s;
}
.gallery-dot:hover::before,
.gallery-dot.is-active::before { background: #F5A623; }

/* Sticky photo column (desktop only): when the text beside it is taller, the
   photo follows the scroll instead of leaving an empty gap. Disabled on mobile
   where the photo simply sits above the text. */
@media (min-width: 768px) {
    .seo-sticky {
        position: sticky;
        top: 6rem;
        align-self: start;
    }
}

.services-dropdown-footer {
    border-top: 1px solid rgba(255,255,255,0.08);
    margin-top: 16px;
    padding-top: 14px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
}

.services-dropdown-footer--no-cta {
    justify-content: flex-start;
}

.services-dropdown-footer-text {
    color: rgba(255,255,255,0.5);
    font-size: 11px;
}

.services-dropdown-footer-link {
    color: #F5A623;
    font-size: 11px;
    font-weight: 500;
    text-decoration: none;
    transition: color 150ms ease;
}

.services-dropdown-footer-link:hover,
.services-dropdown-footer-link:focus-visible {
    color: #E8961A;
}

/* Network dropdown — two-column layout (Cities + Countries) */
.services-dropdown-network {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
}

/* Flag variant for Network items */
.services-dropdown-item--flag {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
}

.services-dropdown-flag {
    width: 20px;
    height: auto;
    border-radius: 2px;
    flex-shrink: 0;
    box-shadow: 0 1px 2px rgba(0,0,0,0.3);
}

.services-dropdown-item--flag .services-dropdown-title {
    margin-bottom: 0;
    font-size: 13px;
}

.mobile-mega-toggle.open svg {
    transform: rotate(180deg);
}

/* ===== HERO — stronger overlay for text readability ===== */
.hero-overlay {
    background: linear-gradient(to right, rgba(0, 68, 119, 0.95), rgba(0, 68, 119, 0.85)) !important;
}

/* Strengthen ALL hero gradient overlays (inline Tailwind classes) */
section.relative > div.absolute.inset-0[class*="bg-gradient"] {
    opacity: 1 !important;
    background: linear-gradient(to right, rgba(13, 32, 53, 0.95), rgba(0, 68, 119, 0.88), rgba(0, 68, 119, 0.80)) !important;
}

/* ===== LOGO MARQUEE ===== */
.logo-marquee {
    overflow: hidden !important;
    mask-image: linear-gradient(to right, transparent, #000 10%, #000 90%, transparent);
    -webkit-mask-image: linear-gradient(to right, transparent, #000 10%, #000 90%, transparent);
}

.logo-marquee-track {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    gap: 3.5rem !important;
    width: max-content !important;
    animation: marquee 30s linear infinite;
}

.logo-marquee-track img,
img.logo-item {
    display: block !important;
    flex-shrink: 0 !important;
    width: auto !important;
    height: 34px !important;
    max-width: none !important;
    object-fit: contain !important;
    filter: grayscale(1);
    opacity: 0.48;
    transition: opacity 0.35s ease, filter 0.35s ease;
}

.logo-marquee-track img:hover,
img.logo-item:hover {
    opacity: 1;
    filter: grayscale(0);
}

@keyframes marquee {
    0%   { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}

.logo-marquee:hover .logo-marquee-track {
    animation-play-state: paused;
}

/* ===== SCROLL ANIMATIONS ===== */
.fade-up {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.6s ease, transform 0.6s ease;
}

.fade-up.visible {
    opacity: 1;
    transform: translateY(0);
}

/* Stagger children */
.fade-up-stagger > * {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.5s ease, transform 0.5s ease;
}

.fade-up-stagger.visible > *:nth-child(1) { transition-delay: 0s; opacity: 1; transform: translateY(0); }
.fade-up-stagger.visible > *:nth-child(2) { transition-delay: 0.1s; opacity: 1; transform: translateY(0); }
.fade-up-stagger.visible > *:nth-child(3) { transition-delay: 0.2s; opacity: 1; transform: translateY(0); }
.fade-up-stagger.visible > *:nth-child(4) { transition-delay: 0.3s; opacity: 1; transform: translateY(0); }
.fade-up-stagger.visible > *:nth-child(5) { transition-delay: 0.4s; opacity: 1; transform: translateY(0); }
.fade-up-stagger.visible > *:nth-child(6) { transition-delay: 0.5s; opacity: 1; transform: translateY(0); }
.fade-up-stagger.visible > *:nth-child(7) { transition-delay: 0.6s; opacity: 1; transform: translateY(0); }
.fade-up-stagger.visible > *:nth-child(8) { transition-delay: 0.7s; opacity: 1; transform: translateY(0); }

/* Nav shadow on scroll */
nav.scrolled {
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
}

/* Form field validation */
input:invalid:not(:placeholder-shown) {
    border-color: #ef4444 !important;
}

input:valid:not(:placeholder-shown) {
    border-color: #0A2540 !important;
}

/* ===== SCROLLBAR HIDE (for swipe carousels) ===== */
.scrollbar-hide { -ms-overflow-style: none; scrollbar-width: none; }
.scrollbar-hide::-webkit-scrollbar { display: none; }

/* ===== MOBILE IMPROVEMENTS ===== */
@media (max-width: 1023px) {
    /* Desktop mega-dropdown panels carry fixed widths (400/580px) for the
       hover menu. The desktop <ul> is display:none below lg, but the panels
       use visibility:hidden (not display:none), so neutralise their fixed
       width here too — belt-and-braces against horizontal overflow on mobile. */
    .mega-dropdown,
    .services-dropdown-panel {
        display: none !important;
        width: auto !important;
        max-width: 100% !important;
    }
}

@media (max-width: 768px) {
    /* Smaller headings on mobile — responsive scale instead of one flat cap */
    h1 { font-size: clamp(1.5rem, 7vw, 2rem) !important; line-height: 1.18 !important; }
    h2 { font-size: clamp(1.25rem, 5.5vw, 1.5rem) !important; line-height: 1.25 !important; }
    /* Uppercase Oswald headings: tighten tracking so long words don't overflow */
    h1, h2 { letter-spacing: 0 !important; }

    /* Prevent horizontal overflow */
    /* `overflow-x: hidden` on the scrolling element silently kills every
       `position: sticky` descendant, which is why the mobile header did not
       stick. `clip` prevents the same sideways scroll without that side effect. */
    html { overflow-x: clip; }
    body { overflow-x: clip; max-width: 100%; }
    .max-w-7xl { padding-left: 1rem; padding-right: 1rem; box-sizing: border-box; }

    /* ROOT CAUSE FIX for mobile right-edge clipping:
       Tailwind's `grid md:grid-cols-2/3/4` declares display:grid with NO
       column definition below the md breakpoint. The browser then makes a
       single IMPLICIT column sized to its widest content (max-content), so a
       long unbroken review/text block forces the column (and its card) wider
       than the viewport — content gets clipped on the right.
       We target ONLY containers where `grid` is immediately followed by a
       responsive `*:grid-cols-*` with NO base `grid-cols-N` — i.e. the ones
       missing a mobile column count. Grids like `grid-cols-2 md:grid-cols-4`
       already define mobile columns and are intentionally left untouched. */
    [class*="grid md:grid-cols-"],
    [class*="grid sm:grid-cols-"],
    [class*="grid lg:grid-cols-"] {
        grid-template-columns: 1fr !important;
    }
    /* min-w-0 lets grid/flex children actually shrink instead of overflowing */
    .grid > *, .flex > * { min-width: 0; }

    /* Break long words (especially German compound words) */
    p, span, h1, h2, h3, h4, li, a { overflow-wrap: break-word; word-break: break-word; }

    /* Hero form stacks below text on mobile */
    .grid.md\:grid-cols-2 { gap: 1.5rem; }

    /* Make fleet cards full width */
    .fleet-card { min-width: 0; }
    .fleet-gallery { height: 180px !important; }

    /* Logo marquee - smaller on mobile */
    .logo-marquee-track {
        gap: 2rem !important;
        animation-duration: 20s !important;
    }

    .logo-marquee-track img,
    img.logo-item {
        width: auto !important;
        height: 26px !important;
    }

    /* Footer columns */
    footer .grid { gap: 2rem; }

    /* Reduce section padding on mobile (hero excluded) */
    section:not(.hero) { padding-top: 2rem !important; padding-bottom: 2rem !important; }
    section.hero { padding-top: 1rem !important; padding-bottom: 1rem !important; }

    /* Less gap between elements */
    .mb-16 { margin-bottom: 2rem !important; }
    .mb-14 { margin-bottom: 1.5rem !important; }
    .mb-10 { margin-bottom: 1.25rem !important; }
    .gap-16 { gap: 1.5rem !important; }
    .gap-12 { gap: 1.5rem !important; }
    .gap-10 { gap: 1.25rem !important; }
    .gap-8 { gap: 1rem !important; }
    .space-y-16 > * + * { margin-top: 2rem !important; }
    .space-y-12 > * + * { margin-top: 1.5rem !important; }

    /* Country cards: 2 columns grid on mobile */
    .country-card { height: 7rem !important; }
    .grid.sm\:grid-cols-2.lg\:grid-cols-5 {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 0.5rem !important;
    }

    /* Country/city photo cards smaller.
       .h-56 carries the fleet-card and about-page photos. Squashing them to
       10rem made a 358px-wide card letterbox once the cards went full width on
       a phone, so it keeps Tailwind's 14rem. */
    /* .h-56 { height: 10rem !important; } */
    .h-52 { height: 9rem !important; }
    .h-36 { height: 7rem !important; }

    /* Trust badges scroll horizontally if needed */
    .flex-wrap { gap: 0.5rem; }

    /* Breadcrumbs smaller */
    nav + nav { padding: 0.5rem 0; }
}

@media (max-width: 480px) {
    h1 { font-size: 1.75rem !important; }
    .min-h-\[350px\] { min-height: 250px !important; }
    .min-h-\[600px\] { min-height: 350px !important; }
    .py-20 { padding-top: 1.5rem !important; padding-bottom: 1.5rem !important; }
    .py-14 { padding-top: 1.5rem !important; padding-bottom: 1.5rem !important; }
}

/* ===== MAP DOTS ===== */
@keyframes mapPulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(245, 166, 35, 0.5); }
    50% { box-shadow: 0 0 0 10px rgba(245, 166, 35, 0); }
}

.map-dot {
    animation: mapPulse 2.5s ease-in-out infinite;
    cursor: pointer;
}

.map-dot:hover {
    transform: scale(2);
    box-shadow: 0 0 15px rgba(245, 166, 35, 0.6);
}

/* ===== SELECTION COLOR ===== */
::selection {
    background: #F5A623;
    color: #0A2540;
}

/* ===== SCROLLBAR (webkit) ===== */
::-webkit-scrollbar {
    width: 8px;
}
::-webkit-scrollbar-track {
    background: #f7f9f7;
}
::-webkit-scrollbar-thumb {
    background: #8aaec4;
    border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
    background: #004477;
}

/* FIX #9: Process cards — clamp description to 4 lines on tablet (768-1023px)
   Prevents awkward text overflow on DE (30% longer strings). */
@media (min-width: 768px) and (max-width: 1023px) {
    .process-card p {
        display: -webkit-box;
        -webkit-line-clamp: 4;
        -webkit-box-orient: vertical;
        overflow: hidden;
        text-overflow: ellipsis;
    }
}

/* =====================================================================
   PREMIUM POLISH LAYER
   Editorial techniques adapted to the Bus-service brand (navy + amber,
   Oswald + DM Sans). Adds: a signature amber accent rule above section
   headings, fluid heading sizes, slow image-zoom on hover, and refined
   eyebrow labels. Reuses the existing .fade-up scroll-reveal system.
   ===================================================================== */

/* Signature amber rule — placed above section headings as a brand motif.
   Centered variant (.accent-line) and left-aligned (.accent-line-left). */
.accent-line,
.accent-line-left {
    display: block;
    width: 3rem;
    height: 2px;
    background: var(--brand-amber);
    border: 0;
    border-radius: 2px;
}
.accent-line { margin: 0 auto 1.25rem; }
.accent-line-left { margin: 0 0 1.25rem; }

/* Refined eyebrow label (uppercase, wide tracking) — pairs with accent-line.
   Works on light and dark sections via currentColor-friendly amber. */
.eyebrow {
    display: block;
    font-family: 'Oswald', sans-serif;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: var(--brand-amber);
    margin-bottom: 0.85rem;
}

/* Fluid, lighter section headings for a more editorial feel.
   Scoped to .section-title so we never disturb hero/nav type. */
.section-title {
    font-family: 'Oswald', sans-serif;
    font-weight: 600;
    font-size: clamp(1.75rem, 4vw, 2.75rem);
    line-height: 1.1;
    letter-spacing: -0.01em;
    text-transform: uppercase;
}

/* Slow, subtle image zoom on hover — wrap an <img> in .zoom-wrap.
   (scale 1.05 over 700ms, the premium-site default; not a fast 1.1.) */
.zoom-wrap { overflow: hidden; }
.zoom-wrap img {
    transition: transform 0.7s cubic-bezier(0.16, 0.84, 0.44, 1);
    will-change: transform;
}
.zoom-wrap:hover img { transform: scale(1.05); }

/* Respect reduced-motion: disable reveal + zoom for users who ask. */
@media (prefers-reduced-motion: reduce) {
    .fade-up, .fade-up-stagger > * { opacity: 1 !important; transform: none !important; transition: none !important; }
    .zoom-wrap img { transition: none !important; }
    .zoom-wrap:hover img { transform: none !important; }
}

/* =====================================================================
   WARMER PALETTE & SECTION RHYTHM (below the hero)
   Goal: break the "wall of blue". Introduce a warm cream tone so navy
   reads as a deliberate accent, not the default background. Add more
   breathing room and softer, premium card shadows.
   ===================================================================== */

/* Warm cream — used to alternate with white and to separate navy blocks.
   Slightly warmer than the cool #f7f9f7 so the page feels less clinical. */
.bg-cream-warm { background-color: #faf6f0; }
.bg-cream-warm-2 { background-color: #f5efe6; }

/* A hairline top/bottom rule in warm beige to delineate sections softly */
.section-rule-top { border-top: 1px solid #ece3d6; }

/* Premium card: soft, layered shadow + smooth lift. Apply via .card-premium. */
.card-premium {
    background: #fff;
    border: 1px solid #ece3d6;
    border-radius: 14px;
    box-shadow: 0 1px 2px rgba(13,32,53,0.04);
    transition: transform .35s cubic-bezier(.16,.84,.44,1), box-shadow .35s ease, border-color .35s ease;
}
.card-premium:hover {
    transform: translateY(-4px);
    box-shadow: 0 18px 40px -12px rgba(13,32,53,0.16);
    border-color: #F5A623;
}

/* More generous section spacing on desktop for an airy, premium feel */
@media (min-width: 1024px) {
    .py-airy { padding-top: 6.5rem; padding-bottom: 6.5rem; }
}

/* Amber number/eyebrow accents used in editorial section intros */
.lead-amber { color: #D48510; }

/* =====================================================================
   SITE-WIDE CARD ELEVATION (applies to every existing light-bg card)
   Most pages build cards with `border border-[#d0e0ec]`. This gives all of
   them a consistent premium feel: warmer hairline border, soft resting
   shadow, and a smooth lift + amber border on hover. Scoped to light
   sections only (cards on navy/#004477/#0A2540/#004477 keep their own look).
   ===================================================================== */
section:not([class*="bg-[#004477]"]):not([class*="bg-[#0A2540]"]):not([class*="bg-[#004477]"]) [class*="border-[#d0e0ec]"] {
    border-color: #e7ddcf;
    transition: transform .35s cubic-bezier(.16,.84,.44,1), box-shadow .35s ease, border-color .35s ease;
}
/* Give resting cards a barely-there shadow so they lift off the page */
section:not([class*="bg-[#004477]"]):not([class*="bg-[#0A2540]"]):not([class*="bg-[#004477]"]) a[class*="border-[#d0e0ec]"],
section:not([class*="bg-[#004477]"]):not([class*="bg-[#0A2540]"]):not([class*="bg-[#004477]"]) div[class*="border-[#d0e0ec]"][class*="rounded"] {
    box-shadow: 0 1px 2px rgba(13,32,53,0.04);
}
/* Consistent hover for interactive cards on light sections */
section:not([class*="bg-[#004477]"]):not([class*="bg-[#0A2540]"]):not([class*="bg-[#004477]"]) a[class*="border-[#d0e0ec]"]:hover {
    box-shadow: 0 16px 38px -14px rgba(13,32,53,0.18);
    border-color: #F5A623;
    transform: translateY(-3px);
}

/* Warm the cold page background globally (cool #f7f9f7 -> warm cream).
   Tailwind emits bg-[#f7f9f7] as an exact utility; nudge it warmer. */
.bg-\[\#f7f9f7\] { background-color: #faf7f1 !important; }
body.bg-\[\#f7f9f7\], body { background-color: #faf7f1; }

/* Tighten heading rhythm: a touch more space under section eyebrow groups */
.section-title { margin-top: 0.15rem; }

/* Links and amber text get a smooth color transition everywhere */
a { transition: color .2s ease; }

/* Slightly rounder, softer images inside cards for a modern feel */
.card-premium img, [class*="border-[#d0e0ec]"] > .zoom-wrap:first-child img { display:block; }

/* =====================================================================
   VEHICLE PHOTO COLLAGE + LIGHTBOX (individual vehicle pages)
   One large feature photo + a grid of thumbnails, all opening a lightbox.
   ===================================================================== */
/* Mosaic collage: one tall feature photo on the left + a tightly packed
   grid of photos on the right, all filling their tiles edge-to-edge
   (object-fit: cover). Magazine-style, no empty mats. The layout adapts to
   the photo count (data-count) so the grid always fills cleanly. */
.vehicle-collage {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
}
.collage-main,
.collage-thumb {
    position: relative;
    margin: 0; padding: 0; border: 0; cursor: pointer;
    display: block; width: 100%;
    aspect-ratio: 4 / 3;          /* every tile is the SAME shape and size */
    background: #0d2035;
    border-radius: 10px;
    overflow: hidden;
}
.collage-main img,
.collage-thumb img {
    width: 100%; height: 100%;
    object-fit: cover;              /* fill the tile edge to edge */
    transition: transform .6s cubic-bezier(.16,.84,.44,1);
    display: block;
}
.collage-main:hover img,
.collage-thumb:hover img { transform: scale(1.05); }

.collage-badge {
    position: absolute; top: 14px; left: 14px; z-index: 2;
    background: #F5A623; color: #fff;
    font-family: 'Oswald', sans-serif; font-size: 12px; font-weight: 600;
    padding: 4px 11px; border-radius: 4px; letter-spacing: .04em;
}
.collage-more {
    position: absolute; inset: 0;
    background: rgba(10,31,53,.62);
    color: #fff; font-family: 'Oswald', sans-serif;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
    backdrop-filter: blur(1px);
    transition: background .3s ease;
}
.collage-more-num { font-size: 30px; font-weight: 600; line-height: 1; }
.collage-more-label { font-size: 11px; font-weight: 500; text-transform: uppercase; letter-spacing: .08em; opacity: .9; }
.collage-thumb:hover .collage-more { background: rgba(245,166,35,.65); }

/* Uniform gallery: a single row of up to 4 equal 4:3 tiles on desktop and
   tablet, collapsing to a clean 2x2 on mobile. The 4th tile carries the
   "+N more" overlay when the vehicle has more than 4 photos. */
@media (max-width: 640px) {
    .vehicle-collage { grid-template-columns: repeat(2, 1fr); }
}

/* Lightbox */
.vlightbox {
    position: fixed; inset: 0; z-index: 200;
    background: #060d18;                 /* fully opaque, nothing bleeds through */
    display: flex; align-items: center; justify-content: center;
    padding: 5vh 6vw;
}
.vlightbox[hidden] { display: none; }
.vlb-img {
    /* Fixed display frame so every photo, big or small, fills the SAME area and
       is centred. object-fit:contain keeps each photo whole (no crop), and the
       consistent box means images never jump in size between slides. */
    display: block;
    width: min(90vw, 1000px);
    height: min(78vh, 660px);
    object-fit: contain;
    border-radius: 8px;
    box-shadow: 0 20px 60px rgba(0,0,0,.55);
}
.vlb-close {
    position: absolute; top: 18px; right: 22px;
    background: none; border: 0; color: #fff; font-size: 40px; line-height: 1;
    cursor: pointer; opacity: .8; transition: opacity .2s;
}
.vlb-close:hover { opacity: 1; }
.vlb-nav {
    position: absolute; top: 50%; transform: translateY(-50%);
    background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.25);
    color: #fff; width: 52px; height: 52px; border-radius: 50%;
    font-size: 20px; cursor: pointer; transition: background .2s;
}
.vlb-nav:hover { background: rgba(245,166,35,.85); border-color: transparent; }
.vlb-prev { left: 3vw; }
.vlb-next { right: 3vw; }
.vlb-counter {
    position: absolute; bottom: 26px; left: 50%; transform: translateX(-50%);
    color: #fff; font-family: 'Oswald', sans-serif; font-size: 14px; letter-spacing: .1em;
    background: rgba(0,0,0,.4); padding: 5px 16px; border-radius: 20px;
}
@media (max-width: 600px) {
    .vlb-nav { width: 42px; height: 42px; }
    .vlb-prev { left: 2vw; } .vlb-next { right: 2vw; }
}


/* =====================================================================
   BLOG ARTICLE PAGES — premium editorial layout
   Shared by every article via includes/article-hero.php + .article-body.
   ===================================================================== */

/* Reading-progress bar pinned to the very top of the viewport */
.article-progress { position: fixed; top: 0; left: 0; height: 3px; width: 0;
    background: linear-gradient(90deg, #F5A623, #E8961A); z-index: 300;
    transition: width .1s linear; }

/* Hero with the lead image, dark scrim and the title sitting on top */
.article-hero { position: relative; overflow: hidden; background: #0A2540; }
.article-hero-img { position: absolute; inset: 0; width: 100%; height: 100%;
    object-fit: cover; opacity: .30; }
.article-hero::after { content: ""; position: absolute; inset: 0;
    background: linear-gradient(180deg, rgba(10,37,64,.70) 0%, rgba(10,37,64,.90) 100%); }
.article-hero-inner { position: relative; z-index: 2; padding: 2.75rem 0 2.5rem; }
@media (min-width: 768px) { .article-hero-inner { padding: 3.5rem 0 3.25rem; } }
.article-cat { display: inline-flex; align-items: center; gap: .5rem;
    font-family: 'Oswald', sans-serif; font-size: 11px; font-weight: 700;
    letter-spacing: .14em; text-transform: uppercase; color: #fff;
    background: rgba(245,166,35,.92); padding: 6px 14px; border-radius: 999px; }
.article-meta { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem;
    color: #aebfcf; font-size: .85rem; }
.article-meta .dot { width: 4px; height: 4px; border-radius: 50%; background: #5b7790; }

/* The body: larger, calmer, more readable than the old text-sm. */
.article-body { color: #324151; font-size: 1.0625rem; line-height: 1.8; }
.article-body > p, .article-body li { font-size: 1.0625rem; line-height: 1.8; }
.article-body p { margin-bottom: 1.25rem; }
/* Lead paragraph: the first block reads a touch bigger */
.article-lead p:first-child { font-size: 1.25rem; line-height: 1.7; color: #1c2b3a; }
.article-body h2 { font-family: 'Oswald', sans-serif; text-transform: uppercase;
    color: #0d2035; font-size: 1.75rem; line-height: 1.15; margin: 2.75rem 0 1rem;
    padding-top: 1.75rem; border-top: 1px solid #e7edf2; }
.article-body h2:first-child { border-top: 0; padding-top: 0; margin-top: 0; }
.article-body h3 { font-family: 'Oswald', sans-serif; text-transform: uppercase;
    color: #0d2035; font-size: 1.2rem; margin: 1.75rem 0 .6rem; }
.article-body ul, .article-body ol { margin: 0 0 1.25rem; padding-left: 0; }
.article-body ul li, .article-body ol li { position: relative; padding-left: 1.9rem;
    margin-bottom: .65rem; list-style: none; }
.article-body ul li::before { content: ""; position: absolute; left: .35rem; top: .65em;
    width: 7px; height: 7px; border-radius: 50%; background: #F5A623; }
.article-body ol { counter-reset: ai; }
.article-body ol li { counter-increment: ai; }
.article-body ol li::before { content: counter(ai); position: absolute; left: 0; top: .05em;
    width: 1.35rem; height: 1.35rem; border-radius: 50%; background: #FDF4E3; color: #D48510;
    font-family: 'Oswald', sans-serif; font-size: .75rem; font-weight: 700;
    display: flex; align-items: center; justify-content: center; }
.article-body a { color: #D48510; font-weight: 600; text-decoration: none;
    border-bottom: 1px solid rgba(212,133,16,.35); transition: border-color .2s; }
.article-body a:hover { border-bottom-color: #D48510; }
.article-body strong { color: #16263a; font-weight: 700; }
/* Highlight cards (numbered "Mistake 1" / "Section" blocks) get a left accent */
.article-card { background: #fff; border: 1px solid #e3ecf2;
    border-radius: 12px; padding: 2rem; margin-bottom: 1.75rem;
    box-shadow: 0 1px 3px rgba(13,32,53,.04); }
.article-card .kicker { display: block; color: #D48510; font-family: 'Oswald', sans-serif;
    font-size: .78rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; margin-bottom: .35rem; }

/* Article hero standfirst: bright and readable over the photo scrim */
.article-lead-text{color:#eef3f9;font-size:1.125rem;line-height:1.6;max-width:42rem;margin-bottom:1rem;
    text-shadow:0 1px 12px rgba(8,18,32,.55);}
@media(min-width:768px){.article-lead-text{font-size:1.25rem;}}

/* Section headings inside articles: amber tick + divider rhythm so a long
   article reads as distinct chapters instead of one flat wall of text. */
.article-h2 { position: relative; font-size: 1.6rem !important; line-height: 1.15;
    margin: 2.5rem 0 1.1rem; padding-left: 1.1rem; }
.article-h2::before { content: ""; position: absolute; left: 0; top: .12em; bottom: .12em;
    width: 4px; border-radius: 2px; background: #F5A623; }
@media (min-width: 768px) { .article-h2 { font-size: 1.9rem !important; } }
/* The very first section heading does not need a big gap above it. */
.max-w-3xl > .article-h2:first-of-type { margin-top: .5rem; }
/* Inside a highlight card the heading sits tight (card already has the accent). */
.article-card .article-h2 { margin: 0 0 1rem; padding-left: 0; }
.article-card .article-h2::before { display: none; }

/* =====================================================================
   HOMEPAGE "KEY FACTS AT A GLANCE" — readable on dark navy
   (Tailwind arbitrary colors like text-[#cdd9e4] are not in the built
   CSS, so these are real classes to guarantee contrast.)
   ===================================================================== */
.facts-intro{color:#d7e2ee;font-size:1rem;line-height:1.6;max-width:42rem;margin:1rem auto 0;}
.fact-tile{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.12);
    border-radius:14px;padding:1.4rem 1.4rem 1.5rem;transition:border-color .25s ease,background .25s ease;}
.fact-tile:hover{border-color:rgba(245,166,35,.55);background:rgba(255,255,255,.07);}
.fact-label{color:#9fb6c9;font-family:'Oswald',sans-serif;font-size:11px;font-weight:700;
    letter-spacing:.16em;text-transform:uppercase;margin-bottom:.55rem;}
.fact-value{color:#ffffff;font-family:'Oswald',sans-serif;font-size:1.6rem;line-height:1.1;margin-bottom:.5rem;}
.fact-desc{color:#c4d2df;font-size:.8rem;line-height:1.55;}
@media(min-width:768px){.fact-value{font-size:1.7rem;}}

/* =====================================================================
   DESIGN POLISH LAYER — hand-finishing pass (2026-07)
   Removes the "template" feel: depth, texture, signature details.
   Brand colors unchanged: navy #004477/#0A2540, amber #F5A623, cream.
   ===================================================================== */

/* 1. Typography refinement */
h1, h2, h3 { text-wrap: balance; }
p { text-wrap: pretty; }
table, [class*="font-['Oswald']"] { font-variant-numeric: lining-nums tabular-nums; }

/* 2. Signature: short amber rule under centered section headings */
h2[class*="uppercase"][class*="text-center"]::after {
    content: '';
    display: block;
    width: 46px; height: 3px;
    border-radius: 99px;
    margin: 14px auto 0;
    background: linear-gradient(90deg, #F5A623, #E8961A);
}

/* 3. Subtle dot-grid texture on dark sections (not the hero, it has the map) */
section[class*="bg-[#004477]"]:not(.hero),
section[class*="bg-[#0A2540]"]:not(.hero) {
    background-image: radial-gradient(rgba(255,255,255,.05) 1px, transparent 1.4px);
    background-size: 26px 26px;
}

/* 4. Light cards: layered depth instead of flat borders */
[class*="border-[#d0e0ec]"][class*="rounded-xl"] {
    box-shadow: 0 1px 2px rgba(13,32,53,.04), 0 4px 16px -8px rgba(13,32,53,.06);
}
a[class*="border-[#d0e0ec]"][class*="rounded-xl"] {
    transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
a[class*="border-[#d0e0ec]"][class*="rounded-xl"]:hover {
    transform: translateY(-3px);
    box-shadow: 0 2px 4px rgba(13,32,53,.05), 0 16px 32px -12px rgba(13,32,53,.14);
    border-color: rgba(245,166,35,.45);
}

/* 5. Dark cards: hairline top highlight = perceived depth */
[class*="bg-[#004477]"][class*="rounded"],
div[class*="border-[#1a4060]"][class*="rounded"] {
    box-shadow: inset 0 1px 0 rgba(255,255,255,.05);
}

/* 6. Amber CTAs: gradient face instead of flat fill.
   NOTE: use the EXACT class selector (.bg-\[\#F5A623\]) not [class*=...],
   otherwise it also matches hover:bg-[#F5A623] on OUTLINE buttons and paints
   them solid amber at rest (that was the "yellow text on yellow" bug). */
a.bg-\[\#F5A623\], button.bg-\[\#F5A623\] {
    background-image: linear-gradient(180deg, #F8B449 0%, #F5A623 55%, #EF9C15 100%);
}
a.bg-\[\#F5A623\]:hover, button.bg-\[\#F5A623\]:hover {
    background-image: linear-gradient(180deg, #F2A32F 0%, #E8961A 100%);
}

/* FIX: let hover:text-white actually win over the WCAG amber !important remap,
   so icons on amber tiles and outline-button labels turn white on hover. */
.hover\:text-white:hover { color: #ffffff !important; }
.group:hover .group-hover\:text-white { color: #ffffff !important; }
/* Small amber icon tiles that are amber AT REST get a gradient + glow.
   Use the EXACT class (.bg-\[\#F5A623\]) not a substring match, otherwise it
   also hits tiles whose amber is only a group-hover state (bg-[#FDF4E3]
   group-hover:bg-[#F5A623]) and paints them amber at rest → amber icon on
   amber tile = invisible ("yellow on yellow"). */
div.bg-\[\#F5A623\].w-10 {
    background-image: linear-gradient(135deg, #F8B449, #E8961A);
    box-shadow: 0 4px 12px -3px rgba(245,166,35,.4);
}

/* 7. Nav: floating feel over the page */
nav.sticky { box-shadow: 0 2px 24px rgba(3,16,30,.28); }

/* 8. Footer: signature amber thread along the top edge */
footer { position: relative; }
footer::before {
    content: '';
    position: absolute; top: -1px; left: 0; right: 0; height: 2px;
    background: linear-gradient(90deg, transparent, rgba(245,166,35,.7) 25%, rgba(245,166,35,.7) 75%, transparent);
}

/* 9. Photography: a touch more life, slightly richer on hover */
img[class*="object-cover"] { filter: saturate(1.04); }
a:hover img[class*="object-cover"] { filter: saturate(1.12) contrast(1.02); }

/* 10. Inline amber links: animated underline sweep */
p a[class*="text-[#F5A623]"], li a[class*="text-[#F5A623]"] {
    background-image: linear-gradient(currentColor, currentColor);
    background-size: 0% 1px;
    background-position: 0 100%;
    background-repeat: no-repeat;
    transition: background-size .25s ease;
}
p a[class*="text-[#F5A623]"]:hover, li a[class*="text-[#F5A623]"]:hover {
    background-size: 100% 1px;
}

/* 11. details/summary FAQ (minibus pages): clean marker + soft reveal */
details summary::-webkit-details-marker { display: none; }
details[open] > p { animation: faqReveal .25s ease both; }
@keyframes faqReveal {
    from { opacity: 0; transform: translateY(-4px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* 12. Keyboard focus: visible, on-brand */
a:focus-visible, button:focus-visible, summary:focus-visible,
input:focus-visible, textarea:focus-visible, select:focus-visible {
    outline: 2px solid #F5A623;
    outline-offset: 2px;
}

/* 13. Anchor jumps land below the sticky nav */
html { scroll-padding-top: 96px; }

/* 14. Reduced motion: kill movement but keep content visible */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation: none !important; transition: none !important; }
    .fade-up, .fade-up-stagger > * { opacity: 1 !important; transform: none !important; }
}

/* 15. Number stats (Oswald bold figures): tiny tracking for realism */
p[class*="font-bold"][class*="Oswald"] { letter-spacing: .015em; }

/* 2b. Signature amber rule under ALL shared .section-title headings
   (the earlier uppercase/text-center selector missed these). */
.section-title::after {
    content: '';
    display: block;
    width: 46px; height: 3px;
    border-radius: 99px;
    /* Starts where the heading starts. It used to be `auto` on both sides, so
       on every left-aligned header the rule floated in the middle of the
       column instead of sitting under the first letter. */
    margin: 16px auto 0 0;
    background: linear-gradient(90deg, #F5A623, #E8961A);
}
/* Centred headers (the site wraps those in a .text-center block) keep it centred. */
[class*="text-center"] .section-title::after { margin-inline: auto; }
.section-title-left::after { margin-inline: 0; }

/* 2c. Eyebrow kickers in centered sections: decorative side dashes */
div[class*="text-center"] > span[class*="text-[#F5A623]"][class*="tracking-"]::before,
div[class*="text-center"] > span[class*="text-[#F5A623]"][class*="tracking-"]::after {
    content: '';
    display: inline-block;
    width: 22px; height: 1px;
    background: rgba(245,166,35,.55);
    vertical-align: middle;
    margin: 0 12px 2px;
}

/* 3b. Dot grid: slightly more present than the first pass */
section[class*="bg-[#004477]"]:not(.hero),
section[class*="bg-[#0A2540]"]:not(.hero) {
    background-image: radial-gradient(rgba(255,255,255,.065) 1px, transparent 1.4px);
    background-size: 24px 24px;
}

/* =====================================================================
   BATCH A — HOMEPAGE EDITORIAL REDESIGN (2026-07)
   Structural, cascades to EN/DE/ES via shared classes.
   ===================================================================== */

/* A1. Recent Cases: asymmetric 2-1 editorial feature.
   First case = tall feature (spans both rows), other two stack beside it. */
.cases-featured-grid { display: grid; gap: 1.25rem; }
.cases-featured-grid > a { height: auto; min-height: 260px; }
@media (min-width: 1024px) {
    .cases-featured-grid {
        grid-template-columns: 1.9fr 1fr;
        grid-template-rows: 1fr 1fr;
    }
    .cases-featured-grid > a:first-child {
        grid-row: 1 / span 2;
        min-height: 520px;
    }
    .cases-featured-grid > a:not(:first-child) { min-height: 250px; }
    /* enlarge the feature card's stat numeral so it reads as the headline */
    .cases-featured-grid > a:first-child span[class*="text-[40px]"] {
        font-size: 68px;
    }
    .cases-featured-grid > a:first-child h3 { font-size: 22px; }
    .cases-featured-grid > a:first-child p  { font-size: 15px; max-width: 34rem; }
}

/* A2. FAQ: retire the 3-col grid, use a single editorial hairline-divided
   list in a readable measure. Kills the grid-reflow jank on open. */
/* Two-column accordion: fills the container width without the sparse
   full-width look, compact rows, clean cards, smooth reveal. */
/* Two independent columns (each a flex stack) so opening an item only pushes
   the items BELOW it in the same column — no cross-column gaps. */
/* HOMEPAGE FAQ (has .faq-col wrappers): two independent columns so opening an
   item only pushes items BELOW it in the same column — no cross-column gaps. */
.faq-group:has(.faq-col) {
    display: grid !important;
    grid-template-columns: 1fr 1fr;
    align-items: start;
    gap: 0 1.5rem;
    width: 100%;
}
@media (max-width: 767px) { .faq-group:has(.faq-col) { grid-template-columns: 1fr; } }
.faq-col { display: flex; flex-direction: column; gap: 1rem; }

/* SERVICE / CITY / VEHICLE FAQ (no .faq-col — items are direct children):
   clean single-column accordion (their markup was never two-column). */
.faq-group:not(:has(.faq-col)) {
    display: flex !important;
    flex-direction: column;
    gap: 1rem;
    width: 100%;
    /* Full container width — FAQ blocks used to sit in a narrow 52rem column
       while every other section on the same page ran the full max-w-7xl. */
    max-width: 100%;
    margin-inline: 0;
}

/* Card styling for the FAQ items in BOTH structures. */
.faq-col > *,
.faq-group:not(:has(.faq-col)) > * {
    border: 1px solid rgba(13,32,53,.10) !important;
    border-radius: 12px !important;
    background: #ffffff !important;
    box-shadow: 0 1px 2px rgba(13,32,53,.05) !important;
    padding: 0 20px !important;
    margin: 0 !important;
    transition: border-color .2s ease, box-shadow .2s ease !important;
}
.faq-col > *:hover,
.faq-group:not(:has(.faq-col)) > *:hover { border-color: rgba(245,166,35,.45) !important; }
.faq-col > *:has(.faq-answer.open),
.faq-group:not(:has(.faq-col)) > *:has(.faq-answer.open) {
    border-color: rgba(245,166,35,.6) !important;
    box-shadow: 0 10px 24px -12px rgba(13,32,53,.28) !important;
}
/* compact single-line question row (both) */
.faq-group .faq-toggle {
    padding: 16px 0 !important;
    gap: 12px !important;
}
.faq-group .faq-toggle h3 { font-size: 14.5px; line-height: 1.35; }
/* answer aligns under the question, collapses fully when closed */
.faq-group .faq-answer > p {
    margin: 0 !important;
    padding: 0 0 18px !important;
}

/* Logo marquee: break out of the container to full viewport width + a more
   refined, uniform, desaturated presentation. */
.logo-marquee {
    width: 100vw;
    max-width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
}
.logo-marquee-track { gap: 5rem !important; animation-duration: 45s !important; }
.logo-item {
    height: 30px !important;
    width: auto !important;
    filter: grayscale(1);
    opacity: .45;
    transition: opacity .3s ease, filter .3s ease;
}
.logo-item:hover { opacity: .9; filter: grayscale(0); }

/* A3. Section header — left editorial variant. Add .section-head-left to the
   header wrapper to break the "centered, nine times" monotony. */
.section-head-left { text-align: left !important; }
.section-head-left .accent-line,
.section-head-left .accent-line-left { margin-left: 0; }
.section-head-left .section-title::after { margin-left: 0; margin-right: auto; }
.section-head-left p { margin-left: 0; }
/* eyebrow side-dashes look wrong when left-aligned — drop the leading one */
.section-head-left .eyebrow::before { display: none; }

/* FAQ chevron rotates when its row is open */
.faq-toggle svg { transition: transform .3s cubic-bezier(.4,0,.2,1); }
.faq-toggle.open svg { transform: rotate(180deg); color: #F5A623; }

/* Fleet "Up to X pax" pill hugs its content
   (Tailwind w-fit is absent from the prebuilt CSS, so force it here). */
span.bg-\[\#FDF4E3\].rounded-full {
    width: fit-content !important;
    align-self: flex-start;
}

/* =====================================================================
   SECTION SEAMS — stop same-colour sections blending into each other
   ===================================================================== */

/* Recent Cases now uses a white band (see index.php), so the old navy seam
   override is removed — the white section separates itself cleanly. */

/* Footer amber seam: make the thread read clearly against the lighter form
   band above it (form #004477 -> footer #0A2540). */
footer::before {
    height: 2px !important;
    background: linear-gradient(90deg, transparent, rgba(245,166,35,.85) 30%, rgba(245,166,35,.85) 70%, transparent) !important;
}

/* =====================================================================
   BATCH A — deep section pass #2 (Key Facts / Coverage / Testimonials)
   ===================================================================== */

/* KEY FACTS: asymmetric grid — first fact is a wide feature with an oversized
   value, breaking the "8 identical tiles" spec-dump. */
.key-facts-grid { display: grid; grid-template-columns: repeat(2,1fr); gap: 1rem; }
.key-facts-grid > div:first-child { grid-column: span 2; }
@media (min-width: 1024px) {
    .key-facts-grid { grid-template-columns: repeat(3,1fr); }
    .key-facts-grid > div:first-child { grid-column: span 2; display: flex; flex-direction: column; justify-content: center; }
    .key-facts-grid > div:first-child .fact-value { font-size: 2.75rem; line-height: 1; }
    .key-facts-grid > div:first-child .fact-desc { font-size: .95rem; max-width: 26rem; }
}
/* left-align the Key Facts header (breaks the centered-header monotony) */
section:has(.key-facts-grid) .text-center { text-align: left !important; }
section:has(.key-facts-grid) .text-center .accent-line { margin-left: 0; }
section:has(.key-facts-grid) .text-center .section-title::after { margin-left: 0; margin-right: auto; }
section:has(.key-facts-grid) .facts-intro { margin-left: 0; }
section:has(.key-facts-grid) .eyebrow::before { display: none; }

/* COVERAGE: taller, richer country tiles + weight the first (biggest market)
   as a wide feature; left-aligned header. */
/* The section header is left-aligned, but the CTA card in the grid is not
   a header — exclude it or its label sticks to the left edge. */
section:has(.country-card) .text-center:not(.country-more-cta) { text-align: left !important; }
section:has(.country-card) .text-center .accent-line { margin-left: 0; }
section:has(.country-card) .text-center .section-title::after { margin-left: 0; margin-right: auto; }
section:has(.country-card) .text-center p { margin-left: 0; }
section:has(.country-card) .eyebrow::before { display: none; }
.country-card {
    height: 11rem !important;
    box-shadow: 0 1px 3px rgba(13,32,53,.08), 0 8px 24px -12px rgba(13,32,53,.14);
    transition: transform .25s ease, box-shadow .25s ease;
}
.country-card:hover { transform: translateY(-3px); box-shadow: 0 14px 30px -12px rgba(13,32,53,.3); }
/* amber underline accent that grows on hover */
.country-card::after {
    content:''; position:absolute; left:1rem; bottom:.9rem; height:2px; width:0;
    background:#F5A623; transition:width .3s ease; z-index:11;
}
.country-card:hover::after { width:2.2rem; }
@media (min-width: 1024px) {
    section:has(.country-card) .grid { grid-template-columns: repeat(4, 1fr); }
    .country-card:first-child { grid-column: span 2; grid-row: span 2; height: auto !important; min-height: 23rem; }
    .country-card:first-child .font-\[\'Oswald\'\] { font-size: 1.75rem; }
}

/* TESTIMONIALS: plain cards, no decorative quotation mark (per request). */
#review-track > div { position: relative; }

/* CTA (trip-planner) button pushed to the right edge — Tailwind md:mr-auto is
   absent from the prebuilt CSS, so the button was packing next to the text. */
@media (min-width: 768px) {
    div[style*="0d2b4d"] > a { margin-left: auto; }
}

/* Trust bar: more air, and the label now reads as a real section heading
   rather than a whisper-sized kicker above the logo row. */
section:has(.logo-marquee) { padding-top: 2.75rem !important; padding-bottom: 2.75rem !important; }
section:has(.logo-marquee) p.text-center:first-of-type {
    font-size: clamp(1.35rem, 2.6vw, 1.875rem) !important;
    line-height: 1.15 !important;
    letter-spacing: .04em !important;
    color: #0d2035 !important;
    margin-bottom: 2rem !important;
}

/* Services "What We Do": left-aligned header + horizontal editorial cards
   (icon left, title+desc right) in a 2-col layout — less "generic feature grid". */
section:has(.services-grid) .text-center { text-align: left !important; }
section:has(.services-grid) .text-center .accent-line { margin-left: 0; }
section:has(.services-grid) .text-center .section-title::after { margin-left: 0; margin-right: auto; }
section:has(.services-grid) .text-center p { margin-left: 0; }
section:has(.services-grid) .eyebrow::before { display: none; }
.services-grid > a { align-items: flex-start; }

/* Reviews hero: the arbitrary 2-col grid value isn't in the prebuilt Tailwind,
   so define it here to put the headline and rating card side-by-side on desktop. */
@media (min-width: 1024px) {
    .lg\:grid-cols-\[1\.05fr_0\.95fr\] { grid-template-columns: 1.05fr 0.95fr; }
}

/* =====================================================================
   Missing Tailwind white-opacity utilities (absent from the prebuilt CSS).
   Without these, text-white/90 falls back to dark ink (black labels on dark
   cards), and white/xx borders & backgrounds silently don't render.
   ===================================================================== */
.text-white\/90 { color: rgba(255,255,255,.90); }
.text-white\/80 { color: rgba(255,255,255,.80); }
.text-white\/70 { color: rgba(255,255,255,.70); }
.text-white\/60 { color: rgba(255,255,255,.60); }
.text-white\/50 { color: rgba(255,255,255,.50); }
.border-white\/10 { border-color: rgba(255,255,255,.10); }
.border-white\/12 { border-color: rgba(255,255,255,.12); }
.border-white\/15 { border-color: rgba(255,255,255,.15); }
.border-white\/20 { border-color: rgba(255,255,255,.20); }
.border-white\/30 { border-color: rgba(255,255,255,.30); }
.bg-white\/5  { background-color: rgba(255,255,255,.05); }
.bg-white\/10 { background-color: rgba(255,255,255,.10); }
.bg-white\/15 { background-color: rgba(255,255,255,.15); }
.bg-white\/20 { background-color: rgba(255,255,255,.20); }

/* Rating bars: gradient fill for a more refined look */
.rating-card .h-full { background-image: linear-gradient(90deg, #F8B449, #E8961A); }

/* Arbitrary opacity utilities absent from the prebuilt Tailwind (rendered at
   full opacity otherwise — e.g. the blog CTA's amber radial blared at 100%). */
.opacity-\[0\.06\] { opacity: 0.06; }
.opacity-\[0\.08\] { opacity: 0.08; }
.opacity-\[0\.1\]  { opacity: 0.10; }
.opacity-\[0\.05\] { opacity: 0.05; }

/* RDA / ASTA accreditation logos: white chip so they stay legible on any
   (usually navy) background — they're low-contrast SVGs designed for light. */
img[src*="rda-logo"], img[src*="astalogo"], img[src*="asta-logo"] {
    background: #ffffff;
    border-radius: 8px;
    padding: 7px 11px;
    box-shadow: 0 2px 10px -3px rgba(0,0,0,.28);
    box-sizing: content-box;
}
/* ...but not when already inside an explicit white chip (the form section). */
.bg-white img[src*="rda-logo"], .bg-white img[src*="astalogo"], .bg-white img[src*="asta-logo"] {
    background: transparent; box-shadow: none; padding: 0;
}

/* ---- Legal pages: auto-generated sticky table of contents ---- */
.legal-doc h2 { scroll-margin-top: 100px; }
.legal-content > * + * { margin-top: 2.75rem; }
[data-auto-toc] h2 { scroll-margin-top: 100px; }

.legal-grid { display: block; }
@media (min-width: 1024px) {
    .legal-grid { display: grid; grid-template-columns: 232px minmax(0, 1fr); gap: 3rem; align-items: start; }
}
.legal-toc-wrap { display: none; }
/* Sticky must sit on the grid ITEM (its containing block is the tall grid),
   not the inner nav (whose parent is only as tall as the TOC). */
@media (min-width: 1024px) { .legal-toc-wrap { display: block; position: sticky; top: 100px; align-self: start; max-height: calc(100vh - 120px); overflow-y: auto; } }
.legal-toc { position: relative; }
.legal-toc .toc-title { font-family: 'Oswald', sans-serif; text-transform: uppercase; letter-spacing: 0.14em; font-size: 0.7rem; color: #8aaec4; margin-bottom: 0.85rem; }
.legal-toc ol { list-style: none; margin: 0; padding: 0; border-left: 2px solid #e6eef4; }
.legal-toc li { margin: 0; }
.legal-toc a { display: block; padding: 0.4rem 0 0.4rem 1rem; margin-left: -2px; border-left: 2px solid transparent; color: #5b7085; font-size: 0.82rem; line-height: 1.35; transition: color 0.15s, border-color 0.15s; }
.legal-toc a:hover { color: #004477; }
.legal-toc a.active { color: #004477; font-weight: 600; border-left-color: #004477; }

/* ---- Fleet cards (shared by fleet-grid.php across EN/DE/ES overview pages) ---- */
.fleet-card{background:#fff;border:1px solid #d0e0ec;overflow:hidden;display:flex;flex-direction:column;transition:border-color .3s,box-shadow .3s}
.fleet-card:hover{border-color:#F5A623;box-shadow:0 8px 30px rgba(0,68,119,.12)}
.fleet-card.dark{background:#004477;border-color:#1a4060}
.fleet-card.dark:hover{border-color:#F5A623;box-shadow:0 8px 30px rgba(0,0,0,.3)}
.fleet-gallery{position:relative;height:220px;overflow:hidden}
.fleet-gallery .gallery-track{display:flex;height:100%;transition:transform .4s ease}
.fleet-gallery .gallery-track img{flex-shrink:0;width:100%;height:100%;object-fit:cover}
.fleet-gallery .g-btn{position:absolute;top:50%;transform:translateY(-50%);width:36px;height:36px;border-radius:50%;background:rgba(0,0,0,.45);color:#fff;border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:14px;transition:background .2s;z-index:2}
.fleet-gallery .g-btn:hover{background:rgba(0,0,0,.7)}
.fleet-gallery .g-btn.prev{left:10px}
.fleet-gallery .g-btn.next{right:10px}
.fleet-gallery .g-dots{position:absolute;bottom:4px;left:50%;transform:translateX(-50%);display:flex;gap:2px;z-index:2}
.fleet-gallery .g-dot{width:24px;height:24px;padding:0;border:none;background:none;cursor:pointer;display:flex;align-items:center;justify-content:center}
.fleet-gallery .g-dot::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--dot,rgba(255,255,255,.4));transition:background .2s}
.t-dot{width:28px;height:28px;padding:0;border:none;background:none;cursor:pointer;display:inline-flex;align-items:center;justify-content:center}
.t-dot::before{content:"";width:10px;height:10px;border-radius:50%;background:#d0e0ec;transition:background .2s}
.t-dot:hover::before{background:#F5A623}
.t-dot.is-active::before{background:#F5A623}
.fleet-gallery .pax-badge{position:absolute;top:12px;left:12px;background:#F5A623;color:#fff;font-family:'Oswald',sans-serif;font-size:12px;font-weight:600;padding:4px 12px;z-index:2;letter-spacing:.05em}
.fleet-info{padding:20px 24px 24px;display:flex;flex-direction:column;flex:1}
.fleet-specs{display:flex;gap:16px;padding-bottom:14px;margin-bottom:14px;border-bottom:1px solid #d0e0ec}
.dark .fleet-specs{border-color:#1a4060}
.fleet-spec{display:flex;align-items:center;gap:6px;font-size:12px;color:rgba(13,32,53,.7)}
.dark .fleet-spec{color:#8aaec4}
.fleet-spec strong{color:#0d2035;font-size:16px;font-family:'Oswald',sans-serif}
.dark .fleet-spec strong{color:#fff}
.fleet-title{font-family:'Oswald',sans-serif;font-size:20px;text-transform:uppercase;color:#0d2035;margin-bottom:8px}
.dark .fleet-title{color:#fff}
.fleet-desc{font-size:13px;line-height:1.6;color:rgba(13,32,53,.72);margin-bottom:16px;flex:1}
.dark .fleet-desc{color:#8aaec4}
.fleet-tags{display:flex;flex-wrap:wrap;gap:5px;margin-bottom:18px}
.fleet-tag{font-size:11px;font-weight:600;padding:3px 10px;border-radius:20px;background:#FDF4E3;color:#B8730C}
.dark .fleet-tag{background:#004477;color:#F5A623}
.fleet-cta{display:block;text-align:center;background:#F5A623;color:#fff;font-family:'Oswald',sans-serif;font-weight:600;font-size:13px;text-transform:uppercase;letter-spacing:.12em;padding:14px 20px;text-decoration:none;transition:background .2s}
.fleet-cta:hover{background:#E8961A}

/* Section eyebrow labels removed site-wide (per request): drop the small amber
   kicker text and its accent line from every section, on every page. Covers both
   the .eyebrow design-system class and the older inline amber-uppercase spans. */
.eyebrow,
.accent-line,
.accent-line-left,
span.block[class*="text-[#F5A623]"][class*="uppercase"] {
    display: none !important;
}

/* Request-a-quote CTA: on desktop, drop the right column (stats/contact) so it
   starts level with the form fields, not the section title. */
@media (min-width: 768px) {
    .form-side-col { padding-top: 150px; }
}

/* ================= Custom form widgets: passenger stepper + date picker ========= */
.stepper { display:flex; align-items:stretch; background:var(--wg-bg,#0A2540); border:1px solid #1a4060; border-radius:.5rem; overflow:hidden; transition:border-color .15s, box-shadow .15s; }
.stepper:focus-within { border-color:#F5A623; box-shadow:0 0 0 1px #F5A623; }
.step-btn { width:46px; flex-shrink:0; background:transparent; color:#8aaec4; font-size:20px; line-height:1; cursor:pointer; border:none; display:flex; align-items:center; justify-content:center; transition:background .15s, color .15s; }
.step-btn:hover { background:rgba(245,166,35,.14); color:#F5A623; }
.step-btn:active { background:rgba(245,166,35,.24); }
.step-input { flex:1; min-width:0; background:transparent; border:none; text-align:center; color:#e8f0f7; font-size:1rem; padding:.75rem 0; -moz-appearance:textfield; appearance:textfield; }
.step-input::-webkit-outer-spin-button, .step-input::-webkit-inner-spin-button { -webkit-appearance:none; margin:0; }
.step-input::placeholder { color:#8aaec4; }
.step-input:focus { outline:none; }

.datepick { position:relative; }
.dp-field { width:100%; display:flex; align-items:center; justify-content:space-between; gap:.5rem; background:var(--wg-bg,#0A2540); border:1px solid #1a4060; color:#e8f0f7; padding:.75rem 1rem; border-radius:.5rem; cursor:pointer; text-align:left; font-size:1rem; transition:border-color .15s, box-shadow .15s; }
.dp-field:hover { border-color:#2a557a; }
.datepick.open .dp-field { border-color:#F5A623; box-shadow:0 0 0 1px #F5A623; }
.dp-label.dp-placeholder { color:#8aaec4; }
.dp-icon { width:1.15rem; height:1.15rem; color:#8aaec4; flex-shrink:0; }
.datepick.open .dp-icon { color:#F5A623; }
.dp-pop { position:fixed; z-index:200; width:290px; max-width:calc(100vw - 2rem); background:linear-gradient(180deg,#0D2846 0%,#0A1F38 100%); border:1px solid rgba(255,255,255,.12); border-radius:14px; box-shadow:0 26px 60px -22px rgba(0,0,0,.75), inset 0 1px 0 rgba(255,255,255,.05); padding:14px; }
.dp-head { display:flex; align-items:center; justify-content:space-between; margin-bottom:10px; }
.dp-title { color:#fff; font-family:'Oswald',sans-serif; font-size:.95rem; text-transform:uppercase; letter-spacing:.04em; }
.dp-nav { width:30px; height:30px; border-radius:8px; background:rgba(255,255,255,.06); color:#e8f0f7; border:none; cursor:pointer; font-size:18px; line-height:1; display:flex; align-items:center; justify-content:center; transition:background .15s, color .15s; }
.dp-nav:hover { background:rgba(245,166,35,.22); color:#F5A623; }
.dp-week { display:grid; grid-template-columns:repeat(7,1fr); gap:2px; margin-bottom:5px; }
.dp-week span { text-align:center; font-size:.62rem; color:#7f9cb3; text-transform:uppercase; letter-spacing:.03em; padding:3px 0; }
.dp-grid { display:grid; grid-template-columns:repeat(7,1fr); gap:2px; }
.dp-day { aspect-ratio:1; border:none; background:transparent; color:#e8f0f7; font-size:.82rem; border-radius:8px; cursor:pointer; transition:background .12s, color .12s; }
.dp-day:hover:not(:disabled) { background:rgba(245,166,35,.18); color:#fff; }
.dp-day.dp-other { color:#3d566f; }
.dp-day.dp-today:not(.dp-selected) { box-shadow:inset 0 0 0 1px rgba(245,166,35,.55); }
.dp-day.dp-selected { background:#F5A623; color:#0A2540; font-weight:700; }
.dp-day.dp-in-range { background:rgba(245,166,35,.16); color:#fff; border-radius:0; }
.dp-day.dp-r-start:not(.dp-r-end) { border-top-right-radius:0; border-bottom-right-radius:0; }
.dp-day.dp-r-end:not(.dp-r-start) { border-top-left-radius:0; border-bottom-left-radius:0; }
.dp-day:disabled { color:#2f455b; cursor:default; }
.dp-foot { display:flex; justify-content:space-between; margin-top:10px; padding-top:10px; border-top:1px solid rgba(255,255,255,.08); }
.dp-foot button { background:none; border:none; color:#F5A623; font-size:.72rem; cursor:pointer; text-transform:uppercase; letter-spacing:.05em; font-weight:600; transition:color .15s; }
.dp-foot button:hover { color:#E8961A; }

/* Privacy policy modal: tidy the injected legal content */
.privacy-modal-body > * + * { margin-top: 1.75rem; }
.privacy-modal-body h2 { font-size: 1.05rem; margin-bottom: 0.75rem; }
.privacy-modal-body img, .privacy-modal-body table { max-width: 100%; }
.privacy-modal-body .overflow-x-auto { overflow-x: auto; }

/* ---- Blog article auto Table of Contents ---- */
.blog-toc { background: #fff; border: 1px solid #e3ecf2; border-radius: 12px; padding: 1rem 1.15rem; box-shadow: 0 1px 3px rgba(13,32,53,.05); margin: 1.5rem 1rem 0; }
.blog-toc .toc-title { font-family: 'Oswald', sans-serif; text-transform: uppercase; letter-spacing: .14em; font-size: .7rem; color: #8aaec4; margin: 0 0 .6rem; }
.blog-toc ol { list-style: none; margin: 0; padding: 0; border-left: 2px solid #e6eef4; }
.blog-toc li { margin: 0; }
.blog-toc a { display: block; padding: .35rem 0 .35rem .85rem; margin-left: -2px; border-left: 2px solid transparent; color: #5b7085; font-size: .82rem; line-height: 1.3; transition: color .15s, border-color .15s; }
.blog-toc a:hover { color: #004477; }
.blog-toc a.active { color: #004477; font-weight: 600; border-left-color: #004477; }
.blog-toc .toc-toggle { display: none; }
@media (min-width: 820px) { .blog-toc { margin: 1.75rem auto 0; max-width: 48rem; } }
/* normal + mobile: collapsible "Contents" card */
@media (max-width: 1799px) {
    .blog-toc .toc-toggle { display: flex; align-items: center; justify-content: space-between; gap: 1rem; width: 100%; background: none; border: 0; cursor: pointer; font-family: 'Oswald', sans-serif; text-transform: uppercase; letter-spacing: .14em; font-size: .74rem; color: #0d2035; padding: 0; }
    .blog-toc .toc-title { display: none; }
    .blog-toc ol { max-height: 0; overflow: hidden; transition: max-height .35s ease; border-left-color: transparent; }
    .blog-toc.open ol { max-height: 1600px; margin-top: .85rem; border-left-color: #e6eef4; }
    .blog-toc .toc-toggle span:last-child { transition: transform .3s; }
    .blog-toc.open .toc-toggle span:last-child { transform: rotate(180deg); }
}
/* ultra-wide: fixed left rail (clears full-width sections). Hidden while the
   hero is in view so it starts in the article body, then follows on scroll. */
@media (min-width: 1800px) {
    .blog-toc { position: fixed; top: 120px; left: max(1.5rem, calc((100vw - 1280px) / 2 - 244px)); width: 222px; margin: 0; max-height: calc(100vh - 150px); overflow-y: auto; z-index: 20; opacity: 0; visibility: hidden; transition: opacity .25s ease; }
    .blog-toc.is-in-body { opacity: 1; visibility: visible; }
}

/* =====================================================================
   UNIFIED PAGE HERO TYPOGRAPHY
   One H1 scale and one lead-paragraph scale for every inner page, taken
   from the country/city hero (the reference design). Pages used to carry
   ~14 different H1 utility stacks; they now all carry .page-h1 and the
   lead paragraph that follows it is normalised here. Layout utilities
   (alignment, margins, container) stay on the markup.
   The three homepages keep their own oversized brand hero on purpose.
   ===================================================================== */
.page-h1 {
    font-family: 'Oswald', sans-serif;
    font-weight: 600;
    font-size: clamp(2.25rem, 4.4vw, 3rem);
    line-height: 1.1;
    letter-spacing: -0.005em;
    text-transform: uppercase;
    color: #ffffff;
    margin: 0 0 1rem;
}
/* Lead / standfirst directly under the page H1.
   Excludes light-surface heroes, which set their own ink. */
.page-h1 + p:not(.case-hero-lead) {
    color: rgba(232, 240, 247, 0.9);
    font-size: 1.125rem;
    line-height: 1.65;
    margin-top: 0;
}
@media (min-width: 768px) {
    .page-h1 + p:not(.case-hero-lead) { font-size: 1.1875rem; }
}

/* =====================================================================
   "MORE FROM OUR BLOG" CARDS (includes/related-posts.php)
   Three equal cards across the full container. Written as real CSS because
   the prebuilt Tailwind file ships no `h-44` and no responsive
   `*:grid-cols-*` utilities — the old markup relied on both, so each
   thumbnail fell back to its own intrinsic ratio and the cards came out
   different heights.
   ===================================================================== */
.related-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
    align-items: stretch;
}
@media (min-width: 640px)  { .related-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .related-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.related-card {
    display: flex;
    flex-direction: column;
    background: #fff;
    border: 1px solid #e3ecf2;
    border-radius: 16px;
    overflow: hidden;
    text-decoration: none;
    transition: border-color .25s ease, box-shadow .25s ease, transform .25s ease;
}
.related-card:hover {
    border-color: #F5A623;
    box-shadow: 0 18px 34px -18px rgba(13, 32, 53, .38);
    transform: translateY(-4px);
}

/* Fixed 16:10 window: every thumbnail is cropped to the same shape,
   whatever the source file's dimensions are. */
.related-media {
    position: relative;
    aspect-ratio: 16 / 10;
    overflow: hidden;
    background: #0A2540;
}
.related-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
    transition: transform .5s cubic-bezier(.16, .84, .44, 1);
}
.related-card:hover .related-media img { transform: scale(1.05); }

.related-cat {
    position: absolute;
    top: .75rem;
    left: .75rem;
    background: #F5A623;
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .1em;
    padding: .25rem .75rem;
    border-radius: 999px;
}

/* Body grows so the "read more" line sits on the same baseline in all three. */
.related-body { display: flex; flex-direction: column; flex: 1 1 auto; padding: 1.5rem; }
.related-title {
    font-family: 'Oswald', sans-serif;
    font-size: 1.125rem;
    line-height: 1.25;
    text-transform: uppercase;
    color: #0d2035;
    margin: 0 0 .5rem;
    transition: color .2s ease;
}
.related-card:hover .related-title { color: #F5A623; }
.related-excerpt {
    color: rgba(13, 32, 53, .7);
    font-size: .875rem;
    line-height: 1.6;
    margin: 0 0 1.25rem;
}
.related-more {
    margin-top: auto;
    display: inline-flex;
    align-items: center;
    gap: .375rem;
    color: #F5A623;
    font-family: 'Oswald', sans-serif;
    font-size: .875rem;
    text-transform: uppercase;
    letter-spacing: .12em;
    transition: gap .2s ease;
}
.related-card:hover .related-more { gap: .625rem; }

/* =====================================================================
   SECONDARY BUTTON
   Fleet cards used to show Book Now and Details as two identical amber
   buttons, so nothing read as the primary action. Details (and other
   supporting links next to a primary CTA) use this quieter treatment.
   ===================================================================== */
.btn-ghost {
    background: #ffffff;
    border: 1.5px solid #cfdce6;
    color: #0d2035 !important;
    transition: background-color .2s ease, border-color .2s ease, color .2s ease;
}
.btn-ghost:hover {
    background: #0d2035;
    border-color: #0d2035;
    color: #ffffff !important;
}
/* On dark bands the same button inverts. */
.btn-ghost-dark {
    background: transparent;
    border: 1.5px solid rgba(255, 255, 255, .35);
    color: #ffffff !important;
    transition: background-color .2s ease, border-color .2s ease;
}
.btn-ghost-dark:hover { background: rgba(255, 255, 255, .12); border-color: rgba(255, 255, 255, .6); }

/* The privacy policy opens from the consent checkbox INSIDE the quote modal,
   so it has to stack above it. Tailwind's prebuilt file has no z-[120]. */
#privacy-modal { z-index: 120; }

/* =====================================================================
   CASE-STUDY METRICS (includes/case-metrics.php)
   Sits on the site's cream section surface, in white cards like every
   other block. Bars use the brand blue #004477: on cream it clears
   contrast, while amber measures 1.9:1 and would not. The muted step
   #b9cbd8 is a deliberate de-emphasis and is relieved by the value
   printed at each bar tip plus the table view.
   ===================================================================== */
.case-metrics { background: #ffffff; padding: 3rem 0; border-top: 1px solid #e6eef4; border-bottom: 1px solid #e6eef4; }
@media (min-width: 768px) { .case-metrics { padding: 4.5rem 0; } }
.case-metrics-head { margin-bottom: 2rem; }
.case-metrics-kicker {
    display: block; color: #D48510; font-family: 'Oswald', sans-serif;
    font-size: .72rem; font-weight: 600; letter-spacing: .22em;
    text-transform: uppercase; margin-bottom: .55rem;
}
.case-metrics-title {
    font-family: 'Oswald', sans-serif; font-weight: 600; color: #0d2035;
    font-size: clamp(1.5rem, 3.2vw, 2.25rem); line-height: 1.15;
    text-transform: uppercase; margin: 0;
}
.case-metrics-title::after {
    content: ''; display: block; width: 46px; height: 3px; border-radius: 99px;
    margin-top: 14px; background: linear-gradient(90deg, #F5A623, #E8961A);
}

/* --- KPI row ------------------------------------------------------- */
.kpi-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; margin-bottom: 2rem; }
@media (min-width: 560px) { .kpi-row { gap: 1rem; } }
@media (min-width: 900px) { .kpi-row { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.25rem; margin-bottom: 2.75rem; } }
.kpi-tile {
    background: #faf7f1; border: 1px solid #e3ecf2; border-radius: 14px;
    padding: 1.1rem 1.1rem 1rem;
    box-shadow: 0 1px 2px rgba(13, 32, 53, .05);
}
@media (min-width: 900px) { .kpi-tile { padding: 1.35rem 1.4rem 1.25rem; } }
.kpi-value {
    display: block; font-family: 'Oswald', sans-serif; font-weight: 600;
    color: #004477; font-size: clamp(1.75rem, 5.5vw, 2.6rem); line-height: 1;
}
.kpi-label {
    display: block; color: rgba(13, 32, 53, .6); font-size: .78rem;
    line-height: 1.35; margin-top: .5rem;
}

/* --- Bar chart ----------------------------------------------------- */
.chart-figure {
    margin: 0; background: #faf7f1; border: 1px solid #e3ecf2;
    border-radius: 16px; padding: 1.35rem 1.25rem;
    box-shadow: 0 1px 2px rgba(13, 32, 53, .05);
}
@media (min-width: 768px) { .chart-figure { padding: 2rem 2.25rem; } }
.chart-figure figcaption { margin-bottom: 1.25rem; }
.chart-title {
    display: block; font-family: 'Oswald', sans-serif; color: #0d2035;
    font-size: 1rem; text-transform: uppercase; letter-spacing: .06em;
}
.chart-note { display: block; color: rgba(13, 32, 53, .55); font-size: .8rem; margin-top: .35rem; }

.chart-legend { display: flex; flex-wrap: wrap; gap: 1.25rem; margin-bottom: 1.1rem; }
.chart-legend span { display: inline-flex; align-items: center; gap: .5rem; color: rgba(13, 32, 53, .7); font-size: .78rem; }
.chart-legend .swatch { width: 12px; height: 12px; border-radius: 3px; display: inline-block; }
.chart-legend .swatch-on  { background: #004477; }
.chart-legend .swatch-off { background: #b9cbd8; }

.bar-chart { display: flex; flex-direction: column; gap: .35rem; }
.bar-row {
    display: grid; grid-template-columns: minmax(0, 13rem) 1fr auto;
    align-items: center; gap: 1rem;
    padding: .5rem .6rem; margin: 0 -.6rem; border-radius: 8px;
    transition: background-color .15s ease;
}
.bar-row:hover { background: #eef4f8; }
.bar-name { color: #0d2035; font-size: .875rem; line-height: 1.3; }
.bar-track { position: relative; height: 14px; background: #dde7ee; border-radius: 4px; }
.bar-fill {
    position: absolute; inset: 0 auto 0 0;      /* grows from a single baseline */
    background: #004477;
    border-radius: 0 4px 4px 0;                  /* rounded data-end, square at baseline */
    transition: width .6s cubic-bezier(.16, .84, .44, 1);
}
.bar-row.is-muted .bar-fill { background: #b9cbd8; }
.bar-row.is-muted .bar-name { color: rgba(13, 32, 53, .55); }
.bar-row.is-muted .bar-value { color: rgba(13, 32, 53, .5); }
.bar-value {
    font-family: 'Oswald', sans-serif; font-weight: 600; color: #0d2035;
    font-size: .95rem; font-variant-numeric: tabular-nums; min-width: 3rem; text-align: right;
}
@media (max-width: 767px) {
    /* Stack: the name goes above its own bar so long titles never squeeze the track. */
    .bar-row { grid-template-columns: 1fr auto; gap: .35rem .75rem; padding: .55rem .5rem; }
    .bar-name { grid-column: 1 / -1; font-size: .82rem; }
    .bar-track { height: 12px; }
    .bar-value { font-size: .88rem; min-width: 2.5rem; }
}

/* Table view — the relief the contrast check asks for, and it keeps every
   value reachable without reading the bars. */
.chart-table { margin-top: 1.5rem; border-top: 1px solid #e6eef4; padding-top: 1rem; }
.chart-table summary {
    cursor: pointer; color: #D48510; font-size: .78rem;
    font-family: 'Oswald', sans-serif; text-transform: uppercase; letter-spacing: .1em;
}
.chart-table .table-scroll { overflow-x: auto; }
.chart-table table { width: 100%; min-width: 26rem; margin-top: 1rem; border-collapse: collapse; font-size: .82rem; }
.chart-table th, .chart-table td { text-align: left; padding: .55rem .75rem; border-bottom: 1px solid #e6eef4; }
.chart-table th { color: rgba(13, 32, 53, .55); font-weight: 600; white-space: nowrap; }
.chart-table td { color: #0d2035; font-variant-numeric: tabular-nums; }
.chart-table td:first-child { font-variant-numeric: normal; }

/* =====================================================================
   CASE STUDY DETAIL (includes/case-detail.php)
   Split hero on the light surface: copy left, image right. Written as
   real CSS because the prebuilt Tailwind file ships no lg:grid-cols-*.
   ===================================================================== */
.case-hero { background: #faf7f1; padding: 2.25rem 0 2.75rem; }
@media (min-width: 1024px) { .case-hero { padding: 3.25rem 0 3.75rem; } }

.case-hero-grid { display: grid; grid-template-columns: 1fr; gap: 1.75rem; align-items: center; }
@media (min-width: 1024px) {
    .case-hero-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 3.5rem; }
}
.case-hero-copy { min-width: 0; }
.case-eyebrow {
    display: block; color: #D48510; font-family: 'Oswald', sans-serif;
    font-size: .72rem; font-weight: 600; letter-spacing: .2em;
    text-transform: uppercase; margin-bottom: .7rem;
}
/* .page-h1 is white for the dark heroes elsewhere; this one sits on white. */
.case-h1 { color: #0d2035 !important; font-size: clamp(1.75rem, 3.6vw, 2.65rem); }
.case-hero-lead {
    color: rgba(13, 32, 53, .75); font-size: 1.0625rem; line-height: 1.65;
    margin: 0 0 1.5rem; max-width: 34rem;
}

/* Hero figure: exactly one per page, proportional figures at display size. */
.case-hero-figure { display: flex; align-items: baseline; gap: .65rem; margin-bottom: 1.5rem; }
.case-hero-number {
    font-family: 'Oswald', sans-serif; font-weight: 600; color: #004477;
    font-size: clamp(2.6rem, 6vw, 3.6rem); line-height: .9;
}
.case-hero-unit {
    color: rgba(13, 32, 53, .55); font-size: .7rem;
    text-transform: uppercase; letter-spacing: .14em;
}

/* Fact strip */
.case-facts {
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1px; background: #e3ecf2; border: 1px solid #e3ecf2;
    border-radius: 12px; overflow: hidden; margin: 0;
}
@media (min-width: 640px) { .case-facts { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.case-facts > div { background: #ffffff; padding: .8rem .95rem; }
.case-facts dt {
    color: rgba(13, 32, 53, .5); font-size: .62rem; text-transform: uppercase;
    letter-spacing: .16em; margin-bottom: .3rem;
}
.case-facts dd { color: #0d2035; font-family: 'Oswald', sans-serif; font-size: 1rem; margin: 0; line-height: 1.25; }

.case-hero-media { border-radius: 16px; overflow: hidden; }
.case-hero-media img {
    display: block; width: 100%; height: 100%;
    aspect-ratio: 4 / 3; object-fit: cover;
}
/* On a phone the image leads: otherwise the reader scrolls past the whole
   copy block before seeing what the project looked like. */
@media (max-width: 1023px) {
    .case-hero-media { order: -1; }
    .case-hero-media img { aspect-ratio: 16 / 10; }
}

.case-related-grid { display: grid; grid-template-columns: 1fr; gap: 1.5rem; }
@media (min-width: 640px)  { .case-related-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .case-related-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* =====================================================================
   FEATURED CASE on the index. It used to rely on `lg:grid-cols-2`, which
   does not exist in the prebuilt Tailwind file, so it rendered as one
   column with a full-bleed image that swallowed the fold.
   ===================================================================== */
.case-featured { display: grid; grid-template-columns: 1fr; gap: 1.5rem; align-items: center; }
@media (min-width: 900px) {
    .case-featured { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 3rem; }
}
.case-featured-media { position: relative; border-radius: 16px; overflow: hidden; }
.case-featured-media img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
@media (max-width: 899px) { .case-featured-media img { aspect-ratio: 16 / 10; } }
.case-featured-badge {
    position: absolute; top: 1rem; left: 1rem;
    background: #F5A623; color: #fff; font-size: 11px; font-weight: 700;
    text-transform: uppercase; letter-spacing: .1em; padding: .3rem .85rem; border-radius: 999px;
}
.case-featured-copy { min-width: 0; }
.case-featured-stat {
    display: flex; align-items: center; gap: 1.25rem; flex-wrap: wrap;
    margin: 0 0 1.35rem; padding-bottom: 1.35rem; border-bottom: 1px solid #e6eef4;
}
.case-featured-stat .num {
    font-family: 'Oswald', sans-serif; font-weight: 600; color: #004477;
    font-size: 2.25rem; line-height: 1;
}
.case-featured-stat .lab {
    display: block; color: rgba(13, 32, 53, .55); font-size: .66rem;
    text-transform: uppercase; letter-spacing: .14em; margin-top: .3rem;
}
.case-featured-stat .route { color: rgba(13, 32, 53, .8); font-family: 'Oswald', sans-serif; font-size: 1.05rem; }
.case-featured-tags { display: flex; flex-wrap: wrap; gap: .45rem; margin-bottom: 1.6rem; }
.case-featured-tags span {
    background: #FDF4E3; color: #E8961A; font-size: 11px; font-weight: 600;
    padding: .22rem .7rem; border-radius: 999px;
}

/* =====================================================================
   CASE STUDY INDEX CARDS (/cases, /de/referenzen, /es/casos)
   One column on a phone (the old 2-up grid squeezed titles to 12px),
   two from 640px, three from 1024px. Uniform 16:10 media window.
   ===================================================================== */
.case-grid { display: grid; grid-template-columns: 1fr; gap: 1.5rem; }
@media (min-width: 640px)  { .case-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .case-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.case-card {
    display: flex; flex-direction: column; background: #fff;
    border: 1px solid #e3ecf2; border-radius: 16px; overflow: hidden;
    text-decoration: none;
    transition: border-color .25s ease, box-shadow .25s ease, transform .25s ease;
}
.case-card:hover {
    border-color: #F5A623;
    box-shadow: 0 18px 34px -18px rgba(13, 32, 53, .38);
    transform: translateY(-4px);
}
.case-card-media { position: relative; aspect-ratio: 16 / 10; overflow: hidden; background: #0A2540; }
.case-card-media img {
    width: 100%; height: 100%; object-fit: cover; display: block;
    transition: transform .5s cubic-bezier(.16, .84, .44, 1);
}
.case-card:hover .case-card-media img { transform: scale(1.05); }
.case-card-cat {
    position: absolute; top: .75rem; left: .75rem;
    background: #F5A623; color: #fff; font-size: 11px; font-weight: 700;
    text-transform: uppercase; letter-spacing: .1em; padding: .25rem .75rem; border-radius: 999px;
}
.case-card-body { display: flex; flex-direction: column; flex: 1 1 auto; padding: 1.35rem; }
.case-card-stat { display: flex; align-items: baseline; gap: .5rem; margin-bottom: .6rem; }
.case-card-stat strong {
    font-family: 'Oswald', sans-serif; font-weight: 600; color: #004477;
    font-size: 1.75rem; line-height: 1;
}
.case-card-stat span {
    color: rgba(13, 32, 53, .55); font-size: .66rem;
    text-transform: uppercase; letter-spacing: .14em;
}
.case-card-title {
    font-family: 'Oswald', sans-serif; font-size: 1.05rem; line-height: 1.25;
    text-transform: uppercase; color: #0d2035; margin: 0 0 .5rem;
    transition: color .2s ease;
}
.case-card:hover .case-card-title { color: #E8961A; }
.case-card-summary { color: rgba(13, 32, 53, .7); font-size: .875rem; line-height: 1.6; margin: 0 0 1.1rem; }
.case-card-tags { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: auto; }
.case-card-tags span {
    background: #FDF4E3; color: #E8961A; font-size: 10px; font-weight: 600;
    padding: .2rem .6rem; border-radius: 999px; white-space: nowrap;
}

/* Case-study body: the auto-TOC grid gives the text column the full remaining
   width, which runs to ~95 characters. Cap the measure. */
.case-body .legal-content { max-width: 46rem; }

/* Blog featured post: `lg:grid-cols-2` / `lg:min-h-[380px]` are absent from the
   prebuilt Tailwind file, so the card fell back to one stacked column with a
   fixed 16rem image. Real grid here. */
.blog-featured { display: grid; grid-template-columns: 1fr; }
@media (min-width: 1024px) { .blog-featured { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.blog-featured-media { height: 16rem; }
@media (min-width: 1024px) { .blog-featured-media { height: 100%; min-height: 380px; } }
.blog-featured-media img { width: 100%; height: 100%; object-fit: cover; }

/* Case study "How we ran it": numbered operational steps. */
.case-steps { list-style: none; margin: 0 0 2rem; padding: 0; counter-reset: none; }
.case-steps li {
    display: grid; grid-template-columns: 2.25rem minmax(0, 1fr);
    gap: 1rem; padding: 1.1rem 0; border-bottom: 1px solid #e6eef4;
}
.case-steps li:last-child { border-bottom: 0; }
.case-step-num {
    display: flex; align-items: center; justify-content: center;
    width: 2.25rem; height: 2.25rem; border-radius: 50%;
    background: #FDF4E3; color: #D48510;
    font-family: 'Oswald', sans-serif; font-weight: 600; font-size: .95rem;
}
.case-steps h3 {
    font-family: 'Oswald', sans-serif; font-size: 1rem; text-transform: uppercase;
    letter-spacing: .02em; color: #0d2035; margin: .25rem 0 .35rem;
}
.case-steps p { color: rgba(13, 32, 53, .75); font-size: .9375rem; line-height: 1.65; margin: 0; }
/* On a case page the figures are the whole block, so drop the trailing gap. */
.kpi-row--last { margin-bottom: 0 !important; }

/* =====================================================================
   MOBILE POLISH PASS
   ===================================================================== */

/* 1. Homepage case cards: on a phone the description ran to five or six lines
   over the photo. Clamp it to two and tighten the block. */
@media (max-width: 767px) {
    .cases-featured-grid > a { min-height: 220px; }
    .cases-featured-grid > a .relative.h-full { padding: 1rem; }
    .cases-featured-grid h3 { font-size: 15px; line-height: 1.3; }
    .cases-featured-grid p {
        font-size: 12.5px; line-height: 1.45;
        display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
        overflow: hidden;
    }
    .cases-featured-grid span[class*="text-[40px]"] { font-size: 30px; }
}

/* 2. Reviews carousel (homepage + city/country). `w-[86%]`, `sm:w-1/2` and
   `md:w-1/3` are all absent from the prebuilt Tailwind file, so the slides had
   no width and the cards spilled out of the container. Real widths here. */
.rev-carousel { position: relative; }
.rev-track {
    display: flex; gap: 1rem;
    overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth;
    -ms-overflow-style: none; scrollbar-width: none;
    padding-bottom: .25rem;
}
.rev-track::-webkit-scrollbar { display: none; }
.rev-slide { flex: 0 0 100%; max-width: 100%; scroll-snap-align: start; }
@media (min-width: 640px)  { .rev-slide { flex-basis: calc((100% - 1rem) / 2); } }
@media (min-width: 1024px) { .rev-slide { flex-basis: calc((100% - 2rem) / 3); } }
.rev-card { height: 100%; border-radius: 12px; padding: 1.25rem; }
.rev-card--dark  { background: #0A2540; border: 1px solid #1a4060; }
.rev-card--light { background: #ffffff; border: 1px solid #e3ecf2; }
.rev-avatar {
    width: 2.5rem; height: 2.5rem; border-radius: 50%; background: #004477;
    display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.rev-avatar span { color: #fff; font-family: 'Oswald', sans-serif; font-size: .875rem; line-height: 1; }
.rev-dots { display: flex; justify-content: center; gap: .4rem; margin-top: 1.1rem; }
.rev-dot {
    width: 7px; height: 7px; border-radius: 50%; border: 0; padding: 0;
    background: rgba(255, 255, 255, .3); cursor: pointer; transition: background .2s, width .2s;
}
.rev-dot.is-active { background: #F5A623; width: 18px; border-radius: 99px; }
.rev-dots--light .rev-dot { background: rgba(13, 32, 53, .2); }
.rev-dots--light .rev-dot.is-active { background: #F5A623; }
@media (min-width: 1024px) { .rev-dots { display: none; } }

/* 3. Accreditation badges: `h-7` does not exist in the prebuilt Tailwind file,
   so the logos rendered at their natural size and stacked. Fixed height, one row. */
.accred-badges { display: flex; flex-wrap: nowrap; gap: .6rem; align-items: stretch; }
.accred-badges > div {
    background: #fff; border-radius: 8px; padding: .45rem .7rem;
    display: flex; align-items: center; box-shadow: 0 8px 20px -12px rgba(0, 0, 0, .5);
    min-width: 0;
}
.accred-badges img { height: 22px; width: auto; max-width: 100%; display: block; }
@media (min-width: 768px) {
    .accred-badges { gap: .75rem; }
    .accred-badges > div { padding: .6rem 1rem; }
    .accred-badges img { height: 28px; }
}

/* 4. Vehicle page CTA: full row on a phone (Tailwind's col-span-2 is missing
   from the prebuilt file), one cell from the md breakpoint like the spec tiles. */
.vehicle-cta { grid-column: 1 / -1; width: 100%; }
@media (min-width: 768px) { .vehicle-cta { grid-column: auto; } }

/* 5. "More cities in <country>": two per row on every screen, so the tiles stay
   large enough to read instead of shrinking to four thin columns. */
.more-cities-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; }
@media (min-width: 768px)  { .more-cities-grid { gap: 1.25rem; } }
@media (min-width: 1024px) { .more-cities-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* 6. Article / case / legal TOC on phones. The sticky rail is desktop-only, so
   below 1024px the same list appears as a collapsible card at the top of the
   content column — previously mobile readers got no table of contents at all. */
.legal-toc .toc-toggle { display: none; }
@media (max-width: 1023px) {
    .legal-toc-wrap { display: block; margin-bottom: 1.5rem; }
    .legal-toc {
        background: #ffffff; border: 1px solid #e3ecf2; border-radius: 12px;
        padding: .9rem 1.1rem;
    }
    .legal-toc .toc-title { display: none; }
    .legal-toc .toc-toggle {
        display: flex; align-items: center; justify-content: space-between; gap: 1rem;
        width: 100%; background: none; border: 0; padding: 0; cursor: pointer;
        font-family: 'Oswald', sans-serif; text-transform: uppercase;
        letter-spacing: .14em; font-size: .74rem; color: #0d2035;
    }
    .legal-toc .toc-toggle span:last-child { transition: transform .25s ease; }
    .legal-toc.open .toc-toggle span:last-child { transform: rotate(180deg); }
    .legal-toc ol {
        max-height: 0; overflow: hidden; border-left-color: transparent;
        transition: max-height .3s ease;
    }
    .legal-toc.open ol { max-height: 60vh; overflow-y: auto; margin-top: .8rem; border-left-color: #e6eef4; }
}

/* 7. Info-page heroes: the fixed 340-440px minimums left a lot of empty navy
   under short headings, especially on phones. Let the content set the height,
   with a floor that keeps the band from looking like a strip. Pages whose hero
   carries more copy simply grow past it. */
section[style*="min-height: 340px"],
section[style*="min-height: 360px"],
section[style*="min-height: 380px"],
section[style*="min-height: 400px"],
section[style*="min-height: 440px"] {
    min-height: 0 !important;
    padding-top: 2.25rem;
    padding-bottom: 2.25rem;
}
@media (min-width: 768px) {
    section[style*="min-height: 340px"],
    section[style*="min-height: 360px"],
    section[style*="min-height: 380px"],
    section[style*="min-height: 400px"],
    section[style*="min-height: 440px"] {
        min-height: 260px !important;
        padding-top: 3rem;
        padding-bottom: 3rem;
    }
}

/* 8. Muted caption text. The blanket `#8aaec4 -> #b5ceda` bump was written for
   the dark navy bands; on the white and cream sections the same kickers and
   captions were almost invisible. Default to a readable ink and restore the
   light tint only inside dark surfaces (footer, navy/blue bands, dark heroes). */
.text-\[\#8aaec4\],
a.text-\[\#8aaec4\],
p.text-\[\#8aaec4\],
span.text-\[\#8aaec4\],
.block.text-\[\#8aaec4\] {
    color: #5b7790 !important;
}
footer .text-\[\#8aaec4\],
.bg-\[\#004477\] .text-\[\#8aaec4\],
.bg-\[\#0A2540\] .text-\[\#8aaec4\],
.bg-\[\#0d2035\] .text-\[\#8aaec4\],
.rev-card--dark .text-\[\#8aaec4\],
.fleet-card\.dark .text-\[\#8aaec4\],
section[style*="background-image"] .text-\[\#8aaec4\],
section[class*="bg-cover"] .text-\[\#8aaec4\] {
    color: #b5ceda !important;
}

/* 9. Homepage hero on phones: a bigger headline (the clamp bottomed out at
   2.1rem, which read small against a full-bleed hero) and the two rating
   pills side by side instead of stacked. */
@media (max-width: 767px) {
    .hero-badges span[style*="height:40px"] {
        height: 32px !important;
        min-width: 0 !important;
        padding: 0 10px !important;
        font-size: 12px !important;
        gap: 5px !important;
    }
    .hero-badges span[style*="height:40px"] svg { width: 15px !important; height: 15px !important; }
    .hero-badges span[style*="height:40px"] span { font-size: 10px !important; letter-spacing: .5px !important; }
}
.hero-badges { display: flex; flex-wrap: nowrap; align-items: center; gap: .5rem; }
@media (min-width: 768px) { .hero-badges { flex-wrap: wrap; gap: .5rem; } }

/* 10. "How we plan your trip": two columns on a 390px screen left the body copy
   at 11px on top of a photo. One card per row on phones, with room to read. */
@media (max-width: 767px) {
    section:has(.process-card) .grid { grid-template-columns: 1fr !important; gap: .75rem !important; }
    .process-card { min-height: 190px; }
    .process-card h3 { font-size: 16px !important; }
    .process-card p  { font-size: 13px !important; line-height: 1.5 !important; }
    .process-card > div:last-child { padding: 1rem !important; }
    .process-card span[class*="text-3xl"] { font-size: 34px !important; }
}

/* Process cards on phones: the card is now full width, so the copy block is
   taller and needs a heavier scrim or the headline sits on top of the photo. */
@media (max-width: 767px) {
    .process-card > div[style*="linear-gradient"] {
        background: linear-gradient(to top,
            rgba(10,37,64,.97) 0%,
            rgba(10,37,64,.94) 55%,
            rgba(10,37,64,.55) 80%,
            rgba(10,37,64,.10) 100%) !important;
    }
}

/* 11. Icons sitting inside a solid navy chip. The blanket
   `.text-[#F5A623] { color: #D48510 }` remap at the top of this file exists for
   amber TEXT on light surfaces; on a #004477 or #0A2540 chip it left the
   chevrons almost invisible. Inside those chips the icon is white. */
span[class*="bg-[#004477]"] > svg,
span[class*="bg-[#0A2540]"] > svg,
div[class*="bg-[#004477]"] > svg,
div[class*="bg-[#0A2540]"] > svg {
    color: #ffffff !important;
}

/* 12. Small uppercase kickers ("OFFICE PHONE", "SERVICE", ...) carry the brand
   amber instead of grey. #D48510 is the readable step of #F5A623 — the raw
   amber measures 1.9:1 on white and would be worse than the grey it replaces.
   Prose captions keep the slate ink; only the kickers change. */
.text-\[\#8aaec4\][class*="uppercase"],
span.text-\[\#8aaec4\][class*="uppercase"],
p.text-\[\#8aaec4\][class*="uppercase"],
.block.text-\[\#8aaec4\][class*="uppercase"] {
    color: #D48510 !important;
}
/* on the dark bands the kicker keeps the existing amber-on-navy treatment */
footer .text-\[\#8aaec4\][class*="uppercase"],
.bg-\[\#004477\] .text-\[\#8aaec4\][class*="uppercase"],
.bg-\[\#0A2540\] .text-\[\#8aaec4\][class*="uppercase"],
.bg-\[\#0d2035\] .text-\[\#8aaec4\][class*="uppercase"],
section[style*="background-image"] .text-\[\#8aaec4\][class*="uppercase"],
section[class*="bg-cover"] .text-\[\#8aaec4\][class*="uppercase"] {
    color: #F5A623 !important;
}

/* 13. "See more countries" sits inside the country grid, so as a short pill it
   left a gap beside the last tile. It now fills its cell like a card. */
.country-more-cta {
    text-align: center !important;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .35rem;
    line-height: 1.25;
}
/* Phone: it fills its cell like the country tiles beside it. */
@media (max-width: 767px) {
    .country-more-cta {
        height: 9rem;              /* matches the h-36 country tiles */
        width: 100%;
        border-radius: 12px;
        flex-direction: column;
        padding-left: 1rem;
        padding-right: 1rem;
    }
}
/* Desktop: back to an ordinary button, centred on its own row under the grid
   (it is a grid child, so it spans every column rather than taking one cell). */
@media (min-width: 768px) {
    .country-more-cta {
        grid-column: 1 / -1;
        justify-self: center;
        width: auto;
        height: auto;
        margin-top: 1rem;
    }
}

/* 14. Phone headline size, set explicitly so every page reads the same.
   The clamps bottomed out around 2.1-2.25rem at 390px, which looked small
   next to the body copy. */
@media (max-width: 767px) {
    h1, .page-h1 { font-size: 2.75rem !important; }
}

/* 15. Two-column text/photo sections on phones: the photo comes first.
   Stacked in DOM order the image ended up under a long block of copy, so the
   reader scrolled past the whole text before seeing what the section is about.
   Scoped tightly: only grids that become two columns at a breakpoint AND hold
   exactly two children, and only the child that is a bare media column (no
   heading, paragraph or form of its own). `.seo-photo-first` above does the
   same job where the class was added by hand. */
@media (max-width: 767px) {
    [class*="md:grid-cols-2"]:has(> :nth-child(2):last-child) > div:has(> img, > picture, > .zoom-wrap, > a > img):not(:has(h1, h2, h3, p, form, ul, dl)),
    [class*="lg:grid-cols-2"]:has(> :nth-child(2):last-child) > div:has(> img, > picture, > .zoom-wrap, > a > img):not(:has(h1, h2, h3, p, form, ul, dl)) {
        order: -1;
        margin-bottom: .5rem;
    }
}

/* =====================================================================
   ARBITRARY TEXT COLOURS MISSING FROM THE PREBUILT TAILWIND FILE
   Opacity-modified colours (`text-[#hex]/NN`) and a couple of one-offs are
   not in assets/css/tailwind-built.css, so those elements inherited their
   parent's ink instead. On the dark reviews card that made
   "4.8 on TripAdvisor" render near-black and unreadable.
   ===================================================================== */
.text-\[\#0d2035\]\/90 { color: rgba(13, 32, 53, .90); }
.text-\[\#0d2035\]\/75 { color: rgba(13, 32, 53, .75); }
.text-\[\#0d2035\]\/65 { color: rgba(13, 32, 53, .65); }
.text-\[\#0d2035\]\/55 { color: rgba(13, 32, 53, .55); }
.text-\[\#b5ceda\]\/70 { color: rgba(181, 206, 218, .8); }
.text-\[\#8aaec4\]\/70 { color: rgba(181, 206, 218, .72); }
.text-\[\#D48510\]     { color: #D48510; }
.hover\:text-\[\#A8690A\]:hover { color: #A8690A; }

/* ---------------------------------------------------------------------------
   Message fields. The prebuilt Tailwind only ships .resize-none, so the
   draggable corner has to be declared here. Height is driven by main.js
   (grow-with-content) which is why the scrollbar normally never appears; the
   max-height cap keeps a long message from pushing the modal off screen.
   --------------------------------------------------------------------------- */
textarea.form-textarea {
    resize: vertical;
    overflow-y: auto;
    min-height: 5.25rem;
    max-height: 40vh;
}

/* =====================================================================
   MOBILE PASS 2 (2026-07-29)
   ===================================================================== */

/* 16. One prose size on phones. The article body ran at 17px/1.8 which left
   about six words per line on a 390px screen, and elsewhere paragraphs came in
   at 18, 17, 16 and 14px depending on which utility the page happened to use.
   Phones now get a single scale: 16px lead and body, 15px secondary, and the
   line-height comes down from 1.8 to 1.62 (that, more than the size, is what
   made the columns feel airy). Headings are untouched. */
@media (max-width: 767px) {
    .article-body,
    .article-body > p,
    .article-body li,
    .article-body > ul li,
    .article-body > ol li { font-size: 1rem; line-height: 1.62; }
    .article-body p { margin-bottom: 1rem; }
    .article-body > ul, .article-body > ol { margin-bottom: 1rem; }

    /* Lead paragraphs and body copy outside articles. `.page-h1 + p` is
       repeated with its :not() because the desktop rule above scores (0,2,1)
       and would otherwise outrank a plain p.text-lg here. */
    p.text-xl, li.text-xl,
    p.text-lg, li.text-lg,
    .page-h1 + p,
    .page-h1 + p:not(.case-hero-lead),
    .article-lead-text,
    p[class*="text-\[17px\]"],
    p[class*="text-\[18px\]"] { font-size: 1rem; line-height: 1.55; }
    p.text-base, li.text-base, div.text-base { font-size: .9375rem; line-height: 1.55; }
}

/* 17. Form fields on phones.
   The date button carries a from-to range ("29-31 Jul 2026"); at 16px that
   wrapped onto a second line and grew the field taller than the stepper beside
   it. The label is now nowrap with an ellipsis fallback and the field has a
   fixed height, so the row stays level whatever is selected.
   Placeholders shrink, but the inputs themselves stay at 16px on purpose:
   below that, iOS Safari zooms the whole page as soon as a field is focused. */
@media (max-width: 767px) {
    .dp-field {
        font-size: .8125rem;
        padding: .7rem .8rem;
        min-height: 48px;
        align-items: center;
    }
    .dp-label {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        min-width: 0;
    }
    .dp-field svg, .dp-field img { flex: 0 0 auto; }

    /* 16px is the threshold: iOS Safari zooms the page as soon as a control
       rendering below it takes focus. The selectors have to out-score the
       Tailwind size utilities on the markup (`text-sm` is 0,1,0), which is why
       the bare `textarea` and `.step-input` are qualified here. */
    input[type="text"], input[type="email"], input[type="tel"],
    input[type="number"], input[type="date"], input[type="search"],
    input[type="url"], input[type="password"], input:not([type]),
    textarea, select,
    textarea.form-textarea,
    .stepper .step-input,
    input.step-input,
    #quote-modal textarea,
    #quote-modal input:not([type="checkbox"]):not([type="hidden"]) {
        font-size: 16px;
    }
    /* The homepage hero form sets font-size inline to keep its widgets compact,
       and an inline style outranks every stylesheet rule, so these two need
       !important. Scoped to text-entry controls: the date field is a <button>
       and never triggers the zoom, so it keeps its compact size. */
    input[style*="font-size"], textarea[style*="font-size"],
    .stepper .step-input { font-size: 16px !important; }

    /* only the hint shrinks: placeholder size does not affect the zoom */
    input::placeholder, textarea::placeholder,
    .step-input::placeholder, #quote-modal textarea::placeholder { font-size: .875rem; }
}

/* 18. The three stat tiles under the quote form. At one third of a 390px screen
   the tile is about 100px wide, so "Google - TripAdvisor" on a nowrap line ran
   past its border and "COUNTRIES" broke mid-word. The provenance line wraps on
   phones, the labels lose their letter-spacing, and the padding comes in. */
@media (max-width: 767px) {
    .form-stats { gap: .5rem !important; }
    .form-stats > div { padding: .8rem .4rem !important; }
    .form-stats p:first-child { font-size: 1.6rem !important; }
    .form-stats p[class*="text-xs"] {
        font-size: 10px !important;
        letter-spacing: 0 !important;
        overflow-wrap: normal;
        word-break: keep-all;
        hyphens: none;
    }
    /* the "Google - TripAdvisor" provenance line, here and on the city,
       country, about and safety pages that reuse the same tile */
    .whitespace-nowrap[class*="text-\[10px\]"] {
        white-space: normal !important;
        font-size: 9px !important;
        line-height: 1.25 !important;
    }
}

/* 19. Mobile menu. It used to expand in the flow of the page as a loose list of
   40px rows with no separators, so the page jumped and the panel read as
   unfinished. It is now a proper drawer: fixed under the header, its own
   scroll, a dimmed backdrop behind it, even 52px rows with hairline dividers,
   a chevron that turns when a section opens, and the current page marked. */
#nav-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(6, 20, 36, .55);
    backdrop-filter: blur(2px);
    /* below the <nav>'s own z-50 stacking context: the drawer is a child of
       that context, so a backdrop above 50 would cover the menu itself */
    z-index: 40;
    opacity: 0;
    transition: opacity .18s ease;
}
#nav-backdrop.show { opacity: 1; }

@media (max-width: 1023px) {
    #nav-mobile:not(.hidden) {
        position: fixed;
        left: 0;
        right: 0;
        z-index: 1;
        /* only as tall as its contents, so the dimmed page stays visible under
           it and the panel reads as a drawer rather than a full takeover */
        max-height: calc(100vh - 4rem) !important;
        border-radius: 0 0 14px 14px;
        overflow-y: auto;
        overscroll-behavior: contain;
        padding: 0 !important;
        border-top: 1px solid rgba(255, 255, 255, .1);
        box-shadow: 0 18px 40px rgba(0, 0, 0, .35);
        animation: navDrawerIn .2s ease both;
    }
    @keyframes navDrawerIn { from { opacity: 0; transform: translateY(-8px); } }

    #nav-mobile > ul { margin: 0; }
    #nav-mobile > ul > li { margin: 0 !important; border-bottom: 1px solid rgba(255, 255, 255, .08); }
    #nav-mobile > ul > li:last-child { border-bottom: 0; }

    /* top level rows: one rhythm for links and for section toggles */
    #nav-mobile > ul > li > a,
    #nav-mobile > ul > li > .mobile-mega-toggle {
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: 100%;
        min-height: 52px;
        padding: 0 1.25rem !important;
        margin: 0 !important;
        font-size: .9375rem;
        font-weight: 500;
        color: #e8f0f7;
        line-height: 1.3;
    }
    #nav-mobile > ul > li > a:active,
    #nav-mobile > ul > li > .mobile-mega-toggle:active { background: rgba(255, 255, 255, .05); }

    /* the page you are on */
    #nav-mobile a.nav-current {
        color: #F5A623;
        box-shadow: inset 3px 0 0 #F5A623;
    }

    #nav-mobile .mobile-mega-toggle svg { transition: transform .18s ease; opacity: .7; }
    #nav-mobile .mobile-mega-toggle.open svg { transform: rotate(180deg); opacity: 1; }
    #nav-mobile .mobile-mega-toggle.open { color: #F5A623; }

    /* submenus sit on a slightly darker panel with an amber rule down the side */
    #nav-mobile .mobile-mega-sub {
        background: rgba(0, 0, 0, .14);
        border-left: 2px solid rgba(245, 166, 35, .5);
        margin: 0 0 .5rem 1.25rem !important;
        padding: .35rem 0 .35rem .9rem !important;
    }
    #nav-mobile .mobile-mega-sub li { margin: 0 !important; }
    #nav-mobile .mobile-mega-sub a {
        display: block;
        padding: .5rem .25rem !important;
        font-size: .875rem;
        line-height: 1.35;
    }

    /* the city / country list is long: two columns so it does not scroll forever */
    #nav-mobile .mobile-mega-sub.sub-cols:not(.hidden) {
        display: grid;
        grid-template-columns: 1fr 1fr;
        column-gap: .5rem;
    }
    #nav-mobile .mobile-mega-sub.sub-cols > li.sub-full { grid-column: 1 / -1; }

    /* footer of the drawer: full-width CTA, language as one segmented control */
    #nav-mobile .nav-mobile-cta {
        padding: .9rem 1.25rem !important;
        border-bottom: 0 !important;
    }
    #nav-mobile .nav-mobile-cta a {
        display: block;
        width: 100%;
        text-align: center;
        padding: .8rem 1rem;
        min-height: 0;
        font-size: .875rem;
    }
    #nav-mobile .nav-mobile-lang {
        padding: 0 1.25rem 1.25rem !important;
        margin: 0 !important;
        border-top: 1px solid rgba(255, 255, 255, .08);
        padding-top: 1rem !important;
    }
    #nav-mobile .nav-mobile-lang > div {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: .35rem;
        background: rgba(0, 0, 0, .2);
        padding: .25rem;
        border-radius: .6rem;
    }
    #nav-mobile .nav-mobile-lang a {
        text-align: center;
        padding: .55rem 0 !important;
        min-height: 0;
        border-radius: .45rem;
        font-size: .8125rem;
    }
}

/* the hamburger turns into a close mark while the drawer is open */
#nav-toggle.is-open { color: #F5A623; }

/* 20. Date + passengers share a row. On a 390px screen that leaves the date
   button about 97px of text, enough for "29-31 Jul 2026" but not for a range
   that crosses a month or a year, which then got cut off with an ellipsis and
   left the visitor unable to read their own selection. On phones the date
   takes the full row and the stepper drops below it. */
@media (max-width: 767px) {
    .date-pax-row { grid-template-columns: 1fr !important; }
}

/* 21. Review meta lines ("Wedding Transportation - Barcelona - Spain") carry
   Tailwind's `truncate`, which on a phone-width card cut the city and country
   off entirely. On phones they wrap to a second line instead. */
@media (max-width: 767px) {
    p.truncate[class*="text-xs"] {
        white-space: normal;
        overflow: visible;
        text-overflow: clip;
    }
}

/* ---------------------------------------------------------------------------
   Thank-you page body (thank-you.php, de/danke.php, es/gracias.php).
   Written as real CSS rather than utilities: mt-12/mt-14/mt-16 do not exist in
   the prebuilt Tailwind file (it stops at mt-10), so the "while you wait"
   heading was landing flush against the cards above it.
   --------------------------------------------------------------------------- */
.ty-body { padding: 3.5rem 0 4rem; }
@media (min-width: 768px) { .ty-body { padding: 4.5rem 0 5.5rem; } }

.ty-wrap { max-width: 64rem; margin: 0 auto; padding: 0 1.5rem; }

/* Steps ------------------------------------------------------------------- */
.ty-steps {
    list-style: none;
    margin: 2rem 0 0;
    padding: 0;
    display: grid;
    gap: 1rem;
}
@media (min-width: 768px) { .ty-steps { grid-template-columns: repeat(3, 1fr); gap: 1.25rem; } }

.ty-step {
    position: relative;
    display: flex;
    flex-direction: column;
    background: #ffffff;
    border: 1px solid #d9e4ee;
    border-radius: 14px;
    padding: 1.6rem 1.4rem 1.5rem;
    overflow: hidden;
}
/* amber rule across the top, so the three cards read as one set */
.ty-step::before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 3px;
    background: #F5A623;
}
.ty-step-num {
    display: block;
    font-family: 'Oswald', sans-serif;
    font-size: 2.1rem;
    font-weight: 700;
    line-height: 1;
    color: #F5A623;
    margin-bottom: .6rem;
}
.ty-step-title {
    font-family: 'Oswald', sans-serif;
    font-size: 1.0625rem;
    text-transform: uppercase;
    letter-spacing: .01em;
    color: #0d2035;
    margin: 0 0 .5rem;
}
.ty-step-text {
    color: #324151;
    font-size: .9375rem;
    line-height: 1.6;
    margin: 0;
}

/* "While you wait" -------------------------------------------------------- */
.ty-wait { margin-top: 3.25rem; }
@media (min-width: 768px) { .ty-wait { margin-top: 4rem; } }

.ty-links { display: grid; gap: .75rem; margin-top: 1.75rem; }
@media (min-width: 640px) { .ty-links { grid-template-columns: repeat(3, 1fr); } }

/* Secondary destinations, so they are outlined cards rather than three solid
   amber buttons: the page's primary action is already complete by this point. */
.ty-link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    min-height: 56px;
    padding: .9rem 1.1rem;
    background: #ffffff;
    border: 1px solid #d9e4ee;
    border-radius: 12px;
    color: #0d2035;
    font-family: 'Oswald', sans-serif;
    font-size: .8125rem;
    text-transform: uppercase;
    letter-spacing: .06em;
    line-height: 1.25;
    transition: border-color .15s ease, color .15s ease, transform .15s ease, box-shadow .15s ease;
}
.ty-link svg { width: 1.05rem; height: 1.05rem; flex: 0 0 auto; color: #D48510; }
.ty-link:hover {
    border-color: #F5A623;
    color: #004477;
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(10, 37, 64, .08);
}

/* Footer line ------------------------------------------------------------- */
.ty-contact {
    margin: 3rem 0 0;
    padding-top: 1.5rem;
    border-top: 1px solid #e3ebf2;
    color: #5b7790;
    font-size: .9375rem;
}
.ty-contact a { color: #D48510; font-weight: 600; }
.ty-contact a:hover { color: #A8690A; }