/* =========================================================================
   AFRICA LEADERSHIP AWARDS — CANONICAL STYLESHEET
   =========================================================================
   Single source of truth for site-wide styling. Every page links this file
   once (via header.php) instead of carrying its own local <style> block.

   Consolidated from 15 previously-independent per-page stylesheets. Where
   the same component existed as multiple near-identical copies across
   files, they were collapsed to one canonical definition here — see the
   comments marking each section for which pages used to duplicate it.

   Resolved value conflicts (previously divergent across files):
     - Gold accent canonical value: #e6c89a (the value already live via the
       old header.php cascade; two other stale fallback values, #dcb375 and
       #dcaf75, existed elsewhere but never actually rendered — deleted).
     - --space-md canonical value: 32px (was 32px on 3 pages, 16px on 2).
     - Card/hover motion easing unified to cubic-bezier(0.16, 1, 0.3, 1)
       site-wide (awards.php/sponsors.php previously used a different curve,
       cubic-bezier(0.2, 0.8, 0.2, 1) — the one deliberate visual change in
       this consolidation).
     - index.php's lighter --bg-void (#1a1a20 vs #09090c elsewhere) is kept
       as an intentional homepage-only variant, applied via body.page-home.
   ========================================================================= */

/* =========================================================================
   1. RESET / BASE
   ========================================================================= */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
    margin: 0;
    background: var(--bg-void);
    color: var(--text-bone);
    font-family: var(--font-sans);
    -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }

/* =========================================================================
   2. DESIGN TOKENS
   ========================================================================= */
