/* =============================================
   &Co Advocaten — main stylesheet
   Tokens · Reset · Base · Layout · Components · Sections
   ============================================= */

/* ---------- 1. Design tokens ---------- */
:root {
    /* Palette — uit Figma variables &Co Advocaten */
    --c-cream:        #FCFAF4;             /* Ivoor */
    --c-cream-2:      #F4EFE3;
    --c-paper:        #FFFFFF;
    --c-ink:          #131313;             /* Colors/Text/Text Black */
    --c-ink-soft:     #1B1B1B;
    --c-charcoal:     #313131;             /* Charcoal */
    --c-muted:        #676767;             /* Colors/Text/Text body */
    --c-line:         rgba(49, 49, 49, 0.10);
    --c-line-dark:    rgba(255, 255, 255, 0.10);
    --c-accent:       #E45122;             /* Portland Orange */
    --c-accent-dark:  #C84017;
    --c-accent-soft:  #F58C5D;

    /* Type — Arapey (headings) + Inter (UI) + Open Sans (body) */
    --f-serif: "Arapey", "Cormorant Garamond", "Times New Roman", Georgia, serif;
    --f-sans:  "Inter", "Helvetica Neue", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
    --f-body:  "Open Sans", "Inter", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
    --fs-xs:   0.75rem;
    --fs-sm:   0.875rem;
    --fs-base: 1rem;
    --fs-md:   1.125rem;
    --fs-lg:   1.5rem;
    --fs-xl:   2rem;
    --fs-2xl:  3rem;
    --fs-3xl:  clamp(2.5rem, 6vw, 5.5rem);
    --fs-4xl:  clamp(3rem, 8vw, 7rem);

    /* Spacing */
    --sp-1: 0.25rem;
    --sp-2: 0.5rem;
    --sp-3: 0.75rem;
    --sp-4: 1rem;
    --sp-5: 1.5rem;
    --sp-6: 2rem;
    --sp-7: 3rem;
    --sp-8: 4rem;
    --sp-9: 6rem;
    --sp-10: 8rem;

    /* Layout */
    --container:        min(92vw, 1440px);
    --container-narrow: min(92vw, 880px);
    --container-wide:   min(96vw, 1680px);
    --radius:   16px;
    --radius-lg: 28px;
    --radius-pill: 999px;

    --shadow-sm: 0 1px 2px rgba(0,0,0,0.04), 0 4px 12px rgba(0,0,0,0.04);
    --shadow-md: 0 8px 24px rgba(0,0,0,0.08);
    --shadow-lg: 0 24px 48px rgba(0,0,0,0.12);

    --t-fast:  140ms;
    --t-base:  280ms;
    --t-slow:  640ms;
    /* Figma Smart Animate QUICK spring easing — uit REST API reactions.
       Default Figma prototype duration 1117ms voor expertise/menu hover states. */
    --t-figma-quick: 1117ms;
    --ease-figma-quick: cubic-bezier(0.25, 1, 0.5, 1);
    --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
    --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
}

/* ---------- 2. Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html {
    -webkit-text-size-adjust: 100%;
    tab-size: 4;
    /* Scrollbar-gutter stable + overflow-y:scroll: forceer dat de scrollbar-ruimte
       altijd gereserveerd is, ook tijdens transitions waar content tijdelijk minder
       is dan viewport. Voorkomt dat de pagina horizontaal verspringt (indeukt). */
    overflow-y: scroll;
    scrollbar-gutter: stable;
}
body { margin: 0; }
/* Reset browser-default heading-weight. Figma headings zijn Arapey Regular 400.
   Specifieke bold-cases (bv. contact-office__subhead Open Sans Bold) overrulen lokaal. */
h1, h2, h3, h4, h5, h6 { font-weight: 400; }
strong, b { font-weight: 600; }
img, picture, svg, video { display: block; max-width: 100%; height: auto; }
button, input, select, textarea { font: inherit; color: inherit; }
button { background: none; border: 0; cursor: pointer; padding: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
a { color: inherit; text-decoration: none; }
:focus-visible { outline: 2px solid var(--c-accent); outline-offset: 4px; border-radius: 2px; }

/* ---------- 3. Base typography ---------- */
html { font-size: 100%; }
body {
    background: var(--c-cream);
    color: var(--c-charcoal);
    font-family: var(--f-body);
    font-size: var(--fs-base);
    line-height: 1.5;
    font-weight: 400;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: clip;
}
h1, h2, h3, h4, h5, h6 { color: var(--c-ink); }
em, i { font-style: italic; }
.prose p { margin: 0 0 1em; }
.prose h2 { font-family: var(--f-serif); font-weight: 400; font-size: clamp(1.75rem, 3vw, 2.5rem); line-height: 1.15; margin: 2rem 0 1rem; }
.prose h3 { font-family: var(--f-serif); font-weight: 400; font-size: 1.5rem; margin: 1.5rem 0 0.75rem; }
.prose a { color: var(--c-accent); text-decoration: underline; text-underline-offset: 4px; }
.screen-reader-text { position: absolute !important; clip: rect(1px,1px,1px,1px); width: 1px; height: 1px; overflow: hidden; }

/* ---------- 4. Layout primitives ---------- */
.container { width: var(--container); margin-inline: auto; }
.container--narrow { width: var(--container-narrow); }
.container--wide   { width: var(--container-wide); }
.section { padding-block: var(--sp-10); position: relative; }
.section + .section { padding-top: 0; }
.section__eyebrow {
    display: inline-block;
    font-family: var(--f-sans);
    font-size: var(--fs-sm);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--c-accent);
    margin-bottom: var(--sp-4);
}

/* ---------- 5. Skip link ---------- */
.skip-link { position: absolute; left: -9999px; top: 0; padding: 1rem; background: var(--c-ink); color: var(--c-paper); z-index: 9999; }
.skip-link:focus { left: 1rem; top: 1rem; }

/* ---------- 6. Custom cursor — LETTERLIJK uit Osmo
   Bron: https://www.osmo.supply/resource/basic-custom-cursor */
.cursor {
    z-index: 100;
    background-color: #E45122;
    border: 1px solid #E45122;
    border-radius: 100em;
    width: 1em;
    height: 1em;
    transition: background-color .375s cubic-bezier(.625, .05, 0, 1),
                height .375s cubic-bezier(.625, .05, 0, 1),
                width .375s cubic-bezier(.625, .05, 0, 1);
    position: fixed;
    inset: 0% auto auto 0%;
    pointer-events: none;
}
body:has(a:hover) .cursor,
body:has(button:hover) .cursor,
body:has([data-cursor]:hover) .cursor {
    width: 3em;
    height: 3em;
    background-color: rgba(228, 81, 34, 0.3);
}
@media (hover: none) and (pointer: coarse) {
    .cursor { display: none; }
}

/* ---------- 7. Page transition — Osmo curved wipe (1:1 https://www.osmo.supply/resource/curved-wipe-page-transition)
   Kleuren aangepast naar &Co: panel #313131 (ink), logo cream #fcfaf4. Rest identiek. */
.transition {
    z-index: 100;
    pointer-events: none;
    position: fixed;
    inset: 0;
    overflow: clip;
}
.transition__panel {
    color: #313131; /* &Co ink — was #201d1d in Osmo */
    background-color: currentColor;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    display: flex;
    position: absolute;
    top: 100%;
    left: 0;
}
.transition__panel-top {
    transform-origin: bottom;
    flex-flow: column;
    align-items: center;
    width: 100%;
    height: 0%;
    display: flex;
    position: absolute;
    bottom: calc(100% - 1px);
    left: 0;
    overflow: hidden;
}
.transition__panel-bottom {
    transform-origin: top;
    flex-flow: column;
    justify-content: flex-end;
    align-items: center;
    width: 100%;
    height: 0%;
    display: flex;
    position: absolute;
    top: calc(100% - 1px);
    left: 0;
    overflow: hidden;
}
.transition__panel-circle {
    aspect-ratio: auto;
    background-color: currentColor;
    border-radius: 50%;
    width: 125%;
    height: 500%;
    position: absolute;
}
.transition__logo {
    color: #fcfaf4; /* &Co cream — was #f4f4f4 in Osmo */
    opacity: 0;
    width: 11em;
    display: flex;
    position: absolute;
    top: 50%;
    left: 50%;
    overflow: hidden;
    transform: translate(-50%, -50%);
}
.transition__logo-clip {
    display: block;
    overflow: hidden;
    line-height: 0;
    width: 100%;
}
.transition__logo-img {
    display: block;
    width: 100%;
    height: auto;
    /* PNG site-logo (oranje) → wit in transitie via filter.
       brightness(0) = pure zwart, invert(1) = zwart→wit. */
    filter: brightness(0) invert(1);
    will-change: transform;
}

/* ---------- 8. Buttons — LETTERLIJK Osmo magnetic-hover-effect
   Bron: https://www.osmo.supply/resource/magnetic-hover-effect
   Adaptaties: Figma kleuren (#E45122 fill + dashed wrap), Figma padding (16px 32px) */
.btn-magnetic {
    position: relative;
    display: inline-flex;
    padding: 8px;
    border: 1px dashed var(--c-accent);
    border-radius: 999px;
    background: transparent;
    align-self: flex-start;
    flex: 0 0 auto;
}
.btn-magnetic__click {
    cursor: pointer;
    border-radius: 999px;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    display: flex;
    position: relative;
    overflow: hidden;
    text-decoration: none;
    color: var(--c-paper);
}
.btn-magnetic__fill {
    background-color: var(--c-accent);
    width: 100%;
    height: 100%;
    position: absolute;
    inset: 0;
    transition: background-color 0.4s cubic-bezier(0.625, 0.05, 0, 1), transform 0.5s cubic-bezier(0.625, 0.05, 0, 1);
}
.btn-magnetic__click:hover .btn-magnetic__fill { background-color: var(--c-accent-dark); transform: scale(1.04); }
.btn-magnetic--inverse .btn-magnetic__click:hover .btn-magnetic__fill { background-color: var(--c-cream-2); }
.btn-magnetic__content {
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    padding: 16px 32px;
    display: flex;
    position: relative;
}
.btn-magnetic__text {
    position: relative;
    overflow: hidden;
}
.btn-magnetic__text-p {
    color: inherit;
    text-align: center;
    font-family: var(--f-body);
    font-size: 16px;
    font-weight: 400;
    line-height: 1.5;
    margin: 0;
    position: relative;
    white-space: nowrap;
}
.btn-magnetic__text-p.is--duplicate {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
}
.btn-magnetic__click .btn-magnetic__text-p {
    transition: all 0.6s cubic-bezier(0.625, 0.05, 0, 1);
    transform: translateY(0%) rotate(0.001deg);
}
.btn-magnetic__click:hover .btn-magnetic__text-p {
    transform: translateY(-100%) rotate(0.001deg);
}

/* Variants */
.btn-magnetic--sm { padding: 6px; }
.btn-magnetic--sm .btn-magnetic__content { padding: 12px 24px; }
.btn-magnetic--sm .btn-magnetic__text-p { font-size: 14px; }

.btn-magnetic--inverse { border-color: var(--c-paper); }
.btn-magnetic--inverse .btn-magnetic__fill { background-color: var(--c-paper); }
.btn-magnetic--inverse .btn-magnetic__click { color: var(--c-charcoal); }

.btn-magnetic--ghost { border-color: var(--c-ink); }
.btn-magnetic--ghost .btn-magnetic__fill { background-color: var(--c-ink); }

/* Legacy class alias */
.btn { all: unset; display: inline-flex; }
.btn .btn__inner { display: inline-block; padding: 16px 32px; background: var(--c-accent); color: var(--c-paper); border-radius: 999px; font-family: var(--f-body); font-size: 16px; line-height: 1.5; cursor: pointer; }
.btn--primary { /* uses default */ }
.btn--inverse .btn__inner { background: var(--c-paper); color: var(--c-ink); }
.btn--sm .btn__inner { padding: 12px 24px; font-size: 14px; }

/* ---------- 9. Site header — Component 43 (1728x104)
   Figma: absolute overlay op top, drop-shadow 0 0 10 rgba(0,0,0,0.1)
   px-64 py-16, content max-w-1200, items-center justify-between */
.site-header {
    position: fixed; top: 0; left: 0; right: 0; z-index: 80;
    background: rgba(252,250,244,0.96);
    backdrop-filter: blur(12px);
    box-shadow: 0 0 10px rgba(0,0,0,0.10);
    /* Figma Component 43: outer px-64 py-16, content max-w-1200
       Padding op de outer zodat content (max-w-1200) gelijk uitlijnt met
       sections die ook 1200 inner gebruiken. */
    padding: 8px 64px;
}
.site-header__container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    max-width: 1200px;
    margin-inline: auto;
    padding: 0;
}
.site-header__logo {
    display: inline-flex;
    align-items: center;
    width: 108px;
    height: 94px;
    flex: 0 0 auto;
}
.site-header__logo img { width: 100%; height: 100%; object-fit: contain; display: block; }
.site-nav { flex: 1 1 auto; display: flex; justify-content: center; }
.site-nav__list { display: flex; align-items: center; gap: 8px; list-style: none; padding: 0; margin: 0; }
.site-nav__item { list-style: none; }
.site-nav__link {
    display: inline-flex; align-items: center; gap: 12px;
    padding: 12px 24px;
    border-radius: 12px;
    font-family: var(--f-body);
    font-size: 16px;
    line-height: 1.5;
    color: var(--c-ink);
    transition: background var(--t-base) var(--ease-out), color var(--t-base) var(--ease-out);
}
.site-nav__link:hover { background: var(--c-cream-2); color: var(--c-accent); }
.site-nav__caret { color: currentColor; transition: transform var(--t-base) var(--ease-out); }
.site-nav__link:hover .site-nav__caret { transform: translateY(2px); }
.site-header__actions { display: flex; align-items: center; gap: 8px; flex: 0 0 auto; }
.site-header__lang { display: inline-flex; align-items: center; gap: 8px; padding: 12px 16px; font-size: 14px; line-height: 1.5; color: var(--c-ink); border-radius: 12px; font-family: var(--f-body); cursor: pointer; transition: background var(--t-base) var(--ease-out), color var(--t-base) var(--ease-out); }
.site-header__lang:hover { background: var(--c-cream-2); color: var(--c-accent); }
.site-header__lang svg:last-child { transition: transform var(--t-base) var(--ease-out); }
.site-header__lang:hover svg:last-child { transform: translateY(2px); }
.site-header__toggle { display: none; }

/* ---------- 9.b Mega menu — States Component 43 open state
   Dark overlay + white rounded card centered onder header */
.mega-menu {
    position: fixed;
    inset: 110px 0 0 0;        /* onder de header (8 + 94 logo + 8) */
    z-index: 70;                /* onder header (z 80) maar over content */
    pointer-events: none;
    opacity: 0;
    transition: opacity 320ms cubic-bezier(0.625, 0.05, 0, 1);
}
.mega-menu[data-mega-open] {
    pointer-events: auto;
    opacity: 1;
}
.mega-menu__backdrop {
    position: absolute; inset: 0;
    background: rgba(49,49,49,0.7);
    cursor: pointer;
}
.mega-menu__card {
    position: relative;
    max-width: 1200px;
    margin: 24px auto 0;
    background: var(--c-cream);
    border-radius: 30px;
    padding: 40px;
    box-shadow: 0 20px 48px rgba(0,0,0,0.18);
    transform: translateY(-12px);
    transition: transform 360ms cubic-bezier(0.625, 0.05, 0, 1);
}
.mega-menu[data-mega-open] .mega-menu__card { transform: translateY(0); }
.mega-menu__eyebrow {
    display: block;
    font-family: var(--f-body);
    font-size: 14px;
    line-height: 1.5;
    color: var(--c-charcoal);
    margin: 0 0 24px;
}
.mega-menu__cols {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 80px;
}
.mega-menu__col-title {
    font-family: var(--f-serif);
    font-weight: 400;
    font-size: 32px;
    line-height: 1.3;
    letter-spacing: -2px;
    color: var(--c-ink);
    margin: 0 0 16px;
}
.mega-menu__divider {
    border: 0;
    border-top: 1px solid rgba(49,49,49,0.15);
    margin: 0 0 16px;
}
.mega-menu__list { display: flex; flex-direction: column; gap: 4px; list-style: none; padding: 0; margin: 0; }
.mega-menu__item { list-style: none; }
.mega-menu__link {
    display: flex; align-items: center; justify-content: space-between;
    gap: 16px;
    padding: 12px 0;
    font-family: var(--f-body);
    font-size: 16px;
    line-height: 1.5;
    color: var(--c-ink);
    text-decoration: underline transparent;
    text-underline-offset: 4px;
    transition: text-decoration-color var(--t-figma-quick) var(--ease-figma-quick);
}
.mega-menu__link:hover {
    text-decoration-color: currentColor;
}
/* Cirkel-arrow — Figma Component 49 (mega-menu nav-items op witte card):
   - default: 32×32 charcoal outline, transparent bg, charcoal arrow SE (↘)
   - hover: charcoal filled (#313131), white arrow E (→), text underline
   - Mask-image approach (zelfde als expertises) voor smooth rotate zonder jitter */
.mega-menu__arrow {
    position: relative;
    flex: 0 0 auto;
    width: 32px; height: 32px;
    border: 1px solid var(--c-ink);
    border-radius: 999px;
    display: inline-flex; align-items: center; justify-content: center;
    background: transparent;
    color: var(--c-ink);
    transition: background var(--t-figma-quick) var(--ease-figma-quick),
                color var(--t-figma-quick) var(--ease-figma-quick);
}
.mega-menu__arrow::before {
    content: '';
    width: 24px; height: 24px;
    background-color: currentColor;
    -webkit-mask: url('../img/arrow-downward.svg') no-repeat center / contain;
            mask: url('../img/arrow-downward.svg') no-repeat center / contain;
    transform: rotate(-45deg);  /* ↓ + CCW 45 = ↘ SE */
    transform-origin: center;
    transition: transform var(--t-figma-quick) var(--ease-figma-quick);
}
.mega-menu__link:hover .mega-menu__arrow {
    background: var(--c-ink);
    color: var(--c-paper);
}
.mega-menu__link:hover .mega-menu__arrow::before {
    transform: rotate(-90deg);  /* ↓ + CCW 90 = → E */
}

