/* ══════════════════════════════════════════════════════════════════════════
   INTEGRA TABAKSZAAK
   Warm paper and oak, matte black, teal as a rare accent.
   Palette and type inherited from the approved build. Values traced from
   design-spec.md; every hex there is the measured equivalent of the oklch.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── Fonts, self-hosted ───────────────────────────────────────────────── */
@font-face {
  font-family: 'Schibsted Grotesk';
  src: url('assets/fonts/schibsted-grotesk-v7-latin-wght.woff2') format('woff2-variations');
  font-weight: 400 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Hanken Grotesk';
  src: url('assets/fonts/hanken-grotesk-v12-latin-regular.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Hanken Grotesk';
  src: url('assets/fonts/hanken-grotesk-v12-latin-500.woff2') format('woff2');
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Hanken Grotesk';
  src: url('assets/fonts/hanken-grotesk-v12-latin-600.woff2') format('woff2');
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Hanken Grotesk';
  src: url('assets/fonts/hanken-grotesk-v12-latin-700.woff2') format('woff2');
  font-weight: 700; font-style: normal; font-display: swap;
}

/* ── Tokens ───────────────────────────────────────────────────────────── */
:root {
  --paper:       #faf7f1;
  --paper-2:     #f4eee6;
  --card:        #fefdfa;
  --ink:         #1b1715;
  --ink-soft:    #2a2522;
  --fg:          #25211d;
  --fg-2:        #605954;
  --muted:       #6f6862;
  --line:        #e0dad1;
  --line-2:      #cec6bc;
  --oak:         #d8c0a1;
  --oak-2:       #c4a486;
  --concrete:    #bec1c5;
  --accent:      #008c93;
  --accent-deep: #00727c;
  --accent-soft: #c6f2f4;
  --on-accent:   #f4fefe;
  --on-ink:      #e7e4e0;
  --on-ink-hi:   #faf8f5;
  --on-ink-lo:   #a49d96;
  --cta-ink:     #2e190c;
  --footer-fg:   #c7c4be;

  --r-xl: 34px;
  --r-lg: 24px;
  --r-md: 16px;
  --r-sm: 10px;
  --r-pill: 999px;

  --shadow-sm: 0 2px 8px rgba(43, 34, 28, .05);
  --shadow-md: 0 18px 44px rgba(43, 34, 28, .10);
  --shadow-lg: 0 36px 80px rgba(38, 30, 24, .16);

  --display: 'Schibsted Grotesk', system-ui, -apple-system, sans-serif;
  --body: 'Hanken Grotesk', system-ui, -apple-system, sans-serif;

  --maxw: 1240px;
  --pad: clamp(20px, 5vw, 56px);
  --gap-section: clamp(76px, 11vw, 144px);

  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --ease-state: cubic-bezier(.22, 1, .36, 1);
  /* Vertrekt meteen onder de hand en komt tot stilstand, in plaats van
     eerst te blijven staan en dan door het midden te schieten. */
  --ease-drawer: cubic-bezier(.32, .72, 0, 1);
  /* Symmetrisch in en uit, zoals het licht zelf. Alleen de zonsondergang-
     overvloeier gebruikt hem; de gelijke ademhaling aan beide kanten is wat
     hem een tijdsverloop laat lijken en geen omschakeling. */
  --ease-zon: cubic-bezier(.45, 0, .55, 1);
  --t-state: 160ms;

  --oak-tex:
    repeating-linear-gradient(93deg, rgba(150, 108, 68, .05) 0 1px, transparent 1px 7px),
    repeating-linear-gradient(90deg, rgba(163, 120, 78, 0) 0 120px, rgba(163, 120, 78, .10) 120px 122px),
    linear-gradient(168deg, var(--oak), var(--oak-2));
}

/* ── Reset ────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }

html { -webkit-text-size-adjust: 100%; }

body {
  background: var(--paper);
  color: var(--fg);
  font-family: var(--body);
  font-size: 16px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img, picture, svg, iframe { display: block; max-width: 100%; }
img { height: auto; }
ul { list-style: none; padding: 0; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }

h1, h2, h3 {
  font-family: var(--display);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.02;
  text-wrap: balance;
}

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

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

.section { margin-top: var(--gap-section); }

/* The nav is sticky and 74px tall, so an anchor jump would otherwise land a
   section head behind it. */
html { scroll-padding-top: 96px; }
.section, .ibreak, .footer { scroll-margin-top: 96px; }

/* ── Shared bits ──────────────────────────────────────────────────────── */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--body);
  font-weight: 600;
  font-size: 12.5px;
  letter-spacing: .14em;
  line-height: 1;
  text-transform: uppercase;
  color: var(--muted);
}
.eyebrow__n {
  font-variant-numeric: tabular-nums;
  color: var(--accent-deep);
}
.eyebrow--light { color: var(--on-ink-lo); }
.eyebrow--light .eyebrow__n { color: var(--accent-soft); }

.accentdot { color: var(--accent); }

.dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--accent);
  flex: none;
  box-shadow: 0 0 0 0 rgba(0, 140, 147, .45);
}
.has-motion .dot { animation: pulse 2.6s var(--ease-state) infinite; }
.dot.is-closed { background: var(--line-2); animation: none; box-shadow: none; }

@keyframes pulse {
  0%   { box-shadow: 0 0 0 0 rgba(0, 140, 147, .45); }
  70%  { box-shadow: 0 0 0 7px rgba(0, 140, 147, 0); }
  100% { box-shadow: 0 0 0 0 rgba(0, 140, 147, 0); }
}

.pill {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 8px 15px;
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  background: var(--card);
  font-size: 13.5px;
  font-weight: 500;
  color: var(--fg-2);
  transition: border-color var(--t-state) var(--ease-state), color var(--t-state) var(--ease-state);
}
.pill--light {
  background: transparent;
  border-color: rgba(255, 255, 255, .16);
  color: var(--footer-fg);
}

/* ── De knop ──────────────────────────────────────────────────────────────
   Eén geanimeerde schaal, --fill, van 0 in rust naar 1 onder de aanwijzer.
   Twee lagen lezen hem, dus niets kan het oneens zijn over richting of fase:
   de vulling die van de kant van de hand binnenloopt, en het bovenliggende
   label dat door die passerende rand wordt omgekleurd in plaats van vervangen.

   Hier stond tot ronde 6 een dagbalk onder in de knop, dezelfde meting als de
   weekring maar plat. Het idee klopte en het ding was lelijk, dus het is er
   uit. De aflezing hoort op de klok, niet op elke knop.

   Richting is een tweede schaal, --eo, die op pointerenter wordt geschreven.
   Alleen --fill wordt getransitioneerd, dus --eo en de twee clip-schalen
   worden elk frame vers gelezen en de hele knop heranker t bij het omkeren. */
@property --fill { syntax: '<number>'; initial-value: 0; inherits: true; }

.btn {
  --btn-bg: var(--accent-deep);
  --btn-fg: var(--on-accent);
  --sweep: var(--paper);
  --sweep-fg: var(--ink);
  --eo: 0%;
  --cr: 1;
  --cl: 0;
  position: relative;
  isolation: isolate;
  display: inline-flex;
  align-items: center;
  padding: 15px 26px;
  /* Alle varianten dezelfde doosmaat, anders staat een knop met rand naast een
     knop zonder rand twee pixels lager. */
  border: 1px solid transparent;
  border-radius: var(--r-pill);
  background: var(--btn-bg);
  color: var(--btn-fg);
  font-family: var(--body);
  font-weight: 600;
  font-size: 15px;
  line-height: 1;
  white-space: nowrap;
  overflow: hidden;
  transition: --fill 460ms var(--ease-drawer),
              transform var(--t-state) var(--ease-state),
              border-color var(--t-state) var(--ease-state);
}
.btn::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--sweep);
  transform: scaleX(var(--fill));
  transform-origin: var(--eo) 50%;
}
.btn:active { transform: scale(.985); }
/* Buiten de hover-query, zodat toetsenbordgebruik op een touchscreen hem ook krijgt. */
.btn:focus-visible { --fill: 1; }

.btn__stack { display: grid; }
.btn__t {
  grid-area: 1 / 1;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  white-space: nowrap;
}
.btn__t i {
  font-style: normal;
  transform: translateX(calc(var(--fill) * 4px));
}
/* Het woord wordt omgekleurd door de rand die eroverheen loopt, niet vervangen. */
.btn__t2 {
  color: var(--sweep-fg);
  clip-path: inset(0 calc((1 - var(--fill)) * 100% * var(--cr))
                   0 calc((1 - var(--fill)) * 100% * var(--cl)));
}

