/* ============================================================
   Studio Houtgraaf — stylesheet
   1. Design tokens, ongewijzigd overgenomen uit het
      Studio Houtgraaf Design System (tokens/*.css)
   2. Componentklassen, uitsluitend opgebouwd uit die tokens
   3. Responsive gedrag via media queries (900px / 640px)
   Webfonts: zie de <link> in de HTML (Source Serif 4 + Inter).
   ============================================================ */

/* ---------- tokens/fonts.css ---------- */
/* Studio Houtgraaf webfonts — served from Google Fonts.
   Source Serif 4 = display / wordmark. Inter = UI + body. */

:root{--font-display:"Source Serif 4","Iowan Old Style",Georgia,serif;--font-ui:"Inter","Helvetica Neue",Arial,sans-serif;--font-mono:ui-monospace,"SF Mono",Menlo,monospace}

/* ---------- tokens/colors.css ---------- */
:root{
/* — Warm neutral ramp: paper → plaster → limestone → clay → charcoal brown — */
--warm-25:#FDFBF7;--warm-50:#FAF7F2;--warm-100:#F5F1E9;--warm-150:#EFE9DF;--warm-200:#E8E0D3;--warm-300:#DACEBE;--warm-400:#C2B4A2;--warm-500:#9C8E7F;--warm-600:#7A6E62;--warm-700:#5C5249;--warm-800:#3E352E;--warm-900:#2E2621;--warm-950:#211A16;
/* — Charcoal brown: the principal dark accent — */
--brown-500:#5A4A3C;--brown-600:#463930;--brown-700:#3A2F27;--brown-800:#2E251F;--brown-900:#241C17;
/* — Restrained semantics (desaturated, warm-leaning) — */
--olive-600:#55694F;--olive-50:#EDF0E8;--ochre-600:#8F6A2C;--ochre-50:#F5EEE0;--rust-600:#8C3A2E;--rust-50:#F5E7E3;--slate-600:#4C5A60;--slate-50:#E9EDEE;

/* — Semantic surfaces — */
--bg-page:var(--warm-50);
--bg-alt:var(--warm-100);
--bg-inverse:var(--brown-800);
--surface-card:var(--warm-25);
--surface-sunken:var(--warm-150);
--surface-tonal:var(--warm-200);
--surface-image:var(--warm-200);
--surface-overlay:rgba(46,38,33,.55);
/* — Semantic text — */
--text-strong:var(--warm-950);
--text-body:var(--warm-900);
--text-muted:var(--warm-700);
--text-subtle:var(--warm-600);
--text-on-dark:var(--warm-50);
--text-on-dark-muted:rgba(250,247,242,.72);
--text-link:var(--brown-700);
/* — Borders & rules — */
--border-hairline:rgba(46,38,33,.10);
--border-subtle:var(--warm-200);
--border-default:var(--warm-300);
--border-strong:var(--warm-400);
--border-inverse:rgba(250,247,242,.22);
--border-focus:var(--brown-700);
/* — Interactive — */
--action-primary:var(--brown-700);
--action-primary-hover:var(--brown-600);
--action-primary-active:var(--brown-900);
--action-primary-text:var(--warm-50);
--action-secondary-border:var(--warm-400);
--action-secondary-hover-bg:var(--warm-100);
--action-ghost-hover-bg:rgba(46,38,33,.06);
--action-disabled-bg:var(--warm-200);
--action-disabled-text:var(--warm-500);
--focus-ring:rgba(58,47,39,.35);
/* — Feedback — */
--status-success:var(--olive-600);--status-success-bg:var(--olive-50);
--status-warning:var(--ochre-600);--status-warning-bg:var(--ochre-50);
--status-error:var(--rust-600);--status-error-bg:var(--rust-50);
--status-info:var(--slate-600);--status-info-bg:var(--slate-50);
}
/* Dark inverse section scope — used for footers and full-bleed dark bands. */
[data-theme="inverse"]{--bg-page:var(--brown-800);--bg-alt:var(--brown-900);--surface-card:var(--brown-700);--surface-sunken:var(--brown-900);--surface-tonal:var(--brown-600);--text-strong:var(--warm-25);--text-body:var(--warm-50);--text-muted:rgba(250,247,242,.72);--text-subtle:rgba(250,247,242,.56);--border-subtle:rgba(250,247,242,.16);--border-default:rgba(250,247,242,.24);--border-hairline:rgba(250,247,242,.12);--action-primary:var(--warm-50);--action-primary-hover:var(--warm-100);--action-primary-active:var(--warm-200);--action-primary-text:var(--brown-800);--action-secondary-border:rgba(250,247,242,.32);--action-secondary-hover-bg:rgba(250,247,242,.08);--action-ghost-hover-bg:rgba(250,247,242,.08);--text-link:var(--warm-50);--focus-ring:rgba(250,247,242,.45)}

