/* CT2 — Formulier + wat er daarna gebeurt (LICHT; id="contact").
   HERO-SYSTEEM par. 9b (Timo-besluit 2026-07-20): direct onder elke PageHero
   een lichte sectie; het fragment draagt daarom geen .section--dark meer en
   de sectie-achtergrond is de cream body. Rijdt volledig op het o10-contract
   (css/over-ons/o10.css): paneel, arcs, formulier-kaart, velden, select,
   succes-state en alle breakpoints komen daarvandaan. Dat contract rijdt
   ongewijzigd door op de 7 navy pagina's; ALLE licht-aanpassingen hier zijn
   scoped op .ct-plan. Wat "licht" concreet betekent:
   - het cream paneel (--surface-cream) valt samen met de cream body en wordt
     een onzichtbaar layout-frame; de bogen (navy 10%) en de blue-100
     formulier-kaart dragen het beeld. Bewust geen eigen paneel-oppervlak:
     de spec vraagt sectie-achtergrond cream, geen kaart-op-kaart.
   - koppen/tekst reden binnen het paneel al op var(--text-strong) /
     var(--text-body) / var(--text-muted) (het paneel was altijd al licht) en
     de eyebrow draagt hier de licht-variant uit base.css; er is dus geen
     inv-naar-licht-omzetting nodig. De blue-100 kaart blijft zoals hij is.
   - de num-badge (.ct-stap-num, navy-950 op inv-tekst) blijft: donker accent
     werkt op licht.
   Dit bestand bevat verder UITSLUITEND de stappen- en kaartkop-stijlen; de
   contract-classes zelf worden nooit gewijzigd. Shell laadt ct2.css ná
   o10.css, zodat overrides bij gelijke specificiteit via bronvolgorde
   winnen. */

/* ---------- Sectie: licht blok onder de navy PageHero ---------- */

/* De oude regel { padding-block: 0 var(--space-section) } liet ct2 naadloos
   op de navy ct-hero aansluiten; met de kleurseam van par. 9b is boven weer
   gewone sectie-lucht nodig. Het .section-default (padding-block:
   var(--space-section), base.css) is precies dat ritme (nf2-precedent:
   zelfde positie onder de PageHero); de kaart-uitsteek van -68px valt ruim
   binnen die padding. Geen eigen regel meer nodig. */

/* LICHT CTA-slot met OPGETILD paneel (Timo 2026-07-21, definitief): de contact-
   sectie blijft LICHT/beige (zelfde hero-opbouw als de andere header-pagina's).
   We houden EXACT de o10-CTA-layout aan "zoals elke CTA-sectie op elke pagina":
   het cream paneel met de boog-lijnen (circle lines) op de achtergrond en de
   blue-100 formulier-kaart die het paneel overlapt. Omdat het cream paneel op de
   cream body zou wegvallen, krijgt het PANEEL dezelfde diepe schaduw als de
   kaarten (--shadow-panel) + een subtiele rand, zodat het van de beige
   achtergrond afkomt (je ziet de diepte). Bogen blijven zichtbaar. Alles scoped
   op .ct-plan; het navy o10-contract op de andere pagina's blijft ongemoeid. */
.ct-plan .oa-slot-panel {
  align-items: start;               /* stappen-kolom is hoog: top-uitlijnen */
  box-shadow: var(--shadow-panel);  /* tilt het paneel van de beige body af */
  border: 1px solid var(--line-paper);
}

/* ---------- Linkerkolom: eyebrow + H2 + drie genummerde stappen ---------- */

/* Paneel is licht: base.css geeft de eyebrow hier vanzelf de licht-variant
   (ticks + slate); alleen de kop-afstand is sectie-werk (huisritme 12-20px). */
.ct-plan-left .eyebrow { margin-bottom: 16px; }

/* Regelval op zinsgrens (review r1): op 1440/1280 brak de kop mid-zin
   ("...ACHTER. DE / REST DOEN WIJ."). balance kiest bij twee regels de
   zinsgrens en verandert niets waar de kop op één regel past. */
.ct-plan-left h2 { text-wrap: balance; }

.ct-stappen {
  list-style: none;
  margin-top: clamp(28px, 4vh, 36px);
  display: grid;
  gap: clamp(20px, 3vh, 28px);
}

.ct-stap {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  column-gap: 18px;
  align-items: center; /* kop optisch gecentreerd op de 44px badge */
}

/* Num-badge (vorm-canon, zelfde recept als .num-badge in base.css) */
.ct-stap-num {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--navy-950);
  color: var(--text-strong-inv);
  font-family: var(--font-display);
  font-size: 1.05rem;
  display: grid;
  place-content: center;
}

/* h3 draagt in base.css het Anton-display-recept; stap-koppen zijn per spec
   Public Sans 700, dus het display-recept hier expliciet terugdraaien. */
.ct-stap-kop {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 1.0625rem;
  line-height: 1.45;
  letter-spacing: 0;
  text-transform: none;
  color: var(--text-strong);
}

.ct-stap-body {
  grid-column: 2; /* onder de kop uitlijnen, niet onder de badge */
  margin-top: 6px;
  font-size: .9375rem;
  line-height: 1.6;
  color: var(--text-body);
  max-width: 44ch;
}

/* ---------- Kaartkop + subregel bovenin de blue-100 kaart, vóór het formulier ---------- */

.ct-kaartkop {
  font-weight: 700;
  font-size: 1.125rem;
  color: var(--text-strong);
}

.ct-kaartsub {
  font-size: var(--text-small);
  /* text-body i.p.v. text-muted (review r1): muted haalde op de blue-100-kaart
     maar 3,4:1 en deze regel draagt de 24-uursbelofte. */
  color: var(--text-body);
  margin: 4px 0 18px;
}