/* AZDN Techniek. Styles follow the supplied design kit (design/KIT.md).
   Tokens are copied exactly from the kit. No build step. */

/* Self-hosted fonts (latin subset, variable). No request to Google: AVG. */
@font-face { font-family: 'Archivo'; font-style: normal; font-weight: 100 900; font-stretch: 62% 125%; font-display: swap;
  src: url(/assets/fonts/archivo-var-latin.woff2) format('woff2'); }
@font-face { font-family: 'JetBrains Mono'; font-style: normal; font-weight: 400 600; font-display: swap;
  src: url(/assets/fonts/jetbrainsmono-var-latin.woff2) format('woff2'); }

:root {
  --ink: #1A0B38;
  --violet: #5B2EE5;
  --deep: #2C1366;
  --lime: #D4F53C;
  --lila: #E9E3FC;
  --paper: #F5F3EE;
  --paper-2: #EDE9E1;
  --stone: #6E6880;
  --body: #4A4260;
  --body-strong: #2E2545;
  --mist: #C9C2DE;
  --white: #FFFFFF;
  --line: rgba(26, 11, 56, .15);
  --line-soft: rgba(26, 11, 56, .10);
  --line-dark: rgba(245, 243, 238, .2);

  /* Fixed brand surfaces; theme-able page surfaces */
  --night: #1A0B38;
  --cream: #F5F3EE;
  --bg: var(--paper);
  --bg-2: var(--paper-2);
  --surface: var(--white);

  --font: 'Archivo', system-ui, sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, monospace;

  /* 4pt scale */
  --s1: 8px; --s2: 16px; --s3: 24px; --s4: 32px; --s6: 48px; --s8: 64px; --s12: 96px;

  --r-card: 4px;
  --r-pill: 999px;

  --wrap: 1280px;
  --gutter: 32px;
  --section: clamp(64px, 8vw, 96px);

  --fs-display: clamp(44px, 6.6vw, 112px);
  --fs-h1: clamp(44px, 6vw, 96px);
  --fs-h2: clamp(36px, 4.4vw, 56px);
  --fs-h3: clamp(22px, 2vw, 28px);
  --fs-phase: clamp(24px, 2.4vw, 30px);
  --fs-lead: clamp(18px, 1.4vw, 20px);
  --fs-body: clamp(16px, 1.2vw, 18px);
  --fs-quote: clamp(30px, 4vw, 52px);
  --fs-giant: clamp(48px, 8.5vw, 180px);

  /* Interaction fx: one timing set for every hover, focus and open/close (see KIT.md, "Interaction fx") */
  --dur-fast: 180ms;
  --dur: 300ms;
  --dur-slow: 450ms;
  --dur-fill: 600ms;                   /* underline fill: slow enough to read as a sweep */
  --ease-out: cubic-bezier(.2, .7, .2, 1);
  --ease-in-out: cubic-bezier(.65, 0, .35, 1);
  --fx-fill: var(--violet);            /* second underline layer that sweeps over the lime */
  --fx-lift: translateY(-4px);
  --fx-shadow: 0 18px 40px -24px rgba(26, 11, 56, .5);
}
@media (max-width: 600px) { :root { --gutter: 16px; } }

/* Night mode: only the areas that are LIGHT by day (cream page, bands, white and lila cards) change.
   Colour theory: a tinted neutral in the brand hue (ink #1A0B38 sits at 260 deg) with saturation cut to ~20%,
   so the dark base is monochromatic with the palette instead of hueless graphite; lime stays the
   complementary accent. Contrast on #1B1724: text 16:1, body 10.4:1, stone 6:1, lime 14:1.
   Areas that are already dark by day (scrolled header, footer, menu, ink cards, chips) keep var(--night). */
:root[data-theme="dark"] {
  --bg: #1B1724;
  --bg-2: #14101B;
  --surface: #24202F;
  --ink: #F4F2F8;
  --body: #C9C5D3;
  --body-strong: #EDEAF3;
  --stone: #9A94A8;
  --lila: #24202F;
  --line: rgba(244, 242, 248, .15);
  --line-soft: rgba(244, 242, 248, .09);
  --fx-fill: #A98BFF;
  --fx-shadow: 0 18px 40px -22px rgba(0, 0, 0, .7);
  color-scheme: dark;
}
:root[data-theme="dark"] .btn--primary:hover { background: var(--cream); color: var(--night); }
:root[data-theme="dark"] .btn--ghost:hover { background: var(--cream); color: var(--night); }
/* On ink (night theme, scrolled header, menu) the ink fill would vanish, so the lime button fades to cream */
:root[data-theme="dark"] .btn--accent:hover, :root[data-theme="dark"] .btn--accent:focus-visible,
.site-header.is-dark .btn--accent:hover, .site-header.is-dark .btn--accent:focus-visible,
.menu .btn--accent:hover, .menu .btn--accent:focus-visible { background: var(--cream); color: var(--night); }

/* Base */
*, *::before, *::after { box-sizing: border-box; }
html {
  scroll-behavior: smooth; scroll-padding-top: 96px;
  scrollbar-color: var(--violet) var(--bg-2); scrollbar-width: thin;
  -webkit-text-size-adjust: 100%;
}
::-webkit-scrollbar { width: 12px; height: 12px; }
::-webkit-scrollbar-track { background: var(--bg-2); }
::-webkit-scrollbar-thumb { background: var(--violet); border: 3px solid var(--bg-2); border-radius: var(--r-pill); }
::-webkit-scrollbar-thumb:hover { background: var(--ink); }
::selection { background: var(--lime); color: var(--night); }
body {
  margin: 0; background: var(--bg); color: var(--ink);
  font-family: var(--font); font-size: var(--fs-body); line-height: 1.6;
  -webkit-font-smoothing: antialiased; overflow-x: clip;
}
img, svg { display: block; max-width: 100%; }
h1, h2, h3, h4, p, ul, ol, figure, blockquote, address { margin: 0; }
ul[role="list"], ol[role="list"] { list-style: none; padding: 0; }
address { font-style: normal; }
a { color: var(--violet); text-decoration: none; }
a:hover { color: var(--ink); }
button { font: inherit; color: inherit; }
:focus-visible { outline: 3px solid var(--violet); outline-offset: 3px; border-radius: 2px; }
.on-dark :focus-visible, .on-violet :focus-visible, .site-header.is-dark :focus-visible { outline-color: var(--lime); }
.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