:root {
    /* --- Color --- */
    --bg-void: #09090c;
    --bg-panel: #121216;
    --bg-gradient-radial: radial-gradient(circle at center, #1f1f25 0%, #09090c 100%);

    --gold-primary: #e6c89a;
    --gold-luminous: #fff3d6;
    --gold-structure: rgba(230, 200, 154, 0.5);
    --gold-wash: rgba(230, 200, 154, 0.08);

    --white-pure: #ffffff;
    --white-structure: rgba(255, 255, 255, 0.2);
    --text-bone: #f8f8f8;
    --text-graphite: #b0b0b8;
    --text-body: rgba(227, 227, 220, 0.75);

    --color-error: #ff6b6b;

    /* --- Typography --- */
    --font-serif: "Figtree", sans-serif;
    --font-sans: "Figtree", sans-serif;
    --font-tech: "Figtree", sans-serif;
    --size-label: 0.75rem;
    --size-body: 1.05rem;

    /* --- Spacing (8pt scale) --- */
    --space-unit: 8px;
    --space-xxs: calc(var(--space-unit) * 0.5); /* 4px */
    --space-xs: var(--space-unit);              /* 8px */
    --space-sm: calc(var(--space-unit) * 2);    /* 16px */
    --space-md: calc(var(--space-unit) * 4);    /* 32px */
    --space-lg: calc(var(--space-unit) * 7);    /* 56px */
    --space-xl: calc(var(--space-unit) * 11);   /* 88px */

    /* --- Structural constants --- */
    --sidebar-width: 280px;
    --curve-soft: 12px;
    --height-hero: 50vh;
    --min-height-hero: 420px;

    /* --- Motion --- */
    --ease-mech: cubic-bezier(0.16, 1, 0.3, 1);
    --duration-macro: 0.8s;
    --duration-micro: 0.3s;
    --duration-fast: 0.3s;
    --duration-slow: 0.5s;
}

/* Homepage-only atmosphere: intentionally lighter than the site default
   (kept as a deliberate variant, not drift — see file header note). */
body.page-home {
    --bg-void: #1a1a20;
    --bg-panel: #282832;
    --bg-gradient-radial: radial-gradient(circle at center, #3a3a45 0%, #1a1a20 100%);
    --text-graphite: #b0b0b8;
}
body.page-home .monolith-sidebar { background: var(--bg-void); }

/* =========================================================================
   3. LAYOUT — Sidebar shell, grid, page wrapper
   ========================================================================= */
.master-grid { display: flex; min-height: 100vh; }

.viewport-frame { margin-left: var(--sidebar-width); width: calc(100% - var(--sidebar-width)); }

.monolith-sidebar {
    width: var(--sidebar-width);
    background: #08080a;
    border-right: 1px solid var(--gold-structure);
    box-shadow: 10px 0 40px -16px rgba(0, 0, 0, 0.75);
    position: fixed; inset: 0 auto 0 0; z-index: 1000;
    display: flex; flex-direction: column;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)' opacity='0.05'/%3E%3C/svg%3E");
    transition: transform var(--duration-macro) var(--ease-mech);
}
.monolith-header {
    padding: 3rem 2rem; border-bottom: 1px solid var(--gold-structure); text-align: center;
    /* Subtle warm glow centered behind the mark, on top of the flat panel
       tint, so the logo has something to visually lift off of. */
    background: radial-gradient(ellipse at center, rgba(230, 200, 154, 0.08) 0%, rgba(255,255,255,0.02) 70%);
}
.monolith-logo {
    height: 72px; /* was 60px -- more presence in the header */
    /* text-align:center on the header has no effect here: the <img> here
       computes to display:block (Bootstrap's image reset), and block
       elements ignore text-align. Centered explicitly instead. */
    display: block;
    margin-inline: auto;
    /* Lift the gold off the near-black sidebar without touching the
       source artwork's own colors. */
    filter: brightness(1.15) contrast(1.08) drop-shadow(0 0 14px rgba(230, 200, 154, 0.3));
}
.mobile-trigger {
    display: none; position: fixed; top: 1.5rem; right: 1.5rem; z-index: 1100;
    width: 44px; height: 44px; background: var(--bg-void); border: 1px solid var(--gold-primary);
    flex-direction: column; align-items: center; justify-content: center; gap: 5px; cursor: pointer;
}
.trig-line { width: 20px; height: 1px; background: var(--gold-primary); }

/* Generic dark page wrapper used by several page-specific hero sections
   (about-us, awards, contact-us, nomination-form, registration-form,
   sponsors) — was independently redefined per file under 4 different
   names (.page-wrapper / .console-wrapper / .alliance-wrapper /
   .comms-wrapper / .awards-page-wrapper); kept as page-specific aliases
   below since renaming the markup class wasn't required for this refactor.
   All resolve to the same declaration. */
.page-wrapper, .console-wrapper, .alliance-wrapper, .comms-wrapper, .awards-page-wrapper {
    background: var(--bg-void);
    position: relative;
    overflow: hidden;
}

/* =========================================================================
   4. TYPOGRAPHY UTILITIES
   ========================================================================= */

/* .txt-* : compact inline labels/headings used in cards, nav, badges. */
.txt-label { font-family: var(--font-tech); font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--gold-primary); }
.txt-hero { font-family: var(--font-serif); font-weight: 300; line-height: 0.95; letter-spacing: -0.02em; color: var(--white-pure); }
.txt-body { font-family: var(--font-sans); font-weight: 300; line-height: 1.6; color: rgba(240, 240, 235, 0.8); }
.text-gradient {
    font-weight: 600;
    background: linear-gradient(135deg, #fff 25%, var(--gold-primary) 85%);
    -webkit-background-clip: text; -webkit-text-fill-color: transparent;
    filter: drop-shadow(0 0 24px rgba(230, 200, 154, 0.35));
}

/* .sys-* : page-hero label/heading/body set, with a decorative leading
   bar on the label. Previously duplicated verbatim across 6 files
   (about-us, awards, contact-us, nomination-form, registration-form,
   sponsors) — collapsed to one definition here. Kept distinct from
   .txt-* rather than merged into it: different rhythm (flex + leading
   bar + built-in bottom margin) suited to hero sections specifically. */
.sys-label {
    font-family: var(--font-tech);
    font-size: var(--size-label);
    color: var(--gold-primary);
    text-transform: uppercase;
    letter-spacing: 0.15em;
    display: flex;
    align-items: center;
    margin-block-end: var(--space-md);
}
.sys-label::before {
    content: '';
    display: block;
    width: 2px;
    height: 12px;
    background: var(--gold-primary);
    margin-inline-end: 12px;
    box-shadow: 0 0 8px var(--gold-primary);
}
.sys-heading {
    font-family: var(--font-serif);
    font-weight: 400;
    line-height: 1.1;
    color: var(--white-pure);
    margin-block-end: var(--space-md);
}
.sys-body {
    font-family: var(--font-sans);
    font-size: var(--size-body);
    font-weight: 300;
    line-height: 1.7;
    color: var(--text-body);
    max-width: 640px;
}
.text-accent { color: var(--gold-primary); }

/* Compact inline label variant (no leading bar), for use inside cards. */
.role-label {
    font-family: var(--font-tech);
    font-size: var(--size-label);
    text-transform: uppercase;
    letter-spacing: 0.16em;
    color: var(--gold-primary);
    display: block;
    margin-block-start: 0.4rem;
    opacity: 0.85;
}

/* =========================================================================
   5. BUTTONS
   ========================================================================= */
.btn-construct {
    position: relative;
    display: inline-flex; align-items: center; justify-content: center;
    padding: 1rem 2.5rem;
    border: 1px solid var(--gold-primary);
    color: var(--bg-void);
    background: var(--gold-primary);
    font-family: var(--font-tech); font-size: 0.75rem; letter-spacing: 0.1em; text-transform: uppercase;
    font-weight: 700;
    overflow: hidden; transition: all var(--duration-micro) ease;
}
.btn-construct::before {
    content: ''; position: absolute; inset: 0; background: var(--white-pure);
    transform: translateY(100%); transition: transform var(--duration-micro) var(--ease-mech); z-index: 0;
}
.btn-construct:hover { color: var(--bg-void); border-color: var(--white-pure); }
.btn-construct:hover::before { transform: translateY(0); }
.btn-construct span { position: relative; z-index: 1; }
.btn-construct--glow { animation: ctaGlow 2.4s ease-in-out infinite; }
.btn-construct--glow:hover { animation: none; }
@keyframes ctaGlow {
    0%, 100% { box-shadow: 0 0 0 0 rgba(230, 200, 154, 0.4); }
    50% { box-shadow: 0 0 24px 4px rgba(230, 200, 154, 0.4); }
}
.btn-construct.is-loading { opacity: 0.7; }

/* =========================================================================
   6. NAV / SIDEBAR ITEMS
   ========================================================================= */
.nav-group-label {
    font-family: var(--font-tech); font-size: 0.62rem; letter-spacing: 0.18em;
    text-transform: uppercase; color: var(--text-graphite); opacity: 0.5;
    padding: 1.35rem 2.5rem 0.5rem;
}
.nav-group:first-child .nav-group-label { padding-top: 0.5rem; }

.nav-node {
    position: relative;
    display: flex; align-items: center; gap: 0.85rem;
    padding: 1rem 2.5rem;
    color: var(--text-graphite);
    transition: all var(--duration-micro) ease;
    border-bottom: 1px solid rgba(255,255,255,0.02);
}
.nav-node::before {
    content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
    background: var(--gold-luminous); transform: scaleY(0); transition: transform 0.4s var(--ease-mech);
}
.nav-icon { font-size: 0.95rem; width: 18px; text-align: center; flex-shrink: 0; color: var(--text-graphite); opacity: 0.55; transition: all 0.35s var(--ease-mech); }
.nav-idx { font-family: var(--font-tech); font-size: 0.65rem; color: var(--gold-primary); opacity: 0.45; transition: all 0.4s ease; }
.nav-label { font-family: var(--font-serif); font-size: 1.1rem; letter-spacing: 0.02em; transition: transform 0.4s ease; }

.nav-node:hover, .nav-node.active, .nav-node:focus-visible { background: rgba(220, 179, 117, 0.1); color: var(--white-pure); }
.nav-node:focus-visible { outline: none; box-shadow: inset 0 0 0 1px var(--gold-primary); }
.nav-node:hover::before, .nav-node.active::before, .nav-node:focus-visible::before { transform: scaleY(1); }
.nav-node:hover .nav-icon, .nav-node.active .nav-icon, .nav-node:focus-visible .nav-icon { opacity: 1; color: var(--gold-luminous); transform: scale(1.12); }
.nav-node:hover .nav-idx, .nav-node.active .nav-idx, .nav-node:focus-visible .nav-idx { opacity: 1; color: var(--white-pure); }
.nav-node:hover .nav-label, .nav-node.active .nav-label, .nav-node:focus-visible .nav-label { transform: translateX(6px); }
.nav-node.active .nav-label { font-weight: 500; }

/* =========================================================================
   7. HOMEPAGE HERO
   ========================================================================= */
.hero-section {
    position: relative; height: 100vh; overflow: hidden;
    display: flex; align-items: center; justify-content: center;
    border-bottom: 1px solid var(--gold-structure);
    background: var(--bg-void);
}
.hero-bg { position: absolute; inset: 0; z-index: 0; overflow: hidden; }
.hero-slider-image {
    position: absolute; inset: 0; width: 100%; height: 100%;
    object-fit: cover; object-position: center;
    opacity: 0; transform: scale(1);
    transition: opacity 1.8s ease-in-out, transform 9s linear;
    /* Warm amber cast. A prior mix-blend-mode: luminosity here stripped
       this back to grayscale (luminance-only, composited against a
       colorless void) -- removed so the color actually renders. */
    filter: sepia(45%) hue-rotate(-6deg) saturate(1.7) brightness(0.62) contrast(1.15);
}
.hero-slider-image.active { opacity: 0.92; transform: scale(1.07); }

.hero-vignette {
    position: absolute; inset: 0; z-index: 1;
    background:
        radial-gradient(ellipse 65% 50% at 50% 46%, rgba(0,0,0,0) 0%, rgba(5,5,5,0.4) 60%, var(--bg-void) 95%),
        radial-gradient(circle at 50% 42%, rgba(230, 200, 154, 0.22) 0%, transparent 55%);
}
.hero-container { position: relative; z-index: 5; text-align: center; max-width: 1200px; padding: 0 1rem; }

@keyframes heroRise { from { opacity: 0; transform: translateY(26px); } to { opacity: 1; transform: translateY(0); } }

.hero-date {
    display: inline-flex; align-items: center; gap: 0.6em;
    padding: 0.6rem 1.25rem; border: 1px solid var(--gold-primary);
    color: var(--gold-luminous); background: rgba(230, 200, 154, 0.1);
    backdrop-filter: blur(6px); margin-bottom: 2rem; font-weight: 700;
    animation: heroRise 0.8s var(--ease-mech) both;
}
.hero-date::before {
    content: ''; width: 7px; height: 7px; border-radius: 50%;
    background: var(--gold-luminous); flex-shrink: 0;
    animation: heroPulse 2.2s ease-out infinite;
}
@keyframes heroPulse {
    0% { box-shadow: 0 0 0 0 rgba(255, 243, 214, 0.55); }
    70% { box-shadow: 0 0 0 9px rgba(255, 243, 214, 0); }
    100% { box-shadow: 0 0 0 0 rgba(255, 243, 214, 0); }
}

.hero-headline {
    font-size: clamp(3rem, 7vw, 7rem); margin-bottom: 1.5rem; position: relative;
    text-shadow: 0 10px 30px rgba(0,0,0,0.8);
    animation: heroRise 0.9s var(--ease-mech) 0.15s both;
}
.hero-headline span { display: block; }
.hero-headline span:first-child { font-weight: 300; opacity: 0.94; }

.hero-accent-line {
    width: 70px; height: 2px; margin: 0 auto;
    background: linear-gradient(90deg, transparent, var(--gold-primary), transparent);
    transform: scaleX(0); animation: heroLineDraw 0.7s var(--ease-mech) 0.35s both;
}
@keyframes heroLineDraw { to { transform: scaleX(1); } }

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; }
}
.hero-container .mt-5 { animation: heroRise 0.9s var(--ease-mech) 0.5s both; }


