/* Ihsan Zorgdiensten — stylesheet
   Committed light design. Every colour is painted explicitly so the page holds
   on any host background. Contrast floors: 4.5:1 body, 3:1 large text and UI. */

:root{
  /* `!important` is hier geen luiheid maar noodzaak. De artifact-runtime zet bij
     donkere modus een INLINE stijl op het html-element:

         t.dataset.theme = "dark";  t.style.colorScheme = "dark";

     Een inline stijl wint van een gewone regel uit een stylesheet, dus zonder
     `!important` staat deze pagina daarna op `color-scheme: dark`. Dat is het
     signaal waarop browsers met automatische donkerweergave (Chrome auto-dark,
     en extensies als Dark Reader) besluiten of ze de kleuren van een pagina
     mogen omklappen. Deed dat, met als resultaat een donkerbruine zorgsite met
     bleekroze tekst. Een auteursregel met `!important` wint wél van een inline
     stijl zonder `!important`, dus zo blijft het licht.

     Deze site heeft bewust één lichte weergave. Haal dit niet weg. */
  color-scheme: light !important;

  /* grounds */
  --cream:#FBF6F3;
  --shell:#F7EDEA;   /* only used translucent now, see .band-shell */
  --paper:#FFFDFC;
  --line:#EFDFDC;
  --line-strong:#E4CDCA;

  /* decorative fills — the literal brand colours, never used for text */
  --blush:#F2C6CC;
  --blush-pale:#FAE6E8;
  --rose:#C06E7C;
  --sage:#93A281;
  --sage-pale:#E4E9DC;

  /* text and UI — deeper tints of the same hues, contrast-checked */
  --rose-ink:#A9505F;    /* button fill, white on it = 5.25:1 */
  --rose-deep:#9A4C5A;   /* links on cream = 5.54:1 */
  --head:#7A4550;        /* headings on cream = 7.05:1 */
  --ink:#5A3F46;         /* body on cream = 8.82:1 */
  --ink-soft:#6B5158;    /* secundaire tekst. Was #7A5D64 (5,51:1 op crème), verdiept toen de
                            achtergrond een bewegende stapel werd: op de diepste roze plek die
                            de bloemen maken haalde de oude tint 4,11:1. Nu 4,99:1 daar,
                            6,65:1 op crème, 7,04:1 op een kaart. */
  --sage-ink:#59673F;    /* eyebrows on cream 5.75:1, tag on sage chip 4.94:1 */

  --shadow-sm:0 2px 8px rgba(122,69,80,.06);
  --shadow-md:0 10px 30px rgba(122,69,80,.09);
  --shadow-lg:0 22px 60px rgba(122,69,80,.13);

  /* petal radius, lifted from the tulip in the logo */
  --petal:38px 10px 38px 10px;
  --petal-flip:10px 38px 10px 38px;

  /* dekking van de sluier over de videoband in de hero, zie .hero-scrim */
  --hero-sluier:.84;

  /* Hoogte van de koptekst. De hero trekt dit eraf om precies één scherm te
     vullen, dus deze variabele MOET de echte hoogte van de balk zijn. Daarom
     gebruikt de balk hem ook zelf, en niet een eigen getal: anders lopen ze uit
     elkaar zodra iemand het logo aanpast en blijft er onderaan de hero een
     strook van de volgende sectie in beeld. */
  --kop-hoogte:5.6rem;

  --measure:62ch;
  --gutter:clamp(20px,5vw,40px);
}

/* ---------------------------------------------------------------- letters
   De twee lettertypen worden ZELF gehost, bewust niet bij Google opgehaald.

   Google Fonts stuurt het IP-adres van elke bezoeker naar Google. De voettekst
   van deze site zegt "plaatst geen cookies en verzamelt geen gegevens", en met
   een externe lettertype-aanroep is dat niet waar. Een Duitse rechter heeft
   daar in 2022 ook een boete voor opgelegd. Zelf hosten maakt de zin waar,
   scheelt een externe verbinding, en laat de CSP dicht op `'self'` staan.

   Beide families staan onder de SIL Open Font License 1.1, die zelf hosten
   uitdrukkelijk toestaat. De licentie staat in FONTS-LICENSE.txt, in
   dezelfde map als deze stylesheet.

   Het zijn variabele lettertypen: één bestand dekt alle gewichten, en de
   koppen gebruiken de assen SOFT en WONK van Fraunces. Vervang ze niet door
   statische instanties, dan verdwijnt dat.

   De unicode-ranges komen letterlijk uit de bron van Google, zodat een
   accent of een Turkse ı nog steeds uit het juiste bestand komt. */
