@charset "UTF-8";
/*!
Theme Name: Coaching Thema
Theme URI:
Author: Jouw naam
Author URI:
Description: Mobile-first WordPress-thema voor online coaching. Alle secties bouw je op met SCF-blocks in de blockeditor, zodat teksten en foto's altijd zelf aanpasbaar blijven.
Version: 1.0.0
Requires at least: 6.0
Requires PHP: 7.4
Text Domain: coaching-thema
*/
/**
 * Breakpoints — één plek voor alle responsive-grenzen in het thema.
 *
 * Dit thema is mobile-first: de gewone CSS is de mobiele versie, en met
 * min-width-queries bouw je omhoog naar tablet en desktop. Er zijn dus
 * bewust géén max-width-queries — schrijf de mobiele stijl gewoon
 * standaard op, en zet de uitzondering in een @include vanaf().
 *
 * Gebruik de mixin zo:
 *   .kaart {
 *       padding: 24px;                         // mobiel
 *       @include vanaf(desktop) { padding: 52px; }   // vanaf 900px
 *   }
 *
 * SCSS-variabelen (geen CSS custom properties), want @media-queries
 * kunnen niet met var() werken.
 */
/* vanaf hier 2 kolommen */
/* vanaf hier de volledige desktoplayout */
/* vanaf hier zit de container op zijn maximum */
/**
 * Fonts — twee families, elk met een vaste rol (specificatie §1).
 * De daadwerkelijke Google Fonts worden geladen via wp_enqueue_style in
 * functions.php (bewust niet via @import, dat is trager). Dit bestand
 * legt alleen de font-family-tokens vast.
 *
 * - --head (Bricolage Grotesque, 600/700/800) — uitsluitend koppen.
 * - --sans (Plus Jakarta Sans, 400/500/600/700) — al het andere:
 *   lopende tekst, labels, chips, buttons, formulieren.
 */
:root {
  --head: 'Bricolage Grotesque', sans-serif;
  --sans: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

/**
 * Design tokens — direct overgenomen uit de themaspecificatie §1.
 *
 * Dit is het enige bestand waar je waarden zou moeten aanpassen als er
 * ooit een kleur, radius of afstand verandert. Heb je later iets nodig
 * dat hier niet in staat, pak dan de dichtstbijzijnde bestaande token
 * in plaats van een nieuwe waarde te verzinnen.
 */
:root {
  /* ============================================================
     KLEUREN
     ============================================================ */
  --terra: #B0453A; /* primair accent: buttons, CTA-vlak */
  --terra-dark: #8F3630; /* hover op primair */
  --ink: #2A1714; /* koppen, donker vlak achter screenshots */
  --body: #7C554B; /* bodytekst */
  --rust: #6E3A31; /* tekst op blush chips */
  --cream: #FAF1E9; /* de paginakaart / hoofdachtergrond */
  --offwhite: #FFFDFB; /* kaarten */
  --blush: #F4DDD2; /* chips, about-vlak, secundaire vlakken */
  --blush-line: #EFDFD3; /* randen */
  --page: #E7E5DF; /* achtergrond buiten de kaart */
  --muted: #B6A99D; /* footertekst */
  --grey: #9A8D83; /* logo-ondertitel op desktop */
  /* ============================================================
     RADIUS
     ============================================================ */
  --r-card: 30px;
  --r-shell: 32px;
  --r-img: 24px;
  --r-pill: 999px;
  /* ============================================================
     SCHADUWEN
     ============================================================ */
  --sh-shell: 0 40px 90px -40px rgba(74, 33, 28, .5);
  --sh-card: 0 24px 50px -28px rgba(74, 33, 28, .4);
  --sh-phone: 0 24px 46px -18px rgba(74, 33, 28, .55);
  --sh-img: 0 16px 34px -22px rgba(74, 33, 28, .4);
  --sh-btn: 0 16px 30px -12px rgba(176, 69, 58, .6);
  /* ============================================================
     RITME — pas --pad-x aan en de hele site schuift mee
     ============================================================ */
  /* Vloeiend van 24px op een smal scherm naar 80px op een breed
     scherm. Bewust een clamp() en geen media query: zo schuift de
     zijmarge geleidelijk mee met de viewport, in plaats van op één
     punt ineens te verspringen. */
  --pad-x: clamp(24px, 5vw, 80px);
  --gap: 18px;
  /* ============================================================
     BEWEGING
     ============================================================ */
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --duration-hover: 0.18s;
  --duration-reveal: 0.6s;
}

@media (min-width: 900px) {
  :root {
    --gap: 24px;
  }
}
/**
 * Basis-reset en globale elementstijlen (specificatie §3).
 */
*, *::before, *::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  /* Crème, gelijk aan .shell: zo blijft de kleur doorlopen als je
     voorbij de onderkant van de pagina scrollt. */
  background: var(--cream);
  color: var(--body);
  font-family: var(--sans);
  font-size: 14px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

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

a {
  color: var(--terra);
  text-decoration: none;
  transition: color var(--duration-hover) var(--ease);
}

a:hover {
  color: var(--terra-dark);
}

ul, ol {
  margin: 0;
  padding: 0;
  list-style: none;
}

p {
  margin: 0;
  text-wrap: pretty;
}

/* Tekstselectie in de huisstijlkleuren */
::selection {
  background: var(--blush);
  color: var(--ink);
}

/* Zichtbare focusstijl */
:focus-visible {
  outline: 2px solid var(--terra);
  outline-offset: 3px;
}

/* Alle tikdoelen minimaal 44px (§8) */
a, button, input[type=submit], input[type=button] {
  min-height: 44px;
}

/* ...maar niet als het een link middenin een alinea is */
p a, li a {
  min-height: 0;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}
/**
 * Typografische schaal (specificatie §2).
 *
 * Anders dan in eerdere thema's zijn dit géén losse classes: elk blok
 * heeft één vaste rol voor zijn koppen, dus de maten staan bij het blok
 * zelf (scss/blocks/). Hier staat alleen wat voor álle koppen geldt,
 * plus de clamp()-basis zodat tekst vloeiend meeschaalt in plaats van
 * met harde sprongen.
 */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--head);
  color: var(--ink);
  margin: 0;
  text-wrap: pretty;
  letter-spacing: -0.01em;
}

