/* ==========================================================================
   NEOO Design System — Colors & Type
   Source of truth for tokens. Import from any HTML/JSX file:
     <link rel="stylesheet" href="../colors_and_type.css">
   ========================================================================== */

/* -------- Webfonts ------------------------------------------------------- */
@font-face {
  font-family: "Century Gothic";
  font-weight: 700;
  font-style: normal;
  font-display: swap;
  src: url("../fonts/century-gothic-700.ttf") format("truetype");
}
@font-face {
  font-family: "Agile Sans";
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  src: url("../fonts/agile-sans-400.otf") format("opentype");
}
@font-face {
  font-family: "Arboria";
  font-weight: 300;
  font-style: normal;
  font-display: swap;
  src: url("../fonts/arboria-300.ttf") format("truetype");
}
@font-face {
  font-family: "Arboria";
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  src: url("../fonts/arboria-400.ttf") format("truetype");
}
@font-face {
  font-family: "Arboria";
  font-weight: 500;
  font-style: normal;
  font-display: swap;
  src: url("../fonts/arboria-500.ttf") format("truetype");
}

/* ==========================================================================
   :root tokens
   ========================================================================== */
:root {
  /* --- Brand colors (from KLEUREN_NEOO_DEF.pdf) ----------------------------
     Five brand-defined values. Everything else is derived for UI use. */
  --neoo-groen:      #00402A;  /* Primary — dark forest green */
  --neoo-sage:       #C5D2CD;  /* Soft secondary — sage / cool grey-green */
  --neoo-zalmrood:   #B06151;  /* Accent — terracotta / salmon-red */
  --neoo-cream:      #FFF9FA;  /* Page background — warm off-white */
  --neoo-zwart:      #292929;  /* Body text — near black */

  /* --- Foreground / background scales ------------------------------------- */
  --bg-page:         var(--neoo-cream);
  --bg-surface:      #ffffff;
  --bg-muted:        #F2EEEC;          /* derived: warm card wash */
  --bg-inverse:      var(--neoo-groen);
  --bg-sage-tint:    #E5ECE9;          /* derived: 50% sage on cream */
  --bg-sage:         var(--neoo-sage);
  --bg-overlay:      rgba(0, 64, 42, 0.55);

  --fg-1:            var(--neoo-zwart); /* primary text */
  --fg-2:            #5A5A5A;            /* secondary / meta */
  --fg-3:            #8A8A8A;            /* tertiary / disabled label */
  --fg-on-green:     var(--neoo-cream);
  --fg-on-rood:      var(--neoo-cream);

  --border-hairline: rgba(41, 41, 41, 0.12);
  --border-rule:     var(--neoo-groen);   /* the signature short rule */
  --border-subtle:   rgba(0, 64, 42, 0.18);

  /* --- Type families ------------------------------------------------------ */
  --font-display:    "Century Gothic", "Futura", "Avenir Next", sans-serif;
  --font-subtitle:   "Agile Sans", "Atkinson Hyperlegible", "Inter", sans-serif;
  --font-body:       "Arboria", "Avenir Next", "Inter", system-ui, sans-serif;
  --font-mono:       ui-monospace, "SF Mono", Menlo, monospace;

  /* --- Type scale (rebuilt for screen from print spec) -------------------
     Print spec: Header CG Bold, tracking 50 (≈0.05em), Subtitle Agile +4pt.
     Screen baseline = 16px; line-heights from spec ratios. */
  --fs-hero:         clamp(48px, 7vw, 112px);
  --fs-h1:           clamp(40px, 5vw, 72px);
  --fs-h2:           clamp(32px, 3.6vw, 48px);
  --fs-h3:           28px;
  --fs-h4:           22px;
  --fs-eyebrow:      13px;     /* small caps label */
  --fs-subtitle:     clamp(20px, 2vw, 28px);
  --fs-body-lg:      18px;
  --fs-body:         16px;
  --fs-body-sm:      14px;
  --fs-caption:      12px;

  --lh-tight:        1.05;
  --lh-snug:         1.18;
  --lh-normal:       1.45;
  --lh-loose:        1.6;

  --ls-display:      0.05em;   /* "spatiëring 50" */
  --ls-eyebrow:      0.18em;   /* "spatiëring 80" subtitle / eyebrow */
  --ls-body:         0;

  /* --- Spacing scale (4px base) ------------------------------------------ */
  --sp-0:  0;
  --sp-1:  4px;
  --sp-2:  8px;
  --sp-3:  12px;
  --sp-4:  16px;
  --sp-5:  24px;
  --sp-6:  32px;
  --sp-7:  48px;
  --sp-8:  64px;
  --sp-9:  96px;
  --sp-10: 128px;

  /* --- Radii ------------------------------------------------------------- */
  --r-0: 0;        /* NEOO is square-cornered: cards/buttons default to 0 */
  --r-1: 2px;
  --r-2: 4px;
  --r-pill: 999px;

  /* --- Shadows ----------------------------------------------------------- */
  --shadow-xs: 0 1px 2px rgba(0, 64, 42, 0.06);
  --shadow-sm: 0 2px 8px rgba(0, 64, 42, 0.08);
  --shadow-md: 0 12px 32px rgba(0, 64, 42, 0.12);
  --shadow-lg: 0 24px 60px rgba(0, 64, 42, 0.18);

  /* --- Motion ------------------------------------------------------------ */
  --ease-out:   cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast:   160ms;
  --dur-base:   240ms;
  --dur-slow:   480ms;
}

/* ==========================================================================
   Semantic helpers — drop these classes on real elements
   ========================================================================== */

.neoo-page {
  background: var(--bg-page);
  color: var(--fg-1);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-normal);
  -webkit-font-smoothing: antialiased;
}

/* Display / Header — Century Gothic Bold, tracked, uppercase by default. */
.neoo-display,
.neoo-h1, .neoo-h2 {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: var(--ls-display);
  text-transform: uppercase;
  color: var(--neoo-groen);
  line-height: var(--lh-tight);
}
.neoo-display { font-size: var(--fs-hero); }
.neoo-h1      { font-size: var(--fs-h1); }
.neoo-h2      { font-size: var(--fs-h2); }

/* Section title that sits above a green hairline rule. */
.neoo-section-title {
  font-family: var(--font-display);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: var(--ls-display);
  color: var(--neoo-groen);
  font-size: var(--fs-h3);
  line-height: var(--lh-snug);
}

/* Subtitle — Agile Sans, slightly larger than body, NOT uppercase. */
.neoo-subtitle {
  font-family: var(--font-subtitle);
  font-weight: 400;
  font-size: var(--fs-subtitle);
  line-height: var(--lh-snug);
  letter-spacing: 0.01em;
  color: var(--neoo-groen);
}

/* Eyebrow / kicker — uppercase Agile Sans, wide tracking. */
.neoo-eyebrow {
  font-family: var(--font-subtitle);
  font-weight: 400;
  font-size: var(--fs-eyebrow);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--neoo-groen);
}

/* Body */
.neoo-body {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: var(--fs-body);
  line-height: var(--lh-loose);
  color: var(--fg-1);
  text-wrap: pretty;
}
.neoo-body-lg { font-size: var(--fs-body-lg); line-height: var(--lh-loose); }
.neoo-body-sm { font-size: var(--fs-body-sm); }

/* Body alarm — Arboria Medium, used for highlighted lead-paragraph copy. */
.neoo-body-alarm {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: var(--fs-body);
  line-height: var(--lh-normal);
  color: var(--fg-1);
}

.neoo-caption {
  font-family: var(--font-body);
  font-size: var(--fs-caption);
  letter-spacing: 0.04em;
  color: var(--fg-2);
}

/* The signature green hairline — used above section titles, between blocks. */
.neoo-rule {
  display: block;
  width: 64px;
  height: 1.5px;
  background: var(--neoo-groen);
  border: 0;
  margin: 0 0 var(--sp-4);
}
.neoo-rule--full { width: 100%; }

/* Link */
.neoo-link {
  color: var(--neoo-groen);
  text-decoration: none;
  border-bottom: 1px solid currentColor;
  padding-bottom: 1px;
  transition: opacity var(--dur-fast) var(--ease-out);
}
.neoo-link:hover { opacity: 0.7; }

/* ============================================================================
   NEOO — Editorial site stylesheet
   Builds on colors_and_type.css. Plain HTML pages, shared nav + footer.
   ============================================================================ */

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }

body {
  background: var(--bg-page);
  color: var(--fg-1);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-normal);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

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

/* ----- Type helpers ---------------------------------------------------- */
.eyebrow {
  font-family: var(--font-subtitle);
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--neoo-groen);
  margin: 0;
}
.eyebrow--light { color: var(--neoo-cream); }
.eyebrow--rood  { color: var(--neoo-zalmrood); }
.eyebrow--muted { color: var(--fg-3); }

.h-display {
  font-family: var(--font-display);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: var(--neoo-groen);
  line-height: 0.95;
  margin: 0;
}
.h-display i,
.italic {
  font-family: "Times New Roman", "EB Garamond", serif;
  font-weight: 400;
  font-style: italic;
  text-transform: lowercase;
  letter-spacing: 0;
}
.h-display--light { color: var(--neoo-cream); }

.subtitle {
  font-family: var(--font-subtitle);
  font-size: var(--fs-subtitle);
  line-height: 1.25;
  color: var(--neoo-groen);
  letter-spacing: 0.01em;
  margin: 0;
}
.body {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 16px;
  line-height: 1.55;
  color: var(--fg-1);
  text-wrap: pretty;
  margin: 0;
}
.body--alarm { font-weight: 500; }
.body--lg    { font-size: 18px; }
.body--sm    { font-size: 14px; }
.body--muted { color: var(--fg-2); }
.body--light { color: rgba(255,249,250,0.78); }

/* ----- Rule (signature green hairline) -------------------------------- */
.rule {
  display: block;
  width: 64px;
  height: 1.5px;
  background: var(--neoo-groen);
  border: 0;
  margin: 0;
}
.rule--light { background: var(--neoo-cream); }
.rule--rood  { background: var(--neoo-zalmrood); }
.rule--full  { width: 100%; height: 1px; background: var(--border-hairline); }

/* ----- Buttons -------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-family: var(--font-subtitle);
  font-size: 13px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-decoration: none;
  padding: 14px 22px;
  border: 1px solid currentColor;
  background: transparent;
  color: var(--neoo-groen);
  transition: opacity var(--dur-fast) var(--ease-out), background var(--dur-fast), color var(--dur-fast);
  cursor: pointer;
}
.btn:hover { opacity: 0.7; }
.btn--filled    { background: var(--neoo-groen); color: var(--neoo-cream); border-color: var(--neoo-groen); }
.btn--filled:hover { background: #002e1d; opacity: 1; }
.btn--on-green  { background: var(--neoo-cream); color: var(--neoo-groen); border-color: var(--neoo-cream); }
.btn--ghost-light { color: var(--neoo-cream); border-color: var(--neoo-cream); }
.btn--rood      { background: var(--neoo-zalmrood); color: var(--neoo-cream); border-color: var(--neoo-zalmrood); }
.btn--sm        { padding: 10px 16px; font-size: 11px; }
/* Knop met een merkteken ervoor - de LinkedIn-verwijzing onderaan elke
   pagina. .btn zet de gap en de uitlijning al, hier alleen het formaat.
   Het teken erft currentColor, dus hij werkt op groen en op zand. */
.btn--icon svg  { width: 14px; height: 14px; flex: 0 0 auto; }

/* ----- Layout container ----------------------------------------------- */
.container { max-width: 1440px; margin: 0 auto; }
.gutter    { padding-left: 80px; padding-right: 80px; }

/* ============================================================================
   MASTHEAD — tiny editorial ribbon above the nav
   ============================================================================ */
