/* ==========================================================================
   PRIME ESTHETIC · SITE V3 — homepage
   Componentstijl: nursing-care-referentie (afgeronde super-panelen, pills,
   chips, tinten). Tokens: DESIGN.md. Kleur, type en copy blijven Prime.
   ========================================================================== */
:root {
  --bg:                  #F4F1EC;
  --surface:             #FAF8F4;
  --surface-warm:        #E3D2B4;
  --ink:                 #16151A;
  --ink-secondary:       rgba(22, 21, 26, 0.65);
  --ink-inverse:         #F4F1EC;
  --line:                #A9A6A1;
  --line-soft:           rgba(169, 166, 161, 0.4);
  --accent-metal:        #C08347;
  --accent-metal-hover:  #AD743C;
  --accent-digital:      #8F76E4;
  --accent-digital-deep: #6350C4;
  --accent-digital-hover:#7B61DB;
  --accent-digital-pressed: #6350C4;
  --champagne:           #E3D2B4;
  --travertin:           #B3946C;
  --scrim:               rgba(22, 21, 26, 0.72);

  /* v3-paneeltinten — pastelvlakken uit de referentie, gemengd uit eigen palet */
  --tint-champagne: color-mix(in srgb, #E3D2B4 42%, #FBF9F5);
  --tint-violet:    color-mix(in srgb, #8F76E4 13%, #FBF9F5);
  --tint-stone:     color-mix(in srgb, #A9A6A1 14%, #F7F4EF);

  --font-display: "Prata", Georgia, "Times New Roman", serif;
  --font-sans: "Hanken Grotesk", -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
  --fs-display: clamp(2.75rem, 2.01rem + 3.05vw, 4.75rem);
  --fs-h1:      clamp(2.25rem, 1.79rem + 1.90vw, 3.5rem);
  --fs-h2:      clamp(1.875rem, 1.64rem + 0.95vw, 2.5rem);
  --fs-h3:      clamp(1.5rem, 1.41rem + 0.38vw, 1.75rem);
  --fs-h4:      clamp(1.125rem, 1.08rem + 0.19vw, 1.25rem);
  --fs-body-l:  clamp(1.125rem, 1.08rem + 0.19vw, 1.25rem);
  --fs-body:    clamp(1rem, 0.98rem + 0.10vw, 1.0625rem);
  --fs-caption: 0.875rem;
  --fs-overline: clamp(0.75rem, 0.73rem + 0.10vw, 0.8125rem);
  --lh-display: 1.05;  --ls-display: -0.01em;
  --lh-h1: 1.1;   --lh-h2: 1.15;  --lh-h3: 1.25;  --lh-h4: 1.4;
  --lh-body-l: 1.6; --lh-body: 1.65; --lh-caption: 1.5;
  --lh-overline: 1.2; --ls-overline: 0.14em;

  --space-1: 4px;   --space-2: 8px;   --space-3: 12px;  --space-4: 16px;
  --space-5: 20px;  --space-6: 24px;  --space-7: 28px;  --space-8: 32px;
  --space-9: 36px;  --space-10: 40px; --space-11: 44px; --space-12: 48px;
  --space-14: 56px; --space-16: 64px;

  --container-max: 1440px; /* gedeelde uitlijnlijn: hero, panelen, grids, footer */
  --gutter: clamp(20px, 4vw, 40px);
  --grid-gap: clamp(16px, 2.5vw, 32px);

  /* v3-geometrie — referentie-componentstijl */
  --radius-xs: 2px;
  --radius-sm: 6px;
  --radius-md: 12px;
  --radius-lg: 20px;    /* kaarten, media, form-kaart */
  --radius-xl: 28px;    /* super-panelen, hero, footerpanelen */
  --radius-pill: 999px; /* knoppen, chips, accordionbalken */
  --border: 1px solid var(--line-soft);
  --border-strong: 1px solid var(--line);
  --shadow-sm: 0 1px 2px rgba(22, 21, 26, 0.05), 0 2px 8px rgba(179, 148, 108, 0.10);
  --shadow-md: 0 2px 4px rgba(22, 21, 26, 0.05), 0 8px 24px rgba(179, 148, 108, 0.14);
  --shadow-lg: 0 4px 8px rgba(22, 21, 26, 0.06), 0 20px 48px rgba(179, 148, 108, 0.18);
  --shadow-glow: 0 0 40px rgba(143, 118, 228, 0.30);

  --dur-fast: 150ms;
  --dur-base: 300ms;
  --dur-slow: 600ms;
  --dur-reveal: 900ms;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-inout: cubic-bezier(0.65, 0, 0.35, 1);
  --reveal-distance: 24px;
  --stagger: 80ms;

  --btn-height: 52px;
  --btn-height-mobile: 46px;
  --focus-ring: #6350C4;
  --field-height: 50px;
  --tap-min: 44px;
  --z-mega: 40; --z-header: 50; --z-sheet: 60;
}

/* ===== RESET ============================================================ */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { font-family: var(--font-sans); font-size: var(--fs-body); line-height: var(--lh-body); background: var(--bg); color: var(--ink); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
p { text-wrap: pretty; }
main p, .faq p { hyphens: auto; }
img, picture, video, svg { display: block; max-width: 100%; }
input, button, textarea, select { font: inherit; color: inherit; }
button { background: none; border: none; cursor: pointer; }
a { color: var(--accent-digital-deep); }
ul[role="list"] { list-style: none; }
h1, h2, h3, .display { font-family: var(--font-display); font-weight: 400; hyphens: manual; text-wrap: balance; }
.display { font-size: var(--fs-display); line-height: var(--lh-display); letter-spacing: var(--ls-display); }
h1 { font-size: var(--fs-h1); line-height: var(--lh-h1); }
h2 { font-size: var(--fs-h2); line-height: var(--lh-h2); }
h3 { font-size: var(--fs-h3); line-height: var(--lh-h3); }
h4 { font-family: var(--font-sans); font-size: var(--fs-h4); line-height: var(--lh-h4); font-weight: 600; }
.body-l { font-size: var(--fs-body-l); line-height: var(--lh-body-l); }
.caption { font-size: var(--fs-caption); line-height: var(--lh-caption); font-weight: 500; color: var(--ink-secondary); }
.overline { font-size: var(--fs-overline); line-height: var(--lh-overline); letter-spacing: var(--ls-overline); font-weight: 600; text-transform: uppercase; color: var(--ink); }
.num { font-variant-numeric: lining-nums tabular-nums; }
.container { max-width: calc(var(--container-max) + var(--gutter) * 2); margin-inline: auto; padding-inline: var(--gutter); }
:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
:focus:not(:focus-visible) { outline: none; }

/* Accentwoord in koppen — violet-deep, alleen op de aangewezen H2's */
.tone { color: var(--accent-digital-deep); }

/* ===== KNOPPEN — pills (referentie-geometrie, Prime-kleur) ============== */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); height: var(--btn-height); padding-inline: var(--space-8); border-radius: var(--radius-pill); border: 1px solid transparent; font-family: var(--font-sans); font-weight: 600; font-size: var(--fs-body); line-height: 1; white-space: nowrap; text-decoration: none; transition: background var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out); }
.btn:active { transform: scale(0.98); }
.btn-primary { background: var(--accent-digital-deep); color: var(--ink-inverse); }
.btn-primary:hover { background: var(--accent-digital-hover); }
.btn-secondary { background: transparent; color: var(--ink); border-color: var(--line); }
.btn-secondary:hover { border-color: var(--ink); }
.btn-cta { background: var(--accent-digital); color: var(--ink); box-shadow: var(--shadow-glow); }
.btn-cta:hover { background: var(--accent-digital-hover); color: var(--ink-inverse); }
.btn-lg { height: 56px; padding-inline: var(--space-10); font-size: var(--fs-body-l); }

.lnk-arrow { display: inline-flex; align-items: center; gap: var(--space-2); color: var(--accent-digital-deep); font-weight: 600; font-size: var(--fs-body); text-decoration: none; padding-block: var(--space-2); }
.lnk-arrow .arrow { display: inline-flex; transition: transform var(--dur-fast) var(--ease-out); }
.lnk-arrow .arrow svg { width: 15px; height: 15px; }
.lnk-arrow:hover { text-decoration: underline; text-underline-offset: 4px; }
.lnk-arrow:hover .arrow { transform: translate(3px, -3px); }

/* Chip — pill-badge uit de referentie */
.chip { display: inline-flex; align-items: center; gap: var(--space-2); border-radius: var(--radius-pill); padding: var(--space-2) var(--space-4); font: 600 var(--fs-caption) var(--font-sans); }
.chip--metal { background: rgba(192,131,71,.12); border: 1px solid rgba(192,131,71,.35); color: var(--ink); }

/* ===== SCROLL-REVEAL — alleen actief met JS, standaard zichtbaar ======== */
html.js .reveal { opacity: 0; transform: translateY(var(--reveal-distance)); }
html.js .reveal.in { opacity: 1; transform: translateY(0); transition: opacity var(--dur-reveal) var(--ease-out), transform var(--dur-reveal) var(--ease-out); }
html.js .reveal-group > * { opacity: 0; transform: translateY(var(--reveal-distance)); }
html.js .reveal-group.in > * { opacity: 1; transform: translateY(0); transition: opacity var(--dur-reveal) var(--ease-out), transform var(--dur-reveal) var(--ease-out); }
html.js .reveal-group.in > :nth-child(2) { transition-delay: var(--stagger); }
html.js .reveal-group.in > :nth-child(3) { transition-delay: calc(var(--stagger) * 2); }
html.js .reveal-group.in > :nth-child(4) { transition-delay: calc(var(--stagger) * 3); }
html.js .reveal-group.in > :nth-child(5) { transition-delay: calc(var(--stagger) * 4); }
html.js .reveal-group.in > :nth-child(6) { transition-delay: calc(var(--stagger) * 5); }

@media (prefers-reduced-motion: reduce) {
  :root { --dur-fast: 0ms; --dur-base: 0ms; --dur-slow: 0ms; --dur-reveal: 0ms; --reveal-distance: 0px; --stagger: 0ms; }
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
  html.js .reveal, html.js .reveal-group > * { opacity: 1; transform: none; }
}

/* ==========================================================================
   HEADER + NAV — huidige mega-opzet, licht verzacht (radius onderaan paneel)
   ========================================================================== */
.pe-header { position: sticky; top: 0; z-index: var(--z-header); background: color-mix(in srgb, var(--bg) 92%, transparent); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-bottom: var(--border); }
.pe-header__inner { display: flex; align-items: center; justify-content: space-between; gap: var(--space-8); height: 88px; }
.pe-logo { display: inline-flex; align-items: center; text-decoration: none; }
.pe-logo__mark { height: 38px; width: auto; }

.pe-nav { display: flex; align-items: center; gap: var(--space-8); }
.pe-nav__item { display: inline-flex; white-space: nowrap; align-items: center; gap: var(--space-1); position: relative; font: 500 var(--fs-body) var(--font-sans); color: var(--ink); text-decoration: none; padding-block: var(--space-2); }
.pe-nav__has-mega { position: static; }
.pe-nav__item::after { content: ""; position: absolute; left: 0; right: 0; bottom: -3px; height: 2px; background: var(--accent-digital-deep); transform: scaleX(0); transform-origin: left; transition: transform var(--dur-fast) var(--ease-out); }
.pe-nav__item:hover, .pe-nav__item[aria-expanded="true"] { color: var(--accent-digital-deep); }
.pe-nav__item:hover::after, .pe-nav__item[aria-expanded="true"]::after { transform: scaleX(1); }
.pe-nav__chevron { width: 12px; height: 12px; transition: transform var(--dur-fast) var(--ease-out); }
.pe-nav__has-mega:hover .pe-nav__chevron, .pe-nav__has-mega:focus-within .pe-nav__chevron { transform: rotate(180deg); }

.pe-mega { position: absolute; top: calc(100% - 1px); left: 0; right: 0; background: var(--surface); border-bottom: var(--border); border-radius: 0 0 var(--radius-xl) var(--radius-xl); box-shadow: var(--shadow-lg); z-index: var(--z-mega); opacity: 0; visibility: hidden; transform: translateY(-6px); transition: opacity var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out), visibility var(--dur-base); }
.pe-nav__has-mega:hover .pe-mega, .pe-nav__has-mega:focus-within .pe-mega { opacity: 1; visibility: visible; transform: translateY(0); }
.pe-mega__inner { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-10); padding-block: var(--space-10); }
.pe-mega__heading { color: var(--ink-secondary); margin-bottom: var(--space-4); }
.pe-mega__col { display: flex; flex-direction: column; }
.pe-mega__link { display: flex; flex-direction: column; gap: 2px; padding: var(--space-3); margin-inline: calc(var(--space-3) * -1); border-radius: var(--radius-md); text-decoration: none; color: var(--ink); transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out); }
.pe-mega__link:hover { color: var(--accent-digital-deep); background: color-mix(in srgb, var(--accent-digital) 8%, transparent); }
.pe-mega__link span { font: 600 var(--fs-body) var(--font-sans); }
.pe-mega__link small { font-size: var(--fs-caption); color: var(--ink-secondary); font-weight: 400; }
.pe-mega__reserved-card { background: var(--tint-champagne); border-radius: var(--radius-lg); padding: var(--space-5); }
.pe-mega__badge { display: inline-block; font: 600 var(--fs-caption) var(--font-sans); letter-spacing: var(--ls-overline); text-transform: uppercase; color: var(--ink); background: color-mix(in srgb, var(--ink) 8%, transparent); border-radius: var(--radius-pill); padding: 2px var(--space-3); margin-bottom: var(--space-3); }
.pe-mega__reserved-title { font: 600 var(--fs-h4) var(--font-sans); color: var(--ink-secondary); margin-top: var(--space-1); }
.pe-mega__footer { border-top: var(--border); padding-block: var(--space-5); display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); }
.pe-mega__footer-link { color: var(--accent-digital-deep); font: 600 var(--fs-body) var(--font-sans); text-decoration: none; display: inline-flex; align-items: center; gap: var(--space-2); }
.pe-mega__footer-link:hover { text-decoration: underline; }