.btn--ghost {
  --btn-bg: transparent;
  --btn-fg: var(--fg);
  --sweep: var(--ink);
  --sweep-fg: var(--on-ink-hi);
  border-color: var(--line-2);
}

.btn--dark {
  --btn-bg: var(--ink);
  --btn-fg: var(--on-ink-hi);
  --sweep: var(--paper);
  --sweep-fg: var(--ink);
}

.btn--light {
  --btn-bg: var(--on-ink-hi);
  --btn-fg: var(--ink);
  --sweep: var(--accent-deep);
  --sweep-fg: var(--on-accent);
}

/* ── De sluis: leeftijdscheck en loader in één ────────────────────────── */
.sluis {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: grid;
  place-items: center;
  background: var(--ink);
  padding: var(--pad);
  clip-path: circle(140vmax at 50% 42%);
}
.sluis[hidden] { display: none; }
.sluis__inner { text-align: center; max-width: 480px; }

/* De wijzer loopt van 08:00 naar het uur van dit bezoek, en de cijfers eronder
   tellen mee. De loader zegt dus als eerste hoe laat het is. */
.sluis__dial {
  position: relative;
  width: clamp(190px, 42vw, 240px);
  aspect-ratio: 1;
  margin-inline: auto;
}
.sluis__svg { width: 100%; height: 100%; overflow: visible; }

.sluis__track {
  fill: none;
  stroke: #2c2622;
  stroke-width: 2;
}
.sluis__arc {
  fill: none;
  stroke: var(--accent);
  stroke-width: 3;
  stroke-linecap: round;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  transform: rotate(-90deg);
  transform-origin: 50% 50%;
}
.sluis__grad line {
  stroke: #46403a;
  stroke-width: 1.5;
}
.sluis__grad line.is-quarter { stroke: #6c645c; }

.sluis__disc { fill: var(--on-ink-hi); }
.sluis__i { fill: var(--ink); }
/* De tweede kopie van de I. Zonder motion ligt hij precies op de eerste en is
   hij onzichtbaar; met motion is dit de inkt die van boven naar beneden zakt. */
.sluis__i-fill { fill: var(--ink); }

.has-motion .sluis__disc { opacity: 0; }
.has-motion .sluis__i {
  fill: none;
  stroke: var(--ink);
  stroke-width: 9;
}

.sluis__clock {
  position: absolute;
  left: 50%;
  bottom: -6px;
  transform: translate(-50%, 100%);
  font-family: var(--display);
  font-weight: 800;
  font-size: 15px;
  letter-spacing: .08em;
  font-variant-numeric: tabular-nums;
  color: var(--on-ink-lo);
}
.has-motion .sluis__clock { opacity: 0; }

.sluis__ask { margin-top: 52px; }
.has-motion .sluis__ask > * { opacity: 0; }

.sluis__t {
  font-size: clamp(34px, 6.4vw, 56px);
  font-weight: 900;
  letter-spacing: -0.04em;
  line-height: .96;
  color: var(--on-ink-hi);
}
.sluis__p {
  margin-top: 14px;
  color: var(--on-ink-lo);
  font-size: 16px;
  max-width: 38ch;
  margin-inline: auto;
}
.sluis__btns {
  margin-top: 28px;
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
}
/* Een ghost-knop op inkt keert om: de veeg moet licht zijn, niet donker, en de
   dagbalk ligt hier op een donkere voetband. */
.sluis__btns .btn--ghost {
  --btn-fg: var(--on-ink);
  --sweep: var(--on-ink-hi);
  --sweep-fg: var(--ink);
  border-color: rgba(255, 255, 255, .22);
}

.deny {
  position: fixed;
  inset: 0;
  z-index: 95;
  display: grid;
  place-items: center;
  background: var(--ink);
  color: var(--on-ink);
  text-align: center;
  padding: var(--pad);
}
.deny[hidden] { display: none; }
.deny h2 {
  font-size: clamp(30px, 5vw, 44px);
  font-weight: 900;
  color: var(--on-ink-hi);
}
.deny p { margin-top: 12px; color: var(--on-ink-lo); }

/* The page under the sluis waits its turn */
.has-motion .is-locked { overflow: hidden; }

/* ── Nav ──────────────────────────────────────────────────────────────── */
.nav {
  position: sticky;
  top: 0;
  z-index: 40;
  background: rgba(250, 247, 241, .82);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid transparent;
  transition: border-color 240ms var(--ease-state), background-color 240ms var(--ease-state);
}
.nav.is-scrolled { border-bottom-color: var(--line); }

.nav__in {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  min-height: 74px;
}
.nav__brand { display: flex; align-items: center; gap: 12px; }
.nav__mark { width: 34px; height: 34px; }
/* De UI-snede van het woordmerk: New York op opsz 20 met GRAD .55, dus
   steviger getekend dan de display-snede en pas daardoor leesbaar op 13px. */
.nav__word { width: 182px; height: auto; }

.nav__links {
  display: flex;
  gap: 30px;
  font-size: 15px;
  font-weight: 500;
}
.nav__links a {
  position: relative;
  color: var(--fg-2);
  padding-block: 6px;
  transition: color var(--t-state) var(--ease-state);
}
.nav__links a::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 1px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 260ms var(--ease-state);
}
.nav__links a[aria-current="page"]::after { transform: scaleX(1); }
.nav__links a[aria-current="page"] { color: var(--fg); }

.nav__right { display: flex; align-items: center; gap: 12px; }

.burger {
  display: none;
  width: 44px;
  height: 44px;
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  position: relative;
}
.burger span {
  position: absolute;
  left: 13px;
  width: 18px;
  height: 1.5px;
  background: var(--fg);
  transition: transform 260ms var(--ease-state), opacity 160ms linear;
}
.burger span:nth-child(1) { top: 19px; }
.burger span:nth-child(2) { top: 25px; }
.burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(3px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2) { transform: translateY(-3px) rotate(-45deg); }

.mmenu {
  position: fixed;
  inset: 74px 0 auto;
  z-index: 39;
  background: var(--paper);
  border-bottom: 1px solid var(--line);
  padding: 18px var(--pad) 26px;
  display: grid;
  gap: 6px;
}
.mmenu[hidden] { display: none; }
.mmenu a {
  font-family: var(--display);
  font-weight: 800;
  font-size: 28px;
  letter-spacing: -0.03em;
  padding-block: 8px;
}
.mmenu__meta {
  margin-top: 10px;
  font-size: 13.5px;
  color: var(--muted);
}

/* ── 01 Hero ──────────────────────────────────────────────────────────── */
.hero {
  padding-top: clamp(44px, 6vw, 88px);
  padding-bottom: 0;
  /* clip in plaats van hidden, want hidden zou een scrollcontainer maken en de
     sticky nav breken. Het vangt het verschil op tussen 100vw en de echte
     contentbreedte als er een scrollbalk staat, zodat er nooit horizontaal
     gescrold kan worden. */
  overflow-x: clip;
}
/* Het enige blok op de pagina dat buiten de 1240-container valt. De rest van de
   site houdt zijn maat; de hero draagt de kop, de gevel en de status naast
   elkaar en die drie passen daar niet in. Dat is een keuze voor dit ene blok en
   geen nieuwe paginabreedte: de marquee eronder pakt de container weer op.

   De linkerkolom is max-content, dus precies zo breed als de kop nodig heeft,
   en de gevel krijgt alles wat overblijft. Zo bepaalt de typografie de layout
   in plaats van een fr-verhouding die op één schermbreedte goed uitkomt. */
.hero__grid {
  display: grid;
  grid-template-columns: minmax(0, max-content) minmax(0, 1fr);
  gap: clamp(32px, 4vw, 64px);
  align-items: center;
  max-width: 1680px;
  margin-inline: auto;
  padding-inline: var(--pad);
}

.hero__title {
  margin-top: 22px;
  font-size: clamp(46px, 9.2vw, 132px);
  font-weight: 900;
  letter-spacing: -0.04em;
  /* .92 was de waarde toen de kop nog vier regels was; op twee regels stonden
     ze te dicht op elkaar. .95 is de bovengrens die deze repo voor displaytype
     aanhoudt, dus dit is de ruimste stand die de regel toelaat en niet een
     getal dat toevallig goed uitkwam. */
  line-height: .95;
}
/* Een regelmasker met line-height .92 knipt de staart van de j en de p eraf.
   Het masker krijgt daarom onder- en bovenruimte, die met een negatieve marge
   weer uit de layout wordt gehaald, zodat de regelafstand niet verandert. */
