/*
Theme Name: Hodzic — Atelier
Theme URI: https://hodzicadministratie.nl
Author: Hodzic Administratie & Advies
Author URI: https://hodzicadministratie.nl
Description: Zelfstandig Atelier-thema voor Hodzic Administratie & Advies. Met sfeervolle fotografie, interactieve keuzehulp, toegankelijke lichte en donkere weergave en technische SEO.
Version: 3.2.0
Requires at least: 6.0
Requires PHP: 7.4
Tested up to: 6.6
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: hodzic
*/

/* ==========================================================================
   Hodzic Administratie & Advies — Design tokens & basisstijlen
   ========================================================================== */

:root {
  /* Merkkleuren */
  --cream: #f2e4d4; /* achtergrond */
  --ink: #483936; /* primaire tekst */
  --text-brown: #7d5b44; /* secundaire tekst */
  --caramel: #b78a64; /* merkkleur — nooit als tekstkleur */
  --petrol: #0f5f55; /* accent / actie */
  --petrol-deep: #0a443d; /* hover / actief */
  --sand: #ead9c4; /* vlakken, kaarten */
  --line: #dfcdb6; /* randen, scheidingslijnen */
  --white: #ffffff;

  /* Uitbreidingskleuren uit de huisstijlgids */
  --espresso: #332724; /* donker vlak — donkere websitesecties */
  --terracotta: #96543a; /* "let op" zonder alarmrood */
  --terracotta-soft: #f6e7df; /* zachte achtergrond bij terracotta */
  --sage: #b8c9ac; /* positieve bevestiging */
  --sage-soft: #eef2ea; /* zachte achtergrond bij salie */

  /* Typografie */
  --font-display: "Outfit", "Avenir Next", "Segoe UI", system-ui, sans-serif;
  --font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  /* Layout */
  --container-w: 1180px;
  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 24px;
  --shadow-sm: 0 1px 2px rgba(72, 57, 54, 0.06), 0 1px 1px rgba(72, 57, 54, 0.04);
  --shadow-md: 0 12px 32px -12px rgba(72, 57, 54, 0.28);

  color-scheme: light;
}

/* ==========================================================================
   Donkere modus
   --------------------------------------------------------------------------
   Zelfde huisstijl, omgekeerd: Espresso als ondergrond, crème als tekst. Alle
   kleuren komen uit de huisstijlgids — de gids noemt Espresso zelf al
   "donker vlak voor donkere websitesecties".

   Werkt door het overschrijven van dezelfde tokens, dus elke regel verderop in
   dit bestand volgt vanzelf. Er is niets dubbel gedefinieerd.

   Eén uitzondering die wél een eigen regel nodig heeft: petrol wordt zowel als
   knopvlak als als tekstkleur gebruikt. Donkerpetrol op espresso is
   onleesbaar, dus in het donker wordt petrol een lichtere tint mét donkere
   tekst op de knop, in plaats van wit.

   De schakelaar zet data-thema op <html>. Staat er niets, dan volgt de site de
   voorkeur van het besturingssysteem (zie assets/js/main.js).
   ========================================================================== */
[data-thema="donker"] {
  --cream: #332724; /* pagina-ondergrond — Espresso */
  --sand: #3d2f2b; /* vlakken en kaarten, iets lichter */
  --white: #453531; /* wat in het licht wit was: de bovenste laag */
  --ink: #f2e4d4; /* hoofdtekst — crème, 12,4:1 op espresso */
  --text-brown: #cbb49e; /* secundaire tekst, warm en licht genoeg */
  --caramel: #c79a74; /* merkkleur, iets opgelicht zodat hij niet wegvalt */
  --line: #4e3d38; /* randen en scheidingslijnen */
  --petrol: #4fb0a0; /* actie — opgelicht, draagt donkere tekst */
  --petrol-deep: #6cc4b5; /* hover: in het donker lichter in plaats van dieper */
  --sand-soft: #3d2f2b;
  --terracotta: #d08b6b;
  --terracotta-soft: #4a332a;
  --sage: #8ea881;
  --sage-soft: #2f3a2b;

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4), 0 1px 1px rgba(0, 0, 0, 0.3);
  --shadow-md: 0 12px 32px -12px rgba(0, 0, 0, 0.7);

  color-scheme: dark;
}

/* In het donker draagt de actieknop donkere tekst op licht petrol. */
[data-thema="donker"] .btn--primary,
[data-thema="donker"] .btn--on-petrol {
  color: #26201d;
}

[data-thema="donker"] .btn--primary:hover {
  color: #26201d;
}

/* De petrol-band blijft een vlak, maar met donkere tekst erop. */
[data-thema="donker"] .section--petrol,
[data-thema="donker"] .cta-band {
  color: #26201d;
}

[data-thema="donker"] .section--petrol h2,
[data-thema="donker"] .section--petrol h3,
[data-thema="donker"] .cta-band h2 {
  color: #26201d;
}

[data-thema="donker"] .section--petrol .eyebrow,
[data-thema="donker"] .cta-band .eyebrow {
  color: #26201d;
}

[data-thema="donker"] .section--petrol .eyebrow::before,
[data-thema="donker"] .cta-band .eyebrow::before {
  background: #26201d;
}

/* Foto's zijn in het donker net iets te fel; een fractie temperen scheelt. */
[data-thema="donker"] .photo-frame__img {
  filter: brightness(0.86) saturate(0.94);
}

/* Logo wisselt mee. Twee bestanden, geen herlaadmoment. */
.logo__beeld {
  display: block;
  height: 38px;
  width: auto;
}

.logo--lg .logo__beeld {
  height: 46px;
}

.logo__beeld--donker {
  display: none;
}

[data-thema="donker"] .logo__beeld--licht {
  display: none;
}

[data-thema="donker"] .logo__beeld--donker {
  display: block;
}

/* ==========================================================================
   De themaschakelaar
   ========================================================================== */
.thema-knop {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: transparent;
  color: var(--text-brown);
  padding: 0;
  transition: background 0.2s, color 0.2s, border-color 0.2s;
}

.thema-knop:hover {
  background: var(--sand);
  color: var(--ink);
  border-color: var(--caramel);
}

.thema-knop svg {
  width: 19px;
  height: 19px;
}

/* Zon zichtbaar in het donker (klik = naar licht), maan in het licht. */
.thema-knop__zon {
  display: none;
}

[data-thema="donker"] .thema-knop__zon {
  display: block;
}

[data-thema="donker"] .thema-knop__maan {
  display: none;
}

