/* ═══════════════════════════════════════════════════════
   SFW — Frontend base styles
   Edit freely — no build step required.
   ═══════════════════════════════════════════════════════ */

/* ── Design tokens ──────────────────────────────────────
   Override per site via Admin → Settings → Design.
   The admin injects :root { } overrides in the layout head.
   ──────────────────────────────────────────────────── */
:root {
    /* Brand — sampled from logo druksnel.nl3.png */
    --color-primary:      #1e82be;   /* druksnel.nl text blue */
    --color-primary-dark: #1670a8;

    /* Text */
    --color-text:         #333333;
    --color-text-muted:   #6b7280;
    --color-heading:      #505046;   /* VAN DER LOUW warm dark gray */

    /* Backgrounds */
    --color-bg:           #ffffff;
    --color-bg-light:     #f6f8fa;
    --color-bg-dark:      #1e3a4f;
    --color-bg-accent:    #1e82be;
    --color-masthead:     #1a5778;

    /* UI */
    --color-border:       #e2e8f0;
    --color-link:         var(--color-primary);
    --color-link-hover:   var(--color-primary-dark);

    /* Typography */
    --font-body:      'Open Sans', system-ui, sans-serif;
    --font-heading:   inherit;
    --font-size-base: 15px;
    --font-scale:     1.25;

    /* Spacing */
    --spacing-section: 3.5rem;
    --spacing-x:       1.5rem;

    /* Layout */
    --container:       72rem;
    --container-wide:  90rem;

    /* UI details */
    --radius: 0.25rem;
    --shadow: 0 1px 3px rgba(0,0,0,.08);
    --speed:  0.18s;
}

/* ── Reset ──────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; font-family: var(--font-body); font-size: var(--font-size-base, 16px); font-weight: var(--font-weight-body, 400); line-height: var(--line-height-body, 1.65); letter-spacing: var(--letter-spacing-body, normal); -webkit-font-smoothing: antialiased; color: var(--color-text); background: var(--color-bg); }
h1, h2, h3, h4, h5, h6 { font-family: var(--font-heading); font-weight: var(--font-weight-heading, 300); }
img, video { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
.richtext a { color: var(--color-link); text-decoration: underline; }
.richtext a:hover { color: var(--color-link-hover); }
[x-cloak] { display: none !important; }

/* ── Section / section-inner ────────────────────────────
   Every block outputs content only.
   blocks() wraps it in section + section-inner.
   ──────────────────────────────────────────────────── */
.section {
    width: 100%;
    padding: var(--spacing-section) var(--spacing-x);
}
.section-inner {
    max-width: var(--container);
    margin: 0 auto;
}
.section-inner--wide { max-width: var(--container-wide); }
.section-inner--full { max-width: none; }