@font-face{
  font-family:'Fraunces';
  font-style:normal;
  font-weight:400 700;
  font-display:swap;
  src:url('fraunces-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face{
  font-family:'Fraunces';
  font-style:normal;
  font-weight:400 700;
  font-display:swap;
  src:url('fraunces-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face{
  font-family:'Figtree';
  font-style:normal;
  font-weight:400 700;
  font-display:swap;
  src:url('figtree-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face{
  font-family:'Figtree';
  font-style:normal;
  font-weight:400 700;
  font-display:swap;
  src:url('figtree-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

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

/* ---------------------------------------------------------------- achtergrond
   De achtergrond is een stapel, geen kleur. Van onder naar boven: de wash uit
   de mockup, drie traag drijvende kleurvelden, drie overmaatse hibiscusbloemen,
   twee sierranken, een lichtveeg die langzaam overtrekt, en een korrel.

   Het geheel zit vast aan het scherm (`position:fixed`) op z-index -2, dus het
   staat achter elke kaart en achter elk woord, en het blijft in beeld terwijl je
   scrollt. Dat is waarom er beweging is zonder dat er ooit iets voor tekst
   langs komt.

   Elke animatie verplaatst alleen `transform` of `opacity`. Geen enkele frame
   kost een herberekening van de opmaak, dus de hele stapel draait op de
   grafische kaart. Geen `filter:blur()`: die is duur op grote vlakken, en een
   radiaal verloop met een zachte alfa geeft dezelfde wolk voor niets.

   CONTRAST BEPAALT ELKE ALFA HIER. Het lezerspubliek is oud en de norm is
   4,5:1. De waarden hieronder zijn gemeten op de kleuren zoals ze werkelijk
   getekend worden, met alle lagen over elkaar gerekend. Verhoog geen alfa
   zonder opnieuw te meten. */
.amb-defs{position:absolute;width:0;height:0;overflow:hidden}

.ambient{
  position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden;
  isolation:isolate;      /* houdt de overvloeimodussen hieronder van de pagina af */
  contain:layout paint;
}
.ambient > *{position:absolute}

/* De inhoud staat EXPLICIET boven de achtergrondstapel, en de stapel staat op
   een POSITIEVE z-index.

   Dit stond eerst op `z-index:-2`. Dat werkt in een gewone pagina, omdat de
   achtergrond van `body` naar het canvas doorschuift en een laag met een
   negatieve z-index daar dus nog vóór valt. Maar zodra de pagina in een
   omgeving hangt die zijn eigen dekkende body-element meelevert (de Artifact-build
   uit `build_single.py`, en elk CMS dat de body-inhoud overneemt), valt de hele
   stapel achter die dekkende laag en zie je een vlakke pagina zonder bloemen,
   zonder ranken en zonder beweging. Dat is precies wat er gebeurde.

   Positief stapelen werkt in beide gevallen. Haal deze regel niet weg. */
main,footer{position:relative;z-index:2}

/* ------------------------------------------------------------- videoband
   De video staat ALLEEN in de hero, van rand tot rand. Hij stond eerst achter
   de hele pagina, en dan leest het niet meer als een website maar als een poster
   met kaartjes erop: de video wordt het hoofdonderwerp, de inhoud wordt losse
   eilandjes, en op een breed scherm staat een derde van het beeld leeg. Een band
   bovenaan doet wat een hero hoort te doen, en daaronder blijft het een pagina.

   De sluier is bijna vlak, en dat is een correctie. Hij dunde eerst naar rechts
   uit tot 0,38 zodat de video daar sterker doorkwam. Gemeten was de linkerkant
   dan rgb(238,224,224), praktisch gelijk aan de pagina eronder, maar de
   rechterhelft rgb(223,196,197): duidelijk donkerder. Dat las als een donkere
   band onder een lichte site, en dat is precies wat het niet moet zijn.

   Nu loopt hij van 0,84 naar 0,79 over de volle breedte. De video is nog steeds
   te zien en te volgen, maar de band is even licht als de rest van de pagina.
   Wil je de video voller, verlaag `--hero-sluier`; onder ongeveer 0,70 wordt de
   band zichtbaar donkerder dan de pagina en gaat het er weer uitzien als twee
   verschillende sites. Meet daarna met `controle/contrast.py`. */
.hero-media{position:absolute;inset:0;z-index:0;overflow:hidden;pointer-events:none}
.hero-video{width:100%;height:100%;object-fit:cover;display:block}
.hero-scrim{
  position:absolute;inset:0;
  background:
    linear-gradient(90deg,
      rgba(253,250,249,var(--hero-sluier)) 0%,
      rgba(253,250,249,var(--hero-sluier)) 55%,
      rgba(253,250,249,calc(var(--hero-sluier) * .94)) 100%),
    linear-gradient(180deg, rgba(253,250,249,.30) 0%, rgba(253,250,249,0) 22%);
}
/* de roze gloed uit het oude ontwerp is over video alleen modder */
html.video-speelt .hero::before{display:none}

/* De hero vult het scherm, kop en al.

   Dit stond eerst op `min(76vh,700px)`. Die 700 was de fout: op een breed scherm
   heeft de kop minder regels nodig, dus krimpt de hero tot die ondergrens, en
   dan bleef er onderaan een strook over waar de volgende sectie al doorheen
   kwam. Op een scherm van 2670 bij 1335 was dat ruim 500 pixels. Dat leest als
   een pagina die te vroeg ophoudt.

   `100svh` is de kleine viewporthoogte: op een telefoon rekent die met de
   browserbalk zichtbaar, zodat de hero niet half onder de adresbalk verdwijnt.
   De regel met `100vh` erboven is de terugval voor browsers die `svh` niet
   kennen. De koptekst wordt eraf getrokken zodat kop plus hero samen precies
   één scherm zijn.

   Het is `min-height`, geen `height`: past de inhoud er niet in, dan groeit de
   band mee in plaats van tekst af te snijden. */
@media (min-width:821px){
  .hero{
    min-height:calc(100vh - var(--kop-hoogte));
    min-height:calc(100svh - var(--kop-hoogte));
    display:flex;align-items:center;
  }
  html.video-speelt .hero .wrap{width:min(1360px,100%)}
}

/* de wash: het verloop uit de mockup, met twee warme velden erin gelegd zodat
   de pagina belicht leest in plaats van gevuld */
.amb-wash{
  inset:0;
  background:
    radial-gradient(120% 82% at 80% 4%,  rgba(242,198,204,.36) 0%, rgba(242,198,204,0) 58%),
    radial-gradient(96% 74% at 6% 94%,   rgba(228,233,220,.44) 0%, rgba(228,233,220,0) 62%),
    linear-gradient(180deg,#FBF6F3 0%,#FAF0EE 26%,#FBF6F3 52%,#F7F3EC 74%,#FAF0EC 100%);
}

/* de drijvende kleurvelden. Dit is de beweging die je het eerst voelt en het
   laatst aanwijst: traag genoeg om nooit de aandacht te pakken. */
.amb-glow{border-radius:50%;will-change:transform;
  animation:amb-drift ease-in-out infinite alternate}
.g1{width:min(74rem,116vw);aspect-ratio:1;top:-30vh;right:-20vw;
  background:radial-gradient(circle,rgba(214,138,152,.21) 0%,rgba(214,138,152,0) 66%);
  animation-duration:34s}
.g2{width:min(66rem,104vw);aspect-ratio:1;bottom:-32vh;left:-24vw;
  background:radial-gradient(circle,rgba(147,162,129,.17) 0%,rgba(147,162,129,0) 68%);
  animation-duration:47s;animation-delay:-13s}
.g3{width:min(52rem,90vw);aspect-ratio:1;top:24vh;left:32vw;
  background:radial-gradient(circle,rgba(242,198,204,.25) 0%,rgba(242,198,204,0) 70%);
  animation-duration:41s;animation-delay:-23s}
@keyframes amb-drift{
  from{transform:translate3d(-2vw,2vh,0) scale(1)}
  to{transform:translate3d(6vw,-5vh,0) scale(1.22)}
}

/* de bloemen. Bewust GEEN `mix-blend-mode:multiply`, hoe verleidelijk dat ook
   is voor een achtergrond: multiply verdonkert alleen, dus wit wordt een
   nul-bewerking en elke nerf verdwijnt. Wat overblijft is een silhouet, en een
   silhouet van een hibiscus leest als een vlek. Met gewone dekking blijven de
   nerven en de rand staan, en dat is precies wat de vorm herkenbaar maakt. */
.amb-bloom{height:auto;color:var(--rose);will-change:transform;
  animation:amb-breathe ease-in-out infinite alternate}
.b1{width:min(27rem,42vw);top:-8vh;right:-4vw;opacity:.20;animation-duration:27s}
.b2{width:min(22rem,36vw);top:46vh;left:-6vw;opacity:.15;animation-duration:33s;animation-delay:-9s}
.b3{width:min(18rem,30vw);bottom:-6vh;right:13vw;opacity:.12;animation-duration:39s;animation-delay:-19s}
.b4{width:min(14rem,24vw);top:13vh;left:28vw;opacity:.09;animation-duration:44s;animation-delay:-31s}
@keyframes amb-breathe{
  from{transform:rotate(-6deg) scale(1)}
  to{transform:rotate(7deg) scale(1.13)}
}

/* de sierranken uit de referentie. Zij dragen het handgetekende, en zonder
   hen leest de rest als een kleurverloop met bloemen erin. */
.amb-vine{height:auto;color:#E3A2AE;opacity:.30;will-change:transform;
  animation:amb-float ease-in-out infinite alternate}
.v1{width:min(58rem,96vw);top:1vh;left:-17vw;animation-duration:45s}
.v2{width:min(46rem,84vw);bottom:2vh;right:-13vw;animation-duration:53s;animation-delay:-21s}
.v2 use{transform:scaleX(-1) translateX(-600px)}   /* gespiegeld, zodat het geen herhaling lijkt */
@keyframes amb-float{
  from{transform:translate3d(-4vw,2vh,0) rotate(-1.5deg)}
  to{transform:translate3d(5vw,-3vh,0) rotate(1.5deg)}
}

/* de lichtveeg. Eén schuine baan die er ruim een halve minuut over doet om
   over te trekken, precies zoals de gloed in de referentie. */
.amb-sheen{
  top:-60vh;left:-46vw;width:64vw;height:220vh;
  background:linear-gradient(90deg,rgba(255,255,255,0) 0%,rgba(255,255,255,.58) 47%,rgba(255,255,255,0) 100%);
  will-change:transform,opacity;
  animation:amb-sweep 27s ease-in-out infinite alternate;
}
@keyframes amb-sweep{
  from{transform:rotate(16deg) translate3d(0,0,0);opacity:.32}
  to{transform:rotate(16deg) translate3d(86vw,0,0);opacity:.66}
}

/* de korrel. Vijf procent, en toch het verschil tussen een scherm en papier:
   zonder korrel bandeert een groot zacht verloop zichtbaar op goedkope panelen. */
.amb-grain{
  inset:0;opacity:.05;
  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='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size:200px 200px;
}

/* Een smal scherm krijgt de helft van de stapel. Dezelfde lagen op een telefoon
   zijn geen sfeer meer maar drukte, en het is ook het toestel met de zwakste
   grafische kaart en de batterij die eraan hangt. */
@media (max-width:720px){
  .g3,.b3,.b4,.v2{display:none}
  .b1{width:80vw;top:-5vh;right:-26vw;opacity:.12}
  .b2{width:70vw;opacity:.10}
  .v1{width:130vw;left:-16vw}
  .amb-sheen{width:90vw}
}

html{
  font-size:19px;   /* deliberately large: this page is read by people who struggle with small type */
  scroll-behavior:smooth;
  scroll-padding-top:5.5rem;
  -webkit-text-size-adjust:100%;
}

body{
  background:var(--cream);
  position:relative;
  color:var(--ink);
  font-family:'Figtree',ui-sans-serif,-apple-system,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  font-size:1rem;
  line-height:1.7;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}

h1,h2,h3{
  font-family:'Fraunces',Georgia,'Times New Roman',serif;
  font-variation-settings:'SOFT' 40,'WONK' 1;
  color:var(--head);
  line-height:1.12;
  letter-spacing:-.012em;
  text-wrap:balance;
  font-weight:500;
}
h1{font-size:clamp(2.15rem,1.35rem + 2.7vw,3.35rem)}
h2{font-size:clamp(1.75rem,1.25rem + 2.1vw,2.7rem)}
h3{font-size:1.24rem;font-weight:600;letter-spacing:-.005em}
p{text-wrap:pretty}

a{color:var(--rose-deep);text-underline-offset:3px;text-decoration-thickness:1.5px}
a:hover{color:var(--head)}
img{display:block;max-width:100%;height:auto}
:where(a,button,summary,[tabindex]):focus-visible{
  outline:3px solid var(--rose-ink);outline-offset:3px;border-radius:6px;
}

/* Breder op grote schermen. Op 1120px bleef er op een breed scherm links en
   rechts een derde leeg staan. De regellengte van lopende tekst blijft wel kort
   (`--measure` op de sectiekoppen, eigen max-width op de alinea's), want brede
   tekstregels lezen slechter. */
.wrap{width:min(1360px,100%);margin-inline:auto;padding-inline:var(--gutter)}
.narrow{width:min(760px,100%);margin-inline:auto;padding-inline:var(--gutter)}
.skip{
  position:absolute;left:-9999px;top:0;z-index:100;
  background:var(--rose-ink);color:#fff;padding:.7rem 1.2rem;border-radius:0 0 10px 0;
  font-weight:600;text-decoration:none;
}
.skip:focus{left:0}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}

/* ---------------------------------------------------------------- header */
.site-header{
  position:sticky;top:0;z-index:50;
  background:rgba(251,246,243,.93);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid transparent;
  transition:border-color .25s ease, box-shadow .25s ease;
}
.site-header.is-stuck{border-bottom-color:var(--line);box-shadow:0 2px 20px rgba(122,69,80,.05)}
.site-header .wrap{display:flex;align-items:center;gap:1.1rem;min-height:var(--kop-hoogte);flex-wrap:wrap}

.brand{display:flex;align-items:center;gap:.75rem;text-decoration:none;color:var(--head);
  flex:0 1 auto;min-width:0}
.brand img{width:3.5rem;height:3.5rem;border-radius:50%}
.brand span{
  font-family:'Fraunces',Georgia,serif;font-variation-settings:'SOFT' 40,'WONK' 1;
  font-weight:600;font-size:1.42rem;line-height:1.12;letter-spacing:-.012em;
  min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.brand small{display:block;font-family:'Figtree',sans-serif;font-weight:500;
  font-size:.74rem;letter-spacing:.11em;text-transform:uppercase;color:var(--sage-ink)}

.site-nav{margin-left:auto;display:flex;gap:1.5rem;align-items:center;flex:0 1 auto}
.site-nav a{
  text-decoration:none;color:var(--ink-soft);font-weight:600;font-size:.86rem;
  padding:.3rem 0;border-bottom:2px solid transparent;transition:color .18s,border-color .18s;
}
.site-nav a:hover{color:var(--head);border-bottom-color:var(--blush)}

.header-tools{display:flex;align-items:center;gap:.7rem;flex:0 0 auto}

.menu-toggle{display:none;border:1px solid var(--line);background:var(--paper);
  border-radius:12px;padding:.5rem .6rem;cursor:pointer;color:var(--head)}

/* ---------------------------------------------------------------- buttons */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.55rem;
  font-family:inherit;font-weight:700;font-size:1rem;line-height:1.2;
  padding:.95rem 1.6rem;border-radius:999px;border:2px solid transparent;
  text-decoration:none;cursor:pointer;text-align:center;
  min-width:0;max-width:100%;overflow-wrap:anywhere;
  transition:transform .16s ease,box-shadow .16s ease,background .16s ease,border-color .16s ease;
}
.btn svg{flex:0 0 auto}
.btn-primary{background:var(--rose-ink);color:#fff;box-shadow:0 8px 22px rgba(169,80,95,.28)}
.btn-primary:hover{background:var(--head);color:#fff;transform:translateY(-2px);box-shadow:0 14px 30px rgba(169,80,95,.34)}
.btn-ghost{background:var(--paper);color:var(--rose-deep);border-color:var(--line-strong)}
.btn-ghost:hover{border-color:var(--rose-ink);color:var(--head);transform:translateY(-2px)}
.btn-lg{font-size:1.05rem;padding:1rem 1.55rem}
.btn-sm{font-size:.85rem;padding:.6rem 1.05rem}

/* ---------------------------------------------------------------- hero
   Both reference sites mask a photograph beside the copy. Same idea, but the
   mask is the petal shape taken from the tulip in the logo, and the photograph
   is left legible instead of washed out behind text. */
.hero{position:relative;isolation:isolate;overflow:hidden}
.hero::before{
  content:"";position:absolute;z-index:-1;pointer-events:none;
  width:min(58rem,92vw);aspect-ratio:1;right:-16rem;top:-22rem;border-radius:50%;
  background:radial-gradient(circle,rgba(242,198,204,.42) 0%,rgba(242,198,204,0) 68%);
}
.hero .wrap{position:relative;z-index:1;padding-block:clamp(2rem,3.5vw,3rem) clamp(2.8rem,6vw,4.6rem)}
.hero-grid{
  display:grid;grid-template-columns:minmax(0,1.12fr) minmax(0,.88fr);
  gap:clamp(2rem,5vw,4rem);align-items:center;
}
.hero-copy{grid-column:1;min-width:0}
.hero-copy .lead{max-width:36ch}
.hero h1{margin-bottom:1rem}
.hero .lead{font-size:1.14rem;color:var(--ink);margin-bottom:1.9rem}
.hero-cta{display:flex;flex-wrap:wrap;gap:.8rem}

.hero-figure{grid-column:2;position:relative;margin:0;justify-self:center;width:100%;max-width:26rem}
.hero-figure img{
  width:100%;aspect-ratio:4/5;object-fit:cover;object-position:52% 46%;
  border-radius:clamp(48px,9vw,120px) 18px clamp(48px,9vw,120px) 18px;
  box-shadow:var(--shadow-lg);
}
.hero-figure::after{
  content:"";position:absolute;inset:auto -1.1rem -1.1rem auto;width:62%;height:62%;
  border-radius:0 18px clamp(48px,9vw,120px) 0;border:2px solid var(--blush);
  z-index:-1;
}
.hero-sprig{position:absolute;left:-2.4rem;bottom:-1.2rem;width:5.2rem;
  filter:drop-shadow(0 6px 14px rgba(122,69,80,.13))}


.eyebrow{
  display:inline-flex;align-items:center;gap:.5rem;
  font-size:.72rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:var(--sage-ink);margin-bottom:1.1rem;
}
.eyebrow::before{content:"";width:1.9rem;height:2px;background:var(--sage);border-radius:2px}

/* ---------------------------------------------------------------- petals
   A page-wide layer, not a hero decoration: fixed to the viewport at z-index -1
   so the petals sit behind every card and above the background wash, and keep
   falling the whole way down the page. Content stays fully readable because
   nothing ever passes in front of it.
   Fall and sway are two nested transforms, so neither costs a layout pass. */
.petals{position:fixed;inset:0;overflow:hidden;pointer-events:none;z-index:1}
.petal{position:absolute;top:-3rem;color:var(--blush);will-change:transform;
  filter:drop-shadow(0 1px 2px rgba(169,80,95,.12));
  animation:petal-fall linear infinite}
.petal svg{display:block;animation:petal-sway ease-in-out infinite}
@keyframes petal-fall{
  from{transform:translate3d(0,-10vh,0) rotate(0deg)}
  to{transform:translate3d(0,110vh,0) rotate(220deg)}
}
@keyframes petal-sway{
  0%,100%{transform:translateX(-10px)}
  50%{transform:translateX(10px)}
}
.pt1{left:6%;opacity:.62;animation-duration:24s;animation-delay:-2s}
.pt1 svg{width:26px;height:26px;animation-duration:7s}
.pt2{left:15%;opacity:.46;animation-duration:31s;animation-delay:-17s}
.pt2 svg{width:17px;height:17px;animation-duration:9s;animation-delay:-1s}
.pt3{left:24%;opacity:.55;animation-duration:27s;animation-delay:-9s}
.pt3 svg{width:22px;height:22px;animation-duration:8s;animation-delay:-3s}
.pt4{left:33%;opacity:.40;animation-duration:36s;animation-delay:-24s}
.pt4 svg{width:15px;height:15px;animation-duration:10s;animation-delay:-5s}
.pt5{left:42%;opacity:.58;animation-duration:22s;animation-delay:-13s}
.pt5 svg{width:24px;height:24px;animation-duration:7.5s;animation-delay:-2s}
.pt6{left:51%;opacity:.44;animation-duration:33s;animation-delay:-5s}
.pt6 svg{width:18px;height:18px;animation-duration:9.5s;animation-delay:-6s}
.pt7{left:60%;opacity:.52;animation-duration:29s;animation-delay:-21s}
.pt7 svg{width:21px;height:21px;animation-duration:8.5s;animation-delay:-4s}
.pt8{left:69%;opacity:.38;animation-duration:39s;animation-delay:-11s}
.pt8 svg{width:14px;height:14px;animation-duration:11s;animation-delay:-7s}
.pt9{left:78%;opacity:.60;animation-duration:26s;animation-delay:-30s}
.pt9 svg{width:25px;height:25px;animation-duration:7s;animation-delay:-1.5s}
.pt10{left:87%;opacity:.42;animation-duration:35s;animation-delay:-7s}
.pt10 svg{width:16px;height:16px;animation-duration:10.5s;animation-delay:-8s}
.pt11{left:94%;opacity:.50;animation-duration:30s;animation-delay:-26s}
.pt11 svg{width:20px;height:20px;animation-duration:8s;animation-delay:-3.5s}
.pt12{left:2%;opacity:.36;animation-duration:41s;animation-delay:-15s}
.pt12 svg{width:13px;height:13px;animation-duration:12s;animation-delay:-9s}

/* a narrow screen has a fraction of the width, so the same count reads as a flurry */
@media (max-width:720px){
  .pt2,.pt4,.pt6,.pt8,.pt10,.pt12{display:none}
}

/* ---------------------------------------------------------------- sections */
section{padding-block:clamp(3.4rem,7vw,5.8rem)}
.band-shell{background:rgba(233,196,190,.20)}
.sec-head{max-width:var(--measure);margin-bottom:clamp(2rem,4vw,3rem)}
/* losse tekstblokken onder elkaar, met tussenruimte uit het raster in plaats
   van uit een inline stijl: die zou `unsafe-inline` in de CSP vereisen */
.tekstblokken{display:grid;gap:1.4rem}
.sec-head p{color:var(--ink-soft);font-size:1.05rem;margin-top:.7rem}

/* ---------------------------------------------------------------- audience */
.audience-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(16rem,100%),1fr));gap:clamp(1.2rem,2.4vw,1.8rem)}
.aud{background:var(--paper);border:1px solid var(--line);border-radius:26px;overflow:hidden;
  box-shadow:var(--shadow-md);display:flex;flex-direction:column}
.aud-media{aspect-ratio:16/10;overflow:hidden;background:var(--blush-pale)}
.aud-media img{width:100%;height:100%;object-fit:cover;transition:transform .7s cubic-bezier(.2,.7,.3,1)}
.aud:hover .aud-media img{transform:scale(1.045)}
.aud-body{padding:clamp(1.5rem,3vw,2rem);display:flex;flex-direction:column;gap:.9rem;flex:1}
.aud-body h3{font-size:1.42rem;font-family:'Fraunces',Georgia,serif;
  font-variation-settings:'SOFT' 40,'WONK' 1;font-weight:500}
.aud-body > p{color:var(--ink-soft)}
/* One shared list under both cards, because the work is the same whoever
   asks for it. Two different lists in two cards said the opposite. */
.shared{
  margin-top:clamp(1.4rem,3vw,2.2rem);background:var(--paper);
  border:1px solid var(--line);border-radius:24px;
  padding:clamp(1.5rem,3vw,2.1rem);box-shadow:var(--shadow-sm);
}
.shared h3{font-size:1.15rem;margin-bottom:.45rem}
.shared > p{color:var(--ink-soft);font-size:.98rem;max-width:56ch}
/* Twee kolommen, niet `auto-fit`. Met auto-fit paste er op een brede kaart een
   derde kolom bij, en dan staan er drie punten op de eerste regel en één alleen
   op de tweede. Vier punten horen twee-en-twee. Onder 640px past er maar één
   naast elkaar zonder dat de tekst gaat breken. */
.shared ul{
  list-style:none;margin-top:1.2rem;display:grid;gap:.8rem 2rem;
  grid-template-columns:repeat(2,minmax(0,1fr));
}
@media (max-width:640px){
  .shared ul{grid-template-columns:1fr}
}
.shared li{display:flex;gap:.65rem;align-items:flex-start;font-weight:600;font-size:.96rem}
.shared li svg{flex:0 0 auto;margin-top:.26rem;color:var(--sage-ink)}

/* ---------------------------------------------------------------- services */
.svc-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(17rem,100%),1fr));gap:1.3rem}
.svc{background:var(--paper);border:1px solid var(--line);border-radius:22px;
  padding:clamp(1.5rem,3vw,1.9rem);box-shadow:var(--shadow-sm);
  transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease;
  display:flex;flex-direction:column;gap:.75rem}
.svc:hover{transform:translateY(-4px);box-shadow:var(--shadow-md);border-color:var(--line-strong)}
.svc-icon{width:3rem;height:3rem;border-radius:var(--petal);display:grid;place-items:center;
  margin-bottom:.3rem}
.svc-icon.rose{background:var(--blush-pale);color:var(--rose-ink)}
.svc-icon.sage{background:var(--sage-pale);color:var(--sage-ink)}
.svc-icon.blush{background:#F6DDE0;color:var(--head)}
.svc p{color:var(--ink-soft);font-size:.98rem}
.tag{align-self:flex-start;margin-top:.2rem;font-size:.76rem;font-weight:700;
  letter-spacing:.03em;color:var(--sage-ink);background:var(--sage-pale);
  padding:.32rem .7rem;border-radius:999px}

/* ---------------------------------------------------------------- process: the tulip stem */
.process-layout{display:grid;grid-template-columns:5.5rem 1fr;gap:0}
.stem{position:relative}
.stem svg{position:sticky;top:6rem;display:block;margin-inline:auto;
  height:min(52vh,25rem);width:auto;overflow:visible;color:var(--sage)}
/* De tekenlengte van de tulpensteel stond als `style="--len:120"` op het element
   zelf. Dat is verplaatst naar klassen, omdat een inline stijl `style-src
   'unsafe-inline'` in de CSP zou vereisen en die staat nu op `'self'`. */
.len-120{--len:120}
.len-220{--len:220}
.len-640{--len:640}

.stem .draw{stroke-dasharray:var(--len);stroke-dashoffset:var(--len);
  transition:stroke-dashoffset 1.6s cubic-bezier(.4,0,.2,1)}
.process-layout.is-visible .stem .draw{stroke-dashoffset:0}
.steps{display:flex;flex-direction:column;gap:1.1rem}
.step{background:var(--paper);border:1px solid var(--line);border-radius:20px;
  padding:clamp(1.3rem,2.6vw,1.7rem) clamp(1.4rem,3vw,2rem);
  display:grid;grid-template-columns:auto 1fr;gap:.4rem 1.2rem;align-items:start;
  box-shadow:var(--shadow-sm)}
.step-no{
  font-family:'Fraunces',Georgia,serif;font-variation-settings:'SOFT' 40,'WONK' 1;
  font-size:1.5rem;font-weight:600;color:var(--rose);line-height:1;grid-row:span 2;
  font-variant-numeric:tabular-nums;padding-top:.12rem;
}
.step h3{margin-bottom:.25rem}
.step p{color:var(--ink-soft);font-size:.98rem}

/* ---------------------------------------------------------------- wel / niet */
.clarity-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(19rem,100%),1fr));gap:1.3rem}
.clar{border-radius:24px;padding:clamp(1.6rem,3vw,2.1rem);border:1px solid var(--line)}
.clar.yes{background:var(--paper)}
.clar.no{background:#FCF4F2;border-color:#EBD9D5}
.clar h3{display:flex;align-items:center;gap:.6rem;margin-bottom:1.1rem;font-size:1.15rem}
.clar h3 .pip{width:1.7rem;height:1.7rem;border-radius:50%;display:grid;place-items:center;flex:0 0 auto}
.clar.yes .pip{background:var(--sage-pale);color:var(--sage-ink)}
.clar.no .pip{background:#F6DDE0;color:var(--rose-ink)}
.clar ul{list-style:none;display:flex;flex-direction:column;gap:.7rem}
.clar li{display:flex;gap:.65rem;align-items:flex-start;font-size:.97rem}
.clar li svg{flex:0 0 auto;margin-top:.3rem}
.clar.yes li svg{color:var(--sage-ink)}
.clar.no li svg{color:var(--rose)}
.clar.no li{color:var(--ink-soft)}

/* ---------------------------------------------------------------- costs */
.costs-card{background:var(--paper);border:1px solid var(--line);border-radius:28px;
  padding:clamp(1.8rem,4vw,3rem);box-shadow:var(--shadow-md);
  display:grid;grid-template-columns:1fr auto;gap:2rem;align-items:center}
.costs-card p{color:var(--ink-soft);max-width:54ch;margin-top:.8rem}
.prijs{display:flex;align-items:baseline;gap:.5rem;margin-top:1rem!important}
.prijs strong{
  font-family:'Fraunces',Georgia,serif;font-variation-settings:'SOFT' 40,'WONK' 1;
  font-size:clamp(2.4rem,1.6rem + 2.6vw,3.4rem);font-weight:600;color:var(--head);
  line-height:1;font-variant-numeric:tabular-nums;
}
.prijs span{font-size:1.02rem;font-weight:600;color:var(--ink-soft)}

/* ---------------------------------------------------------------- about */
.about-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(2rem,5vw,3.6rem);align-items:center}
.about-copy p{color:var(--ink-soft);margin-top:.9rem;max-width:52ch}
.traits{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(11.5rem,100%),1fr));
  gap:1rem 1.4rem;margin-top:2rem}