/* ---------- tokens/typography.css ---------- */
:root{
/* Fluid display / headline scale — editorial serif, tight tracking */
--fs-display:clamp(2.75rem,6vw,5rem); /* @kind font */
--fs-h1:clamp(2.25rem,4.4vw,3.75rem); /* @kind font */
--fs-h2:clamp(1.75rem,3.2vw,2.75rem); /* @kind font */
--fs-h3:clamp(1.5rem,2.4vw,2rem); /* @kind font */
--fs-h4:clamp(1.25rem,1.8vw,1.5rem); /* @kind font */
--fs-h5:1.125rem; /* @kind font */
--fs-h6:1rem; /* @kind font */
/* UI / body scale */
--fs-lead:clamp(1.0625rem,1.4vw,1.25rem); /* @kind font */
--fs-body:1rem; /* @kind font */
--fs-body-sm:.9375rem; /* @kind font */
--fs-small:.875rem; /* @kind font */
--fs-caption:.8125rem; /* @kind font */
--fs-overline:.75rem; /* @kind font */
--fs-button:.9375rem; /* @kind font */
--fs-button-sm:.875rem; /* @kind font */
/* Leading */
--lh-display:1.04; /* @kind font */
--lh-heading:1.14; /* @kind font */
--lh-title:1.25; /* @kind font */
--lh-body:1.65; /* @kind font */
--lh-tight:1.4; /* @kind font */
--lh-ui:1.2; /* @kind font */
/* Tracking */
--ls-display:-0.02em; /* @kind font */
--ls-heading:-0.015em; /* @kind font */
--ls-body:0em; /* @kind font */
--ls-ui:0.005em; /* @kind font */
--ls-overline:0.14em; /* @kind font */
--ls-button:0.01em; /* @kind font */
/* Weights */
--fw-light:300; /* @kind font */
--fw-regular:400; /* @kind font */
--fw-medium:500; /* @kind font */
--fw-semibold:600; /* @kind font */
--fw-serif-regular:400; /* @kind font */
--fw-serif-medium:500; /* @kind font */
--fw-serif-semibold:600; /* @kind font */
/* Measures */
--measure-display:22ch; /* @kind other */
--measure-lead:52ch; /* @kind other */
--measure-body:68ch; /* @kind other */
/* Composed type roles */
--type-display:var(--fw-serif-regular) var(--fs-display)/var(--lh-display) var(--font-display); /* @kind font */
--type-h1:var(--fw-serif-regular) var(--fs-h1)/var(--lh-heading) var(--font-display); /* @kind font */
--type-h2:var(--fw-serif-regular) var(--fs-h2)/var(--lh-heading) var(--font-display); /* @kind font */
--type-h3:var(--fw-serif-medium) var(--fs-h3)/var(--lh-title) var(--font-display); /* @kind font */
--type-h4:var(--fw-serif-medium) var(--fs-h4)/var(--lh-title) var(--font-display); /* @kind font */
--type-h5:var(--fw-medium) var(--fs-h5)/var(--lh-tight) var(--font-ui); /* @kind font */
--type-h6:var(--fw-medium) var(--fs-h6)/var(--lh-tight) var(--font-ui); /* @kind font */
--type-lead:var(--fw-light) var(--fs-lead)/var(--lh-body) var(--font-ui); /* @kind font */
--type-body:var(--fw-regular) var(--fs-body)/var(--lh-body) var(--font-ui); /* @kind font */
--type-small:var(--fw-regular) var(--fs-small)/var(--lh-tight) var(--font-ui); /* @kind font */
--type-caption:var(--fw-regular) var(--fs-caption)/var(--lh-tight) var(--font-ui); /* @kind font */
--type-overline:var(--fw-medium) var(--fs-overline)/1.1 var(--font-ui); /* @kind font */
--type-button:var(--fw-medium) var(--fs-button)/1 var(--font-ui); /* @kind font */
}

/* ---------- tokens/spacing.css ---------- */
:root{
--space-0:0;--space-1:2px;--space-2:4px;--space-3:8px;--space-4:12px;--space-5:16px;--space-6:20px;--space-7:24px;--space-8:32px;--space-9:40px;--space-10:48px;--space-11:64px;--space-12:80px;--space-13:96px;--space-14:120px;--space-15:160px;--space-16:200px;
/* Rhythm aliases */
--gap-inline:var(--space-4);
--gap-stack:var(--space-5);
--gap-card:var(--space-7);
--gap-grid:var(--space-8);
--pad-card:var(--space-7);
--pad-card-lg:var(--space-9);
--section-y:clamp(64px,7vw,120px); /* @kind spacing */
--section-y-lg:clamp(88px,10vw,160px); /* @kind spacing */
--section-y-sm:clamp(40px,5vw,64px); /* @kind spacing */
}

/* ---------- tokens/layout.css ---------- */
:root{
--container-max:1280px;
--container-wide:1440px;
--container-narrow:960px;
--container-text:680px;
--gutter:20px;
--gutter-md:32px;
--gutter-lg:40px;
--grid-columns:12; /* @kind other */
--grid-gap:24px;
--grid-gap-lg:32px;
--nav-height:72px;
--nav-height-condensed:60px;
--bp-sm:480px; /* @kind other */
--bp-md:768px; /* @kind other */
--bp-lg:1024px; /* @kind other */
--bp-xl:1280px; /* @kind other */
--bp-2xl:1440px; /* @kind other */
--aspect-hero:16/9; /* @kind other */
--aspect-feature:4/3; /* @kind other */
--aspect-portrait:3/4; /* @kind other */
--aspect-panorama:21/9; /* @kind other */
--aspect-square:1/1; /* @kind other */
}
@media (min-width:768px){:root{--gutter:var(--gutter-md)}}
@media (min-width:1024px){:root{--gutter:var(--gutter-lg);--grid-gap:var(--grid-gap-lg)}}

