/* Train with Gian: de website. Een zelfstandig ontwerp: bijna zwart, veel zwart-witfoto's, gewone koppen in normaal
 * gewicht en afgeronde kaarten. Paars is alleen een klein accent (links, vinkjes, focus), nooit een vlak of een balk.
 * Van de app komen alleen de kleurrichting, het logo en de lettertypes (koppen in Archivo op normale breedte, geen hoofdletters). */

@font-face { font-family:Archivo; src:url('/assets/fonts/archivo.woff2') format('woff2'); font-weight:400 800; font-stretch:62% 125%; font-style:normal; font-display:swap; }
@font-face { font-family:Inter; src:url('/assets/fonts/inter.woff2') format('woff2'); font-weight:100 900; font-style:normal; font-display:swap; }

:root {
  --bg:#0e0f16; --card:#1b1c28; --card2:#262735; --tile:#0e0f16;
  --line:rgba(233,233,240,.11);
  --ink:#f3f3f6; --body:#b8bac9; --muted:#9093a6;
  --accent:#9c8fe6; --accent-hi:#b0a5f0; --lilac:#c3bbf7;
  --aqua:#72d3df; --coral:#f29a86;
  --ease:cubic-bezier(.32,.72,0,1);

  --pad:clamp(20px, 4.4vw, 48px);
  --gap:clamp(64px, 8.5vw, 120px);
  --r-l:24px; --r-m:16px; --r-s:10px;
}

*, *::before, *::after { box-sizing:border-box; }
html { -webkit-text-size-adjust:100%; }
body { margin:0; background:var(--bg); color:var(--body); font:400 16px/1.55 Inter,system-ui,sans-serif; -webkit-font-smoothing:antialiased; overflow-x:clip; }
body[data-menu-open] { overflow:hidden; }
h1, h2, h3, p, ul, ol, dl, dd, figure, blockquote { margin:0; padding:0; font-weight:inherit; font-size:inherit; }
ul, ol { list-style:none; }
img, svg { display:block; }
/* Lijn-iconen: een <use> erft de stijl van zijn eigen <svg>. Het logo zet deze waarden zelf. */
svg:not([fill]) { fill:none; stroke:currentColor; stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round; }
a { color:inherit; text-decoration:none; }
button, input, textarea, select { font:inherit; color:inherit; }
button { background:none; border:0; padding:0; cursor:pointer; }
:focus-visible { outline:2px solid var(--accent-hi); outline-offset:3px; }
.wrap { width:100%; max-width:1240px; margin-inline:auto; padding-inline:var(--pad); }
.sec { padding-block:var(--gap); }
.sec-tight { padding-bottom:var(--gap); }
.skip { position:fixed; left:var(--pad); top:-80px; z-index:90; padding:10px 14px; background:var(--card); color:var(--ink); border-radius:var(--r-s); }
.skip:focus { top:10px; }

/* ---- Type. */
.h1, .h2, .h3, .reveal, .big-word, .price-num { font-family:Archivo,system-ui,sans-serif; font-weight:400; font-stretch:100%; color:var(--ink); }
.h1 { font-size:clamp(42px, 5.4vw, 76px); line-height:1.03; letter-spacing:-.04em; text-wrap:balance; }
.h1-sm { font-size:clamp(40px, 4.6vw, 64px); }
.h2 { font-size:clamp(34px, 3.9vw, 54px); line-height:1.06; letter-spacing:-.035em; text-wrap:balance; }
.h3 { font-size:21px; line-height:1.2; letter-spacing:-.02em; }
.h3-lg { font-size:clamp(23px, 2vw, 28px); }
.h3-xl { font-size:clamp(28px, 2.6vw, 38px); letter-spacing:-.03em; }
.lead { font-size:clamp(17px, 1.4vw, 20px); line-height:1.45; color:var(--body); text-wrap:pretty; max-width:36em; }
.eyebrow { font-size:15px; color:var(--muted); margin-bottom:8px; }
.small { font-size:13.5px; line-height:1.5; color:var(--muted); }
.todo { color:var(--coral); }
.nowrap { white-space:nowrap; }
.inline-link { color:var(--lilac); text-decoration:underline; text-underline-offset:3px; }
.text-link { display:inline-flex; align-items:center; gap:8px; color:var(--lilac); }
.text-link svg { width:18px; height:18px; transition:transform .4s var(--ease); }
.text-link:hover svg { transform:translateX(4px); }