.ln {
  display: block;
  overflow: hidden;
  padding-block: .06em .20em;
  margin-block: -.06em -.20em;
}
.ln__in { display: block; }
/* Grid in plaats van blokstroom, anders klappen de negatieve marges van twee
   opeenvolgende maskers samen en groeit de regelafstand alsnog. */
.hero__title, .footer__big, .sluis__t { display: grid; }

.hero__lead {
  margin-top: 24px;
  /* Was 32ch, wat onder een kop van 811px breed een smalle koker van zes
     regels opleverde. De kolom is breder geworden, dus de maatregel mag mee. */
  max-width: 46ch;
  font-size: clamp(17px, 1.5vw, 20px);
  color: var(--fg-2);
  line-height: 1.6;
}

.hero__now {
  margin-top: 26px;
  display: flex;
  align-items: baseline;
  gap: 14px;
  flex-wrap: wrap;
  padding-top: 22px;
  border-top: 1px solid var(--line);
}
.hero__now-state {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-family: var(--display);
  font-weight: 800;
  font-size: 19px;
  letter-spacing: -0.02em;
  color: var(--fg);
}
.hero__now-sub {
  font-size: 15px;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

.hero__cta {
  margin-top: 28px;
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

/* De gevel liep tot deze ronde het scherm uit, met de bleed-truc hieronder. Dat
   is eruit: hij stond daardoor tegen de rand geplakt in plaats van in de
   pagina. Hij eindigt nu op dezelfde marge als de kop begint, en heeft aan
   alle vier de kanten weer ronde hoeken. */
/* De maat zit op de media-kolom en niet op het kader, want het stempel hangt
   met left:0 aan deze doos. Zolang de doos breder was dan de plaat stond het
   stempel naast de plaat in plaats van eronder, wat boven 1700px zichtbaar
   werd. Nu is de doos precies de plaat. */
.hero__media {
  position: relative;
  width: min(100%, 620px);
  margin-left: auto;
}

.hero__frame {
  position: relative;
  width: 100%;
  border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
  aspect-ratio: 4 / 5;
}
.hero__frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform-origin: 50% 55%;
}

/* Dusk: one photograph, two moods. Graded in CSS, no second file. */
/* Hier lag tot ronde 8 een namaak-avond: een saturate/brightness-filter plus
   een blauwe gradient over de dagfoto. Dat is eruit. Er is nu een echte
   nachtplaat van dezelfde gevel, en een filter dat doet alsof is precies het
   soort onverdiende detaillaag waar _lib/AI-TELLS.md over gaat. De keuze
   tussen de twee platen staat in het scriptje onder de hero. */
/* Hier stond de regel die boven 1200px de rechterhoeken vierkant maakte, omdat
   de plaat toen de schermrand raakte. Hij raakt hem niet meer, dus de regel is
   weg in plaats van uitgezet. */

.hero__nojs { width: 100%; height: 100%; object-fit: cover; }

/* De overvloeier bij zonsondergang. Ligt precies over de gevel heen en gaat
   weg zodra de plaat eronder vervangen is. Bewust een CSS-transition en geen
   GSAP-tween: dit is de enige beweging op de pagina die kan aanbreken terwijl
   de tab weggeklikt is of de klok verspringt, en dan mag hij niet halverwege
   blijven hangen met de verkeerde gevel eronder. De compositor-klok loopt door
   waar een frame-ticker stilstaat, en main.js rondt hem sowieso af op tijd. */
.hero__swap {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  opacity: 0;
  transition: opacity 1.1s var(--ease-zon);
}

.hero__swap img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: inherit;
}

.hero__swap.is-in { opacity: 1; }

.hero__stamp {
  position: absolute;
  left: 0;
  bottom: clamp(-14px, -1vw, -6px);
  display: grid;
  grid-template-columns: auto auto;
  align-items: center;
  gap: 12px;
  padding: 16px 22px;
  border-radius: var(--r-md);
  background: var(--card);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-md);
}
.hero__stamp b {
  font-family: var(--display);
  font-weight: 900;
  font-size: 38px;
  letter-spacing: -0.04em;
  line-height: 1;
  color: var(--accent-deep);
  font-variant-numeric: tabular-nums;
}
.hero__stamp span {
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  line-height: 1.25;
  color: var(--muted);
}

/* ── 02 Marquee ───────────────────────────────────────────────────────── */
.marquee {
  margin-top: var(--gap-section);
  border-block: 1px solid var(--line);
  padding-block: clamp(16px, 2vw, 24px);
  overflow: hidden;
}
.marquee__track { display: flex; width: max-content; }
.marquee__set { display: flex; align-items: center; }
.marquee__item {
  font-family: var(--display);
  font-weight: 800;
  font-size: clamp(20px, 2.8vw, 34px);
  letter-spacing: -0.01em;
  line-height: 1.1;
  white-space: nowrap;
  color: var(--ink);
}
.marquee__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--accent);
  margin-inline: clamp(20px, 3vw, 40px);
  flex: none;
}

/* ── Section head ─────────────────────────────────────────────────────── */
.shead__title {
  margin-top: 16px;
  font-size: clamp(30px, 4.6vw, 58px);
  max-width: 20ch;
}
.shead__intro {
  margin-top: 18px;
  font-size: clamp(16px, 1.4vw, 19px);
  color: var(--fg-2);
  max-width: 56ch;
  min-width: 45ch;
}

/* ── 03 Waarom ────────────────────────────────────────────────────────── */
.reasons {
  margin-top: clamp(40px, 5vw, 64px);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(20px, 3vw, 44px);
}
.reason { padding-top: 26px; border-top: 1px solid var(--line-2); }
.reason__big {
  font-family: var(--display);
  font-weight: 800;
  font-size: clamp(40px, 5vw, 60px);
  letter-spacing: -0.03em;
  line-height: 1;
  color: var(--accent-deep);
  font-variant-numeric: tabular-nums;
}
.reason__t {
  margin-top: 12px;
  font-size: 19px;
  font-weight: 800;
}
.reason__p {
  margin-top: 8px;
  color: var(--fg-2);
  max-width: 34ch;
}

/* ── 04 Openingstijden en het etmaal ──────────────────────────────────── */
.hours {
  background: var(--ink);
  color: var(--on-ink);
  border-radius: var(--r-xl);
  padding: clamp(32px, 5vw, 68px);
  box-shadow: var(--shadow-lg);
}
.hours__grid {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: clamp(32px, 5vw, 64px);
  align-items: center;
}
.hours__title {
  margin-top: 16px;
  font-size: clamp(32px, 4.6vw, 58px);
  color: var(--on-ink-hi);
}
.hours__p {
  margin-top: 18px;
  color: var(--on-ink-lo);
  max-width: 42ch;
}
.hours__nums {
  margin-top: clamp(28px, 3.5vw, 44px);
  display: grid;
  gap: 20px;
}
.hours__num { padding-top: 16px; border-top: 1px solid var(--ink-soft); }
.hours__num dt {
  font-size: 13.5px;
  font-weight: 500;
  letter-spacing: .02em;
  color: var(--on-ink-lo);
}
.hours__num dd {
  margin: 6px 0 0;
  font-family: var(--display);
  font-weight: 800;
  font-size: clamp(34px, 4vw, 50px);
  letter-spacing: -0.03em;
  line-height: 1;
  color: var(--on-ink-hi);
  font-variant-numeric: tabular-nums;
}

/* Tijdelijk. Zonder dit staan er twee openingstijden-blokken onder elkaar en
   ziet de klant niet dat het een keuze is. Gaat eruit met de verliezer. */
.vlabel {
  margin-bottom: 16px;
  font-size: 13.5px;
  color: var(--muted);
  letter-spacing: .01em;
}
.vlabel b {
  display: inline-block;
  margin-right: 10px;
  padding: 4px 10px;
  border-radius: 999px;
  background: var(--accent-deep);
  color: var(--on-accent);
  font-weight: 600;
  font-size: 12.5px;
  letter-spacing: .06em;
  text-transform: uppercase;
}

/* ── VARIANT A, de dagstrook ──────────────────────────────────────────────
   Zeven balken onder elkaar, één per dag. Elke balk is een heel etmaal van
   08:00 links tot 08:00 rechts; het massieve deel is de openingsduur, dus
   vrijdag en zaterdag reiken zichtbaar verder. Eén verticale streep op nu
   snijdt door alle zeven heen, en dat is de enige teal in het blok.

   De maten van de drie kolommen staan als custom properties, want de
   nu-streep moet exact boven de baankolom staan en moet dus weten hoe breed
   de twee gootjes zijn. Bij een breakpoint verandert alleen de variabele. */