/* Mobiel menu — sheet */
.nav-toggle { display: none; width: 44px; height: 44px; border-radius: var(--radius-pill); border: var(--border-strong); align-items: center; justify-content: center; }
.nav-toggle svg { width: 20px; height: 20px; }
.mobile-sheet { display: none; }

@media (max-width: 1023px) {
  .pe-nav, .pe-header .btn { display: none; }
  .nav-toggle { display: inline-flex; }
  .mobile-sheet { display: block; position: fixed; inset: 0; z-index: var(--z-sheet); background: var(--bg); padding: var(--space-6) var(--gutter) var(--space-12); overflow-y: auto; opacity: 0; visibility: hidden; transform: translateY(-8px); transition: opacity var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out), visibility var(--dur-base); }
  .mobile-sheet.open { opacity: 1; visibility: visible; transform: translateY(0); }
  .mobile-sheet__top { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--space-8); }
  .mobile-sheet nav a, .mobile-sheet nav summary { display: flex; align-items: center; justify-content: space-between; min-height: var(--tap-min); padding-block: var(--space-3); font: 600 var(--fs-h4) var(--font-sans); color: var(--ink); text-decoration: none; border-bottom: var(--border); cursor: pointer; }
  .mobile-sheet nav summary::-webkit-details-marker { display: none; }
  .mobile-sheet nav summary { list-style: none; }
  .mobile-sheet details[open] summary .pe-nav__chevron { transform: rotate(180deg); }
  .mobile-sheet__sub { padding: var(--space-2) 0 var(--space-4); }
  .mobile-sheet__sub a { font-weight: 500; font-size: var(--fs-body); border-bottom: none; min-height: var(--tap-min); }
  .mobile-sheet__sub .overline { display: block; margin: var(--space-4) 0 var(--space-1); color: var(--ink-secondary); }
  .mobile-sheet .btn { display: inline-flex; width: 100%; margin-top: var(--space-8); }
}