h1 {
  font-weight: 800;
  font-size: clamp(2.75rem, 6.5vw, 3.5rem);
  line-height: 0.96;
  letter-spacing: -0.02em;
}

h2 {
  font-weight: 700;
  font-size: clamp(1.75rem, 4vw, 2.5rem);
  line-height: 1.05;
}

h3 {
  font-weight: 700;
  font-size: clamp(1.375rem, 2.6vw, 1.44rem);
  line-height: 1.05;
}

/* Klein label in hoofdletters boven een kop */
.eyebrow {
  display: inline-block;
  font: 600 11px/1 var(--sans);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--terra);
}
@media (min-width: 900px) {
  .eyebrow {
    font-size: 12px;
  }
}

/* Gekleurd pilletje met korte tekst */
.app-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--blush);
  border-radius: var(--r-pill);
  padding: 9px 16px;
  font: 600 12.5px/1.2 var(--sans);
  color: var(--rust);
}

/* Doorzichtige badge op een foto (hero) */
.badge {
  display: inline-block;
  padding: 6px 13px;
  border-radius: var(--r-pill);
  background: rgba(255, 255, 255, 0.16);
  backdrop-filter: blur(4px);
  font: 600 10.5px/1 var(--sans);
  letter-spacing: 0.08em;
  color: #fff;
  width: fit-content;
}

/**
 * Herbruikbare bouwstenen: de shell, buttons, socials en de
 * reveal-on-scroll-animatie (specificatie §3, §4.2, §5).
 */
/* ---------- De pagina-wrapper ----------
   Bewust helemaal vlak: volle breedte, volle hoogte, geen afgeronde
   hoeken en geen schaduw. De site loopt dus van rand tot rand mee met
   het scherm, op elk formaat. Er is nergens een vaste breedte, zodat
   de layout geleidelijk meeschaalt in plaats van op een breakpoint
   naar telefoonformaat te springen.

   Wil je later toch de kaartlook (de site als afgerond vlak op een
   gekleurde achtergrond), dan is dit de enige plek waar je moet zijn:
   geef .shell weer een max-width, border-radius: var(--r-shell),
   box-shadow: var(--sh-shell) en wat marge. */
