/* ═══════════════════════════════════════════════════════════
   SMEULDERS DIGITAL — Brian Smeulders
   Concept "Smeulen": houtskoolzwart, gloeiend rood, warme as.
   Vanilla CSS, geen frameworks.
   ═══════════════════════════════════════════════════════════ */

/* ── 1. Tokens ─────────────────────────────────────────── */
:root{
  /* kleur */
  --ink:        #0A0908;
  --ink-2:      #100E0C;
  --ink-3:      #17140F;
  --ink-4:      #211C17;
  --ash:        #F6F1EA;
  --ash-2:      #C9C1B8;
  --ash-3:      #8C837A;
  --ember:      #F5251F;
  --ember-hot:  #FF6A2B;
  --ember-deep: #B3120D;

  --line:       rgba(246,241,234,.10);
  --line-2:     rgba(246,241,234,.18);
  --glass:      rgba(246,241,234,.035);

  --grad-ember: linear-gradient(100deg, var(--ember-hot), var(--ember) 55%, var(--ember-deep));

  /* type */
  --f-display: "Bricolage Grotesque", "Segoe UI", system-ui, sans-serif;
  --f-body:    "Inter", "Segoe UI", system-ui, -apple-system, sans-serif;
  --f-serif:   "Instrument Serif", Georgia, "Times New Roman", serif;

  /* maat */
  --wrap: 1220px;
  --pad: clamp(1.25rem, 4vw, 3rem);
  --sect: clamp(5rem, 11vw, 9.5rem);
  --r: 18px;
  --r-lg: 26px;

  /* beweging */
  --ease: cubic-bezier(.22,1,.36,1);
  --ease-out: cubic-bezier(.16,1,.3,1);
}

