/* ============================================================
   Veilig Veranderen — design system
   ============================================================ */

:root {
  /* Palette — taken from user brief + drawn out of the logo */
  --paper:        #f7f5ef;   /* warm off-white, body background */
  --paper-2:      #efeae0;   /* slightly deeper paper, alternating sections */
  --mist:         #cfdfda;   /* pale mint mist */
  --stone:        #C9D6D9;   /* pale teal-grey */
  --tide:         #6D9099;   /* mid teal-grey, the "logo blue" */
  --deep:         #1f4e5c;   /* deep ocean teal — primary contrast */
  --deeper:       #122d36;   /* even deeper, for headings on light */
  --copper:       #b5825a;   /* warm copper — accent / CTA */
  --copper-soft:  #d8b594;   /* soft copper tint */
  --ink:          #0e2228;   /* near-black, body text */
  --ink-soft:     #3c4f55;   /* secondary text */
  --line:         rgba(18, 45, 54, 0.10);

  /* Type */
  --serif: "Instrument Serif", "Cormorant Garamond", "Georgia", serif;
  --sans:  "Inter", "Helvetica Neue", system-ui, sans-serif;
  --mono:  "JetBrains Mono", ui-monospace, "SFMono-Regular", monospace;

  /* Sizing */
  --container: 1320px;
  --gutter: clamp(1.25rem, 3vw, 2.5rem);

  /* Motion */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-soft: cubic-bezier(0.4, 0, 0.2, 1);
}

/* ----- base ----- */
* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

::selection { background: var(--deep); color: var(--paper); }

img, svg { display: block; max-width: 100%; }
/* Aspect-ratio defense: <img> tags now have explicit width/height attrs (CLS fix).
   When only ONE dimension is controlled by CSS, keep the other auto. Component CSS
   that explicitly sets both dimensions still wins via specificity. */
img { height: auto; }

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

button { font: inherit; cursor: pointer; }

/* ----- typography ----- */
.h-display {
  font-family: var(--serif);
  font-weight: 400;
  line-height: 0.95;
  letter-spacing: -0.015em;
  color: var(--deeper);
}
.h-display em {
  font-style: italic;
  color: var(--deep);
}

.eyebrow {
  font-family: var(--mono);
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--tide);
  font-weight: 500;
}

.lead {
  font-family: var(--sans);
  font-size: clamp(1.05rem, 1.1vw + 0.85rem, 1.25rem);
  line-height: 1.55;
  color: var(--ink-soft);
  max-width: 56ch;
}

/* ----- container ----- */
.container {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

/* ----- buttons ----- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.95rem 1.55rem;
  border-radius: 999px;
  font-size: 0.95rem;
  font-weight: 500;
  letter-spacing: -0.005em;
  border: 1px solid transparent;
  transition: transform 0.4s var(--ease-out),
              background 0.3s var(--ease-soft),
              color 0.3s var(--ease-soft),
              border-color 0.3s var(--ease-soft);
  will-change: transform;
}
.btn:hover { transform: translateY(-1px); }
.btn .arrow {
  transition: transform 0.4s var(--ease-out);
}
.btn:hover .arrow {
  transform: translateX(4px);
}

.btn-primary {
  background: var(--deep);
  color: var(--paper);
  border-color: var(--deep);
}
.btn-primary:hover { background: var(--deeper); border-color: var(--deeper); }

.btn-copper {
  background: var(--copper);
  color: #fff8ee;
  border-color: var(--copper);
}
.btn-copper:hover { background: #a07248; border-color: #a07248; }

.btn-ghost {
  background: transparent;
  color: var(--deep);
  border-color: var(--line);
}
.btn-ghost:hover {
  border-color: var(--deep);
  background: rgba(31, 78, 92, 0.05);
}

/* ----- header ----- */
.site-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 50;
  transition: backdrop-filter 0.4s, background 0.4s, border-color 0.4s;
  border-bottom: 1px solid transparent;
}
.site-header.is-scrolled,
.site-header.nav-open {
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  background: rgba(247, 245, 239, 0.92);
  border-bottom-color: var(--line);
}
.nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  /* keep the container's horizontal gutter — only override vertical padding */
  padding-top: 1.1rem;
  padding-bottom: 1.1rem;
}
.nav-logo {
  display: inline-flex;
}
.nav-logo img { height: 64px; width: auto; }
.nav-links {
  display: none;
  gap: 2.2rem;
  font-size: 0.92rem;
}
@media (min-width: 900px) { .nav-links { display: flex; } }

/* ---------- hamburger toggle (mobile only) ---------- */
.nav-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  background: transparent;
  border: 1px solid rgba(31, 78, 92, 0.18);
  border-radius: 999px;
  cursor: pointer;
  color: var(--deep);
  transition: background 0.2s, border-color 0.2s;
}
.nav-toggle:hover { background: rgba(31, 78, 92, 0.06); }
.nav-toggle-bars,
.nav-toggle-bars::before,
.nav-toggle-bars::after {
  display: block;
  width: 18px;
  height: 1.5px;
  background: currentColor;
  border-radius: 2px;
  transition: transform 0.3s var(--ease-out), opacity 0.2s;
}
.nav-toggle-bars {
  position: relative;
}
.nav-toggle-bars::before,
.nav-toggle-bars::after {
  content: "";
  position: absolute;
  left: 0;
}
.nav-toggle-bars::before { top: -6px; }
.nav-toggle-bars::after  { top:  6px; }

/* open state: morph into X */
.nav-toggle[aria-expanded="true"] .nav-toggle-bars {
  background: transparent;
}
.nav-toggle[aria-expanded="true"] .nav-toggle-bars::before {
  transform: translateY(6px) rotate(45deg);
}
.nav-toggle[aria-expanded="true"] .nav-toggle-bars::after {
  transform: translateY(-6px) rotate(-45deg);
}
@media (min-width: 900px) {
  .nav-toggle { display: none; }
}

/* ---------- mobile drawer panel ---------- */
.nav-mobile-panel {
  position: fixed;
  inset: 0;
  z-index: 40; /* well under header (50) so the hamburger stays clickable */
  background: rgba(247, 245, 239, 0.97);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  display: flex;
  align-items: flex-start;
  padding-top: 6.4rem; /* clear the header + match item-to-item rhythm above Home */
  overflow-y: auto; /* if the items don't fit, the panel can scroll */
  opacity: 0;
  transform: translateY(-8px);
  pointer-events: none;
  transition: opacity 0.32s var(--ease-out), transform 0.32s var(--ease-out);
}
.nav-mobile-panel[hidden] { display: none; }
.nav-mobile-panel.is-open {
  opacity: 1;
  transform: none;
  pointer-events: auto;
}
.nav-mobile-links {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  width: 100%;
  padding: 0 1.5rem 2rem;
}
.nav-mobile-link {
  display: block;
  padding: 0.72rem 0.4rem;
  font-family: var(--serif);
  font-size: 1.4rem;
  color: var(--deeper);
  border-bottom: 1px solid rgba(31, 78, 92, 0.08);
  letter-spacing: -0.01em;
}
.nav-mobile-link:hover { color: var(--copper); }
.nav-mobile-link--sub {
  padding: 0.6rem 0.4rem 0.6rem 1.4rem;
  font-size: 1.1rem;
  color: var(--ink-soft);
}
.nav-mobile-link--sub::before {
  content: "—";
  display: inline-block;
  margin-right: 0.6rem;
  color: var(--copper);
  opacity: 0.7;
}
.nav-mobile-cta {
  margin-top: 1.2rem;
  align-self: center;
}
@media (min-width: 900px) {
  .nav-mobile-panel { display: none !important; }
}

/* lock background scroll while drawer is open */
body.nav-open { overflow: hidden; }

/* desktop-only header CTA */
@media (max-width: 899px) {
  .nav-cta { display: none; }
}

.nav-link {
  position: relative;
  color: var(--ink);
  padding: 0.25rem 0;
}
.nav-link::after {
  content: "";
  position: absolute;
  left: 0; bottom: -2px;
  width: 100%; height: 1px;
  background: var(--deep);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.45s var(--ease-out);
}
.nav-link:hover::after { transform: scaleX(1); }


/* ━━━━━━━━━━━━━ Diensten dropdown ━━━━━━━━━━━━━ */
.nav-dropdown {
  position: relative;
  display: inline-flex;
  align-items: baseline;
}
.nav-dropdown-toggle {
  display: inline-flex !important;
  align-items: center;
  gap: 0.38rem;
}
.nav-dropdown-caret {
  transition: transform 0.35s var(--ease-out);
  opacity: 0.7;
}
.nav-dropdown:hover .nav-dropdown-caret,
.nav-dropdown:focus-within .nav-dropdown-caret {
  transform: rotate(180deg);
  opacity: 1;
}
/* invisible bridge so the menu doesn't drop while the cursor crosses the gap */
.nav-dropdown::after {
  content: "";
  position: absolute;
  top: 100%;
  left: -10%;
  width: 120%;
  height: 18px;
  pointer-events: none;
}
.nav-dropdown:hover::after,
.nav-dropdown:focus-within::after { pointer-events: auto; }

.nav-dropdown-menu {
  position: absolute;
  top: calc(100% + 18px);
  left: 50%;
  transform: translateX(-50%) translateY(-6px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.35s var(--ease-out), transform 0.35s var(--ease-out);

  min-width: 320px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 0.55rem;
  box-shadow: 0 26px 60px -28px rgba(18, 45, 54, 0.30), 0 4px 14px -8px rgba(18, 45, 54, 0.14);
  display: flex;
  flex-direction: column;
  gap: 0.12rem;
  z-index: 60;
}
.nav-dropdown:hover .nav-dropdown-menu,
.nav-dropdown:focus-within .nav-dropdown-menu {
  opacity: 1;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}
.nav-dropdown-item {
  display: flex;
  gap: 0.85rem;
  align-items: flex-start;
  padding: 0.7rem 0.85rem;
  border-radius: 4px;
  color: var(--ink);
  transition: background 0.25s var(--ease-out);
  text-decoration: none;
}
.nav-dropdown-item:hover,
.nav-dropdown-item:focus-visible {
  background: var(--paper-2);
  outline: none;
}
.nav-dropdown-num {
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.2em;
  color: var(--copper);
  flex-shrink: 0;
  padding-top: 4px;
  line-height: 1;
}
.nav-dropdown-content {
  display: flex;
  flex-direction: column;
  gap: 0.18rem;
}
.nav-dropdown-content strong {
  font-family: var(--sans);
  font-weight: 500;
  font-size: 0.95rem;
  color: var(--deeper);
  line-height: 1.2;
  letter-spacing: -0.005em;
}
.nav-dropdown-content small {
  font-family: var(--sans);
  font-size: 0.76rem;
  color: var(--ink-soft);
  line-height: 1.3;
}


/* ============================================================
   HERO — full-width portrait, image's own beige line IS the
   section divide. Hero ends ABOVE the fold so users see Ilone
   leaning on the edge and a peek of the next section below.
   ============================================================ */
.hero {
  position: relative;
  padding-top: 6rem;
  padding-bottom: 0;
  min-height: 92vh;
  overflow: hidden;
  isolation: isolate;
  background:
    radial-gradient(circle at 88% 20%, rgba(207, 223, 218, 0.55), transparent 45%),
    radial-gradient(circle at 12% 60%, rgba(201, 214, 217, 0.45), transparent 50%),
    var(--paper);
}

.hero-grain::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 0.5 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)' opacity='0.55'/></svg>");
  mix-blend-mode: multiply;
  opacity: 0.14;
  pointer-events: none;
  z-index: 0;
}

/* big editorial mark — top right */
.hero-mark {
  position: absolute;
  top: 8.5rem;
  right: 3rem;
  width: 120px;
  height: auto;
  opacity: 0.15;
  z-index: 1;
  pointer-events: none;
  transform: rotate(-6deg);
}
.hero-container {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: flex-start;
  /* +5vh nudges the left copy block down so it sits more vertically centred */
  padding-top: calc(4.5rem + 5vh);
}
.hero-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
  width: 100%;
}

.hero-copy {
  max-width: 600px;
}

.hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.45rem 1rem;
  border: 1px solid rgba(31, 78, 92, 0.18);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.92);
  box-shadow: 0 1px 0 rgba(255,255,255,0.6) inset,
              0 6px 18px -8px rgba(31, 78, 92, 0.18);
  backdrop-filter: blur(8px);
}
/* banner variant — shown above the arch on mobile only */
.hero-eyebrow--banner { display: none; }
.hero-eyebrow .dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--copper);
  box-shadow: 0 0 0 4px rgba(181, 130, 90, 0.18);
  animation: pulse-dot 2.4s ease-in-out infinite;
}
@keyframes pulse-dot {
  0%, 100% { box-shadow: 0 0 0 4px rgba(181, 130, 90, 0.18); }
  50%      { box-shadow: 0 0 0 9px rgba(181, 130, 90, 0); }
}

.hero-title {
  font-size: clamp(2.8rem, 6.8vw, 6.2rem);
  margin: 1.2rem 0 1.4rem;
  font-family: var(--serif);
  font-weight: 400;
  line-height: 0.95;
  letter-spacing: -0.022em;
  color: var(--deeper);
}
.hero-title em {
  font-style: italic;
  color: var(--deep);
  position: relative;
  white-space: nowrap;
}
.hero-title em::after {
  /* subtle underline accent for the italic word */
  content: "";
  position: absolute;
  left: 4%; right: 12%; bottom: 0.07em;
  height: 0.06em;
  background: var(--copper);
  opacity: 0.5;
  border-radius: 4px;
}

.hero-cta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.8rem;
  margin-top: 0.2rem;
}

.hero-callouts {
  display: flex;
  gap: 2rem;
  margin-top: 1.8rem;
  flex-wrap: wrap;
  font-size: 0.82rem;
  color: var(--ink-soft);
  border-top: 1px solid var(--line);
  padding-top: 1.2rem;
}
.hero-callouts strong {
  color: var(--deep);
  font-weight: 400;
  font-family: var(--serif);
  font-size: 1.4rem;
  display: block;
  letter-spacing: -0.01em;
  margin-bottom: 0.15rem;
}
.hero-callout { flex: 1 1 160px; min-width: 140px; }

/* ============================================================
   HERO stage + portrait
   Arch and portrait live inside a single .hero-visual wrapper so
   they share one coordinate space — Ilone stays centered in the
   arch at every viewport size. Tweak the CSS vars at the top of
   .hero-visual to resize/reposition the whole composition.
   ============================================================ */
.hero-stage {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: 1;

  /* ============ tweak these to retune the whole composition ============ */
  /* arch geometry */
  --arch-right: clamp(7rem, 11vw, 13rem);
  /* arch caps at 580px — the exact value where portrait would naturally hit
     its 1200px cap, so arch + Ilone scale in lock-step (ratio stays 1.55)
     and the arch stays clear of the fixed header on wide-but-short screens */
  --arch-w: clamp(500px, 34vw, 580px);
  /* arch height derived from width via aspect-ratio 3/4 */
  --arch-h: calc(var(--arch-w) * 4 / 3);

  /* source image metrics — only change if the PNG is swapped */
  --img-aspect: 2.063;          /* native width / height */
  --face-x: 0.707;              /* Ilone's face horizontal position in image, 0-1 */

  /* portrait sizing relative to arch, with absolute pixel cap so she doesn't
     grow unbounded on wide screens (cap kicks in around viewport ~1700px+) */
  --portrait-h-mult: 1.55;
  --portrait-h-max: 1200px;
  --portrait-h: min(
    calc(var(--arch-h) * var(--portrait-h-mult)),
    var(--portrait-h-max)
  );
  --portrait-bottom: -30px;     /* negative pushes Ilone down, trims beige strip */
  --face-nudge: 0px;            /* + moves Ilone left, - moves her right */

  /* derived: portrait right offset so face lands at arch center */
  --portrait-right: calc(
    var(--arch-right)
    + var(--arch-w) / 2
    - var(--portrait-h) * var(--img-aspect) * (1 - var(--face-x))
    + var(--face-nudge)
  );
}

.hero-orb {
  position: absolute;
  width: clamp(100px, 9vw, 130px);
  height: clamp(100px, 9vw, 130px);
  border-radius: 50%;
  background: var(--copper);
  box-shadow: 0 18px 32px -10px rgba(181, 130, 90, 0.4),
              inset -6px -10px 20px rgba(0, 0, 0, 0.08);
  z-index: 1;
  left: -200px;
  top: -200px;
  will-change: transform;
}

.hero-stage-shape {
  position: absolute;
  right: var(--arch-right);
  bottom: 0;
  width: var(--arch-w);
  aspect-ratio: 3 / 4;
  background: linear-gradient(155deg, var(--mist) 0%, var(--stone) 55%, var(--tide) 100%);
  border-radius: 50% 50% 0 0 / 50% 50% 0 0;
  box-shadow: 0 60px 100px -40px rgba(31, 78, 92, 0.28);
  z-index: 2;
}

.hero-portrait {
  position: absolute;
  right: var(--portrait-right);
  bottom: var(--portrait-bottom);
  height: var(--portrait-h);
  width: auto;
  z-index: 3;
  pointer-events: none;
}

.hero-portrait img {
  display: block;
  height: 100%;
  width: auto;
  max-width: none;
}

/* divider line to the left of the portrait — keeps section break full-width */
.hero-portrait::before {
  content: "";
  position: absolute;
  right: 100%;
  bottom: 0;
  width: 100vw;
  height: 1px;
  background: rgba(31, 78, 92, 0.10);
}

/* tablet */
@media (max-width: 1200px) {
  .hero-stage {
    --arch-right: clamp(3rem, 6vw, 7rem);
    --arch-w: clamp(440px, 42vw, 620px);
  }
}

/* mobile-only decorative bits hidden on desktop */
.hero-mobile-dots,
.hero-mobile-rule { display: none; }
.cta-mobile-br { display: none; }
.hero-callout .callout-mobile { display: none; }
.hero-cta-row .cta-mobile { display: none; }
@media (max-width: 1023px) {
  .cta-mobile-br { display: block; }
  .hero-callout .callout-desktop { display: none; }
  .hero-callout .callout-mobile { display: block; }
  .hero-cta-row .cta-desktop { display: none; }
  .hero-cta-row .cta-mobile { display: inline; }
}

/* ============================================================
   MOBILE HERO — bespoke layout (≤1023px)
   The full visual composition (Ilone, arch, copper orb, dots, teal
   table) lives in a single pre-composed PNG background. We only
   overlay the text — eyebrow + title + lead + CTA at the top
   (cream area of the image) and the rule banner on the teal table
   at the bottom.
   ============================================================ */
@media (max-width: 1023px) {
  .hero {
    position: relative;
    display: block;
    /* hero extends past the fold by 19.4vw — the distance from the
       image's "first fully dark teal" row (89.1% of image height) down
       to the image bottom. With the image anchored to hero bottom, this
       lands the dark-teal threshold EXACTLY at the fold line. */
    min-height: calc(100svh + 19.4vw);
    padding: 5.5rem 1.25rem 0;
    overflow: hidden;
    /* matches the cream tint at the top of the composed bg image so the
       header/eyebrow zone above the image flows into it seamlessly
       (sampled from the actual PNG: #F5EFE7) */
    background-color: #F5EFE7;
    background-image: url("../assets/portraits/hero-mobile-composed.webp?v=2");
    background-size: 100% auto;       /* fit width, natural height */
    background-position: center bottom; /* anchor to hero bottom (past fold) */
    background-repeat: no-repeat;
  }
  .hero-mark { display: none; }
  /* the original arch+portrait composition is replaced by the background image */
  .hero-stage { display: none; }
  .hero-mobile-dots { display: none; }

  /* eyebrow pill — full container width, dot+text left-aligned,
     transparent so the cream paper bg shows through */
  .hero-eyebrow--banner {
    display: inline-flex;
    width: 100%;
    max-width: none;
    margin: 1.5rem 0 1.4rem;
    padding: 0.45rem 1rem;
    justify-content: flex-start;
    background: transparent;
    border-color: rgba(31, 78, 92, 0.22);
    box-shadow: none;
    backdrop-filter: none;
  }
  .hero-eyebrow--banner .eyebrow {
    font-size: 0.55rem;
    letter-spacing: 0.13em;
    white-space: nowrap;
  }
  /* the in-copy eyebrow stays inside .hero-copy on desktop only */
  .hero-copy > .hero-eyebrow { display: none; }

  /* copy block — overlays the cream area at the top of the bg image.
     Keep position: static so the absolutely-positioned .hero-callouts
     can anchor to .hero (the section), not this inner container. */
  .hero-container {
    padding: 0;
    position: static;
  }
  .hero-grid { gap: 0; }
  .hero-copy { max-width: 100%; }
  .hero-title {
    font-size: clamp(2.4rem, 9.2vw, 3.1rem);
    margin: 0 0 0.9rem;
    line-height: 1.05;
  }
  .lead {
    margin: 0 0 1.3rem;
    font-size: 0.9rem;
    line-height: 1.5;
    max-width: 55%;
  }
  .lead-tail { display: none; }

  /* compact dark CTA — sits left, two-line text + arrow on the right */
  .hero-cta-row {
    margin-top: 0;
    flex-direction: column;
    align-items: flex-start;
  }
  .hero-cta-row .btn-ghost { display: none; }
  .hero-cta-row .btn-primary {
    padding: 0.85rem 1.15rem;
    font-size: 0.82rem;
    line-height: 1.2;
    border-radius: 16px;
    /* tight width since the trailing arrow is hidden on mobile (below) */
    max-width: 11.5rem;
    text-align: left;
    gap: 0;
  }
  .hero-cta-row .btn-primary .btn-label {
    flex: 1 1 auto;
    min-width: 0;
  }
  /* drop the trailing arrow on mobile — it just widens the pill */
  .hero-cta-row .btn-primary .arrow { display: none; }

  /* trust-badge row — sits on the dark teal table at the bottom of the
     hero image, white text on the dark bg, with a soft cream curve
     immediately below that breaks the teal → onderstroom transition */
  .hero-callouts {
    display: flex;
    position: absolute;
    left: 0;
    right: 0;
    margin: 0 auto;
    width: calc(100% - 3rem);
    max-width: 320px;
    bottom: calc(19.4vw + 1.5rem);
    gap: 0;
    padding: 0;
    background: transparent;
    border: none;
    z-index: 4;
  }
  /* equal halves so the central separator sits at the container's geometric
     center; text aligned toward the separator with equal inner padding so
     both labels are equidistant from the line */
  .hero-callouts .hero-callout {
    flex: 1 1 0;
    padding: 0;
    min-width: 0;
  }
  .hero-callouts .hero-callout:first-child {
    text-align: right;
    padding-right: 0.85rem;
  }
  .hero-callouts .hero-callout + .hero-callout {
    text-align: left;
    border-left: 1px solid rgba(255, 255, 255, 0.18);
    padding-left: 0.85rem;
  }
  /* drop the 3rd callout (Delft) on mobile — two fits the band */
  .hero-callouts .hero-callout:nth-child(3) { display: none; }
  /* compact single-line label on mobile — italic serif, no description */
  .hero-callouts .callout-mobile strong {
    display: block;
    color: var(--paper);
    font-family: var(--serif);
    font-style: italic;
    font-size: 0.78rem;
    font-weight: 400;
    letter-spacing: -0.005em;
    line-height: 1.25;
  }

  /* the curve — a cream half-ellipse rising into the teal table from
     below, sits BELOW the fold (within the bottom of the hero) as the
     visual hand-off into the next section. */
  .hero::after {
    content: "";
    position: absolute;
    bottom: -1px;
    left: -2%;
    right: -2%;
    height: 56px;
    background: var(--paper);
    border-radius: 50% 50% 0 0 / 100% 100% 0 0;
    z-index: 3;
    pointer-events: none;
  }

  /* drop the bottom rule banner — the curve + callouts replace it */
  .hero-mobile-rule { display: none; }
}

/* ============================================================
   ONDERSTROOM — VSL section
   ============================================================ */
.onderstroom {
  position: relative;
  padding: 6rem 0 3.5rem;
  background: linear-gradient(to bottom, var(--paper) 0%, var(--mist) 100%);
  overflow: hidden;
}

