/* ==========================================================================
   Scramble Systems — stylesheet
   Neutral black-on-white. Geist Sans + Geist Mono, self-hosted.
   Arabic (RTL) falls back to Noto Sans Arabic, also self-hosted.
   ========================================================================== */

@font-face {
  font-family: "Geist";
  src: url("/fonts/geist-var.woff2") format("woff2-variations"),
       url("/fonts/geist-var.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Geist Mono";
  src: url("/fonts/geist-mono-var.woff2") format("woff2-variations"),
       url("/fonts/geist-mono-var.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Noto Sans Arabic";
  src: url("/fonts/noto-arabic-var.ttf") format("truetype-variations");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0600-06FF, U+0750-077F, U+FB50-FDFF, U+FE70-FEFF;
}

/* --------------------------------------------------------------- tokens -- */

:root {
  --ink: #0a0a0a;
  --ink-2: #171717;
  --muted: #6b6b6b;
  --muted-2: #858585;
  --line: #e3e3e3;
  --line-strong: #d4d4d4;
  --bg: #ffffff;
  --bg-alt: #f6f6f5;
  --bg-alt-2: #fafaf9;
  --accent: #d1743a;

  --sans: "Geist", "Noto Sans Arabic", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  --mono: "Geist Mono", "Noto Sans Arabic", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  --frame: 1200px;
  --pad: clamp(20px, 4vw, 56px);

  --step-hero: clamp(38px, 6.1vw, 72px);
  --step-h2: clamp(22px, 2.4vw, 29px);
  --step-h3: clamp(19px, 1.6vw, 21px);
  --step-lead: clamp(16px, 1.45vw, 19px);
  --step-body: clamp(14px, 1.15vw, 15.5px);
  --step-mono: 11px;
}

:lang(ar) h1, :lang(ar) h2, :lang(ar) h3 { line-height: 1.32; letter-spacing: 0; }
:lang(ar) .hero h1 { line-height: 1.24; letter-spacing: 0; }
:lang(ar) body { line-height: 1.75; }

:lang(ar) {
  --sans: "Noto Sans Arabic", "Geist", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  --mono: "Noto Sans Arabic", "Geist Mono", ui-monospace, monospace;
}

/* ---------------------------------------------------------------- reset -- */

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

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

@media (prefers-reduced-motion: reduce) {
  .ecg__line { animation: none; stroke-dashoffset: 0; }
  .ecg__dots { animation: none; opacity: 1; }
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  font-size: var(--step-body);
  line-height: 1.6;
  font-feature-settings: "kern" 1, "liga" 1;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

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

h1, h2, h3, h4 {
  margin: 0;
  font-weight: 600;
  letter-spacing: -0.022em;
  line-height: 1.12;
  text-wrap: balance;
}

p { margin: 0; }

a { color: inherit; }

ul, ol { margin: 0; padding: 0; }

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

.visually-hidden {
  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;
  inset-inline-start: 8px;
  top: -60px;
  z-index: 100;
  background: var(--ink);
  color: #fff;
  padding: 10px 16px;
  font-size: 14px;
  text-decoration: none;
  transition: top 0.15s ease;
}
.skip-link:focus { top: 8px; }

/* ---------------------------------------------------------------- frame -- */

.frame {
  max-width: var(--frame);
  margin: 0 auto;
  border-inline: 1px solid var(--line);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.wrap { padding-inline: var(--pad); }

.section { border-bottom: 1px solid var(--line); }
.section--alt { background: var(--bg-alt); }
.section--alt2 { background: var(--bg-alt-2); }
.section__inner { padding-block: clamp(44px, 5vw, 68px); }

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

/* --------------------------------------------------------------- header -- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: saturate(140%) blur(8px);
  border-bottom: 1px solid var(--line);
}

.site-header__inner {
  display: flex;
  align-items: center;
  gap: 24px;
  min-height: 64px;
  padding-block: 12px;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-family: var(--mono);
  font-size: 12.5px;
  font-weight: 500;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
}
.brand__dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--accent);
  flex: none;
}
:lang(ar) .brand { letter-spacing: 0; font-size: 14px; }

.nav {
  display: flex;
  align-items: center;
  gap: clamp(14px, 1.8vw, 26px);
  margin-inline: auto;
}

.nav a {
  font-size: 13.5px;
  color: var(--muted);
  text-decoration: none;
  white-space: nowrap;
  transition: color 0.12s ease;
}
.nav a:hover, .nav a[aria-current="page"] { color: var(--ink); }

/* Taalkeuze, LinkedIn en de CTA vormen één groep rechts: gelijke hoogte,
   gelijke radius, kleine gap. Los van elkaar lazen ze als drie losse
   elementen die toevallig naast elkaar stonden. */
.header-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-inline-start: clamp(10px, 1.4vw, 20px);
}

.icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border: 1px solid var(--line-strong);
  border-radius: 2px;
  color: var(--muted);
  transition: color 0.12s ease, border-color 0.12s ease;
}
.icon-btn svg { width: 17px; height: 17px; display: block; }
.icon-btn:hover { color: var(--ink); border-color: var(--ink); }

.nav-toggle {
  display: none;
  margin-inline-start: auto;
  background: none;
  border: 1px solid var(--line-strong);
  padding: 8px 12px;
  font: inherit;
  font-size: 13px;
  cursor: pointer;
  border-radius: 2px;
}

/* --------------------------------------------------------------- footer -- */

.site-footer {
  margin-top: auto;
  border-top: 1px solid var(--line);
  background: var(--bg);
}
.site-footer__inner {
  padding-block: 44px 36px;
  display: grid;
  grid-template-columns: 1.5fr repeat(3, minmax(0, 1fr));
  gap: 32px;
}
.site-footer h2 {
  font-size: 14px;
  letter-spacing: 0;
  color: var(--bg);
  font-weight: 600;
  margin-bottom: 14px;
}
.site-footer ul { list-style: none; display: grid; gap: 9px; }
.site-footer a { color: var(--muted); text-decoration: none; font-size: 14px; }
.site-footer a:hover { color: var(--ink); text-decoration: underline; }
.site-footer__note {
  border-top: 1px solid var(--line);
  padding-block: 20px 32px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 24px;
  align-items: baseline;
  font-size: 13px;
  color: var(--muted-2);
}
.site-footer__desc { color: var(--muted); font-size: 14px; max-width: 42ch; margin-top: 12px; }

/* -------------------------------------------------------------- buttons -- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: var(--ink);
  color: #fff;
  border: 1px solid var(--ink);
  min-height: 44px;
  padding: 11px 20px;
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 500;
  line-height: 1.2;
  text-decoration: none;
  border-radius: 2px;
  cursor: pointer;
  transition: background 0.14s ease, border-color 0.14s ease;
}
.btn:hover { background: #2e2e2e; border-color: #2e2e2e; }

.btn--ghost {
  background: transparent;
  color: var(--ink);
  border-color: var(--line-strong);
}
.btn--ghost:hover { background: var(--bg-alt); border-color: var(--ink); }

.btn--sm { min-height: 36px; padding: 8px 14px; font-size: 12.5px; }
.btn--lg { min-height: 50px; padding: 13px 28px; font-size: 15px; }

.link-underline {
  font-size: 13.5px;
  text-decoration: underline;
  text-underline-offset: 4px;
  text-decoration-thickness: 1px;
  color: var(--ink);
  text-decoration-color: var(--line-strong);
}
.link-underline:hover { text-decoration-color: var(--ink); }

.actions {
  display: flex;
  align-items: center;
  gap: clamp(16px, 2vw, 28px);
  flex-wrap: wrap;
}

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

.hero__inner {
  padding-block: clamp(14px, 1.6vw, 24px) 0;
  text-align: center;
}

/* De knoppen staan onder de pulslijn, niet in hero__inner: eerst de claim,
   dan het bewijs, dan pas de vraag om te handelen. */
.hero__actions {
  text-align: center;
  padding-block: 0;
}
.hero__actions .actions { gap: 12px; }

.hero h1 {
  font-size: clamp(33px, 4.4vw, 54px);
  line-height: 1.08;
  letter-spacing: -0.03em;
  font-weight: 600;
  /* 36ch laat de kop op de komma breken in twee regels van vergelijkbare
     lengte. Bij 19ch werd het 368 / 601 / 530px — een scheve driehoek. */
  max-width: 36ch;
  margin-inline: auto;
}

.hero__lead {
  margin-top: clamp(22px, 2.4vw, 32px);
  margin-inline: auto;
  font-size: clamp(16px, 1.5vw, 18.5px);
  line-height: 1.6;
  color: var(--muted);
  max-width: 72ch;
}

.hero .actions { margin-top: clamp(34px, 3.6vw, 46px); justify-content: center; }

/* ------------------------------------------------------------ ecg strip -- */

.ecg {
  padding-block: clamp(48px, 5vw, 66px) 0;
}
.ecg__plot { position: relative; }

/* Marker positions. These five percentages must stay in step with
   ECG_MARK_PERCENT in src/svg.mjs, which places the dots on the trace. */
.ecg__marks {
  position: relative;
  height: 40px;
  margin-top: 6px;
}
.ecg__mark {
  position: absolute;
  top: 0;
  transform: translateX(-50%);
  text-align: center;
  white-space: nowrap;
}
/* Moeten gelijk blijven aan ECG_MARK_PERCENT in src/svg.mjs. */
.ecg__mark:nth-child(1) { inset-inline-start: 12%; }
.ecg__mark:nth-child(2) { inset-inline-start: 26.9%; }
.ecg__mark:nth-child(3) { inset-inline-start: 40.7%; }
.ecg__mark:nth-child(4) { inset-inline-start: 63.6%; }
.ecg__mark:nth-child(5) { inset-inline-start: 84%; }

.ecg__time {
  display: block;
  font-family: var(--mono);
  font-size: var(--step-mono);
  letter-spacing: 0.04em;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.ecg__label {
  display: block;
  font-family: var(--mono);
  font-size: var(--step-mono);
  letter-spacing: 0.02em;
  color: var(--muted-2);
  margin-top: 3px;
}
.ecg__trace {
  width: 100%;
  height: 108px;
  display: block;
}
:lang(ar) .ecg__trace { transform: scaleX(-1); }

/* De lijn tekent zich van het alarm naar de shock, zodat het oog daar
   eindigt. pathLength="1" in svg.mjs maakt de lengte onafhankelijk van
   de viewBox, dus dasharray hoeft niet uitgerekend te worden. */
.ecg__line {
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  animation: ecg-draw 2.4s cubic-bezier(0.25, 0.6, 0.3, 1) 0.25s forwards;
}
.ecg__dots {
  opacity: 0;
  animation: ecg-dots 0.7s ease-out 1.5s forwards;
}
@keyframes ecg-draw { to { stroke-dashoffset: 0; } }
@keyframes ecg-dots { to { opacity: 1; } }

/* De grafiek is het bewijsstuk bij de kop; hem op smalle schermen weglaten
   haalt dat weg. Onder 1080px scrolt hij horizontaal, net als het
   cyclusdiagram, zodat elk label aan zijn punt op de lijn gekoppeld blijft.
   960px is de smalste breedte waarbij "Responder accepted" en "CPR started"
   elkaar niet raken: hun onderlinge afstand is 13,8% van de breedte. */
@media (max-width: 1080px) {
  .ecg__plot {
    overflow-x: auto;
    overscroll-behavior-x: contain;
    padding-bottom: 10px;
    -webkit-overflow-scrolling: touch;
  }
  /* Zonder dit lijkt de grafiek te eindigen waar het scherm eindigt en
     vindt niemand de shock. De vervaging valt bij volledig doorgescrolde
     stand in de lege ruimte na het laatste label. */
  .ecg__plot {
    -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 44px), transparent);
    mask-image: linear-gradient(to right, #000 calc(100% - 44px), transparent);
  }
  :lang(ar) .ecg__plot {
    -webkit-mask-image: linear-gradient(to left, #000 calc(100% - 44px), transparent);
    mask-image: linear-gradient(to left, #000 calc(100% - 44px), transparent);
  }
  .ecg__trace, .ecg__marks { min-width: 960px; }
  .ecg__marks { height: 46px; }
  .ecg__mark { width: 116px; white-space: normal; }
}
@media (max-width: 780px) {
  .ecg__trace { height: 88px; }
}
.ecg__caption {
  text-align: center;
  font-size: 15px;
  line-height: 1.5;
  color: var(--ink);
  max-width: 82ch;
  margin: 0 auto clamp(12px, 1.4vw, 18px);
}

/* ---------------------------------------------------------------- cards -- */

.cards {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0;
}
.cards > * {
  padding-inline: clamp(14px, 1.7vw, 24px);
  border-inline-start: 1px solid var(--line);
}
.cards > *:first-child { border-inline-start: 0; padding-inline-start: 0; }
.cards > *:last-child { padding-inline-end: 0; }

.card { display: flex; flex-direction: column; }

.card__icon {
  width: 38px; height: 38px;
  border: 1px solid var(--line-strong);
  border-radius: 3px;
  display: grid;
  place-items: center;
  margin-bottom: 16px;
  background: #fff;
  flex: none;
}
.card__icon svg { width: 19px; height: 19px; }

.card h3 { font-size: var(--step-h3); font-weight: 600; letter-spacing: -0.015em; }
.card p {
  margin-top: 9px;
  margin-bottom: 22px;
  color: var(--muted);
  font-size: var(--step-body);
  line-height: 1.6;
}

.card__tags {
  margin-top: auto;
  padding-top: 20px;
  border-top: 1px solid var(--line);
  display: flex;
  align-content: flex-start;
  align-items: flex-start;
  gap: 6px;
  flex-wrap: wrap;
  list-style: none;
  min-height: 76px;
}
.card__tags li {
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  padding: 3px 9px;
  font-size: 12px;
  line-height: 1.4;
  color: var(--muted);
  background: var(--bg);
  white-space: nowrap;
}

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

/* ------------------------------------------------------------- two-col --- */

.split {
  display: grid;
  grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
  gap: clamp(32px, 4.5vw, 64px);
  align-items: center;
}

.section__lead {
  margin-top: 14px;
  color: var(--muted);
  font-size: var(--step-lead);
  line-height: 1.55;
  max-width: 44ch;
}

h2.section__title { font-size: var(--step-h2); font-weight: 600; }
.section__title + .prose,
.section__title + .faq { margin-top: clamp(20px, 2vw, 28px); }
.layer-grid + .section__lead { margin-top: clamp(24px, 2.6vw, 34px); }

.checks { list-style: none; display: grid; gap: 12px; margin-top: 24px; }
.checks li {
  display: flex;
  gap: 11px;
  align-items: baseline;
  font-size: var(--step-body);
  line-height: 1.55;
}
.checks li::before {
  content: "";
  width: 11px; height: 11px;
  flex: none;
  background: currentColor;
  -webkit-mask: var(--check) center / contain no-repeat;
  mask: var(--check) center / contain no-repeat;
  transform: translateY(1px);
}
:root {
  --check: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path d='M2 8.6 6 12.6 14 3.6' fill='none' stroke='black' stroke-width='2'/></svg>");
}

.cycle { width: 100%; max-width: 100%; height: auto; margin-inline: auto; direction: ltr; }

/* ----------------------------------------------------------- who we are -- */

.colset {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0;
  margin-top: 26px;
}
.colset > * {
  padding-inline: clamp(14px, 1.8vw, 26px);
  border-inline-start: 1px solid var(--line);
}
.colset > *:first-child { border-inline-start: 0; padding-inline-start: 0; }
.colset > *:last-child { padding-inline-end: 0; }

.colset h3 {
  font-size: var(--step-h3);
  letter-spacing: -0.015em;
  font-weight: 600;
  color: var(--ink);
  margin-bottom: 14px;
}
.colset p { color: var(--muted); font-size: var(--step-body); line-height: 1.6; }
.colset p + p { margin-top: 14px; }
:lang(ar) .colset h3 { letter-spacing: 0; font-size: 14px; }

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

.cta-band { padding-block: clamp(40px, 5vw, 64px); }
.cta-band__box {
  border: 1px solid var(--line-strong);
  border-radius: 3px;
  padding: clamp(28px, 3.4vw, 44px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: clamp(28px, 4vw, 56px);
  flex-wrap: wrap;
  background: #fff;
}
.cta-band__icon {
  width: 44px; height: 44px;
  border: 1px solid var(--line-strong);
  border-radius: 3px;
  display: grid; place-items: center;
  flex: none;
}
.cta-band__icon svg { width: 20px; height: 20px; }
.cta-band__text { flex: 1 1 320px; min-width: 0; }
.cta-band__text h2 { font-size: var(--step-h2); font-weight: 600; letter-spacing: -0.02em; }
.cta-band__text p { margin-top: 12px; color: var(--muted); font-size: var(--step-body); max-width: 52ch; }
.cta-band__actions {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 10px;
  flex: none;
}

/* ------------------------------------------------------------ page head -- */

.page-head__inner { padding-block: clamp(44px, 5.5vw, 76px) clamp(30px, 3.5vw, 44px); }
.page-head h1 {
  font-size: clamp(32px, 4.4vw, 52px);
  letter-spacing: -0.03em;
  font-weight: 600;
  max-width: 20ch;
}
.page-head p {
  margin-top: 18px;
  font-size: var(--step-lead);
  color: var(--muted);
  line-height: 1.55;
  max-width: 62ch;
}

/* ---------------------------------------------------------------- prose -- */

.prose { max-width: 68ch; }
.prose > * + * { margin-top: 18px; }
.prose h2 {
  font-size: clamp(20px, 2vw, 25px);
  font-weight: 600;
  margin-top: 42px;
  padding-top: 22px;
  border-top: 1px solid var(--line);
}
.prose h3 { font-size: var(--step-h3); font-weight: 600; margin-top: 30px; }
.prose p, .prose li { color: var(--ink-2); line-height: 1.7; font-size: var(--step-body); }
.prose ul, .prose ol { padding-inline-start: 22px; display: grid; gap: 9px; }
.prose li::marker { color: var(--muted-2); }
.prose a { text-decoration: underline; text-underline-offset: 3px; }
.prose strong { font-weight: 600; }
.prose blockquote {
  border-inline-start: 2px solid var(--line-strong);
  padding-inline-start: 18px;
  color: var(--muted);
}
.prose code {
  font-family: var(--mono);
  font-size: 0.92em;
  background: var(--bg-alt);
  padding: 2px 5px;
  border-radius: 2px;
}
.prose pre {
  background: var(--bg-alt);
  border: 1px solid var(--line);
  border-radius: 3px;
  padding: 16px;
  overflow-x: auto;
}
.prose pre code { background: none; padding: 0; }
.prose table { width: 100%; border-collapse: collapse; font-size: var(--step-body); }
.prose th, .prose td { border: 1px solid var(--line); padding: 10px 12px; text-align: start; }
.prose th { background: var(--bg-alt); font-weight: 600; }
.table-scroll { overflow-x: auto; }

/* ------------------------------------------------------------------ faq -- */

.faq-group { padding-block: clamp(34px, 4vw, 52px); }
.faq-group + .faq-group { border-top: 1px solid var(--line); }
.faq { display: grid; max-width: 78ch; border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary {
  cursor: pointer;
  list-style: none;
  padding: 20px 40px 20px 0;
  font-size: clamp(15px, 1.4vw, 17px);
  font-weight: 500;
  position: relative;
}
:lang(ar) .faq summary { padding: 20px 0 20px 40px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+";
  position: absolute;
  inset-inline-end: 6px;
  top: 50%;
  transform: translateY(-50%);
  font-family: var(--mono);
  font-size: 18px;
  color: var(--muted-2);
  line-height: 1;
}
.faq details[open] summary::after { content: "\2212"; }
.faq details > div { padding-bottom: 22px; color: var(--muted); max-width: 66ch; }
.faq details > div p + p { margin-top: 12px; }

/* --------------------------------------------------------------- blog ---- */

.post-list { list-style: none; display: grid; border-top: 1px solid var(--line); max-width: 78ch; }
.post-list li { border-bottom: 1px solid var(--line); }
.post-list a {
  display: grid;
  grid-template-columns: 110px minmax(0, 1fr);
  gap: 20px;
  padding: 22px 0;
  text-decoration: none;
  align-items: baseline;
}
.post-list time {
  font-family: var(--mono);
  font-size: var(--step-mono);
  color: var(--muted-2);
  letter-spacing: 0.04em;
}
.post-list h2 { font-size: clamp(16px, 1.5vw, 18px); font-weight: 600; }
.post-list p { margin-top: 6px; color: var(--muted); font-size: 14px; }
.post-list a:hover h2 { text-decoration: underline; text-underline-offset: 3px; }

.post-meta {
  font-family: var(--mono);
  font-size: var(--step-mono);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted-2);
  margin-bottom: 14px;
}

.empty-state {
  border: 1px dashed var(--line-strong);
  border-radius: 3px;
  padding: 32px;
  color: var(--muted);
  max-width: 62ch;
}

/* ---------------------------------------------------------------- forms -- */

.form-holder { margin-top: clamp(22px, 2.4vw, 30px); }
.form-holder + .section__lead { margin-top: clamp(22px, 2.4vw, 30px); }
.form { max-width: 34rem; display: grid; gap: 18px; }
.field { display: grid; gap: 7px; }
.field label { font-size: 13.5px; font-weight: 500; }
.field .hint { font-size: 12.5px; color: var(--muted-2); }
.field input, .field select, .field textarea {
  font: inherit;
  font-size: 15px;
  color: var(--ink);
  background: #fff;
  border: 1px solid var(--line-strong);
  border-radius: 2px;
  padding: 11px 12px;
  width: 100%;
}
.field textarea { min-height: 130px; resize: vertical; }
.field input:focus-visible, .field select:focus-visible, .field textarea:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 1px;
  border-color: var(--ink);
}
.field input[aria-invalid="true"], .field textarea[aria-invalid="true"] { border-color: #b42318; }
.field .error { font-size: 12.5px; color: #b42318; min-height: 0; }

.consent { display: flex; gap: 10px; align-items: flex-start; font-size: 13.5px; color: var(--muted); }
.consent input { width: 16px; height: 16px; margin-top: 3px; flex: none; }
.consent a { color: var(--ink); }

.form__status {
  font-size: 14px;
  padding: 12px 14px;
  border-radius: 2px;
  border: 1px solid var(--line-strong);
  background: var(--bg-alt);
}
.form__status[data-state="error"] { border-color: #f0b4ae; background: #fdf3f2; color: #7a271a; }
.form__status[data-state="ok"] { border-color: #b7d9c2; background: #f2f9f4; color: #1a4a2a; }
.form__status[hidden] { display: none; }

.hp-field {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.form-disabled-note {
  border: 1px solid var(--line-strong);
  background: var(--bg-alt);
  border-radius: 3px;
  padding: 18px;
  font-size: 14px;
  color: var(--ink-2);
  max-width: 34rem;
}

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

.contact-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  gap: clamp(32px, 5vw, 64px);
  align-items: start;
}
.contact-card {
  border: 1px solid var(--line);
  border-radius: 3px;
  padding: clamp(20px, 2.4vw, 28px);
  background: var(--bg-alt-2);
}
.contact-card h2 { font-size: var(--step-h3); font-weight: 600; }
.contact-card dl { margin: 18px 0 0; display: grid; gap: 14px; }
.contact-card dt {
  font-family: var(--mono);
  font-size: var(--step-mono);
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--muted-2);
}
.contact-card dd { margin: 4px 0 0; font-size: var(--step-body); }
:lang(ar) .contact-card dt { letter-spacing: 0; font-size: 13px; }

/* -------------------------------------------------------------- erpve ---- */

.layer-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0;
  border-top: 1px solid var(--line);
  margin-top: 34px;
}
.layer-grid > * {
  padding: 28px clamp(16px, 2vw, 28px) 28px 0;
  border-inline-start: 1px solid var(--line);
}
.layer-grid > *:first-child { border-inline-start: 0; }
.layer-grid > *:not(:first-child) { padding-inline-start: clamp(16px, 2vw, 28px); }
.layer-grid h3 { font-size: var(--step-h3); font-weight: 600; }
.layer-grid p { margin-top: 10px; color: var(--muted); }
.layer-grid ul { list-style: none; margin-top: 16px; display: grid; gap: 10px; }
.layer-grid li {
  display: flex; gap: 10px; align-items: baseline;
  font-size: var(--step-body); line-height: 1.55;
}
.layer-grid li::before {
  content: "";
  width: 5px; height: 5px; flex: none;
  background: var(--muted-2);
  border-radius: 50%;
  transform: translateY(-3px);
}

.steps { list-style: none; counter-reset: step; display: grid; gap: 0; border-top: 1px solid var(--line); margin-top: 30px; max-width: 72ch; }
.steps li {
  counter-increment: step;
  border-bottom: 1px solid var(--line);
  padding: 20px 0 20px 56px;
  position: relative;
}
:lang(ar) .steps li { padding: 20px 56px 20px 0; }
.steps li::before {
  content: "0" counter(step);
  position: absolute;
  inset-inline-start: 0;
  top: 21px;
  font-family: var(--mono);
  font-size: var(--step-mono);
  letter-spacing: 0.06em;
  color: var(--muted-2);
}
.steps h3 { font-size: 16px; font-weight: 600; }
.steps p { margin-top: 6px; color: var(--muted); }

/* ------------------------------------------------------------ 404, misc -- */

.center-block {
  padding-block: clamp(70px, 12vw, 150px);
  text-align: center;
}
.center-block h1 { font-size: clamp(30px, 4vw, 46px); margin-inline: auto; }
.center-block p { margin: 18px auto 0; color: var(--muted); max-width: 48ch; font-size: var(--step-lead); }
.center-block .actions { justify-content: center; margin-top: 30px; }

/* Zelfde hoogte en radius als .btn--sm, zodat de drie op één lijn liggen. */
.lang-switch {
  display: inline-flex;
  align-items: center;
  height: 36px;
  padding-inline: 11px;
  font-family: var(--mono);
  font-size: var(--step-mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  text-decoration: none;
  border: 1px solid var(--line-strong);
  border-radius: 2px;
  white-space: nowrap;
}
.lang-switch:hover { color: var(--ink); border-color: var(--ink); }

/* ------------------------------------------------------------- cookies --- */

.cookie-bar {
  position: fixed;
  inset-inline: 0;
  bottom: 0;
  z-index: 80;
  background: #fff;
  border-top: 1px solid var(--line-strong);
  box-shadow: 0 -6px 24px rgba(0, 0, 0, 0.06);
}
.cookie-bar[hidden] { display: none; }
.cookie-bar__inner {
  max-width: var(--frame);
  margin: 0 auto;
  padding: 18px var(--pad);
  display: flex;
  gap: 20px;
  align-items: center;
  flex-wrap: wrap;
}
.cookie-bar p { font-size: 13.5px; color: var(--muted); flex: 1 1 320px; max-width: 70ch; }
.cookie-bar .actions { gap: 10px; }

/* ---------------------------------------------------------- responsive -- */

@media (max-width: 940px) {
  .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 40px; }
  .cards > *:nth-child(3) { border-inline-start: 0; padding-inline-start: 0; }
  .cards > *:nth-child(2) { padding-inline-end: 0; }
  .split { grid-template-columns: minmax(0, 1fr); }
  .colset { grid-template-columns: minmax(0, 1fr); row-gap: 34px; }
  .colset > * { border-inline-start: 0; padding-inline: 0; padding-top: 26px; border-top: 1px solid var(--line); }
  .colset > *:first-child { padding-top: 0; border-top: 0; }
  .contact-grid { grid-template-columns: minmax(0, 1fr); }
  .layer-grid { grid-template-columns: minmax(0, 1fr); }
  .layer-grid > * { border-inline-start: 0; padding-inline: 0; border-bottom: 1px solid var(--line); }
  .site-footer__inner { grid-template-columns: 1fr 1fr; }
  .site-footer__inner > *:first-child { grid-column: 1 / -1; }
}

@media (max-width: 780px) {
  .nav {
    display: none;
    position: absolute;
    inset-inline: 0;
    top: 100%;
    background: #fff;
    border-bottom: 1px solid var(--line);
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 8px var(--pad) 18px;
  }
  .nav[data-open="true"] { display: flex; }
  .nav a { padding: 12px 0; font-size: 15px; border-bottom: 1px solid var(--line); }
  .nav a:last-child { border-bottom: 0; }
  .nav-toggle { display: inline-block; }
  .site-header__inner { position: relative; }
  .header-cta { display: none; }
  /* Merknaam, taalkeuze, LinkedIn en Menu moeten samen binnen 320px passen;
     zonder deze inperkingen scrolt de pagina horizontaal op een iPhone SE. */
  .site-header__inner { gap: 10px; }
  .site-header .brand { font-size: 11.5px; letter-spacing: 0.06em; gap: 7px; }
  .header-actions { order: 2; margin-inline-start: auto; gap: 6px; }
  .header-actions .lang-switch { height: 32px; padding-inline: 8px; }
  .header-actions .icon-btn { width: 32px; height: 32px; }
  .nav-toggle { order: 3; margin-inline-start: 6px; padding: 7px 10px; }

  /* Twee knoppen van ongelijke breedte naast elkaar lezen als rommel op een
     smal scherm; onder elkaar en even breed is de conventie. */
  .hero__actions .actions { flex-direction: column; align-items: stretch; }
  .hero__actions .btn { width: 100%; }
  .cta-band__actions { width: 100%; }
  .cta-band__actions .btn { flex: 1 1 0; }
  .post-list a { grid-template-columns: minmax(0, 1fr); gap: 6px; }
}

/* iPhone SE (320px) is de smalste maat waarop de header nog moet passen. */
@media (max-width: 400px) {
  .site-header .brand { font-size: 11px; letter-spacing: 0.035em; gap: 6px; }
  .site-header__inner { gap: 8px; padding-inline: 14px; }
  .header-actions { gap: 5px; }
  /* In het Arabisch staat er "ENGLISH" in plaats van het kortere "العربية";
     zonder dit loopt de header daar 17px over de rand. */
  .header-actions .lang-switch { padding-inline: 6px; font-size: 10px; letter-spacing: 0.04em; }
  .nav-toggle { padding: 7px 9px; margin-inline-start: 5px; }
}

@media (max-width: 640px) {
  .cycle-holder { overflow-x: auto; padding-bottom: 6px; }
  .cycle { min-width: 440px; }
}

@media (max-width: 560px) {
  .cards { grid-template-columns: minmax(0, 1fr); }
  .cards > * { border-inline-start: 0; padding-inline: 0; }
  .card__tags { justify-content: flex-start; gap: 8px; }
  .site-footer__inner { grid-template-columns: 1fr; }
  .site-footer__inner > *:first-child { grid-column: auto; }
}

/* ---------------------------------------------- 2026 refresh block -- */


.stake {
  margin-top: clamp(44px, 4.8vw, 64px);
  padding-bottom: clamp(34px, 4.2vw, 60px);
}
.stake__list {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0;
  border-top: 1px solid var(--line);
  padding-top: 26px;
}
.stake__item {
  padding-inline: clamp(14px, 1.8vw, 26px);
  border-inline-start: 1px solid var(--line);
}
.stake__item:first-child { border-inline-start: 0; padding-inline-start: 0; }
.stake__item:last-child { padding-inline-end: 0; }
.stake__fact {
  font-size: var(--step-lead);
  line-height: 1.45;
  color: var(--ink-2);
  max-width: 32ch;
}
.stake__src {
  margin-top: 10px;
  font-size: 13px;
  color: var(--muted-2);
}

.audience { display: flex; flex-direction: column; height: 100%; }
.audience h3 {
  font-family: var(--sans);
  font-size: var(--step-h3);
  font-weight: 600;
  letter-spacing: -0.015em;
  text-transform: none;
  color: var(--ink);
}
.audience p { margin-top: 10px; font-size: var(--step-body); color: var(--muted); max-width: 34ch; }
.audience p:last-child { margin-top: auto; padding-top: 18px; }

.erpve-home__note {
  margin-top: 26px;
  padding-top: 20px;
  border-top: 1px solid var(--line);
  font-size: var(--step-body);
  color: var(--muted);
  max-width: 60ch;
}
.actions--stacked { margin-top: 30px; }

.stage { padding-block: 0; }
.stage .section__inner { padding-block: clamp(38px, 4vw, 54px); }
.stage__date {
  margin-top: 6px;
  font-size: var(--step-body);
  color: var(--muted-2);
}
.stage__body {
  margin-top: 16px;
  font-size: var(--step-lead);
  line-height: 1.55;
  color: var(--ink-2);
  max-width: 74ch;
}

/* Een LinkedIn-icoon zonder naam zegt niet van wie het profiel is. Naam en
   merk staan daarom samen op één regel, in de footer en in "Who we are". */
.profile-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
  color: var(--ink-2);
}
.profile-link svg { width: 16px; height: 16px; flex: none; color: var(--muted-2); }
.profile-link span {
  text-decoration: underline;
  text-underline-offset: 4px;
  text-decoration-thickness: 1px;
  text-decoration-color: var(--line-strong);
}
.profile-link:hover { color: var(--ink); }
.profile-link:hover svg { color: var(--ink); }
.profile-link:hover span { text-decoration-color: var(--ink); }

.who__link { margin-top: 16px; font-size: 14px; }
.site-footer__social { margin-top: 10px; }
.site-footer__social .profile-link { font-size: 14px; }

@media (max-width: 780px) {
  .stake__list { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .stake__item { border-inline-start: 0; padding-inline: 0; }
  .stake__fact, .audience p { max-width: none; }
}

/* ------------------------------------------------------------- printing -- */

@media print {
  .site-header, .site-footer, .cookie-bar, .actions, .nav-toggle { display: none !important; }
  .frame { border: 0; }
  body { font-size: 11pt; }
}