/* --- Mandate panels (was: narrative loom slider) ---
   Previously an accordion where only one of three panels showed content
   at a time; the other two collapsed to sideways spine text, invisible
   until hovered/clicked. Same failure mode as the old totem pillars grid
   -- replaced with the same fix: three equal panels, full content always
   visible, no interaction required. Full-bleed photography kept since
   it's this section's visual identity; only the reveal mechanic changed. */
.mandate-section { background: var(--bg-panel); padding: 0; overflow: hidden; }
.mandate-grid { display: flex; height: 80vh; max-height: 800px; width: 100%; border-bottom: 1px solid var(--gold-structure); }
.mandate-panel { position: relative; flex: 1; border-right: 1px solid var(--white-structure); overflow: hidden; background: #111; }
.mandate-panel:last-child { border-right: none; }
.mandate-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; filter: grayscale(0.55) brightness(0.55) contrast(1.05); transition: transform 1.2s ease, filter 0.8s ease; }
.mandate-panel:hover .mandate-img { transform: scale(1.06); filter: grayscale(0.1) brightness(0.65) contrast(1.1); }
.mandate-scrim { position: absolute; inset: 0; background: linear-gradient(to top, rgba(0,0,0,0.92) 18%, rgba(0,0,0,0.4) 55%, rgba(0,0,0,0.05) 100%); }
.mandate-content { position: absolute; inset: 0; z-index: 2; display: flex; flex-direction: column; justify-content: flex-end; padding: 3rem; }
.mandate-idx { font-family: var(--font-tech); color: var(--gold-primary); font-size: 1.05rem; font-weight: 700; display: inline-block; margin-bottom: 1rem; padding-bottom: 0.35rem; border-bottom: 1px solid var(--gold-primary); width: fit-content; }
.mandate-title { font-family: var(--font-serif); font-weight: 300; line-height: 1.05; color: var(--white-pure); font-size: 1.9rem; margin-bottom: 0.85rem; }
.mandate-desc { font-family: var(--font-sans); font-weight: 300; line-height: 1.55; color: rgba(240, 240, 235, 0.85); font-size: 0.92rem; max-width: 340px; margin-bottom: 1.75rem; }

/* --- Pillars grid --- */
.pillars-section { padding: 8rem 0; background: var(--bg-gradient-radial); border-bottom: 1px solid var(--gold-structure); }
.pillars-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 1px; background: var(--gold-structure); border: 1px solid var(--gold-structure); }
.pillar-card { position: relative; background: var(--bg-void); padding: 3rem 2rem; display: flex; flex-direction: column; transition: background 0.4s ease; }
.pillar-card:hover { background: #16161c; }
.pillar-card::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 2px; background: var(--gold-primary); transform: scaleX(0); transform-origin: left; transition: transform 0.5s var(--ease-mech); }
.pillar-card:hover::before { transform: scaleX(1); }
.pillar-num { font-family: var(--font-tech); font-size: 0.75rem; color: var(--text-graphite); opacity: 0.6; margin-bottom: 2rem; }
.pillar-icon { font-size: 2rem; color: var(--gold-primary); opacity: 0.7; margin-bottom: 1.5rem; transition: all 0.4s ease; }
.pillar-card:hover .pillar-icon { opacity: 1; transform: scale(1.08); filter: drop-shadow(0 0 12px rgba(220, 179, 117, 0.4)); }
.pillar-title { font-size: 1.35rem; line-height: 1.2; color: var(--white-pure); margin-bottom: 1rem; }
.pillar-desc { font-size: 0.9rem; line-height: 1.6; color: var(--text-graphite); margin-bottom: 2rem; flex-grow: 1; }
.pillar-link { display: inline-flex; align-items: center; gap: 0.5em; font-family: var(--font-tech); font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--gold-primary); text-decoration: none; transition: gap 0.3s ease, color 0.3s ease; }
.pillar-link:hover { gap: 0.8em; color: var(--white-pure); }

/* =========================================================================
   8. SHARED HERO HEADER — used by about-us, awards, contact-us,
      nomination-form, registration-form, sponsors (6 files; was
      independently redefined in each — collapsed here).
   ========================================================================= */