.skip-link {
  position: absolute; left: var(--s2); top: -100px; z-index: 100;
  padding: 12px 20px; border-radius: var(--r-pill); background: var(--lime); color: var(--night); font-weight: 700;
}
.skip-link:focus { top: var(--s2); }

/* Layout */
.wrap { max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gutter); }
.section { padding-block: var(--section); }
.section--tight-top { padding-top: 0; }
.band { background: var(--bg-2); }
.measure { max-width: 640px; }
.stack > * + * { margin-top: var(--s3); }
.stack-sm > * + * { margin-top: var(--s2); }

/* Type */
.eyebrow {
  display: flex; gap: 12px; align-items: center;
  font-family: var(--mono); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--violet);
}
.eyebrow::before { content: attr(data-n); }
.eyebrow > span { order: 2; }
.eyebrow::after { content: ""; order: 1; width: 40px; height: 1px; background: currentColor; flex: none; }
.on-dark .eyebrow { color: var(--lime); }
.on-violet .eyebrow { color: var(--lila); }
.label { font-family: var(--mono); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--violet); }
.meta { font-family: var(--mono); font-size: 11px; color: var(--stone); letter-spacing: .02em; }
.display {
  font-size: var(--fs-display); font-weight: 850; font-stretch: 78%; letter-spacing: -0.035em; line-height: .9;
  text-wrap: balance; overflow-wrap: break-word; hyphens: manual;
}
.h1 { font-size: var(--fs-h1); font-weight: 850; font-stretch: 78%; letter-spacing: -0.035em; line-height: .9; text-wrap: balance; }
.h2 { font-size: var(--fs-h2); font-weight: 800; font-stretch: 82%; letter-spacing: -0.03em; line-height: .95; text-wrap: balance; }
.h3 { font-size: var(--fs-h3); font-weight: 750; letter-spacing: -0.015em; line-height: 1.15; }
.lead { font-size: var(--fs-lead); line-height: 1.5; color: var(--body); max-width: 620px; text-wrap: pretty; }
.prose { color: var(--body-strong); max-width: 680px; }
.prose > * + * { margin-top: 1em; }
.prose h2 { font-size: var(--fs-h3); font-weight: 750; letter-spacing: -0.015em; line-height: 1.15; color: var(--ink); margin-top: 1.8em; }
.prose h2:first-child { margin-top: 0; }
/* .prose a gets the lime to violet underline fill below (Interaction fx) */
.hl { background: linear-gradient(var(--lime), var(--lime)) no-repeat 0 0 / var(--hl, 100%) 100%; color: var(--night); padding: 0 .08em; box-decoration-break: clone; -webkit-box-decoration-break: clone; }
.section-head { margin-bottom: var(--s6); }
.section-head .h2 { margin-top: var(--s2); }

/* Buttons (5A) */
.btns { display: flex; flex-wrap: wrap; gap: 10px; margin-top: var(--s4); padding: 0; list-style: none; }
.btn {
  display: inline-flex; align-items: center; gap: 8px; min-height: 52px;
  padding: 14px 26px; border-radius: var(--r-pill); border: 1.5px solid transparent;
  font-family: var(--font); font-weight: 700; font-size: 16px; line-height: 1.2; cursor: pointer;
  transition: background-color var(--dur) var(--ease-out), color var(--dur) var(--ease-out),
    border-color var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out);
}
.btn--primary { background: var(--violet); color: var(--paper); }
.btn--primary:hover { background: var(--night); color: var(--paper); }
.btn--accent { background: var(--lime); color: var(--night); }
.btn--accent:hover { background: var(--night); color: var(--lime); }
.btn--ghost { border-color: var(--ink); color: var(--ink); font-weight: 600; }
.btn--ghost:hover { background: var(--night); color: var(--paper); }
.on-violet .btn--ghost { border-color: var(--paper); color: var(--paper); }
.on-violet .btn--ghost:hover { background: var(--paper); color: var(--violet); }
.on-violet .btn--accent:hover { background: var(--cream); color: var(--night); }
.btn.is-pending { cursor: default; opacity: .9; }
.btn.is-pending:hover { background: transparent; color: inherit; }
.on-violet .btn.is-pending:hover { color: var(--paper); }
.textlink { font-weight: 700; font-size: 15px; color: var(--ink); padding-bottom: 4px; }
.textlink:hover { color: var(--ink); }
.round {
  width: 36px; height: 36px; flex: none; border-radius: 50%; background: var(--night); color: var(--paper);
  display: inline-flex; align-items: center; justify-content: center; font-size: 16px; transition: background .2s;
}

/* Tags (5E) */
.tags { display: flex; flex-wrap: wrap; gap: 8px; padding: 0; list-style: none; }
.tag { padding: 6px 12px; border-radius: var(--r-pill); background: var(--lila); color: var(--deep); font-size: 13px; font-weight: 600; line-height: 1.4; }
.tag--live { background: var(--night); color: var(--lime); }
.tag--line { background: transparent; border: 1px solid var(--ink); color: var(--ink); }

/* To be confirmed marker */
.tbc {
  display: inline; padding: .1em .55em; border: 1px dashed var(--violet); border-radius: var(--r-card);
  background: rgba(91, 46, 229, .06); color: var(--deep);
  font-family: var(--mono); font-size: .72em; font-weight: 500; letter-spacing: 0; line-height: 1.9;
  font-stretch: 100%; text-transform: none; box-decoration-break: clone; -webkit-box-decoration-break: clone;
}
.tbc::before { content: "[TE BEVESTIGEN: "; font-weight: 600; }
.tbc::after { content: "]"; }
.on-dark .tbc, .on-violet .tbc { color: var(--lime); border-color: var(--lime); background: rgba(212, 245, 60, .08); }
.btn .tbc { font-size: .72em; line-height: 1.4; }
@media (max-width: 599px) {
  .btn.is-pending { flex-wrap: wrap; justify-content: center; white-space: normal; row-gap: 4px; }
  .btn.is-pending .tbc { flex-basis: 100%; text-align: center; }
}

