/* ============================================================
   Remo Embaye — CV / one-pager
   Palet afgeleid van de herofoto: ember op bijna-zwart.

   Donker is de basis; licht overschrijft verderop alleen deze
   tokens. De -rgb varianten bestaan omdat randen, hovers en
   overlays dezelfde kleur met wisselende alpha gebruiken.

   Twee vlakken blijven bewust in beide thema's donker: de hero
   en het contactpaneel. Dat zijn foto's met een donkere overlay;
   die "licht" maken kan niet zonder andere beelden.
   ============================================================ */

:root {
  color-scheme: dark;

  --fg-rgb:     245, 241, 234;
  --bg-rgb:     10, 10, 11;
  --accent-rgb: 244, 87, 31;

  --bg:         #0a0a0b;
  --bg-2:       #121012;
  --bg-3:       #1a1719;
  --accent:     #f4571f;
  --accent-hi:  #ff7a3d;
  --fg:         #f5f1ea;
  --fg-subtle:  #8d8781;
  --fg-muted:   #b6b0a9;
  --line:       rgba(var(--fg-rgb), .11);
  --line-2:     rgba(var(--fg-rgb), .06);

  --logo-filter:  none;               /* klantlogo's zijn wit-op-transparant */
  --hero-base:    #2a0c04;            /* kleur achter de herofoto */
  --hero-dim:     .45;                /* hoeveel de hero dimt bij scrollen */
  --sheet-shadow: 0 -34px 70px rgba(0, 0, 0, .7);

  --font-display: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --font-body:    "Inter Tight", "Helvetica Neue", Arial, sans-serif;
  --font-serif:   "Instrument Serif", Georgia, serif;

  --gutter: clamp(18px, 4vw, 56px);
  --page:   min(100% - (var(--gutter) * 2), 1360px);
  --nav-h:  72px;

  --ease: cubic-bezier(.22, .68, .18, 1);
}

/* Licht volgt het apparaat, tenzij de bezoeker zelf koos. De :not() zorgt
   dat een expliciete keuze voor donker deze regel niet raakt. */
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
  color-scheme: light;

  --fg-rgb:     22, 20, 19;
  --bg-rgb:     255, 255, 255;
  --accent-rgb: 224, 74, 16;

  --bg:         #ffffff;
  --bg-2:       #f7f5f2;
  --bg-3:       #efece7;
  --accent:     #e04a10;
  --accent-hi:  #b83a08;
  --fg:         #161413;
  --fg-subtle:  #857e78;
  --fg-muted:   #55504b;

  --logo-filter:  invert(1);          /* wit silhouet wordt zwart op wit */
  --hero-base:    #f6e7d6;
  --hero-dim:     .12;
  --sheet-shadow: 0 -34px 70px rgba(0, 0, 0, .10);
  }
}

/* Expliciete keuze wint in beide richtingen; deze waarden zijn identiek
   aan het blok hierboven. */
:root[data-theme="light"] {
  color-scheme: light;

  --fg-rgb:     22, 20, 19;
  --bg-rgb:     255, 255, 255;
  --accent-rgb: 224, 74, 16;

  --bg:         #ffffff;
  --bg-2:       #f7f5f2;
  --bg-3:       #efece7;
  --accent:     #e04a10;
  --accent-hi:  #b83a08;
  --fg:         #161413;
  --fg-subtle:  #857e78;
  --fg-muted:   #55504b;

  --logo-filter:  invert(1);          /* wit silhouet wordt zwart op wit */
  --hero-base:    #f6e7d6;
  --hero-dim:     .12;
  --sheet-shadow: 0 -34px 70px rgba(0, 0, 0, .10);
}

*, *::before, *::after { box-sizing: border-box; }

html {
  background: var(--bg);
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--nav-h) + 16px);
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-body);
  font-size: clamp(15px, .45vw + 14px, 17px);
  line-height: 1.6;
  font-synthesis-weight: none;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
ul, ol, dl, dd { margin: 0; padding: 0; list-style: none; }
h1, h2, h3, p, figure { margin: 0; }

:focus-visible {
  outline: 2px solid var(--accent-hi);
  outline-offset: 3px;
  border-radius: 3px;
}

.wrap { width: var(--page); margin-inline: auto; }

.skip {
  position: fixed; z-index: 200; top: 10px; left: 10px;
  padding: 12px 18px; border-radius: 10px;
  background: var(--accent); color: #fff; font-weight: 600;
  transform: translateY(-160%); transition: transform .25s var(--ease);
}
.skip:focus-visible { transform: none; }

/* ── shared bits ─────────────────────────────────────────── */

.dot {
  width: 6px; height: 6px; flex: 0 0 6px;
  border-radius: 50%; background: var(--accent);
  box-shadow: 0 0 0 4px rgba(var(--accent-rgb), .16);
}