.shell {
  width: 100%;
  min-height: 100dvh; /* footer blijft onderaan op korte pagina's */
  background: var(--cream);
  display: flex;
  flex-direction: column;
}

#main-content {
  flex: 1 0 auto; /* duwt de footer naar beneden */
}

/* ---------- Buttons (§4.2) ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  border-radius: var(--r-pill);
  border: 0;
  cursor: pointer;
  font: 700 14.5px/1 var(--sans);
  text-decoration: none;
  padding: 16px 26px;
  width: fit-content;
  transition: transform var(--duration-hover) var(--ease), background var(--duration-hover) var(--ease), box-shadow var(--duration-hover) var(--ease);
}
@media (min-width: 900px) {
  .btn {
    font-size: 15.5px;
    padding: 18px 30px;
  }
}

.btn:hover {
  transform: translateY(-2px);
}

.btn--primary {
  background: var(--terra);
  color: #fff;
}

.btn--primary:hover {
  background: var(--terra-dark);
  color: #fff;
}

.btn--light {
  background: #fff;
  color: var(--terra);
}

.btn--light:hover {
  background: #fff;
  color: var(--terra-dark);
}

.btn--soft {
  background: var(--blush);
  color: var(--rust);
}

.btn--soft:hover {
  background: var(--blush-line);
  color: var(--rust);
}

/* ---------- Social-iconen (§5) ---------- */
.socials {
  display: flex;
  align-items: center;
  gap: 14px;
}
.socials a {
  display: inline-flex;
  min-height: 0;
  color: inherit;
}
.socials a:hover {
  opacity: 0.75;
}

/* ---------- Reveal-on-scroll ----------
   Voeg de class .reveal toe aan een element en het komt met een fade-up
   in beeld. Let op de opzet: .reveal zelf verbergt niets. Pas als
   js/includes/reveal.js daadwerkelijk draait, zet dat script .is-armed
   erbij (dát verbergt), en daarna .is-visible zodra het element in beeld
   komt. Zo blijft de content altijd zichtbaar als de JavaScript niet
   laadt of een fout geeft — anders zou je een pagina met onzichtbare
   tekst overhouden. */
.reveal.is-armed {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity var(--duration-reveal) var(--ease), transform var(--duration-reveal) var(--ease);
}

.reveal.is-armed.is-visible {
  opacity: 1;
  transform: none;
}

/**
 * Topbar en footer.
 *
 * De topbar heeft geen navigatie en geen burgermenu: links het logo,
 * rechts de social-iconen. Dat is op elk schermformaat hetzelfde, dus er
 * is ook geen uitklapmenu meer dat kan verspringen.
 *
 * Twee varianten:
 * - .topbar--hero : over de hero-foto heen, dus witte tekst en iconen
 * - .topbar--los  : op pagina's zonder hero, dus donkere tekst
 */
/* ---------- Topbar ---------- */
.topbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 14px;
}

.brand {
  display: block;
  min-height: 0;
}

.brand__name {
  display: block;
  font: 800 12.5px/1 var(--head);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--ink);
}
@media (min-width: 900px) {
  .brand__name {
    font-size: 14px;
  }
}

.brand__sub {
  display: block;
  font: 600 8px/1.6 var(--sans);
  letter-spacing: 0.28em;
  white-space: nowrap;
  color: var(--grey);
}
@media (min-width: 900px) {
  .brand__sub {
    font-size: 9px;
  }
}

/* De social-iconen in de topbar krijgen een rond vlakje. Op de foto
   houdt dat ze leesbaar, ook als er toevallig een licht stuk achter zit,
   en het geeft meteen een tikdoel van 44px. */
