/* =========================================================
   CYBERTECH — shared design system  (v4 · "The Register, Amplified")

   Concept: a bound institutional record, set at national scale.
   Ivory stock, ink, one brand red used as an *event*. Hairline
   rules and numbered sections (§) do the structural work. The
   page has one spine: paper → a single full-bleed ink chapter
   (the approvals) → paper. The signature object is the Ledger
   on the About page, which inks itself in as you scroll.

   v4 pass:
   - extreme scale contrast: mega numerals vs. 11px mono labels
   - a real editorial grid with traceable hairlines
   - Bangla treated as a first-class display face, not a swap-in
   - ~600 lines of unused v3 machinery (.chapter/.htrack/.marquee/
     .rail/.rv-*) removed — none of it was referenced by any page
   - every animation gated behind prefers-reduced-motion
   ========================================================= */

/* =========================================================
   0. CUSTOM BANGLA DISPLAY FACE (optional)

   The CYBERTECH wordmark is custom hand-lettering, not a typeface,
   so it cannot be reused as a font. Bangla display type therefore
   falls back to Noto Serif Bengali, which shares the logo's stroke
   contrast and formal, chiselled character.

   To match the logo exactly: drop the licensed font file into
   public/fonts/ and uncomment the block below. 'Cybertech Bangla'
   is already first in the --font-bn-display stack, so nothing else
   needs to change.

@font-face{
  font-family:'Cybertech Bangla';
  src:url('fonts/cybertech-bangla.woff2') format('woff2');
  font-weight:600 800;
  font-display:swap;
  unicode-range:U+0980-09FF, U+200C-200D, U+25CC;
}
   ========================================================= */

/* =========================================================
   1. TOKENS
   ========================================================= */
:root{
  /* --- paper --- */
  --paper:#F2EEE4;
  --paper-light:#FAF8F2;
  --paper-deep:#E6DFCE;
  --paper-sink:#DAD1BC;

  /* --- ink --- */
  --ink:#100E0B;
  --ink-2:#241F19;
  --ink-3:#3A342C;
  --ink-soft:#4E4840;   /* 7.0:1 on paper */
  --ink-faint:#655E53;  /* 4.9:1 on paper */

  /* --- the cumulative figure only; 7.9:1 on paper, 4.6:1 on ink --- */
  --green-deep:#14532D;
  --green-bright:#5FCC8B;

  /* --- brand red: an event, never decoration --- */
  --red:#C4281B;        /* 4.9:1 on paper  */
  --red-deep:#8E1B11;   /* 8.3:1 on paper  */
  --red-bright:#FF6B4F; /* 6.8:1 on ink    */

  /* --- on-ink neutrals --- */
  --ink-paper:#EDE7DA;
  --ink-muted:#B8AF9E;  /* 8.8:1 on ink */
  --ink-rule:rgba(237,231,218,.17);
  --ink-rule-soft:rgba(237,231,218,.09);

  /* --- rules --- */
  --rule:#CFC6B0;
  --rule-soft:#E0D8C6;
  --rule-strong:#A79D85;

  /* --- elevation (restrained; hairlines do the work) --- */
  --lift-1:0 1px 2px rgba(16,14,11,.04);
  --lift-2:0 2px 6px rgba(16,14,11,.05), 0 14px 30px -14px rgba(16,14,11,.16);
  --lift-3:0 4px 10px rgba(16,14,11,.06), 0 30px 60px -24px rgba(16,14,11,.24);

  /* --- type --- */
  --font-display:'Archivo Black', 'Arial Black', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --font-sans:'IBM Plex Sans', system-ui, -apple-system, sans-serif;
  --font-mono:'IBM Plex Mono', ui-monospace, 'SF Mono', monospace;
  --font-bn-display:'Cybertech Bangla', 'Noto Serif Bengali', 'Hind Siliguri', serif;
  --font-bn:'Hind Siliguri', system-ui, sans-serif;

  /* scale contrast is the point: mega numerals vs. micro labels */
  --t-mega:clamp(4.2rem, 1.4rem + 11.5vw, 11rem);
  --t-big:clamp(2.6rem, 1.3rem + 5.4vw, 5.4rem);
  --t-h1:clamp(2.35rem, 1.35rem + 4.1vw, 4.4rem);
  --t-h2:clamp(1.75rem, 1.18rem + 2.5vw, 3rem);
  --t-h3:clamp(1.08rem, .98rem + .5vw, 1.34rem);
  --t-lede:clamp(1.04rem, .97rem + .42vw, 1.22rem);
  --t-body:1rem;
  --t-sm:.875rem;
  --t-xs:.8125rem;
  --t-label:.6875rem;
  --t-micro:.625rem;

  /* --- space --- */
  --s1:4px;  --s2:8px;  --s3:12px; --s4:16px; --s5:24px;
  --s6:32px; --s7:48px; --s8:64px; --s9:96px; --s10:128px;
  --sec-y:clamp(56px, 8vw, 132px);
  --gutter:clamp(18px, 4.5vw, 72px);
  --maxw:1320px;
  --nav-h:64px;
  --banner-h:0px;

  /* how far a register row slides in from the margin (see row-in) */
  --row-shift:18px;

  /* --- motion --- */
  --ease-out:cubic-bezier(.16,1,.3,1);
  --ease-inout:cubic-bezier(.65,0,.35,1);
  --dur-1:.2s; --dur-2:.4s; --dur-3:.75s;
}

/* =========================================================
   2. RESET + BASE
   ========================================================= */
*,*::before,*::after{ box-sizing:border-box; }

html{
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
  /* anchors must clear the sticky nav */
  scroll-padding-top:calc(var(--nav-h) + 16px);
}

body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--font-bn);
  font-size:var(--t-body);
  line-height:1.68;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-wrap:break-word;
  padding-top:var(--nav-h);
}
body.lang-en{ font-family:var(--font-sans); }
body.has-banner{ --banner-h:40px; padding-top:calc(var(--nav-h) + var(--banner-h)); }

/* the paper itself: a faint fibre, never a visible texture */
body::before{
  content:'';
  position:fixed; inset:0;
  pointer-events:none; z-index:0;
  background:
    radial-gradient(ellipse at 18% 0%, rgba(255,255,255,.55), transparent 55%),
    radial-gradient(ellipse at 100% 100%, rgba(167,157,133,.10), transparent 50%);
}

img{ max-width:100%; height:auto; display:block; }
svg{ display:block; }

a{ color:inherit; text-decoration:none; }
button{ font:inherit; color:inherit; background:none; border:0; }

p{ margin:0 0 1em; }
p:last-child{ margin-bottom:0; }

/* --- focus: designed, never the default halo --- */
:focus-visible{
  outline:2px solid var(--red);
  outline-offset:3px;
  border-radius:1px;
}
.approvals-band :focus-visible,
footer :focus-visible,
.cta-banner :focus-visible{ outline-color:var(--red-bright); }

.skip-link{
  position:absolute; left:var(--gutter); top:-100px; z-index:200;
  background:var(--ink); color:var(--ink-paper);
  padding:14px 20px; min-height:44px; font-family:var(--font-mono);
  font-size:var(--t-label); letter-spacing:.12em; text-transform:uppercase;
  transition:top var(--dur-1) var(--ease-out);
}
.skip-link:focus{ top:calc(var(--nav-h) + 8px); }

.visually-hidden{
  position:absolute!important; width:1px; height:1px;
  padding:0; margin:-1px; overflow:hidden;
  clip:rect(0 0 0 0); white-space:nowrap; border:0;
}

/* =========================================================
   3. TYPOGRAPHY PRIMITIVES
   ========================================================= */
h1,h2,h3,h4,h5{
  font-family:var(--font-bn-display);
  font-weight:700;
  line-height:1.45;   /* Bengali serif: extra leading so matras never clip */          /* Bangla needs the air; matras must not clip */
  margin:0;
  letter-spacing:0;
  text-wrap:balance;
}
body.lang-en h1,
body.lang-en h2,
body.lang-en h3,
body.lang-en h4,
body.lang-en h5{
  font-family:var(--font-display);
  font-weight:400;          /* Archivo Black is single-weight; 700/900 fakes it */
  line-height:1.04;
  letter-spacing:-.018em;
}
h1,h2,h3,h4,h5,
body.lang-en .bn,
.faq-q, .tl-row .txt strong, .finder-tile .ft-title,
.approval-seal .a-sub, .seal-inner .seal-title{
  font-synthesis-weight:none;
}

h1{ font-size:var(--t-h1); }
h2{ font-size:var(--t-h2); }
h3{ font-size:var(--t-h3); line-height:1.42; }
body.lang-en h3{ line-height:1.22; }

.mono{
  font-family:var(--font-mono);
  font-variant-numeric:tabular-nums;
  letter-spacing:.02em;
}
.bn{ font-family:var(--font-bn-display); }
body.lang-en .bn{ font-family:var(--font-display); }
body:not(.lang-en) .seal-inner .seal-title{ font-weight:700; }

/* Bangla body copy sits a touch smaller and looser than Latin */
body:not(.lang-en) p{ line-height:1.85; }
body:not(.lang-en) h1{ font-size:calc(var(--t-h1) * .88); }
body:not(.lang-en) h2{ font-size:calc(var(--t-h2) * .92); }

/* --- the § mark: a register ornament, hidden from AT --- */
.sec-num{
  display:block;
  font-family:var(--font-mono);
  font-size:var(--t-micro);
  letter-spacing:.28em;
  color:var(--red);
  margin-bottom:var(--s3);
}

/* --- eyebrow --- */
.eyebrow{
  display:inline-flex; align-items:center; gap:10px;
  font-family:var(--font-mono);
  font-size:var(--t-label);
  font-weight:500;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--red-deep);
  margin-bottom:var(--s4);
}
.eyebrow::before{
  content:''; width:26px; height:1px;
  background:currentColor; opacity:.55; flex:none;
}
.eyebrow.teal{ color:var(--ink-faint); }

/* =========================================================
   4. LAYOUT — one visible editorial grid
   ========================================================= */
section{
  position:relative; z-index:1;
  max-width:var(--maxw);
  margin:0 auto;
  padding:var(--sec-y) var(--gutter);
}
section.tight{ padding-top:calc(var(--sec-y) * .62); }

/* hairline the eye can trace between chapters */
section + section::before{
  content:'';
  position:absolute; left:var(--gutter); right:var(--gutter); top:0;
  height:1px; background:var(--rule-soft);
}

.section-head{
  position:relative;
  display:grid;
  grid-template-columns:minmax(0,1fr);
  gap:var(--s3);
  max-width:none;
  margin-bottom:var(--s7);
  padding-top:var(--s4);
  border-top:2px solid var(--ink);
}
.section-head .sec-num{ margin-bottom:0; }
.section-head h2{ margin-bottom:0; max-width:22ch; }
.section-head p{
  color:var(--ink-soft);
  font-size:var(--t-sm);
  line-height:1.75;
  max-width:62ch;
  margin:0;
}
.section-head .eyebrow{ margin-bottom:0; }
.section-head.wide{ max-width:none; }

/* the head opens into a hanging margin: marks left, statement right */
@media (min-width:900px){
  .section-head{
    grid-template-columns:150px minmax(0,1.15fr) minmax(0,1fr);
    column-gap:var(--s7);
    align-items:start;
  }
  .section-head .sec-num,
  .section-head .eyebrow{ grid-column:1; }
  .section-head .eyebrow{ grid-row:2; }
  .section-head h2{ grid-column:2; grid-row:1 / span 2; }
  .section-head p{ grid-column:3; grid-row:1 / span 2; }
}

.page-header{
  position:relative; z-index:1;
  max-width:var(--maxw);
  margin:0 auto;
  padding:clamp(44px,7vw,96px) var(--gutter) clamp(32px,4.5vw,56px);
  border-bottom:1px solid var(--rule);
}
.page-header h1{ margin-bottom:var(--s5); max-width:20ch; }
.page-header p.lede{
  font-size:var(--t-lede);
  color:var(--ink-soft);
  max-width:62ch;
  margin:0;
}

/* =========================================================
   5. NAV + NOTICE BAR
   ========================================================= */
