/* =========================================================================
   Alisa Invicta
   Het ontwerp is vastgelegd in DESIGN.md. Wijzig de waarden hieronder bij
   :root, dan verandert de hele site mee.
   ========================================================================= */

/* ---- 1. Tokens ---------------------------------------------------------- */

:root {
  /* Kleur. Warm gebroken wit, warme donkere inkt, en donkergrijs als accent.
     Let op het verschil in temperatuur: alle neutralen zijn warm getint (hue
     78 tot 85), het accent juist koel (hue 250). Dat is met opzet. Een grijs
     accent zit qua helderheid onvermijdelijk dicht bij de tekstkleuren, dus
     het moet het van dat koele verschil hebben; anders leest een gemarkeerd
     woord gewoon als tekst en is het geen accent meer. */
  --paper:      oklch(96.5% 0.007 85);
  --paper-2:    oklch(93.2% 0.011 82);
  --paper-3:    oklch(89.0% 0.014 82);
  --line:       oklch(87.5% 0.010 82);
  --ink:        oklch(24.0% 0.014 78);
  --ink-2:      oklch(46.0% 0.012 78);
  --ink-3:      oklch(58.0% 0.011 80);
  --accent:       oklch(38.0% 0.012 250);
  --accent-diep:  oklch(22.0% 0.010 250);
  /* De derde kleur: de warme, gelige glans van de gravering zelf. Die komt
     alleen op donkere vlakken voor, precies zoals op de fles: op zwart staal
     zie je hem, op het lichte papier zou hij wegvallen en het contrast niet
     halen. Hij verving --accent-licht, want die deed hetzelfde werk in koel
     grijs en twee kleuren voor een plek is er een te veel. */
  --gravure:      oklch(82.0% 0.060 86);

  /* Typografie */
  --font-display: "Wix Madefor Display", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-text:    "Wix Madefor Text", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  --fs-xs:   0.8125rem;
  --fs-sm:   0.9375rem;
  --fs-base: 1.0625rem;
  --fs-md:   clamp(1.25rem, 0.9rem + 0.8vw, 1.4rem);
  --fs-lg:   clamp(1.6rem, 1.1rem + 1.6vw, 2rem);
  --fs-xl:   clamp(2.1rem, 1.3rem + 2.8vw, 3.1rem);
  --fs-2xl:  clamp(2.6rem, 1.4rem + 4.4vw, 4.4rem);
  /* Zo afgesteld dat "Twee broers." bij elke schermbreedte op een regel past. */
  --fs-3xl:  clamp(2.6rem, 0.6rem + 5.2vw, 5rem);

  /* Ruimte */
  --gutter:      clamp(1.25rem, 5vw, 4.5rem);
  --maxw:        1240px;
  --section:     clamp(5rem, 11vh, 8rem);
  --section-lg:  clamp(7rem, 16vh, 12rem);

  /* Beweging */
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --dur:  600ms;
}

/* ---- 2. Basis ----------------------------------------------------------- */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 90px;
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink-2);
  font-family: var(--font-text);
  font-size: var(--fs-base);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  color: var(--ink);
  font-weight: 600;
  line-height: 1.06;
  letter-spacing: -0.025em;
  margin: 0;
  text-wrap: balance;
}

/* Nederlands heeft lange samengestelde woorden. Zonder dit breekt zo'n woord
   op een smal scherm door de rand heen en gaat de pagina schuiven. */
h1, h2, h3, h4, p, li, dt, dd, blockquote, label { overflow-wrap: break-word; }

p { margin: 0 0 1.15em; max-width: 66ch; }
p:last-child { margin-bottom: 0; }

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

a { color: inherit; }

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 2px;
}

::selection { background: var(--accent); color: var(--paper); }

.wrap {
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--ink);
  color: var(--paper);
  padding: 0.75rem 1.25rem;
  z-index: 100;
}
.skip:focus { left: 0.5rem; top: 0.5rem; }

/* ---- 3. Kop van de pagina ---------------------------------------------- */

.site-head {
  position: sticky;
  top: 0;
  z-index: 40;
  background: var(--paper);
  border-bottom: 1px solid transparent;
  transition: border-color 300ms var(--ease);
}
.site-head[data-scrolled="true"] { border-bottom-color: var(--line); }

