/* ==================================================================
   Thiruvanchoor Radhakrishnan — Pure HTML/CSS Static Site
   Palette: Forest Green #0F4C3A / Gold #D4AF37 / Cream #FDFBF7
   Fonts: Playfair Display (serif), Manrope (sans), Dancing Script (signature)
   ================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,500;0,600;0,700;0,800;0,900;1,400;1,600&family=Manrope:wght@300;400;500;600;700;800&family=Dancing+Script:wght@500;600;700&family=Noto+Sans+Malayalam:wght@400;500;600;700&display=swap');

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

:root {
    --forest: #0F4C3A;
    --forest-deep: #0A3528;
    --forest-light: #176B52;
    --gold: #D4AF37;
    --gold-light: #E6C758;
    --gold-dark: #A8861E;
    --cream: #FDFBF7;
    --cream-deep: #F6F1E7;
    --ink: #1A1A1A;
    --ink-soft: rgba(26, 26, 26, 0.75);
    --ink-mute: rgba(26, 26, 26, 0.55);
    --border: #E5E0D8;
    --radius: 12px;
}

html {
    scroll-behavior: smooth;
    /* `clip` rather than `hidden`. overflow-x:hidden forces overflow-y to
       compute as `auto`, which turns html/body into a scroll container — and a
       position:sticky child then anchors to that container instead of the
       viewport, so it silently never sticks. `clip` suppresses horizontal
       overflow without creating a scroll container, so the page sidebars stay
       pinned while you scroll. */
    overflow-x: clip;
}

body {
    font-family: 'Manrope', system-ui, sans-serif;
    color: var(--ink);
    background: var(--cream);
    line-height: 1.6;
    overflow-x: clip;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* ============ PAGE SECTION SIDEBAR (COMPACT & FULLY RESPONSIVE) ============ */
.page-section-sidebar,
.hero-section-sidebar {
    position: sticky;
    top: 95px;
    align-self: flex-start;
    z-index: 30;
    background: #ffffff;
    border: none;
    border-radius: 14px;
    padding: 16px 14px;
    box-shadow: 0 4px 18px -4px rgba(0, 0, 0, 0.04);
    margin-bottom: 20px;
    max-width: 255px;
    width: 100%;
}

.hero-section-sidebar.dark-theme {
    background: rgba(13, 40, 59, 0.85);
    backdrop-filter: blur(14px);
    border: none;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
}

/* ============ UDF SIGNATURE CYAN COLOR BRANDING UTILITIES ============ */
:root {
    --udf-cyan: #0284C7;
    --udf-cyan-light: #E0F2FE;
    --udf-cyan-glow: rgba(2, 132, 199, 0.15);
}

.udf-badge {
    background-color: rgba(2, 132, 199, 0.12);
    color: #0284C7;
    border: 1px solid rgba(2, 132, 199, 0.3);
    font-weight: 700;
}

.udf-card {
    border-top: 3px solid #0284C7 !important;
    transition: all 0.25s ease;
}

.udf-card:hover {
    box-shadow: 0 10px 25px -5px rgba(2, 132, 199, 0.18), 0 8px 10px -6px rgba(2, 132, 199, 0.1) !important;
}

.udf-text {
    color: #0284C7 !important;
}

.udf-bg {
    background-color: #0284C7 !important;
    color: #ffffff !important;
}

.udf-border {
    border-color: #0284C7 !important;
}

.udf-tricolor-accent {
    position: relative;
}

.udf-tricolor-accent::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, #FF9933 0%, #FFFFFF 35%, #138808 70%, #0284C7 100%);
    border-top-left-radius: inherit;
    border-top-right-radius: inherit;
}

.inc-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 10px;
    border-radius: 9999px;
    background: linear-gradient(135deg, rgba(255, 153, 51, 0.15) 0%, rgba(2, 132, 199, 0.15) 100%);
    border: 1px solid rgba(2, 132, 199, 0.25);
    color: #0284C7;
    font-weight: 700;
    font-size:12px;
}

/* ============ CONGRESS / UDF PARTY ICON COLOR SCHEME (GREEN -> SAFFRON ORANGE HOVER) ============ */
:root {
    --inc-green: #138808;
    --inc-orange: #FF9933;
}

.party-icon,
.page-section-sidebar .sidebar-nav i,
.hero-section-sidebar .sidebar-nav i,
.why-ic i,
.pillar-ic i,
.happen-ic i,
.side-card h3 .h-ic i,
.eval-ic i,
.hero-feat .fi i {
    color: #138808 !important;
    transition: color 0.25s ease, transform 0.25s ease;
}

.sidebar-link:hover i,
.why-card:hover .why-ic i,
.pillar:hover .pillar-ic i,
.happen-item:hover .happen-ic i,
.hero-feat:hover .fi i,
.eval-item:hover .eval-ic i,
.group:hover .party-icon,
.party-icon:hover {
    color: #FF9933 !important;
}

.hero-section-sidebar.dark-theme .sidebar-link i {
    color: #10B981 !important;
}

.hero-section-sidebar.dark-theme .sidebar-link:hover i {
    color: #F97316 !important;
}

