/* FRAIM Solutions — stijl
   Palet en typografie volgens 0. huisstijl/ontwerp.md. Niet met de hand afwijken. */

@font-face{font-family:Outfit;src:url(fonts/Outfit-Regular.woff2)format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:Outfit;src:url(fonts/Outfit-SemiBold.woff2)format("woff2");font-weight:600;font-display:swap}
@font-face{font-family:Outfit;src:url(fonts/Outfit-Bold.woff2)format("woff2");font-weight:700;font-display:swap}
@font-face{font-family:"DM Mono";src:url(fonts/DMMono-Regular.woff2)format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:Caveat;src:url(fonts/Caveat-Medium.woff2)format("woff2");font-weight:500;font-display:swap}

:root{
  --navy:#0B2140;
  --ember:#F5641E;
  --paper:#F7F5F1;
  --wit:#FFFFFF;
  --ink:#35485C;
  --mute:#7A8A9A;
  --rule:#D7DCE1;
  --radius:18px;
  --maat:1180px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  background:var(--paper);
  color:var(--navy);
  font-family:Outfit,"Helvetica Neue",Arial,sans-serif;
  font-size:18px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
a{color:inherit}

.wrap{max-width:var(--maat);margin:0 auto;padding:0 28px}

/* ---------- microlabel ---------- */
.label{
  font-family:"DM Mono",ui-monospace,monospace;
  font-size:12px;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--mute);
  margin:0 0 18px;
}
.op-navy .label{color:rgba(255,255,255,.62)}

/* ---------- navigatie ---------- */
header{position:sticky;top:0;z-index:50;background:var(--paper);border-bottom:1px solid var(--rule)}
/* alleen doorschijnend maken waar de vervaging werkelijk ondersteund wordt */
@supports (backdrop-filter:blur(10px)){
  header{background:rgba(247,245,241,.92);backdrop-filter:blur(10px)}
}
header nav{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:18px 28px;max-width:var(--maat);margin:0 auto}
header nav .merk img{height:38px}
header nav ul{display:flex;gap:30px;list-style:none;margin:0;padding:0;align-items:center}
header nav a{
  font-family:"DM Mono",ui-monospace,monospace;
  font-size:12px;letter-spacing:.14em;text-transform:uppercase;
  text-decoration:none;color:var(--ink);
}
header nav a:hover{color:var(--ember)}
header nav a.nu{color:var(--navy);font-weight:500}

/* ---------- knoppen ---------- */
.knop{
  display:inline-flex;align-items:center;gap:10px;
  background:var(--navy);color:var(--wit);
  text-decoration:none;font-weight:600;font-size:17px;
  padding:15px 26px;border-radius:999px;
  transition:background .16s ease, transform .16s ease;
}
.knop:hover{background:var(--ember);transform:translateY(-1px)}
.knop .pijl{font-size:19px;line-height:1}
.knop.licht{background:var(--wit);color:var(--navy)}
.knop.licht:hover{background:var(--ember);color:var(--wit)}
.knop-noot{font-size:15px;color:var(--mute);margin:14px 0 0}

/* ---------- secties ---------- */
section{padding:92px 0}
section.krap{padding:62px 0}
h1{font-size:clamp(38px,5.4vw,64px);line-height:1.06;letter-spacing:-.02em;font-weight:700;margin:0 0 22px}
h2{font-size:clamp(28px,3.4vw,40px);line-height:1.14;letter-spacing:-.015em;font-weight:700;margin:0 0 20px}
h3{font-size:21px;line-height:1.3;font-weight:600;margin:0 0 10px}
p{margin:0 0 18px}
.lood{font-size:21px;line-height:1.55;color:var(--ink)}
.smal{max-width:680px}

/* ---------- hero ---------- */
.hero{padding:74px 0 84px}
.hero .kolommen{display:grid;grid-template-columns:1fr;gap:62px;align-items:center;max-width:820px}
.hero .accent{color:var(--ember)}
.portret{
  border-radius:var(--radius);overflow:hidden;background:var(--rule);
  aspect-ratio:3/4;position:relative;
}
.portret img{width:100%;height:100%;object-fit:cover;object-position:50% 30%;display:block}

