/* ==========================================================================
   Paco Taxeert — Design System
   Earthy, personable, trustworthy. Clean & simple.
   Author: built with UI/UX Pro Max design intelligence.
   ========================================================================== */

/* ---------- Letters, op de eigen hosting ---------------------------------
   Bewust niet via Google Fonts: dan ziet Google het IP-adres van elke bezoeker
   nog voordat die iets doet, en dat kost een derde partij in de privacyverklaring.
   Allebei variabele fonts, versmald tot de tekens die deze site gebruikt.
   Fraunces houdt de optische as, want de koppen leunen daarop. */
@font-face {
  font-family: "Fraunces";
  src: url("../fonts/fraunces.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Hanken Grotesk";
  src: url("../fonts/hanken-grotesk.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

/* ---------- Design Tokens ------------------------------------------------ */
:root {
  /* Brand — earthy trust palette */
  --clay:        #B65D3C;   /* primary / signature warm */
  --clay-deep:   #9A4A2C;   /* hover / pressed */
  --clay-soft:   #EBD9CE;   /* tints / washes */
  --olive:       #5F6B4B;   /* secondary / grounding */
  --olive-deep:  #4A543A;
  --olive-soft:  #E4E7DA;
  --forest:      #33463A;   /* deep accent for calm CTAs */

  /* Neutrals — warm paper family */
  --paper:       #FAF6EF;   /* page background */
  --paper-2:     #F3ECE1;   /* alt sections */
  --card:        #FFFFFF;
  --sand:        #E7DCCB;   /* borders / dividers */
  --sand-deep:   #D8C9B2;

  --ink:         #262219;   /* primary text (deeper for hierarchy) */
  --ink-soft:    #574F43;   /* secondary text (darker = more presence, AA+) */
  --ink-mute:    #6B6254;   /* tertiary / captions (AA on paper & paper-2) */
  --footer-dim:  #B8AFA1;   /* footer fine-print (AA on #221F1A) */
  --footer-link: #C6BDAF;   /* footer links (AA on #221F1A) */

  --white:       #ffffff;
  --success:     #4B7A52;
  --ring:        rgba(51, 70, 58, 0.30);
  --whatsapp:    #1FA855;
  --shadow-cta:  0 14px 30px rgba(51, 70, 58, 0.28);

  /* Typography */
  --font-display: "Fraunces", Georgia, "Times New Roman", serif;
  --font-body:    "Hanken Grotesk", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  --fs-xxl: clamp(2.7rem, 1.6rem + 4.9vw, 5rem);
  --fs-xl:  clamp(2.2rem, 1.55rem + 3vw, 3.5rem);
  --fs-lg:  clamp(1.6rem, 1.25rem + 1.6vw, 2.3rem);
  --fs-md:  clamp(1.2rem, 1.05rem + 0.7vw, 1.5rem);
  --fs-base: 1.0625rem;   /* 17px */
  --fs-sm:  0.9375rem;
  --fs-xs:  0.8125rem;

  /* Spacing scale (marketing / low-density) */
  --sp-1: 0.5rem;
  --sp-2: 0.75rem;
  --sp-3: 1rem;
  --sp-4: 1.5rem;
  --sp-5: 2rem;
  --sp-6: 3rem;
  --sp-7: 4.5rem;
  --sp-8: 6.5rem;
  --sp-9: 9rem;

  /* Radius & shadow (Soft UI: softer than flat, clearer than neumorphism) */
  --r-sm: 10px;
  --r-md: 16px;
  --r-lg: 24px;
  --r-xl: 32px;
  --r-pill: 999px;

  --shadow-sm: 0 1px 2px rgba(42, 38, 32, 0.06), 0 2px 6px rgba(42, 38, 32, 0.05);
  --shadow-md: 0 6px 16px rgba(42, 38, 32, 0.08), 0 2px 6px rgba(42, 38, 32, 0.05);
  --shadow-lg: 0 22px 48px rgba(42, 38, 32, 0.14), 0 6px 16px rgba(42, 38, 32, 0.06);
  --shadow-clay: 0 14px 30px rgba(154, 74, 44, 0.28);

  --container: 1180px;
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-soft: cubic-bezier(0.33, 1, 0.68, 1);
  --dur: 240ms;
}

/* ---------- Reset / base ------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
/* De koptekstbalk blijft bij het scrollen bovenaan staan. Zonder scroll-padding komt
   een anker (#taxatie-form) precies onder die balk uit en zie je de bovenkant niet. */
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 5.5rem; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--fs-base);
  line-height: 1.65;
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

img, svg, picture { max-width: 100%; display: block; }
img { height: auto; } /* keep width/height attrs for CLS without distorting scaled images */
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; }
ul { list-style: none; margin: 0; padding: 0; }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 550;
  line-height: 1.1;
  letter-spacing: -0.01em;
  color: var(--ink);
  margin: 0 0 0.5em;
  font-variation-settings: "opsz" 40;
}
h1 { font-size: var(--fs-xxl); font-weight: 600; letter-spacing: -0.02em; font-variation-settings: "opsz" 96; }
h2 { font-size: var(--fs-xl); font-weight: 560; letter-spacing: -0.018em; font-variation-settings: "opsz" 72; }
h3 { font-size: var(--fs-lg); }
p { margin: 0 0 1rem; }

/* consistent, readable measure for running text */
.lead, .section-head p, .split p, .split__body p { max-width: 62ch; }
/* tabular figures so stats/prices align and don't jitter on count-up */
.vp b, .hero-stats b, .price-tag b, [data-count], .stat-chip b {
  font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1;
}