/* ---------- tokens/radius.css ---------- */
:root{
--radius-none:0;
--radius-xs:3px;
--radius-sm:6px;
--radius-md:10px;
--radius-lg:14px;
--radius-xl:20px;
--radius-2xl:28px;
--radius-pill:999px;
/* role aliases */
--radius-card:var(--radius-lg);
--radius-image:var(--radius-md);
--radius-image-lg:var(--radius-lg);
--radius-input:var(--radius-sm);
--radius-button:var(--radius-pill);
--radius-tag:var(--radius-pill);
/* border widths */
--border-width:1px; /* @kind other */
--border-width-strong:1.5px; /* @kind other */
--rule-width:1px; /* @kind other */
}

/* ---------- tokens/elevation.css ---------- */
:root{
/* Depth comes from tone, spacing and hairlines. Shadows stay near-invisible. */
--shadow-none:none;
--shadow-hairline:0 0 0 1px var(--border-subtle);
--shadow-xs:0 1px 2px rgba(46,38,33,.04);
--shadow-sm:0 2px 6px rgba(46,38,33,.05);
--shadow-md:0 6px 18px rgba(46,38,33,.06);
--shadow-overlay:0 18px 48px rgba(46,38,33,.14);
--overlay-scrim:linear-gradient(to top,rgba(33,26,22,.62) 0%,rgba(33,26,22,.28) 45%,rgba(33,26,22,0) 100%); /* @kind other */
--overlay-veil:rgba(33,26,22,.32); /* @kind other */
--blur-nav:saturate(120%) blur(12px); /* @kind other */
}

/* ---------- tokens/motion.css ---------- */
:root{
--dur-instant:80ms; /* @kind other */
--dur-fast:140ms; /* @kind other */
--dur-base:200ms; /* @kind other */
--dur-slow:320ms; /* @kind other */
--dur-image:480ms; /* @kind other */
--ease-standard:cubic-bezier(.24,.6,.2,1); /* @kind other */
--ease-out:cubic-bezier(.16,.8,.24,1); /* @kind other */
--ease-in-out:cubic-bezier(.5,0,.4,1); /* @kind other */
--transition-color:color var(--dur-fast) var(--ease-standard),background-color var(--dur-fast) var(--ease-standard),border-color var(--dur-fast) var(--ease-standard); /* @kind other */
--transition-subtle:opacity var(--dur-base) var(--ease-standard),transform var(--dur-base) var(--ease-standard); /* @kind other */
--hover-lift:translateY(-1px); /* @kind other */
--press-scale:scale(.985); /* @kind other */
--hover-image-scale:scale(1.02); /* @kind other */
--hover-opacity:.78; /* @kind other */
}
@media (prefers-reduced-motion:reduce){:root{
--dur-instant:0ms; /* @kind other */
--dur-fast:0ms; /* @kind other */
--dur-base:0ms; /* @kind other */
--dur-slow:0ms; /* @kind other */
--dur-image:0ms; /* @kind other */
--hover-lift:none; /* @kind other */
--press-scale:none; /* @kind other */
--hover-image-scale:none; /* @kind other */
}
*,*::before,*::after{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.001ms !important;scroll-behavior:auto !important}}

/* ---------- tokens/base.css ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg-page);color:var(--text-body);font:var(--type-body);letter-spacing:var(--ls-body);text-wrap:pretty;-webkit-font-smoothing:antialiased}
h1,h2,h3,h4,h5,h6{margin:0;color:var(--text-strong)}
h1{font:var(--type-h1);letter-spacing:var(--ls-heading)}
h2{font:var(--type-h2);letter-spacing:var(--ls-heading)}
h3{font:var(--type-h3);letter-spacing:var(--ls-heading)}
h4{font:var(--type-h4)}
h5{font:var(--type-h5)}
h6{font:var(--type-h6)}
p{margin:0}
img{display:block;max-width:100%}
a{color:var(--text-link);text-decoration-line:underline;text-decoration-thickness:1px;text-underline-offset:.18em;text-decoration-color:var(--border-strong);transition:var(--transition-color),text-decoration-color var(--dur-fast) var(--ease-standard)}
a:hover{text-decoration-color:currentColor}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,[tabindex]:focus-visible{outline:2px solid var(--border-focus);outline-offset:2px;border-radius:var(--radius-xs)}
::selection{background:var(--warm-200);color:var(--text-strong)}
hr{border:0;border-top:var(--rule-width) solid var(--border-subtle);margin:0}
.sh-container{width:100%;max-width:var(--container-max);margin-inline:auto;padding-inline:var(--gutter)}
.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.sh-overline{font:var(--type-overline);letter-spacing:var(--ls-overline);text-transform:uppercase;color:var(--text-subtle)}
.sh-lead{font:var(--type-lead);color:var(--text-muted);max-width:var(--measure-lead)}
.sh-display{font:var(--type-display);letter-spacing:var(--ls-display);color:var(--text-strong);max-width:var(--measure-display)}


/* ============================================================
   STUDIO HOUTGRAAF — componenten
   Opgebouwd uit de tokens hierboven. Geen kleur, maat of
   afstand is hier hard ingevuld: alles verwijst naar var(--…).
   ============================================================ */

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg-page);color:var(--text-body);font-family:var(--font-ui);font-size:var(--fs-body);line-height:var(--lh-body);-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:var(--text-strong)}
a:hover{color:var(--action-primary-hover)}
:focus-visible{outline:2px solid var(--border-focus,var(--action-primary));outline-offset:2px}

