/* =========================================================================
   UnIQtalent — landing styles.
   Design language: near-black panels, brass-gold display type (Bungee) in
   uppercase, Roboto for body copy. The recurring motif is the "bar rule" —
   the gold bars that run out of the wordmark — reused as eyebrow markers,
   section dividers and list bullets.
   ========================================================================= */

:root {
  --ink: #0a0a0b;
  --ink-2: #141416;
  --gold: #bf9633;
  --gold-deep: #8d6e26;
  --gold-bright: #d9ae4a;
  --paper: #ffffff;
  --paper-2: #f6f4ef;
  --text: #1c1b19;
  --text-soft: #57534c;
  --on-dark: #f2efe8;
  --on-dark-soft: #b6b1a6;
  --line: rgba(28, 27, 25, 0.14);
  --radius: 10px;
  --edge: clamp(20px, 5vw, 60px);
  --shell: 1320px;
  --wrap: 1140px;
  --font-display: "Bungee", "Arial Black", Impact, sans-serif;
  --font-body: "Roboto", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica,
    Arial, sans-serif;
}

* { box-sizing: border-box; }

/* Layout classes below set `display`, which would otherwise beat the user
   agent's [hidden] rule on equal specificity. */
[hidden] { display: none !important; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 16.5px;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  text-wrap: pretty;
}

img { max-width: 100%; display: block; }

:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
}

.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--gold);
  color: var(--ink);
  padding: 10px 18px;
  z-index: 100;
}
.skip:focus { left: 12px; top: 12px; }

/* -------------------------------------------------------------------------
   Layout primitives
   ------------------------------------------------------------------------- */

.shell { max-width: var(--shell); margin-inline: auto; padding-inline: var(--edge); }
.wrap { max-width: var(--wrap); margin-inline: auto; padding-inline: var(--edge); }

.section { padding-block: clamp(56px, 8vw, 112px); }
.section-tight { padding-block: clamp(40px, 5vw, 72px); }
.section-paper2 { background: var(--paper-2); }

/* -------------------------------------------------------------------------
   Type
   ------------------------------------------------------------------------- */

.display {
  font-family: var(--font-display);
  font-weight: 400;
  text-transform: uppercase;
  color: var(--gold);
  line-height: 1.14;
  letter-spacing: 0.005em;
  margin: 0;
  overflow-wrap: break-word;
}

.d-hero { font-size: clamp(30px, 5.2vw, 62px); line-height: 1.08; }
.d-1 { font-size: clamp(24px, 3.4vw, 42px); }
.d-2 { font-size: clamp(20px, 2.4vw, 30px); }
.d-3 { font-size: clamp(17px, 1.7vw, 21px); }

.lead { font-size: clamp(17px, 1.5vw, 19px); line-height: 1.72; }
.prose p { margin: 0 0 20px; max-width: 62ch; }
.prose p:last-child { margin-bottom: 0; }
.prose a { color: var(--gold-deep); text-underline-offset: 3px; }
.prose a:hover { color: var(--gold); }
.soft { color: var(--text-soft); }
.center { text-align: center; }
.center .prose p { margin-inline: auto; }

/* Eyebrow: a short gold bar followed by a letterspaced label. */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  font-size: 12.5px;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--text-soft);
  margin: 0 0 20px;
}
.eyebrow::before {
  content: "";
  width: 34px;
  height: 6px;
  background: var(--gold);
  flex: none;
}
.eyebrow-on-dark { color: var(--on-dark); }
.center .eyebrow { justify-content: center; }

