/* Casepagina's en projectenoverzicht, ronde 6 (08-09-2026).
   Dauji 08-09: "Bouw C is tof. Mag doorontwikkeld worden maar hetzelfde
   allemaal behouden. Projectpagina en de precieze beeldkeuzes missen nog
   heel veel." Over ronde 5 (03-09): "Te veel tekst, niet echt fijne
   uitstraling."

   Dus: het apparaat van de home (blok 21 in custom.css, .p-home .case-*):
   beeld boven, een dichte balk eronder met naam, uitspraak in serif naar sans
   en een bijschrift rechts. Daarna beeld, beeld, beeld, met per sectie hooguit
   een korte passage. Alles in de Webflow-tokens; niets uit ontwerptaal.css.

   Blok 21 is .p-home-gescoped en blijft onaangeraakt; de waarden staan hier
   opnieuw onder een eigen prefix (cs-), zodat de twee pagina's elkaar niet
   kunnen breken. De preloader in de head verbergt .master-snap-section._1
   enzovoort, dus die klassen worden hier bewust niet hergebruikt.

   Beeldregel (memory portfolio-eigen-werk-nooit-croppen): cover op foto,
   contain op ontwerp. Elk ontwerpbeeld krijgt als grond de kleur van zijn
   eigen hoekpixels (gemeten met PIL, 08-09), zodat contain naadloos is. */

.p-case {
  background-color: var(--_colors---bg--bg-1);
}
.p-case .section.hero-template {
  display: none;
}
.cs img {
  display: block;
}

/* ---------------------------------------------------------------------------
   1. De opening: de kaart van de home, maar dan een. Vult het scherm zoals
   .master-snap-section, alleen zonder sticky: op een casepagina scrolt er
   niets overheen.
   --------------------------------------------------------------------------- */
.cs-open {
  padding: 96px 0 0;
}
.cs-kaart {
  display: flex;
  flex-direction: column;
  height: calc(100vh - 120px);
  min-height: 560px;
  border-radius: var(--_spacing---radius--radius-3);
  overflow: hidden;
  background-color: var(--cs-grond, #17150f);
}
.cs-kaart__beeld {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  background-color: var(--cs-grond, #17150f);
}
.cs-kaart__beeld img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--cs-pos, 50% 50%);
}
.cs-kaart__beeld.is-ontwerp img {
  object-fit: contain;
}

/* De balk: exact de waarden van .p-home .case-balk. */
.cs-balk {
  position: relative;
  z-index: 2;
  flex: 0 0 auto;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: clamp(20px, 3vw, 48px);
  padding: clamp(20px, 2.4vw, 34px) clamp(22px, 3vw, 44px);
  background-color: #17150f;
}
.cs-balk__links {
  display: flex;
  flex-direction: column;
  gap: clamp(8px, 1.1vw, 14px);
  min-width: 0;
}
.cs-naam {
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 12px;
  color: var(--_colors---color--yellow);
}
.cs-naam__nr {
  color: rgba(242, 239, 230, .5);
}
.cs-statement {
  margin: 0;
  color: #f2efe6;
  font-size: clamp(26px, 3.1vw, 46px);
  line-height: 1.06;
  letter-spacing: -.02em;
  font-weight: var(--weight--heading-sans);
}
.cs-statement__a,
.cs-statement__b {
  display: inline;
  white-space: nowrap;
}
.cs-statement__a {
  font-family: var(--font--heading-serif);
  font-weight: var(--weight--heading-serif);
}
.cs-statement__b {
  font-family: var(--font--heading-sans);
  font-weight: var(--weight--heading-sans);
}
.cs-balk__rechts {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: clamp(10px, 1.3vw, 16px);
  text-align: right;
  flex: 0 0 auto;
}
.cs-bijschrift {
  margin: 0;
  max-width: 34ch;
  color: rgba(242, 239, 230, .62);
}
.cs-balk__link {
  color: rgba(242, 239, 230, .72);
  text-decoration: none;
  transition: color .25s ease;
}
.cs-balk__link:hover,
.cs-balk__link:focus-visible {
  color: var(--_colors---color--yellow);
}

/* ---------------------------------------------------------------------------
   2. Woorden. Een korte passage links, de feiten rechts. Daarna nooit meer
   dan twee passages naast elkaar tussen twee beelden.
   --------------------------------------------------------------------------- */