.kicker {
  display: flex; align-items: center; gap: 10px;
  font-size: 12px; font-weight: 500;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--fg-muted);
}

/* ============================================================
   NAV
   ============================================================ */

.nav {
  position: fixed; z-index: 100; top: 0; left: 0; right: 0;
  height: var(--nav-h);
  padding-inline: var(--gutter);
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  transition: background .4s var(--ease), border-color .4s var(--ease), backdrop-filter .4s var(--ease);
  border-bottom: 1px solid transparent;
}
.nav.is-stuck {
  background: rgba(var(--bg-rgb), .72);
  backdrop-filter: blur(16px) saturate(1.4);
  -webkit-backdrop-filter: blur(16px) saturate(1.4);
  border-bottom-color: var(--line-2);
}

.brand { display: flex; align-items: center; gap: 11px; }
.brand-mark {
  width: 30px; height: 30px; flex: none;
  display: grid; place-items: center;
  border-radius: 9px;
  background: var(--accent); color: #fff;
  font-family: var(--font-display);
  font-size: 12px; font-weight: 800; letter-spacing: -.02em;
}
.brand-name {
  font-family: var(--font-display);
  font-size: 15px; font-weight: 700;
  font-variation-settings: "wdth" 92;
  letter-spacing: -.02em;
}

.nav-links { display: flex; gap: 4px; }
.nav-links a {
  padding: 8px 13px; border-radius: 100px;
  font-size: 14px; color: var(--fg-muted);
  transition: color .25s var(--ease), background .25s var(--ease);
}
.nav-links a:hover { color: var(--fg); background: rgba(var(--fg-rgb), .07); }
.nav-links a.is-active { color: var(--fg); background: rgba(var(--fg-rgb), .09); }

.nav-actions { display: flex; align-items: center; gap: 10px; }

.lang {
  display: flex; align-items: center; gap: 2px;
  padding: 4px; border: 1px solid var(--line); border-radius: 100px;
}
.lang-btn {
  padding: 4px 10px; border-radius: 100px;
  font-size: 12px; font-weight: 600; letter-spacing: .06em;
  color: var(--fg-subtle);
  transition: color .25s var(--ease), background .25s var(--ease);
}
.lang-btn:hover { color: var(--fg); }
.lang-btn.is-active { color: var(--bg); background: var(--fg); }
.lang-sep { width: 1px; height: 12px; background: var(--line); }

.btn-contact {
  padding: 9px 18px; border-radius: 100px;
  border: 1px solid var(--line);
  font-size: 14px; font-weight: 500;
  transition: background .3s var(--ease), border-color .3s var(--ease), color .3s var(--ease);
}
.btn-contact:hover { background: var(--accent); border-color: var(--accent); color: #fff; }

/* bars are absolutely centred so the open state is an exact X */
.burger { display: none; position: relative; width: 34px; height: 34px; }
.burger i {
  position: absolute; top: 50%; left: 50%;
  width: 19px; height: 1.5px; margin: -.75px 0 0 -9.5px;
  background: var(--fg); border-radius: 2px;
  transition: transform .3s var(--ease);
}
.burger i:first-child { transform: translateY(-3.5px); }
.burger i:last-child  { transform: translateY(3.5px); }
.burger[aria-expanded="true"] i:first-child { transform: rotate(45deg); }
.burger[aria-expanded="true"] i:last-child  { transform: rotate(-45deg); }

.menu {
  position: fixed; z-index: 99; inset: 0;
  padding: calc(var(--nav-h) + 30px) var(--gutter) 40px;
  background: rgba(var(--bg-rgb), .96);
  backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
  opacity: 0; transition: opacity .32s var(--ease);
}
.menu.is-open { opacity: 1; }
.menu nav { display: grid; gap: 4px; }
.menu a {
  padding: 16px 0; border-bottom: 1px solid var(--line-2);
  font-family: var(--font-display);
  font-size: clamp(30px, 8vw, 44px); font-weight: 700;
  font-variation-settings: "wdth" 88;
  letter-spacing: -.035em; text-transform: uppercase; line-height: 1;
}

/* De hero en het contactpaneel zijn altijd donker, ongeacht het thema.
   Daarom krijgen ze hier de donkere tokens terug: alles daarbinnen erft
   dan vanzelf lichte tekst, ook als de rest van de pagina wit is.
   Zonder dit werd "REMO EMBAYE" zwart op een zwarte foto. */
/* Het contactpaneel houdt in beide thema's dezelfde donkere foto en krijgt
   daarom hier de donkere tokens terug: alles daarbinnen erft dan lichte
   tekst, ook als de rest van de pagina wit is.

   De hero staat hier bewust NIET meer bij. Die heeft sinds kort een eigen
   lichte variant, dus daar volgt de tekstkleur gewoon het thema. */
.contact-panel {
  --fg-rgb:     245, 241, 234;
  --accent-rgb: 244, 87, 31;
  --fg:         #f5f1ea;
  --fg-muted:   #b6b0a9;
  --fg-subtle:  #8d8781;
  --accent:     #f4571f;
  --accent-hi:  #ff7a3d;
  --bg:         #0a0a0b;
  --bg-3:       #1a1719;
  --line:       rgba(245, 241, 234, .11);
  --line-2:     rgba(245, 241, 234, .06);
  color: var(--fg);
}

/* ============================================================
   HERO — sticks while the content scrolls over it
   ============================================================ */

.stage { position: relative; }

.hero {
  position: sticky; top: 0; z-index: 0;
  /* lvh, not svh: the content sheet starts exactly where the hero ends, so a
     short hero would let the sheet cut into the first screen on mobile. */
  height: 100vh;
  height: 100lvh;
  min-height: 560px;
  display: grid; place-items: stretch;
  overflow: clip;
}

.hero-frame {
  position: relative; height: 100%; overflow: hidden;
  background: var(--hero-base);
  transform-origin: 50% 30%;
  will-change: transform, filter;
}

.hero-img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; object-position: 62% 42%;
  transform: scale(1.06);
}
/* Twee opnames van hetzelfde silhouet: donker op ember, en licht op crème.
   Welke zichtbaar is volgt het thema. */
