/*
Theme Name: Soluso
Theme URI: https://www.soluso.nl
Author: Soluso B.V.
Author URI: https://www.soluso.nl
Description: Custom block-thema (Full Site Editing) voor de Soluso-website. Gebouwd op basis van het goedgekeurde HTML/CSS-prototype (v3, 16-09-2026), met behoud van dezelfde look-and-feel, klassen en structuur.
Requires at least: 6.5
Tested up to: 6.6
Requires PHP: 7.4
Version: 0.1.24
License: Proprietary
Text Domain: soluso
*/

/* ==========================================================================
   Design tokens — zelfde namen/waarden als 02_Assets_en_Media/css/style.css.
   Losstaand van de theme.json-kleurenpalet (die voedt de blok-editor-
   kleurkeuzes); deze variabelen houden alle bestaande component-CSS hieronder
   ongewijzigd werkend.
   ========================================================================== */
:root {
  --teal: #6ECAC9;
  --yellow: #FEC252;
  --pink: #E080B4;
  --black: #17171A;
  --ink: #1A1A1D;
  --gray-900: #232326;
  --gray-700: #4B4B52;
  --gray-500: #75757D;
  --gray-200: #E7E7EA;
  --gray-100: #F1F1F3;
  --gray-50: #F8F8F9;
  --white: #FFFFFF;

  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 24px;

  --container: 1180px;
  --shadow: 0 20px 50px -25px rgba(23, 23, 26, 0.25);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: var(--gray-900);
  background: var(--white);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
  font-family: "Sora", "Inter", sans-serif;
  color: var(--ink);
  line-height: 1.15;
  margin: 0 0 0.5em;
  font-weight: 700;
  letter-spacing: -0.01em;
}

h1 { font-size: clamp(2.2rem, 4vw, 3.4rem); }
h2 { font-size: clamp(1.7rem, 3vw, 2.4rem); }
h3 { font-size: 1.25rem; }
p { margin: 0 0 1em; color: var(--gray-700); }

a { color: inherit; text-decoration: none; }

img { max-width: 100%; display: block; }

ul { margin: 0; padding: 0; list-style: none; }

/* WordPress rendert content buiten onze eigen .container-klasse soms in
   wp-site-blocks; die geven we bewust geen extra breedtebeperking, dat doet
   onze eigen .container zoals in het prototype. */
.wp-site-blocks > * { max-width: none; }

.container {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 24px;
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--gray-500);
  margin-bottom: 14px;
}

.eyebrow::before {
  content: "";
  width: 22px;
  height: 4px;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--teal), var(--yellow), var(--pink));
  display: inline-block;
}

/* Buttons — core/button rendert <div class="wp-block-button EXTRA-CLASSEN">
   <a class="wp-block-button__link wp-element-button">tekst</a></div>. De
   basisstijl (btn-primary-look) staat al via theme.json op elke knop; hier
   volgen alleen de varianten + gedeeld hover-gedrag, aan de hand van de
   klasse die op de buiten-div (wp-block-button) terechtkomt. */
.wp-block-button .wp-block-button__link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 700;
  font-size: 0.95rem;
  border: 2px solid transparent;
  border-radius: 999px;
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
  white-space: nowrap;
}
.wp-block-button .wp-block-button__link:hover { transform: translateY(-1px); }

