/* ==ECC-CLONE:BEGIN meta:meta== */
/*
 * Source:        https://people-work-webflow-108-template.webflow.io/home-b
 * Captured:      2026-08-26
 * Generator:     ecc-clone/1 -- clone-build, foundation phase
 * Authorization: Dit is een publiek toegankelijke Webflow-showcase-template; ik reproduceer de
 *                markup/opmaak als referentiebasis voor een eigen/klantproject (JosPronk), niet
 *                om als eigen origineel werk te claimen of te herpubliceren als kopie van
 *                Webflow. (recorded verbatim in _clone/manifest.json#authorization)
 *
 * Colour space is preserved verbatim throughout this stylesheet: the source publishes every
 * design token in hex or rgb(a), so the `tokens` block below stays hex/rgb(a) too, deliberately
 * not converted to oklch. This is a recorded, deliberate exception to the oklch-preferred house
 * style in rules/web/coding-style.md -- see manifest.notes[] -- because converting would
 * introduce rounding error in the one dimension a clone is judged on.
 */
/* ==ECC-CLONE:END meta:meta== */

/* ==ECC-CLONE:BEGIN tokens:tokens== */
/*
 * Design tokens -- mirrored verbatim from the source's own :root custom properties.
 * Names and values (including colour space) are reproduced exactly as captured in
 * _clone/extraction/home-b.global.json#rootCustomProperties. See manifest.notes[] for
 * the recorded colour-space-preservation exception to rules/web/coding-style.md.
 */
:root {
  --_📐-spacing---gap--gap-11: 120px;
  --_⭕-global-radius---general--radius-large: 24px;
  --_🖥️-grid---grid--global-padding: 32px;
  --_🖥️-grid---columns--column-7: calc(((min(1600px, 100vw)  - 11 * 16px) / 12) * 7 + 6 * 16px);
  --_⏺️-button-input---button--button-rectangle-radius: 20px;
  --_⏺️-button-input---input--input-radius: 16px;
  --_⭕-global-radius---general--radius-full: 200px;
  --_⚡️-icons---icon-small: 16px;
  --_🅰-typography---utility--caption--caption-line-height: 12px;
  --_🖍️-colors---accent--accent-blue: #4f6e80;
  --_🅰-typography---utility--label--label-line-height: 16px;
  --_🅰-typography---utility--caption--caption-letter-spacing: 1.25px;
  --_🖍️-colors---accent--accent-pink: #ebc9c9;
  --_🖥️-grid---columns--column-2: calc(((min(1600px, 100vw)  - 11 * 16px) / 12) * 2 + 1 * 16px);
  --_🖥️-grid---grid--gutter-default: 16px;
  --_🖥️-grid---grid--max-width: 1600px;
  --_🖥️-grid---columns--column-12: min(1600px, 100vw);
  --_📐-spacing---gap--gap-00: 0px;
  --_🅰-typography---text--large--large-letter-spacing: 0px;
  --_📐-spacing---gap--gap-06: 24px;
  --_🅰-typography---text--medium--medium-line-height: 24px;
  --_🅰-typography---text--medium--medium-size: 16px;
  --_🅰-typography---heading--h1--h1-size: 68px;
  --_🅰-typography---text--large--large-line-height: 28px;
  --_⚡️-icons---icon-medium: 20px;
  --_🖥️-grid---columns--column-1: calc(((min(1600px, 100vw)  - 11 * 16px) / 12));
  --_🖥️-grid---columns--column-11: calc(((min(1600px, 100vw)  - 11 * 16px) / 12) * 11 + 10 * 16px);
  --_🅰-typography---heading--h6--h6-line-height: 28px;
  --_🅰-typography---font-family--utility: "BDO Grotesk", Arial, sans-serif;
  --_⏺️-button-input---input--input-height: 56px;
  --_🖥️-grid---columns--column-8: calc(((min(1600px, 100vw)  - 11 * 16px) / 12) * 8 + 7 * 16px);
  --_🅰-typography---utility--label--label-letter-spacing: 1.25px;
  --_🖥️-grid---columns--column-9: calc(((min(1600px, 100vw)  - 11 * 16px) / 12) * 9 + 8 * 16px);
  --_🅰-typography---text--large--large-size: 18px;
  --_🖍️-colors---input--input-placeholder: #1c2623a3;
  --_🅰-typography---text--small--small-letter-spacing: 0px;
  --_🖍️-colors---ink--ink-2: #1c2623a3;
  --_🖍️-colors---button--primary--default--button-primary-ink: #1c2623;
  --_🖍️-colors---button--secondary--hover--button-secondary-hover-fill: #1c2623;
  --_🅰-typography---heading--h2--h2-line-height: 56px;
  --_📐-spacing---gap--gap-03: 12px;
  --_📐-spacing---gap--gap-04: 16px;
  --_🅰-typography---font-weight--bold-weight: 600;
  --_⚡️-icons---icon-stroke: 2px;
  --_📐-spacing---section-padding--section-extra-large: 200px;
  --_⚡️-icons---icon-large: 28px;
  --_🖍️-colors---ink--ink-4: #1c262314;
  --_🖍️-colors---overlay--overlay-3: #eceae1a3;
  --_🅰-typography---font-family--heading-alternative: "BDO Grotesk", Arial, sans-serif;
  --_🅰-typography---heading--h4--h4-line-height: 36px;
  --_📐-spacing---gap--gap-08: 48px;
  --_🖍️-colors---overlay--overlay-2: #eceae152;
  --_🖍️-colors---input--input-fill: #dedcd6;
  --_🖍️-colors---surface--surface-1: #eceae1;
  --_📐-spacing---gap--gap-07: 32px;
  --_🖥️-grid---columns--column-10: calc(((min(1600px, 100vw)  - 11 * 16px) / 12) * 10 + 9 * 16px);
  --_🅰-typography---heading--h4--h4-letter-spacing: -.5px;
  --_🖍️-colors---accent--accent-yellow: #e3f21a;
  --_📐-spacing---gap--gap-01: 4px;
  --_🅰-typography---utility--caption--caption-size: 12px;
  --_📐-spacing---section-padding--section-medium: 120px;
  --_🖥️-grid---columns--column-6: calc(((min(1600px, 100vw)  - 11 * 16px) / 12) * 6 + 5 * 16px);
  --_🖍️-colors---input--input-ink: #1c2623;
  --_⏺️-button-input---button--button-circle-radius: 16px;
  --_🅰-typography---text--medium--medium-letter-spacing: 0px;
  --_🅰-typography---heading--h6--h6-size: 20px;
  --_📐-spacing---section-padding--section-large: 160px;
  --_📐-spacing---gap--gap-02: 8px;
  --_🖍️-colors---button--primary--default--button-primary-fill: #f3f5ee;
  --_📐-spacing---gap--gap-05: 20px;
  --_⭕-global-radius---general--radius-small: 8px;
  --_🅰-typography---utility--label--label-size: 14px;
  --_⏺️-button-input---button--button-large-height: 56px;
  --_🅰-typography---heading--h3--h3-size: 40px;
  --_🖥️-grid---grid--frame-padding: 8px;
  --_🖍️-colors---surface--surface-2: #f3f5ee;
  --_⭕-global-radius---general--radius-medium: 16px;
  --_🅰-typography---heading--h5--h5-size: 28px;
  --_📐-spacing---section-padding--section-small: 80px;
  --_📐-spacing---gap--gap-09: 64px;
  --_🖍️-colors---button--primary--hover--button-primary-hover-ink: #eceae1;
  --_📐-spacing---gap--gap-10: 80px;
  --_⏺️-button-input---button--button-small-height: 40px;
  --_🅰-typography---heading--h3--h3-line-height: 44px;
  --_🅰-typography---heading--h2--h2-letter-spacing: -1px;
  --_🅰-typography---font-weight--default-weight: 400;
  --_🅰-typography---heading--h6--h6-letter-spacing: -.25px;
  --_🅰-typography---heading--h1--h1-letter-spacing: -1px;
  --_📐-spacing---section-padding--section-extra-small: 32px;
  --_🖍️-colors---ink--ink-1: #1c2623;
  --_🅰-typography---font-family--heading: "Libre Caslon Condensed", "Times New Roman", sans-serif;
  --_🖥️-grid---grid--gutter-tight: 8px;
  --_🖍️-colors---button--secondary--default--button-secondary-fill: #1c262314;
  --_🖍️-colors---overlay--overlay-1: #eceae100;
  --_🅰-typography---heading--h5--h5-letter-spacing: -.25px;
  --_🖍️-colors---input--input-label: #1c2623a3;
  --_🖥️-grid---columns--column-4: calc(((min(1600px, 100vw)  - 11 * 16px) / 12) * 4 + 3 * 16px);
  --_🅰-typography---heading--h3--h3-letter-spacing: -1px;
  --_🖍️-colors---ink--ink-3: #1c262352;
  --_🖍️-colors---input--input-border: transparent;
  --_🖥️-grid---columns--column-5: calc(((min(1600px, 100vw)  - 11 * 16px) / 12) * 5 + 4 * 16px);
  --_🅰-typography---text--small--small-size: 14px;
  --_🅰-typography---font-family--body: "BDO Grotesk", Arial, sans-serif;
  --_🅰-typography---heading--h5--h5-line-height: 32px;
  --_🖍️-colors---button--secondary--hover--button-secondary-hover-ink: #eceae1;
  --_🖍️-colors---button--primary--hover--button-primary-hover-fill: #1c2623;
  --_🖍️-colors---surface--surface-3: #dedcd6;
  --_🅰-typography---text--small--small-line-height: 20px;
  --_🖍️-colors---accent--accent-blue-wash: #bccad1;
  --_🅰-typography---heading--h2--h2-size: 56px;
  --_🅰-typography---heading--h4--h4-size: 32px;
  --_🅰-typography---heading--h1--h1-line-height: 72px;
  --_📐-spacing---gap--gap-12: 160px;
  --_🖥️-grid---columns--column-3: calc(((min(1600px, 100vw)  - 11 * 16px) / 12) * 3 + 2 * 16px);
  --_🖍️-colors---button--secondary--default--button-secondary-ink: #1c2623;

  /* -- Clone-introduced tokens: no source equivalent exists for these roles -- */
  --cl-z-base: 0;
  --cl-z-sticky: 10;
  --cl-z-overlay: 100;
  --cl-duration-fast: 150ms;
  --cl-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
}
/* ==ECC-CLONE:END tokens:tokens== */

/* ==ECC-CLONE:BEGIN fonts:fonts== */
/*
 * Real self-hosted faces, captured from the source page's own CSSFontFaceRules and downloaded
 * into assets/fonts/. Variable TTFs, so a single file covers the whole declared weight range.
 * Seaweed Script is deliberately omitted -- it is loaded by the source but unused on this page.
 */
@font-face {
  font-family: "BDO Grotesk";
  src: url("assets/fonts/bdo-grotesk-300-900-normal-db3ab4dd.ttf") format("truetype");
  font-weight: 300 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Libre Caslon Condensed";
  src: url("assets/fonts/libre-caslon-condensed-400-700-normal-c9f91753.ttf") format("truetype");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Libre Caslon Condensed";
  src: url("assets/fonts/libre-caslon-condensed-400-700-italic-97d1cbf2.ttf") format("truetype");
  font-weight: 400 700;
  font-style: italic;
  font-display: swap;
}
/* ==ECC-CLONE:END fonts:fonts== */

/* ==ECC-CLONE:BEGIN reset:reset== */
/*
 * Global reset and base element styling. This is the only other global scope besides `tokens`.
 *
 * Base body values below are the resolved literal values from the probe's `body` object in
 * home-b.global.json, not CSS custom-property references into tokens.css. That is a deliberate
 * exception, recorded here and in manifest.notes[]: gate G6 (token closure) matches a custom
 * property being consumed with an ASCII-only pattern that stops at the first non-ASCII
 * character, so consuming one of the source-mirrored emoji-prefixed tokens -- for example the
 * ink-1 colour token, which starts with two dashes, an underscore, then a pencil emoji -- is
 * misread as the bare two-dash-underscore fragment, which is never "declared", and G6 always
 * fails it as an unresolved custom property. Every foundation and section rule must therefore
 * read the literal value from tokens.css and write it out, rather than consuming the token by
 * reference.
 */

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

html,
body,
h1, h2, h3, h4, h5, h6,
p, figure, blockquote, dl, dd {
  margin: 0;
}

html {
  /* De bron gebruikt Lenis (lenis@1.2.3) voor smooth scrolling in JS; die kloon is hier niet
     overgenomen. De navigatie werkt met #-ankers binnen deze pagina, dus we zetten native
     smooth scrolling aan. Het prefers-reduced-motion-blok hieronder zet dit terug naar auto. */
  scroll-behavior: smooth;
}

body {
  font-family: "BDO Grotesk", Arial, sans-serif;
  font-size: 16px;
  line-height: 24px;
  color: rgba(28, 38, 35, 0.64);
  /* Page canvas: probe pageCanvas.from is "body.", i.e. the source paints this colour on body
     itself rather than a wrapper, so no substitution is needed here. */
  background-color: rgb(236, 234, 225);
}

img,
picture,
video,
canvas,
svg {
  display: block;
  max-width: 100%;
}

button,
input,
select,
textarea {
  font: inherit;
  color: inherit;
}

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

ul[class],
ol[class] {
  list-style: none;
  padding: 0;
}

/* Global keyframe found by the probe (globalPatterns.keyframeNames: ["spin"]). The probe records
   only the name, not the declaration body, so this is the conventional 360-degree rotation;
   revisit if a section spec later finds different rotation direction/degrees in the wild. */
@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

/* Additive, not a fidelity change: globalPatterns.prefersReducedMotionHonoured is false on the
   source, but reproducing that failure is not required to reproduce the page faithfully. */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}
/* ==ECC-CLONE:END reset:reset== */

/* ==ECC-CLONE:BEGIN section:index--010-header== */
/* index--010-header -- nav bar shell (composes index--011-header-megamenu panels
   and index--012-header-mobile-nav overlay, owned by their own fragments). */

.cs-010-header__bar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  height: 72px;
  padding: 16px 0 0 0;
  background-color: rgba(0, 0, 0, 0);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000;
  font-family: "BDO Grotesk", Arial, sans-serif;
  font-size: 16px;
  line-height: 24px;
  color: rgba(28, 38, 35, 0.64);
}

.cs-010-header__container {
  width: 100%;
  max-width: 1440px;
  height: 56px;
  padding: 0 32px;
  display: block;
}

.cs-010-header__pill {
  background-color: #f3f5ee;
  margin: 0 150px;
  height: 56px;
  padding: 8px;
  border-radius: 24px;
  box-shadow: 0px 16px 80px 0px rgba(28, 38, 35, 0.08);
  display: grid;
  grid-template-columns: 258.7px 510.6px 258.7px;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  position: relative;
  z-index: var(--cl-z-sticky);
}