.strook {
  display: grid;
  gap: clamp(22px, 2.6vw, 34px);
  --gl: 46px;   /* daglabel */
  --gg: 16px;   /* goot */
  --gr: 78px;   /* uren rechts */
  --rin: calc(var(--gr) + var(--gg));   /* alles rechts van de baan */
}
.strook__read { display: grid; gap: 5px; }
.strook__day {
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--accent-soft);
}
.strook__big {
  font-family: var(--display);
  font-weight: 800;
  font-size: clamp(30px, 3.6vw, 46px);
  letter-spacing: -0.02em;
  line-height: 1;
  color: var(--on-ink-hi);
  font-variant-numeric: tabular-nums;
}
.strook__sub { font-size: 15px; color: var(--on-ink-lo); }

.strook__grid { position: relative; display: grid; gap: 4px; }

.srow {
  display: grid;
  grid-template-columns: var(--gl) 1fr var(--gr);
  gap: var(--gg);
  align-items: center;
  padding: 7px 0;
  background: none;
  border: 0;
  text-align: left;
  cursor: pointer;
  color: inherit;
  font: inherit;
}
.srow__d {
  font-size: 13.5px;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--on-ink-lo);
  transition: color var(--t-state) var(--ease-state);
}
.srow__t {
  position: relative;
  height: 12px;
  border-radius: 999px;
  background: var(--ink-soft);
  overflow: hidden;
}
/* --o is waar de dag begint op de baan van 24 uur, --f hoe lang hij duurt.
   Zes dagen delen dezelfde --o; zondag begint vier uur verderop, en omdat alle
   zeven om middernacht sluiten liggen de rechterkanten op één lijn. De intro
   schaalt alleen --f, dus de balken groeien vanaf hun eigen openingstijd naar
   rechts en niet allemaal vanaf de linkerrand. */
.srow__f {
  position: absolute;
  inset: 0 auto 0 0;
  width: 100%;
  border-radius: 999px;
  background: var(--on-ink-lo);
  transform-origin: 0 50%;
  transform: translateX(calc(var(--o, 0) * 100%)) scaleX(var(--f, 0));
  transition: background var(--t-state) var(--ease-state);
}
.srow__h {
  font-size: 13.5px;
  color: var(--on-ink-lo);
  text-align: right;
  font-variant-numeric: tabular-nums;
  transition: color var(--t-state) var(--ease-state);
}
.srow.is-today .srow__d,
.srow.is-today .srow__h { color: var(--on-ink-hi); }
.srow.is-today .srow__f { background: var(--on-ink-hi); }
.strook.is-preview .srow__f { background: var(--ink-soft); }
.strook.is-preview .srow.is-active .srow__f { background: var(--on-ink-hi); }
.strook.is-preview .srow.is-active .srow__d,
.strook.is-preview .srow.is-active .srow__h { color: var(--on-ink-hi); }

/* De streep op nu. De baan loopt van het label plus een goot tot aan --rin.
   Die twee maten staan één keer vast, want toen de rechterkolom op mobiel
   wegviel bleef de formule een tweede goot aftrekken en stond de streep 5,4px
   naast waar hij hoorde. Gemeten, niet gezien. */
.strook__now {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 2px;
  background: var(--accent);
  border-radius: 2px;
  transform-origin: 50% 0;
  left: calc(var(--gl) + var(--gg) + var(--now, 0) * (100% - var(--gl) - var(--gg) - var(--rin)));
  pointer-events: none;
}
.strook__scale {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  margin-left: calc(var(--gl) + var(--gg));
  margin-right: var(--rin);
  font-size: 12px;
  color: var(--on-ink-lo);
  font-variant-numeric: tabular-nums;
}
.strook__scale span { text-align: center; }
.strook__scale span:first-child { text-align: left; }
.strook__scale span:last-child { text-align: right; }
.strook__hint { font-size: 13.5px; color: var(--on-ink-lo); max-width: 46ch; }

/* ── VARIANT B, het uur als typografie ────────────────────────────────────
   Geen tekening. Het echte tijdstip op display-formaat; elk cijfer zit in een
   masker en rolt van onderen binnen zodra het verspringt. Dat rollen is het
   apparaat: het cijfer staat er niet, het loopt. */
.klok { display: grid; gap: clamp(16px, 1.9vw, 24px); justify-items: start; }
.klok__brow {
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--accent-soft);
}
.klok__time {
  display: flex;
  align-items: flex-start;
  font-family: var(--display);
  font-weight: 900;
  font-size: clamp(72px, 12.5vw, 178px);
  line-height: .86;
  letter-spacing: -0.045em;
  color: var(--on-ink-hi);
  font-variant-numeric: tabular-nums;
}
/* Geen opgelegde em-breedte per sleuf. Die was er om de breedte stabiel te
   houden tijdens het rollen, maar hij vocht met de eigen advance van het font:
   gemeten liep de inkt van de dubbele punt 51,6px buiten zijn vak en botste op
   het volgende cijfer. Met tabular-nums heeft elk cijfer al dezelfde advance,
   en het uitgaande cijfer staat absoluut, dus de sleuf verspringt sowieso niet.
   De padding met tegengestelde marge is er zodat het masker de zijkanten van de
   glyph niet afsnijdt; verticaal dezelfde truc als bij .ln. */
.klok__d {
  position: relative;
  display: block;
  overflow: hidden;
  padding: 0 .05em .09em;
  margin: 0 -.05em -.09em;
}
.klok__dn { display: block; text-align: center; }
.klok__dn.is-out { position: absolute; inset: 0 .05em .09em; }
.klok__c { display: block; }
.klok__line {
  font-size: clamp(17px, 1.5vw, 20px);
  color: var(--on-ink);
  max-width: 30ch;
}
.klok__list { display: grid; gap: 0; width: 100%; margin-top: 6px; }
.klok__row {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  padding: 14px 0;
  border-top: 1px solid var(--ink-soft);
}
.klok__row dt { font-size: 13.5px; color: var(--on-ink-lo); }
.klok__row dd {
  margin: 0;
  font-size: 13.5px;
  color: var(--on-ink);
  font-variant-numeric: tabular-nums;
}

/* ── De weekring, apparaat 1. UIT DE PAGINA sinds ronde 7 ──────────────────
   De markup is weg, deze regels staan hier alleen tot er tussen variant A en
   B gekozen is, zodat terugdraaien één edit is. Gaat eruit met de verliezer.

   Zeven ringen, één per dag, maandag buiten en zondag binnen. Elke ring is een
   heel etmaal dat om 08:00 bovenaan begint; de getekende boog is zo lang als
   die dag open is. Achttien van de vierentwintig uur, of negentien op vrijdag
   en zaterdag, wat je meteen ziet omdat die twee bogen zichtbaar verder
   doorlopen. De naald staat op nu en draait niet mee. */
.etmaal { display: grid; justify-items: center; }

.etmaal__ring {
  position: relative;
  width: clamp(280px, 34vw, 440px);
  aspect-ratio: 1;
}
.etmaal__svg { width: 100%; height: 100%; overflow: visible; }

/* Vier merktekens: 08 boven, dan om de zes uur. De volle graduatiering van
   vierentwintig streepjes is er in ronde 6 uit gegaan, die maakte er een
   cockpit van. Een klok mag rustig zijn. */
.etmaal__hours line {
  stroke: #4a423b;
  stroke-width: 1.5;
  stroke-linecap: round;
}

.etmaal__rings circle {
  fill: none;
  stroke: #3a332d;
  stroke-width: 7;
  stroke-linecap: round;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  transform: rotate(-90deg);
  transform-origin: 50% 50%;
  transition: stroke 260ms var(--ease-state), opacity 260ms var(--ease-state);
}
.etmaal__rings circle.is-today {
  stroke: var(--accent);
  stroke-width: 9;
}
.etmaal.is-preview .etmaal__rings circle { opacity: .3; }
.etmaal.is-preview .etmaal__rings circle.is-active {
  opacity: 1;
  stroke: var(--on-ink-hi);
  stroke-width: 9;
}

.etmaal__hand line {
  stroke: var(--on-ink-hi);
  stroke-width: 1.5;
  stroke-linecap: round;
  opacity: .6;
}
.etmaal__hand {
  transform-origin: 240px 240px;
  transition: opacity 260ms var(--ease-state);
}
.etmaal.is-preview .etmaal__hand { opacity: .18; }

.etmaal__nums text {
  fill: var(--on-ink-lo);
  font-family: var(--body);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .14em;
}

/* De aflezing is de binnenschijf, niet een laag over de hele ring. Op inset 0
   lag hij over de uurcijfers aan de rand heen, wat de probe terecht als
   afdekking meldde. */