.wp-block-button.btn-primary .wp-block-button__link:hover { background: #000; box-shadow: var(--shadow); }

.wp-block-button.btn-accent .wp-block-button__link {
  background: var(--yellow);
  color: var(--ink);
}
.wp-block-button.btn-accent .wp-block-button__link:hover { box-shadow: 0 14px 30px -14px rgba(254, 194, 82, 0.7); }

.wp-block-button.btn-outline .wp-block-button__link {
  background: transparent;
  border-color: var(--gray-200);
  color: var(--ink);
}
.wp-block-button.btn-outline .wp-block-button__link:hover { border-color: var(--ink); }

.wp-block-button.btn-outline-light .wp-block-button__link {
  background: transparent;
  border-color: rgba(255,255,255,0.35);
  color: var(--white);
}
.wp-block-button.btn-outline-light .wp-block-button__link:hover { border-color: var(--white); }

.wp-block-button.btn-sm .wp-block-button__link { padding: 9px 18px; font-size: 0.85rem; }

/* LET OP: er is bewust GEEN losstaande .btn/.btn-primary/.btn-accent/enz.
   (zonder .wp-block-button-scoping) meer in dit bestand. WordPress zet de
   className van een knoppen-blok op de BUITENSTE .wp-block-button-div, niet
   op de link zelf. Een losstaande klasse-selector als ".btn-primary" zou dus
   ook die buiten-div raken en daar (voor gevulde varianten) een eigen,
   niet-afgeronde achtergrondkleur geven die als vierkante hoeken achter de
   wél afgeronde binnenknop uitsteekt — precies de "rechthoekige knoppen"-bug
   die op 16-09-2026 is gevonden en hier is opgelost. Alle knop-styling staat
   daarom uitsluitend via de hierboven al aanwezige ".wp-block-button.btn-x
   .wp-block-button__link"-selectors, die alleen de binnenste link raken. */
.wp-block-button.btn-primary .wp-block-button__link {
  background: var(--ink);
  color: var(--white);
}

/* Header */
.site-header {
  background: rgba(255,255,255,0.9);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--gray-100);
}
/* WordPress verpakt onze "header"-templateonderdeel automatisch in een extra,
   eigen <header class="wp-block-template-part">-landmark-element eromheen.
   Dat omhulsel is precies even hoog als de inhoud erin, en daardoor werkt
   "position: sticky" niet als we het op onze eigen .site-header zetten — er
   is dan simpelweg geen ruimte om in te "blijven plakken" tijdens het
   scrollen. Daarom passen we sticky toe op dat buitenste, door WordPress
   zelf gegenereerde element, dat wél in een lange, scrollbare pagina zit. */
header.wp-block-template-part {
  position: sticky;
  top: 0;
  z-index: 100;
}
/* Als een ingelogde beheerder/redacteur de site bekijkt, toont WordPress zelf
   een vaste (fixed) admin-balk bovenaan. Zonder deze correctie komt onze
   sticky header bij het scrollen onder die balk te zitten (lijkt dan ook
   alsof "sticky" niet werkt — dit is alleen zichtbaar voor ingelogde
   gebruikers, niet voor echte bezoekers). */
body.admin-bar header.wp-block-template-part { top: 32px; }
@media screen and (max-width: 782px) {
  body.admin-bar header.wp-block-template-part { top: 46px; }
}
/* WordPress zet standaard op ELK Group-blok met "layout":"default" (ook als
   wij er via een eigen klasse "display:flex"/"display:grid" overheen zetten)
   een automatische marge-boven van 24px tussen de kind-elementen (bedoeld
   voor natuurlijke, verticaal doorlopende tekst — de ":where(.is-layout-flow)
   > *"-regel in WordPress' eigen basisstijlen). Bij onze eigen rij- en
   kolom-indelingen (header, footer, hero, split-secties, cta-band,
   contactformulier-grid) is dat ongewenst: het duwt elk kind ná het eerste
   24px naar beneden, los van onze eigen flex/grid-opmaak. Dat was de
   daadwerkelijke oorzaak van het niet verticaal gecentreerd staan van het
   logo/hamburgermenu-icoon in de header, en van de gap tussen het opengeklapte
   mobiele menu en de menubalk erboven. Hier expliciet gereset voor alle
   plekken waar wij zelf de layout bepalen. */
.site-header .container > *,
.header-actions > *,
.footer-grid > *,
.cta-band > *,
.hero-grid > *,
.split > *,
.contact-grid > * {
  margin-block-start: 0;
}
/* Dezelfde marge-boven-bug (zie hierboven) treft ook de allereerste sectie
   van iedere pagina: WordPress verpakt header en <main> samen in een eigen
   ".wp-site-blocks"-wrapper, óók een Group-blok met "layout":"default",
   waardoor <main> als tweede kind (na de header) diezelfde ongewenste 24px
   marge-boven krijgt. Dat was de oorzaak van de witruimte tussen de
   menubalk en het eerste blok op de homepage (en op elke andere pagina). */