/* mobile: pull the section up so "De handtekening" sits close to the
   hero curve, and drop the gradient so the top is solid --paper and
   matches the cream curve EXACTLY (no interpolated seam) */
@media (max-width: 1023px) {
  .onderstroom {
    padding-top: 2.5rem;
    background: var(--paper);
  }
}

.onderstroom-quote {
  font-family: var(--serif);
  font-size: clamp(1.8rem, 3.6vw, 3rem);
  line-height: 1.05;
  letter-spacing: -0.015em;
  color: var(--deeper);
  text-align: center;
  max-width: 22ch;
  margin: 0 auto 1.2rem;
}
.onderstroom-quote em { font-style: italic; color: var(--copper); }
.onderstroom-sub {
  text-align: center;
  max-width: 52ch;
  margin: 0 auto 2.8rem;
  color: var(--ink-soft);
  font-size: 1rem;
  line-height: 1.6;
}

/* ----- VSL player (placeholder) ----- */
.vsl {
  margin: 0 auto;
  max-width: 720px;
  position: relative;
}
.vsl-player {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  border: 0;
  padding: 0;
  background: transparent;
  border-radius: 16px;
  overflow: hidden;
  cursor: pointer;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.35) inset,
    0 24px 60px -22px rgba(18, 45, 54, 0.4),
    0 4px 14px -6px rgba(18, 45, 54, 0.16);
  transition: transform 0.5s var(--ease-out), box-shadow 0.5s var(--ease-out);
}
.vsl-player:hover {
  transform: translateY(-3px);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.35) inset,
    0 32px 78px -22px rgba(18, 45, 54, 0.5),
    0 6px 18px -6px rgba(18, 45, 54, 0.2);
}
.vsl-player:focus-visible {
  outline: 2px solid var(--copper);
  outline-offset: 4px;
}

/* base layer — deep brand gradient */
.vsl-bg {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(120% 90% at 30% 20%, rgba(109, 144, 153, 0.35) 0%, transparent 55%),
    radial-gradient(100% 80% at 80% 90%, rgba(18, 45, 54, 0.55) 0%, transparent 60%),
    linear-gradient(135deg, var(--deep) 0%, var(--deeper) 100%);
}
/* center halo behind the play button — gives the eye a focal point */
.vsl-glow {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 60%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(207, 223, 218, 0.18) 0%, transparent 65%);
  pointer-events: none;
  transition: opacity 0.5s ease;
}
.vsl-player:hover .vsl-glow { opacity: 0.7; }

/* play button */
.vsl-play {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: clamp(64px, 7vw, 84px);
  height: clamp(64px, 7vw, 84px);
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--paper);
  color: var(--deep);
  box-shadow:
    0 14px 32px -8px rgba(0, 0, 0, 0.35),
    0 0 0 0 rgba(181, 130, 90, 0);
  transition:
    transform 0.4s var(--ease-out),
    background 0.3s ease,
    color 0.3s ease,
    box-shadow 0.45s ease;
}
.vsl-play svg { margin-left: 3px; transition: transform 0.35s var(--ease-out); }
.vsl-player:hover .vsl-play {
  background: var(--copper);
  color: var(--paper);
  transform: translate(-50%, -50%) scale(1.06);
  box-shadow:
    0 18px 38px -8px rgba(0, 0, 0, 0.4),
    0 0 0 12px rgba(181, 130, 90, 0.18);
}
.vsl-player:hover .vsl-play svg { transform: translateX(2px); }

/* meta strip bottom-left */
.vsl-meta {
  position: absolute;
  left: 1.2rem;
  bottom: 1.1rem;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  color: var(--paper);
  font-size: 0.9rem;
  letter-spacing: 0.01em;
}
.vsl-duration {
  background: rgba(14, 34, 40, 0.55);
  backdrop-filter: blur(10px) saturate(140%);
  -webkit-backdrop-filter: blur(10px) saturate(140%);
  padding: 0.24rem 0.55rem;
  border-radius: 6px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  font-variant-numeric: tabular-nums;
  font-size: 0.82rem;
}
.vsl-label {
  font-family: var(--serif);
  font-size: 1rem;
  text-shadow: 0 1px 12px rgba(0, 0, 0, 0.35);
}
.vsl-label em { font-style: italic; opacity: 0.78; }

/* corner accents — subtle film-frame ticks */
.vsl-corner {
  position: absolute;
  width: 18px;
  height: 18px;
  border-color: rgba(247, 245, 239, 0.45);
  border-style: solid;
  border-width: 0;
  pointer-events: none;
}
.vsl-corner--tl { top: 12px; left: 12px;    border-top-width: 1px; border-left-width: 1px;    border-top-left-radius: 3px; }
.vsl-corner--tr { top: 12px; right: 12px;   border-top-width: 1px; border-right-width: 1px;   border-top-right-radius: 3px; }
.vsl-corner--bl { bottom: 12px; left: 12px;  border-bottom-width: 1px; border-left-width: 1px;  border-bottom-left-radius: 3px; }
.vsl-corner--br { bottom: 12px; right: 12px; border-bottom-width: 1px; border-right-width: 1px; border-bottom-right-radius: 3px; }

.vsl-caption {
  margin: 1.3rem auto 0;
  text-align: center;
  font-size: 0.88rem;
  color: var(--ink-soft);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
}
.vsl-caption .dot {
  width: 5px; height: 5px; border-radius: 50%;
  background: var(--copper);
  opacity: 0.7;
}
.vsl-caption a {
  color: var(--deep);
  text-decoration: none;
  border-bottom: 1px solid currentColor;
  padding-bottom: 1px;
  transition: color 0.25s ease;
}
.vsl-caption a:hover { color: var(--copper); }

/* ============================================================
   DIENSTEN
   ============================================================ */
.diensten {
  background: var(--paper);
}

/* scroll-pin wrapper: provides scroll runway for the split + flip animation */
.diensten-pin {
  position: relative;
  height: 200vh;
}
/* invisible anchor inside the pin runway — clicking #diensten-overview from the
   header dropdown lands the user 90vh into the runway, where the GSAP timeline
   has already flipped all three cards. Adding scroll-margin-top accounts for the
   fixed site header so the stage isn't clipped behind it. */
.diensten-anchor {
  position: absolute;
  top: 90vh;
  left: 0;
  width: 1px;
  height: 1px;
  pointer-events: none;
  scroll-margin-top: 0;
}
/* on mobile the pin is disabled (no flip animation) — fall back to the section top */
@media (max-width: 899px) {
  .diensten-anchor { top: 0; }
}
.diensten-stage {
  position: sticky;
  top: 0;
  /* When GSAP pins this stage it sets position:fixed + an inline px width that
     was measured at load. If the window is later made smaller (esp. a Windows
     window-drag, where ScrollTrigger's refresh can lag), that stale width would
     make the fixed stage wider than the viewport and spill off the right edge.
     Capping to the viewport guarantees it can never overflow, and the inner
     .container re-centers. */
  max-width: 100%;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 5rem 0;
  background: var(--paper);
}

/* split panels — 3D container that flips on scroll */
.split-panel {
  position: relative;
  transform-style: preserve-3d;
  -webkit-transform-style: preserve-3d;
  will-change: transform;
}
/* front face — strip of the wide panorama image */
.split-front {
  position: absolute;
  inset: 0;
  z-index: 2;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  border-radius: 24px;
  overflow: hidden;
  background-image: url("../assets/patterns/ilone-natuur-verandering-upscaled-3x.webp");
  background-size: 300% 100%;
  background-position: calc(var(--panel-i) * 50%) center;
  /* no shadow at start — would create visible darker seams where strips touch.
     GSAP fades it in during the split phase. */
}
/* initial state: inner-facing corners square so the three strips form
   one seamless panorama. GSAP animates them back to 24px during the split. */
.split-panel:nth-child(1) .split-front {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}
.split-panel:nth-child(2) .split-front {
  border-radius: 0;
}
.split-panel:nth-child(3) .split-front {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}
/* subtle bottom darkening for depth */
.split-front::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(247, 245, 239, 0) 60%, rgba(18, 45, 54, 0.22) 100%);
}
/* back face — the actual card */
.split-panel {
  height: 100%;       /* fill grid row so all three panels match in height */
}
.split-panel .dienst-card {
  position: relative;
  height: 100%;       /* fill panel so cards line up regardless of inner content */
  transform: rotateY(180deg);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  cursor: pointer;
}
/* preserve the rotateY when hovering — otherwise the CSS hover transform
   wipes it and the card flips away from camera */
.split-panel .dienst-card:hover {
  transform: rotateY(180deg) translateY(-4px);
}

/* perspective on the grid so panels share one 3D space */
.dienst-grid {
  perspective: 2400px;
  -webkit-perspective: 2400px;
}

/* reduced-motion: skip the flip, just show cards */
@media (prefers-reduced-motion: reduce) {
  .diensten-pin { height: auto; }
  .diensten-stage { position: relative; min-height: 0; padding: 8rem 0; }
  .split-front { display: none; }
  .split-panel .dienst-card { transform: none; }
}

/* mobile: same — pin scrubs feel bad on touch devices.
   Also neutralise the hover flip rule so a tap doesn't rotate the card. */
@media (max-width: 899px) {
  .diensten-pin { height: auto; }
  .diensten-stage { position: relative; min-height: 0; padding: 6rem 0; }
  .split-front { display: none; }
  .split-panel .dienst-card,
  .split-panel .dienst-card:hover,
  .dienst-card:hover { transform: none; }
  .dienst-card { cursor: default; }
}
.section-head {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 2rem;
  margin-bottom: 4rem;
  flex-wrap: wrap;
}
.section-head h2 {
  font-family: var(--serif);
  font-size: clamp(2.2rem, 4.5vw, 4rem);
  margin: 0.6rem 0 0;
  font-weight: 400;
  line-height: 1.02;
  letter-spacing: -0.015em;
  color: var(--deeper);
  max-width: 18ch;
}
.section-head h2 em { font-style: italic; color: var(--deep); }
.section-head .head-side {
  max-width: 40ch;
  color: var(--ink-soft);
  font-size: 1.02rem;
}

.dienst-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
}
@media (min-width: 900px) {
  .dienst-grid { grid-template-columns: repeat(3, 1fr); }
}

.dienst-card {
  position: relative;
  background: var(--paper-2);
  border: 1px solid var(--line);
  border-radius: 24px;
  padding: 2.2rem 2rem 2.4rem;
  overflow: hidden;
  transition: transform 0.6s var(--ease-out), border-color 0.4s, background 0.4s;
  min-height: 480px;
  display: flex;
  flex-direction: column;
  cursor: pointer;
}
@media (hover: hover) {
  .dienst-card:hover {
    transform: translateY(-4px);
    border-color: var(--deep);
    background: #fff;
  }
}
.dienst-card .number {
  font-family: var(--mono);
  font-size: 0.78rem;
  color: var(--tide);
  letter-spacing: 0.18em;
  /* keep "03 / Persoonlijke coaching" from sliding under the icon-blob
     (top-right, 56px wide + 1.7rem inset) */
  padding-right: 5rem;
  display: block;
}
.dienst-card h3 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 2rem;
  line-height: 1.05;
  letter-spacing: -0.015em;
  color: var(--deeper);
  margin: 1.3rem 0 0.7rem;
}
.dienst-card .tagline {
  color: var(--ink-soft);
  margin: 0 0 1.6rem;
  font-size: 0.98rem;
}
.dienst-card ul {
  list-style: none;
  padding: 0;
  margin: 0 0 2rem;
  font-size: 0.88rem;
  color: var(--ink-soft);
}
.dienst-card ul li {
  padding: 0.45rem 0;
  border-top: 1px solid var(--line);
  display: flex;
  justify-content: space-between;
  gap: 1rem;
}
.dienst-card ul li:first-child { border-top: none; }
.dienst-card ul li span:last-child { color: var(--deep); font-weight: 500; }

.dienst-card .meta-link {
  margin-top: auto;
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-size: 0.92rem;
  color: var(--deep);
  font-weight: 500;
}
.dienst-card .meta-link .arrow {
  transition: transform 0.4s var(--ease-out);
}
@media (hover: hover) {
  .dienst-card:hover .meta-link .arrow {
    transform: translateX(5px);
  }
}

.dienst-card .icon-blob {
  position: absolute;
  top: 1.7rem;
  right: 1.7rem;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--mist);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--deep);
  transition: transform 0.6s var(--ease-out);
}
@media (hover: hover) {
  .dienst-card:hover .icon-blob { transform: rotate(-20deg) scale(1.1); }
}

/* highlight (middle) card */
.dienst-card.featured {
  background: var(--deeper);
  color: var(--paper);
  border-color: var(--deeper);
}
.dienst-card.featured h3 { color: var(--paper); }
.dienst-card.featured .number { color: var(--copper-soft); }
.dienst-card.featured .tagline,
.dienst-card.featured ul { color: rgba(247, 245, 239, 0.65); }
.dienst-card.featured ul li { border-color: rgba(247, 245, 239, 0.12); }
.dienst-card.featured ul li span:last-child { color: var(--copper-soft); }
.dienst-card.featured .meta-link { color: var(--copper-soft); }
.dienst-card.featured .icon-blob { background: rgba(207, 223, 218, 0.12); color: var(--copper-soft); }
.dienst-card.featured:hover { background: #0a1f27; }

/* ============================================================
   WERKMETHODE — 5 fases
   ============================================================ */
.werkmethode {
  position: relative;
  background: var(--deeper);
  color: var(--paper);
  padding: 8rem 0;
  overflow: hidden;
}
.werkmethode::before {
  /* soft animated radial glow */
  content: "";
  position: absolute;
  top: -20%;
  left: 50%;
  width: 100%;
  aspect-ratio: 1/1;
  background: radial-gradient(circle, rgba(181, 130, 90, 0.22), transparent 65%);
  transform: translateX(-50%);
  filter: blur(40px);
  pointer-events: none;
  animation: drift 20s ease-in-out infinite alternate;
}
@keyframes drift {
  0%   { transform: translate(-55%, 0) scale(1); }
  100% { transform: translate(-45%, 4%) scale(1.08); }
}

.werkmethode .section-head h2 { color: var(--paper); }
.werkmethode .section-head h2 em { color: var(--copper-soft); }
.werkmethode .section-head .head-side { color: rgba(247, 245, 239, 0.65); }

.fase-track {
  position: relative;
  margin-top: 4rem;
  padding-bottom: 2rem;
}
.fase-progress {
  position: absolute;
  left: 0;
  top: 38px;
  height: 1px;
  width: 100%;
  background: rgba(247, 245, 239, 0.15);
  overflow: hidden;
}
.fase-progress-fill {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: calc((1 - var(--progress, 0)) * 100%);
  background: linear-gradient(to right, var(--copper-soft), var(--copper));
  transition: right 0.6s var(--ease-out);
}

.fase-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2.5rem;
}
@media (min-width: 700px) { .fase-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .fase-grid { grid-template-columns: repeat(5, 1fr); gap: 1.2rem; } }

.fase {
  position: relative;
  padding-top: 5rem;
}
.fase .num-pill {
  position: absolute;
  top: 0;
  left: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 76px;
  height: 76px;
  border-radius: 50%;
  border: 1px solid rgba(247, 245, 239, 0.2);
  background: var(--deeper);
  font-family: var(--serif);
  font-size: 2rem;
  color: var(--copper-soft);
  transition: transform 0.6s var(--ease-out), background 0.4s, color 0.4s;
}
.fase.is-active .num-pill {
  background: var(--copper);
  color: var(--paper);
  transform: scale(1.05);
}

.fase h3 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 1.6rem;
  letter-spacing: -0.015em;
  margin: 0 0 0.6rem;
  color: var(--paper);
}
.fase p {
  font-size: 0.92rem;
  line-height: 1.55;
  color: rgba(247, 245, 239, 0.7);
  margin: 0;
}

/* mobile: vertical timeline — pill in left column with a vertical line
   threaded through all five pill centers, title to the right of the pill,
   body text below (still in the title column) */
@media (max-width: 699px) {
  .fase-progress {
    /* center of first pill: 56/2 = 28px from .fase-grid top */
    top: 28px;
    bottom: 2rem;
    left: 28px;
    width: 1px;
    height: auto;
  }
  .fase-progress-fill {
    top: 0;
    left: 0;
    right: 0;
    bottom: calc((1 - var(--progress, 0)) * 100%);
    background: linear-gradient(to bottom, var(--copper-soft), var(--copper));
    transition: bottom 0.6s var(--ease-out);
  }
  .fase {
    padding-top: 0;
    display: grid;
    grid-template-columns: 56px 1fr;
    grid-template-rows: auto auto;
    column-gap: 1.1rem;
    row-gap: 0.5rem;
    align-items: start;
  }
  .fase .num-pill {
    position: relative;
    top: auto;
    left: auto;
    width: 56px;
    height: 56px;
    font-size: 1.5rem;
    grid-row: 1;
    grid-column: 1;
  }
  .fase h3 {
    grid-row: 1;
    grid-column: 2;
    align-self: center;
    margin: 0;
    font-size: 1.4rem;
  }
  .fase p {
    grid-row: 2;
    grid-column: 2;
    margin: 0;
  }
}

/* ============================================================
   SIGNATURE — wat haar werk onderscheidt
   ============================================================ */
.signature {
  background: var(--paper-2);
  padding: 8rem 0;
}
.signature-quote {
  font-family: var(--serif);
  font-size: clamp(2rem, 5vw, 4.5rem);
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--deeper);
  text-align: center;
  max-width: 22ch;
  margin: 0 auto 3rem;
}
.signature-quote em { font-style: italic; color: var(--copper); }

.pill-cloud {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.7rem;
  max-width: 900px;
  margin: 0 auto;
}
.pill {
  padding: 0.65rem 1.2rem;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: 0.92rem;
  color: var(--deep);
  transition: all 0.4s var(--ease-soft);
}
/* hover state only on devices with real hover — on touch the pill is
   purely decorative and shouldn't pretend to be interactive */
@media (hover: hover) {
  .pill:hover { background: var(--deep); color: var(--paper); border-color: var(--deep); transform: translateY(-2px); }
}

/* ============================================================
   TESTIMONIALS marquee
   ============================================================ */
.testimonials {
  background: var(--paper);
  padding: 6rem 0 4.5rem;
  overflow: hidden;
}
.marquee-row {
  display: flex;
  gap: 1.25rem;
  width: max-content;
  animation: marquee-left 60s linear infinite;
  margin-bottom: 1.25rem;
}
.marquee-row.reverse { animation: marquee-right 70s linear infinite; }
@keyframes marquee-left {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
@keyframes marquee-right {
  from { transform: translateX(-50%); }
  to   { transform: translateX(0); }
}
/* pause only the row the cursor is actually over — other row keeps moving */
.marquee-row:hover { animation-play-state: paused; }

.testimonial-card {
  flex: 0 0 380px;
  background: var(--paper-2);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 1.4rem 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  min-height: 150px;
}
.testimonial-card .quote {
  font-family: var(--serif);
  font-size: 1.05rem;
  line-height: 1.4;
  color: var(--deeper);
  letter-spacing: -0.005em;
  flex: 1;
}
.testimonial-card .attrib {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  font-size: 0.82rem;
  color: var(--ink-soft);
}
.testimonial-card .attrib strong {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 1rem;
  color: var(--deeper);
  letter-spacing: -0.005em;
}

/* ============================================================
   BRAND BAR — vertrouwd door (logos marquee under the VSL)
   ============================================================ */
.brand-bar {
  margin-top: 4rem;
  text-align: center;
}
.brand-bar-label {
  font-family: var(--mono);
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: var(--ink-soft);
  opacity: 0.55;
  margin: 0 0 1.9rem;
}
.brand-bar-track {
  overflow: hidden;
  position: relative;
  cursor: grab;
  touch-action: pan-y;       /* allow vertical page scroll, capture horizontal */
  /* soft fade at left & right edges so logos scroll in/out gracefully */
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 6%, #000 94%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0%, #000 6%, #000 94%, transparent 100%);
}
.brand-bar-track.is-dragging { cursor: grabbing; }
.brand-bar-row {
  display: flex;
  align-items: center;
  gap: 4rem;
  width: max-content;
  /* transform driven by JS for drag-to-scroll support */
  will-change: transform;
}
.brand-bar-row img {
  height: 44px;
  width: auto;
  flex: 0 0 auto;
  opacity: 0.55;
  filter: saturate(0.7);
  transition: opacity 0.4s ease, filter 0.4s ease;
  user-select: none;
  -webkit-user-drag: none;
  pointer-events: auto;
}
.brand-bar-row img:hover {
  opacity: 0.95;
  filter: saturate(1);
}

@media (max-width: 700px) {
  .brand-bar { margin-top: 3rem; }
  .brand-bar-row { gap: 2.8rem; }
  .brand-bar-row img { height: 36px; }
}

/* ============================================================
   ABOUT teaser
   ============================================================ */
.about-teaser {
  background: var(--paper);
  padding: 4.5rem 0 9rem;
}
.about-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 3rem;
  align-items: center;
}
@media (min-width: 900px) {
  .about-grid { grid-template-columns: 0.9fr 1.1fr; gap: 5rem; }
}
.about-photo {
  position: relative;
  border-radius: 28px;
  overflow: hidden;
  aspect-ratio: 4/5;
  background:
    radial-gradient(120% 80% at 30% 25%, rgba(255, 255, 255, 0.35), transparent 60%),
    linear-gradient(160deg, var(--mist) 0%, var(--stone) 55%, #b8c6c9 100%);
}
.about-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center bottom;
}
.about-photo .tag {
  position: absolute;
  left: 1.5rem; bottom: 1.5rem;
  padding: 0.5rem 0.9rem;
  border-radius: 999px;
  background: rgba(247, 245, 239, 0.85);
  backdrop-filter: blur(8px);
  color: var(--deep);
  font-family: var(--mono);
  font-size: 0.75rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.about-body h2 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(2rem, 4vw, 3.4rem);
  line-height: 1.05;
  letter-spacing: -0.015em;
  color: var(--deeper);
  margin: 0.6rem 0 1.4rem;
  /* small left padding so italic letters that wrap to their own line
     ('geven' onder 'en toch leiding') niet door de containerrand worden
     gekapt. padding-inline-start op de <em> werkt alleen op de eerste
     regel van de run — niet op gewrapte fragmenten — dus de indent
     moet op het heading-element zelf. */
  padding-left: 0.14em;
}
.about-body h2 em {
  font-style: italic;
  color: var(--deep);
}
.about-body p {
  color: var(--ink-soft);
  font-size: 1.02rem;
  line-height: 1.65;
  margin: 0 0 1.1rem;
  max-width: 56ch;
}
.about-actions {
  margin-top: 2.4rem;
  display: flex;
  align-items: center;
  gap: 1.4rem;
  flex-wrap: wrap;
}
.about-signoff {
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.1rem;
  color: var(--ink-soft);
  line-height: 1;
}

/* ---- soft section divider (wave) ---- */
.section-divider {
  display: flex;
  justify-content: center;
  padding: 4.5rem 0;
  background: var(--paper);
  color: var(--copper);
  opacity: 0.65;
}
.section-divider svg {
  display: block;
}

/* ============================================================
   CTA closing
   ============================================================ */
.cta-closing {
  position: relative;
  padding: 8rem 0;
  background: var(--deeper);
  color: var(--paper);
  overflow: hidden;
}
.cta-mesh {
  position: absolute;
  inset: -20%;
  background:
    radial-gradient(40% 50% at 20% 30%, rgba(181, 130, 90, 0.55), transparent 60%),
    radial-gradient(45% 55% at 80% 70%, rgba(109, 144, 153, 0.45), transparent 60%),
    radial-gradient(35% 40% at 50% 50%, rgba(207, 223, 218, 0.3), transparent 60%);
  filter: blur(30px) saturate(120%);
  animation: mesh-drift 18s ease-in-out infinite alternate;
  pointer-events: none;
}
@keyframes mesh-drift {
  0%   { transform: translate(0, 0) rotate(0deg) scale(1); }
  50%  { transform: translate(2%, -2%) rotate(2deg) scale(1.05); }
  100% { transform: translate(-2%, 2%) rotate(-2deg) scale(0.98); }
}
.cta-inner {
  position: relative;
  z-index: 1;
  text-align: center;
  max-width: 760px;
  margin: 0 auto;
}
.cta-inner h2 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(2.4rem, 5vw, 4.5rem);
  line-height: 1;
  letter-spacing: -0.02em;
  margin: 0 0 1.4rem;
}
.cta-inner h2 em { font-style: italic; color: var(--copper-soft); }
.cta-inner p {
  color: rgba(247, 245, 239, 0.72);
  font-size: 1.1rem;
  margin: 0 0 2.5rem;
}
.cta-row { display: inline-flex; gap: 0.9rem; flex-wrap: wrap; justify-content: center; }

