/* ==========================================================================
   NIRA Investment Group — basisversie (v2, "elevated basic")
   Zelfde huisstijl als de uitgebreide versie: ink / bone / ground,
   Cormorant voor koppen, IBM Plex Mono voor labels, pill-knoppen, hairlines.
   Bewust níet: 3D, walkthroughs, gepinde of gescrubde scroll-animaties.
   Het enige bewegende: hover-states en een zachte fade-in per blok.
   ========================================================================== */

:root {
  --ink: #141B24;
  --ink-90: #1C242E;
  --ink-80: #263039;
  --ink-60: #4A535E;
  --bone: #E6DFD8;
  --bone-light: #F3EFE6;
  --ground: #69625C;
  --taupe: #A8A095;

  --muted: #5A5750;
  --muted-dark: #A8A39B;
  --line: rgba(20, 27, 36, 0.14);
  --line-dark: rgba(230, 223, 216, 0.16);

  --font-head: "Cormorant Garamond", Georgia, "Times New Roman", serif;
  --font-mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --font-body: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;

  --wrap: 84rem;
  --pad: clamp(1.25rem, 4vw, 3.5rem);
  --section: clamp(5rem, 11vw, 9.5rem);
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --round: 1.5rem;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 5rem; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bone-light);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 1.0625rem;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
h1, h2, h3 { font-family: var(--font-head); font-weight: 400; line-height: 1.04; margin: 0; letter-spacing: -0.015em; }
h1 em, h2 em { font-style: italic; }
p { margin: 0; }

.wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 var(--pad); }
.skip { position: absolute; left: -999px; top: 0; background: var(--ink); color: var(--bone-light); padding: .75rem 1rem; z-index: 200; }
.skip:focus { left: 1rem; top: 1rem; }

/* --- Labels, knoppen, links -------------------------------------------- */
.label {
  display: flex; align-items: center; gap: .9rem;
  font-family: var(--font-mono);
  font-size: .72rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 1.75rem;
}
.label::before { content: ""; width: 2.25rem; height: 1px; background: currentColor; opacity: .5; }
.dark .label { color: var(--muted-dark); }
.hero .label, .p-hero .label, .next .label { color: rgba(243,239,230,.88); }

.btn {
  display: inline-flex; align-items: center; gap: .75rem;
  padding: 1rem 1.9rem;
  border: 1px solid currentColor;
  border-radius: 999px;
  font-family: var(--font-mono);
  font-size: .72rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  text-decoration: none;
  transition: background .35s var(--ease), color .35s var(--ease), border-color .35s var(--ease);
}
.btn--solid { background: var(--ink); color: var(--bone-light); border-color: var(--ink); }
.btn--solid:hover { background: transparent; color: var(--ink); }
.btn--ghost:hover { background: var(--ink); color: var(--bone-light); border-color: var(--ink); }
.btn--light { background: var(--bone-light); color: var(--ink); border-color: var(--bone-light); }
.btn--light:hover { background: transparent; color: var(--bone-light); }
.btn--line { color: var(--bone-light); }
.btn--line:hover { background: var(--bone-light); color: var(--ink); }

.arrow { position: relative; display: inline-block; width: 1.5rem; height: 1px; background: currentColor; transition: width .35s var(--ease); }
.arrow::after { content: ""; position: absolute; right: 0; top: -3px; width: 7px; height: 7px; border-top: 1px solid currentColor; border-right: 1px solid currentColor; transform: rotate(45deg); }
.more {
  display: inline-flex; align-items: center; gap: 1rem;
  font-family: var(--font-mono); font-size: .72rem; letter-spacing: .16em; text-transform: uppercase;
  text-decoration: none;
}
.more:hover .arrow, .next:hover .arrow, .btn:hover .arrow { width: 2.25rem; }

/* --- Header ------------------------------------------------------------ */
.header {
  position: sticky; top: 0; z-index: 100;
  background: var(--bone-light);
  color: var(--ink);
  border-bottom: 1px solid var(--line);
  transition: background .4s var(--ease), color .4s var(--ease), border-color .4s var(--ease);
}
/* Op pagina's met een beeldvullende hero ligt de header doorzichtig over het beeld. */
.has-overlay .header { position: fixed; left: 0; right: 0; background: transparent; color: var(--bone-light); border-color: transparent; }
.has-overlay .header.is-solid { background: var(--bone-light); color: var(--ink); border-color: var(--line); }

.header__inner { display: flex; align-items: center; justify-content: space-between; height: 5.25rem; }
.logo { display: inline-flex; align-items: center; gap: 1rem; text-decoration: none; }
.logo svg { width: auto; height: 2.1rem; }
.logo__rule { width: 1px; align-self: stretch; background: currentColor; opacity: .35; }
.logo__word { font-family: var(--font-mono); font-size: .66rem; line-height: 1.5; letter-spacing: .18em; text-transform: uppercase; }
.logo__word span { display: block; }

.nav { display: flex; align-items: center; gap: 2.25rem; }
.nav__item { position: relative; display: flex; align-items: center; gap: .3rem; }
.nav__link { font-family: var(--font-mono); font-size: .72rem; letter-spacing: .16em; text-transform: uppercase; text-decoration: none; position: relative; padding: .5rem 0; }
.nav__link::after { content: ""; position: absolute; left: 0; right: 0; bottom: 2px; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: left; transition: transform .35s var(--ease); }
.nav__item:hover .nav__link::after, .nav__link[aria-current="page"]::after { transform: scaleX(1); }
.nav__more { display: grid; place-items: center; width: 1.25rem; height: 1.25rem; padding: 0; background: none; border: 0; color: inherit; cursor: pointer; }
.nav__more span { width: 6px; height: 6px; border-right: 1px solid currentColor; border-bottom: 1px solid currentColor; transform: translateY(-2px) rotate(45deg); transition: transform .35s var(--ease); }
.nav__item:hover .nav__more span, .nav__item.is-open .nav__more span { transform: translateY(1px) rotate(225deg); }