.cs-010-header__left {
  justify-self: start;
  padding: 0 0 0 12px;
  width: 152px;
  height: 24px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.cs-010-header__logo {
  width: 140px;
  height: 24px;
  display: block;
  color: #1c2623;
  transition: color 0.5s;
}

.cs-010-header__logo:hover {
  color: #1c262352;
}

.cs-010-header__logo-svg {
  width: 100%;
  height: 100%;
  display: block;
  fill: currentColor;
}

.cs-010-header__logo-text {
  font-family: "BDO Grotesk", Arial, sans-serif;
  font-weight: 700;
  font-size: 20px;
}

.cs-010-header__center {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 24px;
}

.cs-010-header__link {
  font-family: "BDO Grotesk", Arial, sans-serif;
  font-weight: 600;
  font-size: 14px;
  line-height: 20px;
  color: #1c2623;
  text-decoration: none;
  transition: color 0.5s;
  background-color: transparent;
  border: none;
  padding: 0;
  cursor: pointer;
  white-space: nowrap;
}

.cs-010-header__link:hover,
.cs-010-header__link:focus-visible {
  color: #1c262352;
}

/* .cs-010-header__nav-toggle / __chevron / __dropdown rules removed: those placeholder
   elements are gone, replaced by index--011-header-megamenu's own toggles now that the
   megamenu is nested inside .cs-010-header__center. */

.cs-010-header__right {
  justify-self: end;
  width: 124px;
  height: 40px;
  display: block;
}

.cs-010-header__cta {
  font-family: "BDO Grotesk", Arial, sans-serif;
  white-space: nowrap;
  font-weight: 600;
  font-size: 14px;
  line-height: 20px;
  color: #1c2623;
  background-color: #e3f21a;
  padding: 0 16px;
  width: 124px;
  height: 40px;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 12px;
  border-radius: 20px;
  text-decoration: none;
  transition: transform 0.5s, color 0.5s, background-color 0.5s;
}

.cs-010-header__cta:hover {
  background-color: #1c2623;
  color: #eceae1;
}

.cs-010-header__menu-btn {
  display: none;
  width: 40px;
  height: 40px;
  padding: 0;
  position: relative;
  color: rgba(28, 38, 35, 0.64);
  cursor: pointer;
  background-color: transparent;
  border: none;
}

.cs-010-header__menu-circle {
  flex: none;
  width: 40px;
  height: 40px;
  background-color: rgba(28, 38, 35, 0.08);
  border-radius: 16px;
  -webkit-backdrop-filter: blur(32px);
  backdrop-filter: blur(32px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
}

.cs-010-header__menu-line {
  width: 16px;
  height: 2px;
  background-color: currentColor;
  display: block;
  transition: transform var(--cl-duration-fast) var(--cl-ease-out),
    opacity var(--cl-duration-fast) var(--cl-ease-out);
}

/* open state -- the classes script.js toggles had no rules at all, so the hamburger never
   morphed into the source's close icon. */
.cs-010-header__menu-btn.is-open .cs-010-header__menu-line:nth-child(1) {
  transform: translateY(6px) rotate(45deg);
}

.cs-010-header__menu-btn.is-open .cs-010-header__menu-line:nth-child(2) {
  opacity: 0;
}

.cs-010-header__menu-btn.is-open .cs-010-header__menu-line:nth-child(3) {
  transform: translateY(-6px) rotate(-45deg);
}

.cs-010-header--menu-open .cs-010-header__menu-circle {
  background-color: rgba(28, 38, 35, 0.16);
}

.cs-010-header__link--current {
  color: rgba(28, 38, 35, 0.52);
}

@media (max-width: 991px) {
  .cs-010-header__bar {
    height: 68px;
  }

  .cs-010-header__pill {
    margin: 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .cs-010-header__left {
    width: auto;
  }

  .cs-010-header__center {
    display: none;
  }

  .cs-010-header__menu-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    /* cancels the pill's 8px padding so the button lands at x=32 like the source's
       .menu-button.w-nav-button, instead of x=40. */
    margin-left: -8px;
  }
}

@media (max-width: 479px) {
  .cs-010-header__bar {
    height: 60px;
  }

  .cs-010-header__container {
    padding: 0 16px;
  }

  .cs-010-header__pill {
    height: 48px;
    border-radius: 16px;
  }
}
/* ==ECC-CLONE:END section:index--010-header== */

/* ==ECC-CLONE:BEGIN section:index--011-header-megamenu== */
/* index--011-header-megamenu -- hover-driven mega menu panels (Pages / Services / Clients) */

.cs-011-header-megamenu {
  /* wrapper carries the required section-root hooks (G2) without generating its own box,
     so its three dropdowns lay out as direct items of the header center row that embeds them */
  display: contents;
}

/* Mirrors the source split: `.navigation-dropdown` is position:static so the Pages/Services
   panels resolve against the position:relative `.cs-010-header__pill` (= source
   `.navigation-content`), while `.navigation-dropdown.compact` is position:relative so the
   Clients panel resolves against its own dropdown. */
.cs-011-header-megamenu__dropdown {
  position: static;
}

.cs-011-header-megamenu__dropdown.compact {
  position: relative;
}

/* -- full-viewport blurred scrim behind an open dropdown (source `.navigation-overlay`:
   position fixed, inset 0, rgba(28,38,35,0.32), backdrop-filter blur(20px)) -- */

.cs-011-header-megamenu__scrim {
  position: fixed;
  inset: 0;
  z-index: var(--cl-z-base);
  background-color: rgba(28, 38, 35, 0.32);
  -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.35s var(--cl-ease-out), visibility 0s linear 0.35s;
}

.cs-010-header:has(.cs-011-header-megamenu__dropdown:hover) .cs-011-header-megamenu__scrim,
.cs-010-header:has(.cs-011-header-megamenu__dropdown:focus-within) .cs-011-header-megamenu__scrim,
.cs-010-header:has(.cs-011-header-megamenu__dropdown.is-open) .cs-011-header-megamenu__scrim {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition: opacity 0.35s var(--cl-ease-out), visibility 0s linear 0s;
}

@media (max-width: 991px) {
  .cs-011-header-megamenu__scrim {
    display: none;
  }
}

/* -- toggle -- */

.cs-011-header-megamenu__toggle {
  font-family: "BDO Grotesk", Arial, sans-serif;
  font-size: 16px;
  line-height: 24px;
  color: #1c2623;
  width: auto;
  height: 20px;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  position: relative;
  cursor: pointer;
  background: transparent;
  border: none;
  padding: 0;
  margin: 0;
  text-decoration: none;
  transition: color 0.5s;
}

.cs-011-header-megamenu__toggle:hover,
.cs-011-header-megamenu__toggle:focus-visible {
  color: #1c262352;
}

.cs-011-header-megamenu__chevron {
  flex: none;
}

/* -- panel open/close (State A / State B) --
   Source drives this with a JS/GSAP inline-style tween whose duration resolves to 0s and
   is therefore not reproducible as a literal CSS transition; this uses the panel's own
   "approximates the observed easing" implementation note: opacity/transform on
   hover/focus-within at 0.35s ease-out, plus a click-toggled .is-open fallback class.
   visibility (rather than the source's literal display:none) is used so the opacity/transform
   change is actually animatable; see the fragment's returned notes for this substitution. */

.cs-011-header-megamenu__panel {
  position: absolute;
  /* source: transparent `.dropdown-panel` shell at pill-top +38px whose `.dropdown-content`
     card is inset a further 24px -> collapsed here into one element at +62px. */
  top: 62px;
  left: 0;
  width: 100%;
  box-sizing: border-box;
  padding: 24px;
  background-color: #f3f5ee;
  border-radius: 24px;
  box-shadow: 0px 16px 80px 0px rgba(28, 38, 35, 0.08);
  z-index: var(--cl-z-overlay);
  color: rgba(28, 38, 35, 0.64);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translate3d(0, -16px, 0) scale3d(1, 1, 1);
  transition: opacity 0.35s var(--cl-ease-out), transform 0.35s var(--cl-ease-out), visibility 0s linear 0.35s;
}

/* Transparent hover bridge across the 24px gap the source's `.dropdown-panel` shell used to
   span, so moving the pointer from the toggle down into the card never drops :hover. */
.cs-011-header-megamenu__panel::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: -24px;
  height: 24px;
}

.cs-011-header-megamenu__dropdown:hover .cs-011-header-megamenu__panel,
.cs-011-header-megamenu__dropdown:focus-within .cs-011-header-megamenu__panel,
.cs-011-header-megamenu__dropdown.is-open .cs-011-header-megamenu__panel {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translate3d(0, 0, 0);
  transition: opacity 0.35s var(--cl-ease-out), transform 0.35s var(--cl-ease-out), visibility 0s linear 0s;
}

.cs-011-header-megamenu__panel--pages {
  width: 100%;
  height: 436px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr auto;
  grid-template-areas: "featured links" "footer footer";
  gap: 0 32px;
}

.cs-011-header-megamenu__panel--pages .cs-011-header-megamenu__footer {
  margin-top: 0;
}

.cs-011-header-megamenu__panel--services {
  width: 100%;
  height: 424px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
}

/* compact (Clients) resolves against its own position:relative dropdown: source panel offset
   20px + the 24px content inset. */
.cs-011-header-megamenu__dropdown.compact .cs-011-header-megamenu__panel {
  top: 44px;
  left: 0;
  width: auto;
}

.cs-011-header-megamenu__panel--compact {
  min-width: 204px;
  width: auto;
  padding: 24px;
}

/* -- pages: featured cards -- */

.cs-011-header-megamenu__featured {
  grid-area: featured;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.cs-011-header-megamenu__featured-item {
  padding: 16px;
  display: flex;
  align-items: center;
  gap: 16px;
  border-radius: 16px;
  color: #1c2623;
  text-decoration: none;
  transition: all 0.5s;
}

.cs-011-header-megamenu__featured-item:hover {
  background-color: #eceae1;
}

.cs-011-header-megamenu__icon-wrap {
  flex: none;
  width: 40px;
  height: 40px;
  border-radius: 12px;
  background: #eceae1;
  color: #1c2623;
  display: flex;
  align-items: center;
  justify-content: center;
}

.cs-011-header-megamenu__stack {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.cs-011-header-megamenu__featured-title {
  font-family: "BDO Grotesk", Arial, sans-serif;
  font-size: 16px;
  line-height: 24px;
  font-weight: 600;
  color: #1c2623;
}

.cs-011-header-megamenu__featured-desc {
  font-family: "BDO Grotesk", Arial, sans-serif;
  font-size: 16px;
  line-height: 24px;
  font-weight: 400;
  color: rgba(28, 38, 35, 0.64);
}

/* -- link columns (pages: 2-col grid, services: 1-col, compact: flat list) -- */

.cs-011-header-megamenu__links {
  grid-area: links;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  color: rgba(28, 38, 35, 0.64);
}

.cs-011-header-megamenu__panel--services .cs-011-header-megamenu__links {
  /* the shared rule's `grid-area: links` names an area that only the --pages template
     defines; left in place it spawns implicit columns and wrecks the services grid. */
  grid-area: auto;
  grid-template-columns: 1fr;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.cs-011-header-megamenu__link-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.cs-011-header-megamenu__caption {
  font-family: "BDO Grotesk", Arial, sans-serif;
  font-size: 12px;
  line-height: 12px;
  letter-spacing: 1.25px;
  color: rgba(28, 38, 35, 0.64);
  margin-bottom: 8px;
}

.cs-011-header-megamenu__link-group a,
.cs-011-header-megamenu__links > a,
.cs-011-header-megamenu__list a {
  font-family: "BDO Grotesk", Arial, sans-serif;
  font-size: 16px;
  line-height: 24px;
  color: #1c2623;
  text-decoration: none;
  display: block;
  transition: color 0.5s;
}

.cs-011-header-megamenu__link-group a:hover,
.cs-011-header-megamenu__links > a:hover,
.cs-011-header-megamenu__list a:hover {
  color: #1c262352;
}

/* -- compact (clients) flat list -- */

.cs-011-header-megamenu__list {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

/* -- footer credit line (pages + services, identical content) -- */

.cs-011-header-megamenu__footer {
  grid-area: footer;
  display: flex;
  justify-content: space-between;
  font-family: "BDO Grotesk", Arial, sans-serif;
  font-size: 16px;
  line-height: 24px;
  color: rgba(28, 38, 35, 0.64);
  margin-top: 32px;
}

.cs-011-header-megamenu__panel--services .cs-011-header-megamenu__footer {
  margin-top: auto;
  padding-top: 32px;
}

.cs-011-header-megamenu__footer-text {
  font-size: 14px;
  line-height: 20px;
}

.cs-011-header-megamenu__small-link {
  color: inherit;
  text-decoration: none;
  transition: color 0.5s;
}

.cs-011-header-megamenu__small-link:hover {
  color: #1c2623a3;
}

/* -- services: promo video -- */

.cs-011-header-megamenu__promo {
  flex: 0 0 260px;
  position: relative;
  overflow: hidden;
  border-radius: 16px;
  min-height: 280px;
}

.cs-011-header-megamenu__promo-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.cs-011-header-megamenu__promo-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 4px;
  padding: 16px;
  background: linear-gradient(to top, rgba(28, 38, 35, 0.55), rgba(28, 38, 35, 0));
}

.cs-011-header-megamenu__promo-caption {
  font-family: "BDO Grotesk", Arial, sans-serif;
  font-size: 16px;
  line-height: 24px;
  color: #f3f5ee;
}

.cs-011-header-megamenu__promo-link {
  font-family: "BDO Grotesk", Arial, sans-serif;
  font-size: 14px;
  line-height: 20px;
  color: #f3f5ee;
  text-decoration: underline;
  transition: opacity 0.5s;
}

.cs-011-header-megamenu__promo-link:hover {
  opacity: 0.7;
}
/* ==ECC-CLONE:END section:index--011-header-megamenu== */

/* ==ECC-CLONE:BEGIN section:index--012-header-mobile-nav== */
/* index--012-header-mobile-nav: hamburger scrim + slide-down nav panel (mobile only) */

.cs-012-header-mobile-nav {
  position: fixed;
  inset: 0;
  z-index: var(--cl-z-overlay);
  pointer-events: none;
}

.cs-012-header-mobile-nav__overlay {
  position: fixed;
  inset: 0;
  display: none;
  opacity: 0;
  background-color: rgba(28, 38, 35, 0.32);
  backdrop-filter: blur(20px);
  transition: opacity 0.5s cubic-bezier(0.77, 0, 0.175, 1);
  pointer-events: auto;
}

.cs-012-header-mobile-nav__overlay.is-open {
  display: block;
  opacity: 1;
}

.cs-012-header-mobile-nav__panel {
  position: absolute;
  /* fluid, tracking the viewport the way the source's `.navigation-center` does at <=991
     (measured {x:24, w:720} at 768) -- it was hard-coded to 358x516 at every width. */
  top: 80px;
  left: 24px;
  right: 24px;
  width: auto;
  height: auto;
  max-height: calc(100vh - 104px);
  overflow-y: auto;
  padding: 20px 24px;
  box-sizing: border-box;
  display: none;
  opacity: 0;
  transform: translateY(-29px);
  background-color: #f3f5ee;
  border-radius: 16px;
  transition:
    opacity 0.5s cubic-bezier(0.77, 0, 0.175, 1),
    transform 0.5s cubic-bezier(0.77, 0, 0.175, 1);
  pointer-events: auto;
}

.cs-012-header-mobile-nav__panel.is-open {
  display: block;
  opacity: 1;
  transform: translateY(0);
}

.cs-012-header-mobile-nav__list {
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 0;
  list-style: none;
}

.cs-012-header-mobile-nav__item {
  display: block;
}

.cs-012-header-mobile-nav__link {
  display: block;
  font-family: "BDO Grotesk", Arial, sans-serif;
  font-weight: 600;
  font-size: 20px;
  line-height: 32px;
  color: #1c2623;
  text-decoration: none;
  padding: 4px 0;
  transition: color 0.5s;
}

.cs-012-header-mobile-nav__link:hover {
  color: #1c262352;
}

.cs-012-header-mobile-nav__link--current {
  color: rgba(28, 38, 35, 0.52);
}

/* -- accordion rows (Pages / Services / Clients), non-exclusive like the source and the
   FAQ: each body tweens height 0 <-> measured scrollHeight. -- */

.cs-012-header-mobile-nav__accordions {
  display: flex;
  flex-direction: column;
  margin-top: 4px;
}

.cs-012-header-mobile-nav__acc-toggle {
  width: 100%;
  padding: 4px 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  font-family: "BDO Grotesk", Arial, sans-serif;
  font-weight: 600;
  font-size: 20px;
  line-height: 32px;
  color: #1c2623;
  background: transparent;
  border: none;
  cursor: pointer;
  text-align: left;
  transition: color 0.5s;
}

.cs-012-header-mobile-nav__acc-toggle:hover {
  color: #1c262352;
}

.cs-012-header-mobile-nav__chevron {
  flex: none;
  transition: transform var(--cl-duration-fast) var(--cl-ease-out);
}

.cs-012-header-mobile-nav__acc--open .cs-012-header-mobile-nav__chevron {
  transform: rotate(180deg);
}

.cs-012-header-mobile-nav__acc-body {
  height: 0;
  opacity: 0;
  overflow: hidden;
  transition: height 0.4s ease, opacity 0.4s ease;
}

.cs-012-header-mobile-nav__acc-inner {
  padding: 8px 0 16px 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.cs-012-header-mobile-nav__featured {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.cs-012-header-mobile-nav__featured-item {
  display: flex;
  flex-direction: column;
  padding: 8px 12px;
  border-radius: 12px;
  background-color: #eceae1;
  text-decoration: none;
}

.cs-012-header-mobile-nav__featured-title {
  font-family: "BDO Grotesk", Arial, sans-serif;
  font-weight: 600;
  font-size: 16px;
  line-height: 24px;
  color: #1c2623;
}

.cs-012-header-mobile-nav__featured-desc {
  font-family: "BDO Grotesk", Arial, sans-serif;
  font-size: 14px;
  line-height: 20px;
  color: rgba(28, 38, 35, 0.64);
}

.cs-012-header-mobile-nav__link-cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.cs-012-header-mobile-nav__link-group {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.cs-012-header-mobile-nav__caption {
  font-family: "BDO Grotesk", Arial, sans-serif;
  font-size: 12px;
  line-height: 12px;
  letter-spacing: 1.25px;
  text-transform: uppercase;
  color: rgba(28, 38, 35, 0.64);
  margin-bottom: 8px;
}

.cs-012-header-mobile-nav__link-group a {
  font-family: "BDO Grotesk", Arial, sans-serif;
  font-size: 16px;
  line-height: 24px;
  color: #1c2623;
  text-decoration: none;
  display: block;
  transition: color 0.5s;
}

.cs-012-header-mobile-nav__link-group a:hover {
  color: #1c262352;
}

/* -- promo card (source `.navigation-promo`: dark #1c2623 surface, min-height 240px,
   mobile-only -- this is where the 14221326 clouds clip belongs) -- */

.cs-012-header-mobile-nav__promo {
  position: relative;
  overflow: hidden;
  border-radius: 16px;
  background-color: #1c2623;
  min-height: 240px;
  margin-top: 24px;
}

.cs-012-header-mobile-nav__promo-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.cs-012-header-mobile-nav__promo-overlay {
  position: relative;
  min-height: 240px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: flex-start;
  gap: 8px;
  padding: 24px;
  background: linear-gradient(to top, rgba(28, 38, 35, 0.55), rgba(28, 38, 35, 0));
}

.cs-012-header-mobile-nav__promo-caption {
  font-family: "BDO Grotesk", Arial, sans-serif;
  font-weight: 600;
  font-size: 20px;
  line-height: 28px;
  color: #f3f5ee;
}

.cs-012-header-mobile-nav__promo-link {
  font-family: "BDO Grotesk", Arial, sans-serif;
  font-size: 14px;
  line-height: 20px;
  color: #1c2623;
  background-color: #f3f5ee;
  padding: 8px 16px;
  border-radius: 20px;
  text-decoration: none;
  transition: background-color 0.5s, color 0.5s;
}

.cs-012-header-mobile-nav__promo-link:hover {
  background-color: #e3f21a;
}

/* -- credit strip (source `.navigation-footer`, display:flex only at <=991) -- */

.cs-012-header-mobile-nav__footer {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  margin-top: 20px;
}

.cs-012-header-mobile-nav__footer-text {
  font-family: "BDO Grotesk", Arial, sans-serif;
  font-size: 14px;
  line-height: 20px;
  color: rgba(28, 38, 35, 0.64);
}

.cs-012-header-mobile-nav__small-link {
  color: inherit;
  text-decoration: none;
  transition: color 0.5s;
}

.cs-012-header-mobile-nav__small-link:hover {
  color: #1c2623a3;
}

@media (max-width: 479px) {
  .cs-012-header-mobile-nav__panel {
    top: 72px;
    left: 16px;
    right: 16px;
    max-height: calc(100vh - 88px);
    padding: 16px;
  }

  .cs-012-header-mobile-nav__link-cols {
    grid-template-columns: 1fr;
  }
}

/* Desktop-only guard. Must mirror the max-width:991px breakpoint that hides
   .cs-010-header__center and shows .cs-010-header__menu-btn -- at min-width:768px the
   hamburger was live from 768 to 991 while this wrapper was already display:none. */
@media (min-width: 992px) {
  .cs-012-header-mobile-nav {
    display: none;
  }
}
/* ==ECC-CLONE:END section:index--012-header-mobile-nav== */

/* ==ECC-CLONE:BEGIN section:index--020-hero== */
.cs-020-hero {
  position: relative;
  padding: 8px;
  width: 100%;
  min-height: 900px;
  background: linear-gradient(180deg, #bccad1, #eceae1);
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
}

.cs-020-hero__frame {
  width: 100%;
  height: 100%;
  flex: 1 1 auto;
  display: block;
}

.cs-020-hero__split {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}

/* -- media column (photo + floating case-study teaser) -- */

.cs-020-hero__media {
  position: relative;
  width: 708px;
  height: 884px;
  border-radius: 24px;
  flex-shrink: 0;
}

.cs-020-hero__media-card {
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: 24px;
  overflow: hidden;
}

.cs-020-hero__photo {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.cs-020-hero__media-overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(180deg, rgba(28, 38, 35, 0), rgba(28, 38, 35, 0.64));
}

.cs-020-hero__teaser {
  position: absolute;
  /* Source: card sits 32px in from the media card's left and bottom edges (x=40, y=584
     inside .hero-media x=8 y=8 w=708 h=884). */
  top: auto;
  bottom: 32px;
  left: 32px;
  right: auto;
  z-index: 2;
  width: 320px;
  height: 276px;
  box-sizing: border-box;
  background-color: #f3f5ee;
  border-radius: 24px;
  padding: 24px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 48px;
  text-decoration: none;
}

.cs-020-hero__teaser-logo {
  width: 133px;
  height: 32px;
  display: block;
}

.cs-020-hero__teaser-title {
  font-family: "BDO Grotesk", Arial, sans-serif;
  font-weight: 400;
  font-size: 20px;
  line-height: 28px;
  letter-spacing: -0.25px;
  color: #1c2623;
}

.cs-020-hero__teaser-link {
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  box-sizing: border-box;
  padding: 8px 16px;
  border-radius: 200px;
  background-color: rgba(28, 38, 35, 0.08);
  font-family: "BDO Grotesk", Arial, sans-serif;
  font-weight: 600;
  font-size: 14px;
  line-height: 20px;
  color: #1c2623;
  text-decoration: none;
}

/* -- header column (headline, subhead, ctas) -- */

.cs-020-hero__header {
  width: 708px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 32px;
}

.cs-020-hero__text {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  width: 100%;
  /* Source .text.center.narrow: a 5-column span of the 12-column grid (590.67px at 1440). */
  max-width: calc(((min(1600px, 100vw) - 11 * 16px) / 12) * 5 + 4 * 16px);
  margin-left: auto;
  margin-right: auto;
}

.cs-020-hero__h1 {
  margin: 0;
  font-family: "Libre Caslon Condensed", "Times New Roman", sans-serif;
  font-weight: 400;
  font-size: 68px;
  line-height: 72px;
  letter-spacing: -1px;
  color: #1c2623;
  text-align: center;
  opacity: 0;
  animation: cs-020-hero-fade-in 400ms var(--cl-ease-out) forwards;
}

.cs-020-hero__h1 em {
  font-style: italic;
}

.cs-020-hero__sub {
  margin: 0;
  font-family: "BDO Grotesk", Arial, sans-serif;
  font-weight: 400;
  font-size: 16px;
  line-height: 24px;
  color: rgba(28, 38, 35, 0.64);
  text-align: center;
  opacity: 0;
  animation: cs-020-hero-fade-in 400ms var(--cl-ease-out) forwards;
}

.cs-020-hero__buttons {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
}

.cs-020-hero__btn-primary {
  white-space: nowrap;
  position: relative;
  box-sizing: border-box;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 12px;
  width: 155px;
  height: 56px;
  padding: 0 60px 0 20px;
  border-radius: 20px;
  overflow: hidden;
  background-color: #f3f5ee;
  color: #1c2623;
  font-family: "BDO Grotesk", Arial, sans-serif;
  font-weight: 600;
  font-size: 16px;
  line-height: 24px;
  text-decoration: none;
  transition: transform 0.5s, color 0.5s, background-color 0.5s;
}

.cs-020-hero__btn-primary:hover {
  background-color: #1c2623;
  color: #eceae1;
}

.cs-020-hero__btn-rail {
  position: absolute;
  right: 8px;
  top: 0;
  width: 99px;
  height: 56px;
  display: flex;
  justify-content: flex-end;
  align-items: center;
}

.cs-020-hero__btn-circle {
  width: 40px;
  height: 40px;
  border-radius: 16px;
  background-color: #e3f21a;
  display: flex;
  align-items: center;
  justify-content: center;
}

.cs-020-hero__btn-secondary {
  white-space: nowrap;
  box-sizing: border-box;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  width: 142px;
  height: 56px;
  padding: 0 20px;
  border-radius: 20px;
  background-color: rgba(28, 38, 35, 0.08);
  color: #1c2623;
  font-family: "BDO Grotesk", Arial, sans-serif;
  font-weight: 600;
  font-size: 16px;
  line-height: 24px;
  text-decoration: none;
  transition: transform 0.5s, color 0.5s, background-color 0.5s;
}

.cs-020-hero__btn-secondary:hover {
  background-color: #1c2623;
  color: #eceae1;
}

@keyframes cs-020-hero-fade-in {
  from {
    opacity: 0;
    transform: translate3d(0, 8px, 0);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

/* -- responsive: split row collapses to a stacked column -- */

@media (max-width: 991px) {
  .cs-020-hero {
    min-height: 0;
  }

  .cs-020-hero__h1 {
    font-size: 56px;
    line-height: 60px;
  }

  .cs-020-hero__text {
    max-width: 474px;
  }

  .cs-020-hero__split {
    flex-direction: column;
  }

  .cs-020-hero__header {
    order: 1;
    width: 100%;
    /* Stacked layout puts the copy at the top of the page, where the fixed header
       pill (68px tall at this tier) was covering the first line of the H1. */
    padding-top: 72px;
    box-sizing: border-box;
  }

  .cs-020-hero__media {
    order: 2;
    width: 100%;
    height: auto;
    aspect-ratio: 708 / 884;
  }

  .cs-020-hero__media-card {
    overflow: hidden;
  }

  .cs-020-hero__teaser {
    top: auto;
    left: 16px;
    right: 16px;
    bottom: 16px;
    width: auto;
    height: auto;
  }
}

/* Source breakpoint tier that was missing entirely from this bundle
   (source declares 991 / 767 / 479; only 991 and 479 existed here). */
@media (max-width: 767px) {
  .cs-020-hero__h1 {
    font-size: 44px;
    line-height: 48px;
  }

  .cs-020-hero__text {
    max-width: 424.5px;
  }

  .cs-020-hero__teaser {
    left: 16px;
    right: 16px;
    bottom: 16px;
  }
}

@media (max-width: 479px) {
  .cs-020-hero__header {
    padding-top: 64px;
    padding-bottom: 32px;
  }

  .cs-020-hero__teaser-logo {
    display: none;
  }
}
/* ==ECC-CLONE:END section:index--020-hero== */

/* ==ECC-CLONE:BEGIN section:index--030-intro== */
/*
 * Trusted-By Intro (index--030-intro)
 * This section's own surface is transparent in the source; it sits on the shared
 * `main > .frame` dark band (#1c2623) together with index--040-approach and
 * index--050-marquee. #1c2623 is painted here as a fallback ONLY in case the
 * assembly step does not supply a shared wrapper element -- flag in manifest.notes[]
 * per the spec's Namespace block so 040/050 match and no seam appears.
 */
.cs-030-intro {
  position: relative;
  display: flex;
  flex-direction: column;
  /* Source paints intro + approach + marquee as ONE inset `main > .frame` card:
     8px cream gutter all round, 24px corners. Reproduced across the three flush
     sections with a shared 8px side margin and matching end radii. */
  margin: 8px 8px 0;
  border-radius: 24px 24px 0 0;
  padding: 160px 0 120px;
  background-color: #1c2623;
  color: rgba(236, 234, 225, 0.64);
  font-family: "BDO Grotesk", Arial, sans-serif;
  font-size: 16px;
  line-height: 24px;
  overflow: clip;
  opacity: 0;
  transform: translate(0px, 8px);
  transition: opacity 0.5s var(--cl-ease-out), transform 0.5s var(--cl-ease-out);
}

.cs-030-intro.cs-030-intro--visible {
  opacity: 1;
  transform: none;
}

.cs-030-intro__container {
  width: 100%;
  max-width: 1440px;
  margin: 0 auto;
  padding: 0 32px;
}

.cs-030-intro__content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 80px;
  width: 100%;
}

.cs-030-intro__header {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 24px;
  width: 100%;
  max-width: 674px;
  margin: 0 auto;
  text-align: center;
}

.cs-030-intro__tag {
  margin: 0;
  display: inline-flex;
  align-items: center;
  background-color: #232f2b;
  border-radius: 200px;
  padding: 8px 12px;
  font-family: "BDO Grotesk", Arial, sans-serif;
  font-size: 12px;
  line-height: 12px;
  letter-spacing: 1.25px;
  text-transform: uppercase;
  color: #eceae1;
}

.cs-030-intro__heading {
  margin: 0;
  font-family: "Libre Caslon Condensed", "Times New Roman", sans-serif;
  font-weight: 400;
  font-size: 40px;
  line-height: 44px;
  letter-spacing: -1px;
  color: #eceae1;
  text-align: center;
}

.cs-030-intro__marquees {
  position: relative;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
  width: 100vw;
  overflow: visible;
}

.cs-030-intro__marquee {
  position: relative;
  width: 100%;
  height: 200px;
  overflow: visible;
}

.cs-030-intro__marquee-track {
  display: flex;
  align-items: center;
  gap: 16px;
  width: max-content;
  animation: cs-030-intro-marquee-scroll 60s linear infinite;
}

.cs-030-intro__marquee-track--right {
  animation-direction: reverse;
}

.cs-030-intro__logo-chip {
  flex: 0 0 auto;
  width: 348px;
  height: 200px;
  border-radius: 16px;
  background-color: rgb(35, 47, 43);
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(236, 234, 225, 0.64);
}

.cs-030-intro__logo-svg {
  display: block;
  color: inherit;
}

@keyframes cs-030-intro-marquee-scroll {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-50%);
  }
}

@media (max-width: 991px) {
  .cs-030-intro {
    padding: 96px 0 80px;
  }

  .cs-030-intro__header {
    max-width: 100%;
  }

  .cs-030-intro__heading {
    font-size: 36px;
    line-height: 40px;
    letter-spacing: -0.5px;
  }
}

@media (max-width: 767px) {
  .cs-030-intro {
    padding: 80px 0 64px;
    min-height: 0;
  }

  .cs-030-intro__tag {
    font-size: 10px;
  }

  .cs-030-intro__heading {
    font-size: 28px;
    line-height: 32px;
    letter-spacing: -0.25px;
  }
}

@media (max-width: 479px) {
  .cs-030-intro {
    padding: 80px 0 64px;
  }

  .cs-030-intro__heading {
    font-size: 28px;
    line-height: 32px;
    letter-spacing: -0.25px;
  }
}
/* ==ECC-CLONE:END section:index--030-intro== */

/* ==ECC-CLONE:BEGIN section:index--040-approach== */
/*
 * Approach / How We Work (index--040-approach)
 * This section's own surface is transparent in the source; it sits on the shared
 * `main > .frame` dark band (#1c2623) together with index--030-intro and
 * index--050-marquee. #1c2623 is painted here as a fallback ONLY in case the
 * assembly step does not supply a shared wrapper element -- flag in manifest.notes[]
 * so 030/050 match and no seam appears (same rule as index--030-intro).
 */
.cs-040-approach {
  position: relative;
  display: flex;
  flex-direction: column;
  margin: 0 8px;
  padding: 160px 0 120px;
  background-color: #1c2623;
  color: rgba(236, 234, 225, 0.64);
  font-family: "BDO Grotesk", Arial, sans-serif;
  font-size: 16px;
  line-height: 24px;
  overflow: clip;
  opacity: 0;
  transform: translate(0px, 8px);
  transition: opacity 0.5s var(--cl-ease-out), transform 0.5s var(--cl-ease-out);
}

.cs-040-approach.cs-040-approach--visible {
  opacity: 1;
  transform: none;
}

/* Narrow container variant: max-width tracks the grid's column-10 formula
   ( ((min(1600px, 100vw) - 11 * 16px) / 12) * 10 + 9 * 16px ), matching the
   1197.33px measured at a 1440px viewport. Written as a literal calc(), not a
   var() reference, per the section's token rule. */
.cs-040-approach__container {
  box-sizing: border-box;
  width: 100%;
  max-width: calc(((min(1600px, 100vw) - 11 * 16px) / 12) * 10 + 9 * 16px);
  margin: 0 auto;
  padding: 0 32px;
}

.cs-040-approach__split {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: space-between;
  width: 100%;
}

.cs-040-approach__media {
  position: relative;
  width: 551px;
  height: 734px;
  flex-shrink: 0;
  overflow: hidden;
  border-radius: 24px;
}

.cs-040-approach__photo {
  display: block;
  position: relative;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 50%;
}

.cs-040-approach__content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: 64px;
  width: 452px;
  flex-shrink: 0;
}

.cs-040-approach__body {
  display: flex;
  flex-direction: column;
  gap: 32px;
  width: 339px;
  height: 168px;
}

.cs-040-approach__heading {
  margin: 0;
  font-family: "Libre Caslon Condensed", "Times New Roman", sans-serif;
  font-weight: 400;
  font-size: 56px;
  line-height: 56px;
  letter-spacing: -1px;
  color: #eceae1;
}

.cs-040-approach__heading em {
  font-style: italic;
}

.cs-040-approach__strong {
  font-weight: 600;
  color: rgb(236, 234, 225);
}

.cs-040-approach__statements {
  display: block;
  width: 452px;
  border-bottom: 1px solid rgba(236, 234, 225, 0.08);
}

.cs-040-approach__statement {
  display: block;
  font-family: "BDO Grotesk", Arial, sans-serif;
  font-weight: 400;
  font-size: 16px;
  line-height: 24px;
  color: rgba(236, 234, 225, 0.64);
  border-top: 1px solid rgba(236, 234, 225, 0.08);
  padding: 16px 0;
}

.cs-040-approach__statement p {
  margin: 0;
}

@media (max-width: 991px) {
  .cs-040-approach {
    padding: 96px 0 80px;
  }

  /* Source drops the 10-column narrow container below 992 and uses the full
     32px-gutter container (.feature-split measures x=32 w=704 at 768). */
  .cs-040-approach__container {
    max-width: 100%;
  }

  /* Source keeps the media/content split two-up down to its own 767 breakpoint
     (measured at 768: two 328px columns, 48px gap, section height 668). */
  .cs-040-approach__split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: start;
    gap: 48px;
  }

  .cs-040-approach__media {
    width: 100%;
    height: auto;
    aspect-ratio: 328 / 492;
  }

  .cs-040-approach__content {
    width: 100%;
  }

  .cs-040-approach__body {
    width: 100%;
    height: auto;
  }

  .cs-040-approach__statements {
    width: 100%;
  }

  .cs-040-approach__heading {
    font-size: 48px;
    line-height: 48px;
    letter-spacing: -0.5px;
  }
}

@media (max-width: 767px) {
  .cs-040-approach {
    padding: 80px 0 64px;
  }

  /* Source at 570: still two columns (241px each) with a 40px gap. */
  .cs-040-approach__split {
    grid-template-columns: 1fr 1fr;
    gap: 40px;
  }

  .cs-040-approach__media {
    aspect-ratio: 241 / 449;
  }

  .cs-040-approach__heading {
    font-size: 36px;
    line-height: 36px;
    letter-spacing: -0.25px;
  }
}

@media (max-width: 479px) {
  .cs-040-approach {
    padding: 80px 0 64px;
  }

  /* Source collapses the split only below its 479 breakpoint (single 342px column). */
  .cs-040-approach__split {
    grid-template-columns: 1fr;
    gap: 40px;
  }

  .cs-040-approach__media {
    aspect-ratio: 1 / 1;
  }
}
/* ==ECC-CLONE:END section:index--040-approach== */

/* ==ECC-CLONE:BEGIN section:index--050-marquee== */
/*
 * Marquee Statement (index--050-marquee)
 * This section's own surface is transparent in the source; it sits on the shared
 * `main > .frame` dark band (#1c2623) together with index--030-intro and
 * index--040-approach. #1c2623 is painted here as a fallback ONLY in case the
 * assembly step does not supply a shared wrapper element -- flag in manifest.notes[]
 * per the spec's Namespace block so 030/040 match and no seam appears.
 *
 * Reuses the same marquee mechanism as index--030-intro's logo wall (continuous
 * CSS @keyframes translateX loop), sized for a single large text line instead of
 * image chips. Two back-to-back copies of the statement are duplicated in the
 * track (see section.html) so `translateX(0) -> translateX(-50%)` loops seamlessly
 * -- the source's own 3x DOM duplication is an implementation detail of its own
 * loop technique, not a requirement of the visual result.
 */
.cs-050-marquee {
  position: relative;
  margin: 0 8px 8px;
  border-radius: 0 0 24px 24px;
  height: 232px;
  overflow: hidden;
  display: flex;
  align-items: center;
  background-color: #1c2623;
}

.cs-050-marquee__container {
  width: 100%;
  overflow: hidden;
}

.cs-050-marquee__content {
  width: 100%;
  overflow: hidden;
}

.cs-050-marquee__track {
  display: flex;
  align-items: center;
  width: max-content;
  animation: cs-050-marquee-scroll 27.3s linear infinite;
}

.cs-050-marquee__item {
  flex: 0 0 auto;
  /* Source repeats with a 16px gap, not a 120px hole. margin-right (rather than
     track `gap`) keeps the -50% keyframe loop seamless for the duplicated pair. */
  margin-right: 16px;
  white-space: nowrap;
  font-family: "Libre Caslon Condensed", "Times New Roman", sans-serif;
  font-weight: 400;
  font-size: 68px;
  line-height: 72px;
  letter-spacing: -1px;
  color: #eceae1;
}

.cs-050-marquee__item em {
  font-style: italic;
}

@keyframes cs-050-marquee-scroll {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-50%);
  }
}

@media (max-width: 991px) {
  .cs-050-marquee {
    height: 160px;
  }

  .cs-050-marquee__item {
    margin-right: 16px;
    font-size: 56px;
    line-height: 60px;
    letter-spacing: -0.75px;
  }
}

@media (max-width: 767px) {
  .cs-050-marquee {
    height: 144px;
  }

  .cs-050-marquee__item {
    font-size: 44px;
    line-height: 48px;
    letter-spacing: -0.5px;
  }
}

@media (max-width: 479px) {
  .cs-050-marquee {
    height: 144px;
  }

  .cs-050-marquee__item {
    margin-right: 16px;
    font-size: 44px;
    line-height: 48px;
    letter-spacing: -0.5px;
  }
}
/* ==ECC-CLONE:END section:index--050-marquee== */

/* ==ECC-CLONE:BEGIN section:index--060-proof-carousel== */
/*
 * Proof Carousel (index--060-proof-carousel)
 * This section sits directly on the page's own cream body canvas (#eceae1) -- both its
 * own and its ancestor's background-color resolve transparent in the source, unlike
 * index--030/040/050 which share the dark .frame band. No background-color is set here.
 */

.cs-060-proof-carousel {
  position: relative;
  box-sizing: border-box;
  /* Source clips the peeking neighbour slides at the section edge (section is
     `overflow: clip`) while the slider mask itself stays visible. */
  overflow: clip;
  width: 100%;
  min-height: 1183px;
  /* Source section carries .padding-top-large: padding-top = section-large (160px),
     padding-bottom = section-medium (120px). */
  padding: 160px 0 120px;
  font-family: "BDO Grotesk", Arial, sans-serif;
  opacity: 0;
  transform: translate(0px, 8px);
  transition: opacity 0.5s var(--cl-ease-out), transform 0.5s var(--cl-ease-out);
}

.cs-060-proof-carousel.cs-060-proof-carousel--visible {
  opacity: 1;
  transform: none;
}

.cs-060-proof-carousel__container {
  box-sizing: border-box;
  width: 100%;
  max-width: 1440px;
  margin: 0 auto;
  padding: 0 32px;
}

.cs-060-proof-carousel__content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 64px;
  width: 100%;
}

.cs-060-proof-carousel__header {
  width: 100%;
}

.cs-060-proof-carousel__heading {
  margin: 0;
  max-width: 674px;
  font-family: "Libre Caslon Condensed", "Times New Roman", sans-serif;
  font-weight: 400;
  font-size: 56px;
  line-height: 56px;
  letter-spacing: -1px;
  color: #1c2623;
  text-align: left;
}

.cs-060-proof-carousel__heading em {
  font-style: italic;
}

/* -- slider shell: the mask fills its own row, the arrow pair wraps onto the next -- */

.cs-060-proof-carousel__slider {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  row-gap: 40px;
  column-gap: 8px;
  width: 591px;
}

.cs-060-proof-carousel__mask {
  flex: 0 0 100%;
  width: 591px;
  height: 591px;
  overflow: visible;
}

.cs-060-proof-carousel__track {
  display: flex;
  gap: 16px;
  width: 100%;
  height: 100%;
  transition: transform 1s cubic-bezier(0.86, 0, 0.07, 1);
}

.cs-060-proof-carousel__slide {
  flex: 0 0 100%;
  width: 100%;
  height: 100%;
}

.cs-060-proof-carousel__slide-card {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: 24px;
}

.cs-060-proof-carousel__slide-media {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  border-radius: 24px;
  overflow: hidden;
}

.cs-060-proof-carousel__slide-img {
  display: block;
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.cs-060-proof-carousel__slide-content {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
  gap: 16px;
  padding: 16px;
}

.cs-060-proof-carousel__slide-panel {
  box-sizing: border-box;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 32px;
  border-radius: 16px;
  background-color: rgb(28, 38, 35);
}

.cs-060-proof-carousel__slide-heading {
  margin: 0;
  font-family: "BDO Grotesk", Arial, sans-serif;
  font-weight: 600;
  font-size: 20px;
  line-height: 28px;
  letter-spacing: -0.25px;
  color: #eceae1;
}

.cs-060-proof-carousel__slide-body {
  display: flex;
  flex-direction: column;
  gap: 24px;
  height: auto;
  overflow: visible;
}

.cs-060-proof-carousel__slide-text {
  margin: 0;
  font-family: "BDO Grotesk", Arial, sans-serif;
  font-weight: 400;
  font-size: 16px;
  line-height: 24px;
  color: rgba(236, 234, 225, 0.64);
}

.cs-060-proof-carousel__slide-link {
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 111px;
  height: 40px;
  border-radius: 200px;
  background-color: rgba(236, 234, 225, 0.08);
  color: #eceae1;
  font-family: "BDO Grotesk", Arial, sans-serif;
  font-weight: 600;
  font-size: 14px;
  line-height: 20px;
  text-decoration: none;
  transition: background-color 0.3s, color 0.3s;
}

.cs-060-proof-carousel__slide-link:hover {
  background-color: #eceae1;
  color: #1c2623;
}

/* -- prev/next arrows -- */

.cs-060-proof-carousel__arrow {
  box-sizing: border-box;
  flex: 0 0 auto;
  width: 56px;
  height: 56px;
  padding: 0;
  border: none;
  border-radius: 16px;
  background-color: rgba(28, 38, 35, 0.08);
  backdrop-filter: blur(32px);
  -webkit-backdrop-filter: blur(32px);
  color: #1c2623;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background-color 0.3s, color 0.3s;
}

.cs-060-proof-carousel__arrow:hover {
  background-color: #1c2623;
  color: #eceae1;
}

.cs-060-proof-carousel__arrow svg {
  display: block;
}

@media (max-width: 991px) {
  .cs-060-proof-carousel {
    min-height: 890px;
    padding: 96px 0 80px;
  }

  .cs-060-proof-carousel__heading {
    font-size: 48px;
    line-height: 48px;
    letter-spacing: -0.5px;
  }

  .cs-060-proof-carousel__slider {
    width: 474px;
  }

  .cs-060-proof-carousel__mask {
    width: 474px;
    height: 474px;
  }
}

@media (max-width: 767px) {
  .cs-060-proof-carousel {
    min-height: 0;
    padding: 80px 0 64px;
  }

  .cs-060-proof-carousel__heading {
    font-size: 36px;
    line-height: 36px;
    letter-spacing: -0.25px;
  }

  .cs-060-proof-carousel__slider {
    width: 425px;
  }

  .cs-060-proof-carousel__mask {
    width: 425px;
    height: 480px;
  }
}

@media (max-width: 479px) {
  .cs-060-proof-carousel {
    min-height: 0;
    padding: 80px 0 64px;
  }

  .cs-060-proof-carousel__slider {
    width: 326px;
  }

  .cs-060-proof-carousel__mask {
    width: 326px;
    height: 326px;
  }

  .cs-060-proof-carousel__slide-panel {
    padding: 24px;
  }
}
/* ==ECC-CLONE:END section:index--060-proof-carousel== */

/* ==ECC-CLONE:BEGIN section:index--070-testimonials== */
/* index--070-testimonials -- testimonials section (light gradient surface, video cards) */

.cs-070-testimonials {
  position: relative;
  display: flex;
  justify-content: center;
  background: linear-gradient(#eceae1, #bccad1);
  padding: 120px 32px;
}

.cs-070-testimonials__container {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
}

.cs-070-testimonials__content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 64px;
  opacity: 0;
  transform: translate(0, 8px);
  transition:
    opacity var(--cl-duration-fast) var(--cl-ease-out),
    transform var(--cl-duration-fast) var(--cl-ease-out);
}

.cs-070-testimonials__content.cs-070-testimonials--is-visible {
  opacity: 1;
  transform: none;
}

.cs-070-testimonials__header {
  text-align: center;
}

.cs-070-testimonials__title {
  margin: 0;
  font-family: "Libre Caslon Condensed", "Times New Roman", sans-serif;
  font-weight: 400;
  font-size: 56px;
  line-height: 56px;
  letter-spacing: -1px;
  color: #1c2623;
}

.cs-070-testimonials__grid {
  /* Source .testimonial-grid is a fluid 3-column grid (286px cards at 1440,
     229px at 768, 171px at 570) -- fixed-width flex children overflowed the
     document below ~900px. */
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  justify-content: center;
  gap: 16px;
  width: 100%;
  max-width: 890px;
}

.cs-070-testimonials__card {
  position: relative;
  min-width: 0;
  width: 100%;
  aspect-ratio: 286 / 429;
  border-radius: 24px;
  background: transparent;
  overflow: hidden;
}

.cs-070-testimonials__card-content {
  position: absolute;
  top: auto;
  bottom: 0;
  left: 0;
  right: 0;
  box-sizing: border-box;
  padding: 0 32px 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 16px;
  z-index: 3;
}

.cs-070-testimonials__name {
  font-family: "BDO Grotesk", Arial, sans-serif;
  font-weight: 600;
  text-align: center;
  font-size: 12px;
  line-height: 12px;
  letter-spacing: 1.25px;
  text-transform: uppercase;
  color: rgba(236, 234, 225, 0.64);
}

.cs-070-testimonials__quote {
  margin: 0;
  /* Source quote is BDO Grotesk 600, centred -- not the condensed serif. */
  font-family: "BDO Grotesk", Arial, sans-serif;
  font-weight: 600;
  font-size: 20px;
  line-height: 28px;
  letter-spacing: -0.25px;
  text-align: center;
  color: #eceae1;
}

.cs-070-testimonials__card-media {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.cs-070-testimonials__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.cs-070-testimonials__card-overlay {
  position: absolute;
  inset: 0;
  width: 286px;
  height: 429px;
  background: linear-gradient(rgba(28, 38, 35, 0), rgba(28, 38, 35, 0.64));
  z-index: 1;
  pointer-events: none;
}

/* De play/pause-knop van de testimonialkaarten is vervallen: de <video>-elementen zijn
   vervangen door <img> (openstaand punt 6, context/11-openstaande-punten.md). De regels
   voor .cs-070-testimonials__play-pause / __play-state / __pause-state / __play-icon /
   __pause-icon zijn daarmee dood en verwijderd. Zie _clone/specs/ voor het origineel. */

.cs-070-testimonials__rating {
  display: flex;
  align-items: center;
  gap: 16px;
  width: 268px;
  height: 72px;
  padding: 12px 16px;
  border-radius: 24px;
  background-color: #f3f5ee;
  box-sizing: border-box;
}

.cs-070-testimonials__rating-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
}

.cs-070-testimonials__star {
  display: block;
  width: 20px;
  height: 20px;
  background-color: #1c2623;
  clip-path: polygon(
    50% 0%,
    61% 35%,
    98% 35%,
    68% 57%,
    79% 91%,
    50% 70%,
    21% 91%,
    32% 57%,
    2% 35%,
    39% 35%
  );
}

.cs-070-testimonials__rating-stack {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.cs-070-testimonials__rating-title {
  font-family: "BDO Grotesk", Arial, sans-serif;
  font-weight: 600;
  font-size: 14px;
  line-height: 16px;
  letter-spacing: 1.25px;
  color: #1c2623;
}

.cs-070-testimonials__rating-subtitle {
  font-family: "BDO Grotesk", Arial, sans-serif;
  font-weight: 400;
  font-size: 14px;
  line-height: 20px;
  color: #1c2623a3;
}

@media (max-width: 991px) {
  .cs-070-testimonials {
    padding: 80px 32px;
  }

  .cs-070-testimonials__title {
    font-size: 48px;
    line-height: 48px;
  }

  /* Source h6 token: 20/28 -> 18/24 at 991 -> 16/24 at 767.
     Card content padding follows gap-07 / gap-06: 32/24 -> 28/24 -> 24/20. */
  .cs-070-testimonials__quote {
    font-size: 18px;
    line-height: 24px;
  }

  .cs-070-testimonials__card-content {
    padding: 0 28px 24px;
  }
}

@media (max-width: 767px) {
  .cs-070-testimonials {
    padding: 64px 20px;
  }

  .cs-070-testimonials__title {
    font-size: 36px;
    line-height: 36px;
  }

  .cs-070-testimonials__grid {
    gap: 12px;
  }

  .cs-070-testimonials__card-content {
    padding: 0 24px 20px;
  }

  .cs-070-testimonials__quote {
    font-size: 16px;
    line-height: 24px;
  }

  .cs-070-testimonials__card {
    border-radius: 12px;
  }
}

@media (max-width: 479px) {
  .cs-070-testimonials {
    padding: 64px 20px;
  }

  /* Source at <=479: .testimonial-grid becomes a single centred column capped at the
     3-column width of the 4-column mobile grid, and the source's own slider script
     shows only the first card (the other two become swipe targets). Reproduced by
     keeping card 1 and hiding the rest, which is what the source paints. */
  .cs-070-testimonials__grid {
    grid-template-columns: 1fr;
    justify-items: center;
  }

  .cs-070-testimonials__card {
    max-width: calc(((min(1600px, 100vw) - 3 * 12px) / 4) * 3 + 2 * 12px);
  }

  .cs-070-testimonials__card--hidden-on-mobile {
    display: none;
  }
}
/* ==ECC-CLONE:END section:index--070-testimonials== */

/* ==ECC-CLONE:BEGIN section:index--080-conversation== */
/*
 * Conversation / Stat (index--080-conversation)
 * Own gradient background: accent-blue-wash (#bccad1) at the top edge dissolving to fully
 * transparent cream by the section's bottom -- the mirror image of index--070-testimonials'
 * cream-to-blue gradient (see that section's "IMPORTANT correction" note). Padding reuses the
 * same "padding-top-large" utility values already confirmed on index--030-intro (160px top /
 * 120px bottom).
 *
 * Resolved (not given exact px by the spec, documented here rather than invented silently):
 * - `__container` max-width is sized to exactly fit the 750px media + 32px grid gap + 375px
 *   stat-card (1157px) plus 32px side padding each way (1221px total). The spec calls this
 *   container a "narrow variant" without a px value; this is the tightest max-width that avoids
 *   compressing the two fixed-width grid children.
 * - `__header` max-width (674px) and `__content` gap (80px) reuse the exact values already
 *   established on index--030-intro's structurally identical header/content composition
 *   ("centered, narrow" header on a flex column content wrapper).
 * - The section header's h2/paragraph typography is not given explicit computed values in this
 *   spec's "Computed Styles" block, so it reuses the h3-scale heading (40px/44px, -1px) already
 *   confirmed for the same DOM role on index--030-intro/index--040-approach, and the
 *   `.text-medium` paragraph scale (16px/24px, ink-2 64%) the spec itself confirms for the
 *   stat-card's own paragraph.
 * - `__stat-card`'s vertical distribution (heading pinned top, paragraph pinned bottom via
 *   `justify-content: space-between`) is inferred from the given 375x425 card size against the
 *   given 311x72 / 311x120 child sizes; no background-color/padding-top/bottom was reported for
 *   this element, so none is applied here.
 */
.cs-080-conversation {
  position: relative;
  width: 100%;
  box-sizing: border-box;
  padding: 160px 0 120px;
  background: linear-gradient(180deg, #bccad1, rgba(236, 234, 225, 0));
  opacity: 0;
  transform: translate(0px, 8px);
  transition: opacity 0.5s var(--cl-ease-out), transform 0.5s var(--cl-ease-out);
}

.cs-080-conversation.cs-080-conversation--visible {
  opacity: 1;
  transform: none;
}

.cs-080-conversation__container {
  width: 100%;
  max-width: 1221px;
  margin: 0 auto;
  padding: 0 32px;
  box-sizing: border-box;
}

.cs-080-conversation__content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 80px;
  width: 100%;
}

.cs-080-conversation__header {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  width: 100%;
  max-width: 674px;
  margin: 0 auto;
  text-align: center;
}

.cs-080-conversation__heading {
  margin: 0;
  font-family: "Libre Caslon Condensed", "Times New Roman", sans-serif;
  font-weight: 400;
  font-size: 56px;
  line-height: 56px;
  letter-spacing: -1px;
  color: #1c2623;
  text-align: center;
}

.cs-080-conversation__text {
  margin: 0;
  font-family: "BDO Grotesk", Arial, sans-serif;
  font-weight: 400;
  font-size: 16px;
  line-height: 24px;
  color: rgba(28, 38, 35, 0.64);
  text-align: center;
}

.cs-080-conversation__grid {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  justify-content: center;
  gap: 32px;
  width: 100%;
}

.cs-080-conversation__media {
  position: relative;
  width: 750px;
  height: 425px;
  flex-shrink: 0;
  border-radius: 24px;
  overflow: hidden;
}

.cs-080-conversation__photo {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.cs-080-conversation__stat-card {
  width: 375px;
  height: 425px;
  flex-shrink: 0;
  box-sizing: border-box;
  /* Source .stat-card is a dark rounded surface, not bare text on the gradient. */
  background-color: #232f2b;
  border-radius: 24px;
  color: rgba(236, 234, 225, 0.64);
  padding: 32px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.cs-080-conversation__stat-heading {
  margin: 0;
  width: 311px;
  font-family: "Libre Caslon Condensed", "Times New Roman", sans-serif;
  font-weight: 400;
  font-size: 68px;
  line-height: 72px;
  letter-spacing: -1px;
  color: #bccad1;
}

.cs-080-conversation__stat-body {
  margin: 0;
  width: 311px;
  font-family: "BDO Grotesk", Arial, sans-serif;
  font-weight: 400;
  font-size: 16px;
  line-height: 24px;
  color: rgba(236, 234, 225, 0.64);
}

.cs-080-conversation__buttons {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
}

/* -- CTA: reuses .button-primary.animated exactly as specced on index--020-hero -- */

.cs-080-conversation__cta {
  white-space: nowrap;
  position: relative;
  box-sizing: border-box;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 12px;
  width: 155px;
  height: 56px;
  padding: 0 60px 0 20px;
  border-radius: 20px;
  overflow: hidden;
  background-color: #f3f5ee;
  color: #1c2623;
  font-family: "BDO Grotesk", Arial, sans-serif;
  font-weight: 600;
  font-size: 16px;
  line-height: 24px;
  text-decoration: none;
  transition: transform 0.5s, color 0.5s, background-color 0.5s;
}

.cs-080-conversation__cta:hover {
  background-color: #1c2623;
  color: #eceae1;
}

.cs-080-conversation__cta-rail {
  position: absolute;
  right: 8px;
  top: 0;
  width: 99px;
  height: 56px;
  display: flex;
  justify-content: flex-end;
  align-items: center;
}

.cs-080-conversation__cta-circle {
  width: 40px;
  height: 40px;
  border-radius: 16px;
  background-color: #e3f21a;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* -- responsive: two-column grid collapses to a stacked column -- */

@media (max-width: 991px) {
  .cs-080-conversation {
    padding: 96px 0 80px;
  }

  .cs-080-conversation__header {
    max-width: 100%;
  }

  .cs-080-conversation__heading {
    font-size: 48px;
    line-height: 48px;
    letter-spacing: -0.5px;
  }

  .cs-080-conversation__grid {
    flex-direction: column;
    align-items: center;
    gap: 32px;
  }

  .cs-080-conversation__media {
    width: 100%;
    height: auto;
    aspect-ratio: 750 / 425;
  }

  .cs-080-conversation__stat-card {
    width: 100%;
    height: auto;
    padding: 0;
    gap: 24px;
  }

  .cs-080-conversation__stat-heading,
  .cs-080-conversation__stat-body {
    width: 100%;
  }
}

@media (max-width: 767px) {
  .cs-080-conversation {
    padding: 80px 0 64px;
  }

  .cs-080-conversation__heading {
    font-size: 36px;
    line-height: 36px;
    letter-spacing: -0.25px;
  }
}

@media (max-width: 479px) {
  .cs-080-conversation {
    padding: 80px 0 64px;
  }
}
/* ==ECC-CLONE:END section:index--080-conversation== */

/* ==ECC-CLONE:BEGIN section:index--090-faq== */
/*
 * FAQ accordion (index--090-faq). Transparent surface, sits on the shared cream body
 * canvas (#eceae1) -- no background is painted here so the page's own surface shows
 * through. Values below are hardcoded literals mirrored from foundation/tokens.css per
 * this section's token rule; the only var() references permitted are --cl-duration-fast
 * and --cl-ease-out.
 */
.cs-090-faq {
  position: relative;
  width: 100%;
  padding: 160px 0 120px;
  box-sizing: border-box;
  opacity: 0;
  transform: translate(0, 8px);
  transition: opacity var(--cl-duration-fast) var(--cl-ease-out), transform var(--cl-duration-fast) var(--cl-ease-out);
}

.cs-090-faq.cs-090-faq--visible {
  opacity: 1;
  transform: none;
}

.cs-090-faq__container {
  box-sizing: border-box;
  width: 100%;
  max-width: 1600px;
  margin: 0 auto;
  padding: 0 32px;
}

.cs-090-faq__content {
  box-sizing: border-box;
  width: 100%;
  max-width: 712px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: stretch;
}

.cs-090-faq__header {
  text-align: center;
  margin-bottom: 64px;
}

.cs-090-faq__heading {
  margin: 0;
  display: flex;
  flex-direction: column;
  font-family: "Libre Caslon Condensed", "Times New Roman", sans-serif;
  font-weight: 400;
  color: #1c2623;
}

.cs-090-faq__heading-line {
  display: block;
}

.cs-090-faq__heading-line--accent {
  font-style: italic;
  font-size: 56px;
  line-height: 56px;
  letter-spacing: -1px;
}

.cs-090-faq__heading-line--main {
  font-size: 56px;
  line-height: 56px;
  letter-spacing: -1px;
}

.cs-090-faq__list {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.cs-090-faq__item {
  box-sizing: border-box;
  width: 100%;
  border-top: 0 none;
  border-radius: 24px;
  background-color: #dedcd6;
  padding: 24px;
}

.cs-090-faq__item-top {
  width: 100%;
  min-height: 40px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  cursor: pointer;
}

.cs-090-faq__item-top h3 {
  margin: 0;
  min-width: 0;
  flex: 1 1 auto;
  font-family: "BDO Grotesk", Arial, sans-serif;
  font-weight: 700;
  font-size: 18px;
  line-height: 28px;
  color: #1c2623;
}

.cs-090-faq__toggle {
  display: block;
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
}

.cs-090-faq__icon-circle {
  position: relative;
  display: block;
  width: 40px;
  height: 40px;
  border-radius: 200px;
  background-color: rgba(28, 38, 35, 0.08);
  color: #1c2623;
}

.cs-090-faq__icon {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 16px;
  height: 16px;
  transform: translate(-50%, -50%);
  display: block;
  transition: opacity var(--cl-duration-fast) var(--cl-ease-out);
}

.cs-090-faq__icon--plus {
  opacity: 1;
}

.cs-090-faq__icon--minus {
  opacity: 0;
}

.cs-090-faq__item--open .cs-090-faq__icon--plus {
  opacity: 0;
}

.cs-090-faq__item--open .cs-090-faq__icon--minus {
  opacity: 1;
}

.cs-090-faq__item-bottom {
  height: 0;
  opacity: 0;
  overflow: hidden;
  transition: height 0.4s ease, opacity 0.4s ease;
}

.cs-090-faq__item-text-wrapper {
  padding-top: 16px;
}

.cs-090-faq__item-text-wrapper p {
  margin: 0;
  font-family: "BDO Grotesk", Arial, sans-serif;
  font-weight: 400;
  font-size: 16px;
  line-height: 24px;
  color: rgba(28, 38, 35, 0.64);
}

@media (max-width: 991px) {
  .cs-090-faq {
    padding: 96px 0 80px;
  }

  .cs-090-faq__header {
    margin-bottom: 48px;
  }

  .cs-090-faq__heading-line--accent {
    font-size: 48px;
    line-height: 48px;
    letter-spacing: -1px;
  }

  .cs-090-faq__heading-line--main {
    font-size: 48px;
    line-height: 48px;
    letter-spacing: -1px;
  }
}

@media (max-width: 767px) {
  .cs-090-faq {
    padding: 80px 0 64px;
  }

  .cs-090-faq__heading-line--accent,
  .cs-090-faq__heading-line--main {
    font-size: 36px;
    line-height: 36px;
    letter-spacing: -0.25px;
  }
}

@media (max-width: 479px) {
  .cs-090-faq {
    padding: 80px 0 64px;
  }

  .cs-090-faq__container {
    padding: 0 20px;
  }

  .cs-090-faq__header {
    margin-bottom: 32px;
  }

  .cs-090-faq__heading-line--accent,
  .cs-090-faq__heading-line--main {
    font-size: 36px;
    line-height: 36px;
    letter-spacing: -0.25px;
  }

  .cs-090-faq__item {
    padding: 20px;
  }
}
/* ==ECC-CLONE:END section:index--090-faq== */

/* ==ECC-CLONE:BEGIN section:index--100-cta== */
/*
 * Closing CTA (index--100-cta)
 * Own gradient background (cream/surface-1 fading to accent-blue-wash, top to bottom).
 * Values below are hardcoded literals mirrored from _clone/foundation/tokens.css per this
 * section's token rule -- only --cl-duration-fast / --cl-ease-out are referenced via var().
 */
.cs-100-cta {
  position: relative;
  width: 100%;
  box-sizing: border-box;
  padding: 200px 0;
  background: linear-gradient(180deg, #eceae1, #bccad1);
  opacity: 0;
  transform: translate(0px, 8px);
  transition: opacity 0.5s var(--cl-ease-out), transform 0.5s var(--cl-ease-out);
}

.cs-100-cta.cs-100-cta--visible {
  opacity: 1;
  transform: none;
}

.cs-100-cta__container {
  box-sizing: border-box;
  width: 100%;
  max-width: 1440px;
  margin: 0 auto;
  padding: 0 32px;
}

.cs-100-cta__content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 32px;
  width: 100%;
}

/* Narrow, centered text column -- the heading wraps to two lines at this width even at
   the 1376px-wide content row, matching 1440.png/768.png/390.png (see build notes). */
.cs-100-cta__text {
  display: flex;
  justify-content: center;
  width: 100%;
  max-width: 600px;
  margin: 0 auto;
}

.cs-100-cta__heading {
  margin: 0;
  font-family: "Libre Caslon Condensed", "Times New Roman", sans-serif;
  font-weight: 400;
  font-size: 56px;
  line-height: 56px;
  letter-spacing: -1px;
  color: #1c2623;
  text-align: center;
}

.cs-100-cta__heading em {
  font-style: italic;
}

.cs-100-cta__buttons {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
}

.cs-100-cta__btn-primary {
  position: relative;
  white-space: nowrap;
  box-sizing: border-box;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 12px;
  width: 185px;
  height: 56px;
  padding: 0 60px 0 20px;
  border-radius: 20px;
  overflow: hidden;
  background-color: #f3f5ee;
  color: #1c2623;
  font-family: "BDO Grotesk", Arial, sans-serif;
  font-weight: 600;
  font-size: 16px;
  line-height: 24px;
  text-decoration: none;
  transition: background-color 0.5s, color 0.5s;
}

.cs-100-cta__btn-primary:hover {
  background-color: #1c2623;
  color: #eceae1;
}

.cs-100-cta__btn-rail {
  position: absolute;
  right: 8px;
  top: 0;
  width: 99px;
  height: 56px;
  display: flex;
  justify-content: flex-end;
  align-items: center;
}

.cs-100-cta__btn-circle {
  width: 40px;
  height: 40px;
  border-radius: 16px;
  background-color: #e3f21a;
  display: flex;
  align-items: center;
  justify-content: center;
}

.cs-100-cta__btn-secondary {
  box-sizing: border-box;
  white-space: nowrap;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  width: 113px;
  height: 56px;
  padding: 0 20px;
  border-radius: 20px;
  background-color: rgba(28, 38, 35, 0.08);
  color: #1c2623;
  font-family: "BDO Grotesk", Arial, sans-serif;
  font-weight: 600;
  font-size: 16px;
  line-height: 24px;
  text-decoration: none;
  transition: background-color 0.5s, color 0.5s;
}

.cs-100-cta__btn-secondary:hover {
  background-color: #1c2623;
  color: #eceae1;
}

/* Buttons stay side-by-side at every captured breakpoint (1440/768/390.png) -- only the
   section-padding tier steps down; heading and buttons keep their desktop pixel sizes. */
@media (max-width: 991px) {
  .cs-100-cta {
    padding: 160px 0;
  }

  .cs-100-cta__heading {
    font-size: 48px;
    line-height: 48px;
  }
}

@media (max-width: 767px) {
  .cs-100-cta {
    padding: 128px 0;
  }

  .cs-100-cta__heading {
    font-size: 36px;
    line-height: 36px;
  }
}

@media (max-width: 479px) {
  .cs-100-cta {
    padding: 128px 0;
  }
}
/* ==ECC-CLONE:END section:index--100-cta== */

/* ==ECC-CLONE:BEGIN section:index--110-footer-promo== */
/* index--110-footer-promo -- footer left column, autoplay video promo with play/pause control */

.cs-110-footer-promo {
  position: relative;
  width: 100%;
  height: 640px;
  border-radius: 16px;
  padding: 24px;
  box-sizing: border-box;
  overflow: hidden;
}

.cs-110-footer-promo__media {
  position: absolute;
  inset: 0;
}

.cs-110-footer-promo__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.cs-110-footer-promo__overlay {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 50%;
  background: linear-gradient(rgba(28, 38, 35, 0), rgba(28, 38, 35, 0.64));
  z-index: 1;
  pointer-events: none;
}

/* Idem voor de footer-promo: <video> -> <img>, dus de play/pause-regels zijn verwijderd. */

.cs-110-footer-promo__content {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-start;
  padding: 24px;
  box-sizing: border-box;
  pointer-events: none;
}

.cs-110-footer-promo__logo {
  /* Real mark is the 108 wordmark, viewBox 0 0 69 28; source .footer-logo is height-driven
     (height: 32px, inline-flex) so the width follows the aspect ratio. */
  width: auto;
  height: 32px;
  display: inline-flex;
  align-self: flex-start;
  color: #eceae1;
}

.cs-110-footer-promo__logo-svg {
  width: auto;
  height: 100%;
  display: block;
  fill: currentColor;
}

.cs-110-footer-promo__logo-text {
  font-family: "BDO Grotesk", Arial, sans-serif;
  font-weight: 700;
  font-size: 13px;
}

.cs-110-footer-promo__bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 384px;
  height: 64px;
  box-sizing: border-box;
  pointer-events: auto;
}

.cs-110-footer-promo__heading {
  margin: 0;
  flex: 1 1 auto;
  min-width: 0;
  font-family: "BDO Grotesk", Arial, sans-serif;
  font-weight: 600;
  font-size: 28px;
  line-height: 32px;
  letter-spacing: -0.25px;
  color: #eceae1;
}

.cs-110-footer-promo__heading strong {
  font-weight: inherit;
}

.cs-110-footer-promo__link {
  white-space: nowrap;
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 40px;
  padding: 0 16px;
  border-radius: 20px;
  background-color: rgba(236, 234, 225, 0.08);
  color: #eceae1;
  font-family: "BDO Grotesk", Arial, sans-serif;
  font-weight: 600;
  font-size: 16px;
  line-height: 24px;
  text-decoration: none;
  box-sizing: border-box;
}

@media (max-width: 991px) {
  .cs-110-footer-promo {
    width: 100%;
    height: 400px;
    aspect-ratio: auto;
  }

  .cs-110-footer-promo__bottom {
    width: auto;
    height: auto;
    flex-wrap: wrap;
    justify-content: flex-start;
    gap: 16px;
  }
}

@media (max-width: 767px) {
  .cs-110-footer-promo {
    height: 400px;
    border-radius: 12px;
    padding: 20px;
  }
}

@media (max-width: 479px) {
  .cs-110-footer-promo {
    height: 280px;
  }

  .cs-110-footer-promo__content {
    padding: 20px;
  }
}
/* ==ECC-CLONE:END section:index--110-footer-promo== */

/* ==ECC-CLONE:BEGIN section:index--111-footer-links== */
/* index--111-footer-links -- footer link directory (4 columns) + newsletter form
   (was .footer-top; right-column top half of the footer card, beside .footer-promo) */

.cs-111-footer-links {
  display: grid;
  grid-template-columns: 416fr 416fr;
  align-items: start;
  /* Source .footer-top at 1440: grid of two 416px columns with a 16px gap (x=528 w=848). */
  gap: 16px;
}

/* -- link columns -- */

.cs-111-footer-links__columns {
  width: 100%;
  min-width: 0;
  height: 424px;
  display: grid;
  grid-template-columns: 200px 200px;
  grid-template-rows: 252px 140px;
  column-gap: 16px;
  row-gap: 32px;
}

.cs-111-footer-links__group {
  display: flex;
  flex-direction: column;
  gap: 16px;
  width: 200px;
}

.cs-111-footer-links__group--pages,
.cs-111-footer-links__group--company {
  height: 252px;
}

.cs-111-footer-links__group--contact,
.cs-111-footer-links__group--extra {
  height: 140px;
}

.cs-111-footer-links__caption {
  font-family: "BDO Grotesk", Arial, sans-serif;
  font-weight: 600;
  font-size: 12px;
  line-height: 12px;
  letter-spacing: 1.25px;
  text-transform: uppercase;
  color: rgba(28, 38, 35, 0.64);
}

.cs-111-footer-links__list {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.cs-111-footer-links__list a {
  font-family: "BDO Grotesk", Arial, sans-serif;
  font-weight: 400;
  font-size: 16px;
  line-height: 24px;
  color: #1c2623;
  text-decoration: none;
  transition: color 0.5s;
}

.cs-111-footer-links__list a:hover {
  color: #1c262352;
}

/* -- newsletter -- */

.cs-111-footer-links__newsletter {
  width: 100%;
  min-width: 0;
  height: 424px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.cs-111-footer-links__form-block {
  width: 416px;
}

.cs-111-footer-links__field {
  position: relative;
  width: 416px;
}

.cs-111-footer-links__input {
  display: block;
  box-sizing: border-box;
  width: 416px;
  height: 56px;
  padding: 16px;
  border-radius: 16px;
  border: 1px solid transparent;
  background-color: #dedcd6;
  color: #1c2623;
  font-family: "BDO Grotesk", Arial, sans-serif;
  font-weight: 400;
  font-size: 16px;
  line-height: 24px;
  transition: border-color 0.5s;
}

.cs-111-footer-links__input::placeholder {
  color: #1c2623a3;
}

.cs-111-footer-links__input:hover {
  border-color: #1c262314;
}

.cs-111-footer-links__submit-wrap {
  position: absolute;
  top: 0;
  left: 360px;
  width: 56px;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #1c2623;
}

.cs-111-footer-links__icon {
  pointer-events: none;
  transition: color 0.5s;
}

.cs-111-footer-links__submit {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  opacity: 0;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
}

.cs-111-footer-links__submit-wrap:hover,
.cs-111-footer-links__submit-wrap:hover .cs-111-footer-links__icon {
  color: #1c262352;
}

.cs-111-footer-links__success-message,
.cs-111-footer-links__error-message {
  font-family: "BDO Grotesk", Arial, sans-serif;
  font-weight: 400;
  font-size: 16px;
  line-height: 24px;
  color: #1c2623;
}

.cs-111-footer-links__success-message[hidden],
.cs-111-footer-links__error-message[hidden] {
  display: none;
}

.cs-111-footer-links__newsletter-copy {
  margin: 0;
  width: 416px;
  height: 40px;
  font-family: "BDO Grotesk", Arial, sans-serif;
  font-weight: 400;
  font-size: 14px;
  line-height: 20px;
  color: #1c2623a3;
}

/* -- responsive: 4-column directory + newsletter row collapses to a single stacked
   column, newsletter moving below the link groups (per 768.png / 390.png totals) -- */

@media (max-width: 991px) {
  .cs-111-footer-links {
    grid-template-columns: 1fr;
    gap: 48px;
  }

  /* Source at 768: .footer-links keeps two 328px columns inside a single-column
     .footer-top. */
  .cs-111-footer-links__columns {
    width: 100%;
    height: auto;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: none;
    row-gap: 32px;
  }

  .cs-111-footer-links__group,
  .cs-111-footer-links__group--pages,
  .cs-111-footer-links__group--company,
  .cs-111-footer-links__group--contact,
  .cs-111-footer-links__group--extra {
    width: 100%;
    height: auto;
  }

  .cs-111-footer-links__newsletter,
  .cs-111-footer-links__form-block,
  .cs-111-footer-links__field,
  .cs-111-footer-links__input,
  .cs-111-footer-links__newsletter-copy {
    width: 100%;
  }

  .cs-111-footer-links__newsletter {
    height: auto;
  }

  .cs-111-footer-links__submit-wrap {
    left: auto;
    right: 0;
  }
}
@media (max-width: 767px) {
  .cs-111-footer-links {
    gap: 40px;
  }
}

/* ==ECC-CLONE:END section:index--111-footer-links== */

/* ==ECC-CLONE:BEGIN section:index--112-footer-legal== */
/*
 * Outer <footer> shell. Owned by this fragment per the spec's coordination note (case a):
 * this is the last/simplest of the three footer fragments, so it renders the literal
 * <footer> element, the .container band and the surface-2 card, and owns the section-level
 * reveal-in for the whole footer. index--110-footer-promo and index--111-footer-links slot
 * into .cs-112-footer-legal__promo-slot / .cs-112-footer-legal__links-slot respectively --
 * flagged to the assembly step rather than guessed, per the spec.
 *
 * Source computed width/height on .footer (1440x736) and .footer-content (1376x672) are the
 * captured box at the 1440 desktop viewport, not literal fixed boxes: this shell is a
 * full-bleed section (width driven by its parent) and the card's height is content-driven.
 * Reproduced here as fluid (100%) + auto so the documented tablet/mobile stacking (verified
 * against the 768/390 footer screenshots) does not overflow a hardcoded box.
 */
.cs-112-footer-legal {
  opacity: 0;
  transform: translate(0px, 8px);
  transition: opacity 0.5s var(--cl-ease-out), transform 0.5s var(--cl-ease-out);
}

.cs-112-footer-legal.cs-112-footer-legal--visible {
  opacity: 1;
  transform: none;
}

.cs-112-footer-legal__shell {
  position: relative;
  display: block;
  width: 100%;
  padding: 32px 0;
  background-color: #bccad1;
}

.cs-112-footer-legal__band-container {
  width: 100%;
  max-width: 1440px;
  margin: 0 auto;
  padding: 0 32px;
}

.cs-112-footer-legal__card {
  width: 100%;
  padding: 16px;
  border-radius: 24px;
  background-color: #f3f5ee;
  display: grid;
  /* Measured on the source at 1440: .footer-content is `grid-template-columns: 432px 864px`
     with a 48px gap inside 16px padding (promo x=48 w=432, main x=528 w=864). */
  grid-template-columns: 432fr 864fr;
  gap: 48px;
}

.cs-112-footer-legal__promo-slot,
.cs-112-footer-legal__links-slot {
  min-width: 0;
}

.cs-112-footer-legal__main {
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  box-sizing: border-box;
  /* Measured on the source at 1440: .footer-main is padding 16px 16px 16px 0, gap 80px,
     justify-content space-between (link grid pinned top, legal row pinned bottom). */
  padding: 16px 16px 16px 0;
  gap: 80px;
}

.cs-112-footer-legal__bottom {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
}

.cs-112-footer-legal__legal-links {
  display: flex;
  align-items: center;
  gap: 16px;
}

.cs-112-footer-legal__small-link {
  font-family: "BDO Grotesk", Arial, sans-serif;
  font-weight: 400;
  white-space: nowrap;
  font-size: 14px;
  line-height: 20px;
  color: rgba(28, 38, 35, 0.32);
  text-decoration: none;
  transition: color 0.5s;
}

.cs-112-footer-legal__small-link:hover {
  color: #1c2623a3;
}

.cs-112-footer-legal__meta {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 32px;
}

.cs-112-footer-legal__copyright {
  font-family: "BDO Grotesk", Arial, sans-serif;
  font-weight: 400;
  font-size: 14px;
  line-height: 20px;
  color: rgba(28, 38, 35, 0.32);
  white-space: nowrap;
}

.cs-112-footer-legal__social {
  display: flex;
  align-items: center;
  gap: 20px;
}

.cs-112-footer-legal__social-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  color: rgba(28, 38, 35, 0.32);
  transition: color 0.5s;
}

.cs-112-footer-legal__social-icon:hover {
  color: #1c2623a3;
}

.cs-112-footer-legal__social-icon svg {
  display: block;
  width: 100%;
  height: 100%;
}

/* Tablet: card stacks to a single column (promo band above the main column), confirmed
   against the 768px footer screenshot -- the legal/meta row itself stays single-row at this
   width in that screenshot, so .cs-112-footer-legal__bottom is untouched here. */
@media (max-width: 991px) {
  .cs-112-footer-legal__shell {
    padding: 24px 0;
  }

  .cs-112-footer-legal__band-container {
    padding: 0 24px;
  }

  .cs-112-footer-legal__card {
    grid-template-columns: 1fr;
    padding: 12px;
    gap: 24px;
  }

  .cs-112-footer-legal__main {
    padding: 12px;
    gap: 64px;
  }
}

/* Mobile: legal row and copyright/social row stack, confirmed against the 390px footer
   screenshot. The legal-links row itself wraps to two short rows of two links each purely
   from available width (no fixed 256px box carried over), matching that screenshot's
   Legal/Style Guide, Licenses/Help pairing. Stack gaps (24px / 16px) are estimated from that
   screenshot's spacing since the spec gives no exact stacked-state numbers. */
/* Source at 570: footer padding 16px 0; card x=16 w=538 radius 16 padding 12 gap 20;
   promo 514x400 radius 12 padding 20; main padding 12 gap 48. */
@media (max-width: 767px) {
  .cs-112-footer-legal__shell {
    padding: 16px 0;
  }

  .cs-112-footer-legal__band-container {
    padding: 0 16px;
  }

  .cs-112-footer-legal__card {
    border-radius: 16px;
    padding: 12px;
    gap: 20px;
  }

  .cs-112-footer-legal__main {
    padding: 12px;
    gap: 48px;
  }
}

@media (max-width: 479px) {
  .cs-112-footer-legal__main {
    padding: 4px;
  }

  .cs-112-footer-legal__bottom {
    flex-direction: column;
    align-items: flex-start;
    gap: 24px;
  }

  .cs-112-footer-legal__legal-links {
    flex-wrap: wrap;
    row-gap: 12px;
  }

  .cs-112-footer-legal__meta {
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 16px;
  }
}
/* ==ECC-CLONE:END section:index--112-footer-legal== */


/* ==ECC-CLONE:BEGIN section:jospronk-additions== */
/*
 * Toevoegingen voor JosPronk.com bovenop de People Work-kloon.
 * 1. Ankeroffset voor de zeven navigatie-ankers (de header is position:fixed).
 * 2. .todo -- zichtbare markering van alles wat Jos nog moet aanleveren.
 * 3. Tekst-wordmarks daar waar nog geen logobestand is.
 * 4. index--075-stories -- nieuwe sectie, gebouwd op de bestaande typografie en kleuren.
 */

/* 1 -- ankeroffset. Header is 72px (>=992), 68px (<=991), 60px (<=479). */
#home,
#about-jos,
#work,
#stories,
#conversations,
#people-we-trust,
#contact {
  scroll-margin-top: 96px;
}

@media (max-width: 991px) {
  #home,
  #about-jos,
  #work,
  #stories,
  #conversations,
  #people-we-trust,
  #contact {
    scroll-margin-top: 88px;
  }
}

@media (max-width: 479px) {
  #home,
  #about-jos,
  #work,
  #stories,
  #conversations,
  #people-we-trust,
  #contact {
    scroll-margin-top: 80px;
  }
}

/* 2 -- placeholders. Bewust opvallend: deze pagina is nog niet toonbaar aan derden.
   Alles met .todo of [data-todo] moet nog van Jos komen. */
.todo,
a[data-todo],
img[data-todo],
[data-todo].cs-020-hero__teaser-logo,
[data-todo].cs-110-footer-promo__wordmark {
  outline: 1px dashed #c8d64b;
  outline-offset: 2px;
  border-radius: 4px;
}

.todo {
  display: inline-block;
  padding: 0 4px;
  font-family: "BDO Grotesk", Arial, sans-serif;
  font-weight: 500;
  font-size: 0.75em;
  line-height: 1.6;
  letter-spacing: 0;
  text-transform: none;
  color: #6c7a35;
  background-color: rgba(200, 214, 75, 0.16);
  vertical-align: middle;
}

/* 3 -- tekst-wordmarks zolang er geen logobestand is. */
.cs-010-header__wordmark {
  display: block;
  font-family: "Libre Caslon Condensed", "Times New Roman", serif;
  font-weight: 400;
  font-size: 24px;
  line-height: 27px;
  letter-spacing: -0.5px;
  white-space: nowrap;
  color: currentColor;
}

.cs-020-hero__teaser-wordmark {
  display: flex;
  align-items: center;
  font-family: "Libre Caslon Condensed", "Times New Roman", serif;
  font-weight: 400;
  font-size: 22px;
  line-height: 32px;
  letter-spacing: -0.5px;
  white-space: nowrap;
  color: inherit;
}

.cs-030-intro__logo-wordmark {
  font-family: "Libre Caslon Condensed", "Times New Roman", serif;
  font-weight: 400;
  font-size: 28px;
  line-height: 32px;
  letter-spacing: -0.5px;
  text-align: center;
  color: inherit;
}

.cs-110-footer-promo__wordmark {
  display: inline-block;
  font-family: "Libre Caslon Condensed", "Times New Roman", serif;
  font-weight: 400;
  font-size: 22px;
  line-height: 28px;
  letter-spacing: -0.5px;
  color: #eceae1;
}

/* Subregel onder de coaching-CTA. Let op: .cs-100-cta__text is `display: flex` zonder
   richting, dus met twee kinderen werden kop en tekst naast elkaar gezet en werd de kop
   in een kolom van 300px geperst. Vandaar de expliciete kolomstand hieronder. */
.cs-100-cta__text {
  flex-direction: column;
  align-items: center;
  gap: 16px;
  max-width: 720px;
}

.cs-100-cta__sub {
  margin: 0;
  text-align: center;
  max-width: 100%;
  font-family: "BDO Grotesk", Arial, sans-serif;
  font-weight: 400;
  font-size: 18px;
  line-height: 28px;
  letter-spacing: 0;
  color: rgba(28, 38, 35, 0.64);
}

/* 4 -- index--075-stories. Zelfde ritme als 070: 120px verticaal, 1200px container,
   Libre Caslon-kop, drie kaarten op het crème canvas. */
.cs-075-stories {
  position: relative;
  display: flex;
  justify-content: center;
  background-color: #eceae1;
  padding: 120px 32px;
}

.cs-075-stories__container {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
}

.cs-075-stories__content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 64px;
}

.cs-075-stories__header {
  text-align: center;
  max-width: 720px;
}

.cs-075-stories__title {
  margin: 0;
  font-family: "Libre Caslon Condensed", "Times New Roman", serif;
  font-weight: 400;
  font-size: 56px;
  line-height: 56px;
  letter-spacing: -1px;
  color: #1c2623;
}

.cs-075-stories__title em {
  font-style: italic;
}

.cs-075-stories__intro {
  margin: 16px 0 0 0;
  font-family: "BDO Grotesk", Arial, sans-serif;
  font-weight: 400;
  font-size: 18px;
  line-height: 28px;
  color: rgba(28, 38, 35, 0.64);
}

.cs-075-stories__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  width: 100%;
}

.cs-075-stories__card {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 32px;
  min-width: 0;
  min-height: 320px;
  box-sizing: border-box;
  padding: 32px;
  border-radius: 24px;
  background-color: rgb(35, 47, 43);
  color: #eceae1;
}

.cs-075-stories__card-title {
  margin: 0;
  font-family: "Libre Caslon Condensed", "Times New Roman", serif;
  font-weight: 400;
  font-size: 32px;
  line-height: 36px;
  letter-spacing: -0.5px;
  color: #eceae1;
}

.cs-075-stories__card-text {
  margin: 16px 0 0 0;
  font-family: "BDO Grotesk", Arial, sans-serif;
  font-weight: 400;
  font-size: 16px;
  line-height: 24px;
  color: rgba(236, 234, 225, 0.64);
}

.cs-075-stories__card-foot {
  font-family: "BDO Grotesk", Arial, sans-serif;
  font-size: 12px;
  line-height: 12px;
  letter-spacing: 1.25px;
  text-transform: uppercase;
}

@media (max-width: 991px) {
  .cs-075-stories {
    padding: 80px 24px;
  }

  .cs-075-stories__title {
    font-size: 48px;
    line-height: 48px;
  }

  .cs-075-stories__grid {
    grid-template-columns: 1fr;
  }

  .cs-075-stories__card {
    min-height: 0;
  }
}

@media (max-width: 479px) {
  .cs-075-stories__title {
    font-size: 36px;
    line-height: 40px;
  }

  .cs-075-stories__card {
    padding: 24px;
  }
}

/* 5 -- LAYOUTCORRECTIES voor Nederlandse labels.
 * De template-knoppen hebben vaste breedtes die op korte Engelse labels waren gemaakt
 * ("Talk to us" = 155px, "Get Template" = 113px). De Nederlandse labels zijn twee tot drie
 * keer zo lang; met `overflow: hidden` werd de tekst letterlijk afgekapt. Overal
 * `width: auto` + `min-width` op de oorspronkelijke maat, zodat het ontwerp bij korte
 * labels identiek blijft en bij lange meegroeit. De pijl-rails zijn `position: absolute;
 * right: 8px`, dus die blijven vanzelf rechts staan.
 */
.cs-020-hero__btn-primary,
.cs-080-conversation__cta {
  width: auto;
  min-width: 155px;
}

.cs-100-cta__btn-primary {
  width: auto;
  min-width: 185px;
}

.cs-020-hero__btn-secondary {
  width: auto;
  min-width: 142px;
}

.cs-100-cta__btn-secondary {
  width: auto;
  min-width: 113px;
}

.cs-010-header__cta {
  width: auto;
  min-width: 124px;
}

.cs-060-proof-carousel__slide-link {
  width: auto;
  min-width: 111px;
  padding: 0 20px;
}

/* De header-pill had drie vaste kolommen (258.7px 510.6px 258.7px = 1028px) terwijl de pill
   zelf `margin: 0 150px` heeft en dus meebeweegt. Bij een venster smaller dan ~1330px liep
   dat al in de template over; met zeven navigatie-items in plaats van drie is dat structureel.
   Nu: buitenkolommen op hun natuurlijke breedte, middenkolom krimpt mee. */
.cs-010-header__pill {
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 16px;
}

.cs-010-header__center {
  gap: 18px;
  min-width: 0;
}

/* Onder 1200px is er geen ruimte meer voor zeven items naast logo en CTA; dan valt de
   pagina terug op het hamburgermenu, dat al alle items bevat. */
@media (max-width: 1199px) {
  .cs-010-header__center {
    display: none;
  }

  .cs-010-header__menu-btn {
    display: flex;
    align-items: center;
    justify-content: center;
  }
}

/* Het logo is nu een tekstwordmark in plaats van een SVG van 140x24. */
.cs-010-header__logo {
  width: auto;
  height: auto;
}

.cs-010-header__wordmark {
  font-size: 20px;
  line-height: 24px;
}

/* Idem voor de teaser-wordmark in de hero: was een SVG-slot van 133x32. */
.cs-020-hero__teaser-logo.cs-020-hero__teaser-wordmark {
  width: auto;
  height: 32px;
  font-size: 20px;
}

/* 6 -- OVERFLOWCORRECTIES (gemeten in headless Chrome op 500 px).
 * a) De knoprijen konden niet afbreken. Met korte Engelse labels viel dat nooit op; met
 *    "Mijn coachingtraject aanvragen" ernaast wel. Nu breken ze netjes af.
 * b) De footer-balk had alleen op <=479px een kolomstand. Tussen 480 en 767px bleef het een
 *    rij die buiten de pagina liep -- dat deed de originele template ook al (gemeten:
 *    pagina 718px breed in een venster van 500px). Opgelost voor de hele band.
 */
.cs-020-hero__buttons,
.cs-100-cta__buttons {
  flex-wrap: wrap;
}

.cs-112-footer-legal__meta {
  flex-wrap: wrap;
}

@media (max-width: 991px) {
  .cs-112-footer-legal__bottom,
  .cs-112-footer-legal__meta {
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 16px;
  }

  .cs-112-footer-legal__copyright {
    white-space: normal;
  }
}

/* 7 -- De marquee sprong elke ronde 8px terug: de animatie loopt naar -50% van de track,
 * maar de afstand tot het duplicaat is een halve gap (8px) meer. Ook dit zat al in de
 * template. */
@keyframes cs-030-intro-marquee-scroll {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(calc(-50% - 8px));
  }
}

/* 8 -- HERO: breedte begrenzen en kolommen laten krimpen.
 * De twee kolommen (.cs-020-hero__media en .cs-020-hero__header) waren allebei exact 708px
 * met `flex-shrink: 0`, samen 1416px. Twee gevolgen:
 *   - onder ~1432px liep de hero buiten de pagina (gemeten: pagina 1424px breed in een
 *     venster van 1000px, dus horizontale scrollbalk);
 *   - boven 1600px legde `justify-content: space-between` alle extra ruimte tússen de
 *     kolommen, waardoor foto en tekst steeds verder uit elkaar dreven.
 * De frame krijgt nu de paginabreedte uit de grid-token (1600px) en de kolommen mogen
 * meekrimpen tot hun oorspronkelijke maat als maximum.
 */
.cs-020-hero__frame {
  max-width: 1600px;
  margin-left: auto;
  margin-right: auto;
}

@media (min-width: 992px) {
  .cs-020-hero__split {
    gap: 32px;
  }

  .cs-020-hero__media,
  .cs-020-hero__header {
    flex: 1 1 0;
    min-width: 0;
    max-width: 708px;
  }

  /* De media-kaart is `position: absolute; inset: 0`, dus de hoogte moet uit de
     verhouding komen zodra de breedte niet meer vastligt. */
  .cs-020-hero__media {
    height: auto;
    aspect-ratio: 708 / 884;
  }
}

/* 9 -- Laatste twee vaste breedtes die te laat wijken (beide al aanwezig in de template).
 * a) Conversations: foto 750px + gap 32 + statkaart 375px = 1157px, maar de kolomstand
 *    ging pas in op <=991px. De band 992-1157px liep dus over.
 * b) Het nieuwsbriefveld stond op een vaste 416px binnen een kolom die smaller kan worden.
 * Ter vergelijking: de originele kloon was op een venster van 1000px nog 1424px breed.
 */
@media (max-width: 1199px) {
  .cs-080-conversation__grid {
    flex-direction: column;
    align-items: center;
  }

  .cs-080-conversation__media {
    width: 100%;
    height: auto;
    aspect-ratio: 750 / 425;
  }

  .cs-080-conversation__stat-card {
    width: 100%;
    height: auto;
  }
}

.cs-111-footer-links__field {
  width: 100%;
  max-width: 416px;
}

/* 10 -- Footer-linkkolommen. .cs-111-footer-links__columns is een raster van 200px 200px
 * (416px vast) naast het nieuwsbriefblok van 416px; samen 848px, terwijl die kolom op een
 * venster van 1000px maar ~576px krijgt. Ook hier ging de kolomstand pas op <=991px in.
 */
/* De twee footerkolommen naast elkaar vragen 200+16+200 + 16 + 416 = 848px, en die kolom
   krijgt ongeveer twee derde van de kaartbreedte. Dat lukt pas rond 1400px. */
@media (max-width: 1399px) {
  .cs-111-footer-links {
    grid-template-columns: 1fr;
    gap: 48px;
  }

  .cs-111-footer-links__columns {
    height: auto;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: none;
    row-gap: 32px;
  }

  .cs-111-footer-links__newsletter {
    height: auto;
  }
}

.cs-111-footer-links__group {
  width: auto;
  min-width: 0;
}
.cs-020-hero__btn-secondary[hidden] {
  display: none;
}

/* Uniforme aangeleverde netwerklogo's. */
#people-we-trust .cs-030-intro__logo-chip { flex-direction: column; gap: 16px; padding: 24px; box-sizing: border-box; }
#people-we-trust .network-logo-frame { width: 100%; height: 96px; display: flex; align-items: center; justify-content: center; overflow: hidden; }
#people-we-trust .network-logo { width: 100%; height: 100%; object-fit: contain; filter: grayscale(1) brightness(0) invert(1); opacity: .64; }
#people-we-trust .network-logo--icf, #people-we-trust .network-logo--marlife, #people-we-trust .network-logo--intention { filter: grayscale(1) invert(1) brightness(2); mix-blend-mode: screen; }
#people-we-trust .network-logo--the-expat-host { transform: scale(1.45); }
#people-we-trust .network-logo--intention { transform: scale(1.6); }
#people-we-trust .network-logo--icf { transform: scale(1.5); }
#people-we-trust .network-logo--adeslas, #people-we-trust .network-logo--notario { filter: grayscale(1) invert(1) brightness(2); mix-blend-mode: screen; }
#people-we-trust .network-logo--adeslas { transform: scale(2.8); }
/* Jos: volledige groepscontext en vier korte uitspraken. */
#about-jos .cs-040-approach__container { max-width: 1600px; }
#about-jos .cs-040-approach__split { display: grid; grid-template-columns: 3fr 2fr; gap: 48px; align-items: center; }
#about-jos .cs-040-approach__media { width: 100%; height: auto; aspect-ratio: auto; }
#about-jos .cs-040-approach__photo { height: auto; object-fit: contain; }
#about-jos .cs-040-approach__content,
#about-jos .cs-040-approach__body,
#about-jos .cs-040-approach__statements { width: 100%; min-width: 0; }
#about-jos .cs-040-approach__body { height: auto; }
@media (max-width: 991px) {
  #about-jos .cs-040-approach__split { grid-template-columns: 1fr; gap: 40px; }
}
/* Echte reviewfragmenten: leesbaar op alle schermen. */
.cs-070-testimonials .cs-070-testimonials__card { height: auto; min-height: 0; aspect-ratio: auto; background: #1c2623; }
.cs-070-testimonials .cs-070-testimonials__card-content { position: relative; padding: 32px; height: auto; }
.cs-070-testimonials .cs-070-testimonials__card-media { display: none; }
.cs-070-testimonials .cs-070-testimonials__quote { font-size: 18px; line-height: 28px; }
.cs-070-testimonials .review-source, .cs-070-testimonials .review-original { font-size: 14px; line-height: 20px; }
.cs-070-testimonials .review-stars { margin-bottom: 16px; }
.cs-070-testimonials a { color: inherit; }
@media(max-width: 991px) { .cs-070-testimonials .cs-070-testimonials__grid { display: grid; grid-template-columns: 1fr; } .cs-070-testimonials .cs-070-testimonials__card--hidden-on-mobile { display: flex; } }
.cs-070-testimonials .review-stars, .cs-070-testimonials .review-source, .cs-070-testimonials .review-original { color: #eeede5; }
#home .hero-google-reviews { display: inline-flex; align-items: center; gap: 8px; margin-top: 16px; color: #1c2623; font-size: 14px; line-height: 20px; text-decoration: none; }
#home .hero-google-reviews:hover { text-decoration: underline; }
#home .hero-google-reviews img { width: 61px; height: 20px; object-fit: contain; }
#stories .stories-marta { display: block; width: 100%; height: auto; border-radius: 16px; margin-bottom: 24px; }
#stories .cs-075-stories__card-foot[hidden] { display: none; }
#conversations .cs-080-conversation__stat-card { padding: 32px; height: auto; }
#conversations .marlife-video { display: block; width: 100%; max-height: 720px; object-fit: contain; border-radius: 24px; }
#conversations .cs-080-conversation__media { height: auto; aspect-ratio: auto; }
#conversations .cs-080-conversation__media[hidden] { display: none; }
#conversations .cs-080-conversation__stat-card { grid-column: 1 / -1; }
#conversations .marlife-video { margin-top: 24px; position: relative; height: auto; max-width: 405px; align-self: center; }
/* Coaching: goedgekeurde tekst en originele foto Jos/Vera. */
#coaching [data-todo="icf-logo"][hidden] { display: none; }
#coaching .coaching-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); align-items: center; gap: var(--_📐-spacing---gap--gap-07); }
#coaching .coaching-photo { display: block; width: 100%; height: auto; border-radius: var(--_⭕-global-radius---general--radius-large); }
#coaching .cs-100-cta__content, #coaching .cs-100-cta__text { align-items: flex-start; min-width: 0; }
#coaching .cs-100-cta__heading, #coaching .cs-100-cta__sub { text-align: left; }
#coaching .coaching-eyebrow { margin: 0; font-weight: 600; font-size: var(--_🅰-typography---text--medium--medium-size); }
#coaching .coaching-training { margin: 0; font-size: var(--_🅰-typography---utility--label--label-size); line-height: var(--_🅰-typography---text--medium--medium-line-height); }
@media (max-width: 991px) { #coaching .coaching-layout { grid-template-columns: minmax(0, 1fr); } #coaching .coaching-photo { width: 100%; max-width: 480px; margin-inline: auto; } }
#coaching .coaching-types { display: flex; flex-wrap: wrap; gap: var(--_📐-spacing---gap--gap-02); margin: 0; font-size: var(--_🅰-typography---utility--label--label-size); line-height: var(--_🅰-typography---text--medium--medium-line-height); }
/* Compacte sectieafstanden: bestaande schaal 64 / 48 / 32 px. */
:is(.cs-030-intro,.cs-040-approach,.cs-060-proof-carousel,.cs-070-testimonials,.cs-075-stories,.cs-080-conversation,.cs-090-faq,.cs-100-cta) { padding-top: 64px; padding-bottom: 64px; }
#conversations .cs-080-conversation__content, .cs-090-faq__content { gap: 32px; }
#coaching .coaching-layout { gap: 24px; }
#coaching .coaching-photo { border-radius: 24px; }
#coaching .coaching-types { gap: 8px 16px; font-size: 14px; line-height: 24px; }
#coaching .coaching-types span { white-space: nowrap; }
#coaching .coaching-credential { display: flex; align-items: center; gap: 16px; }
#coaching .coaching-credential img { width: 160px; height: auto; flex-shrink: 0; border-radius: 8px; }
#coaching .coaching-training { font-size: 14px; line-height: 24px; }
@media(max-width:991px) {
 :is(.cs-030-intro,.cs-040-approach,.cs-060-proof-carousel,.cs-070-testimonials,.cs-075-stories,.cs-080-conversation,.cs-090-faq,.cs-100-cta) { padding-top: 48px; padding-bottom: 48px; }
}
@media(max-width:600px) {
 :is(.cs-030-intro,.cs-040-approach,.cs-060-proof-carousel,.cs-070-testimonials,.cs-075-stories,.cs-080-conversation,.cs-090-faq,.cs-100-cta) { padding-top: 32px; padding-bottom: 32px; }
 #coaching .coaching-credential { flex-wrap: wrap; }
}

/* Footer: originele foto vrij van tekst, compacte contactgegevens. */
#contact [hidden] { display:none !important; }
#contact .cs-110-footer-promo { height:auto; padding:0; background:#232f2b; }
#contact .cs-110-footer-promo__media { position:relative; }
#contact .cs-110-footer-promo__video { position:static; display:block; width:100%; height:auto; }
#contact .cs-110-footer-promo__overlay { display:none; }
#contact .cs-110-footer-promo__content { position:relative; padding:24px; gap:16px; }
#contact .cs-110-footer-promo__bottom { width:100%; height:auto; display:flex; flex-direction:column; align-items:flex-start; gap:16px; }
#contact .footer-shirt-line { margin:0; color:#eceae1; font-size:16px; line-height:24px; }
#contact .footer-contact-intro { margin-bottom:32px; }
#contact .footer-contact-intro h2 { font-size:40px; line-height:1.1; margin:0 0 24px; }
#contact .footer-contact-intro p, #contact address { font-size:16px; line-height:24px; margin:16px 0; font-style:normal; }
#contact .footer-contact-actions { display:flex; flex-wrap:wrap; gap:16px; }
#contact .footer-contact-actions a { display:inline-flex; padding:16px 24px; border-radius:200px; background:#dedcd6; color:#1c2623; font-weight:600; }
#contact .cs-111-footer-links__list a { overflow-wrap:anywhere; }
#contact .cs-110-footer-promo__media { aspect-ratio:1; overflow:hidden; }
#contact .cs-110-footer-promo__video { width:100%; height:100%; object-fit:cover; object-position:center 70%; transform:scale(1.3); }
#contact .cs-111-footer-links { display:block; }
#contact .footer-contact-intro { max-width:640px; }
@media(min-width:1200px) { #contact .cs-111-footer-links__columns { width:100%; grid-template-columns:repeat(4,minmax(0,1fr)); gap:24px; } }
/* WhatsApp: groen op verzoek Jos, bestaande pilvorm behouden. */
#contact .footer-contact-actions .footer-whatsapp { background:#25d366; color:#1c2623; align-items:center; gap:8px; }
#contact .footer-whatsapp svg { flex-shrink:0; }
#contact .footer-whatsapp:hover { background:#1fbd5a; }
#contact .footer-whatsapp:focus-visible { outline:2px solid #1c2623; outline-offset:4px; }
#contact .cs-111-footer-links__columns { width:100%; grid-template-columns:repeat(3,minmax(0,1fr)); gap:24px; }
#contact .cs-111-footer-links__list { gap:8px; }
#contact .cs-111-footer-links__list a { font-size:16px; line-height:24px; }
#contact .cs-112-footer-legal__bottom { margin-top:32px; gap:0; }
@media(max-width:991px) { #contact .cs-111-footer-links__columns { grid-template-columns:repeat(2,minmax(0,1fr)); } #contact .cs-111-footer-links__group:first-child { grid-column:1 / -1; } }
#contact .cs-111-footer-links__columns { height:auto; grid-template-rows:auto; }
#contact .cs-112-footer-legal__main { gap:24px; justify-content:flex-start; }
#contact .cs-111-footer-links__columns { grid-template-columns:repeat(2,minmax(0,1fr)); }
#contact .cs-111-footer-links__group:first-child { grid-column:auto; }
@media(max-width:991px) { #contact .cs-111-footer-links__group:first-child { grid-column:1 / -1; } }
#contact .cs-112-footer-legal__bottom { flex-direction:column; align-items:flex-start; gap:16px; }
#contact .cs-112-footer-legal__legal-links { flex-wrap:wrap; align-items:flex-start; }
#contact .cs-112-footer-legal__small-link, #contact .footer-business-details { font-size:16px; line-height:24px; color:#1c2623; }
#contact .footer-business-details summary { cursor:pointer; }
#contact .footer-business-details p { margin:16px 0; }
@media(max-width:991px) { #contact .cs-111-footer-links__group:first-child { grid-column:1 / -1; } #contact .cs-111-footer-links__group:nth-child(2) { grid-column:1 / -1; } }
/* September: aangeleverde klantreview en verhaalmedia. */
#contact .footer-business-details { display:none; width:100%; }
#contact .footer-business-details:target { display:block; scroll-margin-top:160px; }
.stories-clients { margin:24px 0 0; }
.stories-clients img { display:block; width:100%; height:auto; object-fit:contain; border-radius:24px; }
.stories-clients figcaption { margin-top:8px; font-size:14px; line-height:1.5; }
.stories-video { display:block; width:100%; height:auto; max-height:480px; margin-top:24px; border-radius:24px; }
.cs-070-testimonials__quote p { margin:0 0 16px; }
/* Persoonlijk netwerkblok — Jos, 17 september. */
.jos-network { width:calc(100% - 48px); max-width:1200px; margin:0 auto; padding:64px 0; display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.2fr); gap:48px; align-items:center; scroll-margin-top:120px; }
.jos-network__photo { aspect-ratio:3 / 4; border-radius:24px; overflow:hidden; }
.jos-network__photo img { display:block; width:100%; height:100%; object-fit:cover; object-position:center; }
.jos-network h2 { font-family:"Libre Caslon Condensed", Georgia, serif; font-weight:400; font-size:48px; line-height:1.1; margin:0 0 24px; }
.jos-network h3 { font-size:20px; line-height:1.4; margin:24px 0 8px; }
.jos-network p { font-size:18px; line-height:1.5; margin:0; }
.jos-network__link { display:inline-flex; gap:24px; align-items:center; padding:16px 24px; margin-top:24px; border-radius:200px; background:#f3f5ee; color:#1c2623; font-weight:600; }
.jos-network__link:hover { background:#1c2623; color:#eceae1; }
@media(max-width:767px) { .jos-network { grid-template-columns:1fr; gap:24px; padding:32px 0; } .jos-network__photo { max-width:480px; width:100%; margin:auto; } .jos-network h2 { font-size:40px; } .jos-network p { font-size:16px; } }
/* ANF: uitsluitend aangeleverd logo uit brede banner, gelijk aan rij. */
#people-we-trust .network-anf-crop { display:block; position:relative; width:160px; height:96px; flex-shrink:0; overflow:hidden; filter:grayscale(1) invert(1) brightness(2); mix-blend-mode:screen; opacity:.64; }
#people-we-trust .network-anf-crop img { position:absolute; width:640px; height:240px; max-width:none; left:-20px; top:-28px; }

/* Goedgekeurde mobiele coachingroute, 18 september. */
.cs-020-hero__buttons { flex-wrap:wrap; gap:16px; }
#work .cs-060-proof-carousel__mask, #work .cs-060-proof-carousel__track { height:auto; }
#work .cs-060-proof-carousel__track { align-items:stretch; }
#work .cs-060-proof-carousel__slide { height:auto; display:flex; }
#work .cs-060-proof-carousel__slide-card { height:auto; display:flex; flex:1; padding:16px; min-height:480px; box-sizing:border-box; }
#work .cs-060-proof-carousel__slide-media { position:absolute; inset:0; }
#work .cs-060-proof-carousel__slide-content { position:relative; inset:auto; width:100%; padding:0; align-items:stretch; }
#work .cs-060-proof-carousel__slide-panel { flex:1; }
#work .cs-060-proof-carousel__slide-body { flex:1; }
#work .cs-060-proof-carousel__slide-link { margin-top:auto; }
#coaching { scroll-margin-top:120px; }
#coaching .coaching-layout, #coaching .cs-100-cta__content, #coaching .cs-100-cta__text { display:contents; }
#coaching .cs-100-cta__container { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); column-gap:32px; row-gap:16px; }
#coaching .cs-100-cta__container > * { min-width:0; }
#coaching .coaching-eyebrow, #coaching .cs-100-cta__heading, #coaching .cs-100-cta__sub, #coaching .coaching-location, #coaching .coaching-types, #coaching .coaching-credential, #coaching .cs-100-cta__buttons { grid-column:2; margin:0; }
#coaching .coaching-photo { grid-column:1; grid-row:1 / span 10; width:100%; height:auto; align-self:start; border-radius:24px; }
.jos-programs { max-width:1200px; margin:auto; padding:32px 24px 64px; }
.jos-programs h2 { font-family:"Libre Caslon Condensed",Georgia,serif; font-weight:400; font-size:48px; line-height:1.1; margin:0 0 16px; }
.jos-programs__grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:24px; margin-top:24px; }
.jos-programs article { display:flex; flex-direction:column; gap:16px; padding:32px; border-radius:24px; background:#232f2b; color:#eceae1; }
.jos-programs h3 { font-size:24px; margin:0; }
.jos-programs article p { margin:0; }
.jos-programs article a { color:inherit; margin-top:auto; text-decoration:underline; text-underline-offset:4px; }
.review-details summary { cursor:pointer; font-size:16px; text-decoration:underline; padding:8px 0; }
.review-full { margin-top:16px; }
.cs-070-testimonials__card { align-self:start; }
#people-we-trust .cs-030-intro__heading { font-size:32px; line-height:1.2; }
#people-we-trust .cs-030-intro__logo-chip { height:144px; }
.whatsapp-dock { position:fixed; right:max(16px,env(safe-area-inset-right)); bottom:max(16px,env(safe-area-inset-bottom)); z-index:90; }
.whatsapp-float { display:flex; align-items:center; gap:8px; padding:16px; min-width:48px; min-height:48px; box-sizing:border-box; border-radius:200px; color:#1c2623; background:#25d366; font-weight:600; }
.whatsapp-dock[hidden] { display:none; }
.whatsapp-float:focus-visible { outline:2px solid #1c2623; outline-offset:4px; }
body { padding-bottom:80px; }
@media(max-width:767px) {
 #work .cs-060-proof-carousel__track { display:grid; grid-template-columns:minmax(0,1fr); grid-auto-rows:1fr; transform:none!important; gap:16px; }
 #work .cs-060-proof-carousel__mask, #work .cs-060-proof-carousel__slider { width:100%; height:auto; }
 #work .cs-060-proof-carousel__slide { width:100%; min-width:0; }
 #work .cs-060-proof-carousel__slide-card { min-height:0; }
 #work .cs-060-proof-carousel__slide-panel { padding:24px; }
 #work .cs-060-proof-carousel__arrow { display:none; }
 #coaching .cs-100-cta__container { display:flex; flex-direction:column; gap:16px; }
 #coaching .coaching-photo { width:100%; max-height:480px; object-fit:contain; }
 .jos-programs__grid { grid-template-columns:1fr; grid-auto-rows:1fr; }
 .jos-programs h2 { font-size:40px; }
 .whatsapp-float span { display:none; }
 .whatsapp-float { padding:12px; }
}

#programmas { scroll-margin-top:110px; }
#coaching .cs-100-cta__container { max-width:1200px; margin-inline:auto; }
@media(min-width:768px) { #coaching .coaching-photo { max-width:480px; justify-self:center; } }
#work { min-height:0; }
@media(min-width:768px) { #work .cs-060-proof-carousel__slide-card { min-height:360px; } }

/* Correctie: beeldvak volgt de foto, zodat contain geen vierkante binnenrand geeft. */
#coaching .coaching-photo { display:block; height:auto; max-height:none; border-radius:24px; }
@media(max-width:767px) { #coaching .coaching-photo { width:min(100%,360px); align-self:center; object-fit:initial; } }
@media(min-width:1000px) { .jos-programs__grid { grid-template-columns:repeat(3,minmax(0,1fr)); } }
@media(min-width:768px) and (max-width:999px) { .jos-programs__grid { grid-template-columns:1fr; grid-auto-rows:1fr; } }

/* Originele shirtfoto zonder vergroting, rustige bedrijfsvermelding. */
#contact .cs-110-footer-promo__video { transform:none; object-position:center; }
#contact .cs-110-footer-promo__media { aspect-ratio:3 / 4; }
#contact .footer-company-logo { display:block; width:340px; max-width:100%; height:auto; filter:brightness(0) invert(1); }
#contact .cs-110-footer-promo__media { aspect-ratio:auto; height:auto; }
#contact .cs-110-footer-promo__video { width:100%; height:auto; max-height:none; object-fit:contain; transform:none; }
/* Compacte footerstrip: merk rechts naast de websitelink, niet boven de tekst. */
#contact .cs-110-footer-promo__content { display:grid; grid-template-columns:minmax(0,1fr) minmax(100px,180px); gap:12px 16px; padding:20px 24px; align-items:center; }
#contact .cs-110-footer-promo__bottom { display:contents; }
#contact .footer-shirt-line { grid-column:1 / -1; grid-row:1; }
#contact .cs-110-footer-promo__heading { grid-column:1 / -1; grid-row:2; font-size:24px; line-height:1.2; }
#contact .cs-110-footer-promo__link { grid-column:1; grid-row:3; justify-self:start; }
#contact .cs-110-footer-promo__logo { grid-column:2; grid-row:3; width:100%; height:auto; align-self:center; justify-self:end; pointer-events:auto; }
#contact .cs-110-footer-promo__logo a { display:block; width:100%; }
#contact .footer-company-logo { width:100%; max-width:none; height:auto; }
@media(max-width:420px) { #contact .cs-110-footer-promo__content { padding:16px; gap:12px 8px; grid-template-columns:minmax(0,1fr) 110px; } #contact .cs-110-footer-promo__link { padding:8px 12px; font-size:14px; } }
#contact .cs-110-footer-promo__logo a { position:relative; height:40px; overflow:hidden; }
#contact .footer-company-logo { position:absolute; width:164%; left:-32%; top:50%; transform:translateY(-50%); }

/* Reviewverwijzingen en informatieaanvraag, 18 september. */
#home .hero-google-reviews { margin-top:-16px; margin-bottom:24px; }
.cs-070-testimonials__card-content > img { width:61px; height:20px; object-fit:contain; align-self:center; }
.cs-070-testimonials__rating { padding:16px 24px; height:auto; max-width:100%; box-sizing:border-box; }
.google-review-link { display:inline-flex; align-items:center; justify-content:center; gap:16px; color:var(--jos-ink-1,#1c2623); font-size:14px; line-height:1.5; }
.google-review-link img { display:block; flex:0 0 61px; width:61px; height:20px; object-fit:contain; }
.google-review-link span { min-width:0; }
#contact .footer-google-reviews { margin-top:16px; }
.jos-request { width:100%; max-width:640px; margin:32px 0; padding:24px; box-sizing:border-box; border-radius:24px; background:var(--jos-surface-1,#eceae1); color:var(--jos-ink-1,#1c2623); scroll-margin-top:110px; }
.jos-request h2 { font-size:32px; line-height:1.15; margin:0 0 16px; }
.jos-request p { font-size:16px; line-height:1.5; margin:0 0 16px; }
.jos-request form, .jos-request label { display:grid; gap:8px; }
.jos-request form { gap:16px; }
.jos-request label { font-size:16px; font-weight:500; min-width:0; }
.jos-request__fields { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.jos-request input, .jos-request select, .jos-request textarea { box-sizing:border-box; width:100%; min-width:0; padding:12px 16px; border:1px solid var(--jos-ink-2,rgba(28,38,35,.64)); border-radius:8px; background:var(--jos-surface-2,#f3f5ee); color:inherit; font:inherit; }
.jos-request textarea { resize:vertical; }
.jos-request button { justify-self:start; padding:16px 24px; border:0; border-radius:200px; background:var(--jos-ink-1,#1c2623); color:var(--jos-surface-2,#f3f5ee); font:inherit; }
.jos-request button:disabled { opacity:.55; cursor:not-allowed; }
.jos-request a { text-decoration:underline; text-underline-offset:3px; }
.jos-request input:focus-visible, .jos-request select:focus-visible, .jos-request textarea:focus-visible { outline:2px solid #1c2623; outline-offset:3px; }
.jos-request .jos-request__privacy, .jos-request #request-status { font-size:14px; margin:0; }
@media(max-width:767px) { .jos-request__fields { grid-template-columns:1fr; } .jos-request { padding:24px 16px; } }
/* Korte opleidingsvermelding met bestaande opleiderslogo's. */
#coaching .coaching-credential { display:flex; flex-wrap:wrap; align-items:center; gap:16px; }
#coaching .coaching-training { order:0; flex:1 1 240px; font-size:14px; line-height:1.5; color:var(--jos-ink-1,#1c2623); }
#coaching .coaching-training strong { display:block; font-size:16px; margin-bottom:8px; }
#coaching .coaching-training p { margin:0; font-size:14px; line-height:1.5; }
#coaching .coaching-credential img { order:1; width:96px; height:64px; object-fit:contain; border-radius:8px; }
#coaching .coaching-credential .coaching-intention-logo { width:112px; height:64px; mix-blend-mode:multiply; }

/* Eindcontrole: rustige werknotities en een stabiele WhatsApp-knop. */
.attia-note, .jos-request p.attia-note { display:block; padding:8px 12px; border-radius:8px; background:#edf2e5; color:#3e542d; font-size:13px; line-height:1.5; outline:1px dashed #6c7a35; outline-offset:0; }
.attia-note strong { font-weight:600; }
.whatsapp-dock { position:fixed; z-index:90; }
.whatsapp-float { padding:12px; width:48px; height:48px; }
.whatsapp-float span { display:none; }
html { scroll-padding-bottom:80px; }
#coaching .coaching-credential img:not(.coaching-intention-logo) { width:144px; height:auto; border-radius:0; }
#coaching .coaching-training { flex-basis:100%; }
@media print { .attia-note, .whatsapp-dock { display:none!important; } }

/* Navigatie blijft luchtig; de promo ondersteunt in plaats van te overheersen. */
.stories-marta[hidden] { display:none!important; }
.cs-012-header-mobile-nav__panel { overscroll-behavior:contain; scrollbar-width:thin; }
.cs-012-header-mobile-nav__link, .cs-012-header-mobile-nav__acc-toggle { font-size:20px; line-height:1.4; min-height:44px; }
.cs-012-header-mobile-nav__promo { margin-top:24px; height:160px; min-height:0; }
.cs-012-header-mobile-nav__promo-caption { font-size:20px; line-height:1.2; }
.cs-012-header-mobile-nav__promo-overlay { padding:16px; min-height:0; height:100%; box-sizing:border-box; }
.cs-012-header-mobile-nav__promo-link { font-size:14px; padding:8px 16px; }
@media(max-width:479px) { .cs-012-header-mobile-nav__panel { padding:24px; } }
@media(min-width:992px) {
 .cs-010-header__pill { margin-inline:32px; }
 .cs-011-header-megamenu__toggle, .cs-010-header__nav a { white-space:nowrap; }
}

/* Coaching: inhoud, aanbod, contact en opleiding als herkenbare groepen. */
#coaching .cs-100-cta__container { column-gap:48px; row-gap:24px; align-items:start; }
#coaching .coaching-types { display:grid; width:100%; box-sizing:border-box; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px 24px; padding:0 0 0 18px; list-style:disc; font-size:16px; line-height:1.5; }
#coaching .coaching-types li { padding-left:0; }
#coaching .coaching-location { font-size:14px; line-height:1.5; }
#coaching .cs-100-cta__buttons { justify-content:flex-start; gap:12px; flex-wrap:wrap; }
#coaching .coaching-credential { padding-top:24px; border-top:1px solid rgba(28,38,35,.16); gap:8px 24px; }
#coaching .coaching-training strong { font-size:14px; margin-bottom:8px; }
#coaching .coaching-training p { font-size:14px; }
#coaching .coaching-photo { grid-row:1 / span 8; }
@media(max-width:767px) {
 #coaching .cs-100-cta__container { gap:24px; }
 #coaching .coaching-photo { order:1; width:min(100%,280px); margin:8px auto 0; }
 #coaching .coaching-credential { order:2; width:100%; box-sizing:border-box; }
 #coaching .coaching-types { font-size:14px; gap:8px 16px; }
 #coaching .cs-100-cta__buttons { width:100%; align-items:stretch; }
 #coaching .cs-100-cta__buttons > a { justify-content:center; }
}

/* Foto en coachingvormen samen, 18 september. */
#coaching .coaching-location[hidden] { display:none; }
#coaching .coaching-visual { grid-column:1; grid-row:1 / span 8; display:flex; flex-direction:column; align-items:center; gap:24px; min-width:0; }
#coaching .coaching-visual .coaching-photo { width:100%; max-width:480px; height:auto; margin:0; order:0; }
#coaching .coaching-visual .coaching-types { width:100%; max-width:360px; margin:0; font-size:14px; gap:8px 24px; }
@media(max-width:767px) {
 #coaching .coaching-visual { width:100%; order:0; }
 #coaching .coaching-visual .coaching-photo { width:100%; max-width:480px; }
 #coaching .cs-100-cta__buttons { order:1; }
}
/* Marlife: een titel, korte introductie, video en gerichte aanvraag. */
#conversations .cs-080-conversation__stat-card { gap:24px; }
#conversations .marlife-title { font-size:24px; line-height:1.3; margin:0; }
#conversations .cs-080-conversation__stat-body { margin:0; font-size:16px; line-height:1.5; }
#conversations .marlife-request { display:inline-flex; align-items:center; gap:16px; align-self:flex-start; padding:16px 24px; border-radius:24px; background:var(--jos-surface-2,#f3f5ee); color:var(--jos-ink-1,#1c2623); font-size:16px; line-height:1.5; }
/* Compacte taalkeuze: inhoud blijft dezelfde pagina, met Nederlands als basis. */
.site-language { width:60px; min-height:40px; padding:6px; border:1px solid rgba(28,38,35,.16); border-radius:16px; font:inherit; font-size:13px; font-weight:600; color:#1c2623; background:#f3f5ee; cursor:pointer; }
.site-language:focus-visible { outline:2px solid #1c2623; outline-offset:3px; }
.cs-010-header__right { display:flex; align-items:center; gap:8px; width:auto; }
html:not([lang="nl"]) .cs-100-cta__btn-label, html:not([lang="nl"]) .cs-080-conversation__cta-label { white-space:normal; }
html:not([lang="nl"]) .coaching-types li { overflow-wrap:anywhere; }
@media(max-width:1399px) {
 .cs-010-header__center { display:none; }
 .cs-010-header__menu-btn { display:flex; }
 .cs-010-header__pill { display:flex; justify-content:space-between; }
 .cs-010-header__left { width:auto; }
}
@media(max-width:479px) {
 .cs-010-header__pill { gap:6px; }
 .cs-010-header__left { padding:0; min-width:0; }
 .cs-010-header__logo { width:auto; }
 .cs-010-header__right { gap:4px; }
 .cs-010-header__cta { font-size:12px; padding-inline:8px; }
 .site-language { width:52px; padding:4px; }
}
/* Langere vertaalde labels mogen op smalle schermen afbreken. */
.marlife-request { max-width:100%; box-sizing:border-box; overflow-wrap:anywhere; }
@media(max-width:379px) {
 .cs-010-header__pill { gap:4px; }
 .cs-010-header__left { flex:0 0 auto; }
 .cs-010-header__wordmark { font-size:18px; }
 .cs-010-header__menu-btn, .cs-010-header__menu-circle { width:32px; min-width:32px; }
 .cs-010-header__cta { font-size:11px; padding-inline:6px; }
 .site-language { width:46px; font-size:12px; }
}
/* Contact: Maps and reviews together beneath the address, in every language. */
#contact .footer-google-links { display:flex; flex-wrap:wrap; align-items:center; gap:8px 24px; margin-top:16px; }
#contact .footer-google-links > a { display:inline-flex; align-items:center; min-height:44px; font-size:14px; line-height:1.5; }
#contact .footer-google-links .footer-google-reviews { margin:0; gap:8px; }

.mara-card { margin-top:32px; padding:32px; background:var(--jos-surface-inverse,#232f2b); color:var(--jos-surface-2,#f3f5ee); border-radius:24px; min-width:0; }
.mara-card h3 { font-size:clamp(28px,3vw,40px); line-height:1.15; margin:0 0 16px; }
.mara-card p { font-size:16px; line-height:1.6; margin:0 0 24px; }
.mara-card video { display:block; width:100%; height:auto; aspect-ratio:16/9; border-radius:16px; margin:24px 0; background:#000; }
.mara-profile { display:flex; align-items:center; gap:24px; margin:24px 0; }
.mara-profile img { width:128px; height:auto; flex-shrink:0; background:#fff; border-radius:8px; }
.mara-profile h4 { font-size:20px; margin:0 0 8px; }
.mara-profile p { font-size:14px; margin:0 0 8px; }
.mara-profile a { font-size:14px; text-decoration:underline; }
.mara-card .mara-routing { font-size:14px; margin:16px 0 0; }
@media(max-width:479px) { .mara-card {padding:24px;} .mara-profile {flex-direction:column; align-items:flex-start;gap:16px;} }
#conversations .marlife-card { margin-top:0; width:100%; }
#conversations .marlife-card .marlife-video { aspect-ratio:auto; margin:24px auto; border-radius:16px; }
.mara-profile-links { display:flex; flex-wrap:wrap; gap:8px 24px; align-items:center; }
/* Compacte diensten in LIVE, op verzoek Jos. */
#work .live-service-links { display:grid; gap:8px; margin-top:auto; }
#work .live-service-links .cs-060-proof-carousel__slide-link { margin:0; min-height:44px; height:auto; padding:12px 16px; text-align:center; }
#work .live-certificate-link { text-align:center; font-size:14px; padding:8px; text-decoration:underline; color:var(--jos-surface-2,#f3f5ee); }
/* verborgen dummy's en Attia-notities (7 okt 2026): hidden moet altijd winnen */
[data-todo][hidden], .attia-note[hidden], .jos-request[hidden] { display: none !important; }
/* tekst-wordmarks zijn de definitieve weergave tot er een logobestand is: geen geel kader tonen */
[data-todo="logo-jos-pronk"], [data-todo="logo-the-expat-host"] { outline: none; }
/* vlakken waar het tijdelijke beeld verborgen is: donkere kaartkleur van de pagina (#1c2623, zoals het mobiele menu) */
.cs-011-header-megamenu__promo, .cs-060-proof-carousel__slide-media, .cs-070-testimonials__card-media { background-color: #1c2623; }

/* ==ECC-CLONE:END section:jospronk-additions== */