:root {
  /* Color — Studio LEEF (officiële huisstijl) */
  --color-bg:        #F6F2EC;            /* warme crème canvas */
  --color-ink:       #2D3D31;            /* diepgroen — tekst, strokes, nav */
  --color-accent:    #79876D;            /* salie — accenten */
  --color-on-dark:   #FFFFFF;
  --color-hairline:  rgba(45, 61, 49, 0.4);
  --color-stroke-soft: rgba(45, 61, 49, 0.28);

  /* Officiële merkkleuren */
  --green-dark:#2D3D31; --green:#79876D; --beige:#D7D2CB; --cream:#F6F2EC;
  --paper:#FFFFFF; --terra:#BB452A; --pink:#EC86D0; --line:#E3DCCF; --muted:#6E6B60;
  /* De balk boven en de balk onder delen één kleur (wens Selma, 04-09). */
  --bar:#26332A; --bar-ink:rgba(246,242,236,.85); --bar-line:rgba(246,242,236,.16);

  /* Typography — alleen Poppins */
  --font-serif: 'Poppins', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  --font-sans:  'Poppins', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  --tracking-wide: 0.22em;
  --tracking-body: 0.01em;
  --fs-eyebrow:   0.8rem;

  /* Shape + motion */
  --radius-pill:  999px;
  --ease-expo: cubic-bezier(0.16, 1, 0.3, 1);
  /* Eigen curve voor de scroll-reveal, bewust niet de expo hierboven. Die expo is na een
     tiende seconde al 58% klaar (nagerekend), en dat is wat je als een pop ervaart; langer
     maken bracht dat maar naar 46%. Deze begint rustig: 3% na 100ms, 34% na 300ms, 95% na
     800ms. De expo blijft waar hij hoort, aan de hamburger, de knoppen, de kaart-hover en
     de beeldzoom, want daar is die snelle inzet juist goed. */
  --ease-reveal: cubic-bezier(0.33, 0, 0.25, 1);

  /* Layout — één gedeelde inhoudsbreedte, alles gecentreerd hierop. */
  --gutter: clamp(1.5rem, 5vw, 5rem);
  --content-max: 1240px;
}

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

html {
  background: var(--color-bg);
  overflow-y: scroll;
  scroll-behavior: smooth;
}

body {
  background: var(--color-bg);
  color: var(--color-ink);
  font-family: var(--font-sans);
  font-weight: 400;
  letter-spacing: var(--tracking-body);
  -webkit-font-smoothing: antialiased;
}

/* ---------- Nav (vast in beeld, iets groter, roze knop) ---------- */

.nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 30;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.2rem;
  padding: clamp(1.05rem, 2.8vh, 1.6rem) var(--gutter);
  pointer-events: none;
  /* Effen donkergroene balk, altijd solide, gelijk aan de footer. */
  background: var(--bar);
  border-bottom: 1px solid var(--bar-line);
  transition: box-shadow 0.3s ease;
}
.nav.nav-solid { box-shadow: 0 6px 20px rgba(20, 26, 20, 0.22); }

.nav-logo { pointer-events: auto; display: flex; align-items: center; }
.nav-logo img { display: block; width: clamp(134px, 14vw, 176px); height: auto; }

.nav-links {
  display: flex; align-items: center;
  gap: clamp(1.2rem, 2.4vw, 2.2rem);
  pointer-events: auto;
}
.nav-link {
  font-family: var(--font-sans);
  font-size: 0.9rem;
  letter-spacing: 0.01em;
  color: var(--bar-ink);
  background: none; border: none; cursor: pointer; text-decoration: none;
  padding: 4px 0; border-bottom: 1.5px solid transparent;
  transition: color 0.2s, border-color 0.2s;
}
.nav-link:hover { color: var(--cream); border-color: var(--pink); }
.nav-menu-cta { display: none; text-decoration: none; }
.nav-onder { display: none; }
.nav-cta {
  pointer-events: auto; text-decoration: none;
  display: inline-flex; align-items: center;
  font-family: var(--font-sans); font-size: 0.85rem; font-weight: 600;
  color: var(--green-dark); background: var(--pink);
  padding: 11px 22px; border-radius: 999px;
  transition: background 0.2s, color 0.2s;
}
.nav-cta:hover { background: var(--cream); color: var(--green-dark); }

.nav-burger {
  display: none; flex-direction: column; justify-content: center; gap: 5px;
  width: 42px; height: 42px; padding: 0 9px;
  background: none; border: none; cursor: pointer; pointer-events: auto;
}
.nav-burger span { display: block; height: 2px; width: 100%; background: var(--cream); border-radius: 2px; transition: transform 0.3s var(--ease-expo), opacity 0.2s; }
.nav.open .nav-burger span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav.open .nav-burger span:nth-child(2) { opacity: 0; }
.nav.open .nav-burger span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

