/* ==========================================================================
   NAGAR PANCHAYAT SIRAULI — PUBLIC PORTAL DESIGN SYSTEM
   Theme: "Teal Forest #174E4F × Vanilla Latte #F3E5C3"  ·  Motif: Jharokha arch + Jaali lattice
   Loaded after Bootstrap 5.3. The admin panel keeps gov-portal.css; nothing
   here is shared with it.
   ========================================================================== */

/* --------------------------------------------------------------------------
   0. DESIGN TOKENS
   -------------------------------------------------------------------------- */
:root {
    /* Teal Forest (primary) — legacy token prefix kept */
    --bs-950: #081C1D;
    --bs-900: #0C2A2B;
    --bs-800: #113A3B;
    --bs-700: #174E4F;
    --bs-600: #1E6364;
    --bs-500: #28797A;
    --bs-400: #4F9A9A;
    --bs-100: #E4EFEE;

    /* Deep jade (supporting tone of the primary) */
    --sg-900: #0E2A26;
    --sg-800: #163C36;
    --sg-700: #1F5048;
    --sg-600: #2B665C;
    --sg-500: #4A8578;
    --sg-400: #7AAA9D;
    --sg-200: #C6DDD5;
    --sg-100: #E6F0EC;

    /* Vanilla Latte (accent) */
    --br-700: #7A5F31;
    --br-600: #9C7C45;
    --br-500: #C9AB76;
    --br-400: #E4CD9C;
    --br-200: #F3E5C3;
    --br-100: #FAF3E3;

    /* Ivory surfaces */
    --iv-50:  #FCF9F1;
    --iv-100: #F7F0E1;
    --iv-200: #EFE4CC;
    --line:   #E6DAC0;
    --line-2: #D8C9A8;

    /* Ink */
    --ink:   #0F2425;
    --ink-2: #2F4546;
    --ink-3: #5A6B6B;

    /* Type */
    --f-display: 'Noto Serif Devanagari', 'Tiro Devanagari Hindi', Georgia, serif;
    --f-body: 'Mukta', 'Hind', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --f-ui: 'Manrope', 'Mukta', system-ui, sans-serif;

    /* Radius */
    --r-xs: 8px;
    --r-sm: 12px;
    --r-md: 18px;
    --r-lg: 26px;
    --r-xl: 36px;

    /* Elevation — brand-tinted gradient shadows */
    --sh-xs: 0 1px 2px rgba(12, 42, 43, .06);
    --sh-sm: 0 2px 6px rgba(12, 42, 43, .05), 0 8px 24px -8px rgba(23, 78, 79, .12);
    --sh-md: 0 6px 16px -4px rgba(12, 42, 43, .08), 0 22px 48px -18px rgba(30, 99, 100, .28);
    --sh-lg: 0 10px 30px -8px rgba(12, 42, 43, .14), 0 40px 80px -30px rgba(30, 99, 100, .42);
    --sh-brand: 0 10px 28px -10px rgba(40, 121, 122, .65), 0 4px 10px -4px rgba(23, 78, 79, .35);
    --sh-sage: 0 10px 28px -10px rgba(43, 102, 92, .6);

    /* Motion */
    --ease-out: cubic-bezier(.16, 1, .3, 1);
    --ease-in-out: cubic-bezier(.65, 0, .35, 1);
    --ease-spring: cubic-bezier(.34, 1.56, .64, 1);
    --t-fast: .2s;
    --t-med: .45s;

    /* Layout */
    --nav-h: 80px;
    --gutter: clamp(16px, 4vw, 32px);

    /* Textures */
    --noise: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .6 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
    --jaali-light: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='56' viewBox='0 0 56 56'%3E%3Cg fill='none' stroke='%23FFFFFF' stroke-opacity='.09' stroke-width='1'%3E%3Ccircle cx='28' cy='28' r='28'/%3E%3Ccircle cx='0' cy='0' r='28'/%3E%3Ccircle cx='56' cy='0' r='28'/%3E%3Ccircle cx='0' cy='56' r='28'/%3E%3Ccircle cx='56' cy='56' r='28'/%3E%3C/g%3E%3C/svg%3E");
    --jaali-dark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='56' viewBox='0 0 56 56'%3E%3Cg fill='none' stroke='%23722332' stroke-opacity='.07' stroke-width='1'%3E%3Ccircle cx='28' cy='28' r='28'/%3E%3Ccircle cx='0' cy='0' r='28'/%3E%3Ccircle cx='56' cy='0' r='28'/%3E%3Ccircle cx='0' cy='56' r='28'/%3E%3Ccircle cx='56' cy='56' r='28'/%3E%3C/g%3E%3C/svg%3E");

    /* ---- Bootstrap bridge: re-skins every utility & component ---- */
    --bs-body-font-family: var(--f-body);
    --bs-body-font-size: 1.0625rem;
    --bs-body-line-height: 1.7;
    --bs-body-color: var(--ink-2);
    --bs-body-bg: var(--iv-50);
    --bs-emphasis-color: var(--ink);
    --bs-secondary-color: var(--ink-3);
    --bs-border-color: var(--line);
    --bs-border-radius: var(--r-sm);
    --bs-border-radius-lg: var(--r-md);
    --bs-border-radius-xl: var(--r-lg);
    --bs-primary: #174E4F;
    --bs-primary-rgb: 23, 78, 79;
    --bs-secondary: #2B665C;
    --bs-secondary-rgb: 43, 102, 92;
    --bs-success: #2F7A52;
    --bs-success-rgb: 47, 122, 82;
    --bs-warning: #E4CD9C;
    --bs-warning-rgb: 228, 205, 156;
    --bs-danger: #B3261E;
    --bs-danger-rgb: 179, 38, 30;
    --bs-info-rgb: 43, 102, 92;
    --bs-dark: #0C2A2B;
    --bs-dark-rgb: 12, 42, 43;
    --bs-light: #F7F0E1;
    --bs-light-rgb: 247, 240, 225;
    --bs-link-color: #174E4F;
    --bs-link-color-rgb: 23, 78, 79;
    --bs-link-hover-color: #28797A;
    --bs-link-hover-color-rgb: 40, 121, 122;
    --bs-heading-color: var(--ink);
    --bs-success-bg-subtle: #E3F0E7;
    --bs-success-border-subtle: #BCD9C5;
    --bs-success-text-emphasis: #235C3E;
    --bs-focus-ring-color: rgba(40, 121, 122, .25);
}

/* High-contrast mode (toggled from the utility bar) */
html[data-contrast="high"] {
    --ink: #000;
    --ink-2: #000;
    --ink-3: #1D1D1D;
    --line: #5A6B6B;
    --line-2: #2F4546;
    --iv-50: #FFFFFF;
    --iv-100: #FFFFFF;
    --bs-body-color: #000;
    --bs-secondary-color: #1D1D1D;
}
html[data-contrast="high"] .grain,
html[data-contrast="high"] .orbs,
html[data-contrast="high"] .beam,
html[data-contrast="high"] .jaali-layer { display: none !important; }
html[data-contrast="high"] .spotlight,
html[data-contrast="high"] .stats,
html[data-contrast="high"] .gov-breadcrumb-bar,
html[data-contrast="high"] .site-footer { background: #000 !important; }
html[data-contrast="high"] .stat-note,
html[data-contrast="high"] .footer-about,
html[data-contrast="high"] .footer-links a { color: #fff !important; }
html[data-contrast="high"] main a:not([class]) { text-decoration: underline; }
html[data-contrast="high"] .grad-text,
html[data-contrast="high"] .grad-text-light,
html[data-contrast="high"] .brand-title em { background: none !important; -webkit-text-fill-color: currentColor !important; }

/* --------------------------------------------------------------------------
   1. BASE
   -------------------------------------------------------------------------- */
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--nav-h) + 16px); -webkit-text-size-adjust: 100%; }
body.sr-body {
    font-family: var(--f-body);
    background: var(--iv-50);
    color: var(--ink-2);
    overflow-x: hidden;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
}
body.nav-open { overflow: hidden; }
/* Phones pan into anything wider than the screen even when body hides it; clip at the root.
   `clip` (unlike `hidden`) makes no scroll container, so the sticky nav keeps working. */
@supports (overflow: clip) {
    html, body.sr-body { overflow-x: clip; }
}