/* Header and nav (2A / 2C / 2D) */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: var(--bg); border-bottom: 1px solid var(--line-soft);
  transition: background .25s, color .25s;
}
@supports (backdrop-filter: blur(12px)) { .site-header { backdrop-filter: blur(12px); } }
.site-header__inner { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: var(--s4); padding-block: 20px; }
.wordmark { display: inline-flex; align-items: baseline; gap: 4px; white-space: nowrap; color: var(--ink); font-weight: 900; font-size: 30px; letter-spacing: -0.04em; font-stretch: 90%; line-height: 1; transform-origin: 0 50%; transition: transform .25s var(--ease-out); }
.wordmark:hover { color: var(--ink); }
.wordmark__dot { width: 9px; height: 9px; background: var(--lime); border-radius: 50%; display: inline-block; box-shadow: 0 0 0 2px var(--ink); }
.wordmark__sub { font-family: var(--font); font-size: 1em; font-weight: 900; letter-spacing: -0.04em; text-transform: uppercase; color: inherit; margin-left: .22em; }
.nav { justify-self: center; }
.nav ul { display: flex; gap: 2px; list-style: none; padding: 0; }
.nav a { position: relative; display: block; padding: 8px 12px; font-size: 15px; font-weight: 500; color: var(--ink); transition: color var(--dur) var(--ease-out); }
.nav a:hover, .nav a:focus-visible { color: var(--violet); }
.nav a[aria-current="page"] { color: var(--violet); }
.header-actions { display: flex; gap: 8px; align-items: center; justify-self: end; }
.theme-btn {
  width: 44px; height: 44px; flex: none; border-radius: 50%; border: 1px solid var(--line); background: transparent;
  color: var(--ink); display: inline-flex; align-items: center; justify-content: center; cursor: pointer;
  transition: background-color var(--dur) var(--ease-out), color var(--dur) var(--ease-out), border-color var(--dur) var(--ease-out);
}
.theme-btn:hover, .theme-btn:focus-visible { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.theme-btn svg { transition: transform var(--dur-slow) var(--ease-out); }
.theme-btn:hover svg, .theme-btn:focus-visible svg { transform: rotate(-20deg); }
.theme-btn svg { width: 18px; height: 18px; }
.theme-btn .i-sun, :root[data-theme="dark"] .theme-btn .i-moon { display: none; }
:root[data-theme="dark"] .theme-btn .i-sun { display: block; }
.site-header.is-dark .theme-btn { color: var(--cream); border-color: var(--line-dark); }
.site-header.is-dark .theme-btn:hover, .site-header.is-dark .theme-btn:focus-visible { background: var(--cream); color: var(--night); border-color: var(--cream); }
.header-actions .btn { min-height: 44px; padding: 10px 18px; font-size: 14px; }
.progress { height: 3px; background: transparent; }
.progress__bar { height: 3px; width: 100%; transform-origin: 0 50%; transform: scaleX(0); background: var(--violet); }

/* Scrolled: compact, dark, lime progress */
.site-header.is-dark { background: var(--night); color: var(--paper); border-bottom-color: transparent; }
/* Compact look without a height change: the header keeps its layout height so main never shifts */
.site-header.is-dark .wordmark { color: var(--paper); }
@media (min-width: 960px) { .site-header.is-dark .wordmark { transform: scale(.74); } }
.site-header.is-dark .wordmark__dot { box-shadow: none; }

.site-header.is-dark .nav a { color: var(--mist); font-size: 14px; }
.site-header.is-dark .nav a:hover, .site-header.is-dark .nav a:focus-visible, .site-header.is-dark .nav a[aria-current="page"] { color: var(--lime); }
.site-header.is-dark .btn--ghost { border-color: var(--mist); color: var(--paper); }
.site-header.is-dark .btn--ghost:hover { background: var(--paper); color: var(--ink); }
.site-header.is-dark .progress { background: var(--deep); }
.site-header.is-dark .progress__bar { background: var(--lime); }

.menu-btn {
  display: none; height: 44px; padding: 0 18px; border-radius: var(--r-pill); border: none;
  background: var(--night); color: var(--paper); font-weight: 700; font-size: 14px; cursor: pointer; gap: 8px; align-items: center;
}
.site-header.is-dark .menu-btn { background: var(--paper); color: var(--ink); }
.menu-btn[aria-expanded="true"], .site-header.is-dark .menu-btn[aria-expanded="true"] { background: var(--lime); color: var(--night); }
.menu-btn { white-space: nowrap; }
:root[data-theme="dark"] .menu-btn { background: var(--cream); color: var(--night); }
.menu-btn__close, .menu-btn[aria-expanded="true"] .menu-btn__open { display: none; }
.menu-btn[aria-expanded="true"] .menu-btn__close { display: inline; }

.menu {
  position: fixed; inset: 0; z-index: 45; padding: 96px var(--gutter) var(--s4);
  background: var(--night); color: var(--paper); display: flex; flex-direction: column;
  visibility: hidden; opacity: 0; transition: opacity .25s, visibility 0s .25s;
  overflow-y: auto;
}
.menu-open .menu { visibility: visible; opacity: 1; transition: opacity .25s; }
.menu ol { list-style: none; padding: 0; }
.menu li a {
  display: flex; align-items: baseline; gap: 14px; padding: 12px 0;
  border-bottom: 1px solid rgba(245, 243, 238, .12); color: var(--paper);
  font-size: clamp(28px, 8vw, 40px); font-weight: 800; font-stretch: 82%; letter-spacing: -0.02em; line-height: 1.1;
}
.menu li a span { font-family: var(--mono); font-size: 11px; color: var(--lime); font-weight: 400; letter-spacing: 0; }
.menu li a[aria-current="page"] { color: var(--lime); }
.menu .btn { margin-top: var(--s4); align-self: flex-start; }
.menu__foot { margin-top: auto; padding-top: var(--s4); font-family: var(--mono); font-size: 11px; color: var(--mist); }
.menu-open { overflow: hidden; }
.menu-open .site-header { background: var(--night); color: var(--paper); }
.menu-open .site-header .wordmark { color: var(--paper); }
.menu-open .site-header .wordmark__dot { box-shadow: none; }

@media (max-width: 959px) {
  .nav, .header-actions .btn { display: none; }
  .menu-btn { display: inline-flex; }
  .site-header__inner { padding-block: 16px; grid-template-columns: 1fr auto; }
}
@media (min-width: 960px) { .menu { display: none; } }
@media (max-width: 420px) {
  .wordmark { font-size: 21px; }
  .site-header__inner { gap: var(--s2); }
  .header-actions { gap: 6px; }
  .theme-btn { width: 40px; height: 40px; }
  .menu-btn { height: 40px; padding: 0 14px; }
}

/* Right edge scroll index (2F) */
.scroll-index {
  position: fixed; right: 20px; top: 50%; transform: translateY(-50%); z-index: 40;
  display: none; flex-direction: column; gap: 10px; align-items: flex-end; list-style: none; padding: 0; margin: 0;
}
@media (min-width: 1200px) { .scroll-index { display: flex; } }
.scroll-index a { display: flex; align-items: center; gap: 8px; font-family: var(--mono); font-size: 10px; color: var(--ink); padding: 3px 0; }
.scroll-index__label { opacity: 0; transition: opacity .2s; background: var(--bg); padding: 2px 4px; }
.scroll-index__bar { width: 14px; height: 4px; border-radius: 2px; background: var(--line-2, var(--line)); transition: width .25s, background .25s; }
.scroll-index a:hover .scroll-index__label, .scroll-index a:focus-visible .scroll-index__label { opacity: 1; }
.scroll-index a.is-active .scroll-index__bar { width: 36px; background: var(--violet); }
.scroll-index.on-dark a { color: var(--paper); }
.scroll-index.on-dark .scroll-index__label { background: var(--night); }
.scroll-index.on-dark .scroll-index__bar { background: rgba(245, 243, 238, .35); }
.scroll-index.on-dark a.is-active .scroll-index__bar { background: var(--lime); }

/* Breadcrumb + numbered sub nav (2E) */
.crumbs { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; padding: 0; font-family: var(--mono); font-size: 12px; color: var(--stone); }
.crumbs li + li::before { content: "/"; margin-right: 8px; }
.crumbs a { color: var(--stone); }
.crumbs a:hover { color: var(--violet); }
.crumbs [aria-current="page"] { color: var(--ink); }
.subnav { margin-top: var(--s6); border-bottom: 2px solid var(--line); overflow-x: auto; scrollbar-width: none; }
.subnav::-webkit-scrollbar { display: none; }
.subnav ul { display: flex; list-style: none; padding: 0; }
.subnav a {
  display: flex; gap: 8px; align-items: baseline; white-space: nowrap; flex: none;
  padding: 12px 14px; margin-bottom: -2px; border-bottom: 3px solid transparent;
  font-size: 16px; font-weight: 700; color: var(--stone);
}
.subnav a span { font-family: var(--mono); font-size: 11px; font-weight: 400; }
.subnav a:hover { color: var(--ink); }
.subnav a.is-active { color: var(--ink); border-bottom-color: var(--violet); }
@media (max-width: 599px) {
  .subnav { overflow-x: visible; }
  .subnav ul { flex-direction: column; }
  .subnav a { border-bottom: 0; border-left: 3px solid transparent; margin-bottom: 0; padding: 10px 14px; }
  .subnav a.is-active { border-left-color: var(--violet); }
}

/* Page head */
.page-head { padding-top: clamp(48px, 7vw, 96px); padding-bottom: var(--s8); }
.page-head .crumbs { margin-bottom: var(--s4); }
.page-head .h1 { margin-top: var(--s2); }
.page-head .lead { margin-top: var(--s3); }

/* Hero (3A) */
.hero { padding-top: clamp(48px, 7vw, 96px); padding-bottom: var(--section); }
.hero__grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: var(--s4); align-items: end; }
.hero__copy .display { margin-top: var(--s2); }
.hero__copy .lead { margin-top: var(--s3); }
.hero__media { position: relative; height: clamp(360px, 40vw, 520px); }
.chip-status {
  position: absolute; left: -20px; bottom: 24px; background: var(--night); color: var(--paper);
  padding: 14px 18px; font-family: var(--mono); font-size: 11px; line-height: 1.6;
}
.chip-status b { color: var(--lime); font-weight: 400; }
@media (max-width: 899px) {
  .hero__grid { grid-template-columns: 1fr; }
  .hero__media { height: 300px; }
  .chip-status { left: 12px; bottom: 12px; }
}

