/* jantine.css: wat Jantines site anders doet dan de SSN-kopie. Het palet, haar handtekening, de lijn, de kleine footer.

   Het palet. Het anker is de kleur van haar lijnen en handtekening in de posts (room); de rest komt uit dezelfde
   herfstfoto's. Zes kleuren, verder alleen doorzichtige varianten. Dezelfde waarden staan in maak.py (PALET). */
:root {
  --j-room: #F7E7D9;     /* haar lijn en handtekening op een foto */
  --j-beige: #EBE3D8;    /* de pagina */
  --j-zand: #DED3C5;     /* vlakken op de pagina */
  --j-steen: #766B60;    /* rustige tekst */
  --j-schors: #2A2420;   /* tekst, footer */
  --j-roest: #9C5B38;    /* haar lijn op beige, de knop */
}

/* Haar handtekening: overal alleen de officiële svg uit 'animated' (vendor/jantine.js, logos). Tot die er staat is
   het vak leeg, zodat nergens het losse path verschijnt (Dévin, 29-10). */
.jantine-handtekening { display: block; aspect-ratio: 513 / 167; }
.jantine-handtekening.is-svg svg { display: block; width: 100%; height: auto; overflow: visible; fill: none; }
.over-ons-handtekening .jantine-handtekening,
.footer-signature-mount .jantine-handtekening { width: 100%; height: 100%; }

/* Geen balk, geen logo: haar handtekening midden boven in de pagina. Op de foto in room, zoals in haar posts. */
.jantine-kop {
  position: absolute; z-index: 6; left: 50%; top: 1.75em; translate: -50% 0;
  width: clamp(8.5em, 15vw, 13.5em); color: var(--j-schors); transition: opacity .9s ease;
}
.jantine-kop .jantine-handtekening { width: 100%; mask-position: center; -webkit-mask-position: center; }
.jantine-kop.is-hero { color: var(--j-room); }
/* desktop: ruim binnen het dunne kader van de hero, niet ertegenaan */
@media screen and (min-width: 768px) { .jantine-kop.is-hero { top: 4.25em; } }
/* op contact en privacy staat hij gewoon bovenaan in de stroom, midden, met ruimte eronder: niets schuift eronder */
.jantine-kop.is-pagina { position: relative; left: auto; top: auto; translate: none; display: block; margin: 2.5em auto 0; }
@media screen and (min-width: 768px) { .jantine-kop.is-pagina { margin-top: 3.5em; } }
/* SSN houdt hier ruimte vrij voor zijn balk; die is er niet, dus één vaste ruimte onder haar handtekening */
.jantine-kop.is-pagina ~ header :is(.contact-wrapper, .section-padding-256px) { padding-top: 3em; }
@media screen and (min-width: 768px) {
  .jantine-kop.is-pagina ~ header :is(.contact-wrapper, .section-padding-256px) { padding-top: 4.5em; }
}
/* de intro, zoals SSN: donker scherm, de handtekening licht en even breed als die van SSN (14.5em), in haar eigen
   verhouding (513 x 167) zodat hij niet klein in SSN's smallere vak valt */
/* SSN zet zijn logo en handtekening onder elkaar in het midden; hier staat alleen haar handtekening, dus ook in het
   midden van dat vak (anders schuift hij 2.75em naar links) */
.jantine-intro { color: var(--j-room); display: flex; justify-content: center; align-items: center; }
/* de preloader staat los in de body en vast over het hele scherm: waar je ook herlaadt, hij staat in beeld en in het
   midden (in de scrollende inhoud werkt 'fixed' niet, die wordt verschoven) */
body > .intro-signature { position: fixed; inset: 0; z-index: 60; width: auto; pointer-events: none; }
.jantine-intro .intro-signature-mount { width: 14.5em; aspect-ratio: 513 / 167; }
.jantine-intro svg { overflow: visible; }