.wp-site-blocks > * {
  margin-block-start: 0;
}
/* Dezelfde marge-boven-bug (zie hierboven) treft ook <main> zelf: het is óók
   een Group-blok met "layout":"default", dus elke sectie ná de eerste (dus
   ná de hero) krijgt er stiekem 24px marge-boven bij. Op de meeste pagina's
   valt dat niet op omdat de sectie na de hero een witte achtergrond heeft.
   Op de Oplossingen-pagina is die tweede sectie echter "bg-soft" (grijs),
   waardoor die 24px als een storende witte reep zichtbaar werd tussen de
   afsluitende lijn van de hero (.subpage-hero border-bottom) en het begin
   van de grijze achtergrond. Op gewone pagina's (page.html) zit de content
   niet direct in <main>, maar in het "Post Content"-blok van WordPress zelf
   (.wp-block-post-content) — dát is de daadwerkelijke ".is-layout-flow"
   met de 24px-regel, dus die resetten we hier expliciet. Op de homepage
   (front-page.html) staat de content wel direct in <main>, vandaar dat we
   allebei de selectors resetten. */
main.wp-block-group > *,
.wp-block-post-content > * {
  margin-block-start: 0;
}
.site-header .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 84px;
}
.logo img { height: 26px; width: auto; }
.main-nav ul { display: flex; gap: 32px; align-items: center; }
.main-nav a {
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--gray-900);
  position: relative;
}
.main-nav a.active { color: var(--ink); }
.main-nav a::after {
  content: "";
  position: absolute;
  left: 0; bottom: -6px;
  width: 0; height: 2px;
  background: var(--pink);
  transition: width 0.2s ease;
}
.main-nav a:hover::after, .main-nav a.active::after { width: 100%; }
.nav-hiring a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--ink);
}
.nav-hiring a::after { display: none; }
.hiring-icon { font-size: 1rem; line-height: 1; }
.badge-hiring {
  display: inline-block;
  background: var(--pink);
  color: var(--ink);
  font-size: 0.68rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 2px 9px;
  border-radius: 999px;
}
.header-actions { display: flex; align-items: center; gap: 20px; }
.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  width: 40px;
  height: 40px;
  padding: 0;
  border: none;
  background: transparent;
  cursor: pointer;
  flex-shrink: 0;
}
.nav-toggle span {
  display: block;
  width: 22px;
  height: 2px;
  background: var(--ink);
  border-radius: 2px;
  transition: transform 0.2s ease, opacity 0.2s ease;
}
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Hero */
.hero {
  padding: 56px 0 90px;
  background:
    radial-gradient(900px 400px at 85% -10%, rgba(110,202,201,0.16), transparent 60%),
    radial-gradient(700px 400px at 100% 20%, rgba(224,128,180,0.12), transparent 60%);
}
.hero-grid {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 56px;
  align-items: start;
}
.hero h1 { margin-bottom: 20px; }
.hero .lead { font-size: 1.15rem; max-width: 46ch; }
.hero-actions { display: flex; gap: 14px; margin-top: 28px; flex-wrap: wrap; }
.hero-stats {
  display: flex;
  gap: 32px;
  margin-top: 46px;
  padding-top: 26px;
  border-top: 1px solid var(--gray-200);
}
.hero-stat strong { display: block; font-family: "Sora", sans-serif; font-size: 1.6rem; color: var(--ink); }
.hero-stat span { font-size: 0.85rem; color: var(--gray-500); }