.cs-intro {
  display: grid;
  grid-template-columns: 1.1fr .9fr;
  gap: 64px;
  padding: 96px 0 24px;
}
.cs-intro__tekst {
  margin: 0;
  max-width: 34ch;
  font-size: var(--_text---h6--font-size);
  line-height: 1.34;
  letter-spacing: -.3px;
}
.cs-woorden {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  padding: 72px 0 40px;
}
.cs-woorden__blok {
  display: flex;
  flex-direction: column;
  gap: 14px;
  max-width: 44ch;
}
.cs-woorden__blok .label {
  opacity: .5;
}
.cs-woorden__blok p {
  margin: 0;
  font-size: var(--_text---text-body--font-size);
  line-height: 156%;
}
.cs-woorden__blok p a {
  color: inherit;
}
.cs-citaat {
  padding: 88px 0 56px;
}
.cs-citaat p {
  margin: 0;
  max-width: 24ch;
  font-size: clamp(30px, 3.4vw, 52px);
  line-height: 1.06;
  letter-spacing: -1.5px;
}
.cs-citaat .cs-statement__b {
  opacity: .55;
}
.cs-citaat .label {
  display: block;
  margin-top: 24px;
  opacity: .5;
}

/* ---------------------------------------------------------------------------
   3. De beeldladder. Een beeld vol, of twee naast elkaar. Bijschrift komt
   uit het beeld zelf (memory bijschrift-uit-het-beeld-niet-de-copy).
   --------------------------------------------------------------------------- */
.cs-vol,
.cs-duo {
  padding: 32px 0 0;
}
.cs-duo {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
}
.cs-beeld {
  display: block;
  margin: 0;
}
.cs-beeld__kader {
  position: relative;
  aspect-ratio: 1800 / 1012;
  overflow: hidden;
  border-radius: var(--_spacing---radius--radius-3);
  background-color: var(--cs-grond, #17150f);
}
.cs-duo .cs-beeld__kader {
  aspect-ratio: 4 / 3;
}
.cs-duo.is-breed .cs-beeld__kader {
  aspect-ratio: 1800 / 1012;
}
.cs-duo.is-vierkant .cs-beeld__kader {
  aspect-ratio: 1 / 1;
}
.cs-vol.is-band .cs-beeld__kader {
  aspect-ratio: 1600 / 526;
}
.cs-beeld__kader img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--cs-pos, 50% 50%);
}
.cs-beeld.is-ontwerp .cs-beeld__kader img {
  object-fit: contain;
  padding: var(--cs-rand, 0);
}
.cs-beeld figcaption {
  margin: 14px 0 0;
  opacity: .5;
}

/* ---------------------------------------------------------------------------
   4. De staart: deliverables in een regel, vorige en volgende, en de vraag.
   .case-feiten en .case-sprong komen uit custom.css blok 11b en 11c.
   --------------------------------------------------------------------------- */
.cs-lijst {
  display: grid;
  grid-template-columns: 96px 1fr;
  gap: 32px;
  padding: 72px 0 0;
}
.cs-lijst .label {
  opacity: .5;
}
.cs-lijst p {
  margin: 0;
  max-width: 70ch;
  font-size: var(--_text---text-small--font-size);
  line-height: 160%;
  opacity: .72;
}
.cs-sprong {
  padding: 56px 0 0;
}
.cs-sprong .label {
  display: block;
  margin-bottom: 20px;
  opacity: .5;
}
.cs-vraag {
  margin-top: 120px;
  padding: 104px 0 112px;
  background-color: var(--_colors---color--dark);
  color: var(--_colors---bg--bg-1);
}
.cs-vraag h2 {
  max-width: 22ch;
  margin: 0 0 12px;
  font-size: var(--_text---h2--font-size);
  line-height: 96%;
  color: var(--_colors---bg--bg-1);
}
.cs-vraag__onder {
  margin: 0 0 40px;
  max-width: 52ch;
  opacity: .64;
}
.cs-vraag .cta-duo .nav-link.cta.cta-tweede {
  color: var(--_colors---bg--bg-1);
  box-shadow: inset 0 0 0 1px rgba(235, 232, 219, .4);
}

/* De navigatiepillen: dezelfde omzetting als op de dienstpagina's, want ook
   hier ligt de balk over beeld in plaats van over bone. */
.p-case .nav-link:not(.cta) {
  background-color: rgba(64, 52, 40, .88);
}
.p-case .nav-link:not(.cta):hover {
  background-color: rgba(88, 72, 55, .94);
}

/* ---------------------------------------------------------------------------
   5. Het overzicht (projecten.html): een donkere opening zoals .ds-open op
   diensten.html, dan drie kaarten in het apparaat van de home, elk met een
   uitgang.
   --------------------------------------------------------------------------- */