.notice-bar{
  position:fixed; top:0; left:0; right:0; z-index:101;
  height:var(--banner-h);
  display:flex; align-items:center; gap:12px;
  padding:0 var(--gutter);
  background:var(--ink);
  color:var(--ink-paper);
  font-size:var(--t-xs);
  overflow:hidden;
}
.notice-bar .tag{
  flex:none;
  font-family:var(--font-mono);
  font-size:var(--t-micro);
  letter-spacing:.14em;
  padding:3px 7px;
  background:var(--red);
  color:#fff;
}
.notice-bar > span:not(.tag){
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.notice-bar a{
  flex:none;
  color:var(--red-bright);
  border-bottom:1px solid transparent;
}
.notice-bar a:hover{ border-bottom-color:currentColor; }
.notice-bar .close{
  margin-left:auto; flex:none;
  width:32px; height:32px;
  display:grid; place-items:center;
  font-size:20px; line-height:1;
  color:var(--ink-muted);
  cursor:pointer;
}
.notice-bar .close:hover{ color:var(--ink-paper); }

nav{
  position:fixed; top:0; left:0; right:0; z-index:100;
  height:var(--nav-h);
  display:flex; align-items:center; gap:var(--s5);
  padding:0 var(--gutter);
  background:rgba(242,238,228,.88);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid transparent;
  transition:border-color var(--dur-1) linear, background var(--dur-1) linear;
}
body.has-banner nav{ top:var(--banner-h); }
nav.scrolled{
  border-bottom-color:var(--rule);
  background:rgba(242,238,228,.96);
}

.nav-brand{ display:flex; align-items:center; gap:12px; flex:none; }
.nav-brand img{ height:30px; width:auto; }
/* logo-mark.png is tightly cropped (285x147), so it sets at its true optical
   size. logo.png is a 320x320 square that is ~half transparent padding — at
   any nav-sized height its wordmark rendered about 14px tall and read as a
   smudge. Never use logo.png at small sizes. */
.nav-brand .brand-mark{
  height:auto;
  width:clamp(104px,13vw,132px);
  aspect-ratio:285/84;
}
.nav-brand .est{
  font-family:var(--font-mono);
  font-size:var(--t-micro);
  line-height:1.25;
  letter-spacing:.1em;
  color:var(--ink-faint);
  border-left:1px solid var(--rule);
  padding-left:10px;
}
body:not(.lang-en) .nav-brand .est{ font-family:var(--font-bn); letter-spacing:0; }

.nav-links{ display:flex; align-items:center; gap:2px; margin-left:auto; }
.nav-links a{
  position:relative;
  padding:10px 12px;
  font-size:var(--t-xs);
  color:var(--ink-soft);
  white-space:nowrap;
  transition:color var(--dur-1) var(--ease-out);
}
.nav-links a::after{
  content:'';
  position:absolute; left:12px; right:12px; bottom:4px;
  height:1px; background:currentColor;
  transform:scaleX(0); transform-origin:left;
  transition:transform var(--dur-2) var(--ease-out);
}
.nav-links a:hover{ color:var(--ink); }
.nav-links a:hover::after{ transform:scaleX(1); }
.nav-links a.current{ color:var(--ink); font-weight:600; }
.nav-links a.current::after{ transform:scaleX(1); background:var(--red); }

.nav-cta{
  flex:none;
  padding:11px 18px;
  min-height:44px;
  align-items:center;
  background:var(--ink); color:var(--paper);
  font-size:var(--t-xs); font-weight:600;
  white-space:nowrap;
  transition:background var(--dur-1) var(--ease-out);
}
.nav-cta:hover{ background:var(--red-deep); }

.lang-toggle{
  flex:none;
  min-width:52px; min-height:36px;
  padding:6px 12px;
  border:1px solid var(--rule-strong);
  font-family:var(--font-mono);
  font-size:var(--t-label);
  letter-spacing:.08em;
  color:var(--ink-soft);
  cursor:pointer;
  transition:border-color var(--dur-1), color var(--dur-1);
}
.lang-toggle:hover{ border-color:var(--ink); color:var(--ink); }

.nav-menu-btn{
  display:none;
  width:44px; height:44px;
  place-items:center;
  font-size:20px;
  cursor:pointer;
  color:var(--ink);
}

.scroll-progress{
  position:fixed; top:0; left:0; z-index:150;
  height:2px; width:0;
  background:var(--red);
  pointer-events:none;
}

/* =========================================================
   6. BUTTONS
   ========================================================= */
.btn-primary,
.btn-ghost,
.btn-outline{
  display:inline-flex; align-items:center; justify-content:center;
  gap:8px;                /* flex eats inter-element whitespace; restore it */
  min-height:48px;
  padding:13px 26px;
  font-size:var(--t-sm); font-weight:600;
  letter-spacing:.005em;
  cursor:pointer;
  text-align:center;
  transition:background var(--dur-1) var(--ease-out),
             color var(--dur-1) var(--ease-out),
             border-color var(--dur-1) var(--ease-out),
             transform var(--dur-1) var(--ease-out);
}
.btn-primary{
  background:var(--red);
  color:#fff;
  border:1px solid var(--red);
}
.btn-primary:hover{ background:var(--red-deep); border-color:var(--red-deep); }
.btn-primary:active{ transform:translateY(1px); }

.btn-ghost{
  background:transparent;
  color:var(--ink);
  border:1px solid var(--rule-strong);
}
.btn-ghost:hover{ border-color:var(--ink); background:var(--paper-light); }

.btn-outline{
  background:transparent;
  color:var(--ink-paper);
  border:1px solid var(--ink-rule);
}
.btn-outline:hover{ border-color:var(--ink-paper); background:rgba(237,231,218,.08); }

.map-link{
  display:inline-flex; align-items:center; gap:8px;
  min-height:44px;
  font-size:var(--t-xs); font-weight:600;
  color:var(--red-deep);
  transition:gap var(--dur-1) var(--ease-out);
}
.map-link svg{ width:15px; height:15px; flex:none; }
.map-link:hover{ gap:12px; }

/* =========================================================
   7. HERO — a masthead, then a full-bleed headline

   Not a copy-left / art-right split. A ruled masthead sets the
   register; the headline runs the full measure at display scale;
   the lede and seal sit beneath it in an asymmetric lower deck.
   ========================================================= */
.hero{
  position:relative; z-index:1;
  max-width:var(--maxw);
  margin:0 auto;
  padding:var(--s5) var(--gutter) clamp(36px,4.5vw,64px);
  overflow:hidden;
}
/* No hero watermark. A ghosted copy of the wordmark sat behind the seal at
   3% opacity — the same lockup already in the nav, overlapping a second
   branded object, resolving into neither texture nor mark. The paper's own
   fibre (body::before) is the only ground this design wants. */

/* the masthead rule — a newspaper plate line */
.masthead{
  position:relative;
  display:flex; flex-wrap:wrap;
  gap:var(--s2) var(--s5);
  padding-bottom:var(--s3);
  margin-bottom:var(--s6);
  border-bottom:2px solid var(--ink);
  font-family:var(--font-mono);
  font-size:var(--t-micro);
  font-weight:500;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--ink-faint);
}
.masthead-vol{ margin-left:auto; color:var(--red); }

.hero-head{
  position:relative;
  margin:0 0 var(--s6);
  max-width:none;
  font-size:var(--t-big);
  line-height:1.12;
}
body.lang-en .hero-head{ line-height:.96; letter-spacing:-.028em; }
body:not(.lang-en) .hero-head{ font-size:calc(var(--t-big) * .78); line-height:1.35; }
.hero-head em{
  font-style:normal;
  color:var(--red);
  font-weight:inherit;
}

.hero-lower{
  display:grid;
  grid-template-columns:minmax(0,1fr);
  gap:var(--s6);
  align-items:start;
  padding-top:var(--s5);
  border-top:1px solid var(--rule);
}
.hero-col-lede{ max-width:60ch; }
.hero p.lede{
  font-size:var(--t-lede);
  color:var(--ink-soft);
  margin-bottom:var(--s4);
}
.hero-bn{
  font-family:var(--font-bn-display);
  font-size:var(--t-sm);
  color:var(--red-deep);
  margin-bottom:var(--s5);
}
.hero-ctas{ display:flex; flex-wrap:wrap; gap:var(--s3); }

.cred-row{
  display:flex; flex-wrap:wrap; gap:var(--s2) var(--s5);
  margin-top:var(--s6);
  padding-top:var(--s4);
  border-top:1px solid var(--rule);
}
.cred-row span{
  font-family:var(--font-mono);
  font-size:var(--t-micro);
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--ink-faint);
}
body:not(.lang-en) .cred-row span{
  font-family:var(--font-bn);
  letter-spacing:.02em;
  font-size:var(--t-xs);
  text-transform:none;
}

@media (min-width:900px){
  .hero{ padding-top:var(--s6); }
  .hero-lower{
    grid-template-columns:minmax(0,1.5fr) minmax(0,.7fr);
    column-gap:var(--s8);
    align-items:center;
  }
  .seal-wrap{ justify-content:flex-end; }
}

/* --- the seal: the single signature gesture --- */
.seal-wrap{ display:flex; justify-content:flex-start; }
.seal{
  position:relative;
  width:min(58vw,236px);
  aspect-ratio:1;
  display:grid; place-items:center;
  border:1px solid var(--rule-strong);
  border-radius:50%;
  background:
    radial-gradient(circle at 32% 28%, var(--paper-light), var(--paper-deep) 72%);
  box-shadow:var(--lift-2), inset 0 0 0 7px var(--paper), inset 0 0 0 8px var(--rule-soft);
}
.seal::after{
  content:'';
  position:absolute; inset:14px;
  border:1px dashed var(--rule-strong);
  border-radius:50%;
  opacity:.6;
}
.seal-inner{ text-align:center; padding:0 16%; }
.seal-inner .est-label{
  font-family:var(--font-mono);
  font-size:var(--t-micro);
  letter-spacing:.2em;
  color:var(--ink-faint);
  margin-bottom:8px;
}
body:not(.lang-en) .seal-inner .est-label{ font-family:var(--font-bn); letter-spacing:.04em; }
.seal-inner .seal-title{
  font-family:var(--font-bn-display);
  font-size:clamp(15px,3.6vw,20px);
  font-weight:700;
  line-height:1.25;
  color:var(--ink);
}
body.lang-en .seal-inner .seal-title{ font-family:var(--font-display); }
.seal-inner .seal-sub{
  font-size:var(--t-micro);
  color:var(--red-deep);
  margin-top:6px;
}
.seal-inner .seal-year{
  margin-top:10px;
  padding-top:8px;
  border-top:1px solid var(--rule);
  font-family:var(--font-mono);
  font-size:8.5px;
  letter-spacing:.12em;
  color:var(--ink-faint);
}
/* No logo chip on the seal. logo.png rendered at 26px put the wordmark at
   roughly 12px tall — an unreadable smear — and made the seal the third
   branded object in one view, after the nav mark and the seal's own text. */

.scroll-cue{
  display:none;
  align-items:center; gap:8px;
  margin-top:var(--s7);
  font-family:var(--font-mono);
  font-size:var(--t-micro);
  letter-spacing:.24em;
  text-transform:uppercase;
  color:var(--ink-faint);
}
body:not(.lang-en) .scroll-cue{ font-family:var(--font-bn); letter-spacing:.08em; }

/* =========================================================
   8. LEDGER STRIP — the record, at scale
   ========================================================= */
.ledger-strip{
  position:relative; z-index:1;
  max-width:var(--maxw);
  margin:0 auto;
  padding:0 var(--gutter);
  display:grid;
  grid-template-columns:minmax(0,1fr);
  counter-reset:led;
}
.ledger-strip .stat{
  display:grid;
  grid-template-columns:auto minmax(0,1fr);
  align-items:baseline;
  column-gap:var(--s5);
  padding:var(--s5) 0;
  border-bottom:1px solid var(--rule);
}
.ledger-strip .stat:first-child{ border-top:2px solid var(--ink); }
.stat .num{
  font-family:var(--font-mono);
  font-weight:500;
  font-size:clamp(3rem,13vw,7rem);
  line-height:.86;
  letter-spacing:-.045em;
  color:var(--ink);
  font-variant-numeric:tabular-nums;
  margin:0;
}
body:not(.lang-en) .stat .num{ font-family:var(--font-bn-display); letter-spacing:-.02em; line-height:1.05; }
.stat .label{
  font-size:var(--t-xs);
  line-height:1.55;
  color:var(--ink-faint);
  max-width:26ch;
  justify-self:end;
  text-align:right;
}

/* --- one cell carries two readings of the same fact ---
   The yearly intake says the institute is busy now; the cumulative total says
   it has been busy for twenty-six years. Both matter, and neither is worth a
   second cell, so the stat alternates. Screen readers get one sentence
   containing both facts and never see the animation. */
