: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;
}