/* designated-2026 · homepage: hero, van chaos naar grip, klanten, cases, reviews, insights. */
/* =====================================================================
   2. HERO (hero-varianten A, beeldmerk als venster)
   ===================================================================== */
#hero { position: relative; background: var(--navy); color: var(--ink); height: 210vh; } /* 19-10: was 280vh; groter beeldmerk, dus minder scroll nodig */
#hero .sticky { position: sticky; top: 0; height: 100vh; overflow: hidden; }
#hero .film { position: absolute; inset: 0; overflow: hidden; background: #0d2230 url('../../../../uploads/2024/06/Designated-Strategiesessie-scaled.webp') center / cover; }
#hero .film iframe { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); border: 0; pointer-events: none; }
#hero .kicker { font-family: "Fragment Mono", monospace; font-size: calc(12 * var(--u)); letter-spacing: .08em; text-transform: uppercase; color: var(--soft); display: flex; gap: calc(10 * var(--u)); align-items: center; }
#hero .kicker i { width: calc(7 * var(--u)); height: calc(7 * var(--u)); border-radius: 50%; background: var(--lime); }
#hero .h { font-weight: 700; letter-spacing: -.05em; line-height: .9; } /* 19-10 variant B: was 800, -.065em, .86 */
#hero .h em { font-family: "Instrument Serif", serif; font-style: italic; font-weight: 400; letter-spacing: -.02em; color: var(--lime); }
#hero .h .ln { display: block; overflow: hidden; padding: 0 .14em .22em .14em; margin: 0 -.14em -.22em -.14em; } /* ruimte links, rechts en onder: cursieve g, j, p en de laatste letter steken buiten de regel, anders knipt het masker ze af */
#hero .h .ln > span { display: inline-block; transform: translateY(135%); transition: transform 1.1s cubic-bezier(.2,.8,.2,1); }
#hero .ready .h .ln > span { transform: none; }
#hero .h .ln:nth-child(2) > span { transition-delay: .12s; }
#hero .btn { display: inline-flex; gap: calc(12 * var(--u)); align-items: center; background: var(--lime); color: var(--navy); text-decoration: none; font-weight: 700; font-size: calc(15 * var(--u)); padding: calc(8 * var(--u)) calc(8 * var(--u)) calc(8 * var(--u)) calc(20 * var(--u)); border-radius: calc(999 * var(--u)); }
#hero .btn .arr { width: calc(34 * var(--u)); height: calc(34 * var(--u)); border-radius: 50%; background: var(--navy); color: var(--lime); display: grid; place-items: center; transition: transform .3s; }
#hero .btn:hover .arr { transform: rotate(-45deg); }
#hero .lead { color: var(--soft); font-size: calc(17 * var(--u)); max-width: 40ch; line-height: 1.45; }
#hero .scrollhint { position: absolute; z-index: 6; right: var(--rand); bottom: var(--pad); font-family: "Fragment Mono", monospace; font-size: calc(11 * var(--u)); letter-spacing: .08em; text-transform: uppercase; color: var(--soft); display: flex; gap: calc(10 * var(--u)); align-items: center; }
#hero .scrollhint i { width: 1px; height: calc(34 * var(--u)); background: var(--line); position: relative; overflow: hidden; }
#hero .scrollhint i::after { content: ""; position: absolute; left: 0; top: -40%; width: 1px; height: 40%; background: var(--lime); animation: heroDrop 1.8s ease-in-out infinite; }
@keyframes heroDrop { to { top: 100%; } }
#hero .fade-in { opacity: 0; transform: translateY(calc(16 * var(--u))); transition: opacity .9s ease .5s, transform 1s cubic-bezier(.2,.8,.2,1) .5s; }
#hero .ready .fade-in { opacity: 1; transform: none; }
/* 19-10 variant F: geen navy vlak meer, maar een overlay over de hele video (40%, trekt weg tijdens het scrollen) en het beeldmerk als witte lijn */
#hero .overlay { position: absolute; inset: 0; z-index: 1; pointer-events: none; background: var(--navy); opacity: calc(.4 * var(--ov, 1)); }
#hero .veil { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1; pointer-events: none; }
#hero .shade { position: absolute; inset: 0; z-index: 2; pointer-events: none; background: linear-gradient(25deg, rgba(10,29,41,.9) 0%, rgba(10,29,41,.4) 40%, transparent 62%); opacity: var(--shade, 1); }
#hero .copy { position: absolute; z-index: 3; left: var(--rand); bottom: calc(var(--pad) * 2); max-width: min(calc(1250 * var(--u)), 86vw); opacity: var(--shade, 1); transition: transform .7s var(--ease), filter .5s; }
/* Menu open: kop wijkt, zoals .stage.open .copy in het megamenu-bestand */
#site.open ~ #hero .copy { opacity: calc(var(--shade, 1) * .22); transform: translateY(calc(14 * var(--u))); filter: blur(calc(3 * var(--u))); }
#hero .copy .h { font-size: clamp(calc(50 * var(--u)), min(8.9vw, calc(128 * var(--u))), calc(174 * var(--u))); /* 19-10: was 56 / 10vw / 144 / 196 */ margin: calc(20 * var(--u)) 0 calc(28 * var(--u)); }
#hero .row { display: flex; gap: calc(22 * var(--u)); align-items: center; flex-wrap: wrap; }