.hero-uplink {
    height: var(--height-hero);
    min-height: var(--min-height-hero);
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    text-align: center;
    background: radial-gradient(circle at center, #1a1a20 0%, var(--bg-void) 100%);
    border-block-end: 1px solid var(--gold-structure);
    position: relative;
    overflow: hidden;
}
.hero-uplink::after {
    content: '';
    position: absolute; inset: 0;
    background-image:
        linear-gradient(0deg, transparent 24%, var(--gold-structure) 25%, var(--gold-structure) 26%, transparent 27%, transparent 74%, var(--gold-structure) 75%, var(--gold-structure) 76%, transparent 77%, transparent),
        linear-gradient(90deg, transparent 24%, var(--gold-structure) 25%, var(--gold-structure) 26%, transparent 27%, transparent 74%, var(--gold-structure) 75%, var(--gold-structure) 76%, transparent 77%, transparent);
    background-size: 60px 60px;
    opacity: 0.05;
    pointer-events: none;
}
/* Canonical H1 treatment for this header family. Previously each of the
   6 pages set its own font-size (and sometimes margin) inline on the H1
   -- 5 of 6 agreed on clamp(3rem,6vw,5rem) with the shared class's
   default margin, contact-us.php silently drifted to a 6rem cap, and
   about-us.php/nomination-form.php independently shaved the margin to
   1.25rem despite an identical eyebrow->H1->breadcrumb structure to the
   pages that didn't. None of that was structural, just drift -- scoping
   the rule to the container makes it structurally impossible for a page
   to diverge without an explicit, visible override. */
.hero-uplink h1 { font-size: clamp(3rem, 6vw, 5rem); }

/* .uplink-header (formerly used by event-highlights, get-involved,
   media-highlights, nomination.php) retired: those 4 pages now use
   .hero-uplink above, so every inner page shares one header component
   instead of two. .content-section (unrelated body-content spacing,
   still used by the same 4 pages below their header) stays. */
.content-section { padding: 8rem 0; position: relative; border-bottom: 1px solid rgba(230, 200, 154, 0.05); }
.content-section:last-of-type { border-bottom: none; }

/* =========================================================================
   9. FORM ENGINEERING — input/label/console shell, used by contact-us,
      nomination-form, registration-form (was 3 independent copies;
      registration-form.php's copy additionally had the whole block
      pasted twice into itself, and its .sys-heading referenced an
      undefined --font-family-serif that silently fell back to the
      browser's generic serif font instead of Figtree — both fixed by
      routing everyone through this single definition).
   ========================================================================= */
.console-slab {
    background: rgba(14, 14, 18, 0.8);
    backdrop-filter: blur(20px);
    border: 1px solid var(--gold-structure);
    padding: 4rem;
    position: relative;
    margin-block-start: -80px;
    z-index: 10;
    box-shadow: 0 50px 100px -20px rgba(0,0,0,0.9);
}
.console-slab::after, .console-slab::before { content: '+'; position: absolute; color: var(--gold-structure); font-family: var(--font-tech); font-size: 1.2rem; }
.console-slab::after { inset-block-start: 10px; inset-inline-end: 10px; }
.console-slab::before { inset-block-end: 10px; inset-inline-start: 10px; }

/* .field-group (contact-us.php): the form previously wrapped each
   label+input pair in Bootstrap's own .input-group, a component meant for
   input+addon combos (display:flex, no vertical gap) -- not a plain
   vertical field wrapper. That left every field touching the next with
   zero spacing. .field-group is this page's actual spacing wrapper. */
.field-group { margin-block-end: 1.75rem; }

.group-header { border-block-end: 1px solid var(--gold-structure); margin-block-end: 2rem; padding-block-end: 0.5rem; margin-block-start: 2rem; }
.group-label { font-family: var(--font-tech); color: var(--gold-primary); font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.15em; }
.label-tech { font-family: var(--font-tech); font-size: 0.7rem; text-transform: uppercase; color: var(--text-graphite); margin-block-end: 0.5rem; display: block; letter-spacing: 0.1em; }
.required::after { content: " *"; color: var(--gold-primary); }

.input-tech {
    width: 100%;
    background: rgba(255, 255, 255, 0.02);
    border: none;
    border-block-end: 1px solid rgba(255, 255, 255, 0.2);
    color: var(--white-pure);
    font-family: var(--font-sans);
    font-size: 1rem;
    padding: 0.8rem 1rem;
    transition: all var(--duration-fast) var(--ease-mech);
    border-radius: 0;
}
.input-tech:focus {
    outline: none;
    border-block-end-color: var(--gold-primary);
    background: linear-gradient(to bottom, transparent 95%, rgba(220, 179, 117, 0.1) 100%);
}
.input-tech::placeholder { color: rgba(255, 255, 255, 0.55); font-family: var(--font-tech); font-size: 0.8rem; }
textarea.input-tech { border: 1px solid rgba(255, 255, 255, 0.2); min-height: 150px; }
textarea.input-tech:focus { border-color: var(--gold-primary); background: rgba(255, 255, 255, 0.02); }
select.input-tech {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23dcb375' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: right 1rem center; background-size: 16px;
    appearance: none; -webkit-appearance: none; cursor: pointer;
}
select.input-tech option { background: #0e0e12; color: var(--white-pure); padding: 10px; }

.form-check-input { background-color: transparent; border: 1px solid var(--gold-structure); border-radius: 0; cursor: pointer; }
.form-check-input:checked { background-color: var(--gold-primary); border-color: var(--gold-primary); box-shadow: 0 0 10px rgba(220, 179, 117, 0.4); }
.form-check-label { color: rgba(255,255,255,0.7); font-family: var(--font-sans); font-size: 0.9rem; cursor: pointer; }
.terms-link { color: var(--gold-primary); text-decoration: none; border-block-end: 1px dashed var(--gold-structure); }

.alert-tech { background: rgba(220, 179, 117, 0.1); border: 1px solid var(--gold-primary); color: var(--gold-primary); font-family: var(--font-tech); font-size: 0.8rem; padding: 1rem; margin-block-end: 2rem; display: flex; align-items: center; gap: 1rem; }
.alert-error { border-color: var(--color-error); color: var(--color-error); background: rgba(255, 107, 107, 0.05); }
.invalid-feedback { font-family: var(--font-tech); font-size: 0.7rem; color: var(--color-error); display: none; margin-block-start: 5px; padding-inline-start: 1rem; }
.was-validated .input-tech:invalid ~ .invalid-feedback { display: block; }
.group-separator { margin-block-start: 3rem; padding-block-start: 1.5rem; border-block-start: 1px dashed rgba(255,255,255,0.1); }

/* =========================================================================
   10. CONTACT PAGE — signal grid, map interface
   ========================================================================= */
.signal-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); background: var(--gold-structure); gap: 1px; border-block-end: 1px solid var(--gold-structure); }
.signal-node { background: var(--bg-void); padding: 4rem 2rem; display: flex; flex-direction: column; align-items: center; text-align: center; transition: all var(--duration-fast) var(--ease-mech); position: relative; }
.signal-node:hover { background: rgba(220, 179, 117, 0.02); }
.node-icon { font-size: 2rem; color: var(--gold-primary); margin-block-end: 1.5rem; opacity: 0.7; transition: transform var(--duration-fast) ease, filter var(--duration-fast) ease; }
.signal-node:hover .node-icon { transform: scale(1.1); filter: drop-shadow(0 0 10px rgba(220, 179, 117, 0.5)); opacity: 1; }
.node-label { font-family: var(--font-tech); color: var(--text-graphite); font-size: var(--size-label); letter-spacing: 0.15em; text-transform: uppercase; margin-block-end: 0.5rem; }
.node-value { font-family: var(--font-serif); color: var(--white-pure); font-size: 1.5rem; line-height: 1.2; }

.console-section { display: flex; flex-wrap: wrap; min-height: 800px; position: relative; }
.console-interface { flex: 1; min-width: 400px; padding: 6rem; background: var(--bg-void); border-inline-end: 1px solid var(--gold-structure); }
.console-interface h2 { font-size: 2.5rem; margin-block-start: 1rem; }
.map-interface { flex: 1; min-width: 400px; position: relative; background: #000; overflow: hidden; }
.map-frame { width: 100%; height: 100%; border: none; filter: grayscale(100%) invert(90%) contrast(90%) hue-rotate(180deg) brightness(0.9); opacity: 0.8; transition: opacity var(--duration-slow) ease; }
.map-interface:hover .map-frame { opacity: 1; filter: grayscale(100%) invert(90%) contrast(100%) hue-rotate(180deg) brightness(1); }
.map-overlay { position: absolute; inset-block-end: 2rem; inset-inline-start: 2rem; background: rgba(5, 5, 5, 0.9); border: 1px solid var(--gold-structure); padding: 1.5rem; backdrop-filter: blur(10px); pointer-events: none; }

@media (max-width: 991px) {
    .console-section { flex-direction: column; min-height: auto; }
    .console-interface { flex: 0 0 auto; padding: 3rem 1.5rem; border-inline-end: none; border-block-end: 1px solid var(--gold-structure); }
    /* flex: 0 0 auto resets the desktop flex:1 (flex-basis:0%) -- without
       it, this explicit height is squashed to near-zero because the
       column-direction parent has min-height:auto and nothing to grow
       into. Same bug class as the mandate-panel/pillars-grid fixes. */
    .map-interface { flex: 0 0 auto; height: 400px; min-width: 100%; }
}

/* =========================================================================
   11. CARDS — event-highlights (tech-card), awards (monolith-card),
       get-involved (involve-card), media-highlights (press-card, video
       frame, reel carousel), about-us (personnel-card). Kept as distinct
       classes: each is visually different (grid density, icon size,
       hover reveal vs always-visible), not accidental duplication.
   ========================================================================= */

/* --- event-highlights.php --- */
.tech-card { height: 100%; background: var(--bg-panel); border: 1px solid var(--gold-structure); position: relative; transition: all 0.4s var(--ease-mech); overflow: hidden; }
.tech-card:hover { border-color: var(--gold-primary); transform: translateY(-5px); box-shadow: 0 10px 40px -10px rgba(0,0,0,0.8); }
.tech-card-img { height: 250px; width: 100%; position: relative; overflow: hidden; border-bottom: 1px solid var(--gold-structure); }
.tech-card-img img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(100%) contrast(1.1); transition: 0.8s ease; }
.tech-card:hover .tech-card-img img { filter: grayscale(0%) contrast(1.1) sepia(0.2); transform: scale(1.05); }
.tech-card-body { padding: 2rem; }
.tech-card-img img.crop-top-heavy { transform: scale(1.4); transform-origin: center 85%; }
.tech-card:hover .tech-card-img img.crop-top-heavy { transform: scale(1.47); transform-origin: center 85%; }

