/* Homepage-stijl (6 okt 2026): tokens, menu en footer van /test/ai-suite3, 1-op-1 overgenomen uit bron/ai-suite3/.
   Niet los bewerken: aanpassingen voor de suitepagina staan in styles.css (onderaan, sectie 'Homepage-stijl').
   Volgorde: basis-tokens.css, nav.css, footer.css. faq.css is vertaald naar de .dag-faq__-klassen in styles.css. */

/* ═══ basis-tokens.css ═══ */
/* /test/ai-suite3 · gedeelde basis voor de nabouw van de referentiesite.
   Alles hangt onder .ls (de pagina-wrapper) of html.ls-page, zodat niets hiervan
   de rest van de site raakt. Waarden komen uit stylesheet van de referentie, omgerekend naar
   px (De referentie rekent met 1rem = 10px; wij laten de html-fontgrootte van de site staan).
   Breakpoints zoals de referentie: mobiel < 1024, tablet ≥ 1024, desktop ≥ 1280,
   desktopLarge ≥ 1440 (mobile-first, alleen min-width-queries). */

/* ─── Pagina ──────────────────────────────────────────────────────────── */

/* html.ls-page zet de pagina-component zolang /test/ai-suite3 open staat. */
html.ls-page,
html.ls-page body {
  background-color: #f9f8f5;
  overscroll-behavior-y: none;
  overflow-x: clip;
}
html.ls-page {
  color-scheme: light;
  -webkit-tap-highlight-color: transparent;
}

