/* ══════════════════════════════════════════════════════════════════════════
   stijl-v3.css — Brams stylesheet, verbatim
   ══════════════════════════════════════════════════════════════════════════
   BRON: `ddd-site-v3/stijl.css` uit zijn levering van 17-8-2026.
   Overgenomen als leidende stylesheet `[BESLUIT PIM 17-8]`: zijn ontwerp is het
   visuele doel, dus de Astro-componenten volgen zíjn HTML en zíjn CSS — niet
   andersom.

   🔴 NIET BEWERKEN OM IETS MOOIER TE MAKEN. Elke afwijking hier is een afwijking
   van het doel. Wijkt de gerenderde pagina af van zijn origineel, dan zit de
   fout in het component, niet in dit bestand.

   ✅ SINDS S9 (17-8) IS DIT DE ENIGE STYLESHEET VAN DE SITE. Hier stond de
   waarschuwing dat dit bestand en `global.css` niet samen op één pagina konden
   — dezelfde klassenamen (`.container`, `.kaart`, `.knop`, `.sectie`) met
   andere waarden, container 1080px tegen 1180px. `global.css` en `tokens.css`
   zijn die dag verwijderd; alle 27 routes laden dit bestand.

   ⚠️ EN DAAROM RAAKT ELKE REGEL HIER NU ÉLKE PAGINA. De kale elementselectors
   in dit bestand (`header`, `footer`, `table`, `h1,h2,h3`) zijn geschreven voor
   Brams eigen markup, maar ze treffen ook wat er ín een component staat. Een
   component dat zo'n element gebruikt, hoort dat expliciet te overschrijven —
   zie `.bkc-kop` in `BookingCalendar.astro`.

   ⚠️ WAT ER BEWUST NIET IN ZIT: de `@import` van Google Fonts staat in
   `BaseV3.astro` als `<link>`, niet hier. Reden: een `@import` in een
   stylesheet start pas ná het parsen ervan en kost een extra round-trip.
   ══════════════════════════════════════════════════════════════════════════ */

/* ============================================================
   DDD-SITE V3 · gedeelde stylesheet (concept, ter controle)
   Stijl: Driftzz brand guidelines (7-brand/brand-guidelines.md)
   ============================================================ */
:root{
  --diepzee:#12333B;
  --diepzee-donker:#0C262C;
  --cyaan:#2BE0E0;
  --roze:#FF3D9A;
  --geel:#F5E547;
  --wit:#FFFFFF;
  --inkt:#12333B;
  --radius:18px;
  --schaduw:0 14px 40px rgba(12,38,44,.18);
  --max:1080px;
}
*{margin:0;padding:0;box-sizing:border-box}
body{font-family:"Montserrat",system-ui,sans-serif;color:var(--inkt);background:var(--cyaan);line-height:1.7}
/* Koppen in Baloo 2 (dikke ronde display-letter) en handschrift in Gochi
   Hand, naar de jackmcdade-referentie van 13-08. Wijkt af van de brand
   guideline (Montserrat/Caveat); de guideline voorzag die swap al. */
h1,h2,h3{font-family:"Baloo 2","Montserrat",system-ui,sans-serif;font-weight:800;line-height:1.12;letter-spacing:0;text-transform:lowercase}
.container{max-width:var(--max);margin:0 auto;padding:0 24px}
.script{font-family:"Gochi Hand",cursive;font-weight:400}
.knop{
  display:inline-block;padding:15px 34px;border-radius:999px;font-weight:800;
  font-size:.95rem;text-decoration:none;background:var(--roze);color:var(--wit);
  box-shadow:0 6px 0 rgba(12,38,44,.25);transition:transform .12s ease;
}
.knop:hover{transform:translateY(-2px) rotate(-1deg)}

.concept-badge{
  position:fixed;top:14px;right:-38px;z-index:99;transform:rotate(35deg);
  background:var(--geel);color:var(--diepzee-donker);font-weight:800;
  font-size:.75rem;padding:6px 48px;letter-spacing:.15em;
}

