/* Extracted verbatim from landing/index.html's inline <style> on 2026-09-16,
   so /recruitment renders in the current homepage style rather than the
   older sub-page look. The homepage keeps its CSS inline on purpose — that
   is a first-paint decision — so this is a copy, not a shared file.
   If the homepage design changes, this needs the same change. */

    /* ── Design tokens ── */
    :root {
      --canvas:       #F6F4F0;
      --canvas-white: #FFFFFF;
      --ink:          #111111;
      --ink-mid:      #555250;
      --ink-faint:    #AAA7A2;
      --border:       #E2DDD8;
      --indigo:       #4F46E5;
      --indigo-dk:    #3730A3;
      --teal:         #0D9488;
      --amber:        #F59E0B;
      --ink-inv:      #F6F4F0;

      --f-disp: 'Space Grotesk', sans-serif;
      --f-body: 'Instrument Sans', sans-serif;
      --f-mono: 'JetBrains Mono', monospace;
      --f-serif: 'Instrument Serif', serif;

      --nav-h: 62px;
      --max-w: 1180px;
      --ease: cubic-bezier(0.16, 1, 0.3, 1);
    }

    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
    html { font-size: 16px; scroll-behavior: smooth; }

    /* Every in-page link has to clear the sticky nav, or the heading it jumps
       to lands behind the bar. --nav-h plus a little breathing room. */
    :target, [id] { scroll-margin-top: calc(var(--nav-h) + 18px); }
    body {
      font-family: var(--f-body);
      background: var(--canvas);
      color: var(--ink);
      -webkit-font-smoothing: antialiased;
      overflow-x: hidden;
    }

    /* Subtle dot-grid texture */
    body::after {
      content: '';
      position: fixed;
      inset: 0;
      background-image: radial-gradient(circle, rgba(80,76,72,0.18) 1px, transparent 1px);
      background-size: 28px 28px;
      pointer-events: none;
      z-index: 0;
    }

    /* ── Navigation ── */
    .nav {
      position: sticky; top: 0; z-index: 200;
      height: var(--nav-h);
      background: rgba(246,244,240,0.9);
      backdrop-filter: blur(14px);
      -webkit-backdrop-filter: blur(14px);
      border-bottom: 1px solid var(--border);
    }

    .nav-inner {
      max-width: var(--max-w);
      margin: 0 auto;
      padding: 0 28px;
      height: 100%;
      display: flex;
      align-items: center;
      gap: 0;
    }

    .nav-logo {
      font-family: var(--f-serif);
      font-style: italic;
      font-size: 23px;
      color: var(--indigo);
      text-decoration: none;
      letter-spacing: -0.02em;
      flex-shrink: 0;
      margin-right: 40px;
    }

    .nav-links {
      display: flex;
      align-items: center;
      gap: 28px;
      list-style: none;
      flex: 1;
    }

    .nav-links a {
      font-size: 13.5px;
      font-weight: 500;
      color: var(--ink-mid);
      text-decoration: none;
      letter-spacing: 0.005em;
      transition: color 140ms;
    }
    .nav-links a:hover { color: var(--ink); }

    .nav-actions {
      display: flex;
      align-items: center;
      gap: 10px;
      margin-left: auto;
    }

    .lang-btn {
      font-family: var(--f-mono);
      font-size: 11px;
      font-weight: 500;
      letter-spacing: 0.1em;
      background: none;
      border: 1px solid var(--border);
      color: var(--ink-mid);
      padding: 5px 11px;
      border-radius: 5px;
      cursor: pointer;
      transition: all 140ms;
    }
    .lang-btn:hover { border-color: var(--ink); color: var(--ink); }

    .nav-cta {
      font-size: 13.5px;
      font-weight: 600;
      background: var(--ink);
      color: var(--canvas);
      padding: 9px 20px;
      border-radius: 7px;
      text-decoration: none;
      transition: background 140ms;
      white-space: nowrap;
    }
    .nav-cta:hover { background: var(--indigo); }

    .nav-toggle {
      display: none;
      background: none;
      border: none;
      cursor: pointer;
      padding: 8px;
      color: var(--ink);
      margin-left: 4px;
    }

    .mobile-menu {
      display: none;
      flex-direction: column;
      background: var(--canvas);
      border-top: 1px solid var(--border);
      padding: 12px 28px 20px;
      position: relative;
      z-index: 200;
    }
    .mobile-menu.open { display: flex; }
    .mobile-menu a {
      font-size: 16px;
      font-weight: 500;
      color: var(--ink);
      text-decoration: none;
      padding: 13px 0;
      border-bottom: 1px solid var(--border);
    }
    .mobile-menu a:last-child { border-bottom: none; }

    /* ── Hero ── */
    .hero {
      position: relative;
      max-width: var(--max-w);
      margin: 0 auto;
      padding: 72px 28px 64px;
      display: grid;
      grid-template-columns: 1fr;
      gap: 60px;
      align-items: center;
      min-height: calc(90vh - var(--nav-h));
      isolation: isolate;
    }

    /* The glow lives on its own layer that bleeds past the hero on all four
       sides. Painted as the hero's own background it was clipped to the centred
       1180px box while still mid-gradient, and since its outer stop was darker
       than the page canvas that clip drew a visible rectangle down both sides.
       The negative insets matter as much as the width: clip the layer anywhere
       the gradient has not yet reached its transparent stop and the seam simply
       moves to that edge. Relies on body { overflow-x: hidden } to absorb the
       horizontal bleed, and on .hero being position: relative so the layer
       resolves against the hero rather than the viewport. */
    .hero::before {
      content: '';
      position: absolute;
      top: -140px;
      bottom: -200px;
      left: 50%;
      transform: translateX(-50%);
      width: 100vw;
      background: radial-gradient(1100px 780px at 68% 42%,
                  #ffffff 0%,
                  rgba(255, 255, 255, 0.55) 40%,
                  rgba(246, 244, 240, 0) 72%);
      pointer-events: none;
    }

    .hero > .hero-content { position: relative; z-index: 1; max-width: 760px; }

    .hero-eyebrow {
      font-family: var(--f-mono);
      font-size: 11.5px;
      letter-spacing: 0.14em;
      text-transform: uppercase;
      color: var(--ink-faint);
      margin-bottom: 28px;
      display: flex;
      align-items: center;
      gap: 14px;
    }
    .hero-eyebrow::before {
      content: '';
      display: block;
      width: 28px;
      height: 1.5px;
      background: var(--indigo);
      flex-shrink: 0;
    }

    .hero-headline {
      font-family: var(--f-disp);
      /* Sized for the three-line headline — the longest line must clear the
         hero-content width without wrapping mid-phrase. */
      font-size: clamp(32px, 4.6vw, 50px);
      font-weight: 800;
      line-height: 1.06;
      letter-spacing: -0.035em;
      color: var(--ink);
      margin-bottom: 26px;
    }
    .hero-headline em {
      font-style: normal;
      color: var(--indigo);
    }

    .hero-sub {
      font-size: 17.5px;
      font-weight: 400;
      line-height: 1.65;
      color: var(--ink-mid);
      max-width: 460px;
      margin-bottom: 44px;
    }

    .hero-btns {
      display: flex;
      gap: 12px;
      flex-wrap: wrap;
    }

    .btn-ink {
      display: inline-flex;
      align-items: center;
      gap: 9px;
      font-family: var(--f-body);
      font-size: 15px;
      font-weight: 600;
      background: var(--ink);
      color: white;
      padding: 14px 28px;
      border-radius: 9px;
      text-decoration: none;
      border: none;
      cursor: pointer;
      transition: background 140ms, transform 100ms;
    }
    .btn-ink:hover { background: var(--indigo); transform: translateY(-1px); }
    .btn-ink:active { transform: none; }

    .btn-outline {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      font-family: var(--f-body);
      font-size: 15px;
      font-weight: 500;
      background: none;
      color: var(--ink);
      padding: 14px 22px;
      border-radius: 9px;
      text-decoration: none;
      border: 1.5px solid var(--border);
      cursor: pointer;
      transition: all 140ms;
    }
    .btn-outline:hover { border-color: var(--ink); }

    /* ── Ticker ── */
    .ticker {
      border-top: 1px solid var(--border);
      border-bottom: 1px solid var(--border);
      height: 40px;
      overflow: hidden;
      position: relative;
    }

    .ticker-track {
      display: flex;
      animation: ticker-anim 32s linear infinite;
      white-space: nowrap;
      height: 100%;
    }
    .ticker-track:hover { animation-play-state: paused; }

    .ticker-track-en {
      display: none;
    }
    html.lang-en .ticker-track-nl { display: none; }
    html.lang-en .ticker-track-en { display: flex; }

    .ticker-item {
      font-family: var(--f-mono);
      font-size: 11px;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      color: var(--ink-faint);
      padding: 0 28px;
      display: flex;
      align-items: center;
      gap: 16px;
      flex-shrink: 0;
      height: 100%;
    }
    .ticker-item::before { content: '·'; color: var(--indigo); font-size: 18px; }

    @keyframes ticker-anim {
      0% { transform: translateX(0); }
      100% { transform: translateX(-50%); }
    }

    /* ── Section shell ── */
    .section {
      max-width: var(--max-w);
      margin: 0 auto;
      padding: 80px 28px;
    }

    .sec-label {
      font-family: var(--f-mono);
      font-size: 11px;
      letter-spacing: 0.16em;
      text-transform: uppercase;
      color: var(--ink-faint);
      display: flex;
      align-items: center;
      gap: 14px;
      margin-bottom: 40px;
    }
    .sec-label::after {
      content: '';
      flex: 1;
      height: 1px;
      background: var(--border);
    }

    .sec-title {
      font-family: var(--f-disp);
      font-size: clamp(28px, 3.6vw, 46px);
      font-weight: 800;
      line-height: 1.08;
      letter-spacing: -0.028em;
      color: var(--ink);
      margin-bottom: 16px;
    }

    .sec-sub {
      font-size: 17px;
      line-height: 1.65;
      color: var(--ink-mid);
      max-width: 540px;
    }

    /* ── Process ── */
    .process-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      margin-top: 52px;
      border: 1px solid var(--border);
      border-radius: 14px;
      overflow: hidden;
      background: var(--canvas-white);
    }

    .process-step {
      padding: 40px 34px;
      border-right: 1px solid var(--border);
      transition: background 200ms;
    }
    .process-step:last-child { border-right: none; }
    .process-step:hover { background: var(--canvas); }

    .p-num {
      font-family: var(--f-mono);
      font-size: 52px;
      font-weight: 400;
      color: var(--border);
      line-height: 1;
      margin-bottom: 20px;
      letter-spacing: -0.04em;
      transition: color 200ms;
    }
    .process-step:hover .p-num { color: var(--indigo); }

    .p-title {
      font-family: var(--f-disp);
      font-size: 19px;
      font-weight: 700;
      color: var(--ink);
      margin-bottom: 10px;
    }

    .p-body {
      font-size: 14.5px;
      line-height: 1.65;
      color: var(--ink-mid);
    }



















    /* ── Stats grid ── */
    .stats-band {
      border-top: 1px solid var(--border);
      border-bottom: 1px solid var(--border);
    }

    .stats-grid {
      max-width: var(--max-w);
      margin: 0 auto;
      padding: 0 28px;
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      border-left: 1px solid var(--border);
    }

    .stat-cell {
      padding: 44px 32px;
      border-right: 1px solid var(--border);
    }

    .stat-n {
      font-family: var(--f-mono);
      font-size: 50px;
      font-weight: 500;
      color: var(--ink);
      line-height: 1;
      letter-spacing: -0.045em;
      margin-bottom: 8px;
    }
    .stat-n sup { font-size: 22px; color: var(--indigo); vertical-align: super; }

    .stat-l {
      font-family: var(--f-body);
      font-size: 13.5px;
      line-height: 1.45;
      color: var(--ink-mid);
    }

    /* ── Why cadans ── */
    .why-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 1px;
      background: var(--border);
      border-radius: 14px;
      overflow: hidden;
      margin-top: 48px;
    }

    /* The capabilities matrix has seven cells, so the last one stretches across
       whatever the final row leaves empty. Declared here, above the breakpoints,
       so the narrower spans in the media queries can still override it — media
       queries add no specificity, only source order decides. */
    #capaciteiten .why-item:last-child { grid-column: span 3; }

    .why-item.why-row {
      background: var(--canvas);
      padding: 34px 30px;
      transition: background 200ms;
    }
    .why-item.why-row:hover { background: var(--canvas-white); }

    .why-dot {
      width: 38px; height: 38px;
      border-radius: 10px;
      background: var(--ink);
      display: flex;
      align-items: center;
      justify-content: center;
      margin-bottom: 18px;
      transition: background 200ms;
    }
    .why-item.why-row:hover .why-dot { background: var(--indigo); }

    .why-dot svg {
      width: 18px; height: 18px;
      stroke: white;
      fill: none;
      stroke-width: 1.75;
      stroke-linecap: round;
      stroke-linejoin: round;
    }

    .why-title {
      font-family: var(--f-disp);
      font-size: 16.5px;
      font-weight: 700;
      color: var(--ink);
      margin-bottom: 9px;
    }

    .why-desc {
      font-size: 14px;
      line-height: 1.66;
      color: var(--ink-mid);
    }

    /* ── Contact ── */
    .contact-band { background: var(--canvas-white); }

    .contact-inner {
      max-width: var(--max-w);
      margin: 0 auto;
      padding: 80px 28px;
      display: grid;
      grid-template-columns: 1fr 500px;
      gap: 80px;
      align-items: start;
    }

    .contact-copy p {
      font-size: 16px;
      line-height: 1.72;
      color: var(--ink-mid);
      margin-top: 18px;
      max-width: 380px;
    }

    .contact-items {
      margin-top: 36px;
      display: flex;
      flex-direction: column;
      gap: 14px;
    }

    .contact-item {
      display: flex;
      align-items: center;
      gap: 12px;
      font-size: 14.5px;
      color: var(--ink-mid);
    }

    .contact-item a {
      color: inherit;
      text-decoration: none;
      border-bottom: 1px solid var(--border);
      transition: color 140ms, border-color 140ms;
    }
    .contact-item a:hover { color: var(--indigo); border-color: var(--indigo); }

    .contact-item svg {
      width: 17px; height: 17px;
      stroke: var(--indigo);
      fill: none;
      stroke-width: 1.75;
      stroke-linecap: round;
      stroke-linejoin: round;
      flex-shrink: 0;
    }

    /* Form */
    .contact-form {
      display: flex;
      flex-direction: column;
      gap: 14px;
    }

    .f-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }

    .f-group { display: flex; flex-direction: column; gap: 5px; }

    .f-group label {
      font-family: var(--f-body);
      font-size: 12.5px;
      font-weight: 600;
      color: var(--ink);
      letter-spacing: 0.01em;
    }

    .f-opt { font-weight: 400; color: var(--ink-faint); }

    .f-group input,
    .f-group select,
    .f-group textarea {
      font-family: var(--f-body);
      font-size: 15px;
      color: var(--ink);
      background: var(--canvas);
      border: 1.5px solid var(--border);
      border-radius: 9px;
      padding: 10px 13px;
      outline: none;
      transition: border-color 140ms, background 140ms;
      -webkit-appearance: none;
      appearance: none;
    }

    .f-group select {
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23AAA7A2' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
      background-repeat: no-repeat;
      background-position: right 12px center;
      padding-right: 36px;
      cursor: pointer;
    }

    .f-group textarea { resize: vertical; min-height: 96px; }

    .f-group input:focus,
    .f-group select:focus,
    .f-group textarea:focus {
      border-color: var(--indigo);
      background: white;
    }

    .f-group input::placeholder,
    .f-group textarea::placeholder { color: var(--ink-faint); }

    .f-submit {
      font-family: var(--f-body);
      font-size: 15.5px;
      font-weight: 600;
      background: var(--indigo);
      color: white;
      border: none;
      padding: 15px;
      border-radius: 9px;
      cursor: pointer;
      transition: background 140ms, transform 100ms;
      width: 100%;
      margin-top: 6px;
    }
    .f-submit:hover { background: var(--indigo-dk); transform: translateY(-1px); }
    .f-submit:disabled { background: var(--teal); cursor: default; transform: none; }
    .f-submit.is-sending { background: var(--ink-faint); cursor: wait; transform: none; }

    /* Honeypot — off-screen for humans, still filled in by naive bots. */
    .f-hp {
      position: absolute;
      left: -9999px;
      width: 1px; height: 1px;
      overflow: hidden;
    }

    .f-consent {
      display: flex;
      align-items: flex-start;
      gap: 9px;
      font-size: 13px;
      line-height: 1.55;
      color: var(--ink-mid);
    }
    .f-consent input[type="checkbox"] {
      flex-shrink: 0;
      width: 16px; height: 16px;
      margin-top: 2px;
      accent-color: var(--indigo);
      cursor: pointer;
    }
    .f-consent label { cursor: pointer; }
    .f-consent a { color: var(--indigo); text-underline-offset: 2px; }

    .f-status {
      display: none;
      font-size: 13.5px;
      line-height: 1.5;
      padding: 10px 13px;
      border-radius: 9px;
    }
    .f-status.is-error {
      display: block;
      color: #9F1239;
      background: #FFF1F2;
      border: 1px solid #FECDD3;
    }
    .f-status.is-ok {
      display: block;
      color: #115E59;
      background: #F0FDFA;
      border: 1px solid #99F6E4;
    }

    /* ── Footer ── */
    .footer-strip {
      border-top: 1px solid var(--border);
    }
    .footer-inner {
      max-width: var(--max-w);
      margin: 0 auto;
      padding: 28px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      flex-wrap: wrap;
      gap: 14px;
    }

    .footer-logo {
      font-family: var(--f-serif);
      font-style: italic;
      font-size: 20px;
      color: var(--indigo);
    }

    .footer-copy {
      font-size: 12.5px;
      color: var(--ink-faint);
    }

    .footer-links {
      flex-wrap: wrap;
      display: flex;
      gap: 20px;
      list-style: none;
    }

    .footer-links a {
      font-size: 12.5px;
      color: var(--ink-mid);
      text-decoration: none;
      transition: color 140ms;
    }
    .footer-links a:hover { color: var(--ink); }

    /* ── Lang toggle ── */
    .en-only { display: none; }
    html.lang-en .nl-only { display: none !important; }
    html.lang-en .en-only { display: revert; }
    html.lang-en span.en-only,
    html.lang-en a.en-only,
    html.lang-en button.en-only { display: inline; }
    html.lang-en li.en-only { display: list-item; }

    /* ── Reveal animation ── */
    .reveal {
      opacity: 0;
      transform: translateY(22px);
      transition: opacity 580ms var(--ease), transform 580ms var(--ease);
    }
    .reveal.visible { opacity: 1; transform: none; }

    /* Hero entrance */
    .hero-content > * {
      animation: hero-in 700ms var(--ease) both;
    }
    .hero-content .hero-eyebrow { animation-delay: 0ms; }
    .hero-content .hero-headline { animation-delay: 60ms; }
    .hero-content .hero-sub { animation-delay: 120ms; }
    .hero-content .hero-btns { animation-delay: 180ms; }

    @keyframes hero-in {
      from { opacity: 0; transform: translateY(18px); }
      to   { opacity: 1; transform: none; }
    }

    /* ── FAQ ── */
    .faq {
      border-top: 1px solid var(--border);
      margin-top: 44px;
    }

    .faq-item {
      border-bottom: 1px solid var(--border);
    }

    .faq-item summary {
      cursor: pointer;
      list-style: none;
      padding: 22px 44px 22px 0;
      position: relative;
      font-family: var(--f-disp);
      font-size: 17px;
      font-weight: 700;
      color: var(--ink);
    }
    .faq-item summary::-webkit-details-marker { display: none; }

    /* The question is a heading so screen-reader users can navigate the FAQ the
       same way they navigate every other section here. It inherits summary's
       type; these resets stop it adding a second box. */
    .faq-q {
      display: inline;
      font: inherit;
      color: inherit;
      margin: 0;
    }

    /* Plus sign that becomes a minus when open — drawn in CSS so there is no
       icon to keep in sync with the open state. */
    .faq-item summary::before,
    .faq-item summary::after {
      content: '';
      position: absolute;
      right: 4px;
      top: 50%;
      background: var(--ink-mid);
      transition: transform 200ms var(--ease), background 160ms;
    }
    .faq-item summary::before { width: 14px; height: 2px; margin-top: -1px; }
    .faq-item summary::after  { width: 2px; height: 14px; margin-top: -7px; right: 10px; }
    .faq-item[open] summary::after { transform: rotate(90deg); }
    .faq-item summary:hover::before,
    .faq-item summary:hover::after { background: var(--indigo); }

    .faq-item p {
      padding: 0 44px 24px 0;
      font-size: 15.5px;
      line-height: 1.68;
      color: var(--ink-mid);
      max-width: 76ch;
    }
    .faq-item p a { color: var(--indigo); }

    /* ── Offer / price ── */
    .offer {
      display: grid;
      grid-template-columns: 1fr 320px;
      gap: 1px;
      background: var(--border);
      border: 1px solid var(--border);
      border-radius: 14px;
      overflow: hidden;
      margin-top: 44px;
    }

    .offer-list {
      background: var(--canvas-white);
      list-style: none;
      padding: 38px 36px;
      display: flex;
      flex-direction: column;
      justify-content: center;
      gap: 15px;
    }

    .offer-list li {
      position: relative;
      padding-left: 27px;
      font-size: 15.5px;
      line-height: 1.55;
      color: var(--ink-mid);
    }
    .offer-list li::before {
      content: '';
      position: absolute;
      left: 0; top: 8px;
      width: 7px; height: 7px;
      border-radius: 50%;
      background: var(--indigo);
    }

    .offer-card {
      background: var(--ink);
      color: var(--canvas);
      padding: 38px 32px;
      display: flex;
      flex-direction: column;
      justify-content: center;
    }

    .offer-card-label {
      font-family: var(--f-mono);
      font-size: 10.5px;
      letter-spacing: 0.14em;
      text-transform: uppercase;
      color: rgba(246, 244, 240, 0.5);
      margin-bottom: 14px;
    }

    .offer-price {
      font-family: var(--f-disp);
      font-size: 54px;
      font-weight: 800;
      line-height: 1;
      letter-spacing: -0.04em;
      margin-bottom: 10px;
    }

    .offer-note {
      font-size: 14px;
      line-height: 1.5;
      color: rgba(246, 244, 240, 0.72);
    }

    .offer-fine {
      font-family: var(--f-mono);
      font-size: 11px;
      letter-spacing: 0.08em;
      color: rgba(246, 244, 240, 0.6);
      margin-top: 6px;
    }

    .offer-btn {
      display: inline-block;
      margin-top: 22px;
      background: var(--canvas);
      color: var(--ink);
      font-size: 14.5px;
      font-weight: 600;
      text-decoration: none;
      text-align: center;
      padding: 12px 18px;
      border-radius: 8px;
      transition: background 160ms;
    }
    .offer-btn:hover { background: #ffffff; }

    /* Body copy, not an eyebrow: --ink-faint measures 2.18:1 here, and this is
       the sentence that keeps the price from over-promising, so it gets the
       readable tone. */
    .offer-scope {
      font-size: 14px;
      line-height: 1.6;
      color: var(--ink-mid);
      max-width: 78ch;
      margin-top: 20px;
    }

    /* Keyword line above each capability title — carries the search terms the
       product tabs used to hold, now that the matrix has replaced them. */
    .cap-kw {
      font-family: var(--f-mono);
      font-size: 10.5px;
      letter-spacing: 0.11em;
      text-transform: uppercase;
      color: var(--indigo);
      margin-bottom: 7px;
    }

    /* Everything that moves on this page, off in one place. The reveal list
       grew by seven elements when the offer and FAQ joined it. */
    @media (prefers-reduced-motion: reduce) {
      html { scroll-behavior: auto; }
      .reveal { opacity: 1; transform: none; transition: none; }
      .hero-content > * { animation: none; }
      .ticker-track { animation: none; }
      .faq-item summary::before,
      .faq-item summary::after { transition: none; }
    }

    /* ── Responsive ── */
    @media (max-width: 920px) {
      .hero { grid-template-columns: 1fr; min-height: auto; padding: 48px 24px 40px; gap: 44px; }
      .process-grid { grid-template-columns: 1fr; border-radius: 10px; }
      .process-step { border-right: none; border-bottom: 1px solid var(--border); }
      .process-step:last-child { border-bottom: none; }
      .stats-grid { grid-template-columns: repeat(2, 1fr); }
      .why-grid { grid-template-columns: repeat(2, 1fr); }
      #capaciteiten .why-item:last-child { grid-column: span 2; }
      .offer { grid-template-columns: 1fr; }
      .contact-inner { grid-template-columns: 1fr; gap: 40px; }
    }

    /* Five nav links plus the CTA stop fitting well above the phone breakpoint.
       800px is set by the English labels, which run longer than the Dutch:
       below it "How it works" and "Why cadans" wrap and collide with the
       language toggle. Adding a nav item means re-measuring this number just
       above the breakpoint, in English. */
    @media (max-width: 800px) {
      .nav-links { display: none; }
      .nav-cta { display: none; }
      .nav-toggle { display: flex; }
    }

    @media (max-width: 620px) {
      /* Let the headline wrap naturally on phones — the forced three-line
         break needs more width than a phone has. */
      .hero-headline { font-size: 31px; }
      .hero-headline br { display: none; }
      .stats-grid { grid-template-columns: repeat(2, 1fr); }
      .stat-cell { padding: 30px 20px; }
      .stat-n { font-size: 38px; }
      .why-grid { grid-template-columns: 1fr; }
      #capaciteiten .why-item:last-child { grid-column: auto; }
      .f-row { grid-template-columns: 1fr; }
      .section { padding: 60px 20px; }
      .footer-inner { flex-direction: column; align-items: flex-start; }
    }