/* =========================================================================
   Amanah Advisors — theme (Master + Advisors property)
   Owns: black ground, gold, cream, house yellow.
   NEVER: purple, teal, silver.
   ========================================================================= */
:root{
  --gold-grad:linear-gradient(135deg,#E6CB84 0%,#C9A24B 50%,#A47C2E 100%);
  --gold:#C9A24B;        /* flat gold, on dark   */
  --gold-deep:#A47C2E;   /* deep gold,  on light */

  /* Surfaces — white ground per brandbook */
  --bg:var(--white);
  --fg:var(--ink);
  --muted:rgba(10,10,10,.64);
  --line:rgba(10,10,10,.12);
  --card:#fff;
  --header-bg:var(--white);
  --sub-color:var(--gold-deep);
  --footer-bg:var(--ink);
  --footer-fg:rgba(247,240,212,.72);
  --footer-head:var(--gold);      /* footer column headings */
  --focus:var(--gold-deep);

  /* Buttons */
  --btn-bg:var(--ink);
  --btn-fg:var(--paper);

  --accent:var(--gold-deep);
  --keyline:rgba(164,124,46,.4);
  --imgph-bg:linear-gradient(135deg,#211d13,#3a3320);
}

body{background:var(--bg);color:var(--fg)}
.eyebrow{color:var(--gold-deep)}
::selection{background:var(--yellow);color:var(--ink)}

/* Links in running text */
.prose a,a.link{color:var(--gold-deep);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}

/* Panels ---------------------------------------------------------------- */
.panel--ink{background:var(--ink);color:var(--cream);--fg:var(--cream);--muted:rgba(247,240,212,.66);--line:rgba(247,240,212,.16);--card:#141210;--btn-bg:var(--gold);--btn-fg:var(--ink)}
.panel--ink .eyebrow{color:var(--gold)}
.panel--yellow{background:var(--yellow);color:var(--ink);--fg:var(--ink);--muted:rgba(10,10,10,.68);--line:rgba(10,10,10,.16);--btn-bg:var(--ink);--btn-fg:var(--yellow)}
.panel--yellow .eyebrow{color:rgba(10,10,10,.7)}
.panel--cream{background:var(--cream);--card:#fff}

/* Emblem tint — gold icon (brandbook lockup) */
.brand .emblem g{fill:url(#bAgrad)}
.emblem--gold g{fill:var(--gold-deep)}


.site-footer .brand .sub{color:var(--gold)}

/* Gold text accent */
.gold{color:var(--gold-deep)}
.panel--ink .gold{color:var(--gold)}
.rule-gold{height:2px;width:56px;background:var(--gold-grad);border:0;border-radius:2px}

/* Buttons: gold gradient variant */
.btn--gold{--_bg:transparent;--_fg:var(--ink);background:var(--gold-grad);border:none}
.panel--ink .btn--gold{--_fg:var(--ink)}

/* Branded photo slot — reads as an intentional image area awaiting photography */
.imgph{background:linear-gradient(150deg,#241f14 0%,#0A0A0A 70%)}
.imgph::before{content:"";position:absolute;inset:0;background:url(../shared/emblem.svg) center/68px no-repeat;opacity:.07;filter:brightness(0) invert(1)}
.imgph[data-dark]{background:linear-gradient(150deg,#2a2416 0%,#0A0A0A 72%)}
.imgph:has(img)::before,.imgph:has(video)::before{display:none}
/* Video fills the photo slot exactly like an image */
.imgph>video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}

/* Stat / proof strip */
.stat b{font-family:var(--font-display);font-weight:800;font-size:var(--step-3);letter-spacing:-.04em;display:block;line-height:1}
.stat span{display:block;margin-top:8px;font-size:var(--step--1);letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}

/* ---- Mastercard-style shapes, themed to the Advisors palette ----------- */
/* Rounded section boxes */
.box--ink{background:var(--ink);color:var(--cream);--fg:var(--cream);--muted:rgba(247,240,212,.66);--line:rgba(247,240,212,.16);--accent:var(--gold);--keyline:rgba(201,162,75,.5);--btn-bg:var(--gold);--btn-fg:var(--ink)}
.box--cream{background:var(--cream)}
.box--yellow{background:var(--yellow);--muted:rgba(10,10,10,.68);--accent:rgba(10,10,10,.75);--btn-bg:var(--ink);--btn-fg:var(--yellow)}

/* Accent colour flips on dark panels */
.panel--ink .pill-card .k,.panel--ink .pill-card__link,.panel--ink .carousel__body .k,.panel--ink .carousel__body .more{color:var(--gold)}
.panel--ink .section-intro .eyebrow{color:var(--gold)}

/* Carousel viewport ground so text panel reads on the paper background */
.carousel--framed .carousel__viewport{border:1px solid var(--line)}
.carousel--framed .carousel__body{background:var(--card,#fff)}
.panel--ink .carousel--framed .carousel__body{background:#141210}

/* A featured/circle pill can sit on a soft cream disc for depth */
.pill-card--circle .imgph{box-shadow:0 24px 50px -34px rgba(10,10,10,.55)}

/* =========================================================================
   Monzo-style components — themed to the Advisors palette
   ========================================================================= */

/* Hero carousel */
.hero-carousel{--hero-badge-dot:var(--gold)}
.hero-slide__body .eyebrow{color:var(--gold)}

/* Product-nav ("Tell me about") */
.prodnav{--prodnav-icon-bg:rgba(164,124,46,.12)}
.prodnav__icon{color:var(--gold-deep)}
.prodnav__chev{color:var(--gold-deep)}
.panel--ink .prodnav{--prodnav-icon-bg:rgba(201,162,75,.16)}
.panel--ink .prodnav__icon,.panel--ink .prodnav__chev{color:var(--gold)}

/* Tabbed carousel */
.tabcx{--tabcx-active-bg:var(--ink);--tabcx-active-fg:var(--paper);--card-k:var(--gold)}
.tabcx__card::after{background:linear-gradient(180deg,rgba(10,10,10,0) 26%,rgba(10,10,10,.55) 62%,rgba(10,10,10,.9) 100%)}

/* Feature-switch */
.fswitch{--fswitch-n-bg:rgba(164,124,46,.14);--fswitch-n-on:var(--paper)}
.panel--ink .fswitch{--fswitch-n-bg:rgba(201,162,75,.18);--fswitch-n-on:var(--ink)}
.panel--ink .fswitch__toggle{background:#141210}

/* =========================================================================
   Header — the pill's geometry lives in base.css (one spec, both platforms).
   This file sets its COLOUR only. Do not re-declare size, type or spacing here.
   ========================================================================= */
:root{
  --nav-pill-line:rgba(10,10,10,.07);
  --nav-pill-shadow:rgba(10,10,10,.45);
}
.site-header .nav-links a{color:var(--ink)}
.site-header .nav-links a:hover,.site-header .nav-links a[aria-current]{color:var(--ink)}
.site-header .nav-toggle{color:var(--ink)}

/* Mobile menu — N26-style: white, logo left / close right, big links, bottom CTAs */
body.menu-open{overflow:hidden}

/* Flashcard deck — alternating ink / gold-edged cream / yellow faces */
.deck__card--ink{background:var(--ink);color:var(--cream)}
.deck__card--ink .k{color:var(--gold)}
.deck__card--ink b{color:var(--gold)}
.deck__card--cream{background:#fff;border:1px solid var(--line)}
.deck__card--cream b,.deck__card--cream .k{color:var(--gold-deep)}
.deck__card--yellow{background:var(--yellow);color:var(--ink)}
.deck__card--gold{background:var(--gold-grad);color:var(--ink)}
.deck__card--gold .k{color:rgba(10,10,10,.66)}

/* Proof stats grid (promoted from inline styles — used on index/services/sector/impact) */
.stats-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:28px;margin-top:44px}
@media(max-width:760px){.stats-grid{grid-template-columns:repeat(2,1fr);gap:22px}}

/* Tabbed-carousel cards: no kicker labels; hint arrow in the top-right corner. */
.tabcx__card .k{display:none}
.tabcx__card>video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}
.tabcx__hint{bottom:auto;top:clamp(16px,2vw,22px)}

/* Bento grid — promoted from index.html (now used on services/sector/boards too) */
.bento{display:grid;grid-template-columns:repeat(6,1fr);gap:14px}
.bento__tile{grid-column:span 2;display:flex;flex-direction:column;justify-content:flex-end;min-height:150px;padding:22px;border-radius:var(--radius-lg);background:var(--cream);border:1px solid rgba(164,124,46,.16);transition:transform .2s var(--ease),box-shadow .2s var(--ease)}
.bento__tile:hover{transform:translateY(-3px);box-shadow:0 22px 44px -28px rgba(10,10,10,.4)}
.bento__tile b{font-family:var(--font-display);font-weight:700;font-size:1.05rem;letter-spacing:-.01em}
.bento__tile small{color:var(--muted);font-size:.85rem;margin-top:4px}
.bento__tile--lg{grid-column:span 3;min-height:320px;background-size:cover;background-position:center;position:relative;overflow:hidden;border:0;color:#fff}
.bento__tile--lg::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(10,10,10,0) 30%,rgba(10,10,10,.72) 100%);border-radius:inherit}
.bento__body{position:relative;z-index:1}
.bento__tile--lg b{font-size:var(--step-1)}
.bento__tile--lg small{color:rgba(255,255,255,.85);font-size:.95rem;display:block;max-width:38ch}
/* Small bento tiles that carry a photo — same photo treatment as --lg, smaller */
.bento__tile--img{background-size:cover;background-position:center;position:relative;overflow:hidden;border:0;color:#fff}
.bento__tile--img::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(10,10,10,0) 34%,rgba(10,10,10,.74) 100%);border-radius:inherit}
.bento__tile--img>b,.bento__tile--img>small{position:relative;z-index:1}
.bento__tile--img small{color:rgba(255,255,255,.85)}
.bento--four .bento__tile{grid-column:span 3;min-height:130px}
.bento--three .bento__tile{grid-column:span 2;min-height:130px}
@media(max-width:900px){.bento{grid-template-columns:1fr 1fr}.bento__tile,.bento--four .bento__tile,.bento--three .bento__tile{grid-column:span 1}.bento__tile--lg{grid-column:span 2;min-height:220px}}

/* Mobile bar behaviour (menu-open, scrolled state) is in base.css. */

/* ------------------------------------------------------------------- the bench
   One row that scrolls, at every width. Seven faces never divided neatly into a
   five-column grid, and a row you can push through reads as a bench rather than
   a wall. app.js wraps it and adds the arrows when the row actually overflows.
   Lives here once; it used to be copied into ten pages. */
.bench-rail { position: relative; }

.bench-grid {
  display: flex;
  gap: 18px;
  margin-top: 40px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  padding: 2px 0 14px;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.bench-grid::-webkit-scrollbar { display: none; }
.bench-grid > .member { flex: 0 0 calc((100% - 4*18px)/5); scroll-snap-align: start; }

.member .portrait {
  aspect-ratio: 3/4;
  border-radius: var(--radius);
  margin-bottom: 12px;
  background-color: var(--cream);
  background-position: center top;
  background-size: cover;
  background-repeat: no-repeat;
  background-blend-mode: multiply;
  border: 1px solid rgba(164, 124, 46, .2);
}
.member .portrait--flat { background-blend-mode: normal; }
.member b {
  display: block;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.02rem;
  letter-spacing: -.01em;
}
.member span { color: var(--muted); font-size: .82rem; }

/* Onder de rij, niet erover: pijlen op de kaarten kosten je een klik op een
   gezicht dat je niet bedoelde. Zelfde knop als de carrousels elders. */
.bench-nav {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 4px;
}
.bench-nav[hidden] { display: none; }   /* display:flex zou het hidden-attribuut anders winnen */
.bench-nav .carousel__btn:disabled { opacity: .3; pointer-events: none; }

@media (max-width: 1080px) { .bench-grid > .member { flex-basis: calc((100% - 3*18px)/4); } }
@media (max-width: 900px)  { .bench-grid > .member { flex-basis: calc((100% - 2*18px)/3); } }
@media (max-width: 760px) {
  .bench-grid {
    gap: 14px;
    margin-right: calc(-1*var(--gutter));
    padding-right: var(--gutter);
  }
  .bench-grid > .member { flex-basis: 46%; }
  .bench-nav { display: none; }
}
@media (prefers-reduced-motion: reduce) { .bench-grid { scroll-behavior: auto; } }

/* De profielpagina van één bench-lid.

   Stond tot nu toe in het <style>-blok van elke expertpagina, dus per persoon
   één keer. Dat werkt zolang de zeven pagina's uit de statische build komen,
   maar een bench-lid dat in WordPress wordt aangemaakt heeft dat blok niet en
   kreeg daardoor kale HTML: geen kaart, geen kolommen, geen portret.

   Alleen het portret is persoonsgebonden; dat blijft een inline
   background-image op het element zelf. De rest hoort hier, één keer. */
.profile-hero{display:grid;grid-template-columns:.72fr 1.28fr;gap:clamp(32px,5vw,72px);align-items:start}
@media(max-width:900px){.profile-hero{grid-template-columns:1fr}}
.p-side{position:sticky;top:110px}
@media(max-width:900px){.p-side{position:static}}
.p-card{background:#fff;border:1px solid var(--line);border-radius:var(--radius-xl);padding:22px}
.profile-portrait{aspect-ratio:3/4;border-radius:var(--radius-lg,14px);background-color:var(--cream);background-position:center top;background-size:cover;background-blend-mode:multiply;border:1px solid rgba(164,124,46,.2);margin-bottom:18px}
/* Uit voor uitgeknipte portretten: multiply op een witte achtergrond maakt van
   een gezicht een grijze vlek. Zelfde afweging als .member .portrait--flat. */
.profile-portrait--flat{background-blend-mode:normal}
.p-card h1{font-size:var(--step-2);letter-spacing:-.02em}
.profile-role{color:var(--gold-deep);font-weight:600;margin-top:4px}
.focus-row{display:flex;gap:8px;flex-wrap:wrap;margin-top:14px}
.p-note{color:var(--muted);font-size:.85rem;margin-top:14px}
.p-note a{color:var(--gold-deep);font-weight:600}
.p-body .h-sec{font-size:var(--step-2)}
.prose-block p{color:var(--muted);margin-top:14px;max-width:62ch;line-height:1.65}
.p-list{list-style:none;margin:0;padding:0}
.p-list li{padding:14px 0;border-bottom:1px solid var(--line);color:var(--muted);max-width:62ch}
.p-list b{color:var(--fg)}
/* Het quote-veld bestaat in WordPress maar kwam in de statische build nooit
   voor, dus er was ook nooit opmaak voor. Zonder deze regel valt een ingevuld
   citaat terug op de browserstandaard. */
.p-quote{font-family:var(--font-display);font-size:var(--step-1);line-height:1.4;letter-spacing:-.01em;max-width:44ch;margin:0}

/* =========================================================================
   Componenten die de pagina's tot nu toe zelf meedroegen.

   Elke gegenereerde pagina had deze regels in zijn eigen <style>-blok, en de
   import zette dat blok als `_amanah_css` op de post. Dat werkt voor de 22
   pagina's die uit de statische build komen en voor niets anders: een service,
   sector, insight of vacature die een redacteur in WordPress aanmaakt heeft
   geen blok, en rendert dus als kale HTML.

   De templates in wordpress/themes/amanah gebruikten 26 klassen die nergens
   in base.css of hier stonden. Dit is die 26. Wat écht per pagina verschilt
   staat nog steeds in het <style>-blok van die pagina.
   ========================================================================= */

/* Het statement-blok en het gele slotpaneel. Op elke bladpagina. */
.statement{max-width:20ch;font-size:var(--step-4);letter-spacing:-.04em;line-height:1.05}
.statement-grid{display:grid;grid-template-columns:1.3fr 1fr;gap:clamp(28px,5vw,72px);align-items:end}
@media(max-width:860px){.statement-grid{grid-template-columns:1fr;gap:28px}}
.statement-sub{color:var(--muted);max-width:44ch}
.statement-sub p+p{margin-top:14px}
/* base.css zet hier var(--accent); op Advisors was dat altijd al gold-deep,
   en de pagina-blokken schreven het letterlijk zo. */
.sec-head a.more{color:var(--gold-deep)}
.closing{text-align:center}
.closing h2{font-size:var(--step-4);max-width:18ch;margin:0 auto 28px}

/* Het genummerde procesdek. Op mobiel stapelen de kaarten plakkend over
   elkaar heen, vandaar de nth-child-posities. */
.pdeck{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.pdeck--three{grid-template-columns:repeat(3,1fr)}
a.pcard{display:block;transition:transform .2s var(--ease),border-color .2s}
a.pcard:hover{transform:translateY(-3px);border-color:var(--gold-deep)}
.pcard{position:relative;background:#fff;border:1px solid var(--line);border-radius:var(--radius-xl);padding:clamp(22px,2.6vw,32px);min-height:190px}
.pcard h3{font-size:var(--step-1);letter-spacing:-.02em;color:var(--gold-deep)}
.pcard p{color:var(--muted);margin-top:10px;font-size:var(--step--1);line-height:1.55}
@media(max-width:860px){
  .pdeck{display:grid;grid-template-columns:1fr;gap:clamp(18px,4vh,36px);padding:6px 0}
  .pcard{position:sticky;min-height:180px;box-shadow:0 -16px 36px -26px rgba(10,10,10,.35),0 22px 48px -28px rgba(10,10,10,.4)}
  .pcard:nth-child(1){top:96px;transform:rotate(-1deg)}
  .pcard:nth-child(2){top:112px;transform:rotate(.8deg)}
  .pcard:nth-child(3){top:128px;transform:rotate(-.6deg)}
  .pcard:nth-child(4){top:144px;transform:rotate(.9deg)}
}

/* De veelgestelde vragen, als <details> zodat het zonder JavaScript werkt. */
.faq{max-width:68ch}
.faq details{border-top:1px solid var(--line);padding:18px 0}
.faq details:last-child{border-bottom:1px solid var(--line)}
.faq summary{cursor:pointer;font-family:var(--font-display);font-weight:700;font-size:var(--step-0);letter-spacing:-.01em;list-style:none;display:flex;justify-content:space-between;gap:16px;align-items:baseline}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";color:var(--gold-deep);font-weight:700;flex:none}
.faq details[open] summary::after{content:"–"}
.faq p{color:var(--muted);margin-top:12px;line-height:1.65}

/* Insight-kaarten. Drie kolommen op service- en sectorpagina's, een
   veegbare rij op mobiel. De insightpagina zelf zet er twee kolommen
   overheen in zijn eigen blok. */
/* De filters op /insights. Stonden als los <style>-blok in insights.html, dus
   WordPress rendeerde dezelfde markup zonder enige opmaak: kale knoppen op een
   rij. Nu hier, zodat beide kanten hem hebben.

   Twee rijen losse pillen onder elkaar lazen als één hoop. Het label links
   maakt er twee dimensies van, en het tweede niveau is lichter zodat type de
   hoofdkeuze blijft en topic de verfijning. */
.filter-bar{display:grid;grid-template-columns:auto 1fr;gap:12px 18px;align-items:start;margin-bottom:clamp(28px,4vw,44px)}
.filter-bar__label{font-family:var(--font-wordmark);font-size:.68rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--gold-deep);white-space:nowrap;padding-top:.62em}
.filter-row{display:flex;gap:8px;flex-wrap:wrap;margin:0}
.filter-row .tag{cursor:pointer;border:1px solid transparent;font-family:inherit;-webkit-appearance:none;appearance:none;transition:background .15s var(--ease),color .15s var(--ease),border-color .15s var(--ease)}
.filter-row .tag:hover{background:rgba(0,0,0,.12)}
.filter-row .tag[aria-current]{background:var(--ink);color:var(--paper)}
.filter-row .tag:focus-visible{outline:2px solid var(--gold-deep);outline-offset:2px}
.filter-row--topic .tag{font-size:.78rem;padding:.32em .75em;background:transparent;border-color:rgba(0,0,0,.14);color:var(--muted)}
.filter-row--topic .tag:hover{background:rgba(0,0,0,.05);color:var(--ink)}
.filter-row--topic .tag[aria-current]{background:var(--gold-deep);border-color:var(--gold-deep);color:#fff}
@media(max-width:600px){
  .filter-bar{grid-template-columns:1fr;gap:6px}
  .filter-bar__label{padding-top:8px}
}

/* Expliciet uitgesloten in plaats van te leunen op de volgorde: .insights--row
   draagt beide klassen, en die hebben dezelfde specificiteit. */
.insights:not(.insights--row){display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
@media(max-width:920px){.insights:not(.insights--row){grid-template-columns:1fr}}
.insight .imgph{aspect-ratio:16/10;margin-bottom:16px}
.insight .k{font-size:.78rem;letter-spacing:.06em;text-transform:uppercase;color:var(--gold-deep);font-weight:600}
.insight h3{font-size:var(--step-1);margin:10px 0 8px}
.insight p{color:var(--muted);font-size:var(--step--1)}
/* De swipe-rij zat tot 2026-08-03 op .insights zelf, onder 760px. Dat klopte
   zolang elke rij zes kaarten had. Sinds /insights de volledige lijst draagt
   betekende het 55 keer swipen op een telefoon, dus de rij is nu een eigen
   variant: .insights is het raster op /insights, .insights--row is de rij van
   zes op de homepage, de sectorpagina's en onder een artikel. Die swipet op
   alle schermbreedtes.

   Twee klassen in de selector, niet één: 57 pagina's dragen een eigen
   `.insights{display:grid}` in een <style>-blok in de head, en dat blok staat
   na de link naar dit bestand. Bij gelijke specificiteit wint de laatste, dus
   met alleen `.insights--row` bleef de rij op desktop een raster. */
.insights.insights--row{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:16px;margin-right:calc(-1*var(--gutter));padding:2px var(--gutter) 12px 0;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.insights.insights--row::-webkit-scrollbar{display:none}
.insights.insights--row>.insight{flex:0 0 31%;scroll-snap-align:start}
@media(max-width:920px){
  .insights.insights--row>.insight{flex:0 0 46%}
}
@media(max-width:760px){
  .insights.insights--row>.insight{flex:0 0 80%}
}

/* Het insight-artikel: kop, byline, hero en de lopende tekst. */
.article-head{max-width:52ch}
.article-head .k{display:block;font-size:.78rem;letter-spacing:.06em;text-transform:uppercase;color:var(--gold-deep);font-weight:600;margin-bottom:16px}
.article-head h1{font-size:var(--step-4);letter-spacing:-.04em;line-height:1.06}
.byline{display:flex;align-items:center;gap:12px;margin-top:26px}
.byline__avatar{width:40px;height:40px;border-radius:50%;flex:none;background:var(--gold-grad);background-size:cover;background-position:center top}
.byline__meta{font-size:var(--step--1);color:var(--muted)}
.byline__meta b{color:var(--fg);font-weight:600}
.article-hero{aspect-ratio:16/9;margin-top:clamp(28px,4vw,44px);border-radius:var(--radius-xl)}
.prose{max-width:68ch;margin-inline:auto}
.prose h2{font-size:var(--step-2);letter-spacing:-.02em;margin-top:clamp(36px,5vw,56px);margin-bottom:14px}
.prose h2:first-child{margin-top:0}
.prose p{color:var(--muted);font-size:var(--step-0);line-height:1.65}
.prose p+p{margin-top:16px}
.prose blockquote{font-family:var(--font-display);font-weight:700;font-size:var(--step-1);letter-spacing:-.01em;line-height:1.4;color:var(--fg);margin:0}
.prose blockquote::before{content:"\201C"}
.prose blockquote::after{content:"\201D"}
.pull-quote{max-width:68ch;margin:clamp(36px,5vw,56px) auto}
.dl-row{max-width:68ch;margin:clamp(36px,5vw,56px) auto 0;display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;padding:22px 26px;border:1px solid var(--line);border-radius:var(--radius-xl)}
.dl-row span{font-weight:600}

/* De sectorhero met video, poster als terugval. */
.hero-rw{position:relative;isolation:isolate;color:#fff;display:flex;align-items:flex-end;min-height:clamp(520px,78vh,740px);margin:10px var(--gutter) 0;border-radius:var(--radius-xl);overflow:hidden}
.hero-rw__media{position:absolute;inset:0;z-index:0}
.hero-rw__media img,.hero-rw__media video{width:100%;height:100%;object-fit:cover;position:absolute;inset:0}
.hero-rw__media video~.hero-rw__fallback{display:none}
@media(prefers-reduced-motion:reduce){.hero-rw__media video{display:none}.hero-rw__media video~.hero-rw__fallback{display:block}}
.hero-rw__scrim{position:absolute;inset:0;background:linear-gradient(180deg,rgba(10,10,10,.06) 0%,rgba(10,10,10,.16) 40%,rgba(10,10,10,.72) 100%)}
.hero-rw__content{position:relative;z-index:2;width:100%;display:flex;justify-content:space-between;align-items:flex-end;gap:clamp(24px,5vw,72px);padding-block:clamp(28px,5vw,52px)}
.hero-rw__left h1{font-size:var(--step-5);letter-spacing:-.045em;line-height:1.02;margin-bottom:22px}
.hero-rw__btns{display:flex;gap:12px;flex-wrap:wrap}
.hero-rw__areas{display:flex;flex-direction:column;gap:0;min-width:min(300px,42%)}
.hero-rw__areas a{display:flex;align-items:center;justify-content:space-between;gap:12px;font-size:var(--step--1);font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:rgba(255,255,255,.64);border-top:1px solid rgba(255,255,255,.22);padding:13px 2px;transition:color .2s var(--ease)}
.hero-rw__areas a:hover{color:#fff}
.hero-rw__areas em{font-style:normal;opacity:0;transform:translateX(-6px);transition:.2s var(--ease)}
.hero-rw__areas a:hover em{opacity:1;transform:none}
@media(max-width:820px){
  .hero-rw{margin:8px 10px 0;min-height:clamp(500px,86vh,640px)}
  .hero-rw__content{flex-direction:column;align-items:flex-start;gap:24px}
  .hero-rw__areas{min-width:0;align-self:stretch}
}

/* "Wat er speelt in ..." op een sectorpagina. */
.issues{list-style:none;margin:0;padding:0;max-width:68ch}
.issues li{padding:18px 0;border-bottom:1px solid var(--line);color:var(--muted);line-height:1.6}
.issues li b{color:var(--fg);display:block;font-family:var(--font-display);font-weight:700;margin-bottom:4px}

/* De vacaturepagina.

   Dit ontwerp stond in build-extra.js klaar terwijl CAREERS daar leeg was, dus
   er is nooit één vacaturepagina mee gebouwd en de opmaak heeft nooit ergens
   gestaan. single-role.php rendert hem nu wel. */
.vac-head{max-width:56ch}
.vac-head h1{font-size:var(--step-4);letter-spacing:-.04em}
.vac-head .lead{color:var(--muted);margin-top:14px;font-size:var(--step-1);letter-spacing:-.01em}
.vac-meta{display:flex;gap:8px;flex-wrap:wrap;margin-top:20px}
.vac-grid{display:grid;grid-template-columns:1.25fr .75fr;gap:clamp(32px,5vw,72px);align-items:start;margin-top:clamp(32px,5vw,52px)}
@media(max-width:900px){.vac-grid{grid-template-columns:1fr}}
.vac-main h2{font-size:var(--step-2);letter-spacing:-.02em;margin:clamp(28px,4vw,40px) 0 14px}
.vac-main h2:first-child{margin-top:0}
.vac-main>p{color:var(--muted);max-width:60ch;line-height:1.65}
.vac-list{list-style:none;margin:0;padding:0;max-width:60ch}
.vac-list li{position:relative;padding:10px 0 10px 26px;color:var(--muted);border-bottom:1px solid var(--line)}
.vac-list li::before{content:"";position:absolute;left:0;top:18px;width:10px;height:10px;border-radius:50%;background:var(--gold-grad)}
.vac-list li b{color:var(--fg)}
.vac-side{position:sticky;top:110px;display:flex;flex-direction:column;gap:16px}
@media(max-width:900px){.vac-side{position:static}}
.vac-card{background:#fff;border:1px solid var(--line);border-radius:var(--radius-xl);padding:24px}
.vac-card h3{font-size:var(--step-0);margin-bottom:12px}
.vac-facts{list-style:none;margin:0;padding:0}
.vac-facts li{display:grid;grid-template-columns:110px 1fr;gap:10px;padding:8px 0;border-bottom:1px solid var(--line);font-size:.9rem}
.vac-facts .f{color:var(--muted)}
.vac-card .btn{width:100%;justify-content:center;margin-top:14px}
.vac-note{color:var(--muted);font-size:.82rem;margin-top:10px}
/* De gezichtenrij op de "wie je leert kennen"-kaart. Stond als inline style op
   drie vaste namen; het template haalt de bench nu uit de database. */
.vac-faces{display:flex;margin-bottom:8px}
.vac-faces span{width:44px;height:44px;border-radius:50%;background-color:var(--cream);background-position:center top;background-size:cover;background-blend-mode:multiply;border:2px solid #fff}
.vac-faces span+span{margin-left:-8px}

/* De lijst met open rollen op /careers. */
.roles{display:grid;gap:14px}
.roles-none{background:#fff;border:1px solid var(--line);border-radius:var(--radius-xl);padding:clamp(24px,3.5vw,40px);max-width:62ch}
.roles-none p+p{margin-top:12px;color:var(--muted)}
.roles-none a{color:var(--gold-deep);font-weight:600}
.role{display:flex;align-items:center;justify-content:space-between;gap:20px;background:#fff;border:1px solid var(--line);border-radius:var(--radius-xl);padding:clamp(22px,3vw,32px);transition:transform .18s var(--ease),border-color .18s}
.role:hover{transform:translateY(-2px);border-color:var(--gold-deep)}
.role h3{font-size:var(--step-1);letter-spacing:-.02em}
.role__meta{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}
.role__arw{font-size:1.4rem;color:var(--gold-deep);flex:none}