/* ============ PARTY COLOR MAPPING: BG #0f4c3a & HOVER #ec6b1d ============ */
.bg-\[\#06131c\],
[class*="bg-[#06131c]"] {
    background-color: #0f4c3a !important;
    transition: background-color 0.25s ease, color 0.25s ease, transform 0.25s ease;
}

.bg-\[\#06131c\]:hover,
[class*="bg-[#06131c]"]:hover,
.hover\:bg-\[\#06131c\]:hover,
:hover > .bg-\[\#06131c\],
.group:hover .bg-\[\#06131c\] {
    background-color: #ec6b1d !important;
    color: #ffffff !important;
}

/* ============ PARTY COLOR SYSTEM FOR TABS AND ICONS (#0f4c3a & HOVER/ACTIVE #ec6b1d) ============ */
:root {
    --party-green: #0f4c3a;
    --party-orange: #ec6b1d;
}

/* 1. Global Icons */
.party-icon,
.page-section-sidebar .sidebar-nav i,
.hero-section-sidebar .sidebar-nav i,
.why-ic i,
.pillar-ic i,
.happen-ic i,
.side-card h3 .h-ic i,
.eval-ic i,
.hero-feat .fi i,
.stat-ic i {
    color: #0f4c3a;
    transition: color 0.25s ease, background-color 0.25s ease, transform 0.25s ease;
}

/* Icon Hover State */
*:hover > i,
.group:hover i,
a:hover i,
button:hover i,
.sidebar-link:hover i,
.why-card:hover .why-ic i,
.pillar:hover .pillar-ic i,
.happen-item:hover .happen-ic i,
.hero-feat:hover .fi i,
.eval-item:hover .eval-ic i,
.party-icon:hover {
    color: #ec6b1d !important;
}

/* 2. Tabs & Filter Buttons */
.tab-btn,
.nav-tab,
.tab-item,
.tab-link,
.filter-btn,
.category-pill,
.sector-pill {
    background-color: #f1f5f9;
    color: #0f4c3a;
    border: 1px solid #cbd5e1;
    transition: all 0.25s ease;
    font-weight: 700;
}

.tab-btn i,
.nav-tab i,
.tab-item i,
.tab-link i,
.filter-btn i,
.category-pill i,
.sector-pill i {
    color: #0f4c3a;
}

.tab-btn:hover,
.nav-tab:hover,
.tab-item:hover,
.tab-link:hover,
.filter-btn:hover,
.category-pill:hover,
.sector-pill:hover,
.tab-btn.active,
.nav-tab.active,
.tab-item.active,
.tab-link.active,
.filter-btn.active,
.category-pill.active,
.sector-pill.active,
.sidebar-link.active,
.sidebar-link:hover {
    background-color: #ec6b1d !important;
    color: #ffffff !important;
    border-color: #ec6b1d !important;
}

.tab-btn:hover i,
.nav-tab:hover i,
.tab-item:hover i,
.tab-link:hover i,
.filter-btn:hover i,
.category-pill:hover i,
.sector-pill:hover i,
.tab-btn.active i,
.nav-tab.active i,
.tab-item.active i,
.tab-link.active i,
.filter-btn.active i,
.category-pill.active i,
.sector-pill.active i,
.sidebar-link.active i,
.sidebar-link:hover i {
    color: #ffffff !important;
}

/* ============ UNIFIED INNER PAGE HERO STANDARDS ============ */
.inner-page-hero,
.page-header.inner-page-hero,
.hero.inner-page-hero,
.hero-card.inner-page-hero,
.hero-fame.inner-page-hero {
    position: relative;
    overflow: hidden;
    min-height: 320px !important;
    display: flex;
    align-items: center;
    padding-top: 110px !important;
    padding-bottom: 50px !important;
}

.page-section-sidebar .sidebar-title,
.hero-section-sidebar .sidebar-title {
    font-family: 'Playfair Display', Georgia, serif;
    font-size: 15px;
    font-weight: 700;
    color: #06131c;
    margin-bottom: 2px;
    display: flex;
    align-items: center;
    gap: 7px;
}

.hero-section-sidebar.dark-theme .sidebar-title {
    color: #ffffff;
}

.page-section-sidebar .sidebar-subtitle,
.hero-section-sidebar .sidebar-subtitle {
    font-size:12px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #64748b;
    font-weight: 600;
    margin-bottom: 10px;
    padding-bottom: 8px;
    border-bottom: 1px solid #f1f5f9;
}

.hero-section-sidebar.dark-theme .sidebar-subtitle {
    color: rgba(255, 255, 255, 0.6);
    border-bottom-color: rgba(255, 255, 255, 0.1);
}

.page-section-sidebar .sidebar-nav,
.hero-section-sidebar .sidebar-nav {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.page-section-sidebar .sidebar-link,
.hero-section-sidebar .sidebar-link {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    border-radius: 8px;
    font-size: 12.5px;
    font-weight: 600;
    color: #334155;
    transition: all 0.2s ease;
    border-left: 3px solid transparent;
}

.hero-section-sidebar.dark-theme .sidebar-link {
    color: rgba(255, 255, 255, 0.8);
}

.page-section-sidebar .sidebar-link:hover,
.hero-section-sidebar .sidebar-link:hover {
    background-color: #f8fafc;
    color: #06131c;
}

.hero-section-sidebar.dark-theme .sidebar-link:hover {
    background-color: rgba(255, 255, 255, 0.1);
    color: #ffffff;
}

.page-section-sidebar .sidebar-link.active,
.hero-section-sidebar .sidebar-link.active {
    background-color: #f0fdf4;
    color: #064e3b;
    border-left-color: #10b981;
    font-weight: 700;
}

.hero-section-sidebar.dark-theme .sidebar-link.active {
    background-color: rgba(212, 175, 55, 0.2);
    color: #D4AF37;
    border-left-color: #D4AF37;
    font-weight: 700;
}

.page-section-sidebar .sidebar-link i,
.hero-section-sidebar .sidebar-link i {
    width: 14px;
    text-align: center;
    color: #64748b;
    transition: color 0.2s ease;
}

.hero-section-sidebar.dark-theme .sidebar-link i {
    color: rgba(255, 255, 255, 0.5);
}

.page-section-sidebar .sidebar-link.active i,
.hero-section-sidebar .sidebar-link.active i {
    color: #10b981;
}

.hero-section-sidebar.dark-theme .sidebar-link.active i {
    color: #D4AF37;
}

.page-section-sidebar .sidebar-link:hover i,
.hero-section-sidebar .sidebar-link:hover i {
    color: #06131c;
}

.hero-section-sidebar.dark-theme .sidebar-link:hover i {
    color: #ffffff;
}

.page-section-sidebar .sister-pages-divider,
.hero-section-sidebar .sister-pages-divider {
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid #f1f5f9;
}

.hero-section-sidebar.dark-theme .sister-pages-divider {
    border-top-color: rgba(255, 255, 255, 0.1);
}

.page-section-sidebar .sister-page-link,
.hero-section-sidebar .sister-page-link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 6px 10px;
    border-radius: 6px;
    font-size:12px;
    font-weight: 600;
    color: #475569;
    transition: all 0.2s ease;
}

.hero-section-sidebar.dark-theme .sister-page-link {
    color: rgba(255, 255, 255, 0.7);
}

.page-section-sidebar .sister-page-link:hover,
.hero-section-sidebar .sister-page-link:hover {
    background-color: #f8fafc;
    color: #0f172a;
}

.hero-section-sidebar.dark-theme .sister-page-link:hover {
    background-color: rgba(255, 255, 255, 0.1);
    color: #ffffff;
}

/* Responsive Mobile Navigation Bar (< 1024px) */
@media (max-width: 1023px) {

    .page-section-sidebar,
    .hero-section-sidebar {
        max-width: 100%;
        position: sticky;
        top: 85px;
        z-index: 30;
        padding: 8px 12px;
        margin-bottom: 16px;
        border-radius: 12px;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
    }

    .page-section-sidebar .sidebar-title,
    .hero-section-sidebar .sidebar-title {
        font-size: 13px;
        margin-bottom: 0;
    }

    .page-section-sidebar .sidebar-subtitle,
    .hero-section-sidebar .sidebar-subtitle,
    .page-section-sidebar .sister-pages-divider,
    .hero-section-sidebar .sister-pages-divider {
        display: none;
    }

    .page-section-sidebar .sidebar-nav,
    .hero-section-sidebar .sidebar-nav {
        flex-direction: row;
        overflow-x: auto;
        white-space: nowrap;
        scrollbar-width: none;
        -ms-overflow-style: none;
        gap: 6px;
        padding-top: 6px;
        padding-bottom: 2px;
        -webkit-overflow-scrolling: touch;
    }

    .page-section-sidebar .sidebar-nav::-webkit-scrollbar,
    .hero-section-sidebar .sidebar-nav::-webkit-scrollbar {
        display: none;
    }

    .page-section-sidebar .sidebar-link,
    .hero-section-sidebar .sidebar-link {
        flex-shrink: 0;
        padding: 5px 12px;
        font-size:12px;
        border-left: none;
        border-bottom: 2px solid transparent;
        border-radius: 20px;
        background-color: #f1f5f9;
    }

    .hero-section-sidebar.dark-theme .sidebar-link {
        background-color: rgba(255, 255, 255, 0.08);
    }

    .page-section-sidebar .sidebar-link.active,
    .hero-section-sidebar .sidebar-link.active {
        border-left: none;
        border-bottom-color: #10b981;
        background-color: #d1fae5;
    }

    .hero-section-sidebar.dark-theme .sidebar-link.active {
        border-left: none;
        border-bottom-color: #D4AF37;
        background-color: rgba(212, 175, 55, 0.25);
    }
}



h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: 'Playfair Display', Georgia, serif;
    line-height: 1.2;
    color: var(--forest);
}

/* Unified Responsive Typography System */
h1,
.h1-text {
    font-family: 'Playfair Display', Georgia, serif;
    font-size: clamp(2rem, 4vw, 3.25rem);
    font-weight: 700;
    line-height: 1.15;
    color: var(--forest);
    letter-spacing: -0.01em;
}

h2,
.h2-text {
    font-family: 'Playfair Display', Georgia, serif;
    font-size: clamp(1.5rem, 3.2vw, 2.25rem);
    font-weight: 700;
    line-height: 1.25;
    color: var(--forest);
}

h3,
.h3-text {
    font-family: 'Playfair Display', Georgia, serif;
    font-size: clamp(1.15rem, 2.2vw, 1.5rem);
    font-weight: 600;
    line-height: 1.3;
    color: var(--forest);
}

h4,
.h4-text {
    font-family: 'Playfair Display', Georgia, serif;
    font-size: clamp(1rem, 1.5vw, 1.25rem);
    font-weight: 600;
    line-height: 1.35;
}

a {
    color: inherit;
    text-decoration: none;
    transition: color .2s;
}

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

button,
input,
select,
textarea {
    font-family: inherit;
    font-size: inherit;
}

::selection {
    background: var(--gold);
    color: var(--forest-deep);
}


/* When body has lang-ml class, switch fonts */
body.lang-ml,
body.lang-ml *,
body.lang-ml .font-sans,
body.lang-ml .font-serif,
body.lang-ml .font-display {
    font-family: 'Noto Sans Malayalam', 'Manrope', sans-serif !important;
}

body.lang-ml h1,
body.lang-ml h2,
body.lang-ml h3,
body.lang-ml h4,
body.lang-ml h5,
body.lang-ml h6,
body.lang-ml .h1-text,
body.lang-ml .h2-text,
body.lang-ml .h3-text {
    font-family: 'Noto Sans Malayalam', 'Playfair Display', serif !important;
}

/* Visibility helpers (controlled by JS for language) */
.ml-only,
.ml-only-block {
    display: none;
}

body.lang-ml .en-only {
    display: none;
}

body.lang-ml .ml-only {
    display: inline;
}

body.lang-ml .ml-only-block {
    display: block;
}

.section-body {
    padding: 24px 0 40px;
    overflow-x: hidden;
}

@media (max-width: 640px) {
    .section-body .process-circle {
        height: 64px;
        width: 64px;
    }

    .section-body .nav-item {
        min-height: 72px;
    }
}

.container {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 24px;
}

.section {
    padding: 48px 0;
}

.section-tight {
    padding: 32px 0;
}

@media (min-width: 768px) {
    .section {
        padding: 47px 0;
    }

    .section-tight {
        padding: 48px 0;
    }
}


.gold-divider {
    height: 2px;
    width: 96px;
    background: linear-gradient(90deg, transparent, var(--gold) 30%, var(--gold) 70%, transparent);
    margin: 16px 0;
}

.gold-divider.center {
    margin-left: auto;
    margin-right: auto;
}

/* ================== BUTTONS ================== */
.btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 24px;
    border-radius: 999px;
    font-weight: 500;
    font-size: 14px;
    border: none;
    cursor: pointer;
    text-decoration: none;
    transition: all .3s ease;
    white-space: nowrap;
}

.btn-gold {
    background: var(--gold);
    color: var(--ink);
}

.btn-gold:hover {
    background: var(--gold-light);
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(212, 175, 55, .35);
}

.btn-outline-light {
    border: 1px solid rgba(255, 255, 255, .3);
    color: white;
    background: transparent;
}

.btn-outline-light:hover {
    background: rgba(255, 255, 255, .08);
}

.btn-dark {
    background: #0f4c3a;
    color: white;
}

.btn-dark:hover {
    background: #ec6b1d;
    transform: translateY(-2px);
}

.btn-sm {
    padding: 8px 18px;
    font-size: 13px;
}

.btn .arrow {
    transition: transform .3s;
}

.btn:hover .arrow {
    transform: translateX(4px);
}

/* ================== NAVBAR ================== */
.navbar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 100;
    background: rgba(255, 255, 255, .92);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid rgba(229, 224, 216, .5);
}

.journey-icon {
    max-width: 50%;
}

.nav-inner {
    height: 80px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 24px;
}

.brand {
    display: flex;
    align-items: center;
    gap: 12px;
}

.brand-mark {
    width: 48px;
    height: 48px;
    border: 2px solid var(--gold);
    border-radius: 50%;
    display: grid;
    place-items: center;
    color: var(--gold);
    font-family: 'Playfair Display', serif;
    font-weight: 700;
}

.brand-text {
    line-height: 1.1;
}

.brand-text .b1 {
    font-family: 'Playfair Display', serif;
    font-weight: 600;
    font-size: 13px;
    color: var(--forest);
    letter-spacing: .15em;
}

.brand-text .b2 {
    font-family: 'Playfair Display', serif;
    font-size:12px;
    color: var(--ink-soft);
    letter-spacing: .2em;
}

.nav-links {
    display: flex;
    gap: 24px;
    align-items: center;
}

.nav-links a {
    font-size: 14px;
    font-weight: 500;
    color: var(--ink);
    padding: 8px 2px;
    border-bottom: 2px solid transparent;
}

.nav-links a:hover {
    color: var(--forest);
}

.nav-links a.active {
    color: var(--gold);
}

.nav-right {
    display: flex;
    align-items: center;
    gap: 12px;
}

.icon-btn {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 1px solid var(--border);
    background: white;
    cursor: pointer;
    display: grid;
    place-items: center;
    color: var(--ink-soft);
}

.icon-btn:hover {
    color: var(--forest);
    border-color: var(--gold);
}

.lang-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    font-size: 13px;
    font-weight: 600;
    border-radius: 999px;
    border: 1px solid var(--border);
    background: white;
    cursor: pointer;
    color: var(--ink-soft);
}

.lang-pill:hover {
    color: var(--forest);
    border-color: var(--gold);
}