::selection { background: var(--forest); color: #fff; }

/* ---------- Layout helpers ---------------------------------------------- */
.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: clamp(1.15rem, 4vw, 2.5rem);
}
.section { padding-block: clamp(3.5rem, 8vw, var(--sp-8)); }
.section--tight { padding-block: clamp(2.5rem, 5vw, var(--sp-7)); }
.section--alt { background: var(--paper-2); }
.section--forest { background: var(--forest); color: #EAE4D6; }
.section--forest h2, .section--forest h3 { color: #fff; }

/* Editorial section numbering — a quiet signature */
.eyebrow .num {
  font-family: var(--font-display); font-style: italic; font-weight: 500;
  letter-spacing: 0; text-transform: none; color: var(--clay-deep); font-size: 1.05em;
}

/* ---- Readability fixes (all measured to pass WCAG AA) ------------------- */
.logo__sub { color: var(--clay-deep); }                 /* was --clay: 4.22 on paper */
.site-footer .logo__sub { color: #D9A98E; }             /* light on dark footer */
.cta-band .eyebrow, .pullquote .eyebrow { color: #D9A98E; }   /* was clay-deep 1.63 on forest */
.cta-band .eyebrow::before, .pullquote .eyebrow::before { background: #D9A98E; }

/* Pull-quote — the deliberate dark moment + brand motif */
.pullquote { background: var(--forest); position: relative; overflow: hidden; }
.pullquote__mark {
  position: absolute; right: -60px; top: 50%; transform: translateY(-50%);
  width: 360px; height: 360px; color: #fff; opacity: 0.06; pointer-events: none;
}
.pullquote blockquote { max-width: 920px; margin: 0 auto; text-align: center; position: relative; z-index: 1; }
.pullquote blockquote p {
  font-family: var(--font-display); font-style: italic; font-weight: 400;
  font-size: clamp(1.6rem, 1.05rem + 2.6vw, 2.85rem); line-height: 1.28; color: #fff; margin: 0;
  font-variation-settings: "opsz" 80;
}
.pullquote cite {
  display: block; margin-top: 1.5rem; font-family: var(--font-body); font-style: normal;
  font-weight: 600; font-size: var(--fs-sm); letter-spacing: 0.08em; text-transform: uppercase; color: #D9A98E;
}

.eyebrow {
  display: inline-flex; align-items: center; gap: 0.5rem;
  font-size: var(--fs-xs); font-weight: 600; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--clay-deep);
}
.eyebrow::before {
  content: ""; width: 26px; height: 2px; border-radius: 2px;
  background: var(--clay);
}
.section--forest .eyebrow { color: #D9A98E; }
.section--forest .eyebrow::before { background: #D9A98E; }

.lead { font-size: var(--fs-md); color: var(--ink-soft); line-height: 1.6; }
.section-head { max-width: 680px; margin-bottom: clamp(2rem, 4vw, 3.25rem); }
.section-head.center { margin-inline: auto; text-align: center; }
.muted { color: var(--ink-soft); }

/* ---------- Buttons ------------------------------------------------------ */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.55rem;
  padding: 0.9rem 1.5rem; border-radius: var(--r-pill);
  font-weight: 600; font-size: var(--fs-sm); letter-spacing: 0.01em;
  border: 1.5px solid transparent; cursor: pointer;
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease),
              background var(--dur) var(--ease), color var(--dur) var(--ease);
  will-change: transform;
}
.btn svg { width: 1.15em; height: 1.15em; }
.btn--primary { background: var(--forest); color: #fff; box-shadow: var(--shadow-cta); }
.btn--primary:hover { background: var(--olive-deep); transform: translateY(-2px); box-shadow: 0 18px 36px rgba(51,70,58,.34); }
.btn--ghost { background: transparent; color: var(--ink); border-color: var(--sand-deep); }
.btn--ghost:hover { border-color: var(--olive); color: var(--olive-deep); transform: translateY(-2px); }
.btn--whatsapp { background: #fff; color: var(--ink); border-color: var(--sand-deep); }
.btn--whatsapp svg { color: var(--whatsapp); }
.btn--whatsapp:hover { border-color: var(--whatsapp); color: var(--olive-deep); transform: translateY(-2px); }
.btn--light { background: #fff; color: var(--forest); }
.btn--light:hover { transform: translateY(-2px); box-shadow: var(--shadow-lg); }
.btn--block { width: 100%; }
.btn:focus-visible { outline: 3px solid var(--ring); outline-offset: 2px; }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

/* ---------- Skip link ----------------------------------------------------- */
.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--forest); color: #fff; font-weight: 600; font-size: var(--fs-sm);
  padding: 0.8rem 1.4rem; border-radius: 0 0 var(--r-sm) 0;
}
.skip-link:focus { left: 0; }

/* ---------- Header ------------------------------------------------------- */
.site-header {
  position: sticky; top: 0; z-index: 60;
  background: rgba(250, 246, 239, 0.82);
  backdrop-filter: saturate(1.4) blur(12px);
  -webkit-backdrop-filter: saturate(1.4) blur(12px);
  border-bottom: 1px solid transparent;
  transition: box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease), background var(--dur) var(--ease);
}
.site-header.is-scrolled { box-shadow: var(--shadow-sm); border-color: var(--sand); }
.nav {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--sp-4); height: 74px;
}
.nav__links {
  display: flex; align-items: center; gap: 0.35rem;
}
.nav__links a {
  padding: 0.5rem 0.9rem; border-radius: var(--r-pill);
  font-size: var(--fs-sm); font-weight: 500; color: var(--ink-soft);
  transition: color var(--dur) var(--ease), background var(--dur) var(--ease);
}
.nav__links a:hover { color: var(--ink); background: var(--olive-soft); }
.nav__links a[aria-current="page"] { color: var(--olive-deep); font-weight: 600; }
/* the nav CTA is a solid button — keep its text white over the generic link colour */
.nav__links a.btn--primary, .nav__links a.btn--primary:hover { color: #fff; background: var(--forest); }
.nav__links a.btn--primary:hover { background: var(--olive-deep); }
.nav__actions { display: flex; align-items: center; gap: 0.75rem; }
.nav__phone {
  display: inline-flex; align-items: center; gap: 0.5rem;
  font-weight: 600; font-size: var(--fs-sm); color: var(--ink);
}
.nav__phone svg { width: 18px; height: 18px; color: var(--olive); }
.nav__toggle {
  display: none; width: 46px; height: 46px; border-radius: var(--r-sm);
  background: transparent; border: 1.5px solid var(--sand-deep);
  align-items: center; justify-content: center;
}
.nav__toggle span, .nav__toggle span::before, .nav__toggle span::after {
  content: ""; display: block; width: 20px; height: 2px; border-radius: 2px;
  background: var(--ink); transition: transform var(--dur) var(--ease), opacity var(--dur) var(--ease);
  position: relative;
}
.nav__toggle span::before { position: absolute; top: -6px; }
.nav__toggle span::after  { position: absolute; top: 6px; }
.nav__toggle[aria-expanded="true"] span { background: transparent; }
.nav__toggle[aria-expanded="true"] span::before { transform: translateY(6px) rotate(45deg); }
.nav__toggle[aria-expanded="true"] span::after  { transform: translateY(-6px) rotate(-45deg); }

/* Logo */
.logo { display: inline-flex; align-items: center; gap: 0.6rem; }
.logo__mark { width: 38px; height: 38px; flex: none; }
.logo__text { display: flex; flex-direction: column; line-height: 1; }
.logo__name { font-family: var(--font-display); font-weight: 600; font-size: 1.28rem; color: var(--ink); letter-spacing: -0.01em; }
.logo__sub  { font-size: 0.62rem; font-weight: 600; letter-spacing: 0.34em; text-transform: uppercase; color: var(--clay-deep); margin-top: 3px; }

/* ---------- Hero --------------------------------------------------------- */
.hero { position: relative; padding-block: clamp(2.5rem, 6vw, 5.5rem) clamp(3rem, 7vw, 6rem); overflow: hidden; }
.hero__grid {
  display: grid; grid-template-columns: 1.05fr 0.95fr; gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
  position: relative; z-index: 1; /* keep all hero content above the decorative blob */
}
.hero__badges { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 1.75rem 0; }
.badge {
  display: inline-flex; align-items: center; gap: 0.4rem;
  padding: 0.4rem 0.85rem; border-radius: var(--r-pill);
  background: #fff; border: 1px solid var(--sand);
  font-size: var(--fs-xs); font-weight: 600; color: var(--ink-soft);
  box-shadow: var(--shadow-sm);
}
.badge svg { width: 15px; height: 15px; color: var(--olive); }
.hero h1 { margin-bottom: 1rem; }
.hero__cta { display: flex; flex-wrap: wrap; gap: 0.85rem; margin-top: 2rem; }

/* Hero visual */
.hero__visual { position: relative; }
.hero__blob {
  position: absolute; inset: -14% -10% -14% -6%; z-index: 0;
  background: radial-gradient(55% 55% at 62% 30%, var(--olive-soft), transparent 72%),
              radial-gradient(45% 45% at 28% 82%, var(--clay-soft), transparent 72%);
  opacity: 0.6;
}
.portrait-frame {
  position: relative; z-index: 1;
  border-radius: var(--r-xl);
  overflow: hidden; aspect-ratio: 4 / 5; /* native portrait ratio — no cropping */
  background: var(--paper-2);
  box-shadow: var(--shadow-lg);
}
.portrait-frame img { width: 100%; height: 100%; object-fit: cover; object-position: center;
  filter: saturate(1.02) contrast(1.01); }
/* warm professional grade overlay */
.portrait-frame::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(182,93,60,0.05), rgba(51,70,58,0.10));
  mix-blend-mode: multiply; pointer-events: none;
}
/* hero mini aanvraag form */
.hero-form {
  background: #fff; border: 1px solid var(--sand); border-radius: var(--r-lg);
  padding: 1.15rem 1.25rem 1.25rem; box-shadow: var(--shadow-md);
  max-width: 580px; margin-top: 1.75rem;
}
.hero-form__title { font-weight: 600; font-size: var(--fs-sm); margin-bottom: 0.75rem; display: flex; align-items: center; gap: 0.5rem; }
.hero-form__title svg { width: 18px; height: 18px; color: var(--olive-deep); }
.hero-form__row { display: flex; gap: 0.6rem; flex-wrap: wrap; }
.hero-form__row .field { margin: 0; flex: 1 1 130px; }
.hero-form__row .field--nr { flex: 0 1 110px; }
.hero-form__row .btn { flex: 1 1 160px; align-self: flex-end; padding: 0.8rem 1.25rem; }
.hero-form__note { display: flex; align-items: center; gap: 0.45rem; font-size: var(--fs-xs); color: var(--ink-soft); margin: 0.75rem 0 0; }
.hero-form__note svg { width: 15px; height: 15px; color: var(--success); flex: none; }
.hero-contact { display: flex; flex-wrap: wrap; gap: 0.5rem 1.5rem; margin-top: 1.15rem; font-size: var(--fs-sm); font-weight: 600; }
.hero-contact a { display: inline-flex; align-items: center; gap: 0.45rem; color: var(--ink-soft); }
.hero-contact a:hover { color: var(--olive-deep); }
.hero-contact svg { width: 17px; height: 17px; color: var(--olive); }
.hero-contact a.is-whatsapp svg { color: var(--whatsapp); }

.hero-stats { display: flex; flex-wrap: wrap; gap: 1rem 1.75rem; margin-top: 2.25rem; }
.hero-stats > div + div { border-left: 1px solid var(--sand-deep); padding-left: 1.75rem; }
.hero-stats b { display: block; font-family: var(--font-display); font-weight: 600; font-size: 1.55rem; color: var(--clay-deep); line-height: 1.15; }
.hero-stats span { font-size: var(--fs-xs); color: var(--ink-soft); font-weight: 500; }

/* ---------- Trust strip -------------------------------------------------- */
.trust {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: clamp(1.4rem, 4vw, 3.25rem); padding-block: 1.5rem;
}
.trust__label { font-size: var(--fs-xs); font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-mute); }
/* Real partner logos — desaturated to blend, full colour on hover/focus. */
.trust__logo { display: inline-flex; align-items: center; }
.trust__logo img {
  display: block; width: auto; height: 30px;
  filter: grayscale(1); opacity: 0.6;
  transition: opacity var(--dur) var(--ease), filter var(--dur) var(--ease);
}
.trust__logo:hover img, .trust__logo:focus-within img { filter: grayscale(0); opacity: 1; }
.trust__logo--nvm img  { height: 44px; }  /* tall crest needs presence */
.trust__logo--tile img { height: 26px; }  /* boxed logos read visually heavier */
@media (prefers-reduced-motion: reduce) { .trust__logo img { transition: none; } }

/* ---------- Feature / value cards --------------------------------------- */
.grid { display: grid; gap: clamp(1rem, 2.5vw, 1.5rem); }
/* minmax(0,1fr) clamps columns so wide min-content can't overflow the row */
.grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }

.card {
  background: var(--card); border: 1px solid var(--sand);
  border-radius: var(--r-lg); padding: clamp(1.4rem, 2.5vw, 2rem);
  box-shadow: var(--shadow-sm);
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); border-color: var(--sand-deep); }
.card__icon {
  width: 52px; height: 52px; border-radius: var(--r-md);
  display: grid; place-items: center; margin-bottom: 1.1rem;
  background: var(--olive-soft); color: var(--olive-deep);
}
.card__icon svg { width: 26px; height: 26px; }
.card__icon.is-clay { background: var(--clay-soft); color: var(--clay-deep); }
.card h3 { font-size: var(--fs-md); margin-bottom: 0.4rem; }
.card p { color: var(--ink-soft); font-size: var(--fs-sm); margin: 0; }

/* value prop with number */
.vp { text-align: left; }
/* editorial stat row: rule-lines instead of boxed cards */
.stat-row .vp {
  background: none; border: 0; border-radius: 0; box-shadow: none;
  border-top: 2px solid var(--sand-deep); padding: 1.25rem 0 0;
}
.stat-row .vp:hover { transform: none; box-shadow: none; }
.vp b { display: block; font-family: var(--font-display); font-size: clamp(2rem,1.4rem+2vw,2.75rem); color: var(--clay-deep); line-height: 1; }
.vp span { display: block; margin-top: 0.35rem; font-weight: 600; color: var(--ink); }
.vp small { display: block; color: var(--ink-soft); font-size: var(--fs-sm); margin-top: 0.15rem; }