.hero-img--light { display: none; }
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) .hero-img--dark  { display: none; }
  :root:not([data-theme="dark"]) .hero-img--light { display: block; }
}
:root[data-theme="light"] .hero-img--dark  { display: none; }
:root[data-theme="light"] .hero-img--light { display: block; }

/* Bij het wisselen van thema speelt hier een morph van het ene licht naar het
   andere. Hij ligt boven de stills en onder de sluier, zodat dezelfde
   gradient eroverheen valt en er geen naad zichtbaar wordt. Het silhouet
   staat in beide opnames op dezelfde plek, dus de wissel eronder valt weg. */
.hero-morph {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; object-position: 62% 42%;
  transform: scale(1.06);
  opacity: 0; pointer-events: none;
  transition: opacity .16s linear;
}
.hero-morph.is-playing { opacity: 1; }

/* Het eerste en laatste frame van de bronvideo zijn nog niet uitgekristalliseerd
   en zitten vol rimpel; de stills eronder zijn schoon. Zonder deze uitvloei
   klapt het beeld op het eind zichtbaar schoon. Nu lost het op. */
.hero-morph.is-settling { opacity: 0; transition: opacity .34s var(--ease); }

@media (prefers-reduced-motion: reduce) {
  .hero-morph { display: none; }
}

/* De sluier haalt contrast terug onder de tekst. In lichte modus moet hij
   dus juist oplichten in plaats van verdonkeren, anders valt de zwarte
   tekst weg tegen het silhouet. */
.hero-veil {
  position: absolute; inset: 0;
  background:
    radial-gradient(120% 90% at 68% 40%, transparent 20%, rgba(10, 6, 4, .55) 78%),
    linear-gradient(180deg, rgba(10, 6, 4, .62) 0%, transparent 26%, transparent 52%, rgba(10, 6, 4, .88) 100%);
}
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) .hero-veil {
    background:
      radial-gradient(120% 90% at 68% 40%, transparent 24%, rgba(255, 249, 240, .5) 80%),
      linear-gradient(180deg, rgba(255, 249, 240, .55) 0%, transparent 24%, transparent 46%, rgba(255, 249, 240, .93) 100%);
  }
}
:root[data-theme="light"] .hero-veil {
  background:
    radial-gradient(120% 90% at 68% 40%, transparent 24%, rgba(255, 249, 240, .5) 80%),
    linear-gradient(180deg, rgba(255, 249, 240, .55) 0%, transparent 24%, transparent 46%, rgba(255, 249, 240, .93) 100%);
}
.hero-grain {
  position: absolute; inset: 0; opacity: .3; mix-blend-mode: overlay;
  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='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");
}

.hero-body {
  position: absolute; z-index: 3; inset: auto 0 0 0;
  padding: 0 var(--gutter) clamp(74px, 11vh, 108px);
  display: grid; gap: clamp(18px, 3vh, 30px);
}

.hero-kicker {
  display: flex; align-items: center; gap: 10px;
  font-size: 13px; letter-spacing: .1em; text-transform: uppercase;
  color: rgba(var(--fg-rgb), .82);
}

.hero-name {
  display: flex; flex-wrap: wrap; gap: 0 clamp(14px, 2.5vw, 44px);
  font-family: var(--font-display);
  font-size: clamp(58px, 13.2vw, 210px);
  font-weight: 800;
  font-variation-settings: "wdth" 88;
  line-height: .82;
  letter-spacing: -.055em;
  text-transform: uppercase;
}

.hero-foot {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: clamp(20px, 5vw, 70px);
  padding-top: clamp(14px, 2.4vh, 26px);
  border-top: 1px solid rgba(var(--fg-rgb), .18);
}