.stat-flip .num,
.stat-flip .label{
  display:grid;
  align-items:baseline;
}
.stat-flip .num > .face,
.stat-flip .label > .face{
  grid-area:1 / 1;
  animation:stat-turn 16s var(--ease-inout) infinite;
}
.stat-flip .label > .face{ justify-self:end; }
/* Must out-specify the rule above: its `animation:` shorthand resets
   animation-delay to 0, so a lower-specificity delay never lands and both
   faces run in lockstep — visible together, then blank together. */
.stat-flip .num > .face-b,
.stat-flip .label > .face-b{ animation-delay:-8s; }   /* exactly half the cycle */

/* the cumulative figure is the bigger claim, and it is the one that is green */
.stat-flip .num > .face-b{
  color:var(--green-deep);
  font-size:1.18em;
  letter-spacing:-.05em;
}
.stat-flip .label > .face-b{ color:var(--green-deep); }

/* A true swap, not a cross-fade: each face is fully clear of the cell before
   the other arrives. Overlapping two different Bengali labels at 50% opacity
   turned the line into an unreadable smear at the midpoint. */
@keyframes stat-turn{
  0%      { opacity:0; transform:translateY(.28em); }
  2%, 46% { opacity:1; transform:translateY(0); }
  49%,100%{ opacity:0; transform:translateY(-.28em); }
}

@media (min-width:900px){
  .ledger-strip{ grid-template-columns:repeat(2,minmax(0,1fr)); column-gap:var(--s8); }
  .ledger-strip .stat:nth-child(2){ border-top:2px solid var(--ink); }
  .stat .num{ font-size:clamp(3.4rem,6.5vw,6rem); }
}

/* =========================================================
   9. THE INK CHAPTER — exactly one full-bleed inversion
   ========================================================= */
.approvals-band{
  position:relative; z-index:1;
  max-width:none;
  margin-top:var(--sec-y);
  background:var(--ink);
  color:var(--ink-paper);
  padding:var(--sec-y) var(--gutter);
  overflow:hidden;
}
.approvals-band::before{
  content:'';
  position:absolute; inset:0;
  background:
    radial-gradient(ellipse at 12% 0%, rgba(255,107,79,.10), transparent 55%),
    radial-gradient(ellipse at 90% 100%, rgba(237,231,218,.05), transparent 50%);
  pointer-events:none;
}
.approvals-band > *{
  position:relative;
  max-width:var(--maxw);
  margin-left:auto; margin-right:auto;
}
.approvals-band .section-head h2{ color:var(--ink-paper); }
.approvals-band .section-head p{ color:var(--ink-muted); }
.approvals-band .eyebrow,
.approvals-band .eyebrow.teal{ color:var(--red-bright); }
.approvals-band .sec-num{ color:var(--red-bright); }
.approvals-band .section-head{ border-top-color:var(--ink-paper); }

.approval-row{
  display:block;
  counter-reset:appr;
  border-top:2px solid var(--ink-rule);
}
.approval-divider{ display:none; }
.approval-seal{
  position:relative;
  display:grid;
  grid-template-columns:66px minmax(0,1fr);
  column-gap:var(--s5);
  align-items:start;
  padding:var(--s6) 0;
  border:0;
  border-bottom:1px solid var(--ink-rule-soft);
}
.approval-seal:last-child{ border-bottom:0; }
.approval-img{
  grid-row:1 / span 3;
  width:66px; height:66px;
  display:grid; place-items:center;
  background:var(--paper-light);
  border-radius:50%;
  padding:9px;
  margin:0;
}
.approval-img img{ max-width:100%; max-height:100%; object-fit:contain; }
.approval-seal .a-title{
  font-family:var(--font-mono);
  font-size:var(--t-label);
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--red-bright);
  margin-bottom:var(--s2);
}
body:not(.lang-en) .approval-seal .a-title{
  font-family:var(--font-bn); letter-spacing:.02em; font-size:var(--t-xs); text-transform:none;
}
.approval-seal .a-sub{
  font-family:var(--font-bn-display);
  font-size:var(--t-h2);
  font-weight:700;
  line-height:1.3;
  color:var(--ink-paper);
  margin-bottom:var(--s3);
  max-width:20ch;
}
body.lang-en .approval-seal .a-sub{ font-family:var(--font-display); font-weight:400; line-height:1.08; letter-spacing:-.02em; }
.approval-seal .a-desc{
  font-size:var(--t-sm);
  line-height:1.75;
  color:var(--ink-muted);
  max-width:52ch;
}
.approval-seal::after{
  counter-increment:appr;
  content:counter(appr,decimal-leading-zero);
  position:absolute; right:0; top:var(--s6);
  font-family:var(--font-mono);
  font-size:var(--t-label);
  color:var(--ink-rule);
}

@media (min-width:900px){
  .approval-seal{
    grid-template-columns:66px minmax(0,1.1fr) minmax(0,1.2fr);
    column-gap:var(--s7);
    padding:var(--s7) 0;
  }
  .approval-seal .a-title,
  .approval-seal .a-sub{ grid-column:2; }
  .approval-seal .a-desc{ grid-column:3; grid-row:1 / span 3; padding-right:var(--s7); }
  .approval-seal::after{ top:var(--s7); }
}

/* =========================================================
   10. THE REGISTER — numbered index rows, not a card wall

   Every list on the site is one object: a ruled register whose
   rows are numbered in sequence. It replaces the 3-up card grid
   entirely, which is what made the old layout read as a template
   and what made 41 courses an unscannable wall.
   ========================================================= */
.card-grid{
  display:block;
  counter-reset:reg;
  border-top:2px solid var(--ink);
  border-bottom:2px solid var(--ink);
  background:none;
}
.card{
  position:relative;
  display:grid;
  grid-template-columns:34px minmax(0,1fr);
  column-gap:var(--s4);
  padding:var(--s5) 0;
  border-bottom:1px solid var(--rule);
  background:none;
  transition:background var(--dur-1) var(--ease-out);
}
.card:last-child{ border-bottom:0; }
.card:hover{ background:var(--paper-light); }

/* the register number */
.card::before{
  counter-increment:reg;
  content:counter(reg,decimal-leading-zero);
  grid-column:1; grid-row:1 / span 99;
  align-self:start;
  font-family:var(--font-mono);
  font-size:var(--t-label);
  font-weight:500;
  line-height:1.7;
  color:var(--red);
  transform:none;
  width:auto; height:auto;
  background:none;
}
.card > *{ grid-column:2; }

.card .card-icon{
  width:26px; height:26px;
  margin-bottom:var(--s3);
  color:var(--ink-faint);
  transition:color var(--dur-1) var(--ease-out);
}
.card:hover .card-icon{ color:var(--red); }
.card .card-icon svg{ width:100%; height:100%; }

.card .code{
  font-family:var(--font-mono);
  font-size:var(--t-micro);
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--ink-faint);
  margin-bottom:6px;
}
.card h3{
  font-size:var(--t-h3);
  margin-bottom:6px;
  max-width:44ch;
}
.card .meta{
  font-family:var(--font-mono);
  font-size:var(--t-xs);
  color:var(--ink-soft);
  margin-bottom:4px;
}
body:not(.lang-en) .card .meta{ font-family:var(--font-bn); }
.card .elig,
.card .seats{
  font-size:var(--t-xs);
  line-height:1.6;
  color:var(--ink-faint);
  max-width:56ch;
  margin-bottom:0;
}
.card p{
  font-size:var(--t-sm);
  line-height:1.7;
  color:var(--ink-soft);
  max-width:60ch;
  margin-top:4px;
}
.card a.enroll{
  display:inline-flex; align-items:center; gap:6px;
  margin-top:var(--s3);
  min-height:44px;
  font-family:var(--font-mono);
  font-size:var(--t-xs);
  font-weight:500;
  letter-spacing:.06em;
  color:var(--red-deep);
  cursor:pointer;
  transition:gap var(--dur-1) var(--ease-out);
}
body:not(.lang-en) .card a.enroll{ font-family:var(--font-bn); letter-spacing:0; font-weight:600; }
.card a.enroll:hover{ gap:12px; }

/* body note inside a register row (replaces repeated inline styles) */
.card .card-note{
  font-size:var(--t-sm);
  line-height:1.72;
  color:var(--ink-soft);
  margin-top:6px;
  max-width:60ch;
}
/* an approval seal set inside a register row */
.card .card-seal{
  width:56px; height:56px;
  margin-bottom:var(--s3);
}
.card .card-seal img{ width:100%; height:100%; object-fit:contain; }

/* a quiet qualifying line under a section */
.footnote{
  font-size:var(--t-xs);
  line-height:1.7;
  color:var(--ink-faint);
  margin-top:var(--s5);
  max-width:64ch;
}

.card .stamp-corner{
  position:absolute; top:var(--s5); right:0;
  font-family:var(--font-mono);
  font-size:8.5px;
  line-height:1.25;
  letter-spacing:.1em;
  text-align:right;
  padding:0;
  border:0;
  color:var(--ink-faint);
  transform:none;
}
.card.free .stamp-corner{ color:var(--red-deep); }

/* desktop: the row opens into title | detail columns */
@media (min-width:900px){
  .card{
    grid-template-columns:52px minmax(0,1.45fr) minmax(0,1fr);
    column-gap:var(--s6);
    align-items:baseline;
    padding:var(--s5) 0;
  }
  .card .card-icon,
  .card .code,
  .card h3{ grid-column:2; }
  .card .meta,
  .card .elig,
  .card .seats,
  .card p,
  .card a.enroll{ grid-column:3; }
  .card h3{ margin-bottom:0; }
  .card .stamp-corner{ top:var(--s5); }
}

/* --- pathways: asymmetric editorial rows, counter-numbered --- */
.pathway-grid{
  display:block;
  counter-reset:path;
  border-top:1px solid var(--rule-strong);
}
.pathway-card{
  position:relative;
  display:grid;
  grid-template-columns:minmax(0,1fr);
  gap:var(--s3);
  padding:var(--s6) 0;
  border:0;
  border-bottom:1px solid var(--rule);
  background:none;
}
.pathway-card:last-child{ border-bottom:0; }
.pathway-card .p-icon{
  width:30px; height:30px;
  color:var(--red-deep);
  margin-bottom:var(--s2);
}
.pathway-card .p-icon svg{ width:100%; height:100%; }
.pathway-card h3{
  font-size:var(--t-h2);
  margin-bottom:0;
}
.pathway-card p{
  font-size:var(--t-sm);
  line-height:1.75;
  color:var(--ink-soft);
  max-width:58ch;
  margin:0;
}
.pathway-card::after{
  counter-increment:path;
  content:counter(path,decimal-leading-zero);
  position:absolute; right:0; top:var(--s6);
  font-family:var(--font-mono);
  font-size:var(--t-label);
  color:var(--ink-faint);
  opacity:.7;
}
@media (min-width:900px){
  .pathway-card{
    grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);
    column-gap:var(--s8);
    align-items:start;
    padding:var(--s7) 0;
  }
  .pathway-card .p-icon{ grid-row:1; grid-column:1; }
  .pathway-card h3{ grid-row:2; grid-column:1; }
  .pathway-card p{ grid-row:1 / span 2; grid-column:2; padding-right:var(--s7); }
  .pathway-card::after{ top:var(--s7); }
}

/* =========================================================
   11. PROMO BANNER
   ========================================================= */
.promo-banner{
  display:grid;
  grid-template-columns:minmax(0,1fr);
  border:1px solid var(--rule);
  background:var(--paper-light);
  overflow:hidden;
}
.promo-banner-media{
  position:relative;
  /* The source banner is half saturated blue-orange gradient with its own
     headline set into it — a palette that fights every other colour here, and
     copy the section already sets in type. Cropping to the lower band keeps
     what is actually valuable: real students, in this institute's own lab and
     board exam hall. */
  /* 4:1 against the source's 16:9 leaves exactly the lower ~45% visible once
     object-position pins it to the bottom — which is the half worth showing.
     The upper half is a saturated blue-orange gradient carrying a headline
     this section already sets in type, and it fights every other colour on
     the page. */
  aspect-ratio:4/1;
  overflow:hidden;
  background:var(--paper-deep);
}
.promo-banner-media img{
  width:100%; height:100%;
  object-fit:cover;
  object-position:center bottom;
}
.promo-banner-chip{
  position:absolute; left:var(--s4); bottom:var(--s4);
  font-family:var(--font-mono);
  font-size:var(--t-micro);
  letter-spacing:.14em;
  padding:6px 10px;
  background:rgba(16,14,11,.82);
  color:var(--ink-paper);
}
body:not(.lang-en) .promo-banner-chip{ font-family:var(--font-bn); letter-spacing:.02em; }
.promo-banner-copy{ padding:var(--s6) var(--s5); }
.promo-banner-copy h2{ margin-bottom:var(--s3); }
.promo-banner-copy .bn-line{
  font-family:var(--font-bn-display);
  font-size:var(--t-sm);
  color:var(--red-deep);
  margin-bottom:var(--s4);
}
.promo-banner-copy p{
  font-size:var(--t-sm);
  line-height:1.75;
  color:var(--ink-soft);
  margin-bottom:var(--s5);
}

