/* Hallmark · macrostructure: Marquee Hero + two-column editorial · tone: premium/architectural · anchor hue: forest-green
 * pre-emit critique: P5 H4 E4 S4 R5 V4 · motion: reveal · hover-lift · image-zoom · reduced-motion: honored */

:root {
  /* Studio Renders design tokens - bron: Website/Docs/brand-document-v2.html */
  --sr-gutter: clamp(1.15rem, 5vw, 3rem); /* paginamarge, gelijk aan settings.spacing.padding in theme.json */
  --sr-hero-h: 64vh; /* standaard hero-hoogte: blog, portfolio, contact en offerte */
  --sr-radius: 12px;
  --sr-accent-light: #54705A;
  --sr-shadow-sm: 0 2px 8px rgba(48,48,48,.06);
  --sr-shadow-md: 0 4px 16px rgba(48,48,48,.10);
  --sr-shadow-lg: 0 12px 32px rgba(48,48,48,.15);
  --sr-glow: 0 0 24px rgba(199,180,155,.25);
  --sr-glow-strong: 0 0 34px rgba(199,180,155,.55), 0 0 60px rgba(199,180,155,.28);
  --sr-shadow: var(--sr-shadow-sm);
  --sr-shadow-lift: var(--sr-shadow-lg);
  --ease-out: cubic-bezier(.16,1,.3,1);
  --ease-in-out: cubic-bezier(.65,.05,.36,1);
  --dur: .6s;
}