/* ---- Foto's: de foto vult altijd zijn kader, dus het kader bepaalt de maat. */
.shot { position:relative; overflow:hidden; background:var(--bg); }
.shot img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; filter:url(#mono); }
.shot.at-high img { object-position:50% 22%; }
.shot.at-low img { object-position:50% 72%; }
.shot.at-top img { object-position:50% 12%; }
.shot.at-bottom img { object-position:50% 100%; }
.fpo { position:absolute; z-index:1; right:12px; top:12px; padding:5px 9px; border-radius:7px; background:rgba(14,15,22,.72); color:var(--coral); font-size:11px; letter-spacing:.02em; }

/* ---- Knoppen: licht vlak met label, donker tegeltje met pijl rechts. */
.tile { flex:none; width:40px; height:40px; display:grid; place-items:center; border-radius:var(--r-s); background:var(--tile); color:var(--ink); }
.tile svg { width:20px; height:20px; transition:transform .4s var(--ease); }
.btn { display:inline-flex; align-items:center; justify-content:space-between; gap:18px; min-height:52px; padding:6px 6px 6px 18px; border-radius:14px; background:var(--ink); color:var(--bg); font-weight:500; transition:background .3s ease; }
.btn:hover { background:#fff; }
.btn:hover .tile svg, .card:hover .tile svg, .hero-card:hover .tile svg { transform:translateX(3px); }
.btn-ghost { background:var(--card); color:var(--ink); }
.btn-ghost:hover { background:var(--card2); }
.btn-full { width:100%; }

/* ---- Menu: een zwevende pil. */
.nav { position:fixed; inset:14px 0 auto 0; z-index:60; pointer-events:none; }
.nav-row { display:flex; }
.nav-pill { pointer-events:auto; display:flex; align-items:center; gap:clamp(10px, 1.6vw, 22px); min-height:52px; padding:6px 8px 6px 18px; border-radius:18px; background:rgba(14,15,22,.74); backdrop-filter:blur(18px); -webkit-backdrop-filter:blur(18px); box-shadow:inset 0 0 0 1px var(--line); }
.logo { display:flex; align-items:center; gap:12px; color:var(--ink); }
/* De naam precies zoals op het startscherm van de app: Inter, dun, hoofdletters met veel ruimte ertussen. */
.logo-name { font-family:Inter,system-ui,sans-serif; font-size:12px; font-weight:300; letter-spacing:.46em; margin-right:-.46em; text-transform:uppercase; white-space:nowrap; }
@media (max-width:374px) { .logo-name { font-size:11px; letter-spacing:.22em; margin-right:-.22em; } }
.nav-links { display:none; gap:clamp(12px, 1.5vw, 20px); padding-left:clamp(10px, 1.4vw, 20px); box-shadow:inset 1px 0 0 var(--line); }
.nav-links a, .lang a { font-size:14.5px; color:var(--body); transition:color .2s ease; }
.nav-links a:hover, .lang a:hover, .nav-links a[aria-current], .lang a[aria-current] { color:var(--ink); }
.nav-links a[aria-current] { text-decoration:underline; text-decoration-color:var(--accent); text-underline-offset:6px; text-decoration-thickness:2px; }
.lang { display:none; gap:8px; padding-left:clamp(10px, 1.4vw, 20px); box-shadow:inset 1px 0 0 var(--line); }
.lang a:not([aria-current]) { color:var(--muted); }
.nav-contact { display:none; align-items:center; min-height:38px; padding:0 14px; border-radius:11px; background:var(--ink); color:var(--bg); font-size:14.5px; font-weight:500; transition:background .3s ease; }
.nav-contact:hover { background:#fff; }
.nav-toggle { width:38px; height:38px; display:grid; place-items:center; color:var(--ink); }
.nav-toggle svg { grid-area:1 / 1; width:22px; height:22px; }
.nav-toggle .when-open { display:none; }
.nav-toggle[aria-expanded=true] .when-open { display:block; }
.nav-toggle[aria-expanded=true] .when-closed { display:none; }
.menu { pointer-events:auto; position:fixed; inset:0; z-index:-1; padding:92px var(--pad) 28px; background:var(--bg); display:grid; align-content:start; overflow-y:auto; animation:fade .25s ease backwards; }
.menu[hidden] { display:none; }
.menu > a { padding:13px 0; border-bottom:1px solid var(--line); font-family:Archivo,system-ui,sans-serif; font-size:32px; letter-spacing:-.03em; color:var(--ink); }
.menu > a[aria-current] { color:var(--lilac); }
.menu-lang { display:flex; gap:20px; padding-top:22px; }
.menu-lang a { color:var(--muted); }
.menu-lang a[aria-current] { color:var(--ink); }
@media (min-width:980px) {
  .nav-links, .lang { display:flex; align-items:center; min-height:30px; }
  .nav-contact { display:flex; }
  .nav-toggle, .menu { display:none !important; }
}
@keyframes fade { from { opacity:0; } to { opacity:1; } }

/* ---- Opening: de foto vult het scherm, tekst links onder, kaart rechts onder. */
.hero { position:relative; min-height:max(600px, 100svh); display:flex; align-items:flex-end; isolation:isolate; overflow:clip; }
.hero-media { position:absolute; inset:0; z-index:-1; background:var(--bg); }
.hero-media img { object-position:80% 15%; animation:settle 1.8s var(--ease) backwards; }
.hero-media::after { content:''; position:absolute; inset:0; background:linear-gradient(180deg, rgba(14,15,22,.25) 0%, rgba(14,15,22,0) 26%, rgba(14,15,22,.1) 52%, rgba(14,15,22,.82) 84%, var(--bg) 100%); }
.hero-media .fpo { top:80px; }
@keyframes settle { from { transform:scale(1.06); } to { transform:none; } }
.hero-inner { display:grid; gap:24px; padding-bottom:clamp(24px, 3.4vw, 44px); }
.hero-left { display:grid; gap:14px; }
.hero-sub { font-size:clamp(17px, 1.5vw, 21px); line-height:1.4; color:var(--ink); max-width:30em; text-wrap:pretty; }
.hero-card { display:grid; gap:18px; padding:16px; border-radius:18px; background:rgba(14,15,22,.62); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px); box-shadow:inset 0 0 0 1px var(--line); color:var(--ink); transition:background .3s ease; }
.hero-card:hover { background:rgba(14,15,22,.82); }
.hero-card .tile { background:var(--ink); color:var(--bg); }
.ic { width:24px; height:24px; flex:none; }
.hero-card-row { display:flex; align-items:flex-end; justify-content:space-between; gap:16px; }
.hero-card-sub { display:block; font-size:14px; color:var(--body); }
.hero-card-title { display:block; font-family:Archivo,system-ui,sans-serif; font-size:21px; letter-spacing:-.02em; }
@media (min-width:860px) {
  .hero-inner { grid-template-columns:minmax(0, 1fr) 320px; align-items:end; column-gap:48px; }
}

/* ---- Intro: tekst die woord voor woord oplicht tijdens het scrollen, met een foto ernaast. */
.intro { display:grid; gap:32px; }
.intro-text { display:grid; gap:22px; justify-items:start; align-content:center; }
.intro-text .eyebrow { margin:0; }
.intro-photo { aspect-ratio:4/5; border-radius:var(--r-l); }
.reveal { font-size:clamp(28px, 3.5vw, 48px); line-height:1.14; letter-spacing:-.035em; text-wrap:pretty; }
.js .reveal .w { color:rgba(243,243,246,.2); transition:color .35s ease; }
.js .reveal .w.on { color:var(--ink); }
@media (min-width:860px) {
  .intro { grid-template-columns:minmax(0, 7fr) minmax(0, 4fr); column-gap:clamp(40px, 6vw, 88px); }
}

/* ---- Tweekoloms: links titel en knop, rechts de inhoud. */
.split { display:grid; gap:36px; }
.side { display:grid; gap:14px; align-content:start; justify-items:start; }
.side .eyebrow { margin:0; }
.side-text { color:var(--body); max-width:30em; text-wrap:pretty; }
.side .btn { margin-top:8px; }
.side-photo { display:none; }
@media (min-width:980px) {
  .split { grid-template-columns:minmax(0, 5fr) minmax(0, 7fr); column-gap:clamp(48px, 6vw, 88px); align-items:start; }
  .side { position:sticky; top:96px; }
  .side-photo { display:block; width:100%; aspect-ratio:5/4.4; margin-top:14px; border-radius:var(--r-l); }
}

/* ---- Kaarten. */
.card { position:relative; display:flex; flex-direction:column; justify-content:space-between; gap:34px; min-height:190px; padding:22px; border-radius:var(--r-l); background:var(--card); color:var(--ink); transition:background .3s ease; }
a.card:hover { background:var(--card2); }
.card-foot { display:grid; gap:6px; }
.card-foot > p { font-size:15px; line-height:1.45; color:var(--body); text-wrap:pretty; }
.card-foot > p.todo { color:var(--coral); }
.big-word { font-size:clamp(56px, 5.8vw, 84px); line-height:.98; letter-spacing:-.05em; white-space:nowrap; }
.bento { display:grid; gap:14px; }
.card-wide { min-height:150px; gap:22px; }
/* Kaart met de foto als achtergrond. */
.card-shot { overflow:hidden; isolation:isolate; justify-content:flex-end; gap:14px; min-height:clamp(380px, 42vw, 520px); background:var(--bg); box-shadow:inset 0 0 0 1px var(--line); }
a.card-shot:hover { background:var(--bg); }
.card-bg { position:absolute; inset:0; z-index:-1; transition:transform .8s var(--ease); }
a.card-shot:hover .card-bg { transform:scale(1.03); }
.card-bg::after { content:''; position:absolute; inset:0; background:linear-gradient(180deg, rgba(14,15,22,0) 42%, rgba(14,15,22,.9) 92%); }
.card-shot .card-foot > p { color:var(--ink); }
/* Kaart met de foto bovenaan. */
.card-media { padding:14px; gap:16px; justify-content:flex-start; }
.card-top { flex:none; width:100%; aspect-ratio:4/3; border-radius:var(--r-m); }
.card-top .fpo { right:auto; left:12px; }
.card-media .card-foot { padding:2px 8px 8px; }
.card-media.card-link > .tile { right:26px; top:26px; }
@media (min-width:600px) {
  .bento { grid-template-columns:1fr 1fr; }
  .card-tall { grid-row:span 2; }
  .card-wide { grid-column:1 / -1; }
}
.ic-tile { width:42px; height:42px; display:grid; place-items:center; border-radius:12px; background:var(--tile); color:var(--ink); }
.ic-tile svg { width:22px; height:22px; }
.grid-3, .grid-2 { display:grid; gap:14px; }
@media (min-width:760px) { .grid-3 { grid-template-columns:repeat(3, 1fr); } .grid-2 { grid-template-columns:repeat(2, 1fr); gap:20px; } }
.card-link { min-height:230px; }
.card-link > .tile, .card-route > .tile { position:absolute; right:14px; top:14px; }
.card-info { min-height:230px; }
.center-head { display:grid; justify-items:center; text-align:center; margin-bottom:clamp(28px, 4vw, 48px); }

/* ---- Band over de hele breedte: foto met een persoonlijke zin. */
.band { position:relative; isolation:isolate; min-height:clamp(440px, 52vw, 680px); display:flex; align-items:flex-end; overflow:clip; }
.band-media { position:absolute; inset:0; z-index:-1; }
.band-media::after { content:''; position:absolute; inset:0; background:linear-gradient(180deg, var(--bg) 0%, rgba(14,15,22,.2) 22%, rgba(14,15,22,.3) 52%, rgba(14,15,22,.86) 86%, var(--bg) 100%); }
.band-media .fpo { top:32px; right:var(--pad); }
.band-copy { display:grid; gap:16px; padding-bottom:clamp(20px, 3vw, 40px); }
.band-copy .h2 { max-width:21em; }
.band-name { color:var(--ink); font-size:15px; }

/* ---- Stappen. */
.steps { display:grid; gap:clamp(30px, 3.6vw, 48px); }
.steps li { display:grid; gap:6px; }
.step-num { color:var(--muted); font-size:15px; }
.steps li > p:last-child { max-width:34em; text-wrap:pretty; }

/* ---- Vragen. */
.faq-list { display:grid; }
details { border-bottom:1px solid var(--line); }
summary { display:flex; align-items:center; justify-content:space-between; gap:20px; min-height:60px; padding:12px 0; cursor:pointer; list-style:none; color:var(--ink); }
summary::-webkit-details-marker { display:none; }
summary svg { flex:none; width:20px; height:20px; transition:transform .4s var(--ease); }
details[open] summary svg { transform:rotate(45deg); }
details > p { padding:0 40px 20px 0; max-width:38em; text-wrap:pretty; animation:rise .3s ease backwards; }

/* ---- App: één kaart. */
.app-card { display:grid; gap:24px; padding:clamp(24px, 4vw, 48px) clamp(24px, 4vw, 48px) 0; border-radius:var(--r-l); background:var(--card); overflow:hidden; }
.app-copy { display:grid; gap:14px; align-content:center; padding-bottom:4px; }
.soon { display:flex; align-items:center; gap:9px; color:var(--aqua); font-size:15px; }
.soon i { width:7px; height:7px; border-radius:50%; background:var(--aqua); }
.app-phone { justify-self:center; width:min(70vw, 280px); height:clamp(240px, 26vw, 330px); overflow:hidden; }
.app-phone img { width:100%; height:auto; border-radius:26px 26px 0 0; box-shadow:0 0 0 1px var(--line); }
@media (min-width:760px) { .app-card { grid-template-columns:minmax(0, 1fr) auto; column-gap:48px; } .app-copy { padding-bottom:clamp(24px, 4vw, 48px); max-width:30em; } }
/* Online coaching: dezelfde kaart, met een lijstje en een knop; de telefoon staat onderaan. */
#online { scroll-margin-top:96px; }
.online-card .eyebrow { margin:0; }
.online-card .checks { margin-block:4px 8px; }
.online-card .btn { justify-self:start; }
.online-card .app-phone { align-self:end; height:clamp(280px, 34vw, 430px); }

/* ---- Oproep onderaan elke pagina: een foto, geen gekleurd vlak. */
.cta-card { position:relative; isolation:isolate; overflow:hidden; display:grid; gap:24px; align-content:end; min-height:clamp(400px, 40vw, 520px); padding:clamp(24px, 4vw, 48px); border-radius:var(--r-l); background:var(--card); color:var(--ink); }
.cta-media { position:absolute; inset:0; z-index:-1; }
.cta-media::after { content:''; position:absolute; inset:0; background:linear-gradient(180deg, rgba(14,15,22,.18) 0%, rgba(14,15,22,.42) 42%, rgba(14,15,22,.92) 100%); }
.cta-card .eyebrow { color:var(--ink); }
.cta-card-text { margin-top:12px; max-width:30em; color:var(--ink); text-wrap:pretty; }
.cta-card .btn { justify-self:start; }
@media (min-width:860px) { .cta-card { grid-template-columns:minmax(0, 1fr) auto; align-items:end; column-gap:48px; } }

/* ---- Koppen van binnenpagina's. */
.page-head { display:grid; gap:14px; padding-top:clamp(110px, 12vw, 164px); padding-bottom:clamp(36px, 5vw, 64px); justify-items:start; }
.page-head .eyebrow { margin:0; }
.page-head-center { justify-items:center; text-align:center; }
.page-photo { aspect-ratio:4/3; border-radius:var(--r-l); }
@media (min-width:760px) { .page-photo { aspect-ratio:21/9; } }

/* ---- Foto en tekst om en om. */
.rows { display:grid; gap:clamp(32px, 5vw, 72px); }
.row { display:grid; gap:20px; }
.row-media { aspect-ratio:4/3; border-radius:var(--r-l); }
.row-text { display:grid; gap:14px; align-content:center; justify-items:start; }
.row-text > p { max-width:32em; text-wrap:pretty; }
.row-text .eyebrow { margin:0; }
.checks { display:grid; gap:8px; }
.checks li { display:flex; gap:10px; align-items:flex-start; color:var(--ink); font-size:15px; text-wrap:pretty; }
.checks svg { flex:none; width:20px; height:20px; color:var(--lilac); }
@media (min-width:860px) {
  .row { grid-template-columns:1fr 1fr; column-gap:clamp(40px, 6vw, 88px); }
  .row-media { aspect-ratio:5/4; }
  .row:nth-child(even) .row-media { order:2; }
}
.row .row-media-tall { aspect-ratio:4/5; }

/* ---- Kosten. */
.price { display:flex; flex-direction:column; gap:14px; padding:14px; border-radius:var(--r-l); background:var(--card); color:var(--ink); }
.price-photo { flex:none; aspect-ratio:16/10; border-radius:var(--r-m); }
.price-body { flex:1; display:flex; flex-direction:column; align-items:flex-start; gap:12px; padding:6px 8px 8px; }
.price .btn { margin-top:auto; width:100%; }
.price .btn-ghost { background:var(--card2); }
.price .btn-ghost:hover { background:#31324a; }
.price-line { display:flex; flex-wrap:wrap; align-items:baseline; gap:4px 8px; }
.price-num { font-size:clamp(32px, 3vw, 40px); letter-spacing:-.03em; }
.price-per { font-size:14px; color:var(--body); }
/* Prijs met eventueel een regel eronder; even hoog op elke kaart, zodat de lijstjes gelijk beginnen. */
.price-top { display:grid; gap:6px; }
.price-note { font-size:14px; line-height:1.4; color:var(--lilac); text-wrap:pretty; }
@media (min-width:760px) { .prices { grid-template-columns:repeat(3, minmax(0, 1fr)); } .price-top { min-height:8.6em; align-content:start; } }
@media (min-width:1000px) { .price-top { min-height:7em; } }
.price-text { font-size:15px; line-height:1.45; color:var(--body); min-height:2.9em; }
/* Online coaching: een brede kaart onder de drie vormen, zonder foto. */
.price-wide .price-label { margin-top:0; }
@media (min-width:760px) {
  .price-wide { grid-column:1 / -1; display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); column-gap:clamp(24px, 4vw, 56px); }
  .price-wide .price-body { padding:clamp(10px, 1.6vw, 22px); }
}
.price-label { margin-top:10px; font-size:14px; color:var(--muted); }
.price .checks { margin-bottom:18px; }
.facts > div { display:flex; justify-content:space-between; gap:20px; padding:16px 0; border-bottom:1px solid var(--line); }
.facts dt { flex:none; max-width:42%; color:var(--ink); }
.facts dd { text-align:right; text-wrap:pretty; }
.facts-small { width:100%; }
.facts-small > div { padding:11px 0; font-size:15px; }
.facts-small > div:first-child { border-top:1px solid var(--line); }

/* ---- Locaties. */
.place { display:grid; gap:18px; padding:14px; border-radius:var(--r-l); background:var(--card); }
.place-media { aspect-ratio:4/3; border-radius:var(--r-m); }
.place-text { display:grid; gap:12px; justify-items:start; align-content:center; padding:4px 8px 10px; }
.place .facts-small { margin-block:6px; }
.place-actions { display:flex; flex-wrap:wrap; gap:10px; margin-top:6px; }
.place-more { margin-top:20px; }
@media (min-width:860px) {
  .place { grid-template-columns:minmax(0, 7fr) minmax(0, 5fr); column-gap:clamp(24px, 4vw, 56px); }
  .place-media { aspect-ratio:auto; min-height:clamp(420px, 42vw, 560px); }
  .place-text { padding:clamp(16px, 2vw, 28px) clamp(8px, 1.5vw, 20px); }
}

/* ---- Over mij. */
.about { display:grid; gap:32px; justify-items:stretch; }
.about-photo { aspect-ratio:4/5; border-radius:var(--r-l); }
.about-text { display:grid; gap:14px; justify-items:start; align-content:start; }
.about-text .eyebrow { margin:0; }
.about-text > p { max-width:34em; text-wrap:pretty; }
.about-text .facts { margin-top:10px; max-width:34em; }
@media (min-width:860px) { .about { grid-template-columns:5fr 6fr; column-gap:clamp(48px, 6vw, 88px); } }

/* ---- Contact. */
.contact-grid { display:grid; gap:20px; }
.routes { display:grid; gap:14px; align-content:start; }
.card-route { min-height:160px; }
.contact-photo { display:none; min-height:240px; border-radius:var(--r-l); }
.contact-photo img { object-position:50% 4%; }
.form { display:grid; gap:18px; align-content:start; padding:clamp(20px, 3vw, 32px); border-radius:var(--r-l); background:var(--card); }
.field { display:grid; gap:7px; }
.field > span { font-size:14px; color:var(--ink); }
.field input, .field textarea, .field select { width:100%; padding:12px 14px; background:var(--bg); border:1px solid var(--line); border-radius:12px; color:var(--ink); font-size:16px; transition:border-color .2s ease; }
.field input::placeholder, .field textarea::placeholder { color:var(--muted); }
.field input:focus, .field textarea:focus, .field select:focus { outline:0; border-color:var(--accent-hi); }
.field textarea { resize:vertical; }
.note { display:grid; gap:6px; padding:14px 16px; border-radius:12px; background:var(--bg); }
.note[hidden] { display:none; }
/* Formulier: lege verplichte velden, de melding, de bedankt-tekst en het veld voor robots. */
.field [aria-invalid="true"] { border-color:var(--coral); }
.form-status { color:var(--ink); border:1px solid var(--coral); }
.form-done { border:1px solid var(--accent-hi); }
.form-done:focus { outline:0; }
.form .btn:disabled { opacity:.6; cursor:progress; }
.cf-turnstile { min-height:65px; }
.hp { position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }
@media (min-width:860px) {
  .contact-grid { grid-template-columns:5fr 6fr; column-gap:20px; }
  .routes { align-content:stretch; grid-template-rows:auto auto minmax(240px, 1fr); }
  .contact-photo { display:block; }
}

/* ---- Lange tekst. */
.prose { display:grid; gap:12px; max-width:44em; }
.prose h2 { margin-top:26px; font-family:Archivo,system-ui,sans-serif; font-size:clamp(23px, 2vw, 28px); line-height:1.2; letter-spacing:-.025em; color:var(--ink); }
.prose ul { display:grid; gap:6px; padding-left:20px; list-style:disc; }
.prose li::marker { color:var(--accent); }
.prose .note { background:var(--card); }

/* ---- Voet: één grote kaart. */
.foot { padding-bottom:var(--pad); }
.foot-card { display:flex; flex-direction:column; justify-content:space-between; gap:clamp(56px, 8vw, 120px); padding:clamp(24px, 3.6vw, 44px); border-radius:var(--r-l); background:var(--card); }
.foot-top { display:grid; gap:26px; }
.foot-side { display:grid; gap:16px; }
.foot-links { display:flex; flex-wrap:wrap; gap:8px 20px; color:var(--ink); }
.foot-links a:hover, .foot-end a:hover { color:var(--lilac); }
.foot-social { display:flex; align-items:center; gap:8px; color:var(--ink); }
.foot-social:hover { color:var(--lilac); }
.foot-social svg { width:20px; height:20px; }
.foot-bottom { display:grid; gap:10px; font-size:13.5px; color:var(--muted); }
.foot-end { display:flex; flex-wrap:wrap; gap:6px 20px; }
.foot-end a { color:var(--ink); }
@media (min-width:860px) {
  .foot-top { grid-template-columns:auto 1fr; justify-items:end; }
  .foot-side { justify-items:end; }
  .foot-bottom { grid-template-columns:1fr auto; }
}

/* ---- Beweging. */
@keyframes rise { from { opacity:0; transform:translateY(12px); } to { opacity:1; transform:none; } }
.js .rise { opacity:0; transform:translateY(14px); transition:opacity .6s ease, transform .7s var(--ease), background .3s ease; }
.js .rise.in { opacity:1; transform:none; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration:1ms !important; animation-delay:0ms !important; transition-duration:1ms !important; }
  .js .rise { opacity:1; transform:none; }
  .js .reveal .w { color:var(--ink); }
}