/* Image slot, empty state from the kit's <image-slot> */
.slot {
  position: relative; width: 100%; height: 100%; min-height: 220px; border-radius: var(--r-card); overflow: hidden;
  background: rgba(127, 127, 127, .08); color: var(--ink);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; text-align: center; padding: 12px;
  font: 500 13px/1.3 var(--font); letter-spacing: .01em;
}
.slot::after { content: ""; position: absolute; inset: 0; border: 1.5px dashed currentColor; border-radius: inherit; opacity: .35; pointer-events: none; }
.slot svg { width: 28px; height: 28px; opacity: .45; }
.slot__cap { opacity: .75; }
.slot__note { font-size: 12px; max-width: 90%; }
.slot--portrait { aspect-ratio: 4 / 5; height: auto; }
.on-dark .slot { color: var(--paper); }

/* Phases with kabel line (3B) */
.kabel { --cols: 3; position: relative; display: grid; grid-template-columns: repeat(var(--cols), minmax(0, 1fr)); gap: var(--s4); list-style: none; padding: 0; }
.kabel::before { content: ""; position: absolute; left: 0; right: 0; top: 9px; height: 2px; background: var(--ink); transform: scaleX(var(--draw, 1)); transform-origin: 0 50%; }
.kabel--4 { --cols: 4; }
.kabel > li { position: relative; display: flex; flex-direction: column; }
.node { display: block; width: 16px; height: 16px; border-radius: 50%; background: var(--bg); border: 2px solid var(--ink); flex: none; position: relative; }
.band .node--paper { background: var(--bg-2); }
.node--violet { background: var(--violet); }
.node--lime { background: var(--lime); }
.kabel .label { margin-top: var(--s3); }
.phase-title { font-size: var(--fs-phase); font-weight: 800; font-stretch: 85%; letter-spacing: -0.02em; line-height: 1.05; margin-top: 6px; }
.kabel p { font-size: 16px; line-height: 1.6; color: var(--body); margin: 10px 0 16px; }
.kabel .textlink { margin-top: auto; align-self: flex-start; }
@media (max-width: 899px) {
  .kabel, ol.kabel[role="list"] { grid-template-columns: 1fr; gap: var(--s4); padding-left: 32px; }
  .kabel::before { left: 7px; right: auto; top: 9px; bottom: 9px; width: 2px; height: auto; transform: scaleY(var(--draw, 1)); transform-origin: 50% 0; }
  .kabel .node { position: absolute; left: -32px; top: 0; }
  .kabel .label { margin-top: 0; }
}
@media (min-width: 900px) and (max-width: 1099px) {
  .kabel--4 { --cols: 2; row-gap: var(--s6); }
  .kabel--4::before { display: none; }
}