.masthead {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 80px;
  background: var(--neoo-groen);
  color: var(--neoo-cream);
  font-family: var(--font-subtitle);
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}
.masthead__l, .masthead__r { display: flex; gap: 28px; }
.masthead__r b { font-weight: 400; color: var(--neoo-cream); }
.masthead__sep { opacity: 0.4; }

/* ============================================================================
   NAV
   ============================================================================ */
.nav {
  position: sticky; top: 0;
  z-index: 50;
  background: rgba(255, 249, 250, 0.94);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border-hairline);
}
.nav__inner {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 48px;
  padding: 28px 80px;
}
.nav__logo img { height: 72px; display: block; }
.nav__menu {
  display: flex;
  gap: 36px;
  list-style: none; padding: 0; margin: 0;
  justify-self: center;
}
.nav__menu a {
  font-family: var(--font-subtitle);
  font-size: 14px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--neoo-groen);
  text-decoration: none;
  position: relative;
  padding-bottom: 4px;
  transition: opacity var(--dur-fast);
}
.nav__menu a:hover { opacity: .6; }
.nav__menu a.is-active::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 100%; height: 1.5px;
  background: var(--neoo-zalmrood);
}
.nav__right { display: flex; align-items: center; gap: 20px; justify-self: end; }
.nav__right .btn--sm { font-size: 12px; padding: 11px 18px; }

/* The menu toggle belongs to the phone layout only; see the 780px block. */
.nav__burger { display: none; }
.nav__lang {
  font-family: var(--font-subtitle);
  font-size: 13px;
  letter-spacing: 0.16em;
  color: var(--fg-3);
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.nav__lang [data-lang] { transition: color var(--dur-fast, 160ms) var(--ease-out, ease-out); }
.nav__lang [data-lang].is-active { color: var(--neoo-groen); }
.nav__lang [data-lang]:hover { color: var(--neoo-groen); }

/* ============================================================================
   HERO — home
   ============================================================================ */
.hero {
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: 780px;
  border-bottom: 1px solid var(--border-hairline);
}
.hero__col--text {
  padding: 96px 64px 72px 80px;
  display: flex; flex-direction: column; justify-content: center;
  position: relative;
}
.hero__pageno {
  position: absolute;
  top: 32px; right: 32px;
  font-family: var(--font-subtitle);
  font-size: 11px;
  letter-spacing: 0.2em;
  color: var(--fg-3);
}
.hero__title {
  font-size: clamp(56px, 6.6vw, 116px) !important;
  line-height: 0.92 !important;
  letter-spacing: 0.015em;
  margin: 0;
  text-wrap: balance;
}
.hero__sub {
  max-width: 480px;
  margin-top: 36px;
  font-size: 22px;
}
.hero__meta {
  margin-top: 64px;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 24px;
  max-width: 540px;
  padding-top: 28px;
  border-top: 1px solid var(--border-hairline);
}
.hero__meta dt {
  font-family: var(--font-subtitle);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--fg-3);
  margin-bottom: 6px;
}
.hero__meta dd { margin: 0; font-family: var(--font-body); font-weight: 500; font-size: 15px; }

.hero__col--image {
  position: relative;
  background: var(--bg-muted);
  border-left: 1px solid var(--border-hairline);
}
.hero__caption {
  position: absolute;
  left: 32px; bottom: 32px;
  right: 32px;
  display: flex; gap: 14px;
  align-items: baseline;
  color: var(--neoo-cream);
  text-shadow: 0 1px 14px rgba(0,0,0,0.4);
  flex-wrap: wrap;
  z-index: 2;
}
.hero__caption-tag {
  font-family: var(--font-subtitle);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  background: var(--neoo-cream);
  color: var(--neoo-groen);
  padding: 6px 10px;
  text-shadow: none;
  margin-right: 8px;
}
.hero__caption-name {
  font-family: var(--font-display);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-size: 18px;
}
.hero__caption-loc {
  font-family: var(--font-subtitle);
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  opacity: 0.92;
}
.hero__pin {
  position: absolute;
  top: 32px; left: 32px;
  display: flex; flex-direction: column; gap: 8px;
  background: rgba(0, 40, 28, 0.78);
  color: var(--neoo-cream);
  padding: 16px 18px;
  font-family: var(--font-subtitle);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  max-width: 220px;
}
.hero__pin b { font-weight: 400; color: var(--neoo-cream); }

/* ============================================================================
   INTRO — two-column statement
   ============================================================================ */
.intro {
  padding: 120px 80px;
  border-bottom: 1px solid var(--border-hairline);
}
.intro__grid {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: 80px;
  max-width: 1280px; margin: 0 auto;
}
.intro__label .rule { margin-top: 14px; }
.intro__body { max-width: 760px; }

/* ============================================================================
   STATS — sage tint
   ============================================================================ */
.stats {
  padding: 72px 80px 64px;
}
.stats__grid {
  display: grid;
  /* Content-sized tracks, not 1fr. The volume figure is three times as wide as
     the other numbers, so `1fr` (= minmax(auto, 1fr)) resolved to max-content
     on narrow viewports and to four equal-but-oversized tracks on wide ones —
     either way each number sat off-centre in its own track. Sizing every track
     to its content and centring the row keeps the dividers tight to the
     figures they separate. */
  grid-template-columns: repeat(4, auto);
  justify-content: center;
  gap: 0;
  max-width: 1280px; margin: 0 auto;
}
.stat {
  display: flex; flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 0 32px;
  border-left: 1px solid var(--border-subtle);
}
/* Only the rule goes — the padding stays on all four so the centred columns
   keep matching gutters. */
.stat:first-child { border-left: 0; }
.stat__num {
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--neoo-groen);
  font-size: 64px;
  line-height: 1;
  letter-spacing: 0.02em;
}
.stat__num .unit {
  font-size: 28px;
  letter-spacing: 0.04em;
  margin-left: 4px;
  vertical-align: 0.2em;
}
.stat__rule {
  display: block;
  width: 32px; height: 1.5px;
  background: var(--neoo-groen);
  margin: 18px 0 12px;
}
.stat__lbl {
  font-family: var(--font-subtitle);
  font-size: 13px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--neoo-groen);
}
.stats__foot {
  max-width: 1280px;
  margin: 56px auto 0;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding-top: 18px;
  border-top: 1px solid var(--border-subtle);
}
.stats__foot small {
  font-family: var(--font-subtitle);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--neoo-groen);
  opacity: 0.7;
}

/* ============================================================================
   LETTER — quote section
   ============================================================================ */
.letter {
  padding: 120px 80px;
  border-bottom: 1px solid var(--border-hairline);
  background: var(--bg-page);
}
.letter__grid {
  display: block;
  max-width: 1280px; margin: 0 auto;
}
.letter__body { max-width: 980px; margin: 0 auto; text-align: center; }
.letter__founders {
  margin-top: 56px;
  display: flex;
  gap: 56px;
  flex-wrap: wrap;
  justify-content: center;
}
.founder {
  margin: 0;
  display: flex;
  align-items: center;
  gap: 18px;
}
.founder__img {
  width: 92px; height: 92px;
  background: var(--bg-muted);
  border-radius: 50%;
  overflow: hidden;
  flex: 0 0 auto;
}
.founder__img image-slot { border-radius: 50%; }
.letter__quote {
  font-family: "Times New Roman", "EB Garamond", serif;
  font-style: italic;
  font-weight: 400;
  font-size: 48px;
  line-height: 1.18;
  color: var(--neoo-groen);
  max-width: 880px;
  margin: 0;
  text-wrap: balance;
}
.letter__quote .accent { color: var(--neoo-zalmrood); }
.letter__sig {
  margin-top: 48px;
  display: flex; align-items: center; gap: 24px;
}
.letter__sig-img {
  width: 64px; height: 64px;
  background: var(--bg-muted);
  overflow: hidden;
  border-radius: 50%;
}
.letter__sig-img image-slot { border-radius: 50%; }

/* ============================================================================
   SECTION HEAD (shared)
   ============================================================================ */
.section-head {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  align-items: end;
  padding-bottom: 64px;
  border-bottom: 1px solid var(--border-hairline);
  margin-bottom: 64px;
}

/* ============================================================================
   PROJECTS — homepage grid (2x2)
   ============================================================================ */
.projects { padding: 120px 80px; border-bottom: 1px solid var(--border-hairline); }
.projects__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 72px 56px;
}
.proj-card { display: block; text-decoration: none; color: inherit; }
.proj-card__img {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 3;
  background: var(--bg-muted);
  overflow: hidden;
}
.proj-card__img > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.proj-card__num {
  position: absolute;
  top: 16px; left: 16px;
  font-family: var(--font-subtitle);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  background: var(--neoo-cream);
  color: var(--neoo-groen);
  padding: 6px 10px;
}
/* A project can hold several phases at once, so a card carries a badge per
   status. They hang in one right-aligned row and wrap onto the next line on a
   narrow card, which keeps the longest label from pushing the others off. */
.proj-card__statuses {
  position: absolute;
  top: 16px; right: 16px;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 6px;
}
.proj-card__status {
  font-family: var(--font-subtitle);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 6px 10px;
  background: rgba(255, 249, 250, 0.88);
  color: var(--neoo-groen);
}
.proj-card__status--done  { background: var(--neoo-sage); }
.proj-card__status--build { background: var(--neoo-zalmrood); color: var(--neoo-cream); }
.proj-card__title {
  font-family: var(--font-display);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--neoo-groen);
  font-size: 28px;
  margin: 24px 0 0;
}
.proj-card__row {
  display: flex; gap: 24px;
  font-family: var(--font-subtitle);
  font-size: 13px;
  letter-spacing: 0.06em;
  color: var(--fg-2);
  margin: 14px 0;
}
.proj-card__type {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 14px;
  color: var(--fg-1);
  margin: 0;
}
.projects__cta { text-align: center; margin-top: 72px; }

/* ============================================================================
   NEWS — overview tiles + article pages
   ============================================================================ */
/* Two abreast, not the three the project grid runs: news titles are full
   sentences, and the wider measure is what keeps them readable. Sized a
   step under the 28px project names all the same, or a long headline
   swallows the tile. The 1100px query below already takes the project
   grid to two columns, so only the desktop track count differs. */
.project-grid.news-grid { grid-template-columns: repeat(2, 1fr); gap: 72px 48px; }
.news-grid .proj-card__title { font-size: 22px; letter-spacing: 0.03em; line-height: 1.3; }
/* the phone rule for .project-grid loses on specificity against the pair
   above, so the collapse to one column is restated here */
@media (max-width: 560px) {
  .project-grid.news-grid { grid-template-columns: 1fr; gap: 36px; }
}

.na-body {
  padding: 96px 80px;
  border-bottom: 1px solid var(--border-hairline);
}
.na-body__inner { max-width: 820px; margin: 0 auto; }
.na-body__inner p + p { margin-top: 18px; }

/* the credits under a story: partners, architects, advisers */
.na-meta {
  margin-top: 44px;
  padding-top: 28px;
  border-top: 1px solid var(--border-hairline);
}
.na-meta p { font-size: 14px; line-height: 1.7; color: var(--fg-2); margin: 0 0 10px; }
.na-meta b { font-weight: 600; color: var(--fg-1); }
.na-tags {
  margin-top: 28px;
  font-family: var(--font-subtitle);
  font-size: 12px;
  letter-spacing: 0.04em;
  line-height: 2;
  color: var(--fg-3);
}
.na-body__inner .btn { margin-top: 32px; }

/* the pictures that came with a story, under the text */
.na-gallery {
  padding: 0 80px 96px;
  border-bottom: 1px solid var(--border-hairline);
}
.na-gallery__grid {
  max-width: 1280px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  grid-auto-rows: clamp(260px, 32vw, 440px);
  gap: 16px;
}
.na-gallery__grid img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  background: var(--bg-muted);
}
@media (max-width: 780px) {
  .na-gallery { padding: 0 24px 64px; }
  .na-gallery__grid { grid-auto-rows: clamp(220px, 44vw, 320px); }
}