/* Dropdown: altijd licht, ook als de header doorzichtig over de hero ligt. */
.nav__sub {
  position: absolute; top: calc(100% + .9rem); left: -1.5rem; min-width: 16.5rem;
  background: var(--bone-light); color: var(--ink);
  border: 1px solid var(--line); padding: .6rem 0;
  box-shadow: 0 18px 40px -24px rgba(20,27,36,.35);
  opacity: 0; visibility: hidden; transform: translateY(8px);
  transition: opacity .35s var(--ease), transform .35s var(--ease), visibility 0s linear .35s;
}
.nav__sub::before { content: ""; position: absolute; left: 0; right: 0; top: -1rem; height: 1rem; }
.nav__item:hover .nav__sub, .nav__item:focus-within .nav__sub, .nav__item.is-open .nav__sub { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
.nav__sub a { display: flex; justify-content: space-between; gap: 1.5rem; padding: .6rem 1.5rem; font-family: var(--font-mono); font-size: .68rem; letter-spacing: .14em; text-transform: uppercase; text-decoration: none; color: var(--ink); transition: background .25s, padding .35s var(--ease); }
.nav__sub a:hover, .nav__sub a[aria-current="page"] { background: var(--bone); padding-left: 1.8rem; }
.nav__sub a small { font: inherit; color: var(--muted); }
.nav__sub-all { margin-top: .4rem; border-top: 1px solid var(--line); padding-top: .8rem !important; }
.nav .btn { padding: .8rem 1.4rem; }
.menu-btn { display: none; background: none; border: 1px solid currentColor; border-radius: 999px; padding: .55rem 1.1rem; font-family: var(--font-mono); font-size: .68rem; letter-spacing: .16em; text-transform: uppercase; color: inherit; cursor: pointer; }

@media (max-width: 960px) {
  .menu-btn { display: block; }
  .nav {
    display: none;
    position: absolute; left: 0; right: 0; top: 100%;
    flex-direction: column; align-items: stretch; gap: 0;
    max-height: calc(100svh - 5.25rem); overflow-y: auto;
    background: var(--bone-light); color: var(--ink);
    border-bottom: 1px solid var(--line);
    padding: .75rem var(--pad) 2rem;
  }
  .nav.is-open { display: flex; }
  .has-overlay .header:has(.nav.is-open) { background: var(--bone-light); color: var(--ink); }
  .nav__item { flex-wrap: wrap; justify-content: space-between; border-bottom: 1px solid var(--line); }
  .nav__link { font-size: .85rem; padding: 1.1rem 0; }
  .nav__link::after { display: none; }
  .nav__more { width: 2.75rem; height: 2.75rem; }
  .nav__item:hover .nav__more span { transform: translateY(-2px) rotate(45deg); }
  .nav__item.is-open .nav__more span { transform: translateY(1px) rotate(225deg); }
  .nav__sub { position: static; display: none; width: 100%; min-width: 0; opacity: 1; visibility: visible; transform: none; border: 0; box-shadow: none; padding: 0 0 1rem; background: transparent; }
  .nav__item:hover .nav__sub, .nav__item:focus-within .nav__sub { display: none; }
  .nav__item.is-open .nav__sub { display: block; }
  .nav__sub a { padding: .55rem 0 .55rem 1rem; }
  .nav__sub a:hover { background: transparent; padding-left: 1rem; }
  .nav .btn { margin-top: 1.5rem; justify-content: center; }
  .header .logo__word, .header .logo__rule { display: none; }
}

/* --- Secties ------------------------------------------------------------ */
.section { padding: var(--section) 0; }
.alt { background: var(--bone); }
.dark { background: var(--ink); color: var(--bone-light); }
.ground { background: var(--ground); color: var(--bone-light); }
.ground .label { color: var(--bone-light); }

.head { margin-bottom: clamp(3rem, 6vw, 5rem); }
.head h2 { font-size: clamp(2.5rem, 5.5vw, 4.75rem); max-width: 18ch; }

/* --- Hero (homepage) ---------------------------------------------------- */
.hero { position: relative; min-height: 100svh; display: flex; align-items: flex-end; color: var(--bone-light); background: var(--ink); overflow: hidden; }
.hero__img { position: absolute; inset: -10% 0; will-change: transform; }
.hero__img img { width: 100%; height: 100%; object-fit: cover; object-position: 22% 55%; animation: settle 2.6s var(--ease) both; }
.hero__img::after { content: ""; position: absolute; inset: 0; background:
  linear-gradient(90deg, rgba(20,27,36,.72) 0%, rgba(20,27,36,.35) 45%, rgba(20,27,36,0) 75%),
  linear-gradient(180deg, rgba(20,27,36,.5) 0%, rgba(20,27,36,0) 25%, rgba(20,27,36,.2) 55%, rgba(20,27,36,.85) 100%); }
.hero__copy { position: relative; padding-bottom: clamp(3rem, 7vw, 6rem); padding-top: 9rem; }
.hero h1 { font-size: clamp(3rem, 6.8vw, 6.5rem); max-width: 15ch; }
.hero__foot { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 2rem; margin-top: clamp(2rem, 4vw, 3.5rem); padding-top: 2rem; border-top: 1px solid rgba(243,239,230,.25); }
.hero__lead { max-width: 32rem; color: rgba(243,239,230,.85); }
.hero__actions { display: flex; flex-wrap: wrap; gap: .75rem; }

/* --- Intro -------------------------------------------------------------- */
.intro { display: grid; grid-template-columns: 1fr 2.4fr; gap: 2rem 4rem; }
.intro__text { font-family: var(--font-head); font-size: clamp(1.85rem, 3.6vw, 3.1rem); line-height: 1.18; letter-spacing: -0.01em; }
.intro__text em { color: var(--ground); }

/* --- Expertise ---------------------------------------------------------- */
.expertise { display: grid; grid-template-columns: 5fr 7fr; gap: clamp(2.5rem, 6vw, 6rem); align-items: stretch; }
/* Het beeld blijft verticaal gecentreerd in beeld terwijl de lijst ernaast scrolt,
   en wisselt mee met de discipline die in het midden van het scherm staat. */
.expertise__media { position: relative; }
.exp-stage { --h: min(66vh, 40rem); position: sticky; top: calc((100vh - var(--h)) / 2 + 2.6rem); margin: 0; }
.exp-frame { position: relative; height: var(--h); overflow: hidden; background: var(--ink-80); }
.exp-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transform: scale(1.12); transition: opacity 1s var(--ease), transform 1.8s var(--ease); }
.exp-img.is-active { opacity: 1; transform: scale(1); }
.exp-cap { display: flex; gap: 1rem; margin-top: 1.1rem; font-family: var(--font-mono); font-size: .7rem; letter-spacing: .14em; text-transform: uppercase; color: var(--muted-dark); }
.exp-cap__n { color: var(--bone-light); }
.exp-cap__t { transition: opacity .4s var(--ease); }
.rows { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line-dark); }
.rows li { display: grid; grid-template-columns: 3.5rem 1fr; align-content: center; gap: .25rem 1.5rem; min-height: clamp(11rem, 24vh, 15rem); padding: 1.9rem 0; border-bottom: 1px solid var(--line-dark); transition: opacity .6s var(--ease); }
.rows h3 { transition: transform .6s var(--ease); }
.js .rows.is-tracking li { opacity: .38; }
.js .rows.is-tracking li.is-current { opacity: 1; }
.js .rows.is-tracking li.is-current h3 { transform: translateX(.6rem); }
.rows__n { font-family: var(--font-mono); font-size: .75rem; letter-spacing: .1em; color: var(--muted-dark); padding-top: .7rem; }
.rows h3 { font-size: clamp(1.75rem, 2.8vw, 2.4rem); }
.rows p { grid-column: 2; color: var(--muted-dark); max-width: 34rem; margin-top: .4rem; }
.expertise .more { margin-top: 2.5rem; }

/* --- Projecten ---------------------------------------------------------- */
.featured { display: grid; grid-template-columns: 7fr 5fr; gap: clamp(2rem, 5vw, 5rem); align-items: end; text-decoration: none; margin-bottom: clamp(4rem, 8vw, 7rem); }
/* Eén kleine, overal gelijke ronding op de bovenhoeken — een knipoog naar de
   getoogde puien in NIRA's interieurs, zonder het beeld zelf te vervormen. */
.featured__img, .project__img { overflow: hidden; background: var(--bone); border-radius: var(--round) var(--round) 0 0; }
/* Het uitgelichte project houdt de getoogde boog. */
.featured__img { border-radius: 50% 50% 0 0 / 16% 16% 0 0; }
.featured__img img { width: 100%; aspect-ratio: 16 / 11; object-fit: cover; transition: transform 1.2s var(--ease); }
.project:hover .project__img img { transform: scale(1.04); }
.featured h3 { font-size: clamp(2.5rem, 5vw, 4.25rem); margin: .25rem 0 1.25rem; }
.featured p { color: var(--muted); margin-bottom: 2rem; max-width: 26rem; }
.meta { font-family: var(--font-mono); font-size: .7rem; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }

.projects { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(2.5rem, 5vw, 4rem) clamp(1.25rem, 2.5vw, 2.5rem); }
.project { text-decoration: none; display: block; }
.project:nth-child(3n+2) { margin-top: clamp(0rem, 6vw, 5rem); }
.project__img img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; transition: transform 1.2s var(--ease); }
.project__meta { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; margin-top: 1.25rem; padding-top: 1rem; border-top: 1px solid var(--line); }
.project h3 { font-size: 1.85rem; }

