/* =========================================================================
   FayLux cases, versie 3 (okt 2026). Overzicht: twee cases naast elkaar die
   per rij om en om van links en rechts inschuiven. Casepagina: secties in
   afgeronde, asymmetrische panelen met zachte kleurovergangen.
   Alle klassen beginnen met k3-. Laadt na home/sub.min.css.
   ========================================================================= */
:root {
  --sc-canvas: #F5F0E8; --sc-surface: #FFFDF8; --sc-ink: #0C1D23; --sc-ink-soft: #5E584E;
  --sc-accent: #0A5A50; --sc-accent-ink: #F5F1E8;
  --sc-font-display: "Bricolage Grotesque", system-ui, sans-serif;
  --sc-font-text: "Manrope", system-ui, sans-serif;
  --k3-nacht: #0C1D23; --k3-diep: #0A181D; --k3-mint: #8FD6CA; --k3-teal: #0A5A50; --k3-koraal: #C24E33;
  --k3-creme: #F5F0E8; --k3-papier: #FBF8F2; --k3-wash: #ECE5D8; --k3-lijn: #DDD4C4; --k3-zacht: #5E584E;
  --k3-r: 32px; --k3-r-m: 22px; --k3-r-s: 14px;
  --k3-nav: 84px; --k3-g: clamp(18px, 3vw, 44px); --k3-max: 1520px;
  --k3-ease: cubic-bezier(.22, 1, .36, 1);
}
body.k3 { letter-spacing: normal; background: var(--k3-creme); transition: background-color .9s var(--k3-ease); }
.k3 :focus-visible { outline: 3px solid var(--k3-koraal); outline-offset: 3px; border-radius: 8px; }
.k3-wrap { max-width: var(--k3-max); margin: 0 auto; padding: 0 var(--k3-g); }
.k3-eyebrow { display: inline-flex; align-items: center; gap: 10px; font: 600 .78rem/1 var(--sc-font-text); letter-spacing: .16em; text-transform: uppercase; color: var(--k3-koraal); }
.k3-eyebrow::before { content: ""; width: 26px; height: 1.5px; background: currentColor; }
.k3-h { margin: 0; font-family: var(--sc-font-display); font-weight: 700; letter-spacing: -.03em; line-height: .98; color: var(--k3-nacht); text-wrap: balance; }
.k3-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.k3-chips li { font-size: .82rem; font-weight: 500; padding: 7px 13px; border-radius: 999px; background: rgba(10,90,80,.08); color: var(--k3-teal); border: 1px solid rgba(10,90,80,.14); }