/* prev / next: one bar, the two directions on their own halves */
.na-nav {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 32px;
  padding: 48px 80px;
  border-bottom: 1px solid var(--border-hairline);
}
.na-nav__link {
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-width: 44%;
  text-decoration: none;
  color: inherit;
  transition: opacity var(--dur-fast, 160ms) var(--ease-out, ease-out);
}
.na-nav__link:hover { opacity: 0.65; }
.na-nav__link--next { margin-left: auto; text-align: right; align-items: flex-end; }
.na-nav__title {
  font-family: var(--font-display);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  font-size: 19px;
  line-height: 1.25;
  color: var(--neoo-groen);
}
@media (max-width: 780px) {
  .na-body { padding: 64px 24px; }
  .na-nav { padding: 36px 24px; gap: 20px; }
  .na-nav__title { font-size: 16px; }
}

/* ============================================================================
   PROJECTS MARQUEE — home, two scroll-driven rows (opposite directions)
   ============================================================================ */
.pm {
  padding: 120px 0;
  border-bottom: 1px solid var(--border-hairline);
  overflow: hidden;
}
/* single-row variant — top-of-page band */
.pm--solo { padding: 40px 0 48px; }
.pm--solo .pm-card .proj-card__img { height: 440px; }
@media (max-width: 900px) { .pm--solo .pm-card .proj-card__img { height: 320px; } }
@media (max-width: 520px) { .pm--solo { padding: 24px 0 28px; } .pm--solo .pm-card .proj-card__img { height: 240px; } }
.pm__head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 24px;
  padding: 0 80px;
  margin: 0 auto 56px;
  max-width: 1600px;
}
.pm__row { overflow: hidden; display: flex; justify-content: flex-start; }
.pm__row--grab { cursor: grab; touch-action: pan-y; }
.pm__row--grab.is-dragging { cursor: grabbing; }
.pm__row--bottom { margin-top: 128px; }
.pm__track {
  display: flex;
  gap: 128px;
  flex: 0 0 auto;
  padding: 0 14px;
  will-change: transform;
}
.pm-card { flex: 0 0 auto; display: block; text-decoration: none; color: inherit; -webkit-user-drag: none; user-select: none; }
.pm-card img { -webkit-user-drag: none; user-select: none; pointer-events: none; }
.pm-card .proj-card__img {
  height: 560px;
  width: auto;
  margin: 0;
}
.pm-card--v .proj-card__img { aspect-ratio: 3 / 4; }
.pm-card--h .proj-card__img { aspect-ratio: 3 / 2; }
.pm-card--about .proj-card__img { aspect-ratio: 16 / 9; }
.pm-card .proj-card__img img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform 0.6s var(--ease-out, ease-out);
}
.pm-card:hover .proj-card__img img { transform: scale(1.04); }

@media (max-width: 900px) {
  .pm { padding: 88px 0; }
  .pm__head { padding: 0 32px; margin-bottom: 40px; }
  .pm-card .proj-card__img { height: 380px; }
}
@media (max-width: 520px) {
  .pm { padding: 56px 0; }
  .pm__head { padding: 0 20px; flex-direction: column; align-items: flex-start; gap: 18px; }
  .pm-card .proj-card__img { height: 280px; }
  .pm__track { gap: 28px; }
  .pm__row--bottom { margin-top: 28px; }
}

/* ============================================================================
   PRESS — partners / mentions strip
   ============================================================================ */
.press {
  padding: 80px 80px 96px;
  border-bottom: 1px solid var(--border-hairline);
}
.press__head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 32px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--border-hairline);
}
.press__title {
  font-family: var(--font-subtitle);
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--neoo-groen);
  margin: 0;
}
.press__year {
  font-family: var(--font-subtitle);
  font-size: 11px;
  letter-spacing: 0.16em;
  color: var(--fg-3);
}
.press__grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 0;
}
.press__cell {
  padding: 32px 24px;
  border-left: 1px solid var(--border-hairline);
  display: flex; flex-direction: column;
  align-items: flex-start; gap: 12px;
}
.press__cell:first-child { border-left: 0; padding-left: 0; }
.press__cell-name {
  font-family: var(--font-display);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-size: 16px;
  color: var(--neoo-groen);
}
.press__cell-meta {
  font-family: var(--font-subtitle);
  font-size: 11px;
  letter-spacing: 0.14em;
  color: var(--fg-3);
  text-transform: uppercase;
}
.press__cell-title {
  font-family: var(--font-body);
  font-size: 14px;
  color: var(--fg-1);
  line-height: 1.4;
}

/* ============================================================================
   PROCESS / phases — 3 cards
   ============================================================================ */
.process { padding: 120px 80px; border-bottom: 1px solid var(--border-hairline); }
.phases {
  list-style: none; padding: 0; margin: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 64px;
}
.phase { padding-top: 28px; border-top: 1.5px solid var(--neoo-groen); }
.phase__num {
  font-family: var(--font-subtitle);
  font-size: 13px;
  letter-spacing: 0.2em;
  color: var(--neoo-zalmrood);
}
.phase__title {
  font-family: var(--font-display);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--neoo-groen);
  font-size: 32px;
  margin: 18px 0;
}

/* ============================================================================
   CTA — full green
   ============================================================================ */
.cta {
  background: var(--neoo-groen);
  padding: 52px 80px;
}
.cta__inner { max-width: 900px; margin: 0 auto; }
/* The band's vertical rhythm used to sit in inline styles on each child,
   repeated across all 51 pages that carry it. It lives here now so the
   height is tuned in one place. */
.cta .rule { margin: 14px 0 24px; }
.cta__title { font-size: clamp(38px, 5vw, 60px); }
.cta__lead { margin-top: 20px; max-width: 520px; }
.cta__actions { margin-top: 28px; display: flex; gap: 16px; flex-wrap: wrap; }
.cta__contact {
  margin-top: 26px;
  font-family: var(--font-subtitle);
  font-size: 13px;
  letter-spacing: 0.04em;
  color: var(--neoo-cream);
  opacity: 0.72;
  display: flex;
  gap: 6px 20px;
  flex-wrap: wrap;
}
.cta__contact a { color: inherit; text-decoration: none; }
.cta__contact a:hover { text-decoration: underline; }

/* ============================================================================
   PAGE HEADER (subpages)
   ============================================================================ */
.page-header {
  padding: 120px 80px 88px;
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 80px;
  align-items: end;
  border-bottom: 1px solid var(--border-hairline);
}
.page-header__title {
  font-size: clamp(72px, 8vw, 120px) !important;
  line-height: 0.9 !important;
  margin: 0;
}
.page-header__n {
  font-family: var(--font-subtitle);
  font-size: 12px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--neoo-zalmrood);
  padding-bottom: 14px;
  border-bottom: 1.5px solid var(--neoo-zalmrood);
  width: 64px;
  margin-bottom: 32px;
}
.page-header__r { display: flex; flex-direction: column; align-items: flex-start; }

/* ----- Wide variant — for a header whose intro is a paragraph, not a line
   The projects page carries several sentences up here, and at 380px they
   stack into a tall narrow column beside a title that needs nowhere near
   its half of the row. Sizing the title column to the words themselves
   hands the slack to the text, so the band gets shorter as the measure
   gets wider. Large screens only: below 1100px the title is close enough
   to filling its side that there is no slack left to give away. */
.page-header--wide .page-header__r p { max-width: 380px; }
@media (min-width: 1101px) {
  .page-header--wide { grid-template-columns: auto 1fr; }
  .page-header--wide .page-header__r p { max-width: 560px; }
  /* The measure is capped, so on a wide screen the column is roomier than the
     paragraph needs. Hand that slack to the gap in the middle instead of to the
     right margin: the words end where the band ends, level with the filters and
     the grid below. */
  .page-header--wide .page-header__r { align-items: flex-end; }
}

/* ============================================================================
   FILTER STRIP (projects overview)
   ============================================================================ */
.filter {
  padding: 36px 80px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid var(--border-hairline);
  flex-wrap: wrap;
  gap: 24px;
}
.filter__group { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.filter__chip {
  font-family: var(--font-subtitle);
  font-size: 12.5px;
  letter-spacing: 0.06em;
  padding: 8px 16px;
  border: 1px solid var(--border-hairline);
  color: var(--fg-2);
  text-decoration: none;
  background: none;
  cursor: pointer;
  transition: all var(--dur-fast);
}
.filter__chip:hover { border-color: var(--neoo-groen); color: var(--neoo-groen); }
.filter__chip.is-on {
  background: var(--neoo-groen);
  color: var(--neoo-cream);
  border-color: var(--neoo-groen);
}
.filter__sort {
  display: flex; align-items: center; gap: 14px;
  font-family: var(--font-subtitle);
  font-size: 13px; color: var(--neoo-groen);
  letter-spacing: 0.04em;
}

/* Project grid (3-column) for overview page */
.project-grid {
  padding: 72px 80px 56px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 64px 40px;
}

/* ----- Project blocks: featured work, then the rest -----
   A block hides itself when the filter leaves it with nothing, so its heading
   never sits above an empty stretch of page. */
.project-block[hidden] { display: none; }
.project-block + .project-block { border-top: 1px solid var(--border-hairline); }
.project-block__head { padding: 64px 80px 0; }
.project-block__head .rule { margin-top: 16px; }
.project-block__head + .project-grid { padding-top: 34px; }
.reveal-card {
  opacity: 0;
  transform: translateY(34px);
  transition: opacity 0.7s var(--ease-out, ease-out), transform 0.7s var(--ease-out, ease-out);
  will-change: opacity, transform;
}
.reveal-card.is-visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .reveal-card { opacity: 1; transform: none; transition: none; }
}

/* ============================================================================
   PROJECT DETAIL
   ============================================================================ */
.pd-hero {
  position: relative;
  width: 100%;
  height: 720px;
  background: var(--bg-muted);
  overflow: hidden;
}
/* Three portraits abreast where a single photograph would go. The team piece
   introduces three people and none of them leads; at desktop width each column
   lands on the portraits' own 2:3, so nothing is cropped. Narrower than that
   and cover trims the sides, which leaves the person intact. */
.pd-hero--triptych {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2px;
}
.pd-hero--triptych img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}

.pd-hero__caption {
  position: absolute;
  left: 80px; bottom: 56px;
  z-index: 2;
  color: var(--neoo-cream);
  text-shadow: 0 2px 18px rgba(0,0,0,0.4);
}
.pd-hero__caption .eyebrow { color: var(--neoo-cream); opacity: 0.85; }
.pd-hero::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(0,40,28,0.05) 50%, rgba(0,40,28,0.55) 100%);
  pointer-events: none;
}
.pd-hero__credit {
  position: absolute;
  right: 80px; bottom: 56px;
  z-index: 2;
  color: var(--neoo-cream);
  text-align: right;
  font-family: var(--font-subtitle);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  opacity: 0.8;
}

/* Terug naar het overzicht. Staat tussen de hero en .pd-meta en volgt
   dezelfde gutters, zodat de knop links uitlijnt met de metategels eronder.
   De CTA onderaan wijst ook naar projecten.html, maar wie halverwege
   terugwil hoeft dan niet eerst de hele pagina door. */
.pd-back { padding: 28px 80px 0; }

.pd-meta {
  padding: 64px 80px;
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 32px;
  border-bottom: 1px solid var(--border-hairline);
}
.pd-meta dt {
  font-family: var(--font-subtitle);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--fg-3);
  margin-bottom: 8px;
}
.pd-meta dd {
  margin: 0;
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 16px;
  color: var(--fg-1);
}