.socials--topbar {
  gap: 10px;
}
.socials--topbar a {
  width: 44px;
  height: 44px;
  align-items: center;
  justify-content: center;
  border-radius: var(--r-pill);
  background: var(--blush);
  color: var(--rust);
  transition: background var(--duration-hover) var(--ease), color var(--duration-hover) var(--ease);
}
.socials--topbar a:hover {
  opacity: 1;
  background: var(--terra);
  color: #fff;
}

/* Variant op de hero-foto: doorzichtig wit vlakje met witte iconen,
   in dezelfde stijl als de badge eronder. */
.topbar--hero .brand__name {
  color: #fff;
}
.topbar--hero .brand__sub {
  color: rgba(255, 255, 255, 0.7);
}
.topbar--hero .socials--topbar a {
  background: rgba(255, 255, 255, 0.16);
  backdrop-filter: blur(4px);
  color: #fff;
}
.topbar--hero .socials--topbar a:hover {
  background: rgba(255, 255, 255, 0.3);
  color: #fff;
}
@media (min-width: 900px) {
  .topbar--hero {
    margin-bottom: 56px;
    /* Naast de foto in plaats van erop: gewone kleuren terug. */
  }
  .topbar--hero .brand__name {
    color: var(--ink);
  }
  .topbar--hero .brand__sub {
    color: var(--grey);
  }
  .topbar--hero .socials--topbar a {
    background: var(--blush);
    backdrop-filter: none;
    color: var(--rust);
  }
  .topbar--hero .socials--topbar a:hover {
    background: var(--terra);
    color: #fff;
  }
}

/* Variant zonder hero: losse balk bovenaan de pagina */
.topbar--los {
  padding: 24px var(--pad-x);
}

/* ---------- Footer ---------- */
.site-footer {
  padding-top: 8px;
}
.site-footer .socials {
  justify-content: center;
  gap: 18px;
  padding: 0 var(--pad-x) 14px;
  color: var(--muted);
}
.site-footer .socials a {
  width: 44px;
  height: 44px;
  align-items: center;
  justify-content: center;
}
.site-footer .socials a:hover {
  color: var(--terra);
  opacity: 1;
}
.site-footer__legal {
  padding: 0 var(--pad-x) 30px;
  text-align: center;
  font: 600 10px/1.9 var(--sans);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--muted);
}
@media (min-width: 900px) {
  .site-footer__legal {
    font-size: 11px;
    padding-bottom: 34px;
  }
}

/**
 * Formulierstijl (specificatie §6) — zachte vlakken, ronde hoeken,
 * geen gradients. Deze classes staan klaar voor een contactformulier of
 * vragenlijst; ze worden nog nergens automatisch toegepast.
 */
.form-card {
  background: var(--cream);
  border-radius: var(--r-card);
  box-shadow: 0 40px 90px -30px rgba(74, 33, 28, 0.6);
  padding: 24px;
}

.field, .option {
  display: block;
  width: 100%;
  background: var(--offwhite);
  border-radius: 20px;
  padding: 16px 18px;
  box-shadow: 0 0 0 1.5px var(--blush-line);
  border: 0;
  font: 400 14px/1.4 var(--sans);
  color: var(--ink);
}

.field:focus,
.option[aria-checked=true] {
  box-shadow: 0 0 0 2px var(--terra);
  outline: none;
}

.label {
  font: 600 15px/1.3 var(--sans);
  color: var(--ink);
}

.help {
  font: 400 12.5px/1.4 var(--sans);
  color: var(--body);
}