h1, h2, h3, h4, h5, h6 { color: var(--ink); font-family: var(--f-body); font-weight: 700; }
p { text-wrap: pretty; }
img { max-width: 100%; }
a { transition: color var(--t-fast) ease; }
::selection { background: var(--bs-600); color: #fff; }

:focus-visible { outline: 3px solid var(--br-500); outline-offset: 3px; }
.skip-link {
    position: absolute; left: 16px; top: -80px; z-index: 3000;
    background: var(--bs-700); color: #fff; padding: 10px 18px; border-radius: 0 0 12px 12px;
    font-weight: 700; text-decoration: none; transition: top .25s var(--ease-out);
}
.skip-link:focus { top: 0; color: #fff; }

.container { max-width: 1280px; --bs-gutter-x: 2.5rem; }
@media (max-width: 575.98px) { .container { --bs-gutter-x: 2rem; } }

/* --------------------------------------------------------------------------
   2. SHARED EFFECT PRIMITIVES
   -------------------------------------------------------------------------- */
.fx-layer { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }

/* Noise over gradient */
.grain {
    position: absolute; inset: 0; pointer-events: none;
    background-image: var(--noise); background-size: 180px;
    opacity: .09; mix-blend-mode: overlay;
}

/* Gradient text */
.grad-text, .grad-text-light { padding: .16em 0 .06em; }
.grad-text {
    background: linear-gradient(100deg, var(--bs-700) 0%, var(--bs-500) 35%, var(--br-600) 70%, var(--sg-600) 100%);
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent; color: transparent;
}
.grad-text-light {
    background: linear-gradient(100deg, #FFFFFF 0%, var(--br-200) 45%, var(--sg-200) 100%);
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent; color: transparent;
}

/* Glass surfaces */
.glass {
    background: linear-gradient(135deg, rgba(255,255,255,.16), rgba(255,255,255,.06));
    border: 1px solid rgba(255,255,255,.22);
    -webkit-backdrop-filter: blur(16px) saturate(1.4);
    backdrop-filter: blur(16px) saturate(1.4);
}
.glass-light {
    background: linear-gradient(135deg, rgba(255,255,255,.9), rgba(252, 249, 241,.72));
    border: 1px solid rgba(255,255,255,.9);
    -webkit-backdrop-filter: blur(18px) saturate(1.5);
    backdrop-filter: blur(18px) saturate(1.5);
}

/* Gradient border */
.g-border {
    border: 1.5px solid transparent !important;
    background:
        linear-gradient(var(--gb-surface, #fff), var(--gb-surface, #fff)) padding-box,
        linear-gradient(135deg, var(--br-400), var(--bs-500) 45%, var(--sg-500)) border-box !important;
}

/* Spotlight — pointer-tracked radial light (JS writes --mx / --my) */
.spot { position: relative; isolation: isolate; }
.spot::before {
    content: ""; position: absolute; inset: 0; border-radius: inherit; z-index: -1; pointer-events: none;
    background: radial-gradient(380px circle at var(--mx, 50%) var(--my, 50%), var(--spot-color, rgba(201, 171, 118,.2)), transparent 45%);
    opacity: 0; transition: opacity var(--t-med) ease;
}
.spot:hover::before { opacity: 1; }

/* Light beam */
.beam {
    position: absolute; top: -40%; left: -10%; width: 42%; height: 180%;
    background: linear-gradient(100deg, transparent 0%, rgba(255, 244, 214,0) 30%, rgba(255, 244, 214,.14) 50%, rgba(255, 244, 214,0) 70%, transparent 100%);
    transform: rotate(18deg); filter: blur(6px); pointer-events: none;
    animation: beamSweep 14s var(--ease-in-out) infinite;
}

/* Layered radial orbs */
.orbs { position: absolute; inset: 0; pointer-events: none; }
.orbs i {
    position: absolute; border-radius: 50%; display: block;
    background: radial-gradient(circle, var(--orb, rgba(201, 171, 118,.35)), transparent 70%);
    filter: blur(14px);
    animation: orbFloat 18s ease-in-out infinite;
}

.jaali-layer { position: absolute; inset: 0; pointer-events: none; background-image: var(--jaali-light); background-size: 60px; }

/* Eyebrow chip */
.eyebrow {
    display: inline-flex; align-items: center; gap: .55rem;
    font-family: var(--f-ui); font-size: .78rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
    color: var(--bs-600);
    padding: .4rem .9rem .4rem .65rem; border-radius: 999px;
    background: linear-gradient(135deg, rgba(40, 121, 122,.08), rgba(74, 133, 120,.1));
    border: 1px solid rgba(40, 121, 122,.14);
}
.eyebrow .hi { font-family: var(--f-body); letter-spacing: 0; text-transform: none; font-size: .95rem; font-weight: 700; }
.live-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--sg-500); position: relative; flex: none; }
.live-dot::after {
    content: ""; position: absolute; inset: -4px; border-radius: 50%; border: 2px solid var(--sg-400);
    animation: livePulse 2s ease-out infinite;
}
.eyebrow--light { color: var(--br-200); background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.18); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.eyebrow--light .live-dot { background: var(--sg-400); }

/* Section scaffold */
.section { position: relative; padding: clamp(44px, 5.2vw, 72px) 0; }
.section-foot { display: flex; justify-content: center; margin-top: clamp(24px, 3vw, 36px); }
.section--tint {
    background:
        radial-gradient(900px 420px at 0% 0%, rgba(198, 221, 213,.45), transparent 60%),
        radial-gradient(800px 380px at 100% 100%, rgba(243, 229, 195,.5), transparent 60%),
        var(--iv-100);
}
.section-head { max-width: 760px; margin: 0 auto clamp(28px, 3.4vw, 44px); text-align: center; }
.section-head--left { margin-left: 0; text-align: left; }
.section-title {
    font-family: var(--f-display); font-weight: 700;
    font-size: clamp(1.9rem, 1.2rem + 2.2vw, 3rem); line-height: 1.32;
    margin: 1rem 0 .8rem; color: var(--ink);
}
.section-lead { font-size: clamp(1.02rem, .95rem + .3vw, 1.18rem); color: var(--ink-3); margin: 0; }
.section-head-row { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; flex-wrap: wrap; margin-bottom: clamp(32px, 4vw, 52px); }
.section-head-row .section-head { margin-bottom: 0; }

/* --------------------------------------------------------------------------
   3. BUTTONS
   -------------------------------------------------------------------------- */
.btn-gov, .btn-sr {
    --btn-bg: linear-gradient(135deg, var(--bs-500) 0%, var(--bs-700) 100%);
    --btn-color: #fff;
    --btn-shadow: var(--sh-brand);
    position: relative; isolation: isolate; overflow: hidden;
    display: inline-flex; align-items: center; justify-content: center; gap: .6rem;
    padding: .82rem 1.5rem; min-height: 48px;
    font-family: var(--f-body); font-size: 1.02rem; font-weight: 700; line-height: 1.2;
    color: var(--btn-color) !important; text-decoration: none !important;
    background: var(--btn-bg); border: 0; border-radius: 999px;
    box-shadow: var(--btn-shadow);
    transition: transform var(--t-med) var(--ease-spring), box-shadow var(--t-med) var(--ease-out), background-color var(--t-fast);
    cursor: pointer; white-space: nowrap;
}
.btn-gov::after, .btn-sr::after {
    content: ""; position: absolute; inset: 0; z-index: -1;
    background: linear-gradient(110deg, transparent 20%, rgba(255,255,255,.32) 50%, transparent 80%);
    transform: translateX(-120%); transition: transform .8s var(--ease-out);
}
.btn-gov:hover, .btn-sr:hover { transform: translateY(-2px); box-shadow: 0 16px 36px -12px rgba(40, 121, 122,.75), 0 6px 14px -6px rgba(23, 78, 79,.4); }
.btn-gov:hover::after, .btn-sr:hover::after { transform: translateX(120%); }
.btn-gov:active, .btn-sr:active { transform: translateY(0) scale(.98); }
.btn-sr i { transition: transform var(--t-med) var(--ease-out); }
.btn-sr:hover .fa-arrow-right { transform: translateX(4px); }

.btn-gov-secondary, .btn-sr--sage { --btn-bg: linear-gradient(135deg, var(--sg-500), var(--sg-700)); --btn-shadow: var(--sh-sage); }
.btn-gov-rust, .btn-sr--brass { --btn-bg: linear-gradient(135deg, var(--br-200), var(--br-500)); --btn-color: var(--bs-950); --btn-shadow: 0 10px 28px -10px rgba(156, 124, 69,.8); }
.btn-sr--brass:hover { box-shadow: 0 16px 36px -12px rgba(156, 124, 69,.95); }
.btn-sr--light { --btn-bg: #fff; --btn-color: var(--bs-700); --btn-shadow: 0 10px 30px -10px rgba(0,0,0,.35); }
.btn-sr--ghost {
    --btn-bg: rgba(255,255,255,.08); --btn-color: #fff; --btn-shadow: none;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.35);
    -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
}
.btn-sr--ghost:hover { --btn-bg: rgba(255,255,255,.16); box-shadow: inset 0 0 0 1px rgba(255,255,255,.6); }
.btn-sr--outline { --btn-bg: transparent; --btn-color: var(--bs-700); --btn-shadow: inset 0 0 0 1.5px rgba(30, 99, 100,.35); }
.btn-sr--outline:hover { --btn-bg: var(--bs-100); box-shadow: inset 0 0 0 1.5px rgba(30, 99, 100,.55); }
.btn-sr--sm { padding: .55rem 1.1rem; min-height: 40px; font-size: .95rem; }
.btn-gov-view-all {
    display: inline-flex; align-items: center; gap: .4rem; border-radius: 999px !important;
    background: rgba(255,255,255,.14) !important; color: #fff !important; border: 1px solid rgba(255,255,255,.35) !important;
    font-weight: 700; padding: .4rem 1rem !important;
}
.btn-gov-view-all:hover { background: #fff !important; color: var(--bs-700) !important; }

/* Text link with animated arrow */
.link-arrow { display: inline-flex; align-items: center; gap: .55rem; font-weight: 700; color: var(--bs-600); text-decoration: none; }
.link-arrow .arr { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; border: 1px solid var(--line-2); background: #fff; transition: all var(--t-med) var(--ease-out); }
.link-arrow:hover { color: var(--bs-500); }
.link-arrow:hover .arr { background: var(--bs-600); border-color: var(--bs-600); color: #fff; transform: translateX(4px); }

/* Bootstrap buttons re-skinned */
.btn { --bs-btn-font-weight: 600; --bs-btn-border-radius: 999px; font-family: var(--f-body); }
.btn-sm { --bs-btn-border-radius: 999px; }
.btn-danger {
    --bs-btn-bg: var(--bs-600); --bs-btn-border-color: var(--bs-600);
    --bs-btn-hover-bg: var(--bs-500); --bs-btn-hover-border-color: var(--bs-500);
    --bs-btn-active-bg: var(--bs-700); --bs-btn-active-border-color: var(--bs-700);
    box-shadow: 0 6px 16px -8px rgba(30, 99, 100,.7);
}
.btn-success {
    --bs-btn-bg: var(--sg-600); --bs-btn-border-color: var(--sg-600);
    --bs-btn-hover-bg: var(--sg-700); --bs-btn-hover-border-color: var(--sg-700);
    --bs-btn-active-bg: var(--sg-800);
}
.btn-outline-dark {
    --bs-btn-color: var(--bs-700); --bs-btn-border-color: rgba(30, 99, 100,.35);
    --bs-btn-hover-bg: var(--bs-700); --bs-btn-hover-border-color: var(--bs-700); --bs-btn-hover-color: #fff;
    --bs-btn-active-bg: var(--bs-800);
}
.btn-outline-primary {
    --bs-btn-color: var(--bs-600); --bs-btn-border-color: rgba(30, 99, 100,.4);
    --bs-btn-hover-bg: var(--bs-600); --bs-btn-hover-border-color: var(--bs-600); --bs-btn-hover-color: #fff;
}
.btn-outline-secondary {
    --bs-btn-color: var(--sg-700); --bs-btn-border-color: rgba(43, 102, 92,.45);
    --bs-btn-hover-bg: var(--sg-600); --bs-btn-hover-border-color: var(--sg-600); --bs-btn-hover-color: #fff;
}
.btn-outline-danger {
    --bs-btn-color: var(--bs-500); --bs-btn-border-color: rgba(40, 121, 122,.45);
    --bs-btn-hover-bg: var(--bs-500); --bs-btn-hover-border-color: var(--bs-500); --bs-btn-hover-color: #fff;
}
.btn-pay-online { background: linear-gradient(135deg, var(--sg-500), var(--sg-700)) !important; color: #fff !important; border: 0 !important; box-shadow: var(--sh-sage) !important; }

/* --------------------------------------------------------------------------
   4. SCROLL PROGRESS
   -------------------------------------------------------------------------- */
.scroll-progress { position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 2000; pointer-events: none; }
.scroll-progress span {
    display: block; height: 100%; width: 100%; transform-origin: 0 50%; transform: scaleX(var(--progress, 0));
    background: linear-gradient(90deg, var(--sg-500), var(--br-500), var(--bs-500));
    box-shadow: 0 0 12px rgba(201, 171, 118,.6);
}

/* --------------------------------------------------------------------------
   5. UTILITY BAR
   -------------------------------------------------------------------------- */
.util-bar {
    position: relative; z-index: 20;
    background: linear-gradient(90deg, var(--bs-950), var(--bs-900) 55%, #0A2324);
    color: rgba(255,255,255,.88); font-size: .9rem;
}
.util-bar::after {
    content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px;
    background: linear-gradient(90deg, transparent, rgba(228, 205, 156,.55), transparent);
}
.util-inner { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 46px; }
.util-left { display: flex; align-items: center; gap: .6rem; font-weight: 500; min-width: 0; }
.util-sep { opacity: .35; }
.tricolor { display: inline-flex; flex-direction: column; width: 18px; height: 12px; border-radius: 2px; overflow: hidden; flex: none; box-shadow: 0 0 0 1px rgba(255,255,255,.2); }
.tricolor i { flex: 1; display: block; }
.tricolor i:nth-child(1) { background: #FF9933; }
.tricolor i:nth-child(2) { background: #FFFFFF; }
.tricolor i:nth-child(3) { background: #138808; }
.util-right { display: flex; align-items: center; gap: 10px; }
.util-date { opacity: .78; padding-right: 12px; border-right: 1px solid rgba(255,255,255,.14); white-space: nowrap; }
.a11y-group, .lang-toggle { display: inline-flex; padding: 3px; gap: 2px; border-radius: 999px; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.12); }
.a11y-btn, .lang-btn {
    appearance: none; border: 0; background: transparent; color: #fff;
    min-width: 32px; height: 28px; padding: 0 8px; border-radius: 999px;
    font-family: var(--f-ui); font-weight: 700; font-size: .82rem; line-height: 1; cursor: pointer;
    transition: background var(--t-fast), color var(--t-fast);
}
.lang-btn { padding: 0 12px; font-family: var(--f-body); font-size: .9rem; }
.lang-btn[lang="en"] { font-family: var(--f-ui); font-size: .82rem; }
.a11y-btn sup { font-size: .65em; top: -.45em; }
.a11y-btn:hover, .lang-btn:hover { background: rgba(255,255,255,.14); }
.a11y-btn.is-active, .a11y-btn[aria-pressed="true"], .lang-btn.is-active { background: var(--br-400); color: var(--bs-950); }
.a11y-contrast { box-shadow: inset 0 0 0 1px rgba(255,255,255,.16); background: rgba(255,255,255,.06); height: 34px; min-width: 34px; }
.util-skip, .util-login {
    display: inline-flex; align-items: center; gap: .45rem; text-decoration: none; font-weight: 700; white-space: nowrap;
    padding: 6px 14px; border-radius: 999px; transition: background var(--t-fast), box-shadow var(--t-med), transform var(--t-med) var(--ease-spring);
}
.util-skip { color: #fff; background: rgba(74, 133, 120,.22); border: 1px solid rgba(122, 170, 157,.35); }
.util-skip:hover { color: #fff; background: rgba(74, 133, 120,.4); }
.util-login {
    color: var(--bs-950); background: linear-gradient(135deg, var(--br-200), var(--br-400));
    box-shadow: 0 6px 16px -8px rgba(228, 205, 156,.9), inset 0 1px 0 rgba(255,255,255,.55);
}
.util-login:hover { color: var(--bs-950); transform: translateY(-1px); box-shadow: 0 10px 22px -10px rgba(228, 205, 156,1); }

/* Google Translate: keep the engine, hide its chrome */
#google_translate_element, .goog-te-banner-frame, iframe.skiptranslate, body > .skiptranslate,
.goog-te-balloon-frame, #goog-gt-tt, .goog-tooltip, .VIpgJd-ZVi9od-ORHb-OEVmcd, .VIpgJd-ZVi9od-aZ2wEe-wOHMyf { display: none !important; }
body.sr-body { top: 0 !important; position: static !important; }
.goog-text-highlight { background: none !important; box-shadow: none !important; }
font[style] { background: transparent !important; box-shadow: none !important; }

/* --------------------------------------------------------------------------
   6. MASTHEAD
   -------------------------------------------------------------------------- */
.masthead { position: relative; overflow: hidden; background: var(--iv-50); }
.masthead-bg { position: absolute; inset: 0; pointer-events: none; }
.masthead-bg .mesh { position: absolute; border-radius: 50%; filter: blur(50px); opacity: .75; }
.masthead-bg .m1 { width: 520px; height: 320px; left: -140px; top: -150px; background: radial-gradient(circle, rgba(198, 221, 213,.95), transparent 70%); }
.masthead-bg .m2 { width: 560px; height: 300px; left: 38%; top: -180px; background: radial-gradient(circle, rgba(243, 229, 195,.95), transparent 70%); }
.masthead-bg .m3 { width: 460px; height: 280px; right: -140px; bottom: -170px; background: radial-gradient(circle, rgba(228, 239, 238,.95), transparent 70%); }
.masthead-bg .jaali { position: absolute; inset: 0; background-image: var(--jaali-dark); background-size: 56px; -webkit-mask-image: linear-gradient(90deg, #000, transparent 28%, transparent 72%, #000); mask-image: linear-gradient(90deg, #000, transparent 28%, transparent 72%, #000); }
.masthead-bg .grain { opacity: .05; mix-blend-mode: multiply; }
.masthead-inner { position: relative; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 24px; padding-top: 18px; padding-bottom: 18px; }
.masthead-emblem { justify-self: start; display: inline-flex; }

.brand { display: flex; justify-content: center; text-align: center; text-decoration: none; color: inherit; min-width: 0; }
.emblem { position: relative; width: clamp(62px, 6.4vw, 88px); aspect-ratio: 1; flex: none; display: grid; place-items: center; }
.emblem img { width: 82%; height: 82%; object-fit: cover; border-radius: 50%; background: #fff; position: relative; z-index: 1; box-shadow: 0 6px 18px -6px rgba(12, 42, 43,.35); }
.emblem-ring, .cm-ring {
    position: absolute; inset: 0; border-radius: 50%;
    background: conic-gradient(var(--bs-500), var(--br-400), var(--sg-500), var(--br-400), var(--bs-500));
    -webkit-mask: radial-gradient(circle, transparent 62%, #000 63%);
    mask: radial-gradient(circle, transparent 62%, #000 63%);
    animation: ringSpin 16s linear infinite;
}
.emblem::after, .cm-frame::after { content: ""; position: absolute; inset: -6px; border-radius: 50%; border: 1px dashed rgba(40, 121, 122,.28); pointer-events: none; }
.brand-text { display: flex; flex-direction: column; align-items: center; min-width: 0; }
.brand-title {
    font-family: var(--f-display); font-weight: 800; font-size: clamp(1.5rem, 1rem + 2.2vw, 2.75rem);
    line-height: 1.45; color: var(--ink); margin: 0 0 2px; white-space: nowrap;
}
/* Vertical padding widens the painted area so matras above the line (ि ौ ं) are not clipped by background-clip: text */
.brand-title em { font-style: normal; padding: .18em .02em .06em; background: linear-gradient(100deg, var(--bs-600), var(--bs-500) 40%, var(--br-600)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.brand-sub { display: inline-flex; align-items: center; gap: .45rem; color: var(--ink-3); font-weight: 600; font-size: clamp(.92rem, .85rem + .3vw, 1.1rem); }
.brand-sub i { color: var(--br-600); }

.masthead-aside { display: flex; align-items: center; gap: 20px; justify-self: end; }
.cm-card { display: flex; align-items: center; gap: 16px; margin: 0; }
.cm-card figcaption { display: flex; flex-direction: column; align-items: flex-end; text-align: right; line-height: 1.35; }
.cm-card strong { font-family: var(--f-display); font-size: 1.12rem; color: var(--bs-700); }
.cm-card span { font-size: .88rem; color: var(--ink-3); font-weight: 600; }
.cm-frame { position: relative; width: clamp(66px, 6.4vw, 88px); aspect-ratio: 1; flex: none; display: grid; place-items: center; }
.cm-frame img {
    position: relative; z-index: 1; width: 82%; height: 82%; border-radius: 50%;
    object-fit: cover; object-position: 50% 18%; background: #fff; display: block;
    box-shadow: 0 6px 18px -6px rgba(12, 42, 43,.35);
}
.cm-ring { animation-direction: reverse; }

/* --------------------------------------------------------------------------
   7. PRIMARY NAVIGATION
   -------------------------------------------------------------------------- */
.primary-nav {
    position: sticky; top: 0; z-index: 1030;
    background: rgba(255,255,255,.86);
    -webkit-backdrop-filter: blur(18px) saturate(1.6);
    backdrop-filter: blur(18px) saturate(1.6);
    border-top: 1px solid rgba(230, 218, 192,.8);
    box-shadow: 0 1px 0 rgba(230, 218, 192,.8);
    transition: box-shadow var(--t-med) var(--ease-out), background var(--t-med);
}
.primary-nav::after {
    content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px;
    background: linear-gradient(90deg, transparent, var(--bs-500) 25%, var(--br-500) 50%, var(--bs-500) 75%, transparent);
    opacity: .55;
}
.primary-nav.is-stuck { background: rgba(255,255,255,.95); box-shadow: 0 14px 32px -20px rgba(12, 42, 43,.45); }
.nav-inner { display: flex; align-items: center; gap: 12px; min-height: var(--nav-h); }

.nav-mini-brand { display: none; align-items: center; gap: 10px; text-decoration: none; color: var(--ink); font-family: var(--f-display); font-weight: 800; font-size: 1.12rem; flex: none; line-height: 1.2; }
.nav-mini-brand img { width: 40px; height: 40px; border-radius: 50%; box-shadow: 0 0 0 2px var(--br-400); background: #fff; }
.nav-mini-brand small { display: block; font-family: var(--f-body); font-size: .74rem; font-weight: 600; color: var(--ink-3); }

.nav-menu { display: flex; align-items: center; justify-content: center; flex: 1; gap: 12px; min-width: 0; }
.drawer-head, .drawer-foot { display: none; }

/* The rail is a track; a teal pill (.nav-indicator) glides to whichever item is hovered or current */
.nav-rail {
    position: relative; list-style: none; display: flex; align-items: center; gap: 2px;
    margin: 0; padding: 7px; border-radius: 999px;
    background: linear-gradient(180deg, rgba(30, 99, 100,.045), rgba(30, 99, 100,.02));
    box-shadow: inset 0 0 0 1px rgba(30, 99, 100,.09), inset 0 2px 6px rgba(12, 42, 43,.04);
}
.nav-indicator {
    position: absolute; top: 7px; bottom: 7px; left: 0; width: 0; z-index: 0; pointer-events: none; list-style: none;
    border-radius: 999px; opacity: 0;
    background: linear-gradient(135deg, var(--bs-500), var(--bs-700));
    box-shadow: 0 10px 22px -10px rgba(30, 99, 100,.9), inset 0 1px 0 rgba(255,255,255,.18);
    transform: translateX(var(--x, 0)); width: var(--w, 0);
    transition: transform .5s var(--ease-out), width .5s var(--ease-out), opacity var(--t-med);
}
.nav-indicator::after {
    content: ""; position: absolute; left: 22%; right: 22%; bottom: -1px; height: 2px; border-radius: 2px;
    background: linear-gradient(90deg, transparent, var(--br-400), transparent);
}
.nav-rail.has-indicator .nav-indicator.is-on { opacity: 1; }
.nav-li { position: relative; z-index: 1; }
.nav-a {
    appearance: none; border: 0; background: transparent;
    display: inline-flex; align-items: center; gap: .55rem;
    padding: .82rem 1.35rem; border-radius: 999px;
    font-family: var(--f-body); font-size: 1.3rem; font-weight: 700; line-height: 1.25; color: var(--ink-2);
    text-decoration: none; cursor: pointer; white-space: nowrap; position: relative;
    transition: color .3s ease, background var(--t-med) var(--ease-out);
}
.nav-a > i:first-child { font-size: .8em; color: var(--bs-500); transition: transform var(--t-med) var(--ease-spring), color .3s ease; }
.nav-a .caret { font-size: .62rem; opacity: .6; transition: transform var(--t-med) var(--ease-out); }
.nav-a:hover > i:first-child { transform: translateY(-2px) scale(1.12); }
/* Without JS the current page gets its own pill; with JS the gliding indicator takes over */
.nav-a.is-active { color: #fff; background: linear-gradient(135deg, var(--bs-500), var(--bs-700)); box-shadow: var(--sh-brand); }
.nav-a.is-active > i:first-child { color: var(--br-200); }
.nav-a:not(.is-active):hover, .nav-li:focus-within > .nav-a:not(.is-active) { color: var(--bs-700); background: rgba(40, 121, 122,.07); }
.has-indicator .nav-a.is-active { background: transparent; box-shadow: none; color: var(--ink-2); }
.has-indicator .nav-a.is-active > i:first-child { color: var(--bs-500); }
.has-indicator .nav-a:not(.is-active):hover, .has-indicator .nav-li:focus-within > .nav-a:not(.is-active) { background: transparent; }
.has-indicator .nav-a.is-lit, .has-indicator .nav-a.is-lit:hover { color: #fff; }
.has-indicator .nav-a.is-lit > i:first-child { color: var(--br-200); }

/* Dropdown panel */
.nav-panel {
    position: absolute; top: calc(100% + 16px); left: 50%; min-width: 320px; z-index: 50;
    padding: 10px; border-radius: 22px;
    background: linear-gradient(180deg, #FFFFFF 0%, #FBFAF4 100%);
    border: 1px solid rgba(30, 99, 100,.12);
    box-shadow: 0 1px 0 rgba(255,255,255,.8) inset, var(--sh-lg);
    opacity: 0; visibility: hidden; transform: translate(-50%, 10px) scale(.98); transform-origin: top center;
    transition: opacity var(--t-med) var(--ease-out), transform var(--t-med) var(--ease-out), visibility 0s linear var(--t-med);
}
.nav-panel::before { content: ""; position: absolute; top: -18px; left: 0; right: 0; height: 18px; }
.nav-panel::after {
    content: ""; position: absolute; top: -7px; left: 50%; width: 14px; height: 14px; transform: translateX(-50%) rotate(45deg);
    background: #fff; border-left: 1px solid rgba(30, 99, 100,.12); border-top: 1px solid rgba(30, 99, 100,.12); border-radius: 3px 0 0 0;
}
.nav-panel--end { left: auto; right: 0; transform: translate(0, 10px) scale(.98); transform-origin: top right; }
.nav-panel--end::after { left: auto; right: 40px; transform: rotate(45deg); }
.nav-panel ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.nav-panel a {
    display: flex; align-items: center; gap: 14px; padding: 11px 12px; border-radius: 14px;
    text-decoration: none; color: var(--ink); position: relative;
    transition: background var(--t-fast), transform var(--t-med) var(--ease-out);
}
.nav-panel a:hover, .nav-panel a:focus-visible { background: linear-gradient(90deg, rgba(40, 121, 122,.08), rgba(228, 205, 156,.08)); transform: translateX(3px); color: var(--ink); }
.np-ic {
    width: 44px; height: 44px; border-radius: 14px; flex: none; display: grid; place-items: center; font-size: 1.05rem;
    color: var(--bs-600); background: linear-gradient(135deg, var(--bs-100), var(--br-100));
    border: 1px solid rgba(40, 121, 122,.1);
    transition: background var(--t-med), color var(--t-med), transform var(--t-med) var(--ease-spring);
}
.nav-panel a:hover .np-ic { background: linear-gradient(135deg, var(--bs-500), var(--bs-700)); color: #fff; transform: rotate(-6deg) scale(1.05); }
.np-tx { display: flex; flex-direction: column; line-height: 1.35; }
.np-tx strong { font-size: 1.12rem; font-weight: 700; }
.np-tx small { font-size: .86rem; color: var(--ink-3); }
.nav-panel a.is-active { background: rgba(40, 121, 122,.08); }
.nav-panel a.is-active strong { color: var(--bs-600); }

@media (min-width: 992px) {
    .nav-li.has-panel:hover > .nav-panel,
    .nav-li.has-panel:focus-within > .nav-panel,
    .nav-li.has-panel.is-open > .nav-panel {
        opacity: 1; visibility: visible; transform: translate(-50%, 0) scale(1);
        transition: opacity var(--t-med) var(--ease-out), transform var(--t-med) var(--ease-out), visibility 0s;
    }
    .nav-li.has-panel:hover > .nav-panel--end,
    .nav-li.has-panel:focus-within > .nav-panel--end,
    .nav-li.has-panel.is-open > .nav-panel--end { transform: translate(0, 0) scale(1); }
    .nav-li.has-panel:hover > .nav-a .caret,
    .nav-li.has-panel.is-open > .nav-a .caret { transform: rotate(180deg); }
}

.nav-toggle {
    display: none; margin-left: auto; align-items: center; gap: .6rem;
    appearance: none; border: 1px solid var(--line); background: #fff; color: var(--bs-700);
    padding: .55rem 1.1rem .55rem .85rem; border-radius: 999px; font-weight: 700; font-size: 1.05rem; cursor: pointer; box-shadow: var(--sh-xs);
}
.burger { display: inline-flex; flex-direction: column; gap: 4px; width: 20px; }
.burger i { display: block; height: 2px; border-radius: 2px; background: currentColor; }
.burger i:nth-child(2) { width: 70%; }
.nav-backdrop { position: fixed; inset: 0; z-index: 1040; background: rgba(8, 28, 29,.45); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); opacity: 0; transition: opacity var(--t-med); }
.nav-backdrop.is-visible { opacity: 1; }

@media (min-width: 1400px) {
    .primary-nav.is-stuck .nav-inner > .nav-mini-brand { display: inline-flex; animation: fadeSlideIn .5s var(--ease-out) both; }
    .primary-nav.is-stuck .nav-menu { justify-content: flex-end; }
}
@media (max-width: 1399.98px) {
    .nav-a { padding: .8rem 1.05rem; font-size: 1.22rem; }
}
@media (max-width: 1299.98px) {
    .nav-a { padding: .75rem .95rem; font-size: 1.16rem; }
    .nav-a > i:first-child { display: none; }
}
@media (max-width: 1099.98px) {
    .nav-a { padding: .7rem .75rem; font-size: 1.08rem; }
}
/* Tablet / mobile: off-canvas drawer */
@media (max-width: 991.98px) {
    :root { --nav-h: 64px; }
    /* backdrop-filter would make the nav the containing block of the fixed drawer */
    .primary-nav, .primary-nav.is-stuck { -webkit-backdrop-filter: none; backdrop-filter: none; background: rgba(255,255,255,.98); }
    .nav-inner > .nav-mini-brand { display: none; }
    .primary-nav.is-stuck .nav-inner > .nav-mini-brand { display: inline-flex; animation: fadeSlideIn .45s var(--ease-out) both; }
    .nav-toggle { display: inline-flex; }
    .nav-menu {
        position: fixed; top: 0; right: 0; bottom: 0; z-index: 1050;
        width: min(88vw, 380px); flex-direction: column; align-items: stretch; justify-content: flex-start; gap: 0;
        background:
            radial-gradient(420px 260px at 100% 0%, rgba(243, 229, 195,.55), transparent 70%),
            radial-gradient(380px 260px at 0% 100%, rgba(198, 221, 213,.55), transparent 70%),
            var(--iv-50);
        box-shadow: -30px 0 60px -20px rgba(8, 28, 29,.45);
        transform: translateX(105%); visibility: hidden;
        transition: transform .55s var(--ease-out), visibility 0s linear .55s;
        overflow-y: auto; overscroll-behavior: contain;
    }
    .nav-menu.is-open { transform: none; visibility: visible; transition: transform .55s var(--ease-out), visibility 0s; }
    .drawer-head {
        display: flex; align-items: center; justify-content: space-between; gap: 12px;
        padding: 16px 18px; border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 2;
        background: rgba(252, 249, 241,.92); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
    }
    .drawer-head .nav-mini-brand { display: inline-flex; }
    .drawer-close { width: 42px; height: 42px; border-radius: 50%; border: 1px solid var(--line); background: #fff; color: var(--bs-700); font-size: 1.1rem; display: grid; place-items: center; cursor: pointer; }
    .nav-rail { flex-direction: column; align-items: stretch; gap: 4px; padding: 14px; flex: none; background: none; box-shadow: none; border-radius: 0; }
    .nav-indicator { display: none; }
    .nav-a, .has-indicator .nav-a.is-active { width: 100%; justify-content: flex-start; padding: .85rem 1rem; font-size: 1.12rem; border-radius: 14px; }
    .nav-a > i:first-child { display: inline-block; width: 22px; text-align: center; }
    .nav-a.is-active, .has-indicator .nav-a.is-active { color: #fff; background: linear-gradient(135deg, var(--bs-500), var(--bs-700)); box-shadow: var(--sh-brand); }
    .nav-a.is-active > i:first-child, .has-indicator .nav-a.is-active > i:first-child { color: var(--br-200); }
    .nav-a .caret { margin-left: auto; }
    .nav-li.is-open > .nav-a .caret { transform: rotate(180deg); }
    .nav-panel {
        position: static; transform: none; opacity: 1; visibility: visible; min-width: 0;
        box-shadow: none; border: 0; background: transparent; padding: 0 0 0 12px; border-radius: 0;
        display: grid; grid-template-rows: 0fr; transition: grid-template-rows var(--t-med) var(--ease-out);
    }
    .nav-panel > ul { overflow: hidden; min-height: 0; }
    .nav-panel::after, .nav-panel::before { display: none; }
    .nav-li.is-open > .nav-panel { grid-template-rows: 1fr; }
    .nav-li.is-open > .nav-panel > ul { padding: 4px 0 8px; }
    .nav-panel--end { transform: none; }
    .drawer-foot { display: block; margin: 18px; padding: 16px; border-radius: 18px; background: #fff; border: 1px solid var(--line); font-size: .92rem; color: var(--ink-3); }
    .drawer-foot strong { display: block; color: var(--ink); }
}


/* --------------------------------------------------------------------------
   8. SPOTLIGHT CAROUSEL (home) — the active photo always sits in the centre and
   takes ~70% of the rail; neighbours shingle out on both sides. Frame geometry
   (--x, --w) is set by sirauli-motion.js. Images use object-fit: cover, so a
   frame that widens re-crops its photo instead of stretching it.
   -------------------------------------------------------------------------- */
.spotlight {
    position: relative; overflow: hidden; isolation: isolate; color: #fff;
    padding: clamp(18px, 2.2vw, 30px) 0 clamp(62px, 5.5vw, 80px);
    background:
        radial-gradient(900px 420px at 85% -10%, rgba(243, 229, 195, .20), transparent 60%),
        radial-gradient(700px 420px at 0% 110%, rgba(40, 121, 122, .55), transparent 60%),
        linear-gradient(160deg, var(--bs-700), var(--bs-900));
}
.spotlight > .fx-layer { z-index: -1; }
.spotlight .jaali-layer { background-size: 64px; -webkit-mask-image: linear-gradient(180deg, #000, transparent 85%); mask-image: linear-gradient(180deg, #000, transparent 85%); }
.spotlight .grain { opacity: .1; }
.spotlight .orbs i:nth-child(1) { width: 260px; height: 260px; top: -60px; right: 8%; --orb: rgba(243, 229, 195, .22); }
.spotlight .orbs i:nth-child(2) { width: 180px; height: 180px; bottom: 10%; left: -40px; --orb: rgba(79, 154, 154, .35); animation-delay: -6s; }
.spotlight .orbs i:nth-child(3) { width: 90px; height: 90px; top: 30%; left: 42%; --orb: rgba(243, 229, 195, .16); animation-delay: -10s; }


.spot-rail {
    --gap: 14px;
    position: relative; height: clamp(320px, min(44vw, calc(100vh - 290px)), 620px);
    outline: none;
}
.spot-frame {
    position: absolute; top: 0; bottom: 0; left: 0; margin: 0;
    width: var(--w, 70%); transform: translate3d(var(--x, 15%), 0, 0) scale(var(--s, .94));
    overflow: hidden; isolation: isolate; border-radius: 24px; background: var(--bs-800);
    box-shadow: 0 24px 50px -28px rgba(0, 0, 0, .7), inset 0 0 0 1px rgba(243, 229, 195, .14);
    transition: transform .95s var(--ease-out), width .95s var(--ease-out), opacity .6s ease, border-radius .95s var(--ease-out);
}
.spot-frame.is-active { --s: 1; border-radius: 32px; z-index: 2; box-shadow: 0 40px 80px -34px rgba(0, 0, 0, .8), 0 0 0 1px rgba(243, 229, 195, .3); }
.spot-frame.is-hidden { opacity: 0; pointer-events: none; }
.spot-frame.is-warp, .spot-rail.no-anim .spot-frame { transition: none; }
.spot-frame.is-warp { opacity: 0; }
.spot-frame img {
    position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center;
    transform: scale(1.12); filter: grayscale(.45) contrast(1.05) brightness(.85);
    transition: transform 1.2s var(--ease-out), filter .9s ease;
}
.spot-frame.is-active img { transform: scale(1.02); filter: none; }
/* Duotone veil on the side frames */
.spot-frame::before {
    content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
    background: linear-gradient(180deg, rgba(40, 121, 122, .75), rgba(12, 42, 43, .92)); mix-blend-mode: multiply;
    transition: opacity .9s ease;
}
.spot-frame.is-active::before { opacity: 0; }
/* Caption mask on the centre frame */
.spot-frame::after {
    content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
    background: linear-gradient(180deg, transparent 50%, rgba(8, 28, 29, .85));
    opacity: 0; transition: opacity .9s ease;
}
.spot-frame.is-active::after { opacity: 1; }
.spot-frame:not(.is-active):hover img { filter: saturate(.95) brightness(.95); }
.spot-frame:not(.is-active):hover::before { opacity: .55; }

.spot-cap {
    position: absolute; z-index: 2; left: 0; right: 0; bottom: 0; text-align: center;
    padding: clamp(18px, 2.4vw, 32px) clamp(18px, 3vw, 44px) clamp(24px, 2.8vw, 38px); pointer-events: none;
}
.spot-cap > * { display: block; opacity: 0; transform: translateY(14px); transition: opacity .4s ease, transform .4s ease; }
.spot-frame.is-active .spot-cap > * { opacity: 1; transform: none; transition: opacity .7s var(--ease-out) .35s, transform .7s var(--ease-out) .35s; }
.spot-frame.is-active .spot-cap strong { transition-delay: .45s; }
.spot-cap small { display: inline-flex; align-items: center; gap: .5rem; font-size: .92rem; font-weight: 700; color: var(--br-200); margin-bottom: 4px; }
.spot-cap small::before, .spot-cap small::after { content: ""; width: 22px; height: 2px; border-radius: 2px; background: var(--br-200); }
.spot-cap strong {
    font-family: var(--f-display); font-weight: 700; color: #fff; margin: 0 auto; max-width: 40ch;
    font-size: clamp(1.1rem, .9rem + .9vw, 1.7rem); line-height: 1.45;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.spot-progress { position: absolute; z-index: 3; left: 0; bottom: 0; height: 4px; width: 0; background: linear-gradient(90deg, var(--br-400), var(--br-200)); }
.spot-rail.is-playing .spot-frame.is-active .spot-progress { animation: spotFill var(--spot-ms, 2300ms) linear forwards; }
.spot-rail.is-paused .spot-frame.is-active .spot-progress { animation-play-state: paused; }
.spot-hit { position: absolute; inset: 0; z-index: 4; border: 0; padding: 0; background: transparent; cursor: pointer; border-radius: inherit; }
.spot-frame.is-active .spot-hit { cursor: default; }
.spot-hit:focus-visible { outline: 3px solid var(--br-200); outline-offset: -5px; }
/* Without JS (or a single photo) the first frame simply fills the rail */
.spot-rail.is-single .spot-frame, html:not(.js) .spot-frame.is-active { --w: 100%; --x: 0px; --s: 1; }
html:not(.js) .spot-frame:not(.is-active) { display: none; }

@keyframes spotFill { to { width: 100%; } }

@media (max-width: 767.98px) {
    .spot-rail { --gap: 8px; height: clamp(240px, 70vw, 380px); }
    .spot-frame { border-radius: 18px; }
    .spot-frame.is-active { border-radius: 22px; }
    .spot-cap small { font-size: .82rem; }
}

/* Word-by-word headline reveal (words only — keeps Devanagari conjuncts intact) */
.js .split .w { display: inline-block; overflow: hidden; vertical-align: top; padding: .12em .02em .14em; margin: -.12em -.02em -.14em; }
.js .split .wi { display: inline-block; transform: translateY(115%); transition: transform 1.05s var(--ease-out); transition-delay: calc(var(--wi, 0) * 75ms + 120ms); }
.js .split.is-in .wi { transform: none; }
/* Transformed word boxes can't show a parent's clipped background, so each word carries the gradient */
.split .grad-text-light .wi {
    background: linear-gradient(100deg, #FFFFFF 0%, var(--br-200) 45%, var(--br-400) 100%);
    -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.split .grad-text .wi {
    background: linear-gradient(100deg, var(--bs-700) 0%, var(--bs-500) 45%, var(--br-600) 100%);
    -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}


/* --------------------------------------------------------------------------
   9. NOTICE TICKER
   -------------------------------------------------------------------------- */
.notice-strip { position: relative; z-index: 5; margin-top: -34px; }
.notice-bar {
    display: flex; align-items: stretch; min-height: 66px; border-radius: 20px; overflow: hidden;
    background: #fff; border: 1px solid var(--line); box-shadow: var(--sh-md);
}
.notice-label {
    flex: none; display: flex; align-items: center; gap: 10px; padding: 0 22px 0 14px;
    color: #fff; font-weight: 800; font-size: 1.08rem; white-space: nowrap;
    background: linear-gradient(135deg, var(--bs-500), var(--bs-700));
    border-right: 3px solid var(--br-400);
}
.notice-label .nl-ic { width: 38px; height: 38px; border-radius: 12px; display: grid; place-items: center; color: var(--bs-800); background: linear-gradient(135deg, var(--br-200), var(--br-400)); flex: none; }
.notice-label .live-dot { background: var(--br-200); }
.notice-label .live-dot::after { border-color: var(--br-200); }
/* Soft fade on both edges so text never appears cut against the label or the buttons */
.notice-track-wrap {
    flex: 1; min-width: 0; overflow: hidden; display: flex; align-items: center;
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 48px, #000 calc(100% - 48px), transparent 100%);
    mask-image: linear-gradient(90deg, transparent 0, #000 48px, #000 calc(100% - 48px), transparent 100%);
}
.notice-track { display: flex; align-items: center; width: max-content; animation: marquee var(--marquee-dur, 45s) linear infinite; }
.notice-strip:hover .notice-track, .notice-strip.is-paused .notice-track, .notice-track:focus-within { animation-play-state: paused; }
.notice-item { display: inline-flex; align-items: center; gap: .7rem; padding: 0 40px 0 0; color: var(--ink); text-decoration: none; font-weight: 600; font-size: 1.04rem; line-height: 1.6; white-space: nowrap; }
.notice-item .tx { position: relative; }
.notice-item:hover .tx { color: var(--bs-600); text-decoration: underline; text-decoration-color: var(--br-400); text-underline-offset: 5px; }
.notice-item .tag { font-size: .8rem; font-weight: 800; padding: 3px 11px; border-radius: 999px; color: var(--bs-700); background: var(--br-100); border: 1px solid var(--br-400); }
.notice-all {
    flex: none; display: inline-flex; align-items: center; gap: .45rem; padding: 0 20px; white-space: nowrap;
    font-weight: 700; color: var(--bs-600); text-decoration: none; border-left: 1px solid var(--line); background: var(--iv-50);
}
.notice-all i { transition: transform var(--t-med) var(--ease-out); }
.notice-all:hover { color: var(--bs-800); background: var(--bs-100); }
.notice-all:hover i { transform: translateX(4px); }
.notice-toggle { flex: none; width: 56px; border: 0; border-left: 1px solid var(--line); background: var(--iv-100); color: var(--bs-600); cursor: pointer; }
.notice-toggle:hover { background: var(--bs-100); }

/* --------------------------------------------------------------------------
   10. SERVICES BENTO
   -------------------------------------------------------------------------- */
.bento { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: minmax(236px, auto); gap: 20px; }
.tile {
    --spot-color: rgba(201, 171, 118,.22);
    position: relative; display: flex; flex-direction: column; gap: 12px;
    padding: 26px; border-radius: var(--r-lg); text-decoration: none; color: var(--ink);
    background: linear-gradient(180deg, #fff, var(--iv-50));
    border: 1px solid var(--line); box-shadow: var(--sh-sm);
    transition: transform var(--t-med) var(--ease-out), box-shadow var(--t-med) var(--ease-out), border-color var(--t-med);
    overflow: hidden;
}
/* Gradient border that fades in on hover */
.tile::after {
    content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1.5px; pointer-events: none; z-index: 2;
    background: linear-gradient(135deg, var(--br-400), var(--bs-500) 50%, var(--sg-500));
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
    mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
    opacity: 0; transition: opacity var(--t-med);
}
.tile:hover { transform: translateY(-6px); box-shadow: var(--sh-md); color: var(--ink); border-color: transparent; }
.tile:hover::after { opacity: 1; }
.tile-ic {
    width: 58px; height: 58px; border-radius: 18px; display: grid; place-items: center; font-size: 1.35rem;
    color: var(--bs-600); flex: none;
    background: linear-gradient(135deg, var(--bs-100), var(--br-100));
    box-shadow: inset 0 0 0 1px rgba(40, 121, 122,.1);
    transition: transform var(--t-med) var(--ease-spring), background var(--t-med), color var(--t-med);
}
.tile:hover .tile-ic { transform: rotate(-8deg) scale(1.08); background: linear-gradient(135deg, var(--bs-500), var(--bs-700)); color: #fff; }
.tile--sage .tile-ic { color: var(--sg-700); background: linear-gradient(135deg, var(--sg-100), #EEF5F1); box-shadow: inset 0 0 0 1px rgba(43, 102, 92,.14); }
.tile--sage:hover .tile-ic { background: linear-gradient(135deg, var(--sg-500), var(--sg-700)); color: #fff; }
.tile--brass .tile-ic { color: var(--br-700); background: linear-gradient(135deg, var(--br-100), #FCF7EC); box-shadow: inset 0 0 0 1px rgba(156, 124, 69,.18); }
.tile--brass:hover .tile-ic { background: linear-gradient(135deg, var(--br-200), var(--br-500)); color: var(--bs-950); }
.tile-kicker { font-family: var(--f-body); font-size: .9rem; font-weight: 700; color: var(--ink-3); }
.tile h3 { font-size: 1.26rem; font-weight: 800; margin: 0; line-height: 1.45; color: var(--ink); }
.tile p { margin: 0; color: var(--ink-3); font-size: 1rem; line-height: 1.65; }
.tile-go { margin-top: auto; display: flex; align-items: center; justify-content: space-between; gap: 8px; font-weight: 700; color: var(--bs-600); padding-top: 8px; }
.tile-go .arr { width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; border: 1px solid var(--line); background: #fff; transition: all var(--t-med) var(--ease-out); }
.tile:hover .tile-go .arr { background: var(--bs-600); border-color: var(--bs-600); color: #fff; transform: rotate(-45deg); }

.tile--feature {
    grid-column: span 2; grid-row: span 2; color: #fff; padding: clamp(28px, 3vw, 40px); gap: 16px;
    background: radial-gradient(600px 400px at 100% 0%, rgba(201, 171, 118,.35), transparent 60%),
                radial-gradient(500px 360px at 0% 100%, rgba(43, 102, 92,.5), transparent 60%),
                linear-gradient(135deg, var(--bs-700), var(--bs-900));
    border: 0; box-shadow: var(--sh-lg);
    --spot-color: rgba(243, 229, 195,.2);
}
.tile--feature:hover { color: #fff; }
.tile--feature .jaali-layer { z-index: -1; background-size: 56px; -webkit-mask-image: linear-gradient(200deg, #000, transparent 60%); mask-image: linear-gradient(200deg, #000, transparent 60%); }
.tile--feature .grain { z-index: -1; }
.tile--feature .tile-ic { width: 72px; height: 72px; font-size: 1.75rem; border-radius: 22px; color: var(--bs-950); background: linear-gradient(135deg, var(--br-200), var(--br-500)); box-shadow: 0 12px 30px -10px rgba(201, 171, 118,.8); }
.tile--feature:hover .tile-ic { background: linear-gradient(135deg, #fff, var(--br-200)); color: var(--bs-700); }
.tile--feature .tile-kicker { color: var(--br-200); }
.tile--feature h3 { color: #fff; font-family: var(--f-display); font-size: clamp(1.6rem, 1.2rem + 1.2vw, 2.25rem); line-height: 1.35; }
.tile--feature p { color: rgba(255,255,255,.8); font-size: 1.08rem; max-width: 480px; }
.steps { list-style: none; margin: 4px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.steps li { padding: 14px; border-radius: 16px; background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.13); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.steps b { display: block; font-family: var(--f-body); font-size: .88rem; font-weight: 800; color: var(--br-400); margin-bottom: 2px; }
.steps span { font-size: .96rem; font-weight: 600; line-height: 1.45; display: block; }
.tile--feature .tile-go { justify-content: flex-start; }
.tile--feature .tile-go .label { display: inline-flex; align-items: center; gap: .6rem; padding: .82rem 1.45rem; border-radius: 999px; background: linear-gradient(135deg, var(--br-200), var(--br-400)); color: var(--bs-950); font-weight: 800; box-shadow: 0 12px 28px -12px rgba(201, 171, 118,.9); transition: transform var(--t-med) var(--ease-spring); }
.tile--feature:hover .tile-go .label { transform: translateX(4px); }

.tile--wide {
    grid-column: span 2; flex-direction: row; align-items: center; gap: 22px;
    background: linear-gradient(120deg, var(--sg-100), #F1F7F3 60%, var(--br-100));
    border-color: rgba(43, 102, 92,.22);
    --spot-color: rgba(74, 133, 120,.22);
}
.tile--wide .tile-body { flex: 1; display: flex; flex-direction: column; gap: 8px; }
.tile--wide .tile-go { margin-top: 0; padding-top: 0; }
.hours { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
.hours span { display: inline-flex; align-items: center; gap: .4rem; font-size: .88rem; font-weight: 700; padding: .3rem .8rem; border-radius: 999px; background: #fff; border: 1px solid rgba(43, 102, 92,.22); color: var(--sg-800); }

/* --------------------------------------------------------------------------
   11. STATS BAND
   -------------------------------------------------------------------------- */
.stats {
    position: relative; overflow: hidden; isolation: isolate; color: #fff;
    background:
        radial-gradient(700px 400px at 10% 10%, rgba(43, 102, 92,.45), transparent 60%),
        radial-gradient(700px 400px at 90% 90%, rgba(40, 121, 122,.55), transparent 60%),
        linear-gradient(160deg, var(--bs-800), var(--bs-950));
    padding: clamp(48px, 5.5vw, 76px) 0;
}
.stats .jaali-layer { background-size: 64px; z-index: -1; -webkit-mask-image: radial-gradient(ellipse at center, #000, transparent 75%); mask-image: radial-gradient(ellipse at center, #000, transparent 75%); }
.stats .grain { z-index: -1; }
.stats .section-title { color: #fff; }
.stats .section-lead { color: rgba(255,255,255,.72); }
.stat-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
.stat {
    position: relative; overflow: hidden; padding: 28px 26px; border-radius: var(--r-lg);
    background: linear-gradient(160deg, rgba(255,255,255,.12), rgba(255,255,255,.03) 60%, rgba(40, 121, 122,.14));
    border: 1px solid rgba(255,255,255,.14);
    -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
    transition: transform var(--t-med) var(--ease-out), border-color var(--t-med);
    --spot-color: rgba(243, 229, 195,.16);
}
.stat:hover { transform: translateY(-5px); border-color: rgba(243, 229, 195,.35); }
.stat-glow { position: absolute; width: 220px; height: 220px; right: -70px; top: -90px; border-radius: 50%; background: radial-gradient(circle, var(--glow, rgba(201, 171, 118,.45)), transparent 65%); pointer-events: none; z-index: -1; }
.stat:nth-child(2) { --glow: rgba(122, 170, 157,.5); }
.stat:nth-child(3) { --glow: rgba(79, 154, 154,.6); }
.stat:nth-child(4) { --glow: rgba(243, 229, 195,.35); }
.stat-ic { width: 46px; height: 46px; border-radius: 14px; display: grid; place-items: center; background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.16); color: var(--br-200); margin-bottom: 22px; }
.stat-num { display: block; font-family: var(--f-ui); font-weight: 800; font-size: clamp(2.3rem, 1.6rem + 2vw, 3.2rem); line-height: 1; letter-spacing: -.02em; }
.stat-label { display: block; margin-top: 10px; font-weight: 700; font-size: 1.06rem; color: #fff; }
.stat-note { display: block; margin-top: 2px; font-size: .92rem; color: rgba(255,255,255,.66); }

/* --------------------------------------------------------------------------
   12. LEADERSHIP PROFILES (अध्यक्ष · अधिशासी अधिकारी)
   -------------------------------------------------------------------------- */
.profile-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 390px)); justify-content: center; gap: clamp(24px, 4vw, 56px); }
.profile {
    --spot-color: rgba(228, 205, 156,.14);
    position: relative; padding: 10px; border-radius: 30px; text-align: center;
    border: 1.5px solid transparent;
    background:
        linear-gradient(180deg, #fff, var(--iv-50)) padding-box,
        linear-gradient(160deg, var(--br-400), rgba(40, 121, 122,.45) 45%, var(--bs-600)) border-box;
    box-shadow: var(--sh-md);
    transition: transform var(--t-med) var(--ease-out), box-shadow var(--t-med);
}
.profile:hover { transform: translateY(-6px); box-shadow: var(--sh-lg); }
.profile-media {
    position: relative; aspect-ratio: 5 / 5.6; overflow: hidden; isolation: isolate;
    border-radius: 999px 999px 22px 22px;
    background: radial-gradient(circle at 50% 30%, var(--bs-400), var(--bs-800) 75%);
}
.profile-media img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 15%; display: block; transition: transform .9s var(--ease-out); }
.profile:hover .profile-media img { transform: scale(1.05); }
.profile-media::after {
    content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
    background: linear-gradient(180deg, transparent 55%, rgba(12, 42, 43,.55));
}
.profile-placeholder { position: absolute; inset: 0; display: grid; place-items: center; color: rgba(255,255,255,.92); font-size: clamp(4.5rem, 9vw, 6.5rem); }
.profile-placeholder::before { content: ""; position: absolute; inset: 0; background-image: var(--jaali-light); background-size: 48px; opacity: .9; }
.profile-placeholder i { position: relative; filter: drop-shadow(0 12px 24px rgba(0,0,0,.35)); }
.profile-role {
    position: absolute; left: 50%; bottom: 16px; z-index: 2; transform: translateX(-50%); white-space: nowrap;
    padding: .38rem 1.1rem; border-radius: 999px; font-weight: 800; font-size: .95rem;
    color: var(--bs-950); background: linear-gradient(135deg, var(--br-200), var(--br-400));
    box-shadow: 0 10px 22px -10px rgba(0,0,0,.6);
}
.profile-bar { padding: 20px 14px 10px; }
.profile-bar h3 { font-family: var(--f-display); font-size: clamp(1.3rem, 1.1rem + .6vw, 1.6rem); font-weight: 700; margin: 0 0 4px; line-height: 1.4; color: var(--ink); }
.profile-bar p { margin: 0 0 16px; color: var(--ink-3); font-size: 1rem; }
.profile-toggle {
    display: inline-flex; align-items: center; gap: .55rem; cursor: pointer;
    padding: .55rem 1.2rem; border-radius: 999px; font-weight: 700; font-size: 1rem;
    color: var(--bs-700); background: #fff; border: 1.5px solid rgba(30, 99, 100,.25);
    box-shadow: var(--sh-xs); transition: all var(--t-med) var(--ease-out);
}
.profile-toggle .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--br-500); box-shadow: 0 0 0 4px rgba(228, 205, 156,.25); }
.profile-toggle i { font-size: .75rem; transition: transform var(--t-med) var(--ease-out); }
.profile-toggle:hover, .profile.is-open .profile-toggle { color: #fff; border-color: var(--bs-600); background: linear-gradient(135deg, var(--bs-500), var(--bs-700)); box-shadow: var(--sh-brand); }
.profile.is-open .profile-toggle i { transform: rotate(180deg); }
/* Shutter panel rises inside the arch portrait */
.profile-panel {
    position: absolute; top: 10px; left: 10px; right: 10px; aspect-ratio: 5 / 5.6; z-index: 3; overflow-y: auto;
    display: flex; flex-direction: column; justify-content: flex-end; gap: 8px; text-align: left;
    padding: 26% 26px 24px; border-radius: 999px 999px 22px 22px; color: #fff;
    background:
        radial-gradient(360px 200px at 100% 0%, rgba(228, 205, 156,.28), transparent 60%),
        linear-gradient(170deg, rgba(10, 61, 71,.97), rgba(8, 28, 29,.98));
    clip-path: inset(100% 0 0 0 round 0 0 22px 22px);
    transition: clip-path .65s var(--ease-in-out);
    scrollbar-width: thin;
}
.profile.is-open .profile-panel { clip-path: inset(0 0 0 0 round 0 0 22px 22px); }
.profile-panel > * { opacity: 0; transform: translateY(10px); transition: opacity .45s var(--ease-out), transform .45s var(--ease-out); }
.profile.is-open .profile-panel > * { opacity: 1; transform: none; }
.profile.is-open .profile-panel > :nth-child(2) { transition-delay: .08s; }
.profile.is-open .profile-panel > :nth-child(3) { transition-delay: .14s; }
.profile.is-open .profile-panel > :nth-child(4) { transition-delay: .2s; }
.profile-panel-role { align-self: flex-start; font-size: .85rem; font-weight: 800; padding: .25rem .8rem; border-radius: 999px; color: var(--bs-950); background: var(--br-400); }
.profile-about { margin: 4px 0 2px; color: rgba(255,255,255,.82); font-size: .96rem; line-height: 1.65; }
.profile-facts { list-style: none; margin: 0; padding: 10px 0 0; border-top: 1px solid rgba(255,255,255,.12); display: grid; gap: 8px; font-size: .93rem; }
.profile-facts li { display: flex; align-items: center; gap: 10px; color: rgba(255,255,255,.88); }
.profile-facts i { width: 30px; height: 30px; flex: none; border-radius: 10px; display: grid; place-items: center; font-size: .78rem; color: var(--br-200); background: rgba(255,255,255,.08); }
.profile-facts a { color: #fff; font-weight: 700; text-decoration: none; font-family: var(--f-ui); }
.profile-facts a:hover { color: var(--br-200); }
.profile-panel .link-arrow { color: var(--br-200); margin-top: 4px; }
.profile-panel .link-arrow .arr { width: 32px; height: 32px; background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.2); color: #fff; }
.profile-panel .link-arrow:hover .arr { background: var(--br-400); border-color: var(--br-400); color: var(--bs-950); }

/* --------------------------------------------------------------------------
   13. HERITAGE / ABOUT
   -------------------------------------------------------------------------- */
.heritage-grid { display: grid; grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr); gap: clamp(32px, 4.5vw, 64px); align-items: center; }
.heritage-head .grad-text { display: inline-block; } /* keep "गौरवशाली सिरौली" on one line */
.heritage-copy p { font-size: 1.08rem; line-height: 1.85; color: var(--ink-2); }
.fact-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin: 26px 0 30px; }
.fact { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-radius: 16px; background: #fff; border: 1px solid var(--line); box-shadow: var(--sh-xs); transition: transform var(--t-med) var(--ease-out), border-color var(--t-med); }
.fact:hover { transform: translateY(-3px); border-color: var(--sg-400); }
.fact i { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; flex: none; color: var(--sg-700); background: var(--sg-100); }
.fact small { display: block; font-size: .82rem; color: var(--ink-3); font-weight: 600; line-height: 1.25; }
.fact strong { display: block; font-size: 1.02rem; color: var(--ink); line-height: 1.4; }
.heritage-actions { display: flex; flex-wrap: wrap; gap: 12px; }

/* "अतीत | वर्तमान" poster: gallery-style frame (outer rim → gold mat → photo) with a then→now caption below */
.heritage-poster { position: relative; margin: 0; }
.hp-frame {
    position: relative; display: block; padding: 14px; border-radius: 24px; outline-offset: 4px;
    background: linear-gradient(145deg, #FFFFFF 0%, var(--br-100) 55%, var(--iv-100) 100%);
    border: 1px solid var(--line-2);
    box-shadow: 0 1px 0 #fff inset, 0 0 0 5px rgba(23, 78, 79, .06), var(--sh-lg);
}
/* gold corner brackets on the rim */
.hp-frame::before {
    content: ""; position: absolute; inset: 5px; border-radius: 19px; pointer-events: none; z-index: 2;
    --c: var(--br-600); --l: 26px; --w: 2px;
    background:
        linear-gradient(var(--c), var(--c)) top left / var(--l) var(--w) no-repeat,
        linear-gradient(var(--c), var(--c)) top left / var(--w) var(--l) no-repeat,
        linear-gradient(var(--c), var(--c)) top right / var(--l) var(--w) no-repeat,
        linear-gradient(var(--c), var(--c)) top right / var(--w) var(--l) no-repeat,
        linear-gradient(var(--c), var(--c)) bottom left / var(--l) var(--w) no-repeat,
        linear-gradient(var(--c), var(--c)) bottom left / var(--w) var(--l) no-repeat,
        linear-gradient(var(--c), var(--c)) bottom right / var(--l) var(--w) no-repeat,
        linear-gradient(var(--c), var(--c)) bottom right / var(--w) var(--l) no-repeat;
}
.hp-mat {
    position: relative; display: block; aspect-ratio: 1024 / 538; overflow: hidden; border-radius: 12px; background: var(--iv-100);
    box-shadow: 0 0 0 1px var(--br-500), 0 0 0 4px #fff, 0 0 0 5px var(--line-2), 0 6px 16px -6px rgba(12, 42, 43, .35);
}
.hp-mat img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 1.2s var(--ease-out); }
.hp-mat::after { content: ""; position: absolute; inset: 0; box-shadow: inset 0 0 22px rgba(12, 42, 43, .18); pointer-events: none; }
.hp-frame:hover .hp-mat img, .hp-frame:focus-visible .hp-mat img { transform: scale(1.03); }
.hp-zoom {
    position: absolute; right: 26px; bottom: 26px; z-index: 3; width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center;
    color: #fff; background: rgba(8, 28, 29, .62); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
    opacity: 0; transform: translateY(6px); transition: opacity var(--t-med), transform var(--t-med) var(--ease-out);
}
.hp-frame:hover .hp-zoom, .hp-frame:focus-visible .hp-zoom { opacity: 1; transform: none; }
.hp-timeline {
    position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 10px;
    margin: 22px 0 0; padding: 12px; border-radius: 20px; background: #fff; border: 1px solid var(--line); box-shadow: var(--sh-md);
}
.hp-era { display: flex; align-items: center; gap: 12px; min-width: 0; padding: 6px 8px; }
.hp-era .ic { width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; flex: none; }
.hp-era--past .ic { color: var(--br-700); background: var(--br-100); border: 1px solid var(--br-400); }
.hp-era--now .ic { color: var(--br-200); background: linear-gradient(135deg, var(--bs-500), var(--bs-700)); }
.hp-era small { display: block; font-size: .8rem; font-weight: 800; letter-spacing: .02em; line-height: 1.3; }
.hp-era--past small { color: var(--br-700); }
.hp-era--now small { color: var(--bs-600); }
.hp-era strong { display: block; font-size: .95rem; font-weight: 600; color: var(--ink); line-height: 1.45; }
.hp-arrow { width: 34px; height: 34px; border-radius: 999px; display: grid; place-items: center; color: var(--bs-600); background: var(--bs-100); font-size: .9rem; }

/* History page banner (same poster) */
.history-poster { margin: 0 0 28px; }
.history-poster a { display: block; overflow: hidden; border-radius: 20px; border: 1px solid var(--line); box-shadow: var(--sh-md); background: var(--iv-100); }
.history-poster img { width: 100%; height: auto; display: block; transition: transform 1.2s var(--ease-out); }
.history-poster a:hover img { transform: scale(1.02); }
.history-poster figcaption { display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 12px; font-weight: 600; color: var(--ink-3); text-align: center; line-height: 1.5; }
.history-poster figcaption i { color: var(--br-600); }

/* --------------------------------------------------------------------------
   14. PLANS
   -------------------------------------------------------------------------- */
.plan-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.plan {
    position: relative; display: flex; gap: 20px; padding: 24px; border-radius: var(--r-lg);
    background: #fff; border: 1px solid var(--line); box-shadow: var(--sh-sm);
    transition: transform var(--t-med) var(--ease-out), box-shadow var(--t-med);
    --spot-color: rgba(74, 133, 120,.14);
}
.plan:hover { transform: translateY(-4px); box-shadow: var(--sh-md); }
.plan-date {
    flex: none; width: 88px; border-radius: 20px; text-align: center; padding: 14px 8px; color: #fff; align-self: flex-start;
    background: linear-gradient(160deg, var(--bs-500), var(--bs-800)); box-shadow: var(--sh-brand);
    position: relative; overflow: hidden;
}
.plan-date::after { content: ""; position: absolute; inset: 0; background: linear-gradient(160deg, rgba(255,255,255,.22), transparent 50%); }
.plan:nth-child(4n+2) .plan-date, .plan:nth-child(4n+3) .plan-date { background: linear-gradient(160deg, var(--sg-500), var(--sg-800)); box-shadow: var(--sh-sage); }
.plan-date b { display: block; font-family: var(--f-ui); font-size: 2rem; font-weight: 800; line-height: 1; }
.plan-date span { display: block; font-size: .88rem; font-weight: 700; margin-top: 6px; line-height: 1.25; }
.plan-date small { display: block; font-family: var(--f-ui); font-size: .74rem; opacity: .78; margin-top: 2px; }
.plan-body { padding-right: 24px; }
.plan-body h3 { font-size: 1.16rem; font-weight: 800; margin: 2px 0 8px; color: var(--ink); line-height: 1.5; }
.plan-body p { margin: 0; color: var(--ink-3); line-height: 1.7; }

.empty-state { text-align: center; padding: 48px 20px; border-radius: var(--r-lg); border: 1.5px dashed var(--line-2); background: rgba(255,255,255,.6); color: var(--ink-3); }
.empty-state i { font-size: 2rem; color: var(--br-500); margin-bottom: 10px; display: block; }

/* --------------------------------------------------------------------------
   15. GALLERY MARQUEE — duotone at rest, full colour on hover
   -------------------------------------------------------------------------- */
.gallery-rail { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent); mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent); padding: 12px 0 22px; }
.gallery-track { display: flex; gap: 18px; width: max-content; animation: marquee var(--marquee-dur, 60s) linear infinite; }
.gallery-rail:hover .gallery-track, .gallery-rail:focus-within .gallery-track { animation-play-state: paused; }
.duo {
    position: relative; display: block; width: 300px; height: 214px; flex: none; border-radius: 22px; overflow: hidden;
    box-shadow: var(--sh-sm); isolation: isolate;
    transition: transform var(--t-med) var(--ease-out), box-shadow var(--t-med);
}
.duo:nth-child(3n+2) { width: 240px; }
.duo img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) contrast(1.08); transition: filter .7s var(--ease-out), transform 1s var(--ease-out); }
.duo::before { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(135deg, var(--bs-600), var(--sg-600)); mix-blend-mode: color; opacity: .92; transition: opacity .7s var(--ease-out); }
.duo::after { content: ""; position: absolute; inset: 0; z-index: 2; background: linear-gradient(180deg, transparent 50%, rgba(8, 28, 29,.78)); }
.duo span { position: absolute; left: 16px; right: 16px; bottom: 14px; z-index: 3; color: #fff; font-weight: 700; font-size: .93rem; line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.duo:hover { transform: translateY(-6px); box-shadow: var(--sh-md); }
.duo:hover img { filter: none; transform: scale(1.06); }
.duo:hover::before { opacity: 0; }


/* --------------------------------------------------------------------------
   16. CONTACT CARDS (home) — documents · citizen services · office helpdesk
   -------------------------------------------------------------------------- */
.contact-home { background: linear-gradient(180deg, var(--iv-50), var(--iv-100)); }
.cc-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; align-items: stretch; }
.cc-card {
    position: relative; overflow: hidden; isolation: isolate; text-align: center;
    padding: 36px 28px 30px; border-radius: 26px; background: #fff; border: 1px solid var(--line);
    box-shadow: var(--sh-sm); transition: transform var(--t-med) var(--ease-out), box-shadow var(--t-med);
    --spot-color: rgba(243, 229, 195, .5);
}
.cc-card::after { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 5px; background: linear-gradient(90deg, var(--bs-500), var(--br-400)); }
.cc-card:hover { transform: translateY(-6px); box-shadow: var(--sh-md); }
.cc-ic {
    width: 76px; height: 76px; margin: 0 auto 18px; border-radius: 50%; display: grid; place-items: center; font-size: 1.7rem;
    color: var(--br-200); background: linear-gradient(135deg, var(--bs-500), var(--bs-700));
    box-shadow: 0 16px 30px -14px rgba(23, 78, 79, .8), 0 0 0 8px rgba(243, 229, 195, .5);
    transition: transform var(--t-med) var(--ease-spring);
}
.cc-card:hover .cc-ic { transform: rotate(-8deg) scale(1.06); }
.cc-card h3 { font-family: var(--f-display); font-size: clamp(1.25rem, 1.1rem + .4vw, 1.45rem); font-weight: 700; margin: 0 0 16px; line-height: 1.5; color: var(--ink); }
.cc-list { list-style: none; margin: 0; padding: 0; text-align: left; }
.cc-list li + li { border-top: 1px dashed var(--line); }
.cc-list a { display: flex; align-items: center; gap: 12px; padding: 12px 6px; color: var(--ink-2); text-decoration: none; font-weight: 600; transition: color var(--t-fast), transform var(--t-med) var(--ease-out); }
.cc-list a i { color: var(--bs-500); width: 18px; text-align: center; flex: none; }
.cc-list a b { color: var(--ink); }
.cc-list a:hover { color: var(--bs-600); transform: translateX(4px); }
.cc-list--check a i { color: var(--sg-600); }

.cc-card--hero {
    color: #fff; border: 0; text-align: left;
    background: radial-gradient(420px 260px at 100% 0%, rgba(243, 229, 195, .25), transparent 60%), linear-gradient(160deg, var(--bs-600), var(--bs-800));
    box-shadow: var(--sh-lg);
}
.cc-card--hero::after { background: linear-gradient(90deg, var(--br-200), var(--br-400)); }
.cc-card--hero .jaali-layer { z-index: -1; background-size: 52px; -webkit-mask-image: linear-gradient(200deg, #000, transparent 70%); mask-image: linear-gradient(200deg, #000, transparent 70%); }
.cc-card--hero .cc-ic { margin-left: 0; color: var(--bs-800); background: linear-gradient(135deg, var(--br-200), var(--br-400)); box-shadow: 0 16px 30px -14px rgba(0, 0, 0, .5), 0 0 0 8px rgba(243, 229, 195, .14); }
.cc-card--hero h3 { color: #fff; }
.cc-addr { display: flex; gap: 10px; margin: 0 0 16px; color: rgba(255, 255, 255, .88); font-size: .98rem; line-height: 1.6; }
.cc-addr i { color: var(--br-200); margin-top: 5px; }
.cc-contacts { list-style: none; margin: 0 0 22px; padding: 0; display: grid; gap: 12px; }
.cc-contacts li { display: flex; align-items: center; gap: 12px; }
.cc-contacts .ic { width: 38px; height: 38px; flex: none; border-radius: 12px; display: grid; place-items: center; color: var(--br-200); background: rgba(255, 255, 255, .1); border: 1px solid rgba(243, 229, 195, .2); }
.cc-contacts small { display: block; font-size: .82rem; color: rgba(243, 229, 195, .8); line-height: 1.25; }
.cc-contacts a, .cc-contacts b { display: block; color: #fff; font-weight: 700; text-decoration: none; line-height: 1.4; word-break: break-word; }
.cc-contacts a:hover { color: var(--br-200); }
.cc-btn { width: 100%; }

/* --------------------------------------------------------------------------
   17. FOOTER
   -------------------------------------------------------------------------- */
.site-footer {
    position: relative; overflow: hidden; isolation: isolate; color: rgba(255,255,255,.8);
    background: radial-gradient(900px 500px at 100% 0%, rgba(40, 121, 122,.38), transparent 60%),
                radial-gradient(800px 500px at 0% 100%, rgba(43, 102, 92,.32), transparent 60%),
                var(--bs-950);
    padding-top: clamp(56px, 7vw, 88px);
}
.site-footer .jaali-layer { background-size: 64px; opacity: .6; z-index: -1; -webkit-mask-image: linear-gradient(180deg, #000, transparent 70%); mask-image: linear-gradient(180deg, #000, transparent 70%); }
.site-footer .grain { z-index: -1; opacity: .08; }
.footer-top { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1.25fr; gap: clamp(28px, 4vw, 56px); padding-bottom: clamp(32px, 4vw, 48px); }
.footer-brand { display: flex; align-items: center; gap: 14px; margin-bottom: 18px; text-decoration: none; }
.footer-brand img { width: 58px; height: 58px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 3px rgba(228, 205, 156,.5); }
.footer-brand strong { display: block; font-family: var(--f-display); font-size: 1.36rem; color: #fff; line-height: 1.55; padding-top: .12em; white-space: nowrap; }
.footer-brand small { color: var(--br-400); font-weight: 600; }
.footer-about { font-size: 1rem; line-height: 1.8; color: rgba(255,255,255,.72); margin-bottom: 18px; }
.footer-addr { display: flex; gap: 10px; font-size: .98rem; color: #fff; font-weight: 500; margin: 0; }
.footer-addr i { color: var(--br-400); margin-top: 6px; }
.footer-title { font-family: var(--f-body); font-size: 1.15rem; font-weight: 800; color: #fff; margin: 8px 0 20px; padding-bottom: 12px; position: relative; }
.footer-title::after { content: ""; position: absolute; left: 0; bottom: 0; width: 44px; height: 3px; border-radius: 3px; background: linear-gradient(90deg, var(--br-400), var(--bs-400)); }
.footer-links { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.footer-links a { color: rgba(255,255,255,.8); text-decoration: none; display: inline-flex; align-items: center; gap: .6rem; font-weight: 500; transition: color var(--t-fast), transform var(--t-med) var(--ease-out); }
.footer-links a::before { content: ""; width: 6px; height: 6px; transform: rotate(45deg); border: 1.5px solid var(--sg-400); flex: none; transition: background var(--t-fast); }
.footer-links a:hover { color: #fff; transform: translateX(4px); }
.footer-links a:hover::before { background: var(--sg-400); }
.contact-card { padding: 18px; border-radius: 20px; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.1); display: grid; gap: 14px; }
.contact-row { display: flex; align-items: center; gap: 12px; color: #fff; text-decoration: none; }
.contact-row .ic { width: 38px; height: 38px; border-radius: 12px; display: grid; place-items: center; flex: none; background: rgba(228, 205, 156,.14); color: var(--br-400); }
.contact-row small { display: block; font-size: .8rem; color: rgba(255,255,255,.62); line-height: 1.25; }
.contact-row span { display: block; font-weight: 700; font-family: var(--f-ui); font-size: .95rem; line-height: 1.35; word-break: break-word; }
a.contact-row:hover span { color: var(--br-200); }
.footer-bottom-bar { position: relative; border-top: 1px solid rgba(255,255,255,.1); padding: 18px 0; background: rgba(0,0,0,.25); }
/* padding-right keeps the floating "back to top" button clear of the bottom bar */
.footer-bottom-inner { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; font-size: .93rem; padding-right: 72px; }
.footer-bottom-inner a { color: #fff; font-weight: 700; text-decoration: none; }
.footer-bottom-inner a:hover { color: var(--br-200); }
/* The logo artwork is white-on-transparent, made for dark backgrounds — no box needed */
.dev-credit { display: inline-flex; align-items: center; opacity: .88; transition: opacity var(--t-med), transform var(--t-med) var(--ease-out); }
.dev-credit:hover { opacity: 1; transform: translateY(-2px); }
.dev-credit img { height: 40px; width: auto; max-width: 100%; display: block; }

/* --------------------------------------------------------------------------
   18. FLOATING DOCK — pay-tax pill + conic scroll-progress "back to top"
   -------------------------------------------------------------------------- */
.float-dock { position: fixed; right: 20px; bottom: 20px; z-index: 1020; display: flex; align-items: center; gap: 12px; pointer-events: none; }
.float-dock > * { pointer-events: auto; }
.dock-pay {
    display: inline-flex; align-items: center; gap: 12px; padding: 7px 22px 7px 7px; border-radius: 999px;
    text-decoration: none; color: #fff;
    background: linear-gradient(135deg, var(--bs-500), var(--bs-800));
    box-shadow: 0 18px 40px -14px rgba(30, 99, 100,.85), inset 0 1px 0 rgba(255,255,255,.2);
    transform: translateY(160%); opacity: 0;
    transition: transform .7s var(--ease-spring), opacity .4s, box-shadow var(--t-med);
}
.float-dock.is-visible .dock-pay { transform: none; opacity: 1; }
/* Once the footer is on screen the pill steps aside so it never hides footer content */
.float-dock.is-visible.at-footer .dock-pay, .float-dock.is-visible.at-services .dock-pay { transform: translateY(160%); opacity: 0; pointer-events: none; }
.dock-pay:hover { color: #fff; box-shadow: 0 22px 48px -14px rgba(30, 99, 100,1); }
.dock-ic { position: relative; width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; color: var(--bs-950); background: linear-gradient(135deg, var(--br-200), var(--br-500)); flex: none; }
.dock-ic::after { content: ""; position: absolute; inset: -4px; border-radius: 50%; border: 2px solid rgba(243, 229, 195,.6); animation: livePulse 2.4s ease-out infinite; }
.dock-pay small { display: block; font-size: .74rem; color: rgba(255,255,255,.72); font-weight: 600; line-height: 1.15; }
.dock-pay strong { display: block; font-size: 1rem; line-height: 1.3; }
.to-top {
    position: relative; width: 52px; height: 52px; border-radius: 50%; border: 0; cursor: pointer; flex: none; padding: 0;
    background: conic-gradient(var(--br-400) calc(var(--progress, 0) * 360deg), rgba(255,255,255,.92) 0);
    box-shadow: var(--sh-md); display: grid; place-items: center;
    transform: scale(0); transition: transform .5s var(--ease-spring);
}
.to-top::before { content: ""; position: absolute; inset: 4px; border-radius: 50%; background: var(--bs-800); }
.to-top i { position: relative; color: #fff; }
.float-dock.is-visible .to-top { transform: scale(1); }

/* --------------------------------------------------------------------------
   19. INNER PAGE BANNER (re-skins .gov-breadcrumb-bar on every inner page)
   -------------------------------------------------------------------------- */
.gov-breadcrumb-bar {
    position: relative; overflow: hidden; isolation: isolate; color: #fff;
    padding: clamp(46px, 6vw, 80px) 0 clamp(70px, 8vw, 104px);
    background:
        radial-gradient(700px 340px at 85% 10%, rgba(201, 171, 118,.35), transparent 60%),
        radial-gradient(600px 320px at 5% 100%, rgba(43, 102, 92,.55), transparent 60%),
        radial-gradient(500px 300px at 50% 50%, rgba(40, 121, 122,.5), transparent 70%),
        linear-gradient(135deg, var(--bs-800), var(--bs-950));
}
.gov-breadcrumb-bar::before {
    content: ""; position: absolute; inset: 0; z-index: -1;
    background-image: var(--jaali-light); background-size: 60px;
    -webkit-mask-image: linear-gradient(90deg, transparent 20%, #000 75%); mask-image: linear-gradient(90deg, transparent 20%, #000 75%);
}
.gov-breadcrumb-bar::after {
    content: ""; position: absolute; top: -50%; left: 55%; width: 30%; height: 200%; z-index: -1;
    background: linear-gradient(100deg, transparent, rgba(255, 244, 214,.13), transparent);
    transform: rotate(18deg); animation: beamSweep 16s var(--ease-in-out) infinite;
}
.gov-breadcrumb-container { max-width: 1280px; margin: 0 auto; padding: 0 calc(var(--bs-gutter-x, 1.5rem) * .5); position: relative; }
.breadcrumb-title {
    font-family: var(--f-display); font-weight: 800; color: #fff; margin: 0 0 18px;
    font-size: clamp(1.8rem, 1.2rem + 2.2vw, 2.9rem); line-height: 1.35;
    animation: fadeSlideIn .9s var(--ease-out) both;
}
.breadcrumb-list {
    list-style: none; margin: 0; padding: 5px 6px; display: inline-flex; flex-wrap: wrap; align-items: center; gap: 4px;
    border-radius: 999px; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.16);
    -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
    animation: fadeSlideIn .9s .12s var(--ease-out) both;
}
.breadcrumb-list li { font-size: .93rem; font-weight: 600; }
.breadcrumb-list a { color: #fff; text-decoration: none; display: inline-flex; align-items: center; gap: .4rem; padding: 4px 10px; border-radius: 999px; }
.breadcrumb-list a:hover { background: rgba(255,255,255,.12); color: #fff; }
.breadcrumb-list a i { color: var(--br-400); }
.breadcrumb-list .separator { color: rgba(255,255,255,.4); font-size: .6rem; }
.breadcrumb-list .active { color: var(--bs-950); background: linear-gradient(135deg, var(--br-200), var(--br-400)); padding: 4px 14px; border-radius: 999px; font-weight: 700; }

/* Inner page canvas: content card overlaps the banner */
.sr-body #main-content.py-5, .sr-body section.events {
    position: relative;
    background:
        radial-gradient(900px 400px at 100% 0%, rgba(243, 229, 195,.35), transparent 60%),
        radial-gradient(700px 400px at 0% 40%, rgba(198, 221, 213,.3), transparent 60%),
        var(--iv-50);
    padding-top: 0 !important; padding-bottom: clamp(56px, 7vw, 96px) !important;
}
.sr-body #main-content.py-5 > .container, .sr-body section.events > .container { position: relative; top: -40px; margin-bottom: -40px; }

/* --------------------------------------------------------------------------
   20. BOOTSTRAP COMPONENT THEMING (inner pages)
   -------------------------------------------------------------------------- */
.card {
    --bs-card-border-color: var(--line);
    --bs-card-border-radius: var(--r-lg);
    --bs-card-inner-border-radius: calc(var(--r-lg) - 1px);
    --bs-card-cap-bg: var(--iv-100);
    --bs-card-bg: #fff;
}
.card.shadow-sm { box-shadow: var(--sh-md) !important; }
.card.rounded-4 { border-radius: var(--r-lg) !important; }
.card.border-0 { border: 1px solid rgba(230, 218, 192,.75) !important; }
.card .card { box-shadow: var(--sh-xs) !important; transition: transform var(--t-med) var(--ease-out), box-shadow var(--t-med), border-color var(--t-med); }
.card .card:hover { transform: translateY(-3px); box-shadow: var(--sh-sm) !important; }
.card .card.bg-light { background: linear-gradient(160deg, #fff, var(--iv-100)) !important; border: 1px solid var(--line) !important; }

.card-header.bg-dark, .card-header.bg-secondary {
    position: relative; overflow: hidden; isolation: isolate;
    background:
        radial-gradient(500px 200px at 100% 0%, rgba(201, 171, 118,.35), transparent 60%),
        linear-gradient(120deg, var(--bs-600), var(--bs-800)) !important;
    padding: 1.15rem 1.6rem !important; border: 0;
}
.card-header.bg-secondary {
    background:
        radial-gradient(500px 200px at 100% 0%, rgba(243, 229, 195,.3), transparent 60%),
        linear-gradient(120deg, var(--sg-500), var(--sg-800)) !important;
}
.card-header.bg-dark::before, .card-header.bg-secondary::before {
    content: ""; position: absolute; inset: 0; z-index: -1; background-image: var(--jaali-light); background-size: 44px;
    -webkit-mask-image: linear-gradient(90deg, transparent 40%, #000); mask-image: linear-gradient(90deg, transparent 40%, #000);
}
.card-header.bg-dark::after, .card-header.bg-secondary::after {
    content: ""; position: absolute; top: -100%; left: -30%; width: 30%; height: 300%; z-index: -1;
    background: linear-gradient(100deg, transparent, rgba(255,255,255,.14), transparent); transform: rotate(20deg);
    animation: headerBeam 9s var(--ease-in-out) infinite;
}
.card-header h4 { font-family: var(--f-display); font-size: clamp(1.08rem, 1rem + .35vw, 1.28rem); font-weight: 700 !important; color: #fff; line-height: 1.55; }
.card-header h4 i { color: var(--br-200) !important; }
.card-header .badge { background: rgba(255,255,255,.14) !important; color: #fff !important; border: 1px solid rgba(255,255,255,.3); font-weight: 700; }
.card-body { color: var(--ink-2); }

/* Icon discs inside inner cards */
.card .bg-dark.rounded-circle { background: linear-gradient(135deg, var(--bs-500), var(--bs-800)) !important; box-shadow: var(--sh-brand); width: 56px; height: 56px; display: grid !important; place-items: center; flex: none; padding: 0 !important; }
.card .bg-dark.rounded-circle i { font-size: 1.25rem !important; }

/* Tables */
.table { --bs-table-hover-bg: rgba(40, 121, 122,.04); --bs-table-striped-bg: rgba(247, 240, 225,.8); --bs-table-border-color: var(--line); }
.table > :not(caption) > * > * { padding: .9rem 1rem; }
.table-dark { --bs-table-bg: var(--bs-800); --bs-table-color: #fff; --bs-table-border-color: rgba(255,255,255,.12); }
thead.table-dark th { font-weight: 700; font-size: .96rem; vertical-align: middle; background: linear-gradient(180deg, var(--bs-700), var(--bs-800)); color: #fff; }
.table-responsive { border-radius: var(--r-md); border: 1px solid var(--line); background: #fff; box-shadow: var(--sh-xs); }
.table-responsive > .table { margin-bottom: 0; }
.table-responsive > .table.border { border: 0 !important; }
.table-bordered > :not(caption) > * > * { border-color: var(--line); }
.table td.bg-light { background: var(--iv-100) !important; color: var(--ink); }
.ward-no { display: inline-grid; place-items: center; min-width: 44px; height: 34px; padding: 0 10px; border-radius: 999px; font-family: var(--f-ui); font-weight: 800; color: #fff; background: linear-gradient(135deg, var(--bs-500), var(--bs-800)); }

/* Forms */
.form-label { color: var(--ink); font-weight: 700; margin-bottom: .45rem; }
.form-control, .form-select {
    border: 1.5px solid var(--line-2); border-radius: 14px; padding: .78rem 1rem; font-size: 1.02rem;
    background-color: #fff; color: var(--ink); transition: border-color var(--t-fast), box-shadow var(--t-med);
}
.form-control-lg { border-radius: 16px; padding: .9rem 1.1rem; font-size: 1.1rem; }
.form-control:hover, .form-select:hover { border-color: var(--sg-400); }
.form-control:focus, .form-select:focus { border-color: var(--bs-500); box-shadow: 0 0 0 4px rgba(40, 121, 122,.12); }
.form-control::placeholder { color: #8C9A99; }
.form-control[readonly], .form-control.bg-light { background-color: var(--iv-100) !important; }
.input-group-text { border: 1.5px solid var(--line-2); background: var(--iv-100); color: var(--bs-600); border-radius: 14px 0 0 14px; }
.input-group > .form-control { border-radius: 0 14px 14px 0; }

/* List groups */
.list-group { --bs-list-group-border-color: var(--line); --bs-list-group-color: var(--ink-2); }
.list-group-item.bg-light { background: linear-gradient(90deg, #fff, var(--iv-100)) !important; border: 1px solid var(--line) !important; border-left: 4px solid var(--bs-500) !important; }
.list-group-flush > .list-group-item { background: transparent; }
.list-group-item .fa-check-circle, .list-group-item .fa-chevron-circle-right { color: var(--sg-600) !important; }

/* Accordion */
.accordion {
    --bs-accordion-border-color: var(--line); --bs-accordion-border-radius: 18px; --bs-accordion-inner-border-radius: 17px;
    --bs-accordion-btn-padding-y: 1.15rem; --bs-accordion-btn-padding-x: 1.4rem;
    --bs-accordion-active-color: var(--bs-700);
    --bs-accordion-btn-focus-box-shadow: 0 0 0 4px rgba(40, 121, 122,.12);
    --bs-accordion-body-padding-x: 1.4rem; --bs-accordion-body-padding-y: 1.2rem;
}
.accordion-item { border-radius: 18px !important; box-shadow: var(--sh-xs); transition: box-shadow var(--t-med); }
.accordion-item:hover { box-shadow: var(--sh-sm); }
.accordion-button { font-size: 1.06rem; }
.accordion-button:not(.collapsed) { background: linear-gradient(90deg, var(--bs-100), var(--br-100)); color: var(--bs-700) !important; box-shadow: none; }
.accordion-body { font-size: 1.02rem; line-height: 1.8; }

/* Alerts & badges */
.alert { border-radius: 16px; }
.badge { font-weight: 700; }
.badge.bg-warning { color: var(--bs-950) !important; }
.text-rust { color: var(--bs-500) !important; }
.font-normal { font-weight: 400 !important; }
.letter-spacing-2 { letter-spacing: .5em; }

/* Gallery cards (photo + Swachh pages) — duotone at rest, colour on hover */
.gallery-card-wrapper { border-radius: var(--r-md) !important; transition: transform var(--t-med) var(--ease-out), box-shadow var(--t-med); }
.gallery-card-wrapper:hover { transform: translateY(-6px); box-shadow: var(--sh-md) !important; }
.gallery-card { isolation: isolate; }
.gallery-card img { transition: transform 1s var(--ease-out), filter .6s var(--ease-out); filter: saturate(.85); }
.gallery-card::before { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(135deg, rgba(40, 121, 122,.32), rgba(43, 102, 92,.28)); mix-blend-mode: multiply; transition: opacity .6s; pointer-events: none; }
.gallery-card-wrapper:hover .gallery-card img { transform: scale(1.08); filter: saturate(1.05); }
.gallery-card-wrapper:hover .gallery-card::before { opacity: 0; }
.gallery-card-overlay { position: absolute; inset: 0; z-index: 2; display: grid; place-items: center; background: linear-gradient(180deg, transparent 30%, rgba(8, 28, 29,.65)); opacity: 0; transition: opacity var(--t-med); }
.gallery-card-overlay i { width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center; font-size: 1.2rem; color: var(--bs-950); background: linear-gradient(135deg, var(--br-200), var(--br-400)); transform: scale(.6); transition: transform var(--t-med) var(--ease-spring); }
.gallery-card-wrapper:hover .gallery-card-overlay { opacity: 1; }
.gallery-card-wrapper:hover .gallery-card-overlay i { transform: scale(1); }

/* Lightbox modal */
.modal-content.lightbox { background: var(--bs-900); color: #fff; border: 1px solid rgba(255,255,255,.1) !important; }
.lightbox .modal-header, .lightbox .modal-footer { background: linear-gradient(90deg, var(--bs-950), var(--bs-800)); border-color: rgba(255,255,255,.1) !important; }
.lightbox .modal-title i { color: var(--br-400) !important; }
.btn-lightbox { display: inline-flex; align-items: center; gap: .4rem; background: linear-gradient(135deg, var(--br-200), var(--br-400)); color: var(--bs-950) !important; border: 0; border-radius: 999px; font-weight: 700; padding: .45rem 1.1rem; text-decoration: none; }
.modal-backdrop.show { opacity: .7; }

/* Prose helpers on inner pages */
.note-callout { padding: 16px 20px; border-radius: 16px; background: linear-gradient(90deg, var(--br-100), #fff); border: 1px solid var(--br-200); border-left: 4px solid var(--br-500); }
.note-callout a { color: var(--bs-600); font-weight: 700; }
.sr-heading { color: var(--bs-700) !important; font-family: var(--f-display); }
.video-fallback { background: radial-gradient(400px 200px at 80% 0%, rgba(201, 171, 118,.3), transparent 60%), linear-gradient(135deg, var(--bs-800), var(--bs-950)); cursor: pointer; }
.video-fallback .play { width: 64px; height: 64px; border-radius: 50%; display: grid; place-items: center; color: var(--bs-950); background: linear-gradient(135deg, var(--br-200), var(--br-400)); box-shadow: 0 0 0 10px rgba(243, 229, 195,.12); transition: transform var(--t-med) var(--ease-spring); }
.video-fallback:hover .play { transform: scale(1.1); }

/* Grievance tracking / complaint detail blocks */
.dkl-track-card, .dkl-details-card { background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--sh-md); overflow: hidden; margin-bottom: 30px; }
.dkl-track-header, .dkl-details-header {
    position: relative; overflow: hidden; color: #fff; padding: 1.15rem 1.6rem;
    background: radial-gradient(500px 200px at 100% 0%, rgba(201, 171, 118,.35), transparent 60%), linear-gradient(120deg, var(--bs-600), var(--bs-800));
}
.dkl-details-header { text-align: center; }
.dkl-track-header h4, .dkl-details-header h4 { font-family: var(--f-display); font-size: clamp(1.08rem, 1rem + .35vw, 1.28rem); font-weight: 700; margin: 0; color: #fff; line-height: 1.55; }
.dkl-track-header h4 i, .dkl-details-header h4 i { color: var(--br-200); }
.dkl-track-table thead th { background: var(--iv-100) !important; color: var(--bs-800) !important; font-weight: 700; padding: 14px 12px; border-bottom: 2px solid var(--br-400) !important; }
.dkl-track-table tbody td { padding: 12px; vertical-align: middle; color: var(--ink); }
.dkl-details-table { width: 100%; border-collapse: collapse; }
.dkl-details-table th { background: var(--iv-100); color: var(--bs-800); font-weight: 700; padding: 14px 16px; border: 1px solid var(--line); width: 22%; vertical-align: middle; }
.dkl-details-table td { background: #fff; color: var(--ink); font-weight: 500; padding: 14px 16px; border: 1px solid var(--line); width: 28%; vertical-align: middle; }
.dkl-auto-expand-textarea { min-height: 120px; resize: vertical; line-height: 1.6; }

/* Property page counters */
.cards-container { display: flex; justify-content: center; gap: 24px; flex-wrap: wrap; }
.kpi-card { width: 260px; padding: 30px 20px; border-radius: var(--r-lg); text-align: center; color: #fff; box-shadow: var(--sh-md); background: linear-gradient(135deg, var(--bs-500), var(--bs-800)); }
.kpi-card.water-card { background: linear-gradient(135deg, var(--sg-500), var(--sg-800)); }
.kpi-card h3 { color: #fff; font-size: 1.3rem; }
.kpi-card p { font-family: var(--f-ui); font-size: 3rem; font-weight: 800; margin: 0; }

/* --------------------------------------------------------------------------
   21. REVEAL SYSTEM
   -------------------------------------------------------------------------- */
.js [data-reveal] {
    opacity: 0; transform: translate3d(0, 32px, 0); filter: blur(6px);
    transition: opacity 1s var(--ease-out), transform 1s var(--ease-out), filter 1s var(--ease-out);
    transition-delay: calc(var(--i, 0) * 90ms);
}
.js [data-reveal="left"] { transform: translate3d(-40px, 0, 0); }
.js [data-reveal="right"] { transform: translate3d(40px, 0, 0); }
.js [data-reveal="scale"] { transform: scale(.94); }
.js [data-reveal="fade"] { transform: none; }
/* Side-slide reveals would push content past the screen edge on narrower layouts — rise instead */
@media (max-width: 1199.98px) {
    .js [data-reveal="left"], .js [data-reveal="right"] { transform: translate3d(0, 28px, 0); }
}
.js [data-reveal].is-in, .reveal-all [data-reveal] { opacity: 1; transform: none; filter: none; }
.reveal-all .split .wi { transform: none !important; }

/* --------------------------------------------------------------------------
   22. KEYFRAMES
   -------------------------------------------------------------------------- */
@property --ang { syntax: '<angle>'; initial-value: 0deg; inherits: false; }
@property --p { syntax: '<number>'; initial-value: 0; inherits: false; }
@keyframes angSpin { to { --ang: 360deg; } }
@keyframes ringSpin { to { transform: rotate(360deg); } }
@keyframes orbFloat { 0%, 100% { transform: translate(0, 0); } 33% { transform: translate(20px, -26px); } 66% { transform: translate(-16px, 14px); } }
@keyframes beamSweep { 0% { transform: translateX(-40%) rotate(18deg); opacity: 0; } 20%, 60% { opacity: 1; } 100% { transform: translateX(260%) rotate(18deg); opacity: 0; } }
@keyframes headerBeam { 0%, 55% { left: -30%; } 100% { left: 130%; } }
@keyframes floatY { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-12px); } }
@keyframes livePulse { 0% { transform: scale(.7); opacity: 1; } 100% { transform: scale(1.6); opacity: 0; } }
@keyframes marquee { to { transform: translateX(-50%); } }
@keyframes gradShift { 0%, 100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } }
@keyframes scrollWheel { 0% { transform: translate(-50%, 0); opacity: 1; } 100% { transform: translate(-50%, 12px); opacity: 0; } }
@keyframes fadeSlideIn { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

/* --------------------------------------------------------------------------
   23. RESPONSIVE
   -------------------------------------------------------------------------- */
@media (max-width: 1199.98px) {
    .util-date { display: none; }
    .bento { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .tile--feature { grid-row: span 1; }
    .stat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .footer-top { grid-template-columns: 1fr 1fr; }
}
@media (min-width: 768px) and (max-width: 991.98px) {
    /* Tablets: keep the CM caption on single lines beside the photo */
    .masthead-inner { gap: 16px; }
    .cm-card { gap: 12px; }
    .cm-card strong { font-size: 1rem; white-space: nowrap; }
    .cm-card span { font-size: .76rem; white-space: nowrap; }
}
@media (max-width: 991.98px) {
    .util-skip span { display: none; }
    .util-skip { padding: 6px 10px; }
    .heritage-grid { grid-template-columns: 1fr; }
    .heritage-poster { max-width: 760px; width: 100%; margin: 0 auto; }
    .cc-grid { grid-template-columns: 1fr 1fr; }
    .cc-card--hero { grid-column: 1 / -1; }
    .plan-grid { grid-template-columns: 1fr; }
}
@media (max-width: 767.98px) {
    .util-inner { flex-wrap: wrap; justify-content: center; gap: 8px; padding-top: 7px; padding-bottom: 7px; }
    .util-left { display: none; }
    .util-login span { display: none; }
    .util-login { padding: 6px 11px; }
    /* Phone masthead, as on government portals: emblem · name · CM photo */
    .masthead-inner { grid-template-columns: auto minmax(0, 1fr) auto; gap: 10px; padding-top: 12px; padding-bottom: 12px; }
    .emblem, .cm-frame { width: clamp(46px, 14vw, 60px); }
    .emblem::after, .cm-frame::after { inset: -4px; }
    .brand-title { white-space: normal; font-size: clamp(1.02rem, 5.3vw, 1.6rem); line-height: 1.4; }
    .brand-sub { font-size: clamp(.72rem, 3.3vw, .92rem); gap: .3rem; white-space: nowrap; }
    .masthead-aside { display: flex; gap: 0; }
    .cm-card { gap: 0; }
    .cm-card figcaption { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
    .bento { grid-template-columns: 1fr; grid-auto-rows: auto; gap: 14px; }
    .tile--feature, .tile--wide { grid-column: auto; }
    .tile:not(.tile--feature) { display: grid; grid-template-columns: 52px minmax(0, 1fr) auto; align-items: center; gap: 2px 14px; padding: 18px; }
    .tile:not(.tile--feature) .tile-ic { grid-row: 1 / span 2; width: 52px; height: 52px; font-size: 1.15rem; border-radius: 16px; }
    .tile:not(.tile--feature) h3 { grid-column: 2; font-size: 1.1rem; }
    .tile:not(.tile--feature) p { grid-column: 2; font-size: .94rem; line-height: 1.55; }
    .tile:not(.tile--feature) .tile-go { grid-column: 3; grid-row: 1 / span 2; font-size: 0; margin: 0; padding: 0; }
    .tile:not(.tile--feature) .tile-go .arr { font-size: .9rem; }
    .tile--wide .tile-body { grid-column: 2; grid-row: 1 / span 2; }
    .tile--wide h3 { font-size: 1.05rem; }
    .steps { grid-template-columns: 1fr; }
    .stat-grid { grid-template-columns: 1fr 1fr; gap: 12px; }
    .stat { padding: 18px 16px; border-radius: 20px; }
    .stat-ic { width: 38px; height: 38px; border-radius: 12px; margin-bottom: 14px; }
    .stat-num { font-size: clamp(1.55rem, 7vw, 2.1rem); }
    .stat-label { font-size: .96rem; margin-top: 8px; }
    .stat-note { font-size: .82rem; }
    .profile-grid { grid-template-columns: minmax(0, 400px); }
    .fact-grid { grid-template-columns: 1fr; }
    .cc-grid { grid-template-columns: 1fr; }
    .cc-card--hero { grid-column: auto; }
    .hp-frame { padding: 9px; border-radius: 18px; }
    .hp-frame::before { inset: 3px; border-radius: 15px; --l: 18px; }
    .hp-mat { border-radius: 9px; box-shadow: 0 0 0 1px var(--br-500), 0 0 0 3px #fff, 0 0 0 4px var(--line-2); }
    .hp-zoom { opacity: 1; transform: none; width: 34px; height: 34px; right: 17px; top: 17px; bottom: auto; }
    .hp-timeline { grid-template-columns: 1fr; gap: 2px; margin-top: 16px; padding: 8px; }
    .hp-arrow { justify-self: start; margin-left: 17px; width: 28px; height: 28px; transform: rotate(90deg); }
    .hp-era .ic { width: 38px; height: 38px; }
    .notice-all { display: none; }
    .notice-label .nl-tx, .notice-label .live-dot { display: none; }
    .notice-label { padding: 0 12px; }
    .notice-bar { min-height: 58px; }
    .notice-item { font-size: .98rem; }
    .footer-top { grid-template-columns: 1fr; }
    .footer-bottom-inner { justify-content: center; text-align: center; padding-right: 0; }
    .footer-bottom-bar { padding-bottom: 80px; }
    .notice-label span { display: none; }
    .notice-label { padding: 0 24px 0 18px; }
    .float-dock { right: 12px; bottom: 12px; }
    .dock-pay { padding: 6px; }
    .dock-pay .dock-tx { display: none; }
    .plan { flex-direction: column; }
    .plan-date { display: flex; align-items: baseline; gap: 8px; width: auto; padding: 10px 16px; }
    .plan-date span, .plan-date small { margin-top: 0; }
    .dkl-details-table th, .dkl-details-table td { display: block; width: 100%; }
    .card-header.d-flex { flex-wrap: wrap; gap: 10px; }
    .section-head-row { align-items: flex-start; }
}
/* Citizen tax table actions: one line on wide screens, wrap on phones */
.cd-actions { white-space: nowrap; min-width: 320px; }
.cd-actions-row { flex-wrap: nowrap; }
@media (max-width: 767.98px) {
    .cd-actions { white-space: normal; min-width: 0; }
    .cd-actions-row { flex-wrap: wrap; justify-content: flex-start !important; max-width: 100%; }
    .cd-actions-row > .btn { white-space: normal !important; max-width: 100%; text-align: left; }
}

/* Phones: data tables become labelled cards (labels set by sirauli-motion.js §10) */
@media (max-width: 767.98px) {
    table.sr-stack { border: 0 !important; background: transparent; margin-bottom: 0; }
    table.sr-stack thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
    table.sr-stack, table.sr-stack tbody, table.sr-stack tr, table.sr-stack td { display: block; width: 100% !important; }
    table.sr-stack tr {
        margin: 0 0 12px; border: 1px solid var(--line); border-radius: 16px; background: #fff;
        overflow: hidden; box-shadow: var(--sh-xs);
    }
    table.sr-stack tr:last-child { margin-bottom: 0; }
    table.sr-stack > tbody > tr > td {
        display: grid; grid-template-columns: minmax(92px, 38%) minmax(0, 1fr); gap: 4px 12px; align-items: start;
        padding: 10px 14px !important; text-align: left !important; white-space: normal; overflow-wrap: anywhere;
        border: 0 !important; border-bottom: 1px dashed var(--line) !important; box-shadow: none !important; background: transparent !important;
    }
    table.sr-stack > tbody > tr > td:last-child { border-bottom: 0 !important; }
    table.sr-stack > tbody > tr > td > * { justify-self: start; max-width: 100%; }
    table.sr-stack > tbody > tr > td::before {
        content: attr(data-label); font-weight: 700; font-size: .84rem; line-height: 1.5; color: var(--ink-3);
    }
    table.sr-stack > tbody > tr.sr-stack-full > td { display: block; text-align: center !important; padding: 18px 14px !important; }
    table.sr-stack > tbody > tr.sr-stack-full > td::before { content: none; }
    .table-responsive:has(> table.sr-stack) { overflow: visible; }
}
@media (max-width: 420px) {
    .a11y-contrast, .util-skip { display: none; }
    .profile-panel { padding: 22% 20px 20px; }
}

/* --------------------------------------------------------------------------
   24. REDUCED MOTION & PRINT
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
    .js [data-reveal] { opacity: 1; transform: none; filter: none; }
    .js .split .wi { transform: none; }
    .notice-track, .gallery-track { animation: none !important; }
    .gallery-rail { overflow-x: auto; }
}
@media print {
    .util-bar, .primary-nav, .float-dock, .scroll-progress, .fx-layer, .jaali-layer { display: none !important; }
    .gov-breadcrumb-bar { background: none !important; color: #000 !important; padding: 12px 0 !important; }
    .breadcrumb-title { color: #000 !important; }
}