.pd-body {
  padding: 120px 80px;
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 96px;
  max-width: 1280px;
  margin: 0 auto;
  border-bottom: 1px solid var(--border-hairline);
}
.pd-body__lead {
  font-family: var(--font-body);
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
  color: var(--fg-1);
  font-size: 18px;
  line-height: 1.55;
  margin: 0 0 18px;
}
.pd-body p + p { margin-top: 18px; }

/* award seal — marks a project that won a prize, sits under its story */
.pd-award {
  margin-top: 40px;
  display: inline-flex;
  align-items: center;
  gap: 20px;
  padding: 16px 30px 16px 24px;
  background: var(--bg-inverse);
  color: var(--fg-on-green);
  border-radius: 999px;
}
.pd-award__text { display: block; }
.pd-award__mark {
  width: 42px;
  height: 42px;
  flex: none;
  color: var(--neoo-sage);
}
.pd-award__eye {
  display: block;
  font-family: var(--font-subtitle);
  font-size: 11px;
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--neoo-sage);
}
.pd-award__title {
  display: block;
  margin-top: 5px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 21px;
  letter-spacing: var(--ls-display);
  line-height: 1.15;
}
@media (max-width: 720px) {
  .pd-award {
    width: 100%;
    gap: 16px;
    padding: 16px 22px 16px 18px;
    border-radius: 20px;
  }
  .pd-award__title { font-size: 18px; }
}

/* link out to a project's own site, under the story it belongs to */
.pd-site { margin-top: 36px; }

.pd-gallery {
  padding: 120px 80px;
  border-bottom: 1px solid var(--border-hairline);
}
.pd-gallery__grid {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 16px;
}
.pd-gallery__cell {
  background: var(--bg-muted);
  overflow: hidden;
}
.pd-gallery__cell--tall { aspect-ratio: 4 / 5; }
.pd-gallery__cell--wide { aspect-ratio: 4 / 3; }
.pd-gallery__row2 {
  margin-top: 16px;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 16px;
}

/* ----- Live webcam — YouTube, starts by itself -----
   The green panel is what shows while the player loads; the script swaps it
   the moment the webcam scrolls into view, so there is nothing to press. */
.pd-webcam {
  padding: 120px 80px;
  border-bottom: 1px solid var(--border-hairline);
}
.pd-webcam__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 24px;
}
.ytcam {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  background: var(--neoo-groen);
  color: var(--neoo-cream);
  overflow: hidden;
  border: 0;
  padding: 0;
  cursor: pointer;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 18px;
  font: inherit;
}
.ytcam iframe {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  border: 0;
}
.ytcam__label {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-subtitle);
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
/* the pulse marks a stream that is running now, not a recording */
.ytcam__dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--neoo-zalmrood);
  animation: ytcamPulse 2s ease-in-out infinite;
}
@keyframes ytcamPulse { 50% { opacity: 0.25; } }
@media (prefers-reduced-motion: reduce) {
  .ytcam__dot { animation: none; }
}
.ytcam.is-playing .ytcam__label { display: none; }
.ytcam__caption {
  margin: 12px 0 0;
  font-family: var(--font-subtitle);
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--fg-3);
}

.pd-program {
  padding: 120px 80px;
  background: var(--bg-sage-tint);
  border-bottom: 1px solid var(--border-hairline);
}
.pd-program__grid {
  display: grid;
  grid-template-columns: 320px 1fr;
  gap: 80px;
  align-items: start;
}
.pd-program__list {
  list-style: none; padding: 0; margin: 0;
}
.pd-program__row {
  display: grid;
  grid-template-columns: 80px 1fr 120px 120px;
  gap: 24px;
  padding: 20px 0;
  border-top: 1px solid var(--border-subtle);
  align-items: baseline;
  font-family: var(--font-body);
  font-size: 16px;
}
.pd-program__row:last-child { border-bottom: 1px solid var(--border-subtle); }
.pd-program__row b {
  font-family: var(--font-display);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--neoo-groen);
  font-size: 16px;
}
.pd-program__row span:last-child { text-align: right; color: var(--fg-2); }

.pd-team {
  padding: 120px 80px;
  border-bottom: 1px solid var(--border-hairline);
}
.pd-team__grid {
  display: grid;
  grid-template-columns: 320px 1fr;
  gap: 80px;
  align-items: start;
}
.pd-team__list {
  list-style: none; padding: 0; margin: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px 48px;
}
.pd-team__row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 18px 0;
  border-top: 1px solid var(--border-hairline);
}
.pd-team__role {
  font-family: var(--font-subtitle);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--fg-3);
}
.pd-team__name {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 16px;
  color: var(--neoo-groen);
}

.pd-next {
  display: grid;
  grid-template-columns: 1fr 1fr;
  border-bottom: 1px solid var(--border-hairline);
}
.pd-next > a {
  display: block;
  position: relative;
  text-decoration: none;
  color: inherit;
  padding: 80px;
  border-right: 1px solid var(--border-hairline);
  background: var(--bg-page);
  transition: background var(--dur-base);
}
.pd-next > a:last-child { border-right: 0; }
.pd-next > a:hover { background: var(--bg-muted); }
.pd-next__dir {
  font-family: var(--font-subtitle);
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--fg-3);
}
.pd-next__name {
  font-family: var(--font-display);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--neoo-groen);
  font-size: 36px;
  margin-top: 14px;
}
.pd-next__loc {
  font-family: var(--font-subtitle);
  font-size: 13px;
  color: var(--fg-2);
  letter-spacing: 0.08em;
  margin-top: 10px;
}

/* ============================================================================
   ABOUT / MANIFESTO
   ============================================================================ */
.manifesto {
  padding: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: 720px;
  border-bottom: 1px solid var(--border-hairline);
}
.manifesto__img { background: var(--bg-muted); }
.manifesto__text { padding: 120px 80px; display: flex; flex-direction: column; justify-content: center; }
.manifesto__lead {
  font-family: var(--font-display);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: var(--neoo-groen);
  font-size: 56px;
  line-height: 0.98;
  max-width: 500px;
  margin: 0 0 28px;
}

/* ----- ABOUT INTRO — general description statement ----- */
.about-intro {
  padding: 120px 80px;
  border-bottom: 1px solid var(--border-hairline);
}
.about-intro__grid {
  display: grid;
  grid-template-columns: 300px 1fr;
  gap: 80px;
  max-width: 1320px;
  margin: 0 auto;
  align-items: start;
}
.about-intro__label .rule { margin-top: 16px; }
.about-intro__kicker {
  margin-top: 32px;
  font-family: var(--font-subtitle);
  font-size: 13px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--fg-3);
  line-height: 1.7;
}
.about-intro__lead {
  font-family: var(--font-display);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: var(--neoo-groen);
  font-size: clamp(34px, 3.4vw, 52px);
  line-height: 1.06;
  margin: 0 0 40px;
  max-width: 900px;
  text-wrap: balance;
}
.about-intro__lead i {
  font-family: "Times New Roman", "EB Garamond", serif;
  font-weight: 400;
  font-style: italic;
  text-transform: lowercase;
  letter-spacing: 0;
}
.about-intro__body { max-width: 760px; }
.about-intro__body p + p { margin-top: 20px; }

/* ----- PILLARS — the four themes, alternating editorial blocks ----- */
.pillar {
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: 660px;
  border-bottom: 1px solid var(--border-hairline);
}
.pillar__media {
  position: relative;
  background: var(--bg-muted);
  overflow: hidden;
}
.pillar__media image-slot { width: 100%; height: 100%; }
/* hover zoom — same affordance as the project cards */
.pillar__media img {
  transition: transform 0.7s cubic-bezier(0.22, 0.61, 0.36, 1);
}
@media (hover: hover) {
  .pillar__media:hover img { transform: scale(1.045); }
}
.pillar__no {
  position: absolute;
  top: 28px; left: 28px;
  z-index: 2;
  font-family: var(--font-subtitle);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  background: var(--neoo-cream);
  color: var(--neoo-groen);
  padding: 7px 12px;
}
.pillar__body {
  padding: 110px 80px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.pillar__title {
  font-family: var(--font-display);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: var(--neoo-groen);
  font-size: clamp(44px, 4.6vw, 68px);
  line-height: 0.98;
  /* The eyebrow that used to sit above is gone, so the title leads the block
     and the gap below belongs to .pillar__sub instead. */
  margin: 0 0 18px;
  max-width: 11ch;
}
.pillar__title i {
  font-family: "Times New Roman", "EB Garamond", serif;
  font-weight: 400;
  font-style: italic;
  text-transform: lowercase;
  letter-spacing: 0;
}
/* Carries the accent colour the eyebrow used to hold, now below the title
   rather than above it. Sits between the title and its rule. */
.pillar__sub {
  font-family: var(--font-subtitle);
  font-size: clamp(17px, 1.5vw, 20px);
  line-height: 1.35;
  color: var(--neoo-zalmrood);
  max-width: 32ch;
  margin: 0 0 30px;
}
/* One row under the last pillar, carrying the route into the about page.
   The hairline that closes the pillar run moves below this row (see
   .pillar--tail): drawn above the button it reads as the start of the
   projects band rather than the end of the pillars. */
.pillar--tail { border-bottom: 0; }
.pillar-more {
  display: flex;
  /* Horizontal padding tracks .pillar__body at every breakpoint so the button
     lines up with the column of text above it. */
  padding: clamp(32px, 4vw, 48px) 80px;
  border-bottom: 1px solid var(--border-hairline);
}
/* ----- FEATURED — three of the highlighted projects, portrait -----
   No top padding: the gap to the button above is that row's bottom padding.
   Horizontal padding tracks .pillar__body so the whole run lines up. */
.feat { padding: 0 80px clamp(56px, 6vw, 88px); }
.feat__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.feat__card { display: block; text-decoration: none; color: inherit; }
.feat__img {
  aspect-ratio: 3 / 4;
  overflow: hidden;
  background: var(--bg-muted);
  margin-bottom: 18px;
}
.feat__img img {
  width: 100%; height: 100%;
  object-fit: cover; display: block;
}
@media (prefers-reduced-motion: no-preference) {
  .feat__img img { transition: transform 0.6s cubic-bezier(.2,.7,.2,1); }
  .feat__card:hover .feat__img img { transform: scale(1.04); }
}
.feat__name {
  font-family: var(--font-display);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: var(--neoo-groen);
  font-size: 20px;
  line-height: 1.15;
  margin: 0;
}
.feat__city, .feat__type {
  font-family: var(--font-subtitle);
  font-size: 13px;
  letter-spacing: 0.04em;
  margin: 6px 0 0;
}
.feat__city { color: var(--neoo-groen); }
.feat__type { color: var(--fg-3); }
.feat__foot { margin-top: clamp(32px, 4vw, 44px); }
.pillar__text { max-width: 520px; }
.pillar__text p + p { margin-top: 18px; }
/* flipped row: text on the left, media on the right */
.pillar--flip .pillar__media { order: 2; border-left: 1px solid var(--border-hairline); }
.pillar:not(.pillar--flip) .pillar__body { border-left: 1px solid var(--border-hairline); }

.about-intro__grid--solo { grid-template-columns: 1fr; gap: 0; text-align: center; }
.about-intro__grid--solo .about-intro__lead { margin-left: auto; margin-right: auto; }
.about-intro__grid--solo .about-intro__body { margin-left: auto; margin-right: auto; }

/* ----- FILM — Vimeo embed (click-to-load facade) ----- */
.about-film {
  padding: 0 80px 130px;
  border-bottom: 1px solid var(--border-hairline);
}
.about-film__inner { max-width: 1100px; margin: 0 auto; }
.vimeo {
  position: relative;
  aspect-ratio: 16 / 9;
  background: var(--neoo-groen);
  overflow: hidden;
  cursor: pointer;
}
.vimeo iframe {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  border: 0;
}
.vimeo__poster {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
}
.vimeo::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(0,38,24,0.05), rgba(0,38,24,0.30));
  pointer-events: none;
  transition: opacity 0.3s ease;
}
.vimeo.is-playing::after { opacity: 0; }
.vimeo__play {
  position: absolute;
  bottom: 28px; left: 32px;
  z-index: 2;
  width: 64px; height: 64px;
  border-radius: 50%;
  border: 0;
  background: var(--neoo-cream);
  color: var(--neoo-groen);
  display: grid;
  place-items: center;
  cursor: pointer;
  padding-left: 4px;
  transition: transform 0.25s var(--ease-out, ease-out), background 0.25s ease;
}
.vimeo__play:hover { transform: scale(1.08); background: #fff; }
.vimeo__label {
  position: absolute;
  bottom: 28px; left: 112px;
  height: 64px;
  display: flex;
  align-items: center;
  z-index: 2;
  font-family: var(--font-subtitle);
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--neoo-cream);
}
.vimeo.is-playing .vimeo__play,
.vimeo.is-playing .vimeo__label { display: none; }