/* -------------------------------------------------------------------------
   Buttons
   ------------------------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 48px;
  padding-inline: 26px;
  border: 1px solid transparent;
  border-radius: 6px;
  font: inherit;
  font-size: 15.5px;
  font-weight: 500;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.18s ease, color 0.18s ease, border-color 0.18s ease;
}
.btn-gold { background: var(--gold); color: var(--ink); }
.btn-gold:hover { background: var(--gold-bright); color: var(--ink); }
.btn-ghost { background: transparent; color: var(--on-dark); border-color: rgba(242, 239, 232, 0.55); }
.btn-ghost:hover { background: rgba(242, 239, 232, 0.12); color: var(--on-dark); }
.btn-ink { background: var(--ink); color: var(--on-dark); }
.btn-ink:hover { background: var(--ink-2); color: var(--on-dark); }
/* Sits on a solid gold card — a deeper gold keeps it legible without white. */
.btn-deep { background: var(--gold-deep); color: #fff; width: 100%; }
.btn-deep:hover { background: #7a5f20; color: #fff; }
.btn-row { display: flex; flex-wrap: wrap; gap: 14px; }

/* -------------------------------------------------------------------------
   Wordmark — "IQ" in white, "RECRUITMENT" in gold, gold bars filling the rest
   of the line. The bars are the brand's structural motif.
   ------------------------------------------------------------------------- */

.mark {
  display: inline-grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  column-gap: 10px;
  row-gap: 3px;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 21px;
  line-height: 1.06;
  text-transform: uppercase;
  text-decoration: none;
  letter-spacing: 0.01em;
}
/* Bungee's Q tail is a short stub — without extra tracking the Q in "UNIQ"
   reads as an O at nav sizes. */
.mark-a { color: #fff; letter-spacing: 0.08em; }
.mark-b { color: var(--gold); }
.mark-bars {
  display: grid;
  gap: 3px;
  min-width: 26px;
}
.mark-bars i { display: block; height: 4px; background: var(--gold); }
.mark-bars i:nth-child(2) { width: 72%; }
.mark-on-light .mark-a { color: var(--ink); }

/* -------------------------------------------------------------------------
   Navigation
   ------------------------------------------------------------------------- */

.nav {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--ink);
  border-bottom: 1px solid rgba(191, 150, 51, 0.28);
}
.nav-inner {
  display: flex;
  align-items: center;
  gap: 28px;
  min-height: 68px;
  padding-block: 12px;
}
.nav-links {
  display: flex;
  align-items: center;
  gap: 26px;
  margin-left: auto;
  font-size: 15px;
}
.nav-links a {
  color: #e8e4dc;
  text-decoration: none;
  padding-block: 6px;
}
.nav-links a:hover { color: var(--gold-bright); }
/* `.nav-links a` outranks `.btn-gold` on specificity — restore the button's
   own colours so the CTA keeps dark-on-gold contrast. */
.nav-links a.btn-gold { color: var(--ink); }
.nav-links a.btn-gold:hover { color: var(--ink); }
.nav-cta-long { display: inline; }
.nav-cta-short { display: none; }
@media (max-width: 900px) {
  .nav-links a.nav-hide { display: none; }
}
@media (max-width: 620px) {
  /* The long label wraps to two lines and doubles the bar height. */
  .nav-cta-long { display: none; }
  .nav-cta-short { display: inline; }
}

/* -------------------------------------------------------------------------
   Entrance gate — the opening scene, standing in for the reference site's
   photo slider. Two photographic halves, one per audience. Progressive
   enhancement: without JS the attribute is never set and the gate stays out
   of the way, so the page is never trapped behind an overlay.
   ------------------------------------------------------------------------- */

.gate {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 90;
  background: var(--ink);
  color: var(--on-dark);
  flex-direction: column;
  overflow: hidden;
}
html[data-gate="on"] .gate { display: flex; }
html[data-gate="on"] { overflow: hidden; }

/* Full-bleed, with the same inline padding as .gate-body, so the wordmark and
   the rule line up with the eyebrows in the halves below. */
.gate-head {
  flex: none;
  padding: clamp(18px, 3vw, 32px) clamp(20px, 3vw, 48px) 0;
}
.gate-brand {
  display: flex;
  align-items: center;
  gap: 16px 28px;
  flex-wrap: wrap;
  justify-content: space-between;
}
.gate-region {
  font-size: 12.5px;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--on-dark-soft);
}
/* The heavy double rule from the wordmark, drawn on entry. */
.gate-rule {
  height: 0;
  margin: clamp(14px, 2vw, 22px) 0 0;
  border: 0;
  border-top: 6px solid var(--gold);
  transform-origin: left;
}
.gate-kicker {
  margin: 14px 0 0;
  font-size: 12.5px;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--on-dark-soft);
}