@media (max-width: 900px) { .mega-menu { display: none; } /* mobile heeft eigen drawer */ }

@media (max-width: 1024px) {
    .site-header { padding: 8px 24px; }
    .site-header__container { max-width: 100%; padding: 0; }
}
/* Mobile header toggle — dark circle button */
.site-header__toggle {
    display: none;
    width: 48px; height: 48px;
    border-radius: 999px;
    background: var(--c-ink);
    color: var(--c-cream);
    border: 0;
    align-items: center; justify-content: center;
    cursor: pointer;
    margin-left: auto;
    flex: 0 0 auto;
}
.site-header__toggle-icon { display: inline-flex; align-items: center; justify-content: center; }
.site-header__toggle-icon--close { display: none; }
body.nav-open .site-header__toggle-icon--menu { display: none; }
body.nav-open .site-header__toggle-icon--close { display: inline-flex; }

/* ---------- 9.c Mobile drawer — States Component 55
   White card drawer met 3 levels via slide-translate, dark backdrop. */
.mobile-drawer {
    position: fixed;
    inset: 88px 0 0 0;             /* onder mobile header (~80px) */
    z-index: 75;
    pointer-events: none;
    opacity: 0;
    background: rgba(49,49,49,0.65);
    transition: opacity 280ms cubic-bezier(0.625, 0.05, 0, 1);
    display: none;
}
@media (max-width: 800px) { .mobile-drawer { display: block; } }
.mobile-drawer[data-mobile-open] {
    pointer-events: auto;
    opacity: 1;
}
.mobile-drawer__inner {
    position: absolute;
    top: 16px; left: 16px; right: 16px;
    background: var(--c-cream);
    border-radius: 20px;
    padding: 24px;
    box-shadow: 0 20px 48px rgba(0,0,0,0.18);
    overflow: hidden;
    transform: translateY(-12px);
    transition: transform 320ms cubic-bezier(0.625, 0.05, 0, 1);
}
.mobile-drawer[data-mobile-open] .mobile-drawer__inner { transform: translateY(0); }

.mobile-drawer__level { display: none; flex-direction: column; gap: 20px; }
.mobile-drawer__level[data-drawer-active] { display: flex; }

.mobile-drawer__back {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 4px 0;
    background: transparent; border: 0;
    cursor: pointer;
    font-family: var(--f-body);
    font-size: 16px;
    color: var(--c-ink);
}

.mobile-drawer__divider {
    border: 0;
    border-top: 1px solid rgba(49,49,49,0.12);
    margin: 0;
}

.mobile-drawer__heading {
    font-family: var(--f-serif);
    font-weight: 400;
    font-size: 24px;
    line-height: 1.4;
    letter-spacing: -1px;
    color: var(--c-ink);
    margin: 0;
}

.mobile-drawer__list { display: flex; flex-direction: column; gap: 4px; list-style: none; padding: 0; margin: 0; }
.mobile-drawer__list li { list-style: none; }
.mobile-drawer__link {
    display: flex; align-items: center; justify-content: space-between;
    gap: 12px;
    width: 100%;
    padding: 12px 0;
    background: transparent; border: 0;
    font-family: var(--f-body);
    font-size: 16px;
    line-height: 1.5;
    color: var(--c-ink);
    text-decoration: none;
    cursor: pointer;
    text-align: left;
}
.mobile-drawer__link--has-sub svg,
.mobile-drawer__link--leaf svg { flex: 0 0 auto; color: var(--c-ink); }
.mobile-drawer__link--leaf { gap: 12px; justify-content: flex-start; }
.mobile-drawer__link--leaf svg { order: -1; }

.mobile-drawer__actions {
    display: flex; align-items: center; gap: 8px;
}
.mobile-drawer__lang {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 12px 16px;
    background: transparent; border: 0;
    cursor: pointer;
    font-family: var(--f-body);
    font-size: 14px;
    color: var(--c-ink);
}

@media (max-width: 800px) {
    .site-header__toggle { display: inline-flex; }
    .site-header__actions { display: none; }
    .site-nav { display: none; }     /* mobile gebruikt drawer i.p.v. inline nav */
}

/* ---------- 10. Hero — Figma node 10324:1435 (1728x1428)
   pt-136 pb-52 px-52, gap-56 between blocks, image 1624x766 rounded-40 */
