/* =============================================================================
   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: royal blue + teal-green + red */
  --navy:#0d47a1; --navy-dark:#0a3a85; --navy-deep:#062c66;
  /* COMMON FOOTER chrome — shared by EVERY template/site and NEVER recoloured per
     theme (palette() never sets these tokens). A DARK GREY (never solid black):
     --footer-1 = main footer, --footer-2 = darker bottom bar, --footer-policies =
     darkest tone for the policies bar. */
  --footer-1:#2d3239; --footer-2:#22262b; --footer-policies:#191c20;
  /* live-site blue accent (was teal); drives nav, buttons, heading underlines */
  --saffron:#1565c0; --saffron-dark:#0d47a1;
  --saffron-darker:#0a3a85;
  --green:#1b8f4d; --red:#1565c0; --red-dark:#0d47a1;
  --bg:#eef2f7; --bg-alt:#e3e9f2;
  --card:#ffffff;
  --ink:#1f2a37; --muted:#52617a; --line:#dde4ee;
  --ring:#1a73c2;
  /* Main nav bar + its menu hovers/accents DERIVE FROM THE THEME (never a fixed
     colour). --nav-bar is the brand colour; the hover fill/text are auto-mixed
     light/dark shades of it, so changing the brand token re-themes the whole nav.
     The first value on the mixed vars is a no-color-mix fallback. */
  --nav-bar:var(--navy); --nav-bar-dark:var(--navy-deep);
  --nav-hover-bg:var(--bg-alt);
  --nav-hover-bg:color-mix(in srgb, var(--nav-bar) 12%, #fff);
  --nav-hover-text:var(--navy-deep);
  --nav-hover-text:color-mix(in srgb, var(--nav-bar) 62%, #000);
  /* Light accent used on the DARK chrome (footer/util-bar links, icons, badges).
     A light tint of the PRIMARY brand colour (--navy), so accents on the dark bar
     (search button, Latest-News dot/meta) match the bar instead of clashing with
     a differently-hued --saffron accent (e.g. pink pills on a teal/blue bar). */
  --accent-on-dark:#cfe0f5;
  --accent-on-dark:color-mix(in srgb, var(--navy) 24%, #fff);
  /* 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(13,44,84,.08), 0 6px 18px rgba(13,44,84,.06);
  --shadow-lg:0 10px 30px rgba(13,44,84,.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 /resources/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;
  --maxw:1200px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:47px /* JUST UNDER the shortest sticky nav (s3-nav ~48.5px, mainnav 50px). Must be <= the shortest nav so "Skip to Main Content" tucks content a hair UNDER the nav (invisible) instead of leaving a thin white sliver below it. */}
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)}
h1,h2,h3,h4{font-family:var(--font-display);font-weight:700;color:var(--navy-dark);line-height:1.2;margin:.2em 0 .5em}

/* ============================ Layout container & content sections ============================ */
.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) */
/* h1 floor raised to 1.6rem (25.6px) so the page title is ALWAYS larger than a bare
   interior h2 (browser default 24px); at 1.45rem the h1 dipped below the h2 at narrow
   widths, inverting the hierarchy. Same fix as s3waas.css .s3 main h1 and sec-goa. */
.page-body>.container>h1{font-size:clamp(1.6rem,4.5vw,2.15rem);line-height:1.18;overflow-wrap:break-word}
.breadcrumb,.breadcrumb [aria-current="page"]{overflow-wrap:break-word;overflow-wrap: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:0 0 56px;padding-top:40px;border-top:2px solid var(--line)}
.pc-demo .content-section>h2:first-child,.pc-demo .content-section>.container>h2:first-child{margin-top:0}
/* (the old first-of-type flush override was removed — every demo is now a boxed card
   with its own full border + padding, so the first card must NOT lose its top edge) */
/* Framed masthead demos in the component catalogue (variants A/B). */
.pc-masthead-demo{border:1px solid var(--line);border-radius:10px;overflow:hidden}
/* Caption-slider demo in the catalogue — modest height + rounded frame. */
.pc-slider-demo{aspect-ratio:auto;height:320px;min-height:0;border-radius:10px}
/* "How to use / where's the data" note in the component catalogue. */
.pc-howto{background:var(--bg);border-left:4px solid var(--saffron);border-radius:0 8px 8px 0;padding:12px 16px;margin:0 0 18px;font-size:.92rem;line-height:1.6;color:var(--ink)}
.pc-howto code{background:var(--bg-alt)}
.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 / facility detail card ============================ */
/* Hospital detail: photo + info card + map */
.detail-card{border:1px solid var(--line);border-radius:12px;overflow:hidden;background:#fff;margin:10px 0 26px}
.detail-photo{display:block;width:100%;height:auto;aspect-ratio:21/9;object-fit:cover}
.detail-grid{display:flex;flex-wrap:wrap;margin:0}
.detail-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)}
.detail-grid .detail-wide{flex-basis:100%}
.detail-grid dt{font-size:.74rem;text-transform:uppercase;letter-spacing:.04em;font-weight:800;color:var(--saffron-dark)}
.detail-grid dd{margin:0;font-size:1rem;font-weight:600;color:var(--navy-deep);line-height:1.45;overflow-wrap:break-word}
.detail-grid dd a{color:var(--navy);text-decoration:underline}
@media (max-width:560px){.detail-grid>div{flex-basis:100%}}
html.dark-mode .detail-card{background:#111111;border-color:#ffd23f}
html.dark-mode .detail-grid>div{box-shadow:inset -1px -1px 0 0 #ffd23f}
html.dark-mode .detail-grid dd{color:#ffffff}
/* ============================ Profile card ============================ */
/* 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:800;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:#111111;border-color:#ffd23f}
html.dark-mode .profile-fields>div{border-top-color:#ffd23f}
html.dark-mode .profile-fields dd{color:#ffffff}
/* ============================ Map embed (OpenStreetMap iframe box) ============================ */
/* LOCATION MAP — a BAKED PNG, not a third-party iframe. OpenStreetMap's embed now renders with
   WebGL: a machine without it (hardware acceleration off, an older or locked-down government
   desktop, any headless check) gets "WebGL is required to display this map" or a blank box, and
   nothing on our side can fix that. tools/make-map.py bakes the tiles once at build time — it
   always paints, needs no JS, keeps the CSP at 'self', makes no third-party request from a
   citizen's browser, carries a real alt, and prints. The image links out to OpenStreetMap for
   anyone who wants to pan, zoom or route. `aspect-ratio` is dropped where it was set for an
   iframe: the image has intrinsic dimensions and sizes itself. */
.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)}
.map-embed img{display:block;width:100%;height:auto;aspect-ratio:auto}
.map-credit{margin:0;padding:6px 10px;font-size:.72rem;color:var(--muted);background:var(--soft,#f2f2f5)}
.map-credit a{color:inherit}
html.dark-mode .map-credit{background:#1a1a1a;color:#cfcfcf}
@media (max-width:560px){.map-embed{aspect-ratio:4/3}}
.map-embed iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.detail-h2{margin:36px 0 14px;font-size:clamp(1.2rem,2.6vw,1.45rem);font-weight:800;color:var(--navy-deep);line-height:1.25}
.detail-h2:first-of-type{margin-top:22px}
html.dark-mode .detail-h2{color:#ffffff}
@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 tables & download buttons ============================ */
/* Download-forms table */
.dl-table td{vertical-align:middle}
/* Cells are LEFT-aligned by default (see .data-table th,td). Only a real "Sr No"
   column is narrowed + centred (matched by its label, NOT by being first — a table
   whose first column is "Document" must stay left-aligned and full-width). The
   Download/action column is centred by the has-actions / :has(.dl-btn) rules below. */
.data-table td[data-label="Sr No"],.data-table td[data-label="Sr No."]{width:56px;text-align:center;white-space:nowrap}
/* 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:center}
.data-table:has(.dl-btn) th:last-child,.data-table:has(.dl-btn) td:last-child{width:1%;white-space:nowrap;text-align:center}
.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:800;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:#0a0a0a}
html.dark-mode .ext-int-box h2,html.dark-mode .ext-int-box p{color:#ffffff}
/* Fallback when Type/Size columns are NOT folded into the button (main.js folds them
   by default): keep them compact so they don't eat the row's width. */
.data-table td[data-label="Type"],.data-table td[data-label="Size"]{white-space:nowrap;width:1%}
@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-path:inset(50%);clip-path:inset(50%);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:#cfcfcf}
/* Obfuscated email text (test[at]gmail[dot]com) — keep on one line. */
/* Obfuscated emails can be long (dir[dash]iphb[dot]goa[at]nic[dot]in) — let them wrap
   to the next line instead of overflowing their card. overflow-wrap:anywhere only
   breaks when there isn't room, so short addresses still stay on one line. */
.email-obf{overflow-wrap:anywhere;overflow-wrap: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:0}
#main-content:focus{outline:none}
:focus-visible{outline:3px solid var(--ring);outline-offset:2px}
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%,#06182f 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:5px 26px;max-width:var(--maxw);margin:0 auto;min-height:38px}
.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 11px;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;font-size:.85em}
.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 */
.util-nav .util-item .svg-ico{color:var(--accent-on-dark);font-size:.95em;flex:0 0 auto}
.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:28px;width:150px;border:0;border-radius:14px 0 0 14px;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:28px;border:0;border-radius:0 14px 14px 0;background:var(--accent-on-dark);color:var(--navy-deep);padding:0 13px;cursor:pointer;display:inline-flex;align-items:center;font-size:13px}
.util-search button:hover,.util-search button:focus,.util-search button:focus-visible{background:var(--accent-on-dark);color:var(--navy-deep)}
/* Hover DARKENS the accent rather than lightening it — a lighter/white hover reads as
   the control switching off. Mixed from the theme token so every palette darkens by the
   same amount; browsers without color-mix keep the flat colour above. */
@supports (background:color-mix(in srgb,red 50%,black)){
  .util-search button:hover,.util-search button:focus,.util-search button:focus-visible{
    background:color-mix(in srgb,var(--accent-on-dark) 86%,#000)}
}
/* 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:flex-start;row-gap:2px}
  .util-nav .util-item{padding:5px 8px;font-size:.85em}
  .util-nav .util-item:first-child{font-size:.72em}
  .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:28px;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(0,0,0,.28)}
.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:800;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(21,101,192,.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:800}
.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}
/* GIGW themes + components: the plugin's proper अ/A Bhashini logo renders too
   SMALL, so enlarge it (work WITH the plugin, not against its late-loaded CSS).
   Scoped to .bhashini-wrap-new — GIGW ONLY; the S3WaaS plugin (.s3-bhashini) keeps
   its own icon, untouched. */
.bhashini-wrap-new .bhashini-dropdown-btn{display:inline-flex !important;align-items:center;justify-content:center;padding:0}
.bhashini-wrap-new .bhashini-dropdown-btn-icon{display:inline-flex !important;align-items:center;justify-content:center;width:auto;height:auto;line-height:0}
.bhashini-wrap-new .bhashini-dropdown-btn-icon svg{width:24px !important;height:24px !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:800;border:1px solid #fff}
.font-btn[data-font="reset"]:hover{background:var(--saffron-darker)}

/* 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:1rem /* was 16px; use rem so accessibility root-scaling affects masthead text */}
.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:1.6rem;color:var(--navy-deep);line-height:1.1;letter-spacing:-.01em}
.brand-sub{font-family:var(--font-display);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:#cfcfcf}
.mainnav{background:var(--nav-bar);position:sticky;top:0;z-index:200;box-shadow:none;border-bottom:0;font-size:1rem /* was 16px; use rem so accessibility root-scaling affects nav text */}
.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:transparent;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:800;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:800;font-size:.78rem;letter-spacing:.12em;text-transform:uppercase;padding:0 16px 0 26px;margin-right:14px;position:relative;display:inline-flex;align-items:center;border-right:1px solid rgba(255,255,255,.22)}
/* Live dot blends with the theme — a light tint of the brand on the dark bar,
   with a soft white pulse that works on any theme colour. */
.latest-badge::before{content:"";position:absolute;left:0;top:50%;transform:translateY(-50%);width:9px;height:9px;border-radius:50%;background:var(--accent-on-dark);box-shadow:0 0 0 0 rgba(255,255,255,.5);animation:lb-pulse 2.2s ease-out infinite}
@keyframes lb-pulse{0%{box-shadow:0 0 0 0 rgba(255,255,255,.5)}70%{box-shadow:0 0 0 8px rgba(255,255,255,0)}100%{box-shadow:0 0 0 0 rgba(255,255,255,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}
/* Movie-credits start (horizontal, DEFAULT): a one-time intro slides the FIRST headline in from
   the RIGHT (controls side) into an empty ticker, then hands to the seamless left-scrolling loop; sits
   PAUSED at the empty start off-screen (sg-offscreen) so it begins on viewport. --lt-intro (feed width)
   / --lt-intro-dur / --lt-dur set by initTicker at the loop px/sec. BUILD-ERRORS §89. */
.latest-track{display:flex;gap:0;animation:lt-credits-in var(--lt-intro-dur,2s) linear 1,lt-scroll var(--lt-dur,60s) linear var(--lt-intro-dur,2s) infinite;will-change:transform;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:var(--accent-on-dark);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:"\f04c";font-family:"Font Awesome 7 Pro";font-weight:900;font-size:.95rem}
.latest-pause:hover{background:rgba(255,255,255,.18)}
.latest-pause[aria-pressed="true"]::before{content:"\f04b";font-family:"Font Awesome 7 Pro";font-weight:900}
/* Loop by an EXACT integer-pixel distance (one item-set, set by main.js) so the
   seam is pixel-perfect — translateX(-50%) of an odd-width track rounds to a .5px
   and jumps at the loop. Falls back to -50% if the var isn't set yet. */
@keyframes lt-scroll{from{transform:translateX(0)}to{transform:translateX(calc(-1 * var(--lt-loop, 50%)))}}
/* One-time horizontal entrance: track starts one feed-width to the RIGHT (empty) so the first headline slides in from the right, ending at translateX(0) where the seamless loop takes over. */
@keyframes lt-credits-in{from{transform:translateX(var(--lt-intro,100vw))}to{transform:translateX(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:700;font-size:.8em;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,
.s3-menu>li>a:focus-visible,.s3-menu>li>button:focus-visible,.s3-sub a:focus-visible,
.s3-subparent:focus-visible,.s3-nav-toggle:focus-visible{outline:1px solid #fff;outline-offset:-1px}
.nav-sublink{display:block;padding:10px 14px;color:var(--ink);text-decoration:none;border-radius:6px;font-size:.92em}
.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:block}
.nav-download .dl-text{display:block;min-width:0}
.nav-download .dl-title{display:block;line-height:1.3}
.nav-download .dl-badge{display:inline-flex;align-items:center;gap:4px;margin-top:3px;padding:1px 7px;border-radius:16px;background:var(--saffron-dark,#c0562a);color:#fff;font-size:.62em;font-weight:700;letter-spacing:.02em;white-space:nowrap}
.nav-download .dl-badge .dl-meta{margin:0;color:inherit;font:inherit}
.nav-download .dl-badge .dl-ico{margin:0;color:inherit;font-size:.92em}
.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:800;color:var(--nav-bar-dark);display:block}
.submenu{min-width:280px;max-height:70vh;overflow-y:auto;overscroll-behavior:contain}
/* 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:inherit;text-align:left;cursor:pointer}
.caret-right{transform:rotate(-45deg);margin:0 2px 0 0}
/* The flyout ("dropdown with its own dropdown") can hold a long list (e.g. many PDF
   links) that runs past the screen — cap it and scroll so every item is reachable.
   JS (main.js) tightens max-height to the exact space below its top; this is the
   no-JS fallback. overscroll-behavior keeps that scroll inside the panel. */
.submenu-flyout{top:-3px;left:100%;min-width:250px;max-height:70vh;overflow-y:auto;overscroll-behavior:contain}
.has-flyout.open > .submenu-flyout{display:block}
@media (min-width:901px){.has-flyout:hover > .submenu-flyout,.has-flyout:focus-within > .submenu-flyout{display:block}}
/* After a leaf-link click, keep the flyout shut despite :hover until the mouse leaves
   (main.js tags .click-closed; mirrors the top-level .submenu suppressor above). */
.has-flyout.click-closed > .submenu-flyout{display:none}
/* Themed scrollbar for the scrollable dropdown panels — thumb uses the nav/brand
   colour so the scroll matches each theme (Firefox: scrollbar-color; WebKit: pseudo). */
.submenu,.submenu-flyout,.s3-menu .s3-sub,.s3-has-flyout>.s3-flyout{scrollbar-width:thin;scrollbar-color:var(--nav-bar) transparent}
.submenu::-webkit-scrollbar,.submenu-flyout::-webkit-scrollbar,.s3-menu .s3-sub::-webkit-scrollbar,.s3-has-flyout>.s3-flyout::-webkit-scrollbar{width:9px;height:9px}
.submenu::-webkit-scrollbar-track,.submenu-flyout::-webkit-scrollbar-track,.s3-menu .s3-sub::-webkit-scrollbar-track,.s3-has-flyout>.s3-flyout::-webkit-scrollbar-track{background:transparent}
.submenu::-webkit-scrollbar-thumb,.submenu-flyout::-webkit-scrollbar-thumb,.s3-menu .s3-sub::-webkit-scrollbar-thumb,.s3-has-flyout>.s3-flyout::-webkit-scrollbar-thumb{background:var(--nav-bar);border-radius:9px;border:2px solid transparent;background-clip:padding-box}
.submenu::-webkit-scrollbar-thumb:hover,.submenu-flyout::-webkit-scrollbar-thumb:hover,.s3-menu .s3-sub::-webkit-scrollbar-thumb:hover,.s3-has-flyout>.s3-flyout::-webkit-scrollbar-thumb:hover{background:var(--nav-bar-dark)}
/* Dark mode: the dropdown scrollbar matches the dark-mode accent (yellow), not the
   light-mode brand blue, so it fits the black-and-yellow dark theme. */
html.dark-mode .submenu,html.dark-mode .submenu-flyout,html.dark-mode .s3-menu .s3-sub,html.dark-mode .s3-has-flyout>.s3-flyout{scrollbar-color:var(--dm-yellow) transparent}
html.dark-mode .submenu::-webkit-scrollbar-thumb,html.dark-mode .submenu-flyout::-webkit-scrollbar-thumb,html.dark-mode .s3-menu .s3-sub::-webkit-scrollbar-thumb,html.dark-mode .s3-has-flyout>.s3-flyout::-webkit-scrollbar-thumb{background:var(--dm-yellow)}
html.dark-mode .submenu::-webkit-scrollbar-thumb:hover,html.dark-mode .submenu-flyout::-webkit-scrollbar-thumb:hover,html.dark-mode .s3-menu .s3-sub::-webkit-scrollbar-thumb:hover,html.dark-mode .s3-has-flyout>.s3-flyout::-webkit-scrollbar-thumb:hover{background:#e6bd2e}

/* ============================ 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. */
/* Full-bleed (edge-to-edge) hero. aspect-ratio 3:1 keeps proportion as the width
   grows; max-height caps how tall it gets on very wide screens. */
.hero{position:relative;background:var(--navy-deep);overflow:hidden;width:100%;display:block;aspect-ratio:3/1;min-height:240px;max-height:560px}
.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}
/* Show the WHOLE image (never crop) and cap at its natural size so it never upscales
   into a blur; a small inset padding keeps the image off the slider edges. */
.slide img{display:block;width:100%;height:100%;box-sizing:border-box;padding:clamp(4px,1.1vw,14px);object-fit:contain;object-position:center;background:var(--navy-deep)}
.slide a{display:block;width:100%;height:100%}
/* ---- Clickable / CTA slider (JSON-driven): the WHOLE slide is a link; an optional
   button-styled CTA sits inside it — because the caption is pointer-events:none, a click
   anywhere on the slide (button included) follows the slide's own link. ---- */
a.slide{text-decoration:none;color:inherit;cursor:pointer}
a.slide:focus-visible{outline:3px solid var(--saffron);outline-offset:-4px}
.slide-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;margin-top:14px;padding:clamp(8px,1.6vw,12px) clamp(16px,3vw,26px);border-radius:8px;background:var(--saffron);color:#fff;font-weight:800;font-size:clamp(.85rem,2vw,1rem);line-height:1.15;letter-spacing:.01em;max-width:calc(100% - 24px);text-align:center;box-shadow:0 3px 12px rgba(0,0,0,.32);pointer-events:none}
a.slide:hover .slide-btn{background:var(--saffron-dark)}
/* Centre-aligned caption variant (button-in-the-middle slide). Compound selector so it
   beats the base .slide-caption regardless of source order. */
.slide-caption.slide-caption--center{align-items:center;justify-content:center;text-align:center;background:linear-gradient(0deg,rgba(6,18,38,.5) 0%,rgba(6,18,38,.14) 55%,rgba(6,18,38,.4) 100%)}
.slide-caption.slide-caption--center .slide-cap-title,.slide-caption.slide-caption--center .slide-cap-text{max-width:40ch}
/* Controls BELOW the image (moved out of the frame) so they never overlap a centred CTA */
.cta-slider{display:block}
.cta-slider .slider-controls{position:static;left:auto;transform:none;bottom:auto;margin:12px auto 0;max-width:100%}
/* Hero slot — vertical-padding wrapper so a hero / slider sits in a padded slot (doesn't butt
   up against the chrome above/below). Wrap any hero: <div class="hero-slot">…slider…</div>. */
.hero-slot{padding:clamp(14px,2.5vw,30px) 0}
/* Slider LAYOUT variants (both show the FULL image, never cropped — see .slide img above):
   • .hero-boxed  — boxed inside the page-container width, rounded corners + soft shadow.
   • .hero-edge   — full-bleed edge-to-edge (breaks out even when nested in a .container).
   The plain .hero is edge-to-edge by default; add one of these to switch layout. */
.hero-boxed{max-width:var(--maxw);margin-inline:auto;border-radius:14px;overflow:hidden;box-shadow:0 6px 22px rgba(13,44,84,.12)}
.hero-edge{width:100vw;max-width:100vw;margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw);border-radius:0}
/* Video slide — an embed (iframe) or <video> fills the slide on a black stage */
.slide-video{position:absolute;inset:0;width:100%;height:100%;background:#000}
.slide-video iframe,.slide-video video{display:block;width:100%;height:100%;border:0;object-fit:cover}
/* Caption overlay for a CAPTION slider — text sits VERTICALLY CENTRED on the left,
   over a left-to-right dark scrim (dark where the text is → transparent right) so
   it ALWAYS passes contrast on any image; a text-shadow is the belt-and-braces. */
.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:800;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%)}}
/* Bottom-centred control cluster (GFDC-style). The arrows + dots share ONE dark
   pill (.slider-nav); the play/pause is a SEPARATE pill beside it:  [ ‹ • • • › ]  ⏸
   Arrows are transparent (no border/bg) and the same height as the dots strip. */
.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}
/* The shared pill: arrows + dots together on one background */
.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)}
/* Arrows: transparent, no border/background, same height as the dots */
.slider-arrow{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;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}
/* FontAwesome chevron (the <i class="svg-ico fa-chevron-*"> in the button) is the single arrow */
.slider-arrow::before{content:none}
.slider-arrow .svg-ico{display:inline-flex;font-size:15px;line-height:1}
/* Dots: transparent — they sit inside the shared .slider-nav pill */
.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)}
/* Icon-only pause — SEPARATE dark pill (no text: font-size:0 hides any label) */
.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:"\f04c";font-family:"Font Awesome 7 Pro";font-weight:900;font-size:.95rem;line-height:1}
.slider-pause[aria-pressed="true"]::before{content:"\f04b";font-family:"Font Awesome 7 Pro";font-weight:900}
.slider-pause:hover,.slider-pause:focus-visible{background:var(--saffron);border-color:var(--saffron);outline:none}

/* ============================ 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:800;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.05rem;color:var(--muted);max-width:65ch;line-height:1.75}
/* 404 / error page — eyebrow → big heading → copy → actions */
.error-404{max-width:640px;padding:14px 0 48px}
.error-eyebrow{margin:0 0 .55em;font-weight:700;font-size:.82rem;letter-spacing:.14em;text-transform:uppercase;color:var(--saffron-dark)}
.error-404 h1{font-size:clamp(2.2rem,6vw,3.4rem);line-height:1.06;margin:0 0 .3em;color:var(--navy-deep)}
.error-404 .lead{margin:0 0 1.7em;max-width:60ch}
.error-actions{display:flex;flex-wrap:wrap;gap:14px;margin:0}
html.dark-mode .error-404 h1{color:#ffffff}
html.dark-mode .section h2{color:#ffffff}
@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}
/* The iframe variant needs a real height (an <iframe> with no height collapses to
   the 300x150 default and shows as a tiny empty box). Give it a tall portrait
   preview area and make the iframe fill it. The .pdf-doc image variant sizes
   itself, so scope this to the plain (non-.pdf-doc) embed. */
.pdf-embed:not(.pdf-doc){min-height:520px}
.pdf-embed:not(.pdf-doc) iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.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)}

/* Two-column home block: intro/about copy on the left + a "What's New" notice
   board (v-marquee) aside on the right. Stacks on tablet/mobile. */
.home-split{display:grid;grid-template-columns:1fr 380px;gap:48px;align-items:start;margin:8px 0}
.home-split .hs-title{font-size:1.8rem;font-weight:800;color:var(--heading);margin:0 0 18px;position:relative;padding-bottom:12px;line-height:1.18}
.home-split .hs-title::after{content:"";position:absolute;left:0;bottom:0;width:64px;height:4px;border-radius:4px;background:var(--saffron)}
.home-split-intro p{color:var(--ink);line-height:1.7;margin:0 0 16px}
.home-split-aside{min-width:0}
@media (max-width:860px){.home-split{grid-template-columns:1fr;gap:30px}}

/* "What's New" news tabs — switch Notice Board / Recruitment / Tenders panels.
   Active tab = brand colour + brand underline (theme-driven). */
/* The tabs + notice board are ONE modern card (rounded, soft shadow). The tab strip
   is the card's top bar; the active tab is a filled theme-coloured pill that rhymes
   with the notice-board header below. The board drops its own frame so it merges
   seamlessly under the tabs — they never read as two separate blocks. */
