/* =============================================================================
   Government portal theme (generic, reusable)
   Generic government-portal layout language.
   WCAG 2.1 AA: visible focus, AA contrast, reflow, reduced-motion.
   ============================================================================= */

/* Self-hosted webfonts (Public Sans + Fraunces + Noto Sans Devanagari), pulled in
   ONCE here so every page that links style.css gets them — no external Google Fonts
   call (GIGW/privacy), no per-page <link>, and no duplicate @font-face. */
@import url("fonts.css");

:root{
  /* Site palette (IPHB, sampled from the live site): a single cohesive teal-cyan theme.
     The accent is DERIVED from the brand teal (a brighter shade), NOT a fixed orange —
     re-theming another site only needs these teal values swapped. */
  --navy:#0a7b8c; --navy-dark:#086573; --navy-deep:#053f48;
  /* accent = a shade of the brand teal, tuned so white-on-accent passes WCAG AA (4.7:1);
     drives buttons, slider arrows, heading underlines */
  --saffron:#0a7f90; --saffron-dark:#086a78;
  --saffron-darker:#053f48;
  --green:#1b8f4d; --red:#c62828; --red-dark:#9b1c1c;
  --bg:#eef3f5; --bg-alt:#e1ecee;
  --card:#ffffff;
  --ink:#1f2a37; --muted:#52617a; --line:#d4e2e5;
  --ring:#0a7b8c;
  /* Main nav bar is teal-cyan; its menu hovers + dropdown accents derive from it so
     the dropdowns match the bar (very light teal fill + dark teal text). */
  --nav-bar:#0a7b8c; --nav-bar-dark:#075863; --nav-hover-bg:#d9f0f3; --nav-hover-text:#075863;
  /* Heading / title colour = a clean DARK GREY (a shade of grey), so titles read
     strong and neutral — never an off-theme blue and never a dull/muddy tint. */
  --heading:#2b2b2b;
  --shadow:0 1px 3px rgba(5,63,72,.08), 0 6px 18px rgba(5,63,72,.06);
  --shadow-lg:0 10px 30px rgba(5,63,72,.16);
  --radius:14px; --radius-sm:8px;
  /* Type system (fonts from gfdc.goa.gov.in): Public Sans drives ALL text — body,
     UI and headings — for a clean all-sans look; Noto Sans Devanagari covers Indic.
     Self-hosted in /assets/fonts, declared in fonts.css (no external Google Fonts). */
  --font:"Public Sans","Noto Sans Devanagari",-apple-system,BlinkMacSystemFont,system-ui,"Segoe UI",Roboto,sans-serif;
  --font-display:"Public Sans","Noto Sans Devanagari",-apple-system,BlinkMacSystemFont,system-ui,"Segoe UI",Roboto,sans-serif;
  --font-devanagari:"Noto Sans Devanagari","Public Sans",sans-serif;
  /* Footer is intentionally near-BLACK (a faint teal-black, not a grey) so it
     anchors the page; the policies bar is the darkest band of all. */
  --footer-top:#0c1719; --footer-bottom:#070d0e; --footer-policies:#03070a;
  --maxw:1200px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:var(--font);color:var(--ink);background:var(--bg);line-height:1.6;font-size:16px}
img{max-width:100%;height:auto}
/* Icon helper: Font Awesome glyphs sized to the surrounding text, colour inherited. */
.svg-ico{display:inline-block;line-height:1;text-align:center;flex:0 0 auto}
.stat-icon .svg-ico,.svg-ico.stat-svg{font-size:2.4rem;color:var(--saffron-dark)}
.video-play .svg-ico{font-size:1.4rem}
.social-list .svg-ico{font-size:1.15rem}
.page-body .grid .card h3 .svg-ico{color:var(--saffron-dark);margin-right:6px}
a{color:var(--navy)}
/* GFDC heading scale — Fraunces display face, weight 600, fluid sizes */
h1,h2,h3,h4{font-family:var(--font-display);font-weight:600;color:var(--navy-dark);line-height:1.2;margin:.2em 0 .5em}
h1{font-size:clamp(2rem,5vw,3.25rem)}
h2{font-size:clamp(1.5rem,3vw,2.25rem)}
h3{font-size:clamp(1.125rem,2vw,1.375rem)}
h4{font-size:1.125rem}
.container{max-width:var(--maxw);margin:0 auto;padding:0 22px}
/* Interior content pages: a centred container (readable measure), not edge-to-edge */
.page-body>.container{max-width:1140px;margin:0 auto;padding-left:clamp(18px,4vw,36px);padding-right:clamp(18px,4vw,36px)}
/* Page title + breadcrumb: scale down on small screens and wrap long text (no truncation) */
.page-body>.container>h1{font-size:clamp(1.45rem,4.5vw,2.15rem);line-height:1.18;overflow-wrap:break-word}
.breadcrumb,.breadcrumb [aria-current="page"]{overflow-wrap:break-word;word-break:break-word}
/* Content section: text beside its image (two-column), like the live site;
   stacks on narrow screens. Text-only / gallery sections stay full width. */
.content-section{margin:0 0 30px}
/* Components catalogue page: extra breathing room + a light divider before each
   numbered demo block so the sections read as clearly separate (scoped to .pc-demo
   so normal content pages keep their tighter 30px rhythm). */