.gate-halves {
  flex: 1;
  min-height: 0;
  display: grid;
  grid-template-columns: 1fr 1px 1fr;
  margin-top: clamp(18px, 3vw, 30px);
}
.gate-divider { background: rgba(191, 150, 51, 0.45); }

.gate-half {
  position: relative;
  overflow: hidden;
  display: flex;
  appearance: none;
  border: 0;
  background: transparent;
  font: inherit;
  color: inherit;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
  transition: opacity 0.45s ease;
}
/* Two nested layers on purpose: the inner one runs the endless drift, the
   outer one takes the hover zoom. A running animation outranks normal
   declarations, so sharing one element would let the drift swallow the hover. */
.gate-photo {
  position: absolute;
  inset: 0;
  overflow: hidden;
  transform: scale(1);
  transition: transform 0.9s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.gate-photo-img {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  /* Heavy desaturation + darkening is what makes two unrelated stock shots
     read as one set, and keeps the gold type legible on top. */
  filter: grayscale(1) contrast(1.06) brightness(0.42);
  transform: scale(1.06);
  transition: filter 0.6s ease;
}
.gate-half::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to top, rgba(10, 10, 11, 0.96) 8%, rgba(10, 10, 11, 0.6) 52%, rgba(10, 10, 11, 0.38) 100%),
    linear-gradient(rgba(191, 150, 51, 0.18), rgba(191, 150, 51, 0.18));
}
.gate-body {
  position: relative;
  z-index: 1;
  margin-top: auto;
  width: 100%;
  padding: clamp(24px, 3.4vw, 52px) clamp(20px, 3vw, 48px);
  display: flex;
  flex-direction: column;
  gap: 12px;
}
/* Spans, not h2/p — a <button> only takes phrasing content. */
.gate-title {
  display: block;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(26px, 3.8vw, 56px);
  line-height: 1.06;
  text-transform: uppercase;
  color: var(--gold);
  max-width: 11ch;
}
.gate-sub {
  display: block;
  font-size: clamp(15px, 1.3vw, 17.5px);
  line-height: 1.6;
  max-width: 32ch;
  color: var(--on-dark);
}
.gate-go {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin-top: 4px;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gold-bright);
}
.gate-go span { transition: transform 0.4s cubic-bezier(0.2, 0.7, 0.2, 1); }

.gate-half:hover .gate-photo-img,
.gate-half:focus-visible .gate-photo-img {
  filter: grayscale(0.3) contrast(1.02) brightness(0.62);
}
.gate-half:hover .gate-photo,
.gate-half:focus-visible .gate-photo { transform: scale(1.07); }
.gate-half:hover .gate-go span,
.gate-half:focus-visible .gate-go span { transform: translateX(9px); }
/* Hovering one half pushes the other back. */
.gate-halves:has(.gate-half:hover) .gate-half:not(:hover) { opacity: 0.42; }

@media (max-width: 760px) {
  .gate-halves { grid-template-columns: 1fr; grid-template-rows: 1fr 1px 1fr; }
  .gate-title { max-width: none; }
}

