/* ╔══════════════════════════════════════════════════════════════════╗
   ║  Springcast Website v2 — Contactpagina v1 (B1 hero + formulier,   ║
   ║  B3 case). Bron: Claude Design "Springcast Contact v1", 18-9-2026 ║
   ║  (_Contact v1 Core + _Contact v1 Form). Alleen op /{taal}/contact/.║
   ╚══════════════════════════════════════════════════════════════════╝

   Afspraken, zoals in home.css
   - Kleuren, fonts en radii komen uitsluitend uit tokens.css;
     --font-display uit het ontwerp is hier --font-display-creator.
   - Maten in px volgen het ontwerp één-op-één. De wrapper rekent in
     content-box, zoals het ontwerp (global.css zet border-box).
   - Breekpunten zijn container queries: op .ct (1024 en 640) en op het
     formulier .ct-form (600 en 470).
   - Header en footer zijn de bestaande van de site; het ontwerp tekende
     daar de header uit Homepage v2, die niet live staat.
   - Alles is gescoped onder .ct-*; global.css blijft ongemoeid.            */

html { scroll-padding-top: 96px; }

.ct { container-type: inline-size; background: var(--paper); }
.ct-wrap { box-sizing: content-box; max-width: 1280px; margin: 0 auto; padding: 0 48px; }
.ct a:focus-visible { outline: 3px solid var(--iris-600); outline-offset: 3px; border-radius: 2px; }
.ct-arr { display: inline-block; transition: transform 140ms ease; }

/* ── B1 · Hero: belofte links, formulier rechts ──────────────────────── */
.ct-hero { background: var(--bone); border-bottom: 1px solid var(--mist); }
.ct-grid { display: grid; grid-template-columns: minmax(0, 1.04fr) minmax(0, 1fr); gap: 60px; align-items: start; padding: 44px 0 76px; }
.ct-h1 { font-family: var(--font-display-creator); font-weight: 800; letter-spacing: -0.022em; color: var(--ink); font-size: clamp(34px, 4.4cqw, 58px); line-height: 1.04; max-width: 17ch; text-wrap: balance; }
.ct-qual { margin-top: 20px; font-size: 18.5px; line-height: 1.5; color: var(--slate-700); max-width: 44ch; text-wrap: pretty; }

.ct-proof { margin-top: 28px; }
.ct-checks { display: flex; flex-wrap: wrap; gap: 8px 24px; font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.04em; color: var(--slate-700); }
.ct-checks > span { white-space: nowrap; }
.ct-check { color: var(--petrol-600); font-weight: 700; }
.ct-logowrap { margin-top: 20px; }
.ct-logolabel { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--slate-500); }
.ct-logos { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px 26px; align-items: center; justify-items: start; margin-top: 16px; list-style: none; }
.ct-logos li { display: flex; align-items: center; justify-content: flex-start; height: 32px; }
/* Breedte per logo komt uit het width-attribuut; hoogte en uitsnede hier. */
.ct-logos img { max-width: 100%; height: 32px; object-fit: contain; object-position: left center; filter: grayscale(1); opacity: 0.8; }

/* Routeerregel: makers en klanten, twee tekstlinks, geen knoppen. */
.ct-route { display: flex; flex-direction: column; align-items: flex-start; gap: 7px; margin-top: 26px; padding-top: 22px; border-top: 1px solid var(--mist); }
.ct-route a { padding: 3px 0; font-size: 15px; line-height: 1.5; color: var(--iris-700); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; transition: color 120ms ease; }
.ct-route a:hover { color: var(--iris-600); text-decoration-thickness: 2px; }

.ct-intro { margin-top: 26px; font-size: 16.5px; line-height: 1.6; color: var(--slate-700); max-width: 54ch; text-wrap: pretty; }

.ct-next { margin-top: 32px; padding-top: 26px; border-top: 1px solid var(--mist); }
.ct-next__h2 { font-family: var(--font-display-creator); font-weight: 700; font-size: 19px; letter-spacing: -0.014em; color: var(--ink); }
.ct-steps { margin-top: 14px; display: flex; flex-direction: column; gap: 10px; list-style: none; }
.ct-step { display: grid; grid-template-columns: 26px minmax(0, 1fr); align-items: baseline; }
.ct-step__n { font-family: var(--font-mono); font-size: 13px; font-weight: 500; color: var(--iris-700); }
.ct-step__t { font-size: 15px; line-height: 1.5; color: var(--slate-700); }