/* Woordmerk en menu staan naast elkaar en moeten samen binnen het scherm
   passen, ook op een telefoon van 320px. Daarom schalen de lettergrootte, de
   letterafstand en de tussenruimte allemaal mee met de schermbreedte. Vaste
   maten lieten de kop hier over de rand lopen, en dan kon de hele pagina
   heen en weer schuiven. */
.site-head__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: nowrap;
  gap: clamp(0.6rem, 3vw, 1.5rem);
  min-height: clamp(60px, 44px + 5vw, 74px);
}

/* Het logo komt uit het ontwerpbestand Logo_bruin_CMYK.pdf (zie assets/). Het
   staat als SVG in img/: bruin voor de lichte kop, en logo-licht.svg in de
   papierkleur voor de donkere voettekst. Een SVG blijft scherp op elk scherm.
   De hoogte schaalt mee met de schermbreedte, zodat logo en menu samen ook op
   een telefoon van 320px naast elkaar passen. */
.wordmark {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: flex-start;
  color: var(--ink);
  text-decoration: none;
  line-height: 1;
}
.wordmark__logo {
  display: block;
  height: clamp(36px, 28px + 2.6vw, 54px);
  width: auto;
}

/* Het ®-teken hoort bij het merk als geheel en staat klein rechtsboven het
   logo. Het logo zelf heeft er geen, dus dat blijft los in de tekst staan. */
.wordmark__r {
  font-family: var(--font-display);
  font-size: 0.625rem;
  margin-left: 0.2em;
}

.nav {
  flex: 0 1 auto;
  display: flex;
  align-items: center;
  gap: clamp(0.55rem, 2.96vw - 0.04rem, 2.25rem);
}
.nav a {
  font-size: clamp(0.78125rem, 0.7rem + 0.38vw, 0.9375rem);
  white-space: nowrap;
  color: var(--ink-2);
  text-decoration: none;
  padding: 0.5rem 0;
  position: relative;
  transition: color 200ms var(--ease);
}
.nav a:hover { color: var(--ink); }
.nav a[aria-current="page"] { color: var(--ink); }
.nav a[aria-current="page"]::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0.15rem;
  height: 1px;
  background: var(--accent);
}

/* ---- 4. Knoppen --------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  min-height: 52px;
  /* Ruimte boven en onder, want een lang label als "Stuur een bericht op
     WhatsApp" valt op een telefoon over twee regels. */
  padding: 0.7rem 1.5rem;
  max-width: 100%;
  border-radius: 2px;
  border: 1px solid var(--ink);
  background: var(--ink);
  color: var(--paper);
  font-family: var(--font-text);
  font-size: var(--fs-sm);
  font-weight: 600;
  line-height: 1.35;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background 250ms var(--ease), color 250ms var(--ease), border-color 250ms var(--ease);
}
.btn:hover { background: var(--accent); border-color: var(--accent); }

.btn--ghost { background: transparent; color: var(--ink); }
.btn--ghost:hover { background: var(--ink); color: var(--paper); }

/* Alles wat WhatsApp opent krijgt de accentkleur, net als de zwevende knop
   rechtsonder. Zo betekent die kleur op de hele site hetzelfde: hier stuur je ons
   een bericht. Zwart was daarvoor een te zware, te anonieme vlek. */
.btn--wa { background: var(--accent); border-color: var(--accent); color: var(--paper); }
.btn--wa:hover { background: var(--accent-diep); border-color: var(--accent-diep); }

.btn--onveld { background: var(--paper); border-color: var(--paper); color: var(--ink); }
.btn--onveld:hover { background: var(--gravure); border-color: var(--gravure); color: var(--accent-diep); }

.btn svg { width: 19px; height: 19px; flex: none; }

.btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 2.25rem;
}

/* ---- 5. Hero ------------------------------------------------------------ */

.hero { padding-block: clamp(2.5rem, 6vh, 5rem) var(--section); }

/* De hero-foto loopt door tot de rechterrand van het scherm. cqw meet de
   breedte binnen .hero, dus zonder de schuifbalk, en dat voorkomt dat de
   pagina horizontaal gaat schuiven. */
@supports (container-type: inline-size) {
  .hero { container-type: inline-size; }
}

.hero__grid {
  display: grid;
  gap: clamp(2.5rem, 5vw, 4.5rem);
  align-items: center;
}
/* Op een telefoon staan de drie blokken onder elkaar in de volgorde van de HTML:
   tekst, foto, knoppen. De knoppen staan daar dus onder de foto. De afstand
   ertussen komt van de rasterafstand hierboven, dus de eigen bovenmarge van de
   knoppenrij mag er op die breedte af. */