/* ---------- layout ---------- */
.container{width:100%;max-width:var(--container-max);margin-inline:auto;padding-inline:var(--gutter)}
.container--wide{max-width:var(--container-wide)}
.container--narrow{max-width:var(--container-narrow)}
.section{padding-block:var(--section-y)}
.section--lg{padding-block:var(--section-y-lg)}
.section--alt{background:var(--bg-alt);border-block:1px solid var(--border-hairline)}
.section--sunken{background:var(--surface-sunken);border-block:1px solid var(--border-hairline)}
.section--rule{border-top:1px solid var(--border-default)}
.stack{display:flex;flex-direction:column}
.stack--sm{gap:var(--space-5)}
.stack--md{gap:var(--space-7)}
.stack--lg{gap:var(--space-11)}

/* editoriale 7/4-split met lege tussenkolom */
.split{display:grid;grid-template-columns:7fr 1fr 4fr;gap:var(--grid-gap);align-items:end}
.split--start{align-items:start}
.split--center{align-items:center}
.split--reverse{grid-template-columns:4fr 1fr 7fr}
.split--media{grid-template-columns:5fr 1fr 6fr}
.split__spacer{display:block}
.grid-2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--grid-gap);align-items:start}
.grid-3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--grid-gap);align-items:start}
.grid-4{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--grid-gap)}
.stack>.btn{align-self:flex-start}
.align-end{align-self:end}

/* ---------- typografie ---------- */
.overline{font:var(--type-overline);letter-spacing:var(--ls-overline);text-transform:uppercase;color:var(--text-subtle)}
.display{margin:0;font:var(--type-display);letter-spacing:var(--ls-display);color:var(--text-strong);max-width:var(--measure-display,22ch);text-wrap:pretty}
h1,.h1{margin:0;font:var(--type-h1);letter-spacing:var(--ls-heading);color:var(--text-strong);text-wrap:pretty}
h2,.h2{margin:0;font:var(--type-h2);letter-spacing:var(--ls-heading);color:var(--text-strong);text-wrap:pretty}
h3,.h3{margin:0;font:var(--type-h3);letter-spacing:var(--ls-heading);color:var(--text-strong);text-wrap:pretty}
h4,.h4{margin:0;font:var(--type-h4);letter-spacing:var(--ls-heading);color:var(--text-strong)}
h5,.h5{margin:0;font:var(--type-h5);color:var(--text-strong)}
p{margin:0}
.lead{font:var(--type-lead);color:var(--text-muted);max-width:var(--measure-lead)}
.body{font:var(--type-body);color:var(--text-body);max-width:var(--measure-body)}
.muted{color:var(--text-muted)}
.small{font:var(--type-small);color:var(--text-muted)}
.caption{font:var(--type-caption);color:var(--text-subtle)}
.quote{margin:0;font:var(--type-h3);letter-spacing:var(--ls-heading);color:var(--text-strong);max-width:34ch}

/* ---------- icoon (Lucide, gemaskeerd op currentColor) ---------- */
.icon{display:inline-block;width:var(--icon-size,20px);height:var(--icon-size,20px);flex:none;background:currentColor;
  -webkit-mask:var(--icon) center/contain no-repeat;mask:var(--icon) center/contain no-repeat}
.icon--lg{--icon-size:24px}