/* ==========================================================================
   01 HERO — afgeronde media-kaart, inset van de rand (referentie-patroon)
   ========================================================================== */
.hero { padding: var(--space-4) var(--gutter) 0; max-width: calc(var(--container-max) + var(--gutter) * 2); margin-inline: auto; }
.hero__card { position: relative; border-radius: var(--radius-xl); overflow: hidden; background: var(--ink); min-height: min(86vh, 780px); display: flex; align-items: flex-end; }
.hero__media, .hero__media video, .hero__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero__media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(75deg, rgba(22,21,26,.72) 0%, rgba(22,21,26,.38) 52%, rgba(22,21,26,.12) 100%); }
.hero__inner { position: relative; z-index: 2; width: 100%; padding: clamp(var(--space-8), 6vw, var(--space-16)) clamp(var(--space-5), 5vw, var(--space-16)); }
.hero__title { color: var(--ink-inverse); max-width: 720px; margin-bottom: var(--space-6); }
.hero__sub { color: rgba(244,241,236,.85); max-width: 540px; margin-bottom: var(--space-9); hyphens: manual; }
.hero__actions { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-5); }
.hero__reassurance { color: rgba(244,241,236,.72); }
html.js .hero__title, html.js .hero__sub, html.js .hero__actions { animation: heroIn var(--dur-reveal) var(--ease-out) both; }
html.js .hero__sub { animation-delay: var(--stagger); }
html.js .hero__actions { animation-delay: calc(var(--stagger) * 2); }
@keyframes heroIn { from { opacity: 0; transform: translateY(40px); } to { opacity: 1; transform: translateY(0); } }