.ls {
  /* Kleurrollen (referentie-token → Hyperr). Merkaccent: blauw/oranje van de referentie → paars. */
  --ls-bg: #f9f8f5;              /* background-primary */
  --ls-bg-2: #ffffff;            /* background-secondary: footer, eind CTA-verloop */
  --ls-bg-3: #dbd4fb;            /* background-tertiary (De referentie #c3eaf4): FAQ-tegel bij focus, footer-verloop */
  --ls-ink: #120c08;             /* text-primary */
  --ls-ink-2: #666666;           /* text-secondary */
  --ls-ink-3: #999999;           /* geen referentie-rol op de homepage; alleen voor schermpjes */
  --ls-ink-disabled: #766f6f;    /* text-disabled */
  --ls-ink-black: #000000;       /* tekst zonder kleurklasse bij de referentie */
  --ls-white: #ffffff;           /* text-white / invert-primary */
  --ls-white-2: rgba(255, 255, 255, 0.6); /* text-invert-secondary */
  --ls-white-3: rgba(255, 255, 255, 0.4); /* text-invert-disabled */
  --ls-brand: #4b28ed;           /* text-brand / button-tertiary-accent (De referentie #259bc6 / #ff740a) */
  --ls-brand-deep: #3100d1;      /* button-tertiary-accent-hover */
  --ls-brand-soft: #efebff;      /* text-select-bg / surface-blue */
  --ls-purple: #4b28ed;
  --ls-purple-soft: #efebff;
  --ls-mint: #39d899;            /* alleen als vlak/stip, nooit als tekst op wit */
  --ls-success: #46a758;         /* text-success */
  --ls-success-soft: #e1eddf;
  --ls-green: #46a758;
  --ls-green-soft: #e1eddf;
  --ls-error: #e5484d;
  --ls-surface: #ffffff;         /* surface-primary / card-primary */
  --ls-surface-2: #f9f8f5;       /* surface-secondary */
  --ls-surface-3: #120c08;       /* surface-tertiary / button-primary (donker) */
  --ls-surface-4: #ede8de;       /* surface-quaternary */
  --ls-stone: #f3f0e9;           /* surface-card-stone / stroke-stone-primary */
  --ls-stone-2: #d8d1c0;         /* stroke-stone-secondary */
  --ls-stone-3: #e3ddcf;         /* stone-500 */
  --ls-pressed: #473d37;         /* surface-pressed (alleen nav-items) */
  --ls-panel: #f3f0e9;           /* vlakken in de schermpjes */
  --ls-row: #f9f8f5;
  --ls-line: #ede8de;
  --ls-line-2: #d8d1c0;
  --ls-glass: rgba(227, 221, 207, 0.2);       /* .bg-blur (e-mailveld) */
  --ls-glass-nav: rgba(227, 221, 207, 0.4);   /* stone-alpha-400 (nav-frame) */
  --ls-glass-floating: rgba(227, 221, 207, 0.3);
  --ls-glass-line: rgba(255, 255, 255, 0.1);  /* stroke-white-alpha-primary */
  --ls-glass-line-2: rgba(255, 255, 255, 0.3);
  --ls-disabled-white: rgba(255, 255, 255, 0.5);
  --ls-disabled-black: #e5e5e5;
  --ls-focus: #4b28ed;                        /* stroke-focus (De referentie #42b5dc) */
  --ls-ring: 0 0 0 3px rgba(75, 40, 237, 0.3);
  --ls-shadow: 0 4px 20px rgba(18, 12, 8, 0.06); /* bestaat bij de referentie, niet op de homepage */

  /* Radius en motion */
  --ls-r-button: 12px;           /* rounded-ctas-button */
  --ls-r-wrapper: 16px;          /* rounded-ctas-wrapper, e-mailveld */
  --ls-ease-default: cubic-bezier(0.4, 0, 0.2, 1);   /* Tailwind default, 150ms */
  --ls-ease-out: cubic-bezier(0, 0, 0.2, 1);
  --ls-ease-out-quint: cubic-bezier(0.22, 1, 0.36, 1);
  --ls-ease-expo-out: cubic-bezier(0.16, 1, 0.3, 1);  /* benadering van GSAP expo.out */
  --ls-ease-power4-out: cubic-bezier(0.23, 1, 0.32, 1); /* benadering van GSAP power4.out */

  --ls-font: "Manrope", system-ui, sans-serif;

  background-color: var(--ls-bg);
  color: var(--ls-ink-black);
  font-family: var(--ls-font);
  /* Vangnet voor tekst zonder ls-*-klasse (= body-md). Regelhoogte unitless, zoals de referentie. */
  font-size: 14px;
  line-height: 1.5;
  letter-spacing: normal;
  overflow-x: clip;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
@media (min-width: 1024px) { .ls { font-size: 16px; } }
@media (min-width: 1440px) { .ls { font-size: 17px; } }

/* Hoofdwrapper (<main>): van de referentie ligt boven de vaste onthullingslaag van de footer. */
.ls-main {
  position: relative;
  z-index: 1;
  background-color: var(--ls-bg);
}

/* ─── Basis-reset (preflight van de referentie, lage specificiteit) ──────────────── */

.ls *, .ls *::before, .ls *::after { box-sizing: border-box; }
/* index.css zet elke rand standaard lavendel; de referentie: currentColor. */
.ls :where(*) { border-color: currentColor; }
.ls :where(h1, h2, h3, h4, h5, h6, p, figure, blockquote, dl, dd) { margin: 0; }
/* index.css forceert op h1 t/m h4 gewicht 800, -0.03em en lh 1.05 (met !important) en
   een eigen kleur. Hier terug naar overerven; de ls-heading/ls-body-klassen
   hieronder winnen weer (die zijn .ls .x + !important). */
.ls :where(h1, h2, h3, h4, h5, h6) {
  color: inherit;
  font-size: inherit;
  font-weight: inherit !important;
  letter-spacing: inherit !important;
  line-height: inherit !important;
}
.ls :where(h1, h2, h3, h4, h5, h6, p) { text-wrap: wrap; }
.ls :where(a) { color: inherit; text-decoration: inherit; }
.ls :where(button, input, select, textarea) {
  font: inherit;
  letter-spacing: inherit;
  color: inherit;
  background-color: transparent;
  border-radius: 0;
}
.ls :where(button) { cursor: pointer; }
.ls :where(input, textarea)::placeholder { opacity: 1; color: color-mix(in oklab, currentColor 50%, transparent); }
.ls :where(img, video) {
  -webkit-user-select: none;
  user-select: none;
  -webkit-user-drag: none;
}

.ls ::selection, .ls::selection { background-color: var(--ls-bg-3); }

/* ─── Typografie ────────────────────────────────────────────────────────────
   groottes van de referentie en breakpoints (00-global §3.3), maar gewicht, spatiëring en
   regelhoogte afgestemd op Manrope: breder en met een grotere x-hoogte dan die van de referentie
   dunne serif. Grote koppen daarom strakker gespatieerd en iets steviger (400), lopende
   tekst met meer regelhoogte. .ls .x (0,2,0) + !important op gewicht, regelhoogte en
   spatiëring, zodat de klassen ook op h1 t/m h4 werken. Eigen overrides daarom ook als
   .ls .x { … !important }. */

.ls :is(.ls-heading-xl, .ls-heading-lg, .ls-heading-md, .ls-heading-sm, .ls-heading-xs) { font-family: var(--ls-font); }

.ls .ls-heading-xl { font-size: clamp(50px, 12.69vw, 64px); line-height: 1 !important;    letter-spacing: -0.04em !important;  font-weight: 400 !important; }
.ls .ls-heading-lg { font-size: clamp(36px, 9.13vw, 40px);  line-height: 1.06 !important; letter-spacing: -0.035em !important; font-weight: 400 !important; }
.ls .ls-heading-md { font-size: clamp(24px, 6.09vw, 32px);  line-height: 1.15 !important; letter-spacing: -0.025em !important; font-weight: 450 !important; }
.ls .ls-heading-sm { font-size: clamp(21px, 5.33vw, 28px);  line-height: 1.2 !important;  letter-spacing: -0.02em !important;  font-weight: 450 !important; }
.ls .ls-heading-xs { font-size: clamp(16px, 4.06vw, 17px);  line-height: 1.3 !important;  letter-spacing: -0.01em !important;  font-weight: 500 !important; }
@media (min-width: 1024px) {
  .ls .ls-heading-xl { font-size: clamp(74px, 7.22vw, 76.9px); }
  .ls .ls-heading-lg { font-size: clamp(56px, 5.46vw, 66px); }
  .ls .ls-heading-md { font-size: clamp(32px, 3.1vw, 42px); }
  .ls .ls-heading-sm { font-size: clamp(28px, 2.73vw, 30px); }
  .ls .ls-heading-xs { font-size: clamp(17px, 1.66vw, 19px); }
}
@media (min-width: 1280px) {
  .ls .ls-heading-xl { font-size: clamp(76.9px, 6.01vw, 104px); }
  .ls .ls-heading-lg { font-size: clamp(51.8px, 4.05vw, 70px); }
  .ls .ls-heading-md { font-size: clamp(29.6px, 2.31vw, 40px); }
  .ls .ls-heading-sm { font-size: clamp(22.2px, 1.73vw, 30px); }
  .ls .ls-heading-xs { font-size: 19px; }
}
/* Manrope heeft geen cursief: de browser maakt een schuine variant. */
.ls .ls-italic { font-style: italic; }
.ls .ls-balance { text-wrap: balance; }

/* Lopende tekst: regelhoogte als factor, zodat hij met de grootte meeschaalt. */
.ls .ls-body-lg { font-size: 16px; line-height: 1.4 !important;  letter-spacing: -0.005em !important; font-weight: 400 !important; }
.ls .ls-body-md { font-size: 14px; line-height: 1.5 !important;  letter-spacing: 0 !important;        font-weight: 400 !important; }
.ls .ls-body-sm { font-size: 13px; line-height: 1.45 !important; letter-spacing: 0 !important;        font-weight: 400 !important; }
.ls .ls-nav     { font-size: 14px; line-height: 1 !important;    letter-spacing: -0.005em !important; font-weight: 500 !important; }
/* dmMono-rollen: Manrope 500 met gelijke cijferbreedte. */
.ls .ls-mono-button   { font-size: 13px; line-height: 1 !important;    letter-spacing: 0 !important; font-weight: 500 !important; font-variant-numeric: tabular-nums; }
.ls .ls-mono-label-lg { font-size: 12px; line-height: 1.15 !important; letter-spacing: 0 !important; font-weight: 500 !important; font-variant-numeric: tabular-nums; }
.ls .ls-mono-label-sm { font-size: 10px; line-height: 1.2 !important;  letter-spacing: 0 !important; font-weight: 500 !important; font-variant-numeric: tabular-nums; }
@media (min-width: 1024px) {
  .ls .ls-body-lg { font-size: 18px; }
  .ls .ls-body-md { font-size: 16px; }
  .ls .ls-body-sm { font-size: 14px; }
  .ls .ls-mono-button { font-size: 14px; }
}
@media (min-width: 1280px) {
  .ls .ls-body-lg { font-size: 20px; }
  .ls .ls-body-sm { font-size: 15px; }
  .ls .ls-mono-label-lg { font-size: 14px; }
}
@media (min-width: 1440px) {
  .ls .ls-body-md { font-size: 17px; }
}

.ls .ls-text-primary { color: var(--ls-ink); }
.ls .ls-text-secondary { color: var(--ls-ink-2); }
.ls .ls-text-white { color: var(--ls-white); }

.ls-sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* Focusring zoals de referentie (2px rand + 3px ring). Element heeft zelf een 2px
   transparante rand nodig; geen outline. */
.ls-ring { outline: none; }
.ls-ring:focus-visible { border-color: var(--ls-focus); box-shadow: var(--ls-ring); }

/* ─── Knop (ButtonPrimary van de referentie) ─────────────────────────────────────────
   <a|button class="ls-btn ls-btn--secondary">
     <span class="ls-btn__label">Tekst</span>
     <span class="ls-btn__icon" aria-hidden="true"><svg/></span>   ← optioneel
   </a|button>
   Thema's: --primary wit/#120c08 · --secondary #120c08/wit · --tertiary paars/wit
   (aliassen --light / --dark / --brand). --invert = hover-invert van het label; alleen
   zetten zonder icoontegel (of met --icon-visible). Geen :active-stijl: die vuurt
   bij de referentie nooit. Hover alleen onder (hover: hover). */

.ls-btn {
  position: relative;
  isolation: isolate;
  display: inline-flex;
  height: 40px;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  outline: none;
  text-decoration: none;
  white-space: nowrap;
  font-family: var(--ls-font);
  font-size: 13px;
  line-height: 18px;
  letter-spacing: 0.005em;
  font-weight: 400;
}
@media (min-width: 1024px) { .ls-btn { height: 42px; font-size: 14px; line-height: 20px; } }
@media (min-width: 1280px) { .ls-btn { font-size: 15px; } }

.ls-btn__label {
  z-index: 10;
  display: flex;
  width: 100%;
  align-items: center;
  padding: 0 14px;
  border: 2px solid transparent;
  border-radius: var(--ls-r-button);
  transition-property: color, background-color, border-color;
  transition-duration: 0.15s;
  transition-timing-function: var(--ls-ease-default);
}
.ls-btn__icon {
  z-index: 0;
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 40px;
  border-radius: var(--ls-r-button);
  transition: margin 0.15s var(--ls-ease-default);
}
.ls-btn__icon svg { display: block; width: 20px; height: 20px; }
@media (min-width: 1024px) { .ls-btn__icon { height: 42px; } }
/* De tegel schuift alleen met een muis onder het label; op touch staat hij er altijd.
   Weggeschoven is hij iets kleiner, anders tekent zijn rand dubbel langs de hoeken van het label. */
@media (hover: hover) {
  .ls-btn__icon {
    margin-left: -36px;
    clip-path: inset(2px round var(--ls-r-button));
    transition: margin 0.15s var(--ls-ease-default), clip-path 0.15s var(--ls-ease-default);
  }
  .ls-btn:hover .ls-btn__icon { margin-left: 0; clip-path: inset(0 round var(--ls-r-button)); }
}
.ls-btn--icon-visible .ls-btn__icon {
  margin-left: 0;
  clip-path: none;
  transition-property: color, background-color, border-color;
}

.ls-btn:is(.ls-btn--primary, .ls-btn--light) :is(.ls-btn__label, .ls-btn__icon) { background-color: #fff; color: #120c08; }
.ls-btn:is(.ls-btn--secondary, .ls-btn--dark) :is(.ls-btn__label, .ls-btn__icon) { background-color: #120c08; color: #fff; }
.ls-btn:is(.ls-btn--tertiary, .ls-btn--brand) :is(.ls-btn__label, .ls-btn__icon) { background-color: var(--ls-brand); color: #fff; }

@media (hover: hover) {
  .ls-btn--invert:is(.ls-btn--primary, .ls-btn--light, .ls-btn--tertiary, .ls-btn--brand):hover .ls-btn__label,
  .ls-btn--icon-visible:is(.ls-btn--primary, .ls-btn--light, .ls-btn--tertiary, .ls-btn--brand):hover .ls-btn__icon {
    background-color: #120c08; color: #fff;
  }
  .ls-btn--invert:is(.ls-btn--secondary, .ls-btn--dark):hover .ls-btn__label,
  .ls-btn--icon-visible:is(.ls-btn--secondary, .ls-btn--dark):hover .ls-btn__icon {
    background-color: #ede8de; color: #120c08;
  }
}

/* Na de hover-regels, zodat disabled wint. De referentie houdt cursor:pointer. */
.ls-btn.ls-btn:disabled .ls-btn__label { background-color: var(--ls-disabled-white); color: var(--ls-ink-2); }
.ls-btn.ls-btn:is(.ls-btn--secondary, .ls-btn--dark):disabled .ls-btn__label { background-color: var(--ls-disabled-black); }

.ls-btn:focus-visible .ls-btn__label { border-color: var(--ls-focus); box-shadow: var(--ls-ring); }
.ls-btn:focus-visible .ls-btn__icon { margin-left: 0; clip-path: none; border: 2px solid var(--ls-focus); box-shadow: var(--ls-ring); }

.ls-btn--full { width: 100%; }
.ls-btn--full .ls-btn__label { justify-content: center; }

/* ─── Glazen e-mailveld (SignUp van de referentie: .bg-blur) ─────────────────────── */

.ls-pill {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0;
  width: 275px;
  max-width: 100%;
  height: 56px;
  padding: 6px;
  border: 1px solid var(--ls-glass-line);
  border-radius: var(--ls-r-wrapper);
  background-color: var(--ls-glass);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  transition: width 0.3s var(--ls-ease-out);
}
/* Breder zodra er tekst in staat; op ≥1024 ook bij focus. */
.ls-pill:is(.is-filled, .has-value) { width: 330px; }
@media (min-width: 1024px) {
  .ls-pill:focus-within,
  .ls-pill:is(.is-filled, .has-value) { width: 360px; }
}
.ls-pill input {
  flex: 1 1 0%;
  width: 100%;
  min-width: 0;
  padding: 0 8px;
  border: 0;
  outline: none;
  background: transparent;
  color: #fff;
  font: 400 16px/24px var(--ls-font);
  letter-spacing: normal;
}
@media (min-width: 1024px) { .ls-pill input { padding: 0 16px; } }
.ls-pill input::placeholder { color: rgba(255, 255, 255, 0.8); opacity: 1; }
.ls-pill input:-webkit-autofill,
.ls-pill input:-webkit-autofill:hover,
.ls-pill input:-webkit-autofill:focus,
.ls-pill input:-webkit-autofill:active,
.ls-form__input:-webkit-autofill,
.ls-form__input:-webkit-autofill:hover,
.ls-form__input:-webkit-autofill:focus,
.ls-form__input:-webkit-autofill:active {
  -webkit-text-fill-color: #fff;
  -webkit-background-clip: text;
}
/* De knop vult de hoogte: 56 − 2×6 − 2×1 = 42px op elke breedte. */
.ls-pill .ls-btn { height: 100%; flex-shrink: 0; }

/* ─── Tweede formulierstap en bedankt-melding (alleen Hyperr, zelfde glas) ── */

.ls-form {
  display: flex;
  flex-direction: column;
  gap: 6px;
  width: 360px;
  max-width: 100%;
  padding: 6px;
  border: 1px solid var(--ls-glass-line);
  border-radius: var(--ls-r-wrapper);
  background-color: var(--ls-glass);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  color: #fff;
  text-align: left;
}
.ls-form__input {
  display: block;
  width: 100%;
  height: 42px;
  padding: 0 15px;
  border: 1px solid var(--ls-glass-line);
  border-radius: var(--ls-r-button);
  outline: none;
  background-color: rgba(255, 255, 255, 0.08);
  color: #fff;
  font: 400 16px/24px var(--ls-font);
  letter-spacing: normal;
  transition: border-color 0.15s var(--ls-ease-default);
}
.ls-form__input::placeholder { color: rgba(255, 255, 255, 0.8); opacity: 1; }
.ls-form__input:focus { border-color: var(--ls-glass-line-2); }
.ls-form .ls-btn { width: 100%; height: 42px; flex-shrink: 0; }
.ls-form .ls-btn__label { justify-content: center; }

.ls-form--ok {
  gap: 8px;
  padding: 20px 18px;
  text-align: center;
}
.ls-form__ok-title { color: #fff; }
.ls-form__ok-text { color: rgba(255, 255, 255, 0.8); }

/* ─── Gedeelde atomen voor de schermpjes (stack, autonomy, how) ──────────── */

.ls .ls-num { font-variant-numeric: tabular-nums; font-weight: 500; letter-spacing: -0.01em; }
.ls .ls-green { color: var(--ls-success); }
.ls-ui__mark { flex: none; color: var(--ls-brand); }
.ls-dot-ok {
  display: grid; place-items: center; flex: none;
  width: 15px; height: 15px; border-radius: 50%;
  background-color: var(--ls-mint); color: #fff;
}
.ls-tag-ok {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 2px 6px; border-radius: 5px;
  background-color: var(--ls-success-soft); color: var(--ls-success);
  font-size: 10px; line-height: 14px; font-weight: 600; letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums;
}

/* De referentie heeft geen globale reduced-motion-regel; wij zetten alleen CSS-animaties stil.
   Geen transition-duration hier: met transition-property all zou dat elke stijlwijziging
   van GSAP/ScrollTrigger (pin-spacers, transforms) in een overgang veranderen. */
@media (prefers-reduced-motion: reduce) {
  .ls *, .ls *::before, .ls *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
}

/* ═══ nav.css ═══ */
/* ─── Navigatie · naar de referentiesite (0_nav) ───────────────────────────────────
   ≥ 1024: twee losse fixed pill-navs (midden + rechts), elk in een glazen rand van 4px.
   < 1024: één gecentreerde pill [logo][Menu] die uitgroeit tot een wit menupaneel.
   Geen balk, geen achtergrond die bij scrollen wisselt. Maten uit 01-nav §2. */

.lsn,
.lsn-m { color: #000; }

/* ─── Desktop ─── */

.lsn {
  position: fixed;
  top: 16px;
  z-index: 10;
  display: none;
  width: max-content;
  padding: 0;
}
.lsn--main { left: 50%; translate: -50% 0; }
.lsn--side { right: 22px; }
@media (min-width: 1024px) { .lsn { display: flex; } }

/* Glazen rand: los vlak 4px buiten de items (blur op dit vlak, niet op de nav zelf). */
.lsn__frame,
.lsn-m__frame {
  position: absolute;
  top: -4px;
  left: -4px;
  width: calc(100% + 8px);
  border: 1px solid var(--ls-glass-line);
  border-radius: var(--ls-r-wrapper);
  background-color: var(--ls-glass-nav);
  -webkit-backdrop-filter: blur(13px);
  backdrop-filter: blur(13px);
  pointer-events: none;
}
.lsn__frame { height: 52px; }

/* Schuivende witte pil; GSAP zet x en width. Ligt onder de eigen achtergrond van de items. */
.lsn__pill {
  position: absolute;
  top: 0;
  left: 0;
  width: 0;
  height: 44px;
  border-radius: 12px;
  background-color: #fff;
  pointer-events: none;
}

.lsn-item {
  position: relative;
  display: block;
  height: 44px;
  color: inherit;
  text-decoration: none;
  outline: none;
  cursor: pointer;
}
.lsn-item__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  border-radius: 12px;
  transition: background-color 0.3s var(--ls-ease-out);
}
.lsn-item__bg.is-white { background-color: #fff; }
.lsn-item__label {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  width: 100%;
  height: 100%;
  padding: 0 14px;
  white-space: nowrap;
  transition: color 0.15s var(--ls-ease-default);
}
.lsn-item__label.is-primary { color: var(--ls-ink); }
.lsn-item__label.is-invert { color: #fff; }
@media (hover: hover) {
  .lsn-item:hover .lsn-item__label { color: var(--ls-ink); }
}
.lsn-item:focus-visible .lsn-item__label { color: var(--ls-ink); }
.lsn-item:focus-visible .lsn-item__bg {
  border: 2px solid var(--ls-focus);
  box-shadow: var(--ls-ring);
}
.lsn-item:active .lsn-item__bg { background-color: var(--ls-pressed); }
.lsn-item:active .lsn-item__label { color: #fff; }

/* Logo: H (12 × 14) + YPERR in een houder van 62px die naar 0 inklapt. */
.lsn-logo__mark {
  display: block;
  flex: none;
  width: 12px;
  height: 14px;
}
.lsn-logo__word {
  display: block;
  width: 62px;
  overflow: hidden;
}
.lsn-logo__word svg {
  display: block;
  width: 62px;
  height: 14px;
}

/* ─── Mobiel ─── */

.lsn-m {
  position: fixed;
  top: 16px;
  left: 50%;
  translate: -50% 0;
  z-index: 10;
  width: max-content;
}
.lsn-m.is-active {
  z-index: 50;
  width: calc(100vw - 32px);
}
@media (min-width: 1024px) { .lsn-m { display: none; } }

.lsn-m__frame {
  height: 100%;
  min-height: 52px;
}
.lsn-m__frame.is-tall { height: calc(100% + 8px); }

.lsn-m__row {
  position: relative;
  z-index: 2;
  display: flex;
  width: max-content;
  padding: 0;
}
.lsn-m-item {
  position: relative;
  display: block;
  height: 44px;
  padding: 0;
  color: var(--ls-ink);
  text-decoration: none;
  outline: none;
  cursor: pointer;
}
.lsn-m-item__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  border-radius: 12px;
  background-color: #fff;
}
.lsn-m-item__label {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  width: 100%;
  height: 100%;
  padding: 0 14px;
  white-space: nowrap;
}
.lsn-m-item__label .is-hidden { opacity: 0; }
/* Afwijking voor toetsenbordgebruik: de referentie toont hier geen enkele focusstijl. */
.lsn-m-item:focus-visible .lsn-m-item__bg {
  border: 2px solid var(--ls-focus);
  box-shadow: var(--ls-ring);
}

/* Wit paneel: begint door de −44px marge achter de rij; inhoud met vaste breedte,
   gecentreerd, zodat de groeiende box hem van boven en vanuit het midden onthult. */
.lsn-m__panel {
  position: relative;
  top: 0;
  left: 0;
  z-index: 1;
  width: 100%;
  height: auto;
  margin-top: -44px;
  overflow: hidden;
  border-radius: 12px;
  background-color: #fff;
}
.lsn-m__panel.is-inert { pointer-events: none; }
.lsn-m__panel.is-hidden { display: none; }
.lsn-m__inner {
  position: relative;
  left: 50%;
  translate: -50% 0;
  width: calc(100vw - 32px);
  padding: 0 16px;
}
.lsn-m__list {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  width: 100%;
  padding: 128px 0 16px;
}
.lsn-m__link {
  display: block;
  width: 100%;
  min-height: 36px;
  margin-bottom: 8px;
  color: #000;
  text-align: left;
  text-decoration: none;
}
.lsn-m__link--sep {
  margin-top: 14px;
  margin-bottom: 20px;
  padding-top: 22px;
  border-top: 1px solid rgba(0, 0, 0, 0.05);
}
.ls .lsn-m__cta { height: 46px; }

.lsn-m__close {
  position: absolute;
  top: 0;
  right: 4px;
  z-index: 2;
  display: block;
  width: 66px;
  height: 44px;
  padding: 0;
  color: #000;
  text-align: center;
}
/* De referentie: text-nav zonder leading-none, dus 14px met de geërfde regelhoogte 1.5. */
.ls .lsn-m__close-label {
  display: block;
  font-size: 14px;
  font-weight: 400 !important;
  line-height: 21px !important;
  letter-spacing: 0 !important;
}

/* ═══ footer.css ═══ */
/* Footer (<footer> van de referentie + vaste onthullingslaag). Mobile-first; maten uit
   specs/08-footer.md. De laag zit onder .ls-main en de footer (beide z-index 1)
   en is alleen te zien in de ondermarge van de footer en in diens onderhoeken. */

/* ─── Wit paneel ──────────────────────────────────────────────────────────── */

.ls .ls-footer {
  position: relative;
  z-index: 1;
  width: 100%;
  border-radius: 0 0 32px 32px;
  background-color: var(--ls-bg-2);
  /* De referentie 30vw (≥1024: 29vw) voor een woordmerk van 47:13. Ons merk (265:50) is
     lager; deze marge houdt dezelfde ruimte boven de letters als bij de referentie. */
  margin-bottom: 24.07vw;
}

.ls .ls-footer__inner {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 2120px;
  min-height: 56vh;
  min-height: 56svh;
  margin-inline: auto;
  padding: 32px 16px 24px;
}

/* Claim + knop */
.ls .ls-footer__claim { margin-bottom: 32px; }
.ls .ls-footer__title {
  margin-bottom: 16px;
  color: var(--ls-ink-black);
}

/* Linkcluster + merk */
.ls .ls-footer__side {
  display: flex;
  flex: 1 1 0%;
  flex-direction: column;
  gap: 64px;
  height: 100%;
}
.ls .ls-footer__links {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  width: 100%;
  column-gap: 0;
  row-gap: 5px;
}
/* Twee kolommen naast elkaar, de derde op een nieuwe rij. */
.ls .ls-footer__links > dl:nth-child(-n + 2) { min-width: 49%; }
.ls .ls-footer__head {
  margin-bottom: 10px;
  color: var(--ls-ink-2);
}
.ls .ls-footer__item {
  margin-bottom: 7px;
  color: var(--ls-ink);
}

/* Onderstreping die in 150ms invloeit; focuskader via ::after (ook een groter klikvlak). */
.ls .ls-footer__link {
  position: relative;
  color: inherit;
  outline: none;
  text-decoration-line: underline;
  text-decoration-color: transparent;
  text-underline-offset: 2px;
  transition: text-decoration-color 0.15s var(--ls-ease-default);
}
.ls .ls-footer__link::after {
  content: "";
  position: absolute;
  top: -2px;
  left: -4px;
  width: calc(100% + 8px);
  height: calc(100% + 4px);
  border-radius: 4px;
}
@media (hover: hover) {
  .ls .ls-footer__link:hover { text-decoration-color: currentColor; }
}
.ls .ls-footer__link:focus-visible::after {
  border: 2px solid var(--ls-focus);
  box-shadow: var(--ls-ring);
}

.ls .ls-footer__base {
  display: flex;
  gap: 16px;
  margin-top: auto;
  color: var(--ls-ink-black);
}
/* Zelfde hoogte als bloemlogo van de referentie (30,8 / 38,9); de H is smaller. */
.ls .ls-footer__mark {
  display: block;
  flex: none;
  width: 26.3px;
  height: 30.8px;
}
.ls .ls-footer__mark svg {
  display: block;
  width: 100%;
  height: 100%;
}
.ls .ls-footer__legal {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
}

@media (min-width: 1024px) {
  .ls .ls-footer {
    height: 517px;
    min-height: 517px;
    border-radius: 0 0 56px 56px;
    margin-bottom: 23.07vw;
  }
  .ls .ls-footer__inner {
    flex-direction: row;
    justify-content: space-between;
    height: 517px;
    min-height: 517px;
    padding-inline: 32px;
  }
  .ls .ls-footer__title { margin-bottom: 24px; }
  .ls .ls-footer__side {
    flex: none;
    justify-content: space-between;
    padding-right: 74px;
  }
  .ls .ls-footer__links { gap: 74px; }
  .ls .ls-footer__links > dl:nth-child(-n + 2) { min-width: 0; }
  .ls .ls-footer__base {
    display: block;
    margin-top: 0;
  }
  .ls .ls-footer__mark {
    width: 33.2px;
    height: 38.9px;
    margin-bottom: 12px;
  }
}

@media (min-width: 1280px) {
  .ls .ls-footer { border-radius: 0 0 64px 64px; }
  .ls .ls-footer__inner { padding-top: 80px; }
  .ls .ls-footer__title { margin-bottom: 32px; }
  .ls .ls-footer__links { gap: 150px; }
}

/* ─── Vaste onthullingslaag ───────────────────────────────────────────────── */

/* De referentie: 480 / 900 hoog. Omdat onze strook (ondermarge) ±0,8 × zo diep is, is de
   laag in dezelfde verhouding lager; zo toont de strook hetzelfde deel van het verloop. */
.ls-footer-reveal {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 385px;
  background: linear-gradient(#fff 0%, #f9f8f5 30%, var(--ls-bg-3) 100%);
}
@media (min-width: 1024px) { .ls-footer-reveal { height: 382px; } }
@media (min-width: 1280px) { .ls-footer-reveal { height: 716px; } }

/* 96% breed, gecentreerd. letters van de referentie staan hoger in hun viewBox dan de onze;
   de extra 1,44vw legt de basislijn op dezelfde hoogte boven de schermrand. */
.ls-footer-reveal__word {
  position: absolute;
  bottom: calc(10px + 1.44vw);
  left: 50%;
  display: block;
  width: 96%;
  color: #fff;
  transform: translateX(-50%);
}
.ls-footer-reveal__word svg {
  display: block;
  width: 100%;
  height: auto;
}