.hero-claim {
  max-width: 30ch;
  font-size: clamp(17px, 1.5vw, 25px);
  line-height: 1.3; letter-spacing: -.015em;
  color: rgba(var(--fg-rgb), .94);
}
.hero-claim em {
  font-family: var(--font-serif); font-style: italic;
  font-size: 1.12em; color: var(--accent-hi);
}

.hero-meta { display: flex; gap: clamp(22px, 3vw, 48px); text-align: right; }
.hero-meta dt {
  font-size: 11px; letter-spacing: .14em; text-transform: uppercase;
  color: rgba(var(--fg-rgb), .55); margin-bottom: 5px;
}
.hero-meta dd { font-size: 14px; font-weight: 500; white-space: nowrap; }

.marquee {
  position: absolute; z-index: 3; inset: auto 0 0 0;
  padding: 15px 0;
  border-top: 1px solid rgba(var(--fg-rgb), .13);
  background: rgba(var(--bg-rgb), .34);
  backdrop-filter: blur(7px); -webkit-backdrop-filter: blur(7px);
  overflow: hidden;
  mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}
.marquee-track {
  display: flex; gap: 22px; width: max-content;
  animation: marquee 42s linear infinite;
  font-size: 12px; letter-spacing: .13em; text-transform: uppercase;
  color: rgba(var(--fg-rgb), .74);
}
@keyframes marquee { to { transform: translateX(-50%); } }

.scroll-hint {
  position: absolute; z-index: 3; right: var(--gutter); top: calc(var(--nav-h) + 26px);
  display: grid; justify-items: center; gap: 9px;
  font-size: 11px; letter-spacing: .16em; text-transform: uppercase;
  color: rgba(var(--fg-rgb), .62);
  transition: color .3s var(--ease);
}
.scroll-hint:hover { color: var(--fg); }
.scroll-hint svg { width: 11px; animation: bob 2.4s var(--ease) infinite; }
@keyframes bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(5px); } }

/* ============================================================
   CONTENT — slides over the hero
   ============================================================ */

.content {
  position: relative; z-index: 1;
  background: var(--bg);
  border-radius: clamp(22px, 3vw, 40px) clamp(22px, 3vw, 40px) 0 0;
  box-shadow: var(--sheet-shadow), 0 -1px 0 var(--line);
}

.section { padding: clamp(80px, 11vw, 170px) 0; }
.section + .section { border-top: 1px solid var(--line-2); }

.head {
  display: grid;
  grid-template-columns: minmax(140px, .55fr) 2.2fr auto;
  gap: clamp(20px, 3vw, 48px);
  align-items: start;
  margin-bottom: clamp(48px, 7vw, 96px);
}
.head .kicker { padding-top: 12px; }
.head h2 {
  font-family: var(--font-display);
  font-size: clamp(36px, 6.1vw, 92px);
  font-weight: 800;
  font-variation-settings: "wdth" 88;
  line-height: .93; letter-spacing: -.048em; text-transform: uppercase;
}
.count {
  font-family: var(--font-display);
  font-size: 13px; font-weight: 600; color: var(--fg-subtle);
  padding-top: 12px;
}

/* ── profiel ─────────────────────────────────────────────── */

.about {
  display: grid;
  grid-template-columns: minmax(0, .78fr) minmax(0, 1fr);
  gap: clamp(32px, 5vw, 84px);
  align-items: start;
}

.about-media {
  position: relative; overflow: hidden;
  border-radius: 18px; background: var(--bg-3);
  aspect-ratio: 4 / 5;
}
.about-media img {
  width: 100%; height: 100%; object-fit: cover; object-position: 50% 28%;
  filter: saturate(.92) contrast(1.03) brightness(.94);
  transform: scale(1.08);
  transition: transform 1.5s var(--ease);
}
.about-media.is-visible img { transform: scale(1); }

.about-copy { display: grid; gap: 22px; }
.about-copy p { color: var(--fg-muted); max-width: 62ch; }
.about-copy .lead {
  font-size: clamp(19px, 1.5vw, 25px);
  line-height: 1.42; letter-spacing: -.017em;
  color: var(--fg);
}

.facts {
  margin-top: clamp(12px, 2vw, 26px);
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 1px; background: var(--line-2);
  border: 1px solid var(--line-2); border-radius: 14px; overflow: hidden;
}
.facts li {
  padding: 22px 20px; background: var(--bg);
  display: grid; gap: 8px; align-content: start;
}
.facts strong {
  font-family: var(--font-display);
  font-size: clamp(24px, 2.6vw, 38px); font-weight: 800;
  font-variation-settings: "wdth" 88;
  letter-spacing: -.04em; line-height: 1;
  color: var(--accent);
}
.facts span { font-size: 13.5px; line-height: 1.45; color: var(--fg-subtle); }