/* ===== 02 TRUST — vier zachte tegels ==================================== */
.trust { padding-block: var(--space-12) 0; }
.trust__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-4); }
.trust__item { display: flex; align-items: center; gap: var(--space-4); background: var(--surface); border: var(--border); border-radius: var(--radius-lg); padding: var(--space-5) var(--space-6); }
.trust__icon { flex: none; width: 44px; height: 44px; border-radius: var(--radius-pill); background: var(--tint-champagne); display: flex; align-items: center; justify-content: center; }
.trust__icon svg { width: 20px; height: 20px; stroke: var(--accent-metal); }
.trust__item p { font-size: var(--fs-caption); line-height: 1.45; font-weight: 500; }
@media (max-width: 1023px) { .trust__grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 599px)  { .trust__grid { grid-template-columns: 1fr; } }

/* ===== SECTIES — generiek ritme ========================================= */
.section { padding-block: clamp(var(--space-16), 9vw, 128px); }
.section--tight { padding-block: clamp(var(--space-12), 6vw, 96px); }
.section-header { max-width: 780px; margin-bottom: clamp(var(--space-10), 5vw, var(--space-16)); }
.section-header h2 { margin-bottom: var(--space-5); }
.section-header p { color: var(--ink-secondary); max-width: 60ch; }
.section-header--center { text-align: center; margin-inline: auto; }
.section-lead { display: block; font-family: var(--font-display); font-style: italic; font-size: var(--fs-body-l); color: var(--ink-secondary); margin-bottom: var(--space-4); }
.rule-bronze { width: 64px; height: 1px; background: var(--accent-metal); display: block; margin-bottom: var(--space-4); }
.section-header--center .rule-bronze { margin-inline: auto; }

/* Super-paneel — sectie als afgerond vlak, inset van de rand */
.panel-wrap { padding-inline: var(--gutter); max-width: calc(var(--container-max) + var(--gutter) * 2); margin-inline: auto; }
.panel { border-radius: var(--radius-xl); }
.panel--champagne { background: var(--tint-champagne); }
.panel--violet { background: var(--tint-violet); }
.panel--stone { background: var(--tint-stone); }
.panel--dark { background: var(--ink); color: var(--ink-inverse); }
.panel > .container { padding-block: clamp(var(--space-10), 6vw, 88px); }

/* ===== 03 DIRECT ANTWOORD =============================================== */
.answer { max-width: 820px; }
.answer p { hyphens: manual; }
.answer .body-l { font-size: var(--fs-body-l); }