.data-grid-container { background: var(--bg-panel); border: 1px solid var(--gold-structure); padding: 4px; }
.data-table { width: 100%; border-collapse: collapse; }
.data-table thead th { font-family: var(--font-tech); background: var(--gold-primary); color: var(--bg-void); padding: 1.5rem; text-transform: uppercase; font-size: 0.75rem; letter-spacing: 0.1em; font-weight: 700; }
.data-table tbody tr { border-bottom: 1px solid rgba(255,255,255,0.03); transition: background 0.3s ease; }
.data-table tbody tr:hover { background: rgba(230, 200, 154, 0.05); }
.data-table td { padding: 1.5rem; vertical-align: middle; }
.cell-time { font-family: var(--font-tech); color: var(--gold-primary); width: 15%; white-space: nowrap; }
.cell-event { font-family: var(--font-sans); color: var(--text-bone); font-size: 1rem; font-weight: 300; }

.profile-card { background: var(--bg-panel); border: 1px solid var(--gold-structure); padding: 2.5rem; height: 100%; position: relative; transition: 0.4s var(--ease-mech); }
.profile-card:hover { background: rgba(255,255,255,0.02); border-color: var(--gold-primary); }
.profile-card::before { content: ''; position: absolute; top: 0; left: 0; width: 40px; height: 40px; background: linear-gradient(135deg, var(--gold-primary) 50%, transparent 50%); opacity: 0.5; }
.profile-role { display: inline-block; font-family: var(--font-tech); font-size: 0.65rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--bg-void); background: var(--gold-primary); padding: 4px 8px; margin-bottom: 1.5rem; font-weight: 700; }

/* --- awards.php --- */
/* Fixed (not auto-fit) column counts: auto-fit computed a different column
   count at nearly every viewport width (2 at 1280px, 3 at 1440px, 4 at
   1920px, 6 at 2560px...), and 6 cards don't divide evenly into 4 -- that's
   what exposed the gold grid background as empty cells in the last row at
   common widescreen resolutions. 6 divides evenly by 1, 2, and 3, so locking
   to those column counts (at this file's existing 768/991.98 breakpoints)
   removes the gap at every width instead of patching one specific case. */
.monolith-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background-color: var(--gold-structure); border-block: 1px solid var(--gold-structure); }
.monolith-card { background-color: var(--bg-void); height: auto; min-height: 420px; position: relative; padding: 4rem 3rem; display: flex; flex-direction: column; justify-content: space-between; cursor: pointer; transition: all var(--duration-slow) var(--ease-mech); }
.monolith-card:hover { background-color: #0b0b0e; box-shadow: inset 0 0 100px rgba(220, 179, 117, 0.05); }
.monolith-card::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 2px; background: var(--gold-primary); transform: scaleX(0); transform-origin: left; transition: transform var(--duration-slow) var(--ease-mech); }
.monolith-card:hover::before { transform: scaleX(1); }
.mono-icon { font-size: 3rem; color: var(--gold-primary); opacity: 0.7; margin-block-end: 2rem; transform-origin: left center; transition: all var(--duration-slow) ease; }
.monolith-card:hover .mono-icon { opacity: 1; transform: scale(1.1); filter: drop-shadow(0 0 15px rgba(220, 179, 117, 0.4)); }
.mono-num { position: absolute; top: 2rem; right: 2rem; font-family: var(--font-tech); font-size: 0.8rem; color: var(--text-graphite); opacity: 0.5; }
.mono-title { font-family: var(--font-serif); font-size: 2rem; color: var(--white-pure); margin-block-end: 1rem; line-height: 1.1; }
.mono-desc { font-family: var(--font-sans); color: rgba(255,255,255,0.6); font-size: 1rem; line-height: 1.6; }
.mono-eligibility { display: block; margin-block-start: 0.85rem; font-family: var(--font-tech); font-size: 0.7rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-graphite); }
.mono-link { margin-block-start: auto; padding-block-start: 1.5rem; display: inline-flex; align-items: center; text-decoration: none; font-family: var(--font-tech); font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--gold-primary); }
.mono-link i { transition: transform var(--duration-fast) ease; }
.monolith-card:hover .mono-link i { transform: translateX(4px); }

.flagship-badge { font-family: var(--font-tech); font-size: 0.7rem; letter-spacing: 0.15em; text-transform: uppercase; color: var(--gold-primary); margin-block-end: 1.5rem; }

@media (max-width: 991.98px) {
    .monolith-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 768px) {
    .monolith-grid { grid-template-columns: 1fr; }
    .monolith-card { padding: 3rem 2rem; }
}

/* --- get-involved.php --- */
.involve-card { height: 100%; background: var(--bg-panel); border: 1px solid var(--gold-structure); padding: 2.5rem; display: flex; flex-direction: column; transition: border-color 0.4s var(--ease-mech), transform 0.4s var(--ease-mech); }
.involve-card:hover { border-color: var(--gold-primary); transform: translateY(-4px); }
.involve-title { font-family: var(--font-serif); font-size: 1.5rem; color: var(--gold-primary); margin-bottom: 0.6rem; }
.involve-lede { font-size: 0.95rem; color: var(--text-bone); opacity: 0.9; margin-bottom: 1.5rem; }
.involve-list { list-style: none; padding: 0; margin: 0 0 2rem; flex-grow: 1; }
.involve-list li { font-size: 0.88rem; color: var(--text-graphite); padding: 0.6rem 0; border-top: 1px solid rgba(230, 200, 154, 0.08); display: flex; gap: 0.6em; }
.involve-list li:first-child { border-top: none; padding-top: 0; }
.involve-list li::before { content: '\2192'; color: var(--gold-primary); flex-shrink: 0; }
.cta-band { background: var(--bg-void); border-top: 1px solid var(--gold-structure); border-bottom: 1px solid var(--gold-structure); padding: 6rem 0; text-align: center; }
.cta-band h2 { font-size: 2.2rem; }
.cta-band p { opacity: 0.85; }

/* --- media-highlights.php --- */
.press-card { display: block; height: 100%; background: var(--bg-panel); border: 1px solid var(--gold-structure); text-decoration: none; transition: border-color 0.4s var(--ease-mech), transform 0.4s var(--ease-mech); }
.press-card:hover { border-color: var(--gold-primary); transform: translateY(-4px); }
.press-card-img { height: 200px; overflow: hidden; border-bottom: 1px solid var(--gold-structure); }
.press-card-img img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(60%) contrast(1.05); transition: 0.6s ease; }
.press-card:hover .press-card-img img { filter: grayscale(0%) contrast(1.05); transform: scale(1.04); }
.press-card-body { padding: 1.75rem; }
.press-meta { display: flex; justify-content: space-between; align-items: center; margin-bottom: 0.9rem; }
.press-source { font-family: var(--font-tech); font-size: 0.68rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-graphite); }
.press-likes { font-family: var(--font-tech); font-size: 0.75rem; color: var(--gold-primary); display: flex; align-items: center; gap: 0.35em; }
.press-title { font-family: var(--font-serif); font-size: 1.15rem; color: var(--white-pure); margin-bottom: 0.6rem; line-height: 1.3; }
.press-excerpt { font-size: 0.88rem; color: var(--text-graphite); line-height: 1.55; }