/* --------------------------------------------------------------------------
   Reset
   -------------------------------------------------------------------------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  min-width: 320px;
  min-height: 100svh;
  background: var(--cream);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img {
  max-width: 100%;
  display: block;
}

a {
  color: inherit;
  text-decoration: none;
}

button {
  font: inherit;
  cursor: pointer;
}

ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

h1,
h2,
h3,
h4 {
  font-family: var(--font-display);
  color: var(--ink);
  font-weight: 500;
  line-height: 1.12;
  margin: 0;
  letter-spacing: -0.01em;
}

p {
  margin: 0;
}

/* Zichtbare focus-status voor toetsenbordgebruik */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
  outline: 2px solid var(--petrol);
  outline-offset: 3px;
  border-radius: 4px;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}

/* --------------------------------------------------------------------------
   Scroll-reveal animatie (zie components/Reveal.tsx)
   -------------------------------------------------------------------------- */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1), transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: opacity, transform;
}

.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Kleine gestaffelde vertraging voor grid-kaarten */
.grid .reveal:nth-child(2) {
  transition-delay: 0.08s;
}
.grid .reveal:nth-child(3) {
  transition-delay: 0.16s;
}
.grid .reveal:nth-child(4) {
  transition-delay: 0.24s;
}

/* Hero laadt direct in bij het openen van de pagina (geen scroll-trigger nodig) */
@keyframes hero-in {
  from {
    opacity: 0;
    transform: translateY(18px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.hero__grid > *:first-child {
  animation: hero-in 0.7s cubic-bezier(0.16, 1, 0.3, 1) both;
}

.hero__grid > *:first-child > * {
  animation: hero-in 0.7s cubic-bezier(0.16, 1, 0.3, 1) both;
}

@media (prefers-reduced-motion: reduce) {
  .hero__grid > *:first-child,
  .hero__grid > *:first-child > * {
    animation: none;
  }
}

/* --------------------------------------------------------------------------
   Layout helpers
   -------------------------------------------------------------------------- */
.container {
  width: 100%;
  max-width: var(--container-w);
  margin-inline: auto;
  padding-inline: 20px;
}

@media (min-width: 768px) {
  .container {
    padding-inline: 32px;
  }
}

.section {
  padding-block: 64px;
}

@media (min-width: 1024px) {
  .section {
    padding-block: 104px;
  }
}

.section--tight {
  padding-block: 40px;
}

@media (min-width: 1024px) {
  .section--tight {
    padding-block: 64px;
  }
}

.section--sand {
  background: var(--sand);
}

.section--petrol {
  background: var(--petrol);
  color: var(--white);
}

.section--petrol h2,
.section--petrol h3 {
  color: var(--white);
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--text-brown);
}

.eyebrow::before {
  content: "";
  width: 18px;
  height: 2px;
  background: var(--caramel);
  display: inline-block;
}

.section--petrol .eyebrow {
  color: var(--sand);
}
.section--petrol .eyebrow::before {
  background: var(--white);
}

.section-head {
  max-width: 640px;
  margin-bottom: 40px;
}

.section-head h2 {
  font-size: clamp(28px, 3.4vw, 40px);
  margin-top: 12px;
}

.section-head p {
  margin-top: 16px;
  color: var(--text-brown);
  font-size: 17px;
}

.section--petrol .section-head p {
  color: rgba(255, 255, 255, 0.82);
}

.eyebrow-lead {
  font-size: 12px;
}

.lede {
  color: var(--text-brown);
  font-size: 18px;
  max-width: 60ch;
}

.text-brown {
  color: var(--text-brown);
}

.grid {
  display: grid;
  gap: 24px;
}

@media (min-width: 768px) {
  .grid--2 {
    grid-template-columns: repeat(2, 1fr);
  }
  .grid--3 {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (min-width: 1024px) {
  .grid--4 {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* --------------------------------------------------------------------------
   Buttons
   -------------------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border-radius: 999px;
  padding: 13px 26px;
  font-weight: 600;
  font-size: 15px;
  border: 1px solid transparent;
  transition: background-color 0.18s ease, color 0.18s ease, border-color 0.18s ease,
    transform 0.2s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.2s ease;
  white-space: nowrap;
}

.btn svg {
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

.btn:hover svg {
  transform: translateX(3px);
}

.btn:hover {
  transform: translateY(-2px);
}

.btn:active {
  transform: translateY(0);
}

.btn--primary {
  background: var(--petrol);
  color: var(--white);
}
.btn--primary:hover {
  background: var(--petrol-deep);
  box-shadow: 0 10px 24px -10px rgba(15, 95, 85, 0.55);
}

.btn--ghost {
  background: transparent;
  color: var(--ink);
  border-color: var(--line);
}
.btn--ghost:hover {
  border-color: var(--caramel);
  background: var(--sand);
}

.btn--on-petrol {
  background: var(--white);
  color: var(--petrol-deep);
}
.btn--on-petrol:hover {
  background: var(--sand);
}

.btn--full {
  width: 100%;
}

.btn--sm {
  padding: 10px 18px;
  font-size: 14px;
}

/* --------------------------------------------------------------------------
   Cards
   -------------------------------------------------------------------------- */
.card {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  padding: 28px;
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.3s ease,
    box-shadow 0.3s ease;
}

.card:hover {
  transform: translateY(-4px);
  border-color: var(--caramel);
  box-shadow: var(--shadow-sm);
}

.card--sand {
  background: var(--sand);
  border-color: var(--line);
}

.card-icon {
  width: 44px;
  height: 44px;
  border-radius: 10px;
  background: var(--sand);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 18px;
  flex-shrink: 0;
  transition: background-color 0.3s ease, transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.card:hover .card-icon {
  background: var(--petrol);
  transform: scale(1.08);
}

.card:hover .card-icon svg {
  stroke: var(--white);
}

.card-icon svg {
  width: 22px;
  height: 22px;
  stroke: var(--petrol);
}

.card h3 {
  font-size: 19px;
  margin-bottom: 8px;
}

.card p {
  color: var(--text-brown);
  font-size: 15px;
}

/* --------------------------------------------------------------------------
   Header
   -------------------------------------------------------------------------- */
/* Meebewegende header.
   Bovenaan de pagina smelt hij samen met de hero: geen eigen achtergrond, geen
   rand, geen schaduw. Zodra je scrolt komt hij als vlak omhoog met een
   achtergrond en een fijne rand, zodat de tekst eronder leesbaar blijft.
   assets/js/main.js zet daarvoor de class .site-header--scrolled. */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: transparent;
  border-bottom: 1px solid transparent;
  transition: background-color 0.28s ease, border-color 0.28s ease,
    box-shadow 0.28s ease, backdrop-filter 0.28s ease;
}

.site-header--scrolled {
  background: rgba(242, 228, 212, 0.92);
  backdrop-filter: blur(8px);
  border-bottom-color: var(--line);
  box-shadow: 0 6px 24px -18px rgba(72, 57, 54, 0.55);
}

/* Zonder JavaScript blijft de header gewoon zichtbaar met achtergrond. */
.no-js .site-header {
  background: rgba(242, 228, 212, 0.92);
  border-bottom-color: var(--line);
}

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-block: 14px;
  gap: 16px;
}

.nav-desktop {
  display: none;
}

@media (min-width: 900px) {
  .nav-desktop {
    display: flex;
    align-items: center;
    gap: 8px;
  }
}

.nav-desktop a {
  position: relative;
  padding: 9px 14px;
  border-radius: 999px;
  font-size: 15px;
  font-weight: 500;
  color: var(--ink);
  transition: background-color 0.2s ease, color 0.2s ease;
}

.nav-desktop a:hover {
  background: var(--sand);
}

.nav-desktop a::after {
  content: "";
  position: absolute;
  left: 14px;
  right: 14px;
  bottom: 4px;
  height: 2px;
  border-radius: 2px;
  background: var(--caramel);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.25s ease;
}

.nav-desktop a:hover::after {
  transform: scaleX(1);
}

.nav-desktop a.active::after {
  display: none;
}

.nav-desktop a.active {
  background: var(--ink);
  color: var(--cream);
}

.header-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

.header-cta {
  display: none;
}

@media (min-width: 900px) {
  .header-cta {
    display: inline-flex;
  }
}

.menu-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: 10px;
  border: 1px solid var(--line);
  background: var(--white);
}

@media (min-width: 900px) {
  .menu-toggle {
    display: none;
  }
}

.menu-toggle svg {
  width: 20px;
  height: 20px;
  stroke: var(--ink);
}

.mobile-menu {
  position: fixed;
  inset: 0;
  top: 0;
  z-index: 60;
  background: var(--cream);
  display: none;
  flex-direction: column;
  padding: 20px;
}

/* Toont het menu; in de WordPress-versie blijft de markup altijd in de
   pagina en wisselt JS (assets/js/main.js) alleen deze class - vandaar de
   losse "open"-status i.p.v. het React-conditioneel renderen. Bewust als
   sibling ná </header> geplaatst (zie header.php): .site-header gebruikt
   backdrop-filter, wat een containing block voor position:fixed vormt en
   het menu anders verkeerd zou positioneren. */
.mobile-menu.is-open {
  display: flex;
  animation: fade-in 0.18s ease;
}

@keyframes fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.mobile-menu__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 32px;
}

.mobile-menu nav {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.mobile-menu nav a {
  padding: 16px 6px;
  font-family: var(--font-display);
  font-size: 26px;
  border-bottom: 1px solid var(--line);
  color: var(--ink);
  transition: padding-left 0.2s ease, color 0.2s ease;
}

.mobile-menu nav a:hover,
.mobile-menu nav a:focus-visible {
  padding-left: 12px;
  color: var(--petrol);
}

.mobile-menu__footer {
  margin-top: auto;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.mobile-menu__footer .btn {
  width: 100%;
}

body.no-scroll {
  overflow: hidden;
}

/* --------------------------------------------------------------------------
   Logo
   -------------------------------------------------------------------------- */
.logo {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

.logo__mark {
  width: 34px;
  height: 34px;
  flex-shrink: 0;
}

.logo__text {
  display: flex;
  flex-direction: column;
  line-height: 1.05;
}

.logo__name {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 20px;
  color: var(--ink);
}

.logo__tagline {
  font-size: 10px;
  letter-spacing: 0.06em;
  color: var(--text-brown);
  text-transform: uppercase;
}

.logo--lg .logo__mark {
  width: 52px;
  height: 52px;
}
.logo--lg .logo__name {
  font-size: 28px;
}
.logo--lg .logo__tagline {
  font-size: 12px;
}

/* --------------------------------------------------------------------------
   Hero
   -------------------------------------------------------------------------- */
.hero {
  padding-block: 56px 40px;
  position: relative;
  overflow: hidden;
}

@media (min-width: 1024px) {
  .hero {
    padding-block: 88px 60px;
  }
}

.hero__grid {
  display: grid;
  gap: 40px;
  align-items: center;
}

@media (min-width: 960px) {
  .hero__grid {
    grid-template-columns: 1.05fr 0.95fr;
    gap: 48px;
  }
}

.hero h1 {
  font-size: clamp(34px, 5.2vw, 58px);
  margin-top: 16px;
}

.hero__lede {
  margin-top: 20px;
  font-size: 18px;
  color: var(--text-brown);
  max-width: 52ch;
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 32px;
}

.hero__trust {
  margin-top: 40px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.pill {
  display: inline-flex;
  align-items: center;
  padding: 7px 14px;
  border-radius: 999px;
  background: var(--white);
  border: 1px solid var(--line);
  font-size: 13px;
  font-weight: 500;
  color: var(--text-brown);
}

.hero__visual {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  aspect-ratio: 4 / 5;
  background: linear-gradient(155deg, var(--sand) 0%, var(--cream) 60%);
  border: 1px solid var(--line);
}

@media (min-width: 960px) {
  .hero__visual {
    aspect-ratio: 1 / 1.02;
  }
}

.photo-placeholder {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  text-align: center;
  color: var(--text-brown);
  padding: 24px;
}

.photo-placeholder svg {
  width: 40px;
  height: 40px;
  stroke: var(--caramel);
}

.photo-placeholder span {
  font-size: 13px;
  font-weight: 500;
  max-width: 26ch;
}

/* --------------------------------------------------------------------------
   Fotolijst voor echte (stock)foto's
   -------------------------------------------------------------------------- */
.photo-frame {
  background: var(--sand);
}

.photo-frame__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.photo-frame:hover .photo-frame__img {
  transform: scale(1.045);
}

/* --------------------------------------------------------------------------
   H-motief — signature decoratief element (verwijst naar het beeldmerk)
   -------------------------------------------------------------------------- */
.h-motif {
  color: var(--caramel);
  opacity: 0.9;
}

.h-divider {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-block: 8px 0;
}

.h-divider__line {
  height: 1px;
  flex: 1;
  background: var(--line);
}

/* --------------------------------------------------------------------------
   Stappen (proces) — genummerd omdat het echt een volgorde is
   -------------------------------------------------------------------------- */
.steps {
  display: grid;
  gap: 28px;
  counter-reset: step;
}

@media (min-width: 768px) {
  .steps {
    grid-template-columns: repeat(3, 1fr);
  }
}

.step {
  position: relative;
  padding-top: 8px;
  border-top: 2px solid var(--caramel);
}

.step__index {
  font-family: var(--font-display);
  font-size: 15px;
  color: var(--caramel);
  font-weight: 600;
  margin-bottom: 14px;
  display: block;
}

.step h3 {
  font-size: 19px;
  margin-bottom: 8px;
}

.step p {
  color: var(--text-brown);
  font-size: 15px;
}

/* --------------------------------------------------------------------------
   Pricing / pakketten
   -------------------------------------------------------------------------- */
.pricing-grid {
  display: grid;
  gap: 24px;
}

@media (min-width: 860px) {
  .pricing-grid {
    grid-template-columns: repeat(3, 1fr);
    align-items: stretch;
  }
}

.pricing-card {
  display: flex;
  flex-direction: column;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 32px 26px;
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.3s ease;
}

.pricing-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-md);
}

.pricing-card--featured:hover {
  transform: translateY(-14px);
}

.pricing-card--featured {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--cream);
  transform: translateY(-8px);
  box-shadow: var(--shadow-md);
}

@media (max-width: 859px) {
  .pricing-card--featured {
    transform: none;
  }
}

.pricing-card--featured h3,
.pricing-card--featured .pricing-card__price {
  color: var(--cream);
}

.pricing-card--featured .pricing-card__desc {
  color: rgba(242, 228, 212, 0.75);
}

.pricing-card--featured .pricing-card__price small {
  color: rgba(242, 228, 212, 0.7);
}

.pricing-card__badge {
  align-self: flex-start;
  background: var(--petrol);
  color: var(--white);
  font-size: 12px;
  font-weight: 600;
  padding: 4px 12px;
  border-radius: 999px;
  margin-bottom: 16px;
}

[data-thema="donker"] .pricing-card__badge {
  color: #26201d;
}

/* --------------------------------------------------------------------------
   Tweede uitlichting: "meeste waarde"
   --------------------------------------------------------------------------
   Een andere rand dan de aanbevolen kaart, zodat de twee naast elkaar allebei
   opvallen zonder met elkaar te concurreren. De aanbevolen kaart is donker en
   springt naar voren; deze houdt de lichte achtergrond en krijgt een karamel
   rand met een streepje boven — rustiger, maar wel duidelijk anders dan de
   twee gewone kaarten ernaast.
   -------------------------------------------------------------------------- */
.pricing-card--waarde {
  border: 2px solid var(--caramel);
  position: relative;
  box-shadow: var(--shadow-sm);
}

.pricing-card--waarde::before {
  content: "";
  position: absolute;
  inset: -2px -2px auto -2px;
  height: 5px;
  background: var(--caramel);
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}

.pricing-card--waarde:hover {
  transform: translateY(-10px);
  box-shadow: var(--shadow-md);
}

.pricing-card__badge--waarde {
  background: var(--caramel);
  color: #2a211c;
}

[data-thema="donker"] .pricing-card__badge--waarde {
  color: #26201d;
}

.pricing-card h3 {
  font-size: 22px;
}

.pricing-card__desc {
  color: var(--text-brown);
  font-size: 14px;
  margin-top: 6px;
  min-height: 40px;
}

.pricing-card__price {
  font-family: var(--font-display);
  font-size: 28px;
  margin-top: 20px;
  color: var(--ink);
}

.pricing-card__price small {
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 500;
  color: var(--text-brown);
  margin-left: 4px;
}

.pricing-card ul {
  margin-top: 24px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  flex: 1;
}

.pricing-card li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 14px;
  color: var(--text-brown);
}

.pricing-card li svg {
  width: 16px;
  height: 16px;
  stroke: var(--petrol);
  flex-shrink: 0;
  margin-top: 3px;
}

/* Deze regel moet ná de algemene .pricing-card li-regel staan, anders wint
   (bij gelijke CSS-specificiteit) de latere bruine basisstijl altijd - dat
   was precies de "bruin op bruin"-bug in de Groei-kaart. */
.pricing-card--featured li {
  color: var(--cream);
}

.pricing-card--featured li svg {
  stroke: var(--cream);
}

.pricing-card .btn {
  margin-top: 28px;
}

.pricing-note {
  margin-top: 28px;
  font-size: 14px;
  color: var(--text-brown);
}

/* --------------------------------------------------------------------------
   CTA band
   -------------------------------------------------------------------------- */
.cta-band {
  border-radius: var(--radius-lg);
  background: var(--petrol);
  color: var(--white);
  padding: 48px 32px;
  display: flex;
  flex-direction: column;
  gap: 24px;
  align-items: flex-start;
  justify-content: space-between;
  position: relative;
  overflow: hidden;
}

@media (min-width: 860px) {
  .cta-band {
    flex-direction: row;
    align-items: center;
    padding: 56px 56px;
  }
}

.cta-band h2 {
  color: var(--white);
  font-size: clamp(24px, 3vw, 32px);
  max-width: 24ch;
}

.cta-band p {
  color: rgba(255, 255, 255, 0.8);
  margin-top: 10px;
  max-width: 42ch;
}

/* Op de petrol achtergrond moet de eyebrow-tekst licht zijn, anders is
   het (bijna) onleesbaar bruin-op-donkerbruin */
.cta-band .eyebrow {
  color: var(--sand);
}

.cta-band .eyebrow::before {
  background: var(--white);
}

/* --------------------------------------------------------------------------
   Formulier (contact — visueel, niet functioneel)
   -------------------------------------------------------------------------- */
.form-grid {
  display: grid;
  gap: 18px;
}

@media (min-width: 640px) {
  .form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px;
  }
}

.field {
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.field label {
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
}

.field .optional {
  font-weight: 400;
  color: var(--text-brown);
}

.field input,
.field textarea,
.field select {
  font: inherit;
  padding: 12px 14px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--line);
  background: var(--white);
  color: var(--ink);
}

.field input::placeholder,
.field textarea::placeholder {
  color: #a99686;
}

.field textarea {
  resize: vertical;
  min-height: 130px;
}

.form-disclaimer {
  font-size: 12.5px;
  color: var(--text-brown);
  margin-top: 4px;
}

/* Formuliermeldingen en veldfouten.
   Kleuren uit de uitbreidingsset van de huisstijlgids: terracotta als
   "let op" zonder alarmrood, salie voor een positieve bevestiging. */
.form-melding {
  border-radius: var(--radius-sm);
  padding: 14px 16px;
  margin-bottom: 20px;
  font-size: 14.5px;
  line-height: 1.5;
  border-left: 3px solid;
}

.form-melding--goed {
  background: var(--sage-soft);
  border-left-color: var(--sage);
  color: var(--ink);
}

.form-melding--fout {
  background: var(--terracotta-soft);
  border-left-color: var(--terracotta);
  color: var(--ink);
}

.field__fout {
  display: block;
  margin-top: 6px;
  font-size: 12.5px;
  color: var(--terracotta);
}

/* --------------------------------------------------------------------------
   Verificatievakje — de vertrouwde "ik ben geen robot", maar van onszelf
   --------------------------------------------------------------------------
   Ziet eruit als de bekende controle en voelt daardoor officieel, maar er gaat
   geen enkel gegeven naar een externe partij en er wordt geen cookie gezet.
   De echte controle zit erachter: de tijd tussen laden en verzenden.
   -------------------------------------------------------------------------- */
.verificatie {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 14px 16px;
  box-shadow: var(--shadow-sm);
}

.verificatie--fout {
  border-color: var(--terracotta);
}

.verificatie__vak {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  cursor: pointer;
  font-size: 15px;
  color: var(--ink);
  margin: 0;
}

/* Het echte vakje verbergen, maar wél bereikbaar houden voor toetsenbord
   en schermlezer — vandaar opacity 0 in plaats van display:none. */
.verificatie__vak input[type="checkbox"] {
  position: absolute;
  opacity: 0;
  width: 26px;
  height: 26px;
  margin: 0;
  cursor: pointer;
}

.verificatie__vinkje {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  flex: 0 0 26px;
  border: 2px solid var(--caramel);
  border-radius: 5px;
  background: var(--cream);
  color: transparent;
  transition: background 0.18s, border-color 0.18s, color 0.18s;
}

.verificatie__vinkje svg {
  width: 16px;
  height: 16px;
}

.verificatie__vak input:checked + .verificatie__vinkje {
  background: var(--petrol);
  border-color: var(--petrol);
  color: var(--white);
}

[data-thema="donker"] .verificatie__vak input:checked + .verificatie__vinkje {
  color: #26201d;
}

.verificatie__vak input:focus-visible + .verificatie__vinkje {
  outline: 2px solid var(--petrol);
  outline-offset: 3px;
}

.verificatie__merk {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  font-size: 10px;
  line-height: 1.2;
  color: var(--text-brown);
  text-align: center;
  opacity: 0.75;
  flex-shrink: 0;
}

.verificatie__merk .logo__mark {
  width: 22px;
  height: 22px;
}

@media (max-width: 420px) {
  .verificatie__merk span {
    display: none;
  }
}

.field input[aria-invalid="true"],
.field textarea[aria-invalid="true"],
.field select[aria-invalid="true"] {
  border-color: var(--terracotta);
}

/* Honeypot: onzichtbaar voor bezoekers, maar niet met display:none —
   sommige bots slaan verborgen velden over. */
.honeypot {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* --------------------------------------------------------------------------
   Contactkanalen (footer-stijl à la referentiesites)
   -------------------------------------------------------------------------- */
.contact-channels {
  display: grid;
  gap: 16px;
}

@media (min-width: 640px) {
  .contact-channels {
    grid-template-columns: repeat(2, 1fr);
  }
}

/*
 * In de zijkolom van de contactpagina staan ze onder elkaar: daar is de kolom
 * te smal voor twee kaarten naast elkaar zonder dat het label afbreekt.
 */
@media (min-width: 1024px) {
  .contact-channels {
    grid-template-columns: 1fr;
  }
}

.contact-channel {
  display: flex;
  align-items: center;
  text-decoration: none;
  color: inherit;
  gap: 14px;
  padding: 18px;
  border-radius: var(--radius-md);
  border: 1px solid var(--line);
  background: var(--white);
  transition: border-color 0.25s ease, transform 0.25s cubic-bezier(0.16, 1, 0.3, 1),
    box-shadow 0.25s ease;
}

.contact-channel:hover {
  border-color: var(--caramel);
  transform: translateY(-3px);
  box-shadow: var(--shadow-sm);
}

.contact-channel:hover .contact-channel__icon {
  background: var(--petrol);
}

.contact-channel:hover .contact-channel__icon svg {
  stroke: var(--white);
}

.contact-channel__icon {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: var(--sand);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: background-color 0.25s ease;
}

.contact-channel__icon svg {
  transition: stroke 0.25s ease;
}

.contact-channel__icon svg {
  width: 19px;
  height: 19px;
  stroke: var(--petrol);
}

.contact-channel__label {
  font-size: 12px;
  color: var(--text-brown);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.contact-channel__value {
  font-weight: 600;
  font-size: 15px;
  color: var(--ink);
}

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */
.site-footer {
  background: var(--ink);
  color: var(--cream);
  padding-block: 56px 28px;
}

.footer-top {
  display: grid;
  gap: 40px;
  padding-bottom: 40px;
  border-bottom: 1px solid rgba(242, 228, 212, 0.16);
}

@media (min-width: 860px) {
  .footer-top {
    grid-template-columns: 1.3fr 1fr 1fr 1fr;
  }
}

.footer-brand p {
  margin-top: 14px;
  color: rgba(242, 228, 212, 0.7);
  font-size: 14px;
  max-width: 32ch;
}

.footer .logo__name {
  color: var(--cream);
}
.footer .logo__tagline {
  color: rgba(242, 228, 212, 0.6);
}

.footer-col h4 {
  font-family: var(--font-body);
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: rgba(242, 228, 212, 0.55);
  margin-bottom: 16px;
}

.footer-col ul {
  display: flex;
  flex-direction: column;
  gap: 11px;
}

.footer-col a {
  font-size: 14.5px;
  color: rgba(242, 228, 212, 0.88);
  transition: color 0.15s ease;
}

.footer-col a:hover {
  color: var(--caramel);
}

.footer-social {
  display: flex;
  gap: 10px;
  margin-top: 6px;
}

.footer-social a {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 1px solid rgba(242, 228, 212, 0.24);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: border-color 0.25s ease, background-color 0.25s ease, transform 0.25s ease;
}

.footer-social a:hover {
  border-color: var(--caramel);
  background: rgba(183, 138, 100, 0.15);
  transform: translateY(-3px);
}

.footer-social svg {
  width: 17px;
  height: 17px;
  stroke: var(--cream);
}

.footer-bottom {
  padding-top: 24px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  font-size: 13px;
  color: rgba(242, 228, 212, 0.55);
}

@media (min-width: 640px) {
  .footer-bottom {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }
}

.footer-bottom-links {
  display: flex;
  gap: 18px;
}

.footer-bottom-links a:hover {
  color: var(--cream);
}

/* --------------------------------------------------------------------------
   Pagina-hero (subpagina's)
   -------------------------------------------------------------------------- */
.page-hero {
  padding-block: 52px 32px;
}

@media (min-width: 1024px) {
  .page-hero {
    padding-block: 76px 40px;
  }
}

.page-hero h1 {
  font-size: clamp(32px, 4.6vw, 48px);
  margin-top: 14px;
  max-width: 20ch;
}

.page-hero p {
  margin-top: 18px;
  font-size: 17px;
  color: var(--text-brown);
  max-width: 60ch;
}

/* --------------------------------------------------------------------------
   404
   -------------------------------------------------------------------------- */
.not-found {
  min-height: 70svh;
  display: flex;
  align-items: center;
  padding-block: 60px;
}

.not-found__inner {
  text-align: center;
  max-width: 480px;
  margin-inline: auto;
}

.not-found__motif {
  width: 64px;
  height: 64px;
  margin-inline: auto;
}

.not-found__code {
  font-family: var(--font-display);
  font-size: clamp(64px, 14vw, 120px);
  color: var(--caramel);
  line-height: 1;
}

.not-found h1 {
  margin-top: 8px;
  font-size: clamp(24px, 4vw, 32px);
}

.not-found p {
  margin-top: 14px;
  color: var(--text-brown);
}

.not-found__actions {
  margin-top: 32px;
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
}

/* --------------------------------------------------------------------------
   FAQ accordion
   -------------------------------------------------------------------------- */
.faq-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-width: 780px;
}

.faq-item {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  overflow: hidden;
  transition: border-color 0.25s ease;
}

.faq-item--open {
  border-color: var(--caramel);
}

.faq-item__heading {
  margin: 0;
  font-family: var(--font-body);
  font-weight: 500;
}

.faq-item__trigger {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  background: none;
  border: none;
  padding: 18px 22px;
  text-align: left;
  font-size: 16px;
  font-weight: 600;
  color: var(--ink);
}

.faq-item__icon {
  flex-shrink: 0;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--sand);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), background-color 0.25s ease;
}

.faq-item__icon svg {
  width: 14px;
  height: 14px;
  stroke: var(--petrol);
}

.faq-item--open .faq-item__icon {
  transform: rotate(45deg);
  background: var(--petrol);
}

.faq-item--open .faq-item__icon svg {
  stroke: var(--white);
}

.faq-item__panel {
  padding: 0 22px 20px;
  animation: faq-open 0.25s ease;
}

@keyframes faq-open {
  from {
    opacity: 0;
    transform: translateY(-4px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.faq-item__panel p {
  color: var(--text-brown);
  font-size: 15px;
  line-height: 1.7;
  max-width: 62ch;
}

/* --------------------------------------------------------------------------
   Testimonials
   -------------------------------------------------------------------------- */
.testimonial-card {
  margin: 0;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  padding: 28px;
  display: flex;
  flex-direction: column;
  height: 100%;
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.3s ease,
    box-shadow 0.3s ease;
}

.testimonial-card:hover {
  transform: translateY(-4px);
  border-color: var(--caramel);
  box-shadow: var(--shadow-sm);
}

.testimonial-card__quote {
  width: 32px;
  height: 24px;
  color: var(--caramel);
  margin-bottom: 16px;
}

.testimonial-card blockquote {
  margin: 0;
  flex: 1;
}

.testimonial-card blockquote p {
  color: var(--ink);
  font-size: 15.5px;
  line-height: 1.65;
}

.testimonial-card figcaption {
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.testimonial-card__name {
  font-weight: 600;
  font-size: 14.5px;
  color: var(--ink);
}

.testimonial-card__role {
  font-size: 13px;
  color: var(--text-brown);
}
/* --------------------------------------------------------------------------
   Privacybeleid — leesvriendelijke tekstpagina
   -------------------------------------------------------------------------- */
.policy {
  padding-block: 48px 100px;
}

.policy__content {
  max-width: 760px;
}

.policy__content h2 {
  font-size: 22px;
  margin-top: 44px;
  margin-bottom: 12px;
}

.policy__content h2:first-child {
  margin-top: 0;
}

.policy__content p,
.policy__content li {
  color: var(--text-brown);
  font-size: 15.5px;
  line-height: 1.75;
}

.policy__content ul {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 10px;
}

.policy__content li {
  padding-left: 18px;
  position: relative;
}

.policy__content li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 9px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--caramel);
}

.policy__updated {
  color: var(--text-brown);
  font-size: 13.5px;
  margin-top: 10px;
}

/* Subkoppen binnen een juridische pagina */
.policy__content h3 {
  font-family: var(--font-display);
  font-size: 19px;
  margin-top: 28px;
  margin-bottom: 8px;
  color: var(--ink);
}

/* Tabellen in de privacyverklaring (grondslagen, bewaartermijnen).
   Scrollt horizontaal mee op een telefoon in plaats van de pagina te rekken. */
.policy__table {
  display: block;
  overflow-x: auto;
  width: 100%;
  border-collapse: collapse;
  margin: 20px 0 28px;
  font-size: 15px;
}

.policy__table th,
.policy__table td {
  text-align: left;
  vertical-align: top;
  padding: 10px 14px;
  border-bottom: 1px solid var(--line);
}

.policy__table thead th {
  background: var(--sand);
  font-weight: 600;
  color: var(--ink);
  border-bottom: 1px solid var(--caramel);
}

.policy__table tbody th {
  font-weight: 600;
  white-space: nowrap;
  color: var(--text-brown);
}

/* Nog in te vullen onderdelen - duidelijk zichtbaar zodat ze niet per
   ongeluk live gaan. */
.policy__content mark {
  background: var(--terracotta-soft);
  color: var(--terracotta);
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 14px;
}

.policy__notice {
  margin-top: 28px;
  padding: 16px 18px;
  background: var(--sand);
  border-radius: var(--radius-sm);
  border: 1px solid var(--line);
  font-size: 13.5px;
  color: var(--text-brown);
}

/* --------------------------------------------------------------------------
   WordPress-toegankelijkheidsbasis
   -------------------------------------------------------------------------- */
.screen-reader-text {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(1px, 1px, 1px, 1px);
  white-space: nowrap;
}

.skip-link {
  position: absolute;
  top: -60px;
  left: 12px;
  z-index: 100;
  background: var(--ink);
  color: var(--cream);
  padding: 12px 18px;
  border-radius: 999px;
  font-weight: 600;
  font-size: 14px;
  transition: top 0.2s ease;
}

.skip-link:focus {
  top: 12px;
}

/* Alignment classes uit het WP-editor blokkenpalet (voor content in eventuele
   losse pagina's die via de standaard editor worden aangemaakt) */
.alignwide {
  max-width: calc(var(--container-w) + 64px);
  margin-inline: auto;
}

.alignfull {
  width: 100%;
  max-width: none;
}

.aligncenter {
  margin-inline: auto;
  text-align: center;
}

/* ==========================================================================
   Toegevoegd 19 augustus 2026 — achtergrond, klikbare diensten, slideshow
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Papiertextuur over de hele pagina
   Een fijne ruis op 4%, ingebakken als SVG zodat er geen extra bestand nodig
   is. Je ziet hem niet bewust; hij haalt de vlakheid uit de grote crème- en
   zandvlakken. pointer-events staat uit, dus hij blokkeert niets.
   -------------------------------------------------------------------------- */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 9999;
  pointer-events: none;
  opacity: 0.04;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3' stitchTiles='stitch'/></filter><rect width='160' height='160' filter='url(%23n)'/></svg>");
}

@media (prefers-reduced-motion: reduce) {
  body::after { opacity: 0.03; }
}

/* --------------------------------------------------------------------------
   2. Donkere sectie (Espresso)
   Breekt het ritme van crème en zand halverwege de pagina.
   -------------------------------------------------------------------------- */
.section--espresso {
  background: var(--espresso);
  color: var(--cream);
}

.section--espresso h2,
.section--espresso h3 {
  color: var(--cream);
}

.section--espresso p {
  color: rgba(242, 228, 212, 0.82);
}

.section--espresso .eyebrow,
.section--espresso .step__index {
  color: var(--caramel);
}

.section--espresso .step {
  border-color: rgba(242, 228, 212, 0.18);
}

/* --------------------------------------------------------------------------
   3. Klikbare dienstkaarten
   -------------------------------------------------------------------------- */
.card--dienst {
  display: flex;
  flex-direction: column;
}

a.card--klikbaar {
  text-decoration: none;
  color: inherit;
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1),
    box-shadow 0.25s ease, border-color 0.25s ease;
}

a.card--klikbaar:hover,
a.card--klikbaar:focus-visible {
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
  border-color: var(--caramel);
}

.card__meer {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: auto;
  padding-top: 14px;
  color: var(--petrol);
  font-weight: 600;
  font-size: 14.5px;
}

a.card--klikbaar:hover .card__meer {
  color: var(--petrol-deep);
}

.card__meer svg {
  width: 16px;
  height: 16px;
  transition: transform 0.25s ease;
}

a.card--klikbaar:hover .card__meer svg {
  transform: translateX(3px);
}

/* --------------------------------------------------------------------------
   4. Detailpagina van één dienst
   -------------------------------------------------------------------------- */
.dienst-body {
  max-width: 760px;
}

.dienst-body__icon {
  width: 52px;
  height: 52px;
  display: grid;
  place-items: center;
  border-radius: var(--radius-md);
  background: var(--sand);
  color: var(--petrol);
  margin-bottom: 24px;
}

.dienst-body__icon svg {
  width: 26px;
  height: 26px;
}

.eyebrow__terug {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid currentColor;
}

.eyebrow__terug:hover {
  color: var(--petrol);
}

/* --------------------------------------------------------------------------
   5. Slideshow in de hero
   De foto's liggen op elkaar; alleen de actieve is zichtbaar. Bij één foto
   gedraagt het zich als een gewone afbeelding.
   -------------------------------------------------------------------------- */
.hero-slideshow {
  position: relative;
  overflow: hidden;
}

.hero-slideshow .photo-frame__img {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 1.1s ease-in-out;
}

.hero-slideshow .photo-frame__img:first-child {
  position: relative;
}

.hero-slideshow .photo-frame__img.is-actief {
  opacity: 1;
}

.hero-slideshow__stippen {
  position: absolute;
  bottom: 14px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 8px;
  z-index: 2;
}

.hero-slideshow__stip {
  width: 8px;
  height: 8px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: rgba(242, 228, 212, 0.55);
  cursor: pointer;
  transition: background-color 0.25s ease, transform 0.25s ease;
}

.hero-slideshow__stip.is-actief {
  background: var(--cream);
  transform: scale(1.25);
}

@media (prefers-reduced-motion: reduce) {
  .hero-slideshow .photo-frame__img {
    transition: none;
  }
}

/* --------------------------------------------------------------------------
   6. De losse bv-keuze op /aanbod/
   -------------------------------------------------------------------------- */
.bv-kaart {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin-top: 32px;
  padding: 28px 32px;
  border: 1px solid var(--line);
  border-left: 4px solid var(--petrol);
  border-radius: var(--radius-md);
  background: var(--white);
  text-decoration: none;
  color: inherit;
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1),
    box-shadow 0.25s ease, border-color 0.25s ease;
}

