:root{
  /* --- brand --- */
  --brand:#603898;        /* logo violet */
  --brand-2:#7A4FB8;
  --brand-3:#9B6FD4;      /* decorative only: 3.74:1 on white, fails AA for text */
  --brand-text:#8256C2;   /* small text/badges on light: 5.17:1 on white */
  --lilac:#C9B3EC;
  --lilac-soft:#E4D7F6;

  /* --- neutrals: warmed slightly so the violet reads as intentional, not cold --- */
  --ink:#140B27;
  --ink-2:#241640;
  --deep:#200E45;
  --deep-2:#31165C;
  --paper:#F7F5FB;
  --paper-2:#FFFFFF;
  --white:#FFFFFF;
  --muted:#665E7C;
  --muted-2:#8A83A0;

  /* --- accent: gold, used sparingly, is what makes it read as premium --- */
  --gold:#C9A227;
  --gold-2:#E4C766;
  --gold-soft:rgba(201,162,39,.14);

  /* --- lines & elevation: layered shadows instead of one flat blur --- */
  --line:rgba(20,11,39,.09);
  --line-2:rgba(255,255,255,.12);
  --line-3:rgba(20,11,39,.16);
  --shadow-1:0 1px 2px rgba(20,11,39,.05), 0 4px 12px -6px rgba(20,11,39,.10);
  --shadow-2:0 2px 4px rgba(20,11,39,.05), 0 12px 28px -14px rgba(32,14,69,.30);
  --shadow-3:0 4px 8px rgba(20,11,39,.06), 0 32px 64px -32px rgba(32,14,69,.45);
  --shadow:var(--shadow-3);
  --shadow-sm:var(--shadow-1);
  --glow:0 0 0 1px rgba(155,111,212,.18), 0 18px 44px -22px rgba(122,79,184,.55);

  /* --- shape & motion --- */
  --r-sm:10px;
  --r-md:16px;
  --r-lg:22px;
  --r-xl:28px;
  --ease:cubic-bezier(.22,.61,.36,1);
  --ease-out:cubic-bezier(.16,1,.3,1);
  --t-fast:.18s;
  --t-base:.26s;
  --t-slow:.42s;

  --maxw:1240px;

  /* --- type: self-hosted, split by script --- */
  --fa:"Vazirmatn",system-ui,-apple-system,"Segoe UI",sans-serif;
  --latin-body:"Inter Variable","Vazirmatn",system-ui,-apple-system,"Segoe UI",sans-serif;
  --display:"Playfair Display Variable","Vazirmatn",Georgia,serif;
  --zh:"Noto Sans SC","PingFang SC","Microsoft YaHei","Hiragino Sans GB","Inter Variable",sans-serif;
  --mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --sans:var(--fa);
  --head:var(--fa);
}

/* Latin & Cyrillic languages get Inter for body and Playfair for display.
   Persian and Arabic keep Vazirmatn throughout — Playfair has no Arabic
   glyphs, so applying it there would silently fall back and look broken. */
[lang^="en"],[lang^="ru"]{--sans:var(--latin-body);--head:var(--display)}
[lang^="zh"]{--sans:var(--zh);--head:var(--zh)}
[lang^="ar"]{--sans:var(--fa);--head:var(--fa)}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;overflow-x:clip}
body{font-family:var(--sans);background:var(--paper);color:var(--ink);line-height:1.75;-webkit-font-smoothing:antialiased;overflow-x:clip}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
.wrap{max-width:var(--maxw);margin-inline:auto;padding-inline:clamp(20px,5vw,48px)}
.lat{font-family:var(--latin-body);direction:ltr;unicode-bidi:isolate}
.mono{font-family:var(--mono);direction:ltr;unicode-bidi:isolate;letter-spacing:.06em}
[lang="ar"] .mono,[lang="zh"] .mono,[lang="ar"] .eyebrow,[lang="zh"] .eyebrow{font-family:var(--sans);direction:inherit;unicode-bidi:normal;letter-spacing:.02em}

.eyebrow{font-family:var(--mono);direction:ltr;unicode-bidi:isolate;font-size:12px;letter-spacing:.22em;text-transform:uppercase;color:var(--brand);display:inline-flex;align-items:center;gap:10px}
.eyebrow::before{content:"";width:26px;height:1px;background:var(--brand);opacity:.55}
.on-dark .eyebrow{color:var(--lilac)}
.on-dark .eyebrow::before{background:var(--lilac)}