.hero {
    background: var(--c-cream);
    padding: 136px 52px 52px;
    overflow: clip;
}
.hero__inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 32px;            /* Figma: Hero Content gap-32 (mark+text vs buttons) */
    max-width: 1624px;
    margin: 0 auto 56px;  /* Figma: Hero Section gap-56 (text-block vs image) */
}
.hero__content-group {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;            /* Figma: gap-16 (mark vs text-container) */
    width: 100%;
}
.hero__mark {
    width: 201px;
    height: 78px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.hero__mark img { width: 100%; height: 100%; object-fit: contain; }
.hero__text {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 24px;
    text-align: center;
    width: 100%;
    max-width: 1194px;
}
.hero__title {
    font-family: var(--f-serif);
    font-weight: 400;
    font-style: normal;
    font-size: clamp(2.5rem, 5.6vw, 72px);
    line-height: 1.2;
    letter-spacing: -2px;
    color: var(--c-ink);
    margin: 0;
}
.hero__title em { font-style: italic; }
.hero__subtitle {
    font-family: var(--f-body);
    font-size: 16px;
    line-height: 24px;
    color: var(--c-charcoal);
    margin: 0;
    max-width: 607px;
}
.hero__cta { display: flex; justify-content: center; }
.hero__media {
    width: 100%;
    max-width: 1624px;
    margin: 0 auto;
    aspect-ratio: 1624 / 766;
    border-radius: 40px;
    overflow: hidden;
    background: var(--c-cream-2);
}
.hero__media img,
.hero__media video { width: 100%; height: 100%; object-fit: cover; display: block; }
.hero__media--placeholder { background: linear-gradient(135deg, #E8DFCE, var(--c-cream-2)); }

@media (max-width: 1024px) {
    .hero { padding: 136px 32px 64px; }
    .hero__inner { gap: 32px; margin-bottom: 56px; }
}
@media (max-width: 640px) {
    /* Mobile pt-184 — Figma 10476:9779 (Hero Section y=184 binnen Hero 402x898) */
    .hero { padding: 184px 24px 64px; }
    .hero__inner { gap: 32px; max-width: 354px; }   /* margin-bottom: in later @640 block (64) */
    .hero__content-group { gap: 16px; }
    .hero__mark { width: 176px; height: 52px; }
    .hero__text { gap: 24px; max-width: 354px; }
    /* hero__title: font-size/line-height/letter-spacing in later @640 block (32/1.3/-2 Figma H1) */
    .hero__subtitle { font-size: 16px; max-width: 354px; }
    .hero__media { max-width: 354px; }   /* border-radius in later @640 block (32, Figma losse afb) */
}

/* ---------- 10.a Hero — Dienst detail (Figma 10436:14307 desktop / 10476:9902 mobile)
   Dark hero: bg charcoal, breadcrumb-strip + title (Arapey 48) + lead + body + image-rechts.
   Mobile: stack column, image onder, 32px title. */
.hero-dienst {
    background: var(--c-charcoal);
    color: var(--c-paper);
    padding: 136px 52px 118px;  /* 88 + 30 voor dienst-features mt:-30 overlap */
}
.hero-dienst__inner {
    max-width: 1200px;
    margin-inline: auto;
    display: flex;
    flex-direction: column;
    gap: 56px;
}
.hero-dienst__crumbs {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    color: var(--c-paper);
    font-family: var(--f-body);
    font-size: 16px;
    line-height: 1.5;
}
.hero-dienst__crumb-home {
    display: inline-flex;
    padding: 8px;
    border-radius: 12px;
    color: inherit;
    text-decoration: none;
    transition: background var(--t-figma-quick) var(--ease-figma-quick);
}
.hero-dienst__crumb-home:hover { background: rgba(252,250,244,0.08); }
.hero-dienst__crumb-sep { padding: 0 8px; opacity: 0.6; }
.hero-dienst__crumb {
    padding: 8px;
    color: inherit;
    text-decoration: none;
    text-decoration: underline transparent;
    text-underline-offset: 4px;
    transition: text-decoration-color var(--t-figma-quick) var(--ease-figma-quick), opacity var(--t-figma-quick) var(--ease-figma-quick);
}
.hero-dienst__crumb:hover { text-decoration-color: currentColor; }
.hero-dienst__crumb--current { opacity: 0.7; }
.hero-dienst__main {
    display: grid;
    grid-template-columns: 661px 457px;
    gap: 82px;
    align-items: center;
    width: 100%;
}
.hero-dienst__main--nomedia { grid-template-columns: 1fr; }
.hero-dienst__text { display: flex; flex-direction: column; gap: 24px; max-width: 661px; }
.hero-dienst__main--nomedia .hero-dienst__text { max-width: 800px; }
.hero-dienst__title {
    font-family: var(--f-serif);
    font-weight: 400;
    font-size: 48px;
    line-height: 1.2;
    letter-spacing: -2px;
    color: var(--c-paper);
    margin: 0;
}
.hero-dienst__sub,
.hero-dienst__desc {
    font-family: var(--f-body);
    font-size: 16px;
    line-height: 1.5;
    margin: 0;
    color: var(--c-paper);
}
.hero-dienst__desc p { margin: 0 0 1em; }
.hero-dienst__desc p:last-child { margin-bottom: 0; }
.hero-dienst__media {
    margin: 0;
    width: 457px;
    height: 340px;
    border-radius: 30px;
    overflow: hidden;
    background: rgba(252,250,244,0.06);
}
.hero-dienst__media img,
.hero-dienst__media video { width: 100%; height: 100%; object-fit: cover; display: block; }
.hero-dienst__media--placeholder { background: linear-gradient(135deg, rgba(252,250,244,0.08), rgba(252,250,244,0.02)); }
@media (max-width: 1024px) {
    .hero-dienst { padding: 120px 32px 64px; }
    .hero-dienst__main { grid-template-columns: 1fr; gap: 40px; }
    .hero-dienst__media { width: 100%; height: 340px; }
}
@media (max-width: 640px) {
    /* Figma mobile (node 10476:9902) — pad 136 24 56 + 30 overlap compensation
       voor .dienst-features mt:-30 ([[feedback-andco-overlap-compensation]]) */
    .hero-dienst { padding: 136px 24px 86px; }
    .hero-page { padding: 136px 24px 86px; }  /* 56 + 30 voor team-overview mt:-30 */
    .hero-dienst__inner { gap: 40px; max-width: 354px; }
    .hero-dienst__main { grid-template-columns: 1fr; gap: 64px; }
    .hero-dienst__title { font-size: 32px; letter-spacing: -1px; }
    .hero-dienst__media { width: 100%; height: 248px; border-radius: 32px; }
}

/* ---------- 10.a.2 Dienst features — 2 alternating image+text blocks
   (Figma desktop 10436:14317 / mobile 10476:9913) */
.dienst-features {
    background: var(--c-cream);
    padding: 120px 52px 90px;   /* 60 + 30 voor cta-spar mt:-30 overlap */
    border-top-left-radius: 30px;
    border-top-right-radius: 30px;
    margin-top: -30px;  /* overlap met dark hero voor de rounded-top corners effect */
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 120px;
}
.dienst-features__row {
    display: flex;
    justify-content: flex-start;
    width: 100%;
    max-width: 1200px;
    margin-inline: auto;
}
.dienst-features__row--reverse { justify-content: flex-end; }
.dienst-features__card {
    display: flex;
    align-items: center;
    gap: 72px;
    width: 100%;
    background: #FFFFFF;
    border: 1px solid rgba(49,49,49,0.1);
    border-radius: 30px;
    padding: 32px;
}
.dienst-features__row--reverse .dienst-features__card { gap: 96px; flex-direction: row-reverse; }
.dienst-features__media {
    margin: 0;
    flex: 0 0 539px;
    width: 539px;
    height: 458px;
    border-radius: 30px;
    overflow: hidden;
    background: rgba(49,49,49,0.05);
}
.dienst-features__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.dienst-features__media--placeholder { background: linear-gradient(135deg, rgba(49,49,49,0.06), rgba(49,49,49,0.02)); }
.dienst-features__text { display: flex; flex-direction: column; gap: 16px; width: 437px; max-width: 437px; }
.dienst-features__title {
    font-family: var(--f-serif);
    font-weight: 400;
    font-size: 40px;
    line-height: 1.2;
    letter-spacing: -2px;
    color: var(--c-ink);
    margin: 0;
}
.dienst-features__body { font-family: var(--f-body); font-size: 16px; line-height: 1.5; color: var(--c-charcoal); }
.dienst-features__body p { margin: 0 0 1em; }
.dienst-features__body p:last-child { margin-bottom: 0; }
@media (max-width: 1024px) {
    .dienst-features { padding: 80px 32px 48px; gap: 64px; }
    .dienst-features__card { flex-direction: column !important; gap: 32px !important; padding: 24px; }
    .dienst-features__media { flex: 0 0 auto; width: 100%; height: 280px; }
    .dienst-features__text { width: 100%; max-width: 100%; }
    .dienst-features__title { font-size: 32px; letter-spacing: -1px; }
}
@media (max-width: 640px) {
    /* Figma mobile (node 10476:9913) — section pad 64 24 24, rows gap 56,
       card padding 32 (all sides), image-to-text gap 40, image 290x182.
       Pad-bot 24 (Figma) — cta-spar--card erna heeft GEEN mt:-X want section
       is transparante wrapper en heeft eigen pad-top 56 voor cream-gap. */
    .dienst-features { padding: 64px 24px 24px; gap: 56px; }
    .dienst-features__card { padding: 32px; gap: 40px; border-radius: 32px; }
    .dienst-features__media { height: 182px; border-radius: 24px; }
    .dienst-features__title { font-size: 28px; }
}

/* ---------- 10.b Services1 / USP-strip (Figma 10476:2923)
   bg #fcfaf4, pt-64 pb-120 px-52, content w-1200, 3 cards gap-80 items-center */
.services-strip { background: var(--c-cream); padding: 64px 52px 150px; }  /* 120 + 30 voor expertises mt:-30 */
.services-strip__inner { display: grid; grid-template-columns: repeat(3, 1fr); gap: 80px; max-width: 1200px; margin-inline: auto; align-items: start; }
.usp-card { display: flex; flex-direction: column; gap: 32px; align-items: flex-start; }
.usp-card__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px; height: 48px;
    padding: 12px;
    background: var(--c-accent);
    border-radius: 28px;
    color: var(--c-paper);
}
.usp-card__body { display: flex; flex-direction: column; gap: 16px; }
.usp-card__title {
    font-family: var(--f-serif);
    font-weight: 400;
    font-size: 32px;
    line-height: 1.3;
    letter-spacing: -2px;
    color: var(--c-ink);
    margin: 0;
}
.usp-card__sub { font-family: var(--f-body); font-size: 16px; line-height: 1.5; color: var(--c-charcoal); margin: 0; }
@media (max-width: 1024px) {
    .services-strip { padding: 48px 32px 80px; }
    .services-strip__inner { grid-template-columns: 1fr; gap: 48px; }
    .usp-card__title { font-size: 26px; letter-spacing: -1px; }
}

/* ---------- 10.c Expertises / Services (dark) (Figma 10476:2922)
   bg #313131 px-52 py-120 rounded-top-30, content w-1200 gap-80 */
.expertises {
    background: var(--c-charcoal);
    /* pad-bot 120 + 30 voor team mt:-30 overlap */
    padding: 120px 52px 150px;
    border-top-left-radius: 30px;
    border-top-right-radius: 30px;
    color: var(--c-paper);
    margin-top: -30px;
    position: relative;
    z-index: 1;
}
.expertises__inner { display: flex; flex-direction: column; gap: 80px; max-width: 1200px; margin-inline: auto; }
.expertises__head { display: flex; flex-direction: column; gap: 12px; max-width: 519px; }
.expertises__title {
    font-family: var(--f-serif);
    font-weight: 400;
    font-size: 48px;
    line-height: 1.2;
    letter-spacing: -2px;
    color: var(--c-paper);
    margin: 0;
}
.expertises__title em { font-style: italic; }
.expertises__sub { font-family: var(--f-body); font-size: 16px; line-height: 1.5; color: #b5b5b0; margin: 0; }
.expertises__cols { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: start; }
.expertises-col { display: flex; flex-direction: column; gap: 32px; }
.expertises-col__title {
    font-family: var(--f-serif);
    font-weight: 400;
    font-size: 32px;
    line-height: 1.3;
    letter-spacing: -2px;
    color: var(--c-paper);
    margin: 0 0 4px;
    padding-bottom: 16px;
    border-bottom: 1px solid rgba(255,255,255,0.18);
}
.expertises-col__list { display: flex; flex-direction: column; gap: 8px; }
.expertises-col__row {
    display: flex; align-items: center; justify-content: space-between;
    height: 48px;
    color: var(--c-cream);
}
.expertises-col__label { font-family: var(--f-body); font-size: 16px; line-height: 1.5; }
/* Figma Component 48 exacte specs:
   - cirkel 32×32 met 1px border (p-[4px] padding + 24px icon = 32 totaal)
   - icon arrow_downward (Figma asset) 24×24 met fill currentColor via mask-image
   - default: kleur cream, transform rotate(-45deg) = SE (↘)
   - hover: bg wit, kleur oranje, transform rotate(-90deg) = E (→)
   - 1117ms QUICK transition op color + background + transform */
.expertises-col__btn {
    position: relative;
    display: inline-flex; align-items: center; justify-content: center;
    width: 32px; height: 32px;
    border-radius: 999px;
    background: transparent;
    border: 1px solid rgba(255,255,255,0.18);
    color: var(--c-paper);
    transition: background var(--t-figma-quick) var(--ease-figma-quick),
                color var(--t-figma-quick) var(--ease-figma-quick),
                border-color var(--t-figma-quick) var(--ease-figma-quick);
}
.expertises-col__label {
    transition: text-decoration-color var(--t-figma-quick) var(--ease-figma-quick);
    text-decoration: underline transparent;
    text-underline-offset: 4px;
}
/* Arrow via mask-image — Figma's exact arrow_downward asset.
   Mask renders SVG eenmalig als alpha-bitmap → rotation is bitmap-transform op GPU
   = geen path rendering per frame = geen jitter. */
.expertises-col__btn::before {
    content: '';
    width: 24px; height: 24px;
    background-color: currentColor;
    -webkit-mask: url('../img/arrow-downward.svg') no-repeat center / contain;
            mask: url('../img/arrow-downward.svg') no-repeat center / contain;
    transform: rotate(-45deg);  /* ↓ + 45° CCW = ↘ SE (Figma default) */
    transform-origin: center;
    transition: transform var(--t-figma-quick) var(--ease-figma-quick);
}

/* Hover state — Figma Component 48 (Component 46 variant) */
.expertises-col__row:hover .expertises-col__btn,
.expertises-col__btn:hover,
.expertises-col__btn:focus-visible {
    background: #FFFFFF;
    color: var(--c-accent);
    border-color: #FFFFFF;
}
.expertises-col__row:hover .expertises-col__label {
    text-decoration-color: currentColor;
}
.expertises-col__row:hover .expertises-col__btn::before,
.expertises-col__btn:hover::before,
.expertises-col__btn:focus-visible::before {
    transform: rotate(-90deg);  /* ↓ + 90° CCW = → E (Figma hover) */
}
@media (max-width: 900px) {
    .expertises { padding: 80px 32px; }
    .expertises__cols { grid-template-columns: 1fr; gap: 48px; }
    .expertises__title { font-size: 36px; }
}

/* ---------- 12. Team — Meet our team (Figma 10476:2921)
   bg #fcfaf4 px-52 py-120 rounded-top-30, content w-1200 gap-80
   Cards: 1 CTA card (w-234) + 3 team cards (flex-1) gap-16 */
.team {
    background: var(--c-cream);
    padding: 120px 52px;
    border-top-left-radius: 30px;
    border-top-right-radius: 30px;
    margin-top: -30px;
    position: relative;
    z-index: 1;
}
.team__inner { display: flex; flex-direction: column; gap: 80px; max-width: 1200px; margin-inline: auto; }
.team__head { display: flex; align-items: flex-end; }
.team__title { font-family: var(--f-serif); font-weight: 400; font-size: 48px; line-height: 1.2; letter-spacing: -2px; color: var(--c-ink); margin: 0; max-width: 420px; }
.team__title em { font-style: italic; }
.team__cards { display: grid; grid-template-columns: 282px repeat(3, 1fr); gap: 16px; align-items: start; }

.team-cta {
    background: var(--c-paper);
    border: 1px solid rgba(49,49,49,0.1);
    border-radius: 20px;
    padding: 24px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: flex-start;       /* prevent stretch */
    min-height: 472px;
    width: 282px;
}
.team-cta__top { display: flex; flex-direction: column; gap: 12px; }
.team-cta__title { font-family: var(--f-serif); font-weight: 400; font-size: 32px; line-height: 1.3; letter-spacing: -2px; color: var(--c-ink); margin: 0; max-width: 215px; }
.team-cta__text { font-family: var(--f-body); font-size: 16px; line-height: 1.5; color: var(--c-charcoal); margin: 0; }

.team-card { display: flex; flex-direction: column; gap: 16px; }
.team-card__media {
    height: 424px;
    margin: 0;
    background: var(--c-paper);
    border-radius: 20px;
    overflow: hidden;
    border: 1px solid rgba(49,49,49,0.1);
    transition: transform var(--t-base) var(--ease-out), box-shadow var(--t-base) var(--ease-out), border-color var(--t-base) var(--ease-out);
}
.team-card__media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform var(--t-slow) var(--ease-out); }
.team-card__info { display: flex; flex-direction: column; align-items: flex-start; padding: 0 8px; }
.team-card__name { font-family: var(--f-serif); font-weight: 400; font-size: 20px; line-height: 28px; letter-spacing: -0.6px; color: var(--c-ink); margin: 0; }
.team-card__cta { display: inline-flex; align-items: center; gap: 8px; padding: 12px 0; font-family: var(--f-body); font-size: 14px; line-height: 1.5; color: var(--c-ink); border-radius: 12px; transition: gap var(--t-base) var(--ease-out), color var(--t-base) var(--ease-out); }
.team-card__cta svg { transition: transform var(--t-base); }
/* Hover: kaart licht op met schaduw, foto zoomt zacht, pijl + label nudgen mee */
.team-card:hover .team-card__media { transform: translateY(-6px); box-shadow: var(--shadow-lg); border-color: rgba(228,81,34,0.25); }
.team-card:hover .team-card__media img { transform: scale(1.04); }
.team-card:hover .team-card__cta { gap: 14px; color: var(--c-accent); }
.team-card:hover .team-card__cta svg { transform: translateX(4px); }

@media (max-width: 1100px) {
    .team__cards { grid-template-columns: 1fr 1fr 1fr; }
    .team-cta { grid-column: 1 / -1; flex-direction: row; align-items: center; min-height: 0; }
    .team-cta__top { flex: 1 1 auto; }
}
@media (max-width: 700px) {
    /* Mobile = horizontale carousel — single card visible + peek volgende
       Figma node 10476:9837 — Card Container 288w, snap-x */
    .team { padding: 80px 0 80px 24px; }
    .team__inner { max-width: none; gap: 32px; }
    .team__head { padding-right: 24px; }
    .team__title { font-size: 36px; max-width: 320px; letter-spacing: -1px; }
    .team__cards {
        display: flex !important;
        grid-template-columns: none;
        gap: 16px;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        /* Touch-action: pan-x EN pan-y zodat browser direction-based gesture routing
           kan doen — horizontale swipe = carousel-scroll, verticale swipe = page-scroll.
           Eerder stond hier alleen pan-x wat vertical-scroll blokkeerde op de carousel. */
        touch-action: pan-x pan-y;
        overscroll-behavior-x: contain;
        padding: 0 24px 8px 0;
        margin: 0;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        width: auto;
        align-items: stretch;
    }
    .team__cards::-webkit-scrollbar { display: none; }
    .team-cta { display: none; }     /* Figma mobile heeft geen CTA-card in team-carousel */
    .team-card {
        flex: 0 0 86vw;
        max-width: 320px;
        scroll-snap-align: start;
    }
    .team-card__media { height: 424px; border-radius: 32px; }
}

/* ---------- 14. CTA-spar — Even sparren over jouw situatie (Figma deel van Component 56)
   bg #e45122 px-52 py-120 rounded-top-30, content w-1200
   Left: rotated polaroids (2-3 zichtbaar), Right: form 469w */
.cta-spar {
    background: var(--c-accent);
    /* pad-bot 120 + 60 voor max overlap (footer mt:-60 of expertises mt:-30) */
    padding: 120px 52px 180px;
    border-top-left-radius: 30px;
    border-top-right-radius: 30px;
    color: var(--c-paper);
    margin-top: -30px;
    position: relative;
    z-index: 1;
    /* GEEN overflow: clip — polaroids mogen out-of-band roteren */
}
.cta-spar__inner {
    display: grid;
    grid-template-columns: minmax(540px, 1fr) 469px;
    gap: 100px;                                  /* Figma justify-between gap */
    align-items: center;
    max-width: 1200px;
    margin-inline: auto;
}
.cta-spar__media {
    position: relative;
    height: 380px;
    padding-left: 40px;                          /* ruimte voor leftmost polaroid rotatie */
}
.cta-spar__polaroid {
    position: absolute;
    width: 200px;
    height: 297px;
    border-radius: 30px;
    overflow: hidden;
    background: var(--c-paper);
    box-shadow: 0 8px 24px rgba(0,0,0,0.18), 0 0 0 1px rgba(0,0,0,0.04);
    transform-origin: center center;
    padding: 0;
    border: 0;
    cursor: pointer;
    transition: transform 600ms cubic-bezier(0.34, 1.56, 0.64, 1), opacity 400ms ease, box-shadow 300ms ease;
    will-change: transform, opacity;
    appearance: none;
    -webkit-tap-highlight-color: transparent;
    top: 0; left: 0;
    /* JS zet transform op basis van data-flick-status */
}
.cta-spar__polaroid:focus-visible { outline: 3px solid var(--c-paper); outline-offset: 4px; }
/* polaroid hover: geen Figma-state, alleen Osmo flick mechaniek */
.cta-spar__polaroid img { width: 100%; height: 100%; object-fit: cover; display: block; pointer-events: none; }

/* Dark logo card retains its dark bg + logo image styling */
.cta-spar__polaroid--logo {
    background: var(--c-ink);
    display: flex; align-items: center; justify-content: center;
}
.cta-spar__polaroid--logo img { width: 112px; height: auto; object-fit: contain; }

/* JS (GSAP) bestuurt transform/position via gsap.to() — geen CSS positioning.
   Status-attribuut is alleen voor styling van inhoud (button-opacity etc) */
[data-flick-cards-item-status] .cta-spar__polaroid img,
[data-flick-cards-item-status="active"] .cta-spar__polaroid img { opacity: 1; }
[data-flick-cards-dragger] {
    position: absolute;
    inset: 0;
    z-index: 1;
    cursor: grab;
    touch-action: pan-y;
}
[data-flick-cards-dragger]:active { cursor: grabbing; }

.cta-spar__form { display: flex; flex-direction: column; gap: 32px; }
.cta-spar__head { display: flex; flex-direction: column; gap: 12px; }
.cta-spar__title { font-family: var(--f-serif); font-weight: 400; font-size: 48px; line-height: 1.2; letter-spacing: -2px; color: var(--c-paper); margin: 0; }
.cta-spar__title em { font-style: italic; }
.cta-spar__text { font-family: var(--f-body); font-size: 16px; line-height: 1.5; color: var(--c-paper); margin: 0; max-width: 418px; }

/* Variant "card" — Figma 10436:14332 EXACT via get_design_context:
   Section = CREAM wrapper met rounded-top 48 + py 60/120 + px 52 (dezelfde cream
   als dienst-features ervoor, blendt naadloos). Orange card zit op `.cta-spar__inner`.
   margin-top: -30 voor expertises-overlap-stijl effect; section.pad-bot 120 absorbeert. */
.cta-spar.cta-spar--card {
    background: var(--c-cream);
    margin: 0;
    padding: 60px max(52px, calc((100% - 1200px) / 2)) 120px;   /* pad-x clamped: hoe groter de viewport, hoe groter de pad → orange card max 1200 */
    border-radius: 48px 48px 0 0;
    position: relative;
    z-index: 1;
    margin-top: 0;
    overflow: clip;
}
.cta-spar.cta-spar--card .cta-spar__inner {
    background: var(--c-accent);
    padding: 40px 128px 40px 88px;   /* Figma exact: pl 88, pr 128, py 40 */
    border-radius: 30px;
    grid-template-columns: minmax(0, 1fr) minmax(0, 469px);
    gap: 48px;
    align-items: center;
    /* Geen max-width op inner; breedte controle via section padding + max-width op section */
}
.cta-spar.cta-spar--card .cta-spar__media { height: 250px; padding-left: 0; }
/* Polaroids in card-variant (desktop) — Figma 10436:14332 exact dimensies.
   Posities worden door Osmo flick-cards JS gezet via gsap.to(transform).
   Width/height/radius blijven CSS-controlled. */
.cta-spar.cta-spar--card .cta-spar__polaroid {
    width: 140.971px;
    height: 209.643px;
    border-radius: 30px;
}
.cta-spar.cta-spar--card .cta-spar__polaroid--logo { display: inline-flex; }
.cta-spar.cta-spar--card .cta-spar__polaroid--logo img { width: 81.158px; }
@media (max-width: 1024px) {
    .cta-spar.cta-spar--card { padding: 48px 32px 80px; }
    .cta-spar.cta-spar--card .cta-spar__inner { padding: 40px 48px; gap: 32px; }
}
@media (max-width: 640px) {
    /* Card-variant mobile — Figma 10476:8842 EXACT spec uit get_design_context.
       Section = transparente wrapper. Pad-top 56 cream-gap, pad-bot 112
       (= 64 cream + 48 expertises mt:-48 compensation). Pad-x 24 = orange card 354 wide. */
    .cta-spar.cta-spar--card {
        background: transparent;
        padding: 56px 24px 112px;
        border-radius: 0;
    }
    .cta-spar.cta-spar--card .cta-spar__inner {
        padding: 56px 24px;
        border-radius: 30px;
        grid-template-columns: 1fr;
        gap: 32px;
        /* Geen max-width: inner volgt natural width van section (pad-x 24 = 354 in 402 viewport) */
    }
    .cta-spar.cta-spar--card .cta-spar__form { gap: 32px; }
    .cta-spar.cta-spar--card .cta-spar__media {
        height: 258px;                /* image-container fit voor max polaroid extent */
        padding-left: 0;
    }
    /* Mobile polaroid size — Figma 10476:8842 exact. Posities door Osmo JS getConfig.
       Reset left/top: full-bleed mobile rules zetten left=83.65 etc; card-variant moet
       puur op JS transform vertrouwen, dus base 0/0. */
    .cta-spar.cta-spar--card .cta-spar__polaroid {
        width: 144.13px;
        height: 196.05px;
        border-radius: 18.534px;
        left: 0;
        top: 0;
    }
    .cta-spar.cta-spar--card .cta-spar__polaroid--1,
    .cta-spar.cta-spar--card .cta-spar__polaroid--3,
    .cta-spar.cta-spar--card .cta-spar__polaroid--4,
    .cta-spar.cta-spar--card .cta-spar__polaroid--logo { left: 0; top: 0; }
    .cta-spar.cta-spar--card .cta-spar__polaroid--logo { display: inline-flex; }
}

.btn-magnetic--inverse { border-color: var(--c-paper); }
/* legacy regel verwijderd — vervangen door __fill structuur boven */
/* inverse-hover: geen Figma-state, alleen magnetic pull */

@media (max-width: 1024px) {
    .cta-spar { padding: 80px 32px; }
    .cta-spar__inner { grid-template-columns: 1fr; gap: 48px; }
    .cta-spar__title { font-size: 36px; }
    .cta-spar__media { height: 280px; }
}
@media (max-width: 640px) {
    /* Figma mobile cta_spar (node 10476:9897) — static 3-polaroid waaier + dark peek.
       Exacte coords uit get_design_context. JS skip flick-init op mobile (zie main.js). */
    /* pad-bot 64 + 60 voor footer overlap (-60) of expertises overlap (-48), max = 60 */
    .cta-spar { padding: 64px 24px 124px; border-top-left-radius: 48px; border-top-right-radius: 48px; margin-top: -48px; }
    .cta-spar__inner { grid-template-columns: 1fr; gap: 48px; }
    .cta-spar__title { font-size: 40px; letter-spacing: -2px; }
    .cta-spar__form { gap: 32px; }
    .cta-spar__head { gap: 12px; }

    .cta-spar__media { height: 213px; min-width: 0; padding: 0; }
    /* Polaroid SIZE + radius CSS; POSITION via JS getConfig (Osmo flick).
       left/top: 0 zodat alleen JS-transform telt (anders worden CSS-positions + JS-translate gestapeld). */
    .cta-spar__polaroid {
        width: 113.309px;
        height: 168.506px;
        border-radius: 30px;
        transform-origin: center center;
        left: 0;
        top: 0;
    }
    .cta-spar__polaroid--1,
    .cta-spar__polaroid--3,
    .cta-spar__polaroid--4,
    .cta-spar__polaroid--logo { left: 0; top: 0; }
    /* Kriek (--3) blijft drop-shadow houden voor visuele depth (Figma) */
    .cta-spar__polaroid--3 { filter: drop-shadow(0 0 14px rgba(0,0,0,0.25)); }
}

/* ---------- 11. Checklist (dark) ---------- */
.section--checklist {
    background: var(--c-ink);
    color: var(--c-paper);
    border-radius: var(--radius-lg);
    margin: 0 auto;
    width: var(--container);
    padding-inline: 0;
    overflow: hidden;
}
.section--checklist .container { width: 100%; padding: 0 var(--sp-7); }
.checklist__title {
    font-family: var(--f-serif);
    font-weight: 400;
    font-size: clamp(2rem, 4vw, 3.5rem);
    line-height: 1.1;
    margin: 0 0 var(--sp-7);
    max-width: 18ch;
}
.checklist__grid { display: grid; grid-template-columns: minmax(280px, 1fr) 1.4fr; gap: var(--sp-8); padding-bottom: var(--sp-8); }
.checklist__steps { display: flex; flex-direction: column; gap: var(--sp-5); }
.checklist__step { display: flex; gap: var(--sp-4); align-items: flex-start; }
.checklist__num { font-family: var(--f-serif); font-size: 1.75rem; color: var(--c-accent); min-width: 2.5ch; }
.checklist__step-title { color: var(--c-paper); font-size: var(--fs-md); line-height: 1.4; padding-top: 0.4rem; }
.checklist__items { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-4) var(--sp-6); align-content: start; padding-top: 0.5rem; }
.checklist__item { display: flex; gap: var(--sp-3); align-items: center; padding-block: var(--sp-3); border-bottom: 1px solid var(--c-line-dark); }
.checklist__icon { width: 22px; height: 22px; color: var(--c-accent); flex-shrink: 0; }
@media (max-width: 800px) {
    .checklist__grid { grid-template-columns: 1fr; gap: var(--sp-6); }
    .checklist__items { grid-template-columns: 1fr; }
}

/* Legacy team block — vervangen door pixel-perfect implementatie hierboven */

/* ---------- 13. FAQ — Figma node 10406:10336 (FAQ 1728x704)
   bg #fcfaf4, pb-120 px-84, content w-1200, two cols (387 + flex-1) gap-120
   Cards w-full bg-white border rgba(49,49,49,0.1) rounded-30 p-32 gap-8
   Card head: Arapey 24/1.4/-1 #131313 + orange circle button 48x48 (icon 24, padded 12) rounded-28 */
.faq { background: var(--c-cream); padding: 0 84px 150px; }  /* 120 + 30 voor cta-spar mt:-30 */
/* FAQ direct na de donkere expertises-laag: extra top-padding voor lucht */
.expertises + .faq { padding-top: 120px; }
.faq__inner {
    display: grid;
    grid-template-columns: 387px 1fr;
    gap: 120px;
    max-width: 1200px;
    margin: 0 auto;
}
.faq__col--title { display: flex; flex-direction: column; gap: 16px; max-width: 387px; }
.faq__title {
    font-family: var(--f-serif);
    font-weight: 400;
    font-size: 48px;
    line-height: 1.2;
    letter-spacing: -2px;
    color: var(--c-ink);
    margin: 0;
}
.faq__title em { font-style: italic; }
.faq__lead { font-family: var(--f-body); font-size: 16px; line-height: 1.5; color: var(--c-charcoal); margin: 0; max-width: 297px; }

.faq__cards { display: flex; flex-direction: column; gap: 8px; }
.faq-card {
    background: var(--c-paper);
    border: 1px solid rgba(49,49,49,0.1);
    border-radius: 30px;
    padding: 32px;
    overflow: hidden;
}
.faq-card__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    width: 100%;
    background: transparent;
    border: 0;
    padding: 0;
    text-align: left;
    cursor: pointer;
    color: inherit;
}
.faq-card__q {
    font-family: var(--f-serif);
    font-weight: 400;
    font-size: 24px;
    line-height: 1.4;
    letter-spacing: -1px;
    color: var(--c-ink);
    flex: 1 1 auto;
}
.faq-card__btn {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    background: var(--c-accent);
    border: 1px solid var(--c-accent);
    border-radius: 28px;
    color: var(--c-paper);
    transition: transform var(--t-figma-quick) var(--ease-figma-quick),
                background var(--t-figma-quick) var(--ease-figma-quick);
}
.faq-card[data-open] .faq-card__btn { transform: rotate(180deg); }
/* Hover op de hele vraag-rij → knop reageert + vraag kleurt accent (klikbaarheid duidelijk) */
.faq-card__q { transition: color var(--t-base) var(--ease-out); }
.faq-card__head:hover .faq-card__q { color: var(--c-accent); }
.faq-card__head:hover .faq-card__btn { background: var(--c-accent-dark); border-color: var(--c-accent-dark); transform: scale(1.06); }
.faq-card[data-open] .faq-card__head:hover .faq-card__btn { transform: rotate(180deg) scale(1.06); }
/* Card padding-bottom anim — smooth in/uitvouwen */
.faq-card { transition: padding-bottom var(--t-figma-quick) var(--ease-figma-quick); }
.faq-card[data-open] { padding-bottom: 32px; }
/* Panel height-anim via grid-template-rows trick (0fr ↔ 1fr): CSS-only smooth
   uitvouwen zonder JS height calc. */