/* Velden onder elkaar met 12-14px ruimte */
.field-group {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.progress {
  height: 6px;
  border-radius: var(--r-pill);
  background: #F0DFD3;
  overflow: hidden;
}
.progress__bar {
  height: 100%;
  background: var(--terra);
  border-radius: var(--r-pill);
  transition: width 0.3s var(--ease);
}

.nav-btn {
  width: 52px;
  height: 52px;
  border-radius: var(--r-pill);
  background: var(--blush);
  color: var(--rust);
  border: 0;
  cursor: pointer;
}

/**
 * Hero (specificatie §4.1)
 *
 * Mobiel : foto vult het hele blok, donkere gradient eroverheen, topbar
 *          bovenin en tekst onderin — alles in het wit.
 * Desktop: twee kolommen. Tekst links op crème, foto rechts (order:2),
 *          gradient uit en tekst weer donker.
 *
 * De HTML staat maar één keer in hero.php; alleen de CSS verschilt.
 */
.hero {
  position: relative;
  height: 560px;
  /* Afgeronde bovenhoeken, alleen op mobiel. overflow:hidden zorgt dat
     de foto en de donkere gradient netjes binnen die ronding blijven.
     Op desktop staat de foto naast de tekst en zetten we hem weer
     vierkant (zie de desktop-regels onderaan dit bestand). */
  border-radius: 2em 2em 0 0;
  overflow: hidden;
}

.hero__media {
  position: absolute;
  inset: 0;
}
.hero__media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hero__scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(42, 23, 20, 0.35) 0%, rgba(42, 23, 20, 0.15) 38%, rgba(42, 23, 20, 0.9) 100%);
}