.hero-visual {
  border-radius: var(--radius-lg);
  background: var(--ink);
  padding: 34px;
  color: var(--white);
  position: relative;
  overflow: hidden;
  /* Lijnt de bovenkant van dit blok uit met de bovenkant van de hero-titel
     (h1), niet met de eyebrow erboven. Alleen relevant bij de 2-koloms
     hero-grid; op smallere schermen (zie media query 900px) valt deze
     marge weer weg omdat de kolommen dan onder elkaar staan. */
  margin-top: 64px;
}
.hero-visual::before,
.card-dark::before {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(135deg, rgba(110,202,201,0.25), transparent 50%);
}
.hero-visual .tag {
  display: inline-block;
  font-size: 0.75rem;
  font-weight: 700;
  padding: 6px 12px;
  border-radius: 999px;
  margin: 4px 6px 4px 0;
}
.tag-teal { background: var(--teal); color: var(--ink); }
.tag-yellow { background: var(--yellow); color: var(--ink); }
.tag-pink { background: var(--pink); color: var(--ink); }
.hero-visual h3 { color: var(--white); margin-top: 18px; }
.hero-visual p { color: rgba(255,255,255,0.75); }
.hero-visual-list { margin-top: 18px; display: flex; flex-direction: column; gap: 12px; position: relative; }
.hero-visual-list li {
  display: flex; align-items: center; gap: 12px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.1);
  padding: 12px 14px;
  border-radius: var(--radius-sm);
  font-size: 0.9rem;
}
.hero-visual-list .dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }

/* Sections */
.soluso-section { padding: 88px 0; scroll-margin-top: 100px; } /* zodat een #anker-link niet onder de sticky header belandt */
.section-tight { padding: 60px 0; }
.section-head { max-width: 680px; margin-bottom: 48px; }
.section-head.center { margin-left: auto; margin-right: auto; text-align: center; }
.bg-dark { background: var(--ink); color: var(--white); }
.bg-dark h2, .bg-dark h3 { color: var(--white); }
.bg-dark p { color: rgba(255,255,255,0.72); }
.bg-dark .eyebrow { color: rgba(255,255,255,0.6); }
.bg-soft { background: var(--gray-50); }

/* Pain points */
.pain-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.pain-card {
  background: var(--white);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-md);
  padding: 28px;
}
.pain-card .num {
  font-family: "Sora", sans-serif;
  font-weight: 700;
  color: var(--gray-200);
  font-size: 2rem;
  margin-bottom: 8px;
  -webkit-text-stroke: 1px var(--gray-500);
  -webkit-text-fill-color: transparent;
}

/* Card grids */
.card-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}
/* Variant voor grids met 2 kaarten (bv. homepage "Onze oplossingen") */
.card-grid-2 {
  grid-template-columns: repeat(2, 1fr);
  max-width: 760px;
  margin: 0 auto;
}
.card {
  background: var(--white);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-md);
  padding: 32px;
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
  display: flex;
  flex-direction: column;
  height: 100%;
}
.card:hover { transform: translateY(-4px); box-shadow: var(--shadow); border-color: transparent; }
/* Donkere kaart-variant (bv. de "vraag/contact"-kaart naast de productkaarten) */
.card-dark {
  background: var(--ink);
  border-color: transparent;
  position: relative;
  overflow: hidden;
}
.card-dark h3 { color: var(--white); }
.card-dark p { color: rgba(255,255,255,0.75); }
.card-dark .card-link { color: var(--white); }
.card-dark .icon-swatch { position: relative; z-index: 1; }
.card-dark h3, .card-dark p, .card-dark .card-link { position: relative; z-index: 1; }
.card .icon-swatch {
  width: 60px; height: 60px;
  border-radius: 14px;
  margin-bottom: 20px;
  display: flex; align-items: center; justify-content: center;
  font-family: "Sora", sans-serif;
  font-weight: 700;
  color: var(--ink);
}
.card .icon-swatch svg { width: 46px; height: 46px; }
/* Echte productlogo's/iconen (CloudWeigh, Digitaal Rijden) i.p.v. lettertje-badge */
.product-icon {
  height: 56px;
  width: auto;
  max-width: 100%;
  margin-bottom: 20px;
  display: block;
  align-self: flex-start; /* voorkomt uitrekken in de breedte binnen een flex-kolom (bv. .card) */
}
/* Volledig CloudWeigh-logo (icoon + wordmark), gebruikt in het "Ontwikkeld
   met Pfister Weegtechniek"-blok op de Oplossingen-pagina. Hoogte gelijk aan
   .product-icon (56px) zodat het logo hier optisch gelijk staat aan het
   Digitaal Rijden-icoon in de sectie eronder op diezelfde pagina. */
