/*
 * AUTOMAAT SPOELSERVICE — main.css
 * Design: Automotive App Interface
 * Primary: #FE4C28 | Dark: #1A2744 | Light bg: #F7F8FA
 * Fonts: Barlow Condensed (headings) + Inter (body)
 */

/* ── RESET & BASE ─────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
/* Voorkom horizontale mini-scroll door de brede hero-video (clip breekt sticky niet). */
body { overflow-x: clip; }

:root {
    --c-orange:  #FE4C28;
    --c-dark:    #1A2744;
    --c-light:   #F7F8FA;
    --c-white:   #ffffff;
    --c-gray:    #64748b;
    --c-border:  #e2e8f0;
    --radius:    0.75rem;
    --shadow-sm: 0 1px 3px rgba(0,0,0,.08);
    --shadow-md: 0 4px 16px rgba(0,0,0,.10);
    --shadow-lg: 0 8px 32px rgba(0,0,0,.14);
    --max-w:     1280px;
    --font-head: 'Barlow Condensed', 'Barlow', sans-serif;
    --font-body: 'Inter', sans-serif;
}

html { scroll-behavior: smooth; }
body { font-family: var(--font-body); color: #1e293b; background: #fff; line-height: 1.6; -webkit-font-smoothing: antialiased; }
img { max-width: 100%; height: auto; display: block; }
a { text-decoration: none; color: inherit; }
h1, h2, h3, h4, h5, h6 { font-family: var(--font-head); font-weight: 700; line-height: 1.1; letter-spacing: -0.01em; }

/* ── CONTAINER ────────────────────────────────────────────────────────────── */
.asp-container { width: 100%; max-width: var(--max-w); margin: 0 auto; padding: 0 1.5rem; }
.asp-container--narrow { max-width: 800px; }
@media (min-width: 768px) { .asp-container { padding: 0 2rem; } }

/* ── BUTTONS ──────────────────────────────────────────────────────────────── */
.asp-btn {
    display: inline-flex; align-items: center; gap: 0.5rem;
    font-family: var(--font-head); font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
    padding: 0.875rem 1.75rem; border-radius: var(--radius); border: 2px solid transparent;
    cursor: pointer; transition: all 0.2s ease; white-space: nowrap;
}
.asp-btn--sm  { padding: 0.6rem 1.25rem; font-size: 0.85rem; }
.asp-btn--lg  { padding: 1rem 2rem; font-size: 1.05rem; }
.asp-btn--primary { background: var(--c-orange); color: #fff; border-color: var(--c-orange); }
.asp-btn--primary:hover { background: #e03d1a; border-color: #e03d1a; box-shadow: 0 8px 30px rgba(254,76,40,.35); transform: translateY(-1px); }
.asp-btn--secondary { background: var(--c-dark); color: #fff; border-color: var(--c-dark); }
.asp-btn--secondary:hover { background: #243560; border-color: #243560; box-shadow: var(--shadow-md); }
.asp-btn--outline-white { background: rgba(255,255,255,.08); color: #fff; border-color: rgba(255,255,255,.3); }
.asp-btn--outline-white:hover { background: rgba(255,255,255,.18); }
.asp-btn:active { transform: scale(0.97); }

/* ── SECTION LABEL ────────────────────────────────────────────────────────── */
.asp-section-label { display: flex; align-items: center; gap: 0.6rem; margin-bottom: 0.75rem; }
.asp-section-label::before { content: ''; display: block; width: 2rem; height: 2px; background: var(--c-orange); flex-shrink: 0; }
.asp-section-label span { font-family: var(--font-head); font-size: 0.8rem; font-weight: 700; letter-spacing: 0.15em; text-transform: uppercase; color: var(--c-orange); }

/* ── TOPBAR ───────────────────────────────────────────────────────────────── */
.asp-topbar { background: var(--c-dark); color: rgba(255,255,255,.85); font-size: 0.8rem; padding: 0.5rem 0; }
/* Topbar verbergen op mobiel — de rommelige 3-regelige weergave (tel/mail/score dupliceert
   het mobiele menu). Contact staat in het menu + WhatsApp-knop. */
@media (max-width: 767px) { .asp-topbar { display: none; } }
.asp-topbar__inner { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 0.5rem; }
.asp-topbar__left, .asp-topbar__right { display: flex; align-items: center; gap: 1.25rem; flex-wrap: wrap; }
.asp-topbar__item { display: flex; align-items: center; gap: 0.4rem; transition: color .15s; }
.asp-topbar__item:hover { color: #fff; }
.asp-topbar__item--location { display: none; }
@media (min-width: 768px) { .asp-topbar__item--location { display: flex; } }
.asp-topbar__badge { display: flex; align-items: center; gap: 0.3rem; color: var(--c-orange); font-weight: 700; }

/* ── HEADER (drielaags: topbar · logo+CTA · menu) ─────────────────────────── */
.asp-headwrap { position: sticky; top: 0; z-index: 100; box-shadow: var(--shadow-sm); }
.asp-header { background: #fff; border-bottom: 1px solid var(--c-border); }
/* Mobiel: logo + hamburger op rij 1, zoekbalk als volle rij eronder (blijft altijd
   zichtbaar in de sticky header). Desktop: alles op één rij. */
/* Alleen verticale padding zetten — de horizontale zijmarge komt van .asp-container
   (1.5rem mobiel / 2rem ≥768) zodat logo + menu niet tegen de schermrand plakken. */
.asp-header__inner { display: flex; align-items: center; flex-wrap: wrap; justify-content: space-between; gap: 0.7rem 1rem; padding-top: 0.7rem; padding-bottom: 0.7rem; }
.asp-header__logo { order: 1; flex-shrink: 0; line-height: 0; }
.asp-header__logo img, .asp-header__logo .custom-logo { height: 44px; width: auto; display: block; }
.asp-header__actions { order: 2; display: flex; align-items: center; gap: 0.75rem; }
@media (min-width: 1024px) {
    .asp-header__inner { flex-wrap: nowrap; gap: 1.5rem; height: 76px; padding-top: 0; padding-bottom: 0; }
    .asp-header__logo img, .asp-header__logo .custom-logo { height: 52px; }
    .asp-header__actions { order: 3; }
}
.asp-header__cta { display: none; }
@media (min-width: 640px) { .asp-header__cta { display: flex; } }

/* Laag 3: menubalk in donkerblauw */
.asp-navbar { display: none; background: var(--c-dark); }
@media (min-width: 1024px) { .asp-navbar { display: block; } }
.asp-navbar .asp-container { display: flex; justify-content: center; }

/* ── NAVIGATION ───────────────────────────────────────────────────────────── */
.asp-nav { display: flex; }
.asp-nav__list { display: flex; align-items: center; gap: 0.15rem; list-style: none; }
.asp-navbar .asp-nav__link { color: rgba(255,255,255,.82); padding: 0.85rem 1rem; border-radius: 0; }
.asp-navbar .asp-nav__link:hover,
.asp-navbar .asp-nav__item--dropdown:hover .asp-nav__link { color: #fff; background: rgba(255,255,255,.08); }
.asp-navbar .asp-nav__link--active { color: var(--c-orange); }
.asp-nav__item { position: relative; }
.asp-nav__item--dropdown { }
.asp-nav__link { display: flex; align-items: center; gap: 0.3rem; padding: 0.5rem 0.75rem; font-size: 0.9rem; font-weight: 600; color: var(--c-dark); border-radius: 0.5rem; transition: all .15s; }
.asp-nav__link:hover, .asp-nav__item--dropdown:hover .asp-nav__link { color: var(--c-orange); background: rgba(254,76,40,.05); }
.asp-dropdown { position: absolute; top: calc(100% + 4px); left: 0; background: #fff; border-radius: var(--radius); box-shadow: var(--shadow-lg); border: 1px solid var(--c-border); min-width: 260px; opacity: 0; visibility: hidden; transform: translateY(-4px); transition: all .18s ease; z-index: 200; }
.asp-nav__item--dropdown:hover .asp-dropdown,
.asp-nav__item--dropdown:focus-within .asp-dropdown { opacity: 1; visibility: visible; transform: translateY(0); }
.asp-nav__item--dropdown:focus-within .asp-nav__link { color: var(--c-orange); }

/* Toegankelijkheid: skip-to-content-link (zichtbaar bij toetsenbordfocus) + focusring */
.asp-skip-link { position: absolute; left: -999px; top: 0; z-index: 10000; background: var(--c-orange); color: #fff; padding: .75rem 1.25rem; border-radius: 0 0 var(--radius) 0; font-weight: 600; text-decoration: none; }
.asp-skip-link:focus { left: 0; }
a:focus-visible, button:focus-visible, [tabindex]:focus-visible { outline: 3px solid var(--c-orange); outline-offset: 2px; }

/* ── MERK/MODEL-ZOEKBALK (header, tweede laag) ─────────────────────────────── */
.asp-header__search { order: 3; flex: 1 1 100%; max-width: none; margin: 0; position: relative; }
@media (min-width: 1024px) { .asp-header__search { order: 2; flex: 1 1 auto; max-width: 440px; margin: 0 1.5rem; } }
.asp-search { position: relative; display: flex; align-items: center; gap: .5rem; background: #fff; border: 1px solid var(--c-border); border-radius: 999px; padding: .5rem 1rem; transition: border-color .15s, box-shadow .15s; }
.asp-search:focus-within { border-color: var(--c-orange); box-shadow: 0 0 0 3px rgba(254,76,40,.12); }
.asp-search__icon { color: #9aa1ab; flex-shrink: 0; }
.asp-search__input { flex: 1; min-width: 0; border: none; outline: none; background: transparent; font: inherit; font-size: .92rem; color: var(--c-dark); }
.asp-search__input::placeholder { color: #9aa1ab; }
.asp-search__results { position: absolute; top: calc(100% + 8px); left: 0; right: 0; margin: 0; padding: .35rem; list-style: none; background: #fff; border: 1px solid var(--c-border); border-radius: 12px; box-shadow: var(--shadow-lg); z-index: 300; max-height: 340px; overflow-y: auto; }
.asp-search__opt { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; padding: .6rem .85rem; border-radius: 8px; cursor: pointer; }
.asp-search__opt:hover, .asp-search__opt.is-active { background: rgba(254,76,40,.08); }
.asp-search__opt-brand { font-weight: 600; color: var(--c-dark); }
.asp-search__opt-model { font-size: .8rem; color: #7a828e; white-space: nowrap; }
.asp-dropdown__inner { padding: 0.75rem; }
.asp-dropdown__item { display: flex; align-items: center; gap: 0.75rem; padding: 0.625rem 0.75rem; border-radius: 0.5rem; transition: background .12s; }
.asp-dropdown__item:hover { background: rgba(254,76,40,.05); }
.asp-dropdown__icon { width: 2rem; height: 2rem; background: rgba(254,76,40,.1); border-radius: 0.5rem; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.asp-dropdown__icon span { width: 8px; height: 8px; background: var(--c-orange); border-radius: 50%; }
.asp-dropdown__title { font-size: 0.875rem; font-weight: 600; color: var(--c-dark); transition: color .12s; }
.asp-dropdown__item:hover .asp-dropdown__title { color: var(--c-orange); }
.asp-dropdown__price { font-size: 0.75rem; color: var(--c-gray); }
.asp-dropdown--merken { min-width: 320px; }
.asp-dropdown__label { font-family: var(--font-head); font-size: 0.7rem; font-weight: 700; letter-spacing: .15em; text-transform: uppercase; color: #94a3b8; padding: 0.25rem 0.75rem 0.5rem; }
.asp-dropdown__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0.25rem; margin-bottom: 0.5rem; }
.asp-dropdown__merk { display: flex; align-items: center; gap: 0.5rem; padding: 0.5rem 0.75rem; border-radius: 0.5rem; font-size: 0.875rem; font-weight: 600; color: var(--c-dark); transition: all .12s; }
.asp-dropdown__merk:hover { background: rgba(254,76,40,.05); color: var(--c-orange); }
.asp-dropdown__dot { width: 6px; height: 6px; background: var(--c-orange); border-radius: 50%; flex-shrink: 0; }
.asp-dropdown__footer { border-top: 1px solid var(--c-border); padding-top: 0.5rem; }
.asp-dropdown__all { display: flex; align-items: center; gap: 0.5rem; padding: 0.5rem 0.75rem; border-radius: 0.5rem; font-size: 0.875rem; font-weight: 600; color: var(--c-orange); transition: background .12s; }
.asp-dropdown__all:hover { background: rgba(254,76,40,.05); }

/* ── HAMBURGER ────────────────────────────────────────────────────────────── */
.asp-hamburger { display: flex; flex-direction: column; gap: 5px; background: none; border: none; cursor: pointer; padding: 0.5rem; margin-left: auto; }
.asp-hamburger span { display: block; width: 24px; height: 2px; background: var(--c-dark); border-radius: 2px; transition: all .25s; }
.asp-hamburger.is-open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.asp-hamburger.is-open span:nth-child(2) { opacity: 0; }
.asp-hamburger.is-open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
@media (min-width: 1024px) { .asp-hamburger { display: none; } }

/* ── MOBILE MENU ──────────────────────────────────────────────────────────── */
/* Mobiel menu = accordeon-paneel dat onder de sticky header uitklapt (scrollt intern;
   de hamburger/X in de header blijft altijd zichtbaar om te sluiten). */
.asp-mobile-menu { display: none; background: #fff; border-top: 1px solid var(--c-border); max-height: calc(100vh - 64px); overflow-y: auto; box-shadow: 0 12px 24px rgba(0,0,0,.10); }
.asp-mobile-menu.is-open { display: block; }
@media (min-width: 1024px) { .asp-mobile-menu { display: none !important; } }
.asp-mobile-menu__inner { padding: 1rem 1.5rem 1.5rem; }
.asp-mobile-menu__contact { display: flex; flex-direction: column; gap: 0.5rem; padding-bottom: 1rem; border-bottom: 1px solid var(--c-border); margin-bottom: 1rem; font-size: 0.875rem; color: var(--c-dark); }
.asp-mobile-menu__list { list-style: none; }
/* Geen lijnen onder de menu-items — schone lijst met rustige tussenruimte. */
.asp-mobile-menu__item > a { display: block; padding: 0.6rem 0.5rem; font-size: 1.05rem; font-weight: 600; color: var(--c-dark); border-radius: 0.5rem; transition: color .12s, background .12s; }
.asp-mobile-menu__item > a:hover { color: var(--c-orange); background: rgba(254,76,40,.06); }
.asp-mobile-menu__toggle { display: flex; justify-content: space-between; align-items: center; width: 100%; padding: 0.6rem 0.5rem; font-size: 1.05rem; font-weight: 600; color: var(--c-dark); background: none; border: none; border-radius: 0.5rem; cursor: pointer; transition: color .12s, background .12s; }
.asp-mobile-menu__toggle:hover { color: var(--c-orange); background: rgba(254,76,40,.06); }
.asp-mobile-menu__sub { list-style: none; padding: 0.5rem 0 0.5rem 1rem; display: none; }
.asp-mobile-menu__sub.is-open { display: block; }
.asp-mobile-menu__sub li a { display: block; padding: 0.5rem 0; font-size: 0.9rem; color: var(--c-gray); transition: color .12s; }
.asp-mobile-menu__sub li a:hover { color: var(--c-orange); }
.asp-mobile-menu__cta { margin-top: 1.5rem; }

/* ── HERO ─────────────────────────────────────────────────────────────────── */
.asp-hero { position: relative; min-height: 86vh; display: flex; align-items: center; background: var(--c-dark); overflow: hidden; }
.asp-hero__video-wrap { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.asp-hero__video-wrap iframe, #asp-yt-player { position: absolute; top: 50%; left: 50%; width: 177.78vh; height: 100vh; min-width: 100%; min-height: 56.25vw; transform: translate(-50%, -50%); pointer-events: none; }
.asp-hero__overlay { position: absolute; inset: 0; background: linear-gradient(135deg, rgba(26,39,68,.92) 0%, rgba(26,39,68,.75) 60%, rgba(26,39,68,.6) 100%); }
.asp-hero__inner { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 1fr); gap: 2rem; padding: 3rem 1.5rem; align-items: center; }
@media (min-width: 768px) { .asp-hero__inner { padding-left: 2rem; padding-right: 2rem; } }
@media (min-width: 1024px) { .asp-hero__inner { grid-template-columns: minmax(0, 1fr) 420px; gap: 3rem; padding: 4rem 2rem 3.5rem; } }
.asp-hero__content { color: #fff; min-width: 0; }
.asp-hero__title { font-size: clamp(2.2rem, 8.5vw, 7.5rem); font-weight: 900; text-transform: uppercase; line-height: 0.95; margin-bottom: 1.25rem; }
.asp-hero__title--accent { color: var(--c-orange); }
.asp-hero__subtitle { font-size: clamp(1rem, 2vw, 1.2rem); color: rgba(255,255,255,.85); margin-bottom: 1.5rem; max-width: 540px; }
.asp-hero__bullets { list-style: none; display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem 1.5rem; margin-bottom: 2rem; }
.asp-hero__bullets li { display: flex; align-items: center; gap: 0.5rem; font-size: 0.9rem; color: rgba(255,255,255,.8); }
.asp-hero__bullets li::before { content: ''; width: 16px; height: 16px; border-radius: 50%; border: 2px solid var(--c-orange); flex-shrink: 0; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 24 24' fill='none' stroke='%23FE4C28' stroke-width='3'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E") center/10px no-repeat; }
.asp-hero__cta { display: flex; flex-direction: column; gap: 0.75rem; }
/* Op smalle schermen de CTA's volle breedte zodat ze niet buiten het scherm vallen. */
@media (max-width: 479px) { .asp-hero__cta .asp-btn { width: 100%; justify-content: center; } }
@media (min-width: 480px) { .asp-hero__cta { flex-direction: row; flex-wrap: wrap; } }

/* Stats card */
.asp-hero__stats-card { background: rgba(255,255,255,.07); backdrop-filter: blur(12px); border: 1px solid rgba(255,255,255,.12); border-radius: 1.25rem; padding: 1.75rem; color: #fff; }
.asp-hero__stats-card-label { font-family: var(--font-head); font-size: 0.75rem; font-weight: 700; letter-spacing: .15em; text-transform: uppercase; color: rgba(255,255,255,.78); margin-bottom: 1.25rem; }
.asp-hero__stats-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-bottom: 1.25rem; }
.asp-hero__stat { background: rgba(255,255,255,.06); border-radius: 0.75rem; padding: 1rem; }
.asp-hero__stat-value { font-family: var(--font-head); font-size: 1.75rem; font-weight: 900; color: #fff; }
.asp-hero__stat-value--accent { color: var(--c-orange); }
.asp-hero__stat-label { font-size: 0.8rem; font-weight: 600; color: rgba(255,255,255,.8); margin-top: 0.15rem; }
.asp-hero__stat-sub { font-size: 0.7rem; color: rgba(255,255,255,.75); }
.asp-hero__stats-note { display: flex; align-items: center; gap: 0.5rem; font-size: 0.8rem; color: rgba(255,255,255,.82); background: rgba(254,76,40,.1); border-radius: 0.5rem; padding: 0.625rem 0.875rem; }

/* ── STATS BAR ────────────────────────────────────────────────────────────── */
.asp-stats-bar { background: var(--c-dark); color: #fff; padding: 1.5rem 0; }
.asp-stats-bar__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px; background: rgba(255,255,255,.1); }
@media (min-width: 768px) { .asp-stats-bar__grid { grid-template-columns: repeat(4, 1fr); } }
.asp-stats-bar__item { padding: 1rem 1.5rem; background: var(--c-dark); text-align: center; }
.asp-stats-bar__value { font-family: var(--font-head); font-size: 1.75rem; font-weight: 900; color: var(--c-orange); }
.asp-stats-bar__label { font-size: 0.8rem; color: rgba(255,255,255,.82); margin-top: 0.15rem; }

/* ── SECTIONS ─────────────────────────────────────────────────────────────── */
.asp-section { padding: 5rem 0; }
.asp-section--light { background: var(--c-light); }
.asp-section--dark { background: var(--c-dark); }
.asp-section--dark-photo { position: relative; background-size: cover; background-position: center; }
.asp-section--cta { position: relative; background: var(--c-dark); background-size: cover; background-position: center; }
.asp-section__overlay { position: absolute; inset: 0; background: rgba(26,39,68,.85); }
.asp-section__title { font-size: clamp(1.75rem, 4vw, 3rem); color: var(--c-dark); margin-bottom: 1rem; }
.asp-section__title--white { color: #fff; }
.asp-section__subtitle { font-size: 1.05rem; color: var(--c-gray); max-width: 640px; margin-bottom: 2.5rem; }
.asp-section__subtitle--white { color: rgba(255,255,255,.75); }
.asp-section__cta-center { display: flex; flex-direction: column; gap: 0.75rem; align-items: center; }
@media (min-width: 480px) { .asp-section__cta-center { flex-direction: row; justify-content: center; } }

/* ── DIENSTEN GRID ────────────────────────────────────────────────────────── */
.asp-diensten-grid { display: grid; grid-template-columns: 1fr; gap: 1.5rem; margin-top: 2.5rem; }
@media (min-width: 640px) { .asp-diensten-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .asp-diensten-grid { grid-template-columns: repeat(4, 1fr); } }
.asp-dienst-card { background: #fff; border-radius: 1rem; padding: 1.75rem; border: 1px solid var(--c-border); box-shadow: var(--shadow-sm); transition: all .2s; position: relative; display: flex; flex-direction: column; }
.asp-dienst-card:hover { box-shadow: var(--shadow-lg); transform: translateY(-3px); border-color: rgba(254,76,40,.2); }
.asp-dienst-card--featured { border-color: var(--c-orange); box-shadow: 0 4px 24px rgba(254,76,40,.15); }
.asp-dienst-card__badge { position: absolute; top: -0.75rem; left: 1.5rem; background: var(--c-orange); color: #fff; font-family: var(--font-head); font-size: 0.7rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; padding: 0.25rem 0.75rem; border-radius: 2rem; }
.asp-dienst-card__subtitle { font-family: var(--font-head); font-size: 0.75rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--c-orange); margin-bottom: 0.4rem; }
.asp-dienst-card__title { font-size: 1.3rem; color: var(--c-dark); margin-bottom: 0.75rem; }
.asp-dienst-card__desc { font-size: 0.875rem; color: var(--c-gray); line-height: 1.6; flex: 1; }
.asp-dienst-card__meta { display: flex; justify-content: space-between; align-items: center; margin-top: 1.25rem; padding-top: 1rem; border-top: 1px solid var(--c-border); }
.asp-dienst-card__price { font-family: var(--font-head); font-size: 1.1rem; font-weight: 700; color: var(--c-dark); }
.asp-dienst-card__duration { font-size: 0.8rem; color: var(--c-gray); }
.asp-dienst-card__link { display: flex; align-items: center; gap: 0.4rem; margin-top: 1rem; font-size: 0.875rem; font-weight: 600; color: var(--c-orange); transition: gap .15s; }
.asp-dienst-card__link:hover { gap: 0.7rem; }

/* ── SYMPTOMEN ────────────────────────────────────────────────────────────── */
.asp-symptoms-grid { display: grid; grid-template-columns: 1fr; gap: 1rem; margin: 2.5rem 0; }
@media (min-width: 640px) { .asp-symptoms-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .asp-symptoms-grid { grid-template-columns: repeat(3, 1fr); } }
.asp-symptom-card { background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.12); border-radius: var(--radius); padding: 1.5rem; }
.asp-symptom-card__icon { font-size: 1.75rem; margin-bottom: 0.75rem; }
.asp-symptom-card__title { font-size: 1rem; font-weight: 700; color: #fff; margin-bottom: 0.4rem; }
.asp-symptom-card__desc { font-size: 0.85rem; color: rgba(255,255,255,.85); line-height: 1.5; }

/* ── STAPPEN ──────────────────────────────────────────────────────────────── */
.asp-steps { display: grid; grid-template-columns: 1fr; gap: 1.5rem; margin-top: 2.5rem; }
@media (min-width: 640px) { .asp-steps { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .asp-steps { grid-template-columns: repeat(3, 1fr); } }
.asp-step { display: flex; gap: 1rem; align-items: flex-start; }
.asp-step__nr { font-family: var(--font-head); font-size: 2.5rem; font-weight: 900; color: var(--c-orange); line-height: 1; flex-shrink: 0; min-width: 3rem; }
.asp-step__title { font-size: 1.05rem; font-weight: 700; color: var(--c-dark); margin-bottom: 0.4rem; }
.asp-step__desc { font-size: 0.875rem; color: var(--c-gray); line-height: 1.6; }

/* ── PROJECTEN ────────────────────────────────────────────────────────────── */
.asp-projecten-grid { display: grid; grid-template-columns: 1fr; gap: 1.5rem; margin-top: 2.5rem; }
@media (min-width: 640px) { .asp-projecten-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .asp-projecten-grid { grid-template-columns: repeat(3, 1fr); } }
.asp-project-card { background: #fff; border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-sm); border: 1px solid var(--c-border); transition: all .2s; }
.asp-project-card:hover { box-shadow: var(--shadow-lg); transform: translateY(-2px); }
.asp-project-card__img { position: relative; aspect-ratio: 16/10; overflow: hidden; }
.asp-project-card__img img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s; }
.asp-project-card:hover .asp-project-card__img img { transform: scale(1.04); }
.asp-project-card__overlay { position: absolute; inset: 0; background: linear-gradient(to top, rgba(0,0,0,.6) 0%, transparent 60%); }
.asp-project-card__badges { position: absolute; bottom: 0.75rem; left: 0.75rem; display: flex; gap: 0.4rem; flex-wrap: wrap; }
.asp-project-card__body { padding: 1.25rem; }
.asp-project-card__title { font-size: 1rem; font-weight: 700; color: var(--c-dark); margin-bottom: 0.4rem; }
.asp-project-card__km { font-size: 0.8rem; color: var(--c-orange); font-weight: 600; margin-bottom: 0.5rem; }
.asp-project-card__desc { font-size: 0.85rem; color: var(--c-gray); line-height: 1.5; }
.asp-badge { display: inline-block; padding: 0.2rem 0.6rem; border-radius: 2rem; font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; }
.asp-badge--dark { background: var(--c-dark); color: #fff; }
.asp-badge--orange { background: var(--c-orange); color: #fff; }

/* ── AUTOMERKEN GRID ──────────────────────────────────────────────────────── */
.asp-merken-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.75rem; margin-top: 2rem; }
@media (min-width: 480px) { .asp-merken-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 768px) { .asp-merken-grid { grid-template-columns: repeat(4, 1fr); } }
@media (min-width: 1024px) { .asp-merken-grid { grid-template-columns: repeat(6, 1fr); } }
.asp-merk-card { display: flex; justify-content: space-between; align-items: center; padding: 0.75rem 1rem; background: #fff; border: 1px solid var(--c-border); border-radius: 0.625rem; font-size: 0.875rem; font-weight: 600; color: var(--c-dark); transition: all .15s; }
.asp-merk-card:hover { border-color: var(--c-orange); color: var(--c-orange); background: rgba(254,76,40,.03); }
.asp-merk-card__arrow { color: var(--c-orange); opacity: 0; transition: opacity .15s; }
.asp-merk-card:hover .asp-merk-card__arrow { opacity: 1; }

/* ── REVIEWS ──────────────────────────────────────────────────────────────── */
.asp-reviews-header { display: flex; justify-content: space-between; align-items: flex-start; flex-wrap: wrap; gap: 1.5rem; margin-bottom: 2.5rem; }
.asp-reviews-score { text-align: center; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.12); border-radius: var(--radius); padding: 1.25rem 2rem; }
.asp-reviews-score__nr { font-family: var(--font-head); font-size: 3rem; font-weight: 900; color: var(--c-orange); line-height: 1; }
.asp-reviews-score__stars { color: #fbbf24; font-size: 1.1rem; margin: 0.25rem 0; }
.asp-reviews-score__label { font-size: 0.8rem; color: rgba(255,255,255,.78); }
.asp-reviews-grid { display: grid; grid-template-columns: 1fr; gap: 1.25rem; }
@media (min-width: 640px) { .asp-reviews-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .asp-reviews-grid { grid-template-columns: repeat(3, 1fr); } }
/* Reviews als echte Google-review-kaarten: witte kaart met donkere, goed leesbare
   tekst (hoog contrast op de donkere sectie), Google-profielfoto, geverifieerd-
   label, Google-logo en relatieve datum. */
.asp-review-card { background: #fff; border: 1px solid #e8eaed; border-radius: var(--radius); padding: 1.35rem 1.4rem; box-shadow: var(--shadow-md); display: flex; flex-direction: column; gap: 0.85rem; }
.asp-review-card__top { display: flex; align-items: flex-start; justify-content: space-between; gap: 0.75rem; }
.asp-review-card__id { display: flex; align-items: center; gap: 0.7rem; min-width: 0; }
.asp-review-card__avatar { width: 2.5rem; height: 2.5rem; background: var(--c-dark); border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #fff; font-weight: 700; font-size: 1rem; flex-shrink: 0; overflow: hidden; }
.asp-review-card__avatar--photo { object-fit: cover; }
.asp-review-card__idtext { min-width: 0; }
.asp-review-card__name { display: flex; align-items: center; gap: 0.3rem; font-size: 0.95rem; font-weight: 700; color: var(--c-dark); line-height: 1.2; }
.asp-review-card__verified-wrap { display: inline-flex; flex-shrink: 0; }
.asp-review-card__verified { width: 15px; height: 15px; display: block; }
.asp-review-card__meta { font-size: 0.78rem; color: #70757a; margin-top: 0.1rem; }
.asp-review-card__g { flex-shrink: 0; }
.asp-review-card__g-icon { width: 20px; height: 20px; display: block; }
.asp-review-card__stars { color: #fbbc04; font-size: 1.05rem; letter-spacing: 1px; line-height: 1; }
.asp-review-card__star--off { color: #dadce0; }
.asp-review-card__text { font-size: 0.9rem; color: #3c4043; line-height: 1.65; margin: 0; display: -webkit-box; -webkit-line-clamp: 6; -webkit-box-orient: vertical; overflow: hidden; }
/* Op de dedicated reviews-pagina de volledige review tonen (geen afkapping). */
.asp-reviews-grid--full .asp-review-card__text { display: block; -webkit-line-clamp: none; overflow: visible; }
.asp-reviews-grid--full .asp-review-card { align-self: start; }

/* ── SPLIT LAYOUT ─────────────────────────────────────────────────────────── */
.asp-split { display: grid; grid-template-columns: 1fr; gap: 3rem; align-items: stretch; }
@media (min-width: 1024px) { .asp-split { grid-template-columns: 1fr 1fr; } }
.asp-split__text { display: flex; flex-direction: column; justify-content: center; }
.asp-split__media { border-radius: var(--radius); overflow: hidden; }
.asp-split__media img { width: 100%; height: 100%; object-fit: cover; min-height: 300px; }

/* ── FAQ ──────────────────────────────────────────────────────────────────── */
.asp-faq { margin-top: 2rem; }
.asp-faq__item { border-bottom: 1px solid var(--c-border); }
.asp-faq__question { display: flex; justify-content: space-between; align-items: center; width: 100%; padding: 1.25rem 0; background: none; border: none; cursor: pointer; text-align: left; font-size: 1rem; font-weight: 600; color: var(--c-dark); gap: 1rem; }
.asp-faq__question:hover { color: var(--c-orange); }
.asp-faq__icon { flex-shrink: 0; transition: transform .2s; }
.asp-faq__question[aria-expanded="true"] .asp-faq__icon { transform: rotate(180deg); }
.asp-faq__answer { padding: 0 0 1.25rem; }
.asp-faq__answer p { font-size: 0.9rem; color: var(--c-gray); line-height: 1.7; }

/* ── CHECK LIST ───────────────────────────────────────────────────────────── */
.asp-check-list { list-style: none; display: flex; flex-direction: column; gap: 0.6rem; }
.asp-check-list li { display: flex; align-items: center; gap: 0.6rem; font-size: 0.9rem; color: #374151; }
.asp-check-list li::before { content: ''; width: 18px; height: 18px; border-radius: 50%; background: rgba(254,76,40,.1); border: 2px solid var(--c-orange); flex-shrink: 0; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 24 24' fill='none' stroke='%23FE4C28' stroke-width='3'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: center; background-size: 10px; }

/* ── PAGE HERO ────────────────────────────────────────────────────────────── */
.asp-page-hero { position: relative; min-height: 60vh; display: flex; align-items: center; background: var(--c-dark); background-size: cover; background-position: center; }
.asp-page-hero__overlay { position: absolute; inset: 0; background: linear-gradient(135deg, rgba(26,39,68,.92) 0%, rgba(26,39,68,.75) 100%); }
.asp-page-hero__inner { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 1fr); gap: 2rem; padding: 5rem 1.5rem 3rem; align-items: center; }
@media (min-width: 768px) { .asp-page-hero__inner { padding-left: 2rem; padding-right: 2rem; } }
@media (min-width: 1024px) { .asp-page-hero__inner { grid-template-columns: minmax(0, 1fr) 380px; gap: 3rem; padding: 7rem 2rem 5rem; } }
.asp-page-hero__content { color: #fff; min-width: 0; }
.asp-page-hero__title { font-size: clamp(2rem, 7vw, 6rem); font-weight: 900; text-transform: uppercase; line-height: 0.95; margin-bottom: 1rem; }
.asp-page-hero__subtitle { font-size: 1.05rem; color: rgba(255,255,255,.8); max-width: 540px; }

/* ── TARIEVEN TABEL ───────────────────────────────────────────────────────── */
.asp-tarieven-tabel { background: #fff; border-radius: var(--radius); overflow: hidden; border: 1px solid var(--c-border); box-shadow: var(--shadow-sm); margin-top: 2rem; }
.asp-tarieven-tabel__header { display: grid; grid-template-columns: 1fr auto; padding: 0.75rem 1.25rem; background: var(--c-dark); color: #fff; font-family: var(--font-head); font-size: 0.8rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.asp-tarieven-tabel__row { display: grid; grid-template-columns: 1fr auto; padding: 0.75rem 1.25rem; border-bottom: 1px solid var(--c-border); font-size: 0.875rem; align-items: center; }
.asp-tarieven-tabel__row:last-child { border-bottom: none; }
.asp-tarieven-tabel__row:nth-child(even) { background: var(--c-light); }
.asp-tarieven-tabel__prijs { font-weight: 700; color: var(--c-orange); white-space: nowrap; }

/* ── MODELLEN GRID ────────────────────────────────────────────────────────── */
.asp-modellen-grid { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.asp-model-tag { background: var(--c-light); border: 1px solid var(--c-border); border-radius: 0.5rem; padding: 0.4rem 0.875rem; font-size: 0.85rem; font-weight: 600; color: var(--c-dark); transition: all .15s; }
.asp-model-tag:hover { background: rgba(254,76,40,.08); border-color: var(--c-orange); color: var(--c-orange); }

/* ── PRIJSKAARTEN ─────────────────────────────────────────────────────────── */
.asp-prijskaarten { display: grid; grid-template-columns: 1fr; gap: 1.5rem; margin-top: 2rem; }
@media (min-width: 640px) { .asp-prijskaarten { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .asp-prijskaarten { grid-template-columns: repeat(3, 1fr); } }
.asp-prijskaart { background: #fff; border: 1px solid var(--c-border); border-radius: 1rem; padding: 2rem; position: relative; }
.asp-prijskaart--featured { border-color: var(--c-orange); box-shadow: 0 4px 24px rgba(254,76,40,.15); }
.asp-prijskaart__badge { position: absolute; top: -0.75rem; left: 50%; transform: translateX(-50%); background: var(--c-orange); color: #fff; font-family: var(--font-head); font-size: 0.7rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; padding: 0.25rem 1rem; border-radius: 2rem; white-space: nowrap; }
.asp-prijskaart__titel { font-size: 1.2rem; color: var(--c-dark); margin-bottom: 0.5rem; }
.asp-prijskaart__prijs { font-family: var(--font-head); font-size: 2rem; font-weight: 900; color: var(--c-orange); margin-bottom: 0.75rem; }
.asp-prijskaart__desc { font-size: 0.875rem; color: var(--c-gray); line-height: 1.6; }

/* ── BREADCRUMBS ──────────────────────────────────────────────────────────── */
.asp-breadcrumbs { margin-bottom: 1rem; }
.asp-breadcrumbs ol { display: flex; flex-wrap: wrap; gap: 0.25rem; list-style: none; }
.asp-breadcrumbs li { display: flex; align-items: center; gap: 0.25rem; font-size: 0.8rem; color: rgba(255,255,255,.78); }
.asp-breadcrumbs li::after { content: '/'; margin-left: 0.25rem; }
.asp-breadcrumbs li:last-child::after { display: none; }
.asp-breadcrumbs a { color: rgba(255,255,255,.7); transition: color .12s; }
.asp-breadcrumbs a:hover { color: #fff; }

/* ── FOOTER ───────────────────────────────────────────────────────────────── */
.asp-footer { background: var(--c-dark); color: rgba(255,255,255,.85); padding: 4rem 0 0; }
.asp-footer__top { display: grid; grid-template-columns: 1fr; gap: 2.5rem; padding-bottom: 3rem; border-bottom: 1px solid rgba(255,255,255,.08); }
@media (min-width: 640px) { .asp-footer__top { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .asp-footer__top { grid-template-columns: 2fr 1fr 1fr 1fr; } }
.asp-footer__logo { display: inline-block; line-height: 0; }
.asp-footer__logo img { height: 50px; width: auto; margin-bottom: 1.75rem; }
.asp-footer__tagline { font-size: 0.9rem; line-height: 1.65; margin-bottom: 1.5rem; color: rgba(255,255,255,.85); }
.asp-footer__contact { display: flex; flex-direction: column; gap: 0.6rem; }
.asp-footer__contact-item { display: flex; align-items: center; gap: 0.5rem; font-size: 0.85rem; transition: color .12s; }
.asp-footer__contact-item:hover { color: #fff; }
.asp-footer__heading { font-family: var(--font-head); font-size: 0.8rem; font-weight: 700; letter-spacing: .15em; text-transform: uppercase; color: rgba(255,255,255,.74); margin-bottom: 1rem; }
.asp-footer__links { list-style: none; display: flex; flex-direction: column; gap: 0.5rem; }
.asp-footer__links a { font-size: 0.875rem; transition: color .12s; }
.asp-footer__links a:hover { color: var(--c-orange); }
.asp-footer__review-badge { display: flex; align-items: center; gap: 0.75rem; margin-top: 1.5rem; background: rgba(255,255,255,.06); border-radius: 0.75rem; padding: 0.875rem 1rem; }
.asp-footer__review-score { font-family: var(--font-head); font-size: 2rem; font-weight: 900; color: var(--c-orange); }
.asp-footer__review-stars { color: #fbbf24; font-size: 0.9rem; }
.asp-footer__review-label { font-size: 0.75rem; color: rgba(255,255,255,.75); }
.asp-footer__bottom { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 1rem; padding: 1.5rem 0; font-size: 0.8rem; color: rgba(255,255,255,.72); }
.asp-footer__bottom-links { display: flex; gap: 1.5rem; }
.asp-footer__bottom-links a { transition: color .12s; }
.asp-footer__bottom-links a:hover { color: rgba(255,255,255,.7); }

/* ── WHATSAPP KNOP ────────────────────────────────────────────────────────── */
.asp-whatsapp-btn { position: fixed; bottom: 1.5rem; right: 1.5rem; width: 56px; height: 56px; background: #25D366; color: #fff; border-radius: 50%; display: flex; align-items: center; justify-content: center; box-shadow: 0 4px 16px rgba(37,211,102,.4); z-index: 500; transition: all .2s; }
.asp-whatsapp-btn:hover { transform: scale(1.08); box-shadow: 0 6px 24px rgba(37,211,102,.5); }

/* ── CONTENT ──────────────────────────────────────────────────────────────── */
.asp-content h2 { font-size: 1.5rem; color: var(--c-dark); margin: 1.5rem 0 0.75rem; }
.asp-content h3 { font-size: 1.2rem; color: var(--c-dark); margin: 1.25rem 0 0.5rem; }
.asp-content p { font-size: 0.95rem; color: #374151; line-height: 1.7; margin-bottom: 1rem; }
.asp-content ul { list-style: disc; padding-left: 1.5rem; margin-bottom: 1rem; }
.asp-content li { font-size: 0.95rem; color: #374151; line-height: 1.7; margin-bottom: 0.25rem; }
.asp-content strong { font-weight: 700; color: var(--c-dark); }

/* ── MAIN ─────────────────────────────────────────────────────────────────── */
.asp-main { min-height: 60vh; }

/* ── OMS FORMS — verzorgd formulier in de huisstijl ───────────────────────── */
.oms-form { display: flex; flex-direction: column; gap: 1.1rem; }
.oms-form__row { display: flex; flex-direction: column; gap: 0.4rem; }
.oms-form__row > label { font-family: var(--font-head); font-size: 0.95rem; font-weight: 700; letter-spacing: .03em; text-transform: uppercase; color: var(--c-dark); }
.oms-form .req { color: var(--c-orange); }
.oms-form input[type="text"],
.oms-form input[type="email"],
.oms-form input[type="tel"],
.oms-form select,
.oms-form textarea {
    width: 100%; box-sizing: border-box;
    font-family: var(--font-body); font-size: 0.95rem; color: var(--c-dark);
    background: #fff; border: 1.5px solid var(--c-border); border-radius: var(--radius);
    padding: 0.75rem 0.9rem; transition: border-color .15s ease, box-shadow .15s ease;
}
.oms-form input::placeholder,
.oms-form textarea::placeholder { color: #9aa3af; }
.oms-form input:focus,
.oms-form select:focus,
.oms-form textarea:focus { outline: none; border-color: var(--c-orange); box-shadow: 0 0 0 3px rgba(254,76,40,.15); }
.oms-form textarea { resize: vertical; min-height: 120px; }
.oms-form__row--avg .oms-form__checkbox { flex-direction: row; align-items: flex-start; gap: 0.6rem; }
.oms-form__checkbox { display: flex; font-size: 0.85rem; color: var(--c-gray); line-height: 1.5; cursor: pointer; }
.oms-form__checkbox input[type="checkbox"] { width: 1.15rem; height: 1.15rem; margin-top: 0.1rem; accent-color: var(--c-orange); flex-shrink: 0; cursor: pointer; }
.oms-form__checkbox a { color: var(--c-orange); text-decoration: underline; }
.oms-form__actions { margin-top: 0.25rem; }
.oms-form__actions .asp-btn { width: 100%; justify-content: center; }
.oms-form [data-oms-feedback] { padding: 0.85rem 1rem; border-radius: var(--radius); font-size: 0.9rem; line-height: 1.5; }
.oms-form [data-oms-feedback].is-success,
.oms-form [data-oms-feedback].oms-form__feedback--success { background: #e7f6ec; color: #14663a; border: 1px solid #b7e4c7; }
.oms-form [data-oms-feedback].is-error,
.oms-form [data-oms-feedback].oms-form__feedback--error { background: #fdecea; color: #93231b; border: 1px solid #f5c6c2; }
.oms-form .oms-form__error,
.oms-form input.oms-invalid,
.oms-form textarea.oms-invalid { border-color: #d93025; }

/* Offerte-formulier staat standalone op de pagina → premium witte kaart */
.asp-content .oms-form { max-width: 640px; margin: 0.5rem auto 0; background: #fff; border: 1px solid #eceef1; border-radius: 1.25rem; padding: 2rem; box-shadow: var(--shadow-md); }

/* ── RESPONSIVE UTILITIES ─────────────────────────────────────────────────── */
@media (max-width: 640px) {
    .asp-hero__bullets { grid-template-columns: 1fr; }
    /* Consistente verticale ritmiek op mobiel voor álle contentsecties. */
    .asp-section { padding-top: 3.5rem; padding-bottom: 3.5rem; }
    /* Extra onderruimte zodat de hero-CTA's boven de zwevende widgets uitkomen. */
    .asp-hero { min-height: auto; }
    .asp-hero__inner { padding-top: 2.75rem; padding-bottom: 4.5rem; }
    /* Subpagina-hero (variant A) compacter op mobiel. */
    .asp-page-hero { min-height: auto; }
    .asp-page-hero__inner { padding-top: 3rem; padding-bottom: 2.5rem; }
    .asp-content .oms-form { padding: 1.5rem; }
}

/* Zwevende Google-reviewbadge compact op mobiel zodat hij de CTA-knoppen niet
   overlapt (de badge komt uit de canonieke OMS Reviews-plugin; hier alleen
   theme-side ingekort, plugin-code blijft ongemoeid). */
@media (max-width: 600px) {
    body .oms-rev-badge { flex-direction: row; align-items: center; gap: 6px; min-width: 0; padding: 8px 11px; }
    body .oms-rev-badge .oms-rev-badge-label,
    body .oms-rev-badge .oms-rev-badge-count { display: none; }
    body .oms-rev-badge .oms-rev-badge-body { align-items: flex-start; }
    body .oms-rev-badge-g svg { width: 22px; height: 22px; }
}