.faq-card__panel {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows var(--t-figma-quick) var(--ease-figma-quick);
}
.faq-card[data-open] .faq-card__panel { grid-template-rows: 1fr; }
.faq-card__panel-inner { min-height: 0; overflow: hidden; }
.faq-card__a {
    margin-top: 16px;
    font-family: var(--f-body);
    font-size: 16px;
    line-height: 1.5;
    color: var(--c-charcoal);
}
.faq-card__a p { margin: 0 0 1em; }
.faq-card__a p:last-child { margin-bottom: 0; }

@media (max-width: 1100px) {
    .faq__inner { grid-template-columns: 1fr; gap: 48px; }
    .faq__col--title { max-width: 100%; }
}
@media (max-width: 640px) {
    /* FAQ mobile values: zie later @media 640 block (regel ~1620) — Figma-exact (40px title, 44px btn, 20px svg). Hier alleen niet-conflicterende rules. */
    .faq-card { padding: 24px; border-radius: 32px; }
    .faq-card__q { font-size: 20px; }
}

/* Legacy CTA spar block — vervangen door pixel-perfect implementatie hierboven */

/* ---------- 15. Flick cards (Osmo-style) ---------- */
.section--flick { background: var(--c-cream); }
.flick__title { font-family: var(--f-serif); font-weight: 400; font-size: clamp(2rem, 4vw, 3rem); margin: 0 0 var(--sp-6); }
.flick { position: relative; overflow: hidden; }
.flick__track {
    display: flex;
    gap: var(--sp-5);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    padding-bottom: var(--sp-4);
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}
.flick__track::-webkit-scrollbar { display: none; }
.flick-card {
    flex: 0 0 min(420px, 80vw);
    scroll-snap-align: start;
    background: var(--c-paper);
    border-radius: var(--radius);
    overflow: hidden;
    transition: transform var(--t-base) var(--ease-out);
}
.flick-card:hover { transform: translateY(-4px); }
.flick-card__media { margin: 0; aspect-ratio: 4 / 5; overflow: hidden; }
.flick-card__media img { width: 100%; height: 100%; object-fit: cover; }
.flick-card__body { padding: var(--sp-5); }
.flick-card__label { display: inline-block; font-size: var(--fs-xs); letter-spacing: 0.12em; text-transform: uppercase; color: var(--c-accent); margin-bottom: var(--sp-2); }
.flick-card__title { font-family: var(--f-serif); font-weight: 500; font-size: 1.25rem; margin: 0; }

/* ---------- 16. Site footer — Component 56 onderste deel
   Main: bg #313131 px-84 py-80 rounded-top-30, content w-1200
   Bar:  bg #fcfaf4 py-16, content w-1200
   Negative margin-top -60px laat het oranje van .cta-spar doorlopen
   achter de rounded-top-30 corners (= Figma Separator-effect Component 56) */
.site-footer { margin-top: 0; position: relative; }
.site-footer__main {
    background: var(--c-charcoal);
    padding: 80px 84px;
    border-top-left-radius: 30px;
    border-top-right-radius: 30px;
    color: var(--c-cream);
    margin-top: -60px;       /* default overlap met voorgaande cta-spar (home, diensten, team, nieuws) */
    position: relative;
    z-index: 1;
}
/* Cancel overlap op pages waar laatste section GEEN cta-spar is (contact, 404).
   Default = -60px overlap met cta-spar; deze override zet hem op 0. */
body.page-template-page-contact .site-footer__main,
body.error404 .site-footer__main { margin-top: 0; }
.site-footer__container { display: grid; grid-template-columns: minmax(143px, 1fr) 1fr 1fr 1fr; gap: 64px; max-width: 1200px; margin-inline: auto; align-items: start; }
.footer-col { display: flex; flex-direction: column; gap: 24px; }
.footer-col--brand { display: flex; flex-direction: column; justify-content: space-between; min-height: 250px; gap: 32px; }
.footer-logo { display: inline-flex; width: 143px; height: 125px; }
.footer-logo img { width: 100%; height: 100%; object-fit: contain; }
.socials { display: flex; gap: 12px; align-items: start; }
.socials li { list-style: none; }
.socials a {
    display: inline-flex; align-items: center; justify-content: center;
    width: 36px; height: 36px;
    background: var(--c-cream);
    color: var(--c-charcoal);
    border-radius: 8px;
    transition: transform var(--t-base) var(--ease-out), background var(--t-base) var(--ease-out), color var(--t-base) var(--ease-out);
}
.socials a:hover { background: var(--c-accent); color: var(--c-paper); transform: translateY(-3px); }
.socials svg { width: 20px; height: 20px; }

.footer-col__title { font-family: var(--f-serif); font-weight: 400; font-size: 24px; line-height: 1.4; letter-spacing: -1px; color: var(--c-cream); margin: 0; }
.footer-col__list { display: flex; flex-direction: column; gap: 16px; }
.footer-col__list li { list-style: none; }
.footer-col__list a { display: inline-block; font-family: var(--f-body); font-size: 14px; line-height: 1.5; color: var(--c-cream); transition: color var(--t-base) var(--ease-out), transform var(--t-base) var(--ease-out); }
.footer-col__list a:hover { color: var(--c-accent-soft); transform: translateX(4px); }
.footer-col__address { font-family: var(--f-body); font-size: 14px; line-height: 1.5; color: var(--c-cream); font-style: normal; margin: 0; }
.footer-col__mail { font-family: var(--f-body); font-size: 14px; line-height: 1.5; color: var(--c-cream); }
.footer-col__legal { font-family: var(--f-body); font-size: 14px; line-height: 1.5; color: var(--c-muted); margin: 0; }

.site-footer__bar { background: var(--c-cream); padding: 16px 84px; }
.site-footer__bar-inner { display: flex; align-items: center; justify-content: space-between; max-width: 1200px; margin-inline: auto; gap: 24px; flex-wrap: wrap; }
.site-footer__bar-inner small { font-family: var(--f-body); font-size: 12px; line-height: 1.5; color: var(--c-charcoal); }
.site-footer__legal { display: flex; gap: 24px; align-items: center; flex-wrap: wrap; padding: 0; margin: 0; }
.site-footer__legal li { list-style: none; font-family: var(--f-body); font-size: 12px; color: var(--c-muted); }
.site-footer__legal a { color: var(--c-muted); text-decoration: underline; text-underline-offset: 2px; }

@media (max-width: 1100px) {
    .site-footer__main { padding: 64px 32px; }
    .site-footer__container { grid-template-columns: 1fr 1fr; gap: 48px; }
    .footer-col--brand { grid-column: 1 / -1; min-height: 0; flex-direction: row; align-items: center; justify-content: space-between; }
    .site-footer__bar { padding: 16px 24px; }
}
@media (max-width: 640px) {
    /* Mobile footer — Figma 10476:10011 EXACT.
       Main Container: flex-col items-center w-full gap-48
       Cols (Contact/Diensten/Menu): w-full items-start gap-24 (text left-aligned)
       Brand: items-center (logo gecentreerd)
       Socials: max-content gap-12 (door parent items-center horizontaal gecentreerd)
       Bar: stacked + centered */
    .site-footer__container {
        display: flex;
        flex-direction: column;
        align-items: center;        /* parent centreert items zonder eigen w-full */
        gap: 48px;
        grid-template-columns: none;
    }
    .site-footer__container > :nth-child(1) { order: 1; }   /* brand (logo) */
    .site-footer__container > :nth-child(4) { order: 2; }   /* Contact-adres col */
    .site-footer__container > :nth-child(2) { order: 3; }   /* Diensten */
    .site-footer__container > :nth-child(3) { order: 4; }   /* Menu */
    /* Cols krijgen w-full → text left-aligned naar container-left (Figma items-start binnen cols) */
    .site-footer__container > .footer-col { width: 100%; min-width: 0; }
    .footer-col--brand { flex-direction: column; align-items: center; gap: 24px; min-height: 0; justify-content: center; }   /* logo centered binnen brand w-full */
    .site-footer__container > .socials { order: 5; justify-content: center; }   /* socials = max-content → parent items-center centreert horizontaal */
    .footer-logo { width: 116px; height: 101px; }
    .site-footer__bar-inner { flex-direction: column; align-items: center; justify-content: center; gap: 8px; text-align: center; }
    .site-footer__legal { gap: 12px; justify-content: center; }
}

/* ---------- 17. Archive + post-card ---------- */
.section--archive { padding-block: var(--sp-9); }
.archive-header { margin-bottom: var(--sp-7); }
.archive-header__title { font-family: var(--f-serif); font-weight: 400; font-size: clamp(2rem, 4vw, 3rem); margin: 0; }
.post-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: var(--sp-6); }
.post-card { background: var(--c-paper); border-radius: var(--radius); overflow: hidden; }
.post-card__media { display: block; margin: 0; aspect-ratio: 4 / 3; overflow: hidden; }
.post-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--t-slow) var(--ease-out); }
.post-card:hover .post-card__media img { transform: scale(1.04); }
.post-card__body { padding: var(--sp-5); }
.post-card__date { font-size: var(--fs-xs); color: var(--c-muted); letter-spacing: 0.1em; text-transform: uppercase; }
.post-card__title { font-family: var(--f-serif); font-weight: 500; font-size: 1.25rem; margin: var(--sp-2) 0 var(--sp-3); }
.post-card__excerpt { color: var(--c-muted); margin: 0; }

/* ---------- 18. Single ---------- */
.section--single { padding-block: var(--sp-9); }
.single-header { margin-bottom: var(--sp-6); }
.single-header__date { font-size: var(--fs-xs); color: var(--c-muted); letter-spacing: 0.1em; text-transform: uppercase; }
.single-header__title { font-family: var(--f-serif); font-weight: 400; font-size: clamp(2rem, 5vw, 4rem); line-height: 1.05; margin: 0.5rem 0 0; }
.single-media { margin: 0 0 var(--sp-7); border-radius: var(--radius); overflow: hidden; aspect-ratio: 16 / 9; }
.single-media img { width: 100%; height: 100%; object-fit: cover; }

/* ---------- 19. 404 ---------- */
.section--404 { padding-block: var(--sp-10); text-align: center; }
.four-oh-four__code { font-family: var(--f-serif); font-size: clamp(5rem, 16vw, 12rem); line-height: 0.9; color: var(--c-accent); margin: 0; }
.four-oh-four__title { font-family: var(--f-serif); font-weight: 400; font-size: clamp(1.75rem, 3vw, 2.5rem); margin: var(--sp-4) 0 var(--sp-2); }
.four-oh-four__lead { color: var(--c-muted); max-width: 50ch; margin: 0 auto var(--sp-6); }

/* ---------- 20. Scroll-into-view reveal ----------
   Elke [data-section] komt zacht omhoog-faden in beeld. Pre-hide gebeurt ALLEEN
   wanneer JS actief is (html.andco-reveal, sync gezet in <head>) én de bezoeker
   geen reduced-motion wil → geen FOUC, en zonder JS gewoon zichtbaar.
   .is-revealed wordt door initReveal() (IntersectionObserver) gezet. */
[data-reveal] { opacity: 1; transform: none; }   /* legacy hook, blijft no-op */

@media (prefers-reduced-motion: no-preference) {
    html.andco-reveal [data-section] {
        opacity: 0;
        transform: translateY(24px);
        transition: opacity 0.9s var(--ease-out), transform 0.9s var(--ease-out);
        will-change: opacity, transform;
    }
    html.andco-reveal [data-section].is-revealed {
        opacity: 1;
        transform: none;
        will-change: auto;
    }
}

/* ---------- 22. MOBILE OVERRIDES — alle section-specifieke Figma 402px waardes
   Spec uit Wireframe client mobile (10476:5517) — node IDs per sectie in comments. */
@media (max-width: 640px) {

    /* === HERO (10476:9779, 402x898) ===
       Figma: pt-184 pb-64 px-24, content 354w, gap-32 inner-text-vs-button, gap-16 mark-vs-text
       Title Arapey 32/1.3/-2 (vs desktop 72), image rounded-30 */
    /* === HERO mobile === (Figma node 10476:9779) — pt-184 pb-64 px-24, gap-64 (text↔image), image h-258 */
    .hero { padding: 184px 24px 64px; }
    .hero__inner { gap: 32px; margin-bottom: 64px; max-width: 354px; }
    .hero__content-group { gap: 16px; width: 100%; }
    .hero__mark { width: 176px; height: 52px; }
    .hero__text { gap: 24px; max-width: 354px; }
    .hero__title { font-size: 32px; line-height: 1.3; letter-spacing: -2px; }
    .hero__subtitle { font-size: 16px; max-width: 354px; }
    .hero__media { border-radius: 32px; max-width: 354px; aspect-ratio: 354 / 258; }

    /* === SERVICES STRIP (USPs) mobile ===
       Figma: 3 cards stacked, icoon DARK #131313 (NIET orange!), title Arapey 24/1.4/-1 */
    .services-strip { padding: 48px 24px 112px; }  /* 64 + 48 voor expertises mt:-48 */
    .services-strip__inner { grid-template-columns: 1fr; gap: 32px; }
    .usp-card { gap: 16px; }
    .usp-card__icon {
        background: var(--c-ink) !important;   /* mobile = dark, niet orange */
        width: 48px; height: 48px;
    }
    .usp-card__title { font-size: 24px; line-height: 1.4; letter-spacing: -1px; }
    .usp-card__sub { font-size: 14px; }

    /* === OVERZICHT EXPERTISES (dark) mobile === */
    /* pad-bot 64 + 48 overlap voor team mt:-48 ([[feedback-andco-overlap-compensation]]) */
    .expertises { padding: 64px 24px 112px; border-top-left-radius: 48px; border-top-right-radius: 48px; margin-top: -48px; }
    .expertises__inner { gap: 48px; }
    .expertises__title { font-size: 32px; letter-spacing: -1px; }
    .expertises__cols { grid-template-columns: 1fr; gap: 32px; }
    .expertises-col { gap: 16px; }
    .expertises-col__title { font-size: 24px; line-height: 1.4; letter-spacing: -1px; padding-bottom: 12px; }

    /* === TEAM mobile === — carousel reeds gezet bij @700, hier finetuning
       geen compensation needed: faq erna heeft mt:0 */
    .team { padding: 64px 0 64px 24px; border-top-left-radius: 48px; border-top-right-radius: 48px; margin-top: -48px; }
    .team__inner { gap: 40px; }
    .team__title { font-size: 40px; letter-spacing: -2px; max-width: 354px; }
    .team__head { padding-right: 24px; }
    .team-card { flex: 0 0 288px; max-width: 288px; }
    .team-card__name { font-size: 20px; line-height: 28px; }

    /* === FAQ mobile === pad-bot 64 + 48 voor cta-spar mt:-48 */
    .faq { padding: 0 24px 112px; }
    .expertises + .faq { padding-top: 64px; }
    .faq__inner { grid-template-columns: 1fr; gap: 32px; }
    .faq__col--title { max-width: 354px; }
    .faq__title { font-size: 40px; line-height: 1.2; letter-spacing: -2px; }
    .faq-card { padding: 24px; border-radius: 32px; }
    .faq-card__head { gap: 16px; }
    .faq-card__q { font-size: 20px; line-height: 1.4; letter-spacing: -0.5px; }
    .faq-card__btn { width: 44px; height: 44px; flex: 0 0 44px; }
    .faq-card__btn svg { width: 20px; height: 20px; }
    .faq-card__a { font-size: 14px; }

    /* === CTA-SPAR mobile === — regels staan in @media (max-width: 640px) hierboven.
       Dark logo image binnen polaroid--logo (Figma + icon size 81.158px). */
    .cta-spar__polaroid--logo img { width: 81.158px; }

    /* === FOOTER (Component 56 footer) mobile — Figma 10476:10011 ===
       margin-top: in regel hieronder (consolidated met section-divider rule, -48 wint) */
    .site-footer__main { padding: 64px 24px; border-top-left-radius: 48px; border-top-right-radius: 48px; }
    /* Container/brand/areas: zie eerdere @media 640 block hierboven (regel ~1535) — NIET dupliceren. */
    .footer-logo { width: 116px; height: 101px; }
    .footer-col__list a { font-size: 14px; }
    .footer-col__address, .footer-col__mail, .footer-col__legal { font-size: 14px; }
    .site-footer__bar { padding: 16px 24px; }
    /* bar-inner stack + center → in eerste @640 block; geen overrides hier. */

    /* === SECTION DIVIDERS — orange bleed effect ook op mobile === */
    .site-footer__main { margin-top: -48px; }

    /* === HEADER mobile (Component 43 mobile state) ===
       Figma toont kleinere logo + hamburger dark-circle 48x48 */
    .site-header { padding: 8px 24px; }
    .site-header__container { padding: 0; }
    .site-header__logo { width: 78px; height: 68px; }
}