.hero__grid .btn-row { margin-top: 0; }

/* Op een breed scherm gaan tekst en knoppen samen in de linkerkolom en staat de
   foto rechts, over de volle hoogte. De twee 1fr-rijen boven en onder vangen de
   extra hoogte van de foto op, zodat tekst en knoppen als een blok in het midden
   blijven staan en er geen gat tussen die twee valt. */
@media (min-width: 900px) {
  .hero__grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 0.82fr);
    grid-template-rows: 1fr auto auto 1fr;
    row-gap: 0;
  }
  .hero__tekst { grid-column: 1; grid-row: 2; }
  .hero__grid .btn-row { grid-column: 1; grid-row: 3; margin-top: 2.25rem; }
  .hero__beeld { grid-column: 2; grid-row: 1 / 5; }
}

.hero h1 { font-size: var(--fs-3xl); margin-bottom: 1.5rem; }
.hero h1 em { font-style: normal; display: block; color: var(--accent); }

.hero__lead {
  font-size: var(--fs-md);
  color: var(--ink-2);
  max-width: 38ch;
  line-height: 1.55;
}

.hero__media {
  position: relative;
  background: var(--paper-2);
  border-radius: 4px;
  overflow: hidden;
}
/* Staande verhouding, gelijk aan die van de foto zelf, zodat er niets
   weggesneden wordt. Geen mix-blend-mode meer: dat was een truc om een
   fotobankfoto met witte achtergrond op het papier te laten vallen, en op een
   echte buitenfoto maakt het er een donkere vlek van. */
.hero__media img {
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
}

/* De foto loopt door tot de rechterrand van het scherm, maar alleen zodra de
   hero twee kolommen heeft. Op een telefoon staat de foto onder de tekst en
   zou dezelfde negatieve marge de pagina laten schuiven. */
@media (min-width: 900px) {
  .hero__media {
    margin-right: calc(var(--gutter) * -1);
    border-radius: 4px 0 0 4px;
  }
  @supports (container-type: inline-size) {
    .hero__media {
      margin-right: calc(-1 * (var(--gutter) + max(0px, (100cqw - var(--maxw)) / 2)));
    }
  }
}

/* ---- 6. Secties --------------------------------------------------------- */

.section { padding-block: var(--section); }
.section--tight { padding-block: clamp(3.5rem, 7vh, 5rem); }

.rule { border: 0; border-top: 1px solid var(--line); margin: 0; }

.eyebrow {
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--accent);
  margin: 0 0 1rem;
}

.section h2 { font-size: var(--fs-xl); max-width: 20ch; }

.prose { max-width: 62ch; color: var(--ink-2); }
.prose h2 { margin-bottom: 1.5rem; }

/* Lange lopende tekst: privacy en voorwaarden. Koppen krijgen hier ruimte
   erboven, want anders plakken de blokken aan elkaar en is de pagina niet te
   scannen. */
.juridisch h1 { font-size: var(--fs-xl); margin-bottom: 0.6rem; }
.juridisch h2 {
  font-size: var(--fs-lg);
  max-width: 24ch;
  margin: 2.75rem 0 0.85rem;
}
.juridisch ul { margin: 0 0 1.15em; padding-left: 1.15em; }
.juridisch li { margin-bottom: 0.45em; max-width: 64ch; }
.juridisch strong { color: var(--ink); font-weight: 600; }

.juridisch__datum {
  font-size: var(--fs-sm);
  color: var(--ink-3);
  margin-bottom: 2.25rem;
}

/* Veelgestelde vragen. Native <details>, dus zonder JavaScript, met het
   toetsenbord te bedienen en doorzoekbaar door de browser. Haarlijnen ertussen,
   net als bij de specificatielijst; geen kaartjes. */
.vraag { border-bottom: 1px solid var(--line); }
.vraag:first-of-type { border-top: 1px solid var(--line); }
.vraag > summary {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1.5rem;
  padding: 1.15rem 0;
  cursor: pointer;
  list-style: none;
  font-family: var(--font-display);
  font-size: var(--fs-base);
  font-weight: 600;
  line-height: 1.35;
  color: var(--ink);
}
.vraag > summary::-webkit-details-marker { display: none; }
.vraag > summary::after {
  content: "+";
  flex: none;
  font-weight: 400;
  color: var(--accent);
}
.vraag[open] > summary::after { content: "\2212"; }
.vraag > summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.vraag__antwoord { padding-bottom: 1.4rem; }
.vraag__antwoord p { margin-bottom: 0.85em; }
.vraag__antwoord p:last-child { margin-bottom: 0; }

