/* =========================================================
   EP-labels blokthema: componentstijlen bovenop theme.json
   Kleuren en lettertypen komen uit theme.json (--wp--preset--*).
   ========================================================= */
:root {
  /* ---- Design tokens (Rebrand v2) ---- */
  --color-eucalyptus: #347568;   /* hoofdkleur: primaire knoppen, links, iconen */
  --color-petrol: #163D43;       /* donkere vlakken: hero-overlay, USP, CTA-blok, footer */
  --color-salie: #C4D8CA;        /* zachte accenten: tags, achtergrondvlakken, hover-tints */
  --color-warmwit: #F6F4EF;      /* basisachtergrond */
  --color-donkergrijs: #26332F;  /* lopende tekst */
  --color-eucalyptus-diep: #2A5F54;
  --color-wit: #FFFFFF;
  --color-muted: #4A5955;
  --color-lijn: #DFE6E0;
  --color-fout: #9B2C2C;

  /* Spacing-scale (4/8px-basis) */
  --space-1: 4px;  --space-2: 8px;  --space-3: 12px; --space-4: 16px;
  --space-5: 24px; --space-6: 32px; --space-7: 48px; --space-8: 64px; --space-9: 96px;

  /* Radius: controls (knoppen, velden) en containers (kaarten, panelen, beelden) */
  --radius: 12px;
  --radius-lg: 20px;

  /* Zachte, gelaagde schaduwen */
  --shadow-sm: 0 1px 2px rgba(22, 61, 67, .06), 0 2px 8px rgba(22, 61, 67, .06);
  --shadow-md: 0 2px 4px rgba(22, 61, 67, .05), 0 8px 24px rgba(22, 61, 67, .10);
  --shadow-lg: 0 4px 8px rgba(22, 61, 67, .06), 0 20px 48px rgba(22, 61, 67, .16);

  /* Beweging */
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --dur-fast: 200ms;
  --dur: 280ms;
  --dur-slow: 350ms;

  /* Typografie: één familie (Manrope), vaste hiërarchie met fluid sizing */
  --fs-display: clamp(2.375rem, 1.55rem + 3.3vw, 4rem);
  --fs-h1: clamp(2.125rem, 1.5rem + 2.4vw, 3.375rem);
  --fs-h2: clamp(1.75rem, 1.35rem + 1.6vw, 2.625rem);
  --fs-h3: clamp(1.3125rem, 1.15rem + .6vw, 1.625rem);
  --fs-lead: clamp(1.0625rem, 1rem + .3vw, 1.1875rem);
  --fs-body: 1.0625rem;
  --fs-small: .9375rem;
  --measure: 65ch;

  /* Bestaande --ep-*-namen blijven werken als alias van de tokens hierboven */
  --ep-primary: var(--color-eucalyptus);
  --ep-primary-hover: var(--color-eucalyptus-diep);
  --ep-dark: var(--color-petrol);
  --ep-soft: var(--color-salie);
  --ep-bg: var(--color-warmwit);
  --ep-white: var(--color-wit);
  --ep-ink: var(--color-donkergrijs);
  --ep-muted: var(--color-muted);
  --ep-line: var(--color-lijn);
  --ep-error: var(--color-fout);
  --ep-hover-surface: #E9EFEA;
  --ep-gutter: clamp(20px, 5vw, 48px);
  --ep-section: clamp(48px, 7vw, 96px);
  --ep-radius: var(--radius);
  --ep-radius-lg: var(--radius-lg);
  --ep-shadow-float: var(--shadow-md);
  --ep-slant: polygon(0 35%, 100% 0, 100% 100%, 0 100%);
}
html { scroll-behavior: smooth; }
body.ep-labels { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
body.ep-labels img { max-width: 100%; height: auto; }
body.ep-labels h1, body.ep-labels h2 { text-wrap: balance; }
.ep-main p { max-width: var(--measure); text-wrap: pretty; }
::selection { background: var(--color-salie); color: var(--color-petrol); }
.screen-reader-text { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
/* Focus-ring in eucalyptus (op donkere vlakken in salie). Vorm van het element blijft ongemoeid. */
body.ep-labels *:focus-visible { outline: 3px solid var(--color-eucalyptus); outline-offset: 3px; }
.ep-section--dark *:focus-visible { outline-color: var(--color-salie); }
/* Reduced motion: alle beweging uit; kleurwissels blijven (zonder overgang) bestaan. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
  html { scroll-behavior: auto; }
}
@media (max-width: 640px) { body.ep-labels { font-size: 16px; } }

/* Hoofdinhoud: geen extra ruimte rond secties, elke sectie regelt zijn eigen padding. */
.ep-main > * { margin-block: 0; }
.ep-main--narrow { padding-top: clamp(48px, 7vw, 88px); padding-bottom: clamp(48px, 7vw, 88px); }
.ep-page-title { font-size: clamp(32px, 4vw, 48px); margin-bottom: 16px; }

/* ---------- Hulpklassen ---------- */
.ep-kicker { display: flex; align-items: center; gap: 10px; font-size: 15px; font-weight: 600; color: var(--ep-primary); margin: 0; }
.ep-kicker::before { content: ""; display: inline-block; width: 14px; height: 18px; background: currentColor; clip-path: var(--ep-slant); flex: none; }
.ep-section--dark .ep-kicker { color: var(--ep-soft); }
.ep-lead { font-size: 19px; line-height: 1.6; max-width: 640px; text-wrap: pretty; }
.ep-measure { max-width: 640px; }
.ep-muted { color: var(--ep-muted); }
.ep-small { font-size: 15px; line-height: 1.5; }
.ep-h1-hero { font-size: clamp(38px, 5vw, 64px); line-height: 1.05; }
.ep-h1-detail { font-size: clamp(34px, 4.2vw, 54px); max-width: 760px; }
.ep-h2-lg { font-size: clamp(30px, 3.4vw, 44px); line-height: 1.1; }
.ep-h2-md { font-size: clamp(28px, 3.2vw, 40px); line-height: 1.1; }
.ep-h2-sm { font-size: clamp(22px, 2.2vw, 26px); line-height: 1.2; font-weight: 700; letter-spacing: -0.01em; }
.ep-cover, .ep-cover img { width: 100%; height: 100%; object-fit: cover; display: block; margin: 0; }
.ep-cover { position: relative; }
.ep-slant-top { clip-path: polygon(0 8%, 100% 0, 100% 100%, 0 100%); }
.ep-band { height: clamp(200px, 30vw, 400px); clip-path: polygon(0 0, 100% 0, 100% 100%, 0 90%); overflow: hidden; }
.ep-band--tall { height: clamp(200px, 32vw, 420px); }
.ep-band figure, .ep-band img { height: 100%; }
.ep-link-arrow a, a.ep-link-arrow { color: var(--ep-primary); text-decoration: none; font-weight: 600; display: inline-flex; align-items: center; gap: 6px; padding: 8px 0; }
.ep-link-arrow a:hover, a.ep-link-arrow:hover { color: var(--ep-primary-hover); }
.ep-link-arrow--dark a { color: var(--ep-dark); font-size: 17px; padding: 12px 0; }
.ep-link-arrow--dark a:hover { color: var(--ep-primary); }
.ep-link-arrow a::after, a.ep-link-arrow::after { content: "\2192"; }

/* ---------- Secties ---------- */
.ep-section { padding-top: var(--ep-section); padding-bottom: var(--ep-section); }
.ep-section--white { background: var(--ep-white); border-top: 1px solid var(--ep-line); }
.ep-section--dark { background: var(--ep-dark); color: var(--ep-white); }
.ep-section--dark h1, .ep-section--dark h2, .ep-section--dark h3, .ep-section--dark p { color: var(--ep-white); }
.ep-section--soft { background: var(--ep-soft); }
.ep-section--tight { padding-top: clamp(40px, 5vw, 64px); padding-bottom: clamp(40px, 5vw, 64px); }
.ep-section--hero { padding-top: clamp(48px, 7vw, 88px); padding-bottom: clamp(40px, 5vw, 64px); }
.ep-section--flush-top { padding-top: 0; }
.ep-section > .wp-block-group__inner-container > * + *, .ep-section > * + * { margin-top: 0; }
.ep-stack > * + * { margin-top: 16px; }
.ep-stack--lg > * + * { margin-top: 22px; }
.ep-stack--xl > * + * { margin-top: clamp(28px, 4vw, 40px); }
.ep-section-head { display: flex; flex-wrap: wrap; gap: 16px 48px; align-items: flex-end; justify-content: space-between; }
.ep-section-head > * { margin: 0; }
.ep-section-head p { max-width: 440px; font-size: 16px; line-height: 1.55; color: var(--ep-muted); }
.ep-breadcrumb { font-size: 15px; color: var(--ep-muted); }
.ep-breadcrumb a { color: var(--ep-muted); text-decoration: none; font-weight: 600; }
.ep-breadcrumb a:hover { color: var(--ep-primary); }

/* ---------- Knoppen ---------- */
:root { --ep-arrow: url("data:image/svg+xml,%3Csvg 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'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E"); }
.wp-block-button { position: relative; }
.wp-block-button__link { position: relative; isolation: isolate; overflow: hidden; display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 48px; text-decoration: none; border-radius: var(--radius); cursor: pointer; transition: transform var(--dur-fast) var(--ease), color var(--dur) var(--ease), border-color var(--dur) var(--ease); }
/* Vulling van links naar rechts: alleen transform. */
.wp-block-button__link::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--btn-fill, var(--color-petrol)); transform: scaleX(0); transform-origin: left center; transition: transform var(--dur-slow) var(--ease); }
.ep-btn-sm .wp-block-button__link, .ep-btn-sm.wp-block-button__link { font-size: 16px; padding: 12px 20px; min-height: 44px; }
/* Primair (eucalyptus): vult naar petrol, pijl, lift en zachte schaduwlaag (opacity). */
.wp-block-button:where(:not(.is-style-secundair):not(.is-style-op-donker):not(.is-style-tekstlink)) > .wp-block-button__link { background: var(--color-eucalyptus); color: var(--color-wit); border-color: transparent; }
.wp-block-button:where(:not(.is-style-secundair):not(.is-style-op-donker):not(.is-style-tekstlink)) > .wp-block-button__link::after { content: ""; flex: none; width: 1.05em; height: 1.05em; background: currentColor; -webkit-mask: var(--ep-arrow) center / contain no-repeat; mask: var(--ep-arrow) center / contain no-repeat; transition: transform var(--dur) var(--ease); }
.wp-block-button:where(:not(.is-style-secundair):not(.is-style-op-donker):not(.is-style-tekstlink))::after { content: ""; position: absolute; inset: 0; border-radius: var(--radius); box-shadow: var(--shadow-lg); opacity: 0; pointer-events: none; transition: opacity var(--dur) var(--ease), transform var(--dur-fast) var(--ease); }
/* Secundair (outline): vult met salie, tekst blijft petrol. */
.is-style-secundair .wp-block-button__link, .ep-btn-secondary { --btn-fill: var(--color-salie); background: transparent; border: 1.5px solid var(--color-petrol); color: var(--color-petrol); }
/* Op donkere vlakken: vult met salie, tekst wordt petrol. */
.is-style-op-donker .wp-block-button__link { --btn-fill: var(--color-salie); background: transparent; border: 1.5px solid var(--color-salie); color: var(--color-wit); }
/* Tekstlink-knop: onderstreping loopt in, pijl schuift mee. */
.is-style-tekstlink .wp-block-button__link { background: transparent; border-color: transparent; color: var(--color-petrol); padding-left: 0; padding-right: 0; font-size: 17px; overflow: visible; }
.is-style-tekstlink .wp-block-button__link::before { inset: auto calc(1em + 10px) 11px 0; height: 1.5px; z-index: 0; background: currentColor; }
.is-style-tekstlink .wp-block-button__link::after { content: "\2192"; display: inline-block; transition: transform var(--dur) var(--ease); }
.ep-section--dark .is-style-tekstlink .wp-block-button__link { color: var(--color-wit); }
/* Hover alleen waar hover bestaat; focus-visible krijgt dezelfde staat. */
.wp-block-button__link:focus-visible { transform: translateY(-2px); }
.wp-block-button__link:focus-visible::before { transform: scaleX(1); }
.wp-block-button:focus-within::after { opacity: 1; transform: translateY(-2px); }
.wp-block-button:where(:not(.is-style-secundair):not(.is-style-op-donker):not(.is-style-tekstlink)) > .wp-block-button__link:focus-visible::after, .is-style-tekstlink .wp-block-button__link:focus-visible::after { transform: translateX(4px); }
.is-style-secundair .wp-block-button__link:focus-visible, .is-style-op-donker .wp-block-button__link:focus-visible, .ep-btn-secondary:focus-visible { color: var(--color-petrol); }
@media (hover: hover) and (pointer: fine) {
  .wp-block-button__link:hover { transform: translateY(-2px); }
  .wp-block-button__link:hover::before { transform: scaleX(1); }
  .wp-block-button:hover::after { opacity: 1; transform: translateY(-2px); }
  .wp-block-button:where(:not(.is-style-secundair):not(.is-style-op-donker):not(.is-style-tekstlink)) > .wp-block-button__link:hover::after, .is-style-tekstlink .wp-block-button__link:hover::after { transform: translateX(4px); }
  .is-style-secundair .wp-block-button__link:hover, .is-style-op-donker .wp-block-button__link:hover, .ep-btn-secondary:hover { color: var(--color-petrol); }
  .is-style-tekstlink .wp-block-button__link:hover { color: var(--color-eucalyptus); background: transparent; }
}
/* Klik: lift terug. */
.wp-block-button__link:active { transform: translateY(0); }
.wp-block-button:active::after { transform: translateY(0); }
/* Laadstatus (formulieren): spinner i.p.v. pijl. */
@keyframes ep-spin { to { transform: rotate(360deg); } }
.wp-block-button__link.is-loading { pointer-events: none; }
.wp-block-button__link.is-loading::after { -webkit-mask: none; mask: none; background: transparent; width: 1em; height: 1em; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: ep-spin .7s linear infinite; }
.wp-block-button__link:disabled { cursor: default; }
.ep-actions { display: flex; flex-wrap: wrap; gap: 12px 24px; align-items: center; }