/* plaatshouder voor beeld dat er nog niet is */
.plaatshouder{
  display:flex;align-items:center;justify-content:center;flex-direction:column;gap:8px;
  height:100%;border:1px dashed var(--mute);border-radius:var(--radius);
  background:repeating-linear-gradient(45deg,#EDEAE4,#EDEAE4 12px,#F3F0EB 12px,#F3F0EB 24px);
  color:var(--mute);text-align:center;padding:24px;
}
.plaatshouder .pt{font-family:"DM Mono",monospace;font-size:11px;letter-spacing:.16em;text-transform:uppercase}
.plaatshouder .pb{font-size:14px;max-width:220px}

/* ---------- rasters ---------- */
.raster{display:grid;gap:22px}
.raster.twee{grid-template-columns:repeat(2,1fr)}
.raster.drie{grid-template-columns:repeat(3,1fr)}
.raster.vier{grid-template-columns:repeat(4,1fr)}

.kaart{
  background:var(--wit);border:1px solid var(--rule);border-radius:var(--radius);
  padding:30px 28px;
}
.kaart .num{
  font-family:"DM Mono",monospace;font-size:12px;letter-spacing:.14em;
  color:var(--ember);margin:0 0 14px;
}
.kaart p:last-child{margin-bottom:0}
.kaart p{color:var(--ink);font-size:17px}

/* statistiek */
.stat{background:none;border:0;border-top:2px solid var(--navy);border-radius:0;padding:20px 0 0}
.op-navy .stat{border-top-color:rgba(255,255,255,.35)}
.stat .cijfer{font-size:44px;font-weight:700;line-height:1;letter-spacing:-.02em;margin:0 0 10px}
.stat .uitleg{font-size:16px;color:var(--ink);margin:0}
.op-navy .stat .uitleg{color:rgba(255,255,255,.75)}

/* ---------- navy hoofdstukvlak ---------- */
.op-navy{background:var(--navy);color:var(--wit)}
.op-navy h2,.op-navy h3{color:var(--wit)}
.op-navy p{color:rgba(255,255,255,.82)}
.op-navy .lood{color:rgba(255,255,255,.88)}
.op-navy .kaart{background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.16)}
.op-navy .kaart p{color:rgba(255,255,255,.78)}

/* ---------- citaten ---------- */
.citaat{background:var(--wit);border:1px solid var(--rule);border-radius:var(--radius);padding:30px 28px}
.citaat .tekst{font-size:18px;line-height:1.55;margin:0 0 20px}
.citaat .wie{display:flex;align-items:center;gap:12px}
.citaat .bol{width:40px;height:40px;border-radius:999px;background:var(--rule);flex:none}
.citaat .naam{font-weight:600;font-size:16px;line-height:1.25}
.citaat .rol{font-size:14px;color:var(--mute);line-height:1.25}
.citaat.leeg{border-style:dashed;border-color:var(--mute);background:transparent}
.citaat.leeg .tekst{color:var(--mute);font-style:italic}

/* ---------- lijst met streepjes ---------- */
.lijst{list-style:none;margin:0;padding:0}
.lijst li{padding:16px 0;border-bottom:1px solid var(--rule);display:flex;gap:16px;color:var(--ink);font-size:17px}
.lijst li:first-child{border-top:1px solid var(--rule)}
.lijst .merk{font-family:"DM Mono",monospace;font-size:12px;letter-spacing:.12em;color:var(--ember);flex:none;padding-top:4px;width:26px}
.op-navy .lijst li{border-color:rgba(255,255,255,.16);color:rgba(255,255,255,.82)}
.op-navy .lijst li:first-child{border-top-color:rgba(255,255,255,.16)}