/* ── 2. Reset ──────────────────────────────────────────── */
*,*::before,*::after{ box-sizing:border-box; }
*{ margin:0; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body{
  background:var(--ink);
  color:var(--ash);
  font-family:var(--f-body);
  font-size:clamp(.98rem,.35vw + .9rem,1.06rem);
  line-height:1.7;
  font-weight:400;
  letter-spacing:.005em;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img,svg{ display:block; max-width:100%; }
img{ height:auto; }
a{ color:inherit; text-decoration:none; }
button,input,select,textarea{ font:inherit; color:inherit; }
button{ background:none; border:0; cursor:pointer; }
ul,ol{ list-style:none; padding:0; }
::selection{ background:var(--ember); color:#fff; }

.wrap{ width:100%; max-width:var(--wrap); margin-inline:auto; padding-inline:var(--pad); }

/* zodat de vaste nav de sectiekop niet afdekt bij ankerlinks */
section[id]{ scroll-margin-top:92px; }
#home{ scroll-margin-top:0; }
body.no-scroll{ overflow:hidden; }

.skip-link{
  position:fixed; top:-100px; left:1rem; z-index:999;
  background:var(--ember); color:#fff; padding:.7rem 1.2rem; border-radius:10px;
  transition:top .25s var(--ease);
}
.skip-link:focus{ top:1rem; }
:focus-visible{ outline:2px solid var(--ember-hot); outline-offset:3px; border-radius:6px; }

/* ── 3. Typografie ─────────────────────────────────────── */
h1,h2,h3{ font-family:var(--f-display); font-weight:800; line-height:.98; letter-spacing:-.035em; }
h3{ letter-spacing:-.02em; line-height:1.15; }
em{ font-family:var(--f-serif); font-style:italic; font-weight:400; letter-spacing:-.01em; }

/* Instrument Serif heeft een lagere x-hoogte dan Inter: op dezelfde punt-grootte
   oogt de cursief kleiner dan de tekst eromheen. Dit trekt dat optisch gelijk.
   Alleen in lopende tekst, niet in de koppen: daar is de cursief al groot en
   hoort hij bij de verhoudingen van het ontwerp.
   De line-height gaat mee omlaag (1.12 x 1.5 = 1.68, net onder de 1.7 van de
   alinea), anders wordt die ene regel hoger dan de rest en gaat de regelafstand
   zichtbaar hobbelen. */
p em{ font-size:1.12em; line-height:1.5; }
strong{ font-weight:600; color:var(--ash); }

.eyebrow{
  display:inline-flex; align-items:flex-start; gap:.6rem;
  font-size:.74rem; font-weight:500; letter-spacing:.22em; text-transform:uppercase;
  color:var(--ash-3); line-height:1.5;
}
.eyebrow__regel,.foot__regel{ display:block; }
.eyebrow__dot{
  flex-shrink:0; margin-top:.5em;
  width:6px; height:6px; border-radius:50%; background:var(--ember);
  box-shadow:0 0 0 4px rgba(245,37,31,.15);
  animation:pulse 2.6s var(--ease) infinite;
}
@keyframes pulse{ 0%,100%{box-shadow:0 0 0 4px rgba(245,37,31,.15)} 50%{box-shadow:0 0 0 9px rgba(245,37,31,0)} }

.lead{ font-size:clamp(1.06rem,.6vw + .95rem,1.28rem); color:var(--ash-2); }
p{ color:var(--ash-2); text-wrap:pretty; }

/* ── 4. Textuur & chroom ───────────────────────────────── */
.grain{
  position:fixed; inset:-50%; z-index:9998; pointer-events:none; opacity:.22;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");
  mix-blend-mode:overlay;
  animation:grain 7s steps(6) infinite;
}
@keyframes grain{
  0%,100%{transform:translate(0,0)} 20%{transform:translate(-3%,2%)}
  40%{transform:translate(2%,-3%)} 60%{transform:translate(-2%,-2%)} 80%{transform:translate(3%,1%)}
}

.progress{ position:fixed; top:0; left:0; right:0; height:2px; z-index:9997; background:transparent; }
.progress span{ display:block; height:100%; width:0; background:var(--grad-ember); box-shadow:0 0 14px rgba(245,37,31,.7); }

/* eigen cursor */
.cursor{ position:fixed; top:0; left:0; z-index:9999; pointer-events:none; opacity:0; transition:opacity .3s; }
.cursor.is-on{ opacity:1; }
.cursor__dot,.cursor__ring{ position:absolute; border-radius:50%; transform:translate(-50%,-50%); }
.cursor__dot{ width:6px; height:6px; background:var(--ember); }
.cursor__ring{
  width:34px; height:34px; border:1px solid rgba(246,241,234,.35);
  transition:width .3s var(--ease),height .3s var(--ease),border-color .3s,background .3s;
}
.cursor.is-hover .cursor__ring{ width:58px; height:58px; border-color:var(--ember); background:rgba(245,37,31,.10); }
.cursor.is-hover .cursor__dot{ opacity:0; }
@media (pointer:coarse),(hover:none){ .cursor{ display:none !important; } }

/* ── 5. Knoppen ────────────────────────────────────────── */
.btn{
  --bh:54px;
  position:relative; display:inline-flex; align-items:center; justify-content:center; gap:.6rem;
  height:var(--bh); padding:0 1.7rem; border-radius:999px;
  font-size:.9rem; font-weight:600; letter-spacing:.01em; white-space:nowrap;
  overflow:hidden; isolation:isolate;
  transition:transform .3s var(--ease), box-shadow .35s var(--ease), color .3s;
  will-change:transform;
}
.btn span{ position:relative; z-index:2; }
.btn svg{ position:relative; z-index:2; transition:transform .35s var(--ease); }
.btn--sm{ --bh:42px; padding:0 1.15rem; font-size:.83rem; }
.btn--block{ width:100%; }

.btn--ember{ color:#fff; background:var(--grad-ember); box-shadow:0 8px 30px -10px rgba(245,37,31,.65); }
.btn--ember::before{
  content:""; position:absolute; inset:0; z-index:1; opacity:0;
  background:linear-gradient(100deg,var(--ember),var(--ember-hot) 55%,#ffa04d);
  transition:opacity .4s var(--ease);
}
.btn--ember:hover{ box-shadow:0 14px 42px -10px rgba(245,37,31,.85); }
.btn--ember:hover::before{ opacity:1; }
.btn--ember:hover svg{ transform:translateX(4px); }

.btn--ghost{ color:var(--ash); border:1px solid var(--line-2); background:var(--glass); backdrop-filter:blur(8px); }
.btn--ghost::before{
  content:""; position:absolute; inset:0; z-index:1; background:var(--grad-ember);
  transform:translateY(101%); transition:transform .45s var(--ease-out);
}
.btn--ghost:hover{ color:#fff; border-color:transparent; }
.btn--ghost:hover::before{ transform:translateY(0); }
.btn:active{ transform:scale(.97); }

/* ── 5b. Etiket ────────────────────────────────────────── */
/* Klein label naast een naam, zoals "In de maak" bij een site die nog
   niet online staat. Zelfde vorm als de statuspil op het portfolio,
   maar kleiner, want hij staat in een lopende regel naast de naam.
   Amber: geen groen (dat is live) en geen rood (dat leest als fout). */
.etiket{
  display:inline-flex; align-items:center; vertical-align:middle;
  padding:.18rem .55rem; border-radius:999px;
  border:1px solid rgba(240,181,66,.4); color:#f0b542;
  font-family:var(--f-body); font-size:.62rem; font-weight:500;
  letter-spacing:.12em; text-transform:uppercase; white-space:nowrap;
}
/* Grijs voor wat geen klant is en ook niet in de maak: "Eigen ontwerp".
   Amber zou dat te veel gewicht geven naast de echte klantsites. */
.etiket--stil{ border-color:var(--line-2); color:var(--ash-3); }

/* ── 6. Navigatie ──────────────────────────────────────── */
.nav{
  position:fixed; top:clamp(.6rem,1.6vw,1.1rem); left:0; right:0; z-index:900;
  padding-inline:var(--pad);
  transition:transform .45s var(--ease);
}
.nav.is-hidden{ transform:translateY(calc(-100% - 2rem)); }
.nav__inner{
  max-width:var(--wrap); margin-inline:auto;
  display:flex; align-items:center; gap:1.25rem;
  padding:.55rem .55rem .55rem 1.35rem; border-radius:999px;
  border:1px solid var(--line);
  background:rgba(10,9,8,.55);
  backdrop-filter:blur(18px) saturate(140%);
  -webkit-backdrop-filter:blur(18px) saturate(140%);
  transition:background .4s var(--ease), border-color .4s, box-shadow .4s;
}
.nav.is-stuck .nav__inner{
  background:rgba(10,9,8,.85);
  border-color:var(--line-2);
  box-shadow:0 18px 50px -22px rgba(0,0,0,.9);
}
.nav__logo img{ width:158px; height:auto; }

.nav__links{ position:relative; display:flex; align-items:center; gap:.2rem; margin-left:auto; }
.nav__link{
  position:relative; z-index:2; padding:.55rem .95rem; border-radius:999px;
  font-size:.86rem; font-weight:500; color:var(--ash-3);
  transition:color .3s var(--ease);
}
.nav__link:hover{ color:var(--ash); }
.nav__link.is-active{ color:var(--ash); }
.nav__pill{
  position:absolute; z-index:1; top:0; left:0; height:100%; width:0;
  border-radius:999px; background:var(--glass); border:1px solid var(--line);
  opacity:0; transition:transform .5s var(--ease), width .5s var(--ease), opacity .3s;
}
.nav__pill.is-on{ opacity:1; }
.nav__cta{ margin-left:.35rem; }

.burger{ display:none; width:42px; height:42px; border-radius:50%; border:1px solid var(--line-2);
  margin-left:auto; position:relative; flex-shrink:0; }
.burger span{
  position:absolute; left:50%; width:16px; height:1.6px; background:var(--ash); border-radius:2px;
  transform:translateX(-50%); transition:transform .4s var(--ease), opacity .3s;
}
.burger span:nth-child(1){ top:17px; }
.burger span:nth-child(2){ top:23px; }
.burger.is-open span:nth-child(1){ transform:translateX(-50%) translateY(3px) rotate(45deg); }
.burger.is-open span:nth-child(2){ transform:translateX(-50%) translateY(-3px) rotate(-45deg); }

/* mobiel menu */
.menu{
  position:fixed; inset:0; z-index:890; display:flex; flex-direction:column;
  justify-content:center; gap:2rem; padding:6rem var(--pad) 3rem;
  background:rgba(10,9,8,.97); backdrop-filter:blur(20px);
  opacity:0; transition:opacity .4s var(--ease);
  /* Zonder dit vangt het onzichtbare menu alle klikken op de pagina op. */
  pointer-events:none;
}
/* display:flex hierboven overschrijft het standaard-gedrag van het hidden-attribuut
   (class wint van de browserstijl), dus dat moet expliciet terug. */
.menu[hidden]{ display:none; }
.menu.is-open{ opacity:1; pointer-events:auto; }
.menu__nav{ display:flex; flex-direction:column; gap:.35rem; }
.menu__link{
  display:flex; align-items:baseline; gap:1rem;
  font-family:var(--f-display); font-size:clamp(2rem,9vw,3rem); font-weight:800;
  letter-spacing:-.04em; line-height:1.15;
  opacity:0; transform:translateY(24px);
  transition:opacity .5s var(--ease), transform .5s var(--ease), color .3s;
}
.menu.is-open .menu__link{ opacity:1; transform:none; }
.menu__link i{ font-family:var(--f-body); font-style:normal; font-size:.72rem; font-weight:500;
  letter-spacing:.2em; color:var(--ember); }
.menu__link:hover{ color:var(--ember); }
.menu__foot{ display:flex; flex-direction:column; gap:.35rem; font-size:.92rem; color:var(--ash-3);
  border-top:1px solid var(--line); padding-top:1.5rem; }
.menu__foot a:hover{ color:var(--ember); }

/* ── 7. Hero ───────────────────────────────────────────── */
.hero{
  position:relative; min-height:100svh; display:flex; align-items:center;
  padding:clamp(7rem,15vh,9rem) 0 clamp(4rem,8vh,6rem);
  overflow:hidden;
}
.hero__glow{
  position:absolute; z-index:0; pointer-events:none;
  width:min(150vw,1500px); aspect-ratio:1; left:66%; top:-36%;
  transform:translateX(-50%);
  background:
    radial-gradient(closest-side, rgba(245,37,31,.32), rgba(245,37,31,.08) 44%, transparent 70%),
    radial-gradient(closest-side at 58% 58%, rgba(255,106,43,.18), transparent 60%);
  filter:blur(30px);
  animation:breathe 11s ease-in-out infinite;
}
@media (max-width:1080px){ .hero__glow{ left:50%; top:-22%; } }
@keyframes breathe{ 0%,100%{transform:translateX(-50%) scale(1);opacity:.85} 50%{transform:translateX(-50%) scale(1.1);opacity:1} }

.hero__grid{
  position:relative; z-index:2;
  display:grid; grid-template-columns:1.15fr .85fr; gap:clamp(2rem,5vw,4.5rem); align-items:center;
}
.hero__title{
  font-size:clamp(3.1rem,11.5vw,8.2rem);
  margin:1.4rem 0 1.6rem;
}
.hero__title .split{ display:block; }
.hero__title--ember{
  background:var(--grad-ember);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.hero__lead{ max-width:50ch; font-size:clamp(1.02rem,.6vw + .9rem,1.22rem); color:var(--ash-2); }
.hero__actions{ display:flex; flex-wrap:wrap; gap:.8rem; margin-top:2.2rem; }

.hero__meta{
  display:flex; flex-wrap:wrap; gap:clamp(1.2rem,3vw,2.6rem);
  margin-top:3rem; padding-top:1.6rem; border-top:1px solid var(--line);
}
.hero__meta dt{ font-size:.68rem; letter-spacing:.2em; text-transform:uppercase; color:var(--ash-3); margin-bottom:.25rem; }
.hero__meta dd{ font-size:.94rem; font-weight:500; }
.hero__meta a{ transition:color .3s; }
.hero__meta a:hover{ color:var(--ember); }

/* portret */
.hero__figure{ position:relative; }
.portrait{ position:relative; transform-style:preserve-3d; }

/* Gloed áchter de foto, zodat hij niet los op de zwarte pagina zweeft. */
.portrait::before{
  content:""; position:absolute; z-index:-1; pointer-events:none;
  inset:6% -14% -10% -14%;
  background:radial-gradient(60% 55% at 50% 45%, rgba(245,37,31,.34), rgba(255,106,43,.10) 55%, transparent 78%);
  filter:blur(26px);
}

/* Boogvorm: bovenaan rond als een poort, onderaan lost de foto op in de pagina.
   Dat leest als een bewuste vorm in plaats van een rechthoekige foto in een doos,
   en de boog rijmt op het bladerdak in de foto zelf. */
.portrait__frame{
  position:relative; aspect-ratio:4/5;
  transform:translateZ(0);
  overflow:hidden;
  border-radius:50% 50% 20px 20px / 38% 38% 3% 3%;
  -webkit-mask-image:linear-gradient(to bottom, #000 62%, rgba(0,0,0,.5) 86%, transparent 100%);
  mask-image:linear-gradient(to bottom, #000 62%, rgba(0,0,0,.5) 86%, transparent 100%);
}
.portrait__frame img{ width:100%; height:100%; object-fit:cover; object-position:50% 22%; }

/* Kopfoto-variant: de boog blijft, maar wordt een warm gloeiend vlak in plaats van
   een fotokader. De uitgeknipte foto staat erin, onderaan uitgelijnd. */
.portrait--hoofd .portrait__frame{
  display:flex; align-items:flex-end; justify-content:center;
  background:
    radial-gradient(115% 85% at 50% 18%, rgba(245,37,31,.24), rgba(255,106,43,.07) 52%, transparent 74%),
    linear-gradient(180deg, var(--ink-3), var(--ink-2) 70%, var(--ink));
}
.portrait--hoofd .portrait__frame img{
  /* Op breedte schalen, niet op hoogte: de foto is iets breder dan de boog,
     dus op hoogte schalen zou hem door max-width horizontaal platdrukken. */
  width:100%; height:auto; object-fit:fill; margin-inline:auto;
  /* --masker wordt door index.php op de img gezet, mét versienummer, zodat
     de uitsnede nooit uit de pas loopt met de foto. */
  -webkit-mask-image:var(--masker);
  mask-image:var(--masker);
  -webkit-mask-size:100% 100%; mask-size:100% 100%;
  -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat;
  filter:drop-shadow(0 18px 30px rgba(0,0,0,.7));
}

/* Vrijstaande variant. De foto is een gewone JPEG (60 KB) met een apart alfamasker
   ernaast (33 KB) -- samen 8x lichter dan dezelfde uitsnede als PNG met transparantie.
   De img krijgt height:100% en width:auto zodat zijn eigen verhouding leidend is,
   waardoor het masker op 100% 100% precies samenvalt met de foto. */
.portrait--uitgeknipt .portrait__frame{
  -webkit-mask-image:none; mask-image:none;
  border-radius:0; overflow:visible;
  display:flex; align-items:flex-end; justify-content:center;
  filter:drop-shadow(0 30px 45px rgba(0,0,0,.9));
}
.portrait--uitgeknipt .portrait__frame img{
  width:auto; height:100%; object-fit:fill;
  -webkit-mask-image:url("../assets/portret-masker.png");
  mask-image:url("../assets/portret-masker.png");
  -webkit-mask-size:100% 100%; mask-size:100% 100%;
  -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat;
}
.portrait--uitgeknipt::before{ inset:16% -6% -4% -6%; }

.chip{
  position:absolute; display:inline-flex; align-items:center; gap:.4rem;
  padding:.5rem .9rem; border-radius:999px;
  font-size:.78rem; font-weight:500; white-space:nowrap;
  background:rgba(16,14,12,.72); border:1px solid var(--line-2);
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  box-shadow:0 12px 34px -14px rgba(0,0,0,.9);
  transform:translateZ(48px);
}
.chip--1{ top:8%; left:-9%; }
.chip--2{ top:44%; right:-11%; }
.chip--3{ bottom:8%; left:-6%; color:var(--ash); }
.chip--3 svg{ color:var(--ember); }

/* Het scrollteken stond in het midden, en dat is precies waar de onderste
   regel van de herotekst eindigt. Op 1900 bij 960 liep het er 59 pixels
   overheen, op kleinere schermen nog meer.

   Meer onderrand geven loste het niet op: op een scherm van 800 hoog past
   de heroinhoud sowieso niet binnen één schermhoogte en schuift ze er toch
   doorheen. Daarom staat het nu rechts, tegen de rand van de kolom, onder
   de foto. Daar eindigt de inhoud hoger en is het altijd vrij.

   right: rekent mee met de gecentreerde kolom, zodat het teken bij elke
   schermbreedte netjes onder de rechterrand van de foto blijft. */
.scrollcue{
  position:absolute; z-index:3; bottom:1.8rem;
  right:max(var(--pad), (100% - var(--wrap)) / 2);
  display:flex; flex-direction:column; align-items:center; gap:.6rem;
  font-size:.66rem; letter-spacing:.28em; text-transform:uppercase; color:var(--ash-3);
}
.scrollcue__line{ width:1px; height:44px; background:linear-gradient(var(--ember),transparent); position:relative; overflow:hidden; }
.scrollcue__line::after{
  content:""; position:absolute; inset:0; background:var(--ash);
  animation:slide 2.2s var(--ease) infinite;
}
@keyframes slide{ 0%{transform:translateY(-100%)} 60%,100%{transform:translateY(100%)} }

/* ── 8. Loopband ───────────────────────────────────────── */
.marquee{
  overflow:hidden; border-block:1px solid var(--line);
  background:var(--ink-2); padding:1.15rem 0;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
}
.marquee__track{ display:flex; width:max-content; animation:scroll 34s linear infinite; }
.marquee:hover .marquee__track{ animation-play-state:paused; }
.marquee__set{ display:flex; align-items:center; gap:2.6rem; padding-right:2.6rem; }
.marquee__set span{
  font-family:var(--f-display); font-size:clamp(1rem,2.4vw,1.5rem); font-weight:600;
  letter-spacing:-.02em; color:var(--ash-2); text-transform:uppercase;
}
.marquee__set i{ color:var(--ember); font-style:normal; font-size:.9rem; }
@keyframes scroll{ to{ transform:translateX(-50%); } }

/* ── 9. Sectiekop ──────────────────────────────────────── */
.section{ position:relative; padding-block:var(--sect); }
.shead{ display:flex; gap:clamp(1rem,3vw,2.4rem); margin-bottom:clamp(2.8rem,6vw,4.5rem); }
.shead__num{
  font-family:var(--f-display); font-size:clamp(2.4rem,5vw,3.6rem); font-weight:800;
  line-height:1; letter-spacing:-.05em;
  color:transparent; -webkit-text-stroke:1px var(--line-2);
  flex-shrink:0; padding-top:.35rem;
}
.shead__title{ font-size:clamp(2.1rem,6.2vw,4.2rem); margin-top:.7rem; }
.shead__title em{ color:var(--ember); }

/* ── 10. Over mij ──────────────────────────────────────── */
.over__grid{ display:grid; grid-template-columns:1.25fr .75fr; gap:clamp(2rem,5vw,4rem); align-items:start; }
.over__text > p + p{ margin-top:1.15rem; }

.tags{ display:flex; flex-wrap:wrap; gap:.5rem; margin-top:2.2rem; }
.tags li{
  padding:.45rem .95rem; border-radius:999px; border:1px solid var(--line);
  background:var(--glass); font-size:.8rem; color:var(--ash-2);
  transition:border-color .3s, color .3s, transform .3s var(--ease);
}
.tags li:hover{ border-color:var(--ember); color:var(--ash); transform:translateY(-2px); }

.over__side{ display:flex; flex-direction:column; gap:1.4rem; }
.stats{ display:grid; grid-template-columns:1fr 1fr; gap:1px; background:var(--line);
  border:1px solid var(--line); border-radius:var(--r); overflow:hidden; }
.stat{ background:var(--ink-2); padding:1.5rem 1.2rem; transition:background .4s var(--ease); }
.stat:hover{ background:var(--ink-3); }
.stat__num{
  display:block; font-family:var(--f-display); font-size:clamp(2rem,4vw,2.7rem); font-weight:800;
  line-height:1; letter-spacing:-.04em;
  background:var(--grad-ember); -webkit-background-clip:text; background-clip:text; color:transparent;
}
.stat__lbl{ display:block; margin-top:.5rem; font-size:.78rem; color:var(--ash-3); letter-spacing:.02em; }

.quote{
  position:relative; padding:1.8rem 1.6rem 1.6rem; border-radius:var(--r);
  border:1px solid var(--line); background:linear-gradient(160deg,rgba(245,37,31,.10),transparent 60%);
}
.quote::before{
  content:"“"; position:absolute; top:-.4rem; left:1.1rem;
  font-family:var(--f-serif); font-size:4.5rem; color:var(--ember); opacity:.35; line-height:1;
}
.quote p{ font-family:var(--f-serif); font-size:1.35rem; line-height:1.4; color:var(--ash); position:relative; }
.quote cite{ display:block; margin-top:.9rem; font-size:.76rem; font-style:normal; color:var(--ash-3); letter-spacing:.04em; }

/* ── 11. Manifest ──────────────────────────────────────── */
.manifest{ border-block:1px solid var(--line); background:var(--ink-2); }
.manifest__grid{ display:grid; grid-template-columns:repeat(3,1fr); }
.mani{
  padding:clamp(2.2rem,4.5vw,3.4rem) clamp(1.3rem,2.6vw,2.2rem);
  border-left:1px solid var(--line); position:relative; overflow:hidden;
}
.mani:first-child{ border-left:0; }
.mani::after{
  content:""; position:absolute; left:0; bottom:0; width:100%; height:2px;
  background:var(--grad-ember); transform:scaleX(0); transform-origin:left;
  transition:transform .6s var(--ease-out);
}
.mani:hover::after{ transform:scaleX(1); }
.mani__num{ font-size:.7rem; letter-spacing:.24em; color:var(--ember); font-weight:500; }
.mani h3{ font-size:clamp(1.2rem,2.2vw,1.5rem); margin:.9rem 0 .7rem; }
.mani p{ font-size:.94rem; }

/* ── 12. Diensten ──────────────────────────────────────── */
.cards{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(1rem,2vw,1.5rem); }
.card{
  position:relative; display:flex; flex-direction:column;
  padding:clamp(1.6rem,2.6vw,2.2rem); border-radius:var(--r-lg);
  border:1px solid var(--line); background:var(--ink-2);
  overflow:hidden; isolation:isolate;
  transform-style:preserve-3d;
  transition:border-color .45s var(--ease), background .45s var(--ease), box-shadow .45s var(--ease);
}
.card:hover{ border-color:var(--line-2); background:var(--ink-3); box-shadow:0 34px 70px -34px rgba(0,0,0,.95); }
.card__glow{
  position:absolute; inset:-1px; z-index:-1; opacity:0; pointer-events:none;
  background:radial-gradient(420px circle at var(--mx,50%) var(--my,0%), rgba(245,37,31,.20), transparent 62%);
  transition:opacity .45s var(--ease);
}
.card:hover .card__glow{ opacity:1; }
.card__top{ display:flex; align-items:flex-start; justify-content:space-between; margin-bottom:1.4rem; }
.card__ico{
  display:grid; place-items:center; width:48px; height:48px; border-radius:14px;
  border:1px solid var(--line-2); background:var(--glass); color:var(--ember);
  transition:transform .5s var(--ease), background .4s, color .4s;
}
.card:hover .card__ico{ transform:translateY(-3px) rotate(-6deg); background:rgba(245,37,31,.12); }
.card__num{
  font-family:var(--f-display); font-size:2.6rem; font-weight:800; line-height:1; letter-spacing:-.05em;
  color:transparent; -webkit-text-stroke:1px var(--line-2);
  transition:-webkit-text-stroke-color .4s;
}
.card:hover .card__num{ -webkit-text-stroke-color:rgba(245,37,31,.55); }
.card__title{ font-size:clamp(1.35rem,2.4vw,1.72rem); margin-bottom:.85rem; }
.card__txt{ font-size:.95rem; }
.card__list{ margin:1.5rem 0 1.8rem; display:flex; flex-direction:column; gap:.6rem; }
.card__list li{ position:relative; padding-left:1.5rem; font-size:.88rem; color:var(--ash-2); }
.card__list li::before{
  content:""; position:absolute; left:0; top:.62em; width:9px; height:2px;
  background:var(--ember); border-radius:2px;
}
.card__link{
  margin-top:auto; display:inline-flex; align-items:center; gap:.5rem; align-self:flex-start;
  font-size:.86rem; font-weight:600; color:var(--ash);
  padding-bottom:.35rem; border-bottom:1px solid var(--line-2);
  transition:color .3s, border-color .3s, gap .3s var(--ease);
}
.card__link:hover{ color:var(--ember); border-color:var(--ember); gap:.85rem; }

/* ── 13. Werkwijze ─────────────────────────────────────── */
.werkwijze{ background:var(--ink-2); border-block:1px solid var(--line); }
.steps{ position:relative; display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(1rem,2.4vw,2rem); padding-top:2.6rem; }
.steps__rail{ position:absolute; top:0; left:0; right:0; height:1px; background:var(--line); }
.steps__rail i{ display:block; height:100%; width:0; background:var(--grad-ember);
  box-shadow:0 0 12px rgba(245,37,31,.8); transition:width .1s linear; }
.step{ position:relative; padding-top:1.9rem; }
.step::before{
  content:""; position:absolute; top:-4px; left:0; width:9px; height:9px; border-radius:50%;
  background:var(--ink-2); border:1px solid var(--line-2);
  transition:background .4s, border-color .4s, box-shadow .4s;
}
.step.is-in::before{ background:var(--ember); border-color:var(--ember); box-shadow:0 0 0 5px rgba(245,37,31,.16); }
.step__n{
  display:block; font-family:var(--f-display); font-size:.8rem; font-weight:600;
  letter-spacing:.2em; color:var(--ember); margin-bottom:.9rem;
}
.step h3{ font-size:clamp(1.25rem,2.3vw,1.6rem); margin-bottom:.6rem; }
.step p{ font-size:.92rem; }

/* ── 14. Contact ───────────────────────────────────────── */
.contact{ position:relative; overflow:hidden; }
.contact__glow{
  position:absolute; z-index:0; pointer-events:none;
  width:min(120vw,1100px); aspect-ratio:1; right:-25%; bottom:-45%;
  background:radial-gradient(closest-side, rgba(245,37,31,.20), transparent 68%);
  filter:blur(30px);
}
.contact .wrap{ position:relative; z-index:2; }
.contact__grid{ display:grid; grid-template-columns:1.35fr .65fr; gap:clamp(1.6rem,3.5vw,3rem); align-items:start; }

.form{
  padding:clamp(1.5rem,3vw,2.4rem); border-radius:var(--r-lg);
  border:1px solid var(--line); background:rgba(16,14,12,.62);
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  display:flex; flex-direction:column; gap:1.1rem;
}
.form__row{ display:grid; grid-template-columns:1fr 1fr; gap:1.1rem; }
.hp{ position:absolute; left:-9999px; opacity:0; }

.field{ position:relative; }
.field input,.field select,.field textarea{
  width:100%; padding:1.45rem 1rem .6rem; border-radius:12px;
  border:1px solid var(--line); background:var(--ink); color:var(--ash);
  font-size:.94rem; transition:border-color .3s, background .3s, box-shadow .3s;
  appearance:none;
}
.field textarea{ resize:vertical; min-height:130px; line-height:1.6; }
.field select{ padding-top:1.5rem; cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none' stroke='%238C837A' stroke-width='1.8'%3E%3Cpath d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 1rem center; }
.field label{
  position:absolute; left:1rem; top:1.05rem; pointer-events:none;
  font-size:.92rem; color:var(--ash-3);
  transform-origin:left top;
  transition:transform .28s var(--ease), color .28s;
}
.field input:focus + label, .field textarea:focus + label,
.field input:not(:placeholder-shown) + label, .field textarea:not(:placeholder-shown) + label,
.field .label--static{
  transform:translateY(-.72rem) scale(.76); color:var(--ash-3);
}
.field input:focus + label, .field textarea:focus + label{ color:var(--ember); }
.field input:focus,.field select:focus,.field textarea:focus{
  outline:none; border-color:var(--ember); box-shadow:0 0 0 3px rgba(245,37,31,.12);
}
.field .opt{ opacity:.6; }
.field__err{ display:block; min-height:0; margin-top:.35rem; font-size:.76rem; color:var(--ember-hot); }
.field.has-err input,.field.has-err textarea{ border-color:var(--ember); }

#submitBtn{ margin-top:.4rem; }
.btn__spin{
  width:15px; height:15px; border-radius:50%; display:none;
  border:2px solid rgba(255,255,255,.35); border-top-color:#fff;
  animation:spin .7s linear infinite; position:relative; z-index:2;
}
@keyframes spin{ to{ transform:rotate(360deg); } }
#submitBtn.is-busy{ pointer-events:none; }
#submitBtn.is-busy .btn__spin{ display:block; }

.form__note{ min-height:1.2rem; font-size:.85rem; margin-top:.2rem; }
.form__note.ok{ color:#5ed49a; }
.form__note.err{ color:var(--ember-hot); }

.contact__side{ display:flex; flex-direction:column; gap:.8rem; }
.ctile{
  display:flex; align-items:center; gap:1rem; padding:1.15rem 1.25rem;
  border-radius:var(--r); border:1px solid var(--line); background:var(--ink-2);
  transition:border-color .35s, background .35s, transform .35s var(--ease);
  will-change:transform;
}
.ctile:hover{ border-color:var(--line-2); background:var(--ink-3); }
.ctile__ico{ display:grid; place-items:center; width:42px; height:42px; border-radius:12px;
  background:rgba(245,37,31,.1); color:var(--ember); flex-shrink:0; }
.ctile__body{ display:flex; flex-direction:column; min-width:0; }
.ctile__body b{ font-size:.7rem; font-weight:500; letter-spacing:.18em; text-transform:uppercase; color:var(--ash-3); }
.ctile__body span{ font-size:.95rem; font-weight:500; overflow:hidden; text-overflow:ellipsis; }
.ctile__arrow{ margin-left:auto; color:var(--ash-3); transition:transform .35s var(--ease), color .3s; }
.ctile:hover .ctile__arrow{ transform:translateX(4px); color:var(--ember); }

/* Nog niet in gebruik: de social-knoppen staan uit tot Brian profielen heeft.
   Opmaak blijft hier staan zodat terugzetten alleen een stukje HTML kost. */
.socials{ margin-top:.6rem; padding:1.25rem; border-radius:var(--r); border:1px solid var(--line); }
.socials__lbl{ font-size:.7rem; letter-spacing:.2em; text-transform:uppercase; color:var(--ash-3); margin-bottom:.9rem; }
.socials__row{ display:flex; gap:.55rem; }
.soc{
  display:grid; place-items:center; width:42px; height:42px; border-radius:12px;
  border:1px solid var(--line); color:var(--ash-2);
  transition:border-color .3s, color .3s, background .3s, transform .3s var(--ease);
  will-change:transform;
}
.soc:hover{ border-color:var(--ember); color:var(--ember); background:rgba(245,37,31,.08); }
.contact__small{ font-size:.85rem; color:var(--ash-3); padding-inline:.25rem; }

/* ── 15. Footer ────────────────────────────────────────── */
.foot{ border-top:1px solid var(--line); background:var(--ink-2); padding-top:clamp(3rem,6vw,4.5rem); }
.foot__top{ display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:1.5rem;
  padding-bottom:clamp(2rem,4vw,3rem); }
.foot__logo img{ width:196px; height:auto; transition:opacity .3s; }
.foot__logo:hover img{ opacity:.75; }
.foot__claim{ font-family:var(--f-display); font-size:clamp(1.1rem,2.4vw,1.6rem); font-weight:600;
  letter-spacing:-.03em; color:var(--ash); }
.foot__bar{
  display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:1rem;
  border-top:1px solid var(--line); padding-block:1.5rem;
  font-size:.83rem; color:var(--ash-3);
}
.foot__nav{ display:flex; flex-wrap:wrap; gap:1.4rem; }
.foot__nav a{ transition:color .3s; }
.foot__nav a:hover{ color:var(--ember); }

/* ── 16. Reveal-animaties ──────────────────────────────── */
/* Alles start pas onzichtbaar als <html> de klasse .js heeft. Zonder JavaScript
   staat er dus gewoon een volledig leesbare pagina. */
.js .reveal{ opacity:0; transform:translateY(26px); }
.js .reveal.is-in{
  opacity:1; transform:none;
  transition:opacity .8s var(--ease-out), transform .8s var(--ease-out);
  transition-delay:calc(var(--d,0) * 90ms);
}
.split .ch{ display:inline-block; }
.js .split .ch{ opacity:0; transform:translateY(.85em) rotate(4deg); }
.js .split.is-in .ch{
  opacity:1; transform:none;
  transition:opacity .7s var(--ease-out), transform .8s var(--ease-out);
  transition-delay:calc(var(--i) * 32ms);
}

/* ── 17. Responsive ────────────────────────────────────── */
@media (max-width:1080px){
  .nav__links{ display:none; }
  .nav__cta{ display:none; }
  .burger{ display:block; }
  .nav__inner{ padding:.5rem .5rem .5rem 1.1rem; }
  .hero__grid{ grid-template-columns:1fr; }
  .hero__figure{ order:-1; max-width:340px; margin-inline:auto; }
  .hero{ min-height:auto; text-align:left; }
  /* De hero vult hier het scherm niet meer, dus valt deze aanwijzing over de
     tekst. Op een telefoon scrollt iedereen toch vanzelf; dat hoeft niet
     aangewezen te worden. */
  .scrollcue{ display:none; }
  .chip--1{ left:-4%; } .chip--2{ right:-4%; } .chip--3{ left:-2%; }
  .over__grid{ grid-template-columns:1fr; }
  .cards{ grid-template-columns:1fr 1fr; }
  .steps{ grid-template-columns:1fr 1fr; row-gap:2.4rem; }
  .contact__grid{ grid-template-columns:1fr; }
}
@media (max-width:760px){
  .manifest__grid{ grid-template-columns:1fr; }
  .mani{ border-left:0; border-top:1px solid var(--line); }
  .mani:first-child{ border-top:0; }
  .cards{ grid-template-columns:1fr; }
  .shead{ flex-direction:column; gap:.4rem; }
  .shead__num{ padding-top:0; }
  .form__row{ grid-template-columns:1fr; }
  .hero__meta{ gap:1.1rem; }
  .hero__meta > div{ min-width:44%; }
  .foot__bar{ flex-direction:column; align-items:flex-start; }
}
@media (max-width:520px){
  .steps{ grid-template-columns:1fr; }
  .stats{ grid-template-columns:1fr 1fr; }
  .hero__actions .btn{ width:100%; }
  .hero__figure{ max-width:262px; }
  .chip--2{ right:-4%; font-size:.7rem; }
  .chip--1,.chip--3{ font-size:.7rem; }
  .chip{ padding:.4rem .7rem; }
}

/* ── 18. Toegankelijkheid: minder beweging ─────────────── */
@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{
    animation-duration:.01ms !important; animation-iteration-count:1 !important;
    transition-duration:.01ms !important; scroll-behavior:auto !important;
  }
  .js .reveal,.js .split .ch{ opacity:1 !important; transform:none !important; }
  .grain,.cursor{ display:none; }
}

@media print{
  .nav,.menu,.cursor,.grain,.progress,.marquee,.scrollcue{ display:none !important; }
  body{ background:#fff; color:#000; }
}

/* ── 15b. Instagram in de voettekst ────────────────────── */
/* Staat bewust náást de claim en niet tussen de zes tekstlinks eronder:
   daar was het het zevende blauwe woordje geworden en had niemand het
   gezien. Met het icoontje erbij herkent men het van een meter ver. */
/* Was één brede knop met "Volg op Instagram" erin. Sinds er een tweede
   kanaal bij is zijn het ronde knopjes met alleen het icoontje: twee brede
   knoppen naast elkaar duwen de voettekst uit elkaar, en bij een derde is
   er helemaal geen plaats meer. De naam staat in aria-label, dus een
   schermlezer hoort nog altijd welk kanaal het is. */
.foot__sociaal{ display:inline-flex; align-items:center; gap:.5rem; }
.foot__soc{
  display:grid; place-items:center; width:42px; height:42px;
  border:1px solid var(--line-2); border-radius:50%;
  background:var(--glass); color:var(--ash-2);
  transition:color .3s var(--ease), border-color .3s var(--ease),
             background .3s var(--ease), transform .3s var(--ease);
}
.foot__soc svg{ flex:none; }
.foot__soc:hover{ color:#fff; border-color:transparent; background:var(--grad-ember); transform:translateY(-2px); }
.foot__soc:focus-visible{ outline:2px solid var(--ember); outline-offset:3px; }

/* De wettelijke identificatieregel onderaan elke pagina. Staat hier en niet
   in tekstpagina.css, want die laadt alleen /privacy/ en deze regel hoort
   op de hele site te staan. */
.foot__wettelijk{
  padding-bottom:1.5rem; margin-top:-.5rem;
  font-size:.78rem; color:var(--ash-3);
}

/* ── 6b. De knop "Laten we praten" met haar menu (14 september 2026) ──
   Eén rode knop rechtsboven; wie erover zweeft, krijgt vier wegen: een
   kennismaking, de gratis review, een DM op Instagram en WhatsApp. Met
   het toetsenbord opent hij op focus, op een tablet op de eerste tik
   (js/main.js zet dan is-open). Onder 1080 pixels verdwijnt hij met de
   rest van de menubalk; het mobiele menu heeft dezelfde vier wegen. */
.nav__link{ white-space:nowrap; }
.nav__praat{ position:relative; }
.nav__praat-knop svg{ transition:transform .3s var(--ease); }
.nav__praat:hover .nav__praat-knop svg,
.nav__praat:focus-within .nav__praat-knop svg,
.nav__praat.is-open .nav__praat-knop svg{ transform:rotate(180deg); }
.nav__praat-menu{
  position:absolute; top:100%; right:0; z-index:5;
  min-width:290px; margin-top:.6rem; padding:.45rem;
  border-radius:var(--r); border:1px solid var(--line-2);
  background:rgba(16,14,12,.94);
  backdrop-filter:blur(18px) saturate(140%); -webkit-backdrop-filter:blur(18px) saturate(140%);
  box-shadow:0 24px 60px -24px rgba(0,0,0,.9);
  opacity:0; visibility:hidden; transform:translateY(-6px);
  transition:opacity .25s var(--ease), transform .3s var(--ease), visibility 0s .3s;
}
/* Onzichtbare brug over de spleet tussen knop en menu. Zonder dit klapt
   het menu dicht zodra de muis die paar pixels oversteekt. */
.nav__praat-menu::before{ content:""; position:absolute; left:0; right:0; top:-.7rem; height:.7rem; }
.nav__praat:hover .nav__praat-menu,
.nav__praat:focus-within .nav__praat-menu,
.nav__praat.is-open .nav__praat-menu{ opacity:1; visibility:visible; transform:none; transition-delay:0s; }
.nav__praat-menu a{
  display:flex; flex-direction:column; gap:.1rem;
  padding:.7rem .85rem; border-radius:12px;
  transition:background .25s var(--ease);
}
.nav__praat-menu a:hover, .nav__praat-menu a:focus-visible{ background:var(--glass); }
.nav__praat-menu b{ font-size:.9rem; font-weight:600; color:var(--ash); }
.nav__praat-menu span{ font-size:.78rem; color:var(--ash-3); }