/* ---------- Steps / werkwijze ------------------------------------------- */
.steps { display: grid; gap: 1.25rem; grid-template-columns: repeat(4, 1fr); counter-reset: step; position: relative; }
/* connector line that draws through the four steps on scroll */
.steps::before {
  content: ""; position: absolute; z-index: 0;
  top: calc(1.75rem + 22px); left: 8%; right: 8%; height: 2px;
  background: var(--sand-deep); transform-origin: left center;
}
.js .steps::before { transform: scaleX(0); transition: transform 1.1s var(--ease-soft); }
.steps.is-in::before { transform: scaleX(1); }
.step {
  position: relative; z-index: 1; background: #fff; border: 1px solid var(--sand);
  border-radius: var(--r-lg); padding: 1.75rem 1.4rem 1.5rem;
}
.step__num {
  width: 44px; height: 44px; border-radius: var(--r-pill);
  display: grid; place-items: center; margin-bottom: 1rem;
  background: var(--forest); color: #fff; font-family: var(--font-display);
  font-weight: 600; font-size: 1.2rem;
}
.step h3 { font-size: var(--fs-md); margin-bottom: 0.35rem; }
.step p { font-size: var(--fs-sm); color: var(--ink-soft); margin: 0; }
.step__time { display:inline-block; margin-top: 0.85rem; font-size: var(--fs-xs); font-weight: 600; color: var(--clay-deep); background: var(--clay-soft); padding: 0.25rem 0.65rem; border-radius: var(--r-pill); }

