/* Volwassen laag: "serious platform, creative people" (besluit 21-09-2026, sitebreed sinds 22-09-2026). Base.astro laadt dit bestand
   op elke pagina bovenop site.css en zet de klasse .volw op <body>. Indeling, volgorde, teksten en concepten van de blokken blijven gelijk; dit bestand verandert alleen de toon:
   rechte vormen in plaats van scheve stickers, kleinere hoekradius, rustiger gewichten met meer contrast tussen kop en tekst,
   meer witruimte, zachtere schaduwen en beweging zonder ploppen of kantelen. Kleuren en Monkeys blijven, als gerichte accenten.
   Sectie 1 tot 16 zijn de homepage-blokken, sectie 17 de onderdelen van de overige pagina's. */

/* ---------- 1. Basis: maat, radius, witruimte ---------- */
.volw { --r: 0.875rem; --r-klein: 0.5rem; --pad: clamp(5rem, 10vw, 9.5rem); --schaduw: 0 1px 2px rgba(29, 29, 27, 0.06), 0 12px 32px rgba(29, 29, 27, 0.08); }

/* ---------- 2. Typografie: Gilroy, maar met meer contrast tussen koppen en lopende tekst ---------- */
/* Koppen: Bold in plaats van Heavy, strakker gespatieerd. Grote maat blijft: zelfvertrouwen zit in schaal, niet in dikte. */
.volw h2, .volw .h-xl, .volw .h-l, .volw .tegel h2 { font-weight: 700; letter-spacing: -0.048em; line-height: 1.02; }
.volw h3 { font-weight: 700; letter-spacing: -0.035em; }
/* Lopende tekst: lichter en rustiger, met meer regelafstand. */
.volw .big, .volw .intro, .volw .lead-ink, .volw .probleem-copy .lead-ink, .volw .autoriteit-copy .lead-ink { font-weight: 500; line-height: 1.6; letter-spacing: -0.005em; color: var(--muted); }
.volw .probleem-copy .lead-ink, .volw .autoriteit-copy .lead-ink { font-size: clamp(1.125rem, 1.4vw, 1.3125rem); }
.volw .kop-sub { font-weight: 500; letter-spacing: -0.03em; opacity: 0.6; }
.volw .kanalen-tekst { font-weight: 700; letter-spacing: -0.045em; }
.volw .kanalen-sub { font-weight: 500; }
.volw .reden-tekst p { font-weight: 700; letter-spacing: -0.045em; }
.volw .team-copy p:not(.kop-sub) { font-weight: 500; }

/* ---------- 3. Knoppen en labels: afgeronde rechthoeken in plaats van pillen ---------- */
.volw .btn { border-radius: 0.625rem; font-weight: 700; letter-spacing: -0.01em; }
.volw .footer-mid .btn { border-radius: 0.75rem; }
.volw .hero-wie, .volw .wie-naam, .volw .wie-beroepen li, .volw .vb-post figcaption, .volw .regie-label, .volw .pakket-label, .volw .lineup .tag { border-radius: var(--r-klein); }
.volw .wie-beroepen li { font-weight: 600; background: transparent; box-shadow: inset 0 0 0 1px var(--line); }

/* ---------- 4. Niets staat meer scheef: stroken, stickers, iconen, kaarten ---------- */
.volw .hero-x .strip, .volw .sticker-zin, .volw .pakket-label, .volw .regie-label, .volw .bubbles li:nth-child(n) { transform: none; rotate: none; }
.volw .reden-icoon, .volw .tegel-icoon, .volw .pakket-icoon, .volw .zwevers li, .volw .vb-post { rotate: none !important; }
.volw .reden-icoon, .volw .tegel-icoon, .volw .pakket-icoon { border-radius: 0.75rem; }
.volw .hero-x .strip { border-radius: 0.25rem; padding: 0.36em 0.62em 0.3em; }
.volw .sticker-zin { border-radius: var(--r-klein); font-weight: 700; letter-spacing: -0.025em; }
.volw .lineup .tag { transform: translate(-50%, 0.5rem); font-weight: 500; }
.volw .lineup .tag strong { font-weight: 800; }
.volw .lineup .who:hover .tag, .volw .lineup a.who:focus-visible .tag { transform: translate(-50%, 0); }