.etmaal__read {
  position: absolute;
  inset: 27%;
  display: grid;
  align-content: center;
  justify-items: center;
  gap: 6px;
  text-align: center;
}
.etmaal__day {
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--on-ink-lo);
}
.etmaal__big {
  font-family: var(--display);
  font-weight: 800;
  font-size: clamp(22px, 2.5vw, 33px);
  letter-spacing: -0.02em;
  line-height: 1;
  color: var(--on-ink-hi);
  font-variant-numeric: tabular-nums;
  text-wrap: balance;
}
.etmaal__sub {
  font-size: 14px;
  color: var(--on-ink-lo);
  text-wrap: balance;
}

.etmaal__days {
  margin-top: 30px;
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
  justify-content: center;
}
.etmaal__days button {
  display: grid;
  gap: 5px;
  justify-items: center;
  min-width: 48px;
  padding: 9px 8px 10px;
  border-radius: var(--r-sm);
  border: 1px solid transparent;
  border-top: 1px solid var(--ink-soft);
  font-size: 13px;
  font-weight: 600;
  color: var(--on-ink-lo);
  text-transform: uppercase;
  letter-spacing: .06em;
  /* border-color, niet border-top-color: de andere drie zijden zijn
     transparant en veranderen nooit, en zo bevat de transition-regel niet het
     woord "top", wat cinematic-doctor als een layout-animatie leest. */
  transition: color var(--t-state) var(--ease-state),
              border-color var(--t-state) var(--ease-state),
              background-color var(--t-state) var(--ease-state);
}
.etmaal__days button em {
  font-style: normal;
  font-size: 10.5px;
  letter-spacing: .06em;
  color: #8a8078;
  font-variant-numeric: tabular-nums;
  transition: color var(--t-state) var(--ease-state);
}
.etmaal__days button.is-long { border-top-color: #4a423b; }
.etmaal__days button.is-long em { color: var(--accent-soft); }
.etmaal__days button.is-today { color: var(--accent-soft); border-top-color: var(--accent); }
.etmaal__days button[aria-pressed="true"] {
  background: var(--on-ink-hi);
  color: var(--ink);
  border-top-color: var(--on-ink-hi);
}
.etmaal__days button[aria-pressed="true"] em { color: #5c554f; }
.etmaal__hint {
  margin-top: 16px;
  max-width: 40ch;
  font-size: 13px;
  line-height: 1.5;
  color: #8a8078;
  text-align: center;
}

/* ── 03 Assortiment: de lijst met één meelopende plaat ────────────────────
   De lijst scrollt, de plaat staat stil en wisselt. Alle vier de platen liggen
   op elkaar in hetzelfde kader en alleen de opacity verschilt, zodat er tussen
   twee groepen niets hoeft in te laden. */
.groepen {
  margin-top: clamp(44px, 5vw, 72px);
  display: grid;
  grid-template-columns: 1fr minmax(300px, 0.72fr);
  gap: clamp(32px, 6vw, 88px);
  align-items: start;
}

.groepen__lijst {
  display: grid;
  gap: clamp(30px, 4vw, 56px);
  /* De laatste groep moet nog actief kunnen worden voordat de sectie het beeld
     uit loopt, anders staat de plaat van 03 naast de tekst van 04. */
  padding-bottom: clamp(0px, 6vw, 80px);
}

.groep {
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: clamp(16px, 2vw, 28px);
  row-gap: 10px;
  padding-top: 22px;
  border-top: 1px solid var(--line);
  /* Niet-actieve groepen zakken weg in plaats van te verdwijnen: je moet de
     hele lijst kunnen lezen, ook de groep waar je nog niet bent. */
  opacity: .48;
  transition: opacity 420ms var(--ease-state);
}
.groep.is-actief { opacity: 1; }

.groep__n {
  grid-row: 1 / span 3;
  font-family: var(--display);
  font-weight: 800;
  font-size: 13.5px;
  letter-spacing: .04em;
  color: var(--muted);
  padding-top: .55em;
  font-variant-numeric: tabular-nums;
  transition: color 420ms var(--ease-state);
}
.groep.is-actief .groep__n { color: var(--accent-deep); }

.groep__t {
  font-family: var(--display);
  font-weight: 800;
  font-size: clamp(28px, 3.6vw, 46px);
  line-height: 1.02;
  letter-spacing: -0.03em;
}
.groep__p {
  grid-column: 2;
  max-width: 48ch;
  color: var(--fg-2);
}
.groep__l {
  grid-column: 2;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 10px;
  list-style: none;
  margin-top: 4px;
}
.groep__l li {
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--muted);
  padding: 6px 12px;
  border: 1px solid var(--line);
  border-radius: 999px;
}

.groepen__beeld { position: sticky; top: 112px; }
.groepen__frame {
  position: relative;
  aspect-ratio: 4 / 5;
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--paper-2);
  box-shadow: var(--shadow-lg);
}
.groepen__frame picture { display: contents; }
.gplaat {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 620ms var(--ease-zon);
}
.gplaat.is-in { opacity: 1; }

/* Het bijschrift is de enige tekst op het beeld en zegt waar in de winkel je
   kijkt. Zonder dat is een foto van een schap een foto van een schap. */
.groepen__bij {
  position: absolute;
  left: 16px;
  bottom: 16px;
  right: 16px;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #fff;
  text-shadow: 0 1px 12px rgba(0, 0, 0, .78), 0 0 3px rgba(0, 0, 0, .6);
}

/* De merkenwand. Twee lijsten, de tweede is de tabaksfabrikanten en staat er
   met opzet los onder zodat hij in één handeling weg kan. */
.merken {
  margin-top: clamp(44px, 5vw, 72px);
  padding-top: 22px;
  border-top: 1px solid var(--line);
}
.merken__k {
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 16px;
}
.merken__l {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 26px;
  list-style: none;
}
.merken__l li {
  font-family: var(--display);
  font-weight: 800;
  font-size: clamp(16px, 1.7vw, 22px);
  letter-spacing: -0.01em;
  color: var(--fg-2);
}
.merken__l--tabak { margin-top: 14px; }
.merken__l--tabak li { color: var(--muted); }

@media (max-width: 900px) {
  .groepen { grid-template-columns: 1fr; }
  .groepen__beeld { position: static; order: -1; }
  .groepen__frame { aspect-ratio: 5 / 4; }
}

/* ── 04 Ook bij ons ───────────────────────────────────────────────────── */
.tiles {
  margin-top: clamp(40px, 5vw, 60px);
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(14px, 1.6vw, 22px);
}
/* Geen kaartjes. Vier staande beelden als een trap, tekst eronder op de kale
   ondergrond, en het volgnummer groot op het beeld zelf. Een rij van vier
   gelijke omrande blokjes was het braafste stuk van de pagina. */
.tile { position: relative; }
.tile:nth-child(even) { margin-top: clamp(24px, 4vw, 64px); }
.tile__img {
  position: relative;
  overflow: hidden;
  aspect-ratio: 4 / 5;
  border-radius: var(--r-lg);
  background: var(--paper-2);
}
/* De picture draagt de overmaat en de scroll-verschuiving, de img draagt de
   hover-schaal. Twee elementen, want GSAP schrijft een inline transform op wat
   het animeert en dat wint altijd van een hover-regel op hetzelfde element. */
.tile__img picture {
  position: relative;
  display: block;
  width: 100%;
  height: 118%;
  top: -9%;
}
.tile__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.02);
  transition: transform 620ms var(--ease-out);
}
.tile__idx {
  position: absolute;
  left: 16px;
  bottom: 12px;
  z-index: 2;
  font-family: var(--display);
  font-weight: 800;
  font-size: clamp(30px, 3.4vw, 46px);
  line-height: 1;
  letter-spacing: -0.04em;
  color: var(--on-ink-hi);
  font-variant-numeric: tabular-nums;
  mix-blend-mode: difference;
}
.tile__b { padding: 18px 2px 0; }
.tile__name {
  font-size: clamp(19px, 1.7vw, 23px);
  font-weight: 800;
  letter-spacing: -0.025em;
}
/* De haarlijn onder de naam groeit onder de aanwijzer uit naar de volle breedte:
   het enige wat er op hover gebeurt, en genoeg. */
.tile__name::after {
  content: '';
  display: block;
  height: 1px;
  margin-top: 12px;
  background: var(--line-2);
  transform: scaleX(.18);
  transform-origin: 0 50%;
  transition: transform 520ms var(--ease-out), background-color 320ms var(--ease-state);
}
.tile__desc {
  margin-top: 12px;
  font-size: 15px;
  color: var(--fg-2);
  max-width: 26ch;
}