/* Split (3C) with plus list */
.split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--s6); align-items: center; }
.split__media { height: clamp(320px, 34vw, 440px); }
.split .h2 { margin-top: var(--s2); }
.split p { color: var(--body); margin-top: 20px; }
@media (max-width: 899px) { .split { grid-template-columns: 1fr; gap: var(--s4); } .split__media { height: 280px; } }
.plus { list-style: none; padding: 0; margin: var(--s3) 0 0; border-top: 1px solid var(--line); }
.plus li { padding: 14px 0; border-bottom: 1px solid var(--line); display: flex; gap: 14px; font-size: 16px; line-height: 1.5; color: var(--ink); }
.plus li::before { content: "+"; color: var(--violet); font-weight: 800; flex: none; }
.plus strong { font-weight: 700; }
.plus li span { color: var(--body); }

/* Principle grid (DNA P-01 style) and cards (4A / 4D) */
.pgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 0; border: 1px solid var(--line); list-style: none; padding: 0; }
.pgrid > * { background: var(--bg); padding: 28px; box-shadow: 0 0 0 .5px var(--line); } /* per-panel dividers: an empty last cell stays page-coloured */
.band .pgrid > * { background: var(--bg-2); }
.pgrid .h3 { margin-top: 12px; font-size: 22px; }
.pgrid p { font-size: 15px; line-height: 1.5; color: var(--body); margin-top: 8px; }

.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: var(--s3); list-style: none; padding: 0; }
.card { display: flex; flex-direction: column; background: var(--surface); border-radius: var(--r-card); padding: 22px; color: var(--ink); }
a.card:hover { box-shadow: 0 0 0 2px var(--violet); color: var(--ink); }
.card .h3 { margin-top: 8px; }
.card p { color: var(--body); font-size: 16px; margin-top: 10px; }
.card__foot {
  display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: auto; padding-top: 16px;
  border-top: 1px solid var(--line); font-size: 14px; font-weight: 600;
}
.card__body { margin-bottom: 20px; }
.card--lila { background: var(--lila); }
.card--ink { background: var(--night); color: var(--paper); }
.card--ink p { color: var(--mist); }
.card .btn { align-self: flex-start; margin-top: var(--s2); }

/* Quote (3E) */
.quote { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: var(--s3); }
.quote__mark { font-size: 160px; line-height: .7; font-weight: 900; color: var(--violet); }
.quote blockquote p { font-size: var(--fs-quote); font-weight: 750; font-stretch: 85%; letter-spacing: -0.025em; line-height: 1.05; text-wrap: balance; }
.quote figcaption { margin-top: 20px; font-family: var(--mono); font-size: 12px; color: var(--stone); }
.quote .tbc { font-size: 11px; }
@media (max-width: 699px) { .quote { grid-template-columns: 1fr; gap: 0; } .quote__mark { font-size: 110px; height: 60px; } }

/* FAQ accordion (3F) */
.faq { border-top: 2px solid var(--ink); }
.faq__item { border-bottom: 1px solid var(--line); }
.faq__q { margin: 0; }
.faq__btn {
  width: 100%; background: none; border: none; padding: 22px 0; display: flex; justify-content: space-between; align-items: center; gap: 16px;
  cursor: pointer; font-size: clamp(18px, 1.8vw, 22px); font-weight: 700; color: var(--ink); text-align: left; line-height: 1.3;
}
.faq__icon {
  width: 40px; height: 40px; flex: none; border-radius: 50%; background: var(--lila);
  display: flex; align-items: center; justify-content: center; font-size: 20px; font-weight: 500; transition: background .2s;
}
.faq__btn[aria-expanded="true"] .faq__icon { background: var(--lime); color: var(--night); }
.faq__icon svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; transition: transform .35s cubic-bezier(.2,.7,.2,1); }
.faq__v { transform-origin: 12px 12px; transition: transform .35s cubic-bezier(.2,.7,.2,1); }
.faq__btn[aria-expanded="true"] .faq__v { transform: scaleY(0); }
.faq__btn[aria-expanded="true"] .faq__icon svg { transform: rotate(180deg); }
.faq__btn:hover .faq__icon, .faq__btn:focus-visible .faq__icon { transform: translateY(-2px); }
.faq__icon { transition: background-color var(--dur) var(--ease-out), color var(--dur) var(--ease-out), transform var(--dur) var(--ease-out); }
.faq__a { padding: 0 0 24px; max-width: 720px; font-size: 17px; line-height: 1.6; color: var(--body); }
/* With JS the panel animates: grid rows 0fr to 1fr (height), content fades and slides.
   site.js wraps the answer in .faq__inner, sets .is-open, and restores [hidden] once closed. */
.js .faq__a {
  display: grid; grid-template-rows: 0fr; padding: 0;
  transition: grid-template-rows var(--dur-slow) var(--ease-in-out);
}
.js .faq__a.is-open { grid-template-rows: 1fr; }
/* Closed panels stay rendered (0fr) but invisible: display:none would skip the opening transition.
   visibility:hidden still removes them from the accessibility tree and tab order. */
.js .faq__a[hidden] { display: grid; visibility: hidden; }
.faq__inner { min-height: 0; overflow: hidden; }
.faq__inner > :last-child { padding-bottom: 24px; }
.js .faq__inner > * {
  opacity: 0; transform: translateY(-8px);
  transition: opacity var(--dur) var(--ease-out), transform var(--dur-slow) var(--ease-out);
}
.js .faq__a.is-open .faq__inner > * { opacity: 1; transform: none; transition-delay: 80ms; }
.faq__btn { transition: color var(--dur) var(--ease-out); }
.faq__btn:hover, .faq__btn:focus-visible { color: var(--violet); }
:root[data-theme="dark"] .faq__btn:hover, :root[data-theme="dark"] .faq__btn:focus-visible { color: var(--fx-fill); }
.faq__btn:hover .faq__icon, .faq__btn:focus-visible .faq__icon { background: var(--lime); color: var(--night); }
.faq__a[hidden] { display: none; }
html:not(.js) .faq__a[hidden] { display: block; }

/* CTA band (3G) */
/* CTA band wears the hero's blueprint grid ("roster"): page colour plus 24px minor and 120px major
   lines in the theme ink, the same values hero-fx.js paints. Follows night mode via --bg and --ink. */
