/* Over ons: het merk uitgelegd met het logo (includes/brand.php + js/brand.js) */
.brand-sec { position: relative; --draw: 1; --fill: 1; }
html.js .brand-sec:not(.static) { height: 260vh; }
.brand-stage { padding-block: clamp(80px, 11vw, 140px); }
html.js .brand-sec:not(.static) .brand-stage { position: sticky; top: 0; height: 100vh; height: 100svh; padding: 0; display: grid; align-items: center; overflow: hidden; }
.brand-grid { display: grid; grid-template-columns: 1.15fr 1fr; gap: clamp(32px, 5vw, 72px); align-items: center; width: 100%; }

/* logo-paneel */
.brand-art { position: relative; aspect-ratio: 4 / 3; border-radius: 32px; display: grid; place-items: center; padding: 2%;
  background: radial-gradient(circle at 1px 1px, rgba(22,20,31,.09) 1px, transparent 0) 0 0 / 18px 18px, linear-gradient(160deg, #fbfaff, #f3f1fb); box-shadow: inset 0 0 0 1px rgba(22,20,31,.06); isolation: isolate; overflow: hidden; }
.brand-art::before { content: ""; position: absolute; inset: 18% 10%; z-index: -1; border-radius: 50%; filter: blur(60px); opacity: .55; transition: background 1s, opacity 1s, transform 1s;
  background: radial-gradient(closest-side, rgba(109,77,255,.45), transparent); }
.bm { width: 100%; height: auto; overflow: visible; transition: transform 1.2s cubic-bezier(.2,.7,.2,1); }
.brand-cap { position: absolute; left: 22px; bottom: 18px; font: 500 12px/1 var(--f-mono); letter-spacing: .14em; color: var(--muted); }
.brand-cap b { color: var(--ink); font-weight: 600; }

/* woorden: eerst de omtrek tekenen, dan vullen */
.bm-word path { stroke-width: .32; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: calc(1 - var(--draw)); fill-opacity: var(--fill); }
.bm-d path { stroke: var(--ink); fill: #231f20; }
.bm-m path { stroke: url(#bmG); fill: url(#bmG); }
.bm-word, .bm-d2, .bm-grid, .bm-motif, .bm-guides { transition: opacity .8s, transform 1s cubic-bezier(.2,.7,.2,1), filter .8s; }
.bm-d2 { opacity: 0; } .bm-d2 path { fill: url(#bmAll); }

/* 01 digitaal: pixelraster achter het woord */
.bm-grid { opacity: 0; } .bm-grid rect { fill: var(--c4); opacity: .1; }
/* 02 motief: herhalend patroon van de M */
.bm-motif { opacity: 0; } .bm-tiles { opacity: .2; } #bmTile path { fill: var(--c6); }
/* 03 aanpak: hulplijnen van het logo */
.bm-guides { opacity: 0; } .bm-guides line { stroke: var(--c5); stroke-width: .18; stroke-dasharray: 1.2 1; }
.bm-guides circle { fill: none; stroke: var(--c5); stroke-width: .25; }
.bm-guides text { font: 500 3px var(--f-mono); fill: var(--c5); letter-spacing: .08em; text-transform: uppercase; }

[data-step="1"] .bm-m { opacity: .12; filter: blur(.4px); }
[data-step="1"] .bm-grid { opacity: 1; }
[data-step="1"] .bm-grid rect { animation: bm-px 2.4s calc(var(--k) * -2.4s) steps(1) infinite; }
[data-step="1"] .brand-art::before { background: radial-gradient(closest-side, rgba(91,140,255,.5), transparent); }
[data-step="2"] .bm-d { opacity: .12; filter: blur(.4px); }
[data-step="2"] .bm-motif { opacity: 1; }
[data-step="2"] .bm-tiles { animation: bm-drift 6s linear infinite; }
[data-step="2"] .bm-m { transform: translateY(-1px); }
[data-step="2"] .brand-art::before { background: radial-gradient(closest-side, rgba(217,70,239,.5), transparent); }
[data-step="3"] .bm-guides { opacity: 1; }
[data-step="3"] .bm-word path { fill-opacity: .82; }
[data-step="3"] .brand-art { background-size: 9px 9px, auto; }
[data-step="4"] .bm-d2 { opacity: 1; }
[data-step="4"] .bm { transform: scale(1.04); }
[data-step="4"] .brand-art::before { opacity: .9; transform: scale(1.15); background: conic-gradient(from 90deg, rgba(91,140,255,.5), rgba(109,77,255,.5), rgba(217,70,239,.5), rgba(251,113,133,.45), rgba(91,140,255,.5)); }

@keyframes bm-px { 0%, 100% { opacity: .1; } 30% { opacity: .75; } 55% { opacity: .25; } }
@keyframes bm-drift { to { transform: translate(-18px, -22px); } }

/* tekst */
.brand-chs { display: grid; }
.brand-ch { grid-area: 1 / 1; }
.brand-ch .h2 { font-size: clamp(1.9rem, 3.6vw, 3rem); line-height: 1.06; }
html.js .brand-sec:not(.static) .brand-ch { opacity: 0; transform: translateY(26px); filter: blur(6px); transition: opacity .6s, transform .7s cubic-bezier(.2,.7,.2,1), filter .6s; pointer-events: none; }
html.js .brand-sec:not(.static) .brand-ch.on { opacity: 1; transform: none; filter: none; pointer-events: auto; }
.brand-rail { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; margin: 36px 0 0; padding: 0; }
.brand-rail button { position: relative; font: 500 12px/1 var(--f-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); background: none; border: 0; padding: 14px 10px 8px; cursor: pointer; }
.brand-rail button::before { content: ""; position: absolute; left: 10px; right: 10px; top: 0; height: 3px; border-radius: 3px; background: rgba(22,20,31,.1); transition: background .4s; }
.brand-rail li.on button { color: var(--ink); }
.brand-rail li.on button::before, .brand-rail li.done button::before { background: var(--prism); }
.brand-rail button:focus-visible { outline: 2px solid var(--c5); outline-offset: 2px; border-radius: 6px; }

/* zonder scrollverhaal (geen JS of minder beweging): alles onder elkaar */
.brand-sec.static .brand-chs, html:not(.js) .brand-chs { gap: 34px; }
.brand-sec.static .brand-ch, html:not(.js) .brand-ch { grid-area: auto; }
.brand-sec.static .brand-rail, html:not(.js) .brand-rail { display: none; }
.brand-sec.static .bm-d2 { opacity: 1; }

@media (max-width: 960px) {
  html.js .brand-sec:not(.static) { height: 240vh; }
  .brand-grid { grid-template-columns: 1fr; gap: 22px; }
  html.js .brand-sec:not(.static) .brand-grid { align-content: center; }
  .brand-art { aspect-ratio: 16 / 10; border-radius: 24px; max-width: 560px; }
  .brand-ch .h2 { font-size: clamp(1.6rem, 6.4vw, 2.2rem); }
  .brand-ch .sec-lead { font-size: 1rem; margin-top: 12px; }
  .brand-rail { margin-top: 20px; gap: 2px; }
  .brand-rail button { padding: 12px 6px 6px; font-size: 11px; }
  .brand-rail button::before { left: 6px; right: 6px; }
}