.cloudweigh-logo-full {
  height: 56px;
  width: auto;
  max-width: 100%;
  margin-bottom: 20px;
  display: block;
  align-self: flex-start;
}
/* Volledig Tarasa-logo (vector), i.p.v. "T"-badge. */
.tarasa-logo-full {
  height: 44px;
  width: auto;
  fill: var(--ink);
  display: block;
}
.card .tags { display: flex; gap: 8px; flex-wrap: wrap; margin-top: auto; margin-bottom: 14px; }
.card .tags span {
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 5px 10px;
  border-radius: 999px;
  background: var(--gray-100);
  color: var(--gray-700);
}
.card .card-link,
.case-card .card-link {
  margin-top: auto;
  padding-top: 14px;
  font-weight: 700;
  font-size: 0.9rem;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
/* Kaarten met .tags (bv. "Onze oplossingen") lijnen de labels zelf onderaan
   uit, vlak boven de link; de link erna hoeft dan geen eigen ruimte meer op
   te eisen, anders zou de ruimte tussen labels en link verdeeld worden i.p.v.
   dat ze als koppel onderaan blijven staan. */
.card .tags + .card-link { margin-top: 0; }
.card .card-link .arrow,
.case-card .card-link .arrow { transition: transform 0.15s ease; }
.card:hover .card-link .arrow,
a.case-card:hover .card-link .arrow { transform: translateX(4px); }

.swatch-teal { background: var(--teal); }
.swatch-yellow { background: var(--yellow); }
.swatch-pink { background: var(--pink); }

/* Sector / product hero band */
.subpage-hero {
  padding: 56px 0 64px;
  border-bottom: 1px solid var(--gray-200);
}
.breadcrumb {
  font-size: 0.85rem;
  color: var(--gray-500);
  margin-bottom: 20px;
}
.breadcrumb a { font-weight: 600; color: var(--gray-700); }
.subpage-hero .lead { max-width: 60ch; font-size: 1.08rem; }

/* Two column feature */
.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 56px;
  align-items: center;
}
.split.reverse .split-media { order: 2; }
.split-media {
  background: var(--gray-50);
  border-radius: var(--radius-lg);
  padding: 32px;
  border: 1px solid var(--gray-200);
}
.split ul.checklist li {
  display: flex;
  gap: 12px;
  padding: 10px 0;
  border-top: 1px solid var(--gray-100);
}
.split ul.checklist li:first-child { border-top: none; }
.checkmark {
  flex-shrink: 0;
  width: 22px; height: 22px;
  border-radius: 50%;
  background: var(--teal);
  color: var(--ink);
  display: flex; align-items: center; justify-content: center;
  font-size: 0.75rem;
  font-weight: 900;
  margin-top: 2px;
}

/* Standalone checklist (buiten .split, bijv. vacaturepagina's) */
.checklist li {
  display: flex;
  gap: 12px;
  padding: 10px 0;
  border-top: 1px solid var(--gray-100);
}
.checklist li:first-child { border-top: none; }
.bg-soft .checklist li { border-top-color: var(--gray-200); }

/* CTA band */
.cta-band {
  background: var(--ink);
  color: var(--white);
  border-radius: var(--radius-lg);
  padding: 56px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  flex-wrap: wrap;
  position: relative;
  overflow: hidden;
}
.cta-band::after {
  content: "";
  position: absolute;
  right: -60px; top: -60px;
  width: 240px; height: 240px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(110,202,201,0.35), transparent 70%);
  /* Puur decoratief, maar zonder dit ving deze cirkel de muisklik af vóórdat
     die de knop ernaast/eronder kon bereiken (een pseudo-element zonder
     z-index tekent bovenop de echte inhoud van hetzelfde blok). Vandaar dat
     de "Demo aanvragen"-knop in de cta-band lastig aan te klikken was. */
  pointer-events: none;
}
.cta-band h2 { color: var(--white); margin-bottom: 8px; }
.cta-band p { color: rgba(255,255,255,0.7); margin: 0; }
.cta-band .cta-actions { display: flex; gap: 14px; flex-wrap: wrap; }