.companies {
  margin-top: clamp(48px, 7vw, 96px);
  padding-top: 26px; border-top: 1px solid var(--line-2);
}
.companies-label {
  font-size: 11px; letter-spacing: .16em; text-transform: uppercase;
  color: var(--fg-subtle); margin-bottom: 22px;
}
.companies ul {
  display: flex; flex-wrap: wrap; align-items: baseline;
  gap: clamp(20px, 4vw, 60px);
}
.companies li {
  font-family: var(--font-display);
  font-size: clamp(19px, 2.4vw, 34px); font-weight: 700;
  font-variation-settings: "wdth" 85;
  letter-spacing: -.04em; text-transform: uppercase;
  color: rgba(var(--fg-rgb), .34);
  transition: color .35s var(--ease);
}
.companies li a { display: block; }
.companies li:first-child { color: var(--fg); }
.companies:hover li { color: rgba(var(--fg-rgb), .26); }
.companies li:hover { color: var(--accent); }

/* ── focus ───────────────────────────────────────────────── */

.pillars { display: grid; gap: 10px; }

.pillar {
  border: 1px solid var(--line); border-radius: 16px;
  background: var(--bg-2);
  transition: background .35s var(--ease), border-color .35s var(--ease);
}
.pillar:hover { background: var(--bg-3); border-color: rgba(var(--fg-rgb), .18); }
.pillar[open] { background: var(--bg-3); border-color: rgba(var(--accent-rgb), .4); }

.pillar summary {
  list-style: none; cursor: pointer;
  padding: clamp(22px, 2.4vw, 32px) clamp(20px, 2.4vw, 34px);
  display: grid;
  grid-template-columns: 58px minmax(0, 1fr) minmax(0, 1.25fr) 44px;
  align-items: center; gap: clamp(14px, 2vw, 30px);
}
.pillar summary::-webkit-details-marker { display: none; }

.pillar-num {
  font-family: var(--font-display);
  font-size: 14px; font-weight: 700; color: var(--fg-subtle);
  letter-spacing: .04em;
}
.pillar h3 {
  font-family: var(--font-display);
  font-size: clamp(20px, 2.2vw, 32px); font-weight: 700;
  font-variation-settings: "wdth" 88;
  letter-spacing: -.038em; line-height: 1.05; text-transform: uppercase;
}
.pillar-lead { font-size: 15px; line-height: 1.45; color: var(--fg-subtle); }

.pillar-icon {
  justify-self: end;
  position: relative; width: 40px; height: 40px; border-radius: 50%;
  border: 1px solid var(--line); flex: none;
  transition: background .3s var(--ease), border-color .3s var(--ease), transform .4s var(--ease);
}
.pillar-icon::before, .pillar-icon::after {
  content: ""; position: absolute; inset: 0; margin: auto;
  background: var(--fg); border-radius: 2px;
  transition: transform .4s var(--ease), background .3s var(--ease);
}
.pillar-icon::before { width: 13px; height: 1.5px; }
.pillar-icon::after  { width: 1.5px; height: 13px; }
.pillar:hover .pillar-icon { border-color: rgba(var(--fg-rgb), .3); }
.pillar[open] .pillar-icon { background: var(--accent); border-color: var(--accent); transform: rotate(90deg); }
.pillar[open] .pillar-icon::after { transform: scaleY(0); }

.pillar-body {
  padding: 0 clamp(20px, 2.4vw, 34px) clamp(24px, 2.4vw, 34px);
  padding-left: clamp(20px, 2.4vw, 34px);
}
.pillar-body p {
  max-width: 68ch; color: var(--fg-muted);
  padding-top: 20px; border-top: 1px solid var(--line-2);
}
.pillar[open] .pillar-body { animation: unfold .45s var(--ease); }
@keyframes unfold {
  from { opacity: 0; transform: translateY(-8px); }
  to   { opacity: 1; transform: none; }
}

/* ── ervaring ────────────────────────────────────────────── */

.timeline { display: grid; }

.job {
  position: relative;
  display: grid;
  grid-template-columns: minmax(150px, .5fr) minmax(0, 2.6fr);
  gap: clamp(18px, 4vw, 60px);
  padding: clamp(28px, 3.4vw, 46px) 0;
  border-top: 1px solid var(--line-2);
  transition: opacity .4s var(--ease);
}
.job:last-child { border-bottom: 1px solid var(--line-2); }

