/* ===== Rijn van Gastel Auto's · projectlaag boven kit/basis.css ===== */

@font-face{font-family:"Fraunces";src:url("fonts/fraunces-600.woff2") format("woff2");font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:"Fraunces";src:url("fonts/fraunces-400i.woff2") format("woff2");font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:"Source Sans 3";src:url("fonts/source-sans-3-400.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Source Sans 3";src:url("fonts/source-sans-3-600.woff2") format("woff2");font-weight:600;font-style:normal;font-display:swap}

:root{
  --accent:#F2B134;          /* koplamp-amber op navy */
  --accent-d:#C98A1B;
  --inkt:#0A1B2E;            /* afgeleid van logo-navy #003366 */
  --inkt-2:#10263F;
  --marine:#003366;          /* exacte logokleur */
  --tint:#EDE7D9;
  --tint-2:#E2DAC7;
  --wit:#F7F4EC;
  --grijs:#5C6672;
  --lijn:rgba(10,27,46,.12);
  --f-display:"Fraunces",Georgia,serif;
  --f-serif:"Fraunces",Georgia,serif;
  --f-body:"Source Sans 3",system-ui,sans-serif;
}
h1,h2,h3{font-weight:600;letter-spacing:-.01em;line-height:1.02}
h1 em,h2 em,h3 em,.serif{font-weight:400}
.lead{color:#33404E}
.op-inkt .lead{color:rgba(247,244,236,.78)}
.laad{background:var(--inkt)}
.laad img{filter:brightness(0) invert(1)}
.sectiekop{display:flex;justify-content:space-between;align-items:flex-end;gap:2.5rem;margin-bottom:clamp(2.5rem,5vw,4rem)}
.sectiekop .lead{margin-top:0;max-width:38ch}
.sterren{color:var(--accent-d)}
.op-inkt .sterren{color:var(--accent)}

/* kopbalk op de donkere hero */
.merk img{height:40px;width:auto}
.kopbalk:not(.vast){color:var(--wit)}
.kopbalk.vast{color:var(--inkt)}
.kopbalk:not(.vast) .merk img{filter:brightness(0) invert(1)}

/* ---------- hero ---------- */
.hero{position:relative;min-height:100svh;display:flex;flex-direction:column;justify-content:flex-end;overflow:hidden;background:var(--inkt)}
.hero__media{position:absolute;inset:0;background:var(--inkt) url("assets/hero-poster.jpg") center/cover no-repeat}
.hero__media::after{content:"";position:absolute;inset:0;background:linear-gradient(78deg,rgba(10,27,46,.94) 8%,rgba(10,27,46,.62) 46%,rgba(10,27,46,.28) 78%),linear-gradient(0deg,rgba(10,27,46,.9),transparent 34%)}
.hero__film{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity 1.2s ease}
.hero__film.geverfd{opacity:1}
html:not(.js) .hero__film{display:none}
.hero__in{position:relative;display:grid;grid-template-columns:1.2fr .8fr;gap:clamp(2rem,5vw,5rem);align-items:center;padding-top:clamp(5.5rem,11vh,8rem);padding-bottom:clamp(1.6rem,3vh,2.6rem);flex:1}
.hero h1{font-size:clamp(2.5rem,5vw,5rem)}
.hero__tekst .oog{color:rgba(247,244,236,.62)}
.hero__tekst .oog::before{background:var(--accent)}
.hero h1{color:var(--wit)}
.hero h1 em{color:var(--accent)}
.hero__balk{position:relative;background:rgba(10,27,46,.55);backdrop-filter:blur(10px);border-top:1px solid rgba(247,244,236,.14);border-bottom:0}
.hero__balk>div{border-color:rgba(247,244,236,.14)}
.hero__balk b{color:var(--wit)}
.hero__balk span{color:rgba(247,244,236,.66)}
.hero__balk b span{color:var(--accent)}

/* keuringskaart: het signatuurmechanisme */
.keuring{position:relative;background:var(--wit);color:var(--inkt);border-radius:18px;padding:1.6rem 1.7rem 1.7rem;box-shadow:0 40px 80px -30px rgba(0,0,0,.65),0 0 0 1px rgba(247,244,236,.14);transform:rotate(1.2deg);max-width:430px;justify-self:end;overflow:hidden}
.keuring__veld{position:absolute;left:0;right:0;top:-22%;height:20%;background:linear-gradient(180deg,transparent,rgba(242,177,52,.28) 45%,rgba(242,177,52,.5) 50%,rgba(242,177,52,.28) 55%,transparent);pointer-events:none;animation:scan 4.6s cubic-bezier(.45,.05,.35,1) infinite}
.keuring.stil .keuring__veld{animation-play-state:paused}
@keyframes scan{0%{top:-22%}62%,100%{top:108%}}
.keuring__kop{display:flex;justify-content:space-between;align-items:baseline;border-bottom:2px solid var(--inkt);padding-bottom:.8rem;margin-bottom:1rem}
.keuring__kop b{font:600 1.35rem/1 var(--f-display);letter-spacing:-.01em}
.keuring__kop span{font:italic 400 .92rem var(--f-serif);color:var(--grijs)}
.keuring__lijst{list-style:none;margin:0;padding:0;display:grid;gap:.85rem}
.keuring__lijst li{display:flex;align-items:center;gap:.8rem;font-weight:600;font-size:1.02rem;opacity:.28;transform:translateX(-6px);transition:opacity .5s ease,transform .5s var(--ease)}
.keuring__lijst li.aan{opacity:1;transform:none}
.vink{flex:none;width:26px;height:26px;border-radius:50%;background:var(--marine);color:var(--accent);display:grid;place-items:center}
.vink svg{width:14px;height:14px;stroke-dasharray:24;stroke-dashoffset:24;transition:stroke-dashoffset .45s ease .12s}
li.aan .vink svg{stroke-dashoffset:0}
.keuring__stempel{width:104px;height:104px;margin:1.2rem .2rem -.2rem auto;border:3px solid var(--marine);border-radius:50%;display:grid;place-content:center;text-align:center;transform:rotate(-12deg) scale(2.4);opacity:0;color:var(--marine);transition:transform .5s cubic-bezier(.2,1.6,.4,1),opacity .3s}
.keuring__stempel span{font:600 1.05rem/1 var(--f-display);text-transform:uppercase;letter-spacing:.06em}
.keuring__stempel small{font-size:.62rem;letter-spacing:.08em;text-transform:uppercase}
.keuring__stempel.aan{transform:rotate(-12deg) scale(1);opacity:.92}

/* ---------- voorraad ---------- */
.kaart::before{background:linear-gradient(0deg,rgba(10,27,46,.9),rgba(10,27,46,.45) 45%,rgba(10,27,46,.12) 70%,rgba(10,27,46,.05))}
.kaart__prijs{position:absolute;top:1rem;right:1rem;background:var(--accent);color:var(--inkt);font:600 1.05rem/1 var(--f-body);padding:.55rem .9rem;border-radius:999px;box-shadow:0 6px 16px -6px rgba(0,0,0,.5)}
.kaart__tekst b{font-weight:600}
.voorraad__noot{margin:2.2rem auto 0;max-width:56ch;text-align:center;color:var(--grijs);font-size:.98rem}
.band{padding:1.6rem 0;border-block:1px solid var(--lijn)}
.band span{font-weight:600;color:rgba(10,27,46,.24)}

/* ---------- werkplaats / snelservice ---------- */
.snel{margin-top:2.2rem;background:var(--wit);border-radius:var(--r-s);padding:1.4rem 1.5rem;box-shadow:0 1px 0 var(--lijn)}
.snel>b{font:600 1.15rem/1.2 var(--f-display)}
.snel__chips{display:flex;flex-wrap:wrap;gap:.55rem;margin:.9rem 0}
.snel__chips button{border:1.5px solid var(--lijn);background:transparent;border-radius:999px;padding:.55rem 1rem;font:600 .92rem/1 var(--f-body);color:var(--inkt);cursor:pointer;transition:background .25s,color .25s,border-color .25s,transform .25s var(--ease)}
.snel__chips button:hover{transform:translateY(-2px);border-color:var(--marine)}
.snel__chips button.aan{background:var(--marine);border-color:var(--marine);color:var(--wit)}
.snel__som{margin:0;color:var(--grijs);font-size:.95rem;min-height:1.5em}
.snel__som b{color:var(--marine)}

/* ---------- ervaringen ---------- */
.rev{display:grid;grid-template-columns:.8fr 1.2fr;gap:clamp(2.5rem,6vw,6rem);align-items:center}
.rev__cijfer{background:var(--inkt-2);border-radius:var(--r);padding:2.4rem 2rem;text-align:center;display:grid;gap:.7rem;justify-items:center;box-shadow:0 30px 60px -30px rgba(0,0,0,.6)}
.rev__cijfer>b{font:600 clamp(4rem,7vw,6.2rem)/1 var(--f-display);color:var(--wit);letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.rev__cijfer>span{color:rgba(247,244,236,.66)}
.rev__sterren svg{width:min(270px,80%);height:auto}
.ster-rij path{fill:rgba(247,244,236,.16)}
.ster-vul{clip-path:inset(0 calc(100% - var(--vul)) 0 0)}
.ster-vul path{fill:var(--accent)}
.op-inkt .knop--lijn{box-shadow:0 0 0 1.5px rgba(247,244,236,.8) inset,0 4px 0 rgba(247,244,236,.25)}

/* ---------- over Rijn ---------- */
.punten{list-style:none;margin:2rem 0 0;padding:0;display:grid;gap:1.2rem}
.punten li{display:grid;gap:.2rem;border-left:3px solid var(--accent);padding-left:1.1rem}
.punten b{font:600 1.15rem/1.2 var(--f-display)}
.punten span{color:var(--grijs);font-size:.96rem}

/* ---------- bezoek ---------- */
.bezoek{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(2.5rem,6vw,5.5rem);align-items:start}
.contactgegevens{display:grid;grid-template-columns:1fr 1fr;gap:.8rem;margin-top:2.2rem}
.contactgegevens a{display:grid;gap:.15rem;background:var(--inkt-2);border-radius:var(--r-s);padding:1.1rem 1.2rem;text-decoration:none;transition:transform .3s var(--ease),background .3s}
.contactgegevens a:hover{transform:translateY(-3px);background:#16304D}
.contactgegevens b{color:var(--wit);font-size:1.06rem}
.contactgegevens span{color:rgba(247,244,236,.6);font-size:.86rem}
.tijden{margin-top:1.6rem;border-top:1px solid rgba(247,244,236,.14)}
.tijden div{display:flex;justify-content:space-between;padding:.75rem 0;border-bottom:1px solid rgba(247,244,236,.14)}
.tijden span{color:rgba(247,244,236,.66)}
.tijden b{color:var(--wit)}
.agenda__hint{margin:1rem 0 0;color:rgba(247,244,236,.55);font-size:.86rem}

/* ---------- plakker ---------- */
.plakker.dicht{transform:translate(-50%,160%)!important}

/* ---------- slot ---------- */
.slot{background:var(--accent);color:var(--inkt)}
.slot .lead{color:rgba(10,27,46,.78)}

/* ---------- responsive ---------- */
@media (max-width:1100px){
  .rev{grid-template-columns:1fr}
  .rev__cijfer{max-width:420px}
}
@media (max-width:980px){
  .hero__in{grid-template-columns:1fr;padding-top:clamp(6rem,12vh,8rem)}
  .keuring{justify-self:start;transform:rotate(0)}
  .bezoek{grid-template-columns:1fr}
  .sectiekop{flex-direction:column;align-items:flex-start;gap:1rem}
}
@media (max-width:760px){
  .hero__balk{grid-template-columns:1fr 1fr}
  .contactgegevens{grid-template-columns:1fr 1fr}
  .keuring{max-width:100%}
}
@media (max-width:560px){
  .contactgegevens{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){
  .keuring__veld{animation:none;opacity:0}
  .keuring__lijst li{opacity:1;transform:none}
  .vink svg{stroke-dashoffset:0}
  .keuring__stempel{transform:rotate(-12deg) scale(1);opacity:.92}
}

/* ---------- laadscherm: echt logo vult met amber, baan legt zich eronder ---------- */
html:not(.js) .laad{display:none}
.laad{display:grid;place-items:center;align-content:center;background:var(--inkt)}
.laad__logo{position:relative;width:min(320px,64vw);aspect-ratio:577/56}
.laad__contour,.laad__vul i{-webkit-mask:url(assets/logo.png) center/contain no-repeat;mask:url(assets/logo.png) center/contain no-repeat}
.laad__contour{position:absolute;inset:0;background:rgba(247,244,236,.16)}
.laad__vul{position:absolute;inset:0;overflow:hidden}
.laad__vul i{position:absolute;inset:0;background:linear-gradient(0deg,var(--accent),#f9f3df 72%);transform:translateY(101%);animation:rvg-vullogo 1.5s .18s cubic-bezier(.32,.72,.28,1) forwards}
@keyframes rvg-vullogo{to{transform:none}}
.laad__baan{width:min(320px,64vw);height:3px;margin-top:1.7rem;border-radius:2px;background:rgba(247,244,236,.12);overflow:hidden}
.laad__baan i{display:block;height:100%;background:var(--accent);transform:scaleX(0);transform-origin:left;animation:rvg-baan 1.15s .38s cubic-bezier(.3,.7,.3,1) forwards}
@keyframes rvg-baan{to{transform:scaleX(1)}}
.laad__sub{margin:1.1rem 0 0;font:600 .78rem/1 var(--f-body);letter-spacing:.3em;text-transform:uppercase;color:rgba(247,244,236,.5)}

/* ---------- stuurwiel-cursor: draait mee met de vaart (alleen fijne pointers) ---------- */
.cursor{position:fixed;left:0;top:0;z-index:200;pointer-events:none;opacity:0;transition:opacity .25s;will-change:transform}
.cursor.aan{opacity:1}
.cursor.weg{opacity:0!important}
.cursor i{display:block;transition:transform .3s var(--ease)}
.cursor.actief i{transform:scale(1.18)}
.cursor svg{display:block;width:34px;height:34px;filter:drop-shadow(0 2px 3px rgba(10,27,46,.45))}
html.cursor-aan,html.cursor-aan a,html.cursor-aan button,html.cursor-aan input,html.cursor-aan label,html.cursor-aan summary{cursor:none}
html.cursor-aan .check,html.cursor-aan .check *,html.cursor-aan input,html.cursor-aan textarea,html.cursor-aan select,html.cursor-aan label{cursor:auto}
@media (hover:none),(pointer:coarse){.cursor{display:none}}
@media (prefers-reduced-motion:reduce){
  .laad__vul i,.laad__baan i{animation:none;transform:none}
  .cursor{display:none}
}

/* ---------- teaser naar de autocheck: volle statement-sectie ---------- */
.teaser{text-align:center}
.teaser .oog{justify-content:center}
.teaser__in{display:grid;justify-items:center}
.teaser h2 em{color:var(--accent)}
.teaser .lead{max-width:54ch}
.teaser .knoprij{justify-content:center;margin-top:.4rem}
.knop--xl{padding:1.3rem 2.2rem;font-size:1.14rem}
.teaser__punten{list-style:none;display:flex;gap:1.8rem;flex-wrap:wrap;justify-content:center;margin:1.7rem 0 0;padding:0}
.teaser__punten li{display:flex;align-items:center;gap:.55rem;color:rgba(247,244,236,.72);font-weight:600;font-size:.95rem}
.teaser__punten li::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--accent);flex:none}

/* hero: microcopy onder de CTA-rij */
.hero__hint{margin:1.1rem 0 0;color:rgba(247,244,236,.68);font-size:.93rem}

/* voorraad-noot: link naar de check */
.voorraad__noot a{color:var(--marine);font-weight:600;text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--accent-d)}
.voorraad__noot a:hover{color:var(--accent-d)}

/* ---------- autocheck: de lead magnet op een kale pagina ---------- */
.checkpagina{min-height:100svh;display:grid;place-items:center;background:radial-gradient(120% 90% at 50% 0%,var(--inkt-2),var(--inkt) 62%);padding:clamp(5.5rem,10vh,7rem) 1.2rem 3rem}
.check{width:min(620px,100%);background:var(--wit);border-radius:var(--r-l,22px);padding:clamp(1.6rem,4vw,2.6rem);box-shadow:0 30px 80px -30px rgba(0,0,0,.55)}
.check__oog{margin:0;font:600 .78rem/1 var(--f-body);letter-spacing:.28em;text-transform:uppercase;color:var(--accent-d)}
.check__belofte{margin:.6rem 0 0;color:var(--grijs);font-size:.95rem}
.check__vraag{margin:1.4rem 0 0;font:600 clamp(1.3rem,2.6vw,1.7rem)/1.25 var(--f-display);color:var(--inkt)}
.check__opties{display:grid;gap:.7rem;margin-top:1.1rem}
.check__opties button{display:flex;align-items:center;gap:.9rem;text-align:left;padding:1rem 1.15rem;border-radius:14px;border:1.5px solid var(--lijn);background:#fff;cursor:pointer;font:600 1rem/1.3 var(--f-body);color:var(--inkt);transition:transform .25s var(--ease),border-color .25s,box-shadow .25s}
.check__opties button:hover{transform:translateY(-2px);border-color:var(--accent);box-shadow:0 10px 24px -14px rgba(10,27,46,.45)}
.check__opties button b{font-family:var(--f-display)}
.check__opties button span{color:var(--grijs);font-size:.88rem}
.check__dots{display:flex;gap:.45rem;margin-top:1.5rem}
.check__dots i{width:8px;height:8px;border-radius:50%;background:var(--tint-2);transition:background .3s,transform .3s}
.check__dots i.aan{background:var(--accent-d);transform:scale(1.25)}
.check__uitslag h2{margin:1.2rem 0 0;font:600 clamp(1.4rem,2.8vw,1.8rem)/1.25 var(--f-display);color:var(--inkt)}
.check__match{display:flex;justify-content:space-between;align-items:baseline;gap:1rem;padding:1rem 0;border-bottom:1.5px dashed var(--lijn)}
.check__match:last-of-type{border-bottom:0}
.check__match b{font-family:var(--f-display);font-size:1.06rem}
.check__match span{display:block;color:var(--grijs);font-size:.88rem;margin-top:.15rem}
.check__match em{font-style:normal;font:600 1.05rem var(--f-body);color:var(--accent-d);white-space:nowrap}
.check__knoppen{display:flex;gap:.8rem;flex-wrap:wrap;margin-top:1.5rem}
.check__noot{margin:1.2rem 0 0;color:var(--grijs);font-size:.85rem}
.check__terug{margin-top:1.6rem;text-align:center}
.check__terug a{color:rgba(247,244,236,.7);font-size:.9rem;text-decoration:underline;text-underline-offset:3px}
.check__val p{color:var(--inkt)}
@media (max-width:560px){
  .teaser__punten{gap:.9rem 1.3rem}
  .check__knoppen .knop{width:100%;justify-content:center}
}