.bv-kaart:hover,
.bv-kaart:focus-visible {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
  border-color: var(--caramel);
  border-left-color: var(--petrol-deep);
}

.bv-kaart__tekst {
  max-width: 62ch;
}

.bv-kaart h3 {
  font-size: 22px;
  margin: 10px 0 8px;
}

.bv-kaart p {
  color: var(--text-brown);
  font-size: 15.5px;
}

.bv-kaart__actie {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
  font-weight: 600;
  color: var(--petrol);
}

.bv-kaart__actie svg {
  width: 18px;
  height: 18px;
  transition: transform 0.25s ease;
}

.bv-kaart:hover .bv-kaart__actie svg {
  transform: translateX(4px);
}

/* --------------------------------------------------------------------------
   7. Nog niet ingevulde onderdelen
   Zichtbaar genoeg om niet per ongeluk live te gaan.
   -------------------------------------------------------------------------- */
.opzet-melding {
  background: var(--terracotta-soft);
  border-left: 3px solid var(--terracotta);
  border-radius: var(--radius-sm);
  padding: 16px 18px;
  margin-bottom: 32px;
  font-size: 15px;
  line-height: 1.55;
  color: var(--ink);
}

.pricing-card--leeg {
  opacity: 0.75;
  border-style: dashed;
}