/* ===== 04 DIENSTEN — kaarten met tint-rotatie =========================== */
.service-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--grid-gap); }
.service-card { display: flex; flex-direction: column; background: var(--surface); border-radius: var(--radius-lg); overflow: hidden; text-decoration: none; color: inherit; box-shadow: var(--shadow-sm); transition: transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out); }
.service-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.service-card__media { position: relative; height: 220px; }
.service-card__media img { width: 100%; height: 100%; object-fit: cover; }
.service-card--featured { grid-column: span 2; }
.service-card--featured .service-card__media { height: 320px; }
.service-card--t2 { background: var(--tint-champagne); }
.service-card--t3 { background: var(--tint-violet); }
.service-card--t4 { background: var(--tint-stone); }
.service-card__body { display: flex; flex-direction: column; flex: 1; padding: var(--space-7); }
.service-card__title { font-size: var(--fs-h3); margin-bottom: var(--space-2); }
.service-card__desc { color: var(--ink-secondary); margin-bottom: var(--space-7); max-width: 44ch; }
.service-card__footer { margin-top: auto; display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); }
.service-card__price .label { color: var(--ink-secondary); font-size: var(--fs-caption); display: block; }
.service-card__price strong { font-family: var(--font-sans); font-weight: 700; font-size: var(--fs-h4); }
.service-card__link { display: inline-flex; align-items: center; gap: var(--space-2); color: var(--accent-digital-deep); font-weight: 600; font-size: var(--fs-caption); white-space: nowrap; }
.service-card__link svg { width: 14px; height: 14px; transition: transform var(--dur-fast) var(--ease-out); }
.service-card:hover .service-card__link svg { transform: translate(2px, -2px); }
.service-card--teaser { background: linear-gradient(155deg, #8C744F, #4A3A28); justify-content: flex-end; }
.service-card--teaser .service-card__body { flex: none; }
.service-card--teaser h3, .service-card--teaser p { color: var(--ink-inverse); }
.service-card--teaser p { max-width: 30ch; color: rgba(244,241,236,.8); }
.service-card--teaser .pe-mega__badge { background: rgba(244,241,236,.92); align-self: flex-start; }
@media (max-width: 1023px) { .service-grid { grid-template-columns: 1fr 1fr; } .service-card--featured { grid-column: span 2; } }
@media (max-width: 639px)  { .service-grid { grid-template-columns: 1fr; } .service-card--featured { grid-column: span 1; } .service-card__media { height: 200px; } }

/* ===== 05 METHODE ======================================================= */
.method-grid { display: grid; grid-template-columns: 5fr 6fr; gap: clamp(var(--space-8), 5vw, var(--space-16)); align-items: center; }
.media-card { position: relative; border-radius: var(--radius-lg); overflow: hidden; background: var(--ink); }
.media-card img { width: 100%; height: 100%; object-fit: cover; }
.media-card--43 { aspect-ratio: 4/3; }
.media-card--34 { aspect-ratio: 3/4; }
.media-card__play { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; }
.play-circle { width: 76px; height: 76px; border-radius: var(--radius-pill); background: rgba(250,248,244,.92); backdrop-filter: blur(4px); display: flex; align-items: center; justify-content: center; box-shadow: var(--shadow-md); transition: transform var(--dur-base) var(--ease-out); }
.media-card:hover .play-circle { transform: scale(1.06); }
.play-circle svg { width: 22px; height: 22px; margin-left: 3px; }
.method-cols { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-6); margin-block: var(--space-8); }
.method-col { background: var(--surface); border: var(--border); border-radius: var(--radius-lg); padding: var(--space-6); }
.method-col h4 { margin-bottom: var(--space-3); }
.method-col p { color: var(--ink-secondary); font-size: var(--fs-caption); }
@media (max-width: 1023px) { .method-grid { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 639px)  { .method-cols { grid-template-columns: 1fr; } }

/* ===== 06 WAAROM NEDERLAND — vergelijking in super-paneel =============== */
.compare-grid { display: grid; grid-template-columns: 5fr 7fr; gap: clamp(var(--space-8), 5vw, var(--space-16)); align-items: stretch; }
.compare-grid h2 { margin-bottom: var(--space-8); }
.compare-grid .media-card { aspect-ratio: auto; }
.compare-grid .media-card img { position: absolute; inset: 0; }
table.compare { width: 100%; border-collapse: collapse; }
table.compare th, table.compare td { text-align: left; padding: var(--space-4) var(--space-3); border-bottom: 1px solid rgba(22,21,26,.12); font-size: var(--fs-caption); vertical-align: top; }
table.compare thead th { font: 600 var(--fs-caption) var(--font-sans); text-transform: uppercase; letter-spacing: var(--ls-overline); color: var(--ink-secondary); }
table.compare tbody tr:last-child th, table.compare tbody tr:last-child td { border-bottom: none; }
table.compare td:first-child, table.compare th:first-child { font-weight: 600; color: var(--ink); width: 24%; }
table.compare td.prime { color: var(--ink); font-weight: 500; }
table.compare td.turkije { color: var(--ink-secondary); }
@media (max-width: 1023px) { .compare-grid { grid-template-columns: minmax(0, 1fr); } .compare-grid .media-card { aspect-ratio: 3/2; } .compare-grid .media-card img { position: static; } }
@media (max-width: 767px) {
  table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  /* auto-min van grid/flex-items uitschakelen zodat brede inhoud (tabellen)
     binnen de eigen scrollbox blijft in plaats van de track op te rekken */
  main div, main section, main article { min-width: 0; }
}

/* ===== 07 VOOR EN NA ==================================================== */
.case-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: var(--grid-gap); margin-bottom: var(--space-8); }
.case-card { background: var(--surface); border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-sm); transition: transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out); }
.case-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.case-card__media { display: grid; grid-template-columns: 1fr 1fr; position: relative; }
.case-card__media::after { content: ""; position: absolute; left: 50%; top: 0; bottom: 0; width: 1px; background: rgba(244,241,236,.5); transform: translateX(-0.5px); }
.case-card__img { aspect-ratio: 4/5; position: relative; display: flex; align-items: flex-start; padding: var(--space-4); }
.case-card__img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.case-card__tag { position: relative; z-index: 2; font: 600 var(--fs-overline) var(--font-sans); letter-spacing: var(--ls-overline); text-transform: uppercase; color: var(--ink-inverse); background: var(--scrim); padding: var(--space-1) var(--space-3); border-radius: var(--radius-pill); }
.case-card__body { padding: var(--space-6); }
.case-card__body h3 { margin-bottom: var(--space-5); font-size: var(--fs-h4); font-family: var(--font-sans); font-weight: 600; }
.case-card__body .chip--metal { margin-bottom: var(--space-4); }
.case-card__stats { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); padding-top: var(--space-5); border-top: var(--border); }
.case-card__stat span { display: block; margin-bottom: var(--space-1); }
.case-card__stat strong { display: block; font: 600 var(--fs-h4) var(--font-sans); }
.callout { display: flex; gap: var(--space-4); align-items: flex-start; background: var(--surface); border: var(--border); border-radius: var(--radius-lg); padding: var(--space-5) var(--space-6); }
.callout .i { flex: none; width: 22px; height: 22px; border-radius: var(--radius-pill); border: 1.5px solid var(--line); display: flex; align-items: center; justify-content: center; font: 700 12px var(--font-sans); color: var(--ink-secondary); margin-top: 2px; }
.callout p { font-size: var(--fs-caption); color: var(--ink-secondary); }

