/* Automotive Almere — basis */
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  font-stretch: 62% 125%;
  src: url('/assets/archivo.woff2') format('woff2-variations'), url('/assets/archivo.woff2') format('woff2');
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body { margin: 0; background: #0A0F1C; color: #FFFFFF; }
img, svg { max-width: 100%; }
button, input, select, textarea { font: inherit; }
[hidden] { display: none !important; }
.dc-if { display: contents; }
.only-wide { display: contents; }
.only-narrow { display: none; }
.skip-link { position: absolute; left: 12px; top: -60px; z-index: 100; padding: 12px 16px; border-radius: 10px; background: #FFFFFF; color: #0A0F1C; font-weight: 800; text-decoration: none; }
.skip-link:focus { top: 12px; }
a:focus-visible, button:focus-visible, summary:focus-visible { outline: 3px solid rgba(127,163,245,.6); outline-offset: 2px; }
#aa-reviews-track:focus-visible { outline: 3px solid rgba(127,163,245,.5); outline-offset: 4px; border-radius: 18px; }
#form-submit[disabled] { opacity: .7; cursor: progress; }

/* Maten: breed (desktop) */
:root {
  --pad: 32px; --sec: 120px; --heroTop: 96px; --heroGap: 28px; --cardPad: 36px; --headGap: 48px;
  --h1: 132px; --h1cta: 100px; --carName: 48px; --carName2: 30px; --comboPrice: 88px;
  --priceCardPad: 28px; --priceName: 28px; --h2: 80px; --h3: 54px; --lead: 21px;
  --stat: 76px; --statLabel: 16px; --statTop: 80px; --statPad: 40px; --footLogo: 92px;
  --rowPrice: 24px; --mapH: 560px; --ctaDir: row; --revCardW: calc((100% - 32px) / 3);
}
/* Maten: smal (telefoon) */
@media (max-width: 759.98px) {
  :root {
    --pad: 16px; --sec: 72px; --heroTop: 36px; --heroGap: 20px; --cardPad: 22px; --headGap: 28px;
    --h1: 58px; --h1cta: 58px; --carName: 30px; --carName2: 20px; --comboPrice: 64px;
    --priceCardPad: 22px; --priceName: 24px; --h2: 46px; --h3: 36px; --lead: 17px;
    --stat: 29px; --statLabel: 13px; --statTop: 40px; --statPad: 24px; --footLogo: 76px;
    --rowPrice: 22px; --mapH: 380px; --ctaDir: column; --revCardW: 86%;
  }
  .only-wide { display: none; }
  .only-narrow { display: contents; }
}
/* Tussenmaat voor tablets en kleine laptops */
@media (min-width: 760px) and (max-width: 1099.98px) {
  :root { --h1: 104px; --h2: 68px; --stat: 60px; --revCardW: calc((100% - 16px) / 2); }
}
@media (min-width: 760px) and (max-width: 979.98px) {
  .nav-wide { display: none !important; }
}

/* Automotive Almere — motion & interaction layer */
html { scroll-behavior: smooth; }
[id] { scroll-margin-top: 84px; }

@keyframes aa-up { from { transform: translateY(105%); } to { transform: none; } }
@keyframes aa-rise { from { opacity: 0; transform: translateY(28px); } to { opacity: 1; transform: none; } }
@keyframes aa-drive { from { opacity: 0; transform: translateX(-48px) skewX(-10deg); filter: blur(6px); } to { opacity: 1; transform: none; filter: none; } }
@keyframes aa-streak { from { transform: translateX(-130%); } to { transform: translateX(330%); } }
@keyframes aa-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@keyframes aa-pulse { 0% { box-shadow: 0 0 0 0 rgba(34,197,94,.65); } 70% { box-shadow: 0 0 0 10px rgba(34,197,94,0); } 100% { box-shadow: 0 0 0 0 rgba(34,197,94,0); } }
@keyframes aa-slideup { from { transform: translateY(110%); } to { transform: none; } }
@keyframes aa-reveal { from { opacity: 0; transform: translateY(48px); } to { opacity: 1; transform: none; } }
@keyframes aa-glow { 0%, 100% { opacity: .35; } 50% { opacity: .7; } }

/* Headline lines that slide up out of a mask */
.aa-line { display: block; overflow: hidden; padding-bottom: .06em; margin-bottom: -.06em; }
.aa-line > span { display: block; animation: aa-up 1s cubic-bezier(.2,.8,.2,1) both; }

.aa-rise { animation: aa-rise .9s cubic-bezier(.2,.7,.2,1) both; }
.aa-drive { animation: aa-drive 1.1s cubic-bezier(.2,.8,.2,1) both; }
.aa-d1 { animation-delay: .05s; } .aa-d2 { animation-delay: .17s; } .aa-d3 { animation-delay: .32s; }
.aa-d4 { animation-delay: .44s; } .aa-d5 { animation-delay: .56s; } .aa-d6 { animation-delay: .7s; }

/* Speed lines in the hero, echoing the logo */
.aa-streak { position: absolute; left: 0; height: 2px; border-radius: 2px; animation: aa-streak 3.6s linear infinite; will-change: transform; }
.aa-glow { animation: aa-glow 6s ease-in-out infinite; }

/* Ticker band */
.aa-marquee { display: flex; width: max-content; animation: aa-marquee 32s linear infinite; }
.aa-marquee:hover { animation-play-state: paused; }
.aa-outline { color: transparent; -webkit-text-stroke: 1.5px #FFFFFF; }

.aa-pulse { animation: aa-pulse 2s infinite; }
.aa-bar { animation: aa-slideup .6s .8s cubic-bezier(.2,.8,.2,1) both; }

/* Buttons */
.aa-btn { transition: transform .2s ease, box-shadow .2s ease, background-color .2s ease, border-color .2s ease; }
.aa-btn:hover { transform: translateY(-2px); box-shadow: 0 12px 28px rgba(200,49,44,.35); }
.aa-btn:active { transform: translateY(0) scale(.98); }
.aa-btn svg { transition: transform .2s ease; }
.aa-btn:hover svg { transform: translateX(4px); }
.aa-ghost:hover { border-color: #FFFFFF !important; box-shadow: none; }
.aa-ghost-dark:hover { box-shadow: 0 12px 28px rgba(11,12,16,.18); }

/* Cards */
.aa-card { position: relative; overflow: hidden; transition: transform .3s cubic-bezier(.2,.8,.2,1), box-shadow .3s ease, border-color .3s ease; }
.aa-card::before { content: ""; position: absolute; left: 0; top: 0; width: 100%; height: 4px; background: var(--aa-accent, #C8312C); transform: scaleX(0); transform-origin: left; transition: transform .4s cubic-bezier(.2,.8,.2,1); }
.aa-card:hover { transform: translateY(-6px); box-shadow: 0 24px 48px rgba(0,0,0,.45); border-color: #2A3756 !important; background: #142039 !important; }
.aa-card:hover::before { transform: scaleX(1); }
.aa-card .aa-arrow { transition: transform .25s ease, background-color .25s ease, color .25s ease; }
.aa-card:hover .aa-arrow { transform: translateX(4px); background: var(--aa-accent, #C8312C) !important; color: #FFFFFF !important; }

.aa-row { transition: background-color .2s ease; }
.aa-row:active { background: #1A2440; }

/* Underline-on-hover links */
.aa-link { background-image: linear-gradient(currentColor, currentColor); background-size: 0 2px; background-position: 0 100%; background-repeat: no-repeat; transition: background-size .25s ease; padding-bottom: 2px; }
.aa-link:hover { background-size: 100% 2px; }

/* Form focus */
.aa-field:focus { outline: 3px solid rgba(127,163,245,.35); outline-offset: 2px; border-color: #7FA3F5 !important; }
.aa-field::placeholder { color: #6B7690; }

/* Reveal on scroll where the browser supports it; always visible otherwise */
@supports (animation-timeline: view()) {
  .aa-reveal { animation: aa-reveal linear both; animation-timeline: view(); animation-range: entry 0% entry 100%; }
}

/* Sales motion: shine sweep over primary buttons */
@keyframes aa-shine { 0% { left: -70%; } 28%, 100% { left: 140%; } }
.aa-shine { position: relative; overflow: hidden; }
.aa-shine::after { content: ""; position: absolute; top: 0; bottom: 0; left: -70%; width: 45%; background: linear-gradient(100deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.38) 50%, rgba(255,255,255,0) 100%); transform: skewX(-20deg); animation: aa-shine 4.2s ease-in-out 1.8s infinite; pointer-events: none; }

/* Attention wiggle for the offer badge */
@keyframes aa-wiggle { 0%, 84%, 100% { transform: rotate(0); } 87% { transform: rotate(-6deg) scale(1.06); } 90% { transform: rotate(5deg) scale(1.06); } 93% { transform: rotate(-3deg); } 96% { transform: rotate(2deg); } }
.aa-wiggle { display: inline-block; animation: aa-wiggle 4s ease-in-out 1s infinite; transform-origin: 50% 60%; }

/* Gentle float for the booking card */
@keyframes aa-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
.aa-float { animation: aa-float 6s ease-in-out 2s infinite; }

/* Arrow nudge inside call-to-action buttons */
@keyframes aa-nudge { 0%, 70%, 100% { transform: translateX(0); } 80% { transform: translateX(5px); } 90% { transform: translateX(0); } }
.aa-nudge svg { animation: aa-nudge 2.8s ease-in-out 2s infinite; }
.aa-nudge:hover svg { animation: none; }

/* Kenteken lookup */
@keyframes aa-spin { to { transform: rotate(360deg); } }
.aa-spin { animation: aa-spin .8s linear infinite; }
@keyframes aa-pop { from { opacity: 0; transform: translateY(12px) scale(.98); } to { opacity: 1; transform: none; } }
.aa-pop { animation: aa-pop .5s cubic-bezier(.2,.8,.2,1) both; }
@keyframes aa-carin { from { opacity: 0; transform: translateX(-90px); } 70% { opacity: 1; transform: translateX(6px); } to { opacity: 1; transform: none; } }
.aa-carin { animation: aa-carin .9s cubic-bezier(.2,.8,.2,1) .15s both; }
@keyframes aa-wheel { to { transform: rotate(360deg); } }
.aa-wheel { transform-box: fill-box; transform-origin: center; animation: aa-wheel .45s linear 2 .15s; }

/* Map */
@keyframes aa-dash { to { stroke-dashoffset: -28; } }
.aa-dash { animation: aa-dash 1.2s linear infinite; }
@keyframes aa-ring { from { transform: scale(.5); opacity: .9; } to { transform: scale(2.8); opacity: 0; } }
.aa-ring { transform-box: fill-box; transform-origin: center; animation: aa-ring 2s ease-out infinite; }
@keyframes aa-drop { 0% { transform: translateY(-70px); opacity: 0; } 60% { transform: translateY(6px); opacity: 1; } 80% { transform: translateY(-3px); } 100% { transform: none; opacity: 1; } }
.aa-drop { transform-box: fill-box; animation: aa-drop .9s cubic-bezier(.2,.8,.2,1) .4s both; }
@supports (animation-timeline: view()) {
  .aa-drop { animation: aa-drop linear both; animation-timeline: view(); animation-range: entry 30% cover 45%; }
}

/* Line-art car that draws itself */
@keyframes aa-draw { from { stroke-dasharray: 1; stroke-dashoffset: 1; } to { stroke-dasharray: 1; stroke-dashoffset: 0; } }
.aa-draw { animation: aa-draw 2.2s cubic-bezier(.6,0,.2,1) .4s both; }
@supports (animation-timeline: view()) {
  .aa-draw { animation: aa-draw linear both; animation-timeline: view(); animation-range: entry 0% cover 55%; }
}

/* Hide scrollbar on the review carousel */
.aa-noscroll { scrollbar-width: none; -ms-overflow-style: none; }
.aa-noscroll::-webkit-scrollbar { display: none; }

/* Calculator chips */
.aa-chip { transition: transform .15s ease, border-color .2s ease, background-color .2s ease; }
.aa-chip:hover { transform: translateY(-2px); }
.aa-chip:active { transform: scale(.97); }
.aa-chip:focus-visible { outline: 3px solid rgba(127,163,245,.5); outline-offset: 2px; }

/* Review stars: light up to the hovered star */
.aa-star { color: #F5B301; transition: transform .15s ease, color .15s ease; }
.aa-stars:hover .aa-star { color: #F5B301; }
.aa-star:hover ~ .aa-star { color: #2A3756; }
.aa-star:hover { transform: scale(1.12); }
.aa-star:focus-visible { outline: 3px solid rgba(245,179,1,.5); outline-offset: 2px; }

/* FAQ accordion */
.aa-faq summary { list-style: none; }
.aa-faq summary::-webkit-details-marker { display: none; }
.aa-faq summary:hover { background: #142039; }
.aa-faq summary:focus-visible { outline: 3px solid rgba(127,163,245,.5); outline-offset: -3px; }
.aa-faq .aa-faq-ic { transition: transform .25s ease, background-color .25s ease; }
.aa-faq[open] { border-color: #2A3756 !important; }
.aa-faq[open] .aa-faq-ic { transform: rotate(45deg); background: var(--aa-accent, #C62F2A) !important; }

/* Success check */
@keyframes aa-check-draw { from { stroke-dasharray: 1; stroke-dashoffset: 1; } to { stroke-dasharray: 1; stroke-dashoffset: 0; } }
.aa-check { animation: aa-check-draw .6s ease-out .25s both; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .aa-draw, .aa-check { animation: none !important; }
  .aa-spin, .aa-pop, .aa-carin, .aa-wheel, .aa-dash, .aa-ring, .aa-drop { animation: none !important; }
  .aa-shine::after, .aa-wiggle, .aa-float, .aa-nudge svg { animation: none !important; }
  .aa-line > span, .aa-rise, .aa-drive, .aa-reveal, .aa-bar, .aa-streak, .aa-marquee, .aa-pulse, .aa-glow { animation: none !important; }
  .aa-btn, .aa-card, .aa-card::before, .aa-link { transition: none !important; }
}