/* ============================================================
   MELROSE ACADEMY — Elevated Design Layer
   Built on the existing brand tokens (gold / cream / dark-brown,
   Outfit + DM Sans). New patterns: deeper ink foundation, the seal
   motif, editorial type, glass + hairline gold, motion.
   ============================================================ */

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

:root{
  /* brand tokens (kept) */
  --gold:#b59967; --gold-light:#c9a871; --gold-dark:#a38955;
  --dark:#2d1f15;
  --cream:#eae6e0; --cream-light:#f8f7f0; --cream-dark:#ede6da; --off-white:#faf9f5; --primary:#f8f7f0;
  --heading:#8b7d6f; --text:#5c4e42; --text-light:#786a5e; --text-muted:#9a8c7e;
  --success:#2d6a4f; --error:#c1292e; --warning:#e09f3e; --info:#457b9d;
  /* new layered tokens */
  --ink:#1b130c;            /* deep warm near-black for premium dark bands */
  --ink-2:#241910;
  --ink-card:#2a1e13;
  --gold-grad:linear-gradient(135deg,#d4b483 0%,#b59967 52%,#9c8050 100%);
  --line:rgba(45,31,21,.10);
  --line-soft:rgba(45,31,21,.06);
  --ease:cubic-bezier(0.16,1,0.3,1);
  /* signature accent — gold by default, switchable to neon via tweak */
  --neon:#2bb6e6;
  --sig:var(--gold);        /* warm direction */
  --sig-soft:rgba(181,153,103,.16);
  --sig-glow:rgba(181,153,103,.45);
}
:root[data-sig="neon"]{
  --sig:var(--neon);
  --sig-soft:rgba(43,182,230,.16);
  --sig-glow:rgba(43,182,230,.5);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility;scroll-behavior:smooth}
html,body{height:100%}
#app{height:100vh;overflow:hidden}
body{
  margin:0;font-family:'DM Sans',sans-serif;color:var(--text);
  background:var(--primary);font-size:16px;line-height:1.7;letter-spacing:0;overflow:hidden;height:100vh;
}
h1,h2,h3{font-family:'Outfit',sans-serif;color:var(--heading);line-height:1.12;letter-spacing:-.02em;margin:0}
h4,h5,h6{font-family:'DM Sans',sans-serif;color:var(--heading);font-weight:600;line-height:1.3;margin:0}
p{margin:0}
a{color:var(--gold);text-decoration:none;transition:color .3s var(--ease)}
img{display:block;max-width:100%}
button{font-family:inherit}
::selection{background:rgba(181,153,103,.22);color:var(--dark)}
::-webkit-scrollbar{width:9px;height:9px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:rgba(181,153,103,.3);border-radius:5px;border:2px solid var(--primary)}
::-webkit-scrollbar-thumb:hover{background:rgba(181,153,103,.5)}

/* ---------------- Layout helpers ---------------- */
.wrap{max-width:1240px;margin:0 auto;padding:0 28px}
.wrap-tight{max-width:1080px;margin:0 auto;padding:0 28px}
.tabnum{font-variant-numeric:tabular-nums}
.display{font-family:'Outfit',sans-serif;font-weight:800;letter-spacing:-.03em;line-height:1.0}
.dx{font-size:clamp(2.6rem,6vw,5.2rem)}
.dl{font-size:clamp(2.2rem,4.6vw,3.8rem);line-height:1.05}
.dm{font-size:clamp(1.8rem,3.2vw,2.7rem);line-height:1.1}
.ds{font-size:clamp(1.4rem,2.2vw,1.9rem);line-height:1.15;font-weight:700}

/* ---------------- Eyebrow ---------------- */
.eyebrow{display:inline-flex;align-items:center;gap:11px;font-family:'Outfit',sans-serif;
  font-weight:700;font-size:.72rem;text-transform:uppercase;letter-spacing:.22em;color:var(--gold)}
.eyebrow::before{content:"";width:26px;height:1.5px;background:linear-gradient(90deg,transparent,var(--sig))}
.eyebrow.center::after{content:"";width:26px;height:1.5px;background:linear-gradient(90deg,var(--sig),transparent)}
.eyebrow.center{justify-content:center}
.eyebrow.on-dark{color:var(--gold-light)}
.eyebrow.on-dark::before,.eyebrow.on-dark.center::after{background:linear-gradient(90deg,transparent,var(--sig))}
.dot{width:7px;height:7px;border-radius:50%;background:var(--sig);box-shadow:0 0 0 0 var(--sig-glow);animation:pulseSig 2.4s var(--ease) infinite}
@keyframes pulseSig{0%{box-shadow:0 0 0 0 var(--sig-glow)}70%{box-shadow:0 0 0 9px transparent}100%{box-shadow:0 0 0 0 transparent}}

/* ---------------- Buttons ---------------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;font-family:'DM Sans',sans-serif;
  font-weight:600;font-size:.92rem;border-radius:100px;padding:13px 26px;cursor:pointer;border:0;outline:none;
  transition:transform .4s var(--ease),box-shadow .4s var(--ease),background .3s var(--ease),color .3s var(--ease);
  position:relative;white-space:nowrap}
.btn svg{width:17px;height:17px}
.btn-primary{background:var(--gold-grad);color:#fff;box-shadow:0 6px 22px rgba(181,153,103,.32),inset 0 1px 0 rgba(255,255,255,.25)}
.btn-primary:hover{box-shadow:0 12px 34px rgba(181,153,103,.42),inset 0 1px 0 rgba(255,255,255,.3);transform:translateY(-2px)}
.btn-primary:active{transform:translateY(0)}
.btn-secondary{background:rgba(255,255,255,.7);color:var(--dark);border:1px solid var(--cream-dark);backdrop-filter:blur(10px);box-shadow:0 2px 8px rgba(181,153,103,.08)}
.btn-secondary:hover{border-color:var(--gold);transform:translateY(-2px);box-shadow:0 8px 24px rgba(181,153,103,.16)}
.btn-ghost{background:transparent;color:var(--text)}
.btn-ghost:hover{color:var(--gold);background:rgba(237,230,218,.6)}
.btn-dark{background:rgba(255,255,255,.08);color:#fff;border:1px solid rgba(255,255,255,.2);backdrop-filter:blur(6px)}
.btn-dark:hover{background:rgba(255,255,255,.16);transform:translateY(-2px)}
.btn-lg{padding:16px 34px;font-size:1rem}
.btn-sm{padding:9px 18px;font-size:.82rem}
.btn-xs{padding:6px 13px;font-size:.74rem}
.btn-block{width:100%}

/* ---------------- Cards ---------------- */
.card{background:var(--off-white);border:1px solid var(--cream-dark);border-radius:16px;
  transition:transform .45s var(--ease),box-shadow .45s var(--ease),border-color .45s var(--ease);position:relative}
.card-pad{padding:26px}
.lift{cursor:pointer}
.lift::before{content:"";position:absolute;inset:0 0 auto 0;height:2px;border-radius:16px 16px 0 0;
  background:var(--gold-grad);opacity:0;transform:scaleX(.4);transform-origin:left;transition:opacity .45s var(--ease),transform .45s var(--ease)}
.lift:hover{transform:translateY(-7px);box-shadow:0 28px 60px rgba(45,31,21,.13);border-color:rgba(181,153,103,.4)}
.lift:hover::before{opacity:1;transform:scaleX(1)}

/* ---------------- Badges ---------------- */
.badge{display:inline-flex;align-items:center;gap:5px;padding:5px 12px;border-radius:100px;font-size:.72rem;font-weight:600;letter-spacing:.01em}
.badge svg{width:12px;height:12px}
.badge-gold{background:rgba(181,153,103,.12);color:var(--gold-dark)}
.badge-success{background:rgba(45,106,79,.12);color:var(--success)}
.badge-error{background:rgba(193,41,46,.1);color:var(--error)}
.badge-info{background:rgba(69,123,157,.12);color:var(--info)}
.badge-warning{background:rgba(224,159,62,.14);color:#b87a1e}
.badge-outline{background:rgba(255,255,255,.85);color:var(--dark);border:1px solid var(--cream-dark);backdrop-filter:blur(6px)}
.badge-dark{background:rgba(255,255,255,.1);color:#f3ece1;border:1px solid rgba(255,255,255,.16)}

/* ---------------- Inputs ---------------- */
.input{width:100%;padding:13px 16px;background:#fff;border:1.5px solid rgba(237,230,218,.9);border-radius:12px;
  font-family:'DM Sans',sans-serif;font-size:.95rem;color:var(--dark);transition:border-color .3s var(--ease),box-shadow .3s var(--ease);outline:none}
.input::placeholder{color:var(--text-muted)}
.input:focus{border-color:var(--sig);box-shadow:0 0 0 4px var(--sig-soft)}
.field-icon{position:relative}
.field-icon svg{position:absolute;left:15px;top:50%;transform:translateY(-50%);width:18px;height:18px;color:var(--gold);opacity:.7}
.field-icon .input{padding-left:44px}

/* ---------------- Glass / chrome ---------------- */
.glass{background:rgba(250,249,245,.78);backdrop-filter:blur(20px) saturate(1.4);-webkit-backdrop-filter:blur(20px) saturate(1.4)}

/* ---------------- Seal motif ---------------- */
.seal-watermark{position:absolute;opacity:.05;filter:grayscale(1) brightness(1.6);pointer-events:none;mix-blend-mode:overlay}
.seal-watermark.light{opacity:.06;filter:grayscale(1);mix-blend-mode:multiply}

/* ---------------- Dividers ---------------- */
.rule-gold{height:1px;background:linear-gradient(90deg,transparent,rgba(181,153,103,.5),transparent)}

/* =================================================================
   APP SHELL
   ================================================================= */
.app{display:flex;height:100%}
.sidebar{width:264px;flex-shrink:0;background:linear-gradient(180deg,#fffefb,#f6f2ea);
  border-right:1px solid var(--cream-dark);position:sticky;top:0;height:100vh;display:flex;flex-direction:column;z-index:20}
.sidebar-head{padding:22px 22px 18px;border-bottom:1px solid var(--cream-dark)}
.sidebar-head img{height:46px;width:auto}
.env-tag{display:flex;align-items:center;gap:8px;margin-top:12px}
.env-tag span{font-family:'Outfit',sans-serif;font-weight:700;font-size:.62rem;text-transform:uppercase;letter-spacing:.2em;color:var(--gold)}
.nav-list{flex:1;padding:16px 14px;overflow-y:auto;display:flex;flex-direction:column;gap:3px}
.nav-section{padding:16px 12px 6px;font-family:'Outfit',sans-serif;font-weight:700;font-size:.62rem;text-transform:uppercase;letter-spacing:.2em;color:var(--text-muted)}
.nav-link{display:flex;align-items:center;gap:12px;padding:10px 14px;border-radius:12px;font-size:.9rem;font-weight:500;
  color:var(--text-light);cursor:pointer;transition:all .3s var(--ease);position:relative}
.nav-link svg{width:19px;height:19px;flex-shrink:0;color:var(--text-muted);transition:color .3s var(--ease)}
.nav-link:hover{background:rgba(237,230,218,.65);color:var(--dark)}
.nav-link:hover svg{color:var(--gold)}
.nav-link.active{background:linear-gradient(90deg,rgba(181,153,103,.16),rgba(181,153,103,.04));color:var(--gold-dark);font-weight:600}
.nav-link.active svg{color:var(--gold)}
.nav-link.active::before{content:"";position:absolute;left:-14px;top:50%;transform:translateY(-50%);width:3px;height:22px;background:var(--gold-grad);border-radius:0 3px 3px 0}
.sidebar-foot{padding:14px;border-top:1px solid var(--cream-dark)}
.user-chip{display:flex;align-items:center;gap:11px}
.user-ava{width:38px;height:38px;border-radius:50%;background:linear-gradient(135deg,#a3855a,#755d36);color:#fff;display:flex;align-items:center;justify-content:center;font-family:'Outfit',sans-serif;font-weight:700;font-size:.82rem;flex-shrink:0}

.main{flex:1;display:flex;flex-direction:column;min-width:0}
.topbar{height:64px;flex-shrink:0;display:flex;align-items:center;justify-content:space-between;padding:0 28px;
  border-bottom:1px solid var(--cream-dark);position:sticky;top:0;z-index:18}
.topbar .tb-title{font-family:'Outfit',sans-serif;font-weight:700;font-size:1.05rem;color:var(--heading)}
.tb-actions{display:flex;align-items:center;gap:8px}
.icon-btn{width:40px;height:40px;border-radius:11px;display:inline-flex;align-items:center;justify-content:center;
  background:transparent;border:0;color:var(--text-muted);cursor:pointer;transition:all .3s var(--ease);position:relative}
.icon-btn svg{width:19px;height:19px}
.icon-btn:hover{background:rgba(237,230,218,.7);color:var(--gold)}
.dotbadge{position:absolute;top:6px;right:7px;min-width:16px;height:16px;padding:0 4px;border-radius:8px;background:var(--error);
  color:#fff;font-size:.6rem;font-weight:700;display:flex;align-items:center;justify-content:center}
.screen{height:100%;overflow-y:auto;-webkit-overflow-scrolling:touch}
.main>.screen{height:auto;flex:1;min-height:0}

/* =================================================================
   DARK BAND
   ================================================================= */
.band-dark{background:
   radial-gradient(120% 90% at 80% -10%,rgba(181,153,103,.22),transparent 55%),
   linear-gradient(165deg,var(--ink-2),var(--ink) 65%);color:#ece4d8;position:relative;overflow:hidden}
.band-dark h1,.band-dark h2,.band-dark h3{color:#fff}
.grain{position:absolute;inset:0;pointer-events:none;opacity:.5;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E")}

/* =================================================================
   MOTION
   ================================================================= */
@media (prefers-reduced-motion:no-preference){
  .reveal.in{animation:revIn .55s var(--ease)}
  [data-stagger] .reveal.in{animation:revIn .55s var(--ease) backwards;animation-delay:calc(var(--i,0)*55ms)}
}
@keyframes revIn{from{transform:translateY(16px)}to{transform:none}}
.reveal,.reveal.in{opacity:1;transform:none}

/* progress ring */
.ring{transform:rotate(-90deg)}
.ring-track{stroke:var(--cream-dark)}
.ring-fill{stroke:var(--gold);stroke-linecap:round;transition:stroke-dashoffset 1.1s var(--ease)}

/* progress bar */
.pbar{height:7px;border-radius:100px;background:var(--cream-dark);overflow:hidden}
.pbar>span{display:block;height:100%;border-radius:100px;background:var(--gold-grad);width:0;transition:width 1.1s var(--ease)}

/* skeleton */
.skeleton{border-radius:12px;background:linear-gradient(90deg,var(--cream) 25%,var(--cream-dark) 50%,var(--cream) 75%);
  background-size:200% 100%;animation:shimmer 1.8s linear infinite}
@keyframes shimmer{0%{background-position:200% 0}100%{background-position:-200% 0}}

/* =================================================================
   TWEAKS PANEL
   ================================================================= */
.tweaks{position:fixed;right:18px;bottom:18px;z-index:120;width:286px;background:rgba(255,255,255,.92);
  backdrop-filter:blur(18px);border:1px solid var(--cream-dark);border-radius:18px;
  box-shadow:0 24px 60px rgba(45,31,21,.22);overflow:hidden;font-size:.85rem;transition:opacity .3s,transform .3s}
.tweaks.hide{opacity:0;transform:translateY(12px) scale(.98);pointer-events:none}
.tweaks-head{display:flex;align-items:center;justify-content:space-between;padding:13px 16px;border-bottom:1px solid var(--cream-dark);background:linear-gradient(180deg,#fffdf9,#f7f2ea)}
.tweaks-head b{font-family:'Outfit',sans-serif;font-size:.78rem;letter-spacing:.16em;text-transform:uppercase;color:var(--gold-dark)}
.tweaks-body{padding:14px 16px;display:flex;flex-direction:column;gap:16px}
.tw-row label{display:block;font-weight:600;color:var(--text-light);margin-bottom:7px;font-size:.78rem}
.seg{display:flex;background:var(--cream);border-radius:10px;padding:3px;gap:3px}
.seg button{flex:1;border:0;background:transparent;padding:7px 6px;border-radius:8px;font-size:.76rem;font-weight:600;color:var(--text-light);cursor:pointer;transition:all .25s var(--ease)}
.seg button.on{background:#fff;color:var(--gold-dark);box-shadow:0 2px 8px rgba(45,31,21,.1)}
.swatches{display:flex;gap:8px}
.swatch{width:34px;height:34px;border-radius:9px;border:2px solid transparent;cursor:pointer;transition:transform .2s}
.swatch:hover{transform:scale(1.08)}
.swatch.on{border-color:var(--dark)}
.tw-toggle{display:flex;align-items:center;justify-content:space-between;cursor:pointer}
.tg{width:42px;height:24px;border-radius:100px;background:var(--cream-dark);position:relative;transition:background .3s}
.tg::after{content:"";position:absolute;top:3px;left:3px;width:18px;height:18px;border-radius:50%;background:#fff;box-shadow:0 1px 4px rgba(0,0,0,.2);transition:transform .3s var(--ease)}
.tg.on{background:var(--gold)}
.tg.on::after{transform:translateX(18px)}
.fab{position:fixed;right:18px;bottom:18px;z-index:119;width:50px;height:50px;border-radius:50%;border:0;cursor:pointer;
  background:var(--gold-grad);color:#fff;box-shadow:0 10px 28px rgba(181,153,103,.4);display:flex;align-items:center;justify-content:center;transition:transform .3s var(--ease)}
.fab:hover{transform:scale(1.07) rotate(8deg)}
.fab svg{width:22px;height:22px}

/* =================================================================
   MISC ATOMS
   ================================================================= */
.avatar{border-radius:50%;object-fit:cover;background:linear-gradient(135deg,#a3855a,#755d36);color:#fff;display:flex;align-items:center;justify-content:center;font-family:'Outfit',sans-serif;font-weight:700;flex-shrink:0}
.stars{display:inline-flex;gap:1px;color:var(--gold)}
.stars svg{width:15px;height:15px}
.chip{display:inline-flex;align-items:center;gap:6px;padding:7px 14px;border-radius:100px;background:#fff;border:1px solid var(--cream-dark);font-size:.82rem;font-weight:500;color:var(--text);cursor:pointer;transition:all .3s var(--ease)}
.chip svg{width:15px;height:15px}
.chip.on,.chip:hover{border-color:var(--gold);color:var(--gold-dark);background:rgba(181,153,103,.07)}
.meta{display:inline-flex;align-items:center;gap:6px;color:var(--text-muted);font-size:.82rem}
.meta svg{width:15px;height:15px;color:var(--gold)}
.kicker{font-family:'Outfit',sans-serif;font-weight:700;color:var(--gold)}
.hr{height:1px;background:var(--cream-dark);border:0;margin:0}

@media(max-width:980px){
  .sidebar{display:none}
  .wrap,.wrap-tight{padding:0 20px}
}
/* ============================================================
   MELROSE MARKETINGSITE — v2 site styles (op styles.css atoms)
   ============================================================ */
h1,h2,h3,.display,.dx,.dl,.dm,.ds{font-family:var(--display-font,'Outfit'),sans-serif}
body.no-motion *{animation:none!important;transition:none!important}

/* scroll container */
.screen{height:100%;overflow-y:auto}
.site{min-height:100%;display:flex;flex-direction:column}
.page{flex:1}
.sec{padding:88px 0}
.sec-cream{background:var(--cream-light);border-top:1px solid var(--cream-dark);border-bottom:1px solid var(--cream-dark)}
.sec-head{max-width:680px}
.sec-head.center{margin:0 auto 52px;text-align:center}
.lead{color:var(--text-muted);font-size:1.08rem;line-height:1.7;text-wrap:pretty}
.grad-word{background:var(--gold-grad);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent}
.eyebrow.lg{font-size:.8rem}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.grid-2{display:grid;grid-template-columns:repeat(2,1fr);gap:24px}
.grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
@media(max-width:1000px){.grid-3,.grid-4{grid-template-columns:repeat(2,1fr)}}
@media(max-width:640px){.grid-3,.grid-2,.grid-4{grid-template-columns:1fr}}

/* ============================================================ TOPNAV */
.topnav{position:sticky;top:0;z-index:60;border-bottom:1px solid transparent;transition:background .4s var(--ease),box-shadow .4s var(--ease),border-color .4s var(--ease)}
.topnav.solid{background:rgba(250,249,245,.88);backdrop-filter:blur(18px) saturate(1.3);border-bottom-color:var(--cream-dark);box-shadow:0 6px 30px rgba(45,31,21,.07)}
.topnav.on-hero:not(.solid) .nav-a{color:var(--dark)}
.nav-in{height:76px;display:flex;align-items:center;justify-content:space-between;gap:20px}
.brand{display:flex;align-items:center;gap:12px;cursor:pointer}
.brand{gap:11px}
.brand img{height:52px;width:auto}
.brand-word{font-family:'Outfit',sans-serif;font-weight:600;font-size:1.06rem;color:var(--heading);line-height:1;letter-spacing:.01em}
.brand-word b{font-weight:700;color:var(--gold-dark)}
.nav-links{display:flex;align-items:center;gap:4px}
.nav-item{position:relative}
.nav-a{display:inline-flex;align-items:center;gap:5px;padding:9px 14px;border-radius:10px;font-size:.92rem;font-weight:500;color:var(--text-light);cursor:pointer;transition:color .25s var(--ease),background .25s var(--ease)}
.nav-a svg{width:15px;height:15px;transition:transform .3s var(--ease)}
.nav-a:hover{color:var(--dark);background:rgba(237,230,218,.6)}
.nav-item:hover .nav-a svg{transform:rotate(180deg)}
.dropdown{position:absolute;top:calc(100% + 8px);left:0;min-width:268px;background:rgba(255,255,255,.97);backdrop-filter:blur(16px);border:1px solid var(--cream-dark);border-radius:16px;box-shadow:0 24px 50px rgba(45,31,21,.16);padding:8px;opacity:0;visibility:hidden;transform:translateY(8px);transition:all .28s var(--ease)}
.nav-item:hover .dropdown{opacity:1;visibility:visible;transform:translateY(0)}
.dd-link{display:flex;align-items:center;gap:11px;padding:10px 12px;border-radius:10px;font-size:.9rem;color:var(--text);cursor:pointer;transition:background .2s}
.dd-link:hover{background:var(--cream-light);color:var(--gold-dark)}
.dd-link svg{width:17px;height:17px;color:var(--gold);flex-shrink:0}
.dd-ic{width:32px;height:32px;border-radius:9px;background:rgba(181,153,103,.1);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.dd-ic svg{width:16px;height:16px}
.nav-right{display:flex;align-items:center;gap:12px}
.lang{display:flex;align-items:center;gap:2px;font-family:'Outfit',sans-serif;font-size:.78rem;font-weight:700}
.lang button{border:0;background:none;padding:4px 7px;border-radius:7px;color:var(--text-muted);cursor:pointer;transition:all .2s}
.lang button.on{background:var(--cream-dark);color:var(--gold-dark)}
.nav-burger{display:none;width:42px;height:42px;border-radius:11px;border:0;background:transparent;color:var(--dark);cursor:pointer;align-items:center;justify-content:center}
.nav-burger svg{width:22px;height:22px}
@media(max-width:1040px){.nav-links,.nav-right .lang{display:none}.nav-burger{display:inline-flex}}
/* telefoon: Academy-CTA zit in het burger-menu -> verberg 'm in de topnav zodat hij de wordmark niet overlapt */
@media(max-width:600px){.nav-right .btn-primary{display:none}.brand img{height:44px}.brand-word{font-size:1rem}}

/* mobile sheet */
.msheet{position:fixed;inset:0;z-index:80;background:rgba(27,19,12,.4);backdrop-filter:blur(4px);opacity:0;visibility:hidden;transition:opacity .3s}
.msheet.open{opacity:1;visibility:visible}
.msheet-in{position:absolute;top:0;right:0;bottom:0;width:300px;max-width:84vw;background:var(--off-white);box-shadow:-10px 0 40px rgba(45,31,21,.2);transform:translateX(100%);transition:transform .35s var(--ease);overflow-y:auto;padding:20px}
.msheet.open .msheet-in{transform:none}
.msheet a{display:block;padding:12px 10px;color:var(--text);font-weight:500;border-bottom:1px solid var(--cream-dark);cursor:pointer}
.msheet .m-h{font-family:'Outfit';font-weight:700;font-size:.72rem;text-transform:uppercase;letter-spacing:.18em;color:var(--gold);padding:16px 10px 4px}

/* ============================================================ HERO */
.hero{position:relative;min-height:92vh;display:flex;align-items:center;padding:120px 0 64px;overflow:hidden;background:var(--cream-light)}
.hero-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center right}
.hero-veil{position:absolute;inset:0;background:
  linear-gradient(101deg,rgba(250,249,245,.82) 0%,rgba(250,249,245,.64) 30%,rgba(248,247,240,.3) 56%,rgba(248,247,240,.07) 84%,transparent 100%),
  linear-gradient(0deg,rgba(248,247,240,.35),transparent 26%)}
.hero-in{position:relative;max-width:1240px;margin:0 auto;padding:0 28px;width:100%}
.hero-copy{max-width:640px;min-width:0}
.hero h1{margin:18px 0 0;color:#5c4e42}
@media(max-width:780px){
  /* foto + neon-seal BOVENIN helder zichtbaar, tekst op effen cream ERONDER (leesbaar) */
  .hero{min-height:94vh;padding:88px 0 44px;align-items:flex-end}
  .hero-img{object-position:64% 50%;transform:translateY(-11%)}
  .hero-veil{background:linear-gradient(180deg,transparent 0%,rgba(248,247,240,0) 36%,rgba(248,247,240,.5) 52%,var(--cream-light) 68%,var(--cream-light) 100%)}
  .hero .eyebrow .eb-text{display:none}
}
.hero h1 em{font-style:normal;background:var(--gold-grad);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent}
.hero-sub{color:var(--text);font-weight:500;font-size:1.16rem;line-height:1.6;max-width:50ch;margin:22px 0 32px;min-height:3.2em}
.hero-actions{display:flex;flex-wrap:wrap;gap:14px}
.hero-dots{display:flex;gap:8px;margin-top:44px}
.hero-dots button{width:30px;height:4px;border-radius:4px;border:0;background:var(--cream-dark);cursor:pointer;transition:background .3s,width .3s}
.hero-dots button.on{background:var(--gold);width:46px}
.hero-fade-en{animation:heroIn .5s var(--ease)}
@keyframes heroIn{from{transform:translateY(8px)}to{transform:none}}

/* ============================================================ MARQUEE */
.marquee{background:var(--off-white);border-top:1px solid var(--cream-dark);border-bottom:1px solid var(--cream-dark);overflow:hidden;padding:14px 0;position:relative}
.marquee-row{display:flex;gap:0;width:max-content;animation:marq 32s linear infinite}
.marquee-item{display:inline-flex;align-items:center;gap:32px;padding-right:32px;color:var(--gold-dark);font-family:'Outfit',sans-serif;font-weight:600;font-size:.9rem;letter-spacing:.06em;white-space:nowrap}
.marquee-item::after{content:"";width:6px;height:6px;border-radius:50%;background:var(--sig)}
@keyframes marq{to{transform:translateX(-50%)}}
.marquee:hover .marquee-row{animation-play-state:paused}

/* ============================================================ DIENSTEN (icon grid) */
.svc-card{padding:30px;display:block;cursor:pointer}
.svc-ic{width:54px;height:54px;border-radius:15px;background:rgba(181,153,103,.1);color:var(--gold);display:flex;align-items:center;justify-content:center;margin-bottom:20px;transition:all .4s var(--ease)}
.svc-ic svg{width:26px;height:26px}
.svc-card:hover .svc-ic{background:var(--gold-grad);color:#fff}
.svc-card h3{font-size:1.18rem;margin-bottom:9px}
.svc-card p{color:var(--text-muted);font-size:.92rem;line-height:1.6;margin-bottom:16px}
.svc-link{display:inline-flex;align-items:center;gap:7px;color:var(--gold-dark);font-weight:600;font-size:.88rem}
.svc-link svg{width:15px;height:15px;transition:transform .3s var(--ease)}
.svc-card:hover .svc-link svg{transform:translateX(4px)}

/* ============================================================ ABOUT split */
.split{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center}
.split.rev .split-media{order:-1}
@media(max-width:900px){.split{grid-template-columns:1fr;gap:36px}.split.rev .split-media{order:0}}
.about-stats{display:flex;gap:16px;margin:26px 0}
.stat-box{flex:1;background:var(--off-white);border:1px solid var(--cream-dark);border-radius:16px;padding:20px 22px}
.stat-box b{display:block;font-family:'Outfit',sans-serif;font-weight:800;font-size:2.4rem;color:var(--heading);line-height:1}
.stat-box span{color:var(--text-muted);font-size:.86rem}
.feat-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:8px}
@media(max-width:560px){.feat-grid{grid-template-columns:1fr}.about-stats{flex-direction:column}}
.feat{display:flex;gap:13px;align-items:flex-start}
.feat-ic{width:42px;height:42px;border-radius:12px;background:rgba(181,153,103,.1);color:var(--gold);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.feat-ic svg{width:20px;height:20px}
.feat b{display:block;color:var(--heading);font-family:'Outfit',sans-serif;font-size:.98rem;margin-bottom:2px}
.feat span{color:var(--text-muted);font-size:.86rem;line-height:1.45}
.media-frame{border-radius:20px;overflow:hidden;border:1px solid var(--cream-dark);box-shadow:0 30px 64px rgba(45,31,21,.16);position:relative;background:linear-gradient(150deg,#f1e8d8,#e7d9c2);aspect-ratio:4/3}
.media-frame img{width:100%;height:100%;object-fit:cover}
.media-ph{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;color:var(--gold)}
.media-ph svg{width:54px;height:54px;opacity:.5}
.media-ph span{font-family:'DM Mono',monospace;font-size:.72rem;color:var(--text-muted);letter-spacing:.04em;text-transform:uppercase}
.media-pattern{position:absolute;inset:0;opacity:.6;background-image:repeating-linear-gradient(135deg,rgba(181,153,103,.14) 0 1px,transparent 1px 14px)}

/* checklist (inhouse) */
.checklist{display:grid;grid-template-columns:1fr 1fr;gap:12px 20px;margin:8px 0 26px}
@media(max-width:560px){.checklist{grid-template-columns:1fr}}
.checklist li{display:flex;align-items:center;gap:10px;color:var(--text);font-size:.92rem;list-style:none}
.checklist li svg{width:18px;height:18px;color:var(--success);flex-shrink:0}
.checklist{padding:0;margin-left:0}

/* ============================================================ COURSE CARD (icon-based) */
.crow-head{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;flex-wrap:wrap;margin-bottom:38px}
.cc{display:block;overflow:hidden;text-decoration:none;cursor:pointer}
.cc-media{position:relative;height:150px;overflow:hidden;background:linear-gradient(150deg,#f1e8d8,#e7d9c2)}
.cc-pattern{position:absolute;inset:0;opacity:.7;background-image:repeating-linear-gradient(135deg,rgba(181,153,103,.16) 0 1px,transparent 1px 13px);-webkit-mask:radial-gradient(120% 100% at 80% 0,#000,transparent 75%);mask:radial-gradient(120% 100% at 80% 0,#000,transparent 75%)}
.cc-glyph{position:absolute;right:-8px;bottom:-20px;color:var(--acc,var(--gold));opacity:.5}
.cc-glyph svg{width:112px;height:112px;stroke-width:1.1;filter:drop-shadow(0 6px 16px rgba(181,153,103,.25))}
.cc-cat{position:absolute;top:14px;left:14px}
.cc-online{position:absolute;top:14px;right:14px;display:inline-flex;align-items:center;gap:4px;background:var(--sig);color:#06222e;font-size:.66rem;font-weight:700;padding:4px 9px;border-radius:100px}
.cc-online svg{width:11px;height:11px}
.cc-body{padding:22px}
.cc-title{font-family:'Outfit',sans-serif;font-weight:700;font-size:1.1rem;color:var(--heading);line-height:1.25;margin-bottom:8px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;transition:color .3s var(--ease)}
.cc:hover .cc-title{color:var(--gold-dark)}
.cc-intro{font-size:.88rem;color:var(--text-muted);line-height:1.55;margin-bottom:16px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:2.7em}
.cc-pricerow{display:flex;align-items:flex-end;justify-content:space-between;gap:10px;margin-bottom:15px}
.cc-price{font-family:'Outfit',sans-serif;font-weight:800;font-size:1.25rem;color:var(--heading);line-height:1}
.cc-unit{font-size:.72rem;color:var(--gold);font-weight:600;margin-left:2px}
.cc-vat{display:block;font-size:.64rem;text-transform:uppercase;letter-spacing:.05em;color:var(--text-muted);margin-top:3px}
.cc-foot{display:flex;align-items:center;justify-content:space-between;padding-top:14px;border-top:1px solid var(--cream-dark)}
.av-stack{display:flex;padding-left:8px}
.av-stack .avatar{width:28px;height:28px;font-size:10px;border:2px solid var(--off-white);margin-left:-8px}

/* ============================================================ TESTIMONIALS */
.tst{padding:28px}
.tst .stars{margin-bottom:14px}
.tst p{color:var(--text);font-style:italic;line-height:1.6;margin-bottom:18px;text-wrap:pretty}
.tst-by{display:flex;align-items:center;gap:12px}
.tst-by .avatar{width:42px;height:42px;font-size:13px;display:flex;align-items:center;justify-content:center;color:#fff}
.tst-by b{display:block;font-size:.92rem;color:var(--heading);line-height:1.3}
.tst-by span{display:block;font-size:.8rem;color:var(--text-muted);line-height:1.3}

/* ============================================================ CTA band */
.cta{position:relative;overflow:hidden;background:linear-gradient(180deg,var(--cream-light),var(--cream));padding:104px 0;text-align:center}
.cta-glow{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:780px;height:780px;border-radius:50%;background:radial-gradient(circle,rgba(181,153,103,.2),transparent 66%);pointer-events:none}
.cta-bgtext{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);font-family:'Outfit',sans-serif;font-weight:800;font-size:clamp(5rem,18vw,15rem);color:rgba(181,153,103,.06);letter-spacing:.05em;white-space:nowrap;pointer-events:none;user-select:none}
.cta-in{position:relative;z-index:1}
.cta-in .hero-actions{justify-content:center}

/* ============================================================ FOOTER */
.foot{background:var(--cream-light);border-top:1px solid var(--cream-dark);padding:62px 0 26px;color:var(--text-light)}
.foot-in{display:grid;grid-template-columns:2fr 1fr 1fr 1fr 1fr;gap:36px;padding-bottom:38px;border-bottom:1px solid var(--cream-dark)}
.foot-brand img{height:52px;margin-bottom:16px}
.foot-brand p{font-size:.9rem;max-width:30ch;line-height:1.6}
.foot-parent{margin-top:14px;font-family:'Outfit',sans-serif;font-weight:700;font-size:.74rem;letter-spacing:.04em;color:var(--gold-dark)}
.foot-parent a{color:inherit;text-decoration:none;border-bottom:1px solid transparent;transition:border-color .2s}
.foot-parent a:hover{border-bottom-color:var(--gold)}
.foot-col h5{color:var(--heading);font-family:'Outfit',sans-serif;font-size:.8rem;text-transform:uppercase;letter-spacing:.12em;margin-bottom:15px}
.foot-col a,.foot-col span{display:block;color:var(--text-light);font-size:.9rem;margin-bottom:9px;cursor:pointer}
.foot-col a:hover{color:var(--gold-dark)}
.foot-bottom{display:flex;justify-content:space-between;align-items:center;padding-top:22px;font-size:.82rem;color:var(--text-muted);flex-wrap:wrap;gap:10px}
.foot-social{display:flex;gap:10px}
.foot-social a{width:34px;height:34px;border-radius:10px;border:1px solid var(--cream-dark);display:flex;align-items:center;justify-content:center;color:var(--text-muted)}
.foot-social a:hover{border-color:var(--gold);color:var(--gold-dark)}
.foot-social svg{width:16px;height:16px}
@media(max-width:900px){.foot-in{grid-template-columns:1fr 1fr;gap:28px}}

/* ============================================================ PAGE HERO (sub-pages) */
.phero{position:relative;overflow:hidden;background:linear-gradient(160deg,var(--cream-light),#fff 62%);padding:128px 0 64px;border-bottom:1px solid var(--cream-dark)}
.phero-glow{position:absolute;top:-180px;right:-120px;width:620px;height:620px;border-radius:50%;background:radial-gradient(circle,rgba(181,153,103,.18),transparent 68%);pointer-events:none}
.phero-in{position:relative;max-width:780px}
.phero h1{margin:16px 0 14px}
.phero .lead{font-size:1.16rem}
.phero.center .phero-in{margin:0 auto;text-align:center}
.phero.center .eyebrow{justify-content:center}
/* decoratief brand-embleem: gradient-glow + gradient-ringen + gloeiende kern + accent-dots (CSP-veilig self-hosted SVG) */
.phero-glow{z-index:0;opacity:.85}
.phero-in{z-index:2}
.phero::after{content:"";position:absolute;top:-70px;right:-90px;width:660px;height:660px;background:url("../images/phero-motif.svg") no-repeat right top;background-size:contain;pointer-events:none;z-index:1}
@media(prefers-reduced-motion:no-preference){.phero::after{animation:pheroFloat 26s ease-in-out infinite}}
@keyframes pheroFloat{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(16px) rotate(4deg)}}
@media(max-width:880px){.phero::after{width:380px;height:380px;top:-40px;right:-70px}}
@media(max-width:560px){.phero::after{width:300px;height:300px;opacity:.7}}

/* generic prose */
.prose{color:var(--text);line-height:1.8;max-width:64ch}
.prose+.prose{margin-top:16px}

/* ============================================================ DIENST page */
.svc-detail{display:flex;flex-direction:column;gap:16px}
.svc-detail-card{padding:30px}
.svc-detail-card .svc-ic{margin-bottom:16px}
.svc-detail-card h3{font-size:1.2rem;margin-bottom:6px}
.svc-detail-card .lead{color:var(--text-light);font-size:.96rem;margin-bottom:16px}
.tick{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:10px}
.tick li{display:flex;gap:10px;align-items:flex-start;font-size:.9rem;color:var(--text)}
.tick li svg{width:17px;height:17px;color:var(--gold);flex-shrink:0;margin-top:3px}
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;counter-reset:s}
@media(max-width:820px){.steps{grid-template-columns:1fr 1fr}}
.step{position:relative;padding:26px 22px;background:var(--off-white);border:1px solid var(--cream-dark);border-radius:16px}
.step-ic{width:46px;height:46px;border-radius:13px;background:var(--gold-grad);color:#fff;display:flex;align-items:center;justify-content:center;margin-bottom:14px}
.step-ic svg{width:21px;height:21px}
.step-n{position:absolute;top:18px;right:20px;font-family:'Outfit',sans-serif;font-weight:800;font-size:1.4rem;color:var(--cream-dark)}
.step h4{color:var(--heading);font-family:'Outfit',sans-serif;font-size:1rem;margin-bottom:5px}
.step p{color:var(--text-muted);font-size:.85rem;line-height:1.5}
.chips-wrap{display:flex;flex-wrap:wrap;gap:10px}
.chip-static{display:inline-flex;align-items:center;gap:8px;padding:10px 16px;border-radius:100px;background:var(--off-white);border:1px solid var(--cream-dark);font-size:.88rem;color:var(--text)}
.chip-static svg{width:15px;height:15px;color:var(--gold)}

/* FAQ accordion */
.faq{display:flex;flex-direction:column;gap:10px;max-width:820px;margin:0 auto}
.faq-item{border:1px solid var(--cream-dark);border-radius:14px;background:var(--off-white);overflow:hidden}
.faq-q{width:100%;display:flex;align-items:center;justify-content:space-between;gap:14px;padding:20px 22px;background:none;border:0;cursor:pointer;text-align:left;font-family:'Outfit',sans-serif;font-weight:700;color:var(--heading);font-size:1rem}
.faq-q svg{width:18px;height:18px;color:var(--gold);flex-shrink:0;transition:transform .35s var(--ease)}
.faq-item.open .faq-q svg{transform:rotate(45deg)}
.faq-a{max-height:0;overflow:hidden;transition:max-height .4s var(--ease)}
.faq-item.open .faq-a{max-height:200px}
.faq-a p{padding:0 22px 20px;color:var(--text-light);line-height:1.7}

/* ============================================================ TRAININGEN */
.domains{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
@media(max-width:900px){.domains{grid-template-columns:1fr 1fr}}
@media(max-width:520px){.domains{grid-template-columns:1fr}}
.domain{padding:26px;text-align:left}
.domain .svc-ic{margin-bottom:16px}
.domain h3{font-size:1.05rem;margin-bottom:7px}
.domain p{color:var(--text-muted);font-size:.86rem;line-height:1.5}
.cat-tools{display:flex;align-items:center;gap:18px;flex-wrap:wrap;margin-bottom:24px}
.cat-search{flex:1;min-width:240px}
.chips{display:flex;gap:9px;flex-wrap:wrap}
.cat-count{color:var(--text-muted);font-size:.88rem;margin-bottom:22px}.cat-count b{color:var(--heading)}

/* ============================================================ OVER ONS */
.mv-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px}
@media(max-width:760px){.mv-grid{grid-template-columns:1fr}}
.mv{padding:32px;position:relative}
.mv .mv-ic{width:46px;height:46px;border-radius:13px;background:rgba(181,153,103,.1);color:var(--gold);display:flex;align-items:center;justify-content:center;margin-bottom:16px}
.mv .mv-ic svg{width:22px;height:22px}
.mv h3{font-size:1.3rem;margin-bottom:10px}
.mv p{color:var(--text-light);line-height:1.7}
.pillars{display:flex;flex-direction:column;gap:18px;margin-top:8px}
.pillar{display:flex;gap:16px;align-items:flex-start}
.pillar-n{width:38px;height:38px;border-radius:50%;background:var(--gold-grad);color:#fff;font-family:'Outfit',sans-serif;font-weight:800;display:flex;align-items:center;justify-content:center;flex-shrink:0;font-size:.95rem}
.pillar b{display:block;color:var(--heading);font-family:'Outfit',sans-serif;font-size:1.02rem;margin-bottom:3px}
.pillar span{color:var(--text-light);font-size:.92rem;line-height:1.6}
.gallery{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
@media(max-width:860px){.gallery{grid-template-columns:1fr 1fr}}
@media(max-width:520px){.gallery{grid-template-columns:1fr}}
.gal{position:relative;border-radius:16px;overflow:hidden;aspect-ratio:4/3;background:linear-gradient(150deg,#efe6d6,#e3d6c0);border:1px solid var(--cream-dark)}
.gal .media-pattern{opacity:.55}
.gal-cap{position:absolute;left:0;right:0;bottom:0;padding:14px 16px;background:linear-gradient(0deg,rgba(27,19,12,.6),transparent);color:#fff;font-size:.82rem;font-weight:500}
.gal-ic{position:absolute;top:50%;left:50%;transform:translate(-50%,-60%);color:var(--gold);opacity:.5}
.gal-ic svg{width:42px;height:42px}

/* ============================================================ TEAM */
.team-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
@media(max-width:980px){.team-grid{grid-template-columns:1fr 1fr}}
@media(max-width:600px){.team-grid{grid-template-columns:1fr}}
.tm{overflow:hidden}
.tm-photo{position:relative;aspect-ratio:4/5;overflow:hidden;background:linear-gradient(150deg,#efe6d6,#e3d6c0)}
.tm-photo img{width:100%;height:100%;object-fit:cover;object-position:center top}
.tm-verify{position:absolute;top:12px;right:12px;width:30px;height:30px;border-radius:50%;background:rgba(255,255,255,.92);display:flex;align-items:center;justify-content:center;box-shadow:0 4px 12px rgba(45,31,21,.18)}
.tm-verify svg{width:17px;height:17px;color:var(--sig)}
.tm-body{padding:22px}
.tm-body h3{font-size:1.12rem;margin-bottom:2px}
.tm-role{color:var(--gold-dark);font-weight:600;font-size:.84rem;margin-bottom:12px;display:block}
.tm-tags{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:14px}
.tm-tag{font-size:.7rem;padding:4px 9px;border-radius:100px;background:rgba(181,153,103,.1);color:var(--gold-dark);font-weight:600}
.tm-bio{color:var(--text-muted);font-size:.88rem;line-height:1.6;margin-bottom:14px}
.tm-quote{border-left:2px solid var(--gold);padding-left:13px;color:var(--text-light);font-style:italic;font-size:.86rem;line-height:1.5}
.team-hero-img{border-radius:20px;overflow:hidden;border:1px solid var(--cream-dark);box-shadow:0 30px 64px rgba(45,31,21,.16);aspect-ratio:21/9;margin-top:8px}
.team-hero-img img{width:100%;height:100%;object-fit:cover}

/* ============================================================ CONTACT */
.contact-grid{display:grid;grid-template-columns:1fr 1.1fr;gap:48px;align-items:start}
@media(max-width:880px){.contact-grid{grid-template-columns:1fr;gap:32px}}
.cinfo-list{display:flex;flex-direction:column;gap:18px;margin:24px 0}
.cinfo{display:flex;gap:14px;align-items:flex-start}
.cinfo-ic{width:46px;height:46px;border-radius:13px;background:rgba(181,153,103,.1);color:var(--gold);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.cinfo-ic svg{width:20px;height:20px}
.cinfo b{display:block;color:var(--heading);font-family:'Outfit',sans-serif;font-size:.78rem;text-transform:uppercase;letter-spacing:.06em;margin-bottom:2px}
.cinfo span{color:var(--text);font-size:.96rem}
.form-card{padding:32px}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:16px}
@media(max-width:520px){.form-row{grid-template-columns:1fr}}
.field{margin-bottom:16px}
.field label{display:block;font-family:'Outfit',sans-serif;font-weight:600;font-size:.74rem;text-transform:uppercase;letter-spacing:.06em;color:var(--text-light);margin-bottom:7px}
.field textarea.input{min-height:130px;resize:vertical}
.map-strip{margin-top:18px;border-radius:16px;overflow:hidden;border:1px solid var(--cream-dark);aspect-ratio:21/7;position:relative;background:linear-gradient(150deg,#efe6d6,#e3d6c0)}
.map-strip .gal-ic svg{width:34px;height:34px}

/* reveal helper (transform-only, never hides) */
.reveal{opacity:1}
@media(prefers-reduced-motion:no-preference){
  .reveal.in{animation:revIn .55s var(--ease)}
  [data-stagger] .reveal.in{animation:revIn .55s var(--ease) backwards;animation-delay:calc(var(--i,0)*60ms)}
}

/* ============================================================
   GRAV ADAPTATIONS (prototype gebruikte een interne .screen-scroller;
   GRAV rendert normale documenten -> normaal body-scroll)
   ============================================================ */
html, body { height: auto !important; overflow-x: clip !important; overflow-y: visible !important; }
#app { height: auto; overflow: visible; }
.lang a { border:0; background:none; padding:4px 7px; border-radius:7px; color:var(--text-muted); cursor:pointer; transition:all .2s; text-decoration:none; font-family:'Outfit',sans-serif; font-weight:700; }
.lang a.on { background:var(--cream-dark); color:var(--gold-dark); }
.topnav .wrap { max-width:1240px; margin:0 auto; padding:0 28px; }

/* ===== Cookie consent banner (geport uit v1-thema; AVG) ===== */
.cookie-banner {
    position: fixed;
    bottom: 1.5rem;
    left: 1.5rem;
    right: 1.5rem;
    z-index: 9999;
    max-width: 720px;
    margin: 0 auto;
    background: var(--white);
    border-radius: var(--radius-lg);
    border: 1px solid var(--honey-edge-soft);
    box-shadow: 0 24px 60px -16px var(--honey-shadow), 0 8px 24px -8px rgba(45, 31, 21, 0.18);
    backdrop-filter: blur(20px);
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.4s var(--ease), transform 0.4s var(--ease);
}

.cookie-banner-visible {
    opacity: 1;
    transform: translateY(0);
}

.cookie-banner-inner {
    padding: 1.5rem 1.75rem;
}

.cookie-banner-content h3 {
    font-family: 'Outfit', sans-serif;
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--heading);
    margin: 0 0 0.5rem;
    letter-spacing: -0.01em;
}

.cookie-banner-content p {
    font-size: 0.92rem;
    line-height: 1.6;
    color: var(--text);
    margin: 0;
}

.cookie-banner-content a {
    color: var(--secondary-dark);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.cookie-banner-options {
    margin-top: 1.25rem;
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
    padding: 1rem;
    background: var(--accent);
    border-radius: var(--radius-md);
}

.cookie-option {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    font-size: 0.85rem;
    line-height: 1.5;
    color: var(--text);
    cursor: pointer;
}

.cookie-option input[type="checkbox"] {
    margin-top: 3px;
    width: 18px;
    height: 18px;
    accent-color: var(--secondary);
    flex-shrink: 0;
    cursor: pointer;
}

.cookie-option input[type="checkbox"]:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

.cookie-option strong {
    color: var(--heading);
    font-weight: 600;
}

.cookie-option em {
    font-style: normal;
    color: var(--text-muted);
    font-size: 0.78rem;
}

.cookie-banner-actions {
    margin-top: 1.25rem;
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
    justify-content: flex-end;
}

.cookie-btn {
    padding: 0.7rem 1.25rem;
    border-radius: var(--radius-pill);
    font-family: 'DM Sans', sans-serif;
    font-size: 0.88rem;
    font-weight: 600;
    border: 1px solid transparent;
    cursor: pointer;
    transition: all 0.25s var(--ease);
    letter-spacing: 0.01em;
}

.cookie-btn-primary {
    background: var(--secondary);
    color: var(--white);
    box-shadow: 0 4px 14px -2px rgba(154, 130, 79, 0.4);
}

.cookie-btn-primary:hover {
    background: var(--secondary-dark);
    transform: translateY(-1px);
    box-shadow: 0 6px 18px -2px rgba(154, 130, 79, 0.5);
}

.cookie-btn-secondary {
    background: transparent;
    color: var(--text);
    border-color: var(--honey-edge);
}

.cookie-btn-secondary:hover {
    background: var(--accent);
    border-color: var(--secondary);
    color: var(--secondary-dark);
}

.cookie-settings-trigger {
    position: fixed;
    bottom: 1.25rem;
    left: 1.25rem;
    z-index: 9998;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: var(--white);
    border: 1px solid var(--honey-edge-soft);
    color: var(--secondary-dark);
    cursor: pointer;
    box-shadow: 0 4px 14px -2px rgba(45, 31, 21, 0.12);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s var(--ease);
    opacity: 0.7;
}

.cookie-settings-trigger:hover {
    opacity: 1;
    transform: translateY(-2px);
    border-color: var(--secondary);
    box-shadow: 0 6px 18px -2px rgba(45, 31, 21, 0.18);
}

@media (max-width: 640px) {
    .cookie-banner {
        bottom: 0.75rem;
        left: 0.75rem;
        right: 0.75rem;
    }
    .cookie-banner-inner {
        padding: 1.25rem 1rem;
    }
    .cookie-banner-actions {
        flex-direction: column;
        align-items: stretch;
        gap: 0.5rem;
    }
    .cookie-btn {
        width: 100%;
        flex: none;
        padding: 0.8rem 1rem;
        font-size: 0.9rem;
    }
    .cookie-btn-primary { order: -1; }
}


/* ============================================================
   AI GOVERNANCE — ecosystem radial (v2, elevated SVG graphic)
   ============================================================ */
.ag-eco{margin-top:48px}
.ag-stage{position:relative;max-width:660px;margin:0 auto}
.ag-svg{width:100%;height:auto;overflow:visible;display:block}
.ag-orbit{transform-origin:350px 350px;animation:agspin 80s linear infinite}
.ag-orbit circle{fill:none;stroke:var(--gold)}
@media (prefers-reduced-motion:reduce){.ag-orbit{animation:none}}
.ag-line{stroke:url(#agGrad);stroke-width:1.6;opacity:.32}
.reveal.in .ag-line{stroke-dasharray:560;animation:agdraw 1.1s var(--ease) backwards}
.ag-node-disc{fill:#fffefb;stroke:url(#agGrad);stroke-width:2.5;filter:url(#agShadow)}
.ag-node-ic{color:var(--gold-dark)}
.ag-center-disc{fill:#fff;filter:url(#agShadow)}
.ag-center-ring{fill:none;stroke:var(--sig);stroke-width:2;opacity:.55}
.ag-ctext{font-family:'Outfit',sans-serif;fill:var(--gold-dark);font-weight:800}
.ag-csub{font-family:'Outfit',sans-serif;fill:var(--heading);font-weight:600}
.ag-legend{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;max-width:780px;margin:40px auto 0}
@media(max-width:780px){.ag-legend{grid-template-columns:1fr 1fr}}
@media(max-width:520px){.ag-legend{grid-template-columns:1fr}}
.ag-leg{display:flex;align-items:center;gap:12px;text-align:left;background:var(--off-white);border:1px solid var(--cream-dark);border-radius:14px;padding:13px 15px;transition:all .35s var(--ease)}
.ag-leg:hover{border-color:var(--gold);box-shadow:0 12px 28px rgba(181,153,103,.1);transform:translateY(-3px)}
.ag-leg-ic{width:40px;height:40px;border-radius:12px;background:rgba(181,153,103,.12);color:var(--gold);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.ag-leg-ic svg{width:20px;height:20px}
.ag-leg b{display:block;font-family:'Outfit',sans-serif;font-size:.86rem;color:var(--heading);line-height:1.3}
@keyframes agspin{to{transform:rotate(360deg)}}
@keyframes agdraw{from{stroke-dashoffset:560}to{stroke-dashoffset:0}}

/* accent-correctie: geen groene vinkjes — warm goud, neon blijft de signature-accent */
.checklist li svg{color:var(--gold)}

/* ===== compat var voor geporte v1-infographics ===== */
:root{--white:#ffffff;--secondary:#b59967;--secondary-dark:#9a824f;--radius-pill:100px}
/* ===== Dienst-infographics (v1 geport, v2 tokens) ===== */
.infographic-radial,
.infographic-comparison,
.infographic-layers,
.infographic-response,
.infographic-results {
    padding: 5rem 5%;
    background: var(--white);
}

.infographic-container {
    max-width: 1100px;
    margin: 0 auto;
}

.infographic-title {
    font-family: 'Outfit', sans-serif;
    font-size: clamp(1.5rem, 2.5vw, 2rem);
    font-weight: 600;
    color: var(--heading);
    text-align: center;
    margin-bottom: 0.75rem;
}

.infographic-subtitle {
    font-size: 1rem;
    color: var(--text-light);
    text-align: center;
    max-width: 600px;
    margin: 0 auto 3.5rem;
    line-height: 1.6;
}


/* ─── DESIGN 1: Radial Ecosystem (AI Compliance) ──────────── */

.radial-diagram {
    position: relative;
    max-width: 700px;
    margin: 0 auto;
}

.radial-svg {
    width: 100%;
    height: auto;
    display: block;
}

/* Orbit draws itself */
.radial-orbit {
    stroke-dasharray: 1571;
    stroke-dashoffset: 1571;
    transition: stroke-dashoffset 2s cubic-bezier(0.4, 0, 0.2, 1);
}
.visible .radial-orbit {
    stroke-dashoffset: 0;
}

/* Connection lines draw themselves */
.radial-line {
    stroke-dasharray: 300;
    stroke-dashoffset: 300;
    transition: stroke-dashoffset 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}
.visible .radial-line.rl-1 { transition-delay: 0.4s; }
.visible .radial-line.rl-2 { transition-delay: 0.6s; }
.visible .radial-line.rl-3 { transition-delay: 0.8s; }
.visible .radial-line.rl-4 { transition-delay: 1.0s; }
.visible .radial-line.rl-5 { transition-delay: 1.2s; }
.visible .radial-line.rl-6 { transition-delay: 1.4s; }
.visible .radial-line {
    stroke-dashoffset: 0;
}

/* Nodes fade in with stagger */
.radial-node {
    opacity: 0;
    transform-origin: center;
    transition: opacity 0.5s ease, transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
    transform: scale(0);
}
.visible .radial-node {
    opacity: 1;
    transform: scale(1);
}
.visible .rn-1 { transition-delay: 0.6s; }
.visible .rn-2 { transition-delay: 0.8s; }
.visible .rn-3 { transition-delay: 1.0s; }
.visible .rn-4 { transition-delay: 1.2s; }
.visible .rn-5 { transition-delay: 1.4s; }
.visible .rn-6 { transition-delay: 1.6s; }

/* Labels positioned around the diagram */
.radial-labels {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    pointer-events: none;
}

.radial-label {
    position: absolute;
    font-family: 'Outfit', sans-serif;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--heading);
    line-height: 1.3;
    text-align: center;
    opacity: 0;
    transform: translateY(10px);
    transition: opacity 0.5s ease, transform 0.5s ease;
}
.radial-label small {
    display: block;
    font-family: 'DM Sans', sans-serif;
    font-size: 0.72rem;
    font-weight: 400;
    color: var(--text-light);
    margin-top: 2px;
}

.visible .radial-label {
    opacity: 1;
    transform: translateY(0);
}
.visible .rl-pos-1 { transition-delay: 0.7s; }
.visible .rl-pos-2 { transition-delay: 0.9s; }
.visible .rl-pos-3 { transition-delay: 1.1s; }
.visible .rl-pos-4 { transition-delay: 1.3s; }
.visible .rl-pos-5 { transition-delay: 1.5s; }
.visible .rl-pos-6 { transition-delay: 1.7s; }

/* Label positions (percentages relative to container) */
.rl-pos-1 { top: 2%; left: 50%; transform: translateX(-50%) translateY(10px); }
.visible .rl-pos-1 { transform: translateX(-50%) translateY(0); }

.rl-pos-2 { top: 18%; right: -2%; text-align: left; }
.rl-pos-3 { bottom: 18%; right: -2%; text-align: left; }
.rl-pos-4 { bottom: 1%; left: 50%; transform: translateX(-50%) translateY(10px); }
.visible .rl-pos-4 { transform: translateX(-50%) translateY(0); }
.rl-pos-5 { bottom: 18%; left: -2%; text-align: right; }
.rl-pos-6 { top: 18%; left: -2%; text-align: right; }

/* Radial mobile */
@media (max-width: 768px) {
    .radial-diagram {
        max-width: 320px;
    }
    .radial-labels {
        position: relative;
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 1rem;
        margin-top: 2rem;
    }
    .radial-label {
        position: static !important;
        transform: none !important;
        text-align: center;
        background: rgba(181,153,103,0.04);
        border: 1px solid rgba(181,153,103,0.1);
        border-radius: 10px;
        padding: 0.75rem;
    }
    .visible .radial-label {
        transform: none !important;
    }
}


/* ─── DESIGN 2: Before/After Comparison (Consultancy) ─────── */

.comparison-grid {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    gap: 2rem;
    align-items: stretch;
}

.comparison-side {
    padding: 2rem;
    border-radius: 16px;
}

.comparison-before {
    background: rgba(160, 128, 112, 0.04);
    border: 1px solid rgba(160, 128, 112, 0.12);
}

.comparison-after {
    background: rgba(181, 153, 103, 0.04);
    border: 1px solid rgba(181, 153, 103, 0.15);
}

.comparison-header {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 2rem;
}

.comparison-icon {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.comparison-icon svg {
    width: 22px;
    height: 22px;
}

.before-icon {
    background: rgba(160, 128, 112, 0.12);
    color: #a08070;
}

.after-icon {
    background: rgba(181, 153, 103, 0.12);
    color: #b59967;
}

.comparison-header h4 {
    font-family: 'Outfit', sans-serif;
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--heading);
    margin: 0;
}

.comparison-bars {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.comparison-bar-item {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.bar-label {
    font-family: 'DM Sans', sans-serif;
    font-size: 0.8rem;
    font-weight: 500;
    color: var(--text-light);
}

.bar-track {
    width: 100%;
    height: 8px;
    background: rgba(0,0,0,0.04);
    border-radius: 100px;
    overflow: hidden;
}

.bar-fill {
    height: 100%;
    border-radius: 100px;
    width: 0;
    transition: width 1.2s cubic-bezier(0.4, 0, 0.2, 1);
}
.visible .bar-fill {
    width: var(--bar-width);
}

.bar-risk {
    background: linear-gradient(90deg, #c4a08a, #a08070);
}

.bar-secure {
    background: linear-gradient(90deg, #c9b07a, #b59967);
}

/* Stagger the bar animations */
.visible .comparison-bar-item:nth-child(1) .bar-fill { transition-delay: 0.2s; }
.visible .comparison-bar-item:nth-child(2) .bar-fill { transition-delay: 0.35s; }
.visible .comparison-bar-item:nth-child(3) .bar-fill { transition-delay: 0.5s; }
.visible .comparison-bar-item:nth-child(4) .bar-fill { transition-delay: 0.65s; }
.visible .comparison-bar-item:nth-child(5) .bar-fill { transition-delay: 0.8s; }

/* Divider */
.comparison-divider {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0;
    padding: 1rem 0;
}

.divider-line {
    width: 2px;
    flex: 1;
    background: linear-gradient(to bottom, transparent, rgba(181,153,103,0.3), transparent);
}

.divider-badge {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--white);
    border: 2px solid #b59967;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #b59967;
    flex-shrink: 0;
    box-shadow: 0 2px 12px rgba(181,153,103,0.15);
}
.divider-badge svg {
    width: 18px;
    height: 18px;
}

/* Comparison mobile */
@media (max-width: 768px) {
    .comparison-grid {
        grid-template-columns: 1fr;
        gap: 0;
    }
    .comparison-divider {
        flex-direction: row;
        padding: 1.5rem 0;
        gap: 0;
    }
    .divider-line {
        width: auto;
        height: 2px;
        flex: 1;
        background: linear-gradient(to right, transparent, rgba(181,153,103,0.3), transparent);
    }
    .divider-badge {
        margin: 0 1rem;
    }
    .divider-badge svg {
        transform: rotate(90deg);
    }
}


/* ─── DESIGN 3: Concentric Security Layers (In-house) ─────── */

.layers-diagram {
    position: relative;
    max-width: 560px;
    margin: 0 auto;
}

.layers-svg {
    width: 100%;
    height: auto;
    display: block;
}

/* Layers scale in from center */
.layer {
    transform-origin: 300px 300px;
    transform: scale(0);
    opacity: 0;
    transition: transform 0.8s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.6s ease;
}
.visible .layer {
    transform: scale(1);
    opacity: 1;
}
.visible .layer-1 { transition-delay: 0.2s; }
.visible .layer-2 { transition-delay: 0.45s; }
.visible .layer-3 { transition-delay: 0.7s; }
.visible .layer-4 { transition-delay: 0.95s; }
.visible .layer-5 { transition-delay: 1.2s; }

/* Layer labels */
.layers-labels {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    pointer-events: none;
}

.layers-label {
    position: absolute;
    font-family: 'Outfit', sans-serif;
    font-size: 0.78rem;
    font-weight: 600;
    color: #b59967;
    background: rgba(255,255,255,0.9);
    padding: 0.3rem 0.75rem;
    border-radius: 100px;
    border: 1px solid rgba(181,153,103,0.15);
    white-space: nowrap;
    opacity: 0;
    transform: translateY(8px);
    transition: opacity 0.5s ease, transform 0.5s ease;
    box-shadow: 0 2px 8px rgba(181,153,103,0.08);
}

.visible .layers-label {
    opacity: 1;
    transform: translateY(0);
}

/* Position labels at ring intersections */
.ll-1 { top: 35%; right: 3%; }
.visible .ll-1 { transition-delay: 0.6s; }
.ll-2 { top: 52%; right: 0%; }
.visible .ll-2 { transition-delay: 0.85s; }
.ll-3 { bottom: 26%; left: 3%; }
.visible .ll-3 { transition-delay: 1.1s; }
.ll-4 { bottom: 10%; left: 10%; }
.visible .ll-4 { transition-delay: 1.35s; }

/* Layers mobile */
@media (max-width: 600px) {
    .layers-diagram {
        max-width: 300px;
    }
    .layers-labels {
        position: relative;
        display: flex;
        flex-direction: column;
        gap: 0.75rem;
        margin-top: 1.5rem;
        align-items: center;
    }
    .layers-label {
        position: static !important;
        transform: none !important;
    }
    .visible .layers-label {
        transform: none !important;
    }
}


/* ─── DESIGN 4: Incident Response Timeline (Security Ops) ─── */

.response-timeline {
    position: relative;
    max-width: 900px;
    margin: 0 auto;
}

.response-progress {
    position: absolute;
    top: 58px;
    left: 0;
    right: 0;
    height: 4px;
    background: rgba(181,153,103,0.1);
    border-radius: 100px;
    z-index: 0;
}

.response-progress-fill {
    height: 100%;
    width: 0;
    background: linear-gradient(90deg, #b59967, #c9b07a);
    border-radius: 100px;
    transition: width 2s cubic-bezier(0.4, 0, 0.2, 1);
}
.visible .response-progress-fill {
    width: 100%;
}

.response-phases {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.5rem;
    position: relative;
    z-index: 1;
}

.response-phase {
    text-align: center;
    opacity: 0;
    transform: translateY(15px);
    transition: opacity 0.5s ease, transform 0.5s ease;
}
.visible .response-phase:nth-child(1) { opacity: 1; transform: translateY(0); transition-delay: 0.3s; }
.visible .response-phase:nth-child(2) { opacity: 1; transform: translateY(0); transition-delay: 0.7s; }
.visible .response-phase:nth-child(3) { opacity: 1; transform: translateY(0); transition-delay: 1.1s; }
.visible .response-phase:nth-child(4) { opacity: 1; transform: translateY(0); transition-delay: 1.5s; }

.response-time {
    font-family: 'Outfit', sans-serif;
    font-size: 0.72rem;
    font-weight: 700;
    color: #b59967;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-bottom: 0.75rem;
    background: rgba(181,153,103,0.08);
    display: inline-block;
    padding: 0.2rem 0.6rem;
    border-radius: 100px;
}

.response-phase-dot {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #b59967;
    margin: 0 auto 1.25rem;
    box-shadow: 0 0 0 4px var(--white), 0 0 0 6px rgba(181,153,103,0.2);
    position: relative;
}
.response-phase-dot::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 6px;
    height: 6px;
    background: white;
    border-radius: 50%;
    transform: translate(-50%, -50%);
}

.response-phase h4 {
    font-family: 'Outfit', sans-serif;
    font-size: 1rem;
    font-weight: 600;
    color: var(--heading);
    margin-bottom: 0.4rem;
}

.response-phase p {
    font-family: 'DM Sans', sans-serif;
    font-size: 0.85rem;
    color: var(--text-light);
    line-height: 1.5;
}

/* Response timeline mobile */
@media (max-width: 700px) {
    .response-phases {
        grid-template-columns: 1fr;
        gap: 2rem;
    }
    .response-progress {
        display: none;
    }
    .response-phase {
        display: grid;
        grid-template-columns: auto 1fr;
        grid-template-rows: auto auto;
        gap: 0 1rem;
        text-align: left;
    }
    .response-time {
        grid-column: 1 / -1;
        justify-self: start;
        margin-bottom: 0.5rem;
    }
    .response-phase-dot {
        grid-row: 2 / 4;
        margin: 0.2rem 0 0 0;
    }
    .response-phase h4 {
        margin-bottom: 0.2rem;
    }
}


/* ─── DESIGN 5: Results Gauges (Corporate) ────────────────── */

.results-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 2rem;
    max-width: 900px;
    margin: 0 auto;
}

.result-gauge {
    text-align: center;
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.6s ease, transform 0.6s ease;
}
.visible .result-gauge:nth-child(1) { opacity: 1; transform: translateY(0); transition-delay: 0.15s; }
.visible .result-gauge:nth-child(2) { opacity: 1; transform: translateY(0); transition-delay: 0.3s; }
.visible .result-gauge:nth-child(3) { opacity: 1; transform: translateY(0); transition-delay: 0.45s; }
.visible .result-gauge:nth-child(4) { opacity: 1; transform: translateY(0); transition-delay: 0.6s; }

.result-gauge .gauge-wrap {
    position: relative;
    width: 130px;
    height: 130px;
    margin: 0 auto 1.25rem;
}

.result-gauge svg {
    width: 100%;
    height: 100%;
    display: block;
}

.gauge-fill {
    transition: stroke-dasharray 2s cubic-bezier(0.4, 0, 0.2, 1);
}

.gauge-value {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-family: 'Outfit', sans-serif;
    font-size: 2rem;
    font-weight: 700;
    color: #b59967;
    line-height: 1;
    white-space: nowrap;
}
.gauge-value small {
    font-size: 1rem;
    font-weight: 600;
}

.gauge-label {
    display: block;
    font-family: 'DM Sans', sans-serif;
    font-size: 0.85rem;
    color: var(--text-light);
    line-height: 1.4;
    margin-top: 2.2rem;
}

/* Gauges mobile */
@media (max-width: 700px) {
    .results-grid {
        grid-template-columns: 1fr 1fr;
        gap: 2rem 1.5rem;
    }
}
@media (max-width: 400px) {
    .results-grid {
        grid-template-columns: 1fr;
    }
}



/* ============================================================
   EDITORIAL COPY — prose-typesetting op hoogste standaard
   ============================================================ */
h1,h2,h3,.display,.dl,.dm,.ds{text-wrap:balance}
.lead{text-wrap:pretty;max-width:62ch}
.sec-head.center .lead,.lead.center{margin-left:auto;margin-right:auto}

.prose{color:var(--text);font-size:1.02rem;line-height:1.75;max-width:68ch;text-wrap:pretty;
  -webkit-font-smoothing:antialiased}
.prose > * + *{margin-top:1.05em}
.prose p{margin:0}
.prose strong,.prose b{color:var(--heading);font-weight:700}
.prose em{font-style:italic}
.prose a{color:var(--gold-dark);text-decoration:underline;text-decoration-thickness:1px;
  text-underline-offset:3px;text-decoration-color:rgba(181,153,103,.45);transition:text-decoration-color .2s}
.prose a:hover{text-decoration-color:var(--gold)}
.prose h2,.prose h3,.prose h4{font-family:'Outfit',sans-serif;color:var(--heading);
  line-height:1.25;margin-top:1.7em;margin-bottom:.45em;text-wrap:balance;letter-spacing:-.01em}
.prose h2{font-size:1.42rem}
.prose h3{font-size:1.18rem}
.prose h4{font-size:1.02rem;letter-spacing:.005em}
.prose ul,.prose ol{margin-top:1.05em;padding-left:0;list-style:none}
.prose ul li{position:relative;padding-left:1.65em;margin:.5em 0}
.prose ul li::before{content:"";position:absolute;left:.1em;top:.66em;width:7px;height:7px;
  border-radius:2px;background:var(--gold-grad);transform:rotate(45deg)}
.prose ol{counter-reset:li}
.prose ol li{position:relative;padding-left:2.1em;margin:.55em 0;counter-increment:li}
.prose ol li::before{content:counter(li);position:absolute;left:0;top:.02em;width:1.5em;height:1.5em;
  border-radius:50%;background:rgba(181,153,103,.13);color:var(--gold-dark);font-family:'Outfit',sans-serif;
  font-size:.76rem;font-weight:700;display:flex;align-items:center;justify-content:center}
.prose li > ul,.prose li > ol{margin-top:.35em}
.prose blockquote{margin:1.2em 0;padding:.3em 0 .3em 1.25em;border-left:3px solid var(--gold);
  color:var(--text-light);font-style:italic}
.prose blockquote p{margin:0}
.prose hr{border:0;border-top:1px solid var(--cream-dark);margin:1.8em 0}
.prose code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.88em;
  background:rgba(181,153,103,.1);padding:.12em .4em;border-radius:5px;color:var(--gold-dark)}

/* sheet Academy-knop: nette gecentreerde knop (de .msheet a-regel maakte 'm block/links/donker) */
.msheet a.btn{display:flex;align-items:center;justify-content:center;gap:8px;border-bottom:0;color:#fff;padding:14px 20px}