/* ---------- doorverwijsblok ---------- */
.brug{
  display:grid;grid-template-columns:1.2fr .8fr;gap:40px;align-items:center;
  background:var(--wit);border:1px solid var(--rule);border-radius:var(--radius);padding:44px 42px;
}
.brug h2{margin-bottom:14px}
.brug p{color:var(--ink);margin-bottom:0}

/* ---------- afsluiter ---------- */
.slot{text-align:center}
.slot h2{max-width:760px;margin-left:auto;margin-right:auto}
.slot .lood{max-width:620px;margin-left:auto;margin-right:auto}

/* ---------- voettekst ---------- */
footer{background:var(--navy);color:rgba(255,255,255,.72);padding:56px 0 40px;font-size:16px}
footer .kolommen{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:40px;margin-bottom:40px}
footer img{height:26px;margin-bottom:16px}
footer a{color:rgba(255,255,255,.72);text-decoration:none}
footer a:hover{color:var(--ember)}
footer h4{font-family:"DM Mono",monospace;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.5);font-weight:400;margin:0 0 14px}
footer ul{list-style:none;margin:0;padding:0}
footer li{margin-bottom:9px}
footer .onder{border-top:1px solid rgba(255,255,255,.16);padding-top:24px;display:flex;justify-content:space-between;gap:20px;font-size:14px;color:rgba(255,255,255,.5)}

/* ---------- klein scherm ---------- */
@media(max-width:900px){
  body{font-size:17px}
  section{padding:64px 0}
  .hero{padding:48px 0 60px}
  .hero .kolommen{grid-template-columns:1fr;gap:38px}
  .portret{aspect-ratio:4/5;max-height:480px}
  .raster.twee,.raster.drie,.raster.vier{grid-template-columns:1fr}
  .brug{grid-template-columns:1fr;padding:34px 28px}
  footer .kolommen{grid-template-columns:1fr;gap:28px}
  footer .onder{flex-direction:column;gap:8px}
  /* logo op de eerste regel, de links daaronder in één rij zonder afbreken */
  header nav{flex-wrap:wrap;gap:14px;padding:14px 20px}
  header nav .merk img{height:31px}
  header nav ul{width:100%;gap:20px;justify-content:space-between}
  header nav ul a{font-size:10px;letter-spacing:.1em;white-space:nowrap}
  header nav .verberg{display:none}
}
@media(min-width:901px)and (max-width:1080px){
  .raster.vier{grid-template-columns:repeat(2,1fr)}
}

/* ==========================================================
   Opbouw B — gekozen 2026-09-21. Zie ../NOTES.md
   ========================================================== */