/* =========================================================
   12. BRANCHES
   ========================================================= */
.branches-bg{
  position:relative;
  background:var(--paper-deep);
  max-width:none;
}
.branches-bg > *{
  position:relative;
  max-width:var(--maxw);
  margin-left:auto; margin-right:auto;
}

.branch-row{
  display:block;
  counter-reset:br;
  border-top:2px solid var(--ink);
}
.branch{
  position:relative;
  display:grid;
  grid-template-columns:minmax(0,1fr);
  gap:6px;
  padding:var(--s5) 0;
  border-bottom:1px solid var(--rule);
}
/* A photograph of the actual building. Someone deciding which campus to walk
   into needs to recognise the frontage from the street — this is wayfinding,
   not decoration, which is why it earns its bytes on a 4G phone. */
.branch-plate{
  position:relative;
  aspect-ratio:16/9;
  overflow:hidden;
  background:var(--paper-sink);
  border:1px solid var(--rule);
  margin-bottom:var(--s3);
}
.branch-plate img{
  width:100%; height:100%;
  object-fit:cover;
  filter:saturate(.88) contrast(1.02);
  transition:transform var(--dur-3) var(--ease-out);
}
.branch:hover .branch-plate img{ transform:scale(1.03); }
.branch:last-child{ border-bottom:0; }
.branch .tag{
  font-family:var(--font-mono);
  font-size:var(--t-micro);
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--red-deep);
}
body:not(.lang-en) .branch .tag{ font-family:var(--font-bn); letter-spacing:.04em; font-size:var(--t-xs); text-transform:none; }
.branch h3{ font-size:var(--t-h3); margin:0; }
.branch p{
  font-size:var(--t-xs);
  color:var(--ink-soft);
  margin:0;
  max-width:40ch;
}
.branch .phone{
  font-family:var(--font-mono);
  font-size:var(--t-h3);
  font-weight:500;
  color:var(--ink);
  letter-spacing:-.01em;
}
.branch .hours{
  font-size:var(--t-micro);
  color:var(--ink-faint);
}
body:not(.lang-en) .branch .hours{ font-size:var(--t-xs); }

@media (min-width:760px){
  .branch{
    grid-template-columns:150px minmax(0,1.15fr) minmax(0,1fr) auto;
    column-gap:var(--s6);
    align-items:start;
    padding:var(--s5) 0;
  }
  .branch-plate{
    grid-column:1; grid-row:1 / span 4;
    aspect-ratio:4/3;
    margin-bottom:0;
  }
  .branch .tag{ grid-column:2; grid-row:1; }
  .branch h3{ grid-column:2; grid-row:2; }
  .branch .hours{ grid-column:2; grid-row:3; }
  .branch p{ grid-column:3; grid-row:1 / span 3; }
  .branch .phone{ grid-column:4; grid-row:1; text-align:right; }
  .branch .map-link{ grid-column:4; grid-row:2; justify-content:flex-end; }
}

/* --- branches page cards --- */
.branch-card-grid{
  display:grid;
  grid-template-columns:minmax(0,1fr);
  gap:var(--s6);
}
.branch-card{
  border:1px solid var(--rule);
  background:var(--paper-light);
  overflow:hidden;
  transition:border-color var(--dur-2) var(--ease-out);
}
.branch-card:hover{ border-color:var(--rule-strong); }
.branch-card.has-photo .branch-photo{
  position:relative;
  aspect-ratio:16/10;
  overflow:hidden;
  background:var(--paper-deep);
}
.branch-card.has-photo .branch-photo img{
  width:100%; height:100%;
  object-fit:cover;
  transition:transform var(--dur-3) var(--ease-out);
}
.branch-card.has-photo:hover .branch-photo img{ transform:scale(1.03); }
.branch-card.has-photo .branch-photo .photo-tag{
  position:absolute; left:var(--s4); top:var(--s4);
  z-index:2;
  font-family:var(--font-mono);
  font-size:var(--t-micro);
  letter-spacing:.14em;
  padding:6px 10px;
  background:rgba(16,14,11,.82);
  color:var(--ink-paper);
}
body:not(.lang-en) .branch-card.has-photo .photo-tag{ font-family:var(--font-bn); letter-spacing:.02em; }
.branch-card-body{ padding:var(--s6) var(--s5); }
.branch-card h3{ margin-bottom:var(--s5); }
.branch-card .row{
  display:grid;
  grid-template-columns:88px minmax(0,1fr);
  gap:var(--s3);
  padding:var(--s3) 0;
  border-top:1px solid var(--rule-soft);
  font-size:var(--t-xs);
}
.branch-card .row strong{
  font-family:var(--font-mono);
  font-size:var(--t-micro);
  font-weight:500;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--ink-faint);
  padding-top:2px;
}
body:not(.lang-en) .branch-card .row strong{
  font-family:var(--font-bn); letter-spacing:0; font-size:var(--t-xs); text-transform:none;
}
.branch-card .row span{ color:var(--ink-soft); }

.map-embed-wrap{
  border:1px solid var(--rule);
  overflow:hidden;
  background:var(--paper-deep);
}
.map-embed-wrap iframe{
  display:block;
  width:100%;
  min-height:320px;
  border:0;
}

/* =========================================================
   12b. THE COUNSEL RUNG

   Between "this looks credible" and "I will apply" there is a gap,
   and for this buyer a two-minute phone call closes it far more
   often than a form does. The page had no low-commitment step at
   all: every CTA was Apply or Browse, and the phone number lived
   only inside a floating widget.
   ========================================================= */
.counsel{
  position:relative; z-index:1;
  max-width:none;
  background:var(--paper-deep);
  border-top:1px solid var(--rule);
  border-bottom:1px solid var(--rule);
  padding:clamp(36px,5vw,64px) var(--gutter);
}
.counsel-inner{
  max-width:var(--maxw);
  margin:0 auto;
  display:grid;
  grid-template-columns:minmax(0,1fr);
  gap:var(--s6);
  align-items:center;
}
.counsel-copy h2{
  font-size:var(--t-h2);
  margin-bottom:var(--s4);
  max-width:20ch;
}
.counsel-copy p{
  font-size:var(--t-sm);
  line-height:1.78;
  color:var(--ink-soft);
  max-width:56ch;
  margin:0;
}
.counsel-actions{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:var(--s3);
}
.counsel-actions .btn-outline,
.counsel-actions .btn-ghost{ width:100%; justify-content:center; }
.counsel-call .mono{ letter-spacing:.02em; }
.counsel-hours{
  margin:var(--s2) 0 0;
  font-family:var(--font-mono);
  font-size:var(--t-micro);
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--ink-faint);
}
body:not(.lang-en) .counsel-hours{
  font-family:var(--font-bn); letter-spacing:.02em; font-size:var(--t-xs); text-transform:none;
}
@media (min-width:860px){
  .counsel-inner{ grid-template-columns:minmax(0,1.4fr) minmax(0,.7fr); column-gap:var(--s8); }
  .counsel-actions{ align-items:stretch; }
}

/* section tail actions (replaces repeated inline margin/text-align) */
.cta-tail{ margin-top:var(--s6); text-align:center; }
.cta-tail.left{ text-align:left; }

/* --- tap-to-call ---------------------------------------------------
   Every campus number was plain text. On the phone this site is mostly read
   on, calling is the shortest path to an enrolment, so each number is a real
   link with a real tap target. --------------------------------------- */
.phone a,
.tel-link{
  display:inline-flex;
  align-items:center;
  min-height:44px;
  color:inherit;
  border-bottom:1px solid transparent;
  transition:color var(--dur-1) var(--ease-out), border-color var(--dur-1) var(--ease-out);
}
.phone a:hover,
.tel-link:hover{ color:var(--red-deep); border-bottom-color:currentColor; }
.tel-link{
  font-variant-numeric:tabular-nums;
  color:var(--red-deep);
  font-weight:600;
}
.tel-row{
  display:flex; flex-wrap:wrap; align-items:center;
  gap:var(--s2) var(--s3);
  margin:0;
}
.tel-row span{ color:var(--rule-strong); }

/* =========================================================
   13. FAQ
   ========================================================= */
.faq{ border-top:1px solid var(--rule); max-width:900px; }
.faq-item{ border-bottom:1px solid var(--rule-soft); }
.faq-q{
  width:100%;
  display:flex; align-items:center; justify-content:space-between; gap:var(--s4);
  padding:var(--s5) 0;
  min-height:60px;
  text-align:left;
  font-family:var(--font-bn-display);
  font-size:var(--t-h3);
  font-weight:700;
  line-height:1.45;
  color:var(--ink);
  cursor:pointer;
  transition:color var(--dur-1) var(--ease-out);
}
body.lang-en .faq-q{ font-family:var(--font-display); font-weight:400; line-height:1.22; }
.faq-q:hover{ color:var(--red-deep); }
.faq-q .plus{
  position:relative;
  flex:none;
  width:22px; height:22px;
}
.faq-q .plus::before,
.faq-q .plus::after{
  content:'';
  position:absolute; left:50%; top:50%;
  background:var(--red);
  transform:translate(-50%,-50%);
  transition:transform var(--dur-2) var(--ease-out);
}
.faq-q .plus::before{ width:14px; height:1.5px; }
.faq-q .plus::after{ width:1.5px; height:14px; }
.faq-item.open .faq-q .plus::after{ transform:translate(-50%,-50%) scaleY(0); }
.faq-a{
  max-height:0;
  overflow:hidden;
  transition:max-height var(--dur-3) var(--ease-inout);
}
.faq-a p{
  padding:0 0 var(--s5);
  max-width:70ch;
  font-size:var(--t-sm);
  line-height:1.8;
  color:var(--ink-soft);
  margin:0;
}

/* =========================================================
   14. TABS + COURSE CATALOG + FINDER
   ========================================================= */
.tabs{
  display:flex; flex-wrap:wrap; gap:2px;
  margin-bottom:var(--s7);
  border-bottom:1px solid var(--rule);
}
.tab{
  padding:14px 18px;
  min-height:48px;
  display:inline-flex; align-items:center;
  font-family:var(--font-mono);
  font-size:var(--t-label);
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--ink-faint);
  cursor:pointer;
  border-bottom:2px solid transparent;
  margin-bottom:-1px;
  transition:color var(--dur-1), border-color var(--dur-1);
}
body:not(.lang-en) .tab{
  font-family:var(--font-bn-display); letter-spacing:.02em;
  font-size:var(--t-sm); text-transform:none; font-weight:700;
}
.tab:hover{ color:var(--ink); }
.tab.active{ color:var(--ink); border-bottom-color:var(--red); }

.course-panel{ display:none; }
.course-panel.active{ display:block; }

.total-callout{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  border:1px solid var(--rule);
  margin-bottom:var(--s7);
  background:var(--paper-light);
}
.total-callout .cell{
  padding:var(--s5) var(--s4);
  border-right:1px solid var(--rule-soft);
}
.total-callout .cell:last-child{ border-right:0; }
.total-callout .cell .num{
  font-family:var(--font-mono);
  font-weight:500;
  font-size:clamp(1.9rem,6vw,2.9rem);
  line-height:1;
  color:var(--ink);
  margin-bottom:var(--s2);
}
body:not(.lang-en) .total-callout .cell .num{ font-family:var(--font-bn-display); }
.total-callout .cell .label{
  font-size:var(--t-micro);
  line-height:1.45;
  color:var(--ink-faint);
}
body:not(.lang-en) .total-callout .cell .label{ font-size:var(--t-xs); }