.menu-toggle {
    display: none;
    width: 42px;
    height: 42px;
    background: transparent;
    border: none;
    cursor: pointer;
    position: relative;
    z-index: 1001;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.menu-toggle .bar {
    display: block;
    width: 24px;
    height: 3px;
    background: #0F4C3A;
    border-radius: 2px;
    margin: 3px 0;
    transition: .3s ease;
}

.mobile-menu {
    display: none;
    border-top: 1px solid var(--border);
    background: white;
    padding: 16px 24px;
}

.mobile-menu.open {
    display: block;
}

.mobile-menu a {
    display: block;
    padding: 12px 0;
    border-bottom: 1px solid var(--border);
    font-size: 15px;
}

@media (min-width: 1024px) {
    .nav-links {
        display: flex;
    }

    .menu-toggle {
        display: none;
    }

    .mobile-menu {
        display: none !important;
    }

    .nav-links {
        display: flex;
        align-items: center;
        gap: 18px;
    }

}

/* ================== HERO ================== */
.hero {
    position: relative;
    overflow: hidden;
    background: var(--forest-deep);
    color: white;
    padding: 140px 60px 90px;
    min-height: 90vh;
    display: flex;
    align-items: center;
}

.hero-bg {
    position: absolute;
    inset: 0;
    opacity: 1;
    /* Keeping opacity at 1 since we handle transparency directly in the gradient layers */
    background-image:
        /* Radial gradient to create the subtle spotlight effect behind the subject */
        radial-gradient(circle at 80% 50%, rgba(26, 24, 21, 0.45) 0%, rgb(7 14 20 / 95%) 80%),
        /* Linear gradient to mimic the left-to-right dark falloff */
        linear-gradient(90deg, rgba(11, 11, 11, 0.98) 0%, rgba(20, 18, 16, 0.85) 50%, rgba(28, 25, 23, 0.4) 100%), url("../images/Kerala_Niyamasabha.9f07e9c1d77a.jpg");
    background-size: cover;
    background-position: center;
    z-index: 0;
}

.hero-grain {
    position: absolute;
    inset: 0;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.4'/%3E%3C/svg%3E");
    opacity: .07;
    mix-blend-mode: overlay;
    pointer-events: none;
    z-index: 1;
}

.hero-inner {
    z-index: 2;
    display: grid;
    gap: 40px;
    align-items: center;
}

@media (min-width: 1024px) {
    .hero-inner {
        grid-template-columns: 0.5fr 1.5fr;
    }
}

.eyebrow {
    color: var(--gold);
    font-family: 'Playfair Display', serif;
    letter-spacing: .3em;
    font-size: 13px;
    margin-bottom: 12px;
    text-transform: uppercase;
}

.hero h1 {
    font-size: clamp(36px, 7vw, 64px);
    font-weight: 700;
    color: white;
    letter-spacing: -.02em;
    line-height: 1.02;
}

.hero .subtitle {
    color: var(--gold-light);
    font-style: italic;
    font-family: 'Playfair Display', serif;
    font-size: 24px;
    margin-top: 18px;
}

.hero .meta {
    color: rgba(255, 255, 255, .85);
    font-size: 14px;
    margin-top: 6px;
}

.stat-strip {
    margin-top: 40px;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 22px;
}

@media (min-width: 768px) {
    .stat-strip {
        grid-template-columns: repeat(4, 1fr);
    }
}

.stat-item {
    display: flex;
    align-items: center;
    gap: 12px;
}

.stat-ic {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 1px solid rgba(212, 175, 55, .45);
    color: var(--gold);
    display: grid;
    place-items: center;
    flex-shrink: 0;
}

.stat-num {
    font-family: 'Manrope', system-ui, sans-serif;
    font-weight: 800;
    font-size: 24px;
    line-height: 1.2;
    letter-spacing: 0.02em;
    font-variant-numeric: tabular-nums;
    color: white;
    white-space: nowrap;
}

.stat-lbl {
    font-size:12px;
    color: rgba(255, 255, 255, .7);
    margin-top: 4px;
    letter-spacing: .04em;
}

.cta-row {
    margin-top: 36px;
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.hero-quote {
    margin-top: 44px;
    max-width: 480px;
}

.hero-quote p {
    font-family: 'Playfair Display', serif;
    font-style: italic;
    font-size: 18px;
    color: rgba(255, 255, 255, .85);
    line-height: 1.6;
}

.signature {
    font-family: 'Dancing Script', cursive;
    color: var(--gold);
    font-size: 28px;
    margin-top: 6px;
}

/* ================== HERO PORTRAIT ADJUSTMENTS ================== */
.hero-portrait {
    position: absolute;
    right: 2%;
    /* Shifted slightly closer to the right edge to maximize text area space */
    bottom: -10px;
    /* Allows the bottom fade area to drop slightly below the baseline */
    width: 50%;
    /* Expanded container footprint from 45% to 50% to allow a larger scale */
    height: 100%;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    pointer-events: none;
    z-index: 1;
}

@media (min-width: 1024px) {
    .hero-portrait {
        display: flex;
    }
}

/* Backglow element */
.hero-portrait::before {
    content: '';
    position: absolute;
    inset: -24px;
    background: radial-gradient(ellipse at bottom,
            rgba(212, 175, 55, 0.2),
            transparent 70%);
    filter: blur(50px);
    z-index: 0;
}

.hero-portrait img {
    position: relative;
    z-index: 1;
    max-width: 660px;
    /* Bumped up from 580px to allow a much larger presence on screen */
    width: 100%;
    height: auto;
    max-height: 98%;
    /* Allows the image to scale tall without hitting or overflowing the navbar */
    object-fit: contain;
    display: block;
    margin-top: auto;

    /* Shadow configuration */
    filter: drop-shadow(0 20px 40px rgba(0, 0, 0, 0.5));

    /* Blends the bottom edge smoothly with the gradient transition layer */
    -webkit-mask-image: linear-gradient(to bottom, black 75%, transparent 100%);
    mask-image: linear-gradient(to bottom, black 75%, transparent 100%);
}

/* ================== QUICK SEARCH ================== */
.quick-search-wrap {
    margin-top: -40px;
    position: relative;
    z-index: 5;
}

.quick-search {
    background: white;
    border: 1px solid var(--border);
    border-radius: 18px;
    padding: 16px 18px;
    box-shadow: 0 12px 40px rgba(0, 0, 0, .08);
    display: grid;
    gap: 12px;
}

@media (min-width: 768px) {
    .quick-search {
        grid-template-columns: auto 1fr;
        align-items: center;
        padding: 18px 22px;
        gap: 16px;
    }
}

.qs-label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: 'Playfair Display', serif;
    color: var(--ink);
    white-space: nowrap;
    font-weight: 600;
}

.qs-input-wrap {
    position: relative;
}

.qs-input-wrap input {
    width: 100%;
    padding: 10px 38px 10px 16px;
    border-radius: 999px;
    background: var(--cream-deep);
    border: 1px solid var(--border);
    font-size: 14px;
    outline: none;
}

.qs-input-wrap input:focus {
    border-color: var(--forest);
    box-shadow: 0 0 0 3px rgba(15, 76, 58, .12);
}

.qs-input-wrap .ic {
    position: absolute;
    right: 14px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--ink-mute);
}

/* ================== LEGACY STATS ================== */
.legacy {
    background: var(--cream);
}

.legacy-grid {
    display: grid;
    gap: 40px;
}

@media (min-width: 768px) {
    .legacy-grid {
        grid-template-columns: .9fr 2.1fr;
    }
}

.legacy-cards {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
}

@media (min-width: 768px) {
    .legacy-cards {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (min-width: 1024px) {
    .legacy-cards {
        grid-template-columns: repeat(5, 1fr);
    }
}

.legacy-card {
    background: rgba(246, 241, 231, .6);
    border: 1px solid rgba(212, 175, 55, .18);
    border-radius: 12px;
    padding: 20px;
    text-align: center;
    transition: all .3s;
}

.legacy-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, .08);
    border-color: var(--gold);
}

.legacy-ic {
    width: 48px;
    height: 48px;
    margin: 0 auto 12px;
    border-radius: 12px;
    background: white;
    display: grid;
    place-items: center;
    color: var(--gold);
    box-shadow: 0 2px 6px rgba(0, 0, 0, .05);
}

.legacy-card .num {
    font-family: 'Manrope', system-ui, sans-serif;
    font-weight: 800;
    font-size: 24px;
    color: var(--forest);
    letter-spacing: 0.02em;
    font-variant-numeric: tabular-nums;
}

.legacy-card .lbl {
    font-size:12px;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--ink-mute);
    margin-top: 4px;
    line-height: 1.2;
}

/* ================== TIMELINE ================== */
.timeline {
    background: white;
}

.timeline h2 {
    text-align: center;
    font-size: 36px;
    margin-bottom: 8px;
}

.timeline-strip {
    margin-top: 40px;
    position: relative;
    overflow-x: auto;
    padding-bottom: 16px;
}

.timeline-inner {
    min-width: 960px;
    position: relative;
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 16px;
    padding-top: 8px;
}

.timeline-inner::before {
    content: '';
    position: absolute;
    top: 36px;
    left: 0;
    right: 0;
    height: 2px;
    background-image: linear-gradient(to right, var(--gold) 50%, transparent 50%);
    background-size: 10px 2px;
    background-repeat: repeat-x;
}

.tl-node {
    text-align: center;
    position: relative;
}

.tl-circle {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: #0f4c3a;
    color: white;
    display: grid;
    place-items: center;
    margin: 0 auto;
    box-shadow: 0 4px 12px rgba(15, 76, 58, .3);
    transition: all .3s;
}

.tl-node:hover .tl-circle {
    background: #ec6b1d;
    color: var(--forest-deep);
    transform: scale(1.08);
}

.tl-year {
    font-family: 'Playfair Display', serif;
    font-size: 20px;
    color: var(--forest);
    margin-top: 12px;
}

.tl-label {
    font-size: 12px;
    color: var(--ink-soft);
    margin-top: 4px;
    max-width: 140px;
    margin-left: auto;
    margin-right: auto;
}

/* ================== TRANSFORMING / PROJECTS ================== */
.transforming {
    background: rgba(246, 241, 231, .4);
}

.tf-grid {
    display: grid;
    gap: 40px;
}

@media (min-width: 1024px) {
    .tf-grid {
        grid-template-columns: 1fr 3fr;
    }
}

.tf-cards {
    display: grid;
    grid-template-columns: 1fr;
    gap: 20px;
}