/* =====================================================================
   3. VAN CHAOS NAAR GRIP (concept 9, #chaos binnen .light)
   ===================================================================== */
.chaos-wrap { background: var(--light); color: var(--ink-dark); position: relative; overflow-x: clip; }
/* Lager dan het scherm en zonder vastzetten: de chips bewegen al tijdens het inscrollen
   (start als de kop een stukje in beeld is, klaar net boven het midden; zie 'late' in de JS) */
#chaos { --h: max(68vh, calc(560 * var(--u))); height: var(--h); position: relative; }
#chaos .sticky { position: sticky; top: 0; height: var(--h); overflow: hidden; display: flex; align-items: center; justify-content: center; }
#chaos .msg { position: relative; z-index: 2; text-align: center; max-width: 20ch; font-weight: 700; font-size: clamp(calc(38 * var(--u)), min(5vw, calc(72 * var(--u))), calc(88 * var(--u))); line-height: .92; letter-spacing: -.055em; }
#chaos .msg em { font-family: "Instrument Serif", serif; font-style: italic; font-weight: 400; letter-spacing: -.01em; }
/* Label boven de boodschap: absoluut, zodat de hoogte van .msg (en dus de animatie) gelijk blijft */
#chaos .msg .lbl { position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%); margin-bottom: calc(26 * var(--u)); white-space: nowrap; font-family: "Fragment Mono", monospace; font-size: calc(11 * var(--u)); font-weight: 400; line-height: 1; letter-spacing: .1em; text-transform: uppercase; display: inline-flex; gap: calc(9 * var(--u)); align-items: center; color: var(--soft-dark); }
#chaos .msg .lbl i { width: calc(7 * var(--u)); height: calc(7 * var(--u)); border-radius: 50%; background: var(--lime); display: inline-block; }
#chaos .ghost { position: absolute; z-index: 0; right: -14vw; top: 50%; width: min(70vw, var(--h) * .95); /* past binnen de lagere kaart, anders een harde rand */ transform: translateY(-50%) rotate(var(--rot, 0deg)); color: rgba(10,29,41,.05); }
#chaos .chip { position: absolute; z-index: 1; left: 50%; top: 50%; white-space: nowrap; font-size: calc(15 * var(--u)); font-weight: 500; padding: calc(12 * var(--u)) calc(16 * var(--u)); border-radius: calc(999 * var(--u));
  border: 1px solid rgba(10,29,41,.12); background: #fff; color: var(--ink-dark); box-shadow: 0 calc(8 * var(--u)) calc(30 * var(--u)) rgba(10,29,41,.08); display: flex; gap: calc(8 * var(--u)); }
#chaos .chip::after { content: "↗"; opacity: .5; display: inline-block; transition: opacity .3s, transform .45s var(--ease); }
/* Kaartjes linken door (03-11). Hover alleen in kleur en pijl: de JS zet de transform van het kaartje zelf, en de tekst verspringt niet */
#chaos a.chip { text-decoration: none; cursor: pointer; transition: background-color .3s, border-color .3s, box-shadow .3s; }
#chaos a.chip:hover, #chaos a.chip:focus-visible { background: var(--lime); border-color: var(--lime); color: var(--navy); box-shadow: 0 calc(10 * var(--u)) calc(34 * var(--u)) rgba(10,29,41,.14); }
#chaos a.chip:hover::after, #chaos a.chip:focus-visible::after { opacity: 1; transform: translate(calc(2 * var(--u)), calc(-2 * var(--u))); }
#chaos a.chip:focus-visible { outline: 2px solid var(--navy); outline-offset: 2px; }

/* =====================================================================
   3b. KLANTLOGO'S (klantlogos-varianten B, lopende band) op licht, onder van chaos naar grip
   ===================================================================== */