/* --- finder --- */
.finder-head h2{ margin-bottom:var(--s3); }
.finder-head p{
  color:var(--ink-soft);
  font-size:var(--t-sm);
  margin-bottom:var(--s6);
  max-width:52ch;
}
.finder-grid{
  display:block;
  counter-reset:fnd;
  border-top:2px solid var(--ink);
  background:none;
  border-left:0; border-right:0; border-bottom:0;
}
.finder-tile{
  position:relative;
  width:100%;
  display:grid;
  grid-template-columns:34px minmax(0,1fr) auto;
  column-gap:var(--s4);
  align-items:center;
  min-height:64px;
  padding:var(--s4) 0;
  border-bottom:1px solid var(--rule);
  background:none;
  text-align:left;
  cursor:pointer;
  transition:padding-left var(--dur-1) var(--ease-out), background var(--dur-1) var(--ease-out);
}
.finder-tile:hover{ background:var(--paper-light); padding-left:var(--s3); }
.finder-tile::before{
  counter-increment:fnd;
  content:counter(fnd,decimal-leading-zero);
  font-family:var(--font-mono);
  font-size:var(--t-label);
  color:var(--red);
}
.finder-tile .ft-icon{
  display:none;
}
.finder-tile .ft-title{
  font-family:var(--font-bn-display);
  font-weight:700;
  font-size:var(--t-h3);
  line-height:1.35;
  color:var(--ink);
}
body.lang-en .finder-tile .ft-title{ font-family:var(--font-display); font-weight:400; letter-spacing:-.015em; }
.finder-tile .ft-count{
  font-family:var(--font-mono);
  font-size:var(--t-xs);
  letter-spacing:.06em;
  color:var(--ink-faint);
  text-align:right;
  white-space:nowrap;
}
body:not(.lang-en) .finder-tile .ft-count{ font-family:var(--font-bn); letter-spacing:0; }

.finder-showall{
  margin-top:var(--s5);
  min-height:44px;
  font-size:var(--t-xs);
  font-weight:600;
  color:var(--red-deep);
  cursor:pointer;
  border-bottom:1px solid transparent;
}
.finder-showall:hover{ border-bottom-color:currentColor; }

.cat-back{ margin-bottom:var(--s5); }
.cat-back button{
  min-height:44px;
  font-size:var(--t-xs);
  font-weight:600;
  color:var(--ink-soft);
  cursor:pointer;
}
.cat-back button:hover{ color:var(--red-deep); }

.cat-group-head{
  display:flex; align-items:baseline; justify-content:space-between;
  gap:var(--s4);
  padding-bottom:var(--s3);
  border-bottom:1px solid var(--rule);
  margin-bottom:var(--s3);
}
.cat-group-head h3{ font-size:var(--t-h2); }
.cat-group-head .count{
  flex:none;
  font-size:var(--t-micro);
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--ink-faint);
}
body:not(.lang-en) .cat-group-head .count{ letter-spacing:.02em; font-size:var(--t-xs); }
.cat-group-note{
  font-size:var(--t-sm);
  color:var(--ink-soft);
  margin-bottom:var(--s5);
  max-width:60ch;
}

/* catalog display modes */
.catalog.mode-picker .cat-group,
.catalog.mode-picker .cat-back{ display:none; }
.catalog.mode-category .finder{ display:none; }
.catalog.mode-category .cat-group{ display:none; }
.catalog.mode-category .cat-group.active{ display:block; }
.catalog.mode-all .finder{ display:none; }
.catalog.mode-all .cat-group{ display:block; margin-bottom:var(--s8); }
.catalog.mode-all .cat-back{ display:block; }

/* =========================================================
   15. THE LEDGER — signature scroll-inked register (about.html)
   ========================================================= */
.timeline{
  position:relative;
  padding-left:var(--s5);
}
/* the spine: a rule that inks itself in as you scroll */
.tl-rule{
  position:absolute; left:0; top:6px; bottom:6px;
  width:1px;
  background:var(--rule);
  overflow:hidden;
}
.tl-rule > i{
  display:block;
  width:100%; height:100%;
  background:var(--red);
  transform:scaleY(var(--ledger-p,0));
  transform-origin:top;
}
.tl-row{
  position:relative;
  display:grid;
  grid-template-columns:minmax(0,1fr);
  gap:var(--s3);
  padding:var(--s6) 0;
  border-bottom:1px solid var(--rule-soft);
}
.tl-row:last-child{ border-bottom:0; }
.tl-row::before{
  content:'';
  position:absolute; left:calc(var(--s5) * -1); top:calc(var(--s6) + 12px);
  width:9px; height:9px;
  margin-left:-4px;
  border-radius:50%;
  background:var(--paper);
  border:1px solid var(--rule-strong);
  transition:background var(--dur-2) var(--ease-out), border-color var(--dur-2) var(--ease-out);
}
.tl-row.in::before{ background:var(--red); border-color:var(--red); }
.tl-row .yr{
  font-family:var(--font-mono);
  font-weight:500;
  font-size:clamp(2rem,7vw,3.2rem);
  line-height:1;
  letter-spacing:-.03em;
  color:var(--ink-faint);
  font-variant-numeric:tabular-nums;
  transition:color var(--dur-3) var(--ease-out);
}
body:not(.lang-en) .tl-row .yr{ font-family:var(--font-bn-display); letter-spacing:0; }
.tl-row.in .yr{ color:var(--ink); }
.tl-row .txt strong{
  display:block;
  font-family:var(--font-bn-display);
  font-size:var(--t-h3);
  font-weight:700;
  line-height:1.4;
  margin-bottom:var(--s2);
}
body.lang-en .tl-row .txt strong{ font-family:var(--font-display); font-weight:400; line-height:1.2; }
.tl-row .txt p{
  font-size:var(--t-sm);
  line-height:1.78;
  color:var(--ink-soft);
  max-width:62ch;
  margin:0;
}
.tl-row .badge{
  display:inline-block;
  margin-top:var(--s3);
  padding:5px 10px;
  font-family:var(--font-mono);
  font-size:var(--t-micro);
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--red-deep);
  border:1px solid var(--red);
  background:rgba(196,40,27,.05);
}
body:not(.lang-en) .tl-row .badge{
  font-family:var(--font-bn); letter-spacing:.02em; font-size:var(--t-xs); text-transform:none;
}

/* --- the record's opening figure: three computers -> 240+ --- */
.arc-figure{
  display:grid;
  grid-template-columns:minmax(0,1fr);
  gap:var(--s5);
  align-items:end;
  padding:var(--s6) 0 var(--s7);
  border-bottom:1px solid var(--rule);
  margin-bottom:var(--s7);
}
.arc-figure .arc-cell .k{
  font-family:var(--font-mono);
  font-size:var(--t-micro);
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--ink-faint);
  margin-bottom:var(--s3);
}
body:not(.lang-en) .arc-figure .arc-cell .k{
  font-family:var(--font-bn); letter-spacing:.04em; font-size:var(--t-xs); text-transform:none;
}
.arc-figure .arc-cell .v{
  font-family:var(--font-mono);
  font-weight:500;
  font-size:clamp(2.8rem,11vw,5.2rem);
  line-height:.9;
  letter-spacing:-.04em;
  font-variant-numeric:tabular-nums;
  color:var(--ink);
}
body:not(.lang-en) .arc-figure .arc-cell .v{ font-family:var(--font-bn-display); letter-spacing:-.01em; line-height:1.12; }
.arc-figure .arc-cell .u{
  font-size:var(--t-xs);
  color:var(--ink-soft);
  margin-top:var(--s3);
  max-width:24ch;
}
.arc-figure .arc-arrow{
  font-family:var(--font-mono);
  font-size:var(--t-h3);
  color:var(--red);
  line-height:1;
  padding-bottom:var(--s4);
}
@media (min-width:760px){
  .arc-figure{ grid-template-columns:minmax(0,1fr) auto minmax(0,1fr); column-gap:var(--s7); }
}

/* --- the timeline's forward-looking row: a commitment, not a record --- */
.tl-row.pending .yr{ color:var(--ink-faint); }
.tl-row.pending::before{
  background:var(--paper);
  border-style:dashed;
  border-color:var(--red);
}
.tl-row.pending .badge{
  color:var(--ink-faint);
  border-style:dashed;
  border-color:var(--rule-strong);
  background:none;
}

/* =========================================================
   15b. THE SIGNED STATEMENT — a named person takes responsibility

   For a buyer whose whole question is "is this institution real",
   an accountable human signature outranks any amount of copy.
   This is the About page's single ink inversion.
   ========================================================= */
.statement{
  position:relative; z-index:1;
  max-width:none;
  background:var(--ink);
  color:var(--ink-paper);
  padding:var(--sec-y) var(--gutter);
  overflow:hidden;
}
.statement > .statement-inner{
  position:relative;
  max-width:var(--maxw);
  margin:0 auto;
}
.statement::before{
  content:'';
  position:absolute; inset:0;
  background:radial-gradient(ellipse at 8% 0%, rgba(255,107,79,.10), transparent 58%);
  pointer-events:none;
}
.statement .sec-num{ color:var(--red-bright); }
.statement .eyebrow{ color:var(--red-bright); }
.statement h2{
  max-width:20ch;
  margin-bottom:var(--s6);
  padding-bottom:var(--s5);
  border-bottom:1px solid var(--ink-rule);
}
.statement-body{
  display:grid;
  grid-template-columns:minmax(0,1fr);
  gap:var(--s6);
}
.statement-body p{
  font-size:var(--t-lede);
  line-height:1.9;
  color:var(--ink-paper);
  max-width:60ch;
}
body:not(.lang-en) .statement-body p{ line-height:1.95; }
.statement-body p + p{ margin-top:0; }
.statement-quote{
  border-left:2px solid var(--red-bright);
  padding-left:var(--s5);
  font-size:var(--t-sm);
  line-height:1.85;
  color:var(--ink-muted);
  max-width:52ch;
}
.signature{
  margin-top:var(--s7);
  padding-top:var(--s5);
  border-top:1px solid var(--ink-rule);
}
.signature .sig-name{
  font-family:var(--font-bn-display);
  font-size:var(--t-h3);
  font-weight:700;
  color:var(--ink-paper);
  margin-bottom:6px;
}
body.lang-en .signature .sig-name{ font-family:var(--font-display); font-weight:400; }
.signature .sig-role,
.signature .sig-where{
  font-family:var(--font-mono);
  font-size:var(--t-micro);
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--ink-muted);
  line-height:1.9;
}
body:not(.lang-en) .signature .sig-role,
body:not(.lang-en) .signature .sig-where{
  font-family:var(--font-bn); letter-spacing:.03em; font-size:var(--t-xs); text-transform:none;
}
.signature .sig-where{ color:var(--ink-faint); }
@media (min-width:900px){
  .statement-body{ grid-template-columns:minmax(0,1.35fr) minmax(0,.85fr); column-gap:var(--s8); }
  .statement-quote{ margin-top:6px; }
}

/* =========================================================
   16. NOTICES
   ========================================================= */
.notice-list{ border-top:1px solid var(--rule); }
.notice{
  position:relative;
  display:grid;
  grid-template-columns:minmax(0,1fr);
  gap:var(--s3);
  padding:var(--s6) 0;
  border-bottom:1px solid var(--rule-soft);
  transition:background var(--dur-2) var(--ease-out);
}
.notice .date{
  font-size:var(--t-micro);
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--ink-faint);
  padding-top:4px;
}
body:not(.lang-en) .notice .date{ letter-spacing:.02em; font-size:var(--t-xs); }
.notice h3{ margin-bottom:var(--s3); }
.notice p{
  font-size:var(--t-sm);
  line-height:1.78;
  color:var(--ink-soft);
  max-width:70ch;
  margin:0;
}
.notice .tag{
  align-self:start;
  display:inline-block;
  padding:5px 10px;
  font-family:var(--font-mono);
  font-size:var(--t-micro);
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--ink-faint);
  border:1px solid var(--rule);
}
body:not(.lang-en) .notice .tag{
  font-family:var(--font-bn); letter-spacing:.02em; font-size:var(--t-xs); text-transform:none;
}
.notice .tag.urgent{
  color:var(--red-deep);
  border-color:var(--red);
  background:rgba(196,40,27,.05);
}

/* =========================================================
   17. FORMS
   ========================================================= */
.form-wrap{
  padding:var(--s6) var(--s5);
  border:1px solid var(--rule);
  background:var(--paper-light);
}
.form-grid{
  display:grid;
  grid-template-columns:minmax(0,1fr);
  gap:var(--s5);
  margin-bottom:var(--s6);
}
.field{ display:flex; flex-direction:column; }
.field.full{ grid-column:1/-1; }
.field label{
  font-family:var(--font-mono);
  font-size:var(--t-label);
  font-weight:500;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--ink-faint);
  margin-bottom:var(--s2);
}
body:not(.lang-en) .field label{
  font-family:var(--font-bn); letter-spacing:0; text-transform:none; font-size:var(--t-xs);
}
.field input,
.field select,
.field textarea{
  width:100%;
  min-height:48px;
  padding:12px 14px;
  font-family:inherit;
  font-size:var(--t-sm);
  color:var(--ink);
  background:var(--paper);
  border:1px solid var(--rule);
  border-radius:0;
  transition:border-color var(--dur-1) var(--ease-out), background var(--dur-1) var(--ease-out);
}
.field textarea{ resize:vertical; min-height:110px; }
.field input:hover,
.field select:hover,
.field textarea:hover{ border-color:var(--rule-strong); }
.field input:focus,
.field select:focus,
.field textarea:focus{
  outline:none;
  border-color:var(--ink);
  background:#fff;
  box-shadow:0 0 0 3px rgba(196,40,27,.12);
}
.field .hint{
  font-size:var(--t-micro);
  color:var(--ink-faint);
  margin-top:6px;
  line-height:1.5;
}
body:not(.lang-en) .field .hint{ font-size:var(--t-xs); }

