/* ============================================================
   Oudekerk Media — gedeelde stylesheet
   Licht & clean design system voor alle pagina's
   ============================================================ */

/* ------------------------------------------------------------
   Lettertypen — zelf gehost, geen enkele externe verbinding.
   Sora, Inter en JetBrains Mono zijn variabele fonts: één bestand
   dekt het hele gewichtsbereik. Fraunces is een statische instantie
   op 600 cursief, want daar gebruiken we alleen .em mee.
   Paden zijn relatief aan dit bestand, dus /en/ werkt mee.
   ------------------------------------------------------------ */

/* Sora — koppen */
@font-face{
  font-family:'Sora';font-style:normal;font-weight:400 700;font-display:swap;
  src:url(fonts/sora-latin.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:'Sora';font-style:normal;font-weight:400 700;font-display:swap;
  src:url(fonts/sora-latin-ext.woff2) format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

/* Inter — lopende tekst */
@font-face{
  font-family:'Inter';font-style:normal;font-weight:400 600;font-display:swap;
  src:url(fonts/inter-latin.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:'Inter';font-style:normal;font-weight:400 600;font-display:swap;
  src:url(fonts/inter-latin-ext.woff2) format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

/* JetBrains Mono — .mono */
@font-face{
  font-family:'JetBrains Mono';font-style:normal;font-weight:400 500;font-display:swap;
  src:url(fonts/jetbrains-mono-latin.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:'JetBrains Mono';font-style:normal;font-weight:400 500;font-display:swap;
  src:url(fonts/jetbrains-mono-latin-ext.woff2) format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

/* Fraunces cursief — het accentwoord in koppen (.em) */
@font-face{
  font-family:'Fraunces';font-style:italic;font-weight:600;font-display:swap;
  src:url(fonts/fraunces-italic-latin.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:'Fraunces';font-style:italic;font-weight:600;font-display:swap;
  src:url(fonts/fraunces-italic-latin-ext.woff2) format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

:root{
  --bg:#FFFFFF;
  --bg-2:#F6F8FB;
  --bg-3:#EEF2F8;
  --ink:#0A1F44;
  --ink-2:#3D4C68;
  --ink-3:#697591;
  --ink-4:#9AA4BC;
  --line:#E4E9F2;
  --line-2:#EDF1F7;
  --accent:#5B4BFF;
  --accent-2:#7B6BFF;
  --cyan:#00B8D4;
  --amber:#B7791F;
  --amber-bg:#FEF6E7;
  --green:#0FA968;
  --maxw:1120px;
  --radius:16px;
  --nav-bg:rgba(255,255,255,.8);
  color-scheme:light;
}

:root[data-theme="dark"]{
  --bg:#0B0F1E;--bg-2:#111726;--bg-3:#171F30;
  --ink:#EAF0FA;--ink-2:#BAC5D9;--ink-3:#8B98B2;--ink-4:#5E6B85;
  --line:#242E44;--line-2:#1A2233;
  --nav-bg:rgba(11,15,30,.82);
  color-scheme:dark;
}
:root[data-theme="dark"] .btn-primary{background:var(--ink);color:var(--bg)}
:root[data-theme="dark"] .btn-primary:hover{background:#ffffff;color:#0B0F1E}
:root[data-theme="dark"] .nav-cta{color:var(--bg)!important}
:root[data-theme="dark"] .nav-cta:hover{background:#ffffff!important;color:#0B0F1E!important}
:root[data-theme="dark"] .btn-light{background:var(--bg-3);color:var(--ink);box-shadow:none;border:1px solid var(--line)}
:root[data-theme="dark"] .intro::after{background:linear-gradient(90deg,var(--bg) 42%,rgba(11,15,30,.86) 60%,rgba(11,15,30,0) 82%)}
:root[data-theme="dark"] .intro::before{background:linear-gradient(0deg,var(--bg) 1%,rgba(11,15,30,0) 24%)}
:root[data-theme="dark"] .brandrow .mark.tile-w{background:#fff}
@media(max-width:760px){
  :root[data-theme="dark"] .intro::after{background:linear-gradient(180deg,rgba(11,15,30,.55),rgba(11,15,30,.86) 52%,var(--bg) 86%)}
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  background:var(--bg);color:var(--ink);
  font-family:'Inter',system-ui,sans-serif;line-height:1.6;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;letter-spacing:-.006em;
}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

.display{font-family:'Sora',sans-serif}
/* cursief serif-accent voor het kernwoord van een statement */
.em{font-family:'Fraunces','Instrument Serif',Georgia,serif;font-style:italic;font-weight:600;letter-spacing:-.01em}
.mono{font-family:'JetBrains Mono',monospace}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 28px}
/* height:auto is verplicht zodra afbeeldingen width/height-attributen hebben.
   Zonder deze regel houdt de browser de hoogte uit het attribuut aan en vervormt het beeld. */
img{max-width:100%;height:auto;display:block}
a{color:inherit}

/* ---- trage zoom op hero-beelden ----
   Alleen transform en dus volledig door de compositor afgehandeld: geen herberekening
   van de layout, geen invloed op CLS. De hero's staan in een container met overflow:hidden,
   dus de opschaling valt binnen het kader.
   transform-origin verschilt per pagina, zodat er niet uit het gezicht weg gezoomd wordt. */
/* Blijft doorlopen in plaats van één keer af te lopen. Met 'forwards' stopte de
   beweging na 24 seconden en zag wie later keek een stilstaande foto.
   'alternate' laat hem rustig heen en weer gaan, zonder zichtbare sprong terug. */
.kenburns{
  animation:kenburns 20s ease-in-out infinite alternate;
  will-change:transform;
}
@keyframes kenburns{
  from{transform:scale(1)}
  to{transform:scale(1.14)}
}
.intro-bg .kenburns{transform-origin:70% 40%}
.about-hero-bg .kenburns{transform-origin:60% 35%}

/* Wie in zijn systeeminstellingen heeft aangegeven bewegende beelden te willen beperken,
   krijgt een statisch beeld op de eindstand. Geen halve animatie, geen sprong. */
@media (prefers-reduced-motion:reduce){
  .kenburns{animation:none;transform:scale(1.03)}
}

/* ---- reusable eyebrow / headings ---- */
.eyebrow{display:inline-flex;align-items:center;gap:11px;font-family:'Inter',sans-serif;font-size:13px;
  font-weight:600;letter-spacing:0;text-transform:none;color:var(--accent);margin-bottom:14px}
.eyebrow::before{content:'';width:22px;height:1.5px;background:currentColor;border-radius:2px;opacity:.55}
.eyebrow.muted{color:var(--ink-4)}
.h-sec{font-family:'Sora',sans-serif;font-weight:600;font-size:clamp(24px,3.4vw,34px);
  letter-spacing:-.03em;line-height:1.12;max-width:22ch}
.sub{margin-top:12px;color:var(--ink-3);font-size:16px;max-width:56ch}

/* ---- buttons ---- */
.btn{display:inline-flex;align-items:center;gap:9px;font-size:15px;font-weight:600;
  text-decoration:none;padding:13px 24px;border-radius:11px;transition:transform .16s,background .16s,box-shadow .16s;cursor:pointer;border:none}
.btn .arr{transition:transform .16s}
.btn:hover .arr{transform:translateX(3px)}
.btn-primary{color:#fff;background:var(--ink)}
.btn-primary:hover{background:var(--accent);transform:translateY(-2px)}
.btn-light{color:var(--ink);background:#fff;box-shadow:0 1px 3px rgba(10,31,68,.08)}
.btn-light:hover{transform:translateY(-2px);box-shadow:0 6px 20px rgba(10,31,68,.12)}
.btn-ghost{color:var(--ink);background:transparent;border:1px solid var(--line);padding:12px 23px}
.btn-ghost:hover{border-color:var(--ink-3);transform:translateY(-2px)}


/* ---- nav ---- */
/* Bovenaan de pagina geen rand en geen vlak: de balk zweeft over de hero-foto,
   zodat er geen harde lijn tussen menu en beeld staat. Zodra je scrolt komt de
   achtergrond en een fijne rand tevoorschijn, zodat de tekst leesbaar blijft. */
.nav{position:sticky;top:0;z-index:20;background:transparent;
  border-bottom:1px solid transparent;
  transition:background .25s ease,border-color .25s ease,backdrop-filter .25s ease}
.nav.is-scrolled{background:var(--nav-bg);
  backdrop-filter:saturate(1.6) blur(12px);-webkit-backdrop-filter:saturate(1.6) blur(12px);
  border-bottom-color:var(--line-2)}
.nav-in{display:flex;align-items:center;justify-content:space-between;height:62px;
  max-width:var(--maxw);margin:0 auto;padding:0 28px}
.logo{display:flex;align-items:center;gap:10px;font-family:'Sora',sans-serif;font-weight:600;
  font-size:15.5px;letter-spacing:-.01em;color:var(--ink);text-decoration:none}
.logo .logo-mark{height:30px;width:auto;display:block;flex:none}
/* De naam mag nooit afbreken: als flexitem werd hij smaller gemaakt dan zijn
   inhoud, brak hij over twee regels en liep hij buiten zijn eigen kader achter
   de taalschakelaar langs. */
.logo-name{white-space:nowrap}
.nav-links{display:flex;align-items:center;gap:28px}
.nav-links a{font-size:14px;font-weight:450;color:var(--ink-3);text-decoration:none;transition:color .16s}
.nav-links a:hover{color:var(--ink)}
.nav-links a.active{color:var(--ink);font-weight:500}
.nav-cta{font-size:13.5px!important;font-weight:600!important;color:#fff!important;
  background:var(--ink);padding:9px 16px;border-radius:9px;transition:background .16s,transform .16s}
.nav-cta:hover{background:var(--accent)!important;transform:translateY(-1px)}

.nav-right{display:flex;align-items:center;gap:22px}
.nav-tools{display:flex;align-items:center;gap:8px}
/* ---- taalschakelaar ----
   Echte links naar de tegenhanger in de andere taal, geen knoppen. Alleen dan
   volgt een zoekmachine ze en worden beide taalversies gevonden.
   Vlag én tekstlabel: een vlag staat voor een land, niet voor een taal, en het
   Engelstalige publiek zit niet alleen in de Verenigde Staten.

   Er staat alleen de ANDERE taal: op een Nederlandse pagina zie je EN. Met twee
   vlaggen naast elkaar was niet af te lezen welke taal je las — de markering van
   de actieve taal stond namelijk niet op alle pagina's. Eén link is bovendien
   ondubbelzinnig: hij doet wat hij zegt. */
.lang-switch{display:flex}
.lang-link{display:inline-flex;align-items:center;gap:7px;text-decoration:none;
  font-family:'Inter',sans-serif;font-weight:600;font-size:12px;letter-spacing:.01em;
  color:var(--ink-3);background:var(--bg-2);border:1px solid var(--line);
  height:34px;padding:0 11px;border-radius:9px;
  transition:color .15s,border-color .15s}
.lang-link:hover{color:var(--ink);border-color:var(--ink-4)}
.lang-switch .flag{width:18px;height:13px;border-radius:2px;display:block;flex:none;
  box-shadow:0 0 0 1px rgba(10,31,68,.12)}
:root[data-theme="dark"] .lang-switch .flag{box-shadow:0 0 0 1px rgba(255,255,255,.16)}
/* De vlag zelf draagt geen betekenis: het label ernaast benoemt de taal al. */
.lang-switch .flag{pointer-events:none}
.icon-btn{width:34px;height:34px;border:1px solid var(--line);background:var(--bg-2);border-radius:9px;cursor:pointer;
  color:var(--ink-3);display:inline-flex;align-items:center;justify-content:center;transition:color .15s,border-color .15s}
.icon-btn:hover{color:var(--ink);border-color:var(--ink-4)}
.icon-btn svg{width:17px;height:17px}
.theme-toggle .moon{display:none}
:root[data-theme="dark"] .theme-toggle .sun{display:none}
:root[data-theme="dark"] .theme-toggle .moon{display:block}
.hamburger{display:none}
@media(max-width:820px){
  .hamburger{display:inline-flex}
  .nav-right{gap:10px}
  .nav-links{position:absolute;top:66px;left:16px;right:16px;background:var(--bg);
    border:1px solid var(--line);border-radius:14px;box-shadow:0 22px 54px -14px rgba(10,20,44,.3);
    flex-direction:column;align-items:stretch;gap:3px;padding:9px;display:none}
  .nav-links.open{display:flex}
  .nav-links a{font-size:15px!important;font-weight:500;padding:12px 14px!important;border-radius:9px;color:var(--ink-2)}
  .nav-links a:hover,.nav-links a.active{background:var(--bg-2);color:var(--ink)}
  .nav-links a.nav-cta{text-align:center;margin-top:5px;background:var(--ink);color:#fff!important}
  .nav-links a.nav-cta.pp-nav-cta{background:#34D399;color:#062a20!important}
}

/* Onder deze breedte passen beeldmerk, naam, taalschakelaar, themaknop en
   hamburger niet meer naast elkaar binnen de 28px zijmarge die de rest van de
   site aanhoudt. Het beeldmerk blijft staan en blijft de link naar home; de
   naam wordt alleen visueel verborgen, zodat een schermlezer de link nog steeds
   voorleest als "Oudekerk Media Jonathan Oudekerk". De naam staat bovendien in
   de paginatitel en groot in de hero eronder. */
/* ---- woordmerk in drie trappen ----
   Ruim:   beeldmerk + "Jonathan Oudekerk"
   Krap:   beeldmerk + "Oudekerk"
   Krapst: alleen het beeldmerk
   De omslagpunten zijn gemeten, niet geschat. Beide delen worden alleen
   VISUEEL verborgen, nooit met display:none, zodat de link voor een schermlezer
   "Oudekerk Media Jonathan Oudekerk" blijft heten op elk schermformaat. */
.logo-first,.logo-last{white-space:nowrap}
/* 418px: beeldmerk 20 + "Jonathan Oudekerk" 155 + knoppenblok 108 + tussenruimte
   + 2x28 zijmarge. Onder die breedte valt de voornaam weg. */
@media(max-width:417px){
  .logo-first{position:absolute;width:1px;height:1px;padding:0;margin:-1px;
    overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
}
/* 342px: idem, maar met alleen "Oudekerk" (77px). Daaronder blijft het
   beeldmerk over, dat zelf de link naar home is. */
@media(max-width:341px){
  .logo-last{position:absolute;width:1px;height:1px;padding:0;margin:-1px;
    overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
}

/* Nederlandse samenstellingen zijn lang: "Gebruiksvoorwaarden" is op 320px in
   koptekst breder dan het scherm en duwde de hele pagina opzij. Afbreken mag
   alleen hier, want op ruimere schermen levert automatische woordafbreking
   onnodige koppeltekens op. De browser breekt op lettergrepen aan de hand van
   het lang-attribuut van de pagina. */
@media(max-width:420px){
  h1,.display,.h-sec{overflow-wrap:break-word;hyphens:auto;-webkit-hyphens:auto}
}

/* ---- generic section spacing ---- */
.section{padding:78px 0}
.section-tight{padding:56px 0}

/* ---- Powerplayer card (shared hero component) ---- */
.pp-card{background:linear-gradient(135deg,#0A1F44,#152a54 55%,#1a2f5e);border-radius:22px;
  padding:56px;position:relative;overflow:hidden;color:#fff}
@media(max-width:600px){.pp-card{padding:36px 26px}}
.pp-card::before{content:'';position:absolute;top:-25%;right:-8%;width:460px;height:460px;
  background:radial-gradient(circle,rgba(91,75,255,.45),transparent 62%);pointer-events:none}
.pp-card::after{content:'';position:absolute;bottom:-40%;left:-6%;width:400px;height:400px;
  background:radial-gradient(circle,rgba(0,184,212,.28),transparent 62%);pointer-events:none}
.pp-card>*{position:relative}

/* ---- komeet die om de Powerplayer-kaart draait ----
   Een conisch verloop waarvan de starthoek animeert. Het masker knipt alles weg
   behalve een randje van 1,5px, zodat er een lichtpunt langs de rand van de kaart
   loopt. Goud, want dat is de signatuurkleur van de app zelf.
   @property is nodig om een hoek te kunnen animeren; browsers die het niet kennen
   tonen simpelweg een stilstaande gouden gloed in plaats van een bewegende. */
@property --pp-angle{syntax:'<angle>';initial-value:0deg;inherits:false}

/* Buitengloed. De kaart zelf is altijd donker, dus het randje van 1,5px hieronder
   valt in lichte modus weg tegen de witte pagina. Deze laag waaiert juist búiten
   de container uit en leest daardoor in beide thema's.
   isolation:isolate maakt hier een eigen stapelcontext, zodat z-index:-1 wel
   achter de kaart valt maar niet achter de paginaachtergrond verdwijnt. */
.pp-glow-wrap{position:relative;isolation:isolate}
.pp-glow-wrap::before{content:'';position:absolute;inset:-16px;border-radius:36px;z-index:-1;pointer-events:none;
  /* Twee kometen, precies tegenover elkaar: elk een oplopende staart die eindigt
     in een felle kop, op .47turn en .97turn. Eén animatie draait ze allebei rond. */
  background:conic-gradient(from var(--pp-angle),
    rgba(251,191,36,0) 0 .02turn,
    rgba(251,191,36,.42) .36turn,
    rgba(253,230,138,.85) .47turn,
    rgba(251,191,36,0) .52turn,
    rgba(251,191,36,.42) .86turn,
    rgba(253,230,138,.85) .97turn,
    rgba(251,191,36,0) 1turn);
  filter:blur(24px);
  animation:pp-sweep 9s linear infinite}
/* In donkere modus mag de gloed feller, daar is meer contrastruimte. */
:root[data-theme="dark"] .pp-glow-wrap::before{filter:blur(30px);opacity:1.15}
@media (prefers-reduced-motion:reduce){.pp-glow-wrap::before{animation:none}}
.pp-card .pp-comet{position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:0;
  padding:1.5px;
  background:conic-gradient(from var(--pp-angle),
    rgba(251,191,36,0) 0 .10turn,
    rgba(251,191,36,.55) .38turn,
    #FDE68A .47turn,
    rgba(251,191,36,0) .52turn,
    rgba(251,191,36,.55) .88turn,
    #FDE68A .97turn,
    rgba(251,191,36,0) 1turn);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;
          mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
          mask-composite:exclude;
  animation:pp-sweep 9s linear infinite}
@keyframes pp-sweep{to{--pp-angle:360deg}}
@media (prefers-reduced-motion:reduce){.pp-card .pp-comet{animation:none}}
/* Als label in plaats van een dun regeltje: het moet direct duidelijk zijn dat
   dit een project is en geen onderneming. */
.pp-label{display:inline-flex;align-items:center;gap:9px;font-family:'Inter',sans-serif;
  font-size:12.5px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;
  color:#7DE8F5;background:rgba(0,184,212,.13);border:1px solid rgba(0,184,212,.34);
  border-radius:999px;padding:7px 16px;margin-bottom:20px}
.pp-label::before{content:'';width:6px;height:6px;border-radius:50%;background:currentColor;
  box-shadow:0 0 0 4px rgba(0,184,212,.18)}
.pp-card h2{font-family:'Sora',sans-serif;font-weight:600;font-size:clamp(32px,5.2vw,52px);
  letter-spacing:-.03em;line-height:1.04;margin-bottom:18px}
.pp-card .psub{color:rgba(255,255,255,.8);max-width:56ch;font-size:16.5px;line-height:1.6}
.pp-pillars{display:flex;flex-wrap:wrap;gap:8px;margin-top:24px}
.pp-pillars span{font-family:'Inter',sans-serif;font-size:12.5px;font-weight:500;color:rgba(255,255,255,.82);
  background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.12);border-radius:999px;padding:6px 13px;
  display:inline-flex;align-items:center}
.pp-pillars span i{display:inline-block;width:7px;height:7px;border-radius:50%;margin-right:8px}
.pp-card .btn{margin-top:30px}

/* ---- brand grid ---- */
.brands{display:grid;grid-template-columns:repeat(4,1fr);gap:0;border:1px solid var(--line);
  border-radius:16px;overflow:hidden;background:var(--bg)}
@media(max-width:760px){.brands{grid-template-columns:repeat(2,1fr)}}
@media(max-width:440px){.brands{grid-template-columns:1fr}}
.brand-cell{padding:34px 26px;border-right:1px solid var(--line-2);border-bottom:1px solid var(--line-2);
  text-align:center;transition:background .18s;text-decoration:none;color:inherit;display:block}
.brand-cell:hover{background:var(--bg-2)}
.brand-name{font-family:'Sora',sans-serif;font-size:18px;font-weight:600;letter-spacing:-.01em;
  color:var(--ink);margin-bottom:7px}
.brand-desc{font-size:12.5px;color:var(--ink-3);line-height:1.45}

/* ---- brandlist (home) — alternerende licht/donker rijen met echte logo's ---- */
.brandlist{border:1px solid var(--line);border-radius:16px;overflow:hidden;margin-top:32px}
.brandrow{display:flex;align-items:center;gap:20px;padding:20px 26px;text-decoration:none;color:inherit;
  transition:filter .18s,background .18s}
.brandrow.light{background:var(--bg)}
.brandrow.light:hover{background:var(--bg-2)}
/* Naar rechts uitvloeiend in plaats van een dicht donker blok: het verloop
   loopt richting de paginakleur, zodat de rij niet als een harde balk oogt. */
.brandrow.dark{position:relative;
  background:linear-gradient(100deg,#0e1533 0%,#0d1730 42%,#101c3d 68%,#16255180 88%,transparent 100%)}
:root[data-theme="dark"] .brandrow.dark{
  background:linear-gradient(100deg,#111a3d 0%,#0f1a36 42%,#121f45 70%,#1a2a5a66 90%,transparent 100%)}
/* Geen position/z-index op de inhoud nodig: het verloop is de achtergrond van
   de rij zelf, dus de kinderen tekenen daar sowieso overheen. Die regel stond
   er wel en overschreef op mobiel de absolute positie van het pijltje, waardoor
   het bij de donkere rijen (TraXs, Academy) niet rechts uitlijnde. */
.brandrow.dark:hover{filter:brightness(1.14)}
.brandrow .id{flex:0 0 auto;width:210px;display:flex;align-items:center;gap:12px}
.brandrow .br-logo{height:21px;width:auto;display:block}
.brandrow .br-logo.acad{height:18px}
.brandrow .traxs{height:19px;overflow:hidden;display:flex;align-items:flex-start}
.brandrow .traxs img{height:30px;width:auto;object-position:top;display:block}
.brandrow .mark{width:34px;height:34px;border-radius:9px;flex-shrink:0;display:flex;align-items:center;justify-content:center;overflow:hidden}
.brandrow .mark img{width:100%;height:100%;object-fit:contain}
.brandrow .mark.tile-w{background:#fff;border:1px solid var(--line);padding:5px}
.brandrow .br-name{font-family:'Sora',sans-serif;font-weight:600;font-size:16px;color:var(--ink)}
.rm-logo{display:inline-flex;align-items:center;gap:9px;font-family:'Inter',sans-serif;font-weight:600;font-size:15.5px;letter-spacing:-.02em;color:var(--ink)}
.rm-logo .rm-mark{width:28px;height:28px;border-radius:7px;flex-shrink:0;background:linear-gradient(135deg,#FF7A45,#F56A35);
  display:inline-flex;align-items:center;justify-content:center;box-shadow:0 2px 6px rgba(255,122,69,.3)}
.rm-logo .rm-mark svg{width:15px;height:15px}
.brandrow .br-desc{color:var(--ink-3);font-size:14px;flex:1}
.brandrow.dark .br-desc{color:rgba(255,255,255,.6)}
/* Merknaam op een donkere rij: var(--ink) is donkerblauw en valt daar volledig weg. */
.brandrow.dark .br-name{color:#fff}

/* ---- Oudekerk-torentje in donkere modus ----
   logo.svg is één kleur (#0A1F44) en valt daardoor weg op een donkere achtergrond.
   brightness(0) maakt het eerst volledig zwart, invert(1) daarna wit. Zo hoeft er
   geen tweede bestand in de opmaak van elke pagina, en blijft het één logobestand.
   De suffix-selector raakt bewust niet logo-white.svg. */
:root[data-theme="dark"] img[src$="logo.svg"]{filter:brightness(0) invert(1)}
.brandrow .br-arrow{color:var(--ink-4);font-size:16px;transition:transform .16s,color .16s;flex-shrink:0}
.brandrow.dark .br-arrow{color:rgba(255,255,255,.55)}
.brandrow:hover .br-arrow{transform:translateX(3px)}
.brandrow.light:hover .br-arrow{color:var(--accent)}
.brandrow.dark:hover .br-arrow{color:#fff}
/* Op mobiel wikkelt de rij: naam boven, omschrijving eronder. Het pijltje moet
   dan rechts op één vaste plek blijven staan in plaats van mee te zakken, zodat
   ze in de lijst netjes onder elkaar uitkomen. */
@media(max-width:620px){
  .brandrow{flex-wrap:wrap;gap:8px 16px;position:relative;padding-right:52px}
  .brandrow .id{width:auto;max-width:calc(100% - 8px)}
  .brandrow .br-desc{flex-basis:100%;order:3}
  .brandrow .br-arrow{position:absolute;right:22px;top:50%;transform:translateY(-50%);
    width:26px;height:26px;display:flex;align-items:center;justify-content:center;
    border-radius:50%;font-size:15px}
  .brandrow:hover .br-arrow{transform:translateY(-50%) translateX(3px)}
  /* Contrastvlakje eronder, zodat het pijltje op elke achtergrond leesbaar
     en goed aantikbaar is. */
  .brandrow.light .br-arrow{background:rgba(10,31,68,.07);color:var(--ink-2)}
  .brandrow.dark .br-arrow{background:rgba(255,255,255,.14);color:#fff}
}

/* ---- contact ---- */
/* ---- afsluitend contactblok ----
   Gecentreerd opgebouwd. Links uitgelijnd oogde rafelig doordat de kop (22ch) en
   de tekst (56ch) verschillende maximale breedtes hebben, en doordat het streepje
   vóór 'Contact' dat woord ten opzichte van de kop eronder naar rechts duwde.
   Gecentreerd vallen die verschillen weg en is desktop gelijk aan mobiel. */
.contact{background:var(--bg-2);border-top:1px solid var(--line-2)}
.contact-in{padding:84px 0 90px;display:flex;flex-direction:column;align-items:center;text-align:center}
.contact-in .eyebrow{margin-bottom:18px}
.contact-in .h-sec{max-width:20ch}
.contact-in .sub{max-width:48ch;margin-top:16px}
@media(max-width:640px){.contact-in{padding:64px 0 68px}}
.cgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:32px}
@media(max-width:640px){.cgrid{grid-template-columns:1fr}}
.ccard{background:var(--bg);border:1px solid var(--line);border-radius:12px;padding:22px}
.ccard .k{font-family:'Inter',sans-serif;font-size:12.5px;font-weight:500;letter-spacing:0;
  text-transform:none;color:var(--ink-4);margin-bottom:6px}
.ccard a,.ccard span{font-size:15.5px;font-weight:500;color:var(--ink);text-decoration:none}
.ccard a:hover{color:var(--accent)}
.contact-actions{display:flex;align-items:center;justify-content:center;gap:20px 22px;flex-wrap:wrap;margin-top:34px}
.contact-aside{font-size:14.5px;color:var(--ink-3);max-width:34ch;line-height:1.5}

/* ---- footer ---- */
footer{padding:28px 0;border-top:1px solid var(--line-2)}
.foot{display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;font-size:13px;color:var(--ink-4)}
.foot a{color:var(--ink-3);text-decoration:none}
.foot a:hover{color:var(--accent)}
.foot .mono{font-family:'JetBrains Mono',monospace}

/* ---- reveal on scroll ---- */
.reveal{opacity:0;transform:translateY(16px);transition:opacity .6s ease,transform .6s ease}
.reveal.in{opacity:1;transform:none}


/* ---- agenda (gedeeld door home en over-mij) ---- */
/* ---- agenda: waar je me kunt vinden ----
   Datum-eerst, want dat is waar iemand op scant. Andere opbouw dan de
   kaarten hierboven, zodat 'aankomend' visueel verschilt van 'geweest'. */
.agenda-intro{font-size:15px;color:var(--ink-3);margin-top:14px;max-width:56ch}
.agenda{list-style:none;margin:20px 0 0;padding:0;display:grid;gap:9px}
.ag{position:relative;border:1px solid var(--line);border-radius:13px;overflow:hidden;
  background:linear-gradient(100deg,color-mix(in srgb,var(--a) 9%,var(--bg)),var(--bg) 46%);
  transition:transform .18s,border-color .18s,box-shadow .18s}
.ag:hover{transform:translateX(3px);border-color:color-mix(in srgb,var(--a) 40%,var(--line));
  box-shadow:0 10px 26px -14px color-mix(in srgb,var(--a) 60%,transparent)}
.ag > a{display:flex;align-items:center;gap:16px;padding:14px 18px;text-decoration:none;color:inherit}
.ag-date{flex:0 0 78px;display:flex;flex-direction:column;line-height:1.15;
  border-right:1px solid color-mix(in srgb,var(--a) 30%,var(--line));padding-right:14px}
.ag-date b{font-family:'Sora',sans-serif;font-weight:600;font-size:16px;color:var(--a);letter-spacing:-.02em}
.ag-date i{font-style:normal;font-size:11.5px;color:var(--ink-4);margin-top:2px}
.ag-name{display:block;font-family:'Sora',sans-serif;font-weight:600;font-size:15.5px;
  letter-spacing:-.01em;color:var(--ink);margin-bottom:3px}
.ag-meta{display:block;font-size:12.5px;color:var(--ink-4)}
.ag .arr{color:var(--a);opacity:0;transition:opacity .16s,transform .16s;display:inline-block}
.ag:hover .arr{opacity:1;transform:translateX(3px)}
@media(max-width:520px){
  .ag > a{align-items:flex-start;gap:13px;padding:13px 15px}
  .ag-date{flex-basis:66px;padding-right:11px}
}

/* ---- toegankelijkheid ----
   Skip-link: eerste element in de tab-volgorde, zichtbaar zodra hij focus krijgt.
   Zo hoeft een toetsenbordgebruiker niet elke keer de hele navigatie door. */
.skip{position:absolute;left:-9999px;top:0;z-index:100;
  background:var(--ink);color:var(--bg);padding:12px 20px;border-radius:0 0 10px 0;
  font-size:14px;font-weight:600;text-decoration:none}
.skip:focus{left:0}

/* Zichtbare focusring, maar alleen bij toetsenbordgebruik (:focus-visible),
   zodat muisklikken geen ring achterlaten. */
a:focus-visible,button:focus-visible,[tabindex]:focus-visible{
  outline:2px solid var(--accent);outline-offset:3px}
/* Bewust GEEN border-radius hier: dat overschreef de eigen afronding van het
   element, waardoor hoeken bij het aanklikken vierkant werden. Moderne browsers
   laten de outline vanzelf de bestaande afronding volgen. */

/* ---- inklapbare lijsten op mobiel ----
   Lange lijsten kosten op een telefoon veel scrollen. Boven een ingestelde
   drempel worden de resterende items ingeklapt achter een knop. Zonder
   JavaScript blijft simpelweg alles zichtbaar: niets gaat verloren. */
.collapse-toggle{display:none}
@media(max-width:720px){
  /* Het script markeert de items voorbij de drempel; var() kan niet in nth-child. */
  .is-collapsed .collapse-hidden{display:none}
  .collapse-toggle{display:inline-flex;align-items:center;gap:8px;margin-top:14px;
    font-family:'Inter',sans-serif;font-size:14px;font-weight:600;color:var(--accent);
    background:none;border:1px solid var(--line);border-radius:10px;padding:10px 16px;cursor:pointer;
    transition:border-color .16s,background .16s}
  .collapse-toggle:hover{border-color:var(--accent);background:var(--bg-2)}
  .collapse-toggle .chev{transition:transform .18s}
  .collapse-toggle[aria-expanded="true"] .chev{transform:rotate(180deg)}
}

/* ---- juridische links in de voettekst ---- */
.foot-legal{display:flex;flex-wrap:wrap;gap:4px 18px;align-items:center}
.foot-legal a{font-size:13px;color:var(--ink-4);text-decoration:none;transition:color .15s}
.foot-legal a:hover{color:var(--ink-2);text-decoration:underline}
.foot{flex-wrap:wrap;gap:10px 24px}
@media(max-width:640px){.foot{flex-direction:column;align-items:flex-start;gap:14px}}

/* ---- aanraakdoelen op mobiel ----
   Richtlijn is ongeveer 44px. De taalschakelaar en de losse tekstlinks in
   secties en voettekst zaten daaronder; die krijgen op smalle schermen meer
   ruimte zonder dat de vormgeving op desktop verandert. */
@media(max-width:760px){
  .lang-link{height:40px;padding:0 13px}
  .sec-head .more,.foot .mono a,.foot-legal a{display:inline-flex;align-items:center;
    min-height:40px;padding:2px 0}
  .foot-legal{gap:6px 20px}
}

/* Variant zonder het inleidende streepje, voor koppen waar dat te druk oogt. */
.eyebrow.bare::before{display:none}
.eyebrow.bare{gap:0}

/* Agenda in één accentkleur. Vier verschillende kleuren maakten er een
   regenboog van; het datumblok en de scheidingslijn dragen de structuur al. */
.ag{--a:var(--accent)}