.pc-demo .content-section{margin-bottom:52px}
.pc-demo>.container>.content-section>h2:first-child{margin-top:0;padding-top:30px;border-top:2px solid var(--line)}
.pc-demo>.container>.content-section:first-of-type>h2:first-child{border-top:0;padding-top:0}
.content-section.has-figure{display:grid;grid-template-columns:minmax(0,1fr) minmax(240px,360px);gap:32px;align-items:start}
.content-section.has-figure .cs-text>:first-child{margin-top:0}
.content-section .cs-figure{margin:0}
.content-section .cs-figure img{width:100%;border-radius:12px;box-shadow:0 6px 18px rgba(13,44,84,.12)}
.content-section .section-img{display:block;margin:14px 0;border-radius:12px;box-shadow:0 6px 18px rgba(13,44,84,.12)}
/* Hospital detail: photo + info card + map */
.hospital-card{border:1px solid var(--line);border-radius:12px;overflow:hidden;background:#fff;margin:10px 0 26px}
.hc-photo{display:block;width:100%;height:auto;aspect-ratio:21/9;object-fit:cover}
.hc-grid{display:flex;flex-wrap:wrap;margin:0}
.hc-grid>div{flex:1 1 240px;padding:13px 18px;display:flex;flex-direction:column;gap:4px;box-shadow:inset -1px -1px 0 0 var(--line)}
.hc-grid .hc-wide{flex-basis:100%}
.hc-grid dt{font-size:.74rem;text-transform:uppercase;letter-spacing:.04em;font-weight:700;color:var(--saffron-dark)}
.hc-grid dd{margin:0;font-size:1rem;font-weight:600;color:var(--navy-deep);line-height:1.45;overflow-wrap:break-word}
.hc-grid dd a{color:var(--navy);text-decoration:underline}
@media (max-width:560px){.hc-grid>div{flex-basis:100%}}
html.dark-mode .hospital-card{background:#1a2536;border-color:#283649}
html.dark-mode .hc-grid>div{box-shadow:inset -1px -1px 0 0 #283649}
html.dark-mode .hc-grid dd{color:#e4ebf5}
/* Profile card — portrait photo on top + labelled Name/Designation fields. */
.profile-card{border:1px solid var(--line);border-radius:12px;overflow:hidden;background:#fff;max-width:340px;margin:10px 0 26px}
.profile-card .profile-photo{display:block;width:auto;max-width:240px;height:auto;margin:20px auto 8px;border-radius:6px}
.profile-fields{margin:0;padding:0}
.profile-fields>div{padding:13px 18px;display:flex;flex-direction:column;gap:4px;border-top:1px solid var(--line)}
.profile-fields dt{font-size:.74rem;text-transform:uppercase;letter-spacing:.04em;font-weight:700;color:var(--saffron-dark)}
.profile-fields dd{margin:0;font-size:1rem;font-weight:700;color:var(--navy-deep);line-height:1.4;overflow-wrap:break-word}
html.dark-mode .profile-card{background:#1a2536;border-color:#283649}
html.dark-mode .profile-fields>div{border-top-color:#283649}
html.dark-mode .profile-fields dd{color:#e4ebf5}
.map-embed{position:relative;width:100%;aspect-ratio:16/8;margin:8px 0 24px;border-radius:12px;overflow:hidden;box-shadow:0 6px 18px rgba(13,44,84,.12)}
@media (max-width:560px){.map-embed{aspect-ratio:4/3}}
.map-embed iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.hosp-h2{margin:36px 0 14px;font-size:clamp(1.2rem,2.6vw,1.45rem);font-weight:700;color:var(--navy-deep);line-height:1.25}
.hosp-h2:first-of-type{margin-top:22px}
html.dark-mode .hosp-h2{color:#f0f4fa}
@media (max-width:760px){.content-section.has-figure{grid-template-columns:1fr;gap:14px}}
/* Decorative page banner — full-width, above the breadcrumb (as on the live site) */
.page-banner{margin:0 0 14px;text-align:center}
.page-banner img{max-width:100%;height:auto;border-radius:14px;box-shadow:0 4px 16px rgba(13,44,84,.10)}
/* Download-forms table */
.dl-table td{vertical-align:middle}
.dl-table th:first-child,.dl-table td:first-child{width:62px;text-align:left}
/* Uniform action column — only on tables that actually have View/Download buttons
   (so plain data tables like "Field | Information" keep natural column widths). */
/* Action column hugs its button — width:1% + nowrap shrinks the column to the
   button's own width so it never reserves extra empty horizontal space. */
.data-table.has-actions th:last-child,.data-table.has-actions td:last-child{width:1%;white-space:nowrap;text-align:left}
.data-table:has(.dl-btn) th:last-child,.data-table:has(.dl-btn) td:last-child{width:1%;white-space:nowrap;text-align:left}
.dl-btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;background:var(--saffron);color:#fff;text-decoration:none;font-weight:700;padding:9px 14px;border-radius:8px;font-size:.85rem;white-space:nowrap;transition:background .15s,transform .12s}
.dl-btn:hover,.dl-btn:focus-visible{background:var(--saffron-dark);color:#fff;transform:translateY(-1px)}
.data-table td .dl-btn{width:auto;box-sizing:border-box}
.dl-btn,.dl-btn *{color:#fff}
.dl-btn .dl-meta,.dl-btn .file-meta{color:#fff;font-weight:500;font-size:.82em;opacity:.85;margin-left:.35em;white-space:nowrap}
.file-type{display:inline-block;background:#e6edf6;color:var(--navy-deep);font-weight:700;font-size:.72rem;padding:3px 9px;border-radius:4px;letter-spacing:.04em}
/* External-link interstitial dialog */
.ext-interstitial{position:fixed;inset:0;z-index:1000;display:flex;align-items:center;justify-content:center;background:rgba(6,20,40,.6);padding:20px}
.ext-interstitial[hidden]{display:none}
.ext-int-box{background:#fff;border-radius:14px;max-width:520px;width:100%;padding:28px 26px;box-shadow:0 20px 60px rgba(0,0,0,.4)}
.ext-int-box h2{margin:0 0 12px;color:var(--navy-deep);font-size:1.3rem}
.ext-int-box p{margin:0 0 12px;color:var(--ink);line-height:1.55}
.ext-int-url{font-weight:700;color:var(--navy);word-break:break-all;background:var(--bg);padding:10px 12px;border-radius:8px;font-size:.9rem}
.ext-int-actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:18px}
html.dark-mode .ext-int-box{background:#16202e}
html.dark-mode .ext-int-box h2,html.dark-mode .ext-int-box p{color:#e4ebf5}
.data-table td[data-label="Type"],.data-table td[data-label="Size"]{white-space:nowrap}
@media (max-width:420px){.data-table td .dl-btn{width:auto}}

/* ---- Accessibility helpers ---- */
.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}
/* Auto "(PDF, 144 KB)" tag appended to in-content file links by main.js. */
.file-meta{color:var(--muted);font-size:.85em;font-weight:600;white-space:nowrap;margin-left:.35em}
html.dark-mode .file-meta{color:#a6b4c8}
/* Obfuscated email text (test[at]gmail[dot]com) — keep on one line. */
.email-obf{white-space:normal;overflow-wrap:anywhere;word-break:break-word}
.skip-link{position:absolute;left:-999px;top:0;z-index:1000;background:var(--navy-dark);color:#fff;padding:12px 18px;border-radius:0 0 8px 0}
.skip-link:focus{left:0}
/* Skip-link / back-to-top focus target: <main> gets tabindex="-1" at runtime
   (main.js). The small scroll-margin keeps its top clear of the sticky nav when
   the browser jumps to it, and the focus outline is suppressed (the page move
   is feedback enough). */
#main-content{scroll-margin-top:8px}
#main-content:focus{outline:none}
:focus-visible{outline:3px solid var(--ring);outline-offset:2px;border-radius:3px}
a:focus-visible,button:focus-visible,select:focus-visible,input:focus-visible,textarea:focus-visible,[tabindex]:focus-visible{outline:3px solid var(--ring);outline-offset:2px}

/* ============================ Utility bar (modern, icon-led) ============================
   The accessibility bar must NOT change when its own controls are activated
   (A−/A/A+, Contrast, Dark mode, Bhashini Translate) — those affect site content only.
   Font-size is pinned in absolute pixels and children use em, so rem-scaling of <html>
   leaves the bar untouched. Colours are also locked for contrast/dark modes. */
.util-bar{background:linear-gradient(180deg,var(--navy-deep) 0%,#04222a 100%);color:#cfdbe9;font-size:14px;border-bottom:1px solid rgba(255,255,255,.06)}
.util-inner{display:flex;align-items:center;justify-content:space-between;gap:10px 18px;flex-wrap:wrap;padding:9px 26px;max-width:var(--maxw);margin:0 auto;min-height:44px}
.util-nav{display:flex;align-items:center;gap:0;flex-wrap:wrap}
.util-tools{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.util-right{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.util-nav .util-item{color:#cfdbe9;text-decoration:none;padding:6px 16px;position:relative;font-weight:500;letter-spacing:.02em;display:inline-flex;align-items:center;gap:8px;border-radius:6px;transition:background .15s,color .15s}
.util-nav .util-item:first-child{padding-left:8px;text-transform:uppercase;font-weight:700;color:#fff;letter-spacing:.04em;font-size:.82em}
.util-nav .util-item:not(:last-child)::after{content:"";position:absolute;right:0;top:50%;transform:translateY(-50%);width:1px;height:14px;background:rgba(255,255,255,.18)}
.util-nav .util-item:hover,.util-nav .util-item:focus-visible{color:#fff;background:rgba(255,255,255,.06);text-decoration:none}
.util-nav .util-item:hover::after,.util-nav .util-item:focus-visible::after{opacity:0}
/* Inline-SVG icons (self-hosted) sit inside each util-bar item via markup.
   GIGW navbar treatment: icons are WHITE by default and turn YELLOW on hover/focus. */
.util-nav .util-item .svg-ico{color:#fff;font-size:.95em;flex:0 0 auto;transition:color .15s}
.util-nav .util-item:hover .svg-ico,.util-nav .util-item:focus-visible .svg-ico{color:#ffd23f}
.util-right .util-item{color:#cfdbe9;text-decoration:none;padding:5px 8px;border-radius:5px}
.util-right .util-item:hover{color:#fff;text-decoration:underline}
.util-label{display:none}
/* compact site search in the top accessibility bar (matches the live site) */
.util-search{display:inline-flex;align-items:center}
.util-search input{height:34px;width:150px;border:0;border-radius:17px 0 0 17px;padding:0 14px;font-size:13px;font-family:inherit;color:var(--ink);background:#fff;outline:none}
.util-search input::placeholder{color:#8a97a8}
.util-search button{height:34px;border:0;border-radius:0 17px 17px 0;background:#cdeef2;color:var(--navy-deep);padding:0 13px;cursor:pointer;display:inline-flex;align-items:center;font-size:13px}
.util-search button:hover{background:#fff}
/* Top bar stays fully responsive — on mobile it becomes two tidy rows
   (links, then search + translate). Nothing is ever hidden. */
@media (max-width:760px){.util-search input{width:120px}}
@media (max-width:600px){
  .util-inner{display:block;padding:8px 14px}
  .util-nav{width:100%;min-width:0;justify-content:center;row-gap:2px}
  .util-nav .util-item{padding:5px 11px;font-size:.92em}
  .util-nav .util-item:first-child{font-size:.76em}
  .util-tools{width:100%;min-width:0;gap:8px;flex-wrap:nowrap;margin-top:7px}
  .util-search{flex:1 1 auto;min-width:0}
  .util-search input{flex:1 1 auto;width:auto;min-width:0}
  .util-right{flex:0 0 auto}
}

/* Bhashini circular toggle (GHB-style अA glyph) */
/* Bhashini translate launcher — original Font Awesome fa-language icon
   (\f1ab) on a white/light pill, matching the GHB house style. */
.bhashini-toggle{height:34px;border-radius:30px;background:#fff;color:var(--navy-deep);border:0;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:8px;line-height:1;padding:0 16px 0 14px;box-shadow:0 2px 8px rgba(0,0,0,.25);font-weight:700;font-size:.82em;letter-spacing:.04em;text-transform:uppercase;transition:transform .15s,box-shadow .2s,background .2s}
.bhashini-toggle .svg-ico{font-size:1.15em;color:var(--saffron-darker);line-height:1}
.bhashini-toggle:hover .svg-ico,.bhashini-toggle:focus-visible .svg-ico,.bhashini-toggle[aria-expanded="true"] .svg-ico{color:#fff}
.bhashini-toggle:hover,.bhashini-toggle:focus-visible{background:linear-gradient(135deg,var(--saffron) 0%,var(--saffron-darker) 100%);color:#fff;transform:translateY(-1px);box-shadow:0 4px 14px rgba(10,123,140,.5)}
.bhashini-toggle[aria-expanded="true"]{background:linear-gradient(135deg,var(--saffron) 0%,var(--saffron-darker) 100%);color:#fff}
@media (max-width:600px){
  .bhashini-toggle{padding:0 13px;gap:7px}
}
@media (max-width:360px){
  /* keep the label but tighten on the very smallest screens */
  .bhashini-toggle{padding:0 11px;gap:6px}
}
/* Translate dropdown — refined card: header, language rows (native + English,
   check on the active one) and a "Powered by Bhashini" footer. */
.bhashini-menu{position:absolute;top:calc(100% + 9px);right:0;background:#fff;border:1px solid var(--line);border-radius:12px;box-shadow:0 14px 38px rgba(11,31,59,.24);min-width:228px;padding:6px;list-style:none;z-index:300;display:none}
.bhashini-menu.open{display:block;animation:bh-pop .17s cubic-bezier(.2,.85,.3,1)}
@keyframes bh-pop{from{opacity:0;transform:translateY(-8px) scale(.97)}to{opacity:1;transform:none}}
/* caret connecting the card to the Translate button */
.bhashini-menu::before{content:"";position:absolute;top:-6px;right:22px;width:12px;height:12px;background:#fff;border-left:1px solid var(--line);border-top:1px solid var(--line);transform:rotate(45deg)}
.bhashini-menu li{margin:0}
.bhashini-menu .bh-head{padding:5px 12px 7px;font-size:.67rem;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--muted)}
.bhashini-menu button{position:relative;display:flex;align-items:center;width:100%;padding:9px 12px 9px 34px;background:transparent;border:0;color:var(--ink);font-weight:600;cursor:pointer;border-radius:8px;text-align:left;font-family:inherit;font-size:.95rem;transition:background .14s,color .14s}
.bhashini-menu .bh-check{position:absolute;left:11px;top:50%;transform:translateY(-50%) scale(.55);opacity:0;color:var(--saffron-darker);font-size:.85rem;transition:transform .15s,opacity .15s}
.bhashini-menu button[aria-checked="true"] .bh-check{opacity:1;transform:translateY(-50%) scale(1)}
.bhashini-menu .bh-names{display:flex;flex-direction:column;line-height:1.22}
.bhashini-menu .bh-native{font-weight:700}
.bhashini-menu .bh-en{font-size:.73rem;font-weight:600;color:var(--muted)}
.bhashini-menu button:hover,.bhashini-menu button:focus-visible{background:var(--bg);color:var(--navy);outline:0}
.bhashini-menu button[aria-checked="true"]{background:rgba(10,123,140,.1);color:var(--navy-deep)}
.bhashini-menu button[aria-checked="true"] .bh-en{color:var(--saffron-darker)}
.bhashini-menu .bh-foot{display:flex;align-items:center;justify-content:center;gap:6px;margin-top:4px;padding:8px 12px 4px;border-top:1px solid var(--line);font-size:.72rem;color:var(--muted)}
.bhashini-menu .bh-foot .svg-ico{font-size:.8rem;color:var(--saffron-darker)}
.bhashini-menu .bh-foot strong{color:var(--navy);font-weight:700}
.bhashini-wrap-new{position:relative}
/* Translate button: chevron rotates when the menu is open */
.bhashini-toggle .bh-caret{font-size:.62em}
.bhashini-toggle[aria-expanded="true"] .bh-caret{transform:rotate(180deg)}
.bhashini-toggle .bh-caret{transition:transform .2s}

/* Bhashini v3 plugin mount point. The official plugin injects its OWN language
   selector (Translate icon + language list + "Powered by Bhashini") into this
   container; we only align it inside the top utility bar and let its own popup
   layer float above the page. */
.bhashini-plugin-container{display:inline-flex;align-items:center;line-height:1;position:relative}
.bhashini-plugin-container :is(select,button,a){max-width:100%;font-family:inherit}
/* Make ONLY the trigger button's icon + label white on the dark util bar
   (the plugin's own stylesheet loads after ours, so !important is required).
   The language dropdown popup keeps its own white-card styling — left untouched. */
.bhashini-plugin-container .bhashini-dropdown-btn{color:#fff !important}
.bhashini-plugin-container .bhashini-dropdown-btn-icon svg,
.bhashini-plugin-container .bhashini-dropdown-btn-icon svg path{fill:#fff !important}

/* Font size — GHB rounded-square style */
.font-controls{display:inline-flex;gap:0;border-radius:6px;overflow:hidden}
.font-btn{background:transparent;color:#cfdbe9;border:0;width:34px;height:30px;cursor:pointer;font-weight:600;line-height:1;font-size:.95em}
.font-btn:hover{background:rgba(255,255,255,.12);color:#fff}
.font-btn[data-font="reset"]{background:var(--saffron-darker);color:#fff;font-weight:700;border:1px solid #fff}
.font-btn[data-font="reset"]:hover{background:#5e3005}

/* Legacy lang-select-wrap kept for backward compatibility, hidden in new layout */
.lang-select-wrap{display:none}

/* ============================ Masthead (GHB-style serif title) ============================ */
.masthead{background:#fff;border-bottom:1px solid var(--line);font-size:16px}
.masthead-inner{display:flex;align-items:center;gap:28px;flex-wrap:wrap;padding:26px 26px;max-width:var(--maxw);margin:0 auto}
.brand{display:flex;align-items:center;gap:22px;text-decoration:none;color:var(--navy-dark);margin-right:auto}
.brand-logo{width:84px;height:84px;object-fit:contain;flex:0 0 auto}
.brand-text{display:flex;flex-direction:column;gap:4px}
.brand-title{font-family:var(--font-display);font-weight:700;font-size:2.1em;color:var(--navy-deep);line-height:1.1;letter-spacing:-.01em}
.brand-sub{font-family:var(--font-display);font-style:italic;font-size:1em;color:#3a4a5c;font-weight:400;max-width:none}
.masthead-emblems{display:flex;align-items:center;gap:22px}
.masthead-emblems .emblem{object-fit:contain;display:block;height:80px;width:auto}
.masthead-meta{display:none}

/* ============================ Main nav (saffron orange) ============================ */
/* Let the header wrapper dissolve into normal flow so the sticky nav below
   sticks relative to the page (not the short header box) when scrolling. */
[data-include="header"]{display:contents}
.table-notes{margin:12px 2px 0;color:var(--muted);font-size:.9rem}
.table-notes p{margin:2px 0;font-style:italic}
html.dark-mode .table-notes{color:#a6b4c8}
.mainnav{background:var(--nav-bar);position:sticky;top:0;z-index:200;box-shadow:none;border-bottom:0;font-size:var(--nav-fs,16px)}
.mainnav>.container{display:flex;align-items:stretch;justify-content:space-between;padding:0 16px;max-width:var(--maxw);margin:0 auto;gap:6px;flex-wrap:nowrap}
.nav-menu{flex:1 1 auto;min-width:0}
.nav-search{display:flex;align-items:center;gap:0;margin:9px 0;flex:0 0 auto;height:36px}
.nav-search input{background:#fff;border:1px solid var(--navy-deep);color:var(--ink);padding:7px 12px;border-radius:5px 0 0 5px;font-size:.82rem;font-family:inherit;width:120px;outline:none;height:34px;line-height:20px}
.nav-search input::placeholder{color:#6a7787;opacity:1}
.nav-search input:focus{background:#fff;border-color:#fff;box-shadow:0 0 0 3px rgba(255,255,255,.5)}
.nav-search button{background:var(--navy-deep);color:#fff;border:1px solid var(--navy-deep);padding:0 18px;border-radius:0 5px 5px 0;font-weight:700;cursor:pointer;font-family:inherit;font-size:.88rem;height:36px;letter-spacing:.02em}
.nav-search button:hover,.nav-search button:focus-visible{background:var(--navy);color:#fff}

/* ============================ Latest notices ticker (GHB-style) ============================ */
.latest-ticker{background:var(--navy-dark);border-top:1px solid rgba(255,255,255,.05);color:#cfdbe9}
.latest-ticker-inner{display:flex;align-items:center;gap:0;padding:0 26px;max-width:var(--maxw);margin:0 auto;min-height:50px;overflow:hidden}
/* Modern, flat "LATEST NEWS" label — no orange banner; white uppercase text with
   a subtle pulsing "live" dot and a thin divider before the feed. */
.latest-badge{flex:0 0 auto;background:transparent;color:#fff;font-weight:700;font-size:.78rem;letter-spacing:.12em;text-transform:uppercase;padding:0 16px 0 20px;margin-right:14px;position:relative;display:inline-flex;align-items:center;border-right:1px solid rgba(255,255,255,.22)}
.latest-badge::before{content:"";position:absolute;left:0;top:50%;transform:translateY(-50%);width:9px;height:9px;border-radius:50%;background:#6fd6e4;box-shadow:0 0 0 0 rgba(111,214,228,.6);animation:lb-pulse 2.2s ease-out infinite}
@keyframes lb-pulse{0%{box-shadow:0 0 0 0 rgba(111,214,228,.55)}70%{box-shadow:0 0 0 8px rgba(111,214,228,0)}100%{box-shadow:0 0 0 0 rgba(111,214,228,0)}}
@media (prefers-reduced-motion:reduce){.latest-badge::before{animation:none}}
.latest-feed{flex:1 1 auto;overflow:hidden;position:relative;display:flex;align-items:center;min-width:0}
.latest-track{display:flex;gap:0;animation:lt-scroll 30s linear infinite;will-change:transform;transform:translateZ(0);backface-visibility:hidden;white-space:nowrap}
.latest-track:hover{animation-play-state:paused}
.latest-item{display:inline-flex;align-items:center;gap:8px;padding:0 26px;color:#f0f5fc;text-decoration:none;font-size:.9rem;border-right:1px solid rgba(255,255,255,.15);position:relative;font-weight:500}
.latest-item:hover{color:#fff;text-decoration:underline}
.latest-item .li-meta{color:#cdeef2;font-size:.82rem;font-weight:600}
.latest-pause{flex:0 0 auto;background:rgba(255,255,255,.08);color:#fff;border:1px solid rgba(255,255,255,.4);padding:0;width:30px;height:30px;border-radius:6px;font-size:.82rem;cursor:pointer;margin-left:14px;display:inline-flex;align-items:center;justify-content:center;font-family:inherit}
.latest-pause::before{content:"\23F8";font-weight:normal;font-size:.95rem}
.latest-pause:hover{background:rgba(255,255,255,.18)}
.latest-pause[aria-pressed="true"]::before{content:"\25B6"}
/* Seamless loop: the track is exactly two identical halves, so shifting by -50%
   lands precisely on the copy's start — combined with translate3d (GPU layer) the
   wrap is glitch-free. */
@keyframes lt-scroll{from{transform:translate3d(0,0,0)}to{transform:translate3d(-50%,0,0)}}
.nav-toggle{display:none;align-items:center;gap:10px;background:rgba(0,0,0,.18);border:0;color:#fff;font-size:.95em;font-weight:700;cursor:pointer;padding:12px 18px;width:100%;justify-content:flex-start;text-align:left;text-shadow:0 1px 2px rgba(0,0,0,.25)}
.nav-toggle:hover,.nav-toggle:focus-visible{background:rgba(0,0,0,.32);color:#fff}
.nav-toggle-bars{display:inline-flex;flex-direction:column;gap:5px;width:24px;position:relative;transition:transform .2s}
.nav-toggle-bars span{width:24px;height:3px;background:#fff;display:block;border-radius:2px;transition:transform .25s,opacity .15s}
.nav-toggle[aria-expanded="true"] .nav-toggle-bars span:nth-child(1){transform:translateY(8px) rotate(45deg)}
.nav-toggle[aria-expanded="true"] .nav-toggle-bars span:nth-child(2){opacity:0}
.nav-toggle[aria-expanded="true"] .nav-toggle-bars span:nth-child(3){transform:translateY(-8px) rotate(-45deg)}
.nav-toggle[aria-expanded="true"] .nav-toggle-text::before{content:"Close ";}
.nav-toggle[aria-expanded="true"] .nav-toggle-text{font-size:0}
.nav-toggle[aria-expanded="true"] .nav-toggle-text::before{font-size:.95em}
.nav-menu{list-style:none;display:flex;flex-wrap:wrap;margin:0;padding:0}
.nav-item{position:relative;display:flex}
.nav-link{display:inline-flex;align-items:center;gap:3px;color:#fff;text-decoration:none;font-weight:500;font-size:calc(var(--nav-fs,16px) * 0.9375);padding:13px 8px;background:transparent;border:0;cursor:pointer;font-family:inherit;border-bottom:3px solid transparent;letter-spacing:0;white-space:nowrap;text-shadow:0 1px 3px rgba(0,0,0,.45),0 0 1px rgba(0,0,0,.5)}
.nav-link:hover,.nav-link:focus-visible{background:var(--nav-hover-bg);color:var(--nav-hover-text);text-shadow:none}
.nav-link.is-current{border-bottom-color:transparent;color:#fff;background:rgba(0,0,0,.32)}
.nav-menu{display:flex;flex-wrap:nowrap;list-style:none;margin:0;padding:0}
/* Clean chevron, optically centred with the label (padding-box technique). */
.caret{font-size:0;flex:0 0 auto;display:inline-block;padding:3px;margin:-3px 0 0 6px;border:solid currentColor;border-width:0 2px 2px 0;transform:rotate(45deg);opacity:.95;transition:transform .2s,margin-top .2s}
.nav-parent[aria-expanded="true"] .caret{transform:rotate(-135deg);margin-top:1px}
.nav-parent[aria-expanded="true"]{background:var(--nav-hover-bg);color:var(--nav-hover-text);text-shadow:none}
.submenu{list-style:none;margin:0;padding:6px;position:absolute;top:100%;left:0;min-width:250px;background:#fff;border-radius:0 0 var(--radius-sm) var(--radius-sm);box-shadow:var(--shadow-lg);border-top:3px solid var(--nav-bar-dark);display:none;z-index:50}
/* Reveal on hover (mouse), on .open (click / Enter), and on keyboard focus inside. */
.nav-item.has-children:hover > .submenu,.nav-item.has-children.open > .submenu,.nav-item.has-children:focus-within > .submenu,.submenu.open{display:block}
/* An explicit click-to-close wins over hover/focus-within until the pointer leaves
   (main.js toggles .click-closed); same specificity as the openers above, so the later
   source position makes it override them. Cleared on mouseleave -> hover opens again. */
.nav-item.has-children.click-closed > .submenu{display:none}
/* High-contrast focus ring on the coloured nav / util bars (the blue --ring is invisible there). */
.mainnav .nav-link:focus-visible,.nav-toggle:focus-visible,.nav-search button:focus-visible,
.util-bar a:focus-visible,.util-bar button:focus-visible,.util-nav .util-item:focus-visible{outline:3px solid #fff;outline-offset:2px}
.nav-sublink{display:block;padding:10px 14px;color:var(--ink);text-decoration:none;border-radius:6px;font-size:calc(var(--nav-fs,16px) * 0.875)}
.nav-sublink:hover,.nav-sublink:focus-visible{background:var(--nav-hover-bg);color:var(--nav-hover-text)}
.nav-sublink.is-current{color:var(--nav-bar-dark);font-weight:700}
/* Download menu item: title (with small grey "(TYPE, SIZE)" line below) on the left,
   download icon pinned to the RIGHT and TOP-aligned, never shrinking/wrapping above text */
.nav-download{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}
.nav-download .dl-text{display:flex;flex-direction:column;gap:1px;min-width:0}
.nav-download .dl-title{line-height:1.3}
.nav-download .dl-meta{color:var(--muted);font-size:.74em;font-weight:700;letter-spacing:.02em;margin-top:1px}
.nav-download .dl-ico{flex:0 0 auto;margin-top:.18em;color:var(--saffron-dark);font-size:.95em;transition:color .15s}
/* Dark mode: teal reads poorly on the black dropdown — show the download arrow
   white by default and yellow on hover/focus (matches the GIGW navbar icons). */
html.dark-mode .nav-download .dl-ico{color:#fff}
/* On hover/focus the whole item — title, (PDF, size) meta AND the arrow — turns yellow. */
html.dark-mode .nav-download:hover,html.dark-mode .nav-download:focus-visible,
html.dark-mode .nav-download:hover .dl-title,html.dark-mode .nav-download:focus-visible .dl-title,
html.dark-mode .nav-download:hover .dl-meta,html.dark-mode .nav-download:focus-visible .dl-meta,
html.dark-mode .nav-download:hover .dl-ico,html.dark-mode .nav-download:focus-visible .dl-ico{color:var(--dm-yellow)}
.submenu-group{padding:8px 14px 4px;margin-top:4px;border-top:1px solid var(--line)}
.submenu-group:first-child{border-top:0;margin-top:0}
.submenu-group-h{font-size:.7em;text-transform:uppercase;letter-spacing:.06em;font-weight:700;color:var(--nav-bar-dark);display:block}
.submenu{min-width:280px;max-height:70vh;overflow-y:auto}
/* Third level — flyout submenu that opens to the side */
.submenu:has(.has-flyout){overflow:visible}
.has-flyout{position:relative}
.nav-subparent{width:100%;display:flex;align-items:center;justify-content:space-between;gap:10px;background:none;border:0;font-family:inherit;font-weight:400;text-align:left;cursor:pointer}
.caret-right{transform:rotate(-45deg);margin:0 2px 0 0}
.submenu-flyout{top:-3px;left:100%;min-width:250px}
.has-flyout.open > .submenu-flyout{display:block}
@media (min-width:901px){.has-flyout:hover > .submenu-flyout,.has-flyout:focus-within > .submenu-flyout{display:block}}

/* ============================ Hero slider ============================ */
/* Hero aspect ratio matches the source banners (3:1 = 1500×500 / 1800×600 / 1851×600)
   so the slide image fits edge-to-edge with no stretch and no crop. */
.hero{position:relative;background:var(--navy-deep);overflow:hidden;width:100%;display:block;aspect-ratio:3/1;min-height:240px;max-height:640px}
.slides{position:relative;width:100%;height:100%}
/* Slides STACK and CROSSFADE (smoother than an instant display swap). The active
   slide fades in over the others; reduced-motion users get an instant switch via
   the global motion rule. */
.slide{position:absolute;inset:0;width:100%;height:100%;opacity:0;visibility:hidden;transition:opacity .6s ease,visibility .6s ease;z-index:1}
.slide.active{opacity:1;visibility:visible;z-index:2}
.slide img{display:block;width:100%;height:100%;object-fit:contain;object-position:center;background:var(--navy-deep)}
.slide a{display:block;width:100%;height:100%}
/* Slider controls (arrows + dots + pause) are defined in the "New caption hero
   slider" block at the end of this file — kept there as the single source so the
   old side-arrow rules can't conflict. */

/* ============================ Sections & layout ============================ */
.section{padding:54px 0}
.section-alt{background:var(--bg-alt)}
/* Modern section heading — bigger, bolder, with a single clean saffron underline */
.section h2{font-size:1.95rem;font-weight:700;position:relative;display:inline-block;margin:0 0 34px;letter-spacing:-.015em;color:var(--navy-deep);line-height:1.18;padding-bottom:14px}
.section h2::after{content:"";position:absolute;left:0;bottom:0;width:72px;height:4px;border-radius:4px;background:var(--saffron)}
.section h2::before{display:none}
.section h2 + .lead{margin-top:-14px}
.lead{font-size:1.12rem;color:var(--muted);max-width:75ch;line-height:1.6}
html.dark-mode .section h2{color:#f0f4fa}
@media (max-width:600px){
  .section h2{font-size:1.55rem;margin-bottom:26px;padding-bottom:12px}
  .section h2::after{width:56px}
}
.prose{max-width:100%}
.prose h2{font-size:1.35rem;margin-top:1.4em}
.prose ul,.prose ol{padding-left:1.3em}
.prose li{margin:.35em 0}
.prose ul.dash-list{list-style:none;padding-left:0}
.prose ul.dash-list li{padding-left:1.1em;text-indent:-1.1em}
.pdf-embed{position:relative;width:100%;margin:1.1em 0;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;background:#f5f5f5}
.pdf-frame{display:block;width:100%;height:600px;border:0}

/* Loading state for slow embeds (maps, PDF previews). The container shows a
   centered spinner + label until the iframe fires its `load` event (see main.js),
   at which point .embed-loading is removed and the iframe content covers it. */
.map-embed.embed-loading::after,.pdf-embed.embed-loading::after{content:"";position:absolute;z-index:1;left:50%;top:calc(50% - 14px);width:34px;height:34px;margin:-17px 0 0 -17px;border-radius:50%;border:3px solid rgba(13,44,84,.18);border-top-color:var(--navy,#0d2c54);animation:embed-spin .8s linear infinite}
.map-embed.embed-loading::before,.pdf-embed.embed-loading::before{content:"Loading…";position:absolute;z-index:1;left:0;right:0;top:calc(50% + 24px);text-align:center;font-size:.85rem;color:#52627a}
.map-embed.embed-loading iframe,.pdf-embed.embed-loading iframe{opacity:0}
.map-embed iframe,.pdf-embed iframe{transition:opacity .25s ease}
@keyframes embed-spin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.map-embed.embed-loading::after,.pdf-embed.embed-loading::after{animation:none}}
/* Scrollable image-based PDF viewer (.pdf-embed.pdf-doc): a dark scrollable
   frame with a sticky bar (Open-PDF button) over stacked page images. */
.pdf-embed.pdf-doc{position:relative;max-height:400px;overflow-y:auto;overflow-x:hidden;background:#525659;padding:0 0 16px}
.pdf-doc-bar{position:sticky;top:0;z-index:2;display:flex;align-items:center;justify-content:flex-end;gap:8px;padding:8px 12px;background:#323639;border-bottom:1px solid rgba(0,0,0,.4)}
.pdf-open-btn{font-weight:600;font-size:.85rem;line-height:1;color:#fff;text-decoration:none;padding:7px 14px;border-radius:6px;background:rgba(255,255,255,.14);transition:background .15s ease}
.pdf-open-btn:hover{background:rgba(255,255,255,.26)}
.pdf-doc-imglink{display:block;padding:16px 16px 0}
.pdf-doc-imglink img{display:block;width:100%;max-width:760px;margin:0 auto;height:auto;background:#fff;box-shadow:0 4px 16px rgba(0,0,0,.45)}

.grid{display:grid;gap:22px}
.grid-2{grid-template-columns:repeat(2,1fr)}
.grid-3{grid-template-columns:repeat(3,1fr)}
.grid-4{grid-template-columns:repeat(4,1fr)}

.card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:24px;box-shadow:var(--shadow);transition:transform .18s ease,box-shadow .18s ease}
.card h3{font-size:1.12rem}
.section .card:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg)}
.card-meta{color:var(--muted);font-size:.9rem;margin:.2em 0}
/* About NAVE JIVIT info cards: illustration icon + text, 2-up with 3rd centered */
.nj-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:22px;max-width:1040px;margin:0 auto}
.nj-card{display:flex;align-items:center;gap:22px;padding:22px 26px}
.nj-icon{flex:0 0 112px;width:112px;height:112px;object-fit:contain}
.nj-text h3{margin:0 0 8px}
.nj-text p{margin:0;color:var(--muted)}
.nj-grid .nj-card:last-child:nth-child(odd){grid-column:1 / -1;max-width:520px;justify-self:center}
@media (max-width:760px){.nj-grid{grid-template-columns:1fr}.nj-grid .nj-card:last-child:nth-child(odd){max-width:none}}
@media (max-width:480px){.nj-card{flex-direction:column;text-align:center;gap:14px}}

/* ---- Buttons ---- */
.btn{display:inline-block;background:var(--saffron);color:#fff;text-decoration:none;font-weight:700;padding:12px 28px;border-radius:30px;border:0;cursor:pointer;font-size:.98rem;transition:background .15s,transform .15s;box-shadow:0 3px 10px rgba(21,101,192,.32);text-align:center;line-height:1.3}
.btn:hover{background:var(--saffron-dark);color:#fff;transform:translateY(-2px)}
.btn-navy{background:var(--navy);box-shadow:0 3px 10px rgba(18,62,116,.3)}
/* Flat hover (per request): no background-colour change, no lift, no shadow. */
.btn-navy:hover,.btn-navy:focus-visible{background:var(--navy);transform:none;box-shadow:none}
.btn-outline{background:transparent;border:2px solid var(--navy);color:var(--navy);box-shadow:none}
.btn-outline:hover,.btn-outline:focus-visible{background:var(--navy);color:#fff;outline:none}
/* On a dark/coloured background (e.g. inside a hero), use white so it stays visible. */
.hero .btn-outline,.pledge-band .btn-outline{border-color:#fff;color:#fff}
.hero .btn-outline:hover,.pledge-band .btn-outline:hover{background:#fff;color:var(--navy-dark)}
html.dark-mode .btn-outline{border-color:var(--dm-yellow);color:var(--dm-yellow)}
html.dark-mode .btn-outline:hover{background:var(--dm-yellow);color:#000}
/* Section-end CTA paragraphs that wrap a single .btn — center horizontally with breathing room */
.section .container > p:has(> .btn){text-align:center;margin:32px 0 0}
@supports not selector(:has(*)){
  /* Fallback: rely on the inline style sweep applied to HTML for older browsers */
}

/* ============================ Message pages — full-width light band, minimal quote card ============================ */
.msg-page{background:var(--bg-alt)}
.msg-section{background:var(--bg-alt);padding:36px 0 64px}      /* edge-to-edge light band */
.msg-section>.container{max-width:880px}
.msg-section .breadcrumb{text-align:center;margin:0 0 10px}
.msg-title{text-align:center;font-size:clamp(1.6rem,3vw,2.25rem);color:var(--navy-deep);font-weight:700;line-height:1.18;letter-spacing:-.02em;margin:0 auto 32px;max-width:26ch;text-wrap:balance}
.msg-card{max-width:820px;margin:0 auto;background:#fff;border:1px solid var(--line);border-radius:22px;box-shadow:0 12px 44px rgba(6,44,102,.10);padding:48px 64px 56px;position:relative}
.msg-photo{width:140px;height:140px;border-radius:50%;object-fit:cover;object-position:top center;display:block;margin:0 auto 18px;border:4px solid #fff;box-shadow:0 8px 22px rgba(6,44,102,.20),0 0 0 5px var(--bg-alt)}
.msg-quote{border:0;margin:0 auto;padding:34px 0 0;max-width:60ch;position:relative}  /* comfortable measure + room for the mark */
.msg-quote::before{content:"\201C";position:absolute;top:6px;left:-10px;font-family:Georgia,"Times New Roman",serif;font-size:5.5rem;line-height:1;color:var(--saffron);opacity:.16;pointer-events:none}
.msg-quote p{color:var(--ink);font-size:1.05rem;line-height:1.95;margin:0 0 1.3em;text-align:left}
.msg-quote p:last-child{margin-bottom:0}
.msg-attr{margin:28px 0 0;padding-top:22px;border-top:1px solid var(--line);text-align:center}
.msg-name{display:block;font-size:1.3rem;font-weight:700;color:var(--navy-deep)}
.msg-role{display:block;font-size:.95rem;color:var(--muted);font-weight:600;margin-top:4px}
.msg-back{text-align:center;margin:30px 0 0}
html.dark-mode .msg-section{background:#0f1622}
html.dark-mode .msg-card{background:#1a2536;border-color:#283649;box-shadow:0 12px 44px rgba(0,0,0,.4)}
html.dark-mode .msg-photo{box-shadow:0 8px 22px rgba(0,0,0,.5),0 0 0 5px #0f1622}
html.dark-mode .msg-quote p{color:#e6edf6}
html.dark-mode .msg-name{color:#f0f4fa}
html.dark-mode .msg-role{color:#aebccd}
html.dark-mode .msg-attr{border-color:#283649}
@media(max-width:600px){.msg-card{padding:38px 22px 32px}.msg-photo{width:120px;height:120px}.msg-quote p{font-size:1rem;line-height:1.78}.msg-quote::before{font-size:3.4rem}.msg-name{font-size:1.18rem}}

/* ============================ CM (Chief Minister) section — saffron gradient (matches live site) ============================ */
.cm-section{background:radial-gradient(ellipse at center,#ffe9c4 0%,#fcc174 45%,#f7a248 100%);position:relative;padding:70px 0;overflow:hidden}
.cm-section::before{content:"";position:absolute;left:0;right:0;top:0;height:5px;background:#8b1818}
.cm-section::after{content:"";position:absolute;left:0;right:0;bottom:0;height:5px;background:#8b1818}
.cm-section h2{display:none}
.cm-grid{display:grid;grid-template-columns:380px 1fr;gap:60px;align-items:center;position:relative;z-index:1}
.cm-photo-img{width:100%;max-width:380px;border-radius:0;box-shadow:none;border:0;object-fit:contain;display:block;background:transparent}
.cm-photo{width:100%;max-width:380px;aspect-ratio:3/4;background:transparent}
.cm-section .cm-quote{font-size:1.05rem;line-height:1.85;color:#1a1a1a;font-style:normal;border:0;padding:42px 60px 42px 0;margin:0 0 8px;position:relative;font-family:var(--font);font-weight:500;max-width:60ch}
/* Big stylized quote marks — light peach/cream, large + decorative */
.cm-section .cm-quote .quote-mark{display:none}
.cm-section .cm-quote::before,
.cm-section .cm-quote::after{position:absolute;font-family:Georgia,"Times New Roman",serif;color:rgba(255,255,255,.55);font-size:6.5rem;line-height:1;font-weight:400;pointer-events:none}
.cm-section .cm-quote::before{content:"\201C";top:-8px;left:0}
.cm-section .cm-quote::after{content:"\201D";bottom:-30px;right:30px}
/* Higher-contrast text on the saffron gradient (#ffe9c4 → #fcc174 → #f7a248):
   darker maroon for the name (passes AA) and near-black grey for the meta. */
.cm-section .cm-name{font-size:1.35rem;font-weight:700;color:#7a1f08;margin:8px 0 4px;font-family:var(--font);font-style:normal;letter-spacing:0}
.cm-section .card-meta{font-size:.95rem;color:#2b2b2b;margin:0;font-weight:600}

/* ============================ Be an Organ Donor band — donor-card photo with pledge count + QR (matches live site) ============================
   The photo is a real <img> so the donor card is ALWAYS visible: on wide screens
   it fills the band like a backdrop (hands left, content over the light area);
   on narrow screens it stacks as a full banner above the content. */
.pledge-band{position:relative;overflow:hidden;background:linear-gradient(105deg,#f7e2d6 0%,#eef3f1 46%,#dcf0f4 100%)}
/* Photo is anchored left and capped so on ultra-wide screens the donor card
   can't drift far enough right to reach the content; the section gradient
   (matched to the photo's light edge) fills any space beyond it. */
.pledge-band-photo{position:absolute;left:0;top:0;bottom:0;right:auto;width:min(100%,1680px);z-index:0}
.pledge-band-photo picture{display:block;width:100%;height:100%}
.pledge-band-photo img{width:100%;height:100%;object-fit:cover;object-position:left center;display:block}
/* Legibility scrim: fades the right two-thirds to near-white so the dark text
   always clears WCAG AA contrast, while the hands + donor card stay clear. */
.pledge-band::after{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;background:linear-gradient(90deg,transparent 18%,rgba(245,250,252,.5) 40%,rgba(245,250,252,.92) 66%)}
/* Heading may sit over the hands (upper area); the count + QR row is held to the
   right so the donor card itself is never covered. */
.pledge-band-content{position:relative;z-index:1;width:100%;max-width:var(--maxw);margin:0 auto;padding:clamp(44px,4.5vw,68px) 22px;display:flex;flex-direction:column;align-items:flex-end;justify-content:center;gap:22px;min-height:clamp(420px,28vw,520px)}
.pledge-band-head{width:auto;max-width:520px;text-align:center;display:flex;flex-direction:column;align-items:center;gap:14px}
.pledge-band-eyebrow{margin:0;color:#0b5394;font-size:.8rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;opacity:.9}
.pledge-band-title{color:#0b3e8f;font-size:clamp(1.55rem,4vw,2.2rem);font-weight:700;margin:0;letter-spacing:.02em;text-transform:uppercase;line-height:1.1;overflow-wrap:break-word}
.pledge-band-title::after{content:"";display:block;width:56px;height:4px;background:linear-gradient(90deg,#0b5394,#1d8a52);margin:14px auto 0;border-radius:3px}
.pledge-band-sub{margin:0;max-width:40ch;color:#27445e;font-size:1rem;line-height:1.6;font-weight:500}
.pledge-band-row{display:flex;align-items:stretch;justify-content:center;gap:26px;flex-wrap:nowrap;width:auto}
.pledge-count{background:linear-gradient(160deg,#1457b0 0%,#0b3e8f 100%);color:#fff;border-radius:16px;padding:30px 38px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;box-shadow:0 14px 32px rgba(11,62,143,.32);min-width:248px}
/* tabular figures + a width reserved for the final value so the card doesn't
   resize / glitch while the counter animates 0 -> 2,200 */
.pledge-count .num{font-size:3.6rem;font-weight:700;line-height:1;letter-spacing:-.01em;font-variant-numeric:tabular-nums;display:block;text-align:center}
.pledge-count-lbl{font-size:1rem;font-weight:500;letter-spacing:.02em;opacity:.95}
.pledge-qr-card{background:#fff;border-radius:18px;padding:22px 26px 26px;display:flex;flex-direction:column;align-items:center;gap:12px;box-shadow:0 18px 44px rgba(13,38,76,.2);border:1px solid rgba(11,83,148,.08)}
.pledge-qr-heading{color:#556;font-size:.95rem;margin:0;font-weight:600;letter-spacing:.02em}
.pledge-qr-img{width:172px;height:172px;display:block;border-radius:6px}
.pledge-qr-btn{background:#0b5394;box-shadow:0 4px 12px rgba(11,83,148,.34);padding:11px 30px}
.pledge-qr-btn:hover,.pledge-qr-btn:focus-visible{background:#094279;transform:translateY(-1px)}

/* Dark-mode adjustments */
html.dark-mode .cm-section{background:radial-gradient(ellipse at center,#3a2a14 0%,#2a1d0c 60%,#1a1408 100%)}
html.dark-mode .cm-section .cm-quote{color:#f0e4d0}
html.dark-mode .cm-section .cm-quote::before,
html.dark-mode .cm-section .cm-quote::after{color:rgba(255,201,128,.35)}
html.dark-mode .cm-section .cm-name{color:#f5b97a}
html.dark-mode .cm-section .card-meta{color:#c8b896}
/* Dark theme is black + yellow: convert the band's blue fills/accents to match.
   Body text (title, sub, count number, QR heading) is already forced #fff by the
   global dark-mode text rule; only the fills/borders and the yellow eyebrow accent
   (which needs !important to beat that global rule) are overridden here. */
html.dark-mode .pledge-band{background:#0e1622}
html.dark-mode .pledge-band::after{background:linear-gradient(90deg,transparent 22%,rgba(6,11,18,.62) 50%,rgba(6,11,18,.92) 78%)}
html.dark-mode .pledge-band-eyebrow{color:var(--dm-yellow) !important}
html.dark-mode .pledge-band-title::after{background:var(--dm-yellow);background-image:none}
html.dark-mode .pledge-count{background:#000;background-image:none;border:1.5px solid var(--dm-yellow)}
html.dark-mode .pledge-qr-card{background:#000;border:1.5px solid var(--dm-yellow)}
html.dark-mode .pledge-qr-img{background:#fff;padding:6px;border-radius:6px}

@media (max-width:760px){
  .cm-section{padding:42px 0}
  .cm-section .cm-quote{padding:30px 20px 36px 16px;font-size:1rem}
  .cm-section .cm-quote::before{font-size:4.5rem;top:-4px}
  .cm-section .cm-quote::after{font-size:4.5rem;bottom:-22px;right:10px}
  .cm-photo-img,.cm-photo{max-width:240px;margin:0 auto}
}

/* Tablet & mobile — stack so the donor card is never overlapped:
   the photo becomes a banner up top with the hands/card centered, and the
   heading + count + QR sit below on the plain gradient (no scrim needed). */
@media (max-width:1180px){
  .pledge-band-photo{position:static;inset:auto;height:clamp(250px,48vw,430px)}
  .pledge-band-photo img{height:100%;object-fit:cover;object-position:center}
  .pledge-band::after{display:none}
  .pledge-band-content{align-items:center;justify-content:flex-start;min-height:0;max-width:660px;margin:0 auto;padding:34px clamp(16px,5vw,40px) 40px;gap:18px}
  .pledge-band-head{width:100%;max-width:100%}
  .pledge-band-sub{max-width:min(100%,36ch)}
  .pledge-band-row{width:100%;flex-wrap:wrap;gap:24px}
}
@media (max-width:520px){
  .pledge-band-row{gap:18px}
  .pledge-count{padding:24px 32px;min-width:0;width:100%;max-width:320px}
  .pledge-count .num{font-size:2.9rem}
}

/* Statistics — solid colour-coded cards (no icons), modelled on the live site:
   a big "Deceased Donations" feature card beside a 4-column organ grid. */
.section-counters{background:#fff;padding:54px 0}
html.dark-mode .section-counters{background:#0e1622}
/* Statistics headings use the standard section-heading style (navy, left underline)
   so they match "About NAVE JIVIT" etc. — consistent titles across the site. */
.section-counters .stats-h{margin-bottom:26px}
.stats-donation{display:grid;grid-template-columns:1.05fr 2.5fr;gap:18px;align-items:stretch}
.stats-grid{display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:1fr;gap:18px}
.stats-grid-3{grid-template-columns:repeat(3,1fr);max-width:920px;margin:0 auto}
.stat-card{border-radius:12px;padding:22px 18px;color:#fff;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:8px;min-height:128px;box-shadow:0 6px 16px rgba(13,44,84,.16);transition:transform .2s,box-shadow .2s}
.stat-card:hover{transform:translateY(-3px);box-shadow:0 14px 28px rgba(13,44,84,.22)}
.stat-card .num{font-size:2.8rem;font-weight:700;line-height:1;font-variant-numeric:tabular-nums}
.stat-card .lbl{font-size:1rem;font-weight:600;line-height:1.25}
.stat-feature{background:linear-gradient(160deg,#1357c4,#0d47a1)}
.stat-feature .num{font-size:3.6rem}
.stat-feature .lbl{font-size:1.15rem}
/* Darkened for WCAG AA white-on-colour contrast (≥4.5:1) while keeping each hue */
.stats-grid .stat-card:nth-child(4n+1){background:linear-gradient(160deg,#3f51c4,#2f3da3)}
.stats-grid .stat-card:nth-child(4n+2){background:linear-gradient(160deg,#15823f,#0f6633)}
.stats-grid .stat-card:nth-child(4n+3){background:linear-gradient(160deg,#aa641a,#9a5715)}
.stats-grid .stat-card:nth-child(4n){background:linear-gradient(160deg,#c92b4f,#aa1d3f)}
@media (max-width:860px){
  .stats-donation{grid-template-columns:1fr}
  .stats-grid{grid-template-columns:repeat(2,1fr)}
  .stats-grid-3{grid-template-columns:repeat(2,1fr)}
  .stat-feature{min-height:120px}
}
@media (max-width:430px){.stats-grid,.stats-grid-3{grid-template-columns:1fr 1fr;gap:12px}.stat-card .num{font-size:2.2rem}}

/* ============================ Office bearers (modernized) ============================ */
.bearer-card{text-align:center;padding:34px 22px 26px;border-radius:16px;border:1px solid var(--line);transition:transform .25s ease,box-shadow .25s ease;position:relative;overflow:hidden}
.bearer-card::before{content:"";position:absolute;left:0;right:0;top:0;height:5px;background:linear-gradient(90deg,var(--saffron) 0%,var(--saffron-darker) 100%);opacity:0;transition:opacity .25s ease}
.bearer-card:hover{transform:translateY(-5px);box-shadow:0 16px 40px rgba(13,44,84,.18)}
.bearer-card:hover::before{opacity:1}
.bearer-photo{width:160px;height:160px;max-width:160px;aspect-ratio:1/1;object-fit:cover;object-position:top center;border-radius:50%;box-shadow:0 6px 20px rgba(13,44,84,.18),0 0 0 5px #fff,inset 0 0 0 1px rgba(13,44,84,.06);margin:0 auto 20px;display:block;border:0;background:#f3f6fb;transition:box-shadow .25s ease,transform .25s ease}
.bearer-card:hover .bearer-photo{box-shadow:0 10px 28px rgba(13,44,84,.25),0 0 0 5px #fff,0 0 0 7px var(--saffron),inset 0 0 0 1px rgba(13,44,84,.06)}
.bearer-role{font-weight:700;color:var(--navy-deep);margin:0;font-size:1.05rem;letter-spacing:-.005em}
.bearer-name{color:var(--saffron-darker);margin:6px 0 16px;font-size:.9rem;font-weight:600}
.read-msg{display:inline-flex;align-items:center;gap:6px;font-weight:700;color:var(--saffron-darker);text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:3px}
.read-msg::after{content:"\2192";font-weight:700;font-size:1em;transition:transform .25s ease}
.read-msg:hover,.read-msg:focus-visible{color:#5e3005;text-decoration-thickness:3px}
.read-msg:hover::after,.read-msg:focus-visible::after{transform:translateX(3px)}
/* Officers without a published message — hide the CTA but keep the markup */
.read-msg[data-no-message="true"]{display:none}
html.dark-mode .bearer-card{background:#1a2536;border-color:#283649}
html.dark-mode .bearer-role{color:#f0f4fa}
html.dark-mode .bearer-name{color:#f5b97a}
html.dark-mode .bearer-photo{background:#0e1622;box-shadow:0 6px 20px rgba(0,0,0,.4),0 0 0 5px #283649}

/* ============================ Events ============================ */
/* ============================ Event card (modernized) ============================ */
.event-card{padding:0;overflow:hidden;display:flex;flex-direction:column;height:100%;border-radius:16px;transition:transform .25s ease,box-shadow .25s ease;border:1px solid var(--line)}
.event-card:hover{transform:translateY(-6px);box-shadow:0 18px 42px rgba(13,44,84,.18)}
.event-card > a:first-child,.event-card > .album-cover:first-child{display:block;width:100%;line-height:0;overflow:hidden;background:linear-gradient(135deg,#f4f7fb 0%,#e8edf4 100%);padding:0;border:0;cursor:pointer}
.event-card .event-img{width:100%;aspect-ratio:16/9;object-fit:cover;object-position:center;display:block;transition:transform .4s ease}
.event-card:hover .event-img{transform:scale(1.04)}
.event-card h3,
.event-card .card-meta,
.event-card > p{padding-left:22px;padding-right:22px}
.event-card h3{margin:18px 0 6px;font-size:1.08rem;line-height:1.35}
.event-card h3 a{color:var(--navy-dark);text-decoration:none}
.event-card h3 a:hover{color:var(--saffron-dark)}
.event-card .card-meta{margin:0 0 14px;font-weight:600;font-size:.8rem;color:var(--saffron-darker);text-transform:uppercase;letter-spacing:.04em;display:inline-flex;align-items:center;gap:7px}
.event-card .card-meta::before{content:"\f133";font-family:"Font Awesome 6 Free";font-weight:400;font-size:.9em;line-height:1;color:var(--saffron-darker);opacity:.85}
.event-card > p{margin:0 0 18px;color:var(--ink);line-height:1.6;font-size:.92rem}
.grid:has(> .event-card){align-items:stretch}

/* Read More — modern saffron pill button (event cards only; keeps the bearer-card text-link style intact) */
.event-card .read-msg{display:inline-flex;align-items:center;gap:7px;background:var(--navy);color:#fff;font-weight:700;padding:8px 16px;border-radius:22px;text-decoration:none;font-size:.74rem;letter-spacing:.03em;text-transform:uppercase;margin:auto 22px 22px;align-self:flex-start;transition:background .2s ease,transform .2s ease,box-shadow .2s ease,padding .2s ease;box-shadow:0 3px 10px rgba(18,62,116,.2);position:relative;overflow:hidden}
.event-card .read-msg::after{content:"\2192";font-weight:700;font-size:1em;display:inline-block;transition:transform .25s ease;margin:0}
.event-card .read-msg:hover,.event-card .read-msg:focus-visible{background:var(--saffron-darker);color:#fff;transform:translateY(-2px);box-shadow:0 6px 16px rgba(125,64,6,.32);text-decoration:none;padding-right:19px}
.event-card .read-msg:hover::after,.event-card .read-msg:focus-visible::after{transform:translateX(4px)}

html.dark-mode .event-card{background:#1a2536;border-color:#283649}
html.dark-mode .event-card > a:first-child{background:linear-gradient(135deg,#0e1622 0%,#16202e 100%)}
html.dark-mode .event-card h3 a{color:#f0f4fa}
html.dark-mode .event-card > p{color:#cfd8e3}

/* ============================ Goals ============================ */
.goal-card{position:relative;padding-left:64px}
.goal-num{position:absolute;left:18px;top:22px;width:34px;height:34px;border-radius:50%;background:var(--saffron);color:#fff;font-weight:700;display:flex;align-items:center;justify-content:center}

/* ============================ Partner band ============================ */
.partner-band{border-top:1px solid var(--line);background:#fff}
.partner-list{list-style:none;display:flex;flex-wrap:wrap;gap:28px 40px;align-items:center;justify-content:center;padding:0;margin:0}
.partner-list img{height:64px;width:auto;object-fit:contain;filter:grayscale(1);opacity:.8;transition:filter .2s,opacity .2s}
.partner-list a:hover img,.partner-list a:focus-visible img{filter:none;opacity:1}

/* ============================ Policies hub (collapsible details) ============================ */
.policy-hub{margin:22px 0 8px}
.policy-toc{background:var(--bg);border:1px solid var(--line);border-radius:var(--radius-sm);padding:18px 22px;margin:0 0 24px}
.policy-toc h2{font-size:1.05rem;margin:0 0 10px;color:var(--navy-deep)}
.policy-toc ol{margin:0;padding:0 0 0 22px;column-count:2;column-gap:28px}
.policy-toc li{margin:5px 0;break-inside:avoid}
.policy-toc a{color:var(--navy);text-decoration:none;font-weight:600}
.policy-toc a:hover,.policy-toc a:focus-visible{color:var(--saffron-darker);text-decoration:underline}
.policy-section{background:#fff;border:1px solid var(--line);border-radius:var(--radius-sm);margin:0 0 12px;box-shadow:var(--shadow);scroll-margin-top:140px}
.policy-section > summary{list-style:none;padding:18px 24px;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:18px;font-weight:700;color:var(--navy-deep);font-size:1.1rem;user-select:none;border-radius:var(--radius-sm)}
.policy-section > summary::-webkit-details-marker{display:none}
/* Crisp +/− glyph drawn with two CSS lines (no font dependency) */
.policy-section > summary::after{
  content:"";
  flex:0 0 auto;
  width:28px;height:28px;
  border:2px solid var(--saffron-darker);
  border-radius:50%;
  background-color:#fff;
  background-image:
    linear-gradient(var(--saffron-darker),var(--saffron-darker)),
    linear-gradient(var(--saffron-darker),var(--saffron-darker));
  background-repeat:no-repeat;
  background-position:center center;
  background-size:12px 2px, 2px 12px;
  transition:background-color .2s,background-size .25s,transform .25s,box-shadow .2s;
}
.policy-section > summary:hover::after,
.policy-section > summary:focus-visible::after{box-shadow:0 0 0 4px rgba(125,64,6,.12)}
.policy-section[open] > summary::after{
  background-color:var(--saffron-darker);
  background-image:
    linear-gradient(#fff,#fff),
    linear-gradient(#fff,#fff);
  background-size:12px 2px, 0 0;        /* hide the vertical bar — leaves just the minus */
  transform:rotate(180deg);
}
.policy-section > summary:hover,.policy-section > summary:focus-visible{background:var(--bg)}
.policy-section[open] > summary{border-bottom:1px solid var(--line);background:var(--bg)}
.policy-body{padding:18px 28px 24px;color:var(--ink);line-height:1.75}
.policy-body h3{font-size:1.02rem;margin:1em 0 .4em;color:var(--navy-deep)}
.policy-body ul,.policy-body ol{padding-left:1.4em;margin:.4em 0}
.policy-body li{margin:.3em 0}
.policy-body p:first-child{margin-top:0}
.policy-body p:last-child{margin-bottom:0}
.policy-meta-row{display:flex;flex-wrap:wrap;gap:10px;margin:6px 0 0;font-size:.85rem;color:var(--muted);font-weight:600}
.policy-meta-row span{display:inline-flex;align-items:center;gap:6px;background:var(--bg);padding:3px 10px;border-radius:30px}
html.dark-mode .policy-toc{background:#1a2536;border-color:#283649}
html.dark-mode .policy-toc h2,html.dark-mode .policy-toc a{color:#e4ebf5}
html.dark-mode .policy-section{background:#1a2536;border-color:#283649}
html.dark-mode .policy-section > summary{color:#fff}
html.dark-mode .policy-section[open] > summary,html.dark-mode .policy-section > summary:hover{background:#22324a}
html.dark-mode .policy-body{color:#e4ebf5}
html.dark-mode .policy-body h3{color:#fff}
/* FAQ — all answers shown open (no accordion) */
.faq-list{display:flex;flex-direction:column;gap:16px;margin:20px 0}
.faq-item{background:#fff;border:1px solid var(--line);border-left:4px solid var(--navy-deep);border-radius:var(--radius-sm);box-shadow:var(--shadow);padding:18px 22px;scroll-margin-top:140px}
.faq-q{font-size:1.12rem;color:var(--navy-deep);margin:0 0 8px;font-weight:700;line-height:1.3}
.faq-a{color:var(--ink)}
.faq-a p{margin:0 0 8px}.faq-a p:last-child{margin-bottom:0}
.faq-a ul{margin:6px 0 8px;padding-left:20px}.faq-a li{margin:0 0 5px}
html.dark-mode .faq-item{background:#1a2536;border-color:#283649;border-left-color:var(--saffron)}
html.dark-mode .faq-q{color:#fff}
html.dark-mode .faq-a{color:#e4ebf5}
/* Policies & Disclosures hub — grouped link cards to each policy page */
.policy-group{margin:26px 0}
.policy-group > h2{margin:0 0 14px}
.policy-card{transition:transform .15s,box-shadow .15s,border-color .15s}
.policy-card h3{margin:0;font-size:1.02rem}
.policy-card h3 a{text-decoration:none;color:var(--navy-deep);display:flex;align-items:center;justify-content:space-between;gap:12px}
.policy-card h3 a::after{content:"\2192";color:var(--saffron-darker);font-weight:700;flex:0 0 auto}
.policy-card:hover{transform:translateY(-2px);box-shadow:var(--shadow-lg);border-color:var(--navy)}
.policy-card:hover h3 a{color:var(--navy)}
.policy-contact{font-style:normal;line-height:1.75}
html.dark-mode .policy-card h3 a{color:#e4ebf5}
/* Contact page — person cards (photo + name + designation) and organogram */
.contact-people{margin:10px 0 26px}
.person-card{text-align:center}
.person-photo{width:150px;height:150px;border-radius:50%;object-fit:cover;object-position:top;margin:0 auto 14px;border:4px solid var(--bg-alt);box-shadow:var(--shadow);display:block}
.person-avatar{display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,var(--teal,#1ba39c) 0%,#0d7d77 100%);color:#fff}
.person-avatar .svg-ico{font-size:3.4rem}
.person-card h3{margin:0 0 6px;color:var(--navy-deep);font-size:1.1rem}
.person-role{color:var(--muted);font-size:.95rem;line-height:1.55;margin:0}
.contact-organogram{margin:14px 0}
.contact-organogram img{width:100%;max-width:780px;height:auto;border-radius:10px;display:block;margin:0 auto;border:1px solid var(--line)}
.contact-organogram figcaption{color:var(--muted);font-size:.9rem;text-align:center;margin-top:10px;line-height:1.5}
html.dark-mode .person-card h3{color:#fff}
html.dark-mode .person-photo{border-color:#22324a}
html.dark-mode .policy-meta-row span{background:#22324a;color:#a6b4c8}
/* Contact-page-UNIQUE styles live in /contact/contact.css (loaded only by that page). */
@media (max-width:600px){
  .policy-toc ol{column-count:1}
  .policy-section > summary{padding:14px 16px;font-size:1rem;gap:10px}
  .policy-body{padding:14px 18px 18px}
}

/* ============================ Related Government Portals (pill row) ============================ */
.gov-portals{background:#f4ede1;padding:46px 0 50px;border-top:1px solid #e6dcc7}
.gov-portals .container{display:flex;flex-direction:column;align-items:center;gap:24px}
.gov-portals-title{margin:0;font-size:.95rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:#2a2a2a;text-align:center}
.gov-portals-list{list-style:none;display:flex;flex-wrap:wrap;justify-content:center;gap:14px;padding:0;margin:0}
.gov-portals-list li{margin:0}
.gov-portal-pill{display:inline-flex;align-items:center;padding:13px 22px;background:#fff;border:1.5px solid var(--navy-deep);border-radius:8px;color:var(--navy-deep);font-weight:700;font-size:.92rem;text-decoration:none;transition:background .18s,color .18s,transform .15s,box-shadow .18s;white-space:nowrap;line-height:1}
.gov-portal-pill:hover,.gov-portal-pill:focus-visible{background:var(--navy-deep);color:#fff;transform:translateY(-2px);box-shadow:0 4px 12px rgba(8,31,61,.2)}
.gov-portal-pill.is-active,.gov-portal-pill[aria-current="page"]{background:var(--navy-deep);color:#fff;border-color:var(--navy-deep)}
.gov-portal-pill.is-active:hover{background:var(--navy-dark)}
html.dark-mode .gov-portals{background:#16202e;border-color:#283649}
html.dark-mode .gov-portals-title{color:#e4ebf5}
html.dark-mode .gov-portal-pill{background:#1a2536;color:#e4ebf5;border-color:#7eb3ff}
html.dark-mode .gov-portal-pill:hover{background:#7eb3ff;color:#0a1220}
html.dark-mode .gov-portal-pill.is-active{background:#7eb3ff;color:#0a1220;border-color:#7eb3ff}
@media (max-width:600px){
  .gov-portals{padding:36px 0}
  .gov-portal-pill{padding:10px 16px;font-size:.84rem}
  .gov-portals-list{gap:10px}
}

/* ============================ Logo Marquee (bordered scrolling logos) ============================ */
.logo-marquee{background:#fff;border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:22px 0;overflow:hidden;position:relative}
.logo-marquee::before,.logo-marquee::after{content:"";position:absolute;top:0;bottom:0;width:60px;z-index:2;pointer-events:none}
.logo-marquee::before{left:0;background:linear-gradient(90deg,#fff,rgba(255,255,255,0))}
.logo-marquee::after{right:0;background:linear-gradient(270deg,#fff,rgba(255,255,255,0))}
.lm-title{text-align:center;font-size:.95rem;color:var(--muted);text-transform:uppercase;letter-spacing:.08em;font-weight:700;margin:0 0 16px}
.lm-track{display:flex;gap:24px;width:max-content;animation:lm-scroll 40s linear infinite;will-change:transform;align-items:stretch}
.logo-marquee:hover .lm-track,.logo-marquee:focus-within .lm-track{animation-play-state:paused}
.lm-item{flex:0 0 auto;border:2px solid var(--line);border-radius:var(--radius-sm);background:#fff;padding:14px 22px;min-width:200px;display:flex;flex-direction:column;align-items:center;gap:8px;text-decoration:none;transition:border-color .2s,box-shadow .2s,transform .2s}
.lm-item:hover,.lm-item:focus-visible{border-color:var(--saffron);box-shadow:var(--shadow);transform:translateY(-2px)}
.lm-item img{height:54px;width:auto;object-fit:contain;display:block}
.lm-item .lm-label{font-size:.82rem;color:var(--navy-dark);font-weight:600;text-align:center;line-height:1.25;max-width:18ch}
@keyframes lm-scroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* ============================ Bhashini translation widget ============================ */
.bhashini-wrap{display:inline-flex;align-items:center;gap:6px;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.25);border-radius:5px;padding:1px 6px}
.bhashini-wrap::before{content:"\1F310";font-size:.95rem}
.bhashini-wrap select{background:transparent;color:#fff;border:0;font-size:.82rem;font-family:inherit;padding:3px 4px;cursor:pointer}
.bhashini-wrap select option{color:var(--ink);background:#fff}
.bhashini-wrap:hover{background:var(--saffron);border-color:var(--saffron)}
#bhashini-translation-plugin{display:none}

/* ============================ Footer bottom (GHB-style) ============================ */
.footer-bottom-bar{display:flex;justify-content:space-between;align-items:center;gap:10px 28px;flex-wrap:nowrap;padding:16px 22px;max-width:var(--maxw);margin:0 auto;font-size:.78rem;color:#cdd9ec;border-top:1px solid rgba(255,255,255,.08)}
.footer-bottom-bar .fb-left{flex:1 1 auto;min-width:0}
.footer-bottom-bar p{margin:0;line-height:1.5}
.footer-bottom-bar .fb-left strong{color:#fff;font-weight:700}
.footer-bottom-bar .fb-right{flex:0 0 auto;text-align:right;display:flex;flex-direction:row;flex-wrap:nowrap;align-items:center;justify-content:flex-end;gap:4px 20px;white-space:nowrap}
.footer-bottom-bar .fb-right span strong{color:#cdeef2}
/* Live visitor-count bump — a brief flash when the shared counter ticks up
   (main.js adds .count-bump for 600ms). Settles back to the footer accent. */
#page-views.count-bump{animation:count-bump .6s ease}
@keyframes count-bump{0%{color:#fff;transform:scale(1.18)}100%{color:#cdeef2;transform:scale(1)}}
@media (prefers-reduced-motion:reduce){#page-views.count-bump{animation:none}}
.footer-bottom-bar a{color:#cdd9ec;text-decoration:none}
.footer-bottom-bar a:hover{color:#fff;text-decoration:underline}

/* ============================ Stay Informed (3-col notices/tenders/recruitment) ============================ */
.stay-informed-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.si-col{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:0;box-shadow:var(--shadow);overflow:hidden}
.si-col-head{background:linear-gradient(135deg,var(--navy),var(--navy-dark));color:#fff;padding:14px 18px;font-weight:700;font-size:1rem;border-bottom:3px solid var(--saffron)}
.si-col-body{padding:0}
.si-col-body table{width:100%;border-collapse:collapse;font-size:.88rem}
.si-col-body th,.si-col-body td{padding:10px 14px;border-bottom:1px solid var(--line);text-align:left;vertical-align:top}
.si-col-body thead th{background:var(--bg);color:var(--navy-dark);font-size:.78rem;text-transform:uppercase;letter-spacing:.04em}
.si-col-body tbody tr:last-child td{border-bottom:0}
.si-col-body tbody tr:hover td{background:#f8fafc}
.si-col-foot{padding:12px 18px;border-top:1px solid var(--line);background:var(--bg)}
.si-col-foot a{font-weight:700;color:var(--navy);text-decoration:none}
.si-col-foot a:hover{color:var(--saffron-dark);text-decoration:underline}

/* ============================ Office bearers page — featured-row cards (modernized) ============================ */
.bearer-featured,
.page-body section.card[id="governor"],
.page-body section.card[id="chief-minister"],
.page-body section.card[id="chief-secretary"]{display:grid;grid-template-columns:240px 1fr;gap:36px;align-items:center;background:#fff;border:1px solid var(--line);border-radius:18px;padding:36px;box-shadow:0 6px 22px rgba(13,44,84,.08);margin:0 0 26px;position:relative;overflow:hidden;transition:box-shadow .25s ease,transform .25s ease}
.page-body section.card[id="governor"]::before,
.page-body section.card[id="chief-minister"]::before,
.page-body section.card[id="chief-secretary"]::before{content:"";position:absolute;left:0;top:0;bottom:0;width:6px;background:linear-gradient(180deg,var(--saffron) 0%,var(--saffron-darker) 100%)}
.page-body section.card[id="governor"]:hover,
.page-body section.card[id="chief-minister"]:hover,
.page-body section.card[id="chief-secretary"]:hover{transform:translateY(-2px);box-shadow:0 16px 38px rgba(13,44,84,.14)}
.page-body section.card .cm-grid{display:contents}
.page-body section.card .bearer-photo{width:220px;height:220px;max-width:220px;aspect-ratio:1/1;object-fit:cover;object-position:top center;border-radius:50%;box-shadow:0 8px 22px rgba(13,44,84,.18),0 0 0 5px #fff,inset 0 0 0 1px rgba(13,44,84,.06);margin:0;display:block}
.page-body section.card h2{font-size:1.55rem;font-weight:700;color:var(--navy-deep);margin:0 0 4px;letter-spacing:-.01em;line-height:1.2}
.page-body section.card h2::after{display:none}
.page-body section.card .card-meta{font-size:.92rem;font-weight:700;color:var(--saffron-darker);text-transform:uppercase;letter-spacing:.06em;margin:0 0 16px}
.page-body section.card blockquote{margin:14px 0 0;color:var(--ink);font-size:1.05rem;line-height:1.75;font-style:italic;font-family:var(--font);position:relative;padding:0 0 0 18px;border-left:3px solid var(--saffron)}
.page-body section.card blockquote::before{content:"\201C";font-weight:700;color:var(--saffron);font-size:1.4rem;line-height:0;margin-right:4px;opacity:.65;font-style:normal;display:inline-block;vertical-align:-.25em}
.page-body section.card .form-status{margin:14px 0 0;background:#fff7eb;border:1px dashed #f0c98c;color:#7d4006}
html.dark-mode .page-body section.card{background:#1a2536;border-color:#283649}
html.dark-mode .page-body section.card h2{color:#f0f4fa}
html.dark-mode .page-body section.card blockquote{color:#e4ebf5}
@media (max-width:760px){
  .bearer-featured,
  .page-body section.card[id="governor"],
  .page-body section.card[id="chief-minister"],
  .page-body section.card[id="chief-secretary"]{grid-template-columns:1fr;gap:22px;padding:26px 22px;text-align:center}
  .page-body section.card .bearer-photo{width:170px;height:170px;margin:0 auto}
  .page-body section.card .card-meta{margin-bottom:14px}
  .page-body section.card blockquote{text-align:left;padding-left:14px;font-size:.98rem}
}

/* ============================ Regional tabs ============================ */
.region-tabs{margin:24px 0 0}
.region-tablist{display:flex;flex-wrap:wrap;gap:6px;list-style:none;padding:0;margin:0 0 -1px;position:relative;z-index:2;border-bottom:0}
.region-tablist button{background:#fff;color:var(--navy-dark);border:1px solid var(--line);border-bottom:0;border-radius:8px 8px 0 0;padding:11px 18px;font-weight:700;font-size:.95rem;cursor:pointer;font-family:inherit;display:inline-flex;align-items:center;gap:8px;transition:background .15s,color .15s,border-color .15s}
.region-tablist button .tt-count{background:var(--bg);color:var(--muted);font-weight:600;font-size:.78rem;padding:2px 8px;border-radius:30px}
.region-tablist button:hover{background:var(--bg-alt);color:var(--navy)}
.region-tablist button[aria-selected="true"]{background:var(--navy);color:#fff;border-color:var(--navy)}
.region-tablist button[aria-selected="true"] .tt-count{background:var(--saffron);color:#fff}
.region-panels{background:#fff;border:1px solid var(--line);border-radius:0 var(--radius-sm) var(--radius-sm) var(--radius-sm);padding:0;box-shadow:var(--shadow);overflow:hidden}
.region-panel{padding:0;display:none}
.region-panel[data-active="true"]{display:block}
.region-panel h3{padding:16px 22px;margin:0;background:linear-gradient(135deg,var(--navy),var(--navy-dark));color:#fff;font-size:1.08rem;border-bottom:3px solid var(--saffron)}
.region-panel .panel-meta{padding:10px 22px;background:var(--bg);color:var(--muted);font-size:.88rem;border-bottom:1px solid var(--line);margin:0}
.region-panel table{width:100%;border-collapse:collapse;font-size:.92rem}
.region-panel th,.region-panel td{padding:10px 14px;border-bottom:1px solid var(--line);text-align:left;vertical-align:top}
.region-panel thead th{background:var(--bg);color:var(--navy-dark);font-size:.82rem;text-transform:uppercase;letter-spacing:.04em;font-weight:700;position:sticky;top:0;z-index:1}
.region-panel tbody tr:hover td{background:#f8fafc}
.region-panel tbody tr:last-child td{border-bottom:0}
.region-panel td.sr{width:60px;color:var(--muted);font-weight:600;font-variant-numeric:tabular-nums}
.region-panel td.contact{white-space:nowrap;font-variant-numeric:tabular-nums}
.region-panel td.contact a{color:var(--navy);text-decoration:none}
.region-panel td.contact a:hover{color:var(--saffron-dark);text-decoration:underline}
.region-filter{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin:18px 0 0}
.region-filter input{flex:1 1 280px;padding:10px 14px;border:1px solid var(--line);border-radius:var(--radius-sm);font-size:.95rem;font-family:inherit}
.region-filter input:focus{outline:none;border-color:var(--navy);box-shadow:0 0 0 3px rgba(18,62,116,.15)}
.region-filter .filter-meta{color:var(--muted);font-size:.88rem;font-weight:600}
@media (max-width:760px){
  .region-tablist{flex-wrap:nowrap;overflow-x:auto;padding-bottom:2px}
  .region-tablist button{flex:0 0 auto}
  .region-panel table{font-size:.86rem}
  .region-panel th,.region-panel td{padding:8px 10px}
  .region-panel td.contact{white-space:normal}
}

/* ============================ Video grid + modal ============================ */
.video-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin:22px 0}
.video-card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow);cursor:pointer;display:flex;flex-direction:column;padding:0;text-align:left;font-family:inherit;color:inherit;transition:transform .18s,box-shadow .18s}
.video-card:hover,.video-card:focus-visible{transform:translateY(-4px);box-shadow:var(--shadow-lg)}
.video-thumb{position:relative;display:block;aspect-ratio:16/9;overflow:hidden;background:#0e1622}
.video-thumb img,.video-thumb .mp4-poster{width:100%;height:100%;object-fit:cover;display:block;transition:transform .25s}
.video-thumb .mp4-poster{pointer-events:none;background:#0e1622}
/* Facebook video card — real thumbnail with an FB badge; branded gradient
   fallback when no thumbnail is available */
.video-thumb-fb{background:linear-gradient(135deg,#1877f2 0%,#0b5fcc 100%)}
.video-thumb-fb .fb-badge{position:absolute;top:10px;left:10px;width:34px;height:34px;display:flex;align-items:center;justify-content:center;background:#1877f2;border:2px solid rgba(255,255,255,.92);border-radius:50%;color:#fff;box-shadow:0 2px 8px rgba(0,0,0,.45);z-index:2}
.video-thumb-fb .fb-badge .svg-ico{font-size:16px;line-height:1;width:auto;height:auto}
.video-card:hover .video-thumb img{transform:scale(1.05)}
.video-play{position:absolute;inset:0;margin:auto;width:66px;height:66px;border-radius:50%;background:rgba(21,101,192,.95);color:#fff;display:flex;align-items:center;justify-content:center;box-shadow:0 6px 18px rgba(0,0,0,.4);transition:transform .2s,background .2s}
.video-card:hover .video-play{transform:scale(1.12);background:#0d47a1}
.video-play .svg-ico{font-size:1.5rem;margin-left:4px}
.video-duration{position:absolute;right:8px;bottom:8px;background:rgba(0,0,0,.75);color:#fff;font-size:.78rem;padding:2px 8px;border-radius:4px;font-weight:600}
.video-meta{padding:16px 18px;display:flex;flex-direction:column;gap:6px;flex:1}
.video-meta h3{margin:0;font-size:1rem;line-height:1.35;color:var(--navy-dark)}
.video-meta .video-date{color:var(--muted);font-size:.85rem;font-weight:600;display:inline-flex;align-items:center;gap:6px}
.video-meta .video-date::before{content:"\1F4C5"}
.video-card .video-tag{display:inline-block;background:rgba(10,123,140,.12);color:var(--saffron-dark);font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.06em;padding:3px 10px;border-radius:30px;align-self:flex-start;margin-top:2px}
@media (max-width:980px){.video-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:600px){.video-grid{grid-template-columns:1fr}}

/* Modal */
.video-modal{position:fixed;inset:0;background:rgba(8,15,28,.92);z-index:1000;display:none;align-items:center;justify-content:center;padding:20px;backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px)}
.video-modal[aria-hidden="false"]{display:flex}
.video-modal-inner{position:relative;width:100%;max-width:960px;background:#000;border-radius:var(--radius);overflow:hidden;box-shadow:0 20px 60px rgba(0,0,0,.6)}
.video-modal-frame{position:relative;width:100%;aspect-ratio:16/9;background:#000}
.video-modal-frame iframe{width:100%;height:100%;border:0;display:block}
.video-modal-close{position:absolute;top:-14px;right:-14px;width:42px;height:42px;border-radius:50%;border:0;background:#fff;color:var(--navy-deep);font-size:1.3rem;font-weight:700;cursor:pointer;box-shadow:0 4px 14px rgba(0,0,0,.4);display:flex;align-items:center;justify-content:center;z-index:2;line-height:1}
.video-modal-close:hover{background:var(--saffron);color:#fff;transform:scale(1.06)}
.video-modal-title{padding:16px 22px;background:#0e1622;color:#fff;display:flex;justify-content:space-between;align-items:center;gap:14px;font-size:.95rem;font-weight:600}
.video-modal-title a{color:#cdeef2;text-decoration:none;font-size:.84rem;font-weight:600;white-space:nowrap}
.video-modal-title a:hover{text-decoration:underline}
body.modal-open{overflow:hidden}
@media (max-width:600px){
  .video-modal{padding:8px}
  .video-modal-close{top:8px;right:8px}
}

/* Dark-mode adjustments for video grid */
html.dark-mode .video-card{background:#1a2536;border-color:#283649}
html.dark-mode .video-meta h3{color:#f0f4fa}
html.dark-mode .video-meta .video-date{color:#a6b4c8}

/* ============================ Last updated indicator ============================ */
.last-updated-badge{display:inline-block;background:rgba(255,217,168,.15);border:1px solid rgba(255,217,168,.4);border-radius:30px;padding:3px 12px;font-size:.82rem;color:#cdeef2;font-weight:600}

/* ============================ Page banner / breadcrumb ============================ */
.page-banner{background:none;color:inherit;padding:0}
.page-banner .container{max-width:var(--maxw)}
.breadcrumb ol{list-style:none;display:flex;flex-wrap:wrap;gap:6px;padding:0;margin:0 0 8px;font-size:.88rem}
.breadcrumb li:not(:first-child)::before{content:"\203A";margin-right:6px;color:#9db8de}
/* Breadcrumb sits on the light page background — use readable dark colours */
.breadcrumb{font-size:.9rem;color:var(--muted);margin:0 0 6px}
.breadcrumb a{color:var(--navy);text-decoration:underline;text-underline-offset:2px}
.breadcrumb a:hover{color:var(--saffron-darker)}
.breadcrumb [aria-current="page"]{color:var(--ink);font-weight:600}
.page-title{color:#fff;font-size:2.1rem;margin:0;font-weight:700;letter-spacing:-.015em;line-height:1.18;position:relative;padding-bottom:14px;display:inline-block}
.page-title::after{content:"";position:absolute;left:0;bottom:0;width:72px;height:4px;border-radius:4px;background:var(--saffron)}
.page-body{padding:40px 0 56px}
@media (max-width:600px){
  .page-title{font-size:1.55rem;padding-bottom:12px}
  .page-title::after{width:56px}
  .page-body{padding:28px 0 40px}
}

/* ============================ Data tables ============================ */
.table-wrap{width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch;margin:14px 0}
.data-table{width:100%;table-layout:auto;border-collapse:collapse;margin:0;background:#fff;box-shadow:var(--shadow);border-radius:var(--radius-sm);overflow:hidden}
.data-table caption{text-align:left;font-weight:600;color:var(--muted);padding:10px 12px;caption-side:top}
.data-table th,.data-table td{padding:12px 14px;border:1px solid var(--line);text-align:left;vertical-align:top}
.data-table thead th{background:var(--navy);color:#fff}
.data-table tbody th[scope="row"]{background:var(--bg);width:30%}
.data-table tbody tr:nth-child(even) td{background:#f8fafc}
/* Wide multi-column tables: fit the full table within the page on desktop by
   distributing columns evenly and using compact, readable cells (no scroll). */
.data-table.stack-sm{width:100%;table-layout:fixed}
.data-table.stack-sm th,.data-table.stack-sm td{padding:8px 9px;font-size:.82rem;line-height:1.4;overflow-wrap:break-word;word-break:break-word}
@media (min-width:641px){
  .data-table.stack-sm td[data-label="Sr No"],.data-table.stack-sm th:first-child{width:42px;text-align:left}
}

/* ============================ Forms ============================ */
.form-field{margin-bottom:16px}
.form-field label{display:block;font-weight:600;margin-bottom:5px}
.form-field input,.form-field textarea,.form-field select{width:100%;padding:11px 13px;border:1px solid #9aa6b6;border-radius:var(--radius-sm);font-size:1rem;font-family:inherit}
.form-field input[aria-invalid="true"],.form-field textarea[aria-invalid="true"]{border-color:#b3261e;background:#fdeceb}
.form-error{color:#b3261e;font-size:.88rem;margin:5px 0 0;font-weight:600}
.form-hint{color:var(--muted);font-size:.85rem;margin:4px 0 0}
.req{color:#b3261e}
.form-status{padding:12px 16px;border-radius:var(--radius-sm);margin:0 0 16px;border:1px solid;font-weight:600}
.form-status.ok{background:#e7f4ec;border-color:var(--green);color:var(--green)}
.form-status.err{background:#fdeceb;border-color:#b3261e;color:#b3261e}

/* ---- Download links ---- */
.dl-link{display:inline-flex;align-items:center;gap:8px;color:var(--navy);font-weight:600;text-decoration:none;padding:4px 0}
.dl-link:hover{color:var(--saffron-dark);text-decoration:underline}
.dl-meta{color:var(--muted);font-weight:400;font-size:.88em;white-space:nowrap}
.dl-ico{color:var(--saffron)}
/* In submenus, title + (PDF, size) are stacked on the left and a small circular download icon
   sits on the right, vertically centered against the two-line text block. */
.submenu .dl-link{display:grid;grid-template-columns:1fr auto;column-gap:10px;align-items:center;line-height:1.35;padding:9px 14px}
.submenu .dl-link > *{grid-column:1}
.submenu .dl-link .dl-meta{display:block;font-size:.74rem;margin-top:2px;white-space:nowrap;color:var(--muted);font-weight:500}
.submenu .dl-link::after{content:"\2913";grid-column:2;grid-row:1/-1;align-self:center;justify-self:end;width:22px;height:22px;border-radius:50%;background:var(--nav-bar);color:#fff;display:inline-flex;align-items:center;justify-content:center;font-size:.74rem;font-weight:700;line-height:1;flex:0 0 auto;transition:background .15s,transform .15s}
.submenu .dl-link:hover::after,.submenu .dl-link:focus-visible::after{background:var(--nav-bar-dark);transform:translateY(-1px)}
.submenu .dl-link:hover .dl-meta,.submenu .dl-link:focus-visible .dl-meta{color:var(--nav-bar-dark)}

/* ---- Timeline list (used on some pages) ---- */
.timeline{list-style:none;padding:0;margin:18px 0 26px;border-left:3px solid var(--saffron)}
.timeline li{position:relative;padding:0 6px 26px 28px}
.timeline li:last-child{padding-bottom:4px}
/* box-sizing:border-box is set via `*`, which does NOT match ::before, so this dot is
   content-box: 15px + 3px border each side = 21px wide. Center it on the 3px ruling line
   (the ul's border-left): left:-12px puts the dot's centre on the line's centre. */
.timeline li::before{content:"";box-sizing:content-box;position:absolute;left:-12px;top:4px;width:15px;height:15px;border-radius:50%;background:var(--saffron);border:3px solid #fff;box-shadow:0 0 0 1px var(--saffron)}
.tl-date{display:block;font-weight:700;color:var(--saffron-dark);font-size:.9rem}
.tl-body{margin:.25em 0 0;color:var(--muted);overflow-wrap:anywhere}

/* ============================ Footer ============================ */
.site-footer{background:linear-gradient(180deg,var(--footer-top) 0%,var(--footer-bottom) 100%);color:#cdd9ec;margin-top:0}
.footer-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1.3fr;gap:40px;padding:54px 22px 36px}
.footer-h{color:#fff;font-size:1.05rem;margin:0 0 18px;padding-bottom:10px;border-bottom:2px solid var(--saffron);display:inline-block}
.footer-col p{font-size:.92rem;line-height:1.65}
.footer-owned{color:#cdd9ec;font-size:.85rem;margin-top:14px}
.footer-list{list-style:none;padding:0;margin:0}
.footer-list li{margin:9px 0;line-height:1.45}
.footer-list a{color:#cdd9ec;text-decoration:none;font-size:.92rem}
.footer-list a:hover{color:#fff;text-decoration:underline}
/* Sitemap page links — high-contrast against the light card background */
.page-body .card .footer-list a{color:var(--navy);font-weight:600}
.page-body .card .footer-list a:hover,.page-body .card .footer-list a:focus-visible{color:var(--saffron-darker);text-decoration:underline}
html.dark-mode .page-body .card .footer-list a{color:#7eb3ff}
html.dark-mode .page-body .card .footer-list a:hover{color:#cdeef2}
.footer-inline{display:flex;flex-wrap:wrap;gap:4px 14px;margin-top:12px}

/* Contact-with-icons block (under "Owned by") */
.footer-contact{list-style:none;padding:0;margin:14px 0 0;display:flex;flex-direction:column;gap:10px}
.footer-contact li{display:flex;align-items:flex-start;gap:10px;color:#cdd9ec;font-size:.9rem;line-height:1.5}
.footer-contact svg{flex:0 0 auto;width:18px;height:18px;color:#cdeef2;margin-top:2px}
.footer-contact a{color:#cdd9ec;text-decoration:none}
.footer-contact a:hover,.footer-contact a:focus-visible{color:#fff;text-decoration:underline}

/* Social icons (replace text labels with light SVG glyphs) */
.social-list{list-style:none;display:flex;gap:10px;padding:0;margin:18px 0 0}
.social-list li{margin:0}
.social-list a{width:36px;height:36px;border-radius:50%;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.18);color:#fff;display:inline-flex;align-items:center;justify-content:center;text-decoration:none;transition:background .2s,border-color .2s,transform .15s}
.social-list a:hover,.social-list a:focus-visible{background:var(--saffron);border-color:var(--saffron);transform:translateY(-2px)}
.social-list svg{width:18px;height:18px;color:#fff;display:block}
.social-list .visually-hidden{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.ext-ico{color:var(--saffron)}
.wim{font-style:normal;font-size:.95rem;line-height:1.8;color:var(--ink)}
.wim a{color:var(--navy);font-weight:600;text-decoration:underline}
.wim a:hover,.wim a:focus-visible{color:var(--saffron-dark)}
/* Footer-only override (light text on dark navy) */
.site-footer .wim{color:#e3ebf5;line-height:1.7;font-size:.9rem}
.site-footer .wim a{color:#cdeef2;font-weight:600}
.site-footer .wim a:hover{color:#fff}
/* Contact-page card-style address blocks */
.page-body .wim{background:#fff;border:1px solid var(--line);border-radius:var(--radius-sm);padding:18px 22px;box-shadow:var(--shadow);color:var(--ink);margin:8px 0 18px}
.page-body .wim strong{color:var(--navy-deep);font-size:1.02rem;display:block;margin-bottom:6px}
html.dark-mode .page-body .wim{background:#1a2536;border-color:#283649;color:#e4ebf5}
html.dark-mode .page-body .wim strong{color:#fff}
html.dark-mode .page-body .wim a{color:#7eb3ff}
.social-list{list-style:none;display:flex;gap:14px;padding:0;margin:14px 0 0}
.social-list a{color:#cdd9ec;text-decoration:none;font-size:.9rem}
.social-list a:hover{color:#fff;text-decoration:underline}
/* Slim "All Policies" mini-row above the bottom copyright bar — keeps every mandatory policy directly linked in the footer without bloating the columns. */
.footer-policies-bar{background:var(--footer-policies);border-top:1px solid rgba(255,255,255,.07)}
.footer-policies-inner{max-width:var(--maxw);margin:0 auto;padding:12px 22px;display:flex;flex-wrap:wrap;align-items:center;gap:6px 14px;font-size:.74rem;line-height:1.6}
.footer-policies-inner .fp-label{color:#cdeef2;font-weight:700;text-transform:uppercase;letter-spacing:.08em;font-size:.72rem;flex:0 0 auto;padding-right:4px}
.footer-policies-inner a{color:#cdd9ec;text-decoration:none;padding:1px 0}
.footer-policies-inner a:hover,.footer-policies-inner a:focus-visible{color:#fff;text-decoration:underline}
.footer-policies-inner .fp-sep{color:rgba(255,255,255,.22);font-size:.7rem}
.footer-bottom{background:var(--footer-policies);border-top:1px solid rgba(255,255,255,.08)}
.footer-bottom-inner{padding:18px 22px;max-width:var(--maxw);margin:0 auto;font-size:.84rem;color:#cdd9ec}
.footer-bottom-inner p{margin:4px 0}
.footer-bottom a{color:#cdd9ec}
.admin-link{margin-left:.5rem;opacity:.7;text-decoration:underline}
.admin-link:hover{opacity:1}

/* ---- Back to top ---- Semi-transparent pill with arrow + label.
   Visible text label so the action is self-evident (was an icon-only round
   button before). Sits in the bottom-right stack with the a11y FAB. */
.back-to-top{position:fixed;right:10px;bottom:10px;width:52px;height:52px;border-radius:50%;border:1px solid rgba(255,255,255,.18);background:rgba(8,31,61,.8);color:#fff;cursor:pointer;box-shadow:0 6px 22px rgba(0,0,0,.32);z-index:150;display:flex;align-items:center;justify-content:center;padding:0;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);opacity:0;visibility:hidden;transform:translateY(8px);transition:opacity .3s ease,visibility .3s ease,transform .3s ease,background .2s,box-shadow .2s}
.back-to-top.show{opacity:1;visibility:visible;transform:none}
.back-to-top i{font-size:19px;line-height:1;color:#fff}
.back-to-top:hover,.back-to-top:focus-visible{background:rgba(125,64,6,.95);border-color:rgba(255,217,168,.45);transform:translateY(-3px);box-shadow:0 12px 30px rgba(0,0,0,.42);outline:none}
.back-to-top:hover i,.back-to-top:focus-visible i{color:#fff}

/* ============================ Accessibility menu (top-bar dropdown) ============================
   A pill in the top utility bar (styled like the Bhashini pill) opening a small
   dropdown that holds the accessibility controls — text size, high contrast, dark
   mode. Replaces the old floating FAB so the controls sit with the other
   header chrome. .a11y-wrap is the positioned anchor for its dropdown. */
.a11y-wrap{position:relative;display:inline-flex}
.a11y-toggle{align-items:center}
.a11y-toggle .bh-label{text-transform:none;letter-spacing:.02em}
/* Scoped to .a11y-ico so the caret (also a .svg-ico) keeps its small size. */
.a11y-toggle .a11y-ico{font-size:1.4em;display:inline-flex;align-items:center;line-height:1}
/* The accessibility pill's icon, label and caret are BLACK (on its white pill)
   — distinct from the Bhashini pill which keeps the brand/navy colour. */
.a11y-toggle,.a11y-toggle .a11y-ico,.a11y-toggle .bh-label,.a11y-toggle .bh-caret,.a11y-toggle .svg-ico{color:#000}
/* Flat hover (per request): white pill stays white/black on hover & when open —
   no teal-gradient background, no lift, no added shadow. */
.a11y-toggle:hover,.a11y-toggle:focus-visible,.a11y-toggle[aria-expanded="true"]{background:#fff;color:#000;transform:none;box-shadow:none}
.a11y-toggle:hover .a11y-ico,.a11y-toggle:focus-visible .a11y-ico,.a11y-toggle[aria-expanded="true"] .a11y-ico,.a11y-toggle:hover .bh-label,.a11y-toggle:focus-visible .bh-label,.a11y-toggle:hover .bh-caret,.a11y-toggle:focus-visible .bh-caret,.a11y-toggle:hover .svg-ico,.a11y-toggle:focus-visible .svg-ico,.a11y-toggle[aria-expanded="true"] .svg-ico{color:#000}

/* Dropdown panel: a small card hanging below the pill (caret arrow + soft
   shadow), anchored to .a11y-wrap. */
.a11y-panel{position:absolute;top:calc(100% + 9px);right:0;width:268px;max-width:calc(100vw - 28px);max-height:calc(100vh - 120px);overflow-y:auto;background:#fff;border:1px solid var(--line);border-radius:12px;box-shadow:0 14px 38px rgba(11,31,59,.24);padding:14px;z-index:300;display:none;color:var(--ink)}
.a11y-panel::before{content:"";position:absolute;top:-6px;right:22px;width:12px;height:12px;background:#fff;border-left:1px solid var(--line);border-top:1px solid var(--line);transform:rotate(45deg)}
.a11y-panel.open{display:block}
.a11y-menu-head{padding:2px 2px 8px;font-size:11px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--muted);border-bottom:1px solid var(--line);margin:0 0 6px}
.a11y-panel-head{display:flex;justify-content:space-between;align-items:center;margin:0 0 4px;border-bottom:1px solid var(--line);padding:0 0 10px}
.a11y-panel-head h3{margin:0;font-size:1rem;color:var(--navy-deep);font-weight:700;letter-spacing:-.01em}
.a11y-panel-close{background:transparent;border:0;font-size:1.4rem;line-height:1;cursor:pointer;color:var(--muted);width:36px;height:36px;display:inline-flex;align-items:center;justify-content:center;padding:0;font-weight:300;border-radius:6px;flex:0 0 auto}
.a11y-panel-close:hover,.a11y-panel-close:focus-visible{color:var(--navy-deep);outline:none}
.a11y-group{margin:14px 0 0;display:block}
/* Dropdown text uses ABSOLUTE px (not rem/em) so the A−/A/A+ control scales the
   PAGE content but never the accessibility menu's own labels/buttons. */
.a11y-group-label{display:block;font-size:11.5px;text-transform:uppercase;letter-spacing:.08em;font-weight:700;color:var(--saffron-darker);margin:0 0 8px}
.a11y-group .font-controls{display:flex;gap:8px;width:100%}
.a11y-panel .font-btn{flex:1 1 0;min-width:0;background:var(--bg);color:var(--navy-deep);border:1px solid var(--line);height:44px;border-radius:9px;font-weight:700;font-size:16px;cursor:pointer;transition:background .15s,border-color .15s}
.a11y-panel .font-btn:hover,.a11y-panel .font-btn:focus-visible{background:var(--bg-alt);border-color:var(--saffron);outline:none}
.a11y-panel .font-btn[data-font="reset"]{background:var(--saffron-darker);color:#fff;border-color:var(--saffron-darker)}
.a11y-panel .font-btn[data-font="reset"]:hover{background:#5e3005}
.a11y-panel .dark-btn{background:var(--bg);color:var(--navy-deep);border:0;padding:11px 14px;border-radius:8px;font-weight:700;width:100%;text-align:left;display:flex;align-items:center;gap:10px;cursor:pointer;margin:0 0 8px;font-family:inherit;font-size:14.5px;transition:background .15s,color .15s}
.a11y-panel .dark-btn:hover,.a11y-panel .dark-btn:focus-visible{background:var(--bg-alt);color:var(--navy-deep);outline:none}
.a11y-panel .dark-btn[aria-pressed="true"]{background:var(--navy-deep);color:#fff}
.a11y-panel .dark-btn::before{font-size:17px;line-height:1;width:18px;text-align:center;flex:0 0 auto}
.a11y-panel .dark-btn::before{content:"\263E"}
.a11y-panel .bhashini-toggle{width:100%;height:44px;background:linear-gradient(135deg,var(--saffron) 0%,var(--saffron-darker) 100%);color:#fff;font-size:.92rem;letter-spacing:.05em;text-transform:uppercase;padding:0 16px;justify-content:flex-start;gap:12px;font-family:inherit;border:0;cursor:pointer;border-radius:8px;display:flex;align-items:center;font-weight:700}
.a11y-panel .bhashini-toggle::before{content:"अA";color:#fff;font-family:"Noto Sans Devanagari","Segoe UI",sans-serif;font-weight:700;font-size:1.05rem;text-transform:none}
.a11y-panel .bhashini-toggle::after{content:"Translate";font-family:inherit}
.a11y-panel .bhashini-menu{position:static;display:none;margin-top:10px;width:100%;box-shadow:none;border:1px solid var(--line);max-width:none;left:auto;right:auto;transform:none;bottom:auto;padding:6px;border-radius:8px;background:#fff}
.a11y-panel .bhashini-menu.open{display:block}
.a11y-panel .bhashini-menu button{display:block;width:100%;padding:9px 12px;background:transparent;border:0;color:var(--ink);font-weight:600;cursor:pointer;border-radius:6px;text-align:left;font-family:inherit;font-size:.92rem}
.a11y-panel .bhashini-menu button:hover,.a11y-panel .bhashini-menu button[aria-pressed="true"]{background:var(--bg);color:var(--navy)}

/* Top bar shows the Bhashini launcher + the Accessibility pill on the right; the
   LEGACY font-size / contrast / dark / language controls are hidden. Scope the
   hide to DIRECT children of .util-right only — otherwise it also hits the
   identical .font-controls that live inside the accessibility dropdown
   (.a11y-panel), which is itself nested in .util-right. */
.util-right{display:flex}
.util-right > .font-controls,
.util-right > #dark-toggle,
.util-right > .lang-select-wrap{display:none}

/* Dark-mode styling for the FAB panel */
html.dark-mode .a11y-panel{background:#1a2536;color:#e4ebf5;border:1px solid #283649}
html.dark-mode .a11y-panel::before{background:#1a2536;border-color:#283649}
html.dark-mode .a11y-menu-head{color:#a6b4c8;border-bottom-color:#283649}
html.dark-mode .a11y-panel-head{border-bottom-color:#283649}
html.dark-mode .a11y-panel-head h3{color:#fff}
html.dark-mode .a11y-panel-close{color:#a6b4c8}
html.dark-mode .a11y-panel-close:hover{color:#fff}
html.dark-mode .a11y-panel .font-controls{background:#0e1622}
html.dark-mode .a11y-panel .font-btn{color:#e4ebf5}
html.dark-mode .a11y-panel .font-btn:hover{background:#22324a}
html.dark-mode .a11y-panel .dark-btn{background:#0e1622;color:#e4ebf5}
html.dark-mode .a11y-panel .dark-btn:hover{background:#22324a}
html.dark-mode .a11y-panel .bhashini-menu{background:#0e1622;border-color:#283649}
html.dark-mode .a11y-panel .bhashini-menu button{color:#e4ebf5}
html.dark-mode .a11y-panel .bhashini-menu button:hover,html.dark-mode .a11y-panel .bhashini-menu button[aria-pressed="true"]{background:#22324a;color:#fff}

@media (max-width:600px){
  .a11y-toggle .bh-label{display:none}
  .a11y-panel{width:248px;right:0;left:auto}
  .back-to-top{right:10px;bottom:10px;width:48px;height:48px}
}

/* ====== Accessibility-bar lock (keeps the util bar fixed under dark mode) ====== */
html.dark-mode .util-bar{background:linear-gradient(180deg,var(--navy-deep) 0%,#04222a 100%);color:#cfdbe9;border-bottom-color:rgba(255,255,255,.06)}
html.dark-mode .util-bar a,
html.dark-mode .util-bar .dark-btn,
html.dark-mode .util-bar .font-btn{color:#cfdbe9}
html.dark-mode .util-bar a:hover{color:#fff}
html.dark-mode .util-bar .util-nav .util-item::before{color:#cdeef2}
html.dark-mode .util-bar .bhashini-toggle{background:linear-gradient(135deg,#fff 0%,#f4ede1 100%);color:var(--navy-deep)}
html.dark-mode .util-bar .bhashini-toggle::before{color:var(--saffron-darker)}
html.dark-mode .util-bar .font-btn[data-font="reset"]{background:var(--saffron-darker);color:#fff}

/* ============================ Dark mode (full theme) ============================ */
html.dark-mode body{background:#0e1622;color:#e4ebf5}
html.dark-mode .masthead{background:#16202e;border-bottom-color:#22324a}
html.dark-mode .brand-title{color:#fff}
html.dark-mode .brand-sub{color:#a6b4c8}
html.dark-mode .mainnav{background:#0a1220;box-shadow:0 2px 12px rgba(0,0,0,.4)}
html.dark-mode .util-bar{background:#0a1220;border-bottom-color:#1e293b}
html.dark-mode .latest-ticker{background:#0a1220}
html.dark-mode h1,html.dark-mode h2,html.dark-mode h3,html.dark-mode h4{color:#f0f4fa}
html.dark-mode a{color:#7eb3ff}
html.dark-mode .section{background:transparent}
html.dark-mode .section-alt{background:#16202e}
html.dark-mode .card{background:#1a2536;border-color:#283649;box-shadow:0 2px 8px rgba(0,0,0,.35);color:#e4ebf5}
html.dark-mode .card h3{color:#f0f4fa}
html.dark-mode .card-meta,html.dark-mode .lead,html.dark-mode .prose p{color:#a6b4c8}
html.dark-mode .lead{color:#c4cfde}
html.dark-mode .cm-section{background:linear-gradient(135deg,#16202e,#1a2536)}
html.dark-mode .cm-quote{color:#f0f4fa}
html.dark-mode .cm-name{color:#f5b97a}
html.dark-mode .cm-photo-img{border-color:#283649}
html.dark-mode .timeline-band{background:#16202e}
html.dark-mode .tb-img{border-color:#283649}
html.dark-mode .tl-period{color:#f5b97a}
html.dark-mode .stats-icons .stat{background:linear-gradient(160deg,#162133,#0e1622);border:1px solid #283649}
html.dark-mode .bearer-photo{border-color:#283649}
html.dark-mode .bearer-role{color:#7eb3ff}
html.dark-mode .bearer-name{color:#a6b4c8}
html.dark-mode .data-table{background:#1a2536;color:#e4ebf5}
html.dark-mode .data-table th,html.dark-mode .data-table td{border-color:#283649}
html.dark-mode .data-table thead th{background:#0a1220}
html.dark-mode .data-table tbody th[scope="row"]{background:#16202e}
html.dark-mode .data-table tbody tr:nth-child(even) td{background:#16202e}
html.dark-mode .partner-band,html.dark-mode .logo-marquee{background:#16202e;border-color:#22324a}
html.dark-mode .logo-marquee::before{background:linear-gradient(90deg,#16202e,rgba(22,32,46,0))}
html.dark-mode .logo-marquee::after{background:linear-gradient(270deg,#16202e,rgba(22,32,46,0))}
html.dark-mode .lm-item{background:#1a2536;border-color:#283649}
html.dark-mode .lm-item .lm-label{color:#e4ebf5}
html.dark-mode .lm-title{color:#a6b4c8}
html.dark-mode .partner-list img{filter:grayscale(.4) brightness(1.1)}
html.dark-mode .form-field input,html.dark-mode .form-field textarea,html.dark-mode .form-field select{background:#1a2536;color:#e4ebf5;border-color:#283649}
html.dark-mode .form-field input::placeholder,html.dark-mode .form-field textarea::placeholder{color:#7a8aa0}
html.dark-mode .region-tablist button{background:#1a2536;color:#e4ebf5;border-color:#283649}
html.dark-mode .region-tablist button:hover{background:#22324a;color:#fff}
html.dark-mode .region-tablist button[aria-selected="true"]{background:#0a1220;color:#fff;border-color:#0a1220}
html.dark-mode .region-panels{background:#1a2536;border-color:#283649}
html.dark-mode .region-panel table{color:#e4ebf5}
html.dark-mode .region-panel th,html.dark-mode .region-panel td{border-color:#283649}
html.dark-mode .region-panel thead th{background:#0a1220;color:#e4ebf5}
html.dark-mode .region-panel .panel-meta{background:#16202e;color:#a6b4c8;border-color:#283649}
html.dark-mode .region-panel tbody tr:hover td{background:#22324a}
html.dark-mode .region-panel td.contact a{color:#7eb3ff}
html.dark-mode .region-filter input{background:#1a2536;color:#e4ebf5;border-color:#283649}
html.dark-mode .region-filter .filter-meta{color:#a6b4c8}
html.dark-mode .si-col{background:#1a2536;border-color:#283649}
html.dark-mode .si-col-foot{background:#16202e;border-color:#283649}
html.dark-mode .si-col-body th,html.dark-mode .si-col-body td{border-color:#283649}
html.dark-mode .si-col-body thead th{background:#16202e;color:#e4ebf5}
html.dark-mode .si-col-body tbody tr:hover td{background:#22324a}
html.dark-mode .nav-search input{background:rgba(255,255,255,.06)}
html.dark-mode .bhashini-toggle{background:#f0f4fa}
html.dark-mode .bhashini-menu{background:#1a2536;color:#e4ebf5}
html.dark-mode .bhashini-menu button{color:#e4ebf5}
html.dark-mode .bhashini-menu button:hover,html.dark-mode .bhashini-menu button[aria-pressed="true"]{background:#22324a;color:#fff}
html.dark-mode .bearer-featured{background:#1a2536;border-color:#283649}

/* Dark-mode toggle button (sits next to Contrast in util bar) */
.dark-btn{background:transparent;border:0;cursor:pointer;color:#cfdbe9;padding:4px 10px;font-weight:500;display:inline-flex;align-items:center;gap:6px;font-size:.86em}
.dark-btn .svg-ico{font-size:1.05em}
.dark-btn .ico-sun{display:none}
.dark-btn:hover{color:#fff}
.dark-btn[aria-pressed="true"]{color:#fff}
.dark-btn[aria-pressed="true"] .ico-moon{display:none}
.dark-btn[aria-pressed="true"] .ico-sun{display:inline-flex;color:var(--saffron)}

/* ============================ Responsive ============================ */
/* Always-on safety: keep the goal-card number circle from overlapping the
   title text, regardless of other .card padding overrides further down. */
.card.goal-card{padding-left:64px}

@media (max-width:980px){
  .grid-3,.grid-4{grid-template-columns:repeat(2,1fr)}
  .footer-grid{grid-template-columns:repeat(2,1fr)}
  .cm-grid,.timeline-band .cm-grid{grid-template-columns:1fr;gap:22px}
  .cm-photo-img,.cm-photo,.tb-img{max-width:340px}
  .masthead-meta{display:none}
  .stay-informed-grid{grid-template-columns:1fr}
  .bearer-featured{grid-template-columns:1fr;text-align:center}
  .bearer-featured .bearer-photo{margin:0 auto}
  .footer-bottom-bar{flex-direction:column;align-items:flex-start;text-align:left;flex-wrap:wrap}
  .footer-bottom-bar .fb-right{text-align:left;flex-direction:column;align-items:flex-start;gap:2px;white-space:normal}
}
@media (max-width:1200px){
   .nav-link{padding:13px 9px;font-size:calc(var(--nav-fs,16px) * 0.82)}
  .nav-search input{width:150px}
}
@media (max-width:1024px){
   .nav-link{padding:12px 7px;font-size:calc(var(--nav-fs,16px) * 0.78)}
  .nav-search input{width:120px;font-size:.8rem;padding:7px 10px}
  .nav-search button{padding:0 12px;font-size:.8rem}
  .nav-search{margin:8px 0}
  .mainnav>.container{gap:8px;padding:0 14px}
}
/* ------ Tablet nav breakpoint: switch to hamburger early so the search bar
   and menu links don't get squeezed in the 760–1024 range. ------ */
@media (max-width:900px){
  /* Drop sticky on mobile so the open menu (which can be taller than the
     viewport) is reachable by normal page scroll instead of being clipped. */
  .mainnav{position:relative;top:auto}
  .nav-toggle{display:flex}
  .mainnav>.container{flex-direction:column;align-items:stretch;padding:0;flex-wrap:wrap;gap:0}
  .nav-menu{display:none;flex-direction:column;width:100%;padding:6px 0}
  .nav-menu.open{display:flex}
  .nav-search{margin:10px 18px 14px;width:calc(100% - 36px);height:auto}
  .nav-search input{flex:1;width:auto;font-size:.95rem;padding:10px 14px;height:42px}
  .nav-search button{padding:0 20px;font-size:.95rem;height:42px}
  /* Stack nav items vertically; submenus drop BELOW (not sideways) */
   .nav-item{width:100%;display:block;position:static}
   .nav-link{width:100%;padding:13px 22px;border-bottom:1px solid rgba(255,255,255,.1);font-size:calc(var(--nav-fs,16px) * 0.92);white-space:normal}
  .nav-link.is-current{border-bottom-color:transparent}
  .submenu{position:static;box-shadow:none;border-top:0;background:rgba(0,0,0,.18);border-radius:0;padding:0;min-width:0;width:100%;max-height:none;overflow-y:visible}
  .nav-item.has-children:hover > .submenu{display:none}
  .nav-item.has-children .submenu.open,
  .nav-item.has-children.open > .submenu{display:block}
  .has-flyout.open > .submenu-flyout{display:block}
  .submenu-flyout{background:rgba(0,0,0,.16)}
  .nav-subparent{color:#fff;padding:11px 34px}
  .submenu-flyout .nav-sublink{padding-left:48px}
  .nav-sublink{color:#fff;padding:11px 34px}
  .nav-sublink:hover{background:rgba(255,255,255,.12);color:#fff}
  .submenu .dl-link{padding:9px 34px;color:#fff}
  /* Mobile contrast fix: on the dark-orange menu, the desktop saffron-dark
     group header and the muted "(PDF, 2 KB)" meta text both fail WCAG.
     Override to high-contrast colours on the mobile menu only. */
  .submenu-group{padding:10px 34px 4px;border-top-color:rgba(255,255,255,.18)}
  .submenu-group-h{color:#cdeef2;font-size:.74em}
  .submenu .dl-link .dl-meta{color:rgba(255,255,255,.82);font-weight:600}
  .submenu .dl-link::after{background:#fff;color:var(--navy-deep)}
  .submenu .dl-link:hover::after,.submenu .dl-link:focus-visible::after{background:#cdeef2;color:var(--navy-deep)}
  .nav-sublink.is-current{color:#cdeef2}
}
@media (max-width:760px){
  body{font-size:16px}
  .container{padding:0 22px}
  .section{padding:36px 0}
  .section-counters{padding:36px 0}
  /* CM section stacks photo above quote on mobile */
  .cm-section{padding:42px 0}
  .cm-section .cm-photo,.cm-section .cm-photo-img{max-width:260px;margin:0 auto 8px}
  .cm-section .cm-quote{padding:30px 16px 36px 16px;font-size:1.02rem;line-height:1.7}
  .cm-section .cm-quote::before{font-size:5rem;top:-6px;left:-4px}
  .cm-section .cm-quote::after{font-size:5rem;bottom:-26px;right:8px}
  .cm-section .cm-name{font-size:1.2rem;text-align:center}
  .cm-section .card-meta{text-align:center}
  /* Timeline maroon band stacks image + text */
  .timeline-band{padding:46px 0}
  .timeline-band .cm-grid{grid-template-columns:1fr;gap:24px}
  .timeline-band h2{font-size:1.55rem;text-align:center}
  .timeline-band .tl-period{text-align:center}
  .timeline-band p:has(.dl-link){text-align:center}
  .tb-img{max-width:300px;margin:0 auto}
  /* Event card text/CTA pill scales down */
  .event-card h3{font-size:1rem;margin:14px 0 4px}
  .event-card .card-meta{font-size:.74rem}
  .event-card > p{font-size:.88rem;margin:0 0 14px}
  .event-card .read-msg{font-size:.72rem;padding:7px 14px;margin:auto 18px 18px}
  /* Office bearer card sizes scale */
  .bearer-card{padding:24px 16px}
  .bearer-photo{width:130px;height:130px}
  .bearer-role{font-size:.95rem}
  .bearer-name{font-size:.86rem}
  /* Modernized section heading on mobile */
  .section h2{font-size:1.5rem;margin-bottom:22px;padding-bottom:10px}
  .section h2::after{width:54px;height:3px}
  /* Government Portals pills tighter */
  .gov-portals{padding:30px 0}
  .gov-portal-pill{padding:9px 14px;font-size:.82rem}
  .gov-portals-title{font-size:.82rem;letter-spacing:.12em}
  /* Footer columns stack to 1 column */
  .footer-grid{grid-template-columns:1fr;padding:34px 16px 24px;gap:30px}
  .footer-policies-inner{padding:10px 16px}
  /* Page banner tightens */
  .page-banner{padding:0}
  .breadcrumb ol{font-size:.82rem}}
@media (max-width:760px){
  /* Nav rules now live at the 900px breakpoint above. */
  .stats,.grid-2,.grid-3,.grid-4{grid-template-columns:1fr}
  /* Masthead — keep brand title legible and prevent the emblems from pushing
     the title into an awkward 2-line ellipsis on narrow screens. */
  .masthead-inner{flex-direction:column;align-items:stretch;gap:14px;padding:18px 18px}
  .brand{gap:12px;margin-right:0;flex:0 0 auto;min-width:0}
  .brand-logo{width:54px;height:54px}
  .brand-text{min-width:0}
  .brand-title{font-size:1.15em;line-height:1.15}
  .brand-sub{font-size:.78em;line-height:1.3}
  .masthead-emblems{width:100%;justify-content:center;gap:22px;flex:0 0 auto;padding-top:13px;border-top:1px solid var(--line)}
  .masthead-emblems .emblem{height:44px}
  .page-title{font-size:1.55rem}
  .slider-pause{display:none}
  /* Bhashini popover: keep it anchored directly under the Translate button on
     small screens too (util-right stays right-aligned, so right:0 keeps the
     menu on-screen). Drops down where the user clicks, instead of jumping to
     the bottom of the viewport. */
  .util-right{flex-wrap:wrap;justify-content:flex-end;row-gap:6px}
  .bhashini-menu{position:absolute;top:100%;bottom:auto;right:0;left:auto;transform:none;margin-top:6px;min-width:200px;max-width:calc(100vw - 28px);z-index:1000;box-shadow:0 10px 30px rgba(0,0,0,.35)}
}
@media (max-width:420px){
  .partner-list img{height:48px}
  .container{padding:0 18px}
  body{font-size:15px}
  .page-title{font-size:1.35rem}
  .section h2{font-size:1.35rem}
  .section{padding:34px 0}
  .util-inner{padding:8px 12px}
  .util-nav .util-item{padding:4px 9px;font-size:.74rem}
  .util-nav .util-item:first-child{font-size:.7rem}
  .util-right{gap:6px}
  .bhashini-toggle{height:34px;padding:0 12px}
  .font-btn{width:26px;height:24px;font-size:.78rem}
  .dark-btn{padding:3px 5px;font-size:.74rem}
  .dark-btn::before{font-size:.85rem}
  .masthead-inner{padding:18px 14px;gap:14px}
  .brand{gap:12px}
  .brand-logo{width:54px;height:54px}
  .brand-title{font-size:1.4em}
  .brand-sub{font-size:.78em}
  .masthead-emblems{gap:10px}
  .masthead-emblems .emblem{height:46px}
  .latest-ticker-inner{padding:0 12px;min-height:42px}
  .latest-badge{padding:6px 14px 6px 22px;font-size:.74rem;margin-right:10px}
  .latest-badge::before{left:9px;font-size:.6rem}
  .latest-item{padding:0 16px;font-size:.82rem}
  .latest-pause{margin-left:8px}
  .cm-grid,.timeline-band .cm-grid{gap:18px}
  .cm-section{padding:36px 0}
  .cm-section .cm-quote{font-size:1.05rem;line-height:1.6}
  .cm-section .cm-name{font-size:1.25rem}
  .timeline-band{padding:36px 0}
  .timeline-band h2{font-size:1.55rem}
  .tl-period{font-size:1rem}
  .stat .num{font-size:1.7rem}
  .stat .num-suffix{font-size:1.3rem}
  .stat .stat-icon{width:42px;height:42px}
  .footer-grid{padding:32px 14px 20px;gap:22px}
  .footer-bottom-bar{padding:14px;font-size:.78rem}
  .lm-item{min-width:160px;padding:10px 16px}
  .lm-item img{height:42px}
  .lm-item .lm-label{font-size:.74rem}
  .region-tablist button{padding:8px 12px;font-size:.82rem}
  .region-panel th,.region-panel td{padding:6px 8px;font-size:.8rem}
  .video-meta{padding:12px 14px}
  .video-meta h3{font-size:.92rem}
  .video-play{width:50px;height:50px;font-size:1.1rem}
  .breadcrumb ol{font-size:.78rem}
  .data-table th,.data-table td{padding:8px 10px;font-size:.85rem}
  .form-field input,.form-field textarea,.form-field select{font-size:.95rem}
  .bearer-photo{max-width:140px}
  .grid{gap:14px}
  .card{padding:18px 16px}
  .btn{padding:10px 18px;font-size:.92rem}
}
@media (max-width:360px){
  .container{padding:0 14px}
  .util-bar{font-size:11px}/* px (not rem) so the A-/A/A+ control never rescales the bar itself */
  .util-nav .util-item{padding:4px 7px}
  .brand-title{font-size:1.2em}
  .brand-sub{font-size:.72em}
  .masthead-emblems .emblem{height:38px}
  .page-title{font-size:1.2rem}
  .section h2{font-size:1.2rem}
  .cm-section .cm-quote{font-size:.98rem}
  .timeline-band h2{font-size:1.35rem}
  .stat{padding:18px 10px}
  .stat .num{font-size:1.4rem}
  .stats-icons{gap:12px}
  .lm-item{min-width:140px;padding:8px 12px}
  .lm-item img{height:36px}
  .video-meta h3{font-size:.88rem}
  .nav-search input{font-size:.78rem;padding:6px 8px}
  .nav-search button{padding:0 10px;font-size:.78rem}
  .footer-bottom-bar{padding:12px;font-size:.74rem}
  .latest-badge{padding:5px 10px 5px 18px;font-size:.7rem}
  .latest-item{font-size:.78rem;padding:0 12px}
}
/* Reflow guarantee — no element forces horizontal scroll.
   Scope min-width:0 to common layout containers so flex children of marquees
   (logo marquee + LATEST ticker) keep their natural widths. */
main, section, article, header, footer, nav, aside, div, p, h1, h2, h3, h4{min-width:0}
img,video,iframe{max-width:100%}
pre,code{overflow-x:auto;white-space:pre-wrap;word-break:break-word}
/* Force marquee/ticker children to keep their content width, but stay clipped
   inside their overflow:hidden parent so they never push the page width. */
.logo-marquee,.latest-ticker,.latest-feed{max-width:100%;overflow:hidden}
.lm-track,.latest-track{width:max-content;max-width:none}
.lm-item,.latest-item{flex:0 0 auto;min-width:max-content}
/* Body-level guard against horizontal scroll (scoped, doesn't clip slider/hero) */
body{overflow-x:clip}
@supports not (overflow:clip){
  body{overflow-x:hidden}
}
.region-panel table,.si-col-body table{display:block}
/* On phones the standard data-tables stay as real tables and scroll
   horizontally inside .table-wrap (text alignment stays uniform). The
   searchable region / column panels still stack into labelled cards. */
@media (max-width:640px){
  .table-wrap{border:1px solid var(--line);border-radius:var(--radius-sm);background:#fff}
  .data-table{box-shadow:none;border-radius:0}
  /* each column keeps a readable floor; total width (and scroll) scales with
     the column count — 2-col tables fit, wide tables scroll instead of cramming */
  .data-table th,.data-table td{min-width:120px}
  .data-table tbody th[scope="row"]{width:auto}
  /* Wide tables flagged .stack-sm become labelled cards on phones (no cramped scroll) */
  .table-wrap:has(.data-table.stack-sm){border:0;background:transparent;overflow:visible}
  .data-table.stack-sm{min-width:0;box-shadow:none}
  .data-table.stack-sm thead{display:none}
  .data-table.stack-sm,.data-table.stack-sm tbody,.data-table.stack-sm tr,.data-table.stack-sm td{display:block;width:100%}
  .data-table.stack-sm tr{margin:0 0 12px;border:1px solid var(--line);border-radius:var(--radius-sm);background:#fff;padding:2px 14px}
  .data-table.stack-sm td{display:flex;gap:12px;border:0;border-bottom:1px solid #eef2f7;padding:9px 0;font-size:.9rem;text-align:left;min-width:0!important}
  .data-table.stack-sm td:last-child{border-bottom:0}
  .data-table.stack-sm td::before{content:attr(data-label);flex:0 0 46%;font-weight:700;color:var(--navy-dark);font-size:.82rem}
  .data-table.stack-sm tbody tr:nth-child(even) td{background:transparent}
  html.dark-mode .data-table.stack-sm tr{background:#1a2536}
  html.dark-mode .data-table.stack-sm td{border-bottom-color:#283649}
  .region-panel thead,.si-col-body thead{display:none}
  .region-panel tbody,.si-col-body tbody{display:block}
  .region-panel tr,.si-col-body tr{display:block;margin:0 0 14px;background:#fff;border:1px solid var(--line);border-radius:var(--radius-sm);padding:10px 14px}
  .region-panel td,.si-col-body td{display:flex;gap:10px;border:0;border-bottom:1px solid #eef2f7;padding:7px 0;font-size:.9rem;text-align:left;width:auto!important}
  .region-panel td::before,.si-col-body td::before{content:attr(data-label);flex:0 0 42%;font-weight:700;color:var(--navy-dark);font-size:.82rem}
  html.dark-mode .region-panel tr,html.dark-mode .si-col-body tr{background:#1a2536}
  html.dark-mode .table-wrap{border-color:#283649;background:#1a2536}
}
@media print{
  .util-bar,.mainnav,.slider-controls,.back-to-top,.partner-band{display:none}
  body{background:#fff}
}
@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important;scroll-behavior:auto!important}
}

/* ---- Gallery grid + lightbox (template addition) ---- */
/* Per-activity album: a titled block followed by that activity's photo grid */
.gallery-album{margin:0 0 34px;padding:0 0 6px;border-bottom:1px solid var(--line);scroll-margin-top:140px}
.gallery-album:last-child{border-bottom:0}
.gallery-album-title{font-size:1.18rem;color:var(--navy-deep);margin:24px 0 4px;padding-left:14px;border-left:5px solid var(--saffron);line-height:1.35}
.gallery-album-desc{color:var(--navy-deep);padding-left:14px;margin:0 0 6px;line-height:1.5}
.gallery-album-desc ul,.gallery-album-desc ol{margin:6px 0;padding-left:28px}
.gallery-album-desc li{margin:3px 0}
/* News (press release / print media): captioned image cards */
.news-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:18px;margin:18px 0}
.news-figure{margin:0;background:#fff;border:1px solid var(--line);border-radius:var(--radius-sm);overflow:hidden;box-shadow:var(--shadow);display:flex;flex-direction:column}
.news-figure .gallery-tile{aspect-ratio:4/3;border-radius:0;width:100%}
.news-figure figcaption{padding:10px 12px;font-size:.86rem;color:var(--ink);line-height:1.4}
.gallery-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:8px;margin:18px 0}
.gallery-tile{padding:0;border:0;background:none;cursor:pointer;aspect-ratio:1/1;overflow:hidden;border-radius:8px}
.gallery-tile img{width:100%;height:100%;object-fit:cover;transition:transform .25s}
.gallery-tile:hover img{transform:scale(1.06)}
/* Print / media coverage — framed newspaper clippings with breathing room */
.media-grid{grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:22px;margin:24px 0}
/* Image fills the whole tile edge-to-edge (no white side framing); hover is a clean
   lift + shadow rather than a hard coloured border. */
.media-grid .gallery-tile{aspect-ratio:3/4;background:#fff;border:1px solid var(--line);border-radius:12px;padding:0;overflow:hidden;box-shadow:0 2px 10px rgba(13,44,84,.08);transition:transform .2s ease,box-shadow .2s ease}
.media-grid .gallery-tile img{width:100%;height:100%;object-fit:cover;border-radius:11px}
.media-grid .gallery-tile:hover,.media-grid .gallery-tile:focus-visible{transform:translateY(-4px);box-shadow:0 12px 26px rgba(13,44,84,.18);outline:none}
@media (max-width:600px){.media-grid{grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:14px}}
html.dark-mode .media-grid .gallery-tile{background:#1a2536;border-color:#283649}
.img-lightbox{position:fixed;inset:0;z-index:1000;background:rgba(8,16,30,.92);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);display:none;align-items:center;justify-content:center}
.img-lightbox[data-open="true"]{display:flex}
.img-lightbox figure{max-width:min(92vw,1000px);margin:0;text-align:center}
.img-lightbox img{max-height:78vh;width:auto;border-radius:8px}
.img-lightbox figcaption{color:#fff;margin-top:12px;font-size:.95rem}
.ilb-btn{position:absolute;background:rgba(255,255,255,.14);color:#fff;border:1px solid rgba(255,255,255,.5);border-radius:50%;width:52px;height:52px;font-size:1.5rem;cursor:pointer}
.ilb-close{top:20px;right:20px}.ilb-prev{left:18px;top:50%;transform:translateY(-50%)}.ilb-next{right:18px;top:50%;transform:translateY(-50%)}

/* ---- Generic manual scroll carousel (‹ › arrows, NO autoplay) ---- */
/* Wrap any row of cards/tiles in <div class="scroller" data-scroller> with a
   .scroller-track plus prev/next arrows. The track scrolls horizontally ONLY when an
   arrow is clicked (or by native swipe/drag) — it never auto-advances. main.js hides an
   arrow when the track can't scroll further that way, and hides both if nothing overflows. */
.scroller{position:relative;margin:18px 0}
.scroller-track{display:flex;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;padding:4px 2px 12px;scrollbar-width:none;-ms-overflow-style:none}
.scroller-track::-webkit-scrollbar{display:none;width:0;height:0}
.scroller-track>*{flex:0 0 auto;scroll-snap-align:start;margin:0}
.scroller-track>.gallery-tile{width:clamp(160px,22vw,220px)}
.scroller-track>.video-card{width:clamp(240px,30vw,320px)}
.scroller-track>.card{width:clamp(240px,30vw,320px);white-space:normal}
/* Filled, high-contrast arrow buttons so they read clearly over any photo/card row:
   solid navy disc, bold white chevron, white ring + strong shadow to lift them off the
   content. Saffron on hover/focus. Sit slightly outside the track edges. */
.scroller-arrow{position:absolute;top:50%;transform:translateY(-50%);z-index:4;width:52px;height:52px;border-radius:50%;border:3px solid #fff;background:var(--navy);font-size:0;line-height:0;cursor:pointer;display:flex;align-items:center;justify-content:center;box-shadow:0 4px 16px rgba(13,39,66,.45);transition:background .18s ease,transform .15s ease,box-shadow .18s ease}
.scroller-arrow::before{content:"";display:block;width:13px;height:13px;border-style:solid;border-color:#fff;border-width:3.5px 3.5px 0 0}
.scroller-prev{left:-6px}.scroller-prev::before{transform:rotate(-135deg);margin-left:4px}
.scroller-next{right:-6px}.scroller-next::before{transform:rotate(45deg);margin-right:4px}
.scroller-arrow:hover,.scroller-arrow:focus-visible{background:var(--saffron);box-shadow:0 6px 20px rgba(13,39,66,.5);transform:translateY(-50%) scale(1.1);outline:none}
.scroller-arrow:active{transform:translateY(-50%) scale(.95)}
@media (max-width:600px){.scroller-arrow{width:44px;height:44px}.scroller-prev{left:2px}.scroller-next{right:2px}}
html.dark-mode .scroller-arrow{background:#000;border-color:var(--dm-yellow)}
html.dark-mode .scroller-arrow::before{border-color:var(--dm-yellow)}
html.dark-mode .scroller-arrow:hover,html.dark-mode .scroller-arrow:focus-visible{background:var(--dm-yellow)}
html.dark-mode .scroller-arrow:hover::before,html.dark-mode .scroller-arrow:focus-visible::before{border-color:#000}

/* ---- Vertical marquee (auto-scrolling notice list) ----
   A self-contained, titled box whose items scroll UP continuously and pause on hover /
   focus. Pure CSS (no JS): the item list is duplicated once so translateY(-50%) loops
   seamlessly. Completely independent of the horizontal .latest-ticker (different classes
   + keyframe) so the latest-news design is untouched. Honours reduced-motion. */
.v-marquee{border:1px solid var(--line);border-radius:var(--radius-sm);background:#fff;overflow:hidden;box-shadow:var(--shadow);width:100%}
.v-marquee-head{display:flex;align-items:center;gap:8px;background:var(--navy);color:#fff;font-weight:700;padding:11px 16px;font-size:.95rem;letter-spacing:.02em}
.v-marquee-head .svg-ico{font-size:.95em}
.v-marquee-title{flex:1 1 auto}
/* Pause/play toggle pinned to the right of the notice-board title bar. */
.v-marquee-pause{flex:0 0 auto;margin-left:auto;width:28px;height:28px;display:inline-flex;align-items:center;justify-content:center;border:1px solid rgba(255,255,255,.35);background:rgba(255,255,255,.12);color:#fff;border-radius:6px;cursor:pointer;padding:0;font-size:.8em;transition:background .15s,border-color .15s}
.v-marquee-pause:hover,.v-marquee-pause:focus-visible{background:rgba(255,255,255,.26);border-color:#fff;outline:none}
/* When paused via the button, stop the scroll (mirrors hover/focus pause). */
.v-marquee.paused .v-marquee-track{animation-play-state:paused}
/* Auto-scrollers pause while OFF-SCREEN (.sg-offscreen toggled by main.js's
   IntersectionObserver) so motion runs only when the component is in view. */
.sg-offscreen .latest-track,
.sg-offscreen .lm-track,
.sg-offscreen .v-marquee-track{animation-play-state:paused!important}
.v-marquee-viewport{position:relative;height:208px;overflow:hidden;-webkit-mask-image:linear-gradient(180deg,transparent 0,#000 12%,#000 88%,transparent 100%);mask-image:linear-gradient(180deg,transparent 0,#000 12%,#000 88%,transparent 100%)}
.v-marquee-track{list-style:none;margin:0;padding:0;animation:vmarquee-scroll 18s linear infinite;will-change:transform}
/* Auto-pause only while the NOTICES area is hovered/focused — NOT the head/pause
   button (it lives in the head), so clicking Play actually resumes the scroll. */
.v-marquee-viewport:hover .v-marquee-track,.v-marquee-viewport:focus-within .v-marquee-track{animation-play-state:paused}
.v-marquee-track li{padding:11px 16px;border-bottom:1px solid var(--line)}
.v-marquee-track li a{display:block;color:var(--navy-dark);text-decoration:none;font-size:.9rem;line-height:1.4}
.v-marquee-track li a:hover,.v-marquee-track li a:focus-visible{color:var(--saffron-dark);text-decoration:underline;outline:none}
@keyframes vmarquee-scroll{from{transform:translateY(0)}to{transform:translateY(-50%)}}
@media (prefers-reduced-motion:reduce){.v-marquee-track{animation:none}.v-marquee-viewport{height:auto;max-height:260px;overflow:auto;-webkit-mask-image:none;mask-image:none}}
html.dark-mode .v-marquee{background: #000;border-color:var(--dm-yellow)}
html.dark-mode .v-marquee-head{background:var(--dm-yellow);color:#000}
html.dark-mode .v-marquee-head .v-marquee-title{color:#000 !important}
html.dark-mode .v-marquee-pause{background:rgba(255,255,255,.12);border-color:rgba(0,0,0) !important;color:#000;}

html.dark-mode .v-marquee-track li{border-color:var(--dm-yellow)}
html.dark-mode .v-marquee-track li a{color:#e4ebf5}
html.dark-mode .v-marquee-track li a:hover,html.dark-mode .v-marquee-track li a:focus-visible{color:var(--dm-yellow)}

/* ===== Colour overrides (reference structure) ===== */
.mainnav{background:var(--nav-bar);box-shadow:none;border-bottom:0}
.latest-badge{background:transparent}
.timeline-band{background:linear-gradient(160deg,#1565c0,#0d47a1);color:#fff}
.timeline-band h2,.timeline-band .tl-period{color:#fff}
.cm-section{background:radial-gradient(circle at 28% 18%,#2f7fe0,#1565c0 45%,#0d47a1)}

/* ===== Donor honour wall — "top people slider" ===== */
/* "Salute to the courage" — light-blue band, centred blue title, framed portraits
   (green mat + gold ornate corners + cursive name) — modelled on the live site. */
.donor-salute{background:#dbeafc;padding:46px 0 52px}
.donor-salute-title{text-align:center;color:#1565c0;font-family:var(--font-display);font-weight:700;font-size:2rem;text-transform:capitalize;margin:0 0 8px;line-height:1.25}
.donor-salute-title::after{content:"";display:block;width:84px;height:4px;border-radius:3px;background:#1565c0;margin:14px auto 0}
/* Edge-to-edge auto-scrolling slider with arrows + pause; scrollbar hidden */
.donor-slider{position:relative;width:100%;margin-top:8px}
.donor-row{display:flex;align-items:flex-start;gap:26px;overflow-x:auto;scroll-behavior:auto;padding:30px clamp(20px,5vw,64px) 18px;scrollbar-width:none;-ms-overflow-style:none}
.donor-row::-webkit-scrollbar{display:none;width:0;height:0}
.donor-arrow{position:absolute;top:50%;transform:translateY(-50%);z-index:3;width:46px;height:46px;border-radius:50%;border:0;background:rgba(15,93,54,.92);color:#fff;font-size:0;line-height:0;cursor:pointer;display:flex;align-items:center;justify-content:center;box-shadow:0 4px 14px rgba(7,40,24,.4);transition:background .2s,transform .15s}
.donor-arrow:hover,.donor-arrow:focus-visible{background:#0a3f25;outline:none}
.donor-prev{left:10px}.donor-next{right:10px}
/* Pure-CSS chevrons (no font/glyph baseline offset) — matches .slider-arrow. */
.donor-arrow::before{content:"";display:inline-block;width:11px;height:11px;border-style:solid;border-color:currentColor;border-width:3px 3px 0 0}
.donor-prev::before{transform:rotate(-135deg);margin-left:4px}
.donor-next::before{transform:rotate(45deg);margin-right:4px}
.donor-pause{display:flex;align-items:center;justify-content:center;margin:8px auto 0;border:1px solid rgba(255,255,255,.45);background:rgba(15,93,54,.92);color:#fff;border-radius:50%;padding:0;width:34px;height:34px;font-size:.82rem;cursor:pointer}
.donor-pause::before{content:"\23F8";font-weight:normal;font-size:.9rem;line-height:1}
.donor-pause[aria-pressed="true"]::before{content:"\25B6"}
.donor-pause:hover{background:#0a3f25}
@media (max-width:600px){.donor-arrow{width:38px;height:38px}.donor-arrow::before{width:9px;height:9px;border-width:2.5px 2.5px 0 0}}
.donor-frame{flex:0 0 auto;width:212px;margin:0;scroll-snap-align:start;position:relative;padding:16px;border-radius:3px;
  /* dark-green mat with gold triangular corners */
  background:
    linear-gradient(135deg,#f3d98a 0 16px,transparent 16px) top left,
    linear-gradient(225deg,#f3d98a 0 16px,transparent 16px) top right,
    linear-gradient(45deg,#f3d98a 0 16px,transparent 16px) bottom left,
    linear-gradient(315deg,#f3d98a 0 16px,transparent 16px) bottom right,
    linear-gradient(145deg,#0f5d36,#0a3f25);
  background-repeat:no-repeat;background-size:34px 34px,34px 34px,34px 34px,34px 34px,auto;
  box-shadow:0 8px 20px rgba(7,40,24,.35)}
.donor-frame-photo{display:block;border:2px solid #d4af37;background:#fff;padding:3px;box-shadow:inset 0 0 0 1px rgba(0,0,0,.15)}
.donor-frame-photo img{display:block;width:100%;height:236px;object-fit:cover;object-position:top center}
.donor-name{margin:10px 4px 2px;text-align:center;color:#ffffff;font-family:"Snell Roundhand","Brush Script MT","Segoe Script",cursive;font-style:italic;font-size:1.4rem;line-height:1.2}
@media (max-width:600px){
  .donor-salute-title{font-size:1.45rem}
  .donor-frame{width:158px;padding:12px}
  .donor-frame-photo img{height:178px}
  .donor-name{font-size:1.15rem}
}

/* ----- Press-release article image carousel (manual arrows + lightbox) ----- */
.article-carousel{position:relative;margin:18px 0 28px}
.ac-track{display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;padding:0;scrollbar-width:none;-ms-overflow-style:none}
.ac-track::-webkit-scrollbar{display:none;width:0;height:0}
.ac-slide{flex:0 0 auto;width:clamp(210px,26%,280px);height:150px;scroll-snap-align:start;margin:0;padding:0;border:0;border-radius:10px;overflow:hidden;background:none;cursor:zoom-in;display:block;transition:transform .2s ease,box-shadow .2s ease}
.ac-slide:hover,.ac-slide:focus-visible{transform:translateY(-3px);box-shadow:0 10px 24px rgba(13,39,66,.28);outline:none}
.ac-slide img{display:block;width:100%;height:150px;object-fit:cover;object-position:center;border-radius:10px}
.ac-arrow{position:absolute;top:50%;transform:translateY(-50%);z-index:3;width:38px;height:38px;border-radius:50%;border:1px solid rgba(13,39,66,.10);background:#fff;font-size:0;line-height:0;cursor:pointer;display:flex;align-items:center;justify-content:center;box-shadow:0 2px 10px rgba(13,39,66,.25);transition:background .18s ease,transform .15s ease,box-shadow .18s ease}
.ac-arrow::before{content:"";display:block;width:8px;height:8px;border-style:solid;border-color:var(--navy);border-width:2.5px 2.5px 0 0;transition:border-color .18s ease}
.ac-prev::before{transform:rotate(-135deg);margin-left:3px}
.ac-next::before{transform:rotate(45deg);margin-right:3px}
.ac-arrow:hover,.ac-arrow:focus-visible{background:var(--navy);box-shadow:0 4px 14px rgba(13,39,66,.4);transform:translateY(-50%) scale(1.08);outline:none}
.ac-arrow:hover::before,.ac-arrow:focus-visible::before{border-color:#fff}
.ac-arrow:active{transform:translateY(-50%) scale(.95)}
.ac-prev{left:10px}.ac-next{right:10px}
.article-body{margin-top:8px}
.article-body p{margin:0 0 1.1em}
@media (max-width:600px){
  .ac-slide{width:74%}
  .ac-slide img{height:150px}
  .ac-arrow{width:36px;height:36px}
}

/* =====================================================================
   DARK MODE — true black surfaces · white text · yellow card borders
   and yellow hover/active/focus accents (high-contrast dark theme).
   Appended last so it overrides the earlier scattered dark-mode rules.
   ===================================================================== */
html.dark-mode body{--dm-yellow:#ffd23f;--ring:#ffd23f;background:#000;color:#fff}

/* 1 — every full-bleed band & page surface goes flat black (no coloured fills) */
html.dark-mode body,
html.dark-mode .util-bar,html.dark-mode .mainnav,html.dark-mode .hero,
html.dark-mode .latest-ticker,html.dark-mode .donor-salute,
html.dark-mode .section,html.dark-mode .section-alt,html.dark-mode .section-counters,
html.dark-mode .cm-section,html.dark-mode .msg-section,html.dark-mode .msg-page,
html.dark-mode .timeline-band,html.dark-mode .gov-portals,html.dark-mode .page-body,
html.dark-mode main,html.dark-mode .site-footer,html.dark-mode footer,
html.dark-mode .footer-bottom,html.dark-mode .all-policies-bar{
  background:#000 !important;background-image:none !important}

/* 2 — white text for ALL content and menus */
html.dark-mode body,html.dark-mode p,html.dark-mode li,html.dark-mode td,html.dark-mode th,
html.dark-mode span,html.dark-mode blockquote,html.dark-mode figcaption,html.dark-mode dd,
html.dark-mode dt,html.dark-mode label,html.dark-mode strong,html.dark-mode em,
html.dark-mode h1,html.dark-mode h2,html.dark-mode h3,html.dark-mode h4,html.dark-mode h5,html.dark-mode h6,
html.dark-mode .lead,html.dark-mode .card-meta,html.dark-mode .msg-name,html.dark-mode .msg-role,
html.dark-mode .msg-quote p,html.dark-mode .bearer-name,html.dark-mode .bearer-role,
html.dark-mode .donor-name,html.dark-mode .stat-card .lbl,html.dark-mode .stat-card .num,
html.dark-mode .person-role,html.dark-mode .msg-title,html.dark-mode .gallery-album-title,html.dark-mode .gallery-album-desc,
html.dark-mode .nav-link,html.dark-mode .nav-sublink,html.dark-mode .submenu-group-h,
html.dark-mode .util-bar a,html.dark-mode .util-item,html.dark-mode .breadcrumb,
html.dark-mode .breadcrumb a,html.dark-mode .breadcrumb [aria-current="page"]{color:#fff !important}

/* 3 — cards: black fill + yellow border */
html.dark-mode .card,html.dark-mode .event-card,html.dark-mode .msg-card,
html.dark-mode .person-card,html.dark-mode .stat-card,html.dark-mode .goal-card,
html.dark-mode .bearer-card,html.dark-mode .policy-section,html.dark-mode .faq-item,
html.dark-mode .page-body section.card,html.dark-mode .ext-int-box,html.dark-mode .video-card,
html.dark-mode .lm-item,html.dark-mode .submenu,html.dark-mode .gallery-album,
html.dark-mode .a11y-panel,html.dark-mode .bhashini-menu,html.dark-mode .donor-frame,
html.dark-mode table{
  background:#000 !important;border:1px solid var(--dm-yellow) !important;
  box-shadow:none !important;color:#fff}
html.dark-mode .gallery-album{border-width:0 0 1px 0 !important}   /* divider only, not a box */
html.dark-mode td,html.dark-mode th{border-color:#444 !important}

/* 4 — links, menus & buttons white by default; yellow on hover/active/focus */
html.dark-mode a{color:#fff}
html.dark-mode a:hover,html.dark-mode a:focus-visible,
html.dark-mode .nav-link:hover,html.dark-mode .nav-link:focus-visible,
html.dark-mode .nav-link.is-current,html.dark-mode .nav-parent[aria-expanded="true"],
html.dark-mode .nav-sublink:hover,html.dark-mode .nav-sublink:focus-visible,
html.dark-mode .nav-sublink.is-current,
html.dark-mode .util-item:hover,html.dark-mode .util-item:focus-visible,
html.dark-mode .read-msg:hover,html.dark-mode .read-msg:focus-visible,
html.dark-mode .breadcrumb a:hover,html.dark-mode .gov-portal-pill:hover{
  color:var(--dm-yellow) !important;background:transparent !important}
html.dark-mode .nav-link.is-current{border-bottom-color:transparent}

/* 5 — buttons & pills: black with yellow border; invert to yellow on hover */
html.dark-mode .btn,html.dark-mode .btn-navy,html.dark-mode .dl-btn,html.dark-mode .dl-link,
html.dark-mode .gov-portal-pill,html.dark-mode .slider-pause,html.dark-mode .latest-pause,
html.dark-mode .donor-pause,html.dark-mode .nav-toggle{
  background:#000 !important;border:1.5px solid var(--dm-yellow) !important;color:#fff !important}
html.dark-mode .btn:hover,html.dark-mode .btn-navy:hover,html.dark-mode .dl-btn:hover,
html.dark-mode .gov-portal-pill:hover,html.dark-mode .dl-link:hover{
  background:var(--dm-yellow) !important;color:#000 !important}

/* 6 — a11y panel & its toggle buttons (fixes the odd hover) */
html.dark-mode .a11y-panel button,html.dark-mode .font-btn,
html.dark-mode .dark-btn,html.dark-mode .bhashini-menu button{
  background:#000 !important;border:1px solid #555 !important;color:#fff !important}
html.dark-mode .a11y-panel button:hover,html.dark-mode .font-btn:hover,
html.dark-mode .dark-btn:hover,
html.dark-mode .bhashini-menu button:hover,
html.dark-mode .font-btn[aria-pressed="true"],html.dark-mode .font-btn.is-active,
html.dark-mode .dark-btn[aria-pressed="true"]{
  background:var(--dm-yellow) !important;border-color:var(--dm-yellow) !important;color:#000 !important}

/* 7 — accents & focus ring */
html.dark-mode .quote-mark,html.dark-mode .msg-quote::before,html.dark-mode .caret{color:var(--dm-yellow)}
html.dark-mode :focus-visible{outline:3px solid var(--dm-yellow) !important;outline-offset:2px}
html.dark-mode input,html.dark-mode select,html.dark-mode textarea{
  background:#000 !important;color:#fff !important;border:1px solid #777 !important}
html.dark-mode input::placeholder{color:#bbb}

/* 8 — masthead, search controls */
html.dark-mode .masthead{background:#000 !important;border-bottom:1px solid var(--dm-yellow) !important}
html.dark-mode .brand-title,html.dark-mode .brand-sub{color:#fff !important}
html.dark-mode .util-search input,html.dark-mode .nav-search input{
  background:#000 !important;color:#fff !important;border:1px solid #777 !important}
html.dark-mode .util-search button,html.dark-mode .nav-search button{
  background:var(--dm-yellow) !important;color:#000 !important;border:0 !important}

/* 9 — eliminate ALL remaining blue: title underlines → yellow, fills → black */
html.dark-mode .section h2::after,html.dark-mode .page-title::after,
html.dark-mode .donor-salute-title::after,html.dark-mode .stats-h::after,
html.dark-mode .gov-portals-title::after,html.dark-mode .si-col-head,
html.dark-mode .region-panel h3{border-bottom-color:var(--dm-yellow) !important}
html.dark-mode .section h2::after,html.dark-mode .page-title::after,
html.dark-mode .donor-salute-title::after,html.dark-mode .stats-h::after,
html.dark-mode .gov-portals-title::after{background:var(--dm-yellow) !important}

/* blue/navy fills → flat black */
html.dark-mode .hero,html.dark-mode .slide img,html.dark-mode .slide a,
html.dark-mode .donor-salute,html.dark-mode .latest-ticker,
html.dark-mode .partner-band,html.dark-mode .logo-marquee,html.dark-mode .back-to-top,
html.dark-mode .si-col-head,html.dark-mode .region-panel h3{
  background:#000 !important;background-image:none !important}
html.dark-mode .si-col-head,html.dark-mode .region-panel h3{color:#fff !important}
html.dark-mode .slider-nav{background:#000 !important;border:1px solid var(--dm-yellow) !important}
html.dark-mode .slider-dots{border:0 !important;background:transparent !important}
html.dark-mode .slider-arrow:hover, html.dark-mode .slider-arrow:focus-visible {
  color: var(--dm-yellow) !important;
  box-shadow: none !important;
  background: transparent !important;
}

/* blue accent fills → yellow */
html.dark-mode .latest-badge{background:transparent !important;color:var(--dm-yellow) !important;border-right-color:rgba(255,255,255,.25)}
html.dark-mode .latest-badge::before{background:var(--dm-yellow) !important}
html.dark-mode .slider-dot[aria-current="true"]{background:var(--dm-yellow) !important;border-color:var(--dm-yellow) !important}

/* feature/header tiles & pill buttons → black + yellow border */
html.dark-mode .stat-feature,html.dark-mode .event-card .read-msg,
html.dark-mode .region-tablist button[aria-selected="true"],
html.dark-mode .gov-portal-pill.is-active,html.dark-mode .gov-portal-pill[aria-current="page"],
html.dark-mode .skip-link,html.dark-mode .back-to-top{
  background:#000 !important;border:1.5px solid var(--dm-yellow) !important;color:#fff !important}
html.dark-mode .event-card .read-msg:hover,html.dark-mode .gov-portal-pill.is-active:hover,
html.dark-mode .back-to-top:hover,html.dark-mode .region-tablist button[aria-selected="true"]:hover{
  background:var(--dm-yellow) !important;color:#000 !important}
html.dark-mode .back-to-top i{color:inherit}
html.dark-mode .back-to-top:hover i{color:#000 !important}

/* 10 — translate pill & misc accents in dark mode */
html.dark-mode .bhashini-toggle{background:var(--dm-yellow) !important;color:#000 !important;border:0 !important}
html.dark-mode .bhashini-toggle .svg-ico,html.dark-mode .bhashini-toggle .bh-label{color:#000 !important}
html.dark-mode .latest-pause,html.dark-mode .slider-pause,html.dark-mode .donor-pause{border-color:var(--dm-yellow) !important}

/* 11 — accessibility pill inherits the Bhashini pill's dark-mode styling
   (it carries the .bhashini-toggle class), so no extra rules needed. */
/* Translate (Bhashini) pill — bold yellow so it reads clearly in dark mode */
html.dark-mode .util-bar .bhashini-toggle{
  background:#ffd23f !important;color:#000 !important;border:2px solid #000 !important;background-image:none !important}
html.dark-mode .util-bar .bhashini-toggle::before,html.dark-mode .util-bar .bhashini-toggle .bh-label,
html.dark-mode .util-bar .bhashini-toggle .svg-ico{color:#000 !important}

/* Translate dropdown card — black + yellow parts */
html.dark-mode .bhashini-menu::before{background:#000 !important;border-color:var(--dm-yellow) !important}
html.dark-mode .bhashini-menu .bh-head{color:#aab8cc !important}
html.dark-mode .bhashini-menu button:hover,html.dark-mode .bhashini-menu button:focus-visible{background:#1b1b1b !important;color:var(--dm-yellow) !important}
html.dark-mode .bhashini-menu button[aria-checked="true"]{background:rgba(255,210,63,.16) !important;color:#fff !important}
html.dark-mode .bhashini-menu .bh-check{color:var(--dm-yellow) !important}
html.dark-mode .bhashini-menu .bh-en{color:#b9c6d8 !important}
html.dark-mode .bhashini-menu button[aria-checked="true"] .bh-en{color:var(--dm-yellow) !important}
html.dark-mode .bhashini-menu .bh-foot{border-top-color:#444 !important;color:#b9c6d8 !important}
html.dark-mode .bhashini-menu .bh-foot .svg-ico,html.dark-mode .bhashini-menu .bh-foot strong{color:var(--dm-yellow) !important}

/* 12 — flat dark theme: drop all (blue-tinted) box-shadows */
html.dark-mode *{box-shadow:none !important}

/* 13 — donor-slider arrows: black + yellow (no green fill) in dark mode */
html.dark-mode .donor-arrow{background:#000 !important;border:1.5px solid var(--dm-yellow) !important;color:var(--dm-yellow) !important}
html.dark-mode .donor-arrow:hover,html.dark-mode .donor-arrow:focus-visible{background:var(--dm-yellow) !important;color:#000 !important}

/* ===== Latest-news ticker — stack on tablet/mobile =====
   Title ("LATEST NEWS") sits ABOVE on its own line; the scrolling feed + Pause
   button share the line below, so the bar isn't congested on small screens. */
@media (max-width:768px){
  /* Top line: title + pause button (vertically centred, pause pushed right).
     Second line: the scrolling feed, full width. */
  .latest-ticker-inner{flex-wrap:wrap;align-items:center;min-height:0;padding:8px 14px;gap:8px 10px}
  .latest-badge{order:1;flex:1 1 auto;border-right:0;margin:0;padding:0 0 0 18px;font-size:.74rem;align-self:center}
  .latest-pause{order:2;flex:0 0 auto;margin-left:auto;align-self:center}
  .latest-feed{order:3;flex:0 0 100%;min-width:0}
}

/* ===== Album gallery modal (per-album, opens only that album's photos) ===== */
.album-photos{display:none}
/* The cover button is styled by `.event-card > .album-cover:first-child` (matches
   the <a> image wrapper); here just the focus ring (inset so it isn't clipped). */
.album-card .album-cover:focus-visible{outline:3px solid var(--ring);outline-offset:-3px}
/* "View Gallery" is a <button> styled as the event-card pill — kill the native
   button border/background so it matches the link version exactly. */
button.read-msg{border:0;background:none;font-family:inherit}
.album-card .read-msg.album-open{cursor:pointer}
.album-modal{position:fixed;inset:0;z-index:1000;display:none;flex-direction:column;align-items:center;justify-content:center;gap:6px;padding:24px;background:rgba(6,18,38,.93);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}
.album-modal.open{display:flex}
.am-title{color:#fff;font-size:1.05rem;font-weight:700;margin:0 0 6px;text-align:center;max-width:90vw}
.am-stage{display:flex;align-items:center;gap:14px;max-width:min(1000px,100%);width:100%;justify-content:center}
.am-figure{margin:0;flex:1 1 auto;text-align:center;min-width:0}
.am-img{max-width:100%;max-height:72vh;border-radius:10px;background:#000;box-shadow:0 12px 40px rgba(0,0,0,.5)}
.am-cap{color:#cfdbe9;font-size:.9rem;margin-top:10px}
.am-count{color:#aebccd;font-size:.82rem}
.am-nav,.am-close{flex:0 0 auto;border:1px solid rgba(255,255,255,.4);background:rgba(255,255,255,.12);color:#fff;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;transition:background .15s}
.am-nav{width:46px;height:46px;border-radius:50%;font-size:1.1rem}
.am-nav:hover,.am-nav:focus-visible,.am-close:hover,.am-close:focus-visible{background:rgba(255,255,255,.28);outline:none}
.am-close{position:absolute;top:16px;right:16px;width:42px;height:42px;border-radius:50%;font-size:1.1rem}
@media (max-width:600px){
  .am-stage{gap:6px}
  .am-nav{width:38px;height:38px}
  .am-img{max-height:64vh}
}

/* ===== ITI / directory cards — compact link cards for a list of member
   institutions, offices or branches: gradient icon badge + name/subtitle +
   action chip, with a corner glow and an accent rail that animate on hover. ===== */
.iti-dir{display:grid;grid-template-columns:repeat(auto-fill,minmax(248px,1fr));gap:16px;margin:6px 0 4px}
.iti-dir-tile{position:relative;display:flex;align-items:center;gap:14px;padding:16px 18px;background:#fff;border:1px solid var(--line);border-radius:18px;color:var(--navy-deep);text-decoration:none;box-shadow:0 2px 10px rgba(13,71,161,.06);overflow:hidden;isolation:isolate;transition:transform .22s cubic-bezier(.2,.7,.3,1),box-shadow .28s ease,border-color .22s ease}
/* decorative corner glow that blooms on hover */
.iti-dir-tile::after{content:"";position:absolute;z-index:-1;top:-46px;right:-46px;width:120px;height:120px;border-radius:50%;background:radial-gradient(circle,rgba(21,101,192,.18),rgba(21,101,192,0) 70%);opacity:.55;transition:opacity .3s ease,transform .4s ease}
/* left accent rail (short, grows full-height on hover) */
.iti-dir-tile::before{content:"";position:absolute;left:0;top:14px;bottom:14px;width:4px;border-radius:0 4px 4px 0;background:linear-gradient(180deg,var(--saffron),#42a5f5);transition:top .28s ease,bottom .28s ease}
.iti-dir-tile:hover,.iti-dir-tile:focus-visible{transform:translateY(-5px);box-shadow:0 20px 40px rgba(13,71,161,.18);border-color:#c6dcf4;outline:none}
.iti-dir-tile:hover::before,.iti-dir-tile:focus-visible::before{top:0;bottom:0}
.iti-dir-tile:hover::after,.iti-dir-tile:focus-visible::after{opacity:1;transform:scale(1.25)}
/* leading icon badge with soft ring */
.iti-dir-ico{flex:0 0 auto;width:46px;height:46px;display:inline-flex;align-items:center;justify-content:center;border-radius:13px;background:linear-gradient(140deg,var(--navy),var(--navy-deep));color:#fff;font-size:1.18rem;box-shadow:0 6px 14px rgba(13,71,161,.28),inset 0 1px 0 rgba(255,255,255,.25);transition:transform .25s cubic-bezier(.2,.7,.3,1)}
.iti-dir-tile:hover .iti-dir-ico,.iti-dir-tile:focus-visible .iti-dir-ico{transform:translateY(-1px) scale(1.08) rotate(-4deg)}
/* name + subtitle stack */
.iti-dir-text{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:2px}
.iti-dir-name{font-weight:700;font-size:1.02rem;line-height:1.2;letter-spacing:.01em}
.iti-dir-sub{font-weight:600;font-size:.7rem;line-height:1.2;color:var(--muted);text-transform:uppercase;letter-spacing:.045em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* trailing action chip */
.iti-dir-go{flex:0 0 auto;width:30px;height:30px;display:inline-flex;align-items:center;justify-content:center;border-radius:50%;background:#e3f0fb;color:var(--saffron);font-size:.78rem;transition:background .22s ease,color .22s ease,transform .22s ease}
.iti-dir-tile:hover .iti-dir-go,.iti-dir-tile:focus-visible .iti-dir-go{background:var(--saffron);color:#fff;transform:translate(2px,-2px) rotate(8deg)}
html.dark-mode .iti-dir-tile{background:#1a2536;border-color:#283649;color:#e4ebf5}
html.dark-mode .iti-dir-tile:hover,html.dark-mode .iti-dir-tile:focus-visible{border-color:#34506f}
html.dark-mode .iti-dir-sub{color:#9fb2c8}
html.dark-mode .iti-dir-go{background:#2a3a4f;color:#7fb3ec}
.iti-dir+.dir-more{margin-top:18px}
.dir-more{text-align:center}

/* ===== WCAG 2.3.3 — honour the OS "reduce motion" setting ===== */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.001ms !important;animation-iteration-count:1 !important;
    transition-duration:.001ms !important;scroll-behavior:auto !important}
  .latest-track{animation:none !important}
}

/* ===== Feedback page ===== */
.feedback-layout{display:grid;grid-template-columns:minmax(0,1.7fr) minmax(0,1fr);gap:26px;align-items:start;margin:6px 0 10px}
.feedback-card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:30px 30px 32px;box-shadow:var(--shadow)}
.feedback-card-h{display:flex;align-items:center;gap:10px;font-size:1.35rem;color:var(--navy-deep);margin:0 0 4px}
.feedback-card-h i{color:var(--navy)}
.feedback-card-sub{color:var(--muted);font-size:.92rem;margin:0 0 22px}
.req-star{color:#b3261e;font-weight:700}
.feedback-form{display:grid;gap:18px}
.fb-row{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.feedback-form .form-field label{display:block;font-weight:700;color:var(--navy-deep);margin:0 0 7px;font-size:.95rem}
.feedback-form .form-field input,.feedback-form .form-field textarea{width:100%;padding:12px 14px;border:1px solid #9aa6b6;border-radius:var(--radius-sm);font-size:1rem;font-family:inherit;color:var(--ink);background:#fff;transition:border-color .15s,box-shadow .15s}
.feedback-form .form-field input::placeholder,.feedback-form .form-field textarea::placeholder{color:#8a97a8}
.feedback-form .form-field input:focus,.feedback-form .form-field textarea:focus{outline:none;border-color:var(--navy);box-shadow:0 0 0 3px rgba(13,71,161,.18)}
.feedback-form .form-field textarea{resize:vertical;min-height:130px}
.feedback-submit{display:inline-flex;align-items:center;gap:9px;justify-self:start;padding:13px 30px;margin-top:2px}
.feedback-submit i{font-size:.95em}
.feedback-aside{background:linear-gradient(160deg,var(--navy-deep),var(--navy));color:#eaf1fb;border-radius:var(--radius);padding:28px 26px;box-shadow:var(--shadow)}
.feedback-aside-h{color:#fff;font-size:1.15rem;margin:0 0 18px}
.feedback-contact{list-style:none;margin:0;padding:0;display:grid;gap:18px}
.feedback-contact li{display:flex;gap:14px;align-items:flex-start}
.fc-ico{flex:0 0 auto;width:38px;height:38px;border-radius:50%;background:rgba(255,255,255,.12);display:flex;align-items:center;justify-content:center;color:#fff;font-size:.95rem}
.fc-body{display:flex;flex-direction:column;gap:2px;font-size:.92rem;line-height:1.45;color:#d4e1f4}
.fc-label{font-weight:700;text-transform:uppercase;letter-spacing:.05em;font-size:.7rem;color:#9fbbe6}
.feedback-aside a{color:#fff;text-decoration:none;word-break:break-word}
.feedback-aside a:hover,.feedback-aside a:focus-visible{text-decoration:underline}
@media (max-width:860px){.feedback-layout{grid-template-columns:1fr}.fb-row{grid-template-columns:1fr}}
/* Feedback page — dark mode */
html.dark-mode .feedback-card{background:#141d2c;border-color:#283649}
html.dark-mode .feedback-card-sub{color:#9fb0c7}
html.dark-mode .feedback-form .form-field input,html.dark-mode .feedback-form .form-field textarea{background:#1a2536;color:#e4ebf5;border-color:#34465c}
html.dark-mode .feedback-form .form-field input::placeholder,html.dark-mode .feedback-form .form-field textarea::placeholder{color:#7a8aa0}

/* ── Site search page ───────────────────────────────────────────── */
.search-page-form{display:flex;align-items:center;gap:0;max-width:640px;margin:18px 0 6px;background:var(--card);border:2px solid var(--line);border-radius:14px;padding:6px 6px 6px 16px;box-shadow:0 4px 16px rgba(13,44,84,.07);transition:border-color .2s ease,box-shadow .2s ease}
.search-page-form:focus-within{border-color:var(--navy);box-shadow:0 6px 22px rgba(13,71,161,.16)}
.search-page-ico{color:var(--muted);font-size:1rem;flex:0 0 auto}
.search-page-form input[type="search"]{flex:1 1 auto;border:0;outline:0;background:transparent;font-size:1.02rem;color:var(--ink);padding:10px 14px;min-width:0}
.search-page-form input::placeholder{color:var(--muted)}
.search-page-btn{flex:0 0 auto;background:var(--navy);color:#fff;border:0;border-radius:10px;font-weight:700;font-size:.92rem;padding:11px 22px;cursor:pointer;transition:background .2s ease}
.search-page-btn:hover,.search-page-btn:focus-visible{background:var(--navy-deep)}
.search-status{color:var(--muted);font-size:.95rem;margin:14px 0 22px}
.search-status strong{color:var(--ink)}
.search-results{display:flex;flex-direction:column;gap:18px;max-width:760px}
.search-result{background:var(--card);border:1px solid var(--line);border-left:4px solid var(--navy);border-radius:12px;padding:18px 20px;box-shadow:0 2px 10px rgba(13,44,84,.05);transition:transform .15s ease,box-shadow .15s ease}
.search-result:hover{transform:translateX(2px);box-shadow:0 8px 22px rgba(13,44,84,.12)}
.search-result .sr-title{font-size:1.12rem;margin:0 0 4px;line-height:1.35}
.search-result .sr-title a{color:var(--navy);text-decoration:none}
.search-result .sr-title a:hover,.search-result .sr-title a:focus-visible{text-decoration:underline}
.search-result .sr-url{display:flex;align-items:center;gap:7px;color:#1a7a4a;font-size:.82rem;margin:0 0 8px;word-break:break-all}
.search-result .sr-url .svg-ico{font-size:.74rem;opacity:.7}
.search-result .sr-snip{color:var(--ink);font-size:.94rem;line-height:1.6;margin:0}
.search-results mark,.search-status mark{background:#fff1c2;color:inherit;padding:0 2px;border-radius:3px}
@media (max-width:560px){
  .search-page-form{flex-wrap:wrap;padding:10px 12px}
  .search-page-btn{width:100%;margin-top:8px}
}
html.dark-mode .search-page-form{background:#1a2536;border-color:#34465c}
html.dark-mode .search-page-form input[type="search"]{color:#e4ebf5}
html.dark-mode .search-result{background:#1a2536;border-color:#283649;border-left-color:#4a89dc}
html.dark-mode .search-result .sr-snip{color:#cfd8e3}
html.dark-mode .search-result .sr-url{color:#5bd08a}
html.dark-mode .search-results mark,html.dark-mode .search-status mark{background:#5a4a12;color:#ffe9a8}

/* ============================================================================
   Smooth load — no reload glitch.
   boot.js adds `is-loading` to <html> before the first paint; includes.js
   removes it once the header + footer are injected, so the page fades in
   already in its final position (no header pop-in, no content jump, and the
   saved dark/font theme is applied up-front so there is no flash). If JS is
   off, `is-loading` is never added, so the body is visible by default.
   ========================================================================== */
html.is-loading body{opacity:0}
body{opacity:1;transition:opacity .28s ease}
@media (prefers-reduced-motion:reduce){body{transition:none}}

/* ============================================================================
   SPA-style page transition (nav.js).
   nav.js swaps ONLY <main id="main-content"> between the (persistent) header and
   footer — no full reload. While the next page is fetched it adds `sg-navigating`
   to <html>, which fades the content out; once the new <main> is in place the
   class is removed and the content fades back in. The header, top bar, nav and
   footer never move, so navigation feels continuous instead of a hard refresh.
   Reduced-motion users get an instant swap with no fade.
   ========================================================================== */
#main-content{transition:opacity .18s ease}
html.sg-navigating #main-content{opacity:0}
@media (prefers-reduced-motion:reduce){
  #main-content{transition:none}
  html.sg-navigating #main-content{opacity:1}
}
/* nav.js moves focus to <main> after a swap so keyboard / screen-reader users
   land on the new content. That focus is programmatic, not a keyboard tab, so we
   suppress the big outline box around the whole content region in that case —
   while keeping the global keyboard focus ring (below) everywhere else. */
#main-content:focus{outline:none}
#main-content:focus:not(:focus-visible){outline:none}

/* ============================================================================
   Global keyboard focus outline — every focusable element shows a clear,
   consistent ring when reached by keyboard (Tab) anywhere on the site. The
   coloured header/nav bars override the colour to white below (the blue ring is
   invisible there); dark mode swaps --ring to yellow.
   ========================================================================== */
:where(a, button, input, select, textarea, summary, [tabindex], [role="button"], [role="tab"], [role="menuitem"]):focus-visible{
  outline:3px solid var(--ring);
  outline-offset:2px;
  border-radius:3px;
}

/* ===== Titles use --heading (a dark tone of the nav colour, not the blue accent) =====
   Consolidated last so it re-points every title that earlier hardcoded --navy*.
   Light-mode only — dark-mode heading rules carry the html.dark-mode prefix, so
   their higher specificity still wins there. */
h1,h2,h3,h4,
.section h2,.brand-title,.msg-title,.hosp-h2,.gallery-album-title,
.event-card h3 a,.person-card h3,.page-body section.card h2,.video-meta h3,
.policy-toc h2,.policy-body h3,.policy-card h3 a,.feedback-card-h,
.contact-h2,.donor-salute-title,.stats-h,.pledge-band-title,.gov-portals-title,
.bearer-name,.card-title,.sr-title a{color:var(--heading)}

/* ===== Home: "Welcome to IPHB" + "What's New" side by side (desktop), stacked on tablet/mobile ===== */
.home-intro-row{display:flex;gap:34px;align-items:stretch}
.home-welcome{flex:1 1 56%;min-width:0}
.home-whatsnew{flex:1 1 40%;min-width:0;display:flex;flex-direction:column}
.home-whatsnew .v-marquee{width:100%}
.home-whatsnew .v-marquee-viewport{flex:1 1 auto}
@media (max-width:1024px){
  .home-intro-row{flex-direction:column;gap:26px}
  .home-welcome,.home-whatsnew{flex:1 1 auto;width:100%}
}

/* ===== New caption hero slider (ported from the updated GIGW template) =====
   Captioned slides + a bottom-centred control cluster: arrows + dots share one
   dark pill (.slider-nav); the play/pause is a separate pill beside it. These
   rules come AFTER the originals so they override the old side-arrow slider. */
.slide-caption{position:absolute;inset:0;z-index:4;display:flex;flex-direction:column;justify-content:center;align-items:flex-start;gap:6px;padding:24px clamp(20px,6vw,64px);background:linear-gradient(90deg,rgba(6,18,38,.84) 0%,rgba(6,18,38,.62) 38%,rgba(6,18,38,.18) 72%,transparent 100%);color:#fff;text-align:left;pointer-events:none}
.slide-caption .slide-cap-title{display:block;font-size:clamp(1.1rem,2.6vw,1.9rem);font-weight:700;line-height:1.2;margin:0;color:#fff;max-width:24ch;text-shadow:0 1px 6px rgba(0,0,0,.55)}
.slide-caption .slide-cap-text{display:block;font-size:clamp(.85rem,1.6vw,1.05rem);line-height:1.5;color:#eef3fb;max-width:46ch;text-shadow:0 1px 5px rgba(0,0,0,.5)}
@media (max-width:600px){.slide-caption{padding:18px 16px;background:linear-gradient(90deg,rgba(6,18,38,.9) 0%,rgba(6,18,38,.7) 55%,rgba(6,18,38,.35) 100%)}}
.slider-controls{position:absolute;left:50%;transform:translateX(-50%);bottom:16px;display:inline-flex;align-items:center;justify-content:center;gap:10px;z-index:5;max-width:calc(100% - 24px);flex-wrap:wrap;pointer-events:none}
.slider-controls > *{pointer-events:auto}
.slider-nav{display:inline-flex;align-items:center;gap:6px;background:rgba(8,31,61,.6);border-radius:30px;padding:7px 12px;-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px)}
.slider-arrow{position:static;transform:none;width:28px;height:28px;flex:0 0 auto;border:0;background:transparent;color:#fff;font-size:0;line-height:0;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;box-shadow:none;transition:color .15s,transform .15s}
.slider-arrow:hover,.slider-arrow:focus-visible{color:var(--saffron);background:rgba(255,255,255,.92);border-radius:50%;transform:scale(1.14);box-shadow:0 0 0 2px rgba(255,255,255,.35);outline:none}
.slider-arrow::before{display:inline-block;content:"";width:9px;height:9px;border-style:solid;border-color:currentColor;border-width:2.5px 2.5px 0 0;transform:rotate(45deg)}
.slider-arrow[data-slide="prev"]::before{transform:rotate(-135deg);margin-left:3px}
.slider-arrow[data-slide="next"]::before{margin-right:3px}
.slider-arrow > *{display:none}
.slider-dots{display:inline-flex;gap:9px;align-items:center;background:transparent;padding:0}
.slider-dot{width:10px;height:10px;border-radius:50%;border:2px solid rgba(255,255,255,.85);background:transparent;cursor:pointer;padding:0;transition:background .18s,transform .18s}
.slider-dot:hover{background:rgba(255,255,255,.6)}
.slider-dot[aria-current="true"]{background:var(--saffron);border-color:#fff;transform:scale(1.25)}
.slider-pause{flex:0 0 auto;background:rgba(8,31,61,.6);color:#fff;border:1px solid rgba(255,255,255,.4);border-radius:50%;padding:0;width:38px;height:38px;font-size:0;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);transition:background .18s,border-color .18s}
.slider-pause::before{content:"\23F8";font-size:.95rem;line-height:1}
.slider-pause[aria-pressed="true"]::before{content:"\25B6"}
.slider-pause:hover,.slider-pause:focus-visible{background:var(--saffron);border-color:var(--saffron);outline:none}

/* ===== Tabbed What's New feed (ported from updated GIGW template) ===== */
/* ===== Feed tabs (JSON-driven "What's New": underline tabs → list / empty-state → View all) ===== */
.feed-tablist{display:flex;gap:30px;flex-wrap:wrap;margin:0 0 20px;padding:0;border-bottom:1px solid var(--line)}
.feed-tablist button{background:none;border:0;border-bottom:3px solid transparent;margin-bottom:-1px;padding:9px 2px;font-weight:700;font-size:1rem;color:var(--muted);cursor:pointer;font-family:inherit;line-height:1.2;transition:color .15s,border-color .15s}
.feed-tablist button:hover{color:var(--navy-deep)}
.feed-tablist button[aria-selected="true"]{color:var(--navy-deep);border-bottom-color:var(--saffron-darker)}
.feed-tablist button:focus-visible{outline:3px solid var(--ring);outline-offset:3px;border-radius:3px}
.feed-panel[hidden]{display:none}
.feed-items{list-style:none;margin:0;padding:0;border:1px solid var(--line);border-radius:12px;overflow:hidden}
.feed-items li{padding:13px 18px;border-bottom:1px solid var(--line)}
.feed-items li:last-child{border-bottom:0}
.feed-items li:nth-child(even){background:var(--bg-alt)}
.feed-link{display:inline;color:var(--navy-dark);text-decoration:none;font-size:.95rem;line-height:1.5;font-weight:600}
.feed-link:hover,.feed-link:focus-visible{color:var(--saffron-darker);outline:none}
.feed-link .dl-meta{color:var(--muted);font-weight:400;font-size:.84em;white-space:nowrap}
.feed-close{display:block;margin-top:4px;font-size:.8rem;color:var(--muted);font-weight:600}
.feed-empty{margin:0;padding:30px 24px;border:1.5px dashed var(--line);border-radius:12px;background:var(--bg-alt);color:var(--muted);text-align:center;font-size:.95rem;line-height:1.6}
.feed-empty a{color:var(--saffron-darker);font-weight:700;text-decoration:underline;text-underline-offset:2px}
.feed-viewall{display:inline-flex;align-items:center;gap:9px;margin-top:24px;font-weight:700;font-size:.95rem;color:var(--navy-deep);text-decoration:none;border-bottom:2px solid var(--navy-deep);padding:0 2px 7px}
.feed-viewall::after{content:"\2192";font-weight:700;transition:transform .2s ease}
.feed-viewall:hover,.feed-viewall:focus-visible{color:var(--saffron-darker);border-bottom-color:var(--saffron-darker);outline:none}
.feed-viewall:hover::after,.feed-viewall:focus-visible::after{transform:translateX(4px)}
html.dark-mode .feed-tablist{border-bottom-color:#283649}
html.dark-mode .feed-tablist button{color:#a6b4c8}
html.dark-mode .feed-tablist button:hover,html.dark-mode .feed-tablist button[aria-selected="true"]{color:#fff}
html.dark-mode .feed-tablist button[aria-selected="true"]{border-bottom-color:var(--dm-yellow)}
html.dark-mode .feed-items{border-color:#283649}
html.dark-mode .feed-items li{border-color:#283649}
html.dark-mode .feed-items li:nth-child(even){background:#16202e}
html.dark-mode .feed-link{color:#e4ebf5}
html.dark-mode .feed-link:hover,html.dark-mode .feed-link:focus-visible{color:var(--dm-yellow)}
html.dark-mode .feed-empty{background:#16202e;border-color:#283649;color:#a6b4c8}
html.dark-mode .feed-viewall{color:#fff;border-bottom-color:#fff}

/* =====================================================================
   DARK MODE — data surfaces fold-up. The grouped rule above turns the
   common cards black+yellow, but several DATA containers (the What's New
   feed, the Stay-Informed noticeboard, detail/profile/policy/feedback
   cards) had their own later dark rules that kept the theme navy fill +
   grey border. Pull them onto the same flat-black + yellow-border look so
   no data block reads as "still themed" in dark mode. Appended last so it
   wins over every earlier scattered dark rule. */
html.dark-mode .si-col,
html.dark-mode .feed-items,html.dark-mode .feed-empty,
html.dark-mode .detail-card,html.dark-mode .hospital-card,
html.dark-mode .profile-card,html.dark-mode .policy-toc,
html.dark-mode .feedback-card,html.dark-mode .page-body .wim{
  background:#000 !important;border:1px solid var(--dm-yellow) !important;
  box-shadow:none !important}
/* table chrome inside those data containers → black surface, dim divider */
html.dark-mode .si-col-foot,
html.dark-mode .si-col-body thead th{background:#000 !important;border-color:rgba(255,210,63,.35) !important}
html.dark-mode .si-col-body th,html.dark-mode .si-col-body td,
html.dark-mode .feed-items li{border-color:rgba(255,210,63,.28) !important}
html.dark-mode .feed-items li:nth-child(even),
html.dark-mode .si-col-body tbody tr:hover td{background:rgba(255,210,63,.07) !important}
/* footer column-title underlines: were theme saffron — use the dark accent */
html.dark-mode .footer-h{border-bottom-color:var(--dm-yellow)}
html.dark-mode .contact-card{
 background-color: #000 !important;

}
html.dark-mode .contact-h2::after{
    background-color: var(--dm-yellow) !important;
}
html.dark-mode .contact-ico{
    background: var(--dm-yellow);
}
html.dark-mode .contact-ico .svg-ico{
    color: #000 !important;
}

html.dark-mode .policy-card h3 a:after{
    color: #fff !important;
}