.timeline {
  padding: 140px 80px;
  background: var(--neoo-groen);
  color: var(--neoo-cream);
}
.timeline__head { max-width: 720px; margin-bottom: 64px; }
.timeline__head .h-display { color: var(--neoo-cream); }
.timeline__list { list-style: none; padding: 0; margin: 0; max-width: 1280px; }
.timeline__row {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: 80px;
  padding: 36px 0;
  border-top: 1px solid rgba(255,249,250,0.18);
  align-items: baseline;
}
.timeline__row:last-child { border-bottom: 1px solid rgba(255,249,250,0.18); }
.timeline__y {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 56px;
  letter-spacing: 0.02em;
  color: var(--neoo-cream);
}
.timeline__t {
  font-family: var(--font-display);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: 26px;
  color: var(--neoo-cream);
  margin: 0 0 8px;
}
.timeline__d {
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.55;
  color: rgba(255,249,250,0.75);
  margin: 0;
  max-width: 720px;
}

/* ============================================================================
   TEAM
   ============================================================================ */
.team-grid {
  padding: 80px 80px 120px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 40px 28px;
  border-bottom: 1px solid var(--border-hairline);
}

/* Partners — centered hero row above the rest of the team */
.partners-section {
  padding: 32px 80px 80px;
  border-bottom: 1px solid var(--border-hairline);
}
.partners-section__head {
  text-align: center;
  max-width: 720px;
  margin: 0 auto 56px;
}
.partners-section__head .rule {
  margin: 18px auto 24px;
  max-width: 60px;
}
.partners-row {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 40px 28px;
  max-width: 1280px;
  margin: 0 auto;
}
.partners-row .team-cell__photo {
  aspect-ratio: 4 / 5;
}
.partners-row .team-cell__name {
  font-size: 19px;
}
.partners-row .team-cell__role {
  color: var(--neoo-groen);
}

/* Team — section divider above the specialist grid */
.team-section__head {
  text-align: center;
  padding: 80px 80px 0;
  max-width: 720px;
  margin: 0 auto;
}
.team-section__head .rule {
  margin: 18px auto 24px;
  max-width: 60px;
}
.team-cell {}
.team-cell__photo {
  width: 100%;
  aspect-ratio: 3 / 4;
  background: var(--bg-muted);
  overflow: hidden;
  margin-bottom: 18px;
}
.team-cell__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.team-cell__name {
  font-family: var(--font-display);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: 18px;
  color: var(--neoo-groen);
  margin: 0;
}
.team-cell__role {
  font-family: var(--font-subtitle);
  font-size: 13px;
  letter-spacing: 0.04em;
  color: var(--fg-2);
  margin: 6px 0 0;
}

/* ============================================================================
   INVESTORS
   ============================================================================ */
.inv-approach { padding: 120px 80px; }
.inv-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: end;
  padding-bottom: 48px;
}
.inv-row + .inv-row { padding-top: 48px; border-top: 1px solid var(--border-hairline); }

.inv-stats {
  background: var(--bg-sage-tint);
  padding: 96px 80px;
  border-top: 1px solid var(--border-hairline);
  border-bottom: 1px solid var(--border-hairline);
}
.inv-stats__head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 48px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--border-subtle);
}
.inv-stats__grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 0;
}
.inv-stats__grid > div {
  padding: 0 24px;
  border-left: 1px solid var(--border-subtle);
}
.inv-stats__grid > div:first-child { border-left: 0; padding-left: 0; }
.inv-stats__n {
  display: block;
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: 0.02em;
  font-size: 40px;
  line-height: 1;
  color: var(--neoo-groen);
}
.inv-stats__l {
  display: block;
  font-family: var(--font-subtitle);
  font-size: 12px;
  letter-spacing: 0.08em;
  color: var(--neoo-groen);
  margin-top: 18px;
}

.inv-contact {
  display: grid;
  grid-template-columns: 1fr 1fr;
  border-bottom: 1px solid var(--border-hairline);
}
.inv-contact__img { background: var(--bg-muted); min-height: 560px; }
.inv-contact__text { padding: 120px 80px; display: flex; flex-direction: column; justify-content: center; }
.inv-card {
  margin-top: 40px;
  display: grid;
  grid-template-columns: 96px 1fr;
  gap: 24px;
  align-items: center;
  padding: 28px;
  background: var(--bg-muted);
}
.inv-card__photo {
  width: 96px; height: 96px;
  border-radius: 50%;
  background: var(--bg-page);
  overflow: hidden;
}
.inv-card__photo image-slot { border-radius: 50%; }

/* ============================================================================
   CONTACT
   ============================================================================ */
.contact {
  padding: 96px 80px 120px;
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 80px;
}
.contact-form {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 28px;
  margin-top: 32px;
}
.contact-form label { display: flex; flex-direction: column; gap: 10px; }
.contact-form label span {
  font-family: var(--font-subtitle);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--fg-2);
}
.contact-form input, .contact-form textarea {
  font-family: var(--font-body);
  font-size: 16px;
  padding: 14px 0;
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--border-hairline);
  color: var(--neoo-zwart);
  outline: none;
  transition: border-color var(--dur-fast);
}
.contact-form input:focus, .contact-form textarea:focus { border-bottom-color: var(--neoo-groen); }
.contact-form__select {
  display: flex; gap: 8px; flex-wrap: wrap;
  padding: 8px 0 0;
}
.contact-form__select a {
  font-family: var(--font-subtitle);
  font-size: 12.5px;
  padding: 8px 14px;
  border: 1px solid var(--border-hairline);
  color: var(--fg-2);
  text-decoration: none;
}
.contact-form__select a.is-on {
  background: var(--neoo-groen); color: var(--neoo-cream); border-color: var(--neoo-groen);
}
.contact-form__full { grid-column: 1 / -1; }
.contact-form__submit {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 16px;
}
.contact-form__submit small {
  font-family: var(--font-subtitle);
  font-size: 11px;
  letter-spacing: 0.08em;
  color: var(--fg-3);
}

.contact-side { display: flex; flex-direction: column; gap: 32px; }
.contact-map {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 3;
  background: var(--bg-muted);
  overflow: hidden;
}
.contact-map__pin {
  position: absolute;
  top: 50%; left: 50%;
  width: 14px; height: 14px;
  background: var(--neoo-zalmrood);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  box-shadow: 0 0 0 6px rgba(176, 97, 81, 0.25);
}
.contact-line {
  display: grid;
  grid-template-columns: 120px 1fr;
  gap: 16px;
  padding: 18px 0;
  border-top: 1px solid var(--border-hairline);
  align-items: baseline;
}
.contact-line:last-child { border-bottom: 1px solid var(--border-hairline); }
.contact-line__dep {
  font-family: var(--font-subtitle);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--fg-3);
}
.contact-line a { color: var(--neoo-groen); text-decoration: none; border-bottom: 1px solid currentColor; }

/* link helpers */
.link {
  color: var(--neoo-groen);
  text-decoration: none;
  border-bottom: 1px solid currentColor;
  padding-bottom: 1px;
  transition: opacity var(--dur-fast);
}
.link:hover { opacity: .7; }
/* Dezelfde verwijzing, maar in lopende tekst: op contact.html staat geen
   CTA-blok met knoppen. De onderlijn van .link loopt onder het teken door,
   dus die zit hier op de tekst zelf. */
.link--li { display: inline-flex; align-items: center; gap: 8px; border-bottom: 0; }
.link--li svg { width: 14px; height: 14px; flex: 0 0 auto; }
.link--li span { border-bottom: 1px solid currentColor; padding-bottom: 1px; }

/* image-slot defaults */
image-slot {
  --slot-bg: var(--bg-muted);
  --slot-fg: var(--fg-2);
  --slot-border: var(--border-hairline);
  --slot-font: var(--font-subtitle);
  display: block;
}

/* ============================================================================
   HERO — CINEMATIC FULL-BLEED CAROUSEL (home)
   ============================================================================ */
.hero-cine {
  /* Single source of truth for the carousel's timing — the script reads these
     back off the element, so CSS and JS can never drift apart. */
  --hero-hold: 5000ms;      /* time a slide holds before the next one starts */
  --hero-fade: 1200ms;      /* cross-fade between two slides */
  /* The words don't cross-fade: the old line leaves, and only then does the new
     one arrive. Both beats are driven by the carousel script. */
  --hero-text-out: 240ms;   /* old headline and subtitle fade out */
  --hero-text-in: 320ms;    /* new ones fade in, into the empty box */

  position: relative;
  width: 100%;
  height: clamp(560px, calc(100vh - 150px), 1000px);
  overflow: hidden;
  background: var(--neoo-groen);
  border-bottom: 1px solid var(--border-hairline);
  isolation: isolate;
}
.hero-cine__carousel { position: absolute; inset: 0; z-index: 0; }
.hero-cine__slide {
  position: absolute; inset: 0;
  background-size: cover;
  background-position: center center;
  opacity: 0;
  transform: scale(1.04);
  transition: opacity var(--hero-fade) linear;
}
/* The zoom has to keep running while a slide fades out, or its transform snaps
   back to the start value halfway through the cross-fade. Both states carry the
   identical animation shorthand so the browser continues it instead of
   restarting it. Linear, so the two visible layers drift at the same rate. */
.hero-cine__slide.is-active,
.hero-cine__slide.is-leaving {
  animation: heroCineZoom calc(var(--hero-hold) + var(--hero-fade)) linear forwards;
  will-change: opacity, transform;
}
.hero-cine__slide.is-leaving { z-index: 1; }
.hero-cine__slide.is-active  { opacity: 1; z-index: 2; }
@keyframes heroCineZoom {
  from { transform: scale(1.04); }
  to   { transform: scale(1.12); }
}
@media (prefers-reduced-motion: reduce) {
  .hero-cine__slide.is-active,
  .hero-cine__slide.is-leaving { animation: none; }
}

/* legibility scrim: vertical gradient + soft center vignette */
.hero-cine__scrim {
  position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background:
    radial-gradient(120% 90% at 50% 42%, rgba(0,20,13,0) 30%, rgba(0,20,13,0.45) 100%),
    linear-gradient(180deg, rgba(0,28,18,0.55) 0%, rgba(0,28,18,0.18) 28%, rgba(0,20,13,0.30) 62%, rgba(0,18,12,0.78) 100%);
}