/* --- Pijlers ------------------------------------------------------------ */
.pillars { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid rgba(243,239,230,.28); }
.pillar { padding: 2.25rem 2rem 0 0; }
.pillar + .pillar { padding-left: 2rem; border-left: 1px solid rgba(243,239,230,.28); }
.pillar__n { font-family: var(--font-mono); font-size: .72rem; letter-spacing: .14em; }
.pillar h3 { font-size: clamp(1.9rem, 2.6vw, 2.4rem); margin: 1.5rem 0 1rem; }
.pillar p { font-size: .98rem; }

/* --- Over ---------------------------------------------------------------- */
.about { display: grid; grid-template-columns: repeat(12, 1fr); align-items: center; }
.about__img { grid-column: 1 / 8; grid-row: 1; }
.about__img img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.about__card { grid-column: 7 / 13; grid-row: 1; background: var(--bone-light); padding: clamp(2rem, 4vw, 3.75rem); position: relative; }
.about__card h2 { font-size: clamp(2.25rem, 4vw, 3.5rem); margin-bottom: 1.5rem; }
.about__card p { color: var(--muted); }
.about__card p + p { margin-top: 1rem; }
.about__card .btn { margin-top: 2.25rem; }

/* --- Contact ------------------------------------------------------------ */
.contact h2 { font-size: clamp(2.75rem, 6vw, 5.75rem); max-width: 20ch; }
.contact h2 em { color: var(--muted-dark); }
.contact__row { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 2rem; margin-top: clamp(3rem, 6vw, 5rem); padding-top: 2.5rem; border-top: 1px solid var(--line-dark); align-items: start; }
.contact__mail { font-family: var(--font-head); font-size: clamp(1.75rem, 3vw, 2.5rem); text-decoration: none; line-height: 1.1; border-bottom: 1px solid var(--line-dark); padding-bottom: .3rem; transition: border-color .3s; }
.contact__mail:hover { border-color: currentColor; }
.contact dt { font-family: var(--font-mono); font-size: .7rem; letter-spacing: .16em; text-transform: uppercase; color: var(--muted-dark); margin-bottom: .5rem; }
.contact dd { margin: 0; }
.contact dl { margin: 0; }

/* --- Footer ------------------------------------------------------------- */
.footer { background: var(--ink); color: var(--bone-light); padding: clamp(3.5rem, 7vw, 5.5rem) 0 2rem; font-size: .9rem; border-top: 1px solid var(--line-dark); overflow: hidden; }
.footer__cols { display: grid; grid-template-columns: 1fr 1fr 1.1fr 1.4fr; gap: 2.5rem; }
.footer__h { display: block; font-family: var(--font-mono); font-size: .66rem; letter-spacing: .18em; text-transform: uppercase; color: var(--muted-dark); margin-bottom: 1.25rem; }
.footer__cols a { display: block; width: fit-content; text-decoration: none; color: var(--bone-light); padding: .2rem 0; transition: color .3s, transform .35s var(--ease); }
.footer__cols a:hover { color: var(--taupe-light, #BDB6AC); transform: translateX(.35rem); }
.footer__cols p { color: var(--muted-dark); }
/* Het NIRA-logo groot onderaan: merkteken + woordmerk in de mono van de huisstijl. */
.footer__logo { display: flex; align-items: stretch; gap: clamp(1.25rem, 2.5vw, 2.25rem); width: fit-content; margin: clamp(4rem, 8vw, 7rem) 0 clamp(2.5rem, 5vw, 4rem); text-decoration: none; color: var(--bone-light); }
.footer__logo svg { height: clamp(5.5rem, 11vw, 10rem); width: auto; }
.footer__logo .logo__rule { opacity: .35; }
.footer__logo .logo__word { display: flex; flex-direction: column; justify-content: space-between; font-size: clamp(.95rem, 1.9vw, 1.6rem); letter-spacing: .22em; line-height: 1.2; }
.footer__bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .5rem; padding-top: 1.5rem; border-top: 1px solid var(--line-dark); font-family: var(--font-mono); font-size: .66rem; letter-spacing: .14em; text-transform: uppercase; color: var(--muted-dark); }

/* ==========================================================================
   Projectpagina's
   ========================================================================== */
.p-hero { position: relative; min-height: 88svh; display: flex; align-items: flex-end; color: var(--bone-light); background: var(--ink); overflow: hidden; }
.p-hero__img { position: absolute; inset: -10% 0; will-change: transform; }
.p-hero__img img { width: 100%; height: 100%; object-fit: cover; animation: settle 2.6s var(--ease) both; }
.p-hero__img::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(20,27,36,.55) 0%, rgba(20,27,36,0) 30%, rgba(20,27,36,.2) 55%, rgba(20,27,36,.8) 100%); }
.p-hero__copy { position: relative; padding-bottom: clamp(2.5rem, 6vw, 5rem); padding-top: 9rem; }
.crumbs { font-family: var(--font-mono); font-size: .68rem; letter-spacing: .14em; text-transform: uppercase; color: rgba(243,239,230,.7); margin-bottom: 1.5rem; }
.crumbs a { text-decoration: none; }
.crumbs a:hover { color: var(--bone-light); }
.p-hero h1 { font-size: clamp(3.25rem, 9vw, 8rem); }

.facts { display: grid; grid-template-columns: repeat(5, 1fr); margin: 0; }
.facts div { padding: 2rem 1.5rem 2rem 0; }
.facts div + div { padding-left: 1.5rem; border-left: 1px solid var(--line-dark); }
.facts dt { font-family: var(--font-mono); font-size: .68rem; letter-spacing: .16em; text-transform: uppercase; color: var(--muted-dark); }
.facts dd { margin: .5rem 0 0; font-family: var(--font-head); font-size: 1.5rem; line-height: 1.2; }

.text { display: grid; grid-template-columns: 5fr 7fr; gap: clamp(2.5rem, 6vw, 6rem); }
.text h2 { font-size: clamp(2.25rem, 4vw, 3.5rem); }
.text__body p { color: var(--ink-60); }
.text__body p + p { margin-top: 1.25rem; }
.text__body .lead { font-family: var(--font-head); font-size: clamp(1.6rem, 2.4vw, 2.1rem); line-height: 1.25; color: var(--ink); margin-bottom: 2rem; }

.list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.list li { display: grid; grid-template-columns: 5rem 1fr 1.4fr; gap: 1rem 2rem; padding: 2rem 0; border-bottom: 1px solid var(--line); align-items: baseline; }
.list__n { font-family: var(--font-mono); font-size: .8rem; color: var(--muted); }
.list__t { font-family: var(--font-head); font-size: clamp(1.6rem, 2.4vw, 2.1rem); line-height: 1.1; }
.list__d { color: var(--ink-60); }

.gallery { display: grid; grid-template-columns: repeat(12, 1fr); gap: clamp(3rem, 6vw, 5.5rem) clamp(1.25rem, 2.5vw, 2.5rem); }
.gallery figure { margin: 0; }
.gallery img { width: 100%; object-fit: cover; transition: transform 1.2s var(--ease); }
.gallery figure:hover img { transform: scale(1.03); }
.gallery figcaption { display: grid; grid-template-columns: 3rem 1fr; gap: 1rem; margin-top: 1.25rem; padding-top: 1rem; border-top: 1px solid var(--line); color: var(--muted); font-size: .95rem; max-width: 34rem; }
.gallery figcaption span { font-family: var(--font-mono); font-size: .72rem; padding-top: .25rem; }
.gallery figcaption strong { display: block; font-family: var(--font-head); font-weight: 400; font-size: 1.5rem; color: var(--ink); line-height: 1.2; margin-bottom: .25rem; }
.g-frame { overflow: hidden; }
.g-a { grid-column: 1 / 6; } .g-a img { aspect-ratio: 3 / 4; } .g-a .g-frame { border-radius: var(--round) var(--round) 0 0; }
.g-b { grid-column: 7 / 13; align-self: end; } .g-b img { aspect-ratio: 4 / 3; }
.g-c { grid-column: 1 / 13; } .g-c img { aspect-ratio: 21 / 9; }
.g-d { grid-column: 3 / 11; } .g-d img { aspect-ratio: 16 / 10; }