/* Entry + exit choreography */
@keyframes gate-rise { from { opacity: 0; transform: translateY(26px); } to { opacity: 1; transform: none; } }
@keyframes gate-draw { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes gate-drift { from { transform: scale(1.06) translate3d(0, 0, 0); } to { transform: scale(1.15) translate3d(-1.5%, -1.5%, 0); } }

html[data-gate="on"] .gate-rule { animation: gate-draw 0.9s cubic-bezier(0.7, 0, 0.2, 1) both; }
/* `backwards`, not `both`: a filled-forwards animation would keep pinning
   opacity to 1 and the dim-the-other-half rule would never take effect. */
html[data-gate="on"] .gate-half { animation: gate-rise 0.85s cubic-bezier(0.2, 0.7, 0.2, 1) backwards; }
html[data-gate="on"] .gate-half-b { animation-delay: 0.12s; }
/* The slow drift is what the reference gets from its slider — a banner that is
   never quite still. */
html[data-gate="on"] .gate-photo-img { animation: gate-drift 26s ease-in-out infinite alternate; }

.gate-leaving { transition: transform 0.75s cubic-bezier(0.7, 0, 0.2, 1); transform: translateY(-101%); }
.gate-half-dropping { opacity: 0; transform: translateY(12px); transition: opacity 0.3s ease, transform 0.3s ease; }
.gate-half-keeping .gate-photo { transform: scale(1.12); }
.gate-half-keeping .gate-photo-img { filter: grayscale(0) brightness(0.72); }

@media (prefers-reduced-motion: reduce) {
  html[data-gate="on"] .gate-rule,
  html[data-gate="on"] .gate-half,
  html[data-gate="on"] .gate-photo-img { animation: none; }
  .gate-photo, .gate-photo-img, .gate-go span, .gate-half { transition: none; }
  .gate-leaving { transition: none; }
}

/* -------------------------------------------------------------------------
   Hero — the one full-bleed panel. A gold constellation drifts behind the
   headline, echoing the network in the IQ mark.
   ------------------------------------------------------------------------- */

.hero {
  position: relative;
  display: grid;
  align-items: center;
  /* Schermvullend bij binnenkomst: de viewport minus de sticky nav erboven.
     --nav-h wordt door site.js gemeten; 64px is de fallback zonder JS. */
  min-height: calc(100vh - var(--nav-h, 64px));
  min-height: calc(100svh - var(--nav-h, 64px));
  background: var(--ink);
  color: var(--on-dark);
  overflow: hidden;
}
.hero-net {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
/* Fotobackdrop achter de koptekst — zelfde behandeling als de gate-foto's,
   met links een extra donkere zone zodat het goud leesbaar blijft.
   Er liggen er twee op elkaar; site.js verlegt is-active elke 10 s. De foto
   die actief wordt vloeit vanaf rechts binnen: cross-fade plus een slide
   via de losse translate-property, die onafhankelijk composeert met de
   transform:scale van de drift-animatie. Die drift loopt continu op beide
   foto's (in tegenfase), zodat een wissel nooit een schaal-sprong geeft.
   De vertrekkende foto blijft stilstaan tijdens zijn fade-out: zijn
   translate springt pas ná de fade (delay) onzichtbaar terug naar rechts. */
.hero-photo {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  filter: grayscale(1) contrast(1.06) brightness(0.38);
  opacity: 0;
  translate: 12% 0;
  transition: opacity 1.6s ease-in-out, translate 0s linear 1.6s;
  animation: hero-drift 26s ease-in-out infinite alternate;
}
.hero-photo.is-active {
  opacity: 1;
  translate: 0 0;
  /* Sterke ease-out: de meeste afstand is al afgelegd terwijl de foto nog
     doorzichtig is, dus de linkerrand komt niet zichtbaar "los". */
  transition: opacity 1.6s ease-in-out, translate 1.6s cubic-bezier(0.16, 1, 0.3, 1);
}
/* Vóór de hero-entrance (wipe-go ontbreekt nog) staat ook de actieve foto
   verborgen rechts klaar, zonder transition zodat hij bij een gate-herstart
   onzichtbaar terugspringt. Zodra site.js wipe-go zet vloeit hij binnen met
   de transition van .is-active hierboven. Zonder JS is er geen data-js en
   staat de foto er gewoon. */
html[data-js="on"] .hero:not(.wipe-go) .hero-photo {
  opacity: 0;
  translate: 12% 0;
  transition: none;
}
.hero-photo + .hero-photo { animation-delay: -13s; }
@keyframes hero-drift {
  from { transform: scale(1); }
  to { transform: scale(1.07); }
}
@media (prefers-reduced-motion: reduce) {
  .hero-photo { animation: none; transition: none; }
}

/* Blok-reveal op de hero-tekst, afgekeken van deregiebehandelaars.nl: per
   regel schuift een gouden balk van buiten het scherm naar de plek waar de
   tekst komt, blijft daar even staan en gaat dan als een schuifje open. De
   tekst wordt zichtbaar zolang de balk hem nog afdekt, dus het schuifje
   onthult hem van links naar rechts. site.js zet wipe-go op de hero (bij
   het sluiten van de gate, of meteen bij laden als er geen gate is) en
   geeft elk element zijn eigen vertraging via --wd. Zonder JS is er geen
   data-js-attribuut en blijft alle tekst gewoon staan. */
html[data-js="on"] .wipe { visibility: hidden; }
.wipe { position: relative; }
.wipe::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--gold);
  transform: translateX(-100vw);
  transform-origin: right center;
  pointer-events: none;
}
/* Donkere variant voor de lead: een inkt-zwart blok in plaats van goud,
   met een gouden voorrand — op de donkere foto zou een kaal zwart blok
   wegvallen, de rand tekent de binnenkomst en de reveal af. */
