/* TARD website. Navy and olive from the TARD mark, with the warm sari
   colours of a samity meeting as accents. */
:root {
  --navy: #042272; --navy2: #0b3aa8; --navy3: #021446;
  --olive: #90a462; --olive2: #62763a; --olive-l: #b9cc8a;
  --gold: #f2b632; --red: #d7332b; --pink: #e8417a; --teal: #18a0a0;
  --cream: #fbf7ef; --sand: #f3ead9; --paper: #ffffff;
  --ink: #141a2e; --muted: #5b6377; --line: #e3dccb;
  --f: "Hind Siliguri", "Noto Sans Bengali", system-ui, sans-serif;
  --fd: "Baloo Da 2", "Hind Siliguri", system-ui, sans-serif;
  --r: 20px;
  --shadow: 0 1px 2px rgba(20, 26, 46, .06), 0 18px 40px -24px rgba(20, 26, 46, .45);
  --ease: cubic-bezier(.2, .8, .2, 1);
  color-scheme: light;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 76px; }
body { margin: 0; background: var(--cream); color: var(--ink); font: 17px/1.65 var(--f); -webkit-font-smoothing: antialiased; overflow-x: hidden; }
body.noscroll { overflow: hidden; }
img { max-width: 100%; display: block; }
a { color: var(--navy2); }
h1, h2, h3, h4 { font-family: var(--fd); line-height: 1.12; margin: 0; text-wrap: balance; }
p { margin: 0 0 .8em; }
button { font: inherit; cursor: pointer; }
:focus-visible { outline: 3px solid var(--focus, var(--navy)); outline-offset: 3px; }
/* The focus ring is navy on light ground and gold on the dark bands; white
   cards and menus inside a dark band go back to navy. */