/* ── 06 Reviews ───────────────────────────────────────────────────────────
   Het cijfer is het beeld van deze sectie, niet een klein getalletje boven drie
   omrande kaartjes. De quotes staan als drie kolommen op een haarlijn, elk op
   een eigen hoogte, met het aanhalingsteken groot als drukwerk. */
.rating {
  margin-top: clamp(32px, 4vw, 48px);
  display: flex;
  align-items: flex-end;
  gap: clamp(20px, 3vw, 40px);
  padding-bottom: clamp(24px, 3vw, 38px);
  border-bottom: 1px solid var(--line);
}
.rating__num {
  font-family: var(--display);
  font-weight: 900;
  font-size: clamp(84px, 13vw, 178px);
  letter-spacing: -0.055em;
  line-height: .8;
  font-variant-numeric: tabular-nums;
}
.rating__meta {
  display: grid;
  gap: 3px;
  padding-bottom: .12em;
  font-size: 14px;
  color: var(--fg-2);
}
.rating__lab {
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(17px, 1.7vw, 21px);
  letter-spacing: -0.02em;
  color: var(--fg);
}
.rating__cnt { color: var(--muted); }
.stars { color: var(--accent-deep); letter-spacing: .12em; font-size: 15px; }

.rcards {
  margin-top: clamp(34px, 4.5vw, 56px);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(24px, 3.4vw, 52px);
}
.rcard {
  position: relative;
  padding-top: 34px;
  border-top: 1px solid var(--line);
}
.rcard:nth-child(2) { margin-top: clamp(18px, 3vw, 46px); }
.rcard:nth-child(3) { margin-top: clamp(9px, 1.5vw, 23px); }
/* Het aanhalingsteken hoort bij de zetter, niet bij de zin. */
.rcard::before {
  content: '\201C';
  position: absolute;
  top: 4px;
  left: -2px;
  font-family: var(--display);
  font-weight: 900;
  font-size: 72px;
  line-height: 1;
  color: var(--accent);
  opacity: .22;
}
.rcard__stars { color: var(--accent-deep); letter-spacing: .12em; font-size: 13px; margin-left: auto; }
.rcard blockquote { margin: 0; }
.rcard blockquote p {
  font-family: var(--display);
  font-weight: 500;
  font-size: clamp(18px, 1.9vw, 23px);
  line-height: 1.38;
  letter-spacing: -0.02em;
  color: var(--fg);
  text-wrap: pretty;
}
.rcard figcaption {
  margin-top: 26px;
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 13.5px;
  color: var(--muted);
  line-height: 1.35;
}
.rcard__who { display: grid; }
.rcard__av {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--oak);
  color: var(--cta-ink);
  font-family: var(--display);
  font-weight: 800;
  font-size: 16px;
  flex: none;
  transition: background-color var(--t-state) var(--ease-state), color var(--t-state) var(--ease-state);
}
.rcard figcaption b { color: var(--fg); font-weight: 700; }
.rnote {
  margin-top: 18px;
  font-size: 13px;
  color: var(--muted);
}

/* ── 07 Image break ───────────────────────────────────────────────────── */
.ibreak {
  position: relative;
  margin-top: var(--gap-section);
  height: clamp(240px, 36vw, 460px);
  overflow: hidden;
}
.ibreak picture, .ibreak img {
  width: 100%;
  height: 118%;
  object-fit: cover;
}
.ibreak::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(27, 23, 21, 0) 38%, rgba(27, 23, 21, .62) 100%);
}
.ibreak__cap {
  position: absolute;
  left: 0;
  right: 0;
  bottom: clamp(22px, 4vw, 44px);
  z-index: 2;
  padding-inline: var(--pad);
  max-width: var(--maxw);
  margin-inline: auto;
}
.ibreak__lab {
  display: block;
  margin-bottom: 12px;
  font-family: var(--body);
  font-weight: 600;
  font-size: 12px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .74);
}
.ibreak__cap h2 {
  display: grid;
  font-size: clamp(26px, 4.2vw, 50px);
  font-weight: 800;
  letter-spacing: -0.025em;
  line-height: 1.04;
  max-width: 16ch;
  color: #fff;
  text-shadow: 0 2px 28px rgba(0, 0, 0, .45);
}

/* ── 08 Locatie ───────────────────────────────────────────────────────── */
.loc {
  margin-top: clamp(40px, 5vw, 60px);
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: clamp(28px, 4vw, 56px);
  align-items: stretch;
}
.loc__map { min-height: 340px; }
/* De kaart komt onder een oplopende rand vandaan in plaats van er te staan. */
.loc__mapin {
  height: 100%;
  border-radius: var(--r-lg);
  overflow: hidden;
  border: 1px solid var(--line);
  background: var(--paper-2);
}
.has-motion .loc__mapin { clip-path: inset(0 0 100% 0); }
.loc__map iframe { width: 100%; height: 100%; min-height: 340px; border: 0; }
.loc__info { display: grid; align-content: start; gap: 26px; }
.loc__item { padding-top: 18px; border-top: 1px solid var(--line); }
.loc__item h3 {
  font-family: var(--body);
  font-weight: 600;
  font-size: 12.5px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--muted);
}
.loc__item p { margin-top: 8px; color: var(--fg-2); }
.loc__item .big {
  font-family: var(--display);
  font-weight: 800;
  font-size: 26px;
  letter-spacing: -0.02em;
  color: var(--fg);
}
/* Het adres is de kop van deze sectie, de sectiekop zegt alleen "kom langs". */
.loc__item .huge {
  margin-top: 10px;
  font-family: var(--display);
  font-weight: 900;
  font-size: clamp(30px, 3.6vw, 50px);
  letter-spacing: -0.04em;
  line-height: .98;
  color: var(--fg);
}
.loc__info .btn { justify-self: start; }

/* ── 09 FAQ ───────────────────────────────────────────────────────────── */
.faq {
  display: grid;
  grid-template-columns: 0.82fr 1.18fr;
  gap: clamp(32px, 5vw, 64px);
}
/* De linkerkolom blijft staan terwijl de vragen erlangs lopen. Eén sticky
   moment op de pagina, hier, waar de lijst lang genoeg is om het te verdienen. */
.faq__intro {
  position: sticky;
  top: 110px;
  align-self: start;
}
.faq__intro .shead__title { margin-top: 16px; }
.faq__intro .shead__intro { min-width: 0; }
.faq__intro .btn { margin-top: 26px; }

.qa { border-top: 1px solid var(--line); }
.qa:last-child { border-bottom: 1px solid var(--line); }
.qa__q {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 24px 0;
  text-align: left;
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(17px, 1.6vw, 20px);
  letter-spacing: -0.015em;
  color: var(--fg);
  transition: color var(--t-state) var(--ease-state);
}
.qa__n {
  flex: none;
  font-family: var(--body);
  font-weight: 600;
  font-size: 12px;
  letter-spacing: .14em;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
  transition: color var(--t-state) var(--ease-state);
}
.qa__txt { flex: 1 1 auto; }
.qa.is-open .qa__n { color: var(--accent-deep); }
/* De open vraag springt een stukje naar binnen, zodat de lijst laat zien waar
   je bent zonder dat er een balk of een kleurvlak aan te pas komt. Verschoven
   met transform, niet met padding, want dat laatste is een layout-animatie. */
.qa__q, .qa__in p { transition: transform 380ms var(--ease-out), color var(--t-state) var(--ease-state); }
.qa.is-open .qa__q, .qa.is-open .qa__in p { transform: translateX(14px); }

.qa__ic {
  position: relative;
  width: 20px;
  height: 20px;
  flex: none;
}
.qa__ic::before, .qa__ic::after {
  content: '';
  position: absolute;
  background: var(--accent-deep);
  transition: transform 300ms var(--ease-state), opacity 200ms linear;
}
.qa__ic::before { left: 0; top: 9.5px; width: 20px; height: 1.5px; }
.qa__ic::after { left: 9.5px; top: 0; width: 1.5px; height: 20px; }
.qa.is-open .qa__ic::after { transform: scaleY(0); opacity: 0; }

.qa__wrap {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 380ms var(--ease-out);
}
.qa.is-open .qa__wrap { grid-template-rows: 1fr; }
.qa__in { overflow: hidden; }
.qa__in p {
  padding-bottom: 26px;
  color: var(--fg-2);
  max-width: 62ch;
}