/* ===== 08 PRIJZEN ======================================================= */
.price-panel { display: grid; grid-template-columns: 1.05fr 1fr; gap: clamp(var(--space-8), 5vw, var(--space-16)); align-items: center; }
.price-tiles { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); }
.price-tile { background: var(--surface); border-radius: var(--radius-lg); padding: var(--space-6); box-shadow: var(--shadow-sm); }
.price-tile .svc { font-size: var(--fs-caption); color: var(--ink-secondary); margin-bottom: var(--space-2); }
.price-tile .amt { font-family: var(--font-display); font-size: var(--fs-h3); }
.price-actions { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-6); margin-top: var(--space-9); }
@media (max-width: 1023px) { .price-panel { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 479px)  { .price-tiles { grid-template-columns: 1fr; } }

/* ===== 09 PROCES ======================================================== */
.steps-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-4); counter-reset: step; }
.step { background: var(--surface); border: var(--border); border-radius: var(--radius-lg); padding: var(--space-7); counter-increment: step; }
.step::before { content: "0" counter(step); display: inline-flex; align-items: center; justify-content: center; font: 600 var(--fs-caption) var(--font-sans); color: var(--ink); background: var(--tint-champagne); border-radius: var(--radius-pill); padding: var(--space-1) var(--space-3); margin-bottom: var(--space-5); }
.step h4 { margin-bottom: var(--space-2); }
.step p { color: var(--ink-secondary); font-size: var(--fs-caption); }
.step--active { background: var(--ink); border-color: var(--ink); color: var(--ink-inverse); }
.step--active::before { background: var(--accent-digital); color: var(--ink); }
.step--active p { color: rgba(244,241,236,.75); }
@media (max-width: 1023px) { .steps-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 599px)  { .steps-grid { grid-template-columns: 1fr; } }

/* ===== 10 TEAM — collage + draaiende badge ============================== */
.team-grid { display: grid; grid-template-columns: 6fr 5fr; gap: clamp(var(--space-8), 5vw, var(--space-16)); align-items: center; }
.team-collage { position: relative; display: grid; grid-template-columns: 1.25fr 1fr; gap: var(--space-4); align-items: end; }
.team-collage .media-card:last-child { margin-bottom: var(--space-12); }
.orbit-badge { position: absolute; left: 50%; bottom: 8%; transform: translateX(-50%); width: 132px; height: 132px; border-radius: var(--radius-pill); background: var(--surface); box-shadow: var(--shadow-md); display: flex; align-items: center; justify-content: center; }
.orbit-badge__text { position: absolute; inset: 0; animation: orbit 26s linear infinite; }
.orbit-badge__text text { font: 600 11.5px var(--font-sans); letter-spacing: .16em; text-transform: uppercase; fill: var(--ink-secondary); }
.orbit-badge__core { font-family: var(--font-display); font-size: 1.35rem; color: var(--accent-metal); }
@keyframes orbit { to { transform: rotate(360deg); } }
.roster-item { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-4); padding-block: var(--space-4); border-bottom: var(--border); }
.roster-name { font-weight: 600; }
.roster-role { color: var(--ink-secondary); font-size: var(--fs-caption); display: block; margin-top: 2px; }
.roster-big { font-size: var(--fs-caption); color: var(--ink-secondary); text-align: right; }
.team-links { display: flex; flex-wrap: wrap; gap: var(--space-6); margin-top: var(--space-6); }
.team-note { margin-top: var(--space-6); }
@media (max-width: 1023px) { .team-grid { grid-template-columns: minmax(0, 1fr); } }

/* ===== 11 KENNISBANK — artikelrijen (referentie-blogpatroon) ============ */
.article-rows { border-top: var(--border-strong); }
.article-row { display: grid; grid-template-columns: 150px 1fr auto; align-items: center; gap: var(--space-6); padding-block: var(--space-6); border-bottom: var(--border-strong); text-decoration: none; color: inherit; border-radius: var(--radius-md); transition: background var(--dur-fast) var(--ease-out); padding-inline: var(--space-3); margin-inline: calc(var(--space-3) * -1); }
.article-row:hover { background: color-mix(in srgb, var(--surface) 70%, transparent); }
.article-row__tag { font: 600 var(--fs-caption) var(--font-sans); color: var(--ink-secondary); }
.article-row h3 { font-size: var(--fs-h3); margin-bottom: var(--space-2); }
.article-row .reviewer { display: flex; align-items: center; gap: var(--space-2); font-size: var(--fs-caption); color: var(--ink-secondary); }
.article-row__arrow { width: 44px; height: 44px; border-radius: var(--radius-pill); border: var(--border-strong); display: flex; align-items: center; justify-content: center; transition: background var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out); }
.article-row__arrow svg { width: 16px; height: 16px; transition: transform var(--dur-fast) var(--ease-out); }
.article-row:hover .article-row__arrow { background: var(--accent-digital-deep); border-color: var(--accent-digital-deep); }
.article-row:hover .article-row__arrow svg { transform: translate(1px,-1px); stroke: var(--ink-inverse); color: var(--ink-inverse); }
.badge-icon { width: 18px; height: 18px; border-radius: var(--radius-pill); background: var(--tint-champagne); display: inline-flex; align-items: center; justify-content: center; flex: none; }
.badge-icon svg { width: 10px; height: 10px; }
@media (max-width: 767px) { .article-row { grid-template-columns: 1fr auto; } .article-row__tag { display: none; } .article-row h3 { font-size: var(--fs-h4); } }