.wipe-dark::after {
  background: var(--ink);
  border-left: 2px solid var(--gold);
}
.wipe-go .wipe {
  animation: wipe-text 1.3s both;
  animation-delay: var(--wd, 0s);
}
.wipe-go .wipe::after {
  animation: wipe-box 1.3s both;
  animation-delay: var(--wd, 0s);
}
@keyframes wipe-text {
  0%, 49% { visibility: hidden; }
  50%, 100% { visibility: visible; }
}
@keyframes wipe-box {
  0% {
    transform: translateX(-100vw) scaleX(1);
    animation-timing-function: cubic-bezier(0.3, 0.4, 0.15, 1);
  }
  /* aangekomen op de tekstpositie — even blijven staan */
  44% { transform: translateX(0) scaleX(1); }
  58% {
    transform: translateX(0) scaleX(1);
    animation-timing-function: cubic-bezier(0.6, 0, 0.3, 1);
  }
  /* het schuifje gaat open: de balk klapt dicht naar rechts */
  100% { transform: translateX(0) scaleX(0); }
}
/* Herhaal-run bij een dia-wissel: alléén de balk speelt opnieuw. wipe-redo
   blijft op de kop staan (tekst zichtbaar, geen tekst-animatie — anders zou
   de kop al verdwijnen terwijl de balk nog onderweg is); wipe-reset wordt
   even getoggeld om de balk-animatie te herstarten. site.js wisselt de
   tekst precies in het venster waarin de balk hem afdekt. */
.wipe.wipe-redo {
  animation: none !important;
  visibility: visible !important;
}
.wipe.wipe-reset::after { animation: none !important; }

@media (prefers-reduced-motion: reduce) {
  html[data-js="on"] .wipe { visibility: visible; }
  .wipe-go .wipe,
  .wipe-go .wipe::after { animation: none; }
}

/* Wissel-indicator rechtsonder in de hero: een mini-sterrenbeeld in de lijn
   van het netwerk achter de kop. Acht punten lichten één voor één op (elke
   seconde één) en de verbindingslijnen springen in ster-volgorde kriskras
   over — geen ronddraaiende voortgangsring. Na 10 s is het beeld compleet en
   wisselt de dia; site.js herstart de opbouw dan via ht-run. Zichtbaar
   (ht-on) zodra de rotatie echt loopt, dus nooit zonder JS of met reduced
   motion. */
.hero-timer {
  position: absolute;
  right: 26px;
  bottom: 22px;
  width: 44px;
  height: 44px;
  z-index: 1;
  opacity: 0;
  transition: opacity 0.6s ease;
  pointer-events: none;
}
.hero-timer.ht-on { opacity: 0.85; }
.hero-timer circle {
  fill: var(--gold-bright);
  opacity: 0;
  transform-box: fill-box;
  transform-origin: center;
}
.hero-timer line {
  stroke: var(--gold);
  stroke-width: 1;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  opacity: 0.55;
}
/* 8 punten over de 10s-cyclus: elke 1,25 s één; de lijn erna vertrekt
   0,15 s later en komt precies aan als het volgende punt oplicht, zodat
   punt 8 + slotlijn exact op de dia-wissel af zijn. */