.hero__inner {
  position: absolute;
  inset: 0;
  padding: var(--pad-x);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.hero__copy .badge {
  margin-bottom: 16px;
}

.hero__titel {
  font-size: 44px;
  line-height: 0.96;
  color: #fff;
  margin-bottom: 14px;
}

.hero__lead {
  font: 400 14.5px/1.5 var(--sans);
  color: rgba(255, 255, 255, 0.82);
  max-width: 320px;
  margin-bottom: 22px;
}

@media (min-width: 900px) {
  .hero {
    height: auto;
    min-height: 620px;
    border-radius: 0; /* alleen op mobiel afgeronde hoeken */
    display: grid;
    grid-template-columns: 1.05fr 0.95fr;
    align-items: stretch;
  }
  .hero__inner {
    position: static;
    padding: 72px var(--pad-x);
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
  .hero__media {
    position: relative;
    order: 2; /* foto naar rechts, zonder de HTML te dupliceren */
    overflow: hidden;
  }
  .hero__scrim {
    display: none;
  }
  .hero__copy .badge {
    background: var(--blush);
    color: var(--terra);
    font-size: 11px;
    padding: 7px 15px;
    margin-bottom: 22px;
    backdrop-filter: none;
  }
  .hero__titel {
    font-size: 56px;
    line-height: 1.02;
    color: var(--ink);
    max-width: 520px;
    margin-bottom: 20px;
  }
  .hero__lead {
    font-size: 16.5px;
    line-height: 1.6;
    color: var(--body);
    max-width: 420px;
    margin-bottom: 30px;
  }
  .hero .btn--primary {
    box-shadow: var(--sh-btn);
  }
}
/**
 * Sectiekop (specificatie §4.3) — gecentreerde kop die je boven elk
 * ander blok kunt zetten.
 */
.sec-head {
  padding: 34px var(--pad-x) 6px;
  text-align: center;
}
.sec-head .eyebrow {
  margin-bottom: 10px;
}
.sec-head h2 {
  margin-bottom: 12px;
}
.sec-head .app-chip {
  margin-bottom: 14px;
}
@media (min-width: 900px) {
  .sec-head {
    padding: 64px var(--pad-x) 8px;
  }
  .sec-head h2 {
    margin-bottom: 10px;
  }
}

.sec-lead {
  font: 400 14px/1.5 var(--sans);
  color: var(--body);
  max-width: 300px;
  margin-inline: auto;
}
@media (min-width: 900px) {
  .sec-lead {
    font-size: 16px;
    max-width: 560px;
  }
}

/**
 * Pijlers (specificatie §4.4)
 * 1 kolom mobiel → 2 vanaf 640px → 3 vanaf 900px.
 */
.pillars {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--gap);
  padding: 18px var(--pad-x) 6px;
}
@media (min-width: 640px) {
  .pillars {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (min-width: 900px) {
  .pillars {
    grid-template-columns: repeat(3, 1fr);
    padding: 36px var(--pad-x) 8px;
  }
}

.pillar {
  background: var(--offwhite);
  border-radius: var(--r-card);
  padding: 26px 22px;
  text-align: center;
  box-shadow: var(--sh-card);
}
.pillar h3 {
  margin-bottom: 6px;
}
@media (min-width: 900px) {
  .pillar {
    padding: 32px 26px;
  }
}

.pillar__desc {
  font: 400 14px/1.5 var(--sans);
  color: var(--body);
  margin-bottom: 18px;
}
@media (min-width: 900px) {
  .pillar__desc {
    min-height: 42px; /* lijnt de telefoon-mockups netjes uit */
    margin-bottom: 20px;
  }
}

/* Telefoon-mockup om de screenshot heen */
.phone {
  width: 202px;
  margin: 0 auto 20px;
  padding: 7px;
  background: var(--ink);
  border-radius: var(--r-card);
  box-shadow: var(--sh-phone);
}
@media (min-width: 900px) {
  .phone {
    width: 180px;
    border-radius: 26px;
    margin-bottom: 22px;
  }
}

.phone__screen {
  border-radius: var(--r-img);
  overflow: hidden;
  background: #fff;
  min-height: 120px;
  display: flex;
  align-items: center;
}
.phone__screen img {
  width: 100%;
}
@media (min-width: 900px) {
  .phone__screen {
    border-radius: 20px;
    min-height: 110px;
  }
}

/* Kenmerken-lijstje */
.features {
  display: flex;
  flex-direction: column;
  gap: 9px;
  text-align: left;
}
.features li {
  display: flex;
  align-items: center;
  gap: 11px;
  background: var(--blush);
  border-radius: var(--r-pill);
  padding: 12px 18px;
  font: 600 13.5px/1.2 var(--sans);
  color: var(--rust);
}
@media (min-width: 900px) {
  .features {
    gap: 8px;
  }
  .features li {
    padding: 11px 16px;
    font-size: 12.5px;
  }
}

.dot {
  flex: none;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--terra);
}
@media (min-width: 900px) {
  .dot {
    width: 7px;
    height: 7px;
  }
}

/**
 * Zo werkt de app
 *
 * Mobiel : screenshot bovenaan, daaronder de tekst en de stappen.
 * Desktop: screenshot links, tekst rechts, verticaal gecentreerd.
 *
 * De telefoon-mockup (.phone) komt uit blocks/pijlers.scss — die wordt
 * hier hergebruikt, zodat beide blokken er precies hetzelfde uitzien.
 */
.app {
  margin: 24px var(--pad-x);
  padding: 26px 24px;
  background: var(--offwhite);
  border-radius: var(--r-card);
  box-shadow: var(--sh-card);
  text-align: center;
}
.app h2 {
  font-size: 26px;
  line-height: 1.05;
  margin-bottom: 10px;
}
.app .eyebrow {
  margin-bottom: 10px;
}
@media (min-width: 900px) {
  .app {
    margin: 56px var(--pad-x);
    padding: 52px;
    display: grid;
    grid-template-columns: 0.8fr 1.2fr;
    gap: 48px;
    align-items: center;
    text-align: left;
    border-radius: var(--r-shell);
  }
  .app h2 {
    font-size: 34px;
    line-height: 1.08;
    letter-spacing: -0.015em;
    margin-bottom: 12px;
  }
}

.app__visual .phone {
  margin-bottom: 22px;
}
@media (min-width: 900px) {
  .app__visual .phone {
    margin-bottom: 0;
    width: 220px;
  }
}

.app__intro {
  font: 400 14px/1.6 var(--sans);
  color: var(--body);
  margin-bottom: 20px;
}
@media (min-width: 900px) {
  .app__intro {
    font-size: 15.5px;
    margin-bottom: 24px;
  }
}

/* ---------- De genummerde stappen ---------- */
.app__stappen {
  display: flex;
  flex-direction: column;
  gap: 12px;
  text-align: left;
  counter-reset: none; /* nummering komt uit PHP, niet uit CSS */
}

.app__stap {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  background: var(--blush);
  border-radius: var(--r-card);
  padding: 16px 18px;
}

.app__nummer {
  flex: none;
  width: 28px;
  height: 28px;
  border-radius: var(--r-pill);
  background: var(--terra);
  color: #fff;
  font: 700 13px/28px var(--sans);
  text-align: center;
}

.app__stap-tekst {
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.app__stap-tekst strong {
  font: 700 14px/1.35 var(--sans);
  color: var(--ink);
}
.app__stap-tekst span {
  font: 400 13.5px/1.5 var(--sans);
  color: var(--rust);
}
@media (min-width: 900px) {
  .app__stap-tekst strong {
    font-size: 15px;
  }
  .app__stap-tekst span {
    font-size: 14px;
  }
}

/* De knop staat op mobiel gecentreerd, op desktop links onder de stappen */
.app .btn {
  margin: 20px auto 0;
}
@media (min-width: 900px) {
  .app .btn {
    margin: 24px 0 0;
  }
}

/**
 * Fotogrid (specificatie §4.5) — 2x2 op mobiel, naast elkaar op desktop.
 */
.journey {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  padding: 18px var(--pad-x) 8px;
}
@media (min-width: 900px) {
  .journey {
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    padding: 32px var(--pad-x) 8px;
  }
}

.journey__item {
  margin: 0;
  border-radius: 26px;
  overflow: hidden;
  aspect-ratio: 1/1.12;
  background: var(--blush);
  box-shadow: var(--sh-img);
}
.journey__item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
@media (min-width: 900px) {
  .journey__item {
    border-radius: var(--r-img);
  }
}

/**
 * Over mij (specificatie §4.6)
 * Mobiel : blush kaart, foto's naast elkaar bovenin, tekst eronder.
 * Desktop: twee kolommen — foto's links, tekst rechts, verticaal gecentreerd.
 */
.about {
  margin: 24px var(--pad-x);
  padding: 26px 24px;
  background: var(--blush);
  border-radius: var(--r-card);
}
.about h2 {
  font-size: 26px;
  line-height: 1.05;
  margin-bottom: 10px;
}
@media (min-width: 900px) {
  .about {
    margin: 56px var(--pad-x);
    padding: 52px;
    display: grid;
    grid-template-columns: 0.85fr 1.15fr;
    gap: 48px;
    align-items: center;
    border-radius: var(--r-shell);
  }
  .about h2 {
    font-size: 34px;
    line-height: 1.08;
    letter-spacing: -0.015em;
    margin-bottom: 12px;
  }
}

.about__photos {
  display: flex;
  gap: 11px;
  margin-bottom: 20px;
}
.about__photos figure {
  flex: 1;
  margin: 0;
  border-radius: 22px;
  overflow: hidden;
  aspect-ratio: 3/4;
}
.about__photos img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
@media (min-width: 900px) {
  .about__photos {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
    margin: 0;
  }
}

.about__intro {
  font: 500 14.5px/1.55 var(--sans);
  color: var(--rust);
  margin-bottom: 14px;
}
@media (min-width: 900px) {
  .about__intro {
    font-size: 15.5px;
    margin-bottom: 16px;
  }
}

.about__body p {
  font: 400 13.5px/1.6 var(--sans);
  color: var(--body);
  margin-bottom: 12px;
}
@media (min-width: 900px) {
  .about__body p {
    font-size: 14px;
  }
}

.about__body p:last-child {
  margin-bottom: 0;
}

/**
 * Oproep / CTA (specificatie §4.7) — het terracotta vlak met één knop.
 */
.cta {
  margin: 6px var(--pad-x) 24px;
  padding: 38px 28px;
  background: var(--terra);
  border-radius: var(--r-shell);
  text-align: center;
}
.cta h2 {
  font-size: 29px;
  line-height: 1.06;
  color: #fff;
  margin-bottom: 20px;
}
.cta .btn {
  margin-inline: auto;
}
@media (min-width: 900px) {
  .cta {
    margin: 8px var(--pad-x) 56px;
    padding: 56px;
  }
  .cta h2 {
    font-size: 38px;
    line-height: 1.1;
    letter-spacing: -0.015em;
    max-width: 640px;
    margin: 0 auto 26px;
  }
}

.cta__spark {
  display: block;
  font-size: 26px;
  margin-bottom: 10px;
}
@media (min-width: 900px) {
  .cta__spark {
    font-size: 30px;
    margin-bottom: 14px;
  }
}