/* ---------- 23. Diensten overview page — 6 cards 3x2 grid
   Geen Figma-spec — passende layout volgens &Co tokens (cream bg,
   ink type, arapey heading, magnetic hover, 1117ms QUICK ease). */
.diensten-overview {
    background: var(--c-cream);
    padding: 184px 84px 120px;
    border-radius: 0 0 30px 30px;
}
.diensten-overview__inner { max-width: 1200px; margin: 0 auto; }
.diensten-overview__head {
    display: flex; flex-direction: column; gap: 16px;
    max-width: 760px; margin-bottom: 64px;
}
.diensten-overview__title {
    font-family: var(--f-serif);
    font-size: 72px; line-height: 1.1; letter-spacing: -2px;
    color: var(--c-ink); margin: 0;
}
.diensten-overview__title em { font-style: italic; }
.diensten-overview__sub {
    font-family: var(--f-body);
    font-size: 18px; line-height: 1.5; color: var(--c-muted); margin: 0;
}
.diensten-overview__grid {
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px;
}
.dienst-card {
    position: relative; display: block; text-decoration: none;
    background: var(--c-paper);
    border: 1px solid var(--c-line); border-radius: 30px;
    padding: 40px 32px; min-height: 280px;
    color: var(--c-ink);
    transition: transform var(--t-figma-quick) var(--ease-figma-quick),
                background var(--t-figma-quick) var(--ease-figma-quick),
                border-color var(--t-figma-quick) var(--ease-figma-quick);
    will-change: transform;
}
.dienst-card:hover,
.dienst-card:focus-visible {
    transform: translateY(-4px);
    background: var(--c-cream-2);
    border-color: rgba(228, 81, 34, 0.3);
}
.dienst-card__inner {
    display: flex; flex-direction: column; gap: 16px; height: 100%;
}
.dienst-card__title {
    font-family: var(--f-serif);
    font-size: 28px; line-height: 1.2; letter-spacing: -1px;
    color: var(--c-ink); margin: 0;
}
.dienst-card__teaser {
    font-family: var(--f-body);
    font-size: 15px; line-height: 1.55; color: var(--c-muted);
    margin: 0; flex: 1;
}
.dienst-card__cta {
    display: inline-flex; align-items: center; gap: 8px;
    font-family: var(--f-body); font-size: 14px;
    color: var(--c-accent);
    transition: gap var(--t-figma-quick) var(--ease-figma-quick);
}
.dienst-card:hover .dienst-card__cta,
.dienst-card:focus-visible .dienst-card__cta { gap: 14px; }
.dienst-card__cta svg {
    transition: transform var(--t-figma-quick) var(--ease-figma-quick);
}
.dienst-card:hover .dienst-card__cta svg { transform: translateX(2px); }

/* Uniforme "Lees meer"-CTA: onderlijn groeit links→rechts onder het label (team + dienst) */
.team-card__cta > span:first-child,
.dienst-card__cta > span:first-child { position: relative; }
.team-card__cta > span:first-child::after,
.dienst-card__cta > span:first-child::after {
    content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: 1px;
    background: currentColor; transform: scaleX(0); transform-origin: left;
    transition: transform var(--t-base) var(--ease-out);
}
.team-card:hover .team-card__cta > span:first-child::after,
.dienst-card:hover .dienst-card__cta > span:first-child::after { transform: scaleX(1); }

@media (max-width: 1200px) {
    .diensten-overview { padding: 160px 48px 96px; }
    .diensten-overview__grid { grid-template-columns: repeat(2, 1fr); }
    .diensten-overview__title { font-size: 56px; }
}
@media (max-width: 640px) {
    .diensten-overview { padding: 144px 24px 64px; }
    .diensten-overview__head { margin-bottom: 40px; }
    .diensten-overview__title { font-size: 40px; letter-spacing: -1.5px; }
    .diensten-overview__sub { font-size: 16px; }
    .diensten-overview__grid { grid-template-columns: 1fr; gap: 16px; }
    .dienst-card { padding: 28px 24px; min-height: 0; border-radius: 32px; }
    .dienst-card__title { font-size: 22px; }
}

/* ============================================================================
   24. Hero-page (generic) — Figma 10476:5224 desktop / 10436:12459 mobile
   Exact spec uit get_design_context (Figma):
     desktop: bg #313131, pt-136 pb-88 px-52, content w-1200 gap-56 col
     mobile:  bg #313131, pt-136 pb-? px-24, content w-354, image stack-below text
   ============================================================================ */
.hero-page {
    background: var(--c-charcoal);
    color: var(--c-cream);
    padding: 136px 52px 88px;
    overflow: clip;
}
.hero-page__inner {
    max-width: 1200px; margin: 0 auto;
    display: flex; flex-direction: column; gap: 56px;
}
.hero-page__crumbs {
    display: flex; align-items: center; gap: 0;
    color: var(--c-cream);
}
.hero-page__crumb-home {
    display: inline-flex; align-items: center; justify-content: center;
    width: 40px; height: 40px; padding: 8px; border-radius: 12px;
    color: var(--c-cream); text-decoration: none;
}
.hero-page__crumb-home svg { width: 24px; height: 24px; }
.hero-page__crumb-sep,
.hero-page__crumb {
    display: inline-flex; align-items: center; height: 40px; padding: 0 8px;
    font-family: var(--f-body); font-size: 16px; line-height: 1.5;
    color: var(--c-cream); text-decoration: none;
}
.hero-page__crumb--current { color: var(--c-cream); cursor: default; }
.hero-page__main {
    display: flex; align-items: center; justify-content: space-between;
    width: 1200px; max-width: 100%;
}
.hero-page__text {
    width: 661px; flex: 0 0 661px;
    display: flex; flex-direction: column; gap: 24px;
    color: var(--c-cream);
}
.hero-page__title {
    font-family: var(--f-serif); font-style: normal;
    font-size: 48px; line-height: 1.2; letter-spacing: -2px;
    color: var(--c-cream); margin: 0;
}
.hero-page__title em { font-style: italic; }
.hero-page__lead {
    /* Mobile-only intro per Figma 10436:12466 — Body/Text-base 16/24/#fcfaf4 */
    display: none;
    font-family: var(--f-body); font-size: 16px; line-height: 24px;
    color: var(--c-cream); margin: 0;
}
.hero-page__sub {
    font-family: var(--f-body); font-size: 16px; line-height: 1.5;
    letter-spacing: 0; color: var(--c-cream); margin: 0;
}
.hero-page__media {
    margin: 0; width: 457px; height: 340px;
    border-radius: 30px; overflow: hidden; flex: 0 0 auto;
}
.hero-page__media img,
.hero-page__media video { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ============================================================================
   25. Team-overview — Figma 10436:14389 desktop / 10436:12470 mobile
   Exact spec:
     desktop: bg #fcfaf4, pt-120 pb-60 px-52, rounded-top-30
              inner w-1200, gap-16, 3 cards × w-389.333 h-728
     card: bg white, border 1px rgba(49,49,49,0.1), border-radius 40, p-32, gap-24
       image w-full h-424 rounded-30
       text-and-button container: flex-1 gap-24 col
         text container gap-16 col
           name: Arapey 32 / 1.3 / -2px / color #131313 (text-black)
           contact items col, py-8 per row, gap-12 row
             icon size-24 (color current = #313131)
             link Open Sans 16 / 1.5 / phone #313131, mail #000 underline
         cta "Lees meer": h-48 row items-center, gap auto
           label Open Sans 16/1.5 #313131 + line-9 underneath (decorative underline)
           arrow-circle: size-48 -rotate-45 border 1px #313131 rounded-28 p-4
                         (arrow_downward icon 24×24 inside)
   ============================================================================ */
.team-overview {
    background: var(--c-cream);
    padding: 120px 52px 90px;  /* 60 + 30 voor cta-spar mt:-30 */
    border-radius: 30px 30px 0 0;
    margin-top: -30px; /* overlap met separator/dark above */
    position: relative; z-index: 1;
    overflow: clip;
}
.team-overview__inner { max-width: 1200px; margin: 0 auto; }
.team-overview__grid {
    display: flex; flex-wrap: wrap; gap: 16px; align-items: flex-start;
    width: 1200px; max-width: 100%;
}
.team-member {
    flex: 0 0 calc((100% - 32px) / 3);
    min-height: 728px; /* baseline; card-height groeit content-driven bij open */
    background: var(--c-paper);
    border: 1px solid rgba(49, 49, 49, 0.1);
    border-radius: 40px; padding: 32px;
    display: flex; flex-direction: column; gap: 24px;
    /* Geen overflow:hidden op card — clipping gebeurt al binnen .team-member__expand-inner
       zodat border-radius en eventuele shadows niet worden aangetast. */
    transition: transform var(--t-base) var(--ease-out), box-shadow var(--t-base) var(--ease-out), border-color var(--t-base) var(--ease-out);
}
/* Hover: subtiele lift + schaduw + accent-rand + media-zoom. Niet liften wanneer
   de kaart open (.is-open) staat — anders schuift een uitgeklapte bio tijdens lezen. */
.team-member:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); border-color: rgba(228,81,34,0.25); }
.team-member.is-open:hover { transform: none; }
.team-member__media {
    margin: 0; width: 100%; height: 424px; flex: 0 0 424px;
    border-radius: 30px; overflow: hidden; background: var(--c-cream-2);
}
.team-member__media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform var(--t-slow) var(--ease-out); }
.team-member:hover .team-member__media img { transform: scale(1.04); }
.team-member__body {
    flex: 1 1 auto; min-height: 0;
    display: flex; flex-direction: column; gap: 24px;
}
.team-member__text { display: flex; flex-direction: column; gap: 16px; }
.team-member__name {
    font-family: var(--f-serif); font-style: normal;
    font-size: 32px; line-height: 1.3; letter-spacing: -2px;
    color: var(--c-ink); /* #131313 */
    margin: 0;
}
.team-member__contact {
    display: flex; flex-direction: column; gap: 0;
    margin: 0; padding: 0; list-style: none;
}
.team-member__contact-item {
    display: flex; align-items: center; gap: 12px; padding: 8px 0;
}
.team-member__contact-icon {
    display: inline-flex; align-items: center; justify-content: center;
    width: 24px; height: 24px; color: var(--c-charcoal); flex: 0 0 24px;
}
.team-member__contact-icon svg { width: 24px; height: 24px; }
.team-member__contact-link {
    font-family: var(--f-body); font-size: 16px; line-height: 1.5;
    color: var(--c-charcoal); /* #313131 voor phone */
    text-decoration: none;
}
.team-member__contact-link--mail {
    color: #000000; /* text-black */
    text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px;
}
.team-member__contact-link:hover { color: var(--c-accent); }
/* Mobile-only bio + quote + signature (Figma 10436:12752/12753/12754) */
.team-member__bio,
.team-member__quote,
.team-member__signature { display: block; }

/* Clean accordion — ÉÉN height-transition (grid-row 0fr↔1fr).
   Geen parallel opacity/padding transitions die scheef lopen. Spacing tussen
   text-block en expand wordt geregeld via gap-24 op de body (al aanwezig). */
.team-member__expand {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows var(--t-figma-quick) var(--ease-figma-quick);
}
.team-member__expand[hidden] { display: grid; }
/* Collapsed-state: cancel de gap-16 die .team-member__text als flex-parent toevoegt
   tussen contact-list en expand. Bij collapse heeft expand height 0 maar de gap
   bleef visueel zichtbaar → extra spacing onder contact-block. */
.team-member:not(.is-open) .team-member__text > .team-member__expand { margin-top: -16px; }
.team-member.is-open .team-member__text > .team-member__expand { margin-top: 0; }
.team-member__expand-inner {
    min-height: 0; overflow: hidden;
    display: flex; flex-direction: column; gap: 20px;
}
.team-member.is-open .team-member__expand { grid-template-rows: 1fr; }
/* Open-state: 180° flip vanaf Figma-default (-45 → 135 = visueel ↘ → ↖).
   Eén schone transitie op transform, synchrone met grid-row expand. */
.team-overview .team-member.is-open .team-member__cta-arrow svg {
    transform: rotate(135deg);
    background: var(--c-accent); color: var(--c-cream); border-color: var(--c-accent);
}
.team-member__bio {
    font-family: var(--f-body); font-size: 16px; line-height: 1.5;
    color: var(--c-charcoal); margin: 0;
}
.team-member__quote {
    font-family: var(--f-body); font-style: italic;
    font-size: 16px; line-height: 1.5;
    color: var(--c-accent); /* #E45122 */
    margin: 0; padding: 0; border: 0;
}
.team-member__signature {
    margin: 0; width: 143px; height: 77px;
}
.team-member__signature img { width: 100%; height: 100%; object-fit: contain; display: block; }
/* CTA "Lees meer" + rotate-45 arrow-circle ----------------------------------- */
.team-member__cta {
    display: inline-flex; align-items: center; justify-content: center; gap: 0;
    height: 48px; padding: 0; text-decoration: none;
    align-self: flex-start;
}
.team-member__cta-label {
    position: relative;
    font-family: var(--f-body); font-size: 16px; line-height: 1.5;
    color: var(--c-charcoal);
    padding-bottom: 0;
}
.team-member__cta-label::after {
    content: ""; display: block; height: 1px; background: var(--c-charcoal);
    margin-top: 2px; width: 100%;
    transition: width var(--t-figma-quick) var(--ease-figma-quick);
}
.team-member__cta-arrow {
    display: inline-flex; align-items: center; justify-content: center;
    width: 48px; height: 48px; margin-left: 4px;
}
.team-member__cta-arrow svg {
    width: 24px; height: 24px;
    color: var(--c-charcoal);
    border: 1px solid var(--c-charcoal); border-radius: 28px;
    padding: 6px; box-sizing: content-box;
    /* Figma design-startpunt: wrapper -rotate-45 → pijl ↘ SE */
    transform: rotate(-45deg);
    transition: transform var(--t-figma-quick) var(--ease-figma-quick),
                background var(--t-figma-quick) var(--ease-figma-quick),
                color var(--t-figma-quick) var(--ease-figma-quick),
                border-color var(--t-figma-quick) var(--ease-figma-quick);
}
.team-member__cta:hover .team-member__cta-arrow svg,
.team-member__cta:focus-visible .team-member__cta-arrow svg {
    /* +45° CCW verder (van ↘ → →) + accent-fill (1117ms QUICK easing) */
    transform: rotate(-90deg);
    background: var(--c-accent); color: var(--c-cream); border-color: var(--c-accent);
}

/* MOBILE — Figma 10436:12459 (hero) + 10436:12470 (services stacked)
   Hero exact: pb-56 pt-136 px-24, content gap-56 (breadcrumb→content),
   inner-content gap-64 (text→image), image w-354 h-248 rounded-40 */
@media (max-width: 768px) {
    .hero-page { padding: 136px 24px 86px; }  /* 56 + 30 voor team-overview mt:-30 */
    .hero-page__inner { gap: 56px; }
    .hero-page__main {
        flex-direction: column; gap: 64px; width: 100%; align-items: flex-start;
    }
    .hero-page__text { width: 100%; flex: 1 1 auto; gap: 24px; }
    .hero-page__title { font-size: 32px; line-height: 1.3; letter-spacing: -2px; } /* H4 token */
    .hero-page__lead { display: block; }  /* mobile-only */
    .hero-page__media {
        width: 100%; height: 248px; max-width: 354px;
        border-radius: 32px; /* mobile losse afb 32 (Jos feedback 2026-05-21) */
    }
    .team-overview { padding: 64px 24px 108px; }  /* 60 + 48 voor cta-spar mt:-48 mobile */
    .team-overview__grid { flex-direction: column; width: 100%; gap: 16px; }
    /* Mobile card-gap 40 (Figma 10436:12472), card padding 32, height auto */
    .team-member { flex: 1 1 auto; width: 100%; height: auto; min-height: 0; padding: 32px; gap: 40px; border-radius: 32px; }
    .team-member__media { height: 366px; aspect-ratio: auto; flex: 0 0 366px; border-radius: 24px; }
    /* Mobile: zelfde collapse/expand gedrag als desktop — 'Lees meer' toggle blijft actief.
       Geen always-expanded mobile (Jos's gevraagd gedrag is accordion via JS). */
    .team-member__body { gap: 16px; flex: 0 0 auto; min-height: auto; }
    .team-member__text { gap: 16px; }
}