.ht-run circle {
  animation: ht-pop 0.35s cubic-bezier(0.34, 1.56, 0.64, 1) both;
  animation-delay: calc(var(--i) * 1.25s);
}
.ht-run line {
  animation: ht-draw 1.1s linear both;
  animation-delay: calc(var(--i) * 1.25s + 0.15s);
}
@keyframes ht-pop {
  from { opacity: 0; transform: scale(0); }
  60% { opacity: 1; transform: scale(1.6); }
  to { opacity: 1; transform: scale(1); }
}
@keyframes ht-draw {
  from { stroke-dashoffset: 1; }
  to { stroke-dashoffset: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-timer { display: none; }
}

/* Voortgangsbalk boven in de hero — zelfde signaal als het sterrenbeeld:
   in 10 s lineair vol, dan wisselt de dia en begint hij opnieuw. Dezelfde
   ht-on/ht-run-cyclus als de ster, dus site.js herstart ze samen. */
.hero-progress {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--gold), var(--gold-bright));
  transform: scaleX(0);
  transform-origin: left center;
  opacity: 0;
  transition: opacity 0.6s ease;
  z-index: 2;
  pointer-events: none;
}
.hero-progress.ht-on { opacity: 0.9; }
.hero-progress.ht-run { animation: hp-fill 10s linear both; }
@keyframes hp-fill {
  from { transform: scaleX(0); }
  to { transform: scaleX(1); }
}

/* Dia-toggles midden onder in de hero: langwerpige balkjes (opvallender
   dan bolletjes) om handmatig tussen de twee hero's te wisselen. Pas
   klikbaar (ht-on) als de rotatie echt draait. */
.hero-nav {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: 36px;
  display: flex;
  gap: 12px;
  z-index: 2;
  opacity: 0;
  transition: opacity 0.6s ease;
  pointer-events: none;
}
.hero-nav.ht-on { opacity: 1; pointer-events: auto; }
.hero-dot {
  width: 42px;
  height: 6px;
  border-radius: 999px;
  border: 1px solid var(--gold);
  background: transparent;
  padding: 0;
  cursor: pointer;
  transition: background 0.3s ease, border-color 0.3s ease, transform 0.3s ease;
}
.hero-dot:hover { border-color: var(--gold-bright); transform: scaleY(1.4); }
.hero-dot.is-active { background: var(--gold-bright); border-color: var(--gold-bright); }

@media (prefers-reduced-motion: reduce) {
  .hero-progress,
  .hero-nav { display: none; }
}
.hero-photo::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(10, 10, 11, 0.92) 0%, rgba(10, 10, 11, 0.6) 48%, rgba(10, 10, 11, 0.28) 100%);
}
.hero::after {
  /* A warm pool of light behind the type, so the panel is not flat black. */
  content: "";
  position: absolute;
  left: 50%;
  top: 42%;
  width: min(1100px, 130%);
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle, rgba(191, 150, 51, 0.16), transparent 62%);
  pointer-events: none;
}
.hero-inner {
  position: relative;
  z-index: 1;
  padding-block: clamp(72px, 13vw, 168px);
}
.hero h1 { max-width: 17ch; }
.hero .lead {
  max-width: 56ch;
  margin: clamp(24px, 3vw, 34px) 0 0;
  color: var(--on-dark);
}
.hero .btn-row { margin-top: clamp(30px, 4vw, 44px); }

/* -------------------------------------------------------------------------
   Intro — heading and copy on the left, a contact card on the right.
   ------------------------------------------------------------------------- */

.intro-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
  gap: clamp(36px, 6vw, 88px);
  align-items: start;
}
@media (max-width: 900px) { .intro-grid { grid-template-columns: 1fr; } }

/* Oprichters: donkere portretkaarten in de stijl van deregiebehandelaars.nl —
   zwart-wit portret dat onderin wegloopt in zwart, naam in goud. */