.steps { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--line); }
.step { padding: 2.25rem 2rem 0 0; }
.step + .step { padding-left: 2rem; border-left: 1px solid var(--line); }
.step__n { font-family: var(--font-mono); font-size: .7rem; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.step h3 { font-size: clamp(1.6rem, 2.2vw, 2rem); margin: 1.5rem 0 1rem; }
.step p { color: var(--ink-60); font-size: .98rem; }

.band { position: relative; overflow: hidden; aspect-ratio: 21 / 9; }
.band__inner { position: absolute; inset: -10% 0; }
.band img { width: 100%; height: 100%; object-fit: cover; }

.spec { margin: 0; border-top: 1px solid var(--line-dark); }
.spec div { display: grid; grid-template-columns: 13rem 1fr; gap: 1rem 2rem; padding: 1.4rem 0; border-bottom: 1px solid var(--line-dark); }
.spec dt { font-family: var(--font-mono); font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; padding-top: .3rem; }
.spec dd { margin: 0; }
.cta-row { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 2.5rem; }

.next { position: relative; display: flex; align-items: flex-end; min-height: 70svh; color: var(--bone-light); text-decoration: none; overflow: hidden; background: var(--ink); }
.next__img { position: absolute; inset: -8% 0; }
.next__img img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.4s var(--ease); }
.next__img::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(20,27,36,.15), rgba(20,27,36,.75)); }
.next:hover .next__img img { transform: scale(1.04); }
.next__copy { position: relative; padding-bottom: clamp(2.5rem, 6vw, 5rem); width: 100%; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 1.5rem; }
.next h2 { font-size: clamp(3rem, 8vw, 7rem); }

/* ==========================================================================
   Losse pagina's
   ========================================================================== */
.page-head { padding: clamp(4rem, 9vw, 7.5rem) 0 clamp(3rem, 6vw, 5rem); border-bottom: 1px solid var(--line); }
.page-head .crumbs { color: var(--muted); }
.page-head .crumbs a:hover { color: var(--ink); }
.page-head h1 { font-size: clamp(3rem, 7.5vw, 6.75rem); max-width: 15ch; }
.page-head__lead { margin-top: clamp(1.75rem, 3vw, 2.5rem); max-width: 38rem; font-size: 1.15rem; color: var(--muted); }
.page-head__lead + .page-head__links { margin-top: 2.25rem; }
.page-head__links { display: flex; flex-wrap: wrap; gap: .6rem; }
.chip { display: inline-flex; align-items: center; gap: .6rem; padding: .65rem 1.15rem; border: 1px solid var(--line); border-radius: 999px; font-family: var(--font-mono); font-size: .66rem; letter-spacing: .14em; text-transform: uppercase; text-decoration: none; transition: border-color .3s, background .3s; }
.chip:hover { border-color: var(--ink); background: var(--bone); }
.chip span { color: var(--muted); }

/* Discipline: beeld + tekst, om en om gespiegeld */
.disc { display: grid; grid-template-columns: 5fr 7fr; gap: clamp(2.5rem, 6vw, 6rem); align-items: center; }
.disc + .disc { margin-top: clamp(5rem, 10vw, 8.5rem); }
.disc--flip { grid-template-columns: 7fr 5fr; }
.disc--flip .disc__img, .disc--flip .disc__art { order: 2; }
.disc__img { overflow: hidden; border-radius: var(--round) var(--round) 0 0; }
.disc__img img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.disc h2 { font-size: clamp(2.25rem, 4.2vw, 3.75rem); margin-bottom: 1.5rem; }
.disc__body > p { color: var(--ink-60); max-width: 36rem; }
.disc__body > p + p { margin-top: 1rem; }
.ticks { list-style: none; margin: 2rem 0 0; padding: 0; border-top: 1px solid var(--line); max-width: 36rem; }
.ticks li { display: grid; grid-template-columns: 2.5rem 1fr; padding: .85rem 0; border-bottom: 1px solid var(--line); font-size: .98rem; }
.ticks li::before { content: counter(t, decimal-leading-zero); counter-increment: t; font-family: var(--font-mono); font-size: .68rem; color: var(--muted); padding-top: .3rem; }
.ticks { counter-reset: t; }
.disc .more { margin-top: 2rem; }

/* Quote */
.quote { max-width: 60rem; }
.quote p { font-family: var(--font-head); font-size: clamp(2rem, 4.2vw, 3.6rem); line-height: 1.12; letter-spacing: -0.01em; }
.quote p em { color: var(--muted-dark); }
.quote footer { margin-top: 2rem; font-family: var(--font-mono); font-size: .7rem; letter-spacing: .16em; text-transform: uppercase; color: var(--muted-dark); }

/* Team — het nummerdevice uit de huisstijl: initialen in een dunne cirkel */
.team { display: grid; grid-template-columns: repeat(4, 1fr); gap: 2.5rem 2rem; }
.member__dot { display: flex; align-items: center; gap: 0; margin-bottom: 1.75rem; }
.member__dot span { flex: none; display: grid; place-items: center; width: var(--dot, 4.5rem); height: 4.5rem; border: 1px solid currentColor; border-radius: 50%; font-family: var(--font-head); font-size: 1.5rem; }
.member__dot::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.member h3 { font-size: 1.75rem; }
.member .meta { display: block; margin: .4rem 0 1rem; }
.member p { color: var(--ink-60); font-size: .95rem; }

/* Contactformulier */
.contact-grid { display: grid; grid-template-columns: 5fr 7fr; gap: clamp(3rem, 7vw, 7rem); align-items: start; }
.contact-grid dl { margin: 0; }
.contact-grid dl div { padding: 1.4rem 0; border-bottom: 1px solid var(--line); }
.contact-grid dl div:first-child { border-top: 1px solid var(--line); }
.contact-grid dt { font-family: var(--font-mono); font-size: .68rem; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); margin-bottom: .4rem; }
.contact-grid dd { margin: 0; font-family: var(--font-head); font-size: 1.6rem; line-height: 1.25; }
.contact-grid dd a { text-decoration: none; border-bottom: 1px solid var(--line); }
.contact-grid dd a:hover { border-color: currentColor; }
.form { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem 2rem; }
.field { display: flex; flex-direction: column; gap: .5rem; }
.field--full { grid-column: 1 / -1; }
.field label { font-family: var(--font-mono); font-size: .68rem; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }
.field input, .field select, .field textarea { font: inherit; color: var(--ink); background: transparent; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; padding: .7rem 0; transition: border-color .3s; -webkit-appearance: none; appearance: none; }
.field textarea { min-height: 8rem; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-bottom-color: var(--ink); }
.form__foot { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem; }
.form__foot p { font-size: .85rem; color: var(--muted); max-width: 26rem; }
.btn[type="submit"] { cursor: pointer; font: inherit; font-family: var(--font-mono); font-size: .72rem; letter-spacing: .16em; text-transform: uppercase; }