/* ============================================================
   FOOTER
   ============================================================ */
.site-footer {
  background: var(--paper-2);
  padding: 5rem 0 3rem;
}
.footer-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 3rem;
}
@media (min-width: 800px) {
  .footer-grid { grid-template-columns: 1.5fr 1fr 1fr 1fr; }
}
.footer-grid h4 {
  font-family: var(--mono);
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--tide);
  margin: 0 0 1.2rem;
  font-weight: 500;
}
.footer-grid ul {
  list-style: none;
  padding: 0; margin: 0;
  display: flex; flex-direction: column; gap: 0.6rem;
  font-size: 0.95rem;
}
.footer-grid a:hover { color: var(--deep); }
.footer-logo img { height: 64px; width: auto; }
.footer-tagline {
  font-family: var(--serif);
  font-size: 1.15rem;
  line-height: 1.4;
  color: var(--deeper);
  max-width: 28ch;
  margin: 1.2rem 0 1.5rem;
}
.footer-bottom {
  margin-top: 4rem;
  padding-top: 1.4rem;
  border-top: 1px solid var(--line);
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1rem;
  font-size: 0.82rem;
  color: var(--ink-soft);
}

/* ============================================================
   Utilities + reveal animations baseline
   ============================================================ */
[data-reveal] {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.9s var(--ease-out), transform 0.9s var(--ease-out);
}
[data-reveal].is-visible {
  opacity: 1;
  transform: translateY(0);
}
[data-reveal][data-delay="100"].is-visible { transition-delay: 0.1s; }
[data-reveal][data-delay="200"].is-visible { transition-delay: 0.2s; }
[data-reveal][data-delay="300"].is-visible { transition-delay: 0.3s; }
[data-reveal][data-delay="400"].is-visible { transition-delay: 0.4s; }
[data-reveal][data-delay="500"].is-visible { transition-delay: 0.5s; }

/* keep the testimonials marquee moving even when the OS has reduced-motion
   enabled — Android Chrome respects that by default and was freezing the
   reviews on some devices. The marquee is gentle, continuous scroll —
   not the kind of motion the reduced-motion preference is meant to
   suppress. */
@media (prefers-reduced-motion: reduce) {
  .marquee-row {
    animation-duration: 60s !important;
    animation-iteration-count: infinite !important;
  }
  .marquee-row.reverse {
    animation-duration: 70s !important;
  }
}

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

/* ============================================================
   CONTACT POPUP — multi-step kennismaking
   ============================================================ */
.cta-modal {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
}
.cta-modal[hidden] { display: none; }

.cta-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(18, 45, 54, 0.55);
  backdrop-filter: blur(8px) saturate(140%);
  -webkit-backdrop-filter: blur(8px) saturate(140%);
  cursor: pointer;
  animation: cta-fade-in 0.35s var(--ease-out);
}

.cta-modal-dialog {
  position: relative;
  width: 100%;
  max-width: 560px;
  max-height: 92vh;
  overflow-y: auto;
  background: var(--paper);
  border-radius: 24px;
  padding: 3rem 2.5rem 2.5rem;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.4) inset,
    0 40px 80px -20px rgba(18, 45, 54, 0.45),
    0 8px 20px -6px rgba(18, 45, 54, 0.18);
  animation: cta-pop-in 0.45s var(--ease-out);
}

@keyframes cta-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes cta-pop-in {
  from { opacity: 0; transform: translateY(20px) scale(0.97); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

.cta-modal-close {
  position: absolute;
  top: 1rem; right: 1rem;
  width: 36px; height: 36px;
  display: grid; place-items: center;
  border: 0;
  background: transparent;
  color: var(--ink-soft);
  border-radius: 50%;
  cursor: pointer;
  transition: background 0.25s ease, color 0.25s ease;
}
.cta-modal-close:hover { background: var(--paper-2); color: var(--deeper); }

.cta-modal-progress {
  display: flex;
  gap: 0.4rem;
  margin-bottom: 1.6rem;
}
.cta-modal-progress .step {
  flex: 1;
  height: 3px;
  border-radius: 2px;
  background: rgba(18, 45, 54, 0.10);
  transition: background 0.35s ease;
}
.cta-modal-progress .step.is-active { background: var(--copper); }

/* steps */
.cta-step { display: none; animation: cta-step-in 0.4s var(--ease-out); }
.cta-step.is-active { display: block; }

@keyframes cta-step-in {
  from { opacity: 0; transform: translateX(12px); }
  to   { opacity: 1; transform: translateX(0); }
}

.step-eyebrow {
  display: inline-block;
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--tide);
  margin-bottom: 0.6rem;
}
.cta-step h3 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 1.9rem;
  line-height: 1.05;
  letter-spacing: -0.015em;
  color: var(--deeper);
  margin: 0 0 0.6rem;
}
.step-sub {
  color: var(--ink-soft);
  font-size: 0.95rem;
  margin: 0 0 1.5rem;
  line-height: 1.55;
}

/* radio-card options */
.cta-options {
  display: grid;
  gap: 0.6rem;
  margin-bottom: 2rem;
}
.cta-option {
  position: relative;
  display: block;
  cursor: pointer;
}
.cta-option input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.cta-option-label {
  display: block;
  padding: 1rem 1.1rem;
  background: var(--paper-2);
  border: 1px solid var(--line);
  border-radius: 12px;
  transition: border-color 0.25s ease, background 0.25s ease, transform 0.25s ease;
}
.cta-option-label strong {
  display: block;
  font-family: var(--serif);
  font-size: 1.05rem;
  font-weight: 500;
  color: var(--deeper);
  margin-bottom: 0.15rem;
}
.cta-option-label small {
  display: block;
  font-size: 0.82rem;
  color: var(--ink-soft);
}
.cta-option:hover .cta-option-label {
  border-color: var(--tide);
  background: #fff;
}
.cta-option input:checked + .cta-option-label {
  border-color: var(--copper);
  background: #fff;
  box-shadow: 0 0 0 3px rgba(181, 130, 90, 0.12);
}
.cta-option input:focus-visible + .cta-option-label {
  outline: 2px solid var(--copper);
  outline-offset: 2px;
}

/* fields */
.cta-fields {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.85rem 1rem;
  margin-bottom: 1.8rem;
}
.cta-field {
  display: block;
}
.cta-field-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.85rem 1rem;
  margin-bottom: 1.8rem;
}
.cta-field-row + .cta-actions { margin-top: 0; }

.cta-field-label {
  display: block;
  font-size: 0.78rem;
  color: var(--ink-soft);
  margin-bottom: 0.35rem;
  letter-spacing: 0.02em;
}
.cta-field input,
.cta-field textarea,
.cta-field select {
  width: 100%;
  padding: 0.7rem 0.9rem;
  font-family: inherit;
  font-size: 0.95rem;
  color: var(--ink);
  background: var(--paper-2);
  border: 1px solid var(--line);
  border-radius: 10px;
  transition: border-color 0.25s ease, background 0.25s ease;
}
.cta-field textarea {
  resize: vertical;
  min-height: 110px;
  line-height: 1.5;
  margin-bottom: 1.4rem;
}
.cta-field input:focus,
.cta-field textarea:focus,
.cta-field select:focus {
  outline: none;
  border-color: var(--copper);
  background: #fff;
}
.cta-field input.is-invalid,
.cta-field textarea.is-invalid,
.cta-field select.is-invalid {
  border-color: #c0524c;
  background: #fff8f7;
}

/* actions */
.cta-actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  margin-top: 1.5rem;
}
.cta-actions:first-child { margin-top: 0; }
.cta-actions .btn-copper { margin-left: auto; }

.btn-text {
  background: transparent;
  border: 0;
  color: var(--ink-soft);
  font-family: inherit;
  font-size: 0.92rem;
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  cursor: pointer;
  padding: 0.5rem 0;
  transition: color 0.25s ease;
}
.btn-text:hover { color: var(--deep); }

/* success state */
.cta-success { text-align: center; padding: 1rem 0; }
.cta-success-icon {
  width: 64px; height: 64px;
  margin: 0 auto 1.2rem;
  color: var(--copper);
}
.cta-success h3 { font-size: 2.2rem; }
.cta-success .step-sub { max-width: 36ch; margin: 0 auto 2rem; }

@media (max-width: 600px) {
  /* extra vertical breathing room so the modal doesn't kiss the
     status bar / home indicator on iPhone */
  .cta-modal {
    padding: max(2.5rem, env(safe-area-inset-top)) 1.25rem max(2.5rem, env(safe-area-inset-bottom));
  }
  .cta-modal-dialog {
    padding: 3.75rem 1.5rem 1.5rem;
    max-height: calc(100svh - 5rem);
  }
  /* progress bars need clearance from the close button (top 1rem + 36px) */
  .cta-modal-progress { margin-bottom: 1.6rem; }
  .cta-fields, .cta-field-row { grid-template-columns: 1fr; }
  .cta-step h3 { font-size: 1.6rem; }
}


/* ════════════════════════════════════════════════════════════
   WERKMETHODE PAGE — /werkmethode.html  (v2 refactor)
   ════════════════════════════════════════════════════════════ */

/* shared additions */
.btn-large {
  padding: 1.15rem 1.85rem;
  font-size: 1.05rem;
  border-radius: 999px;
}
.eyebrow-on-dark { color: rgba(247, 245, 239, 0.55); }
.nav-link.is-active::after {
  transform: scaleX(1);
  background: var(--copper);
}
[data-reveal][data-delay="80"].is-visible  { transition-delay: 0.08s; }
[data-reveal][data-delay="120"].is-visible { transition-delay: 0.12s; }
[data-reveal][data-delay="150"].is-visible { transition-delay: 0.15s; }
[data-reveal][data-delay="160"].is-visible { transition-delay: 0.16s; }
[data-reveal][data-delay="240"].is-visible { transition-delay: 0.24s; }
[data-reveal][data-delay="280"].is-visible { transition-delay: 0.28s; }
[data-reveal][data-delay="600"].is-visible { transition-delay: 0.6s; }

.page-werkmethode { background: var(--paper); }


/* ━━━━━━━━━━━━━ 1. HERO — single column with small ornament ━━━━━━━━━━━━━ */
.wm-hero {
  padding: clamp(6rem, 11vw, 9rem) 0 clamp(3rem, 5vw, 4rem);
  /* min-height keeps all non-homepage heroes (werkmethode / interim /
     teamcoaching / persoonlijke-coaching / over-mij / contact) on the same
     visual baseline even when their content density differs. */
  min-height: clamp(480px, 65vw, 720px);
  display: flex;
  align-items: center;
}
.wm-hero > .container { width: 100%; }
.wm-hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(2rem, 4vw, 3rem);
  align-items: center;
}
@media (min-width: 900px) {
  .wm-hero-grid {
    grid-template-columns: minmax(0, 5fr) minmax(0, 5fr);
    gap: clamp(2rem, 4vw, 3.5rem);
  }
}
.wm-hero-copy { max-width: 100%; }
.wm-hero-title {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(2.5rem, 5.3vw, 4.1rem);
  line-height: 1.04;
  letter-spacing: -0.012em;
  color: var(--deeper);
  margin: 1rem 0 1.3rem;
  max-width: 18ch;
}
.wm-hero-title em { font-style: italic; color: var(--deep); }
.wm-hero-sub {
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(1.2rem, 1.6vw, 1.4rem);
  line-height: 1.45;
  color: var(--ink-soft);
  max-width: 44ch;
  margin: 0 0 1.8rem;
}

/* inline 3 V's strip (replaces the boxed card) */
.wm-hero-vs-row {
  list-style: none;
  margin: 0;
  padding: 1.1rem 0 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.8rem;
  border-top: 1px solid var(--line);
  max-width: 48ch;
}
.wm-hero-vs-row li {
  display: inline-flex;
  align-items: baseline;
  gap: 0.55rem;
}
.wm-hero-vs-row .wm-v-num {
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  color: var(--copper);
}
.wm-hero-vs-row .wm-v-word {
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.12rem;
  color: var(--deeper);
}
@media (max-width: 700px) {
  .wm-hero-vs-row .wm-v-word { font-size: 1rem; }
}

/* hero ornament — animated ripple-from-still-point, visualises the title */
.wm-hero-side {
  display: none;
  background: none;
  border: none;
  padding: 0;
  margin-left: auto;
  width: 100%;
  max-width: 540px;
}
@media (min-width: 900px) { .wm-hero-side { display: block; } }
.wm-hero-ornament {
  width: 100%;
  filter: drop-shadow(0 8px 24px rgba(181, 130, 90, 0.18));
}
.wm-hero-ornament svg { width: 100%; height: auto; display: block; }


/* ━━━━━━━━━━━━━ 2. MINDMAP — context + path-tracing pulses ━━━━━━━━━━━━━ */
.wm-mindmap {
  padding: clamp(3rem, 6vw, 5rem) 0 clamp(4rem, 7vw, 6rem);
  background: var(--paper-2);
}
.wm-mindmap-head {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(2rem, 4vw, 3rem);
  align-items: center;
}
@media (min-width: 1000px) {
  .wm-mindmap-head { grid-template-columns: minmax(0, 4fr) minmax(0, 6fr); }
}
.wm-mindmap-intro { max-width: 38ch; }
.wm-mindmap-intro h2 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(1.8rem, 3.4vw, 2.6rem);
  line-height: 1.08;
  color: var(--deeper);
  margin: 0.6rem 0 1rem;
}
.wm-mindmap-intro h2 em { font-style: italic; color: var(--deep); }
.wm-mindmap-intro p {
  font-family: var(--sans);
  font-size: 1rem;
  line-height: 1.55;
  color: var(--ink-soft);
  margin: 0;
}

.wm-mindmap-figure {
  position: relative;
  margin: 0;
  max-width: 720px;
  margin-left: auto;
}
.wm-mindmap-figure img {
  width: 100%;
  height: auto;
  display: block;
  /* transparent PNG sits flat on the section background — no card frame */
  background: transparent;
}

.wm-mindmap-pulses {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.wm-pulse {
  position: absolute;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  opacity: 0;
}
/* positions match approximate concept-anchors on the mindmap PNG */
.wm-pulse-center { top: 52%; left: 41%; background: var(--copper); box-shadow: 0 0 24px var(--copper); animation: wm-pulse 10s ease-in-out infinite; animation-delay: 0s; }
.wm-pulse-blue   { top: 18%; left: 27%; background: #4A6F7E; box-shadow: 0 0 24px #4A6F7E;   animation: wm-pulse 10s ease-in-out infinite; animation-delay: 2s; }
.wm-pulse-red    { top: 14%; left: 70%; background: #C0594A; box-shadow: 0 0 24px #C0594A;   animation: wm-pulse 10s ease-in-out infinite; animation-delay: 4s; }
.wm-pulse-yellow { top: 60%; left: 82%; background: #D8A85A; box-shadow: 0 0 24px #D8A85A;   animation: wm-pulse 10s ease-in-out infinite; animation-delay: 6s; }
.wm-pulse-green  { top: 85%; left: 38%; background: #6B8A6A; box-shadow: 0 0 24px #6B8A6A;   animation: wm-pulse 10s ease-in-out infinite; animation-delay: 8s; }

@keyframes wm-pulse {
  0%, 100% { opacity: 0; transform: translate(-50%, -50%) scale(0.5); }
  4%       { opacity: 0.85; transform: translate(-50%, -50%) scale(1); }
  15%      { opacity: 0.5;  transform: translate(-50%, -50%) scale(2); }
  25%      { opacity: 0;    transform: translate(-50%, -50%) scale(3); }
}


/* ━━━━━━━━━━━━━ shared section heads ━━━━━━━━━━━━━ */
.wm-section-head {
  margin-bottom: clamp(2.4rem, 5vw, 4rem);
  max-width: 56ch;
}
.wm-section-head-tight { margin-bottom: clamp(2rem, 3vw, 2.5rem); }
.wm-section-head h2 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(1.7rem, 3.2vw, 2.5rem);
  line-height: 1.1;
  letter-spacing: -0.008em;
  color: var(--deeper);
  margin: 0.5rem 0 0;
}
.wm-section-head h2 em { font-style: italic; color: var(--deep); }


/* ━━━━━━━━━━━━━ 3. PIJLERS — sequential row with connecting line ━━━━━━━━━━━━━ */
.wm-pijlers {
  padding: clamp(4rem, 8vw, 6rem) 0;
}
.wm-pijler-row {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
  position: relative;
}
@media (min-width: 700px)  { .wm-pijler-row { grid-template-columns: repeat(2, 1fr); gap: 1.2rem; } }
@media (min-width: 1000px) {
  .wm-pijler-row {
    grid-template-columns: repeat(4, 1fr);
    gap: 1.2rem;
    padding-top: 1.4rem;
  }
  /* connecting line through the dots — dot center is at row-top + (1.4rem - 2px) */
  .wm-pijler-row::before {
    content: "";
    position: absolute;
    top: calc(1.4rem - 2px);
    left: 12.5%;
    right: 12.5%;
    height: 1.5px;
    background: linear-gradient(to right, transparent 0%, var(--copper-soft) 14%, var(--copper-soft) 86%, transparent 100%);
    opacity: 0.85;
    z-index: 0;
  }
}
.wm-pijler-step {
  position: relative;
  padding: 1.5rem 1.4rem 1.5rem;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 16px;
  z-index: 1;
  transition: transform 0.5s var(--ease-out), box-shadow 0.5s var(--ease-out);
}
.wm-pijler-step:hover {
  transform: translateY(-3px);
  box-shadow: 0 18px 40px -25px rgba(18, 45, 54, 0.20);
}
.wm-pijler-dot {
  position: absolute;
  top: -12px;
  left: 1.4rem;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--copper);
  border: 4px solid var(--paper);
  animation: pijler-dot-pulse 3.4s ease-in-out infinite;
  will-change: transform, box-shadow;
}
.wm-pijler-step[data-pijler="waarnemen"]  .wm-pijler-dot { animation-delay: 0s;   }
.wm-pijler-step[data-pijler="betekenis"]  .wm-pijler-dot { animation-delay: 0.85s; }
.wm-pijler-step[data-pijler="samenleren"] .wm-pijler-dot { animation-delay: 1.7s;  }
.wm-pijler-step[data-pijler="verbinding"] .wm-pijler-dot { animation-delay: 2.55s; }
@keyframes pijler-dot-pulse {
  0%, 100% { transform: scale(1);    box-shadow: 0 0 0 0    rgba(181, 130, 90, 0); }
  50%      { transform: scale(1.18); box-shadow: 0 0 0 8px  rgba(181, 130, 90, 0.18); }
}
.wm-pijler-step[data-pijler="waarnemen"]  .wm-pijler-dot { background: var(--tide); }
.wm-pijler-step[data-pijler="betekenis"]  .wm-pijler-dot { background: var(--copper); }
.wm-pijler-step[data-pijler="samenleren"] .wm-pijler-dot { background: var(--copper-soft); }
.wm-pijler-step[data-pijler="verbinding"] .wm-pijler-dot { background: #8A9164; }
.wm-pijler-num {
  display: block;
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.2em;
  color: var(--ink-soft);
  margin: 0.3rem 0 0.6rem;
}
.wm-pijler-step h3 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 1.35rem;
  line-height: 1.15;
  color: var(--deeper);
  margin: 0 0 0.6rem;
}
.wm-pijler-step p {
  font-family: var(--sans);
  font-size: 0.92rem;
  line-height: 1.5;
  color: var(--ink-soft);
  margin: 0;
}


/* ━━━━━━━━━━━━━ 4. ONDERSTROOM — full-bleed horizon, balanced layout ━━━━━━━━━━━━━ */
.wm-onderstroom {
  position: relative;
  padding: clamp(5rem, 12vw, 8rem) 0;
  overflow: hidden;
  isolation: isolate;
}
.wm-onderstroom-bg { position: absolute; inset: 0; z-index: 0; }
.wm-onderstroom-bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  animation: ken-burns-onderstroom 38s ease-in-out infinite alternate;
  transform-origin: center 55%;
  will-change: transform;
}
@keyframes ken-burns-onderstroom {
  0%   { transform: scale(1.05) translate3d(0, 0, 0); }
  100% { transform: scale(1.14) translate3d(-1.5%, 1.2%, 0); }
}
.wm-onderstroom-tint {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(18, 45, 54, 0.30) 0%, rgba(18, 45, 54, 0.10) 45%, rgba(18, 45, 54, 0.50) 100%);
}
.wm-onderstroom-content {
  position: relative;
  z-index: 1;
  color: var(--paper);
}
.wm-onderstroom-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(1.6rem, 3vw, 2.4rem);
  align-items: end;
}
@media (min-width: 900px) {
  .wm-onderstroom-grid {
    grid-template-columns: minmax(0, 5fr) minmax(0, 5fr);
    gap: clamp(2.4rem, 4vw, 3.5rem);
    align-items: end;
  }
}
.wm-onderstroom-head { max-width: 32ch; }
.wm-onderstroom-title {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(1.9rem, 3.6vw, 2.8rem);
  line-height: 1.1;
  color: var(--paper);
  margin: 0.6rem 0 0;
}
.wm-onderstroom-title em { font-style: italic; color: var(--copper-soft); }
.wm-onderstroom-quote {
  margin: 0;
  grid-column: 1 / -1;
  text-align: left;
  max-width: 22ch;
}
@media (min-width: 900px) {
  .wm-onderstroom-quote {
    grid-column: 1 / -1;
    margin: clamp(2rem, 4vw, 3rem) auto;
    max-width: none;
    text-align: center;
  }
}
.wm-onderstroom-quote p {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(2rem, 5vw, 4rem);
  line-height: 1.08;
  letter-spacing: -0.01em;
  color: var(--paper);
  margin: 0;
}
.wm-onderstroom-quote footer {
  margin-top: clamp(1.8rem, 3.5vw, 2.6rem);
  font-family: var(--mono);
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--copper-soft);
  text-shadow: 0 1px 8px rgba(14, 34, 40, 0.45);
}
.wm-quote-mark { color: var(--copper-soft); font-size: 0.85em; }
.wm-onderstroom-body {
  grid-column: 1 / -1;
  display: grid;
  gap: 0.9rem;
  max-width: 60ch;
  margin: 0 auto;
}
.wm-onderstroom-body p {
  font-family: var(--sans);
  font-size: 1rem;
  line-height: 1.65;
  color: rgba(247, 245, 239, 0.88);
  margin: 0;
}
.wm-onderstroom-body strong { color: var(--paper); font-weight: 600; }


/* ━━━━━━━━━━━━━ 5. 5 FASES — click-to-expand tabs ━━━━━━━━━━━━━ */
.wm-fases {
  padding: clamp(4rem, 8vw, 6rem) 0;
}
.wm-fase-tabs {
  display: grid;
  gap: clamp(1rem, 2vw, 1.4rem);
}

/* tab row — five compact number-only pills on mobile, full label tabs on desktop */
.wm-fase-tab-row {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 0.4rem;
}
@media (min-width: 700px)  { .wm-fase-tab-row { gap: 0.55rem; } }

/* dynamically-inserted accordion slots (used by im-case-tabs on mobile only) */
.mobile-panel-slot {
  list-style: none;
}
.mobile-panel-slot[hidden] { display: none; }
@media (min-width: 800px) {
  .im-case-tab-row > .mobile-panel-slot { display: none; }
}
/* on mobile, im-cases hoists the active panel up into its tab row,
   so the original panels container should not render */
@media (max-width: 799px) {
  .im-case-panels { display: none; }
}