/* ---------- Header ---------- */
/* Sticky zit op de template-part-wrapper (een sticky kind kan niet buiten zijn eigen ouder blijven plakken).
   De wrapper houdt altijd de volle hoogte (72px), zodat de header bij scrollen compacter kan worden zonder
   dat de pagina eronder verspringt. */
header.wp-block-template-part:has(> .ep-header) { position: sticky; top: var(--wp-admin--admin-bar--height, 0px); z-index: 50; min-height: 72px; pointer-events: none; }
.wp-site-blocks:has(.ep-hero--cover) > header.wp-block-template-part:has(> .ep-header) { min-height: 0; }
.ep-header { position: relative; isolation: isolate; pointer-events: auto; background-color: var(--color-warmwit); transition: background-color var(--dur) var(--ease); }
/* Frosted-glass- en schaduwlaag: apart pseudo-element (opacity) zodat het mobiele menu (position: fixed) niet in een filter-bevattend blok terechtkomt. */
.ep-header::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: 0; box-shadow: 0 1px 0 rgba(22, 61, 67, .06), var(--shadow-md); -webkit-backdrop-filter: blur(14px) saturate(1.1); backdrop-filter: blur(14px) saturate(1.1); transition: opacity var(--dur) var(--ease); }
.ep-header--scrolled { background-color: rgba(246, 244, 239, .88); }
.ep-header--scrolled::after { opacity: 1; }
.ep-header__inner { min-height: 72px; gap: 24px; transition: min-height var(--dur) var(--ease); }
.ep-header--scrolled .ep-header__inner { min-height: 60px; }
/* Logo "EP labels & advies" is breed (±10,5:1); breedte bepaalt de grootte. */
.ep-header .ep-logo img { width: 273px !important; height: auto; transform-origin: left center; transition: transform var(--dur) var(--ease); }
.ep-header--scrolled .ep-logo img { transform: scale(.9); }
.ep-footer .ep-logo--footer img { width: 294px !important; height: auto; }
@media (max-width: 640px) { .ep-header .ep-logo img { width: 200px !important; } .ep-footer .ep-logo--footer img { width: 240px !important; } }
.ep-header__right { gap: 16px; }
.ep-nav .wp-block-navigation__container { gap: 24px; }
.ep-nav .wp-block-navigation-item__content { position: relative; color: var(--ep-ink); text-decoration: none; font-weight: 600; font-size: 16px; padding: 14px 0; white-space: nowrap; transition: color var(--dur) var(--ease); }
.ep-nav .wp-block-navigation-item__content:focus-visible, .ep-nav .wp-block-navigation-item__content[aria-current] { color: var(--color-eucalyptus); }
@media (hover: hover) and (pointer: fine) { .ep-nav .wp-block-navigation-item__content:hover { color: var(--color-eucalyptus); } }
/* Geanimeerde onderstreping (alleen transform); het actieve item blijft onderstreept. */
@media (min-width: 1240px) {
  .ep-nav .wp-block-navigation-item__content::after { content: ""; position: absolute; left: 0; right: 0; bottom: 6px; height: 2px; border-radius: 2px; background: var(--color-eucalyptus); transform: scaleX(0); transform-origin: left center; transition: transform var(--dur-slow) var(--ease); }
  .ep-nav .wp-block-navigation-item__content:focus-visible::after, .ep-nav .wp-block-navigation-item__content[aria-current]::after, .ep-nav .current-menu-item > .wp-block-navigation-item__content::after { transform: scaleX(1); }
}
@media (min-width: 1240px) and (hover: hover) and (pointer: fine) { .ep-nav .wp-block-navigation-item__content:hover::after { transform: scaleX(1); } }
.ep-header__cta .wp-block-button__link { white-space: nowrap; }
.ep-nav .wp-block-navigation__responsive-container-open { border: 1.5px solid var(--ep-soft); border-radius: var(--ep-radius); width: 44px; height: 44px; color: var(--ep-dark); }
.ep-nav .wp-block-navigation__responsive-container.is-menu-open { padding: 24px var(--ep-gutter); }
.ep-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content { font-size: 18px; padding: 12px 0; border-bottom: 1px solid #EEF1EC; width: 100%; }
@media (max-width: 1239px) {
  .ep-nav .wp-block-navigation__responsive-container-open { display: flex !important; }
  .ep-nav .wp-block-navigation__responsive-container:not(.is-menu-open) { display: none !important; }
  .ep-nav .wp-block-navigation__responsive-container.is-menu-open { display: flex !important; }
  .ep-header__right { gap: 8px; }
}
@media (max-width: 480px) { .ep-header__cta { display: none; } }

/* ---------- Footer ---------- */
.ep-footer { border-top: 1px solid var(--ep-line); padding-top: clamp(40px, 6vw, 64px); }
.ep-footer__grid { gap: clamp(28px, 4vw, 48px); margin-bottom: 32px; }
.ep-footer__about { color: var(--ep-muted); max-width: 300px; margin-top: 16px; }
.ep-footer__title { font-weight: 700; font-size: 15px; color: var(--ep-dark); margin: 0 0 10px; }
.ep-footer__links { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; }
.ep-footer__links a { color: var(--ep-ink); text-decoration: none; font-size: 15px; }
.ep-footer__links a:hover { color: var(--ep-primary); }
.ep-footer__meta { color: var(--ep-muted); margin-top: 16px; }
.ep-footer__bottom { border-top: 1px solid var(--ep-line); padding: 20px 0; color: var(--ep-muted); }
.ep-footer__bottom p { margin: 0; font-size: 14px; }
.ep-footer__legal a { color: var(--ep-muted); text-decoration: none; margin-left: 20px; }
.ep-footer__legal a:first-child { margin-left: 0; }
.ep-footer__legal a:hover { color: var(--ep-primary); }
@media (max-width: 781px) { .ep-footer__grid.wp-block-columns { flex-wrap: wrap !important; } .ep-footer__grid .wp-block-column { flex-basis: 100% !important; } }

/* ---------- Home: hero ---------- */
.ep-hero { overflow: hidden; }
.ep-hero__inner { display: flex; flex-wrap: wrap; gap: clamp(28px, 4vw, 56px); align-items: center; padding-top: clamp(40px, 6vw, 80px); }
.ep-hero__copy { flex: 1 1 340px; max-width: 520px; padding-bottom: clamp(24px, 4vw, 64px); }
.ep-hero__copy > * + * { margin-top: 22px; }
.ep-hero__media { flex: 1.6 1 420px; min-width: 0; align-self: flex-end; aspect-ratio: 5 / 4; max-height: min(600px, 70vh); }
.ep-hero__media figure, .ep-hero__media img { height: 100%; }

/* ---------- Home: dienstentegels ---------- */
/* Losse kaarten in plaats van één dichtgetimmerd grid-vak: elke dienst een eigen
   afgeronde kaart met zachte schaduw, met voldoende ruimte ertussen. De eerste
   kolom iets breder dan de tweede voor een lichte, niet-perfect-symmetrische
   ritmiek (2026-10-12, op verzoek). */
.ep-tiles { display: grid; grid-template-columns: 1fr; gap: 24px; }
@media (min-width: 640px) { .ep-tiles { grid-template-columns: 1.12fr 0.88fr; } }
.ep-tile { position: relative; isolation: isolate; background: var(--color-wit); border: 1.5px solid transparent; border-radius: var(--radius-lg); box-shadow: 0 4px 16px rgba(0, 0, 0, .06); padding: clamp(24px, 3vw, 36px); display: flex; flex-direction: column; gap: 10px; transition: transform var(--dur) var(--ease), border-color var(--dur) var(--ease); }
/* Schaduwlaag onder de hover: apart pseudo-element, zodat alleen opacity animeert. */
.ep-tile::after, .ep-card::after { content: ""; position: absolute; inset: -1.5px; border-radius: inherit; box-shadow: var(--shadow-lg); opacity: 0; z-index: -1; pointer-events: none; transition: opacity var(--dur) var(--ease); }
.ep-tile:has(a:focus-visible), .ep-card:has(a:focus-visible) { transform: translateY(-4px); border-color: var(--color-eucalyptus); }
.ep-tile:has(a:focus-visible)::after, .ep-card:has(a:focus-visible)::after { opacity: 1; }
.ep-tile__media { overflow: hidden; border-radius: var(--radius); aspect-ratio: 3 / 2; }
.ep-tile__media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform var(--dur-slow) var(--ease); }
@media (hover: hover) and (pointer: fine) {
  .ep-tile:hover, .ep-card:hover { transform: translateY(-4px); border-color: var(--color-eucalyptus); }
  .ep-tile:hover::after, .ep-card:hover::after { opacity: 1; }
  .ep-tile:hover .ep-tile__media img { transform: scale(1.04); }
  /* "Meer lezen"-pijl verschijnt bij hover/focus; op touch staat hij er altijd. */
  .ep-tile .ep-link-arrow a::after { opacity: 0; transform: translateX(-8px); transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease); }
  .ep-tile:hover .ep-link-arrow a::after, .ep-tile:has(a:focus-visible) .ep-link-arrow a::after { opacity: 1; transform: translateX(0); }
}
.ep-tile > * { margin: 0; }
.ep-tile h3 { font-size: 23px; line-height: 1.2; margin-top: 6px; }
.ep-tile h3 a { color: var(--ep-dark); text-decoration: none; }
.ep-tile h3 a::after { content: ""; position: absolute; inset: 0; }
.ep-tile p { font-size: 16px; line-height: 1.55; }
.ep-tile .ep-link-arrow { margin-top: 4px; }
.ep-audience-line { font-size: 16px; color: var(--ep-muted); }
.ep-audience-line a { font-weight: 600; }