.cta {
  --grid-minor: color-mix(in srgb, var(--ink) 5%, transparent);
  --grid-major: color-mix(in srgb, var(--ink) 10%, transparent);
  background-color: var(--bg); color: var(--ink);
  background-image:
    linear-gradient(to right, var(--grid-major) 1px, transparent 1px),
    linear-gradient(to bottom, var(--grid-major) 1px, transparent 1px),
    linear-gradient(to right, var(--grid-minor) 1px, transparent 1px),
    linear-gradient(to bottom, var(--grid-minor) 1px, transparent 1px);
  background-size: 120px 120px, 120px 120px, 24px 24px, 24px 24px;
  background-position: -.5px -.5px;
  border-top: 1px solid var(--line);
}
.cta__grid { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: var(--s6); align-items: end; padding-block: var(--section); }
.cta .display { font-size: clamp(44px, 6vw, 88px); margin-top: 20px; }
.cta p { font-size: 18px; line-height: 1.6; }
.cta .btns { margin-top: 28px; }
@media (max-width: 899px) { .cta__grid { grid-template-columns: 1fr; gap: var(--s4); } }

/* Contact block */
.contact-lines { font-size: 15px; line-height: 1.6; }

/* Back to top */
.to-top { display: inline-flex; gap: 10px; align-items: center; font-weight: 700; font-size: 14px; color: var(--paper); }
.to-top span { width: 44px; height: 44px; border-radius: 50%; background: var(--lime); color: var(--night); display: flex; align-items: center; justify-content: center; font-size: 18px; }
.to-top:hover { color: var(--lime); }

/* Footer (06) */
.site-footer { background: var(--night); color: var(--paper); padding-top: var(--section); }
.footer__grid { display: grid; grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr)); gap: var(--s4) var(--s3); margin-top: var(--s6); }
.footer__col { border-top: 1px solid var(--line-dark); padding-top: 14px; }
.footer__col .meta { color: var(--lime); }
.footer__col h2, .footer__col .footer__name { font-size: 17px; font-weight: 700; margin-top: 6px; line-height: 1.3; }
.footer__col p, .footer__col address, .footer__col ul { font-size: 15px; line-height: 1.6; color: var(--mist); margin-top: 6px; }
.footer__col ul { list-style: none; padding: 0; }
.footer__col a { color: var(--mist); }
.footer__col a:hover { color: var(--lime); }
.footer__bar {
  display: flex; justify-content: space-between; align-items: center; gap: var(--s3); flex-wrap: wrap;
  margin-top: 72px; padding: 20px 0; border-top: 1px solid var(--line-dark); font-size: 14px; color: var(--mist);
}
.footer__bar .meta { color: var(--mist); font-size: 12px; }
.footer__giant {
  font-size: var(--fs-giant); font-weight: 900; font-stretch: 72%; letter-spacing: -0.045em; line-height: .85;
  padding: 24px 0 8px; text-wrap: balance; overflow-wrap: anywhere;
}
.footer__giant span { color: var(--lime); }
/* Per-letter rise (site.js splits the text): each letter slides up out of its own clip, left to right */
.footer__giant .ch { display: inline-block; overflow: hidden; vertical-align: bottom; padding-bottom: .06em; margin-bottom: -.06em; color: inherit; }
.footer__giant .ch__i { display: inline-block; color: inherit; }
.footer__giant.is-split .ch__i { transform: translateY(110%); transition: transform .7s var(--ease-out) calc(var(--i) * 45ms); }
.footer__giant.is-split.is-in .ch__i { transform: none; }
@media (max-width: 899px) { .footer__grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 559px) { .footer__grid { grid-template-columns: 1fr; } }

/* Reveal: progressive, one way */
.js .reveal { opacity: 0; transform: translateY(12px); transition: opacity .6s ease, transform .6s ease; }
.js .reveal.is-in { opacity: 1; transform: none; }

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

/* Split with a narrow side card (Diensten) */
.split--top { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); align-items: start; }
.split--top .plus li { color: var(--body-strong); }
a.card__foot { color: var(--ink); }
a.card__foot:hover { color: var(--violet); }
a.card__foot:hover .round { background: var(--violet); }
@media (max-width: 899px) { .split--top { grid-template-columns: 1fr; } }

/* Phone: comfortable tap targets and the smallest screens */
@media (max-width: 959px) {
  .textlink { display: inline-block; padding-block: 10px 6px; }
  .footer__grid a { display: inline-block; padding-block: 8px; }
}
@media (max-width: 359px) {
  .wordmark { font-size: 18px; }
  .menu-btn { padding: 0 12px; font-size: 13px; }
}
@media (max-width: 959px) { .crumbs a { display: inline-block; padding-block: 8px; } }
/* Content always fits the window; nothing may push a sideways scroll. */
html, body { overflow-x: clip; }
img, svg, video { max-width: 100%; height: auto; }

/* ===== Media: AI images (see design/CREDITS.md). Radius 4px, bands 0. ===== */
.media { position: relative; overflow: hidden; border-radius: var(--r-card); background: var(--bg-2); }
.media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.media--hero { position: absolute; inset: 0; }
.media--hero img { object-position: 50% 60%; }
.media--card { aspect-ratio: 4 / 3; margin-top: 16px; }
.media--card img { transition: transform .8s cubic-bezier(.2,.7,.2,1); }
.kabel > li:hover .media--card img { transform: scale(1.04); }
.media--fill { height: 100%; }
.media--side { aspect-ratio: 4 / 5; margin-bottom: var(--s3); }
.media--side.media--wide { aspect-ratio: 3 / 2; }
.svc-side { position: sticky; top: 96px; align-self: start; }
.media--band { border-radius: 0; height: clamp(260px, 38vw, 560px); }
.media--story { aspect-ratio: 4 / 5; max-height: 640px; }
.media--head { aspect-ratio: 4 / 5; max-height: 460px; }
.media--parallax img { height: 118%; margin-top: -9%; will-change: transform; }
.band-photo { background: var(--bg); }

.split--story { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: var(--s6); align-items: start; }
.split--expect { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); align-items: stretch; }
.split--expect .media--fill { min-height: 280px; }
.page-head--split { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: var(--s6); align-items: end; }
@media (max-width: 899px) {
  .split--story, .page-head--split { grid-template-columns: 1fr; gap: var(--s4); }
  .media--story, .media--head { aspect-ratio: 3 / 2; }
  .svc-side { position: static; }
  .media--side { aspect-ratio: 3 / 2; }
}