/* ---------- 5. Hero: de lime strook recht, rustige binnenkomst ---------- */
.volw .hero-x .strip { animation-name: volw-op; }
@keyframes volw-op { from { opacity: 0; transform: translateY(0.75rem); } to { opacity: 1; transform: none; } }
.volw .hero-x .lead { font-weight: 500; line-height: 1.6; }

/* ---------- 6. Waaromblok: de stelling en de kanaaltegels ---------- */
.volw .zwevers li { border-radius: 1rem; }
/* Feedback 01-10-2026 en 02-10-2026: de stelling mag meer gevoel hebben. De zin staat in twee delen (titel en subtitel, zie
   home/WhyChannels.astro), daaronder de toelichting. De kanaaltegels zijn effen vlakken in de huisstijlkleuren, diagonaal
   lime en paars (geen glas meer). */
.volw .kanalen-copy { gap: 0; }
.volw .kanalen-tekst { max-width: 20ch; text-wrap: balance; font-size: clamp(2.25rem, 5.2vw, 4.75rem); line-height: 1.02; letter-spacing: -0.048em; }
.volw .kanalen-subtitel { max-width: 30ch; text-wrap: balance; margin-top: clamp(0.875rem, 1.6vw, 1.375rem); font-size: clamp(1.375rem, 2.3vw, 2.125rem); font-weight: 600; line-height: 1.2; letter-spacing: -0.03em; color: rgba(253, 254, 255, 0.72); }
.volw .kanalen-sub { margin-top: clamp(1.5rem, 2.6vw, 2.25rem); }
.volw .zwevers li { box-shadow: 0 14px 34px rgba(0, 0, 0, 0.32); }
.volw .zwevers .z0, .volw .zwevers .z3 { background: var(--lime); color: var(--ink); }
.volw .zwevers .z1, .volw .zwevers .z2 { background: var(--purple); color: var(--white); }
/* Met de grotere stelling schuiven de tegels op desktop iets naar buiten en de bovenste iets omhoog, zodat ze de tekst niet raken. */
@media (min-width: 60.0625rem) {
  .volw .zwevers .z0 { left: 4%; top: 8%; }
  .volw .zwevers .z1 { right: 4%; top: 6%; }
  .volw .zwevers .z2 { left: 10%; bottom: 12%; }
  .volw .zwevers .z3 { right: 10%; bottom: 14%; }
}
.volw .reden-beeld { border-radius: var(--r); }
@media (hover: hover) and (pointer: fine) {
  .volw .reden-tekst:hover .reden-icoon { rotate: none; scale: 1.06; }
  .volw .reden-beeld:hover > * { transform: scale(1.02); }
  .volw .zwevers li:hover { transform: scale(1.06); }
}

/* ---------- 7. Probleemblok: geen chatballonnen meer, maar een strakke reeks uitspraken ---------- */
.volw .bubbles { gap: 0.625rem; }
.volw .bubbles li:nth-child(n) { border-radius: var(--r); padding: 1.25rem 1.5rem; font-weight: 600; font-size: clamp(1.0625rem, 1.35vw, 1.25rem); letter-spacing: -0.015em; background: var(--mist); color: var(--ink); }
.volw .bubbles li:nth-child(even) { background: var(--purple); color: var(--white); }

/* ---------- 8. Zichtbaarheidsblok en Voor-wie-blok: zelfde tegels, strakkere hoeken ---------- */
.volw .tegel, .volw .wie-tegels li { border-radius: var(--r); }
.volw .t-oog p { font-weight: 700; letter-spacing: -0.04em; }

