:root {
    --brand-50: #f5f7fc;
    --brand-100: #dbe2f2;
    --brand-300: #8fa0cf;
    --brand-500: #2c4698;
    --brand-700: #03175b;
    --brand-800: #021248;
    --brand-900: #020d36;
    --brand-ink: #0b1233;
    --brand-gold: #d9a441;
    --brand-gold-soft: #f1d79a;
    --brand-gradient: linear-gradient(100deg, #021248 0%, #03175b 60%, #14307f 100%);
    --brand-gradient-cta: linear-gradient(100deg, #a9532a 0%, #c16233 100%);
    --brand-shadow: 0 18px 38px -16px rgb(3 23 91 / 60%);
    /* Figma CMH-2026 palette */
    --navy: #03175b;
    --accent-orange: #c16233;

    --bs-primary: #03175b;
    --bs-primary-rgb: 3, 23, 91;
    --bs-link-color: #03175b;
    --bs-link-color-rgb: 3, 23, 91;
    --bs-link-hover-color: #c16233;
    --bs-link-hover-color-rgb: 193, 98, 51;
}

html, body { margin: 0; padding: 0; }
* { box-sizing: border-box; }
body { position: relative; display: flex; flex-flow: column; min-height: 100vh; font-family: 'Poppins', system-ui, sans-serif; line-height: 1.5; overflow-x: hidden; background: var(--brand-50); color: var(--brand-ink); }
body::before { content: ""; position: fixed; inset: 0; z-index: -2; pointer-events: none;
    background:
        radial-gradient(60vw 60vw at 110% -10%, rgb(240 200 170 / 40%), transparent 60%),
        radial-gradient(50vw 50vw at -15% 105%, rgb(70 120 200 / 16%), transparent 60%),
        radial-gradient(40vw 40vw at 50% 50%, rgb(255 255 255 / 70%), transparent 70%),
        var(--brand-50); }
main { position: relative; flex: 1; }
a { text-decoration: none; }
img { display: block; }
::selection { background: var(--brand-500); color: #fff; }
.text-brand { color: var(--brand-700) !important; }

/* Bootstrap overrides */
.btn-primary { --bs-btn-bg: var(--brand-700); --bs-btn-border-color: var(--brand-700); --bs-btn-hover-bg: var(--brand-800); --bs-btn-hover-border-color: var(--brand-800); --bs-btn-active-bg: var(--brand-900); --bs-btn-active-border-color: var(--brand-900); }
.btn-outline-primary { --bs-btn-color: var(--brand-700); --bs-btn-border-color: var(--brand-700); --bs-btn-hover-bg: var(--brand-700); --bs-btn-hover-border-color: var(--brand-700); --bs-btn-active-bg: var(--brand-800); --bs-btn-active-border-color: var(--brand-800); }
.form-control:focus, .form-select:focus { border-color: var(--brand-500); box-shadow: 0 0 0 .25rem rgb(3 23 91 / 18%); }
.form-check-input:checked { background-color: var(--brand-700); border-color: var(--brand-700); }
.card { border-color: var(--brand-100); border-radius: 18px; }

/* Header */
/* Navy header from the Figma design (CMH-2026, node 2001:48): 85px bar, SAHTC icon + Montserrat Bold name. */
.site-header { position: sticky; top: 0; z-index: 1030; background: var(--navy); box-shadow: 0 10px 30px -15px rgb(3 23 91 / 60%); font-family: 'Montserrat', 'Poppins', system-ui, sans-serif; }
.site-header nav.navbar { height: 85px; padding-block: 0; }
.brand { display: flex; align-items: center; gap: 2rem; padding: 0; margin: 0; color: #fff; }
.brand img { width: 115.25px; height: auto; flex: none; }
.brand-text { font-size: 1rem; font-weight: 700; line-height: normal; white-space: nowrap; color: #fff; }
.navbar-toggler { border: 0; color: #fff; font-size: 2rem; padding: 0; }
.navbar-toggler:focus { box-shadow: none; }
nav.navbar .nav-link { position: relative; color: rgb(255 255 255 / 78%); text-transform: uppercase; font-size: .82rem; font-weight: 500; letter-spacing: .06em; padding: .5rem .85rem !important; }
nav.navbar .nav-link::after { content: ""; position: absolute; left: .85rem; right: .85rem; bottom: .15rem; height: 2px; border-radius: 2px; background: #fff; transform: scaleX(0); transform-origin: left; transition: transform .35s cubic-bezier(.2, .8, .2, 1); }
nav.navbar .nav-link:hover, nav.navbar .nav-link.active { color: #fff; }
nav.navbar .nav-link:hover::after, nav.navbar .nav-link.active::after { transform: scaleX(1); }

/* Shared brand elements */
.gold-divider { display: flex; align-items: center; gap: .75rem; width: min(100%, 560px); margin-inline: auto; }
.gold-divider .line { flex: 1; height: 1px; background: linear-gradient(90deg, transparent, var(--brand-gold)); }
.gold-divider .line + .star + .line { background: linear-gradient(90deg, var(--brand-gold), transparent); }
.gold-divider .star { width: 18px; height: 18px; color: var(--brand-gold); flex: none; }
.eyebrow { display: inline-block; font-size: .8rem; font-weight: 600; letter-spacing: .32em; text-transform: uppercase; color: var(--brand-500); margin: 0 0 .5rem; }
.section-title { font-size: clamp(2rem, 4vw, 3rem); font-weight: 800; color: var(--brand-900); line-height: 1.1; margin: 0 0 1.25rem; }
h1.section-title.h3 { font-size: 1.75rem; }
.btn-cta { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: .9rem; padding: .95rem 2.6rem; border: 0; border-radius: 999px; background: var(--brand-gradient-cta); color: #fff; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; line-height: 1; box-shadow: var(--brand-shadow), inset 0 1px 0 rgb(255 255 255 / 35%); transition: box-shadow .3s ease, transform .3s ease; }
.btn-cta:hover { color: #fff; transform: translateY(-2px); box-shadow: 0 22px 45px -16px rgb(193 98 51 / 70%), inset 0 1px 0 rgb(255 255 255 / 45%); }
.btn-cta i { font-size: .9em; transition: transform .3s ease; }
.btn-cta:hover i { transform: translateX(4px); }
.btn-cta-lg { padding: 1.15rem 3.4rem; font-size: 1.2rem; }
.btn-ghost { display: inline-flex; align-items: center; gap: .6rem; padding: .95rem 2.2rem; border-radius: 999px; border: 1.5px solid var(--brand-300); color: var(--brand-800); font-weight: 600; letter-spacing: .1em; text-transform: uppercase; font-size: .9rem; background: rgb(255 255 255 / 60%); transition: all .3s ease; }
.btn-ghost:hover { background: #fff; border-color: var(--brand-500); color: var(--brand-700); }

/* Hero: Figma CMH-2026 "Hero Section" (node 2012:852). 1240px content, 453px visual + 767px column, 20px gap. */
.hero { position: relative; display: flex; align-items: center; min-height: 782px; padding-block: 2rem; overflow: hidden; font-family: 'Montserrat', 'Poppins', system-ui, sans-serif; }
.hero-landscape { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.hero-landscape img { width: 100%; height: 100%; object-fit: cover; object-position: center top; }
.hero-inner { position: relative; z-index: 1; display: flex; align-items: center; gap: 20px; width: min(1240px, calc(100% - 2rem)); margin-inline: auto; }
.hero-art { flex: none; width: 453px; }
.hero-art img { width: 100%; height: auto; }
.hero-copy { display: flex; flex-flow: column; align-items: center; justify-content: center; gap: 30px; flex: 1 1 auto; min-width: 0; min-height: 560px; }
.hero-logos { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 30px 80px; width: 100%; }
.hero-logos img { max-width: 100%; height: auto; }
.hero-logos .logo-cmh { width: 326.85px; }
.hero-logos .logo-ji { width: 288.02px; }
.hero-info { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 12px 30px; margin: 0; padding: 0; list-style: none; font-size: 20px; font-weight: 700; color: #000; }
.hero-info li { display: flex; align-items: center; gap: 15px; }
.hero-info img { flex: none; height: auto; }
.hero-info .icon-date { width: 28.5px; }
.hero-info .icon-venue { width: 26.15px; }
.hero-ornament { width: 211px; height: auto; }
.btn-live { display: inline-flex; align-items: center; justify-content: center; gap: 10px; padding: 17px 34px; border-radius: 52px; background: var(--accent-orange); color: #fff; font-size: 14px; font-weight: 700; line-height: normal; white-space: nowrap; filter: drop-shadow(3px 4px 4.8px rgb(0 0 0 / 25%)); transition: transform .25s ease, background-color .25s ease; }
.btn-live:hover { color: #fff; background: #a9532a; transform: translateY(-2px); }
.btn-live img { width: 23px; height: 16px; }
.event-meta { display: flex; flex-flow: wrap; justify-content: center; gap: .75rem 2.5rem; list-style: none; padding: 0; margin: 0; font-weight: 600; font-size: 1.15rem; }
.event-meta li { display: flex; align-items: center; gap: .65rem; }
.event-meta i { font-size: 1.45rem; color: var(--brand-700); }

/* Countdown */
.countdown { position: relative; z-index: 2; padding: 0 1.25rem; margin-top: -2.5rem; }
.countdown-inner { display: flex; flex-flow: wrap; align-items: center; justify-content: center; gap: 1rem 2.5rem; max-width: 900px; margin-inline: auto; padding: 1.4rem 2rem; border-radius: 28px; background: var(--brand-gradient); color: #fff; box-shadow: 0 30px 60px -30px rgb(3 23 91 / 60%); }
.countdown-label { font-size: .8rem; font-weight: 600; letter-spacing: .3em; text-transform: uppercase; color: var(--brand-gold-soft); margin: 0; }
.countdown-units { display: flex; gap: 1.5rem; list-style: none; padding: 0; margin: 0; }
.countdown-units li { display: flex; flex-flow: column; align-items: center; min-width: 64px; }
.countdown-value { font-size: 2.2rem; font-weight: 800; line-height: 1; font-variant-numeric: tabular-nums; }
.countdown-unit { font-size: .7rem; letter-spacing: .2em; text-transform: uppercase; color: rgb(255 255 255 / 70%); margin-top: .35rem; }

/* Sections and theme cards */
.section { position: relative; padding: 6rem 1.25rem; }
.section-head { text-align: center; margin-bottom: 3.5rem; }
.section-ornament { width: 211px; height: auto; margin-inline: auto; }
.themes-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 1.5rem; max-width: 1200px; margin-inline: auto; }
.theme-card { position: relative; grid-column: span 4; display: flex; flex-flow: column; padding: 2.2rem 1.9rem; border-radius: 24px; background: #fff; border: 1px solid var(--brand-100); box-shadow: 0 18px 40px -28px rgb(3 23 91 / 35%); overflow: hidden; }
.theme-card::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 4px; background: linear-gradient(90deg, var(--brand-700), var(--brand-500), var(--brand-gold)); transform: scaleX(0); transform-origin: left; transition: transform .5s cubic-bezier(.2, .8, .2, 1); }
.theme-card:hover::before { transform: scaleX(1); }
.theme-card:nth-child(n+4):nth-child(-n+7) { grid-column: span 3; }
.theme-num { font-size: 2.4rem; font-weight: 800; line-height: 1; color: var(--brand-700); margin-bottom: 1.1rem; }
.theme-card h3 { font-size: 1.1rem; font-weight: 700; color: var(--brand-900); margin: 0; }
.themes-actions { display: flex; justify-content: center; margin-top: 3rem; }

/* How it works */
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; max-width: 1000px; margin-inline: auto; }
.step { text-align: center; padding: 1.5rem; }
.step i { font-size: 2.4rem; color: var(--brand-700); }
.step h3 { font-size: 1.1rem; font-weight: 700; margin: .75rem 0 .25rem; color: var(--brand-900); }
.step p { color: #4a5578; margin: 0; }

/* Inner pages */
.nav-tabs .nav-link { color: var(--brand-800); border-radius: 12px 12px 0 0; }
.nav-tabs .nav-link.active { color: var(--brand-700); font-weight: 600; }
.sponsor-logo { max-height: 70px; max-width: 100%; object-fit: contain; }

/* Footer */
.site-footer { background: var(--brand-gradient); color: rgb(255 255 255 / 85%); }
.site-footer a { color: #fff; }

@media (max-width: 1199px) {
    .brand-text { display: none; }
    nav.navbar .nav-link { padding-inline: .6rem !important; }
}
nav.navbar .nav-link, .navbar .btn { white-space: nowrap; }
@media (max-width: 991px) {
    .site-header nav.navbar { height: 72px; }
    .hero { min-height: 0; padding-block: 2rem 5rem; }
    .hero-inner { flex-direction: column; gap: 1.5rem; }
    .hero-art { width: min(380px, 80%); order: 2; }
    .hero-copy { min-height: 0; gap: 24px; }
    .themes-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .theme-card, .theme-card:nth-child(n+4):nth-child(-n+7) { grid-column: span 1; }
    .steps { grid-template-columns: 1fr; }
    .offcanvas { background: var(--brand-900); }
}
@media (max-width: 575px) {
    .themes-grid { grid-template-columns: 1fr; }
    .hero-info { font-size: 16px; }
    .countdown-units { gap: .9rem; }
    .countdown-value { font-size: 1.7rem; }
    .btn-cta-lg { padding: 1rem 2rem; font-size: 1rem; }
}