/* ===== Icons (Lucide, stroke currentColor) ===== */
.ic { width: 20px; height: 20px; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: transform .25s cubic-bezier(.2,.7,.2,1); }
.ic--arrow { width: 18px; height: 18px; display: inline-block; vertical-align: -3px; margin-left: 6px; }
.btn:hover .ic--arrow, .textlink:hover .ic--arrow, a.card__foot:hover .ic--arrow { transform: translateX(3px); }
.textlink .ic--arrow { width: 16px; height: 16px; }
.round .ic--arrow { margin: 0; }
.label--ic { display: flex; align-items: center; gap: 8px; }
.label--ic .ic { width: 18px; height: 18px; }
.kabel > li:hover .label--ic .ic { transform: translateY(-3px); }
.ic-badge {
  display: inline-flex; align-items: center; justify-content: center; width: 52px; height: 52px; border-radius: 50%;
  background: var(--lila); color: var(--violet); margin-bottom: var(--s3); transition: transform var(--dur) var(--ease-out), background-color var(--dur) var(--ease-out), color var(--dur) var(--ease-out);
}
.ic-badge .ic { width: 24px; height: 24px; }
.card .ic-badge { width: 44px; height: 44px; margin-bottom: 14px; background: var(--bg-2); }
.card--lila .ic-badge { background: var(--surface); }
.card:hover .ic-badge, .split:hover > div > .ic-badge { transform: translateY(-3px); background: var(--lime); color: var(--night); }
:root[data-theme="dark"] .ic-badge { color: var(--lime); }
:root[data-theme="dark"] .card:hover .ic-badge { color: var(--night); }
.ic-line { display: flex; gap: 8px; align-items: flex-start; }
.ic-line .ic { width: 18px; height: 18px; margin-top: 3px; color: var(--stone); }
/* stroke draw-in: inherited into the <use> shadow tree */
.js .ic--draw { stroke-dasharray: 120; stroke-dashoffset: 0; transition: stroke-dashoffset 1.1s cubic-bezier(.4,0,.2,1), transform .25s cubic-bezier(.2,.7,.2,1); }
.js .ic--draw.is-pending { stroke-dashoffset: 120; transition: none; }