.video-frame { background: var(--bg-panel); border: 1px solid var(--gold-structure); overflow: hidden; transition: border-color 0.4s ease; }
.video-frame:hover { border-color: var(--gold-primary); }
.video-frame iframe { width: 100%; height: 320px; border: none; display: block; }

.reel { position: relative; background: var(--bg-panel); border: 1px solid var(--gold-structure); padding: 1.5rem; }
.reel-track { display: flex; gap: 1rem; overflow: hidden; transition: transform 0.5s ease; }
.reel-track.no-transition { transition: none; }
.reel-slide { flex: 0 0 calc(33.333% - 0.667rem); box-sizing: border-box; }
.reel-slide img { width: 100%; height: 340px; object-fit: cover; filter: grayscale(30%); transition: filter 0.4s ease; }
.reel-slide img:hover { filter: grayscale(0%); }
.reel-nav { position: absolute; top: 50%; transform: translateY(-50%); width: 42px; height: 42px; border-radius: 50%; background: var(--gold-primary); color: var(--bg-void); border: none; font-size: 1rem; cursor: pointer; transition: background 0.3s ease; display: flex; align-items: center; justify-content: center; }
.reel-nav:hover { background: var(--white-pure); }
.reel-nav.prev { left: -1rem; }
.reel-nav.next { right: -1rem; }

@media (max-width: 767px) {
    .reel-slide { flex: 0 0 100%; }
    .video-frame iframe { height: 220px; }
}

/* --- about-us.php --- */
.personnel-card { background: rgba(255,255,255,0.02); border: 1px solid rgba(255,255,255,0.1); padding: 0; transition: all 0.35s var(--ease-mech); overflow: hidden; }
.personnel-card:hover { border-color: var(--gold-primary); background: rgba(220, 179, 117, 0.05); transform: translateY(-4px); box-shadow: 0 10px 20px rgba(0,0,0,0.55), inset 0 0 30px rgba(220, 179, 117, 0.1); }
.personnel-img-frame { width: 100%; aspect-ratio: 1/1.1; overflow: hidden; border-block-end: 1px solid rgba(255,255,255,0.1); }
.personnel-img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(100%) brightness(0.9); transition: filter var(--duration-slow) ease, transform var(--duration-slow) ease; }
.personnel-card:hover .personnel-img { filter: grayscale(0%) sepia(20%) brightness(1); transform: scale(1.05); }

/* .accordion-tech/.acc-num (click-to-reveal Mission/Vision/Values) retired:
   about-us.php's Content Architecture redesign replaced the accordion with
   always-visible .involve-card panels for scannability -- this was the
   pattern's only user. */

.pull-quote { max-width: 640px; border-inline-start: 3px solid var(--gold-primary); padding-inline-start: 1.75rem; margin-block: 2.5rem; font-family: var(--font-serif); font-size: 1.4rem; line-height: 1.5; color: var(--text-bone); }
.platform-card-heading { font-size: 1.4rem; margin-block-end: 1rem; }


.section-frame { padding: var(--space-lg) 0 var(--space-xl) 0; border-block-end: 1px solid var(--gold-structure); position: relative; }
.section-frame--tight-top { padding-block-start: calc(var(--space-lg) * 0.9); }
.history-grid { display: grid; grid-template-columns: minmax(0, 1fr) 1px minmax(0, 1fr); gap: var(--space-lg); align-items: flex-start; }
.history-grid .sys-body { max-width: 100%; }
.vertical-divider { background: linear-gradient(to bottom, transparent, var(--gold-structure), transparent); height: 100%; width: 1px; }
.cta-shell .sys-body { max-width: 700px; }
.cta-shell .sys-heading { margin-block-end: 1.5rem; }
.form-footer-meta { margin-block-start: 0.85rem; font-family: var(--font-tech); font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.18em; color: rgba(255,255,255,0.45); }

@media (max-width: 991.98px) {
    .history-grid { grid-template-columns: 1fr; gap: var(--space-md); }
    .vertical-divider { display: none; }
    .sys-heading { font-size: 2.1rem !important; }
}
@media (max-width: 768px) {
    .console-slab { padding: 2rem; margin-block-start: 0; border-width: 1px 0; }
}
@media (max-width: 575.98px) {
    .sys-heading { font-size: 1.9rem !important; }
    .section-frame { padding-block-start: calc(var(--space-lg) * 0.9); padding-block-end: var(--space-lg); }
}

/* =========================================================================
   12. NOMINATION PROCESS PAGE (nomination.php)
   ========================================================================= */

/* Campaign-style momentum banner: reuses the homepage hero's live-status
   pill + pulse-dot language (see .hero-date/heroPulse) as a generic
   .status-pill/.status-dot component, so the "urgent/current" treatment
   matches the site's own most energetic existing element instead of
   inventing an unrelated one. */
.momentum-banner { padding: var(--space-xl) 0; text-align: center; background: radial-gradient(ellipse at 50% 0%, rgba(230, 200, 154, 0.1), transparent 60%); border-bottom: 1px solid var(--gold-structure); }
.status-pill { display: inline-flex; align-items: center; gap: 0.7em; padding: 0.6rem 1.25rem; border: 1px solid var(--gold-primary); color: var(--gold-primary); background: rgba(230, 200, 154, 0.08); font-family: var(--font-tech); font-size: 0.75rem; letter-spacing: 0.12em; text-transform: uppercase; font-weight: 700; }
.status-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--gold-primary); flex-shrink: 0; animation: statusPulse 2.2s ease-out infinite; }
.status-dot--inline { display: inline-block; margin-inline-end: 0.6em; }
@keyframes statusPulse {
    0% { box-shadow: 0 0 0 0 rgba(230, 200, 154, 0.55); }
    70% { box-shadow: 0 0 0 9px rgba(230, 200, 154, 0); }
    100% { box-shadow: 0 0 0 0 rgba(230, 200, 154, 0); }
}
.momentum-statement { font-family: var(--font-serif); font-weight: 400; font-size: clamp(2.2rem, 4.5vw, 3.75rem); line-height: 1.15; color: var(--white-pure); max-width: 900px; margin: 0 auto 1.75rem; }

.process-rail { position: relative; max-width: 900px; margin: 0 auto; }
.process-rail::before { content: ''; position: absolute; top: 0; bottom: 0; left: 50%; width: 1px; background: var(--gold-structure); transform: translateX(-50%); }
.process-step { position: relative; display: grid; grid-template-columns: 1fr 60px 1fr; align-items: center; min-height: 220px; }
.process-step:nth-child(even) .process-card { grid-column: 3; }
.process-step:nth-child(odd) .process-card { grid-column: 1; }
.process-dot { grid-column: 2; width: 44px; height: 44px; border-radius: 50%; background: var(--bg-void); border: 1px solid var(--gold-primary); display: flex; align-items: center; justify-content: center; font-family: var(--font-tech); color: var(--gold-primary); font-weight: 700; justify-self: center; z-index: 2; }
.process-card { background: var(--bg-panel); border: 1px solid var(--gold-structure); padding: 2rem; position: relative; overflow: hidden; transition: border-color 0.4s var(--ease-mech); }
.process-card:hover { border-color: var(--gold-primary); }
.process-card h3 { font-size: 1.4rem; }
.process-card p { font-size: 0.95rem; }
.ghost-num { position: absolute; top: -0.5rem; right: 0.5rem; font-family: var(--font-serif); font-size: 5.5rem; font-weight: 700; color: rgba(230, 200, 154, 0.07); line-height: 1; pointer-events: none; user-select: none; }