/* De koppen op de vragenpagina staan onder de lijst, dus daar hoort weer lucht
   boven, net als op de andere lange pagina's. */
.juridisch .vraag + h2 { margin-top: 3rem; }

/* Ontstaansverhaal: uitspraak naast detailfoto */

.origin {
  display: grid;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
}
@media (min-width: 860px) {
  .origin { grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); }
}
.origin__quote {
  font-family: var(--font-display);
  font-size: var(--fs-lg);
  font-weight: 500;
  line-height: 1.28;
  letter-spacing: -0.02em;
  color: var(--ink);
  margin: 0;
  max-width: 24ch;
}
.origin__after { margin-top: 1.5rem; color: var(--ink-2); max-width: 44ch; }
/* 5/4, precies de verhouding van de foto van Ali en Isa, zodat er niet in hun
   gezicht of in de fles gesneden wordt. */
.origin img {
  width: 100%;
  aspect-ratio: 5 / 4;
  object-fit: cover;
  border-radius: 4px;
}

/* ---- 7. De as: twee namen, een lijn ------------------------------------ */

.story {
  display: grid;
  gap: clamp(2.5rem, 5vw, 4.5rem);
  align-items: start;
}
@media (min-width: 900px) {
  .story { grid-template-columns: minmax(0, 0.66fr) minmax(0, 1fr); }
}

.twins {
  display: grid;
  justify-items: start;
  gap: 0.4rem;
  margin: 0;
}
.twins__name {
  font-family: var(--font-display);
  font-size: var(--fs-2xl);
  font-weight: 500;
  letter-spacing: -0.035em;
  line-height: 0.95;
  color: var(--ink);
}
.twins__name--b { color: var(--accent); }

/* De twee namen worden opgeteld tot de merknaam. Vandaar de streep. */
.twins__sum {
  width: clamp(5.5rem, 11.5vw, 9.5rem);
  height: 1px;
  background: var(--ink);
  margin: 0.7rem 0 0.5rem;
}
.twins__name--sum { color: var(--ink); }

.twins__caption {
  font-size: var(--fs-sm);
  color: var(--ink-3);
  margin: 1.5rem 0 0;
  max-width: 24ch;
}

/* ---- 8. De gedrenkte vouw ---------------------------------------------- */

.fold {
  position: relative;
  isolation: isolate;
  padding-block: var(--section-lg);
  color: var(--paper);
  background: var(--accent-diep);
  overflow: hidden;
}
.fold__bg {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* De flessen staan in de bovenste helft van de foto, dus daar snijden we op
     bij een brede uitsnede. */
  object-position: center 38%;
}
/* Iets minder dicht dan eerst: dit is nu een foto van de eigen flessen en niet
   zomaar een fotobankveld, dus die mag je vaag zien staan. Wit op dit donkergrijs
   blijft ruim boven de contrasteis. */
.fold::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(175deg, rgba(16, 19, 23, 0.82), rgba(34, 39, 45, 0.88));
}
/* Elke zin krijgt zijn eigen regel: dat is de merkregel, niet zomaar tekst. */
.fold h2 {
  color: var(--paper);
  font-size: clamp(2rem, 5.2vw, 4rem);
  font-weight: 500;
  letter-spacing: -0.03em;
  line-height: 1.08;
  max-width: 24ch;
}
.fold h2 span { display: block; }
/* De enige regel op de hele site in de gravurekleur op een donker vlak: precies
   wat er op de fles gebeurt als de laser het staal blootlegt. Eén keer, aan het
   eind van de gedrenkte sectie, en verder nergens. */
.fold__tail {
  margin-top: 2rem;
  font-size: var(--fs-md);
  color: var(--gravure);
  max-width: 34ch;
}

/* ---- 9. Product --------------------------------------------------------- */

.product {
  display: grid;
  gap: clamp(2.5rem, 5vw, 5rem);
  align-items: start;
}
@media (min-width: 900px) {
  .product { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}

/* De korte versie op de homepagina: kleiner beeld, verticaal gecentreerd. */
.product--teaser { align-items: center; }
@media (min-width: 900px) {
  .product--teaser { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1fr); }
}