@media (max-width: 820px) {
  .nav-burger { display: flex; }
  .nav-links {
    position: absolute; top: 100%; left: 0; right: 0;
    flex-direction: column; align-items: stretch; gap: 0;
    background: var(--bar);
    border-bottom: 1px solid var(--bar-line);
    box-shadow: 0 16px 34px rgba(20, 26, 20, 0.28);
    padding: 0 var(--gutter);
    /* Het uitgeklapte menu vult het scherm onder de balk. De 100% is de hoogte van
       .nav zelf: dat is het containing block van dit absoluut geplaatste paneel.
       dvh volgt de adresbalk van de telefoon, vh is de terugval voor oudere browsers.
       De 1px is de border-bottom van .nav: een percentage rekent tegen de padding-box
       van het containing block en telt die rand dus niet mee. Zonder die aftrek is het
       geheel precies 1px te hoog, gemeten. */
    height: calc(100vh - 100% - 1px);
    height: calc(100dvh - 100% - 1px);
    max-height: 0; overflow: hidden; opacity: 0; visibility: hidden;
    transition: max-height 0.34s var(--ease-expo), opacity 0.28s ease,
                padding 0.34s var(--ease-expo), visibility 0.34s;
  }
  .nav.open .nav-links {
    max-height: calc(100vh - 100% - 1px);
    max-height: calc(100dvh - 100% - 1px);
    opacity: 1; visibility: visible; padding: 6px var(--gutter) 18px;
    overflow-y: auto;
  }
  /* Achtergrond niet laten meescrollen zolang het menu het scherm vult. */
  html:has(.nav.open) { overflow: hidden; }
  /* De zwevende cookie-elementen staan op z-index 85 en 90 en vielen daarmee over
     het contactblok onderin het menu. Zolang het menu open staat wijken ze; bij het
     sluiten komen ze terug, dus er wordt niets aan de toestemming zelf veranderd. */
  html:has(.nav.open) .cookiebar,
  html:has(.nav.open) .cookie-hersteller { display: none; }
  .nav-link {
    padding: 14px 2px; font-size: 1rem; letter-spacing: 0.03em; text-transform: none;
    border-bottom: 1px solid var(--bar-line);
  }
  .nav-menu-cta {
    display: flex; align-items: center; justify-content: center;
    margin-top: 14px; padding: 15px 30px; width: 100%;
    background: var(--pink); color: var(--green-dark);
    border-radius: 999px; border-bottom: none;
    font-family: var(--font-sans); font-size: 0.95rem; font-weight: 600; letter-spacing: 0.01em;
  }
  .nav-menu-cta:hover { background: var(--cream); color: var(--green-dark); }
  .nav-cta { display: none; }
  /* Contact onderaan het schermvullende menu. margin-top:auto duwt het blok naar de
     onderkant van de flex-kolom, zodat de ruimte onder de knop een taak krijgt. */
  .nav-onder {
    display: block; margin-top: auto; padding-top: 1.4rem;
    border-top: 1px solid var(--bar-line); color: var(--bar-ink);
  }
  .nav-onder__sign { font-size: .95rem; color: var(--cream); margin-bottom: .9rem; }
  .nav-onder__mail { display: inline-block; font-size: 1rem; color: var(--bar-ink); text-decoration: none; border-bottom: 1px solid var(--bar-line); padding-bottom: 2px; }
  .nav-onder__mail:hover { color: var(--cream); border-color: var(--pink); }
  .nav-onder__socials { display: flex; gap: 1.6rem; margin-top: 1rem; }
  .nav-onder__socials a { font-size: .92rem; color: var(--bar-ink); text-decoration: none; border-bottom: 1px solid transparent; }
  .nav-onder__socials a:hover { color: var(--cream); border-color: var(--pink); }
}

/* ============================================================
   Content-laag (.after-film). Gedeeld door de homepage én de
   pakket-detailpagina's. Alles gecentreerd op één breedte
   (--content-max, 1240px) zodat de secties nooit smal-links hangen.
   ============================================================ */
.after-film{
  position: relative; z-index: 20;
  background: var(--cream); color: var(--green-dark);
  font-family: var(--font-sans); font-weight: 400; line-height: 1.65; font-size: 17px;
}
/* Secties: symmetrische marges; de inhoud erin wordt op --content-max gecentreerd. */
.after-film section{ padding: clamp(3.5rem,8vw,6.5rem) var(--gutter); scroll-margin-top: 84px; }
.after-film .display{ font-family: var(--font-serif); font-weight: 600; line-height: 1.14; letter-spacing: -0.01em; }
.after-film .eyebrow{
  font-family: var(--font-sans); font-size: 0.78rem; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--green); font-weight: 600; margin-bottom: 1.1rem; text-indent: 0;
  display: inline-flex; align-items: center; gap: 10px;
}
.after-film .eyebrow .dot{ width: 6px; height: 6px; border-radius: 50%; background: var(--pink); flex: none; }
.after-film .section-head{ max-width: var(--content-max); margin: 0 auto clamp(2.5rem,5vw,3.5rem); text-align: center; }
.after-film .section-head .display{ font-size: clamp(1.9rem,4.4vw,3rem); margin-bottom: 1rem; }
.after-film .section-intro{ color: var(--muted); font-size: 1.05rem; max-width: 760px; margin: 0 auto; }

