/* ==========================================================================
   Auti- en studiecoach Thessa
   Palet en vormentaal komen uit haar eigen zegel: de regenboogbloem met de
   puzzelstukjes, op het zachte ijsblauw van haar banner. Rustig, veel wit,
   voorspelbare opbouw: de site zelf moet aanvoelen zoals haar begeleiding.
   ========================================================================== */

@font-face {
  font-family: 'Quicksand';
  src: url('fonts/quicksand.woff2') format('woff2-variations');
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Nunito';
  src: url('fonts/nunito.woff2') format('woff2-variations');
  font-weight: 400 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Caveat';
  src: url('fonts/caveat.woff2') format('woff2-variations');
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}

:root {
  /* uit de banner */
  --ijs:        #dbe5ec;
  --ijs-licht:  #eef3f7;
  --ijs-diep:   #c3d4e0;
  /* uit de linework van het zegel */
  --inkt:       #1d2a33;
  --inkt-zacht: #4d5f6b;
  --inkt-flauw: #7b8b95;
  --wit:        #ffffff;
  /* uit de bloemblaadjes en de puzzelstukjes */
  --paars:      #6b4eb2;
  --blauw:      #2e85c6;
  --cyaan:      #4fc2e4;
  --geel:       #f5ce1e;
  --koraal:     #f47b5e;
  --roze:       #ee3e8b;
  --groen:      #2f9e63;
  /* de enige knopkleur, diep genoeg voor witte tekst */
  --actie:      #1b6597;
  --actie-diep: #16537c;

  --rand:       rgba(29, 42, 51, .10);
  --schaduw:    0 1px 2px rgba(29, 42, 51, .04), 0 12px 28px -14px rgba(29, 42, 51, .22);
  --schaduw-op: 0 2px 4px rgba(29, 42, 51, .06), 0 20px 40px -18px rgba(29, 42, 51, .30);

  --radius:     22px;
  --radius-s:   14px;
  --breedte:    1120px;

  /* het ijsblauw van haar eigen aankondiging, dat de site verder nergens
     gebruikt: het blok "wat er aan komt" is een affiche en mag dat tonen */
  --affiche:    #e5eff9;
}

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

/* scroll-padding-top houdt de kop uit de weg bij een sprong naar #aanvraag of
   #inhoud: de kop plakt op elk scherm, dus zonder deze regel landt de titel van
   het doel eronder. 92 px is de kop (min-height 76 plus randje en lucht). */
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 92px; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--ijs-licht);
  color: var(--inkt);
  font-family: 'Nunito', 'Segoe UI', system-ui, sans-serif;
  font-size: 1.0625rem;
  line-height: 1.75;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; display: block; }

h1, h2, h3, h4 {
  font-family: 'Quicksand', 'Segoe UI', system-ui, sans-serif;
  font-weight: 700;
  color: var(--inkt);
  line-height: 1.15;
  margin: 0 0 .6em;
  letter-spacing: -.005em;
}
h1 { font-size: clamp(2rem, 1.35rem + 2.6vw, 3.05rem); letter-spacing: -.015em; }
h2 { font-size: clamp(1.55rem, 1.15rem + 1.6vw, 2.25rem); letter-spacing: -.01em; }
h3 { font-size: clamp(1.15rem, 1.02rem + .5vw, 1.35rem); }
p  { margin: 0 0 1.1em; }
p:last-child { margin-bottom: 0; }

a { color: var(--actie); }
a:focus-visible, button:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible, [tabindex]:focus-visible {
  outline: 3px solid var(--blauw);
  outline-offset: 3px;
  border-radius: 6px;
}

.wrap { width: min(100% - 2.5rem, var(--breedte)); margin-inline: auto; }
.smal { width: min(100% - 2.5rem, 760px);  margin-inline: auto; }

.overslaan {
  position: absolute; left: -9999px; top: 0;
  background: var(--wit); color: var(--inkt);
  padding: .8rem 1.2rem; border-radius: 0 0 var(--radius-s) 0;
  z-index: 100; font-weight: 700;
}
.overslaan:focus { left: 0; }

/* ---------------------------------------------------------------- kop ---- */

.kop {
  position: sticky; top: 0; z-index: 40;
  background: rgba(255, 255, 255, .93);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--rand);
}
.kop-binnen {
  display: flex; align-items: center; gap: 1rem;
  min-height: 76px; padding-block: .55rem;
}
.merk { display: flex; align-items: center; gap: .7rem; text-decoration: none; color: inherit; margin-right: auto; }
.merk img { width: 54px; height: 54px; flex: none; }
.merk-naam { display: flex; flex-direction: column; line-height: 1.15; }
.merk-naam b {
  font-family: 'Quicksand', sans-serif; font-weight: 700;
  font-size: 1.05rem; letter-spacing: .01em;
}
.merk-naam span { font-size: .8rem; color: var(--inkt-zacht); letter-spacing: .04em; }

.menu { display: flex; align-items: center; gap: .1rem; flex-wrap: wrap; }
.menu a {
  font-family: 'Quicksand', sans-serif; font-weight: 600;
  font-size: .88rem; color: var(--inkt);
  text-decoration: none; padding: .5rem .5rem; border-radius: 10px;
  transition: background-color .18s ease, color .18s ease;
}
.menu a:hover { background: var(--ijs); }
.menu a[aria-current="page"] { color: var(--actie); background: var(--ijs-licht); }
/* De contactknop is een gevulde pil met witte letters, en die letters staan op
   !important. Kreeg zij ook de ijsblauwe achtergrond van de huidige pagina,
   dan stond er wit op bijna-wit en was de knop op contact/ onleesbaar. Daarom
   blijft ze hier gevuld, alleen een tint dieper. */
.menu .knop-klein[aria-current="page"] { color: var(--wit) !important; background: var(--actie-diep); }
.menu .knop-klein { margin-left: .35rem; }

