/* VLAME - de huisstijl-laag (2026-09-15, klant: "maak een zieke huisstijl die
 * scrollt, alles consistent: kleuren uit het ontwerpbestand, rondingen,
 * borders, knoppen").
 *
 * Laadt als LAATSTE stylesheet op elke route en legt één systeem over alle
 * secties heen. De bron is docs/design/vlame-ontwerp.html:
 *
 *   kleur     papier/inkt als basis, het vlam-verloop (amber -> koraal ->
 *             magenta -> violet) als accent, en één kleur per dienst/sectie
 *             (--vl-ember, gezet door .vl-sec--*). Hoverkleur is magenta.
 *   ronding   --r (5px) op kaarten, panelen en beeld; --pill (100px) op
 *             knoppen, chips en labels; de menupas houdt zijn 14px.
 *   rand      1.5px inkt op een outline-knop, 1px --line op een kaart.
 *   knoppen   .btn = outline-pil, .btn--flame = verloop-pil met wit,
 *             .btn--dark = inktpil. Hover: 3px omhoog en de pijl schuift.
 *   letters   ongewijzigd: Anybody (display), Bricolage Grotesque (body),
 *             Courier Prime als typewriter-accent.
 *
 * Wat hieronder staat wint van sections.css/case.css/pages.css door volgorde,
 * niet door !important. Waar een oude regel echt in de weg zit (de uitgesneden
 * hoek van een kaart, de inktplaat van de hero) wordt hij hier uitgezet.
 */

/* Tweede huisstijl-ronde (klant: "vierkante blokken met wat rondingen naast
   ronde filters, dat is niet in verhouding; beneden een fade met een zwart
   blok"). Eén familie rondingen: 18px op elk vlak (kaart, paneel, foto,
   raster), 12px op een vlak ín een vlak, en de pil op alles wat je aanklikt.
   Geen donkere secties meer: alles staat op papier of getint papier, en het
   ene bijzondere blok is het verloop-paneel van de contactsectie. */
:root{
  --r:18px;
  --r-s:12px;
  --r-xl:26px;
  --pill:100px;
  --bw:1.5px;
  --pink:#F0407A;
  --flame-deep:linear-gradient(100deg,var(--coral) 0%,var(--magenta) 55%,var(--violet) 100%);
}

/* Geen inktsecties: de klant leest een zwart vlak als "random". Wat donker
   was (citaten, contact, cijfers op een case) staat nu op getint papier. */
