/* yardista.eu
 *
 * Kleuren, letters en maten komen uit de merkhandoff van 15/09/2026
 * (docs/design/merk-yardista.md in de Yardista-repo). Eén afwijking, bewust:
 * de oranje knoppen dragen nachtblauwe tekst in plaats van witte, want wit op
 * #E88625 haalt 2,6:1 en de norm voor tekst is 4,5:1.
 */

@font-face {
  font-family: "Manrope";
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url("fonts/manrope-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329,
    U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Manrope";
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url("fonts/manrope-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329,
    U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "JetBrains Mono";
  font-style: normal;
  font-weight: 100 800;
  font-display: swap;
  src: url("fonts/jetbrainsmono-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329,
    U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "JetBrains Mono";
  font-style: normal;
  font-weight: 100 800;
  font-display: swap;
  src: url("fonts/jetbrainsmono-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329,
    U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  --navy: #02263D;
  --oranje: #E88625;
  --blauw: #016BAE;
  --zand: #EDEEEA;
  --wit: #FFFFFF;
  --vlak: #F7F7F5;
  --rand: #DCE0E4;
  --tekst: #1F2937;
  --tekst-zacht: #374151;
  --tekst-gedempt: #4B5563;
  --op-navy: #8FA6B8;
  --lijn-navy: #1E4260;
  --perzik: #FBEBDA;
  --oranje-donker: #9A4F0A;
  --mono: "JetBrains Mono", ui-monospace, monospace;
  --sans: Manrope, system-ui, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 72px; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0;
  background: var(--navy);
  color: var(--tekst);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { color: var(--blauw); }
h1, h2, h3, p, ul { margin: 0; }
input, textarea, button { font: inherit; }
:focus-visible { outline: 3px solid var(--oranje); outline-offset: 2px; }

.wrap { max-width: 1240px; margin: 0 auto; padding-left: 32px; padding-right: 32px; }
.eyebrow { font-family: var(--mono); font-size: 11px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: #6B7280; }
.h2 { font-size: clamp(30px, 3.1vw, 44px); line-height: 1.1; font-weight: 800; letter-spacing: -0.022em; color: var(--navy); }
.overslaan { position: absolute; left: 16px; top: -60px; z-index: 50; padding: 10px 16px; background: var(--oranje); color: var(--navy); font-weight: 700; border-radius: 3px; }
.overslaan:focus { top: 12px; }

/* Knoppen */
.knop { display: inline-flex; align-items: center; justify-content: center; height: 52px; padding: 0 26px; border-radius: 3px; font-size: 15px; font-weight: 700; text-decoration: none; white-space: nowrap; border: 0; cursor: pointer; }
.knop-oranje { background: var(--oranje); color: var(--navy); }
.knop-oranje:hover { background: #F09A45; color: var(--navy); }
.knop-lijn { border: 1px solid var(--op-navy); color: var(--wit); background: transparent; }
.knop-lijn:hover { border-color: var(--wit); color: var(--wit); }
.knop-klein { height: 40px; padding: 0 16px; font-size: 13px; }

/* Logo */
.logo { display: flex; align-items: center; gap: 9px; text-decoration: none; }
.logo-woord { font-weight: 800; letter-spacing: -0.005em; line-height: 1; }

/* Kop */
.kop { position: sticky; top: 0; z-index: 30; background: var(--navy); border-bottom: 1px solid var(--lijn-navy); }
.kop-rij { display: flex; align-items: center; gap: 32px; padding-top: 12px; padding-bottom: 12px; }
.kop .logo-woord { font-size: 18px; color: var(--wit); }
.kop-nav { display: flex; gap: 28px; font-size: 14px; font-weight: 600; }
.kop-nav a { color: var(--wit); text-decoration: none; }
.kop-nav a:hover { text-decoration: underline; text-underline-offset: 4px; }
.kop-acties { margin-left: auto; display: flex; align-items: center; gap: 16px; }
.talen { display: flex; gap: 2px; }
.talen a { display: inline-flex; align-items: center; justify-content: center; min-width: 34px; height: 34px; border-radius: 3px; font-family: var(--mono); font-size: 11px; font-weight: 600; letter-spacing: 0.08em; color: var(--op-navy); text-decoration: none; }
.talen a:hover { color: var(--wit); }
.talen a[aria-current="true"] { background: var(--wit); color: var(--navy); }
.menuknop { display: none; width: 44px; height: 44px; border: 1px solid var(--lijn-navy); border-radius: 3px; background: transparent; align-items: center; justify-content: center; cursor: pointer; }
.menuknop .dicht { display: none; }
.menuknop[aria-expanded="true"] .open { display: none; }
.menuknop[aria-expanded="true"] .dicht { display: block; }
.menu { display: none; border-top: 1px solid var(--lijn-navy); }
.menu.is-open { display: block; }
.menu nav { display: flex; flex-direction: column; padding-top: 8px; padding-bottom: 20px; font-size: 16px; font-weight: 600; }
.menu nav > a { display: flex; align-items: center; min-height: 48px; border-bottom: 1px solid var(--lijn-navy); color: var(--wit); text-decoration: none; }
.menu-onder { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-top: 18px; flex-wrap: wrap; }
.menu .talen a { min-width: 44px; height: 44px; font-size: 12px; }

/* Hero */
/* Titel en ondertitel elk op twee regels op een pc; daarom het bredere tekstvak.
   De hoogte volgt de inhoud, met onderaan ruimte voor de schuine snede. */
.hero { position: relative; padding-top: 88px; padding-bottom: 210px; background: var(--perzik); }
.hero-oranje { position: absolute; inset: 0; background: var(--oranje); clip-path: polygon(0 0, 100% 0, 100% calc(100% - 150px), 0 100%); }
.hero-navy { position: absolute; inset: 0; background: var(--navy); clip-path: polygon(0 0, 100% 0, 100% calc(100% - 158px), 0 calc(100% - 26px)); }
.hero-navy img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 40%; }
.hero-navy::after { content: ""; position: absolute; inset: 0; background: rgba(2, 38, 61, 0.8); }
.hero-inhoud { position: relative; }
.hero-tekst { max-width: 900px; display: flex; flex-direction: column; gap: 24px; }
.hero h1 { max-width: 900px; font-size: clamp(36px, 4.3vw, 60px); line-height: 1.04; font-weight: 800; letter-spacing: -0.028em; color: var(--wit); }
.hero .sub { max-width: 820px; text-wrap: pretty; font-size: 21px; line-height: 1.5; font-weight: 600; color: var(--oranje); }
.hero-knoppen { display: flex; gap: 14px; flex-wrap: wrap; padding-top: 6px; }

/* Wat Yardista doet */
/* De schuine lijn tussen perzik en wit loopt door tot de linkerrand, dus tot in
   Modules. Hoek en lengte hangen aan de schermbreedte (vw) en niet aan de hoogte
   van de sectie: anders wordt hij op een telefoon, waar alles onder elkaar staat,
   een steile wand. Op 1440 px snijdt hij de onderrand op 37 %, zoals het ontwerp.
   overflow-x: clip in plaats van hidden, zodat de perzik naar onder mag uitlopen
   terwijl de band van de collage opzij afgeknipt blijft. */
.flow { position: relative; background: var(--wit); overflow-x: clip; }
.flow::before { content: ""; position: absolute; left: 0; right: 0; top: 0; bottom: -20vw; background: var(--perzik); clip-path: polygon(0 0, 100% 0, 100% calc(100% - 54vw), 0 100%); pointer-events: none; }
.flow-inhoud { position: relative; padding-top: 96px; padding-bottom: 120px; display: flex; flex-direction: column; gap: 104px; }
.wat { display: flex; gap: 56px; align-items: center; }
.wat-tekst { flex: 0 0 460px; display: flex; flex-direction: column; gap: 20px; }
.wat-tekst p { font-size: 17px; line-height: 1.65; }
.collage { flex: 1 1 auto; position: relative; height: 400px; min-width: 0; }
.collage-band { position: absolute; left: 52%; right: -2000px; top: 96px; height: 200px; background: var(--navy); }
.collage-kader { position: absolute; left: 6%; top: 16px; width: 80%; height: 300px; border: 2px dashed var(--oranje); border-radius: 4px; }
.collage-bord { position: absolute; left: 14%; top: 56px; width: 76%; background: var(--wit); border-radius: 6px; padding: 18px; display: flex; flex-direction: column; gap: 9px; box-shadow: 0 24px 60px rgba(2, 38, 61, 0.22); }
.collage-bord-kop { display: flex; justify-content: space-between; gap: 8px; font-family: var(--mono); font-size: 10px; font-weight: 600; letter-spacing: 0.14em; color: #6B7280; }
.collage-bord-kop .live { color: #B45309; }
.rij { position: relative; height: 26px; background: var(--vlak); border-radius: 2px; }
.rij span { position: absolute; top: 3px; bottom: 3px; background: var(--navy); border-radius: 2px; }
.rij span.geboekt { background: var(--oranje); }
.collage-kaai { position: absolute; left: 0; top: 250px; background: var(--oranje); border-radius: 10px; padding: 16px 20px; display: flex; flex-direction: column; gap: 2px; box-shadow: 0 16px 40px rgba(2, 38, 61, 0.25); color: var(--navy); }
.collage-kaai .plaat { font-family: var(--mono); font-size: 10px; font-weight: 600; letter-spacing: 0.14em; }
.collage-kaai .kaai { font-size: 22px; font-weight: 800; }
.collage-tegel { position: absolute; right: 4%; top: 0; width: 88px; height: 88px; border-radius: 19.6px; background: var(--navy); display: flex; align-items: center; justify-content: center; box-shadow: 0 16px 40px rgba(2, 38, 61, 0.3); }
.collage-aangemeld { position: absolute; right: 6%; top: 300px; background: var(--wit); border-radius: 10px; padding: 12px 16px; display: flex; gap: 10px; align-items: center; box-shadow: 0 16px 40px rgba(2, 38, 61, 0.22); font-size: 14px; font-weight: 700; color: var(--navy); white-space: nowrap; }
.collage-aangemeld::before { content: ""; width: 8px; height: 22px; background: var(--oranje); }

.stappen { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 48px 32px; list-style: none; padding: 0; }
.stap { display: flex; flex-direction: column; align-items: center; gap: 16px; text-align: center; }
.tegel { width: 132px; height: 132px; border-radius: 26px; background: var(--oranje); display: flex; align-items: center; justify-content: center; box-shadow: -10px -8px 0 var(--vlak), -10px -8px 0 1px var(--rand); }
.tegel svg { width: 60px; height: 60px; }
.stap-nr { margin-top: 10px; font-family: var(--mono); font-size: 12px; font-weight: 600; color: var(--oranje-donker); }
.stap h3 { font-size: 22px; font-weight: 700; letter-spacing: -0.01em; color: var(--navy); }
.stap p { max-width: 260px; font-size: 15px; line-height: 1.6; }

/* Modules */
.modules { background: var(--wit); }
.modules-inhoud { position: relative; padding-top: 16px; padding-bottom: 112px; display: flex; flex-direction: column; gap: 48px; }
.kop-blok { display: flex; flex-direction: column; gap: 16px; max-width: 720px; }
.kop-blok p { font-size: 17px; line-height: 1.6; color: var(--tekst-zacht); }
.mod-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.mod { background: var(--zand); border-radius: 6px; padding: 32px 28px; display: flex; flex-direction: column; gap: 20px; }
.mod h3 { font-size: 22px; font-weight: 800; color: var(--navy); }
.mod > p { font-size: 15px; line-height: 1.6; color: var(--tekst-zacht); }
.mod ul { padding: 0; list-style: none; display: flex; flex-direction: column; gap: 14px; font-size: 14px; line-height: 1.5; }
.mod li { display: flex; gap: 12px; }
.mod li::before { content: ""; flex-shrink: 0; width: 8px; height: 18px; margin-top: 1px; background: var(--oranje); }
.mod-samen { background: var(--navy); }
.mod-samen h3, .mod-samen .zin { color: var(--wit); }
.mod-samen .zin { font-size: 26px; line-height: 1.3; font-weight: 700; letter-spacing: -0.015em; }
.mod-samen > p:not(.zin) { color: var(--op-navy); }
.mod-samen .knop { margin-top: auto; align-self: flex-start; height: 48px; padding: 0 22px; font-size: 14px; }
.eig { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 24px; padding-top: 40px; border-top: 1px solid var(--rand); }
.eig div { display: flex; flex-direction: column; gap: 6px; }
.eig h3 { font-size: 14px; font-weight: 700; color: var(--navy); }
.eig p { font-size: 13px; line-height: 1.55; color: var(--tekst-gedempt); }

/* Aan de slag */
.slag { background: var(--zand); }
.slag-inhoud { padding-top: 112px; padding-bottom: 104px; display: flex; flex-direction: column; gap: 56px; }
.drie { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px; list-style: none; padding: 0; }
.drie li { display: flex; flex-direction: column; gap: 16px; }
.blokjes { display: flex; gap: 4px; }
.blokjes span { width: 28px; height: 28px; border: 1px solid #98A2AE; }
.blokjes span.vol { background: var(--navy); border-color: var(--navy); }
.blokjes span.oranje { background: var(--oranje); border-color: var(--oranje); }
.drie h3 { font-size: 20px; font-weight: 700; color: var(--navy); }
.drie p { font-size: 15px; line-height: 1.65; }

/* Over TLCC */
.tlcc { position: relative; background: var(--wit); }
/* Schuine overgang: zand, een schuine oranje lijn, dan wit.
   De grens met "Aan de slag" valt op een halve pixel. Begint het zandvlak exact op
   die grens, dan dekken de twee vlakken daar elk maar half en schemert de laag
   eronder door als haarlijn over de volle breedte (eerst oranje, zonder oranje wit).
   Daarom begint het zand 1 px hoger en overlapt het de sectie erboven, en begint het
   oranje 1 px lager, waar het zand het toch afdekt. De zichtbare lijnen staan op
   dezelfde plek als in het ontwerp: zand tot 2 px links en 134 px rechts, oranje tot
   10 px links en 160 px rechts. */
.tlcc::before, .tlcc::after { content: ""; position: absolute; left: 0; right: 0; }
.tlcc::before { top: 1px; height: 159px; background: var(--oranje); clip-path: polygon(0 0, 100% 0, 100% 100%, 0 9px); }
.tlcc::after { top: -1px; height: 161px; background: var(--zand); clip-path: polygon(0 0, 100% 0, 100% 135px, 0 3px); }
.tlcc-inhoud { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 72px; align-items: center; padding-top: 200px; padding-bottom: 112px; }
.tlcc-foto { position: relative; height: 420px; }
.tlcc-foto img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 30% center; border-radius: 6px; }
.tlcc-foto::before { content: ""; position: absolute; left: 36px; bottom: -40px; width: 44px; height: 102px; background: var(--oranje); }
.tlcc-foto::after { content: ""; position: absolute; left: 36px; top: -24px; width: 44px; height: 44px; background: var(--navy); opacity: 0.25; }
.tlcc-tekst { display: flex; flex-direction: column; gap: 18px; max-width: 540px; }
.tlcc-tekst h2 { font-size: clamp(26px, 2.4vw, 34px); line-height: 1.15; font-weight: 800; letter-spacing: -0.02em; color: var(--navy); }
.tlcc-tekst p { font-size: 15px; line-height: 1.65; }
.naast-tlcc { display: flex; align-items: center; gap: 16px; padding-top: 12px; flex-wrap: wrap; font-size: 12.5px; color: var(--tekst-gedempt); }
.naast-tlcc .logo-woord { font-size: 17px; color: var(--navy); }
.naast-tlcc .streep { width: 1px; height: 24px; background: var(--rand); }

/* Contact */
.contact { background: var(--wit); }
.contact-inhoud { padding-bottom: 112px; }
.contact-kader { display: grid; grid-template-columns: 440px minmax(0, 1fr); background: var(--navy); border: 3px solid var(--oranje); border-radius: 8px; overflow: hidden; }
.contact-foto { position: relative; min-height: 440px; background: var(--oranje); }
.contact-foto img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 20% center; }
.contact-foto::after { content: ""; position: absolute; inset: 0; background: rgba(232, 134, 37, 0.35); }
.contact-tekst { padding: 36px 48px; display: flex; flex-direction: column; gap: 18px; }
.contact-tekst h2 { font-size: clamp(26px, 2.3vw, 32px); line-height: 1.1; font-weight: 800; letter-spacing: -0.022em; color: var(--wit); }
.contact-tekst .intro { font-size: 16px; line-height: 1.6; font-weight: 600; color: var(--oranje); }
.formkaart { background: var(--wit); border-radius: 6px; padding: 22px 24px; }
.formulier { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 16px; }
.formulier label { display: flex; flex-direction: column; gap: 6px; }
.formulier label span { font-family: var(--mono); font-size: 10px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--tekst-gedempt); }
.formulier input, .formulier textarea { min-width: 0; border: 1px solid var(--rand); border-radius: 3px; padding: 0 12px; font-size: 16px; color: var(--tekst); background: var(--wit); }
.formulier input { height: 44px; }
.formulier textarea { padding: 11px 12px; resize: vertical; min-height: 88px; }
.formulier input:focus, .formulier textarea:focus { outline: 2px solid var(--blauw); outline-offset: 0; border-color: var(--blauw); }
.breed { grid-column: 1 / -1; }
.verstuur { display: flex; justify-content: flex-end; align-items: center; gap: 16px; flex-wrap: wrap; }
.verstuur .knop { height: 48px; font-size: 14px; }
.verstuur small { font-size: 12.5px; color: var(--tekst-gedempt); }
.bedankt { display: flex; flex-direction: column; gap: 12px; padding: 16px 0; }
.bedankt[hidden] { display: none; }
.bedankt .eyebrow { display: flex; align-items: center; gap: 10px; color: var(--navy); }
.bedankt .eyebrow::before { content: ""; width: 6px; height: 14px; background: var(--oranje); }
.bedankt h3 { font-size: 22px; font-weight: 700; color: var(--navy); }
.bedankt p { font-size: 15px; line-height: 1.6; }
.bedankt button { align-self: flex-start; min-height: 44px; background: none; border: 0; padding: 0; color: var(--blauw); font-size: 14px; font-weight: 700; cursor: pointer; }

/* Voet */
.voet { background: var(--navy); color: var(--op-navy); }
.voet-inhoud { padding-top: 56px; padding-bottom: 40px; display: flex; flex-direction: column; gap: 40px; }
.voet-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 48px; }
.voet-merk { display: flex; flex-direction: column; gap: 14px; font-size: 13px; }
.voet-merk .logo { gap: 12px; }
.voet-merk .logo-woord { font-size: 24px; color: var(--wit); }
.voet-merk .descriptor { display: block; margin-top: 4px; font-family: var(--mono); font-size: 11px; letter-spacing: 0.05em; color: var(--op-navy); }
.voet-nav { display: grid; grid-auto-flow: column; grid-auto-columns: 170px; gap: 32px; }
.voet-nav nav { display: flex; flex-direction: column; gap: 4px; font-size: 14px; }
.voet-nav h2 { padding-bottom: 6px; font-family: var(--mono); font-size: 10px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--op-navy); }
.voet-nav a { display: flex; align-items: center; min-height: 36px; color: var(--wit); text-decoration: none; }
.voet-nav a:hover { text-decoration: underline; text-underline-offset: 4px; }
.voet-onder { display: flex; justify-content: space-between; gap: 8px 24px; flex-wrap: wrap; padding-top: 24px; border-top: 1px solid var(--lijn-navy); font-family: var(--mono); font-size: 12px; }

/* Tablet */
@media (max-width: 1023px) {
  .kop-nav, .kop-acties .talen { display: none; }
  .menuknop { display: flex; }
  .wat { flex-direction: column; align-items: stretch; gap: 40px; }
  .wat-tekst { flex: 0 0 auto; max-width: 640px; }
  .stappen { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mod-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mod-samen { grid-column: 1 / -1; }
  .eig { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .tlcc-inhoud { grid-template-columns: minmax(0, 1fr); gap: 56px; padding-top: 180px; }
  .tlcc-foto { height: 360px; }
  .contact-kader { grid-template-columns: minmax(0, 1fr); }
  .contact-foto { min-height: 240px; }
  .voet-top { flex-direction: column; gap: 36px; }
}

/* Telefoon */
@media (max-width: 719px) {
  .wrap { padding-left: 20px; padding-right: 20px; }
  .hero { padding-top: 56px; padding-bottom: 190px; }
  .hero .sub { font-size: 18px; }
  .hero h1 { text-wrap: balance; }
  .hero h1 br { display: none; }
  .hero-knoppen { flex-direction: column; align-items: stretch; }
  .flow-inhoud, .modules-inhoud, .slag-inhoud { padding-top: 72px; padding-bottom: 80px; }
  .modules-inhoud { padding-top: 16px; }
  .collage { height: 360px; }
  .stappen { grid-template-columns: minmax(0, 1fr); }
  .tegel { width: 104px; height: 104px; border-radius: 22px; }
  .tegel svg { width: 48px; height: 48px; }
  .mod-grid { grid-template-columns: minmax(0, 1fr); }
  .eig { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .drie { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .tlcc-inhoud { padding-top: 150px; padding-bottom: 80px; gap: 48px; }
  .tlcc-foto { height: 260px; }
  .contact-foto { min-height: 180px; }
  .contact-tekst { padding: 28px 20px; }
  .formkaart { padding: 18px; }
  .formulier { grid-template-columns: minmax(0, 1fr); }
  .verstuur { justify-content: stretch; }
  .verstuur .knop { width: 100%; }
  .voet-nav { grid-auto-flow: row; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px; }
  .voet-onder { flex-direction: column; }
}