/*
Theme Name: autorozendaalc
Theme URI: https://autobedrijf-rozendaal.nl
Author: BlueCT Site Factory
Description: Maatwerk classic theme voor Autobedrijf Rozendaal, full-service autobedrijf sinds 1964 in Groot-Ammers. Content via SCF, layout in PHP.
Version: 1.0.0
Requires at least: 6.4
Requires PHP: 8.0
License: GPL-2.0-or-later
Text Domain: autorozendaalc
*/

/* Concept: "Engineered trust" — een strak, zelfverzekerd familiebedrijf-gevoel.
   Merkblauw en navy dragen de betrouwbaarheid, oranje is de energieke proefrit/CTA-kleur,
   cream secties geven rust. Acumin Pro (Adobe Fonts, kit sei8xmx) voor display en body: 700/800 voor
   koppen, 400 voor lopende tekst. Navy en blauw zijn de kleuren uit het logo (2026-11).
   Signature details: oversized index-cijfers op de stappen ("01") en een korte oranje accentmarker
   voor de koppen. Hairline navy rules scheiden de banden. */

/* ---------- Tokens ---------- */
:root {
  /* Brand colours: navy #1A3054 en blauw #2675BB komen rechtstreeks uit het logo
     (Autobedrijf_rozendaal.svg). Afgeleiden (donker blauw, tint, navy-2) zijn op
     die twee gebaseerd. Oranje is de CTA-kleur en staat niet in het logo. */
  --blue: #2675BB;
  --blue-dark: #1C5B96;
  --blue-tint: #DEEAF6;
  --orange: #E8832A;
  --orange-dark: #C96B18;
  --orange-cream: #FEF3E8;
  --navy: #1A3054;
  --navy-2: #24406B;
  --paper: #FAF9F7;
  --green: #1F6B35;

  --ink: #1A3054;
  --ink-soft: #44546F;
  --white: #ffffff;
  --line: #e2e6ec;
  --line-dark: rgba(255,255,255,.14);

  /* Accessible small-accent text (darkened orange, clears 4.5:1 on paper/white) */
  --accent-text: #9A4D10;
  /* Accent for large headings / fills / borders / icons (only needs 3:1) */
  --accent: #E8832A;

  /* Button tokens */
  --btn-fill: #E8832A;           /* orange CTA */
  --btn-label: #1A3054;          /* dark navy label on orange -> ~5.5:1 */
  --btn-fill-hover: #E28034;
  --btn-blue-fill: #1C5B96;      /* secondary solid blue (logo blue, darkened) */
  --btn-blue-label: #ffffff;     /* white on blue-dark -> ~6.3:1 */

  /* Surfaces */
  --surface: #DEEAF6;            /* tinted band (tint of logo blue) */
  --surface-cream: #FAF9F7;

  /* Type */
  --font-display: "acumin-pro", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-body: "acumin-pro", system-ui, -apple-system, "Segoe UI", sans-serif;

  /* Fluid type scale. The clamp MINIMUM (1st value) is the mobile size; the MAX
     (3rd) is desktop. Mobile minimums for the display steps are kept modest so
     headings don't overwhelm small screens (desktop maxima unchanged). */
  --step--1: clamp(.86rem, .82rem + .2vw, .95rem);
  --step-0: clamp(1.0625rem, 1rem + .25vw, 1.125rem);
  --step-1: clamp(1.15rem, 1.05rem + .5vw, 1.4rem);
  --step-2: clamp(1.3rem, 1.15rem + .8vw, 1.85rem);
  --step-3: clamp(1.55rem, 1.3rem + 1.3vw, 2.5rem);
  --step-4: clamp(1.85rem, 1.5rem + 2.2vw, 3.25rem);
  --step-5: clamp(2.05rem, 1.6rem + 3vw, 4.25rem);

  /* Spacing */
  --space-2xs: .5rem;
  --space-xs: .75rem;
  --space-s: 1rem;
  --space-m: 1.5rem;
  --space-l: 2rem;
  --space-xl: 3rem;
  --space-2xl: 4.5rem;
  --space-3xl: 7rem;

  --radius: 14px;
  --radius-lg: 22px;
  --radius-pill: 999px;
  --container: 1280px;
  --measure: 760px;
  --shadow: 0 18px 45px -22px rgba(26,48,84,.35);
  --shadow-soft: 0 10px 30px -18px rgba(26,48,84,.28);
}

/* ---------- Reset ---------- */
*,*::before,*::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
/* Guard against horizontal scroll: the off-canvas mobile drawer lives at
   translateX(100%) just off the right edge, and any element that slightly exceeds
   the viewport would otherwise let the page scroll sideways — which reveals the
   drawer and cuts text off at the right. Clip horizontal overflow at the root so
   the page can NEVER scroll sideways (the drawer still slides in via transform). */
/* overflow-x: CLIP, not hidden — `hidden` creates a scroll container on the
   ancestor which silently BREAKS position:sticky (the sticky header stops
   sticking). `clip` clips without a scroll container, so sticky keeps working. */
html, body { overflow-x: clip; max-width: 100%; }
@supports not (overflow-x: clip) { html, body { overflow-x: hidden; } }
body {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--step-0);
  line-height: 1.65;
  color: var(--ink);
  background: var(--white);
  -webkit-font-smoothing: antialiased;
}
img,svg,video { max-width: 100%; height: auto; display: block; }
/* Inline ICON svg must sit ON THE SAME LINE as adjacent text. The
   `svg{display:block}` above is right for standalone media, but an icon placed
   inside a text link/paragraph then drops to its own line (this caused the nav
   chevron under "Diensten" and the "terug" back-link icon wrapping). Make icons
   that sit inline with text `inline-block` + `vertical-align:middle`. We do NOT
   force display on `a`/`.mega-link` (those have their own layout, incl. the mobile
   dropdown) — aligning the SVG itself is enough and side-effect-free. */
a > svg, button > svg, p svg, li > a svg, span svg { display: inline-block; vertical-align: middle; }
::selection { background: var(--orange); color: var(--navy); }

h1,h2,h3,h4 {
  font-family: var(--font-display);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--ink);
  margin: 0 0 .6em;
  /* Long unbreakable tokens (spec strings like "AUTOMAAT/CRUISE/PDC/AIRCO", URLs,
     model codes) must WRAP instead of overflowing the screen on mobile. */
  overflow-wrap: anywhere;
  word-break: break-word;
}
h1 { font-size: var(--step-5); line-height: 1.05; }
h2 { font-size: var(--step-4); }
h3 { font-size: var(--step-2); font-weight: 700; }
h4 { font-size: var(--step-1); font-weight: 700; }
p { margin: 0 0 1em; }
a { color: var(--blue-dark); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--orange-dark); }
ul,ol { margin: 0 0 1em; padding-left: 1.2em; }
strong { font-weight: 700; }