.wm-fase-tab {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.4rem;
  width: 100%;
  padding: 0.95rem 1.05rem 1.05rem;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 14px;
  cursor: pointer;
  transition: background 0.4s var(--ease-out), color 0.4s var(--ease-out), border-color 0.4s var(--ease-out), transform 0.4s var(--ease-out);
  text-align: left;
  font-family: inherit;
  appearance: none;
  position: relative;
}
.wm-fase-tab:hover {
  transform: translateY(-2px);
  border-color: var(--tide);
}
.wm-fase-tab.is-active {
  background: var(--deep);
  border-color: var(--deep);
  cursor: default;
}
.wm-fase-tab.is-active:hover { transform: none; }
.wm-fase-tab[data-fase-tab="3"].is-active {
  background: var(--copper);
  border-color: var(--copper);
}

.wm-fase-tab-num {
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.2em;
  color: var(--copper);
}
.wm-fase-tab.is-active .wm-fase-tab-num { color: var(--copper-soft); }
.wm-fase-tab[data-fase-tab="3"].is-active .wm-fase-tab-num { color: var(--paper); }

.wm-fase-tab-label {
  font-family: var(--serif);
  font-size: clamp(0.95rem, 1.4vw, 1.1rem);
  line-height: 1.15;
  color: var(--deeper);
}
.wm-fase-tab.is-active .wm-fase-tab-label { color: var(--paper); }

/* panels */
.wm-fase-panels {
  position: relative;
  margin-top: 0.5rem;
}
.wm-fase-panel {
  padding: clamp(1.8rem, 3vw, 2.6rem);
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 18px;
  animation: wm-panel-in 0.45s var(--ease-out);
}
.wm-fase-panel[hidden] { display: none; }
@keyframes wm-panel-in {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}
.wm-fase-panel-eyebrow {
  display: inline-block;
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--copper);
  margin-bottom: 0.6rem;
}
.wm-fase-panel h3 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(1.5rem, 2.8vw, 2.1rem);
  line-height: 1.1;
  letter-spacing: -0.005em;
  color: var(--deeper);
  margin: 0 0 1.1rem;
  max-width: 28ch;
}
.wm-fase-panel p {
  font-family: var(--sans);
  font-size: 1rem;
  line-height: 1.65;
  color: var(--ink-soft);
  margin: 0 0 1.6rem;
  max-width: 68ch;
}
.wm-fase-panel-quote {
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(1.05rem, 1.6vw, 1.25rem);
  line-height: 1.45;
  color: var(--deep);
  margin: 0;
  padding-left: 1.4rem;
  position: relative;
  max-width: 56ch;
}
.wm-fase-panel-quote::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--copper);
}

/* prev/next chevron arrows on the fase panel — same pattern as om-reis-nav.
   Visible on mobile + desktop, anchored to the panel sides. */
.wm-fase-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: transparent;
  border: none;
  width: 28px;
  height: 28px;
  padding: 0;
  color: var(--copper);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 3;
  opacity: 0.7;
  transition: color 0.3s var(--ease-out),
              opacity 0.3s var(--ease-out),
              transform 0.3s var(--ease-out);
}
.wm-fase-nav:hover { color: var(--deep); opacity: 1; }
.wm-fase-nav:focus-visible {
  outline: 2px solid var(--copper);
  outline-offset: 3px;
  opacity: 1;
}
.wm-fase-nav-prev { left: 0.3rem; }
.wm-fase-nav-prev:hover { transform: translateY(-50%) translateX(-2px); }
.wm-fase-nav-next { right: 0.3rem; }
.wm-fase-nav-next:hover { transform: translateY(-50%) translateX(2px); }
.wm-fase-nav svg { display: block; }
.wm-fase-nav[disabled] {
  opacity: 0;
  pointer-events: none;
  cursor: default;
}

/* mobile: hide the label on each tab, show the number larger and centered.
   The panel sits below as a card; arrows let you tab through. */
@media (max-width: 699px) {
  .wm-fase-tab {
    padding: 0.75rem 0.3rem;
    border-radius: 10px;
    align-items: center;
    justify-content: center;
    gap: 0;
  }
  .wm-fase-tab-label { display: none; }
  .wm-fase-tab-num {
    font-size: 0.9rem;
    letter-spacing: 0.16em;
  }
  /* room for the chevrons on either side of the card */
  .wm-fase-panel {
    padding: 1.4rem 2.8rem;
  }
  .wm-fase-nav { width: 24px; height: 24px; }
}


/* ━━━━━━━━━━━━━ 6. WERKVORMEN — wandelpad as ambient background ━━━━━━━━━━━━━ */
.wm-werkvormen {
  position: relative;
  padding: clamp(5rem, 11vw, 8rem) 0;
  overflow: hidden;
  isolation: isolate;
}
.wm-werkvormen-bg { position: absolute; inset: 0; z-index: 0; }
.wm-werkvormen-bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 65%;
  display: block;
  opacity: 0.55;
  animation: ken-burns-werkvormen 46s ease-in-out infinite alternate;
  transform-origin: center 70%;
  will-change: transform;
}
@keyframes ken-burns-werkvormen {
  0%   { transform: scale(1.02) translate3d(0, 0, 0); }
  100% { transform: scale(1.10) translate3d(1.5%, -1%, 0); }
}
.wm-werkvormen-tint {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(247, 245, 239, 0.92) 0%, rgba(247, 245, 239, 0.68) 50%, rgba(247, 245, 239, 0.92) 100%);
}
.wm-werkvormen-content {
  position: relative;
  z-index: 1;
}
.wm-werkvormen-body {
  max-width: 64ch;
  margin: 0;
}
.wm-werkvormen-body .lead {
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(1.2rem, 1.8vw, 1.5rem);
  line-height: 1.35;
  color: var(--deep);
  margin: 0 0 1.2rem;
}
.wm-werkvormen-body p {
  font-family: var(--sans);
  font-size: 1rem;
  line-height: 1.6;
  color: var(--ink-soft);
  margin: 0 0 1rem;
}
.wm-werkvormen-note {
  font-family: var(--serif);
  font-style: italic;
  color: var(--deep) !important;
  font-size: 1.05rem !important;
}
.wm-werkvormen-tokens {
  list-style: none;
  margin: clamp(2rem, 4vw, 3rem) 0 0;
  padding: 1.6rem 0 0;
  border-top: 1px solid var(--line);
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 0.7rem;
}
.wm-werkvormen-tokens li {
  font-family: var(--mono);
  font-size: 0.82rem;
  letter-spacing: 0.04em;
  color: var(--deep);
  padding: 0.4rem 0.85rem;
  border-radius: 999px;
  background: rgba(247, 245, 239, 0.65);
  border: 1px solid var(--line);
}


/* ━━━━━━━━━━━━━ 7. VEILIGHEIDSREGIO'S ━━━━━━━━━━━━━ */
.wm-veiligheidsregios {
  padding: clamp(4rem, 8vw, 6rem) 0;
  background: var(--paper-2);
}
.wm-vr-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(2rem, 4vw, 3rem);
  align-items: center;
}
@media (min-width: 900px) {
  .wm-vr-grid { grid-template-columns: minmax(0, 4fr) minmax(0, 6fr); }
}
.wm-vr-image { margin: 0; }
.wm-vr-image {
  overflow: hidden;
  border-radius: 16px;
  box-shadow: 0 22px 50px -28px rgba(18, 45, 54, 0.30);
}
.wm-vr-image img {
  width: 100%;
  height: auto;
  display: block;
  animation: ken-burns-vr 32s ease-in-out infinite alternate;
  transform-origin: center 40%;
  will-change: transform;
}
@keyframes ken-burns-vr {
  0%   { transform: scale(1.03) translate3d(0, 0, 0); }
  100% { transform: scale(1.10) translate3d(1.2%, -0.8%, 0); }
}
.wm-vr-text h2 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(1.8rem, 3.4vw, 2.6rem);
  line-height: 1.08;
  color: var(--deeper);
  margin: 0.5rem 0 1rem;
}
.wm-vr-text h2 em { font-style: italic; color: var(--deep); }
.wm-vr-text .lead {
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.1rem;
  color: var(--deep);
  line-height: 1.45;
  margin: 0 0 1.6rem;
  max-width: 48ch;
}
.wm-vr-pair {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.2rem;
  margin-bottom: 1.4rem;
}
@media (min-width: 600px) {
  .wm-vr-pair { grid-template-columns: 1fr 1fr; gap: 1.6rem; }
}
.wm-vr-pair-item h4 {
  font-family: var(--serif);
  font-weight: 500;
  font-size: 1.05rem;
  color: var(--deep);
  margin: 0 0 0.4rem;
}
.wm-vr-pair-item p {
  font-family: var(--sans);
  font-size: 0.93rem;
  line-height: 1.5;
  color: var(--ink-soft);
  margin: 0;
}
.wm-vr-note {
  font-family: var(--serif);
  font-style: italic;
  font-size: 0.95rem;
  color: var(--ink-soft);
  line-height: 1.5;
  max-width: 56ch;
  padding-top: 1rem;
  border-top: 1px dashed var(--line);
}


/* ━━━━━━━━━━━━━ 8. MARBLED GRADIENT (WebGL fBm domain-warp shader) ━━━━━━━━━━━━━ */
.wm-marble-section {
  position: relative;
  height: clamp(270px, 34vh, 420px);
  width: 100%;
  overflow: hidden;
  isolation: isolate;
  background: linear-gradient(135deg, #F5F0E6 0%, #C9D6D0 50%, #8A9164 100%); /* shader-compile fallback */
}
.wm-marble-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  z-index: 0;
}
.wm-marble-content {
  position: relative;
  z-index: 2;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}
.wm-marble-word {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(1.8rem, 4.5vw, 3rem);
  letter-spacing: 0.01em;
  color: rgba(247, 245, 239, 0.95);
  text-shadow: 0 2px 18px rgba(18, 45, 54, 0.4);
}
.wm-marble-quote {
  margin: 0;
  text-align: center;
  max-width: 22ch;
}
.wm-marble-quote p {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(1.6rem, 3.6vw, 2.6rem);
  line-height: 1.18;
  letter-spacing: -0.005em;
  color: rgba(247, 245, 239, 0.96);
  text-shadow: 0 2px 22px rgba(18, 45, 54, 0.5);
  margin: 0;
}
.wm-marble-quote p em {
  font-style: italic;
  color: #6d4528;
}

/* DEAD CODE — kept disabled in case we ever revert; harmless to leave */
.organic-gradient-section {
  position: relative;
  height: clamp(340px, 42vh, 520px);
  width: 100%;
  overflow: hidden;
  isolation: isolate;
}
.organic-gradient-base {
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, #F5F0E6 0%, #C9D6D0 45%, #8A9164 100%);
  z-index: 0;
}
.gradient-blob {
  position: absolute;
  border-radius: 45% 55% 60% 40%;
  pointer-events: none;
  z-index: 1;
  will-change: transform, border-radius;
}

/* large, organic blobs — slow, dramatic motion paths so the surface visibly flows */
.blob-cream {
  width: 70%; height: 80%;
  top: -25%; left: -25%;
  background: #F5F0E6;
  opacity: 0.75;
  filter: blur(45px);
  animation: blob-cream-anim 22s ease-in-out infinite alternate;
}
.blob-teal {
  width: 65%; height: 75%;
  top: 5%; right: -30%;
  background: #C9D6D0;
  opacity: 0.65;
  filter: blur(45px);
  animation: blob-teal-anim 19s ease-in-out infinite alternate;
}
.blob-light {
  width: 55%; height: 65%;
  top: 25%; left: 30%;
  background: #E7D7A8;
  opacity: 0.55;
  filter: blur(55px);
  animation: blob-light-anim 24s ease-in-out infinite alternate;
}
.blob-green {
  width: 75%; height: 85%;
  bottom: -30%; left: 15%;
  background: #8A9164;
  opacity: 0.55;
  filter: blur(55px);
  animation: blob-green-anim 26s ease-in-out infinite alternate;
}
.blob-dark {
  width: 48%; height: 58%;
  top: -5%; right: 5%;
  background: #122D36;
  opacity: 0.32;
  filter: blur(70px);
  animation: blob-dark-anim 20s ease-in-out infinite alternate;
}
.blob-earth {
  width: 42%; height: 52%;
  bottom: 0%; right: 18%;
  background: #5B4A3A;
  opacity: 0.38;
  filter: blur(60px);
  animation: blob-earth-anim 28s ease-in-out infinite alternate;
}
/* small copper accents — the leaf/twig reference */
.blob-copper {
  width: 18%; height: 22%;
  top: 35%; left: 58%;
  background: #A96A45;
  opacity: 0.55;
  filter: blur(32px);
  animation: blob-copper-anim 15s ease-in-out infinite alternate;
}
.blob-copper-small {
  width: 9%; height: 12%;
  top: 65%; left: 20%;
  background: #A96A45;
  opacity: 0.45;
  filter: blur(25px);
  animation: blob-copper-small-anim 17s ease-in-out infinite alternate;
}

/* dramatic 4-step keyframes — large translate, scale, rotate AND border-radius mutation */
@keyframes blob-cream-anim {
  0%   { transform: translate(0%,   0%)   scale(1)    rotate(0deg);   border-radius: 45% 55% 60% 40%; }
  33%  { transform: translate(30%,  25%)  scale(1.2)  rotate(40deg);  border-radius: 55% 45% 40% 60%; }
  66%  { transform: translate(15%,  40%)  scale(0.95) rotate(-20deg); border-radius: 60% 40% 50% 50%; }
  100% { transform: translate(-10%, 30%)  scale(1.05) rotate(20deg);  border-radius: 50% 50% 60% 40%; }
}
@keyframes blob-teal-anim {
  0%   { transform: translate(0%,   0%)   scale(1)    rotate(0deg);   border-radius: 50% 50% 55% 45%; }
  33%  { transform: translate(-30%, 15%)  scale(0.85) rotate(-30deg); border-radius: 60% 40% 45% 55%; }
  66%  { transform: translate(-40%, 35%)  scale(1.1)  rotate(25deg);  border-radius: 45% 55% 50% 50%; }
  100% { transform: translate(-20%, 55%)  scale(0.95) rotate(-15deg); border-radius: 55% 45% 40% 60%; }
}
@keyframes blob-light-anim {
  0%   { transform: translate(0%,   0%)   scale(1)    rotate(0deg);   border-radius: 50% 50% 45% 55%; }
  33%  { transform: translate(-25%, -30%) scale(1.15) rotate(35deg);  border-radius: 60% 40% 55% 45%; }
  66%  { transform: translate(25%,  -15%) scale(0.85) rotate(-25deg); border-radius: 45% 55% 60% 40%; }
  100% { transform: translate(40%,  15%)  scale(1.15) rotate(15deg);  border-radius: 55% 45% 50% 50%; }
}
@keyframes blob-green-anim {
  0%   { transform: translate(0%,   0%)   scale(1)    rotate(0deg);   border-radius: 55% 45% 50% 50%; }
  33%  { transform: translate(15%,  -25%) scale(1.1)  rotate(20deg);  border-radius: 45% 55% 60% 40%; }
  66%  { transform: translate(-25%, -40%) scale(0.9)  rotate(-30deg); border-radius: 50% 50% 45% 55%; }
  100% { transform: translate(-40%, -20%) scale(1.05) rotate(15deg);  border-radius: 55% 45% 50% 50%; }
}
@keyframes blob-dark-anim {
  0%   { transform: translate(0%,   0%)   scale(1)    rotate(0deg);   border-radius: 45% 55% 50% 50%; }
  33%  { transform: translate(25%,  30%)  scale(1.25) rotate(40deg);  border-radius: 55% 45% 60% 40%; }
  66%  { transform: translate(-15%, 55%)  scale(0.9)  rotate(-20deg); border-radius: 50% 50% 55% 45%; }
  100% { transform: translate(-35%, 30%)  scale(1.1)  rotate(25deg);  border-radius: 60% 40% 45% 55%; }
}
@keyframes blob-earth-anim {
  0%   { transform: translate(0%,   0%)   scale(1)    rotate(0deg);   border-radius: 50% 50% 45% 55%; }
  33%  { transform: translate(-30%, -25%) scale(1.15) rotate(-25deg); border-radius: 45% 55% 60% 40%; }
  66%  { transform: translate(15%,  -40%) scale(0.95) rotate(30deg);  border-radius: 55% 45% 50% 50%; }
  100% { transform: translate(30%,  -20%) scale(1.05) rotate(-15deg); border-radius: 50% 50% 45% 55%; }
}
@keyframes blob-copper-anim {
  0%   { transform: translate(0%,   0%)   scale(1)    rotate(0deg);   border-radius: 50% 50% 50% 50%; }
  33%  { transform: translate(45%,  -35%) scale(1.5)  rotate(60deg);  border-radius: 55% 45% 40% 60%; }
  66%  { transform: translate(-25%, 30%)  scale(0.75) rotate(-50deg); border-radius: 45% 55% 55% 45%; }
  100% { transform: translate(-40%, 50%)  scale(1.3)  rotate(35deg);  border-radius: 50% 50% 60% 40%; }
}
@keyframes blob-copper-small-anim {
  0%   { transform: translate(0%,   0%)   scale(1)    rotate(0deg);   border-radius: 50% 50% 45% 55%; }
  50%  { transform: translate(60%,  -40%) scale(1.6)  rotate(80deg);  border-radius: 55% 45% 50% 50%; }
  100% { transform: translate(30%,  -55%) scale(0.7)  rotate(-30deg); border-radius: 60% 40% 55% 45%; }
}

.grain-overlay {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  opacity: 0.05;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.07 0 0 0 0 0.07 0 0 0 0 0.07 0 0 0 0.55 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  background-size: 220px 220px;
}
.organic-gradient-content {
  position: relative;
  z-index: 3;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}
.organic-gradient-word {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(1.8rem, 4.5vw, 3rem);
  letter-spacing: 0.01em;
  color: rgba(18, 45, 54, 0.55);
}


/* niet-doe items get a more visible slide-from-left reveal instead of the
   default translateY fade — easier to perceive while scrolling through */
.wm-niet-list li[data-reveal] {
  opacity: 0;
  transform: translateX(-36px);
  transition: opacity 0.7s var(--ease-out), transform 0.7s var(--ease-out);
}
.wm-niet-list li[data-reveal].is-visible {
  opacity: 1;
  transform: translateX(0);
}
[data-reveal][data-delay="100"].is-visible,
[data-reveal][data-delay="200"].is-visible,
[data-reveal][data-delay="300"].is-visible,
[data-reveal][data-delay="400"].is-visible,
[data-reveal][data-delay="500"].is-visible,
[data-reveal][data-delay="600"].is-visible { /* using existing delay buckets */ }

/* ━━━━━━━━━━━━━ 9. NIET-DOE — tight 2-column grid ━━━━━━━━━━━━━ */
.wm-niet {
  padding: clamp(4rem, 8vw, 6rem) 0;
}
.wm-niet-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(1.5rem, 3vw, 2.5rem);
  align-items: start;
}
@media (min-width: 900px) {
  .wm-niet-grid { grid-template-columns: minmax(0, 4fr) minmax(0, 6fr); gap: clamp(3rem, 5vw, 4.5rem); }
}
.wm-niet-head { max-width: 30ch; }
.wm-niet-head h2 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(1.7rem, 3vw, 2.4rem);
  line-height: 1.08;
  color: var(--deeper);
  margin: 0.5rem 0 0;
}
.wm-niet-head h2 em { font-style: italic; color: var(--deep); }
.wm-niet-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.wm-niet-list li {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(1.05rem, 1.5vw, 1.25rem);
  line-height: 1.35;
  color: var(--deeper);
  padding: 0.85rem 0;
  border-bottom: 1px solid var(--line);
  display: flex;
  align-items: baseline;
  gap: 0.85rem;
}
.wm-niet-list li:last-child { border-bottom: none; }
.wm-niet-cross {
  font-family: var(--mono);
  font-size: 1rem;
  font-weight: 300;
  color: var(--copper);
  flex-shrink: 0;
  line-height: 1;
}


/* ━━━━━━━━━━━━━ 10. CTA — deep teal, matches homepage closing pattern ━━━━━━━━━━━━━ */
.wm-cta {
  position: relative;
  padding: clamp(6rem, 11vw, 9rem) 0;
  background: var(--deeper);
  color: var(--paper);
  overflow: hidden;
}
.wm-cta::before {
  content: "";
  position: absolute;
  inset: -20%;
  background:
    radial-gradient(40% 50% at 22% 32%, rgba(181, 130, 90, 0.45), transparent 60%),
    radial-gradient(45% 55% at 78% 70%, rgba(109, 144, 153, 0.38), transparent 60%),
    radial-gradient(35% 40% at 50% 50%, rgba(207, 223, 218, 0.22), transparent 60%);
  filter: blur(40px) saturate(115%);
  animation: mesh-drift 18s ease-in-out infinite alternate;
  pointer-events: none;
  z-index: 0;
}
.wm-cta-inner {
  position: relative;
  z-index: 1;
  max-width: 56ch;
  margin: 0 auto;
  text-align: center;
}
.wm-cta-lead {
  font-family: var(--mono);
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--copper-soft);
  margin: 0 0 1.2rem;
}
.wm-cta h2 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(2.2rem, 4.8vw, 3.6rem);
  line-height: 1.04;
  color: var(--paper);
  margin: 0 0 1.4rem;
}
.wm-cta h2 em { font-style: italic; color: var(--copper-soft); }
.wm-cta-sub {
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.1rem;
  color: rgba(247, 245, 239, 0.72);
  line-height: 1.5;
  margin: 0 0 2.2rem;
}


/* ━━━━━━━━━━━━━ Reduced motion + responsive guards ━━━━━━━━━━━━━ */
@media (prefers-reduced-motion: reduce) {
  .wm-pulse,
  .gradient-blob,
  .wm-pijler-dot,
  .wm-onderstroom-bg img,
  .wm-werkvormen-bg img { animation: none !important; }
  .wm-marble-canvas { display: none; }
}

@media (max-width: 600px) {
  .wm-hero-title { font-size: clamp(2.1rem, 8.5vw, 3rem); }
  .wm-onderstroom-quote p { font-size: clamp(1.7rem, 7vw, 2.4rem); }
  .wm-niet-list li { font-size: 1.02rem; padding: 0.75rem 0; }
}


/* ════════════════════════════════════════════════════════════════════════
   ░░░░░░░░░░░░░░░░░░░░  INTERIM MANAGEMENT PAGE  ░░░░░░░░░░░░░░░░░░░░
   Reuses werkmethode primitives (.wm-hero, .wm-pijler-row, .wm-onderstroom,
   .wm-veiligheidsregios, .wm-marble-section, .wm-niet, .wm-cta).
   Only NEW patterns are defined under .im-* prefix.
   ════════════════════════════════════════════════════════════════════════ */

.page-interim { background: var(--paper); }


/* ─── hero: 4-rollen variant of the wm-hero-vs-row (inline strip).
   Font sizes inherit from base .wm-hero-vs-row so all pages stay
   consistent — only layout (max-width, gap) differs here. ─── */
.im-hero-rollen {
  max-width: 56ch;
  gap: 0.45rem 1.4rem;
}
@media (max-width: 700px) {
  .im-hero-rollen { gap: 0.4rem 1.1rem; }
}


/* ─── 2. VOOR WIE BELT MIJ — 3-card grid ─── */
.im-voorwie {
  padding: clamp(4rem, 8vw, 6rem) 0 clamp(3rem, 6vw, 5rem);
  background: var(--paper-2);
}
.im-voorwie-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.2rem;
}
@media (min-width: 700px)  { .im-voorwie-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .im-voorwie-grid { grid-template-columns: repeat(3, 1fr); gap: 1.6rem; } }

.im-card {
  position: relative;
  padding: clamp(1.6rem, 2.4vw, 2.1rem);
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 4px;
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
  transition: transform 0.5s var(--ease-out), box-shadow 0.5s var(--ease-out), border-color 0.5s var(--ease-out);
}
.im-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 18px 48px -22px rgba(18, 45, 54, 0.22);
  border-color: var(--copper-soft);
}
.im-card-num {
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.22em;
  color: var(--copper);
}
.im-card h3 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(1.3rem, 2vw, 1.55rem);
  line-height: 1.15;
  color: var(--deeper);
  margin: 0;
}
.im-card-quote {
  margin: 0;
  padding: 0;
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.02rem;
  line-height: 1.4;
  color: var(--deep);
  border-left: 2px solid var(--copper-soft);
  padding-left: 0.9rem;
}
.im-card p {
  font-family: var(--sans);
  font-size: 0.95rem;
  line-height: 1.55;
  color: var(--ink-soft);
  margin: 0;
}


