/* ==========================================================================
   Young Finance — demo v2
   Palet, typografie en ritme zijn vastgelegd als variabelen; in de rest van dit
   bestand staan geen losse kleur- of maatwaarden. Alle tekstkleuren zijn
   doorgerekend op WCAG AA (kleinste verhouding op deze pagina: 4,63:1).
   ========================================================================== */

@font-face {
  font-family: 'Lora';
  src: url('fonts/lora-roman.woff2') format('woff2-variations');
  font-weight: 400 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Lora';
  src: url('fonts/lora-italic.woff2') format('woff2-variations');
  font-weight: 400 600; font-style: italic; font-display: swap;
}
@font-face {
  font-family: 'Archivo';
  src: url('fonts/archivo-roman.woff2') format('woff2-variations');
  font-weight: 400 600; font-style: normal; font-display: swap;
}

:root {
  /* kleur */
  --papier:      #E9E3D8;
  --inkt:        #14161A;
  --inkt-body:   #504F4F;   /* 6,39:1 op papier */
  --inkt-micro:  #656462;   /* 4,63:1 op papier */
  --lijn:        rgba(20, 22, 26, .16);
  --lijn-sterk:  rgba(20, 22, 26, .34);
  --diep:        #16211C;
  --creme:       #F2EDE3;   /* 14,19:1 op diep */
  --creme-body:  #ACACA3;   /* 7,24:1 op diep */
  --creme-micro: #9A9B93;   /* 5,90:1 op diep */
  --accent:      #B23E26;   /* 4,56:1 op papier · creme erop 4,99:1 */
  /* Het accent zelf haalt op --diep maar 2,85:1; deze lichtere tint uit
     dezelfde familie haalt 5,30:1 en mag dus tekst zijn op het donkere blok. */
  --fout:        #D97757;   /* 5,30:1 op diep */

  /* typografie — drie trappen met een groot gat ertussen */
  --display:  clamp(3rem, 8.8vw, 7.5rem);
  --display-m: clamp(2.2rem, 5vw, 4rem);
  --lead:     clamp(1.3rem, 2vw, 1.85rem);
  --body:     1.0625rem;
  --micro:    .6875rem;

  /* ritme — drie waarden, meer niet */
  --ruimte-s: 3rem;
  --ruimte-m: 8rem;
  --ruimte-l: 14rem;

  --pad: clamp(1.25rem, 5vw, 4.5rem);
  --inspring: clamp(1.75rem, 6vw, 7rem);   /* afstand van de tijdlijn tot de tekst */
}

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--papier);
  color: var(--inkt);
  font-family: 'Archivo', system-ui, sans-serif;
  font-size: var(--body);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

h1, h2, h3 { font-family: 'Lora', Georgia, serif; font-weight: 400; margin: 0; }
/* Lora heeft lange stokken en staarten; onder 1.0 gaan de regels elkaar raken. */
h1 { font-size: var(--display);   line-height: 1.05; letter-spacing: -.018em; }
h2 { font-size: var(--display-m); line-height: 1.06; letter-spacing: -.015em; }
h3 { font-size: 1.375rem;         line-height: 1.3;  letter-spacing: -.005em; }
p  { margin: 0; text-wrap: pretty; }
img { display: block; max-width: 100%; height: auto; }
a  { color: inherit; }

.wrap { width: min(100% - 2 * var(--pad), 82rem); margin-inline: auto; }

.micro {
  font-size: var(--micro); line-height: 1.4; font-weight: 500;
  text-transform: uppercase; letter-spacing: .14em; color: var(--inkt-micro);
}
.lead {
  font-family: 'Lora', Georgia, serif; font-size: var(--lead);
  line-height: 1.42; letter-spacing: -.005em; color: var(--inkt-body);
}
.verborgen { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }

.overslaan {
  position: absolute; left: -100vw; top: 0; z-index: 50;
  background: var(--inkt); color: var(--papier); padding: .75rem 1.25rem;
  font-size: var(--micro); text-transform: uppercase; letter-spacing: .14em;
}
.overslaan:focus { left: 0; }