/* ---------- Split / about ----------------------------------------------- */
.split { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: clamp(2rem,5vw,4rem); align-items: center; }
.split--rev { grid-template-columns: 1.1fr 0.9fr; }
/* Foto en tekstkolom delen dezelfde bovenlijn. Gebruik dit als de tekstkolom
   duidelijk hoger is dan het portret, anders zweeft de foto tussen twee randen. */
.split--top { align-items: start; }
.split__media { position: relative; }
.split__media img, .split__media .ph {
  border-radius: var(--r-xl); box-shadow: var(--shadow-lg); width: 100%;
  aspect-ratio: 4/5; object-fit: cover; object-position: center; /* portraits at native 4:5 */
}
/* Foto die meerekt met de hoogte van de tekstkolom ernaast (Over Paco, "Geworteld in").
   De landschapsverhouding is de standaard; alleen zolang er écht twee kolommen zijn rekt
   de foto mee. Gestapeld zou height:100% in een flexkolom naar 0 zakken, en dan laadt een
   lazy afbeelding ook niet meer. */
.split__media--vul > img { aspect-ratio: 16 / 9; }
@media (min-width: 1025px) {
  .split__media--vul { display: flex; flex-direction: column; }
  .split__media--vul > img { aspect-ratio: auto; flex: 1 1 auto; min-height: 0; height: 100%; }
  .split__media--vul > span { flex: none; }
}
.stat-chip {
  position: absolute; right: -4%; top: 8%; background: #fff; border: 1px solid var(--sand);
  border-radius: var(--r-md); padding: 0.85rem 1.1rem; box-shadow: var(--shadow-lg); text-align: center;
}
.stat-chip b { font-family: var(--font-display); font-size: 1.9rem; color: var(--clay-deep); display: block; line-height: 1; }
.stat-chip span { font-size: var(--fs-xs); color: var(--ink-soft); font-weight: 600; }
/* In een splitkolom is de regel te kort voor --fs-md (ruim 40 tekens), waardoor een
   lead uiteenvalt in veel korte regels. Eén maat kleiner geeft dezelfde regellengte
   als de leads in een section-head. */
.split__body .lead { font-size: clamp(1.1875rem, 1.1rem + 0.35vw, 1.25rem); }
.checklist { display: grid; gap: 0.75rem; margin: 1.5rem 0 0; }
.checklist li { display: flex; gap: 0.7rem; align-items: flex-start; color: var(--ink-soft); }
.checklist svg { width: 22px; height: 22px; color: var(--success); flex: none; margin-top: 1px; }
.checklist b { color: var(--ink); font-weight: 600; }

/* ---------- Region map (custom illustrative coverage graphic) ----------- */
.regio-map { position: relative; }
.regio-map svg {
  width: 100%; height: auto; display: block;
  border-radius: var(--r-xl); border: 1px solid var(--sand);
  background: var(--paper-2); box-shadow: var(--shadow-md);
}
.regio-map text { font-family: var(--font-body); }
/* De kernen staan als stip op hun echte coördinaten; hun namen staan in de lijst
   ernaast. Veertig namen op de kaart zetten geeft onvermijdelijk botsende labels. */
.regio-map .rm-gebied { fill: var(--olive-soft); fill-opacity: 0.75; stroke: var(--olive); stroke-opacity: 0.28; stroke-width: 1.4; }
.regio-map .rm-stip { fill: var(--ink-mute); fill-opacity: 0.5; }
/* de papierkleurige rand houdt labels leesbaar waar ze over een stip vallen */
.regio-map .rm-markt {
  font-size: 15px; font-weight: 700; fill: var(--olive-deep); letter-spacing: 0.02em;
  paint-order: stroke fill; stroke: var(--paper-2); stroke-width: 4px; stroke-linejoin: round;
}
.regio-map .rm-basis-ring { fill: none; stroke: var(--clay); stroke-width: 1.6; stroke-opacity: 0.55; }
.regio-map .rm-basis { fill: var(--clay-deep); }
.regio-map .rm-basis-label {
  font-size: 12.5px; font-weight: 700; fill: var(--clay-deep);
  paint-order: stroke fill; stroke: var(--paper-2); stroke-width: 4px; stroke-linejoin: round;
}
.regio-map figcaption {
  margin-top: 0.75rem; font-size: var(--fs-xs); color: var(--ink-mute); text-align: center;
}
.regio-banner { margin-top: clamp(2rem,5vw,3.5rem); }
.regio-banner img {
  width: 100%; border-radius: var(--r-xl); box-shadow: var(--shadow-lg);
  aspect-ratio: 16/6; object-fit: cover; object-position: center 58%;
}
.regio-banner figcaption { margin-top: 0.75rem; font-size: var(--fs-xs); color: var(--ink-mute); text-align: center; }

/* ---------- Werkgebied: vijf gelijkwaardige deelmarkten -------------------
   Bewust géén kleurcodering of accent op één gebied: de vijf markten staan
   naast elkaar, niet als kern met een schil eromheen. */