@media (min-width: 640px) {
    .tf-cards {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 1280px) {
    .tf-cards {
        grid-template-columns: repeat(4, 1fr);
    }
}

.tf-card {
    background: white;
    border: 1px solid var(--border);
    border-radius: 14px;
    overflow: hidden;
    transition: all .3s;
    /* The grid already stretches the cards to a common height; making the card
       and its body flex columns lets the footer be pushed to that shared
       bottom edge, so the status line reads across at one level no matter how
       long each description runs. */
    display: flex;
    flex-direction: column;
    height: 100%;
}

.tf-card:hover {
    box-shadow: 0 12px 32px rgba(0, 0, 0, .1);
    transform: translateY(-2px);
}

.tf-ba {
    display: grid;
    grid-template-columns: 1fr 1fr;
    position: relative;
}

.tf-ba>div {
    position: relative;
}

.tf-ba img {
    height: 128px;
    width: 100%;
    object-fit: cover;
}

.tf-ba .tag {
    position: absolute;
    top: 8px;
    font-size:12px;
    padding: 2px 8px;
    border-radius: 4px;
    font-weight: 600;
    letter-spacing: .04em;
}

.tf-ba .before {
    left: 8px;
    background: rgba(10, 53, 40, .9);
    color: white;
}

.tf-ba .after {
    right: 8px;
    background: var(--gold);
    color: var(--forest-deep);
}

.tf-body {
    padding: 18px;
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
}

.tf-body h3 {
    font-size: 18px;
    color: var(--forest);
}

.tf-body p {
    font-size: 13px;
    color: var(--ink-soft);
    margin-top: 6px;
}

.tf-foot {
    /* auto pushes the footer to the bottom of the stretched card. The rule
       below keeps a 12px gap above the divider for cards whose text reaches
       full height, where auto resolves to zero. */
    margin-top: auto;
    padding-top: 12px;
    border-top: 1px solid var(--border);
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 12px;
    color: var(--ink-soft);
}

.tf-body > *:has(+ .tf-foot) {
    margin-bottom: 12px;
}

.tf-foot .cost {
    color: var(--forest);
    font-weight: 600;
}

.tf-foot .sep {
    color: var(--ink-mute);
    margin: 0 8px;
}

/* ================== 3-COLUMN INFO STRIP ================== */
.info-strip {
    background: var(--cream);
}

.info-strip .info-grid {
    display: grid;
    gap: 24px;
}

@media (min-width: 1024px) {
    .info-strip .info-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

.panel {
    background: white;
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 24px;
}

.panel h3 {
    font-size: 22px;
    color: var(--forest);
}

.electoral-table {
    width: 100%;
    font-size: 14px;
}

.electoral-table th,
.electoral-table td {
    padding: 12px 8px;
    text-align: left;
}

.electoral-table thead th {
    text-transform: uppercase;
    font-size:12px;
    letter-spacing: .08em;
    color: var(--ink-mute);
    border-bottom: 1px solid var(--border);
    font-weight: 600;
}

.electoral-table tbody tr {
    border-bottom: 1px solid rgba(229, 224, 216, .6);
}

.electoral-table tbody tr:hover {
    background: rgba(253, 251, 247, .7);
}

.electoral-table td:first-child {
    font-weight: 600;
    color: var(--forest);
}

.electoral-table td.vote {
    color: var(--gold-dark);
    font-weight: 600;
}

.link-arrow {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: var(--forest);
}

.link-arrow:hover {
    color: var(--gold);
}

/* HTMX Spinner Indicator */
.htmx-indicator {
    display: none;
}

.htmx-request .htmx-indicator,
.htmx-request.htmx-indicator {
    display: inline-flex !important;
}

/* ================== MAP / CONSTITUENCIES ================== */
.kerala-map, .kerala-map-container {
    position: relative;
    width: 100%;
}

.kerala-map svg, .kerala-map-container svg {
    width: 100%;
    max-width: 360px;
    margin: 0 auto;
    display: block;
}

/* Kerala Map Vector District Styling */
.district-neutral {
    fill: rgba(15, 93, 61, 0.07);
    stroke: rgba(15, 93, 61, 0.22);
    stroke-width: 1px;
    stroke-linejoin: round;
    transition: all 0.25s ease;
}

.district-neutral:hover {
    fill: rgba(15, 93, 61, 0.18);
    stroke: rgba(15, 93, 61, 0.5);
    cursor: pointer;
}

.district-highlight {
    stroke-width: 1.8px;
    stroke-linejoin: round;
    cursor: pointer;
    transition: all 0.3s ease;
}

.district-kottayam-path {
    fill: url(#kottayamGrad);
    stroke: #D4AF37;
}

.district-kottayam-path:hover {
    filter: drop-shadow(0 0 8px rgba(16, 185, 129, 0.6));
}

.district-adoor-path {
    fill: url(#adoorGrad);
    stroke: #0F5D3D;
}

.district-adoor-path:hover {
    filter: drop-shadow(0 0 8px rgba(212, 175, 55, 0.6));
}

@keyframes mapMarkerPulse {
    0% { opacity: 0.4; transform: scale(0.9); transform-origin: center; }
    50% { opacity: 0.1; transform: scale(1.4); transform-origin: center; }
    100% { opacity: 0.4; transform: scale(0.9); transform-origin: center; }
}

.marker-pulse {
    transform-origin: center;
    animation: mapMarkerPulse 2.5s infinite ease-in-out;
}

.callout {
    position: absolute;
    background: rgba(255, 255, 255, .96);
    border: 1px solid rgba(212, 175, 55, .4);
    border-radius: 12px;
    padding: 10px 12px;
    font-size: 12px;
    max-width: 155px;
    backdrop-filter: blur(8px);
}

.callout .ck-name {
    font-family: 'Playfair Display', serif;
    font-weight: 700;
}

.callout.kottayam {
    top: 42%;
    left: -65px;
    z-index: 10;
}

.callout.adoor {
    top: 68%;
    right: -65px;
    z-index: 10;
}

@media (max-width: 1024px) {
    .callout.kottayam {
        left: -35px;
    }
    .callout.adoor {
        right: -35px;
    }
}

@media (max-width: 768px) {
    .callout.adoor, .callout.kottayam {
        position: relative;
        top: auto;
        left: auto;
        right: auto;
        margin-top: 10px;
        max-width: 100%;
    }
}

/* ================== MEDIA GALLERY ================== */
.filter-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 16px;
}

.filter-pill {
    font-size: 12px;
    padding: 6px 14px;
    border-radius: 999px;
    background: rgba(246, 241, 231, .5);
    border: 1px solid var(--border);
    cursor: pointer;
    transition: all .2s;
    color: var(--ink-soft);
}

.filter-pill:hover {
    border-color: var(--gold);
}

.filter-pill.active {
    background: var(--forest);
    color: white;
    border-color: var(--forest);
}

.media-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
}

.media-tile {
    position: relative;
    border-radius: 10px;
    overflow: hidden;
    cursor: pointer;
    aspect-ratio: 16/10;
    background: var(--forest-deep);
}

.media-tile img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .5s;
}

.media-tile:hover img {
    transform: scale(1.08);
}

.media-tile::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(10, 53, 40, .92), rgba(10, 53, 40, .25), transparent);
}

.media-tile .play {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 2;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .95);
    color: var(--forest);
    display: grid;
    place-items: center;
}

.media-tile:hover .play {
    background: var(--gold);
}

.media-tile .ttl {
    position: absolute;
    left: 10px;
    right: 10px;
    bottom: 10px;
    color: white;
    font-size: 12px;
    font-weight: 500;
    line-height: 1.3;
    z-index: 2;
}

.media-grid.large {
    grid-template-columns: 1fr;
    gap: 20px;
}

@media (min-width: 768px) {
    .media-grid.large {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 1024px) {
    .media-grid.large {
        grid-template-columns: repeat(3, 1fr);
    }
}

.media-grid.large .media-tile {
    aspect-ratio: 16/9;
}

.media-grid.large .media-tile .ttl {
    left: 16px;
    right: 16px;
    bottom: 14px;
    font-size: 14px;
}

.media-grid.large .media-tile .play {
    width: 48px;
    height: 48px;
    top: 14px;
    right: 14px;
}

.media-tile .cat-tag {
    position: absolute;
    bottom: 36px;
    left: 16px;
    z-index: 2;
    font-size:12px;
    letter-spacing: .15em;
    color: var(--gold-light);
    text-transform: uppercase;
}

/* ================== PAGE HEADER (sub-pages) ================== */
.page-header {
    background: #000c1c;
    color: white;
    position: relative;
    padding: 130px 0 80px;
    overflow: hidden;
}

.page-header::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at center, rgba(212, 175, 55, .2), transparent 70%);
    opacity: .35;
}

.page-header .container {
    position: relative;
    z-index: 2;
}

.page-header h1 {
    color: white;
    font-size: clamp(36px, 5vw, 56px);
}

.page-header .ph-eyebrow {
    color: var(--gold);
    letter-spacing: .3em;
    font-size: 12px;
    text-transform: uppercase;
    font-family: 'Playfair Display', serif;
    margin-bottom: 10px;
}

.page-header p {
    color: rgba(255, 255, 255, .8);
    font-size: 17px;
    margin-top: 14px;
    max-width: 600px;
}

/* ================== BIOGRAPHY ================== */
.bio-grid {
    display: grid;
    gap: 48px;
}

@media (min-width: 1024px) {
    .bio-grid {
        grid-template-columns: 1fr 2fr;
    }
}

.bio-grid img {
    border-radius: 14px;
    box-shadow: 0 16px 40px rgba(0, 0, 0, .15);
}

.bio-info {
    margin-top: 24px;
    background: white;
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 20px;
}

.bio-info>div+div {
    margin-top: 16px;
}

.bio-info h4 {
    font-size: 16px;
    color: var(--forest);
}

.bio-info p {
    font-size: 14px;
    color: var(--ink-soft);
    margin-top: 4px;
}

.bio-body h2 {
    font-size: 28px;
}

.bio-body p {
    color: var(--ink-soft);
    margin-top: 16px;
    line-height: 1.75;
}

/* ================== MINISTERIAL CARDS ================== */
.roles-grid {
    display: grid;
    gap: 20px;
}

@media (min-width: 768px) {
    .roles-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

.role-card {
    background: white;
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 26px;
    display: flex;
    gap: 16px;
    transition: box-shadow .3s;
}

.role-card:hover {
    box-shadow: 0 8px 24px rgba(0, 0, 0, .08);
}

.role-icon {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    background: var(--forest);
    color: var(--gold);
    display: grid;
    place-items: center;
    flex-shrink: 0;
}

.role-year {
    font-size:12px;
    color: var(--gold-dark);
    letter-spacing: .12em;
    font-weight: 600;
}

.role-card h3 {
    font-size: 20px;
    margin-top: 4px;
}

.role-card p {
    font-size: 14px;
    color: var(--ink-soft);
    margin-top: 8px;
}

/* ================== PROJECTS LIST PAGE ================== */
.proj-grid {
    display: grid;
    gap: 16px;
    grid-template-columns: 1fr;
}

@media (min-width: 768px) {
    .proj-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 1024px) {
    .proj-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

.proj-card {
    background: var(--cream);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 20px;
    transition: border-color .2s;
}

.proj-card:hover {
    border-color: var(--gold);
}

.proj-card .yr {
    font-size:12px;
    color: var(--gold-dark);
    letter-spacing: .12em;
}

.proj-card h3 {
    font-size: 18px;
    margin-top: 6px;
}

.proj-foot {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 16px;
    font-size: 12px;
}

.proj-foot .cost {
    font-weight: 600;
    color: var(--forest);
}

.tag-done {
    background: rgba(15, 76, 58, .1);
    color: var(--forest);
    padding: 4px 10px;
    border-radius: 999px;
    font-size:12px;
}

.tag-ongoing {
    background: rgba(212, 175, 55, .15);
    color: var(--gold-dark);
    padding: 4px 10px;
    border-radius: 999px;
    font-size:12px;
}

/* ================== FORMS ================== */
.form-grid {
    display: grid;
    gap: 24px;
    max-width: 800px;
    margin: 0 auto;
}

.form-card {
    background: white;
    border: 1px solid var(--border);
    border-radius: 18px;
    padding: 32px;
}

@media (min-width: 768px) {
    .form-card {
        padding: 40px;
    }
}

.form-row {
    display: grid;
    gap: 18px;
}

@media (min-width: 640px) {
    .form-row {
        grid-template-columns: repeat(2, 1fr);
    }
}

.field {
    display: block;
}

.field label {
    display: block;
    font-size:12px;
    text-transform: uppercase;
    letter-spacing: .1em;
    color: var(--ink-mute);
    margin-bottom: 6px;
    font-weight: 600;
}

.field label .req {
    color: var(--gold);
    margin-left: 4px;
}

.field input,
.field select,
.field textarea {
    width: 100%;
    padding: 11px 14px;
    background: white;
    border: 1px solid var(--border);
    border-radius: 8px;
    font-size: 14px;
    outline: none;
}

.field input:focus,
.field select:focus,
.field textarea:focus {
    border-color: var(--forest);
    box-shadow: 0 0 0 3px rgba(15, 76, 58, .12);
}

.field textarea {
    min-height: 120px;
    resize: vertical;
}

.form-card>*+* {
    margin-top: 18px;
}

.form-row+.field,
.form-row+.form-row {
    margin-top: 18px;
}

.contact-grid {
    display: grid;
    gap: 28px;
}

@media (min-width: 1024px) {
    .contact-grid {
        grid-template-columns: 1fr 2fr;
    }
}

.contact-info>*+* {
    margin-top: 18px;
}

.contact-info .panel {
    padding: 22px;
}

.contact-info .line {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 14px;
    color: var(--ink-soft);
    margin-top: 10px;
}

.contact-info .line:first-child {
    margin-top: 0;
}

.contact-info .line .ic {
    color: var(--gold);
}

/* ================== FOOTER ================== */
.footer {
    background: #070e14;
    color: white;
    position: relative;
    overflow: hidden;
}

.img-svg {
    width: 40%;

}

.img-rupee {
    width: 25%;
}

.footer::before {
    content: '';
    position: absolute;
    right: 0;
    bottom: 0;
    width: 33%;
    height: 100%;
    background-image: linear-gradient(to left, rgba(10, 53, 40, .25), rgb(7 14 20)),
        url('https://images.unsplash.com/photo-1704967743995-d78ace54ba80?w=800&q=80&auto=format');
    background-size: cover;
    background-position: center;
    opacity: .25;
}

.footer-inner {
    position: relative;
    padding: 70px 0;
    z-index: 2;
}

.footer-grid {
    display: grid;
    gap: 36px;
}

@media (min-width: 768px) {
    .footer-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 1024px) {
    .footer-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}

.footer h4 {
    color: var(--gold);
    font-size: 20px;
    margin-bottom: 16px;
}

.footer p,
.footer li,
.footer a {
    font-size: 14px;
    color: rgba(255, 255, 255, .8);
}

.footer ul {
    list-style: none;
}

.footer ul li {
    margin-bottom: 12px;
}

.footer ul li a {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
}

.footer ul li a:hover {
    color: var(--gold);
}

.footer .line {
    display: flex;
    gap: 8px;
    align-items: flex-start;
}

.footer .line .ic {
    color: var(--gold);
    margin-top: 2px;
    flex-shrink: 0;
}

.footer .line+.line {
    margin-top: 12px;
}

.social-row {
    display: flex;
    gap: 10px;
    margin-top: 18px;
}

.social-row a {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .1);
    display: grid;
    place-items: center;
    transition: all .2s;
}

.social-row a:hover {
    background: var(--gold);
    color: var(--forest-deep);
}

.footer-bottom {
    margin-top: 36px;
    padding-top: 22px;
    border-top: 1px solid rgba(255, 255, 255, .12);
    display: flex;
    flex-direction: column;
    gap: 14px;
    align-items: center;
    font-size: 12px;
    color: rgba(255, 255, 255, .6);
}

@media (min-width: 768px) {
    .footer-bottom {
        flex-direction: row;
        justify-content: space-between;
    }
}

.footer-bottom .links {
    display: flex;
    gap: 24px;
}

/* ================== SOCIAL SIDEBAR ================== */
.social-side {
    position: fixed;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    display: none;
    flex-direction: column;
    gap: 8px;
    z-index: 50;
}

@media (min-width: 768px) {
    .social-side {
        display: flex;
    }
}

.social-side a {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: #0f4c3a;
    color: white;
    display: grid;
    place-items: center;
    backdrop-filter: blur(6px);
    transition: all .3s;
}

.social-side a:hover {
    background: #ec6b1d;
    color: var(--forest-deep);
    transform: scale(1.1);
}

/* ================== UTILS ================== */
.text-center {
    text-align: center;
}

.mt-12 {
    margin-top: 12px;
}

.mt-24 {
    margin-top: 24px;
}

.mt-40 {
    margin-top: 40px;
}

.mb-40 {
    margin-bottom: 40px;
}

.section-title {
    font-size: 36px;
}

.toast {
    position: fixed;
    right: 20px;
    top: 90px;
    z-index: 200;
    background: var(--forest);
    color: white;
    padding: 14px 22px;
    border-radius: 10px;
    box-shadow: 0 12px 30px rgba(0, 0, 0, .18);
    transform: translateY(-12px);
    opacity: 0;
    transition: all .3s ease;
    font-size: 14px;
}

.toast.show {
    opacity: 1;
    transform: translateY(0);
}

/* Print/hide helpers per page */
.page-spacer {
    height: 80px;
}

.timeline-layout {
    display: grid;
    /* minmax(0,...) rather than a bare 1fr: the strip inside sets
       min-width:960px so it can scroll, but a bare 1fr track inherits that as
       its floor and grows instead, pushing the 240px video card off-screen on
       any viewport below ~1280px. Clamping the floor lets the strip scroll as
       .timeline-strip{overflow-x:auto} already intends. */
    grid-template-columns: minmax(0, 1fr) 240px;
    gap: 32px;
    align-items: start;
    margin-top: 40px;
}

.journey-video-card {
    background: #fff;
    border: 1px solid #e8e2d2;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06);
    cursor: pointer;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.journey-video-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 30px rgba(6, 19, 28, 0.15);
}

.journey-video-thumb {
    position: relative;
    aspect-ratio: 4/3;
    overflow: hidden;
}

.journey-video-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .4s ease;
}