/* ===== 12 FAQ — accordionbalken (referentie-patroon) ==================== */
.faq { max-width: 800px; margin-inline: auto; display: flex; flex-direction: column; gap: var(--space-4); }
.faq__item { background: var(--surface); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); overflow: hidden; }
.faq__item > summary { list-style: none; display: flex; align-items: center; justify-content: space-between; gap: var(--space-6); padding: var(--space-5) var(--space-7); cursor: pointer; font: 600 var(--fs-body-l) var(--font-sans); min-height: var(--tap-min); transition: color var(--dur-fast) var(--ease-out); }
.faq__item > summary::-webkit-details-marker { display: none; }
.faq__item > summary:hover { color: var(--accent-digital-deep); }
.faq__icon { position: relative; width: 18px; height: 18px; flex: none; }
.faq__icon::before, .faq__icon::after { content: ""; position: absolute; top: 50%; left: 50%; background: var(--ink); transition: transform var(--dur-base) var(--ease-inout); }
.faq__icon::before { width: 18px; height: 2px; transform: translate(-50%, -50%); }
.faq__icon::after { width: 2px; height: 18px; transform: translate(-50%, -50%); }
.faq__item[open] .faq__icon::after { transform: translate(-50%, -50%) rotate(90deg); }
.faq__answer { padding: 0 var(--space-7) var(--space-6); max-width: 68ch; }

/* ===== 13 CONSULT — donker paneel + formulierkaart ====================== */
.consult-panel { position: relative; overflow: hidden; }
.consult-panel__bg { position: absolute; inset: 0; }
.consult-panel__bg img { width: 100%; height: 100%; object-fit: cover; opacity: .5; }
.consult-panel__bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(115deg, rgba(22,21,26,.88) 30%, rgba(22,21,26,.42) 100%); }
.consult-grid { position: relative; z-index: 2; display: grid; grid-template-columns: 1fr 1fr; gap: clamp(var(--space-8), 5vw, var(--space-16)); align-items: center; }
.consult-copy h2 { color: var(--ink-inverse); margin-bottom: var(--space-5); }
.consult-copy > p { color: rgba(244,241,236,.82); margin-bottom: var(--space-9); max-width: 46ch; }
.consult-how { display: flex; flex-direction: column; gap: var(--space-5); }
.consult-how__item { display: flex; gap: var(--space-4); align-items: flex-start; }
.consult-how__num { flex: none; width: 34px; height: 34px; border-radius: var(--radius-pill); background: rgba(244,241,236,.12); color: var(--ink-inverse); display: flex; align-items: center; justify-content: center; font: 600 var(--fs-caption) var(--font-sans); }
.consult-how__item h4 { color: var(--ink-inverse); margin-bottom: 2px; }
.consult-how__item p { color: rgba(244,241,236,.68); font-size: var(--fs-caption); }
.form-card { background: var(--surface); color: var(--ink); border-radius: var(--radius-lg); padding: clamp(var(--space-7), 4vw, var(--space-10)); box-shadow: var(--shadow-lg); }
.form-card h3 { margin-bottom: var(--space-2); }
.form-card > p { color: var(--ink-secondary); font-size: var(--fs-caption); margin-bottom: var(--space-7); }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); }
.field { display: flex; flex-direction: column; gap: var(--space-2); margin-bottom: var(--space-5); }
.field label { font: 500 var(--fs-caption) var(--font-sans); color: var(--ink); }
.field input, .field select, .field textarea { height: var(--field-height); background: var(--bg); border: var(--border-strong); border-radius: var(--radius-md); padding-inline: var(--space-4); font-size: 16px; color: var(--ink); width: 100%; transition: border-color var(--dur-fast) var(--ease-out); }
.field textarea { height: auto; min-height: 104px; padding-block: var(--space-3); resize: vertical; }
.field input:focus-visible, .field select:focus-visible, .field textarea:focus-visible { border-color: var(--accent-digital-deep); outline: 2px solid var(--focus-ring); outline-offset: 1px; }
.field ::placeholder { color: rgba(22,21,26,.55); }
.field select { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 4.5L6 8l3.5-3.5' fill='none' stroke='%2316151A' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right var(--space-4) center; background-size: 12px; }
.form-consent { display: flex; gap: var(--space-3); align-items: flex-start; margin-bottom: var(--space-6); }
.form-consent input { width: 18px; height: 18px; margin-top: 3px; accent-color: var(--accent-digital-deep); flex: none; }
.form-consent label { font-size: var(--fs-caption); color: var(--ink-secondary); }
.form-card .btn { width: 100%; }
.form-success { display: none; padding: var(--space-4) var(--space-5); background: var(--tint-violet); border-radius: var(--radius-md); font-size: var(--fs-caption); font-weight: 500; margin-top: var(--space-4); }
.form-success.show { display: block; }
.form-error { display: none; padding: var(--space-4) var(--space-5); background: rgba(166, 61, 51, 0.07); border: 1px solid rgba(166, 61, 51, 0.3); border-radius: var(--radius-md); font-size: var(--fs-caption); font-weight: 500; margin-top: var(--space-4); }
.form-error.show { display: block; }
.hp-field { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
@media (max-width: 1023px) { .consult-grid { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 479px)  { .form-row { grid-template-columns: 1fr; } }

/* ===== 14 FOOTER — lichte afgeronde panelen (referentie-patroon) ======== */
.footer { padding: var(--space-4) var(--gutter) var(--space-6); max-width: calc(var(--container-max) + var(--gutter) * 2); margin-inline: auto; }
.footer__panels { display: grid; grid-template-columns: 5fr 7fr; gap: var(--space-4); margin-bottom: var(--space-6); }
.footer__brandpanel { background: var(--tint-champagne); border-radius: var(--radius-xl); padding: clamp(var(--space-8), 4vw, var(--space-12)); display: flex; flex-direction: column; }
.footer__brandpanel .pe-logo__mark { height: 44px; margin-bottom: var(--space-6); }
.footer__brandpanel p { color: var(--ink-secondary); max-width: 34ch; margin-bottom: var(--space-8); }
.footer__cta { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-4); margin-bottom: var(--space-8); }
.socials { display: flex; gap: var(--space-3); margin-top: auto; }
.socials a { width: 44px; height: 44px; border-radius: var(--radius-pill); border: 1px solid rgba(22,21,26,.25); display: flex; align-items: center; justify-content: center; transition: background var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out); }
.socials a:hover { background: var(--surface); border-color: var(--ink); }
.socials svg { width: 16px; height: 16px; }
.footer__linkpanel { background: var(--surface); border-radius: var(--radius-xl); padding: clamp(var(--space-8), 4vw, var(--space-12)); display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-8); }
.footer-col h5 { color: var(--ink-secondary); margin-bottom: var(--space-5); }
.footer-col ul { display: flex; flex-direction: column; gap: var(--space-1); }
.footer-col a { color: var(--ink); text-decoration: none; font-size: var(--fs-body); display: inline-flex; align-items: center; min-height: 36px; }
.footer-col a:hover { color: var(--accent-digital-deep); }
.footer-col .muted { color: var(--ink-secondary); display: inline-flex; align-items: center; min-height: 36px; }
.footer-col .footer-address { display: flex; align-items: flex-start; min-height: 36px; padding-block: var(--space-1); }
.footer-col .footer-address address { font-style: normal; line-height: 1.45; }
.footer__legal { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); flex-wrap: wrap; padding-inline: var(--space-4); }
.footer__legal .links { display: flex; gap: var(--space-6); }
.footer__legal a { color: var(--ink-secondary); text-decoration: none; font-size: var(--fs-caption); min-height: var(--tap-min); display: inline-flex; align-items: center; }
.footer__legal a:hover { color: var(--ink); }
@media (max-width: 1023px) { .footer__panels { grid-template-columns: 1fr; } }
@media (max-width: 639px)  { .footer__linkpanel { grid-template-columns: 1fr; gap: var(--space-6); } }