/* ----- centered logo + headline ----- */
.hero-cine__center {
  position: absolute; inset: 0; z-index: 3;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; padding: 40px 24px 0; color: #fff;
}
.hero-cine__logo {
  width: clamp(150px, 18vw, 280px); height: auto; display: block;
  margin-bottom: clamp(22px, 3vw, 40px);
  filter: drop-shadow(0 6px 30px rgba(0,0,0,0.35));
}
.hero-cine__title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.005em;
  font-size: clamp(40px, 5.4vw, 92px);
  line-height: 0.95;
  color: #fff;
  text-shadow: 0 4px 40px rgba(0,0,0,0.30);
}
.hero-cine__title i {
  font-style: italic;
  text-transform: none;
  font-weight: 400;
  color: var(--neoo-cream);
}
.hero-cine__sub {
  margin: clamp(20px, 2.4vw, 32px) 0 0;
  font-family: var(--font-subtitle);
  font-weight: 400;
  font-size: clamp(15px, 1.5vw, 20px);
  letter-spacing: 0.06em;
  color: rgba(255,255,255,0.92);
  text-shadow: 0 2px 18px rgba(0,0,0,0.4);
}

/* ----- bottom bar: featured + controls ----- */
.hero-cine__bottom {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 3;
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 24px; padding: 32px 80px 34px; color: #fff;
}
.hero-cine__featured { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; }
.hero-cine__tag {
  font-family: var(--font-subtitle); font-size: 11px; letter-spacing: 0.18em;
  text-transform: uppercase; color: rgba(255,255,255,0.78);
  padding-right: 14px; border-right: 1px solid rgba(255,255,255,0.35);
}
.hero-cine__name { font-family: var(--font-display); font-weight: 700; font-size: clamp(18px, 2vw, 26px); color: #fff; }
.hero-cine__loc { font-family: var(--font-subtitle); font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; color: rgba(255,255,255,0.75); }

.hero-cine__controls { display: flex; align-items: center; gap: 18px; }
.hero-cine__btn {
  background: none; border: none; color: #fff; cursor: pointer;
  font-size: 20px; line-height: 1; padding: 4px; opacity: 0.8;
  transition: opacity var(--dur-fast, 160ms) var(--ease-out, ease-out);
}
.hero-cine__btn:hover { opacity: 1; }
.hero-cine__count {
  font-family: var(--font-subtitle); font-size: 12px; letter-spacing: 0.08em;
  color: rgba(255,255,255,0.85); min-width: 54px; text-align: center;
}
.hero-cine__count b { font-weight: 700; color: #fff; }
.hero-cine__dots { display: flex; gap: 8px; margin-left: 6px; }
.hero-cine__dot {
  width: 30px; height: 2px; border: none; padding: 0; cursor: pointer;
  background: rgba(255,255,255,0.35);
  transition: background var(--dur-fast, 160ms) var(--ease-out, ease-out);
}
.hero-cine__dot:hover { background: rgba(255,255,255,0.6); }
.hero-cine__dot.is-active { background: #fff; }

/* ----- entrance animation: logo + text "come forward" ----- */
@media (prefers-reduced-motion: no-preference) {
  .hero-cine__scrim { animation: heroCineFade 1.4s ease-out both; }
  .hero-cine__logo   { animation: heroCineRise 1.1s cubic-bezier(.2,.7,.2,1) both; animation-delay: 0.20s; }
  .hero-cine__title  { animation: heroCineRise 1.1s cubic-bezier(.2,.7,.2,1) both; animation-delay: 0.50s; }
  .hero-cine__sub    { animation: heroCineRise 1.0s cubic-bezier(.2,.7,.2,1) both; animation-delay: 0.82s; }
  .hero-cine__bottom { animation: heroCineRise 1.0s cubic-bezier(.2,.7,.2,1) both; animation-delay: 1.05s; }
}
@keyframes heroCineRise {
  from { opacity: 0; transform: translateY(18px) scale(0.90); filter: blur(8px); }
  to   { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); }
}
@keyframes heroCineFade { from { opacity: 0; } to { opacity: 1; } }

/* ----- headline swap -----
   The photographs cross-fade, the words do not: a line fades out, its text is
   replaced while it is invisible, and the new one fades back in. Two headlines
   over each other never reads as a dissolve, only as doubled text. The script
   owns the keyframes because it also drives the text swap between them; see
   runSwaps() on the home page. */
@media (prefers-reduced-motion: no-preference) {
  /* Promote once, so the first frame of a swap isn't spent building a layer. */
  .hero-cine__title { will-change: opacity, transform; }
}

/* ----- responsive ----- */
@media (max-width: 900px) {
  .hero-cine { height: clamp(480px, calc(100vh - 130px), 760px); }
  .hero-cine__bottom { padding: 24px 32px 26px; }
}
@media (max-width: 560px) {
  .hero-cine { height: clamp(440px, calc(100vh - 120px), 680px); }
  .hero-cine__bottom { flex-direction: column; align-items: flex-start; gap: 14px; padding: 20px 20px 22px; }
  .hero-cine__sub { letter-spacing: 0.04em; }
}

/* ============================================================================
   BELIEF — founders' quote + portraits (home, replaces intro)
   ============================================================================ */
.belief {
  padding: 120px 80px;
  border-bottom: 1px solid var(--border-hairline);
}
.belief__grid {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 72px;
  align-items: center;
  max-width: 1320px;
  margin: 0 auto;
}
.belief__quote {
  font-size: clamp(26px, 2.9vw, 42px) !important;
  text-align: left !important;
  margin: 0 !important;
  text-wrap: pretty;
}
.belief__names {
  margin: 30px 0 0;
  font-family: var(--font-subtitle);
  font-size: 13px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--fg-2);
}
.belief__media {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}
.belief__portrait { margin: 0; }
.belief__img {
  width: 100%;
  aspect-ratio: 3 / 4;
  background: var(--bg-muted);
  overflow: hidden;
}
.belief__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 14%;
  display: block;
}
.belief__portrait figcaption {
  margin-top: 14px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 15px;
  color: var(--neoo-groen);
}

/* ----- scroll-revealed philosophy quote ----- */
.belief--quote { padding: 160px 80px; }
.belief__quote-wrap {
  max-width: 1000px;
  margin: 0 auto;
  text-align: center;
}
.belief__eyebrow { color: var(--fg-3); }
.scroll-quote {
  margin: 40px 0 0;
  font-family: var(--font-display);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.005em;
  font-size: clamp(24px, 2.9vw, 42px);
  line-height: 1.2;
  text-wrap: balance;
}
.scroll-quote .sq-word {
  color: rgba(0, 64, 42, 0.16);
  white-space: pre;
}
.scroll-quote .sq-word.is-lit { color: rgba(0, 64, 42, 1) !important; }
.belief--quote .belief__names {
  margin-top: 48px;
  color: var(--fg-3);
}
@media (prefers-reduced-motion: reduce) {
  .scroll-quote .sq-word { color: rgba(0, 64, 42, 1); }
}
@media (max-width: 900px) {
  .belief--quote { padding: 120px 32px; }
}
@media (max-width: 520px) {
  .belief--quote { padding: 72px 20px; }
  .scroll-quote { font-size: clamp(21px, 6vw, 27px); }
}

/* ----- scroll reveal animation ----- */
.reveal {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity 0.8s var(--ease-out, ease-out), transform 0.8s var(--ease-out, ease-out);
  will-change: opacity, transform;
}
.reveal.is-visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
}

@media (max-width: 900px) {
  .belief { padding: 88px 32px; }
  .belief__grid { grid-template-columns: 1fr; gap: 48px; }
  .belief__media { max-width: 520px; }
}
@media (max-width: 520px) {
  .belief { padding: 56px 20px; }
  .belief__quote { font-size: clamp(22px, 6vw, 28px) !important; }
  .belief__media { gap: 16px; }
}

/* ============================================================================
   HERO CAROUSEL (legacy split layout — kept for other pages)
   ============================================================================ */
.hero-carousel {
  position: absolute;
  inset: 0;
  overflow: hidden;
}
.hero-carousel__track {
  position: absolute;
  inset: 0;
}
.hero-carousel__slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 700ms var(--ease-out, ease-out);
  pointer-events: none;
  overflow: hidden;
}
.hero-carousel__slide image-slot {
  display: block;
  width: 100%;
  height: 100%;
  transform-origin: center center;
}
.hero-carousel__slide.is-active {
  opacity: 1;
  pointer-events: auto;
}
.hero-carousel__slide.is-active image-slot {
  animation: heroKenBurns 9s ease-in-out forwards;
}
@keyframes heroKenBurns {
  0%   { transform: scale(1.04) translate(-0.5%, 0.5%); }
  100% { transform: scale(1.12) translate(0.8%, -0.8%); }
}
.hero-carousel__slide::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0,40,28,0.55) 0%, rgba(0,40,28,0) 38%);
  pointer-events: none;
  z-index: 1;
}

.hero-carousel__nav {
  position: absolute;
  top: 32px;
  right: 32px;
  z-index: 3;
  display: flex;
  align-items: center;
  gap: 14px;
  background: rgba(0, 40, 28, 0.78);
  color: var(--neoo-cream);
  padding: 10px 14px;
  font-family: var(--font-subtitle);
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.hero-carousel__btn {
  background: none;
  border: none;
  color: var(--neoo-cream);
  font-family: var(--font-display);
  font-size: 18px;
  line-height: 1;
  padding: 4px 6px;
  cursor: pointer;
  transition: opacity var(--dur-fast, 160ms) var(--ease-out, ease-out);
}
.hero-carousel__btn:hover { opacity: 0.65; }
.hero-carousel__count b { font-weight: 400; }

.hero-carousel__dots {
  position: absolute;
  right: 32px;
  bottom: 32px;
  z-index: 3;
  display: flex;
  gap: 8px;
}
.hero-carousel__dot {
  width: 28px;
  height: 2px;
  background: rgba(255, 249, 250, 0.4);
  border: none;
  padding: 0;
  cursor: pointer;
  transition: background var(--dur-fast, 160ms) var(--ease-out, ease-out);
}
.hero-carousel__dot:hover { background: rgba(255, 249, 250, 0.7); }
.hero-carousel__dot.is-active { background: var(--neoo-cream); }

/* push existing pin/caption above carousel layers */
.hero__col--image .hero__pin,
.hero__col--image .hero__caption { z-index: 4; }

/* ----- HERO USP — text-side carousel that syncs with the image one ----- */
.hero-usp {
  position: relative;
  /* reserve room for 2 lines of display title + subtitle so slides don't jump */
  min-height: calc(2 * 0.92 * clamp(56px, 6.6vw, 116px) + 80px);
}
.hero-usp__slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transform: translateY(8px);
  transition:
    opacity 600ms var(--ease-out, ease-out),
    transform 600ms var(--ease-out, ease-out);
  pointer-events: none;
}
.hero-usp__slide.is-active {
  opacity: 1;
  transform: none;
  pointer-events: auto;
}
.hero-usp__slide .hero__title { margin: 0; }
.hero-usp__slide .hero__sub  { margin-top: 28px; max-width: 480px; }


/* ============================================================================
   RESPONSIVE — adapt to tablet, small tablet, and phone widths
   ============================================================================ */