.sec--dark{background:var(--paper-2);color:var(--ink)}
.sec--dark .lead,.sec--dark p{color:#3B333F}
.sec--dark .eyebrow{color:var(--muted)}
.sec--dark .vl-heat{color:var(--ink);opacity:.1}
.sec--dark .vl-heat--ember{color:var(--vl-ember);opacity:.3}
.sec--dark .spark,.vl-on-ink .spark{--spark-ink:var(--ink)}
.sec--dark .btn--ghost-light{border-color:var(--ink);color:var(--ink)}
.sec--dark .btn--ghost-light:hover,.sec--dark .btn--ghost-light:focus-visible{background:var(--ink);color:var(--paper);border-color:var(--ink)}

/* ==========================================================================
   Kleur per sectie (terug uit het ontwerpbestand)
   ========================================================================== */
.vl-sec--amber{--vl-ember:var(--amber)}
.vl-sec--coral{--vl-ember:var(--coral)}
.vl-sec--magenta{--vl-ember:var(--magenta)}
.vl-sec--violet{--vl-ember:var(--violet)}

/* Het accentwoord: het verloop in de letter, precies zoals `.grad .spark` in
   het ontwerpbestand. Op een verloop-paneel is het wit. */
.spark__t{
  background:var(--accent);-webkit-background-clip:text;background-clip:text;
  color:transparent;-webkit-text-fill-color:transparent;
}
.pull .spark__t{background:none;color:#fff;-webkit-text-fill-color:#fff}

/* ==========================================================================
   Knoppen
   ========================================================================== */
.btn,.vl-bar__btn,.vl-bar__call,.arch .page-numbers,.vl-lam__unflip{
  border-radius:var(--pill);border-width:var(--bw);
}
.btn{
  gap:12px;padding:.95em 1.6em;
  border:var(--bw) solid var(--ink);background:transparent;color:var(--ink);
  transition:transform var(--dur-fast) ease,background var(--dur-fast) ease,color var(--dur-fast) ease,box-shadow var(--dur-fast) ease;
}
.btn::after{content:none}
.btn:hover,.btn:focus-visible{transform:translateY(-3px)}
.btn .arw{transition:transform var(--dur-fast) ease}
.btn:hover .arw,.btn:focus-visible .arw{transform:translate(3px,-3px)}
.btn--dark{background:var(--ink);color:#fff;border-color:var(--ink)}
.btn--flame,.btn--ember{
  border-color:transparent;background:var(--accent);color:#fff;
  box-shadow:0 10px 30px rgba(225,44,123,.28);
}
.btn--flame:hover,.btn--ember:hover,.btn--flame:focus-visible,.btn--ember:focus-visible{box-shadow:0 16px 40px rgba(225,44,123,.38)}
.btn--ghost-light{border-color:rgba(255,255,255,.4);color:#fff}
.btn--ghost-light:hover,.btn--ghost-light:focus-visible{background:#fff;color:var(--ink);border-color:#fff}
.sec--dark .btn:not(.btn--flame):not(.btn--dark):not(.btn--ghost-light){border-color:rgba(255,255,255,.4);color:#fff}

/* De balk: Menu als outline-pil, bellen als verloop-pil. */
.vl-bar__btn{border:var(--bw) solid var(--ink);padding:.75em 1.2em;overflow:visible}
.vl-bar__btn::after{content:none}
.vl-bar__btn:hover,.vl-bar__btn:focus-visible{background:var(--ink);color:var(--paper)}

/* ==========================================================================
   Hero: omlijnd woord dat volloopt
   Het woord staat twee keer in de h1: de vulling (verloop, via .spark) en
   daaroverheen een omlijnde kopie (text-stroke, aria-hidden). Bovenaan de
   pagina zie je alleen de omlijning, reusachtig en gespreid; terwijl je door
   de pin scrolt loopt het woord vol, trekt de spatiëring in en krimpt het naar
   zijn plek als kop van de pagina. motion.js scrubt dat; zonder die laag staat
   meteen de eindstand (vulling, geen omlijning).
   ========================================================================== */
.hero{padding:clamp(2rem,3.4vw,3.4rem) 0 clamp(3rem,5vw,5rem)}
.hero__grid{
  position:relative;z-index:1;
  display:grid;grid-template-columns:1.28fr .72fr;gap:clamp(24px,4vw,56px);align-items:end;
}
/* min-width:0 op beide kolommen: anders zet de natuurlijke breedte van het
   portret (720px) de fotokolom vast en wordt de kop afgesneden (gemeten). */
.hero__txt,.hero__fig{min-width:0}
.hero__word{
  position:relative;display:inline-block;white-space:nowrap;
  font-size:clamp(56px,9.4vw,146px);line-height:.86;letter-spacing:-.02em;
  margin:0 0 .18em;
}
.hero__word .ln{display:block}
.hero__fill{display:block}
.hero__stroke{
  position:absolute;inset:0;display:block;pointer-events:none;
  color:transparent;-webkit-text-fill-color:transparent;
  -webkit-text-stroke:.022em var(--ink);
}
.vl-pin-off .hero__stroke{display:none}
.hero__actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:.4rem}
/* De oude hero zette de figuur in kolom 3 van een ander raster; in dit raster
   van twee kolommen maakte dat een impliciete derde kolom ter breedte van de
   foto en werd de kop afgesneden (gemeten). Terug naar automatische plaatsing. */
.hero__fig{position:relative;margin:0;z-index:1;grid-column:auto;grid-row:auto;font-size:inherit}
.hero__txt{grid-column:auto;grid-row:auto}
.hero__fig::before{
  content:"";position:absolute;inset:auto -16px -16px 34px;height:62%;
  background:var(--accent);border-radius:var(--r);z-index:0;
}
.hero__fig picture,.hero__fig img{position:relative;z-index:1;display:block}
.hero__img{width:100%;aspect-ratio:4/5;object-fit:cover;object-position:50% 34%;border-radius:var(--r)}
.hero__tag{
  position:absolute;z-index:3;left:-14px;bottom:26px;
  padding:12px 18px;border-radius:3px;background:var(--ink);color:#fff;
  font-family:var(--font-mono);font-size:12px;font-weight:700;letter-spacing:.02em;line-height:1.6;
}
.hero__tag b{display:block;font-weight:400;color:var(--amber)}
/* De oude plaat en print bestaan niet meer in de opmaak; voor de zekerheid. */
.hero__slab,.hero__print,.hero__copy{all:revert}

/* De scroll-aanwijzing: een outline-pil in de typewriter, onderin de gepinde
   hero, met een pijl die zachtjes stuitert. Verdwijnt zodra je scrolt. */
.hero__scroll{
  position:absolute;left:0;right:0;bottom:clamp(20px,4vh,40px);z-index:2;
  display:none;justify-content:center;pointer-events:none;
}
.vl-pin-on .hero__scroll{display:flex}
.hero__scroll-pill{
  display:inline-flex;align-items:center;gap:10px;
  padding:.7em 1.25em;border:var(--bw) solid var(--ink);border-radius:var(--pill);
  color:var(--ink);background:rgba(247,244,241,.7);backdrop-filter:blur(6px);
  font-family:var(--font-mono);font-size:13px;font-weight:700;letter-spacing:.04em;
}
.hero__scroll-arw{display:inline-block;font-style:normal;animation:vl-scroll-arw 1.6s ease-in-out infinite}
@keyframes vl-scroll-arw{0%,100%{transform:translateY(-2px)}50%{transform:translateY(3px)}}

/* ==========================================================================
   Marquee: getint papier, om en om een woord in het verloop
   ========================================================================== */
.marquee{border-radius:0;background:var(--paper-2);color:var(--ink)}
.marquee-bleed{--vl-over:0px}
.marquee__track>span:nth-child(4n+3){
  background:var(--accent);-webkit-background-clip:text;background-clip:text;
  color:transparent;-webkit-text-fill-color:transparent;
}

/* ==========================================================================
   Eigen events: beeld met ronding, verder kaal
   ========================================================================== */
.ev__img{border-radius:var(--r)}
.ev__go{color:var(--ink)}
.ev__go:hover{color:var(--magenta)}

/* ==========================================================================
   Wat ik doe: verloop-paneel en zes getinte kaarten met een kleurrand
   ========================================================================== */
/* De uitspraak: een paneel van getint papier, geen rand, geen kleurvlak. Het
   verloop zit in het accentwoord. */
.pull{margin:0 0 clamp(3rem,5vw,5rem);overflow:visible}
.pull__in{
  position:relative;margin:0;
  padding:clamp(28px,3.6vw,56px);border-radius:var(--r);
  background:var(--paper-2);border:0;color:var(--ink);
  font-size:clamp(28px,4vw,56px);
  display:grid;grid-template-columns:1.6fr .9fr;gap:26px;align-items:center;
}
.pull__in::before,.pull__in::after{content:none}
.pull__line{font-size:1em;line-height:.94;margin:0;max-width:16ch}
.pull__p{color:#54495A;font-size:clamp(15px,1.05vw,17px)}
.pull .spark__t{
  background:var(--accent);-webkit-background-clip:text;background-clip:text;
  color:transparent;-webkit-text-fill-color:transparent;
}

/* Wat ik doe als index: zes regels met een lijn ertussen, links het nummer in
   de typewriter en de kleur van de dienst, dan de dienst groot in de
   display-face, rechts de zin. Bij hover loopt de kleurbalk links uit en
   krijgt de dienst het verloop. Geen zes doosjes (klant: "totaal niet
   speciaal, een kleurtje met een titeltje en een tekstje"). */
.svc{display:block;margin:0;counter-reset:svc;border-top:1px solid var(--line)}
.svc__i{
  --c:var(--ink);
  position:relative;margin:0;padding:clamp(1.4rem,2.4vw,2.2rem) 0 clamp(1.4rem,2.4vw,2.2rem) clamp(1.2rem,2vw,2rem);
  display:grid;grid-template-columns:4em 1.1fr 1fr;gap:clamp(1rem,2.4vw,2.6rem);align-items:baseline;
  border-bottom:1px solid var(--line);border-radius:0;background:none;border-top:0;
  counter-increment:svc;
}
.svc__i::before{
  content:counter(svc,decimal-leading-zero);
  font-family:var(--font-mono);font-size:13px;font-weight:700;letter-spacing:.06em;color:var(--c);
  margin:0;
}
.svc__i::after{
  content:"";position:absolute;left:0;top:14%;bottom:14%;width:4px;border-radius:var(--pill);
  background:var(--c);transform:scaleY(0);transform-origin:50% 0;
  transition:transform var(--dur-mid) var(--ease-out);
}
.svc__i:hover::after,.svc__i:focus-within::after{transform:scaleY(1)}
.svc dt{
  margin:0;
  font-family:var(--font-display);font-weight:900;font-stretch:112%;text-transform:uppercase;
  font-size:clamp(24px,2.8vw,40px);line-height:.95;letter-spacing:-.02em;
  transition:color var(--dur-fast) ease;
}
.svc dd{margin:0;font-size:clamp(15px,1.05vw,17px);line-height:1.65;color:#54495A;max-width:44ch}

/* ==========================================================================
   Gewerkt voor: lijnenraster op papier, bij hover inkt met het verloop
   ========================================================================== */
.logos{margin-top:0;overflow:visible}
.logos__in{
  display:grid;grid-template-columns:repeat(4,1fr);gap:1px;align-items:stretch;
  margin:0;padding:0;font-size:clamp(17px,1.8vw,25px);
  background:var(--line);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;
  color:var(--ink);
}
.lg{
  display:grid;place-items:center;gap:0;text-align:center;
  padding:clamp(24px,3vw,42px) 14px;background:var(--paper);color:var(--ink);
  font-size:1em;letter-spacing:.01em;
  transition:background var(--dur-fast) ease,color var(--dur-fast) ease;
}
.lg b{display:block}
.lg i{display:block;margin-top:8px;font-family:var(--font-mono);font-size:12px;color:var(--muted);transition:color var(--dur-fast) ease}
.lg__out{position:absolute;top:12px;right:14px;font-size:12px;color:var(--muted)}
a.lg{position:relative}
a.lg:hover,a.lg:focus-visible{background:var(--ink);color:#fff}
a.lg:hover b,a.lg:focus-visible b{
  background:var(--accent);-webkit-background-clip:text;background-clip:text;
  color:transparent;-webkit-text-fill-color:transparent;
}
a.lg:hover i,a.lg:focus-visible i{color:rgba(255,255,255,.55)}
a.lg:hover .lg__out,a.lg:focus-visible .lg__out{color:var(--amber);opacity:1}
.logos__also{
  width:auto;margin:clamp(1.6rem,2.4vw,2.4rem) 0 0;padding:1.3em 1.6em;
  background:var(--paper-2);border:0;border-radius:var(--r);box-shadow:none;
  display:grid;grid-template-columns:auto 1fr;gap:1.4em;align-items:baseline;
}
.logos__also .vl-tape{
  position:static;transform:none;min-width:0;padding:0;background:none;box-shadow:none;
  font-family:var(--font-mono);font-size:13px;font-weight:700;letter-spacing:.04em;color:var(--magenta);
}
.logos__also .vl-tape::before,.logos__also .vl-tape::after{content:none}

/* ==========================================================================
   Projecten: chips in kleur, kaarten met lijnrand en ronding
   ========================================================================== */
.chip{
  --c:var(--ink);
  padding:.7em 1.2em;border-radius:var(--pill);border:1.6px solid var(--c);background:transparent;
  color:var(--c);font-family:var(--font-body);font-size:13px;font-weight:600;letter-spacing:.005em;
  overflow:visible;transition:background var(--dur-fast) ease,color var(--dur-fast) ease;
}
.chip::after{content:none}
.chip:hover,.chip:focus-visible{background:color-mix(in srgb,var(--c) 12%,transparent)}
.chip[aria-current]{background:var(--c);border-color:var(--c);color:#fff}
.chip[data-f="productie"]{--c:#D98A18}
.chip[data-f="projectmanagement"]{--c:#E96A22}
.chip[data-f="marketing"]{--c:#EA4A2C}
.chip[data-f="branding"]{--c:#E13268}
.chip[data-f="artiesten"]{--c:#D2226F}
.chip[data-f="eigen-events"]{--c:var(--violet)}

/* De uitvaag-maskers van de rail horen alleen bij de horizontale rail op een
   smal scherm; op desktop is het raster geen rail en vaagde het masker de
   rechterkolom uit (gemeten: de derde kaart liep naar wit). */
@media (min-width:761px){
  .vl-rail--fade,.grid.vl-rail{-webkit-mask-image:none;mask-image:none}
}
.card{
  background:var(--paper);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;
  transition:transform var(--dur-mid) ease,box-shadow var(--dur-mid) ease;
}
.card::before{content:none}
.card:hover{transform:translateY(-6px);box-shadow:0 22px 44px rgba(23,17,26,.1)}
.card__fig{position:relative;padding:0;background:var(--ink);overflow:hidden}
.card__pic{aspect-ratio:16/10;transition:transform var(--dur-slow) cubic-bezier(.2,.7,.2,1)}
.card:hover .card__pic{transform:scale(1.05)}
.card__cap,.card__tab{
  position:absolute;top:12px;z-index:2;
  width:auto;height:auto;display:inline-block;
  padding:6px 11px;border-radius:var(--pill);
  background:rgba(23,17,26,.82);color:#fff;
  font-family:var(--font-mono);font-size:11px;font-weight:700;letter-spacing:.02em;line-height:1.3;
}
.card__cap{left:12px;margin:0}
.card__tab{right:12px;bottom:auto}
.card--own .card__cap{color:#fff}
.card__b{padding:22px 22px 24px;gap:10px}
.card__role{font-size:13px;font-weight:600;color:var(--magenta)}
.card--own{background:var(--ink);border-color:var(--ink)}
.card--own .card__role{color:var(--amber)}
.card p{color:var(--muted)}
.tags{font-family:var(--font-mono);font-size:12px}
.card__link{padding-top:.2em}
.card__link:hover{color:var(--magenta)}
.card--own .card__link:hover{color:var(--amber)}
.more{justify-content:center}

/* ==========================================================================
   Wat ze zeggen: drie kaarten op getint papier, aanhalingsteken in het verloop
   ========================================================================== */
.quotes{grid-template-columns:repeat(3,1fr);gap:clamp(16px,2vw,24px)}
.q{
  max-width:none;justify-self:stretch;text-align:left;
  background:var(--paper);border:1px solid var(--line);border-radius:var(--r);
  padding:clamp(24px,2.6vw,34px);display:flex;flex-direction:column;gap:18px;
}
.q::before{
  content:"\201C";display:block;
  font-family:var(--font-display);font-weight:900;font-size:56px;line-height:.6;
  background:var(--accent);-webkit-background-clip:text;background-clip:text;
  color:transparent;-webkit-text-fill-color:transparent;
}
.q p,.sec--dark .q p{font-size:clamp(15px,1.1vw,17px);line-height:1.6;margin:0;color:#3B333F}
.q footer{margin-top:auto;font-size:13px;line-height:1.6}
.q footer b,.sec--dark .q footer b{color:var(--ink)}
.q footer span,.sec--dark .q footer span{color:var(--muted)}
.vl-demo-note,.sec--dark .vl-demo-note{color:var(--muted)}

/* ==========================================================================
   Over mij: vierkante foto met het verloopblok erachter
   ========================================================================== */
.about{grid-template-columns:.9fr 1.1fr}
.about__fig{position:relative}
.about__fig::after{
  content:"";position:absolute;inset:-14px -14px auto auto;width:56%;height:56%;
  background:var(--accent);border-radius:var(--r);z-index:0;
}
.about__fig picture,.about__fig .about__img{position:relative;z-index:1}
.about__img{aspect-ratio:1/1;border-radius:var(--r)}
.about__cap{position:relative;z-index:1}
.vl-doodle.about__note{display:none}

/* ==========================================================================
   Contact: HET verloop-paneel. Het ene blok op de site dat vol kleur staat,
   afgerond, met witte tekst en een witte pil. Daaromheen gewoon papier.
   ========================================================================== */
.cta{position:relative;overflow:visible;background:var(--paper);color:var(--ink)}
.cta::before{content:none}
.cta .vl-heat{display:none}
.cta .wrap{position:relative;z-index:1}
.cta__panel{
  position:relative;overflow:hidden;
  padding:clamp(32px,5vw,72px);border-radius:var(--r-xl);
  background:var(--accent);color:#fff;
}
.cta__panel::after{
  content:"";position:absolute;width:min(620px,80%);aspect-ratio:1;border-radius:50%;
  background:rgba(255,255,255,.22);filter:blur(90px);top:-30%;right:-12%;pointer-events:none;
}
.cta__panel>*{position:relative;z-index:1}
.cta__say,.sec--dark .cta__say{color:#fff;max-width:14ch}
.cta .spark__t{background:none;color:#fff;-webkit-text-fill-color:#fff}
.cta__list{list-style:none;margin:0;padding:0;display:grid;gap:0}
.cta__list li,.sec--dark .cta__list li{padding:14px 0;border-bottom:1px solid rgba(255,255,255,.35);font-size:15px;color:rgba(255,255,255,.92)}
.cta__list a,.sec--dark .cta__list a{color:#fff;text-decoration:none;transition:opacity var(--dur-fast) ease}
.cta__list a:hover,.cta__list a:focus-visible{opacity:.8;color:#fff}
.cta .btn--ghost-light,.sec--dark.cta .btn--ghost-light{background:#fff;color:var(--ink);border-color:#fff}
.cta .btn--ghost-light:hover,.cta .btn--ghost-light:focus-visible{background:var(--ink);color:#fff;border-color:var(--ink)}

/* Footer: getint papier met inkt, geen zwart vlak onderaan. */
.vl-foot{background:var(--paper-2);color:var(--ink);border-top:1px solid var(--line)}
.vl-foot__title{color:var(--ink)}
.vl-foot__list a{color:#3B333F}
.vl-foot__list a:hover{color:var(--magenta)}
.vl-foot__rule{border-top-color:var(--line)}
.vl-foot__bottom{color:var(--muted)}

/* ==========================================================================
   Case, archief, media, contact: dezelfde ronding en rand
   ========================================================================== */
.case__img,.gal img,.gal__i img,.ov__img,.vl-media__img,.vl-lb__fig img,.about-page__img{border-radius:var(--r)}
/* De cijfers op een case en de "volgende case" zijn geen inktvlakken meer. */
.case__nums{background:var(--paper-2);color:var(--ink)}
.case__nums .stat i{color:var(--muted)}
.nextcase{background:var(--paper);color:var(--ink);padding-block:0 clamp(4rem,8vw,8rem)}
.nextcase .wrap{
  padding:clamp(28px,4vw,56px) clamp(28px,4vw,56px);
  background:var(--accent);border-radius:var(--r-xl);color:#fff;
}
.nextcase__kick{color:rgba(255,255,255,.75)}
.nextcase__t{color:#fff}
.nextcase__t:hover,.nextcase__t:focus-visible{color:#fff;opacity:.85}
.nextcase__all{color:rgba(255,255,255,.85)}
.nextcase__all:hover{color:#fff}
/* De openingsplaat van case, archief, over, media, contact, 404 en zoeken is
   geen inktvlak meer: een kale, grote kop op papier (landonorris.com), met het
   accentwoord in het verloop en een dunne verloopstreep eronder. */
.case__slab,.arch__slab{
  display:block;margin-inline:0;padding:0 0 .35em;
  background:none;color:var(--ink);border-bottom:4px solid transparent;
  border-image:var(--accent) 1;
}
.case__slab h1,.arch__slab h1{text-align:left}
.meta{gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.mlabel{background:var(--paper);padding:22px}
.mlabel::before{content:none}
.mlabel__k{font-family:var(--font-mono);font-size:12px;font-weight:700;color:var(--muted)}
.blk{border-left:4px solid var(--vl-ember,var(--magenta));background:#fff;border-radius:0 var(--r) var(--r) 0;padding:22px 24px;max-width:none}
.blk--l,.blk--r{margin:0;justify-self:stretch;text-align:left}
.nextcase{border-radius:6px}
.ct__in,.sform__in,.ct__field input,.ct__field textarea,.ct textarea,.ct input{border-radius:var(--r)}
.arch .page-numbers{border:var(--bw) solid var(--ink)}
.arch .page-numbers.current{background:var(--ink);color:var(--paper)}

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width:1080px){
  .hero__grid{grid-template-columns:1fr}
  .hero__fig{max-width:520px}
  .svc,.logos__in{grid-template-columns:repeat(2,1fr)}
  .quotes{grid-template-columns:repeat(2,1fr)}
  .pull__in{grid-template-columns:1fr}
}
@media (max-width:760px){
  .hero__word{font-size:clamp(56px,17vw,96px)}
  .hero__fig{max-width:none}
  .hero__fig::before{inset:auto -10px -10px 24px}
  .svc,.logos__in,.quotes{grid-template-columns:1fr}
  .about{grid-template-columns:1fr}
  .logos__also{grid-template-columns:1fr;gap:.5em}
  .hero__scroll-pill{font-size:12px}
}

/* ==========================================================================
   Derde ronde (klant): ÉÉN kleur, blokken die over elkaar schuiven, doodles,
   hover die iets doet. Alles hieronder wint van wat hierboven staat.
   ========================================================================== */

/* --- één kleur: lichtgroen, verder alleen papier en inkt --- */
:root{
  --accent:#C4F09C;
  --accent-2:#A9E57A;
  --accent-tint:#EEF9E3;
  --flame:var(--accent);
  --flame-deep:var(--accent);
}
.vl-sec--amber,.vl-sec--coral,.vl-sec--magenta,.vl-sec--violet{--vl-ember:var(--accent)}
:focus-visible{outline-color:var(--ink)}

/* Het accentwoord: een markering in de kleur, inkt erop. Geen verloop. */
.spark__t,.pull .spark__t,.cta .spark__t,.case__slab .spark__t,.arch__slab .spark__t{
  background:var(--accent);color:var(--ink);-webkit-text-fill-color:var(--ink);
  padding:0 .08em;margin:0 -.02em;border-radius:.14em;
  -webkit-box-decoration-break:clone;box-decoration-break:clone;
}
.hero__fill .spark__t{padding:0 .06em;border-radius:.12em}

/* Knoppen: hover is een vlak dat van onderen omhoog schuift, geen sprongetje. */
.btn{isolation:isolate;transform:none}
.btn::before{
  content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;
  background:var(--accent);transform:translateY(101%);
  transition:transform var(--dur-mid) var(--ease-out);
}
.btn:hover,.btn:focus-visible{transform:none;color:var(--ink)}
.btn:hover::before,.btn:focus-visible::before{transform:translateY(0)}
.btn--dark{background:var(--ink);color:#fff}
.btn--dark::before{background:var(--accent)}
.btn--dark:hover,.btn--dark:focus-visible{color:var(--ink)}
.btn--flame,.btn--ember{background:var(--accent);color:var(--ink);border-color:var(--accent);box-shadow:none}
.btn--flame::before,.btn--ember::before{background:var(--ink)}
.btn--flame:hover,.btn--ember:hover,.btn--flame:focus-visible,.btn--ember:focus-visible{color:var(--paper);box-shadow:none}
.btn--ghost-light{border-color:var(--ink);color:var(--ink)}
.vl-bar__call{
  background:var(--accent);color:var(--ink);border-color:var(--accent);box-shadow:none;
  transition:background var(--dur-fast) ease,color var(--dur-fast) ease;
}
.vl-bar__call:hover,.vl-bar__call:focus-visible{background:var(--ink);color:var(--paper);border-color:var(--ink);transform:none;box-shadow:none}

/* Hero, marquee, diensten, opdrachtgevers, citaten: één kleur. */
.svc__i{--c:var(--ink)}
.svc__i::after{background:var(--accent)}
.svc__i:hover dt,.svc__i:focus-within dt{background:none;color:var(--ink);-webkit-text-fill-color:var(--ink)}
.svc__i:hover,.svc__i:focus-within{background:var(--accent-tint)}
.svc__i:nth-child(n){--c:var(--ink)}
a.lg:hover,a.lg:focus-visible{background:var(--accent);color:var(--ink)}
a.lg:hover b,a.lg:focus-visible b{background:none;color:var(--ink);-webkit-text-fill-color:var(--ink)}
a.lg:hover i,a.lg:focus-visible i{color:rgba(23,17,26,.6)}
a.lg:hover .lg__out,a.lg:focus-visible .lg__out{color:var(--ink)}
.logos__also .vl-tape{color:var(--ink)}
.q::before{background:none;color:var(--accent-2);-webkit-text-fill-color:var(--accent-2)}
.chip{--c:var(--ink)}
.chip[data-f]{--c:var(--ink)}
.chip:hover,.chip:focus-visible{background:var(--accent-tint)}
.chip[aria-current]{background:var(--ink);border-color:var(--ink);color:var(--paper)}
.card__role,.card--own .card__role{color:var(--muted)}
.card--own{background:var(--accent-tint);border-color:var(--accent);color:var(--ink)}
.card--own,.card--own p,.card--own .tags{color:#3B333F}
.card--own .card__link,.card--own h3 a{color:var(--ink)}
.card--own .card__link:hover{color:var(--ink);text-decoration:underline}
.card__link:hover{color:var(--ink);text-decoration:underline;text-underline-offset:.2em}
.ev__go:hover{color:var(--ink);text-decoration:underline;text-underline-offset:.2em}
.vl-foot__list a:hover{color:var(--ink);text-decoration:underline}

/* Contact en volgende case: het kleurpaneel met inkt erop. */
.cta__panel{background:var(--accent);color:var(--ink)}
.cta__panel::after{content:none}
.cta__say,.sec--dark .cta__say{color:var(--ink)}
.cta .spark__t{background:var(--paper)}
.cta__list li,.sec--dark .cta__list li{border-bottom-color:rgba(23,17,26,.25);color:var(--ink)}
.cta__list a,.sec--dark .cta__list a{color:var(--ink)}
.cta .btn--ghost-light,.sec--dark.cta .btn--ghost-light{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.cta .btn--ghost-light::before{background:var(--paper)}
.cta .btn--ghost-light:hover,.cta .btn--ghost-light:focus-visible{color:var(--ink);background:var(--ink)}
.nextcase .wrap{background:var(--accent);color:var(--ink)}
.nextcase__kick{color:rgba(23,17,26,.6)}
.nextcase__t,.nextcase__all,.nextcase__all:hover{color:var(--ink)}
.case__slab,.arch__slab{border-bottom:4px solid var(--accent);border-image:none}
.blk{border-left-color:var(--accent)}

/* --- blokken die over elkaar schuiven ---
   Elke sectie na de hero is een plakkend paneel: hij blijft bovenaan staan
   terwijl de volgende sectie eroverheen schuift (position:sticky, top 0).
   Afgeronde bovenhoeken en een zachte schaduw maken de rand zichtbaar, en
   elke sectie heeft een eigen ondoorzichtige achtergrond. De hero doet niet
   mee: die wordt door GSAP gepind. */
main>.sec,main>.marquee-bleed{
  position:sticky;top:0;
  border-radius:var(--r-xl) var(--r-xl) 0 0;
  box-shadow:0 -24px 60px -24px rgba(23,17,26,.22);
  /* Doodles en contouren steken buiten de rand; het paneel klipt ze, anders
     maakt een doodle rechts de pagina breder (gemeten: 26px). */
  overflow-x:clip;overflow-y:visible;
}
main>.sec{background:var(--paper)}
main>.sec--tint,main>.sec--dark{background:var(--paper-2)}
main>.marquee-bleed{background:var(--paper-2)}
main>.marquee-bleed .marquee{background:transparent}
main>#werk{background:var(--paper)}
main>#opdrachtgevers{background:var(--paper-2)}
main>#projecten{background:var(--paper)}
main>#over{background:var(--paper)}
main>#reacties{background:var(--accent-tint)}
main>#contact{background:var(--paper)}
.vl-foot{position:relative;z-index:1;border-radius:var(--r-xl) var(--r-xl) 0 0;box-shadow:0 -24px 60px -24px rgba(23,17,26,.22)}

/* --- doodles: inkt, dun, nooit in de weg --- */
.vl-doodle{opacity:.5}
.vl-doodle--hero{right:calc(var(--pad) * .2);top:14%;width:clamp(50px,6vw,90px)}
.vl-doodle--kabel.vl-doodle--left{top:auto;bottom:6%;left:calc(var(--pad) * -.2)}
.vl-doodle--walkie.vl-doodle--right{top:5%}
.vl-doodle--tiewrap.vl-doodle--left{top:4%}
.vl-doodle--sticker.vl-doodle--right{top:6%;color:var(--accent-2);opacity:.9}
.vl-doodle--pijl.vl-doodle--under{left:auto;right:8%;bottom:-8px;transform:rotate(-12deg)}

/* --- opdrachtgevers: een foto die met je muis meeloopt --- */
.vl-peek{
  position:fixed;left:0;top:0;z-index:70;width:clamp(180px,18vw,280px);aspect-ratio:4/3;
  border-radius:var(--r-s);overflow:hidden;pointer-events:none;
  opacity:0;transform:translate(-50%,-50%) scale(.8) rotate(-4deg);
  transition:opacity var(--dur-fast) ease,transform var(--dur-mid) var(--ease-out);
  box-shadow:0 30px 60px -20px rgba(23,17,26,.4);
}
.vl-peek.is-on{opacity:1;transform:translate(-50%,-50%) scale(1) rotate(var(--peek-rot,0deg))}
.vl-peek img{display:block;width:100%;height:100%;object-fit:cover}

@media (max-width:760px){
  /* relative, niet static: de doodles en contouren in een sectie hangen aan
     haar positie; static zou ze naar de paginatop sturen (gemeten). */
  main>.sec,main>.marquee-bleed{position:relative;border-radius:var(--r) var(--r) 0 0;box-shadow:none}
  .vl-peek{display:none}
}
@media (prefers-reduced-motion:reduce){
  main>.sec,main>.marquee-bleed{position:relative}
  .btn::before{transition:none}
}

/* ==========================================================================
   Vierde ronde (klant): "de bouw is goed, maar te veel overlap - het moeten
   secties/blokken zijn; alles wat groen is wordt het verloop uit het
   ontwerpbestand, met een textuur." Wint van alles hierboven.
   ========================================================================== */

/* --- het verloop terug, met korrel --- */
:root{
  --grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='g' x='0' y='0' width='180' height='180' filterUnits='userSpaceOnUse'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' seed='7' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .38 0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23g)'/%3E%3C/svg%3E");
  --flame:linear-gradient(100deg,var(--amber) 0%,var(--coral) 38%,var(--magenta) 72%,var(--violet) 100%);
  --flame-v:linear-gradient(180deg,var(--amber) 0%,var(--coral) 38%,var(--magenta) 72%,var(--violet) 100%);
  --flame-tex:var(--grain),var(--flame);
  --accent:var(--magenta);
  --accent-2:var(--coral);
  --accent-tint:#FBEAEF;
}
.vl-sec--amber,.vl-sec--coral,.vl-sec--magenta,.vl-sec--violet{--vl-ember:var(--magenta)}

/* Elk vlak dat groen was: het verloop met korrel, wit erop. */
.spark__t,.pull .spark__t,.case__slab .spark__t,.arch__slab .spark__t{
  background:var(--flame-tex);background-blend-mode:multiply;background-size:180px 180px,100% 100%;
  color:#fff;-webkit-text-fill-color:#fff;
}
.cta .spark__t{background:var(--paper);background-blend-mode:normal;color:var(--ink);-webkit-text-fill-color:var(--ink)}
.btn::before{background:var(--flame-tex);background-blend-mode:multiply;background-size:180px 180px,100% 100%}
.btn:hover,.btn:focus-visible,.btn--dark:hover,.btn--dark:focus-visible{color:#fff}
.btn--flame,.btn--ember{
  background:var(--flame-tex);background-blend-mode:multiply;background-size:180px 180px,100% 100%;
  color:#fff;border-color:transparent;
}
.btn--flame::before,.btn--ember::before{background:var(--ink)}
.btn--flame:hover,.btn--ember:hover,.btn--flame:focus-visible,.btn--ember:focus-visible{color:var(--paper)}
.vl-bar__call{
  background:var(--flame-tex);background-blend-mode:multiply;background-size:180px 180px,100% 100%;
  color:#fff;border-color:transparent;
}
.vl-bar__call:hover,.vl-bar__call:focus-visible{background:var(--ink);color:var(--paper)}
.hero__fig::before,.about__fig::after{background:var(--flame-tex);background-blend-mode:multiply;background-size:180px 180px,100% 100%}
.hero__tag b{color:var(--amber)}
.marquee__track>span:nth-child(4n+3){
  background:var(--flame-tex);background-blend-mode:multiply;background-size:180px 180px,100% 100%;
  padding:0 .3em;
  color:#fff;-webkit-text-fill-color:#fff;
}
.svc__i::after{background:var(--flame-v)}
.svc__i:hover,.svc__i:focus-within{background:var(--paper)}
a.lg:hover,a.lg:focus-visible{background:var(--flame-tex);background-blend-mode:multiply;background-size:180px 180px,100% 100%;color:#fff}
a.lg:hover b,a.lg:focus-visible b{color:#fff;-webkit-text-fill-color:#fff}
a.lg:hover i,a.lg:focus-visible i{color:rgba(255,255,255,.75)}
a.lg:hover .lg__out,a.lg:focus-visible .lg__out{color:#fff}
.logos__also .vl-tape{color:var(--magenta)}
.q::before{
  background:var(--flame);-webkit-background-clip:text;background-clip:text;
  color:transparent;-webkit-text-fill-color:transparent;
}
.chip[aria-current]{background:var(--flame);border-color:transparent;color:#fff}
.chip:hover,.chip:focus-visible{background:var(--paper)}
/* Eigen concepten: papieren kaart met het verloop als rand. */
.card--own{
  border:2px solid transparent;color:var(--ink);
  background:linear-gradient(var(--paper),var(--paper)) padding-box,var(--flame) border-box;
}
.card--own .card__role{color:var(--magenta)}
.cta__panel{background:var(--flame-tex);background-blend-mode:multiply;background-size:180px 180px,100% 100%;color:#fff}
.cta__say,.sec--dark .cta__say{color:#fff}
.cta__list li,.sec--dark .cta__list li{border-bottom-color:rgba(255,255,255,.4);color:#fff}
.cta__list a,.sec--dark .cta__list a{color:#fff}
.cta .btn--ghost-light,.sec--dark.cta .btn--ghost-light{background:#fff;color:var(--ink);border-color:#fff}
.cta .btn--ghost-light::before{background:var(--ink)}
.cta .btn--ghost-light:hover,.cta .btn--ghost-light:focus-visible{color:#fff;background:#fff}
.nextcase .wrap{background:var(--flame-tex);background-blend-mode:multiply;background-size:180px 180px,100% 100%;color:#fff}
.nextcase__kick{color:rgba(255,255,255,.75)}
.nextcase__t,.nextcase__all,.nextcase__all:hover{color:#fff}
.case__slab,.arch__slab{border-bottom:4px solid transparent;border-image:var(--flame) 1}
.blk{border-left-color:var(--magenta)}
.vl-doodle--sticker.vl-doodle--right{color:var(--magenta)}

/* --- secties als losse blokken, geen overlap ---
   Elk blok is een afgerond paneel van getint papier met lucht eromheen; de
   pagina zelf is papier. Geen sticky, geen schaduw: de blokken liggen naast
   elkaar in plaats van over elkaar. */
main>.sec,main>.marquee-bleed{
  position:relative;top:auto;
  margin:0 clamp(12px,1.6vw,24px) clamp(12px,1.6vw,24px);
  border-radius:var(--r-xl);box-shadow:none;
  background:var(--paper-2);
  overflow:clip;
}
main>.sec--tint,main>.sec--dark,main>.marquee-bleed,main>#werk,main>#opdrachtgevers,main>#projecten,main>#over,main>#reacties,main>#contact{background:var(--paper-2)}
main>.marquee-bleed{padding:0}
main>.marquee-bleed .marquee{background:transparent}
.hero{margin-bottom:clamp(12px,1.6vw,24px)}
.vl-foot{
  position:relative;z-index:auto;
  margin:0 clamp(12px,1.6vw,24px) clamp(12px,1.6vw,24px);
  border-radius:var(--r-xl);box-shadow:none;border-top:0;
}
/* Kaarten en citaten liggen op getint papier: papier met lijn, zodat ze als
   kaart lezen. */
.card,.q{background:var(--paper)}
.pull__in{background:var(--paper);border:1px solid var(--line)}
.logos__also{background:var(--paper);border:1px solid var(--line)}
.logos__in{background:var(--line)}
.lg{background:var(--paper)}
@media (max-width:760px){
  main>.sec,main>.marquee-bleed,.vl-foot{margin:0 8px 8px;border-radius:var(--r)}
}

/* Abstracte lijnen (klant: "geen sterretje; lijnen zoals vlammen, abstract,
   niet letterlijk een vlam"): drie opstijgende, krullende strepen in inkt,
   rechtsboven in de hero. Dezelfde familie als de hitte-contouren. */
.vl-doodle--lijnen{width:clamp(90px,11vw,170px);color:var(--ink);opacity:.55}
.vl-doodle--lijnen.vl-doodle--hero{right:calc(var(--pad) * .35);top:6%}
@media (max-width:760px){.vl-doodle--lijnen{width:64px;opacity:.45}}

/* Alle doodles zijn dezelfde familie: abstracte lijnen (klant: "die andere
   iconen slaan nergens op"). Drie tekeningen, per sectie één, dun, in inkt. */
.vl-doodle--lijnen-2{width:clamp(120px,15vw,240px);color:var(--ink);opacity:.5}
.vl-doodle--lijnen-3{width:clamp(140px,18vw,280px);color:var(--ink);opacity:.5}
.vl-doodle--lijnen-3.vl-doodle--left{left:calc(var(--pad) * -.1);top:auto;bottom:5%}
.vl-doodle--lijnen-2.vl-doodle--right{right:calc(var(--pad) * .2);top:5%}
.vl-doodle--lijnen.vl-doodle--left{left:calc(var(--pad) * .1);top:3%;transform:scaleX(-1)}
.vl-doodle--lijnen-3.vl-doodle--right{right:calc(var(--pad) * .1);top:5%}
.vl-doodle--lijnen-2.vl-doodle--under{left:auto;right:calc(var(--pad) * .3);bottom:4%;transform:none}
@media (max-width:760px){
  .vl-doodle--lijnen-2,.vl-doodle--lijnen-3{width:90px;opacity:.4}
}
/* Bij Gewerkt voor liepen de lijnen door de kop; ze staan nu linksonder, kleiner. */
.vl-doodle--lijnen.vl-doodle--left{left:calc(var(--pad) * .15);top:auto;bottom:5%;width:clamp(80px,9vw,130px)}


/* Zesde ronde (klant): "alle knoppen en call-to-actions dezelfde radius als
   het VLAME-blok - vierkant met ronding, allemaal evenveel" en "het woord
   zit niet gecentreerd in zijn blok". Eén radius (--r-s, 12px) voor alles
   wat je aanklikt en voor de markeringen; geen pillen meer. Het woord in de
   hero staat als inline-block met een krappe regelhoogte, zodat de
   kapitalen midden in het vlak vallen. */
:root{--pill:var(--r-s)}
.spark__t,.pull .spark__t,.case__slab .spark__t,.arch__slab .spark__t,.cta .spark__t{border-radius:var(--r-s)}
.marquee__track>span:nth-child(4n+3){border-radius:var(--r-s)}
.card__cap,.card__tab{border-radius:8px}
.hero__fill .spark__t,.hero__stroke{
  display:inline-block;line-height:.8;padding:.13em .1em .09em;margin:0;
}
.hero__fill .spark__t{border-radius:var(--r-s)}
.hero__stroke{inset:0;background:none}
.hero__word{line-height:1}

/* De draad is weg (klant, zevende ronde). Hitte-contouren en losse doodles
   blijven uit: de beweging op scroll (scrollfx.js) is het kunstwerk. */
.vl-heat,.vl-doodle{display:none}

/* Hero: minder lucht tussen het blok en de knoppen, en het woord exact in
   het midden van zijn blok. text-box-trim knipt de ruimte boven de
   kapitalen en onder de basislijn weg waar de browser dat kan; daarbuiten
   de gemeten padding. */
.hero__word{margin:0 0 .07em}
@supports (text-box-trim:trim-both){
  .hero__fill .spark__t,.hero__stroke{
    text-box-trim:trim-both;text-box-edge:cap alphabetic;
    line-height:1;padding:.13em .1em;
  }
}

/* ==========================================================================
   Zevende ronde: de beweging op scroll (assets/js/scrollfx.js).
   Wat scrollfx.js overneemt, doet reveal.js niet meer: zodra html.vl-fx
   staat, staan de .rv-elementen gewoon op hun plek en bepaalt GSAP de
   entree. De koppen krijgen een regelmasker (span.vl-line in een
   overflow:hidden), beeld een gordijn (clip-path) met een lichte zoom.
   ========================================================================== */
html.vl-fx .rv{opacity:1;transform:none;transition:none}
html.vl-fx .vl-mask{display:block;overflow:hidden}
html.vl-fx .vl-mask>.vl-line{display:block;will-change:transform}
html.vl-fx .vl-clip{clip-path:inset(0 0 100% 0);will-change:clip-path}
html.vl-fx .vl-clip>*{will-change:transform}
html.vl-fx .vl-fx-item{will-change:transform,opacity}
.btn{will-change:transform}

/* ==========================================================================
   Achtste ronde (klant): "alle knoppen even groot, vullend en niet-vullend
   één geheel; bij hover een rare boord; actieve chip wordt wit bij hover;
   bij Over mij mis ik de foto van Vera".
   Twee maten, verder niets: groot (52px) voor .btn, klein (44px) voor de
   balk, de chips en de scrollknop. Altijd een rand van 1,5px - doorzichtig
   op een gevulde knop - zodat gevuld en omlijnd exact even groot zijn. Het
   hover-vlak loopt over de rand heen (inset -1,5px), dus geen boord meer.
   ========================================================================== */
.btn,.vl-bar__btn,.vl-bar__call,.chip,.hero__scroll-pill,.arch .page-numbers{
  box-sizing:border-box;display:inline-flex;align-items:center;justify-content:center;
  border-width:var(--bw);border-style:solid;border-radius:var(--r-s);
  font-family:var(--font-body);font-weight:600;letter-spacing:.005em;line-height:1;
  white-space:nowrap;
}
.btn{min-height:52px;padding:0 1.5em;font-size:15px;gap:10px}
.vl-bar__btn,.vl-bar__call,.chip,.hero__scroll-pill,.arch .page-numbers{min-height:44px;padding:0 1.15em;font-size:14px;gap:9px}
.hero__scroll-pill{font-family:var(--font-mono);font-weight:700}
.btn::before{inset:calc(-1 * var(--bw));border-radius:inherit}
.btn--flame,.btn--ember,.vl-bar__call{border-color:transparent}
.btn:hover,.btn:focus-visible{border-color:transparent}
.btn--dark:hover,.btn--dark:focus-visible{border-color:transparent}
.chip::before{content:none}
.chip[aria-current]:hover,.chip[aria-current]:focus-visible{background:var(--flame);color:#fff}
.vl-bar__btn:hover,.vl-bar__btn:focus-visible{background:var(--ink);color:var(--paper);border-color:var(--ink)}
/* Over mij: Vera zelf, hoger uitgesneden dan in de hero zodat het niet
   dezelfde foto lijkt. */
.about__img{object-position:50% 18%}
/* Het gordijn (clip-path) werkt alleen op een blok: op een inline <picture>
   knipt het de foto helemaal weg (gemeten bij Over mij - de foto was
   geladen, zichtbaar volgens de stijlen, en tekende toch niets). */
html.vl-fx .vl-clip,.about__fig picture,.card__fig picture,.ev__link picture{display:block}

/* ==========================================================================
   Negende ronde (klant): de pas en het koord in het verloop van de site,
   geen glitter, menu-items die eruit springen, en de streepjescode als
   duidelijke knop. Zelfde materiaal als het contactpaneel: het verloop met
   korrel, wit erop, de twee knopmaten.
   ========================================================================== */
.vl-lam__face{
  background:var(--flame-tex);background-blend-mode:multiply;background-size:180px 180px,100% 100%;
  color:#fff;border-radius:var(--r);box-shadow:0 40px 80px rgba(23,17,26,.35);
}
.vl-lam__face--front.vl-holo::before{content:none}
.vl-lam__face--front.vl-holo::after{opacity:.3}
.vl-lam__glitter{display:none}
.vl-lam__hole{background:rgba(23,17,26,.45);box-shadow:inset 0 1px 3px rgba(0,0,0,.5)}
.vl-lam__access{color:rgba(255,255,255,.85);font-family:var(--font-mono);letter-spacing:.2em}
.vl-lam__brand{margin-bottom:20px}
.vl-lam__brand span{font-size:30px;color:#fff}
.vl-lam__list{gap:6px;margin:0 0 16px}
.vl-lam__list a{
  grid-template-columns:28px 1fr 16px;gap:10px;min-height:44px;padding:0 14px;
  border:var(--bw) solid rgba(255,255,255,.4);border-radius:var(--r-s);
  background:rgba(23,17,26,.14);color:#fff;
  transition:background var(--dur-fast) ease,color var(--dur-fast) ease,border-color var(--dur-fast) ease;
}
.vl-lam__list a:hover,.vl-lam__list a:focus-visible{background:#fff;color:var(--ink);border-color:#fff;padding-left:14px}
.vl-lam__num{font-family:var(--font-mono);font-size:12px;color:rgba(255,255,255,.8);letter-spacing:.04em}
.vl-lam__list a:hover .vl-lam__num,.vl-lam__list a:focus-visible .vl-lam__num{color:var(--magenta)}
.vl-lam__label{font-family:var(--font-body);font-size:16px;font-weight:600;letter-spacing:.005em;text-transform:none}
.vl-lam__list .arw{opacity:.9}
.vl-lam__flip{display:flex;flex-direction:column;align-items:center;gap:10px;padding:6px 0 0;color:#fff;border-radius:var(--r-s)}
.vl-lam__flip svg{width:64%;height:auto;opacity:.9}
.vl-lam__flip-txt{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  min-height:36px;padding:0 1em;border:var(--bw) solid rgba(255,255,255,.6);border-radius:var(--r-s);
  font-family:var(--font-body);font-size:13px;font-weight:600;color:#fff;
  transition:background var(--dur-fast) ease,color var(--dur-fast) ease,border-color var(--dur-fast) ease;
}
.vl-lam__flip:hover .vl-lam__flip-txt,.vl-lam__flip:focus-visible .vl-lam__flip-txt{background:#fff;color:var(--ink);border-color:#fff}
.vl-lam__crew{font-size:14px}
.vl-lam__crew dt{font-family:var(--font-mono);color:rgba(255,255,255,.75)}
.vl-lam__crew dd a{text-decoration:underline;text-underline-offset:.2em}
#vl-bpm,#vl-bpm.is-beat,.vl-uptempo #vl-bpm{color:#fff}
.vl-lam__unflip{
  min-height:44px;padding:0 1.15em;border:var(--bw) solid rgba(255,255,255,.6);border-radius:var(--r-s);
  color:#fff;background:transparent;font-family:var(--font-body);font-size:14px;font-weight:600;letter-spacing:.005em;text-transform:none;
}
.vl-lam__unflip:hover,.vl-lam__unflip:focus-visible{background:#fff;color:var(--ink);border-color:#fff}
.vl-lam__code{color:rgba(255,255,255,.85)}
.vl-lam__note{color:rgba(255,255,255,.75);font-family:var(--font-mono);text-transform:none;letter-spacing:.02em}
/* Het koord: het verloop over de lengte, het keperpatroon als lijnen erop,
   de korrel eroverheen. */
.vl-lam__band-core{stroke:url(#vl-band-flame)}
.vl-lam__band-weave{fill:none;stroke:url(#vl-band-weave);stroke-width:2.6em;stroke-linecap:butt;stroke-linejoin:round;opacity:.85}
.vl-lam__band-txt{fill:rgba(255,255,255,.9)}
/* Het label onder de streepjescode: één regel, kleine pijl (de pijl erfde
   de breedte van de streepjescode). */
.vl-lam__flip-txt{white-space:nowrap}
.vl-lam__flip .vl-lam__flip-txt .arw,.vl-lam__flip-txt svg{width:12px;height:12px;flex:0 0 auto;opacity:1}
/* Subpagina's: de openingskop binnen de wrap (hij liep links het beeld uit)
   en de formuliervelden in dezelfde ronding en rand als de knoppen. */
.case__slab,.arch__slab{box-sizing:border-box;width:min(100%,var(--maxw));margin-inline:auto;padding:0 var(--pad) .35em}
.form input,.form textarea{border-radius:var(--r-s);border:var(--bw) solid var(--ink);background:var(--paper)}
.form input:focus-visible,.form textarea:focus-visible{outline:2px solid var(--ink);outline-offset:2px;box-shadow:none}

/* Tiende ronde (klant): "alle gevulde knoppen hebben nog een heel dunne
   boord links en rechts". Oorzaak: het verloop wordt op de padding-box
   gemeten en herhaalt zich onder de doorzichtige rand van 1,5px - links
   zie je dan het eind van het verloop (violet), rechts het begin (amber).
   Het verloop begint nu op de border-box en herhaalt zich niet. */
.btn--flame,.btn--ember,.vl-bar__call,.chip[aria-current],.chip[aria-current]:hover,.chip[aria-current]:focus-visible,
a.lg:hover,a.lg:focus-visible,.cta__panel,.nextcase .wrap,.vl-lam__face,.spark__t,.pull .spark__t,
.case__slab .spark__t,.arch__slab .spark__t,.marquee__track>span:nth-child(4n+3),.hero__fig::before,.about__fig::after{
  background-origin:border-box;background-clip:border-box;background-repeat:repeat,no-repeat;
}

/* Elfde ronde (klant): "de pas moet echt shiny lijken, met een reflectie,
   niet alleen die swoosh". Drie lagen glans op het laminaat:
     1. een brede, zachte lichtband die met de hoek van de pas meedraait
        (--vl-holo-angle uit de fysica) - de reflectie van de zaalverlichting
        die over het plastic schuift als hij zwaait;
     2. een stille schuine sheen over het hele vlak - het laminaat zelf;
     3. een lichte rand boven en een donkere rand onder - de dikte van de pas.
   De bestaande smalle lichtstreep (::after) blijft als accent. */
.vl-lam__face--front.vl-holo::before,.vl-lam__face--back::before{
  content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;pointer-events:none;
  background:
    linear-gradient(calc(var(--vl-holo-angle) - 60deg),rgba(255,255,255,0) 26%,rgba(255,255,255,.38) 44%,rgba(255,255,255,.14) 53%,rgba(255,255,255,0) 68%),
    linear-gradient(115deg,rgba(255,255,255,.2) 0%,rgba(255,255,255,0) 36%,rgba(255,255,255,.06) 60%,rgba(255,255,255,0) 100%);
  opacity:1;mix-blend-mode:screen;animation:none;
}
.vl-lam__face--front.vl-holo::after{opacity:.4}
.vl-lam__face{
  box-shadow:inset 0 1.5px 0 rgba(255,255,255,.5),inset 0 -1.5px 0 rgba(23,17,26,.25),0 40px 80px rgba(23,17,26,.35);
}

/* ==========================================================================
   Twaalfde ronde (klant): subpagina's als de voorpagina - geen kruimelpad,
   openingskop links en in de maat van de sectiekoppen, geen streep eronder,
   media in een rustig raster van drie gelijke foto's.
   ========================================================================== */
.crumb{display:none}
.case__open,.arch__head,.ov__open{padding-block-start:clamp(2.4rem,4vw,4rem);padding-block-end:clamp(1.2rem,2vw,2rem)}
.case__slab,.arch__slab{border-bottom:0;border-image:none;padding-bottom:0}
.case__slab h1,.case__slab .ov__say,.arch__slab h1{
  text-align:left;max-width:16ch;margin:0;
  font-size:clamp(40px,7.2vw,104px);line-height:.9;
}
.case__slab .ov__say{max-width:16ch}
.vl-media{grid-template-columns:repeat(3,1fr);column-gap:clamp(1.2rem,2vw,2rem);row-gap:clamp(2rem,3vw,3rem);align-items:start}
.vl-media__f,.vl-media__f--1,.vl-media__f--2,.vl-media__f--3{grid-column:auto;margin-block-start:0}
.vl-media__f:nth-child(3n+2){margin-block-start:0}
.vl-media__img{aspect-ratio:4/3;border-radius:var(--r)}
.vl-media__cap{font-size:14px;margin:0 0 .6em}
@media (max-width:1080px){.vl-media{grid-template-columns:repeat(2,1fr)}}
@media (max-width:760px){.vl-media{grid-template-columns:1fr}}

/* ==========================================================================
   De dock: een vaste strook onderin, als een HUD. Inkt, glas in de
   glasversie, dezelfde knopmaat (44px) en ronding als de rest.
   ========================================================================== */
.vl-dock{
  position:fixed;left:50%;bottom:18px;z-index:90;
  display:flex;align-items:center;gap:6px;padding:6px;
  border-radius:calc(var(--r-s) + 6px);
  background:rgba(23,17,26,.94);color:#fff;
  box-shadow:0 24px 60px -20px rgba(23,17,26,.6),0 1px 0 rgba(255,255,255,.12) inset;
  transform:translate(-50%,140%);opacity:0;pointer-events:none;
  transition:transform var(--dur-slow) var(--ease-out),opacity var(--dur-mid) ease;
}
.vl-dock.is-on{transform:translate(-50%,0);opacity:1;pointer-events:auto}
html.vl-lam-open .vl-dock{opacity:0;pointer-events:none}
.vl-dock__home,.vl-dock__btn{
  box-sizing:border-box;display:inline-flex;align-items:center;justify-content:center;
  min-height:44px;padding:0 1.05em;border-radius:var(--r-s);border:var(--bw) solid transparent;
  font-family:var(--font-body);font-size:14px;font-weight:600;letter-spacing:.005em;line-height:1;
  color:#fff;background:transparent;cursor:pointer;white-space:nowrap;
  transition:background var(--dur-fast) ease,color var(--dur-fast) ease,border-color var(--dur-fast) ease;
}
.vl-dock__home{
  font-family:var(--font-display);font-weight:900;font-stretch:112%;font-size:15px;letter-spacing:-.01em;text-transform:uppercase;
  background:var(--flame-tex);background-blend-mode:multiply;background-size:180px 180px,100% 100%;background-origin:border-box;
}
.vl-dock__btn{border-color:rgba(255,255,255,.35)}
.vl-dock__btn:hover,.vl-dock__btn:focus-visible{background:#fff;color:var(--ink);border-color:#fff}
.vl-dock__home:hover,.vl-dock__home:focus-visible{filter:brightness(1.08)}
.vl-dock__top{padding:0 .9em;font-size:16px}
@media (max-width:760px){
  .vl-dock{bottom:12px;gap:4px;padding:5px}
  .vl-dock__home,.vl-dock__btn{min-height:40px;padding:0 .85em;font-size:13px}
}
@media (prefers-reduced-motion:reduce){.vl-dock{transition:none}}

/* Dertiende ronde (klant, 2026-09-15): "het scroll-dingetje moet bij het
   begin op elke schermgrootte zichtbaar zijn, en dan weggaan" en "Nu bellen
   en Menu altijd rechtsbovenin in de hoek, niet aan een boxbreedte".
   Gemeten: de pil stond onderin de hero en de balk erboven duwde de hero net
   zover omlaag dat de pil op elk scherm één pixel onder de rand viel; motion.js
   liet hem bovendien al na ~65 px verdwijnen. Nu hangt hij aan het scherm zelf
   (position:fixed, buiten de hero) en vervaagt hij tussen 30 en 50 % van de
   pin. De balk-knoppen staan op dezelfde afstand van de rand als de blokken. */
.hero__scroll{position:fixed;top:auto;bottom:clamp(20px,4vh,40px);left:0;right:0;z-index:70}
html.vl-lam-open .hero__scroll{visibility:hidden}
.vl-bar__in{max-width:none;padding:0 clamp(12px,1.6vw,24px)}
@media (max-width:760px){
  /* Wat ik doe (klant: "productie, productiekantoor, projectleiding vallen
     op mobiel uit beeld"): de rij hield drie kolommen (nummer, titel, tekst)
     en de tekst liep rechts het blok uit (gemeten: dd tot 532 px op 390 px).
     Op een telefoon: nummer links, titel en tekst eronder in één kolom. */
  .svc__i{grid-template-columns:2.4em minmax(0,1fr);grid-template-rows:auto auto;gap:.45rem .2rem;align-items:start;padding-left:clamp(.9rem,3vw,1.2rem)}
  .svc__i::before{grid-column:1;grid-row:1;padding-top:.35em}
  .svc dt{grid-column:2;grid-row:1;font-size:clamp(16px,5.2vw,22px);overflow-wrap:break-word}
  .svc dd{grid-column:2;grid-row:2;max-width:none;font-size:15px}
}