.trait{display:flex;gap:.7rem;align-items:flex-start}
.trait .pip{width:1.55rem;height:1.55rem;border-radius:50%;background:var(--sage-pale);
  color:var(--sage-ink);display:grid;place-items:center;flex:0 0 auto;margin-top:.12rem}
.about-media{position:relative}
.about-media img{border-radius:var(--petal-flip);box-shadow:var(--shadow-lg);width:100%}
.trait b{display:block;font-size:.97rem;color:var(--ink)}
.trait span{display:block;font-size:.86rem;color:var(--ink-soft);line-height:1.5}

/* ---------------------------------------------------------------- contact */
.contact-card{position:relative;overflow:hidden;
  background:linear-gradient(165deg,#FFFDFC 0%,#FBEFEE 58%,#F7E7E6 100%);
  border:1px solid var(--line-strong);border-radius:32px;
  padding:clamp(2rem,5vw,3.6rem);box-shadow:var(--shadow-lg);text-align:center}
.contact-card h2{margin-bottom:.7rem}
.contact-card > p{color:var(--ink-soft);max-width:44ch;margin:0 auto 2rem}
.contact-lines{display:flex;flex-wrap:wrap;justify-content:center;gap:.9rem;margin-bottom:1.6rem}
.contact-lines .btn{flex:1 1 14rem;max-width:20rem}
.tel-big{
  display:inline-flex;align-items:center;gap:.7rem;text-decoration:none;
  font-family:'Fraunces',Georgia,serif;font-variation-settings:'SOFT' 40,'WONK' 1;
  font-size:clamp(1.7rem,1.1rem + 2.4vw,2.5rem);font-weight:600;color:var(--head);
  padding:.5rem 0;
}
.tel-big:hover{color:var(--rose-ink)}
.contact-tulip{position:absolute;color:var(--blush);opacity:.42;pointer-events:none}
.contact-tulip.l{left:-1.2rem;bottom:-2.4rem;width:8rem;transform:rotate(-9deg)}
.contact-tulip.r{right:-2.6rem;top:-3.6rem;width:6.4rem;transform:rotate(171deg)}

/* ---------------------------------------------------------------- footer */
.site-footer{background:linear-gradient(180deg,rgba(242,198,204,0) 0%,rgba(242,198,204,.20) 100%);border-top:1px solid var(--line);
  padding-block:2.4rem 7rem;font-size:.86rem;color:var(--ink-soft)}
.site-footer .wrap{display:flex;flex-wrap:wrap;gap:.6rem 1.6rem;justify-content:space-between;align-items:center}
.site-footer nav{display:flex;gap:1.2rem;flex-wrap:wrap}
.site-footer a{color:var(--ink-soft);text-decoration:none;font-weight:600}
.site-footer a:hover{color:var(--head);text-decoration:underline}
.no-track{width:100%;padding-top:.9rem;margin-top:.4rem;border-top:1px solid var(--line);
  display:flex;align-items:center;gap:.5rem;font-size:.8rem}

/* ---------------------------------------------------------------- mobile call bar */
.callbar{
  position:fixed;left:0;right:0;bottom:0;z-index:60;display:none;
  gap:.6rem;padding:.6rem .8rem calc(.6rem + env(safe-area-inset-bottom));
  background:rgba(251,246,243,.96);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border-top:1px solid var(--line-strong);box-shadow:0 -6px 24px rgba(122,69,80,.1);
}
.callbar .btn{flex:1;padding:.85rem 1rem;font-size:.95rem}

/* ---------------------------------------------------------------- reveal */
.reveal{opacity:0;transform:translateY(16px);transition:opacity .7s ease,transform .7s cubic-bezier(.2,.7,.3,1)}
.reveal.is-visible{opacity:1;transform:none}

/* ---------------------------------------------------------------- responsive */
@media (max-width:1000px){
  .about-grid{grid-template-columns:1fr}
  .about-media{order:-1;max-width:26rem}
  .costs-card{grid-template-columns:1fr;text-align:left}
}
@media (max-width:820px){
  .site-nav{
    display:none;position:absolute;top:100%;left:0;right:0;
    flex-direction:column;align-items:stretch;gap:0;
    background:var(--paper);border-bottom:1px solid var(--line);
    padding:.6rem var(--gutter) 1.1rem;box-shadow:var(--shadow-md);
  }
  .site-nav.is-open{display:flex}
  .site-nav a{padding:.85rem 0;border-bottom:1px solid var(--line);font-size:1rem}
  .site-nav a:last-child{border-bottom:0}
  .menu-toggle{display:block;order:3}
  .header-tools{margin-left:auto}
  .header-tools .btn{display:none}
  .callbar{display:flex}
  .process-layout{grid-template-columns:1fr}
  .stem{display:none}
  .hero-grid{grid-template-columns:1fr;gap:clamp(1.8rem,5vw,2.6rem)}
  .hero-copy,.hero-figure{grid-column:1}
  .hero-copy{max-width:26ch}
  .hero h1{max-width:none}
  .hero-figure{max-width:24rem;justify-self:start}
  .hero-sprig{left:auto;right:-1.6rem;bottom:-1rem;width:4.4rem}
}
@media (max-width:520px){
  .hero-cta .btn{width:100%}
  .contact-lines{flex-direction:column;align-items:stretch}
  .step{grid-template-columns:1fr;gap:.3rem}
  .step-no{grid-row:auto}
}

@media (max-width:560px){
  /* De balk gebruikt dezelfde variabele, dus die wordt hier ook meteen goed.
     Op :root, niet los in de media-query: een kale declaratie zonder selector
     is ongeldige CSS en wordt genegeerd. */
  :root{--kop-hoogte:4.6rem}
  .site-header .wrap{gap:.5rem}
  .brand{gap:.55rem}
  .brand img{width:2.6rem;height:2.6rem}
  .brand span{font-size:1.08rem}
  .brand small{display:none}   /* naast de menuknop is er geen ruimte voor de ondertitel */
  .header-tools{gap:.38rem}
  .menu-toggle{padding:.42rem .46rem}
  .hero .wrap{position:relative;z-index:1;padding-block:1.2rem 2.4rem}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms!important;transition-duration:.001ms!important}
  .reveal{opacity:1;transform:none}
  .stem .draw{stroke-dashoffset:0}
  .petals{display:none}
  /* De achtergrond blijft staan, hij staat alleen stil. Bewegingsbeperking
     vraagt om rust, niet om een kale pagina. `animation:none` in plaats van
     de duur naar nul: dat laatste bevriest een animatie op een willekeurig
     beeld, en de lichtveeg zou dan half over het scherm blijven hangen. */
  .ambient *{animation:none!important}
  .amb-sheen{opacity:.34}
  /* de video wordt in site.js verwijderd, dus de klasse staat er niet en de
     hero valt terug op het oude ontwerp met de getekende achtergrond */
  .hero-media{display:none}
}

@media print{
  .site-header,.callbar,.menu-toggle,.petals,.ambient{display:none!important}
  body{background:#fff}
  .hero::before{display:none}
  section{padding-block:1.4rem;break-inside:avoid}
}