/* ====== ECKSCEND — stijl van de livesite ======
   Gepromoveerd uit de vakman-variant (design/stijl-vakman.css, 17-08-2026),
   gekozen door Gerard. Gebouwd vanuit de koper (wagenparkbeheerder taxibedrijf,
   facilitair coördinator zorginstelling): licht, kalm, conventionele opbouw,
   foto's in kleur als bewijs, Gerard bij naam. Vormtaal volgt de 072DESIGN-
   homepagina-signatuur (referenties: Kars & Stoop, Plubos): mono micro-labels
   met sectienummers, feiten-band onder de hero, genummerde pins op de
   herofoto, hairline-grids met codes, accentwoord in de H1. */
:root{
  /* merk */
  --oranje:#FD5E01; --oranje-donker:#E05300;
  --grijs:#727374;
  /* licht */
  --bg:#ffffff; --vlak:#F5F5F6; --inkt:#1C1D1F;
  --tekst:#3E3F43; --tekst-zacht:#6C6D71;
  --lijn:#E4E4E6; --lijn-fel:#CFCFD3;
  /* spacing t-shirt */
  --xs:8px; --s:16px; --m:24px; --l:32px; --xl:48px; --2xl:80px; --3xl:120px; --4xl:160px;
  /* radius */
  --radius-xs:6px; --radius-sm:10px; --radius:16px; --radius-lg:22px; --radius-pill:999px;
  /* schaduw: één koele inkt-tint */
  --shadow-sm:0 2px 8px rgba(28,29,31,.06);
  --shadow:0 12px 30px rgba(28,29,31,.1);
  --shadow-lg:0 24px 60px rgba(28,29,31,.14);
  --kopfont:'Barlow Semi Condensed',sans-serif;
  --mono:'IBM Plex Mono',monospace;
}
*{margin:0; padding:0; box-sizing:border-box}
html{scroll-behavior:smooth; overflow-x:clip}
body{
  font-family:'Barlow',sans-serif; font-size:17px; line-height:1.7;
  color:var(--tekst); background:var(--bg); overflow-x:clip;
}
img{max-width:100%; display:block}
/* formulierelementen erven het lettertype niet vanzelf; anders valt de knop terug op Arial */
button,input,textarea{font-family:inherit}
section{scroll-margin-top:var(--m)}
.wrap{max-width:1140px; margin:0 auto; padding-left:var(--m); padding-right:var(--m)}

/* typografie */
h1,h2{font-family:var(--kopfont); font-weight:700; line-height:1.06; color:var(--inkt); letter-spacing:-.01em}
h1{font-size:clamp(40px,5vw,62px)}
h2{font-size:clamp(28px,3.4vw,42px); max-width:46ch}
h3{font-family:var(--kopfont); font-size:21px; font-weight:600; line-height:1.3; color:var(--inkt)}
p{color:var(--tekst)}
.accent{color:var(--oranje)}
/* mono sectielabel: nummer + woord, de leesbare kop staat er altijd onder */
.label{font-family:var(--mono); font-size:13px; letter-spacing:2px; text-transform:uppercase; color:var(--tekst-zacht)}
.label b{color:var(--oranje); font-weight:500}

/* header: logo links, nav rechts — conventie, geen speelveld */
.header{background:var(--bg); border-bottom:1px solid var(--lijn); position:relative; z-index:10}
.header .inner{display:flex; align-items:center; justify-content:space-between; gap:var(--l); height:96px}
.logo img{height:76px; width:auto}
.nav{display:flex; gap:var(--l); align-items:center}
.nav a{font-size:16px; font-weight:500; text-decoration:none; color:var(--inkt)}
.nav a:hover{color:var(--oranje)}
.nav .cta-mobiel{display:none}
.hamb{display:none; background:none; border:0; padding:8px; cursor:pointer}
.hamb span{display:block; width:24px; height:2px; background:var(--inkt); margin:5px 0}