/* Case cards */
.case-card {
  background: var(--white);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-md);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  height: 100%;
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}
/* Zelfde interactieve gevoel als de andere klikbare blokken op de site
   (bv. de sectorkaarten op /sectoren/): licht optillen + schaduw bij hover.
   Bewust gescopet op "a.case-card" (dus alleen als het hele blok ook echt
   een link is, zoals op de Cases-pagina) en niet op .case-card in het
   algemeen: op de homepage is dit blok geen link, dus daar zou dezelfde
   hover-uitstraling een klikbaarheid suggereren die er niet is. */
a.case-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow);
  border-color: transparent;
}
.case-card .case-top {
  padding: 26px 28px;
  color: var(--white);
  position: relative;
}
.case-card .case-top .result {
  font-family: "Sora", sans-serif;
  font-size: 1.5rem;
  font-weight: 800;
  line-height: 1.2;
  margin-bottom: 4px;
  /* Reserveert altijd ruimte voor 2 regels (2 × regelhoogte van déze kop),
     ook als de tekst maar 1 regel nodig heeft. Een blokelement met
     min-height laat tekst gewoon vanaf de bovenkant beginnen (geen flex/
     centrering nodig), dus de kop blijft vanzelf boven uitgelijnd en de
     eventuele overtollige ruimte valt eronder. Omdat alle drie kaarten
     dezelfde vaste hoogte reserveren, ongeacht of hún kop 1 of 2 regels
     nodig heeft, start de ondertitel daaronder ook altijd op precies
     dezelfde positie en wordt de hele balk voor alle drie kaarten even
     hoog. Zelfde, eerder al werkende aanpak als bij de kaarttitel
     (.case-body h3) hieronder, nu toegepast op de kop in de balk zelf. */
  min-height: 3.6rem; /* 1.5rem lettergrootte × 1.2 regelhoogte × 2 regels */
}
.case-card .case-top .sub {
  /* Zelfde principe als hierboven bij .result: de ondertitels lopen in
     lengte uiteen ("minder administratief werk" vs. "volledige controle
     op de milieustraat") en slaan bij sommige kaarten wel, bij andere
     niet om naar een 2e regel op smallere breedtes. Zonder deze reservering
     werd de balk daardoor per kaart verschillend hoog. De tekst wordt
     bovendien met flex onderin dit gereserveerde vak geplakt (i.p.v. aan
     de bovenkant, het standaardgedrag), zodat de ondertitel ook wanneer
     hij maar 1 regel nodig heeft, tóch tegen de onderkant van de balk
     aan blijft staan, in plaats van er met een leeg gat erboven te
     zweven. */
  min-height: 3.2rem; /* 1rem lettergrootte × 1.6 regelhoogte (body) × 2 regels */
  display: flex;
  align-items: flex-end;
}
.case-card .case-body { padding: 24px 28px 28px; flex: 1; display: flex; flex-direction: column; }
.case-card .case-body .sector-label {
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--gray-500);
  margin-bottom: 8px;
}
/* Reserveert altijd ruimte voor 2 tekstregels, ook als een titel maar 1
   regel nodig heeft. Zo begint de paragraaf eronder bij elke kaart op
   dezelfde hoogte, ongeacht de lengte van de titel, en blijft dit werken
   op elke breedte (rem-gebaseerd, niet aan een vaste kaartbreedte gekoppeld). */
.case-card .case-body h3 { min-height: 2.9rem; }

/* Team / karakteristieken */
.trait-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}
.trait-card { padding: 8px 0; }
.trait-card .trait-icon {
  width: 52px; height: 52px;
  border-radius: 14px;
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 18px;
  font-size: 1.4rem;
}

/* Quote */
.quote-block {
  border-left: 4px solid var(--pink);
  padding-left: 28px;
  font-size: 1.3rem;
  font-family: "Sora", sans-serif;
  color: var(--ink);
  font-weight: 600;
  margin: 0;
}
.bg-dark .quote-block { color: var(--white); }