/* ─── ROLLEN ROW — 4 cards naast elkaar, met oversized mono nummer, geen
   gekleurde dots/connector. Andere aankleding dan werkmethode's pijler-row.
   Copper bottom-accent dat van 1px naar 3px groeit op hover. ─── */
.im-rollen-section {
  padding: clamp(4rem, 8vw, 6rem) 0;
}
.im-rollen-row {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
}
@media (min-width: 700px)  { .im-rollen-row { grid-template-columns: repeat(2, 1fr); gap: 1.2rem; } }
@media (min-width: 1000px) { .im-rollen-row { grid-template-columns: repeat(4, 1fr); gap: clamp(1.2rem, 1.8vw, 1.8rem); } }

.im-rol-card {
  position: relative;
  padding: 1.6rem 0 1.4rem;
  border-top: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}
/* copper accent stripe at the top — different from werkmethode's connected dots */
.im-rol-card::before {
  content: "";
  position: absolute;
  top: -1px;
  left: 0;
  width: 36px;
  height: 2px;
  background: var(--copper);
  transition: width 0.55s var(--ease-out);
}
.im-rol-card:hover::before { width: 88px; }

.im-rol-num {
  font-family: var(--mono);
  font-weight: 400;
  font-size: 0.78rem;
  letter-spacing: 0.22em;
  color: var(--copper);
  text-transform: uppercase;
  margin-bottom: 0.2rem;
}
.im-rol-card h3 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(1.45rem, 1.9vw, 1.7rem);
  line-height: 1.12;
  color: var(--deeper);
  margin: 0 0 0.4rem;
}
.im-rol-card p {
  font-family: var(--sans);
  font-size: 0.95rem;
  line-height: 1.55;
  color: var(--ink-soft);
  margin: 0;
  flex-grow: 1;
}
.im-rol-tag {
  font-family: var(--serif);
  font-style: italic;
  font-size: 0.85rem;
  color: var(--copper);
  margin-top: 0.9rem;
  padding-top: 0.9rem;
  border-top: 1px dashed var(--line);
}
@media (prefers-reduced-motion: reduce) {
  .im-rol-card::before { transition: none; }
}


/* ─── 4. RITME — overlay on dijk-dageraad photo (reuses .wm-onderstroom base) ─── */
.im-ritme-tint {
  /* lighter photo → softer tint than onderstroom default */
  background: linear-gradient(180deg, rgba(18, 45, 54, 0.18) 0%, rgba(18, 45, 54, 0.32) 55%, rgba(18, 45, 54, 0.58) 100%);
}
.im-ritme .wm-onderstroom-content {
  display: grid;
  gap: clamp(2.4rem, 4vw, 3.5rem);
}
.im-ritme-head { max-width: 52ch; }
.im-ritme-title {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(2rem, 4.2vw, 3.2rem);
  line-height: 1.06;
  color: var(--paper);
  margin: 0.6rem 0 1rem;
}
.im-ritme-title em { font-style: italic; color: var(--copper-soft); }
.im-ritme-lead {
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(1.1rem, 1.55vw, 1.35rem);
  line-height: 1.4;
  color: rgba(247, 245, 239, 0.85);
  max-width: 44ch;
  margin: 0;
}

.im-ritme-steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.6rem;
}
@media (min-width: 800px) {
  .im-ritme-steps { grid-template-columns: repeat(3, 1fr); gap: clamp(1.4rem, 2.6vw, 2.2rem); }
}
.im-ritme-step {
  padding: 1.4rem 1.4rem 1.5rem;
  background: rgba(18, 45, 54, 0.42);
  backdrop-filter: blur(6px) saturate(108%);
  -webkit-backdrop-filter: blur(6px) saturate(108%);
  border-top: 1px solid rgba(216, 181, 148, 0.45);
  border-radius: 2px;
}
.im-ritme-step-num {
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.22em;
  color: var(--copper-soft);
  display: block;
  margin-bottom: 0.5rem;
}
.im-ritme-step h3 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(1.35rem, 2.1vw, 1.65rem);
  line-height: 1.1;
  color: var(--paper);
  margin: 0 0 0.65rem;
}
.im-ritme-step p {
  font-family: var(--sans);
  font-size: 0.96rem;
  line-height: 1.55;
  color: rgba(247, 245, 239, 0.82);
  margin: 0;
}


/* ─── CASES — 3-tab selector met logos in de tabs. Panel onder de tab-row
   swapt op click. JS init in werkmethode.js (initCaseTabs). ─── */
.im-cases {
  padding: clamp(4rem, 8vw, 6rem) 0;
  background: var(--paper-2);
}

.im-case-tabs {
  margin-top: clamp(2rem, 3.6vw, 3rem);
}

/* Tab row — 3 buttons side by side, each with logo + name + meta */
.im-case-tab-row {
  list-style: none;
  margin: 0 0 clamp(2rem, 3.6vw, 3rem);
  padding: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.6rem;
  border-bottom: 1px solid var(--line);
}
@media (min-width: 800px) {
  .im-case-tab-row {
    grid-template-columns: repeat(4, 1fr);
    gap: 0;
  }
  /* persoonlijke coaching = 3 werkvormen, niet 4 */
  .pc-werkvormen .im-case-tab-row {
    grid-template-columns: repeat(3, 1fr);
  }
}
@media (min-width: 560px) and (max-width: 799px) {
  .im-case-tab-row {
    grid-template-columns: repeat(2, 1fr);
    gap: 0.4rem;
  }
}

.im-case-tab {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  padding: 1.4rem 1.2rem 1.6rem;
  background: transparent;
  border: 0;
  border-bottom: 3px solid transparent;
  margin-bottom: -1px; /* overlap row border so active border replaces it */
  text-align: left;
  cursor: pointer;
  color: var(--ink);
  transition: background 0.3s var(--ease-out), border-color 0.4s var(--ease-out);
  font-family: var(--sans);
  width: 100%;
}
.im-case-tab:hover {
  background: rgba(216, 181, 148, 0.08);
}
.im-case-tab.is-active {
  background: var(--paper);
  border-bottom-color: var(--copper);
}
.im-case-tab:focus-visible {
  outline: 2px solid var(--copper);
  outline-offset: -2px;
}

/* mobile: clearer accordion affordance — each tab gets a chevron and
   a divider line so the three items don't visually flow into each other */
@media (max-width: 799px) {
  /* drop the row's own border-bottom — each tab carries its own divider
     now, otherwise the last item gets two stacked lines */
  .im-case-tab-row { border-bottom: none; }
  .im-case-tab {
    position: relative;
    padding-right: 3rem;
    border-bottom: 1px solid var(--line);
    margin-bottom: 0;
  }
  .im-case-tab::after {
    content: "";
    position: absolute;
    right: 1.4rem;
    top: 50%;
    width: 9px;
    height: 9px;
    border-right: 1.5px solid var(--copper);
    border-bottom: 1.5px solid var(--copper);
    transform: translateY(-75%) rotate(45deg);
    transition: transform 0.35s var(--ease-out);
  }
  .im-case-tab.is-active::after {
    transform: translateY(-25%) rotate(-135deg);
  }
  /* the dynamically-inserted panel slot — separates panel from the next tab */
  .im-case-tab-row > .mobile-panel-slot:not(:empty) {
    border-bottom: 1px solid var(--line);
    padding: 0.6rem 0 1.4rem;
  }
}

.im-case-tab-logo {
  display: flex;
  align-items: center;
  height: 38px;
  overflow: hidden;
}
.im-case-tab-logo img {
  max-height: 38px;
  max-width: 160px;
  width: auto;
  height: auto;
  object-fit: contain;
  filter: saturate(0.95);
  opacity: 0.75;
  transition: opacity 0.3s var(--ease-out);
}
.im-case-tab:hover .im-case-tab-logo img,
.im-case-tab.is-active .im-case-tab-logo img {
  opacity: 1;
}
.im-case-tab-logo-anon {
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.8rem;
  color: var(--copper);
  line-height: 1;
  padding-top: 0.5rem;
}
.im-case-tab-name {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(1.1rem, 1.5vw, 1.3rem);
  line-height: 1.15;
  color: var(--deeper);
}
.im-case-tab-meta {
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--copper);
}

/* Panel switching */
.im-case-panels {
  position: relative;
}
.im-case-panel {
  animation: im-panel-in 0.5s var(--ease-out);
}
.im-case-panel[hidden] { display: none; }

@keyframes im-panel-in {
  0%   { opacity: 0; transform: translateY(8px); }
  100% { opacity: 1; transform: translateY(0); }
}

.im-case-panel-title {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(1.8rem, 3.2vw, 2.5rem);
  line-height: 1.08;
  color: var(--deeper);
  margin: 0 0 1.2rem;
}
.im-case-panel-title em { font-style: italic; color: var(--deep); }

/* Panel grids — default: image LEFT + text RIGHT.
   Used by teamcoaching + persoonlijke coaching werkvormen.
   Interim cases override this with .im-cases .im-case-panel-grid below. */
.im-case-panel-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(2rem, 4vw, 3rem);
  align-items: center;
  min-height: 580px;
}
@media (min-width: 900px) {
  .im-case-panel-grid {
    grid-template-columns: minmax(0, 4fr) minmax(0, 6fr);
  }
}

.im-case-panel-image {
  margin: 0;
  overflow: hidden;
  border-radius: 12px;
  box-shadow: 0 22px 50px -28px rgba(18, 45, 54, 0.30);
}
.im-case-panel-image img {
  width: 100%;
  height: auto;
  display: block;
  animation: ken-burns-vr 32s ease-in-out infinite alternate;
  transform-origin: center 40%;
}

/* INTERIM CASES — left column stacks photo + quote + stats;
   right column has the title + lead + body only. */
.im-cases .im-case-panel-grid {
  align-items: start;
  min-height: 0;
}
.im-case-panel-aside {
  display: flex;
  flex-direction: column;
  gap: clamp(1.2rem, 2vw, 1.6rem);
  position: sticky;
  top: 5.5rem;
}
@media (max-width: 899px) {
  .im-case-panel-aside { position: static; }
}
.im-cases .im-case-panel-image {
  aspect-ratio: 3 / 2;
}
.im-cases .im-case-panel-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 45%;
}
/* compact quote inside the left aside */
.im-cases blockquote.im-case-panel-quote {
  margin: 0;
  padding: 1rem 1.1rem;
  background: var(--paper);
  border-left: 3px solid var(--copper);
  border-radius: 0 8px 8px 0;
  font-size: clamp(0.95rem, 1.25vw, 1.05rem);
}
.im-cases blockquote.im-case-panel-quote footer {
  margin-top: 0.6rem;
  font-size: 0.68rem;
}
/* stats live inside the aside — compact 3-col row, smaller numbers + labels */
.im-cases .im-case-panel-aside .im-stats-row {
  margin: 0;
  padding: 0.9rem 0 0;
  border-top: 1px solid var(--line);
  grid-template-columns: repeat(3, 1fr);
  gap: 0.7rem 0.9rem;
}
.im-cases .im-case-panel-aside .im-stats-row-tight {
  grid-template-columns: repeat(2, 1fr);
  max-width: none;
}
.im-cases .im-case-panel-aside .im-stat-num {
  font-size: clamp(0.95rem, 1.25vw, 1.1rem);
}
.im-cases .im-case-panel-aside .im-stat-label {
  font-size: 0.72rem;
  line-height: 1.25;
}

/* subtiele 'lees verder' link rechtsonder in de quote-kaart op /interim cases */
.im-cases blockquote.im-case-panel-quote {
  position: relative;
  padding-bottom: 1.6rem;
}
.im-case-review-link {
  position: absolute;
  bottom: 0.55rem;
  right: 0.8rem;
  font-family: var(--mono);
  font-size: 0.6rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-soft);
  text-decoration: none;
  opacity: 0.65;
  transition: color 0.2s ease, opacity 0.2s ease;
}
.im-case-review-link:hover {
  color: var(--copper);
  opacity: 1;
}

.im-case-panel-text .lead {
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(1.05rem, 1.5vw, 1.2rem);
  color: var(--deep);
  line-height: 1.45;
  margin: 0 0 1.4rem;
  max-width: 52ch;
}
.im-case-panel-text p {
  font-family: var(--sans);
  font-size: clamp(0.96rem, 1.15vw, 1.05rem);
  line-height: 1.6;
  color: var(--ink-soft);
  margin: 0 0 1rem;
  max-width: 60ch;
}
.im-case-panel-text p:last-of-type { margin-bottom: 1.4rem; }

/* Pull-quote treatment for anon case */
.im-case-panel-quote {
  margin: 0;
  padding: clamp(1.6rem, 3vw, 2.4rem);
  background: var(--paper);
  border-left: 3px solid var(--copper);
  border-radius: 0 8px 8px 0;
  align-self: center;
}
.im-case-panel-quote blockquote {
  margin: 0;
  padding: 0;
}
.im-case-panel-quote p {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(1.5rem, 2.6vw, 2.05rem);
  line-height: 1.18;
  color: var(--deeper);
  margin: 0;
}
.im-case-panel-quote p em {
  font-style: italic;
  color: var(--copper);
}
.im-case-panel-quote-source {
  margin-top: 1.2rem;
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

.im-case-panel-anon-note {
  margin: clamp(2rem, 3vw, 3rem) 0 0;
  padding-top: 1rem;
  border-top: 1px dashed var(--line);
  font-family: var(--serif);
  font-style: italic;
  font-size: 0.85rem;
  color: var(--ink-soft);
  max-width: 70ch;
}

.im-stats-row {
  list-style: none;
  margin: clamp(1.6rem, 2.8vw, 2.2rem) 0 0;
  padding: 1.4rem 0 0;
  border-top: 1px solid var(--line);
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.2rem 1.4rem;
}
@media (min-width: 700px) { .im-stats-row { grid-template-columns: repeat(4, 1fr); } }
.im-stats-row-tight {
  grid-template-columns: repeat(2, 1fr);
}
@media (min-width: 700px) { .im-stats-row-tight { grid-template-columns: repeat(2, 1fr); max-width: 30ch; } }

.im-stats-row li {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}
.im-stat-num {
  font-family: var(--mono);
  font-size: clamp(1.2rem, 1.8vw, 1.55rem);
  font-weight: 500;
  letter-spacing: -0.005em;
  color: var(--deeper);
  line-height: 1;
}
.im-stat-label {
  font-family: var(--serif);
  font-style: italic;
  font-size: 0.92rem;
  line-height: 1.3;
  color: var(--ink-soft);
}


/* ─── reduced-motion + responsive guards (extend the wm- block) ─── */
@media (prefers-reduced-motion: reduce) {
  .im-card { transition: none; }
  .im-card:hover { transform: none; }
}
@media (max-width: 600px) {
  .im-ritme-title { font-size: clamp(1.7rem, 7.5vw, 2.4rem); }
  .im-case-head h2 { font-size: clamp(1.55rem, 6.5vw, 2rem); }
}


/* ═══════════════════════════════════════════════════════════════════
   TEAMCOACHING PAGE — small additions on top of werkmethode + interim
   patterns. Reuses .wm-hero, .im-voorwie, .im-rollen, .wm-onderstroom,
   .im-cases, .wm-niet, .wm-cta wholesale; only adds what differs:
     - .tc-werkvorm-tab-num  → replaces logo slot in werkvormen tabs
     - .tc-werkvorm-tags     → pill-tags row at end of werkvorm panel text
   ═══════════════════════════════════════════════════════════════════ */

/* Number badge in werkvormen tab (sits where klant-logo sits on interim).
   Matches the 38px height target so all tabs align horizontally even when
   /interim and /teamcoaching share the same row markup. */
.tc-werkvorm-tab-num {
  font-family: var(--mono);
  font-size: 1.1rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--copper);
  height: 38px;
  display: inline-flex;
  align-items: center;
  opacity: 0.7;
  transition: opacity 0.3s var(--ease-out), color 0.3s var(--ease-out);
}
.tc-werkvorm-tab:hover .tc-werkvorm-tab-num,
.tc-werkvorm-tab.is-active .tc-werkvorm-tab-num {
  opacity: 1;
  color: var(--deeper);
}

/* Pill-tags below the werkvorm panel body (substitute for .im-stats-row
   on the interim cases). Communicates "wanneer pas ik dit toe". */
.tc-werkvorm-tags {
  list-style: none;
  margin: clamp(1.6rem, 2.8vw, 2.2rem) 0 0;
  padding: 1.4rem 0 0;
  border-top: 1px solid var(--line);
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem 0.7rem;
}
.tc-werkvorm-tags li {
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-soft);
  background: rgba(216, 181, 148, 0.16);
  border: 1px solid rgba(181, 130, 90, 0.28);
  padding: 0.42rem 0.85rem;
  border-radius: 999px;
  line-height: 1;
  transition: background 0.3s var(--ease-out), color 0.3s var(--ease-out);
}
.tc-werkvorm-tags li:hover {
  background: rgba(216, 181, 148, 0.30);
  color: var(--deeper);
}

/* Mobile clamp on werkvorm panel min-height — the 580px from interim
   is taller than needed when the pill-tags row replaces 4 stats. */
@media (max-width: 899px) {
  .tc-werkvormen .im-case-panel-grid { min-height: 0; }
}


/* ═══════════════════════════════════════════════════════════════════
   /persoonlijke-coaching — page-specific styles
   Brand-tokens hergebruikt; layouts variëren bewust om de pagina een
   eigen visueel gewicht te geven (verticale tijdlijn voor de 5
   gesprekken, asymmetrische relatie-sectie).
   ═══════════════════════════════════════════════════════════════════ */


/* ─── HERO — 5-gesprekken inline-strip (zoals interim's 4-rollen-strip
   maar dan met 5 items, dus iets smallere padding) ─── */
/* Hero strip: 5 items op één regel — kleinere font + gap, geen max-width
   zodat het over de volle left-col breedte mag uitspreiden. */
.pc-hero-gesprekken {
  max-width: none;
  gap: 0.4rem 1rem;
}
.pc-hero-gesprekken li { gap: 0.35rem; }
/* font sizes inherit from base .wm-hero-vs-row — kept consistent across pages */
@media (max-width: 600px) {
  .pc-hero-gesprekken { gap: 0.4rem 0.7rem; }
}

/* ─── HERO SVG — Steen-in-water ornament container ─── */
.pc-hero-ornament svg {
  width: 100%;
  height: auto;
  max-height: 460px;
  display: block;
}


/* ─── 3. VIJF GESPREKKEN — sticky head links, scrolling tijdlijn rechts ─── */
.pc-gesprekken-section {
  padding: clamp(4rem, 8vw, 6.5rem) 0 clamp(4rem, 7vw, 5.5rem);
  background: var(--paper);
}

.pc-gesprekken-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2.5rem;
}

.pc-gesprekken-head { max-width: 520px; }
.pc-gesprekken-intro {
  font-family: var(--sans);
  font-size: clamp(1rem, 1.15vw, 1.1rem);
  line-height: 1.6;
  color: var(--ink-soft);
  margin: 1.2rem 0 0;
}
.pc-gesprekken-intro + .pc-gesprekken-intro {
  margin-top: 0.9rem;
}

.pc-gesprekken-quote {
  margin: 2.6rem 0 0;
  padding: 0 0 0 1.4rem;
  border-left: 2px solid var(--copper-soft);
  font-family: var(--serif);
  font-style: normal;
  font-weight: 400;
  font-size: clamp(1.3rem, 1.85vw, 1.6rem);
  line-height: 1.32;
  color: var(--deep);
  position: relative;
  max-width: 460px;
}
.pc-gesprekken-quote em {
  font-style: italic;
  color: var(--copper);
}
.pc-gesprekken-quote-mark {
  position: absolute;
  top: -0.6rem;
  left: 0.6rem;
  font-family: var(--serif);
  font-size: 2.6rem;
  line-height: 1;
  color: var(--copper-soft);
  opacity: 0.55;
}

.pc-gesprekken-timeline {
  list-style: none;
  margin: 0;
  padding: 0;
  position: relative;
}

/* Desktop: sticky head links, items rechts in normale flow.
   Geen pin, geen mask, geen translate — gewoon CSS sticky + scroll. */
@media (min-width: 900px) {
  /* 42/58 split — Stripe/Linear/Vercel verhouding: head krijgt iets minder
     ruimte dan de timeline zodat de items het visuele gewicht dragen. */
  .pc-gesprekken-grid {
    grid-template-columns: 5fr 7fr;
    gap: clamp(4rem, 7vw, 6rem);
    align-items: start;
  }

  /* Head-inner stickert binnen head-col. Top-offset 140-180px geeft
     comfortabele afstand tot fixed page-header. */
  .pc-gesprekken-head-inner {
    position: sticky;
    top: clamp(140px, 16vh, 180px);
  }
}

/* STAGE: container voor de actieve-item carousel + progress-dots.
   Op desktop is dit het venster waar één item tegelijk in beeld is. */
.pc-gesprekken-stage {
  position: relative;
}

/* TIMELINE op desktop: grid-stack — alle items overlappen in dezelfde
   cel, alleen die met is-current is zichtbaar. Op mobile fallback naar
   normale flow met hairline-dividers. */
.pc-gesprekken-timeline {
  list-style: none;
  margin: 0;
  padding: 0;
}

/* ITEM editorial: giant numeral + content. Twee-koloms grid. */
.pc-gesprek-item {
  display: grid;
  grid-template-columns: minmax(72px, 100px) minmax(0, 1fr);
  gap: clamp(1rem, 2vw, 1.6rem);
  align-items: start;
}

.pc-gesprek-num {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(3.2rem, 5.4vw, 5rem);
  line-height: 0.9;
  color: var(--copper);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
}

/* Alle items krijgen dezelfde numeral-stijl — geen italic op pivot, geen
   kleinere/faded numeral op follow-up. Visuele consistency over alle 6. */

.pc-gesprek-body { padding-top: 0.7rem; }

.pc-gesprek-eyebrow {
  display: inline-block;
  font-family: var(--sans);
  font-size: 0.78rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--tide);
  margin-bottom: 0.7rem;
  font-weight: 500;
}

.pc-gesprek-item h3 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(1.75rem, 2.6vw, 2.3rem);
  line-height: 1.1;
  color: var(--deeper);
  margin: 0 0 0.85rem;
  letter-spacing: -0.005em;
}

.pc-gesprek-item p {
  font-family: var(--sans);
  font-size: clamp(1rem, 1.15vw, 1.1rem);
  line-height: 1.62;
  color: var(--ink-soft);
  margin: 0;
  max-width: 52ch;
}

/* PROGRESS BUTTONS — pill-stijl, duidelijk klikbaar, met num + label.
   Tight gap + padding zodat alle 6 op één regel passen op desktop. */
.pc-gesprekken-progress {
  display: none; /* default verborgen — alleen tonen in desktop cross-fade modus */
  flex-wrap: nowrap;
  align-items: center;
  gap: 0.4rem;
  margin-top: 2.6rem;
}

.pc-progress-dot {
  display: inline-flex;
  align-items: baseline;
  gap: 0.4rem;
  appearance: none;
  border: 1px solid rgba(14, 34, 40, 0.16);
  background: transparent;
  color: var(--ink-soft);
  padding: 0.5rem 0.85rem 0.55rem;
  border-radius: 999px;
  cursor: pointer;
  transition: border-color 0.3s var(--ease-out),
              background 0.3s var(--ease-out),
              color 0.3s var(--ease-out),
              transform 0.2s var(--ease-out);
  font-family: inherit;
  line-height: 1;
  white-space: nowrap;
  flex-shrink: 0;
}

.pc-progress-num {
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.12em;
  font-weight: 500;
  color: var(--copper);
  transition: color 0.3s var(--ease-out);
}

.pc-progress-label {
  font-family: var(--sans);
  font-size: 0.82rem;
  font-weight: 500;
  letter-spacing: 0.005em;
}