.founders {
  display: grid;
  gap: 22px;
}
.founder {
  position: relative;
  margin: 0;
  border-radius: 12px;
  overflow: hidden;
  background: var(--ink);
}
.founder-photo {
  display: block;
  width: 100%;
  /* height:auto verslaat het height-attribuut, anders negeert de browser de aspect-ratio */
  height: auto;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  object-position: 50% 18%;
  filter: grayscale(1) contrast(1.05) brightness(0.95);
}
.founder::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(10, 10, 11, 0) 42%, rgba(10, 10, 11, 0.55) 68%, rgba(10, 10, 11, 0.96) 100%);
}
.founder-body {
  position: absolute;
  inset: auto 0 0 0;
  z-index: 1;
  padding: 22px 24px 20px;
}
.founder-body h3 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 17px;
  text-transform: uppercase;
  letter-spacing: 0.01em;
  color: var(--gold);
  margin: 0 0 4px;
}
.founder-body p { margin: 0; font-size: 14.5px; line-height: 1.5; color: rgba(255, 255, 255, 0.82); }
.founder-body a {
  display: inline-block;
  margin-top: 10px;
  font-size: 12.5px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold-bright);
  text-decoration: none;
}
.founder-body a:hover { color: #fff; text-decoration: underline; }

/* -------------------------------------------------------------------------
   Dark panel — inset from the page edge, not full-bleed. Holds the centred
   statement and, at its foot, the two audience cards.
   ------------------------------------------------------------------------- */

.panel {
  background: var(--ink);
  color: var(--on-dark);
  padding: clamp(48px, 7vw, 92px) clamp(22px, 4vw, 64px) clamp(40px, 5vw, 64px);
}
.panel .display { max-width: 24ch; margin-inline: auto; }
.panel .lead { color: var(--on-dark); max-width: 66ch; margin-inline: auto; }
.panel a:not(.btn) { color: var(--gold-bright); }

.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: clamp(20px, 3vw, 32px);
  margin-top: clamp(40px, 6vw, 72px);
  text-align: left;
}
.card {
  background: var(--gold);
  /* White on this gold is only 2.75:1. Ink keeps the gold block — which is the
     point of the card — and lands at 7.2:1. */
  color: var(--ink);
  border-radius: var(--radius);
  padding: clamp(26px, 3.4vw, 42px);
  display: flex;
  flex-direction: column;
}
.card h3 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(19px, 2.1vw, 27px);
  line-height: 1.16;
  text-transform: uppercase;
  color: var(--ink);
  margin: 0 0 20px;
}
.card p { margin: 0; font-size: 16px; line-height: 1.7; }
.checks { list-style: none; margin: 26px 0 30px; padding: 0; display: grid; gap: 13px; }
.checks li {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr);
  gap: 12px;
  align-items: start;
  font-size: 15.5px;
  line-height: 1.55;
}
.checks li::before {
  content: "";
  margin-top: 7px;
  width: 14px;
  height: 8px;
  border-left: 3px solid var(--ink);
  border-bottom: 3px solid var(--ink);
  transform: rotate(-45deg);
}
.card .btn { margin-top: auto; }

/* -------------------------------------------------------------------------
   Disciplines
   ------------------------------------------------------------------------- */

.disciplines {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: clamp(30px, 4vw, 52px);
  margin-top: clamp(36px, 5vw, 60px);
}
.discipline h3 { margin: 16px 0 10px; }
.discipline p { margin: 0; font-size: 15.5px; line-height: 1.65; color: var(--text-soft); }
.bar { display: block; width: 40px; height: 6px; background: var(--gold); }

/* -------------------------------------------------------------------------
   Steps — the route from sign-up to first working day. Same bones as the
   disciplines grid, with the gold bar replaced by a counted numeral so the
   order reads even when the columns wrap.
   ------------------------------------------------------------------------- */

.steps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: clamp(28px, 4vw, 48px);
  margin-top: clamp(36px, 5vw, 60px);
  counter-reset: step;
}
.step {
  counter-increment: step;
  border-top: 6px solid var(--gold);
  padding-top: 18px;
}
.step::before {
  content: counter(step, decimal-leading-zero);
  display: block;
  font-family: var(--font-display);
  font-size: 24px;
  line-height: 1;
  color: var(--gold);
}
.step h3 { margin: 14px 0 10px; }
.step p { margin: 0; font-size: 15.5px; line-height: 1.65; color: var(--text-soft); }