/* ---------- Home: samenwerken ---------- */
.ep-collab { overflow: hidden; }
.ep-collab__inner { display: flex; flex-direction: row-reverse; flex-wrap: wrap; align-items: stretch; gap: 0 clamp(32px, 5vw, 72px); }
.ep-collab__copy { flex: 1 1 360px; max-width: 520px; display: flex; flex-direction: column; justify-content: center; padding: var(--ep-section) 0; }
.ep-collab__copy > * + * { margin-top: 22px; }
.ep-collab__media { flex: 1.2 1 380px; min-width: 0; min-height: 320px; margin-left: calc(-1 * var(--ep-gutter)); clip-path: polygon(0 0, 100% 6%, 100% 100%, 0 100%); }
.ep-collab__media figure, .ep-collab__media img { height: 100%; }
.ep-numbered { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 14px; counter-reset: ep; }
.ep-numbered li { display: grid; grid-template-columns: 28px 1fr; gap: 12px; align-items: baseline; font-size: 17px; line-height: 1.5; counter-increment: ep; }
.ep-numbered li::before { content: "0" counter(ep); font-weight: 800; color: var(--ep-soft); font-size: 15px; }
.ep-numbered strong { color: var(--ep-white); }
@media (max-width: 800px) { .ep-collab__media { margin-left: 0; margin-right: calc(-1 * var(--ep-gutter)); } }

/* ---------- Home: uitgelicht project ---------- */
.ep-featured__head { padding-top: var(--ep-section); padding-bottom: clamp(20px, 3vw, 32px); }
.ep-featured__image { height: clamp(240px, 38vw, 520px); clip-path: polygon(0 0, 100% 0, 100% 100%, 0 92%); overflow: hidden; }
.ep-featured__image figure, .ep-featured__image img { height: 100%; }
.ep-featured__card { max-width: 560px; margin: clamp(-60px, -8vw, -120px) 0 0 auto; position: relative; background: var(--ep-white); border-radius: var(--ep-radius-lg); padding: clamp(24px, 3vw, 36px); box-shadow: var(--ep-shadow-float); }
.ep-featured__card > * + * { margin-top: 12px; }
.ep-featured__meta { font-size: 15px; font-weight: 600; color: var(--ep-muted); }

/* ---------- CTA-vlak ---------- */
.ep-cta-section { padding-top: clamp(56px, 8vw, 112px); padding-bottom: clamp(56px, 8vw, 112px); }
.ep-cta-panel { background: var(--ep-soft); border-radius: var(--radius-lg); padding: clamp(32px, 5vw, 64px); display: flex; flex-wrap: wrap; gap: 24px 48px; align-items: center; justify-content: space-between; }
.ep-cta-panel__copy { flex: 1 1 320px; max-width: 560px; }
.ep-cta-panel__copy > * + * { margin-top: 12px; }
.ep-cta-panel__copy p { font-size: 18px; }
.ep-cta-row { display: flex; flex-wrap: wrap; gap: 20px 48px; align-items: center; justify-content: space-between; }

/* ---------- Kaarten en lijsten ---------- */
.ep-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); gap: clamp(24px, 3vw, 40px); }
.ep-cards--3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); }
.ep-card { display: flex; flex-direction: column; gap: 12px; padding: clamp(24px, 3vw, 32px); background: var(--ep-bg); border-radius: var(--ep-radius-lg); border: 1.5px solid transparent; position: relative; }
.ep-card > * { margin: 0; }
.ep-card { transition: transform var(--dur) var(--ease), border-color var(--dur) var(--ease); isolation: isolate; }
.ep-card:not(.ep-card--link) .ep-link-arrow a::before { content: ""; position: absolute; inset: 0; }
.ep-card--link h2 a { color: var(--ep-dark); text-decoration: none; }
.ep-card--link h2 a::after { content: ""; position: absolute; inset: 0; }
.ep-card h2 { font-size: 26px; line-height: 1.2; letter-spacing: -0.015em; }
.ep-card__cat { font-size: 14px; font-weight: 600; color: var(--ep-primary); }
.ep-card__for { font-size: 15px; color: var(--ep-muted); }
.ep-card__for strong { color: var(--ep-dark); }
.ep-related { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: 16px; }
.ep-related-card { background: var(--ep-white); border: 1.5px solid var(--ep-line); border-radius: var(--ep-radius-lg); padding: 22px 24px; position: relative; }
.ep-related-card:hover { border-color: var(--ep-primary); }
.ep-related-card > * { margin: 0; }
.ep-related-card h3 { font-size: 20px; }
.ep-related-card h3 a { color: var(--ep-dark); text-decoration: none; }
.ep-related-card h3 a::after { content: ""; position: absolute; inset: 0; }
.ep-related-card p { font-size: 16px; line-height: 1.5; margin-top: 6px; }
.ep-two-col.wp-block-columns { gap: clamp(32px, 5vw, 72px); }
.ep-two-col .wp-block-column > * + * { margin-top: 14px; }
.ep-pillars { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); gap: clamp(24px, 4vw, 48px); }
.ep-pillar { padding-top: 18px; border-top: 3px solid var(--ep-primary); }
.ep-pillar > * { margin: 0; }
.ep-pillar h2, .ep-pillar h3 { font-size: 22px; line-height: 1.25; font-weight: 700; }
.ep-pillar p { font-size: 17px; line-height: 1.55; margin-top: 10px; }
.ep-section--dark .ep-pillar { border-top-color: var(--ep-soft); }
.ep-steps { position: relative; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr)); gap: clamp(20px, 3vw, 32px); }
/* WordPress' flow-layout geeft stap 2-4 anders een marge van 16px, waardoor de balkjes niet op één lijn lagen. */
.ep-steps > .ep-step { margin-block: 0; }
.ep-step { padding-top: 18px; border-top: 3px solid var(--ep-soft); }
.ep-step:first-child { border-top-color: var(--ep-primary); }
.ep-step > * { margin: 0; }
.ep-step__nr { font-weight: 800; font-size: 14px; color: var(--ep-primary); transition: color var(--dur) var(--ease); }
/* Meebewegend balkje (ep-labels.js): één glijdend balkje volgt de stap waar je overheen gaat. Zonder JS blijft stap 1 donker. */
.ep-steps.is-enhanced > .ep-step:first-child { border-top-color: var(--ep-soft); }
.ep-steps__bar { position: absolute; left: 0; top: 0; z-index: 1; height: 3px; margin: 0 !important; border-radius: 3px; background: var(--color-eucalyptus); pointer-events: none; transition: transform var(--dur-slow) var(--ease); will-change: transform; }
.ep-step.is-active .ep-step__nr { color: var(--color-petrol); }
.ep-step h3 { margin-top: 10px; }
.ep-step p { font-size: 16px; line-height: 1.55; margin-top: 10px; }
.ep-checklist { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 12px; }
.ep-checklist li { display: flex; align-items: flex-start; gap: 10px; font-size: 17px; line-height: 1.55; }
.ep-checklist .ep-icon { margin-top: 2px; }
.ep-plain-list { padding-left: 22px; margin: 0; display: flex; flex-direction: column; gap: 8px; font-size: 17px; line-height: 1.55; }
.ep-deliverables { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: 16px; }
.ep-deliverables p { background: var(--ep-white); border-radius: var(--radius); padding: 20px 22px; font-size: 17px; line-height: 1.5; font-weight: 500; color: var(--ep-dark); margin: 0; }

/* Dienstdetail: kop + zijpaneel */
.ep-detail-hero { display: flex; flex-wrap: wrap; gap: clamp(28px, 4vw, 56px); align-items: flex-start; padding-top: clamp(40px, 6vw, 80px); padding-bottom: clamp(40px, 6vw, 80px); }
.ep-detail-hero__copy { flex: 1.4 1 380px; max-width: 680px; }
.ep-detail-hero__copy > * + * { margin-top: 18px; }
.ep-aside-cta { flex: 1 1 280px; max-width: 380px; background: var(--ep-dark); color: var(--ep-white); border-radius: var(--ep-radius-lg); padding: 28px; }
.ep-aside-cta > * { margin: 0; color: var(--ep-white); }
.ep-aside-cta > * + * { margin-top: 14px; }
.ep-aside-cta__title { font-weight: 800; font-size: 22px; letter-spacing: -0.01em; }
.ep-aside-cta p { font-size: 16px; line-height: 1.55; }
.ep-aside-cta .wp-block-button__link { width: 100%; }
.ep-aside-cta .ep-aside-cta__tel a { color: var(--ep-soft); text-decoration: none; font-weight: 600; display: block; text-align: center; padding: 6px; }
.ep-aside-cta .ep-aside-cta__tel a:hover { color: var(--ep-white); }

.ep-faq--compact summary { font-size: 16px; padding: 14px 0; min-height: 48px; }

/* Projecten */
.ep-project-card { position: relative; }
.ep-project-card > * { margin: 0; }
.ep-project-card > * + * { margin-top: 12px; }
.ep-project-card__image { aspect-ratio: 4 / 3; border-radius: var(--ep-radius-lg); overflow: hidden; }
.ep-project-card__image figure, .ep-project-card__image img { height: 100%; }
.ep-project-card__meta { font-size: 14px; font-weight: 600; color: var(--ep-muted); }
.ep-project-card h2 { font-size: 22px; line-height: 1.2; }
.ep-project-card h2 a { color: var(--ep-dark); text-decoration: none; }
.ep-project-card h2 a::after { content: ""; position: absolute; inset: 0; }
.ep-project-card p:last-child { font-size: 16px; line-height: 1.55; }
.ep-facts { display: flex; flex-wrap: wrap; gap: 12px 40px; font-size: 16px; }
.ep-facts p { margin: 0; display: flex; flex-direction: column; gap: 2px; font-weight: 600; color: var(--ep-dark); }
.ep-facts p span { color: var(--ep-muted); font-size: 14px; font-weight: 600; }
.ep-project-image { height: clamp(220px, 36vw, 480px); border-radius: var(--ep-radius-lg); overflow: hidden; clip-path: polygon(0 0, 100% 0, 100% 100%, 0 94%); }
.ep-project-image figure, .ep-project-image img { height: 100%; }
.ep-project-cols.wp-block-columns { gap: clamp(32px, 4vw, 56px); }
.ep-project-cols h2 { font-size: 22px; letter-spacing: -0.01em; }
.ep-project-cols .wp-block-column > * + * { margin-top: 12px; }