/* Projectpagina met staand beeld: titel links, beeld rechts */
.p-split { padding: clamp(2.5rem, 5vw, 4rem) 0 clamp(4rem, 8vw, 6.5rem); }
.p-split__grid { display: grid; grid-template-columns: 6fr 5fr; gap: clamp(2.5rem, 6vw, 6rem); align-items: end; }
.p-split .crumbs { color: var(--muted); }
.p-split .crumbs a:hover { color: var(--ink); }
.p-split h1 { font-size: clamp(3.25rem, 8vw, 7.25rem); margin: 1rem 0 1.75rem; }
.p-split__lead { font-family: var(--font-head); font-size: clamp(1.5rem, 2.3vw, 2rem); line-height: 1.25; max-width: 30rem; }
.p-split__img { overflow: hidden; border-radius: var(--round) var(--round) 0 0; }
.p-split__img img { width: 100%; aspect-ratio: 4 / 5; max-height: 82svh; object-fit: cover; }
.kv { display: grid; grid-template-columns: 1fr 1fr; margin: clamp(2.5rem, 5vw, 3.5rem) 0 0; border-top: 1px solid var(--line); max-width: 34rem; }
.kv div { padding: 1.1rem 0; border-bottom: 1px solid var(--line); }
.kv div:nth-child(odd) { padding-right: 1.5rem; }
.kv dt { font-family: var(--font-mono); font-size: .66rem; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }
.kv dd { margin: .35rem 0 0; font-family: var(--font-head); font-size: 1.35rem; line-height: 1.2; }

/* Volgend project, staande variant */
.next-split { display: grid; grid-template-columns: 7fr 4fr; gap: clamp(2rem, 5vw, 5rem); align-items: end; text-decoration: none; color: inherit; }
.next-split h2 { font-size: clamp(3rem, 8vw, 7rem); margin: .25rem 0 1.5rem; }
.next-split__img { overflow: hidden; border-radius: var(--round) var(--round) 0 0; }
.next-split__img img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; transition: transform 1.2s var(--ease); }
.next-split:hover .next-split__img img { transform: scale(1.04); }
.next-split:hover .arrow { width: 2.25rem; }

/* Doorkijk-CTA onderaan generieke pagina's */
.cta-band { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 2rem; }
.cta-band h2 { font-size: clamp(2.5rem, 5.5vw, 4.75rem); max-width: 16ch; }
.cta-band h2 em { color: var(--muted-dark); }

/* Kleine "meer"-link onder een sectie */
.section-more { margin-top: clamp(2.5rem, 5vw, 3.5rem); }

/* --- Beweging -------------------------------------------------------------
   Alles licht en eenmalig: een fade-up per blok (met een kleine stagger in
   rasters), beelden die van onder naar boven worden onthuld, hairlines die
   uittekenen, en een zachte parallax op de grote beelden. Geen pinning,
   geen scrubbing. Bij prefers-reduced-motion staat alles stil. */
@keyframes settle { from { transform: scale(1.12); } to { transform: scale(1); } }
@keyframes rise { from { opacity: 0; transform: translateY(32px); } to { opacity: 1; transform: none; } }

.hero__copy > *, .p-hero__copy > * { animation: rise 1.3s var(--ease) both; }
.hero__copy > :nth-child(1), .p-hero__copy > :nth-child(1) { animation-delay: .25s; }
.hero__copy > :nth-child(2), .p-hero__copy > :nth-child(2) { animation-delay: .4s; }
.hero__copy > :nth-child(3) { animation-delay: .6s; }
.header { animation: rise 1s var(--ease) .1s both; }

.js [data-fade] { opacity: 0; transform: translateY(28px); transition: opacity 1.1s var(--ease), transform 1.1s var(--ease); transition-delay: calc(var(--i, 0) * 90ms); }
.js [data-fade].is-in { opacity: 1; transform: none; }

.js [data-reveal] { clip-path: inset(100% 0 0 0); transition: clip-path 1.4s var(--ease); transition-delay: calc(var(--i, 0) * 90ms); }
.js [data-reveal] img { transform: scale(1.15); transition: transform 1.8s var(--ease); }
.js [data-reveal].is-in { clip-path: inset(0 0 0 0); }
.js [data-reveal].is-in img { transform: scale(1); }
.js .project:hover [data-reveal].is-in img, .js .gallery figure:hover [data-reveal].is-in img { transform: scale(1.04); }
.js .exp-stage[data-reveal] img { transform: none; }
.js .exp-stage[data-reveal] .exp-img:not(.is-active) { transform: scale(1.12); }

/* Hairlines die van links naar rechts uittekenen */
.js .label::before { transform: scaleX(0); transform-origin: left; transition: transform 1s var(--ease) .2s; }
.js .is-in .label::before, .js .label.is-in::before, .hero .label::before, .p-hero .label::before { transform: scaleX(1); }
.js .pillars { border-top-color: transparent; position: relative; }
.js .pillars::before { content: ""; position: absolute; left: 0; right: 0; top: -1px; height: 1px; background: rgba(243,239,230,.28); transform: scaleX(0); transform-origin: left; transition: transform 1.6s var(--ease); }
.js .pillars.is-in::before { transform: scaleX(1); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .js [data-fade], .js [data-reveal], .js [data-reveal] img { opacity: 1; transform: none; clip-path: none; }
  .js .label::before, .js .pillars::before { transform: none; }
  [data-parallax] { transform: none !important; }
}

/* --- Responsief --------------------------------------------------------- */
@media (max-width: 1024px) {
  .team { grid-template-columns: repeat(2, 1fr); }
  .pillars, .steps { grid-template-columns: repeat(2, 1fr); }
  .pillar:nth-child(3), .step:nth-child(3) { padding-left: 0; border-left: 0; }
  .pillar, .step { padding-bottom: 2.25rem; }
  .facts { grid-template-columns: repeat(3, 1fr); }
  .facts div:nth-child(4) { padding-left: 0; border-left: 0; }
  .projects { grid-template-columns: repeat(2, 1fr); }
  .project:nth-child(3n+2) { margin-top: 0; }
  .project:nth-child(2n) { margin-top: clamp(0rem, 6vw, 4rem); }
}
@media (max-width: 760px) {
  .disc, .contact-grid, .p-split__grid, .next-split, .form, .footer__cols { grid-template-columns: 1fr; }
  .disc--flip { grid-template-columns: 1fr; }
  .disc--flip .disc__img, .disc--flip .disc__art { order: 0; }
  .team { grid-template-columns: 1fr; }
  .p-split__img img { aspect-ratio: 4 / 4.4; }
  .footer__logo svg { height: 4.5rem; }
  .footer__logo .logo__word { font-size: .85rem; }
  .head, .intro, .expertise, .featured, .text, .contact__row { grid-template-columns: 1fr; }
  .exp-stage { --h: 110vw; position: relative; top: 0; }
  .exp-stage { --h: min(110vw, 34rem); }
  .rows li { min-height: 0; }
  .js .rows.is-tracking li { opacity: 1; }
  .js .rows.is-tracking li.is-current h3 { transform: none; }
  .projects, .pillars, .steps { grid-template-columns: 1fr; }
  .project:nth-child(2n) { margin-top: 0; }
  .pillar + .pillar, .step + .step { padding-left: 0; border-left: 0; border-top: 1px solid rgba(243,239,230,.28); }
  .step + .step { border-top-color: var(--line); }
  .about__img, .about__card { grid-column: 1 / 13; }
  .about__card { grid-row: 2; margin: -3rem 1rem 0; }
  .facts { grid-template-columns: repeat(2, 1fr); }
  .facts div, .facts div + div { padding: 1.25rem 1rem 1.25rem 0; border-left: 0; }
  .list li { grid-template-columns: 3rem 1fr; }
  .list__d { grid-column: 2; }
  .gallery > figure { grid-column: 1 / 13; }
  .g-a img { aspect-ratio: 4 / 5; }
  .g-c img, .band img { aspect-ratio: 4 / 3; }
  .spec div { grid-template-columns: 1fr; gap: .35rem; }
  .hero h1 { font-size: clamp(2.75rem, 12vw, 4rem); }
}