/* ---------- 9. Stappen: één kleur minder. Lime wordt mist, paars en ink blijven. ---------- */
.volw .stap { border-radius: var(--r); box-shadow: var(--schaduw); }
.volw .stap.s1 { background: var(--mist); color: var(--ink); }
.volw .stap.s1 .num { color: color-mix(in srgb, var(--mist) 95%, var(--ink)); }
.volw .stap.s2 .num { color: color-mix(in srgb, var(--purple) 94%, var(--white)); }
.volw .stap.s3 .num { color: color-mix(in srgb, var(--ink) 95%, var(--white)); }
.volw .stap h3 { font-weight: 700; text-transform: none; letter-spacing: -0.045em; line-height: 1; }
.volw .stap p { font-weight: 500; opacity: 0.72; }

/* ---------- 10. Autoriteitsblok, voorbeelden, reviews, pakketten ---------- */
.volw .regie, .volw .regie-post { border-radius: var(--r); }
.volw .regie-label { font-weight: 700; box-shadow: var(--schaduw); }
.volw .vb-post { border-radius: var(--r); box-shadow: var(--schaduw); }
.volw .vb-kolom.k1 .vb-post { box-shadow: 0 2px 4px rgba(29, 29, 27, 0.08), 0 24px 56px rgba(29, 29, 27, 0.18); }
.volw .vb-post figcaption { font-weight: 600; box-shadow: none; }
.volw .reviews > li { border-radius: var(--r); }
.volw .reviews blockquote { font-weight: 600; letter-spacing: -0.02em; }
.volw .pakket-fields > li { border-radius: var(--r); }
.volw .pakket-fields h3 { font-weight: 700; letter-spacing: -0.05em; }
.volw .pakket-fields .pay { font-weight: 700; }
.volw .pakket-fields .prijs { font-weight: 700; }
.volw .f-publish { box-shadow: 0 2px 4px rgba(46, 26, 74, 0.12), 0 28px 64px rgba(46, 26, 74, 0.28); }
.volw .pakket-label { top: -0.75rem; font-weight: 800; font-size: 0.75rem; letter-spacing: 0.04em; box-shadow: none; }
.volw .start-regel { border-radius: var(--r); }
.volw .start-regel strong { font-weight: 800; }

/* ---------- 11. Afsluiter: gewone schrijfwijze, Bold, groot ---------- */
.volw .footer-mid h2 { font-weight: 700; text-transform: none; letter-spacing: -0.05em; line-height: 1; }

/* ---------- 12. Beweging: geen ploppen of kantelen; alles komt rustig omhoog ---------- */
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .volw .bubbles li:nth-child(n) { animation-name: volw-rijs; }
    .volw .sticker-zin { animation-name: volw-rijs; }
    .volw .regie-label { animation-name: volw-label; }
    .volw .tegel { animation-name: volw-rijs; }
    @keyframes volw-rijs { from { opacity: 0; transform: translateY(2.5rem); } to { opacity: 1; transform: none; } }
    @keyframes volw-label { from { opacity: 0; translate: 0 0.5rem; } to { opacity: 1; translate: 0 0; } }
  }
}

/* ---------- 13. Lime is alleen nog accentkleur (besluit 21-09-2026) ---------- */
/* Geen grote lime vlakken meer op de homepage. Lime blijft voor kleine, gerichte momenten: de strook in de hero, knoppen op donker,
   het label "Meest gekozen", iconen, de sticker-zin, de onderstreping, het oog en de kleine staaf in de prijskaart. */
.volw .t-oog { background: var(--ink); }
.volw .t-oog .oog-groot { color: var(--lime); }
.volw .t-oog p { color: var(--white); }
.volw .start-regel { background: var(--ink); color: var(--white); }
.volw .start-regel span { color: var(--lime); }
.volw .start-regel .btn { color: var(--white); border-color: rgba(253, 254, 255, 0.6); }
.volw .vb-leeg.c-lime { background: var(--mist); color: var(--ink); }

/* ---------- 14. Ruimte tussen de uitgelichte Publish-kaart en de kick-off-balk ---------- */
.volw .pricing-teaser .start-regel { margin-top: clamp(4.5rem, 6vw, 6rem) !important; }

