/* Formulier- en contactpagina-CSS (ronde 2).
   Staat NIET in styles.css: dat bestand is byte-identiek aan output/styles.css
   en dat blijft zo (spec §4.1). Er is geen scoping-mechanisme, dus elke
   selector hangt met de hand onder .enquiry-* of .enquiry. Alleen tokens uit
   DESIGN.md §1, nooit losse hex-waarden. */

.enquiry-hero { background: var(--ink); color: var(--paper); padding: calc(var(--nav-h) + 32px) 0 48px; }
/* Huisregel uit styles.css: elke donkere sectie zet de kicker op --grey (.services,
   .story, .results, .newswire, .yield, .offices-head doen dat allemaal). Deze ink-hero
   deed het niet en stond dus op de standaard --grey-2: gemeten 3,37:1 op ink, onder de
   4,5:1 die 11,5px tekst nodig heeft (DESIGN.md §8, contrast gecontroleerd). Met --grey
   is het 7,9:1, gelijk aan de tien kickers van de homepage. */
.enquiry-hero .kicker { color: var(--grey); }
.enquiry-hero .section-title { margin: 14px 0 0; }
.enquiry-lead { max-width: 46ch; margin: 18px 0 0; color: var(--grey); }

/* Een BAND, geen schermvullende foto (spec §3: de hero is bewust gehalveerd ten
   opzichte van live). Op 16/9 was het beeld 697px hoog in een 1240px-wrap en
   stond de belregel op een 900px-scherm onder de fold - precies de kostenpost
   die deze pagina niet kan hebben. 21/9 maakt er 531px van.
   Vaste aspect-ratio + cover blijft de eis uit DESIGN.md §4: wat de klant ook
   uploadt, de layout verschuift niet. object-position houdt de brug in beeld. */
.enquiry-hero-media { margin-top: 36px; aspect-ratio: 21 / 9; overflow: hidden; border-radius: 3px; }
.enquiry-hero-media img { width: 100%; height: 100%; object-fit: cover; object-position: center 62%; display: block; }

.enquiry { background: var(--paper); color: var(--ink); padding: 88px 0; }

/* Twee zones: belknop links, formulier rechts. Maten van .news-inner in
   styles.css (0,92fr / 2fr), hetzelfde raster als de dienstpagina's en de hub.
   Als één kolom haalde deze sectie 57% van de contentbreedte in haar bedrade
   vorm en 67% in de terugvalvorm, tegen 84% op de homepage - gemeten met
   scripts/check-page-floor.mjs (DESIGN.md §6c). */
.enquiry-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.92fr) minmax(0, 2fr);
  gap: clamp(30px, 5vw, 76px);
  align-items: start;
}
/* De terugvalvorm (geen FORM_ENDPOINT) is één korte alinea; die naast de knop
   zetten haalt 55% tegen 67% gestapeld. Gemeten, geen aanname. */
.enquiry-grid.is-fallback { grid-template-columns: 1fr; gap: 40px; }
.enquiry-grid.is-fallback .enquiry-call { grid-auto-flow: column; align-items: center; justify-content: start; gap: 18px; }
.enquiry-call { display: grid; gap: 16px; justify-items: start; }
.enquiry-call-note { color: var(--grey-2); }

/* De vier korte velden in twee kolommen, de rest over de volle breedte van de
   formulierkolom. Geen max-width meer: de kolom bepaalt de maat. */
.enquiry-form { display: grid; grid-template-columns: 1fr 1fr; gap: 0 20px; }
.enquiry-form > .enquiry-help,
.enquiry-form > .enquiry-hp,
.enquiry-form > .enquiry-submit,
.enquiry-form > .enquiry-privacy,
.enquiry-form > .enquiry-field-wide { grid-column: 1 / -1; }
.enquiry-field { display: block; margin-bottom: 20px; }
.enquiry-field > span { display: block; color: var(--grey-2); margin-bottom: 8px; }
.enquiry-field input,
.enquiry-field textarea {
  width: 100%;
  min-height: 44px;
  padding: 11px 14px;
  font: inherit;
  color: var(--ink);
  background: var(--white);
  border: 1px solid var(--line-k);
  border-radius: 3px;
  transition: border-color .3s var(--ease-out);
}
.enquiry-field textarea { min-height: 132px; resize: vertical; }
.enquiry-field input:focus-visible,
.enquiry-field textarea:focus-visible { outline: 2px solid var(--red); outline-offset: 2px; border-color: var(--red); }

.enquiry-help { border: 0; padding: 0; margin: 0 0 24px; }
.enquiry-help legend { color: var(--grey-2); margin-bottom: 12px; padding: 0; }
.enquiry-help-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px 20px; }
.enquiry-check { display: flex; align-items: center; gap: 10px; min-height: 44px; cursor: pointer; }
.enquiry-check input { width: 18px; height: 18px; accent-color: var(--red); flex: none; }
.enquiry-check input:focus-visible { outline: 2px solid var(--red); outline-offset: 2px; }