/* ---------- knoppen ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--space-3,8px);
  font-family:var(--font-ui);font-size:var(--fs-button,15px);font-weight:var(--fw-medium);letter-spacing:.01em;line-height:1;
  min-height:46px;padding:13px 26px;border:1px solid transparent;border-radius:var(--radius-button);
  text-decoration:none;white-space:nowrap;cursor:pointer;transition:background var(--dur-fast) var(--ease-standard),color var(--dur-fast) var(--ease-standard),border-color var(--dur-fast) var(--ease-standard),transform var(--dur-quick,80ms) var(--ease-standard)}
.btn:active{transform:scale(.985)}
.btn--lg{min-height:56px;padding:17px 34px;font-size:16px}
.btn--sm{min-height:36px;padding:9px 18px;font-size:14px}
.btn--primary{background:var(--action-primary);color:var(--action-primary-text)}
.btn--primary:hover{background:var(--action-primary-hover);color:var(--action-primary-text)}
.btn--secondary{background:transparent;border-color:var(--border-strong);color:var(--text-strong)}
.btn--secondary:hover{background:var(--bg-alt);color:var(--text-strong)}
.btn--text{min-height:0;padding:0;border:0;background:none;color:var(--text-strong);
  text-decoration:underline;text-decoration-color:var(--border-strong);text-underline-offset:4px}
.btn--text:hover{text-decoration-color:currentColor}
.btn .icon{--icon-size:18px;transition:transform var(--dur-fast) var(--ease-standard)}
.btn:hover .icon--next{transform:translateX(2px)}
.btn:hover .icon--prev{transform:translateX(-2px)}
[data-theme="inverse"] .btn--secondary{border-color:rgba(250,247,242,.4);color:var(--text-on-dark)}
[data-theme="inverse"] .btn--secondary:hover{background:rgba(250,247,242,.1);color:var(--text-on-dark)}
.actions{display:flex;align-items:center;gap:var(--space-7)}

/* ---------- tag ---------- */
.tag{display:inline-flex;align-items:center;min-height:28px;padding:4px 12px;border-radius:var(--radius-button);
  font:var(--type-caption);font-weight:var(--fw-medium);color:var(--text-body);border:1px solid var(--border-default);background:transparent;text-decoration:none}
.tag--solid{background:var(--action-primary);border-color:var(--action-primary);color:var(--action-primary-text)}

/* ============================================================
   Tarieven — prijsmatrix
   Kolommen = pakketten, rijen = woonoppervlakte. Structuur komt
   uit hairlines en tonale vlakken; geen kaders, geen schaduw.
   Overgenomen 1-op-1 uit design-html/studio-houtgraaf.css.
   ============================================================ */

.price-table{width:100%;border-collapse:collapse;text-align:left}
.price-table caption{caption-side:top;text-align:left;font:var(--type-caption);color:var(--text-subtle);padding-bottom:var(--space-5)}
.price-table th,.price-table td{padding:var(--space-7) var(--space-7);vertical-align:top;border-bottom:1px solid var(--border-default)}
.price-table thead th{border-bottom:1px solid var(--border-strong);padding-top:var(--space-7)}
.price-table tbody tr:last-child th,.price-table tbody tr:last-child td{border-bottom:1px solid var(--border-strong)}
.price-table :is(th,td):first-child{padding-left:0}
.price-table :is(th,td):last-child{padding-right:0}

/* pakketkop */
.pkg{display:flex;flex-direction:column;gap:10px}
.pkg__name{font:var(--type-h4);letter-spacing:var(--ls-heading);color:var(--text-strong)}
.pkg__desc{font:var(--type-caption);color:var(--text-muted);font-weight:var(--fw-regular,400);max-width:26ch}
.pkg__list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}
.pkg__list li{display:flex;align-items:flex-start;gap:8px;font:var(--type-caption);color:var(--text-muted)}
.pkg__list .icon{--icon-size:14px;margin-top:3px;color:var(--text-subtle)}

/* oppervlakte-rijkop */
.price-table tbody th{font:var(--type-h5);color:var(--text-strong);white-space:nowrap}
.price-table tbody th small{display:block;font:var(--type-caption);color:var(--text-subtle);font-weight:var(--fw-regular,400)}

/* prijs */
.price{font-family:var(--font-display);font-size:var(--fs-h3);line-height:1.1;letter-spacing:var(--ls-heading);color:var(--text-strong);font-weight:var(--fw-regular,400)}
.price__note{display:block;font:var(--type-caption);color:var(--text-subtle);margin-top:6px}

/* uitgelichte kolom: tonaal vlak, geen kader */
.price-table .col--feature{background:var(--surface-sunken)}
.price-table thead .col--feature{border-radius:var(--radius-card) var(--radius-card) 0 0}
/* label boven het tonale vlak, zodat het niet tegen de rand staat */
.price-table__flags td{border:0;padding:0 var(--space-7) 10px}
.price-table__flags .col--feature{background:transparent;text-align:center}
.price-table .col--feature{padding-left:var(--space-7)!important;padding-right:var(--space-7)!important}
.pkg__flag{display:inline-flex;font:var(--type-caption);font-weight:var(--fw-medium);
  letter-spacing:var(--ls-overline);text-transform:uppercase;color:var(--text-muted)}

/* voorwaarden onder de tabel */
.terms{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--grid-gap)}
.terms__item{display:flex;flex-direction:column;gap:8px;border-top:1px solid var(--border-default);padding-top:var(--space-7)}

/* mobiel: eigen opbouw i.p.v. omgeklapte tabel — blok per pakket met
   de drie prijzen per oppervlakte als hairline-rijen */
.price-stack{display:none}

/* ---------- beeld ---------- */
.figure{margin:0;display:flex;flex-direction:column;gap:var(--space-3,8px)}
.figure__frame{position:relative;overflow:hidden;border-radius:var(--radius-image);background:var(--surface-image)}
.figure__frame::after{content:"";position:absolute;inset:0;border-radius:inherit;box-shadow:inset 0 0 0 1px var(--border-hairline);pointer-events:none}
.figure--lg .figure__frame{border-radius:var(--radius-card)}
.figure__frame img{width:100%;height:100%;object-fit:cover;transition:transform var(--dur-image,480ms) var(--ease-standard)}
.figure figcaption{font:var(--type-caption);color:var(--text-subtle)}
.ratio-21-9{aspect-ratio:21/9}
.ratio-16-9{aspect-ratio:16/9}
.ratio-4-3{aspect-ratio:4/3}
.ratio-1-1{aspect-ratio:1/1}
.ratio-3-4{aspect-ratio:3/4}
/* placeholder tot de definitieve foto er is */
.figure__frame--placeholder{display:flex;align-items:center;justify-content:center;padding:var(--space-7)}
.figure__frame--placeholder span{font:var(--type-caption);color:var(--text-subtle);text-align:center;max-width:32ch}

/* ---------- projectkaart ---------- */
.card{display:flex;flex-direction:column;gap:var(--space-5);text-decoration:none;color:inherit;
  transition:transform var(--dur-base) var(--ease-standard)}
.card:hover{transform:translateY(-1px);color:inherit}
.card:hover .figure__frame img{transform:scale(1.02)}
.card__meta{font:var(--type-overline);letter-spacing:var(--ls-overline);text-transform:uppercase;color:var(--text-subtle)}
.card__title{margin:0;font:var(--type-h4);letter-spacing:var(--ls-heading);color:var(--text-strong)}
.card__text{font:var(--type-body);color:var(--text-muted)}
.card__action{align-self:flex-start;font:var(--type-small);font-weight:var(--fw-medium);color:var(--text-strong);
  border-bottom:1px solid var(--border-strong);padding-bottom:2px}
.card:hover .card__action{border-bottom-color:currentColor}

/* ---------- header / navigatie ---------- */
.site-header{position:sticky;top:0;z-index:50;background:rgba(250,247,242,.82);backdrop-filter:blur(12px);
  border-bottom:1px solid var(--border-hairline)}
/* Bug: zonder deze regel telt de sticky offset niet mee met de vaste WP-adminbar
   (fixed, 32px / 46px op smalle schermen, z-index 99999 boven onze header).
   Resultaat: de header schuift eerst die hoogte omhoog vóór hij "vastklikt",
   en klikt dan half achter de adminbar. Door top mee te geven aan de hoogte
   van de adminbar plakt de header direct, vloeiend, meteen onder de balk. */
body.admin-bar .site-header{top:var(--wp-admin--admin-bar--height,32px)}
.site-header__inner{display:flex;align-items:center;justify-content:space-between;gap:var(--space-8);min-height:76px}
.wordmark{display:inline-block;color:var(--text-strong)}
.wordmark svg,.wordmark img{height:16px;width:auto;display:block}
.site-nav{display:flex;align-items:center;gap:var(--space-8)}
.nav-list{display:flex;align-items:center;gap:var(--space-8);list-style:none;margin:0;padding:0}
.nav-link{font:var(--type-small);font-weight:var(--fw-medium);color:var(--text-muted);text-decoration:none;
  padding-block:var(--space-2,4px);border-bottom:var(--rule-width) solid transparent;transition:var(--transition-color)}
.nav-link:hover{color:var(--text-strong);border-bottom-color:var(--border-strong)}
.nav-link[aria-current="page"]{color:var(--text-strong);border-bottom-color:var(--border-strong)}
.nav-state{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}
.nav-toggle{display:none;align-items:center;justify-content:center;width:44px;height:44px;
  background:none;border:1px solid var(--border-default);border-radius:var(--radius-button);color:var(--text-strong);cursor:pointer}

/* ---------- formulier ---------- */
.form-card{background:var(--surface-card);border:1px solid var(--border-default);border-radius:var(--radius-card);padding:var(--space-10,48px)}
.field{display:flex;flex-direction:column;gap:6px}
.field__label{font:var(--type-small);font-weight:var(--fw-medium);color:var(--text-strong)}
.field__label .req{color:var(--status-error)}
.field__hint{font:var(--type-caption);color:var(--text-subtle)}
.input,.select,.textarea{width:100%;font-family:var(--font-ui);font-size:var(--fs-body);line-height:1.4;color:var(--text-body);
  background:var(--bg-page);border:1px solid var(--border-default);border-radius:var(--radius-sm);padding:12px 14px;
  transition:border-color var(--dur-fast) var(--ease-standard),box-shadow var(--dur-fast) var(--ease-standard)}
.textarea{resize:vertical;min-height:130px}
.input::placeholder,.textarea::placeholder{color:var(--text-subtle)}
.input:focus,.select:focus,.textarea:focus{outline:none;border-color:var(--action-primary);box-shadow:0 0 0 3px var(--focus-ring,rgba(58,47,39,.16))}
.select{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%235C5249' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 14px center;background-size:18px;padding-right:44px}
.checkbox{display:flex;align-items:flex-start;gap:12px}
.checkbox input{width:18px;height:18px;margin:2px 0 0;accent-color:var(--action-primary);border-radius:var(--radius-xs,3px)}
.form-actions{display:flex;align-items:center;gap:var(--space-7);border-top:1px solid var(--border-subtle);padding-top:var(--space-8)}

/* ---------- lijsten ---------- */
.rule-list{display:flex;flex-direction:column;border-bottom:1px solid var(--border-default)}
.rule-list__item{border-top:1px solid var(--border-default);padding-block:var(--space-7);display:flex;flex-direction:column;gap:var(--space-2,8px)}
.step{display:grid;grid-template-columns:48px 1fr;gap:var(--space-7);align-items:start}
.step__num{font:var(--type-h4);color:var(--text-subtle)}
.meta-row{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--grid-gap);
  border-block:1px solid var(--border-default);padding-block:var(--space-7)}
.meta-item{display:flex;flex-direction:column;gap:6px}
.meta-item__value{font:var(--type-body);color:var(--text-body)}
.filter-bar{display:flex;align-items:center;justify-content:space-between;gap:var(--space-7);
  border-block:1px solid var(--border-default);padding-block:20px}
.filter-bar__tags{display:flex;flex-wrap:wrap;gap:8px}
.stat{display:flex;flex-direction:column;gap:8px}
.stat__value{font:var(--type-h2);letter-spacing:var(--ls-heading);color:var(--text-strong)}
.aside-card{background:var(--surface-sunken);border-radius:var(--radius-card);padding:var(--space-8);display:flex;flex-direction:column;gap:20px}
.contact-line{display:flex;align-items:flex-start;gap:12px;color:var(--text-body);text-decoration:none;font:var(--type-body)}
.contact-line:hover{color:var(--action-primary-hover)}

/* ---------- entry / rich tekst (WYSIWYG-pagina's, bv. Algemene Voorwaarden) ----------
   Alle typografie, regelafstand, marges en kleuren komen uitsluitend uit de
   tokens hierboven, zodat elke tekstpagina automatisch in de huisstijl valt. */
.entry{max-width:var(--measure-body)}
.entry-title{margin:0}
.entry-content{margin-top:var(--space-9);font:var(--type-body);color:var(--text-body)}

/* Verticaal ritme tussen alle directe onderdelen (paragrafen, lijsten, koppen, …) */
.entry-content>*+*{margin-top:var(--space-6)}
.entry-content>*+h2{margin-top:var(--space-11)}
.entry-content>*+h3{margin-top:var(--space-9)}
.entry-content>*+h4{margin-top:var(--space-8)}
.entry-content>h2+*,.entry-content>h3+*,.entry-content>h4+*{margin-top:var(--space-5)}

/* Vetgedrukte "artikel"-paragrafen die als tussenkopje fungeren (nog geen
   echte H2/H3-blokken): iets meer lucht ervoor, zodat de secties losser
   van elkaar staan. Werkt niet meer zodra dit echte koppen worden — dan
   nemen de h2/h3-ritmeregels hierboven het vanzelf over. */
.entry-content>p:has(>strong:only-child):not(:first-child){margin-top:var(--space-8)}

.entry-content p{margin:0;font:var(--type-body);color:var(--text-body)}
.entry-content h2{margin:0;font:var(--type-h2);letter-spacing:var(--ls-heading);color:var(--text-strong);text-wrap:pretty}
.entry-content h3{margin:0;font:var(--type-h3);letter-spacing:var(--ls-heading);color:var(--text-strong);text-wrap:pretty}
.entry-content h4{margin:0;font:var(--type-h4);color:var(--text-strong)}
.entry-content h5{margin:0;font:var(--type-h5);color:var(--text-strong)}
.entry-content h6{margin:0;font:var(--type-h6);color:var(--text-strong)}
.entry-content strong,.entry-content b{font-weight:var(--fw-semibold);color:var(--text-strong)}
.entry-content em,.entry-content i{font-style:italic}
.entry-content a{color:var(--text-link)}

.entry-content ul,.entry-content ol{margin:0;padding-left:1.15em;display:flex;flex-direction:column;gap:var(--space-4)}
.entry-content ul{list-style:disc}
.entry-content ol{list-style:decimal}
.entry-content ul ul,.entry-content ol ul{list-style:circle}
.entry-content li{font:var(--type-body);color:var(--text-body);padding-left:var(--space-2)}
.entry-content li::marker{color:var(--text-subtle)}
.entry-content li>ul,.entry-content li>ol{margin-top:var(--space-3)}

.entry-content blockquote{margin:0;padding-left:var(--space-7);border-left:2px solid var(--border-strong);font:var(--type-lead);color:var(--text-muted)}
.entry-content hr{border:0;border-top:var(--rule-width) solid var(--border-subtle);margin-block:var(--space-9)}
.entry-content img{border-radius:var(--radius-image)}
.entry-content figcaption{font:var(--type-caption);color:var(--text-subtle);margin-top:var(--space-3)}
.entry-content table{width:100%;border-collapse:collapse;font:var(--type-body-sm,var(--type-body))}
.entry-content th,.entry-content td{padding:var(--space-4) var(--space-5);border-bottom:1px solid var(--border-default);text-align:left;vertical-align:top}
.entry-content th{font-weight:var(--fw-semibold);color:var(--text-strong)}

@media (max-width:640px){
  .entry-content{margin-top:var(--space-7)}
  .entry-content>*+h2{margin-top:var(--space-9)}
  .entry-content>*+h3{margin-top:var(--space-8)}
}

/* ---------- footer ---------- */
.site-footer{background:var(--bg-inverse);color:var(--text-on-dark)}
.site-footer h2,.site-footer .h1{color:var(--text-on-dark)}
.site-footer .lead{color:var(--text-on-dark);opacity:.78}
.site-footer__cta{display:grid;grid-template-columns:7fr 1fr 4fr;gap:var(--grid-gap);align-items:end;
  padding-top:var(--section-y-lg);padding-bottom:var(--space-10,48px)}
.site-footer__aside{display:flex;flex-direction:column;gap:var(--space-5);align-items:flex-end;text-align:right}
.site-footer__note{font:var(--type-caption);color:var(--text-on-dark);opacity:.7}
.site-footer__bar{display:flex;justify-content:space-between;align-items:center;gap:var(--space-8);
  border-top:1px solid rgba(250,247,242,.16);padding-block:40px 56px}
.footer-legal-link{color:inherit;text-decoration-color:rgba(250,247,242,.4);
  text-underline-offset:.18em;transition:var(--transition-color),text-decoration-color var(--dur-fast) var(--ease-standard)}
.footer-legal-link:hover{color:var(--text-on-dark);text-decoration-color:currentColor}

/* ============================================================
   RESPONSIVE — twee breekpunten, conform het design system
   ≤900px  tablet: split stapelt, nav klapt in
   ≤640px  mobiel: alles één kolom
   ============================================================ */

@media (max-width:1100px){
  .site-header__inner .nav-cta{display:none}
}

@media (max-width:900px){
  .split,.split--reverse{grid-template-columns:minmax(0,1fr);align-items:start}
  .split--media{grid-template-columns:4fr 1fr 7fr;align-items:start}
  .split__spacer{display:none}
  .split--media .split__spacer{display:block}
  .grid-4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .site-footer__cta{grid-template-columns:minmax(0,1fr);gap:var(--space-8)}
  .site-footer__aside{align-items:flex-start;text-align:left}
  .meta-row{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:var(--space-7)}
  .price-table th,.price-table td{padding:var(--space-5) var(--space-5)}
  .price-table .col--feature{padding-left:var(--space-5)!important;padding-right:var(--space-5)!important}
  .pkg__name{font:var(--type-h5)}
  .terms{grid-template-columns:minmax(0,1fr)}
}

@media (max-width:640px){
  .site-nav .nav-list,.site-header__inner .nav-cta{display:none}
  .nav-toggle{display:inline-flex}
  .site-nav:has(.nav-state:checked) .nav-list{display:flex;position:absolute;left:0;right:0;top:100%;
    flex-direction:column;align-items:flex-start;gap:var(--space-5);
    background:var(--bg-page);border-bottom:1px solid var(--border-default);padding:var(--space-7) var(--gutter)}
  .grid-2,.grid-3,.grid-4,.split--media{grid-template-columns:minmax(0,1fr)}
  .split--media .split__spacer{display:none}
  .meta-row{grid-template-columns:minmax(0,1fr)}
  .align-end{align-self:start}
  .actions,.form-actions,.filter-bar{flex-direction:column;align-items:stretch;gap:var(--space-5)}
  .actions .btn--primary,.form-actions .btn--primary{width:100%}
  .actions .btn--text,.form-actions span,.filter-bar>span{align-self:flex-start;text-align:left}
  .form-card{padding:var(--space-7)}
  .step{grid-template-columns:40px 1fr;gap:var(--space-5)}
  .quote,.display,h1,h2{max-width:none}

  .price-table{display:none}
  .price-stack{display:flex;flex-direction:column;gap:var(--space-8)}
  .price-stack__note{font:var(--type-caption);color:var(--text-subtle)}

  .price-pkg{display:flex;flex-direction:column;gap:var(--space-5);
    border-top:1px solid var(--border-strong);padding-top:var(--space-7)}
  .price-pkg--feature{background:var(--surface-sunken);border-top:0;border-radius:var(--radius-card);
    padding:var(--space-7)}
  .price-pkg__head{display:flex;flex-direction:column;gap:8px}
  .price-pkg__rows{display:flex;flex-direction:column}
  .price-pkg__row{display:flex;align-items:baseline;justify-content:space-between;gap:var(--space-5);
    border-top:1px solid var(--border-default);padding-block:14px}
  .price-pkg__row:first-child{border-top:1px solid var(--border-default)}
  .price-pkg__band{font:var(--type-small);color:var(--text-muted)}
  .price-pkg__price{font-family:var(--font-display);font-size:var(--fs-h4);line-height:1.1;
    letter-spacing:var(--ls-heading);color:var(--text-strong);white-space:nowrap}
  .price-pkg .pkg__list{gap:8px}
}

@media print{
  .site-header{position:static}
}