.product__media { background: var(--paper-2); border-radius: 4px; overflow: hidden; position: relative; }
.product__media img {
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
}

.product h1 { font-size: var(--fs-xl); margin-bottom: 0.75rem; }
.product__price {
  font-family: var(--font-display);
  font-size: var(--fs-lg);
  font-weight: 500;
  color: var(--ink);
  letter-spacing: -0.02em;
  margin: 0 0 0.35rem;
}
.product__vat { font-size: var(--fs-sm); color: var(--ink-3); margin: 0 0 2rem; }
.product__intro { margin-bottom: 2.25rem; }

/* Specificaties: lijst met haarlijnen, geen blokjes */

.specs { margin: 0 0 2.5rem; border-top: 1px solid var(--line); }
/* Twee vaste kolommen: label links, waarde rechts. Met flex-wrap sprong een
   lange waarde ("Met de hand, wijde opening") naar een eigen regel en stond
   dan links, terwijl de korte waarden rechts bleven staan. Nu houdt elke
   regel dezelfde as, ook als de waarde over twee regels loopt. */
.specs > div {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: baseline;
  column-gap: 1.5rem;
  padding: 0.85rem 0;
  border-bottom: 1px solid var(--line);
}
/* Brede variant: twee kolommen naast elkaar op een volle sectie. */
@media (min-width: 780px) {
  .specs--breed {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: clamp(2.5rem, 6vw, 5rem);
    border-top: 0;
  }
  .specs--breed > div:nth-child(-n + 2) { border-top: 1px solid var(--line); }
}

.specs dt { color: var(--ink-3); font-size: var(--fs-sm); }
.specs dd {
  margin: 0;
  color: var(--ink);
  font-size: var(--fs-sm);
  font-weight: 500;
  text-align: right;
}

/* Bestellen in drie stappen: dit is echt een volgorde, dus genummerd */

.steps {
  list-style: none;
  counter-reset: stap;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 1.5rem;
}
.steps li {
  counter-increment: stap;
  display: grid;
  grid-template-columns: 1.75rem 1fr;
  gap: 1rem;
  align-items: baseline;
}
.steps li::before {
  content: counter(stap);
  font-family: var(--font-display);
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--accent);
}
.steps strong { display: block; color: var(--ink); font-weight: 600; }
.steps p { margin: 0.15rem 0 0; font-size: var(--fs-sm); max-width: 46ch; }

/* De drie stappen naast elkaar, over de volle breedte van de pagina. */
@media (min-width: 780px) {
  .steps--row { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(2rem, 4vw, 3.5rem); }
  .steps--row li { grid-template-columns: 1fr; gap: 0.75rem; align-items: start; }
  .steps--row li::before { font-size: var(--fs-base); }
}

/* ---- 10. Contact -------------------------------------------------------- */

.contact {
  display: grid;
  gap: clamp(2.5rem, 5vw, 4.5rem);
  align-items: start;
}
@media (min-width: 860px) {
  .contact { grid-template-columns: minmax(0, 1fr) minmax(0, 0.85fr); }
}

.panel {
  background: var(--paper-2);
  border-radius: 4px;
  padding: clamp(1.75rem, 4vw, 2.5rem);
}
.panel h2 { font-size: var(--fs-lg); margin-bottom: 0.75rem; max-width: none; }
.panel p { font-size: var(--fs-base); }

.todo { color: var(--ink-3); font-style: italic; }

/* ---- 11. Voettekst ------------------------------------------------------ */

.site-foot {
  background: var(--accent-diep);
  color: rgba(247, 245, 240, 0.78);
  padding-block: clamp(2rem, 4.5vh, 2.75rem) 1.5rem;
  font-size: var(--fs-sm);
}
.site-foot .wordmark__logo { height: 56px; }
/* Links in de voettekst hadden allemaal een onderstreping. Met vijf links onder
   en naast elkaar werd dat een hek van streepjes op het donkere vlak, en het week
   bovendien af van het hoofdmenu bovenaan, waar een link juist geen streep heeft.
   Nu volgen ze datzelfde patroon: in rust alleen tekst, bij aanwijzen een haarlijn
   die van links naar rechts oploopt. Die lijn heeft de gravurekleur, dezelfde die
   de gravering op de zwarte fles heeft. Op een donker vlak is dat de kleur van
   iets dat licht vangt, en dat is precies wat hier gebeurt.
   De lijn is een achtergrondverloop en geen ::after, want een achtergrond komt op
   elke tekstregel apart terug: breekt een link ooit over twee regels, dan krijgen
   ze allebei hun streep. Een ::after doet dat niet. En background-size is een
   verfeigenschap, geen layout-eigenschap, dus animeren mag. */