.track-panel { background: var(--bg-panel); border: 1px solid var(--gold-structure); padding: 2.5rem; height: 100%; }
.track-panel h2 { font-size: 1.8rem; }
.track-item { padding: 1.25rem 0; border-top: 1px solid rgba(230, 200, 154, 0.08); }
.track-item:first-of-type { border-top: none; padding-top: 0; }
.track-item h5 { font-family: var(--font-serif); color: var(--gold-primary); font-size: 1.1rem; margin-bottom: 0.4rem; }
.track-item p { font-size: 0.92rem; }

.timing-callout { display: flex; align-items: center; gap: 2rem; max-width: 780px; margin-inline: auto; padding: 2.5rem; background: rgba(220, 179, 117, 0.06); border: 1px solid var(--gold-primary); }
.timing-icon { font-size: 2.5rem; color: var(--gold-primary); flex-shrink: 0; }

@media (max-width: 767px) {
    .timing-callout { flex-direction: column; text-align: center; gap: 1.25rem; padding: 2rem; }
    .process-rail::before { left: 21px; }
    .process-step { grid-template-columns: 44px 1fr; column-gap: 1.25rem; min-height: 0; margin-bottom: 2rem; }
    .process-step:nth-child(even) .process-card, .process-step:nth-child(odd) .process-card { grid-column: 2; grid-row: 1; }
    .process-dot { grid-column: 1; grid-row: 1; }
}

/* =========================================================================
   13. EVENT DETAILS PAGE (event-highlights.php)
   ========================================================================= */
/* At-a-glance logistics bar, directly under the hero so when/time/where
   and the primary CTA are visible with zero scrolling. */
.event-snapshot-band { padding: var(--space-lg) 0; background: rgba(220, 179, 117, 0.04); border-bottom: 1px solid var(--gold-structure); }
.event-snapshot { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem; max-width: 1100px; margin: 0 auto; }
.snapshot-item { display: flex; align-items: flex-start; gap: 1rem; }
.snapshot-icon { font-size: 1.5rem; color: var(--gold-primary); flex-shrink: 0; margin-block-start: 0.2rem; }
.snapshot-value { display: block; font-family: var(--font-serif); font-size: 1.15rem; color: var(--white-pure); font-weight: 400; line-height: 1.35; }

@media (max-width: 991.98px) {
    .event-snapshot { grid-template-columns: 1fr; gap: 1.5rem; }
}

/* =========================================================================
   13. SPONSORS PAGE (sponsors.php)
   ========================================================================= */
/* NOTE: markup was renamed (tier-badge->tier-tag, partner-grid->sponsor-grid,
   partner-slab->obsidian-slab, partner-logo-text split into logo-vault +
   logo-text) in an out-of-band edit after this file was first written; the
   old names below were dead and the new ones had zero CSS backing, so the
   page was rendering with no card borders/logo boxes. Renamed to match. */
.cta-separator { width: 60px; height: 1px; background: var(--gold-primary); margin: 0 auto 2rem auto; }
.tier-section { padding: 5rem 0 3rem; }
.tier-header { text-align: center; margin-bottom: 3rem; }
.tier-tag { display: inline-block; font-family: var(--font-tech); font-size: 0.7rem; letter-spacing: 0.15em; text-transform: uppercase; color: var(--gold-primary); border: 1px solid var(--gold-structure); padding: 0.4rem 1rem; margin-bottom: 1rem; }
.sponsor-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); border-top: 1px solid var(--gold-structure); }
.sponsor-grid--md { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.sponsor-grid--sm { grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); }
.obsidian-slab { padding: 3rem; border-right: 1px solid var(--gold-structure); border-bottom: 1px solid var(--gold-structure); text-align: center; transition: background 0.4s var(--ease-mech); }
.obsidian-slab:hover { background: #0b0b0e; }
.logo-vault { display: inline-block; border: 1px solid var(--gold-structure); padding: 0.7rem 1.5rem; margin-bottom: 1.5rem; transition: box-shadow 0.4s ease; }
.obsidian-slab:hover .logo-vault { box-shadow: 0 0 20px rgba(220, 179, 117, 0.15); }
.logo-text { font-family: var(--font-tech); font-size: 0.8rem; letter-spacing: 0.1em; color: var(--text-graphite); }
.partner-name { font-family: var(--font-serif); font-size: 1.3rem; color: var(--white-pure); margin-bottom: 0.5rem; }
.partner-brief { font-size: 0.9rem; color: rgba(255, 255, 255, 0.6); line-height: 1.5; }
.alliance-cta { padding: 6rem 0; text-align: center; border-bottom: 1px solid var(--gold-structure); }

/* =========================================================================
   14. FOOTER
   ========================================================================= */
.site-footer { background: linear-gradient(180deg, var(--bg-void) 0%, #0c0c10 100%); border-top: 1px solid var(--gold-structure); }
.footer-main { max-width: 1200px; margin: 0 auto; padding: 3rem 2rem 2rem; display: grid; grid-template-columns: 1.2fr 1fr 1.3fr; gap: 2.5rem; }
.footer-brand .footer-logo { height: 34px; opacity: 0.9; filter: brightness(1.1); margin-bottom: 0.9rem; }
.footer-tagline { font-size: 0.85rem; color: var(--text-graphite); line-height: 1.5; max-width: 260px; }
.footer-heading { font-family: var(--font-tech); font-size: 0.68rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--gold-primary); opacity: 0.85; margin: 0 0 1rem; }
.footer-links, .footer-contact { display: flex; flex-direction: column; gap: 0.65rem; }
.footer-links a, .footer-contact a, .footer-contact span { font-size: 0.88rem; color: var(--text-graphite); text-decoration: none; display: inline-flex; align-items: center; gap: 0.6em; width: fit-content; transition: color 0.25s ease, transform 0.25s ease; }
.footer-links a:hover, .footer-contact a:hover { color: var(--gold-luminous); transform: translateX(3px); }
.footer-contact i { color: var(--gold-primary); opacity: 0.7; width: 14px; text-align: center; font-size: 0.8rem; }
.footer-bottom { border-top: 1px solid rgba(255,255,255,0.06); padding: 1.1rem 2rem; display: flex; justify-content: center; align-items: center; flex-wrap: wrap; font-family: var(--font-tech); font-size: 0.68rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-graphite); opacity: 0.7; }
.footer-bottom-sep::before { content: '\2022'; margin: 0 0.9rem; opacity: 0.5; }

@media (max-width: 767px) {
    .footer-main { grid-template-columns: 1fr; gap: 2rem; padding: 2.5rem 1.5rem 1.5rem; }
}

/* =========================================================================
   15. ADMIN LOGIN (admin-login.php)
   ========================================================================= */
.admin-panel { width: 100%; max-width: 360px; margin: 1.5rem; padding: 2.5rem 2rem; background: var(--bg-panel); border: 1px solid rgba(220, 179, 117, 0.25); }
.admin-panel h1 { font-size: 1.15rem; font-weight: 600; margin: 0 0 0.35rem; }
.admin-panel p.sub { color: var(--text-graphite); font-size: 0.85rem; margin: 0 0 1.75rem; }
.admin-panel label { display: block; font-size: 0.7rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-graphite); margin-bottom: 0.4rem; }
.admin-panel input[type="password"] { width: 100%; padding: 0.7rem 0.9rem; background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.2); color: var(--white-pure); font-size: 1rem; margin-bottom: 1.25rem; }
.admin-panel input[type="password"]:focus { outline: none; border-color: var(--gold-primary); }
.admin-panel button { width: 100%; padding: 0.8rem; background: var(--gold-primary); color: var(--bg-void); border: none; font-weight: 700; font-size: 0.8rem; letter-spacing: 0.05em; text-transform: uppercase; cursor: pointer; }
.admin-panel button:hover { background: var(--white-pure); }
.admin-panel .error { background: rgba(255,107,107,0.12); border: 1px solid var(--color-error); color: var(--color-error); padding: 0.6rem 0.8rem; font-size: 0.85rem; margin-bottom: 1.25rem; }