.pc-progress-dot:hover {
  border-color: var(--copper);
  background: rgba(181, 130, 90, 0.06);
  transform: translateY(-1px);
}

.pc-progress-dot.is-active {
  background: var(--copper);
  border-color: var(--copper);
  color: var(--paper);
}
.pc-progress-dot.is-active .pc-progress-num {
  color: rgba(247, 245, 239, 0.7); /* paper @ ~70% */
}

.pc-progress-dot.is-followup-dot {
  border-style: dashed;
  border-color: rgba(216, 181, 148, 0.65);
}
.pc-progress-dot.is-followup-dot .pc-progress-num {
  color: var(--copper-soft);
}
.pc-progress-dot.is-followup-dot.is-active {
  background: var(--copper-soft);
  border-color: var(--copper-soft);
  border-style: solid;
  color: var(--deeper);
}
.pc-progress-dot.is-followup-dot.is-active .pc-progress-num {
  color: var(--deep);
}

.pc-progress-dot:focus-visible {
  outline: 2px solid var(--copper);
  outline-offset: 3px;
}

/* MOBILE (< 900px): items in normale stacked flow, geen cross-fade. */
@media (max-width: 899px) {
  .pc-gesprek-item {
    padding: 1.6rem 0;
    border-bottom: 1px solid rgba(14, 34, 40, 0.08);
    grid-template-columns: minmax(54px, 68px) minmax(0, 1fr);
    gap: 1rem;
  }
  .pc-gesprek-item:last-child { border-bottom: none; }
  .pc-gesprek-num { font-size: 2.6rem; }
  .pc-gesprek-item h3 { font-size: 1.5rem; }
  .pc-gesprekken-progress { display: none !important; }
}

/* DESKTOP cross-fade — items stapelen via grid-area: 1/1, één is zichtbaar
   tegelijk via .is-current. Geen pin, geen scroll-trickery. Section is
   normale natuurlijke hoogte (~400-450px) en flow is normaal, dus de
   volgende sectie zit er direct onder en is zichtbaar bij scrollen.
   Items cyclen via auto-advance timer (JS, 5s per item) of via klik op dots. */
@media (min-width: 900px) {
  .pc-gesprekken-section {
    padding-top: clamp(5.5rem, 8vw, 8.5rem);
    padding-bottom: clamp(5.5rem, 8vw, 8.5rem);
  }
  .pc-gesprekken-section > .container { width: 100%; }

  .pc-gesprekken-grid {
    align-items: start;
  }

  .pc-gesprekken-head-inner {
    position: static;
  }

  /* Rechter stage verticaal gecenterd binnen de rij — head bepaalt
     row-hoogte (langer met quote), stage zit in het midden zodat
     het item-content niet "te hoog" voelt. */
  .pc-gesprekken-stage {
    align-self: center;
  }

  /* Stage = container, timeline = grid-stack: items overlappen in 1 cel.
     min-height voorkomt layout-jump tussen items van verschillende lengte. */
  .pc-gesprekken-timeline {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 1fr;
    min-height: 260px;
  }

  /* Sequenced cross-fade — outgoing fadet weg in 0.35s, incoming fadet in
     met 0.35s delay zodat ze niet over elkaar heen vallen. */
  .pc-gesprek-item {
    grid-column: 1;
    grid-row: 1;
    align-self: start;
    transition: opacity 0.35s var(--ease-out),
                transform 0.35s var(--ease-out);
  }

  /* :not(.is-current) heeft hogere specificity dan [data-reveal].is-visible
     dus opacity:0 wint, ook al voegt animations.js is-visible toe */
  .pc-gesprek-item:not(.is-current) {
    opacity: 0;
    transform: translateY(14px);
    pointer-events: none;
  }
  .pc-gesprek-item.is-current {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
    /* Wacht tot het vorige item is uitgefaded voor we infaden */
    transition-delay: 0.35s;
  }

  .pc-gesprekken-progress {
    display: flex;
  }
}


/* ─── 6. RELATIECOACHING — asymmetric 2-col with image right, copy left ─── */
.pc-relatie {
  padding: clamp(4rem, 8vw, 6.5rem) 0;
  background: var(--paper-2);
  position: relative;
}

.pc-relatie::before {
  /* a subtle top hairline divider in copper-soft */
  content: "";
  position: absolute;
  top: 0; left: 50%;
  transform: translateX(-50%);
  width: clamp(60px, 9vw, 120px);
  height: 1px;
  background: var(--copper);
  opacity: 0.55;
}

.pc-relatie-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2.5rem;
  align-items: start;
}
@media (min-width: 900px) {
  .pc-relatie-grid {
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
    gap: clamp(2rem, 4vw, 4rem);
  }
}

.pc-relatie-copy { max-width: 580px; }

.pc-relatie-title {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(1.85rem, 3vw, 2.55rem);
  line-height: 1.1;
  color: var(--deeper);
  margin: 0.7rem 0 1rem;
}
.pc-relatie-title em {
  font-style: italic;
  color: var(--copper);
}

.pc-relatie-lead {
  font-family: var(--sans);
  font-size: clamp(1.02rem, 1.2vw, 1.13rem);
  line-height: 1.6;
  color: var(--ink-soft);
  margin: 0 0 2rem;
}

.pc-relatie-cards {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.2rem;
}
@media (min-width: 640px) {
  .pc-relatie-cards { grid-template-columns: 1fr 1fr; gap: 1.4rem; }
}

.pc-relatie-card {
  position: relative;
  padding: 1.4rem 1.4rem 1.2rem;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 4px;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  transition: border-color 0.35s var(--ease-out), transform 0.45s var(--ease-out);
}
.pc-relatie-card:hover {
  border-color: var(--copper-soft);
  transform: translateY(-2px);
}

.pc-relatie-card-num {
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--copper);
}

.pc-relatie-card h3 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 1.32rem;
  line-height: 1.15;
  color: var(--deeper);
  margin: 0 0 0.2rem;
}

.pc-relatie-card p {
  font-family: var(--sans);
  font-size: 0.95rem;
  line-height: 1.55;
  color: var(--ink-soft);
  margin: 0;
  flex-grow: 1;
}

.pc-relatie-card-meta {
  font-family: var(--serif);
  font-style: italic;
  font-size: 0.86rem;
  color: var(--copper);
  margin-top: 0.7rem;
  padding-top: 0.7rem;
  border-top: 1px dashed var(--line);
}

.pc-relatie-image {
  margin: 0;
  position: relative;
  border-radius: 4px;
  overflow: hidden;
  aspect-ratio: 16 / 10;
  box-shadow: 0 12px 40px -16px rgba(18, 45, 54, 0.25);
}
.pc-relatie-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
@media (min-width: 900px) {
  .pc-relatie-image {
    aspect-ratio: 4 / 5;
    position: sticky;
    top: 100px;
  }
}


/* ═══════════════════════════════════════════════════════════════════════
   OVER MIJ — /over-mij.html
   Reuses .wm-hero, .wm-section-head, .im-voorwie-grid + .im-card,
   .wm-onderstroom + .im-ritme, .wm-niet, .wm-cta. Adds:
   - .om-hero (photo LEFT, text RIGHT — mirrored from /interim hero)
   - .om-hero-portret (large editorial portrait with deep gradient mat)
   - .om-timeline + .om-stop (vertical timeline with copper dots)
   - .om-interlude (full-width image insets between stops)
   - .om-pull-quote (oversized quote in interlude B)
   - .om-bagage (asymmetric 2-col: disciplines list + signature claim)
   - .om-vs (3 V's typographic section with letter+word cards)
   ═══════════════════════════════════════════════════════════════════════ */

/* ─── 1. HERO — photo LEFT, text RIGHT (mirror of /interim).
   Padding matches .wm-hero baseline so all non-homepage heroes have the same
   vertical footprint across the site. ─── */
.om-hero {
  padding: clamp(6rem, 11vw, 9rem) 0 clamp(3rem, 5vw, 4rem);
}
.om-hero-grid {
  grid-template-columns: minmax(0, 1fr);
  align-items: center;
}
@media (min-width: 900px) {
  .om-hero-grid {
    grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
    gap: clamp(2.5rem, 5vw, 4.5rem);
  }
}

.om-hero-portret {
  position: relative;
  margin: 0;
  border-radius: 6px;
  overflow: hidden;
  background: linear-gradient(155deg, var(--deeper) 0%, var(--deep) 55%, #2a5d6e 100%);
  box-shadow: 0 32px 80px -28px rgba(18, 45, 54, 0.45);
  /* square-ish frame — source (~2:3 portrait) has ~30%+ empty space above her
     head, so we need an aggressive crop. aspect-ratio 6/7 + object-position
     center 78% pulls source down so most empty space at top is cropped,
     while preserving her face + bust. */
  aspect-ratio: 6 / 7;
  max-width: 460px;
  width: 100%;
}
@media (min-width: 900px) {
  .om-hero-portret {
    max-width: 100%;
    /* Cap portret height so the entire hero stays within the site-wide
       720px baseline (hero padding ~210px + portret max-height ~510px). */
    max-height: 510px;
    width: auto;
    aspect-ratio: 6 / 7;
    /* portret sits in the LEFT column of the wm-hero-grid — flush against
       the container's left edge so it lines up with the logo + section heads. */
    margin-left: 0;
    margin-right: auto;
  }
}
.om-hero-portret img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: center 78%;
}
.om-hero-portret::after {
  /* subtle inner vignette to anchor the portrait edges to the gradient */
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(120% 80% at 50% 30%, transparent 55%, rgba(18, 45, 54, 0.22) 100%);
  pointer-events: none;
}
.om-hero-caption {
  position: absolute;
  left: clamp(1rem, 2vw, 1.4rem);
  bottom: clamp(0.9rem, 2vw, 1.2rem);
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(247, 245, 239, 0.78);
  z-index: 2;
}

.om-hero-meta {
  max-width: 52ch;
}


/* ─── 2. LEVENSREIS — vertical timeline ─── */
.om-reis {
  padding: clamp(4rem, 9vw, 7rem) 0 clamp(4rem, 8vw, 6rem);
  background: var(--paper-2);
}
.om-reis-intro {
  font-family: var(--sans);
  font-size: 1.02rem;
  line-height: 1.6;
  color: var(--ink-soft);
  margin: 1rem 0 0;
  max-width: 56ch;
}

/* HORIZONTAL TIMELINE — 6 clickable dots on a horizontal line, click expands
   a panel below with the chapter story. Inspired by /werkmethode 5-fase tabs. */
.om-reis-tabs {
  margin: clamp(2.5rem, 4vw, 3.5rem) 0 0;
}
.om-reis-tab-row {
  list-style: none;
  margin: 0 0 clamp(2rem, 4vw, 3rem);
  padding: clamp(1.4rem, 2.4vw, 1.8rem) 0 0;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 0.6rem;
  position: relative;
}
/* horizontal connecting line through all dots — extends from first dot center
   to last dot center. Dot center = padding-top + dot-radius (8px). */
.om-reis-tab-row::before {
  content: "";
  position: absolute;
  /* first dot center is at .om-reis-tab item flex-start + half its width.
     With justify-content space-between, first dot sits flush with left edge
     of row. Half the dot-row item width (clamped) is roughly 60px. */
  left: 8px;
  right: 8px;
  top: calc(1.4rem + 8px);
  height: 1px;
  background: var(--copper-soft);
  opacity: 0.55;
  z-index: 0;
}
@media (min-width: 700px) {
  .om-reis-tab-row::before { top: calc(1.8rem + 8px); }
}

.om-reis-tab {
  position: relative;
  appearance: none;
  background: transparent;
  border: none;
  padding: 0;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.55rem;
  font: inherit;
  color: inherit;
  outline-offset: 4px;
  z-index: 1;
  flex: 0 0 auto;
  min-width: 60px;
}
.om-reis-tab-dot {
  display: block;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--paper-2);
  border: 1.5px solid var(--copper);
  position: relative;
  transition: transform 0.4s var(--ease-out), background-color 0.4s var(--ease-out), box-shadow 0.4s var(--ease-out);
}
.om-reis-tab-dot::before {
  content: "";
  position: absolute;
  inset: 3px;
  border-radius: 50%;
  background: var(--copper);
  opacity: 0;
  transition: opacity 0.4s var(--ease-out);
}
.om-reis-tab:hover .om-reis-tab-dot {
  transform: scale(1.12);
  box-shadow: 0 0 0 5px rgba(181, 130, 90, 0.14);
}
.om-reis-tab.is-active .om-reis-tab-dot {
  transform: scale(1.18);
  background: var(--paper-2);
  box-shadow: 0 0 0 6px rgba(181, 130, 90, 0.18);
}
.om-reis-tab.is-active .om-reis-tab-dot::before { opacity: 1; }

.om-reis-tab-num {
  font-family: var(--mono);
  font-size: 0.66rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--copper);
  margin-top: 0.2rem;
}
.om-reis-tab-label {
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(0.85rem, 1.2vw, 1rem);
  line-height: 1.1;
  color: var(--ink-soft);
  text-align: center;
  transition: color 0.4s var(--ease-out);
}
.om-reis-tab:hover .om-reis-tab-label,
.om-reis-tab.is-active .om-reis-tab-label {
  color: var(--deeper);
}

/* PANELS — single visible panel below the tab row, swap on click */
.om-reis-panels {
  position: relative;
}

/* Navigation arrows — naked chevron centered in the panel's padding strip.
   Panel padding-left/right is clamp(1.6rem, 3vw, 2.6rem) (see .om-reis-panel
   below). Icon is 24px wide. To center the icon in the padding strip we put
   the button at (padding - icon-width) / 2 from the panel edge. */
.om-reis-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: transparent;
  border: none;
  width: 24px;
  height: 24px;
  padding: 0;
  color: var(--copper);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 3;
  opacity: 0.65;
  transition: color           0.3s var(--ease-out),
              opacity         0.3s var(--ease-out),
              transform       0.3s var(--ease-out);
}
.om-reis-nav:hover {
  color: var(--deep);
  opacity: 1;
}
.om-reis-nav:focus-visible {
  outline: 2px solid var(--copper);
  outline-offset: 3px;
  opacity: 1;
}
.om-reis-nav-prev {
  left: calc((clamp(1.6rem, 3vw, 2.6rem) - 24px) / 2);
}
.om-reis-nav-prev:hover { transform: translateY(-50%) translateX(-2px); }
.om-reis-nav-next {
  right: calc((clamp(1.6rem, 3vw, 2.6rem) - 24px) / 2);
}
.om-reis-nav-next:hover { transform: translateY(-50%) translateX(2px); }
.om-reis-nav svg {
  display: block;
}
.om-reis-nav[disabled] {
  opacity: 0;
  pointer-events: none;
  cursor: default;
}
.om-reis-panel {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: clamp(1.6rem, 3vw, 2.4rem) clamp(1.6rem, 3vw, 2.6rem);
  min-height: clamp(220px, 28vw, 320px);
  animation: omReisFadeIn 0.55s var(--ease-out);
}
.om-reis-panel[hidden] { display: none; }
@keyframes omReisFadeIn {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

.om-reis-panel-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(1.6rem, 3vw, 2.4rem);
  align-items: center;
}
@media (min-width: 900px) {
  /* With-image panels: text LEFT, image RIGHT */
  .om-reis-panel-grid--with-image {
    grid-template-columns: minmax(0, 5fr) minmax(0, 4fr);
    gap: clamp(2rem, 4vw, 3rem);
  }
}

.om-reis-panel-text { max-width: 60ch; }
.om-reis-panel-eyebrow {
  display: inline-block;
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--copper);
  margin-bottom: 0.7rem;
}
.om-reis-panel-text h3 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(1.55rem, 2.6vw, 2rem);
  line-height: 1.1;
  color: var(--deeper);
  margin: 0 0 1rem;
  letter-spacing: -0.008em;
}
.om-reis-panel-text p {
  font-family: var(--sans);
  font-size: 1rem;
  line-height: 1.65;
  color: var(--ink-soft);
  margin: 0;
}
.om-reis-panel-quote {
  margin: 1.4rem 0 0;
  padding: 1rem 0 0 1.1rem;
  border-left: 2px solid var(--copper);
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(1.1rem, 1.7vw, 1.3rem);
  line-height: 1.35;
  color: var(--deep);
}
.om-reis-panel-quote em { color: var(--copper); }

.om-reis-panel-image {
  margin: 0;
  border-radius: 4px;
  overflow: hidden;
  box-shadow: 0 22px 56px -28px rgba(18, 45, 54, 0.3);
}
.om-reis-panel-image img {
  width: 100%;
  height: auto;
  display: block;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}


/* ─── 3. DRIE KEER AFSCHEID — uses .im-voorwie + .im-card, just adds intro paragraph ─── */
.om-section-lead {
  font-family: var(--sans);
  font-size: 1.02rem;
  line-height: 1.6;
  color: var(--ink-soft);
  margin: 1rem 0 0;
  max-width: 60ch;
}
.om-afscheid .im-card h3 { font-size: clamp(1.25rem, 1.9vw, 1.5rem); }


/* ─── 4. BAGAGE — asymmetric 2-col, no cards ─── */
.om-bagage {
  padding: clamp(4rem, 9vw, 7rem) 0;
}
.om-bagage-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(2rem, 4vw, 3.5rem);
  align-items: start;
}
@media (min-width: 1000px) {
  .om-bagage-grid {
    grid-template-columns: minmax(0, 4fr) minmax(0, 6fr);
    gap: clamp(3rem, 5vw, 5rem);
  }
}

.om-bagage-side {
  position: relative;
  padding-left: clamp(1.2rem, 2vw, 1.6rem);
  border-left: 1px solid var(--line);
}
.om-bagage-side-title {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(1.45rem, 2.2vw, 1.75rem);
  line-height: 1.15;
  color: var(--deeper);
  margin: 0.5rem 0 1.4rem;
}
.om-bagage-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}
.om-bagage-list li {
  font-family: var(--sans);
  font-size: 0.93rem;
  line-height: 1.55;
  color: var(--ink-soft);
  padding-bottom: 0.85rem;
  border-bottom: 1px dashed var(--line);
}
.om-bagage-list li:last-child { border-bottom: none; }
.om-bagage-tag {
  display: block;
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--copper);
  margin-bottom: 0.3rem;
}

.om-bagage-main { max-width: 56ch; }
.om-bagage-title {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(2rem, 4.2vw, 3rem);
  line-height: 1.06;
  letter-spacing: -0.012em;
  color: var(--deeper);
  margin: 0.6rem 0 1.3rem;
  max-width: 18ch;
}
.om-bagage-title em { font-style: italic; color: var(--deep); }
.om-bagage-main p {
  font-family: var(--sans);
  font-size: 1.02rem;
  line-height: 1.65;
  color: var(--ink-soft);
  margin: 0 0 1rem;
}
.om-bagage-signoff {
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.1rem;
  color: var(--deep);
  border-top: 1px solid var(--line);
  padding-top: 1.2rem;
  margin-top: 1.5rem !important;
}


/* ─── 5. WERKTERREIN — full-bleed haven photo, reuses .wm-onderstroom + .im-ritme ─── */
.om-werkterrein {
  min-height: clamp(540px, 70vh, 720px);
}
.om-werkterrein-tint {
  /* haven photo is bright (sky + water) so we need a deeper tint than dijk-dageraad */
  background: linear-gradient(180deg, rgba(18, 45, 54, 0.55) 0%, rgba(18, 45, 54, 0.68) 50%, rgba(18, 45, 54, 0.78) 100%);
}
/* head sits flush against cards on /interim's dijk-pattern, but the haven copy
   needs more air before the 3 cards begin. Boost the inner gap on this page. */
.om-werkterrein .wm-onderstroom-content {
  gap: clamp(5rem, 9vw, 7.5rem);
  padding-top: clamp(2rem, 3vw, 3rem);
  padding-bottom: clamp(2rem, 3vw, 3rem);
}
.om-werkterrein .im-ritme-lead {
  margin-bottom: 0.4rem;
  max-width: 56ch;
}
.om-werkterrein {
  min-height: clamp(620px, 80vh, 820px);
}


/* ─── 6. DE 3 V's — typographic section ─── */
.om-vs {
  padding: clamp(4rem, 9vw, 7rem) 0;
  background: var(--paper-2);
}
.om-vs-head { max-width: 56ch; }
.om-vs-title {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(2rem, 4vw, 2.8rem);
  line-height: 1.06;
  color: var(--deeper);
  margin: 0.5rem 0 0.8rem;
}
.om-vs-lead {
  font-family: var(--sans);
  font-size: 1.02rem;
  line-height: 1.6;
  color: var(--ink-soft);
  margin: 0;
  max-width: 60ch;
}

.om-vs-row {
  list-style: none;
  margin: clamp(2.5rem, 4vw, 3.5rem) 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.2rem;
}
@media (min-width: 700px)  { .om-vs-row { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .om-vs-row { grid-template-columns: repeat(3, 1fr); gap: 1.6rem; } }

.om-vs-card {
  position: relative;
  padding: clamp(2rem, 3vw, 2.6rem) clamp(1.6rem, 2.4vw, 2.1rem) clamp(1.6rem, 2.4vw, 2rem);
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 4px;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  transition: transform 0.5s var(--ease-out), border-color 0.5s var(--ease-out), box-shadow 0.5s var(--ease-out);
}
.om-vs-card:hover {
  transform: translateY(-3px);
  border-color: var(--copper-soft);
  box-shadow: 0 18px 48px -22px rgba(18, 45, 54, 0.18);
}
/* Drop-cap word — browser-native first-letter pseudo. The browser handles
   the italic V's overhanging serifs without any custom span/box constraints. */
.om-vs-word {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(1.55rem, 2.2vw, 1.85rem);
  line-height: 1.1;
  color: var(--deeper);
  margin: 0 0 0.9rem;
}
.om-vs-word::first-letter {
  font-style: italic;
  font-size: 2.6em;
  color: var(--copper);
  /* Pull the rest of the word tight against the V. Negative margin works
     cleanly on ::first-letter without clipping the glyph (the V's serifs
     render via the typeface's natural metrics, outside the box). */
  margin-right: -0.12em;
}
.om-vs-card p {
  font-family: var(--sans);
  font-size: 0.95rem;
  line-height: 1.55;
  color: var(--ink-soft);
  margin: 0;
}

.om-vs-quote {
  margin: clamp(2.5rem, 4vw, 3.5rem) auto 0;
  max-width: 60ch;
  text-align: center;
  padding: 1.4rem 1rem;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.om-vs-quote p {
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(1.2rem, 2.2vw, 1.5rem);
  line-height: 1.35;
  color: var(--deep);
  margin: 0 0 0.7rem;
}
.om-vs-quote footer {
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--copper);
}


/* ─── 7. GRENZEN — reuses .wm-niet, just adds intro paragraph ─── */
.om-grenzen .wm-niet-head h2 { font-size: clamp(1.7rem, 3vw, 2.3rem); }
.om-grenzen-lead {
  font-family: var(--sans);
  font-size: 0.98rem;
  line-height: 1.6;
  color: var(--ink-soft);
  margin: 1rem 0 0;
  max-width: 38ch;
}


/* ─── Reduced motion ─── */
@media (prefers-reduced-motion: reduce) {
  .om-stop-dot,
  .om-stop-body,
  .om-vs-card { transition: none; }
}


/* ─── Mobile fine-tuning ─── */
@media (max-width: 700px) {
  .om-hero-portret { max-width: 360px; margin: 0 auto; }
  .om-hero-meta { gap: 0.4rem 1.1rem; }
  .om-bagage-side { border-left: none; border-top: 1px solid var(--line); padding-left: 0; padding-top: 1.6rem; }

  /* Reis tabs: labels too tight at 6-tab 390px width — shrink labels.
     Flex space-between still distributes the 6 dots evenly across the row. */
  .om-reis-tab { min-width: 50px; }
  .om-reis-tab-num { font-size: 0.62rem; }
  .om-reis-tab-label {
    font-size: 0.74rem;
    line-height: 1.05;
    max-width: 64px;
  }
}


/* ═══════════════════════════════════════════════════════════════════════
   CONTACT — /contact.html
   Reuses .wm-hero + .om-hero (portret LEFT, copy RIGHT mirror),
   .im-voorwie + .im-card (3 routes), .wm-section-head, .im-ritme-steps
   (aftermath timeline). Adds:
   - .ct-hero-portret (overrides aspect/object-position for leaning shot)
   - .ct-routes (3 cards with action-icons in place of quote-marks)
   - .ct-form-section (inline form, 2-col aside + stage)
   - .ct-aftermath (im-ritme-steps re-skinned for paper-2, no full-bleed)
   - .ct-praktisch (2-col prose: adres + werktijden)
   - .ct-signature (copper-soft divider + mini-portret + signature note)
   ═══════════════════════════════════════════════════════════════════════ */

/* ─── 1. HERO — leaning portret heeft donkere achtergrond + andere crop ─── */
.ct-hero-portret {
  /* leaning source is 1231×1800 (~2:3) met handen op tafel, donkere achtergrond.
     De afbeelding heeft een natuurlijke vignet — geen extra gradient nodig.
     Aspect 5/6 = iets meer ruimte boven hoofd dan over-mij's 6/7. */
  aspect-ratio: 5 / 6;
  background: linear-gradient(155deg, #0a1a20 0%, #122d36 55%, #1f4e5c 100%);
}
.ct-hero-portret img {
  object-position: center 45%;
}
.ct-hero-portret::after {
  /* zachter vignet dan over-mij want bron is al donker */
  background: radial-gradient(120% 80% at 50% 25%, transparent 60%, rgba(10, 26, 32, 0.4) 100%);
}
.ct-hero-meta {
  max-width: 56ch;
}


/* ─── 2. DRIE DIRECTE ROUTES — 3-card grid, gehele card is klikbaar ─── */
.ct-routes {
  /* zit op paper-2 via .im-voorwie. */
}
.ct-section-lead {
  font-family: var(--sans);
  font-size: 1.02rem;
  line-height: 1.6;
  color: var(--ink-soft);
  margin: 1rem 0 0;
  max-width: 56ch;
}

.ct-route-card {
  text-decoration: none;
  color: inherit;
  cursor: pointer;
}
.ct-route-card:hover .ct-route-icon {
  background: var(--copper);
  color: var(--paper);
  border-color: var(--copper);
}
.ct-route-card:hover h3 {
  color: var(--deep);
}
.ct-route-card h3 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(1.2rem, 1.8vw, 1.4rem);
  line-height: 1.15;
  color: var(--deeper);
  margin: 0;
  transition: color 0.4s var(--ease-out);
  /* mailen-adres is lang — laat woordbreking toe */
  word-break: break-word;
}

.ct-route-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid var(--copper-soft);
  color: var(--copper);
  background: var(--paper);
  transition: background 0.4s var(--ease-out), color 0.4s var(--ease-out), border-color 0.4s var(--ease-out);
  flex-shrink: 0;
}