/* ===== Hero fx ===== */
.hero--fx { position: relative; isolation: isolate; overflow: hidden; }
.hero-fx {
  position: absolute; inset: 0; width: 100%; height: 100%; z-index: -1; pointer-events: none;
  -webkit-mask-image: radial-gradient(120% 90% at 75% 45%, #000 35%, rgba(0,0,0,.45) 100%);
  mask-image: radial-gradient(120% 90% at 75% 45%, #000 35%, rgba(0,0,0,.45) 100%);
}
.hero__media { z-index: 1; }
.media--hero { box-shadow: 0 24px 60px -30px rgba(26, 11, 56, .45); }
.hero .w { display: inline-block; will-change: transform; }

/* ===== Buttons: lift + magnetic (transform set by motion.js) ===== */
/* transform stays out of the transition: motion.js tweens it every frame */
@media (hover: hover) {
  .btn--primary:hover, .btn--accent:hover { box-shadow: 0 10px 24px -12px rgba(26, 11, 56, .55); }
}

@media (prefers-reduced-motion: reduce) {
  .js .ic--draw.is-pending { stroke-dashoffset: 0; }
  .media--card img, .kabel > li:hover .media--card img { transform: none; }
  .media--parallax img { height: 100%; margin-top: 0; }
}

/* Night: violet labels lifted for contrast on deep ink */
:root[data-theme="dark"] .label, :root[data-theme="dark"] main .eyebrow { color: #A98BFF; }
@media (max-width: 899px) { .split--expect { grid-template-columns: 1fr; } .split--expect .media--fill { height: auto; aspect-ratio: 3 / 2; min-height: 0; } }

/* Kabel cards share one row grid on desktop: a two-line title no longer pushes its photo,
   text and link below the neighbouring cards. */
@media (min-width: 900px) {
  @supports (grid-template-rows: subgrid) {
    .kabel { row-gap: 0; }
    .kabel > li { display: grid; grid-template-rows: subgrid; grid-row: span 6; align-content: start; }
    .kabel .phase-title { align-self: end; }
    .kabel .textlink { margin-top: 0; align-self: start; }
  }
}

/* Home intro: text left, bereikbaar photo right (stacks under 900px via .split--story) */
.split--intro { align-items: center; }
.split--intro .media--story { max-height: 560px; }
/* Portrait photo cropped to 3:2 on phones: keep the face in frame */
.media--portrait img { object-position: 50% 22%; }
/* Night: violet links in cards are too dark on deep ink (about 2:1); lift them like the labels */
:root[data-theme="dark"] .card__body a { color: #A98BFF; }

/* ===== Interaction fx =====
   Every interactive element answers hover and keyboard focus the same way.
   Timing comes from --dur-fast / --dur / --dur-slow and --ease-out / --ease-in-out (:root).
   The transition sits on the resting state, so a fill fades in and back out at the same pace.
   prefers-reduced-motion: the global rule above zeroes every duration. */

/* Buttons: keyboard focus shows the hover fill */
.btn--primary:focus-visible { background: var(--night); color: var(--paper); }
.btn--accent:focus-visible { background: var(--night); color: var(--lime); }
.btn--ghost:focus-visible { background: var(--night); color: var(--paper); }
.on-violet .btn--ghost:focus-visible { background: var(--paper); color: var(--violet); }
.on-violet .btn--accent:focus-visible { background: var(--cream); color: var(--night); }
.site-header.is-dark .btn--ghost:focus-visible { background: var(--paper); color: var(--ink); }
:root[data-theme="dark"] .btn--primary:focus-visible,
:root[data-theme="dark"] .btn--ghost:focus-visible { background: var(--cream); color: var(--night); }
.btn:focus-visible .ic--arrow { transform: translateX(3px); }

/* Menu button: fades to violet (lime on dark surfaces) */
.menu-btn { transition: background-color var(--dur) var(--ease-out), color var(--dur) var(--ease-out); }
.menu-btn:hover, .menu-btn:focus-visible { background: var(--violet); color: var(--paper); }
.site-header.is-dark .menu-btn:hover, .site-header.is-dark .menu-btn:focus-visible,
:root[data-theme="dark"] .menu-btn:hover, :root[data-theme="dark"] .menu-btn:focus-visible,
.menu-open .menu-btn:hover { background: var(--lime); color: var(--night); }

/* Nav underline: grows from the left on hover, leaves to the right; the current page keeps it */
.nav a::after {
  content: ""; position: absolute; left: 12px; right: 12px; bottom: 2px; height: 2px; background: currentColor;
  transform: scaleX(0); transform-origin: 100% 50%; transition: transform var(--dur) var(--ease-out);
}
.nav a:hover::after, .nav a:focus-visible::after, .nav a[aria-current="page"]::after { transform: scaleX(1); transform-origin: 0 50%; }

/* Mobile overlay menu: lime underline sweeps over the divider, the label nudges right */
.menu li a { position: relative; transition: color var(--dur) var(--ease-out), padding-left var(--dur) var(--ease-out); }
.menu li a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--lime);
  transform: scaleX(0); transform-origin: 100% 50%; transition: transform var(--dur-slow) var(--ease-out);
}
.menu li a:hover, .menu li a:focus-visible { color: var(--lime); padding-left: 8px; }
.menu li a:hover::after, .menu li a:focus-visible::after, .menu li a[aria-current="page"]::after { transform: scaleX(1); transform-origin: 0 50%; }

/* Fill underline: a violet layer sweeps over the lime from left to right, and back on leave */
.textlink, .prose a {
  background:
    linear-gradient(var(--fx-fill), var(--fx-fill)) 0 100% / 0% 2px no-repeat,
    linear-gradient(var(--lime), var(--lime)) 0 100% / 100% 2px no-repeat;
  transition: background-size var(--dur-fill) var(--ease-in-out), color var(--dur) var(--ease-out);
  box-decoration-break: clone; -webkit-box-decoration-break: clone;
}
.prose a { color: var(--ink); padding-bottom: 2px; }
.textlink:hover, .textlink:focus-visible, .prose a:hover, .prose a:focus-visible {
  color: var(--ink);
  background-size: 100% 2px, 100% 2px;
}
.textlink:focus-visible .ic--arrow { transform: translateX(3px); }
@media (max-width: 959px) {
  /* these links carry extra tap padding on phones: keep the line close to the text */
  .footer__grid a, .crumbs a { background-position: 0 calc(100% - 7px); }
}

/* Thin underline for small text links: footer, crumbs, contact lines, menu foot, card body */
.footer__col a, .crumbs a, .card__body a, .contact-lines a, .menu__foot a {
  background: linear-gradient(currentColor, currentColor) 0 100% / 0% 1px no-repeat;
  transition: background-size var(--dur) var(--ease-out), color var(--dur) var(--ease-out);
}
.footer__col a:hover, .footer__col a:focus-visible, .crumbs a:hover, .crumbs a:focus-visible,
.card__body a:hover, .card__body a:focus-visible, .contact-lines a:hover, .contact-lines a:focus-visible,
.menu__foot a:hover, .menu__foot a:focus-visible { background-size: 100% 1px; }
.footer__col a:focus-visible { color: var(--lime); }
.crumbs a:focus-visible { color: var(--violet); }
.card__body a:hover, .card__body a:focus-visible { color: var(--ink); }

/* Sub nav tabs: colour fade, a faint rule previews the active bar */
.subnav a { transition: color var(--dur) var(--ease-out), border-color var(--dur) var(--ease-out); }
.subnav a:hover, .subnav a:focus-visible { color: var(--ink); border-color: var(--mist); }
.subnav a.is-active { border-color: var(--violet); }
:root[data-theme="dark"] .subnav a:hover:not(.is-active) { border-color: var(--line); }

/* Link cards: a card that holds a link lifts and casts a shadow */
.card, .js .card.reveal { transition: opacity .6s ease, transform var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out); }
.card:has(a[href]):hover, .card:has(a:focus-visible) { transform: var(--fx-lift); box-shadow: var(--fx-shadow); }
a.card:hover, a.card:focus-visible { transform: var(--fx-lift); box-shadow: var(--fx-shadow), 0 0 0 2px var(--violet); }
a.card__foot { transition: color var(--dur) var(--ease-out); }
a.card__foot:focus-visible { color: var(--violet); }
.round { transition: background-color var(--dur) var(--ease-out), transform var(--dur) var(--ease-out); }
a.card__foot:hover .round, a.card__foot:focus-visible .round { background: var(--violet); transform: scale(1.08); }
a.card__foot:focus-visible .ic--arrow { transform: translateX(3px); }
:root[data-theme="dark"] a.card__foot:hover, :root[data-theme="dark"] a.card__foot:focus-visible { color: var(--fx-fill); }

/* Images inside a link or a linked card: a slow, small zoom */
a .media img, .kabel > li:has(a:focus-visible) .media--card img { transition: transform .8s var(--ease-out); }
a:hover .media img, a:focus-visible .media img, .kabel > li:has(a:focus-visible) .media--card img { transform: scale(1.04); }
.kabel > li:has(a:focus-visible) .label--ic .ic { transform: translateY(-3px); }

/* Icon chips and badges */
.card:has(a:focus-visible) .ic-badge { transform: translateY(-3px); background: var(--lime); color: var(--night); }

/* Back to top: the lime disc lifts and fades to cream */
.to-top { transition: color var(--dur) var(--ease-out); }
.to-top span { transition: background-color var(--dur) var(--ease-out), transform var(--dur) var(--ease-out); }
.to-top:hover span, .to-top:focus-visible span { background: var(--cream); transform: translateY(-3px); }
.to-top:focus-visible { color: var(--lime); }

/* Wordmark: the lime dot pops */
.wordmark__dot { transition: transform var(--dur) var(--ease-out); }
.wordmark:hover .wordmark__dot, .wordmark:focus-visible .wordmark__dot { transform: scale(1.35); }

/* Scroll index: the bar previews its active width */
.scroll-index__bar { transition: width var(--dur) var(--ease-out), background-color var(--dur) var(--ease-out); }
.scroll-index a:hover .scroll-index__bar, .scroll-index a:focus-visible .scroll-index__bar { width: 26px; }

/* Focus ring fades in with the hover state instead of snapping */
a, button, summary { cursor: pointer; }

@media (prefers-reduced-motion: reduce) {
  .card:has(a[href]):hover, .card:has(a:focus-visible), a.card:hover { transform: none; }
  .menu li a:hover, .menu li a:focus-visible { padding-left: 0; }
  .js .faq__inner > * { transform: none; }
}