/* ---------- dienstenkiezer ---------- */
.kiezer{
  display:flex;border:1px solid var(--rule);border-radius:999px;overflow:hidden;
  width:max-content;margin:0 0 26px;background:var(--wit);
}
.kiezer a{
  font-family:"DM Mono",ui-monospace,monospace;font-size:11px;letter-spacing:.14em;
  text-transform:uppercase;padding:10px 20px;text-decoration:none;color:var(--mute);
  transition:background .14s ease,color .14s ease;white-space:nowrap;
}
.kiezer a:hover{color:var(--navy)}
.kiezer a.aan{background:var(--navy);color:#fff}
.kiezer a.aan:hover{color:#fff}

/* ---------- openingsscherm ---------- */
.scherm{min-height:calc(100vh - 74px);display:flex;align-items:center;padding:44px 0 56px}
.scherm .raster2{display:grid;grid-template-columns:1.08fr .92fr;gap:56px;align-items:center;width:100%}
.scherm h1{font-size:clamp(38px,5.6vw,70px);letter-spacing:-.03em;line-height:1.03}
.scherm .lood{max-width:46ch}
.scherm .accent{color:var(--ember)}

/* zwevende kaartjes */
.stapel{position:relative;height:330px}
.stapel .kaartje{
  position:absolute;border-radius:16px;background:var(--wit);border:1px solid var(--rule);
  box-shadow:0 18px 44px rgba(11,33,64,.11);padding:18px 20px;
}
/* de kaartjes overlappen elkaar licht aan de rand, nooit over de tekst heen */
.stapel .k1{top:0;left:0;width:56%;transform:rotate(-3deg);z-index:1}
.stapel .k2{top:14px;right:0;width:46%;transform:rotate(2.5deg);z-index:2}
.stapel .k3{bottom:8px;right:4%;width:58%;transform:rotate(1.5deg);z-index:3}
.stapel .cijfer{font-size:34px;font-weight:700;letter-spacing:-.02em;line-height:1;margin:0 0 6px}
.stapel .uit{font-size:14px;color:var(--ink);margin:0;line-height:1.42}
.stapel .beeldvak{height:168px;margin:-18px -20px 14px;border-radius:16px 16px 0 0;overflow:hidden;background:var(--rule)}
.stapel .beeldvak img{width:100%;height:100%;object-fit:cover;object-position:50% 14%;display:block}
.stapel .beeldvak .plaatshouder{height:100%;border:0;border-radius:16px 16px 0 0}

/* ---------- smalle band met vier punten ---------- */
.band{border-top:1px solid var(--rule);padding:36px 0 44px}
.band .rij{display:flex;flex-wrap:wrap;gap:34px 40px;justify-content:space-between;align-items:baseline}
.band p{margin:0;color:var(--ink);font-size:16px;max-width:31ch;line-height:1.5}
.band strong{display:block;color:var(--navy);font-size:17px;margin-bottom:2px}

/* ---------- uitgelichte zin ---------- */
.uitgelicht{
  font-size:clamp(24px,2.7vw,33px);line-height:1.34;font-weight:600;letter-spacing:-.01em;
  max-width:24ch;margin:0 0 26px;
}
.bron{font-size:15px;color:var(--mute);margin:0}
.tweeluik{display:grid;grid-template-columns:.85fr 1.15fr;gap:64px;align-items:start}
.tweeluik h2{margin-top:0}

@media(max-width:900px){
  .scherm{min-height:auto;padding:30px 0 44px}
  .scherm .raster2{grid-template-columns:1fr;gap:34px}
  /* geen zwevende opstelling op smalle schermen: dan vallen de kaartjes over elkaar */
  .stapel{height:auto;display:grid;gap:14px}
  .stapel .kaartje{position:static;width:auto;transform:none;box-shadow:0 10px 26px rgba(11,33,64,.08)}
  .stapel .beeldvak{height:200px}
  .tweeluik{grid-template-columns:1fr;gap:22px}
  .band .rij{gap:26px}
  .band p{max-width:none}
}

/* ==========================================================
   Contactformulier
   ========================================================== */

.formulier-blok{display:grid;grid-template-columns:.85fr 1.15fr;gap:64px;align-items:start}

.formulier{
  background:var(--wit);border:1px solid var(--rule);border-radius:var(--radius);
  padding:36px 34px;
}
.veldenrij{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.veld{margin:0 0 18px}
.veld label{
  display:block;font-size:14px;font-weight:600;color:var(--navy);margin:0 0 7px;
}
.veld .hint{font-weight:400;color:var(--mute)}
.veld input,.veld select,.veld textarea{
  width:100%;font-family:inherit;font-size:16px;color:var(--navy);
  background:var(--paper);border:1px solid var(--rule);border-radius:10px;
  padding:12px 14px;transition:border-color .14s ease,box-shadow .14s ease;
}
.veld textarea{min-height:140px;resize:vertical;line-height:1.5}
.veld select{appearance:none;background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%237A8A9A' d='M1 1l5 5 5-5'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 14px center;padding-right:38px}
.veld input:focus,.veld select:focus,.veld textarea:focus{
  outline:none;border-color:var(--navy);box-shadow:0 0 0 3px rgba(11,33,64,.09);
}
.veld input:invalid:not(:placeholder-shown){border-color:var(--ember)}

.vangnet{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

.formulier .knop{border:0;cursor:pointer;font-family:inherit}
.formulier .voetnoot{font-size:14px;color:var(--mute);margin:16px 0 0;line-height:1.5}

.bericht{
  border-radius:10px;padding:14px 16px;font-size:16px;margin:0 0 20px;
  border:1px solid var(--rule);background:var(--paper);
}
.bericht.goed{border-color:#9BC6A4;background:#EFF6F0;color:#1F5B32}
.bericht.fout{border-color:var(--ember);background:#FDF0E9;color:#8A3308}

.contactgegevens li{margin:0 0 14px;color:var(--ink);font-size:17px}
.contactgegevens{list-style:none;margin:22px 0 0;padding:0}
.contactgegevens .kop{
  font-family:"DM Mono",ui-monospace,monospace;font-size:11px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--mute);display:block;margin:0 0 3px;
}
.contactgegevens a{color:var(--navy);text-decoration:underline;text-underline-offset:3px}
.contactgegevens a:hover{color:var(--ember)}

@media(max-width:900px){
  .formulier-blok{grid-template-columns:1fr;gap:34px}
  .formulier{padding:28px 22px}
  .veldenrij{grid-template-columns:1fr;gap:0}
}

/* ---------- handgeschreven aantekening met pijl ---------- */
.krabbel{
  display:flex;align-items:flex-end;gap:4px;
  margin:0 0 6px 2px;
}
.krabbel span{
  font-family:Caveat,"Bradley Hand","Segoe Script",cursive;
  font-size:27px;line-height:1.05;color:var(--ember);
  transform:rotate(-2.5deg);transform-origin:left bottom;
  white-space:nowrap;
}
.krabbel svg{
  width:46px;height:38px;flex:none;margin:0 0 -10px 2px;
  fill:none;stroke:var(--ember);stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round;
}
@media(max-width:560px){
  .krabbel span{font-size:22px;white-space:normal}
  .krabbel svg{width:36px;height:30px}
}

/* ---------- routekaarten op de startpagina ---------- */
.routes{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.route{
  display:block;text-decoration:none;color:inherit;background:var(--wit);
  border:1px solid var(--rule);border-radius:var(--radius);padding:30px 32px 28px;
  transition:border-color .16s ease,box-shadow .16s ease,transform .16s ease;
}
.route:hover{border-color:var(--navy);box-shadow:0 14px 34px rgba(11,33,64,.10);transform:translateY(-2px)}
.route:focus-visible{outline:2px solid var(--ember);outline-offset:3px}
.route .num{
  font-family:"DM Mono",ui-monospace,monospace;font-size:11px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--mute);margin:0 0 14px;
}
.route h3{font-size:26px;letter-spacing:-.02em;margin:0 0 12px;line-height:1.15}
.route p{margin:0 0 18px;color:var(--ink);font-size:17px}
.route .ga{
  font-family:"DM Mono",ui-monospace,monospace;font-size:12px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--ember);font-weight:500;
}
@media(max-width:820px){.routes{grid-template-columns:1fr}}

/* ---------- privacy- en cookiepagina ---------- */
.juridisch h2{font-size:24px;margin:42px 0 12px}
.juridisch h2:first-child{margin-top:0}
.juridisch h3{font-size:18px;margin:26px 0 8px;color:var(--navy)}
.juridisch p{margin:0 0 14px}
.juridisch .opsom{list-style:none;padding:0;margin:0 0 14px}
.juridisch .opsom li{padding:0 0 10px 18px;position:relative}
.juridisch .opsom li::before{content:"";position:absolute;left:0;top:10px;width:6px;height:6px;border-radius:50%;background:var(--ember)}
.juridisch a{color:var(--navy);text-decoration:underline;text-underline-offset:3px}
.cookieverklaring{margin:22px 0 8px;padding:22px;background:var(--wit);border:1px solid var(--rule);border-radius:var(--radius);overflow-x:auto}
footer .onder a{color:rgba(255,255,255,.5);text-decoration:none}
footer .onder a:hover{color:#fff}