/* ---------- Team detail (/team/{slug}/) ---------- */
.team-detail {
    background: var(--c-cream);
    padding: 96px 52px 120px;
    border-radius: 30px 30px 0 0;
    margin-top: -30px; position: relative; z-index: 1;
}
.team-detail__inner { max-width: 720px; margin: 0 auto; }
.team-detail__content { display: flex; flex-direction: column; gap: 32px; }
.team-detail__contact {
    display: flex; flex-direction: column; gap: 0;
    margin: 0; padding: 0; list-style: none;
}
.team-detail__contact li {
    display: flex; align-items: center; gap: 12px; padding: 8px 0;
    font-family: var(--f-body); font-size: 16px; color: var(--c-charcoal);
}
.team-detail__contact svg { color: var(--c-charcoal); flex: 0 0 24px; }
.team-detail__contact a { color: var(--c-charcoal); text-decoration: none; }
.team-detail__contact a.is-mail { color: #000; text-decoration: underline; text-underline-offset: 3px; }
.team-detail__contact a:hover { color: var(--c-accent); }
.team-detail__bio {
    font-family: var(--f-body); font-size: 17px; line-height: 1.65;
    color: var(--c-charcoal);
}
.team-detail__bio p { margin: 0 0 18px; }
.team-detail__bio p:last-child { margin-bottom: 0; }
.team-detail__quote {
    font-family: var(--f-body); font-style: italic;
    font-size: 16px; line-height: 1.5; color: var(--c-accent);
    margin: 0; padding: 0; border: 0;
}
.team-detail__signature { margin: 0; width: 143px; height: 77px; }
.team-detail__signature img { width: 100%; height: 100%; object-fit: contain; display: block; }

@media (max-width: 640px) {
    .team-detail { padding: 64px 24px 80px; }
    .team-detail__content { gap: 24px; }
    .team-detail__bio { font-size: 16px; }
}

/* ============================================================================
   26. Nieuws-featured — Figma 10436:14425 (dark hero met featured post)
   ============================================================================ */
.nieuws-featured {
    background: var(--c-charcoal); color: var(--c-cream);
    padding: 136px 52px 0;
    overflow: clip;
}
.nieuws-featured__inner {
    max-width: 1200px; margin: 0 auto;
    display: flex; flex-direction: column; gap: 32px; align-items: flex-start;
}
.nieuws-featured__crumbs {
    display: flex; align-items: center; gap: 0; color: var(--c-cream);
}
.nieuws-featured__crumb-home {
    display: inline-flex; align-items: center; justify-content: center;
    width: 40px; height: 40px; padding: 8px; border-radius: 12px;
    color: var(--c-cream); text-decoration: none;
}
.nieuws-featured__crumb-home svg { width: 24px; height: 24px; }
.nieuws-featured__crumb-sep,
.nieuws-featured__crumb {
    display: inline-flex; align-items: center; height: 40px; padding: 0 8px;
    font-family: var(--f-body); font-size: 16px; line-height: 1.5;
    color: var(--c-cream);
}
.nieuws-featured__body {
    display: flex; gap: 112px; align-items: center; justify-content: center;
    width: 100%; padding-bottom: 64px;
}
.nieuws-featured__left {
    flex: 1 1 0; display: flex; flex-direction: column; gap: 72px;
    padding-top: 48px;
}
.nieuws-featured__eyebrow {
    font-family: var(--f-body); font-size: 16px; line-height: 1.5;
    color: var(--c-cream);
}
.nieuws-featured__title {
    font-family: var(--f-serif); font-style: normal;
    font-size: 48px; line-height: 1.2; letter-spacing: -2px;
    color: var(--c-cream); margin: 0;
}
.nieuws-featured__tags {
    display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none;
}
.nieuws-featured__cta {
    display: inline-flex; align-items: center; height: 48px; gap: 0;
    text-decoration: none; align-self: flex-start;
}
.nieuws-featured__cta-label {
    font-family: var(--f-body); font-size: 16px; line-height: 1.5;
    color: var(--c-cream); position: relative; padding-bottom: 2px;
}
.nieuws-featured__cta-label::after {
    content: ""; display: block; height: 1px; background: var(--c-cream);
    margin-top: 2px;
}
.nieuws-featured__cta-arrow {
    display: inline-flex; align-items: center; justify-content: center;
    width: 48px; height: 48px; margin-left: 4px;
}
.nieuws-featured__cta-arrow svg {
    width: 24px; height: 24px; color: var(--c-cream);
    border: 1px solid var(--c-cream); border-radius: 28px; padding: 6px;
    box-sizing: content-box; transform: rotate(-45deg);
    transition: transform var(--t-figma-quick) var(--ease-figma-quick),
                background var(--t-figma-quick) var(--ease-figma-quick),
                color var(--t-figma-quick) var(--ease-figma-quick);
}
.nieuws-featured__cta:hover .nieuws-featured__cta-arrow svg,
.nieuws-featured__cta:focus-visible .nieuws-featured__cta-arrow svg {
    transform: rotate(-90deg);
    background: var(--c-cream); color: var(--c-charcoal);
}
.nieuws-featured__right {
    width: 377px; flex: 0 0 377px;
    display: flex; flex-direction: column; gap: 56px;
    padding-top: 48px;
}
.nieuws-featured__date {
    font-family: var(--f-body); font-size: 16px; line-height: 1.5;
    color: var(--c-cream);
}
.nieuws-featured__author-card {
    display: flex; align-items: center; gap: 16px;
    background: var(--c-cream); border: 1px solid rgba(49, 49, 49, 0.1);
    border-radius: 16px; padding: 16px;
}
.nieuws-featured__avatar {
    margin: 0; width: 93px; height: 110px;
    border-radius: 16px; overflow: hidden; background: var(--c-cream-2);
    flex: 0 0 93px;
}
.nieuws-featured__avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.nieuws-featured__author-text { display: flex; flex-direction: column; gap: 4px; }
.nieuws-featured__author-name {
    font-family: var(--f-serif); font-size: 24px; line-height: 1.4;
    letter-spacing: -1px; color: var(--c-ink); margin: 0;
}
.nieuws-featured__author-role {
    font-family: var(--f-body); font-size: 16px; line-height: 1.5;
    color: var(--c-charcoal); margin: 0;
}

/* ============================================================================
   27. Nieuws chips (light + dark) — gedeeld door featured/grid/single
   bg #fcfaf4|#313131, px-16 py-6 rounded-80, Open Sans 12/1.5
   ============================================================================ */
.nieuws-chip {
    display: inline-flex; align-items: center;
    padding: 6px 16px; border-radius: 80px;
    font-family: var(--f-body); font-size: 12px; line-height: 1.5;
    white-space: nowrap;
}
.nieuws-chip--light { background: var(--c-cream); color: var(--c-charcoal); }
.nieuws-chip--dark { background: var(--c-charcoal); color: var(--c-paper); }

/* ============================================================================
   28. Nieuws-grid — Figma 10436:14449 (Recente artikelen)
   ============================================================================ */
.nieuws-grid {
    background: var(--c-cream);
    padding: 120px 52px 150px;  /* 120 + 30 voor cta-spar mt:-30 */
    border-radius: 30px 30px 0 0;
    margin-top: -30px; position: relative; z-index: 1;
}
.nieuws-grid__inner {
    max-width: 1200px; margin: 0 auto;
    display: flex; flex-direction: column; gap: 56px; align-items: center;
}
.nieuws-grid__head { width: 100%; max-width: 1200px; }
.nieuws-grid__title {
    font-family: var(--f-serif); font-size: 48px; line-height: 1.2;
    letter-spacing: -2px; color: var(--c-ink); margin: 0;
}
.nieuws-grid__title-reg { font-style: normal; font-size: 48px; }
.nieuws-grid__title-ital {
    font-style: italic; font-size: 56px; line-height: 1.2; letter-spacing: -2px;
}
.nieuws-grid__list {
    display: grid; grid-template-columns: repeat(3, 1fr);
    /* Figma: column-gap 16 tussen cards in row, row-gap 56 tussen rijen
       (matches "Recente artikelen" inner gap-56 col als visuele rhythm) */
    column-gap: 16px; row-gap: 56px;
    width: 100%; align-items: flex-start;
}
.nieuws-card {
    display: flex; flex-direction: column; gap: 24px;
    text-decoration: none; color: var(--c-ink);
    transition: transform var(--t-figma-quick) var(--ease-figma-quick);
}
.nieuws-card:hover { transform: translateY(-6px); }
.nieuws-card__media {
    margin: 0; width: 100%; height: 424px;
    border-radius: 30px; overflow: hidden; background: var(--c-cream-2);
    transition: box-shadow var(--t-base) var(--ease-out);
}
.nieuws-card__media img {
    width: 100%; height: 100%; object-fit: cover; display: block;
    transition: transform var(--t-slow) var(--ease-out);
}
.nieuws-card:hover .nieuws-card__media { box-shadow: var(--shadow-lg); }
.nieuws-card:hover .nieuws-card__media img { transform: scale(1.05); }
.nieuws-card__placeholder {
    width: 100%; height: 100%;
    background: linear-gradient(135deg, var(--c-cream-2), var(--c-cream));
}
.nieuws-card__body {
    display: flex; flex-direction: column; gap: 24px; padding: 0 8px;
}
.nieuws-card__meta { display: flex; flex-direction: column; gap: 8px; }
.nieuws-card__author {
    font-family: var(--f-body); font-size: 14px; line-height: 1.5;
    color: rgba(19, 19, 19, 0.5);
}
.nieuws-card__title {
    font-family: var(--f-serif); font-size: 24px; line-height: 1.4;
    letter-spacing: -1px; color: var(--c-ink); margin: 0;
    transition: color var(--t-base) var(--ease-out);
}
.nieuws-card:hover .nieuws-card__title { color: var(--c-accent); }
.nieuws-card__footer {
    display: flex; align-items: center; justify-content: space-between;
}
.nieuws-card__date {
    font-family: var(--f-body); font-size: 14px; line-height: 1.5;
    color: rgba(19, 19, 19, 0.5);
}

/* ============================================================================
   29. Nieuws single — Figma 10436:14618 (Nieuwsdetail)
   ============================================================================ */
.nieuws-single { background: var(--c-cream); }
.nieuws-single__hero {
    background: var(--c-charcoal); color: var(--c-cream);
    padding: 136px 52px 296px;
}
.nieuws-single__hero-inner {
    max-width: 1200px; margin: 0 auto;
    display: flex; flex-direction: column; gap: 56px;
}
.nieuws-single__crumbs {
    display: flex; align-items: center; gap: 0;
}
.nieuws-single__crumb-home {
    display: inline-flex; align-items: center; justify-content: center;
    width: 40px; height: 40px; padding: 8px; border-radius: 12px;
    color: var(--c-cream); text-decoration: none;
}
.nieuws-single__crumb-home svg { width: 24px; height: 24px; }
.nieuws-single__crumb-sep,
.nieuws-single__crumb {
    display: inline-flex; align-items: center; height: 40px; padding: 0 8px;
    font-family: var(--f-body); font-size: 16px; line-height: 1.5;
    color: var(--c-cream); text-decoration: none;
}
.nieuws-single__crumb:hover { text-decoration: underline; }
.nieuws-single__back {
    display: inline-flex; align-items: center; height: 48px; gap: 0;
    text-decoration: none; align-self: flex-start;
}
.nieuws-single__back-arrow {
    display: inline-flex; align-items: center; justify-content: center;
    width: 48px; height: 48px; margin-right: 4px;
}
.nieuws-single__back-arrow svg {
    width: 24px; height: 24px; color: var(--c-cream);
    border: 1px solid var(--c-cream); border-radius: 28px; padding: 6px;
    box-sizing: content-box;
    /* Figma design-startpunt: arrow_downward + rotate(-225deg) = ← (terug-pijl) */
    transform: rotate(-225deg);
    transition: transform var(--t-figma-quick) var(--ease-figma-quick),
                background var(--t-figma-quick) var(--ease-figma-quick),
                color var(--t-figma-quick) var(--ease-figma-quick);
}
.nieuws-single__back:hover .nieuws-single__back-arrow svg,
.nieuws-single__back:focus-visible .nieuws-single__back-arrow svg {
    /* +45° CCW verder (van ← naar ↙) + accent-fill (Figma QUICK ease) */
    transform: rotate(-270deg);
    background: var(--c-cream); color: var(--c-charcoal);
}
.nieuws-single__back-label {
    font-family: var(--f-body); font-size: 16px; line-height: 1.5;
    color: var(--c-cream); position: relative; padding-bottom: 2px;
}
.nieuws-single__back-label::after {
    content: ""; display: block; height: 1px; background: var(--c-cream);
    margin-top: 2px;
}
.nieuws-single__titleblock {
    display: flex; flex-direction: column; gap: 24px; align-items: center;
    padding: 0 192px; text-align: center;
}
.nieuws-single__chips {
    display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none;
}
.nieuws-single__title {
    font-family: var(--f-serif); font-style: normal;
    font-size: 48px; line-height: 1.2; letter-spacing: -2px;
    color: var(--c-cream); margin: 0;
}
.nieuws-single__date {
    font-family: var(--f-body); font-size: 16px; line-height: 1.5;
    color: var(--c-cream); margin: 0;
}
.nieuws-single__author-pill {
    display: inline-flex; align-items: center; gap: 8px;
    background: var(--c-cream); border: 1px solid rgba(49, 49, 49, 0.1);
    border-radius: 16px;
    padding: 8px 24px 8px 8px;
}
.nieuws-single__author-avatar {
    margin: 0; width: 46px; height: 46px; border-radius: 10px;
    overflow: hidden; background: var(--c-cream-2); flex: 0 0 46px;
}
.nieuws-single__author-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.nieuws-single__author-text { display: flex; flex-direction: column; gap: 2px; text-align: left; }
.nieuws-single__author-name {
    font-family: var(--f-serif); font-size: 16px; line-height: 1.4;
    letter-spacing: -1px; color: var(--c-ink); margin: 0;
}
.nieuws-single__author-role {
    font-family: var(--f-body); font-size: 10px; line-height: 1.5;
    color: var(--c-charcoal); margin: 0;
}
.nieuws-single__banner {
    margin: -266px auto 0; max-width: 1200px;
    border-radius: 30px; overflow: hidden; position: relative; z-index: 1;
    height: 443px;
}
.nieuws-single__banner img { width: 100%; height: 100%; object-fit: cover; display: block; }
.nieuws-single__banner--placeholder { background: var(--c-cream-2); }
.nieuws-single__content-wrap {
    /* pb 30 compenseert voor nieuws-grid margin-top -30 (curved-overlap)
       + grid pt-120 → effectieve gap 120 (Figma 10436:14618 intent). */
    padding: 56px 192px 30px;
    display: flex; flex-direction: column; gap: 72px;
    max-width: 1200px; margin: 0 auto;
}
.nieuws-single__content {
    width: 100%;
    font-family: var(--f-body); font-size: 16px; line-height: 1.5;
    color: var(--c-charcoal);
}
.nieuws-single__content h1 {
    font-family: var(--f-serif); font-size: 40px; line-height: 1.2;
    letter-spacing: -2px; color: var(--c-charcoal);
    margin: 0; padding: 24px 0;
}
.nieuws-single__content h2 {
    font-family: var(--f-serif); font-size: 32px; line-height: 1.3;
    letter-spacing: -2px; color: var(--c-charcoal);
    margin: 0; padding: 24px 0 20px;
}
.nieuws-single__content h3 {
    font-family: var(--f-serif); font-size: 20px; line-height: 1.4;
    letter-spacing: -1px; color: var(--c-charcoal);
    margin: 0; padding: 20px 0 16px;
}
.nieuws-single__content p { margin: 0; padding-bottom: 16px; }
/* Figma 10436:14680: wrapper py-36, links 2px bar self-stretch (alleen op
   content-hoogte, NIET over de py-36 padding heen) + inner pr-20 gap-20.
   Implementatie: ::before absolute top:36 bottom:36 (= matched tekst-hoogte). */
.nieuws-single__content blockquote {
    position: relative;
    margin: 0; padding: 36px 20px 36px 22px; /* 22 = 2 bar + 20 gap */
    font-family: var(--f-sans); font-style: italic;
    font-size: 20px; line-height: 28px; color: var(--c-charcoal);
}
.nieuws-single__content blockquote::before {
    content: ""; position: absolute;
    left: 0; top: 36px; bottom: 36px; width: 2px;
    background: var(--c-charcoal);
}
.nieuws-single__content blockquote p { margin: 0; padding: 0; }
.nieuws-single__content a {
    color: var(--c-charcoal); text-decoration: underline;
    text-decoration-thickness: 1px; text-underline-offset: 3px;
}
.nieuws-single__share-row {
    display: flex; align-items: flex-end; justify-content: space-between;
    gap: 24px;
}
.nieuws-single__share-left { display: flex; flex-direction: column; gap: 16px; }
.nieuws-single__share-label {
    font-family: var(--f-body); font-weight: 600; font-size: 18px; line-height: 1.5;
    color: #000;
}
.nieuws-single__share-buttons {
    display: flex; gap: 8px; margin: 0; padding: 0; list-style: none;
}
.nieuws-single__share-btn {
    display: inline-flex; align-items: center; justify-content: center;
    width: 32px; height: 32px; padding: 4px;
    background: var(--c-charcoal); color: var(--c-cream);
    border: 0; border-radius: 64px; cursor: pointer; text-decoration: none;
    transition: background var(--t-figma-quick) var(--ease-figma-quick),
                color var(--t-figma-quick) var(--ease-figma-quick);
}
.nieuws-single__share-btn:hover,
.nieuws-single__share-btn:focus-visible {
    background: var(--c-accent); color: var(--c-cream);
}
.nieuws-single__share-btn svg { width: 16px; height: 16px; }
/* Copy-link visuele feedback: icon-swap link → checkmark + tooltip
   "Link gekopieerd" voor 1.6s na klik. */
.nieuws-single__share-li { position: relative; }
.nieuws-single__share-btn--copy .nieuws-single__share-icon--check { display: none; }
.nieuws-single__share-btn--copy.is-copied {
    background: var(--c-accent); border-color: var(--c-accent);
}
.nieuws-single__share-btn--copy.is-copied .nieuws-single__share-icon--link { display: none; }
.nieuws-single__share-btn--copy.is-copied .nieuws-single__share-icon--check { display: inline-block; }
.nieuws-single__share-btn--copy::after {
    content: attr(data-copy-label);
    position: absolute; bottom: calc(100% + 8px); left: 50%;
    background: var(--c-charcoal); color: var(--c-cream);
    font-family: var(--f-body); font-size: 12px; line-height: 1.4;
    padding: 6px 10px; border-radius: 8px; white-space: nowrap;
    opacity: 0; pointer-events: none;
    transform: translateX(-50%) translateY(4px);
    transition: opacity var(--t-base) var(--ease-out), transform var(--t-base) var(--ease-out);
}
.nieuws-single__share-btn--copy::before {
    content: ""; position: absolute; bottom: calc(100% + 2px); left: 50%;
    transform: translateX(-50%) rotate(45deg);
    width: 8px; height: 8px; background: var(--c-charcoal);
    opacity: 0; pointer-events: none;
    transition: opacity var(--t-base) var(--ease-out);
}
.nieuws-single__share-btn--copy.is-copied::after { opacity: 1; transform: translateX(-50%) translateY(0); }
.nieuws-single__share-btn--copy.is-copied::before { opacity: 1; }
.nieuws-single__tags { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }

/* Inline image placeholder in nieuws-single body (Figma 10436:14668) */
.nieuws-inline-image {
    margin: 16px 0; padding: 0;
    display: flex; flex-direction: column; gap: 8px;
}
.nieuws-inline-image__placeholder {
    width: 100%; aspect-ratio: 768 / 400;
    border-radius: 30px;
    background: var(--c-cream-2)
        url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 24 24' fill='none' stroke='%23b5b5b0' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'><rect x='3' y='3' width='18' height='18' rx='2' ry='2'/><circle cx='8.5' cy='8.5' r='1.5'/><polyline points='21,15 16,10 5,21'/></svg>")
        center / 48px 48px no-repeat;
}
.nieuws-inline-image figcaption {
    font-family: var(--f-body); font-size: 14px; line-height: 1.5;
    color: var(--c-charcoal);
    padding-left: 20px; border-left: 2px solid var(--c-charcoal);
}

/* MOBILE */
@media (max-width: 1100px) {
    .nieuws-featured { padding: 120px 32px 0; }
    .nieuws-featured__body { flex-direction: column; gap: 48px; padding-bottom: 64px; }
    .nieuws-featured__left, .nieuws-featured__right { width: 100%; flex: 1 1 auto; padding-top: 0; }
    .nieuws-featured__title { font-size: 40px; }
    .nieuws-grid__list { grid-template-columns: repeat(2, 1fr); }
    .nieuws-single__hero { padding: 120px 32px 232px; }
    .nieuws-single__titleblock { padding: 0; }
    .nieuws-single__title { font-size: 36px; }
    .nieuws-single__banner { margin-top: -200px; height: 360px; }
    .nieuws-single__content-wrap { padding: 56px 32px 80px; }
}
@media (max-width: 640px) {
    .nieuws-featured { padding: 120px 24px 0; }
    .nieuws-featured__title { font-size: 32px; line-height: 1.3; }
    .nieuws-featured__body { gap: 32px; padding-bottom: 48px; }
    .nieuws-featured__left { gap: 32px; }
    .nieuws-grid { padding: 64px 24px 112px; }  /* +48 voor cta-spar mt:-48 mobile */
    .nieuws-grid__title-reg { font-size: 32px; }
    .nieuws-grid__title-ital { font-size: 36px; }
    .nieuws-grid__list { grid-template-columns: 1fr; }
    .nieuws-card__media { height: 320px; border-radius: 32px; }
    .nieuws-single__hero { padding: 120px 24px 184px; }
    .nieuws-single__title { font-size: 28px; line-height: 1.3; }
    .nieuws-single__banner { margin-top: -160px; height: 240px; border-radius: 32px; }
    .nieuws-single__content-wrap { padding: 40px 24px 64px; gap: 48px; }
    .nieuws-single__content h1 { font-size: 28px; }
    .nieuws-single__content h2 { font-size: 24px; }
    .nieuws-single__share-row { flex-direction: column; align-items: flex-start; gap: 16px; }
}

/* ============================================================================
   30. Contact-hero — Figma 10436:14526 (dark info+form)
   ============================================================================ */
.contact-hero {
    background: var(--c-charcoal); color: var(--c-cream);
    padding: 136px 52px 120px;
}
.contact-hero__inner {
    max-width: 1200px; margin: 0 auto;
    display: flex; flex-direction: column; gap: 56px;
}
.contact-hero__crumbs {
    display: flex; align-items: center; gap: 0; color: var(--c-cream);
}
.contact-hero__crumb-home {
    display: inline-flex; align-items: center; justify-content: center;
    width: 40px; height: 40px; padding: 8px; border-radius: 12px;
    color: var(--c-cream); text-decoration: none;
}
.contact-hero__crumb-home svg { width: 24px; height: 24px; }
.contact-hero__crumb-sep,
.contact-hero__crumb {
    display: inline-flex; align-items: center; height: 40px; padding: 0 8px;
    font-family: var(--f-body); font-size: 16px; line-height: 1.5; color: var(--c-cream);
}
.contact-hero__body {
    display: grid; grid-template-columns: 1fr 564px; gap: 80px;
    align-items: start;
}
.contact-hero__info {
    display: flex; flex-direction: column; gap: 48px;
    padding-top: 40px;
}
.contact-hero__title {
    font-family: var(--f-serif); font-size: 48px; line-height: 1.2;
    letter-spacing: -2px; color: var(--c-cream); margin: 0;
}
.contact-hero__sub {
    font-family: var(--f-body); font-size: 16px; line-height: 1.5;
    color: var(--c-cream); margin: 0;
}
.contact-hero__details {
    display: grid; grid-template-columns: 1fr 1fr; gap: 96px;
    margin-top: 8px;
}
.contact-hero__list { display: flex; flex-direction: column; gap: 0; margin: 0; padding: 0; list-style: none; }
.contact-hero__item {
    display: flex; align-items: flex-start; gap: 12px; padding: 12px 0;
    font-family: var(--f-body); font-size: 16px; line-height: 1.5; color: var(--c-cream);
}
.contact-hero__item svg { color: var(--c-cream); flex: 0 0 24px; }
.contact-hero__item a,
.contact-hero__item address {
    color: var(--c-cream); text-decoration: none; font-style: normal;
    transition: color var(--t-figma-quick) var(--ease-figma-quick);
}
.contact-hero__item a:hover { color: var(--c-accent-soft); }

/* ---- Form card (right) ---- */
.contact-hero__form-card {
    background: var(--c-cream); color: var(--c-charcoal);
    border-radius: 30px; padding: 32px;
    display: flex; flex-direction: column; gap: 32px;
}
.contact-hero__form-head { display: flex; flex-direction: column; gap: 8px; }
.contact-hero__form-title {
    font-family: var(--f-serif); font-size: 32px; line-height: 1.3;
    letter-spacing: -2px; color: var(--c-charcoal); margin: 0;
}
.contact-hero__form-sub {
    font-family: var(--f-body); font-size: 16px; line-height: 1.5;
    color: var(--c-charcoal); margin: 0;
}
.contact-form { display: flex; flex-direction: column; gap: 16px; }
.contact-form__row { display: flex; flex-direction: column; gap: 16px; }
.contact-form__label {
    font-family: var(--f-body); font-size: 14px; line-height: 1.5;
    color: var(--c-charcoal);
}
.contact-form__req { color: var(--c-accent); }
.contact-form__input {
    background: var(--c-paper); border: 1px solid rgba(49, 49, 49, 0.1);
    border-radius: 16px; padding: 16px 24px;
    font-family: var(--f-body); font-size: 16px; line-height: 1.5; color: var(--c-charcoal);
    transition: border-color var(--t-figma-quick) var(--ease-figma-quick);
}
.contact-form__input::placeholder { color: rgba(49, 49, 49, 0.4); }
.contact-form__input:focus { outline: none; border-color: var(--c-accent); }
.contact-form__textarea { resize: vertical; min-height: 152px; padding: 72px 24px 16px; }
.contact-form__submit-wrap { display: inline-flex; align-self: flex-start; padding: 8px; border: 1px dashed var(--c-accent); border-radius: 999px; }
.contact-form__submit {
    background: var(--c-accent); color: var(--c-paper);
    border: 0; border-radius: 999px;
    padding: 16px 32px;
    font-family: var(--f-body); font-size: 16px; line-height: 1.5;
    cursor: pointer;
    transition: background var(--t-figma-quick) var(--ease-figma-quick);
}
.contact-form__submit:hover { background: var(--c-accent-dark); }
.contact-form__consent {
    display: flex; align-items: flex-start; gap: 12px;
    font-family: var(--f-body); font-size: 14px; line-height: 1.5;
    color: var(--c-charcoal);
}
.contact-form__consent input {
    width: 18px; height: 18px; margin-top: 2px;
    background: var(--c-paper); border: 1px solid var(--c-charcoal); border-radius: 4px;
    accent-color: var(--c-accent);
}

/* Gravity Forms — overrides binnen .contact-hero__form-card zodat GF
   matched onze design (rounded inputs, oranje pill submit, dashed outer). */
.contact-hero__form-card .gform_wrapper { width: 100%; }
.contact-hero__form-card .gform_wrapper form { display: flex; flex-direction: column; gap: 16px; }
.contact-hero__form-card .gform_heading { display: none; }
.contact-hero__form-card .gform_body { width: 100%; }
.contact-hero__form-card .gform_fields { display: flex; flex-direction: column; gap: 16px; list-style: none; padding: 0; margin: 0; }
.contact-hero__form-card .gfield { display: flex; flex-direction: column; gap: 16px; padding: 0; }
.contact-hero__form-card .gfield_label,
.contact-hero__form-card .gform_wrapper label {
    font-family: var(--f-body); font-weight: 400; font-size: 14px; line-height: 1.5;
    color: var(--c-charcoal); margin: 0;
}
.contact-hero__form-card .gfield_required { color: var(--c-accent); }
.contact-hero__form-card .gfield_required_text,
.contact-hero__form-card .gfield_required_asterisk { color: var(--c-accent); }
.contact-hero__form-card .ginput_container input[type="text"],
.contact-hero__form-card .ginput_container input[type="email"],
.contact-hero__form-card .ginput_container input[type="tel"],
.contact-hero__form-card .ginput_container input[type="url"],
.contact-hero__form-card .ginput_container textarea {
    width: 100% !important;
    background: var(--c-paper); border: 1px solid rgba(49, 49, 49, 0.1);
    border-radius: 16px; padding: 16px 24px;
    font-family: var(--f-body); font-size: 16px; line-height: 1.5; color: var(--c-charcoal);
    box-shadow: none;
    transition: border-color var(--t-figma-quick) var(--ease-figma-quick);
}
.contact-hero__form-card .ginput_container textarea { min-height: 152px; padding: 16px 24px; resize: vertical; }
.contact-hero__form-card .ginput_container ::placeholder { color: rgba(49, 49, 49, 0.4); }
.contact-hero__form-card .ginput_container input:focus,
.contact-hero__form-card .ginput_container textarea:focus { outline: none; border-color: var(--c-accent); }

/* Consent checkbox als regular row */
.contact-hero__form-card .gfield--type-checkbox .ginput_container_checkbox ul,
.contact-hero__form-card .gfield_checkbox { list-style: none; padding: 0; margin: 0; }
.contact-hero__form-card .gfield_checkbox li,
.contact-hero__form-card .gchoice {
    display: flex; align-items: flex-start; gap: 12px;
    font-family: var(--f-body); font-size: 14px; line-height: 1.5; color: var(--c-charcoal);
}
.contact-hero__form-card .gfield_checkbox input[type="checkbox"],
.contact-hero__form-card .gchoice input[type="checkbox"] {
    width: 18px; height: 18px; margin-top: 2px;
    accent-color: var(--c-accent);
}

/* Submit — oranje pill met dashed outer (magnetic-style). GF heeft `width: 100%`
   met !important; we forceren shrink-to-fit + align-self flex-start. */
.contact-hero__form-card .gform_footer {
    display: inline-flex !important; align-self: flex-start !important;
    align-items: center; justify-content: center;
    width: auto !important; min-width: 0 !important; max-width: 100%;
    flex: 0 0 auto !important;
    padding: 8px; border: 1px dashed var(--c-accent); border-radius: 999px;
    margin: 8px 0 0 !important; clear: none;
}
.contact-hero__form-card .gform_footer .gform_button,
.contact-hero__form-card .gform_footer input[type="submit"] {
    background: var(--c-accent) !important; color: var(--c-paper) !important;
    border: 0 !important; border-radius: 999px !important;
    padding: 16px 32px !important;
    font-family: var(--f-body) !important; font-size: 16px !important; line-height: 1.5 !important; font-weight: 400 !important;
    cursor: pointer;
    transition: background var(--t-figma-quick) var(--ease-figma-quick);
}
.contact-hero__form-card .gform_footer .gform_button:hover,
.contact-hero__form-card .gform_footer input[type="submit"]:hover { background: var(--c-accent-dark) !important; }

/* Validation UX — inline per veld + top banner + invalid-input border + fade-in */
@keyframes andcoValidationIn { 0% { opacity: 0; transform: translateY(-4px); } 100% { opacity: 1; transform: translateY(0); } }

.contact-hero__form-card .gfield_validation_message,
.contact-hero__form-card .validation_message {
    display: flex; align-items: flex-start; gap: 8px;
    margin-top: 8px; padding: 10px 14px;
    background: rgba(228, 81, 34, 0.08);
    border-left: 2px solid var(--c-accent); border-radius: 0 10px 10px 0;
    font-family: var(--f-body); font-size: 13px; line-height: 1.45;
    color: var(--c-accent);
    animation: andcoValidationIn 220ms var(--ease-figma-quick) both;
}
.contact-hero__form-card .gfield_validation_message::before,
.contact-hero__form-card .validation_message::before {
    content: ""; flex: 0 0 16px; width: 16px; height: 16px; margin-top: 1px;
    background: currentColor;
    -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'><path d='M10.29 3.86 1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z'/><line x1='12' y1='9' x2='12' y2='13'/><line x1='12' y1='17' x2='12.01' y2='17'/></svg>") no-repeat center / contain;
            mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'><path d='M10.29 3.86 1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z'/><line x1='12' y1='9' x2='12' y2='13'/><line x1='12' y1='17' x2='12.01' y2='17'/></svg>") no-repeat center / contain;
}

/* Invalid-state input border */
.contact-hero__form-card .gfield_error .ginput_container input[type="text"],
.contact-hero__form-card .gfield_error .ginput_container input[type="email"],
.contact-hero__form-card .gfield_error .ginput_container input[type="tel"],
.contact-hero__form-card .gfield_error .ginput_container input[type="url"],
.contact-hero__form-card .gfield_error .ginput_container textarea {
    border-color: var(--c-accent) !important;
    background: rgba(228, 81, 34, 0.04) !important;
}
.contact-hero__form-card .gfield_error .gfield_label { color: var(--c-accent); }

/* Top banner — "vul de verplichte velden in" */
.contact-hero__form-card .gform_validation_errors {
    display: flex; align-items: flex-start; gap: 12px;
    background: var(--c-paper); border: 1px solid rgba(228, 81, 34, 0.25);
    border-left: 4px solid var(--c-accent); border-radius: 16px;
    padding: 16px 20px; margin-bottom: 20px;
    color: var(--c-charcoal); font-family: var(--f-body); font-size: 14px; line-height: 1.5;
    animation: andcoValidationIn 280ms var(--ease-figma-quick) both;
}
.contact-hero__form-card .gform_validation_errors h2,
.contact-hero__form-card .gform_validation_errors .gform_submission_error {
    font-family: var(--f-serif); font-size: 20px; line-height: 1.3; letter-spacing: -1px;
    color: var(--c-charcoal); margin: 0 0 6px;
}
.contact-hero__form-card .gform_validation_errors ol {
    margin: 0; padding-left: 18px;
    color: var(--c-accent); font-size: 13px;
}
.contact-hero__form-card .gform_validation_errors ol a {
    color: var(--c-accent); text-decoration: underline; text-underline-offset: 2px;
}
.contact-hero__form-card .gform_validation_errors::before {
    content: ""; flex: 0 0 24px; width: 24px; height: 24px; margin-top: 2px;
    background: var(--c-accent);
    -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='10'/><line x1='12' y1='8' x2='12' y2='12'/><line x1='12' y1='16' x2='12.01' y2='16'/></svg>") no-repeat center / contain;
            mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='10'/><line x1='12' y1='8' x2='12' y2='12'/><line x1='12' y1='16' x2='12.01' y2='16'/></svg>") no-repeat center / contain;
}

/* AJAX submitting state — disable + small spinner */
.contact-hero__form-card .gform_ajax_spinner { display: inline-block; margin-left: 12px; vertical-align: middle; }

/* ============================================================================
   31. Contact-office — Figma 10436:14578 (white card binnen cream)
   ============================================================================ */
.contact-office {
    background: var(--c-cream);
    padding: 120px 52px;
    border-radius: 48px 48px 0 0;
    margin-top: -48px; position: relative; z-index: 1;
}
.contact-office__inner { max-width: 1200px; margin: 0 auto; }
.contact-office__card {
    background: var(--c-paper);
    border: 1px solid rgba(49, 49, 49, 0.1);
    border-radius: 30px; padding: 32px;
    display: flex; gap: 72px; align-items: center;
}
.contact-office__media {
    margin: 0; flex: 0 0 539px; width: 539px; height: 688px;
    border-radius: 30px; overflow: hidden; background: var(--c-cream-2);
}
.contact-office__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.contact-office__body {
    width: 502px; flex: 0 0 502px;
    display: flex; flex-direction: column; gap: 64px;
    padding: 40px 0;
}
.contact-office__title {
    font-family: var(--f-serif); font-size: 40px; line-height: 1.2;
    letter-spacing: -2px; color: var(--c-ink); margin: 0;
}
.contact-office__block { display: flex; flex-direction: column; gap: 16px; }
.contact-office__subhead {
    font-family: var(--f-body); font-weight: 700;
    font-size: 16px; line-height: 1.5;
    color: var(--c-charcoal); margin: 0;
}
.contact-office__text {
    font-family: var(--f-body); font-size: 16px; line-height: 1.5;
    color: var(--c-charcoal); margin: 0;
}

/* ============================================================================
   32. Contact-map — Google Maps embed (custom toegevoegd, geen Figma)
   ============================================================================ */
.contact-map { background: var(--c-cream); padding: 0 52px 126px; }  /* 96 + 30 voor cta-spar mt:-30 */
.contact-map__frame {
    max-width: 1200px; margin: 0 auto;
    border-radius: 30px; overflow: hidden;
    aspect-ratio: 1200 / 500;
    background: var(--c-cream-2);
    border: 1px solid rgba(49, 49, 49, 0.1);
}
.contact-map__frame iframe { width: 100%; height: 100%; display: block; border: 0; }

@media (max-width: 1200px) {
    .contact-hero__body { grid-template-columns: 1fr; gap: 48px; }
    .contact-hero__title { font-size: 40px; }
    .contact-office__card { flex-direction: column; gap: 32px; padding: 24px; }
    .contact-office__media,
    .contact-office__body { flex: 1 1 auto; width: 100%; height: auto; }
    .contact-office__media { aspect-ratio: 539 / 600; }
    .contact-office__body { padding: 16px; }
    .contact-office__title { font-size: 32px; }
}
@media (max-width: 640px) {
    /* Mobile Figma 10436:14043 — pt-136 pb-56 px-24, content w-354 */
    .contact-hero { padding: 136px 24px 104px; }  /* 56 + 48 voor contact-office mt:-48 mobile */
    .contact-hero__title { font-size: 32px; letter-spacing: -2px; line-height: 1.3; }
    .contact-hero__info { gap: 32px; padding-top: 0; }
    .contact-hero__details { grid-template-columns: 1fr; gap: 16px; margin-top: 8px; }
    /* Form-card mobile p-32 (Figma 10436:14258 binnen w-354 frame) */
    .contact-hero__form-card { padding: 32px; gap: 24px; border-radius: 32px; }
    .contact-hero__form-title { font-size: 32px; line-height: 1.3; }
    .contact-form__input { padding: 16px 24px; }
    /* Office mobile pt-64 binnen Services frame */
    .contact-office { padding: 64px 24px; border-radius: 48px 48px 0 0; margin-top: -48px; }
    /* Card mobile p-32 (Figma 10436:14058) */
    .contact-office__card { padding: 32px; gap: 24px; border-radius: 32px; }
    /* Image mobile aspect 290/182 (Figma 10436:14059, NIET 539/688 desktop-aspect) */
    .contact-office__media { aspect-ratio: 290 / 182; height: auto; border-radius: 24px; }
    .contact-office__title { font-size: 32px; }
    .contact-office__body { gap: 16px; padding: 0; }
    .contact-map { padding: 0 24px 112px; }  /* 64 + 48 voor cta-spar mt:-48 mobile */
    .contact-map__frame { aspect-ratio: 4 / 3; }
}

/* ---------- 33. Bedankt (form confirmation) — geen Figma, passende build ---------- */
.bedankt {
    background: var(--c-charcoal); color: var(--c-cream);
    min-height: calc(100vh - 104px);
    display: flex; align-items: center; justify-content: center;
    padding: 160px 52px 96px; position: relative; overflow: hidden;
}
.bedankt__inner {
    max-width: 640px; margin: 0 auto; text-align: center;
    display: flex; flex-direction: column; align-items: center; gap: 24px;
}
.bedankt__icon {
    display: inline-flex; align-items: center; justify-content: center;
    width: 64px; height: 64px; border-radius: 999px;
    background: var(--c-accent); color: var(--c-cream);
    margin-bottom: 8px;
}
.bedankt__title {
    font-family: var(--f-serif); font-style: italic;
    font-size: 56px; line-height: 1.2; letter-spacing: -2px;
    color: var(--c-cream); margin: 0;
}
.bedankt__sub {
    font-family: var(--f-body); font-size: 17px; line-height: 1.6;
    color: rgba(252,250,244,0.75); margin: 0; max-width: 520px;
}
.bedankt__links {
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px;
    margin-top: 32px; width: 100%; max-width: 560px;
}
.bedankt__links a {
    display: flex; align-items: center; justify-content: space-between; gap: 8px;
    padding: 14px 18px; border: 1px solid rgba(252,250,244,0.15);
    border-radius: 16px; background: rgba(252,250,244,0.04);
    font-family: var(--f-body); font-size: 14px; color: var(--c-cream);
    text-decoration: none;
    transition: background var(--t-figma-quick) var(--ease-figma-quick),
                border-color var(--t-figma-quick) var(--ease-figma-quick),
                gap var(--t-figma-quick) var(--ease-figma-quick);
}
.bedankt__links a:hover {
    background: rgba(252,250,244,0.1); border-color: var(--c-accent); gap: 14px;
}
.bedankt__links svg { color: var(--c-accent); }

/* Bedankt-page: no cta-spar overlap nodig (zelfde override pattern als contact) */
body.page-template-page-bedankt .site-footer__main { margin-top: 0; }

@media (max-width: 640px) {
    .bedankt { padding: 120px 24px 64px; }
    .bedankt__title { font-size: 36px; letter-spacing: -1.5px; }
    .bedankt__sub { font-size: 16px; }
    .bedankt__links { grid-template-columns: 1fr; }
}

/* ---------- 34. Legal pages — placeholder template ---------- */
.legal-page {
    background: var(--c-charcoal); color: var(--c-cream);
    min-height: calc(100vh - 104px);
    padding: 160px 52px 96px;
}
.legal-page__inner { max-width: 800px; margin: 0 auto; }
.legal-page__crumbs {
    display: flex; align-items: center; gap: 8px;
    font-family: var(--f-body); font-size: 14px; color: rgba(252,250,244,0.6);
    margin-bottom: 24px;
}
.legal-page__crumbs a { color: rgba(252,250,244,0.85); text-decoration: none; }
.legal-page__crumbs a:hover { color: var(--c-accent); }
.legal-page__title {
    font-family: var(--f-serif); font-size: 48px; line-height: 1.2; letter-spacing: -2px;
    color: var(--c-cream); margin: 0 0 32px;
}
.legal-page__body {
    font-family: var(--f-body); font-size: 16px; line-height: 1.6;
    color: rgba(252,250,244,0.8);
}
.legal-page__body p { margin: 0 0 16px; }
.legal-page__body a { color: var(--c-accent); text-decoration: underline; text-underline-offset: 2px; }
body.page-template-page-legal .site-footer__main { margin-top: 0; }
@media (max-width: 640px) {
    .legal-page { padding: 120px 24px 64px; }
    .legal-page__title { font-size: 32px; }
}

/* ---------- 32. 404 ---------- */
.four-oh-four {
    background: var(--c-charcoal); color: var(--c-cream);
    min-height: calc(100vh - 104px); /* fill viewport minus header */
    display: flex; align-items: center; justify-content: center;
    padding: 160px 52px 96px; position: relative; overflow: hidden;
}
.four-oh-four__inner {
    max-width: 720px; margin: 0 auto; text-align: center;
    position: relative; z-index: 1;
    display: flex; flex-direction: column; align-items: center; gap: 24px;
}
.four-oh-four__code {
    font-family: var(--f-serif); font-style: italic;
    font-size: 280px; line-height: 1; letter-spacing: -8px;
    color: rgba(228, 81, 34, 0.18);
    position: absolute; inset: -40px 0 auto; z-index: 0;
    pointer-events: none; user-select: none;
}
.four-oh-four__title {
    font-family: var(--f-serif); font-size: 48px; line-height: 1.2;
    letter-spacing: -1.5px; color: var(--c-cream); margin: 0;
    position: relative; z-index: 1;
}
.four-oh-four__lead {
    font-family: var(--f-body); font-size: 17px; line-height: 1.6;
    color: rgba(252,250,244,0.7); margin: 0; max-width: 500px;
    position: relative; z-index: 1;
}
.four-oh-four__cta { margin-top: 8px; }
.four-oh-four__links {
    display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px;
    margin-top: 32px; width: 100%; max-width: 560px;
}
.four-oh-four__links a {
    display: flex; align-items: center; justify-content: space-between; gap: 8px;
    padding: 14px 18px; border: 1px solid rgba(252,250,244,0.15);
    border-radius: 16px; background: rgba(252,250,244,0.04);
    font-family: var(--f-body); font-size: 14px; color: var(--c-cream);
    text-decoration: none;
    transition: background var(--t-figma-quick) var(--ease-figma-quick),
                border-color var(--t-figma-quick) var(--ease-figma-quick),
                gap var(--t-figma-quick) var(--ease-figma-quick);
}
.four-oh-four__links a:hover {
    background: rgba(252,250,244,0.1); border-color: var(--c-accent);
    gap: 14px;
}
.four-oh-four__links svg { color: var(--c-accent); }

@media (max-width: 640px) {
    .four-oh-four { padding: 120px 24px 64px; }
    .four-oh-four__code { font-size: 160px; letter-spacing: -4px; inset: 0; }
    .four-oh-four__title { font-size: 32px; }
    .four-oh-four__links { grid-template-columns: 1fr 1fr; }
}

/* ---------- 21. Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
    [data-reveal] { opacity: 1; transform: none; }
    .cursor { display: none; }
    body:not(.no-cursor) { cursor: auto; }
}

/* ---------- 35. Complianz-documenten op de legal-template ---------- */
/*
 * document.min.css van Complianz is gemaakt voor lichte achtergronden: 14px tekst,
 * max-width 800px en licht-grijze/witte tabelvlakken. De cookies- en privacy-pagina's
 * staan op de donkere legal-template, dus dat wordt hier teruggezet naar de huisstijl.
 *
 * Specificiteit: Complianz mikt op #cmplz-document (1,0,x). Door de id met de eigen
 * class te combineren (#cmplz-document.cmplz-document = 1,1,x) winnen we zonder
 * !important. LET OP: .cmplz-document staat ook op de <body>, dus altijd de id ervoor —
 * anders raakt een reset de hele pagina.
 */

#cmplz-document.cmplz-document {
    max-width: 100%;
    width: 100%;
    font-family: var(--f-body);
    font-size: 16px;
    line-height: 1.7;
    color: rgba(252, 250, 244, 0.8);
}
#cmplz-document.cmplz-document p,
#cmplz-document.cmplz-document li,
#cmplz-document.cmplz-document td {
    font-size: 16px;
    line-height: 1.7;
    color: rgba(252, 250, 244, 0.8);
}
#cmplz-document.cmplz-document p { margin: 0 0 16px; }