/* ----- Tablet & smaller laptops (≤1100px) ----- */
@media (max-width: 1100px) {
  .masthead { padding: 8px 32px; font-size: 10px; letter-spacing: 0.16em; }
  .masthead__l, .masthead__r { gap: 14px; }

  .nav__inner { padding: 20px 32px; gap: 24px; }
  .nav__logo img { height: 56px; }
  .nav__menu { gap: 22px; }
  .nav__menu a { font-size: 13px; }

  .hero { grid-template-columns: 1fr 1fr; min-height: 0; }
  .hero__col--text { padding: 64px 32px 56px; }
  .hero__title { font-size: clamp(64px, 8vw, 96px) !important; }
  .hero__sub { font-size: 18px; margin-top: 24px; }
  .hero-usp { min-height: calc(2 * 0.9 * clamp(64px, 8vw, 96px) + 64px); }
  .hero__meta { margin-top: 40px; gap: 16px; }

  .hero__caption { left: 20px; bottom: 20px; right: 20px; }
  .hero-carousel__nav { top: 20px; right: 20px; }
  .hero-carousel__dots { right: 20px; bottom: 88px; }

  .intro, .letter, .projects, .process { padding: 88px 32px; }
  .stats { padding: 64px 32px 48px; }
  .press { padding: 56px 32px 72px; }
  .cta { padding: 44px 32px; }

  .intro__grid { grid-template-columns: 220px 1fr; gap: 48px; }
  .stats__grid { grid-template-columns: repeat(2, 1fr); row-gap: 32px; }
  .stat:nth-child(2n+1) { border-left: 0; }   /* no divider at the start of a row */
  .section-head { gap: 32px; }
  .section-head .h-display { font-size: 56px !important; }
  .projects__grid { gap: 56px 32px; }
  .press__grid { grid-template-columns: repeat(2, 1fr); }
  .press__cell { border-left: 0; border-top: 1px solid var(--border-hairline); }
  .press__cell:nth-child(2n) { border-left: 1px solid var(--border-hairline); }
  .phases { grid-template-columns: 1fr; gap: 40px; }

  .cta__inner .h-display { font-size: 52px !important; }
}

/* ============================================================================
   NAV — the folded layout (≤1180px)

   Its own breakpoint, wider than the rest of the mobile rules. Seven links
   plus the language switch and the Contact button need about 1150px before
   the row fits without squeezing the logo out of its column, so the menu
   folds away below 1180 and the 1181–1439 block below tightens the bar's
   spacing until a full-width screen takes over.
   ============================================================================ */
@media (max-width: 1180px) {
  /* stack nav: logo on top row, menu wraps under it, lang/CTA next to logo */
  .nav__inner {
    grid-template-columns: auto 1fr;
    grid-template-areas:
      "logo right"
      "menu menu";
    row-gap: 14px;
    padding: 16px 24px;
  }
  .nav__logo { grid-area: logo; }
  .nav__right { grid-area: right; justify-self: end; }
  .nav__inner > nav { grid-area: menu; }
  .nav__menu { flex-wrap: wrap; gap: 14px 18px; font-size: 12px; }
  .nav__logo img { height: 44px; }

  /* ----- Menu behind a toggle -----
     Six links wrap to two rows on a phone, and the bar is sticky, so that
     costs a fifth of the screen on every scroll. Folded away it costs one
     row. The whole thing hangs off .js: the toggle cannot work without
     script, so without script the menu stays open exactly as it was. */
  .js .nav__inner { grid-template-areas: "logo right"; row-gap: 0; }
  .js .nav__inner > nav { display: none; }
  .js .nav__inner.is-open {
    grid-template-areas:
      "logo right"
      "menu menu";
    row-gap: 14px;
  }
  .js .nav__inner.is-open > nav { display: block; animation: navPanelIn 0.22s var(--ease-out, ease-out) both; }
  @keyframes navPanelIn {
    from { opacity: 0; transform: translateY(-6px); }
    to   { opacity: 1; transform: none; }
  }
  @media (prefers-reduced-motion: reduce) {
    .js .nav__inner.is-open > nav { animation: none; }
  }

  /* open, the links get a column of their own: easier to hit than a
     wrapped row, and it reads as a menu rather than as leftovers */
  .js .nav__inner.is-open .nav__menu {
    flex-direction: column;
    align-items: stretch;
    /* the base rule centres the row on desktop; as a column it has to run
       the full width of the bar or the links sit in the middle of nowhere */
    justify-self: stretch;
    width: 100%;
    gap: 0;
    padding-top: 6px;
    border-top: 1px solid var(--border-hairline);
  }
  .js .nav__inner.is-open .nav__menu a { display: block; padding: 13px 2px; margin: 0; }
  /* the underline spans the whole row once the link is block-level, which
     reads as a divider — shrink it back to a marker */
  .js .nav__inner.is-open .nav__menu a.is-active::after { width: 20px; }

  .js .nav__burger {
    display: grid;
    place-items: center;
    width: 40px; height: 40px;
    margin-right: -8px;
    padding: 0;
    border: 0;
    background: none;
    color: var(--neoo-groen);
    cursor: pointer;
  }
  /* three bars from one element: the middle is the box, the outer two are
     its pseudo-elements, so the cross needs no extra markup */
  .nav__burger-bars,
  .nav__burger-bars::before,
  .nav__burger-bars::after {
    content: "";
    display: block;
    width: 22px; height: 1.5px;
    background: currentColor;
    transition: transform 0.25s var(--ease-out, ease-out), opacity 0.15s linear;
  }
  .nav__burger-bars { position: relative; }
  .nav__burger-bars::before { position: absolute; top: -7px; }
  .nav__burger-bars::after  { position: absolute; top: 7px; }
  .nav__burger[aria-expanded="true"] .nav__burger-bars { background: transparent; }
  .nav__burger[aria-expanded="true"] .nav__burger-bars::before { transform: translateY(7px) rotate(45deg); }
  .nav__burger[aria-expanded="true"] .nav__burger-bars::after  { transform: translateY(-7px) rotate(-45deg); }
}

/* Smaller laptops (1181–1439px): the full bar, set a notch tighter, so the
   seven links clear the logo and the Contact button with room over. From
   1440 up the base spacing applies untouched. */
@media (min-width: 1181px) and (max-width: 1439px) {
  .nav__inner { padding: 28px 48px; gap: 32px; }
  .nav__menu { gap: 24px; }
}

/* ----- Small tablet / large phone (≤780px) ----- */
@media (max-width: 780px) {
  /* hide auxiliary masthead column on the right so the strip stays single-row */
  .masthead__r { display: none; }

  /* stack hero vertically */
  .hero { grid-template-columns: 1fr; }
  .hero__col--image { border-left: 0; border-top: 1px solid var(--border-hairline); aspect-ratio: 4 / 3; }

  .intro__grid { grid-template-columns: 1fr; gap: 24px; }

  .about-intro { padding: 72px 32px; }
  .about-intro__grid { grid-template-columns: 1fr; gap: 28px; }
  .about-film { padding: 0 32px 88px; }
  .vimeo__play { width: 54px; height: 54px; bottom: 18px; left: 20px; }
  .vimeo__label { bottom: 18px; left: 86px; height: 54px; }

  .pillar { grid-template-columns: 1fr; min-height: 0; }
  .pillar__media { aspect-ratio: 4 / 3; order: -1 !important; border-left: 0 !important; }
  .pillar--flip .pillar__media { border-left: 0; }
  .pillar:not(.pillar--flip) .pillar__body { border-left: 0; }
  .pillar__body { padding: 56px 32px; }
  .pillar-more { padding-left: 32px; padding-right: 32px; }
  .feat { padding-left: 32px; padding-right: 32px; }
  .feat__grid { gap: 16px; }

  .section-head { grid-template-columns: 1fr; align-items: start; }
  .section-head .h-display { font-size: 48px !important; }

  .projects__grid { grid-template-columns: 1fr; gap: 48px; }
  .proj-card__img { aspect-ratio: 4 / 3; }

  .letter__quote { font-size: clamp(24px, 4.4vw, 32px) !important; }
  .letter__founders { gap: 32px; }

  .cta__inner .h-display { font-size: 42px !important; }
}

/* ----- Phone (≤520px) ----- */
@media (max-width: 520px) {
  .masthead { padding: 6px 16px; }
  .nav__inner { padding: 14px 16px; }
  .nav__logo img { height: 36px; }
  .nav__menu { gap: 10px 14px; font-size: 11px; }
  .nav__right .nav__lang { display: none; }

  .hero__col--text { padding: 48px 20px 40px; }
  .hero__title { font-size: clamp(48px, 13vw, 72px) !important; line-height: 0.95 !important; }
  .hero__sub { font-size: 16px; }
  .hero-usp { min-height: calc(2 * 0.95 * clamp(48px, 13vw, 72px) + 56px); }
  .hero__meta { grid-template-columns: 1fr; gap: 12px; max-width: none; }

  .hero__caption { flex-direction: column; gap: 6px; align-items: flex-start; left: 16px; bottom: 16px; right: 16px; }
  .hero-carousel__nav { top: 16px; right: 16px; padding: 8px 10px; font-size: 10px; gap: 10px; }
  .hero-carousel__dots { right: 16px; bottom: 100px; }
  .hero-carousel__dot { width: 18px; }

  .intro, .letter, .projects, .process { padding: 56px 20px; }
  .about-intro { padding: 56px 20px; }
  .pillar__body { padding: 48px 20px; }
  .pillar-more { padding-left: 20px; padding-right: 20px; }
  /* Three portrait cards across a phone leaves ~110px each — the names break
     apart. One per row instead. */
  .feat { padding-left: 20px; padding-right: 20px; }
  .feat__grid { grid-template-columns: 1fr; gap: 32px; }
  .stats { padding: 48px 20px; }
  .press { padding: 40px 20px 56px; }
  .cta { padding: 40px 20px; }

  .stats__grid { grid-template-columns: 1fr; }
  .stat { border-left: 0; }   /* stacked: every number centred on the column */
  .stat__num { font-size: 48px; }

  .press__grid { grid-template-columns: 1fr; }
  .press__cell:nth-child(2n) { border-left: 0; }

  .section-head .h-display { font-size: 40px !important; }
  .projects__grid { gap: 32px; }

  .letter__quote { font-size: 22px !important; }
  .letter__founders { flex-direction: column; align-items: center; gap: 24px; }
  .founder { flex-direction: column; text-align: center; gap: 12px; }

  .cta__inner .h-display { font-size: 34px !important; }
}


/* ----- Team grid responsive ----- */
@media (max-width: 1100px) {
  .team-grid { grid-template-columns: repeat(3, 1fr); padding: 56px 32px 80px; gap: 32px 24px; }
  .partners-section { padding: 32px 32px 56px; }
  .partners-row { grid-template-columns: repeat(5, 1fr); gap: 32px 20px; }
  .team-section__head { padding: 56px 32px 0; }
}
@media (max-width: 780px) {
  .team-grid { grid-template-columns: repeat(2, 1fr); padding: 40px 24px 56px; gap: 32px 20px; }
  .partners-section { padding: 24px 24px 40px; }
  .partners-row { grid-template-columns: repeat(2, 1fr); gap: 32px 20px; }
  .partners-row .team-cell:first-child { grid-column: 1 / -1; max-width: 50%; margin: 0 auto; }
  .team-section__head { padding: 40px 24px 0; }
}
@media (max-width: 520px) {
  .team-grid { grid-template-columns: 1fr 1fr; padding: 32px 16px 48px; gap: 28px 14px; }
  .partners-section { padding: 16px 16px 32px; }
  .partners-row { gap: 28px 14px; }
  .team-section__head { padding: 32px 16px 0; }
  .team-cell__name { font-size: 15px; }
  .team-cell__role { font-size: 12px; }
  .partners-row .team-cell__name { font-size: 16px; }
}

/* ============================================================================
   AWARD-LEVEL POLISH — transitions, reveals, focus, filter meta, mobile UX
   ============================================================================ */

/* ----- Page enter / leave transitions (html.js set inline in <head>) ----- */
@media (prefers-reduced-motion: no-preference) {
  html.js body { animation: neooPageIn 0.55s cubic-bezier(0.22, 0.61, 0.36, 1) both; }
  @keyframes neooPageIn {
    from { opacity: 0; }
    to   { opacity: 1; }
  }
  html.js body.is-leaving {
    animation: none;
    opacity: 0;
    transition: opacity 0.24s ease;
  }
}