/* ==========================================================================
   Achtergrondfoto aan de zijkanten
   --------------------------------------------------------------------------
   Staat er in Uiterlijk > Aanpassen > Achtergrond aan de zijkanten een foto,
   dan krijgt de body de klasse .heeft-zijfoto. De site wordt dan een
   gecentreerd vlak en de foto schemert links en rechts door.

   Alleen vanaf 1400 pixels breed. Daaronder is er geen ruimte naast de inhoud
   en zou het vlak de tekst alleen maar smaller maken.

   De foto zit in een vaste laag (position: fixed) achter alles, dus hij
   scrollt niet mee. --zijfoto en --zijfoto-sterkte worden door PHP gezet.
   ========================================================================== */
@media (min-width: 1200px) {
  .heeft-zijfoto::before {
    content: "";
    position: fixed;
    inset: 0;
    background-image: var(--zijfoto);
    background-size: cover;
    background-position: center;
    opacity: var(--zijfoto-sterkte, 0.25);
    z-index: 0;
    pointer-events: none;
  }

  /* Het vlak waar de site op staat. Ondoorzichtig, zodat de tekst leesbaar
     blijft; de foto zie je ernaast.

     De breedte is bewust niet vast: min() zorgt dat er ALTIJD 60 pixels marge
     aan elke kant overblijft, ook op een smaller scherm. Met een vaste 1240px
     zag je op een laptop van 1280 helemaal niets. */
  .heeft-zijfoto .site-header,
  .heeft-zijfoto #main-content,
  .heeft-zijfoto .site-footer {
    width: min(1240px, calc(100vw - 120px));
    margin-inline: auto;
  }

  .heeft-zijfoto .site-header,
  .heeft-zijfoto #main-content {
    background: var(--cream);
  }

  /* De voettekst is donker ontworpen en moet dat ook blijven wanneer er een
     zijfoto staat. Stond hij op crème, dan viel crème tekst weg op een crème
     vlak en was de hele voettekst onleesbaar. Gemeld door Selmir, 25 sept 2026. */
  .heeft-zijfoto .site-footer {
    background: #29211e;
  }

  /* LET OP: hier stond position: relative, en dat brak de plakkende header.
     .site-header is position: sticky met z-index 50 en moet dat blijven. */
  .heeft-zijfoto #main-content,
  .heeft-zijfoto .site-footer {
    position: relative;
    z-index: 1;
  }

  .heeft-zijfoto #main-content {
    box-shadow: 0 0 60px -20px rgba(72, 57, 54, 0.35);
  }

  [data-thema="donker"].heeft-zijfoto #main-content {
    box-shadow: 0 0 60px -20px rgba(0, 0, 0, 0.7);
  }
}