.cs-hub {
  background-color: var(--_colors---color--dark);
  color: var(--_colors---bg--bg-1);
  padding: 152px 0 96px;
}
.cs-hub__label {
  margin: 0;
  color: var(--_colors---bg--bg-1);
  opacity: .48;
}
.cs-hub__zin {
  margin: 24px 0 0;
  max-width: 20ch;
  font-size: clamp(38px, 5vw, 76px);
  line-height: 1.02;
  letter-spacing: -2.5px;
  color: var(--_colors---bg--bg-1);
  font-weight: var(--weight--heading-sans);
}
.cs-hub__zin .cs-statement__b {
  opacity: .55;
}
.cs-hub__onder {
  margin: 28px 0 0;
  max-width: 56ch;
  font-size: var(--_text---text-large--font-size);
  line-height: 150%;
  opacity: .72;
}
.cs-reeks {
  padding: 48px 0 0;
  display: flex;
  flex-direction: column;
  gap: 48px;
}
.cs-reeks .cs-kaart {
  height: auto;
  min-height: 0;
}
.cs-reeks .cs-kaart__beeld {
  display: block;
  flex: none;
  aspect-ratio: 1800 / 1012;
}

@media screen and (max-width: 991px) {
  .cs-open {
    padding-top: 88px;
  }
  .cs-balk {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
  }
  .cs-balk__rechts {
    align-items: flex-start;
    text-align: left;
    width: 100%;
  }
  .cs-intro,
  .cs-woorden {
    grid-template-columns: 1fr;
    gap: 40px;
    padding-top: 64px;
  }
  .cs-duo {
    gap: 20px;
  }
  .cs-lijst {
    grid-template-columns: 1fr;
    gap: 14px;
  }
  .cs-vraag {
    margin-top: 80px;
    padding: 72px 0 80px;
  }
  .cs-hub {
    padding: 132px 0 64px;
  }
}

@media screen and (max-width: 767px) {
  /* Zelfde keuze als blok 21 op 375: het beeldvlak krijgt de verhouding van
     de bron, zodat een liggende pagina niet staand wordt aangesneden. */
  .cs-kaart {
    height: auto;
    min-height: 0;
  }
  .cs-kaart__beeld {
    flex: none;
    aspect-ratio: 1800 / 1012;
  }
  .cs-statement {
    font-size: clamp(24px, 6.4vw, 32px);
  }
  .cs-bijschrift {
    max-width: 30ch;
  }
  .cs-duo {
    grid-template-columns: 1fr;
  }
  .cs-duo .cs-beeld__kader,
  .cs-duo.is-breed .cs-beeld__kader {
    aspect-ratio: 1800 / 1012;
  }
  .cs-duo.is-vierkant .cs-beeld__kader {
    aspect-ratio: 1 / 1;
  }
  .cs-intro__tekst {
    font-size: var(--_text---text-large--font-size);
  }
  .cs-citaat p {
    letter-spacing: -.8px;
  }
  /* Gemeten 08-09 op 375: de nowrap-helften van citaat en hub-zin liepen
     buiten het scherm (419px in 328px). Onder 767 mogen die twee wrappen;
     de kaartstatement (24px) past en blijft nowrap. */
  .cs-citaat .cs-statement__a,
  .cs-citaat .cs-statement__b,
  .cs-hub__zin .cs-statement__a,
  .cs-hub__zin .cs-statement__b {
    white-space: normal;
  }
  /* Gezien 08-09 op 375: met alleen wrappen viel "je het" alleen op een
     regel. De sans-helft van de hub-zin begint op mobiel op een eigen regel:
     "Een merk is pas af" / "als je het" / "kunt vastpakken." */
  .cs-hub__zin .cs-statement__b {
    display: block;
  }
  .cs-vraag h2 {
    font-size: var(--_text---h3--font-size);
  }
  .cs-hub__zin {
    letter-spacing: -1.5px;
  }
}