/* Koppen. Het thema zet h1-h6 globaal op --c-ink (#131313); op charcoal (#313131)
   is dat vrijwel onleesbaar, dus expliciet crème. */
#cmplz-document.cmplz-document h2,
#cmplz-document.cmplz-document h3,
#cmplz-document.cmplz-document h4,
#cmplz-document.cmplz-document h5 {
    color: var(--c-cream);
    text-align: left;
    text-transform: none;
}
#cmplz-document.cmplz-document h2 {
    font-family: var(--f-serif); font-weight: 400;
    font-size: 28px; line-height: 1.25; letter-spacing: -0.5px;
    margin: 48px 0 16px;
}
#cmplz-document.cmplz-document h3 {
    font-family: var(--f-serif); font-weight: 400;
    font-size: 21px; line-height: 1.3;
    margin: 32px 0 12px;
}
#cmplz-document.cmplz-document h4 {
    font-family: var(--f-body); font-weight: 600;
    font-size: 17px; margin: 24px 0 8px;
}
#cmplz-document.cmplz-document h5 {
    font-family: var(--f-body); font-weight: 600;
    font-size: 15px; margin: 16px 0 6px;
}
#cmplz-document.cmplz-document > h2:first-child { margin-top: 0; }

/* Lijsten — het thema zet ul/ol globaal op list-style:none met padding 0. */
#cmplz-document.cmplz-document ul,
#cmplz-document.cmplz-document ol {
    margin: 0 0 16px; padding-left: 22px;
}
#cmplz-document.cmplz-document ul { list-style: disc; }
#cmplz-document.cmplz-document ol { list-style: decimal; }
#cmplz-document.cmplz-document li { margin: 0 0 6px; }