.knop-klein {
  background: var(--actie); color: var(--wit) !important;
  padding: .55rem 1.05rem !important; border-radius: 999px !important;
}
.knop-klein:hover { background: #16537c; }

.menu-schakel {
  display: none; align-items: center; gap: .5rem;
  background: var(--wit); border: 1px solid var(--rand); border-radius: 999px;
  padding: .5rem .95rem; font: 600 .95rem 'Quicksand', sans-serif;
  color: var(--inkt); cursor: pointer;
}
.menu-schakel svg { width: 18px; height: 18px; }

[data-veni-lang-switch] .veni-langs { display: flex; gap: .35rem; }
[data-veni-lang-switch] .veni-langs a {
  font: 700 .82rem 'Quicksand', sans-serif; text-decoration: none;
  color: var(--inkt-zacht); padding: .3rem .55rem; border-radius: 8px;
  border: 1px solid var(--rand);
}
[data-veni-lang-switch] .veni-langs a[aria-current="true"] { color: var(--wit); background: var(--actie); border-color: var(--actie); }

/* Negen menuknoppen passen pas vanaf ongeveer 1180 px naast het merk; daaronder
   is het uitklapmenu netter dan een balk die op twee regels valt. */
@media (max-width: 1180px) {
  .menu-schakel { display: inline-flex; }
  .menu {
    display: none; position: absolute; left: 0; right: 0; top: 100%;
    flex-direction: column; align-items: stretch; gap: .15rem;
    background: var(--wit); border-bottom: 1px solid var(--rand);
    padding: .8rem 1.25rem 1.2rem; box-shadow: var(--schaduw);
  }
  .menu.open { display: flex; }
  .menu a { padding: .7rem .8rem; font-size: 1.02rem; }
  .menu .knop-klein { margin-left: 0; text-align: center; margin-top: .4rem; }
  /* De kop blijft ook hier plakken (position: sticky uit de basisregel). Sticky
     is zelf een gepositioneerd element, dus het uitklapmenu hangt er nog altijd
     met position: absolute onder; een extra position: relative is niet nodig en
     zou de kop juist weer laten meescrollen. Negen knoppen zijn wel hoog: op een
     laag scherm (liggende telefoon) mag het menu daarom zelf scrollen in plaats
     van onder de onderrand te verdwijnen, want vastgeplakt scrolt de pagina er
     niet meer naartoe. */
  .menu {
    max-height: calc(100vh - 88px); overflow-y: auto; overscroll-behavior: contain;
    /* nowrap hoort bij die max-height: de basisregel staat op flex-wrap: wrap, en
       een kolom met een hoogtegrens wikkelt dan in twee of drie kolommen naast
       elkaar in plaats van te scrollen. Een lijst onder elkaar is wat het ontwerp
       hier wil. */
    flex-wrap: nowrap;
  }
}

@supports (max-height: 100dvh) {
  @media (max-width: 1180px) { .menu { max-height: calc(100dvh - 88px); } }
}

/* -------------------------------------------------------------- knoppen -- */

.knop {
  display: inline-flex; align-items: center; justify-content: center; gap: .55rem;
  font-family: 'Quicksand', sans-serif; font-weight: 700; font-size: 1rem;
  padding: .92rem 1.6rem; border-radius: 999px; border: 2px solid transparent;
  text-decoration: none; cursor: pointer; text-align: center;
  transition: transform .16s ease, background-color .18s ease, box-shadow .18s ease;
}
.knop svg { width: 19px; height: 19px; flex: none; }
.knop-vol { background: var(--actie); color: var(--wit); box-shadow: var(--schaduw); }
.knop-vol:hover { background: #16537c; transform: translateY(-2px); box-shadow: var(--schaduw-op); }
.knop-lijn { background: var(--wit); color: var(--inkt); border-color: var(--ijs-diep); }
.knop-lijn:hover { border-color: var(--actie); color: var(--actie); transform: translateY(-2px); }
@media (prefers-reduced-motion: reduce) { .knop:hover { transform: none; } }

/* -------------------------------------------------------------- secties -- */

.sectie { padding-block: clamp(3.5rem, 6vw, 5.5rem); }
.sectie-wit { background: var(--wit); }
.sectie-ijs { background: var(--ijs); }

.oogje {
  display: inline-flex; align-items: center; gap: .5rem;
  font-family: 'Quicksand', sans-serif; font-weight: 700;
  font-size: .78rem; letter-spacing: .18em; text-transform: uppercase;
  color: var(--actie); margin-bottom: .85rem;
}
.oogje::before {
  content: ''; width: 22px; height: 3px; border-radius: 3px;
  background: linear-gradient(90deg, var(--roze), var(--geel), var(--groen));
}
.sectie-hoofd { max-width: 62ch; margin-bottom: 2.6rem; }
.sectie-hoofd p { color: var(--inkt-zacht); font-size: 1.1rem; }

.handschrift {
  font-family: 'Caveat', 'Segoe Script', cursive;
  font-weight: 600; font-size: clamp(1.5rem, 1.1rem + 1.5vw, 2rem);
  color: var(--paars); line-height: 1.2;
}

/* ----------------------------------------------------------------- hero -- */

.hero {
  position: relative; overflow: hidden;
  background:
    radial-gradient(90% 120% at 12% 0%, #ffffff 0%, rgba(255,255,255,0) 58%),
    radial-gradient(70% 100% at 100% 100%, #f5fafc 0%, rgba(245,250,252,0) 60%),
    var(--ijs);
  padding-block: clamp(2.75rem, 5vw, 4.5rem) clamp(3rem, 5vw, 5rem);
}
.hero-grid {
  display: grid; gap: clamp(2rem, 4vw, 3.5rem);
  grid-template-columns: 1fr;
  align-items: center;
}
@media (min-width: 940px) { .hero-grid { grid-template-columns: 1.03fr .97fr; } }

.hero-tekst p.leid { font-size: 1.14rem; color: var(--inkt-zacht); max-width: 54ch; }
.hero-hand { margin: -.2rem 0 1.1rem; }
/* .hero-knoppen bestaat niet meer sinds versie 14: de hero draagt haar
   welkomsttekst en verder niets. */

/* haar eigen tekening als beeld van de hero -------------------------- */

.hero-bloem { justify-self: center; width: 100%; max-width: 460px; }
.hero-bloem img { border-radius: var(--radius-s); }

/* --------------------------------------------------------------- kaarten -- */

.rooster { display: grid; gap: 1.5rem; grid-template-columns: 1fr; }
@media (min-width: 720px)  { .rooster-2 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 860px)  { .rooster-3 { grid-template-columns: repeat(3, 1fr); } }

.kaart {
  background: var(--wit); border: 1px solid var(--rand); border-radius: var(--radius);
  padding: clamp(1.5rem, 2.5vw, 2.1rem); box-shadow: var(--schaduw);
  display: flex; flex-direction: column;
}
.sectie-wit .kaart { background: var(--ijs-licht); }
.kaart-kop { display: flex; align-items: center; gap: .9rem; margin-bottom: 1rem; }
.kaart-kop h3 { margin: 0; }
.kaart-merk {
  width: 46px; height: 46px; border-radius: 14px; flex: none;
  display: grid; place-items: center; background: var(--ijs);
}
.kaart-merk svg { width: 24px; height: 24px; }
.kaart p { color: var(--inkt-zacht); }
.kaart .kaart-link { margin-top: auto; padding-top: 1.2rem; }
.kaart-link a {
  font-family: 'Quicksand', sans-serif; font-weight: 700; text-decoration: none;
  display: inline-flex; align-items: center; gap: .4rem;
}
.kaart-link a:hover { text-decoration: underline; }
.kaart-link svg { width: 16px; height: 16px; }

/* De thema's, als een overzicht in twee kolommen.

   Tot versie 10 stonden ze hier als losse balletjes die naast elkaar
   doorliepen: elf pillen van elk een andere lengte, in zeven kleuren, die
   samen een rafelige muur vormden. Thessa noemde dat op 23/08/2026 chaotisch
   en vroeg om meer overzicht. Vandaar deze vorm, en de drie keuzes erin zijn
   geen smaak maar precies die vraag:

   1. Een raster in plaats van een wikkelende rij. Elke regel begint op
      dezelfde lijn, dus het oog kan de lijst van boven naar beneden lezen in
      plaats van hem te moeten uitpuzzelen.
   2. Een streepje boven elke regel, zoals in een inhoudstafel. Dat geeft de
      lijst een ritme zonder er een reeks kaartjes van te maken.
   3. Eén kleur voor alle merktekens, haar blauw. De zeven kleuren waren de
      helft van de onrust. De kleur van de site zit al in het streepje boven
      het kopje van de sectie.

   Het merkteken is een bolletje uit ::before en niet een svg in de
   sjabloonregel. Eerst stond hier een puzzelstukje uit haar zegel, maar op
   19 px zijn de nokjes niet meer te onderscheiden en werd het een donkere
   vlek; gezien op de foto, niet gegokt. Een bolletje leest wel, en het geeft
   de lijst het ritme van een inhoudstafel. */

.themalijst {
  list-style: none; margin: 2rem 0 0; padding: 0;
  display: grid; grid-template-columns: 1fr; gap: 0 2.8rem;
}
@media (min-width: 880px) { .themalijst { grid-template-columns: 1fr 1fr; } }

.themalijst li {
  display: flex; align-items: flex-start; gap: .9rem;
  padding: .95rem .2rem; border-top: 1px solid var(--rand);
  font-size: 1.02rem; line-height: 1.5; color: var(--inkt);
}
.themalijst li::before {
  content: ''; flex: none; width: 9px; height: 9px; margin-top: .55rem;
  border-radius: 50%; background: var(--actie);
}

/* --------------------------------------------------------------- stappen -- */

.stappen { display: grid; gap: 1.25rem; grid-template-columns: 1fr; counter-reset: stap; }
@media (min-width: 880px) { .stappen { grid-template-columns: repeat(3, 1fr); } }

.stap {
  position: relative; background: var(--wit); border: 1px solid var(--rand);
  border-radius: var(--radius); padding: 1.9rem 1.6rem 1.6rem;
  box-shadow: var(--schaduw); display: flex; flex-direction: column;
}
.stap::before {
  content: ''; position: absolute; inset: 0 0 auto; height: 6px;
  border-radius: var(--radius) var(--radius) 0 0;
  background: var(--blauw);
}
.stap:nth-child(2)::before { background: var(--geel); }
.stap:nth-child(3)::before { background: var(--roze); }

.stap p { color: var(--inkt-zacht); font-size: 1rem; }
/* deze staat NA .stap p en is even specifiek: anders wint de regel hierboven
   en krimpt het labeltje terug naar de gewone tekstgrootte */
.stap .stap-nr {
  font-family: 'Quicksand', sans-serif; font-weight: 700;
  font-size: .74rem; letter-spacing: .16em; text-transform: uppercase;
  color: var(--inkt-flauw); margin-bottom: .35rem;
}
.stap h3 { margin-bottom: .5rem; }

/* ------------------------------------------------- het coachingtraject -- */
/* Dezelfde stapkaart, maar gecentreerd, met haar genummerde bol en het
   icoontje uit haar eigen schema, en op breed scherm een streepjeslijn die
   de drie stappen aan elkaar rijgt. */

.traject .stap { text-align: center; align-items: center; padding-top: 1.7rem; }
.traject .stap p { text-align: left; }
.traject-bol {
  width: 56px; height: 56px; border-radius: 50%; flex: none;
  display: grid; place-items: center;
  background: var(--wit); border: 3px solid var(--actie); color: var(--actie);
  font-family: 'Quicksand', sans-serif; font-weight: 700; font-size: 1.5rem;
  line-height: 1; position: relative; z-index: 2;
}
.traject-icoon {
  width: 68px; height: 68px; border-radius: 50%; margin: 1rem 0 .9rem;
  display: grid; place-items: center; background: var(--ijs);
}
.traject-icoon svg { width: 32px; height: 32px; color: var(--actie); }
.traject .stap:nth-child(2) .traject-bol { border-color: var(--geel); color: #8a6d00; }
.traject .stap:nth-child(3) .traject-bol { border-color: var(--roze); color: var(--roze); }

@media (min-width: 880px) {
  .traject .stap { position: relative; }
  .traject .stap:not(:last-child)::after {
    content: ''; position: absolute; top: 55px; left: 100%; width: 1.25rem;
    border-top: 3px dashed var(--ijs-diep);
  }
}

.traject-slot {
  margin-top: 1.6rem; background: var(--wit); border: 1px solid var(--rand);
  border-left: 5px solid var(--groen); border-radius: var(--radius-s);
  padding: 1.2rem 1.4rem; color: var(--inkt-zacht);
}
.sectie-wit .traject-slot { background: var(--ijs-licht); }

/* ----------------------------------------------------------- prijzen ---- */
/* Een overzicht, geen verhaal: per regel wat het is, hoelang het duurt en
   wat het kost. */

.prijzen { list-style: none; margin: 0; padding: 0; display: grid; gap: .9rem; }
.prijzen li {
  background: var(--wit); border: 1px solid var(--rand); border-radius: var(--radius-s);
  box-shadow: var(--schaduw); padding: 1.2rem 1.4rem;
  display: grid; gap: .3rem 1.5rem; align-items: center;
  border-left: 5px solid var(--blauw);
}
.prijzen li:nth-child(2) { border-left-color: var(--geel); }
.prijzen li:nth-child(3) { border-left-color: var(--roze); }
.prijzen .prijs-naam {
  font-family: 'Quicksand', sans-serif; font-weight: 700; font-size: 1.15rem;
  color: var(--inkt); margin: 0;
}
.prijzen .prijs-duur { font-size: .95rem; color: var(--inkt-flauw); font-weight: 600; margin: 0; }
.prijzen .prijs-bedrag {
  font-family: 'Quicksand', sans-serif; font-weight: 700; font-size: 1.7rem;
  color: var(--actie); line-height: 1.1; margin: 0;
}
@media (min-width: 620px) {
  .prijzen li { grid-template-columns: 1fr auto; }
  .prijzen .prijs-bedrag { grid-row: 1 / span 2; grid-column: 2; text-align: right; }
}

.klein-print {
  margin-top: 1.6rem; background: var(--ijs-licht); border: 1px dashed var(--ijs-diep);
  border-radius: var(--radius-s); padding: 1.1rem 1.3rem;
  font-size: .98rem; color: var(--inkt-zacht);
}
.sectie-wit .klein-print { background: var(--ijs); border-color: rgba(29,42,51,.14); }
.klein-print p { margin-bottom: .5rem; }
.klein-print p:last-child { margin-bottom: 0; }

/* ------------------------------------------------------------------ over -- */

.over-grid { display: grid; gap: clamp(2rem, 4vw, 3rem); grid-template-columns: 1fr; align-items: start; }
@media (min-width: 900px) { .over-grid { grid-template-columns: .85fr 1.15fr; } }

.tekening-kaart {
  background: var(--wit); border: 1px solid var(--rand); border-radius: var(--radius);
  padding: 1.4rem; box-shadow: var(--schaduw); text-align: center;
}
.tekening-kaart img { border-radius: var(--radius-s); }
.tekening-kaart figcaption {
  margin-top: .9rem; font-size: .9rem; color: var(--inkt-flauw); font-style: italic;
}

/* dezelfde kaart als afsluiter van "Wie ben ik": gecentreerd, en het
   bijschrift in haar handschriftletter, want het is daar een uitspraak
   van haar en geen onderschrift */
.bloem-slot { max-width: 520px; margin-inline: auto; }
.bloem-slot figcaption {
  font-family: 'Caveat', 'Segoe Script', cursive; font-weight: 600;
  font-size: clamp(1.35rem, 1.1rem + .8vw, 1.7rem); line-height: 1.25;
  color: var(--paars); font-style: normal;
}

.diplomas { list-style: none; margin: 1.4rem 0 0; padding: 0; display: grid; gap: .55rem; }
.diplomas li {
  display: flex; align-items: flex-start; gap: .7rem;
  font-weight: 600; color: var(--inkt);
}
.diplomas li svg { width: 21px; height: 21px; flex: none; margin-top: .18rem; color: var(--groen); }

/* ----------------------------------------------------------------- regio -- */
/* Eén vorm, en die staat op de auti- en de studiepagina allebei: kopje, titel,
   haar tekst, en onderaan haar eigen regel in handschrift.

   De lijst met gemeenten stond hier tot versie 10 als balletjes tussen de
   titel en de tekst. Thessa vroeg op 23/08/2026 om ze weg te laten, op allebei
   de pagina's: haar eigen tekst zegt al dat de afstand per aanvraag bekeken
   wordt, en de opsomming was daarnaast overbodig. De sleutel regio.lijst
   bestaat dus niet meer. Zet ze niet terug zonder het haar te vragen: dit is
   een uitdrukkelijke wens, en de admin vroeg ze eerder juist wel. */

.regio-tekst {
  max-width: 62ch; color: var(--inkt-zacht); font-size: 1.08rem;
  margin: 0;
}

.regio-hand { margin-top: 1.2rem; font-size: 1.5rem; }

/* --------------------------------------------------------------- wegwijs -- */
/* De verwijzing naar aanbod, werkwijze en tarieven: vier rustige tegels,
   verder niets. */

.wegwijs { display: grid; gap: 1rem; grid-template-columns: 1fr; margin-top: 2rem; }
@media (min-width: 620px) { .wegwijs { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 980px) { .wegwijs { grid-template-columns: repeat(4, 1fr); } }

.wegwijs a {
  display: flex; flex-direction: column; gap: .35rem;
  background: var(--wit); border: 1px solid var(--rand); border-radius: var(--radius-s);
  border-top: 5px solid var(--blauw); box-shadow: var(--schaduw);
  padding: 1.25rem 1.35rem 1.35rem; text-decoration: none; color: inherit;
  transition: transform .16s ease, box-shadow .18s ease;
}
.sectie-ijs .wegwijs a { background: var(--wit); }
.wegwijs a:nth-child(2) { border-top-color: var(--groen); }
.wegwijs a:nth-child(3) { border-top-color: var(--geel); }
.wegwijs a:nth-child(4) { border-top-color: var(--roze); }
.wegwijs a:hover { transform: translateY(-3px); box-shadow: var(--schaduw-op); }
@media (prefers-reduced-motion: reduce) { .wegwijs a:hover { transform: none; } }
.wegwijs b {
  font-family: 'Quicksand', sans-serif; font-size: 1.08rem;
  display: flex; align-items: center; gap: .45rem;
}
.wegwijs b svg { width: 17px; height: 17px; flex: none; color: var(--actie); }
.wegwijs span { font-size: .95rem; color: var(--inkt-zacht); line-height: 1.5; }

/* ------------------------------------ aankondiging op de startpagina ----- */
/* De opvallende plek voor wat er nieuw is, en op deze rustige site de enige
   plek die om aandacht mag vragen. Er staat enkel een afbeelding: geen kop,
   geen tekst, geen knoppen. De admin vroeg dat op 24/08/2026 zo, en dat is
   sinds versie 15 niet veranderd.
   Wat sinds versie 17 wel veranderde: het beeld komt uit haar uitgelichte
   berichten en is weer een link, nu naar dat ene bericht. Dus staat de hover
   er ook weer: hier belooft het opveren een klik die er echt is.
   Het ijsblauwe kader met het regenboograndje blijft weg. Haar affiche draagt
   dat ijsblauw en die kleuren zelf al; er nog eens hetzelfde kader rond zetten
   maakte er een doos in een doos van, en de affiche verdient de volle breedte.
   Wat er wel staat: een haarlijn, een ronde hoek en een zachte schaduw, zodat
   het beeld op het wit als een affiche aan de muur leest in plaats van als een
   losse foto. */

/* auto-fit en niet een vaste kolom: zolang zij een affiche uitlicht, staat die
   alleen en op haar volle 900 px. Licht ze er later twee of drie uit, dan
   vullen die de rij zonder dat er hier iets moet gebeuren. min(320px, 100%)
   om dezelfde reden als bij .blogrij-index: een vast minimum is op een
   telefoon breder dan het scherm. */
.afficherij {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: 1.4rem; justify-items: center;
  grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr));
}
.affiche { width: 100%; display: flex; justify-content: center; }

.aankondiging {
  display: block; width: min(100%, 900px); margin-inline: auto;
  border-radius: var(--radius); overflow: hidden;
  border: 1px solid var(--ijs-diep); box-shadow: var(--schaduw);
  background: var(--affiche);
  transition: transform .16s ease, box-shadow .18s ease;
}
.aankondiging:hover { transform: translateY(-3px); box-shadow: var(--schaduw-op); }
@media (prefers-reduced-motion: reduce) { .aankondiging:hover { transform: none; } }
/* Een bericht zonder foto: de renderer haalt de <img> weg en dan blijft er een
   leeg klikbaar kadertje over. :empty vangt dat op. Daarom staat de </a> in de
   markup ook tegen de <img> aan, zonder spatie ertussen. */
.aankondiging:empty { display: none; }
/* Geen aspect-ratio en geen object-fit: haar affiche draagt tekst, dus ze mag
   niet gesneden worden. Het beeld bepaalt zelf zijn hoogte. */
.aankondiging img { display: block; width: 100%; height: auto; }

/* ------------------------------------------------------ vrijblijvend ----- */

.vrijblijvend {
  margin-top: 1.6rem; background: var(--ijs-licht);
  border: 1px dashed var(--ijs-diep); border-radius: var(--radius-s);
  padding: 1.1rem 1.3rem; color: var(--inkt-zacht); font-size: .98rem;
}
.sectie-wit .vrijblijvend { background: var(--ijs); border-color: rgba(29,42,51,.14); }
.vrijblijvend p { margin-bottom: .55rem; }
.vrijblijvend p:last-child { margin-bottom: 0; }

/* ------------------------------------------------------- naar het formulier */
/* Het aanvraagformulier stond tot versie 10 op vier pagina's. Thessa vroeg op
   23/08/2026 om het nog maar één keer te tonen, op contact, en op de start-,
   de auti- en de studiepagina alleen nog door te verwijzen: "nu lijkt het in
   nader inzien toch wat veel anders". Dit blok is die verwijzing.

   Het staat op dezelfde plaats en in dezelfde sectie als het formulier
   vroeger, dus de knop in de hero en elke link naar #aanvraag landen nog waar
   ze landden. Op alle drie de pagina's draagt het ook haar mailadres en
   nummer: op de startpagina sinds versie 12, want daar verving dit blok ook de
   losse contactstrook die eronder stond.

   Sinds versie 13 zijn de drie blokken identiek, op vraag van de admin: het
   kopje is overal "Contact", en de extra regel over bellen of mailen die
   alleen op de startpagina stond (.verwijs-nabij) is weg, samen met de
   haarlijn erboven.

   Alle vier de sleutels zijn site-scoped: één bewerking zet de drie pagina's
   tegelijk juist. Laat dat zo, anders groeien ze uit elkaar. */

.verwijs {
  background: var(--wit); border: 1px solid var(--rand);
  border-radius: var(--radius); box-shadow: var(--schaduw);
  padding: clamp(1.6rem, 3vw, 2.4rem);
  display: grid; gap: 1.6rem; grid-template-columns: 1fr; align-items: center;
}
@media (min-width: 860px) {
  .verwijs { grid-template-columns: 1.35fr 1fr; gap: 2.6rem; }
}
.verwijs h2 { margin-bottom: .6rem; }
.verwijs-tekst p:last-child { margin-bottom: 0; color: var(--inkt-zacht); }

.verwijs-actie { display: flex; flex-direction: column; align-items: flex-start; }
@media (min-width: 860px) { .verwijs-actie { align-items: stretch; } }
.verwijs-actie .knop { justify-content: center; text-align: center; }
.verwijs-actie .contact-lijn { margin-top: 1.4rem; }

/* --------------------------------------------------------------- contact -- */

.contact-grid { display: grid; gap: clamp(1.75rem, 3.5vw, 3rem); grid-template-columns: 1fr; align-items: start; }
@media (min-width: 940px) { .contact-grid { grid-template-columns: 1fr 1.15fr; } }

.contact-lijn { display: grid; gap: 1rem; margin: 1.6rem 0 0; }
.contact-lijn a, .contact-lijn span {
  display: flex; align-items: center; gap: .8rem;
  color: var(--inkt); text-decoration: none; font-weight: 700;
}
.contact-lijn svg { width: 20px; height: 20px; flex: none; color: var(--actie); }
.contact-lijn a:hover { color: var(--actie); }

/* Hier stonden tot versie 14 de knoppen .volg-kop, .volg-lijn en .volg-knop:
   de regel "Volg mij voor meer info en updates" met Instagram en Facebook,
   onderaan het nieuwsblok op de startpagina. Dat blok is weg (zie
   .aankondiging), en de twee links staan nog altijd in de voettekst van elke
   pagina, als .voet-social. Deze regels hadden dus geen gebruiker meer. */

/* --------------------------------------------------------------- nieuws -- */
/* Eén kaartje per artikel, en hetzelfde kaartje op de startpagina en op de
   nieuwspagina: wie op de start iets ziet staan, herkent het daar terug.
   Het hele kaartje is klikbaar; dat doet het streepje op .blog-lees, dat over
   de kaart heen ligt, zodat er maar één tabstop per kaartje is.
   Een artikel zonder foto laat het beeld weg. Daarom staat de <img> zonder
   spatie in het anker: dan is .blog-beeld daarna echt leeg en vangt :empty
   het gat op. */

/* auto-fit met een maximumbreedte per kaartje, en niet drie vaste kolommen:
   zolang zij één of twee artikels heeft, staan die gecentreerd in plaats van
   links met een gat ernaast. Vanaf drie vult de rij zichzelf.
   Dit is alleen de nieuwspagina: de startpagina haalt sinds versie 17 wel
   weer artikels op, maar toont daar enkel de afbeelding en gebruikt haar
   eigen .afficherij (zie .aankondiging). De variant .blogrij-strip die daar
   tot versie 14 hoorde, is weg. */
.blogrij {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: 1.2rem; justify-items: center;
}
/* min(400px, 100%) en niet 400px: een minimum van 400 px is op een telefoon
   breder dan het kader zelf, en dan groeit het kaartje gewoon door het scherm
   heen. Gemeten op 393 px breed: de pagina werd 420 px, het kaartje bleef 400
   en stak er rechts uit terwijl het links wel zijn marge hield. Met min()
   krimpt de kolom mee zodra het scherm smaller is dan 400 px. */
.blogrij-index { grid-template-columns: repeat(auto-fit, minmax(min(400px, 100%), 1fr)); }
.blogrij .blog-kaart { width: 100%; }
.blogrij-index .blog-kaart { max-width: 540px; }

.blog-kaart {
  position: relative; display: flex; flex-direction: column; overflow: hidden;
  background: var(--wit); border: 1px solid var(--rand);
  border-radius: var(--radius); box-shadow: var(--schaduw);
  transition: transform .16s ease, box-shadow .18s ease;
}
.blog-kaart:hover { transform: translateY(-3px); box-shadow: var(--schaduw-op); }
@media (prefers-reduced-motion: reduce) { .blog-kaart:hover { transform: none; } }

.blog-beeld { display: block; background: var(--ijs-licht); }
.blog-beeld:empty { display: none; }
.blog-beeld img { display: block; width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }

.blog-blad { display: flex; flex-direction: column; flex: 1; padding: clamp(1.2rem, 2.2vw, 1.6rem); }
.blog-datum {
  font-family: 'Quicksand', sans-serif; font-weight: 700;
  font-size: .8rem; letter-spacing: .09em; text-transform: uppercase;
  color: var(--actie); margin-bottom: .5rem;
}
.blog-titel { font-size: clamp(1.15rem, 1rem + .5vw, 1.4rem); margin-bottom: .6rem; }
.blog-samen { color: var(--inkt-zacht); font-size: .98rem; margin: 0 0 1.3rem; }
.blog-lees {
  margin-top: auto; display: inline-flex; align-items: center; gap: .4rem;
  font-family: 'Quicksand', sans-serif; font-weight: 700; font-size: .95rem;
  color: var(--actie); text-decoration: none;
}
.blog-lees svg { width: 16px; height: 16px; flex: none; }
.blog-lees::after { content: ''; position: absolute; inset: 0; border-radius: var(--radius); }
.blog-kaart:hover .blog-lees { text-decoration: underline; }

/* --- onder de nieuwspagina: verder bladeren ----------------------------- */
/* Wij halen dit blok helemaal weg zolang alles op één pagina past, dus hier
   staat nooit een knop naar een pagina die niet bestaat. */

.blog-pager {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: .8rem 1.4rem; margin-top: 2.4rem;
}
.blog-pager .knop { padding: .7rem 1.3rem; font-size: .95rem; }
.blog-pager-tel { color: var(--inkt-zacht); font-size: .95rem; }
.blog-pager-tel b { color: var(--inkt); font-family: 'Quicksand', sans-serif; }


/* ---------------------------------------------------------- een artikel -- */
/* De tekst van een artikel typt zij zelf, in een editor die precies deze
   opmaak toont. Alles wat die editor kan maken (tussentitels, vet, cursief,
   opsommingen, links, een citaat) heeft hieronder dus een stijl. Staat het
   hier niet, dan ziet zij haar eigen tekst kaal worden terwijl ze typt, en
   dan is dat ons ontwerp en niet haar tekst. */

.artikel-samen { font-size: 1.15rem; }
.artikel-beeld { margin: 0 0 2.4rem; }
.artikel-beeld:empty { display: none; }
/* Een beeld bij een artikel is van haar, niet van ons: het kan een affiche
   zijn, een staande foto of een schermafbeelding. Vandaar contain met een
   hoogtegrens in plaats van cover: nooit een halve affiche in beeld, en nooit
   een staande foto die de hele pagina inneemt. */
.artikel-beeld img {
  display: block; width: 100%; height: auto;
  max-height: 520px; object-fit: contain; background: var(--ijs-licht);
  border-radius: var(--radius); box-shadow: var(--schaduw);
}

.artikel-tekst { color: var(--inkt-zacht); font-size: 1.05rem; line-height: 1.75; }
.artikel-tekst > :first-child { margin-top: 0; }
.artikel-tekst > :last-child { margin-bottom: 0; }
.artikel-tekst p { margin: 0 0 1.25rem; }
.artikel-tekst h2 {
  color: var(--inkt); font-size: clamp(1.35rem, 1.15rem + .7vw, 1.7rem);
  margin: 2.5rem 0 .8rem;
}
.artikel-tekst h3 { color: var(--inkt); font-size: 1.18rem; margin: 2rem 0 .6rem; }
.artikel-tekst strong { color: var(--inkt); }
.artikel-tekst ul, .artikel-tekst ol { margin: 0 0 1.25rem; padding-left: 1.4rem; }
.artikel-tekst li { margin-bottom: .5rem; }
.artikel-tekst li::marker { color: var(--actie); }
.artikel-tekst a { color: var(--actie); text-decoration: underline; text-underline-offset: 3px; }
.artikel-tekst a:hover { color: var(--actie-diep); }
.artikel-tekst blockquote {
  margin: 1.8rem 0; padding: .1rem 0 .1rem 1.3rem;
  border-left: 4px solid var(--ijs-diep); color: var(--inkt);
}
.artikel-tekst img { max-width: 100%; height: auto; border-radius: var(--radius-s); }

.artikel-slot { margin-top: 3rem; padding-top: 1.8rem; border-top: 1px solid var(--rand); }
.artikel-slot p { color: var(--inkt-zacht); margin-bottom: 1.3rem; }
.artikel-knoppen { display: flex; flex-wrap: wrap; gap: .8rem; }

/* ------------------------------------------------------------ downloads -- */
/* Eén kaartje per bestand. De bezoeker leest de naam en de regel eronder; het
   adres zelf staat alleen in de href, precies zoals gevraagd, en het hele
   kaartje is klikbaar via het streepje op .down-knop. */

.downrij { list-style: none; margin: 0; padding: 0; display: grid; gap: 1rem; }
.down-kaart {
  position: relative;
  display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.2rem;
  background: var(--ijs-licht); border: 1px solid var(--rand);
  border-left: 5px solid var(--groen); border-radius: var(--radius);
  box-shadow: var(--schaduw); padding: clamp(1.1rem, 2.2vw, 1.5rem);
  transition: transform .16s ease, box-shadow .18s ease;
}
.down-kaart:nth-child(3n+2) { border-left-color: var(--blauw); }
.down-kaart:nth-child(3n+3) { border-left-color: var(--paars); }
.down-kaart:hover { transform: translateY(-2px); box-shadow: var(--schaduw-op); }
@media (prefers-reduced-motion: reduce) { .down-kaart:hover { transform: none; } }

.down-merk {
  width: 46px; height: 46px; flex: none; border-radius: 50%;
  background: var(--wit); border: 1px solid var(--ijs-diep);
  display: grid; place-items: center; color: var(--actie);
}
.down-merk svg { width: 24px; height: 24px; }

.down-blad { flex: 1 1 260px; }
.down-naam {
  display: block; font-family: 'Quicksand', sans-serif; font-weight: 700;
  font-size: 1.08rem; color: var(--inkt); margin-bottom: .3rem;
}
.down-tekst { display: block; color: var(--inkt-zacht); font-size: .95rem; line-height: 1.55; }

.down-knop {
  flex: none; display: inline-flex; align-items: center; gap: .45rem;
  font-family: 'Quicksand', sans-serif; font-weight: 700; font-size: .95rem;
  color: var(--wit); background: var(--actie); text-decoration: none;
  border-radius: 999px; padding: .58rem 1.3rem;
  transition: background-color .18s ease;
}
.down-knop:hover { background: var(--actie-diep); }
.down-knop::after { content: ''; position: absolute; inset: 0; border-radius: var(--radius); }

.formulier {
  background: var(--wit); border: 1px solid var(--rand); border-radius: var(--radius);
  padding: clamp(1.5rem, 3vw, 2.3rem); box-shadow: var(--schaduw);
}
/* Kolom, met het invoervak onderaan: wikkelt het ene label over twee regels en
   het andere niet, dan staan de twee vakjes ernaast toch op dezelfde lijn.
   De cellen van .veld-paar rekken tot de hoogte van de rij (align-items:
   stretch is de standaard van een raster), en margin-top: auto duwt het vakje
   in de kortste cel naar onder. Zonder dit schuift het vakje van de kortste
   kolom omhoog en staat het formulier scheef. */
.veld { margin-bottom: 1.15rem; display: flex; flex-direction: column; }
.veld label {
  display: block; font-family: 'Quicksand', sans-serif; font-weight: 700;
  font-size: .94rem; margin-bottom: .4rem;
}
.veld .hint { font-weight: 400; color: var(--inkt-flauw); font-size: .87rem; }
.veld input, .veld select, .veld textarea {
  width: 100%; font: inherit; font-size: 1rem; color: var(--inkt);
  background: var(--ijs-licht); border: 1px solid var(--ijs-diep);
  border-radius: var(--radius-s); padding: .78rem .95rem;
  transition: border-color .18s ease, background-color .18s ease;
  margin-top: auto;
  /* Zonder een eigen regelhoogte rekent de browser een select een paar pixels
     lager uit dan een input, en dan staan de twee vakjes van een rij toch niet
     op dezelfde lijn. Gemeten: 54.9 tegenover 50.9 px. */
  line-height: 1.4;
}
/* En dezelfde hoogte, want een select rekent de browser zelfs met een gelijke
   regelhoogte nog anderhalve pixel hoger uit dan een input. box-sizing staat op
   border-box, dus dit is de buitenmaat: regelhoogte plus de twee binnenmarges
   plus de twee randjes. */
.veld input, .veld select { height: calc(1.4em + 1.56rem + 2px); }
.veld textarea { min-height: 138px; resize: vertical; }
.veld input:focus, .veld select:focus, .veld textarea:focus { background: var(--wit); border-color: var(--blauw); }
.veld-paar { display: grid; gap: 0 1.1rem; grid-template-columns: 1fr; }
@media (min-width: 620px) { .veld-paar { grid-template-columns: 1fr 1fr; } }

.honing { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.form-voet { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; margin-top: .4rem; }
.form-voet .knop { min-width: 220px; }
.form-nb { font-size: .88rem; color: var(--inkt-flauw); flex: 1 1 200px; }

.melding { border-radius: var(--radius-s); padding: 1rem 1.2rem; margin-top: 1.2rem; font-weight: 600; }
.melding-ok  { background: #e7f6ee; border: 1px solid #a9dcc0; color: #14603a; }
.melding-fout{ background: #fdeceb; border: 1px solid #f3bdb6; color: #8c2b20; }

/* ------------------------------------------------------------------ band -- */

.band {
  background: var(--inkt); color: var(--wit);
  border-radius: var(--radius); padding: clamp(2rem, 4vw, 3.2rem);
  display: grid; gap: 1.6rem; align-items: center; grid-template-columns: 1fr;
  background-image: radial-gradient(60% 120% at 92% 10%, rgba(79,194,228,.20) 0%, rgba(79,194,228,0) 60%);
}
@media (min-width: 860px) { .band { grid-template-columns: 1fr auto; gap: 2.5rem; } }
.band h2 { color: var(--wit); margin-bottom: .5rem; }
.band p { color: #c8d6de; margin: 0; }
.band .knop-vol { background: var(--wit); color: var(--inkt); }
.band .knop-vol:hover { background: var(--geel); color: var(--inkt); }

/* ----------------------------------------------------------------- voet --- */

.voet { background: var(--inkt); color: #b9c8d1; padding-block: 3.5rem 2rem; }
.voet-grid { display: grid; gap: 2rem; grid-template-columns: 1fr; }
@media (min-width: 760px) { .voet-grid { grid-template-columns: 1.3fr 1fr 1fr; } }
.voet h4 {
  color: var(--wit); font-size: .82rem; letter-spacing: .16em;
  text-transform: uppercase; margin-bottom: 1rem;
}
.voet a { color: #d7e3ea; text-decoration: none; }
.voet a:hover { color: var(--wit); text-decoration: underline; }
.voet ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .55rem; }
.voet-zegel {
  width: 74px; height: 74px; border-radius: 50%; background: var(--wit);
  display: grid; place-items: center; padding: 6px; margin-bottom: 1rem;
}
.voet-zegel img { width: 100%; height: 100%; }

/* haar Instagram en Facebook, op elke pagina, onder de contactkolom */
.voet-volg { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: 1.2rem; }
.voet-social {
  display: inline-flex; align-items: center; gap: .5rem;
  font-family: 'Quicksand', sans-serif; font-weight: 700; font-size: .92rem;
  color: #d7e3ea !important; text-decoration: none;
  border: 1px solid rgba(255,255,255,.22); border-radius: 999px;
  padding: .45rem 1rem;
  transition: border-color .18s ease, color .18s ease, background-color .18s ease;
}
.voet-social svg { width: 18px; height: 18px; flex: none; }
.voet-social:hover {
  color: var(--inkt) !important; background: var(--wit);
  border-color: var(--wit); text-decoration: none;
}

.voet-slot {
  margin-top: 2.5rem; padding-top: 1.4rem; border-top: 1px solid rgba(255,255,255,.12);
  font-size: .86rem; color: #8fa3ae;
  display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; justify-content: space-between;
}

/* ------------------------------------------------------- lange leestekst -- */

.lees h2 { margin-top: 2.6rem; }
.lees h2:first-child { margin-top: 0; }
.lees h3 { margin-top: 1.9rem; }
.lees ul { padding-left: 1.3rem; margin: 0 0 1.2rem; }
.lees li { margin-bottom: .45rem; }
.lees .kaart { margin-top: 1.6rem; }

.pagina-kop {
  background: var(--ijs);
  padding-block: clamp(2.5rem, 4.5vw, 4rem) clamp(2.5rem, 4.5vw, 3.5rem);
}
.pagina-kop p { color: var(--inkt-zacht); font-size: 1.12rem; max-width: 60ch; margin-bottom: 0; }
.kruimel {
  font-size: .88rem; color: var(--inkt-zacht); margin-bottom: .8rem;
}
.kruimel a { color: var(--inkt-zacht); text-decoration: none; }
.kruimel a:hover { color: var(--actie); text-decoration: underline; }

/* ------------------------------------------- portret naast de paginakop --- */
/* Haar eigen foto. Het kaartje is hetzelfde als de tekeningkaart: witte rand,
   zachte schaduw, ronde hoeken. Het bijschrift staat in haar handschriftletter,
   want dat is op deze site het accent dat zij zelf gebruikt. */

.kop-portret {
  display: grid; gap: clamp(1.8rem, 4vw, 3rem);
  grid-template-columns: 1fr; align-items: center;
}
@media (min-width: 860px) {
  .kop-portret { grid-template-columns: 1.3fr .7fr; }
}

.portret-kaart {
  margin: 0; background: var(--wit); border: 1px solid var(--rand);
  border-radius: var(--radius); padding: .85rem; box-shadow: var(--schaduw);
  width: 100%; max-width: 290px; justify-self: start;
}
@media (min-width: 860px) { .portret-kaart { justify-self: end; max-width: 320px; } }

/* dezelfde kaart, maar als beeld van een hele sectie op de startpagina */
.over-grid .portret-kaart { justify-self: start; max-width: 400px; }

.portret-kaart img {
  display: block; width: 100%; height: auto; border-radius: var(--radius-s);
}
.portret-kaart figcaption {
  margin-top: .7rem; text-align: center;
  font-family: 'Caveat', 'Segoe Script', cursive; font-weight: 600;
  font-size: 1.35rem; line-height: 1.2; color: var(--paars);
}

/* ----------------------------------------------------- onthul-animaties --- */
/* Bewust GEEN opacity in deze animatie: de secties schuiven enkel omhoog.
   Een waarnemer meldt zich altijd een fractie te laat, en bij snel scrollen
   stond een blok dan een frame lang op nul doorzichtigheid in beeld. Met
   alleen een verschuiving is er geen enkel moment waarop hier iets onzichtbaar
   staat, hoe het script ook afloopt. Op een site over prikkelverwerking is dat
   sowieso de rustigere keuze. */

html.js-anim:not([data-veni-shot]) .reveal { transform: translateY(16px); }
.reveal { transition: transform .55s ease; }
.reveal.in,
html.js-anim:not([data-veni-shot]) .reveal.in { transform: none; }
/* in de fotostand meteen de eindtoestand, zonder overgang */
html[data-veni-shot] .reveal { transform: none; transition: none; }

@media (prefers-reduced-motion: reduce) {
  .reveal, html.js-anim:not([data-veni-shot]) .reveal { transform: none; transition: none; }
}