.enquiry-submit { margin-top: 8px; }
.enquiry-privacy { max-width: 46ch; margin: 18px 0 0; color: var(--grey-2); font-size: .85rem; }
.enquiry-fallback { max-width: 46ch; margin-top: 24px; }
/* HET ADRES IN DE TERUGVAL IS DE ENIGE ACTIE OP DEZE PAGINA ALS HET FORMULIER UIT
   STAAT, en tot 2026-08-02 was het niet te ONDERSCHEIDEN van de tekst eromheen:
   gemeten kleur rgb(10,10,12) tegen ouder rgb(10,10,12), text-decoration none,
   gewicht 400 tegen 400. Een bezoeker kan dan niet zien dat er iets te klikken
   valt. De behandeling is die van `.article-prose a` (news.css r.186),
   hergebruikt en niet verzonnen; --red-deep haalt 5,28:1 op paper en 4,79:1 op
   paper-2, allebei boven de 4,5:1 van §8.
   De padding is die van `.person-more-list a` (about.css r.583): §8 stelt 44px
   voor KNOPPEN, en dit is een inline link in een tekstblok, waarvoor WCAG 2.5.8
   24px vraagt. Gemeten vóór deze regel: 19px op careers. */
.enquiry-fallback a,
.careers-fallback a {
  color: var(--red-deep);
  text-decoration: underline;
  text-underline-offset: 2px;
  padding-block: 4px;
}

/* Honeypot: uit beeld, maar niet display:none - sommige bots slaan verborgen
   velden over en dan vangt de val niets. */
.enquiry-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.enquiry-status:empty { display: none; }
.enquiry-status { border-left: 3px solid var(--red); background: var(--paper-2); padding: 14px 16px; margin-bottom: 24px; max-width: 720px; }
.enquiry-done { max-width: 720px; }
.enquiry-done .section-title { margin: 0 0 16px; }
.enquiry-done .section-title:focus-visible { outline: 2px solid var(--red); outline-offset: 4px; }

@media (max-width: 1000px) {
  /* = styles.css r.1067: onder 1000px klappen alle twee-koloms varianten naar 1fr. */
  .enquiry-grid { grid-template-columns: 1fr; gap: clamp(26px, 6vw, 40px); }
  .enquiry-call { grid-auto-flow: column; align-items: center; justify-content: start; gap: 18px; }
}
@media (max-width: 900px) {
  .enquiry { padding: 64px 0; }
  .enquiry-help-grid { grid-template-columns: 1fr 1fr; }
  .enquiry-form { grid-template-columns: 1fr; }
  /* 21/9 wordt op een smal scherm een strook van 150px die geen werk doet, en
     verticale ruimte is hier niet het knelpunt: de belregel staat op mobiel toch
     al ruim boven de fold. 16/9 is bovendien vrijwel de natuurlijke verhouding
     van het bronbeeld (1,778 tegen 1,756), dus hier wordt nauwelijks gecropt. */
  .enquiry-hero-media { aspect-ratio: 16 / 9; }
}
@media (max-width: 560px) {
  .enquiry-help-grid { grid-template-columns: 1fr; }
}

/* ---------------------------------------------------------------------------
   /speak-to-spoke/thank-you/ - waar een bezoeker ZONDER JavaScript landt.

   Twee toestanden op een pagina, geschakeld door de HASH. De function stuurt
   naar #problem als er iets misging en anders naar de kale URL. Er is hier per
   definitie geen JavaScript, dus een querystring lezen kan niet; :target wel.

   De sibling-combinator kan alleen VOORUIT kijken, dus de probleemvorm staat
   eerst in de DOM en verbergt de bevestiging die erna komt. Dat is klassieke
   CSS en geen :has(), zodat een oudere browser hetzelfde doet.
   --------------------------------------------------------------------------- */
.thanks-problem { display: none; }
.thanks-problem:target { display: block; }
.thanks-problem:target ~ .thanks-done { display: none; }
/* EEN ANKERDOEL DAT GEEN <section> IS, VALT BUITEN DE HUISREGEL. `styles.css`
   r.78 zet `section[id], main[id] { scroll-margin-top: var(--nav-h) }`, en dit
   is een <div id="problem">. Zonder deze regel landt de bezoeker die van de
   function hierheen wordt gestuurd met de kicker VOLLEDIG achter de vaste nav
   en de kop 14px (1440px) tot 32px (390px) eraf. Gemeten op beide
   bedankpagina's: doel op top 0 bij een nav van 72px. */
.thanks-problem { scroll-margin-top: calc(var(--nav-h) + 24px); }

/* De twee knoppen naast elkaar met dezelfde tussenruimte als elders. */
.thanks-state .hero-ctas { margin-top: clamp(24px, 3vw, 34px); }