/* Over ons */
.ep-about-hero { display: flex; flex-wrap: wrap; gap: clamp(28px, 4vw, 56px); align-items: flex-end; padding-top: clamp(40px, 6vw, 80px); overflow: hidden; }
.ep-about-hero__copy { flex: 1 1 340px; max-width: 560px; padding-bottom: clamp(24px, 4vw, 64px); }
.ep-about-hero__copy > * + * { margin-top: 18px; }
.ep-about-hero__media { flex: 1.4 1 400px; min-width: 0; aspect-ratio: 3 / 2; max-height: 520px; }
.ep-about-hero__media figure, .ep-about-hero__media img { height: 100%; }
.ep-about-hero__media img { object-position: 50% 25%; }
.ep-team { display: flex; flex-wrap: wrap; gap: 24px 48px; justify-content: space-between; align-items: flex-start; }
.ep-team__copy { flex: 1 1 300px; max-width: 520px; }
.ep-team__copy > * + * { margin-top: 10px; }
.ep-team__media { flex: 1 1 320px; max-width: 520px; }
.ep-team__media > * + * { margin-top: 16px; }
.ep-team__photo { aspect-ratio: 3 / 2; border-radius: var(--ep-radius-lg); overflow: hidden; }
.ep-team__photo figure, .ep-team__photo img { height: 100%; }
.ep-locations { font-size: 17px; font-weight: 600; color: var(--ep-dark); }

/* ---------- Contact ---------- */
.ep-contact-grid.wp-block-columns { gap: clamp(32px, 5vw, 72px); padding-top: clamp(40px, 6vw, 80px); padding-bottom: clamp(40px, 6vw, 80px); }
.ep-contact-intro > * + * { margin-top: 20px; }
.ep-contact-intro > p { font-size: 18px; max-width: 480px; }
.ep-contact-details { background: var(--ep-white); border-radius: var(--ep-radius-lg); padding: 24px; max-width: 480px; }
.ep-contact-details p { margin: 0; display: flex; flex-direction: column; gap: 4px; font-size: 17px; }
.ep-contact-details p + p { margin-top: 16px; }
.ep-contact-details p span { font-size: 14px; font-weight: 600; color: var(--ep-muted); }
.ep-contact-details a { font-weight: 600; text-decoration: none; }
.ep-contact-faq { max-width: 480px; }
.ep-form-wrap { width: 100%; }
.ep-form { display: flex; flex-direction: column; gap: 22px; background: var(--color-wit); border-radius: var(--radius-lg); padding: clamp(24px, 3.5vw, 40px); box-shadow: var(--shadow-sm); }
.ep-form__row { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); gap: 22px; }
.ep-field { display: flex; flex-direction: column; gap: 8px; }
.ep-field label { font-weight: 600; font-size: 15px; color: var(--color-petrol); }
.ep-field label .ep-req { color: var(--color-eucalyptus); margin-left: 2px; font-weight: 700; }
.ep-field label .ep-opt { font-weight: 400; color: var(--ep-muted); margin-left: 4px; }
.ep-field input, .ep-field select, .ep-field textarea { height: 54px; padding: 0 16px; border-radius: var(--radius); border: 1.5px solid color-mix(in srgb, var(--color-petrol) 62%, white); background-color: var(--color-warmwit); font: inherit; font-size: 16px; color: var(--color-donkergrijs); width: 100%; transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease), background-color var(--dur) var(--ease); }
.ep-field textarea { height: auto; min-height: 132px; padding: 14px 16px; line-height: 1.55; resize: vertical; }
.ep-field select { appearance: none; -webkit-appearance: none; padding-right: 46px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23163D43' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 16px center; background-size: 18px; cursor: pointer; }
.ep-field input::placeholder, .ep-field textarea::placeholder { color: color-mix(in srgb, var(--ep-muted) 75%, white); }
@media (hover: hover) and (pointer: fine) { .ep-field input:hover, .ep-field select:hover, .ep-field textarea:hover { border-color: var(--color-petrol); } }
.ep-field input:focus, .ep-field select:focus, .ep-field textarea:focus { outline: none; border-color: var(--color-eucalyptus); background-color: var(--color-wit); box-shadow: 0 0 0 4px rgba(52, 117, 104, .24); }
.ep-field [aria-invalid="true"] { border-color: var(--ep-error); background-color: #FDF4F4; }
.ep-field [aria-invalid="true"]:focus { box-shadow: 0 0 0 4px rgba(155, 44, 44, .18); }
.ep-field__hint { font-size: 14px; color: var(--ep-muted); }
.ep-field__error { display: flex; align-items: flex-start; gap: 6px; font-size: 14px; line-height: 1.4; color: var(--ep-error); font-weight: 600; }
.ep-field__error::before { content: "!"; flex: none; width: 16px; height: 16px; margin-top: 1px; border-radius: 50%; background: var(--ep-error); color: var(--color-wit); font-size: 11px; font-weight: 800; line-height: 16px; text-align: center; }
.ep-field__error[hidden], .ep-form-summary[hidden] { display: none; }
.ep-form-summary { padding: 12px 14px; border-radius: var(--radius); background: #FBEAEA; border: 1px solid #E5B4B4; color: #7A1F1F; font-size: 15px; font-weight: 500; margin: 0; }
.ep-form__footer { display: flex; flex-wrap: wrap; gap: 16px 24px; align-items: center; justify-content: space-between; }
.ep-form__footer p { font-size: 14px; line-height: 1.5; color: var(--ep-muted); max-width: 320px; margin: 0; }
.ep-form button[type="submit"] { border: 1.5px solid transparent; cursor: pointer; font: inherit; font-weight: 600; font-size: 17px; padding: 14px 26px; }
.ep-form button[type="submit"]:disabled { cursor: default; }
.ep-form button[type="submit"]:disabled:not(.is-loading) { opacity: .7; }
.ep-honeypot { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.ep-form-result { background: var(--color-wit); border-radius: var(--radius-lg); padding: clamp(24px, 3.5vw, 40px); display: flex; flex-direction: column; gap: 16px; align-items: flex-start; box-shadow: var(--shadow-sm); }
.ep-form-result--error { margin-bottom: 18px; }
.ep-form-result h2 { font-size: 26px; line-height: 1.2; margin: 0; }
.ep-form-result p { margin: 0; }
.ep-form-result__check { width: 48px; height: 48px; border-radius: 50%; background: var(--color-eucalyptus); color: var(--color-wit); display: flex; align-items: center; justify-content: center; font-size: 22px; font-weight: 700; }

/* ---------- Juridisch / 404 ---------- */
.ep-404 { padding-top: clamp(64px, 9vw, 120px); padding-bottom: clamp(64px, 9vw, 120px); }
.ep-404 > * + * { margin-top: 16px; }
.ep-404__code { font-weight: 600; margin: 0; }

/* ---------- Correcties na eerste livegang ---------- */
.ep-header { padding-top: 0 !important; padding-bottom: 0 !important; }
.ep-header__inner > * { margin: 0; }
.ep-main .entry-content > * + *, .ep-main > .entry-content > * { margin-block-start: 0; }
.ep-main .entry-content { margin-block: 0; }
.ep-section--flush-bottom { padding-bottom: 0; }
.ep-hero.ep-section { padding-bottom: 0; }
.ep-collab.ep-section { padding-bottom: 0; }
/* Beeldvlakken: figuur vult het vlak, foto wordt bijgesneden (object-fit). */
.ep-hero__media, .ep-collab__media, .ep-band, .ep-featured__image, .ep-project-card__image, .ep-project-image, .ep-about-hero__media, .ep-team__photo { position: relative; overflow: hidden; }
.ep-hero__media figure, .ep-collab__media figure, .ep-band figure, .ep-featured__image figure, .ep-project-card__image figure, .ep-project-image figure, .ep-about-hero__media figure, .ep-team__photo figure { position: absolute; inset: 0; margin: 0; height: 100%; width: 100%; }
.ep-hero__media img, .ep-collab__media img, .ep-band img, .ep-featured__image img, .ep-project-card__image img, .ep-project-image img, .ep-about-hero__media img, .ep-team__photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ep-collab__media { min-height: 360px; }
.ep-featured__card { margin-top: clamp(-120px, -8vw, -60px); }
.ep-footer { padding-bottom: 0 !important; }
.ep-footer__bottom { margin-bottom: 0; }
/* Genummerde lijst: blok-layout met absolute markering (robuust bij <strong> + tekst in één li). */
.ep-numbered li { display: block; position: relative; padding-left: 40px; }
.ep-numbered li::before { position: absolute; left: 0; top: 0; }
/* Uitgelichte kaart: overlap wint van de :first-child-regel van de flow-layout. */
.ep-featured .ep-featured__card { margin-top: clamp(-120px, -8vw, -60px) !important; }
/* Foto's in beeldvlakken: wint van core .wp-block-image img { height:auto }. */
.ep-hero__media .wp-block-image img, .ep-collab__media .wp-block-image img, .ep-band .wp-block-image img, .ep-featured__image .wp-block-image img, .ep-project-card__image .wp-block-image img, .ep-project-image .wp-block-image img, .ep-about-hero__media .wp-block-image img, .ep-team__photo .wp-block-image img { height: 100% !important; width: 100% !important; object-fit: cover; }
body.ep-labels .ep-numbered li::before { content: "0" counter(ep); }
/* Header op smalle schermen: logo krimpt niet, knop verdwijnt onder 480px. */
.ep-header__inner > .ep-logo { flex: 0 0 auto; }
.ep-logo img { width: auto !important; max-width: none; }
@media (max-width: 560px) { .ep-header .ep-header__cta.wp-block-buttons { display: none !important; } }

/* ---------- Bedrijfsgegevens en contact (versie 1.1) ---------- */
/* Telefoonlink in de header: alleen op ruime desktops, vóór de primaire knop. */
.ep-header__tel { display: none; align-items: center; gap: 8px; color: var(--ep-dark); text-decoration: none; font-weight: 600; font-size: 16px; white-space: nowrap; padding: 8px 0; }
.ep-header__tel:hover { color: var(--ep-primary); }
.ep-header__tel svg { flex: none; }
@media (min-width: 1200px) { .ep-header__tel { display: inline-flex; } }
/* Belregel alleen in het geopende mobiele menu. */
.ep-nav .ep-nav__tel { display: none; }
.ep-nav .wp-block-navigation__responsive-container.is-menu-open .ep-nav__tel { display: block; margin-top: 8px; }
.ep-nav .wp-block-navigation__responsive-container.is-menu-open .ep-nav__tel .wp-block-navigation-item__content { color: var(--ep-primary); border-bottom: 0; }
/* Footer: contactkolom en onderregel. */
.ep-footer__contact, .ep-footer__address { font-size: 15px; line-height: 1.6; margin-top: 12px; color: var(--ep-ink); }
.ep-footer__contact a { color: var(--ep-dark); text-decoration: none; font-weight: 600; }
.ep-footer__contact a:hover { color: var(--ep-primary); }
.ep-footer__bottom { display: flex; flex-wrap: wrap; gap: 12px 24px; justify-content: space-between; align-items: center; }
.ep-footer__legalinfo { margin: 0; font-size: 14px; color: var(--ep-muted); }
.ep-footer__sep { margin: 0 6px; }
/* Contactpagina: contactblok en kleine bedrijfsgegevens. */
.ep-contact-details p a { color: var(--ep-dark); font-size: 17px; }
.ep-contact-details .ep-contact-details__tel a { font-size: 22px; font-weight: 800; letter-spacing: -0.01em; }
.ep-contact-details p a:hover { color: var(--ep-primary); }
.ep-contact-note { font-size: 16px; color: var(--ep-muted); max-width: 480px; }
.ep-contact-legal { font-size: 14px; color: var(--ep-muted); max-width: 480px; }
/* Contactformulier: raster met twee kolommen, geen elkaar rakende velden. Alleen binnen .ep-form. */
.ep-form { gap: 24px; }
.ep-form .ep-form__row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 20px; row-gap: 24px; }
.ep-form .ep-field { min-width: 0; gap: 8px; }
.ep-form .ep-field label { display: block; }
.ep-form .ep-field input, .ep-form .ep-field select, .ep-form .ep-field textarea { width: 100%; max-width: 100%; box-sizing: border-box; }
.ep-form > .ep-field textarea { width: 100%; }
@media (max-width: 640px) { .ep-form .ep-form__row { grid-template-columns: minmax(0, 1fr); } }
/* Compacte inhoudsblokken op dienst- en doelgroeppagina's. */
.ep-blocks-2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: clamp(20px, 3vw, 32px); }
.ep-blocks-3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: clamp(20px, 3vw, 32px); }
.ep-block { padding-top: 18px; border-top: 3px solid var(--ep-primary); }
.ep-block > * { margin: 0; }
.ep-block h3 { font-size: 20px; line-height: 1.25; }
.ep-block p { font-size: 17px; line-height: 1.55; margin-top: 10px; }
.ep-subblock { max-width: 640px; padding: 20px 24px; background: var(--ep-white); border: 1.5px solid var(--ep-line); border-radius: var(--ep-radius-lg); }
.ep-subblock > * { margin: 0; }
.ep-subblock p { margin-top: 8px; font-size: 16px; line-height: 1.55; }
.ep-section--white .ep-subblock { background: var(--ep-bg); border-color: transparent; }
.ep-note { font-size: 16px; color: var(--ep-muted); max-width: 640px; }
.ep-cta-compact { display: flex; flex-wrap: wrap; gap: 16px 48px; align-items: center; justify-content: space-between; background: var(--ep-soft); border-radius: var(--radius-lg); padding: clamp(24px, 4vw, 40px); }
.ep-cta-compact > div { flex: 1 1 320px; max-width: 560px; }
.ep-cta-compact > div > * { margin: 0; }
.ep-cta-compact > div p { margin-top: 8px; font-size: 17px; }
/* Conceptonderdelen: aanwezig in de editor, verborgen voor bezoekers. */
.ep-concept { display: none !important; }
/* Beschrijvende hero-kop (langer dan de merkregel): iets kleiner en bredere kolom, blijft binnen drie regels. */
.ep-hero__copy { max-width: 580px; }
.ep-h1-hero { font-size: clamp(36px, 3.6vw, 52px); text-wrap: balance; }
/* Dienstentegels: titel is platte tekst; de pijllink maakt de hele tegel klikbaar. */
.ep-tile h3 a::after { content: none; }
.ep-tile .ep-link-arrow a::before { content: ""; position: absolute; inset: 0; }

/* ---------- TEST 2026-09-23: full-bleed cover-hero (referentie: zonneplan.nl) ----------
   Foto vult de hero edge-to-edge met een donkere overlay voor leesbare witte tekst.
   Structuur is voorbereid op een achtergrondvideo: .ep-hero-cover__media kan later een
   <video autoplay muted loop playsinline poster="..."> bevatten in plaats van de foto;
   zie REVIEW.md voor de vervolgstappen (bestand, mobiele fallback, prefers-reduced-motion). */
.ep-hero--cover.ep-hero { overflow: visible; }
.ep-hero-cover__inner { position: relative; min-height: clamp(520px, 78vh, 760px); display: flex; align-items: center; overflow: hidden; }
.ep-hero-cover__media { position: absolute; inset: 0; z-index: 0; }
.ep-hero-cover__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ep-hero-cover__scrim { position: absolute; inset: 0; z-index: 1; background:
  linear-gradient(180deg, rgba(22,61,67,.55) 0%, rgba(22,61,67,.35) 35%, rgba(22,61,67,.55) 75%, rgba(22,61,67,.78) 100%),
  linear-gradient(90deg, rgba(22,61,67,.55) 0%, rgba(22,61,67,.15) 45%, rgba(22,61,67,0) 65%); }
.ep-hero-cover__copy { position: relative; z-index: 2; width: 100%; max-width: 620px; padding: clamp(64px, 10vw, 120px) var(--ep-gutter); display: flex; flex-direction: column; gap: 22px; }
.ep-hero-cover__copy .ep-kicker--pill { display: inline-flex; align-self: flex-start; background: var(--ep-soft); color: var(--ep-dark); padding: 8px 16px 8px 14px; border-radius: 999px; }
.ep-hero-cover__copy .ep-kicker--pill::before { background: var(--ep-dark); }
.ep-hero-cover__copy .ep-h1-hero { color: var(--ep-white); }
.ep-hero-cover__copy .ep-lead { color: var(--ep-white); max-width: 520px; }
@media (max-width: 640px) {
  .ep-hero-cover__inner { min-height: clamp(480px, 86vh, 640px); }
  .ep-hero-cover__copy { padding-top: clamp(48px, 12vw, 88px); padding-bottom: clamp(40px, 10vw, 64px); }
}

/* ---------- TEST 2026-09-24: transparante header over de full-bleed hero ----------
   Op pagina's met een cover-hero (.ep-hero--cover) overlapt de header de foto in
   plaats van een aparte witte balk erboven. Zodra er gescrold wordt keert de header
   terug naar de normale witte, vaste balk. Alleen actief als het bijbehorende
   JavaScript (ep-labels.js) de klasse .ep-header--overlay toevoegt; zonder JS blijft
   de header gewoon zoals altijd (progressive enhancement). */
.ep-header.ep-header--overlay {
  position: absolute;
  inset: 0 0 auto 0;
  background: transparent !important;
  border-bottom-color: transparent;
  transition: background-color .25s ease, border-color .25s ease;
}
.ep-header.ep-header--overlay::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 160px;
  background: linear-gradient(180deg, rgba(10, 22, 24, .55) 0%, rgba(10, 22, 24, 0) 100%);
  z-index: -1;
  pointer-events: none;
  transition: opacity .25s ease;
}
.ep-header.ep-header--overlay .ep-logo img { filter: brightness(0) invert(1); transition: filter .25s ease, transform var(--dur) var(--ease); }
.ep-header.ep-header--overlay .ep-nav .wp-block-navigation-item__content { color: var(--ep-white); }
.ep-header.ep-header--overlay .ep-nav .wp-block-navigation-item__content:hover { color: var(--ep-soft); }
.ep-header.ep-header--overlay .ep-nav .wp-block-navigation-item__content[aria-current] { color: var(--ep-white); }
.ep-header.ep-header--overlay .ep-nav .wp-block-navigation-item__content::after { background: var(--ep-white); }
.ep-header.ep-header--overlay .ep-nav .wp-block-navigation__responsive-container-open { border-color: rgba(255, 255, 255, .6); color: var(--ep-white); }
.ep-header.ep-header--overlay .ep-header__tel { color: var(--ep-white); }
.ep-header.ep-header--overlay .ep-header__cta .wp-block-button__link { --btn-fill: var(--color-warmwit); background: transparent; border: 1.5px solid rgba(255, 255, 255, .7); color: var(--ep-white); }
.ep-header.ep-header--overlay .ep-header__cta .wp-block-button__link:focus-visible { color: var(--color-petrol); }
@media (hover: hover) and (pointer: fine) { .ep-header.ep-header--overlay .ep-header__cta .wp-block-button__link:hover { color: var(--color-petrol); } }