/* ===== nav ===== */
header{background:var(--diepzee-donker);padding:14px 0}
.nav{display:flex;align-items:center;justify-content:space-between;gap:24px;max-width:var(--max);margin:0 auto;padding:0 24px}
.wordmark{color:var(--wit);font-family:"Baloo 2",sans-serif;font-weight:800;font-size:1.45rem;text-decoration:none;text-transform:lowercase}
.wordmark span{color:var(--geel)}
.nav-links{display:flex;gap:30px;align-items:flex-end}
.nav-item{
  display:flex;flex-direction:column;align-items:center;gap:2px;
  text-decoration:none;color:var(--wit);
  transition:color .15s ease, transform .15s ease;
}
.nav-item svg{width:40px;height:34px;display:block}
.nav-item svg path,.nav-item svg circle{
  fill:none;stroke:currentColor;stroke-width:2.4;
  stroke-linecap:round;stroke-linejoin:round;
}
.nav-item .label{font-weight:800;font-style:italic;font-size:.85rem;text-transform:lowercase;letter-spacing:.01em}
.nav-item:hover,.nav-item.actief{color:var(--cyaan)}
.nav-item:hover{transform:rotate(-2deg) translateY(-2px)}
@media(max-width:700px){.nav-links{display:none}}

/* ===== hero (donker) ===== */
.hero{background:var(--diepzee);color:var(--wit);padding:80px 0 0;position:relative}
.hero.klein{padding-top:56px}
.hero h1{font-size:clamp(2rem,5vw,3.3rem);max-width:20ch}
.hero.klein h1{font-size:clamp(1.7rem,4.2vw,2.7rem)}
.hero h1 .accent{color:var(--cyaan)}
.hero .antwoord{
  color:#EAF6F7;font-size:1.12rem;max-width:56ch;margin-top:22px;
  border-left:4px solid var(--cyaan);padding-left:18px;
}
.hero .antwoord strong{color:var(--geel)}
.hero .sub{color:#BFD8DC;font-size:1.02rem;max-width:56ch;margin-top:18px}
.hero .hero-cta{margin-top:26px;display:inline-block}
.byline{display:flex;align-items:center;gap:14px;margin-top:28px}
.byline .foto{
  width:52px;height:52px;border-radius:50%;background:#1E4750;
  border:3px solid var(--cyaan);display:flex;align-items:center;justify-content:center;
  font-size:.6rem;color:#8FB2B8;text-align:center;flex-shrink:0;overflow:hidden;
}
.byline .wie{font-size:.85rem;color:#BFD8DC}
.byline .wie strong{color:var(--wit)}
.byline .wie a{color:var(--cyaan)}
.stempel{
  display:inline-block;margin-top:14px;font-size:.75rem;font-weight:600;
  color:var(--diepzee-donker);background:var(--geel);border-radius:999px;padding:4px 14px;
}
.hero .annotatie{display:inline-block;margin-top:20px;font-size:1.5rem;color:var(--geel);transform:rotate(-2deg)}
.golf{display:block;width:100%;height:80px;margin-top:40px}

/* ===== secties ===== */
.sectie{padding:64px 0}
.sectie h2{font-size:clamp(1.5rem,3.4vw,2.2rem);max-width:26ch;margin-bottom:28px}
.sectie .intro{color:#3C5A61;max-width:60ch;margin:-14px 0 30px}
.sectie-donker{background:var(--diepzee);color:var(--wit)}
.sectie-donker .intro{color:#BFD8DC}

/* witte tekstkaart (probleemblok e.d.) */
.kader{
  background:var(--wit);border-radius:var(--radius);box-shadow:var(--schaduw);
  padding:34px 30px;transform:rotate(-.8deg);max-width:760px;
}
.kader p{color:#3C5A61;font-size:1rem}
.kader .citaatachtig{
  font-weight:800;font-size:1.25rem;color:var(--inkt);text-transform:lowercase;
  margin-bottom:12px;line-height:1.3;
}
.kader .kosten{margin-top:14px;font-weight:600;color:var(--roze)}

/* stappen/sector-kaarten */
.kaarten{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:22px}
.kaart{background:var(--wit);border-radius:var(--radius);box-shadow:var(--schaduw);padding:30px 26px;color:var(--inkt);text-decoration:none;display:block}
.kaart:nth-child(odd){transform:rotate(-1.3deg)}
.kaart:nth-child(even){transform:rotate(1.3deg)}
a.kaart{transition:transform .12s ease}
a.kaart:hover{transform:rotate(0) translateY(-4px)}
.kaart .nr{
  width:40px;height:40px;border-radius:50%;background:var(--diepzee);color:var(--geel);
  font-weight:800;display:flex;align-items:center;justify-content:center;margin-bottom:16px;font-size:1.05rem;
}
.kaart h3{font-size:1.05rem;margin-bottom:8px}
.kaart p{font-size:.94rem;color:#3C5A61}
.kaart .lees{margin-top:10px;font-size:.8rem;font-weight:800;color:var(--roze);text-transform:lowercase}

/* case-kaarten */
.cases{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:22px}
.case{
  background:var(--wit);color:var(--inkt);border-radius:var(--radius);
  box-shadow:var(--schaduw);padding:26px 24px;text-decoration:none;display:block;
  transition:transform .12s ease;
}
.case:nth-child(odd){transform:rotate(-1.2deg)}
.case:nth-child(even){transform:rotate(1.2deg)}
.case:hover{transform:rotate(0) translateY(-4px)}
.case .cijfer{font-weight:800;font-size:1.5rem;line-height:1.15;color:var(--inkt)}
.case .cijfer span{color:var(--roze)}
.case .naam{margin-top:10px;font-weight:600;font-size:.85rem;color:#3C5A61;text-transform:lowercase}
.case .lees{margin-top:8px;font-size:.8rem;font-weight:800;color:var(--roze);text-transform:lowercase}
.sectie-donker .annotatie{display:inline-block;margin-top:24px;font-size:1.4rem;color:var(--geel);transform:rotate(-2deg)}

/* eerlijkheid */
.eerlijk-kader{border:2px dashed var(--diepzee);border-radius:var(--radius);padding:24px 28px;margin-top:24px;background:rgba(255,255,255,.45);max-width:760px}
.eerlijk-kader p{margin:0;color:var(--inkt)}
.eerlijk-kader strong{color:var(--roze)}
.sectie-donker .eerlijk-kader{border-color:var(--cyaan);background:transparent}
.sectie-donker .eerlijk-kader p{color:var(--wit)}
.sectie-donker .eerlijk-kader strong{color:var(--geel)}

/* verifieer-blok: zichtbaar werk-in-uitvoering */
.verifieer{
  border:2px dashed var(--roze);border-radius:var(--radius);padding:18px 22px;
  margin:18px 0;font-size:.88rem;color:#3C5A61;background:rgba(255,255,255,.5);max-width:760px;
}
.verifieer strong{color:var(--roze)}

/* polaroid */
.rij{display:grid;grid-template-columns:1.1fr 1fr;gap:44px;align-items:center}
@media(max-width:760px){.rij{grid-template-columns:1fr}}
.polaroid{
  background:var(--wit);padding:14px 14px 48px;transform:rotate(2deg);
  box-shadow:var(--schaduw);position:relative;max-width:420px;margin:0 auto;
}
.polaroid .foto{
  aspect-ratio:4/3;background:repeating-linear-gradient(45deg,#DDE9EB 0 14px,#CFE0E3 14px 28px);
  display:flex;align-items:center;justify-content:center;color:#5C7B82;font-weight:600;font-size:.9rem;
}
.polaroid .onderschrift{
  position:absolute;bottom:10px;left:0;right:0;text-align:center;
  font-family:"Gochi Hand",cursive;font-size:1.05rem;color:var(--inkt);
}
.polaroid .plakband{
  position:absolute;top:-14px;left:50%;transform:translateX(-50%) rotate(-3deg);
  width:110px;height:30px;background:rgba(245,229,71,.75);
}

/* tabel */
.tabelwrap{overflow-x:auto;border-radius:var(--radius);box-shadow:var(--schaduw)}
table{width:100%;border-collapse:collapse;background:var(--wit);color:var(--inkt);font-size:.92rem;min-width:640px}
th,td{padding:14px 18px;text-align:left;border-bottom:1px solid #DDE9EB;vertical-align:top}
thead th{background:var(--diepzee);color:var(--wit);font-weight:800;text-transform:lowercase}
thead th:nth-child(2){background:var(--roze)}
tbody th{font-weight:600;color:#3C5A61;white-space:nowrap;text-align:left}
td.ja{font-weight:600}

/* faq */
.faq-item{
  background:var(--wit);border-radius:var(--radius);box-shadow:var(--schaduw);
  padding:24px 28px;margin-bottom:16px;max-width:820px;
}
.faq-item:nth-child(odd){transform:rotate(-.4deg)}
.faq-item:nth-child(even){transform:rotate(.4deg)}
.faq-item h3{font-size:1.02rem;margin-bottom:8px}
.faq-item p{font-size:.94rem;color:#3C5A61}

/* cta */
.cta{padding:72px 0}
.cta-kaart{
  background:var(--diepzee-donker);color:var(--wit);border-radius:24px;
  padding:52px 44px;text-align:center;transform:rotate(-.6deg);box-shadow:var(--schaduw);
}
.cta-kaart h2{font-size:clamp(1.5rem,3.2vw,2.1rem);max-width:22ch;margin:0 auto 12px}
.cta-kaart p{color:#BFD8DC;max-width:48ch;margin:0 auto 28px}
.cta-kaart .script{display:block;margin-top:18px;font-size:1.4rem;color:var(--cyaan);transform:rotate(-1.5deg)}

/* footer */
footer{background:var(--diepzee-donker);color:#8FB2B8;padding:36px 0;font-size:.85rem}
.footer-rij{display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;max-width:var(--max);margin:0 auto;padding:0 24px}
.footer-sub{max-width:var(--max);margin:14px auto 0;padding:14px 24px 0;border-top:1px solid rgba(143,178,184,.25);font-size:.78rem}
footer a{color:var(--cyaan);text-decoration:none}
footer a:hover{text-decoration:underline}

/* footer-sitemap: hier hangen de dienst-, sector- en stadspagina's onder */
.footer-links{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));
  gap:20px;max-width:var(--max);margin:0 auto 24px;padding:0 24px;
}
.fl-kop{font-weight:800;color:var(--wit);font-size:.8rem;text-transform:lowercase;margin-bottom:6px}
.footer-links a{display:block;color:#8FB2B8;font-size:.82rem;text-decoration:none;line-height:1.9}
.footer-links a:hover{color:var(--cyaan);text-decoration:none}

/* klantlogo op case-kaarten */
.case .case-logo{height:36px;width:auto;max-width:150px;object-fit:contain;display:block;margin-bottom:12px}

/* dropdown onder nav-item resultaten: cases per branche */
.nav-drop{position:relative}
.nav-drop .drop-paneel{
  position:absolute;top:100%;left:50%;transform:translateX(-50%);
  display:none;flex-direction:column;gap:7px;min-width:172px;
  padding:14px;background:var(--diepzee-donker);
  border:1px solid rgba(43,224,224,.28);border-radius:16px;
  box-shadow:var(--schaduw);z-index:60;
}
.nav-drop:hover .drop-paneel,.nav-drop:focus-within .drop-paneel{display:flex}
.drop-paneel a{
  display:block;padding:8px 18px;border-radius:999px;
  background:rgba(43,224,224,.08);color:var(--wit);text-decoration:none;
  font-weight:800;font-size:.82rem;text-transform:lowercase;text-align:center;
  transition:background .12s ease,transform .12s ease;
}
.drop-paneel a:hover{background:var(--roze);transform:rotate(-1.5deg)}

/* links in tekstblokken: roze chips in de faq, roze links in kaders */
.faq-item p a{
  display:inline-block;padding:1px 13px;border-radius:999px;
  background:rgba(255,61,154,.12);color:var(--roze);font-weight:800;
  text-decoration:none;transition:background .12s ease,color .12s ease;
}
.faq-item p a:hover{background:var(--roze);color:var(--wit)}
.kader a,.eerlijk-kader a{color:var(--roze);font-weight:700}

/* beeldmerk in de nav */
.wordmark img{height:48px;width:auto;display:block}

/* conversie-upgrade 16-08: byline, platformstrip, cijferstrip */
.byline-strip{margin-top:16px;font-size:.85rem;color:#BFD8DC}
.byline-strip strong{color:var(--wit)}
.byline-strip a{color:var(--cyaan)}
.platform-strip{padding:26px 0 6px}
.platform-binnen{display:flex;flex-wrap:wrap;align-items:center;gap:22px}
.platform-label{font-size:1.25rem;color:var(--inkt);transform:rotate(-2deg)}
.platform-item{
  display:inline-flex;align-items:center;gap:9px;color:var(--diepzee);
  font-weight:800;font-size:.85rem;text-transform:lowercase;opacity:.85;
}
.platform-item svg{width:30px;height:26px}
.cijfer-strip{display:flex;flex-wrap:wrap;gap:12px}
.cijfer-chip{
  display:inline-block;padding:8px 18px;border-radius:999px;
  background:rgba(255,255,255,.72);color:var(--inkt);font-size:.85rem;
  box-shadow:0 4px 14px rgba(12,38,44,.10);
}
.cijfer-chip strong{color:var(--roze)}
.cijfer-link{background:var(--roze);color:var(--wit);font-weight:800;text-decoration:none}

/* eyebrow: merkregel boven de paginakop, in het handschrift */
.eyebrow{
  display:inline-block;margin-bottom:10px;
  font-family:"Gochi Hand",cursive;font-weight:400;font-size:.95rem;
  letter-spacing:.02em;text-transform:lowercase;color:var(--geel);
  transform:rotate(-1deg);
}

/* platformstrip variant 1: stickers met kleurblobs en harde schaduw */
.p-badge{
  display:inline-flex;align-items:center;gap:10px;
  background:var(--wit);padding:8px 18px 8px 10px;border-radius:999px;
  border:3px solid var(--diepzee);font-weight:800;font-size:.85rem;
  text-transform:lowercase;color:var(--diepzee);
  box-shadow:0 6px 0 rgba(12,38,44,.28);
  transition:transform .15s ease;
}
.p-badge:nth-of-type(odd){transform:rotate(-2deg)}
.p-badge:nth-of-type(even){transform:rotate(1.6deg)}
.p-badge:hover{transform:rotate(0deg) translateY(-4px)}
.p-blob{
  width:38px;height:38px;border-radius:46% 54% 52% 48% / 55% 45% 55% 45%;
  display:flex;align-items:center;justify-content:center;flex-shrink:0;
}
.p-blob svg{width:24px;height:24px}
.p-blob-wit{background:var(--wit);border:2px solid #E4EDEF}
.p-blob-wit img{width:31px;height:auto;display:block}
.p-blob-roze{background:var(--roze)}
.p-blob-geel{background:var(--geel)}
.p-logo-rond{width:38px;height:38px;border-radius:50%;flex-shrink:0;display:block}
.platform-label{font-size:1.35rem;transform:rotate(-3deg);margin-right:6px}

/* whatsapp-badge in whatsapp-groen; strip compacter zodat hij op één rij past */
.p-blob-groen{background:#25D366}
.p-badge{font-size:.8rem;padding:7px 15px 7px 9px;gap:8px}
.platform-binnen{gap:10px}
.platform-label{font-size:1.2rem;margin-right:2px}

/* hero met portret (homepage-visual) op de landingspagina's */
.hero-verdeeld{display:grid;grid-template-columns:1.2fr minmax(280px,400px);gap:40px;align-items:center}
.portret-klein{position:relative;aspect-ratio:5/6;width:100%;max-width:400px;margin:14px auto}
.portret-klein .blob,
.portret-klein .blob-rand::before,.portret-klein .blob-rand::after,
.portret-klein .blob-rand .blob-geel{border-radius:46% 54% 52% 48% / 44% 46% 54% 56%}
.portret-klein .blob{position:absolute;inset:9% 12%;overflow:hidden;background:#07303B;transform:rotate(-1.5deg)}
.portret-klein .blob img{width:122%;height:100%;margin-left:-11%;object-fit:cover;object-position:50% 34%;display:block}
.portret-klein .blob-rand{position:absolute;inset:9% 12%}
.portret-klein .blob-rand::before,.portret-klein .blob-rand::after,
.portret-klein .blob-rand .blob-geel{content:"";position:absolute;inset:0}
.portret-klein .blob-rand::before{background:var(--roze);transform:rotate(-1.5deg) translate(9px,5px)}
.portret-klein .blob-rand::after{background:var(--cyaan);transform:rotate(-1.5deg) translate(-8px,-4px)}
.portret-klein .blob-rand .blob-geel{background:var(--geel);transform:rotate(-4deg) translate(3px,-9px)}
.portret-klein .doodles{position:absolute;inset:-4%;width:108%;height:108%;pointer-events:none}
.portret-klein .doodles path{fill:none;stroke-linecap:round}
.portret-klein .annotatie-blok{position:absolute;font-family:"Gochi Hand",cursive;font-size:1rem;line-height:1.3;max-width:15ch;z-index:2}
.portret-klein .an-1{top:-7%;left:-2%;color:var(--cyaan);transform:rotate(-3deg)}
.portret-klein .annotatie-blok svg{display:block;width:40px;height:30px;margin-top:4px}
.portret-klein .annotatie-blok svg path{fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
@media(max-width:860px){.hero-verdeeld{grid-template-columns:1fr}.portret-klein{max-width:330px}}