/* ── 10 CTA ───────────────────────────────────────────────────────────── */
.cta__panel {
  background-color: var(--oak);
  background-image: var(--oak-tex);
  border: 1px solid #bfa382;
  border-radius: var(--r-xl);
  padding: clamp(40px, 6vw, 84px);
  text-align: center;
}
.cta__panel .eyebrow { color: #6b4a2f; }
.cta__panel .eyebrow__n { color: #4a3323; }
.cta__title {
  margin-top: 18px;
  font-size: clamp(34px, 5.4vw, 72px);
  color: var(--cta-ink);
  max-width: 18ch;
  margin-inline: auto;
}
/* Geen slogan maar een aflezing. Zolang je hier staat loopt hij door. */
.cta__num {
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  text-decoration: underline;
  text-decoration-thickness: .055em;
  text-underline-offset: .1em;
  text-decoration-color: rgba(46, 25, 12, .34);
}
.cta__p {
  margin: 20px auto 0;
  max-width: 46ch;
  color: #4a3323;
}
.cta__panel .btn { margin-top: 30px; }

/* ── 11 Footer ────────────────────────────────────────────────────────── */
.footer {
  position: relative;
  margin-top: var(--gap-section);
  background: var(--ink);
  color: var(--footer-fg);
  border-radius: var(--r-xl) var(--r-xl) 0 0;
  padding: clamp(48px, 6vw, 76px) 0 0;
  overflow: hidden;
}
.footer__cta {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 32px;
  flex-wrap: wrap;
  padding-bottom: clamp(40px, 5vw, 60px);
  border-bottom: 1px solid rgba(255, 255, 255, .1);
}
.footer__big {
  font-family: var(--display);
  font-weight: 900;
  font-size: clamp(40px, 7vw, 96px);
  letter-spacing: -0.035em;
  line-height: .92;
  color: var(--on-ink-hi);
}
.footer__grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1.2fr;
  gap: 40px;
  padding-top: clamp(40px, 5vw, 56px);
}
.footer__brand p {
  max-width: 34ch;
  font-size: 15px;
  color: var(--on-ink-lo);
}
.footer__brand .pill { margin-top: 20px; }
.footer__grid h2 {
  font-family: var(--body);
  font-weight: 600;
  font-size: 12.5px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--on-ink-lo);
}
.footer__grid ul {
  margin-top: 16px;
  display: grid;
  gap: 9px;
  font-size: 15px;
}
.footer__grid ul a { transition: color var(--t-state) var(--ease-state); }

/* Een vinger is geen muis. Op touch krijgen de voetlinks en het merk in de nav
   een echt raakvlak van 40px, gemeten met .scratch-mobile.mjs op 390: de links
   stonden op 20px hoog. De gap wordt met evenveel teruggenomen zodat het ritme
   van de kolom hetzelfde blijft als op desktop. */
@media (pointer: coarse) {
  /* De dagrijen zijn knoppen, dus ze moeten met een vinger te raken zijn.
     Gemeten op 390: 36px hoog, onder de 40 die een raakvlak nodig heeft. */
  .srow { padding: 11px 0; }
  .footer__grid ul { gap: 0; }
  .footer__grid ul li { padding: 4px 0; }
  /* Block, niet inline-block: inline-block maakt de link zo breed als zijn
     woord, en "Home" is 39px. In een kolomlijst hoort de hele regel te werken
     en niet alleen de vier letters. */
  .footer__grid ul a { display: block; padding: 10px 0; margin: -6px 0; }
  .nav__brand { padding: 6px 0; }
}
.footer__bottom {
  margin-top: clamp(40px, 5vw, 56px);
  padding-top: 22px;
  border-top: 1px solid rgba(255, 255, 255, .1);
  display: flex;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  font-size: 13.5px;
  color: var(--on-ink-lo);
}

/* Het merk op ware grootte, van rand tot rand, half onder de onderkant weg.
   Dit is de enige plek waar de display-snede van New York doet waarvoor hij
   getekend is, en de enige plek waar de naam groot mag staan. */
.footer__mark {
  margin-top: clamp(30px, 4.4vw, 52px);
  padding: 0 var(--pad) clamp(18px, 2.4vw, 30px);
  overflow: hidden;
}
/* Hij komt van onderaf omhoog terwijl de footer in beeld schuift, en staat er
   helemaal op het moment dat je de bodem raakt. Tot ronde 6 was de onderste
   helft afgesneden en stond hij op 12 procent, wat leest als een fout. */
.footer__markin { opacity: .3; }
/* De ruststand hoort alleen te bestaan als de beweging ook echt draait, anders
   staat het merk bij een gemiste GSAP voor altijd half onder de rand. */
.has-motion .footer__markin { transform: translateY(46%); }
.footer__mark img {
  display: block;
  width: 100%;
  max-width: none;
  height: auto;
}

/* ══════════════════════════════════════════════════════════════════════════
   Subpagina's, over-ons.html en contact.html
   Zelfde taal als de home: dezelfde knop, dezelfde reveal, dezelfde footer.
   Alleen wat hier echt anders is staat hieronder.
   ══════════════════════════════════════════════════════════════════════════ */
.subhero {
  padding-top: clamp(44px, 6vw, 86px);
}
.subhero__grid {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: clamp(28px, 5vw, 72px);
  align-items: end;
}
.subhero__title {
  display: grid;
  margin-top: 22px;
  font-size: clamp(52px, 9.4vw, 132px);
  font-weight: 900;
  letter-spacing: -0.045em;
  line-height: .9;
}
.subhero__lead {
  font-size: clamp(17px, 1.5vw, 20px);
  line-height: 1.6;
  color: var(--fg-2);
  max-width: 34ch;
  padding-bottom: .5em;
}

/* Het pand, één beeld over de volle breedte met het bijschrift ernaast in
   plaats van eroverheen. Tekst op een foto is de goedkoopste oplossing. */
.pand { margin: 0; }
.pand__frame {
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: var(--r-xl);
  background: var(--paper-2);
}
.pand__frame picture {
  position: relative;
  display: block;
  width: 100%;
  height: 120%;
  top: -10%;
}
.pand__frame img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 32%; }
.pand__cap {
  display: flex;
  gap: clamp(16px, 3vw, 42px);
  align-items: baseline;
  margin-top: 20px;
  padding-top: 18px;
  border-top: 1px solid var(--line);
}
.pand__lab {
  flex: none;
  font-weight: 600;
  font-size: 12.5px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--accent-deep);
}
.pand__t {
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(18px, 2.1vw, 27px);
  letter-spacing: -0.025em;
  line-height: 1.2;
  max-width: 34ch;
}

.story {
  display: grid;
  grid-template-columns: 0.86fr 1.14fr;
  gap: clamp(28px, 5vw, 72px);
}
.story__lead {
  position: sticky;
  top: 110px;
  align-self: start;
  font-family: var(--display);
  font-weight: 800;
  font-size: clamp(22px, 2.8vw, 36px);
  letter-spacing: -0.03em;
  line-height: 1.14;
  color: var(--fg);
  text-wrap: balance;
}
.story__body { font-size: 17px; line-height: 1.7; color: var(--fg-2); max-width: 58ch; }
.story__body p + p { margin-top: 18px; }
.story__body strong { color: var(--fg); font-weight: 600; }

.vals {
  margin-top: clamp(40px, 5vw, 60px);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(24px, 3.4vw, 52px);
}
.val { padding-top: 22px; border-top: 1px solid var(--line); }
.val__n {
  font-family: var(--display);
  font-weight: 900;
  font-size: clamp(30px, 3.4vw, 46px);
  line-height: 1;
  letter-spacing: -0.04em;
  /* #cec6bc haalde 1.58:1 op papier, ver onder de 3:1 die voor grote tekst
     geldt. #8a8078 meet 3.61:1 en is visueel hetzelfde zachte grijs. */
  color: #8a8078;
  font-variant-numeric: tabular-nums;
}
.val__t { margin-top: 16px; font-size: clamp(19px, 1.7vw, 23px); font-weight: 800; letter-spacing: -0.025em; }
.val__p { margin-top: 10px; font-size: 15.5px; color: var(--fg-2); max-width: 30ch; }

.statband {
  background: var(--ink);
  color: var(--on-ink);
  border-radius: var(--r-xl);
  padding: clamp(36px, 5.4vw, 76px);
}
.statband__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(24px, 4vw, 52px);
}
.stat { display: grid; gap: 12px; }
.stat__big {
  font-family: var(--display);
  font-weight: 900;
  font-size: clamp(52px, 7.6vw, 104px);
  letter-spacing: -0.05em;
  line-height: .9;
  color: var(--on-ink-hi);
  font-variant-numeric: tabular-nums;
}
.stat__l { font-size: 15px; color: var(--on-ink-lo); max-width: 24ch; }