.ep-header.ep-header--overlay.ep-header--scrolled {
  position: fixed;
  top: var(--wp-admin--admin-bar--height, 0px);
  background: rgba(246, 244, 239, .88) !important;
}
.ep-header.ep-header--overlay.ep-header--scrolled::before { opacity: 0; }
.ep-header.ep-header--overlay.ep-header--scrolled .ep-logo img { filter: none; }
.ep-header.ep-header--overlay.ep-header--scrolled .ep-nav .wp-block-navigation-item__content { color: var(--ep-ink); }
.ep-header.ep-header--overlay.ep-header--scrolled .ep-nav .wp-block-navigation-item__content:hover { color: var(--ep-primary); }
.ep-header.ep-header--overlay.ep-header--scrolled .ep-nav .wp-block-navigation-item__content[aria-current] { color: var(--ep-primary); }
.ep-header.ep-header--overlay.ep-header--scrolled .ep-nav .wp-block-navigation-item__content::after { background: var(--ep-primary); }
.ep-header.ep-header--overlay.ep-header--scrolled .ep-nav .wp-block-navigation__responsive-container-open { border-color: var(--ep-soft); color: var(--ep-dark); }
.ep-header.ep-header--overlay.ep-header--scrolled .ep-header__tel { color: var(--ep-dark); }
.ep-header.ep-header--overlay.ep-header--scrolled .ep-header__cta .wp-block-button__link { --btn-fill: var(--color-petrol); background: var(--ep-primary); border-color: transparent; color: var(--ep-white); }
.ep-header.ep-header--overlay.ep-header--scrolled .ep-header__cta .wp-block-button__link:focus-visible { color: var(--ep-white); }
@media (hover: hover) and (pointer: fine) { .ep-header.ep-header--overlay.ep-header--scrolled .ep-header__cta .wp-block-button__link:hover { color: var(--ep-white); } }

/* De cover-hero moet echt bij de bovenrand van de pagina beginnen (voor de
   transparante header hierboven); zonder deze regel laat een standaard
   margin-top boven <main> een streepje paginakleur zien vóór de foto begint. */
main.ep-main:has(.ep-hero--cover) { margin-top: 0; }

/* ---------- TEST 2026-10-01: uniforme achtergrond op de homepage ----------
   Alle secties op de homepage krijgen dezelfde paginakleur (--ep-bg) in plaats
   van afwisselende wit/petrol/salie vlakken en harde randen ertussen. Scheiding
   komt nu uitsluitend van witruimte en typografie. Alleen op de homepage
   (body.home); de rest van de site houdt het bestaande sectieritme aan. */

/* Ruimere, consistente sectie-afstand: mobiel 56px, vanaf 768px 96px (binnen de
   gevraagde 80-120px desktop / 48-64px mobiel). --ep-section wordt elders ook
   gebruikt (collab-copy, featured-head), dus deze ene herdefinitie werkt overal
   consistent door op deze pagina. */
body.home { --ep-section: 56px; }
@media (min-width: 768px) { body.home { --ep-section: 96px; } }

/* Diensten-sectie: geen wit vlak en geen lijn meer boven de sectie. */
body.home .ep-section--white { background: var(--ep-bg); border-top: none; }
body.home .ep-section--tight { padding-top: var(--ep-section); padding-bottom: var(--ep-section); }

/* Samenwerken-sectie: was de ene donkere (petrol) sectie van de pagina; nu
   dezelfde paginakleur met gewone donkere tekst in plaats van wit op petrol. */
body.home .ep-section--dark.ep-collab { background: var(--ep-bg) !important; color: var(--ep-ink) !important; }
body.home .ep-section--dark.ep-collab h1,
body.home .ep-section--dark.ep-collab h2,
body.home .ep-section--dark.ep-collab h3,
body.home .ep-section--dark.ep-collab p { color: var(--ep-ink); }
/* Op het saliegroene vlak: petrol i.p.v. eucalyptus (eucalyptus op salie haalt maar 3,6:1). */
body.home .ep-section--dark.ep-collab .ep-kicker { color: var(--ep-dark); }
body.home .ep-section--dark.ep-collab *:focus-visible { outline-color: var(--ep-dark); }
body.home .ep-collab .ep-numbered li::before { color: var(--ep-dark); }
body.home .ep-collab .ep-numbered strong { color: var(--ep-dark); }
body.home .ep-collab .is-style-op-donker .wp-block-button__link { border-color: var(--ep-dark); color: var(--ep-dark); }
body.home .ep-collab .is-style-op-donker .wp-block-button__link:hover { background: var(--ep-hover-surface); color: var(--ep-dark); }

/* CTA-sectie: groen paneel (zoals het was) met een stevigere 3D-schaduw
   zodat het los van de pagina lijkt te zweven/naar voren springt. */