.journey-video-card:hover img {
    transform: scale(1.05);
}

.journey-video-tag {
    position: absolute;
    top: 10px;
    left: 10px;
    background: rgba(6, 19, 28, 0.85);
    backdrop-filter: blur(4px);
    border: 1px solid rgba(212, 175, 55, 0.4);
    color: #D4AF37;
    font-size:12px;
    font-weight: 600;
    padding: 3px 8px;
    border-radius: 20px;
    z-index: 2;
}

.journey-play-btn {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: #D4AF37;
    color: #06131C;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    text-decoration: none;
    transition: .3s;
    box-shadow: 0 0 20px rgba(212, 175, 55, 0.4);
    border: 2px solid rgba(255, 255, 255, 0.4);
}

.journey-play-btn:hover {
    transform: translate(-50%, -50%) scale(1.12);
    background: #fff;
    color: #06131C;
}

.journey-video-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 14px;
    background: #06131C;
    color: #fff;
    font-weight: 600;
    text-decoration: none;
    width: 100%;
    border: none;
    cursor: pointer;
    transition: background 0.3s;
}

.journey-video-btn:hover {
    background: #D4AF37;
    color: #06131C;
}

.no-scrollbar::-webkit-scrollbar {
    display: none;
}

.no-scrollbar {
    -ms-overflow-style: none;
    scrollbar-width: none;
}

@media(max-width:992px) {
    .timeline-layout {
        /* see the base rule: a bare 1fr inherits the strip's 960px min-width */
        grid-template-columns: minmax(0, 1fr);
    }

    .journey-video-card {
        max-width: 320px;
        margin: 0 auto;
    }
}

/* ======================================
   AI ASSISTANT
====================================== */

.speaker-ai-section {
    padding: 40px 0 24px;
}

.speaker-ai-card {
    background: #f8f2e7;
    border: 1px solid #e6dcc8;
    border-radius: 18px;
    padding: 30px;
    display: grid;
    grid-template-columns: 320px 1fr;
    gap: 30px;
    align-items: center;
}

.speaker-ai-left {
    display: flex;
    gap: 18px;
    align-items: center;
}

.speaker-ai-icon {
    width: 90px;
    height: 90px;
    border-radius: 50%;
    background: #0f4c3a;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 38px;
    flex-shrink: 0;
}

.speaker-ai-left h3 {
    margin: 8px 0;
    font-size: 32px;
}

.section-tag {
    color: #0f4c3a;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 1px;
}

.speaker-ai-left p {
    color: #666;
    font-size: 14px;
}

.ai-search-box {
    display: flex;
    overflow: hidden;
    border-radius: 50px;
    background: #fff;
    border: 1px solid #ddd;
}

.ai-search-box input {
    flex: 1;
    border: none;
    padding: 16px 24px;
    outline: none;
}

.ai-search-box button {
    width: 60px;
    background: #0f4c3a;
    color: #fff;
}

.ai-suggestions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 18px;
}

.ai-suggestions span {
    padding: 10px 14px;
    background: #fff;
    border-radius: 30px;
    border: 1px solid #e2d7c2;
    font-size: 13px;
}

/* ======================================
   RESPONSIVE
====================================== */

@media(max-width:992px) {

    .speaker-ai-card,
    .featured-mission-card {
        grid-template-columns: 1fr;
    }

    .speaker-ai-left {
        flex-direction: column;
        text-align: center;
    }


}

.ai-span {
    font-size: 21px;
    font-weight: 100;

}

.kailm-section {
    padding: 40px 0;
}

.kailm-banner {
    position: relative;
    overflow: hidden;

    display: flex;
    align-items: center;
    justify-content: space-between;
    max-width: 1400px;
    width: 100%;
    margin: 0 auto;
    gap: 40px;

    padding: 30px 40px;

    border-radius: 16px;

    background:
        linear-gradient(90deg,
            #031b28 0%,
            #05293b 40%,
            #041a25 100%);

    min-height: 300px;
}

/* Background Glow */

.kailm-banner::before {
    content: "";
    position: absolute;

    width: 500px;
    height: 500px;

    left: -150px;
    top: -100px;

    background:
        radial-gradient(rgba(0, 255, 255, .08),
            transparent 70%);
}

.kailm-banner::after {
    content: "";
    position: absolute;

    width: 500px;
    height: 500px;

    right: -120px;
    top: -120px;

    background:
        radial-gradient(rgba(0, 170, 255, .12),
            transparent 70%);
}

/* Left Side */

.kailm-left {
    flex: 0.3 0 180px;
    position: relative;
    z-index: 2;
}

.kailm-left img {
    width: 100%;
    display: block;
}

/* Center */

.kailm-center {
    flex: 2;
    position: relative;
    z-index: 2;
}

.kailm-center h2 {
    color: #5aff69;
    font-size: 34px;
    font-weight: 800;
    margin-bottom: 10px;
    line-height: 1.2;
}

.kailm-center h3 {
    color: #ffc84f;
    font-size: 28px;
    margin-bottom: 12px;
    font-weight: 700;
}

.kailm-center p {
    color: #e4edf3;
    font-size: 16px;
    line-height: 1.8;
    max-width: 650px;
    margin-bottom: 28px;
}

/* Icons */

.kailm-icons {
    display: flex;
    gap: 24px;
    flex-wrap: wrap;
}

.kailm-icon-item {
    text-align: center;
    width: 95px;
    cursor: pointer;
}

.kailm-icon-item .icon-circle {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    margin: 0 auto 10px;

    display: flex;
    align-items: center;
    justify-content: center;

    background: rgba(255, 255, 255, .08);
    border: 1px solid rgba(255, 255, 255, .15);

    color: #fff;

    transition: all .35s ease;
}

.icon-circle {
    width: 56px;
    height: 56px;

    border-radius: 50%;

    margin: 0 auto 10px;

    display: flex;
    align-items: center;
    justify-content: center;

    background: rgba(255, 255, 255, .08);

    border: 1px solid rgba(255, 255, 255, .15);

    color: #fff;
}

.kailm-icon-item.active .icon-circle {
    background: #b8892b;
    border-color: #d9aa43;
}

.kailm-icon-item span {
    color: #fff;
    font-size: 13px;
    line-height: 1.4;
}

/* Right Side */

.kailm-right {
    width: 390px;
    position: relative;
    z-index: 2;
    text-align: center;
}

.students-img {
    width: 100%;
    max-width: 390px;
    display: block;
    margin: auto;
}

.kailm-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;

    margin-top: 16px;

    padding: 14px 26px;

    background: #d6a548;

    color: #111;

    font-weight: 600;
    border-radius: 8px;

    text-decoration: none;

    transition: .3s;
}

.kailm-btn:hover {
    transform: translateY(-2px);
}

/* Mobile */

@media(max-width:992px) {

    .kailm-banner {
        flex-direction: column;
        text-align: center;
    }

    .kailm-left {
        display: none;
    }

    .kailm-icons {
        justify-content: center;
    }

    .kailm-right {
        width: 100%;
    }
}

/* Default icon color */
.kailm-icon-item .icon-circle i {
    transition: all .35s ease;
}

/* Hover Effect */
.kailm-icon-item:hover .icon-circle {
    background: #c99a2e;
    border-color: #e2b54f;
    transform: translateY(-4px);
    box-shadow: 0 10px 25px rgba(201, 154, 46, .35);
}

.kailm-icon-item:hover .icon-circle i {
    color: #fff;
}

/* Optional: title color change */
.kailm-icon-item:hover span {
    color: #f5c35a;
}

/* Active state */
.kailm-icon-item.active .icon-circle {
    background: #c99a2e;
    border-color: #e2b54f;
}

.kailm-icon-item.active span {
    color: #f5c35a;
}

.kailm-icon-item .icon-circle {
    transition: background .3s ease,
        border-color .3s ease,
        transform .3s ease;
}