/* ----- Generic scroll reveals (.sr added by site.js — no-JS stays visible) */
@media (prefers-reduced-motion: no-preference) {
  html.js .sr {
    opacity: 0;
    transform: translateY(18px);
    transition: opacity 0.7s cubic-bezier(0.22, 0.61, 0.36, 1),
                transform 0.7s cubic-bezier(0.22, 0.61, 0.36, 1);
    will-change: opacity, transform;
  }
  html.js .sr.sr-in { opacity: 1; transform: none; }
}

/* ----- Focus visibility — keyboard users get a clear brand outline ----- */
:focus-visible {
  outline: 2px solid var(--neoo-zalmrood);
  outline-offset: 3px;
  border-radius: 1px;
}
.nav__menu a:focus-visible,
.filter__chip:focus-visible { outline-offset: 2px; }

/* ----- Language toggle as a real button ----- */
button.nav__lang {
  background: none;
  border: 0;
  padding: 6px 4px;
  cursor: pointer;
  color: var(--fg-3);
}
button.nav__lang [data-lang].is-active { color: var(--neoo-groen); }
button.nav__lang:hover [data-lang]:not(.is-active) { color: var(--neoo-groen); opacity: .7; }

/* ----- Project card hover — image zoom + title shift ----- */
.proj-card .proj-card__img { overflow: hidden; }
.proj-card .proj-card__img img {
  transition: transform 0.7s cubic-bezier(0.22, 0.61, 0.36, 1);
}
@media (hover: hover) {
  .proj-card:hover .proj-card__img img { transform: scale(1.045); }
  .proj-card .proj-card__title { transition: color var(--dur-fast, 160ms) ease; }
  .proj-card:hover .proj-card__title { color: var(--neoo-zalmrood); }
}

/* ----- Filter meta row: result count + reset ----- */
.filter__meta {
  display: flex;
  align-items: center;
  gap: 18px;
  margin-left: auto;
}
.filter__count {
  font-family: var(--font-subtitle);
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fg-3);
  font-variant-numeric: tabular-nums;
}
.filter__reset {
  font-family: var(--font-subtitle);
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  background: none;
  border: 0;
  padding: 8px 0;
  cursor: pointer;
  color: var(--neoo-zalmrood);
  border-bottom: 1px solid currentColor;
  transition: opacity var(--dur-fast, 160ms) ease;
}
.filter__reset:hover { opacity: 0.65; }
.filter__reset[hidden] { display: none; }

/* ----- Filter empty state ----- */
.filter-empty {
  padding: 96px 80px 120px;
  text-align: center;
  border-bottom: 1px solid var(--border-hairline);
}
.filter-empty[hidden] { display: none; }
.filter-empty .btn { margin-top: 28px; }

/* ----- Filtering animation: cards fade/slide when set changes ----- */
@media (prefers-reduced-motion: no-preference) {
  .project-grid .proj-card.filter-in {
    animation: filterCardIn 0.5s cubic-bezier(0.22, 0.61, 0.36, 1) both;
  }
  @keyframes filterCardIn {
    from { opacity: 0; transform: translateY(14px) scale(0.985); }
    to   { opacity: 1; transform: none; }
  }
}

/* ----- Mobile: filter groups scroll horizontally, one clean row each ----- */
@media (max-width: 780px) {
  .filter {
    padding: 20px 0 24px;
    gap: 14px;
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: stretch;
  }
  .filter__group {
    min-width: 0;
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding: 4px 24px;
    gap: 10px;
  }
  .filter__group::-webkit-scrollbar { display: none; }
  .filter__group .eyebrow { flex: 0 0 auto; }
  .filter__chip { flex: 0 0 auto; padding: 10px 16px; }
  .filter__meta { margin: 2px 24px 0; }
  .filter-empty { padding: 72px 24px 96px; }
}

/* ----- Mobile: bigger tap targets in nav ----- */
@media (max-width: 780px) {
  .nav__menu a { display: inline-block; padding: 8px 2px; }
  .nav__right .btn--sm { padding: 12px 16px; }
}
@media (max-width: 520px) {
  /* keep the language switch reachable on phones */
  .nav__right .nav__lang { display: inline-flex; }
}

/* ----- Smooth anchor scrolling, no scroll-jank ----- */
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

/* ============================================================================
   RESPONSIVE FIXES — project grid, detail meta & hero titles
   ============================================================================ */

/* cards must be allowed to shrink below their title's min-content width */
.project-grid .proj-card { min-width: 0; }
.proj-card__title { overflow-wrap: break-word; }

@media (max-width: 1100px) {
  .project-grid { grid-template-columns: repeat(2, 1fr); padding: 56px 32px 48px; }
  .project-block__head { padding: 48px 32px 0; }
  .project-block__head + .project-grid { padding-top: 28px; }
}
@media (max-width: 780px) {
  .project-grid { padding: 40px 24px 40px; gap: 40px 20px; }
  .project-block__head { padding: 40px 24px 0; }
  .project-block__head + .project-grid { padding-top: 24px; }
}
@media (max-width: 560px) {
  .project-grid { grid-template-columns: 1fr; padding: 32px 20px 32px; gap: 36px; }
  .project-block__head { padding: 36px 20px 0; }
}

/* .pd-meta carries an inline 5-column grid — override responsively */
@media (max-width: 1100px) {
  .pd-meta { grid-template-columns: repeat(3, 1fr) !important; row-gap: 28px; padding-left: 32px; padding-right: 32px; }
  .pd-back { padding-left: 32px; padding-right: 32px; }
}
@media (max-width: 560px) {
  .pd-meta { grid-template-columns: repeat(2, 1fr) !important; padding-left: 20px; padding-right: 20px; }
  .pd-back { padding-left: 20px; padding-right: 20px; }
}

/* .pd-hero h1 carries inline 96–120px font sizes — clamp them down on small screens */@media (max-width: 1100px) {
  .pd-hero__caption { left: 32px; bottom: 40px; right: 32px; }
  .pd-hero__caption .h-display { font-size: clamp(52px, 9.5vw, 96px) !important; }
}
@media (max-width: 560px) {
  .pd-hero__caption { left: 20px; bottom: 28px; right: 20px; }
  .pd-hero__caption .h-display { font-size: clamp(40px, 12.5vw, 56px) !important; overflow-wrap: break-word; }
  .pd-body { padding-left: 20px; padding-right: 20px; }
  .pd-gallery { padding-left: 20px; padding-right: 20px; }
}

/* page headers (projecten / team / contact / investors) — no base responsive rules */@media (max-width: 900px) {
  .page-header {
    grid-template-columns: 1fr;
    gap: 28px;
    padding: 72px 32px 56px;
  }
  .page-header__r { justify-self: start; text-align: left; }
  .page-header__title { font-size: clamp(56px, 10vw, 96px) !important; }
}
@media (max-width: 560px) {
  .page-header { padding: 56px 20px 40px; gap: 20px; }
  .page-header__title {
    font-size: clamp(42px, 11.5vw, 56px) !important;
    overflow-wrap: break-word;
  }
}

/* ============================================================================
   MOBILE COLLAPSE — every remaining multi-column section
   (contact, investors, project-detail body, about lead)
   ============================================================================ */

/* --- contact ------------------------------------------------------------ */
@media (max-width: 900px) {
  .contact { grid-template-columns: 1fr; gap: 64px; padding: 72px 32px 88px; }
}
@media (max-width: 560px) {
  .contact { padding: 56px 20px 72px; gap: 48px; }
  .contact-form { grid-template-columns: 1fr; }
}

/* --- investors ----------------------------------------------------------- */
@media (max-width: 900px) {
  .inv-approach { padding: 72px 32px; }
  .inv-row { grid-template-columns: 1fr; gap: 24px; }
  .inv-stats { padding: 72px 32px; }
  .inv-stats__grid { grid-template-columns: repeat(3, 1fr); row-gap: 40px; }
  .inv-contact { grid-template-columns: 1fr; }
  /* inline-styled sections (partners strip, documents) */
  section[style*="padding:120px 80px"] { padding: 72px 32px !important; }
  /* partners strip: inline 4-col grid -> 2 columns */
  div[style*="grid-template-columns:repeat(4,1fr)"] {
    grid-template-columns: 1fr 1fr !important;
    gap: 40px 24px !important;
  }
  div[style*="grid-template-columns:repeat(4,1fr)"] > div {
    border-right: 0 !important;
    padding: 0 !important;
  }
  /* documents list: inline 5-col rows -> year + content stack */
  li[style*="80px 1fr 200px"] {
    grid-template-columns: 72px 1fr !important;
    row-gap: 4px;
  }
  li[style*="80px 1fr 200px"] > span { grid-column: 2; text-align: left !important; }
  li[style*="80px 1fr 200px"] > .eyebrow { grid-column: 1; grid-row: 1 / span 4; }
  li[style*="80px 1fr 200px"] > a { grid-column: 2; }
}
@media (max-width: 560px) {
  .inv-approach, .inv-stats { padding: 56px 20px; }
  .inv-stats__grid { grid-template-columns: repeat(2, 1fr); }
  section[style*="padding:120px 80px"] { padding: 56px 20px !important; }
  div[style*="grid-template-columns:repeat(4,1fr)"] { grid-template-columns: 1fr !important; }
}

/* --- project detail body ---------------------------------------------------- */
@media (max-width: 780px) {
  .pd-body { grid-template-columns: 1fr; gap: 48px; padding-left: 32px; padding-right: 32px; }
  .pd-body > div:first-child { order: 2; } /* facts under the story on mobile */
  /* matches .pd-body above it, which keeps this 32px down to the smallest
     phone: the ≤560 block sits earlier in the file, so it cannot win here */
  .pd-webcam { padding: 88px 32px; }
  .pd-webcam__grid { grid-template-columns: 1fr; }
}

/* --- grid items must never dictate track width via min-content --------------- */.pd-body > div,
.pd-meta > div,
.contact > *,
.contact-side > *,
.inv-row > *,
.inv-contact > *,
.inv-stats__grid > div { min-width: 0; }
.inv-contact__img image-slot { max-width: 100%; }

/* long Dutch compounds in the project-detail lead must be allowed to break */
.pd-body__lead { overflow-wrap: break-word; }

@media (max-width: 560px) {
  .inv-stats__n { font-size: clamp(30px, 9vw, 42px) !important; }
}

/* --- about lead: long Dutch compounds must be allowed to break ---------------- */
.about-intro__grid > div { min-width: 0; }
.about-intro__lead { overflow-wrap: break-word; hyphens: auto; }
@media (max-width: 560px) {
  .about-intro__lead { font-size: clamp(24px, 7vw, 32px) !important; }
}


/* ============================================================================
   Mobile usability - enlarged tap targets (visually neutral: padding growth
   is compensated with negative margins so layout stays identical)
   ============================================================================ */
@media (max-width: 780px) {
  .nav__menu a { padding: 12px 6px; margin: -4px -4px; }
  button.nav__lang { padding: 12px 8px; margin: -6px -4px; }
  .hero-cine__dot { height: 18px; padding: 8px 0; background-clip: content-box; }
  .hero-cine__btn { padding: 10px; margin: -6px; }
}

/* ============================================================================
   Safety net - mobile collapse for project-detail sections that are defined
   but not yet used on any page (pd-program / pd-team / pd-next). Prevents
   guaranteed horizontal overflow if these blocks are added to a page later.
   ============================================================================ */
@media (max-width: 780px) {
  .pd-program, .pd-team { padding: 56px 20px; }
  .pd-program__grid, .pd-team__grid { grid-template-columns: 1fr; gap: 32px; }
  .pd-program__row { grid-template-columns: 80px 1fr; row-gap: 4px; }
  .pd-next { grid-template-columns: 1fr; }
  .pd-next > a { padding: 40px 20px; border-right: 0; border-bottom: 1px solid var(--border-hairline); }
}