body.home .ep-cta-section { padding-top: var(--ep-section); padding-bottom: var(--ep-section); }
body.home .ep-cta-panel { box-shadow: 0 20px 44px rgba(22, 61, 67, .20), 0 4px 12px rgba(22, 61, 67, .12); }
/* Zelfde groene kaart + 3D-schaduw achter de tekstkolom van de
   samenwerken-sectie ("Maak kennis met EP-labels"), voor consistentie. */
body.home .ep-collab__copy {
  background: var(--ep-soft);
  border-radius: var(--radius-lg);
  padding: clamp(32px, 5vw, 56px) clamp(28px, 4vw, 48px);
  box-shadow: 0 20px 44px rgba(22, 61, 67, .20), 0 4px 12px rgba(22, 61, 67, .12);
}


/* ---------- TEST 2026-10-05: zigzag-stappenblok met ronde hoeken ----------
   Op verzoek: in plaats van harde kaarten/secties nu rechthoekige blokken met
   bolle (sterk afgeronde) randen, die afwisselend links/rechts georiënteerd
   zijn als je naar beneden scrolt, op dezelfde vlakke paginakleur. Alleen op
   de homepage (body.home), als eerste proef voor deze sectie. */
body.home .ep-steps-zigzag { display: flex; flex-direction: column; gap: clamp(48px, 7vw, 88px); margin-top: clamp(32px, 4vw, 48px); }
body.home .ep-step-zigzag { display: flex; align-items: center; gap: clamp(28px, 5vw, 64px); }
body.home .ep-step-zigzag:nth-child(even) { flex-direction: row-reverse; }
body.home .ep-step-zigzag__media { position: relative; flex: 1 1 420px; min-width: 0; aspect-ratio: 4 / 3; border-radius: var(--radius-lg); overflow: hidden; }
body.home .ep-step-zigzag__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
body.home .ep-step-zigzag__copy { flex: 1 1 360px; min-width: 0; display: flex; flex-direction: column; gap: 10px; }
body.home .ep-step-zigzag__copy h3 { font-size: clamp(22px, 2.2vw, 26px); }
body.home .ep-step-zigzag__copy p { font-size: 17px; line-height: 1.6; color: var(--ep-muted); }
@media (max-width: 760px) {
  body.home .ep-step-zigzag,
  body.home .ep-step-zigzag:nth-child(even) { flex-direction: column; align-items: stretch; gap: 20px; }
  body.home .ep-step-zigzag__media { aspect-ratio: 16 / 10; }
}

/* Lichte verzachting van de samenwerken-foto: zelfde bolle-hoeken-taal in plaats
   van de schuine snit, voor visuele samenhang met het nieuwe stappenblok. */
body.home .ep-collab__media { clip-path: none; border-radius: var(--radius-lg); margin-left: 0; }
@media (max-width: 800px) { body.home .ep-collab__media { margin-right: 0; } }

/* ---------- Consistente iconenset (2026-10-12) ----------
   Eén lokaal gehoste SVG-set (24x24, stroke 1.75px, round caps) in plaats van de
   losse schuine-streep-markeringen en kleurvaste accenten. stroke="currentColor"
   op elk icoon: het icoon erft altijd de tekstkleur van zijn context, ook op een
   donkere achtergrond. Sitebreed; vervangt iconen in de diensten-sectie (tegels,
   kaarten, "Wat doet EP-labels"-checklist), de voordelen-sectie (Over ons) en de
   footer-contactgegevens. Geen extern icon-font: zelfde zelf-hosten-principe als
   bij Manrope (theme.json), om geen nieuw verzoek naar Google te introduceren. */
.ep-icon { width: 22px; height: 22px; flex: none; color: inherit; }
.ep-icon--lg { width: 36px; height: 36px; display: block; color: inherit; }
.ep-pillar .ep-icon--lg { margin-bottom: 14px; }
.ep-footer__contact { display: flex; flex-direction: column; gap: 6px; margin-top: 12px; }
.ep-footer__contact a { display: inline-flex; align-items: center; gap: 8px; }

/* ---------- Projectenpagina (2026-10-01): intro, uitgelicht project, kaarten,
   dienstlabels, klantreactie en kort contactblok ---------- */

/* Compacte, asymmetrische intro: tekst + foto, tekst boven foto op mobiel
   (natuurlijke documentvolgorde, geen row-reverse nodig). */
.ep-projects-hero { display: flex; flex-direction: column; gap: clamp(20px, 3vw, 32px); padding: clamp(28px, 5vw, 48px) var(--wp--style--root--padding-right, 20px) clamp(20px, 3vw, 32px) var(--wp--style--root--padding-left, 20px); }
.ep-projects-hero__copy { max-width: 720px; }
.ep-projects-hero__copy > * + * { margin-top: 16px; }
.ep-projects-hero__media { min-width: 0; aspect-ratio: 21 / 9; max-height: 420px; border-radius: var(--radius-lg); overflow: hidden; }
.ep-projects-hero__media figure, .ep-projects-hero__media .wp-block-image img { height: 100%; }
@media (max-width: 760px) { .ep-projects-hero__media { aspect-ratio: 16 / 10; max-height: none; } }

/* Compacte feitenregel i.p.v. verzonnen tellers. */
.ep-fact-strip { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 18px; font-size: 15px; font-weight: 600; color: var(--ep-muted); }
.ep-fact-strip .ep-icon { width: 18px; height: 18px; color: var(--ep-primary); }
.ep-fact-strip span { display: inline-flex; align-items: center; gap: 8px; }

/* Klikbare dienstlabels bij een project. */
.ep-pills { display: flex; flex-wrap: wrap; gap: 8px; }
.ep-pill { position: relative; z-index: 1; display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px 6px 10px; border-radius: 999px; background: var(--ep-white); border: 1.5px solid var(--ep-line); color: var(--ep-dark); text-decoration: none; font-size: 14px; font-weight: 600; transition: border-color .2s ease, color .2s ease; }
.ep-pill:hover { border-color: var(--ep-primary); color: var(--ep-primary); }
.ep-pill__icon { width: 15px; height: 15px; flex: none; }

/* Twee kolommen op desktop, één op mobiel voor de overige projecten. */
.ep-cards--2 { grid-template-columns: 1fr; }
@media (min-width: 680px) { .ep-cards--2 { grid-template-columns: repeat(2, 1fr); } }

/* Hover: kaarten komen licht omhoog met een zachte schaduw; foto's zoomen subtiel. */
.ep-project-card, .ep-featured__card { transition: box-shadow .25s ease, transform .25s ease; }
.ep-project-card:hover, .ep-featured:hover .ep-featured__card { box-shadow: 0 14px 32px rgba(22, 61, 67, .12); transform: translateY(-4px); }
.ep-project-card__image img, .ep-featured__image img { transition: transform .4s ease; }
.ep-project-card:hover .ep-project-card__image img, .ep-featured:hover .ep-featured__image img { transform: scale(1.045); }

/* Klantreactie: alleen getoond met een echte, goedgekeurde quote. */
.ep-quote { margin: 0; padding: 24px 28px; background: var(--ep-white); border-left: 3px solid var(--ep-primary); border-radius: 0 var(--ep-radius-lg) var(--ep-radius-lg) 0; }
.ep-quote p { margin: 0; font-size: 19px; line-height: 1.5; font-style: italic; color: var(--ep-dark); }
.ep-quote cite { display: block; margin-top: 12px; font-size: 15px; font-style: normal; font-weight: 600; color: var(--ep-muted); }

/* Kort, persoonlijk contactblok onderaan: saliegroen vlak met schaduw, zelfde
   zwevende taal als de CTA-vlakken elders op de site. */
.ep-project-contact { display: flex; flex-wrap: wrap; align-items: center; gap: clamp(28px, 4vw, 56px); background: var(--ep-soft); border-radius: var(--radius-lg); padding: clamp(28px, 4vw, 48px); box-shadow: 0 16px 40px rgba(22, 61, 67, .14); }
.ep-project-contact__copy { flex: 1 1 320px; max-width: 420px; }
.ep-project-contact__copy > * + * { margin-top: 10px; }
.ep-project-contact .ep-project-form-wrap { flex: 1 1 360px; max-width: 480px; width: 100%; }

/* Subtiele, korte verschijnanimatie bij scrollen (zie ep-labels.js): respecteert
   prefers-reduced-motion en toont inhoud altijd zonder JS/IntersectionObserver. */
.ep-reveal { opacity: 0; transform: translateY(16px); transition: opacity var(--dur-slow) var(--ease), transform var(--dur-slow) var(--ease); }
.ep-reveal--visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .ep-reveal { opacity: 1; transform: none; transition: none; } }

/* Tekstlinks: onderstreping loopt van links naar rechts in; pijl schuift 4px mee.
   (background-size i.p.v. een pseudo-element, omdat een link over meerdere regels kan breken.) */
.ep-link-arrow a, a.ep-link-arrow { background: linear-gradient(currentColor, currentColor) no-repeat 0 calc(100% - 7px) / 0 1.5px; transition: background-size var(--dur) var(--ease), color var(--dur) var(--ease); }
.ep-link-arrow--dark a { background-position: 0 calc(100% - 11px); }
.ep-link-arrow a::after, a.ep-link-arrow::after { display: inline-block; transition: transform var(--dur) var(--ease), opacity var(--dur) var(--ease); }
.ep-link-arrow a:focus-visible, a.ep-link-arrow:focus-visible { background-size: 100% 1.5px; }
.ep-link-arrow a:focus-visible::after, a.ep-link-arrow:focus-visible::after { transform: translateX(4px); }
.ep-footer__links a, .ep-footer__legal a, .ep-breadcrumb a, .ep-contact-details a, .ep-footer__contact a > span { background: linear-gradient(currentColor, currentColor) no-repeat 0 100% / 0 1.5px; padding-bottom: 2px; transition: background-size var(--dur) var(--ease), color var(--dur) var(--ease); }
.ep-footer__links a:focus-visible, .ep-footer__legal a:focus-visible, .ep-breadcrumb a:focus-visible, .ep-contact-details a:focus-visible, .ep-footer__contact a:focus-visible > span { background-size: 100% 1.5px; }
@media (hover: hover) and (pointer: fine) {
  .ep-link-arrow a:hover, a.ep-link-arrow:hover, .ep-tile:hover .ep-link-arrow a, .ep-card:hover .ep-link-arrow a { background-size: 100% 1.5px; }
  .ep-link-arrow a:hover::after, a.ep-link-arrow:hover::after { transform: translateX(4px); }
  .ep-footer__links a:hover, .ep-footer__legal a:hover, .ep-breadcrumb a:hover, .ep-contact-details a:hover, .ep-footer__contact a:hover > span { background-size: 100% 1.5px; }
}
/* Reduced motion: geen lift, zoom of schuivende pijlen; kleurwissels en vullingen blijven. */
@media (prefers-reduced-motion: reduce) {
  .wp-block-button__link, .wp-block-button__link:hover, .wp-block-button__link:focus-visible, .ep-tile, .ep-tile:hover, .ep-tile:has(a:focus-visible), .ep-card, .ep-card:hover, .ep-card:has(a:focus-visible), .ep-header .ep-logo img, .ep-header--scrolled .ep-logo img { transform: none !important; }
  .wp-block-button:hover::after, .wp-block-button:focus-within::after, .wp-block-button__link::after, .ep-link-arrow a::after, a.ep-link-arrow::after, .ep-tile:hover .ep-tile__media img { transform: none !important; }
}

/* =========================================================
   RONDE 2: footer op petrol, mobiel menu op petrol, FAQ-animatie
   ========================================================= */