/* Links in de accentkleur. Complianz plakt een zwart pijltje achter externe links;
   dat is onzichtbaar op donker, dus weg. */
#cmplz-document.cmplz-document a {
    color: var(--c-accent);
    text-decoration: underline; text-underline-offset: 2px;
    overflow-wrap: anywhere;
}
#cmplz-document.cmplz-document a:hover { color: var(--c-accent-soft); }
#cmplz-document.cmplz-document a[target="_blank"]::after { content: none; }
#cmplz-document.cmplz-document a:focus {
    border: 0; padding: 0;
    outline: 2px solid var(--c-accent); outline-offset: 2px;
}

/* Uitklappers (cookies per doel). */
#cmplz-document.cmplz-document .cmplz-dropdown {
    background-color: rgba(252, 250, 244, 0.04);
    border: 1px solid var(--c-line-dark);
    border-radius: 8px;
    margin: 0 0 12px;
    overflow: hidden;
}
#cmplz-document.cmplz-document .cmplz-dropdown summary {
    background-color: rgba(252, 250, 244, 0.08);
    color: var(--c-cream);
    margin: 0; padding: 12px 16px;
}
#cmplz-document.cmplz-document .cmplz-dropdown summary:hover {
    background-color: rgba(252, 250, 244, 0.13);
}
#cmplz-document.cmplz-document .cmplz-dropdown summary h3,
#cmplz-document.cmplz-document .cmplz-dropdown summary h4,
#cmplz-document.cmplz-document .cmplz-dropdown summary p {
    color: var(--c-cream); margin: 0;
}
#cmplz-document.cmplz-document .cmplz-dropdown h4,
#cmplz-document.cmplz-document .cmplz-dropdown h5 { margin-top: 12px; }

/* Cookietabel. Complianz kleurt het raster #dadada met witte en #f7f7f7 cellen;
   de dubbele .cmplz-dropdown houdt ons boven hun nth-child-regels. */
#cmplz-document.cmplz-document .cmplz-dropdown.cmplz-dropdown .cookies-per-purpose {
    background-color: rgba(252, 250, 244, 0.16);
}
#cmplz-document.cmplz-document .cmplz-dropdown.cmplz-dropdown .cookies-per-purpose div {
    background-color: #313131;
    color: rgba(252, 250, 244, 0.8);
}
#cmplz-document.cmplz-document .cmplz-dropdown.cmplz-dropdown .cookies-per-purpose div:nth-child(12n+2),
#cmplz-document.cmplz-document .cmplz-dropdown.cmplz-dropdown .cookies-per-purpose div:nth-child(12n+3),
#cmplz-document.cmplz-document .cmplz-dropdown.cmplz-dropdown .cookies-per-purpose div:nth-child(12n+4),
#cmplz-document.cmplz-document .cmplz-dropdown.cmplz-dropdown .cookies-per-purpose div:nth-child(12n+5),
#cmplz-document.cmplz-document .cmplz-dropdown.cmplz-dropdown .cookies-per-purpose div:nth-child(12n+6),
#cmplz-document.cmplz-document .cmplz-dropdown.cmplz-dropdown .cookies-per-purpose div:nth-child(12n+7) {
    background-color: #383838;
}
/* De kopcellen moeten boven de zebra-regel hierboven uitkomen: die telt door de
   :nth-child een class-niveau extra, vandaar de dubbele .cookies-per-purpose. */
#cmplz-document.cmplz-document .cmplz-dropdown.cmplz-dropdown .cookies-per-purpose.cookies-per-purpose div.name-header,
#cmplz-document.cmplz-document .cmplz-dropdown.cmplz-dropdown .cookies-per-purpose.cookies-per-purpose div.retention-header,
#cmplz-document.cmplz-document .cmplz-dropdown.cmplz-dropdown .cookies-per-purpose.cookies-per-purpose div.function-header {
    background-color: #454545; color: var(--c-cream); font-weight: 600;
}

/* Toestemmingsbeheer (paragraaf "Beheer uw cookie toestemming"). Complianz gebruikt
   hier exact dezelfde id+class-combinatie, dus een body-prefix om te winnen. */
body #cmplz-manage-consent-container.cmplz-manage-consent-container .cmplz-categories .cmplz-category {
    background-color: rgba(252, 250, 244, 0.04);
    border: 1px solid var(--c-line-dark);
    border-radius: 8px;
    margin-bottom: 8px;
}
body #cmplz-manage-consent-container.cmplz-manage-consent-container .cmplz-categories .cmplz-category .cmplz-category-header {
    background-color: rgba(252, 250, 244, 0.08);
    color: var(--c-cream);
    padding: 12px 16px;
}
body #cmplz-manage-consent-container.cmplz-manage-consent-container .cmplz-categories .cmplz-category .cmplz-category-header h2 {
    color: var(--c-cream); font-family: var(--f-body); font-size: 16px; font-weight: 600; margin: 0;
}
body #cmplz-manage-consent-container.cmplz-manage-consent-container .cmplz-categories .cmplz-category p,
body #cmplz-manage-consent-container.cmplz-manage-consent-container .cmplz-categories .cmplz-category li {
    color: rgba(252, 250, 244, 0.8);
}

@media (max-width: 640px) {
    #cmplz-document.cmplz-document h2 { font-size: 24px; margin-top: 36px; }
    #cmplz-document.cmplz-document h3 { font-size: 19px; }
}

/* ---------- 35b. Tekstinhoud op de legal-template ---------- */
/*
 * De juridische pagina's met eigen paginatekst (algemene voorwaarden,
 * rechtsgebiedenregister, klachtenregeling). Zonder deze regels erven koppen het
 * globale `h1-h6 { color: var(--c-ink) }` — bijna zwart op charcoal — en verliezen
 * lijsten hun opsommingstekens door de reset `ul, ol { list-style: none; padding: 0 }`.
 * Maatvoering gelijk aan de Complianz-documenten hierboven, zodat alle juridische
 * pagina's dezelfde typografie hebben.
 */

.legal-page__body h2,
.legal-page__body h3,
.legal-page__body h4 { color: var(--c-cream); }

.legal-page__body h2 {
    font-family: var(--f-serif); font-weight: 400;
    font-size: 28px; line-height: 1.25; letter-spacing: -0.5px;
    margin: 48px 0 16px;
}
.legal-page__body h3 {
    font-family: var(--f-serif); font-weight: 400;
    font-size: 21px; line-height: 1.3;
    margin: 32px 0 12px;
}
.legal-page__body h4 {
    font-family: var(--f-body); font-weight: 600;
    font-size: 17px; margin: 24px 0 8px;
}
.legal-page__body > h2:first-child,
.legal-page__body > h3:first-child { margin-top: 0; }

.legal-page__body ul,
.legal-page__body ol { margin: 0 0 20px; padding-left: 24px; }
.legal-page__body ul { list-style: disc; }
.legal-page__body ol { list-style: decimal; }
.legal-page__body li { margin: 0 0 10px; padding-left: 4px; }
.legal-page__body li::marker { color: rgba(252, 250, 244, 0.55); }

.legal-page__body strong { color: var(--c-cream); font-weight: 600; }
.legal-page__body em { font-style: italic; }
.legal-page__body a:hover { color: var(--c-accent-soft); }

@media (max-width: 640px) {
    .legal-page__body h2 { font-size: 24px; margin-top: 36px; }
    .legal-page__body h3 { font-size: 19px; }
}