/* ---------- 15. Iconen mogen kantelen bij hover: dat verstoort de rust niet ---------- */
.volw .reden-icoon, .volw .tegel-icoon, .volw .pakket-icoon, .volw .zwevers li { transition: rotate 300ms var(--ease-out), scale 300ms var(--ease-out), transform 300ms var(--ease-out); }
@media (hover: hover) and (pointer: fine) {
  .volw .reden-tekst:hover .reden-icoon { rotate: 8deg !important; scale: 1.06; }
  .volw .tegel:hover .tegel-icoon { rotate: -8deg !important; scale: 1.06; }
  .volw .pakket-fields > li:hover .pakket-icoon { rotate: 8deg !important; scale: 1.06; }
  .volw .zwevers li:hover { rotate: -8deg !important; }
}

/* ---------- 16. Hero: volwassen, maar hij knalt (21-09-2026) ---------- */
/* Eén reusachtige zin in normaal schrift, ExtraBold, strak gespatieerd. Het accentwoord "zichtbaar" is hol: alleen een omlijning,
   je kijkt erdoorheen naar de foto. Het woord is zelf te weinig zichtbaar. Bij het laden staat het eerst vol en loopt het leeg.
   Daaronder de tweede vraag als recht lime blok: het enige gekleurde element in de hero, zonder icoon (het logo staat al linksboven).
   Tekst blijft links onderaan: de ondernemers staan rechts in beeld. Slideteller naast de pijltjes. */
.volw .hero-x h1 { text-transform: none; }
.volw .hero-x .mega { font-weight: 800; letter-spacing: -0.058em; line-height: 0.92; text-transform: none; }
/* Normaal schrift heeft staartletters (g, j, p): het masker van de binnenkomst krijgt daarvoor meer ruimte. */
.volw .hero-x .line { padding-block: 0.02em 0.17em; margin-block: -0.02em -0.17em; }
.volw .hero-x .hol { color: transparent; -webkit-text-stroke: 0.028em var(--fg); paint-order: stroke fill; }
@supports not (-webkit-text-stroke: 1px black) { .volw .hero-x .hol { color: var(--fg); opacity: 0.4; } }
/* Het blok is paars (hoofdkleur), zodat lime in de hero alleen op de demoknop staat: één accent, één plek om te klikken (besluit 23-09-2026). */
.volw .hero-x .strip { display: inline-block; overflow: hidden; margin: 0.38em 0 0; padding: 0.3em 0.5em 0.26em; border-radius: 0.25rem; background: var(--purple); color: var(--white); font-weight: 700; line-height: 1; letter-spacing: -0.04em; text-transform: none; transform: none; }
.volw .hero-x .strip-icoon { display: none; }
.volw .hero-x .lead { max-width: 37rem; margin-top: clamp(1.25rem, 2.8vh, 2rem); color: color-mix(in srgb, var(--fg) 88%, transparent); }
.volw .hero-teller { display: flex; align-items: baseline; gap: 0.375rem; max-width: none; font-weight: 500; font-size: 0.875rem; letter-spacing: 0.04em; font-variant-numeric: tabular-nums; color: color-mix(in srgb, var(--fg) 70%, transparent); }
.volw .hero-teller b { font-weight: 700; color: var(--fg); }
.volw .hero-teller span { opacity: 0.6; }
@media (min-width: 60.0625rem) {
  .volw .hero-foto .mega { font-size: min(7.7vw, 11.6vh); }
  .volw .hero-foto .strip { font-size: min(2.7vw, 4.3vh); }
}
@media (max-width: 60rem) {
  .volw .hero-x .mega { font-size: min(13vw, 5.25rem); }
  .volw .hero-x .strip { font-size: clamp(1.25rem, 5.6vw, 1.75rem); margin-top: 0.8em; }
  .volw .hero-teller { display: none; }
}
@media (prefers-reduced-motion: no-preference) {
  /* Het woord staat er eerst vol en loopt dan leeg: het wordt voor je ogen minder zichtbaar. */
  .volw .hero-x .hol { animation: volw-leeg 1100ms var(--ease-out) 1300ms both; }
  @keyframes volw-leeg { from { color: var(--fg); } to { color: transparent; } }
}