/* Kliniekadres — gedeeld blok */
.clinic-address { display: inline-flex; align-items: flex-start; gap: var(--space-2); font-style: normal; font-size: var(--fs-body); margin-top: var(--space-6); }
.clinic-address svg { width: 18px; height: 18px; flex: none; margin-top: 3px; color: var(--accent-metal); }
.clinic-address a { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.clinic-address a:hover { color: var(--accent-digital-deep); }
.clinic-address__route { white-space: nowrap; }

/* Actieve navigatie — geldt sitebreed */
.pe-nav__item[aria-current="page"] { color: var(--accent-digital-deep); }
.pe-nav__item[aria-current="page"]::after { transform: scaleX(1); }

/* Breadcrumb — gedeeld paginapatroon */
.breadcrumb { display: flex; align-items: center; gap: var(--space-2); font-size: var(--fs-caption); color: var(--ink-secondary); margin-bottom: var(--space-6); }
.breadcrumb a { color: var(--ink-secondary); text-decoration: none; }
.breadcrumb a:hover { color: var(--accent-digital-deep); }
.breadcrumb .sep { color: var(--line); }

/* Mobiele vangnetten — lange samenstellingen en sjabloon-grids */
@media (max-width: 1023px) {
  .page-hero { grid-template-columns: minmax(0, 1fr) !important; }
  .page-hero > * { min-width: 0; }
  .page-hero__actions { flex-wrap: wrap; }
}
@media (max-width: 639px) {
  h1, h2, h3, .display { -webkit-hyphens: auto; hyphens: auto; }
}

/* ===== Skip-link (toetsenbord): onzichtbaar tot focus ===== */
.skip-link { position: absolute; left: var(--space-4); top: var(--space-4); z-index: 1000; background: var(--ink); color: var(--ink-inverse); padding: var(--space-3) var(--space-6); border-radius: var(--radius-pill); font: 600 var(--fs-body) var(--font-sans); text-decoration: none; transform: translateY(calc(-100% - var(--space-8))); }
.skip-link:focus-visible { transform: none; outline-offset: 2px; }

/* ===== Doelgroep-schakel: voor mannen / voor vrouwen (DHI en Saffier FUE) ===== */
.aud__switch { display: inline-flex; gap: var(--space-1); padding: var(--space-1); border: var(--border-strong); border-radius: var(--radius-pill); background: var(--surface); margin-bottom: var(--space-6); }
html:not(.js) .aud__switch { display: none; }
.aud__tab { min-height: 44px; padding: 0 var(--space-7); border: 0; border-radius: var(--radius-pill); background: transparent; font: 600 var(--fs-body) var(--font-sans); color: var(--ink-secondary); cursor: pointer; transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out); }
.aud__tab:hover { color: var(--ink); }
.aud__tab[aria-selected="true"] { background: var(--ink); color: var(--ink-inverse); }
.aud__panel { background: var(--surface); border: var(--border); border-radius: var(--radius-lg); padding: var(--space-8); box-shadow: var(--shadow-sm); }
.aud__panel[hidden] { display: none; }
.aud__panel > p { color: var(--ink-secondary); max-width: 68ch; margin-bottom: var(--space-5); }
.aud__panel ul { display: flex; flex-direction: column; gap: var(--space-3); }
.aud__panel li { display: flex; gap: var(--space-3); align-items: flex-start; }
.aud__panel .dot { flex: none; width: 6px; height: 6px; border-radius: var(--radius-pill); background: var(--accent-metal); margin-top: 9px; }
html.js .aud__title { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
html:not(.js) .aud__panel + .aud__panel { margin-top: var(--space-6); }

/* Video in media-card (methode-rondgang) */
.media-card video { width: 100%; height: 100%; object-fit: cover; display: block; }