.after-film .btn{
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--font-sans); font-size: 0.95rem; font-weight: 500;
  padding: 15px 30px; border-radius: 999px; cursor: pointer;
  transition: all .25s var(--ease-expo); border: 1px solid transparent; text-decoration: none;
}
.after-film .btn-primary{ background: var(--green-dark); color: var(--cream); }
.after-film .btn-primary:hover{ background: var(--green); }
.after-film .btn-ghost{ background: transparent; color: var(--green-dark); border-color: var(--green-dark); }
.after-film .btn-ghost:hover{ background: var(--green-dark); color: var(--cream); }
.after-film .btn-pink{ background: var(--pink); color: var(--green-dark); font-weight: 600; }
.after-film .btn-pink:hover{ background: var(--green-dark); color: var(--cream); }

/* Welkom */
.after-film .welkom{ background: var(--cream); }
.after-film .welkom-inner{ max-width: var(--content-max); margin: 0 auto; text-align: center; }
.after-film .welkom-titel{ font-size: clamp(1.9rem,4.4vw,3rem); color: var(--green-dark); max-width: 20ch; margin: 0 auto 1.6rem; }
.after-film .welkom-inner p{ font-size: 1.1rem; color: var(--muted); margin: 0 auto 1.1rem; max-width: 68ch; }
.after-film .welkom-inner .welkom-accent{ font-family: var(--font-serif); font-weight: 600; color: var(--green-dark); font-size: clamp(1.2rem,2.2vw,1.5rem); line-height: 1.45; max-width: 34ch; margin-block: 1.8rem; }
.after-film .welkom-inner .welkom-slot{ color: var(--green-dark); }
.after-film .welkom-inner .welkom-sign{ font-family: var(--font-serif); font-weight: 600; color: var(--green-dark); font-size: clamp(1.3rem,2.4vw,1.6rem); margin-top: 1.6rem; }

/* Zo werken we samen — stappen (gecentreerd, onder elkaar) */
.after-film .werkwijze{ background: var(--paper); }
.after-film .stappen{ list-style: none; max-width: var(--content-max); margin: 0 auto; padding: 0; }
.after-film .stap{ display: flex; flex-direction: column; align-items: center; text-align: center; gap: 14px; padding: 30px 0; border-top: 1px solid var(--line); }
.after-film .stap:last-child{ border-bottom: 1px solid var(--line); }
.after-film .stap-num{ flex: none; width: 44px; height: 44px; border-radius: 50%; background: var(--green-dark); color: var(--cream); font-family: var(--font-serif); font-size: 1.25rem; font-weight: 600; display: flex; align-items: center; justify-content: center; }
.after-film .stap-tekst{ min-width: 0; max-width: 820px; margin: 0 auto; }
.after-film .stap-tekst h3{ font-size: 1.12rem; font-weight: 600; margin: 0 0 .4rem; color: var(--green-dark); }
.after-film .stap-tekst p{ color: var(--muted); font-size: 1rem; }

/* Pakketten */
.after-film .pakketten{ background: var(--beige); }
.after-film .pak-grid{ display: grid; grid-template-columns: repeat(3,1fr); gap: clamp(1rem,2.2vw,1.5rem); max-width: var(--content-max); margin: 0 auto; }
.after-film .pak-card{ position: relative; background: var(--paper); border-radius: 14px; overflow: hidden; display: flex; flex-direction: column; min-width: 0; transition: transform .25s var(--ease-expo), box-shadow .25s var(--ease-expo); }
.after-film .pak-card:hover{ transform: translateY(-4px); box-shadow: 0 18px 40px rgba(45,61,49,.12); }
.after-film .pak-card__link{ display: flex; flex-direction: column; height: 100%; text-decoration: none; color: inherit; }
.after-film .pak-card__link:focus-visible{ outline: 2px solid var(--green-dark); outline-offset: 3px; }
.after-film .pak-more{ margin-top: auto; padding-top: .6rem; font-size: .9rem; font-weight: 500; color: var(--green-dark); border-bottom: 2px solid transparent; transition: border-color .25s var(--ease-expo); }
.after-film .pak-card:hover .pak-more{ border-color: var(--pink); }
.after-film .pak-media{ position: relative; aspect-ratio: 4/3; overflow: hidden; }
.after-film .pak-media img{ width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease-expo); }
.after-film .pak-card:hover .pak-media img{ transform: scale(1.05); }
/* De donkere laag liep van onderen omhoog zolang de pakketnaam onderaan de kaart
   stond. Sinds 15-09 staat de naam in het midden van het beeld (verzoek Selma), dus
   ligt de plaat nu ook in het midden: een uitdovende ellips achter de naam, met een
   lichte basislaag zodat een fel beeld de letters niet opeet. Gemeten met
   scripts/contrast-check.mjs. */