:where(a, button, input, textarea):focus-visible {
  outline: 2px solid var(--accent); outline-offset: 3px;
}

/* --- knop ---------------------------------------------------------------- */

.pil {
  display: inline-flex; align-items: center; gap: .9rem;
  background: var(--accent); color: var(--creme);
  font-size: 1rem; font-weight: 500; text-decoration: none;
  padding: .95rem 1.5rem; border: 0; border-radius: 999px;
  cursor: pointer; transition: background-color .2s ease;
  font-family: inherit;
}
.pil:hover { background: #94331F; }
.pil:disabled { opacity: .62; cursor: default; }
.pil:disabled:hover { background: var(--accent); }
.pijl { display: inline-block; transition: transform .2s ease; }
.pil:hover .pijl { transform: translateX(3px); }
@media (prefers-reduced-motion: reduce) { .pil:hover .pijl { transform: none; } }

/* --- kop ----------------------------------------------------------------- */

.kop { position: absolute; inset: 0 0 auto; z-index: 10; padding-top: 1.75rem; }
.kop-rij { display: flex; align-items: center; gap: 2rem; }

.woordmerk {
  display: grid; text-decoration: none; line-height: 1.05;
  font-size: var(--micro); font-weight: 600;
  text-transform: uppercase; letter-spacing: .22em; color: var(--inkt);
}
.kop-nav { margin-left: auto; display: flex; gap: 2rem; }
.kop-nav a {
  font-size: .9375rem; text-decoration: none; color: var(--inkt-body);
  padding-bottom: 2px; border-bottom: 1px solid transparent; transition: border-color .2s ease, color .2s ease;
}
.kop-nav a:hover { color: var(--inkt); border-bottom-color: var(--lijn-sterk); }
.kop-actie {
  font-size: .9375rem; text-decoration: none; color: var(--inkt);
  border-bottom: 1px solid var(--lijn-sterk); padding-bottom: 2px;
  transition: border-color .2s ease;
}
.kop-actie:hover { border-bottom-color: var(--inkt); }
@media (max-width: 56rem) { .kop-nav { display: none; } .kop-actie { margin-left: auto; } }

/* --- 1 · hero ------------------------------------------------------------ */

.hero {
  position: relative; padding: clamp(8rem, 16vh, 11rem) 0 var(--ruimte-s);
  /* Hoeveel groter de foto mag worden dan zijn oorspronkelijke maat. Werkt
     alleen op brede schermen: op smal blijft de vw-grens leidend, zodat de
     foto de tekstkolom niet in kruipt. */
  --fotomaat: 1.26;
}
.hero-tekst { max-width: 40rem; position: relative; z-index: 2; }
.hero h1 { margin: 1.5rem 0 0; }
.hero h1 em { font-style: italic; }
.hero .lead { margin-top: 1.75rem; max-width: 32rem; }
.hero .pil { margin-top: 2.5rem; }

.hero-figuur {
  position: absolute; right: max(-3vw, -3rem); bottom: 0; z-index: 1;
  width: min(42vw, calc(34rem * var(--fotomaat))); height: auto;
  pointer-events: none;
}

/* Het veld: twee haarlijnen die de foto afmeten en zeggen wie je ziet. Het
   maakt van de uitsnede een bewust element in plaats van een losse figuur. */
.veld {
  position: absolute; right: 0; bottom: 0; z-index: 0;
  width: min(46vw, calc(38rem * var(--fotomaat))); height: 76%;
  pointer-events: none;
}
.veld-lijnen {
  position: absolute; inset: 0;
  border-top: 1px solid var(--lijn-sterk);
  border-left: 1px solid var(--lijn-sterk);
}
.veld-naam { position: absolute; top: .9rem; left: 1.15rem; margin: 0; }
/* Op smalle schermen zakt Frank uit de absolute positie de stroom in: rechts
   uitgelijnd onder de knop, met zijn voet exact op de lijn van de strip —
   nooit een half afgesneden hoofd halverwege het scherm. */
@media (max-width: 62rem) {
  /* Kolom met expliciete volgorde: de naam valt tussen de knop en de foto,
     zodat hij de foto aankondigt en de voet van Frank op de striplijn houdt. */
  .hero { display: flex; flex-direction: column; padding-bottom: 0; }
  .hero > .wrap { order: 1; }
  .hero > .veld { order: 2; }
  .hero > .hero-figuur { order: 3; }
  .hero-figuur {
    position: static; width: min(72%, 20rem);
    margin: 2.5rem calc(-1 * var(--pad)) 0 auto;
  }
  /* De lijnen meten een absolute foto af; in de stroom hebben ze geen functie.
     Het veld hangt buiten .wrap, dus de marge moet het hier zelf doen. */
  .veld {
    position: static; width: auto; height: auto;
    margin-top: 2.25rem; padding-left: var(--pad);
  }
  .veld-lijnen { display: none; }
  .veld-naam { position: static; }
}

/* --- 2 · wat je krijgt --------------------------------------------------- */

.strip { border-top: 1px solid var(--lijn); }
.strip-rij {
  display: grid; grid-template-columns: repeat(4, 1fr);
  border-bottom: 1px solid var(--lijn);
}
.strip-rij p {
  padding: 1.6rem 1.75rem 1.6rem 0; font-size: .9375rem; color: var(--inkt-body);
  border-left: 1px solid var(--lijn); padding-left: 1.75rem;
}
.strip-rij p:first-child { border-left: 0; padding-left: 0; }
@media (max-width: 62rem) {
  .strip-rij { grid-template-columns: repeat(2, 1fr); }
  .strip-rij p:nth-child(3) { border-left: 0; padding-left: 0; }
  .strip-rij p:nth-child(-n+2) { border-bottom: 1px solid var(--lijn); }
}
@media (max-width: 34rem) {
  .strip-rij { grid-template-columns: 1fr; }
  .strip-rij p { border-left: 0; padding-left: 0; border-bottom: 1px solid var(--lijn); }
  .strip-rij p:last-child { border-bottom: 0; }
}

/* --- de doorlopende lijn ------------------------------------------------- */

.rail-zone { position: relative; }
.rail {
  position: absolute; top: 0; bottom: 0; width: 1px; z-index: 3;
  left: max(var(--pad), calc((100% - 82rem) / 2));
  background: var(--lijn); pointer-events: none;
}
.rail-voortgang {
  position: absolute; inset: 0 auto auto 0; width: 100%; height: 100%;
  background: var(--lijn-sterk); transform-origin: top; transform: scaleY(0);
}
.rail-zone .wrap { padding-left: var(--inspring); }

/* --- 3 · zo werkt het ---------------------------------------------------- */

.stappen { padding: var(--ruimte-m) 0 var(--ruimte-m); }
.stappen h2 { margin-top: 1.25rem; }

.tijdlijn { list-style: none; margin: var(--ruimte-s) 0 0; padding: 0; }
.tijdlijn > li {
  position: relative;
  display: grid; grid-template-columns: 9rem 1fr; gap: 2rem;
  padding: 2.5rem 0; border-top: 1px solid var(--lijn);
}
.tijdlijn > li:last-child { border-bottom: 1px solid var(--lijn); }
.tijdlijn h3 { margin-bottom: .6rem; }
.tijdlijn p { color: var(--inkt-body); max-width: 34rem; }
.tijd {
  font-size: var(--micro); font-weight: 500; text-transform: uppercase;
  letter-spacing: .14em; color: var(--inkt-micro); padding-top: .45rem;
}
.stip {
  position: absolute; left: calc(-1 * var(--inspring) - 3px); top: 3.05rem;
  width: 7px; height: 7px; border-radius: 999px;
  background: var(--papier); box-shadow: inset 0 0 0 1px var(--lijn-sterk);
}
.is-moment .stip { background: var(--accent); box-shadow: none; }
.is-moment .tijd { color: var(--accent); }
@media (max-width: 48rem) {
  .tijdlijn > li { grid-template-columns: 1fr; gap: .75rem; }
  .tijd { padding-top: 0; }
}

/* --- 4 · voor wie -------------------------------------------------------- */

.voor-wie { padding-bottom: 5rem; }
.voor-wie h2 { margin-top: 1.25rem; }
.gevallen {
  margin-top: var(--ruimte-s);
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: clamp(2rem, 6vw, 6rem);
}
.gevallen article { padding: 2.25rem 0 0; border-top: 1px solid var(--lijn); }
/* zigzag: de rechterkolom zakt bewust een halve stap */
.gevallen article:nth-child(even) { margin-top: 4.5rem; }
.nr {
  display: block; font-family: 'Lora', Georgia, serif; font-size: 2.75rem;
  line-height: 1; color: var(--inkt-micro); margin-bottom: 1.25rem;
}
.gevallen h3 { margin-bottom: .6rem; }
.gevallen p { color: var(--inkt-body); }
@media (max-width: 48rem) {
  .gevallen { grid-template-columns: 1fr; }
  .gevallen article { margin-top: 0 !important; padding: 2rem 0; }
}

/* --- 5 · beeldband ------------------------------------------------------- */

.band { position: relative; font-size: 0; }
.band img { width: 100%; height: clamp(14rem, 32vw, 24rem); object-fit: cover; }
/* de donkere band draagt geen tekst, dus er ligt geen enkele sluier overheen */
.band--donker { background: var(--diep); }
.band--donker img { height: clamp(11rem, 24vw, 18rem); }

/* --- 6 · Frank ----------------------------------------------------------- */

.frank { padding: var(--ruimte-m) 0 var(--ruimte-l); }
.frank-rij {
  display: grid; grid-template-columns: minmax(0, 31.25rem) minmax(0, 1fr);
  gap: clamp(2rem, 6vw, 5.5rem); align-items: stretch;
}
/* De bewering en de cijfers horen bij elkaar: ze staan als één blok optisch
   gecentreerd tegen het portret. Eerder stonden ze met space-between aan de
   uiteinden van deze kolom van ~930px, wat een gat van honderden pixels gaf en
   de cijfers als losse balk liet hangen. */
.frank-tekst { display: flex; flex-direction: column; justify-content: center; }
.frank-beeld { margin: 0; }
/* De enige rasterbreuk op de pagina: alleen het portret stapt terug uit de
   inspringing, tot precies op de tijdlijn. Nooit breder dan de bron (500 px). */
.frank-beeld img {
  width: min(100%, 31.25rem);
  margin-left: calc(-1 * var(--inspring));
}
.frank-beeld figcaption { margin-top: 1rem; }
/* Hier is de tekst de hoofdstem van de sectie, dus een stap groter en in volle
   inkt in plaats van gedempt. De ondergrens blijft net onder de hero-lead, zodat
   die op smalle schermen de grootste alinea van de pagina blijft. */
.frank-tekst .lead {
  font-size: clamp(1.35rem, 2.5vw, 2.25rem);
  line-height: 1.3;
  color: var(--inkt);
  max-width: 31rem;
}

/* Strak onder de bewering: de cijfers zijn het bewijs erbij, geen los blok. */
.cijfers {
  margin: 2rem 0 0; padding: 0;
  display: grid; grid-template-columns: repeat(4, 1fr);
  border-top: 1px solid var(--lijn); border-bottom: 1px solid var(--lijn);
}
.cijfers > div { padding: 1.75rem 1rem 1.75rem 0; }
.cijfers dt {
  font-family: 'Lora', Georgia, serif; font-size: clamp(1.75rem, 3vw, 2.5rem);
  line-height: 1; letter-spacing: -.02em;
}
.cijfers dd { margin: .6rem 0 0; }
@media (max-width: 62rem) {
  .frank-rij { grid-template-columns: 1fr; }
  .frank-beeld img { width: min(100%, 22rem); margin-left: 0; }
  .frank-tekst { margin-top: var(--ruimte-s); display: block; }
}
@media (max-width: 34rem) { .cijfers { grid-template-columns: repeat(2, 1fr); } }

/* --- 7 · slot + contact -------------------------------------------------- */

.slot { background: var(--diep); color: var(--creme); padding: var(--ruimte-m) 0; }
.slot-rij {
  display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
  gap: clamp(2.5rem, 7vw, 6rem); align-items: start;
}
.slot .micro { color: var(--creme-micro); }
.slot h2 { margin-top: 1.25rem; }
.slot h2 em { font-style: italic; }
.slot .lead { color: var(--creme-body); margin-top: 1.75rem; max-width: 30rem; }

.slot-contact { list-style: none; margin: 2.5rem 0 0; padding: 0; display: grid; gap: .6rem; }
.slot-contact a {
  font-family: 'Lora', Georgia, serif; font-size: 1.25rem; text-decoration: none;
  border-bottom: 1px solid rgba(242,237,227,.3); padding-bottom: 2px;
  transition: border-color .2s ease;
}
.slot-contact a:hover { border-bottom-color: var(--creme); }

.formulier { display: grid; gap: .4rem; }
.formulier-kop { margin-bottom: 1.25rem; }
.formulier label { font-size: var(--micro); text-transform: uppercase; letter-spacing: .14em; color: var(--creme-micro); margin-top: 1.1rem; }
.formulier input, .formulier textarea {
  font-family: inherit; font-size: 1rem; color: var(--creme);
  background: transparent; border: 0; border-bottom: 1px solid rgba(242,237,227,.32);
  padding: .6rem 0; border-radius: 0; transition: border-color .2s ease;
}
.formulier input::placeholder, .formulier textarea::placeholder { color: rgba(242,237,227,.45); }
.formulier input:focus, .formulier textarea:focus { border-bottom-color: var(--creme); }
/* Fout wordt nooit alleen door kleur gemeld: de lijn kleurt om én er komt tekst
   onder te staan, zodat het ook zonder kleurwaarneming leesbaar blijft. */
/* Ook tijdens focus: de rand blijft de fout melden terwijl je hem herstelt.
   Focus zelf blijft zichtbaar via de outline van :focus-visible. */
.formulier [aria-invalid="true"],
.formulier [aria-invalid="true"]:focus { border-bottom-color: var(--fout); }
.fout { font-size: .9375rem; line-height: 1.45; color: var(--fout); }
.fout:empty { display: none; }
.formulier textarea { resize: vertical; }
.formulier .pil { margin-top: 2rem; justify-self: start; }
.fijn { margin-top: 1rem; font-size: .8125rem; color: var(--creme-micro); }
.melding { margin-top: .75rem; font-size: .9375rem; color: var(--creme); min-height: 1.4em; }
@media (max-width: 62rem) { .slot-rij { grid-template-columns: 1fr; } }

/* --- voet ---------------------------------------------------------------- */

.voet { background: var(--diep); color: var(--creme); padding: var(--ruimte-s) 0; border-top: 1px solid rgba(242,237,227,.12); }
.voet-rij { display: flex; flex-wrap: wrap; gap: 2rem 3rem; align-items: center; }
.voet .woordmerk { color: var(--creme); }
.voet-gegevens { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 1.5rem; font-size: .9375rem; }
.voet-gegevens a { color: var(--creme-body); text-decoration: none; transition: color .2s ease; }
.voet-gegevens a:hover { color: var(--creme); }
.voet-kvk { margin-left: auto; color: var(--creme-micro); }
@media (max-width: 48rem) { .voet-kvk { margin-left: 0; } }

/* --- korrel (drukwerkgevoel, geen raster) -------------------------------- */

.korrel {
  position: fixed; inset: 0; width: 100%; height: 100%;
  pointer-events: none; z-index: 40; opacity: .05; mix-blend-mode: multiply;
}

/* --- rustige introductie ------------------------------------------------- */

.hero-tekst > *, .hero-figuur { animation: intro .8s cubic-bezier(.22,.61,.36,1) backwards; }
.hero-tekst > *:nth-child(2) { animation-delay: .06s; }
.hero-tekst > *:nth-child(3) { animation-delay: .12s; }
.hero-tekst > *:nth-child(4) { animation-delay: .18s; }
.hero-figuur { animation-delay: .1s; }
@keyframes intro { from { opacity: 0; transform: translateY(12px); } }
@media (prefers-reduced-motion: reduce) {
  .hero-tekst > *, .hero-figuur { animation: none; }
  .rail-voortgang { display: none; }
}