/* --- Aanvullingen ronde 3 ------------------------------------------------ */
.page-head--long h1 { font-size: clamp(2.75rem, 6vw, 5.5rem); max-width: 19ch; }
.alt .cta-band h2 em, .cta-band h2 em.on-light { color: var(--ground); }
button.chip { background: none; font: inherit; font-family: var(--font-mono); font-size: .66rem; letter-spacing: .14em; text-transform: uppercase; color: inherit; cursor: pointer; }
.chip.is-active { background: var(--ink); color: var(--bone-light); border-color: var(--ink); }
.chip.is-active span { color: var(--taupe); }
.is-filtered-out { display: none !important; }
.filter-empty { color: var(--muted); }


/* --- Ronde 4: benchmark-plan --------------------------------------------- */
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Kerncijfers onder het manifest */
.figures { display: grid; grid-template-columns: repeat(4, 1fr); margin: clamp(3.5rem, 7vw, 6rem) 0 0; border-top: 1px solid var(--line); }
.figure { display: flex; flex-direction: column-reverse; justify-content: flex-end; gap: .9rem; padding: 2rem 1.5rem 0 0; }
.figure + .figure { padding-left: 1.5rem; border-left: 1px solid var(--line); }
.figure__n { margin: 0; font-family: var(--font-head); font-size: clamp(3rem, 5.5vw, 5rem); line-height: 1; letter-spacing: -0.02em; font-variant-numeric: lining-nums tabular-nums; }
.figure__l { font-family: var(--font-mono); font-size: .68rem; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); max-width: 14rem; }

/* Statuslabel op projectbeelden en korte regel eronder */
.project__img, .featured__img { position: relative; }
.tag { position: absolute; z-index: 2; left: 1rem; top: 1rem; padding: .45rem .8rem; border-radius: 999px; background: var(--bone-light); color: var(--ink); font-family: var(--font-mono); font-size: .6rem; letter-spacing: .14em; text-transform: uppercase; }
.project:nth-child(3n+2) .tag { top: 1rem; }
.project__line { margin-top: .5rem; color: var(--muted); font-size: .95rem; }

/* Duurzaamheid in de praktijk (op ground) */
.green { margin-top: clamp(3.5rem, 7vw, 5.5rem); padding-top: 2rem; border-top: 1px solid rgba(243,239,230,.28); }
.green__list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: 2rem; }
.green__list li { display: flex; flex-direction: column; gap: .5rem; }
.green__list strong { font-family: var(--font-head); font-weight: 400; font-size: clamp(1.6rem, 2.2vw, 2rem); line-height: 1.1; }
.green__list span { font-size: .95rem; }
.green__list a { margin-top: .4rem; width: fit-content; font-family: var(--font-mono); font-size: .66rem; letter-spacing: .14em; text-transform: uppercase; text-decoration: none; border-bottom: 1px solid rgba(243,239,230,.4); padding-bottom: 2px; }
.green__list a:hover { border-color: var(--bone-light); }

/* Actueel */
.news { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(2rem, 4vw, 3rem) clamp(1.25rem, 2.5vw, 2.5rem); }
.news__item { display: block; text-decoration: none; }
.news__img { overflow: hidden; border-radius: var(--round) var(--round) 0 0; margin-bottom: 1.25rem; background: var(--bone); }
.news__img img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; transition: transform 1.2s var(--ease); }
.js .news__item:hover [data-reveal].is-in img, .news__item:hover .news__img img { transform: scale(1.04); }
.news__item h3 { font-size: clamp(1.5rem, 2.1vw, 1.9rem); margin: .6rem 0 .6rem; transition: color .3s; }
.news__item p { color: var(--muted); font-size: .95rem; }
.news__item:hover h3 { color: var(--ground); }

/* Footer: nieuwsbrief en social */
.footer__cols p { margin-bottom: .6rem; }
.news-form { display: flex; gap: .5rem; margin-top: 1rem; }
.news-form input { flex: 1; min-width: 0; font: inherit; color: var(--bone-light); background: transparent; border: 0; border-bottom: 1px solid var(--line-dark); padding: .7rem 0; }
.news-form input::placeholder { color: var(--muted-dark); }
.news-form input:focus { outline: none; border-bottom-color: var(--bone-light); }
.news-form .btn { padding: .75rem 1.2rem; cursor: pointer; }
.footer__social { display: flex; flex-wrap: wrap; gap: .25rem 1.5rem; margin-top: 1.75rem; }
.footer__social a { font-family: var(--font-mono); font-size: .66rem; letter-spacing: .16em; text-transform: uppercase; }

/* Dropdown: groepskopjes */
.nav__group { display: block; padding: .9rem 1.5rem .35rem; font-family: var(--font-mono); font-size: .58rem; letter-spacing: .18em; text-transform: uppercase; color: var(--muted); }
.nav__group:first-child { padding-top: .4rem; }