/* ---------- Footer op petrol ---------- */
.ep-footer { --footer-text: rgba(246, 244, 239, .82); background: var(--color-petrol); color: var(--footer-text); border-top: 0; margin-block-start: 0; padding-top: clamp(48px, 7vw, 80px); }
.ep-footer .ep-logo--footer img { filter: brightness(0) invert(1); }
.ep-footer__about { color: var(--footer-text); }
.ep-footer__title { font-size: 13px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--color-salie); margin: 0 0 14px; }
.ep-footer__links a, .ep-footer__links a:visited { color: var(--color-warmwit); }
.ep-footer__links a:hover, .ep-footer__links a:focus-visible { color: var(--color-wit); }
.ep-footer__contact, .ep-footer__address { color: var(--footer-text); }
.ep-footer__contact a, .ep-footer__contact a:visited { color: var(--color-warmwit); }
.ep-footer__contact a:hover, .ep-footer__contact a:focus-visible { color: var(--color-wit); }
.ep-footer__contact .ep-icon { color: var(--color-salie); }
.ep-footer__bottom { border-top: 1px solid rgba(246, 244, 239, .16); padding: 20px 0 24px; margin-top: 8px; }
.ep-footer__legalinfo, .ep-footer__legal a, .ep-footer__legal a:visited { color: rgba(246, 244, 239, .72); font-size: 14px; }
.ep-footer__legal a:hover, .ep-footer__legal a:focus-visible { color: var(--color-warmwit); }
.ep-footer a:focus-visible { outline-color: var(--color-salie); }
body.home .ep-footer { background: var(--color-petrol) !important; }

/* ---------- Mobiel menu: schermvullend op petrol, schuift in van rechts ---------- */
.ep-nav .wp-block-navigation__responsive-container.is-menu-open { background: var(--color-petrol) !important; color: var(--color-warmwit) !important; padding: 20px var(--ep-gutter) 40px; animation: ep-menu-in var(--dur-slow) var(--ease) both; }
.ep-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-dialog,
.ep-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content { max-width: 560px; margin-inline: auto; }
.ep-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-close { color: var(--color-warmwit); width: 44px; height: 44px; border: 1.5px solid rgba(246, 244, 239, .35); border-radius: var(--radius); display: flex; align-items: center; justify-content: center; right: var(--ep-gutter); top: 16px; transition: background-color var(--dur) var(--ease); }
.ep-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-close:hover { background: rgba(246, 244, 239, .1); }
.ep-header .ep-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content,
.ep-header.ep-header--overlay .ep-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content,
.ep-header.ep-header--overlay.ep-header--scrolled .ep-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content { color: var(--color-warmwit); font-size: clamp(22px, 5.5vw, 28px); font-weight: 700; letter-spacing: -.01em; padding: 16px 0; border-bottom: 1px solid rgba(246, 244, 239, .16); }
.ep-header .ep-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content:hover,
.ep-header .ep-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content:focus-visible,
.ep-header.ep-header--overlay .ep-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content:hover,
.ep-header.ep-header--overlay.ep-header--scrolled .ep-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content:hover { color: var(--color-salie); }
.ep-header .ep-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content[aria-current],
.ep-header.ep-header--overlay .ep-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content[aria-current],
.ep-header.ep-header--overlay.ep-header--scrolled .ep-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content[aria-current] { color: var(--color-salie); border-bottom-color: var(--color-salie); }
.ep-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container { gap: 0; align-items: stretch; width: 100%; }
.ep-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item { width: 100%; animation: ep-menu-item .5s var(--ease) both; }
.ep-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item:nth-child(1) { animation-delay: 80ms; }
.ep-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item:nth-child(2) { animation-delay: 130ms; }
.ep-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item:nth-child(3) { animation-delay: 180ms; }
.ep-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item:nth-child(4) { animation-delay: 230ms; }
.ep-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item:nth-child(5) { animation-delay: 280ms; }
@keyframes ep-menu-in { from { opacity: 0; transform: translateX(40px); } to { opacity: 1; transform: none; } }
@keyframes ep-menu-item { from { opacity: 0; transform: translateX(16px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .ep-nav .wp-block-navigation__responsive-container.is-menu-open, .ep-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item { animation: none; }
}

/* ---------- FAQ: zacht open/dicht (zie ep-labels.js) en een plus die naar min draait ---------- */
.ep-faq { border-top: 1px solid var(--ep-soft); }
.ep-faq > * { margin: 0; }
.ep-faq details { border-bottom: 1px solid var(--ep-soft); }
.ep-faq summary { position: relative; list-style: none; cursor: pointer; padding: 16px 0; display: flex; justify-content: space-between; align-items: center; gap: 16px; font-size: 17px; font-weight: 600; color: var(--ep-dark); min-height: 52px; transition: color var(--dur) var(--ease); }
.ep-faq summary::-webkit-details-marker { display: none; }
.ep-faq summary::after { content: ""; flex: none; width: 28px; height: 28px; border-radius: 50%; border: 1.5px solid var(--ep-primary); background: linear-gradient(var(--ep-primary), var(--ep-primary)) center / 12px 1.5px no-repeat; transition: transform var(--dur) var(--ease), background-color var(--dur) var(--ease); }
.ep-faq summary::before { content: ""; position: absolute; right: 13.25px; top: 50%; width: 1.5px; height: 12px; margin-top: -6px; background: var(--ep-primary); transition: transform var(--dur) var(--ease), background-color var(--dur) var(--ease); pointer-events: none; }
.ep-faq details[open]:not(.is-closing) summary::after { transform: rotate(180deg); background-color: var(--ep-primary); background-image: linear-gradient(var(--color-wit), var(--color-wit)); }
.ep-faq details[open]:not(.is-closing) summary::before { transform: rotate(90deg); background: var(--color-wit); }
.ep-faq summary:focus-visible { outline: 2px solid var(--color-eucalyptus); outline-offset: 4px; border-radius: 4px; }
@media (hover: hover) and (pointer: fine) { .ep-faq summary:hover { color: var(--ep-primary); } }
.ep-faq details > p { padding: 0 44px 18px 0; font-size: 16px; line-height: 1.6; margin: 0; }
@media (prefers-reduced-motion: reduce) { .ep-faq summary::after, .ep-faq summary::before { transition: none; } }
.ep-faq--compact summary { font-size: 16px; padding: 14px 0; min-height: 48px; }

/* ---------- "Wat we je uit handen nemen" (homepage) ---------- */
.ep-takeover .ep-takeover__list { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); gap: 14px clamp(24px, 4vw, 56px); }
.ep-takeover .ep-takeover__list li { padding-bottom: 14px; border-bottom: 1px solid var(--ep-soft); }
.ep-takeover .ep-takeover__list .ep-icon { flex: none; width: 24px; height: 24px; color: var(--ep-primary); }
.ep-takeover .ep-takeover__list { margin-top: var(--space-5); }

/* Knop onderaan het mobiele menu (de header-knop verdwijnt onder 560px); op desktop verborgen. */
.ep-nav .ep-nav__cta { display: none; }
.ep-nav .wp-block-navigation__responsive-container.is-menu-open .ep-nav__cta { display: block; margin-top: var(--space-6); animation-delay: 330ms; }
.ep-header .ep-nav .wp-block-navigation__responsive-container.is-menu-open .ep-nav__cta .wp-block-navigation-item__content { display: flex !important; box-sizing: border-box; width: 100%; justify-content: center; align-items: center; background: var(--color-eucalyptus) !important; color: var(--color-wit) !important; border: 0 !important; border-radius: var(--radius); padding: 16px 24px !important; font-size: 18px !important; font-weight: 600 !important; letter-spacing: 0 !important; transition: background-color var(--dur) var(--ease); }
.ep-header .ep-nav .wp-block-navigation__responsive-container.is-menu-open .ep-nav__cta .wp-block-navigation-item__content:hover { background: var(--color-eucalyptus-diep) !important; }

/* ---------- Homepage: "Wat we je uit handen nemen" met foto ---------- */
.ep-takeover__inner { display: flex; flex-wrap: wrap; gap: clamp(28px, 5vw, 64px); align-items: center; }
.ep-takeover__photo { flex: 1 1 360px; min-width: 0; aspect-ratio: 4 / 3; border-radius: var(--radius-lg); overflow: hidden; }
.ep-takeover__photo .wp-block-image { margin: 0; height: 100%; }
.ep-takeover__photo img { width: 100%; height: 100% !important; object-fit: cover; display: block; }
.ep-takeover__copy { flex: 1 1 420px; min-width: 0; display: flex; flex-direction: column; gap: 16px; }
.ep-takeover__copy > * { margin: 0; }
.ep-takeover .ep-takeover__list { grid-template-columns: 1fr; margin-top: 0; }

/* ---------- Team (wp-admin > Team); zonder gepubliceerde teamleden blijft het blok verborgen ---------- */
.ep-team-wrap:not(:has(.ep-teamgrid)) { display: none; }
.ep-teamgrid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr)); gap: 32px 24px; }
.ep-teamcard { background: var(--ep-white); border-radius: var(--radius-lg); padding: 12px 12px 22px; box-shadow: var(--shadow-sm); display: flex; flex-direction: column; margin: 0; }
.ep-teamcard__photo { margin: 0; aspect-ratio: 4 / 5; overflow: hidden; border-radius: var(--radius); background: var(--ep-hover-surface); }
.ep-teamcard__photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 15%; display: block; }
.ep-teamcard__name { font-size: 18px; line-height: 1.25; margin: 14px 8px 0; }
.ep-teamcard__role { margin: 4px 8px 0; color: var(--ep-primary); font-weight: 600; font-size: 15px; }
.ep-teamcard__intro { margin: 10px 8px 0; font-size: 15px; line-height: 1.55; color: var(--ep-muted); }
.ep-teamgrid--compact { grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: 14px 12px; margin: 22px 0; }
.ep-teamgrid--compact .ep-teamcard { background: transparent; box-shadow: none; padding: 0; }
.ep-teamgrid--compact .ep-teamcard__name { font-size: 14px; margin: 8px 0 0; }
.ep-teamgrid--compact .ep-teamcard__role { font-size: 13px; margin: 2px 0 0; color: var(--ep-dark); }

/* ---------- Interne reviewtabellen (privé pagina's) ---------- */
.ep-review-wrap { overflow-x: auto; }
.ep-review { width: 100%; border-collapse: collapse; font-size: 15px; }
.ep-review th, .ep-review td { text-align: left; vertical-align: top; padding: 10px 12px; border-bottom: 1px solid var(--ep-line); }
.ep-review th { font-weight: 700; color: var(--ep-dark); white-space: nowrap; }
.ep-review img { border-radius: 8px; display: block; width: 96px; height: 120px; object-fit: cover; object-position: 50% 15%; }
.ep-review small { color: var(--ep-muted); }

/* Vijf stappen (Over ons): passen naast elkaar op brede schermen. */
.ep-steps:has(> .ep-step:nth-child(5)) { grid-template-columns: repeat(auto-fit, minmax(min(100%, 190px), 1fr)); gap: clamp(16px, 2vw, 24px); }

/* =========================================================
   FOTOGRAFIE (bedrijfsfotografie): uitsneden, foto naast tekst, Over ons en contact
   ========================================================= */