.job-period {
  display: flex; align-items: baseline; gap: 12px;
  font-size: 13px; letter-spacing: .06em; text-transform: uppercase;
  color: var(--fg-subtle); white-space: nowrap;
}
.job.is-current .job-period { color: var(--accent); }
.job.is-current .job-period::before {
  content: ""; width: 6px; height: 6px; flex: none;
  border-radius: 50%; background: var(--accent);
  box-shadow: 0 0 0 0 rgba(var(--accent-rgb), .55);
  animation: pulse 2.6s var(--ease) infinite;
}
@keyframes pulse {
  0%   { box-shadow: 0 0 0 0 rgba(var(--accent-rgb), .5); }
  70%  { box-shadow: 0 0 0 9px rgba(var(--accent-rgb), 0); }
  100% { box-shadow: 0 0 0 0 rgba(var(--accent-rgb), 0); }
}

.job-main { display: grid; gap: 9px; }
.job-main h3 {
  font-family: var(--font-display);
  font-size: clamp(21px, 2.5vw, 38px); font-weight: 700;
  font-variation-settings: "wdth" 88;
  letter-spacing: -.042em; line-height: 1.02; text-transform: uppercase;
  transition: color .3s var(--ease);
}
.job:hover .job-main h3 { color: var(--accent-hi); }
.job-org { font-size: 14.5px; color: var(--fg); font-weight: 500; }
.job-org span { color: var(--fg-subtle); margin-inline: 4px; }
.job-desc { max-width: 64ch; color: var(--fg-subtle); font-size: 15px; }

.job-break { opacity: .62; }
.job-break .job-main h3 {
  font-size: clamp(16px, 1.5vw, 21px); letter-spacing: -.025em;
  color: var(--fg-muted); text-transform: none; font-weight: 600;
}
.job-break:hover { opacity: 1; }

/* ── opleiding ───────────────────────────────────────────── */