/* Zonder foto verandert er niets: geen enkele regel hierboven grijpt dan aan. */

/* --------------------------------------------------------------------------
   ZZP Administratiecheck — campagnepagina
   Alles mobiel-eerst: de check wordt vrijwel alleen op een telefoon gedaan.
   -------------------------------------------------------------------------- */
.check-voordelen {
  list-style: none;
  margin: 26px 0 28px;
  padding: 0;
  display: grid;
  gap: 12px;
}
.check-voordelen li {
  position: relative;
  padding-left: 30px;
  font-size: 16px;
}
.check-voordelen li::before {
  content: "";
  position: absolute;
  left: 0; top: 9px;
  width: 16px; height: 8px;
  border-left: 2px solid var(--petrol);
  border-bottom: 2px solid var(--petrol);
  transform: rotate(-45deg);
}
.check-micro { margin-top: 12px; font-size: 13.5px; color: var(--text-brown); }
.check-vertrouwen {
  margin-top: 32px; padding-top: 22px;
  border-top: 1px solid var(--line);
  font-size: 14px; color: var(--text-brown); max-width: 58ch;
}

.check-voortgang { display: flex; align-items: center; gap: 14px; margin-bottom: 26px; }
.check-balk { flex: 1; height: 5px; border-radius: 3px; background: rgba(72,57,54,.1); overflow: hidden; }
.check-balk i { display: block; height: 100%; background: var(--petrol); border-radius: 3px; transition: width .3s ease; }
.check-stap { font-size: 13px; color: var(--text-brown); white-space: nowrap; }
.check-vraag { font-size: 24px; line-height: 1.3; }