/* ─── 1. HERO — uses .wm-hero template (eyebrow + H1 + sub + meta-row).
   Override: collapse the 2-col grid to single column so the text sits
   left-aligned without a half-empty ornament column. All other typography
   (.wm-hero-title, .wm-hero-sub, .wm-hero-vs-row) inherits from base styles. ─── */
.ct-hero .wm-hero-grid {
  grid-template-columns: 1fr;
}
@media (min-width: 900px) {
  .ct-hero .wm-hero-grid {
    grid-template-columns: 1fr;
  }
}
.ct-hero .wm-hero-copy {
  max-width: 56ch;
}


/* ─── 2. FORM SECTION — 2-col (aside LEFT + form RIGHT). Paper-2 bg (beigier
   than hero) so the form sits as a "main content block" beneath the light hero. ─── */
.ct-form-section {
  padding: clamp(4rem, 7vw, 6rem) 0 clamp(5rem, 9vw, 7.5rem);
  background: var(--paper-2);
}

.ct-form-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(2.5rem, 5vw, 4rem);
  align-items: start;
}
@media (min-width: 900px) {
  .ct-form-grid {
    grid-template-columns: minmax(0, 4fr) minmax(0, 6fr);
    gap: clamp(3rem, 6vw, 5rem);
  }
}

.ct-form-aside {
  display: flex;
  flex-direction: column;
  gap: 1.2rem;
}
.ct-form-title {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(2rem, 4.2vw, 2.8rem);
  line-height: 1.1;
  color: var(--deeper);
  margin: 0;
  letter-spacing: -0.005em;
}
.ct-form-title em {
  font-style: italic;
  color: var(--deep);
}
.ct-form-quote {
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(1.05rem, 1.55vw, 1.2rem);
  line-height: 1.45;
  color: var(--deep);
  border-left: 2px solid var(--copper-soft);
  padding-left: 1.1rem;
  margin: 0.5rem 0 0;
}
.ct-form-quote em {
  color: var(--copper);
  font-style: italic;
}
.ct-form-aside-body {
  font-family: var(--sans);
  font-size: 1rem;
  line-height: 1.65;
  color: var(--ink-soft);
  margin: 0;
}
.ct-form-aside-meta {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  margin: 0.5rem 0 0;
  padding-top: 1.2rem;
  border-top: 1px solid var(--line);
  font-family: var(--sans);
  font-size: 0.92rem;
  color: var(--ink-soft);
}
.ct-form-meta-label {
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--copper);
}

/* compact bel + LinkedIn routes onder Responstijd in de form-aside —
   sober mini-lijst zodat de focus op het formulier blijft. */
.ct-aside-routes {
  list-style: none;
  padding: 1.2rem 0 0;
  margin: 1rem 0 0;
  border-top: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}
.ct-aside-route {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  text-decoration: none;
  color: var(--ink-soft);
  transition: color 0.2s ease;
}
.ct-aside-route:hover {
  color: var(--deep);
}
.ct-aside-route-icon {
  flex: 0 0 32px;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--paper-2);
  border: 1px solid var(--copper-soft);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--copper);
  transition: background 0.2s ease, color 0.2s ease;
}
.ct-aside-route:hover .ct-aside-route-icon {
  background: var(--copper);
  color: var(--paper);
}
.ct-aside-route-body {
  display: flex;
  flex-direction: column;
  gap: 0.05rem;
  min-width: 0;
}
.ct-aside-route-label {
  font-family: var(--mono);
  font-size: 0.62rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--copper);
  line-height: 1;
}
.ct-aside-route strong {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 1.02rem;
  color: var(--deeper);
  letter-spacing: -0.005em;
  line-height: 1.2;
}

/* Stage (the form column) — lighter than the paper-2 section bg so the form
   card visually lifts off the page. */
.ct-form-stage {
  position: relative;
  padding: clamp(1.6rem, 3vw, 2.4rem) clamp(1.4rem, 2.5vw, 2.2rem) clamp(1.8rem, 3vw, 2.4rem);
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 6px;
  box-shadow: 0 18px 48px -28px rgba(18, 45, 54, 0.18);
}

.ct-form-progress {
  display: flex;
  gap: 0.4rem;
  margin: 0 0 1.4rem;
}
.ct-form-progress-bar {
  flex: 1;
  height: 3px;
  border-radius: 2px;
  background: var(--line);
  transition: background 0.4s var(--ease-out);
}
.ct-form-progress-bar.is-active {
  background: var(--copper);
}

/* Inline form — reuses .cta-form, .cta-step, .cta-options, .cta-field, .cta-actions styling. */
.ct-inline-form .cta-step { padding: 0; }
.ct-inline-form .cta-step h3 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(1.55rem, 2.6vw, 1.9rem);
  line-height: 1.15;
  color: var(--deeper);
  margin: 0.4rem 0 0.5rem;
}


/* ─── 4. AFTERMATH — im-ritme-steps on full-bleed coastal photo ─── */
.ct-aftermath {
  padding: clamp(4rem, 8vw, 6rem) 0;
  background: var(--paper-2);
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
.ct-aftermath-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.ct-aftermath-bg picture,
.ct-aftermath-bg img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: center 65%;
}
/* Tint: deep teal at top fading to richer at bottom, keeps cards readable */
.ct-aftermath-tint {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(18, 45, 54, 0.62) 0%, rgba(18, 45, 54, 0.48) 50%, rgba(31, 78, 92, 0.55) 100%);
}
.ct-aftermath-content {
  position: relative;
  z-index: 1;
}
.ct-aftermath-content .wm-section-head h2 {
  color: var(--paper);
}
.ct-aftermath-content .wm-section-head h2 em {
  color: var(--copper-soft);
}
.ct-aftermath-content .eyebrow-on-dark {
  color: var(--copper-soft);
}
.ct-aftermath-step {
  background: rgba(247, 245, 239, 0.92);
  border-top: 2px solid var(--copper-soft);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  box-shadow: 0 18px 40px -22px rgba(14, 34, 40, 0.45);
}
.ct-aftermath-step .im-ritme-step-num {
  color: var(--copper);
}
.ct-aftermath-step h3 {
  color: var(--deeper);
}
.ct-aftermath-step p {
  color: var(--ink-soft);
}


/* ─── 2. OTHER ROUTES — compact telefoon + LinkedIn row (no email, no big card) ─── */
.ct-other-routes {
  padding: clamp(2.5rem, 5vw, 4rem) 0 clamp(4rem, 8vw, 6rem);
  background: var(--paper);
  border-top: 1px solid var(--line);
}
.ct-other-routes-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.2rem;
  max-width: 820px;
  margin: 0 auto;
}
@media (min-width: 700px) {
  .ct-other-routes-row {
    grid-template-columns: 1fr 1fr;
    gap: clamp(1.4rem, 2.6vw, 2.2rem);
  }
}

.ct-other-route {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 1.1rem;
  align-items: start;
  padding: 1.3rem 1.4rem;
  text-decoration: none;
  color: inherit;
  background: var(--paper-2);
  border: 1px solid var(--line);
  border-radius: 4px;
  transition: border-color 0.4s var(--ease-out), background 0.4s var(--ease-out), transform 0.4s var(--ease-out);
}
.ct-other-route:hover {
  border-color: var(--copper-soft);
  background: var(--paper);
  transform: translateY(-2px);
}
.ct-other-route:hover .ct-other-route-icon {
  background: var(--copper);
  color: var(--paper);
  border-color: var(--copper);
}
.ct-other-route-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid var(--copper-soft);
  color: var(--copper);
  background: var(--paper);
  transition: background 0.4s var(--ease-out), color 0.4s var(--ease-out), border-color 0.4s var(--ease-out);
}
.ct-other-route-body {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  min-width: 0;
}
.ct-other-route-label {
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--copper);
}
.ct-other-route-value {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(1.1rem, 1.6vw, 1.25rem);
  line-height: 1.2;
  color: var(--deeper);
}
.ct-other-route-note {
  font-family: var(--sans);
  font-size: 0.88rem;
  line-height: 1.5;
  color: var(--ink-soft);
  margin-top: 0.25rem;
}


/* ─── 5. PRAKTISCH — 2-col prose (adres + werktijden), gecentreerd ─── */
.ct-praktisch {
  padding: clamp(4rem, 8vw, 6rem) 0;
  background: var(--paper);
}
.ct-praktisch-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(2.5rem, 5vw, 3.5rem);
  max-width: 820px;
  margin: 0 auto;
}
@media (min-width: 800px) {
  .ct-praktisch-grid {
    grid-template-columns: 1fr 1fr;
    gap: clamp(2.5rem, 4vw, 3.5rem);
  }
}

.ct-praktisch-col {
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
}
.ct-praktisch-label {
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--copper);
}
.ct-praktisch-heading {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(1.6rem, 2.8vw, 2.05rem);
  line-height: 1.12;
  color: var(--deeper);
  margin: 0;
  letter-spacing: -0.005em;
}
.ct-praktisch-heading em {
  font-style: italic;
  color: var(--deep);
}
.ct-praktisch-address {
  font-family: var(--serif);
  font-style: normal;
  font-size: 1.1rem;
  line-height: 1.55;
  color: var(--deep);
  margin: 0.4rem 0 0;
  padding-left: 0.95rem;
  border-left: 2px solid var(--copper-soft);
}
.ct-praktisch-col p {
  font-family: var(--sans);
  font-size: 0.98rem;
  line-height: 1.65;
  color: var(--ink-soft);
  margin: 0;
}


/* ─── 6. SIGNATURE — copper-soft divider + mini-portret + handwritten close ─── */
.ct-signature {
  padding: clamp(5rem, 9vw, 7.5rem) 0 clamp(6rem, 10vw, 8.5rem);
  background: var(--paper);
}
.ct-signature-inner {
  max-width: 56ch;
  margin: 0 auto;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.6rem;
}
.ct-signature-divider {
  display: block;
  width: clamp(80px, 12vw, 120px);
  height: 1px;
  background: linear-gradient(to right, transparent 0%, var(--copper-soft) 50%, transparent 100%);
}
.ct-signature-portret {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  overflow: hidden;
  margin: 0;
  border: 1px solid var(--copper-soft);
  background: linear-gradient(155deg, #2a5d6e 0%, var(--deep) 100%);
}
.ct-signature-portret img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: center center;
}
.ct-signature-body {
  font-family: var(--serif);
  font-size: clamp(1.2rem, 2vw, 1.5rem);
  line-height: 1.4;
  color: var(--deep);
  margin: 0;
  max-width: 42ch;
}
.ct-signature-body em {
  font-style: italic;
  color: var(--copper);
}
.ct-signature-name {
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(1.6rem, 2.8vw, 2.1rem);
  color: var(--copper);
  margin: 0;
  letter-spacing: 0.005em;
}


/* ─── Mobile fine-tuning ─── */
@media (max-width: 700px) {
  .ct-hero-portret { max-width: 360px; margin: 0 auto; }
  .ct-form-stage { padding: 1.4rem 1.2rem 1.6rem; }
  .ct-route-card { padding: 1.4rem; gap: 0.7rem; }
}


/* ============================================================
   BLOG POST PAGE  —  namespace .bp-*
   Editorial long-form layout with full-bleed hero, prose
   column + sticky meta-sidebar with reading-progress.
   Sanity-friendly: data fields live in the markup; CSS is
   purely presentational so any data source (markdown migration,
   Sanity CMS) can hydrate the same template.
   ============================================================ */

/* ── reading progress bar (page-level, fixed top of viewport) ── */
.bp-readbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: rgba(216, 181, 148, 0.18); /* copper-soft @ 18% */
  z-index: 60;
  pointer-events: none;
}
.bp-readbar-fill {
  display: block;
  height: 100%;
  width: 100%;
  background: linear-gradient(90deg, var(--copper) 0%, var(--copper-soft) 100%);
  transform-origin: left center;
  transform: scaleX(0);
  transition: transform 0.1s linear;
  will-change: transform;
}

/* ── hero (full-bleed image + overlay + editorial copy) ── */
.bp-hero {
  position: relative;
  padding: clamp(7rem, 12vw, 10rem) 0 clamp(3.5rem, 6vw, 5rem);
  min-height: clamp(520px, 68vw, 720px);
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  isolation: isolate;
  color: var(--paper);
}
.bp-hero > .container { width: 100%; }

.bp-hero-img {
  position: absolute;
  inset: 0;
  margin: 0;
  z-index: -2;
}
.bp-hero-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  display: block;
  /* slow ken-burns for life on the page */
  animation: bp-hero-pan 42s ease-in-out infinite alternate;
}
@keyframes bp-hero-pan {
  from { transform: scale(1.0) translate(0, 0); }
  to   { transform: scale(1.06) translate(-1.2%, 0.8%); }
}
@media (prefers-reduced-motion: reduce) {
  .bp-hero-img img { animation: none; }
}
.bp-hero-tint {
  position: absolute;
  inset: 0;
  z-index: -1;
  /* darken to the bottom so the title/lede read on any imagery */
  background:
    linear-gradient(180deg, rgba(18, 45, 54, 0.18) 0%, rgba(18, 45, 54, 0.34) 38%, rgba(18, 45, 54, 0.78) 100%),
    linear-gradient(0deg,   rgba(31, 78, 92, 0.22) 0%, rgba(31, 78, 92, 0.10) 60%);
}

.bp-hero-inner {
  position: relative;
  z-index: 1;
  max-width: 920px;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.bp-breadcrumb {
  display: flex;
  gap: 0.5rem;
  align-items: center;
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(247, 245, 239, 0.78);
}
.bp-breadcrumb a {
  color: inherit;
  text-decoration: none;
  transition: color 0.2s var(--ease-out);
}
.bp-breadcrumb a:hover { color: var(--copper-soft); }
.bp-breadcrumb span { opacity: 0.5; }

.bp-categories {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}
.bp-categories li a {
  display: inline-block;
  padding: 0.32rem 0.8rem 0.36rem;
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--paper);
  background: rgba(181, 130, 90, 0.85); /* copper @ 85% */
  border: 1px solid rgba(247, 245, 239, 0.16);
  border-radius: 999px;
  text-decoration: none;
  transition: background 0.2s var(--ease-out), transform 0.2s var(--ease-out);
}
.bp-categories li a:hover {
  background: var(--copper);
  transform: translateY(-1px);
}

.bp-title {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(2.5rem, 5.6vw, 4.4rem);
  line-height: 1.04;
  letter-spacing: -0.012em;
  margin: 0.4rem 0 0;
  color: var(--paper);
  text-wrap: balance;
}
.bp-title em {
  font-style: italic;
  color: var(--copper-soft);
}

.bp-lede {
  font-family: var(--serif);
  font-size: clamp(1.15rem, 1.9vw, 1.45rem);
  line-height: 1.45;
  margin: 0;
  max-width: 70ch;
  color: rgba(247, 245, 239, 0.92);
}
.bp-lede em { font-style: italic; }

.bp-meta {
  margin-top: 0.5rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
  font-family: var(--sans);
  font-size: 0.92rem;
  color: rgba(247, 245, 239, 0.88);
}
.bp-meta-dot { opacity: 0.45; }
.bp-meta-author {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
}
.bp-meta-avatar {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  object-fit: cover;
  object-position: center center;
  border: 1px solid rgba(247, 245, 239, 0.4);
  background: var(--paper);
}
.bp-meta-author strong { font-weight: 600; }


/* ── body grid (prose + sticky sidebar) ── */
.bp-body {
  padding: clamp(3rem, 6vw, 5rem) 0 clamp(4rem, 7vw, 6rem);
  background: var(--paper);
  position: relative;
}
.bp-body-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(2.5rem, 5vw, 4rem);
}
@media (min-width: 980px) {
  .bp-body-grid {
    grid-template-columns: minmax(0, 7fr) minmax(0, 3fr);
    gap: clamp(3rem, 5vw, 5rem);
    align-items: start;
  }
}

/* ── prose styling ── */
.bp-prose {
  max-width: 68ch;
  font-family: var(--sans);
  font-size: 1.06rem;
  line-height: 1.74;
  color: var(--ink);
}
/* reset all top-level children, then add generous paragraph rhythm.
   Both rules same specificity (0,0,1,0); cascade-order wins on `+ *`. */
.bp-prose > * { margin-top: 0; margin-bottom: 0; }
.bp-prose > * + * { margin-top: 1.9em; }
/* tighter rhythm around headings (they bring their own visual weight) */
.bp-prose h2 + p,
.bp-prose h3 + p { margin-top: 1.1em; }
.bp-prose strong { color: var(--deeper); font-weight: 600; }
.bp-prose em { font-style: italic; }
.bp-prose a {
  color: var(--deep);
  text-decoration: underline;
  text-decoration-color: rgba(181, 130, 90, 0.4);
  text-underline-offset: 4px;
  text-decoration-thickness: 1px;
  transition: text-decoration-color 0.2s var(--ease-out), color 0.2s var(--ease-out);
}
.bp-prose a:hover {
  color: var(--copper);
  text-decoration-color: var(--copper);
}

/* drop-cap on first paragraph (per /over-mij V's lesson: ::first-letter, never spans) */
.bp-first-para::first-letter {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  font-size: 4.2em;
  line-height: 0.86;
  float: left;
  margin: 0.08em 0.12em -0.04em 0;
  color: var(--copper);
}

/* H2 / H3 within prose (for posts that have structure — most archive posts don't) */
.bp-prose h2 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(1.7rem, 3vw, 2.15rem);
  line-height: 1.14;
  color: var(--deeper);
  margin-top: 2.4em;
  letter-spacing: -0.008em;
  scroll-margin-top: 5rem;
}
.bp-prose h3 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(1.35rem, 2.2vw, 1.65rem);
  line-height: 1.2;
  color: var(--deeper);
  margin-top: 1.8em;
  scroll-margin-top: 5rem;
}

/* blockquote inside prose (not the pullquote section) */
.bp-prose blockquote {
  margin: 1.5em 0;
  padding: 0.4em 0 0.4em 1.4em;
  border-left: 2px solid var(--copper-soft);
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.15em;
  line-height: 1.5;
  color: var(--ink-soft);
}

/* lists in prose */
.bp-prose ul, .bp-prose ol { padding-left: 1.4em; }
.bp-prose li + li { margin-top: 0.5em; }

/* figure (content image mid-flow) */
.bp-figure {
  margin: 2.2em 0;
}
.bp-figure img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 6px;
  box-shadow: 0 12px 32px -16px rgba(18, 45, 54, 0.22);
}
.bp-figure figcaption {
  margin-top: 0.7em;
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-soft);
  text-align: center;
}

/* signature closer ("— Ilone" in serif italic, matches homepage about-signoff)
   replaces the original handwritten image005 signature that lived at the
   bottom of most 2014-2017 posts. */
.bp-signature {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1.4em;
  margin-top: 2.4em;
}
.bp-signature-divider {
  display: block;
  width: clamp(60px, 9vw, 90px);
  height: 1px;
  background: linear-gradient(to right, var(--copper-soft) 0%, transparent 100%);
}
.bp-signature-name {
  font-family: var(--serif);
  font-style: normal;
  font-size: clamp(1.15rem, 1.7vw, 1.35rem);
  color: var(--ink-soft);
  line-height: 1;
  letter-spacing: 0.005em;
}
.bp-signature-name em {
  font-style: italic;
  color: var(--copper);
  font-size: 1.15em;
  margin-left: 0.05em;
}

/* internal-link aside (post → service-page cross-link for SEO) */
.bp-inline-link {
  margin-top: 2.4em;
  padding: 1.4em 1.6em 1.5em;
  background: var(--paper-2);
  border-left: 3px solid var(--copper-soft);
  border-radius: 4px;
}
.bp-inline-link-eyebrow {
  display: block;
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--copper);
  margin-bottom: 0.5em;
}
.bp-inline-link p {
  font-family: var(--serif);
  font-size: 1.1rem;
  line-height: 1.5;
  color: var(--deeper);
  margin: 0;
}


/* ── sticky sidebar ── */
.bp-sidebar {
  position: relative;
}
@media (min-width: 980px) {
  .bp-sidebar {
    position: sticky;
    top: 8.5rem; /* clears 100px fixed header + breathing gap */
    max-height: calc(100vh - 10rem);
    overflow-y: auto;
    scrollbar-width: thin;
  }
}

/* mobile: TOC + meta blocks add no value at the bottom of the article
   (everything's already been read). Keep only "Delen" — that one is
   still useful after the read. */
@media (max-width: 979px) {
  .bp-sidebar .bp-side-progress,
  .bp-sidebar .bp-side-toc,
  .bp-sidebar .bp-side-toc.has-toc { display: none; }
  /* the share block is the last .bp-side-block — hide all the others */
  .bp-sidebar .bp-side-block:not(:last-child) { display: none; }
  .bp-sidebar-card {
    text-align: center;
  }
  .bp-sidebar-card .bp-side-block:last-child {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
  }
}

.bp-sidebar-card {
  background: var(--paper-2);
  border: 1px solid rgba(181, 130, 90, 0.22);
  border-radius: 12px;
  padding: 1.6rem 1.7rem 1.7rem;
  box-shadow: 0 1px 0 rgba(247, 245, 239, 0.6) inset,
              0 18px 48px -28px rgba(18, 45, 54, 0.18);
}