/* Contact */
.ctc {
  display: grid;
  grid-template-columns: 0.92fr 1.08fr;
  gap: clamp(30px, 4.6vw, 68px);
  align-items: start;
}
.ctc__info { display: grid; gap: clamp(24px, 3vw, 38px); }
.crow { padding-top: 18px; border-top: 1px solid var(--line); }
.crow__k {
  font-weight: 600;
  font-size: 12.5px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--muted);
}
.crow__v {
  margin-top: 10px;
  font-family: var(--display);
  font-weight: 900;
  font-size: clamp(26px, 3.1vw, 42px);
  letter-spacing: -0.04em;
  line-height: 1;
  color: var(--fg);
}
/* Een placeholder mag niet lezen als een echt gegeven. */
.crow__v--demo { color: var(--muted); font-weight: 700; font-size: clamp(20px, 2.2vw, 27px); }
.crow__s { margin-top: 10px; font-size: 15px; color: var(--fg-2); max-width: 42ch; }
.crow .btn { margin-top: 18px; }

.form {
  padding: clamp(26px, 3.4vw, 44px);
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-sm);
}
.form__t { font-size: clamp(22px, 2.4vw, 30px); font-weight: 800; letter-spacing: -0.03em; }
.form__s { margin-top: 10px; font-size: 15.5px; color: var(--fg-2); }
.form form { margin-top: 26px; display: grid; gap: 18px; }
.form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.field { display: grid; gap: 8px; }
.field label {
  font-weight: 600;
  font-size: 12.5px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--muted);
}
.field input, .field textarea {
  width: 100%;
  padding: 13px 15px;
  font: inherit;
  font-size: 16px;
  color: var(--fg);
  background: var(--paper);
  border: 1px solid var(--line-2);
  border-radius: var(--r-md);
  transition: border-color var(--t-state) var(--ease-state), background-color var(--t-state) var(--ease-state);
}
.field textarea { resize: vertical; min-height: 120px; line-height: 1.55; }
.field input::placeholder, .field textarea::placeholder { color: #8a8078; }
.field input:focus, .field textarea:focus { outline: none; border-color: var(--accent-deep); background: var(--card); }
.field.is-bad input, .field.is-bad textarea { border-color: #a33; }
.form form .btn { justify-self: start; }
.form__note { font-size: 13px; color: var(--muted); }
.form__done h3 { font-size: clamp(22px, 2.4vw, 30px); font-weight: 800; letter-spacing: -0.03em; }
.form__done p { margin-top: 12px; color: var(--fg-2); max-width: 46ch; }
.form__done strong { color: var(--fg); font-weight: 700; }

.ctc__map { min-height: 380px; }
.ctc__map .loc__mapin { min-height: 380px; }
.ctc__map iframe { width: 100%; height: 100%; min-height: 380px; border: 0; }

/* ── Reveal rest state, only when motion will actually run ────────────── */
.has-motion [data-reveal],
.has-motion [data-reveal-stagger] > * { opacity: 0; }

/* ── Breakpoints ──────────────────────────────────────────────────────── */
@media (max-width: 1024px) {
  .hero__grid { gap: 32px; }
  .hours__grid { grid-template-columns: 1fr; }
  .strook, .klok { margin-top: 40px; }
  .tiles { grid-template-columns: repeat(2, 1fr); }
  .story { grid-template-columns: 1fr; }
  .story__lead { position: static; }
  .ctc { grid-template-columns: 1fr; }
  .faq { grid-template-columns: 1fr; }
  /* Sticky hoort bij twee kolommen. Gestapeld blijft de intro staan terwijl de
     lijst er overheen loopt, wat de probe op 1024 terecht als afdekking meldde. */
  .faq__intro { position: static; }
  .footer__grid { grid-template-columns: 1.4fr 1fr 1fr; }
  .footer__brand { grid-column: 1 / -1; }
}

@media (max-width: 860px) {
  .nav__links { display: none; }
  .burger { display: block; }
  .nav__word { width: 150px; }
  .reasons { grid-template-columns: 1fr; }
  /* De trap en de versprongen quotes horen bij meerdere kolommen. Gestapeld
     zijn het gewoon ongelijke gaten. */
  .rcards { grid-template-columns: 1fr; }
  .rcard:nth-child(2), .rcard:nth-child(3) { margin-top: 0; }
  .loc { grid-template-columns: 1fr; }
  .subhero__grid { grid-template-columns: 1fr; gap: 22px; align-items: start; }
  .subhero__lead { max-width: 46ch; padding-bottom: 0; }
  .vals { grid-template-columns: 1fr; gap: 24px; }
  .statband__grid { grid-template-columns: 1fr; gap: 30px; }
  .shead__intro { min-width: 0; }
}

/* De hero stapelt op 1200 en niet op 720. Naast elkaar bepaalt de kop de
   linkerkolom en krijgt de gevel wat overblijft, en dat is uit te rekenen:
   0.435 maal de schermbreedte min de marges min de goot. Op 1280 is dat 394px,
   op 1200 nog 362, en daaronder is de gevel smaller dan de kop hoog is, wat
   leest als een plaatje dat ergens tussen geschoven is. Gestapeld staat hij
   boven de tekst op 560, wat op deze breedtes de rustigere van de twee is. */
@media (max-width: 1200px) {
  .hero__grid { grid-template-columns: 1fr; }
  .hero__media { order: -1; max-width: 560px; margin-left: 0; }
}

@media (max-width: 720px) {
  .hero { padding-top: 28px; }
  .hero__media { max-width: none; }
  .hero__stamp { padding: 12px 16px; }
  .hero__stamp b { font-size: 30px; }
  .hero__title { margin-top: 18px; }
  /* De uren rechts vallen weg; op deze breedte is de balk zelf de aflezing en
     staat de tijd al in de kop erboven. De goten krimpen mee zodat de
     nu-streep boven de baan blijft staan. */
  .strook { --gl: 38px; --gg: 12px; --gr: 0px; --rin: 0px; }
  .srow { grid-template-columns: var(--gl) 1fr; }
  .srow__h { display: none; }
  .loc__map, .loc__map iframe { min-height: 260px; }
  .footer__grid { grid-template-columns: 1fr 1fr; }
  .footer__cta { align-items: flex-start; flex-direction: column; }
  .pand__frame { aspect-ratio: 4 / 3; }
  .pand__cap { flex-direction: column; gap: 10px; }
  .form__row { grid-template-columns: 1fr; }
}

@media (max-width: 560px) {
  .tiles { grid-template-columns: 1fr; }
  .tile:nth-child(even) { margin-top: 0; }
  .tile__img { aspect-ratio: 16 / 11; }
  .tile__desc { max-width: none; }
}

@media (max-width: 420px) {
  .strook__scale span:nth-child(2), .strook__scale span:nth-child(4) { display: none; }
  .strook__scale { grid-template-columns: repeat(3, 1fr); }
}

/* ── Hover, only where a pointer exists ───────────────────────────────────
   Most visitors to a shop site arrive on a phone, where :hover either does
   nothing or sticks after a tap. Every hover state lives here; the resting
   and :focus-visible states above carry the page on their own. */
@media (hover: hover) and (pointer: fine) {
  .pill:hover { border-color: var(--line-2); color: var(--fg); }

  /* De hele hover is één declaratie. Vier lagen lezen dezelfde schaal. */
  .btn:hover { --fill: 1; }
  .btn--ghost:hover { border-color: var(--ink); }
  .sluis__btns .btn--ghost:hover { border-color: var(--on-ink-hi); }

  .nav__links a:hover { color: var(--fg); }
  .nav__links a:hover::after { transform: scaleX(1); }

  .tile:hover .tile__img img { transform: scale(1.07); }
  .tile:hover .tile__name::after { transform: scaleX(1); background: var(--accent-deep); }

  .rcard:hover .rcard__av { background: var(--accent-deep); color: var(--on-accent); }

  .qa__q:hover { color: var(--accent-deep); }
  .qa__q:hover .qa__n { color: var(--accent-deep); }
  .footer__grid ul a:hover { color: var(--on-ink-hi); }
}

/* ── Reduced motion ───────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
  .sluis__disc { opacity: 1; }
  .sluis__i { fill: var(--ink); stroke: none; }
  .sluis__ask > * { opacity: 1; }
  .sluis__clock { opacity: 1; }
  [data-reveal], [data-reveal-stagger] > * { opacity: 1 !important; }
  .tile__name::after { transform: scaleX(1); }
  .footer__markin { transform: none; }
}