.check-opties { display: grid; gap: 10px; margin-top: 24px; }
.check-optie {
  width: 100%; text-align: left; font: inherit; font-size: 16px; color: var(--ink);
  padding: 16px 18px; border: 1px solid var(--line); border-radius: var(--radius-md);
  background: var(--white); cursor: pointer;
  transition: border-color .15s ease, transform .15s ease;
}
@media (hover: hover) { .check-optie:hover { border-color: var(--petrol); transform: translateY(-1px); } }
.check-optie:focus-visible { outline: 2px solid var(--petrol); outline-offset: 2px; }
.check-optie.is-gekozen { border-color: var(--petrol); box-shadow: inset 0 0 0 1px var(--petrol); }
.check-terug { margin-top: 20px; background: none; border: 0; cursor: pointer; font: inherit; }

.check-score { display: flex; align-items: baseline; gap: 10px; }
.check-score__getal { font-family: var(--font-display); font-size: 68px; line-height: 1; color: var(--petrol); font-variant-numeric: tabular-nums; }
.check-score__van { font-size: 15px; color: var(--text-brown); }
.check-subkop { font-size: 19px; margin-top: 34px; }
.check-aandacht { margin: 14px 0 0; padding-left: 20px; display: grid; gap: 12px; line-height: 1.65; }
.check-voorbehoud {
  margin-top: 26px; padding: 14px 16px; border-left: 3px solid var(--caramel);
  background: rgba(183,138,100,.08); font-size: 13.5px; color: var(--text-brown);
}