/* mini progress inside card (mirrors page-top bar; same JS drives both) */
.bp-side-progress {
  height: 4px;
  background: rgba(181, 130, 90, 0.18);
  border-radius: 999px;
  overflow: hidden;
  margin: -0.2rem 0 1.4rem;
}
.bp-side-progress-fill {
  display: block;
  height: 100%;
  width: 100%;
  background: linear-gradient(90deg, var(--copper) 0%, var(--copper-soft) 100%);
  transform-origin: left center;
  transform: scaleX(0);
  transition: transform 0.1s linear;
}

/* TOC list — hidden by default; JS adds .has-toc when h2/h3 exist */
.bp-side-toc {
  display: none;
  margin-bottom: 1.4rem;
}
.bp-side-toc.has-toc { display: block; }
.bp-side-toc::before {
  content: "Inhoudsopgave";
  display: block;
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--copper);
  margin-bottom: 0.7rem;
}
.bp-side-toc ol {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  border-left: 1px solid rgba(181, 130, 90, 0.28);
}
.bp-side-toc li { padding-left: 0.9rem; position: relative; }
.bp-side-toc li::before {
  content: "";
  position: absolute;
  left: -1px;
  top: 0.55em;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: transparent;
  transform: translateX(-50%);
  transition: background 0.2s var(--ease-out);
}
.bp-side-toc a {
  font-family: var(--serif);
  font-size: 1rem;
  line-height: 1.32;
  color: var(--ink-soft);
  text-decoration: none;
  transition: color 0.2s var(--ease-out);
}
.bp-side-toc a:hover { color: var(--deeper); }
.bp-side-toc li.is-active a {
  color: var(--copper);
  font-weight: 500;
}
.bp-side-toc li.is-active::before { background: var(--copper); }
/* nested h3's under their h2 — visually indented */
.bp-side-toc li.bp-toc-h3 { padding-left: 1.9rem; font-size: 0.9rem; }
.bp-side-toc li.bp-toc-h3 a { font-size: 0.95rem; color: rgba(60, 79, 85, 0.78); }

/* meta blocks */
.bp-side-block { margin-top: 1.25rem; }
.bp-side-block:first-of-type { margin-top: 0; }
.bp-side-eyebrow {
  display: block;
  font-family: var(--mono);
  font-size: 0.66rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--copper);
  margin-bottom: 0.35rem;
}
.bp-side-value {
  font-family: var(--serif);
  font-size: 1.05rem;
  line-height: 1.3;
  color: var(--deeper);
}

.bp-side-pills {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}
.bp-side-pills a {
  display: inline-block;
  padding: 0.28rem 0.7rem 0.32rem;
  font-family: var(--sans);
  font-size: 0.78rem;
  font-weight: 500;
  color: var(--deeper);
  background: rgba(181, 130, 90, 0.14);
  border: 1px solid rgba(181, 130, 90, 0.32);
  border-radius: 999px;
  text-decoration: none;
  transition: background 0.2s var(--ease-out), color 0.2s var(--ease-out);
}
.bp-side-pills a:hover {
  background: var(--copper);
  color: var(--paper);
  border-color: var(--copper);
}

.bp-side-author {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  text-decoration: none;
  color: inherit;
  transition: transform 0.2s var(--ease-out);
}
.bp-side-author:hover { transform: translateX(2px); }
.bp-side-author img {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  object-fit: cover;
  object-position: center 30%;
  border: 1px solid rgba(181, 130, 90, 0.32);
  flex-shrink: 0;
}
.bp-side-author strong {
  display: block;
  font-family: var(--serif);
  font-size: 1.05rem;
  color: var(--deeper);
  font-weight: 400;
  line-height: 1.1;
}
.bp-side-author small {
  display: block;
  font-family: var(--sans);
  font-size: 0.78rem;
  color: var(--ink-soft);
  margin-top: 0.15rem;
}

.bp-share {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}
.bp-share a,
.bp-share button {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.5rem 0.8rem;
  font-family: var(--sans);
  font-size: 0.88rem;
  color: var(--deeper);
  background: var(--paper);
  border: 1px solid rgba(181, 130, 90, 0.22);
  border-radius: 6px;
  text-decoration: none;
  cursor: pointer;
  transition: background 0.2s var(--ease-out), color 0.2s var(--ease-out), border-color 0.2s var(--ease-out);
}
.bp-share a:hover,
.bp-share button:hover {
  background: var(--copper);
  color: var(--paper);
  border-color: var(--copper);
}
.bp-share svg { flex-shrink: 0; }
.bp-share-copy.is-copied {
  background: var(--deep);
  color: var(--paper);
  border-color: var(--deep);
}


/* ── pullquote section ── */
.bp-pullquote {
  padding: clamp(4rem, 7vw, 6rem) 0;
  background: var(--paper-2);
  border-top: 1px solid rgba(181, 130, 90, 0.16);
  border-bottom: 1px solid rgba(181, 130, 90, 0.16);
}
.bp-pullquote blockquote {
  margin: 0 auto;
  max-width: 840px;
  text-align: center;
  position: relative;
}
.bp-pullquote blockquote::before,
.bp-pullquote blockquote::after {
  content: "";
  display: block;
  width: 80px;
  height: 1px;
  margin: 0 auto 2rem;
  background: linear-gradient(90deg, transparent 0%, var(--copper-soft) 50%, transparent 100%);
}
.bp-pullquote blockquote::after {
  margin: 2rem auto 0;
}
.bp-pullquote blockquote p {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(1.55rem, 3vw, 2.15rem);
  line-height: 1.32;
  color: var(--deeper);
  margin: 0;
  text-wrap: balance;
}
.bp-pullquote cite {
  display: block;
  margin-top: 1.4rem;
  font-style: normal;
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--copper);
}


/* ── related posts ── */
.bp-related {
  padding: clamp(4rem, 7vw, 6rem) 0;
  background: var(--paper);
}
.bp-related-head {
  text-align: center;
  margin-bottom: clamp(2.5rem, 4vw, 3.5rem);
}
.bp-related-head .eyebrow {
  display: block;
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--copper);
  margin-bottom: 0.8rem;
}
.bp-related-head h2 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(1.7rem, 3vw, 2.4rem);
  line-height: 1.14;
  color: var(--deeper);
  margin: 0;
  letter-spacing: -0.008em;
  text-wrap: balance;
}

.bp-related-grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(1.5rem, 3vw, 2.5rem);
}
@media (min-width: 720px) {
  .bp-related-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.bp-related-card {
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
  text-decoration: none;
  color: inherit;
  background: var(--paper-2);
  border: 1px solid rgba(181, 130, 90, 0.18);
  border-radius: 10px;
  overflow: hidden;
  transition: transform 0.3s var(--ease-out), box-shadow 0.3s var(--ease-out), border-color 0.3s var(--ease-out);
  height: 100%;
  padding: 0 0 1.4rem;
}
.bp-related-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 22px 48px -28px rgba(18, 45, 54, 0.28);
  border-color: rgba(181, 130, 90, 0.45);
}
.bp-related-img {
  margin: 0;
  aspect-ratio: 12 / 7;
  overflow: hidden;
  background: var(--paper);
}
.bp-related-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.6s var(--ease-out);
}
.bp-related-card:hover .bp-related-img img { transform: scale(1.04); }
.bp-related-meta {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 1.2rem 1.4rem 0;
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.bp-related-meta time { color: var(--ink-soft); }
.bp-related-cat { color: var(--copper); }
.bp-related-card h3 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(1.2rem, 1.8vw, 1.4rem);
  line-height: 1.18;
  color: var(--deeper);
  margin: 0;
  padding: 0 1.4rem;
  letter-spacing: -0.005em;
  text-wrap: balance;
}
.bp-related-card p {
  font-family: var(--sans);
  font-size: 0.92rem;
  line-height: 1.55;
  color: var(--ink-soft);
  margin: 0;
  padding: 0 1.4rem;
}
.bp-related-cta {
  display: inline-block;
  margin: 0.4rem 1.4rem 0;
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--copper);
  align-self: flex-start;
}


/* ── light CTA at bottom of post ── */
.bp-cta-light {
  padding: clamp(3.5rem, 6vw, 5rem) 0;
  background: var(--paper-2);
  border-top: 1px solid rgba(181, 130, 90, 0.14);
}
.bp-cta-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.4rem;
  text-align: center;
  max-width: 720px;
  margin: 0 auto;
}
@media (min-width: 720px) {
  .bp-cta-inner {
    flex-direction: row;
    justify-content: space-between;
    text-align: left;
  }
}
.bp-cta-copy {
  font-family: var(--serif);
  font-size: clamp(1.15rem, 2vw, 1.4rem);
  line-height: 1.42;
  color: var(--deeper);
  margin: 0;
  text-wrap: balance;
}
.bp-cta-copy em {
  font-style: italic;
  color: var(--copper);
}


/* ── responsive tweaks ── */
@media (max-width: 980px) {
  .bp-hero { min-height: clamp(440px, 78vw, 560px); }
  .bp-hero-inner { gap: 1rem; }
  .bp-sidebar-card { padding: 1.3rem 1.4rem; }
}
@media (max-width: 640px) {
  .bp-hero { padding-top: clamp(6rem, 14vw, 8rem); padding-bottom: clamp(2.5rem, 6vw, 3.5rem); }
  .bp-title { font-size: clamp(2rem, 7vw, 2.6rem); }
  .bp-lede { font-size: 1.05rem; }
  .bp-meta { font-size: 0.85rem; }
  .bp-first-para::first-letter { font-size: 3.4em; }
  .bp-pullquote blockquote p { font-size: 1.35rem; }
  .bp-share { flex-direction: row; flex-wrap: wrap; }
  .bp-share a, .bp-share button { flex: 1 1 auto; justify-content: center; }
}


/* ============================================================
   BLOG INDEX PAGE  —  namespace .bi-*
   Editorial mini-hero + filter pills + featured row + archive grid.
   ============================================================ */

/* ── hero (text-only, paper bg) ── */
.bi-hero {
  padding: clamp(7rem, 11vw, 9.5rem) 0 clamp(3.5rem, 6vw, 5rem);
  background: var(--paper);
  text-align: center;
}
.bi-hero > .container {
  max-width: 820px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.1rem;
}
.bi-hero .eyebrow {
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--copper);
}
.bi-hero-title {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(2.6rem, 5.5vw, 4.2rem);
  line-height: 1.04;
  letter-spacing: -0.012em;
  color: var(--deeper);
  margin: 0;
  text-wrap: balance;
}
.bi-hero-sub {
  font-family: var(--serif);
  font-size: clamp(1.15rem, 1.9vw, 1.4rem);
  line-height: 1.45;
  color: var(--ink-soft);
  margin: 0;
  max-width: 56ch;
}
.bi-hero-sub em { font-style: italic; }
.bi-hero-meta {
  font-family: var(--sans);
  font-size: 0.92rem;
  color: var(--ink-soft);
  margin: 0;
}
.bi-hero-meta strong { color: var(--deeper); font-weight: 500; }


/* ── filter bar (paper-2 strip) ── */
.bi-filter {
  padding: clamp(1.6rem, 2.6vw, 2rem) 0;
  background: var(--paper-2);
  border-top: 1px solid rgba(181, 130, 90, 0.16);
  border-bottom: 1px solid rgba(181, 130, 90, 0.16);
  position: sticky;
  top: 76px;  /* under fixed header */
  z-index: 30;
  backdrop-filter: saturate(120%);
}
.bi-filter-row {
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
}
@media (min-width: 720px) {
  .bi-filter-row { flex-direction: row; align-items: center; gap: 1.2rem; }
}
.bi-filter-label {
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--copper);
  flex-shrink: 0;
}
.bi-filter-pills {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}
.bi-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.5rem 1rem 0.55rem;
  font-family: var(--sans);
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--deeper);
  background: var(--paper);
  border: 1px solid rgba(181, 130, 90, 0.28);
  border-radius: 999px;
  cursor: pointer;
  transition: all 0.2s var(--ease-out);
}
.bi-pill:hover {
  border-color: var(--copper);
  color: var(--copper);
}
.bi-pill.is-active {
  background: var(--deeper);
  color: var(--paper);
  border-color: var(--deeper);
}
.bi-pill.is-active .bi-pill-count {
  background: rgba(247, 245, 239, 0.18);
  color: var(--paper);
}
.bi-pill-count {
  display: inline-block;
  min-width: 1.6em;
  padding: 0.1em 0.4em;
  font-family: var(--mono);
  font-size: 0.7em;
  text-align: center;
  background: rgba(181, 130, 90, 0.18);
  color: var(--copper);
  border-radius: 999px;
}


/* ── featured (3 newest, large cards) ── */
.bi-featured {
  padding: clamp(3.5rem, 5vw, 5rem) 0 clamp(2rem, 3vw, 3rem);
  background: var(--paper);
}
.bi-section-head {
  margin-bottom: clamp(2rem, 3vw, 2.6rem);
}
.bi-section-head .eyebrow {
  display: block;
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--copper);
}

.bi-featured-grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(1.5rem, 3vw, 2.5rem);
}
@media (min-width: 720px) {
  .bi-featured-grid { grid-template-columns: 1.4fr 1fr 1fr; }
}

.bi-featured-card {
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
  text-decoration: none;
  color: inherit;
  background: var(--paper-2);
  border: 1px solid rgba(181, 130, 90, 0.18);
  border-radius: 10px;
  overflow: hidden;
  transition: transform 0.3s var(--ease-out), box-shadow 0.3s var(--ease-out), border-color 0.3s var(--ease-out);
  height: 100%;
  padding: 0 0 1.4rem;
}
.bi-featured-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 22px 48px -28px rgba(18, 45, 54, 0.28);
  border-color: rgba(181, 130, 90, 0.45);
}
.bi-featured-img {
  margin: 0;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: var(--paper);
}
.bi-featured-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.6s var(--ease-out);
}
.bi-featured-card:hover .bi-featured-img img { transform: scale(1.04); }
.bi-featured-meta {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 1.2rem 1.4rem 0;
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.bi-featured-cat { color: var(--copper); }
.bi-featured-card h3 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(1.35rem, 2vw, 1.7rem);
  line-height: 1.16;
  color: var(--deeper);
  margin: 0;
  padding: 0 1.4rem;
  letter-spacing: -0.005em;
  text-wrap: balance;
}
.bi-featured-card p {
  font-family: var(--sans);
  font-size: 0.96rem;
  line-height: 1.55;
  color: var(--ink-soft);
  margin: 0;
  padding: 0 1.4rem;
}
.bi-featured-cta {
  display: inline-block;
  margin: 0.4rem 1.4rem 0;
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--copper);
  align-self: flex-start;
}


/* ── archive grid (rest, smaller cards) ── */
.bi-archive {
  padding: clamp(2.5rem, 4vw, 4rem) 0 clamp(4rem, 6vw, 6rem);
  background: var(--paper);
}
.bi-archive-grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(1.2rem, 2.5vw, 2rem);
}
@media (min-width: 580px) {
  .bi-archive-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 900px) {
  .bi-archive-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.bi-archive-card {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  text-decoration: none;
  color: inherit;
  background: var(--paper-2);
  border: 1px solid rgba(181, 130, 90, 0.18);
  border-radius: 8px;
  overflow: hidden;
  transition: transform 0.3s var(--ease-out), box-shadow 0.3s var(--ease-out), border-color 0.3s var(--ease-out);
  height: 100%;
  padding: 0 0 1.2rem;
}
.bi-archive-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 16px 36px -22px rgba(18, 45, 54, 0.25);
  border-color: rgba(181, 130, 90, 0.4);
}
.bi-archive-img {
  margin: 0;
  aspect-ratio: 12 / 7;
  overflow: hidden;
  background: var(--paper);
}
.bi-archive-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.6s var(--ease-out);
}
.bi-archive-card:hover .bi-archive-img img { transform: scale(1.03); }
.bi-archive-meta {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 1rem 1.2rem 0;
  font-family: var(--mono);
  font-size: 0.66rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.bi-archive-cat { color: var(--copper); }
.bi-archive-card h4 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(1.1rem, 1.6vw, 1.3rem);
  line-height: 1.18;
  color: var(--deeper);
  margin: 0;
  padding: 0 1.2rem;
  letter-spacing: -0.005em;
  text-wrap: balance;
}
.bi-archive-card p {
  font-family: var(--sans);
  font-size: 0.88rem;
  line-height: 1.5;
  color: var(--ink-soft);
  margin: 0;
  padding: 0 1.2rem;
}
.bi-archive-cta {
  display: inline-block;
  margin: 0.3rem 1.2rem 0;
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--copper);
  align-self: flex-start;
}


/* ── empty state ── */
.bi-empty {
  text-align: center;
  padding: clamp(3rem, 5vw, 4.5rem) 0;
}
.bi-empty p {
  font-family: var(--serif);
  font-size: clamp(1.3rem, 2.2vw, 1.6rem);
  color: var(--ink-soft);
  margin: 0 0 1.4rem;
  font-style: italic;
}


/* ── filter transitions ── */
.bi-featured-grid li,
.bi-archive-grid li {
  transition: opacity 0.3s var(--ease-out), transform 0.3s var(--ease-out);
}
.bi-featured-grid li[hidden],
.bi-archive-grid li[hidden] {
  display: none;
}

/* ============================================================
   REVIEWS PAGE — /reviews
   8 named testimonial cards with portrait, role, opdracht-context
   + full quote. Single column on mobile, single-column wider on
   desktop (we want each review readable, not crammed).
   ============================================================ */
.rv-hero {
  background: var(--paper);
}

.rv-section {
  background: var(--paper-2);
  padding: clamp(4rem, 8vw, 8rem) 0 clamp(5rem, 10vw, 10rem);
}

.rv-list {
  list-style: none;
  padding: 0;
  margin: 0 auto;
  max-width: 820px;
  display: flex;
  flex-direction: column;
  gap: clamp(2rem, 4vw, 3.2rem);
}

.rv-card {
  background: var(--paper);
  border-radius: 12px;
  border-top: 3px solid var(--copper-soft);
  padding: clamp(2rem, 3.5vw, 2.8rem) clamp(1.8rem, 3.5vw, 2.8rem) clamp(2.2rem, 4vw, 3rem);
  box-shadow: 0 1px 2px rgba(14, 34, 40, 0.04), 0 10px 30px rgba(14, 34, 40, 0.06);
}

.rv-card-head {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 1.4rem;
  align-items: center;
  margin-bottom: 1.6rem;
  padding-bottom: 1.6rem;
  border-bottom: 1px solid rgba(216, 181, 148, 0.4);  /* copper-soft 40% */
}

.rv-card-portrait {
  display: block;
  width: 88px;
  height: 88px;
  border-radius: 50%;
  overflow: hidden;
  background: var(--mist, #d8dee0);
  flex: 0 0 auto;
}
.rv-card-portrait img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 22%;  /* bias toward face — most portraits have face in upper third */
  display: block;
}

/* placeholder initials block — for testimonials whose photo is still pending */
.rv-card-portrait--placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--copper-soft);
  color: var(--deeper);
  font-family: var(--mono);
  font-size: 1.3rem;
  font-weight: 500;
  letter-spacing: 0.04em;
}

.rv-card-meta {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  min-width: 0;
}

.rv-card-tag {
  font-family: var(--mono);
  font-size: 0.66rem;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--copper);
  margin-bottom: 0.35rem;
  display: inline-block;
}

.rv-card-name {
  font-family: "Instrument Serif", "Iowan Old Style", "Apple Garamond", Garamond, serif;
  font-weight: 400;
  font-size: clamp(1.35rem, 2.4vw, 1.7rem);
  line-height: 1.15;
  color: var(--deeper);
  margin: 0;
}

.rv-card-role {
  margin: 0.15rem 0 0;
  font-size: 0.92rem;
  color: var(--ink);
  line-height: 1.4;
}

.rv-card-context {
  margin: 0.35rem 0 0;
  font-size: 0.82rem;
  color: var(--ink-soft);
  font-style: italic;
  line-height: 1.4;
}

.rv-card-quote {
  margin: 0;
  padding: 0;
  border: 0;
  font-family: "Instrument Serif", "Iowan Old Style", "Apple Garamond", Garamond, serif;
  font-size: clamp(1.04rem, 1.7vw, 1.18rem);
  line-height: 1.6;
  color: var(--ink);
  font-style: italic;
  position: relative;
}
.rv-card-quote p + p {
  margin-top: 0.9rem;
}
.rv-card-quote p {
  margin: 0;
}
.rv-card-quote em {
  color: var(--copper);
  font-style: italic;
}

/* mobile: portrait stays inline but a touch smaller; allow tighter padding */
@media (max-width: 600px) {
  .rv-card {
    padding: 1.6rem 1.4rem 2rem;
  }
  .rv-card-head {
    grid-template-columns: 64px 1fr;
    gap: 1rem;
    margin-bottom: 1.2rem;
    padding-bottom: 1.2rem;
  }
  .rv-card-portrait {
    width: 64px;
    height: 64px;
  }
  .rv-card-name {
    font-size: 1.25rem;
  }
  .rv-card-role {
    font-size: 0.86rem;
  }
}

/* reviews-page bottom CTA: identical to the standard dark .wm-cta on other pages.
   Just style the eyebrow so it sits well on the dark mesh background. */
.rv-cta-section .eyebrow { color: var(--copper-soft); }

/* ============================================================
   TESTIMONIALS HOMEPAGE — two-row marquee (left + right)
   Full-bleed: breaks out of the container so the rows run
   off-screen left and right (carousel-style).
   ============================================================ */
.testimonials-rows {
  margin: clamp(2.4rem, 5vw, 4rem) 0 0;
  overflow: hidden;
  position: relative;
  /* full-bleed escape from .container */
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 4%, #000 96%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0%, #000 4%, #000 96%, transparent 100%);
}

/* avatar size bump: photos slightly bigger than the 30px original */
.attrib-avatar {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  overflow: hidden;
  background: var(--stone);
  display: block;
  flex: 0 0 auto;
}
.attrib-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 22%;
  display: block;
}
.attrib-avatar--initials {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--deep);
  font-family: var(--mono);
  font-size: 1rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  background: var(--copper-soft);
}

.th-cta-line {
  text-align: center;
  margin: clamp(2.6rem, 5vw, 4rem) 0 0;
}

.th-cta-link {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--mono);
  font-size: 0.78rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--copper);
  text-decoration: none;
  padding-bottom: 4px;
  border-bottom: 1px solid var(--copper-soft);
  transition: color 0.2s ease, border-color 0.2s ease, gap 0.2s ease;
}
.th-cta-link:hover {
  color: var(--deep);
  border-bottom-color: var(--deep);
  gap: 0.7rem;
}
.th-cta-link .arrow {
  transition: transform 0.2s ease;
}
.th-cta-link:hover .arrow {
  transform: translateX(2px);
}

/* ─── werkmethode pijlers: emphasize the first pijler ("Vertragen") with a touch more weight ─── */
.wm-pijler-step.is-emphasis h3 {
  font-size: 1.45rem;
  letter-spacing: -0.02em;
}
.wm-pijler-step.is-emphasis .wm-pijler-dot {
  transform: scale(1.15);
}

/* extend case-panel-quote when used as a blockquote element directly
   (with inline text + nested <footer> for the attribution).
   Existing rules target .im-case-panel-quote { div wrapper, padding, border }
   and .im-case-panel-quote p {} — but our new markup puts text directly in
   the blockquote. */
blockquote.im-case-panel-quote {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(1.1rem, 1.7vw, 1.25rem);
  line-height: 1.45;
  color: var(--deeper);
  font-style: italic;
  margin: 1.4rem 0;
}
blockquote.im-case-panel-quote footer {
  margin-top: 1rem;
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-soft);
  font-style: normal;
}

/* contact handtekening + visually-hidden helper */
.ct-signature-handtekening {
  display: block;
  width: clamp(180px, 28vw, 260px);
  height: auto;
  margin: 0.4rem auto 0;
  opacity: 0.92;
}
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* handtekening op homepage about-teaser (cream bg, normal blue ink) */
.about-signoff-handtekening {
  display: block;
  width: clamp(140px, 22vw, 200px);
  height: auto;
  margin: 0.4rem 0 0.4rem;
  opacity: 0.92;
}


/* handtekening op blog post (cream bg) */
.bp-signature-handtekening {
  display: block;
  width: clamp(140px, 22vw, 200px);
  height: auto;
  margin: 0.6rem 0 0;
  opacity: 0.9;
}