.doc-checklist{ list-style:none; padding:0; margin:0 0 var(--s5); }
.doc-checklist li{
  position:relative;
  padding:var(--s3) 0 var(--s3) var(--s6);
  border-bottom:1px solid var(--rule-soft);
  font-size:var(--t-sm);
  color:var(--ink-soft);
}
.doc-checklist li::before{
  content:'';
  position:absolute; left:0; top:calc(var(--s3) + 7px);
  width:12px; height:7px;
  border-left:1.5px solid var(--red);
  border-bottom:1.5px solid var(--red);
  transform:rotate(-45deg);
}

/* =========================================================
   18. CTA BANNER
   ========================================================= */
.cta-banner{
  position:relative; z-index:1;
  max-width:none;
  padding:var(--sec-y) var(--gutter);
  background:var(--ink);
  color:var(--ink-paper);
  overflow:hidden;
}
.cta-banner::before{
  content:'';
  position:absolute; inset:0;
  background:radial-gradient(ellipse at 20% 120%, rgba(255,107,79,.14), transparent 60%);
  pointer-events:none;
}
.cta-banner > *{
  position:relative;
  max-width:var(--maxw);
  margin-left:auto; margin-right:auto;
}
.cta-banner h2{
  color:var(--ink-paper);
  max-width:22ch;
  margin-bottom:var(--s4);
}
.cta-banner p{
  color:var(--ink-muted);
  font-size:var(--t-lede);
  max-width:56ch;
  margin-bottom:var(--s6);
}
.cta-banner .btn-primary{ background:var(--red); border-color:var(--red); }
/* any ghost/outline button on ink inherits the light treatment */
.cta-banner .btn-ghost,
.approvals-band .btn-ghost,
footer .btn-ghost{
  color:var(--ink-paper);
  border-color:var(--ink-rule);
  background:transparent;
}
.cta-banner .btn-ghost:hover,
.approvals-band .btn-ghost:hover,
footer .btn-ghost:hover{
  border-color:var(--ink-paper);
  background:rgba(237,231,218,.08);
}
.cta-banner .btn-primary:hover{ background:var(--red-bright); border-color:var(--red-bright); color:var(--ink); }
.cta-btn-row{ display:flex; flex-wrap:wrap; gap:var(--s3); }

/* =========================================================
   19. FOOTER
   ========================================================= */
footer{
  position:relative; z-index:1;
  background:var(--ink);
  color:var(--ink-muted);
  padding:var(--sec-y) var(--gutter) var(--s6);
  border-top:1px solid var(--ink-rule);
}
.foot-grid,
.foot-approvals,
.foot-bottom{
  max-width:var(--maxw);
  margin-left:auto; margin-right:auto;
}
.foot-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:var(--s6) var(--s5);
  padding-bottom:var(--s7);
}
.foot-grid h3{
  font-family:var(--font-mono);
  font-size:var(--t-micro);
  font-weight:500;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--ink-paper);
  margin-bottom:var(--s4);
}
body:not(.lang-en) .foot-grid h3{
  font-family:var(--font-bn-display); letter-spacing:.04em; font-size:var(--t-xs);
}
.foot-grid a{
  display:block;
  padding:7px 0;
  min-height:34px;
  font-size:var(--t-xs);
  color:var(--ink-muted);
  transition:color var(--dur-1) var(--ease-out);
}
.foot-grid a:hover{ color:var(--ink-paper); }
/* Opening hours are statements, not links — they were marked up as <a> with no
   href, which handed screen readers four dead links and ate a 44px tap slot each. */
.foot-grid .fg-line{
  font-size:var(--t-xs);
  line-height:1.75;
  color:var(--ink-muted);
}
.foot-grid .fg-line.strong{ color:var(--ink-paper); }
/* The footer sits on ink, so the wordmark-only asset is the only correct one:
   logo.png / logo-mark.png carry two lines of BLACK type that disappear
   entirely against --ink. logo-word.png is the red mark alone. */
.foot-logo{
  width:clamp(132px,17vw,164px);
  height:auto;
  aspect-ratio:285/84;
  margin-bottom:var(--s4);
}
.foot-bn{
  font-family:var(--font-bn-display);
  font-size:var(--t-xs);
  color:var(--ink-muted);
  margin-top:var(--s3);
}
.foot-about{
  font-size:var(--t-xs);
  max-width:30ch;
  line-height:1.7;
  color:var(--ink-muted);
}

/* The three seals stay on one line at every width. Wrapping split them 2 + 1,
   which reads as though the third body were an afterthought. The label sits
   above the row rather than competing with it for the same line. */
.foot-approvals{
  padding:var(--s5) 0;
  border-top:1px solid var(--ink-rule-soft);
  border-bottom:1px solid var(--ink-rule-soft);
}
.foot-approvals .fa-row{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:var(--s4);
  align-items:start;
  justify-items:center;
}
.foot-approvals .fa-label{
  display:block;
  text-align:center;
  margin-bottom:var(--s5);
  font-family:var(--font-mono);
  font-size:var(--t-micro);
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--ink-muted);
}
body:not(.lang-en) .foot-approvals .fa-label{ font-family:var(--font-bn); letter-spacing:.02em; }
/* Icon over label, every cell centred. Set side by side, the three captions
   are wildly different lengths ("বাংলাদেশ সরকার" against "NSDA"), so a
   horizontal badge left-aligns three marks at three different optical
   positions and the row reads as ragged. Stacking centres all three on one
   axis and the rhythm becomes exact. */
.foot-approvals .fa-badge{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:flex-start;
  gap:10px;
  width:100%;          /* fill the column so every mark centres on it exactly */
  min-width:0;
  text-align:center;
  font-size:var(--t-micro);
  letter-spacing:.04em;
  line-height:1.4;
  color:var(--ink-muted);
}
.foot-approvals .fa-badge span{ min-width:0; overflow-wrap:break-word; }
.foot-approvals .fa-badge img{
  width:34px; height:34px;
  flex:none;
  object-fit:contain;
  background:var(--paper-light);
  border-radius:50%;
  padding:4px;
}
@media (min-width:560px){
  .foot-approvals .fa-badge{ font-size:var(--t-xs); }
  .foot-approvals .fa-badge img{ width:40px; height:40px; }
}
.foot-bottom{
  display:flex; flex-wrap:wrap; gap:var(--s3) var(--s5);
  justify-content:space-between;
  padding-top:var(--s5);
  font-size:var(--t-micro);
  color:var(--ink-muted);
}

/* =========================================================
   20. FLOATING CONTACT WIDGET
   ========================================================= */
.contact-fab{
  position:fixed;
  right:14px;
  bottom:14px;
  z-index:90;
  display:flex; flex-direction:column; gap:10px;
}
.fab-btn{
  width:46px; height:46px;
  display:grid; place-items:center;
  border-radius:50%;
  color:#fff;
  box-shadow:var(--lift-2);
  cursor:pointer;
  transition:transform var(--dur-1) var(--ease-out);
}
.fab-btn svg{ width:22px; height:22px; }
.fab-btn:hover{ transform:scale(1.06); }
.fab-messenger{ background:#0866FF; }
.fab-whatsapp{ background:#25D366; }
.fab-call{ background:var(--ink); }

.fab-call-wrap{ position:relative; }
.fab-call-popover{
  position:absolute; right:56px; bottom:0;
  display:none;
  min-width:186px;
  padding:6px;
  background:var(--paper-light);
  border:1px solid var(--rule);
  box-shadow:var(--lift-3);
}
.fab-call-popover.open{ display:block; }
.fab-call-popover a{
  display:flex; align-items:center; gap:9px;
  padding:11px 12px;
  min-height:44px;
  font-size:var(--t-xs);
  color:var(--ink);
}
.fab-call-popover a svg{ width:15px; height:15px; color:var(--red-deep); flex:none; }
.fab-call-popover a:hover{ background:var(--paper-deep); }

/* The widget steps aside when a real action is underneath it. Opacity and a
   small translate only — it stays in the DOM and in the tab order is dropped
   with it, so nothing is announced that cannot be reached. */
.contact-fab.fab-yield{
  opacity:0;
  transform:translateX(14px) scale(.94);
  pointer-events:none;
  visibility:hidden;
}
.contact-fab{
  transition:opacity var(--dur-2) var(--ease-out),
             transform var(--dur-2) var(--ease-out),
             visibility 0s linear var(--dur-2);
}
.contact-fab:not(.fab-yield){ transition-delay:0s; }

/* =========================================================
   21. MOTION
   ========================================================= */
.reveal{
  opacity:0;
  transform:translateY(16px);
  transition:opacity var(--dur-3) var(--ease-out), transform var(--dur-3) var(--ease-out);
}
.reveal.in{ opacity:1; transform:none; }

.ledger-strip .stat{
  opacity:0;
  transform:translateY(12px);
  transition:opacity var(--dur-3) var(--ease-out), transform var(--dur-3) var(--ease-out);
}
.ledger-strip .stat.in{ opacity:1; transform:none; }

/* =========================================================
   22. RESPONSIVE — mobile is the base; these are upgrades
   ========================================================= */

/* --- mobile nav panel (base state below 1080px) --- */
.nav-links{
  position:fixed;
  top:calc(var(--nav-h) + var(--banner-h));
  left:0; right:0;
  flex-direction:column;
  align-items:stretch;
  gap:0;
  margin-left:0;
  padding:var(--s2) var(--gutter) var(--s5);
  background:var(--paper-light);
  border-bottom:1px solid var(--rule);
  box-shadow:var(--lift-3);
  max-height:calc(100vh - var(--nav-h) - var(--banner-h));
  overflow-y:auto;
  opacity:0;
  visibility:hidden;
  transform:translateY(-10px);
  transition:opacity var(--dur-2) var(--ease-out),
             transform var(--dur-2) var(--ease-out),
             visibility var(--dur-2) linear;
}
.nav-links.open{ opacity:1; visibility:visible; transform:none; }
.nav-links a{
  display:flex; align-items:center;
  padding:14px 0;
  min-height:52px;
  font-size:var(--t-sm);
  border-bottom:1px solid var(--rule-soft);
}
.nav-links a::after{ display:none; }
.nav-links a.current{ color:var(--red-deep); }
.nav-menu-btn{ display:grid; }
.lang-toggle{ margin-left:auto; }
.nav-cta{ display:none; }

@media (min-width:560px){
  .form-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .promo-banner-copy{ padding:var(--s7) var(--s6); }
  .branch-card-body{ padding:var(--s6); }
  .form-wrap{ padding:var(--s7) var(--s6); }
}

@media (min-width:768px){
  :root{ --nav-h:72px; }
  .ledger-strip{ grid-template-columns:repeat(4,minmax(0,1fr)); }
  .ledger-strip .stat{ padding:var(--s7) var(--s4); border-bottom:0; }
  .ledger-strip .stat:nth-child(odd){ padding-right:var(--s4); }
  .ledger-strip .stat:nth-child(even){ padding-left:0; }
  .ledger-strip .stat{ border-right:1px solid var(--rule-soft); }
  .ledger-strip .stat:last-child{ border-right:0; }

  .branch-card-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .foot-grid{ grid-template-columns:repeat(4,minmax(0,1fr)); }

  .promo-banner{ grid-template-columns:repeat(2,minmax(0,1fr)); align-items:center; }
  .promo-banner-media{ aspect-ratio:4/3; height:100%; }

  .notice{ grid-template-columns:120px minmax(0,1fr) auto; gap:var(--s5); align-items:start; }
  .tl-row{ grid-template-columns:130px minmax(0,1fr); gap:var(--s6); align-items:start; }
  .timeline{ padding-left:var(--s6); }
  .tl-row::before{ left:calc(var(--s6) * -1); top:calc(var(--s6) + 14px); }

}

@media (min-width:1024px){
  .seal{ width:min(22vw,238px); }
  .scroll-cue{ display:flex; }
}

@media (min-width:1080px){
  /* --- desktop nav: back to a single row --- */
  .nav-links{
    position:static;
    flex-direction:row;
    align-items:center;
    gap:2px;
    margin-left:auto;
    padding:0;
    background:none;
    border:0;
    box-shadow:none;
    max-height:none;
    overflow:visible;
    opacity:1;
    visibility:visible;
    transform:none;
  }
  .nav-links a{
    display:inline-flex;
    padding:11px 12px;
    min-height:44px;
    font-size:var(--t-xs);
    border-bottom:0;
  }
  .nav-links a::after{ display:block; }
  .nav-links a.current{ color:var(--ink); }
  .nav-menu-btn{ display:none; }
  .lang-toggle{ margin-left:0; }
  .nav-cta{ display:inline-flex; }
}

@media (min-width:1180px){
  .branch-card-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--s7); }
  .section-head{ margin-bottom:var(--s8); }
}