:is(.intro, .hero, .page-hero, .bd-hero, .nav:not(.solid), .stats, .contact, .foot, .lightbox, .bd-symbols, .bcard.ho, .ad-side) { --focus: var(--gold); }
:is(.cta-band, .skip) { --focus: #fff; }
:is(.dd-menu, .cform, .contact.light) { --focus: var(--navy); }
.ic { flex: none; display: inline-block; vertical-align: middle; }
.wrap { width: min(1200px, 100% - 40px); margin-inline: auto; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.skip { position: absolute; left: 12px; top: -60px; background: var(--gold); color: var(--ink); padding: 8px 14px; border-radius: 10px; z-index: 200; }
.skip:focus { top: 12px; }

.eyebrow { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; font-size: 14px; letter-spacing: .08em; text-transform: uppercase; color: var(--olive2); margin-bottom: 10px; }
.eyebrow::before { content: ""; width: 26px; height: 3px; border-radius: 3px; background: currentColor; }
.eyebrow.light { color: var(--olive-l); }
.btn { display: inline-flex; align-items: center; gap: 10px; background: var(--gold); color: var(--navy3); border: 0; border-radius: 99px; padding: 13px 24px; font-weight: 700; text-decoration: none; box-shadow: 0 10px 24px -12px rgba(242, 182, 50, .9); transition: transform .25s var(--ease), box-shadow .25s; }
.btn:hover { transform: translateY(-2px); box-shadow: 0 16px 30px -14px rgba(242, 182, 50, 1); }
.btn:disabled { opacity: .6; transform: none; }
.btn.ghost { background: rgba(255, 255, 255, .12); color: #fff; box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .5); backdrop-filter: blur(6px); }

/* ---------------- logo (shared with the core app) ---------------- */
.logo { display: block; width: 100%; height: auto; overflow: visible; }
.logo .l-let path { fill: #fff; }
.logo.anim .l-top { transform-box: fill-box; transform-origin: 50% 0; animation: ltop .7s cubic-bezier(.2, .9, .25, 1.15) both; }
.logo.anim .l-col { transform-box: fill-box; transform-origin: 50% 0; animation: growY .65s .45s cubic-bezier(.3, .7, .2, 1) both; }
.logo.anim .l-gl { animation: lgl .75s .85s cubic-bezier(.2, .9, .3, 1.1) both; }
.logo.anim .l-gr { animation: lgr .75s .85s cubic-bezier(.2, .9, .3, 1.1) both; }
.logo.anim .l-rung { transform-box: fill-box; transform-origin: 0 50%; animation: lrung .45s cubic-bezier(.5, 0, .2, 1) both; }
.logo.anim .l-rung.r1 { animation-delay: 1.35s; }
.logo.anim .l-rung.r2 { animation-delay: 1.5s; }
.logo.anim .l-let path { stroke: #fff; stroke-width: 5; stroke-dasharray: 1; stroke-dashoffset: 1; fill-opacity: 0; animation: draw 1.15s 1.5s ease-in-out forwards, lfill .5s 2.45s ease forwards; }
.logo .l-shine { transform: translateX(-600px) skewX(-20deg); }
.logo.anim .l-shine { animation: lshine 1.1s 2.8s ease-in-out both; }
.logo.idle .l-shine { animation: lshine2 9s 2s ease-in-out infinite; }
@keyframes ltop { from { transform: translateY(-120px) scaleY(0); opacity: 0; } }
@keyframes growY { from { transform: scaleY(0); } }
@keyframes lgl { from { transform: translateX(-320px); opacity: 0; } }
@keyframes lgr { from { transform: translateX(320px); opacity: 0; } }
@keyframes lrung { to { transform: scaleX(0); } }
@keyframes draw { to { stroke-dashoffset: 0; } }
@keyframes lfill { to { fill-opacity: 1; stroke-width: 0; } }
@keyframes lshine { from { transform: translateX(-600px) skewX(-20deg); } to { transform: translateX(1500px) skewX(-20deg); } }
@keyframes lshine2 { 0% { transform: translateX(-600px) skewX(-20deg); } 18%, 100% { transform: translateX(1500px) skewX(-20deg); } }

/* ---------------- intro ---------------- */
.intro { position: fixed; inset: 0; z-index: 300; display: grid; place-items: center; background: radial-gradient(120% 90% at 50% 40%, #0b3aa8 0%, #042272 45%, #021446 100%); color: #fff; transition: clip-path 1s cubic-bezier(.7, 0, .2, 1), opacity .4s .7s; clip-path: inset(0 0 0 0 round 0); }
.intro::before { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 50% 45%, rgba(144, 164, 98, .35), transparent 45%); animation: glow 4s ease-in-out both; }
.intro.out { clip-path: inset(0 0 100% 0 round 0 0 50% 50%); opacity: 0; pointer-events: none; }
.intro-in { position: relative; display: flex; flex-direction: column; align-items: center; gap: 14px; }
.intro-logo { width: min(150px, 34vw); background: #fff; border-radius: 30px; padding: 22px 26px; box-shadow: 0 30px 60px -20px rgba(0, 0, 0, .55); animation: plate .7s var(--ease) both; }
.intro-logo img { width: 100%; }
.intro-word { font-family: var(--fd); font-weight: 800; font-size: clamp(40px, 9vw, 76px); letter-spacing: .14em; line-height: 1; margin-top: 8px; }
/* Bangla letters join along the headstroke, which tracking breaks. */
.intro-word:lang(bn) { letter-spacing: 0; }
.intro-word span { display: inline-block; animation: letter .6s calc(2.6s + var(--i) * .08s) var(--ease) both; }
.intro-tag { color: #cdd7f5; font-size: clamp(15px, 2.6vw, 19px); text-align: center; padding: 0 20px; animation: fadeUp .7s 3.1s var(--ease) both; }
.intro-skip { position: absolute; right: 20px; bottom: 20px; background: rgba(255, 255, 255, .1); color: #fff; border: 1px solid rgba(255, 255, 255, .3); border-radius: 99px; padding: 6px 16px; font-size: 14px; }
@keyframes plate { from { transform: scale(.6); opacity: 0; } }
@keyframes letter { from { transform: translateY(40px) rotate(8deg); opacity: 0; } }
@keyframes fadeUp { from { transform: translateY(14px); opacity: 0; } }
@keyframes glow { from { opacity: 0; transform: scale(.6); } }

/* ---------------- nav ---------------- */
.nav { position: fixed; inset: 0 0 auto; z-index: 100; display: flex; align-items: center; gap: 18px; padding: 12px max(20px, calc((100% - 1240px) / 2)); color: #fff; transition: background .35s, box-shadow .35s, padding .35s, color .35s; }
.nav.solid { background: rgba(251, 247, 239, .9); backdrop-filter: blur(14px); color: var(--ink); box-shadow: 0 1px 0 var(--line); padding-block: 8px; }
.nav-brand { display: flex; align-items: center; gap: 12px; color: inherit; text-decoration: none; margin-right: auto; min-width: 0; }
.nav-logo { width: 38px; height: 50px; background: #fff; border-radius: 10px; padding: 5px 6px; display: grid; place-items: center; box-shadow: 0 6px 16px -8px rgba(0, 0, 0, .5); flex: none; }
.nav-brand b { font-family: var(--fd); font-size: 22px; display: block; line-height: 1; letter-spacing: .04em; }
.nav-brand small { display: block; font-size: 13px; opacity: .8; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 32ch; }
.nav-links { display: flex; gap: 4px; }
.nav-links a { color: inherit; text-decoration: none; padding: 7px 12px; border-radius: 99px; font-weight: 500; font-size: 15.5px; position: relative; }
.nav-links a::after { content: ""; position: absolute; left: 12px; right: 12px; bottom: 3px; height: 2px; border-radius: 2px; background: var(--gold); transform: scaleX(0); transition: transform .3s var(--ease); }
.nav-links a:hover::after, .nav-links a.on::after { transform: scaleX(1); }
.lang { border: 1.5px solid currentColor; background: transparent; color: inherit; border-radius: 99px; padding: 4px 14px; font-weight: 600; font-size: 14px; opacity: .9; }
.burger { display: none; background: none; border: 0; color: inherit; padding: 6px; }

/* ---------------- hero ---------------- */
.hero { position: relative; min-height: max(640px, 100svh); display: flex; align-items: center; color: #fff; overflow: hidden; isolation: isolate; }
.hero-art { position: absolute; inset: 0; z-index: -1; }
.hero-art svg { width: 100%; height: 100%; }
.hero-art::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(2, 20, 70, .78) 0%, rgba(2, 20, 70, .35) 55%, transparent 80%); }
.hero-in { padding: 140px 0 120px; }
.hero-title { font-size: clamp(38px, 6.4vw, 78px); font-weight: 800; max-width: 15ch; margin: 6px 0 20px; }
.word { display: inline-block; overflow: hidden; vertical-align: bottom; padding-bottom: .08em; }
.word > span { display: inline-block; transform: translateY(105%); }
.revealed .word > span, .no-intro .word > span { animation: wordUp .9s calc(.15s + var(--i) * .07s) var(--ease) forwards; }
.hero-kick, .hero-sub, .hero-cta { opacity: 0; }
.revealed .hero-kick, .no-intro .hero-kick { animation: appear .8s .05s var(--ease) forwards; }
.revealed .hero-sub, .no-intro .hero-sub { animation: appear .8s .65s var(--ease) forwards; }
.revealed .hero-cta, .no-intro .hero-cta { animation: appear .8s .85s var(--ease) forwards; }
@keyframes wordUp { to { transform: none; } }
@keyframes appear { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.hero-sub { font-size: clamp(17px, 1.6vw, 20px); max-width: 52ch; color: #e1e7f8; }
.hero-cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px; }
.h-sun { animation: rise 3.5s .4s var(--ease) both; transform-origin: 1180px 560px; }
@keyframes rise { from { transform: translateY(160px); opacity: .2; } }
.star { animation: twinkle 3s var(--d) ease-in-out infinite; }
@keyframes twinkle { 50% { opacity: .2; } }
.boat { animation: boat 26s linear infinite; }
.bob { animation: bob 3s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
@keyframes boat { from { transform: translateX(-120px); } to { transform: translateX(1720px); } }
@keyframes bob { 50% { transform: translateY(-6px) rotate(-2deg); } }
.river { animation: shimmer 6s ease-in-out infinite; }
@keyframes shimmer { 50% { opacity: .7; } }
.scroll-cue { position: absolute; left: 50%; bottom: 26px; width: 26px; height: 42px; border: 2px solid rgba(255, 255, 255, .7); border-radius: 14px; translate: -50% 0; }
.scroll-cue span { position: absolute; left: 50%; top: 8px; width: 4px; height: 8px; border-radius: 2px; background: #fff; translate: -50% 0; animation: cue 1.8s ease-in-out infinite; }
@keyframes cue { 70% { transform: translateY(14px); opacity: 0; } 100% { opacity: 0; } }

/* sway, used by palms and banana trees */
.sway { animation: sway 5s ease-in-out infinite alternate; transform-box: fill-box; transform-origin: 50% 100%; }
@keyframes sway { from { transform: rotate(calc(var(--sw) * -1)); } to { transform: rotate(var(--sw)); } }

/* ---------------- sections ---------------- */
.sec { padding: clamp(70px, 10vw, 130px) 0; position: relative; }
.sec-head { max-width: 720px; margin: 0 auto 46px; text-align: center; }
.sec-head.left { text-align: left; margin-left: 0; }
.sec-head h2 { font-size: clamp(32px, 4.4vw, 52px); font-weight: 800; color: var(--navy); margin-bottom: 14px; }
.sec-head p { color: var(--muted); font-size: 18px; }
.rv { opacity: 0; transform: translateY(34px); transition: opacity .9s var(--ease), transform .9s var(--ease); transition-delay: calc(var(--i, 0) * 90ms); }
.rv.in { opacity: 1; transform: none; }
/* keyboard focus never lands on something still waiting to fade in */
.rv:focus-within, .rv:focus-visible { opacity: 1; transform: none; transition: none; }

/* about */
.about { background: var(--paper); }
.about-grid { display: grid; grid-template-columns: 1.2fr 1fr; gap: 48px 64px; align-items: start; }
.about h2 { font-size: clamp(32px, 4.4vw, 52px); font-weight: 800; color: var(--navy); margin-bottom: 18px; }
.prose { font-size: 18.5px; color: #2a3147; }
.mv { display: grid; gap: 16px; }
.mv-card { background: var(--navy); color: #fff; border-radius: var(--r); padding: 26px 28px; position: relative; overflow: hidden; }
.mv-card::after { content: ""; position: absolute; right: -50px; top: -50px; width: 160px; height: 160px; border-radius: 50%; background: radial-gradient(circle, rgba(185, 204, 138, .45), transparent 70%); }
.mv-card.alt { background: var(--olive2); }
.mv-card span { font-family: var(--fd); font-weight: 700; color: var(--olive-l); font-size: 15px; letter-spacing: .08em; text-transform: uppercase; }
.mv-card.alt span { color: #f4e7a6; }
.mv-card p { margin: 6px 0 0; font-size: 19px; line-height: 1.5; }
.values { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; }
.value { border-top: 3px solid var(--gold); padding-top: 14px; }
.value b { font-family: var(--fd); font-size: 22px; color: var(--navy); }
.value p { color: var(--muted); margin-top: 4px; }

/* stats */
.stats { background: linear-gradient(120deg, var(--navy3), var(--navy) 50%, var(--navy2)); color: #fff; padding: 56px 0; position: relative; overflow: hidden; }
.stats::before { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(90deg, transparent 0 46px, rgba(255, 255, 255, .04) 46px 48px); }
.stat-row { position: relative; display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 20px; }
/* A long figure (12,345.5+) shrinks with its column instead of running into the next. */
.stat { text-align: center; container-type: inline-size; }
.stat b { display: block; font-family: var(--fd); font-size: clamp(44px, 6vw, 68px); font-weight: 800; line-height: 1; color: var(--gold); font-variant-numeric: tabular-nums; }
/* Behind @supports: with var() in it, a browser without cqi would drop the
   size altogether instead of keeping the one above. */
@supports (width: 1cqi) { .stat b { font-size: clamp(26px, min(calc(165cqi / var(--n, 9)), max(44px, 6vw)), 68px); } }
.stat span { color: #d3dbf3; font-size: 16px; }

/* programmes */
.programs { background: var(--sand); }
.prog-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 20px; }
.prog { background: var(--paper); border-radius: var(--r); padding: 28px 26px; box-shadow: var(--shadow); position: relative; overflow: hidden; transition: transform .4s var(--ease), box-shadow .4s; }
.prog::before { content: ""; position: absolute; inset: auto 0 0 0; height: 5px; background: linear-gradient(90deg, var(--gold), var(--pink), var(--teal)); transform: scaleX(0); transform-origin: left; transition: transform .5s var(--ease); }
.prog:hover { transform: translateY(-6px); box-shadow: 0 30px 50px -30px rgba(4, 34, 114, .5); }
.prog:hover::before { transform: scaleX(1); }
.prog-ic { width: 60px; height: 60px; border-radius: 18px; display: grid; place-items: center; background: #eef2e3; color: var(--olive2); margin-bottom: 18px; transition: transform .5s var(--ease); }
.prog:hover .prog-ic { transform: rotate(-8deg) scale(1.08); }
.prog.tone1 .prog-ic { background: #fdf0d4; color: #a46c00; }
.prog.tone2 .prog-ic { background: #fde3ec; color: #b0245a; }
.prog.tone3 .prog-ic { background: #e2f3f3; color: #0f7a7a; }
a.prog { text-decoration: none; color: inherit; display: flex; flex-direction: column; }
.prog-b { display: flex; flex-direction: column; flex: 1; }
.prog-since { display: block; font-size: 13.5px; font-weight: 600; color: var(--olive2); margin: -4px 0 8px; }
.prog .more { margin-top: auto; padding-top: 16px; display: inline-flex; gap: 8px; align-items: center; font-weight: 700; color: var(--navy2); }
.prog .more .ic { transition: transform .3s var(--ease); }
.prog:hover .more .ic { transform: translateX(4px); }
.prog.wide { grid-column: span 2; flex-direction: row; padding: 0; background: var(--navy); color: #fff; }
/* the drawing keeps its own shape, framed like a picture when the card is taller */
.prog.wide .prog-art { flex: 1.05; align-self: center; aspect-ratio: 380 / 280; margin-left: 26px; border-radius: 14px; position: relative; overflow: hidden; }
.prog.wide .prog-art svg { position: absolute; inset: 0; width: 100%; height: 100%; transition: transform 1.2s var(--ease); }
.prog.wide:hover .prog-art svg { transform: scale(1.05); }
.prog.wide .prog-b { flex: 1; padding: 30px; }
.prog.wide h3 { color: #fff; }
.prog.wide p { color: #d3dbf3; }
.prog.wide .prog-since { color: #d3e3a3; }
.prog.wide .prog-ic { background: rgba(255, 255, 255, .12); color: var(--gold); }
.prog.wide .more { color: var(--gold); }
.prog h3 { font-size: 25px; color: var(--navy); margin-bottom: 8px; }
.prog p { color: var(--muted); }
.prog ul { list-style: none; padding: 0; margin: 14px 0 0; display: grid; gap: 6px; }
.prog li { display: flex; gap: 10px; font-weight: 500; font-size: 15.5px; }
.prog li::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--olive); margin-top: .6em; flex: none; }

/* ---------------- samity scene ---------------- */
.samity { background: linear-gradient(#fff, var(--cream)); }
.scene-wrap { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 18px; align-items: stretch; }
.scene-stage { position: relative; border-radius: 26px; overflow: hidden; box-shadow: 0 40px 80px -40px rgba(4, 34, 114, .55); aspect-ratio: 16 / 9; background: #cfe6f5; --sky1: #8fc4ee; --sky2: #e8f3fb; }
.scene-stage.dusk { --sky1: #1d2a63; --sky2: #f39b5a; }
.scene { display: block; width: 100%; height: 100%; }
.scene .sky1 { stop-color: var(--sky1); transition: stop-color 1.2s; }
.scene .sky2 { stop-color: var(--sky2); transition: stop-color 1.2s; }
.scene [data-depth] { transition: transform .6s var(--ease); }
.dusk .scene .L2, .dusk .scene .L3, .dusk .scene .L1, .dusk .scene .L4 { filter: brightness(.78) saturate(.9) sepia(.15); transition: filter 1.2s; }
.scene .L1, .scene .L2, .scene .L3, .scene .L4 { transition: filter 1.2s, transform .6s var(--ease); }
.dusk .sun { transform: translateY(260px); }
.sun { transition: transform 1.4s var(--ease); }
.scene.paused * { animation-play-state: paused !important; }
.cloud { animation: cloud var(--dur) var(--d) linear infinite; }
@keyframes cloud { from { transform: translateX(-500px); } to { transform: translateX(1800px); } }
/* birds glide left to right across the samity sky, beating their wings slowly */
.bird { animation: glide 46s var(--d) linear infinite; }
/* two wing poses, up and down, take turns: a wingbeat that reads at any size */
.bird .wd { opacity: 0; }
.bird .wu { animation: wingUp .7s var(--f) infinite; }
.bird .wd { animation: wingDown .7s var(--f) infinite; }
@keyframes wingUp { 0%, 49.9% { opacity: 1; } 50%, 100% { opacity: 0; } }
@keyframes wingDown { 0%, 49.9% { opacity: 0; } 50%, 100% { opacity: 1; } }
@keyframes glide { from { transform: translate(0, 0); } 50% { transform: translate(900px, -16px); } to { transform: translate(1800px, 0); } }
@keyframes fly { from { transform: translate(0, 0); } 50% { transform: translate(900px, -40px); } to { transform: translate(1800px, 20px); } }
.flutter { animation: flutter 3.2s var(--d) ease-in-out infinite alternate; transform-box: fill-box; transform-origin: 50% 0; }
@keyframes flutter { to { transform: skewX(4deg) scaleX(.97); } }
.w-body { animation: breathe 4.5s var(--d) ease-in-out infinite; transform-box: fill-box; transform-origin: 50% 100%; }
@keyframes breathe { 50% { transform: scaleY(1.012); } }
.w-head { transform-box: fill-box; transform-origin: 50% 100%; animation: look 9s var(--d) ease-in-out infinite; }
@keyframes look { 0%, 70%, 100% { transform: none; } 78%, 90% { transform: rotate(-4deg); } }
.w-head.nod { animation: nod 1.2s ease-in-out; }
@keyframes nod { 30% { transform: rotate(6deg); } 60% { transform: rotate(-3deg); } }
.w-book { transform-box: fill-box; transform-origin: center; transition: filter .3s; }
.w-book.lift { animation: lift 1.3s var(--ease); }
@keyframes lift { 40% { transform: translateY(-16px) rotate(-6deg); } }
.walker { animation: walk var(--dur) var(--d, 0s) linear infinite; }
@keyframes walk { from { transform: translateX(-120px); } to { transform: translateX(1760px); } }
.hen-head { transform-box: fill-box; transform-origin: 80% 80%; animation: peck 2.4s ease-in-out infinite; }
.walker .hen-head { animation-duration: 1.4s; }
@keyframes peck { 0%, 60%, 100% { transform: none; } 70%, 85% { transform: rotate(-38deg) translate(-3px, 6px); } }
.c-tail { transform-box: fill-box; transform-origin: 0 0; animation: tail 2.6s ease-in-out infinite; }
@keyframes tail { 50% { transform: rotate(14deg); } }
.c-head { transform-box: fill-box; transform-origin: 90% 10%; animation: graze 6s ease-in-out infinite; }
.c-head.graze { animation: moo 1.2s ease-in-out 2; }
@keyframes graze { 0%, 60%, 100% { transform: none; } 70%, 90% { transform: rotate(-8deg); } }
@keyframes moo { 50% { transform: rotate(16deg) translateY(-6px); } }
.o-pen { transform-box: fill-box; transform-origin: 50% 0; }
#sc-officer.writing .o-pen { animation: write .5s ease-in-out infinite alternate; }
@keyframes write { from { transform: translate(-6px, 0) rotate(-6deg); } to { transform: translate(6px, 2px) rotate(4deg); } }
.o-head { transform-box: fill-box; transform-origin: 50% 100%; animation: look 7s 1s ease-in-out infinite; }
.k-wave { transform-box: fill-box; transform-origin: 0 100%; }
.k-wave.hi { animation: hi .35s ease-in-out 4 alternate; }
@keyframes hi { to { transform: rotate(-24deg); } }
.w-row.sway-row { animation: rowsway 1.3s ease-in-out; transform-box: fill-box; transform-origin: 50% 100%; }
@keyframes rowsway { 30% { transform: translateX(-6px); } 65% { transform: translateX(6px); } }
.tab-screen { transition: fill .3s; }
#sc-tablet.sync .tab-screen { animation: sync .5s ease-in-out 6 alternate; }
@keyframes sync { to { fill: #9cf0b0; } }
.coin { transform: translate(var(--x), -260px); opacity: 0; animation: coin 1.1s var(--d) cubic-bezier(.5, 0, .7, .4) forwards; }
@keyframes coin { 0% { opacity: 1; transform: translate(var(--x), -260px) rotate(0); } 80% { opacity: 1; } 100% { opacity: 1; transform: translate(calc(var(--x) * .6), -8px) rotate(380deg); } }
.hl, .w-book, .w-row { transition: filter .4s; }
.lit { filter: url(#sc-glow) brightness(1.08); }
.spot { cursor: pointer; outline: none; }
.spot-dot { fill: var(--gold); stroke: #fff; stroke-width: 4; transition: fill .3s, r .3s; }
.spot-ring { fill: none; stroke: #fff; stroke-width: 3; transform-box: fill-box; transform-origin: center; animation: ring 2s ease-out infinite; }
.spot-n { fill: var(--navy3); font: 800 27px var(--fd); text-anchor: middle; pointer-events: none; }
.spot:hover .spot-dot, .spot:focus-visible .spot-dot, .spot.on .spot-dot { fill: #fff; }
.spot.on .spot-ring { stroke: var(--gold); }
.spot:focus-visible .spot-dot { stroke: var(--navy); stroke-width: 5; }
.spot:focus-visible .spot-ring { stroke: var(--navy); stroke-width: 4; animation: none; }
.scene.zoomed .spot:not(.on) { opacity: .55; }
@keyframes ring { from { transform: scale(.7); opacity: 1; } to { transform: scale(1.9); opacity: 0; } }
.scene-main { display: grid; gap: 12px; align-content: start; min-width: 0; }
.scene-bar { display: flex; flex-wrap: wrap; gap: 8px; }
.scene-bar .sbtn.ghost { box-shadow: inset 0 0 0 1.5px var(--line); }
.sbtn { display: inline-flex; align-items: center; gap: 8px; border: 0; border-radius: 99px; background: var(--navy); color: #fff; padding: 9px 16px; font-weight: 600; font-size: 15px; box-shadow: 0 8px 20px -10px rgba(2, 20, 70, .8); transition: transform .2s; }
.sbtn:hover { transform: translateY(-1px); }
.sbtn.ghost { background: rgba(255, 255, 255, .9); color: var(--navy); }
.tally { position: absolute; right: 14px; top: 14px; background: rgba(255, 255, 255, .94); border-radius: 16px; padding: 10px 16px; box-shadow: var(--shadow); text-align: right; animation: fadeUp .5s var(--ease); }
.tally small { display: block; color: var(--muted); font-size: 13px; }
.tally b { font-family: var(--fd); font-size: 28px; color: var(--olive2); font-variant-numeric: tabular-nums; }
.scene-card { background: var(--paper); border-radius: 26px; padding: 22px; box-shadow: var(--shadow); display: flex; flex-direction: column; gap: 14px; min-height: 0; }
.sc-progress { display: grid; grid-template-columns: repeat(auto-fit, minmax(28px, 1fr)); gap: 5px; justify-items: center; }
.pip { width: 100%; max-width: 34px; height: auto; aspect-ratio: 1; padding: 0; border-radius: 50%; border: 1.5px solid var(--line); background: #fff; font: 700 15px var(--fd); color: var(--muted); transition: all .25s; }
.pip:hover { border-color: var(--navy); color: var(--navy); }
.pip.on { background: var(--navy); color: #fff; border-color: var(--navy); transform: scale(1.1); }
.sc-body { flex: 1; }
.sc-body.in { animation: cardIn .55s var(--ease); }
@keyframes cardIn { from { opacity: 0; transform: translateX(18px); } }
.sc-num { font: 600 13px var(--f); color: var(--olive2); letter-spacing: .06em; text-transform: uppercase; }
.sc-body h3 { font-size: 26px; color: var(--navy); margin: 4px 0 10px; }
.sc-body p { color: #3a4157; }
.sc-nav { display: flex; gap: 8px; justify-content: flex-end; }
.sc-nav .sbtn { padding: 9px 12px; box-shadow: inset 0 0 0 1.5px var(--line); }

/* ---------------- gallery ---------------- */
.gallery { background: var(--paper); }
.chips { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-bottom: 22px; }
.chip { border: 1.5px solid var(--line); background: #fff; border-radius: 99px; padding: 5px 16px; font-weight: 600; color: var(--muted); }
.chip.on { background: var(--navy); color: #fff; border-color: var(--navy); }
.gal-grid { columns: 3 300px; column-gap: 16px; }
.tile, .ph-tile { break-inside: avoid; margin: 0 0 16px; border-radius: 18px; overflow: hidden; position: relative; cursor: zoom-in; background: var(--sand); box-shadow: var(--shadow); }
.tile img { width: 100%; height: auto; transition: transform .8s var(--ease); }
.tile:hover img { transform: scale(1.06); }
.tile figcaption { position: absolute; inset: auto 0 0 0; padding: 40px 16px 14px; color: #fff; font-size: 15px; background: linear-gradient(transparent, rgba(2, 20, 70, .85)); transform: translateY(30%); opacity: 0; transition: all .4s var(--ease); }
.tile:hover figcaption, .tile:focus-visible figcaption { transform: none; opacity: 1; }
@media (hover: none) { .tile figcaption { transform: none; opacity: 1; } }
.ph-tile { cursor: default; }
.ph-tile svg { display: block; width: 100%; aspect-ratio: 4 / 3; }
.ph-tile:nth-child(3n+2) svg { aspect-ratio: 1; }
.placeholder .ph-tile { filter: saturate(.75); }
.gal-empty { text-align: center; color: var(--muted); margin-top: 10px; }
.lightbox[hidden] { display: none; }
.lightbox { position: fixed; inset: 0; z-index: 250; background: rgba(2, 10, 30, .92); display: grid; place-items: center; animation: fadeIn .3s; }
@keyframes fadeIn { from { opacity: 0; } }
.lb-in { position: relative; width: min(1200px, 100%); height: 100%; display: grid; grid-template-columns: 60px 1fr 60px; align-items: center; padding: 20px; }
.lb-in figure { margin: 0; display: flex; flex-direction: column; align-items: center; gap: 12px; animation: zoomIn .4s var(--ease); }
@keyframes zoomIn { from { transform: scale(.94); opacity: 0; } }
.lb-in img { max-height: calc(100svh - 140px); width: auto; border-radius: 12px; }
.lb-in figcaption { color: #fff; text-align: center; display: flex; flex-direction: column; gap: 2px; }
.lb-in figcaption span { color: #9aa6c7; font-size: 14px; }
.lb-in button { background: rgba(255, 255, 255, .1); border: 0; color: #fff; border-radius: 50%; width: 50px; height: 50px; display: grid; place-items: center; }
.lb-x { position: absolute; right: 20px; top: 20px; }

/* ---------------- branches ---------------- */
.branches { background: var(--sand); }
.branch-grid { display: grid; grid-template-columns: 1.25fr 1fr; gap: 40px; align-items: center; }
.blist { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 12px; }
.blist .bcard.ho { grid-column: 1 / -1; }
.offices .blist { grid-template-columns: repeat(3, 1fr); }
.bcard { display: flex; gap: 14px; align-items: center; background: var(--paper); border-radius: 16px; padding: 14px 16px; box-shadow: var(--shadow); transition: transform .3s var(--ease), box-shadow .3s; outline: none; }
.bcard.lit { transform: translateX(6px); box-shadow: 0 0 0 2px var(--olive), var(--shadow); }
.bcard:focus-visible { outline: 3px solid var(--navy); outline-offset: 3px; }
.bcode { font: 800 16px var(--fd); color: #fff; background: var(--olive2); border-radius: 50%; width: 38px; height: 38px; display: grid; place-items: center; flex: none; box-shadow: 0 0 0 3px #fff, 0 4px 10px -4px rgba(0, 0, 0, .4); transition: background .3s; }
.bcard > div { min-width: 0; }
.bcard em { display: block; font-style: normal; font-size: 12px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--olive2); }
.bcard.lit .bcode { background: var(--gold); color: var(--navy3); }
.bplate { width: 42px; height: 54px; background: #fff; border-radius: 11px; padding: 5px 6px; flex: none; display: grid; place-items: center; box-shadow: 0 6px 16px -8px rgba(0, 0, 0, .5); }
.bcard.ho { background: var(--navy); }
.bcard.ho b { color: #fff; }
.bcard.ho em, .bcard.ho .bdir { color: var(--gold); }
.bcard.ho small, .bcard.ho small a { color: #c9d3f0; }
.bdir { display: inline-flex; gap: 4px; align-items: center; margin-top: 4px; font-size: 13.5px; font-weight: 600; text-decoration: none; }
.bcard b { font-family: var(--fd); font-size: 20px; color: var(--navy); display: block; line-height: 1.2; }
.bcard small { display: flex; gap: 6px; align-items: center; color: var(--muted); font-size: 14px; }

/* team + news */
.team { background: var(--paper); }
.news { background: var(--cream); }
.news-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 22px; }
.post { background: var(--paper); border-radius: var(--r); overflow: hidden; box-shadow: var(--shadow); transition: transform .4s var(--ease); }
.post:hover { transform: translateY(-4px); }
.post-img { aspect-ratio: 16 / 9; overflow: hidden; background: var(--sand); }
.post-img img, .post-img svg { width: 100%; height: 100%; object-fit: cover; display: block; }
.post-b { padding: 20px 22px 8px; }
.post time { color: var(--olive2); font-weight: 600; font-size: 14px; }
.post h3 { font-size: 23px; color: var(--navy); margin: 4px 0 8px; }
.post p { color: var(--muted); }

/* contact */
.contact { background: radial-gradient(120% 120% at 0% 0%, var(--navy2), var(--navy) 45%, var(--navy3)); color: #fff; overflow: hidden; }
.contact::before { content: ""; position: absolute; width: 520px; height: 520px; right: -160px; bottom: -200px; border-radius: 50%; background: radial-gradient(circle, rgba(144, 164, 98, .45), transparent 70%); }
.contact-grid { display: grid; grid-template-columns: 1fr 1.05fr; gap: 50px; position: relative; }
.contact h2 { font-size: clamp(32px, 4.4vw, 52px); font-weight: 800; margin-bottom: 14px; }
.contact .lead { color: #d3dbf3; font-size: 18px; }
.cinfo { list-style: none; padding: 0; margin: 26px 0; display: grid; gap: 14px; }
.cinfo li { display: flex; gap: 14px; align-items: flex-start; }
.cinfo .ic { color: var(--olive-l); margin-top: 3px; }
.cinfo a { color: #fff; }
.cinfo small { color: #a9b6dc; }
.contact.light { background: var(--paper); color: var(--ink); }
.contact.light::before { background: radial-gradient(circle, rgba(144, 164, 98, .22), transparent 70%); top: -200px; bottom: auto; }
.contact.light h2 { color: var(--navy); font-size: clamp(28px, 3.4vw, 40px); }
.contact.light .cinfo .ic { color: var(--olive2); }
.contact.light .cinfo a { color: var(--navy2); }
.contact.light .cinfo small, .contact.light .socials small { color: var(--muted); }
.contact.light .socials a { background: var(--sand); color: var(--navy); }
.contact.light .cform { background: #fff; box-shadow: var(--shadow); border: 1px solid var(--line); }
.socials { display: flex; gap: 10px; align-items: center; }
.socials small { color: #a9b6dc; margin-right: 6px; }
.socials a { width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; background: rgba(255, 255, 255, .1); color: #fff; transition: background .3s, transform .3s; }
.socials a:hover { background: var(--olive); transform: translateY(-2px); }
.cform { background: rgba(255, 255, 255, .97); color: var(--ink); border-radius: 26px; padding: 28px; display: grid; gap: 14px; box-shadow: 0 40px 80px -30px rgba(0, 0, 0, .6); }
.cform label { display: grid; gap: 5px; font-weight: 600; font-size: 15px; }
.cform input, .cform textarea { font: inherit; font-weight: 400; border: 1.5px solid #d7d2c3; border-radius: 12px; padding: 11px 14px; background: #fff; color: var(--ink); width: 100%; transition: border-color .2s, box-shadow .2s; }
.cform input:focus, .cform textarea:focus { outline: none; border-color: var(--navy2); box-shadow: 0 0 0 4px rgba(11, 58, 168, .12); }
.cform .two { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.cform .btn { justify-self: start; }
.form-msg { margin: 0; font-weight: 600; min-height: 1px; }
.form-msg.good { color: #1b6e3f; }
.form-msg.bad { color: #b3261e; }

/* footer */
.foot { background: var(--navy3); color: #b9c3e2; padding: 56px 0 30px; }
.foot-top { display: flex; flex-wrap: wrap; gap: 32px; padding-bottom: 32px; border-bottom: 1px solid rgba(255, 255, 255, .1); }
.foot-top > .foot-col { flex: 1 1 120px; }
.foot-col { display: grid; gap: 8px; align-content: start; font-size: 15px; }
.foot-col b { color: #fff; font-family: var(--fd); font-size: 17px; margin-bottom: 4px; }
.foot-bottom { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; padding-top: 22px; }
.to-top { background: none; border: 0; padding: 0; color: #dfe5f7; }
.to-top:hover { color: var(--gold); }
.foot-brand { display: flex; gap: 16px; align-items: flex-start; flex: 1.7 1 260px; }
.foot-brand .foot-id { margin-top: 10px; font-size: 14px; color: #8f9cc7; line-height: 1.6; }
.foot-logo { width: 46px; background: #fff; border-radius: 12px; padding: 6px 7px; flex: none; }
.foot-brand b { color: #fff; font-family: var(--fd); font-size: 20px; }
.foot-brand p { margin: 0; }
.foot-links { display: flex; gap: 18px; flex-wrap: wrap; }
.foot a { color: #dfe5f7; text-decoration: none; }
.foot a:hover { color: var(--gold); }
.foot small { color: #8391bd; }
.foot-end { display: flex; gap: 20px; align-items: center; }
.foot-end a:first-child { color: #8391bd; }

/* ---------------- menu: programmes drop-down ---------------- */
.m-only { display: none; }
.nav-links a.on::after { transform: scaleX(1); }
.dd { position: relative; display: flex; align-items: center; }
.dd-btn { background: none; border: 0; color: inherit; padding: 4px; margin-left: -10px; border-radius: 8px; display: grid; place-items: center; opacity: .85; }
.dd-menu { position: absolute; top: calc(100% + 12px); left: -12px; min-width: 280px; background: #fff; color: var(--ink); border-radius: 18px; padding: 8px; display: grid; gap: 2px; box-shadow: 0 30px 60px -20px rgba(2, 20, 70, .45), 0 0 0 1px rgba(2, 20, 70, .06); opacity: 0; transform: translateY(-6px); pointer-events: none; transition: opacity .25s, transform .25s var(--ease); }
.dd-menu::before { content: ""; position: absolute; left: 0; right: 0; top: -14px; height: 14px; }
/* A panel opens on hover or from its button (the keyboard way); Escape hides
   it until the pointer leaves (.shut). */
.dd:hover .dd-menu, .dd.open .dd-menu { opacity: 1; transform: none; pointer-events: auto; }
.dd.shut .dd-menu { opacity: 0; transform: translateY(-6px); pointer-events: none; }
/* On desktop a closed panel is also hidden from the keyboard, so Tab skips its
   links. It fades in, and hides at once when it closes, so a quick Tab never
   lands in a panel that is on its way out. */
@media (min-width: 921px) {
  .dd-menu { visibility: hidden; transition: opacity .25s, transform .25s var(--ease), visibility 0s; }
  .dd:hover .dd-menu, .dd.open .dd-menu { visibility: visible; transition-delay: 0s; }
  .dd.shut .dd-menu { visibility: hidden; }
}
.nav-links .dd-menu a { display: flex; gap: 12px; align-items: center; padding: 10px 12px; border-radius: 12px; color: var(--ink); font-size: 15.5px; }
.nav-links .dd-menu a::after { display: none; }
.dd-menu a:hover, .dd-menu a.on { background: var(--sand); color: var(--navy); }
.dd-menu .ic { color: var(--olive2); }
.nav-links .dd-menu .dd-all { justify-content: space-between; border-top: 1px solid var(--line); border-radius: 0 0 12px 12px; margin-top: 4px; color: var(--navy2); font-weight: 600; }
main.page { animation: pageIn .6s var(--ease); }
@keyframes pageIn { from { opacity: 0; } }
@keyframes show { to { opacity: 1; } }

/* ---------------- shared bits ---------------- */
.btn.line { background: transparent; color: var(--navy); box-shadow: inset 0 0 0 1.5px var(--navy); }
.btn.line:hover { background: var(--navy); color: #fff; }
.sec-more { text-align: center; margin: 34px 0 0; }
.chips.left { justify-content: flex-start; }
a.chip { display: inline-flex; gap: 8px; align-items: center; color: var(--navy); text-decoration: none; padding: 8px 16px; }
a.chip:hover { border-color: var(--navy); }
.crumbs { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; font-size: 14px; color: #b8c4e8; margin-bottom: 14px; }
.crumbs a { color: #e6ecff; text-decoration: none; }
.crumbs a:hover { text-decoration: underline; }
.crumbs i { font-style: normal; opacity: .5; }

/* ---------------- inner page banner ---------------- */
.page-hero { position: relative; min-height: clamp(380px, 54vh, 540px); display: flex; align-items: flex-end; color: #fff; overflow: hidden; isolation: isolate; padding: 130px 0 132px; background: radial-gradient(110% 120% at 85% 0%, #0b3aa8 0%, #042272 45%, #021446 100%); }
.ph-img { position: absolute; inset: 0; z-index: -3; background-size: cover; background-position: center; opacity: .4; }
.page-hero.has-img::before { content: ""; position: absolute; inset: 0; z-index: -2; background: linear-gradient(90deg, rgba(2, 20, 70, .92), rgba(2, 20, 70, .45)); }
.ph-glow { position: absolute; z-index: -1; width: 560px; height: 560px; right: 6%; top: -180px; border-radius: 50%; background: radial-gradient(circle, rgba(242, 182, 50, .32), transparent 65%); animation: glowPulse 7s ease-in-out infinite alternate; }
@keyframes glowPulse { to { transform: translate(-40px, 30px) scale(1.12); opacity: .7; } }
.ph-ic { position: absolute; z-index: -1; right: 7%; top: 44%; transform: translateY(-50%) rotate(-8deg); color: rgba(255, 255, 255, .08); }
/* Taller on wide screens, so the hill crests and palm crowns are not sliced
   off: sliced to the width, the band keeps at least 9.5% of 1600 = 152 of
   the drawing's 260 units at every width (down to y 108; the crowns and
   crests reach y 116). No cap: even 3840px wide it is 365px, inside the
   banner and behind its text. */
.band-art { position: absolute; left: 0; bottom: -1px; z-index: -1; width: 100%; height: max(130px, 9.5vw); }
.ph-in { position: relative; }
.ph-title { font-size: clamp(36px, 5.6vw, 66px); font-weight: 800; max-width: 18ch; margin: 6px 0 14px; }
.ph-sub { font-size: clamp(17px, 1.5vw, 20px); color: #dfe6fa; max-width: 58ch; margin: 0; }
.page-hero .crumbs, .page-hero .eyebrow, .ph-sub, .bd-hero .crumbs, .bd-hero .eyebrow { animation: appear .8s .35s var(--ease) both; }
.ph-sub { animation-delay: .6s; }

/* ---------------- home banner: the growing village ---------------- */
.home-hero .hero-in { padding: 130px 0 190px; padding: clamp(96px, 13svh, 130px) 0 clamp(124px, 19svh, 190px); }
/* On short laptop screens the headline shrinks with the height, so the year
   bar stays on the first screen. */
.home-hero .hero-title { font-size: clamp(38px, min(6.4vw, 9svh), 78px); }
.home-hero .hero-kick { color: #d3e3a3; }
/* The drawing is bright, so the menu bar and the text sit on a darker veil. */
@media (min-width: 761px) {
  .home-hero .hero-art::after { background: linear-gradient(180deg, rgba(2, 20, 70, .78) 0, rgba(2, 20, 70, .4) 90px, rgba(2, 20, 70, 0) 170px), linear-gradient(90deg, rgba(2, 20, 70, .84) 0%, rgba(2, 20, 70, .62) 48%, rgba(2, 20, 70, .12) 74%, transparent 86%); }
}
.v-art svg { width: 100%; height: 100%; display: block; }
.badge.hero-badge { position: absolute; right: max(20px, calc((100% - 1200px) / 2)); top: 118px; width: 158px; opacity: 0; }
.revealed .hero-badge, .no-intro .hero-badge { animation: badgeIn 1.1s .9s var(--ease) forwards; }
@keyframes badgeIn { from { opacity: 0; transform: scale(.6) rotate(-40deg); } to { opacity: 1; transform: none; } }
.badge { position: relative; width: 160px; aspect-ratio: 1; }
.badge svg { width: 100%; height: 100%; overflow: visible; display: block; }
.b-bg { fill: rgba(2, 20, 70, .62); stroke: rgba(255, 255, 255, .4); stroke-width: 1.5; }
.b-line { fill: none; stroke: var(--gold); stroke-width: 1.5; stroke-dasharray: 3 5; }
.b-ring { transform-origin: 100px 100px; animation: spin 40s linear infinite; }
.home-hero:has(svg.v-paused) .b-ring, .home-hero:has(svg.v-held) .b-ring { animation-play-state: paused; }
.b-ring text { font: 700 14px var(--fd); letter-spacing: .06em; fill: #fff; }
/* Bangla is never letter-spaced: larger, with the spare room between words (fitBadges) */
.b-ring text:lang(bn) { font-size: 19px; letter-spacing: 0; }
.b-num { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; color: #fff; line-height: 1; }
.b-num b { font: 800 50px/1 var(--fd); color: var(--gold); font-variant-numeric: tabular-nums; }
.b-num small { font-weight: 600; font-size: 13px; letter-spacing: .1em; text-transform: uppercase; margin-top: 2px; }
@keyframes spin { to { transform: rotate(360deg); } }
.vt { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; padding: 30px 0 22px; background: linear-gradient(rgba(2, 20, 70, 0), rgba(2, 20, 70, .66)); }
.vt-in { display: grid; grid-template-columns: auto 1fr auto; align-items: end; gap: 26px; }
.vt-year b { display: block; min-width: 3ch; font: 800 clamp(36px, 4.2vw, 56px)/1 var(--fd); color: var(--gold); font-variant-numeric: tabular-nums; text-shadow: 0 4px 18px rgba(0, 0, 0, .35); }
.vt-track { position: relative; height: 48px; margin: 0 14px; }
.vt-rail { position: absolute; left: 0; right: 0; top: 11px; height: 4px; border-radius: 4px; background: rgba(255, 255, 255, .28); overflow: hidden; }
.vt-fill { position: absolute; inset: 0; transform-origin: left; transform: scaleX(0); background: linear-gradient(90deg, var(--olive-l), var(--gold)); transition: transform .2s linear; }
.vt-tick { position: absolute; top: 0; left: calc(var(--p) * 100%); transform: translateX(-50%); display: grid; justify-items: center; gap: 7px; background: none; border: 0; padding: 0; color: #fff; font-size: 13px; font-weight: 600; opacity: .75; transition: opacity .3s; }
.vt-tick i { position: relative; width: 16px; height: 16px; margin-top: 5px; border-radius: 50%; background: #021446; border: 2.5px solid rgba(255, 255, 255, .7); transition: background .3s, border-color .3s, transform .3s var(--ease); }
/* A larger target around each dot, attached to the dot so that a neighbour
   close by on a phone cannot reach over it. */
.vt-tick i::before { content: ""; position: absolute; inset: -14px -8px; }
.vt-tick.on { opacity: 1; }
.vt-tick.on i { background: var(--gold); border-color: #fff; }
.vt-tick:hover i, .vt-tick:focus-visible i { transform: scale(1.3); }
.vt-btn { display: inline-flex; gap: 6px; align-items: center; border: 1.5px solid rgba(255, 255, 255, .55); background: rgba(2, 20, 70, .35); color: #fff; border-radius: 99px; padding: 7px 15px; font-weight: 600; font-size: 14px; backdrop-filter: blur(6px); }
.vt-btn:hover { background: rgba(2, 20, 70, .6); }
.vt-btns { display: flex; flex-wrap: wrap; gap: 8px; }
.vt-btn > span { display: inline-flex; gap: 6px; align-items: center; }
.vt.running [data-vt="replay"] { opacity: .55; }
/* Pause stops every loop in the drawing; the button then offers Play. Both
   labels share one cell, so the button keeps its width and Replay stays put. */
.vt-btn[data-vt="hold"] { display: inline-grid; }
.vt-btn[data-vt="hold"] > span { grid-area: 1 / 1; justify-content: center; }
.vt-btn .vt-off, .vt.held .vt-btn .vt-on { visibility: hidden; }
.vt.held .vt-btn .vt-off { visibility: visible; }

/* ---------------- about ---------------- */
.about-side { display: grid; gap: 22px; justify-items: center; }
.about-side .mv { width: 100%; }
.about-side .badge .b-bg { fill: var(--navy); stroke: none; }
.about-side .badge.rv { transform: scale(.8); }
.about-side .badge.rv.in { transform: none; }
.mf-hl { display: grid; gap: 16px; }
.mf-goals { display: grid; gap: 10px; margin-top: 24px; }
.mf-goals > span { font-size: 13px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--olive2); }
:lang(bn) .mf-goals > span { letter-spacing: 0; text-transform: none; font-size: 14px; }
.journey { background: var(--sand); overflow: hidden; }
.tl { list-style: none; margin: 0 auto; padding: 0; max-width: 860px; position: relative; }
.tl::before { content: ""; position: absolute; left: 100px; top: 8px; bottom: 8px; width: 3px; border-radius: 3px; background: linear-gradient(var(--olive), var(--navy2)); transform-origin: top; transform: scaleY(0); transition: transform 1.8s var(--ease); }
.tl.in::before { transform: none; }
.tl-i { display: grid; grid-template-columns: 80px 1fr; gap: 44px; padding: 12px 0; position: relative; }
.tl-i::before { content: ""; position: absolute; left: 93px; top: 24px; width: 17px; height: 17px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 0 5px var(--sand), 0 0 0 7px var(--olive); }
.tl-y { font: 800 26px/1.2 var(--fd); color: var(--navy); text-align: right; padding-top: 10px; }
.tl-c { background: var(--paper); border-radius: 16px; padding: 16px 20px; box-shadow: var(--shadow); }
.tl-c b { display: block; font-family: var(--fd); font-size: 20px; color: var(--navy); }
.tl-c p { margin: 4px 0 0; color: var(--muted); }
.jr { overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: max(20px, calc((100% - 1200px) / 2)); scrollbar-width: none; padding: 6px 0 26px; }
.jr::-webkit-scrollbar { display: none; }
.jr-track { list-style: none; margin: 0; padding: 0 max(20px, calc((100vw - 1200px) / 2)); display: flex; gap: 20px; width: max-content; position: relative; }
.jr-track::before { content: ""; position: absolute; left: max(20px, calc((100vw - 1200px) / 2)); right: max(20px, calc((100vw - 1200px) / 2)); top: 33px; height: 3px; background: repeating-linear-gradient(90deg, var(--olive) 0 14px, transparent 14px 22px); }
.jr-i { scroll-snap-align: start; width: min(300px, 78vw); position: relative; background: var(--paper); border-radius: 18px; padding: 62px 22px 20px; box-shadow: var(--shadow); }
.jr-y { position: absolute; left: 20px; top: 16px; background: var(--navy); color: #fff; border-radius: 99px; padding: 3px 14px; font: 800 20px/1.3 var(--fd); }
.jr-i b { display: block; font-family: var(--fd); font-size: 20px; color: var(--navy); }
.jr-i p { margin: 6px 0 0; color: var(--muted); font-size: 15.5px; }
.jr-foot { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.jr-btns { display: flex; gap: 8px; }
.legal { background: var(--paper); }
.legal-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 16px; }
.legal-c { display: flex; gap: 14px; align-items: flex-start; background: var(--cream); border: 1px solid var(--line); border-radius: 16px; padding: 18px; }
.legal-c .ic { color: var(--olive2); }
.legal-c b { display: block; color: var(--navy); }
.legal-c span { color: var(--muted); }
.partners-sec { background: var(--cream); }

/* ---------------- programmes and projects ---------------- */
.past-programs { background: var(--cream); }
.past-programs .prog { opacity: .92; }
.prog-page { background: var(--paper); }
.pp-grid { display: grid; grid-template-columns: 1.45fr .8fr; gap: 48px; align-items: start; }
.ticks { list-style: none; padding: 0; margin: 20px 0 0; display: grid; gap: 10px; }
.ticks li { display: flex; gap: 12px; font-weight: 500; }
.ticks li::before { content: "✓"; flex: none; width: 22px; height: 22px; margin-top: 3px; border-radius: 50%; display: grid; place-items: center; background: var(--olive); color: #fff; font-size: 13px; }
.pp-facts { position: sticky; top: 92px; background: var(--sand); border-radius: var(--r); padding: 24px; }
.pp-ic { width: 64px; height: 64px; border-radius: 18px; display: grid; place-items: center; background: var(--navy); color: var(--gold); margin-bottom: 16px; }
.pp-facts dl { margin: 0; display: grid; gap: 14px; }
.pp-facts dt { font-size: 13px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--olive2); }
.pp-facts dd { margin: 2px 0 0; font-weight: 500; }
.other-progs { background: var(--cream); }
.projects { background: var(--paper); }
.proj-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(310px, 100%), 1fr)); gap: 20px; }
.proj { display: flex; flex-direction: column; overflow: hidden; background: var(--cream); border: 1px solid var(--line); border-radius: var(--r); transition: transform .35s var(--ease), box-shadow .35s; }
.proj[hidden] { display: none; }
.proj:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
.proj-img { aspect-ratio: 16 / 9; overflow: hidden; }
.proj-img img { width: 100%; height: 100%; object-fit: cover; }
.proj-b { display: flex; flex-direction: column; gap: 8px; flex: 1; padding: 20px 22px 22px; }
.proj-top { display: flex; justify-content: space-between; align-items: center; gap: 10px; font-size: 14px; font-weight: 600; color: var(--muted); }
.pill { padding: 3px 10px; border-radius: 99px; background: #e9e4d6; color: var(--muted); font-size: 12.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.pill.on { background: #e3f0d2; color: var(--olive2); }
.proj h3 { font-size: 22px; color: var(--navy); }
.proj p { margin: 0; color: var(--muted); }
.proj dl { margin: 4px 0 0; display: grid; gap: 6px; }
.proj dl div { display: grid; grid-template-columns: 112px 1fr; gap: 8px; font-size: 14.5px; }
.proj dt { color: var(--muted); font-weight: 600; }
.proj dd { margin: 0; }
.proj-prog { margin-top: auto; padding-top: 10px; display: inline-flex; gap: 6px; align-items: center; color: var(--navy2); font-weight: 600; font-size: 14.5px; text-decoration: none; }
/* Home shows every project as a compact card: four to a row on wide
   screens, a row to swipe through on phones. */
.home-proj { grid-template-columns: repeat(auto-fill, minmax(min(250px, 100%), 1fr)); gap: 16px; }
.proj.compact .proj-b { gap: 6px; padding: 16px 18px 18px; }
.proj.compact h3 { font-size: 18px; line-height: 1.3; }
.proj.compact p { font-size: 15px; line-height: 1.5; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; line-clamp: 3; overflow: hidden; }
.proj.compact dl div { grid-template-columns: auto 1fr; font-size: 13.5px; }
.proj.compact .proj-prog { font-size: 13.5px; }
.cta-band { position: relative; overflow: hidden; padding: 58px 0; color: #fff; background: linear-gradient(120deg, var(--olive2), #485a28); }
.cta-band::before { content: ""; position: absolute; width: 420px; height: 420px; right: -120px; top: -220px; border-radius: 50%; background: radial-gradient(circle, rgba(242, 182, 50, .35), transparent 70%); }
.cta-in { position: relative; display: flex; justify-content: space-between; align-items: center; gap: 24px; flex-wrap: wrap; }
.cta-in h2 { font-size: clamp(28px, 3.4vw, 40px); }
.cta-in p { margin: 8px 0 0; color: #eef3e1; max-width: 60ch; }
.where { background: var(--paper); }
.where-grid { display: grid; grid-template-columns: .8fr 1.2fr; gap: 40px; align-items: center; }
/* Where we work: the branches by name, each with its place; the pins drop
   in one after another */
.wlist { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr)); gap: 14px; }
.wl { display: flex; gap: 14px; align-items: center; background: var(--cream); border: 1px solid var(--line); border-radius: 16px; padding: 16px 18px; }
.wl > .ic { flex: none; color: var(--olive2); }
.wl b { display: block; font: 700 20px/1.2 var(--fd); color: var(--navy); }
.wl span { display: block; color: var(--muted); font-size: 15px; line-height: 1.45; }
.wl.in > .ic { animation: wlDrop .7s calc(var(--i, 0) * 90ms + .3s) var(--ease) backwards; }
@keyframes wlDrop { from { transform: translateY(-16px); opacity: 0; } 60% { transform: translateY(2px); opacity: 1; } }
.offices { background: var(--sand); }

/* ---------------- Bangladesh map ---------------- */
.bdmap { position: relative; }
.bdmap > svg { display: block; width: 100%; height: auto; overflow: visible; }
.bd-fill { fill: #eef2e1; opacity: 0; }
.bd-fill.z { fill: #f3f5ea; opacity: 1; }
.bdmap.in .bd-country .bd-fill { animation: show .9s 1.2s forwards; }
.bd-isl path { fill: #eef2e1; stroke: var(--navy); stroke-width: 1.2; opacity: 0; }
.bdmap.in .bd-isl path { animation: show .6s 1.6s forwards; }
.bd-edge { fill: none; stroke: var(--navy); stroke-width: 2; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 1; }
.bdmap.in .bd-edge { animation: draw 2.2s .1s ease-in-out forwards; }
.bd-rivers { fill: none; stroke: #6fa7e3; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.bd-river { stroke-dasharray: 1; stroke-dashoffset: 1; }
.bdmap.in .bd-river { animation: draw 1.8s 1.3s ease-out forwards; }
.bd-rivers.z .bd-river { stroke-dashoffset: 0; }
.bd-sea-l { font: italic 600 14px var(--f); fill: #5b8fc9; letter-spacing: .12em; }
.bd-wave { fill: none; stroke: #9cc2ea; stroke-width: 2; stroke-linecap: round; animation: seaWave 4s calc(var(--i) * .7s) ease-in-out infinite; }
@keyframes seaWave { 50% { transform: translateX(10px); } }
.bd-city { opacity: 0; }
.bdmap.in .bd-city { animation: show .5s calc(1.7s + var(--i) * .08s) forwards; }
.bd-city circle, .bd-city path { fill: #5b6377; }
.bd-city.cap path { fill: var(--red); }
.bd-city text { font: 600 12.5px var(--f); fill: #5b6377; paint-order: stroke; stroke: #fbf7ef; stroke-width: 3px; }
.bd-ring { fill: rgba(242, 182, 50, .2); stroke: var(--navy); stroke-width: 1.6; stroke-dasharray: 4 3; opacity: 0; }
.bdmap.in .bd-ring { animation: show .5s 2s forwards; }
.bd-conn { fill: none; stroke: var(--navy); stroke-width: 1.4; stroke-dasharray: 1; stroke-dashoffset: 1; opacity: .55; }
.bdmap.in .bd-conn { animation: draw .8s 2.2s ease-out forwards; }
.bd-lens { filter: drop-shadow(0 14px 22px rgba(4, 34, 114, .25)); }
.bd-lens-in { transform-box: fill-box; transform-origin: center; transform: scale(0); }
.bdmap.in .bd-lens-in { animation: lensIn .9s 2.5s cubic-bezier(.2, .9, .3, 1.15) forwards; }
@keyframes lensIn { to { transform: scale(1); } }
.bd-lens-bg { fill: #f8f6ee; }
.bd-lens-rim { fill: none; stroke: var(--navy); stroke-width: 3; }
.bd-local circle { fill: #8a93a8; }
.bd-local text { font: 600 11.5px var(--f); fill: #6b7387; }
.bd-local.city circle { fill: rgba(91, 99, 119, .1); stroke: rgba(91, 99, 119, .4); stroke-dasharray: 3 3; }
.bd-local.city text { font-weight: 700; fill: #4b5368; }
.bd-pin { cursor: pointer; outline: none; }
.bd-drop { transform: translateY(-60px); opacity: 0; }
.bdmap.in .bd-drop { animation: pinDrop .7s calc(3.1s + var(--i) * .14s) cubic-bezier(.3, 1.5, .5, 1) forwards; }
@keyframes pinDrop { to { transform: none; opacity: 1; } }
.bd-head { fill: var(--olive2); stroke: #fff; stroke-width: 2.5; transition: fill .3s; }
.bd-n { font: 800 13px var(--fd); fill: #fff; pointer-events: none; }
.bd-shadow { fill: rgba(0, 0, 0, .2); }
.bd-pulse { fill: var(--olive); opacity: 0; transform-box: fill-box; transform-origin: center; }
.bdmap.in .bd-pulse { animation: ring 2.6s calc(3.8s + var(--i) * .3s) ease-out infinite; }
.bd-label { font: 700 13px var(--fd); fill: var(--navy); paint-order: stroke; stroke: #fff; stroke-width: 4px; stroke-linejoin: round; opacity: 0; pointer-events: none; }
.bdmap.in .bd-label { animation: show .5s calc(3.5s + var(--i) * .14s) forwards; }
.bd-pin:hover .bd-head, .bd-pin:focus-visible .bd-head, .bd-pin.lit .bd-head { fill: var(--gold); }
.bd-pin:focus-visible .bd-head { stroke: var(--navy); stroke-width: 3; }
.bd-pin.lit .bd-label { fill: var(--olive2); }
.bd-plate { fill: #fff; stroke: var(--navy); stroke-width: 2; }
.bd-plate-tip { fill: var(--navy); }
.bd-pin.ho.lit .bd-plate, .bd-pin.ho:hover .bd-plate { stroke: var(--gold); stroke-width: 3; }
.bd-pop { position: absolute; z-index: 5; width: 240px; display: grid; gap: 4px; background: #fff; border-radius: 16px; padding: 16px 18px; font-size: 14.5px; box-shadow: 0 24px 50px -20px rgba(2, 20, 70, .5), 0 0 0 1px rgba(2, 20, 70, .06); animation: zoomIn .25s var(--ease); }
.bd-pop[hidden] { display: none; }
.bd-pop b { font-family: var(--fd); font-size: 19px; color: var(--navy); padding-right: 26px; }
.bd-pop em { font-style: normal; font-size: 13px; font-weight: 600; color: var(--olive2); }
.bd-pop p { margin: 4px 0; color: var(--muted); }
.bd-pop a { display: inline-flex; gap: 6px; align-items: center; font-weight: 600; text-decoration: none; }
.bd-x { position: absolute; right: 8px; top: 8px; width: 28px; height: 28px; border: 0; border-radius: 50%; display: grid; place-items: center; background: var(--sand); color: var(--muted); }

/* ---------------- Bangladesh Corner ---------------- */
.bd-hero { position: relative; isolation: isolate; overflow: hidden; min-height: clamp(460px, 72vh, 660px); display: flex; align-items: center; color: #fff; padding: 120px 0 150px; }
.bdh-art { position: absolute; inset: 0; z-index: -1; }
.bdh-art svg { width: 100%; height: 100%; display: block; }
.bdh-art::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(3, 35, 26, .88) 0%, rgba(3, 35, 26, .45) 50%, transparent 78%); }
/* Up to 960px the intro's lines run on over the sun. The shading never
   clears there, so the pale text keeps 4.5:1 on the red disc and its glow;
   from 62% it stays at 30% (20% is the least for 4.5:1), so the whole sun
   gets the same light shade and stays plainly red. */
@media (max-width: 960px) {
  .bdh-art::after { background: linear-gradient(90deg, rgba(3, 35, 26, .88) 0%, rgba(3, 35, 26, .42) 45%, rgba(3, 35, 26, .3) 62%); }
}
.bdh-in .ph-title { max-width: 13ch; }
.bdh-sun { animation: rise 3.5s .3s var(--ease) both; transform-origin: 1060px 500px; }
.bdh-bird { animation: fly 34s var(--d) linear infinite; }
.bdj { background: linear-gradient(var(--cream), #fff 25%, #fff 75%, var(--cream)); }
/* The journey runs sideways, left to right, along a line with each event's
   node on it and its card below. Without the script, or where a card is too
   tall for the window, it is a strip the reader scrolls sideways
   (.bdj-pin). With it (.pinned), the strip holds still under the menu bars
   while the page scrolls, and the page's scroll carries the journey along
   (bdcorner.js sets the section's height and moves the road). */
.bdj { --pt: 120px; }
.bdj-pin { overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: thin; padding: 10px 0 24px; }
.bdj-road { position: relative; display: flex; align-items: flex-start; gap: 26px; width: max-content; padding: 4px max(20px, calc((100vw - 1200px) / 2)) 10px; }
.bdj.pinned { padding: 0; }
.bdj.pinned .bdj-pin { position: sticky; top: var(--pt); height: calc(100vh - var(--pt)); height: calc(100dvh - var(--pt)); overflow: clip; display: flex; flex-direction: column; justify-content: center; padding: 0; }
.bdj.pinned .bdj-road { will-change: transform; }
/* where the reader is on the journey, under it while it is held */
.bdj-hint { display: none; }
.bdj.pinned .bdj-hint { display: flex; align-items: center; gap: 10px; width: min(1200px, 100% - 40px); margin: 0 auto 14px; color: var(--muted); font-size: 14px; font-weight: 600; }
.bdj-hint i { font-style: normal; display: inline-block; animation: bdjNudge 1.6s ease-in-out infinite; }
@keyframes bdjNudge { 50% { transform: translateX(6px); } }
/* The line runs the road's whole length through the nodes' middles; its
   fill grows to the right as the reader travels on. */
.bdj-line { position: absolute; left: 0; right: 0; top: 34px; height: 6px; margin-top: -3px; background: #dfe8dc; overflow: hidden; }
.bdj-fill { position: absolute; inset: 0; transform-origin: left; transform: scaleX(0); background: linear-gradient(90deg, #006a4e, #2e8b57 60%, #f42a41); }
.bdj-dec { flex: none; position: relative; z-index: 1; display: flex; align-items: center; height: 52px; margin: 4px 0 0; }
.bdj-dec span { display: inline-block; padding: 11px 26px; border-radius: 99px; background: #fff; color: #006a4e; font: 800 clamp(20px, 2.4vw, 28px)/1 var(--fd); box-shadow: 0 0 0 3px #006a4e, 0 0 0 10px #fff; transition: background .4s, color .4s; white-space: nowrap; }
.bdj-dec.past span { background: #006a4e; color: #fff; }
.bdj-ev { flex: none; position: relative; display: flex; flex-direction: column; align-items: center; gap: 22px; width: clamp(270px, 82vw, 340px); }
.bdj-node { position: relative; z-index: 1; width: 52px; height: 52px; margin-top: 4px; border-radius: 50%; display: grid; place-items: center; background: #fff; color: #006a4e; box-shadow: 0 0 0 3px #cfe0cf, 0 0 0 9px #fff; transition: background .4s, color .4s, box-shadow .4s var(--ease); }
.bdj-ev.past .bdj-node { background: #006a4e; color: #fff; box-shadow: 0 0 0 4.5px #006a4e, 0 0 0 10.5px #fff; }
/* a short stem joins each card to its node */
.bdj-node::after { content: ""; position: absolute; left: 50%; top: 100%; width: 2px; height: 22px; margin-left: -1px; background: #cfe0cf; }
.bdj-card { align-self: stretch; background: #fff; border-radius: 18px; padding: 16px 20px 18px; box-shadow: var(--shadow); border-top: 4px solid #006a4e; }
.bdj-ev:nth-of-type(3n) .bdj-card { border-top-color: #f42a41; }
.bdj-card time { font-size: 14px; font-weight: 700; color: #c81f33; letter-spacing: .02em; }
.bdj-card h3 { margin: 4px 0 6px; font-size: 20px; line-height: 1.25; color: #063d2e; }
.bdj-card p { margin: 0; color: var(--muted); font-size: 15.5px; line-height: 1.55; }
/* Cards above and below the line by turns (.alt), each pair overlapping
   the next so the road stays short; the line runs through the middle. */
.bdj.alt .bdj-road { align-items: stretch; padding-block: 4px; }
.bdj.alt .bdj-line { top: 50%; }
.bdj.alt .bdj-ev { display: grid; grid-template-rows: 1fr 60px 1fr; justify-items: center; gap: 0; width: 440px; }
.bdj.alt .bdj-ev + .bdj-ev { margin-left: -190px; }
.bdj.alt .bdj-node { grid-row: 2; align-self: center; margin: 0; }
.bdj.alt .bdj-ev.u .bdj-card { grid-row: 1; align-self: end; margin-bottom: 16px; }
.bdj.alt .bdj-ev.d .bdj-card { grid-row: 3; align-self: start; margin-top: 16px; }
.bdj.alt .bdj-node::after { height: 16px; }
.bdj.alt .bdj-card { justify-self: stretch; }
.bdj.clamp .bdj-card p:not(.bdj-src) { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: var(--lines, 6); overflow: hidden; }
.bdj.clamp .bdj-card .bdj-src, .bdj.clamp .bdj-hint { display: none; }
.bdj.clamp .bdj-card { padding: 12px 18px 14px; }
.bdj.clamp .bdj-card h3 { font-size: 18px; margin: 2px 0 4px; }
.bdj.clamp .bdj-card p:not(.bdj-src) { font-size: 15px; line-height: 1.5; }
.bdj.clamp .bdj-art { width: 60px; height: 60px; }
.bdj.clamp .bdj-more { margin-top: 4px; }
.bdj-more { display: inline-flex; margin: 8px 0 0; padding: 0; border: 0; background: none; color: #006a4e; font: inherit; font-size: 14px; font-weight: 700; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.bdj-more[hidden] { display: none; }
.bdj-dlg .bdj-card { box-shadow: none; padding: 0; border: 0; border-radius: 0; }
.bdj-dlg .bdj-card h3 { padding-right: 34px; }
.bdj.alt .bdj-ev.u .bdj-node::after { top: auto; bottom: 100%; }
.bdj.alt .bdj-ev.u .bdj-card.rv { transform: translateY(-34px); }
.bdj.alt .bdj-ev.u .bdj-card.rv.in, .bdj.alt .bdj-ev.u .bdj-card.rv:focus-within { transform: none; }
.bdj.alt .bdj-dec { align-self: center; margin: 0; }
/* Phones read the journey down the page, along a line at the left. */
@media (max-width: 760px) {
  .bdj-pin { overflow: visible; padding: 0; }
  .bdj-road { display: block; width: auto; padding: 6px 20px 0; }
  .bdj-line { left: 46px; right: auto; top: 0; bottom: 140px; width: 6px; height: auto; margin: 0 0 0 -3px; }
  .bdj-fill { transform-origin: top; transform: scaleY(0); background: linear-gradient(#006a4e, #2e8b57 60%, #f42a41); }
  .bdj-dec { height: auto; margin: 44px 0 24px; }
  .bdj-dec:first-of-type { margin-top: 0; }
  .bdj-ev { display: grid; grid-template-columns: 52px 1fr; align-items: center; gap: 16px; width: auto; margin: 18px 0; }
  .bdj-node { width: 46px; height: 46px; margin: 0 0 0 3px; }
  .bdj-node::after { display: none; }
}
.bdj-today { flex: none; position: relative; z-index: 1; width: clamp(260px, 80vw, 400px); margin: 100px 0 0; padding: 26px; text-align: center; background: #fff; border-radius: 24px; box-shadow: var(--shadow); }
.bdj.alt .bdj-today { align-self: center; margin: 60px 0 0; }
@media (max-width: 760px) { .bdj-today { width: auto; max-width: 520px; margin: 70px auto 0; } }
.bdj-flag { display: block; width: 110px; margin: -76px auto 8px; }
.bdj-flag svg { width: 100%; display: block; }
.sym-wave { animation: flagWave 3s ease-in-out infinite; transform-box: fill-box; transform-origin: 0 50%; }
@keyframes flagWave { 50% { transform: skewY(-3deg) scaleX(.97); } }
.bdj-today b { display: block; font: 800 26px var(--fd); color: #006a4e; }
.bdj-today p { margin: 6px 0 0; color: var(--muted); }
.bd-symbols { background: #063d2e; color: #fff; }
.bd-symbols .sec-head h2 { color: #fff; }
.bd-symbols .sec-head p { color: #cfe3d8; }
.sym-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.sym { margin: 0; padding: 20px 18px; text-align: center; border-radius: 20px; background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .12); transition: transform .35s var(--ease), background .35s; }
.sym:hover { transform: translateY(-5px); background: rgba(255, 255, 255, .1); }
.sym-art { width: 112px; height: 112px; margin: 0 auto 12px; border-radius: 50%; display: grid; place-items: center; background: #fbf7ef; }
.sym-art svg { width: 86px; height: 86px; }
.sym figcaption b { display: block; font-family: var(--fd); font-size: 19px; }
.sym figcaption span { color: #cfe3d8; font-size: 15px; }
.sym-notes { animation: notes 2.4s ease-in-out infinite; }
@keyframes notes { 50% { opacity: .3; transform: translateX(3px); } }
.sym-tail { transform-box: fill-box; transform-origin: 0 100%; animation: tailFlick 3.6s ease-in-out infinite; }
@keyframes tailFlick { 0%, 70%, 100% { transform: none; } 80% { transform: rotate(-10deg); } }
.sym-swim { animation: swim 3s ease-in-out infinite alternate; }
@keyframes swim { to { transform: translateX(-4px) rotate(-2deg); } }
.bd-note { display: flex; gap: 8px; justify-content: center; align-items: center; margin: 0 auto; padding: 26px 0 44px; color: var(--muted); font-size: 14.5px; text-align: center; }
html:has(.subnav) { scroll-padding-top: 132px; }
.subnav { position: sticky; top: 66px; z-index: 50; background: rgba(251, 247, 239, .94); backdrop-filter: blur(12px); border-bottom: 1px solid var(--line); }
.subnav .wrap { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; padding: 8px 6px; }
.subnav .wrap::-webkit-scrollbar { display: none; }
.subnav a { flex: none; padding: 7px 15px; border-radius: 99px; color: var(--muted); font-weight: 600; font-size: 15px; text-decoration: none; transition: background .25s, color .25s; }
.subnav a:hover { color: var(--navy); }
.subnav a.on { background: var(--navy); color: #fff; }

/* ---------------- global goals ---------------- */
.goal-row { display: flex; flex-wrap: wrap; gap: 8px; }
.proj .goal-row { margin-top: 6px; }
/* The kites keep to the right of the banner, clear of the title; narrower
   screens have no room for them. */
.kites { position: absolute; inset: 0 0 0 auto; z-index: -1; width: min(46%, 760px); height: 100%; pointer-events: none; }
@media (max-width: 1199px) { .kites { display: none; } }
.kite { animation: kiteUp 1.2s calc(.3s + var(--i) * .15s) var(--ease) both, kiteSway 3.4s calc(1.5s + var(--i) * .15s) ease-in-out 4 alternate; }
@keyframes kiteUp { from { transform: translate(-40px, 220px) rotate(-14deg); opacity: 0; } }
@keyframes kiteSway { from { transform: rotate(-4deg); } to { transform: rotate(4deg); } }
.kite-n { font: 800 21px var(--fd); fill: var(--navy); }
.sdg { background: var(--cream); }
.sdg-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(310px, 1fr)); gap: 20px; }
.sdg-t { background: var(--paper); border-radius: var(--r); padding: 26px; box-shadow: var(--shadow); border-top: 6px solid var(--g); display: flex; flex-direction: column; gap: 14px; scroll-margin-top: 96px; }
.sdg-t[hidden] { display: none; }
.sdg-h { display: flex; gap: 16px; align-items: center; }
.sdg-h small { display: block; font-weight: 700; font-size: 13px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.sdg-h h3 { font-size: 24px; color: var(--navy); overflow-wrap: break-word; }
.sdg-h > div { min-width: 0; }
@supports (hyphenate-limit-chars: 12 6 4) { .sdg-h h3 { hyphens: auto; hyphenate-limit-chars: 12 6 4; } }
.sdg-t .prose { font-size: 17px; }
.sdg-t .prose p:last-child { margin: 0; }
.sdg-figs { margin: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 12px; }
.sdg-figs div { background: var(--cream); border-radius: 14px; padding: 12px 14px; }
.sdg-figs dt { font: 800 28px/1.1 var(--fd); color: var(--navy); font-variant-numeric: tabular-nums; }
.sdg-figs dd { margin: 2px 0 0; font-size: 14.5px; color: var(--muted); }
.sdg-figs small { display: block; font-size: 12.5px; }
.sdg-through { display: grid; gap: 8px; }
.sdg-through > span { font-size: 13px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--olive2); }
.sdg-through .chips { margin: 0; }
.sdg-more { font-weight: 700; color: var(--navy2); display: inline-flex; gap: 6px; align-items: center; text-decoration: none; }
.sdg-measure { background: var(--paper); }
.measure { display: grid; grid-template-columns: 1.3fr 1fr; gap: 48px; align-items: start; }
.measure-date { display: flex; gap: 8px; align-items: center; color: var(--muted); font-weight: 600; }
.measure-note { display: flex; gap: 16px; background: var(--sand); border-radius: var(--r); padding: 24px; color: #2a3147; }
.measure-note .ic { color: var(--olive2); flex: none; }
.measure-note a { font-weight: 700; display: inline-flex; gap: 6px; align-items: center; }
.goals-strip { background: var(--cream); }

/* ---------------- about: at a glance ---------------- */
/* Clipped so the fact card's tilt-in never widens the page on phones. */
.glance { background: var(--sand); overflow: hidden; overflow: clip; }
.pb { position: relative; display: grid; grid-template-columns: 1.15fr 1fr; background: #fffdf6; border-radius: 22px; box-shadow: 0 40px 80px -40px rgba(4, 34, 114, .45), 0 0 0 1px var(--line); perspective: 1600px; }
.pb-page { padding: 40px 44px; background-image: repeating-linear-gradient(180deg, transparent 0 39px, rgba(4, 34, 114, .06) 39px 40px); background-position: 0 30px; }
.pb-l { border-right: 2px dashed rgba(4, 34, 114, .16); transform-origin: right center; transition: transform .7s .1s var(--ease); }
.pb.rv .pb-l { transform: rotateY(-14deg); }
.pb.rv.in .pb-l { transform: none; }
.pb-tag { display: inline-block; background: var(--navy); color: #fff; font: 700 13px var(--fd); letter-spacing: .12em; padding: 4px 12px; border-radius: 6px; margin-bottom: 12px; }
.pb h2 { font-size: clamp(28px, 3.4vw, 40px); color: var(--navy); margin-bottom: 18px; }
.pb-rows { margin: 0; display: grid; }
.pb-rows div { display: grid; grid-template-columns: 150px 1fr; gap: 14px; padding: 9px 0; border-bottom: 1px solid rgba(4, 34, 114, .1); opacity: 0; transform: translateX(-8px); transition: opacity .4s, transform .4s var(--ease); transition-delay: calc(.35s + var(--i) * 60ms); }
.pb.in .pb-rows div { opacity: 1; transform: none; }
.pb-rows dt { font-size: 13px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--olive2); padding-top: 3px; }
.pb-rows dd { margin: 0; font-weight: 600; }
.pb-r { display: flex; flex-direction: column; gap: 22px; align-items: flex-start; }
.pb-seal { width: 132px; align-self: center; }
.pb-seal .b-bg { fill: var(--navy); stroke: none; }
.pb-block { width: 100%; }
.pb-block h3 { font: 700 13px var(--f); letter-spacing: .06em; text-transform: uppercase; color: var(--olive2); margin-bottom: 8px; }
.pb-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.pb-list li { display: grid; }
.pb-list b { color: var(--navy); }
.pb-list span { color: var(--muted); font-size: 15px; font-variant-numeric: tabular-nums; }
.pb-note { color: var(--muted); font-size: 15px; margin: 0; }
.pb-print { margin-top: auto; }
.pb-ribbon { position: absolute; top: -6px; right: 64px; width: 26px; height: 92px; background: linear-gradient(var(--gold), #d99a10); clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 80%, 0 100%); transform: translateY(-10px); transition: transform .5s .6s var(--ease); }
.pb.in .pb-ribbon { transform: none; }
.print-only { display: none; }

/* ---------------- about: story, mission, people ---------------- */
.belief { margin: 0; position: relative; background: var(--navy); color: #fff; border-radius: var(--r); padding: 40px 36px 32px; overflow: hidden; }
.belief::after { content: ""; position: absolute; right: -60px; bottom: -60px; width: 200px; height: 200px; border-radius: 50%; background: radial-gradient(circle, rgba(242, 182, 50, .35), transparent 70%); }
.q-mark { width: 56px; height: 42px; fill: var(--gold); opacity: 0; transform: translateY(8px); transition: opacity .5s .3s, transform .5s .3s var(--ease); }
.belief.in .q-mark { opacity: 1; transform: none; }
.belief blockquote { margin: 14px 0 0; font: 600 clamp(22px, 2.4vw, 28px)/1.35 var(--fd); position: relative; z-index: 1; }
.belief blockquote p { margin: 0; }
.belief figcaption { margin-top: 16px; color: var(--olive-l); font-weight: 600; font-size: 15px; letter-spacing: .04em; position: relative; z-index: 1; }
.mission-sec { background: var(--cream); }
.mission-grid { display: grid; grid-template-columns: 1fr 1.35fr; gap: 28px; align-items: start; }
.mission-grid .values { grid-column: auto; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
.mission-grid > .values:only-child { grid-column: 1 / -1; }
.mission-grid > .mv:only-child { grid-column: 1 / -1; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.team-group + .team-group { margin-top: 52px; }
.team-h { font: 700 22px var(--fd); color: var(--olive2); text-align: center; margin-bottom: 24px; }
.pdlg { border: 0; border-radius: 22px; padding: 0; width: min(560px, calc(100% - 32px)); max-height: calc(100% - 64px); box-shadow: 0 40px 80px -30px rgba(2, 20, 70, .6); color: var(--ink); }
.pdlg::backdrop { background: rgba(2, 10, 30, .6); backdrop-filter: blur(4px); }
.pdlg[open] { animation: pdlgIn .24s var(--ease); }
@keyframes pdlgIn { from { opacity: 0; transform: translateY(16px) scale(.97); } }
.pdlg-in { padding: 30px 30px 26px; }
.pd-head { display: flex; gap: 18px; align-items: center; margin: 0 40px 16px 0; }
.pd-head .ph { width: 84px; height: 84px; flex: none; border-radius: 50%; overflow: hidden; display: grid; place-items: center; background: linear-gradient(135deg, var(--navy), var(--olive2)); color: #fff; font: 800 26px var(--fd); }
.pd-head .ph { grid-template: minmax(0, 1fr) / minmax(0, 1fr); }
.pd-head .ph img { width: 100%; height: 100%; object-fit: cover; }
.pd-head h3 { font-size: 24px; color: var(--navy); }
.pd-head p { margin: 2px 0 0; color: var(--muted); }
.pdlg .prose { font-size: 17px; }
.pdlg-x { position: absolute; top: 14px; right: 14px; width: 40px; height: 40px; border-radius: 50%; border: 0; background: var(--sand); display: grid; place-items: center; color: var(--navy); }
/* phones: the face above the name, so a long name keeps the dialog's width */
@media (max-width: 480px) {
  .pdlg-in { padding: 24px 22px 22px; }
  .pd-head { flex-direction: column; align-items: flex-start; gap: 12px; margin-right: 44px; }
  .pd-head .ph { width: 60px; height: 60px; font-size: 20px; }
  .pd-head h3 { font-size: 21px; }
}

/* ---------------- about: accountability and partners ---------------- */
.gov { background: var(--paper); }
.reg-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); gap: 18px; margin-bottom: 34px; scroll-margin-top: 140px; }
.reg { position: relative; background: var(--cream); border: 1px solid var(--line); border-radius: 18px; padding: 22px 22px 20px; overflow: hidden; }
.reg small { font-size: 12.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--olive2); }
.reg h3 { font-size: 22px; color: var(--navy); margin: 4px 86px 10px 0; }
.reg-no { margin: 0 0 4px; font-size: 15px; color: var(--muted); }
.reg-no b { font: 800 22px/1 var(--fd); color: var(--ink); font-variant-numeric: tabular-nums; letter-spacing: .02em; }
.reg-d { margin: 0; font-size: 14.5px; color: var(--muted); }
.reg-note { margin: 8px 0 0; font-size: 14.5px; }
.reg-links { display: flex; flex-wrap: wrap; gap: 6px 16px; margin: 12px 0 0; font-size: 14.5px; font-weight: 600; }
.reg-links a { display: inline-flex; gap: 4px; align-items: center; }
.reg-stamp { position: absolute; top: 14px; right: 14px; width: 76px; height: 76px; fill: none; stroke: var(--olive2); stroke-width: 3; opacity: 0; transform: scale(1.25) rotate(-14deg); transition: opacity .38s, transform .38s var(--ease); transition-delay: calc(.4s + var(--i) * 150ms); }
.reg-stamp circle + circle { stroke-width: 1.5; stroke-dasharray: 3 3; }
.reg.in .reg-stamp { opacity: .85; transform: rotate(-8deg); }
.rs-y { fill: var(--olive2); stroke: none; font: 800 24px var(--fd); }
.gov-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 24px; margin-bottom: 32px; }
.ladder, .checks { background: var(--cream); border-radius: var(--r); padding: 26px 28px; }
.ladder h3, .checks h3, .gov-docs h3 { font-size: 22px; color: var(--navy); margin-bottom: 16px; }
.checks ul + h3 { margin-top: 24px; }
.ladder ol { list-style: none; margin: 0; padding: 0 0 0 28px; position: relative; display: grid; gap: 16px; }
.ladder ol::before { content: ""; position: absolute; left: 8px; top: 8px; bottom: 8px; width: 3px; border-radius: 3px; background: var(--olive); transform-origin: top; transform: scaleY(0); transition: transform .6s .2s var(--ease); }
.ladder.in ol::before { transform: none; }
.ladder li { position: relative; display: grid; opacity: 0; transition: opacity .4s; transition-delay: calc(.3s + var(--i) * 120ms); }
.ladder.in li { opacity: 1; }
.ladder li::before { content: ""; position: absolute; left: -26px; top: 6px; width: 15px; height: 15px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 0 4px var(--cream); }
.ladder b { color: var(--navy); font-family: var(--fd); font-size: 18px; }
.ladder span { color: var(--muted); font-size: 15.5px; }
.check-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.check-list li { display: flex; gap: 12px; align-items: flex-start; }
.check-list .ic { color: var(--olive2); flex: none; margin-top: 2px; }
.check-list b { display: block; color: var(--navy); }
.check-list span { color: var(--muted); font-size: 15.5px; }
.concern { display: flex; gap: 20px; align-items: flex-start; background: #fff7e6; border: 1px solid #f3dca5; border-radius: var(--r); padding: 24px 26px; margin-bottom: 32px; scroll-margin-top: 100px; }
.concern :is(h2, h3) { font-size: 22px; color: var(--navy); margin-bottom: 6px; }
.concern p { margin: 0 0 8px; color: #2a3147; }
.concern-who { display: flex; flex-wrap: wrap; gap: 8px 18px; align-items: center; }
.concern-who a { display: inline-flex; gap: 6px; align-items: center; font-weight: 600; }
.bell { width: 44px; height: 44px; flex: none; fill: var(--gold); stroke: #b07d12; stroke-width: 1.5; transform-origin: 50% 12%; }
.concern.in .bell { animation: ring .9s .4s ease-in-out 1; }
@keyframes ring { 15%, 45% { transform: rotate(8deg); } 30%, 60% { transform: rotate(-8deg); } 75% { transform: none; } }
.concern-sec { background: var(--paper); padding-top: 0; }
.concern-sec .concern { margin: 0; }
.gov-docs-h { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; margin-bottom: 18px; }
.gov-docs-h h3 { margin: 0; }
.pgroup + .pgroup { margin-top: 40px; }

/* ---------------- reports and documents ---------------- */
.reports { background: var(--cream); }
.doc-year + .doc-year { margin-top: 44px; }
.doc-year[hidden] { display: none; }
.doc-yh { font: 800 30px var(--fd); color: var(--navy); margin-bottom: 16px; display: flex; align-items: center; gap: 14px; }
.doc-yh::after { content: ""; flex: 1; height: 2px; background: var(--line); }
.doc-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 18px; }
.doc { position: relative; display: flex; flex-direction: column; gap: 8px; background: #fffdf8; border-radius: 6px 22px 6px 6px; padding: 22px 22px 18px 26px; box-shadow: var(--shadow); border-left: 6px solid var(--dc); }
.doc::after { content: ""; position: absolute; top: 0; right: 0; width: 26px; height: 26px; background: linear-gradient(225deg, var(--cream) 50%, #e8e0cc 50%); border-radius: 0 22px 0 6px; transform-origin: top right; transition: transform .3s var(--ease); }
.doc:hover::after, .doc:focus-within::after { transform: scale(1.25); }
.doc[hidden] { display: none; }
.doc.rv { transform: translateY(20px) rotate(-3deg); }
.doc.rv.in { transform: none; }
.doc-top { display: flex; justify-content: space-between; gap: 10px; font-size: 13px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--ink); padding-right: 22px; }
.doc-top time { color: var(--muted); }
.doc :is(h3, h4) { font-size: 20px; color: var(--navy); }
.doc p { margin: 0; color: var(--muted); font-size: 15px; }
.doc-aud { font-style: italic; }
.doc-foot { margin-top: auto; padding-top: 10px; display: flex; justify-content: space-between; align-items: center; gap: 10px; border-top: 1px dashed var(--line); }
.doc-foot small { color: var(--muted); }
.doc-open { display: inline-flex; gap: 6px; align-items: center; font-weight: 700; color: var(--navy2); text-decoration: none; }
.doc-open .ic { transition: transform .25s var(--ease); }
.doc-open:hover .ic { transform: translate(2px, -2px); }
.gov .doc { background: var(--cream); }
.gov .doc::after { background: linear-gradient(225deg, var(--paper) 50%, #e8e0cc 50%); }

/* ---------------- where next, number sources ---------------- */
.where-next { background: var(--sand); padding: 60px 0 70px; }
/* Two white sections in a row read as one: no second gap between them. */
.team + .gov, .programs + .where-next { padding-top: 0; }
.wn-h { font-size: clamp(24px, 2.6vw, 30px); color: var(--navy); margin-bottom: 20px; }
.wn-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; }
.wn { position: relative; display: flex; flex-direction: column; gap: 6px; padding: 22px 56px 22px 22px; background: var(--cream); border: 1px solid var(--line); border-radius: 18px; color: var(--ink); text-decoration: none; transition: transform .3s var(--ease), box-shadow .3s, border-color .3s; }
.wn:hover, .wn:focus-visible { transform: translateY(-4px); box-shadow: var(--shadow); border-color: var(--olive); }
.wn-ic { width: 46px; height: 46px; border-radius: 14px; display: grid; place-items: center; background: var(--navy); color: var(--gold); margin-bottom: 6px; }
.wn b { font: 700 20px var(--fd); color: var(--navy); }
.wn p { margin: 0; color: var(--muted); font-size: 15px; }
.wn-go { position: absolute; right: 20px; top: 50%; translate: 0 -50%; color: var(--navy2); transition: transform .3s var(--ease); }
.wn:hover .wn-go { transform: translateX(4px); }
.stat-proof { display: block; margin-top: 4px; color: #9fb0e0; font-size: 13px; }
.stats-proof { position: relative; text-align: center; margin: 26px 0 0; color: #9fb0e0; font-size: 14px; }
.bdj-card .bdj-src { margin: 8px 0 0; font-size: 13px; }
.bdj-src a { color: var(--muted); text-decoration: none; display: inline-flex; gap: 4px; align-items: center; }
.bdj-src a:hover { color: var(--navy2); text-decoration: underline; }

/* ---------------- responsive ---------------- */
@media (max-width: 1060px) {
  .scene-wrap { grid-template-columns: 1fr; }
  .scene-card { min-height: 220px; }
  .offices .blist { grid-template-columns: repeat(2, 1fr); }
  .sym-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 920px) {
  .burger { display: block; }
  /* closed, the menu is also out of the tab order once it has slid away */
  .nav-links { position: fixed; inset: 0 0 auto; top: 0; padding: 86px 20px 26px; max-height: 100svh; overflow-y: auto; background: var(--navy3); flex-direction: column; gap: 2px; transform: translateY(-105%); visibility: hidden; transition: transform .45s var(--ease), visibility 0s .45s; z-index: -1; box-shadow: 0 30px 60px -20px rgba(0, 0, 0, .5); }
  .m-only { display: block; }
  .dd { flex-wrap: wrap; }
  .dd > a { flex: 1; }
  .dd-btn { margin: 0; padding: 10px; color: #fff; transition: transform .25s var(--ease); }
  .dd.open .dd-btn { transform: rotate(180deg); }
  .dd-menu { display: none; position: static; opacity: 1; transform: none; pointer-events: auto; background: none; box-shadow: none; padding: 0 0 6px 16px; min-width: 0; width: 100%; }
  .dd.open .dd-menu { display: grid; }
  .dd-menu a { color: #c9d3f0 !important; font-size: 16px !important; padding: 6px !important; }
  .dd-menu a:hover, .dd-menu a.on { background: rgba(255, 255, 255, .06); }
  .dd-menu .ic { color: var(--olive-l) !important; }
  .nav-links .dd-menu .dd-all { display: none; }
  .nav-links, .nav-links .dd-menu { --focus: var(--gold); }
  .foot-brand { flex-basis: 100%; }
  .measure, .mission-grid { grid-template-columns: 1fr; }
  .pb { grid-template-columns: 1fr; }
  .pb-l { border-right: 0; border-bottom: 2px dashed rgba(4, 34, 114, .16); transform-origin: center top; }
  .pb.rv .pb-l { transform: rotateX(10deg); }
  .where-grid, .pp-grid { grid-template-columns: 1fr; }
  .pp-facts { position: static; }
  .nav-links a { color: #fff; font-size: 20px; padding: 10px 6px; }
  .nav.open .nav-links { transform: none; visibility: visible; transition-delay: 0s; }
  .nav.open { color: #fff; background: transparent; box-shadow: none; }
  .about-grid, .branch-grid, .contact-grid { grid-template-columns: 1fr; }
  .nav-brand small { display: none; }
}
/* Portrait tablets stack the banner like a phone, with the whole drawing in a
   wide strip under the text. */
@media (min-width: 761px) and (max-width: 1100px) and (orientation: portrait) {
  .home-hero { flex-direction: column; align-items: stretch; min-height: 0; background: linear-gradient(180deg, #021446, #0b3aa8); }
  .home-hero .hero-in { padding: 112px 0 48px; }
  .home-hero .hero-art { position: relative; inset: auto; order: 2; aspect-ratio: 16 / 9; }
  .home-hero .hero-art::after { background: linear-gradient(180deg, rgba(2, 20, 70, .55), transparent 30%); }
  .badge.hero-badge { top: auto; bottom: calc(56.25vw + 40px); width: 132px; }
  .vt { position: relative; order: 3; padding: 16px 0 20px; background: #021446; }
}
@media (max-width: 760px) {
  .prog.wide { grid-column: auto; flex-direction: column; }
  .prog.wide .prog-art { min-height: 210px; flex: none; align-self: stretch; aspect-ratio: auto; margin: 0; border-radius: 0; }
  .home-hero { flex-direction: column; align-items: stretch; min-height: 0; }
  .home-hero .hero-in { padding: 112px 0 52px; }
  .home-hero .hero-art { position: relative; inset: auto; order: 2; aspect-ratio: 4 / 3; }
  .home-hero .hero-art::after { background: linear-gradient(180deg, rgba(2, 20, 70, .55), transparent 30%); }
  .home-hero { background: linear-gradient(180deg, #021446, #0b3aa8); }
  .badge.hero-badge { width: 104px; top: auto; bottom: calc(75vw + 66px); right: 16px; }
  .hero-badge .b-ring text { font-size: 15px; }
  .hero-badge .b-ring text:lang(bn) { font-size: 19px; }
  .vt { position: relative; order: 3; padding: 14px 0 18px; background: #021446; }
  .vt-in { grid-template-columns: auto 1fr; gap: 14px; }
  .vt-btns { grid-column: 1 / -1; justify-self: start; }
  .vt-tick span { font-size: 11.5px; }
  .vt-tick:not(:first-of-type):not(:last-of-type) span { display: none; }
  .tl::before { left: 66px; }
  .tl-i { grid-template-columns: 54px 1fr; gap: 30px; }
  .tl-i::before { left: 59px; }
  .tl-y { font-size: 19px; }
  .proj dl div { grid-template-columns: 1fr; gap: 0; }
  .pb-page { padding: 28px 22px; }
  .pb-rows div { grid-template-columns: 1fr; gap: 2px; }
  .pb-ribbon { right: 28px; height: 70px; }
  .concern { flex-direction: column; gap: 12px; }
  .sdg-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 640px) {
  body { font-size: 16px; }
  .offices .blist { grid-template-columns: 1fr; }
  .sym-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .sym { padding: 16px 10px; }
  .sym-art { width: 84px; height: 84px; }
  .sym-art svg { width: 64px; height: 64px; }
  .sym figcaption b { font-size: 16px; }
  .sym figcaption span { font-size: 13.5px; }
  .wrap { width: calc(100% - 32px); }
  .hero-in { padding: 120px 0 100px; }
  .hero-art::after { background: linear-gradient(180deg, rgba(2, 20, 70, .6), rgba(2, 20, 70, .55)); }
  .scene-stage { aspect-ratio: 4 / 3.4; border-radius: 18px; }
  .scene-bar .sbtn[data-act="reset"] span { display: none; }
  .scene-bar .sbtn.ghost { padding-inline: 13px; }
  .tally b { font-size: 22px; }
  .cform { padding: 20px; }
  .cform .two { grid-template-columns: 1fr; }
  .lb-in { grid-template-columns: 1fr; }
  .lb-p, .lb-n { position: absolute; bottom: 20px; }
  .lb-p { left: 20px; } .lb-n { right: 20px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-delay: 0s !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .rv { opacity: 1; transform: none; }
  .word > span { transform: none; }
  .hero-kick, .hero-sub, .hero-cta, .badge.hero-badge { opacity: 1; }
  .vt-btns { display: none; }
  .pb.rv .pb-l, .doc.rv { transform: none; }
  .pb-rows div, .ladder li, .q-mark { opacity: 1; transform: none; }
  .reg-stamp { opacity: .85; transform: rotate(-8deg); }
  .ladder ol::before { transform: none; }
}
/* Without motion the phone year bar has no buttons and is shorter, so the
   badge sits lower to stay where it is with motion on, clear of the buttons. */
@media (prefers-reduced-motion: reduce) and (max-width: 760px) {
  .badge.hero-badge { bottom: calc(75vw + 13px); }
}

/* ---------------- print ---------------- */
@media print {
  @page { margin: 14mm; }
  body { background: #fff; color: #000; font-size: 11pt; }
  .nav, .foot, .subnav, .skip, #toasts, .lightbox, .cta-band, .where-next, .scroll-cue, .pb-print, .band-art, .ph-glow, .ph-ic, .kites, .crumbs, .bdh-art, .vt, .hero-badge, .hero-art, .pdlg { display: none !important; }
  .rv, .pb-rows div, .ladder li, .q-mark, .reg-stamp { opacity: 1 !important; transform: none !important; transition: none !important; animation: none !important; }
  .pb.rv .pb-l, .ladder ol::before { transform: none !important; }
  .word > span { transform: none !important; animation: none !important; }
  .page-hero, .bd-hero, .hero { min-height: 0; padding: 0 0 12pt; background: none !important; color: #000; display: block; }
  .ph-title, .hero-title { color: var(--navy); font-size: 24pt; }
  .ph-sub, .hero-sub { color: #000; }
  .home-hero .hero-in { padding: 0 0 12pt; }
  .home-hero .hero-title { font-size: 24pt; }
  .home-hero .hero-kick { color: var(--olive2); }
  .hero .btn.ghost { color: inherit; box-shadow: inset 0 0 0 1.5px currentColor; }
  .page-hero .eyebrow, .hero-kick, .hero-sub, .hero-cta { opacity: 1 !important; animation: none !important; }
  .sec { padding: 14pt 0; }
  .pb { box-shadow: none; border: 1px solid #999; break-inside: avoid; }
  .pb-ribbon { display: none; }
  a { color: inherit; }
  /* "Print or save as PDF" on the fact card: the card alone, on one page */
  body.print-glance main > *:not(.glance) { display: none !important; }
  body.print-glance .pb { grid-template-columns: 1.15fr 1fr; break-inside: auto; }
  body.print-glance .pb-l { border-right: 2px dashed rgba(4, 34, 114, .16); border-bottom: 0; }
  body.print-glance .pb-page { padding: 18px 20px; }
  body.print-glance .pb-rows div { grid-template-columns: 112px 1fr; gap: 10px; padding: 5px 0; }
  body.print-glance .pb-r { gap: 12px; }
  body.print-glance .pb-seal { width: 92px; }
  body.print-glance .pb h2 { font-size: 20pt; margin-bottom: 8px; }
  .print-only { display: block; }
}

@media screen and (max-width: 640px) {
  .home-proj { grid-auto-flow: column; grid-template-columns: none; grid-auto-columns: min(82%, 300px); overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; padding: 6px 2px 12px; }
  .home-proj > .proj { scroll-snap-align: start; }
}