.check-cta { margin-top: 38px; padding-top: 28px; border-top: 1px solid var(--line); }
.check-knoppen { display: grid; gap: 12px; margin-top: 20px; }
@media (min-width: 760px) { .check-knoppen { grid-template-columns: repeat(3, 1fr); } }
/* Visueel gelijkwaardig: geen van de drie kanalen krijgt voorrang in kleur of formaat. */
.check-knop {
  display: block; padding: 18px; border: 1.5px solid var(--petrol); border-radius: var(--radius-md);
  background: var(--white); text-decoration: none; color: var(--ink);
  min-height: 92px; transition: background .15s ease, transform .15s ease;
}
@media (hover: hover) { .check-knop:hover { background: rgba(15,95,85,.05); transform: translateY(-2px); } }
.check-knop__kop { display: block; font-family: var(--font-display); font-weight: 600; font-size: 16px; color: var(--petrol); }
.check-knop__bij { display: block; margin-top: 6px; font-size: 13.5px; color: var(--text-brown); line-height: 1.5; }

.check-plan { margin-top: 42px; padding: 26px; border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--sand); }
.check-form { margin-top: 20px; display: grid; gap: 16px; }
.check-vinkje { display: flex; gap: 12px; align-items: flex-start; font-size: 14px; line-height: 1.6; cursor: pointer; }
.check-vinkje input { margin-top: 4px; width: 20px; height: 20px; flex: none; accent-color: var(--petrol); }
.check-opnieuw { margin-top: 28px; text-align: center; }
.check-opnieuw button { background: none; border: 0; cursor: pointer; font: inherit; }
.hodzic-extra { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }