/* ==========================================================================
   Homepage
   ========================================================================== */

/* --------------------------------------------------------------------------
   Hero
   --------------------------------------------------------------------------
   Lagen, van achter naar voor (z-index binnen de hero, door isolation los
   van de rest van de pagina):
   0  .hero__visual    3D-scène "Perceel" (assets/js/hero-perceel.js)
   1  .hero__shade     verloop dat de kop links leesbaar houdt
   1  .hero__grain     korrel
   2  .hero__vignette  donkere rand en verloop
   3  inhoud en scroll-aanduiding
   -------------------------------------------------------------------------- */

.hero {
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: center; /* mobiel: rustiger in het midden; vanaf 768px onderaan */
  /* Mobiel iets korter dan het scherm, zodat de witte sectie eronder
     al in beeld komt; vanaf 768px schermvullend. */
  min-height: 82vh;
  min-height: 82svh;
  /* Onder de sticky header door, zodat die transparant over de hero ligt. */
  margin-top: calc(-1 * var(--header-h));
  padding-block:
    clamp(6.875rem, 14vh, 10rem)   /* 110→160, ontwerp; inclusief header */
    clamp(2.5rem, 6vw, 5.5rem);    /* 40→88, ontwerp */
  overflow: hidden;
  background: var(--petrol-900);
  color: var(--on-dark-1);
  --eyebrow-color: var(--on-dark-accent);
}

/* Petrol-outline valt weg op donker. */
.hero :focus-visible {
  outline-color: var(--on-dark-1);
}

.hero__visual,
.hero__shade,
.hero__grain,
.hero__vignette {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

/* Beeld van assets/js/hero-perceel.js; fadet in zodra de eerste frame staat.
   Zachte rand (mask): links blijft de kop vrij. */
.hero__visual {
  z-index: 0;
  opacity: 0;
  transition: opacity 1.4s var(--ease-plain);
  -webkit-mask-image: radial-gradient(ellipse 42% 60% at 63% 45%, #000 34%, transparent 100%);
  mask-image: radial-gradient(ellipse 42% 60% at 63% 45%, #000 34%, transparent 100%);
}

.hero__visual.is-ready {
  opacity: 1;
}

.hero__visual canvas {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
}

.hero__shade {
  z-index: 1;
  background: linear-gradient(
    90deg,
    color-mix(in srgb, var(--petrol-900) 90%, transparent) 0%,
    color-mix(in srgb, var(--petrol-900) 55%, transparent) 26%,
    transparent 50%
  );
}

/* Mobiel: het beeld staat als eigen blok bovenaan (onder de transparante
   header door), de kop en knoppen eronder. Zachte rand boven (logo blijft
   leesbaar) en onder (loopt over in het petrol). */
@media (max-width: 47.99em) {
  .hero {
    flex-direction: column;
    align-items: stretch;
    min-height: 0;
    padding-top: 0;
  }

  .hero__visual {
    position: relative;
    inset: auto;
    flex: none;
    height: clamp(17rem, 46svh, 24rem); /* 272→384: plan goed zichtbaar, kop blijft in het eerste scherm */
    -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 22%, #000 72%, transparent 100%);
    mask-image: linear-gradient(180deg, transparent 0%, #000 22%, #000 72%, transparent 100%);
  }

  .hero__shade {
    display: none;
  }

  .hero__content {
    margin-top: calc(-1 * var(--space-4)); /* iets in de zachte onderrand van het beeld */
  }
}

/* Fijne ruis (SVG feTurbulence), zwart-wit, als overlay over het petrol. */
.hero__grain {
  z-index: 1;
  opacity: 0.06;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

.hero__vignette {
  z-index: 2;
  background: var(--vignette-radial), var(--vignette-linear);
}

.hero__content {
  position: relative;
  z-index: 3;
}

.hero .eyebrow {
  margin-bottom: var(--space-8);
}

/* Kop -------------------------------------------------------------------- */

.hero__title {
  color: var(--on-dark-1);
  font-size: var(--fs-h1-sub);
  line-height: var(--lh-display);
  letter-spacing: var(--tr-heading);
  /* Woorden nooit afbreken; de clamp() in --fs-display houdt ze passend. */
  hyphens: manual;
  overflow-wrap: normal;
}

.hero__row {
  display: block;
}

/* Elk woord is een masker waar de tekst bij de animatie in schuift.
   0.18em extra onderruimte zodat staarten (g, p) niet worden afgesneden. */
.hero__word {
  display: inline-block;
  overflow: hidden;
  vertical-align: top;
  padding-bottom: 0.18em;
  margin-bottom: -0.18em;
}

.hero__word > span {
  display: inline-block;
}

/* "generatie": Open Sans cursief light. 0.08em links compenseert dat de
   eerste cursieve letter buiten het masker naar links helt. */
.hero__word--serif {
  padding-left: 0.08em;
  margin-left: -0.08em;
}

.hero__word--serif > span {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: var(--fw-light);
}

/* Opbouw-animatie: alleen als verrijking. Zonder animatie (of bij
   reduced-motion) staat de kop gewoon, want de rusttoestand is zichtbaar
   en de animatie loopt vanaf "onder het masker" naar die rusttoestand.
   700ms per rij, rijen 80ms na elkaar: de kop staat binnen 0,9s. */
@media (prefers-reduced-motion: no-preference) {
  .hero__word > span {
    animation: hero-word 700ms var(--ease-out) both;
  }

  .hero__row:nth-child(2) .hero__word > span {
    animation-delay: var(--stagger);
  }

  .hero__row:nth-child(3) .hero__word > span {
    animation-delay: calc(2 * var(--stagger));
  }
}

@keyframes hero-word {
  from {
    transform: translateY(110%);
  }
}

/* Subtekst en knoppen ---------------------------------------------------- */

.hero__meta {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-8);
  margin-top: clamp(2.5rem, 5vw, 5.5rem); /* 40→88, ontwerp */
}

/* Naast elkaar als ze passen, anders onder elkaar. */
.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
}

/* Scroll-aanduiding ------------------------------------------------------ */

.hero__scroll {
  position: absolute;
  right: var(--shell-pad);
  bottom: clamp(1.5rem, 3vw, 2.5rem); /* 24→40, ontwerp */
  z-index: 3;
  display: none;
  align-items: center;
  gap: var(--space-3);
  color: var(--on-dark-2);
  font-size: var(--fs-micro);
  letter-spacing: var(--tr-eyebrow);
  text-transform: uppercase;
}

.hero__scroll-line {
  position: relative;
  width: var(--border-width);
  height: 3.5rem; /* 56px, ontwerp */
  overflow: hidden;
  background: var(--border-on-dark);
}

/* Wit segment; staat stil bovenin bij reduced-motion. */
.hero__scroll-line::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  top: 0;
  height: 1.5rem; /* 24px, ontwerp */
  background: var(--on-dark-1);
}

@media (prefers-reduced-motion: no-preference) {
  .hero__scroll-line::after {
    animation: hero-scroll 2s ease-in-out infinite;
  }
}

@keyframes hero-scroll {
  0%   { transform: translateY(-100%); }
  60%,
  100% { transform: translateY(100%); }
}

/* Tablet en groter ------------------------------------------------------- */

/* Mobiel: grotere titel, zodat hij de hero meer vult. */
@media (max-width: 47.99em) {
  .hero__title {
    font-size: clamp(2.75rem, 12.5vw, 3.5rem); /* 44→56 */
  }
}

@media (min-width: 48em) {
  .hero {
    align-items: flex-end;
    min-height: 100vh;
    min-height: 100svh;
  }

  .hero__scroll {
    display: flex;
  }
}

/* Desktop: knoppen rechts (zoals in het ontwerp; de subtekst ernaast is
   vervallen). */
@media (min-width: 64em) {
  .hero__meta {
    align-items: flex-end;
  }
}

/* --------------------------------------------------------------------------
   Manifest
   -------------------------------------------------------------------------- */

.manifest {
  padding-block: var(--section-mobile) var(--space-4); /* onder: Voor wie volgt op dezelfde grond */
  background: var(--bg);
  color: var(--fg-1);
}

.manifest .eyebrow {
  margin-bottom: var(--gap-stack);
}

.manifest__statement {
  max-width: 18ch;
  font-size: var(--fs-h2-sub);
  line-height: var(--lh-heading);
  letter-spacing: var(--tr-heading);
}

/* Cursief deel in sectiekoppen op papier: Open Sans regular (niet light
   zoals in de hero), petrol. */
.manifest__statement em,
.audiences__title em,
.werkwijze__title em,
.about__title em {
  color: var(--accent);
  font-weight: var(--fw-regular);
}

.manifest__footer {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-8);
  margin-top: var(--space-12);
  padding-top: var(--space-5);
  border-top: var(--border-width) solid var(--border);
}

.manifest__body {
  display: grid;
  gap: var(--space-5);
  max-width: 52ch; /* ontwerp */
  color: var(--fg-2);
  font-size: var(--fs-body-fluid);
}

@media (min-width: 48em) {
  .manifest {
    padding-block: var(--section-xl);
  }

  .manifest__statement {
    font-size: var(--fs-h2-sub);
  }

  .manifest__footer {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: flex-end;
    gap: var(--space-12);
    margin-top: var(--space-20);
    padding-top: var(--space-6);
  }
}

/* Desktop: de twee alinea's naast elkaar, de link rechts ernaast. */
@media (min-width: 64em) {
  .manifest__body {
    flex: 1;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-12);
    max-width: none;
  }

  .manifest__body p {
    max-width: 52ch; /* regellengte per kolom, zoals het ontwerp */
  }
}

/* --------------------------------------------------------------------------
   Voor wie
   -------------------------------------------------------------------------- */

.audiences {
  padding-block: var(--section-l);
  background: var(--bg);
  color: var(--fg-1);
}

.audiences__title {
  margin: var(--space-4) 0 var(--gap-stack);
  font-size: var(--fs-h2-sub);
  line-height: var(--lh-tight);
  letter-spacing: var(--tr-display);
}

/* --------------------------------------------------------------------------
   Werkwijze (met de oproep voor locaties als afsluiting)
   -------------------------------------------------------------------------- */

.werkwijze {
  padding-block: var(--section-mobile);
  background: var(--bg);
  color: var(--fg-1);
}

.werkwijze__head {
  display: grid;
  gap: var(--space-8);
  margin-bottom: var(--space-10);
}

.werkwijze__title {
  margin-top: var(--space-2); /* geen max-width: de regelovergang staat in de markup */
  font-size: var(--fs-h2-sub);
  line-height: var(--lh-tight);
  letter-spacing: var(--tr-display);
}

.werkwijze__flow {
  padding-top: var(--space-10);
  border-top: var(--border-width) solid var(--border);
}

.werkwijze__lead {
  max-width: 34ch; /* 30ch liet "uw wensen." los op de laatste regel staan */
  margin-bottom: var(--space-8);
  font-family: var(--font-display);
  font-size: var(--fs-lead-xl);
  line-height: var(--lh-lead);
  letter-spacing: var(--tr-heading);
}

.werkwijze__cols {
  display: grid;
  gap: var(--space-6);
}

.werkwijze__cols p {
  max-width: 46ch;
  color: var(--fg-body);
  line-height: var(--lh-relaxed);
}

.werkwijze__cta {
  margin-top: var(--space-16);
}

@media (min-width: 48em) {
  .werkwijze {
    padding-block: var(--section-xl) var(--section-l);
  }

  .werkwijze__flow {
    padding-top: var(--space-14);
  }

  .werkwijze__lead {
    margin-bottom: var(--space-14);
  }

  .werkwijze__cta {
    margin-top: var(--space-24);
  }
}

@media (min-width: 64em) {
  .werkwijze__head {
    grid-template-columns: 1.4fr 1fr;
    align-items: end;
    gap: var(--space-12);
    margin-bottom: var(--space-20);
  }

  .werkwijze__cols {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--gap-split);
  }
}

/* --------------------------------------------------------------------------
   Projecten
   -------------------------------------------------------------------------- */

.projects {
  padding-block: var(--section-mobile);
  background: var(--petrol-ink);
  color: var(--on-dark-1);
  --eyebrow-color: var(--on-dark-accent);
}

.projects :focus-visible {
  outline-color: var(--on-dark-1);
}

.projects__head {
  margin-bottom: var(--space-12);
}

.projects__title {
  max-width: 18ch;
  margin: var(--space-4) 0 var(--space-6);
  color: var(--on-dark-1);
  font-size: var(--fs-h2-sub);
  line-height: var(--lh-display);
  letter-spacing: var(--tr-display);
}

.projects__title em {
  color: var(--on-dark-accent);
  font-weight: var(--fw-regular);
}

.projects__all {
  color: var(--on-dark-accent);
  border-bottom-color: color-mix(in srgb, var(--petrol-200) 40%, transparent);
}

.projects__all:hover {
  color: var(--on-dark-1);
}

/* Rij ---------------------------------------------------------------------
   Rand links en rechts gelijk aan de container, ook breder dan --shell-max,
   zodat de eerste kaart onder de kop begint. */
.projects__track {
  --track-pad: max(var(--shell-pad), calc((100% - var(--shell-max)) / 2 + var(--shell-pad)));
  display: flex;
  gap: var(--gap-grid);
  margin: 0;
  padding: 0 var(--track-pad) var(--space-4);
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: var(--track-pad);
  list-style: none;
}

/* Met knoppen en balk eronder is de scrollbalk overbodig. */
.projects__track.has-controls {
  scrollbar-width: none;
}

.projects__track.has-controls::-webkit-scrollbar {
  display: none;
}

/* Op mobiel ~80% breed, zodat de volgende kaart rechts in beeld piept.
   4:5: staand genoeg voor de tekst op de foto, maar laat meer van de
   (liggende) projectfoto zien dan een hogere kaart. */
.projects__item {
  flex: 0 0 auto;
  width: clamp(16.25rem, 80vw, 35rem);
  aspect-ratio: 4 / 5;
  padding-top: var(--space-2); /* ruimte voor de lift bij hover */
  scroll-snap-align: start;
}

/* Bediening ------------------------------------------------------------- */

.projects__controls {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  margin-top: var(--space-8);
}

.projects__controls[hidden] {
  display: none;
}

.projects__label {
  color: var(--on-dark-3);
  font-size: var(--fs-micro);
  letter-spacing: var(--tr-eyebrow);
  text-transform: uppercase;
}

.projects__bar {
  position: relative;
  flex: 1;
  height: var(--border-width);
  overflow: hidden;
  background: var(--line-on-dark);
}

/* Deel van de rij dat in beeld is (breedte) en waar (positie). */
.projects__bar > i {
  position: absolute;
  inset-block: 0;
  left: calc(var(--progress, 0) * (100% - var(--size, 100%)));
  width: var(--size, 100%);
  background: var(--on-dark-1);
}

.projects__button {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 2.75rem;   /* 44px: ruim tikvlak */
  height: 2.75rem;
  padding: 0;
  background: none;
  border: var(--border-width) solid var(--border-on-dark);
  border-radius: var(--radius-round);
  color: var(--on-dark-1);
  cursor: pointer;
  transition:
    background-color var(--dur-2) var(--ease-plain),
    opacity var(--dur-2) var(--ease-plain);
}

.projects__button:hover:not(:disabled) {
  background: var(--hover-on-dark);
}

.projects__button:disabled {
  cursor: default;
  opacity: 0.35;
}

.projects__button--prev .arrow {
  transform: scaleX(-1);
}

@media (min-width: 48em) {
  .projects {
    padding-block: var(--section-xl) var(--section-l);
  }

  .projects__head {
    margin-bottom: var(--space-20);
  }

  .projects__title {
    font-size: var(--fs-h2-sub);
  }

  .projects__item {
    width: clamp(20rem, 38vw, 35rem); /* 320→560, ontwerp */
  }

  .projects__controls {
    gap: var(--space-6);
    margin-top: var(--space-12);
  }
}

/* Laptop en groter: liggend, ongeveer de verhouding van de projectfoto's,
   zodat de hele foto zichtbaar is en de kaart op het scherm past. */
@media (min-width: 64em) {
  .projects__item {
    width: clamp(20rem, 44vw, 40rem); /* 320→640 */
    aspect-ratio: 16 / 10;
    max-height: 62svh;
  }
}

