/* jeroen-janssen.com — STRAK design system · v1 · 2026-08
     PREVIEW — "STRAK" (v5)
     Systeem-DNA: papier, ink, één accent (signaalrood),
     strakke grotesk in zinskast, mono voor alle micro-labels,
     genummerde secties, hairlines, vierkante chips,
     [ haken ] als CTA. Geen ronde hoeken, geen schaduwen,
     geen kaarten. Het ■ blijft de punt achter claims.
     Logo: wordmark 'Jeroen Janssen' + rode ■ punt (L1).
     ============================================================ */
  :root {
    --papier: #F2F1EB;
    --inkt: #111110;
    --inkt-2: #4A4842;
    --grijs: #8A877D;
    --lijn: #DCDAD1;
    --rood: #E32119;
    --rood-d: #C41B14;
    --f: 'Inter', -apple-system, sans-serif;
    --fd: 'Inter Tight', 'Inter', sans-serif;
    --mono: 'IBM Plex Mono', Menlo, monospace;
  }
  * { margin: 0; padding: 0; box-sizing: border-box; }
  html { scroll-behavior: smooth; }
  body { font-family: var(--f); background: var(--papier); color: var(--inkt); line-height: 1.55; -webkit-font-smoothing: antialiased; }
  a { color: inherit; text-decoration: none; }
  img { display: block; max-width: 100%; }
  .frame { max-width: 1280px; margin: 0 auto; padding: 0 clamp(20px, 3.5vw, 48px); }

  /* Kern-onderdelen */
  .punt { display: inline-block; width: 0.32em; height: 0.32em; background: var(--rood); margin-left: 0.14em; }
  .mono { font-family: var(--mono); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--grijs); }
  .mono .rd { color: var(--rood); }
  .sq { display: inline-block; width: 7px; height: 7px; background: var(--rood); flex: 0 0 7px; }
  .chip { display: inline-flex; align-items: center; justify-content: center; min-width: 26px; height: 18px; padding: 0 5px; border: 1px solid var(--inkt); font-family: var(--mono); font-size: 10px; letter-spacing: 0.06em; }
  .chip.rd { border-color: var(--rood); color: var(--rood); }
  .chip.vol { background: var(--rood); border-color: var(--rood); color: #fff; }
  .wordmark { font-family: var(--fd); font-weight: 700; font-size: 17px; letter-spacing: -0.02em; }
  .display { font-family: var(--fd); font-weight: 700; letter-spacing: -0.035em; line-height: 1.0; }
  .sectiekop { display: flex; align-items: baseline; gap: 14px; padding: 14px 0; border-bottom: 1px solid var(--lijn); }
  .sectiekop .nr { font-family: var(--mono); font-size: 11px; letter-spacing: 0.08em; color: var(--rood); }
  .sectiekop .sl { font-family: var(--mono); font-size: 11px; letter-spacing: 0.08em; color: var(--grijs); }
  .sectiekop .naam { font-family: var(--mono); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--inkt-2); }
  .sectiekop .rechts { margin-left: auto; font-family: var(--mono); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--grijs); }

  /* [ Haken ]-CTA — geen knoppen meer */
  .hlink { font-family: var(--fd); font-weight: 700; font-size: clamp(16px, 1.6vw, 20px); letter-spacing: -0.02em; display: inline-flex; align-items: baseline; gap: 0.35em; }
  .hlink .hk { color: var(--rood); font-weight: 600; transition: transform .2s ease; display: inline-block; }
  .hlink:hover .hk:first-child { transform: translateX(-3px); }
  .hlink:hover .hk:last-child { transform: translateX(3px); }
  .hlink.wit, .hlink.wit .hk { color: #fff; }
  .ulink { font-size: 14px; font-weight: 500; border-bottom: 1px solid var(--inkt); padding-bottom: 1px; }
  .ulink:hover { color: var(--rood); border-color: var(--rood); }

  /* Motion */
  .reveal { opacity: 0; transform: translateY(16px); transition: opacity .65s ease, transform .65s cubic-bezier(.2,.7,.2,1); }
  .reveal.inview { opacity: 1; transform: none; }
  .reveal.d1 { transition-delay: .08s; } .reveal.d2 { transition-delay: .16s; } .reveal.d3 { transition-delay: .24s; }
  @media (prefers-reduced-motion: reduce) {
    .reveal { opacity: 1 !important; transform: none !important; transition: none !important; }
  }

  /* Preview-banner */

  /* Logo-speelstrip */

  /* Nav */
  header.site { position: sticky; top: 0; z-index: 50; background: rgba(242,241,235,0.93); backdrop-filter: blur(10px); border-bottom: 1px solid var(--lijn); }
  header.site .frame { display: flex; align-items: center; height: 60px; }
  nav.main { margin-left: auto; display: flex; gap: clamp(14px, 2.4vw, 30px); align-items: center; font-size: 13.5px; font-weight: 500; color: var(--inkt-2); }
  nav.main a:hover { color: var(--inkt); }
  .now-dot { width: 6px; height: 6px; background: var(--rood); display: inline-block; margin-right: 6px; animation: adem 2.4s ease-in-out infinite; }
  @keyframes adem { 0%,100% { opacity: 1; } 50% { opacity: 0.3; } }
  .menu-t { display: none; }
  .menu-b { display: none; margin-left: auto; cursor: pointer; font-family: var(--mono); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; padding: 8px 0; }
  .menu-b::after { content: "☰"; margin-left: 8px; }

  /* 01 HERO */
  .hero { padding: clamp(48px, 7vw, 96px) 0 clamp(36px, 5vw, 64px); }
  .hero-grid { display: grid; grid-template-columns: 1.6fr 1fr; gap: clamp(32px, 5vw, 80px); align-items: end; margin-top: clamp(28px, 4vw, 48px); }
  h1.display { font-size: clamp(44px, 7.2vw, 104px); max-width: 14ch; }
  h1.display .rd { color: var(--rood); }
  .lede { margin-top: 26px; font-size: clamp(15px, 1.5vw, 17.5px); color: var(--inkt-2); max-width: 52ch; line-height: 1.65; }
  .cta-row { margin-top: 32px; display: flex; gap: clamp(18px, 3vw, 36px); align-items: baseline; flex-wrap: wrap; }
  .portret { position: relative; }
  .portret img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: center; }
  .portret .cap { display: flex; align-items: center; gap: 8px; margin-top: 10px; }
  .hero-voet { display: flex; justify-content: space-between; gap: 14px; flex-wrap: wrap; margin-top: clamp(28px, 4vw, 44px); padding-top: 14px; border-top: 1px solid var(--lijn); }
  .hero-voet .links { display: flex; align-items: center; gap: 10px; }

  /* Now-regel */
  .nowstrip { border-bottom: 1px solid var(--lijn); }
  .nowstrip .frame { display: flex; align-items: baseline; gap: 16px; padding-top: 13px; padding-bottom: 13px; flex-wrap: wrap; }
  .nowstrip .n-line { font-size: 13.5px; color: var(--inkt-2); flex: 1 1 320px; }

  /* Secties algemeen */
  section.sec { padding: 0 0 clamp(56px, 7vw, 96px); }
  .kop-groot { font-family: var(--fd); font-weight: 700; letter-spacing: -0.03em; line-height: 1.04; font-size: clamp(30px, 4.4vw, 56px); max-width: 22ch; margin-top: clamp(26px, 4vw, 44px); }
  .kop-groot .rd { color: var(--rood); }
  .sub { margin-top: 16px; font-size: 15px; color: var(--inkt-2); max-width: 56ch; line-height: 1.65; }
  .kop-rij { display: grid; grid-template-columns: 1.5fr 1fr; gap: clamp(24px, 4vw, 64px); align-items: end; }
  .kop-rij .zijnoot { font-size: 13.5px; color: var(--inkt-2); text-align: right; line-height: 1.6; padding-bottom: 6px; }

  /* 02 VISION — rood vol vlak */
  .vision { background: var(--rood); color: #fff; }
  .vision .sectiekop { border-color: rgba(255,255,255,0.3); }
  .vision .sectiekop .nr { color: #fff; }
  .vision .sectiekop .naam, .vision .sectiekop .rechts, .vision .sectiekop .sl { color: rgba(255,255,255,0.65); }
  .vision .binnen { padding-top: clamp(48px, 7vw, 104px); padding-bottom: clamp(48px, 7vw, 104px); }
  .vision .v-state { font-family: var(--fd); font-weight: 700; letter-spacing: -0.035em; line-height: 1.0; font-size: clamp(36px, 5.6vw, 80px); max-width: 17ch; }
  .vision .v-state .punt { background: #fff; }
  .vision .v-sub { margin-top: 22px; font-size: 15px; color: rgba(255,255,255,0.85); max-width: 54ch; line-height: 1.65; }
  .vision .v-tweede { margin-top: clamp(40px, 6vw, 72px); padding-top: clamp(24px, 4vw, 40px); border-top: 1px solid rgba(255,255,255,0.3); display: grid; grid-template-columns: 1.5fr 1fr; gap: clamp(24px, 4vw, 64px); align-items: end; }
  .vision .v-tweede h3 { font-family: var(--fd); font-weight: 700; letter-spacing: -0.028em; line-height: 1.05; font-size: clamp(24px, 3.4vw, 44px); max-width: 22ch; }
  .vision .v-tweede .mono { color: rgba(255,255,255,0.65); text-align: right; }

  /* 03 DONE BEFORE — index-rijen met spoor */
  .reis-rijen { border-top: 1px solid var(--inkt); margin-top: clamp(26px, 4vw, 44px); }
  .reis-rij { display: grid; grid-template-columns: 120px auto 1fr auto 1.3fr; gap: clamp(14px, 2.5vw, 36px); align-items: baseline; padding: clamp(18px, 2.6vw, 30px) 0; border-bottom: 1px solid var(--lijn); position: relative; }
  .reis-rij .r-tijd { font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--rood); }
  .reis-rij h3 { font-family: var(--fd); font-weight: 700; font-size: clamp(24px, 3vw, 40px); letter-spacing: -0.028em; }
  .reis-rij p { font-size: 13.5px; color: var(--inkt-2); line-height: 1.6; max-width: 44ch; }
  .reis-rij .r-orgs { display: block; margin-top: 8px; font-family: var(--mono); font-size: 10px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--grijs); }
  .reis-rij.nu h3 { color: var(--rood); }
  .reis-voetnoot { display: flex; justify-content: space-between; gap: 14px; flex-wrap: wrap; margin-top: 20px; }
  .reis-voetnoot .groot { font-family: var(--fd); font-weight: 700; font-size: clamp(17px, 2vw, 24px); letter-spacing: -0.02em; }

  /* Cijfers */
  .cijfers { border-top: 1px solid var(--inkt); border-bottom: 1px solid var(--lijn); margin-bottom: clamp(56px, 7vw, 96px); }
  .cijfers .frame { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(16px, 3vw, 40px); padding-top: clamp(24px, 3.5vw, 40px); padding-bottom: clamp(24px, 3.5vw, 40px); }
  .cf .n { font-family: var(--fd); font-size: clamp(34px, 4.4vw, 56px); font-weight: 700; letter-spacing: -0.04em; line-height: 1; }
  .cf .n .punt { width: 0.2em; height: 0.2em; }
  .cf .l { margin-top: 8px; font-family: var(--mono); font-size: 10px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--grijs); line-height: 1.7; max-width: 24ch; }

  /* 04 STAKES */
  .stakes-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(24px, 4vw, 64px); margin-top: clamp(26px, 4vw, 44px); }
  .stake { border-top: 1px solid var(--inkt); padding-top: 16px; }
  .stake .s-kop { display: flex; align-items: center; gap: 10px; }
  .stake h3 { font-family: var(--fd); font-weight: 700; font-size: clamp(19px, 2.2vw, 26px); letter-spacing: -0.02em; margin: 14px 0 10px; }
  .stake p { font-size: 14px; color: var(--inkt-2); line-height: 1.65; max-width: 48ch; }
  .stakes-slot { margin-top: 26px; font-size: 15.5px; color: var(--inkt-2); max-width: 62ch; line-height: 1.65; }

  /* 05 PRACTICE — selected-work-stijl rijen */
  .vh-rijen { border-top: 1px solid var(--inkt); margin-top: clamp(26px, 4vw, 44px); }
  .vh-rij { display: grid; grid-template-columns: auto auto 1fr auto 1.35fr auto; gap: clamp(14px, 2.5vw, 36px); align-items: center; padding: clamp(20px, 3vw, 34px) 0; border-bottom: 1px solid var(--lijn); transition: background .15s ease; }
  .vh-rij:hover { background: rgba(255,255,255,0.55); }
  .vh-rij h3 { font-family: var(--fd); font-weight: 700; font-size: clamp(26px, 3.6vw, 48px); letter-spacing: -0.03em; }
  .vh-rij:hover h3 { color: var(--rood); }
  .vh-rij .v-rol { font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--inkt-2); }
  .vh-rij .v-beschr { font-size: 13.5px; color: var(--inkt-2); line-height: 1.6; max-width: 44ch; }
  .vh-rij .pijl { font-family: var(--fd); font-weight: 600; font-size: 20px; color: var(--grijs); transition: color .15s ease, transform .2s ease; }
  .vh-rij:hover .pijl { color: var(--rood); transform: translate(2px, -2px); }
  .vh-rij .v-meta { font-family: var(--mono); font-size: 9.5px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--grijs); display: block; margin-top: 8px; }

  /* Bewijs — foto + quote */
  .bewijs-grid { display: grid; grid-template-columns: 1fr 1.1fr; gap: clamp(28px, 5vw, 72px); align-items: center; margin-top: clamp(26px, 4vw, 44px); }
  .bewijs-grid figure { margin: 0; }
  .bewijs-grid img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
  .bewijs-grid figcaption { display: flex; align-items: center; gap: 8px; margin-top: 10px; }
  .bewijs-grid blockquote { font-family: var(--fd); font-weight: 700; font-size: clamp(22px, 2.9vw, 36px); letter-spacing: -0.025em; line-height: 1.12; max-width: 24ch; }
  .bewijs-grid cite { display: block; margin-top: 16px; font-style: normal; }

  /* Instrumenten */
  .instr-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(24px, 4vw, 64px); margin-top: clamp(26px, 4vw, 44px); }
  .instr { border-top: 1px solid var(--inkt); padding-top: 16px; }
  .instr h3 { font-family: var(--fd); font-weight: 700; font-size: clamp(22px, 2.6vw, 32px); letter-spacing: -0.025em; margin: 12px 0 8px; }
  .instr p { font-size: 14px; color: var(--inkt-2); line-height: 1.65; max-width: 48ch; }
  .instr .i-cta { margin-top: 16px; display: inline-block; }

  /* 06 CONTACT */
  .contact { padding-bottom: clamp(64px, 8vw, 112px); }
  .contact-grid { display: grid; grid-template-columns: 0.85fr 1.15fr; gap: clamp(28px, 5vw, 72px); align-items: center; margin-top: clamp(26px, 4vw, 44px); }
  .c-foto { margin: 0; max-width: 400px; }
  .c-foto img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
  .c-foto figcaption { display: flex; align-items: center; gap: 8px; margin-top: 10px; }
  .contact h2 { font-family: var(--fd); font-weight: 700; font-size: clamp(32px, 4.8vw, 64px); letter-spacing: -0.032em; line-height: 1.02; max-width: 14ch; }
  .contact .rood-vak { background: var(--rood); color: #fff; padding: clamp(32px, 4.5vw, 56px) clamp(24px, 3.5vw, 44px); text-align: center; }
  .contact .rood-vak .of { margin-top: 18px; padding-top: 16px; border-top: 1px solid rgba(255,255,255,0.35); font-family: var(--mono); font-size: 11px; letter-spacing: 0.06em; color: rgba(255,255,255,0.85); }
  .contact .rood-vak .of a { text-decoration: underline; text-underline-offset: 3px; }

  /* Footer */
  footer { border-top: 1px solid var(--inkt); }
  footer .frame { display: flex; align-items: center; gap: 12px 26px; flex-wrap: wrap; padding-top: 18px; padding-bottom: 22px; }
  footer .f-naam { font-family: var(--mono); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; }
  footer .f-links { display: flex; gap: 12px 18px; flex-wrap: wrap; }
  footer .f-links a { white-space: nowrap; }
  footer .f-links a:hover { color: var(--rood); }
  footer .f-rechts { margin-left: auto; display: flex; align-items: center; gap: 10px; }

  /* MERKDEMO */


  /* Iconen — 1.5px lijn, scherpe hoeken, één rood vlakje per icoon */
  .ik { flex: 0 0 auto; display: block; }
  .ik .ln { fill: none; stroke: var(--inkt); stroke-width: 1.5; }
  .ik .ln.dash { stroke-dasharray: 3 3; }
  .ik .rdln { stroke: var(--rood); }
  .ik .rd { fill: var(--rood); }
  .ik .zt { fill: var(--lijn); }
  /* Foto-hoeken — cameraframe */
  .hoeken { position: relative; }
  .hoeken .hkc { position: absolute; width: 16px; height: 16px; border: 0 solid #fff; pointer-events: none; }
  .hoeken .hkc.a { left: 10px; top: 10px; border-left-width: 2px; border-top-width: 2px; }
  .hoeken .hkc.b { right: 10px; top: 10px; border-right-width: 2px; border-top-width: 2px; }
  .hoeken .hkc.c { left: 10px; bottom: 10px; border-left-width: 2px; border-bottom-width: 2px; }
  .hoeken .hkc.d { right: 10px; bottom: 10px; border-right-width: 2px; border-bottom-width: 2px; }
  /* Elementen-lab */

  @media (max-width: 860px) {
    .menu-b { display: block; }
    nav.main { position: absolute; top: 60px; left: 0; right: 0; background: var(--papier); border-bottom: 1px solid var(--lijn); flex-direction: column; align-items: flex-start; gap: 0; padding: 6px clamp(20px, 3.5vw, 48px) 14px; display: none; }
    .menu-t:checked ~ nav.main { display: flex; }
    nav.main a { display: block; width: 100%; padding: 12px 0; border-bottom: 1px solid var(--lijn); font-size: 15px; }
    header.site .frame { position: relative; }
    .hero-grid, .kop-rij, .bewijs-grid, .contact-grid, .vision .v-tweede { grid-template-columns: 1fr; }
    .portret { max-width: 420px; }
    .kop-rij .zijnoot, .vision .v-tweede .mono { text-align: left; }
    h1.display { font-size: clamp(40px, 11vw, 56px); }
    .vision .v-state { font-size: clamp(30px, 8.6vw, 46px); }
    .reis-rij { grid-template-columns: auto 1fr; } .reis-rij .ik { display: none; }
    .reis-rij p { grid-column: 1 / -1; }
    .reis-rij .chip { display: none; }
    .stakes-grid, .instr-grid, .demo-grid { grid-template-columns: 1fr; }
    .cijfers .frame { grid-template-columns: 1fr 1fr; row-gap: 24px; }
    .vh-rij { grid-template-columns: auto auto 1fr auto; }
    .vh-rij .v-beschr { grid-column: 1 / -1; }
  }

/* Taalbanner (lang.js) in strak-systeem */
.lang-strip { background: var(--papier); border-bottom: 1px solid var(--lijn); font-family: var(--mono); font-size: 11px; letter-spacing: 0.06em; text-transform: none; }
.lang-strip-inner { max-width: 1280px; margin: 0 auto; padding: 10px clamp(20px, 3.5vw, 48px); display: flex; align-items: center; gap: 14px; }
.lang-strip-globe::before { content: ""; display: inline-block; width: 7px; height: 7px; background: var(--rood); }
.lang-strip-msg { color: var(--inkt-2); }
.lang-strip-cta { margin-left: auto; color: var(--rood); font-weight: 500; white-space: nowrap; }
.lang-strip-cta:hover { text-decoration: underline; text-underline-offset: 3px; }
.lang-strip-x { background: none; border: none; cursor: pointer; font-size: 15px; color: var(--grijs); line-height: 1; padding: 2px 4px; }
.lang-strip-x:hover { color: var(--inkt); }

.vh-rij .pijl svg { display: block; }

/* ---- v2: componenten voor binnenpagina's (about/approach/practice/writing/now/contact) ---- */
.rij-lijst { border-top: 1px solid var(--inkt); margin-top: clamp(26px, 4vw, 44px); }
.rij { display: grid; grid-template-columns: 150px 1.25fr 0.85fr; gap: clamp(16px, 3vw, 44px); padding: clamp(20px, 3vw, 32px) 0; border-bottom: 1px solid var(--lijn); }
.rij .r-label { font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--rood); padding-top: 6px; }
.rij h3 { font-family: var(--fd); font-weight: 700; font-size: clamp(20px, 2.4vw, 30px); letter-spacing: -0.025em; line-height: 1.12; margin-bottom: 10px; }
.rij h3 .rd { color: var(--rood); }
.rij p { font-size: 14px; color: var(--inkt-2); line-height: 1.65; max-width: 56ch; }
.rij .r-meta { display: block; margin-top: 12px; font-family: var(--mono); font-size: 10px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--grijs); line-height: 1.8; }
.rij .r-zij { font-size: 13.5px; color: var(--inkt-2); line-height: 2; }
.rij .r-zij a { border-bottom: 1px solid var(--lijn); padding-bottom: 1px; }
.rij .r-zij a:hover { color: var(--rood); border-color: var(--rood); }
.sec-inkt { background: var(--inkt); color: #fff; }
.sec-inkt .sectiekop { border-color: #3A3833; }
.sec-inkt .sectiekop .naam, .sec-inkt .sectiekop .rechts, .sec-inkt .sectiekop .sl { color: #8A877D; }
.sec-inkt .kop-groot, .sec-inkt h3, .sec-inkt .rij h3 { color: #fff; }
.sec-inkt p, .sec-inkt .rij p, .sec-inkt .sub { color: #C9C7BE; }
.sec-inkt .rij { border-color: #3A3833; }
.sec-inkt .rij-lijst { border-color: #8A877D; }
.sec-rood { background: var(--rood); color: #fff; }
.sec-rood .sectiekop { border-color: rgba(255,255,255,0.3); }
.sec-rood .sectiekop .nr { color: #fff; }
.sec-rood .sectiekop .naam, .sec-rood .sectiekop .rechts, .sec-rood .sectiekop .sl { color: rgba(255,255,255,0.65); }
.sec-rood .kop-groot, .sec-rood h3 { color: #fff; }
.sec-rood p { color: rgba(255,255,255,0.88); }
.sec-rood .punt { background: #fff; }
.essay-rij { display: grid; grid-template-columns: 90px 1fr 26px; gap: clamp(16px, 3vw, 36px); align-items: baseline; padding: 20px 0; border-bottom: 1px solid var(--lijn); }
.essay-rij .e-datum { font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.08em; color: var(--grijs); }
.essay-rij h3 { font-family: var(--fd); font-weight: 700; font-size: clamp(18px, 2.1vw, 25px); letter-spacing: -0.022em; }
.essay-rij:hover h3 { color: var(--rood); }
.essay-rij p { font-size: 13.5px; color: var(--inkt-2); margin-top: 6px; max-width: 66ch; line-height: 1.6; }
.essay-rij .pijl { color: var(--grijs); } .essay-rij .pijl svg { display: block; }
.essay-rij:hover .pijl { color: var(--rood); }
.strak-form { display: grid; grid-template-columns: 1fr 1fr; gap: 18px 22px; margin-top: clamp(24px, 3vw, 36px); }
.strak-form .full { grid-column: 1 / -1; }
.strak-form label { display: block; font-family: var(--mono); font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--grijs); margin-bottom: 7px; }
.strak-form input, .strak-form select, .strak-form textarea { width: 100%; border: 1px solid #C9C7BE; background: #fff; padding: 12px; font-family: var(--f); font-size: 14.5px; color: var(--inkt); border-radius: 0; -webkit-appearance: none; }
.strak-form input:focus, .strak-form select:focus, .strak-form textarea:focus { outline: none; border-color: var(--inkt); }
.strak-form textarea { min-height: 130px; resize: vertical; }
.strak-form button { border: none; background: var(--rood); color: #fff; font-family: var(--fd); font-weight: 700; font-size: 15px; letter-spacing: -0.01em; padding: 14px 26px; cursor: pointer; border-radius: 0; }
.strak-form button:hover { background: var(--rood-d); }
.spec { border-top: 1px solid var(--inkt); padding-top: 16px; }
.spec h3 { font-family: var(--fd); font-weight: 700; font-size: clamp(18px, 2vw, 24px); letter-spacing: -0.02em; margin: 12px 0 8px; }
.spec p { font-size: 14px; color: var(--inkt-2); line-height: 1.65; max-width: 48ch; }
.spec-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(24px, 4vw, 56px); margin-top: clamp(26px, 4vw, 44px); }
.spec-grid.k3 { grid-template-columns: 1fr 1fr 1fr; }
@media (max-width: 860px) {
  .rij { grid-template-columns: 1fr; gap: 10px; }
  .rij .r-label { padding-top: 0; }
  .spec-grid, .spec-grid.k3 { grid-template-columns: 1fr; }
  .strak-form { grid-template-columns: 1fr; }
  .essay-rij { grid-template-columns: 74px 1fr; }
  .essay-rij .pijl { display: none; }
}
.sec-inkt .display, .sec-rood .display { color: #fff; }
.display .rd { color: var(--rood); }