/* ============================================================
   Sport-Connecting-Us — shared stylesheet
   Brand tokens per Build Brief section 2. SCU's own system only.
   ============================================================ */
:root{
  --green:#14342B; --green-deep:#0E241D; --sand:#E8DFD0; --ink:#1A1D1B;
  --gold:#E6B54A; --gold-deep:#A0701A; --paper:#FAF7F1; --paper-deep:#F0EADD;
  --text:#2A302C; --text-soft:#5c645d; --hair:rgba(20,52,43,0.14); --hair-light:rgba(232,223,208,0.16);
  --serif:'Fraunces',Georgia,serif; --sans:'Instrument Sans',system-ui,sans-serif;
  --display:'Archivo','Instrument Sans',system-ui,sans-serif;
  --gold-light:#F6DFA6; --gold-metal:#E6B54A; --gold-shadow:#B9832A;
  --cinema:#040b07; --cinema-1:#07130D; --cinema-2:#0a1a12;
  --ease:cubic-bezier(0.32,0.72,0,1);
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{background:var(--paper);color:var(--text);font-family:var(--sans);font-weight:400;line-height:1.7;font-size:16px;-webkit-font-smoothing:antialiased;overflow-x:hidden}
body::after{content:'';position:fixed;inset:0;z-index:60;pointer-events:none;opacity:0.028;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E")}
.wrap{max-width:1200px;margin:0 auto;padding:0 40px}
.wrap-narrow{max-width:820px;margin:0 auto;padding:0 40px}
section{padding:130px 0}
h1,h2,h3,h4{font-family:var(--serif);font-weight:300;line-height:1.04;letter-spacing:-0.015em}
h1{font-size:clamp(3rem,7.5vw,6rem)}
h2{font-size:clamp(2.2rem,4.8vw,3.7rem)}
h3{font-size:1.55rem;line-height:1.18}
a{color:inherit}
em{font-style:italic;color:var(--gold-deep)}
.eyebrow{display:inline-flex;align-items:center;gap:9px;font-size:0.62rem;letter-spacing:0.28em;text-transform:uppercase;color:var(--gold-deep);margin-bottom:28px;font-weight:500}
/* universal eyebrow: tapered gold line left + right (thick near text -> pointy outward), like the hero */
.eyebrow::before,.eyebrow::after{content:'';width:26px;height:1px}
.eyebrow::before{background:linear-gradient(90deg,transparent,var(--gold-deep))}
.eyebrow::after{background:linear-gradient(90deg,var(--gold-deep),transparent)}
.eyebrow.light{color:var(--gold)}
.eyebrow.light::before{background:linear-gradient(90deg,transparent,var(--gold))}
.eyebrow.light::after{background:linear-gradient(90deg,var(--gold),transparent)}
p.lede{font-family:var(--serif);font-weight:300;font-size:clamp(1.35rem,2.5vw,1.8rem);line-height:1.5;color:var(--green);max-width:740px}
p.body{max-width:660px;color:var(--text-soft);font-size:1.02rem}
p.body + p.body{margin-top:18px}

/* ---- Scroll reveals ---- */
.reveal{opacity:0;transform:translateY(28px);filter:blur(6px);transition:opacity .9s var(--ease),transform .9s var(--ease),filter .9s var(--ease)}
.reveal.in{opacity:1;transform:none;filter:none}
.reveal[data-d="1"]{transition-delay:.09s}.reveal[data-d="2"]{transition-delay:.18s}.reveal[data-d="3"]{transition-delay:.27s}.reveal[data-d="4"]{transition-delay:.36s}

/* ---- Labelled placeholders (Build Brief section 8) ---- */
.ph-note{margin-top:10px;font-family:var(--sans);font-style:normal;font-size:0.6rem;letter-spacing:0.08em;text-transform:uppercase;color:var(--gold);opacity:0.8;line-height:1.5}

/* ============================================================ NAV */
nav{position:fixed;top:0;left:0;right:0;z-index:40;display:flex;justify-content:center;pointer-events:none}
.navpill{pointer-events:auto;margin-top:22px;display:flex;align-items:center;gap:32px;padding:11px 12px 11px 22px;border-radius:999px;background:rgba(250,247,241,0.75);backdrop-filter:blur(22px);-webkit-backdrop-filter:blur(22px);border:1px solid var(--hair);box-shadow:0 12px 44px -26px rgba(20,52,43,0.45)}
/* White liquid-glass variant — brighter, more blur + saturation, inner highlight */
.navpill.pill-light{background:rgba(255,255,255,0.55);backdrop-filter:blur(30px) saturate(1.7);-webkit-backdrop-filter:blur(30px) saturate(1.7);border:1px solid rgba(255,255,255,0.72);box-shadow:0 14px 46px -24px rgba(20,52,43,0.42),inset 0 1px 0 rgba(255,255,255,0.9)}
.brand{display:flex;align-items:center;gap:11px;font-family:var(--serif);font-size:1.05rem;color:var(--green);text-decoration:none;letter-spacing:0;white-space:nowrap}
.brand svg{width:26px;height:26px;flex-shrink:0}
.navlinks{display:flex;gap:28px}
.navlinks a{text-decoration:none;color:var(--text-soft);font-size:0.72rem;letter-spacing:0.1em;text-transform:uppercase;font-weight:500;transition:color .4s var(--ease)}
.navlinks a:hover,.navlinks a[aria-current="page"]{color:var(--green)}
.navcta{text-decoration:none;display:flex;align-items:center;gap:9px;background:var(--green);color:var(--sand);font-size:0.64rem;letter-spacing:0.14em;text-transform:uppercase;font-weight:500;padding:11px 9px 11px 18px;border-radius:999px;transition:transform .5s var(--ease)}
.navcta .dot{width:26px;height:26px;border-radius:50%;background:rgba(232,223,208,0.18);display:flex;align-items:center;justify-content:center;font-size:.8rem;transition:transform .5s var(--ease)}
.navcta:hover{transform:translateY(-1px)}.navcta:hover .dot{transform:translate(2px,-1px)}
.burger{display:none;flex-direction:column;gap:5px;width:24px;background:none;border:none;cursor:pointer;padding:6px;pointer-events:auto}
.burger span{height:1.5px;background:var(--green);border-radius:2px}

/* ============================================================ HERO (home) — launch-grade */
header.hero{min-height:100dvh;display:flex;align-items:center;position:relative;color:var(--sand);overflow:hidden;
  background:
    radial-gradient(78% 56% at 74% 6%,rgba(230,181,74,0.14),transparent 58%),
    radial-gradient(60% 60% at 14% 34%,rgba(230,181,74,0.045),transparent 62%),
    linear-gradient(168deg,#1c4a3a 0%,#123a2c 46%,#081711 100%)}
/* cinematic vignette + letterbox */
.hero::before{content:'';position:absolute;inset:0;pointer-events:none;z-index:1;
  background:
    linear-gradient(90deg,rgba(8,22,16,0.72) 0%,rgba(8,22,16,0.3) 52%,rgba(8,22,16,0.12) 100%),
    linear-gradient(180deg,rgba(8,22,16,0.7) 0%,rgba(8,22,16,0) 19%,rgba(8,22,16,0) 66%,rgba(8,22,16,0.9) 100%)}
.hero-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0.42;filter:saturate(0.9) brightness(0.9);pointer-events:none}
/* hero video now also plays on mobile / tablet-portrait (was display:none) */
.hero-cinema{position:absolute;inset:0;pointer-events:none;z-index:0;opacity:0.9}
.hero-split{position:relative;z-index:3;display:grid;grid-template-columns:1.14fr 0.86fr;gap:48px;align-items:center;width:100%;padding:150px 40px 108px}
.hero h1{color:var(--sand);font-weight:300;font-size:clamp(2.9rem,7vw,6.3rem);letter-spacing:-0.022em;line-height:1.01}
.hero h1 em{font-style:italic;background:linear-gradient(102deg,var(--gold-light) 0%,var(--gold-metal) 46%,var(--gold-shadow) 100%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:var(--gold)}
.hero .lede{color:rgba(232,223,208,0.72);margin-top:30px;max-width:588px}
.hero-eyebrow{display:inline-flex;align-items:center;gap:13px;font-size:0.6rem;letter-spacing:0.34em;text-transform:uppercase;color:var(--gold);font-weight:500}
.hero-eyebrow::before{content:'';width:34px;height:1px;background:linear-gradient(90deg,transparent,var(--gold))}
.cta-row{display:flex;flex-wrap:wrap;align-items:center;gap:24px;margin-top:46px}
.btn-gold{position:relative;display:inline-flex;align-items:center;gap:16px;text-decoration:none;font-size:0.66rem;letter-spacing:0.18em;text-transform:uppercase;font-weight:600;border-radius:999px;padding:15px 15px 15px 27px;color:#1c1608;
  background:linear-gradient(100deg,var(--gold-light) 0%,var(--gold-metal) 52%,#CE9E36 100%);box-shadow:0 22px 48px -24px rgba(230,181,74,0.6);transition:transform .6s var(--ease),box-shadow .6s var(--ease)}
.btn-gold .dot{width:30px;height:30px;border-radius:50%;background:rgba(28,22,8,0.16);display:flex;align-items:center;justify-content:center;font-size:.85rem;transition:transform .6s var(--ease)}
.btn-gold:hover{transform:translateY(-2px);box-shadow:0 30px 62px -22px rgba(230,181,74,0.74)}
.btn-gold:hover .dot{transform:translate(3px,-1px)}
.btn-gold:active{transform:scale(0.985)}
.btn-text{display:inline-flex;align-items:center;gap:10px;text-decoration:none;font-size:0.66rem;letter-spacing:0.16em;text-transform:uppercase;font-weight:500;color:rgba(232,223,208,0.78);transition:color .5s var(--ease)}
.btn-text .ar{transition:transform .5s var(--ease)}
.btn-text:hover{color:var(--gold)}.btn-text:hover .ar{transform:translateX(5px)}
/* hero visual: gold monogram in the connection field */
.hero-visual{position:relative;display:flex;align-items:center;justify-content:center;min-height:440px}
.hero-visual .halo{position:absolute;width:70%;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle,rgba(230,181,74,0.15),transparent 66%);filter:blur(8px)}
.hero-visual .smark{position:relative;width:min(392px,39vw);z-index:2;filter:drop-shadow(0 34px 62px rgba(0,0,0,0.5))}
/* cinematic motion */
.draw-arc{stroke-dasharray:1600;stroke-dashoffset:1600;animation:drawArc 2.1s var(--ease) .3s forwards}
@keyframes drawArc{to{stroke-dashoffset:0}}
.draw-line{stroke-dasharray:1;stroke-dashoffset:1;animation:drawLine 1.5s var(--ease) forwards}
@keyframes drawLine{to{stroke-dashoffset:0}}
.node{opacity:0;animation:nodeIn 1.1s var(--ease) forwards}
@keyframes nodeIn{to{opacity:0.85}}
.twinkle{animation:twinkle 4.5s var(--ease) infinite}
@keyframes twinkle{0%,100%{opacity:0.3}50%{opacity:1}}
.signal{opacity:0;animation:signalIn .8s ease 1.9s forwards}
@keyframes signalIn{to{opacity:1}}
/* hero image frame + stat overlays (editorial, image-led) */
.hero-frame{position:relative;border-radius:20px;overflow:hidden;aspect-ratio:4/5;width:100%;
  background:#0a1a12 url('images/serdar-hero.webp') 70% 42%/cover no-repeat;
  border:1px solid rgba(230,181,74,0.18);box-shadow:0 50px 100px -55px rgba(0,0,0,0.85),inset 0 1px 0 rgba(246,223,166,0.08)}
.hero-frame::after{content:'';position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,rgba(8,22,16,0.62) 0%,rgba(8,22,16,0.1) 27%,transparent 50%,rgba(8,22,16,0.5) 100%)}
.hero-stats{position:absolute;top:26px;left:26px;z-index:2}
.hero-stats div{padding:15px 0;border-top:1px solid rgba(232,223,208,0.16)}
.hero-stats div:first-child{border-top:none;padding-top:0}
.hero-stats b{display:block;font-family:var(--serif);font-weight:300;font-size:1.75rem;line-height:1;color:var(--sand)}
.hero-stats b em{color:var(--gold);font-style:normal}
.hero-stats span{display:block;margin-top:7px;font-size:0.52rem;letter-spacing:0.16em;text-transform:uppercase;color:rgba(232,223,208,0.5)}
.hero-frame .ph{position:absolute;right:24px;bottom:22px;z-index:2;text-align:right;font-family:var(--serif);font-style:italic;font-size:0.92rem;color:rgba(232,223,208,0.66)}
.hero-frame .ph small{display:block;font-family:var(--sans);font-style:normal;font-size:0.54rem;letter-spacing:0.1em;text-transform:uppercase;color:var(--gold);opacity:0.8;margin-top:6px}
@media(max-width:900px){
  header.hero{align-items:flex-start;min-height:auto}
  .hero .hero-split{grid-template-columns:1fr;gap:30px;padding:118px 22px 84px}
  .hero-frame{aspect-ratio:16/12}
  .hero h1{font-size:clamp(2.7rem,10vw,3.6rem)}
}

/* ============================================================ PAGE HERO (sub-pages) */
.hero-bridge{position:absolute;inset:0;pointer-events:none;z-index:0}
header.page-hero{padding:194px 0 98px;color:var(--sand);position:relative;overflow:hidden;
  background:
    radial-gradient(72% 62% at 78% -6%,rgba(230,181,74,0.13),transparent 58%),
    linear-gradient(168deg,#1c4a3a 0%,#123a2c 46%,#081711 100%)}
.page-hero::before{content:'';position:absolute;inset:0;pointer-events:none;z-index:1;background:linear-gradient(180deg,rgba(8,22,16,0.5) 0%,transparent 24%,transparent 70%,rgba(8,22,16,0.86) 100%)}
.page-hero .hero-bridge{opacity:0.6}
.page-hero h1{color:var(--sand);font-weight:300;font-size:clamp(2.6rem,6vw,4.7rem);letter-spacing:-0.02em;line-height:1.0}
.page-hero h1 em{font-style:italic;background:linear-gradient(102deg,var(--gold-light) 0%,var(--gold-metal) 46%,var(--gold-shadow) 100%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:var(--gold)}
.page-hero .lede{color:rgba(232,223,208,0.74);position:relative;z-index:2;margin-top:28px}
.page-hero .inner{position:relative;z-index:2}

/* ============================================================ SERDAR header band */
.serdar{background:radial-gradient(130% 140% at 15% 0%,#14392b 0%,#0c241b 55%,#06110c 100%);color:var(--sand);position:relative;overflow:hidden}
.serdar .bridge-span{position:absolute;inset:0;pointer-events:none;opacity:0.55}
.serdar-grid{position:relative;z-index:2;display:grid;grid-template-columns:1.05fr 0.95fr;gap:70px;align-items:center}
.serdar .cred{font-size:0.64rem;letter-spacing:0.2em;text-transform:uppercase;color:var(--gold);font-weight:500;margin-bottom:26px}
.serdar h2{color:var(--sand);font-size:clamp(2.6rem,6vw,4.7rem);line-height:0.98}
.serdar h2 em{color:var(--gold);font-style:italic}
.serdar .say{font-family:var(--serif);font-weight:300;font-style:italic;font-size:clamp(1.25rem,2.2vw,1.7rem);line-height:1.42;color:rgba(232,223,208,0.9);margin:30px 0 6px;max-width:520px}
.serdar .sub{color:rgba(232,223,208,0.72);font-size:1rem;max-width:500px;margin-top:18px}
.serdar-stats{display:flex;flex-wrap:wrap;gap:0;margin-top:40px;border-top:1px solid var(--hair-light)}
.serdar-stats div{padding:22px 30px 0 0;margin-right:30px;border-right:1px solid var(--hair-light)}
.serdar-stats div:last-child{border-right:none;margin-right:0}
.serdar-stats b{display:block;font-family:var(--serif);font-weight:300;font-size:1.9rem;line-height:1;color:var(--sand)}
.serdar-stats b em{color:var(--gold)}
.serdar-stats span{display:block;margin-top:9px;font-size:0.56rem;letter-spacing:0.14em;text-transform:uppercase;color:rgba(232,223,208,0.55);line-height:1.5}
/* portrait with two-world labels */
.serdar-portrait{position:relative}
.serdar-portrait .portrait{aspect-ratio:4/5;border-color:var(--hair-light)}
.world-tag{position:absolute;z-index:3;display:inline-flex;align-items:center;gap:8px;font-size:0.58rem;letter-spacing:0.16em;text-transform:uppercase;font-weight:500;color:var(--ink);background:var(--gold);padding:8px 15px;border-radius:999px;box-shadow:0 14px 30px -18px rgba(0,0,0,0.6)}
.world-tag.top{top:22px;right:-14px}
.world-tag.bottom{bottom:22px;left:-14px;background:var(--sand)}
.world-tag .d{width:7px;height:7px;border-radius:50%;background:var(--green)}
@media(max-width:900px){
  .serdar-grid{grid-template-columns:1fr;gap:44px}
  .serdar-stats div{padding-right:20px;margin-right:20px}
  .world-tag.top{right:12px}.world-tag.bottom{left:12px}
}

/* ============================================================ RECOGNITION STRIP */
.creds{background:linear-gradient(180deg,#123a2c 0%,#0a2419 100%);border-bottom:1px solid rgba(230,181,74,0.14);color:var(--sand);position:relative}
.creds .wrap{padding-top:38px;padding-bottom:38px}
.creds-lead{text-align:center;font-size:0.6rem;letter-spacing:0.3em;text-transform:uppercase;color:var(--gold);font-weight:500;margin-bottom:22px}
.creds-row{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:0}
.creds-row span{font-family:var(--serif);font-weight:300;font-size:clamp(0.92rem,1.5vw,1.12rem);color:rgba(232,223,208,0.9);padding:6px 30px;position:relative;text-align:center}
.creds-row span:not(:last-child)::after{content:'';position:absolute;right:0;top:50%;transform:translateY(-50%);width:1px;height:20px;background:rgba(230,181,74,0.32)}
@media(max-width:820px){
  .creds-row{flex-direction:column;gap:0}
  .creds-row span{padding:11px 0;font-size:1rem}
  .creds-row span:not(:last-child)::after{right:auto;left:50%;top:auto;bottom:0;transform:translateX(-50%);width:22px;height:1px}
}

/* ============================================================ VOOR DE OVERHEID & VEILIGHEID */
.veiligheid{background:var(--paper-deep)}
.beleidshook{margin-top:38px;background:rgba(255,255,255,0.6);border:1px solid var(--hair);border-left:3px solid var(--gold);border-radius:16px;padding:28px 34px;max-width:960px}
.beleidshook .bh-label{display:inline-block;font-size:0.58rem;letter-spacing:0.2em;text-transform:uppercase;color:var(--gold-deep);font-weight:500;margin-bottom:12px}
.beleidshook p{color:var(--text);font-size:1rem;line-height:1.7;margin:0}
.beleidshook em{color:var(--green);font-style:normal;font-weight:500}
.beleidshook a{color:var(--gold-deep);text-decoration:none;border-bottom:1px solid rgba(230,181,74,0.5);transition:color .3s var(--ease)}
.beleidshook a:hover{color:var(--green)}
.bh-download{display:inline-flex;align-items:center;gap:9px;margin-top:20px;padding:11px 20px;border-radius:999px;background:var(--green);color:var(--sand)!important;font-size:0.66rem;letter-spacing:0.12em;text-transform:uppercase;font-weight:500;text-decoration:none;border-bottom:none!important;transition:transform .5s var(--ease),background .4s var(--ease)}
.bh-download span{font-size:0.62rem;letter-spacing:0.08em;opacity:0.8}
.bh-download:hover{transform:translateY(-1px);background:var(--green-deep);color:var(--sand)!important}
.vg{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:56px}
.vg .core{display:flex;flex-direction:column;height:100%}
.vg .lbl{font-size:0.58rem;letter-spacing:0.2em;text-transform:uppercase;color:var(--gold-deep);font-weight:500;margin-bottom:20px}
.vg h3{color:var(--green);margin-bottom:12px}
.vg p{font-size:0.95rem;color:var(--text-soft)}
.vg .src{margin-top:auto;padding-top:22px;font-size:0.55rem;letter-spacing:0.14em;text-transform:uppercase;color:var(--text-soft);opacity:0.75}
@media(max-width:900px){.vg{grid-template-columns:1fr}}

/* ============================================================ MISSIE / ethos */
.mission{background:var(--paper);text-align:center}
.mission .wrap{max-width:900px}
.mission .eyebrow{justify-content:center;margin-bottom:26px}
.mission-statement{font-family:var(--serif);font-weight:300;font-size:clamp(2rem,4.6vw,3.5rem);line-height:1.08;letter-spacing:-0.018em;color:var(--green);margin:0}
.mission-statement em{font-style:italic;color:var(--gold-deep)}
.mission-body{font-family:var(--serif);font-weight:300;font-size:clamp(1.14rem,2vw,1.5rem);line-height:1.5;color:var(--text-soft);max-width:680px;margin:34px auto 0}
.mission-attr{margin-top:34px;font-size:0.62rem;letter-spacing:0.24em;text-transform:uppercase;color:var(--gold-deep);font-weight:500}
/* mission met foto-achtergrond — sterke overlay houdt tekst perfect leesbaar */
.mission-photo{background:#0a1a12;background-image:linear-gradient(rgba(6,20,14,0.80),rgba(6,20,14,0.72)),url(images/serdar-mission-bg.webp);background-size:cover;background-position:center top;background-repeat:no-repeat}
.mission-photo .mission-statement{color:#f4efe4}
.mission-photo .mission-statement em{color:var(--gold)}
.mission-photo .mission-body{color:rgba(244,239,228,0.90)}
.mission-photo .mission-attr{color:var(--gold)}

/* ============================================================ CAMPAGNE / video */
.campagne{background:radial-gradient(120% 130% at 80% 0%,#1e4d3b 0%,#123a2c 55%,#081711 100%);color:var(--sand);position:relative;overflow:hidden}
.campagne h2{color:var(--sand)}.campagne h2 em{color:var(--gold);font-style:italic}
.campagne .body{color:rgba(232,223,208,0.72)}.campagne .body em{color:var(--sand);font-style:italic}
.video-frame{position:relative;border-radius:22px;overflow:hidden;margin-top:46px;border:1px solid rgba(230,181,74,0.16);box-shadow:0 50px 100px -55px rgba(0,0,0,0.82);background:#0a0f14;aspect-ratio:16/9}
.video-frame video{width:100%;height:100%;display:block;object-fit:cover;background:#0a0f14}
.video-cap{margin-top:16px;font-size:0.62rem;letter-spacing:0.16em;text-transform:uppercase;color:rgba(232,223,208,0.5)}
/* media band (werk — lezing) */
.media-band{border-radius:22px;overflow:hidden;aspect-ratio:16/9;border:1px solid var(--hair);box-shadow:0 40px 84px -52px rgba(20,52,43,0.5);margin-top:10px}
.media-band img{width:100%;height:100%;object-fit:cover;object-position:center 34%;display:block}
.media-cap{margin-top:18px;font-family:var(--serif);font-style:italic;font-size:0.98rem;color:var(--text-soft);max-width:620px}

/* ============================================================ MANIFESTO band */
.manifesto{background:radial-gradient(120% 128% at 50% -12%,#2b302c 0%,#1d211e 46%,#141613 100%);color:var(--sand);text-align:center;box-shadow:inset 0 1px 0 rgba(246,223,166,0.07)}
.manifesto .wrap{max-width:900px}
.manifesto p{font-family:var(--serif);font-weight:300;font-style:italic;font-size:clamp(1.7rem,3.6vw,2.7rem);line-height:1.4;color:var(--sand)}
.manifesto p em{color:var(--gold);font-style:italic}
.manifesto .attr{margin-top:34px;font-family:var(--sans);font-style:normal;font-size:0.66rem;letter-spacing:0.24em;text-transform:uppercase;color:rgba(232,223,208,0.5)}
.manifesto.portrait-bw{background:#0a1a12;background-image:linear-gradient(rgba(6,20,14,0.66),rgba(6,20,14,0.74)),url(images/serdar-bw.webp);background-size:cover;background-position:center 30%;background-repeat:no-repeat;min-height:600px;display:flex;align-items:center}

/* ============================================================ PROOF */
.proof{background:radial-gradient(120% 132% at 50% -14%,#1d4c3b 0%,#16382e 52%,#0c231b 100%);color:var(--sand);box-shadow:inset 0 1px 0 rgba(246,223,166,0.08)}
.proof .wrap{display:grid;grid-template-columns:repeat(4,1fr)}
.proof .cell{padding:62px 52px;border-right:1px solid var(--hair-light)}
.proof .cell:first-child{padding-left:0}
.proof .cell:last-child{border-right:none;padding-right:0}
.proof strong{display:block;font-family:var(--serif);font-weight:300;font-size:2.9rem;line-height:1;color:var(--sand)}
.proof strong em{color:var(--gold)}
.proof span{display:block;margin-top:14px;font-size:0.62rem;letter-spacing:0.15em;text-transform:uppercase;color:rgba(232,223,208,0.55);line-height:1.6}

.shell{background:rgba(20,52,43,0.045);border:1px solid var(--hair);border-radius:26px;padding:7px;height:100%}
.core{background:#fff;border-radius:19px;padding:38px 34px;height:100%;box-shadow:inset 0 1px 1px rgba(255,255,255,0.8),0 26px 64px -44px rgba(20,52,43,0.32)}

/* ============================================================ STORY */
.story-grid{display:grid;grid-template-columns:1fr 1fr;gap:84px;align-items:center}
.portrait{position:relative;border-radius:26px;overflow:hidden;aspect-ratio:4/5;background:linear-gradient(160deg,var(--green) 0%,#1c4437 100%);border:1px solid var(--hair);display:flex;align-items:flex-end;padding:36px}
.portrait::after{content:'';position:absolute;right:-30%;top:-20%;width:70%;height:70%;border-radius:50%;background:radial-gradient(circle,rgba(230,181,74,0.2),transparent 68%)}
.portrait img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 24%;z-index:1}
.portrait .ph{position:relative;z-index:2;font-family:var(--serif);font-style:italic;font-size:0.92rem;color:rgba(232,223,208,0.75)}
.story-quote{font-family:var(--serif);font-weight:300;font-style:italic;font-size:2rem;line-height:1.32;color:var(--green);margin:32px 0}
.story-quote::before{content:'\201C';color:var(--gold-deep);font-size:1.1em;line-height:0;margin-right:2px}

/* ============================================================ WORK bento */
.bento{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;margin-top:58px}
.bento .shell.wide{grid-column:span 2}
.bento .core{display:flex;flex-direction:column}
.bento .tag{font-size:0.58rem;letter-spacing:0.2em;text-transform:uppercase;color:var(--gold-deep);font-weight:500;margin-bottom:auto}
.bento h3{margin:22px 0 12px;color:var(--green)}
.bento p{font-size:0.92rem;color:var(--text-soft)}
.bento .num{font-family:var(--serif);font-size:2.6rem;color:var(--gold-deep);line-height:1}
/* --- vlaggenschip: donkergroene feature-kaart --- */
.bento .core.dark{background:linear-gradient(160deg,#1c4437 0%,#123a2c 48%,#06140E 100%);border:1px solid rgba(230,181,74,0.18);box-shadow:inset 0 1px 1px rgba(230,181,74,0.12),0 34px 72px -42px rgba(6,20,14,0.7);position:relative;overflow:hidden}
/* machined hover lift — bento + pillar tiles float on hover (dark & light) */
.bento .shell,.pillar .shell{transition:transform .55s var(--ease)}
.bento .shell:hover,.pillar .shell:hover{transform:translateY(-6px)}
.bento .shell .core,.pillar .shell .core{transition:box-shadow .55s var(--ease)}
.bento .shell:hover .core,.pillar .shell:hover .core{box-shadow:inset 0 1px 1px rgba(255,255,255,0.85),0 46px 88px -48px rgba(20,52,43,0.42)}
.bento .shell:hover .core.dark{box-shadow:inset 0 1px 1px rgba(230,181,74,0.18),0 54px 104px -40px rgba(6,20,14,0.84)}
.bento .core.dark::after{content:"";position:absolute;right:-60px;top:-80px;width:320px;height:320px;border-radius:50%;background:radial-gradient(circle,rgba(230,181,74,0.14),transparent 62%);pointer-events:none}
.bento .core.dark .tag{color:var(--gold)}
.bento .core.dark h3{color:var(--sand);position:relative}
.bento .core.dark p{color:rgba(232,223,208,0.82);position:relative}
/* --- impact-rij: de waarde, meetbaar --- */
.werk-impact{margin-top:24px;border-top:1px solid var(--hair);padding-top:32px;display:grid;grid-template-columns:minmax(180px,240px) 1fr;gap:40px;align-items:center}
.werk-impact .wi-lead{font-family:var(--serif);font-weight:300;font-size:1.55rem;line-height:1.12;color:var(--green)}
.werk-impact .wi-lead em{font-style:italic;color:var(--gold-deep)}
.wi-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:30px}
.wi-stats b{display:block;font-family:var(--serif);font-weight:400;font-size:2.9rem;color:var(--gold-deep);line-height:1}
.wi-stats b em{font-style:normal;font-size:1.7rem;vertical-align:0.12em;margin-left:1px}
.wi-stats span{display:block;margin-top:9px;font-size:0.82rem;color:var(--text-soft);line-height:1.4;max-width:220px}
.wi-stats .src{color:var(--gold-deep);text-decoration:none;border-bottom:1px solid rgba(185,131,42,0.3)}
.wi-src{grid-column:1/-1;margin-top:18px;padding-top:16px;border-top:1px solid var(--hair);font-size:0.78rem;color:var(--text-soft);max-width:620px}
.wi-src a{color:var(--gold-deep);text-decoration:none;border-bottom:1px solid rgba(185,131,42,0.3)}
/* doelgroep-router (onder de erkenningsstrip, op donkere achtergrond) */
.router{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin-top:30px}
.router a{display:inline-flex;align-items:center;gap:8px;padding:11px 19px;border:1px solid rgba(230,181,74,0.4);border-radius:999px;font-size:0.85rem;letter-spacing:0.01em;color:var(--sand);text-decoration:none;white-space:nowrap;background:rgba(230,181,74,0.08);box-shadow:0 16px 34px -26px rgba(6,20,14,0.6);transition:transform .35s var(--ease),background .25s var(--ease),color .25s var(--ease),border-color .25s var(--ease),box-shadow .35s var(--ease)}
.router a:hover{transform:translateY(-3px);background:var(--gold);border-color:var(--gold);color:var(--ink);box-shadow:0 26px 50px -24px rgba(230,181,74,0.5)}
.router a .ar{color:var(--gold);transition:color .25s var(--ease)}
.router a:hover .ar{color:var(--ink)}
/* voor-jou blok (jongeren, in de donkere moment-sectie) */
.voorjou{margin:34px auto 0;max-width:640px;text-align:center;border:1px solid rgba(230,181,74,0.25);border-radius:18px;padding:26px 24px;background:rgba(230,181,74,0.05)}
.voorjou .vj-t{font-family:var(--serif);font-size:1.35rem;color:#F6DFA6;margin-bottom:10px}
.voorjou p{color:rgba(236,228,214,0.85);font-size:0.95rem;max-width:46ch;margin:0 auto}
.vj-btns{display:flex;gap:12px;flex-wrap:wrap;justify-content:center;margin-top:18px}
.vj-btns a{display:inline-flex;align-items:center;gap:7px;padding:11px 20px;border-radius:999px;border:1px solid rgba(230,181,74,0.5);color:#F6DFA6;text-decoration:none;font-size:0.88rem;transition:background .18s,color .18s}
.vj-btns a:hover{background:#E6B54A;color:#1c1608}
/* klikbare doelgroep-tegels */
a.aud{text-decoration:none;color:inherit;display:block;cursor:pointer}
@media(max-width:860px){.werk-impact{grid-template-columns:1fr;gap:22px}}
@media(max-width:560px){.wi-stats{grid-template-columns:1fr;gap:18px}.wi-stats span{max-width:none}}

/* ---- pillars (werk page) ---- */
.pillars{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;margin-top:56px}
.pillar .core{display:flex;flex-direction:column}
.pillar .pnum{font-family:var(--serif);font-size:2.4rem;color:var(--gold-deep);line-height:1;margin-bottom:16px}
.pillar h3{color:var(--green);margin-bottom:10px}
.pillar p{font-size:0.92rem;color:var(--text-soft)}
/* ---- theme chips ---- */
.chips{display:flex;flex-wrap:wrap;gap:10px;margin-top:34px;max-width:760px}
.chips span{font-size:0.72rem;letter-spacing:0.04em;color:var(--green);border:1px solid var(--hair);border-radius:999px;padding:9px 16px;background:rgba(255,255,255,0.6);white-space:nowrap}
.chip-groups{margin-top:34px;display:flex;flex-direction:column;gap:26px;max-width:820px}
.chip-group-label{font-family:var(--serif);color:var(--gold-deep);font-size:1.05rem;margin-bottom:13px}
.chip-group .chips{margin-top:0}

/* ============================================================ AUTHORITY / recognition */
.authority{background:linear-gradient(165deg,#173f30 0%,#0b2318 100%);color:var(--sand)}
.authority h2{color:var(--sand)}.authority h2 em{color:var(--gold)}
.authority .body{color:rgba(232,223,208,0.72)}
.auth-rows{margin-top:56px;border-top:1px solid var(--hair-light)}
.auth-row{display:grid;grid-template-columns:150px 1fr auto;gap:34px;align-items:baseline;padding:28px 0;border-bottom:1px solid var(--hair-light)}
.auth-row .yr{font-family:var(--serif);font-size:1.5rem;color:var(--gold)}
.auth-row .txt{color:rgba(232,223,208,0.82);font-size:1rem}
.auth-row .txt b{color:var(--sand);font-weight:500}
.auth-row .txt .expand{display:block;margin-top:10px;color:rgba(232,223,208,0.64);font-size:0.92rem}
.auth-row .src{font-size:0.58rem;letter-spacing:0.14em;text-transform:uppercase;color:rgba(232,223,208,0.45);white-space:nowrap}
.auth-row .src a{color:rgba(232,223,208,0.62);text-decoration:none;border-bottom:1px solid rgba(230,181,74,0.45);padding-bottom:2px;transition:color .35s var(--ease),border-color .35s var(--ease)}
.auth-row .src a:hover{color:var(--gold)}
/* timeline video clip */
.auth-clip{display:block;margin-top:20px;max-width:540px}
.auth-clip video{display:block;width:100%;aspect-ratio:848/480;object-fit:cover;background:#0b2318;border-radius:14px;border:1px solid rgba(230,181,74,0.28);box-shadow:0 28px 56px -36px rgba(20,52,43,0.55),inset 0 1px 1px rgba(246,223,166,0.10);cursor:pointer}
.auth-clip-cap{display:block;margin-top:14px;font-family:var(--serif);font-style:italic;font-size:0.95rem;line-height:1.42;color:var(--text-soft)}
.auth-clip-src{display:block;margin-top:4px;font-style:normal;font-family:var(--sans);font-size:0.58rem;letter-spacing:0.14em;text-transform:uppercase;color:var(--text-soft);opacity:0.7}
.neutrality-note{margin-top:40px;padding-top:30px;border-top:1px solid var(--hair-light);color:rgba(232,223,208,0.7);font-size:0.98rem;line-height:1.7;max-width:820px}
.neutrality-note b{color:var(--sand);font-weight:500}

/* ============================================================
   Craft refinements (agency-grade polish) — additive, layout-safe
   ============================================================ */
/* Fraunces optical size, driven by scale — refined display letterforms */
h1,h2{font-variation-settings:"opsz" 144}
h3,h4{font-variation-settings:"opsz" 38}
p.lede,.hero .lede,.mission-statement,.mission-body,.story-quote,.serdar .say,.manifesto p,.page-hero .lede{font-variation-settings:"opsz" 80}
/* Balanced headline wrapping + pretty body (kills widows/orphans) */
h1,h2,h3,.mission-statement,.story-quote,.manifesto p{text-wrap:balance}
p.lede,p.body,.mission-body,.serdar .sub,.auth-row .txt,.beleidshook p{text-wrap:pretty}
.auth-row .txt{max-width:62ch}
/* Signature stat figures — raised, lightened +/× and tabular lining numerals */
.proof strong,.serdar-stats b,.hero-stats b,.cell strong,.wi-stats b,.pillar .pnum,.aud .ic,.auth-row .yr,.hero-frame .ph,.pnum{font-variant-numeric:lining-nums tabular-nums;letter-spacing:-0.01em}
.proof strong em,.serdar-stats b em,.hero-stats b em,.cell strong em{font-size:0.5em;vertical-align:0.55em;margin-left:1px;font-style:normal}
/* Material depth on the flat dark sections */
.manifesto{background:radial-gradient(120% 150% at 50% 0%,#1c4a3a 0%,#0c2419 62%,#081711 100%)}
.proof{background:radial-gradient(140% 160% at 22% 0%,#235340 0%,#163f30 50%,#0b2318 100%)}
.authority,.proof,.manifesto,.serdar{box-shadow:inset 0 1px 0 rgba(246,223,166,0.06)}
/* Machined-glass nav (top highlight + bottom thickness) */
.navpill{box-shadow:0 12px 44px -26px rgba(20,52,43,0.45),inset 0 1px 0 rgba(255,255,255,0.55),inset 0 -1px 1px rgba(20,52,43,0.06)}
/* Source links: underline draws in on hover, arrow nudges */
.auth-row .src a{border-bottom:none;background:linear-gradient(currentColor,currentColor) 0 100%/0 1px no-repeat;padding-bottom:2px;transition:background-size .45s var(--ease),color .35s var(--ease)}
.auth-row .src a:hover{background-size:100% 1px}
.auth-row .src a::after{display:inline-block;transition:transform .35s var(--ease)}
.auth-row .src a:hover::after{transform:translate(2px,-2px)}
/* Branded selection + visible focus (a11y for keyboard users) */
::selection{background:rgba(230,181,74,0.26);color:var(--green-deep)}
:focus-visible{outline:2px solid var(--gold);outline-offset:3px;border-radius:4px}
.navlinks a:focus-visible,.btn:focus-visible,.btn-gold:focus-visible,.navcta:focus-visible,.btn-text:focus-visible{outline-offset:5px}
/* skip-to-content (a11y) */
.skip-link{position:fixed;left:14px;top:-56px;z-index:3000;background:var(--green);color:var(--sand);padding:11px 20px;border-radius:0 0 12px 12px;font-family:var(--sans);font-size:0.9rem;font-weight:500;text-decoration:none;box-shadow:0 6px 20px rgba(6,20,14,0.28);transition:top .22s var(--ease)}
.skip-link:focus{top:0;outline:2px solid var(--gold);outline-offset:2px}
main:focus{outline:none}
@media(prefers-reduced-motion:reduce){.skip-link{transition:none}}

.auth-row .src a::after{content:' \2197';font-size:0.9em;opacity:0.7}

/* ============================================================ NEWS */
.news-head{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;flex-wrap:wrap}
.news-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;margin-top:54px}
.news-card .core{padding:0;overflow:hidden;display:flex;flex-direction:column}
.news-thumb{aspect-ratio:16/10;background:linear-gradient(150deg,var(--green) 0%,#1c4437 100%);display:flex;align-items:flex-end;padding:18px;position:relative;overflow:hidden}
.news-thumb::after{content:'';position:absolute;right:-20%;top:-30%;width:60%;height:80%;border-radius:50%;background:radial-gradient(circle,rgba(230,181,74,0.22),transparent 66%);z-index:1}
/* unifying cinematic grade so bright documentary thumbs match the moody ones */
.news-thumb::before{content:'';position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(180deg,rgba(6,20,14,0.06) 0%,transparent 34%,transparent 60%,rgba(6,20,14,0.44) 100%)}
.news-thumb .src{position:relative;z-index:2;font-size:0.56rem;letter-spacing:0.14em;text-transform:uppercase;color:var(--green);background:var(--sand);padding:6px 12px;border-radius:999px;font-weight:500}
.news-thumb .avg{position:absolute;bottom:8px;right:12px;z-index:2;font-size:0.5rem;letter-spacing:0.06em;text-transform:uppercase;color:rgba(232,223,208,0.7)}
/* Gebrande fallback-tegel (geen foto): brug-boog + apex-stip + faint wordmark. */
.news-thumb--brand{background:linear-gradient(150deg,#1c4437 0%,#0e3325 58%,#06140E 100%)}
.news-thumb--brand[data-d="1"]{background:linear-gradient(148deg,#1a4033 0%,#0b2c20 60%,#050f0b 100%)}
.news-thumb--brand[data-d="2"]{background:linear-gradient(152deg,#173a2d 0%,#0d2f22 55%,#06140e 100%)}
.news-thumb--brand .thumb-arc{position:absolute;inset:0;width:100%;height:100%;z-index:1;pointer-events:none}
.news-thumb--brand .thumb-word{position:absolute;left:0;right:0;top:50%;transform:translateY(-64%);z-index:1;text-align:center;padding:0 22px;font-family:var(--serif);font-style:italic;font-size:1.04rem;letter-spacing:0.01em;color:rgba(230,181,74,0.17);pointer-events:none;white-space:nowrap}
.news-body{padding:26px 28px 30px}
.news-body .date{font-size:0.6rem;letter-spacing:0.14em;text-transform:uppercase;color:var(--gold-deep);font-weight:500;margin-bottom:12px}
.news-body h4{font-size:1.22rem;line-height:1.24;margin-bottom:10px;color:var(--green)}
.news-body p{font-size:0.86rem;color:var(--text-soft)}
.news-body a.more{display:inline-block;margin-top:14px;font-size:0.66rem;letter-spacing:0.12em;text-transform:uppercase;color:var(--gold-deep);text-decoration:none;font-weight:500}
.news-body a.more:hover{color:var(--green)}
.news-note{margin-top:42px;font-family:var(--serif);font-style:italic;font-size:0.94rem;color:var(--text-soft)}
/* ---- filters (nieuws page) ---- */
.filters{display:flex;flex-wrap:wrap;gap:10px;margin-top:44px}
.filters button{font-family:var(--sans);cursor:pointer;font-size:0.64rem;letter-spacing:0.12em;text-transform:uppercase;font-weight:500;color:var(--text-soft);background:rgba(255,255,255,0.6);border:1px solid var(--hair);border-radius:999px;padding:10px 18px;transition:all .4s var(--ease)}
.filters button:hover{color:var(--green)}
.filters button[aria-pressed="true"]{background:var(--green);color:var(--sand);border-color:var(--green)}
.news-empty{margin-top:40px;color:var(--text-soft);font-style:italic;font-family:var(--serif)}

/* ============================================================ AUDIENCES */
.aud-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:14px;margin-top:54px}
.aud{border:1px solid rgba(230,181,74,0.20);border-radius:18px;padding:28px 22px;
  background:linear-gradient(162deg,#1c4437 0%,#123a2c 50%,#06140E 100%);
  box-shadow:inset 0 1px 1px rgba(230,181,74,0.12),0 34px 72px -42px rgba(6,20,14,0.72);
  color:var(--sand);transition:transform .55s var(--ease),box-shadow .55s var(--ease)}
.aud:hover{transform:translateY(-6px);box-shadow:inset 0 1px 1px rgba(230,181,74,0.16),0 50px 96px -40px rgba(6,20,14,0.82)}
.aud .ic{font-family:var(--serif);font-size:1.7rem;color:var(--gold);margin-bottom:16px}
.aud h4{font-size:1.08rem;margin-bottom:6px;color:var(--sand)}
.aud p{font-size:0.78rem;color:rgba(232,223,208,0.6)}
/* vijf-werelden met foto-achtergrond — sterke overlay, kaarten poppen */
.worlds-photo{background:#0a1a12;background-image:linear-gradient(rgba(6,20,14,0.82),rgba(6,20,14,0.78)),url(images/serdar-worlds-bg.webp);background-size:cover;background-position:center;background-repeat:no-repeat}
.worlds-photo h2{color:#f4efe4}
.worlds-photo h2 em{color:var(--gold)}
.worlds-photo .news-note{color:rgba(244,239,228,0.85)}
.worlds-photo .aud{border-color:rgba(230,181,74,0.34)}

/* ============================================================ CONTACT form */
.contact-grid{display:grid;grid-template-columns:1fr 1.1fr;gap:72px;align-items:start}
.contact-aud{margin-top:30px;display:flex;flex-direction:column;gap:0}
.contact-aud div{padding:16px 0;border-top:1px solid var(--hair);display:flex;gap:16px;align-items:baseline}
.contact-aud div:last-child{border-bottom:1px solid var(--hair)}
.contact-aud .k{font-family:var(--serif);color:var(--gold-deep);font-size:1.05rem;flex:0 0 190px}
.contact-aud .v{color:var(--text-soft);font-size:0.92rem}
form.scu-form{background:rgba(255,255,255,0.6);border:1px solid var(--hair);border-radius:24px;padding:38px 34px}
.field{margin-bottom:22px}
.field label{display:block;font-size:0.62rem;letter-spacing:0.16em;text-transform:uppercase;color:var(--text-soft);font-weight:500;margin-bottom:9px}
.field input,.field select,.field textarea{width:100%;font-family:var(--sans);font-size:0.96rem;color:var(--text);background:var(--paper);border:1px solid var(--hair);border-radius:12px;padding:14px 16px;transition:border-color .3s var(--ease)}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--gold-deep);box-shadow:0 0 0 3px rgba(230,181,74,0.30)}
.field textarea{resize:vertical;min-height:130px;line-height:1.6}
.form-note{font-size:0.74rem;color:var(--text-soft);margin-top:6px}

/* ============================================================ CTA */
.cta{background:radial-gradient(110% 120% at 50% 0%,#235340 0%,#163f30 50%,#0a2018 100%);color:var(--sand);border-radius:36px;padding:52px 60px 88px;text-align:center;position:relative;overflow:hidden;margin:0 40px}
.cta h2{color:var(--sand);position:relative}.cta h2 em{color:var(--gold)}
/* merk-lockup boven de brug-CTA: gouden brug-teken + wordmark */
.cta-lockup{display:flex;flex-direction:column;align-items:center;gap:11px;margin:0 auto 30px;position:relative;z-index:2}
.cta-mark{width:58px;height:auto;display:block}
.cta-wordmark{font-family:var(--serif);font-size:1.04rem;letter-spacing:0.05em;color:var(--sand);opacity:0.92}
/* featured recent-videoblok (portret-reel, klik-om-af-te-spelen) */
.feature-video{display:grid;grid-template-columns:minmax(0,340px) 1fr;gap:48px;align-items:center;margin-top:40px}
.fv-player{position:relative;border-radius:22px;overflow:hidden;background:#06140e;border:1px solid rgba(230,181,74,0.18);box-shadow:0 40px 80px -46px rgba(6,20,14,0.66)}
.fv-player video{display:block;width:100%;height:auto;border-radius:22px}
.fv-text .body{margin:0}
.fv-src{margin-top:16px;font-size:0.62rem;letter-spacing:0.14em;text-transform:uppercase;color:var(--text-soft)}
@media (max-width:760px){.feature-video{grid-template-columns:1fr;gap:26px;max-width:360px;margin-left:auto;margin-right:auto}}
/* hero quick-facts (scan-antwoorden voor de beslisser op de donkere page-hero) */
.hero-facts{list-style:none;display:flex;flex-wrap:wrap;gap:12px 24px;margin:32px 0 0;padding:0}
.hero-facts li{position:relative;font-size:0.66rem;letter-spacing:0.1em;text-transform:uppercase;font-weight:500;color:rgba(232,223,208,0.72);padding-left:17px}
.hero-facts li::before{content:'';position:absolute;left:0;top:50%;transform:translateY(-50%);width:5px;height:5px;border-radius:50%;background:var(--gold)}
.cta p{color:rgba(232,223,208,0.75);max-width:540px;margin:22px auto 42px;position:relative}
.btn{position:relative;display:inline-flex;align-items:center;gap:12px;text-decoration:none;font-size:0.68rem;letter-spacing:0.18em;text-transform:uppercase;font-weight:500;border-radius:999px;padding:17px 13px 17px 28px;background:var(--gold);color:var(--ink);border:none;cursor:pointer;font-family:var(--sans);transition:transform .5s var(--ease)}
.btn .dot{width:32px;height:32px;border-radius:50%;background:rgba(26,29,27,0.14);display:flex;align-items:center;justify-content:center;font-size:.9rem;transition:transform .5s var(--ease)}
.btn:hover{transform:translateY(-2px)}.btn:hover .dot{transform:translate(3px,-1px)}
.btn:active{transform:scale(0.98)}
.btn.ghost{background:transparent;color:var(--sand);border:1px solid var(--hair-light)}
.btn.ghost .dot{background:rgba(232,223,208,0.14)}
/* ghost-variant voor LICHTE secties (groen contour → vult bij hover) */
.btn.ghost-green{background:transparent;color:var(--green);border:1px solid rgba(20,52,43,0.26)}
.btn.ghost-green .dot{background:rgba(20,52,43,0.10)}
.btn.ghost-green:hover{background:var(--green);color:#F7F4EC}
.btn.ghost-green:hover .dot{background:rgba(247,244,236,0.2)}

/* ============================================================ FOOTER */
footer{background:linear-gradient(180deg,#0e2c21 0%,#081711 100%);color:rgba(232,223,208,0.6);padding:74px 0 42px}
.foot-grid{display:grid;grid-template-columns:2fr 1fr 1fr;gap:44px;margin-bottom:52px}
footer h4{font-family:var(--serif);color:var(--sand);font-size:1.5rem;margin-bottom:16px;font-weight:300}
footer .lead{font-size:0.9rem;color:rgba(232,223,208,0.6);max-width:340px}
footer .col a{display:block;text-decoration:none;color:rgba(232,223,208,0.6);font-size:0.84rem;padding:6px 0;transition:color .4s}
footer .col a:hover{color:var(--gold)}
footer .col span{display:block;font-size:0.58rem;letter-spacing:0.18em;text-transform:uppercase;color:rgba(232,223,208,0.4);margin-bottom:12px}
.foot-base{border-top:1px solid var(--hair-light);padding-top:28px;display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;font-size:0.6rem;letter-spacing:0.14em;text-transform:uppercase;color:rgba(232,223,208,0.4)}

/* ============================================================ RESPONSIVE */
@media(max-width:900px){
  .wrap,.wrap-narrow{padding:0 22px}
  section{padding:84px 0}
  .navlinks{display:none}.burger{display:flex}
  .proof .wrap{grid-template-columns:1fr 1fr;gap:1px;background:var(--hair-light)}
  .proof .cell,.proof .cell:first-child,.proof .cell:last-child{background:var(--green);padding:36px 22px;border:none}
  .proof strong{font-size:2.2rem}
  .story-grid{grid-template-columns:1fr;gap:46px}
  .bento{grid-template-columns:minmax(0,1fr)}.bento .shell.wide{grid-column:span 1}
  .pillars{grid-template-columns:minmax(0,1fr)}
  .auth-row{grid-template-columns:1fr;gap:8px}.auth-row .src{white-space:normal}
  .news-grid{grid-template-columns:minmax(0,1fr)}
  .aud-grid{grid-template-columns:1fr 1fr}
  .contact-grid{grid-template-columns:1fr;gap:44px}
  .cta{margin:0 22px;padding:60px 28px}
  .foot-grid{grid-template-columns:1fr;gap:32px}
  header.page-hero{padding:150px 0 72px}
}
@media(max-width:600px){
  .brand{font-size:0.98rem}
  .navpill{gap:13px;padding:10px 13px 10px 18px}
}
/* mobile header: wordmark + burger; Samenwerken moves into a clean dropdown */
.nav-mob-cta{display:none}
@media(max-width:900px){
  .navpill{position:relative}
  .navcta{display:none}
  .navlinks{position:absolute;top:calc(100% + 12px);right:0;flex-direction:column;gap:0;min-width:232px;
    background:rgba(250,247,241,0.97);backdrop-filter:blur(22px);-webkit-backdrop-filter:blur(22px);
    border:1px solid var(--hair);border-radius:20px;padding:10px;box-shadow:0 22px 54px -26px rgba(20,52,43,0.55)}
  .navlinks a{padding:13px 16px;font-size:0.74rem;letter-spacing:0.1em;border-radius:12px;color:var(--green)}
  .navlinks a:hover,.navlinks a[aria-current="page"]{background:rgba(20,52,43,0.06)}
  .nav-mob-cta{display:block;margin-top:6px;background:var(--green);color:var(--sand)!important;text-align:center;letter-spacing:0.14em}
}
@media(max-width:380px){
  .aud-grid{grid-template-columns:1fr}
  .proof .wrap{grid-template-columns:1fr;gap:1px}
  .serdar-stats{flex-direction:column}
  .serdar-stats div{border-right:none;border-bottom:1px solid var(--hair-light);margin-right:0;padding:16px 0 0}
}

/* ============================================================ REDUCED MOTION */
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .reveal{opacity:1;transform:none;filter:none;transition:none}
  .draw-arc,.draw-line{animation:none;stroke-dashoffset:0}
  .node,.twinkle,.signal{animation:none}
  .node{opacity:0.85}.signal{opacity:1}
  .hero-video{display:none}
  .aud,.navcta,.btn,.navcta .dot,.btn .dot{transition:none}
}


/* ===== Luxury consistency + signature (design-director pass) ===== */
/* .creds recognition strip: radial light source to match its neighbours */
.creds{background:radial-gradient(120% 180% at 50% -40%,#1e4d3b 0%,#123a2c 55%,#0a1f16 100%);box-shadow:inset 0 1px 0 rgba(246,223,166,0.05)}
/* .authority: lift the muddy/olive top stop into the family */
.authority{background:linear-gradient(165deg,#1f4d3b 0%,#0a1f16 100%)}
/* hairline gold light-seam between stacked dark bands (machined panel joins) */
.creds,.serdar,.campagne,.manifesto,.proof,.authority{border-top:1px solid rgba(246,223,166,0.07)}
/* lift essential body copy above the AA floor on the brighter greens */
.campagne .body,.authority .body,.page-hero .lede,.hero .lede{color:rgba(232,223,208,0.82)}
.proof .cell span,.serdar-stats span{color:rgba(232,223,208,0.62)}
/* warm the neutral charcoal into the green-black family */
:root{--ink:#0d1f18}
/* signature: the founder-band bridge draws itself in on arrival */
.serdar .bridge-span path{stroke-dasharray:2000;stroke-dashoffset:2000;animation:scuDrawArc 2.6s var(--ease) .5s forwards}
@keyframes scuDrawArc{to{stroke-dashoffset:0}}
@media(prefers-reduced-motion:reduce){.serdar .bridge-span path{animation:none;stroke-dashoffset:0}}


/* ===================================================================
   FINAL LUXURY OVERRIDE — Rolex-tier panel (deep, flat, rationed gradient)
   Solid deep fields = default. Gradient only for hero + closing CTA.
   =================================================================== */
:root{ --green:#0F3D2E; --green-deep:#06140E; --green-mid:#123A2C; }
/* hero video: un-crush (was double-crushed by low opacity AND low brightness) */
.hero-video{opacity:0.3;filter:saturate(0.8) brightness(0.7)}
/* the ONLY two gradient moments */
header.hero{background:
  radial-gradient(78% 56% at 74% 6%,rgba(230,181,74,0.12),transparent 58%),
  linear-gradient(168deg,#0F3D2E 0%,#0C2E23 46%,#06140E 100%)}
header.page-hero{background:linear-gradient(172deg,#0F3D2E 0%,#0C2E23 44%,#06140E 100%)}
.cta{background:radial-gradient(110% 120% at 50% 0%,#123A2C 0%,#0F3D2E 45%,#06140E 100%)}
/* everything else = flat, deep, quiet fields (solid + hairline + solid) */
.serdar{background:#06140E}
.creds{background:#0A2419}
.campagne{background:#0F3D2E}
.manifesto{background:#06140E}
.proof{background:#0F3D2E}
.authority{background:#0C2E23}
footer{background:linear-gradient(180deg,#0A2419 0%,#06140E 100%)}

/* --- panel consensus refinement: kill gold seams/highlights --- */
.creds,.serdar,.campagne,.manifesto,.proof,.authority{border-top:none;box-shadow:none}
/* closing CTA = the bridge ("laten we die brug samen bouwen"); green veil keeps text legible */
.cta{background:
  linear-gradient(180deg,rgba(6,20,14,0.9) 0%,rgba(12,46,35,0.52) 42%,rgba(12,46,35,0.52) 58%,rgba(6,20,14,0.92) 100%),
  #07130d url('images/bridge-hero-wide.webp') center top/cover no-repeat}

/* --- erkenning: recognition ledger ON PAPER (green hero -> beige, consistent) --- */
.authority.auth-paper{background:var(--paper);color:var(--text)}
.authority.auth-paper .eyebrow.light{color:var(--gold-deep)}
.authority.auth-paper .eyebrow.light::before{background:linear-gradient(90deg,transparent,var(--gold-deep))}
.authority.auth-paper .eyebrow.light::after{background:linear-gradient(90deg,var(--gold-deep),transparent)}
.authority.auth-paper h2{color:var(--green)}
.authority.auth-paper h2 em{color:var(--gold-deep)}
.authority.auth-paper .auth-rows{border-top-color:var(--hair)}
.authority.auth-paper .auth-row{border-bottom-color:var(--hair)}
.authority.auth-paper .auth-row .yr{color:var(--gold-deep)}
.authority.auth-paper .auth-row .txt{color:var(--text)}
.authority.auth-paper .auth-row .txt b{color:var(--green)}
.authority.auth-paper .auth-row .txt .expand{color:var(--text-soft)}
.authority.auth-paper .auth-row .src{color:var(--text-soft)}
.authority.auth-paper .auth-row .src a{color:var(--gold-deep);border-bottom-color:rgba(201,148,46,0.4)}
.authority.auth-paper .neutrality-note{color:var(--text-soft);border-top-color:var(--hair)}
.authority.auth-paper .neutrality-note b{color:var(--green)}


/* ===== Prominent recognition chips (linked credentials, after hero) ===== */
.creds .wrap{padding-top:62px;padding-bottom:62px}
.creds-lead{text-align:center;font-size:0.62rem;letter-spacing:0.3em;text-transform:uppercase;color:var(--gold);font-weight:600;margin-bottom:36px}
.creds-chips{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;max-width:1120px;margin:0 auto}
.cred-chip{position:relative;display:flex;flex-direction:column;gap:10px;text-decoration:none;
  background:linear-gradient(158deg,#FBF9F4 0%,#F3EEE3 100%);border:1px solid rgba(20,52,43,0.14);border-radius:16px;
  box-shadow:inset 0 1px 1px rgba(255,255,255,0.9),0 24px 50px -30px rgba(6,20,14,0.55);
  padding:22px 24px 20px;transition:transform .5s var(--ease),box-shadow .5s var(--ease)}
.cred-chip:hover{transform:translateY(-4px);box-shadow:inset 0 1px 1px rgba(255,255,255,0.9),0 40px 76px -30px rgba(6,20,14,0.62)}
.cred-chip .cc-k{font-size:0.55rem;letter-spacing:0.2em;text-transform:uppercase;color:var(--gold-deep);font-weight:700;padding-right:20px}
.cred-chip .cc-t{font-family:var(--serif);font-weight:400;font-size:1.02rem;line-height:1.28;color:var(--green)}
.cred-chip .cc-ar{position:absolute;top:20px;right:20px;color:var(--gold-deep);font-size:0.85rem;opacity:0.7;transition:transform .4s var(--ease),opacity .4s var(--ease)}
.cred-chip:hover .cc-ar{transform:translate(2px,-2px);opacity:1}
.creds-note{text-align:center;margin-top:32px}
.creds-note a{color:rgba(232,223,208,0.6);text-decoration:none;font-size:0.8rem;letter-spacing:0.02em;transition:color .35s var(--ease)}
.creds-note a:hover{color:var(--gold)}
@media(max-width:900px){.creds-chips{grid-template-columns:1fr 1fr}}
@media(max-width:540px){.creds-chips{grid-template-columns:1fr}.creds .wrap{padding-top:48px;padding-bottom:48px}}


/* ===== veiligheid cards: gold left accent + linked gold proof labels ===== */
.vg .src{color:var(--green);opacity:1;font-weight:600}
.vg .src a{color:var(--green);text-decoration:none;transition:color .35s var(--ease)}
.vg .src a:hover{color:var(--gold-deep)}
.vg .src a .ar{display:inline-block;margin-left:2px;transition:transform .35s var(--ease)}
.vg .src a:hover .ar{transform:translate(2px,-2px)}


/* connecting-dots wordmark — two gold dots flanking the brand */
.brand{gap:10px}
.brand-dot{width:5px;height:5px;border-radius:50%;flex-shrink:0;background:#BE8E2C;box-shadow:inset 0 0.5px 0 rgba(255,247,225,0.55)}


/* symmetric hero eyebrow — gold line on both sides */
.hero-eyebrow::after{content:'';width:34px;height:1px;background:linear-gradient(90deg,var(--gold),transparent)}

/* mobile: stack proof stats in one clean column (aligned, premium) */
@media(max-width:600px){.proof .wrap{grid-template-columns:1fr}.proof .cell,.proof .cell:first-child,.proof .cell:last-child{padding:34px 24px}.proof strong{font-size:2.6rem}}


/* ============================================================
   v48 — RESPONSIVE PERFECTION PASS (multi-agent audit consolidation)
   All-device sweep: mobile portrait/landscape, iPad, Mac. Additive;
   later-source cascade overrides base rules. Verified 0px overflow 320–1440.
   ============================================================ */

/* --- A1. .serdar-stats: clean 2-col grid, no dangling hairline on wrap --- */
@media (max-width:900px){
  .serdar-stats{display:grid;grid-template-columns:1fr 1fr;gap:0;border-top:1px solid var(--hair-light)}
  .serdar-stats div{padding:20px 20px 20px 0;margin:0;border-right:1px solid var(--hair-light);border-bottom:1px solid var(--hair-light)}
  .serdar-stats div:nth-child(2n){border-right:none;padding-right:0}
  .serdar-stats div:nth-last-child(-n+2){border-bottom:none}
}
@media (max-width:380px){
  .serdar-stats{grid-template-columns:1fr}
  .serdar-stats div{padding:18px 0;border-right:none;border-bottom:1px solid var(--hair-light)}
  .serdar-stats div:nth-child(2n){padding-right:0}
  .serdar-stats div:last-child{border-bottom:none;padding-bottom:0}
}

/* --- A2. empty year cell: keep the grid track (invisible) so the row stays
   aligned on desktop; fully collapse only when the grid is single-column (<=900). --- */
.auth-row .yr:empty{visibility:hidden}
@media (max-width:900px){.auth-row .yr:empty{display:none}}
/* "tot heden" kicker under a year (ongoing entry) */
.auth-row .yr-note{display:block;font-family:var(--sans);font-size:0.56rem;font-weight:500;letter-spacing:0.16em;text-transform:uppercase;color:rgba(232,223,208,0.5);margin-top:7px;line-height:1}
.authority.auth-paper .auth-row .yr-note{color:var(--text-soft)}

/* --- A3. tighten oversized year column on wide screens --- */
@media (min-width:901px){
  .auth-row{grid-template-columns:88px minmax(0,1fr) auto;gap:40px}
}

/* --- A4. closing CTA shares the 1200px content column --- */
.cta{max-width:1200px;margin-left:auto;margin-right:auto}
@media (max-width:1280px){.cta{margin-left:40px;margin-right:40px;max-width:none}}
@media (max-width:900px){.cta{margin-left:22px;margin-right:22px}}

/* --- A5. privacy hero + body share a left edge --- */
header.page-hero .wrap.inner{max-width:820px}

/* --- A6. news archive head stacks cleanly --- */
@media (max-width:900px){
  .news-head{flex-direction:column;align-items:flex-start;gap:16px}
  .news-head p.body{max-width:640px}
}

/* --- A7. contact detail rows stack on phones --- */
@media (max-width:600px){
  .contact-aud div{flex-direction:column;align-items:stretch;gap:4px;padding:18px 0}
  .contact-aud .k{flex:none;min-width:0;font-size:1rem;margin-bottom:2px}
  .contact-aud .v{font-size:0.95rem;line-height:1.5;color:var(--text-soft)}
}

/* --- A8. contact form padding trims so blocks share a left edge --- */
@media (max-width:900px){form.scu-form{padding:32px 24px}}
@media (max-width:600px){form.scu-form{padding:26px 20px;border-radius:20px}}

/* --- A9. credential-chip title clears the absolute arrow --- */
.cred-chip .cc-t{padding-right:22px}

/* --- B1. LANDSCAPE PHONES: see the LANDSCAPE PHONE LAYOUT block at end of file.
   (Old rule forced a single stretched column — replaced. Do not re-add here.) --- */

/* --- B2. hero-frame overlays un-absolute on smallest portrait phones --- */
@media (max-width:560px){
  .hero-frame{aspect-ratio:auto;min-height:0;background-position:70% 42%;background-size:cover}
  .hero-frame::after{display:none}
  .hero-frame .hero-stats{position:static;padding:22px 22px 0}
  .hero-frame .ph{position:static;text-align:left;padding:14px 22px 22px;margin-top:10px}
}

/* --- B3. audience grid: no orphan 5th card; 3-across on iPad --- */
@media (min-width:901px) and (max-width:1100px){.aud-grid{grid-template-columns:repeat(3,1fr);gap:16px}}
@media (max-width:900px){.aud-grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}.aud-grid .aud:last-child{grid-column:1 / -1}}
@media (max-width:380px){.aud-grid{grid-template-columns:1fr}.aud-grid .aud:last-child{grid-column:auto}}

/* --- B4. credential chips: 2-col on iPad for equal heights --- */
@media (min-width:901px) and (max-width:1100px){.creds-chips{grid-template-columns:1fr 1fr;max-width:760px}}

/* --- B5. card body padding reduces on small phones --- */
@media (max-width:600px){
  .core{padding:28px 22px}
  .shell{padding:6px}
  .beleidshook{padding:24px 20px;border-radius:14px}
  .beleidshook .bh-download{width:100%;justify-content:center}
}
@media (max-width:380px){.core{padding:24px 20px}}

/* --- B6. AVG line clears source chip on stacked news cards --- */
.news-thumb .avg{max-width:60%;text-align:right;line-height:1.35}
@media (max-width:600px){
  .news-thumb{padding:14px}
  .news-thumb .avg{position:static;align-self:flex-end;margin-top:auto;max-width:100%}
}

/* --- B7. REVERTED: `br{display:none}` glued words together ("naar<br>de" → "naarde")
   because headings have no whitespace around the <br>. Authored breaks read fine
   on mobile, so we keep them. Do NOT re-add this rule. --- */

/* --- B8. 16px inputs kill iOS focus-zoom --- */
@media (max-width:900px){.field input,.field select,.field textarea{font-size:16px}}

/* --- B9. iPad-landscape vertical rhythm --- */
@media (min-width:901px) and (max-width:1100px){section{padding:100px 0}}

/* --- C1. hero eyebrow fits narrowest phones --- */
@media (max-width:400px){
  .hero-eyebrow{letter-spacing:0.2em;font-size:0.55rem;flex-wrap:wrap}
  .hero-eyebrow::before,.hero-eyebrow::after{width:20px}
}

/* --- C2. world-tag pills off the subject's face --- */
@media (max-width:520px){
  .world-tag{font-size:0.52rem;padding:6px 11px}
  .world-tag.top{top:12px;right:8px}
  .world-tag.bottom{bottom:12px;left:8px}
}

/* --- C3. proof cells equal height in 2x2 --- */
@media (max-width:900px) and (min-width:601px){
  .proof .cell{display:flex;flex-direction:column;justify-content:flex-start;min-height:150px}
}

/* --- C4. superscript + sits right on big figures --- */
@media (max-width:600px){.proof strong em,.cell strong em{font-size:0.45em;vertical-align:0.5em;margin-left:2px}}

/* --- C5. tighter filter pills on phones --- */
@media (max-width:600px){.filters{margin-top:28px;gap:8px}.filters button{padding:9px 15px;font-size:0.6rem}}

/* --- C6. news titles breathe on smallest phones --- */
@media (max-width:380px){
  .news-body{padding:22px 22px 26px}
  .news-body h4{font-size:1.12rem;line-height:1.28}
  .news-body p{font-size:0.85rem}
}

/* --- C7. chip cloud aligns to reading measure --- */
.chips{max-width:820px}
/* narrow screens: let pill labels wrap so a long label never pushes past the screen edge */
@media(max-width:600px){.chips span,.router a{white-space:normal}}

/* --- C8. contact label gutter on iPad --- */
@media (max-width:900px) and (min-width:601px){.contact-aud .k{flex:0 0 150px}}

/* ============================================================ KILL STRAY DECORATIVE LINES ON MOBILE
   The bridge/cinema line-art (.hero-cinema arc + .bridge-span suspension cables +
   .hero-bridge) is drawn in a wide viewBox with preserveAspectRatio="slice". On a
   narrow phone that crop leaves stray gold lines — most visibly the centre vertical
   "cable" running straight down the middle of the Serdar band. All three are purely
   decorative (aria-hidden), so we simply hide them below the desktop width. */
@media (max-width:900px), (orientation:landscape) and (max-height:560px){
  .hero-cinema,.bridge-span,.hero-bridge{display:none}
}

/* ============================================================ MOBILE MENU OPEN STATE
   Class-based (no inline styles). Higher specificity than .navlinks{display:none},
   so it wins regardless of source order. The dropdown look comes from the
   `@media(max-width:900px) .navlinks{...}` block above. */
.navlinks.open{display:flex}

/* ============================================================ LANDSCAPE PHONE LAYOUT
   A landscape phone is WIDE and SHORT (~667–932 × 375–430). A single stretched
   column reads absurdly wide, so here we USE the width: content sits in real
   columns and vertical padding tightens. Placed last so it beats every earlier
   mobile rule (aud-grid, proof, vg, bento …) by source order.
   Trigger: any landscape viewport under 560px tall = a phone (tablets are ≥768 tall). */
@media (orientation:landscape) and (max-height:560px){
  section{padding:60px 0}

  /* hero: text beside image — the shape landscape is made for */
  header.hero{min-height:auto;align-items:flex-start}
  .hero .hero-split{grid-template-columns:1.08fr 0.92fr;gap:36px;padding:94px 22px 56px;align-items:center}
  .hero h1{font-size:clamp(2.1rem,5vw,3rem)}
  .hero .lede{margin-top:20px}
  .hero .cta-row{margin-top:30px}
  .hero-frame{aspect-ratio:4/3;max-width:none}
  .hero-stats{top:16px;left:16px}
  .hero-stats b{font-size:1.35rem}
  .hero-stats div{padding:11px 0}
  .hero-frame .ph{right:16px;bottom:14px;font-size:0.8rem}

  header.page-hero{padding:116px 0 52px}

  /* two-column bands (image + text) — natural in landscape */
  .serdar-grid{grid-template-columns:1.05fr 0.95fr;gap:40px}
  .story-grid{grid-template-columns:1fr 1fr;gap:44px}
  .contact-grid{grid-template-columns:1fr 1fr;gap:40px}

  /* card grids: back to multiple columns instead of one full-width stack.
     minmax(0,1fr) lets tracks shrink below content min-width so nothing overflows
     on the narrowest landscape phone (667px). */
  .vg{grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
  .pillars{grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
  .bento{grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
  .bento .shell.wide{grid-column:span 2}
  .aud-grid{grid-template-columns:repeat(5,minmax(0,1fr));gap:10px}
  .aud-grid .aud:last-child{grid-column:auto}
  .creds-chips{grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
  .foot-grid{grid-template-columns:1.4fr 1fr 1fr;gap:28px}

  /* proof: four stats in one clean row */
  .proof .wrap{grid-template-columns:repeat(4,minmax(0,1fr));gap:1px}
  .proof strong{font-size:2rem}
}

/* ============================================================ WERK STATEMENT — WHISTLE
   Gold whistle on black behind "Ik ken hun startpunt. Daarom luisteren ze." (werk.html).
   Drop the whistle image as images/whistle-bg.webp. Falls back to solid #06140E until then. */
.manifesto.whistle{position:relative;background:#06140E url('images/whistle-bg.webp') center right/cover no-repeat}
.manifesto.whistle::after{content:'';position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(6,20,14,0.82) 0%,rgba(6,20,14,0.52) 48%,rgba(6,20,14,0.86) 100%)}
.manifesto.whistle .wrap{position:relative;z-index:1}
/* mirrored variant so the two quote bands don't read identical (whistle on the left) */
.manifesto.whistle-left{background-image:url('images/whistle-bg-left.webp');background-position:center left}

/* ============================================================ WERELDTOP MOMENT (video band) */
.moment{background:#06140E;color:var(--sand);text-align:center}
.moment .eyebrow.light{justify-content:center;margin-bottom:26px}
.moment-frame{position:relative;border-radius:22px;overflow:hidden;margin:0 auto;max-width:1000px;
  aspect-ratio:1280/546;border:1px solid rgba(230,181,74,0.18);
  box-shadow:0 50px 100px -55px rgba(0,0,0,0.82);background:#0a0f14}
.moment-video{width:100%;height:100%;display:block;object-fit:cover;background:#0a0f14}
.moment-cap{margin:20px auto 0;font-family:var(--serif);font-style:italic;font-size:1.05rem;color:rgba(232,223,208,0.72);max-width:640px}

/* ============================================================ COLUMN READER (column.html) */
.column-hero .eyebrow.light a{color:var(--gold);text-decoration:none;transition:color .3s var(--ease)}
.column-hero .eyebrow.light a:hover{color:var(--gold-light)}
.column-read{background:var(--paper)}
.column-read .wrap-narrow{max-width:720px;margin:0 auto}
.column-portrait{margin:0 0 40px;border-radius:20px;overflow:hidden;border:1px solid var(--hair);box-shadow:0 40px 84px -52px rgba(20,52,43,0.45);aspect-ratio:16/10;background:var(--sand)}
.column-portrait img{width:100%;height:100%;object-fit:cover;display:block}
.column-body p{font-size:1.08rem;line-height:1.75;color:var(--text-soft);margin-bottom:22px;text-wrap:pretty}
.column-body p:first-child{font-size:1.22rem;line-height:1.6;color:var(--green);font-family:var(--serif);font-weight:300}
.column-source{margin-top:32px;padding-top:20px;border-top:1px solid var(--hair);font-size:0.66rem;letter-spacing:0.18em;text-transform:uppercase;color:var(--gold-deep);font-weight:600}

.column-more{margin-top:34px}

/* ===== vijf-werelden : machined floating cards (SCU green + gold) ===== */
.aud{
  background:linear-gradient(162deg,#1c4437 0%,#123a2c 50%,#06140E 100%) !important;
  border:1px solid rgba(230,181,74,0.20) !important;
  box-shadow:inset 0 1px 1px rgba(230,181,74,0.12), 0 34px 72px -42px rgba(6,20,14,0.72) !important;
  color:var(--sand) !important;
  transition:transform .55s var(--ease), box-shadow .55s var(--ease) !important;
}
.aud:hover{
  transform:translateY(-6px) !important;
  box-shadow:inset 0 1px 1px rgba(230,181,74,0.16), 0 50px 96px -40px rgba(6,20,14,0.82) !important;
}
.aud .ic{color:var(--gold) !important}
.aud h4{color:var(--sand) !important}
.aud p{color:rgba(232,223,208,0.6) !important}