/* --- very small phones: nothing may overflow at 320px --- */
@media (max-width:359px){
  :root{ --gutter:16px; }
  .tabs{ gap:0; }
  .tab{ padding:12px 10px; }
  .total-callout{ grid-template-columns:minmax(0,1fr); }
  .total-callout .cell{ border-right:0; border-bottom:1px solid var(--rule-soft); }
  .total-callout .cell:last-child{ border-bottom:0; }
  :root{ --row-shift:8px; }
  .contact-fab{ right:10px; bottom:10px; }
  .fab-btn{ width:44px; height:44px; }
}

/* keep the FAB clear of the footer's tap targets on small screens */
@media (max-width:520px){
  footer{ padding-bottom:calc(var(--s6) + 72px); }
}

/* =========================================================
   23. REDUCED MOTION — the page must be complete without motion
   ========================================================= */
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{
    animation-duration:.001ms!important;
    animation-iteration-count:1!important;
    transition-duration:.001ms!important;
    scroll-behavior:auto!important;
  }
  .reveal,
  .ledger-strip .stat{ opacity:1!important; transform:none!important; }
  .tl-rule > i{ transform:scaleY(1); }
  .tl-row .yr{ color:var(--ink); }
  .tl-row::before{ background:var(--red); border-color:var(--red); }
  .branch-card.has-photo:hover .branch-photo img{ transform:none; }
}

/* =========================================================
   24. PRINT
   ========================================================= */
@media print{
  body{ padding-top:0; background:#fff; color:#000; }
  body::before,
  nav, .notice-bar, .contact-fab, .scroll-progress,
  .scroll-cue, .lang-toggle{ display:none!important; }
  .approvals-band, .cta-banner, footer{ background:#fff; color:#000; }
  .approvals-band .section-head h2,
  .cta-banner h2{ color:#000; }
  .reveal, .ledger-strip .stat{ opacity:1!important; transform:none!important; }
  .card-panel, .course-panel{ display:block!important; }
  .catalog .cat-group{ display:block!important; }
  a[href^="http"]::after{ content:" (" attr(href) ")"; font-size:10px; }
}

/* =========================================================
   25. PAGE-SPECIFIC COMPOSITION
   ========================================================= */
.contact-grid{
  display:grid;
  grid-template-columns:minmax(0,1fr);
  gap:var(--s6);
}
@media (min-width:900px){
  .contact-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--s7); align-items:start; }
}
.card p{
  font-size:var(--t-sm);
  line-height:1.7;
  color:var(--ink-soft);
}
.info-note{
  margin-top:var(--s7);
  padding:var(--s5);
  background:var(--paper-light);
  border:1px solid var(--rule);
}

/* =========================================================
   26. BANGLA CORRECTIONS
   Latin tracking + uppercase are meaningless in Bangla script and
   actively break conjuncts: reset them wherever a label style
   assumes Latin. Bangla is the default language, so these are not
   edge cases — they are the primary rendering.
   ========================================================= */
body:not(.lang-en) .eyebrow{
  font-family:var(--font-bn);
  font-weight:600;
  font-size:var(--t-xs);
  letter-spacing:.01em;
  text-transform:none;
}
body:not(.lang-en) .notice-bar .tag{ letter-spacing:.04em; }
body:not(.lang-en) .sec-num{ letter-spacing:.2em; }
body:not(.lang-en) .btn-primary,
body:not(.lang-en) .btn-ghost,
body:not(.lang-en) .btn-outline{ font-weight:600; }

/* --- hero must clear the fold on a 375x667 phone --- */
@media (max-width:767px){
  .hero{ padding-top:var(--s4); }
  .hero-head{ margin-bottom:var(--s5); }
  .hero p.lede{ font-size:var(--t-sm); line-height:1.75; margin-bottom:var(--s3); }
  .hero-bn{ margin-bottom:var(--s4); }
  .hero-ctas .btn-primary,
  .hero-ctas .btn-ghost{ flex:1 1 100%; }
  .hero-lower{ gap:var(--s5); }
  .masthead{ margin-bottom:var(--s5); letter-spacing:.14em; }
  .masthead-vol{ margin-left:0; }
  .seal{ width:min(46vw,172px); }
  .seal-wrap{ justify-content:flex-start; }
}

/* =========================================================
   27. TAP TARGETS — every interactive element clears 44px
   ========================================================= */
body.has-banner{ --banner-h:46px; }

.notice-bar .close{
  width:44px; height:44px;
  margin-right:calc(var(--gutter) * -0.35);
}
.notice-bar a{
  display:inline-flex; align-items:center;
  min-height:44px;
}
.nav-brand{ min-height:44px; }
.lang-toggle{ min-height:44px; }
.nav-menu-btn{ width:44px; height:44px; }
.foot-grid a{ min-height:44px; padding:10px 0; }
.foot-approvals .fa-badge{ min-height:44px; }
.tab{ min-height:48px; }

/* =========================================================
   28. SCROLL-DRIVEN MOTION

   Native CSS scroll-driven animations: the compositor runs these
   off the main thread, so a 46-row register still scrolls at 60fps
   on a low-end Android. Everything is *scrubbed* to scroll position
   rather than fired once, so scrolling back up rewinds it.

   Two hard rules:
   - The whole system sits inside @supports + prefers-reduced-motion,
     so unsupported browsers and motion-sensitive users get the plain
     page with nothing hidden.
   - Inside the block the JS .reveal opacity is neutralised, so the
     two systems can never fight or strand content at opacity:0.
   ========================================================= */
@supports (animation-timeline: view()){
  @media (prefers-reduced-motion: no-preference){

    /* the JS reveal system stands down; scroll timelines take over */
    .reveal,
    .ledger-strip .stat{
      opacity:1;
      transform:none;
      transition:none;
    }

    @keyframes ink-in{
      from{ opacity:0; transform:translateY(18px); }
      to  { opacity:1; transform:none; }
    }
    @keyframes rule-draw{
      from{ transform:scaleX(0); }
      to  { transform:scaleX(1); }
    }
    @keyframes numeral-set{
      from{ opacity:0; transform:translateY(.14em); }
      to  { opacity:1; transform:none; }
    }
    @keyframes settle{
      from{ opacity:0; transform:translateY(26px); }
      to  { opacity:1; transform:none; }
    }

    /* --- register rows ink in, one after another --- */
    .card,
    .branch,
    .finder-tile,
    .approval-seal,
    .pathway-card,
    .notice,
    .tl-row,
    .doc-checklist li,
    .faq-item{
      animation:ink-in linear both;
      animation-timeline:view();
      animation-range:entry 0% entry 55%;
    }

    /* --- section heads: the rule is drawn across as you arrive --- */
    .section-head{ border-top-color:transparent; }
    .section-head::before{
      content:'';
      position:absolute; left:0; right:0; top:-2px;
      height:2px;
      background:var(--ink);
      transform-origin:left;
      animation:rule-draw linear both;
      animation-timeline:view();
      animation-range:entry 0% entry 46%;
    }
    .approvals-band .section-head::before{ background:var(--ink-paper); }

    /* --- the record, counting itself in --- */
    .stat .num,
    .total-callout .cell .num{
      animation:numeral-set linear both;
      animation-timeline:view();
      animation-range:entry 5% entry 60%;
    }

    /* --- headline and lower deck settle on load-scroll --- */
    .section-head h2,
    .section-head p{
      animation:settle linear both;
      animation-timeline:view();
      animation-range:entry 0% entry 50%;
    }

    /* --- editorial media: a restrained scale, scrubbed --- */
    .promo-banner-media img,
    .branch-card.has-photo .branch-photo img{
      animation:drift-scale linear both;
      animation-timeline:view();
      animation-range:entry 0% exit 100%;
    }
    @keyframes drift-scale{
      from{ transform:scale(1.06); }
      to  { transform:scale(1); }
    }

    /* --- the ledger spine, natively scrubbed --- */
    .tl-rule > i{
      transform:scaleY(0);
      animation:spine linear both;
      animation-timeline:view(block);
      animation-range:entry 30% exit 70%;
    }
    @keyframes spine{
      from{ transform:scaleY(0); }
      to  { transform:scaleY(1); }
    }
  }
}

/* =========================================================
   29. THE PINNED CHAPTER — 2000 → today, scrubbed

   Fallback first: with no scroll-timeline support (Safari,
   Firefox) or with reduced motion, this is simply four stacked
   entries in a list. The pinning is added only as enhancement.
   ========================================================= */
.chapter{
  position:relative; z-index:1;
  max-width:var(--maxw);
  margin:0 auto;
  padding:var(--sec-y) var(--gutter);
}
.chapter-head{ margin-bottom:var(--s6); }
.chapter-head h2{ max-width:20ch; }
.chapter-head .eyebrow{ margin-bottom:var(--s3); }

.chapter-rail{
  display:flex; flex-wrap:wrap;
  gap:var(--s2) var(--s5);
  list-style:none;
  margin:0 0 var(--s6);
  padding:var(--s3) 0 0;
  border-top:2px solid var(--ink);
  font-family:var(--font-mono);
  font-size:var(--t-label);
  letter-spacing:.16em;
  color:var(--ink-faint);
}
.chapter-rail li{ position:relative; }

.chapter-panels{ display:grid; gap:var(--s6); }
.ch-panel{
  position:relative;
  padding:var(--s5) 0;
  border-top:1px solid var(--rule);
}
.ch-year{
  font-family:var(--font-mono);
  font-weight:500;
  font-size:clamp(3rem,14vw,9rem);
  line-height:.86;
  letter-spacing:-.05em;
  color:var(--paper-sink);
  margin-bottom:var(--s3);
  font-variant-numeric:tabular-nums;
}
.ch-panel h3{ font-size:var(--t-h2); margin-bottom:var(--s3); max-width:18ch; }
.ch-panel p{
  font-size:var(--t-lede);
  line-height:1.75;
  color:var(--ink-soft);
  max-width:52ch;
  margin-bottom:var(--s4);
}

/* --- enhancement: pin the stage and scrub the panels --- */
@supports (animation-timeline: view()){
  @media (prefers-reduced-motion: no-preference){
    .chapter{ padding-block:0; }
    .chapter-track{
      /* Scroll distance per panel. This was one full viewport each (400vh),
         which spent 3,600px of a phone's scroll on four dates and left the
         reader staring at half-empty stages between them. 0.65 viewports
         still reads as a deliberate pinned sequence at a third less cost.
         The track owns the timeline: a panel is position:absolute inside
         the sticky stage, so its *own* view() progress barely changes and
         all four panels would scrub identically. Naming it here fixes that. */
      height:260vh;
      position:relative;
      view-timeline-name:--chapter;
      view-timeline-axis:block;
    }
    .chapter-stage{
      position:sticky;
      top:calc(var(--nav-h) + var(--banner-h));
      height:calc(100svh - var(--nav-h) - var(--banner-h));
      display:flex;
      flex-direction:column;
      justify-content:center;
      padding-block:var(--s6);
      overflow:hidden;
    }
    .chapter-head{ margin-bottom:var(--s5); flex:none; }

    .chapter-panels{
      position:relative;
      flex:1 1 auto;
      display:block;
    }
    .ch-panel{
      position:absolute; inset:0;
      display:flex; flex-direction:column; justify-content:center;
      border-top:0;
      padding:0;
      opacity:0;
      animation:panel-scrub linear both;
      animation-timeline:--chapter;
    }
    @keyframes panel-scrub{
      0%,   100%{ opacity:0; transform:translateY(24px); }
      12%,  88%  { opacity:1; transform:none; }
    }
    .ch-panel:nth-child(1){ animation-range:contain 0% contain 28%; }
    .ch-panel:nth-child(2){ animation-range:contain 24% contain 52%; }
    .ch-panel:nth-child(3){ animation-range:contain 48% contain 76%; }
    /* the closing panel must hold to the end, not fade out into a blank stage */
    .ch-panel:nth-child(4){ animation-name:panel-hold; animation-range:contain 72% contain 100%; }
    @keyframes panel-hold{
      0%       { opacity:0; transform:translateY(24px); }
      45%, 100%{ opacity:1; transform:none; }
    }

    /* the rail marks light as their chapter comes up */
    .chapter-rail li::after{
      content:'';
      position:absolute; left:0; right:0; bottom:-5px;
      height:2px; background:var(--red);
      transform:scaleX(0); transform-origin:left;
      animation:rail-mark linear both;
      animation-timeline:--chapter;
    }
    @keyframes rail-mark{
      0%,100%{ transform:scaleX(0); }
      14%,86%{ transform:scaleX(1); }
    }
    .chapter-rail li:nth-child(1)::after{ animation-range:contain 0% contain 28%; }
    .chapter-rail li:nth-child(2)::after{ animation-range:contain 24% contain 52%; }
    .chapter-rail li:nth-child(3)::after{ animation-range:contain 48% contain 76%; }
    .chapter-rail li:nth-child(4)::after{ animation-name:rail-hold; animation-range:contain 72% contain 100%; }
    @keyframes rail-hold{
      0%       { transform:scaleX(0); }
      45%, 100%{ transform:scaleX(1); }
    }

    /* the giant year drifts as its panel holds */
    .ch-year{
      animation:year-drift linear both;
      animation-timeline:--chapter;
      animation-range:contain 0% contain 100%;
    }
    @keyframes year-drift{
      from{ transform:translateY(18px); letter-spacing:-.02em; }
      to  { transform:translateY(-18px); letter-spacing:-.06em; }
    }
  }
}

@media (min-width:900px){
  .ch-panel h3{ font-size:var(--t-big); line-height:1.1; }
  .chapter-rail{ gap:var(--s2) var(--s7); font-size:var(--t-xs); }

  /* Open the panel across the measure: numeral and title hang on the left,
     the account sits in its own column. Previously everything stacked in a
     52ch strip and the right half of a 1440 stage was simply empty. */
  .ch-panel{
    display:grid;
    grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);
    column-gap:var(--s8);
    align-content:center;
  }
  .ch-panel .ch-year{ grid-column:1; grid-row:1; margin-bottom:var(--s2); }
  .ch-panel h3{ grid-column:1; grid-row:2; }
  .ch-panel p{ grid-column:2; grid-row:1 / span 2; align-self:center; max-width:46ch; }
  .ch-panel .btn-ghost{ grid-column:2; grid-row:3; justify-self:start; }
}