.edu { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.edu-card {
  padding: clamp(24px, 2.6vw, 38px);
  border: 1px solid var(--line); border-radius: 16px;
  background: var(--bg-2);
  display: grid; gap: 11px; align-content: start;
  transition: background .35s var(--ease), border-color .35s var(--ease), transform .4s var(--ease);
}
.edu-card:hover { background: var(--bg-3); border-color: rgba(var(--fg-rgb), .18); transform: translateY(-3px); }
.edu-year {
  font-family: var(--font-display);
  font-size: 13px; font-weight: 700; letter-spacing: .08em; color: var(--accent);
}
.edu-card h3 {
  font-family: var(--font-display);
  font-size: clamp(19px, 2vw, 28px); font-weight: 700;
  font-variation-settings: "wdth" 90;
  letter-spacing: -.035em; line-height: 1.08;
}
.edu-org { font-size: 14.5px; font-weight: 500; }
.edu-desc { font-size: 14.5px; color: var(--fg-subtle); max-width: 46ch; }

.skills { margin-top: clamp(40px, 5vw, 70px); padding-top: 26px; border-top: 1px solid var(--line-2); }
.tags { display: flex; flex-wrap: wrap; gap: 8px; }
.tags li {
  padding: 9px 15px; border-radius: 100px;
  border: 1px solid var(--line); background: var(--bg-2);
  font-size: 13.5px; color: var(--fg-muted);
  transition: color .28s var(--ease), border-color .28s var(--ease), background .28s var(--ease);
}
.tags li:hover { color: var(--fg); border-color: rgba(var(--accent-rgb), .5); background: var(--bg-3); }

/* ── contact ─────────────────────────────────────────────── */

.contact { padding: clamp(70px, 9vw, 130px) 0 34px; }

.contact-panel {
  position: relative; overflow: hidden;
  border-radius: clamp(18px, 2vw, 26px);
  background: #150d09;
  min-height: clamp(480px, 58vw, 640px);
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
}

.contact-figure {
  position: relative; overflow: hidden;
  grid-column: 2; grid-row: 1;
}
.contact-bg {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: 50% 18%;
  filter: saturate(1.18) contrast(1.04) brightness(.92);
}
/* De bronfoto is 683x1024 en wordt hier bijna 2x opgeschaald. Korrel maakt
   van die zachtheid een filmische textuur in plaats van zichtbare pixels;
   het is een pleister, geen oplossing — een grotere bron is dat wel. */
.contact-figure::after {
  content: ""; position: absolute; inset: 0; z-index: 1;
  pointer-events: none; opacity: .5; mix-blend-mode: overlay;
  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%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.55'/%3E%3C/svg%3E");
}
/* fade the photo's left edge into the copy column, warm the top corner */
.contact-shade {
  position: absolute; inset: 0;
  background:
    radial-gradient(72% 68% at 82% 6%, rgba(255, 122, 61, .34), transparent 64%),
    linear-gradient(90deg, #150d09 0%, rgba(21, 13, 9, .72) 22%, transparent 62%),
    linear-gradient(0deg, rgba(21, 13, 9, .68), transparent 30%);
}

.contact-inner {
  position: relative; z-index: 2;
  grid-column: 1; grid-row: 1;
  padding: clamp(28px, 4.5vw, 62px);
  align-self: end;
  display: grid; gap: clamp(16px, 2vw, 26px);
}
.contact-inner h2 {
  font-family: var(--font-display);
  font-size: clamp(50px, 9.5vw, 132px); font-weight: 800;
  font-variation-settings: "wdth" 86;
  line-height: .84; letter-spacing: -.06em; text-transform: uppercase;
}

.contact-list {
  display: grid; gap: 1px;
  margin-top: clamp(8px, 1.6vw, 18px);
  border-top: 1px solid rgba(var(--fg-rgb), .18);
}
.contact-list a {
  padding: 17px 2px;
  border-bottom: 1px solid rgba(var(--fg-rgb), .18);
  display: flex; align-items: baseline; justify-content: space-between; gap: 20px;
  transition: padding-left .35s var(--ease), border-color .35s var(--ease);
}
.contact-list a:hover { padding-left: 12px; border-bottom-color: var(--accent-hi); }
.contact-list span {
  font-size: 11.5px; letter-spacing: .16em; text-transform: uppercase;
  color: rgba(var(--fg-rgb), .6);
}
.contact-list b {
  font-family: var(--font-display);
  font-size: clamp(16px, 1.7vw, 24px); font-weight: 600;
  font-variation-settings: "wdth" 92;
  letter-spacing: -.03em;
  transition: color .3s var(--ease);
}
.contact-list a:hover b { color: var(--accent-hi); }

.footer {
  margin-top: 30px; padding: 24px 0 6px;
  border-top: 1px solid var(--line-2);
  display: flex; justify-content: space-between; flex-wrap: wrap; gap: 14px;
  font-size: 13px; color: var(--fg-subtle);
}
.footer-links { display: flex; gap: 22px; }
.footer-links a { transition: color .25s var(--ease); }
.footer-links a:hover { color: var(--accent-hi); }

/* ============================================================
   REVEAL
   ============================================================ */

.reveal {
  opacity: 0; transform: translateY(28px);
  transition: opacity .85s var(--ease), transform .95s var(--ease);
}
.reveal.is-visible { opacity: 1; transform: none; }

.stagger > * {
  opacity: 0; transform: translateY(24px);
  transition: opacity .7s var(--ease), transform .8s var(--ease);
}
.stagger.is-visible > * { opacity: 1; transform: none; }
.stagger.is-visible > *:nth-child(2) { transition-delay: .07s; }
.stagger.is-visible > *:nth-child(3) { transition-delay: .14s; }
.stagger.is-visible > *:nth-child(4) { transition-delay: .21s; }

/* ============================================================
   RESPONSIVE
   ============================================================ */

@media (max-width: 1080px) {
  .nav-links { display: none; }
  .head { grid-template-columns: minmax(120px, .5fr) 1fr; }
  .count { display: none; }
  .pillar summary { grid-template-columns: 44px minmax(0, 1fr) 40px; }
  .pillar-lead { grid-column: 2 / 3; }
  .pillar-icon { grid-column: 3; grid-row: 1 / 3; align-self: center; }
}

@media (max-width: 860px) {
  :root { --nav-h: 64px; }
  .btn-contact { display: none; }
  .burger { display: block; }
  .about { grid-template-columns: 1fr; }
  .about-media { max-width: 420px; }
  .edu { grid-template-columns: 1fr; }
  .job { grid-template-columns: 1fr; gap: 12px; }
  .hero-foot { flex-direction: column; align-items: flex-start; gap: 20px; }
  .hero-meta { text-align: left; }

  /* photo drops behind the copy instead of sitting beside it */
  .contact-panel { grid-template-columns: 1fr; }
  .contact-figure { grid-column: 1; }
  .contact-inner { align-self: end; }
  .contact-bg { object-position: 62% 14%; }
  .contact-shade {
    background:
      radial-gradient(80% 50% at 78% 4%, rgba(255, 122, 61, .3), transparent 66%),
      linear-gradient(0deg, #150d09 24%, rgba(21, 13, 9, .84) 54%, rgba(21, 13, 9, .68) 100%);
  }
}

@media (max-width: 560px) {
  .brand-name { display: none; }
  .head { grid-template-columns: 1fr; gap: 16px; margin-bottom: 40px; }
  .head .kicker { padding-top: 0; }
  .hero-name { gap: 0 10px; letter-spacing: -.045em; }
  .scroll-hint { display: none; }
  /* portrait viewport crops ~23% of the frame's width — aim it at the face */
  .hero-img { object-position: 70% 42%; }
  .hero-body { padding-bottom: clamp(96px, 15vh, 130px); }
  .hero-meta { gap: 26px; }
  .facts { grid-template-columns: 1fr; }
  .about-media { max-width: none; }
  .contact-list a { flex-direction: column; align-items: flex-start; gap: 5px; }
  .footer { flex-direction: column; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  .reveal, .stagger > * { opacity: 1 !important; transform: none !important; }
  .about-media img { transform: none; }
}

/* ── klantenstrip per functie ────────────────────────────── */

.clients {
  margin-top: 20px; padding-top: 18px;
  border-top: 1px solid var(--line-2);
  /* grid-items krijgen min-width:auto; zonder dit blaast de max-content
     track de kolom op in plaats van geclipt te worden */
  min-width: 0;
}
.clients-label {
  margin-bottom: 12px;
  font-size: 10.5px; letter-spacing: .18em; text-transform: uppercase;
  color: var(--fg-subtle);
}

.clients-window {
  min-width: 0;
  overflow: hidden;
  mask-image: linear-gradient(90deg, transparent, #000 3%, #000 94%, transparent);
}
/* past het binnen de kolom, dan niet scrollen maar netjes afbreken */
.clients-window[data-static] { mask-image: none; }
.clients-window[data-static] .clients-track { width: auto; flex-wrap: wrap; }

.clients-track {
  display: flex; width: max-content; gap: 10px;
  padding: 2px;
}
.clients-track.is-scrolling { animation: marquee var(--dur, 30s) linear infinite; }
.clients-window:hover .clients-track.is-scrolling,
.clients-window:focus-within .clients-track.is-scrolling { animation-play-state: paused; }

.client {
  flex: none;
  height: 64px; min-width: 152px;
  display: grid; place-items: center;
  border: 1px solid var(--line); border-radius: 10px;
  background: var(--bg-2);
  font-family: var(--font-display);
  font-size: 12.5px; font-weight: 700;
  letter-spacing: .01em; text-transform: uppercase; text-align: center;
  line-height: 1.15;
  color: var(--fg-muted);
  opacity: .72;
  transition: opacity .35s var(--ease), border-color .35s var(--ease),
              color .35s var(--ease);
}
.client:hover {
  opacity: 1;
  color: var(--fg);
  border-color: rgba(var(--fg-rgb), .26);
}

/* De logo's zijn al wit-op-transparant, dus alleen de dekking hoeft te
   bewegen. Breedte en hoogte allebei begrenzen: de set loopt van vierkant
   (SCOH) tot 4.6:1 (SCOL) en moet optisch even zwaar ogen. */
.client a {
  display: grid; place-items: center;
  width: 100%; height: 100%;
  padding: 0 18px;
}
.client img {
  max-height: 38px; max-width: 116px;
  width: auto; height: auto;
  object-fit: contain;
  filter: var(--logo-filter);
}

@media (max-width: 560px) {
  .client { height: 56px; min-width: 130px; padding: 0 14px; font-size: 11px; }
  .client img { max-height: 32px; max-width: 100px; }
}

@media (prefers-reduced-motion: reduce) {
  .clients-track.is-scrolling { animation: none; }
  .clients-window { mask-image: none; }
  .clients-track { flex-wrap: wrap; width: auto; }
}

/* ── themaknop ────────────────────────────────────────────── */

.theme-btn {
  width: 38px; height: 38px; flex: none;
  display: grid; place-items: center;
  border: 1px solid var(--line); border-radius: 100px;
  color: var(--fg-muted);
  transition: color .25s var(--ease), background .25s var(--ease),
              border-color .25s var(--ease);
}
.theme-btn:hover { color: var(--fg); background: var(--bg-3); border-color: var(--fg-subtle); }
.theme-btn svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; }

/* Toon het icoon van het thema waar je heen schakelt. */
.theme-btn .icon-sun { display: none; }
.theme-btn .icon-moon { display: block; }
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) .theme-btn .icon-moon { display: none; }
  :root:not([data-theme="dark"]) .theme-btn .icon-sun { display: block; }
}
:root[data-theme="light"] .theme-btn .icon-moon { display: none; }
:root[data-theme="light"] .theme-btn .icon-sun { display: block; }
:root[data-theme="dark"] .theme-btn .icon-moon { display: block; }
:root[data-theme="dark"] .theme-btn .icon-sun { display: none; }

/* Kleurwissel mag zacht zijn, maar niet tijdens het laden. */
:root.theme-ready body,
:root.theme-ready .content,
:root.theme-ready .pillar,
:root.theme-ready .edu-card,
:root.theme-ready .client,
:root.theme-ready .tags li {
  transition: background-color .3s var(--ease), color .3s var(--ease),
              border-color .3s var(--ease);
}

/* Sluittegel: de lijst is een selectie, geen opsomming. Gestippelde rand en
   accentkleur zodat hij als tekst leest en niet als logo dat niet laadde.
   Eigen padding, want die zit bij de logo's op het <a> dat hier ontbreekt. */
.client--more {
  padding: 0 22px;
  border-style: dashed;
  border-color: rgba(var(--accent-rgb), .45);
  background: transparent;
  color: var(--accent);
  opacity: .9;
  letter-spacing: .04em;
}
.client--more:hover {
  opacity: 1;
  color: var(--accent);
  border-color: var(--accent);
}