/* -------------------------------------------------------------------------
   Quote
   ------------------------------------------------------------------------- */

.quote { margin: 0; text-align: center; }
.quote-mark {
  font-family: var(--font-display);
  font-size: 40px;
  line-height: 1;
  color: var(--gold);
}
.quote blockquote {
  margin: 20px auto 0;
  max-width: 26ch;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(19px, 2.5vw, 31px);
  line-height: 1.3;
  text-transform: uppercase;
  color: var(--ink);
}
.quote figcaption {
  margin-top: 24px;
  font-size: 12.5px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-soft);
}

/* -------------------------------------------------------------------------
   Contact
   ------------------------------------------------------------------------- */

.contact-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(36px, 6vw, 80px);
  align-items: start;
}
@media (max-width: 880px) { .contact-grid { grid-template-columns: 1fr; } }

.contact-lines { display: grid; gap: 4px; margin-top: 28px; font-size: 16px; }
.contact-lines a { color: var(--gold-deep); text-underline-offset: 3px; }
.contact-lines a:hover { color: var(--gold); }

.form { display: grid; gap: 18px; }
.field { display: grid; gap: 7px; }
.field label {
  font-size: 12.5px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-soft);
}
.field input,
.field textarea {
  font: inherit;
  font-size: 16px;
  color: var(--text);
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 12px 14px;
  width: 100%;
}
.field textarea { min-height: 128px; resize: vertical; line-height: 1.6; }
.field input:focus, .field textarea:focus { border-color: var(--gold); }

/* Segmented control replacing the old full-screen audience gate. */
.segmented { display: flex; flex-wrap: wrap; gap: 10px; }
.segmented input { position: absolute; opacity: 0; pointer-events: none; }
.segmented label {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding-inline: 20px;
  border: 1px solid var(--line);
  border-radius: 6px;
  font-size: 15px;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  color: var(--text-soft);
  cursor: pointer;
  transition: background-color 0.16s ease, color 0.16s ease, border-color 0.16s ease;
}
.segmented input:checked + label {
  background: var(--ink);
  border-color: var(--ink);
  color: #fff;
}
.segmented input:focus-visible + label { outline: 2px solid var(--gold); outline-offset: 3px; }

.hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.form-note { margin: 0; font-size: 14px; color: var(--text-soft); min-height: 1.4em; }
.form-note-error { color: #a3301f; }

/* -------------------------------------------------------------------------
   Footer
   ------------------------------------------------------------------------- */

.foot {
  background: var(--ink);
  color: var(--on-dark-soft);
  font-size: 14.5px;
}
.foot-inner {
  display: flex;
  flex-wrap: wrap;
  gap: 20px 40px;
  justify-content: space-between;
  align-items: center;
  padding-block: 40px;
}
.foot a { color: var(--on-dark-soft); text-decoration: none; }
.foot a:hover { color: var(--gold-bright); }
.foot-links { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 24px; }
.gate-reopen {
  appearance: none;
  border: 0;
  background: transparent;
  font: inherit;
  font-size: 14.5px;
  color: var(--gold-bright);
  cursor: pointer;
  padding: 4px 0;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.gate-reopen:hover { color: var(--gold); }
/* Reopening the gate only works with JS, so the control only exists with JS.
   Keyed on data-js, not data-gate — the latter is removed when the gate closes. */
.no-js-hide { display: none; }
html[data-js] .no-js-hide { display: inline-block; }

/* -------------------------------------------------------------------------
   Motion — one shared reveal, kept subtle.
   ------------------------------------------------------------------------- */

.reveal { opacity: 0; transform: translateY(18px); }
.reveal-in {
  opacity: 1;
  transform: none;
  transition: opacity 0.7s cubic-bezier(0.2, 0.7, 0.2, 1),
    transform 0.7s cubic-bezier(0.2, 0.7, 0.2, 1);
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; }
  .reveal-in { transition: none; }
}