/* knoppen: één gevulde oranje per viewport; header-CTA is donker */
.btn{
  display:inline-block; font-weight:600; font-size:16px;
  padding:15px 30px; border-radius:var(--radius-sm); border:1px solid transparent;
  text-decoration:none; cursor:pointer; transition:background .15s,border-color .15s,color .15s;
}
.btn-primair{background:var(--oranje); color:#fff; border-color:var(--oranje)}
.btn-primair:hover{background:var(--oranje-donker); border-color:var(--oranje-donker)}
.btn-donker{background:var(--inkt); color:#fff; border-color:var(--inkt)}
.btn-donker:hover{background:#000; border-color:#000}
.btn-ghost{background:transparent; color:var(--inkt); border-color:var(--lijn-fel)}
.btn-ghost:hover{border-color:var(--grijs)}
.actions{display:flex; gap:var(--s); flex-wrap:wrap}

/* opkom-animatie, alleen boven de vouw */
.reveal{opacity:0; transform:translateY(16px); animation:reveal .7s cubic-bezier(.2,.7,.2,1) forwards}
@keyframes reveal{to{opacity:1; transform:none}}
.d1{animation-delay:.05s}.d2{animation-delay:.15s}.d3{animation-delay:.25s}
@media (prefers-reduced-motion:reduce){
  .reveal{opacity:1; transform:none; animation:none}
  html{scroll-behavior:auto}
}

/* hero: tekst links, geannoteerde bewijs-foto rechts */
.hero{padding-top:var(--2xl); padding-bottom:var(--2xl)}
.hero .grid{display:grid; grid-template-columns:6fr 5fr; gap:var(--2xl); align-items:center}
.hero .label{display:block; margin-bottom:var(--s)}
.hero h1{margin-bottom:var(--m)}
.hero .intro{font-size:19px; max-width:32em; margin-bottom:var(--l)}
.hero-foto{position:relative}
/* vierkant beeld met vaste verhouding: de pins staan in procenten en blijven zo op elke breedte op hun plek.
   Strak zoals alle foto's: geen ronding, geen schaduw. */
.hero-foto img{display:block; width:100%; height:auto; aspect-ratio:1/1; object-fit:cover}
/* genummerde pins op de foto, met de uitleg in de legenda eronder */
.pin{
  position:absolute; width:32px; height:32px; border-radius:50%;
  background:#fff; box-shadow:var(--shadow);
  display:grid; place-items:center;
  font-family:var(--mono); font-size:13px; font-weight:500; color:var(--oranje);
}
.pin::after{content:""; position:absolute; inset:-6px; border-radius:50%; border:1px solid rgba(255,255,255,.65)}
.foto-legenda{
  display:flex; gap:var(--m); margin-top:var(--s);
  font-family:var(--mono); font-size:12px; letter-spacing:1.2px; text-transform:uppercase; color:var(--tekst-zacht);
}
.foto-legenda{flex-wrap:wrap; row-gap:4px}
.foto-legenda span{white-space:nowrap}
.foto-legenda b{color:var(--oranje); font-weight:500}

/* feiten-band onder de hero */
.feiten{background:var(--inkt)}
.feiten .cellen{display:grid; grid-template-columns:repeat(4,1fr)}
.feiten .cel{background:transparent; padding:var(--m) var(--l); border-left:1px solid rgba(255,255,255,.12)}
.feiten .cel:hover{background:transparent}
/* zelfde vier kolomlijnen als het dienstenrooster eronder: elke cel even breed, elke tekst op dezelfde afstand van zijn lijn */
.feiten .cel:last-child{border-right:1px solid rgba(255,255,255,.12)}
.feiten .cel span{display:block; font-family:var(--mono); font-size:11px; letter-spacing:2px; text-transform:uppercase; color:rgba(255,255,255,.55); margin-bottom:4px}
.feiten .cel b{font-family:var(--kopfont); font-size:18px; font-weight:600; color:#fff; white-space:nowrap}

/* sectiekop-patroon: mono label + leesbare kop */
.sectiekop{margin-bottom:var(--xl)}
.sectiekop .label{display:block; margin-bottom:var(--s)}
.sectiekop p{margin-top:var(--s); font-size:18px; max-width:36em}

/* diensten: hairline-rooster met codes */
#diensten{padding-top:var(--3xl); padding-bottom:var(--3xl)}
.rooster{display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--lijn); border:1px solid var(--lijn)}
.cel{background:#fff; padding:var(--l); transition:background .2s}
.cel:hover{background:var(--vlak)}
.cel .code{font-family:var(--mono); font-size:13px; letter-spacing:2px; color:var(--oranje)}
.cel h3{margin:10px 0 8px; font-size:19px}
.cel p{font-size:16px}
/* vijfde dienst over de volle breedte, zodat het rooster van vier niet breekt */
.rooster .cel.breed{grid-column:1/-1; display:grid; grid-template-columns:1fr 1fr; padding:0}
/* tekst houdt de celpadding, de foto vult de rechterhelft strak tot aan de randen */
.breed-tekst{padding:var(--l)}
.breed-foto,.locatie-foto{margin:0; position:relative; min-height:280px}
.breed-foto img,.locatie-foto img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover}
.breed-foto img{object-position:50% 70%}

/* storing: het ene oranje vlak op de pagina */
#storing{background:var(--oranje); padding-top:var(--2xl); padding-bottom:var(--2xl)}
#storing .label{display:block; color:rgba(255,255,255,.75)}
#storing .label b{color:#fff}
/* label boven, kop links, tekst en belknop rechts; kop en eerste alinea beginnen op dezelfde hoogte */
.storing-grid{display:grid; grid-template-columns:5fr 7fr; gap:var(--2xl); align-items:start; margin-top:var(--s)}
#storing h2{color:#fff}
#storing p{color:rgba(255,255,255,.94); max-width:34em}
#storing p + p{margin-top:var(--s)}
#storing .actions{margin-top:var(--l)}
.btn-wit{background:#fff; color:var(--inkt); border-color:#fff}
.btn-wit:hover{background:var(--inkt); color:#fff; border-color:var(--inkt)}

/* merken: sobere naamplaten */
#merken{background:var(--vlak); padding-top:var(--2xl); padding-bottom:var(--2xl)}
.merkplaten{display:grid; grid-template-columns:repeat(3,1fr); gap:var(--m); margin-bottom:var(--l)}
.merkplaat{
  background:#fff; border-radius:var(--radius); box-shadow:var(--shadow-sm);
  padding:var(--l); text-align:center;
}
.merkplaat b{font-family:var(--kopfont); font-weight:600; font-size:clamp(20px,2vw,26px); color:var(--inkt)}
/* logo's: de platen zijn even hoog, het logo staat verticaal gecentreerd in de plaat */
.merkplaat{display:flex; flex-direction:column; align-items:center; justify-content:center}
.merklogo{margin:auto 0; height:40px; width:auto; max-width:100%; object-fit:contain}
/* het vierkante AMF-logo heeft veel wit om het merk heen; groter zetten zodat het even zwaar oogt als de woordmerken */
.merklogo-vierkant{height:96px}
.merklogo-ricon{height:38px}
.merken-sub{font-size:17px; max-width:40em}
.merk-cta{margin-top:var(--l); background:#fff}

/* op locatie: zelfde opbouw als het reparatievak, tekst links en één foto die de rechterhelft strak vult */
#locatie{padding-top:var(--3xl); padding-bottom:var(--3xl)}
.locatie-grid{display:grid; grid-template-columns:1fr 1fr; border:1px solid var(--lijn)}
#locatie .tekst{padding:var(--xl)}
#locatie h2{margin-top:var(--s)}
#locatie .tekst p{margin-top:var(--s); max-width:30em}
/* de scheur zit in de bovenste helft van de staande foto: uitsnede iets naar boven */
.locatie-foto img{object-position:50% 35%}

/* voor wie: twee panelen in het hairline-rooster */
#doelgroep{padding-bottom:var(--3xl)}
.rooster.twee{grid-template-columns:1fr 1fr}
.rooster.twee .cel{padding:var(--xl)}
.rooster.twee .cel h3{font-size:clamp(22px,2.2vw,28px); margin-top:0}
.rooster.twee .cel p{max-width:34em}

/* contact: persoonlijk links, formulier rechts */
#contact{background:var(--vlak); padding-top:var(--2xl); padding-bottom:var(--3xl)}
.contact-grid{display:grid; grid-template-columns:5fr 7fr; gap:var(--2xl); align-items:start}
.contact-info h2{margin-top:var(--s)}
.contact-info > p{margin:var(--s) 0 var(--l); max-width:26em}
.contact-naam{font-family:var(--kopfont); font-weight:600; font-size:19px; color:var(--inkt); margin-bottom:2px}
.contact-tel{display:block; font-family:var(--kopfont); font-weight:700; font-size:clamp(34px,3.4vw,48px);
  color:var(--inkt); text-decoration:none; line-height:1.1; margin-bottom:var(--s)}
.contact-tel:hover{color:var(--oranje)}
.contact-regels{list-style:none; display:grid; gap:8px}
.contact-regels li{font-size:16px; color:var(--tekst)}
.contact-regels a{color:var(--tekst); text-decoration:none}
.contact-regels a:hover{color:var(--oranje)}
.contactkaart{background:#fff; border-radius:var(--radius); box-shadow:var(--shadow-sm); padding:var(--l)}
.contactkaart h3{margin-bottom:4px}
.contactkaart .sub{font-size:15px; color:var(--tekst-zacht); margin-bottom:var(--m)}
.veld{margin-bottom:var(--s)}
.veld label{display:block; font-family:var(--mono); font-size:12px; letter-spacing:1.5px; text-transform:uppercase; color:var(--tekst-zacht); margin-bottom:7px}
.veld input,.veld textarea{
  width:100%; font-family:'Barlow',sans-serif; font-size:16px; color:var(--inkt);
  border:1px solid var(--lijn-fel); border-radius:var(--radius-xs); padding:13px 14px; background:#fff;
}
.veld input::placeholder,.veld textarea::placeholder{color:#A4A5A9}
.veld input:focus,.veld textarea:focus{outline:2px solid var(--oranje); outline-offset:-1px; border-color:var(--oranje)}
.veld textarea{min-height:120px; resize:vertical}

/* footer */
.footer{background:var(--inkt); padding-top:var(--2xl)}
.footer .kolommen{display:grid; grid-template-columns:2fr 1fr 1fr; gap:var(--xl)}
.footer h4{font-family:var(--mono); font-size:13px; font-weight:500; letter-spacing:2px; text-transform:uppercase; color:#fff; margin-bottom:var(--s)}
.footer p,.footer li,.footer a{color:rgba(255,255,255,.72); font-size:15px}
.footer ul{list-style:none; display:grid; gap:8px}
.footer a{text-decoration:none}
.footer a:hover{color:#fff}
.footer .kolommen p{max-width:28em}
.footer .plint{margin-top:var(--2xl); border-top:1px solid rgba(255,255,255,.14);
  padding-top:var(--s); padding-bottom:var(--s);
  display:flex; justify-content:flex-end; font-size:13px}
/* Inline, niet flex: vertical-align werkt niet op een flex-item (072design-rules). */
.credit{opacity:.78; text-decoration:none; color:rgba(255,255,255,.72); white-space:nowrap}
.credit:hover{opacity:1}
.credit img{display:inline-block; height:17px; width:auto; vertical-align:-3.64px; margin-left:7px}

/* cookiebanner */
.cookie{position:fixed; left:var(--m); bottom:var(--m); z-index:60; max-width:420px;
  background:#fff; border:1px solid var(--lijn); border-radius:var(--radius);
  box-shadow:var(--shadow-lg); padding:var(--m); display:grid; gap:var(--s)}
.cookie p{font-size:15px}
.cookie[hidden]{display:none}
.cookie p a{color:var(--oranje-donker)}
/* weigeren is even makkelijk als akkoord: twee knoppen van gelijke breedte */
.cookie-knoppen{display:grid; grid-template-columns:1fr 1fr; gap:var(--xs)}
.cookie .btn{padding:10px 18px; font-size:15px; text-align:center}

/* subpagina's: kop met kruimelpad, daarna gewone secties */
.pagina-kop{padding-top:var(--2xl); padding-bottom:var(--xl); border-bottom:1px solid var(--lijn)}
.breadcrumb{font-family:var(--mono); font-size:12px; letter-spacing:1.5px; text-transform:uppercase; color:var(--tekst-zacht); margin-bottom:var(--m)}
.breadcrumb a{color:var(--tekst-zacht); text-decoration:none; display:inline-block; padding:5px 0}
.breadcrumb a:hover{color:var(--oranje)}
.breadcrumb b{color:var(--oranje); font-weight:500; margin:0 8px}
.pagina-kop .intro{font-size:19px; max-width:36em; margin-top:var(--m)}
.subblokken{padding-top:var(--2xl); padding-bottom:var(--2xl)}
.verder{padding-top:var(--2xl); padding-bottom:var(--3xl)}
.verder .actions{margin-top:var(--l)}

/* lopende tekst (privacyverklaring) */
.prose{max-width:44em; padding-top:var(--xl); padding-bottom:var(--3xl)}
.prose h2{font-size:clamp(22px,2.4vw,28px); margin-top:var(--xl); margin-bottom:var(--xs)}
.prose p{margin-bottom:var(--s)}
.prose a{color:var(--oranje-donker)}
.prose strong{color:var(--inkt)}

/* formulier: honeypot onzichtbaar, terugmelding na verzenden */
.veld-hp{position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden}
.melding{border-radius:var(--radius-sm); padding:var(--s) var(--m); margin-bottom:var(--m); font-size:16px}
.melding-ok{background:#EAF6EE; color:#1E5631; border:1px solid #BFE3CB}
.melding-fout{background:#FDEDE4; color:#8A2E00; border:1px solid #F7C9AE}
.melding[hidden]{display:none}

@media (max-width:900px){
  .hero .grid{grid-template-columns:1fr; gap:var(--l)}
  .hero-foto{max-width:520px}
  .feiten .cellen{grid-template-columns:1fr 1fr}
  .feiten .cel,.feiten .cel:last-child{padding:var(--s) var(--s) var(--s) 0; border-left:0; border-right:0; border-top:1px solid rgba(255,255,255,.12)}
  .feiten .cel:nth-child(-n+2){border-top:0}
  .feiten .cel b{white-space:normal}
  .rooster{grid-template-columns:1fr 1fr}
  .storing-grid,.contact-grid{grid-template-columns:1fr; gap:var(--l)}
  #locatie .tekst{padding:var(--l)}
  .storing-grid{gap:var(--m)}
  .footer .kolommen{grid-template-columns:1fr; gap:var(--l)}
  .nav{display:none}
  .hamb{display:block}
  .nav.open{
    display:flex; flex-direction:column; align-items:stretch; gap:0;
    position:absolute; left:0; right:0; top:100%; z-index:50;
    background:#fff; border-bottom:1px solid var(--lijn-fel); box-shadow:var(--shadow);
    padding:var(--xs) var(--s) var(--s);
  }
  .nav.open a{padding:14px 0; border-bottom:1px solid var(--lijn)}
  .nav.open .cta-mobiel{display:block; color:#fff; text-align:center}
  .nav.open .btn{margin-top:var(--s); width:100%; border-bottom:0}
  .header .cta-desktop{display:none}
}
@media (max-width:700px){
  .rooster .cel.breed,.locatie-grid{grid-template-columns:1fr}
  .breed-foto,.locatie-foto{min-height:0}
  .breed-foto img,.locatie-foto img{position:static; height:auto; aspect-ratio:4/3}
  body{font-size:16px}
  .wrap{padding-left:var(--s); padding-right:var(--s)}
  .header .inner{height:76px}
  .logo img{height:58px}
  .hero{padding-top:var(--xl); padding-bottom:var(--xl)}
  #diensten,#merken,#locatie,#doelgroep,#contact{padding-top:var(--2xl); padding-bottom:var(--2xl)}
  .rooster,.rooster.twee{grid-template-columns:1fr}
  .merkplaten{grid-template-columns:1fr}
  .actions{flex-direction:column}
  .actions .btn{width:100%; text-align:center}
  .footer .plint{justify-content:flex-start}
  .cookie{left:var(--s); right:var(--s); bottom:var(--s); max-width:none}
}