/* ── B2 · Formulier: het enige conversiepunt ─────────────────────────── */
.ct-form { container-type: inline-size; }
.ct-card { background: var(--paper); border: 1px solid var(--mist); border-radius: var(--radius-lg); padding: 36px; box-shadow: var(--shadow-elevated); }
.ct-form a { color: var(--iris-700); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.ct-form a:hover { color: var(--iris-600); }

.ct-rows { display: flex; flex-direction: column; gap: 20px; }
.ct-two { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 20px; }
.ct-lab { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; font-weight: 500; font-size: 14.5px; line-height: 1.35; color: var(--slate-700); }
.ct-req { font-family: var(--font-mono); font-size: 10px; line-height: 1.4; letter-spacing: 0.14em; text-transform: uppercase; color: var(--slate-500); }
.ct-hint { margin-top: 6px; font-size: 12.5px; line-height: 1.45; color: var(--slate-500); }
.ct-msg { margin-top: 6px; font-size: 13px; line-height: 1.45; font-weight: 600; color: var(--slate-700); }

/* Veldrand slate-500 in plaats van mist: 5,6:1 tegen paper (ontwerp §4a). */
.ct-in { display: block; width: 100%; margin-top: 6px; font-family: var(--font-body); font-size: 15.5px; color: var(--ink); background: var(--paper); border: 1px solid var(--slate-500); border-radius: var(--radius-md); padding: 13px 14px; transition: border-color 120ms ease, box-shadow 120ms ease; }
.ct-in:hover { border-color: var(--iris-600); }
.ct-in:focus, .ct-in:focus-visible { outline: none; border-color: var(--iris-600); box-shadow: 0 0 0 3px var(--iris-100); }
textarea.ct-in { min-height: 92px; line-height: 1.5; resize: vertical; }
.ct-select { position: relative; display: block; margin-top: 6px; }
.ct-select .ct-in { margin-top: 0; appearance: none; -webkit-appearance: none; padding-right: 38px; cursor: pointer; }
/* Pijl als masker, zodat de kleur een token blijft. */
.ct-select::after {
  content: ""; position: absolute; top: 50%; right: 13px; width: 16px; height: 16px; margin-top: -8px; pointer-events: none; background: var(--slate-700);
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.5'><path d='M2.5 5.5l5.5 5.5 5.5-5.5'/></svg>") center / 16px 16px no-repeat;
          mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.5'><path d='M2.5 5.5l5.5 5.5 5.5-5.5'/></svg>") center / 16px 16px no-repeat;
}
/* Fout: rand error-500, 1,5 px; de padding krimpt mee zodat het veld niet verspringt. */
.ct-field.is-invalid .ct-in { border: 1.5px solid var(--error-500); padding: 12.5px 13.5px; }
.ct-field.is-invalid .ct-select .ct-in { padding-right: 37.5px; }

.ct-docs { display: flex; align-items: flex-start; gap: 11px; padding: 2px 0; }
.ct-docs input { flex: 0 0 auto; width: 24px; height: 24px; min-width: 24px; margin: 1px 0 0; accent-color: var(--iris-600); cursor: pointer; }
.ct-docs label { padding: 2px 0; font-size: 14px; line-height: 1.45; color: var(--slate-700); cursor: pointer; }

/* Foutoverzicht, contextregel en verzenden-mislukt: standaard verborgen. */
.ct-errors { margin-bottom: 22px; background: var(--paper); border: 1.5px solid var(--error-500); border-radius: var(--radius-md); padding: 16px 18px; }
.ct-errors__title { margin-bottom: 8px; font-family: var(--font-display-creator); font-weight: 700; font-size: 15px; letter-spacing: -0.01em; color: var(--ink); }
.ct-errors ul { padding-left: 18px; font-size: 13.5px; line-height: 1.7; color: var(--slate-700); }
.ct-note { margin-bottom: 22px; background: var(--iris-50); border: 1px solid var(--iris-100); border-radius: var(--radius-md); padding: 14px 16px; font-size: 14.5px; line-height: 1.5; color: var(--slate-700); text-wrap: pretty; }
.ct-failed { margin-top: 24px; background: var(--paper); border: 1.5px solid var(--error-500); border-radius: var(--radius-md); padding: 14px 16px; font-size: 14px; line-height: 1.5; font-weight: 600; color: var(--slate-700); }

.ct-submit { margin-top: 28px; display: flex; flex-direction: column; align-items: stretch; gap: 14px; }
.ct-sub { display: flex; width: 100%; align-items: center; justify-content: center; gap: 10px; font-family: var(--font-body); font-weight: 600; font-size: 16.5px; line-height: 1.25; border-radius: var(--radius-md); padding: 16px 26px; border: 1.5px solid var(--ember-500); background: var(--ember-500); color: var(--ink); cursor: pointer; transition: background-color 120ms ease, border-color 120ms ease; }
.ct-sub:hover:not(:disabled) { background: var(--ember-300); border-color: var(--ember-300); }
.ct-sub:hover:not(:disabled) .ct-arr { transform: translateX(3px); }
.ct-sub:active:not(:disabled) { background: var(--ember-300); border-color: var(--ink); }
.ct-sub:focus-visible { outline: 3px solid var(--iris-600); outline-offset: 3px; }
.ct-sub:disabled { opacity: 0.4; cursor: not-allowed; }
.ct-privacy { font-size: 13.5px; line-height: 1.5; text-align: center; }
.ct-privacy a { display: inline-block; padding: 5px 8px; }

/* ── B3 · Eén case, ná het formulier ─────────────────────────────────── */
.ct-case { background: var(--paper); }
.ct-case__pad { padding: 56px 0 64px; max-width: 780px; }
.ct-case__card { background: var(--paper); border: 1px solid var(--mist); border-radius: var(--radius-lg); padding: 28px 30px; }
.ct-case__h2 { font-size: 21px; line-height: 1.3; }
.ct-case__link { font-family: var(--font-display-creator); font-weight: 700; letter-spacing: -0.014em; color: var(--ink); text-wrap: pretty; }
.ct-case__cl { transition: color 120ms ease; }
.ct-case__link:hover .ct-case__cl { color: var(--iris-700); }
.ct-case__link .ct-arr { color: var(--iris-700); }
.ct-case__link:hover .ct-arr, .ct-case__all:hover .ct-arr { transform: translateX(3px); }
.ct-case__quote { margin-top: 18px; font-size: 16.5px; line-height: 1.6; color: var(--slate-700); max-width: 62ch; text-wrap: pretty; }
.ct-case__by { display: block; margin-top: 10px; font-size: 14px; line-height: 1.6; color: var(--slate-500); }
.ct-case__more { margin-top: 22px; }
.ct-case__all { display: inline-block; padding: 4px 0; font-size: 15px; font-weight: 600; color: var(--iris-700); }

/* ── Breekpunten ─────────────────────────────────────────────────────── */
@container (max-width: 1024px) {
  .ct-grid { grid-template-columns: minmax(0, 1fr); gap: 40px; padding: 36px 0 60px; }
}
@container (max-width: 640px) {
  .ct-wrap { padding: 0 20px; }
  .ct-grid { gap: 28px; padding: 24px 0 44px; }
  .ct-h1 { font-size: 32px; }
  .ct-qual { margin-top: 14px; font-size: 17.5px; }
  .ct-proof { margin-top: 22px; }
  .ct-logowrap { margin-top: 14px; }
  .ct-logos { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px 18px; margin-top: 10px; }
  .ct-logos li { height: 24px; }
  .ct-logos img { height: 24px; }
  .ct-logos li:nth-child(n+7) { display: none; }
  .ct-intro { margin-top: 18px; font-size: 15px; max-width: 58ch; }
  .ct-route { margin-top: 20px; padding-top: 18px; }
  .ct-next { margin-top: 20px; padding-top: 18px; }
  /* De drie stappen lopen als één alinea door. */
  .ct-steps { margin-top: 10px; display: block; }
  .ct-step { display: inline; }
  .ct-step__n { margin-right: 5px; }
  .ct-step__t { font-size: 14.5px; }
}
/* Deze twee meten de formulierkolom (.ct-form), niet de pagina. */
@container (max-width: 600px) { .ct-card { padding: 22px; } }
@container (max-width: 470px) { .ct-two { grid-template-columns: minmax(0, 1fr); gap: 18px; } }

@media (prefers-reduced-motion: reduce) { .ct * { transition: none !important; } }