/* ---------- Layout ---------- */
.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: clamp(1rem, 5vw, 2rem);
}
.section { padding-block: clamp(4rem, 9vw, 7rem); }
.section--tight { padding-block: clamp(3rem, 6vw, 4.5rem); }
.section--tint { background: var(--surface); }
.section--cream { background: var(--paper); }
.section--dark { background: var(--navy); color: #eaf1f8; }
.section--dark h1,.section--dark h2,.section--dark h3 { color: #fff; }
.section--dark a { color: #cfe2f4; }

/* Prose measure — ONLY long-form bodies (post/keyword/service long copy) */
.prose--longform { max-width: var(--measure); margin-inline: auto; text-align: left; }
.prose h2 { margin-top: 1.6em; }
.prose h3 { margin-top: 1.3em; }
.prose ul { padding-left: 1.2em; }
.prose ul li { margin-bottom: .4em; }

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 1000;
  background: var(--navy); color: #fff; padding: .75rem 1.25rem; border-radius: 0 0 var(--radius) 0;
}
.skip-link:focus { left: 0; }

:where(a,button,input,textarea,select,summary,[tabindex]):focus-visible {
  outline: 3px solid var(--orange);
  outline-offset: 2px;
  border-radius: 3px;
}

.eyebrow {
  display: inline-flex; align-items: center; gap: .55rem;
  font-family: var(--font-display); font-weight: 700;
  font-size: var(--step--1); letter-spacing: .08em; text-transform: uppercase;
  color: var(--accent-text); margin: 0 0 .9rem;
}
.eyebrow::before {
  content: ""; width: 26px; height: 3px; border-radius: 2px; background: var(--orange);
}
.section--dark .eyebrow { color: #ffb877; }
.lead { font-size: var(--step-1); line-height: 1.55; color: var(--ink-soft); max-width: 60ch; }
.section--dark .lead { color: #cfdcec; }
.muted { color: var(--ink-soft); }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .55rem;
  font-family: var(--font-display); font-weight: 700; font-size: var(--step-0);
  line-height: 1; text-decoration: none; cursor: pointer;
  padding: .95rem 1.6rem;
  border-radius: var(--radius-pill);
  border: 2px solid transparent;
  transition: transform .18s ease, background-color .18s ease, color .18s ease, border-color .18s ease;
}
.btn:hover { transform: translateY(-2px); }
.btn--primary { background: var(--btn-fill); color: var(--btn-label); }
.btn--primary:hover { background: var(--btn-fill-hover); color: var(--btn-label); }
.btn--secondary { background: var(--btn-blue-fill); color: var(--btn-blue-label); }
.btn--secondary:hover { background: var(--blue); color: #fff; }
.btn--ghost { background: transparent; color: var(--blue-dark); border-color: var(--blue-dark); }
.btn--ghost:hover { background: var(--blue-dark); color: #fff; }
/* Ghost on dark bands — reassert light label so it never renders blue-on-navy */
.section--dark .btn--ghost,
.hero .btn--ghost,
.cta-band .btn--ghost,
.price-box .btn--ghost,
.card--dark .btn--ghost { color: #eaf1f8; border-color: rgba(255,255,255,.6); }
.section--dark .btn--ghost:hover,
.hero .btn--ghost:hover,
.cta-band .btn--ghost:hover,
.price-box .btn--ghost:hover,
.card--dark .btn--ghost:hover { background: #fff; color: var(--navy); }
/* Re-assert filled-button labels inside dark containers (specificity guard) */
.cta-band .btn--primary,
.price-box .btn--primary,
.card--dark .btn--primary { color: var(--btn-label); }
.btn svg { width: 20px; height: 20px; }

.cta-row { display: flex; flex-wrap: wrap; gap: .8rem; align-items: center; }
.cta-note { font-size: var(--step--1); color: var(--ink-soft); }
.section--dark .cta-note { color: #cfdcec; }

/* ---------- Header ---------- */
.site-header {
  position: sticky; top: 0; z-index: 100;
  border-bottom: 1px solid var(--line);
}
/* The frosted-glass effect lives on a ::before pseudo, NOT on the header itself:
   backdrop-filter on the header would make it the CONTAINING BLOCK for the
   position:fixed mobile drawer inside it — the drawer then anchors to the header/
   document instead of the viewport and opens at the top of the page after
   scrolling. A pseudo-element has no descendants, so fixed children stay
   viewport-fixed while the blur still renders. */
.site-header::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: rgba(255,255,255,.92);
  backdrop-filter: saturate(140%) blur(8px);
}
.header-inner {
  display: flex; align-items: center; justify-content: space-between; gap: 1.5rem;
  padding-block: .7rem;
}
/* Brand: logo-only (no redundant name), optional slogan under it, ALWAYS keeps
   the logo's natural aspect ratio (cap height, width auto, never distort). */
.brand { display: inline-flex; flex-direction: column; justify-content: center; gap: .15rem; text-decoration: none; color: var(--ink); min-width: 0; }
.brand-logo { display: inline-flex; }
.brand-logo-img,
.brand-logo img { height: clamp(44px, 5vw, 62px); width: auto; max-width: min(60vw, 240px); object-fit: contain; display: block; }
.brand-text { display: flex; flex-direction: column; line-height: 1.1; }
.brand-name { font-family: var(--font-display); font-weight: 800; font-size: clamp(1.05rem, 1.6vw, 1.2rem); letter-spacing: -0.01em; color: var(--navy); }
.brand-slogan { font-size: clamp(.66rem, 1vw, .74rem); color: var(--ink-soft); letter-spacing: .02em; line-height: 1.2; }

/* ---------- Primary nav (desktop): fluid, never squeezed ---------- */
.primary-nav { display: flex; align-items: center; gap: clamp(.9rem, 1.6vw, 1.6rem); }
.nav-menu { display: flex; align-items: center; gap: clamp(.75rem, 1.4vw, 1.35rem); list-style: none; margin: 0; padding: 0; }
.nav-menu > li { position: relative; }
.nav-menu a { text-decoration: none; color: var(--ink); font-weight: 500; font-size: clamp(.9rem, 1vw, .98rem); white-space: nowrap; }
.nav-menu > li > a { display: inline-flex; align-items: center; gap: .3rem; padding: .4rem 0; }
.nav-menu a:hover, .nav-menu .current-menu-item > a { color: var(--blue-dark); }
.flyout-chev { transition: transform .2s ease; }
.has-flyout.is-open > a .flyout-chev,
.has-flyout:hover > a .flyout-chev { transform: rotate(180deg); }

/* Flyout wrapper (dropdown OR mega) — hidden by default. On DESKTOP it opens on
   hover/focus-within OR the .is-open tap-state. These :hover/:focus-within rules
   are DESKTOP-ONLY (min-width): on mobile a tap leaves the link :focus-within,
   which would keep the submenu open forever and defeat the tap-to-close accordion —
   so on mobile ONLY the .is-open class (toggled by JS) controls it (see media
   query below). */
.submenu-wrap { display: none; }
@media (min-width: 981px) {
  .nav-menu > li.has-flyout:hover > .submenu-wrap,
  .nav-menu > li.has-flyout:focus-within > .submenu-wrap { display: block; }
}
.nav-menu > li.has-flyout.is-open > .submenu-wrap { display: block; }
.sub-menu { list-style: none; margin: 0; padding: 0; }

/* Plain dropdown (<=3 items) */
.nav-menu > li.has-flyout > .submenu-wrap {
  position: absolute; top: 100%; left: 0; z-index: 200; padding-top: .5rem;
}
.sub-menu:not(.mega-menu) {
  min-width: 220px; background: #fff; border: 1px solid var(--line); border-radius: 14px;
  box-shadow: 0 24px 60px -30px rgba(26,48,84,.45); padding: .5rem;
}
.sub-menu:not(.mega-menu) li > a { display: block; padding: .6rem .8rem; border-radius: 9px; }
.sub-menu:not(.mega-menu) li > a:hover { background: var(--tint, #f0f7fd); color: var(--blue-dark); }

/* Image mega-menu (>=4 items): CENTERED on the header/viewport, capped with a
   gutter so it never runs off-screen (NOT anchored to the parent item's left
   edge). To center on the header rather than the item, the mega's offset parent
   must be .site-header — so a li that carries a MEGA submenu is set static, while
   a li with a plain dropdown stays relative (dropdown anchors to the item). */
.site-header { position: sticky; }              /* already a positioning context */
.nav-menu > li.has-flyout:has(.mega-menu) { position: static; }
.nav-menu > li.has-flyout > .submenu-wrap:has(.mega-menu) { position: static; padding-top: 0; }
.mega-menu {
  position: absolute; top: 100%; z-index: 200;
  left: 50%; transform: translateX(-50%);
  display: grid; grid-template-columns: repeat(4, 1fr); gap: .5rem;
  width: min(1100px, calc(100vw - 3rem)); max-width: calc(100vw - 3rem);
  background: #fff; border: 1px solid var(--line); border-radius: 18px;
  box-shadow: 0 30px 80px -35px rgba(26,48,84,.5); padding: 1rem; margin-top: .25rem;
}
.mega-link { display: flex; gap: .7rem; align-items: center; padding: .6rem; border-radius: 12px; }
.mega-link:hover { background: var(--tint, #f0f7fd); }
.mega-thumb { flex: 0 0 auto; width: 56px; height: 56px; border-radius: 10px; overflow: hidden; background: var(--navy); display: inline-flex; align-items: center; justify-content: center; color: #fff; }
.mega-thumb img { width: 100%; height: 100%; object-fit: cover; }
.mega-body { display: flex; flex-direction: column; min-width: 0; }
.mega-title { font-weight: 700; color: var(--navy); font-size: .95rem; }
.mega-desc { font-size: .8rem; color: var(--ink-soft); line-height: 1.3; }

.header-cta { display: flex; align-items: center; gap: clamp(.4rem, 1vw, .6rem); }
.header-phone { display: inline-flex; align-items: center; gap: .4rem; font-weight: 600; text-decoration: none; color: var(--navy); white-space: nowrap; }
.header-phone svg { width: 18px; height: 18px; }

/* The in-drawer close (X) is hidden by default (desktop); it only shows inside the
   open mobile drawer (styled in the max-width media query below). Without this base
   rule it leaks into the desktop header. */
.drawer-close { display: none; }
.nav-toggle {
  display: none; align-items: center; justify-content: center;
  width: 46px; height: 46px; padding: 0; position: relative; z-index: 1002;
  background: var(--navy); color: #fff; border: none; border-radius: 12px; cursor: pointer;
}
.nav-toggle svg { width: 24px; height: 24px; }
.nav-toggle .icon-close { display: none; }
.nav-toggle[aria-expanded="true"] .icon-open { display: none; }
.nav-toggle[aria-expanded="true"] .icon-close { display: block; }
/* Dim overlay behind the open drawer — tapping it closes the menu (added by JS).
   z-index 990 keeps it BELOW the header (and its child drawer), whose stacking
   context we raise to 1000 while the menu is open (see body.nav-open) so the drawer
   always sits ABOVE the overlay and its links stay tappable. */
.nav-overlay {
  position: fixed; inset: 0; z-index: 990; background: rgba(26,48,84,.5);
  opacity: 0; visibility: hidden; transition: opacity .28s ease, visibility .28s ease;
}
.nav-overlay.is-active { opacity: 1; visibility: visible; }
/* While the drawer is open, lift the whole header stacking context above the
   overlay so the fixed drawer (a header descendant) paints on top of it. */
body.nav-open .site-header { z-index: 1000; }

/* Collapse to the mobile drawer earlier if the bar gets tight (fluid, #11). */
@media (max-width: 980px) {
  .nav-toggle { display: inline-flex; }
  /* Mobile drawer: FULL height, and scrollable if items overflow the viewport.
     z-index sits ABOVE the overlay (1000) but the header's .nav-toggle X (1002)
     stays tappable above it. */
  .primary-nav {
    position: fixed; inset: 0 0 0 auto; width: min(90vw, 380px); z-index: 1001;
    height: 100dvh; max-height: 100dvh;
    flex-direction: column; align-items: stretch; gap: 0;
    background: #fff; padding: 5rem 1.25rem calc(2rem + env(safe-area-inset-bottom));
    box-shadow: -20px 0 60px -30px rgba(26,48,84,.5);
    transform: translateX(100%); transition: transform .28s ease;
    overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain;
  }
  .primary-nav.is-open { transform: translateX(0); }
  /* In-drawer close (X) button, top-right of the open panel — always visible. */
  .drawer-close {
    position: absolute; top: 1rem; right: 1rem; z-index: 1; width: 44px; height: 44px;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--tint, #f0f7fd); color: var(--navy); border: none; border-radius: 12px; cursor: pointer;
  }
  .drawer-close svg { width: 22px; height: 22px; }
  .nav-menu { flex-direction: column; align-items: stretch; gap: 0; width: 100%; }
  .nav-menu > li { border-bottom: 1px solid var(--line); }
  .primary-nav .nav-menu a { display: block; padding: .95rem .25rem; }
  /* On mobile, a flyout is a PLAIN accordion dropdown — a simple indented list of
     text links, NOT the image mega-menu layout. Collapsed by default; expands
     when its parent gets .is-open (tap the parent). Thumbnails/descriptions are
     hidden so it reads like a normal dropdown. */
  .transform, .translateX { transform: none; } /* no-op guard */
  .submenu-wrap { position: static; padding: 0; overflow: hidden; }
  .nav-menu > li.has-flyout > .submenu-wrap { display: none; }
  .nav-menu > li.has-flyout.is-open > .submenu-wrap { display: block; }
  .mega-menu, .sub-menu:not(.mega-menu) {
    position: static; transform: none; left: auto; width: auto; max-width: none;
    display: block; grid-template-columns: 1fr; box-shadow: none;
    border: 0; border-radius: 0; padding: 0 0 .5rem .5rem; margin: 0; background: transparent;
  }
  .mega-item, .sub-menu li { border-bottom: 0; }
  .mega-link { display: block; padding: .8rem .5rem; }
  .mega-thumb { display: none; }          /* plain text dropdown on mobile */
  .mega-body { display: block; }
  .mega-title { font-weight: 500; color: var(--ink); font-size: 1rem; }
  .mega-desc { display: none; }
  /* the parent "Diensten" link shows a chevron that rotates when open */
  .has-flyout.is-open > a .flyout-chev { transform: rotate(180deg); }
  .header-cta { flex-direction: column; align-items: stretch; margin-top: 1.25rem; gap: .75rem; }
  .header-cta .btn { width: 100%; }
  .header-phone { padding: .5rem .25rem; }
}

/* ---------- Hero ---------- */
.hero { position: relative; overflow: hidden; background: var(--navy); color: #eaf1f8; }
.hero__media { position: absolute; inset: 0; z-index: 0; }
.hero__media img { width: 100%; height: 100%; object-fit: cover; }
.hero__scrim {
  position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(180deg, rgba(26,48,84,.72) 0%, rgba(26,48,84,.82) 55%, rgba(26,48,84,.92) 100%),
              linear-gradient(90deg, rgba(26,48,84,.85) 0%, rgba(26,48,84,.35) 100%);
}
.hero__inner { position: relative; z-index: 2; padding-block: clamp(4rem, 12vw, 8rem); min-height: 70vh; display: flex; align-items: center; }
.hero__col { max-width: 720px; }
.hero h1 { color: #fff; margin-bottom: .5em; }
.hero .lead { color: #d7e3f2; }
.hero__eyebrow { color: #ffb877; }
.hero__area {
  display: inline-flex; align-items: center; gap: .5rem;
  background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.18);
  padding: .45rem .9rem; border-radius: var(--radius-pill);
  font-size: var(--step--1); margin-bottom: 1.25rem; color: #eaf1f8;
}
.hero__area svg { width: 16px; height: 16px; }
.hero__cta { margin-top: 1.8rem; }
.hero__offer {
  margin-top: 1.5rem; display: inline-flex; gap: .7rem; align-items: flex-start;
  background: var(--orange-cream); color: var(--navy);
  border-radius: var(--radius); padding: .9rem 1.15rem; max-width: 480px;
}
.hero__offer svg { width: 22px; height: 22px; color: var(--orange-dark); flex: 0 0 auto; margin-top: 2px; }
.hero__offer strong { display: block; }
.hero__offer span { font-size: var(--step--1); color: #43526b; }

/* Hero on mobile: keep everything LEFT-aligned (no stray right-edge text, #10)
   and let the service-area pill WRAP gracefully instead of overflowing (#9). */
@media (max-width: 599px) {
  .hero__inner { min-height: auto; padding-block: clamp(2.75rem, 14vw, 4rem); }
  .hero__col { max-width: 100%; }
  .hero__col { text-align: left; }
  .hero__eyebrow { display: inline-flex; text-align: left; }
  .hero__area {
    display: flex; align-items: flex-start; width: 100%; max-width: 100%;
    text-align: left; line-height: 1.4; border-radius: 14px; white-space: normal;
  }
  .hero__area svg { margin-top: 3px; flex: 0 0 auto; }
  .hero__offer { max-width: 100%; }
}
.hero__badges { display: flex; flex-wrap: wrap; gap: 1rem; align-items: center; margin-top: 1.8rem; }
.hero__badges img { height: 42px; width: auto; background: #fff; border-radius: 8px; padding: 5px 8px; }

/* Type-led hero (keyword pages, service pages) */
.hero--type { background: var(--navy); }
.hero--type .hero__scrim { background: radial-gradient(120% 90% at 100% 0%, rgba(38,117,187,.35), transparent 60%); }

/* ---------- Generic bits ---------- */
.section-head { max-width: 62ch; margin-bottom: clamp(2rem, 4vw, 3rem); }
.section-head--center { margin-inline: auto; text-align: center; }
.grid { display: grid; gap: var(--space-m); }
.grid--3 { grid-template-columns: repeat(3, 1fr); }
.grid--4 { grid-template-columns: repeat(4, 1fr); }
.grid--2 { grid-template-columns: repeat(2, 1fr); }

.card {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg);
  padding: var(--space-l); box-shadow: var(--shadow-soft);
  transition: transform .2s ease, box-shadow .2s ease;
  display: flex; flex-direction: column; gap: .6rem;
}
.card:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
.card__icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 52px; height: 52px; border-radius: 14px; margin-bottom: .3rem;
  background: var(--blue-tint); color: var(--blue-dark);
}
.card__icon svg { width: 26px; height: 26px; }
.card h3 { margin: 0; font-size: var(--step-1); }
.card p { margin: 0; color: var(--ink-soft); }
.card__link {
  margin-top: auto; font-family: var(--font-display); font-weight: 700; font-size: .95rem;
  color: var(--blue-dark); text-decoration: none; display: inline-flex; align-items: center; gap: .35rem;
}
.card__link svg { width: 16px; height: 16px; transition: transform .2s ease; }
.card:hover .card__link svg { transform: translateX(3px); }

/* Split layout */
.split { display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(2rem, 5vw, 4rem); align-items: center; }
.split--reverse .split__media { order: 2; }
.split__media img { border-radius: var(--radius-lg); box-shadow: var(--shadow); width: 100%; }
.split__media { position: relative; }
.frame-offset::before {
  content: ""; position: absolute; inset: auto -14px -14px auto; width: 62%; height: 62%;
  border: 2px solid var(--orange); border-radius: var(--radius-lg); z-index: -1;
}

/* Steps with oversized numerals (signature detail) */
.steps { display: grid; grid-template-columns: repeat(3,1fr); gap: var(--space-l); counter-reset: step; }
.step { position: relative; padding-top: 1rem; }
.step__num {
  font-family: var(--font-display); font-weight: 800; font-size: clamp(2.6rem, 5vw, 3.6rem);
  line-height: 1; color: var(--blue-tint); letter-spacing: -0.03em;
}
.section--dark .step__num { color: rgba(255,255,255,.18); }
.step h3 { margin: .35rem 0 .4rem; }
.step p { color: var(--ink-soft); margin: 0; }
.section--dark .step p { color: #c4d3e6; }

/* Stat strip */
.stats { display: grid; grid-template-columns: repeat(4,1fr); gap: var(--space-m); }
.stat { text-align: left; }
.stat__num { font-family: var(--font-display); font-weight: 800; font-size: var(--step-3); color: #fff; line-height: 1; }
.stat__label { color: #c4d3e6; font-size: var(--step--1); margin-top: .35rem; }

/* USP list */
.usp-list { list-style: none; padding: 0; margin: 0; display: grid; gap: .9rem; }
.usp-list li { display: flex; gap: .7rem; align-items: flex-start; }
.usp-list svg { width: 24px; height: 24px; color: var(--green); flex: 0 0 auto; margin-top: 1px; }

/* Trust badges (registrations) */
.reg-chips { display: flex; flex-wrap: wrap; gap: .6rem; }
.reg-chip {
  display: inline-flex; align-items: center; gap: .4rem;
  background: var(--green); color: #fff; font-weight: 600; font-size: .82rem;
  padding: .4rem .8rem; border-radius: var(--radius-pill);
}
.reg-chip svg { width: 15px; height: 15px; }

/* Testimonials grid */
.reviews { display: grid; gap: var(--space-m); grid-template-columns: repeat(2, 1fr); }
.review {
  background: #fff; border: 1px solid var(--line); border-left: 4px solid var(--orange);
  border-radius: var(--radius); padding: var(--space-l); box-shadow: var(--shadow-soft);
}
.review__quote { font-size: var(--step-1); line-height: 1.5; color: var(--ink); margin: 0 0 1rem; }
.review__meta { font-size: var(--step--1); color: var(--ink-soft); font-weight: 600; }
.review__stars { color: var(--orange); letter-spacing: 2px; margin-bottom: .6rem; }

/* FAQ */
.faq { display: grid; gap: .75rem; }
.faq details {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden;
}
.faq summary {
  cursor: pointer; list-style: none; padding: 1.1rem 1.3rem;
  font-family: var(--font-display); font-weight: 700; font-size: var(--step-0);
  display: flex; justify-content: space-between; gap: 1rem; align-items: center;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-size: 1.4rem; color: var(--blue-dark); line-height: 1; }
.faq details[open] summary::after { content: "\2013"; }
.faq details[open] summary { color: var(--blue-dark); }
.faq__body { padding: 0 1.3rem 1.2rem; color: var(--ink-soft); }

/* CTA band */
.cta-band { background: var(--navy); color: #fff; }
.cta-band .container { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1.5rem; }
.cta-band h2 { color: #fff; max-width: 22ch; margin: 0; }
.cta-band__actions { display: flex; flex-direction: column; gap: .6rem; align-items: flex-start; }
.cta-band .reg-chips { margin-top: .3rem; }

/* Offer band */
.offer-band { background: var(--orange-cream); }
.offer-band .container { display: flex; gap: 1.2rem; align-items: center; flex-wrap: wrap; }
.offer-band__icon { display: inline-flex; align-items: center; justify-content: center; width: 60px; height: 60px; border-radius: 16px; background: var(--orange); color: var(--navy); flex: 0 0 auto; }
.offer-band__icon svg { width: 30px; height: 30px; }
.offer-band h2 { margin: 0 0 .2rem; font-size: var(--step-2); }
.offer-band p { margin: 0; color: #5a4327; }

/* Contact layout */
.contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem,5vw,3.5rem); align-items: start; }
.contact-details { display: grid; gap: 1.1rem; }
.contact-row { display: flex; gap: .8rem; align-items: flex-start; }
.contact-row svg { width: 22px; height: 22px; color: var(--blue-dark); flex: 0 0 auto; margin-top: 2px; }
.contact-row a { color: var(--navy); text-decoration: none; font-weight: 600; }
.contact-row a:hover { color: var(--orange-dark); }
.hours-table { width: 100%; border-collapse: collapse; }
.hours-table td { padding: .45rem 0; border-bottom: 1px solid var(--line); font-size: .98rem; }
.hours-table td:last-child { text-align: right; font-weight: 600; }
.form-promise {
  background: var(--blue-tint); color: var(--navy); border-radius: var(--radius);
  padding: 1rem 1.2rem; margin-bottom: 1.25rem; font-weight: 500;
  display: flex; gap: .6rem; align-items: flex-start;
}
.form-promise svg { width: 22px; height: 22px; color: var(--blue-dark); flex: 0 0 auto; }
.form-placeholder { border: 2px dashed var(--line); border-radius: var(--radius); padding: 2rem; text-align: center; color: var(--ink-soft); }

/* ---------- Occasions: filter bar (desktop) / bottom sheet (mobile) ----------
   ONE form serves both: on desktop it is an inline card of auto-applying
   selects; on mobile (JS adds .is-enhanced) it becomes a fixed bottom sheet
   opened by the .occ-filter-trigger button. Without JS the form renders
   inline everywhere and submits as a normal GET. */
.occ-toolbar { display: none; margin-bottom: 1rem; }
.occ-filterbar {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg);
  padding: 1.1rem 1.25rem; box-shadow: var(--shadow-soft); margin-bottom: 1.25rem;
}
.occ-filterbar__fields { display: flex; flex-wrap: wrap; gap: .8rem .8rem; align-items: flex-end; }
.occ-select { display: flex; flex-direction: column; gap: .35rem; min-width: 140px; flex: 1 1 150px; }
.occ-select > span { font-size: .76rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--ink-soft); }
.occ-select select {
  appearance: none; -webkit-appearance: none; width: 100%;
  padding: .6rem 1.9rem .6rem .75rem; border: 1.5px solid var(--line); border-radius: var(--radius);
  background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231A3054' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") no-repeat right .55rem center / 15px;
  font: inherit; font-weight: 600; font-size: .95rem; color: var(--navy); cursor: pointer;
  text-overflow: ellipsis; white-space: nowrap;
}
.occ-select select:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
.occ-select select:disabled { opacity: .45; cursor: not-allowed; }
/* Sort lives in the RESULT bar (right side), not in the filter card. */
.occ-select--sort { flex: 0 1 215px; margin-left: auto; }
.occ-select--range { flex: 1.35 1 190px; }
.occ-select--range .occ-range { display: flex; gap: .45rem; }
.occ-select--range .occ-range select { min-width: 0; padding-right: 1.7rem; background-position: right .45rem center; }
.occ-filterbar__actions { display: flex; gap: .75rem; justify-content: flex-end; margin-top: 1rem; }
/* "Wis filters" is disabled (by JS) while there is nothing to clear — it must
   not look tappable with 0 active filters. */
.occ-filterbar__actions .btn:disabled { opacity: .45; cursor: not-allowed; pointer-events: none; }
/* JS auto-applies on desktop, so the submit row only exists in the sheet. */
.occ-filterbar.is-enhanced .occ-filterbar__actions { display: none; }
.occ-sheet__head { display: none; }

/* Active-filter chips + live result count (sort select right-aligned) */
.occ-resultbar { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem 1.1rem; margin-bottom: 1.5rem; }
.occ-count { margin: 0; font-weight: 700; color: var(--navy); }
.occ-resultbar .occ-active { flex: 1; }
.occ-active { display: flex; flex-wrap: wrap; gap: .5rem; }
.occ-chip {
  display: inline-flex; align-items: center; gap: .4rem;
  background: #fff; border: 1.5px solid var(--line); color: var(--navy);
  padding: .45rem .95rem; border-radius: var(--radius-pill);
  text-decoration: none; font: inherit; font-weight: 600; font-size: .88rem; cursor: pointer;
}
.occ-chip--active { background: var(--blue-tint); border-color: transparent; color: var(--blue-dark); }
.occ-chip--active:hover { background: var(--blue-dark); color: #fff; }
.occ-chip--clear { border-style: dashed; color: var(--ink-soft); }
.occ-chip--clear:hover { border-color: var(--blue-dark); color: var(--blue-dark); }

/* AJAX swap: dim the grid while a fetch is in flight. */
#occ-results { transition: opacity .18s ease; }
#occ-results.is-loading { opacity: .45; pointer-events: none; }
.occ-empty {
  grid-column: 1 / -1; text-align: center; padding: 3rem 1.25rem;
  border: 2px dashed var(--line); border-radius: var(--radius-lg);
  display: grid; gap: .35rem; justify-items: center;
}
.occ-empty .btn { margin-top: .75rem; }

/* Pagination */
.occ-pagination:not(:empty) { margin-top: 2.5rem; }
.occ-pager { display: flex; justify-content: center; align-items: center; gap: .45rem; flex-wrap: wrap; }
.occ-pager__btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 44px; height: 44px; padding: 0 .6rem;
  border: 1.5px solid var(--line); border-radius: var(--radius);
  background: #fff; color: var(--navy); font-weight: 700; text-decoration: none;
  transition: border-color .15s ease, color .15s ease, background .15s ease;
}
a.occ-pager__btn:hover { border-color: var(--blue-dark); color: var(--blue-dark); }
.occ-pager__btn.is-current { background: var(--navy); border-color: var(--navy); color: #fff; }
.occ-pager__gap { color: var(--ink-soft); padding: 0 .15rem; }

/* Drag-handle + sheet extras hidden on desktop; the fixed FAB is mobile-only. */
.occ-sheet__handle { display: none; }
.occ-sheet__extra { display: none; }
.occ-filter-fab { display: none; }
/* The active-filter count badge must be able to hide when there are 0 filters:
   an explicit display rule below would otherwise beat the UA [hidden] default,
   so give [hidden] the win regardless of breakpoint. */
.occ-filter-badge[hidden] { display: none !important; }

/* Mobile: the form becomes a bottom sheet (only when JS enhanced). */
@media (max-width: 860px) {
  /* Fixed, horizontally-centered filter trigger. Sits ABOVE the sticky call
     bar (bar height + gap + safe-area). IntersectionObserver toggles .is-in-view
     to show it only while the listing is on screen. */
  .occ-filter-fab {
    display: inline-flex; align-items: center; gap: .5rem;
    position: fixed; left: 50%; bottom: calc(56px + .75rem + env(safe-area-inset-bottom, 0px));
    z-index: 95;
    padding: .8rem 1.4rem; border: none; border-radius: var(--radius-pill);
    background: var(--navy); box-shadow: 0 10px 30px -8px rgba(26, 48, 84, .55);
    font: inherit; font-weight: 700; font-size: 1rem; color: #fff; cursor: pointer;
    /* Hidden by default; entrance/exit via transform+opacity. */
    transform: translate(-50%, 24px); opacity: 0; pointer-events: none;
    transition: transform .22s ease, opacity .22s ease;
  }
  .occ-filter-fab svg { color: #fff; }
  .occ-filter-fab.is-in-view { transform: translate(-50%, 0); opacity: 1; pointer-events: auto; }
  /* While the sheet itself is open, hide the FAB (its job is done). The sheet
     open state sets .occ-sheet-lock on <body>, so key off that. */
  body.occ-sheet-lock .occ-filter-fab { transform: translate(-50%, 24px); opacity: 0; pointer-events: none; }
  .occ-filter-badge {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 22px; height: 22px; padding: 0 .35rem; border-radius: var(--radius-pill);
    background: var(--orange); color: var(--navy); font-size: .8rem; font-weight: 800;
  }
  .occ-filterbar.is-enhanced {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 1100; margin: 0;
    border: none; border-radius: 22px 22px 0 0;
    box-shadow: 0 -12px 40px rgba(26, 48, 84, .28);
    max-height: 88dvh; overflow-y: auto; overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch; /* momentum scroll on older iOS */
    padding-bottom: calc(1.25rem + env(safe-area-inset-bottom, 0px));
    transform: translateY(105%); visibility: hidden;
    transition: transform .24s ease, visibility 0s linear .24s;
  }
  .occ-filterbar.is-enhanced.is-open { transform: translateY(0); visibility: visible; transition: transform .24s ease; }
  /* Visual grab-handle at the top of the sheet. */
  .occ-filterbar.is-enhanced .occ-sheet__handle {
    display: block; width: 40px; height: 4px; border-radius: 2px;
    background: var(--line); margin: 0 auto .6rem; flex: 0 0 auto;
  }
  /* No visible focus ring on the sheet container itself (it is the focus target
     on open per a11y best practice, but must not look "clicked"). */
  .occ-filterbar.is-enhanced:focus { outline: none; }
  .occ-filterbar.is-enhanced:focus-visible { outline: none; }
  .occ-filterbar.is-enhanced .occ-sheet__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: .9rem; }
  .occ-sheet__title { margin: 0; font-family: var(--font-display); font-weight: 800; font-size: 1.1rem; color: var(--navy); }
  .occ-sheet__close {
    border: none; background: var(--blue-tint); color: var(--navy); cursor: pointer;
    width: 38px; height: 38px; border-radius: var(--radius-pill);
    display: inline-flex; align-items: center; justify-content: center;
  }
  .occ-filterbar__fields { flex-direction: column; align-items: stretch; }
  /* In the column layout the flex-BASIS would become a 150px HEIGHT per
     field (huge gaps) — reset to content size. */
  .occ-select { min-width: 0; flex: 0 0 auto; }
  /* iOS never zooms a focused control at >=16px font-size — bump every control
     in the filter UI on mobile (desktop keeps its .95rem). Covers the selects
     inside the sheet AND the sort select once JS relocates it into the sheet. */
  .occ-select select { font-size: 1rem; }
  /* Sort takes the full result-bar row under the count/chips (no-JS/desktop
     fallback position); inside the sheet it is a normal stacked field. */
  .occ-resultbar .occ-select--sort { flex: 1 1 100%; margin-left: 0; }
  /* When JS relocates sort + chips INTO the sheet they render as stacked rows
     at the TOP of the sheet content (sort first, chips under it; column
     layout — flex-basis becomes height, so pin to content). The separator
     sits BELOW the block, between it and the filter fields. */
  .occ-sheet__extra {
    display: flex; flex-direction: column; gap: .8rem;
    margin-bottom: 1rem; padding-bottom: 1rem; border-bottom: 1px solid var(--line);
  }
  .occ-sheet__extra:empty { display: none; }
  .occ-sheet__extra .occ-select--sort { flex: 0 0 auto; margin-left: 0; width: 100%; }
  .occ-sheet__extra .occ-active { flex: 0 0 auto; }
  .occ-sheet__extra .occ-active:empty { display: none; }
  /* In the sheet the actions row IS the apply/clear footer (sticky at bottom). */
  .occ-filterbar.is-enhanced .occ-filterbar__actions {
    display: flex; position: sticky; bottom: 0;
    background: #fff; padding: .8rem 0 calc(.2rem + env(safe-area-inset-bottom, 0px));
    margin-top: 1rem; border-top: 1px solid var(--line);
  }
  .occ-filterbar__actions .btn { flex: 1; justify-content: center; }
  .occ-sheet-overlay { position: fixed; inset: 0; background: rgba(26, 48, 84, .5); z-index: 1090; touch-action: none; }
  .occ-sheet-overlay[hidden] { display: none; }
  /* SCROLL-NEUTRAL lock: overflow:hidden on html+body keeps the scroll offset
     exactly where it is — nothing to store or restore on close, so opening and
     closing the sheet can NEVER scroll or jump the page. (A position:fixed body
     lock needs a scrollTo restore on unlock, and html{scroll-behavior:smooth}
     makes that restore ANIMATE — a visible jump back to the content.) iOS
     background rubber-band is blocked by the backdrop's touch-action:none +
     touchmove preventDefault and the sheet's own overscroll-behavior:contain. */
  html.occ-sheet-lock, html.occ-sheet-lock body { overflow: hidden; overscroll-behavior: none; }
}
@media (prefers-reduced-motion: reduce) {
  .occ-filterbar.is-enhanced { transition: none; }
  .occ-filter-fab { transition: opacity .001s linear; }
  #occ-results { transition: none; }
}
/* Occasion single title: car names can be long ("Alfa Romeo Giulietta 1.4 Turbo
   … AUTOMAAT/CRUISE/PDC/AIRCO"), so it does NOT need the full hero display size.
   Use a smaller step, and go smaller still on mobile so it reads as a title, not a
   billboard. */
.single-occasions .container > h1 { font-size: var(--step-3); line-height: 1.15; }
@media (max-width: 599px) {
  .single-occasions .container > h1 { font-size: clamp(1.4rem, 1.15rem + 2vw, 1.75rem); }
}
.occ-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: var(--space-m); }
.occ-card {
  position: relative; /* anchor for the whole-card stretched link */
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg);
  overflow: hidden; box-shadow: var(--shadow-soft); display: flex; flex-direction: column;
  transition: transform .2s ease, box-shadow .2s ease;
}
.occ-card:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
/* Whole card is clickable: the "Bekijk auto" link stretches over the entire card
   via ::after. Keeps ONE real link (a11y-friendly) while the full card is the hit
   target. The media is a plain <div> so there aren't two overlapping links. */
.occ-card__link::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.occ-card__link:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; }
.occ-card__media { aspect-ratio: 4/3; background: var(--blue-tint); position: relative; }
.occ-card__media img { width: 100%; height: 100%; object-fit: cover; }
.occ-card__ph { display: flex; align-items: center; justify-content: center; height: 100%; color: var(--blue); }
.occ-card__ph svg { width: 64px; height: 64px; }
.occ-card__body { padding: 1.25rem; display: flex; flex-direction: column; gap: .5rem; flex: 1; }
.occ-card__title { font-family: var(--font-display); font-weight: 700; font-size: var(--step-1); margin: 0; color: var(--navy); }
.occ-card__specs { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .35rem .8rem; font-size: .85rem; color: var(--ink-soft); }
.occ-card__specs li { display: inline-flex; align-items: center; gap: .3rem; }
.occ-card__price { margin-top: auto; font-family: var(--font-display); font-weight: 800; font-size: var(--step-2); color: var(--navy); }
.occ-card__price del { font-size: 1rem; color: var(--ink-soft); font-weight: 500; margin-right: .4rem; }
.occ-card__link { color: var(--blue-dark); font-weight: 700; text-decoration: none; display: inline-flex; align-items: center; gap: .3rem; }

/* Occasion single */
.occ-gallery { display: grid; grid-template-columns: repeat(4,1fr); gap: .6rem; }
.occ-gallery__main { grid-column: 1 / -1; aspect-ratio: 16/9; }
/* Mobile: 4 columns make gallery thumbs too small to see — use 2 (collapsed shows
   the main photo + a clean 2x2 of 4 thumbs). */
@media (max-width: 599px) { .occ-gallery { grid-template-columns: repeat(2,1fr); gap: .45rem; } }
.occ-gallery img { width: 100%; height: 100%; object-fit: cover; border-radius: var(--radius); }
.occ-gallery button { padding: 0; border: none; background: none; cursor: pointer; border-radius: var(--radius); overflow: hidden; }
.occ-gallery button img { aspect-ratio: 4/3; }
/* Collapsible gallery: extra photos are HIDDEN AS WHOLE IMAGES (display:none on
   items beyond the first rows) — never height-clipped, so the visible images keep
   their natural size/aspect and nothing looks squeezed. A soft fade over the last
   visible row + an "Alle X foto's tonen" toggle (JS flips .is-collapsed). */
.occ-gallery-wrap { position: relative; }
/* Collapsed: the main photo + 4 thumbs (a full 4-col row on desktop, a clean 2x2
   on mobile) — 5 images total; the rest are fully hidden until toggled. */
.occ-gallery-wrap.is-collapsed .occ-gallery button:nth-child(n+6) { display: none; }
.occ-gallery__fade {
  display: none; position: absolute; left: 0; right: 0; bottom: 3.4rem; height: 4rem;
  background: linear-gradient(180deg, rgba(255,255,255,0) 0%, #fff 96%); pointer-events: none;
}
.occ-gallery-wrap.is-collapsed .occ-gallery__fade { display: block; }
.occ-gallery__more { margin-top: .9rem; }
.occ-gallery-wrap:not(.is-collapsed) .occ-gallery__more svg { transform: rotate(180deg); }
/* Status badges (sold / expected) */
.occ-badge {
  display: inline-block; align-self: flex-start; padding: .3rem .75rem; border-radius: var(--radius-pill);
  font-family: var(--font-display); font-weight: 700; font-size: .8rem; letter-spacing: .04em; text-transform: uppercase;
}
/* Uitrusting checklist: full-width section below the split — 4 columns on
   desktop (needs the full container; inside the ~600px split column 4 cols
   would be ~140px each and unreadable), 2 on tablet, 1 on mobile. */
.occ-equip-section { margin-top: 3rem; }
.occ-equip {
  list-style: none; margin: 1rem 0 2rem; padding: 0;
  display: grid; grid-template-columns: repeat(4, 1fr); gap: .45rem 1.5rem;
  font-size: .9rem; color: var(--ink-soft);
}
.occ-equip li { display: flex; align-items: flex-start; gap: .4rem; }
.occ-equip svg { flex: 0 0 auto; margin-top: .2rem; color: var(--blue); }
@media (max-width: 980px) { .occ-equip { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 599px) { .occ-equip { grid-template-columns: 1fr; } }
.occ-badge--sold { background: var(--navy); color: #fff; }
.occ-badge--soon { background: var(--orange-cream, #FEF3E8); color: var(--orange-dark, #C96B18); }
.occ-card__flag { position: absolute; top: .7rem; left: .7rem; z-index: 2; }
/* Cards are WHITE self-contained surfaces: when they sit inside a dark band, the
   section-level dark-text rules (.section--dark h3{color:#fff}, .section--dark a
   {color:#cfe2f4}) would bleed in and make the title invisible and the link the
   wrong colour — re-assert the card's own colours (the cascade trap from ENGINE:
   always re-assert component colours inside surface-flipping bands). */
/* The cascade trap: .section--dark a{color:#cfe2f4} outranks .btn--primary's
   label colour — re-assert it so orange buttons keep their normal (navy) label
   in dark bands, identical to orange buttons elsewhere. */
.section--dark .btn--primary, .section--dark .btn--primary:hover { color: var(--btn-label); }
/* Card subtitles can hold long slash-separated uitvoering strings
   ("…AUTOMAAT/CRUISE/PDC/AIRCO") — allow them to wrap at any point. */
.occ-card__body .muted { overflow-wrap: anywhere; word-break: break-word; }
.section--dark .occ-card { color: var(--ink); }
.section--dark .occ-card h2, .section--dark .occ-card h3, .section--dark .occ-card .occ-card__title { color: var(--navy); }
.section--dark .occ-card a, .section--dark .occ-card .occ-card__link { color: var(--blue-dark); }
.section--dark .occ-card .occ-card__price { color: var(--navy); }
.section--dark .occ-card .occ-card__specs { color: var(--ink-soft); }
/* table-layout:fixed keeps the table within its container regardless of cell
   content; word-break lets long unbreakable values (e.g. "AUTOMAAT/CRUISE/PDC/
   AIRCO") wrap instead of forcing the table wider than the screen. */
.spec-table { width: 100%; table-layout: fixed; border-collapse: collapse; margin: 1.5rem 0; }
.spec-table th, .spec-table td { text-align: left; padding: .7rem .5rem; border-bottom: 1px solid var(--line); overflow-wrap: anywhere; word-break: break-word; }
.spec-table th { width: 40%; font-family: var(--font-display); color: var(--navy); font-weight: 600; }
.price-box {
  background: var(--navy); color: #fff; border-radius: var(--radius-lg); padding: 1.75rem;
  display: flex; flex-direction: column; gap: .8rem;
}
.price-box__amount { font-family: var(--font-display); font-weight: 800; font-size: var(--step-4); line-height: 1; }
.price-box__amount del { font-size: 1.2rem; color: #9fb3cc; font-weight: 500; display: block; }
.price-box .reg-chip { background: var(--green); }
.price-box .btn { width: 100%; }

/* Lightbox dialog */
dialog.lightbox { border: none; padding: 0; background: transparent; max-width: 92vw; max-height: 92vh; }
dialog.lightbox::backdrop { background: rgba(26,48,84,.88); }
dialog.lightbox img { max-width: 92vw; max-height: 84vh; border-radius: var(--radius); }
.lightbox__close {
  position: absolute; top: -3rem; right: 0; background: #fff; color: var(--navy);
  border: none; width: 44px; height: 44px; border-radius: 50%; cursor: pointer; font-size: 1.5rem;
}
/* Prev/next arrows: overlaid on the photo edges (stay on-screen at any
   viewport, thumb-reachable on mobile). Counter below the photo. */
.lightbox__nav {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 1;
  width: 48px; height: 48px; border: none; border-radius: 50%; cursor: pointer;
  background: rgba(255, 255, 255, .92); color: var(--navy);
  display: inline-flex; align-items: center; justify-content: center;
  transition: background .15s ease;
}
.lightbox__nav:hover { background: var(--orange); }
.lightbox__nav:focus-visible { outline: 3px solid var(--orange); outline-offset: 2px; }
.lightbox__nav--prev { left: .75rem; }
.lightbox__nav--next { right: .75rem; }
.lightbox__count {
  position: absolute; left: 50%; bottom: -2.4rem; transform: translateX(-50%);
  margin: 0; color: #fff; font-weight: 700; font-size: .95rem; letter-spacing: .04em;
}
@media (max-width: 599px) {
  .lightbox__nav { width: 42px; height: 42px; }
  .lightbox__nav--prev { left: .4rem; }
  .lightbox__nav--next { right: .4rem; }
}

/* ---------- Footer ---------- */
.site-footer { background: var(--navy); color: #c4d3e6; padding-block: clamp(3rem,6vw,4.5rem) 2rem; }
.footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1.2fr; gap: 2.5rem; }
.site-footer h4 { color: #fff; font-size: 1rem; letter-spacing: .02em; margin-bottom: 1rem; }
.site-footer a { color: #c4d3e6; text-decoration: none; }
.site-footer a:hover { color: #fff; }
.footer-brand img { height: 60px; width: auto; background: #fff; padding: 6px 10px; border-radius: 8px; margin-bottom: 1rem; }
.footer-brand p { color: #9fb3cc; max-width: 34ch; }
.footer-nap { font-style: normal; line-height: 1.8; color: #c4d3e6; }
.footer-nap strong { color: #fff; }
.footer-list { list-style: none; padding: 0; margin: 0; display: grid; gap: .55rem; }
.footer-badges { display: flex; flex-wrap: wrap; gap: .6rem; align-items: center; margin-top: 1rem; }
.footer-badges img { height: 38px; width: auto; background: #fff; padding: 4px 7px; border-radius: 6px; }
.footer-cta .btn { margin-top: .4rem; }
/* Re-assert button label over footer link colour (specificity guard) */
.site-footer .btn--primary { color: var(--btn-label); }
.site-footer .btn--secondary { color: var(--btn-blue-label); }
.footer-bottom {
  border-top: 1px solid var(--line-dark); margin-top: 2.5rem; padding-top: 1.5rem;
  display: flex; flex-wrap: wrap; gap: 1rem; justify-content: space-between; font-size: .85rem; color: #9fb3cc;
}
.footer-bottom a { color: #9fb3cc; }

/* ---------- Sticky mobile call bar ---------- */
.sticky-call { display: none; }
@media (max-width: 900px) {
  .sticky-call {
    display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 90;
    background: var(--orange); box-shadow: 0 -8px 24px -12px rgba(26,48,84,.5);
  }
  .sticky-call a {
    flex: 1; display: flex; align-items: center; justify-content: center; gap: .5rem;
    padding: .9rem; font-family: var(--font-display); font-weight: 700; color: var(--navy); text-decoration: none;
  }
  .sticky-call a + a { border-left: 1px solid rgba(26,48,84,.2); }
  .sticky-call svg { width: 20px; height: 20px; }
  body { padding-bottom: 56px; }
}

/* ---------- Reveal animation ---------- */
.reveal { opacity: 0; transform: translateY(16px); transition: opacity .55s ease-out, transform .55s ease-out; }
.reveal.is-visible { opacity: 1; transform: none; }

/* ---------- Forminator styling ---------- */
.forminator-custom-form .forminator-field input[type=text],
.forminator-custom-form .forminator-field input[type=email],
.forminator-custom-form .forminator-field input[type=tel],
.forminator-custom-form .forminator-field input[type=url],
.forminator-custom-form .forminator-field input[type=number],
.forminator-custom-form .forminator-field textarea,
.forminator-custom-form .forminator-field select {
  width: 100%; font-family: var(--font-body); font-size: var(--step-0); color: var(--ink);
  background: #fff; border: 1.5px solid #c9d3df; border-radius: var(--radius);
  padding: .8rem 1rem;
}
.forminator-custom-form .forminator-field textarea { min-height: 140px; }
.forminator-custom-form .forminator-field input:focus,
.forminator-custom-form .forminator-field textarea:focus,
.forminator-custom-form .forminator-field select:focus {
  outline: none; border-color: var(--blue); box-shadow: 0 0 0 3px rgba(38,117,187,.18);
}
.forminator-custom-form label,
.forminator-custom-form .forminator-label { font-weight: 600; color: var(--ink); }
.forminator-custom-form .forminator-button,
.forminator-custom-form button[type=submit] {
  font-family: var(--font-display); font-weight: 700; font-size: var(--step-0);
  background: var(--btn-fill); color: var(--btn-label);
  border: none; border-radius: var(--radius-pill); padding: .95rem 1.8rem; cursor: pointer;
  transition: background-color .18s ease, transform .18s ease;
}
.forminator-custom-form .forminator-button:hover,
.forminator-custom-form button[type=submit]:hover { background: var(--btn-fill-hover); color: var(--btn-label); transform: translateY(-2px); }

/* ---------- Responsive ---------- */
@media (max-width: 1024px) {
  .grid--4 { grid-template-columns: repeat(2,1fr); }
  .occ-grid { grid-template-columns: repeat(2,1fr); }
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 2rem; }
  .stats { grid-template-columns: repeat(2,1fr); }
}
@media (max-width: 860px) {
  .split { grid-template-columns: 1fr; }
  .split--reverse .split__media { order: 0; }
  .contact-grid { grid-template-columns: 1fr; }
  .cta-band .container { flex-direction: column; align-items: flex-start; }
}
@media (max-width: 599px) {
  .grid--3, .grid--4, .grid--2, .steps, .reviews, .occ-grid, .stats {
    grid-template-columns: 1fr; align-items: stretch;
  }
  .occ-gallery { grid-template-columns: repeat(2,1fr); }
  .footer-grid { grid-template-columns: 1fr; }
  .hero__inner { min-height: 60vh; }
  .cta-band__actions { width: 100%; }
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important; animation-iteration-count: 1 !important;
    transition-duration: .001ms !important; scroll-behavior: auto !important;
  }
  .reveal { opacity: 1 !important; transform: none !important; }
  .btn:hover, .card:hover, .occ-card:hover { transform: none; }
}