.site-foot a:not(.wordmark) {
  color: var(--paper);
  text-decoration: none;
  padding-bottom: 0.22em;
  background-image: linear-gradient(var(--gravure), var(--gravure));
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 0% 1px;
  transition: background-size 420ms var(--ease);
}
.site-foot a:not(.wordmark):hover,
.site-foot a:not(.wordmark):focus-visible { background-size: 100% 1px; }

/* De pagina waar je nu op staat houdt de lijn vast, net als in het hoofdmenu. */
.site-foot a[aria-current="page"] { background-size: 100% 1px; }

/* De focusring staat standaard in --accent, en dat donkere grijs valt op het
   bijna zwarte vlak van de voettekst vrijwel weg (ongeveer 2:1). Hier dus de
   gravurekleur: die haalt 9.9:1 op dit vlak. */
.site-foot :focus-visible { outline-color: var(--gravure); }
.site-foot p { max-width: 40ch; }

.foot__grid { display: grid; gap: 1.75rem; margin-bottom: 1.75rem; }
/* Op een breed scherm staat de merknaam links en gaat de linkkolom naar rechts.
   De tekst lijnt daar ook rechts uit, zodat de rechterrand precies samenvalt met
   Privacy, Algemene voorwaarden en de KvK-regel eronder. De kolom is "auto"
   breed: precies zo breed als de langste link, en dus tegen de rand aan. */
@media (min-width: 720px) {
  .foot__grid { grid-template-columns: 1.4fr auto; }
  .foot__grid > div:last-child { text-align: right; }
}
.foot__grid h3 {
  color: var(--paper);
  font-size: var(--fs-sm);
  font-weight: 600;
  letter-spacing: 0;
  margin-bottom: 0.55rem;
}
.foot__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.4rem; }

.foot__bottom {
  border-top: 1px solid rgba(247, 245, 240, 0.18);
  padding-top: 1.1rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 1.5rem;
  justify-content: space-between;
  font-size: var(--fs-xs);
}

/* De merkregel staat los onder de onderste footerregel, over de volle breedte.
   Hij hoort niet in die flexregel zelf: die duwt zijn onderdelen naar links en
   rechts, en dan zou deze zin ergens in het midden blijven hangen. */
.site-foot .foot__merk {
  max-width: none;
  margin: 0.85rem 0 0;
  font-size: var(--fs-xs);
  opacity: 0.72;
}

/* ---- 12. Zwevende WhatsApp-knop ---------------------------------------- */

.wa-float {
  position: fixed;
  right: clamp(1rem, 3vw, 2rem);
  bottom: clamp(1rem, 3vw, 2rem);
  z-index: 50;
  width: 56px;
  height: 56px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  /* Donkere schijf met het glyph in de gravurekleur. Andersom, een lichte
     gravurecirkel op het lichte papier, haalt maar 1.5:1 tegen de achtergrond:
     dan is de knop nauwelijks te vinden, en dat is net de knop waarmee besteld
     wordt. Zo klopt de regel ook: gravure staat op een donker vlak. */
  background: var(--accent);
  color: var(--gravure);
  box-shadow: 0 6px 24px rgba(18, 22, 26, 0.26);
  opacity: 0;
  visibility: hidden;
  transform: translateY(12px);
  transition: opacity 350ms var(--ease), transform 350ms var(--ease), visibility 350ms;
}
.wa-float[data-show="true"] { opacity: 1; visibility: visible; transform: none; }
.wa-float svg { width: 27px; height: 27px; }

/* ---- 13. Beweging ------------------------------------------------------- */

.js .reveal { opacity: 0; transform: translateY(18px); transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease); }
.js .reveal[data-in="true"] { opacity: 1; transform: none; }

.js .reveal[data-delay="1"] { transition-delay: 70ms; }
.js .reveal[data-delay="2"] { transition-delay: 140ms; }
.js .reveal[data-delay="3"] { transition-delay: 210ms; }
.js .reveal[data-delay="4"] { transition-delay: 330ms; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    transition-delay: 0ms !important;
  }
  .js .reveal { opacity: 1; transform: none; }
}