#klanten { background: var(--light); color: var(--ink-dark); padding: calc(6 * var(--u)) 0 calc(64 * var(--u)); }
#klanten .lbl { font-family: "Fragment Mono", monospace; font-size: calc(11 * var(--u)); letter-spacing: .1em; text-transform: uppercase; display: flex; justify-content: center; gap: calc(9 * var(--u)); align-items: center; color: var(--soft-dark); margin-bottom: calc(26 * var(--u)); }
#klanten .lbl i { width: calc(7 * var(--u)); height: calc(7 * var(--u)); border-radius: 50%; background: var(--lime); display: inline-block; }
#klanten .band { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); }
/* De rij staat er twee keer in (de tweede via JS), zodat -50% naadloos aansluit */
#klanten .track { display: flex; align-items: center; gap: calc(76 * var(--u)); width: max-content; padding-right: calc(76 * var(--u)); animation: klanten 60s linear infinite; }
#klanten .band:hover .track { animation-play-state: paused; }
@keyframes klanten { to { transform: translateX(-50%); } }
/* In rust grijs, bij hover in de kleuren van de klant */
#klanten .logo { display: grid; place-items: center; flex: none; }
#klanten .logo img { display: block; height: var(--h); width: auto; filter: grayscale(1); opacity: .5; transition: filter .5s ease, opacity .5s ease, transform .6s var(--ease); }
#klanten .logo:hover img, #klanten .logo:focus-visible img { filter: none; opacity: 1; }
@media (max-width: 760px) { #klanten .track { gap: calc(48 * var(--u)); padding-right: calc(48 * var(--u)); } #klanten .logo img { height: calc(var(--h) * .8); } }

/* =====================================================================
   4. CASES (cases-varianten A, stapel), sectie op navy
   ===================================================================== */
#cases { background: var(--light); color: var(--ink-dark); padding: calc(60 * var(--u)) var(--rand) 0; margin-bottom: -1px; } /* 19-10: op licht, was navy. 03-11: onderaan geen padding, de reviews hebben hun eigen ruimte boven; -1px overlap, anders schijnt de navy body bij een halve pixel als lijn door */
#cases .lbl { font-family: "Fragment Mono", monospace; font-size: calc(11 * var(--u)); letter-spacing: .1em; text-transform: uppercase; display: inline-flex; gap: calc(9 * var(--u)); align-items: center; color: var(--soft); }
#cases .lbl i { width: calc(7 * var(--u)); height: calc(7 * var(--u)); border-radius: 50%; background: var(--lime); display: inline-block; }
#cases .h { font-weight: 700; letter-spacing: -.05em; line-height: .88; }
#cases .h em { font-family: "Instrument Serif", serif; font-style: italic; font-weight: 400; letter-spacing: -.02em; }
#cases .sec-top .h em { color: var(--ink-dark); } /* op licht navy cursief, limoen haalt geen contrast */
#cases .sec-top .lbl { color: var(--soft-dark); }
#cases .h .ln { display: block; overflow: hidden; padding: 0 .14em .22em .14em; margin: 0 -.14em -.22em -.14em; } /* ruimte links, rechts en onder: cursieve g, j, p en de laatste letter steken buiten de regel, anders knipt het masker ze af */
#cases .h .ln > span { display: inline-block; transform: translateY(135%); transition: transform 1.1s cubic-bezier(.2,.8,.2,1); }
#cases .h.in .ln > span { transform: none; }
#cases .h .ln:nth-child(2) > span { transition-delay: .12s; }
#cases .link { color: inherit; text-decoration: none; font-size: calc(15 * var(--u)); font-weight: 500; border-bottom: 1px solid color-mix(in srgb, currentColor 35%, transparent); padding-bottom: 2px; opacity: .8; white-space: nowrap; }
#cases .glass { border: 1px solid rgba(255,255,255,.2); background: linear-gradient(135deg, rgba(255,255,255,.16), rgba(255,255,255,.05)); backdrop-filter: blur(calc(22 * var(--u))) saturate(150%); -webkit-backdrop-filter: blur(calc(22 * var(--u))) saturate(150%); box-shadow: 0 calc(16 * var(--u)) calc(50 * var(--u)) rgba(0,0,0,.28); }
/* Glas over licht beeld: met een navy ondertoon, zodat witte cijfers leesbaar blijven */
#cases .scard .panel { background: linear-gradient(135deg, rgba(10,29,41,.42), rgba(10,29,41,.22)); }
#cases .num { font-weight: 700; letter-spacing: -.06em; line-height: .85; }
#cases .media { position: absolute; inset: 0; overflow: hidden; background: #0d2230 center / cover no-repeat; }
#cases .media iframe { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); border: 0; pointer-events: none; }
#cases .media .shade { position: absolute; inset: 0; z-index: 1; }
#cases .sec-top { display: flex; justify-content: space-between; align-items: end; gap: calc(24 * var(--u)); margin-bottom: calc(56 * var(--u)); }
#cases .sec-top .h { font-size: clamp(calc(44 * var(--u)), min(6vw, calc(86.4 * var(--u))), calc(108 * var(--u))); margin-top: calc(18 * var(--u)); }
#cases .stack { position: relative; }
#cases .scard { position: sticky; height: min(78vh, calc(760 * var(--u))); border-radius: var(--r); overflow: hidden; color: var(--ink); margin-bottom: 0; transform-origin: 50% 0; will-change: transform; box-shadow: 0 calc(-8 * var(--u)) calc(40 * var(--u)) rgba(10,29,41,.14); }
/* Stapel (03-11, feedback Tim): alle kaarten hebben dezelfde top (inline, 90px), dus elke kaart landt op exact dezelfde plek.
   Geen margin-bottom en geen rustruimte na de laatste kaart: zodra die landt, laat de hele stapel samen los en
   schuift door naar de reviews, zonder dode scrollruimte. De laatste kaart schaalt tijdens het wegschuiven mee (home.js). */
#cases .scard + .scard { margin-top: 7vh; }
#cases .scard .shade { background: linear-gradient(20deg, rgba(10,29,41,.92) 0%, rgba(10,29,41,.5) 42%, rgba(10,29,41,.05) 75%); }
#cases .scard .dim { position: absolute; inset: 0; z-index: 3; background: var(--navy); opacity: 0; pointer-events: none; }
#cases .scard .meta { position: absolute; z-index: 2; top: calc(26 * var(--u)); left: calc(28 * var(--u)); display: flex; gap: calc(16 * var(--u)); align-items: center; flex-wrap: wrap; }
#cases .scard .meta .count { font-family: "Fragment Mono", monospace; font-size: calc(12 * var(--u)); color: var(--soft); }
#cases .scard .meta b { font-size: calc(18 * var(--u)); font-weight: 700; letter-spacing: -.02em; }
#cases .scard .meta .lbl { color: var(--soft); }
#cases .scard .body { position: absolute; z-index: 2; left: calc(28 * var(--u)); right: calc(28 * var(--u)); bottom: calc(28 * var(--u)); display: grid; grid-template-columns: 1.4fr 1fr; gap: calc(28 * var(--u)); align-items: end; }
#cases .scard h3 { font-size: clamp(calc(34 * var(--u)), min(4.2vw, calc(60.48 * var(--u))), calc(72 * var(--u))); }
#cases .scard .panel { border-radius: calc(var(--r) * .8); padding: calc(22 * var(--u)); display: flex; flex-direction: column; gap: calc(22 * var(--u)); }
#cases .scard .stats { display: grid; grid-template-columns: 1fr 1fr; gap: calc(18 * var(--u)); }
#cases .scard .stats .num { font-size: clamp(calc(40 * var(--u)), min(3.6vw, calc(51.84 * var(--u))), calc(62 * var(--u))); }
#cases .scard .stats span { display: block; margin-top: calc(8 * var(--u)); font-size: calc(13 * var(--u)); color: var(--soft); }
#cases .scard .panel .row { display: flex; justify-content: space-between; align-items: center; gap: calc(12 * var(--u)); padding-top: calc(16 * var(--u)); border-top: 1px solid var(--line); font-size: calc(14 * var(--u)); color: var(--soft); }
#cases .scard .go-case { color: var(--ink); font-weight: 600; white-space: nowrap; text-decoration: underline; text-decoration-color: transparent; text-underline-offset: calc(4 * var(--u)); transition: text-decoration-color .3s; }
#cases .scard .go-case .arr { display: inline-block; transition: transform .45s var(--ease); }
/* Hele kaart klikbaar: één link over de kaart heen (19-10) */
#cases .scard .hit { position: absolute; inset: 0; z-index: 2; border-radius: inherit; }
#cases .scard .hit:focus-visible { outline: 2px solid var(--lime); outline-offset: calc(-6 * var(--u)); }
#cases .scard .media { transition: transform 1.4s var(--ease); }
#cases .scard:hover .media { transform: scale(1.04); }
#cases .scard:hover .go-case { text-decoration-color: currentColor; }
#cases .scard:hover .go-case .arr { transform: rotate(-45deg); }
/* Cursor boven een casekaart: limoen badge met draaiende tekst, loopt mee en rekt uit in de bewegingsrichting */
#cases.cc .scard .hit { cursor: none; }
.case-cursor { position: fixed; z-index: 80; left: 0; top: 0; width: calc(132 * var(--u)); height: calc(132 * var(--u)); margin: calc(-66 * var(--u)) 0 0 calc(-66 * var(--u)); pointer-events: none; will-change: transform; }
.case-cursor .pop { width: 100%; height: 100%; transform: scale(0); opacity: 0; transition: transform .55s var(--ease), opacity .25s; }
.case-cursor.on .pop { transform: scale(1); opacity: 1; }
.case-cursor.on.down .pop { transform: scale(.86); transition-duration: .2s; }
.case-cursor .sq { width: 100%; height: 100%; border-radius: 50%; background: var(--lime); color: var(--navy); display: grid; place-items: center; box-shadow: 0 calc(18 * var(--u)) calc(50 * var(--u)) rgba(10,29,41,.35); }
.case-cursor svg { grid-area: 1 / 1; width: 100%; height: 100%; animation: case-ring 9s linear infinite; }
.case-cursor text { font-family: "Fragment Mono", monospace; font-size: 9.6px; letter-spacing: .1em; text-transform: uppercase; fill: currentColor; }
.case-cursor .arr { grid-area: 1 / 1; font-size: calc(30 * var(--u)); line-height: 1; transform: rotate(-45deg); transition: transform .5s var(--ease); }
.case-cursor.down .arr { transform: rotate(0deg); }
@keyframes case-ring { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .case-cursor svg { animation: none; } }
@media (max-width: 900px) { #cases .scard .body { grid-template-columns: 1fr; } #cases .scard { height: min(86vh, calc(100svh - calc(146 * var(--u)))); } }
@media (max-width: 600px) {
  /* Telefoon: kaart moet passen, dus kop en paneel iets compacter */
  #cases .sec-top { flex-wrap: wrap; }
  #cases .scard .meta { top: calc(20 * var(--u)); left: calc(20 * var(--u)); right: calc(20 * var(--u)); gap: calc(10 * var(--u)); }
  #cases .scard .body { left: calc(16 * var(--u)); right: calc(16 * var(--u)); bottom: calc(16 * var(--u)); gap: calc(16 * var(--u)); }
  #cases .scard .panel { padding: calc(18 * var(--u)); gap: calc(16 * var(--u)); }
  #cases .scard .panel .row { flex-wrap: wrap; }
}

/* =====================================================================
   5. REVIEWS (reviews-varianten C, bento op licht)
   ===================================================================== */
#reviews { background: var(--light); color: var(--ink-dark); padding: calc(120 * var(--u)) var(--rand); }
#reviews .lbl { font-family: "Fragment Mono", monospace; font-size: calc(11 * var(--u)); letter-spacing: .1em; text-transform: uppercase; display: inline-flex; gap: calc(9 * var(--u)); align-items: center; color: var(--soft-dark); }
#reviews .lbl i { width: calc(7 * var(--u)); height: calc(7 * var(--u)); border-radius: 50%; background: var(--lime); display: inline-block; }
#reviews .h { font-weight: 700; letter-spacing: -.05em; line-height: .88; }
#reviews .h em, #reviews .q em { font-family: "Instrument Serif", serif; font-style: italic; font-weight: 400; letter-spacing: -.015em; }
#reviews .h .ln { display: block; overflow: hidden; padding: 0 .14em .22em .14em; margin: 0 -.14em -.22em -.14em; } /* ruimte links, rechts en onder: cursieve g, j, p en de laatste letter steken buiten de regel, anders knipt het masker ze af */
#reviews .h .ln > span { display: inline-block; transform: translateY(135%); transition: transform 1.1s cubic-bezier(.2,.8,.2,1); }
#reviews.in .h .ln > span { transform: none; }
#reviews .h .ln:nth-child(2) > span { transition-delay: .1s; }
#reviews .rise { opacity: 0; transform: translateY(calc(40 * var(--u))) scale(.98); transition: opacity 1s ease, transform 1.2s cubic-bezier(.16,1,.3,1); transition-delay: calc(.2s + var(--i, 0) * .1s); }
#reviews.in .rise { opacity: 1; transform: none; }
#reviews .sec-top { display: flex; justify-content: space-between; align-items: end; gap: calc(24 * var(--u)); margin-bottom: calc(52 * var(--u)); flex-wrap: wrap; }
#reviews .sec-top .h { font-size: clamp(calc(44 * var(--u)), min(6vw, calc(86.4 * var(--u))), calc(108 * var(--u))); margin-top: calc(18 * var(--u)); }
#reviews .g { width: calc(20 * var(--u)); height: calc(20 * var(--u)); flex: none; }
#reviews .stars { color: #f2b01e; letter-spacing: 1px; font-size: calc(14 * var(--u)); }
#reviews .bento { display: grid; grid-template-columns: 1fr 1fr 1.1fr 1fr; grid-template-rows: calc(300 * var(--u)) calc(300 * var(--u)); gap: calc(14 * var(--u)); }
#reviews .bento > * { border-radius: var(--r); overflow: hidden; position: relative; }
#reviews .tile { background: #fff; border: 1px solid var(--line-light); padding: calc(26 * var(--u)); display: flex; flex-direction: column; justify-content: space-between; gap: calc(18 * var(--u)); }
#reviews .tile .q { font-weight: 700; font-size: calc(21 * var(--u)); letter-spacing: -.035em; line-height: 1.18; }
#reviews .tile .q em { color: var(--navy); }
#reviews .tile .who { display: flex; gap: calc(12 * var(--u)); align-items: center; font-size: calc(13 * var(--u)); color: var(--soft-dark); line-height: 1.35; }
#reviews .tile .who b { display: block; color: var(--ink-dark); font-size: calc(15 * var(--u)); }
#reviews .tile .who span.av { width: calc(42 * var(--u)); height: calc(42 * var(--u)); border-radius: 50%; background: center / cover no-repeat; flex: none; }
#reviews .tile .who span.ini { display: grid; place-items: center; background: var(--navy); color: var(--ink); font-weight: 700; font-size: calc(14 * var(--u)); letter-spacing: -.02em; }
#reviews .tile.score { background: var(--navy); color: var(--ink); border: 0; }
#reviews .tile.score .top { display: flex; justify-content: space-between; align-items: start; }
#reviews .tile.score .g { width: calc(38 * var(--u)); height: calc(38 * var(--u)); }
#reviews .tile.score .big { font-size: calc(104 * var(--u)); font-weight: 700; letter-spacing: -.07em; line-height: .8; }
#reviews .tile.score .stars { font-size: calc(20 * var(--u)); display: block; margin: calc(14 * var(--u)) 0 calc(6 * var(--u)); }
#reviews .tile.score small { color: var(--soft); font-size: calc(14 * var(--u)); }
/* 03-11: videoknoppen eruit (voorstel reviews-home). .vtile is een fototegel met citaat (Maaike, Laurens). De navy citaattegel .tq is weg sinds Laurens een portret heeft. */
#reviews .vtile { grid-row: span 2; background: #0d2230 center / cover no-repeat; }
@media (min-width: 1001px) { #reviews .vtile.v1 { background-size: auto 120%; background-position: 50% 100%; } } /* Maaike: iets ingezoomd, hoofd hoger in beeld (Tim 03-11) */
#reviews .vtile.lm { background-position: 50% 12%; } /* Laurens: gezicht hoog in beeld, zodat het in de lagere tegel (onder 1000px) niet onder het citaat valt */
#reviews .vtile::after { content: ""; position: absolute; inset: 0; z-index: 2; background: linear-gradient(0deg, rgba(10,29,41,.92), rgba(10,29,41,.25) 55%, transparent); }
#reviews .vtile .txt { position: absolute; z-index: 3; left: calc(26 * var(--u)); right: calc(26 * var(--u)); bottom: calc(26 * var(--u)); color: var(--ink); }
#reviews .vtile .q { font-weight: 700; font-size: calc(26 * var(--u)); letter-spacing: -.04em; line-height: 1.1; }
#reviews .vtile .q em { color: var(--lime); }
#reviews .vtile .who { display: block; margin-top: calc(16 * var(--u)); font-size: calc(13 * var(--u)); color: var(--soft); }
#reviews .vtile .who b { display: block; color: var(--ink); font-size: calc(15 * var(--u)); }
#reviews .bento .s1 { grid-column: 1; grid-row: 1; }
#reviews .bento .v1 { grid-column: 2; grid-row: 1 / span 2; }
#reviews .bento .q1 { grid-column: 3; grid-row: 1; }
#reviews .bento .v2 { grid-column: 4; grid-row: 1 / span 2; }
#reviews .bento .q2 { grid-column: 1; grid-row: 2; }
#reviews .bento .q3 { grid-column: 3; grid-row: 2; }
@media (max-width: 1000px) { #reviews .bento { grid-template-columns: 1fr 1fr; grid-template-rows: none; } #reviews .bento > * { grid-column: auto !important; grid-row: auto !important; min-height: calc(280 * var(--u)); } #reviews .vtile { min-height: calc(480 * var(--u)) !important; } }
@media (max-width: 600px) { #reviews .bento { grid-template-columns: 1fr; } #reviews .bento > .tile:has(.q) { min-height: 0; justify-content: flex-start; gap: calc(26 * var(--u)); } } /* mobiel: citaat en persoon dicht op elkaar, geen lege witruimte (Tim 03-11) */

/* =====================================================================
   6. INZICHTEN (inzichten-varianten C, uitgelicht en kort) op licht, gekozen 08-10
   ===================================================================== */
#inzichten { --bg: var(--light); --fg: var(--navy); --soft: rgba(10,29,41,.58); --line: rgba(10,29,41,.12); --card: #fff; --card-b: rgba(10,29,41,.08); --chip: #e3e8eb; --chip-on: var(--navy); --chip-on-fg: #fff; --em: var(--navy);
  background: var(--bg); color: var(--fg); padding: calc(120 * var(--u)) var(--rand); }
#inzichten .lbl { font-family: "Fragment Mono", monospace; font-size: calc(11 * var(--u)); letter-spacing: .1em; text-transform: uppercase; display: inline-flex; gap: calc(9 * var(--u)); align-items: center; color: var(--soft); }
#inzichten .lbl i { width: calc(7 * var(--u)); height: calc(7 * var(--u)); border-radius: 50%; background: var(--lime); display: inline-block; }
#inzichten .h { font-weight: 700; letter-spacing: -.05em; line-height: .88; }
#inzichten .h em { font-family: "Instrument Serif", serif; font-style: italic; font-weight: 400; letter-spacing: -.015em; color: var(--em); }
#inzichten .h .ln { display: block; overflow: hidden; padding: 0 .14em .22em .14em; margin: 0 -.14em -.22em -.14em; } /* ruimte links, rechts en onder: cursieve g, j, p en de laatste letter steken buiten de regel, anders knipt het masker ze af */
#inzichten .h .ln > span { display: inline-block; transform: translateY(135%); transition: transform 1.1s cubic-bezier(.2,.8,.2,1); }
#inzichten.in .h .ln > span { transform: none; }
#inzichten .h .ln:nth-child(2) > span { transition-delay: .1s; }
#inzichten .rise { opacity: 0; transform: translateY(calc(40 * var(--u))) scale(.98); transition: opacity 1s ease, transform 1.2s cubic-bezier(.16,1,.3,1); transition-delay: calc(.2s + var(--i, 0) * .08s); }
#inzichten.in .rise { opacity: 1; transform: none; }
#inzichten .sec-top { display: flex; justify-content: space-between; align-items: end; gap: calc(24 * var(--u)); margin-bottom: calc(52 * var(--u)); flex-wrap: wrap; }
#inzichten .sec-top .h { font-size: clamp(calc(44 * var(--u)), min(6vw, calc(86.4 * var(--u))), calc(108 * var(--u))); margin-top: calc(18 * var(--u)); }
#inzichten .meta { font-family: "Fragment Mono", monospace; font-size: calc(11 * var(--u)); letter-spacing: .08em; text-transform: uppercase; color: var(--soft); }
#inzichten .glass { border: 1px solid rgba(255,255,255,.22); background: linear-gradient(135deg, rgba(255,255,255,.18), rgba(255,255,255,.06)); backdrop-filter: blur(calc(18 * var(--u))) saturate(150%); -webkit-backdrop-filter: blur(calc(18 * var(--u))) saturate(150%); }
#inzichten .all { color: inherit; text-decoration: none; font-size: calc(15 * var(--u)); font-weight: 500; border-bottom: 1px solid var(--line); padding-bottom: calc(3 * var(--u)); white-space: nowrap; }
#inzichten .feat { display: grid; grid-template-columns: 1.35fr 1fr; gap: calc(var(--pad) * 1.4); align-items: stretch; }
#inzichten .big { position: relative; border-radius: var(--r); overflow: hidden; min-height: calc(560 * var(--u)); color: var(--ink); text-decoration: none; display: block; }
#inzichten .big img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s cubic-bezier(.2,.8,.2,1); }
#inzichten .big:hover img { transform: scale(1.05); }
#inzichten .big::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(10,29,41,.92) 0%, rgba(10,29,41,.4) 45%, transparent 75%); }
#inzichten .big .txt { position: absolute; z-index: 2; left: calc(28 * var(--u)); right: calc(28 * var(--u)); bottom: calc(28 * var(--u)); }
#inzichten .big .tag { display: inline-block; font-family: "Fragment Mono", monospace; font-size: calc(10 * var(--u)); letter-spacing: .08em; text-transform: uppercase; padding: calc(7 * var(--u)) calc(11 * var(--u)); border-radius: calc(999 * var(--u)); margin-bottom: calc(16 * var(--u)); }
#inzichten .big h3 { font-weight: 700; font-size: clamp(calc(34 * var(--u)), min(3.6vw, calc(51.84 * var(--u))), calc(60 * var(--u))); letter-spacing: -.055em; line-height: .98; max-width: 16ch; }
#inzichten .big h3 em { font-family: "Instrument Serif", serif; font-style: italic; font-weight: 400; letter-spacing: -.015em; color: var(--lime); }
#inzichten .big .sub { margin-top: calc(16 * var(--u)); display: flex; gap: calc(18 * var(--u)); align-items: center; color: rgba(244,242,238,.75); font-size: calc(15 * var(--u)); }
#inzichten .big .read { margin-left: auto; display: inline-flex; gap: calc(10 * var(--u)); align-items: center; font-weight: 700; font-size: calc(15 * var(--u)); color: var(--navy); background: var(--lime); padding: calc(12 * var(--u)) calc(18 * var(--u)); border-radius: calc(999 * var(--u)); }
#inzichten .side { display: flex; flex-direction: column; }
#inzichten .item { display: grid; grid-template-columns: calc(112 * var(--u)) 1fr; gap: calc(20 * var(--u)); align-items: center; padding: calc(22 * var(--u)) 0; border-bottom: 1px solid var(--line); color: inherit; text-decoration: none; }
#inzichten .item:first-child { padding-top: 0; }
#inzichten .item .th { aspect-ratio: 1; border-radius: calc(14 * var(--u)); overflow: hidden; }
#inzichten .item .th img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .7s cubic-bezier(.2,.8,.2,1); }
#inzichten .item:hover .th img { transform: scale(1.1); }
#inzichten .item h4 { font-weight: 700; font-size: calc(21 * var(--u)); letter-spacing: -.035em; line-height: 1.15; margin-top: calc(8 * var(--u)); text-decoration: underline; text-decoration-thickness: calc(1.5 * var(--u)); text-underline-offset: .14em; text-decoration-color: transparent; transition: text-decoration-color .3s; }
#inzichten .item:hover h4 { text-decoration-color: currentColor; }
#inzichten .news { margin-top: auto; padding-top: calc(26 * var(--u)); }
#inzichten .news p { font-weight: 700; font-size: calc(20 * var(--u)); letter-spacing: -.03em; margin-bottom: calc(14 * var(--u)); }
#inzichten .news form { display: flex; gap: calc(6 * var(--u)); padding: calc(6 * var(--u)); border-radius: calc(999 * var(--u)); background: var(--card); border: 1px solid var(--card-b); }
#inzichten .news input { flex: 1; font: inherit; font-size: calc(15 * var(--u)); border: 0; outline: 0; background: none; color: inherit; padding: 0 calc(14 * var(--u)); min-width: 0; }
#inzichten .news button { font: inherit; font-weight: 700; font-size: calc(14 * var(--u)); border: 0; border-radius: calc(999 * var(--u)); padding: calc(5 * var(--u)) calc(5 * var(--u)) calc(5 * var(--u)) calc(16 * var(--u)); background: var(--lime); color: var(--navy); cursor: pointer; }
@media (max-width: 960px) { #inzichten .feat { grid-template-columns: 1fr; } #inzichten .big { min-height: calc(440 * var(--u)); } }


@media (prefers-reduced-motion: reduce) {
  #hero .h .ln > span, #hero .fade-in, #cases .h .ln > span, #reviews .rise, #reviews .h .ln > span, #inzichten .rise, #inzichten .h .ln > span { opacity: 1 !important; transform: none !important; }
}

/* Cijfer dat nog akkoord van de klant nodig heeft */
#cases .num[data-ph] { opacity: .45; text-decoration: underline dotted; text-underline-offset: .12em; }


/* =====================================================================
   Lichte basis (28-10, sinds 02-11 standaard; body.zl, zie licht.css). De hero houdt de scrollanimatie
   met het beeldmerk als venster op de video (Tim 02-11; de lichte proefhero zonder animatie is weg).
   Het 4.9-blok wordt limoen in plaats van navy.
   ===================================================================== */
.zl #reviews .tile.score { background: var(--lime); color: var(--navy); }
.zl #reviews .tile.score .lbl, .zl #reviews .tile.score small { color: rgba(10,29,41,.66) !important; }

/* =====================================================================
   Mobiel (besluit Tim 02-11): geen scrollanimatie in de hero en in de menukaart. Desktop ongewijzigd.
   De JS (home.js) slaat beide animaties onder 760 px over; hier de vaste eindstand.
   ===================================================================== */
@media (max-width: 760px) {
  /* Hero: één scherm hoog, video met kop en knop direct en blijvend in beeld, geen sticky, geen beeldmerk */
  #hero { height: 100svh; min-height: calc(560 * var(--u)); }
  #hero .sticky { position: relative; height: 100%; }
  #hero .veil, #hero .scrollhint { display: none; }
  #hero .overlay { opacity: .4; }
  #hero .shade { opacity: 1; background: linear-gradient(0deg, rgba(10,29,41,.92) 0%, rgba(10,29,41,.55) 45%, rgba(10,29,41,.1) 80%); }
  #hero .copy { opacity: 1; bottom: calc(32 * var(--u)); right: var(--rand); max-width: none; }
  #site.open ~ #hero .copy { opacity: .22; }

  /* Menukaart: direct de nette eindstand, de pillen in rijen onder de boodschap */
  #chaos { height: auto; }
  #chaos .sticky { position: relative; height: auto; overflow: visible; flex-wrap: wrap; align-content: center; gap: calc(10 * var(--u)) calc(8 * var(--u)); padding: calc(110 * var(--u)) var(--rand) calc(64 * var(--u)); }
  #chaos .msg { flex: 0 0 100%; max-width: none; margin: 0 auto calc(22 * var(--u)); transform: none !important; }
  #chaos .chip { position: static; transform: none !important; font-size: calc(14.5 * var(--u)); padding: calc(10 * var(--u)) calc(14 * var(--u)); }
  #chaos .ghost { top: 0; transform: none; width: 90vw; right: -40vw; }
}