/* ============ HEADER (zwevende pill - à la odyssee.one) ============ */
.sr-header { position: fixed; top: 0; left: 0; right: 0; z-index: 50; background: transparent; border: none; padding: 1.4rem clamp(1rem, 3vw, 2rem) 0; transition: padding-top .7s cubic-bezier(.22,1,.36,1); }
.sr-header.is-scrolled { padding-top: .55rem; }
.sr-header__bar { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 1rem; max-width: 1300px; margin: 0 auto; padding: .5rem .5rem .5rem 1.4rem; background: transparent; border: 1px solid transparent; border-radius: 999px; box-shadow: none; transition: background-color .7s cubic-bezier(.22,1,.36,1), box-shadow .7s cubic-bezier(.22,1,.36,1), border-color .7s cubic-bezier(.22,1,.36,1), backdrop-filter .7s cubic-bezier(.22,1,.36,1), padding .7s cubic-bezier(.22,1,.36,1); }
.sr-header.is-scrolled .sr-header__bar { background: rgba(34,34,32,.74); backdrop-filter: saturate(1.3) blur(16px); -webkit-backdrop-filter: saturate(1.3) blur(16px); border-color: rgba(255,255,255,.16); box-shadow: 0 12px 38px rgba(20,20,18,.32); }
.sr-brand { justify-self: start; display: inline-flex; align-items: center; gap: .62rem; text-decoration: none; color: #fff; }
.sr-brand__mark { width: 34px; height: 34px; flex-shrink: 0; color: #fff; }
.sr-brand__mark svg { width: 100%; height: 100%; display: block; }
.sr-brand__name { font-family: var(--wp--preset--font-family--display); font-weight: 600; font-size: 1.28rem; letter-spacing: -.01em; line-height: 1; color: #fff; }
.sr-nav { justify-self: center; display: flex; align-items: center; gap: clamp(1rem, 2vw, 1.8rem); }
.sr-nav > a, .sr-nav__top { position: relative; font-family: var(--wp--preset--font-family--display); font-size: .82rem; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; color: rgba(255,255,255,.82); text-decoration: none; white-space: nowrap; display: inline-flex; align-items: center; gap: .32rem; transition: color .2s var(--ease-out); cursor: pointer; }
.sr-nav > a:hover, .sr-nav__top:hover { color: #fff; }
/* geanimeerd streepje onder menu-item (hover + actief), dicht op de tekst */
.sr-nav > a::after, .sr-nav__top::after { content: ""; position: absolute; left: 0; right: 0; bottom: -3px; height: 1.5px; background: currentColor; border-radius: 2px; transform: scaleX(0); transform-origin: center; transition: transform .3s var(--ease-out); }
.sr-nav > a:hover::after, .sr-nav__top:hover::after, .sr-nav > a.is-active::after, .sr-has-submenu.is-active .sr-nav__top::after { transform: scaleX(1); }
.sr-has-submenu { position: relative; display: flex; align-items: center; }
.sr-caret { transition: transform .25s var(--ease-out); }
.sr-has-submenu:hover .sr-caret, .sr-has-submenu:focus-within .sr-caret { transform: rotate(180deg); }
.sr-submenu { position: absolute; top: calc(100% + 1.7rem); left: -.8rem; min-width: 258px; background: rgba(13,13,12,.95); backdrop-filter: saturate(1.3) blur(18px); -webkit-backdrop-filter: saturate(1.3) blur(16px); border: 1px solid rgba(255,255,255,.14); border-radius: 14px; box-shadow: 0 16px 40px rgba(20,20,18,.42); padding: .45rem; display: grid; gap: .28rem; opacity: 0; visibility: hidden; transform: translateY(6px); transition: opacity .22s var(--ease-out), transform .22s var(--ease-out), visibility .22s; z-index: 60; }
/* onzichtbare brug zodat het menu niet verdwijnt bij het naar beneden bewegen */
.sr-submenu::before { content: ""; position: absolute; bottom: 100%; left: 0; right: 0; height: 1.9rem; }
.sr-has-submenu:hover .sr-submenu, .sr-has-submenu:focus-within .sr-submenu { opacity: 1; visibility: visible; transform: none; }
.sr-submenu a { font-family: var(--wp--preset--font-family--body); text-transform: none; letter-spacing: 0; font-size: .92rem; font-weight: 500; color: rgba(255,255,255,.85); text-decoration: none; padding: .62rem .85rem; border-radius: 9px; transition: background-color .18s var(--ease-out), color .18s var(--ease-out); }
.sr-submenu a:hover { background: rgba(255,255,255,.1); color: #fff; }
.sr-submenu a.is-active { background: rgba(62,82,64,.34); color: #fff; }
.sr-header__cta { justify-self: end; position: relative; overflow: hidden; display: inline-flex; align-items: center; background: var(--wp--preset--color--accent); color: #fff; text-decoration: none; font-family: var(--wp--preset--font-family--body); font-weight: 600; font-size: .76rem; letter-spacing: .06em; text-transform: uppercase; padding: .68rem 1.4rem; border-radius: 999px; white-space: nowrap; transition: background-color .2s var(--ease-out), transform .2s var(--ease-out), box-shadow .2s var(--ease-out); }
.sr-header__cta:hover { background: var(--sr-accent-light); transform: translateY(-1px); box-shadow: 0 8px 22px rgba(62,82,64,.35); }
.sr-menu-toggle { display: none; background: none; border: 0; padding: .4rem; cursor: pointer; color: #fff; }
.sr-nav__close { display: none; }
.sr-menu-toggle svg { width: 26px; height: 26px; }
@media (max-width: 960px) {
  .sr-header__bar { display: flex; justify-content: space-between; padding: .5rem .6rem .5rem 1.2rem; }
  .sr-menu-toggle { display: inline-flex; }
  .sr-header__cta { display: none; }
  .sr-nav[data-open="false"] { display: none; }
  /* schermvullend paneel met marge rondom, verticaal gecentreerd, grotere tekst */
  /* px-based, symmetrische 8px-marge; justify-self reset (desktop-basisregel zette center -> horizontaal shrink-to-fit) */
  .sr-nav { position: fixed; z-index: 60; inset: 8px; width: auto; height: auto; max-width: none; justify-self: auto; flex-direction: column; align-items: center; justify-content: safe center; gap: 1.7rem; background: rgba(22,22,20,.98); backdrop-filter: saturate(1.2) blur(22px); -webkit-backdrop-filter: saturate(1.2) blur(22px); border: 1px solid rgba(255,255,255,.13); border-radius: 22px; padding: 1.4rem 1.2rem; box-shadow: 0 24px 64px rgba(15,15,13,.55); overflow-y: auto; text-align: center; }
  .sr-nav__close { display: inline-flex; position: absolute; top: 1rem; right: 1rem; width: 2.5rem; height: 2.5rem; align-items: center; justify-content: center; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.16); border-radius: 50%; color: #fff; cursor: pointer; transition: background-color .2s var(--ease-out); z-index: 2; }
  .sr-nav__close:hover { background: rgba(255,255,255,.16); }
  .sr-nav__close svg { width: 22px; height: 22px; }
  .sr-nav > a, .sr-nav__top { font-size: 1.7rem; letter-spacing: .03em; }
  .sr-nav > a::after, .sr-nav__top::after { display: none; }
  .sr-has-submenu { width: auto; flex-direction: column; align-items: center; gap: 1rem; }
  .sr-nav__top { justify-content: center; }
  /* diensten-submenu: dicht by default, klik om te openen (accordion) */
  .sr-submenu { position: static; display: flex; flex-direction: column; align-items: center; gap: .15rem; opacity: 1; visibility: visible; transform: none; box-shadow: none; border: 0; padding: 0; min-width: 0; background: transparent; max-height: 0; overflow: hidden; transition: max-height .34s var(--ease-out); }
  .sr-submenu::before { display: none; }
  .sr-has-submenu.is-expanded .sr-submenu { max-height: 70vh; }
  .sr-has-submenu.is-expanded .sr-caret { transform: rotate(180deg); }
  .sr-submenu a { color: rgba(255,255,255,.8); font-size: 1.25rem; padding: .55rem .9rem; }
  .sr-submenu a:hover { background: rgba(255,255,255,.08); color: #fff; }
  .sr-submenu a.is-active { background: rgba(62,82,64,.34); color: #fff; }
  /* taaldropdown begint op dezelfde hoogte als het hoofdmenu */
  .sr-langsw__menu { position: fixed; top: 4.9rem; right: 1rem; left: auto; min-width: 210px; z-index: 70; }
  /* menu open: taalswitcher + hamburger verbergen (paneel heeft eigen X-knop),
     en de backdrop-filter van de balk uitzetten zodat het vaste paneel aan het
     viewport hangt en niet aan de (kleinere) balk gaat plakken */
  .sr-header__bar:has(.sr-nav[data-open="true"]) .sr-langsw,
  .sr-header__bar:has(.sr-nav[data-open="true"]) .sr-menu-toggle { display: none; }
  .sr-header.is-scrolled .sr-header__bar:has(.sr-nav[data-open="true"]) { backdrop-filter: none; -webkit-backdrop-filter: none; }
}

/* subpagina's zonder hero: ruimte onder de zwevende pill + pill altijd zichtbaar (frosted) */
body:not(.sr-has-hero) { padding-top: 6rem; }
body:not(.sr-has-hero) .sr-header__bar { background: rgba(34,34,32,.74); backdrop-filter: saturate(1.3) blur(16px); -webkit-backdrop-filter: saturate(1.3) blur(16px); border-color: rgba(255,255,255,.16); box-shadow: 0 12px 38px rgba(20,20,18,.3); }

/* ============ SECTIES OM-EN-OM (beige / wit) ============
   Forceer strikte alternatie op de full-width groep-secties, ongeacht de in de content
   ingestelde achtergrond. De hero-cover is het eerste kind van .wp-block-post-content
   (positie 1), dus de eerste inhoudssectie (positie 2, even) wordt beige, daarna wit, enz.
   Covers (hero/CTA) worden niet geraakt en houden hun donkere achtergrond. */
.wp-block-post-content > .wp-block-group.alignfull:nth-child(even) { background-color: var(--wp--preset--color--base) !important; }
.wp-block-post-content > .wp-block-group.alignfull:nth-child(odd) { background-color: var(--wp--preset--color--base-2) !important; }

/* ============ COOKIE-BANNER (à la odyssee.one, huisstijl) ============ */
.sr-cookie { position: fixed; left: clamp(1rem, 3vw, 1.6rem); bottom: clamp(1rem, 3vw, 1.6rem); z-index: 90; max-width: 400px; width: calc(100% - 2rem); }
.sr-cookie[hidden] { display: none; }
.sr-cookie__card { position: relative; background: var(--wp--preset--color--base-2); border: 1px solid var(--wp--preset--color--line); border-radius: 18px; box-shadow: var(--sr-shadow-lg); padding: 1.5rem 1.5rem 1.4rem; animation: sr-cookie-in .45s var(--ease-out); }
@keyframes sr-cookie-in { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
.sr-cookie__title { font-family: var(--wp--preset--font-family--display); font-weight: 600; font-size: 1.15rem; margin: 0 0 .35rem; color: var(--wp--preset--color--contrast); }
.sr-cookie__text { font-size: .86rem; line-height: 1.55; color: var(--wp--preset--color--contrast-2); margin: 0 0 1rem; padding-right: 1.2rem; }
.sr-cookie__text a { color: var(--wp--preset--color--accent); text-decoration: underline; text-underline-offset: 2px; }
.sr-cookie__text a:hover { text-decoration: none; }
.sr-cookie__cats { display: grid; gap: .6rem; margin: 0 0 1.1rem; }
.sr-cookie__cat { border: 1px solid var(--wp--preset--color--line); border-radius: 11px; padding: .8rem .9rem; background: var(--wp--preset--color--base); }
.sr-cookie__cat-head { display: flex; align-items: center; justify-content: space-between; gap: .8rem; }
.sr-cookie__cat-name { font-family: var(--wp--preset--font-family--display); font-weight: 600; font-size: .95rem; color: var(--wp--preset--color--contrast); }
.sr-cookie__always { font-size: .68rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--wp--preset--color--accent); flex-shrink: 0; }
.sr-cookie__cat-desc { font-size: .78rem; line-height: 1.45; color: var(--wp--preset--color--contrast-2); margin: .35rem 0 0; }
.sr-switch { position: relative; display: inline-block; width: 42px; height: 24px; flex-shrink: 0; cursor: pointer; }
.sr-switch input { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.sr-switch__slider { position: absolute; inset: 0; border-radius: 999px; background: color-mix(in srgb, var(--wp--preset--color--contrast) 22%, transparent); transition: background-color .25s var(--ease-out); }
.sr-switch__slider::after { content: ""; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.3); transition: transform .25s var(--ease-out); }
.sr-switch input:checked + .sr-switch__slider { background: var(--wp--preset--color--accent); }
.sr-switch input:checked + .sr-switch__slider::after { transform: translateX(18px); }
.sr-switch:hover .sr-switch__slider { background: color-mix(in srgb, var(--wp--preset--color--contrast) 32%, transparent); }
.sr-switch:hover input:checked + .sr-switch__slider { background: var(--sr-accent-light); }
.sr-cookie__actions { display: grid; grid-template-columns: 1fr 1fr; gap: .55rem; }
.sr-cookie__btn { font-family: var(--wp--preset--font-family--body); font-weight: 600; font-size: .8rem; border-radius: 8px; padding: .7rem .9rem; cursor: pointer; border: 1px solid transparent; transition: background-color .2s var(--ease-out), border-color .2s var(--ease-out), color .2s var(--ease-out); }
.sr-cookie__btn--primary { background: var(--wp--preset--color--accent); color: #fff; }
.sr-cookie__btn--primary:hover { background: var(--wp--preset--color--accent-dark); }
.sr-cookie__btn--ghost { background: transparent; border-color: var(--wp--preset--color--line); color: var(--wp--preset--color--contrast); }
.sr-cookie__btn--ghost:hover { border-color: var(--wp--preset--color--accent); color: var(--wp--preset--color--accent); }

/* ============ WHATSAPP-KNOP (zwevend, rechtsonder) ============ */
.sr-wa { position: fixed; right: clamp(1rem, 3vw, 1.6rem); bottom: clamp(1rem, 3vw, 1.6rem); z-index: 85; width: 56px; height: 56px; border-radius: 50%; background: #25D366; color: #fff; display: grid; place-items: center; box-shadow: 0 6px 20px rgba(37,211,102,.42); transition: transform .25s var(--ease-out), box-shadow .25s var(--ease-out); }
.sr-wa svg { width: 30px; height: 30px; display: block; position: relative; z-index: 1; }
.sr-wa:hover { transform: translateY(-3px) scale(1.04); box-shadow: 0 11px 28px rgba(37,211,102,.55); color: #fff; }
.sr-wa::before { content: ""; position: absolute; inset: 0; border-radius: 50%; animation: sr-wa-pulse 2.6s var(--ease-out) infinite; }
@keyframes sr-wa-pulse { 0% { box-shadow: 0 0 0 0 rgba(37,211,102,.45); } 70% { box-shadow: 0 0 0 15px rgba(37,211,102,0); } 100% { box-shadow: 0 0 0 0 rgba(37,211,102,0); } }
@media (prefers-reduced-motion: reduce) { .sr-wa::before { animation: none; } }
/* op smalle schermen de cookiebanner (linksonder, bijna vol) niet laten botsen met de knop */
@media (max-width: 520px) { .sr-wa { width: 52px; height: 52px; } .sr-wa svg { width: 27px; height: 27px; } }

/* ============ 404 (speels) ============ */
.sr-404 { text-align: center; display: flex; flex-direction: column; align-items: center; }
.sr-404__stage { position: relative; width: 100%; display: flex; justify-content: center; align-items: center; padding: 1rem 0 .4rem; }
.sr-404__num { position: relative; z-index: 1; font-family: var(--wp--preset--font-family--display); font-weight: 600; font-size: clamp(6rem, 22vw, 13rem); line-height: .85; letter-spacing: -.04em; color: var(--wp--preset--color--contrast); display: inline-flex; align-items: center; gap: .04em; }
.sr-404__num.is-kicked { animation: sr-404-kick .7s var(--ease-out); }
@keyframes sr-404-kick { 0% { transform: scale(1) rotate(0); } 30% { transform: scale(1.06) rotate(-3deg); } 60% { transform: scale(.98) rotate(2deg); } 100% { transform: scale(1) rotate(0); } }
.sr-404__d { display: inline-block; transition: transform .3s var(--ease-out); will-change: transform; }
.sr-404__lens { position: relative; width: .7em; height: .7em; border-radius: 50%; display: inline-block; margin: 0 .06em; cursor: pointer; transition: transform .3s var(--ease-out); will-change: transform; background: radial-gradient(circle at 35% 30%, color-mix(in srgb, var(--sr-accent-light) 92%, #fff), var(--wp--preset--color--accent) 46%, var(--wp--preset--color--accent-dark) 100%); box-shadow: inset 0 0 0 .05em rgba(255,255,255,.16), inset 0 .05em .22em rgba(0,0,0,.4), 0 .12em .5em rgba(42,58,44,.4); }
.sr-404__lens:hover { transform: scale(1.05); }
.sr-404__iris { position: absolute; inset: 24%; background: var(--wp--preset--color--base); clip-path: polygon(50% 2%, 95% 26%, 95% 74%, 50% 98%, 5% 74%, 5% 26%); box-shadow: inset 0 0 .12em rgba(0,0,0,.35); animation: sr-404-spin 16s linear infinite; }
.sr-404__lens:hover .sr-404__iris { animation-duration: 3s; }
.sr-404__glint { position: absolute; top: 12%; left: 20%; width: 26%; height: 18%; border-radius: 50%; background: rgba(255,255,255,.55); filter: blur(1px); pointer-events: none; }
@keyframes sr-404-spin { to { transform: rotate(360deg); } }
.sr-404 .sr-eyebrow { margin-top: 1.6rem; }
.sr-404__title { font-family: var(--wp--preset--font-family--display); font-size: clamp(1.8rem, 4vw, 2.6rem); font-weight: 400; line-height: 1.1; margin: .3rem 0 0; }
.sr-404__text { color: var(--wp--preset--color--contrast-2); max-width: 500px; margin: 1rem auto 0; line-height: 1.6; }
.sr-404__actions { display: flex; gap: .8rem; flex-wrap: wrap; justify-content: center; margin-top: 1.8rem; }
.sr-404__ghost { background: transparent !important; background-image: none !important; border: 1px solid var(--wp--preset--color--line); color: var(--wp--preset--color--contrast) !important; box-shadow: none !important; animation: none !important; }
.sr-404__ghost:hover { border-color: var(--wp--preset--color--accent); color: var(--wp--preset--color--accent) !important; transform: translateY(-2px); }
.sr-404__hint { margin-top: 1.1rem; font-size: .82rem; color: var(--wp--preset--color--contrast-2); opacity: .8; transition: color .3s; }
@media (prefers-reduced-motion: reduce) { .sr-404__iris { animation: none; } }

/* ============ SUB-HERO (contact e.d.) ============ */
.sr-subhero { position: relative; }
/* pure zwarte overlay (geen grijstint) */
.sr-subhero .wp-block-cover__background { background: rgba(0,0,0,.66) !important; opacity: 1 !important; }
.sr-subhero .sr-eyebrow { color: var(--wp--preset--color--stucco); }
.sr-subhero h1 { letter-spacing: -.015em; }
.sr-subhero .wp-block-cover__inner-container { display: flex; flex-direction: column; align-items: center; }
.sr-subhero .sr-reviews--badge { align-items: center; margin-top: 1.7rem; }
.sr-subhero .sr-reviews__badge { background: rgba(255,255,255,.09); border: 1px solid rgba(255,255,255,.22); backdrop-filter: saturate(1.2) blur(8px); -webkit-backdrop-filter: saturate(1.2) blur(8px); box-shadow: none; }
.sr-subhero .sr-reviews__badge .sr-reviews__score { color: #fff; }
.sr-subhero .sr-reviews__badge .sr-reviews__count { color: rgba(255,255,255,.85); }
.sr-subhero .sr-reviews__badge::after { color: rgba(255,255,255,.8); }
.sr-subhero .sr-reviews__badge:hover { background: rgba(255,255,255,.15); border-color: rgba(255,255,255,.36); }
.sr-subhero .sr-reviews__badge:hover .sr-reviews__count { color: #fff; text-decoration: underline; }

/* ============ BUTTONS ============ */
.wp-element-button, .wp-block-button__link { font-family: var(--wp--preset--font-family--body); font-size: .74rem; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; position: relative; overflow: hidden; transition: background-color .2s var(--ease-out), transform .2s var(--ease-out), box-shadow .2s var(--ease-out); }
/* bewegende gradient-knoppen (à la designated.nl, in groene huisstijl) */
.wp-block-button:not(.is-style-outline) > .wp-block-button__link:not(.has-background),
.sr-header__cta, .sr-price__cta, .sr-form .wp-element-button {
  background-color: var(--wp--preset--color--accent);
  background-image: linear-gradient(92deg, var(--wp--preset--color--accent-dark) 0%, var(--sr-accent-light) 50%, var(--wp--preset--color--accent-dark) 100%);
  background-size: 210% 100%;
  background-position: 0% 50%;
  box-shadow: 0 3px 16px rgba(62,82,64,.30);
}
/* de bewegende gradient start PAS bij hover */
.wp-block-button:not(.is-style-outline) > .wp-block-button__link:not(.has-background):hover,
.sr-header__cta:hover, .sr-price__cta:hover, .sr-form .wp-element-button:hover {
  animation: sr-btn-shimmer 1.9s ease-in-out infinite; transform: translateY(-2px); box-shadow: 0 7px 24px rgba(62,82,64,.46);
}
/* hero-knop: gespiegelde gradient (licht links → donker rechts) - hogere specificiteit dan basisregel */
.sr-hero .wp-block-button:not(.is-style-outline) > .wp-block-button__link:not(.has-background) { background-image: linear-gradient(92deg, var(--sr-accent-light) 0%, var(--wp--preset--color--accent-dark) 48%, var(--sr-accent-light) 100%); }
/* suede-variant (reguliere prijskaart) behoudt bruine tint */
.sr-price__cta:not(.sr-price__cta--pop) { background-image: linear-gradient(92deg, #574636 0%, #7d6853 50%, #574636 100%); box-shadow: 0 3px 16px rgba(107,87,71,.30); }
@keyframes sr-btn-shimmer { 0%, 100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } }
@media (prefers-reduced-motion: reduce) { .wp-block-button:not(.is-style-outline) > .wp-block-button__link:not(.has-background):hover, .sr-header__cta:hover, .sr-price__cta:hover, .sr-form .wp-element-button:hover { animation: none; } }
/* witte/outline knoppen: strakke lift zonder gradient */
.wp-block-button__link.has-base-2-background-color:hover { transform: translateY(-2px); box-shadow: 0 8px 22px rgba(20,20,18,.28); }
.wp-element-button:hover, .wp-block-button__link:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(62,82,64,.22); }
.is-style-outline .wp-block-button__link { background: transparent; border: 1px solid currentColor; }
.is-style-outline .wp-block-button__link:hover { background: var(--wp--preset--color--contrast); color: var(--wp--preset--color--base); box-shadow: none; }

/* ============ CARDS ============ */
.sr-card { background: var(--wp--preset--color--base-2); border: 1px solid var(--wp--preset--color--line); border-radius: var(--sr-radius); overflow: hidden; box-shadow: var(--sr-shadow); transition: transform .35s var(--ease-out), box-shadow .35s var(--ease-out), border-color .35s var(--ease-out); }
.sr-card:hover { transform: translateY(-4px); box-shadow: var(--sr-shadow-lg); border-color: var(--sr-accent-light); }

/* ============ IMAGES ============ */
figure.wp-block-image, .wp-block-gallery .wp-block-image { overflow: hidden; border-radius: var(--sr-radius); }
figure.wp-block-image img, .wp-block-gallery img { transition: transform .6s var(--ease-out); will-change: transform; }
figure.wp-block-image:hover img, .wp-block-gallery .wp-block-image:hover img { transform: scale(1.045); }
.wp-block-cover { border-radius: 0; }

/* ============ EYEBROW ============ */
.sr-eyebrow { font-family: var(--wp--preset--font-family--display); font-weight: 500; font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; color: var(--wp--preset--color--contrast-2); display: block; margin: 0 0 .7rem; }

/* ============ SCROLL REVEAL ============ */
@media (prefers-reduced-motion: no-preference) {
  .sr-reveal { opacity: 0; transform: translateY(22px); transition: opacity var(--dur) var(--ease-out), transform var(--dur) var(--ease-out); }
  .sr-reveal.is-in { opacity: 1; transform: none; }
}

/* ============ NATIVE FORM (pill-velden) ============ */
.sr-form { display: grid; gap: 1.15rem; }
.sr-form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 1.15rem; }
@media (max-width: 620px) { .sr-form__row { grid-template-columns: 1fr; } }
.sr-form input[type=text], .sr-form input[type=email], .sr-form input[type=tel], .sr-form textarea { box-sizing: border-box; font: inherit; font-weight: 400; line-height: 1.4; width: 100%; padding: .65rem 1.05rem; border: 1px solid color-mix(in srgb, var(--wp--preset--color--contrast) 20%, transparent); border-radius: 10px; background: color-mix(in srgb, var(--wp--preset--color--contrast) 6%, var(--wp--preset--color--base-2)); color: var(--wp--preset--color--contrast); transition: border-color .2s var(--ease-out), box-shadow .2s var(--ease-out), background-color .2s var(--ease-out); }
.sr-form input::placeholder, .sr-form textarea::placeholder { color: var(--wp--preset--color--contrast-2); }
.sr-form input:focus, .sr-form textarea:focus { outline: none; border-color: var(--wp--preset--color--accent); background: var(--wp--preset--color--base-2); box-shadow: 0 0 0 3px color-mix(in srgb, var(--wp--preset--color--accent) 15%, transparent); }
.sr-form textarea { resize: vertical; min-height: 112px; line-height: 1.55; }
.sr-phone { display: flex; gap: .55rem; }
.sr-phone__code { box-sizing: border-box; flex-shrink: 0; width: 6.8rem; font: inherit; line-height: 1.4; padding: .65rem 1.8rem .65rem .8rem; border: 1px solid color-mix(in srgb, var(--wp--preset--color--contrast) 20%, transparent); border-radius: 10px; appearance: none; -webkit-appearance: none; background-color: color-mix(in srgb, var(--wp--preset--color--contrast) 6%, var(--wp--preset--color--base-2)); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none'%3E%3Cpath d='M2.5 4.5 6 8l3.5-3.5' stroke='%23585652' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right .65rem center; background-size: .72rem; color: var(--wp--preset--color--contrast); cursor: pointer; transition: border-color .2s var(--ease-out), box-shadow .2s var(--ease-out); }
.sr-phone__code:focus { outline: none; border-color: var(--wp--preset--color--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--wp--preset--color--accent) 15%, transparent); }
.sr-phone input { flex: 1; min-width: 0; }
/* bestanden toevoegen */
.sr-form__file { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .15rem; text-align: center; padding: 1rem 1.1rem; border: 1.5px dashed var(--wp--preset--color--line); border-radius: 8px; background: color-mix(in srgb, var(--wp--preset--color--accent) 3%, var(--wp--preset--color--base-2)); cursor: pointer; transition: border-color .2s var(--ease-out), background-color .2s var(--ease-out); position: relative; }
.sr-form__file:hover { border-color: var(--wp--preset--color--accent); background: color-mix(in srgb, var(--wp--preset--color--accent) 7%, var(--wp--preset--color--base-2)); }
.sr-form__file-cta { font-family: var(--wp--preset--font-family--body); font-weight: 600; font-size: .95rem; color: var(--wp--preset--color--accent); }
.sr-form__file-cta::before { content: ""; display: inline-block; width: 1rem; height: 1rem; margin-right: .4rem; vertical-align: -.15rem; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E") center/contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E") center/contain no-repeat; }
.sr-form__file-hint { font-size: .8rem; color: var(--wp--preset--color--contrast-2); }
.sr-form__file input[type="file"] { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
.sr-form__check { display: flex; align-items: flex-start; gap: .55rem; font-size: .85rem; color: var(--wp--preset--color--contrast-2); }
.sr-form__check input { margin-top: .2rem; accent-color: var(--wp--preset--color--accent); }
.sr-form__check a { color: var(--wp--preset--color--accent); }
.sr-form__actions { display: flex; justify-content: flex-end; }
.sr-form__actions button { min-width: 150px; }
.sr-form__ok { background: color-mix(in srgb, var(--wp--preset--color--accent) 12%, transparent); color: var(--wp--preset--color--accent-dark); padding: .8rem 1rem; border-radius: 8px; }
.sr-form__err { background: #f6e3e3; color: #8a2b2b; padding: .8rem 1rem; border-radius: 8px; }
.sr-hp { position: absolute; left: -9999px; }

/* ============ BEFORE/AFTER ============ */
.sr-ba { position: relative; overflow: hidden; border-radius: var(--sr-radius); touch-action: none; user-select: none; }
.sr-ba img { display: block; width: 100%; height: auto; }
.sr-ba__after { position: absolute; inset: 0; width: 50%; overflow: hidden; border-right: 2px solid var(--wp--preset--color--base-2); }
.sr-ba__after img { width: var(--sr-ba-w, 100%); max-width: none; }
.sr-ba__handle { position: absolute; top: 0; bottom: 0; left: 50%; width: 40px; transform: translateX(-50%); cursor: ew-resize; display: grid; place-items: center; }
.sr-ba__handle::before { content: ""; position: absolute; top: 0; bottom: 0; width: 2px; background: var(--wp--preset--color--base-2); }
.sr-ba__grip { width: 34px; height: 34px; border-radius: 50%; background: var(--wp--preset--color--base-2); box-shadow: var(--sr-shadow); display: grid; place-items: center; font-size: 13px; }

/* ============ FAQ details ============ */
.wp-block-details summary { cursor: pointer; font-weight: 500; font-size: 1.05rem; list-style: none; position: relative; padding-right: 2rem; transition: color .2s var(--ease-out); }
.wp-block-details summary::-webkit-details-marker { display: none; }
.wp-block-details summary::after { content: "+"; position: absolute; right: .2rem; top: 50%; transform: translateY(-50%); font-size: 1.4rem; font-weight: 300; color: var(--wp--preset--color--accent); transition: transform .25s var(--ease-out); }
.wp-block-details[open] summary::after { transform: translateY(-50%) rotate(45deg); }
.wp-block-details summary:hover { color: var(--wp--preset--color--accent); }

/* ============ PRICE cards nudge ============ */
.wp-block-columns .sr-card.has-border-color { transform: translateY(-8px); box-shadow: var(--sr-shadow-lg), var(--sr-glow); }
.wp-block-columns .sr-card.has-border-color:hover { box-shadow: var(--sr-shadow-lg), var(--sr-glow-strong); }
@media (max-width: 781px) { .wp-block-columns .sr-card.has-border-color { transform: none; } }

/* ============ FOOTER (brand-document) ============ */
.sr-footer { background: var(--wp--preset--color--contrast); color: var(--wp--preset--color--base); padding: clamp(3.5rem, 7vw, 5rem) 0 2.5rem; }
.sr-footer__inner { max-width: 1300px; margin: 0 auto; padding: 0 clamp(1.15rem, 5vw, 3rem) 3rem; display: grid; grid-template-columns: 1.5fr 2fr; gap: clamp(2rem, 5vw, 4rem); border-bottom: 1px solid rgba(241,240,235,.12); }
.sr-footer__logo { color: var(--wp--preset--color--base); margin-bottom: 1.4rem; }
.sr-footer__logo svg { height: 42px; width: auto; display: block; }
.sr-footer__tagline { font-family: var(--wp--preset--font-family--display); font-size: 1.18rem; font-style: normal; color: rgba(241,240,235,.72); max-width: 400px; line-height: 1.5; margin: 0; }
.sr-footer__cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem; }
.sr-footer__col { display: flex; flex-direction: column; gap: .62rem; }
.sr-footer__label { font-family: var(--wp--preset--font-family--display); font-size: .7rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--wp--preset--color--stucco); margin-bottom: .35rem; }
.sr-footer__col a { color: rgba(241,240,235,.82); text-decoration: none; font-size: .93rem; transition: color .2s var(--ease-out); }
.sr-footer__col a:hover { color: var(--wp--preset--color--stucco); }
/* contact-items onderstreept - duidelijk klikbaar */
.sr-footer__col--contact a { text-decoration: underline; text-underline-offset: 3px; }
.sr-footer__muted { color: rgba(241,240,235,.75); font-size: .86rem; }
.sr-footer__map { display: inline-block; text-decoration: underline; text-underline-offset: 3px; transition: color .2s var(--ease-out); }
.sr-footer__map:hover { color: var(--wp--preset--color--stucco); }
.sr-footer__bottom { max-width: 1300px; margin: 1.8rem auto 0; padding: 0 clamp(1.15rem, 5vw, 3rem); display: flex; justify-content: space-between; flex-wrap: wrap; gap: 1rem; font-size: .8rem; color: rgba(241,240,235,.75); }
.sr-footer__bottom a { color: var(--wp--preset--color--stucco); text-decoration: none; }
.sr-footer__bottom a:hover { text-decoration: underline; }
@media (max-width: 820px) {
  .sr-footer__inner { grid-template-columns: 1fr; }
  .sr-footer__cols { grid-template-columns: 1fr 1fr; }
}

.skip-link { position: absolute; left: -9999px; }
.skip-link:focus { left: 1rem; top: 1rem; z-index: 100; background: var(--wp--preset--color--contrast); color: var(--wp--preset--color--base); padding: .5rem .8rem; border-radius: 6px; }

/* body-tekst altijd DM Sans (root-cause fix voor paragraaf-erfelijkheid) */
p, li { font-family: var(--wp--preset--font-family--body); }
.wp-block-heading, h1, h2, h3, h4, .sr-eyebrow { font-family: var(--wp--preset--font-family--display); }

/* ============ HERO gradient-overlay ============ */
.sr-hero .wp-block-cover__background { background: linear-gradient(90deg, rgba(22,22,20,.86) 0%, rgba(22,22,20,.55) 46%, rgba(22,22,20,.12) 100%) !important; opacity: 1 !important; }
.sr-hero h1 { letter-spacing: -.015em; }
.sr-hero .sr-eyebrow { color: var(--wp--preset--color--stucco); margin-bottom: 1rem; }
.sr-hero .sr-reviews--badge { margin-top: 1.6rem; align-items: flex-start; }

/* ============ USP's (genummerde voordelen) ============ */
.sr-usps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.6rem; margin-top: 2rem; }
@media (max-width: 680px) { .sr-usps { grid-template-columns: 1fr; gap: 1.1rem; } }
.sr-usp__num { display: block; font-family: var(--wp--preset--font-family--display); font-weight: 600; font-size: .82rem; letter-spacing: .06em; text-transform: uppercase; color: var(--wp--preset--color--contrast); margin-bottom: .5rem; }
.sr-usp p { color: var(--wp--preset--color--contrast-2); font-size: .92rem; line-height: 1.55; margin: 0; }
.sr-usps--grid { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 820px) { .sr-usps--grid { grid-template-columns: 1fr; } }

/* ============ DONKERE FEATURE-CARDS (diensten-grids op servicepagina's) ============ */
.sr-featgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1.4rem; max-width: 1240px; margin: 2.8rem auto 0; }
.sr-featcard { position: relative; overflow: hidden; background: linear-gradient(158deg, #3b3b38 0%, #262624 55%, #1d1d1b 100%); border: 1px solid rgba(255,255,255,.09); border-radius: 14px; padding: 1.7rem 1.55rem; box-shadow: var(--sr-shadow-md); display: flex; flex-direction: column; gap: .55rem; transition: transform .35s var(--ease-out), box-shadow .35s var(--ease-out); }
.sr-featcard:hover { transform: translateY(-4px); box-shadow: var(--sr-shadow-lg); }
.sr-featcard::before { content: ""; position: absolute; top: 0; left: 1.55rem; width: 34px; height: 3px; border-radius: 2px; background: linear-gradient(90deg, var(--sr-accent-light), var(--wp--preset--color--stucco)); }
.sr-featcard h3 { font-family: var(--wp--preset--font-family--display); font-weight: 500; font-size: 1.2rem; line-height: 1.2; color: #fff; margin: .3rem 0 0; }
.sr-featcard p { color: rgba(255,255,255,.66); font-size: .92rem; line-height: 1.55; margin: 0; flex: 1; }
.sr-featcard__price { margin-top: .6rem; font-family: var(--wp--preset--font-family--display); font-weight: 600; font-size: .95rem; color: var(--wp--preset--color--stucco); }
@media (max-width: 600px) { .sr-featgrid { grid-template-columns: 1fr; } }
/* foto-achtergrond kaarten (diensten-grid) */
.sr-featcard--photo { padding: 0; min-height: 232px; justify-content: flex-end; background-size: cover; background-position: center; border-color: rgba(255,255,255,.12); }
.sr-featcard--photo::before { display: none; }
.sr-featcard--photo .sr-featcard__scrim { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(20,20,18,.12) 0%, rgba(20,20,18,.5) 52%, rgba(18,18,16,.9) 100%); }
.sr-featcard--photo .sr-featcard__body { position: relative; z-index: 1; padding: 1.5rem 1.45rem; display: flex; flex-direction: column; gap: .45rem; }
.sr-featcard--link { text-decoration: none; color: inherit; cursor: pointer; }
.sr-featcard--link:hover { text-decoration: none; }
.sr-featcard__go { position: absolute; top: 1rem; right: 1rem; z-index: 2; width: 32px; height: 32px; display: grid; place-items: center; border-radius: 50%; background: rgba(255,255,255,.16); color: #fff; opacity: 0; transform: translateY(-5px); transition: opacity .3s var(--ease-out), transform .3s var(--ease-out), background-color .3s var(--ease-out); }
.sr-featcard--link:hover .sr-featcard__go { opacity: 1; transform: none; }
.sr-featcard--link:hover .sr-featcard__go { background: var(--wp--preset--color--accent); }
.sr-featcard__go svg { width: 15px; height: 15px; }
/* icoon-kaarten (voordelen-grid) met faint watermark */
.sr-featcard--icon::before { display: none; }
.sr-featcard--icon .sr-featcard__icon { position: absolute; top: 1.2rem; right: 1.3rem; width: 58px; height: 58px; color: rgba(255,255,255,.14); pointer-events: none; }
.sr-featcard--icon .sr-featcard__icon svg { width: 100%; height: 100%; }
.sr-featcard--icon h3 { margin-top: .2rem; }

/* ============ LEVERTIJDEN-TABEL ============ */
.sr-levtable-wrap { margin-top: 1.6rem; overflow-x: auto; }
.sr-levtable { width: 100%; border-collapse: collapse; font-size: .92rem; }
.sr-levtable th, .sr-levtable td { text-align: left; padding: .8rem .9rem; border-bottom: 1px solid var(--wp--preset--color--line); vertical-align: top; }
.sr-levtable thead th { font-family: var(--wp--preset--font-family--display); font-weight: 600; color: var(--wp--preset--color--contrast); border-bottom: 2px solid var(--wp--preset--color--contrast); }
.sr-levtable td:first-child { font-weight: 600; color: var(--wp--preset--color--contrast); }
.sr-levtable td:nth-child(2) { color: var(--wp--preset--color--accent); white-space: nowrap; }
.sr-levtable td { color: var(--wp--preset--color--contrast-2); }

/* ============ TESTIMONIAL-QUOTES ============ */
.sr-quotes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; }
@media (max-width: 820px) { .sr-quotes { grid-template-columns: 1fr; max-width: 480px; margin-left: auto; margin-right: auto; } }
.sr-quote { margin: 0; background: var(--wp--preset--color--base-2); border: 1px solid var(--wp--preset--color--line); border-radius: 12px; padding: 1.6rem 1.5rem; box-shadow: var(--sr-shadow-sm, 0 1px 3px rgba(48,48,48,.06)); position: relative; }
.sr-quote::before { content: "\201C"; position: absolute; top: .2rem; left: .9rem; font-family: var(--wp--preset--font-family--display); font-size: 3.2rem; line-height: 1; color: color-mix(in srgb, var(--wp--preset--color--accent) 26%, transparent); }
.sr-quote blockquote { margin: 0; padding-top: 1.2rem; font-size: .98rem; line-height: 1.6; color: var(--wp--preset--color--contrast-2); font-style: italic; }

/* ============ CHECK-LIST (met vinkjes) ============ */
.sr-check-list { list-style: none; margin: 1.1rem 0 0; padding: 0; display: grid; gap: .7rem; }
.sr-check-list li { position: relative; padding-left: 2rem; line-height: 1.55; }
.sr-check-list li::before { content: ""; position: absolute; left: 0; top: .15em; width: 1.25rem; height: 1.25rem; border-radius: 50%; background: color-mix(in srgb, var(--wp--preset--color--accent) 14%, transparent); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M5 12.5 10 17.5 19 7' stroke='%233E5240' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: center; background-size: .85rem; }
.sr-check-list li strong { color: var(--wp--preset--color--contrast); font-weight: 600; }

/* ============ PRIJSKAARTEN ============ */
.sr-price-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; max-width: 1240px; margin: var(--wp--preset--spacing--40) auto 0; align-items: start; }
@media (max-width: 900px) { .sr-price-grid { grid-template-columns: 1fr; max-width: 440px; } }
.sr-price { position: relative; background: var(--wp--preset--color--base); border: 1px solid var(--wp--preset--color--line); border-radius: 12px; overflow: hidden; box-shadow: var(--sr-shadow-md); display: flex; flex-direction: column; transition: transform .35s var(--ease-out), box-shadow .35s var(--ease-out); }
.sr-price:hover { transform: translateY(-4px); box-shadow: var(--sr-shadow-lg); }
.sr-price--pop { box-shadow: var(--sr-shadow-lg), var(--sr-glow); }
.sr-price--pop:hover { box-shadow: var(--sr-shadow-lg), var(--sr-glow-strong); }
.sr-price__head { background: var(--wp--preset--color--contrast); color: #fff; text-align: center; padding: 1.15rem 1rem; font-family: var(--wp--preset--font-family--display); font-size: 1.55rem; font-weight: 400; line-height: 1.15; }
.sr-price__ribbon { position: absolute; top: 21px; right: -46px; width: 170px; text-align: center; transform: rotate(45deg); background: var(--wp--preset--color--accent); color: #fff; font-family: var(--wp--preset--font-family--display); font-size: .66rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; padding: .34rem 0; z-index: 2; box-shadow: 0 2px 6px rgba(0,0,0,.25); }
.sr-price__body { padding: 2rem 1.6rem; text-align: center; display: flex; flex-direction: column; flex-grow: 1; }
.sr-price__amount { font-family: var(--wp--preset--font-family--display); font-size: 3.4rem; font-weight: 500; line-height: 1; color: var(--wp--preset--color--contrast); display: inline-flex; align-items: flex-start; justify-content: center; gap: .1em; }
.sr-price__cur { font-size: 1.25rem; margin-top: .35rem; }
.sr-price__old { text-decoration: line-through; color: var(--wp--preset--color--contrast-2); font-size: 1.2rem; font-weight: 400; align-self: center; margin-right: .3rem; }
.sr-price__sub { color: var(--wp--preset--color--contrast-2); font-size: .85rem; margin: .35rem 0 1.4rem; }
.sr-price__list { list-style: none; margin: 0 0 1.6rem; padding: 0; }
.sr-price__list li { display: flex; align-items: center; justify-content: center; gap: .55rem; padding: .72rem .2rem; border-bottom: 1px solid var(--wp--preset--color--line); font-size: .93rem; color: var(--wp--preset--color--contrast); }
.sr-price__list li:first-child { border-top: 1px solid var(--wp--preset--color--line); }
.sr-price__list li::before { content: ""; width: 1.15rem; height: 1.15rem; flex-shrink: 0; border-radius: 50%; border: 1.5px solid var(--wp--preset--color--accent); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M5 12.5 10 17.5 19 7' stroke='%233E5240' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: center; background-size: .7rem; }
.sr-price__cta { position: relative; overflow: hidden; display: block; margin-top: auto; background: var(--wp--preset--color--suede); color: #fff; text-decoration: none; font-family: var(--wp--preset--font-family--body); font-weight: 500; font-size: .74rem; letter-spacing: .1em; text-transform: uppercase; padding: .85rem 1rem; border-radius: 6px; transition: transform .2s var(--ease-out), box-shadow .2s var(--ease-out), background-color .2s var(--ease-out); }
.sr-price__cta:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(107,87,71,.28); }
.sr-price__cta--pop { background: var(--wp--preset--color--accent); }
.sr-price__cta--pop:hover { background: var(--wp--preset--color--accent-dark); box-shadow: 0 8px 20px rgba(62,82,64,.28); }
.sr-price__note { font-size: .78rem; color: var(--wp--preset--color--contrast-2); margin: 1rem 0 0; line-height: 1.4; }

/* ============ SPOTLIGHT (checklist met titels) ============ */
.sr-spotlight { display: grid; gap: 1.6rem; margin-top: 1.8rem; }
.sr-spotlight__item { display: grid; grid-template-columns: auto 1fr; gap: 1rem; align-items: start; }
.sr-spotlight__check { color: var(--wp--preset--color--accent); width: 1.9rem; height: 1.9rem; flex-shrink: 0; margin-top: .1rem; }
.sr-spotlight__check svg { width: 100%; height: 100%; display: block; }
.sr-spotlight__item h3, .sr-spotlight__item h4 { margin: 0 0 .3rem; font-size: 1.25rem; font-weight: 500; color: var(--wp--preset--color--contrast); }
.sr-spotlight__item p { margin: 0; color: var(--wp--preset--color--contrast-2); font-size: .95rem; line-height: 1.55; }

/* ============ FAQ (speels: losse afgeronde kaartjes, groene cirkel-caret) ============ */
.sr-faq { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem 1.8rem; max-width: 1240px; margin-left: auto; margin-right: auto; margin-top: var(--wp--preset--spacing--40); align-items: start; }
@media (max-width: 820px) { .sr-faq { grid-template-columns: 1fr; gap: .8rem; max-width: 620px; } }
.sr-faq__col { display: grid; gap: .8rem; align-content: start; }
.sr-faq__item { border: 1px solid var(--wp--preset--color--line); border-radius: 14px; background: var(--wp--preset--color--base-2); overflow: hidden; transition: background-color .25s var(--ease-out), border-color .25s var(--ease-out), box-shadow .25s var(--ease-out); }
.sr-faq__item:hover { border-color: var(--sr-accent-light); box-shadow: var(--sr-shadow-sm); }
.sr-faq__item[open] { background: var(--wp--preset--color--base-2); border-color: var(--wp--preset--color--line); }
.sr-faq__item > summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: .85rem; padding: 1.05rem 1.2rem; font-family: var(--wp--preset--font-family--display); font-weight: 500; font-size: 1.02rem; color: var(--wp--preset--color--contrast); }
.sr-faq__item > summary::-webkit-details-marker { display: none; }
.sr-faq__item > summary::before { content: ""; flex-shrink: 0; width: 1.8rem; height: 1.8rem; border-radius: 50%; background-color: var(--wp--preset--color--accent); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none'%3E%3Cpath d='M2.5 4.5 6 8l3.5-3.5' stroke='%23ffffff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: center; background-size: .82rem; transition: transform .3s var(--ease-out), background-color .25s var(--ease-out); }
.sr-faq__item[open] > summary { color: var(--wp--preset--color--accent); }
.sr-faq__item[open] > summary::before { transform: rotate(180deg); background-color: color-mix(in srgb, var(--wp--preset--color--accent-dark) 55%, transparent); }
.sr-faq__a { padding: 0 1.2rem 1.15rem 3.75rem; color: var(--wp--preset--color--contrast-2); font-size: .93rem; line-height: 1.6; }
/* rustige open-animatie van de FAQ-kaart */
.sr-faq__item[open] > .sr-faq__a { animation: sr-faq-open .34s var(--ease-out); }
@keyframes sr-faq-open { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .sr-faq__item[open] > .sr-faq__a { animation: none; } }

/* ============ GERELATEERDE ARTIKELEN ============ */
.sr-articles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; max-width: 1240px; margin: var(--wp--preset--spacing--40) auto 0; }
@media (max-width: 820px) { .sr-articles { grid-template-columns: 1fr; max-width: 440px; } }
.sr-article { position: relative; display: flex; flex-direction: column; background: var(--wp--preset--color--base); border: 1px solid var(--wp--preset--color--line); border-radius: 12px; overflow: hidden; text-decoration: none; color: inherit; box-shadow: var(--sr-shadow-sm); transition: transform .35s var(--ease-out), box-shadow .35s var(--ease-out); }
a.sr-article__more { text-decoration: none; }
a.sr-article__more::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.sr-article:hover { transform: translateY(-4px); box-shadow: var(--sr-shadow-lg); }
.sr-article__img { aspect-ratio: 16/10; overflow: hidden; }
.sr-article__img img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .5s var(--ease-out); }
.sr-article:hover .sr-article__img img { transform: scale(1.05); }
.sr-article__body { padding: 1.4rem 1.5rem 1.6rem; display: flex; flex-direction: column; gap: .8rem; flex-grow: 1; }
.sr-article__body h3 { margin: 0; font-size: 1.3rem; font-weight: 500; line-height: 1.25; color: var(--wp--preset--color--contrast); }
.sr-article__more { margin-top: auto; font-family: var(--wp--preset--font-family--body); font-size: .72rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--wp--preset--color--accent); }

/* ============ REVIEWS (gold-gorilla carrousel) ============ */
.sr-reviews { display: flex; flex-direction: column; align-items: center; gap: 1.9rem; margin-top: 1.9rem; }
.sr-reviews--badge { align-items: flex-start; margin-top: 0; }
.sr-hero .sr-reviews--badge { margin-top: 1.6rem; }
/* subtiele glass-badge in de hero - laat de groene CTA het meest opvallen */
.sr-hero .sr-reviews__badge { background: rgba(255,255,255,.09); border: 1px solid rgba(255,255,255,.22); backdrop-filter: saturate(1.2) blur(8px); -webkit-backdrop-filter: saturate(1.2) blur(8px); box-shadow: none; padding: .42rem 1.05rem; }
.sr-hero .sr-reviews__badge .sr-reviews__score { color: #fff; }
.sr-hero .sr-reviews__badge .sr-reviews__count { color: rgba(255,255,255,.85); }
.sr-hero .sr-reviews__badge::after { color: rgba(255,255,255,.8); }
.sr-hero .sr-reviews__badge:hover { background: rgba(255,255,255,.15); border-color: rgba(255,255,255,.36); transform: translateY(-1px); }
.sr-hero .sr-reviews__badge:hover .sr-reviews__count { color: #fff; text-decoration: underline; }
.sr-reviews__badge { display: inline-flex; align-items: center; gap: .55rem; background: var(--wp--preset--color--base-2); border: 1px solid var(--wp--preset--color--line); border-radius: 999px; padding: .5rem 1.2rem; text-decoration: none; box-shadow: var(--sr-shadow-sm); cursor: pointer; transition: border-color .2s var(--ease-out), box-shadow .2s var(--ease-out), transform .2s var(--ease-out); }
.sr-reviews__badge::after { content: "↗"; font-size: .95rem; color: var(--wp--preset--color--accent); margin-left: .1rem; transition: transform .2s var(--ease-out); }
.sr-reviews__badge:hover { border-color: var(--sr-accent-light); box-shadow: var(--sr-shadow-md); transform: translateY(-1px); }
.sr-reviews__badge:hover .sr-reviews__count { color: var(--wp--preset--color--accent); text-decoration: underline; }
.sr-reviews__badge:hover::after { transform: translate(2px, -2px); }
.sr-reviews__badge .sr-reviews__score { font-family: var(--wp--preset--font-family--display); font-weight: 600; font-size: 1.05rem; color: var(--wp--preset--color--contrast); }
.sr-reviews__badge .sr-reviews__stars { color: #E7B008; letter-spacing: .05em; }
.sr-reviews__badge .sr-reviews__count { color: var(--wp--preset--color--contrast-2); font-size: .88rem; }
.sr-reviews-marquee { width: 100%; }
.sr-reviews-marquee .sr-marquee__track { gap: 1.5rem; align-items: stretch; animation-duration: 64s; }
.sr-review { width: 360px; flex-shrink: 0; background: var(--wp--preset--color--base-2); border: 1px solid var(--wp--preset--color--line); border-radius: 12px; padding: 1.4rem 1.6rem; box-shadow: var(--sr-shadow-sm); display: flex; flex-direction: column; gap: .7rem; white-space: normal; }
.sr-review__stars { color: #E7B008; font-size: .92rem; letter-spacing: .08em; }
.sr-review__text { color: var(--wp--preset--color--contrast-2); font-size: .95rem; line-height: 1.6; margin: 0; display: -webkit-box; -webkit-line-clamp: 4; line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
.sr-review__foot { display: flex; align-items: center; justify-content: space-between; gap: .5rem; margin-top: auto; padding-top: .2rem; }
.sr-review__who { display: flex; align-items: center; gap: .6rem; min-width: 0; }
.sr-review__avatar { width: 2.15rem; height: 2.15rem; border-radius: 50%; object-fit: cover; flex-shrink: 0; }
.sr-review__avatar--initial { background: var(--wp--preset--color--accent); color: #fff; display: grid; place-items: center; font-family: var(--wp--preset--font-family--display); font-weight: 600; font-size: .92rem; }
.sr-review__name { font-weight: 600; font-size: .9rem; color: var(--wp--preset--color--contrast); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sr-review__src { display: inline-flex; align-items: center; gap: .35rem; font-size: .8rem; color: var(--wp--preset--color--contrast-2); flex-shrink: 0; }

/* ============ MARQUEE (doorlopende carrousels + drag) ============ */
.sr-marquee { overflow: hidden; position: relative; -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); }
.sr-marquee__track { display: flex; align-items: center; width: max-content; gap: 4rem; animation: sr-marquee 42s linear infinite; }
.sr-marquee:hover .sr-marquee__track { animation-play-state: paused; }
@keyframes sr-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .sr-marquee__track { animation: none; flex-wrap: wrap; justify-content: center; } }
/* JS-gestuurd: sleepbaar met de muis */
.sr-marquee--js { overflow-x: auto; overflow-y: hidden; cursor: grab; scrollbar-width: none; -ms-overflow-style: none; }
.sr-marquee--js::-webkit-scrollbar { display: none; }
.sr-marquee--js.is-dragging { cursor: grabbing; }
.sr-marquee--js .sr-marquee__track { animation: none !important; transform: none !important; user-select: none; }
.sr-marquee img, .sr-marquee a { -webkit-user-drag: none; user-select: none; }
.sr-marquee--full { width: 100vw; max-width: 100vw; margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); }
/* logos */
/* alle content-carrousels op container-breedte (1240), niet full-bleed */
.sr-logos, .sr-renders, .sr-reviews-marquee, .sr-articles-marquee { max-width: 1240px; margin-left: auto; margin-right: auto; }
.sr-logos .sr-marquee__track { gap: 5rem; animation-duration: 40s; }
.sr-logos img { height: 100px; width: auto; max-width: 300px; object-fit: contain; flex-shrink: 0; opacity: .82; transition: opacity .3s var(--ease-out); }
.sr-logos img:hover { opacity: 1; }
/* statische logo-muur (5 per rij) - over-ons opdrachtgevers */
.sr-logo-wall { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 2.4rem clamp(1.6rem, 3vw, 3rem); max-width: 1200px; margin: 3rem auto 0; }
.sr-logo-wall img { width: calc((100% - 4 * clamp(1.6rem, 3vw, 3rem)) / 5); max-width: 200px; height: 74px; object-fit: contain; opacity: .7; filter: grayscale(1); transition: opacity .3s var(--ease-out), filter .3s var(--ease-out); }
.sr-logo-wall img:hover { opacity: 1; filter: grayscale(0); }
@media (max-width: 860px) { .sr-logo-wall img { width: calc((100% - 2 * 1.8rem) / 3); height: 66px; } }
@media (max-width: 520px) { .sr-logo-wall img { width: calc((100% - 1.6rem) / 2); height: 58px; } }
/* renders (2,5 zichtbaar) */
.sr-renders .sr-marquee__track { gap: 1.4rem; animation-duration: 50s; }
.sr-renders img { width: clamp(300px, 30vw, 460px); aspect-ratio: 16/10; object-fit: cover; border-radius: 10px; flex-shrink: 0; }
/* gerelateerde artikelen */
.sr-articles-marquee .sr-marquee__track { gap: 1.5rem; align-items: stretch; animation-duration: 46s; }
.sr-articles-marquee .sr-article { width: 380px; flex-shrink: 0; white-space: normal; }

/* ============ HERO slideshow (3 beelden, rustige crossfade) ============ */
/* links in de hero-tekst: wit met witte onderlijning (niet groen) */
.sr-hero p a, .sr-subhero p a { color: var(--wp--preset--color--base-2); text-decoration: underline; text-decoration-color: var(--wp--preset--color--base-2); text-underline-offset: 3px; transition: opacity .2s var(--ease-out); }
.sr-hero p a:hover, .sr-subhero p a:hover { color: var(--wp--preset--color--base-2); text-decoration: underline; opacity: .8; }
.sr-hero__slides { position: absolute; inset: 0; z-index: 0; overflow: hidden; }
.sr-hero__slides img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 1.8s ease-in-out; }
.sr-hero__slides img.is-active { opacity: 1; }

/* ============ HERO scroll-hint ============ */
.sr-scroll-hint { position: absolute; bottom: 3.1rem; left: 50%; transform: translateX(-50%); z-index: 3; display: block; }
.sr-scroll-hint__mouse { display: block; width: 26px; height: 42px; border: 2px solid rgba(255,255,255,.75); border-radius: 14px; position: relative; }
.sr-scroll-hint__dot { position: absolute; top: 7px; left: 50%; width: 4px; height: 8px; margin-left: -2px; background: #fff; border-radius: 2px; animation: sr-scroll-dot 1.7s var(--ease-out) infinite; }
@keyframes sr-scroll-dot { 0% { opacity: 0; transform: translateY(0); } 25% { opacity: 1; } 55% { opacity: 1; transform: translateY(13px); } 100% { opacity: 0; transform: translateY(15px); } }
@media (prefers-reduced-motion: reduce) { .sr-scroll-hint__dot { animation: none; } }

/* ============ CTA (prefooter) ============ */
.sr-cta { border-radius: 0; margin-bottom: 0 !important; }
.sr-cta .wp-block-cover__inner-container { display: flex; flex-direction: column; align-items: center; gap: .4rem; }
/* pure donkere (zwarte) overlay - geen grijstint, behoudt de warme kleuren */
.sr-cta .wp-block-cover__background { opacity: 1 !important; background: rgba(0,0,0,.64) !important; }
.sr-cta h2, .sr-cta p { text-shadow: 0 2px 16px rgba(0,0,0,.5); }
main.wp-block-group { margin-bottom: 0; }
.sr-footer { margin-top: 0 !important; }
/* geen block-gap tussen top-level regio's (header/main/footer) - verwijdert cream-lijn boven footer */
.wp-site-blocks > * { margin-block-start: 0; margin-block-end: 0; }
/* secties vlak tegen elkaar (geen beige balkje tussen secties/prefooter) - ook binnen post-content (page-full) */
main.wp-block-group > *, main.wp-block-group > .wp-block-post-content > * { margin-block-start: 0 !important; margin-block-end: 0 !important; }

/* ============ FOOTER nieuwsbrief + adressen ============ */
.sr-footer__news { margin-top: 1.9rem; display: flex; flex-direction: column; gap: .55rem; max-width: 340px; }
.sr-footer__news-intro { font-size: .9rem; color: rgba(241,240,235,.7); margin: 0; }
.sr-footer__news-row { display: flex; gap: .5rem; }
.sr-footer__news-row input { flex: 1; min-width: 0; padding: .52rem .85rem; border-radius: 7px; border: 1px solid rgba(241,240,235,.2); background: rgba(241,240,235,.06); color: var(--wp--preset--color--base); font: inherit; font-size: .9rem; }
.sr-footer__news-row input::placeholder { color: rgba(241,240,235,.5); }
.sr-footer__news-row input:focus { outline: none; border-color: var(--wp--preset--color--stucco); }
.sr-footer__news-row button { background: var(--wp--preset--color--accent); color: #fff; border: 0; border-radius: 7px; padding: .52rem 1rem; font-family: var(--wp--preset--font-family--body); font-weight: 500; font-size: .7rem; letter-spacing: .08em; text-transform: uppercase; cursor: pointer; white-space: nowrap; transition: background-color .2s var(--ease-out); }
.sr-footer__news-row button:hover { background: color-mix(in srgb, var(--wp--preset--color--accent) 78%, #fff); }
.sr-footer__sublabel { display: block; margin-top: .9rem; font-family: var(--wp--preset--font-family--display); font-size: .66rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: rgba(241,240,235,.55); }
.sr-footer__legal a { color: var(--wp--preset--color--stucco); text-decoration: none; }
.sr-footer__legal a:hover { text-decoration: underline; }

/* ============ BLOG-INDEX ============ */
.sr-blog-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.8rem; max-width: 1240px; margin: 2.8rem auto 0; }
@media (max-width: 900px) { .sr-blog-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .sr-blog-grid { grid-template-columns: 1fr; } }
.sr-blog-grid .sr-article { width: auto; }
/* paginering */
.sr-pagination { margin-top: 2.6rem; }
.sr-pagination .page-numbers { list-style: none; display: flex; flex-wrap: wrap; gap: .5rem; justify-content: center; padding: 0; margin: 0; }
.sr-pagination .page-numbers li { margin: 0; }
.sr-pagination a.page-numbers, .sr-pagination span.page-numbers { display: inline-flex; align-items: center; justify-content: center; min-width: 2.4rem; height: 2.4rem; padding: 0 .7rem; border-radius: 8px; border: 1px solid var(--wp--preset--color--line); font-size: .9rem; text-decoration: none; color: var(--wp--preset--color--contrast); transition: background-color .2s var(--ease-out), color .2s var(--ease-out), border-color .2s var(--ease-out); }
.sr-pagination a.page-numbers:hover { border-color: var(--wp--preset--color--accent); color: var(--wp--preset--color--accent); }
.sr-pagination span.current { background: var(--wp--preset--color--accent); border-color: var(--wp--preset--color--accent); color: var(--wp--preset--color--base-2); }
.sr-pagination .dots { border: 0; }

/* ============ BLOGPOST (single) ============ */
/* cover-achtergrondbeeld altijd 100% vullen (core block-CSS laadt niet op shortcode-output zoals de blogindex -> voorkomt 2000px overflow op mobiel) */
.wp-block-cover__image-background { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: center center; }
.sr-hero--post { min-height: 56vh; }
/* mobiel: extra ruimte bovenin zodat de eyebrow ("Blog") + titel niet achter de vaste header vallen */
@media (max-width: 782px) { .sr-hero--post { padding-top: 6rem; } }
/* Bedankt-pagina: cover met beeld + donkere laag (witte header blijft leesbaar) */
.sr-thanks { min-height: 88vh; }
.sr-thanks .wp-block-cover__inner-container { max-width: 720px; text-align: center; }
.sr-thanks h1 { color: #fff; }
.sr-thanks .sr-thanks__lead { max-width: 560px; margin: .6rem auto 1.8rem; color: rgba(255,255,255,.88); font-size: 1.05rem; line-height: 1.6; }
.sr-thanks .wp-block-button.is-style-outline .wp-block-button__link { color: #fff; border: 1px solid rgba(255,255,255,.55); background: transparent; }
.sr-thanks .wp-block-button.is-style-outline .wp-block-button__link:hover { border-color: #fff; background: rgba(255,255,255,.12); }
@media (max-width: 782px) { .sr-thanks { min-height: 90vh; } }
/* Cover-ondersteuning voor shortcode-covers (bedankt + CTA): core block-CSS laadt daar niet mee,
   dus overlay-dim + stacking (tekst boven beeld) hier zelf zetten. */
.sr-thanks, .sr-cta { position: relative; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.sr-thanks > .wp-block-cover__background, .sr-cta > .wp-block-cover__background { position: absolute; inset: 0; z-index: 1; }
.sr-thanks > .wp-block-cover__background { background-color: #000; } /* zwarte overlay i.p.v. grijze contrast-kleur */
.sr-thanks > .wp-block-cover__image-background, .sr-cta > .wp-block-cover__image-background { z-index: 0; }
.sr-thanks > .wp-block-cover__inner-container, .sr-cta > .wp-block-cover__inner-container { position: relative; z-index: 2; width: 100%; }
.sr-thanks > .wp-block-cover__background.has-background-dim, .sr-cta > .wp-block-cover__background.has-background-dim { opacity: .5; }
.sr-thanks > .wp-block-cover__background.has-background-dim-70 { opacity: .82; }
.sr-cta > .wp-block-cover__background.has-background-dim-80 { opacity: .8; }

/* Dienst-prijzensecties (shortcodes) — bouwen op de bestaande .sr-price kaartstijl */
.sr-price-secsub { color: var(--wp--preset--color--contrast-2); margin: .5rem auto 0; max-width: 560px; }
.sr-price-grid--2 { grid-template-columns: repeat(2, 1fr); max-width: 840px; }
@media (max-width: 900px) { .sr-price-grid--2 { grid-template-columns: 1fr; max-width: 440px; } }
.sr-price-secnote { font-size: .82rem; color: var(--wp--preset--color--contrast-2); margin: 1.3rem auto 0; max-width: 640px; line-height: 1.5; }
.sr-price-secnote + .sr-price-secnote { margin-top: .3rem; }
.sr-eyebrow--light { color: var(--wp--preset--color--stucco); }
/* leesbare content-kolom */
.wp-block-post-content { font-size: 1.075rem; }
.wp-block-post-content > * { max-width: 52rem; }
.wp-block-post-content > p { line-height: 1.85; margin-block: 1.6rem; color: var(--wp--preset--color--contrast-2); }
.wp-block-post-content > p strong { color: var(--wp--preset--color--contrast); font-weight: 600; }
.wp-block-post-content > p a { color: var(--wp--preset--color--accent); text-decoration: underline; text-underline-offset: 2px; }
.wp-block-post-content > p a:hover { text-decoration: none; }
/* TL;DR-samenvatting bovenaan */
/* Samenvatting bovenaan een artikel: geen streep en geen kader, maar een klein
   kapitaaltjes-label boven de tekst (zelfde behandeling als .sr-eyebrow). */
.wp-block-post-content > blockquote.sr-tldr { border-left: 0; padding: 0; margin: 0 0 2.6rem; font-family: var(--wp--preset--font-family--body); font-style: normal; font-size: 1.15rem; line-height: 1.65; color: var(--wp--preset--color--contrast); }
.wp-block-post-content > blockquote.sr-tldr p { margin: 0; }
.wp-block-post-content > blockquote.sr-tldr strong { display: block; font-family: var(--wp--preset--font-family--display); font-size: .7rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--wp--preset--color--accent); margin-bottom: .55rem; }
.wp-block-post-content > h2 { font-size: 1.75rem; margin-top: 3.4rem; margin-bottom: 1.1rem; }
.wp-block-post-content > h3 { font-size: 1.28rem; margin-top: 2.6rem; margin-bottom: .7rem; }
.wp-block-post-content > .wp-block-list { line-height: 1.75; margin-block: 1.8rem; padding-left: 0; list-style: none; display: grid; gap: .8rem; }
.wp-block-post-content > .wp-block-list li { position: relative; padding-left: 1.7rem; color: var(--wp--preset--color--contrast-2); }
.wp-block-post-content > .wp-block-list li::before { content: ""; position: absolute; left: .1rem; top: .62em; width: .5rem; height: .5rem; border-radius: 50%; background: var(--wp--preset--color--accent); }
.wp-block-post-content .sr-post-img { margin-block: 2.6rem; max-width: 100%; }
.wp-block-post-content .sr-post-img img { width: 100%; border-radius: 14px; box-shadow: var(--sr-shadow-md); }
.wp-block-post-content > .wp-block-quote { border-left: 3px solid var(--wp--preset--color--accent); padding: .3rem 0 .3rem 1.4rem; margin-block: 2.2rem; font-family: var(--wp--preset--font-family--display); font-size: 1.3rem; line-height: 1.5; color: var(--wp--preset--color--contrast); }
.single .wp-block-post-content .sr-faq { max-width: 100%; margin-top: 2rem; }
.single .wp-block-post-content > h2:has(+ .sr-faq) { max-width: 100%; }
/* auteur-zijbalk */
.sr-author { position: sticky; top: 6.5rem; max-width: 270px; margin-left: auto; background: var(--wp--preset--color--base-2); border: 1px solid var(--wp--preset--color--line); border-radius: 16px; padding: 1.8rem 1.5rem; text-align: center; box-shadow: var(--sr-shadow-sm); }
.sr-author__avatar { display: inline-flex; align-items: center; justify-content: center; width: 68px; height: 68px; border-radius: 50%; background: linear-gradient(150deg, var(--sr-accent-light), var(--wp--preset--color--accent-dark)); color: var(--wp--preset--color--base-2); font-family: var(--wp--preset--font-family--display); font-weight: 600; font-size: 1.5rem; letter-spacing: .02em; }
.sr-author__photo { display: block; width: 148px; height: 148px; border-radius: 50%; object-fit: cover; object-position: center 22%; margin: 0 auto; border: 4px solid var(--wp--preset--color--base-2); box-shadow: 0 6px 18px rgba(48,48,48,.16); }
.sr-author__name { font-family: var(--wp--preset--font-family--display); font-weight: 600; font-size: 1.15rem; margin-top: .9rem; color: var(--wp--preset--color--contrast); }
.sr-author__role { font-size: .84rem; letter-spacing: .04em; text-transform: uppercase; color: var(--wp--preset--color--contrast-2); margin-top: .2rem; }
.sr-author__bio { font-size: .92rem; line-height: 1.55; color: var(--wp--preset--color--contrast-2); margin: 1rem 0 1.2rem; }
.sr-author__btn { display: inline-block; background: var(--wp--preset--color--accent); color: var(--wp--preset--color--base-2); text-decoration: none; font-weight: 500; font-size: .95rem; padding: .7rem 1.4rem; border-radius: 6px; transition: background-color .2s var(--ease-out), transform .2s var(--ease-out); }
.sr-author__btn:hover { background: var(--wp--preset--color--accent-dark); transform: translateY(-2px); color: var(--wp--preset--color--base-2); }
@media (max-width: 782px) {
	.sr-author { position: static; margin-top: 2rem; max-width: none; margin-left: 0; margin-right: 0; }
}
.sr-related-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.6rem; max-width: 1240px; margin-left: auto; margin-right: auto; }
@media (max-width: 780px) { .sr-related-grid { grid-template-columns: 1fr; max-width: 460px; } }
.sr-related-grid .sr-article { width: auto; }

/* ============ BLOG E-E-A-T: datum-meta + auteur-box ============ */
.sr-hero--post .sr-postmeta { display: flex; flex-wrap: wrap; align-items: center; gap: .55rem; margin: .7rem 0 0; font-size: .82rem; color: rgba(255,255,255,.82); }
.sr-postmeta__sep { opacity: .45; }
.sr-authorbox { display: flex; gap: 1.4rem; align-items: flex-start; margin: 2.8rem 0 0; padding: 1.6rem 1.7rem; background: var(--wp--preset--color--base-2); border: 1px solid var(--wp--preset--color--line); border-radius: 16px; box-shadow: var(--sr-shadow-sm); max-width: 52rem; }
.sr-authorbox__photo { width: 88px; height: 88px; border-radius: 50%; object-fit: cover; object-position: center 22%; flex-shrink: 0; border: 3px solid var(--wp--preset--color--base-2); box-shadow: 0 4px 14px rgba(48,48,48,.16); }
.sr-authorbox__label { font-family: var(--wp--preset--font-family--display); font-size: .7rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--wp--preset--color--accent); }
.sr-authorbox__name { font-family: var(--wp--preset--font-family--display); font-weight: 600; font-size: 1.18rem; color: var(--wp--preset--color--contrast); margin-top: .2rem; }
.sr-authorbox__role { font-size: .86rem; color: var(--wp--preset--color--contrast-2); margin-top: .1rem; }
.sr-authorbox__bio { font-size: .93rem; line-height: 1.6; color: var(--wp--preset--color--contrast-2); margin: .75rem 0 0; }
.sr-authorbox__meta { font-size: .8rem; color: var(--wp--preset--color--contrast-2); margin: .7rem 0 0; }
.sr-authorbox__meta a { color: var(--wp--preset--color--accent); text-decoration: underline; text-underline-offset: 2px; }
@media (max-width: 600px) { .sr-authorbox { flex-direction: column; gap: 1rem; } }

/* ============ PORTFOLIO (filterbare grid) ============ */
.sr-portfilter { display: flex; flex-wrap: wrap; gap: .6rem; justify-content: center; max-width: 720px; margin: 2.2rem auto 0; }
.sr-portfilter__btn { font-family: var(--wp--preset--font-family--display); font-size: .8rem; font-weight: 500; letter-spacing: .04em; padding: .55rem 1.15rem; border-radius: 999px; border: 1px solid var(--wp--preset--color--line); background: transparent; color: var(--wp--preset--color--contrast-2); cursor: pointer; transition: background-color .2s var(--ease-out), border-color .2s var(--ease-out), color .2s var(--ease-out); }
.sr-portfilter__btn:hover { border-color: var(--wp--preset--color--accent); color: var(--wp--preset--color--accent); }
.sr-portfilter__btn.is-active { background: var(--wp--preset--color--accent); border-color: var(--wp--preset--color--accent); color: #fff; }
.sr-portgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.3rem; max-width: 1240px; margin: 2rem auto 0; }
@media (max-width: 900px) { .sr-portgrid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .sr-portgrid { grid-template-columns: 1fr; } }
.sr-portcard { position: relative; margin: 0; border-radius: 12px; overflow: hidden; aspect-ratio: 4 / 3; box-shadow: var(--sr-shadow-sm); background: var(--wp--preset--color--base-2); }
.sr-portcard__img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .55s var(--ease-out); }
.sr-portcard:hover .sr-portcard__img { transform: scale(1.05); }
.sr-portcard__cap { position: absolute; inset: auto 0 0 0; padding: 1.6rem 1rem .85rem; background: linear-gradient(transparent, rgba(20,20,18,.82)); color: #fff; display: flex; flex-direction: column; gap: .12rem; }
.sr-portcard__type { font-family: var(--wp--preset--font-family--display); font-size: .66rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--wp--preset--color--stucco); }
.sr-portcard__title { font-size: .92rem; font-weight: 500; line-height: 1.25; }

/* portfolio: klikbare kaarten + lightbox */
.sr-portcard { border: 0; padding: 0; cursor: pointer; background: var(--wp--preset--color--base-2); font: inherit; }
.sr-portcard__zoom { position: absolute; top: .7rem; right: .7rem; width: 2rem; height: 2rem; display: grid; place-items: center; border-radius: 50%; background: rgba(20,20,18,.5); color: #fff; opacity: 0; transform: translateY(-4px); transition: opacity .25s var(--ease-out), transform .25s var(--ease-out); pointer-events: none; }
.sr-portcard:hover .sr-portcard__zoom, .sr-portcard:focus-visible .sr-portcard__zoom { opacity: 1; transform: none; }
.sr-portcard__zoom svg { width: 1rem; height: 1rem; }
.sr-portlb { position: fixed; inset: 0; z-index: 200; background: rgba(15,15,14,.93); display: flex; align-items: center; justify-content: center; padding: 5vh 5vw; animation: sr-cookie-in .3s var(--ease-out); }
.sr-portlb[hidden] { display: none; }
.sr-portlb__fig { margin: 0; display: flex; flex-direction: column; align-items: center; gap: .8rem; max-width: 92vw; }
.sr-portlb__img { max-width: 100%; max-height: 78vh; object-fit: contain; border-radius: 8px; box-shadow: 0 20px 60px rgba(0,0,0,.5); }
.sr-portlb__cap { text-align: center; color: #fff; display: flex; flex-direction: column; gap: .12rem; }
.sr-portlb__cat { font-family: var(--wp--preset--font-family--display); font-size: .7rem; letter-spacing: .12em; text-transform: uppercase; color: var(--wp--preset--color--stucco); }
.sr-portlb__title { font-size: 1rem; }
.sr-portlb__close, .sr-portlb__nav { position: absolute; display: grid; place-items: center; background: rgba(255,255,255,.14); color: #fff; border: 0; border-radius: 50%; cursor: pointer; line-height: 1; transition: background-color .2s var(--ease-out); }
.sr-portlb__close:hover, .sr-portlb__nav:hover { background: rgba(255,255,255,.28); }
.sr-portlb__close { top: 1.2rem; right: 1.4rem; width: 2.6rem; height: 2.6rem; font-size: 1.7rem; }
.sr-portlb__nav { top: 50%; transform: translateY(-50%); width: 2.9rem; height: 2.9rem; font-size: 1.9rem; }
.sr-portlb__prev { left: 1.4rem; } .sr-portlb__next { right: 1.4rem; }
@media (max-width: 600px) { .sr-portlb__nav { display: none; } }
.sr-portmore { width: 100%; height: 24px; }

/* Rechterkolom header: taalwisselaar + CTA + mobiele knop op één regel */
.sr-header__end { justify-self: end; display: inline-flex; align-items: center; gap: .55rem; }

/* Taalwisselaar: compacte dropdown in huisstijl (globe + huidige taal + chevron) */
.sr-langsw { position: relative; }
.sr-langsw__btn { display: inline-flex; align-items: center; gap: .34rem; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.18); color: #fff; font-family: var(--wp--preset--font-family--body); font-size: .74rem; font-weight: 600; letter-spacing: .06em; padding: .5rem .68rem; border-radius: 999px; cursor: pointer; line-height: 1; transition: background-color .2s var(--ease-out), border-color .2s var(--ease-out); }
.sr-langsw__btn:hover { background: rgba(255,255,255,.15); border-color: rgba(255,255,255,.3); }
.sr-langsw__globe { opacity: .85; flex-shrink: 0; }
.sr-langsw__caret { opacity: .8; transition: transform .25s var(--ease-out); }
.sr-langsw.is-open .sr-langsw__caret { transform: rotate(180deg); }
.sr-langsw__menu { position: absolute; top: calc(100% + .95rem); right: 0; min-width: 178px; display: flex; flex-direction: column; gap: .18rem; padding: .4rem; background: rgba(32,32,30,.97); backdrop-filter: saturate(1.2) blur(16px); -webkit-backdrop-filter: saturate(1.2) blur(16px); border: 1px solid rgba(255,255,255,.14); border-radius: 14px; box-shadow: 0 14px 36px rgba(20,20,18,.42); opacity: 0; visibility: hidden; transform: translateY(-6px); transition: opacity .22s var(--ease-out), transform .22s var(--ease-out), visibility .22s; z-index: 60; }
.sr-langsw.is-open .sr-langsw__menu { opacity: 1; visibility: visible; transform: translateY(0); }
/* onzichtbare brug: houdt de hover-staat vast over de tussenruimte naar de knop */
.sr-langsw__menu::before { content: ""; position: absolute; bottom: 100%; left: 0; right: 0; height: 1rem; }
.sr-langsw__opt { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .55rem .7rem; border-radius: 9px; text-decoration: none; color: rgba(255,255,255,.82); font-family: var(--wp--preset--font-family--body); font-size: .88rem; font-weight: 500; transition: background-color .18s var(--ease-out), color .18s var(--ease-out); }
.sr-langsw__opt:hover { background: rgba(255,255,255,.08); color: #fff; }
.sr-langsw__opt.is-active { color: #fff; background: rgba(62,82,64,.34); }
.sr-langsw__code { font-size: .72rem; font-weight: 600; letter-spacing: .05em; opacity: .7; }
.sr-langsw__opt.is-active .sr-langsw__code { color: var(--wp--preset--color--accent, #3E5240); opacity: 1; }
@media (max-width: 900px) { .sr-langsw__btn { padding: .46rem .56rem; } }

/* ============ PAGINAMARGE ============
   WordPress trekt .alignfull-blokken met een negatieve marge uit de paginamarge van
   <main>, zodat hun achtergrond van rand tot rand loopt. Zo'n blok hoort die marge
   daarna zelf terug te geven aan zijn inhoud (klasse has-global-padding). Blokken die
   wij in PHP opbouwen hebben die klasse niet, en groepen met een achtergrond krijgen
   in plaats daarvan de kernstandaard van 2.375em. Beide zetten we hier gelijk. */
main .wp-block-group.alignfull:not(.has-global-padding) {
	padding-left: var(--sr-gutter);
	padding-right: var(--sr-gutter);
}
/* Hetzelfde voor cover-blokken (hero's en CTA-balken): de achtergrond en het beeld
   liggen absoluut binnen de cover en blijven dus van rand tot rand, alleen de
   inhoud schuift mee met de paginamarge. */
main .wp-block-cover.alignfull { padding-left: 0; padding-right: 0; }
main .wp-block-cover.alignfull > .wp-block-cover__inner-container {
	padding-left: var(--sr-gutter);
	padding-right: var(--sr-gutter);
}

/* Formulier op beige: subtiel randje al gezet op de velden; borg centrering van knop-groepen (blog-CTA's) */
.wp-block-buttons.is-content-justification-center { display: flex; flex-wrap: wrap; justify-content: center; }

/* ============ PORTFOLIO-DETAIL (single-project) ============ */
/* Hero: eyebrow "Portfolio" is een link terug naar het archief */
.sr-hero--project .sr-eyebrow a { color: inherit; text-decoration: none; border-bottom: 1px solid transparent; transition: border-color .2s var(--ease-out); }
.sr-hero--project .sr-eyebrow a:hover { border-bottom-color: currentColor; }
.sr-hero--project .sr-projtype { font-size: .95rem; letter-spacing: .02em; margin: .7rem 0 0; color: rgba(255,255,255,.86); }

/* Het beeld: zo groot als de kolom toelaat, eigen beeldverhouding, niet gecropt */
.sr-projfig { margin: 0; }
.sr-projfig__img { display: block; width: 100%; height: auto; border-radius: 14px; box-shadow: var(--sr-shadow-md); background: var(--wp--preset--color--base-2); }

/* Projecttekst onder het beeld */
.sr-projabout { font-size: 1.75rem; margin: 2.8rem 0 1rem; max-width: 52rem; }
.sr-projtext { font-size: 1.075rem; max-width: 52rem; }
.sr-projtext p { line-height: 1.85; margin-block: 1.2rem; color: var(--wp--preset--color--contrast-2); }
.sr-projtext p:first-child { margin-top: 0; }
.sr-projtext strong { color: var(--wp--preset--color--contrast); font-weight: 600; }
.sr-projtext a { color: var(--wp--preset--color--accent); text-decoration: underline; text-underline-offset: 2px; }
.sr-projtext a:hover { text-decoration: none; }

/* Specificaties */
.sr-projspecs { display: flex; flex-wrap: wrap; gap: 0 2.6rem; margin: 2.2rem 0 0; padding: 1.3rem 0 0; border-top: 1px solid var(--wp--preset--color--line); max-width: 52rem; }
.sr-projspecs > div { margin: .5rem 0; }
.sr-projspecs dt { font-family: var(--wp--preset--font-family--display); font-size: .68rem; font-weight: 600; letter-spacing: .13em; text-transform: uppercase; color: var(--wp--preset--color--contrast-2); }
.sr-projspecs dd { margin: .25rem 0 0; font-size: .98rem; color: var(--wp--preset--color--contrast); }
.sr-projspecs dd a { color: var(--wp--preset--color--accent); text-decoration: none; border-bottom: 1px solid currentColor; }
.sr-projspecs dd a:hover { border-bottom-color: transparent; }

/* Makerskaart in de zijbalk */

/* Gerelateerd werk: kaarten met bijschrift, echte links */
.sr-portgrid--more { margin-top: 2.4rem; }
a.sr-portcard { display: block; text-decoration: none; color: inherit; }
a.sr-portcard .sr-portcard__cap { opacity: 0; transition: opacity .3s var(--ease-out); }
a.sr-portcard:hover .sr-portcard__cap, a.sr-portcard:focus-visible .sr-portcard__cap { opacity: 1; }

/* Portfolio-archief: kaart is nu een link naar de projectpagina, het loepje opent de lightbox */
.sr-portcard__link { position: absolute; inset: 0; z-index: 1; }
.sr-portcard__zoom { z-index: 2; border: 0; padding: 0; cursor: zoom-in; pointer-events: auto; }
.sr-portcard:hover .sr-portcard__img { transform: scale(1.05); }

@media (max-width: 782px) {
	.sr-projabout { font-size: 1.5rem; margin-top: 2.2rem; }
	.sr-projspecs { gap: 0 1.8rem; }
}

/* Eén hero-hoogte voor blog, portfolio-archief, portfolio-item, contact en offerte.
   !important omdat de min-height als inline stijl uit de blokmarkup komt. */
.sr-hero--post,
.sr-hero--project,
.sr-subhero { min-height: var(--sr-hero-h) !important; }

/* Projecthero loopt door tot achter de header; titel houdt afstand van de zwevende balk */
.sr-hero--project { padding-top: 5rem; }
.sr-hero--project .wp-block-cover__image-background { object-position: center center; }
@media (max-width: 782px) {
	.sr-hero--project { padding-top: 6.5rem; }
	/* Op mobiel staan de brede auteursbox en de zijbalkkaart onder elkaar; toon er één.
	   We houden de auteursbox: die draagt de bio, de publicatiedatum en de link naar
	   Over ons. De projectpagina's hebben geen auteursbox, dus daar blijft de kaart staan. */
	.sr-author:not(.sr-author--project) { display: none; }
	/* Makerskaart op mobiel net zo breed als de rest van de content */
	.sr-author--project { max-width: none; margin-left: 0; margin-right: 0; }
}