/* =========================================================================
   16. INLINE STYLE ELIMINATION — promoted utilities & scoped overrides
   Every value below used to live in a style="" attribute on one or more
   pages. Grouped by page/component; values matching an existing class
   elsewhere were mapped to it instead of duplicated here.
   ========================================================================= */

/* --- Cross-file utilities --- */
.h-section { font-size: 2.5rem; }                 /* section H2: about-us, awards, event-highlights, media-highlights, sponsors */
.lede { font-size: 1.1rem; opacity: 0.9; }         /* intro paragraph under a hero H2: event-highlights, get-involved, nomination.php */
.divider-sm { height: 2px; width: 60px; background: var(--gold-primary); margin: 22px 0 26px; }
.btn-wide { min-width: 280px; }                    /* nomination-form submit */
.btn-md { min-width: 250px; }                      /* registration-form submit */

/* --- hero-uplink intro paragraph width: 2 of 3 pages agreed on 500px
   (contact-us, registration-form); sponsors' longer copy justified 600px
   as a genuine content-driven variant, not drift -- kept as a modifier. */
.hero-uplink .sys-body { max-width: 500px; }
.sys-body-wide { max-width: 600px; }

/* --- Breadcrumb: single component, used by every inner page's
   .hero-uplink header. (.crumb-row/.crumb-sep, a second breadcrumb
   variant for the now-retired .uplink-header family, is gone -- same
   consolidation as the header component itself.) --- */
.breadcrumb-nav { font-family: var(--font-tech); font-size: 0.7rem; letter-spacing: 0.2em; color: var(--text-graphite); }
.breadcrumb-nav a { color: inherit; }
.breadcrumb-nav .current { color: var(--text-bone); }

/* --- about-us.php --- */
.history-grid h2 { font-size: 2rem; margin-bottom: 1.25rem; }
.personnel-card h4 { font-size: 1.25rem; }
.mission-heading { font-size: 2.5rem; margin-bottom: 1.5rem; }
.committee-heading { font-size: 3rem; margin-bottom: 0; }
.section-frame--fade-dark { background: radial-gradient(at top center, #111, var(--bg-void)); }
.section-frame--fade-gold { background: linear-gradient(to top, rgba(220, 179, 117, 0.05), transparent); }

/* --- event-highlights.php --- */
.tech-card-body h4 { font-size: 1.5rem; }
.profile-card h4 { font-size: 1.5rem; }
.profile-card .txt-label { color: var(--text-graphite); }
.profile-card .txt-body { font-size: 0.9rem; }

/* --- awards.php --- */
.vetting-cta { padding: 6rem 0; text-align: center; border-bottom: 1px solid var(--gold-structure); }
.vetting-desc { max-width: 600px; color: rgba(255, 255, 255, 0.7); }

/* --- sponsors.php --- */
.tier-header h2 { font-size: 2.5rem; margin-block-start: 1rem; }
.alliance-cta .sys-body { max-width: 500px; }

/* --- contact-us.php --- */
.node-value--sm { font-size: 1.2rem; }
.node-value--tight { line-height: 1; }
.node-label--faint { opacity: 0.5; }
.contact-alert { display: none; border: 1px solid var(--gold-structure); padding: 1rem; color: var(--white-pure); }
.contact-alert.is-visible { display: block; }
.contact-alert.is-success { color: var(--gold-primary); }
.contact-alert.is-error { color: var(--color-error); }

/* --- nomination-form.php --- */
.js-alert { display: none; }
.form-submit-row { border-top: 1px dashed rgba(255,255,255,0.1); }

/* --- media-highlights.php / get-involved.php: lede paragraph variant
   with a max-width constraint (base .lede above has none) --- */
.lede-narrow { max-width: 600px; margin: 0 auto; opacity: 0.85; }

/* --- index.php --- */
.pillars-section h2 { font-size: 3rem; }

/* --- Legacy admin list pages (event-lists, lists, nomination_list) --
   kept in their original light Bootstrap theme since they're auth-gated
   internal tools, not part of the public System A redesign. Shared
   banner/section pattern was duplicated across all 3 as inline styles. */
.admin-banner { background-image: url('images/awards.png'); }
.admin-banner-tag { color: #c0a244; }
.admin-heading-accent { color: #000000; font-size: 32px; font-weight: 700; margin-bottom: 20px; position: relative; display: inline-block; text-shadow: 0 0 5px rgba(192, 162, 68, 0.3); }
.admin-heading-underline { position: absolute; bottom: -5px; left: 50%; transform: translateX(-50%); width: 50%; height: 2px; background-color: #c0a244; box-shadow: 0 0 5px rgba(192, 162, 68, 0.5); }
.admin-lede { color: #333333; font-size: 16px; line-height: 1.6; max-width: 800px; margin: 0 auto; }
.admin-logout-row { margin-top: 10px; }
.admin-logout-link { color: #c0a244; }
.admin-section-white { background-color: #ffffff; padding: 60px 0; position: relative; overflow: hidden; }
.admin-section-gradient { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(135deg, rgba(192, 162, 68, 0.1) 0%, rgba(255, 255, 255, 0.9) 100%); z-index: 1; }
.admin-container-front { position: relative; z-index: 2; }

/* =========================================================================
   17. RESPONSIVE — sidebar collapse, hero/loom/pillars stacking
   ========================================================================= */
@media (max-width: 1100px) {
    .pillars-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 991px) {
    .viewport-frame { margin-left: 0; width: 100%; }
    .monolith-sidebar { transform: translateX(-100%); }
    .monolith-sidebar.open { transform: translateX(0); box-shadow: 10px 0 50px rgba(0,0,0,0.5); }
    .mobile-trigger { display: flex; }

    /* Root cause of the mobile clipping: the desktop rule's max-height:800px
       was never reset here, so height:auto still got clamped to 800px --
       3 stacked panels x ~460px (1380px) collapsed into an 800px box, and
       .pillars-section (next sibling) started right where that box ended,
       burying the back half of panel 2 and all of panel 3 underneath it.
       Desktop's .mandate-panel { flex: 1 } (flex-basis: 0%) was also still
       active here, competing with the explicit height below in the
       flex-column layout -- same pattern already fixed once this session
       for .loom-panel/.totem-col; reset the same way. */
    .mandate-grid { flex-direction: column; height: auto; max-height: none; }
    .mandate-panel { flex: 0 0 auto; height: 65vh; min-height: 460px; border-right: none; border-bottom: 1px solid var(--gold-structure); }
    .mandate-panel:last-child { border-bottom: none; }
}
@media (max-width: 767px) {
    .pillars-grid { grid-template-columns: 1fr; }
}