/* Contact */
.contact-grid {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: 56px;
}
.contact-info-card {
  background: var(--gray-50);
  border-radius: var(--radius-lg);
  padding: 34px;
  border: 1px solid var(--gray-200);
}
.contact-info-card .row { display: flex; gap: 14px; padding: 14px 0; border-top: 1px solid var(--gray-200); }
.contact-info-card .row:first-child { border-top: none; }
.contact-info-card .row-icon {
  width: 38px; height: 38px; border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  font-weight: 700;
}
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.form-grid .full { grid-column: 1 / -1; }
.field label {
  display: block;
  font-size: 0.85rem;
  font-weight: 700;
  margin-bottom: 8px;
  color: var(--gray-900);
}
.field input, .field textarea, .field select {
  width: 100%;
  padding: 13px 16px;
  border-radius: var(--radius-sm);
  border: 1.5px solid var(--gray-200);
  font-family: inherit;
  font-size: 0.95rem;
  background: var(--white);
  transition: border-color 0.15s ease;
}
.field input:focus, .field textarea:focus, .field select:focus {
  outline: none;
  border-color: var(--teal);
}
.field textarea { resize: vertical; min-height: 120px; }
.form-note {
  font-size: 0.8rem;
  color: var(--gray-500);
  margin-top: 14px;
}

/* Footer */
.site-footer {
  background: var(--ink);
  color: rgba(255,255,255,0.7);
  padding: 64px 0 28px;
}
.footer-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: 40px;
  padding-bottom: 40px;
  border-bottom: 1px solid rgba(255,255,255,0.12);
}
.footer-grid h4 {
  color: var(--white);
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 18px;
}
.footer-grid ul li { margin-bottom: 10px; }
.footer-grid a:hover { color: var(--white); }
.footer-bottom {
  padding-top: 24px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.85rem;
  flex-wrap: wrap;
  gap: 12px;
}
.footer-socials { display: flex; gap: 14px; }
.footer-socials a {
  width: 36px; height: 36px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.2);
  display: flex; align-items: center; justify-content: center;
  font-size: 0.8rem;
  font-weight: 700;
}

/* Utilities */
.mt-0 { margin-top: 0; }
.footer-blurb { color: rgba(255,255,255,0.6); max-width: 32ch; }
.footer-partner-badge { height: 34px; width: auto; margin-top: 44px; opacity: 0.85; }
.text-center { text-align: center; }
.pill-list { display: flex; gap: 10px; flex-wrap: wrap; }
.pill-list span {
  font-size: 0.8rem;
  font-weight: 700;
  padding: 7px 14px;
  border-radius: 999px;
  background: var(--gray-100);
  color: var(--gray-700);
}
.sector-nav {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 28px;
}
.sector-nav a {
  padding: 10px 20px;
  border-radius: 999px;
  border: 1.5px solid var(--gray-200);
  font-weight: 700;
  font-size: 0.9rem;
}
.sector-nav a.active { background: var(--ink); color: var(--white); border-color: var(--ink); }
.sector-nav a:hover:not(.active) { border-color: var(--ink); }

/* Responsive */
@media (max-width: 900px) {
  .hero-grid, .split, .contact-grid { grid-template-columns: 1fr; }
  .hero-visual { margin-top: 0; }
  .split.reverse .split-media { order: 0; }
  .pain-grid, .card-grid, .trait-grid { grid-template-columns: 1fr 1fr; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .nav-toggle { display: flex; }
  .main-nav {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--white);
    border-bottom: 1px solid var(--gray-200);
    box-shadow: var(--shadow);
  }
  .main-nav.is-open { display: block; }
  .main-nav ul {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 8px 24px 22px;
  }
  .main-nav li { border-top: 1px solid var(--gray-100); }
  .main-nav li:first-child { border-top: none; }
  .main-nav a { display: block; padding: 15px 0; }
  .main-nav a::after { display: none; }
  .nav-hiring a {
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
    gap: 10px;
    padding: 15px 0;
  }
}
@media (max-width: 620px) {
  .pain-grid, .card-grid, .trait-grid, .footer-grid, .form-grid { grid-template-columns: 1fr; }
  .cta-band { flex-direction: column; align-items: flex-start; }
  .hero-stats { flex-wrap: wrap; row-gap: 18px; }
}