/* De hero: haar foto op de plek van SSN's video, net zo gevuld en iets gedimd onder de tekst */
.video-container picture, .jantine-hero-foto { position: absolute; inset: 0; width: 100%; height: 100%; }
.jantine-hero-foto { object-fit: cover; object-position: 50% 45%; opacity: .9; }
.section_home-hero .video-container { background-color: var(--j-schors); }
.section_home-hero .video-overlay { background-color: #2A24204D; }

/* Licht beige: zoals SSN's Gids-pagina's (body[data-thema="licht"]) is de pagina beige. In het middenstuk ruilen donker
   en beige van plek; de hero, blokken met tekst op een foto en de footer houden de donkere stand. */
/* tijdens de intro is het scherm donker, zoals bij SSN; zodra de hero open is wordt de pagina beige (jantine.js) */
body[data-thema="licht"] { background-color: var(--j-beige); }
html:not(.jantine-zonder-intro) body[data-thema="licht"]:has(.jantine-intro):not(.jantine-open) { background-color: var(--j-schors); }
/* SSN blijft donker; hier wordt het beige, dus zacht: geen sprong rond de net geopende hero */
html:not(.jantine-zonder-intro) body[data-thema="licht"]:has(.jantine-intro) { transition: background-color 1.4s ease; }
/* na een breedtewissel is er geen intro: meteen beige, geen donkere flits (jantine.js, grenzen) */
body[data-thema="licht"] .main-wrapper {
  --_colors---swatch--black: var(--j-beige); --_colors---swatch--beige: var(--j-schors);
  --_colors---swatch--black-60: #EBE3D899; --ssn-surface: var(--j-zand);
  position: relative; color: var(--_colors---swatch--beige); --_colors---whatsapp: var(--_colors---swatch--beige);
}
body[data-thema="licht"] .main-wrapper > :is(footer, .section_home-hero, .section_trust),
body[data-thema="licht"] .main-wrapper > .pin-spacer > .section_trust {
  --_colors---swatch--black: var(--j-schors); --_colors---swatch--beige: var(--j-beige);
  --_colors---swatch--black-60: #2A242099; --ssn-surface: var(--j-beige);
  color: var(--_colors---swatch--beige); --_colors---whatsapp: var(--_colors---swatch--beige);
}

/* Blok 8 is een kopie van blok 5, gespiegeld: de video van haar kamer rechts */
@media screen and (min-width: 768px) {
  .jantine-spiegel .is-content-block > .over-ons-beeld { grid-column: 7 / 12; grid-row: 1; }
  .jantine-spiegel .is-content-block > .grid-col-item { grid-column: 2 / 6; grid-row: 1; align-self: center; }
}
@media screen and (max-width: 767px) {
  .jantine-spiegel .is-content-block > * { grid-column: 1 / -1; }
}

/* Blok 7, de grote zin: op de foto in room, met links een zachte schaduw onder de letters */
.section_stories-cta h2, .section_stories-cta h2 *, .section_stories-cta .stories-cta_title { color: var(--j-room); }
.section_stories-cta .image-parallax_image .video-cover::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(90deg, #2A242099 0%, #2A242040 40%, #2A242000 65%),
    linear-gradient(0deg, #2A242080 0%, #2A242000 35%);
}
/* SSN laat deze foto onderaan wegvloeien naar navy (fade-bottom-custom); op beige werd dat een vale vlek waar de
   onderste zin in verdween. Hier: een volle foto, strak afgesneden op de rand van het blok. */
.section_stories-cta .image-parallax.fade-bottom-custom { -webkit-mask-image: none; mask-image: none; }
.section_stories-cta { overflow: clip; }
/* de kleine zin direct onder de grote, links op het donkere deel van de foto (bij SSN staat hij rechts; daar zit nu
   haar witte blouse) */
.section_stories-cta .stories-cta_content { display: flex; flex-direction: column; justify-content: flex-end; gap: 1.5em;
  box-sizing: border-box; padding-bottom: 3em; }
.section_stories-cta .stories-paragraph { align-self: flex-start; margin: 0; }
/* het laatste blok ligt boven de footer, die eronder vandaan schuift (SSN's footer-onthulling). Het beige eronder is
   het papier van de lijn (vendor/jantine-lijn.js), zodat de lijn er zonder gat doorheen loopt. */
.main-wrapper > .jantine-spiegel { position: relative; z-index: 2; }
/* hier eindigt de lijn naast de knop: de tekst schuift niet mee met het scrollen (SSN's parallax), anders loopt het hartje weg */
.jantine-spiegel .text-group { transform: none !important; }
.jantine-kamer { width: 100%; height: 100%; object-fit: cover; display: block; }

.jantine-let-op { margin-top: 1.5em; }

/* De lijn uit haar posts (vendor/jantine-lijn.js), in roest. Hij ligt onder de blokken, op zijn eigen beige vlak (het
   papier): tekst ligt erop, foto's, video, kaarten, knoppen en de footer liggen eroverheen. Zo heeft hij geen gaten. */
.jantine-lijn { position: absolute; left: 0; top: 0; z-index: 1; pointer-events: none; overflow: visible; }
.jantine-lijn .papier { fill: var(--j-beige); }
.main-wrapper:has(> .jantine-lijn) > :is(section, .pin-spacer) { position: relative; z-index: 2; }
.jantine-lijn path { fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.jantine-lijn .is-beige { stroke: var(--j-roest); }
@media screen and (max-width: 767px) { .jantine-lijn path { stroke-width: 1.6; } }

/* De footer: SSN's eigen opbouw. Links haar handtekening in room, die zich schrijft zoals in de preloader; rechts
   SSN's kolom met kopjes boven elkaar (Stuur een berichtje, Volg mij, Mail). Onderaan zoals SSN: op desktop © links
   en de pagina's rechts, op de telefoon de pagina's space-between en © in het midden eronder. De huidige pagina heeft
   een lijntje eronder. Achter alles haar handtekening groot en licht. */
/* de grote handtekening ligt stil achter alles in de footer (Dévin, 29-10) */
footer.footer { overflow: hidden; }
footer .footer-wrapper, footer .footer-bottom_wrapper { position: relative; z-index: 1; }
footer .footer-top .grid-col-12 { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 2.5em 3em; }
footer .footer-col.is-left { display: block; width: auto; }
footer .footer-col.is-left .footer-signature { width: 14.5em; color: var(--j-room); }
footer .footer-col.is-left .footer-signature-mount { aspect-ratio: 513 / 167; }
footer .footer-col.is-left .footer-signature-mount svg { overflow: visible; }
footer .footer-col.is-fax { min-width: 14em; }
footer .footer-col.is-fax .button-icon_group { display: flex; gap: .5em; }
footer .footer-whatsapp { display: inline-flex; }
footer .text-link_group .text-size-regular { white-space: nowrap; }
footer .text-link_group a.text-link { opacity: .6; transition: opacity .3s ease; }
footer .text-link_group a.text-link:hover, footer .text-link_group a.text-link[aria-current="page"] { opacity: 1; }
footer .text-link_group a.text-link[aria-current="page"] .text-size-regular { text-decoration: underline; text-underline-offset: .45em; text-decoration-thickness: 1px; }
/* haar handtekening groot en licht helemaal onderaan, de onderkant net buiten beeld */
.jantine-voet-beeld {
  position: absolute; z-index: 0; left: 1.5em; bottom: 0; translate: 0 22%; width: calc(100% - 3em);
  color: var(--j-room); opacity: .06; pointer-events: none;
}
.jantine-voet-beeld .jantine-handtekening { width: 100%; mask-position: center; -webkit-mask-position: center; }
@media screen and (max-width: 767px) {
  footer .footer-top .grid-col-12 { flex-direction: column; gap: 2.5em; }
  footer .footer-col.is-left .footer-signature { width: 11em; }
  footer .footer-col.is-fax { display: flex; flex-direction: column; gap: 1.75em; }
  .jantine-voet-beeld { left: 1em; width: 150%; opacity: .08; }
}

/* Het appkaartje staat rechtsonder over de pagina. Bij de footer schuift het weg (vendor/jantine.js): daar staat
   WhatsApp al. */
.popup-comp { transition: opacity .35s ease, translate .45s cubic-bezier(.2, .7, .2, 1); }
/* GSAP zet zelf translate: none inline op het kaartje, vandaar !important */
body.jantine-voet-in-beeld .popup-comp { opacity: 0 !important; translate: 0 120% !important; pointer-events: none; }
/* dicht na een klik op het kruisje (vendor/jantine.js, kaartjeDicht) */
/* SSN's minknopje boven het kaartje: alleen het rondje, in bruin */
/* het minknopje in de randkleur van het kaartje zelf (Dévin, 30-10) */
.popup-comp .popup-toggle { color: var(--_colors---swatch--grey); }
body.jantine-kaartje-klein .popup-comp { translate: 0 100% !important; }
.popup-comp .popup-toggle_open { position: static; }
body.jantine-kaartje-klein .popup-comp > :not(.popup-toggle) { opacity: 0; pointer-events: none; transition: opacity .3s ease; }
.popup-comp .popup-toggle .hide { display: none; }

/* Stukken postlijn (maak.py, POSTSTUK). Op een foto in room, zoals in haar posts; op het beige in roest. Ze tekenen
   zich vanaf hun begin (data-van) als ze in beeld komen (vendor/jantine.js: .is-getekend). Niets vervaagt: elk eind is
   een echt eind uit haar post, of loopt de rand van zijn blok uit. Nooit over tekst: elk stuk ligt in een vrije band. */
.jantine-poststuk {
  position: absolute; z-index: 1; height: auto; pointer-events: none; overflow: visible; color: var(--j-room); fill: currentColor;
  transition: clip-path 2.4s cubic-bezier(.65, 0, .35, 1);
}
/* haar postlijnen zijn op deze maat dunner dan 1 px; een vaste rand van 1.5 px erom maakt elk stuk even dik als de
   grote lijn en het eindhartje (ongeveer 2 px), op elke maat (Dévin, 29-10: "dikker, consistenter") */
.jantine-poststuk path { stroke: currentColor; stroke-width: 1.5px; vector-effect: non-scaling-stroke; stroke-linejoin: round; }
.jantine-poststuk[data-van="links"] { clip-path: inset(0 100% 0 0); }
.jantine-poststuk[data-van="boven"] { clip-path: inset(0 0 100% 0); }
.jantine-poststuk[data-van="onder"] { clip-path: inset(100% 0 0 0); }
.jantine-poststuk.is-getekend { clip-path: inset(0 0 0 0); }
.jantine-poststuk:is(.is-ui, .is-intro, .is-contact) { color: var(--j-roest); }
.section_contact .contact-form_wrapper { position: relative; }
/* onder het formulier ruimte voor het stuk postlijn, vóór de balk met contact */
.section_contact .contact-form_wrapper { margin-bottom: 12em; }
@media screen and (max-width: 767px) { .section_contact .contact-form_wrapper { margin-bottom: 8em; } }
:is(.jantine-ui, .section_intro) > .section-padding-128px > .padding-global { position: relative; }
/* de boog van blok 2 loopt rechts het scherm uit, zoals in haar carrousel naar de volgende slide */
.section_intro:not(.jantine-ui) { position: relative; overflow-x: clip; }
.jantine-poststuk.is-trust { left: 5%; top: 6%; width: 5em; }
.jantine-poststuk.is-intro { right: 0; bottom: 1em; width: 22em; }
.section_intro:not(.jantine-ui) { padding-bottom: 18em; }
.jantine-poststuk.is-ui { right: 9%; bottom: -2em; width: 5.5em; }
.jantine-poststuk.is-zin { left: 7%; top: 7%; width: 6em; }
.jantine-poststuk.is-contact { left: -1em; top: 100%; margin-top: 2em; width: 70%; }
@media screen and (max-width: 767px) {
  .jantine-poststuk.is-trust { left: 5%; top: 4%; width: 3.5em; }
  .jantine-poststuk.is-intro { right: 0; bottom: .5em; width: 62%; }
  /* onder de tekst van blok 2 ruimte voor zijn stuk postlijn */
  .section_intro:not(.jantine-ui) > .section-padding-128px { padding-bottom: 13.5em; }
  .section_intro:not(.jantine-ui) { padding-bottom: 0; }
  .jantine-poststuk.is-ui { right: 4%; bottom: -3em; width: 4em; }
  .jantine-poststuk.is-zin { left: auto; right: 7%; top: 4%; width: 4.5em; }
  .jantine-poststuk.is-contact { left: -.5em; margin-top: 1.5em; width: 100%; }
}
@media (prefers-reduced-motion: reduce) { .jantine-poststuk { transition: none; } }
:root[data-ssn-motion="reduced"] .jantine-poststuk { transition: none; }

/* Het eindhartje: de vorm uit lijn_post_01, in roest, rechts naast de laatste knop, met zijn staartje omlaag.
   Het schrijft zich als het in beeld komt (vendor/jantine.js, hart). */
.jantine-eind { align-items: flex-start; gap: 1.75em; }
.jantine-hart { display: block; width: 6.5em; aspect-ratio: 146 / 172; margin-top: -1.25em; color: var(--j-roest); }
.jantine-hart svg { overflow: visible; }
@media screen and (max-width: 767px) { .jantine-hart { width: 5em; } }

/* Knoppen, één vaste indeling (zoals papa: één vlak, het pijlvakje in de tegenkleur). Op het beige schors met room,
   op een foto (de hero) room met schors. Roest zit niet in knoppen: die is voor de lijn. */
.main-wrapper .btn-animate-chars { --ssn-surface: var(--j-schors); color: var(--j-room); }
.main-wrapper .btn-animate-chars .btn-animate-chars__text { color: var(--j-room); }
.main-wrapper .btn-animate-chars .button-icon { background-color: var(--j-room); color: var(--j-schors); }
.main-wrapper .section_home-hero .btn-animate-chars { --ssn-surface: var(--j-room); color: var(--j-schors); }
.main-wrapper .section_home-hero .btn-animate-chars .btn-animate-chars__text { color: var(--j-schors); }
.main-wrapper .section_home-hero .btn-animate-chars .button-icon { background-color: var(--j-schors); color: var(--j-room); }

/* Het contactformulier: onder de knop één regel uitleg */
.jantine-form-uitleg { margin-top: 1em; }
.jantine-form-uitleg a { color: inherit; text-decoration: underline; text-underline-offset: .2em; }

/* Op de telefoon blijft het appkaartje klein: haar foto en de WhatsApp-knop. SSN's uitklaptekst werd daar een brede
   balk over de onderste regels van elk blok. */
@media screen and (max-width: 767px) {
  .popup-comp .popup-text { display: none !important; }
  .popup-comp { width: auto !important; }
}
/* in de hero staat de knop dan boven het kaartje, niet ernaast eronder */
@media screen and (max-width: 767px) { .section_home-hero .hh_content { padding-bottom: 7.5em; } }
/* op de telefoon ruimte onder de laatste knop, zodat het eindhartje met zijn staartje vrij van de footer blijft */
@media screen and (max-width: 767px) { .main-wrapper > .jantine-spiegel { padding-bottom: 3em; } }

/* Blok 4, de ui: een kopie van blok 2 (zelfde raster als SSN's section_intro, zonder zijn id's), met haar kernzin groot
   eronder, die oplicht als je scrollt (SSN's about-hero_text). Geen kaarten meer. */
.jantine-ui .is-content-block > h2 { grid-area: 1 / 2 / 2 / 7; }
.jantine-ui .is-content-block > p { grid-area: 1 / 8 / 2 / 12; align-self: end; }
.jantine-ui .is-content-block > .about-hero_text { grid-area: 2 / 2 / 3 / 12; width: auto; margin: 2.5em 0 0; padding: 0;
  border: 0; font-size: 1em; }
.jantine-ui .about-hero_text .heading-style-64px { max-width: 9.5em; }
.jantine-ui .about-hero_text .heading-style-64px { font-size: 4em; line-height: 1.1; }
@media screen and (max-width: 991px) {
  .jantine-ui .is-content-block > h2 { grid-area: 1 / 1 / 2 / 7; }
  .jantine-ui .is-content-block > .about-hero_text { grid-area: 2 / 1 / 3 / 7; }
  .jantine-ui .about-hero_text .heading-style-64px { font-size: 2.75em; }
}
@media screen and (max-width: 767px) {
  .jantine-ui .is-content-block > h2 { grid-area: 1 / 1 / 2 / 12; }
  .jantine-ui .is-content-block > p { grid-area: 2 / 1 / 3 / 13; }
  .jantine-ui .is-content-block > .about-hero_text { grid-area: 3 / 1 / 4 / 13; margin-top: 1.5em; }
  .jantine-ui .about-hero_text .heading-style-64px { font-size: 2.25em; }
}

/* Contact: SSN zet het formulier midden in een scherm-hoog vak (onder zijn balk). Zonder balk staat het gewoon
   bovenaan, met dezelfde ruimte onder haar handtekening als op privacy. Het fill van de svg's (handtekening in de
   footer, eindhartje) volgt de tekstkleur, zodat er nergens zwart in de pagina zit. */
.jantine-kop.is-pagina ~ header .contact-wrapper { align-items: flex-start; min-height: 0; }
footer .footer-signature-mount svg, .jantine-hart svg { fill: currentColor; }

/* Blok 6, de stappen. Desktop: SSN's stapelkaarten (vast, kantelen, vervagen; Dévin, 29-10: "voor desktop wel de
   scroll animatie kaarten"). Daar liggen de kaarten over de lijn, net als foto's. Telefoon en tablet: geen kaarten,
   drie rijen op het papier, foto boven, nummer in roest, kop en tekst eronder; het stapelscript start daar niet
   (maak.py). */
@media screen and (max-width: 991px) {
  .section_stacking-cards .slide,
  .section_stacking-cards .slide.is-last { height: auto; padding-bottom: 6em; }
  .section_stacking-cards .slide.is-last { padding-bottom: 0; }
  .section_stacking-cards .content-wrapper, .section_stacking-cards .content { width: 100%; }
  .section_stacking-cards .stacking-card { background-color: transparent; border: 0; border-radius: 0; padding: 0; height: auto; gap: 2em; }
  .section_stacking-cards .stacking-card_info-wrap { justify-content: flex-start; gap: 2.5em; padding-top: 2em; }
  .section_stacking-cards .stacking-card_video { width: auto; height: auto; aspect-ratio: 1; border-radius: var(--_layout---border-radius--4px); overflow: hidden; }
}
@media screen and (max-width: 767px) {
  .section_stacking-cards .slide { padding-bottom: 4em; }
  .section_stacking-cards .stacking-card { gap: 0; }
  .section_stacking-cards .stacking-card_info-wrap { gap: 1em; padding: 1.5em 0 0; }
  /* bij SSN staat het nummer op de foto; hier eronder, in roest, boven de kop */
  .section_stacking-cards .card-number { position: relative; inset: auto; color: var(--ssn-accent); font-size: 2.75em; }
  /* op de telefoon een liggende foto: de drie stappen lezen als een rustig rijtje in plaats van drie schermen foto */
  .section_stacking-cards .stacking-card_video { aspect-ratio: 4 / 3; }
}

/* 'Ik ben precies goed' op de telefoon (Dévin, 29-10): zij zit rechts in de foto, dus het beeld schuift naar rechts
   zodat haar gezicht erin staat, en het vak heeft onder ook ronde hoeken */
@media screen and (max-width: 767px) {
  .section_stories-cta .stories-cta { border-radius: var(--_layout---border-radius--8px); }
  .section_stories-cta .image-parallax img { object-position: 84% 50%; }
}

/* privacy: kopje en tekst, geen nummers */
.rich-text-regular .jantine-lid { margin: 0 0 1em; }

/* het logo op de sessiefoto: het vak groeit mee met de echte handtekening, zodat de J niet onder de foto wegvalt */
.over-ons-handtekening { height: auto; }
.over-ons-handtekening .jantine-handtekening.is-svg { height: auto; }
body.jantine-kaartje-klein .popup-comp { outline-color: transparent !important; }

/* telefoon: de hero-knop staat naast het appkaartje op dezelfde onderlijn; iets kleiner zodat er lucht tussen zit */
@media screen and (max-width: 767px) {
  .section_home-hero .btn-animate-chars { font-size: .88em; }
}

/* het logo op de sessiefoto: klein en rustig linksonder in de hoek, niet dwars over de foto (Dévin, 30-10) */
.over-ons-handtekening { width: 34%; left: 1.75em; right: auto; bottom: 1.5em; }
@media screen and (max-width: 767px) { .over-ons-handtekening { width: 46%; left: 1em; bottom: 1em; } }