/* Uitsnedepunt per foto (verticaal, %), gezet via content/fotos.yml. */
.ep-pos-0 img { object-position: 50% 0%; }
.ep-pos-5 img { object-position: 50% 5%; }
.ep-pos-10 img { object-position: 50% 10%; }
.ep-pos-15 img { object-position: 50% 15%; }
.ep-pos-20 img { object-position: 50% 20%; }
.ep-pos-25 img { object-position: 50% 25%; }
.ep-pos-30 img { object-position: 50% 30%; }
.ep-pos-35 img { object-position: 50% 35%; }
.ep-pos-40 img { object-position: 50% 40%; }
.ep-pos-45 img { object-position: 50% 45%; }
.ep-pos-50 img { object-position: 50% 50%; }
.ep-pos-55 img { object-position: 50% 55%; }
.ep-pos-60 img { object-position: 50% 60%; }
.ep-pos-65 img { object-position: 50% 65%; }
.ep-pos-70 img { object-position: 50% 70%; }
.ep-pos-75 img { object-position: 50% 75%; }
.ep-pos-80 img { object-position: 50% 80%; }
.ep-pos-85 img { object-position: 50% 85%; }
.ep-pos-90 img { object-position: 50% 90%; }
.ep-pos-95 img { object-position: 50% 95%; }
.ep-pos-100 img { object-position: 50% 100%; }

/* Foto naast tekst: 4:3, afgeronde hoeken; op smal scherm onder elkaar, foto eerst. */
.ep-split { display: flex; flex-wrap: wrap; gap: clamp(28px, 5vw, 64px); align-items: center; }
.ep-split--reverse { flex-direction: row-reverse; }
.ep-split__photo { flex: 1 1 360px; min-width: 0; aspect-ratio: 4 / 3; border-radius: var(--radius-lg); overflow: hidden; position: relative; background: var(--ep-hover-surface); }
.ep-split__photo figure, .ep-split__photo .wp-block-image { margin: 0; height: 100%; }
.ep-split__photo img { width: 100%; height: 100% !important; object-fit: cover; display: block; }
.ep-split__copy { flex: 1 1 420px; min-width: 0; display: flex; flex-direction: column; gap: 16px; }
.ep-split__copy > * { margin: 0; }
@media (max-width: 760px) { .ep-split--reverse { flex-direction: row; } .ep-split__photo { flex-basis: 100%; } }
.ep-split .ep-takeover__list { margin-top: var(--space-2); }

/* Over ons: tekst boven, groot groepsbeeld eronder (2:1 op desktop, natuurlijke 3:2 op mobiel). */
.ep-about-hero--stack { display: block; padding-bottom: clamp(32px, 5vw, 64px); }
.ep-about-hero--stack .ep-about-hero__copy { max-width: 720px; margin-left: 0 !important; margin-right: auto; padding-bottom: clamp(24px, 4vw, 40px); }
.ep-about-hero__photo { position: relative; aspect-ratio: 2 / 1; border-radius: var(--radius-lg); overflow: hidden; background: var(--ep-hover-surface); }
.ep-about-hero__photo figure, .ep-about-hero__photo .wp-block-image { margin: 0; height: 100%; }
.ep-about-hero__photo img { width: 100%; height: 100% !important; object-fit: cover; display: block; }
@media (max-width: 700px) { .ep-about-hero__photo { aspect-ratio: 3 / 2; } }

/* Over ons: persoonlijk contactblok met informeel groepsbeeld (zelfde zwevende salie-vlak als de CTA's). */
.ep-personal { display: flex; flex-wrap: wrap; align-items: center; gap: clamp(24px, 4vw, 48px); background: var(--ep-soft); border-radius: var(--radius-lg); padding: clamp(20px, 3.5vw, 40px); box-shadow: 0 16px 40px rgba(22, 61, 67, .14); }
.ep-personal__photo { flex: 0 1 240px; min-width: 0; aspect-ratio: 4 / 5; border-radius: var(--radius); overflow: hidden; position: relative; }
.ep-personal__photo figure, .ep-personal__photo .wp-block-image { margin: 0; height: 100%; }
.ep-personal__photo img { width: 100%; height: 100% !important; object-fit: cover; display: block; }
.ep-personal__copy { flex: 1 1 320px; min-width: 0; display: flex; flex-direction: column; gap: 14px; align-items: flex-start; }
.ep-personal__copy > * { margin: 0; }
@media (max-width: 560px) { .ep-personal__photo { flex-basis: 100%; aspect-ratio: 4 / 3; } }

/* Contactpagina: foto onder de inleiding. */
.ep-contact-photo { position: relative; aspect-ratio: 1 / 1; max-width: 320px; border-radius: var(--radius-lg); overflow: hidden; background: var(--ep-hover-surface); }
.ep-contact-photo figure, .ep-contact-photo .wp-block-image { margin: 0; height: 100%; }
.ep-contact-photo img { width: 100%; height: 100% !important; object-fit: cover; display: block; }

/* Dienstbanden: ruimer, zodat gezichten niet worden afgesneden (21:9 op desktop). */
.ep-band--tall { height: clamp(260px, 42vw, 600px); }
@media (max-width: 640px) { .ep-band--tall { height: 260px; } }

/* ---------- Teamoverzicht zoals het voorbeeld: vier kolommen, gecentreerd, foto + naam + functie + persoonlijke zin ---------- */
.ep-teamgrid--grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(28px, 4vw, 48px) clamp(16px, 2.4vw, 32px); }
.ep-teamgrid--grid .ep-teamcard { background: transparent; box-shadow: none; padding: 0; text-align: center; align-items: stretch; }
.ep-teamgrid--grid .ep-teamcard__name { margin: 16px 0 0; font-size: clamp(16px, 1.5vw, 19px); }
.ep-teamgrid--grid .ep-teamcard__role { margin: 4px 0 0; color: var(--ep-muted); font-weight: 500; }
.ep-teamgrid--grid .ep-teamcard__intro { margin: 10px 0 0; font-size: 15px; line-height: 1.5; color: var(--ep-muted); }
@media (max-width: 1000px) { .ep-teamgrid--grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 640px) { .ep-teamgrid--grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.ep-teamcard__photo--leeg { display: flex; align-items: flex-end; justify-content: center; color: var(--ep-soft); background: var(--ep-hover-surface); }
.ep-teamcard__photo--leeg svg { width: 72%; height: auto; display: block; }
.ep-team-wrap .ep-teamgrid { margin-top: var(--space-5); }

/* Bestuur (Over ons): rustig en licht. Warm gebroken wit, drie portretten (4:5) direct op de achtergrond, naam en functie gecentreerd.
   Alleen deze sectie (.ep-board) en het aansluitende kantorenblok (.ep-kantoren) hebben eigen kleuren. */
.ep-board { --ep-board-muted: #52615D; background: var(--ep-bg); padding-top: clamp(52px, 6vw, 80px); padding-bottom: clamp(52px, 6vw, 80px); }
.ep-board__head { max-width: 620px; margin: 0 auto; text-align: center; }
.ep-board__head::before { content: ""; display: block; width: 14px; height: 18px; margin: 0 auto 16px; background: var(--ep-primary); clip-path: var(--ep-slant); }
.ep-board__head > * + * { margin-top: 12px; }
.ep-board__head h2 { color: var(--ep-dark); }
.ep-board__head .ep-lead { color: var(--ep-board-muted); }
.ep-team-wrap .ep-teamgrid--board { grid-template-columns: repeat(3, minmax(0, 1fr)); max-width: 1040px; margin: 40px auto 0; gap: 32px; }
.ep-teamgrid--board .ep-teamcard { background: transparent; box-shadow: none; padding: 0; text-align: center; cursor: default; }
.ep-teamgrid--board .ep-teamcard__photo { border-radius: var(--radius); box-shadow: none; background: var(--ep-hover-surface); }
.ep-teamgrid--board .ep-teamcard__name { margin: 16px 0 0; font-size: 22px; font-weight: 600; line-height: 1.25; color: var(--ep-dark); }
.ep-teamgrid--board .ep-teamcard__role { margin: 4px 0 0; color: var(--ep-board-muted); font-weight: 400; font-size: 16px; line-height: 1.5; }
@media (max-width: 640px) {
  .ep-board { padding-top: 48px; padding-bottom: 56px; }
  .ep-team-wrap .ep-teamgrid--board { grid-template-columns: minmax(0, 1fr); max-width: 340px; margin-top: 32px; gap: 36px; }
}

/* Kantorenblok onder het bestuur: zeer lichte groentint, wit contactvlak met subtiele rand. */
.ep-kantoren { --ep-kantoren-bg: #EDF2EE; background: var(--ep-kantoren-bg); }
.ep-kantoren h2 { color: var(--ep-dark); }
.ep-kantoren .ep-contact-details { background: var(--ep-white); border: 1px solid var(--ep-line); box-shadow: none; }

/* ---------- Hero-video: loopt stil, zonder geluid, over de poster heen; de bestaande donkere gloed (scrim) blijft erover ---------- */
.ep-hero-cover__media .ep-hero-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; background: transparent; }
.ep-hero-cover__scrim { background:
  linear-gradient(180deg, rgba(22,61,67,.55) 0%, rgba(22,61,67,.42) 35%, rgba(22,61,67,.58) 75%, rgba(22,61,67,.8) 100%),
  linear-gradient(90deg, rgba(22,61,67,.6) 0%, rgba(22,61,67,.2) 48%, rgba(22,61,67,0) 70%); }
/* Pauzeerknop (WCAG 2.2.2): rechtsonder, rustig en met focusring. */
.ep-hero-pause { position: absolute; right: var(--ep-gutter); bottom: 20px; z-index: 3; width: 44px; height: 44px; border-radius: 50%; border: 1.5px solid rgba(246, 244, 239, .7); background: rgba(22, 61, 67, .45); color: var(--color-warmwit); display: flex; align-items: center; justify-content: center; cursor: pointer; padding: 0; transition: background-color var(--dur) var(--ease), border-color var(--dur) var(--ease); }
.ep-hero-pause:hover, .ep-hero-pause:focus-visible { background: rgba(22, 61, 67, .75); border-color: var(--color-warmwit); }
.ep-hero-pause:focus-visible { outline: 2px solid var(--color-salie); outline-offset: 3px; }
.ep-hero-pause svg { width: 16px; height: 16px; display: block; }
.ep-hero-pause .ep-icon-play { display: none; }
.ep-hero-pause[aria-pressed="true"] .ep-icon-pause { display: none; }
.ep-hero-pause[aria-pressed="true"] .ep-icon-play { display: block; }
@media (prefers-reduced-motion: reduce) { .ep-hero-cover__media .ep-hero-video, .ep-hero-pause { display: none; } }

/* Oorzaak van de lichte strook bovenaan de hero: WordPress' blokafstand (16px) gaf de donkere laag een marge, waardoor de bovenste 16px niet werd bedekt. */
.ep-hero-cover__media, .ep-hero-cover__scrim, .ep-hero-cover__media .ep-hero-video, .ep-hero-cover__media figure { margin: 0 !important; }
/* Idem voor de video: de blokafstand duwde hem 16px omlaag, waardoor de poster als lichte strook bovenaan zichtbaar bleef. */

/* ---------- Juridische pagina's (privacy, cookies): één rustige leeskolom met ruimte tussen de blokken ---------- */
.ep-main--narrow .entry-content > * { margin-left: 0 !important; margin-right: 0 !important; max-width: none; }
.ep-main--narrow .entry-content > * + * { margin-top: var(--space-4); }
.ep-main--narrow .entry-content > h2 { margin-top: var(--space-8); font-size: var(--fs-h3); }
.ep-main--narrow .entry-content > h3 { margin-top: var(--space-5); font-size: 1.125rem; }
.ep-main--narrow .entry-content > h2 + p, .ep-main--narrow .entry-content > h3 + p { margin-top: var(--space-2); }
.ep-main--narrow .entry-content > ul { padding-left: 1.25em; display: flex; flex-direction: column; gap: var(--space-2); }
.ep-main--narrow .entry-content p, .ep-main--narrow .entry-content li { line-height: 1.65; }
.ep-main--narrow .ep-page-title { margin-bottom: var(--space-5); }