.markt-lijst { margin-top: 1.75rem; display: grid; gap: 0.7rem; }
.markt { border: 1px solid var(--sand); border-radius: var(--r-md); background: #fff; }
.markt__kop {
  display: flex; align-items: center; gap: 0.65rem; margin: 0;
  padding: 0.9rem 1.1rem; cursor: pointer; user-select: none; list-style: none;
  border-radius: var(--r-md);
  font-family: var(--font-body); font-size: var(--fs-sm);
  font-weight: 700; color: var(--ink); letter-spacing: 0;
  transition: background 0.15s ease;
}
.markt__kop::-webkit-details-marker { display: none; }
.markt__kop:hover { background: var(--paper-2); }
.markt__kop:focus-visible { outline: 2px solid var(--ring); outline-offset: -2px; }
.markt__stip { width: 10px; height: 10px; border-radius: 50%; background: var(--olive); flex: none; }
.markt__aantal { margin-left: auto; font-weight: 500; color: var(--ink-mute); font-size: var(--fs-xs); }
.markt__chevron {
  width: 9px; height: 9px; flex: none; margin-left: 0.15rem;
  border-right: 2px solid var(--ink-mute); border-bottom: 2px solid var(--ink-mute);
  transform: rotate(45deg); transition: transform 0.2s ease;
}
.markt[open] .markt__chevron { transform: rotate(-135deg); }
.markt__kernen {
  margin: 0; padding: 0 1.1rem 1.1rem;
  font-size: var(--fs-sm); color: var(--ink-soft); line-height: 1.7;
}

/* ---------- Testimonials ------------------------------------------------- */
.quote {
  background: #fff; border: 1px solid var(--sand); border-radius: var(--r-lg);
  padding: 1.75rem; box-shadow: var(--shadow-sm);
}
.quote__stars { display: flex; gap: 2px; color: var(--clay); margin-bottom: 0.85rem; }
.quote__stars svg { width: 18px; height: 18px; }
.quote p { font-size: var(--fs-md); color: var(--ink); font-family: var(--font-display); font-weight: 400; line-height: 1.5; }
.quote__by { display: flex; align-items: center; gap: 0.7rem; margin-top: 1.1rem; }
.quote__av { width: 40px; height: 40px; border-radius: 50%; background: var(--olive-soft); color: var(--forest); display: grid; place-items: center; font-weight: 700; font-family: var(--font-display); }
.quote__by b { font-size: var(--fs-sm); }
.quote__by span { display: block; font-size: var(--fs-xs); color: var(--ink-mute); font-weight: 500; }

/* ---------- FAQ ---------------------------------------------------------- */
.faq { display: grid; gap: 0.75rem; max-width: 800px; margin-inline: auto; }
.faq__item { background: #fff; border: 1px solid var(--sand); border-radius: var(--r-md); overflow: hidden; }
.faq__q {
  width: 100%; text-align: left; background: none; border: 0; padding: 1.15rem 1.35rem;
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  font-weight: 600; font-size: var(--fs-base); color: var(--ink);
}
.faq__q .ico { width: 26px; height: 26px; flex: none; border-radius: 50%; background: var(--olive-soft); color: var(--olive-deep); display: grid; place-items: center; transition: transform var(--dur) var(--ease), background var(--dur) var(--ease); }
.faq__q .ico svg { width: 15px; height: 15px; }
.faq__item[open] .faq__q .ico { transform: rotate(45deg); background: var(--forest); color: #fff; }
.faq__a { padding: 0 1.35rem 1.25rem; color: var(--ink-soft); font-size: var(--fs-sm); }
.faq__item summary { list-style: none; cursor: pointer; }
.faq__item summary::-webkit-details-marker { display: none; }

/* ---------- CTA band ----------------------------------------------------- */
.cta-band { position: relative; overflow: hidden; }
.cta-band__inner {
  background: var(--forest); color: #EAE4D6; border-radius: var(--r-xl);
  padding: clamp(2.5rem, 6vw, 4.5rem); text-align: center; position: relative; overflow: hidden;
}
.cta-band__inner::before {
  content: ""; position: absolute; width: 380px; height: 380px; border-radius: 50%;
  background: radial-gradient(circle, rgba(182,93,60,0.4), transparent 70%);
  top: -140px; right: -80px;
}
.cta-band__inner::after {
  content: ""; position: absolute; width: 320px; height: 320px; border-radius: 50%;
  background: radial-gradient(circle, rgba(95,107,75,0.5), transparent 70%);
  bottom: -160px; left: -60px;
}
.cta-band__inner > * { position: relative; z-index: 1; }
.cta-band h2 { color: #fff; }
.cta-band .lead { color: #D7CFBF; margin-inline: auto; max-width: 560px; }
.cta-band__actions { display: flex; flex-wrap: wrap; gap: 0.85rem; justify-content: center; margin-top: 1.75rem; }

/* ---------- Contact ------------------------------------------------------ */
.contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1.5rem, 4vw, 3rem); align-items: start; }
.info-list { display: grid; gap: 1.1rem; margin-top: 1.5rem; }
.info-list li { display: flex; gap: 0.9rem; align-items: flex-start; }
.info-list .ico { width: 44px; height: 44px; border-radius: var(--r-md); background: var(--clay-soft); color: var(--clay-deep); display: grid; place-items: center; flex: none; }
.info-list .ico svg { width: 20px; height: 20px; }
.info-list b { display: block; font-size: var(--fs-sm); color: var(--ink); }
.info-list a, .info-list span { color: var(--ink-soft); font-size: var(--fs-sm); }
.info-list a:hover { color: var(--clay-deep); }

.form { background: #fff; border: 1px solid var(--sand); border-radius: var(--r-lg); padding: clamp(1.5rem,3vw,2.25rem); box-shadow: var(--shadow-md); }
.field { margin-bottom: 1.1rem; }
.field label { display: block; font-size: var(--fs-sm); font-weight: 600; margin-bottom: 0.4rem; color: var(--ink); }
.field input, .field select, .field textarea {
  width: 100%; padding: 0.8rem 1rem; border-radius: var(--r-sm);
  border: 1.5px solid var(--sand-deep); background: var(--paper); color: var(--ink);
  font: inherit; font-size: var(--fs-sm); transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease), background var(--dur) var(--ease);
}
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none; border-color: var(--olive); background: #fff; box-shadow: 0 0 0 4px var(--ring);
}
.field textarea { min-height: 130px; resize: vertical; }
.field__hint { font-size: var(--fs-xs); color: var(--ink-mute); margin-top: 0.35rem; }
.field--row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }

/* ---------- Footer ------------------------------------------------------- */
.site-footer { background: #221F1A; color: #C9C0B2; padding-block: clamp(3rem,6vw,4.5rem) 2rem; }
.footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1.2fr; gap: 2.5rem; }
.site-footer .logo__name { color: #fff; }
.site-footer p { color: var(--footer-link); font-size: var(--fs-sm); }
.footer-col h4 { color: #fff; font-family: var(--font-body); font-size: var(--fs-sm); font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; margin-bottom: 1rem; }
.footer-col ul { display: grid; gap: 0.6rem; }
.footer-col a { color: var(--footer-link); font-size: var(--fs-sm); transition: color var(--dur) var(--ease); }
.footer-col a:hover { color: #fff; }
.footer-badges { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 1rem; }
.footer-badges span { font-size: var(--fs-xs); font-weight: 600; color: #C9C0B2; border: 1px solid #3A352D; padding: 0.3rem 0.7rem; border-radius: var(--r-pill); }
.footer-bottom {
  margin-top: 2.5rem; padding-top: 1.5rem; border-top: 1px solid #3A352D;
  display: flex; flex-wrap: wrap; gap: 1rem; justify-content: space-between; align-items: center;
  font-size: var(--fs-xs); color: var(--footer-dim);
}

/* ---------- Page hero (subpages) ---------------------------------------- */
.page-hero { padding-block: clamp(2.5rem,5vw,4rem) clamp(2rem,4vw,3rem); background: var(--paper-2); position: relative; overflow: hidden; }
.page-hero::after { content:""; position:absolute; width:420px; height:420px; border-radius:50%; right:-160px; top:-160px; background: radial-gradient(circle, var(--clay-soft), transparent 70%); opacity:.7; }
.breadcrumb { display: flex; gap: 0.5rem; align-items: center; font-size: var(--fs-xs); color: var(--ink-mute); margin-bottom: 1rem; }
.breadcrumb a:hover { color: var(--clay-deep); }
.page-hero h1 { font-size: var(--fs-xl); }
.page-hero .lead { max-width: 640px; }

/* pricing highlight */
.price-tag { display:inline-flex; align-items:baseline; gap:.4rem; font-family:var(--font-display); }
.price-tag b { font-size: clamp(2.4rem,1.6rem+2.5vw,3.4rem); color: var(--clay-deep); line-height:1; }
.price-tag span { color: var(--ink-soft); font-family: var(--font-body); font-weight:600; font-size: var(--fs-sm); }

/* ---------- Reveal animation -------------------------------------------- */
/* Hidden state only applies when JS is active (.js on <html>), so content
   is always visible if JavaScript is disabled or fails. */
.js .reveal { opacity: 0; transform: translateY(12px); transition: opacity 0.65s var(--ease-soft), transform 0.65s var(--ease-soft); }
.reveal.is-in { opacity: 1 !important; transform: none !important; }
/* media reveal = a soft left-to-right clip wipe, not a slide/fade.
   De wipe zit op het beeld zelf en niet op de wrapper: een clip-path op de wrapper
   snijdt namelijk ook het statblokje af dat bewust buiten de foto uitsteekt. */
.js .reveal--media { opacity: 1; transform: none; }
/* Houd deze twee waarden kaal: inset(0 100% 0 0) en inset(0 0 0 0). Zodra je er calc(),
   losse waarden of `round` in mengt, kan de browser de vorm niet meer interpoleren, blijft
   de wipe op zijn beginwaarde hangen en is het beeld onzichtbaar. */
.js .reveal--media > img,
.js .reveal--media > svg,
.js .reveal--media > .ph {
  clip-path: inset(0 100% 0 0); transition: clip-path 0.9s var(--ease-soft);
}
.reveal--media.is-in > img,
.reveal--media.is-in > svg,
.reveal--media.is-in > .ph { clip-path: inset(0 0 0 0) !important; }
/* Die clip is een rechthoek met scherpe hoeken, terwijl het beeld ronde hoeken heeft. In het
   hoekje tussen de ronde rand en die rechthoek bleef een stukje slagschaduw staan, zichtbaar
   als een grijs driehoekje, terwijl de schaduw eromheen juist volledig werd weggeknipt. Deze
   beelden hadden dus toch al geen zichtbare schaduw; zonder schaduw is het driehoekje weg. */
.js .reveal--media > img,
.js .reveal--media > svg,
.js .reveal--media > .ph { box-shadow: none; }
.reveal[data-delay="1"] { transition-delay: 0.08s; }
.reveal[data-delay="2"] { transition-delay: 0.16s; }
.reveal[data-delay="3"] { transition-delay: 0.24s; }
.reveal[data-delay="4"] { transition-delay: 0.32s; }
.reveal[data-delay="5"] { transition-delay: 0.40s; }

@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1 !important; transform: none !important; transition: none !important; }
  .reveal--media > img, .reveal--media > svg, .reveal--media > .ph { clip-path: none !important; transition: none !important; }
  .steps::before { transform: scaleX(1) !important; transition: none !important; }
  .btn, .card, .btn--primary:hover, .card:hover { transition: none !important; transform: none !important; }
  * { animation: none !important; }
}

/* ---------- Responsive --------------------------------------------------- */
@media (max-width: 960px) {
  .hero__grid { grid-template-columns: 1fr; }
  .hero__visual { max-width: 460px; margin-inline: auto; }
  .split, .split--rev, .contact-grid { grid-template-columns: 1fr; }
  .split__media { max-width: 460px; }
  .grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .steps::before { display: none; } /* connector only reads in a single row */
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 2rem; }
}

/* Collapse to hamburger at 900px — the full nav is too wide to fit below that */
@media (max-width: 900px) {
  .nav__links, .nav__phone { display: none; }
  .nav__toggle { display: inline-flex; }
  .site-header.nav-open .nav__links {
    display: flex; position: absolute; top: 74px; left: 0; right: 0;
    flex-direction: column; align-items: stretch; gap: 0.15rem;
    background: var(--paper); border-bottom: 1px solid var(--sand);
    padding: 1rem clamp(1.15rem,4vw,2.5rem) 1.5rem; box-shadow: var(--shadow-md);
  }
  .site-header.nav-open .nav__links a { padding: 0.85rem 1rem; font-size: var(--fs-base); }
  .site-header.nav-open .nav__links .btn { margin-top: 0.5rem; }
  .stat-chip { right: 4%; }
}

@media (max-width: 540px) {
  .grid--3, .grid--4, .grid--2, .steps { grid-template-columns: 1fr; }
  .field--row { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr; }
  .hero__cta .btn, .cta-band__actions .btn { width: 100%; }
  /* stack the hero form fields so placeholders never truncate */
  .hero-form__row { flex-direction: column; gap: 0.6rem; }
  .hero-form__row .field { flex: 1 1 100%; }
}

/* ---------- Mobile action bar -------------------------------------------- */
.mobile-bar { display: none; }
@media (max-width: 760px) {
  .mobile-bar {
    position: fixed; bottom: 0; left: 0; right: 0; z-index: 70;
    display: grid; grid-template-columns: auto auto 1fr; gap: 0.5rem;
    padding: 0.65rem clamp(1rem, 4vw, 1.5rem) calc(0.65rem + env(safe-area-inset-bottom));
    background: rgba(250, 246, 239, 0.94);
    backdrop-filter: saturate(1.3) blur(10px);
    -webkit-backdrop-filter: saturate(1.3) blur(10px);
    border-top: 1px solid var(--sand);
  }
  .mobile-bar .btn { padding: 0.85rem 1.15rem; }
  .mobile-bar .btn--ghost { background: #fff; }
  body { padding-bottom: 84px; } /* keep footer clear of the bar */
}

/* ---------- Mobile hero: designed, not shrunk ---------------------------- */
@media (max-width: 760px) {
  .hero { padding-block: 1.5rem 2.5rem; }
  .hero__copy { order: 1; }
  .hero__visual { order: 2; max-width: 300px; margin-top: 0.5rem; }
  .hero h1 { font-size: clamp(2rem, 1.3rem + 3.8vw, 2.7rem); margin-bottom: 0.75rem; }
  .hero h1 br { display: none; }               /* let it wrap naturally on phone */
  .hero .lead { font-size: 1.02rem; }
  .hero__badges { display: none; }             /* redundant with the trust strip below */
  .hero-form { margin-top: 1.25rem; }
  .hero-form__title { font-size: var(--fs-sm); }
  .hero-contact { margin-top: 1rem; gap: 0.4rem 1.1rem; }
}

/* ==========================================================================
   Hero — tekst/formulier links, ingekaderd portret rechts (Over Paco-stijl).
   Staat als laatste in het bestand en overschrijft dus de eerdere .hero-regels.
   ========================================================================== */
.hero--split { padding: clamp(1.75rem, 3vw, 2.5rem) 0 clamp(2rem, 3.5vw, 3rem); overflow: visible; }
.hero--split .hero__grid {
  display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 4.5rem); align-items: center;
}
.hero--split .hero__copy { display: flex; flex-direction: column; justify-content: center; padding: 0; }
.hero--split .hero__copy > * { max-width: 560px; width: 100%; }
.hero--split .hero-form { max-width: 560px; }
/* type afgestemd op de smallere kolom: 2 regels kop, formulier boven de vouw */
.hero--split h1 { font-size: clamp(2.2rem, 1.3rem + 2.5vw, 3.25rem); margin-bottom: 0.8rem; }
.hero--split .lead { font-size: clamp(1.02rem, 0.95rem + 0.35vw, 1.15rem); margin-bottom: 0.5rem; }

/* ingekaderd portret: vult zijn kolom, blijft lager dan de tekstkolom */
.hero__portrait { margin: 0; max-width: 420px; width: 100%; justify-self: center; }
.hero__portrait img {
  width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: center 20%;
  border-radius: var(--r-xl); box-shadow: var(--shadow-lg);
}

@media (max-width: 900px) {
  .hero--split .hero__grid { grid-template-columns: 1fr; gap: 1.75rem; }
  .hero--split .hero__copy { order: 1; }
  .hero__portrait { order: 2; max-width: 260px; }
}