@media (max-width: 1024px) {
  .figures { grid-template-columns: repeat(2, 1fr); }
  .figure:nth-child(3) { padding-left: 0; border-left: 0; }
  .figure:nth-child(n+3) { padding-top: 2rem; margin-top: 2rem; border-top: 1px solid var(--line); }
  .news { grid-template-columns: repeat(2, 1fr); }
  .footer__cols { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 760px) {
  .news { grid-template-columns: 1fr; }
  .footer__cols { grid-template-columns: 1fr; }
}
@media (max-width: 960px) {
  .nav__group { padding-left: 1rem; }
}

/* --- Expertise: lijnanimaties i.p.v. foto's -------------------------------
   Kleine, rustige tekeningen in de huisstijl. Ze tekenen zich één keer uit
   zodra ze in beeld komen (.is-in, via dezelfde observer als de fade-ups);
   daarna loopt er hooguit één subtiele, trage beweging door. */
.disc__art { margin: 0; justify-self: center; width: 100%; max-width: 27rem; padding: clamp(1.25rem, 3vw, 2rem); background: var(--bone); border-radius: var(--round) var(--round) 0 0; }
.js .disc__art[data-fade] { transform: none; }
.disc__art svg { display: block; width: 100%; height: auto; overflow: visible; }
.disc__cap { margin-top: 1rem; padding-top: .9rem; border-top: 1px solid var(--line); font-family: var(--font-mono); font-size: .66rem; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }
.disc__art svg * { fill: none; stroke: var(--ink); stroke-width: 1.25; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.disc__art .t { fill: var(--muted); stroke: none; font-family: var(--font-mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; }
.disc__art .serif { fill: var(--ink); stroke: none; font-family: var(--font-head); font-size: 26px; }

/* Basisbewegingen: uittekenen en infaden met een eigen vertraging (--d) en duur (--t) */
.disc__art .draw { stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset var(--t, 1.2s) var(--ease) var(--d, 0s); }
.disc__art .fade { opacity: 0; transition: opacity .8s var(--ease) var(--d, 0s); }
.disc__art.is-in .draw { stroke-dashoffset: 0; }
.disc__art.is-in .fade { opacity: 1; }

/* 01 — gebouw rijst op, haak van de kraan zwaait zacht */
.art--build .slab { fill: var(--bone-light); }
.art--build .floor { opacity: 0; transform: translateY(-18px); transition: opacity .7s var(--ease), transform .9s var(--ease); transition-delay: calc(1s + var(--i) * .35s); }
.art--build.is-in .floor { opacity: 1; transform: none; }
.art--build .hook { transform-origin: 232px 62px; opacity: 0; transition: opacity .6s .9s; }
.art--build.is-in .hook { opacity: 1; animation: sway 4s ease-in-out 1.6s infinite; }
@keyframes sway { 0%, 100% { transform: rotate(-4deg); } 50% { transform: rotate(4deg); } }

/* 02 — lange horizon */
.art--invest .area { fill: var(--taupe); stroke: none; opacity: 0; transition: opacity 1.2s ease 2.6s; }
.art--invest.is-in .area { opacity: .22; }
.art--invest .line { stroke-width: 2; }
.art--invest .zig, .art--invest .x { stroke: var(--taupe-dark, #8E877C); }
.art--invest .dot { fill: var(--ink); stroke: none; }
.art--invest .pulse { stroke: var(--ink); opacity: 0; transform-origin: 360px 118px; }
.art--invest.is-in .pulse { animation: pulse 2.4s ease-out 3.2s infinite; }
@keyframes pulse { 0% { opacity: .6; transform: scale(1); } 100% { opacity: 0; transform: scale(3.2); } }

/* 03 — oude indeling vervaagt, nieuwe tekent in, een meetlijn scant */
.art--redev .old * { stroke: var(--taupe-dark, #8E877C); stroke-dasharray: 4 4; }
.art--redev .old { opacity: 0; transition: opacity .8s ease 1.2s; }
.art--redev.is-in .old { opacity: 1; animation: fadeOld 1s ease 2.1s forwards; }
@keyframes fadeOld { to { opacity: .12; } }
.art--redev .scan { stroke: var(--ground); opacity: 0; }
.art--redev.is-in .scan { animation: scan 5s ease-in-out 3.8s infinite; }
@keyframes scan { 0% { transform: translateY(80px); opacity: 0; } 10% { opacity: .55; } 90% { opacity: .55; } 100% { transform: translateY(340px); opacity: 0; } }

/* 04 — kantoor ↔ wonen, wisselt rustig */
.art--transform .office, .art--transform .home { opacity: 0; transition: opacity .8s ease 1.2s; }
.art--transform.is-in .office { opacity: 1; animation: stateA 9s ease-in-out 2.5s infinite; }
.art--transform.is-in .home { animation: stateB 9s ease-in-out 2.5s infinite; }
.art--transform .home circle { fill: var(--taupe); stroke: none; }
@keyframes stateA { 0%, 40% { opacity: 1; } 50%, 90% { opacity: 0; } 100% { opacity: 1; } }
@keyframes stateB { 0%, 40% { opacity: 0; } 50%, 90% { opacity: 1; } 100% { opacity: 0; } }

/* 05 — jaarcirkel */
.art--manage .orbit { transform-origin: 200px 200px; opacity: 0; transition: opacity .8s ease 2s; }
.art--manage .orbit circle { fill: var(--ink); stroke: none; }
.art--manage.is-in .orbit { opacity: 1; animation: orbit 16s linear 2s infinite; }
@keyframes orbit { to { transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce) {
  .disc__art .draw { stroke-dashoffset: 0; }
  .disc__art .fade, .art--build .floor, .art--build .hook, .art--transform .office, .art--manage .orbit { opacity: 1 !important; transform: none !important; }
  .art--transform .home { display: none; }
  .art--invest .area { opacity: .22; }
  .art--redev .old { opacity: .12; }
}
@media (max-width: 760px) {
  .disc__art { max-width: 22rem; justify-self: start; }
}

/* --- Projecten als showcase ------------------------------------------------ */
.phead { padding: clamp(3rem, 6vw, 5rem) 0 clamp(3rem, 6vw, 4.5rem); }
.phead .crumbs { color: var(--muted); }
.phead .crumbs a:hover { color: var(--ink); }
.phead__grid { display: grid; grid-template-columns: 7fr 5fr; gap: 2rem clamp(2.5rem, 6vw, 6rem); align-items: end; margin-top: 1rem; }
.phead h1 { font-size: clamp(2.75rem, 5.5vw, 5rem); }
.phead__lead { color: var(--muted); font-size: 1.05rem; max-width: 30rem; }

/* Index: alle projecten in één oogopslag, klik scrolt naar het blok */
.pindex { list-style: none; margin: clamp(3rem, 6vw, 4.5rem) 0 0; padding: 0; border-top: 1px solid var(--ink); }
.pindex a { display: grid; grid-template-columns: 3.5rem 1.6fr 1fr 1fr 1fr 2rem; align-items: baseline; gap: 1rem; padding: 1.15rem 0; border-bottom: 1px solid var(--line); text-decoration: none; transition: background .3s, padding .4s var(--ease); }
.pindex a:hover { background: var(--bone); padding-left: .75rem; padding-right: .75rem; }
.pindex__n { font-family: var(--font-mono); font-size: .7rem; color: var(--muted); }
.pindex__name { font-family: var(--font-head); font-size: clamp(1.4rem, 2vw, 1.75rem); line-height: 1.1; }
.pindex__c, .pindex__st { font-family: var(--font-mono); font-size: .66rem; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.pindex__st { color: var(--ink); }
.pindex .arrow { justify-self: end; width: 1.25rem; }
.pindex a:hover .arrow { width: 2rem; }

/* Projectblokken */
.showcase { border-top: 1px solid var(--line); }
.showrow { display: grid; grid-template-columns: 6fr 5fr; gap: clamp(2.5rem, 6vw, 6.5rem); align-items: center; scroll-margin-top: 7rem; }
.showrow + .showrow { margin-top: clamp(5rem, 11vw, 9rem); }
.showrow--flip { grid-template-columns: 5fr 6fr; }
.showrow--flip .showrow__img { order: 2; }
.showrow__img { position: relative; display: block; overflow: hidden; border-radius: var(--round) var(--round) 0 0; background: var(--bone); }
.showrow__img img { width: 100%; aspect-ratio: 4 / 5; max-height: 86svh; object-fit: cover; transition: transform 1.4s var(--ease); }
.showrow__img:hover img, .js .showrow__img[data-reveal].is-in:hover img { transform: scale(1.035); }
.showrow__n { display: block; font-family: var(--font-mono); font-size: .72rem; letter-spacing: .14em; margin-bottom: 1.5rem; }
.showrow__n span { color: var(--muted); }
.showrow h2 { font-size: clamp(2.75rem, 5.5vw, 4.75rem); }
.showrow h2 a { text-decoration: none; }
.showrow .meta { display: block; margin: 1rem 0 1.5rem; }
.showrow__body > p { color: var(--ink-60); max-width: 30rem; font-size: 1.05rem; }
.kv--3 { grid-template-columns: repeat(3, 1fr); max-width: 32rem; margin: 2rem 0 2.25rem; }
.kv--3 div:nth-child(odd) { padding-right: 0; }
.kv--3 div + div { padding-left: 1rem; border-left: 1px solid var(--line); }
.kv--3 dd { font-size: 1.15rem; }

@media (max-width: 900px) {
  .pindex a { grid-template-columns: 2.5rem 1fr auto; }
  .pindex__c { display: none; }
  .pindex .arrow { display: none; }
}
@media (max-width: 760px) {
  .phead__grid, .showrow, .showrow--flip { grid-template-columns: 1fr; }
  .showrow--flip .showrow__img { order: 0; }
  .showrow__img img { aspect-ratio: 4 / 4.4; }
  .kv--3 div + div { padding-left: .75rem; }
}

/* --- Projecten-dropdown met beeld ---------------------------------------- */
.nav__sub--media { display: grid; grid-template-columns: minmax(16rem, 1fr) 12.5rem; gap: 0; padding: 0; min-width: 0; width: max-content; }
.nav__sub-list { padding: .6rem 0; }
.nav__preview { position: relative; margin: 0; overflow: hidden; background: var(--bone); border-left: 1px solid var(--line); }
.nav__preview img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transform: scale(1.06); transition: opacity .45s var(--ease), transform .9s var(--ease); }
.nav__preview img.is-active { opacity: 1; transform: scale(1); }
.nav__preview-cap { position: absolute; left: .75rem; bottom: .75rem; z-index: 2; padding: .4rem .7rem; border-radius: 999px; background: var(--bone-light); font-family: var(--font-mono); font-size: .58rem; letter-spacing: .14em; text-transform: uppercase; color: var(--ink); }
@media (max-width: 960px) {
  .nav__sub--media { display: none; width: 100%; grid-template-columns: 1fr; }
  .nav__item.is-open .nav__sub--media { display: block; }
  .nav__preview { display: none; }
  .nav__sub-list { padding: 0; }
}

/* --- Projectindex: zwevend beeld dat met de muis meegaat ------------------ */
.pindex-wrap { position: relative; }
.pindex__preview { position: absolute; left: 0; top: 0; z-index: 5; width: clamp(12rem, 18vw, 17rem); aspect-ratio: 4 / 5; margin: 0; overflow: hidden; pointer-events: none; border-radius: var(--round) var(--round) 0 0; background: var(--bone); opacity: 0; transform: translate3d(var(--x, 0), var(--y, 0), 0) scale(.92); transition: opacity .35s var(--ease), transform .5s var(--ease); box-shadow: 0 24px 50px -28px rgba(20,27,36,.45); }
.pindex-wrap.is-previewing .pindex__preview { opacity: 1; transform: translate3d(var(--x, 0), var(--y, 0), 0) scale(1); }
.pindex__preview img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .3s; }
.pindex__preview img.is-active { opacity: 1; }
.pindex-wrap.is-previewing .pindex a { opacity: .45; }
.pindex-wrap.is-previewing .pindex a:hover { opacity: 1; }
@media (hover: none), (max-width: 900px) { .pindex__preview { display: none; } }
@media (prefers-reduced-motion: reduce) { .pindex__preview { transition: opacity .2s; } }

/* --- Duurzaamheid in de praktijk: licht paneel met kerngetallen ---------- */
.green { display: none; }
.eco { display: grid; grid-template-columns: 4fr 8fr; gap: 2rem clamp(2.5rem, 5vw, 5rem); margin-top: clamp(4rem, 8vw, 6rem); padding: clamp(2rem, 4vw, 3.5rem); background: var(--bone-light); color: var(--ink); border-radius: var(--round) var(--round) 0 0; }
.eco .label { color: var(--muted); }
.eco__head h3 { font-size: clamp(2rem, 3.2vw, 2.75rem); line-height: 1.05; }
.eco__head h3 em { color: var(--ground); }
.eco__head p { margin-top: 1.25rem; color: var(--muted); font-size: .95rem; max-width: 18rem; }
.eco__list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--ink); }
.eco__list a { display: grid; grid-template-columns: 8.5rem 1fr auto 1.5rem; align-items: center; gap: 1.5rem; padding: 1.35rem 0; border-bottom: 1px solid var(--line); text-decoration: none; transition: padding .4s var(--ease), background .3s; }
.eco__list a:hover { background: var(--bone); padding-left: .75rem; padding-right: .75rem; }
.eco__n { font-family: var(--font-head); font-size: clamp(2rem, 3vw, 2.6rem); line-height: 1; white-space: nowrap; }
.eco__t { font-size: .98rem; color: var(--ink-60); }
.eco__p { font-family: var(--font-mono); font-size: .64rem; letter-spacing: .14em; text-transform: uppercase; color: var(--ink); white-space: nowrap; }
.eco__list .arrow { justify-self: end; }
.eco__list a:hover .arrow { width: 2rem; }
@media (max-width: 1024px) {
  .eco { grid-template-columns: 1fr; }
  .eco__head p { max-width: 30rem; }
}
@media (max-width: 760px) {
  .eco__list a { grid-template-columns: 1fr auto; gap: .5rem 1rem; }
  .eco__n { grid-column: 1; }
  .eco__t { grid-column: 1 / -1; }
  .eco__p { grid-column: 1; }
  .eco__list .arrow { grid-row: 1; grid-column: 2; }
}

/* --- Team-slider ------------------------------------------------------------
   Native horizontale scroll met snap (swipe op mobiel, slepen/trackpad op
   desktop), plus pijlknoppen, teller en voortgangslijn. */
.tslider__head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 2rem; margin-bottom: clamp(2.5rem, 5vw, 3.5rem); }
.tslider__head h2 { font-size: clamp(2.5rem, 5.5vw, 4.75rem); }
.tslider__nav { display: flex; align-items: center; gap: .6rem; }
.tslider__count { font-family: var(--font-mono); font-size: .72rem; letter-spacing: .14em; color: var(--muted); margin-right: 1rem; }
.tslider__cur { color: var(--ink); }
.tslider__btn { display: grid; place-items: center; width: 3.25rem; height: 3.25rem; border: 1px solid var(--ink); border-radius: 50%; background: transparent; color: var(--ink); cursor: pointer; transition: background .3s, color .3s, opacity .3s; }
.tslider__btn:hover { background: var(--ink); color: var(--bone-light); }
.tslider__btn[disabled] { opacity: .3; pointer-events: none; }
.tslider__btn .arrow { width: 1.1rem; }
.arrow--l { transform: rotate(180deg); }

.tslider__track { display: grid; grid-auto-flow: column; grid-auto-columns: clamp(16rem, 26vw, 24rem); gap: clamp(1.25rem, 2.5vw, 2.25rem); overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: max(var(--pad), calc((100vw - var(--wrap)) / 2 + var(--pad))); padding: 0 max(var(--pad), calc((100vw - var(--wrap)) / 2 + var(--pad))) 1rem; scrollbar-width: none; cursor: grab; outline: none; }
.tslider__track::-webkit-scrollbar { display: none; }
.tslider__track.is-dragging { cursor: grabbing; scroll-snap-type: none; }
.tslider__track.is-dragging * { user-select: none; }
.tslide { scroll-snap-align: start; }
.tslide__img { overflow: hidden; border-radius: var(--round) var(--round) 0 0; background: var(--bone-dim, #D8D1C7); margin-bottom: 1.25rem; }
.tslide__img img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; transition: transform 1.2s var(--ease), filter .6s; filter: grayscale(.15); }
.tslide:hover .tslide__img img { transform: scale(1.04); filter: none; }
.tslide__meta { display: flex; align-items: baseline; gap: .9rem; padding-top: 1rem; border-top: 1px solid var(--line); }
.tslide__n { font-family: var(--font-mono); font-size: .66rem; color: var(--muted); }
.tslide h3 { font-size: 1.75rem; }
.tslide .meta { display: block; margin: .4rem 0 .9rem; }
.tslide p { color: var(--ink-60); font-size: .95rem; }
.tslider__bar { position: relative; height: 1px; margin-top: 2rem; background: var(--line); }
.tslider__bar span { position: absolute; left: 0; top: -1px; height: 3px; width: 25%; background: var(--ink); transition: transform .3s var(--ease); }
@media (max-width: 760px) {
  .tslider__track { grid-auto-columns: 78vw; }
  .tslider__count { display: none; }
}

/* Team-slider in autoplay: geen snap (die vecht met de continue beweging) */
.tslider--auto .tslider__track { scroll-snap-type: none; scroll-behavior: auto; }
.tslider__bar span { transition: transform .5s var(--ease); }