/* ---------- 17. Overige pagina's: hero's, showcase, secties, lijsten, kaarten, pricing ---------- */
/* Paarse hero's van de subpagina's: geen kapitalen, Bold, in de titelmaat plus een slag groter. */
.volw .hero-page h1, .volw .hero-page h1.is-lang { font-weight: 700; text-transform: none; font-size: clamp(2.5rem, 5.6vw, 5.5rem); line-height: 1; letter-spacing: -0.05em; max-width: 16ch; }
.volw .hero-page .lead { font-weight: 500; line-height: 1.6; }
.volw .hero-page .mark { opacity: 0.1; }
/* Poster (kernboodschap op lime) en de kop van de Monkey-showcase: recht en zonder kapitalen. */
.volw .poster { font-weight: 700; text-transform: none; letter-spacing: -0.05em; }
.volw .sc-kop h1 { transform: none; border-radius: var(--r-klein); font-weight: 700; text-transform: none; letter-spacing: -0.03em; }
.volw .sc-rol { font-weight: 900; } /* de rol achter de Monkey blijft Heavy, zoals MONKEYS op de homepage */
.volw .sc-naam { transform: none !important; border-radius: var(--r); }
.volw .sc-left, .volw .sc-right { transform: none !important; }
.volw .sc-card h3 { font-weight: 700; letter-spacing: 0.02em; }
.volw .sc-card p { font-weight: 500; }
.volw .sc-slide.is-active .sc-left { animation-name: volw-links; }
.volw .sc-slide.is-active .sc-right { animation-name: volw-rechts; }
.volw .sc-slide.is-active .sc-naam { animation-name: volw-op; }
@keyframes volw-links { from { opacity: 0; transform: translateX(-2rem); } to { opacity: 1; transform: none; } }
@keyframes volw-rechts { from { opacity: 0; transform: translateX(2rem); } to { opacity: 1; transform: none; } }
/* Secties, lijsten en kaarten uit Sections.astro. */
.volw .sec .eyebrow, .volw .eyebrow { font-weight: 700; letter-spacing: 0.08em; }
.volw .lijst, .volw .kaarten > li, .volw .link-cards a, .volw .dept-grid li, .volw .stage { border-radius: var(--r); }
.volw .lijsten:not(.is-enkel) > .lijst:nth-child(2) { margin-top: 0 !important; }
.volw .vinkjes li { font-weight: 600; }
.volw .tags li:nth-child(n) { rotate: none; border-radius: var(--r-klein); font-weight: 600; }
.volw .kaarten h3, .volw .link-cards h3, .volw .dept-grid h3, .volw .tile-copy h3 { font-weight: 700; letter-spacing: -0.035em; }
.volw .kaarten .sub { font-weight: 600; }
.volw .kaarten.is-groot p:not(.eyebrow) { font-weight: 600; }
/* Lime alleen als accent: lijsten en secties op lime worden mist of ink met een lime accent. */
.volw .t-lime { background: var(--mist); color: var(--ink); }
.volw .t-lime .vink { background: var(--purple); color: var(--white); }
.volw .k-lime { background: var(--ink); color: var(--white); }
.volw .k-lime .eyebrow { color: var(--lime); }
.volw .k-lime .big { color: rgba(253, 254, 255, 0.9); }
.volw .sec-poster .poster { color: var(--white); }
.volw .kaarten.is-quote > li:nth-child(4n + 4) { background: var(--mist); }
.volw .kaarten.is-quote > li:nth-child(4n + 4) .eyebrow { color: var(--purple); }
/* Pricing: de kick-off en de optelsom hebben sinds 23-09-2026 eigen regels in site.css (ronde 37). */
.volw .pakket-fields .prijs { letter-spacing: -0.03em; }
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
  }
}
/* Lopende tekst op paars en ink blijft licht (de algemene regel in sectie 2 zet .big op --muted). */
.volw .k-purple .big, .volw .k-ink .big, .volw .k-purple .intro, .volw .k-ink .intro, .volw .hero-team-page .lead { color: rgba(253, 254, 255, 0.9); }
.volw .k-purple .vinkjes li, .volw .k-ink .vinkjes li { color: var(--white); }