/* Font Awesome wordt nu via wp_enqueue_style geladen (includes/enqueue.php), niet meer via @import. */
/* ============================================================
   Zorg & Thuis — statische 1:1 nabouw van zorgenthuis.nl
   Design system & componenten
   Fonts: Andika (koppen), Inter (body), Baskervville (serif-accent),
          Open Sans (CTA/reviews — zoals de live site)
   ============================================================ */

/* Google Fonts worden als <link> geladen via sf_thuisenzorg_enqueue_fonts()
   in includes/site-assets.php — een @import hier serialiseert: de browser moet
   eerst deze hele bundle downloaden en parsen voordat hij de fonts ontdekt.
   Zelfde families, gewichten en display=swap, dus identieke weergave. */

/* ---------- Tokens ---------- */
:root {
  --green-dark: #1a3c34;
  --green: #2e7d6b;
  --teal: #468f8e;
  --mint: #f0faf6;
  --mint-2: #e8f4f0;
  --mint-3: #d6efe2;
  --offwhite: #f5f6f1;
  --text: #3b5450;
  --muted: #5a6e6a;
  --muted-light: #7a9490;
  --border: #e4ede9;
  --border-2: #d8ede8;
  --white: #ffffff;
  --gold: #f4b740;
  --grad: linear-gradient(135deg, #1a3c34 0%, #2e7d6b 100%);

  --font-head: 'Andika', 'Helvetica Neue', Arial, sans-serif;
  --font-body: 'Inter', 'Helvetica Neue', Arial, sans-serif;
  --font-serif: 'Baskervville', Georgia, 'Times New Roman', serif;
  --font-ui: 'Open Sans', Arial, sans-serif;

  --radius: 16px;
  --radius-lg: 20px;
  --radius-sm: 8px;
  --shadow-sm: 0 3px 18px rgba(26, 60, 52, 0.06);
  --shadow: 0 8px 28px rgba(26, 60, 52, 0.10);
  --shadow-lg: 0 18px 50px rgba(26, 60, 52, 0.14);
  --container: 1180px;
}

/* ---------- Reset / base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  /* De full-bleed secties (hier r.405 en in thuisenzorg-sf-reskin.css) rekenen met
     100vw. 100vw is INCLUSIEF de breedte van de verticale scrollbar, dus op elke
     browser met een klassieke scrollbar (Windows Chrome/Firefox, macOS met
     "scrollbars altijd tonen") stak zo'n sectie ~15px buiten de pagina en kreeg
     de hele site een horizontale scrollbar.
     `clip` en niet `hidden`: hidden maakt van body een scroll-container en dat
     breekt .nav { position: sticky }. clip snijdt alleen af. Safari < 16 kent
     clip nog niet en houdt daar het oude gedrag — geen regressie. */
  overflow-x: clip;
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.7;
  color: var(--text);
  background: var(--white);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
img { max-width: 100%; display: block; height: auto; }
a { color: var(--green); text-decoration: none; transition: color .2s ease; }
a:hover { color: var(--green-dark); }
h1, h2, h3, h4, h5 { font-family: var(--font-head); color: var(--green-dark); line-height: 1.25; margin: 0 0 .5em; font-weight: 700; }
p { margin: 0 0 1.1em; }
ul { margin: 0; padding: 0; }
strong { color: var(--green-dark); }

/* ---------- Layout helpers ---------- */
.container { width: 100%; max-width: var(--container); margin: 0 auto; padding: 0 24px; }
.container-narrow { max-width: 860px; }
.section { padding: 92px 0; }
.section-sm { padding: 64px 0; }
.bg-mint { background: var(--mint); }
.bg-mint-2 { background: var(--mint-2); }
.bg-offwhite { background: var(--offwhite); }
.bg-white { background: var(--white); }
.text-center { text-align: center; }

.section-tag {
  display: inline-block;
  background: var(--mint-2);
  color: var(--green);
  font-family: var(--font-ui);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  padding: 6px 14px;
  border-radius: 20px;
  margin-bottom: 16px;
}
.section-title {
  font-family: var(--font-head);
  font-size: clamp(1.8rem, 3.4vw, 2.5rem);
  color: var(--green-dark);
  margin: 0 0 16px;
  line-height: 1.22;
}
.section-title.serif { font-family: var(--font-serif); font-weight: 400; }
.section-sub {
  font-size: 1.05rem;
  color: var(--muted);
  line-height: 1.75;
  max-width: 680px;
  margin: 0 auto;
}
.section-head { max-width: 720px; margin: 0 auto 54px; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 14px 30px;
  border-radius: var(--radius-sm);
  font-family: var(--font-head);
  font-size: 1rem;
  font-weight: 700;
  text-align: center;
  cursor: pointer;
  border: 2px solid transparent;
  transition: transform .25s ease, box-shadow .25s ease, background .25s ease, color .25s ease, border-color .25s ease;
  white-space: nowrap;
  line-height: 1;
}
.btn i, .btn svg { font-size: .95em; }
.btn-primary { background: var(--green); color: #fff; box-shadow: 0 6px 18px rgba(46,125,107,.28); }
.btn-primary:hover { background: var(--green-dark); color: #fff; transform: translateY(-2px); box-shadow: 0 10px 26px rgba(26,60,52,.30); }
.btn-dark { background: var(--green-dark); color: #fff; }
.btn-dark:hover { background: var(--green); color: #fff; transform: translateY(-2px); }
.btn-white { background: #fff; color: var(--green-dark); box-shadow: 0 4px 14px rgba(0,0,0,.12); }
.btn-white:hover { background: var(--mint); color: var(--green-dark); transform: translateY(-2px); box-shadow: 0 6px 20px rgba(0,0,0,.18); }
.btn-outline { background: transparent; color: var(--green-dark); border-color: var(--border-2); }
.btn-outline:hover { background: var(--green-dark); color: #fff; border-color: var(--green-dark); transform: translateY(-2px); }
.btn-outline-white { background: transparent; color: #fff; border-color: rgba(255,255,255,.7); }
.btn-outline-white:hover { background: rgba(255,255,255,.14); border-color: #fff; color: #fff; transform: translateY(-2px); }

/* ============================================================
   NAVIGATIE
   ============================================================ */
.nav {
  position: sticky;
  top: 0;
  z-index: 1000;
  background: rgba(255,255,255,.92);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border);
  transition: background .3s ease, box-shadow .3s ease, border-color .3s ease, padding .3s ease;
}
.nav.scrolled { box-shadow: 0 6px 24px rgba(26,60,52,.07); }

/* Transparante overlay-nav boven de homepage-hero */
.nav.nav-home {
  position: fixed;
  left: 0; right: 0;
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border-bottom-color: transparent;
  box-shadow: none;
}
.nav.nav-home.scrolled {
  background: rgba(255,255,255,.95);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom-color: var(--border);
  box-shadow: 0 6px 24px rgba(26,60,52,.07);
}
.nav-inner {
  max-width: 1240px;
  margin: 0 auto;
  padding: 14px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}
.nav-logo { flex-shrink: 0; display: inline-flex; align-items: center; }
.nav-logo img { height: 50px; width: auto; transition: height .3s ease; display: block; }
.nav.scrolled .nav-logo img { height: 42px; }
.nav-links {
  display: flex;
  align-items: center;
  gap: 4px;
  list-style: none;
}
.nav-links > li > a {
  display: inline-block;
  padding: 10px 16px;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: .98rem;
  color: var(--green-dark);
  border-radius: 8px;
}
.nav-links > li > a:hover { color: var(--green); background: var(--mint); }
.nav-cta { margin-left: 8px; }

/* Dropdown */
.nav-dropdown { position: relative; }
.nav-dropdown > a::after {
  content: "";
  display: inline-block;
  width: 7px; height: 7px;
  margin-left: 7px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
  transition: transform .25s ease;
  opacity: .7;
}
.nav-dropdown:hover > a::after { transform: translateY(0) rotate(225deg); }
.dropdown-menu {
  position: absolute;
  top: calc(100% + 10px);
  left: 0;
  min-width: 240px;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 14px;
  box-shadow: var(--shadow);
  padding: 10px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition: opacity .22s ease, transform .22s ease, visibility .22s;
}
.nav-dropdown:hover .dropdown-menu { opacity: 1; visibility: visible; transform: translateY(0); }
.dropdown-menu a {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 14px;
  border-radius: 10px;
  color: var(--green-dark);
  font-weight: 600;
  font-size: .95rem;
}
.dropdown-menu a:hover { background: var(--mint); color: var(--green); }
.dropdown-menu a i { color: var(--teal); width: 20px; text-align: center; }

/* Hamburger */
.nav-toggle {
  display: none;
  flex-direction: column;
  gap: 5px;
  background: none;
  border: 0;
  cursor: pointer;
  padding: 8px;
}
.nav-toggle span { width: 26px; height: 2.5px; background: var(--green-dark); border-radius: 3px; transition: .3s; }

/* Mobiel menu */
.menu-backdrop {
  position: fixed; inset: 0;
  background: rgba(26,60,52,.45);
  opacity: 0; visibility: hidden;
  transition: .3s; z-index: 1100;
}
.menu-backdrop.open { opacity: 1; visibility: visible; }
.mobile-menu {
  position: fixed; top: 0; right: 0;
  width: min(330px, 86vw); height: 100%;
  background: #fff;
  z-index: 1200;
  padding: 28px 24px;
  transform: translateX(100%);
  /* visibility, niet alleen transform: het paneel stond op ELKE viewportbreedte in
     de DOM en was alleen weggeschoven, dus toetsenbordgebruikers tabden op desktop
     na de zichtbare navigatie door 11 onzichtbare links en schermlezers kondigden
     een tweede navigatieregio "Mobiel menu" aan. visibility:hidden haalt het
     paneel uit de tab-orde EN uit de a11y-tree.
     visibility in de transition houdt het paneel zichtbaar tijdens het
     dichtschuiven (discrete animatie: het klapt pas aan het eind om) — zelfde
     patroon als .menu-backdrop hierboven. */
  visibility: hidden;
  transition: transform .32s cubic-bezier(.4,0,.2,1), visibility .32s;
  overflow-y: auto;
  display: flex; flex-direction: column; gap: 4px;
  box-shadow: -10px 0 40px rgba(26,60,52,.18);
}
.mobile-menu.open { transform: translateX(0); visibility: visible; }
.mobile-menu a { padding: 13px 8px; font-family: var(--font-head); font-weight: 700; color: var(--green-dark); border-bottom: 1px solid var(--border); }
.mobile-menu a.mm-sub { padding-left: 24px; font-weight: 600; font-size: .94rem; color: var(--muted); border-bottom: 1px dashed var(--border); }
.mobile-menu .mm-label { font-size: .72rem; letter-spacing: 1.5px; text-transform: uppercase; color: var(--teal); margin-top: 14px; padding: 6px 8px; }
.mobile-menu .btn { margin-top: 18px; }
.mobile-menu-close { align-self: flex-end; background: none; border: 0; font-size: 2rem; line-height: 1; color: var(--green-dark); cursor: pointer; }

/* ============================================================
   HERO (homepage)
   ============================================================ */
.hero {
  position: relative;
  min-height: 92vh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  background:
    linear-gradient(180deg, rgba(255,255,255,.96) 0%, rgba(255,255,255,.45) 16%, rgba(255,255,255,0) 38%),
    url('../img/children-playing-grass-scaled.jpg');
  background-size: cover;
  background-position: center;
  padding: 120px 0 140px;
  overflow: hidden;
}
.hero .container { position: relative; z-index: 2; }
.hero-crown { width: 110px; height: auto; margin: 0 auto 2px; filter: drop-shadow(0 4px 10px rgba(0,0,0,.18)); }
.hero h1 {
  font-family: var(--font-head);
  font-size: clamp(2.8rem, 7vw, 5rem);
  color: #ffffff;
  margin: 0 0 6px;
  text-shadow: 0 2px 22px rgba(0,0,0,.28), 0 1px 3px rgba(0,0,0,.25);
}
.hero-tagline {
  font-family: var(--font-body);
  font-size: clamp(1.1rem, 2.2vw, 1.5rem);
  color: #ffffff;
  margin: 0 0 28px;
  text-shadow: 0 2px 14px rgba(0,0,0,.32);
}
.hero .btn { font-size: 1.05rem; padding: 16px 38px; box-shadow: 0 8px 24px rgba(0,0,0,.22); }
/* zachte witte curve onderaan hero */
.hero-divider { position: absolute; bottom: -1px; left: 0; width: 100%; line-height: 0; z-index: 2; }
.hero-divider svg { width: 100%; height: 90px; display: block; }
.hero-divider path { fill: #fff; }

/* Teal hero-knop (zoals live) */
.btn-teal { background: var(--teal); color: #fff; }
.btn-teal:hover { background: var(--green); color: #fff; transform: translateY(-2px); box-shadow: 0 12px 30px rgba(0,0,0,.26); }

/* ============================================================
   FEATURE-RIJEN (afbeelding + tekst)
   ============================================================ */
.feature-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 56px;
  align-items: center;
}
.feature-row.ratio-25 { grid-template-columns: 2fr 3fr; }
.feature-row.ratio-52 { grid-template-columns: 3fr 2fr; }
.feature-row + .feature-row { margin-top: 80px; }
.feature-row.reverse .feature-media { order: 2; }
.feature-media img { border-radius: var(--radius-lg); box-shadow: var(--shadow); width: 100%; }
.feature-media.plain img { box-shadow: none; border-radius: var(--radius); }
.feature-media.flat img { box-shadow: none; border-radius: 0; }
.feature-text h2, .feature-text h3 { font-size: clamp(1.5rem, 3vw, 2.1rem); margin-bottom: 14px; }
.feature-text p { color: var(--muted); }
.feature-text .lead { font-size: 1.08rem; color: var(--text); }

/* ============================================================
   WAARDEN / BLURBS
   ============================================================ */
/* Waarden — platte lijst met goud icoon + titel (zoals live Divi-blurbs) */
.values-grid { display: flex; flex-direction: column; gap: 6px; margin-top: 10px; }
.value-card { display: flex; gap: 16px; align-items: center; padding: 10px 0; }
.value-icon {
  flex-shrink: 0;
  width: 34px; text-align: center;
  color: #e1b553;
  font-size: 1.55rem;
}
.value-card h4 { font-size: 1.12rem; margin: 0; line-height: 1.35; color: var(--green-dark); }

/* ============================================================
   WAT DOEN WIJ — kaarten (zoals live)
   ============================================================ */
.wdw-title {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: clamp(2.1rem, 4.6vw, 3.55rem);
  color: #000;
  line-height: 1.05;
  margin: 0;
}
.wdw-row { display: grid; gap: 60px; align-items: stretch; }
.wdw-row.ratio-25 { grid-template-columns: 396fr 624fr; }
.wdw-row.half { grid-template-columns: 1fr 1fr; margin-top: 60px; }
.wdw-card {
  background: var(--offwhite);
  border-radius: 20px;
  padding: 40px;
}
.wdw-card.mint { background: var(--mint-3); }
.wdw-card.center { display: flex; align-items: center; justify-content: center; }
.wdw-card h3 {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: clamp(1.6rem, 3vw, 2.18rem);
  color: #333;
  line-height: 1.15;
  margin: 0 0 16px;
}
.wdw-card p { color: #666; font-size: 1rem; line-height: 1.8; margin: 0 0 1.05em; }
.wdw-card p:last-child { margin-bottom: 0; }
.wdw-card .lead strong, .wdw-card p strong { color: #555; font-weight: 700; }
.wdw-crown { width: 70px; height: auto; margin: 0 0 18px; box-shadow: none; border-radius: 0; }
.wdw-img { width: 100%; max-width: 392px; margin: 24px 0 0; border-radius: 0; box-shadow: none; }
.wdw-shield { width: 271px; max-width: 80%; height: auto; box-shadow: none; border-radius: 0; }

/* ============================================================
   WERKEN BIJ — 50/50 split (tekstpaneel links + foto rechts)
   ============================================================ */
.werken-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: 511px;
}
.werken-split-text {
  background: var(--offwhite);
  display: flex;
  align-items: center;
  padding: 56px 56px 56px max(24px, calc((100vw - var(--container)) / 2 + 24px));
}
.werken-block { max-width: 540px; }
.werken-block h2 {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: clamp(2rem, 4vw, 3.25rem);
  color: #333;
  line-height: 1.1;
  margin: 0 0 18px;
}
.werken-block p { color: var(--muted); margin-bottom: 26px; font-size: 1.05rem; line-height: 1.75; }
.werken-split-img {
  background-size: cover;
  background-position: center right;
  background-repeat: no-repeat;
}

/* ============================================================
   ONZE WAARDEN — foto + checklist
   ============================================================ */
.waarden-row { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center; }
.waarden-photo img { width: 100%; border-radius: 30px; box-shadow: var(--shadow); }
.waarden-text .section-title { text-align: left; }
.waarden-text .section-sub { margin: 0 0 24px; max-width: none; }
.check-list { list-style: none; display: flex; flex-direction: column; gap: 16px; margin: 0; padding: 0; }
.check-list li { display: flex; align-items: center; gap: 16px; }
.check-list li i { color: #e1b553; font-size: 1.05rem; flex-shrink: 0; }
.check-list li span { font-family: var(--font-head); font-weight: 700; font-size: 1.14rem; color: var(--green-dark); }

/* Slot-CTA — mint-box */
.slot-cta-box { background: var(--mint-3); border-radius: 20px; padding: 54px 40px; text-align: center; }
.slot-cta-title { font-family: var(--font-head); font-weight: 700; font-size: clamp(1.4rem, 3vw, 1.95rem); color: var(--green-dark); margin: 0 0 22px; line-height: 1.3; }

/* Diensten — service-kaarten (crème, foto + tekst, zoals live) */
.service-card { background: var(--offwhite); border-radius: 20px; padding: 30px; }
.service-card + .service-card { margin-top: 28px; }
.service-card .feature-row { gap: 34px; align-items: stretch; }
.service-card .feature-media { display: flex; }
.service-card .feature-media img { width: 100%; height: 100%; min-height: 250px; object-fit: cover; border-radius: 14px; box-shadow: none; }
.service-card .feature-text { display: flex; flex-direction: column; justify-content: center; }
.service-card .section-title { text-align: left; margin-bottom: 14px; }
.service-card .feature-text p { color: var(--muted); }
@media (max-width: 980px) {
  .service-card .feature-media img { min-height: 220px; }
}

/* FAQ — accordions */
.faq-list { display: flex; flex-direction: column; gap: 14px; }
.faq-item { background: #fff; border: 1px solid var(--border); border-radius: 14px; overflow: hidden; box-shadow: var(--shadow-sm); }
.faq-item summary { list-style: none; cursor: pointer; padding: 18px 22px; font-family: var(--font-head); font-weight: 700; color: var(--green-dark); font-size: 1.02rem; display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after { content: "\f078"; font-family: "Font Awesome 6 Free"; font-weight: 900; font-size: .8rem; color: var(--teal); transition: transform .25s ease; flex-shrink: 0; }
.faq-item[open] summary::after { transform: rotate(180deg); }
.faq-answer { padding: 0 22px 20px; }
.faq-answer p { color: var(--muted); margin: 0; }

/* ============================================================
   CUSTOM DIENST-PAGINA'S (wandelgesprek / ambulante / duurzame)
   ============================================================ */
.eyebrow { display: inline-block; font-family: var(--font-ui); font-size: .78rem; font-weight: 700; letter-spacing: 2.5px; text-transform: uppercase; color: var(--teal); margin-bottom: 14px; }

/* Hero met decoratieve kaart */
.svc-hero { position: relative; background: linear-gradient(135deg, #1a3c34 0%, #2e7d6b 60%, #3d9b85 100%); color: #fff; padding: 108px 0 116px; overflow: hidden; }
.svc-hero::after { content: ""; position: absolute; width: 480px; height: 480px; border-radius: 50%; background: rgba(255,255,255,.05); top: -170px; right: -120px; }
.svc-hero .container { position: relative; z-index: 2; }
.svc-hero-grid { display: grid; grid-template-columns: 1.1fr .9fr; gap: 50px; align-items: center; }
.svc-hero .eyebrow { color: rgba(255,255,255,.8); }
.svc-hero h1 { color: #fff; font-size: clamp(2.4rem, 5vw, 3.4rem); line-height: 1.08; margin: 0 0 14px; }
.svc-hero-sub { font-family: var(--font-head); font-weight: 700; font-size: clamp(1.1rem, 2vw, 1.4rem); color: #fff; margin: 0 0 16px; }
.svc-hero p { color: rgba(255,255,255,.85); margin: 0 0 28px; max-width: 520px; line-height: 1.7; }
.svc-hero .btn { box-shadow: 0 10px 26px rgba(0,0,0,.22); }
.svc-hero-card { background: #fff; border-radius: 22px; padding: 32px 30px; box-shadow: 0 24px 60px rgba(0,0,0,.22); text-align: center; }
.shc-icon { width: 66px; height: 66px; border-radius: 18px; background: var(--mint-2); color: var(--green); display: grid; place-items: center; font-size: 1.7rem; margin: 0 auto 16px; }
.svc-hero-card h3 { color: var(--green-dark); margin: 0 0 8px; font-size: 1.3rem; }
.shc-meta { color: var(--muted); font-size: .92rem; margin: 0 0 18px; }
.shc-badges { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }
.shc-badge { display: inline-flex; align-items: center; gap: 7px; background: var(--mint); border: 1px solid var(--border-2); border-radius: 50px; padding: 7px 14px; font-size: .86rem; font-weight: 600; color: var(--green-dark); }
.shc-badge i { color: var(--green); }

/* Intro met feature-kaarten rechts */
.svc-intro-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 50px; align-items: center; }
.feature-card-list { display: flex; flex-direction: column; gap: 18px; }
.fc-card { background: #fff; border: 1px solid var(--border); border-radius: 16px; padding: 22px 24px; box-shadow: var(--shadow-sm); }
.fc-card .fc-icon { font-size: 1.35rem; margin-bottom: 10px; color: var(--green); }
.fc-card h4 { margin: 0 0 6px; font-size: 1.12rem; color: var(--green-dark); }
.fc-card p { margin: 0; color: var(--muted); font-size: .95rem; line-height: 1.6; }

/* Groene highlight-box (linker accent) */
.highlight-box { background: var(--mint-2); border-left: 4px solid var(--green); border-radius: 8px; padding: 18px 22px; margin-top: 6px; }
.highlight-box p { margin: 0; color: var(--text); }

/* Check-kaarten (2-koloms) */
.check-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.check-card { background: #fff; border: 1px solid var(--border); border-radius: 14px; padding: 18px 22px; display: flex; align-items: center; gap: 14px; box-shadow: var(--shadow-sm); }
.check-card i { color: var(--green); flex-shrink: 0; font-size: 1.05rem; }
.check-card p { margin: 0; color: var(--muted); }
.check-card strong { color: var(--green-dark); }

/* Note-banden */
.note-band { background: linear-gradient(135deg, #1a3c34, #2e7d6b); color: #fff; border-radius: 16px; padding: 26px 34px; display: flex; gap: 16px; align-items: flex-start; box-shadow: 0 12px 34px rgba(26,60,52,.18); }
.note-band i { color: var(--gold); font-size: 1.35rem; margin-top: 2px; flex-shrink: 0; }
.note-band p { margin: 0; color: rgba(255,255,255,.92); }
.note-soft { background: var(--mint-2); border-radius: 16px; padding: 28px 36px; text-align: center; }
.note-soft p { margin: 0; color: var(--text); font-size: 1.05rem; }

/* Tijdlijn (Wat kun je verwachten) */
.timeline { max-width: 840px; margin: 0 auto; }
.timeline-item { display: grid; grid-template-columns: 54px 1fr; gap: 24px; align-items: flex-start; position: relative; padding-bottom: 26px; }
.timeline-item:not(:last-child)::before { content: ""; position: absolute; left: 26px; top: 54px; bottom: -2px; width: 2px; background: var(--border-2); }
.timeline-num { width: 54px; height: 54px; border-radius: 50%; background: var(--green-dark); color: #fff; display: grid; place-items: center; font-family: var(--font-head); font-weight: 700; font-size: 1.05rem; position: relative; z-index: 2; }
.timeline-card { background: var(--mint); border: 1px solid var(--border); border-radius: 14px; padding: 20px 24px; }
.timeline-card h3 { margin: 0 0 6px; font-size: 1.15rem; color: var(--green-dark); }
.timeline-card p { margin: 0; color: var(--muted); }

@media (max-width: 980px) {
  .svc-hero-grid, .svc-intro-grid { grid-template-columns: 1fr; gap: 34px; }
  .check-cards { grid-template-columns: 1fr; }
}

/* Stat */
.stat { text-align: center; }
.stat-number { font-family: var(--font-head); font-weight: 700; font-size: clamp(2.4rem, 6vw, 3.2rem); color: var(--green-dark); line-height: 1.1; }
.stat-label { font-family: var(--font-head); font-size: 1.25rem; color: var(--green-dark); font-weight: 700; }

/* Feature/icon cards grid (3-koloms) */
.card-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.card-grid.cols-2 { grid-template-columns: repeat(2, 1fr); }
.info-card {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 32px 28px;
  box-shadow: var(--shadow-sm);
  transition: transform .2s ease, box-shadow .2s ease;
}
.info-card:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
.info-card .info-icon {
  width: 56px; height: 56px; border-radius: 15px;
  background: var(--mint-2); color: var(--green);
  display: grid; place-items: center; font-size: 1.4rem; margin-bottom: 18px;
}
.info-card h3 { font-size: 1.2rem; margin-bottom: 10px; }
.info-card p { color: var(--muted); font-size: .96rem; margin: 0; }
.info-card .info-list { list-style: none; margin: 14px 0 0; }
.info-card .info-list li { position: relative; padding-left: 26px; margin-bottom: 8px; color: var(--muted); font-size: .94rem; }
.info-card .info-list li::before { content: "\f00c"; font-family: "Font Awesome 6 Free"; font-weight: 900; color: var(--teal); position: absolute; left: 0; top: 1px; font-size: .8rem; }

/* ============================================================
   CTA-BAND (gradient)
   ============================================================ */
.cta-band {
  background: var(--grad);
  border-radius: var(--radius-lg);
  padding: 48px 44px;
  box-shadow: 0 14px 40px rgba(26,60,52,.18);
}
.cta-band-inner { display: flex; align-items: center; justify-content: space-between; gap: 32px; flex-wrap: wrap; }
.cta-band-text { flex: 1; min-width: 260px; }
.cta-band-text h3 { color: #fff; font-size: 1.5rem; margin: 0 0 10px; line-height: 1.3; }
.cta-band-text p { color: rgba(255,255,255,.88); font-size: 1rem; margin: 0; line-height: 1.6; }
.cta-band-actions { display: flex; flex-direction: column; gap: 12px; flex-shrink: 0; }
.cta-band-actions .btn { min-width: 220px; }

/* Volledige gradient sectie (bv. Werken bij / contact-cta) */
.cta-full { background: var(--grad); color: #fff; text-align: center; }
.cta-full .section-title, .cta-full h2 { color: #fff; }
.cta-full p { color: rgba(255,255,255,.9); max-width: 640px; margin: 0 auto 30px; }
.cta-actions { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }

/* ============================================================
   REVIEWS
   ============================================================ */
.reviews { text-align: center; }
.reviews .section-head { margin-bottom: 34px; }
.score-bar {
  display: inline-flex; align-items: center; gap: 14px;
  background: #fff; border: 1px solid var(--border-2);
  border-radius: 50px; padding: 12px 28px; margin-bottom: 46px;
  box-shadow: 0 2px 12px rgba(46,125,107,.08);
}
.stars { color: var(--gold); font-size: 1.05rem; letter-spacing: 2px; }
.stars .empty { color: #d7e3df; }
.score-text { font-size: .98rem; color: var(--green-dark); font-weight: 600; }
.score-text span { color: var(--muted); font-weight: 400; }
.reviews-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 24px; max-width: 1050px; margin: 0 auto 36px; text-align: left; }
.review-card { background: #fff; border-radius: var(--radius); padding: 28px 26px; border: 1px solid var(--border); box-shadow: var(--shadow-sm); transition: transform .2s ease, box-shadow .2s ease; }
.review-card:hover { transform: translateY(-3px); box-shadow: 0 8px 28px rgba(26,60,52,.11); }
.review-card .stars { display: block; margin-bottom: 12px; }
.review-quote { font-size: .98rem; color: var(--text); line-height: 1.75; margin: 0 0 18px; font-style: italic; }
.review-author { display: flex; align-items: center; gap: 12px; }
.review-avatar { width: 44px; height: 44px; border-radius: 50%; background: var(--mint-3); color: var(--green); display: grid; place-items: center; font-size: 1.05rem; flex-shrink: 0; }
.review-name { font-size: .92rem; font-weight: 700; color: var(--green-dark); margin: 0 0 1px; }
.review-role { font-size: .84rem; color: var(--muted-light); margin: 0; }
.reviews-foot { font-size: .98rem; color: var(--muted); }
.reviews-foot a { color: var(--green); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }

/* Certificeringslogo (HKZ) */
.cert-strip { display: flex; justify-content: center; padding: 10px 0 0; }
.cert-strip img { max-width: 230px; width: 100%; }

/* ============================================================
   PAGE HERO (subpagina's)
   ============================================================ */
.page-hero {
  background: var(--grad);
  color: #fff;
  padding: 92px 0 84px;
  text-align: center;
  position: relative;
}
.page-hero .breadcrumb { font-size: .85rem; color: rgba(255,255,255,.7); margin-bottom: 16px; }
.page-hero .breadcrumb a { color: rgba(255,255,255,.85); }
.page-hero .breadcrumb a:hover { color: #fff; }
.page-hero h1 { color: #fff; font-size: clamp(2.1rem, 4.6vw, 3.1rem); margin: 0 0 14px; }
.page-hero p { color: rgba(255,255,255,.85); max-width: 640px; margin: 0 auto; font-size: 1.08rem; }
.page-hero .section-tag { background: rgba(255,255,255,.15); color: #fff; }

/* Foto-hero voor subpagina's (zoals live: foto + witte fade + kroon + curve) */
.page-hero.photo {
  background-color: #e9efec;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  padding: 150px 0 130px;
  overflow: hidden;
}
.page-hero.photo::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(255,255,255,.92) 0%, rgba(255,255,255,.5) 32%, rgba(255,255,255,.05) 72%, rgba(255,255,255,0) 100%);
  z-index: 1;
}
.page-hero.photo .container { position: relative; z-index: 2; }
.page-hero.photo .hero-crown { width: 64px; height: auto; margin: 0 auto 4px; filter: drop-shadow(0 4px 10px rgba(0,0,0,.18)); }
.page-hero.photo h1 { color: #fff; text-shadow: 0 2px 20px rgba(0,0,0,.30), 0 1px 3px rgba(0,0,0,.22); margin: 0 0 22px; }
.page-hero.photo .btn { box-shadow: 0 8px 24px rgba(0,0,0,.20); }
.page-hero.photo .hero-divider { position: absolute; bottom: -1px; left: 0; width: 100%; line-height: 0; z-index: 2; }
.page-hero.photo .hero-divider svg { width: 100%; height: 80px; display: block; }
.page-hero.photo .hero-divider path { fill: #fff; }

/* ============================================================
   PROSE (juridisch / blog)
   ============================================================ */
.prose { font-size: 1.02rem; color: var(--text); line-height: 1.85; }
.prose h2 { font-size: 1.55rem; margin: 36px 0 14px; }
.prose h3 { font-size: 1.2rem; margin: 28px 0 10px; }
.prose p { color: var(--muted); }
.prose ul, .prose ol { margin: 0 0 1.2em; padding-left: 22px; }
.prose li { margin-bottom: 8px; color: var(--muted); }
.prose a { text-decoration: underline; text-underline-offset: 2px; }
.prose .lead { font-size: 1.1rem; color: var(--text); }
.prose img { border-radius: var(--radius); margin: 24px 0; }

/* Blog */
.blog-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 28px; }
.blog-card { background: #fff; border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-sm); transition: transform .2s ease, box-shadow .2s ease; display: flex; flex-direction: column; }
.blog-card:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
.blog-card .blog-img { width: 100%; height: 210px; object-fit: cover; }
.blog-card .blog-body { padding: 24px 24px 26px; display: flex; flex-direction: column; flex: 1; }
.blog-card .blog-date { font-size: .8rem; color: var(--teal); font-weight: 600; text-transform: uppercase; letter-spacing: .5px; margin-bottom: 8px; }
.blog-card h2, .blog-card h3 { font-size: 1.22rem; margin: 0 0 10px; }
.blog-card p { font-size: .95rem; color: var(--muted); margin: 0 0 16px; }
.blog-card .blog-link { margin-top: auto; font-family: var(--font-head); font-weight: 700; color: var(--green); display: inline-flex; align-items: center; gap: 7px; }
.blog-card .blog-link:hover { gap: 11px; color: var(--green-dark); }

/* ============================================================
   CONTACT
   ============================================================ */
.contact-grid { display: grid; grid-template-columns: 1fr 1.2fr; gap: 40px; align-items: start; }
.contact-card { display: flex; gap: 16px; align-items: flex-start; background: #fff; border: 1px solid var(--border); border-radius: var(--radius); padding: 22px 24px; margin-bottom: 16px; box-shadow: var(--shadow-sm); }
.contact-card .c-icon { width: 48px; height: 48px; border-radius: 13px; background: var(--mint-2); color: var(--green); display: grid; place-items: center; font-size: 1.2rem; flex-shrink: 0; }
.contact-card h3 { font-size: 1.05rem; margin: 2px 0 4px; }
.contact-card p, .contact-card a { margin: 0; color: var(--muted); font-size: .96rem; }
.contact-card a:hover { color: var(--green); }
.form-card { background: #fff; border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 34px 32px; box-shadow: var(--shadow); }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.form-group { margin-bottom: 16px; }
.form-group label { display: block; font-family: var(--font-head); font-weight: 700; font-size: .9rem; color: var(--green-dark); margin-bottom: 6px; }
.form-group input, .form-group select, .form-group textarea {
  width: 100%; padding: 12px 14px; border: 1px solid var(--border-2); border-radius: 10px;
  font-family: var(--font-body); font-size: .96rem; color: var(--text); background: var(--mint);
  transition: border-color .2s ease, box-shadow .2s ease;
}
.form-group input:focus, .form-group select:focus, .form-group textarea:focus { outline: 0; border-color: var(--green); box-shadow: 0 0 0 3px rgba(46,125,107,.12); background: #fff; }
.form-group textarea { min-height: 130px; resize: vertical; }
.form-card .btn { width: 100%; margin-top: 6px; }

/* ============================================================
   FOOTER
   ============================================================ */
.footer { background: #1a1a1a; color: rgba(255,255,255,.78); padding: 64px 0 28px; }
.footer-top { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 40px; }
.footer-logo { margin-bottom: 18px; }
.footer-logo img { height: 54px; width: auto; }
.footer-brand p { color: rgba(255,255,255,.7); font-size: .96rem; max-width: 340px; }
.footer-socials { display: flex; gap: 18px; margin-top: 18px; }
.footer-socials a { color: #fff; background: none; font-size: 1.25rem; display: inline-flex; align-items: center; transition: opacity .2s ease, transform .2s ease; }
.footer-socials a:hover { opacity: .7; transform: translateY(-2px); }
.footer-col h4 { color: #fff; font-size: 1.05rem; margin-bottom: 16px; }
.footer-col ul { list-style: none; }
.footer-col li { margin-bottom: 10px; }
.footer-col a { color: rgba(255,255,255,.72); font-size: .95rem; }
.footer-col a:hover { color: #fff; }
.footer-bottom { margin-top: 40px; padding-top: 24px; display: flex; justify-content: center; align-items: center; gap: 16px; flex-wrap: wrap; }
.footer-made { font-size: .88rem; color: rgba(255,255,255,.62); font-weight: 700; }
.footer-made a { color: var(--gold); font-weight: 600; }
.footer-made a:hover { color: #fff; }

/* ============================================================
   SCROLL-ANIMATIE
   ============================================================ */
.fade-up { opacity: 0; transform: translateY(28px); transition: opacity .7s ease, transform .7s ease; }
.fade-up.visible { opacity: 1; transform: translateY(0); }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 980px) {
  .nav-links { display: none; }
  .nav-toggle { display: flex; }
  .feature-row, .feature-row.ratio-25, .feature-row.ratio-52 { grid-template-columns: 1fr; gap: 32px; }
  .feature-row.reverse .feature-media { order: 0; }
  .feature-row + .feature-row { margin-top: 54px; }
  .wdw-row, .wdw-row.ratio-25, .wdw-row.half { grid-template-columns: 1fr; gap: 28px; }
  .wdw-row.half { margin-top: 28px; }
  .waarden-row { grid-template-columns: 1fr; gap: 32px; }
  .werken-split { grid-template-columns: 1fr; }
  .werken-split-text { padding: 48px 24px; }
  .werken-split-img { min-height: 320px; }
  .contact-grid { grid-template-columns: 1fr; }
  .card-grid, .card-grid.cols-2 { grid-template-columns: repeat(2, 1fr); }
  .footer-top { grid-template-columns: 1fr 1fr; }
  .footer-brand { grid-column: 1 / -1; }
}
@media (max-width: 768px) {
  .section { padding: 64px 0; }
  .values-grid { grid-template-columns: 1fr; }
  .cta-band { padding: 34px 26px; }
  .cta-band-inner { flex-direction: column; align-items: stretch; text-align: center; }
  .cta-band-actions { width: 100%; }
  .cta-band-actions .btn { width: 100%; min-width: 0; }
  .form-row { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
  .card-grid, .card-grid.cols-2 { grid-template-columns: 1fr; }
  .footer-top { grid-template-columns: 1fr; }
  .footer-bottom { flex-direction: column; text-align: center; }
  .hero { padding: 50px 0 110px; }
}