/* Background modifiers */
.section--light  { background: var(--color-bg-light); }
.section--dark   { background: var(--color-bg-dark);  color: #f5f5f4; }
.section--accent { background: var(--color-bg-accent); color: #ffffff; }
.section--dark  a, .section--accent a { color: inherit; }
.section--dark  .richtext a, .section--accent .richtext a { color: #a8d5ab; }

/* Padding modifiers */
.section--sm   { padding-block: calc(var(--spacing-section) * 0.5); }
.section--lg   { padding-block: calc(var(--spacing-section) * 1.5); }
.section--none { padding-block: 0; }

/* Alignment */
.section--center { text-align: center; }

/* Transitions — .visible added by IntersectionObserver in app.js */
.section--fade     { opacity: 0; transition: opacity 0.6s ease; }
.section--slide-up { opacity: 0; transform: translateY(2rem); transition: opacity 0.5s ease, transform 0.5s ease; }
.section--fade.visible,
.section--slide-up.visible { opacity: 1; transform: none; }

/* ── Scroll animations (animations.js) ──────────────── */
html { scroll-behavior: smooth; scroll-padding-top: 64px; }
[data-anim]:not([data-anim-done]) { opacity: 0; }

/* ── Back to top ─────────────────────────────────────── */
.back-to-top { position: fixed; bottom: 2rem; right: 2rem; z-index: 900; display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; background: var(--color-primary, #2563eb); color: #fff; border: none; border-radius: 0; cursor: pointer; opacity: 0; transform: translateY(12px); transition: opacity 0.3s ease, transform 0.3s ease, background var(--speed, 0.2s) ease; pointer-events: none; box-shadow: 0 4px 16px rgba(0,0,0,0.15); }
.back-to-top.is-visible { opacity: 1; transform: translateY(0); pointer-events: auto; }
.back-to-top:hover { background: var(--color-primary-dark, #1d4ed8); }
.back-to-top--rounded { border-radius: var(--radius, 0.375rem); }
.back-to-top--circle  { border-radius: 50%; }

/* ── Site header ────────────────────────────────────── */
.site-header {
    position: sticky; top: 0; z-index: 50;
    background: var(--nav-bg, var(--color-bg));
    border-bottom: 1px solid var(--nav-border, var(--color-border));
}
.site-header--static { position: static; }
/* Seamless header — merges with hero below (header_hero_merge toggle) */
.site-header--dark { background: var(--color-masthead, #1a5778) !important; border-bottom-color: transparent !important; }
.site-header--dark .header-topbar { background: rgba(0,0,0,0.15); border-bottom-color: rgba(255,255,255,0.12); }
.site-header--dark .header-topbar-brand { color: rgba(255,255,255,0.9); }
.site-header--dark .header-topbar-contact { color: rgba(255,255,255,0.65); }
.site-header--dark .header-topbar-contact:hover { color: #fff; }
.site-header--dark .header-topbar-contact svg { color: rgba(255,255,255,0.85); }
.site-header--dark .site-logo span { color: #fff; }
.site-header--dark .nav-link { color: rgba(255,255,255,0.78); }
.site-header--dark .nav-link:hover { color: #fff; }
.site-header--dark .nav-link.active { color: #fff; }
.site-header--dark .mobile-toggle { color: rgba(255,255,255,0.8); }
.site-header--dark .mobile-toggle:hover { color: #fff; }
.site-header--dark .nav-search { color: rgba(255,255,255,0.7); }
.site-header--dark .nav-search:hover { color: #fff; }
.site-header--dark .mobile-nav { background: var(--color-masthead, #1a5778); border-top-color: rgba(255,255,255,0.12); }
.site-header--dark .mobile-nav .nav-link { color: rgba(255,255,255,0.78); }
.site-header--dark .mobile-nav .nav-link:hover,
.site-header--dark .mobile-nav .nav-link.active { color: #fff; }
.site-header--dark .nav-divider { background: rgba(255,255,255,0.2); }
.header-topbar { background: var(--color-bg-light); border-bottom: 1px solid var(--color-border); }
.header-topbar-inner { max-width: var(--container-wide); margin: 0 auto; padding: 0.5rem var(--spacing-x); display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.header-topbar-brand { font-size: 15px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-heading); text-decoration: none; white-space: nowrap; transition: opacity var(--speed); }
.header-topbar-brand:hover { opacity: 0.75; }
.header-topbar-logo { height: 32px; width: auto; display: block; }
.header-topbar-right { display: flex; align-items: center; gap: 1.5rem; flex-shrink: 0; }
.header-topbar-contact { display: flex; align-items: center; gap: 0.35rem; font-size: var(--topbar-right-font-size, 12px); color: var(--color-text-muted); text-decoration: none; white-space: nowrap; transition: color var(--speed); }
.header-topbar-contact svg { flex-shrink: 0; color: var(--color-primary); }
.header-topbar-contact:hover { color: var(--color-primary); }
@media (max-width: 600px) { .header-topbar-brand { display: none; } .header-topbar-inner { justify-content: flex-end; } }
.site-header-inner {
    max-width: var(--container-wide); margin: 0 auto; padding: var(--nav-padding, 0) var(--spacing-x);
    min-height: 4rem; display: flex; align-items: center;
    justify-content: space-between; gap: 2rem;
}
.site-logo { flex-shrink: 0; transition: opacity var(--speed); }
.site-logo:hover { opacity: 0.7; }
.site-logo span { font-size: 13px; font-weight: 500; letter-spacing: 0.15em; text-transform: uppercase; color: var(--color-heading); }
.site-logo img  { height: 48px; width: auto; display: block; }
.site-nav { display: none; flex: 1; align-items: center; gap: var(--nav-gap, 2rem); justify-content: var(--nav-align, center); }
@media (min-width: 768px) { .site-nav { display: flex; } }
.nav-link { font-size: var(--nav-link-size, 11px); font-weight: var(--nav-link-weight, 500); font-family: var(--nav-link-font, inherit); text-transform: var(--nav-link-transform, uppercase); letter-spacing: var(--nav-link-spacing, 0.2em); color: var(--nav-link, var(--color-text-muted)); white-space: nowrap; transition: color var(--speed); }
.nav-link:hover { color: var(--nav-link-hover, var(--nav-link-active, var(--color-heading))); }
.nav-link.active { color: var(--nav-link-active, var(--color-heading)); }
.nav-search { flex-shrink: 0; color: var(--color-text-muted); transition: color var(--speed); }
.nav-search:hover { color: var(--color-heading); }
.mobile-toggle { display: block; background: none; border: none; cursor: pointer; padding: 0.25rem; margin-right: -0.25rem; color: var(--color-text-muted); transition: color var(--speed); }
.mobile-toggle:hover { color: var(--color-heading); }
@media (min-width: 768px) { .mobile-toggle { display: none; } }
.mobile-nav { border-top: 1px solid var(--color-border); background: var(--color-bg); }
.mobile-nav-inner { max-width: var(--container-wide); margin: 0 auto; padding: 1.25rem var(--spacing-x); display: flex; flex-direction: column; gap: 1.25rem; }
.nav-link--child { padding-left: 1rem; opacity: 0.7; font-size: 10px; }
.nav-item { position: relative; display: flex; align-items: center; }
.nav-dropdown { position: absolute; top: calc(100% + 1px); left: 50%; transform: translateX(-50%); min-width: 160px; background: var(--color-bg); border: 1px solid var(--color-border); box-shadow: 0 4px 16px rgba(0,0,0,0.08); z-index: 100; padding: 0.5rem 0; }
.nav-dropdown a { display: block; padding: 0.5rem 1.25rem; font-size: 11px; font-weight: 500; text-transform: uppercase; letter-spacing: 0.2em; color: var(--color-text-muted); white-space: nowrap; transition: color var(--speed); }
.nav-dropdown a:hover { color: var(--color-heading); }
/* Nav variants */
.site-nav--vertical { flex-direction: column; align-items: flex-start; gap: 0.75rem; }
.site-nav--pills .nav-link, .site-nav--pills-outline .nav-link { display: inline-flex; align-items: center; border-radius: var(--nav-pill-radius, 0.375rem); padding: var(--nav-pill-py, 0.35rem) var(--nav-pill-px, 0.75rem); background: var(--nav-pill-bg-inactive, transparent); }
.site-nav--pills .nav-link:hover { background: var(--nav-pill-bg-hover, var(--nav-pill-bg, var(--nav-link-active, var(--color-primary)))); color: #fff; }
.site-nav--pills .nav-link.active { background: var(--nav-pill-bg, var(--nav-link-active, var(--color-primary))); color: #fff; }
.site-nav--pills-outline .nav-link { border: 1px solid var(--nav-pill-border, var(--nav-link, var(--color-border))); }
.site-nav--pills-outline .nav-link:hover { background: var(--nav-pill-bg-hover, var(--nav-pill-bg, var(--nav-link-active, var(--color-primary)))); border-color: var(--nav-pill-border-hover, var(--nav-pill-bg-hover, var(--nav-pill-bg, var(--nav-link-active, var(--color-primary))))); color: #fff; }
.site-nav--pills-outline .nav-link.active { background: var(--nav-pill-bg, var(--nav-link-active, var(--color-primary))); border-color: var(--nav-pill-border-active, var(--nav-pill-bg, var(--nav-link-active, var(--color-primary)))); color: #fff; }
/* Block-level inline menu — always visible (not hidden on mobile like the header nav) */
.block-menu { display: flex; flex-wrap: wrap; }
.block-menu.site-nav--inline { gap: 1.5rem; }
.site-nav--inline .nav-dropdown { top: calc(100% + 4px); }
/* Divider and label items */
.nav-divider { display: inline-block; width: 1px; height: 1.25rem; background: var(--color-border); margin: 0 0.25rem; vertical-align: middle; flex-shrink: 0; }
.site-nav--vertical .nav-divider { width: 100%; height: 1px; margin: 0.25rem 0; }
.nav-group-label { font-size: 10px; text-transform: uppercase; letter-spacing: 0.15em; color: var(--color-text-muted); cursor: default; }
.mobile-nav-divider { border: none; border-top: 1px solid var(--color-border); margin: 0; }
.mobile-nav-label { font-size: 10px; text-transform: uppercase; letter-spacing: 0.15em; color: var(--color-text-muted); }
.header-cta-btn { display: none; }
@media (min-width: 768px) { .header-cta-btn { display: inline-block; } }

/* ── Site footer ────────────────────────────────────── */
.site-footer { background: var(--color-masthead, #1a5778); border-top: 3px solid #14425c; color: rgba(255,255,255,0.95); }
.site-footer-inner { max-width: var(--container-wide); margin: 0 auto; padding: 3rem var(--spacing-x); display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 3rem; align-items: start; }
@media (max-width: 767px) { .site-footer-inner { grid-template-columns: 1fr; gap: 2rem; } }
@media (min-width: 768px) and (max-width: 1023px) { .site-footer-inner { grid-template-columns: 1fr 1fr; } }
.footer-col-title { font-size: 11px; text-transform: uppercase; letter-spacing: 0.15em; color: #ffffff; font-weight: 600; margin: 0 0 1rem; }
.footer-col p { font-size: 13px; color: rgba(255,255,255,0.65); line-height: 1.65; margin: 0 0 0.5rem; }
.footer-col a { display: block; font-size: 13px; color: rgba(255,255,255,0.65); padding: 0.15rem 0; transition: color var(--speed); }
.footer-col a:hover { color: #ffffff; }
.footer-col p a { display: inline; }
.site-footer-bottom { border-top: 1px solid rgba(255,255,255,0.1); }
.site-footer-bottom-inner { max-width: var(--container-wide); margin: 0 auto; padding: 1rem var(--spacing-x); display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 0.5rem; }
.site-footer-bottom p { font-size: 11px; letter-spacing: 0.05em; color: rgba(255,255,255,0.4); margin: 0; }
.site-footer-bottom a { color: rgba(255,255,255,0.4); transition: color var(--speed); }
.site-footer-bottom a:hover { color: rgba(255,255,255,0.8); }

/* ── Page header ────────────────────────────────────── */
.page-header { padding: 4rem var(--spacing-x) var(--spacing-section); }
.page-header h1 { font-size: 2.25rem; font-weight: var(--font-weight-heading, 300); color: var(--color-heading); line-height: 1.25; letter-spacing: 0.025em; margin: 0; }
@media (min-width: 768px) { .page-header h1 { font-size: 3rem; } }
.page-header .intro { font-size: 17px; line-height: 1.625; color: var(--color-text-muted); margin-top: 1.5rem; max-width: 40rem; }

/* ── Blocks ─────────────────────────────────────────── */
.block-text h2 { font-size: 1.5rem; font-weight: var(--font-weight-heading, 300); letter-spacing: 0.025em; color: var(--color-heading); margin: 0 0 1rem; }
.section--dark .block-text h2, .section--accent .block-text h2 { color: inherit; }

.block-cta h2 { font-size: 1.5rem; font-weight: var(--font-weight-heading, 300); letter-spacing: 0.025em; color: var(--color-heading); margin: 0 0 1.5rem; }
.section--dark .block-cta h2, .section--accent .block-cta h2 { color: inherit; }

.block-image_text .it-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; align-items: var(--it-valign, start); }
@media (max-width: 767px) { .block-image_text .it-grid { grid-template-columns: 1fr; } }
.block-image_text img { width: 100%; max-width: 480px; object-fit: contain; display: block; margin: 0 auto; }
.block-image_text .richtext h2 { font-size: 1.75rem; font-weight: 700; color: var(--color-heading); margin: 0 0 1.25rem; letter-spacing: -0.01em; }

.block-quote blockquote { margin: 0; }
.block-quote p { font-size: 1.25rem; font-weight: 300; color: var(--color-text-muted); line-height: 1.7; letter-spacing: 0.025em; margin: 0 0 1.5rem; }
@media (min-width: 768px) { .block-quote p { font-size: 1.5rem; } }
.block-quote blockquote footer { font-size: 11px; text-transform: uppercase; letter-spacing: 0.2em; color: var(--color-text-muted); }
.section--dark .block-quote p, .section--accent .block-quote p { color: rgba(255,255,255,0.75); }
.section--dark .block-quote blockquote footer, .section--accent .block-quote blockquote footer { color: rgba(255,255,255,0.5); }

.block-feature .feature-item { display: flex; gap: 1.5rem; align-items: flex-start; }
.block-feature .feature-icon { width: 48px; flex-shrink: 0; }
.block-feature .feature-icon img { width: 100%; height: auto; }
.block-feature .feature-content h3 { font-size: 1.125rem; font-weight: 500; color: var(--color-heading); margin: 0 0 0.75rem; }

.block-imagebar .imagebar-row { display: flex; align-items: center; justify-content: center; gap: 3rem; flex-wrap: wrap; }
.block-imagebar .imagebar-item img { height: 60px; width: auto; object-fit: contain; opacity: 0.75; }
.text-divider-bar-label { font-size: clamp(1.75rem, 4vw, 3rem); font-weight: 300; letter-spacing: 0.05em; text-align: center; margin: 0; color: inherit; }
/* Icon list block */
.icon-list { display:flex; flex-direction:column; gap:1.5rem; }
.icon-list-item { display:flex; gap:1rem; align-items:flex-start; }
.icon-list-icon { width:36px; height:36px; flex-shrink:0; object-fit:contain; }
.icon-list-icon-placeholder { width:36px; flex-shrink:0; }
.icon-list-body { flex:1; }
.icon-list-title { font-weight:500; font-size:15px; color:var(--color-heading); margin:0 0 0.25rem; }
.icon-list-text { font-size:14px; color:var(--color-text); line-height:1.6; margin:0; }
.icon-list-note { font-size:12px; color:var(--color-text-muted); margin-top:1rem; font-style:italic; }
/* Image block */
.block-image { margin:0; }
.block-image img { max-width:100%; display:block; }
.block-image-rounded { border-radius:50%; aspect-ratio:1/1; object-fit:cover; width:100%; }
.block-image-caption { font-size:12px; color:var(--color-text-muted); margin-top:0.5rem; text-align:center; }

.block-statement .section-inner { text-align: center; }
.block-statement h2 { font-size: 2rem; font-weight: var(--font-weight-heading, 300); letter-spacing: 0.025em; color: var(--color-heading); margin: 0 0 0.75rem; }
@media (min-width: 768px) { .block-statement h2 { font-size: 2.5rem; } }
.block-statement .statement-sub { font-size: 11px; text-transform: uppercase; letter-spacing: 0.2em; color: var(--color-text-muted); margin: 0; }

/* ── Multi-column slots ──────────────────────────────── */
.section-slots { display: grid; gap: 2rem; }
.section-slots[data-cols="2"] { grid-template-columns: repeat(2, 1fr); }
.section-slots[data-cols="3"] { grid-template-columns: repeat(3, 1fr); }
.section-slots[data-cols="4"] { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 639px) { .section-slots { grid-template-columns: 1fr; } }
@media (min-width: 640px) and (max-width: 1023px) {
    .section-slots[data-cols="3"],
    .section-slots[data-cols="4"] { grid-template-columns: repeat(2, 1fr); }
}

/* Slot (individual column) design modifiers */
.slot--light  { background: var(--color-bg-light); }
.slot--dark   { background: var(--color-bg-dark); color: #f5f5f4; }
.slot--accent { background: var(--color-bg-accent); color: #ffffff; }
.slot--dark  a, .slot--accent a { color: inherit; }
.slot--pad-sm  { padding: 1rem; }
.slot--pad-md  { padding: 1.5rem; }
.slot--pad-lg  { padding: 2.5rem; }
.slot--center  { text-align: center; }

/* ── Richtext ───────────────────────────────────────── */
.richtext > * + * { margin-top: 1.25rem; }
.richtext h1 { font-size: 1.75rem; font-weight: var(--font-weight-heading, 300); line-height: 1.3; letter-spacing: 0.01em; color: var(--color-heading); margin-top: 2.5rem; }
.richtext h2 { font-size: 1.375rem; font-weight: var(--font-weight-heading, 400); line-height: 1.35; color: var(--color-heading); margin-top: 2rem; }
.richtext h3 { font-size: 1.125rem; font-weight: 500; line-height: 1.4; color: var(--color-text); margin-top: 1.75rem; }
.richtext p  { font-size: 15px; line-height: 1.75; color: var(--color-text); }
.richtext a  { color: var(--color-primary); text-decoration: underline; text-underline-offset: 3px; }
.richtext a:hover { color: var(--color-primary-dark); }
.richtext strong { font-weight: 600; color: var(--color-text); }
.richtext em { font-style: italic; }
.richtext ul { list-style: disc; padding-left: 1.5rem; color: var(--color-text); font-size: 15px; line-height: 1.75; }
.richtext ol { list-style: decimal; padding-left: 1.5rem; color: var(--color-text); font-size: 15px; line-height: 1.75; }
.richtext li + li { margin-top: 0.375rem; }
.richtext blockquote { border-left: 2px solid var(--color-border); padding-left: 1.25rem; color: var(--color-text-muted); font-style: italic; }
.richtext hr { border: none; border-top: 1px solid var(--color-border); }
.richtext code { font-family: ui-monospace, monospace; font-size: 0.875em; background: var(--color-bg-light); padding: 0.1em 0.35em; border-radius: 3px; color: var(--color-text); }
.richtext pre { background: var(--color-bg-light); border: 1px solid var(--color-border); padding: 1.25rem; overflow-x: auto; border-radius: var(--radius); }
.richtext pre code { background: none; padding: 0; }

/* ── Buttons ────────────────────────────────────────── */
.btn { display: inline-block; background: var(--color-heading); color: #fff; font-size: 11px; text-transform: uppercase; letter-spacing: 0.2em; padding: 0.75rem 2rem; border-radius: var(--radius); transition: background var(--speed); cursor: pointer; border: none; font-family: var(--font-body); }
.btn:hover { background: var(--color-text); }
.btn-primary { background: var(--color-primary); }
.btn-primary:hover { background: var(--color-primary-dark); }

/* ── Forms ──────────────────────────────────────────── */
.form-field { width: 100%; border: 1px solid var(--color-border); padding: 0.75rem 1rem; font-size: 0.875rem; color: var(--color-text); transition: border-color var(--speed); outline: none; background: var(--color-bg); border-radius: var(--radius); font-family: var(--font-body); }
.form-field::placeholder { color: var(--color-text-muted); }
.form-field:focus { border-color: var(--color-text-muted); }

/* ── Typography helpers ─────────────────────────────── */
.page-title  { font-size: 1.5rem; font-weight: 300; letter-spacing: 0.025em; color: var(--color-heading); padding-bottom: 1.5rem; margin: 0 0 2rem; border-bottom: 1px solid var(--color-border); }
@media (min-width: 768px) { .page-title { font-size: 1.875rem; } }
.page-intro  { font-size: 17px; line-height: 1.625; color: var(--color-text-muted); margin: 0; }
.body-text   { font-size: 15px; line-height: 1.625; color: var(--color-text-muted); }
.accent-link { color: var(--color-primary); text-decoration: underline; text-underline-offset: 4px; transition: color var(--speed); }
.accent-link:hover { color: var(--color-primary-dark); }

/* ── Sidebar layout ─────────────────────────────────── */
.layout-with-sidebar { display: flex; align-items: flex-start; gap: 0; min-height: 60vh; }
.layout-sidebar { width: 220px; flex-shrink: 0; border-right: 1px solid var(--color-border); min-height: 60vh; padding: 2rem 0; position: sticky; top: 0; }
.layout-main { flex: 1; min-width: 0; }
@media (max-width: 767px) { .layout-with-sidebar { flex-direction: column; } .layout-sidebar { width: 100%; min-height: auto; position: static; border-right: none; border-bottom: 1px solid var(--color-border); padding: 1rem 0; } }

/* ── Sidebar nav ────────────────────────────────────── */
.sidebar-nav { padding: 0.25rem 0; }
.sidebar-nav-item { display: flex; align-items: center; gap: 0.5rem; width: 100%; padding: 0.5rem 1.5rem; font-size: 14px; color: var(--color-text); text-decoration: none; transition: color var(--speed), background var(--speed); border-left: 2px solid transparent; }
.sidebar-nav-item:hover { color: var(--color-heading); background: var(--color-bg-light); }
.sidebar-nav-item.is-active { color: var(--color-primary); border-left-color: var(--color-primary); font-weight: 500; }
.sidebar-nav-toggle { justify-content: space-between; background: none; border: none; cursor: pointer; font-family: var(--font-body); }
.sidebar-nav-caret { transition: transform var(--speed); flex-shrink: 0; }
.sidebar-nav-children { padding-left: 0; }
.sidebar-nav-child { padding-left: 2.5rem; font-size: 13px; }
.sidebar-nav-divider { border: none; border-top: 1px solid var(--color-border); margin: 0.5rem 1.5rem; }
.sidebar-nav-label { display: block; padding: 0.75rem 1.5rem 0.25rem; font-size: 10px; text-transform: uppercase; letter-spacing: 0.15em; color: var(--color-text-muted); }

/* ── Page headings (templates that render their own h1) ─ */
.page-heading { font-size: clamp(1.5rem, 3vw, 2.25rem); font-weight: 300; color: var(--color-heading); margin: 0 0 0.75rem; letter-spacing: 0.01em; }
.page-intro { font-size: 16px; color: var(--color-text-muted); margin: 0 0 2rem; max-width: 48rem; line-height: 1.7; }

/* ── Hero ───────────────────────────────────────────── */
/* Full-width hero, centered content box, image right with fade */
.block-hero { background: var(--color-masthead, #1a5778); color: #fff; border-bottom: 3px solid #14425c; overflow: hidden; }
.hero-inner { display: grid; grid-template-columns: 1fr 1fr; align-items: center; min-height: var(--hero-min-height, 460px); }
.hero-content { padding: 4.5rem 3rem 4.5rem 0; display: flex; flex-direction: column; gap: 1.5rem; }
.hero-title { font-size: var(--hero-title-size, 2.4rem); font-weight: var(--hero-title-weight, 700); letter-spacing: -0.02em; color: #ffffff; margin: 0; line-height: 1.15; }
.hero-subtitle { font-size: 15px; color: rgba(255,255,255,0.82); line-height: 1.7; margin: 0; }
.hero-actions { display: flex; gap: 1rem; flex-wrap: wrap; margin-top: 0.5rem; }
.btn-hero { background: #B9D56C; color: #263a10; border: 2px solid #B9D56C; border-radius: 9999px; transition: background var(--speed), color var(--speed), border-color var(--speed); }
.btn-hero:hover { background: #a5c158; border-color: #a5c158; }
.btn-hero-ghost { background: transparent; color: #fff; border: 2px solid rgba(255,255,255,0.7); border-radius: 9999px; transition: background var(--speed), color var(--speed), border-color var(--speed); }
.btn-hero-ghost:hover { background: #fff; color: #1a5778; border-color: #fff; }
.hero-visual { display: flex; align-items: flex-end; justify-content: flex-end; }
.hero-visual img { display: block; width: 100%; object-fit: contain; object-position: right bottom; -webkit-mask-image: linear-gradient(to right, transparent 0%, black 12%); mask-image: linear-gradient(to right, transparent 0%, black 12%); }
@media (max-width: 767px) {
    .hero-inner { grid-template-columns: 1fr; min-height: 0; }
    .hero-content { padding: 3rem 0; }
    .hero-visual { display: none; }
}

/* ── Contact page ────────────────────────────────────── */
.contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 4rem; align-items: start; }
@media (max-width: 767px) { .contact-grid { grid-template-columns: 1fr; gap: 2.5rem; } }
.contact-section-title { font-size: 1.125rem; font-weight: 500; color: var(--color-heading); margin: 0 0 1.75rem; padding-bottom: 0.75rem; border-bottom: 1px solid var(--color-border); }
.contact-item { display: grid; grid-template-columns: 7rem 1fr; gap: 0.5rem; padding: 0.75rem 0; border-bottom: 1px solid var(--color-border); font-size: 14px; }
.contact-label { font-size: 11px; text-transform: uppercase; letter-spacing: 0.1em; color: var(--color-text-muted); padding-top: 0.15rem; }
.contact-item address { font-style: normal; color: var(--color-text); line-height: 1.6; }
.contact-item a { color: var(--color-primary); transition: color var(--speed); }
.contact-item a:hover { color: var(--color-primary-dark); }
.contact-item p { color: var(--color-text); margin: 0; line-height: 1.6; }
.contact-cta { margin-top: 3rem; padding-top: 2rem; border-top: 1px solid var(--color-border); display: flex; align-items: center; gap: 2rem; flex-wrap: wrap; }
.contact-cta p { font-size: 15px; color: var(--color-text-muted); margin: 0; }

/* ── USP strip ───────────────────────────────────────── */
/* ── USP grid block ──────────────────────────────────── */
.usp-grid { display: grid; grid-template-columns: repeat(var(--usp-cols, 4), 1fr); gap: 2rem; }
@media (max-width: 900px) { .usp-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .usp-grid { grid-template-columns: 1fr 1fr; } }
.usp-card { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 0.75rem; }
.usp-card--box { border: var(--usp-card-border-width, 1px) solid var(--usp-card-border-color, #e7e5e4); border-radius: var(--usp-card-radius, 0.5rem); padding: 1.5rem 1.25rem; }
.usp-card--shadow { box-shadow: 0 2px 16px rgba(0,0,0,0.08); }
.usp-icon-wrap { width: calc(var(--usp-icon-size, 1.75rem) * 2.4); height: calc(var(--usp-icon-size, 1.75rem) * 2.4); display: flex; align-items: center; justify-content: center; background: var(--usp-wrap-bg, #fff); flex-shrink: 0; }
.usp-icon-circle { border-radius: 50%; }
.usp-icon-box { border-radius: var(--radius); }
.usp-icon-shadow { box-shadow: 0 2px 12px rgba(0,0,0,0.10); }
.usp-icon-bare { display: flex; align-items: center; justify-content: center; }
.usp-icon-text { font-size: var(--usp-icon-size, 1.75rem); color: var(--usp-icon-color, var(--color-primary)); line-height: 1; display: flex; align-items: center; justify-content: center; }
.usp-icon-text svg { width: var(--usp-icon-size, 1.75rem); height: var(--usp-icon-size, 1.75rem); flex-shrink: 0; }
.usp-icon-img { width: var(--usp-icon-size, 1.75rem); height: var(--usp-icon-size, 1.75rem); object-fit: contain; }
.usp-card-label { font-size: 0.875rem; font-weight: 600; color: var(--color-heading); margin: 0; }
.usp-card-desc { font-size: 12px; color: var(--color-text-muted); margin: 0; line-height: 1.5; }

/* ── Producten overzicht ─────────────────────────────── */
.producten-overzicht-titel { font-size: 1.375rem; font-weight: 300; color: var(--color-heading); margin: 0 0 2rem; letter-spacing: 0.02em; }
.producten-grid { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.25rem; }
@media (max-width: 900px) { .producten-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .producten-grid { grid-template-columns: 1fr; } }
.producten-card { }
.producten-card-link { display: flex; flex-direction: column; height: 100%; padding: 1.25rem 1.5rem; border: 1px solid var(--color-border); border-radius: var(--radius); text-decoration: none; transition: border-color var(--speed), box-shadow var(--speed); background: var(--color-bg); }
.producten-card-link:hover { border-color: var(--color-primary); box-shadow: 0 2px 12px rgba(12,74,138,0.08); }
.producten-card-label { font-size: 15px; font-weight: 600; color: var(--color-heading); }
.producten-card-desc { font-size: 13px; color: var(--color-text-muted); margin: 0.5rem 0 0; line-height: 1.5; flex: 1; }
.producten-card-more { font-size: 12px; color: var(--color-primary); margin-top: 1rem; font-weight: 500; }
.producten-extern-label { font-size: 13px; color: var(--color-text-muted); margin: 2rem 0 0.5rem; }
.producten-extern { list-style: none; padding: 0; margin: 0; display: flex; gap: 1.5rem; flex-wrap: wrap; }
.producten-extern a { font-size: 13px; color: var(--color-primary); text-decoration: none; }
.producten-extern a:hover { text-decoration: underline; }

/* ── Prijzen block ───────────────────────────────────── */
.prijzen-block { margin: 0; }
.prijzen-titel { font-size: 1rem; font-weight: 600; color: var(--color-heading); margin: 0 0 1rem; }
.prijzen-ondertitel { font-weight: 400; color: var(--color-text-muted); font-size: 0.9em; }
.prijzen-tabel { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.prijzen-tabel table { width: 100%; border-collapse: collapse; font-size: 14px; }
.prijzen-tabel thead tr { background: var(--color-bg-dark); color: #fff; }
.prijzen-tabel th { padding: 0.65rem 1.1rem; text-align: left; font-weight: 500; font-size: 12px; letter-spacing: 0.05em; white-space: nowrap; }
.prijzen-tabel th:not(:first-child) { text-align: right; }
.prijzen-tabel td { padding: 0.6rem 1.1rem; border-bottom: 1px solid var(--color-border); color: var(--color-text); }
.prijzen-tabel td:not(:first-child) { text-align: right; font-variant-numeric: tabular-nums; }
.prijzen-tabel tbody tr:last-child td { border-bottom: none; }
.prijzen-tabel tbody tr:nth-child(even) { background: var(--color-bg-light); }
.prijzen-noot { font-size: 12px; color: var(--color-text-muted); margin: 0.75rem 0 0; font-style: italic; }

/* ── Offerte form ────────────────────────────────────── */
.offerte-form { margin-top: 2rem; display: flex; flex-direction: column; gap: 1.5rem; max-width: 52rem; }
.offerte-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; }
@media (max-width: 600px) { .offerte-row { grid-template-columns: 1fr; } }
.offerte-field { display: flex; flex-direction: column; gap: 0.4rem; }
.offerte-label { font-size: 13px; font-weight: 500; color: var(--color-text); }
.offerte-required { color: var(--color-primary); }
.offerte-hint { font-size: 12px; color: var(--color-text-muted); margin: 0; }
.form-field--file { padding: 0.5rem 0.75rem; cursor: pointer; }
.offerte-akkoord { display: flex; align-items: flex-start; gap: 0.6rem; font-size: 13px; color: var(--color-text); cursor: pointer; }
.offerte-akkoord input[type="checkbox"] { margin-top: 2px; flex-shrink: 0; width: 15px; height: 15px; accent-color: var(--color-primary); }
.offerte-success { background: #f0f7ff; border: 1px solid #bdd7f5; padding: 2rem 1.75rem; border-radius: var(--radius); }
.offerte-success-label { font-size: 11px; letter-spacing: 0.15em; text-transform: uppercase; color: var(--color-primary); margin: 0 0 0.5rem; font-weight: 600; }
.offerte-success p { margin: 0; font-size: 15px; color: var(--color-text); }
.offerte-error { background: #fff3f3; border: 1px solid #f5c0c0; padding: 0.875rem 1.25rem; font-size: 13px; color: #b91c1c; border-radius: var(--radius); }

/* ── Links page ──────────────────────────────────────── */
.link-list { list-style: none; padding: 0; margin: 2rem 0 0; display: flex; flex-direction: column; gap: 0; }
.link-list-item { padding: 1.25rem 0; border-bottom: 1px solid var(--color-border); }
.link-list-item:first-child { border-top: 1px solid var(--color-border); }
.link-list-url { font-size: 15px; font-weight: 500; color: var(--color-primary); text-decoration: none; transition: color var(--speed); }
.link-list-url:hover { color: var(--color-primary-dark); text-decoration: underline; }
.link-list-desc { font-size: 13px; color: var(--color-text-muted); margin: 0.25rem 0 0; line-height: 1.5; }