.kailm-icon-item:hover .icon-circle {
    background: #c99a2e;
    border-color: #c99a2e;
    transform: scale(1.08);
}

/* ==========================
   IDEAS SECTION
========================== */

.ideas-section {
    padding: 60px 0;
}

.ideas-container {
    max-width: 1400px;
    margin: auto;
}

/* ==========================
   TOP BANNER
========================== */

.ideas-banner {
    background:
        linear-gradient(135deg,
            #041d2d 0%,
            #052b42 45%,
            #031926 100%);

    border-radius: 18px 18px 0 0;
    padding: 24px 30px;

    display: grid;
    grid-template-columns: 500px 1fr;
    gap: 30px;

    position: relative;
    overflow: hidden;
}

.ideas-banner::before {
    content: "";
    position: absolute;
    inset: 0;

    background:
        radial-gradient(circle at 15% 20%,
            rgba(255, 193, 7, .08),
            transparent 35%);
}

/* ==========================
   LEFT SIDE
========================== */

.ideas-intro {
    display: flex;
    gap: 18px;
    position: relative;
    z-index: 2;
}

.ideas-image img {
    width: 110px;
}

.ideas-content h2 {
    color: #fff;
    font-size: 36px;
    line-height: 1.1;
    margin-bottom: 10px;
}

.ideas-content h2 span {
    color: #ffb830;
}

.ideas-content p {
    color: rgba(255, 255, 255, .85);
    margin-bottom: 18px;
    line-height: 1.6;
}

.ideas-buttons {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

.btn-submit {
    background: #dca63a;
    color: #111;
    padding: 12px 20px;
    border-radius: 8px;
    font-weight: 600;
    text-decoration: none;
}

.btn-explore {
    background: rgba(255, 255, 255, .08);
    color: #fff;
    padding: 12px 20px;
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, .12);
    text-decoration: none;
}

/* ==========================
   PROCESS ITEMS
========================== */

.ideas-process {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 20px;
    align-items: center;
    position: relative;
    z-index: 2;
}

.process-item {
    text-align: center;
    color: #fff;
}

.process-icon {
    width: 74px;
    height: 74px;

    margin: 0 auto 15px;

    border-radius: 50%;

    display: flex;
    align-items: center;
    justify-content: center;

    font-size: 28px;

    background: rgba(255, 255, 255, .06);

    border: 1px solid rgba(255, 255, 255, .15);

    transition: .3s ease;
}

.process-item:hover .process-icon {
    background: #dca63a;
    color: #111;
    transform: translateY(-5px);
}

.process-item h4 {
    font-size: 18px;
    margin-bottom: 8px;
    color: #fff;
}

.process-item p {
    font-size: 13px;
    line-height: 1.5;
    color: rgba(255, 255, 255, .75);
}

/* ==========================
   STATS BAR
========================== */

.ideas-stats {
    background: #fff;

    display: grid;
    grid-template-columns: 1.5fr repeat(6, 1fr);

    border-radius: 0 0 18px 18px;

    overflow: hidden;

    box-shadow:
        0 10px 30px rgba(0, 0, 0, .08);
}

.stat-card {
    padding: 22px 15px;

    text-align: center;

    border-right: 1px solid #ececec;

    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.stat-card:last-child {
    border-right: none;
}

.stat-card i {
    font-size: 24px;
    color: #0f4c3a;
    margin-bottom: 8px;
}

.stat-card h3 {
    font-size: 16px;
    margin: 0;
    color: #333;
}

.stat-number {
    font-size: 32px;
    font-weight: 700;
    line-height: 1;
}

/* Individual colors */

.stat-card:nth-child(2) .stat-number {
    color: #4255ff;
}

.stat-card:nth-child(3) .stat-number {
    color: #ff9a2e;
}

.stat-card:nth-child(4) .stat-number {
    color: #a64dff;
}

.stat-card:nth-child(5) .stat-number {
    color: #43b047;
}

.stat-card:nth-child(6) .stat-number {
    color: #1c8c92;
}

.stat-card:nth-child(7) .stat-number {
    color: #e0438c;
}

.stat-card p {
    margin-top: 8px;
    color: #666;
    font-size: 14px;
}

/* ==========================
   RESPONSIVE
========================== */

@media(max-width:1200px) {

    .ideas-banner {
        grid-template-columns: 1fr;
    }

    .ideas-process {
        grid-template-columns: repeat(3, 1fr);
    }

    .ideas-stats {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media(max-width:768px) {

    .ideas-intro {
        flex-direction: column;
        text-align: center;
    }

    .ideas-buttons {
        justify-content: center;
    }

    .ideas-process {
        grid-template-columns: repeat(2, 1fr);
    }

    .ideas-stats {
        grid-template-columns: 1fr;
    }

    .stat-card {
        border-right: none;
        border-bottom: 1px solid #eee;
    }
}

.dashed-border {
    background: repeating-linear-gradient(90deg, #e11d48 0, #e11d48 10px, transparent 10px, transparent 18px);
    height: 8px;
}

.section-bg {
    background: radial-gradient(120% 100% at 20% 0%, #12305a 0%, #0a1e3f 45%, #061530 100%);
}

.hero-grid-overlay {
    background-image:
        linear-gradient(rgba(255, 255, 255, 0.6) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.6) 1px, transparent 1px);
    background-size: 48px 48px;
    opacity: 0.08;
}

.card-shadow {
    box-shadow: 0 6px 20px -14px rgba(0, 0, 0, 0.25);
}

.float-shadow {
    box-shadow: 0 18px 40px -24px rgba(10, 30, 63, 0.35);
}

.process-circle {
    transition: transform .3s ease, border-color .3s ease;
}

.process-circle:hover {
    transform: translateY(-4px);
    border-color: rgba(244, 180, 41, 0.6);
}

.sponsor-tile {
    transition: box-shadow .2s ease;
}

.sponsor-tile:hover {
    box-shadow: 0 6px 16px -8px rgba(0, 0, 0, 0.25);
}

.nav-item:hover {
    background: #f8fafc;
}

.dot-active {
    width: 16px;
    background: #047857;
}

.dot-inactive {
    width: 6px;
    background: #cbd5e1;
}

/* ================= MOBILE TIMELINE ================= */
@media (max-width: 768px) {

    .timeline-strip {
        overflow: hidden;
        width: 100%;
        max-width: 100%;
    }

    .timeline-inner {
        min-width: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        display: flex;
        flex-direction: column;
        gap: 24px;
        padding-left: 16px;
        position: relative;
    }

    /* Vertical timeline line passing through center of 44px circles (16px padding + 22px radius = 38px center) */
    .timeline-inner::before {
        top: 0;
        bottom: 0;
        left: 37px;
        right: auto;
        width: 2px;
        height: auto;
        background-image: linear-gradient(to bottom,
                var(--gold) 50%,
                transparent 50%);
        background-size: 2px 10px;
        background-repeat: repeat-y;
    }

    .tl-node {
        display: flex;
        align-items: center;
        gap: 16px;
        text-align: left;
        width: 100%;
    }

    .tl-circle {
        width: 44px;
        height: 44px;
        margin: 0;
        flex-shrink: 0;
        z-index: 2;
    }

    .tl-year {
        margin: 0;
        font-size: 16px;
        font-weight: 700;
        flex-shrink: 0;
    }

    .tl-label {
        margin: 0;
        font-size: 13px;
        max-width: none;
        flex: 1;
        min-width: 0;
        word-break: break-word;
    }
}

.dropdown {
    position: relative;
}

.dropdown>a {
    display: flex;
    align-items: center;
    gap: 6px;
    text-decoration: none;
    padding: 10px 0;
}

.dropdown-menu {
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 250px;
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, .15);
    display: none;
    z-index: 1000;
    padding: 10px 0;
}

.dropdown:hover .dropdown-menu {
    display: block;
}

.dropdown-menu a {
    display: block;
    color: #222;
    padding: 12px 18px;
    text-decoration: none;
    transition: .3s;
}

.dropdown-menu a:hover {
    background: #f5f5f5;
    color: #b8860b;
}

/* Second Level */

.submenu {
    position: relative;
}

.submenu>a {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.submenu-menu {
    position: absolute;
    left: 100%;
    top: 0;
    min-width: 250px;
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, .15);
    display: none;
}

.submenu:hover .submenu-menu {
    display: block;
}

/* ===========================================================
   GLOBAL RESPONSIVE FIXES
   Add this at the END of your CSS
===========================================================*/

/* ---------- Large Desktop ---------- */
@media (max-width:1400px) {

    .container {
        max-width: 100%;
        padding: 30px 30px;
    }

    .hero {
        padding: 130px 30px 80px;
    }

    .hero-portrait {
        width: 48%;
    }

    .hero-portrait img {
        max-width: 520px;
    }

    .kailm-banner {
        margin: 0;
    }

    .ideas-container {
        padding: 0 20px;
    }

}


/* ===========================================================
   TABLET (1024px)
===========================================================*/

@media (max-width:1024px) {

    .section {
        padding: 60px 0;
    }

    .section-title {
        font-size: 32px;
    }

    .container {
        padding: 0 18px;
    }

    /* ---------------- NAVBAR ---------------- */

    .nav-links {
        display: none;
    }

    .menu-toggle {
        display: flex;

    }

    .mobile-menu {
        display: none;
    }

    .mobile-menu.open {
        display: block;
    }

    /* ---------------- HERO ---------------- */

    .hero {
        min-height: auto;
        padding: 120px 20px 70px;
    }

    .hero-inner {
        grid-template-columns: 1fr;
        text-align: center;
    }

    .hero-portrait {
        position: relative;
        width: 100%;
        right: auto;
        bottom: auto;
        margin-top: 40px;
    }

    .hero-portrait img {
        margin: auto;
        max-width: 420px;
    }

    .hero-quote {
        margin-left: auto;
        margin-right: auto;
    }

    .cta-row {
        justify-content: center;
    }

    .stat-strip {
        grid-template-columns: repeat(2, 1fr);
    }

    /* ---------------- Legacy ---------------- */

    .legacy-grid {
        grid-template-columns: 1fr;
    }

    .legacy-cards {
        grid-template-columns: repeat(3, 1fr);
    }

    /* ---------------- Timeline ---------------- */

    .timeline-layout {
        /* see the base rule: a bare 1fr inherits the strip's 960px min-width */
        grid-template-columns: minmax(0, 1fr);
    }

    /* ---------------- Projects ---------------- */

    .tf-grid {
        grid-template-columns: 1fr;
    }

    .tf-cards {
        grid-template-columns: repeat(2, 1fr);
    }

    /* ---------------- Info Strip ---------------- */

    .info-strip .info-grid {
        grid-template-columns: 1fr;
    }

    /* ---------------- Biography ---------------- */

    .bio-grid {
        grid-template-columns: 1fr;
    }

    /* ---------------- Roles ---------------- */

    .roles-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    /* ---------------- Contact ---------------- */

    .contact-grid {
        grid-template-columns: 1fr;
    }

    /* ---------------- Footer ---------------- */

    .footer-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    /* ---------------- AI ---------------- */

    .speaker-ai-card {
        grid-template-columns: 1fr;
    }

    .speaker-ai-left {
        justify-content: center;
        text-align: center;
    }

    /* ---------------- KAILM ---------------- */

    .kailm-banner {
        flex-direction: column;
        text-align: center;
        margin: 0;
        padding: 40px 20px;
    }

    .kailm-left {
        display: none;
    }

    .kailm-center {
        order: 1;
    }

    .kailm-right {
        order: 2;
        width: 100%;
    }

    .kailm-center p {
        margin: auto auto 25px;
    }

    .kailm-icons {
        justify-content: center;
    }

    /* ---------------- Ideas ---------------- */

    .ideas-banner {
        grid-template-columns: 1fr;
    }

    .ideas-process {
        grid-template-columns: repeat(3, 1fr);
    }

    .ideas-stats {
        grid-template-columns: repeat(2, 1fr);
    }

}


/* ===========================================================
   TABLET (768px)
===========================================================*/

@media (max-width:768px) {

    .container {
        padding: 0 16px;
    }

    .section {
        padding: 50px 0;
    }

    .section-title {
        font-size: 28px;
    }

    .gold-divider {
        margin-left: auto;
        margin-right: auto;
    }

    /* ---------- Hero ---------- */

    .hero {
        padding: 110px 16px 60px;
    }

    .hero h1 {
        font-size: 42px;
    }

    .hero .subtitle {
        font-size: 20px;
    }

    .hero-portrait img {
        max-width: 340px;
    }

    .stat-strip {
        grid-template-columns: 1fr 1fr;
        gap: 15px;
    }

    .stat-item {
        justify-content: center;
    }

    /* ---------- Search ---------- */

    .quick-search {
        grid-template-columns: 1fr;
    }

    /* ---------- Legacy ---------- */

    .legacy-cards {
        grid-template-columns: repeat(2, 1fr);
    }

    /* ---------- Projects ---------- */

    .tf-cards {
        grid-template-columns: 1fr;
    }

    .proj-grid {
        grid-template-columns: 1fr;
    }

    /* ---------- Media ---------- */

    .media-grid {
        grid-template-columns: 1fr;
    }

    .media-grid.large {
        grid-template-columns: 1fr;
    }

    /* ---------- Roles ---------- */

    .roles-grid {
        grid-template-columns: 1fr;
    }

    /* ---------- Footer ---------- */

    .footer-grid {
        grid-template-columns: 1fr;
    }

    /* ---------- Ideas ---------- */

    .ideas-intro {
        flex-direction: column;
        text-align: center;
    }

    .ideas-buttons {
        justify-content: center;
    }

    .ideas-process {
        grid-template-columns: repeat(2, 1fr);
    }

    .ideas-stats {
        grid-template-columns: 1fr;
    }

    .stat-card {
        border-right: none;
        border-bottom: 1px solid #eee;
    }

    .nav-right {
        gap: 8px;
    }

    .btn.btn-sm {
        padding: 8px 14px;
        font-size: 13px;
    }

    .lang-pill {
        padding: 6px 10px;
        font-size: 12px;
    }

    .brand-text {
        display: none;
    }

}


/* ===========================================================
   MOBILE
===========================================================*/

@media (max-width:576px) {

    .container {
        padding: 30px 15px;
    }

    .hero {
        padding: 100px 15px 50px;
    }

    .hero h1 {
        font-size: 34px;
    }

    .hero .subtitle {
        font-size: 18px;
    }

    .hero-portrait img {
        max-width: 280px;
    }

    .cta-row {
        flex-direction: column;
    }

    .btn {
        width: 100%;
        justify-content: center;
    }

    .stat-strip {
        grid-template-columns: 1fr;
    }

    .legacy-cards {
        grid-template-columns: 1fr;
    }

    .tf-cards {
        grid-template-columns: 1fr;
    }

    .panel {
        padding: 20px;
    }

    .bio-info {
        padding: 18px;
    }

    .form-card {
        padding: 22px;
    }

    .form-row {
        grid-template-columns: 1fr;
    }

    .ideas-process {
        grid-template-columns: 1fr;
    }

    .process-item {
        max-width: 260px;
        margin: auto;
    }

    .kailm-icons {
        gap: 15px;
    }

    .kailm-icon-item {
        width: 80px;
    }

    .footer-bottom {
        text-align: center;
    }

    .footer-bottom .links {
        flex-wrap: wrap;
        justify-content: center;
    }

    .img-svg {
        width: 80%;
    }

    .img-rupee {
        width: 45%;
    }

}


/* ===========================================================
   FIX IMAGES
===========================================================*/

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

.hero-portrait img,
.students-img,
.journey-video-thumb img {
    width: 100%;
    height: auto;
}


/* ===========================================================
   TABLE FIX
===========================================================*/

.electoral-table {
    display: block;
    overflow-x: auto;
    white-space: nowrap;
}


/* ===========================================================
   DROPDOWN FIX
===========================================================*/

@media(max-width:1024px) {

    .dropdown:hover .dropdown-menu {
        display: none;
    }

    .dropdown-menu,
    .submenu-menu {
        display: none;
        position: static;
        box-shadow: none;
        border: none;
        background: transparent;
        padding-left: 18px;
    }

    .dropdown.open>.dropdown-menu {
        display: block;
    }

    .submenu.open>.submenu-menu {
        display: block;
    }


    .dropdown>a,
    .submenu>a {
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    .dropdown-menu a,
    .submenu-menu a {
        padding: 12px 0;
        display: block;
    }

}

.mobile-dropdown-menu,
.mobile-submenu {
    display: none;
    padding-left: 18px;
}

.mobile-dropdown.active>.mobile-dropdown-menu {
    display: block;
}

.mobile-submenu-item.active>.mobile-submenu {
    display: block;
}

.mobile-dropdown-toggle,
.mobile-submenu-toggle {

    width: 100%;
    border: none;
    background: none;
    cursor: pointer;

    display: flex;
    justify-content: space-between;
    align-items: center;

    padding: 14px 0;
    font-size: 15px;
}

.mobile-dropdown-toggle span span,
.mobile-submenu-toggle span span {
    display: inline-block;
    transition: transform .3s ease;
}

.mobile-dropdown.active>.mobile-dropdown-toggle span span,
.mobile-submenu-item.active>.mobile-submenu-toggle span span {
    transform: rotate(180deg);
}

.biograpgy-hero {
    min-height: 52vh;
}

/* ================== PRESS RELEASES ================== */
.press-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 24px;
    margin-top: 16px;
}

@media (min-width: 768px) {
    .press-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 1024px) {
    .press-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

.press-card {
    background: white;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    display: flex;
    flex-direction: column;
    cursor: pointer;
    position: relative;
}

.press-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 12px 30px rgba(15, 76, 58, 0.08);
    border-color: var(--gold);
}

.press-card .card-img-wrapper {
    position: relative;
    width: 100%;
    height: 220px;
    overflow: hidden;
    background: var(--forest-deep);
}

.press-card .card-img-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.5s ease;
}

.press-card:hover .card-img-wrapper img {
    transform: scale(1.06);
}

.press-card .cat-tag {
    position: absolute;
    top: 14px;
    left: 14px;
    z-index: 2;
    background: var(--forest);
    color: var(--gold-light);
    font-size:12px;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    padding: 4px 10px;
    border-radius: 999px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.press-card .card-body {
    padding: 20px;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}

.press-card .card-date {
    font-size: 12px;
    color: var(--ink-mute);
    font-weight: 500;
    margin-bottom: 8px;
}

.press-card h3 {
    font-size: 18px;
    color: var(--forest);
    margin-bottom: 10px;
    line-height: 1.4;
    font-family: 'Playfair Display', serif;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.press-card p {
    font-size: 14px;
    color: var(--ink-soft);
    line-height: 1.6;
    margin-bottom: 16px;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.press-card .read-more {
    margin-top: auto;
    font-size: 13px;
    font-weight: 600;
    color: var(--gold-dark);
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: color 0.2s;
}

.press-card:hover .read-more {
    color: var(--forest-light);
}

/* ================== LIGHTBOX MODALS ================== */
.lightbox-modal {
    position: fixed;
    inset: 0;
    z-index: 1100;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

.lightbox-modal.active {
    opacity: 1;
    visibility: visible;
}

.lightbox-overlay {
    position: absolute;
    inset: 0;
    background: rgba(10, 53, 40, 0.85);
    backdrop-filter: blur(8px);
    cursor: pointer;
}

.lightbox-container {
    position: relative;
    z-index: 2;
    background: var(--cream);
    border: 1px solid var(--border);
    box-shadow: 0 25px 60px rgba(0, 0, 0, 0.3);
    border-radius: 16px;
    width: 90%;
    max-width: 800px;
    max-height: 85vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    transform: scale(0.9);
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.lightbox-modal.active .lightbox-container {
    transform: scale(1);
}

.lightbox-close {
    position: absolute;
    top: 16px;
    right: 16px;
    z-index: 10;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: white;
    border: 1px solid var(--border);
    color: var(--forest);
    font-size: 20px;
    display: grid;
    place-items: center;
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    transition: all 0.2s;
}

.lightbox-close:hover {
    background: var(--gold);
    color: var(--forest-deep);
    transform: scale(1.05);
}

/* Media Lightbox Specific */
.media-lightbox .lightbox-container {
    background: #000;
    border: none;
    max-width: 960px;
    aspect-ratio: 16/9;
}

.media-lightbox .lightbox-content {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.media-lightbox img,
.media-lightbox iframe,
.media-lightbox video {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    width: 100%;
    height: 100%;
}

.media-lightbox .caption-bar {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 16px;
    background: linear-gradient(transparent, rgba(0, 0, 0, 0.85));
    color: white;
    font-size: 15px;
    font-weight: 500;
    z-index: 5;
}

/* Press Detail Lightbox Specific */
.press-lightbox .lightbox-container {
    max-width: 720px;
}

.press-lightbox .lightbox-content {
    overflow-y: auto;
    padding: 40px;
}

.press-lightbox .modal-header {
    border-bottom: 1px solid var(--border);
    padding-bottom: 20px;
    margin-bottom: 24px;
}

.press-lightbox .modal-meta {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;
}

.press-lightbox .modal-meta .cat-tag {
    background: var(--forest-deep);
    color: var(--gold-light);
    font-size:12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    padding: 3px 8px;
    border-radius: 999px;
}

.press-lightbox .modal-meta .date {
    font-size: 12px;
    color: var(--ink-mute);
    font-weight: 500;
}

.press-lightbox .modal-title {
    font-size: 26px;
    line-height: 1.3;
    color: var(--forest);
    font-family: 'Playfair Display', serif;
}

.press-lightbox .modal-image-wrapper {
    border-radius: var(--radius);
    overflow: hidden;
    aspect-ratio: 16/9;
    margin-bottom: 24px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.06);
}

.press-lightbox .modal-image-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.press-lightbox .modal-body {
    color: var(--ink-soft);
    font-size: 15px;
    line-height: 1.75;
}

.press-lightbox .modal-body p {
    margin-bottom: 18px;
}

.press-lightbox .modal-footer {
    border-top: 1px solid var(--border);
    padding-top: 20px;
    margin-top: 32px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.press-lightbox .modal-footer .download-link {
    font-size: 13px;
    font-weight: 600;
    color: var(--gold-dark);
    display: inline-flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    transition: color 0.2s;
}

.press-lightbox .modal-footer .download-link:hover {
    color: var(--forest-light);
}

.press-lightbox .modal-footer .share-buttons {
    display: flex;
    gap: 12px;
}

.press-lightbox .modal-footer .share-icon {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 1px solid var(--border);
    display: grid;
    place-items: center;
    font-size: 13px;
    color: var(--ink-soft);
    transition: all 0.2s;
}

.press-lightbox .modal-footer .share-icon:hover {
    border-color: var(--gold);
    color: var(--forest);
    background: rgba(212, 175, 55, 0.1);
}

@media (max-width: 640px) {
    .press-lightbox .lightbox-content {
        padding: 20px;
    }

    .press-lightbox .modal-title {
        font-size: 20px;
    }

    .press-lightbox .modal-footer {
        flex-direction: column;
        align-items: flex-start;
        gap: 16px;
    }

    .lightbox-container {
        width: 95%;
        max-height: 90vh;
    }

    .lightbox-close {
        top: 10px;
        right: 10px;
        width: 32px;
        height: 32px;
        font-size: 16px;
    }
}

/* ================== NEW BIOGRAPHY PAGE STYLES ================== */
/* Custom scrollbar hiding helper */
.scrollbar-none::-webkit-scrollbar {
    display: none;
}

.scrollbar-none {
    -ms-overflow-style: none;
    /* IE and Edge */
    scrollbar-width: none;
    /* Firefox */
}

/* Custom scrollbar styling for horizontal timeline */
.scrollbar-thin::-webkit-scrollbar {
    height: 6px;
}

.scrollbar-thin::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 10px;
}

.scrollbar-thin::-webkit-scrollbar-thumb {
    background: #d4af37;
    border-radius: 10px;
}

.scrollbar-thin::-webkit-scrollbar-thumb:hover {
    background: #a8861e;
}

/* Biography-specific hero styles to reduce height */
.biography-hero {
    min-height: 400px !important;
    /* Compact fixed min-height for biography page */
    padding-top: 120px !important;
    padding-bottom: 50px !important;
}

@media (min-width: 1024px) {

    /* Expand text column width on desktop to prevent tight wrapping */
    .biography-hero .hero-inner {
        grid-template-columns: 1.4fr 0.6fr !important;
    }

    .biography-hero .hero-portrait {
        width: 42% !important;
        /* adjust width of portrait on biography header */
        max-height: 100% !important;
        right: 4% !important;
    }

    .biography-hero .hero-portrait img {
        max-height: 100% !important;
    }
}


/* Global hero portrait sizing adjustments for small screens (both Home and Biography) */
@media (max-width: 1023px) {
    .biography-hero {
        min-height: auto !important;
        padding-top: 110px !important;
        padding-bottom: 30px !important;
    }

    .hero-portrait {
        margin-top: 24px !important;
        width: 100% !important;
        display: flex !important;
        justify-content: center !important;
    }

    .hero-portrait img {
        max-width: 90% !important;
        width: 480px !important;
        height: auto !important;
        max-height: 50vh !important;
        object-fit: contain !important;
    }
}

@media (max-width: 480px) {
    .hero-portrait img {
        max-width: 95% !important;
        width: 320px !important;
    }
}

/* Biography page content image overrides to match text height nicely */
#early-life img,
#message img {
    max-height: 380px !important;
    width: 100% !important;
    object-fit: cover !important;
}

/* Top Navigation adjustments for Malayalam mode to prevent menu items from wrapping */
body.lang-ml .nav-links {
    gap: 12px !important;
}

body.lang-ml .nav-links a {
    font-size: 13px !important;
}

/* Hide Google Translate top banner & tooltip elements */
iframe.goog-te-banner-frame,
.goog-te-banner-frame,
.goog-te-banner,
.goog-te-balloon {
    display: none !important;
}

body {
    top: 0px !important;
    position: static !important;
}

.goog-te-combo {
    display: none !important;
}

.goog-tooltip {
    display: none !important;
}

.goog-tooltip:hover {
    display: none !important;
}

.goog-text-highlight {
    background-color: transparent !important;
    box-shadow: none !important;
}

/* ===========================================================
   PERFORMANCE + RESPONSIVE HARDENING
===========================================================*/
html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

img,
video,
iframe,
svg {
    max-width: 100%;
    height: auto;
}

.table-card,
.table-section,
.content-area,
.form-card {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

table {
    width: 100%;
    border-collapse: collapse;
}

@media (max-width: 1024px) {
    .social-side {
        display: none !important;
    }

    .page-header,
    .section,
    .hero {
        padding-left: max(16px, env(safe-area-inset-left));
        padding-right: max(16px, env(safe-area-inset-right));
    }

    .ideas-container,
    .kailm-banner,
    .form-grid {
        margin-left: 0 !important;
        margin-right: 0 !important;
        width: 100%;
        max-width: 100%;
    }
}

@media (max-width: 768px) {

    #djDebug,
    #djDebugToolbar {
        opacity: 0.3 !important;
        transform: scale(0.7) !important;
        transform-origin: bottom right !important;
    }

    #djDebug:hover,
    #djDebugToolbar:hover {
        opacity: 1 !important;
    }

    h1,
    .hero h1 {
        font-size: clamp(28px, 8vw, 42px);
        line-height: 1.15;
        word-break: break-word;
    }

    .btn,
    .cta-row .btn {
        width: 100%;
        justify-content: center;
    }

    .cta-row {
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
    }

    .footer-bottom {
        flex-direction: column;
        gap: 12px;
        text-align: center;
    }

    .footer-bottom .links {
        justify-content: center;
        flex-wrap: wrap;
    }

    .quick-search {
        grid-template-columns: 1fr !important;
    }

    .media-grid,
    .proj-grid,
    .roles-grid,
    .tf-cards,
    .legacy-cards {
        grid-template-columns: 1fr !important;
    }

    .stats-bar,
    .ideas-stats,
    .ideas-process {
        grid-template-columns: 1fr 1fr !important;
        align-items: center !important;
    }

    .stat-item,
    .stat {
        display: flex !important;
        align-items: center !important;
        justify-content: flex-start !important;
        text-align: left !important;
    }

    .stat-item>div,
    .stat>div,
    .stat-num,
    .stat-lbl {
        text-align: left !important;
    }

    .timeline-inner {
        min-width: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        gap: 20px;
    }

    .tl-circle {
        width: 44px;
        height: 44px;
    }

    .tl-year {
        font-size: 16px;
    }

    .kailm-banner {
        padding: 24px 18px;
        min-height: auto;
    }
}

@media (max-width: 480px) {
    .container {
        padding-left: 14px;
        padding-right: 14px;
    }

    .stat-strip,
    .stats-bar,
    .ideas-stats,
    .ideas-process {
        grid-template-columns: 1fr !important;
    }

    .navbar .brand-text .b1,
    .navbar .brand-text .b2 {
        font-size:12px;
    }
}

/* Global Mobile Spacing & Alignment Optimizations */
@media (max-width: 640px) {

    .hero-actions,
    .hero-btns,
    .cta-row,
    .btn-group {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        text-align: center !important;
        width: 100% !important;
    }

    .hero-actions a,
    .hero-btns a,
    .hero-actions button,
    .hero-btns button {
        width: 100% !important;
        justify-content: center !important;
        text-align: center !important;
    }

    .page-header {
        padding-top: 24px !important;
        padding-bottom: 24px !important;
        text-align: center !important;
    }

    .mb-12,
    .mb-16,
    .mb-20 {
        margin-bottom: 20px !important;
    }

    .mt-12,
    .mt-16,
    .mt-20 {
        margin-top: 20px !important;
    }

    .py-12,
    .py-16,
    .py-20 {
        padding-top: 20px !important;
        padding-bottom: 20px !important;
    }

    .gap-8,
    .gap-10,
    .gap-12 {
        gap: 16px !important;
    }
}

@media (min-width: 768px) {
    .lightbulb {
        padding-left: 12rem;
        padding-right: 2rem;
    }
}
/* Media tile caption: the category label and the title were each pinned to a
   fixed offset from the bottom, so a two-line title grew upward and collided
   with the label. Stack them in one flow container instead. */
.media-tile .tile-meta {
    position: absolute;
    left: 10px;
    right: 10px;
    bottom: 10px;
    z-index: 2;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.media-grid.large .media-tile .tile-meta {
    left: 16px;
    right: 16px;
    bottom: 14px;
}

.media-tile .tile-meta .cat-tag,
.media-tile .tile-meta .ttl {
    position: static;
    left: auto;
    right: auto;
    bottom: auto;
}

/* Cap the title so a very long one cannot overflow the fixed-ratio tile. */
.media-tile .tile-meta .ttl {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* ============================================================================
   AUTH OPTIONS CARD (pages/partials/auth_options_partial.html)
   ----------------------------------------------------------------------------
   Included both on the full-width login page and inside the ~530px left track
   of the submit-idea layout. Tailwind's lg: prefix keys off the VIEWPORT, so
   in the narrow card it still applied the two-column split; combined with a
   12-column grid whose gaps (11 x 48px) exceeded the available width, every
   column computed to 0px and the content was crushed.

   A container query keys off this card's OWN width instead, so it stacks when
   it is narrow and splits only when it genuinely has room for two columns.
   ============================================================================ */
.auth-options {
    container-type: inline-size;
    container-name: authcard;
    /* inline-size containment removes this box's intrinsic width, and the
       card carries mx-auto. Without an explicit basis the auto margins make it
       shrink-to-fit a max-content width of zero, i.e. down to its own padding
       (82px). width:100% makes it fill its track; max-w-6xl still caps it. */
    width: 100%;
}

.auth-options-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 2rem;
}

/* Stacked: the register half sits below, separated by a rule. */
.auth-options-register {
    padding-top: 1.5rem;
    border-top: 1px solid rgb(226 232 240);
}

/* The vertical "or" divider only makes sense across two columns. */
.auth-options-divider {
    display: none;
}

@container authcard (min-width: 720px) {
    .auth-options-grid {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        gap: 3rem;
    }

    .auth-options-register {
        padding-top: 0;
        border-top: 0;
    }

    .auth-options-divider {
        display: flex;
    }
}

/* Browsers without container queries keep the safe stacked layout above. */

/* ============================================================================
   TRICOLOUR TOP BAND
   ----------------------------------------------------------------------------
   A 3px saffron | white | green band across the top edge of a panel, matching
   the bar at the top of <body> in base.html. Used on the dark electoral
   panels: they carry white text, so a full tricolour fill would leave no
   readable text colour across the white band -- the band gives the tricolour
   reading while the panel stays legible.
   ============================================================================ */
.tricolour-top {
    position: relative;
    overflow: hidden;
}

.tricolour-top::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg,
            #FF9933 0 33.333%,
            #FFFFFF 33.333% 66.666%,
            #138808 66.666% 100%);
    pointer-events: none;
    z-index: 5;
}

/* ============================================================================
   STICKY FOOTER
   ----------------------------------------------------------------------------
   On a page shorter than the browser window the document simply ended at the
   footer, and the canvas painted body's cream background over the rest of the
   viewport -- reading as a blank band under the footer.

   body already carried `min-height: 100%`, but that resolved against html's
   auto height, so it did nothing. A viewport-relative minimum plus a column
   flex layout pushes the footer to the bottom of the window instead. 100dvh
   first so mobile browser chrome does not leave a sliver.
   ============================================================================ */
html {
    min-height: 100%;
}

/* !important is load-bearing here: the Google Translate widget writes
   `position: relative; min-height: 100%; top: 0px` as an INLINE style on
   <body> once its script loads. An inline style outranks any stylesheet, and
   its `100%` resolves against an auto-height <html>, so it collapses to
   nothing -- which is what left the blank band under the footer. */
body {
    min-height: 100vh !important;
    min-height: 100dvh !important;
    display: flex;
    flex-direction: column;
}

/* Column flex items may not shrink below their content on short pages. */
body > * {
    flex-shrink: 0;
}

/* Takes up the slack, so the footer sits on the bottom edge. */
body > footer {
    margin-top: auto;
}