/* Healthcare Aruba — gedeelde stijl (ronde 3, 12 oktober 2026)
   Vormtaal volgens de actuele homepage (overdracht 12-10, DESIGN-SPEC.md):
   warmwit + subtiel marmer, Georgia-koppen, Arial-tekst, dunne randen, lichte schaduwen, koper alleen voor pijlen.
   Layout: rustige, gecentreerde kolom; marmerkaarten alleen voor bestaande kaarten (diensten, opdrachten, routes, contact). */

:root {
  --header-height: 76px;
  --bar: #F7F5EF;          /* bovenbalk */
  --bar-line: #C5CAC7;
  --bar-ink: #233641;      /* tekenkleur bovenbalk, knoppen */
  --title: #303532;        /* koppen en tegeltitels */
  --text: #3A403D;         /* lopende tekst */
  --subtitle: #6B6F6C;     /* ondertitels; iets donkerder dan #777B78 voor leesbaar contrast op marmer */
  --card: #F6F5F1;
  --card-line: #E4E1DB;
  --rule: #DDD9D1;
  --copper: #B87350;       /* alleen navigatiepijlen */
  --focus: #555C57;
  --emblem-opacity: .10;   /* homepage: hele constructie 90% transparant */
  --serif: Georgia, "Times New Roman", serif;
  --sans: Arial, "Helvetica Neue", Helvetica, sans-serif;
  --wrap: 1120px;
  --gutter: clamp(18px, 4vw, 40px);
  --shadow: 0 2px 5px rgb(108 99 81 / .07);
  --shadow-lift: 0 6px 18px rgb(108 99 81 / .10);
  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }
html { background: #fff; scroll-behavior: smooth; scroll-padding-top: 24px; -webkit-text-size-adjust: 100%; }
body {
  margin: 0; min-height: 100svh; color: var(--text); font-family: var(--sans); font-size: 1.0625rem; line-height: 1.65;
  background: linear-gradient(rgb(255 255 255 / .82), rgb(255 255 255 / .82)), url("../img/marble/achtergrond.png") center / cover no-repeat fixed, #FBFAF7;
}
body.page-home { background: linear-gradient(rgb(255 255 255 / .70), rgb(255 255 255 / .70)), url("../img/marble/achtergrond.png") center / cover no-repeat fixed, #FBFAF7; }
img, svg { display: block; max-width: 100%; }
a { color: inherit; }
h1, h2, h3, h4 { font-family: var(--serif); color: var(--title); margin: 0; line-height: 1.18; text-wrap: balance; }
h1, h2 { font-weight: 400; letter-spacing: -0.005em; }
h3, h4 { font-weight: 700; }
p { margin: 0 0 1em; }
.wrap { max-width: var(--wrap); margin: 0 auto; padding-inline: var(--gutter); }
.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.skip { position: absolute; left: -9999px; top: 8px; z-index: 100; background: var(--bar-ink); color: #fff; padding: 10px 16px; }
.skip:focus { left: 8px; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 4px; }

/* ------------------------------------------------------------------ Bovenbalk (alle pagina's) */
.site-header { height: calc(var(--header-height) + env(safe-area-inset-top)); background: var(--bar); border-bottom: 1px solid var(--bar-line); color: var(--bar-ink); padding-top: env(safe-area-inset-top); }
.header-inner { width: min(1280px, 100%); height: 100%; margin-inline: auto; padding-inline: max(28px, env(safe-area-inset-left)) max(28px, env(safe-area-inset-right)); display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.brand { display: inline-flex; align-items: center; gap: 13px; min-height: 44px; text-decoration: none; white-space: nowrap; }
.brand-window { position: relative; display: inline-block; flex: 0 0 27px; width: 27px; height: 27px; border: 1.5px solid currentColor; }
.brand-window::before { content: ""; position: absolute; left: 50%; top: 0; bottom: 0; border-left: 1.5px solid currentColor; transform: translateX(-.75px); }
.brand-window::after { content: ""; position: absolute; top: 50%; left: 0; right: 0; border-top: 1.5px solid currentColor; transform: translateY(-.75px); }
.brand-name { font-family: var(--serif); font-size: 24px; font-weight: 700; }
.header-nav { flex-shrink: 0; display: flex; align-items: center; gap: clamp(16px, 2.4vw, 28px); }
.about-link { display: inline-flex; align-items: center; min-height: 44px; padding: 8px 0; border-bottom: 1px solid #859296; font-size: 16px; text-decoration: none; white-space: nowrap; }
.about-link[aria-current="page"] { border-bottom: 2px solid var(--bar-ink); }
.brand:focus-visible, .about-link:focus-visible { outline: 2px solid var(--focus); outline-offset: 5px; }

/* ------------------------------------------------------------------ Marmerkaarten (gedeeld) */
.service, .tile, .offer, .route-box, .contact-card, .koen-side {
  border: 1px solid var(--card-line); border-radius: 10px; background-color: var(--card); background-size: cover; background-position: center; box-shadow: var(--shadow);
  background-image: linear-gradient(rgb(246 245 241 / .86), rgb(246 245 241 / .86)), url("../img/marble/marble_02.png");
}
.marble-01 { background-image: linear-gradient(rgb(246 245 241 / .86), rgb(246 245 241 / .86)), url("../img/marble/marble_01.png"); }
.marble-02, .offer + .offer { background-image: linear-gradient(rgb(246 245 241 / .86), rgb(246 245 241 / .86)), url("../img/marble/marble_02.png"); }
.marble-03, .route-box + .route-box { background-image: linear-gradient(rgb(246 245 241 / .86), rgb(246 245 241 / .86)), url("../img/marble/marble_03.png"); }
.marble-04, .contact-card { background-image: linear-gradient(rgb(246 245 241 / .86), rgb(246 245 241 / .86)), url("../img/marble/marble_04.png"); }

/* ------------------------------------------------------------------ Homepage (prototype 12-10) */
.home {
  position: relative; display: flex; align-items: center; justify-content: center; min-height: calc(100svh - var(--header-height) - env(safe-area-inset-top));
  /* stage-breedte (16:9) en de plek van de koperen bol: in het kruis tussen de vier tegels */
  --sw: min(100vw, calc((100svh - var(--header-height) - env(safe-area-inset-top)) * 1.777778));
  --ew: calc(var(--sw) * .644);              /* breedte homepage-model: driehoek even groot als voorheen; bol in het tegelkruis */
  --bx: 50%;
  --by: 50%;
}
.stage { position: relative; z-index: 1; width: var(--sw); aspect-ratio: 16 / 9; isolation: isolate; }
/* Homepage-model: dezelfde driehoek als op de dienstpagina's (lege master, zonder labels).
   De constructie blijft 90% transparant; alleen de koperen bol (en zacht de binnenlijnen) pulseert rustig zichtbaarder. */
.emblem-clip { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; }
.emblem { position: absolute; width: var(--ew); aspect-ratio: 1166 / 1144; left: calc(var(--bx) - var(--ew) * .4996); top: calc(var(--by) - var(--ew) * .4992); }
.geometry { position: absolute; inset: 0; width: 100%; height: 100%; }
.basis { opacity: var(--emblem-opacity); }
.bal, .lijnen { opacity: 0; will-change: opacity; }
/* Koper loopt vol (24-10): bij hover stroomt het koper vanuit de bol door de staven naar de hoeken
   en vandaar langs het kader. --rr = straal vanuit de bol, --fr = straal vanuit elk hoekpunt (gezet door site.js). */
.emblem { --rr: 0px; --fr: 0px; --rk: 1; }
/* Gloed: dezelfde gloed als in het model op de dienstpagina's (uit het model gehaald), alleen zichtbaar tijdens hover */
.gloed { opacity: 0; will-change: opacity; }
.kader { opacity: 0; will-change: opacity;
  -webkit-mask-image: radial-gradient(circle at 49.31% 15.82%, #000 var(--fr), transparent calc(var(--fr) + 24px)), radial-gradient(circle at 15.78% 69.93%, #000 var(--fr), transparent calc(var(--fr) + 24px)), radial-gradient(circle at 83.10% 69.93%, #000 var(--fr), transparent calc(var(--fr) + 24px));
          mask-image: radial-gradient(circle at 49.31% 15.82%, #000 var(--fr), transparent calc(var(--fr) + 24px)), radial-gradient(circle at 15.78% 69.93%, #000 var(--fr), transparent calc(var(--fr) + 24px)), radial-gradient(circle at 83.10% 69.93%, #000 var(--fr), transparent calc(var(--fr) + 24px)); }
.lijnen {
  -webkit-mask-image: radial-gradient(circle at 49.96% 50.88%, #000 var(--rr), rgb(0 0 0 / var(--rk)) calc(var(--rr) + 18px));
          mask-image: radial-gradient(circle at 49.96% 50.88%, #000 var(--rr), rgb(0 0 0 / var(--rk)) calc(var(--rr) + 18px)); }
.services {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 1;
  width: min(920px, 88%, calc((100svh - var(--header-height) - 130px) * 1.32));
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: clamp(110px, 15vw, 240px); row-gap: clamp(48px, 7vh, 100px);
}
.service { display: block; position: relative; aspect-ratio: 1.06; text-decoration: none; -webkit-tap-highlight-color: transparent; transition: transform 150ms ease, box-shadow 150ms ease; }
.live-card { display: flex; flex-direction: column; justify-content: center; gap: 22px; width: 100%; height: 100%; padding: 28px; }
.card-top, .tile-top { display: flex; align-items: center; justify-content: space-between; }
.number, .tile-num { color: #777B78; font-family: var(--serif); font-size: 17px; line-height: 1; }
.arrow, .tile-arrow { color: var(--copper); font-family: var(--sans); font-size: 21px; line-height: 1; }
.card-copy, .tile-copy { display: flex; flex-direction: column; gap: 10px; }
.card-title, .tile-title { display: block; min-height: 2.24em; font-family: var(--serif); font-size: 30px; font-weight: 700; line-height: 1.12; color: var(--title); }
.card-subtitle, .tile-sub { display: block; min-height: 3.9em; font-size: 17px; line-height: 1.3; color: var(--subtitle); }
.service:focus-visible, .tile:focus-visible { outline: 2px solid var(--focus); outline-offset: 4px; }
@media (hover: hover) and (pointer: fine) {
  .service:hover, .tile:hover { transform: translateY(-1px); box-shadow: var(--shadow-lift); }
}
@media (max-width: 1000px) and (min-width: 701px) {
  .services { width: min(88%, calc((100svh - var(--header-height) - 110px) * 1.25)); column-gap: 110px; row-gap: 56px; }
  .live-card { padding: 22px; gap: 18px; }
  .card-title { font-size: 25px; }
  .card-subtitle { font-size: 15px; }
}
@media (max-width: 700px) {
  .stage { width: calc(100% - 28px); height: auto; min-height: 0; aspect-ratio: auto; padding-block: 28px; }
  .home { --ew: calc((100vw - 28px) * 1.18); --bx: 50%; --by: 50%; }
  .services { position: relative; width: 100%; left: auto; top: auto; transform: none; gap: 78px 18px; }
  .service { min-height: 194px; aspect-ratio: auto; border-radius: 9px; }
  .live-card { min-height: 194px; padding: 17px 14px; justify-content: flex-start; gap: 16px; }
  .number { font-size: 14px; }
  .arrow { font-size: 18px; }
  .card-copy { gap: 8px; }
  .card-title { font-size: 20px; }
  .card-subtitle { font-size: 14px; line-height: 1.35; min-height: 4.05em; }
}
@media (max-width: 370px) {
  .stage { width: calc(100% - 24px); padding-block: 20px; }
  .home { --ew: calc((100vw - 24px) * 1.18); }
  .services { gap: 56px 14px; }
  .service, .live-card { min-height: 172px; }
  .live-card { padding: 14px 12px; gap: 12px; }
  .card-title { font-size: 18px; }
}
/* Homepage, omgedraaide hiërarchie (24-10): resultaat groot, dienstnaam klein; tekst gecentreerd.
   Het vak van elke tegel blijft even groot (zelfde plek als voorheen); de zichtbare kaart is kleiner en
   staat in de buitenhoek van dat vak, zodat de ruimte rond de bol groter wordt zonder dat de tegels naar elkaar schuiven. */
.home .service { background: none; border-color: transparent; box-shadow: none; }
.home .live-card {
  position: absolute; width: min(100%, max(80%, 250px)); height: auto; aspect-ratio: 1.32; justify-content: center; gap: 12px; padding: 18px 20px;
  border: 1px solid var(--card-line); border-radius: 10px; background-color: var(--card); background-size: cover; background-position: center; box-shadow: var(--shadow);
  transition: box-shadow 150ms ease;
}
.home .marble-01 .live-card { background-image: linear-gradient(rgb(246 245 241 / .86), rgb(246 245 241 / .86)), url("../img/marble/marble_01.png"); }
.home .marble-02 .live-card { background-image: linear-gradient(rgb(246 245 241 / .86), rgb(246 245 241 / .86)), url("../img/marble/marble_02.png"); }
.home .marble-03 .live-card { background-image: linear-gradient(rgb(246 245 241 / .86), rgb(246 245 241 / .86)), url("../img/marble/marble_03.png"); }
.home .marble-04 .live-card { background-image: linear-gradient(rgb(246 245 241 / .86), rgb(246 245 241 / .86)), url("../img/marble/marble_04.png"); }
.home .services > .service:nth-child(odd) .live-card { left: 0; }
.home .services > .service:nth-child(even) .live-card { right: 0; }
.home .services > .service:nth-child(-n+2) .live-card { top: 0; }
.home .services > .service:nth-child(n+3) .live-card { bottom: 0; }
.home .service:focus-visible { outline: none; }
.home .service:focus-visible .live-card { outline: 2px solid var(--focus); outline-offset: 4px; }
@media (hover: hover) and (pointer: fine) {
  .home .service:hover { box-shadow: none; }
  .home .service:hover .live-card { box-shadow: var(--shadow-lift); }
}
.home .card-copy { align-items: center; text-align: center; gap: 8px; }
.home .card-subtitle { min-height: 0; font-family: var(--serif); font-size: clamp(19px, 1.65vw, 26px); font-weight: 700; line-height: 1.15; color: var(--title); text-wrap: balance; }
.home .card-title { min-height: 0; font-family: var(--sans); font-size: 12px; font-weight: 400; line-height: 1.3; letter-spacing: .1em; text-transform: uppercase; color: var(--subtitle); }
@media (max-width: 1000px) and (min-width: 701px) {
  .home .card-subtitle { font-size: 21px; }
}
@media (max-width: 700px) {
  .home .services { grid-auto-rows: 1fr; }
  .home .service { min-height: 0; }
  .home .live-card { position: static; width: 100%; height: 100%; aspect-ratio: auto; min-height: 140px; padding: 12px 12px 14px; gap: 8px; }
  .home .card-subtitle { font-size: 18px; }
  .home .card-title { font-size: 11px; letter-spacing: .1em; }
}
/* Uitlijning tegels (25-10): elke kaart reserveert dezelfde hoogte voor de resultaatzin, zodat nummer, zin en dienstnaam
   in alle vier de tegels op dezelfde hoogte staan, ongeacht de tekstlengte. De zin staat gecentreerd in die ruimte. */
.home .card-subtitle { display: grid; align-content: center; min-height: calc(3 * 1.15em); }
@media (max-width: 700px) { .home .live-card { justify-content: flex-start; } .home .card-subtitle { min-height: calc(4 * 1.15em); } }
@media (max-height: 620px) and (min-width: 701px) {
  .home .live-card { position: static; width: 100%; aspect-ratio: auto; }
  .home .card-subtitle { font-size: 19px; }
}
/* Te weinig hoogte (zoom, liggend): de pagina mag groeien en scrollen; niets wordt afgeknipt. */
@media (max-height: 620px) and (min-width: 701px) {
  :root { --header-height: 56px; }
  .home { padding-block: 12px; --ew: min(59vw, 660px, calc((100svh - 80px) * 1.27)); --bx: 50%; --by: 50%; }
  .stage { width: 100%; aspect-ratio: auto; }
  .services { position: relative; left: auto; top: auto; transform: none; margin-inline: auto; width: min(720px, 86%); column-gap: 40px; row-gap: 16px; }
  .service { aspect-ratio: auto; }
  .live-card { padding: 12px 16px; gap: 8px; justify-content: flex-start; }
  .card-copy { gap: 4px; }
  .number { font-size: 14px; } .arrow { font-size: 17px; }
  .card-title { font-size: 19px; min-height: 0; }
  .card-subtitle { font-size: 14px; min-height: 2.6em; }
}

/* ------------------------------------------------------------------ Subpagina's */
.crumbs { margin: 0 auto; padding-top: clamp(14px, 2.4vw, 26px); font-size: .9375rem; color: var(--subtitle); }
.crumbs ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 0 8px; }
.crumbs li + li::before { content: "/"; margin-right: 8px; color: #A3A7A4; }
.crumbs a { display: inline-flex; align-items: center; min-height: 44px; min-width: 44px; color: var(--bar-ink); text-decoration: underline; text-decoration-color: #859296; text-underline-offset: 5px; }
.crumbs [aria-current="page"] { display: inline-flex; align-items: center; min-height: 44px; }

.section { padding-block: clamp(48px, 7vw, 96px); }
.section + .section { border-top: 1px solid var(--rule); }
.section-head { margin-bottom: clamp(26px, 4vw, 44px); max-width: 68ch; }
.section-head > p:last-child { margin: 16px 0 0; }
.section h2 { font-size: clamp(1.75rem, 1.25rem + 1.6vw, 2.5rem); max-width: 24ch; }
.eyebrow { font-family: var(--sans); font-size: .875rem; letter-spacing: .14em; text-transform: uppercase; color: var(--subtitle); margin: 0 0 14px; }
.lead { font-size: 1.1875rem; line-height: 1.6; max-width: 60ch; }
.small { font-size: .9375rem; color: var(--subtitle); max-width: 66ch; margin: 0; }
.two-col { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: clamp(24px, 5vw, 72px); align-items: start; }
.prose { max-width: 60ch; }
.prose > p:last-child { margin-bottom: 0; }

/* Knoppen en tekstlinks */
.button { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 13px 24px; border-radius: 6px; border: 1px solid var(--bar-ink); background: var(--bar-ink); color: #fff; font-family: var(--sans); font-size: 1rem; font-weight: 700; line-height: 1.2; text-decoration: none; transition: background-color .15s ease; }
.button:hover { background: #31495A; border-color: #31495A; }
.textlink { color: var(--bar-ink); font-weight: 700; text-decoration: underline; text-decoration-color: #859296; text-underline-offset: 5px; }
.textlink:hover { text-decoration-color: var(--bar-ink); }
.hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 26px; margin: 0; }

/* Dienst-hero met model */
.page-hero { padding-block: clamp(18px, 3vw, 36px) clamp(44px, 6vw, 80px); }
.page-hero-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(28px, 5vw, 72px); align-items: start; }
.page-hero-grid > div:first-child { padding-top: clamp(0px, 8vw, 128px); }
.page-hero h1 { font-size: clamp(2.375rem, 1.5rem + 3vw, 3.75rem); line-height: 1.06; margin-bottom: 14px; }
.page-tagline { font-family: var(--serif); font-size: clamp(1.3rem, 1rem + 1.1vw, 1.875rem); line-height: 1.25; color: var(--subtitle); margin: 0 0 30px; max-width: 26ch; }

/* Model op dienstpagina's: definitieve PNG per dienst (labels zitten in het beeld), nooit vervormd of bijgesneden */
.model { margin: 0; justify-self: center; width: 100%; max-width: 560px; }
.model-img {
  /* Webversie met doorzichtige achtergrond: valt naadloos weg in de pagina, gloed blijft zichtbaar */
  display: block; width: 100%; height: auto; aspect-ratio: 1 / 1; object-fit: contain; margin-bottom: -8%; /* onderste 15% van het beeld is leeg */
}
.model figcaption { border-top: 1px solid var(--rule); padding-top: 14px; font-size: 1rem; line-height: 1.55; color: var(--text); }
.model figcaption strong { display: block; font-family: var(--serif); font-size: 1.125rem; color: var(--title); margin-bottom: 4px; }
.model figcaption p { margin: 0; }

/* Dienstinhoud */
.service-detail h2 { margin-bottom: 18px; }
.result { margin: 22px 0 0; padding: 12px 16px; max-width: 64ch; border-left: 3px solid var(--card-line); background: rgb(255 255 255 / .6); font-size: .9688rem; color: var(--title); }
.result strong { display: block; font-size: .75rem; letter-spacing: .12em; text-transform: uppercase; color: var(--subtitle); font-weight: 400; margin-bottom: 2px; }
.session-note { margin: 24px 0 0; padding: 4px 0 4px 16px; border-left: 3px solid var(--bar-ink); max-width: 64ch; }
.proof-more { margin: 22px 0 0; font-size: .9688rem; }
.situations { list-style: none; margin: 0 0 26px; padding: 0; border-top: 1px solid var(--rule); }
.situations li { font-family: var(--serif); font-size: 1.3rem; line-height: 1.3; color: var(--title); padding: 15px 0; border-bottom: 1px solid var(--rule); }

/* Staffing: twee routes */
.split { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; align-items: start; }
.route-box { padding: clamp(22px, 3vw, 34px); }
.route-box h2 { font-size: clamp(1.5rem, 1.15rem + 1vw, 1.875rem); margin-bottom: 14px; }
.route-box .button, .route-box .textlink { margin-top: 18px; }
.route-box .textlink { display: inline-block; }

/* Een eerste opdracht */
.offers { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; margin: 0 0 32px; }
.offer { padding: clamp(22px, 3vw, 34px); }
.offer h3 { margin: 8px 0 14px; font-size: clamp(1.3rem, 1.1rem + .6vw, 1.6rem); }
.offer p { margin: 0 0 18px; }
.reflection { border-top: 1px solid var(--rule); padding-top: 28px; }
.reflection h3 { font-size: 1.375rem; }
.reflection ol { padding-left: 22px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }

/* Werkwijze */
.steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; counter-reset: stap; }
.steps li { counter-increment: stap; padding-right: clamp(16px, 3vw, 36px); }
.steps li + li { padding-left: clamp(16px, 3vw, 36px); border-left: 1px solid var(--rule); }
.steps li::before { content: counter(stap, decimal-leading-zero); display: block; font-family: var(--serif); font-size: 1.0625rem; color: #777B78; margin-bottom: 12px; }
.steps h3 { font-size: 1.3rem; margin-bottom: 10px; }
.steps p { margin: 0; }

/* Praktijkvoorbeelden */
.proof-list { border-top: 1px solid var(--rule); }
.proof-item { display: grid; grid-template-columns: minmax(150px, 230px) minmax(0, 1fr); gap: clamp(20px, 4.5vw, 64px); padding: 28px 0; border-bottom: 1px solid var(--rule); }
.proof-measure { display: flex; flex-direction: column; gap: 6px; }
.proof-measure strong { font: 400 clamp(1.9rem, 3.2vw, 2.9rem)/1.05 var(--serif); color: var(--title); }
.proof-measure span { font-size: .8125rem; line-height: 1.5; color: var(--subtitle); max-width: 24ch; }
.proof-item h3 { font-size: clamp(1.2rem, 1.9vw, 1.45rem); margin-bottom: 10px; }
.proof-item p { margin: 0; max-width: 62ch; }
.proof-footnote { font-size: .875rem; color: var(--subtitle); max-width: 90ch; margin-top: 18px; }
.proof-cta { margin: 22px 0 0; }
.case-index { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--rule); display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: clamp(24px, 4vw, 56px); }
.case-index li { border-bottom: 1px solid var(--rule); }
.case-index a { display: grid; grid-template-columns: minmax(96px, 140px) minmax(0, 1fr); gap: 16px; align-items: baseline; padding: 16px 0; text-decoration: none; color: var(--title); }
.case-index a:hover .ci-title { text-decoration: underline; text-underline-offset: 4px; }
.ci-measure { font-family: var(--serif); font-size: 1.375rem; line-height: 1.1; }
.ci-title { font-weight: 700; line-height: 1.4; }
.ci-where { display: block; font-weight: 400; font-size: .875rem; color: var(--subtitle); margin-top: 2px; }

/* Zorg, geld en digitaal (bronsectie; nu licht in plaats van donkerblauw) */
.section-dark { background: transparent; color: var(--text); }
.trio { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-bottom: 28px; border-top: 1px solid var(--rule); }
.trio > div { padding: 16px 18px 6px 0; }
.trio > div + div { padding-left: 18px; border-left: 1px solid var(--rule); }
.trio-label { display: block; font-family: var(--serif); font-size: 1.45rem; color: var(--title); margin-bottom: 6px; }
.trio p { margin: 0; font-size: 1rem; line-height: 1.5; }

/* Over HC-AW */
.intro-grid { display: grid; grid-template-columns: minmax(0, 55fr) minmax(0, 45fr); gap: clamp(28px, 5vw, 72px); align-items: center; }
.intro-grid h1 { font-size: clamp(2.375rem, 1.5rem + 3vw, 3.75rem); line-height: 1.06; margin-bottom: 24px; max-width: 18ch; }
.intro-grid .hero-actions { margin: 28px 0 20px; }
.hero-art { position: relative; aspect-ratio: 520 / 560; max-width: 100%; border: 1px solid var(--card-line); border-radius: 10px; overflow: hidden; box-shadow: var(--shadow); }
.hero-art svg { width: 100%; height: 100%; }
.koen-grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(28px, 6vw, 80px); align-items: start; }
.koen-copy h2 { font-size: clamp(1.9rem, 1.3rem + 2vw, 2.75rem); margin-bottom: 26px; max-width: 18ch; }
.koen-copy p { max-width: 62ch; }
.koen-copy .personal-lead { font-family: var(--serif); font-size: clamp(1.3rem, 1.9vw, 1.55rem); line-height: 1.3; color: var(--title); font-weight: 700; margin-bottom: 16px; }
.fact { font-size: .9375rem; color: var(--subtitle); border-top: 1px solid var(--rule); padding-top: 14px; margin-top: 26px; }
.koen-side { padding: 26px; }
.portrait { margin: 0 0 22px; }
.portrait img { width: 100%; max-width: 220px; height: auto; aspect-ratio: 1; object-fit: cover; border-radius: 8px; box-shadow: var(--shadow); }
.koen-side h3 { font-size: 1.25rem; margin-bottom: 14px; }
.career { list-style: none; margin: 0 0 22px; padding: 0; }
.career li { display: grid; grid-template-columns: 92px minmax(0, 1fr); gap: 12px; padding: 10px 0; border-top: 1px solid var(--card-line); font-size: .9688rem; line-height: 1.4; color: var(--title); }
.career span { font-size: .75rem; letter-spacing: .1em; text-transform: uppercase; color: var(--subtitle); padding-top: 3px; }
.coast { margin: 0; }
.coast img { width: 100%; height: 170px; object-fit: cover; object-position: center 60%; border-radius: 6px; }
.coast figcaption { font-size: .8125rem; color: var(--subtitle); margin-top: 8px; }

/* Dienstentegels op subpagina's: dezelfde vormtaal als de homepage, kleiner */
.tile-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; }
.tile-list-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.tile-list li { display: flex; min-width: 0; }
.tile { flex: 1; display: flex; flex-direction: column; gap: 18px; padding: 22px; text-decoration: none; transition: transform 150ms ease, box-shadow 150ms ease; }
.tile .tile-title { font-size: 22px; min-height: 2.24em; }
.tile .tile-sub { font-size: 15px; min-height: 0; }
.tile .tile-num { font-size: 15px; }
.tile .tile-arrow { font-size: 18px; }

/* Contact */
.contact-section { border-top: 1px solid var(--rule); }
.contact-grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(28px, 5vw, 72px); align-items: center; }
.contact-grid h2 { margin-bottom: 20px; }
.contact-card { padding: clamp(24px, 3vw, 34px); }
.mail-line { margin: 18px 0 0; font-size: 1rem; }
.mail { font-weight: 700; color: var(--bar-ink); overflow-wrap: anywhere; user-select: all; }

/* Footer: licht en rustig */
.site-footer { border-top: 1px solid var(--bar-line); background: var(--bar); color: var(--text); padding: 40px 0 calc(36px + env(safe-area-inset-bottom)); font-size: .9375rem; }
.site-footer p { margin: 0 0 4px; }
.footer-grid { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; gap: 24px 48px; }
.footer-brand { font-family: var(--serif); font-size: 1.125rem; font-weight: 700; color: var(--bar-ink); }
.footer-mail { margin-top: 10px !important; }
.footer-mail a, .footer-meta a { color: var(--bar-ink); text-underline-offset: 4px; }
.footer-nav ul { list-style: none; margin: 0; padding: 0; columns: 2; column-gap: 40px; }
.footer-nav a { display: inline-flex; align-items: center; min-height: 32px; color: var(--bar-ink); text-decoration: none; }
.footer-nav a:hover { text-decoration: underline; text-underline-offset: 4px; }
.footer-meta { text-align: right; color: var(--subtitle); }

/* Strategisch advies (ronde 9): kernzinnen, twee routes, eerdere resultaten */
.kernzinnen { font-family: var(--serif); font-size: clamp(1.3rem, 1.05rem + .8vw, 1.6rem); line-height: 1.3; color: var(--title); margin-bottom: 26px !important; }
.kernzinnen span { display: block; }
.kernzinnen span + span { margin-top: 4px; }
.prose-action { margin-top: 28px !important; }
.offer-q { font-family: var(--serif); font-size: 1.1875rem; line-height: 1.35; color: var(--title); }
.offer-get { border-top: 1px solid var(--card-line); padding-top: 14px; }
.offers:last-child { margin-bottom: 0; }
.results { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: clamp(28px, 5vw, 72px); border-top: 1px solid var(--rule); }
.result-item { padding: 26px 0 28px; border-bottom: 1px solid var(--rule); scroll-margin-top: 24px; }
.result-cat { font-size: .875rem; letter-spacing: .14em; text-transform: uppercase; color: var(--subtitle); margin: 0 0 10px; }
.result-text { font-family: var(--serif); font-size: clamp(1.2rem, 1.05rem + .5vw, 1.4rem); line-height: 1.32; color: var(--title); margin: 0 0 14px; max-width: 34ch; }
.result-note { margin: -4px 0 14px; max-width: 40ch; font-size: .9688rem; line-height: 1.5; color: var(--text); }
.source-note { margin: 22px 0 0; max-width: 72ch; font-size: .875rem; line-height: 1.55; color: var(--subtitle); }
.source-note a { color: var(--bar-ink); text-underline-offset: 4px; overflow-wrap: anywhere; }
.result-link { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; color: var(--bar-ink); font-weight: 700; text-decoration: underline; text-decoration-color: #859296; text-underline-offset: 5px; }
.result-link:hover { text-decoration-color: var(--bar-ink); }
.result-link span { color: var(--copper); text-decoration: none; }
.result-figures { list-style: none; margin: 4px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px 28px; }
.result-figures li { font-size: .9375rem; color: var(--subtitle); }
.result-figures strong { display: block; font: 400 clamp(1.6rem, 1.2rem + 1.2vw, 2.1rem)/1.1 var(--serif); color: var(--title); }
.knowledge { list-style: none; margin: 34px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px clamp(20px, 3vw, 40px); }
.knowledge li { border-top: 1px solid var(--rule); padding-top: 14px; }
.knowledge p { margin: 4px 0 0; font-size: .9688rem; line-height: 1.5; }
.knowledge-link { display: inline-flex; align-items: center; gap: 6px; min-height: 32px; font-family: var(--serif); font-size: 1.1875rem; font-weight: 700; color: var(--title); text-decoration: underline; text-decoration-color: #A3A7A4; text-underline-offset: 5px; }
.knowledge-link span { color: var(--copper); }
.result-link.is-pending, .knowledge-link.is-pending { text-decoration: none; min-height: 0; }
.result-link.is-pending { color: var(--subtitle); font-weight: 400; }
html:not(.review) .result-link.is-pending { display: none; }
#resultaten .proof-footnote { margin-top: 30px; }
html.review [data-link-pending] { outline: 2px dashed var(--copper); outline-offset: 3px; }
html.review [data-link-pending]::after { content: "link ontbreekt"; margin-left: 8px; background: var(--copper); color: #fff; font: 700 .6875rem/1.6 var(--sans); letter-spacing: .08em; text-transform: uppercase; padding: 0 6px; }

/* Reviewmodus (?review=1): conceptteksten markeren */
html.review [data-concept] { outline: 2px dashed var(--copper); outline-offset: 4px; position: relative; }
html.review [data-concept]::after { content: "concept"; position: absolute; top: -12px; right: 0; background: var(--copper); color: #fff; font: 700 .6875rem/1.6 var(--sans); letter-spacing: .08em; text-transform: uppercase; padding: 0 6px; }

/* ------------------------------------------------------------------ Responsief */
@media (max-width: 1000px) {
  .tile-list-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  .page-hero-grid, .two-col, .koen-grid, .contact-grid, .intro-grid { grid-template-columns: minmax(0, 1fr); }
  .model { max-width: 560px; }
  .page-hero-grid > div:first-child { padding-top: 0; }
  .hero-art { max-width: 420px; aspect-ratio: 520 / 420; }
  .steps { grid-template-columns: minmax(0, 1fr); gap: 26px; }
  .steps li, .steps li + li { padding: 0; border-left: 0; }
  .steps li + li { border-top: 1px solid var(--rule); padding-top: 24px; }
  .tile-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 700px) {
  :root { --header-height: 64px; }
  .header-inner { padding-inline: max(18px, env(safe-area-inset-left)) max(18px, env(safe-area-inset-right)); gap: 16px; }
  .brand { gap: 10px; }
  .brand-window { flex-basis: 23px; width: 23px; height: 23px; }
  .brand-name { font-size: 18px; }
  .about-link { font-size: 14px; }
  .split, .offers, .reflection ol, .case-index, .results, .knowledge { grid-template-columns: minmax(0, 1fr); }
  .knowledge { gap: 18px; }
  .proof-item { grid-template-columns: minmax(0, 1fr); gap: 12px; padding: 22px 0; }
  .tile-list { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .tile { padding: 14px 16px; gap: 8px; }
  .tile .tile-title { min-height: 0; }
  .tile .tile-title { font-size: 19px; }
  .tile .tile-sub { font-size: 14px; }
  .trio { grid-template-columns: minmax(0, 1fr); }
  .trio > div, .trio > div + div { padding: 14px 0 6px; border-left: 0; }
  .trio > div + div { border-top: 1px solid var(--rule); }
  .career li { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .hero-actions .button, .contact-card .button, .route-box .button { width: 100%; }
  .footer-meta { text-align: left; }
  .case-index a { grid-template-columns: minmax(0, 1fr); gap: 4px; }
}
@media (max-width: 370px) {
  :root { --header-height: 60px; }
  .header-inner { padding-inline: 14px; gap: 12px; }
  .brand-name { font-size: 16px; }
  .about-link { font-size: 13px; }
  .tile-list { grid-template-columns: minmax(0, 1fr); }
  .footer-nav ul { columns: 1; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .service, .tile, .button { transition: none; }
  .service:hover, .tile:hover { transform: none; }
  .bal, .lijnen, .kader, .gloed { opacity: 0 !important; }   /* geen pulsatie bij "minder beweging" */
}
/* Mobiel: model zo breed mogelijk (tot de schermrand), zodat de tekst in de afbeelding leesbaar blijft */
@media (max-width: 700px) {
  .model { max-width: none; width: calc(100% + 2 * var(--gutter)); margin-inline: calc(-1 * var(--gutter)); }
  .model figcaption { padding-inline: var(--gutter); }
}


/* ================================================================ TV2 (test-2026-11-04-tv2) */
/* Home met drie diensten: twee boven, één gecentreerd eronder (B-14) */
.home .services > .service:nth-child(3) { grid-column: 1 / -1; justify-self: center; width: calc((100% - clamp(110px, 15vw, 240px)) / 2); }
.home .services > .service:nth-child(3) .live-card { left: 50%; right: auto; transform: translateX(-50%); }
@media (max-width: 700px) {
  .home .services > .service:nth-child(3) { width: calc((100% - 18px) / 2); }
  .home .services > .service:nth-child(3) .live-card { left: auto; transform: none; }
}
@media (max-height: 620px) and (min-width: 701px) { .home .services > .service:nth-child(3) .live-card { left: auto; transform: none; } }
/* Dienstentegels: twee in plaats van drie (staffing eruit, B-01) */
.tile-list-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 700px) { .tile-list-2 { grid-template-columns: minmax(0, 1fr); } }
/* Drie kaarten op Strategisch advies: doorlooptijd onderaan elke kaart */
.rust main .kaarten.drie .item .doorlooptijd { margin-top: auto; padding-top: 10px; }
/* Bronlinks bij resultaten: rustige bronregel in labelmaat, niet vet (voorstel A, Koen 04-11-2026) */
.rust #resultaten .result-links { gap: 0; }
.rust #resultaten .result-link { min-height: 44px; margin-top: 0; font-family: var(--sans); font-size: var(--tl); font-weight: 400; color: var(--subtitle); text-decoration-color: var(--rule); text-underline-offset: 4px; }
.rust #resultaten .result-link:hover { text-decoration-color: var(--subtitle); }