.btn{display:inline-flex;align-items:center;cursor:pointer;gap:10px;font-family:var(--sans);font-weight:700;font-size:15px;padding:14px 26px;border-radius:100px;border:1px solid transparent;cursor:pointer;transition:.28s cubic-bezier(.4,0,.2,1);white-space:nowrap}
.btn-primary{background:linear-gradient(135deg,var(--brand-2),var(--brand));color:#fff;box-shadow:0 14px 30px -12px rgba(96,56,152,.75)}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 20px 38px -12px rgba(123,79,184,.9)}
.btn-ghost{background:rgba(255,255,255,.04);border-color:rgba(255,255,255,.28);color:#fff}
.btn-ghost:hover{border-color:var(--lilac);color:var(--lilac-soft)}
.btn-dark{background:var(--brand);color:#fff}
.btn-dark:hover{background:var(--brand-2);transform:translateY(-2px)}
.btn-line{background:transparent;border-color:var(--line);color:var(--ink)}
.btn-line:hover{border-color:var(--brand);color:var(--brand)}
.btn .arr{transition:transform .28s}
[dir="rtl"] .btn:hover .arr{transform:translateX(-4px)}
[dir="ltr"] .btn:hover .arr{transform:translateX(4px)}
[dir="ltr"] .btn .arr{transform:scaleX(-1)}
[dir="ltr"] .btn:hover .arr{transform:scaleX(-1) translateX(-4px)}

.sec{padding-block:clamp(74px,9vw,132px)}
.sec-head{max-width:680px;margin-bottom:clamp(40px,5vw,64px)}
.sec-head h2{font-family:var(--head);font-weight:800;font-size:clamp(28px,4.4vw,46px);line-height:1.2;margin-top:18px;letter-spacing:-.01em}
.sec-head p{color:var(--muted);margin-top:16px;font-size:clamp(15px,2vw,18px)}

/* ===== 3D scroll reveal (comes in & leaves) ===== */
.js .s3d{opacity:0;transform:translateY(26px);transition:opacity .7s ease,transform .7s cubic-bezier(.2,.7,.2,1)}
.js .s3d.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.s3d{opacity:1!important;transform:none!important;transition:none}html{scroll-behavior:auto}}

/* ===== NAV ===== */
header.nav{position:sticky;top:0;z-index:60;background:rgba(246,244,251,.82);backdrop-filter:blur(14px);border-bottom:1px solid transparent;transition:.3s}
header.nav.scrolled{border-bottom-color:var(--line);box-shadow:0 6px 26px -22px rgba(35,16,74,.6)}
.nav-inner{display:flex;align-items:center;justify-content:space-between;height:76px;gap:18px}
.brand{display:flex;align-items:center;gap:10px}
.brand img{height:38px;width:auto}
.nav-links{display:flex;align-items:center;gap:28px;font-size:15px;font-weight:500}
.nav-links a{color:#3a3252;transition:.2s}
.nav-links a:hover{color:var(--brand)}
.nav-cta{display:flex;align-items:center;gap:12px}
/* language switcher */
.lang{position:relative}
.lang-btn{display:inline-flex;align-items:center;justify-content:center;min-height:44px;gap:7px;background:rgba(96,56,152,.08);border:1px solid var(--line);border-radius:100px;padding:9px 14px;cursor:pointer;font-family:var(--sans);font-weight:600;font-size:13px;color:var(--brand)}
.lang-btn:hover{background:rgba(96,56,152,.14)}
.lang-menu{position:absolute;inset-inline-end:0;top:calc(100% + 8px);background:#fff;border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow);padding:6px;min-width:160px;opacity:0;visibility:hidden;transform:translateY(-6px);transition:.22s;z-index:70}
.lang-menu.open{opacity:1;visibility:visible;transform:none}
.lang-menu button{display:flex;align-items:center;gap:10px;width:100%;background:none;border:0;padding:10px 12px;border-radius:9px;cursor:pointer;font-family:inherit;font-size:14px;color:var(--ink);text-align:start}
.lang-menu button:hover{background:rgba(96,56,152,.08)}
.lang-menu button.active{color:var(--brand);font-weight:700}
.lang-menu button .fl{font-size:16px}
.burger{display:none;flex-direction:column;justify-content:center;align-items:center;gap:5px;background:none;border:0;cursor:pointer;min-width:44px;min-height:44px;padding:8px}
.burger span{width:24px;height:2px;background:var(--ink);border-radius:2px;transition:.3s}
/* Mobile nav lives in the drawer block further down; the old top-dropdown
   rules were removed because they fought it (both set .nav-links inset). */
@media(max-width:1024px){
  .burger{display:flex}
}

/* ===== HERO ===== */
.hero{position:relative;background:radial-gradient(125% 130% at 78% 0%,#3A1B73 0%,var(--deep) 42%,var(--ink) 100%);color:#fff;overflow:hidden;perspective:1200px}
#net{position:absolute;inset:0;width:100%;height:100%;opacity:.9;pointer-events:none;z-index:0}
.hero::after{content:"";position:absolute;inset:0;background:radial-gradient(60% 60% at 50% 38%,transparent 28%,rgba(21,12,43,.6) 100%);pointer-events:none}
.floaty{position:absolute;inset:0;pointer-events:none;z-index:1;transform-style:preserve-3d}
.floaty .obj{position:absolute;opacity:.55;filter:drop-shadow(0 20px 30px rgba(0,0,0,.4))}
.hero-inner{position:relative;z-index:2;display:flex;flex-direction:column;align-items:center;text-align:center;padding-block:clamp(96px,15vh,160px);min-height:92vh;justify-content:center;transform-style:preserve-3d}
.hero h1{font-family:var(--display);direction:ltr;font-weight:800;font-size:clamp(44px,8.6vw,96px);line-height:1.02;letter-spacing:-.02em;color:#fff}
.hero .fa-title{font-size:clamp(18px,3vw,26px);font-weight:500;color:#D8C8F2;margin-top:14px}
.pillars{display:flex;align-items:center;gap:clamp(14px,3vw,30px);margin-top:30px;flex-wrap:wrap;justify-content:center}
.pillars .p{font-weight:700;font-size:clamp(15px,2.2vw,19px);color:#fff}
.pillars .p small{display:block;font-family:var(--mono);direction:ltr;font-size:11px;letter-spacing:.16em;color:var(--lilac);font-weight:400;margin-top:2px}
[lang="ar"] .pillars .p small,[lang="zh"] .pillars .p small,[lang="ru"] .pillars .p small{font-family:var(--sans);direction:inherit}
.pillars .dot{width:6px;height:6px;border-radius:50%;background:var(--brand-3);box-shadow:0 0 16px var(--brand-3)}
.hero .lede{max-width:620px;margin-top:30px;font-size:clamp(16px,2.2vw,20px);color:#E2D6F5;line-height:1.85}
.hero-btns{display:flex;gap:14px;margin-top:38px;flex-wrap:wrap;justify-content:center}
.scroll-hint{pointer-events:none;position:absolute;bottom:26px;left:50%;transform:translateX(-50%);z-index:2;display:flex;flex-direction:column;align-items:center;gap:8px;font-family:var(--mono);direction:ltr;font-size:11px;letter-spacing:.2em;color:rgba(255,255,255,.55)}
.scroll-hint .m{width:22px;height:34px;border:1.5px solid rgba(255,255,255,.4);border-radius:12px;position:relative}
.scroll-hint .m::after{content:"";position:absolute;top:6px;left:50%;transform:translateX(-50%);width:3px;height:7px;background:var(--brand-3);border-radius:2px;animation:sc 1.8s infinite}
@keyframes sc{0%{opacity:0;transform:translate(-50%,0)}40%{opacity:1}80%{opacity:0;transform:translate(-50%,10px)}}

/* ===== PILLAR CARDS ===== */
.tilt-wrap{perspective:900px}
.pillar-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.pcard{background:var(--white);border:1px solid var(--line);border-radius:20px;padding:36px 30px;position:relative;overflow:hidden;transition:transform .2s ease,box-shadow .3s;transform-style:preserve-3d}
.pcard::before{content:"";position:absolute;inset-inline-start:0;top:0;height:3px;width:0;background:linear-gradient(90deg,var(--brand-3),var(--brand));transition:.45s}
.pcard:hover{box-shadow:var(--shadow)}
.pcard:hover::before{width:100%}
.pcard .ic{width:54px;height:54px;border-radius:14px;background:rgba(96,56,152,.09);display:grid;place-items:center;margin-bottom:22px;color:var(--brand);transform:translateZ(30px)}
.pcard h2,.pcard h3{font-size:22px;font-weight:800;margin-bottom:4px;transform:translateZ(18px)}
.pcard h2 .en,.pcard h3 .en{font-family:var(--mono);direction:ltr;display:block;font-size:12px;letter-spacing:.18em;color:var(--brand-text);font-weight:500;margin-bottom:6px}
[lang="ar"] .pcard h3 .en,[lang="zh"] .pcard h2 .en,.pcard h3 .en{font-family:var(--sans);direction:inherit}
.pcard p{color:var(--muted);font-size:15px;transform:translateZ(10px)}

/* ===== INTRO ===== */
.split{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(34px,6vw,72px);align-items:center}
.split>*{min-width:0}
.intro-txt h2{font-family:var(--head);font-weight:800;font-size:clamp(26px,4vw,42px);line-height:1.25;letter-spacing:-.01em}
.intro-txt p{color:var(--muted);margin-top:20px;font-size:clamp(15px,1.9vw,18px)}
.intro-txt .chips{display:flex;flex-wrap:wrap;gap:10px;margin-top:26px}
.chip{font-size:13px;font-weight:500;padding:8px 16px;border-radius:100px;background:rgba(96,56,152,.07);color:var(--brand);border:1px solid rgba(96,56,152,.16)}
.visual{position:relative;border-radius:24px;overflow:hidden;aspect-ratio:4/5;background:linear-gradient(150deg,var(--deep),var(--brand) 130%);box-shadow:var(--shadow);min-height:340px}
.visual svg{position:absolute;inset:0;width:100%;height:100%}
.visual .badge{position:absolute;inset-block-end:20px;inset-inline-start:20px;background:rgba(21,12,43,.55);backdrop-filter:blur(6px);border:1px solid var(--line-2);border-radius:14px;padding:14px 18px;color:#fff;max-width:78%}
.visual .badge .mono{font-size:11px;color:var(--lilac);display:block;margin-bottom:4px}
.visual .badge b{font-size:15px;font-weight:600}
.ph-note{position:absolute;top:14px;inset-inline-end:14px;font-family:var(--mono);direction:ltr;font-size:11px;letter-spacing:.12em;color:rgba(255,255,255,.5);background:rgba(21,12,43,.4);padding:5px 9px;border-radius:8px}

/* ===== ACTIVITIES ===== */
.acts{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.act{background:var(--white);border:1px solid var(--line);border-radius:18px;padding:30px 26px;transition:transform .25s,box-shadow .3s,border-color .3s}
.act:hover{box-shadow:var(--shadow-sm);border-color:rgba(96,56,152,.35)}
.act .ic{width:46px;height:46px;color:var(--brand);margin-bottom:18px}
.act .en{font-family:var(--latin-body);direction:ltr;font-weight:700;font-size:17px}
[lang="ar"] .act .en,[lang="zh"] .act .en,[lang="ru"] .act .en{font-family:var(--sans);direction:inherit}
.act .fa{color:var(--muted);font-size:14px;margin-top:6px}

/* ===== WHY ===== */
.why{background:var(--white)}
.why-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:18px 40px;margin-top:8px}
.why-item{display:flex;gap:16px;align-items:flex-start;padding:18px 0;border-bottom:1px solid var(--line)}
.why-item .tick{flex:none;width:34px;height:34px;border-radius:10px;background:rgba(96,56,152,.12);color:var(--brand);display:grid;place-items:center}
.why-item b{font-weight:600;font-size:16.5px}

/* ===== STATS ===== */
.stats{background:linear-gradient(160deg,var(--deep) 0%,var(--ink) 100%);color:#fff;position:relative;overflow:hidden}
.stats::before{content:"";position:absolute;inset:0;background:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="40" height="40"><circle cx="2" cy="2" r="1" fill="%239B6FD4" opacity="0.2"/></svg>')}
.stat-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:24px;position:relative;text-align:center}
.stat .num{font-family:var(--display);direction:ltr;font-weight:800;font-size:clamp(38px,5vw,58px);color:#fff;line-height:1}
.stat .lab{font-family:var(--mono);direction:ltr;font-size:11px;letter-spacing:.12em;color:var(--lilac);margin-top:12px;text-transform:uppercase}
[lang="ar"] .stat .lab,[lang="zh"] .stat .lab,[lang="ru"] .stat .lab{font-family:var(--sans);direction:inherit}
.stat .fa{font-size:14px;color:#C7B7E6;margin-top:6px}

/* ===== R&D ===== */
.rnd{background:radial-gradient(120% 120% at 15% 0%,#3A1B73,var(--ink) 80%);color:#fff;overflow:hidden;perspective:1000px}
.rnd-visual{position:relative;border-radius:24px;overflow:hidden;aspect-ratio:1/1;background:#1B0E3A;box-shadow:var(--shadow);min-height:320px}
.rnd-visual svg{position:absolute;inset:0;width:100%;height:100%}
.rnd-txt h2{font-weight:800;font-size:clamp(28px,4.4vw,46px);line-height:1.18;color:#fff}
.rnd-txt h2 .en{font-family:var(--display);direction:ltr;display:block;color:var(--brand-3);font-size:.55em;letter-spacing:.04em;margin-bottom:6px}
[lang="ar"] .rnd-txt h2 .en,[lang="zh"] .rnd-txt h2 .en,[lang="ru"] .rnd-txt h2 .en{font-family:var(--sans);direction:inherit}
.rnd-txt p{color:#D5C6EE;margin-top:20px;font-size:clamp(15px,1.9vw,18px)}
.rnd-stats{display:flex;gap:34px;margin-top:30px;flex-wrap:wrap}
.rnd-stats .rs b{font-family:var(--display);direction:ltr;font-size:30px;font-weight:800;color:var(--lilac)}
.rnd-stats .rs span{display:block;font-size:13px;color:#B6A6D6;margin-top:2px}

/* ===== THERAPEUTIC ===== */
.ther-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.ther{position:relative;border-radius:18px;overflow:hidden;padding:30px 26px;min-height:150px;display:flex;flex-direction:column;justify-content:flex-end;background:linear-gradient(160deg,#4A2487,#23104A);color:#fff;border:1px solid var(--line-2);transition:transform .3s,box-shadow .3s}
.ther:hover{box-shadow:var(--shadow)}
.ther .ic{position:absolute;top:22px;inset-inline-end:24px;color:var(--lilac);opacity:1}
.ther .en{font-family:var(--latin-body);direction:ltr;font-weight:700;font-size:19px}
[lang="ar"] .ther .en,[lang="zh"] .ther .en,[lang="ru"] .ther .en{font-family:var(--sans);direction:inherit}
.ther .fa{font-size:13px;color:var(--lilac);margin-top:4px}

/* ===== NEWS ===== */
.news-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.article{background:var(--white);border:1px solid var(--line);border-radius:20px;overflow:hidden;transition:transform .3s,box-shadow .3s;display:flex;flex-direction:column}
.article:hover{box-shadow:var(--shadow)}
.article .thumb{aspect-ratio:16/10;background:linear-gradient(150deg,var(--brand),var(--deep));position:relative;overflow:hidden}
.article .thumb svg{position:absolute;inset:0;width:100%;height:100%;opacity:.9}
.article .cat{position:absolute;top:14px;inset-inline-start:14px;font-family:var(--mono);direction:ltr;font-size:12px;letter-spacing:.12em;background:rgba(21,12,43,.5);color:var(--lilac);padding:5px 11px;border-radius:100px;backdrop-filter:blur(4px)}
[lang="ar"] .article .cat,[lang="zh"] .article .cat,[lang="ru"] .article .cat{font-family:var(--sans);direction:inherit}
.article .body{padding:24px;display:flex;flex-direction:column;gap:12px;flex:1}
.article .date{font-family:var(--mono);direction:ltr;font-size:11px;color:var(--muted)}
.article h3{font-size:18px;font-weight:700;line-height:1.5}
.article .more{margin-top:auto;color:var(--brand);font-weight:600;font-size:14px;display:inline-flex;gap:8px;align-items:center}

/* ===== CTA ===== */
.cta-band{background:linear-gradient(110deg,var(--brand),var(--deep));color:#fff;border-radius:28px;padding:clamp(40px,6vw,72px);display:flex;align-items:center;justify-content:space-between;gap:30px;flex-wrap:wrap;position:relative;overflow:hidden;box-shadow:var(--shadow)}
.cta-band svg.bg{position:absolute;inset:0;width:100%;height:100%;opacity:.28}
.cta-band .t{position:relative;z-index:2}
.cta-band h2{font-size:clamp(24px,3.5vw,38px);font-weight:800;line-height:1.3}
.cta-band p{color:#DACCEF;margin-top:10px;max-width:520px}
.cta-band .btns{position:relative;z-index:2;display:flex;gap:14px;flex-wrap:wrap}

/* ===== FOOTER ===== */
.brand img{height:44px;width:auto}

@media(max-width:980px){
  .pillar-grid,.acts,.ther-grid,.news-grid{grid-template-columns:repeat(2,1fr)}
  .stat-grid{grid-template-columns:repeat(3,1fr);gap:34px 20px}
  .split{grid-template-columns:1fr}
  .visual{aspect-ratio:16/10;order:-1;min-height:0}
  .rnd-visual{min-height:0}
  .why-grid{grid-template-columns:1fr;gap:0 40px}
}
@media(max-width:560px){
  .pillar-grid,.acts,.ther-grid,.news-grid{grid-template-columns:1fr}
  .stat-grid{grid-template-columns:1fr 1fr}
  .cta-band{flex-direction:column;align-items:flex-start}
}

/* ===== 3D STORY SCROLL ===== */
.story{position:relative;background:radial-gradient(120% 90% at 50% 0%,#2C1260 0%,var(--ink) 72%);color:#fff}
.story-track{position:relative;height:380vh}
.story-stage{position:sticky;top:0;height:100vh;display:grid;place-items:center;overflow:hidden;perspective:1100px}
.story-stage::after{content:"";position:absolute;inset:0;background:radial-gradient(58% 58% at 50% 50%,transparent 42%,rgba(21,12,43,.55));pointer-events:none}
.mol-stage{position:absolute;inset:0;z-index:1}
.mol-stage canvas{display:block;width:100%;height:100%}
.story-panels{position:absolute;inset:0;pointer-events:none;z-index:3}
.story-panel{position:absolute;top:50%;max-width:min(360px,40vw);opacity:0;transform:translateY(-50%);transition:opacity .5s ease,transform .6s cubic-bezier(.2,.7,.2,1)}
.story-panel.left{inset-inline-start:7%;transform:translateY(-50%) translateX(-26px)}
.story-panel.right{inset-inline-end:7%;text-align:end;transform:translateY(-50%) translateX(26px)}
.story-panel.active{opacity:1;transform:translateY(-50%) translateX(0)!important}
.story-panel .st-eyebrow{color:var(--lilac);font-size:11px;letter-spacing:.22em}
[lang="ar"] .story-panel .st-eyebrow,[lang="zh"] .story-panel .st-eyebrow{font-family:var(--sans);letter-spacing:.02em;direction:inherit;unicode-bidi:normal}
.story-panel h2,.story-panel h3{font-family:var(--head);font-size:clamp(24px,4vw,42px);font-weight:800;line-height:1.18;margin-top:14px}
.story-panel p{color:#D8CAF0;margin-top:10px;font-size:clamp(15px,1.8vw,18px)}
.story-num{position:absolute;top:9%;left:50%;transform:translateX(-50%);font-size:13px;letter-spacing:.3em;color:var(--lilac);opacity:.85;z-index:3}
.story-bar{position:absolute;bottom:7%;left:50%;transform:translateX(-50%);width:min(420px,68%);height:3px;background:rgba(255,255,255,.16);border-radius:3px;z-index:3}
.story-bar span{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--brand-3),var(--lilac));border-radius:3px;transition:width .12s linear}
@media(max-width:760px){
  .story-track{height:300vh}
  
  .story-panel{max-width:86%;inset-inline:7%!important;text-align:center!important;top:auto;bottom:15%;transform:none}
  .story-panel.left,.story-panel.right{transform:none}
  .story-panel.active{transform:none!important}
}
/* Polylang switcher links */
.lang-menu a{display:flex;align-items:center;gap:10px;width:100%;padding:10px 12px;border-radius:9px;font-size:14px;color:var(--ink);text-align:start}
.lang-menu a:hover{background:rgba(96,56,152,.08)}
.page-hero .eyebrow{color:var(--lilac)}
.df-content h2,.df-content h3{font-weight:800;margin:1.4em 0 .5em}
.df-content p{margin:0 0 1em;color:#3a3252}
.df-content img{border-radius:16px}

/* ================= ARTICLE / KNOWLEDGE ================= */
.art-hero{background:radial-gradient(120% 130% at 80% 0%,#3A1B73,var(--deep) 52%,var(--ink));color:#fff;padding-block:clamp(60px,9vw,108px)}
.breadcrumb{display:flex;gap:8px;flex-wrap:wrap;font-size:13px;color:rgba(255,255,255,.6);margin-bottom:18px}
.breadcrumb a{color:rgba(255,255,255,.72)}.breadcrumb a:hover{color:var(--lilac)}
.art-cat{display:inline-block;background:var(--brand-text);color:#fff;padding:6px 14px;border-radius:100px;font-size:12px;font-weight:600}
.art-title{font-weight:800;font-size:clamp(28px,4.6vw,50px);line-height:1.22;margin-top:16px;max-width:920px}
.art-meta{display:flex;align-items:center;gap:14px;margin-top:22px;color:#D8CAF0;font-size:14px;flex-wrap:wrap}
.am-author{display:inline-flex;align-items:center;gap:8px}.am-author img{width:34px;height:34px;border-radius:50%}
.dotsep{width:4px;height:4px;border-radius:50%;background:rgba(255,255,255,.4)}
.art-figure{margin-top:clamp(-70px,-5vw,-40px);margin-bottom:10px;position:relative;z-index:3}
.art-figure img{width:100%;border-radius:20px;box-shadow:var(--shadow);max-height:520px;object-fit:cover}
.art-layout{display:grid;grid-template-columns:minmax(0,1fr) 250px;gap:50px;align-items:start;padding-block:clamp(36px,5vw,64px)}
.df-article{order:1}
.art-side{order:2;position:sticky;top:96px;align-self:start}
.toc{background:#fff;border:1px solid var(--line);border-radius:16px;padding:20px}
.toc h4{font-size:14px;font-weight:700;margin-bottom:12px}
.toc nav a{display:block;font-size:13.5px;color:var(--muted);padding:6px 0;padding-inline-start:12px;border-inline-start:2px solid transparent;transition:.2s}
.toc nav a:hover,.toc nav a.active{color:var(--brand);border-inline-start-color:var(--brand)}
.toc nav a.lvl3{padding-inline-start:24px;font-size:12.5px}
.share{display:flex;align-items:center;gap:10px;margin-top:20px;flex-wrap:wrap}
.share-l{font-size:13px;color:var(--muted);width:100%;margin-bottom:2px}
.share a,.copy-link{width:44px;height:44px;cursor:pointer;border-radius:10px;border:1px solid var(--line);display:grid;place-items:center;color:var(--brand);background:#fff;cursor:pointer;transition:.2s}
.share a:hover,.copy-link:hover,.copy-link.copied{background:var(--brand);color:#fff;border-color:var(--brand)}
/* article body typography */
.df-article{font-size:17px;line-height:2.05;color:#2b2440;max-width:760px}
.df-article > *{margin-bottom:1.3em}
.df-article h2{font-size:clamp(22px,3vw,30px);font-weight:800;line-height:1.32;margin-top:1.6em;color:var(--ink);scroll-margin-top:96px}
.df-article h3{font-size:clamp(19px,2.4vw,23px);font-weight:700;margin-top:1.4em;color:var(--ink);scroll-margin-top:96px}
.df-article a{color:var(--brand);text-decoration:underline;text-underline-offset:3px}
.df-article ul,.df-article ol{padding-inline-start:1.4em}
.df-article li{margin-bottom:.5em}
.df-article blockquote{margin-inline:0;padding:18px 24px;border-inline-start:4px solid var(--brand);background:rgba(96,56,152,.06);border-radius:0 12px 12px 0;color:#3a3252}
[dir="ltr"] .df-article blockquote{border-radius:12px 0 0 12px}
.df-article figure{margin-inline:0}
.df-article img,.df-article figure img{border-radius:16px;width:100%;height:auto}
.df-article figcaption{font-size:13px;color:var(--muted);text-align:center;margin-top:8px}
.df-article pre{background:var(--ink);color:#E4D7F6;padding:18px;border-radius:14px;overflow:auto;direction:ltr;font-family:var(--mono);font-size:14px}
.df-article code{background:rgba(96,56,152,.1);padding:2px 7px;border-radius:6px;font-family:var(--mono);font-size:.9em;direction:ltr;unicode-bidi:isolate}
.df-article pre code{background:none;padding:0}
.df-article table{width:100%;border-collapse:collapse;font-size:15px}
.df-article th,.df-article td{border:1px solid var(--line);padding:10px 14px;text-align:start}
.df-article th{background:rgba(96,56,152,.06);font-weight:700}
.df-article hr{border:0;border-top:1px solid var(--line)}
.art-tags{display:flex;gap:8px;flex-wrap:wrap;margin-top:30px}
.art-tags a{font-size:13px;padding:6px 14px;border-radius:100px;background:rgba(96,56,152,.07);color:var(--brand);border:1px solid rgba(96,56,152,.15)}
.author-box{display:flex;gap:18px;align-items:flex-start;margin-top:40px;padding:24px;border:1px solid var(--line);border-radius:18px;background:#fff}
.author-box img{width:64px;height:64px;border-radius:50%;flex:none}
.author-box .ab-label{font-family:var(--mono);font-size:12px;letter-spacing:.1em;color:var(--brand-text);display:block}
.author-box strong{font-size:18px;display:block;margin:4px 0}
.author-box p{color:var(--muted);font-size:14.5px;margin:0}
/* knowledge index */
.cat-pills{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:40px}
.pill{font-size:14px;min-height:44px;display:inline-flex;align-items:center;padding:9px 18px;cursor:pointer;border-radius:100px;border:1px solid var(--line);color:#3a3252;transition:.2s}
.pill:hover{border-color:var(--brand);color:var(--brand)}
.pill.active{background:var(--brand);color:#fff;border-color:var(--brand)}
.feat-post{display:grid;grid-template-columns:1.2fr 1fr;border:1px solid var(--line);border-radius:22px;overflow:hidden;background:#fff;transition:transform .3s,box-shadow .3s}
.feat-post:hover{box-shadow:var(--shadow)}
.feat-img{position:relative;min-height:300px;background:linear-gradient(150deg,var(--brand),var(--deep))}
.feat-img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.feat-img .cat{position:absolute;top:16px;inset-inline-start:16px;font-family:var(--mono);direction:ltr;font-size:11px;background:rgba(21,12,43,.5);color:var(--lilac);padding:6px 12px;border-radius:100px;backdrop-filter:blur(4px)}
.feat-body{padding:clamp(26px,3vw,44px);display:flex;flex-direction:column;justify-content:center}
.feat-body .date{font-family:var(--mono);direction:ltr;font-size:12px;color:var(--muted)}
.feat-body h2{font-size:clamp(22px,3vw,32px);font-weight:800;line-height:1.3;margin:12px 0}
.feat-body p{color:var(--muted);font-size:15px}
.feat-body .more{margin-top:18px;color:var(--brand);font-weight:600}
.df-pagination .page-numbers{display:inline-grid;place-items:center;min-width:42px;height:42px;padding:0 6px;border-radius:10px;border:1px solid var(--line);margin:0 3px;color:var(--ink)}
.df-pagination .page-numbers.current{background:var(--brand);color:#fff;border-color:var(--brand)}
.df-pagination .page-numbers:hover{border-color:var(--brand)}
@media(max-width:900px){
  .art-layout{grid-template-columns:1fr;gap:24px}
  .art-side{order:-1;position:static}
  .toc{display:none}
  .feat-post{grid-template-columns:1fr}
  .feat-img{min-height:210px}
}

/* ============ INNER PAGES (about / contact) ============ */
.mv-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px}
.mv-card{background:#fff;border:1px solid var(--line);border-radius:20px;padding:clamp(26px,3vw,36px)}
.mv-ic{width:56px;height:56px;border-radius:14px;display:grid;place-items:center;background:rgba(96,56,152,.08);color:var(--brand);margin-bottom:18px}
.mv-card h2{font-size:22px;font-weight:800;margin-bottom:10px}
.mv-card p{color:var(--muted);line-height:2}
.ceo-grid{display:grid;grid-template-columns:300px 1fr;gap:48px;align-items:center}
.ceo-photo{aspect-ratio:1;border-radius:24px;overflow:hidden;background:linear-gradient(150deg,#3A1B73,#150C2B);display:grid;place-items:center}
.ceo-photo img{width:100%;height:100%;object-fit:cover}
.ceo-msg .eyebrow{color:var(--lilac)}
.ceo-msg blockquote{font-size:clamp(19px,2.4vw,26px);line-height:1.7;font-weight:600;margin:18px 0;color:#fff;border:0;padding:0}
.ceo-sign strong{display:block;font-size:17px;color:#fff}
.ceo-sign span{color:#C9B3EC;font-size:14px}
.contact-grid{display:grid;grid-template-columns:340px 1fr;gap:40px;align-items:start}
.contact-info{display:flex;flex-direction:column;gap:22px}
.ci-row{display:flex;gap:14px;align-items:flex-start}
.ci-ic{width:44px;height:44px;border-radius:12px;background:rgba(96,56,152,.08);color:var(--brand);display:grid;place-items:center;flex:none}
.ci-row b{display:block;margin-bottom:3px}
.ci-row p{color:var(--muted);line-height:1.8;margin:0}
.contact-form{background:#fff;border:1px solid var(--line);border-radius:20px;padding:clamp(24px,3vw,38px)}
.df-form{display:flex;flex-direction:column;gap:16px}
.ff{display:flex;flex-direction:column;gap:7px}
.ff label{font-size:13.5px;color:#3a3252;font-weight:600}
.ff input,.ff textarea{border:1px solid var(--line);border-radius:11px;padding:12px 14px;font-family:inherit;font-size:15px;background:#fff;color:var(--ink);transition:border-color .2s}
.ff input:focus,.ff textarea:focus{outline:none;border-color:var(--brand)}
.ff-row{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.df-form .btn{margin-top:6px;align-self:flex-start}
.form-note{padding:13px 16px;border-radius:12px;margin-bottom:18px;font-size:14.5px}
.form-note.ok{background:rgba(34,160,90,.1);color:#1d7a45;border:1px solid rgba(34,160,90,.25)}
.form-note.err{background:rgba(200,60,60,.08);color:#b03535;border:1px solid rgba(200,60,60,.2)}
.contact-map{margin-top:44px}
@media(max-width:860px){
  .mv-grid{grid-template-columns:1fr}
  .ceo-grid{grid-template-columns:1fr;gap:28px}
  .ceo-photo{max-width:240px}
  .contact-grid{grid-template-columns:1fr}
  .ff-row{grid-template-columns:1fr}
}

/* ==========================================================================
   3.0 additions — accessibility, the templates that used to be missing, and
   the utility classes that replace 72 inline style attributes.
   ========================================================================== */

/* --- accessibility --- */
.skip-link{position:absolute;inset-inline-start:-9999px;top:0;z-index:999;background:var(--brand);color:#fff;padding:12px 22px;border-radius:0 0 12px 0;font-weight:700}
.skip-link:focus{inset-inline-start:0}
.screen-reader-text{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
:focus-visible{outline:3px solid var(--brand-3);outline-offset:3px;border-radius:4px}
.on-dark :focus-visible,.page-hero :focus-visible{outline-color:var(--lilac-soft)}
.cf-hp{position:absolute!important;left:-9999px;width:1px;height:1px;overflow:hidden}

/* --- shared page hero (was an inline gradient repeated in 8 templates) --- */
.page-hero{background:radial-gradient(120% 130% at 80% 0%,#3A1B73,var(--deep) 50%,var(--ink));color:#fff;padding-block:clamp(76px,12vw,140px)}
.page-hero h1{font-family:var(--head);font-weight:800;font-size:clamp(30px,5vw,52px);margin-top:16px;line-height:1.2}
.page-hero .hero-lede{color:#D8CAF0;margin-top:16px;max-width:640px;font-size:clamp(15px,2vw,17px)}

/* --- utilities replacing inline styles --- */
.wrap.narrow,.narrow{max-width:880px;margin-inline:auto}
.mt{margin-top:22px}
.btn-row{display:flex;gap:14px;flex-wrap:wrap;margin-top:30px}
.big{font-size:clamp(15px,2vw,17px)}
.acts.spaced,.news-grid.spaced{margin-top:46px}
.sec-head.row{display:flex;justify-content:space-between;align-items:flex-end;max-width:100%;flex-wrap:wrap;gap:20px}
img.cover,.cover{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.visual,.rnd-visual,.feat-img,.article .thumb,.ceo-photo{position:relative;overflow:hidden}
.ceo-band{background:radial-gradient(120% 130% at 15% 0%,#2C1260,var(--ink) 70%)}
.act .dsc{color:var(--muted);font-size:14px;margin-top:8px}
.form-title{font-size:22px;font-weight:800;margin-bottom:18px}
.hero .fa-title{margin-top:14px}

/* --- 3D disabled fallback --- */

/* --- blog layout + sidebar --- */
.blog-layout{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:44px;align-items:start}
.df-sidebar{position:sticky;top:100px;display:grid;gap:26px}
.df-sidebar .widget{background:#fff;border:1px solid var(--line);border-radius:18px;padding:22px}
.widget-title{font-size:15px;font-weight:800;margin-bottom:12px}
.df-sidebar ul{list-style:none;display:grid;gap:8px}
.df-sidebar a{color:var(--muted);font-size:14px}
.df-sidebar a:hover{color:var(--brand)}
@media (max-width:960px){.blog-layout{grid-template-columns:1fr}.df-sidebar{position:static}}

/* --- search --- */
.df-search{display:flex;gap:10px;flex-wrap:wrap;margin-top:16px;max-width:520px}
.df-search input[type="search"]{flex:1;min-width:200px;padding:13px 18px;border:1px solid var(--line);border-radius:100px;font:inherit;background:#fff;color:inherit}
.df-search input[type="search"]:focus{border-color:var(--brand-3);outline:none;box-shadow:0 0 0 3px rgba(155,111,212,.25)}

/* --- pagination --- */
.df-pagination{margin-top:44px}
.df-pagination .nav-links{display:flex;gap:8px;justify-content:center;flex-wrap:wrap}
.df-pagination .page-numbers{min-width:42px;height:42px;display:inline-flex;align-items:center;justify-content:center;border-radius:12px;border:1px solid var(--line);font-weight:600;font-size:14px}
.df-pagination .page-numbers.current{background:var(--brand);border-color:var(--brand);color:#fff}
.df-pagination .page-numbers:hover:not(.current){border-color:var(--brand);color:var(--brand)}

/* --- comments --- */
.df-comments{margin-top:56px;padding-top:40px;border-top:1px solid var(--line)}
.comments-title{font-size:22px;font-weight:800;margin-bottom:24px}
.comment-list,.comment-list .children{list-style:none;display:grid;gap:22px}
.comment-list .children{margin-top:22px;padding-inline-start:24px;border-inline-start:2px solid var(--line)}
.comment-body{background:#fff;border:1px solid var(--line);border-radius:16px;padding:20px}
.comment-meta{display:flex;align-items:center;gap:10px;font-size:13px;color:var(--muted);margin-bottom:10px}
.comment-meta img{border-radius:50%}
.comment-form{margin-top:34px;display:grid;gap:16px}
.comment-form label{display:block;font-size:14px;font-weight:600;margin-bottom:6px}
.comment-form input[type="text"],.comment-form input[type="email"],.comment-form input[type="url"],.comment-form textarea{width:100%;padding:13px 16px;border:1px solid var(--line);border-radius:14px;font:inherit;background:#fff}
.comment-form textarea{border-radius:18px;resize:vertical}
.no-comments{color:var(--muted)}

/* --- footer widgets --- */

/* --- reduced motion: kill every decorative transform --- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
  .s3d{opacity:1!important;transform:none!important}
}

/* floating hero objects: positions moved out of inline style attributes */
.floaty .obj-1{top:18%;inset-inline-start:12%}
.floaty .obj-2{top:64%;inset-inline-start:8%}
.floaty .obj-3{top:26%;inset-inline-end:14%}
.floaty .obj-4{top:70%;inset-inline-end:10%}

/* ==========================================================================
   4.0 — premium layer
   Header, footer, card surfaces, motion and the mobile story section.
   Everything below uses the token layer, so re-skinning is a token edit.
   ========================================================================== */

/* ---------------- top bar ---------------- */
.topbar{background:var(--ink);color:#B7ADD0;font-size:13px;border-bottom:1px solid var(--line-2)}
.topbar-inner{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:42px;flex-wrap:wrap}
.topbar-note{color:#9C92B8}
.topbar-contact{display:flex;gap:20px;flex-wrap:wrap}
.topbar-contact a{display:inline-flex;align-items:center;gap:7px;color:#CFC4E6;transition:color var(--t-fast) var(--ease)}
.topbar-contact a:hover{color:var(--gold-2)}
@media (max-width:640px){.topbar-note{display:none}.topbar-inner{justify-content:center}}

/* ---------------- header ---------------- */
.nav-static .nav{position:relative}
.nav{
  background:rgba(247,245,251,.72);
  backdrop-filter:saturate(180%) blur(18px);
  -webkit-backdrop-filter:saturate(180%) blur(18px);
  border-bottom:1px solid transparent;
  transition:background var(--t-base) var(--ease),border-color var(--t-base) var(--ease),box-shadow var(--t-base) var(--ease);
}
.nav.scrolled{background:rgba(247,245,251,.94);border-bottom-color:var(--line);box-shadow:var(--shadow-1)}
.nav-inner{display:flex;align-items:center;justify-content:space-between;gap:24px;min-height:72px}
.brand{display:inline-flex;align-items:center;flex:0 0 auto}
.brand img{width:auto;max-height:64px}

.nav-links a{
  position:relative;font-weight:600;font-size:15px;color:#3B3355;padding:6px 2px;
  transition:color var(--t-fast) var(--ease);
}
.nav-links a::after{
  content:"";position:absolute;inset-inline-start:0;bottom:0;height:2px;width:0;border-radius:2px;
  background:linear-gradient(90deg,var(--brand),var(--gold));
  transition:width var(--t-base) var(--ease-out);
}
.nav-links a:hover{color:var(--brand)}
.nav-links a:hover::after,.nav-links a[aria-current]::after,.nav-links .current-menu-item>a::after{width:100%}
.nav-links-foot{display:none}

/* scroll-progress hairline under the header */
.nav-progress{display:block;height:2px;width:0;background:linear-gradient(90deg,var(--brand-2),var(--gold));transition:width .1s linear}

.nav-btn{padding:11px 22px;font-size:14px}
.lang-btn{background:rgba(96,56,152,.07);transition:background var(--t-fast) var(--ease),border-color var(--t-fast) var(--ease)}
.lang-btn:hover{background:rgba(96,56,152,.13);border-color:var(--brand-3)}
.lang-menu{border-radius:var(--r-md);box-shadow:var(--shadow-2);overflow:hidden;padding:6px}
.lang-menu a{display:block;padding:10px 16px;border-radius:var(--r-sm);font-size:14px;transition:background var(--t-fast) var(--ease)}
.lang-menu a:hover{background:var(--paper)}
.lang-menu a[aria-current]{background:var(--brand);color:#fff}

/* mobile drawer */
.nav-scrim{position:fixed;inset:0;background:rgba(20,11,39,.5);backdrop-filter:blur(3px);z-index:55;opacity:0;transition:opacity var(--t-base) var(--ease)}
.nav-scrim.on{opacity:1}
@media (max-width:1024px){
  .nav-btn{display:none}
  .nav-links{
    position:fixed;inset-block:0;inset-inline-end:0;width:min(340px,86vw);
    flex-direction:column;align-items:stretch;justify-content:flex-start;gap:4px;
    background:var(--paper-2);padding:88px 26px 32px;z-index:60;
    transform:translateX(var(--drawer-out,110%));
    transition:transform var(--t-slow) var(--ease-out);
    box-shadow:var(--shadow-3);overflow-y:auto;inset-block-start:0;
  }
  [dir="rtl"] .nav-links{--drawer-out:-110%}
  .nav-links.open{transform:translateX(0)}
  .nav-links a{padding:14px 6px;font-size:16px;border-bottom:1px solid var(--line);min-height:44px;display:flex;align-items:center}
  .nav-links a::after{display:none}
  .nav-links-foot{display:block;margin-top:22px}
  .btn-block{display:flex;width:100%;justify-content:center}
}

/* ---------------- buttons ---------------- */
.btn{
  position:relative;overflow:hidden;letter-spacing:.005em;
  transition:transform var(--t-fast) var(--ease),box-shadow var(--t-base) var(--ease),background var(--t-base) var(--ease),color var(--t-base) var(--ease),border-color var(--t-base) var(--ease);
}
.btn:hover{transform:translateY(-2px)}
.btn:active{transform:translateY(0)}
.btn-primary{background:linear-gradient(135deg,var(--brand-2),var(--brand));color:#fff;box-shadow:var(--shadow-2)}
.btn-primary:hover{box-shadow:var(--glow)}
.btn-gold{background:linear-gradient(135deg,var(--gold-2),var(--gold));color:#221602;font-weight:800;box-shadow:0 14px 32px -18px rgba(201,162,39,.9)}
.btn-gold:hover{box-shadow:0 18px 40px -18px rgba(201,162,39,1)}
/* sheen sweep, suppressed under reduced-motion by the block at the end of this file */
.btn::before{
  content:"";position:absolute;inset:0;
  background:linear-gradient(120deg,transparent 30%,rgba(255,255,255,.28) 50%,transparent 70%);
  transform:translateX(-120%);
}
.btn:hover::before{transform:translateX(120%);transition:transform .7s var(--ease-out)}

/* ---------------- card surfaces ---------------- */
.pcard,.act,.article,.mv-card,.feat-post{
  border-radius:var(--r-lg);
  box-shadow:var(--shadow-1);
  transition:transform var(--t-base) var(--ease),box-shadow var(--t-base) var(--ease),border-color var(--t-base) var(--ease);
}
.pcard:hover,.act:hover,.article:hover,.mv-card:hover,.feat-post:hover{
  transform:translateY(-5px);box-shadow:var(--shadow-3);border-color:rgba(155,111,212,.35);
}
/* hairline that lights up on hover — one detail, repeated, reads as considered */
.act,.mv-card{position:relative;overflow:hidden}
.act::after,.mv-card::after{
  content:"";position:absolute;inset-inline:0;top:0;height:2px;
  background:linear-gradient(90deg,transparent,var(--brand-3),var(--gold),transparent);
  opacity:0;transition:opacity var(--t-base) var(--ease);
}
.act:hover::after,.mv-card:hover::after{opacity:1}
.act .ic,.mv-ic{color:var(--brand-text);transition:transform var(--t-base) var(--ease-out),color var(--t-base) var(--ease)}
.act:hover .ic,.mv-card:hover .mv-ic{transform:scale(1.08) rotate(-4deg);color:var(--brand)}

.ther{border-radius:var(--r-lg);box-shadow:var(--shadow-2);transition:transform var(--t-base) var(--ease),box-shadow var(--t-base) var(--ease)}
.ther:hover{transform:translateY(-5px);box-shadow:var(--shadow-3)}
.ther::after{content:"";position:absolute;inset:0;background:radial-gradient(120% 90% at 80% 0%,rgba(201,162,39,.16),transparent 60%);opacity:0;transition:opacity var(--t-slow) var(--ease)}
.ther:hover::after{opacity:1}

/* gold hairline above section headings */
.sec-head .eyebrow,.page-hero .eyebrow{position:relative;display:inline-block;padding-inline-start:34px}
.sec-head .eyebrow::before,.page-hero .eyebrow::before{
  content:"";position:absolute;inset-inline-start:0;top:50%;width:24px;height:1px;
  background:linear-gradient(90deg,var(--gold),transparent);
}

/* ---------------- readability ---------------- */
body{color:var(--ink);line-height:1.8;letter-spacing:.002em}
.sec-head p,.intro-txt p,.act .dsc,.df-article p{color:var(--muted)}
.df-article{font-size:17px;line-height:2}
.df-article h2,.df-article h3{font-family:var(--head);color:var(--ink);letter-spacing:-.01em}
.df-article a{color:var(--brand-text);text-underline-offset:4px;text-decoration-thickness:1px}
.df-article a:hover{color:var(--brand)}
.hero .lede{color:#D7CBEE}
.page-hero .hero-lede{color:#DCD1F0}

/* ---------------- footer ---------------- */

/* back to top */
.to-top{
  position:fixed;inset-block-end:24px;inset-inline-end:24px;z-index:50;
  width:46px;height:46px;border-radius:50%;border:1px solid var(--line);
  background:var(--paper-2);color:var(--brand);cursor:pointer;
  display:grid;place-items:center;box-shadow:var(--shadow-2);
  opacity:0;transform:translateY(12px);pointer-events:none;
  transition:opacity var(--t-base) var(--ease),transform var(--t-base) var(--ease),background var(--t-fast) var(--ease);
}
.to-top.on{opacity:1;transform:none;pointer-events:auto}
.to-top:hover{background:var(--brand);color:#fff}

/* ---------------- staggered reveal ---------------- */
.js .s3d{opacity:0;transform:translateY(22px);transition:opacity .6s var(--ease-out),transform .6s var(--ease-out)}
.js .s3d.in{opacity:1;transform:none}
.acts .s3d:nth-child(2),.why-grid .s3d:nth-child(2),.ther-grid .s3d:nth-child(2),.news-grid .s3d:nth-child(2){transition-delay:.06s}
.acts .s3d:nth-child(3),.why-grid .s3d:nth-child(3),.ther-grid .s3d:nth-child(3),.news-grid .s3d:nth-child(3){transition-delay:.12s}
.acts .s3d:nth-child(4),.why-grid .s3d:nth-child(4),.ther-grid .s3d:nth-child(4){transition-delay:.18s}
.acts .s3d:nth-child(5),.why-grid .s3d:nth-child(5),.ther-grid .s3d:nth-child(5){transition-delay:.24s}
.acts .s3d:nth-child(6),.why-grid .s3d:nth-child(6),.ther-grid .s3d:nth-child(6){transition-delay:.3s}

/* ---------------- story section on small screens ----------------
   The 3D molecule stays on mobile. The problem there was never the canvas,
   it was the text sitting directly on top of a moving, variably-lit scene:
   contrast changed frame to frame and the copy became unreadable. The panel
   now carries its own dark scrim, so the text has a guaranteed background
   regardless of what the molecule is doing behind it. */
@media (max-width:1024px){
  .story-track{height:320vh}
  .story-stage{perspective:none}

  /* keep the molecule, push it up so it never sits behind the copy */
  .mol-stage{inset:0 0 34% 0}
  .story-stage::after{background:linear-gradient(180deg,rgba(20,11,39,.15) 0%,rgba(20,11,39,.35) 45%,rgba(20,11,39,.92) 78%)}

  .story-panel{
    position:absolute;inset-inline:16px!important;top:auto;bottom:12%;
    max-width:none;text-align:start!important;
    transform:translateY(14px);
    background:linear-gradient(180deg,rgba(28,16,58,.86),rgba(20,11,39,.94));
    border:1px solid rgba(255,255,255,.14);
    border-radius:var(--r-lg);
    padding:20px 20px 22px;
    backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
    box-shadow:0 20px 44px -26px rgba(0,0,0,.8);
  }
  .story-panel.left,.story-panel.right{transform:translateY(14px)}
  .story-panel.active{transform:translateY(0)!important}

  /* readability: brighter than the desktop values, all well above 7:1 */
  .story-panel h2,.story-panel h3{font-size:clamp(21px,5.6vw,28px);margin-top:8px;color:#fff}
  .story-panel p{font-size:15px;line-height:1.85;color:#E6DCF7;margin-top:8px}
  .story-panel .st-eyebrow{color:var(--gold-2);font-size:11px}

  .story-num{top:auto;bottom:calc(12% + 6px);left:auto;inset-inline-end:26px;transform:none;font-size:12px;color:var(--gold-2);opacity:1;z-index:4}
  .story-bar{bottom:5%;width:min(300px,72%)}
}

/* Very small screens: the canvas gets a smaller slice so the copy always fits. */
@media (max-width:520px){
  .story-track{height:300vh}
  .mol-stage{inset:0 0 46% 0}
  .story-panel{bottom:9%;padding:18px 16px 20px}
  .story-panel p{font-size:14.5px}
}

/* When the 3D layer is switched off in the Customizer, the same section
   degrades to a plain stack rather than an empty sticky stage. */
.story.no-3d .story-track{height:auto}
.story.no-3d .story-stage{position:relative;height:auto;padding-block:clamp(56px,9vw,100px);display:block}
.story.no-3d .story-stage::after,.story.no-3d .story-num,.story.no-3d .story-bar{display:none}
.story.no-3d .story-panels{position:relative;display:grid;gap:18px;max-width:760px;margin-inline:auto;padding-inline:20px;pointer-events:auto}
.story.no-3d .story-panel{
  position:relative!important;inset:auto!important;opacity:1!important;transform:none!important;
  max-width:100%;text-align:start;bottom:auto;
  background:rgba(255,255,255,.06);border:1px solid var(--line-2);
  border-radius:var(--r-lg);padding:24px 22px;backdrop-filter:none;box-shadow:none;
}

/* ---------------- section rhythm ---------------- */
.sec{padding-block:clamp(64px,9vw,116px)}
.sec-head{max-width:720px}
.sec-head h2{margin-top:16px}

/* ---------------- reduced motion wins over everything above ---------------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
  .s3d{opacity:1!important;transform:none!important}
  .btn::before{display:none}
  .btn:hover,.act:hover,.pcard:hover,.article:hover,.ther:hover,.socials a:hover{transform:none}
}

/* burger morphs into a close icon while the drawer is open */
.burger span{transition:transform var(--t-base) var(--ease),opacity var(--t-fast) var(--ease)}
.burger.is-open span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.burger.is-open span:nth-child(2){opacity:0}
.burger.is-open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* Auto-built footer column shown when no footer menu is assigned yet */


/* Gradient text is applied only where background-clip:text works. Without this
   guard the declaration leaves color:transparent standing on browsers that
   ignore it — the headline and the stat counters render invisible, which is
   exactly what happened in some Android in-app browsers. */
@supports ((-webkit-background-clip:text) or (background-clip:text)){
  .hero h1{
    background:linear-gradient(180deg,#fff,#E2D5F6);
    -webkit-background-clip:text;background-clip:text;
    -webkit-text-fill-color:transparent;color:transparent;
  }
  .stat .num{
    background:linear-gradient(180deg,#fff,#C9B3EC);
    -webkit-background-clip:text;background-clip:text;
    -webkit-text-fill-color:transparent;color:transparent;
  }
}


/* Nothing decorative may intercept a tap. Two of these were sitting on top of
   real buttons on short mobile viewports, which made the hero CTAs feel dead. */
.hero-video,#net,.floaty,.scroll-hint,.cta-band .bg,.ther::after,.story-stage::after{pointer-events:none}
.hero-inner,.hero-btns,.nav-inner{position:relative;z-index:3}
.hero-btns .btn{pointer-events:auto}

/* On short screens the scroll hint has nowhere to go without colliding. */
@media (max-height:760px) and (max-width:1024px){
  .scroll-hint{display:none}
  .hero-inner{min-height:auto;padding-block:clamp(72px,12vh,120px)}
}


/* ==========================================================================
   4.1 — mobile fixes
   ========================================================================== */

/* ---- THE mobile menu bug ----------------------------------------------
   backdrop-filter on the header established a containing block for its
   position:fixed descendants, so the drawer was being positioned against the
   72px header box instead of the viewport: it rendered as a thin sliver and
   looked like the menu simply did not open. Dropping the filter below 1024px
   restores real viewport-fixed positioning (and is cheaper on a phone). */
@media (max-width:1024px){
  header.nav,.nav{
    backdrop-filter:none!important;-webkit-backdrop-filter:none!important;
    background:rgba(247,245,251,.98);
  }
  header.nav.scrolled,.nav.scrolled{background:#F7F5FB}

  .nav-links{
    position:fixed!important;
    inset-block:0!important;inset-inline-end:0!important;inset-inline-start:auto!important;
    width:min(340px,86vw);height:100dvh;
    display:flex!important;flex-direction:column;align-items:stretch;justify-content:flex-start;
    gap:2px;background:var(--paper-2);padding:26px 24px 32px;
    z-index:70;overflow-y:auto;-webkit-overflow-scrolling:touch;
    box-shadow:var(--shadow-3);border-inline-start:1px solid var(--line);
    transform:translateX(var(--drawer-out,110%));
    transition:transform var(--t-slow) var(--ease-out);
    visibility:hidden;
  }
  [dir="rtl"] .nav-links{--drawer-out:-110%;border-inline-start:0;border-inline-end:1px solid var(--line)}
  .nav-links.open{transform:translateX(0);visibility:visible}

  /* header row inside the drawer, so there is always a visible way back out */
  .nav-links::before{
    content:"";display:block;height:8px;
  }
  .nav-links a{
    padding:15px 4px;font-size:16px;font-weight:600;color:#2E2748;
    border-bottom:1px solid var(--line);min-height:52px;display:flex;align-items:center;
  }
  .nav-links a::after{display:none}
  .nav-links a:last-of-type{border-bottom:0}
  .nav-links-foot{display:block;margin-top:20px}
  .btn-block{display:flex;width:100%;justify-content:center}
  .nav-btn{display:none}
  .burger{display:flex}
}

/* Body lock while the drawer is open, without the page jumping. */
body.df-locked{overflow:hidden;touch-action:none}

/* ---- 3D story on mobile: same idea as desktop, laid out for a phone ----
   The molecule keeps a square-ish stage of its own at the top so the camera
   never has to frame it through a tall narrow viewport, and the copy sits in
   a card below it rather than on top of it. */
@media (max-width:1024px){
  .story-track{height:340vh}
  .story-stage{
    position:sticky;top:0;height:100dvh;display:flex;flex-direction:column;
    align-items:stretch;justify-content:flex-start;padding:0;perspective:none;
  }
  /* darker surround, clear centre: the molecule gains contrast instead of
     being flattened by an even wash across the whole stage */
  .story-stage::after{
    background:radial-gradient(58% 34% at 50% 28%,transparent 45%,rgba(13,7,25,.72) 100%);
  }

  .mol-stage{position:relative;inset:auto;flex:0 0 52dvh;width:100%;z-index:1}

  .story-panels{position:relative;inset:auto;flex:1 1 auto;z-index:3;pointer-events:none;padding:0 18px 18px;display:flex;align-items:center}
  .story-panel{
    position:absolute;inset-inline:18px;top:50%;bottom:auto;
    transform:translateY(calc(-50% + 16px));
    max-width:none;text-align:start!important;
    background:linear-gradient(180deg,rgba(34,20,68,.9),rgba(20,11,39,.96));
    border:1px solid rgba(201,162,39,.22);
    border-radius:var(--r-lg);padding:22px 20px 24px;
    box-shadow:0 24px 50px -28px rgba(0,0,0,.9);
  }
  .story-panel.left,.story-panel.right{transform:translateY(calc(-50% + 16px))}
  .story-panel.active{transform:translateY(-50%)!important}

  .story-panel .st-eyebrow{color:var(--gold-2);font-size:11px;letter-spacing:.16em}
  .story-panel h2,.story-panel h3{font-size:clamp(21px,5.8vw,28px);margin-top:9px;color:#fff;line-height:1.28}
  .story-panel p{font-size:15px;line-height:1.85;color:#E8DFF8;margin-top:9px}

  .story-num{top:14px;left:auto;inset-inline-start:20px;transform:none;font-size:12px;color:var(--gold-2);opacity:1;z-index:4}
  .story-bar{bottom:14px;width:min(280px,70%)}
}

@media (max-width:520px){
  .story-track{height:320vh}
  .mol-stage{flex-basis:46dvh}
  .story-panel{padding:18px 16px 20px;inset-inline:14px}
  .story-panel p{font-size:14.5px}
}

/* Short landscape phones: the molecule would squash the copy, so it steps back. */
@media (max-height:520px) and (max-width:1024px){
  .mol-stage{flex-basis:34dvh}
  .story-panel p{display:none}
}


/* ---------------- footer: contact block + map ---------------- */


/* Footer grid: brand column is wider, the rest share the remainder. */

/* ==========================================================================
   FOOTER — single source of truth.
   Rewritten in 4.2 after three rounds of appending had left 52 overlapping
   declarations fighting each other. The premium feel here comes from four
   things, none of them decoration for its own sake:
     1. a layered background (gradient + two soft radial glows + hairline)
        so the surface has depth instead of being one flat block of colour
     2. a real typographic hierarchy — display face for headings, uppercase
        micro-labels, one gold accent per column
     3. deliberate rhythm: a wide brand column against narrow link columns
     4. restrained motion — nothing moves more than a few pixels
   ========================================================================== */

.site-footer{
  position:relative;isolation:isolate;
  background:
    radial-gradient(80% 55% at 12% 0%,rgba(96,56,152,.30),transparent 60%),
    radial-gradient(60% 50% at 88% 12%,rgba(201,162,39,.09),transparent 62%),
    linear-gradient(180deg,var(--ink-2) 0%,var(--ink) 42%,#0D0719 100%);
  color:#C6BBDD;
  overflow:hidden;
}
/* hairline of light along the very top edge — reads as a polished seam */
.site-footer::before{
  content:"";position:absolute;inset-inline:0;top:0;height:1px;z-index:2;
  background:linear-gradient(90deg,transparent,rgba(201,162,39,.55) 22%,rgba(155,111,212,.5) 60%,transparent);
}
/* faint grain so the large dark area is not a dead flat field */
.site-footer::after{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:.5;
  background-image:radial-gradient(rgba(255,255,255,.045) 1px,transparent 1px);
  background-size:3px 3px;
}

/* ---------- CTA strip ---------- */
.foot-strip{
  position:relative;
  background:linear-gradient(115deg,var(--deep-2) 0%,var(--brand) 48%,#4A2487 100%);
  border-bottom:1px solid rgba(255,255,255,.10);
}
.foot-strip::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(70% 130% at 88% 50%,rgba(201,162,39,.22),transparent 60%);
}
.foot-strip-in{
  position:relative;z-index:1;
  display:flex;align-items:center;justify-content:space-between;
  gap:clamp(20px,3vw,40px);padding-block:clamp(32px,4.5vw,52px);flex-wrap:wrap;
}
.foot-strip h2{
  font-family:var(--head);color:#fff;font-weight:800;line-height:1.32;
  font-size:clamp(21px,3vw,32px);max-width:22ch;letter-spacing:-.01em;
}

/* ---------- main grid ---------- */
.foot-top{
  position:relative;z-index:1;
  display:grid;
  grid-template-columns:minmax(280px,1.7fr) repeat(auto-fit,minmax(150px,1fr));
  gap:clamp(30px,4vw,56px);
  padding-block:clamp(46px,6vw,72px) clamp(34px,4.5vw,48px);
}

/* ---------- brand column ---------- */
.foot-brand img{height:42px;width:auto;margin-bottom:20px}
.foot-brand p{
  color:#9A90B6;font-size:14.5px;line-height:1.95;max-width:40ch;margin:0;
}

/* ---------- contact rows ---------- */
.foot-contact{font-style:normal;margin-top:26px;display:grid;gap:16px}
.fc-row{display:flex;gap:13px;align-items:flex-start}
.fc-ic{
  flex:0 0 auto;width:36px;height:36px;border-radius:11px;display:grid;place-items:center;
  color:var(--gold-2);
  background:linear-gradient(145deg,rgba(201,162,39,.20),rgba(201,162,39,.05));
  border:1px solid rgba(201,162,39,.28);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08);
  transition:transform var(--t-base) var(--ease),border-color var(--t-base) var(--ease);
}
.fc-row:hover .fc-ic{transform:translateY(-2px);border-color:rgba(201,162,39,.55)}
.fc-txt{display:flex;flex-direction:column;gap:3px;font-size:14.5px;line-height:1.7;color:#C6BBDD;min-width:0}
.fc-txt em{
  font-style:normal;font-size:10.5px;font-weight:600;letter-spacing:.14em;
  text-transform:uppercase;color:#968DB4;
}
.fc-txt a{color:#EDE6FA;font-weight:600;transition:color var(--t-fast) var(--ease);word-break:break-word}
.fc-txt a:hover{color:var(--gold-2)}
.fc-txt small{color:#968DB4;font-size:12.5px}

/* ---------- link columns ---------- */
.fcol h2{
  position:relative;color:#fff;font-family:var(--head);
  font-size:15px;font-weight:800;letter-spacing:.01em;
  margin-bottom:20px;padding-bottom:13px;
}
.fcol h2::after{
  content:"";position:absolute;inset-inline-start:0;bottom:0;
  width:28px;height:2px;border-radius:2px;
  background:linear-gradient(90deg,var(--gold),rgba(201,162,39,0));
}
.fcol a{
  position:relative;display:flex;align-items:center;min-height:42px;
  font-size:14.5px;color:#A79CC4;
  transition:color var(--t-fast) var(--ease),transform var(--t-fast) var(--ease);
}
/* the dot appears rather than the whole row shifting — quieter than padding */
.fcol a::before{
  content:"";position:absolute;inset-inline-start:-14px;top:50%;
  width:5px;height:5px;border-radius:50%;background:var(--gold);
  opacity:0;transform:translateY(-50%) scale(.4);
  transition:opacity var(--t-fast) var(--ease),transform var(--t-fast) var(--ease);
}
.fcol a:hover{color:#fff}
.fcol a:hover::before{opacity:1;transform:translateY(-50%) scale(1)}

/* ---------- socials ---------- */
.socials{display:flex;gap:10px;margin-top:26px}
.socials a{
  width:44px;height:44px;border-radius:13px;display:grid;place-items:center;
  color:#B9AED6;background:rgba(255,255,255,.035);
  border:1px solid rgba(255,255,255,.10);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06);
  transition:transform var(--t-base) var(--ease),background var(--t-base) var(--ease),
             border-color var(--t-base) var(--ease),color var(--t-base) var(--ease);
}
.socials a:hover{
  transform:translateY(-3px);color:#221602;
  background:linear-gradient(145deg,var(--gold-2),var(--gold));
  border-color:var(--gold);
}

/* ---------- map ---------- */
.foot-map{
  position:relative;z-index:1;
  padding-block:clamp(30px,4vw,44px);
  border-top:1px solid rgba(255,255,255,.09);
}
.foot-map-head{display:flex;align-items:center;justify-content:space-between;gap:18px;flex-wrap:wrap;margin-bottom:20px}
.foot-map-head h2{
  position:relative;color:#fff;font-family:var(--head);
  font-size:clamp(18px,2.4vw,23px);font-weight:800;padding-inline-start:16px;
}
.foot-map-head h2::before{
  content:"";position:absolute;inset-inline-start:0;top:50%;transform:translateY(-50%);
  width:3px;height:20px;border-radius:3px;background:linear-gradient(180deg,var(--gold-2),var(--gold));
}
.foot-map-dir{
  display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:11px 20px;
  border:1px solid rgba(201,162,39,.40);border-radius:100px;
  color:var(--gold-2);font-size:14px;font-weight:600;white-space:nowrap;
  transition:background var(--t-fast) var(--ease),color var(--t-fast) var(--ease),transform var(--t-fast) var(--ease);
}
.foot-map-dir:hover{background:var(--gold-2);color:#221602;transform:translateY(-2px)}
.foot-map-dir svg{flex:0 0 auto}
[dir="rtl"] .foot-map-dir svg{transform:scaleX(-1)}
.foot-map-frame{
  position:relative;border-radius:var(--r-lg);overflow:hidden;background:#170E30;
  border:1px solid rgba(255,255,255,.10);
  box-shadow:0 24px 56px -30px rgba(0,0,0,.9),inset 0 1px 0 rgba(255,255,255,.06);
}
.foot-map-frame iframe{
  display:block;width:100%;border:0;
  filter:grayscale(.4) contrast(1.06) brightness(.94);
  transition:filter var(--t-slow) var(--ease);
}
.foot-map-frame:hover iframe,.foot-map-frame:focus-within iframe{filter:none}

/* ---------- widgets ---------- */
.foot-widgets{
  position:relative;z-index:1;
  padding-block:30px;border-top:1px solid rgba(255,255,255,.09);
  display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:26px;
}
.foot-widgets .widget-title{color:#fff;font-family:var(--head)}
.foot-widgets a{color:#A79CC4}
.foot-widgets a:hover{color:var(--gold-2)}

/* ---------- bottom bar ---------- */
.foot-bot{
  position:relative;z-index:1;
  display:flex;flex-wrap:wrap;gap:10px 28px;align-items:center;justify-content:space-between;
  padding-block:24px 28px;border-top:1px solid rgba(255,255,255,.09);
  color:#968DB4;font-size:13px;
}
.foot-legal{color:#8D84AB}
.foot-motto{
  color:var(--gold);letter-spacing:.26em;font-size:10.5px;font-weight:600;
  opacity:.85;
}

/* ---------- responsive ---------- */
@media (max-width:900px){
  .foot-top{grid-template-columns:1fr 1fr}
  .foot-brand{grid-column:1/-1}
  .foot-strip-in{flex-direction:column;align-items:flex-start}
  .foot-strip h2{max-width:none}
}
@media (max-width:560px){
  .foot-top{grid-template-columns:1fr;gap:34px}
  .foot-map-head{flex-direction:column;align-items:stretch}
  .foot-map-dir{justify-content:center}
  .foot-bot{flex-direction:column;align-items:flex-start;gap:8px}
  .foot-strip .btn{width:100%;justify-content:center}
  .fcol a{min-height:46px}
}

@media (prefers-reduced-motion:reduce){
  .fc-row:hover .fc-ic,.socials a:hover,.foot-map-dir:hover{transform:none}
  .foot-map-frame iframe{transition:none}
}

/* Auto-built column shown when no footer menu has been assigned yet. */
.fcol-auto a{min-height:42px}


/* ---- drawer stacking ---------------------------------------------------
   The scrim dimmed the menu itself. .nav-links sits *inside* header.nav, and
   header.nav has z-index:60 — so it opens a stacking context, and every
   z-index inside it is resolved against that 60, not against the page. The
   scrim at 65 therefore painted over the drawer no matter how high the
   drawer's own z-index went. The header is lifted above the scrim only while
   the drawer is open, which keeps the normal page stacking untouched. */
.nav-scrim{z-index:70}
body.df-locked header.nav,body.df-locked .nav{z-index:90}
@media (max-width:1024px){
  .nav-links{z-index:2}
  /* the header bar itself stays lit so the close button remains findable */
  body.df-locked header.nav{background:transparent;box-shadow:none;border-bottom-color:transparent}
  body.df-locked .nav-inner{position:relative;z-index:3}
  body.df-locked .brand,body.df-locked .lang{opacity:0;pointer-events:none;transition:opacity var(--t-fast) var(--ease)}
}

/* The burger doubles as the close control, so it must sit above the scrim. */
.burger{position:relative;z-index:4}
body.df-locked .burger span{background:var(--ink)}