.news-tabs{background:#fff;border:1px solid var(--line);border-radius:14px;box-shadow:0 6px 20px rgba(13,44,84,.10);overflow:hidden}
.news-tablist{display:flex;gap:4px;flex-wrap:wrap;margin:0;padding:8px 10px;background:var(--bg-alt);border-bottom:1px solid var(--line)}
.news-tablist button{background:transparent;border:0;border-radius:9px;padding:9px 16px;font-weight:700;font-size:.9rem;color:var(--muted);cursor:pointer;font-family:inherit;line-height:1.2;transition:color .15s,background .15s,box-shadow .15s}
.news-tablist button:hover{color:var(--navy-deep);background:rgba(13,44,84,.06)}
.news-tablist button[aria-selected="true"]{color:#fff;background:var(--nav-bar);box-shadow:0 2px 8px rgba(13,44,84,.26)}
.news-tablist button:focus-visible{outline:3px solid var(--ring);outline-offset:2px}
.news-panel[hidden]{display:none}
/* Notice board sits flush inside the unified card — no separate border/radius/shadow */
.news-tabs .v-marquee{border:0;border-radius:0;box-shadow:none;width:100%}
html.dark-mode .news-tabs{background:#111111;border-color:#ffd23f;box-shadow:none}
html.dark-mode .news-tablist{background:#0a0a0a;border-bottom-color:#ffd23f}
html.dark-mode .news-tablist button{color:#cfcfcf}
html.dark-mode .news-tablist button:hover{color:#fff;background:rgba(255,255,255,.06)}
html.dark-mode .news-tablist button[aria-selected="true"]{color:#0e1622;background:var(--dm-yellow);box-shadow:none}

/* ===== 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:flex;width:fit-content;align-items:center;gap:9px;margin:24px auto 0;font-weight:700;font-size:.92rem;color:#fff;background:var(--navy);text-decoration:none;border:0;border-radius:30px;padding:11px 24px;box-shadow:0 4px 12px rgba(18,62,116,.22);transition:transform .15s ease,box-shadow .15s ease,background .15s ease}
.feed-viewall::after{content:"\2192";font-weight:700;transition:transform .2s ease}
.feed-viewall:hover,.feed-viewall:focus-visible{color:#fff;background:var(--navy-dark);transform:translateY(-2px);box-shadow:0 10px 24px rgba(18,62,116,.32);outline:none}
.feed-viewall:hover::after,.feed-viewall:focus-visible::after{transform:translateX(4px)}
html.dark-mode .feed-tablist{border-bottom-color:#ffd23f}
html.dark-mode .feed-tablist button{color:#cfcfcf}
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:#ffd23f}
html.dark-mode .feed-items li{border-color:#ffd23f}
html.dark-mode .feed-items li:nth-child(even){background:#0a0a0a}
html.dark-mode .feed-link{color:#ffffff}
html.dark-mode .feed-link:hover,html.dark-mode .feed-link:focus-visible{color:var(--dm-yellow)}
html.dark-mode .feed-empty{background:#0a0a0a;border-color:#ffd23f;color:#cfcfcf}
html.dark-mode .feed-viewall{color:#fff}

/* ===== Contact info cards (icon badge + label + value) ===== */
.contact-info-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:18px;margin:0 0 24px}
.contact-card{display:flex;align-items:flex-start;gap:15px;background:var(--card);border:1px solid var(--line);border-radius:14px;padding:22px;box-shadow:var(--shadow);transition:transform .18s ease,box-shadow .18s ease}
.contact-card:hover{transform:translateY(-3px);box-shadow:0 12px 30px rgba(13,44,84,.14)}
.contact-ico{flex:0 0 auto;width:46px;height:46px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;background:color-mix(in srgb,var(--nav-bar) 12%,#fff);color:var(--nav-bar);font-size:1.1rem}
.contact-card-body{min-width:0}
.contact-card-body h3{margin:3px 0 6px;font-size:.76rem;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--muted)}
.contact-card-body p{margin:0 0 6px;font-size:1rem;color:var(--ink);line-height:1.5;overflow-wrap:anywhere}
.contact-card-body p:last-child{margin-bottom:0}
.contact-card-body p a{color:var(--navy-deep);text-decoration:none;font-weight:600}
.contact-card-body p a:hover,.contact-card-body p a:focus-visible{color:var(--saffron-darker);text-decoration:underline}
.contact-link{display:inline-flex;align-items:center;gap:5px;margin-top:4px;font-weight:700;font-size:.9rem;color:var(--saffron-darker);text-decoration:none}
.contact-link:hover,.contact-link:focus-visible{text-decoration:underline}
html.dark-mode .contact-card{background:#111111;border-color:#ffd23f}
html.dark-mode .contact-ico{background:rgba(126,179,255,.16);color:#ffd23f}
html.dark-mode .contact-card-body h3{color:#cfcfcf}
html.dark-mode .contact-card-body p,html.dark-mode .contact-card-body p a{color:#ffffff}

.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 */
/* feature cards: clean equal columns (no lone-centered orphan); vertical modern card. */
.feature-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin:0}
.feature-card{display:flex;flex-direction:column;align-items:flex-start;gap:14px;padding:26px}
.feature-icon{flex:0 0 auto;width:72px;height:72px;object-fit:cover;border-radius:12px}
.feature-text h3{margin:0 0 8px}
.feature-text p{margin:0;color:var(--muted)}
@media (max-width:920px){.feature-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:600px){.feature-grid{grid-template-columns:1fr}}

/* ---- Buttons ---- */
.btn{display:inline-block;background:var(--saffron-dark);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-darker);color:#fff;transform:translateY(-2px)}
.btn-navy{background:var(--navy);box-shadow:0 3px 10px rgba(18,62,116,.3)}
.btn-navy:hover{background:var(--navy-dark)}
.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,.cta-band .btn-outline{border-color:#fff;color:#fff}
.hero .btn-outline:hover,.cta-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:800;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:800;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:#000000}
html.dark-mode .msg-card{background:#111111;border-color:#ffd23f;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 #000000}
html.dark-mode .msg-quote p{color:#e6edf6}
html.dark-mode .msg-name{color:#ffffff}
html.dark-mode .msg-role{color:#aebccd}
html.dark-mode .msg-attr{border-color:#ffd23f}
@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}}

/* ============================ Quote band (.quote-band) — full-width themed message/quote band ============================ */
.quote-band{background:#e3edfa;background:radial-gradient(ellipse at center,color-mix(in srgb,var(--saffron) 7%,#fff) 0%,color-mix(in srgb,var(--saffron) 18%,#fff) 50%,color-mix(in srgb,var(--saffron) 34%,#fff) 100%);position:relative;padding:70px 0;overflow:hidden}
.quote-band::before{content:"";position:absolute;left:0;right:0;top:0;height:5px;background:var(--saffron-dark)}
.quote-band::after{content:"";position:absolute;left:0;right:0;bottom:0;height:5px;background:var(--saffron-dark)}
.quote-band h2{display:none}
.quote-grid{display:grid;grid-template-columns:380px 1fr;gap:60px;align-items:center;position:relative;z-index:1}
.quote-photo-img{width:100%;max-width:380px;height:100%;border-radius:16px;box-shadow:0 12px 32px rgba(13,44,84,.20);border:5px solid #fff;object-fit:cover;object-position:top center;display:block;background:#f3f6fb}
.quote-photo{width:100%;max-width:380px;aspect-ratio:3/4;background:transparent}
.quote-band .quote-text{font-size:1.08rem;line-height:1.8;color:#f4f8ff;font-style:normal;border:0;padding:34px 48px 8px 0;margin:0;position:relative;font-family:var(--font);font-weight:500;max-width:62ch}
/* Big stylized quote marks — light peach/cream, large + decorative */
.quote-band .quote-text .quote-mark{display:none}
.quote-band .quote-text::before{position:absolute;font-family:Georgia,"Times New Roman",serif;color:rgba(255,255,255,.32);font-size:4rem;line-height:1;font-weight:400;pointer-events:none;content:"\201C";top:-8px;left:-4px}
.quote-band .quote-text::after{content:none}
/* Higher-contrast text on the saffron gradient (#ffe9c4 → #fcc174 → #f7a248):
   darker maroon for the name (passes AA) and near-black grey for the meta. */
.quote-band .quote-name{font-size:1.3rem;font-weight:800;color:#fff;margin:22px 0 3px;font-family:var(--font);font-style:normal;letter-spacing:0}
.quote-band .card-meta{font-size:.92rem;color:rgba(255,255,255,.85);margin:0;font-weight:600}

/* ============================ CTA band (.cta-band) — full-width call-to-action: photo + count + QR ============================
   The photo is a real <img> so the card is ALWAYS visible: on wide screens it fills
   the band like a backdrop (image left, content over the light area); on narrow
   screens it stacks as a full banner above the content. Generic — use for any CTA. */
.cta-band{position:relative;overflow:hidden;background:#eef3f8;background:linear-gradient(105deg,color-mix(in srgb,var(--saffron) 7%,#fff) 0%,#eef3f1 50%,color-mix(in srgb,var(--saffron) 11%,#fff) 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. */
.cta-band-photo{position:absolute;left:0;top:0;bottom:0;right:auto;width:min(100%,1680px);z-index:0}
.cta-band-photo picture{display:block;width:100%;height:100%}
.cta-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. */
.cta-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. */
.cta-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)}
.cta-band-head{width:auto;max-width:520px;text-align:center;display:flex;flex-direction:column;align-items:center;gap:14px}
.cta-band-eyebrow{margin:0;color:var(--saffron-darker);font-size:.8rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;opacity:.9}
.cta-band-title{color:var(--heading,var(--navy));font-size:clamp(1.55rem,4vw,2.2rem);font-weight:800;margin:0;letter-spacing:.02em;text-transform:uppercase;line-height:1.1;overflow-wrap:break-word}
.cta-band-title::after{content:"";display:block;width:56px;height:4px;background:var(--saffron);margin:14px auto 0;border-radius:3px}
.cta-band-sub{margin:0;max-width:40ch;color:var(--ink,#1f2a37);font-size:1rem;line-height:1.6;font-weight:500}
.cta-band-row{display:flex;align-items:stretch;justify-content:center;gap:26px;flex-wrap:nowrap;width:auto}
.cta-count{background:linear-gradient(160deg,var(--navy) 0%,var(--navy-deep) 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 */
.cta-count .num{font-size:3.6rem;font-weight:800;line-height:1;letter-spacing:-.01em;font-variant-numeric:tabular-nums;display:block;text-align:center}
.cta-count-lbl{font-size:1rem;font-weight:500;letter-spacing:.02em;opacity:.95}
.cta-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)}
.cta-qr-heading{color:#556;font-size:.95rem;margin:0;font-weight:600;letter-spacing:.02em}
.cta-qr-img{width:172px;height:172px;display:block;border-radius:6px}
.cta-qr-btn{background:var(--navy);box-shadow:0 4px 12px rgba(11,83,148,.34);padding:11px 30px}
.cta-qr-btn:hover,.cta-qr-btn:focus-visible{background:var(--navy-dark);transform:translateY(-1px)}

/* Dark-mode adjustments */
html.dark-mode .quote-band{background:radial-gradient(ellipse at center,#3a2a14 0%,#2a1d0c 60%,#1a1408 100%)}
html.dark-mode .quote-band .quote-text{color:#ffffff}
html.dark-mode .quote-band .quote-text::before,
html.dark-mode .quote-band .quote-text::after{color:rgba(255,201,128,.35)}
html.dark-mode .quote-band .quote-name{color:#ffd23f}
html.dark-mode .quote-band .card-meta{color:#cfcfcf}
/* 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 .cta-band{background:#0e1622}
html.dark-mode .cta-band::after{background:linear-gradient(90deg,transparent 22%,rgba(6,11,18,.62) 50%,rgba(6,11,18,.92) 78%)}
html.dark-mode .cta-band-eyebrow{color:var(--dm-yellow) !important}
html.dark-mode .cta-band-title::after{background:var(--dm-yellow);background-image:none}
html.dark-mode .cta-count{background:#000;background-image:none;border:1.5px solid var(--dm-yellow)}
html.dark-mode .cta-qr-card{background:#000;border:1.5px solid var(--dm-yellow)}
html.dark-mode .cta-qr-img{background:#fff;padding:6px;border-radius:6px}

@media (max-width:760px){
  .quote-band{padding:42px 0}
  .quote-band .quote-text{padding:30px 20px 36px 16px;font-size:1rem}
  .quote-band .quote-text::before{font-size:4.5rem;top:-4px}
  .quote-band .quote-text::after{font-size:4.5rem;bottom:-22px;right:10px}
  .quote-photo-img,.quote-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){
  .cta-band-photo{position:static;inset:auto;height:clamp(250px,48vw,430px)}
  .cta-band-photo img{height:100%;object-fit:cover;object-position:center}
  .cta-band::after{display:none}
  .cta-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}
  .cta-band-head{width:100%;max-width:100%}
  .cta-band-sub{max-width:min(100%,36ch)}
  .cta-band-row{width:100%;flex-wrap:wrap;gap:24px}
}
@media (max-width:520px){
  .cta-band-row{gap:18px}
  .cta-count{padding:24px 32px;min-width:0;width:100%;max-width:320px}
  .cta-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:800;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,#0f7b8c,#0a5d6b)}
.stats-grid .stat-card:nth-child(4n){background:linear-gradient(160deg,var(--navy),var(--navy-deep))}
@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) ============================ */
.member-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}
.member-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}
.member-card:hover{transform:translateY(-5px);box-shadow:0 16px 40px rgba(13,44,84,.18)}
.member-card:hover::before{opacity:1}
.member-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}
.member-card:hover .member-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)}
.member-role{font-weight:800;color:var(--navy-deep);margin:0;font-size:1.05rem;letter-spacing:-.005em}
.member-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:none}
.read-msg::after{content:"\2192";font-weight:700;font-size:1em;transition:transform .25s ease}
.read-msg:hover,.read-msg:focus-visible{color:var(--saffron-darker);text-decoration:none}
.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 .member-card{background:#111111;border-color:#ffd23f}
html.dark-mode .member-role{color:#ffffff}
html.dark-mode .member-name{color:#ffd23f}
html.dark-mode .member-photo{background:#0e1622;box-shadow:0 6px 20px rgba(0,0,0,.4),0 0 0 5px #ffd23f}

/* ============================ 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}
/* Breathing room under the image — whichever text comes first after the picture
   (title, or date meta) gets generous top spacing, so it no longer hugs the image. */
.event-card > a:first-child + h3,
.event-card > a:first-child + .card-meta,
.event-card > .album-cover:first-child + h3,
.event-card > .album-cover:first-child + .card-meta{margin-top:22px}
.event-card h3{margin:0 0 10px;font-size:1.16rem;line-height:1.4;font-weight:700;letter-spacing:-.011em}
.event-card h3 a{color:var(--navy-dark);text-decoration:none;transition:color .18s ease}
.event-card h3 a:hover{color:var(--saffron-dark)}
.event-card .card-meta{margin:22px 0 10px;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 7 Pro";font-weight:400;font-size:.9em;line-height:1;color:var(--saffron-darker);opacity:.85}
.event-card > p{margin:0 0 20px;color:var(--ink);line-height:1.65;font-size:.93rem}
.grid:has(> .event-card){align-items:stretch}

/* Read More — modern saffron pill button (event cards only; keeps the member-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(0,0,0,.28);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:#111111;border-color:#ffd23f}
html.dark-mode .event-card > a:first-child{background:linear-gradient(135deg,#0e1622 0%,#0a0a0a 100%)}
html.dark-mode .event-card h3 a{color:#ffffff}
html.dark-mode .event-card > p{color:#ffffff}

/* ============================ 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:800;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(21,101,192,.14)}
.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,.policy-section > summary:active{background:#fff}
.policy-section[open] > summary{border-bottom:1px solid var(--line);background:#fff;border-radius:var(--radius-sm) var(--radius-sm) 0 0}
.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:#111111;border-color:#ffd23f}
html.dark-mode .policy-toc h2,html.dark-mode .policy-toc a{color:#ffffff}
html.dark-mode .policy-section{background:#111111;border-color:#ffd23f}
html.dark-mode .policy-section > summary{color:#fff}
html.dark-mode .policy-section[open] > summary,html.dark-mode .policy-section > summary:hover,html.dark-mode .policy-section > summary:active{background:#1a1a1a}
html.dark-mode .policy-body{color:#ffffff}
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:#111111;border-color:#ffd23f;border-left-color:var(--saffron)}
html.dark-mode .faq-q{color:#fff}
html.dark-mode .faq-a{color:#ffffff}
/* Policies & Disclosures hub — grouped link cards to each policy page */
.policy-group{margin:26px 0}
.policy-group > h2{font-size:1.5rem;font-weight:800;position:relative;display:inline-block;margin:0 0 20px;color:var(--navy-deep);line-height:1.2;padding-bottom:10px}
.policy-group > h2::after{content:"";position:absolute;left:0;bottom:0;width:56px;height:4px;border-radius:4px;background:var(--saffron)}
html.dark-mode .policy-group > h2{color:#f0f4fa}
html.dark-mode .policy-group > h2::after{background:var(--dm-yellow)}
/* ---- SECTION INDEX CARD (.navcard) — the GIGW twin of .s3-navcard --------------------------
   For a landing page whose only content is the pages beneath it (About Us, Others, Publication,
   Policy/Acts/Rules). It replaces a card carrying a title AND a filled "Open" button, which had
   three faults: the button sat directly under the title, so a two-line title pushed it down and
   the buttons never lined up across a row; a row of saturated blocks shouted louder than the
   titles they belonged to, on a page whose whole job is to present those titles; and the title
   and the button were TWO links to the SAME page, which a screen-reader user hears twice.

   The WHOLE card is one link, and the action reads as an arrow chip that fills on hover.
   `.policy-card` above is the flatter sibling — a plain arrow, no chip — for long lists of
   statutory pages; use `.navcard` when the cards are a section's few main destinations.
   Do NOT add a description to these: such a page has titles and nothing else.

     <article class="card navcard"><h2><a class="navlink" href="...">Title</a></h2></article>   */
.navcard{display:flex;padding:0;overflow:hidden}
.navcard :is(h2,h3,h4){display:flex;margin:0;width:100%;font-size:1.05rem;line-height:1.35;font-weight:800}
/* flex:1 rather than height:100% — the link then fills the card whatever the tallest title in
   the row makes it, so every arrow in a row sits on the same line. */
.navlink{display:flex;flex:1 1 auto;align-items:center;justify-content:space-between;gap:16px;
  padding:20px 22px;text-decoration:none;color:var(--navy-deep)}
.navlink::after{content:"\2192";flex:0 0 auto;display:inline-flex;align-items:center;
  justify-content:center;width:34px;height:34px;border-radius:50%;background:var(--soft,#eef3fb);
  color:var(--navy);font-weight:800;font-size:1.05rem;
  transition:background .3s cubic-bezier(.22,1,.36,1),color .3s cubic-bezier(.22,1,.36,1),transform .3s cubic-bezier(.22,1,.36,1)}
.navcard{transition:transform .3s cubic-bezier(.22,1,.36,1),box-shadow .3s cubic-bezier(.22,1,.36,1),border-color .3s}
.navcard:hover,.navcard:focus-within{transform:translateY(-3px);box-shadow:var(--shadow-lg);border-color:var(--navy)}
.navcard:hover .navlink,.navcard:focus-within .navlink{color:var(--navy)}
.navcard:hover .navlink::after,.navcard:focus-within .navlink::after{
  background:var(--navy);color:#fff;transform:translateX(3px)}
@media (prefers-reduced-motion:reduce){.navcard,.navlink::after{transition:none}
  .navcard:hover,.navcard:focus-within{transform:none}
  .navcard:hover .navlink::after{transform:none}}
html.dark-mode .navlink{color:#ffffff}
html.dark-mode .navcard:hover .navlink,html.dark-mode .navcard:focus-within .navlink{color:var(--dm-yellow)}
html.dark-mode .navlink::after{background:#2a2a2a;color:var(--dm-yellow)}
html.dark-mode .navcard:hover .navlink::after,html.dark-mode .navcard:focus-within .navlink::after{
  background:var(--dm-yellow);color:#111}

.policy-card{transition:transform .15s,box-shadow .15s,border-color .15s;display:flex;align-items:center}
.policy-card h3{width:100%}
.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:800;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:#ffffff}
html.dark-mode .policy-card h3 a::after{color:#fff}
/* dark mode: decorative underlines/borders that used the blue brand token -> yellow */
html.dark-mode .footer-h{border-bottom-color:var(--dm-yellow)}
/* 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:#1a1a1a}
html.dark-mode .policy-meta-row span{background:#1a1a1a;color:#cfcfcf}
/* 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:var(--bg);padding:46px 0 50px;border-top:1px solid var(--line)}
.gov-portals .container{display:flex;flex-direction:column;align-items:center;gap:24px}
.gov-portals-title{margin:0;font-size:.95rem;font-weight:800;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:#fdeee3;background:color-mix(in srgb,var(--accent,var(--saffron,#e8650c)) 12%,#fff);border-color:var(--accent,var(--saffron,#e8650c));color:var(--accent,var(--saffron,#e8650c));transform:translateY(-2px);box-shadow:0 4px 12px rgba(8,31,61,.2)}
html.dark-mode .gov-portals{background:#0a0a0a;border-color:#ffd23f}
html.dark-mode .gov-portals-title{color:#ffffff}
html.dark-mode .gov-portal-pill{background:#111111;color:#ffffff;border-color:#ffd23f}
html.dark-mode .gov-portal-pill:hover{background:#ffd23f;color:#000000}
@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:18px;flex-wrap:wrap;padding:18px 22px;max-width:var(--maxw);margin:0 auto;font-size:.84rem;color:#cdd9ec;border-top:1px solid rgba(255,255,255,.08)}
.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{text-align:right;display:flex;flex-direction:column;gap:2px}
.footer-bottom-bar .fb-right span strong{color:#fff;transition:color .2s ease}
/* Brief highlight when the live visitor count ticks up (added/removed by main.js) */
#page-views.count-bump{animation:count-bump .6s ease}
@keyframes count-bump{0%{color:#fff;transform:scale(1.18)}100%{color:var(--accent-on-dark);transform:scale(1)}}
#page-views{display:inline-block}
@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) ============================ */
.member-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 .quote-grid{display:contents}
.page-body section.card .member-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:800;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:Georgia,serif;position:relative;padding:0 0 0 18px;border-left:3px solid var(--saffron)}
.page-body section.card blockquote::before{content:"\201C";font-weight:900;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:not(.ok):not(.err){margin:14px 0 0;background:var(--bg);border:1px dashed var(--line);color:var(--navy-deep)}
html.dark-mode .page-body section.card{background:#111111;border-color:#ffd23f}
html.dark-mode .page-body section.card h2{color:#ffffff}
html.dark-mode .page-body section.card blockquote{color:#ffffff}
@media (max-width:760px){
  .member-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 .member-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(21,101,192,.12);color:var(--saffron-dark);font-size:.72rem;font-weight:800;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}
/* NO overflow:hidden here — that would clip the floating close button. The corner
   rounding is applied to the inner CONTENT instead (frame top, title bottom). */
.video-modal-inner{position:relative;width:100%;max-width:960px;background:#000;border-radius:var(--radius);box-shadow:0 20px 60px rgba(0,0,0,.6)}
.video-modal-frame{position:relative;width:100%;aspect-ratio:16/9;background:#000;border-radius:var(--radius) var(--radius) 0 0;overflow:hidden}
.video-modal-frame iframe{width:100%;height:100%;border:0;display:block}
/* Close button FLOATS just above the video's top-right corner (outside the
   container). The inner no longer clips, so the negative offsets show fully. */
.video-modal-close{position:absolute;top:-16px;right:-16px;width:42px;height:42px;border-radius:50%;border:0;background:#fff;color:var(--navy-deep);font-size:1.05rem;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 i{display:block;line-height:1}
/* Shown while a self-hosted MP4 is being re-fetched as a blob (the fallback for
   servers that refuse the <video> element's range requests), and if that fails. */
.video-modal-msg {
   display: flex;
   align-items: center;
   justify-content: center;
   width: 100%;
   height: 100%;
   margin: 0;
   padding: 24px;
   text-align: center;
   color: #f0f4fa;
   font-size: .95rem;
   line-height: 1.6
}

.video-modal-msg a {
   color: var(--accent-on-dark);
   font-weight: 600
}
.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;border-radius:0 0 var(--radius) var(--radius)}
.video-modal-title a{color:var(--accent-on-dark);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:#111111;border-color:#ffd23f}
html.dark-mode .video-meta h3{color:#ffffff}
html.dark-mode .video-meta .video-date{color:#cfcfcf}

/* ============================ Last updated indicator ============================ */
.last-updated-badge{display:inline-block;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.35);border-radius:30px;padding:3px 12px;font-size:.82rem;color:var(--accent-on-dark);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:800;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:700;color:var(--heading,#0e5b60);padding:10px 12px;caption-side:top}
html.dark-mode .data-table caption{color:var(--dm-yellow,#ffd23f)}
.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:auto}
.data-table.stack-sm th,.data-table.stack-sm td{padding:8px 9px;font-size:.82rem;line-height:1.4}
.data-table.stack-sm td a{overflow-wrap:anywhere}
@media (min-width:641px){
  .data-table.stack-sm td[data-label="Sr No"],.data-table.stack-sm td[data-label="Sr No."],
  .data-table.stack-sm:has(td[data-label="Sr No"]) th:first-child,
  .data-table.stack-sm:has(td[data-label="Sr No."]) th:first-child{width:42px;text-align:center}
}

/* ============================ 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:#1b8f4d;color:#1b8f4d}
.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-1),var(--footer-2));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:#ffd23f}
html.dark-mode .page-body .card .footer-list a:hover{color:var(--accent-on-dark)}
.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:#fff;font-size:.9rem;line-height:1.5}
.footer-contact svg{flex:0 0 auto;width:18px;height:18px;color:var(--accent-on-dark);margin-top:2px}
.footer-contact i[class*="fa-"]{flex:0 0 auto;width:18px;text-align:center;color:var(--accent-on-dark);margin-top:3px;font-size:14px}
.footer-contact a{color:#fff;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-path:inset(50%);clip-path:inset(50%)}
.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:#fff;font-weight:600}
.site-footer .wim a:hover{color:#fff;text-decoration:underline}
/* external-link arrows in the footer columns are white (not the theme accent) */
.site-footer .ext-ico{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:#111111;border-color:#ffd23f;color:#ffffff}
html.dark-mode .page-body .wim strong{color:#fff}
/* A WIM inside the FOOTER is plain text (like the built sites), never the white content-page card —
   even when the footer is nested in .page-body (e.g. the component-catalogue demo). Higher specificity
   (footer.site-footer .wim) beats .page-body .wim, so the footer WIM stays boxless on any page. */
footer.site-footer .wim,html.dark-mode footer.site-footer .wim{background:none;border:0;box-shadow:none;padding:0;border-radius:0;margin:0;color:#e3ebf5}
footer.site-footer .wim strong{color:#fff}
footer.site-footer .wim a{color:#fff}
html.dark-mode .page-body .wim a{color:#ffd23f}
.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,.08)}
.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:#fff;font-weight:800;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,.5);font-size:.7rem}
.footer-bottom{background:var(--footer-2);border-top:1px solid rgba(255,255,255,.1)}
.footer-bottom-inner{padding:18px 22px;max-width:var(--maxw);margin:0 auto;font-size:.84rem;color:#fff}
.footer-bottom-inner p{margin:4px 0}
.footer-bottom a{color:#fff}
.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;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}
.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:var(--saffron-darker);border-color:rgba(255,255,255,.45);transform:translateY(-3px);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}
/* Accessibility pill stays the SAME white pill on hover/focus/open — no gradient
   fill, no lift, no extra shadow (the Bhashini-pill hover looked odd here). */
.a11y-toggle:hover,.a11y-toggle:focus-visible,.a11y-toggle[aria-expanded="true"]{background:#fff;box-shadow:0 2px 8px rgba(0,0,0,.25);transform:none}
.a11y-toggle:hover,.a11y-toggle:hover .a11y-ico,.a11y-toggle:hover .bh-label,.a11y-toggle:hover .bh-caret,.a11y-toggle:hover .svg-ico,
.a11y-toggle:focus-visible,.a11y-toggle:focus-visible .svg-ico,
/* WHEN OPEN the pill is white, so keep the icon + caret BLACK (the shared
   .bhashini-toggle[aria-expanded] rule turns .svg-ico white → invisible here). */
.a11y-toggle[aria-expanded="true"],.a11y-toggle[aria-expanded="true"] .a11y-ico,.a11y-toggle[aria-expanded="true"] .bh-label,.a11y-toggle[aria-expanded="true"] .bh-caret,.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:800;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:800;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. */
/* Accent = the theme PRIMARY (--navy/--navy-deep) so the dropdown matches each
   template's primary colour, not the (possibly different) --saffron accent. */
.a11y-group-label{display:block;font-size:11.5px;text-transform:uppercase;letter-spacing:.08em;font-weight:800;color:var(--navy-deep);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:800;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(--navy);outline:none}
.a11y-panel .font-btn[data-font="reset"]{background:var(--navy-deep);color:#fff;border-color:var(--navy-deep)}
.a11y-panel .font-btn[data-font="reset"]:hover{background:var(--navy-deep)}
.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}
/* The icon box is FIXED so swapping the glyph (moon <-> sun) can never move anything: the sun is a
   TALLER glyph than the moon, so with only `width` pinned the row grew 39px -> 41px and the whole
   panel 208px -> 210px the moment dark mode came on. Pin HEIGHT + line-height + inline-flex too, so
   the glyph is centred inside a box of constant size and the dropdown is byte-identical in both
   modes. (Matches the S3WaaS panel, whose `.s3-a11y-item i` box is already fixed.) */
.a11y-panel .dark-btn::before{font-size:17px;line-height:18px;width:18px;height:18px;display:inline-flex;
  align-items:center;justify-content:center;text-align:center;flex:0 0 auto}
.a11y-panel .dark-btn::before{content:"\f186";font-family:"Font Awesome 7 Pro";font-weight:900;color:var(--navy-deep)}
/* MOON in light mode (click = go dark) -> SUN in dark mode (click = go back to light), so the icon
   shows the action you are about to take. Driven by html.dark-mode, which head.js sets BEFORE first
   paint, so the correct icon is painted immediately with no flip. fa-moon \f186 / fa-sun \f185 —
   both are in the free fa-solid webfont we ship (never fa-solid/fa-solid: Pro-only => tofu). */
html.dark-mode .a11y-panel .dark-btn::before{content:"\f185"}
.a11y-panel .bhashini-toggle{width:100%;height:44px;background:linear-gradient(135deg,var(--navy) 0%,var(--navy-deep) 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:800}
.a11y-panel .bhashini-toggle::before{content:"अA";color:#fff;font-family:"Noto Sans Devanagari","Segoe UI",sans-serif;font-weight:800;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:#111111;color:#ffffff;border:1px solid #ffd23f}
html.dark-mode .a11y-panel::before{background:#111111;border-color:#ffd23f}
html.dark-mode .a11y-menu-head{color:#cfcfcf;border-bottom-color:#ffd23f}
html.dark-mode .a11y-panel-head{border-bottom-color:#ffd23f}
html.dark-mode .a11y-panel-head h3{color:#fff}
html.dark-mode .a11y-panel-close{color:#cfcfcf}
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:#ffffff}
html.dark-mode .a11y-panel .font-btn:hover{background:#1a1a1a}
html.dark-mode .a11y-panel .dark-btn{background:#0e1622;color:#ffffff}
html.dark-mode .a11y-panel .dark-btn:hover{background:#1a1a1a}
html.dark-mode .a11y-panel .bhashini-menu{background:#0e1622;border-color:#ffd23f}
html.dark-mode .a11y-panel .bhashini-menu button{color:#ffffff}
html.dark-mode .a11y-panel .bhashini-menu button:hover,html.dark-mode .a11y-panel .bhashini-menu button[aria-pressed="true"]{background:#1a1a1a;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%,#06182f 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:var(--accent-on-dark)}
html.dark-mode .util-bar .bhashini-toggle{background:linear-gradient(135deg,#fff 0%,#ffffff 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:#ffffff}
html.dark-mode .masthead{background:#0a0a0a;border-bottom-color:#1a1a1a}
html.dark-mode .brand-title{color:#fff}
/* Dark mode: the masthead logo + emblems are usually DARK artwork (black/monochrome)
   that disappears on the dark masthead bar — give them a white backing so they stay
   visible (mirrors the S3 `.s3-dark .s3-logo/.s3-emblem` fix). GIGW sites + templates. */
html.dark-mode .masthead .brand-logo,html.dark-mode .masthead-emblems .emblem{background:#fff;padding:3px;border-radius:4px}
html.dark-mode .brand-sub{color:#cfcfcf}
html.dark-mode .mainnav{background:#000000;box-shadow:0 2px 12px rgba(0,0,0,.4)}
html.dark-mode .util-bar{background:#000000;border-bottom-color:#333333}
html.dark-mode .latest-ticker{background:#000000}
html.dark-mode h1,html.dark-mode h2,html.dark-mode h3,html.dark-mode h4{color:#ffffff}
html.dark-mode a{color:#ffd23f}
html.dark-mode .section{background:transparent}
html.dark-mode .section-alt{background:#0a0a0a}
html.dark-mode .card{background:#111111;border-color:#ffd23f;box-shadow:0 2px 8px rgba(0,0,0,.35);color:#ffffff}
html.dark-mode .card h3{color:#ffffff}
html.dark-mode .card-meta,html.dark-mode .lead,html.dark-mode .prose p{color:#cfcfcf}
html.dark-mode .lead{color:#ffffff}
html.dark-mode .quote-band{background:linear-gradient(135deg,#0a0a0a,#111111)}
html.dark-mode .quote-text{color:#ffffff}
html.dark-mode .quote-name{color:#ffd23f}
html.dark-mode .quote-photo-img{border-color:#ffd23f}
html.dark-mode .timeline-band{background:#0a0a0a}
html.dark-mode .tb-img{border-color:#ffd23f}
html.dark-mode .tl-period{color:#ffd23f}
html.dark-mode .stats-icons .stat{background:linear-gradient(160deg,#111111,#0e1622);border:1px solid #ffd23f}
html.dark-mode .member-photo{border-color:#ffd23f}
html.dark-mode .member-role{color:#ffd23f}
html.dark-mode .member-name{color:#cfcfcf}
html.dark-mode .data-table{background:#111111;color:#ffffff}
html.dark-mode .data-table th,html.dark-mode .data-table td{border-color:#ffd23f}
html.dark-mode .data-table thead th{background:#000000}
html.dark-mode .data-table tbody th[scope="row"]{background:#0a0a0a}
html.dark-mode .data-table tbody tr:nth-child(even) td{background:#0a0a0a}
html.dark-mode .partner-band,html.dark-mode .logo-marquee{background:#0a0a0a;border-color:#1a1a1a}
html.dark-mode .logo-marquee::before{background:linear-gradient(90deg,#0a0a0a,rgba(22,32,46,0))}
html.dark-mode .logo-marquee::after{background:linear-gradient(270deg,#0a0a0a,rgba(22,32,46,0))}
html.dark-mode .lm-item{background:#111111;border-color:#ffd23f}
html.dark-mode .lm-item .lm-label{color:#ffffff}
html.dark-mode .lm-title{color:#cfcfcf}
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:#111111;color:#ffffff;border-color:#ffd23f}
html.dark-mode .form-field input::placeholder,html.dark-mode .form-field textarea::placeholder{color:#999999}
html.dark-mode .region-tablist button{background:#111111;color:#ffffff;border-color:#ffd23f}
html.dark-mode .region-tablist button:hover{background:#1a1a1a;color:#fff}
html.dark-mode .region-tablist button[aria-selected="true"]{background:#000000;color:#fff;border-color:#000000}
html.dark-mode .region-panels{background:#111111;border-color:#ffd23f}
html.dark-mode .region-panel table{color:#ffffff}
html.dark-mode .region-panel th,html.dark-mode .region-panel td{border-color:#ffd23f}
html.dark-mode .region-panel thead th{background:#000000;color:#ffffff}
html.dark-mode .region-panel .panel-meta{background:#0a0a0a;color:#cfcfcf;border-color:#ffd23f}
html.dark-mode .region-panel tbody tr:hover td{background:#1a1a1a}
html.dark-mode .region-panel td.contact a{color:#ffd23f}
html.dark-mode .region-filter input{background:#111111;color:#ffffff;border-color:#ffd23f}
html.dark-mode .region-filter .filter-meta{color:#cfcfcf}
html.dark-mode .si-col{background:#111111;border-color:#ffd23f}
html.dark-mode .si-col-foot{background:#0a0a0a;border-color:#ffd23f}
html.dark-mode .si-col-body th,html.dark-mode .si-col-body td{border-color:#ffd23f}
html.dark-mode .si-col-body thead th{background:#0a0a0a;color:#ffffff}
html.dark-mode .si-col-body tbody tr:hover td{background:#1a1a1a}
html.dark-mode .nav-search input{background:rgba(255,255,255,.06)}
html.dark-mode .bhashini-toggle{background:#ffffff}
html.dark-mode .bhashini-menu{background:#111111;color:#ffffff}
html.dark-mode .bhashini-menu button{color:#ffffff}
html.dark-mode .bhashini-menu button:hover,html.dark-mode .bhashini-menu button[aria-pressed="true"]{background:#1a1a1a;color:#fff}
html.dark-mode .member-featured{background:#111111;border-color:#ffd23f}

/* 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)}
  .quote-grid,.timeline-band .quote-grid{grid-template-columns:1fr;gap:22px}
  .quote-photo-img,.quote-photo,.tb-img{max-width:340px}
  .masthead-meta{display:none}
  .stay-informed-grid{grid-template-columns:1fr}
  .member-featured{grid-template-columns:1fr;text-align:center}
  .member-featured .member-photo{margin:0 auto}
  .footer-bottom-bar{flex-wrap:nowrap;gap:12px}
  .footer-bottom-bar .fb-right{text-align:right;flex:0 0 auto}
}
@media (max-width:1200px){
  .nav-link{padding:13px 9px;font-size:.82em}
  .nav-search input{width:150px}
}
@media (max-width:1024px){
  .nav-link{padding:12px 7px;font-size:.78em}
  .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:.92em;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:var(--accent-on-dark);font-size:.74em}
  .submenu .dl-link .dl-meta{color:rgba(255,255,255,.92);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:var(--accent-on-dark);color:var(--navy-deep)}
  /* Same contrast fix for the .nav-download markup (icon element + meta line):
     the desktop saffron file icon and muted "(PDF, 67 KB)" meta are invisible on the
     dark mobile menu — force high-contrast WHITE so the type/size AND the download
     icon stay clearly visible (verified: icon rgb(255,255,255), meta ~white). */
  .nav-download .dl-meta{color:rgba(255,255,255,.92);font-weight:600}
  .nav-download .dl-ico{color:#fff}
  .nav-download:hover .dl-ico,.nav-download:focus-visible .dl-ico{color:var(--accent-on-dark)}
  .nav-download:hover .dl-meta,.nav-download:focus-visible .dl-meta{color:#fff}
  .nav-sublink.is-current{color:var(--accent-on-dark)}
}
@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 */
  .quote-band{padding:42px 0}
  .quote-band .quote-photo,.quote-band .quote-photo-img{max-width:260px;margin:0 auto 8px}
  .quote-band .quote-text{padding:30px 16px 36px 16px;font-size:1.02rem;line-height:1.7}
  .quote-band .quote-text::before{font-size:5rem;top:-6px;left:-4px}
  .quote-band .quote-text::after{font-size:5rem;bottom:-26px;right:8px}
  .quote-band .quote-name{font-size:1.2rem;text-align:center}
  .quote-band .card-meta{text-align:center}
  /* Timeline maroon band stacks image + text */
  .timeline-band{padding:46px 0}
  .timeline-band .quote-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 */
  .member-card{padding:24px 16px}
  .member-photo{width:130px;height:130px}
  .member-role{font-size:.95rem}
  .member-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.35rem;line-height:1.2}
  .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}
  /* 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 7px;font-size:.76rem}
  .util-nav .util-item:first-child{font-size:.66rem}
  .util-right{gap:6px}
  .bhashini-toggle{height:28px;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.2rem}
  .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 30px;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}
  .quote-grid,.timeline-band .quote-grid{gap:18px}
  .quote-band{padding:36px 0}
  .quote-band .quote-text{font-size:1.05rem;line-height:1.6}
  .quote-band .quote-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}
  .member-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.1rem}
  .brand-sub{font-size:.72em}
  .masthead-emblems .emblem{height:38px}
  .page-title{font-size:1.2rem}
  .section h2{font-size:1.2rem}
  .quote-band .quote-text{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 28px;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;overflow-wrap: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}
/* flex:0 0 auto is CRITICAL — these tracks are flex children of a flex feed; without it they SHRINK
   to the feed width, so the seamless translateX(-50%) loop becomes ~50% of the shrunk width and the
   ticker loops after ~1 item ("shows one, part of the next, jumps back"). All devices. BUILD-ERRORS §88 */
.lm-track,.latest-track{width:max-content;max-width:none;flex:0 0 auto}
.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}
.gv-celllabel{display:none}   /* injected translatable card label — hidden on desktop (where <thead th> shows); revealed only in the mobile card @media below */
/* 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;background:transparent;border:0;border-radius:0;overflow:visible}
  .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}
  /* When JS has injected the real, TRANSLATABLE label (.gv-celllabel), suppress the
     CSS ::before so the card shows a single, Bhashini-translatable label. */
  .gv-celllabels .data-table.stack-sm td::before{content:none}
  .data-table.stack-sm td .gv-celllabel{display:block;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:#111111}
  html.dark-mode .data-table.stack-sm td{border-bottom-color:#ffd23f}
  .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}
  .gv-celllabels .region-panel td::before,.gv-celllabels .si-col-body td::before{content:none}
  .region-panel td .gv-celllabel,.si-col-body td .gv-celllabel{display:block;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:#111111}
  html.dark-mode .table-wrap{border-color:#ffd23f;background:#111111}
}
@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}html.dark-mode .gallery-album-title{
   border-color: var(--dm-yellow);
}
.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:#111111;border-color:#ffd23f}
.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:none}                             /* was a CSS border-chevron — removed; FontAwesome <i> is the single arrow */
.scroller-arrow .svg-ico{font-size:20px;color:#fff}
.scroller-prev{left:-6px}
.scroller-next{right:-6px}
.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 .svg-ico{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 .svg-ico,html.dark-mode .scroller-arrow:focus-visible .svg-ico{color:#000}
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}
.v-marquee-viewport{position:relative;height:250px;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%)}
/* Movie-credits start (DEFAULT): a one-time intro (list begins one viewport-height BELOW = empty,
   first notice rises up from the bottom) hands off to the seamless loop at translateY(0). It sits
   PAUSED at the intro start while off-screen (sg-offscreen), so the roll begins when scrolled into
   view. --vm-intro/--vm-intro-dur/--vm-dur are set by initMarquee at the loop's px/sec. (BUILD-ERRORS §89) */
.v-marquee-track{list-style:none;margin:0;padding:0;animation:vm-credits-in var(--vm-intro-dur,3s) linear 1,vmarquee-scroll var(--vm-dur,18s) linear var(--vm-intro-dur,3s) 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(calc(-1 * var(--vm-loop, 50%)))}}
/* One-time movie-credits entrance: list starts one viewport-height BELOW (empty) so the first notice
   rises from the bottom, ending at translateY(0) where the seamless loop takes over. */
@keyframes vm-credits-in{from{transform:translateY(var(--vm-intro,100%))}to{transform:translateY(0)}}
@media (prefers-reduced-motion:reduce){.v-marquee-track{animation:none}.v-marquee-viewport{height:auto;max-height:300px;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(0,0,0,.12);border-color:rgba(0,0,0,.5) !important;color:#000 !important}
/* The pause GLYPH is a .svg-ico, which the broad dark-mode ".svg-ico -> yellow"
   rule turns yellow-on-yellow (invisible on the yellow marquee head). Force it dark. */
html.dark-mode .v-marquee-pause .svg-ico{color:#000 !important}
html.dark-mode .v-marquee-pause:hover,html.dark-mode .v-marquee-pause:focus-visible{background:rgba(0,0,0,.2)}
html.dark-mode .v-marquee-track li{border-color:var(--dm-yellow)}
html.dark-mode .v-marquee-track li a{color:#ffffff}
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 NEWS" label NEVER has a background — flat text only. */
.latest-badge{background:transparent}
.timeline-band{background:linear-gradient(160deg,#1565c0,#0d47a1);color:#fff}
.timeline-band h2,.timeline-band .tl-period{color:#fff}
.quote-band{background:linear-gradient(135deg,var(--nav-bar) 0%,var(--nav-bar-dark) 100%)}

/* ===== 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. */
.portrait-salute{background:#dbeafc;padding:46px 0 52px}
.portrait-salute-title{text-align:center;color:#1565c0;font-family:"Merriweather","Playfair Display",Georgia,serif;font-weight:800;font-size:2rem;text-transform:capitalize;margin:0 0 8px;line-height:1.25}
.portrait-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 */
.portrait-slider{position:relative;width:100%;margin-top:8px}
.portrait-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}
.portrait-row::-webkit-scrollbar{display:none;width:0;height:0}
.portrait-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}
.portrait-arrow:hover,.portrait-arrow:focus-visible{background:#0a3f25;outline:none}
.portrait-prev{left:10px}.portrait-next{right:10px}
/* FontAwesome chevron (the <i class="svg-ico fa-chevron-*"> in the button) is the single arrow */
.portrait-arrow::before{content:none}
.portrait-arrow .svg-ico{font-size:16px}
.portrait-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}
.portrait-pause::before{content:"\f04c";font-family:"Font Awesome 7 Pro";font-weight:900;font-size:.9rem;line-height:1}
.portrait-pause[aria-pressed="true"]::before{content:"\f04b";font-family:"Font Awesome 7 Pro";font-weight:900}
.portrait-pause:hover{background:#0a3f25}
@media (max-width:600px){.portrait-arrow{width:38px;height:38px}}
.portrait-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)}
.portrait-frame-photo{display:block;border:2px solid #d4af37;background:#fff;padding:3px;box-shadow:inset 0 0 0 1px rgba(0,0,0,.15)}
.portrait-frame-photo img{display:block;width:100%;height:236px;object-fit:cover;object-position:top center}
.portrait-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){
  .portrait-salute-title{font-size:1.45rem}
  .portrait-frame{width:158px;padding:12px}
  .portrait-frame-photo img{height:178px}
  .portrait-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:none}                                   /* was a CSS border-chevron — removed; the FontAwesome <i> is the single arrow */
.ac-arrow .svg-ico{color:var(--navy);transition:color .18s ease}
.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 .svg-ico,.ac-arrow:focus-visible .svg-ico{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;--dm-yellow-light:#ffde72;--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 .portrait-salute,
html.dark-mode .section,html.dark-mode .section-alt,html.dark-mode .section-counters,
html.dark-mode .quote-band,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}

/* Dark-mode footer polish (all GIGW templates + any built site on style.css):
   1) brand-ORANGE accents -> YELLOW — the heading underlines and the WIM/contact
      icons (location / phone / email) must not stay orange in dark mode;
   2) the POLICIES bar + COPYRIGHT bar -> solid BLACK (the policies bar otherwise
      keeps its own dark-grey --footer-policies token; its real class is
      .footer-policies-bar, which the rule above missed). */
html.dark-mode .footer-h{border-bottom-color:var(--dm-yellow) !important}
html.dark-mode .site-footer .wim .svg-ico,html.dark-mode .site-footer .wim i[class*="fa-"],html.dark-mode .site-footer .wim svg,
html.dark-mode .footer-contact .svg-ico,html.dark-mode .footer-contact i[class*="fa-"],html.dark-mode .footer-contact svg{color:var(--dm-yellow) !important;fill:var(--dm-yellow) !important}
html.dark-mode .footer-policies-bar,html.dark-mode .footer-bottom,html.dark-mode .footer-bottom-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 .member-name,html.dark-mode .member-role,
html.dark-mode .portrait-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 .member-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 .portrait-frame,
html.dark-mode table{
  background:#111 !important;border:1px solid var(--dm-yellow) !important;
  box-shadow:none !important;color:#fff}   /* near-black panels, slightly raised off the #000 page */
html.dark-mode .gallery-album{background:transparent !important;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}
html.dark-mode  .nav-sublink.nav-download .svg-ico{color: #fff !important;}
html.dark-mode .nav-sublink.nav-download:hover *,
html.dark-mode .nav-sublink.nav-download:focus-visible *{color: var(--dm-yellow) !important;}

/* 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 .portrait-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}
  html.dark-mode .dl-btn:hover .svg-ico,
  html.dark-mode .dl-btn:hover .file-meta,
  html.dark-mode .dl-btn:hover .file-meta .file-meta-dot,
  html.dark-mode .dl-btn:focus-visible .svg-ico,
  html.dark-mode .dl-btn:focus-visible .file-meta,
  html.dark-mode .dl-btn:focus-visible .file-meta .file-meta-dot{
    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 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}
/* the magnifier glyph inside the yellow search button must be BLACK (it was invisible) */
html.dark-mode .util-search button .svg-ico,html.dark-mode .util-search button i,
html.dark-mode .util-search button svg,html.dark-mode .util-search button svg path,
html.dark-mode .nav-search button .svg-ico,html.dark-mode .nav-search button i,
html.dark-mode .nav-search button svg,html.dark-mode .nav-search button svg path{
  color:#000 !important;fill:#000 !important}

/* Bhashini PLUGIN dropdown — readable in dark mode. The plugin renders a WHITE
   language popover, but `html.dark-mode .util-bar a` tints its links light-grey
   (faint on white). Keep the popover white and force its text DARK so the
   language list ("Goan Konkani", "हिन्दी", "English") is readable. */
html.dark-mode .bhashini-plugin-container [class*="dropdown-content"],
html.dark-mode .bhashini-plugin-container [class*="content-list"],
html.dark-mode .bhashini-plugin-container [class*="dropdown-body"]{background:#fff !important;border-color:#ffd23f !important}
html.dark-mode .bhashini-plugin-container [class*="dropdown-content"] a,
html.dark-mode .bhashini-plugin-container [class*="dropdown-content"] button,
html.dark-mode .bhashini-plugin-container [class*="dropdown-content"] span,
html.dark-mode .bhashini-plugin-container [class*="dropdown-content"] li,
html.dark-mode .bhashini-plugin-container [class*="content-list"] a,
html.dark-mode .bhashini-plugin-container [class*="content-list"] button,
html.dark-mode .bhashini-plugin-container [class*="content-list"] span,
html.dark-mode .bhashini-plugin-container [class*="content-list"] li{color:#1b2a3a !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 .portrait-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 .portrait-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 .portrait-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: 0 0 0 2px rgba(255,255,255,.35) !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)}
/* The pulsing Latest-News dot uses a 10%-LIGHTER tint of --dm-yellow: at full strength the
   yellow dot reads as heavy as the label beside it, and the lb-pulse ring around it is what
   should draw the eye. Derived from the token (HSL L 62.4% -> 72.4%), never a stray hex. */
html.dark-mode .latest-badge::before{background:var(--dm-yellow-light) !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 .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 .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 .portrait-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:#cfcfcf !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:#cfcfcf !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:#cfcfcf !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 — portrait-slider arrows: black + yellow (no green fill) in dark mode */
html.dark-mode .portrait-arrow{background:#000 !important;border:1.5px solid var(--dm-yellow) !important;color:var(--dm-yellow) !important}
html.dark-mode .portrait-arrow:hover,html.dark-mode .portrait-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 28px;font-size:.74rem;align-self:center}
  .latest-pause{order:2;flex:0 0 auto;margin-left:auto;align-self:center}
  /* compact controls on mobile — smaller buttons + tighter pill */
  .latest-mq-group{order:2;flex:0 0 auto;margin-left:auto;align-self:center;padding:2px;gap:1px}
  .latest-mq-group>button,.latest-mq-group .latest-pause{width:22px;height:22px;font-size:9px}
  .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:var(--saffron);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:800;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:#111111;border-color:#ffd23f;color:#ffffff}
html.dark-mode .iti-dir-tile:hover,html.dark-mode .iti-dir-tile:focus-visible{border-color:#ffd23f}
html.dark-mode .iti-dir-sub{color:#cfcfcf}
html.dark-mode .iti-dir-go{background:#1a1a1a;color:#ffd23f}
.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:none;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;overflow-wrap: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:#111111;border-color:#ffd23f}
html.dark-mode .feedback-card-sub{color:#cfcfcf}
html.dark-mode .feedback-form .form-field input,html.dark-mode .feedback-form .form-field textarea{background:#111111;color:#ffffff;border-color:#555555}
html.dark-mode .feedback-form .form-field input::placeholder,html.dark-mode .feedback-form .form-field textarea::placeholder{color:#999999}

/* ── Site search page ───────────────────────────────────────────── */
.search-page-form{display:flex;align-items:center;gap:0;width:100%;max-width:100%;margin:18px 0 6px;background:var(--card);border:2px solid var(--line);border-radius:14px;padding:6px;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(--line);box-shadow:0 4px 16px rgba(13,44,84,.07)}
.search-page-ico{color:var(--muted);font-size:1rem;flex:0 0 auto;margin-left:10px}
.search-page-form input[type="search"]{flex:1 1 0;border:0;outline:0;background:transparent;font-size:1.02rem;color:var(--ink);padding:10px 14px;min-width:0;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:16px;max-width:none}
.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 pagination (30 results per page) */
.search-pager{display:flex;flex-wrap:wrap;gap:8px;align-items:center;justify-content:center;margin:28px 0 6px}
.search-pager a,.search-pager span{display:inline-flex;align-items:center;justify-content:center;min-width:40px;height:40px;padding:0 12px;border:1px solid var(--line);border-radius:8px;background:var(--card);color:var(--navy-deep);text-decoration:none;font-weight:700;font-size:.9rem}
.search-pager a:hover,.search-pager a:focus-visible{background:var(--navy);color:#fff;border-color:var(--navy);outline:none}
.search-pager .is-current{background:var(--navy);color:#fff;border-color:var(--navy)}
.search-pager .pager-gap{border:0;background:none;min-width:auto;font-weight:400}
.search-pager .is-disabled{opacity:.4;pointer-events:none}
.search-results mark,.search-status mark{background:#fff1c2;color:inherit;padding:0 2px;border-radius:3px}
/* search empty / no-results state card (rendered by search.js into #search-results) */
.search-state{display:flex;justify-content:center;padding:14px 0 8px}
.search-state-card{width:100%;max-width:580px;text-align:center;background:var(--card);border:1px solid var(--line);border-radius:16px;padding:36px 32px 30px;box-shadow:0 6px 24px rgba(13,44,84,.07)}
.search-state-ico{font-size:2rem;color:var(--muted);margin-bottom:8px;display:inline-block}
.search-state-title{font-size:1.4rem;color:var(--navy-deep);margin:.15em 0 .35em}
.search-state-lead{color:var(--muted);font-size:1rem;line-height:1.6;margin:0 auto;max-width:46ch}
.search-state-lead strong{color:var(--ink)}
.search-tips{list-style:none;margin:20px auto 4px;padding:0;max-width:430px;text-align:left;display:grid;gap:13px}
.search-tips li{display:flex;align-items:flex-start;gap:12px;color:var(--ink);font-size:.96rem;line-height:1.5}
.search-tips li .svg-ico{color:var(--saffron);margin-top:.15em;flex:0 0 auto}
.search-jump{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:10px;margin-top:24px;padding-top:22px;border-top:1px solid var(--line)}
.search-jump-label{color:var(--muted);font-size:.92rem}
.search-chip{display:inline-flex;align-items:center;padding:8px 17px;border:1px solid var(--line);border-radius:999px;background:var(--bg-alt);color:var(--navy);font-weight:700;font-size:.9rem;text-decoration:none;transition:background .15s ease,color .15s ease,border-color .15s ease}
.search-chip:hover,.search-chip:focus-visible{background:var(--navy);color:#fff;border-color:var(--navy);outline:none}
@media (max-width:560px){
  .search-page-form{flex-wrap:wrap;padding:6px}
  .search-page-ico{margin-left:4px}
  .search-page-form input[type="search"]{font-size:.95rem;padding:9px 10px}
  .search-page-btn{width:100%;margin-top:8px;font-size:.88rem;padding:10px 18px}
  .search-status{font-size:.86rem;margin:12px 0 16px}
  .search-result .sr-title{font-size:1.02rem}
  .search-result .sr-url{font-size:.78rem}
  .search-result .sr-snip{font-size:.9rem}
  .search-state{padding:10px 0 6px}
  .search-state-card{padding:22px 16px 20px;border-radius:14px}
  .search-state-ico{font-size:1.55rem}
  .search-state-title{font-size:1.14rem;line-height:1.3}
  .search-state-lead{font-size:.9rem;line-height:1.55}
  .search-tips{margin:14px auto 4px;gap:10px;max-width:100%}
  .search-tips li{font-size:.88rem}
  .search-chip{font-size:.85rem;padding:7px 14px}
  .search-jump{margin-top:18px;padding-top:16px;gap:8px}
  .search-jump-label{font-size:.86rem}
}
html.dark-mode .search-state-card{background:#111111;border-color:#333333}
html.dark-mode .search-state-title{color:#ffffff}
html.dark-mode .search-tips li{color:#e7eefb}
html.dark-mode .search-tips li .svg-ico{color:#ffd23f}
html.dark-mode .search-chip{background:#1a1a1a;border-color:#444444;color:#ffd23f}
html.dark-mode .search-chip:hover,html.dark-mode .search-chip:focus-visible{background:#ffd23f;color:#111111;border-color:#ffd23f}
html.dark-mode .search-page-form{background:#111111;border-color:#555555}
html.dark-mode .search-page-form input[type="search"]{color:#ffffff !important;background:transparent !important;border:0 !important}
html.dark-mode .search-page-ico{color:var(--dm-yellow) !important}
html.dark-mode .search-page-form:focus-within{border-color:var(--dm-yellow);box-shadow:0 0 0 3px rgba(255,210,63,.18)}
/* the search-page "Search" button was navy (unreadable/off-theme) in dark mode → yellow */
html.dark-mode .search-page-btn,
html.dark-mode .search-page-btn:hover,html.dark-mode .search-page-btn:focus-visible{background:var(--dm-yellow) !important;color:#000 !important}
html.dark-mode .search-result{background:#111111;border-color:#ffd23f;border-left-color:#ffd23f}
html.dark-mode .search-result .sr-snip{color:#ffffff}
html.dark-mode .search-result .sr-url{color:#ffd23f}
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,.detail-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,.portrait-salute-title,.stats-h,.cta-band-title,.gov-portals-title,
.member-name,.card-title,.sr-title a{color:var(--heading)}

/* =====================================================================
   DARK MODE — remaining blue components → black + yellow.
   These components paint themselves from the BLUE brand tokens
   (--navy/--saffron) or hard-coded blue gradients and had no dark
   override, so they stayed blue on the black page. Each is forced to
   the high-contrast black (#000) / near-black panel (#111) + yellow
   (--dm-yellow) scheme here. Appended last so it wins by source order.
   ===================================================================== */

/* -- Timeline list (ul.timeline): blue ruling line + dots → yellow -- */
html.dark-mode .timeline{border-left-color:var(--dm-yellow)}
html.dark-mode .timeline li::before{background:var(--dm-yellow);border-color:#000;box-shadow:0 0 0 1px var(--dm-yellow)}
html.dark-mode .tl-date{color:var(--dm-yellow)}
html.dark-mode .tl-body{color:#cfcfcf}

/* -- Feedback "Other ways to reach us" aside: blue gradient → black panel -- */
html.dark-mode .feedback-aside{background:#111 !important;background-image:none !important;border:1px solid var(--dm-yellow)}
html.dark-mode .feedback-aside-h,html.dark-mode .feedback-aside a,html.dark-mode .fc-body{color:#fff}
html.dark-mode .fc-label{color:var(--dm-yellow)}
html.dark-mode .fc-ico{background:#000;border:1px solid var(--dm-yellow);color:var(--dm-yellow)}
/* Feedback form card heading + its icon */
html.dark-mode .feedback-card-h{color:#fff}
html.dark-mode .feedback-card-h i{color:var(--dm-yellow)}

/* -- Donor "Salute to the courage" band title: blue text → white (underline already yellowed) -- */
html.dark-mode .portrait-salute-title{color:#fff}

/* -- ITI / directory tiles: blue accent rail, corner glow & icon badge → yellow -- */
html.dark-mode .iti-dir-tile::before{background:var(--dm-yellow)}
html.dark-mode .iti-dir-tile::after{background:none}
html.dark-mode .iti-dir-ico{background:#000;border:1px solid var(--dm-yellow);color:var(--dm-yellow);box-shadow:none}
html.dark-mode .iti-dir-go{background:#000;border:1px solid var(--dm-yellow);color:var(--dm-yellow)}
html.dark-mode .iti-dir-tile:hover .iti-dir-go,html.dark-mode .iti-dir-tile:focus-visible .iti-dir-go{background:var(--dm-yellow);color:#000}

/* -- Search results: keep the left accent rail yellow (was blue) -- */
html.dark-mode .search-result{border-left-color:var(--dm-yellow)}

/* -- Application-form / inline download link: emphasise the yellow border bottom-up -- */
html.dark-mode .dl-link{border-color:var(--dm-yellow) !important}

/* -- "How to use" notes (.pc-howto) + inline <code> + light info boxes: these paint
      from the light --bg/--ink tokens and had no dark rule, so they were light boxes
      with near-invisible text on the black page. Force them dark + readable. -- */
html.dark-mode .pc-howto{background:#111 !important;border-left-color:var(--dm-yellow);color:#fff}
html.dark-mode .pc-howto strong{color:var(--dm-yellow)}
html.dark-mode .pc-howto code,html.dark-mode code,html.dark-mode pre{background:#000;color:var(--dm-yellow)}
html.dark-mode .pdf-embed{background:#111}
html.dark-mode .pdf-doc-imglink img{background:#111}
html.dark-mode .ext-int-url{background:#000;color:#fff}

/* ============================================================================
   COUNTER COMPONENT VARIANTS — alternatives to the default .section-counters /
   .stat-card feature+grid block, so different templates show stats differently.
   All animate via the same .num[data-count] hook (main.js). GIGW/WCAG-friendly:
   real text, AA contrast, no motion dependence. Catalogued in /resources/page-components/.
   ---------------------------------------------------------------------------- */

/* (1) .stat-plain — NO background: big numerals + titles on the page, with a
   short accent rule under each number. Clean, editorial. 2/3/4 up via modifier. */
.stat-plain{display:grid;grid-template-columns:repeat(4,1fr);gap:30px 24px}
.stat-plain.cols-3{grid-template-columns:repeat(3,1fr)}
.stat-plain.cols-2{grid-template-columns:repeat(2,1fr)}
.stat-plain-item{text-align:center;padding:26px 16px;background:var(--card);border:1px solid var(--line);border-radius:16px;box-shadow:var(--shadow)}
.stat-plain-item .num{display:block;font-size:clamp(2.1rem,4vw,3rem);font-weight:800;line-height:1;color:var(--heading,var(--navy));letter-spacing:-.5px}
.stat-plain-item .num::after{content:"";display:block;width:42px;height:4px;border-radius:3px;margin:12px auto 0;background:var(--saffron)}
.stat-plain-lbl{display:block;margin-top:12px;color:var(--muted);font-weight:600;font-size:.95rem}
.stat-plain-sub{display:block;margin-top:2px;color:var(--muted);font-size:.82rem;opacity:.85}

/* (2) .stat-solid — each stat on its OWN solid brand card (white numerals on the
   theme gradient). Punchy. 3-up by default; .cols-4 for four. */
.stat-solid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.stat-solid.cols-4{grid-template-columns:repeat(4,1fr)}
/* modern minimal figures in a SUBTLE bordered box (GIGW fonts + AA contrast) */
.stat-solid-card{position:relative;padding:26px 18px;text-align:center;background:var(--card);border:1px solid var(--line);border-radius:14px;box-shadow:0 2px 12px rgba(13,44,84,.05);transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease}
.stat-solid-card:hover{transform:translateY(-3px);box-shadow:0 12px 26px rgba(13,44,84,.1);border-color:var(--navy)}
html.dark-mode .stat-solid-card{background:#0f1a2b;border-color:#26384f}
.stat-solid-card .stat-solid-ico{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:50%;background:color-mix(in srgb,var(--saffron) 14%,transparent);color:var(--saffron-dark);font-size:1.15rem;margin-bottom:16px}
.stat-solid-card .num{display:block;font-size:clamp(2.5rem,4.8vw,3.5rem);font-weight:800;line-height:1;color:var(--heading,var(--navy));letter-spacing:-.02em}
.stat-solid-lbl{display:block;margin-top:12px;font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;color:var(--muted);font-weight:600}
html.dark-mode .stat-solid-card .num{color:#fff}

/* (3) .stat-strip — one horizontal band, stats separated by hairlines. Compact. */
.stat-strip{display:flex;flex-wrap:wrap;justify-content:space-around;gap:18px;background:var(--card);border:1px solid var(--line);border-radius:16px;padding:26px 18px;box-shadow:var(--shadow)}
.stat-strip-item{flex:1 1 160px;text-align:center;padding:4px 14px;border-right:1px solid var(--line)}
.stat-strip-item:last-child{border-right:0}
.stat-strip-item .num{display:block;font-size:clamp(1.8rem,3vw,2.4rem);font-weight:800;color:var(--heading,var(--navy));line-height:1}
.stat-strip-lbl{display:block;margin-top:8px;color:var(--muted);font-weight:600;font-size:.9rem}
@media (max-width:760px){
  .stat-plain{grid-template-columns:repeat(2,1fr)}
  .stat-solid,.stat-solid.cols-4{grid-template-columns:1fr 1fr}
  .stat-strip-item{border-right:0;flex-basis:42%}
}
@media (max-width:460px){
  .stat-plain,.stat-plain.cols-3,.stat-solid,.stat-solid.cols-4{grid-template-columns:1fr}
  .stat-solid-card::after{display:none}
}

/* ============================================================================
   PER-TEMPLATE UI SIGNATURES — each /resources/gigw-templates/<slug>/ gets its OWN modern
   look (the <main> carries .gigw-tpl .gigw-tpl-<slug>). CSS-only: structure,
   semantics, ARIA, focus order and contrast are untouched, so every template
   stays GIGW / WCAG 2.1 AA compliant. Only visual treatment changes per slug.
   ========================================================================== */
.gigw-tpl .section h2{position:relative}

/* corporate — flat, professional, square cards with a top accent rule */
.gigw-tpl-corporate .card{border-radius:6px;box-shadow:none;border:1px solid var(--line)}
.gigw-tpl-corporate .feature-card,
.gigw-tpl-corporate .event-card,
.gigw-tpl-corporate .member-card{border-top:3px solid var(--saffron)}
.gigw-tpl-corporate .section h2{text-transform:uppercase;letter-spacing:.7px;font-size:1.45rem;padding-bottom:12px}
.gigw-tpl-corporate .section h2::after{content:"";position:absolute;left:0;bottom:0;width:54px;height:3px;background:var(--navy)}
.gigw-tpl-corporate .btn{border-radius:4px}
.gigw-tpl-corporate .event-card h3 a:hover{text-decoration:underline}

/* citizen — friendly & rounded, soft shadows, pill buttons, circular portraits */
.gigw-tpl-citizen .card{border-radius:18px;box-shadow:0 8px 24px rgba(20,60,40,.08);border:0}
.gigw-tpl-citizen .card:hover{transform:translateY(-4px)}
.gigw-tpl-citizen .member-photo{border-radius:50%;width:128px;height:128px;object-fit:cover;margin:0 auto}
.gigw-tpl-citizen .btn{border-radius:40px;padding-inline:22px}
.gigw-tpl-citizen .section h2{font-size:1.6rem}
.gigw-tpl-citizen .gov-portal-pill{border-radius:10px}

/* minimal — airy, hairline borders, centered headings, almost no shadow */
.gigw-tpl-minimal .section{padding-block:54px}
.gigw-tpl-minimal .card{box-shadow:none;border:1px solid var(--line);border-radius:10px}
.gigw-tpl-minimal .section>.container>h2,
.gigw-tpl-minimal .section>.container>.stats-h{text-align:center;font-weight:700;letter-spacing:.2px}
.gigw-tpl-minimal .section>.container>h2::after{content:"";display:block;width:40px;height:3px;background:var(--saffron);margin:12px auto 0;border-radius:2px}
.gigw-tpl-minimal .lead{text-align:center;max-width:70ch;margin-inline:auto}
.gigw-tpl-minimal .btn{border-radius:8px;background:transparent;color:var(--navy);border:1.5px solid var(--navy)}
.gigw-tpl-minimal .btn:hover{background:var(--navy);color:#fff}

/* showcase — bold editorial: tall gradient hero, large headings, elevated cards */
.gigw-tpl-showcase .hero{overflow:hidden}
.gigw-tpl-showcase .section h2{font-size:1.9rem;font-weight:800;padding-bottom:14px}
.gigw-tpl-showcase .section h2::after{content:"";position:absolute;left:0;bottom:0;width:70px;height:5px;border-radius:3px;background:var(--saffron)}
.gigw-tpl-showcase .card{border-radius:16px;box-shadow:0 14px 34px rgba(67,16,23,.12);border:0}
.gigw-tpl-showcase .card:hover{transform:translateY(-5px)}
.gigw-tpl-showcase .event-img,.gigw-tpl-showcase .feature-icon{border-radius:12px}
.gigw-tpl-showcase .btn-navy{background:linear-gradient(135deg,var(--navy),var(--navy-deep))}

/* classic — keep the canonical look, just a refined heading accent */
.gigw-tpl-classic .section>.container>h2::after{content:"";display:block;width:46px;height:4px;background:var(--saffron);border-radius:3px;margin-top:10px}

/* generous, consistent section spacing for all GIGW templates */
.gigw-tpl .section{padding-block:clamp(48px,6vw,76px)}
.gigw-tpl .section>.container>h2:first-child{margin-top:0;margin-bottom:28px}
.gigw-tpl .cta-band{margin-block:clamp(20px,4vw,40px)}

/* floating "back to all templates" chip on showcase template pages */
.tpl-demobar{position:fixed;left:14px;bottom:14px;z-index:300;display:inline-flex;gap:8px;flex-wrap:wrap}
.tpl-demobar a{display:inline-flex;align-items:center;gap:6px;background:#111827;color:#fff;font-weight:700;font-size:.82rem;padding:8px 14px;border-radius:30px;text-decoration:none;box-shadow:0 8px 22px rgba(0,0,0,.3)}
.tpl-demobar a:hover,.tpl-demobar a:focus-visible{background:#000;color:#fff;outline:2px solid #fff}
.tpl-demobar i{font-size:.85em}

/* sitemap page list */
/* Sitemap — modern responsive card grid (chevron icon + hover lift) */
.sitemap-list{list-style:none;margin:20px 0 0;padding:0;display:grid;grid-template-columns:1fr;gap:8px}
.sitemap-list li{margin:0}
.sitemap-list a{display:flex;align-items:center;gap:10px;padding:11px 15px;border:1px solid var(--line);border-radius:10px;background:var(--card);color:var(--ink);text-decoration:none;font-weight:600;line-height:1.35;transition:transform .15s,box-shadow .15s,border-color .15s,color .15s}
.sitemap-list a::before{content:"\f105";font-family:"Font Awesome 7 Pro";font-weight:900;color:var(--saffron-dark);font-size:.9em;flex:0 0 auto}
.sitemap-list a:hover,.sitemap-list a:focus-visible{border-color:var(--navy);box-shadow:0 6px 16px rgba(13,44,84,.1);transform:translateY(-2px);color:var(--navy);outline:none}
html.dark-mode .sitemap-list a{background:#0f1a2b;border-color:#26384f;color:#fff}
html.dark-mode .sitemap-list a:hover{border-color:var(--saffron)}
@media (max-width:640px){.sitemap-list{grid-template-columns:1fr}}

/* Sitemap — grouped category cards (balanced masonry columns, icon bullets, hover lift).
   Wrap the group cards in .sitemap-cards; each group is a <section class="sitemap-group">
   (a plain .card also works) with a heading + a plain <ul> of links. */
.sitemap-cards{columns:3 250px;column-gap:22px;margin:26px 0 0}
.sitemap-cards>.sitemap-group,
.sitemap-cards>.card{break-inside:avoid;-webkit-column-break-inside:avoid;display:inline-block;width:100%;margin:0 0 22px;padding:22px 24px 18px;background:var(--card);border:1px solid var(--line);border-radius:var(--radius);box-shadow:0 2px 10px rgba(13,44,84,.05);position:relative;overflow:hidden;transition:box-shadow .18s ease,transform .18s ease,border-color .18s ease}
.sitemap-cards>.sitemap-group::before,
.sitemap-cards>.card::before{content:"";position:absolute;left:0;top:0;width:100%;height:4px;background:linear-gradient(90deg,var(--saffron),var(--saffron-dark))}
.sitemap-cards>.sitemap-group:hover,
.sitemap-cards>.card:hover{box-shadow:0 10px 26px rgba(13,44,84,.12);transform:translateY(-3px);border-color:var(--saffron)}
.sitemap-cards>.sitemap-group>:first-child,
.sitemap-cards>.card>:first-child{margin-top:0}
.sitemap-cards h2,.sitemap-cards h3{display:flex;align-items:center;gap:9px;margin:2px 0 14px;padding:0 0 11px;font-size:1.08rem;font-weight:800;color:var(--navy-deep);line-height:1.3;border-bottom:2px solid var(--line)}
.sitemap-cards h2::before,.sitemap-cards h3::before{content:"";flex:0 0 auto;width:8px;height:20px;border-radius:3px;background:linear-gradient(180deg,var(--saffron),var(--saffron-dark))}
.sitemap-cards ul{list-style:none;margin:0;padding:0;display:grid;gap:1px}
.sitemap-cards li{margin:0}
.sitemap-cards li a{display:flex;align-items:flex-start;gap:9px;padding:8px 10px;border-radius:8px;color:var(--ink);text-decoration:none;font-weight:600;font-size:.94rem;line-height:1.4;transition:background .15s,color .15s,padding .15s}
.sitemap-cards li a::before{content:"\f105";font-family:"Font Awesome 7 Pro";font-weight:900;color:var(--saffron);font-size:.85em;margin-top:.18em;flex:0 0 auto;transition:transform .15s}
.sitemap-cards li a:hover,.sitemap-cards li a:focus-visible{background:var(--bg-alt);color:var(--navy-deep);padding-left:13px;outline:none}
.sitemap-cards li a:hover::before,.sitemap-cards li a:focus-visible::before{transform:translateX(3px)}
html.dark-mode .sitemap-cards>.sitemap-group,
html.dark-mode .sitemap-cards>.card{background:#0f1a2b;border-color:#26384f;box-shadow:0 2px 10px rgba(0,0,0,.3)}
html.dark-mode .sitemap-cards h2,html.dark-mode .sitemap-cards h3{color:#fff;border-color:#26384f}
html.dark-mode .sitemap-cards li a{color:#e7eefb}
html.dark-mode .sitemap-cards li a:hover,html.dark-mode .sitemap-cards li a:focus-visible{background:#16263c;color:#fff}
@media (max-width:520px){.sitemap-cards{columns:1}}

/* Sitemap — tree view (st-* structure): org root (.st-home) → section groups; a continuous
   border-left rail with ::before ticks. Only href-less pure section labels (.st-branch) are
   UPPERCASE — a real page that has children stays a normal link. Markup:
   <ul class="sitemap-tree"><li class="st-root"><a class="st-node st-home" href="/">Org</a>
     <ul><li><span class="st-node st-branch">About</span><ul><li><a href="…">Objectives</a></li></ul></li></ul>
   </li></ul> */
.sitemap-tree,.sitemap-tree ul{list-style:none;margin:0;padding:0}
.sitemap-tree{margin:8px 0 20px;font-size:1rem;line-height:1.5}
.sitemap-tree li{position:relative}
.sitemap-tree ul{margin-left:14px;padding-left:22px;border-left:2px solid var(--line)}
.sitemap-tree ul>li::before{content:"";position:absolute;top:15px;left:-22px;width:18px;height:2px;background:var(--line)}
.sitemap-tree ul>li:last-child::after{content:"";position:absolute;top:16px;bottom:0;left:-24px;width:2px;background:var(--bg)}
.sitemap-tree a,.sitemap-tree .st-node{display:inline-block;padding:5px 4px;text-decoration:none;color:var(--navy);font-weight:600}
.sitemap-tree a:hover,.sitemap-tree a:focus-visible{color:var(--saffron-darker);text-decoration:underline}
.sitemap-tree .st-branch{color:var(--navy-deep);font-weight:700;text-transform:uppercase;letter-spacing:.03em;font-size:.92rem}
.sitemap-tree .st-home{font-size:1.15rem;font-weight:700;color:var(--navy-deep)}
.sitemap-tree .st-root>ul{margin-top:6px}
html.dark-mode .sitemap-tree ul{border-left-color:#2a3c4a}
html.dark-mode .sitemap-tree ul>li::before{background:#2a3c4a}
html.dark-mode .sitemap-tree ul>li:last-child::after{background:var(--bg)}
html.dark-mode .sitemap-tree a{color:#7eb3ff}
html.dark-mode .sitemap-tree .st-branch,html.dark-mode .sitemap-tree .st-home{color:#f0f4fa}

/* ============================================================================
   PER-TEMPLATE "About" feature cards — each of the 4 GIGW templates renders the
   intro feature grid with a DISTINCT card design (not the same everywhere).
   ========================================================================== */
/* classic — icon to the LEFT of the text (horizontal), clean bordered card */
.gigw-tpl-classic .feature-card{flex-direction:row;align-items:flex-start;gap:16px}
.gigw-tpl-classic .feature-icon{width:58px;height:58px;border-radius:10px}

/* corporate — square accent badge icon, top rail, left aligned (professional) */
.gigw-tpl-corporate .feature-card{align-items:flex-start;border-radius:6px}
.gigw-tpl-corporate .feature-icon{width:52px;height:52px;border-radius:8px}

/* citizen — circular icon, centred text, soft rounded card (friendly) */
.gigw-tpl-citizen .feature-card{align-items:center;text-align:center;border-radius:20px}
.gigw-tpl-citizen .feature-icon{width:88px;height:88px;border-radius:50%}

/* showcase — icon as a full-width banner on top, bold editorial card */
.gigw-tpl-showcase .feature-card{padding:0;overflow:hidden;border-radius:16px}
.gigw-tpl-showcase .feature-icon{width:100%;height:130px;border-radius:0}
.gigw-tpl-showcase .feature-text{padding:18px 22px 24px}
.gigw-tpl-showcase .feature-card .feature-text h3{font-size:1.15rem}

/* ============================================================================
   MODERN CONTENT POLISH — applies ONLY to content components (cards, sections,
   prose, media). The chrome (.util-bar / .mainnav / .masthead / .site-footer)
   and the .hero / .portrait sliders are intentionally NOT targeted.
   ========================================================================== */
.card,.event-card,.member-card,.msg-card,.goal-card,.person-card{
  border-radius:16px;
  box-shadow:0 6px 20px rgba(20,40,80,.07);
  transition:transform .18s ease, box-shadow .18s ease;
}
.card:hover,.event-card:hover,.member-card:hover,.msg-card:hover,.person-card:hover{
  transform:translateY(-4px);
  box-shadow:0 18px 36px rgba(20,40,80,.13);
}
/* gentle image zoom on hover for media cards */
.event-card,.album-card,.video-card,.gallery-tile{overflow:hidden}
.event-img,.album-card .event-img{transition:transform .35s ease}
.event-card:hover .event-img,.album-card:hover .event-img{transform:scale(1.05)}
.gallery-tile img{transition:transform .35s ease}
.gallery-tile:hover img{transform:scale(1.06)}
/* roomier, more readable content typography & rhythm */
.section .container>h2{letter-spacing:-.015em}
.content-section,.prose{line-height:1.75}
.content-section p,.prose p{margin-bottom:1.05em}
.content-section h2,.content-section h3,.prose h2,.prose h3{letter-spacing:-.01em}
/* tables: softer, modern */
.data-table{border-radius:12px;overflow:hidden}
/* download buttons / pills: subtle lift */
.dl-btn,.gov-portal-pill{transition:transform .15s ease, box-shadow .15s ease}
.dl-btn:hover,.gov-portal-pill:hover{transform:translateY(-2px)}

/* office-bearer / leadership ("members") cards — centred, circular portrait,
   accent role label (refined from the Goa S3WaaS gov sites) */
.member-card{text-align:center;padding:24px 18px 22px}
.member-photo{width:118px;height:118px;border-radius:50%;object-fit:cover;margin:0 auto 14px;border:3px solid var(--bg-alt);display:block}
.member-role{color:var(--saffron-darker);font-weight:700;font-size:.82rem;text-transform:uppercase;letter-spacing:.5px;margin:0 0 2px}
.member-name{font-size:1.12rem;margin:0 0 12px;color:var(--heading,var(--navy))}
.member-card .read-msg{font-weight:700}

/* ============================================================================
   MODERN UI PASS — content only. Hero (.hero/.portrait) + chrome (.util-bar/
   .mainnav/.masthead/.site-footer) intentionally untouched.
   ========================================================================== */
/* SECTION TITLES STEP DOWN so the size chain descends: masthead dept >= h1 (page title) > h2
   (section) > lead > body. The max was 1.95rem — the SAME size as a promoted home page-title
   h1, so the h1 did not outrank the headings it contains (an equal pair is the bug). 1.6rem also
   brings GIGW into line with the S3WaaS `.s3-h` (1.5rem), so the two shells read as one system.
   NOTE: the size lives HERE, not on the plain `.section h2` rule — this selector has TWO classes,
   so it wins no matter how late a `.section h2` rule is appended. Change the size in this rule. */
.section .container>h2,.section .container>.stats-h{font-weight:800;letter-spacing:-.02em;font-size:clamp(1.35rem,2.2vw,1.6rem)}
.card,.event-card,.member-card,.msg-card,.feature-card,.goal-card,.detail-card{border-radius:18px}
.grid,.feature-grid{gap:26px}
.read-msg{font-weight:700;display:inline-flex;align-items:center;gap:6px}
.btn{letter-spacing:.01em}
.section{padding-block:clamp(52px,6.5vw,84px)}
/* modern, accessible focus ring on interactive content */
.page-body a:focus-visible,.page-body button:focus-visible{outline:2px solid var(--saffron-dark);outline-offset:3px;border-radius:6px}

/* ============================================================================
   MODERN SIDE-BY-SIDE "About" — heading + lead in a left column, department
   cards stacked beside them on the right. Opt-in via .intro-split; responsive.
   ========================================================================== */
.intro-split .container{display:grid;grid-template-columns:minmax(250px,340px) 1fr;gap:clamp(28px,4vw,52px);align-items:start}
.intro-split .container>h2{grid-column:1;grid-row:1;margin:0 0 14px}
.intro-split .container>.lead{grid-column:1;grid-row:2;margin:0}
.intro-split .container>p:last-of-type{grid-column:1;grid-row:3;margin-top:22px}
.intro-split .container>.feature-grid{grid-column:2;grid-row:1 / span 4;display:flex;flex-direction:column;gap:18px}
.intro-split .feature-card{flex-direction:row;align-items:flex-start;gap:16px;text-align:left}
.intro-split .feature-icon{width:62px;height:62px;border-radius:12px;flex:0 0 auto}
@media (max-width:860px){
  .intro-split .container{display:block}
  .intro-split .container>*{grid-column:auto}
  .intro-split .container>.feature-grid{display:grid;grid-template-columns:1fr 1fr;margin-top:22px}
  .intro-split .feature-card{flex-direction:column}
}
@media (max-width:560px){.intro-split .container>.feature-grid{grid-template-columns:1fr}}

/* ============================================================================
   FULL-SITE LAYOUT REFINEMENT (ref: Maré) — softer, diffuse elevation, unified
   card hover, reveal-on-scroll. GIGW fonts/colours/contrast + chrome untouched.
   ========================================================================== */
:root{
  --shadow:0 2px 6px rgba(13,44,84,.05), 0 16px 38px -22px rgba(13,44,84,.22);
  --shadow-lg:0 24px 60px -28px rgba(13,44,84,.42);
  --ease-out:cubic-bezier(.22,1,.36,1);
}
.card,.event-card,.member-card,.feature-card,.video-card,.portal-card,.msg-card{
  transition:transform .45s var(--ease-out),box-shadow .45s var(--ease-out)}
.card:hover,.event-card:hover,.member-card:hover,.feature-card:hover,.video-card:hover,.msg-card:hover{
  transform:translateY(-6px);box-shadow:var(--shadow-lg)}
/* reveal-on-scroll (only active once JS adds .reveal; in-view items get .in instantly) */
/* reveal scroll-fade animations removed — content is always visible instantly */
.reveal,.reveal.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none;transition:none}}

/* ============================================================================
   MODERN TOP-BAR with integrated latest-news ticker (opt-in: header.json
   "announce":{enabled:true}). Reuses the existing util-bar (Bhashini, a11y,
   font, dark, language) and adds a scrolling headline strip in the middle.
   ========================================================================== */
.util-bar--announce .util-inner{flex-wrap:wrap;gap:8px 18px}
.util-announce{flex:1 1 280px;min-width:0;display:flex;align-items:center;gap:12px;overflow:hidden}
.util-announce-badge{flex:0 0 auto;display:inline-flex;align-items:center;gap:7px;background:var(--accent-on-dark);color:var(--navy-deep);font-weight:800;font-size:11.5px;letter-spacing:.05em;text-transform:uppercase;padding:4px 11px;border-radius:20px;line-height:1}
.util-announce-vp{flex:1 1 auto;min-width:0;overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 4%,#000 94%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 4%,#000 94%,transparent)}
.util-announce-track{display:inline-flex;white-space:nowrap;gap:36px;will-change:transform;animation:util-marq 30s linear infinite}
.util-announce-track:focus-within{animation-play-state:paused}
@media (hover:hover){.util-announce:hover .util-announce-track{animation-play-state:paused}}
.util-announce-item{display:inline-flex;align-items:center;gap:8px;color:#dbe6f5;font-size:13px;text-decoration:none}
.util-announce-item:hover,.util-announce-item:focus{color:#fff;text-decoration:underline}
.util-announce-item i{color:var(--accent-on-dark);font-size:10px}
@keyframes util-marq{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){.util-announce-track{animation:none;transform:none}}
/* Marquee ARROW CONTROLS - What is New (.v-marquee) + Related Portals (.gov-portals) */
.mq-group{display:inline-flex;align-items:center;gap:2px;flex:0 0 auto}
/* S3WaaS-style segmented pill — shared by What's New (.v-marquee-head), Related Portals (.gov-portals-ctrls) and below-hero Latest News (.latest-mq-group) */
.v-marquee-head .mq-group,.gov-portals-ctrls,.latest-mq-group{display:inline-flex;align-items:center;gap:2px;flex:0 0 auto;background:color-mix(in srgb,var(--navy) 9%,#fff);border:1px solid color-mix(in srgb,var(--navy) 22%,transparent);border-radius:999px;padding:3px;box-shadow:0 1px 2px rgba(8,40,80,.10)}
.v-marquee-head .mq-group{margin-left:auto}
.latest-mq-group{margin-left:14px}
.v-marquee-head .mq-group .v-marquee-pause,.v-marquee-head .mq-arrow,.gov-portals-ctrls .mq-arrow,.latest-mq-group>button,.latest-mq-group .latest-pause{margin:0;width:30px;height:30px;border:0;background:transparent;color:var(--navy-deep);border-radius:50%;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;font-size:11px;line-height:1;padding:0;transition:background .15s,color .15s}
.v-marquee-head .mq-arrow:hover,.v-marquee-head .mq-arrow:focus-visible,.v-marquee-head .v-marquee-pause:hover,.gov-portals-ctrls .mq-arrow:hover,.gov-portals-ctrls .mq-arrow:focus-visible,.latest-mq-group>button:hover,.latest-mq-group>button:focus-visible,.latest-mq-group .latest-pause:hover,.latest-mq-group .latest-pause:focus-visible{background:#fff;color:var(--navy-deep);box-shadow:0 1px 3px rgba(8,40,80,.18)}
.v-marquee.mq-manual .v-marquee-track{animation:none!important;transform:none!important}
.v-marquee.mq-manual .v-marquee-viewport{overflow-y:auto;scroll-behavior:smooth;scrollbar-width:none;scroll-snap-type:y proximity}
.v-marquee.mq-manual .v-marquee-viewport::-webkit-scrollbar{display:none}
.v-marquee.mq-manual .v-marquee-track li{scroll-snap-align:start}
.gov-portals-vp{width:100%;max-width:100%;min-width:0;overflow:hidden;padding:5px 0}
.gov-portals.mq-scroll .gov-portals-vp{overflow-x:auto;scroll-behavior:smooth;scrollbar-width:none;scroll-snap-type:x proximity}
.gov-portals.mq-scroll .gov-portals-vp::-webkit-scrollbar{display:none}
.gov-portals.mq-scroll .gov-portals-list{flex-wrap:nowrap;justify-content:flex-start}
.gov-portals.mq-scroll .gov-portals-list li{scroll-snap-align:start}
.latest-ticker.mq-manual .latest-track{animation:none!important;transform:none!important}
.latest-ticker.mq-manual .latest-feed{overflow-x:auto;scroll-behavior:smooth;scrollbar-width:none;scroll-snap-type:x proximity}
.latest-ticker.mq-manual .latest-feed::-webkit-scrollbar{display:none}
.latest-ticker.mq-manual .latest-item{scroll-snap-align:start}
/* DARK MODE — all three GIGW control pills identical (S3WaaS look): #151515 pill, #3a3a3a border, yellow icons, hover black */
html.dark-mode .v-marquee-head .mq-group,html.dark-mode .gov-portals-ctrls,html.dark-mode .latest-mq-group{background:#151515 !important;border:1px solid #3a3a3a !important;box-shadow:none !important;padding:3px !important;gap:2px !important}
html.dark-mode .v-marquee-head .mq-group .v-marquee-pause,html.dark-mode .v-marquee-head .mq-arrow,html.dark-mode .gov-portals-ctrls .mq-arrow,html.dark-mode .latest-mq-group>button,html.dark-mode .latest-mq-group .latest-pause{background:transparent !important;border:0 !important;color:#ffd23f !important}
html.dark-mode .v-marquee-head .mq-arrow .svg-ico,html.dark-mode .v-marquee-head .v-marquee-pause .svg-ico,html.dark-mode .gov-portals-ctrls .mq-arrow .svg-ico,html.dark-mode .latest-mq-group>button .svg-ico,html.dark-mode .latest-mq-group .latest-pause .svg-ico,html.dark-mode .latest-mq-group .latest-pause::before{color:#ffd23f !important}
html.dark-mode .v-marquee-head .mq-arrow:hover,html.dark-mode .v-marquee-head .mq-arrow:focus-visible,html.dark-mode .v-marquee-head .v-marquee-pause:hover,html.dark-mode .gov-portals-ctrls .mq-arrow:hover,html.dark-mode .gov-portals-ctrls .mq-arrow:focus-visible,html.dark-mode .latest-mq-group>button:hover,html.dark-mode .latest-mq-group>button:focus-visible,html.dark-mode .latest-mq-group .latest-pause:hover,html.dark-mode .latest-mq-group .latest-pause:focus-visible{background:#000 !important;color:#fff !important}
@keyframes gov-portals-marq{from{transform:translateX(0)}to{transform:translateX(calc(-1 * var(--gp-shift,50%)))}}
.gov-portals.mq-scroll .gov-portals-list{animation:gov-portals-marq 32s linear infinite;will-change:transform}
.gov-portals.mq-scroll.paused .gov-portals-list{animation-play-state:paused}
@media (hover:hover){.gov-portals.mq-scroll .gov-portals-vp:hover .gov-portals-list{animation-play-state:paused}}
.gov-portals.mq-manual .gov-portals-list{animation:none!important;transform:none!important}
.gov-portals.mq-manual .gov-portals-vp{overflow-x:auto;scroll-behavior:smooth;scrollbar-width:none;scroll-snap-type:x proximity}
.gov-portals.mq-manual .gov-portals-vp::-webkit-scrollbar{display:none}
@media (prefers-reduced-motion:reduce){.gov-portals.mq-scroll .gov-portals-list{animation:none}}
/* On tablet/mobile the integrated ticker drops to its OWN full-width row below
   the tools instead of crowding the middle. */
@media (max-width:1024px){
  /* skip link + the 3 icon pills share ONE row; latest news + search wrap below.
     (override the generic ≤600 .util-nav/.util-tools width:100% so they don't stack) */
  .util-bar--announce .util-inner{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px}
  .util-bar--announce .util-nav{order:1;flex:0 1 auto;width:auto;min-width:0;justify-content:flex-start}
  .util-bar--announce .util-tools{order:2;flex:1 1 auto;width:auto;min-width:0;justify-content:flex-end}
  .util-bar--announce .util-announce{order:3;flex:1 1 100%;margin-top:0}
}
/* Phone: centre the links + icon group in the GIGW accessibility bar (plain util-bar,
   NOT the S3WaaS / announce-ticker bar — that one stays as the original template). */
/* S3WaaS (announce) bar — FROM 1024 DOWN: iphb-style accessibility bar — skip-links row,
   expanded search field + icons row, and the LATEST-News ticker on its OWN row below.
   Desktop (>1024) keeps the original layout (search toggle + ticker in the same place). */
@media (max-width:1024px){
  .util-bar--announce .util-inner{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px}
  .util-bar--announce .util-nav{order:1;flex:1 1 100%;width:100%;justify-content:flex-start;row-gap:2px}
  .util-bar--announce .util-search-toggle{display:none}
  .util-bar--announce .util-searchrow{display:flex;order:2;flex:1 1 0;width:auto;min-width:120px;margin-top:8px}
  .util-bar--announce .util-tools{order:3;flex:0 0 auto;width:auto;justify-content:flex-end;margin-top:8px}
  .util-bar--announce .util-announce{display:flex;order:4;flex:1 1 100%;width:100%;min-width:0;margin-top:6px}
  .util-bar--announce .util-search{flex:1 1 auto;width:100%}
  .util-bar--announce .util-search input{flex:1 1 auto;width:auto;min-width:0}
}
/* GIGW bar: search shown as an inline FIELD (no collapse toggle), like iphb.goa.gov.in — all sizes */
.util-bar--gigw .util-search-toggle{display:none}
.util-bar--gigw .util-searchrow{display:flex}
/* Desktop (>900): ONE row — skip-links left, search field FILLS the middle, accessibility +
   translate fixed on the right. nowrap so the icons never drop to a second row. */
@media (min-width:1101px){
  .util-bar--gigw .util-inner{flex-wrap:nowrap}
  .util-bar--gigw .util-nav{order:1;flex:0 1 auto;min-width:0}
  .util-bar--gigw .util-searchrow{order:2;flex:1 1 auto;width:auto;margin:0 14px;min-width:160px;max-width:none}
  .util-bar--gigw .util-search{width:100%}
  .util-bar--gigw .util-search input{flex:1 1 auto;width:auto;min-width:0}
  .util-bar--gigw .util-tools{order:3;flex:0 0 auto}
}
/* ===== GIGW accessibility bar component (.util-bar--gigw) — separate from the S3WaaS
   announce bar (.util-bar--announce). TABLET + MOBILE (<=768, unified like iphb.goa.gov.in):
   skip-links on row 1, an EXPANDED search field + accessibility + translate on row 2. ===== */
@media (max-width:1100px){
  .util-bar--gigw .util-inner{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px}
  .util-bar--gigw .util-nav{order:1;flex:1 1 100%;width:100%;justify-content:flex-start;row-gap:2px}
  .util-bar--gigw .util-search-toggle{display:none}
  .util-bar--gigw .util-searchrow{display:flex;order:2;flex:1 1 0;width:auto;min-width:120px;margin-top:8px}
  .util-bar--gigw .util-tools{order:3;flex:0 0 auto;width:auto;justify-content:flex-end;margin-top:8px}
  .util-bar--gigw .util-search{flex:1 1 auto;width:100%}
  .util-bar--gigw .util-search input{flex:1 1 auto;width:auto;min-width:0}
}
/* No focus outline/border on the search field (both bars) — per request */
.util-search input:focus,.util-search input:focus-visible{outline:none;box-shadow:none}
.search-page-form input:focus,.search-page-form input:focus-visible{outline:none;box-shadow:none}

/* ---- Search launcher (all GIGW bars; S3WaaS uses its own chrome) ----
   A pill matching the Accessibility/Bhashini buttons (icon + "Search" label, via
   the shared .bhashini-toggle look). The search FIELD is hidden until the launcher
   is clicked, then drops in full-width BELOW the bar. Applies on every screen. ---- */
.util-search-toggle{display:inline-flex}
.util-search-toggle .bh-label{text-transform:none}                       /* mixed-case like Accessibility */
/* keep the same resting white look as the Accessibility pill even while open
   (only the hover/focus highlight changes, exactly like Accessibility) */
.util-search-toggle[aria-expanded="true"]:not(:hover):not(:focus-visible){background:#fff;color:var(--navy-deep)}
.util-search-toggle[aria-expanded="true"]:not(:hover):not(:focus-visible) .svg-ico{color:var(--saffron-darker)}
/* Opened search = a full-width row INSIDE util-inner, so it shares the bar's
   centred max-width and spans the full container width below the bar. */
.util-searchrow{display:none;flex:1 1 100%;order:99;width:100%;margin-top:8px}
.util-bar.search-open .util-searchrow{display:flex}
.util-searchrow .util-search{display:flex;width:100%}
.util-searchrow .util-search input{flex:1 1 auto;width:auto;min-width:0;border-radius:20px 0 0 20px}
.util-searchrow .util-search button{border-radius:0 20px 20px 0}
@media (max-width:768px){
  .a11y-toggle .bh-label,.util-search-toggle .bh-label{display:none}     /* icon-only pills on mobile */
}

/* component-catalogue static preview wrapper for the modern top bar */
.pc-topbar-demo{border:1px solid var(--line);border-radius:10px;overflow:hidden;margin-top:8px}
.pc-topbar-demo .util-bar{position:static}
.pc-topbar-demo .util-announce{display:flex}            /* show even on the catalogue's wide layout */

/* integrated-ticker pause button (WCAG 2.2.2) + Accessibility-panel links */
.util-announce-pause{flex:0 0 auto;width:26px;height:26px;border:0;border-radius:50%;background:rgba(255,255,255,.14);color:#fff;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;font-size:10px;transition:background .2s}
.util-announce-pause:hover,.util-announce-pause:focus-visible{background:rgba(255,255,255,.28)}
.a11y-links{display:flex;flex-direction:column;gap:4px;border-top:1px solid var(--line);padding-top:10px;margin-top:4px}
.a11y-link{display:flex;align-items:center;gap:8px;padding:7px 10px;border-radius:8px;color:var(--navy-deep);text-decoration:none;font-weight:600;font-size:.92rem}
.a11y-link:hover,.a11y-link:focus-visible{background:var(--bg-alt)}
.a11y-link .svg-ico{color:var(--saffron-darker)}
html.dark-mode .a11y-link{color:#fff}

/* ============================================================================
   SLIDER CONTROLS — adopt the S3WaaS design: NO dots; one translucent pill with
   circular, bordered prev · pause · next buttons. (.slider-nav -> display:contents
   lifts the arrows into the pill so the pause can sit in the middle via order.)
   Dots stay in the DOM for JS/a11y but are visually hidden.
   ========================================================================== */
.slider-controls{background:rgba(8,40,80,.55);border-radius:30px;padding:6px 10px;gap:8px;flex-wrap:nowrap;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}
.slider-nav{display:contents}
.slider-dots{display:none}
.slider-arrow,.slider-pause{width:34px;height:34px;flex:0 0 auto;border-radius:50%;border:1.5px solid rgba(255,255,255,.7);background:transparent;color:#fff;display:inline-flex;align-items:center;justify-content:center}
.slider-arrow[data-slide="prev"]{order:1}
.slider-pause{order:2}
.slider-arrow[data-slide="next"]{order:3}
.slider-arrow:hover,.slider-arrow:focus-visible,.slider-pause:hover,.slider-pause:focus-visible{background:var(--s3-blue,var(--navy));border-color:var(--s3-blue,var(--navy));color:#fff;transform:none;box-shadow:none;outline:none}
/* DARK — match S3WaaS hero: translucent-black pill, filled #1a1a1a buttons, yellow icons, subtle #2e2e2e border (no bright ring); hover = yellow fill, black icon */
html.dark-mode .slider-controls{background:rgba(0,0,0,.6) !important;border:0 !important}
html.dark-mode .slider-arrow,html.dark-mode .slider-pause{background:#1a1a1a !important;color:#ffd23f !important;border:1.5px solid #2e2e2e !important;box-shadow:none !important}
html.dark-mode .slider-arrow:hover,html.dark-mode .slider-arrow:focus-visible,html.dark-mode .slider-pause:hover,html.dark-mode .slider-pause:focus-visible{background:#ffd23f !important;color:#000 !important;border-color:#ffd23f !important;box-shadow:none !important;transform:none !important}
/* mobile: smaller hero controls */
@media (max-width:640px){
  .slider-controls{padding:4px 6px;gap:6px}
  .slider-arrow,.slider-pause{width:26px;height:26px}
  .slider-pause::before{font-size:.82rem}
}

/* ============================================================================
   CIVIC — S3WaaS-style navbar: uppercase menu items, white-pill current item,
   and a slide-in RIGHT SIDEBAR drawer on mobile. Sitemap + Screen Reader Access
   live in the menu (nav.json), so they appear in the sidebar. Scoped to civic.
   ========================================================================== */
html[data-base="/resources/gigw-templates/civic"] .nav-link,
html[data-base="/resources/gigw-templates/civic"] .nav-parent{text-transform:uppercase;letter-spacing:.02em}
html[data-base="/resources/gigw-templates/civic"] .nav-link.is-current{background:#fff;color:var(--nav-bar);border-radius:999px;margin:6px 2px;padding:8px 18px;border-bottom-color:transparent}
html[data-base="/resources/gigw-templates/civic"] .nav-link.is-current:hover,
html[data-base="/resources/gigw-templates/civic"] .nav-link.is-current:focus-visible{background:#fff;color:var(--nav-bar)}

@media (max-width:900px){
  /* compact hamburger pinned right, like S3WaaS */
  html[data-base="/resources/gigw-templates/civic"] .mainnav>.container{flex-direction:row;align-items:center;justify-content:flex-end;min-height:46px;padding:0 8px}
  html[data-base="/resources/gigw-templates/civic"] .nav-toggle{width:auto;margin-left:auto;padding:11px 14px;background:transparent;justify-content:center;position:relative;z-index:960}
  /* the menu becomes a slide-in RIGHT SIDEBAR */
  html[data-base="/resources/gigw-templates/civic"] .nav-menu{
    display:flex;position:fixed;top:0;right:0;height:100%;width:300px;max-width:86vw;
    background:var(--navy-deep);flex-direction:column;flex-wrap:nowrap;padding:60px 0 24px;
    box-shadow:-8px 0 30px rgba(0,0,0,.4);transform:translateX(100%);visibility:hidden;
    transition:transform .28s ease,visibility 0s linear .28s;overflow-y:auto;z-index:950}
  html[data-base="/resources/gigw-templates/civic"] .nav-menu.open{transform:translateX(0);visibility:visible;transition:transform .28s ease,visibility 0s}
  html[data-base="/resources/gigw-templates/civic"] .nav-link,
  html[data-base="/resources/gigw-templates/civic"] .nav-parent{border-top:1px solid rgba(255,255,255,.1);border-bottom:0;padding:13px 20px}
  html[data-base="/resources/gigw-templates/civic"] .nav-link.is-current{margin:0;border-radius:0;background:rgba(255,255,255,.12);color:#fff}
  html[data-base="/resources/gigw-templates/civic"] .submenu .nav-sublink{color:#cdd9ec;padding-left:36px}
}
@media (prefers-reduced-motion:reduce){html[data-base="/resources/gigw-templates/civic"] .nav-menu{transition:none}}

/* ============================================================================
   Template Components hub (/resources/template-components/) — category bands + quick-link
   TOC that join the three merged catalogues into one sectioned page.
   ========================================================================== */
.tpl-components .tc-toc{display:flex;flex-wrap:wrap;gap:10px;margin:18px 0 4px}
.tpl-components .tc-toc-link{display:inline-flex;align-items:center;gap:6px;background:var(--navy);color:#fff;border-radius:30px;padding:8px 18px;font-weight:700;font-size:.9rem;text-decoration:none}
.tpl-components .tc-toc-link:hover,.tpl-components .tc-toc-link:focus-visible{background:var(--navy-deep)}
.tpl-components .tc-band{background:linear-gradient(135deg,var(--navy),var(--navy-deep));color:#fff;border-radius:16px;margin:34px 0 8px;scroll-margin-top:80px}
.tpl-components .tc-band .container{padding-block:26px}
.tpl-components .tc-band-kicker{display:inline-block;font-size:.72rem;letter-spacing:.28em;text-transform:uppercase;opacity:.75}
.tpl-components .tc-band-h{color:#fff;margin:6px 0 4px;border:0;padding:0}
.tpl-components .tc-band-h::after{display:none}
.tpl-components .tc-band-sub{margin:0;color:#dbe6f5;max-width:70ch}
/* keep the merged S3WaaS block self-contained */
.tpl-components .tc-s3-scope{margin-top:6px}

/* ============================================================================
   EXACT S3WaaS navbar — rendered for civic by includes.js (header.json s3nav).
   Ported from s3waas.css with the S3 palette mapped to civic's nav colours.
   These classes only appear where the S3 nav is rendered, so global is safe.
   ========================================================================== */
.s3-nav{background:var(--nav-bar);position:sticky;top:0;z-index:200}
.s3-nav>.container{padding:0 14px 0 20px;display:flex;align-items:center;gap:6px;max-width:var(--maxw);margin:0 auto}
.s3-menu{list-style:none;margin:0;padding:0;display:flex;flex-wrap:nowrap;flex:1 1 auto;min-width:0}
.s3-menu>li{position:relative;flex:0 0 auto}
.s3-menu>li>a,.s3-menu>li>button{display:inline-flex;align-items:center;gap:5px;white-space:nowrap;color:#fff;text-decoration:none;font-weight:700;font-size:.75rem;text-transform:uppercase;letter-spacing:.015em;padding:8px 14px;margin:6px 2px;border-radius:999px;background:none;border:0;cursor:pointer;font-family:inherit;line-height:1.6}
.s3-menu>li>a:hover,.s3-menu>li>button:hover,.s3-menu>li:focus-within>a{background:var(--navy-dark);color:#fff;border-radius:999px;margin:6px 2px;padding:8px 14px}
.s3-menu>li>a.is-current,.s3-menu>li>button.is-current{background:rgba(255,255,255,.94);color:var(--navy-deep);border-radius:999px;margin:6px 2px;padding:8px 14px}
.s3-menu>li>a.is-current:hover,.s3-menu>li>button.is-current:hover{background:#fff;color:var(--navy-deep)}
.s3-home-ico{font-size:.9em;margin-right:3px}
.s3-menu .s3-sub{list-style:none;margin:0;padding:6px;position:absolute;top:100%;left:0;min-width:250px;background:#fff;border-radius:0 0 8px 8px;box-shadow:0 12px 30px rgba(8,40,80,.22);border-top:3px solid var(--navy-deep);display:none;z-index:50;max-height:70vh;overflow-y:auto;overscroll-behavior:contain}
.s3-menu>li:hover>.s3-sub,.s3-menu>li.open>.s3-sub{display:block}
.s3-menu>li.click-closed:hover>.s3-sub,.s3-menu>li.click-closed:focus-within>.s3-sub{display:none}
.s3-caret{transition:transform .2s}
.s3-menu>li.open>a .s3-caret,.s3-menu>li.open>button .s3-caret,.s3-menu>li:hover>a .s3-caret,.s3-menu>li:hover>button .s3-caret{transform:rotate(180deg)}
.s3-sub a{display:block;padding:10px 14px;color:var(--ink);text-decoration:none;border-radius:6px;font-size:.92em;font-weight:500}
.s3-sub a:hover,.s3-sub a:focus-visible{background:var(--bg-alt);color:var(--navy-dark);outline:none}
.s3-menu>li.s3-hidden{display:none}
.s3-nav-toggle{display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;margin-left:auto;background:transparent;border:0;padding:12px 12px;cursor:pointer}
.s3-bars{display:inline-flex;flex-direction:column;gap:4px;width:26px}
.s3-bars span{height:3px;background:#fff;border-radius:2px;display:block;transition:transform .25s,opacity .2s}
.s3-nav-toggle[aria-expanded="true"] .s3-bars span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.s3-nav-toggle[aria-expanded="true"] .s3-bars span:nth-child(2){opacity:0}
.s3-nav-toggle[aria-expanded="true"] .s3-bars span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
.s3-drawer-overlay{position:fixed;inset:0;background:rgba(8,16,30,.5);z-index:9998}
.s3-drawer-overlay[hidden]{display:none}
.s3-drawer{position:fixed;top:0;right:0;height:100%;width:320px;max-width:88vw;background:var(--navy-deep);color:#fff;z-index:9999;transform:translateX(100%);visibility:hidden;transition:transform .28s ease,visibility 0s linear .28s;overflow-y:auto;padding:12px 0 24px}
/* Shadow ONLY while open. The closed drawer is parked at translateX(100%) just past the
   right edge, so a -8px/30px shadow on it spills ~22px back onto the visible page and
   reads as a grey band down the right-hand side of every page. (The visibility:hidden
   above already suppresses it here — this keeps the rule safe if that ever changes.) */
.s3-drawer.open{transform:translateX(0);visibility:visible;transition:transform .28s ease,visibility 0s;box-shadow:-8px 0 30px rgba(0,0,0,.35)}
.s3-drawer-close{display:inline-flex;align-items:center;gap:8px;margin:6px 14px 10px auto;background:transparent;border:0;color:#fff;font-weight:700;font-size:.95rem;cursor:pointer;font-family:inherit;float:right}
.s3-drawer-list{list-style:none;margin:0;padding:0;clear:both}
.s3-drawer-list>li>a{display:block;padding:12px 20px;color:#fff;text-decoration:none;font-weight:600;text-transform:uppercase;font-size:.84rem;letter-spacing:.02em;border-top:1px solid rgba(255,255,255,.1)}
.s3-drawer-list>li>a:hover,.s3-drawer-list>li>a:focus-visible{background:rgba(255,255,255,.1);color:#fff;outline:none}
.s3-drawer-sub{list-style:none;margin:0;padding:0 0 6px}
.s3-drawer-sub a{display:block;padding:9px 20px 9px 36px;color:#fff;text-decoration:none;font-size:.84rem}
.s3-drawer-sub a:hover{color:#fff;background:rgba(255,255,255,.08)}
@media (prefers-reduced-motion:reduce){.s3-drawer{transition:none}}
@media (max-width:900px){.s3-nav{position:static}.s3-menu{display:none}.s3-nav>.container{justify-content:flex-end;min-height:46px}}

/* nested sitemap children (parent card, then indented sub-links) */
.sitemap-list li{display:flex;flex-direction:column}
.sitemap-sub{list-style:none;margin:8px 0 0;padding:8px 0 0 6px;border-top:1px dashed var(--line);display:grid;gap:6px}
.sitemap-sub a{padding:7px 12px;font-weight:500;font-size:.9em;border:0;background:transparent;border-radius:8px}
.sitemap-sub a::before{content:"\f0da";opacity:.8}
.sitemap-sub a:hover{transform:none;box-shadow:none;background:var(--bg-alt);border-color:transparent}

/* ============================================================================
   Focus ring — one clear, COMPLETE outline on keyboard focus (never clipped:
   uses outline, not box-shadow, with a small offset). Site-wide, GIGW + S3.
   ========================================================================== */
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,
textarea:focus-visible,summary:focus-visible,[tabindex]:focus-visible{
  outline:3px solid var(--focus-ring,#1565c0);
  outline-offset:2px;border-radius:6px;
}
html.dark-mode :focus-visible{--focus-ring:#ffd23f}

/* A section intro lead (e.g. "About the Department") spans the FULL container
   width when the section has no side content (no cards/grid beside it); leads
   that sit next to a feature grid stay at the readable 65ch measure. */
.section > .container:not(:has(.feature-grid)):not(:has(.grid)) > .lead{max-width:none}

/* Counter band — clean edge-to-edge white surface with a CENTRED heading and a
   centred, grouped figures block (reads as one intentional showcase). */
.section:has(> .container > .stat-solid),
.section:has(> .container > .stat-plain),
.section:has(> .container > .stat-strip){
  background:#fff;border-block:1px solid var(--line);padding-block:clamp(40px,5vw,64px)}
/* heading stays LEFT-aligned like every other section (no centring) */
/* figures span the full container with equal columns + gaps */
.stat-solid,.stat-plain{width:100%;gap:22px}
html.dark-mode .section:has(> .container > .stat-solid),
html.dark-mode .section:has(> .container > .stat-plain),
html.dark-mode .section:has(> .container > .stat-strip){background:#0f1a2b;border-color:#26384f}

/* lock background scroll while the sidebar drawer is open */
html.s3-noscroll,html.s3-noscroll body{overflow:hidden}
/* While a nav dropdown / flyout is explicitly open, pause the page scroll so
   scrolling moves the open menu, not the page behind it (set by main.js). */
html.nav-scroll-lock,html.nav-scroll-lock body{overflow:hidden}
/* keyboard focus rings always visible & never clipped: keep the focused element
   clear of sticky headers, and reveal it from any overflow-clipped card/wrapper */
:focus-visible{scroll-margin:90px 0 24px}
.card:focus-within,.event-card:focus-within,.album-card:focus-within,.album-cover:focus-within,
.member-card:focus-within,.video-card:focus-within,.feature-card:focus-within,.gallery-tile:focus-within,
.msg-card:focus-within,.detail-card:focus-within{overflow:visible}

/* type/size tag on the integrated top-bar ticker items */
.util-announce-meta{color:var(--accent-on-dark);font-weight:600;font-size:11px;margin-left:2px;white-space:nowrap}

/* Focus rings inside overflow-clipped scrollers (tickers, marquees, carousels,
   sliders) are drawn INSIDE the element so they are never cut off — an outward
   offset would be clipped by the container, and overflow:visible would spill the
   long scrolling track. */
.util-announce-item:focus-visible,
.latest-ticker a:focus-visible,.latest-feed a:focus-visible,
.v-marquee a:focus-visible,
.article-carousel a:focus-visible,.gallery-tile:focus-visible,
.portrait-slider a:focus-visible,
.logo-marquee a:focus-visible,
.slider-controls button:focus-visible,.slider-dot:focus-visible{outline-offset:-2px}

/* Listing-page "View the archive / View all" action sits on the RIGHT of the
   title/header (floats top-right beside the lead); drops BELOW on mobile. */
.page-body > .container{position:relative}
.lead > .feed-viewall{position:absolute;top:2rem;right:0;float:none;margin:0}
@media (max-width:768px){
  .page-body > .container{position:static}
  .lead > .feed-viewall{position:static;float:none;display:flex;width:fit-content;margin:14px 0 0}
}

/* active page highlight inside the sidebar drawer */
.s3-drawer-list>li>a.is-current{color:#fff;background:rgba(255,255,255,.08)}

/* ============================================================================
   Collapsible data table (.data-table.collapsible) — on mobile each row becomes
   a card showing only the Description; a +/- toggle reveals the rest. Built from
   the same feed JSON via [data-feed-table][data-collapsible]. Full-width.
   ========================================================================== */
.table-wrap{width:100%}
.data-table.collapsible{width:100%}
.row-toggle{display:none}
.data-table.collapsible .row-detail{display:none}   /* desktop: full table, no detail rows */
@media (max-width:760px){
  /* MOBILE: keep just Sr No + Description as a real table; everything else
     (dates, Download, …) moves into the per-row detail panel. Kill the wide
     per-cell min-width so Sr No shrinks to the toggle + number and Description
     gets the full remaining width instead of being squeezed. */
  /* AUTO layout that works for ANY table: the first column shrinks to the
     toggle + its value (width:1% + nowrap), the 2nd column takes ALL the
     remaining width (width:100%), and the hidden columns collapse to 0. Widths
     are driven by these rules (not content), so nothing reflows on expand. */
  .data-table.collapsible{table-layout:auto;width:100%}
  .data-table.collapsible th,.data-table.collapsible td{min-width:0;overflow-wrap:anywhere}
  .data-table.collapsible thead th:nth-child(n+3),
  .data-table.collapsible tbody > tr:not(.row-detail) td:nth-child(n+3){display:none}
  .data-table.collapsible tbody > tr:not(.row-detail){cursor:pointer}
  /* first column = +/- toggle then the value (e.g. Sr No number); the header
     label only is hidden (font-size:0) — the value/number stays visible. */
  .data-table.collapsible thead th:first-child{font-size:0}
  .data-table.collapsible thead th:first-child,
  .data-table.collapsible tbody > tr:not(.row-detail) td:first-child{
    width:1%;white-space:nowrap;padding:9px 12px 9px 30px;text-align:left;
    position:relative;vertical-align:middle}
  /* 2nd column grabs ALL remaining width and wraps fully */
  .data-table.collapsible thead th:nth-child(2),
  .data-table.collapsible tbody > tr:not(.row-detail) td:nth-child(2){width:100%;overflow-wrap:anywhere;overflow-wrap:break-word}
  /* + / − is a small, borderless glyph, absolutely placed left of the value */
  .row-toggle{display:inline-flex;position:absolute;left:10px;top:50%;transform:translateY(-50%);align-items:center;justify-content:center;border:0;background:none;color:var(--muted);font-size:1.15rem;line-height:1;cursor:pointer;font-weight:700;padding:0}
  .row-toggle:hover,.row-toggle:focus-visible{background:none;color:var(--navy);outline-offset:3px}
  /* detail row shows ONLY when its row is open (accordion) */
  /* collapsed: only Sr No + Description show, so the table fits — no h-scroll
     wrapper (which would let the detail panel overflow off-screen and clip). */
  .table-wrap:has(.data-table.collapsible){overflow:visible}
  .data-table.collapsible tbody > tr.open + tr.row-detail{display:table-row}
  .data-table.collapsible .row-detail > td{background:var(--bg);padding:12px 14px}
  .row-detail-list{display:grid;grid-template-columns:max-content 1fr;gap:8px 16px;margin:0;align-items:start;min-width:0}
  .row-detail-list dt{font-weight:700;color:var(--navy-deep);margin:0;text-align:left}
  .row-detail-list dt::after{content:":"}
  .row-detail-list dd{margin:0;min-width:0;color:var(--ink);text-align:left;white-space:normal;overflow-wrap:anywhere;overflow-wrap:break-word}
  /* Download renders as a LINK (with its type/size), GIGW dl-link style — not a button */
  .row-detail-list .dl-btn{background:none;box-shadow:none;border-radius:0;padding:0;width:auto;color:var(--navy);font-weight:600;display:inline-flex;align-items:center;gap:6px}
  .row-detail-list .dl-btn:hover,.row-detail-list .dl-btn:focus-visible{background:none;color:var(--navy-dark);text-decoration:underline}
  .row-detail-list .dl-btn .svg-ico{color:var(--saffron-darker)}
  .row-detail-list .dl-btn .file-meta{color:var(--muted);font-weight:500}
  html.dark-mode .data-table.collapsible .row-detail > td{background:#0f1a2b}
  html.dark-mode .row-detail-list .dl-btn{color:#cfe0ff}
}

/* Uniform download buttons: every .dl-btn in a Download column stretches to the
   column width (= the widest button, e.g. one carrying "· PDF, 88 KB"). */
.data-table td[data-label="Download"]{white-space:nowrap}
.data-table td[data-label="Download"] .dl-btn{width:100%;justify-content:center;box-sizing:border-box}

/* Refined "Back to Photo Gallery" — small ghost link sitting beside the breadcrumb */
/* back button = its own block: sits below the breadcrumb (with a clear gap) and
   above the title (with comfortable spacing) */
.gallery-back{margin:40px 0 14px}
.btn-back{display:inline-flex;align-items:center;gap:6px;padding:4px 12px 4px 10px;border:1.3px solid var(--navy,var(--heading,#1a3c6e));border-radius:999px;color:var(--navy,var(--heading,#1a3c6e));background:transparent;font-weight:600;font-size:.78rem;line-height:1;white-space:nowrap;text-decoration:none;transition:background .18s,color .18s,gap .18s,box-shadow .18s}
.btn-back i{transition:transform .18s}
.btn-back:hover,.btn-back:focus-visible{background:var(--navy,var(--heading,#1a3c6e));color:#fff;gap:11px;box-shadow:0 3px 10px rgba(13,44,84,.22);outline:none}
.btn-back:hover i,.btn-back:focus-visible i{transform:translateX(-3px)}
html.dark-mode .btn-back{border-color:#cfe0ff;color:#cfe0ff}
html.dark-mode .btn-back:hover,html.dark-mode .btn-back:focus-visible{background:#cfe0ff;color:#0f1a2b}

/* ===================== DARK-MODE POLISH — themed elements that didn't adapt =====================
   Buttons/pills kept their theme colour, the templates-gallery cards stayed white, the nav
   dropdown and back-button used light colours. Re-skin them to the dark-mode yellow accent. */
:root{--dm-yellow:#ffd23f;--dm-yellow-light:#ffde72}

/* Solid CTA buttons + feed/event pills -> yellow fill, dark text */
html.dark-mode .btn:not(.btn-outline):not(.btn-back),
html.dark-mode .btn-navy,html.dark-mode .feed-viewall,
html.dark-mode .event-card .read-msg,html.dark-mode .album-card .read-msg{
  background:var(--dm-yellow) !important;color:#0e1622 !important;border-color:var(--dm-yellow) !important;box-shadow:none !important}
html.dark-mode .btn:not(.btn-outline):not(.btn-back):hover,
html.dark-mode .btn-navy:hover,html.dark-mode .feed-viewall:hover,html.dark-mode .feed-viewall:focus-visible,
html.dark-mode .event-card .read-msg:hover,html.dark-mode .event-card .read-msg:focus-visible{
  background:#fff !important;color:#000 !important}
/* arrows inside those pills follow the dark text colour */
html.dark-mode .feed-viewall::after,html.dark-mode .event-card .read-msg::after{color:inherit}
/* plain (text) read-msg links -> yellow */
html.dark-mode .read-msg{color:var(--dm-yellow) !important}

/* Back-to-gallery ghost pill -> yellow accent */
html.dark-mode .btn-back{border-color:var(--dm-yellow) !important;color:var(--dm-yellow) !important;background:transparent !important}
html.dark-mode .btn-back:hover,html.dark-mode .btn-back:focus-visible{background:var(--dm-yellow) !important;color:#0e1622 !important}

/* Government-portal pills -> dark with yellow border */
html.dark-mode .gov-portal-pill{background:#111 !important;border-color:var(--dm-yellow) !important;color:#fff !important}
html.dark-mode .gov-portal-pill:hover,html.dark-mode .gov-portal-pill:focus-visible{background:var(--dm-yellow) !important;color:#0e1622 !important}

/* Templates GALLERY cards (root index.html) -> dark panels, readable text */
html.dark-mode .sc-card{background:#111 !important;border-color:var(--dm-yellow) !important;color:#fff;box-shadow:none !important}
html.dark-mode .sc-title,html.dark-mode .sc-hi,html.dark-mode .sc-order b{color:#fff !important}
html.dark-mode .sc-tag{color:var(--dm-yellow) !important}
html.dark-mode .sc-order{color:#c9c9c9 !important}
html.dark-mode .sc-ref{border-left-color:var(--dm-yellow) !important}

/* Nav dropdown panel -> dark + readable (defensive over the per-template palette) */
html.dark-mode .submenu{background:#111 !important;border-top-color:var(--dm-yellow) !important}
html.dark-mode .submenu .nav-sublink,html.dark-mode .submenu .nav-subparent,
html.dark-mode .submenu .submenu-group-h{color:#fff !important}
html.dark-mode .submenu .nav-sublink:hover,html.dark-mode .submenu .nav-sublink:focus-visible,
html.dark-mode .submenu .nav-subparent:hover{background:rgba(255,255,255,.12) !important;color:var(--dm-yellow) !important}
/* the bar itself stays dark, never the theme blue */
html.dark-mode .mainnav{background:#000 !important}

/* Icons in chrome/content recolour to the accent instead of staying theme-coloured */
html.dark-mode .svg-ico,html.dark-mode .contact-ico,html.dark-mode .info-ico{color:var(--dm-yellow) !important}

/* Dark mode for the ported S3-style navbar (.s3-nav) used in GIGW templates (e.g. civic).
   It uses .s3-* classes, so html.dark-mode must target them explicitly. */
html.dark-mode .s3-nav{background:#000 !important}
html.dark-mode .s3-menu>li>a,html.dark-mode .s3-menu>li>button{color:#fff !important}
html.dark-mode .s3-menu>li>a:hover,html.dark-mode .s3-menu>li>button:hover,
html.dark-mode .s3-menu>li:focus-within>a{background:rgba(255,255,255,.14) !important;color:var(--dm-yellow) !important}
html.dark-mode .s3-menu>li>a.is-current,html.dark-mode .s3-menu>li>button.is-current{background:var(--dm-yellow) !important;color:#0e1622 !important}
html.dark-mode .s3-menu>li>a.is-current:hover,html.dark-mode .s3-menu>li>button.is-current:hover{background:#fff !important;color:#000 !important}
/* dropdown panel -> dark + yellow top border, readable links */
html.dark-mode .s3-menu .s3-sub{background:#111 !important;border-top-color:var(--dm-yellow) !important;box-shadow:0 12px 30px rgba(0,0,0,.6) !important}
html.dark-mode .s3-sub a{color:#fff !important}
html.dark-mode .s3-sub a:hover,html.dark-mode .s3-sub a:focus-visible{background:rgba(255,255,255,.12) !important;color:var(--dm-yellow) !important}
html.dark-mode .s3-caret{color:#fff}
html.dark-mode .s3-bars span{background:#fff}
/* mobile drawer */
html.dark-mode .s3-drawer{background:#0a0a0a !important;color:#fff !important;border-left:1px solid var(--dm-yellow)}
html.dark-mode .s3-drawer a,html.dark-mode .s3-drawer button{color:#fff !important}
html.dark-mode .s3-drawer a:hover,html.dark-mode .s3-drawer a:focus-visible,
html.dark-mode .s3-drawer button:hover{color:var(--dm-yellow) !important;background:rgba(255,255,255,.08) !important}

/* "LATEST NEWS" announce badge -> dark-mode yellow (was the pink accent) */
html.dark-mode .util-announce-badge{background:var(--dm-yellow) !important;color:#0e1622 !important}
html.dark-mode .util-announce-badge i{color:#0e1622 !important}

/* dark-mode fixes: active/hover dropdown caret colour + announce-badge text (span) */
html.dark-mode .util-announce-badge,html.dark-mode .util-announce-badge span{color:#0e1622 !important}
/* caret follows its item: white normally, dark on the yellow active pill, yellow on hover */
html.dark-mode .s3-caret{color:#fff}
html.dark-mode .s3-menu>li>a.is-current .s3-caret,
html.dark-mode .s3-menu>li>button.is-current .s3-caret{color:#0e1622 !important}
html.dark-mode .s3-menu>li>a:hover .s3-caret,html.dark-mode .s3-menu>li>button:hover .s3-caret,
html.dark-mode .s3-menu>li.open>button .s3-caret{color:var(--dm-yellow) !important}
html.dark-mode .s3-menu>li>a.is-current:hover .s3-caret,
html.dark-mode .s3-menu>li>button.is-current:hover .s3-caret{color:#000 !important}

/* ===== 3rd-level FLYOUT submenu in the s3-nav dropdown (parity with the GIGW navbar) ===== */
.s3-has-flyout{position:relative}
.s3-subparent{width:100%;display:flex;align-items:center;justify-content:space-between;gap:8px;background:none;border:0;font:inherit;text-align:left;cursor:pointer;padding:10px 14px;color:var(--ink);border-radius:6px;font-size:.92em;font-weight:500}
.s3-subparent:hover,.s3-subparent:focus-visible{background:var(--bg-alt);color:var(--navy-dark);outline:none}
.s3-caret-r{font-size:.78em;flex:0 0 auto;transition:transform .2s}
.s3-sub:has(.s3-has-flyout){overflow:visible}
.s3-has-flyout>.s3-flyout{position:absolute;top:-6px;left:100%;min-width:220px;border-radius:0 8px 8px 8px;display:none;max-height:70vh;overflow-y:auto;overscroll-behavior:contain}
.s3-has-flyout:hover>.s3-flyout,.s3-has-flyout.open>.s3-flyout,.s3-has-flyout:focus-within>.s3-flyout{display:block}
.s3-has-flyout:hover>.s3-subparent .s3-caret-r,.s3-has-flyout.open>.s3-subparent .s3-caret-r{transform:translateX(2px)}
.s3-drawer-sub2{list-style:none;margin:2px 0 6px 14px;padding:0;border-left:2px solid rgba(255,255,255,.18)}
.s3-drawer-sub2 a{font-size:.92em;opacity:.92}
/* dark mode for the flyout + sub-parent */
html.dark-mode .s3-subparent{color:#fff !important}
html.dark-mode .s3-subparent:hover,html.dark-mode .s3-subparent:focus-visible{background:rgba(255,255,255,.12) !important;color:var(--dm-yellow) !important}
html.dark-mode .s3-caret-r{color:inherit}

/* dark-mode focus: general content = 3px yellow (via --focus-ring, border-radius:inherit);
   chrome bars = the thin 1px inset rule above. No global override needed. */

/* ===== Focus ring never clipped: elements inside overflow:hidden (image tiles, card
   covers, carousel/scroller items) draw an INSET ring so it shows fully on all sides,
   following the element's own radius. Colour = --focus-ring (blue light / yellow dark). ===== */
.gallery-tile:focus-visible,
.media-grid .gallery-tile:focus-visible,
.event-card > a:first-child:focus-visible,
.event-card > .album-cover:first-child:focus-visible,
.album-cover:focus-visible,
.album-card .album-cover:focus-visible,
.ac-track a:focus-visible,.ac-track button:focus-visible,
.scroller-track a:focus-visible,
.gallery a:focus-visible,
.video-card > a:first-child:focus-visible,
.video-tile:focus-visible{
  outline:3px solid var(--focus-ring,var(--ring,#1565c0)) !important;
  outline-offset:-3px !important;border-radius:inherit}
/* cards that can safely reveal the ring just stop clipping while focused */
.msg-card:focus-within,.detail-card:focus-within,.policy-section:focus-within,.faq-item:focus-within{overflow:visible}

/* Photo gallery: individual images are NOT selectable/draggable (display only;
   navigate via the carousel arrows). Applies to every template (shared CSS). */
.gallery-album img,.gallery-album .ac-slide,.gallery-album .gallery-tile,
.gallery-tile img,.gallery img,.media-grid img,.album-cover img{
  -webkit-user-select:none;-moz-user-select:none;user-select:none;
  -webkit-user-drag:none;user-drag:none}

/* Photo-gallery carousel: focus the WHOLE track (one ring around the row), NOT each
   image. The track is the single tab-stop; arrow keys browse; slides aren't focusable. */
.ac-track{border-radius:12px}
.ac-track:focus-visible{outline:3px solid var(--focus-ring,var(--ring,#1565c0));outline-offset:3px;border-radius:12px}
.ac-track:focus{outline:none}
.ac-slide:focus-visible,.ac-track .ac-slide:focus-visible,.ac-track .gallery-tile:focus-visible{outline:none !important}
/* PDF (document) type tag on nav links — shown on every navbar (s3-nav + GIGW main nav) */
.s3-doc-type{display:inline-flex;align-items:center;gap:4px;margin-left:6px;padding:1px 8px;font-size:.6rem;font-weight:800;line-height:1.6;letter-spacing:.04em;text-transform:uppercase;border-radius:14px;background:var(--saffron);color:#fff;vertical-align:middle}
.s3-doc-type i{font-size:.66em}
.s3-drawer-list .s3-doc-type,.s3-drawer-sub .s3-doc-type,.s3-drawer-sub2 .s3-doc-type{background:var(--saffron)}
/* s3waas nav download items: PDF badge sits on its OWN line beneath the label
   (consistent with the GIGW .dl-badge), and themes to a yellow pill w/ black text in dark. */
.s3-sub>li>a,.s3-flyout>li>a,.s3-drawer-sub>li>a,.s3-drawer-sub2>li>a{display:flex;flex-direction:column;align-items:flex-start;gap:4px}
.s3-sub .s3-doc-type,.s3-flyout .s3-doc-type,.s3-drawer-sub .s3-doc-type,.s3-drawer-sub2 .s3-doc-type{margin-left:0}
html.dark-mode .s3-doc-type,html.dark-mode .s3-drawer-list .s3-doc-type,html.dark-mode .s3-drawer-sub .s3-doc-type,html.dark-mode .s3-drawer-sub2 .s3-doc-type{background:var(--dm-yellow,#ffd23f) !important;color:#000 !important}
html.dark-mode .s3-doc-type i{color:#000 !important}

/* ============================================================================
   WHITE SIDEBAR (slide-out drawer) — global default for EVERY template.
   The NAVBAR itself keeps its theme colour (.mainnav / .s3-nav are left as-is);
   ONLY the slide-out hamburger SIDEBAR DRAWER (.s3-drawer) renders WHITE, with
   links & active states in the brand colour (--nav-bar). The TOP util-bar carries
   the theme colour. Single-class selectors on purpose: every html.dark-mode rule
   is more specific (or !important), so dark mode still flips these to black.
   ========================================================================== */
/* The GIGW chrome (util-bar + masthead + nav) is injected inside one
   <div data-include="header"> wrapper. position:sticky is confined to that
   wrapper, so the navbar UN-STICKS the moment you scroll into <main> (and "Skip
   to Main Content" lands with the header still partly on screen). display:contents
   drops the wrapper's box so its children belong to <body> — the nav then sticks
   for the whole page. (Footer uses data-include="footer", so it's untouched.) */
[data-include="header"]{display:contents}

/* top util-bar → the theme colour (was navy→#06182f; that dirtied non-navy themes) */
.util-bar{background:linear-gradient(180deg,var(--navy-dark) 0%,var(--navy-deep) 100%)}

/* ---- white SIDEBAR DRAWER (.s3-drawer) — civic / citizen; navbar stays coloured ---- */
.s3-drawer{background:#fff;color:var(--ink)}
.s3-drawer-close{color:var(--nav-bar)}
.s3-drawer-list>li>a{color:var(--ink);border-top:1px solid var(--line)}
.s3-drawer-list>li>a:hover,.s3-drawer-list>li>a:focus-visible{background:var(--nav-hover-bg);color:var(--nav-bar)}
.s3-drawer-list>li>a.is-current{color:var(--nav-bar);background:var(--nav-hover-bg)}
.s3-drawer-sub a{color:var(--muted)}
.s3-drawer-sub a:hover{color:var(--nav-bar);background:rgba(0,0,0,.04)}

/* ============================================================================
   Accessibility dropdown stays a FIXED size — its OWN text must NEVER scale with
   the A-/A/A+ control (which changes the root/body font-size). Pin the panel and
   its rem-based / inherited text to px (px-based items here are already immune).
   Only PAGE CONTENT scales; the control panel itself does not.
   ========================================================================== */
.a11y-panel{font-size:16px}
.a11y-panel-head h3{font-size:16px}
.a11y-panel-close{font-size:22px}
.a11y-link{font-size:14.7px}
.a11y-panel .bhashini-toggle{font-size:14.7px}
.a11y-panel .bhashini-toggle::before{font-size:16.8px}
.a11y-panel .bhashini-menu button{font-size:14.7px}

/* GIGW top-bar search — TYPE-SCOPED, DESKTOP ONLY. This is the top-bar TYPE WITHOUT the
   Latest-News ticker: includes.js gives that bar `.util-bar--gigw` (a ticker bar gets
   `.util-bar--announce` instead — line 368), so `.util-bar--gigw` alone already means
   "no Latest-News" and covers EVERY template / component / built site with this bar,
   while citizen (saffron) + civic (navy) — which carry the ticker — are excluded
   automatically. By default the row is flex:1 1 auto / max-width:none and grows to fill
   the gap (search floats in the centre); instead we give it a tidy fixed width and push
   it to the RIGHT so it sits beside the Accessibility/Translate tools. Mobile keeps the
   default responsive search. */
@media (min-width:1101px){
  .util-bar--gigw .util-searchrow{
    flex:0 0 auto;width:190px;max-width:190px;min-width:0;margin-left:auto;margin-right:0}
}

/* Nav download badge: yellow pill + BLACK text/icon in dark mode (authoritative, end-of-file so it wins the cascade over the generic .svg-ico !important). */
html.dark-mode .nav-sublink.nav-download .dl-badge{background:var(--dm-yellow,#ffd23f)}
html.dark-mode .nav-sublink.nav-download .dl-badge,html.dark-mode .nav-sublink.nav-download .dl-badge .dl-meta,html.dark-mode .nav-sublink.nav-download .dl-badge .dl-ico,html.dark-mode .nav-sublink.nav-download .dl-badge .svg-ico,html.dark-mode .nav-sublink.nav-download:hover .dl-badge .dl-meta,html.dark-mode .nav-sublink.nav-download:hover .dl-badge .dl-ico,html.dark-mode .nav-sublink.nav-download:hover .dl-badge .svg-ico,html.dark-mode .nav-sublink.nav-download:focus-visible .dl-badge .dl-meta,html.dark-mode .nav-sublink.nav-download:focus-visible .dl-badge .dl-ico,html.dark-mode .nav-sublink.nav-download:focus-visible .dl-badge .svg-ico{color:#000 !important}

/* ============================================================================
   Sidebar / slide-in mobile menu: NO active-state highlight for the current
   (visited) page — the current item looks exactly like every other link, in
   both light and dark. Desktop nav bar keeps its active pill (this is scoped to
   the mobile breakpoint only). Covers the general mobile menu AND the per-template
   data-base sidebars via !important. Matches the s3waas drawer behaviour.
   ============================================================================ */
@media (max-width:900px){
  .nav-menu .nav-link.is-current,
  .nav-menu .nav-parent.is-current{background:transparent !important;color:#fff !important}
}

/* Sidebar drawer (mobile): NO active-state highlight for the current/visited page —
   covers BOTH the main list and the util links (Sitemap / Screen Reader Access), which
   are bare <a class="is-current"> not under .s3-drawer-list. Fixes the unreadable
   white-on-pink current item in dark mode on GIGW template pages. */
.s3-drawer a.is-current{background:transparent !important;color:var(--ink) !important}
html.dark-mode .s3-drawer a.is-current{background:transparent !important;color:#fff !important}

/* Sidebar drawer: drop the 3rd-level nesting guide line (border-left) in dark mode —
   the white rule shows on the dark drawer next to Activity Album items. */
html.dark-mode .s3-drawer-sub2{border-left-color:transparent}

/* ============================================================================
   REUSABLE COMPONENTS — theme-agnostic, work in BOTH GIGW and S3WaaS.
   Colours come from fallback token chains (s3 → gigw → sane default), so these
   render correctly whichever theme's :root is loaded. Dark mode targets BOTH
   `.s3-dark` (S3WaaS) and `html.dark-mode` (GIGW).  Shipped in style.css AND s3waas.css.
   Components: s3-timeline · s3-yr/s3-elist (year listing) · s3-subhead
   ============================================================================ */
.s3-timeline,.s3-yr,.s3-elist,.s3-subhead{
  --rc-accent:var(--s3-accent,var(--accent,var(--saffron,#e8650c)));
  --rc-accent-d:var(--s3-accent-dark,var(--accent-dark,#c9560a));
  --rc-deep:var(--s3-blue-deep,var(--brand-deep,var(--primary-dark,#062a5e)));
  --rc-brand:var(--s3-blue,var(--brand,var(--primary,#0d47a1)));
  --rc-soft:var(--s3-soft,var(--surface-2,#eef2f8));
  --rc-line:var(--s3-line,var(--line,#e3e8f0));
  --rc-ink:var(--s3-ink,var(--ink,#1f2733));
  --rc-card:var(--s3-card,#fff);
  --rc-muted:var(--s3-muted,#667082);
}
/* ---- s3-timeline: year-wise vertical timeline ---- */
.s3-timeline{list-style:none;margin:14px 0 4px;padding:0 0 0 4px;position:relative}
.s3-timeline::before{content:"";position:absolute;left:32px;margin-left:-1.5px;top:6px;bottom:6px;width:4px;background:linear-gradient(180deg,var(--rc-accent),var(--rc-brand),var(--rc-deep));border-radius:2px}
.s3-tl-item{position:relative;display:grid;grid-template-columns:64px 1fr;gap:18px;align-items:start;margin:0 0 22px}
.s3-tl-year{grid-column:1;display:inline-flex;align-items:center;justify-content:center;width:64px;height:64px;border-radius:50%;background:linear-gradient(150deg,var(--rc-brand),var(--rc-deep));border:3px solid #fff;outline:3px solid var(--rc-soft);color:#fff;font-weight:800;font-size:1rem;box-shadow:0 6px 16px rgba(8,40,80,.25);position:relative;z-index:2}
.s3-tl-card{grid-column:2;background:var(--rc-card);border:1px solid var(--rc-line);border-radius:12px;padding:14px 18px;box-shadow:0 4px 14px rgba(8,40,80,.06);transition:transform .18s,box-shadow .18s}
.s3-tl-card:hover{transform:translateY(-2px);box-shadow:0 12px 28px rgba(8,40,80,.14)}
.s3-tl-group+.s3-tl-group{margin-top:12px;padding-top:12px;border-top:1px dashed var(--rc-line)}
.s3-tl-h{margin:0 0 6px;font-size:.78rem;letter-spacing:.05em;text-transform:uppercase;color:var(--rc-accent-d);font-weight:800;display:flex;align-items:center;gap:8px}
.s3-tl-h i{color:var(--rc-accent);font-size:.95em;width:1.1em;text-align:center}
.s3-tl-count{margin-left:auto;background:var(--rc-soft);color:var(--rc-deep);font-size:.72rem;font-weight:800;padding:1px 9px;border-radius:999px}
.s3-tl-list{margin:0;padding-left:2px}
.s3-tl-list li{position:relative;list-style:none;padding-left:20px;margin:4px 0;color:var(--rc-ink);line-height:1.5}
.s3-tl-list li::before{content:"";position:absolute;left:2px;top:.62em;width:7px;height:7px;border-radius:50%;background:var(--rc-accent);box-shadow:0 0 0 3px var(--rc-soft)}
.s3-tl-group.is-highlight .s3-tl-h i{color:#c9560a}
.s3-tl-group.is-highlight .s3-tl-list li::before{background:#e8a30c}
/* Mobile: STACK the timeline (year pill on top, card full-width) — beats the side-year rule */
@media (max-width:600px){.s3-timeline{padding-left:0!important;margin-left:0}.s3-timeline::before{display:none!important}.s3-tl-item{display:block!important;margin:0 0 34px!important}.s3-tl-year{display:flex!important;width:fit-content!important;height:auto!important;min-width:0!important;aspect-ratio:auto!important;border-radius:999px!important;padding:5px 18px!important;font-size:.9rem!important;margin:0 auto 12px!important;outline:0!important;border:2px solid #fff}.s3-tl-card{display:block!important;width:100%!important;padding:13px 15px}.s3-tl-h{font-size:.98rem}.s3-tl-list li{font-size:.94rem;line-height:1.55}}
@media(max-width:560px){.s3-timeline::before{left:22px}.s3-tl-item{grid-template-columns:44px 1fr;gap:12px}.s3-tl-year{width:44px;height:44px;font-size:.8rem}}
/* ---- EMPTY-STATE CARD — pages/sections with no data yet (universal) ---- */
.s3-emptycard{display:flex;flex-direction:column;align-items:center;text-align:center;gap:12px;max-width:560px;margin:10px auto 14px;padding:40px 30px;background:var(--s3-soft,var(--soft,#eef2f8));border:1px solid var(--s3-line,var(--rc-line,var(--line,#d7e0ee)));border-radius:16px}
.s3-emptycard-ico{width:62px;height:62px;flex:0 0 auto;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;background:#fff;color:var(--s3-blue,var(--rc-accent,var(--navy,#0d47a1)));font-size:26px;box-shadow:0 2px 8px rgba(8,40,80,.10)}
.s3-emptycard-title{margin:2px 0 0;font-weight:800;font-size:1.12rem;color:var(--s3-ink,var(--ink,#1a2733))}
.s3-emptycard-text{margin:0;max-width:46ch;color:var(--s3-muted,var(--muted,#5a6b7b));font-size:.96rem;line-height:1.6}
.s3-dark .s3-emptycard,html.dark-mode .s3-emptycard{background:#111;border-color:#2e2e2e}
.s3-dark .s3-emptycard-ico,html.dark-mode .s3-emptycard-ico{background:#000;color:#ffd23f;box-shadow:none}
.s3-dark .s3-emptycard-title,html.dark-mode .s3-emptycard-title{color:#fff}
.s3-dark .s3-emptycard-text,html.dark-mode .s3-emptycard-text{color:#cfcfcf}
/* ---- s3-yr / s3-elist: year-grouped listing ---- */
.s3-yr{margin:0 0 16px;padding-top:40px;font-size:1.18rem;font-weight:800;color:var(--rc-deep);display:flex;align-items:center;gap:10px}
.s3-yr::before{content:"";width:5px;height:20px;border-radius:3px;background:var(--rc-accent)}
.s3-yr:first-of-type{padding-top:6px}
.s3-yr .s3-yr-n{margin-left:auto;font-size:.72rem;font-weight:700;color:var(--rc-muted)}
.s3-elist{list-style:none;margin:0 0 4px;padding:0;display:flex;flex-direction:column;gap:8px}
.s3-elist>li{margin:0}
.s3-elist a{display:flex;align-items:center;gap:13px;padding:15px 18px;border-radius:12px;border:1px solid var(--rc-line);background:var(--rc-card);color:var(--rc-ink);text-decoration:none;font-weight:500;line-height:1.45;transition:transform .16s,box-shadow .16s,border-color .16s,background .16s}
.s3-elist a:hover,.s3-elist a:focus-visible{background:#fff;border-color:var(--rc-brand);box-shadow:0 8px 22px rgba(8,40,80,.10);transform:translateY(-1px);outline:none}
.s3-elist a>i:first-child{color:var(--rc-accent-d);width:1.25em;text-align:center;flex:none;font-size:1.05em}
.s3-el-size{margin-left:auto;flex:none;font-size:.76rem;color:var(--rc-muted);font-weight:600;white-space:nowrap}
.s3-el-tag{flex:none;font-size:.66rem;font-weight:800;letter-spacing:.03em;background:var(--rc-accent-d);color:#fff;padding:3px 10px;border-radius:16px}
.s3-el-size + .s3-el-tag{margin-left:10px}
.s3-el-go{margin-left:auto;color:var(--rc-brand);opacity:.5;transition:transform .16s,opacity .16s;flex:none}
.s3-elist a:hover .s3-el-go{transform:translateX(4px);opacity:1}
/* ---- s3-subhead: sub-group heading (needs a scope class to beat theme h3 rules) ---- */
.s3 .s3-subhead,.gigw .s3-subhead,body .s3-subhead{margin:44px 0 12px;padding:3px 0 3px 12px;font-size:1.05rem;font-weight:800;color:var(--rc-deep);border-left:4px solid var(--rc-accent);line-height:1.35}
.s3 .s3-content>.s3-subhead:first-child,.s3 .s3-lead+.s3-subhead,body .s3-content>.s3-subhead:first-child{margin-top:8px}
/* ---- DARK MODE (both S3WaaS .s3-dark and GIGW html.dark-mode) ---- */
.s3-dark .s3-tl-year,html.dark-mode .s3-tl-year{background:linear-gradient(150deg,#ffd23f,#c99a10);border-color:#000;outline-color:#333;color:#000}
.s3-dark .s3-timeline::before,html.dark-mode .s3-timeline::before{background:linear-gradient(#ffd23f,#7a6212)}
.s3-dark .s3-tl-card,html.dark-mode .s3-tl-card{background:#0d0d0d;border-color:#333}
.s3-dark .s3-tl-group+.s3-tl-group,html.dark-mode .s3-tl-group+.s3-tl-group{border-top-color:#333}
.s3-dark .s3-tl-h,html.dark-mode .s3-tl-h,.s3-dark .s3-tl-h i,html.dark-mode .s3-tl-h i{color:#ffd23f}
.s3-dark .s3-tl-count,html.dark-mode .s3-tl-count{background:#1a1a1a;color:#ffd23f}
.s3-dark .s3-tl-list li,html.dark-mode .s3-tl-list li{color:#eee}
.s3-dark .s3-tl-list li::before,html.dark-mode .s3-tl-list li::before{background:#ffd23f;box-shadow:0 0 0 3px #1a1a1a}
.s3-dark .s3-yr,html.dark-mode .s3-yr{color:#fff}
.s3-dark .s3-yr::before,html.dark-mode .s3-yr::before{background:#ffd23f}
.s3-dark .s3-elist a,html.dark-mode .s3-elist a{background:#0d0d0d;border-color:#333;color:#eee}
.s3-dark .s3-elist a:hover,html.dark-mode .s3-elist a:hover{background:#141414;border-color:#ffd23f;box-shadow:0 8px 22px rgba(0,0,0,.5)}
.s3-dark .s3-elist a>i:first-child,html.dark-mode .s3-elist a>i:first-child{color:#ffd23f}
.s3-dark .s3-el-tag,html.dark-mode .s3-el-tag{background:#ffd23f;color:#000}
.s3-dark .s3-el-go,html.dark-mode .s3-el-go{color:#ffd23f}
.s3-dark .s3-el-size,html.dark-mode .s3-el-size{color:#9aa0a6}
.s3-dark .s3-subhead,html.dark-mode .s3-subhead{color:#fff;border-left-color:#ffd23f}

/* Unavailable document — keep the SAME doc-list row (name + right cell), show a muted dash instead of PDF/size/download */
.s3-doclist li.s3-dl-unavail .s3-dl-name{color:var(--s3-muted,#6b7280);font-weight:400}
.s3-doclist li.s3-dl-unavail .s3-dl-name i{color:var(--s3-muted,#9aa0a6)}
.s3-doclist li.s3-dl-unavail .s3-dl-na{margin-left:auto;flex:none;color:var(--s3-muted,#9aa0a6);font-weight:800;font-size:1.05rem}
.s3-dark .s3-doclist li.s3-dl-unavail .s3-dl-name,.s3-dark .s3-doclist li.s3-dl-unavail .s3-dl-name i,.s3-dark .s3-doclist li.s3-dl-unavail .s3-dl-na{color:#8a9098}

/* MOBILE: unify main-content body text to 15px across pages */
@media (max-width:640px){#main-content p:not(.lead),#main-content li,.page-body p:not(.lead),.page-body li,#s3-main p:not(.s3-lead),#s3-main li{font-size:.95rem}}

/* site content prose reads JUSTIFIED (hyphenation avoids big word gaps); leads stay left */
.prose p:not(.lead),.content-section>p:not(.lead){text-align:justify;-webkit-hyphens:auto;hyphens:auto}
@media (max-width:480px){.prose p,.content-section>p{text-align:left;hyphens:manual}}

/* ===== Boxed visitor counter (UNIVERSAL — GIGW + S3WaaS) =====
   counter.js wraps each digit of a #…-visit-count / #page-views element carrying data-boxed
   in .footer-digit and animates the total up. Works on any dark footer bar. */
.footer-countbox{display:inline-flex;flex-direction:column;align-items:center;gap:6px;padding:8px 15px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.14);border-radius:10px}
.footer-count-label{font-size:.66rem;letter-spacing:.09em;text-transform:uppercase;opacity:.72;font-weight:700}
.footer-counter{display:inline-flex;gap:3px;align-items:center;vertical-align:middle;font-style:normal}
.footer-digit{display:inline-flex;align-items:center;justify-content:center;min-width:1.35em;padding:4px 6px;background:linear-gradient(180deg,rgba(255,255,255,.16),rgba(255,255,255,.07));border:1px solid rgba(255,255,255,.22);border-radius:6px;font-variant-numeric:tabular-nums;font-weight:800;line-height:1;box-shadow:inset 0 1px 0 rgba(255,255,255,.12),0 1px 2px rgba(0,0,0,.35)}
.footer-digit-sep{opacity:.5;font-weight:800;padding:0 1px}
#page-views.footer-counter{display:inline-flex}
/* sec-goa-style bottom bar: credit + clock "Last updated" grouped LEFT, boxed count RIGHT */
.footer-bottom-left{display:flex;flex-direction:column;gap:5px;min-width:0}
.footer-credit-text{line-height:1.5}
.footer-credit-text strong{color:#fff;font-weight:700}
.footer-meta-item{display:inline-flex;align-items:center;gap:8px;font-size:.8rem;opacity:.92}
.footer-meta-item>i{opacity:.65;font-size:.9em}
.footer-meta-label{opacity:.82}
.footer-meta-item strong{color:#fff}
@media (max-width:640px){.footer-bottom-bar{flex-direction:column;text-align:center;gap:12px}.footer-bottom-left{align-items:center}}

/* ============================================================================
   Accessibility panel — unified to look like the S3WaaS a11y box (same on GIGW
   templates + built GIGW sites). Compact white card; Text-size is a ROW (label
   left, A−/A/A+ right); the A-buttons are all white with brand text + a 1px
   border (NO navy "selected" fill — the middle "A" was navy-on-navy/odd); focus
   is a visible outline (was suppressed). Group headings small-uppercase-muted;
   dark mode = black + yellow. Mirrors .s3-a11y-panel / .s3-a11y-row / .s3-a11y-btns.
   ============================================================================ */
.a11y-panel{width:auto;min-width:232px;padding:8px;border-radius:10px}
.a11y-menu-head{border-bottom:0;color:var(--navy-deep);padding:2px 6px 6px;margin:0}
/* Text-size group -> a row: label on the left, the A−/A/A+ cluster on the right */
.a11y-group:has(.font-controls){margin:2px 0 0;display:flex;justify-content:space-between;align-items:center;gap:10px;padding:6px 6px}
.a11y-group:has(.font-controls) .a11y-group-label{margin:0;font-size:.85rem;font-weight:700;color:var(--ink);text-transform:none;letter-spacing:normal}
.a11y-panel .a11y-group .font-controls{display:inline-flex;gap:6px;width:auto;border-radius:0;overflow:visible}
/* A−/A/A+ = compact white/brand buttons with a border; no navy reset fill; hover soft; focus ring */
.a11y-panel .font-btn,
.a11y-panel .font-btn[data-font="reset"]{flex:0 0 auto;width:auto;min-width:30px;height:28px;padding:0 8px;background:#fff;color:var(--navy-deep);border:1px solid var(--line);border-radius:6px;font-size:14px;font-weight:800}
.a11y-panel .font-btn:hover,.a11y-panel .font-btn[data-font="reset"]:hover,.a11y-panel .font-btn:focus-visible{background:var(--bg);border-color:var(--navy)}
.a11y-panel .font-btn:focus-visible{outline:2px solid var(--navy);outline-offset:1px}
/* Display / Screen reader group headings = small uppercase muted (like .s3-a11y-grouph) */
.a11y-group:not(:has(.font-controls)){margin:8px 0 0}
.a11y-group:not(:has(.font-controls)) .a11y-group-label{font-size:.67rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin:0 6px 2px}
/* Dark-mode toggle item = clean flex row (like .s3-a11y-item); Read-aloud keeps its own focus/active pill */
.a11y-panel .dark-btn{border-radius:6px;font-weight:600;font-size:.85rem;margin:2px 0 0}
/* --- dark mode --- */
html.dark-mode .a11y-panel .font-btn,html.dark-mode .a11y-panel .font-btn[data-font="reset"]{background:#111;color:#fff;border-color:#ffd23f}
html.dark-mode .a11y-panel .font-btn:hover,html.dark-mode .a11y-panel .font-btn:focus-visible{background:#ffd23f;color:#000;border-color:#ffd23f}
html.dark-mode .a11y-group:has(.font-controls) .a11y-group-label{color:#fff}

/* Read-along ring on an accessibility-panel control sits INSIDE the control (inset outline) so a
   clipping ancestor (.font-controls overflow:hidden, panel edge / rounded corner) can never cut it
   off — fixes the clipped Text-size A-/A/A+ + Dark mode + Read-aloud outline WHILE READING. */

/* Uniform accessibility dropdown box WIDTH across every shell/site (same size everywhere). */
[class*="a11y-panel"]{width:min(280px,calc(100vw - 24px)) !important;min-width:0 !important}

/* Text-size A-/A/A+ buttons keep a FIXED compact size — they never grow/shrink when the panel
   width changes (uniform across every site). */
[class*="a11y-panel"] .font-btn{flex:0 0 auto !important;width:auto !important;min-width:32px}

/* Text-size laid out as a ROW (label left, compact A-/A/A+ right) on every GIGW panel — matches the
   iphb reference box. */
[class*="a11y-panel"] .a11y-group:has(.font-controls){display:flex;justify-content:space-between;align-items:center;gap:10px}
[class*="a11y-panel"] .a11y-group:has(.font-controls) .a11y-group-label{margin:0}
[class*="a11y-panel"] .font-controls{display:inline-flex;gap:6px;width:auto;overflow:visible}

/* A11y Dark-mode button: NO rest tint; light tint on HOVER ONLY.
   NOTE: the `:not(.read-aloud-btn)` guards below are INERT (read-aloud was removed — a page
   cannot drive an external screen reader, so the dead TTS went) but are DELIBERATELY KEPT:
   `:not()` carries CLASS specificity, so deleting it would silently lower these rules by one
   class and let other rules win. Leave them. (was: read-aloud
   focus/active brand pill still wins over hover). */
.a11y-panel .dark-btn:not(.read-aloud-btn){background:var(--bg)}
.a11y-panel .dark-btn:not(.read-aloud-btn):hover{background:var(--bg-alt)}

/* ===== A11y panel dark-mode buttons — unified state machine (2026-07-14) =====
   Covers BOTH panel markups: the template .dark-btn/.read-aloud-btn (moon = ::before) AND the
   newer .a11y-item / .a11y-item[data-a11y="read"] (a real <i class="svg-ico"> child).
   REST = white text+icon on transparent; HOVER / FOCUS / ACTIVE(pressed) = yellow pill + BLACK.
   Same treatment for the Dark-mode toggle AND Read-aloud, at rest, on hover, and when active. */
/* REST = white text + white icon */
html.dark-mode .a11y-panel :is(.dark-btn,.a11y-item):not([aria-pressed="true"]):not(:hover):not(:focus-visible),
html.dark-mode .a11y-panel :is(.dark-btn,.a11y-item):not([aria-pressed="true"]):not(:hover):not(:focus-visible) *{color:#fff!important}
/* Rest ICON is YELLOW (the LABEL stays white) — matching the S3WaaS panel exactly
   (.s3-dark .s3-a11y-item{color:#fff} + .s3-dark .s3-a11y-item i{color:#ffd23f}). This rule is the
   one that WINS for the ::before (it out-specifies a :is() version), so the colour is set HERE. */
html.dark-mode .a11y-panel .dark-btn:not(.read-aloud-btn):not([aria-pressed="true"]):not(:hover):not(:focus-visible)::before{color:#ffd23f!important}
/* HOVER / FOCUS / ACTIVE = yellow pill + black text + black icon */
html.dark-mode .a11y-panel :is(.dark-btn,.a11y-item):is(:hover,:focus-visible,[aria-pressed="true"]){background:#ffd23f!important;border-color:#ffd23f!important}
html.dark-mode .a11y-panel :is(.dark-btn,.a11y-item):is(:hover,:focus-visible,[aria-pressed="true"]),
html.dark-mode .a11y-panel :is(.dark-btn,.a11y-item):is(:hover,:focus-visible,[aria-pressed="true"]) *{color:#000!important}
html.dark-mode .a11y-panel .dark-btn:not(.read-aloud-btn):is(:hover,:focus-visible,[aria-pressed="true"])::before{color:#000!important}

/* HOME PAGE TITLE — the home's first section heading is the page <h1> (a VISIBLE title users can see),
   so the home no longer needs a screen-reader-only h1. Its size/weight are pinned to what it rendered
   as an <h2>: promoting the tag changes the SEMANTICS only, never the look. (Headings are styled by
   context/class, never by their level — see the decouple-size-from-level rule.) */
#main-content > .section > .container > h1{font-size:1.95rem;font-weight:800;line-height:1.18;margin:0 0 28px}

/* CONTROL ICON SIZES + ICON FONT — pinned in PX, consistent within each pill, FontAwesome only.
   (1) These pause buttons drew a RAW TEXT glyph via ::before (\23F8 / \25B6), which the icon rule bans
   (raw glyphs have asymmetric metrics and sit off-centre); they now use the FontAwesome icon FONT
   (\f04c pause / \f04b play), so the existing [aria-pressed] toggle keeps working with no JS change.
   (2) Sizes were in rem/em, so the A-/A/A+ text control RESCALED the chrome icons — the accessibility
   rule requires every icon container be pinned in px (s3waas.css already does: .s3-mq-arrow 11px /
   .s3-latest-pause 12px). Every icon in a control pill is now 12px; bigger slider buttons use 14px. */
.mq-arrow,
.v-marquee-pause,
.latest-pause,
.gov-portals-pause{font-size:12px}
.mq-arrow .svg-ico,
.v-marquee-pause .svg-ico,
.latest-pause .svg-ico,
.gov-portals-pause .svg-ico{font-size:12px}
.latest-pause::before{font-size:12px}
.slider-pause::before,
.donor-pause::before{font-size:14px}
.slider-arrow .svg-ico,
.ac-arrow .svg-ico{font-size:14px}

/* DROPDOWN THAT WOULD RUN OFF THE RIGHT EDGE — flip it to right-aligned.
   .submenu is `position:absolute; left:0`, so it always opens RIGHTWARD from its item. For an item near
   the right end of the bar that pushes it past the viewport and its labels get clipped (real bug on
   sotto: "More" clipped 198px at 1300px, from ~1685px down). main.js measures each dropdown on
   load/resize and adds .flip-right to any that would not fit, anchoring it to the item RIGHT edge. */
.nav-item.has-children>.submenu.flip-right{left:auto;right:0}

/* ---------------------------------------------------------------------------------------------
   THE A11Y DROPDOWN MUST NOT CHANGE SIZE WHEN THE THEME/ICON CHANGES.
   Toggling dark mode was growing the panel 153px -> 155px and the Dark-mode row 40px -> 42px, so the
   dropdown visibly jumped as you flipped it. It was NOT the moon->sun glyph (that box is pinned):
   the GLOBAL rule `html.dark-mode .dark-btn{border:1px solid #555 !important}` adds a 1px border
   top+bottom (= +2px) to a button whose light-mode rule is `border:0`. Because the panel button has
   height:auto, that border is added to the box.
   The S3WaaS panel has NO border on its items in either mode and is stable at 40px — so match it:
   kill the border on the panel button in BOTH modes. The dark pill stays a pill; it just gets its
   shape from background + border-radius, not from a border that only exists in one theme.
   RULE: any property that only exists in ONE theme must not affect LAYOUT. Verify by measuring the
   panel + row in both modes — they must be identical. */
.a11y-panel :is(.dark-btn,.a11y-item),
html.dark-mode .a11y-panel :is(.dark-btn,.a11y-item){border:0 !important}

/* REST state in dark mode is TRANSPARENT — matching the S3WaaS panel (and a11y rule 6, which says
   REST = white text+icon on transparent). `html.dark-mode .a11y-panel .dark-btn{background:#0e1622}`
   was painting a permanent grey pill behind the Dark-mode row at rest, so the GIGW dropdown looked
   different from the S3WaaS one and the row read as "always active". Only hover / focus / pressed
   may paint a pill (the yellow one, from the rule above). */
html.dark-mode .a11y-panel :is(.dark-btn,.a11y-item):not(:hover):not(:focus-visible):not([aria-pressed="true"]){
  background:none !important}

/* REST ICON IS YELLOW, LABEL STAYS WHITE — matching the S3WaaS panel exactly
   (.s3-dark .s3-a11y-item{color:#fff} + .s3-dark .s3-a11y-item i{color:#ffd23f}).
   The rest rule above deliberately paints the button AND all its children white, which is right for
   the LABEL but made the GIGW icon white while S3WaaS's is yellow — the two dropdowns looked
   different. Re-yellow just the icon, for BOTH markups: the template/sotto moon-sun is a CSS
   ::before on .dark-btn, the iphb/dsde panel uses a child <i>. Hover / focus / pressed still flip
   to the yellow pill with a BLACK icon (rule 6) — that rule sits later and out-specifies this. */
html.dark-mode .a11y-panel :is(.dark-btn,.a11y-item):not([aria-pressed="true"]):not(:hover):not(:focus-visible) i{
  color:#ffd23f !important}

/* SPACING — a group's TITLE needs air before its control, or the label sits on top of the button and
   the panel reads cramped. Applies to BOTH themes and both modes (it is layout, not colour, so it is
   theme-independent by design — and per the no-shift rule it must be identical in light and dark).
   Only the stacked groups get it: the "Text size" group puts its label INLINE beside the A-/A/A+
   buttons, so it keeps margin:0 (the :has(.font-controls) rules above). */
.a11y-panel .a11y-group:not(:has(.font-controls)) .a11y-group-label{margin:0 0 7px}
.a11y-panel .a11y-menu-head{margin-bottom:2px}
.a11y-panel .a11y-group{margin-top:16px}

/* Text-size buttons get the YELLOW border in dark mode, matching the S3WaaS panel
   (.s3-dark .s3-a11y-btns button{border-color:#ffd23f}). The panel rule already asked for yellow,
   but the blanket `html.dark-mode .a11y-panel button{border:1px solid #555 !important}` overrode it
   with grey — !important beats a plain declaration regardless of order, so this needs !important +
   more specificity to win back. */
html.dark-mode .a11y-panel .font-btn,
html.dark-mode .a11y-panel .font-btn[data-font="reset"]{border-color:#ffd23f !important}

/* -----------------------------------------------------------------------------------------------
   FORM VALIDATION STATES IN DARK MODE.
   These had NO dark twin, so on the black page the light-pink error banner kept its light fill while
   a broad `html.dark-mode …{color:#fff}` rule repainted its TEXT white — white on light pink, i.e.
   unreadable. Exactly the "same-colour-on-colour from an obsolete dark rule" trap: the background
   was themed, the text colour was won by a different, more general rule.
   Dark twins below use the standard dark-surface error/success pair (light glyph on a deep tinted
   fill), which keeps them legible AND keeps red/green meaning intact — a black+yellow theme still
   needs error to look like error. Contrast verified against the fill, not guessed.
   NOTE THE `!important`: the banner is a <p>, and the blanket dark rule
   `html.dark-mode body, html.dark-mode p, …{color:#fff !important}` beats ANY non-important rule no
   matter how specific or how late — so the fill went dark while the TEXT stayed white (1.14:1). The
   first version of this block without !important measured rgb(255,255,255) and looked fixed while
   being broken; only reading the computed colour caught it. */
html.dark-mode .form-status{border-width:1px}
html.dark-mode .form-status.err{background:#2b1416;border-color:#f2b8b5;color:#f2b8b5 !important}
html.dark-mode .form-status.ok{background:#10241a;border-color:#7ddba0;color:#7ddba0 !important}
html.dark-mode .form-error{color:#f2b8b5 !important}
html.dark-mode .page-body section.card .form-status:not(.ok):not(.err){background:#2a1f10;border-color:#f0c98c;color:#f0c98c !important}
/* the invalid field itself: a red ring that reads on black */
html.dark-mode .form-field input:invalid:not(:placeholder-shown),
html.dark-mode .form-field textarea:invalid:not(:placeholder-shown),
html.dark-mode .form-field input[aria-invalid="true"],
html.dark-mode .form-field textarea[aria-invalid="true"]{border-color:#f2b8b5}

/* SECURITY CHECK (captcha) — ported from the only build that had one. The template and this
   site had NO captcha at all, despite the house rule saying every POST form ships one; the
   feature existed solely in a sibling build and was never pushed back up. Styles live HERE
   because the form now lives on this page. */
.req-star{color: #b3261e; font-weight: 700}
.captcha-row{display: flex; align-items: center; gap: 12px; margin: 0 0 8px}
.captcha-q{font-size: 1.25rem; font-weight: 700; letter-spacing: .04em; color: var(--navy-deep); background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 8px 16px; font-variant-numeric: tabular-nums; -webkit-user-select: none; user-select: none}
.captcha-refresh{flex: 0 0 auto; width: 38px; height: 38px; border: 1px solid #9aa6b6; border-radius: var(--radius-sm); background: #fff; color: var(--navy); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; font-size: .95rem; transition: background .15s, border-color .15s, color .15s}
.captcha-refresh:hover{background: var(--navy); border-color: var(--navy); color: #fff}
.captcha-refresh:focus-visible{outline: none; border-color: var(--navy); box-shadow: 0 0 0 3px rgba(13, 71, 161, .18)}
.captcha-field input{max-width: 220px}
html.dark-mode .captcha-q{background: #1a2536; border-color: #34465c; color: #e4ebf5}
html.dark-mode .captcha-refresh{background: #1a2536; border-color: #34465c; color: #cdd9ec}
html.dark-mode .captcha-refresh:hover{background: var(--navy); border-color: var(--navy); color: #fff}

/* -----------------------------------------------------------------------------------------------
   SECURITY CHECK — one compact unit: [ 3 + 5 = ] [ answer ] [refresh], on a single line.
   Before: the question carried its OWN fill INSIDE the row's fill (a box in a box), and the answer
   input sat orphaned on the line below, so the question and the field you answer it with were not
   visually connected. Now the field sits beside the sum it answers, and only ONE surface is drawn.
   The markup is untouched — the input is a SIBLING of .captcha-row, so .captcha-field becomes the
   grid and places all three. Stacks on narrow screens.
   ----------------------------------------------------------------------------------------------- */
.captcha-field{display:grid;grid-template-columns:1fr;gap:6px 10px;align-items:start}
.captcha-field > label{grid-column:1 / -1;margin:0 0 2px}
.captcha-row{grid-column:1;grid-row:2;margin:0;background:none;border:0;padding:0;
  display:flex;align-items:center;gap:8px;width:auto}
/* the sum: a quiet chip, not a shouty block */
.captcha-q{font-size:1.02rem;font-weight:700;letter-spacing:.06em;font-variant-numeric:tabular-nums;
  background:var(--bg);border:1px solid var(--line);border-radius:9px;padding:0 12px;
  height:44px;display:inline-flex;align-items:center;color:var(--navy-deep)}
.captcha-refresh{width:34px;height:34px;border-radius:9px;border:1px solid var(--line);
  background:none;color:var(--muted);display:inline-flex;align-items:center;justify-content:center;
  cursor:pointer;transition:background .15s,color .15s,border-color .15s}
.captcha-refresh:hover{background:var(--saffron);border-color:var(--saffron);color:#fff}
.captcha-refresh .svg-ico,.captcha-refresh i{font-size:.82rem}
/* the answer sits BESIDE the sum */
.captcha-field > input,.contact-split-form .captcha-field input{grid-column:1;grid-row:3;
  max-width:none;margin:0;height:44px}
html.dark-mode .captcha-row{background:none;border:0}
html.dark-mode .captcha-q{background:#0b0b0b;border-color:#2a2a2a;color:#fff}
html.dark-mode .captcha-refresh{border-color:#2a2a2a;color:#9aa4b2;background:none}
html.dark-mode .captcha-refresh:hover{background:var(--dm-yellow);border-color:var(--dm-yellow);color:#000}
@media (max-width:600px){
  .captcha-field{grid-template-columns:1fr}
  .captcha-row{grid-row:2}
  
}

/* ================================================================================================
   CONTACT PAGE COMPONENT (shared) — details as ROWS + map on the left, message form on the right.
   Lives HERE, in the shared stylesheet, on purpose: every theme's contact page linked
   `/contact/contact.css`, a ROOT-ABSOLUTE path that 404s (the file exists nowhere) — so the
   themes' contact styling never loaded at all. A shared component needs no per-page file and
   cannot 404. All colour comes from var() tokens, so it follows whatever theme loads it.
   Rows, not cards: a card must either stretch (and look hollow under short content) or hug
   (and leave the row ragged). Rows have no box, so neither problem exists.
   ================================================================================================ */
.contact-hero{margin:6px 0 8px}
.contact-hero h1{margin:0 0 18px}
.contact-hero-sub{margin:0;color:var(--muted);font-size:1.12rem;line-height:1.5;max-width:60ch}
.contact-block{margin:44px 0 0}
.contact-h2{font-size:1.6rem;font-weight:800;color:var(--navy-deep);letter-spacing:-.015em;position:relative;display:inline-block;margin:0 0 26px;padding-bottom:12px;line-height:1.2}
.contact-h2::after{content:"";position:absolute;left:0;bottom:0;width:60px;height:4px;border-radius:4px;background:var(--saffron)}
.contact-info-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;align-items:start}
.contact-card{display:flex;flex-direction:column;align-items:flex-start;gap:14px; background:var(--card);border:1px solid var(--line);border-radius:16px;padding:26px 24px; box-shadow:0 1px 2px rgba(16,24,40,.04),0 4px 14px rgba(16,24,40,.05); transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease}
.contact-card:hover{transform:translateY(-3px);border-color:var(--saffron); box-shadow:0 2px 4px rgba(16,24,40,.05),0 12px 28px rgba(16,24,40,.10)}
.contact-ico{flex:0 0 auto;width:46px;height:46px;border-radius:12px;display:flex;align-items:center; justify-content:center;background:linear-gradient(135deg,var(--saffron) 0%,var(--saffron-darker) 100%); color:#fff;box-shadow:0 4px 12px rgba(13,71,161,.22)}
.contact-ico .svg-ico{font-size:1.2rem;color:#fff}
.contact-card-body{min-width:0;width:100%}
.contact-card-body h3{margin:0 0 6px;font-size:1.05rem;letter-spacing:-.01em;color:var(--navy-deep)}
.contact-card-body p{margin:0;color:var(--ink);line-height:1.6;overflow-wrap:break-word}
.contact-card-body a{font-weight:600}
.contact-link{display:inline-block;margin-top:8px;font-weight:600;font-size:.92rem;color:var(--saffron-dark);text-decoration:none}
.contact-link:hover,.contact-link:focus-visible{text-decoration:underline}
.map-actions{margin:16px 0 0;text-align:center}
.map-dir-btn{display:inline-flex;align-items:center;gap:9px;background:var(--saffron);color:#fff;text-decoration:none;font-weight:700;padding:12px 24px;border-radius:30px;font-size:.96rem;box-shadow:0 6px 16px rgba(13,71,161,.26);transition:background .15s,transform .12s,box-shadow .2s}
.map-dir-btn:hover,.map-dir-btn:focus-visible{background:var(--saffron-dark);color:#fff;transform:translateY(-2px);box-shadow:0 10px 24px rgba(13,71,161,.34)}
.map-dir-btn .svg-ico{font-size:1.05rem;color:#fff}
.contact-block{margin-top:36px}
.contact-h2{font-size:1.4rem;margin-bottom:22px}
.contact-hero-sub{font-size:1rem}
.contact-split{display:grid;grid-template-columns:1fr 1fr;gap:34px;align-items:start}
.contact-lines{display:flex;flex-direction:column;gap:2px;margin:0 0 22px}
.contact-line{display:grid;grid-template-columns:42px 1fr;gap:0 14px;align-items:start; padding:16px 0;border-bottom:1px solid var(--line)}
.contact-line:last-child{border-bottom:0}
.contact-line .contact-ico{grid-row:1 / span 2;width:42px;height:42px;border-radius:12px; display:flex;align-items:center;justify-content:center;background:var(--saffron);color:#fff}
.contact-line .contact-ico .svg-ico{font-size:1.05rem;color:#fff}
.contact-line h3{grid-column:2;margin:0 0 3px;font-size:.72rem;font-weight:800;letter-spacing:.1em; text-transform:uppercase;color:var(--muted)}
.contact-line p{grid-column:2;margin:0;font-size:.92rem;color:var(--ink);line-height:1.6;overflow-wrap:break-word}
.contact-line a{font-weight:600}
.contact-split-form{background:var(--card);border:1px solid var(--line);border-radius:16px; padding:26px 24px;box-shadow:0 1px 2px rgba(16,24,40,.04),0 6px 18px rgba(16,24,40,.06)}
.contact-split-form > h2{margin:0 0 4px;font-size:1.15rem;font-weight:800;letter-spacing:-.01em; color:var(--navy-deep);padding:0}
.contact-split-form > h2::after{display:none}
.contact-split-form .form-note{margin:0 0 18px;color:var(--muted);font-size:.94rem;line-height:1.5}
.contact-split .map-embed{border-radius:14px;overflow:hidden;border:1px solid var(--line)}
html.dark-mode .contact-line{border-bottom-color:#2a2a2a}
html.dark-mode .contact-line .contact-ico{background:var(--dm-yellow)}
html.dark-mode .contact-line .contact-ico .svg-ico{color:#000}
html.dark-mode .contact-line h3{color:#9aa4b2}
html.dark-mode .contact-line p{color:#cfcfcf}
html.dark-mode .contact-line a{color:var(--dm-yellow)}
html.dark-mode .contact-split-form{background:#111;border-color:#2a2a2a;box-shadow:none}
html.dark-mode .contact-split-form > h2{color:#fff}
html.dark-mode .contact-split-form .form-note{color:#cfcfcf}
html.dark-mode .contact-split .map-embed{border-color:#2a2a2a}
.contact-line > *:not(.contact-ico){grid-column:2}
.contact-line > .contact-link{margin-top:8px;justify-self:start;font-weight:600}
.contact-split-info{background:var(--card);border:1px solid var(--line);border-radius:16px; padding:8px 22px 22px;box-shadow:0 1px 2px rgba(16,24,40,.04),0 6px 18px rgba(16,24,40,.06)}
.contact-split-info .map-embed{margin:18px 0 0}
.contact-line{padding:18px 0}
.contact-line:first-child{padding-top:14px}
.contact-line h3{color:var(--saffron)}
.contact-split-form{padding:28px 26px}
.contact-split-form > h2{font-size:1.22rem}
.captcha-row{background:var(--bg);border:1px solid var(--line);border-radius:10px; padding:8px 12px;width:fit-content}
.contact-split-form .captcha-field input{max-width:100%}
html.dark-mode .contact-split-info{background:#111;border-color:#2a2a2a;box-shadow:none}
html.dark-mode .contact-line h3{color:var(--dm-yellow)}
html.dark-mode .captcha-row{background:#0b0b0b;border-color:#2a2a2a}
.req-star{color: #b3261e; font-weight: 700}
.captcha-row{display: flex; align-items: center; gap: 12px; margin: 0 0 8px}
.captcha-q{font-size: 1.25rem; font-weight: 700; letter-spacing: .04em; color: var(--navy-deep); background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 8px 16px; font-variant-numeric: tabular-nums; -webkit-user-select: none; user-select: none}
.captcha-refresh{flex: 0 0 auto; width: 38px; height: 38px; border: 1px solid #9aa6b6; border-radius: var(--radius-sm); background: #fff; color: var(--navy); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; font-size: .95rem; transition: background .15s, border-color .15s, color .15s}
.captcha-refresh:hover{background: var(--navy); border-color: var(--navy); color: #fff}
.captcha-refresh:focus-visible{outline: none; border-color: var(--navy); box-shadow: 0 0 0 3px rgba(13, 71, 161, .18)}
.captcha-field input{max-width: 220px}
html.dark-mode .captcha-q{background: #1a2536; border-color: #34465c; color: #e4ebf5}
html.dark-mode .captcha-refresh{background: #1a2536; border-color: #34465c; color: #cdd9ec}
html.dark-mode .captcha-refresh:hover{background: var(--navy); border-color: var(--navy); color: #fff}
html.dark-mode .captcha-row{background:#0b0b0b;border-color:#2a2a2a}
.captcha-field{display:grid;grid-template-columns:1fr;gap:6px 10px;align-items:start}
.captcha-field > label{grid-column:1 / -1;margin:0 0 2px}
.captcha-row{grid-column:1;grid-row:2;margin:0;background:none;border:0;padding:0; display:flex;align-items:center;gap:8px;width:auto}
.captcha-q{font-size:1.02rem;font-weight:700;letter-spacing:.06em;font-variant-numeric:tabular-nums; background:var(--bg);border:1px solid var(--line);border-radius:9px;padding:0 12px; height:44px;display:inline-flex;align-items:center;color:var(--navy-deep)}
.captcha-refresh{width:34px;height:34px;border-radius:9px;border:1px solid var(--line); background:none;color:var(--muted);display:inline-flex;align-items:center;justify-content:center; cursor:pointer;transition:background .15s,color .15s,border-color .15s}
.captcha-refresh:hover{background:var(--saffron);border-color:var(--saffron);color:#fff}
.captcha-refresh .svg-ico,.captcha-refresh i{font-size:.82rem}
.captcha-field > input,.contact-split-form .captcha-field input{grid-column:1;grid-row:3; max-width:none;margin:0;height:44px}
html.dark-mode .captcha-row{background:none;border:0}
html.dark-mode .captcha-q{background:#0b0b0b;border-color:#2a2a2a;color:#fff}
html.dark-mode .captcha-refresh{border-color:#2a2a2a;color:#9aa4b2;background:none}
html.dark-mode .captcha-refresh:hover{background:var(--dm-yellow);border-color:var(--dm-yellow);color:#000}
.captcha-row{grid-row:2}

/* RESPONSIVE for the contact component. These were LOST when the component was copied in:
   the copier walked rule-by-rule and skipped `@media` WRAPPERS while still matching the rules
   INSIDE them — so the mobile captcha placement leaked out and applied at every width (the
   answer field dropped to its own line on desktop), and the stacking break vanished entirely.
   Copy at BLOCK level, not rule level, when @media is involved. */
@media (max-width:900px){
  .contact-split{grid-template-columns:1fr;gap:26px}
}
@media (max-width:600px){
  .captcha-field{grid-template-columns:1fr}
  .captcha-row{grid-row:2}
}

/* The feedback form stands alone now. Its old layout was a 2-column grid (form + a blue "Other ways
   to reach us" aside), but those contact details live in the .contact-split component on the Contact
   page — the aside duplicated them, and one fact belongs on one surface. Form only. */
.feedback-layout--form-only{grid-template-columns:1fr;max-width:720px}

/* Entry 15's form gets the SAME surface as the contact component's form (entry 16), so the two
   demos do not show the same form two different ways. */
.feedback-layout--form-only .feedback-card{background:var(--card);border:1px solid var(--line);
  border-radius:16px;padding:28px 26px;box-shadow:0 1px 2px rgba(16,24,40,.04),0 6px 18px rgba(16,24,40,.06)}
html.dark-mode .feedback-layout--form-only .feedback-card{background:#111;border-color:#2a2a2a;box-shadow:none}

/* "(optional)" beside a field label — quieter than the label, never smaller than the body it
   sits in, and it must not read as a required marker. */
.opt-note{font-weight:400;font-size:.85em;color:var(--muted,#5b6570);margin-left:4px}
html.dark-mode .opt-note,.s3-dark .opt-note{color:#b9c0c8}

/* The status line is inserted empty and filled a moment later (and it is emptied again after a
   successful send), so without this it paints as a bare bordered box with no text in it. */
.form-status:empty{display:none !important;padding:0;border:0;margin:0}

/* ================================================================================================
   CONTACT — COMPACT INFO CARDS + MAP (`.contact-cards`)
   The OTHER contact layout: each detail is its own CARD in a column, with the map filling the
   matching column beside it. Preserved from the sec-goa build, which used this shape before
   `.contact-split` existed and whose bespoke `secgoa.css` was its only home — so it lived on
   exactly one site and no other could reach it. Generalised here onto the shared tokens.

   WHEN TO USE WHICH: `.contact-split` (entry 16) is the default — it carries the message form, so
   it is the whole contact page in one component. Use `.contact-cards` only when the page has NO
   form on it (the form lives elsewhere, or the page is details-only) and the details are few and
   short enough that a card does not look hollow. With more than ~4 details, or any detail longer
   than a line or two, prefer `.contact-split`'s rows: a card must either stretch (and go hollow)
   or hug (and leave the column ragged) — which is exactly why the rows exist.
   Stacks to one column below 760px.
   ================================================================================================ */
.contact-cards{display:grid;grid-template-columns:1fr 1fr;gap:18px;align-items:stretch}
.contact-cards-info{display:flex;flex-direction:column;gap:14px}
.contact-cards-info .card{background:var(--card);border:1px solid var(--line);border-radius:10px;
  box-shadow:0 3px 12px rgba(16,24,40,.06);overflow:hidden}
.contact-cards-info .card-body{padding:16px 18px}
.contact-cards-info .card-body h2,.contact-cards-info .card-body h3{margin:0 0 6px;font-size:1.05rem;
  letter-spacing:-.01em;color:var(--navy-deep)}
.contact-cards-info .card-body h2::after,.contact-cards-info .card-body h3::after{display:none}
.contact-cards-info .card-body p{margin:0;color:var(--ink);font-size:.94rem;line-height:1.6;
  overflow-wrap:break-word}
.contact-cards-info .card-body a{font-weight:600}
/* The map fills its whole column, so the two columns end level however many cards there are. */
.contact-cards .map-embed{border-radius:12px;overflow:hidden;border:1px solid var(--line);min-height:260px}
.contact-cards .map-embed iframe{display:block;width:100%;height:100%;min-height:260px;border:0}
html.dark-mode .contact-cards-info .card{background:#111;border-color:#2a2a2a;box-shadow:none}
html.dark-mode .contact-cards-info .card-body h2,html.dark-mode .contact-cards-info .card-body h3{color:#fff}
html.dark-mode .contact-cards-info .card-body p{color:#cfcfcf}
html.dark-mode .contact-cards-info .card-body a{color:var(--dm-yellow)}
html.dark-mode .contact-cards .map-embed{border-color:#2a2a2a}
@media (max-width:760px){.contact-cards{grid-template-columns:1fr}}

/* Submit consent line (contact form) — pairs with the existing .form-hint */
.form-consent{margin:14px 0 12px;font-size:.82rem;line-height:1.5;color:var(--muted)}
.form-consent a{color:inherit;text-decoration:underline}
.form-consent a:hover,.form-consent a:focus-visible{color:var(--saffron)}
html.dark-mode .form-consent{color:#b8c0cc}
html.dark-mode .form-consent a:hover,html.dark-mode .form-consent a:focus-visible{color:#ffd23f}

/* Captcha question box: FIXED width so it does NOT resize as the question text changes */
.captcha-q{min-width:8em;justify-content:center}
/* Contact-form status + field-error — compact, modern, neat (icons inherit colour, hidden when empty) */
.form-status{padding:9px 12px;border-radius:8px;margin:0 0 14px;font-weight:500;font-size:.875rem;line-height:1.45}
.form-status.ok,.form-status.err{display:flex;align-items:flex-start;gap:.5em}
.form-status.ok::before,.form-status.err::before{font-family:"Font Awesome 7 Pro";font-weight:400;font-style:normal;font-size:.9em;line-height:1.55;flex:0 0 auto;opacity:.85}
.form-status.ok::before{content:"\f058"}
.form-status.err::before{content:"\f057"}
.form-status:empty{display:none}
.form-error{display:flex;align-items:center;gap:.35em;font-size:.78rem;font-weight:500;margin:4px 0 0}
.form-error::before{content:"\f057";font-family:"Font Awesome 7 Pro";font-weight:400;font-style:normal;font-size:.88em;flex:0 0 auto;opacity:.8}
.form-error:empty{display:none}

/* Form feedback as a Nuxt-style TOAST — inline .form-status hidden; errors/success mirror into STACKED toasts with a timeout bar */
.form-status{display:none!important}
.sg-toasts{position:fixed;top:18px;right:18px;z-index:2147483000;display:flex;flex-direction:column;gap:12px;width:min(380px,calc(100vw - 32px));pointer-events:none}
.sg-toast{--sg-accent:#dc2626;--sg-tint:#fdecea;pointer-events:auto;position:relative;display:grid;grid-template-columns:auto 1fr auto;align-items:start;gap:11px;padding:13px 14px 15px;border-radius:14px;background:#fff;border:1px solid #eceff4;box-shadow:0 12px 34px rgba(16,24,40,.16);overflow:hidden;transform:translateX(120%);opacity:0;max-height:240px;transition:transform .32s cubic-bezier(.22,1,.36,1),opacity .3s,max-height .3s ease,margin .3s ease,padding .3s ease}
.sg-toast.show{transform:none;opacity:1}
.sg-toast.hide{transform:translateX(120%);opacity:0;max-height:0;margin-top:-12px;padding-top:0;padding-bottom:0}
.sg-toast.ok{--sg-accent:#12864a;--sg-tint:#e7f5ec}
.sg-toast-ico{width:30px;height:30px;border-radius:50%;display:flex;align-items:center;justify-content:center;flex:0 0 auto;background:var(--sg-tint)}
.sg-toast-ico::before{font-family:"Font Awesome 7 Pro";font-weight:400;font-style:normal;font-size:.98rem;color:var(--sg-accent)}
.sg-toast.ok .sg-toast-ico::before{content:"\f058"}
.sg-toast.err .sg-toast-ico::before{content:"\f057"}
.sg-toast-body{min-width:0}
.sg-toast-title{margin:0 0 2px;font-weight:700;font-size:.9rem;line-height:1.3;color:#101828}
.sg-toast-msg{margin:0;font-size:.82rem;line-height:1.45;color:#5b6470;overflow-wrap:break-word}
.sg-toast-close{flex:0 0 auto;background:none;border:0;color:#98a2b3;cursor:pointer;font-size:.82rem;line-height:1;padding:3px;border-radius:7px;margin:-2px -2px 0 0}
.sg-toast-close:hover{color:#374151;background:rgba(0,0,0,.06)}
.sg-toast-bar{position:absolute;left:0;bottom:0;height:3px;width:100%;transform-origin:left;background:var(--sg-accent);opacity:.9;animation:sg-bar var(--sg-dur,6s) linear forwards}
.sg-toast:hover .sg-toast-bar{animation-play-state:paused}
@keyframes sg-bar{from{transform:scaleX(1)}to{transform:scaleX(0)}}
@media (prefers-reduced-motion:reduce){.sg-toast{transition:opacity .2s}}
@media (max-width:820px){
  .sg-toasts{top:14px;right:14px;width:min(360px,calc(100vw - 28px))}
}
@media (max-width:560px){
  .sg-toasts{top:auto;bottom:12px;left:10px;right:10px;width:auto;gap:10px}
  .sg-toast{transform:translateY(140%);border-radius:12px;padding:12px 12px 14px;gap:10px}
  .sg-toast.show{transform:none}
  .sg-toast.hide{transform:translateY(140%);max-height:0;margin-top:-10px}
  .sg-toast-title{font-size:.92rem}
  .sg-toast-msg{font-size:.85rem}
  .sg-toast-close{padding:6px 7px;font-size:.95rem}
  .sg-toast-ico{width:28px;height:28px}
}
html.dark-mode .sg-toast,.s3-dark .sg-toast,.secgoa-dark .sg-toast{background:#17181c;border-color:#2c2f36;color:#e7e9ee;box-shadow:0 12px 34px rgba(0,0,0,.5)}
html.dark-mode .sg-toast-title,.s3-dark .sg-toast-title,.secgoa-dark .sg-toast-title{color:#f3f4f6}
html.dark-mode .sg-toast-msg,.s3-dark .sg-toast-msg,.secgoa-dark .sg-toast-msg{color:#aab2bd}
html.dark-mode .sg-toast.ok,.s3-dark .sg-toast.ok,.secgoa-dark .sg-toast.ok{--sg-accent:#4ade80;--sg-tint:#12271b}
html.dark-mode .sg-toast.err,.s3-dark .sg-toast.err,.secgoa-dark .sg-toast.err{--sg-accent:#f87171;--sg-tint:#2a1414}
html.dark-mode .sg-toast-close:hover,.s3-dark .sg-toast-close:hover,.secgoa-dark .sg-toast-close:hover{background:rgba(255,255,255,.08);color:#cbd5e1}

/* Field errors show as TOASTS (not inline) + highlight the invalid input; sending = spinner toast */
.form-error{display:none!important}
.feedback-form input[aria-invalid="true"],.feedback-form textarea[aria-invalid="true"],.feedback-form select[aria-invalid="true"]{border-color:#dc2626!important;box-shadow:0 0 0 3px rgba(220,38,38,.14)!important}
html.dark-mode .feedback-form input[aria-invalid="true"],html.dark-mode .feedback-form textarea[aria-invalid="true"],html.dark-mode .feedback-form select[aria-invalid="true"],.s3-dark .feedback-form input[aria-invalid="true"],.s3-dark .feedback-form textarea[aria-invalid="true"],.s3-dark .feedback-form select[aria-invalid="true"],.secgoa-dark .feedback-form input[aria-invalid="true"],.secgoa-dark .feedback-form textarea[aria-invalid="true"],.secgoa-dark .feedback-form select[aria-invalid="true"]{border-color:#f87171!important;box-shadow:0 0 0 3px rgba(248,113,113,.2)!important}
.sg-toast.info{--sg-accent:#2563eb;--sg-tint:#e8f0fe;align-items:center}
.sg-toast.info .sg-toast-ico::before{content:"";box-sizing:border-box;width:15px;height:15px;border:2px solid var(--sg-accent);border-top-color:transparent;border-radius:50%;animation:sg-spin .7s linear infinite}
.sg-toast.info .sg-toast-bar{display:none}
.sg-toast.info .sg-toast-msg{display:none}
@keyframes sg-spin{to{transform:rotate(360deg)}}
html.dark-mode .sg-toast.info,.s3-dark .sg-toast.info,.secgoa-dark .sg-toast.info{--sg-accent:#60a5fa;--sg-tint:#152238}

@media (max-width:640px){.policy-group > h2{font-size:1.3rem;margin-bottom:18px}}

/* mobile: h1 clearly outranks section h2 + body text 14px (h1>h2 mobile hierarchy) */
@media (max-width:640px){
  .page-body .container h1:not(.visually-hidden){font-size:1.6rem}
  .section .container>h2,.section h2,.policy-group>h2{font-size:1.2rem}
  #main-content p:not(.s3-lead),#main-content li,#main-content td,.page-body p,.page-body li,.page-body td{font-size:.875rem}
}

/* Bhashini v3 plugin dropdown — keep it ON-SCREEN (open inward/right-aligned, cap width). */
.bhashini-plugin-container [class*="dropdown-content"],
.bhashini-plugin-container [class*="dropdown-body"],
.bhashini-plugin-container [class*="content-list"]{right:0 !important;left:auto !important;max-width:calc(100vw - 20px) !important}

/* mobile: masthead brand-logo + emblems SAME height (brand-logo NOT square, width:auto) so neither
   the logo nor an emblem looks bigger than the other (logo-eq) */
@media (max-width:480px){
  .brand-logo,.masthead-logobar .brand-logo,.masthead-emblems .emblem,.masthead-logobar .emblem{height:48px !important;width:auto !important}
}
@media (max-width:360px){
  .brand-logo,.masthead-logobar .brand-logo,.masthead-emblems .emblem,.masthead-logobar .emblem{height:42px !important;width:auto !important}
}

/* Policies & Disclosures hub — clean MODERN list view (replaces the uneven card grid) [policy-list-ui] */
.policy-group{margin:0 0 30px}
.policy-group :is(.grid,.s3-grid,.secgoa-grid){display:block !important;grid-template-columns:none !important;gap:0 !important;background:transparent;border:0;border-radius:0;box-shadow:none;overflow:visible;border-top:1px solid var(--line,var(--s3-line,var(--secgoa-line,#e6ebf2)))}
.policy-card{background:transparent !important;border:0 !important;border-radius:0 !important;box-shadow:none !important;padding:0 !important;margin:0 !important;transform:none !important;border-bottom:1px solid var(--line,var(--s3-line,var(--secgoa-line,#eef1f6))) !important;position:relative}
.policy-card:last-child{border-bottom:1px solid var(--line,var(--s3-line,var(--secgoa-line,#e6ebf2))) !important}
.policy-card :is(.secgoa-card-body,.s3-card-body){padding:0 !important;background:transparent !important;border:0 !important;box-shadow:none !important;display:contents}
.policy-group :is(.grid,.s3-grid,.secgoa-grid),.policy-card{border-left:0 !important;border-right:0 !important}
.policy-card h3{margin:0;font-size:1.02rem;font-weight:600}
.policy-card h3 a{display:flex;align-items:center;justify-content:space-between;gap:18px;padding:20px 28px;text-decoration:none;position:relative;transition:background .16s ease,color .16s ease}
.policy-card h3 a::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--saffron-darker,var(--s3-accent,#e8650c));transform:scaleY(0);transform-origin:center;transition:transform .18s ease}
.policy-card h3 a::after{content:"\2192";color:var(--saffron-darker,var(--s3-accent,#e8650c));font-weight:700;flex:0 0 auto;transition:transform .18s ease}
.policy-card:hover h3 a{background:rgba(13,71,161,.05)}
.policy-card:hover h3 a::before{transform:scaleY(1)}
.policy-card:hover h3 a::after{transform:translateX(5px)}
:is(html.dark-mode,.s3-dark,.secgoa-dark) .policy-group :is(.grid,.s3-grid,.secgoa-grid){background:transparent;border-top-color:#2a3644}
:is(html.dark-mode,.s3-dark,.secgoa-dark) .policy-card{border-bottom-color:#2a3644 !important}
:is(html.dark-mode,.s3-dark,.secgoa-dark) .policy-card:hover h3 a{background:rgba(255,255,255,.06)}
:is(html.dark-mode,.s3-dark,.secgoa-dark) .policy-card h3 a::after{color:#ffd23f}
:is(html.dark-mode,.s3-dark,.secgoa-dark) .policy-card h3 a::before{background:#ffd23f}

/* Section titles get MORE responsive top spacing (breathing room above) [section-title-space] */
.policy-group,.content-section{margin-top:clamp(32px,5vw,52px)}
.policy-group:first-of-type{margin-top:clamp(16px,2.5vw,24px)}
.page-body .content-section:first-of-type,.prose>.content-section:first-child{margin-top:clamp(12px,2vw,18px)}

/* Policy list — FLAT + CONSISTENT borders in BOTH modes: no left/right/box, only a top edge + grey
   row dividers (incl. the last item), focus is an INSET outline (never a full yellow box) [policy-list-borders] */
.policy-group :is(.grid,.s3-grid,.secgoa-grid){border-left:0 !important;border-right:0 !important;border-bottom:0 !important;border-radius:0 !important;box-shadow:none !important}
.policy-card{border-top:0 !important;border-left:0 !important;border-right:0 !important}
.policy-card h3 a:focus,.policy-card h3 a:focus-visible{outline:2px solid var(--saffron-darker,var(--s3-accent,#0d47a1));outline-offset:-3px}
:is(html.dark-mode,.s3-dark,.secgoa-dark) .policy-group :is(.grid,.s3-grid,.secgoa-grid){border-top:1px solid #2a3644 !important}
:is(html.dark-mode,.s3-dark,.secgoa-dark) .policy-card,:is(html.dark-mode,.s3-dark,.secgoa-dark) .policy-card:last-child{border-bottom:1px solid #2a3644 !important}
:is(html.dark-mode,.s3-dark,.secgoa-dark) .policy-card h3 a:focus-visible{outline-color:#ffd23f}

/* Dark mode: policy list = FLAT with subtle LIGHT-tint top+bottom dividers (like light mode), no left/right [policy-list-dark-noborder] */
:is(html.dark-mode,.s3-dark,.secgoa-dark) .policy-group :is(.grid,.s3-grid,.secgoa-grid){border:0 !important;border-top:1px solid rgba(255,255,255,.16) !important}
:is(html.dark-mode,.s3-dark,.secgoa-dark) .card.policy-card,
:is(html.dark-mode,.s3-dark,.secgoa-dark) .secgoa-card.policy-card,
:is(html.dark-mode,.s3-dark,.secgoa-dark) .s3-card.policy-card,
:is(html.dark-mode,.s3-dark,.secgoa-dark) .policy-card{border:0 !important;border-bottom:1px solid rgba(255,255,255,.16) !important}

/* ===== Captioned gallery grid — rounded tiles + caption on a dark gradient, masonry-wide accents,
   hover-zoom. UNIVERSAL (ships in style.css + s3waas.css). Source: Dribbble "Conjecture 010 — The
   Library" gallery (adapted). Pairs with the lightbox. Component id: s3-gallery-captioned. ===== */
.s3-gallery-cap{display:grid;grid-template-columns:repeat(12,1fr);grid-auto-rows:clamp(168px,20vw,208px);gap:18px;grid-auto-flow:row dense}
.s3-gcap-tile{grid-column:span 4}
.s3-gcap-tile:nth-child(6n+1){grid-column:span 3}
.s3-gcap-tile:nth-child(6n+2){grid-column:span 5}
.s3-gcap-tile:nth-child(6n+3){grid-column:span 4}
.s3-gcap-tile:nth-child(6n+4){grid-column:span 5}
.s3-gcap-tile:nth-child(6n+5){grid-column:span 4}
.s3-gcap-tile:nth-child(6n+6){grid-column:span 3}
.s3-gcap-tile{position:relative;display:block;overflow:hidden;border-radius:8px;text-decoration:none;box-shadow:0 9px 20px rgba(20,20,40,.16);background:var(--s3-soft,var(--soft,#eef2f8))}
.s3-gcap-tile img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .55s ease}
.s3-gcap-tile:hover img,.s3-gcap-tile:focus-visible img{transform:scale(1.06)}
.s3-gcap-tile:focus-visible{outline:3px solid var(--s3-ring,var(--ring,#1a73c2));outline-offset:2px}
.s3-gcap-tile::after{content:"";position:absolute;inset:auto 0 0 0;height:52%;background:linear-gradient(to top,rgba(0,0,0,.78),rgba(0,0,0,.14) 55%,transparent);pointer-events:none}
.s3-gcap-label{position:absolute;left:0;right:0;bottom:0;z-index:1;padding:14px 16px;color:#fff;font-weight:600;font-size:1rem;line-height:1.3;text-shadow:0 1px 3px rgba(0,0,0,.5)}
@media(max-width:820px){.s3-gcap-tile,.s3-gcap-tile:nth-child(n){grid-column:span 6}}
@media(max-width:520px){.s3-gcap-tile,.s3-gcap-tile:nth-child(n){grid-column:span 12}.s3-gallery-cap{grid-auto-rows:clamp(190px,58vw,240px)}}
:is(.s3-dark,html.dark-mode) .s3-gcap-tile{box-shadow:0 9px 20px rgba(0,0,0,.5)}

/* ===== Caption-on-HOVER variant — add .s3-gcap-hover to the .s3-gallery-cap container: the caption
   + gradient are hidden for a clean mosaic and fade/slide in on hover or keyboard focus. Tiles with no
   caption (empty alt) just zoom — no empty gradient bar. Component id: s3-gallery-captioned-hover. ===== */
.s3-gcap-hover .s3-gcap-label{opacity:0;transform:translateY(10px);transition:opacity .3s ease,transform .3s ease}
.s3-gcap-hover .s3-gcap-tile:has(.s3-gcap-label)::after{opacity:0;transition:opacity .3s ease}
.s3-gcap-hover .s3-gcap-tile:hover .s3-gcap-label,.s3-gcap-hover .s3-gcap-tile:focus-within .s3-gcap-label{opacity:1;transform:translateY(0)}
.s3-gcap-hover .s3-gcap-tile:hover::after,.s3-gcap-hover .s3-gcap-tile:focus-within::after{opacity:1}
/* dark mode WITHOUT highlight: current dropdown item = subtle yellow-tint chip + yellow text */
html.dark-mode .submenu a[href]:is(.is-active,.is-current,[aria-current]){background:rgba(255,210,63,.16)!important;color:#ffd23f!important}
html.dark-mode .submenu a[href]:is(.is-active,.is-current,[aria-current]) :is(i,span){color:#ffd23f!important}
/* Readable / dyslexia-friendly font */
body.sg-readable-font,body.sg-readable-font :is(#main-content,#s3-main,.page-body,.s3-prose,.prose){
  font-family:"Atkinson Hyperlegible","Verdana","Tahoma","Segoe UI",Arial,sans-serif!important;letter-spacing:.02em}
body.sg-readable-font :is(#main-content,#s3-main,.page-body) :is(p,li){line-height:1.9!important}
/* Bigger text spacing (WCAG 1.4.12) */
body.sg-big-spacing :is(#main-content,#s3-main,.page-body) :is(p,li,td,h1,h2,h3,h4,h5,h6,.s3-h,.secgoa-h,.s3-lead,.s3-tl-h,dt,dd,blockquote,figcaption,label){line-height:2!important;letter-spacing:.12em!important;word-spacing:.16em!important}
body.sg-big-spacing :is(#main-content,#s3-main,.page-body) :is(p,h1,h2,h3,h4,h5,h6,.s3-h,.secgoa-h){margin-bottom:2em!important}
/* Bigger text spacing ALSO covers the util bar quick-links (Skip / Sitemap / Screen Reader)
   and the nav bars — TEXT SPACING ONLY (letter / word / line-height), never margins, so the bars
   keep their layout and do not reflow or grow tall. */
body.sg-big-spacing :is(.util-bar,.util-nav,.mainnav,.nav-list,.s3-topbar,.s3-top-left,.s3-top-right,.s3-nav,.s3-menu,.s3-drawer,.s3-drawer-list) :is(a,button,.util-item,.nav-link,.nav-sublink,.nav-subparent){line-height:1.5!important;letter-spacing:.12em!important;word-spacing:.16em!important;margin-top:0!important;margin-bottom:0!important}
/* Large cursor */
body.sg-big-cursor,body.sg-big-cursor *{cursor:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 24 24'%3E%3Cpath d='M4 2l7 18 2.5-7L21 10.5z' fill='%23fff' stroke='%23000' stroke-width='1.5' stroke-linejoin='round'/%3E%3C/svg%3E") 4 2,auto!important}
body.sg-big-cursor :is(a,button,[role=button],label){cursor:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 24 24'%3E%3Cpath d='M9 2v11l3-3 2 5 2-1-2-5h4z' fill='%23fff' stroke='%23000' stroke-width='1.5' stroke-linejoin='round'/%3E%3C/svg%3E") 9 2,pointer!important}
.sg-a11y-toggle{display:inline-flex;align-items:center;gap:7px;background:var(--s3-blue,var(--brand,var(--navy,#3b2a63)));color:#fff;border:0;border-radius:999px;padding:6px 14px;font:inherit;font-weight:600;font-size:.82rem;cursor:pointer}
.sg-a11y-toggle .fa-chevron-down{font-size:.72em}
.sg-a11y-panel{position:absolute;top:calc(100% + 8px);right:0;min-width:250px;background:#fff;color:var(--s3-ink,var(--ink,#241b2e));border:1px solid var(--s3-line,var(--line,#e2e0ee));border-radius:12px;box-shadow:0 16px 40px rgba(20,10,40,.22);padding:10px;display:none;z-index:400}
.sg-a11y-panel.open{display:block}
.sg-a11y-title{margin:2px 6px 8px;font-size:.8rem;font-weight:800;letter-spacing:.04em;text-transform:uppercase;color:var(--s3-blue-deep,var(--brand-deep,#2a2140))}
.sg-a11y-row{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:6px 8px;font-size:.86rem;font-weight:700}
.sg-a11y-btns{display:inline-flex;gap:4px}
.sg-a11y-btns button{min-width:30px;height:28px;border:1px solid var(--s3-line,var(--line,#e2e0ee));background:#fff;border-radius:6px;font-weight:800;font-family:inherit;cursor:pointer;color:var(--s3-blue-deep,var(--brand-deep,#2a2140))}
.sg-a11y-btns button:hover{background:var(--s3-soft,var(--soft,#f1eefb))}
.sg-a11y-grouph{margin:14px 6px 5px;padding-top:12px;border-top:1px solid var(--s3-line,var(--line,#e2e0ee));font-size:.67rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--s3-muted,var(--muted,#6b6480))}
.sg-a11y-item{display:flex;align-items:center;gap:10px;width:100%;padding:9px 10px;border:0;background:none;border-radius:6px;font:inherit;font-size:.86rem;text-align:left;cursor:pointer;color:var(--s3-ink,var(--ink,#241b2e))}
.sg-a11y-item + .sg-a11y-item{margin-top:3px}
.sg-a11y-item i{width:18px;text-align:center;color:var(--s3-blue,var(--brand,#6d28d9))}
.sg-a11y-item:hover{background:var(--s3-soft,var(--soft,#f1eefb))}
.sg-a11y-item[aria-pressed="true"]{background:var(--s3-soft,var(--soft,#f1eefb));color:var(--s3-blue,var(--brand,#6d28d9));font-weight:700}
/* High contrast (content-level, universal): strong black/white text + underlined links. Full chrome
   contrast is a per-site override (see depd-goa / BUILD-ERRORS §70). */
body.sg-contrast{background:#fff!important;color:#000!important}
body.sg-contrast :is(p,li,td,th,h1,h2,h3,h4,h5,h6,span,strong,em,dt,dd){color:#000!important}
body.sg-contrast a{color:#0000ee!important;text-decoration:underline!important}
/* DARK chrome (footer + policy/copyright bars) keeps a dark background, so black text would be
   invisible — force those to BLACK bg + WHITE text + bright-yellow underlined links. */
body.sg-contrast :is(.site-footer,.footer-bottom,.footer-policies-bar,.footer-policies,[class*="secgoa-footer"],[class*="s3-footer"],.footer-grid){background:#000!important}
body.sg-contrast :is(.site-footer,.footer-bottom,.footer-policies-bar,.footer-grid) :is(p,li,td,span,strong,em,dt,dd,h1,h2,h3,h4,address,time,label){color:#fff!important}
body.sg-contrast :is(.site-footer,.footer-bottom,.footer-policies-bar,.footer-grid) a{color:#ff0!important;text-decoration:underline!important}
body.sg-contrast :is(.site-footer,.footer-bottom,.footer-policies-bar,.footer-grid) :is(.footer-h,.footer-h::after){border-color:#ff0!important}
body.sg-contrast .footer-social a,body.sg-contrast .social-list a{background:#000!important;color:#ff0!important;outline:1px solid #ff0}
/* dark-mode panel */
:is(.dark-mode,.s3-dark,.secgoa-dark) .sg-a11y-panel{background:#111;border-color:#333;color:#fff}
:is(.dark-mode,.s3-dark,.secgoa-dark) .sg-a11y-title{color:#fff}
:is(.dark-mode,.s3-dark,.secgoa-dark) .sg-a11y-grouph{color:#cfcfcf;border-top-color:#333}
:is(.dark-mode,.s3-dark,.secgoa-dark) .sg-a11y-item{color:#fff}
:is(.dark-mode,.s3-dark,.secgoa-dark) .sg-a11y-item i{color:#ffd23f}
:is(.dark-mode,.s3-dark,.secgoa-dark) .sg-a11y-item[aria-pressed="true"]{background:#1a1a1a;color:#ffd23f}
:is(.dark-mode,.s3-dark,.secgoa-dark) .sg-a11y-item:hover{background:#1a1a1a;color:#ffd23f}
:is(.dark-mode,.s3-dark,.secgoa-dark) .sg-a11y-btns button{background:#111;color:#fff;border-color:#444}
/* ===== Pointer & motion reader aids (Universal — sg-*) ========================================== */
.sg-guideline{position:fixed;left:0;right:0;top:0;height:3px;background:#ff3b3b;box-shadow:0 0 0 1px rgba(0,0,0,.45);z-index:99998;pointer-events:none!important}
.sg-maskpane{position:fixed;left:0;right:0;background:rgba(0,0,0,.62);z-index:99997;pointer-events:none!important}
.sg-maskpane-top{top:0;height:0}
.sg-maskpane-bot{top:100%;bottom:0}
body.sg-hi-cursor,body.sg-hi-cursor *{cursor:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='44' height='44' viewBox='0 0 44 44'%3E%3Ccircle cx='16' cy='16' r='14' fill='none' stroke='%23ffd23f' stroke-width='3'/%3E%3Cpath d='M14 8 L14 26 L18.5 21.5 L21.5 28 L24 27 L21 20.5 L27 20.5 Z' fill='%23000' stroke='%23fff' stroke-width='1.5' stroke-linejoin='round'/%3E%3C/svg%3E") 14 8,auto!important}

/* Floating turn-off button for the reading aids (guide/mask) — always clickable above them. */
.sg-read-off{position:fixed;right:16px;bottom:16px;z-index:2147483647;pointer-events:auto;display:inline-flex;align-items:center;gap:8px;background:#111;color:#fff;border:2px solid #ffd23f;border-radius:999px;padding:10px 18px;font:inherit;font-weight:700;font-size:.9rem;cursor:pointer;box-shadow:0 6px 20px rgba(0,0,0,.4)}
.sg-read-off i{color:#ffd23f}
.sg-read-off:hover,.sg-read-off:focus-visible{background:#ffd23f;color:#000}
.sg-read-off:hover i,.sg-read-off:focus-visible i{color:#000}

/* Keep the header chrome (esp. the accessibility menu) ABOVE the reading mask/guide so the visitor
   can always see + use the top menu while a reading aid is on. z-index only (keeps sticky nav sticky). */
body.sg-read-mask :is(.util-bar,.s3-topbar,.secgoa-topbar,.mainnav,.s3-nav,.masthead,.s3-masthead,.secgoa-masthead),
body.sg-read-guide :is(.util-bar,.s3-topbar,.secgoa-topbar,.mainnav,.s3-nav,.masthead,.s3-masthead,.secgoa-masthead){z-index:100001}

/* GIGW a11y panel — reader-aid item buttons (mirror .dark-btn box, with an <i> icon instead of the moon ::before) */
.a11y-panel .a11y-item{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 .a11y-item + .a11y-item{margin-top:3px}
.a11y-panel .a11y-item i{width:18px;text-align:center;color:var(--navy)}
.a11y-panel .a11y-item:hover,.a11y-panel .a11y-item:focus-visible{background:var(--bg-alt);outline:none}
.a11y-panel .a11y-item[aria-pressed="true"]{background:var(--navy-deep);color:#fff}
.a11y-panel .a11y-item[aria-pressed="true"] i{color:#fff}
html.dark-mode .a11y-panel .a11y-item{background:#0e1622;color:#fff}
html.dark-mode .a11y-panel .a11y-item i{color:#ffd23f}
html.dark-mode .a11y-panel .a11y-item:hover,html.dark-mode .a11y-panel .a11y-item:focus-visible,html.dark-mode .a11y-panel .a11y-item[aria-pressed="true"]{background:#ffd23f;color:#000}
html.dark-mode .a11y-panel .a11y-item:hover i,html.dark-mode .a11y-panel .a11y-item[aria-pressed="true"] i{color:#000}
/* ============================================================================
   Scrollable tabs component (opt-in) — add `sg-scrolltabs-wrap` to a tab CONTAINER
   and `sg-scrolltabs` to its horizontal label strip. The strip then scrolls
   horizontally with NO scrollbar + a fade mask + an animated chevron hint; wheel
   scrolls it (assets/js/scrolltabs.js). Existing tabs are untouched unless opted in.
   The doubled `.sg-scrolltabs.sg-scrolltabs` bumps specificity so it beats a theme's
   own `.s3-tabs .s3-tablabels` grid rules when layered on an existing tab bar. ============ */
.sg-scrolltabs.sg-scrolltabs{--sgst-fade:44px;display:flex!important;flex-wrap:nowrap!important;overflow-x:auto!important;overflow-y:hidden;scrollbar-width:none;-ms-overflow-style:none;scroll-snap-type:x proximity;position:relative}
.sg-scrolltabs::-webkit-scrollbar{display:none}
.sg-scrolltabs.sg-scrolltabs>*{flex:1 0 auto!important;max-width:none!important;white-space:nowrap!important;scroll-snap-align:start}
.sg-scrolltabs.sg-can-scroll:not(.sg-at-start):not(.sg-at-end){-webkit-mask-image:linear-gradient(90deg,#0000,#000 var(--sgst-fade),#000 calc(100% - var(--sgst-fade)),#0000);mask-image:linear-gradient(90deg,#0000,#000 var(--sgst-fade),#000 calc(100% - var(--sgst-fade)),#0000)}
.sg-scrolltabs.sg-can-scroll.sg-at-start:not(.sg-at-end){-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - var(--sgst-fade)),#0000);mask-image:linear-gradient(90deg,#000 calc(100% - var(--sgst-fade)),#0000)}
.sg-scrolltabs.sg-can-scroll.sg-at-end:not(.sg-at-start){-webkit-mask-image:linear-gradient(90deg,#0000,#000 var(--sgst-fade));mask-image:linear-gradient(90deg,#0000,#000 var(--sgst-fade))}
.sg-scrolltabs-wrap{position:relative}
.sg-scrolltabs-wrap:has(.sg-scrolltabs.sg-can-scroll:not(.sg-at-end))::after,
.sg-scrolltabs-wrap:has(.sg-scrolltabs.sg-can-scroll:not(.sg-at-start))::before{position:absolute;top:0;height:3.3em;width:30px;display:flex;align-items:center;justify-content:center;font-family:"Font Awesome 7 Pro";font-weight:900;font-size:.9em;color:var(--s3-blue,var(--navy,#0d47a1));pointer-events:none;z-index:4}
.sg-scrolltabs-wrap:has(.sg-scrolltabs.sg-can-scroll:not(.sg-at-end))::after{content:"\f054";right:2px;animation:sg-tabhint-r 1.25s ease-in-out infinite}
.sg-scrolltabs-wrap:has(.sg-scrolltabs.sg-can-scroll:not(.sg-at-start))::before{content:"\f053";left:2px;animation:sg-tabhint-l 1.25s ease-in-out infinite}
.s3-dark .sg-scrolltabs-wrap::after,.s3-dark .sg-scrolltabs-wrap::before,html.dark-mode .sg-scrolltabs-wrap::after,html.dark-mode .sg-scrolltabs-wrap::before{color:#ffd23f!important}
@keyframes sg-tabhint-r{0%,100%{transform:translateX(0);opacity:.35}50%{transform:translateX(5px);opacity:1}}
@keyframes sg-tabhint-l{0%,100%{transform:translateX(0);opacity:.35}50%{transform:translateX(-5px);opacity:1}}
@media (prefers-reduced-motion:reduce){.sg-scrolltabs-wrap::after,.sg-scrolltabs-wrap::before{animation:none!important;opacity:.8}}

/* grab-to-scroll cursor (scrollable tabs component) */
.sg-scrolltabs.sg-can-scroll{cursor:grab}
.sg-scrolltabs.sg-grabbing{cursor:grabbing;scroll-snap-type:none;user-select:none}

/* Contact form/info title — breathing room below the heading (Send us a message / Contact Information) */
.contact-split-info > h2, .contact-split-form > h2{margin:0 0 15px}

/* per-tab-panel print title — hidden on screen, shown only in @media print */
.s3-tabpanel-ptitle{display:none}

/* ============================================================================
   PRINT (@media print) — shared by the GIGW + S3WaaS themes (both use .s3-* content classes).
   Mirror the on-screen design, drop the top bar/controls/embeds, un-clip tickers/marquees,
   overflow:visible on cards (else Chrome jumps the whole card + strands the H1), tabs -> titled
   stacked lists, footer on its own page, flush-vs-boxed padding. See CLAUDE.md 'PRINT'.
   ========================================================================== */
@media print {
  @page { size: A4; margin: 12mm; }

  /* keep the on-screen colours/backgrounds (browsers drop them by default) + freeze all motion */
  *, *::before, *::after {
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
    animation: none !important;
    transition: none !important;
  }
  html.sg-loading body, body { opacity: 1 !important; }

  /* NOT on paper: top utility bar, every interactive control/helper, action buttons + tab-label bar */
  .s3-topbar, .s3-nav-toggle, .s3-hero-ctrls, .s3-mq-group, .s3-latest-pause,
  .s3-vm-ctrls, .s3-vm-pause, .s3-logos-pause, .s3-totop, .s3-bhashini,
  .s3-a11y, .s3-search, .s3-scroll-hint, .sg-guideline, .sg-maskpane, .sg-read-off,
  .s3-drawer, .s3-drawer-overlay,
  .s3-btn, .s3-readmore, .s3-viewall, .s3-circ-cta, .s3-tablabels,
  .util-bar, .mainnav, .slider-controls, .back-to-top, .partner-band, .gigw-topbar, .gigw-nav,
  [data-s3-prev], [data-s3-next], [data-s3-pause], [data-secgoa-prev], [data-secgoa-next], [data-secgoa-pause] { display: none !important; }

  /* masthead: same look, slightly smaller emblems so they don't dominate the sheet */
  .s3-logo, .s3-mast-goa { width: 54px !important; height: 54px !important; }
  .s3-emblem, .s3-mast-india { height: 52px !important; width: auto !important; }

  /* Latest News: title ABOVE, items BELOW as a plain vertical list (un-clipped, no scroll) */
  .s3-latest .container { display: block !important; }
  .s3-latest-badge { display: block !important; width: max-content; margin: 0 0 6pt !important; }
  .s3-latest-viewport { overflow: visible !important; }
  .s3-latest-track { display: block !important; transform: none !important; white-space: normal !important; }
  .s3-latest-track li { display: list-item !important; list-style: disc; margin: 0 0 3pt 18pt !important; white-space: normal !important; }

  /* Tabs (Important Notices / Latest Updates): stack BOTH panels, each with its title above, as a
     CLEAN COMPACT list. The card keeps a light border but gets inner padding so nothing touches the
     edge; titles align with the items; rows are tight; the last row has no divider. */
  /* overflow:visible is CRITICAL — the on-screen card is overflow:hidden, which makes Chrome treat it
     as one UNBREAKABLE block, so a tall card jumps whole to the next page and strands the H1 with a big
     gap. Making it visible lets the content break/flow normally right under the title. */
  .s3-tabs, .s3-etabs { box-shadow: none !important; border: 0 !important; padding: 0 !important; height: auto !important; min-height: 0 !important; max-height: none !important; overflow: visible !important; }
  .s3-tabwrap, .s3-tabpanel, .s3-vmarquee, .s3-vm-viewport,
  .s3-tabwrap .s3-tabpanel:nth-of-type(n) { display: block !important; flex: none !important; min-height: 0 !important; height: auto !important; max-height: none !important; overflow: visible !important; padding-left: 0 !important; padding-right: 0 !important; }
  /* Align PLAIN list rows flush with the panel title + H1 (drop the on-screen inset). BUT a row that is
     its own BOX-WITH-BACKGROUND (a single boxed doc, an .s3-elist chip, a card) KEEPS its padding so
     the content isn't jammed against the box edge — only :has(li+li) plain lists and vm rows go flush. */
  .s3-tabpanel .s3-doclist { overflow: visible !important; padding: 0 !important; margin: 0 !important; }
  /* Only the FLUSH, transparent tab-panel doc-lists lose their inset (to align with the H1). A STANDALONE
     striped/boxed doc-list (backgrounded rows, e.g. compendium pages) KEEPS its left/right padding. */
  .s3-tabpanel .s3-doclist:has(li + li) li, .s3-vm-track li { padding-left: 0 !important; padding-right: 0 !important; margin-left: 0 !important; }
  .s3-tabpanel-ptitle { padding-left: 0 !important; margin-left: 0 !important; }
  .s3-tabpanel { margin: 0 !important; }
  .s3-tabpanel-ptitle { display: block !important; padding: 8pt 0 3pt !important; margin: 0 !important; font-size: 12pt; font-weight: 800; color: var(--s3-blue-deep); }
  .s3-vm-viewport { overflow: visible !important; height: auto !important; min-height: 0 !important; max-height: none !important; -webkit-mask-image: none !important; mask-image: none !important; }
  .s3-vm-track { transform: none !important; }
  .s3-vm-track li { padding: 3.5pt 0 !important; break-inside: avoid; }
  .s3-vm-track li:last-child { border-bottom: 0 !important; }

  /* Hero: active slide only, static; capped height */
  .s3-hero .s3-slide { position: static !important; display: none !important; }
  .s3-hero .s3-slide.is-active { display: block !important; opacity: 1 !important; visibility: visible !important; }
  .s3-slides { aspect-ratio: 3/1 !important; }
  .s3-hero img { max-height: 55mm !important; }

  /* Partner-logo strip: stop scroll, wrap, and DROP the duplicated (aria-hidden) scroll clones */
  .s3-logos-viewport { overflow: visible !important; }
  .s3-logos-track { transform: none !important; white-space: normal !important; flex-wrap: wrap !important; }
  .s3-logos-track [aria-hidden="true"], .s3-logos-track li[aria-hidden="true"] { display: none !important; }

  /* PAGE BREAKS — keep every heading WITH the content that follows it, and keep SMALL blocks
     (cards / rows / list items) intact. Do NOT put break-inside on whole sections/hero: that can't
     fit a tall block on the remaining space so it jumps to the next page and leaves a big white gap. */
  h1,h2,h3,h4,h5,h6,.s3-h,.footer-h,.s3-latest-badge {
    break-after: avoid !important; page-break-after: avoid !important;
  }
  .s3-card, .s3-tile, .s3-official, .s3-event, .s3-svc, .s3-feat-card,
  .s3-access-tile, .footer-col, figure, tr, .s3-latest-track li {
    break-inside: avoid !important; page-break-inside: avoid !important;
  }
  /* whole COMPACT sections stay together (title never stranded on its own page). Tall blocks
     (tabs / gallery) are left to FLOW — break-inside on those just makes big gaps / strands the H1. */
  .s3-logos, .s3-latest, .s3-help-band {
    break-inside: avoid !important; page-break-inside: avoid !important;
  }
  /* a heading pushed near the page bottom moves WITH its content instead of stranding */
  .s3-h-row, .s3-logos-title, .s3-latest-badge, .s3-tabpanel-ptitle {
    break-after: avoid !important; page-break-after: avoid !important;
  }
  /* never cut a single list row across pages */
  .s3-doclist li, .s3-vm-track li, .s3-elist li { break-inside: avoid !important; page-break-inside: avoid !important; }

  /* Embeds (Google Maps / YouTube / PDF viewers) print BLANK but still reserve their fixed height,
     which shoves content to the next page and leaves a big gap — drop them on paper. */
  iframe, .map-embed, .pdf-embed, .s3-map { display: none !important; }
  /* Contact page: stack the form/info split so it flows instead of jumping as one rigid grid row. */
  .contact-split { display: block !important; }
  .contact-split-form, .contact-split-info { width: 100% !important; max-width: 100% !important; }

  /* fit A4 width */
  .container { max-width: 100% !important; }
  img { max-width: 100% !important; height: auto !important; }

  /* footer ALWAYS starts on its own (last) page */
  .s3-footer { break-before: page !important; page-break-before: always !important; }
}

/* ===== Component-catalogue demo boxes (CATALOGUE PAGES ONLY) =====
   Give every demo the same white "card with title" look as the S3WaaS `.s3-demo`
   catalogue, so the GIGW page-components + other-components catalogues read as one
   boxed, titled system. Scoped to `.pc-demo` (only the catalogue <main>), so a real
   site page that uses `.content-section` is NEVER affected. Pure presentation — the
   components themselves are untouched; only their demo wrapper is boxed. */
.pc-demo > .container > .content-section{
  background:var(--card,#fff);
  border:1px solid var(--line,#dde4ee);
  border-radius:12px;
  padding:28px 30px;
  margin:0 0 26px;
}
/* the section's own title becomes the small uppercase demo label (like `.s3-demo-label`),
   set off from the demo below with a hairline divider so it reads as a card header */
.pc-demo > .container > .content-section > h2:first-child{
  font-size:.74rem;font-weight:800;letter-spacing:.05em;text-transform:uppercase;
  color:var(--saffron-dark,#0d47a1);margin:0 0 20px;padding:0 0 14px;line-height:1.4;
  border-bottom:1px solid var(--line,#dde4ee);
}
.pc-demo > .container > .content-section > h2:first-child code{text-transform:none;font-size:.86em}
/* each demo inside a category box is separated by a hairline + generous space, so
   successive demo titles never crowd each other */
.pc-demo > .container > .content-section > h3{
  margin:40px 0 18px;padding-top:26px;border-top:1px solid var(--line,#dde4ee);
}
/* the FIRST demo title sits directly under the label divider — no second rule/gap */
.pc-demo > .container > .content-section > h2:first-child + h3,
.pc-demo > .container > .content-section > h2:first-child + p + h3,
.pc-demo > .container > .content-section > h2:first-child + p + p + h3{
  margin-top:10px;padding-top:0;border-top:0;
}
/* comfortable rhythm for demo copy inside the card */
.pc-demo > .container > .content-section > p{margin:0 0 16px}
/* a nested demo sub-section must not draw a SECOND box inside the card; instead it
   gets the SAME hairline-divider separation as the demo titles, so every box reads
   consistently (Typography sub-sections match the Cards/Tables demos) */
.pc-demo > .container > .content-section .content-section{
  background:none;border:0;border-radius:0;box-shadow:none;
}
.pc-demo > .container > .content-section > .content-section{
  padding:40px 0 0;margin:0;border-top:1px solid var(--line,#dde4ee);
}
.pc-demo > .container > .content-section > .content-section:first-of-type{
  padding-top:14px;border-top:0;
}
html.dark-mode .pc-demo > .container > .content-section > .content-section{border-top-color:#333}
html.dark-mode .pc-demo > .container > .content-section{background:#111;border-color:#333}
html.dark-mode .pc-demo > .container > .content-section > h2:first-child{color:#ffd23f;border-bottom-color:#333}

/* ===== Dark mode — Bhashini translate dropdown stays READABLE (all themes) =====
   The official Bhashini plugin renders its OWN dropdown into .bhashini-plugin-container:
   <ul id="bhashiniLanguageDropdown" class="bhashini-dropdown-content"> of
   <li class="language-option"> items + a .bhashini-branding footer — NOT the custom
   .bhashini-menu. Dark mode must NOT wash out that language list, so keep the dropdown's
   LIGHT-mode colours (white panel, dark text). ONLY colours change. Covers both dark
   conventions: GIGW (html.dark-mode) and S3WaaS (.s3-dark). */
html.dark-mode #bhashiniLanguageDropdown,
html.dark-mode .bhashini-plugin-container .bhashini-dropdown-content,
.s3-dark #bhashiniLanguageDropdown,
.s3-dark .bhashini-plugin-container .bhashini-dropdown-content{background:#fff !important;color:#1a1a1a !important;border-color:#d5dbe4 !important}
html.dark-mode #bhashiniLanguageDropdown li.language-option,
html.dark-mode .bhashini-plugin-container li.language-option,
html.dark-mode .bhashini-plugin-container li.language-option span,
.s3-dark #bhashiniLanguageDropdown li.language-option,
.s3-dark .bhashini-plugin-container li.language-option,
.s3-dark .bhashini-plugin-container li.language-option span{color:#1a1a1a !important;background:transparent !important}
html.dark-mode #bhashiniLanguageDropdown li.language-option:hover,
html.dark-mode #bhashiniLanguageDropdown li.language-option:focus,
html.dark-mode #bhashiniLanguageDropdown li.language-option[aria-selected="true"],
.s3-dark #bhashiniLanguageDropdown li.language-option:hover,
.s3-dark #bhashiniLanguageDropdown li.language-option:focus,
.s3-dark #bhashiniLanguageDropdown li.language-option[aria-selected="true"]{background:#eef1f6 !important;color:#0b1f3b !important}
html.dark-mode .bhashini-plugin-container .bhashini-branding,
html.dark-mode .bhashini-plugin-container .bhashini-branding span,
html.dark-mode .bhashini-plugin-container .bhashini-branding a,
.s3-dark .bhashini-plugin-container .bhashini-branding,
.s3-dark .bhashini-plugin-container .bhashini-branding span,
.s3-dark .bhashini-plugin-container .bhashini-branding a{color:#4a5568 !important;background:transparent !important}

/* Bhashini plugin button is injected LATE by the third-party script; reserve its exact
   44x34 slot so it can't reflow the top bar on a cold/hard-refresh load (the "bhashini
   glitches on first load" bug = CLS from the late-injected button). Loaded size == 44x34,
   so this is invisible once loaded; it only removes the first-paint shift. All themes. */
.bhashini-plugin-container{min-width:44px;min-height:34px;justify-content:center}

/* Bhashini plugin dropdown: hide the CLOSED language list with OUR (already-loaded) CSS so it can't
   render in-flow and GROW the top bar in the window before the plugin's own CDN stylesheet arrives
   (the "dropdown flashes open, bar height jumps, then collapses" glitch on hard-refresh/first load).
   Closed = button aria-expanded="false"; on open it flips to "true" (+ inline display:block), so this
   never blocks opening. Kept absolute so the open menu overlays, never reflows. All themes. */
.bhashini-plugin-container .bhashini-dropdown-content{position:absolute !important}
.bhashini-plugin-container .bhashini-dropdown-btn[aria-expanded="false"] ~ .bhashini-dropdown-content{display:none !important}

/* Bhashini button: transparent in EVERY state (our own already-loaded CSS) so the native <button>
   grey never shows — it flashes on first load before the plugin's CDN CSS, and on hover/focus/active.
   Matches the other transparent top-bar icon controls. All themes. */
.bhashini-plugin-container .bhashini-dropdown-btn,
.bhashini-plugin-container .bhashini-dropdown-btn:hover,
.bhashini-plugin-container .bhashini-dropdown-btn:focus,
.bhashini-plugin-container .bhashini-dropdown-btn:focus-visible,
.bhashini-plugin-container .bhashini-dropdown-btn:active{background-color:transparent !important;border:0 !important;box-shadow:none !important}

/* Pin the Bhashini button to a FIXED 34px height (its settled size) so it can't inject at the taller
   native ~37px height first and GROW the top bar for a beat before the plugin's CDN CSS shrinks it.
   The container's min-height is only a floor — the button's OWN height is what grows the row. All themes. */
.bhashini-plugin-container .bhashini-dropdown-btn{height:34px !important;padding:0 !important;box-sizing:border-box !important}

/* Center the Bhashini icon the SAME way from first paint as the plugin eventually does (flex), so the
   SVG doesn't NUDGE ~1px vertically when the plugin's CDN CSS flips the icon box inline/block -> flex. */
.bhashini-plugin-container .bhashini-dropdown-btn{display:inline-flex !important;align-items:center !important;justify-content:center !important}
.bhashini-plugin-container .bhashini-dropdown-btn-icon{display:flex !important;align-items:center !important;justify-content:center !important;height:34px !important}
.bhashini-plugin-container .bhashini-dropdown-btn-icon svg{display:block !important}

/* Bhashini translate = just the ICON (no round bg) at a FIXED size, so it can
   never reflow the top bar as it loads (Sitemap / Screen Reader / Search / Accessibility stay put —
   a hard fixed width beats the min-width floor, which a transient can still exceed). The subtle
   translucent bg is OUR controlled colour from first paint — never the native grey. All themes. */
.bhashini-plugin-container{width:34px !important;min-width:34px !important;height:34px !important;flex:0 0 34px !important}
.bhashini-plugin-container .bhashini-dropdown{width:34px !important;height:34px !important}
.bhashini-plugin-container .bhashini-dropdown-btn{width:34px !important;height:34px !important;min-width:34px !important;background:transparent !important;border:0 !important;border-radius:0 !important;box-shadow:none !important}
.bhashini-plugin-container .bhashini-dropdown-btn-icon svg{width:24px !important;height:24px !important}

/* iOS: transform-animated marquee tracks ESCAPE overflow:hidden and extend the page below the
   footer (big white space). Force a real clip on every marquee container. Harmless elsewhere. §87 */
.v-marquee,.v-marquee-viewport,.logo-marquee,.latest-ticker,.latest-feed{overflow:hidden;overflow:clip;contain:paint}

/* Auto-scrollers pause while OFF-SCREEN (.sg-offscreen toggled by main.js). Because a marquee BEGINS
   paused, its movie-credits intro starts only when scrolled into the viewport. §89 */
.sg-offscreen .latest-track,
.sg-offscreen .lm-track,
.sg-offscreen .v-marquee-track{animation-play-state:paused!important}
/* A ticker only PARTLY in view is held still (§155) — but it must not be held on the
   credits entrance's EMPTY first frame, or the strip reads as broken (§147). Drop the
   entrance so the headlines show where they are; the loop still waits for full view. */
.sg-nointro .latest-track{animation:lt-scroll var(--lt-dur,60s) linear 0s infinite}

.bhashini-plugin-container .bhashini-dropdown-btn{background:transparent !important;border-radius:0 !important;box-shadow:none !important}
.bhashini-plugin-container .bhashini-dropdown-btn:hover,.bhashini-plugin-container .bhashini-dropdown-btn:focus-visible{background-color:transparent !important}
.bhashini-plugin-container .bhashini-dropdown-btn:hover,.bhashini-plugin-container .bhashini-dropdown-btn:focus-visible{background-color:transparent !important}

/* bhashini icon ALWAYS white (all states) — force the button + any injected glyph WHITE in every state so hover never tints the
   अ+A mark; the plugin's own icon uses currentColor, so pin color:#fff and fill:#fff always. */
.bhashini-plugin-container .bhashini-dropdown-btn,.bhashini-plugin-container .bhashini-dropdown-btn:hover,.bhashini-plugin-container .bhashini-dropdown-btn:focus,.bhashini-plugin-container .bhashini-dropdown-btn:focus-visible,.bhashini-plugin-container .bhashini-dropdown-btn:active{color:#fff !important}
.bhashini-plugin-container .bhashini-dropdown-btn svg,.bhashini-plugin-container .bhashini-dropdown-btn svg path,.bhashini-plugin-container .bhashini-dropdown-btn *{fill:#fff !important;color:#fff !important}

/* bhashini mobile/tablet: no persistent circle — icon only (no circle bg) up to tablet; the circle still appears ON HOVER (like the other top-bar icons). */
@media (max-width:1024px){.bhashini-plugin-container .bhashini-dropdown-btn{background-color:transparent !important}}

/* no square tap-highlight on buttons/links (mobile/tablet) — remove the browser square tap flash on every tappable element up to tablet. */
@media (max-width:1024px){a,button,[role="button"],input,select,textarea,label,summary,.secgoa-btn,.s3-btn,.gigw-btn{-webkit-tap-highlight-color:transparent !important}}

/* bhashini: pin exact 26px (match .ico-btn) regardless of plugin box */
.s3-bhashini,.s3-bhashini .bhashini-dropdown,.s3-bhashini .bhashini-dropdown-btn,.bhashini-plugin-container,.bhashini-plugin-container .bhashini-dropdown,.bhashini-plugin-container .bhashini-dropdown-btn{box-sizing:border-box !important;width:26px !important;height:26px !important;min-width:26px !important;max-width:26px !important;min-height:26px !important;max-height:26px !important;margin:0 !important}

/* search icon stays WHITE on hover/focus/open, like the other top-bar icons */
.s3-topbar .s3-search>button:hover,.s3-topbar .s3-search>button:focus-visible,.s3-topbar .s3-search.s3-search-open>button:first-of-type{color:#fff !important}

@media (min-width:1025px){
.bhashini-plugin-container .bhashini-dropdown-btn:hover,.bhashini-plugin-container .bhashini-dropdown-btn:focus-visible{background-color:rgba(255,255,255,.28) !important}
}

/* GIGW 'Translate' pill icon = the अ/A Bhashini logo (mask + currentColor), so it
   inherits the pill's saffron colour and turns white on hover/open. Matches the
   provided reference image (अ over A). */
.bhashini-toggle i.fa-language,.bhashini-toggle .svg-ico.fa-language{display:inline-block;width:1.15em;height:1.15em;background-color:currentColor !important;-webkit-mask:url("data:image/svg+xml,%3Csvg%20width=%2232%22%20height=%2232%22%20viewBox=%220%200%2024%2024%22%20xmlns=%22http://www.w3.org/2000/svg%22%20aria-hidden=%22true%22%20role=%22img%22%3E%3Cpath%20d=%22M14.125%203.735V12H12.91V3.735H11.815V2.67H15.685V3.735H14.125ZM8.47%202.52C9.25%202.52%209.845%202.715%2010.255%203.105C10.675%203.495%2010.885%203.985%2010.885%204.575C10.885%205.005%2010.77%205.395%2010.54%205.745C10.32%206.085%209.99%206.355%209.55%206.555C9.11%206.755%208.56%206.865%207.9%206.885L7.825%205.835C8.505%205.815%208.985%205.695%209.265%205.475C9.555%205.255%209.7%204.96%209.7%204.59C9.7%204.23%209.58%203.97%209.34%203.81C9.11%203.65%208.84%203.57%208.53%203.57C8.16%203.57%207.825%203.62%207.525%203.72C7.225%203.82%206.905%203.955%206.565%204.125L6.19%203.09C6.45%202.95%206.77%202.82%207.15%202.7C7.54%202.58%207.98%202.52%208.47%202.52ZM11.05%208.73C11.05%209.19%2010.945%209.575%2010.735%209.885C10.525%2010.195%2010.24%2010.425%209.88%2010.575C9.53%2010.725%209.13%2010.8%208.68%2010.8C8.11%2010.8%207.58%2010.66%207.09%2010.38C6.61%2010.1%206.15%209.655%205.71%209.045C5.28%208.435%204.855%207.64%204.435%206.66L5.5%206.27C5.79%206.98%206.09%207.595%206.4%208.115C6.72%208.625%207.06%209.02%207.42%209.3C7.78%209.57%208.165%209.705%208.575%209.705C8.955%209.705%209.265%209.62%209.505%209.45C9.745%209.27%209.865%208.985%209.865%208.595C9.865%208.115%209.7%207.7%209.37%207.35C9.04%207%208.64%206.68%208.17%206.39L9.055%206.345L9.7%206.21C9.84%206.33%209.995%206.475%2010.165%206.645C10.335%206.815%2010.47%206.985%2010.57%207.155L10.645%207.44C10.775%207.63%2010.875%207.83%2010.945%208.04C11.015%208.25%2011.05%208.48%2011.05%208.73ZM11.29%206.75C11.77%206.75%2012.185%206.715%2012.535%206.645C12.885%206.565%2013.295%206.44%2013.765%206.27V7.35C13.335%207.54%2012.945%207.665%2012.595%207.725C12.255%207.785%2011.88%207.815%2011.47%207.815C11.32%207.815%2011.145%207.805%2010.945%207.785C10.745%207.755%2010.555%207.725%2010.375%207.695C10.205%207.655%2010.08%207.62%2010%207.59L9.295%206.75L9.385%206.525C9.675%206.595%209.98%206.65%2010.3%206.69C10.62%206.73%2010.95%206.75%2011.29%206.75Z%22%20fill=%22%23fff%22%3E%3C/path%3E%3Cpath%20d=%22M19.63%2022L18.426%2018.906H14.464L13.274%2022H12L15.906%2011.962H17.04L20.932%2022H19.63ZM18.048%2017.786L16.928%2014.762C16.9%2014.6873%2016.8533%2014.552%2016.788%2014.356C16.7227%2014.16%2016.6573%2013.9593%2016.592%2013.754C16.536%2013.5393%2016.4893%2013.376%2016.452%2013.264C16.3773%2013.5533%2016.298%2013.838%2016.214%2014.118C16.1393%2014.3887%2016.074%2014.6033%2016.018%2014.762L14.884%2017.786H18.048Z%22%20fill=%22%23fff%22%3E%3C/path%3E%3C/svg%3E") no-repeat center / contain;mask:url("data:image/svg+xml,%3Csvg%20width=%2232%22%20height=%2232%22%20viewBox=%220%200%2024%2024%22%20xmlns=%22http://www.w3.org/2000/svg%22%20aria-hidden=%22true%22%20role=%22img%22%3E%3Cpath%20d=%22M14.125%203.735V12H12.91V3.735H11.815V2.67H15.685V3.735H14.125ZM8.47%202.52C9.25%202.52%209.845%202.715%2010.255%203.105C10.675%203.495%2010.885%203.985%2010.885%204.575C10.885%205.005%2010.77%205.395%2010.54%205.745C10.32%206.085%209.99%206.355%209.55%206.555C9.11%206.755%208.56%206.865%207.9%206.885L7.825%205.835C8.505%205.815%208.985%205.695%209.265%205.475C9.555%205.255%209.7%204.96%209.7%204.59C9.7%204.23%209.58%203.97%209.34%203.81C9.11%203.65%208.84%203.57%208.53%203.57C8.16%203.57%207.825%203.62%207.525%203.72C7.225%203.82%206.905%203.955%206.565%204.125L6.19%203.09C6.45%202.95%206.77%202.82%207.15%202.7C7.54%202.58%207.98%202.52%208.47%202.52ZM11.05%208.73C11.05%209.19%2010.945%209.575%2010.735%209.885C10.525%2010.195%2010.24%2010.425%209.88%2010.575C9.53%2010.725%209.13%2010.8%208.68%2010.8C8.11%2010.8%207.58%2010.66%207.09%2010.38C6.61%2010.1%206.15%209.655%205.71%209.045C5.28%208.435%204.855%207.64%204.435%206.66L5.5%206.27C5.79%206.98%206.09%207.595%206.4%208.115C6.72%208.625%207.06%209.02%207.42%209.3C7.78%209.57%208.165%209.705%208.575%209.705C8.955%209.705%209.265%209.62%209.505%209.45C9.745%209.27%209.865%208.985%209.865%208.595C9.865%208.115%209.7%207.7%209.37%207.35C9.04%207%208.64%206.68%208.17%206.39L9.055%206.345L9.7%206.21C9.84%206.33%209.995%206.475%2010.165%206.645C10.335%206.815%2010.47%206.985%2010.57%207.155L10.645%207.44C10.775%207.63%2010.875%207.83%2010.945%208.04C11.015%208.25%2011.05%208.48%2011.05%208.73ZM11.29%206.75C11.77%206.75%2012.185%206.715%2012.535%206.645C12.885%206.565%2013.295%206.44%2013.765%206.27V7.35C13.335%207.54%2012.945%207.665%2012.595%207.725C12.255%207.785%2011.88%207.815%2011.47%207.815C11.32%207.815%2011.145%207.805%2010.945%207.785C10.745%207.755%2010.555%207.725%2010.375%207.695C10.205%207.655%2010.08%207.62%2010%207.59L9.295%206.75L9.385%206.525C9.675%206.595%209.98%206.65%2010.3%206.69C10.62%206.73%2010.95%206.75%2011.29%206.75Z%22%20fill=%22%23fff%22%3E%3C/path%3E%3Cpath%20d=%22M19.63%2022L18.426%2018.906H14.464L13.274%2022H12L15.906%2011.962H17.04L20.932%2022H19.63ZM18.048%2017.786L16.928%2014.762C16.9%2014.6873%2016.8533%2014.552%2016.788%2014.356C16.7227%2014.16%2016.6573%2013.9593%2016.592%2013.754C16.536%2013.5393%2016.4893%2013.376%2016.452%2013.264C16.3773%2013.5533%2016.298%2013.838%2016.214%2014.118C16.1393%2014.3887%2016.074%2014.6033%2016.018%2014.762L14.884%2017.786H18.048Z%22%20fill=%22%23fff%22%3E%3C/path%3E%3C/svg%3E") no-repeat center / contain}
.bhashini-toggle i.fa-language::before,.bhashini-toggle .svg-ico.fa-language::before{content:"" !important}

/* Bhashini slot PLACEHOLDER = sec-goa अA — show the sec-goa अ+A logo in the RESERVED slot before/without the plugin (component showcase, cold load, slow/blocked CDN). :empty vanishes the instant the plugin injects its button, so real sites never double up. */
@media (max-width:1024px){.bhashini-plugin-container:empty{width:100% !important;height:auto !important;min-height:0 !important;align-self:stretch !important;border-radius:0 !important;background-color:transparent !important;background-size:20px}}

/* ===== Read aloud (browser TTS) — floating controls + current-block highlight ===== */
.sg-ra-current{background:#fff3a0!important;box-shadow:0 0 0 2px #e0a800!important;border-radius:3px;color:#111!important}
html.dark-mode .sg-ra-current,.s3-dark .sg-ra-current{background:#4a3d00!important;box-shadow:0 0 0 2px #ffd23f!important;color:#fff!important}
.sg-ra-bar{position:fixed;left:50%;bottom:22px;transform:translateX(-50%);z-index:100000;display:flex;align-items:center;gap:8px;
  background:linear-gradient(135deg,#0d47a1,#062c66);color:#fff;padding:8px 10px 8px 16px;border-radius:44px;box-shadow:0 8px 30px rgba(0,0,0,.4);font-family:inherit}
.sg-ra-bar .sg-ra-title{font-size:.82rem;font-weight:800;letter-spacing:.04em;text-transform:uppercase;margin-right:4px}
.sg-ra-bar button{width:40px;height:40px;min-width:40px;border:0;border-radius:50%;background:rgba(255,255,255,.16);color:#fff;cursor:pointer;
  display:inline-flex;align-items:center;justify-content:center;font-size:15px;transition:background .15s,transform .1s}
.sg-ra-bar button:hover,.sg-ra-bar button:focus-visible{background:rgba(255,255,255,.34);outline:none}
.sg-ra-bar button[data-ra="play"]{background:#ffd23f;color:#0d2a5a}
.sg-ra-bar button[data-ra="play"]:hover{background:#ffdf6b}
.sg-ra-bar button i{display:block;line-height:1}
@media (max-width:520px){.sg-ra-bar{gap:6px;padding:6px 8px}.sg-ra-bar .sg-ra-title{display:none}.sg-ra-bar button{width:44px;height:44px}}
@media print{.sg-ra-bar{display:none!important}.sg-ra-current{background:none!important;box-shadow:none!important}}

.sg-ra-bar .sg-ra-sep{width:1px;height:24px;background:rgba(255,255,255,.25);margin:0 2px}
.sg-ra-bar .sg-ra-rate{min-width:44px;text-align:center;font-size:.8rem;font-weight:700;font-variant-numeric:tabular-nums}
.sg-ra-bar button[data-ra="slower"],.sg-ra-bar button[data-ra="faster"]{width:32px;height:32px;min-width:32px;font-size:12px}
.sg-ra-bar button:disabled{opacity:.4;cursor:default}

.sg-ra-bar button.sg-ra-close{background:rgba(255,255,255,.12);font-size:14px}
.sg-ra-bar button.sg-ra-close:hover,.sg-ra-bar button.sg-ra-close:focus-visible{background:#c0392b;color:#fff}

/* ===== Extra reading aids — dyslexia / low-vision (body-class opts) ===== */
body.sg-align-left :is(#main-content,#s3-main,[id$="-main"],.page-body,.s3-prose,.prose) :is(p,li,td,dd,dt,blockquote,.s3-lead,.lead){text-align:left!important}
body.sg-tint::after{content:"";position:fixed;inset:0;background:#ffdf8a;opacity:.26;pointer-events:none;z-index:9997}
html.dark-mode body.sg-tint::after,.s3-dark body.sg-tint::after,.secgoa-dark body.sg-tint::after{background:#3a2e00;opacity:.44}
body.sg-hide-img :is(#main-content,#s3-main,[id$="-main"],.page-body) img:not([class*="logo"]):not([class*="emblem"]):not([class*="brand"]){visibility:hidden!important}

/* VIDEO FACADE — see includes.js. A local poster + play button that becomes the real player on
   click, so a page always shows what the video IS, works with no JS (the poster is a link), and
   makes no request to the third party until someone asks. */
.video-facade{position:relative;display:block;width:100%;aspect-ratio:16/9;background:#111;border-radius:10px;overflow:hidden}
.video-facade > a{display:block;width:100%;height:100%;position:relative}
.video-facade img{width:100%;height:100%;object-fit:cover;display:block}
.video-facade iframe{width:100%;height:100%;border:0;display:block}
.video-play{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:72px;height:72px;border-radius:50%;
  background:rgba(0,0,0,.62);border:2px solid #fff;transition:background .25s,transform .25s}
.video-play::after{content:"";position:absolute;left:50%;top:50%;transform:translate(-40%,-50%);
  border-style:solid;border-width:13px 0 13px 22px;border-color:transparent transparent transparent #fff}
.video-facade:hover .video-play,.video-facade > a:focus-visible .video-play{background:rgba(0,0,0,.82);transform:translate(-50%,-50%) scale(1.06)}
@media (prefers-reduced-motion:reduce){.video-play{transition:none}
  .video-facade:hover .video-play{transform:translate(-50%,-50%)}}

/* LIVE MAP — see assets/js/map.js. One height for whichever tier draws it (the baked still, the
   WebGL vector map, or the raster one), so the page never jumps as a better renderer takes over.
   A wide, shallow band: a contact map is for orientation, not exploration. */
/* ONE BAND, whichever tier fills it — the baked still, the WebGL map, or the raster one — so the
   page never jumps as a better renderer takes over. A wide, shallow band: a contact map is for
   orientation, not exploration.

   The still image is LAYERED OVER the live container, not replaced by it. A renderer that loads
   but never paints used to leave a blank 330px box below the picture; now the picture simply
   stays until a map has genuinely drawn underneath it, and only then steps aside. */
.map-embed{position:relative;height:330px}
.map-embed > a{position:absolute;inset:0;z-index:2;display:block}
.map-embed > a img{width:100%;height:100%;object-fit:cover}
.map-embed.is-live > a{display:none}
.map-live{position:absolute;inset:0;width:100%;height:100%;z-index:1}
.map-embed .map-credit{position:absolute;left:0;right:0;bottom:0;z-index:3}
.map-embed.is-live .map-credit{display:none}
@media (max-width:640px){.map-embed{height:260px}}
.map-live .leaflet-container,.map-live .maplibregl-map{font:inherit}
.map-embed.is-live{background:#e8e0f0}
/* the pin is DRAWN, not fetched: both libraries default to marker PNGs beside their CSS, and a
   vendored copy without them shows a broken-image icon on the map */
.map-pin{background:none;border:0;line-height:0;filter:drop-shadow(0 2px 3px rgba(0,0,0,.35))}
/* ---- DEV-ONLY: the scheduled Drive-check panel (assets/js/dev-cron.js) -------------------
   Drawn only when the page is served from localhost, and deleted from any deliverable by
   tools/clean-site.py. Styled to look like a tool, not like part of the site, so nobody can
   mistake it for something a citizen is meant to see.

   BOTTOM-LEFT AND COLLAPSED BY DEFAULT. The site is what you are here to look at; a panel that
   sits over it is a panel you end up working around. The right-hand side is where this site puts
   its own controls (go-to-top, the slider arrows), so the tool takes the quieter corner and
   resting state is a small handle — one click to open, and it remembers which you chose. */
.devcron{position:fixed;left:14px;bottom:14px;z-index:9999;width:auto;max-width:calc(100vw - 28px);
  background:#111;color:#eee;border:1px solid #333;border-radius:10px;overflow:hidden;
  font:500 12px/1.45 ui-monospace,SFMono-Regular,Menlo,monospace}
.devcron.is-open{width:300px}
.devcron-head{display:flex;align-items:center;gap:8px;width:100%;padding:8px 12px;
  background:none;border:0;color:inherit;font:inherit;text-align:left;cursor:pointer}
.devcron-head:hover{background:#1b1b1b}
.devcron-head strong{font-weight:600;font-size:12.5px}
.devcron-caret{margin-left:auto;color:#888;font-size:11px}
.devcron-dot{width:9px;height:9px;border-radius:50%;background:#666;flex:0 0 auto}
.devcron-dot.is-on{background:#3ddc84}.devcron-dot.is-off{background:#e0564a}
.devcron-body{display:none;padding:0 12px 12px}
.devcron.is-open .devcron-body{display:block}
.devcron-when{margin:0 0 9px;color:#aaa}
.devcron-btn{width:100%;padding:7px 10px;border-radius:6px;border:1px solid #444;background:#1d1d1d;
  color:#eee;font:inherit;cursor:pointer}
.devcron-btn:hover:not(:disabled){background:#282828}
.devcron-btn:disabled{opacity:.55;cursor:default}
.devcron-log{margin:9px 0 0;max-height:120px;overflow:auto;white-space:pre-wrap;color:#8f8;
  font-size:11px;background:#0b0b0b;border-radius:6px;padding:7px 8px}
.devcron-note{margin:8px 0 0;color:#777;font-size:10.5px}
@media print{.devcron{display:none}}

/* "Overview" link at the top of a desktop dropdown -> the parent's own page (About Us, Elections, ...) */
.s3-sub-overview{border-bottom:1px solid var(--s3-line,#e6ebf2);margin-bottom:4px;padding-bottom:4px}
.s3-sub-overview a{color:var(--s3-blue-deep,#0b2e6b) !important;font-weight:700}
.s3-sub-overview a i{margin-right:8px;color:var(--s3-accent,#e8730c)}

/* affidavit / document-list presentation fixes (ported from sec-goa) */
.s3-tabpanel>p{padding-left:16px;padding-right:16px}
.s3-tabpanel .s3-dl-name a{padding:0}
.s3 .s3-wardh{font-size:1.08rem;font-weight:800;color:var(--s3-blue-deep);margin:2.25rem 0 .6rem;padding:0;line-height:1.3}
.s3 .s3-wardh:first-child{margin-top:.5rem}
.s3-dark .s3-wardh,html.dark-mode .s3-wardh{color:#fff}
.s3-tabpanel .s3-wardh{padding-left:16px}
.s3-roster .s3-dl-name{color:var(--s3-ink);font-weight:400}
.s3-dark .s3-roster .s3-dl-name,html.dark-mode .s3-roster .s3-dl-name{color:#e8ecf1}
.s3-doclist.s3-flat:has(li + li) li{padding:13px 0}
.s3-doclist.s3-flat:has(li + li) li:nth-child(odd){background:transparent}
.s3-dl-btn.is-disabled{color:var(--s3-muted,#9aa0a6);opacity:.45;cursor:not-allowed;pointer-events:none;background:transparent}

/* LINK LIST — label + chevron to a page (councils in a Contesting tab). FULLY SEPARATE from .s3-doclist
   (own classes) so document-table CSS can never affect it; chevron ALWAYS right, NEVER wraps. */
.s3-linklist{list-style:none;margin:0;padding:0}
.s3-tabpanel .s3-linklist{padding:0 16px}
.s3-linklist>li{display:flex;align-items:center;gap:12px;flex-wrap:nowrap;padding:14px 0;border-bottom:1px solid var(--s3-line)}
.s3-linklist>li:last-child{border-bottom:0}
.s3-linklist .s3-ll-name{flex:1 1 auto;min-width:0}
.s3-linklist .s3-ll-name a{color:var(--s3-blue-deep);font-weight:400;text-decoration:none}
.s3-linklist .s3-ll-name a:hover{text-decoration:underline}
.s3-linklist .s3-ll-go{flex:0 0 auto;margin-left:auto;color:var(--s3-accent);font-size:1.1rem;line-height:1;text-decoration:none}
.s3-dark .s3-linklist .s3-ll-name a,html.dark-mode .s3-linklist .s3-ll-name a{color:#fff}

/* AFFIDAVIT LIST — candidate name + download icon (orange=available, gray disabled=file gone).
   Own classes, SEPARATE from .s3-doclist (doc tables) and .s3-linklist (page links) — the three never conflict. */
.s3-afflist{list-style:none;margin:0;padding:0}
.s3-tabpanel .s3-afflist{padding:0 16px}
.s3-afflist>li{display:flex;align-items:center;gap:12px;flex-wrap:nowrap;padding:13px 0;border-bottom:1px solid var(--s3-line)}
.s3-afflist>li:last-child{border-bottom:0}
.s3-afflist .s3-af-name{flex:1 1 auto;min-width:0;color:var(--s3-ink);font-weight:400}
.s3-afflist .s3-af-name a{color:var(--s3-blue-deep);font-weight:400;text-decoration:none}
.s3-afflist .s3-af-name a:hover{text-decoration:underline}
.s3-afflist .s3-af-dl{flex:0 0 auto;margin-left:auto;color:var(--s3-accent);font-size:1.1rem;line-height:1;text-decoration:none}
.s3-afflist .s3-af-dl.is-disabled{color:var(--s3-muted,#9aa0a6);opacity:.45;cursor:not-allowed;pointer-events:none}
.s3-dark .s3-afflist .s3-af-name,html.dark-mode .s3-afflist .s3-af-name{color:#e8ecf1}
.s3-dark .s3-afflist .s3-af-name a,html.dark-mode .s3-afflist .s3-af-name a{color:#fff}
/* ---- Footer developer-credit link (Appbuddy) — readability guard ----------
   The credit sits in the DARK footer bottom bar. Without this rule an inline
   <a> falls back to the body link colour (a dark blue/teal) and drops to ~1.8:1
   contrast — unreadable, and a WCAG failure. Give it the same light colour the
   other footer links use. Applies whatever the footer wrapper class is. */
.footer-bottom a,.footer-bottom a:visited,.footer-credit-text a,.footer-credit-text a:visited{color:#fff;text-decoration:underline;text-underline-offset:2px}
.footer-bottom a:hover,.footer-bottom a:focus-visible,.footer-credit-text a:hover,.footer-credit-text a:focus-visible{color:#fff}