/* --------------------------------------------------------------------------
   Over ons
   -------------------------------------------------------------------------- */

.about {
  padding-top: var(--section-mobile);
  background: var(--bg);
  color: var(--fg-1);
}

.about__head {
  display: grid;
  gap: var(--space-8);
  margin-bottom: var(--space-14);
}

.about__title {
  max-width: 12ch;
  margin-top: var(--space-2);
  font-size: var(--fs-h2-sub);
  line-height: var(--lh-tight);
  letter-spacing: var(--tr-display);
}

.about__intro {
  max-width: 44ch;
  color: var(--fg-2);
  line-height: var(--lh-relaxed);
}

/* "Visie" boven portret en tekst, met ruimte eronder zoals in het ontwerp. */
.about__label {
  margin-bottom: var(--space-12);
}

.about .founder {
  margin-bottom: var(--space-20);
}

@media (min-width: 48em) {
  .about {
    padding-top: var(--section-xl);
  }

}

@media (min-width: 64em) {
  .about__head {
    grid-template-columns: 1fr 1fr;
    align-items: end;
    gap: var(--space-16);
    margin-bottom: var(--space-20);
  }

  /* Ruimte naar de partnerband. */
  .about .founder {
    margin-bottom: var(--space-30);
  }
}

/* --------------------------------------------------------------------------
   Leadzin Werkwijze op de homepage: 2/3 van het token, met ondergrens.
   Koppen hebben op alle pagina's dezelfde maat per niveau (h1 --fs-h1-sub,
   h2 --fs-h2-sub, kaarttitels --fs-card).
   -------------------------------------------------------------------------- */

.home {
  --home-heading-scale: 0.6667;
}

.home .werkwijze__lead {
  font-size: max(1.125rem, calc(var(--fs-lead-xl) * var(--home-heading-scale)));
}

/* --------------------------------------------------------------------------
   Compacter ritme op de homepage: ongeveer een derde minder witruimte
   tussen en binnen de secties dan op de subpagina's. De sectie-tokens
   worden hier voor .home herdefinieerd; de grote marges binnen secties
   krijgen een stap kleiner.
   -------------------------------------------------------------------------- */

.home {
  --section-mobile: 2.375rem;                  /* 38, was 56 */
  --section-l: 2.375rem;                       /* 38, was 56 */
  --gap-stack: clamp(1.75rem, 4vh, 3rem);      /* 28→48, was 40→72 */
}

.home .manifest__footer   { margin-top: var(--space-8); }
.home .werkwijze__cta     { margin-top: var(--space-10); }
.home .projects__head     { margin-bottom: var(--space-8); }
.home .about__head        { margin-bottom: var(--space-10); }
.home .about__label       { margin-bottom: var(--space-8); }
.home .about .founder     { margin-bottom: var(--space-12); }

/* Wie wij zijn → Voor wie → Werkwijze: nog een derde minder, de drie
   secties lezen als één doorlopend verhaal. */
.home .manifest  { padding-bottom: var(--space-2); }
.home .audiences { padding-block: calc(var(--section-l) * 2 / 3); }
.home .werkwijze { padding-top: calc(var(--section-mobile) * 2 / 3); }

@media (min-width: 48em) {
  .home .manifest  { padding-bottom: calc(var(--section-xl) * 2 / 3); }
  .home .werkwijze { padding-top: calc(var(--section-xl) * 2 / 3); }
}

@media (min-width: 48em) {
  .home {
    --section-xl: clamp(5rem, 10.5vh, 8.375rem);  /* 80→134, was 120→200 */
    --section-l: clamp(3.375rem, 8vh, 5.875rem);  /* 54→94, was 80→140 */
  }

  .home .manifest__footer   { margin-top: var(--space-12); }
  .home .werkwijze__head    { margin-bottom: var(--space-12); }
  .home .werkwijze__flow    { padding-top: var(--space-10); }
  .home .werkwijze__lead    { margin-bottom: var(--space-10); }
  .home .projects__head     { margin-bottom: var(--space-12); }
  .home .projects__controls { margin-top: var(--space-8); }
  .home .about__head        { margin-bottom: var(--space-12); }
  .home .marquee            { padding-block: var(--space-12); }
}