/* =========================================================
   30. SET PIECES — the page issues the document

   Scrolling performs the act the institute performs: the sheet
   is ruled, the record is written, ink floods the approvals
   chapter, and the seal presses down on it.
   ========================================================= */
@supports (animation-timeline: view()){
  @media (prefers-reduced-motion: no-preference){

    /* --- 1. the margin rule, drawn down the whole document --- */
    body::after{
      content:'';
      position:fixed;
      left:calc(var(--gutter) * .34);
      top:0; bottom:0;
      width:1px;
      background:linear-gradient(var(--red), var(--red-deep));
      transform:scaleY(0);
      transform-origin:top;
      z-index:2;
      pointer-events:none;
      animation:margin-rule linear both;
      animation-timeline:scroll(root);
    }
    @keyframes margin-rule{ to{ transform:scaleY(1); } }

    /* --- 2. the headline is written on, line by line --- */
    .hero-head{
      animation:write-on linear both;
      animation-timeline:view();
      animation-range:entry 10% cover 18%;
    }
    @keyframes write-on{
      from{ clip-path:inset(0 100% 0 0); opacity:.25; }
      to  { clip-path:inset(0 0 0 0);    opacity:1; }
    }

    /* --- 3. the masthead rule draws first --- */
    .masthead{ border-bottom-color:transparent; }
    .masthead::after{
      content:'';
      position:absolute; left:0; right:0; bottom:-2px;
      height:2px; background:var(--ink);
      transform-origin:left;
      animation:rule-draw linear both;
      animation-timeline:view();
      animation-range:entry 0% cover 8%;
    }

    /* --- 4. ink floods the approvals chapter as you enter it --- */
    .approvals-band{ background:transparent; isolation:isolate; }
    .approvals-band::after{
      content:'';
      position:absolute; inset:0;
      background:var(--ink);
      z-index:-1;
      transform:scaleY(0);
      transform-origin:top;
      animation:ink-flood linear both;
      animation-timeline:view();
      animation-range:entry 0% entry 88%;
    }
    @keyframes ink-flood{ to{ transform:scaleY(1); } }

    /* --- 5. the seal presses down onto the sheet --- */
    .seal{
      animation:stamp linear both;
      animation-timeline:view();
      animation-range:entry 0% cover 22%;
    }
    @keyframes stamp{
      from{ transform:scale(1.45) rotate(-14deg); opacity:0; }
      70% { transform:scale(.97)  rotate(2deg);   opacity:1; }
      to  { transform:scale(1)    rotate(0deg);   opacity:1; }
    }
    /* the approval seals stamp in sequence on the ink chapter */
    .approval-img{
      animation:stamp linear both;
      animation-timeline:view();
    }
    /* Short, early ranges. These three seals are the entire proof the page is
       selling; held over entry 22%->88% the BTEB one was still translucent
       while its caption was already being read. */
    .approval-seal:nth-child(1) .approval-img{ animation-range:entry 8% entry 30%; }
    .approval-seal:nth-child(2) .approval-img{ animation-range:entry 12% entry 34%; }
    .approval-seal:nth-child(3) .approval-img{ animation-range:entry 16% entry 38%; }

    /* --- 6. register rows slide in off the margin ---
       Held at entry 0%->62%, a row stayed faded and displaced until it had
       climbed most of the viewport — on a phone that is the whole time the
       reader is looking at it. Resolving by 34% keeps the gesture and gives
       the text back. */
    .card,
    .branch,
    .finder-tile{
      animation:row-in linear both;
      animation-timeline:view();
      animation-range:entry 2% entry 34%;
    }
    @keyframes row-in{
      from{ opacity:0; transform:translateX(calc(var(--row-shift) * -1)); }
      to  { opacity:1; transform:none; }
    }
    /* and their rule is drawn under them */
    .card{ border-bottom-color:transparent; }
    .card::after{
      content:'';
      position:absolute; left:0; right:0; bottom:-1px;
      height:1px; background:var(--rule);
      transform-origin:left;
      animation:rule-draw linear both;
      animation-timeline:view();
      animation-range:entry 10% entry 70%;
    }

    /* --- 7. the ledger labels arrive after their numeral --- */
    .stat .label{
      animation:ink-in linear both;
      animation-timeline:view();
      animation-range:entry 12% entry 46%;
    }

    /* --- 8. the CTA lifts off the ink --- */
    .cta-banner h2,
    .cta-banner p,
    .cta-btn-row{
      animation:settle linear both;
      animation-timeline:view();
      animation-range:entry 8% entry 66%;
    }
  }
}

/* =========================================================
   31. OBJECT ANIMATION — things that move on their own

   Motion that does not wait for the scroll: the seal turns like
   an emblem, the credential ticker runs, icons draw themselves,
   and controls answer the pointer. Every loop is paused under
   prefers-reduced-motion and on hover where it aids reading.
   ========================================================= */

/* --- the credential ticker: an institutional notice crawler --- */
.ticker{
  position:relative; z-index:1;
  overflow:hidden;
  border-top:1px solid var(--rule);
  border-bottom:1px solid var(--rule);
  background:var(--paper-light);
  padding:var(--s3) 0;
  /* fade the ends so items enter and leave rather than pop */
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
}
.ticker-track{ display:flex; width:max-content; }
.ticker-run{
  display:flex; align-items:center;
  gap:var(--s6);
  list-style:none;
  margin:0; padding:0 var(--s6) 0 0;
  animation:ticker-run 46s linear infinite;
}
.ticker-run li{
  display:flex; align-items:center; gap:var(--s6);
  font-family:var(--font-mono);
  font-size:var(--t-label);
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--ink-faint);
  white-space:nowrap;
}
body:not(.lang-en) .ticker-run li{
  font-family:var(--font-bn);
  letter-spacing:.04em;
  font-size:var(--t-xs);
  text-transform:none;
}
.ticker-run li::after{
  content:'';
  width:5px; height:5px;
  border-radius:50%;
  background:var(--red);
  opacity:.55;
  flex:none;
}
@keyframes ticker-run{ to{ transform:translateX(-100%); } }
.ticker:hover .ticker-run{ animation-play-state:paused; }

/* --- the seal turns, like an emblem being pressed --- */
.seal::after{ animation:seal-turn 44s linear infinite; }
@keyframes seal-turn{ to{ transform:rotate(360deg); } }

/* --- the scroll cue keeps beckoning --- */
.scroll-cue svg{ animation:cue-bob 2.2s var(--ease-inout) infinite; }
@keyframes cue-bob{
  0%,100%{ transform:translateY(0); opacity:.5; }
  50%    { transform:translateY(5px); opacity:1; }
}

/* --- the SICIP tag pulses: it is the one live offer --- */
.notice-bar .tag{ position:relative; }
.notice-bar .tag::after{
  content:'';
  position:absolute; inset:0;
  background:var(--red);
  z-index:-1;
  animation:tag-pulse 2.6s var(--ease-out) infinite;
}
@keyframes tag-pulse{
  0%  { transform:scale(1);   opacity:.7; }
  70%,100%{ transform:scale(1.5); opacity:0; }
}

/* --- WhatsApp is the primary funnel: give it a slow ripple --- */
.fab-whatsapp{ position:relative; }
.fab-whatsapp::after{
  content:'';
  position:absolute; inset:0;
  border-radius:50%;
  border:2px solid #25D366;
  animation:fab-ripple 3s var(--ease-out) infinite;
}
@keyframes fab-ripple{
  0%  { transform:scale(1);   opacity:.6; }
  70%,100%{ transform:scale(1.75); opacity:0; }
}

/* --- icons draw themselves when their row is touched --- */
.card-icon svg path,
.card-icon svg circle,
.card-icon svg rect,
.p-icon svg path,
.p-icon svg circle,
.p-icon svg rect{
  transition:stroke-dashoffset .7s var(--ease-out);
}
.pathway-card:hover .p-icon svg,
.card:hover .card-icon svg{ animation:icon-draw .8s var(--ease-out); }
@keyframes icon-draw{
  from{ stroke-dasharray:60; stroke-dashoffset:60; }
  to  { stroke-dasharray:60; stroke-dashoffset:0; }
}

/* --- controls answer the pointer --- */
.btn-primary,
.btn-ghost,
.btn-outline{ position:relative; overflow:hidden; }
.btn-primary::after,
.btn-ghost::after,
.btn-outline::after{
  content:'';
  position:absolute; inset:0;
  background:currentColor;
  opacity:0;
  transform:translateX(-101%);
  transition:transform .45s var(--ease-out), opacity .45s var(--ease-out);
}
.btn-primary:hover::after,
.btn-ghost:hover::after,
.btn-outline:hover::after{ transform:translateX(0); opacity:.09; }
.btn-primary > *,
.btn-ghost > *,
.btn-outline > *{ position:relative; z-index:1; }

/* the register number becomes a marker on hover */
.card{ transition:padding-left var(--dur-1) var(--ease-out), background var(--dur-1) var(--ease-out); }
.card:hover{ padding-left:var(--s3); }
.card::before{ transition:color var(--dur-1) var(--ease-out); }
.card:hover::before{ color:var(--red-deep); }

.map-link svg{ transition:transform var(--dur-1) var(--ease-out); }
.map-link:hover svg{ transform:translateY(-2px) scale(1.08); }

.lang-toggle{ transition:border-color var(--dur-1), color var(--dur-1), transform var(--dur-1) var(--ease-out); }
.lang-toggle:active{ transform:scale(.94); }

/* --- everything above stops for reduced motion --- */
@media (prefers-reduced-motion: reduce){
  /* The stat stops turning and simply states both figures. */
  .stat-flip .num, .stat-flip .label{ display:block; }
  .stat-flip .face{ animation:none !important; opacity:1 !important; transform:none !important; }
  .stat-flip .num > .face-b::before{ content:' / '; color:var(--ink-faint); }
  .stat-flip .label > .face-b::before{ content:' · '; color:var(--ink-faint); }

  .ticker-run,
  .seal::after,
  .scroll-cue svg,
  .notice-bar .tag::after,
  .fab-whatsapp::after{
    animation:none !important;
  }
  .notice-bar .tag::after,
  .fab-whatsapp::after{ display:none; }
}