/* ---------- browservenster ---------- */
.k3-browser { border-radius: var(--k3-r-m); overflow: hidden; background: #fff; box-shadow: 0 2px 0 rgba(12,29,35,.04), 0 50px 90px -40px rgba(12,29,35,.45); }
.k3-browser__balk { display: flex; align-items: center; gap: 6px; padding: 11px 14px; background: #F1ECE3; border-bottom: 1px solid #E3DBCD; }
.k3-browser__balk i { width: 9px; height: 9px; border-radius: 50%; background: #D3C9B8; }
.k3-browser__balk span { margin-left: 10px; font-size: .74rem; color: var(--k3-zacht); background: #fff; padding: 4px 12px; border-radius: 20px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.k3-browser__raam { position: relative; overflow: hidden; height: var(--raam, 420px); background: #fff; }
.k3-browser__raam img { display: block; width: 100%; max-width: none; height: auto; }
.k3-browser--auto img { animation: k3-auto var(--duur, 38s) ease-in-out infinite alternate; }
@keyframes k3-auto { 0%, 8% { transform: translateY(0); } 92%, 100% { transform: translateY(calc(-100% + var(--raam, 420px))); } }

/* =============================== OVERZICHT =============================== */
.k3-held { padding-top: calc(var(--k3-nav) + clamp(56px, 8vw, 120px)); padding-bottom: clamp(48px, 6vw, 88px); }
.k3-held__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 32px; align-items: end; }
.k3-held h1 { grid-column: 1 / span 8; font-size: clamp(3.2rem, 6.3vw, 7.6rem); }
.k3-held h1 em { font-style: normal; color: var(--k3-teal); }
.k3-held__zij { grid-column: 9 / span 4; display: grid; gap: 22px; padding-bottom: 12px; }
.k3-held__zij p { margin: 0; font-size: 1.12rem; line-height: 1.6; color: var(--k3-zacht); text-wrap: pretty; }
.k3-held__cijfers { display: flex; gap: 28px; flex-wrap: wrap; }
.k3-held__cijfers div { display: grid; gap: 2px; }
.k3-held__cijfers b { font-family: var(--sc-font-display); font-size: 2rem; font-weight: 700; color: var(--k3-nacht); line-height: 1; }
.k3-held__cijfers span { font-size: .82rem; color: var(--k3-zacht); }

.k3-raster { display: grid; gap: clamp(28px, 3vw, 48px); padding-bottom: clamp(80px, 9vw, 140px); }
body.k3 #main { overflow-x: clip; }
.k3-rij { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(20px, 2.4vw, 40px); }
.k3-rij > .k3-kaart { --p: 1; opacity: calc(.15 + .85 * var(--p)); transform: translate3d(calc((1 - var(--p)) * var(--richting, -1) * 18vw), calc((1 - var(--p)) * 40px), 0); will-change: transform, opacity; }
.k3-rij--rechts { --richting: 1; }
.k3-kaart { display: grid; gap: 22px; text-decoration: none; color: inherit; }
.k3-kaart__beeld { position: relative; border-radius: var(--k3-r); overflow: hidden; aspect-ratio: 16 / 11; background: var(--vlak, var(--k3-wash)); display: grid; place-items: end center; padding: clamp(28px, 4vw, 64px) clamp(28px, 4vw, 64px) 0; isolation: isolate; }
.k3-kaart__beeld::after { content: ""; position: absolute; inset: 0; background: radial-gradient(120% 80% at 50% 0%, rgba(255,255,255,.35), transparent 60%); z-index: -1; }
.k3-kaart__venster { width: 100%; height: 100%; border-radius: 16px 16px 0 0; overflow: hidden; background: #fff; box-shadow: 0 40px 80px -30px rgba(12,29,35,.5); transition: transform .9s var(--k3-ease); transform-origin: 50% 100%; }
.k3-kaart__venster img { width: 100%; height: 100%; object-fit: cover; object-position: top; display: block; transition: transform 1.2s var(--k3-ease); }
.k3-kaart__foto { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--k3-ease); }
.k3-kaart__logo { width: 34%; height: auto; margin-bottom: 18%; filter: brightness(0) invert(.94); transition: transform 1.2s var(--k3-ease); }
.k3-kaart__knop { position: absolute; left: 50%; top: 50%; width: 112px; height: 112px; margin: -56px 0 0 -56px; border-radius: 50%; background: var(--k3-nacht); color: #F5F1E8; display: grid; place-items: center; font-weight: 600; font-size: .9rem; transform: scale(.4); opacity: 0; transition: transform .5s var(--k3-ease), opacity .3s; z-index: 2; }
.k3-kaart__nr { position: absolute; left: 22px; top: 18px; font: 600 .78rem/1 var(--sc-font-text); letter-spacing: .14em; color: rgba(12,29,35,.74); z-index: 2; }
.k3-kaart__info { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px 24px; align-items: start; padding: 0 6px; }
.k3-kaart__naam { margin: 0; font-family: var(--sc-font-display); font-weight: 700; font-size: clamp(1.5rem, 2.2vw, 2.1rem); letter-spacing: -.02em; line-height: 1.05; transition: color .2s; }
.k3-kaart__sub { grid-column: 1; margin: 0; font-size: .92rem; color: var(--k3-zacht); }
.k3-kaart__res { grid-column: 2; grid-row: 1 / span 2; text-align: right; display: grid; gap: 2px; }
.k3-kaart__res b { font-family: var(--sc-font-display); font-weight: 700; font-size: clamp(1.5rem, 2.2vw, 2rem); color: var(--k3-teal); line-height: 1; white-space: nowrap; }
.k3-kaart__res span { font-size: .8rem; color: var(--k3-zacht); max-width: 24ch; justify-self: end; text-wrap: balance; }
.k3-kaart__beeld--donker .k3-kaart__nr { color: rgba(245,241,232,.82); }
.k3-kaart .k3-chips { grid-column: 1 / -1; margin-top: 6px; }
@media (hover: hover) and (pointer: fine) {
  .k3-kaart:hover .k3-kaart__venster { transform: scale(1.045) translateY(-6px); }
  .k3-kaart:hover .k3-kaart__venster img, .k3-kaart:hover .k3-kaart__foto { transform: scale(1.06); }
  .k3-kaart:hover .k3-kaart__logo { transform: scale(1.1); }
  .k3-kaart:hover .k3-kaart__knop { transform: scale(1); opacity: 1; }
  .k3-kaart:hover .k3-kaart__naam { color: var(--k3-teal); }
}
.k3-kaart:focus-visible .k3-kaart__knop { transform: scale(1); opacity: 1; }

.k3-slot { padding-bottom: clamp(96px, 10vw, 160px); }
.k3-slot__paneel { border-radius: var(--k3-r); background: var(--k3-nacht); color: #F5F1E8; padding: clamp(40px, 6vw, 96px); display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 32px; align-items: end; position: relative; overflow: hidden; }
.k3-slot__paneel::before { content: ""; position: absolute; right: -10%; top: -40%; width: 60%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, rgba(143,214,202,.22), transparent 65%); }
.k3-slot__paneel h2 { grid-column: 1 / span 8; margin: 0; font-family: var(--sc-font-display); font-weight: 700; font-size: clamp(2.4rem, 5.4vw, 5.2rem); line-height: .98; letter-spacing: -.03em; color: #F5F1E8; }
.k3-slot__paneel h2 em { font-style: normal; color: var(--k3-mint); }
.k3-slot__paneel a { grid-column: 9 / span 4; justify-self: end; }
.k3-knop { display: inline-flex; align-items: center; gap: 10px; min-height: 56px; padding: 0 28px; border-radius: 999px; background: var(--k3-mint); color: var(--k3-nacht); font-weight: 600; text-decoration: none; transition: transform .16s var(--k3-ease), background .2s; }
.k3-knop:hover { background: #A6E0D6; color: var(--k3-nacht); }
.k3-knop:active { transform: scale(.97); }
.k3-knop--donker { background: var(--k3-nacht); color: #F5F1E8; }
.k3-knop--donker:hover { background: var(--k3-teal); color: #F5F1E8; }

/* =============================== CASEPAGINA =============================== */
.k3-sectie { padding-block: clamp(40px, 5vw, 72px); }
.k3-paneel { border-radius: var(--k3-r); background: var(--k3-papier); padding: clamp(28px, 4vw, 64px); position: relative; overflow: hidden; min-width: 0; }
.k3-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: clamp(14px, 1.6vw, 22px); }

.k3-chero { padding-top: calc(var(--k3-nav) + clamp(40px, 6vw, 88px)); }
.k3-crumb { margin: 0 0 28px; font-size: .86rem; color: var(--k3-zacht); }
.k3-crumb a { color: inherit; }
.k3-chero__top { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 32px; align-items: end; }
.k3-chero__titel { grid-column: 1 / span 8; display: grid; gap: 26px; }
.k3-chero h1 { font-size: clamp(2.6rem, 7.6vw, 7.8rem); hyphens: auto; overflow-wrap: break-word; }
.k3-chero__lead { margin: 0; font-size: clamp(1.1rem, 1.5vw, 1.4rem); line-height: 1.55; color: #3D3A33; max-width: 46ch; text-wrap: pretty; }
.k3-meta { grid-column: 9 / span 4; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin: 0; transform: translateY(-20px); }
.k3-meta div { border-radius: var(--k3-r-s); background: var(--sc-surface); padding: 14px 16px; display: grid; gap: 4px; box-shadow: 0 1px 0 rgba(12,29,35,.04); }
.k3-meta div:nth-child(2) { transform: translateY(18px); }
.k3-meta div:nth-child(4) { transform: translateY(18px); }
.k3-meta dt { font-size: .74rem; color: var(--k3-zacht); }
.k3-meta dd { margin: 0; font-weight: 600; font-size: .95rem; line-height: 1.35; overflow-wrap: break-word; hyphens: auto; }
.k3-meta a { color: var(--k3-teal); }
.k3-chero__beeld { margin-top: clamp(40px, 5vw, 72px); border-radius: var(--k3-r); background: linear-gradient(160deg, var(--k3-teal), var(--k3-nacht)); padding: clamp(28px, 5vw, 80px) clamp(20px, 6vw, 120px) 0; overflow: hidden; position: relative; }
.k3-chero__beeld::before { content: ""; position: absolute; left: -15%; top: -60%; width: 70%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, rgba(143,214,202,.3), transparent 62%); }
.k3-chero__beeld .k3-browser { border-radius: 18px 18px 0 0; position: relative; }
.k3-chero__beeld .k3-browser__raam { --raam: min(62vh, 640px); }
.k3-chero__foto { position: relative; border-radius: 18px 18px 0 0; overflow: hidden; aspect-ratio: 16 / 8; }
.k3-chero__foto img, .k3-chero__foto video { width: 100%; height: 100%; object-fit: cover; display: block; }
.k3-slot-mark { position: relative; display: grid; place-items: center; gap: 18px; padding: clamp(60px, 8vw, 120px) 0; color: #F5F1E8; text-align: center; }
.k3-slot-mark img { width: 140px; filter: brightness(0) invert(.94); }
.k3-slot-mark p { margin: 0; display: inline-flex; gap: 10px; align-items: center; font-size: .95rem; color: #C9D8D5; }

.k3-opdracht { grid-column: 1 / span 7; }
.k3-probleem { grid-column: 8 / span 5; margin-top: clamp(40px, 8vw, 120px); background: var(--k3-nacht); color: #F5F1E8; }
.k3-paneel h2 { font-size: clamp(2rem, 3.6vw, 3.4rem); margin: 18px 0 22px; }
.k3-paneel p { margin: 0 0 16px; font-size: 1.1rem; line-height: 1.75; color: #3D3A33; max-width: 60ch; text-wrap: pretty; }
.k3-probleem h2, .k3-probleem p { color: #F5F1E8; }
.k3-probleem p { color: #D6E2DF; }
.k3-probleem .k3-eyebrow { color: var(--k3-mint); }
.k3-opdracht .k3-big { font-family: var(--sc-font-display); font-weight: 600; font-size: clamp(1.5rem, 2.4vw, 2.2rem); line-height: 1.2; color: var(--k3-teal); max-width: 26ch; }
.k3-opdracht .k3-rest { margin-top: 20px; font-size: 1.05rem; line-height: 1.65; color: var(--k3-zacht); max-width: 60ch; text-wrap: pretty; }

.k3-stappen { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: clamp(14px, 1.6vw, 22px); }
.k3-stappen__kop { grid-column: 1 / -1; display: flex; justify-content: space-between; align-items: end; gap: 24px; flex-wrap: wrap; margin-bottom: 8px; }
.k3-stappen__kop h2 { font-size: clamp(2.2rem, 4.4vw, 4.2rem); }
.k3-stap { grid-column: span 6; background: var(--sc-surface); border-radius: var(--k3-r-m); padding: clamp(24px, 3vw, 40px); display: grid; gap: 14px; align-content: start; min-height: 220px; position: relative; overflow: hidden; }
.k3-stap:nth-of-type(4n+1) { grid-column: span 7; }
.k3-stap:nth-of-type(4n+2) { grid-column: span 5; margin-top: 48px; }
.k3-stap:nth-of-type(4n+3) { grid-column: span 5; }
.k3-stap:nth-of-type(4n+4) { grid-column: span 7; margin-top: -48px; }
.k3-stap:last-child:nth-of-type(odd) { grid-column: 3 / span 8; margin-top: 0; }
.k3-stap__nr { font-family: var(--sc-font-display); font-weight: 800; font-size: 4.4rem; line-height: .8; color: transparent; -webkit-text-stroke: 1.5px rgba(10,90,80,.35); }
.k3-stap h3 { margin: 0; font-family: var(--sc-font-display); font-weight: 600; font-size: 1.45rem; line-height: 1.15; color: var(--k3-nacht); }
.k3-stap p { margin: 0; font-size: 1rem; line-height: 1.65; color: #3D3A33; }

.k3-pin { background: transparent; }
.k3-podium { position: absolute; inset: calc(var(--k3-nav) + 14px) var(--k3-g) 14px; max-width: calc(var(--k3-max) - 2 * var(--k3-g)); margin: 0 auto; border-radius: var(--k3-r); background: var(--k3-nacht); color: #F5F1E8; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); grid-template-rows: auto 1fr; column-gap: 18px; padding: clamp(26px, 3.4vw, 52px); overflow: hidden; }
.k3-podium::before { content: ""; position: absolute; left: -20%; bottom: -50%; width: 70%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, rgba(143,214,202,.16), transparent 65%); pointer-events: none; }
.k3-podium__kop { grid-column: 1 / span 4; grid-row: 1; position: relative; }
.k3-podium__kop h2 { margin: 16px 0 0; font-family: var(--sc-font-display); font-weight: 700; font-size: clamp(1.9rem, 3vw, 2.9rem); line-height: 1.02; letter-spacing: -.02em; color: #F5F1E8; text-wrap: balance; }
.k3-podium__kop .k3-eyebrow { color: var(--k3-mint); }
.k3-podium .k3-browser { grid-column: 5 / span 8; grid-row: 1 / span 2; align-self: center; position: relative; }
.k3-podium .k3-browser__balk { background: #11272E; border-bottom-color: rgba(255,255,255,.06); }
.k3-podium .k3-browser__balk i { background: #2B3F45; }
.k3-podium .k3-browser__balk span { background: #0E2026; color: #C9D8D5; }
.k3-podium .k3-browser__raam { --raam: min(calc(100vh - var(--k3-nav) - 200px), 660px); }
.k3-podium .k3-browser__raam img { will-change: transform; transform: translateY(calc(min(1, var(--sc-p, 0) * 1.08) * (-100% + var(--raam)))); }
.k3-noten { grid-column: 1 / span 5; grid-row: 2; align-self: end; z-index: 2; margin: 0 -72px 0 0; padding: 22px 24px; list-style: none; display: grid; gap: 14px; border-radius: var(--k3-r-m); background: rgba(23,50,58,.92); backdrop-filter: blur(8px); border: 1px solid rgba(143,214,202,.18); box-shadow: 0 30px 60px -20px rgba(0,0,0,.55); }
.k3-noten li { display: grid; grid-template-columns: 26px 1fr; gap: 12px; font-size: .95rem; line-height: 1.45; color: #C9D8D5; }
.k3-noten li b { color: #F5F1E8; font-weight: 600; }
.k3-noten li::before { content: attr(data-n); font: 700 .78rem/24px var(--sc-font-text); color: var(--k3-nacht); background: var(--k3-mint); border-radius: 50%; width: 24px; height: 24px; text-align: center; }

.k3-galerij { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: clamp(14px, 1.6vw, 22px); }
.k3-galerij figure { margin: 0; border-radius: var(--k3-r); overflow: hidden; background: var(--k3-wash); }
.k3-galerij img, .k3-galerij video { display: block; width: 100%; height: 100%; object-fit: cover; }
.k3-galerij__groot { grid-column: span 8; grid-row: span 2; }
.k3-galerij__klein { grid-column: span 4; aspect-ratio: 1; }

.k3-voorna { grid-column: 1 / -1; }
.k3-voorna h2 { font-size: clamp(2.2rem, 4.4vw, 4.2rem); margin-bottom: 36px; }
.k3-vn { display: grid; grid-template-columns: minmax(0, 1fr) 120px minmax(0, 1fr); align-items: center; gap: 18px; padding: 22px 0; border-top: 1px solid var(--k3-lijn); }
.k3-vn:last-child { border-bottom: 1px solid var(--k3-lijn); }
.k3-vn__voor { font-size: 1.05rem; color: var(--k3-zacht); text-decoration: line-through; text-decoration-color: rgba(194,78,51,.45); text-decoration-thickness: 1.5px; }
.k3-vn__na { font-family: var(--sc-font-display); font-weight: 600; font-size: clamp(1.2rem, 1.8vw, 1.6rem); color: var(--k3-nacht); line-height: 1.2; }
.k3-vn svg { width: 120px; height: 24px; overflow: visible; }
.k3-vn path { stroke: var(--k3-teal); stroke-width: 2; fill: none; stroke-dasharray: 140; stroke-dashoffset: 140; transition: stroke-dashoffset 1.1s var(--k3-ease); }
.k3-vn.is-in path { stroke-dashoffset: 0; }
.k3-kolkop { display: grid; grid-template-columns: minmax(0, 1fr) 120px minmax(0, 1fr); gap: 18px; font: 600 .74rem/1 var(--sc-font-text); letter-spacing: .16em; text-transform: uppercase; color: var(--k3-zacht); padding-bottom: 14px; }
.k3-kolkop span:last-child { color: var(--k3-teal); }

.k3-scores { grid-column: span 7; background: var(--sc-surface); }
.k3-scores__ringen { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: 18px; margin-top: 28px; }
.k3-ring { display: grid; justify-items: center; gap: 10px; text-align: center; }
.k3-ring__schijf { position: relative; width: min(150px, 100%); aspect-ratio: 1; }
.k3-ring svg { display: block; width: 100%; height: 100%; transform: rotate(-90deg); }
.k3-ring circle { fill: none; stroke-width: 9; }
.k3-ring .k3-ring__bg { stroke: var(--k3-wash); }
.k3-ring .k3-ring__boog { stroke: var(--k3-teal); stroke-linecap: round; stroke-dasharray: 314; stroke-dashoffset: 314; transition: stroke-dashoffset 1.6s var(--k3-ease); }
.k3-ring.is-in .k3-ring__boog { stroke-dashoffset: calc(314 - 314 * var(--waarde) / 100); }
.k3-ring__getal { position: absolute; inset: 0; display: grid; place-items: center; line-height: 1; font-variant-numeric: tabular-nums; font-family: var(--sc-font-display); font-weight: 700; font-size: 2.2rem; color: var(--k3-nacht); }
.k3-ring span { font-size: .88rem; color: var(--k3-zacht); }
.k3-snel { grid-column: span 5; background: var(--k3-mint); display: grid; align-content: space-between; gap: 24px; }
.k3-snel b { font-family: var(--sc-font-display); font-weight: 800; font-size: clamp(5rem, 10vw, 9rem); line-height: .82; letter-spacing: -.05em; color: var(--k3-nacht); }
.k3-snel p { margin: 0; font-size: 1.05rem; color: var(--k3-nacht); max-width: 30ch; }
.k3-bron { margin: 22px 0 0; font-size: .8rem; color: var(--k3-zacht); }
.k3-snel .k3-bron { color: #1F4A44; }

.k3-winst { grid-column: 1 / -1; background: linear-gradient(150deg, var(--k3-teal), #0B4A43); color: #F5F1E8; }
.k3-winst h2 { color: #F5F1E8; font-size: clamp(2.2rem, 4.4vw, 4.2rem); }
.k3-winst .k3-eyebrow { color: var(--k3-mint); }
.k3-winst__getallen { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 18px; margin-top: 36px; }
.k3-winst__getal { border-top: 1px solid rgba(245,241,232,.25); padding-top: 22px; display: grid; gap: 10px; }
.k3-winst__getal b { font-family: var(--sc-font-display); font-weight: 700; font-size: clamp(3rem, 5.6vw, 5.2rem); line-height: .9; letter-spacing: -.03em; color: var(--k3-mint); }
.k3-winst__getal span { font-size: 1rem; line-height: 1.5; color: #DCEBE8; max-width: 28ch; }
.k3-grafiek { margin-top: 44px; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 24px; align-items: end; background: rgba(12,29,35,.25); border-radius: var(--k3-r-m); padding: clamp(22px, 3vw, 40px); }
.k3-grafiek__tekst { grid-column: span 5; display: grid; gap: 10px; }
.k3-grafiek__tekst strong { font-family: var(--sc-font-display); font-size: 1.5rem; font-weight: 600; color: #F5F1E8; }
.k3-grafiek__tekst span { font-size: .84rem; color: #C9D8D5; }
.k3-grafiek__staven { grid-column: span 7; display: flex; align-items: flex-end; gap: clamp(18px, 4vw, 64px); height: 260px; padding: 0 12px; border-bottom: 1px solid rgba(245,241,232,.3); }
.k3-staaf { flex: 1; display: grid; grid-template-rows: auto 1fr auto; justify-items: center; gap: 10px; height: 100%; }
.k3-staaf b { font-family: var(--sc-font-display); font-size: 2rem; color: #F5F1E8; }
.k3-staaf i { align-self: end; width: 100%; max-width: 140px; height: calc(var(--h) * 1%); border-radius: 14px 14px 0 0; background: rgba(143,214,202,.35); transform: scaleY(0); transform-origin: bottom; transition: transform 1.3s var(--k3-ease); }
.k3-staaf--na i { background: var(--k3-mint); transition-delay: .25s; }
.k3-grafiek.is-in .k3-staaf i { transform: scaleY(1); }
.k3-staaf small { font-size: .78rem; color: #C9D8D5; padding-bottom: 6px; }

.k3-reis { grid-column: 1 / -1; background: var(--sc-surface); }
.k3-tijd { list-style: none; margin: 40px 0 0; padding: 0; display: grid; grid-template-columns: repeat(var(--n), minmax(0, 1fr)); gap: 18px; position: relative; }
.k3-tijd::before { content: ""; position: absolute; left: 0; right: 0; top: 7px; height: 2px; background: var(--k3-lijn); }
.k3-tijd::after { content: ""; position: absolute; left: 0; top: 7px; height: 2px; width: 100%; background: var(--k3-teal); transform: scaleX(0); transform-origin: left; transition: transform 1.6s var(--k3-ease); }
.k3-tijd.is-in::after { transform: scaleX(1); }
.k3-tijd li { position: relative; padding-top: 34px; display: grid; gap: 8px; }
.k3-tijd li::before { content: ""; position: absolute; left: 0; top: 0; width: 16px; height: 16px; border-radius: 50%; background: var(--k3-teal); border: 3px solid var(--sc-surface); box-shadow: 0 0 0 1px var(--k3-teal); }
.k3-tijd time { font-size: .8rem; color: var(--k3-zacht); }
.k3-tijd strong { font-family: var(--sc-font-display); font-size: 1.3rem; font-weight: 600; color: var(--k3-nacht); }
.k3-tijd p { margin: 0; font-size: .95rem; line-height: 1.55; color: #3D3A33; }

.k3-review { grid-column: 2 / span 10; background: var(--sc-surface); text-align: left; }
.k3-sterren { display: flex; gap: 6px; color: #E8A93B; font-size: 1.4rem; }
.k3-sterren span { opacity: 0; transform: scale(.6) rotate(-20deg); transition: opacity .4s, transform .5s var(--k3-ease); }
.k3-review.is-in .k3-sterren span { opacity: 1; transform: none; }
.k3-review.is-in .k3-sterren span:nth-child(2) { transition-delay: .08s; } .k3-review.is-in .k3-sterren span:nth-child(3) { transition-delay: .16s; }
.k3-review.is-in .k3-sterren span:nth-child(4) { transition-delay: .24s; } .k3-review.is-in .k3-sterren span:nth-child(5) { transition-delay: .32s; }
.k3-review blockquote { margin: 26px 0 0; font-family: var(--sc-font-display); font-weight: 500; font-size: clamp(1.6rem, 2.8vw, 2.6rem); line-height: 1.2; letter-spacing: -.015em; color: var(--k3-nacht); max-width: 34ch; text-wrap: pretty; }
.k3-review blockquote.k3-lang { font-size: clamp(1.25rem, 1.9vw, 1.7rem); line-height: 1.45; max-width: 56ch; }
.k3-review figcaption { margin-top: 28px; display: flex; align-items: center; gap: 14px; font-size: .95rem; color: var(--k3-zacht); }
.k3-review figcaption strong { color: var(--k3-nacht); }
.k3-review__g { width: 44px; height: 44px; border-radius: 50%; background: var(--k3-wash); display: grid; place-items: center; font-family: var(--sc-font-display); font-weight: 800; color: var(--k3-teal); flex: none; }

.k3-volgende { grid-column: span 7; display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 24px; align-items: end; text-decoration: none; color: inherit; background: var(--sc-surface); }
.k3-volgende small { font-size: .74rem; letter-spacing: .16em; text-transform: uppercase; color: var(--k3-zacht); }
.k3-volgende strong { display: block; margin-top: 12px; font-family: var(--sc-font-display); font-weight: 700; font-size: clamp(2rem, 3.6vw, 3.4rem); line-height: 1; letter-spacing: -.03em; color: var(--k3-nacht); transition: color .2s; hyphens: auto; overflow-wrap: break-word; }
.k3-volgende figure { margin: 0; border-radius: var(--k3-r-m); overflow: hidden; aspect-ratio: 4 / 3; background: var(--k3-wash); }
.k3-volgende img { width: 100%; height: 100%; object-fit: cover; object-position: top; display: block; transition: transform 1.2s var(--k3-ease); }
@media (hover: hover) { .k3-volgende:hover img { transform: scale(1.06); } .k3-volgende:hover strong { color: var(--k3-teal); } }
.k3-cta { grid-column: span 5; background: var(--k3-nacht); color: #F5F1E8; display: grid; align-content: space-between; gap: 28px; }
.k3-cta p { margin: 0; font-family: var(--sc-font-display); font-weight: 600; font-size: clamp(1.7rem, 2.6vw, 2.5rem); line-height: 1.1; color: #F5F1E8; }

/* zachte entree voor panelen */
.k3-in { opacity: 0; transform: translateY(28px); transition: opacity .9s var(--k3-ease), transform .9s var(--k3-ease); }
.k3-in.is-in { opacity: 1; transform: none; }

/* ---------- tablet en telefoon ---------- */
@media (max-width: 1080px) {
  .k3-held h1, .k3-held__zij { grid-column: 1 / -1; }
  .k3-chero__titel, .k3-meta { grid-column: 1 / -1; }
  .k3-meta { transform: none; grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .k3-meta div:nth-child(2), .k3-meta div:nth-child(4) { transform: none; }
}
@media (max-width: 760px) {
  .k3-noot__uitleg { display: none; }
  :root { --k3-nav: 68px; }
  .k3-rij { grid-template-columns: 1fr; }
  .k3-rij > .k3-kaart:nth-child(2) { --richting: calc(var(--richting, -1) * -1); }
  .k3-kaart__info { grid-template-columns: 1fr; }
  .k3-kaart__res { grid-column: 1; grid-row: auto; text-align: left; }
  .k3-kaart__res span { justify-self: start; }
  .k3-grid > *, .k3-stappen > *, .k3-galerij > * { grid-column: 1 / -1 !important; margin-top: 0 !important; }
  .k3-meta { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .k3-slot__paneel h2, .k3-slot__paneel a { grid-column: 1 / -1; justify-self: start; }
  .k3-podium { inset: calc(var(--k3-nav) + 8px) 12px calc(14px + 66px); grid-template-columns: 1fr; grid-template-rows: auto auto auto; align-content: start; gap: 14px; padding: 22px 18px; }
  .k3-podium > * { grid-column: 1 / -1 !important; grid-row: auto !important; }
  .k3-podium .k3-browser { align-self: start; }
  .k3-podium .k3-browser__raam { --raam: max(200px, calc(100svh - var(--k3-nav) - 450px)); }
  .k3-podium__kop h2 { font-size: 1.55rem; margin-top: 10px; }
  .k3-noten { margin: 0; padding: 16px 18px; }
  .k3-noten li:nth-child(n+3) { display: none; }
  .k3-vn, .k3-kolkop { grid-template-columns: 1fr; gap: 8px; }
  .k3-vn svg, .k3-kolkop { display: none; }
  .k3-grafiek__tekst, .k3-grafiek__staven { grid-column: 1 / -1; }
  .k3-grafiek__staven { height: 200px; }
  .k3-tijd { grid-template-columns: 1fr; gap: 26px; }
  .k3-tijd::before, .k3-tijd::after { left: 7px; right: auto; top: 0; bottom: 0; width: 2px; height: auto; }
  .k3-tijd::after { transform: scaleY(0); transform-origin: top; }
  .k3-tijd.is-in::after { transform: scaleY(1); }
  .k3-tijd li { padding: 0 0 0 34px; }
  .k3-volgende { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .k3-rij > .k3-kaart { opacity: 1; transform: none; }
  .k3-browser--auto img, .k3-podium .k3-browser__raam img { animation: none; transform: none; }
  .k3-podium .k3-browser__raam { overflow-y: auto; }
  .k3-in { opacity: 1; transform: none; }
  .k3-kaart__venster, .k3-kaart__venster img, .k3-kaart__foto { transition: none; }
}

/* ---------- 18 okt 2026: case-info als één blok + "Wat het opleverde" in beweging ---------- */
/* Case-info (Branche, Plaats, Resultaat, Live): één kaart met een teal-mint
   accentrand en dunne scheidingslijnen in plaats van vier losse tegeltjes. */
.k3-meta {
  gap: 0;
  transform: none;
  align-self: end;
  background: var(--sc-surface);
  border-radius: var(--k3-r-m);
  box-shadow: 0 1px 0 rgba(12,29,35,.04), 0 0 0 1px rgba(12,29,35,.05), 0 22px 48px rgba(12,29,35,.08);
  overflow: hidden;
  position: relative;
}
.k3-meta::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 4px;
  background: linear-gradient(90deg, var(--k3-teal), var(--k3-mint));
}
.k3-meta div,
.k3-meta div:nth-child(2),
.k3-meta div:nth-child(4) {
  transform: none;
  background: none;
  border-radius: 0;
  box-shadow: none;
  padding: 22px 22px 20px;
  gap: 6px;
}
.k3-meta div:nth-child(odd) { border-right: 1px solid var(--k3-lijn); }
.k3-meta div:nth-child(-n+2) { border-bottom: 1px solid var(--k3-lijn); }
.k3-meta dt {
  font-size: .68rem;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--k3-koraal);
}
.k3-meta dd { font-size: 1rem; color: var(--k3-nacht); }
.k3-meta a { text-decoration: none; overflow-wrap: anywhere; border-bottom: 1.5px solid rgba(10,90,80,.3); transition: border-color .2s; }
.k3-meta a:hover { border-color: var(--k3-teal); }
@media (max-width: 1080px) {
  .k3-meta div:nth-child(odd), .k3-meta div:nth-child(-n+2) { border: 0; }
  .k3-meta div:not(:last-child) { border-right: 1px solid var(--k3-lijn); }
}
@media (max-width: 760px) {
  .k3-meta div, .k3-meta div:not(:last-child) { border: 0; }
  .k3-meta div:nth-child(odd) { border-right: 1px solid var(--k3-lijn); }
  .k3-meta div:nth-child(-n+2) { border-bottom: 1px solid var(--k3-lijn); }
  .k3-meta div { padding: 18px 16px 16px; }
}

/* "Wat het opleverde": een langzaam drijvende mint-gloed, lijnen die zich
   tekenen, getallen die optellen (cases-v3.js) en een ring bij scores. */
.k3-winst::after {
  content: "";
  position: absolute;
  right: -18%;
  top: -55%;
  width: 62%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(143,214,202,.24), transparent 62%);
  animation: k3Gloed 18s ease-in-out infinite alternate;
  pointer-events: none;
}
@keyframes k3Gloed { from { transform: translate(0, 0); } to { transform: translate(-38%, 46%); } }
.k3-winst > * { position: relative; z-index: 1; }
.k3-winst__getal { position: relative; border-top: 0; padding-top: 26px; }
.k3-winst__getal::before,
.k3-winst__getal::after { content: ""; position: absolute; top: 0; left: 0; right: 0; border-radius: 2px; }
.k3-winst__getal::before { height: 1px; background: rgba(245,241,232,.22); }
.k3-winst__getal::after {
  top: -1px;
  height: 3px;
  background: var(--k3-mint);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 1.3s var(--k3-ease) calc(.25s + var(--i, 0) * .15s);
}
.k3-winst.is-in .k3-winst__getal::after { transform: scaleX(1); }
.k3-winst__getal b { font-variant-numeric: tabular-nums; }
.k3-winst__ring { position: absolute; top: 26px; right: 0; width: 64px; height: 64px; transform: rotate(-90deg); }
.k3-winst__ring circle { fill: none; stroke-width: 5; }
.k3-winst__ring .baan { stroke: rgba(245,241,232,.14); }
.k3-winst__ring .vul {
  stroke: var(--k3-mint);
  stroke-linecap: round;
  stroke-dasharray: 163.4;
  stroke-dashoffset: 163.4;
  transition: stroke-dashoffset 1.6s var(--k3-ease) calc(.4s + var(--i, 0) * .15s);
}
.k3-winst.is-in .k3-winst__ring .vul { stroke-dashoffset: calc(163.4 - 163.4 * var(--pct, 0) / 100); }
@media (prefers-reduced-motion: reduce) {
  .k3-winst::after { animation: none; }
  .k3-winst__getal::after { transform: scaleX(1); transition: none; }
  .k3-winst__ring .vul { transition: none; stroke-dashoffset: calc(163.4 - 163.4 * var(--pct, 0) / 100); }
}

/* Case-overzicht: "Bekijk" niet meer als grote donkere bol in het midden,
   maar als koraal pilletje dat bij hover in de hoek oplicht, met een zachte
   koraalgloed vanuit die hoek. */
.k3-kaart__beeld::before {
  content: "";
  position: absolute;
  right: 0;
  top: 0;
  width: 70%;
  aspect-ratio: 1;
  background: radial-gradient(circle at 100% 0%, rgba(229,107,76,.32), rgba(229,107,76,.08) 38%, transparent 62%);
  opacity: 0;
  transition: opacity .5s var(--k3-ease);
  pointer-events: none;
  z-index: 1;
}
.k3-kaart__knop {
  left: auto;
  top: 18px;
  right: 18px;
  width: auto;
  height: auto;
  margin: 0;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 9px 14px 9px 16px;
  border-radius: 100px;
  background: var(--k3-koraal);
  color: #FFFDF8;
  font-size: .82rem;
  letter-spacing: .01em;
  box-shadow: 0 10px 24px rgba(194,78,51,.32);
  transform: translate(10px, -10px) scale(.92);
  opacity: 0;
  transition: transform .45s var(--k3-ease), opacity .3s ease;
}
.k3-kaart__knop::after { content: "\2197"; font-size: .95em; transition: transform .3s var(--k3-ease); }
@media (hover: hover) {
  .k3-kaart:hover .k3-kaart__beeld::before { opacity: 1; }
  .k3-kaart:hover .k3-kaart__knop { transform: none; opacity: 1; }
  .k3-kaart:hover .k3-kaart__knop::after { transform: translate(2px, -2px); }
}
.k3-kaart:focus-visible .k3-kaart__beeld::before { opacity: 1; }
.k3-kaart:focus-visible .k3-kaart__knop { transform: none; opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  .k3-kaart__knop, .k3-kaart__beeld::before { transition: none; }
}
/* Fotoknop i.p.v. de oude mobiele balk: geen extra ruimte onderaan meer nodig. */
@media (max-width: 900px) {
  body.k3:has(.foto-contact) { padding-bottom: 0; }
}

/* ---------- 18 okt 2026: kop als verhaalzin, hero desktop + iPhone, SEO-sectie ---------- */
.k3-chero .k3-eyebrow b { font-weight: 700; color: var(--k3-nacht); }
.k3-chero h1.k3-h--verhaal {
  font-size: clamp(2.1rem, 4.1vw, 4.1rem);
  font-weight: 600;
  letter-spacing: -.022em;
  line-height: 1.06;
  max-width: 21ch;
  hyphens: manual;
  text-wrap: balance;
}
.k3-h--verhaal em { font-style: normal; color: var(--k3-teal); }

.k3-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Hero: desktop-screenshot met een iPhone-mockup ervoor, rechtsonder overlappend. */
.k3-chero__beeld--duo { padding: clamp(32px, 4.4vw, 70px) clamp(18px, 4vw, 80px) clamp(40px, 5vw, 80px); }
.k3-duo { position: relative; max-width: 1180px; margin: 0 auto; padding-right: clamp(40px, 9vw, 150px); }
.k3-duo__desktop { position: relative; border-radius: 16px; }
.k3-duo__desktop img { display: block; width: 100%; height: auto; }
.k3-duo__telefoon {
  position: absolute;
  right: 0;
  bottom: clamp(-34px, -2.6vw, -18px);
  width: clamp(150px, 20%, 250px);
  z-index: 2;
}
.k3-iphone {
  position: relative;
  border-radius: 15% / 7%;
  padding: 3.6%;
  background: linear-gradient(145deg, #2A2D31, #0B0C0E 55%, #23262A);
  box-shadow: 0 0 0 1.5px #3A3E44 inset, 0 40px 70px -20px rgba(0,0,0,.6), 0 18px 30px rgba(0,0,0,.28);
}
.k3-iphone img { display: block; width: 100%; height: auto; border-radius: 12% / 5.6%; }
.k3-iphone__eiland {
  position: absolute;
  top: 5.4%;
  left: 50%;
  width: 30%;
  height: 3.1%;
  transform: translateX(-50%);
  border-radius: 999px;
  background: #060708;
  z-index: 1;
}
@media (max-width: 760px) {
  .k3-duo { padding-right: 22%; }
  .k3-duo__telefoon { width: 34%; bottom: -22px; }
}

/* SEO-sectie (alleen doorlopende SEO-klanten): waarom links, de vijf vaste
   onderdelen rechts als genummerde kaartjes. */
.k3-seo {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(28px, 4vw, 64px);
  background: linear-gradient(160deg, #FBF8F2 0%, #F1F6F3 100%);
}
.k3-seo__kop h2 { margin: 16px 0 20px; }
.k3-paneel p.k3-seo__waarom { font-size: 1.08rem; }
.k3-paneel p.k3-seo__pakket { display: grid; gap: 10px; margin-top: 22px; font-size: .95rem; color: var(--k3-zacht); }
.k3-seo__pakket span { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; color: var(--k3-teal); }
.k3-seo__pakket span::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--k3-mint); box-shadow: 0 0 0 4px rgba(143,214,202,.3); }
.k3-seo__pakket a { color: var(--k3-koraal); font-weight: 600; text-decoration: none; }
.k3-seo__pakket a:hover { text-decoration: underline; }
.k3-seo__stappen { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; align-content: start; }
.k3-seo__stappen li {
  position: relative;
  background: #FFFDF8;
  border-radius: var(--k3-r-s);
  padding: 20px 20px 18px;
  box-shadow: 0 1px 0 rgba(12,29,35,.04), 0 0 0 1px rgba(12,29,35,.05);
}
.k3-seo__stappen li:last-child { grid-column: 1 / -1; background: var(--k3-teal); }
.k3-seo__stappen li:last-child b, .k3-seo__stappen li:last-child p { color: #F5F1E8; }
.k3-seo__stappen li:last-child .k3-seo__nr { color: var(--k3-mint); }
.k3-seo__nr { display: block; font: 700 .74rem/1 var(--sc-font-text); letter-spacing: .12em; color: var(--k3-koraal); margin-bottom: 10px; }
.k3-seo__stappen b { display: block; font-family: var(--sc-font-display); font-weight: 600; font-size: 1.08rem; color: var(--k3-nacht); margin-bottom: 6px; }
.k3-paneel .k3-seo__stappen p { margin: 0; font-size: .93rem; line-height: 1.55; color: #4A463E; }
@media (max-width: 1080px) {
  .k3-seo { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .k3-seo__stappen { grid-template-columns: 1fr; }
}

/* ---------- 18 okt 2026: voor en na als kaarten, meer cases, afsluiter ---------- */
/* Voor en na: per verbeterpunt een kaart. Boven de oude situatie (gedempt,
   kruisje), op de naad een pijlbadge, onder de nieuwe situatie (vinkje). */
.k3-vn2 { list-style: none; margin: 30px 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; counter-reset: vn; }
.k3-vn2__kaart { position: relative; display: grid; border-radius: var(--k3-r-m); overflow: hidden; box-shadow: 0 1px 0 rgba(12,29,35,.04), 0 0 0 1px rgba(12,29,35,.06), 0 18px 40px -24px rgba(12,29,35,.35); }
.k3-vn2__voor, .k3-vn2__na { display: grid; grid-template-columns: 34px 1fr; gap: 14px; align-items: start; padding: 22px 24px; }
.k3-vn2__voor { background: #EFE9DE; padding-bottom: 30px; }
.k3-vn2__na { background: #FFFDF8; padding-top: 30px; }
.k3-vn2__ic { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; }
.k3-vn2__ic svg { width: 18px; height: 18px; fill: none; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.k3-vn2__voor .k3-vn2__ic { background: rgba(194,78,51,.12); }
.k3-vn2__voor .k3-vn2__ic svg { stroke: var(--k3-koraal); }
.k3-vn2__na .k3-vn2__ic { background: var(--k3-teal); }
.k3-vn2__na .k3-vn2__ic svg { stroke: #F5F1E8; }
.k3-vn2 small { display: block; font: 600 .7rem/1 var(--sc-font-text); letter-spacing: .14em; text-transform: uppercase; margin-bottom: 6px; }
.k3-vn2__voor small { color: var(--k3-zacht); }
.k3-vn2__na small { color: var(--k3-teal); }
.k3-paneel .k3-vn2 p { margin: 0; max-width: none; }
.k3-paneel .k3-vn2__voor p { font-size: .98rem; line-height: 1.5; color: #6B655A; text-decoration: line-through; text-decoration-color: rgba(194,78,51,.45); text-decoration-thickness: 1.5px; }
.k3-paneel .k3-vn2__na p { font-family: var(--sc-font-display); font-weight: 600; font-size: 1.15rem; line-height: 1.3; color: var(--k3-nacht); }
.k3-vn2__pijl {
  position: relative; z-index: 2; justify-self: center; margin: -18px 0;
  width: 36px; height: 36px; border-radius: 50%;
  background: var(--k3-mint); display: grid; place-items: center;
  box-shadow: 0 0 0 5px #FFFDF8, 0 8px 18px rgba(12,29,35,.18);
}
.k3-vn2__pijl svg { width: 18px; height: 18px; fill: none; stroke: var(--k3-nacht); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.k3-vn2__kaart { grid-template-rows: 1fr auto auto; }
@media (max-width: 760px) {
  .k3-vn2 { grid-template-columns: 1fr; }
}

/* Meer cases: twee compacte kaarten naast elkaar */
.k3-meer { max-width: 1180px; margin: 0 auto; }
.k3-meer__kop { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin-bottom: 18px; }
.k3-meer__kop a { color: var(--k3-teal); font-weight: 600; font-size: .95rem; text-decoration: none; }
.k3-meer__kop a:hover { text-decoration: underline; }
.k3-meer__kaarten { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.k3-mini {
  display: grid; grid-template-columns: 38% 1fr; align-items: stretch;
  background: var(--k3-papier); border-radius: var(--k3-r-m); overflow: hidden; text-decoration: none; color: inherit;
  box-shadow: 0 1px 0 rgba(12,29,35,.04), 0 0 0 1px rgba(12,29,35,.06);
  transition: transform .3s var(--k3-ease), box-shadow .3s var(--k3-ease);
}
.k3-mini:hover { transform: translateY(-4px); box-shadow: 0 1px 0 rgba(12,29,35,.04), 0 0 0 1px rgba(10,90,80,.25), 0 22px 44px -22px rgba(12,29,35,.4); }
.k3-mini figure { margin: 0; overflow: hidden; background: var(--k3-wash); min-height: 170px; }
.k3-mini img { width: 100%; height: 100%; object-fit: cover; object-position: top; display: block; transition: transform .6s var(--k3-ease); }
.k3-mini:hover img { transform: scale(1.05); }
.k3-mini__tekst { display: flex; flex-direction: column; gap: 6px; padding: 20px 22px; }
.k3-mini small { font-size: .78rem; color: var(--k3-zacht); }
.k3-mini strong { font-family: var(--sc-font-display); font-weight: 600; font-size: 1.25rem; line-height: 1.15; color: var(--k3-nacht); }
.k3-mini__res { font-size: .88rem; color: #4A463E; }
.k3-mini__res b { font-family: var(--sc-font-display); font-size: 1.1rem; color: var(--k3-teal); margin-right: 4px; }
.k3-mini em { margin-top: auto; padding-top: 8px; font-style: normal; font-weight: 600; font-size: .9rem; color: var(--k3-koraal); }
.k3-mini em span { display: inline-block; transition: transform .3s var(--k3-ease); }
.k3-mini:hover em span { transform: translateX(4px); }
@media (max-width: 760px) {
  .k3-meer__kaarten { grid-template-columns: 1fr; }
  .k3-mini { grid-template-columns: 34% 1fr; }
  .k3-mini figure { min-height: 140px; }
}

/* Afsluiter: gecentreerd */
.k3-eind {
  max-width: 880px; margin: 0 auto; text-align: center;
  background: radial-gradient(80% 120% at 50% 0%, rgba(14,147,132,.28), transparent 60%), var(--k3-nacht);
  color: #F5F1E8; border-radius: var(--k3-r); padding: clamp(40px, 6vw, 80px) clamp(24px, 5vw, 64px);
  display: grid; justify-items: center; gap: 16px;
}
.k3-eind .k3-eyebrow { color: var(--k3-mint); }
.k3-eind h2 { color: #F5F1E8; font-size: clamp(2rem, 4vw, 3.4rem); font-weight: 600; letter-spacing: -.02em; margin: 0; text-wrap: balance; }
.k3-eind p { margin: 0; max-width: 46ch; color: rgba(245,241,232,.78); font-size: 1.08rem; line-height: 1.6; }
.k3-eind__knoppen { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 10px; }
.k3-knop--rand { background: transparent !important; color: #F5F1E8 !important; box-shadow: inset 0 0 0 1.5px rgba(245,241,232,.4) !important; }
.k3-knop--rand:hover { box-shadow: inset 0 0 0 1.5px #F5F1E8 !important; }

/* Scores (18 okt 2026): vier Lighthouse-ringen plus een rij meetwaarden */
.k3-scores__ringen { grid-template-columns: repeat(4, minmax(0, 1fr)); max-width: 820px; }
.k3-scores__maten { list-style: none; margin: 30px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; max-width: 820px; }
.k3-scores__maten li { display: grid; gap: 4px; padding: 16px 18px; border-radius: var(--k3-r-s); background: var(--k3-papier); box-shadow: 0 0 0 1px rgba(12,29,35,.06); }
.k3-scores__maten b { font-family: var(--sc-font-display); font-weight: 700; font-size: 1.5rem; line-height: 1; color: var(--k3-teal); font-variant-numeric: tabular-nums; }
.k3-scores__maten span { font-size: .84rem; line-height: 1.4; color: var(--k3-zacht); }
@media (max-width: 760px) {
  .k3-scores__ringen { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .k3-scores__maten { grid-template-columns: 1fr; }
}