/* ---------------------------------------------------------------------------
   6. Schermen, ronde 7 (08-09-2026). Dauji: "die cases pagina, die is gewoon
   te groot en te breed. Die eerste sectie van de home, centreert, speelt met
   ruimte etc, snapje" en "iedere sectie binnen 100vh".

   Elk blok uit de oude middenkolom (intro, beeld, duo, woorden, citaat, en
   de lijst met de sprong samen) staat nu in een eigen <section class="cs-scherm">
   met daarin de 80vw-container (css/lay-80.css). Vanaf 992 is zo'n scherm
   precies 100vh, met de inhoud verticaal gecentreerd onder de nav (96px).
   Beeldkaders houden hun verhouding en krijgen hun breedte van de hoogte die
   over is: min(100%, (100vh - 160px) x verhouding). Bij 1440x900 is dat
   altijd de volle 80vw (1152), bij lage vensters wordt het kader smaller en
   blijft het binnen het scherm. Op het overzicht staat elke kaart op een
   eigen scherm, in de maat van de opening (calc(100vh - 120px)).

   Onder 992 loopt alles gewoon door met 40px ritme; gemeten 08-09 op 375 was
   geen blok hoger dan het scherm (kaders 328x184, hub 480, open 446).
   --------------------------------------------------------------------------- */
.cs-scherm {
  padding: 40px 0;
}
.cs-scherm .cs-intro,
.cs-scherm .cs-woorden,
.cs-scherm .cs-citaat,
.cs-scherm .cs-vol,
.cs-scherm .cs-duo,
.cs-scherm .cs-lijst {
  padding: 0;
}
.cs-scherm .cs-sprong {
  padding-top: 48px;
}
.cs .cs-vraag {
  margin-top: 40px;
}
/* De verhouding per kader, als getal, zodat de breedte eruit te rekenen is. */
.cs-vol .cs-beeld {
  --cs-r: 1.7787;
}
.cs-duo .cs-beeld {
  --cs-r: 1.3333;
}
.cs-duo.is-breed .cs-beeld {
  --cs-r: 1.7787;
}
.cs-duo.is-vierkant .cs-beeld {
  --cs-r: 1;
}
.cs-vol.is-band .cs-beeld {
  --cs-r: 3.0418;
}

@media screen and (min-width: 992px) {
  .cs-open,
  .cs-scherm,
  .cs-hub,
  .cs .cs-vraag {
    box-sizing: border-box;
    height: 100vh;
    margin-top: 0;
    padding: 96px 0 24px;
  }
  .cs-scherm,
  .cs-hub,
  .cs .cs-vraag {
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
  .cs-scherm > .main-container,
  .cs-hub > .main-container,
  .cs-vraag > .main-container {
    flex: 0 0 auto;
  }
  /* De kaartschermen centreren niet: de kaart vult het scherm zoals de opening. */
  .cs-scherm--kaart {
    display: block;
  }
  .cs-beeld {
    width: min(100%, calc((100vh - 160px) * var(--cs-r, 1.7787)));
    margin-left: auto;
    margin-right: auto;
  }
  .cs-beeld__kader {
    width: 100%;
  }
}

/* ---------------------------------------------------------------------------
   7. Ronde 8 (12-10-2026), spoor Cases. Dauji over de Fiori-opening: "zo
   groot, waar kijk ik". Een compacte opening: de kaart is geen schermvuller
   meer maar een beeld met een balk, het eerste scherm erna begint al in zicht.
   En een staand duo voor stills uit reels (9:16), zodat een staand beeld
   nooit liggend wordt aangesneden.
   --------------------------------------------------------------------------- */
.cs-duo.is-staand .cs-beeld__kader {
  aspect-ratio: 9 / 16;
}
.cs-duo.is-staand .cs-beeld {
  --cs-r: .5625;
}
@media screen and (min-width: 992px) {
  .cs-open.is-compact {
    height: auto;
    padding-bottom: 0;
  }
  .cs-open.is-compact .cs-kaart {
    height: min(68vh, calc(100vh - 120px));
    min-height: 480px;
  }
}
@media screen and (max-width: 767px) {
  .cs-duo.is-staand {
    grid-template-columns: 1fr 1fr;
    gap: 12px;
  }
  .cs-duo.is-staand .cs-beeld__kader {
    aspect-ratio: 9 / 16;
  }
}

/* ---------------------------------------------------------------------------
   8. Regelval (12-10-2026), spoor Cases. Gemeten na de deploy: 14 losse
   laatste woorden op de casepagina's, in CTA-koppen, bijschriften en lopende
   tekst. Koppen en labels worden gebalanceerd, lopende tekst krijgt pretty,
   zodat ook toekomstige CMS-tekst niet op een eenwoordige regel eindigt.
   --------------------------------------------------------------------------- */
.cs h1, .cs h2, .cs h3,
.cs .label, .cs figcaption {
  text-wrap: balance;
}
.cs p {
  text-wrap: pretty;
}