.after-film .pak-media::after{ content:""; position:absolute; inset:0; background: radial-gradient(ellipse 82% 52% at 50% 50%, rgba(20,26,20,.56) 0%, rgba(20,26,20,.40) 54%, rgba(20,26,20,.14) 84%, rgba(20,26,20,.10) 100%); }
.after-film .pak-name{ position: absolute; left: 0; right: 0; top: 50%; transform: translateY(-50%); z-index: 2; padding: 0 14px; text-align: center; color: #fff; font-family: var(--font-serif); font-size: 1.35rem; font-weight: 600; line-height: 1.1; text-shadow: 0 1px 14px rgba(0,0,0,.45); }
.after-film .pak-tag{ position: absolute; top: 14px; left: 14px; z-index: 2; font-size: .68rem; letter-spacing: .08em; text-transform: uppercase; font-weight: 600; color: var(--green-dark); background: rgba(246,242,236,.92); padding: 5px 10px; border-radius: 999px; }
.after-film .pak-tag.alt{ color: var(--green-dark); background: rgba(236,134,208,.94); }
.after-film .pak-body{ padding: 16px 20px 22px; display: flex; flex-direction: column; align-items: center; text-align: center; gap: .5rem; }
.after-film .pak-price{ font-family: var(--font-serif); font-size: 1.5rem; font-weight: 600; color: var(--green-dark); }
.after-film .pak-unit{ font-family: var(--font-sans); font-size: .8rem; font-weight: 400; color: var(--muted); }
.after-film .pak-desc{ color: var(--muted); font-size: .95rem; }
/* Geen opacity meer. Diepgroen op de beige sectie haalt 7,66:1, maar op .7 wordt de
   getoonde kleur een menging met de achtergrond en blijft er 3,75:1 over, onder AA voor
   kleine tekst. Gemeten 02-10. Een contrastmeting die alleen de computed color leest
   zegt hier 7,66, dus dit valt niet op zonder de opacity mee te rekenen. De rust komt
   nu van cursief, formaat en centrering in plaats van van doorzichtigheid. Deze regel
   draagt sinds 02-10 de btw-vermelding bij de zes prijzen, dus hij moet leesbaar zijn. */
.after-film .pak-note{ max-width: var(--content-max); margin: 2rem auto 0; text-align: center; font-size: .95rem; color: var(--green-dark); font-style: italic; }
@media (max-width: 560px){ .after-film .pak-note{ font-size: 1rem; } }

/* Contact */
.after-film .contact{ background: var(--green-dark); color: var(--cream); text-align: center; }
.after-film .contact-inner{ max-width: 620px; margin: 0 auto; }
.after-film .contact .eyebrow{ color: var(--pink); }
.after-film .contact .display{ font-size: clamp(2rem,4.6vw,3rem); margin-bottom: 1rem; color: var(--cream); }
.after-film .contact .section-intro{ color: rgba(246,242,236,.8); margin: 0 auto; }
.after-film .contact-actions{ display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; margin: 2rem 0 1.8rem; }
.after-film .contact .btn-primary{ background: var(--cream); color: var(--green-dark); }
.after-film .contact .btn-primary:hover{ background: var(--pink); color: var(--green-dark); }
.after-film .contact .btn-ghost{ color: var(--cream); border-color: rgba(246,242,236,.5); }
.after-film .contact .btn-ghost:hover{ background: var(--cream); color: var(--green-dark); }
.after-film .socials{ list-style: none; display: flex; gap: 22px; justify-content: center; padding: 0; }
.after-film .socials a{ font-size: .9rem; color: rgba(246,242,236,.82); border-bottom: 1px solid transparent; padding-bottom: 2px; text-decoration: none; }
.after-film .socials a:hover{ color: var(--cream); border-color: var(--pink); }

/* Footer (met kolommen + links) */
.after-film .film-footer{ background: var(--bar); color: rgba(246,242,236,.75); padding: clamp(3rem,6vw,4.5rem) var(--gutter) 2rem; }
.after-film .foot-top{ max-width: var(--content-max); margin: 0 auto; display: grid; grid-template-columns: 1.5fr 1fr 1fr 1.1fr; gap: clamp(1.6rem,4vw,3rem); text-align: left; }
.after-film .foot-brand img{ height: 38px; width: auto; margin: 0 0 1.1rem; display: block; }
.after-film .foot-brand p{ font-size: .92rem; max-width: 30ch; color: rgba(246,242,236,.7); }
.after-film .foot-col{ display: flex; flex-direction: column; gap: .6rem; }
.after-film .foot-col h4{ font-family: var(--font-serif); font-size: .95rem; font-weight: 600; color: var(--cream); margin-bottom: .5rem; }
.after-film .foot-col a{ font-size: .9rem; color: rgba(246,242,236,.78); text-decoration: none; border-bottom: 1px solid transparent; width: fit-content; transition: color .2s, border-color .2s; }
.after-film .foot-col a:hover{ color: var(--cream); border-color: var(--pink); }
.after-film .foot-bottom{ max-width: var(--content-max); margin: clamp(2rem,4vw,3rem) auto 0; padding-top: 1.4rem; border-top: 1px solid rgba(246,242,236,.14); display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.after-film .foot-bottom .fine{ font-size: .8rem; opacity: .7; }
/* Algemene voorwaarden en privacyverklaring onderaan elke pagina. Ze stonden alleen op
   de afrekenpagina's, waar ze bij de akkoordvinkjes horen, en nergens anders: wie niet
   aan het afrekenen was kon ze dus niet vinden. De scheiding is een opsommingsteken via
   ::before en geen los teken in de HTML, zodat hij meeklapt als de regels onder elkaar
   komen te staan op een smal scherm. */
.after-film .foot-juridisch{ display: flex; flex-wrap: wrap; gap: .25rem .9rem; }
.after-film .foot-juridisch a{ color: inherit; text-decoration: underline; text-underline-offset: 3px; }
.after-film .foot-juridisch a + a::before{ content: '\00b7'; margin-right: .9rem; text-decoration: none; display: inline-block; }
/* De naamsvermelding onderin, met akkoord van Selma op 24-10-2026. De linktekst is de
   merknaam en niets anders: dezelfde voetlink met een zoekterm erin op een reeks
   klantsites is wat Google als linkschema behandelt. */
.after-film .foot-credit a{ color: inherit; text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 820px){
  .after-film .foot-top{ grid-template-columns: 1fr 1fr; }
  .after-film .foot-brand{ grid-column: 1 / -1; }
}
@media (max-width: 520px){
  .after-film .foot-top{ grid-template-columns: 1fr; }
  .after-film .foot-bottom{ flex-direction: column; }
}

/* Reveal */
.after-film .reveal{ opacity: 0; transform: translateY(22px); transition: opacity 1.1s var(--ease-reveal), transform 1.1s var(--ease-reveal); }
.after-film .reveal.in{ opacity: 1; transform: none; }

/* De zes pakketkaarten komen per rij in cascade binnen, van links naar rechts.
   De reveal zelf staat hierboven; dit voegt alleen een vertraging per kolom toe.

   PER RIJ en niet doorlopend van 1 tot 6. Rij twee komt later zelf in beeld en krijgt
   dus zijn eigen cascade. Doorlopend tellen zou kaart 6 bijna een halve seconde laten
   wachten terwijl hij al in beeld staat, en dat leest als traagheid.

   LET OP: de deling hieronder hoort bij het aantal kolommen van .pak-grid (3 kolommen,
   2 onder 900px, 1 onder 560px). Verandert daar het aantal kolommen, dan moet dit mee,
   anders staggert hij op de verkeerde kaarten.

   Stap 90ms bij een transition van .8s, dus een rij is na ongeveer een seconde compleet.
   Bij 'Beperk beweging' gebeurt er niets: de regel onderaan dit bestand zet transition op
   none en de kaarten staan meteen zichtbaar. Bewuste keuze van Peter, 08-10-2026. */
.after-film .pak-grid > .reveal:nth-child(3n+2){ transition-delay: 90ms; }
.after-film .pak-grid > .reveal:nth-child(3n+3){ transition-delay: 180ms; }

@media (max-width: 900px){   /* twee kolommen: kaart 2, 4 en 6 staan rechts */
  .after-film .pak-grid > .reveal:nth-child(3n+2),
  .after-film .pak-grid > .reveal:nth-child(3n+3){ transition-delay: 0ms; }
  .after-film .pak-grid > .reveal:nth-child(2n){ transition-delay: 90ms; }
}
@media (max-width: 560px){   /* een kolom: elke kaart komt alleen in beeld */
  /* :nth-child(n) raakt alles en staat er alleen om dezelfde specificiteit te halen als
     de regels hierboven. Zonder die pseudo-klasse wint de 90ms van deze nul. */
  .after-film .pak-grid > .reveal:nth-child(n){ transition-delay: 0ms; }
}

@media (max-width: 900px){
  .after-film .pak-grid{ grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px){
  .after-film{ font-size: 16px; }
  .after-film .pak-grid{ grid-template-columns: 1fr; }
  .after-film .pak-desc{ font-size: 1rem; }
  .after-film .contact-actions .btn{ display: flex; width: 100%; }
  .after-film .contact-actions{ width: 100%; }
  .after-film .socials{ flex-wrap: wrap; gap: 16px; }
}

/* ============================================================
   HOMEPAGE (concept-2): grote fotoheader + het "over"-blok naast elkaar.
   ============================================================ */
.after-film .hero{
  position: relative; padding: 0; max-width: none;
  min-height: min(88vh, 780px);
  display: flex; align-items: center; justify-content: center;
  text-align: center; overflow: hidden;
}
.after-film .hero-img{ position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* Alleen de homepage. Deze stylesheet wordt ook door de zes pakketpagina's geladen,
   en daar staat in dezelfde .hero-img een flatlay of een interieurbeeld waar het
   midden juist de goede uitsnede is.

   Sinds 05-10 draagt de homepage de brede uitsnede van dezelfde keukenfoto
   (selma-home-breed.jpg, 1672x941). Daarmee vervalt de reden voor de oude 26%: die
   hoorde bij het staande portret van 3:4, waarvan maar 41% van de hoogte in de band
   paste. Nu past 96% van de hoogte en klopt het midden gewoon.

   Op smal draait het om. Daar is de band hoger dan breed en past er maar 29,5% van de
   BREEDTE in. Selma staat op 62 tot 76% van de breedte, dus bij een gecentreerde
   uitsnede valt ze net buiten beeld. Vandaar 69% als standaard en pas vanaf 700px het
   midden. */
.after-film.home .hero-img{
  object-position: 69% center;
  /* Ook op smal begint de foto onder de balk. Zonder dit stond haar haarlijn op 390px
     op 100px met een balk van 98: 2px speling, dus in de praktijk tegen de balk aan.
     De fallback is hier 98px en vanaf 700px 112px, de twee gemeten navhoogtes; één
     waarde voor allebei zou op de andere maat een streep achtergrond laten zien. */
  top: var(--nav-h, 98px);
  height: calc(100% - var(--nav-h, 98px));
}
/* En vanaf 700px telt de hoogte, niet de breedte. De band is daar `min(88vh, 780px)`
   hoog bij de volle schermbreedte, dus hoe breder het scherm, hoe meer er van de hoogte
   af gaat: op 1440 past 96%, op 2560 nog maar 54%. Een gecentreerde uitsnede snijdt daar
   boven en onder 23% weg en Selma's hoofd zit in de bovenste 13%, dus dat valt eraf.
   Met 22% begint het venster op beide maten rond 1% en blijft ze compleet. */
@media (min-width: 700px){
  /* De balk is ondoorzichtig en 94 tot 112px hoog, en de foto liep eronder door. Daardoor
     viel de bovenkant van Selma's haar erachter: 12px op 1280, 25px op 1640 en 73px op
     2560, gemeten. Een andere object-position lost dat niet op, want op 1280 is de foto
     al voor 100% zichtbaar en staat haar haarlijn tóch op 100px, onder een balk van 112.
     De balk ligt er simpelweg overheen.

     Daarom begint de foto nu ónder de balk. Visueel verandert er niets (die balk was al
     ondoorzichtig), maar de 112px die achter de balk verdween komt terug als beeld.
     --nav-h wordt onderaan de pagina gemeten met een ResizeObserver, net als op
     /voorbeelden/proef-hero/; de 112px fallback is de gemeten maximumhoogte, zodat het
     zonder JavaScript nooit te krap is.

     En 22% werd 15%: met de teruggewonnen ruimte houdt de haarlijn zo op élke breedte
     marge, van 84px op 1280 tot 68px op 2560. Op 22% was dat op 2560 nog 14px. */
  .after-film.home .hero-img{
    object-position: center 15%;
    top: var(--nav-h, 112px);
    height: calc(100% - var(--nav-h, 112px));
  }
}
.after-film .hero-overlay{
  position: absolute; inset: 0;
  /* Zwaarder dan de oude .30: de foto van de stalen is bovenin veel lichter dan
     het interieurbeeld dat hier eerst stond. Gemeten met scripts/hero-contrast.mjs. */
  background: linear-gradient(180deg, rgba(20,26,20,.50) 0%, rgba(20,26,20,.46) 38%, rgba(20,26,20,.62) 100%);
}
/* De homepage draagt Selma's keukenfoto, en die is van zichzelf al warm en donker. De
   .50 hierboven is gekozen voor de flatlay van de stalen, die bovenin juist heel licht
   was. De zes pakketpagina's houden die .50; die hebben hun eigen beelden.

   Hier stond .32 / .28 / .46, gekozen bij het staande portret van 11-09: de subregel
   hield op 390px toen 5,01 tegen een drempel van 4,5. Met de brede uitsnede van 05-10
   zakte datzelfde punt naar 4,51, want die foto toont meer van de zonnige linkerkant
   en van het lichte aanrechtblad. Dat haalt AA nog net en dat is geen marge: een
   hertint van de foto of een andere lettergrootte en hij valt eronder.

   Opnieuw gemeten, in twee rondes. Eerst .36, toen de foto nog onder de balk doorliep.
   Nadat hij eronder begon verschoof de uitsnede opnieuw en zakte de eyebrow op 390 naar
   4,39: daar kwam een lichter stuk aanrecht achter te staan. Dat is het patroon bij deze
   foto, want hij is veel lichter dan het staande portret dat hier eerst hing, en elke
   verschuiving van de uitsnede zet dus andere pixels achter de tekst.

   Op .44 / .38 / .54 haalt de eyebrow 4,97 op 390 en haalt ook de slechtste pixel het
   (4,61). Op .40 was dat 4,75 met een slechtste pixel van 4,40, dus nog onder de drempel.
   Hoger dan .44 is niet nodig en kost de foto zijn licht. */
.after-film.home .hero-overlay{
  background: linear-gradient(180deg, rgba(20,26,20,.44) 0%, rgba(20,26,20,.38) 38%, rgba(20,26,20,.54) 100%);
}
.after-film .hero-inner{
  position: relative; z-index: 2; max-width: 780px; padding: 132px var(--gutter) 104px; color: #fff;
  /* Uitdovende plaat achter het tekstblok. Zonder deze zakte de eyebrow naar
     2,34:1 tegen de witte verfstalen; met de plaat 5,88. */
  background: radial-gradient(ellipse 78% 62% at 50% 46%, rgba(20,26,20,.42) 0%, rgba(20,26,20,.26) 58%, rgba(20,26,20,0) 82%);
}
.after-film .hero-inner .eyebrow{ color: #fff; }
.after-film .hero-title{
  font-family: var(--font-serif); font-weight: 600;
  font-size: clamp(2.4rem, 6vw, 4.2rem); line-height: 1.08; letter-spacing: -.01em;
  text-wrap: balance; margin-bottom: 1.1rem; text-shadow: 0 2px 30px rgba(0,0,0,.35);
}
.after-film .hero-sub{
  font-size: clamp(1.05rem, 1.6vw, 1.3rem); color: rgba(255,255,255,.94);
  max-width: 46ch; margin: 0 auto 2rem; line-height: 1.6; text-shadow: 0 1px 18px rgba(0,0,0,.35);
}

/* Over-teaser: naast elkaar (foto links, tekst rechts), blok gecentreerd op --content-max.
   .over is zelf het grid én de sectie, dus de gutter telt bij de max-width op. */
.after-film.home .over{
  display: grid; grid-template-columns: 0.82fr 1fr; align-items: center;
  gap: clamp(2rem,5vw,4.5rem);
  max-width: calc(var(--content-max) + 2 * var(--gutter)); margin: 0 auto; text-align: left;
}
/* Staand kader (4:5): de foto van Selma is zelf staand, dus het vak volgt de foto
   in plaats van haar in een liggende strook bij te snijden. */
.after-film.home .over-media img{
  width: 100%; aspect-ratio: 4 / 5; max-height: 640px;
  object-fit: cover; object-position: center 28%; border-radius: 14px; display: block;
}
.after-film.home .over-text{ text-align: left; }
.after-film.home .over-text .display{ font-size: clamp(1.8rem,4vw,2.6rem); margin-bottom: 1.1rem; }
.after-film.home .over-text p{ color: var(--muted); margin-bottom: 1.1rem; }
.after-film.home .over-text .btn{ margin-top: .6rem; }

@media (max-width: 900px){
  .after-film.home .over{ grid-template-columns: 1fr; text-align: center; gap: 2rem; }
  .after-film.home .over-media{ order: -1; }
  .after-film.home .over-media img{ aspect-ratio: 4 / 5; max-height: 520px; }
  .after-film.home .over-text{ text-align: center; }
}

/* ---------- Cookiebanner (speels, interieur) ---------- */
.cookiebar{
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 90;
  padding: 16px clamp(1rem,4vw,2rem);
  background: var(--paper); border-top: 1px solid var(--line);
  box-shadow: 0 -10px 40px rgba(45,61,49,.10);
}
.cookiebar[hidden]{ display: none; }
.cookiebar-inner{ max-width: 1100px; margin: 0 auto; display: flex; align-items: center; gap: 16px 28px; flex-wrap: wrap; justify-content: space-between; }
.cookiebar-text{ min-width: 0; flex: 1 1 340px; }
.cookiebar-text strong{ display: block; font-family: var(--font-serif); font-weight: 600; font-size: 1.02rem; color: var(--green-dark); margin-bottom: 3px; }
.cookiebar-text p{ font-size: .92rem; color: var(--muted); line-height: 1.5; }
.cookiebar-actions{ display: flex; gap: 10px; flex: 0 0 auto; }
.cookiebar-btn{ font-family: var(--font-sans); font-size: .9rem; font-weight: 600; padding: 12px 22px; border-radius: 999px; cursor: pointer; border: 1px solid transparent; transition: background .2s, color .2s, border-color .2s; }
.cookiebar-ok{ background: var(--pink); color: var(--green-dark); }
.cookiebar-ok:hover{ background: var(--green-dark); color: var(--cream); }
.cookiebar-no{ background: transparent; color: var(--green-dark); border-color: var(--line); font-weight: 500; }
.cookiebar-no:hover{ border-color: var(--green-dark); }
@media (max-width: 560px){
  .cookiebar-actions{ width: 100%; }
  .cookiebar-btn{ flex: 1; }
}

/* Heropen-knopje voor de cookievoorkeuren (roze rondje, koekje met olijfblaadje) */
.cookie-hersteller{
  position: fixed; left: 18px; bottom: 18px; z-index: 85;
  width: 54px; height: 54px; border-radius: 50%;
  background: var(--pink); border: none;
  box-shadow: 0 10px 26px rgba(45,61,49,.22);
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer; padding: 0;
  transition: transform .2s var(--ease-expo), box-shadow .2s;
}
.cookie-hersteller[hidden]{ display: none; }
.cookie-hersteller:hover{ transform: translateY(-2px); box-shadow: 0 14px 32px rgba(45,61,49,.28); }
.cookie-hersteller:focus-visible{ outline: 2px solid var(--green-dark); outline-offset: 3px; }
.cookie-hersteller svg{ width: 32px; height: 32px; display: block; }
@media (max-width: 560px){ .cookie-hersteller{ left: 12px; bottom: 12px; width: 50px; height: 50px; } }

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior: auto; }
  .after-film .reveal{ opacity: 1; transform: none; transition: none; }
}

/* Het stappenblok met de foto ernaast. Stond van 05-10-2026 tot 24-10-2026 als proef
   op /voorbeelden/proef-stappen/ en is op de dag van de livegang de echte homepage
   geworden. De stijl is hierheen verhuisd omdat /voorbeelden/ achter de wachtwoordpoort
   zit: een stylesheet daarvandaan zou voor een gewone bezoeker de poort teruggeven in
   plaats van CSS, en dan staat het blok ongestyled op de voorpagina.

   WAAROM DE FOTO MEESCROLT. De stappenlijst is op 1440 gemeten 987px hoog en het
   fotokader bij "Hoi, ik ben Selma" eronder is 640px. Een gewoon staand kader naast
   die lijst laat dus ruim 350px gat vallen. Je kunt de foto uitrekken tot 1:2, maar
   dan snijd je hem tot een strook. Met sticky blijft hij in verhouding en in beeld
   zolang je langs de stappen leest.

   WAAROM DE STAPPEN NAAR LINKS GAAN. Ze stonden gecentreerd, met het nummer boven de
   tekst. In een smalle rechterkolom leest dat onrustig, en dat is precies wat Selma
   op 10-08 zelf schreef: "de tekst staat rechts, links en in het midden, dat wordt
   onrustig". Nummer naast de tekst scheelt bovendien hoogte, vijf keer. */

.after-film .werkwijze--naast{ max-width: none; }

.wn{
  /* Geen eigen padding en geen opgetelde gutter: de sectie levert die al. Met beide
     stond de inhoud op 320px op 48px van links en liep hij er 3px overheen. De echte
     .stappen doet het ook zo, alleen max-width en auto-marges. */
  max-width: var(--content-max);
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 0.82fr) minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  /* Bewust GEEN align-items:start. De linkerkolom moet net zo hoog worden als de
     stappenlijst, want een sticky element kan alleen plakken binnen zijn eigen
     containing block. Met align-items:start is die cel precies zo hoog als de foto en
     laat hij dus na een paar honderd pixels los. Gemeten op vijf scrollposities: dan
     stond de foto halverwege al op -135px, dus boven de balk uit. */
}

/* De sticky zit op de FIGURE en niet op de kolom. De kolom is de volle rijhoogte en
   vormt daarmee het gebied waarbinnen de figure mag plakken; zou de sticky op de kolom
   zelf zitten, dan is zijn containing block de rij en plakt er niets.
   De navbalk is `position: fixed`, dus zonder de afstand hieronder schuift de foto
   eronder zodra hij vastplakt. --nav-h wordt op de pagina gemeten; 112px is de gemeten
   maximumhoogte als fallback. */
.wn__kader{
  position: sticky;
  top: calc(var(--nav-h, 112px) + clamp(1rem, 3vh, 2rem));
}

.wn__kader{ margin: 0; }

.wn__kader img{
  width: 100%;
  aspect-ratio: 4 / 5;
  max-height: 640px;
  object-fit: cover;
  border-radius: 14px;
  display: block;
}

/* De kop verhuist mee naar de rechterkolom, zodat de hele kolom op één as begint en
   de foto bovenaan gelijk loopt met de eyebrow. */
.wn__tekst .section-head{ text-align: left; margin: 0 0 1.6rem; max-width: none; }
.wn__tekst .section-head .section-intro{ margin-left: 0; margin-right: 0; max-width: 54ch; }

.after-film .stappen--naast{ max-width: none; margin: 0; }
.after-film .stappen--naast .stap{
  flex-direction: row;
  align-items: flex-start;
  text-align: left;
  gap: 18px;
  padding: 22px 0;
}
.after-film .stappen--naast .stap-num{
  width: 38px; height: 38px;
  font-size: 1.05rem;
  margin-top: 2px;
}
.after-film .stappen--naast .stap-tekst{ margin: 0; max-width: none; }

/* Onder 900px vervalt de kolom. Dezelfde grens als de over-teaser eronder, zodat de
   pagina niet op twee verschillende breedtes omklapt. De foto gaat boven de tekst en
   wordt liggender, want een staand kader van 640px duwt op een telefoon de hele
   uitleg onder de vouw. De stappen blijven links uitgelijnd. */
@media (max-width: 900px){
  .wn{ grid-template-columns: 1fr; gap: 2rem; }
  .wn__kader{ position: static; }
  /* De uitsnede moet hier omhoog. Haar foto is staand (1197 bij 1800) en het kader
     wordt op een telefoon liggend, dus de browser snijdt er flink van boven en onder
     af. Op de standaard (midden) begon de band op 28% van de foto, terwijl haar kruin
     op 21% zit: haar hoofd werd er net afgesneden. Met 25% begint de band op 14% en
     staat ze er op 390, 560 en 768 helemaal op. Gemeten 24-10-2026.
     Verandert haar foto, dan moet dit getal mee. */
  .wn__kader img{ aspect-ratio: 3 / 2; max-height: 340px; object-position: center 25%; }
}