/* ==========================================================================
   EduGulf — main stylesheet
    1. Tokens & theming        7. Gallery
    2. Base & typography       8. Partners
    3. Buttons & utilities     9. About
    4. Header & navigation    10. Contact & forms
    5. Hero                   11. CTA & footer
    6. Pillars & events       12. Lightbox, motion, responsive
   ========================================================================== */

/* 1. Tokens & theming ------------------------------------------------------ */
:root {
    color-scheme: light;

    /* Brand */
    --brand:        #24457B;
    --brand-soft:   #3D6CB0;
    --accent:       #E4763C;
    --accent-soft:  #F0A375;

    /* Ground & surfaces */
    --bg:           #FBFAF7;
    --bg-soft:      #F3F2ED;
    --surface:      #FFFFFF;
    --surface-2:    #FAFAF8;

    /* Ink */
    --ink:          #191B1F;
    --ink-soft:     #62676F;
    --ink-faint:    #9AA0A8;
    --on-brand:     #FFFFFF;

    /* Pastel tints */
    --tint-blue:    #DCEEFF;
    --tint-lav:     #EAE2FF;
    --tint-mint:    #DDF5EA;
    --tint-peach:   #FFE5D6;
    --tint-yellow:  #FFF3C4;
    --tint-ink:     #3D4046;

    --border:        rgba(25, 27, 31, 0.09);
    --border-strong: rgba(25, 27, 31, 0.16);
    --glass:         rgba(255, 255, 255, 0.72);
    --glass-strong:  rgba(255, 255, 255, 0.88);
    --grid-line:     rgba(25, 27, 31, 0.028);

    --shadow-sm: 0 1px 2px rgba(25, 27, 31, 0.04), 0 4px 14px rgba(25, 27, 31, 0.05);
    --shadow-md: 0 2px 6px rgba(25, 27, 31, 0.05), 0 14px 34px rgba(25, 27, 31, 0.08);
    --shadow-lg: 0 6px 18px rgba(25, 27, 31, 0.07), 0 30px 70px rgba(25, 27, 31, 0.12);

    --r-sm: 12px;
    --r-md: 18px;
    --r-lg: 28px;
    --r-xl: 40px;
    --r-pill: 999px;

    /* Cards, Panels & Accents */
    --card-bg:       var(--surface);
    --border-soft:   var(--border);
    --r-card:        var(--r-md);
    --r-card-lg:     var(--r-lg);
    --surface-alt:   var(--bg-soft);
    --gold-bg:       rgba(202, 138, 4, 0.10);
    --gold-deep:     #ca8a04;

    --container: 1240px;
    --gutter: clamp(20px, 5vw, 56px);

    /* 8-Point Multiples Spacing System */
    --space-8:   8px;
    --space-16:  16px;
    --space-24:  24px;
    --space-32:  32px;
    --space-40:  40px;
    --space-48:  48px;
    --space-56:  56px;
    --space-64:  64px;
    --space-72:  72px;
    --space-80:  80px;

    /* Global Section Spacing (Multiples of 8) */
    --section-py:    64px;       /* 8 * 8 = 64px standard section padding */
    --section-py-sm: 40px;       /* 8 * 5 = 40px compact / adjacent */
    --section-py-lg: 80px;       /* 8 * 10 = 80px major section padding */
    --section-y:     var(--section-py);
    --header-h:      92px;

    --sans:    "Plus Jakarta Sans", "Segoe UI", system-ui, -apple-system, sans-serif;
    --display: "Outfit", "Plus Jakarta Sans", "Segoe UI", system-ui, sans-serif;
    --serif:   "Fraunces", Georgia, "Times New Roman", serif;

    --ease: cubic-bezier(0.22, 0.68, 0, 1);
    --dur: 420ms;
}

[data-theme="dark"] {
    color-scheme: dark;

    --brand:        #7FA9E8;
    --brand-soft:   #A6C4F0;
    --accent:       #F08950;
    --accent-soft:  #F5B48C;

    --bg:           #0F1115;
    --bg-soft:      #14171C;
    --surface:      #191D23;
    --surface-2:    #1F242B;

    --ink:          #EEF0F3;
    --ink-soft:     #A2AAB5;
    --ink-faint:    #6E7681;
    --on-brand:     #0F1115;

    --tint-blue:    #17293D;
    --tint-lav:     #22203A;
    --tint-mint:    #142E28;
    --tint-peach:   #33241B;
    --tint-yellow:  #322C16;
    --tint-ink:     #C3CAD3;

    --border:        rgba(255, 255, 255, 0.10);
    --border-strong: rgba(255, 255, 255, 0.20);
    --glass:         rgba(25, 29, 35, 0.72);
    --glass-strong:  rgba(20, 23, 28, 0.90);
    --grid-line:     rgba(255, 255, 255, 0.03);

    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4), 0 4px 14px rgba(0, 0, 0, 0.3);
    --shadow-md: 0 2px 6px rgba(0, 0, 0, 0.45), 0 14px 34px rgba(0, 0, 0, 0.4);
    --shadow-lg: 0 6px 18px rgba(0, 0, 0, 0.5), 0 30px 70px rgba(0, 0, 0, 0.55);

    /* Cards, Panels & Accents in dark mode */
    --card-bg:       var(--surface);
    --border-soft:   var(--border);
    --r-card:        var(--r-md);
    --r-card-lg:     var(--r-lg);
    --surface-alt:   var(--bg-soft);
    --gold-bg:       rgba(251, 191, 36, 0.14);
    --gold-deep:     #fbbf24;
}

/* 2. Base & typography ----------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

/* [hidden] must win over the display rules set on components below. */
[hidden] { display: none !important; }

html {
    scroll-behavior: smooth;
    -webkit-text-size-adjust: 100%;
    scroll-padding-top: calc(var(--header-h) + 20px);
    /* Firefox */
    scrollbar-width: thin;
    scrollbar-color: var(--accent) transparent;
}

/* Glass scroll track + theme-coloured indicator (WebKit / Chromium) */
::-webkit-scrollbar {
    width: 10px;
    height: 10px;
    background: transparent;
}
::-webkit-scrollbar-button {
    display: none;
    width: 0;
    height: 0;
}
::-webkit-scrollbar-track {
    background: rgba(140, 140, 160, 0.12);
    border-radius: 999px;
}
[data-theme="dark"] ::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.08);
}
::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, var(--accent), var(--accent-soft));
    border-radius: 999px;
    border: 2px solid transparent;
    background-clip: padding-box;
}
::-webkit-scrollbar-thumb:hover {
    background: var(--accent);
    background-clip: padding-box;
}
::-webkit-scrollbar-corner { background: transparent; }

body {
    margin: 0;
    background: var(--bg);
    color: var(--ink);
    font-family: var(--sans);
    font-size: 17px;
    line-height: 1.65;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
}

/* Faint engineering grid, sits behind everything. */
body::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background-image:
        linear-gradient(to right, var(--grid-line) 1px, transparent 1px),
        linear-gradient(to bottom, var(--grid-line) 1px, transparent 1px);
    background-size: 84px 84px;
}

img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; }
svg.icon { width: 1em; height: 1em; flex: none; }

h1, h2, h3, h4 {
    font-family: var(--display);
    margin: 0 0 0.45em;
    line-height: 1.1;
    letter-spacing: -0.03em;
    font-weight: 700;
}
p { margin: 0 0 1.1em; }
p:last-child { margin-bottom: 0; }

.screen-reader-text {
    position: absolute !important;
    width: 1px; height: 1px;
    overflow: hidden;
    clip: rect(1px, 1px, 1px, 1px);
    white-space: nowrap;
}
.skip-link:focus {
    position: fixed; top: 12px; left: 12px; z-index: 999;
    width: auto; height: auto; clip: auto;
    background: var(--ink); color: var(--bg);
    padding: 10px 18px; border-radius: var(--r-sm);
}

:focus-visible { outline: 2px solid var(--brand); outline-offset: 3px; border-radius: 6px; }

.container {
    width: 100%;
    max-width: var(--container);
    margin: 0 auto;
    padding: 0 var(--gutter);
    position: relative;
    z-index: 1;
}

.site-content, .site-main { position: relative; z-index: 1; }
.section {
    padding-top: var(--section-y);
    padding-bottom: var(--section-y);
    position: relative;
}
.section-sm {
    padding-top: var(--section-py-sm);
    padding-bottom: var(--section-py-sm);
}
.section-lg {
    padding-top: var(--section-py-lg);
    padding-bottom: var(--section-py-lg);
}
/* Sections immediately following hero banners carry a compact top rhythm */
.hero-section + .section,
.page-hero + .section,
.handwriting-hero + .section {
    padding-top: var(--section-py-sm);
}
.text-center { text-align: center; }

/* Alternating grounds give the long pages a vertical rhythm. */
.section-events,
.section-partners,
.section-values,
.section-partner-tiers { background: var(--bg-soft); }

/* Cursor glow — a soft multi-hue "fog" that drifts with the pointer.
   Only translate3d() is set from JS; the rainbow spins on its own.
   Blend mode keeps it behind text/cards, just modulating surface colour. */
.cursor-glow-layer {
    position: fixed;
    top: 0; left: 0;
    width: 360px; height: 360px;
    margin: -180px 0 0 -180px;
    pointer-events: none;
    z-index: 2;
    opacity: 0;
    transition: opacity 600ms var(--ease);
    will-change: transform;
    mix-blend-mode: multiply;
}
.cursor-glow-layer::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: conic-gradient(from 0deg,
        rgba(255, 158, 162, 0.78),
        rgba(255, 210, 148, 0.78),
        rgba(200, 234, 150, 0.78),
        rgba(150, 224, 220, 0.78),
        rgba(158, 190, 248, 0.78),
        rgba(214, 166, 240, 0.78),
        rgba(255, 158, 162, 0.78));
    filter: blur(38px);
    /* fade to nothing at the edges so it reads as fog, not a disc */
    -webkit-mask-image: radial-gradient(circle at 50% 50%, #000 0%, rgba(0,0,0,0.35) 45%, transparent 70%);
    mask-image: radial-gradient(circle at 50% 50%, #000 0%, rgba(0,0,0,0.35) 45%, transparent 70%);
    animation: cursor-glow-drift 28s linear infinite;
}
.cursor-glow-layer.is-active { opacity: 0.68; }

[data-theme="dark"] .cursor-glow-layer {
    mix-blend-mode: screen;
}
[data-theme="dark"] .cursor-glow-layer.is-active { opacity: 0.4; }
/* Dark mode: drop the rainbow for a soft blue glow, easing toward white at the core. */
[data-theme="dark"] .cursor-glow-layer::before {
    background: radial-gradient(circle at 50% 50%,
        rgba(214, 230, 252, 0.62) 0%,
        rgba(150, 190, 245, 0.42) 45%,
        rgba(120, 165, 235, 0.18) 70%,
        transparent 84%);
    animation: none;
}

@keyframes cursor-glow-drift {
    to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
    .cursor-glow-layer { display: none; }
}

/* Section headings */
.section-head { max-width: 720px; margin: 0 auto var(--space-40); }
.section-head:not(.text-center) { margin-left: 0; }
.section-head-split {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 28px;
    margin-bottom: clamp(34px, 4vw, 56px);
}
.section-head-split h2 { margin-bottom: 0; }

.section-eyebrow, .page-eyebrow, .cta-eyebrow {
    display: inline-flex;
    align-items: center;
    font-family: var(--sans);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--brand);
    margin-bottom: 16px;
}
.section-eyebrow::before, .page-eyebrow::before, .cta-eyebrow::before {
    content: "";
    width: 22px; height: 2px;
    margin-right: 12px;
    border-radius: 2px;
    background: currentColor;
    opacity: 0.6;
}
.text-center .section-eyebrow, .text-center .page-eyebrow, .text-center .cta-eyebrow { justify-content: center; }

.section-title { font-size: clamp(29px, 3.6vw, 48px); }
.section-subtitle {
    font-size: clamp(15.5px, 1.2vw, 18px);
    color: var(--ink-soft);
    max-width: 62ch;
    margin: 0 auto;
}
.section-head:not(.text-center) .section-subtitle,
.section-head-split .section-subtitle,
.section-head-text-group .section-subtitle {
    margin-left: 0;
    margin-top: 12px;
    text-align: left;
    max-width: 58ch;
}

/* 3. Buttons & utilities --------------------------------------------------- */
.btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 14px 26px;
    border: 1px solid transparent;
    border-radius: var(--r-pill);
    font-family: var(--sans);
    font-size: 15px;
    font-weight: 600;
    line-height: 1.2;
    cursor: pointer;
    text-align: center;
    overflow: hidden;
    isolation: isolate;
    z-index: 0;
    transition: color 480ms var(--ease), border-color 480ms var(--ease), box-shadow 480ms var(--ease);
}
.btn svg.icon { font-size: 17px; transition: transform var(--dur) var(--ease); }
.btn:hover svg.icon, .btn:focus-visible svg.icon { transform: translateX(4px); }

/* Diagonal-wipe hover: a skewed panel scales in from the center and floods
   the button, carrying the text/icon color with it — used everywhere
   instead of a generic lift-on-hover. */
.btn::before {
    content: "";
    position: absolute;
    left: -20%; right: -20%;
    top: 0; bottom: 0;
    background: var(--btn-fill, var(--ink));
    transform: skewX(-45deg) scale(0, 1);
    z-index: -1;
    transition: transform 500ms var(--ease);
}
.btn:hover::before, .btn:focus-visible::before {
    transform: skewX(-45deg) scale(1, 1);
}

.btn-lg { padding: 17px 32px; font-size: 15.5px; }
.btn-sm { padding: 10px 19px; font-size: 13.5px; }
.btn-block { display: flex; width: 100%; }

.btn-primary {
    --btn-fill: var(--accent);
    background: var(--brand);
    color: var(--on-brand);
    box-shadow: var(--shadow-sm);
}
.btn-primary:hover, .btn-primary:focus-visible { box-shadow: var(--shadow-md); }

.btn-outline {
    --btn-fill: var(--ink);
    background: transparent;
    color: var(--ink);
    border-color: var(--border-strong);
}
.btn-outline:hover, .btn-outline:focus-visible {
    color: var(--bg);
    border-color: var(--ink);
    box-shadow: var(--shadow-sm);
}

.btn-secondary {
    --btn-fill: var(--ink);
    background: var(--surface);
    color: var(--ink);
    border-color: var(--border);
    box-shadow: var(--shadow-sm);
}
.btn-secondary:hover, .btn-secondary:focus-visible {
    color: var(--bg);
    border-color: var(--ink);
    box-shadow: var(--shadow-md);
}

.btn-ghost {
    --btn-fill: var(--ink);
    background: transparent;
    color: var(--ink);
    border-color: var(--border-strong);
}
.btn-ghost:hover, .btn-ghost:focus-visible {
    color: var(--bg) !important;
    border-color: var(--ink);
    box-shadow: var(--shadow-sm);
}
.btn-ghost:hover span, .btn-ghost:focus-visible span {
    color: var(--bg) !important;
}
[data-theme="light"] .btn-ghost:hover,
[data-theme="light"] .btn-ghost:hover span {
    color: #FFFFFF !important;
}
[data-theme="dark"] .btn-ghost:hover,
[data-theme="dark"] .btn-ghost:hover span {
    color: #0F1115 !important;
}

/* 4. Header & navigation --------------------------------------------------- */
.site-header {
    position: fixed;
    top: 0; left: 0; right: 0;
    z-index: 100;
    padding: 20px var(--gutter);
    transition: padding 380ms var(--ease);
}
.header-inner {
    max-width: var(--container);
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    padding: 12px 14px 12px 20px;
    border-radius: var(--r-lg);
    border: 1px solid transparent;
    background: transparent;
    transition: padding 380ms var(--ease), max-width 380ms var(--ease),
                border-radius 380ms var(--ease), background-color 380ms var(--ease),
                border-color 380ms var(--ease), box-shadow 380ms var(--ease);
}
.site-header.is-stuck { padding: 12px var(--gutter); }
.site-header.is-stuck .header-inner {
    max-width: 1100px;
    padding: 8px 10px 8px 18px;
    border-radius: var(--r-pill);
    background: var(--glass-strong);
    border-color: var(--border);
    box-shadow: var(--shadow-md);
    -webkit-backdrop-filter: blur(22px) saturate(160%);
    backdrop-filter: blur(22px) saturate(160%);
}

/* Logo */
.site-branding { display: flex; align-items: center; min-width: 0; }
.site-logo-link, .custom-logo-link { display: inline-flex; align-items: center; }
/* Slightly reduced header logo size for a more balanced navigation. */
.site-logo-img, .custom-logo {
    max-height: 76px;
    width: auto;
    transition: max-height 380ms var(--ease);
}
.site-header.is-stuck .site-logo-img,
.site-header.is-stuck .custom-logo { max-height: 54px; }

/* Paired logo: show the variant that reads against the current ground. */
.logo-on-dark { display: none; }
[data-theme="dark"] .logo-on-light { display: none; }
[data-theme="dark"] .logo-on-dark {
    display: block;
    max-height: 76px;
}
[data-theme="dark"] .site-header.is-stuck .logo-on-dark {
    max-height: 54px;
}
/* Customizer logo has no light variant — keep it legible on the dark ground. */
[data-theme="dark"] .custom-logo { filter: brightness(0) invert(1); }

/* Mobile header logo: a little smaller in both themes. */
@media (max-width: 768px) {
    .site-header .site-logo-img,
    .site-header .custom-logo,
    [data-theme="dark"] .site-header .logo-on-dark {
        max-height: 64px;
    }

    .site-header.is-stuck .site-logo-img,
    .site-header.is-stuck .custom-logo,
    [data-theme="dark"] .site-header.is-stuck .logo-on-dark {
        max-height: 48px;
    }
}
.site-logo-link--text {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    font-family: var(--display);
    font-size: 26px;
    font-weight: 800;
    letter-spacing: -0.035em;
    white-space: nowrap;
}
.logo-mark {
    width: 44px; height: 44px;
    display: grid; place-items: center;
    border-radius: 12px;
    font-size: 16px;
    font-weight: 800;
    letter-spacing: -0.02em;
    color: var(--on-brand);
    background: linear-gradient(140deg, var(--brand), var(--brand-soft) 60%, var(--accent));
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.22);
}
.logo-word em { font-style: normal; font-weight: 500; color: var(--ink-soft); }

/* Primary nav */
.main-navigation { min-width: 0; }
.nav-menu {
    display: flex;
    align-items: center;
    gap: 2px;
    list-style: none;
    margin: 0; padding: 0;
}
.nav-menu a {
    display: block;
    padding: 9px 15px;
    border-radius: var(--r-pill);
    font-size: 14.5px;
    font-weight: 500;
    color: var(--ink-soft);
    white-space: nowrap;
    transition: color 240ms var(--ease), background-color 240ms var(--ease);
}
.nav-menu a:hover { color: var(--ink); background: var(--bg-soft); }
.nav-menu .current-menu-item > a,
.nav-menu .current_page_item > a,
.nav-menu .active > a {
    color: var(--ink);
    font-weight: 600;
    background: var(--bg-soft);
}

.header-actions { display: flex; align-items: center; gap: 8px; }

.theme-toggle-btn {
    position: relative;
    width: 42px; height: 42px;
    display: grid; place-items: center;
    border-radius: 50%;
    border: 1px solid var(--border-strong);
    background: var(--surface);
    cursor: pointer;
    color: var(--ink);
    transition: background-color 260ms var(--ease), transform 260ms var(--ease), border-color 260ms var(--ease);
}
.theme-toggle-btn:hover { transform: translateY(-2px); border-color: var(--ink); }
.theme-toggle-btn svg.icon { font-size: 18px; }
.theme-toggle-btn > span {
    position: absolute;
    display: grid; place-items: center;
    transition: opacity 260ms var(--ease), transform 360ms var(--ease);
}
.icon-theme-sun  { opacity: 0; transform: rotate(-60deg) scale(0.6); }
.icon-theme-moon { opacity: 1; transform: none; }
[data-theme="dark"] .icon-theme-sun  { opacity: 1; transform: none; }
[data-theme="dark"] .icon-theme-moon { opacity: 0; transform: rotate(60deg) scale(0.6); }

.btn-header-cta {
    --btn-fill: var(--brand);
    padding: 11px 20px;
    font-size: 14.5px;
    background: var(--ink);
    color: var(--bg);
    border-radius: var(--r-pill);
}
.btn-header-cta:hover, .btn-header-cta:focus-visible { color: var(--on-brand); }
.btn-header-cta svg.icon { font-size: 16px; }

.mobile-menu-toggle {
    display: none;
    width: 38px;
    height: 38px;
    padding: 0;
    border: none;
    background: transparent !important;
    box-shadow: none !important;
    cursor: pointer;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 6px;
    outline: none;
    -webkit-tap-highlight-color: transparent;
    transition: opacity 250ms var(--ease);
}
.mobile-menu-toggle:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 3px;
    border-radius: 6px;
}
.hamburger-line {
    display: block;
    width: 24px;
    height: 2px;
    border-radius: 2px;
    background: var(--ink);
    transform-origin: center;
    transition: transform 320ms cubic-bezier(0.4, 0, 0.2, 1), opacity 240ms ease, background-color 200ms ease;
}
.mobile-menu-toggle:hover .hamburger-line {
    background: var(--accent);
}
[data-theme="dark"] .hamburger-line {
    background: #FFFFFF;
}
[data-theme="dark"] .mobile-menu-toggle:hover .hamburger-line {
    background: var(--accent);
}

/* 3 lines become X when opened */
.mobile-menu-toggle[aria-expanded="true"] .hamburger-line:nth-child(1) {
    transform: translateY(8px) rotate(45deg);
}
.mobile-menu-toggle[aria-expanded="true"] .hamburger-line:nth-child(2) {
    opacity: 0;
    transform: scaleX(0);
}
.mobile-menu-toggle[aria-expanded="true"] .hamburger-line:nth-child(3) {
    transform: translateY(-8px) rotate(-45deg);
}

/* Mobile drawer */
.mobile-drawer {
    position: fixed;
    inset: 0;
    z-index: 150;
    visibility: hidden;
    pointer-events: none;
}
.mobile-drawer.is-open { visibility: visible; pointer-events: auto; }
.mobile-drawer-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(15, 17, 21, 0.5);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    opacity: 0;
    transition: opacity 320ms var(--ease);
}
.mobile-drawer.is-open .mobile-drawer-backdrop {
    opacity: 1;
}
.mobile-drawer-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(15, 17, 21, 0.45);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    opacity: 0;
    transition: opacity 320ms var(--ease);
}
.mobile-drawer-panel {
    position: absolute;
    top: 0; right: 0; bottom: 0;
    width: min(390px, 88vw);
    display: flex;
    flex-direction: column;
    padding: 24px 22px 30px;
    background: rgba(255, 255, 255, 0.76);
    -webkit-backdrop-filter: blur(28px) saturate(190%);
    backdrop-filter: blur(28px) saturate(190%);
    border-left: 1px solid rgba(255, 255, 255, 0.65);
    box-shadow: -14px 0 45px rgba(15, 17, 21, 0.12), inset 1px 0 0 rgba(255, 255, 255, 0.7);
    transform: translateX(102%);
    transition: transform 380ms cubic-bezier(0.16, 1, 0.3, 1);
    overflow-y: auto;
}
[data-theme="dark"] .mobile-drawer-panel {
    background: rgba(20, 22, 28, 0.82);
    border-left: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: -14px 0 50px rgba(0, 0, 0, 0.55), inset 1px 0 0 rgba(255, 255, 255, 0.08);
}
.mobile-drawer.is-open .mobile-drawer-panel {
    transform: none;
}
.mobile-drawer-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding-bottom: 20px;
    border-bottom: 1px solid rgba(25, 27, 31, 0.08);
}
[data-theme="dark"] .mobile-drawer-header {
    border-bottom-color: rgba(255, 255, 255, 0.08);
}
.mobile-drawer-close {
    width: 38px; height: 38px;
    display: grid; place-items: center;
    border-radius: 50%;
    border: 1px solid rgba(25, 27, 31, 0.12);
    background: rgba(255, 255, 255, 0.6);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    cursor: pointer;
    flex: none;
    transition: all 250ms var(--ease);
}
.mobile-drawer-close:hover {
    background: rgba(255, 255, 255, 0.95);
    transform: scale(1.05);
}
[data-theme="dark"] .mobile-drawer-close {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.14);
}
[data-theme="dark"] .mobile-drawer-close:hover {
    background: rgba(255, 255, 255, 0.18);
    transform: scale(1.05);
}
.mobile-drawer-nav {
    padding: 16px 0;
}
.mobile-nav-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.mobile-nav-list li + li {
    border-top: none;
}
.mobile-nav-list a {
    display: block;
    padding: 12px 14px;
    border-radius: 12px;
    font-family: var(--display);
    font-size: 19px;
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--ink);
    transition: all 220ms var(--ease);
}
.mobile-nav-list a:hover {
    background: rgba(255, 255, 255, 0.6);
    color: var(--brand);
    transform: translateX(4px);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
}
.mobile-nav-list .current-menu-item > a,
.mobile-nav-list .active > a {
    color: var(--brand);
    background: rgba(36, 69, 123, 0.08);
}
[data-theme="dark"] .mobile-nav-list a {
    color: #FFFFFF;
}
[data-theme="dark"] .mobile-nav-list a:hover {
    background: rgba(255, 255, 255, 0.08);
    color: var(--accent-soft);
}
[data-theme="dark"] .mobile-nav-list .current-menu-item > a,
[data-theme="dark"] .mobile-nav-list .active > a {
    color: var(--accent-soft);
    background: rgba(228, 118, 60, 0.12);
}
.mobile-drawer-footer {
    margin-top: auto;
    padding-top: 24px;
}
.mobile-drawer-meta {
    margin-top: 18px;
    font-size: 14px;
    color: var(--ink-soft);
}
.mobile-drawer-meta p {
    margin: 0 0 6px;
}
.mobile-drawer-meta a:hover {
    color: var(--brand);
}
[data-theme="dark"] .mobile-drawer-meta {
    color: var(--ink-faint);
}

body.menu-open {
    overflow: hidden;
}

/* 5. Hero ------------------------------------------------------------------ */
.hero-section {
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    min-height: clamp(640px, 94vh, 940px);
    padding: calc(var(--header-h) + var(--space-32)) 0 var(--space-48);
}

/* Full-bleed image corridor — two rails of real uploads rushing toward the
   viewer in 3D, sitting behind the copy. Geometry/keyframes are generated
   by initImageCorridor() in main.js; this just positions the layers and
   fades the top/bottom edges back into the page so the copy stays legible
   without boxing the imagery into a frame. */
.hero-stream-bg { position: absolute; inset: 0; z-index: 0; }
.hero-stream-bg .image-corridor {
    position: absolute;
    inset: 0;
    overflow: hidden;
    background: var(--bg-soft);
    container-type: inline-size;
    /* Twenty cards fly through here on an infinite loop. Without paint
       containment every one of those frames is free to invalidate style and
       layout for the whole hero — the copy, the CTAs, the scrim. `paint` is
       exactly the clip `overflow: hidden` already applies, so nothing is
       cropped that was not cropped before. */
    contain: layout paint style;
}
.corridor-stage { position: absolute; inset: 0; pointer-events: none; }
.corridor-scene { position: absolute; inset: 0; transform-style: preserve-3d; }
.corridor-card {
    position: absolute;
    overflow: hidden;
    background: var(--bg-soft);
    backface-visibility: hidden;
    /* The card's keyframes only ever touch `transform`, so hinting it keeps
       each card on its own compositor layer: the photo is rasterized once
       and then flown by the GPU, instead of the whole 3D scene being
       re-painted on the main thread every frame. */
    will-change: transform;
}
.corridor-card img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hero-stream-scrim {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        linear-gradient(to bottom, var(--bg) 0%, transparent 16%),
        linear-gradient(to top, var(--bg) 0%, transparent 42%);
}

.hero-container { position: relative; z-index: 1; }
.hero-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    max-width: 760px;
    margin: 0 auto;
    text-align: center;
}

.hero-eyebrow {
    display: inline-flex;
    align-items: center;
    padding: 8px 20px;
    margin-bottom: 24px;
    border-radius: var(--r-pill);
    border: 1px solid var(--border);
    background: var(--glass);
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: 0.14em;
    color: var(--ink-soft);
    box-shadow: 0 2px 14px rgba(15, 17, 21, 0.04);
}
.eyebrow-pills {
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    justify-content: center;
    gap: 16px;
}
.eyebrow-pill-item {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    position: relative;
    transition: color 0.4s ease;
}
.eyebrow-dot {
    position: relative;
    width: 6.5px;
    height: 6.5px;
    border-radius: 50%;
    background: rgba(228, 118, 60, 0.4);
    box-shadow: 0 0 0 0 rgba(228, 118, 60, 0);
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), background-color 0.4s ease, box-shadow 0.4s ease;
    flex-shrink: 0;
}

/* Contained Smooth Shifting Glow (No giant overflowing shockwaves) */
@keyframes dotShiftBreathe {
    0%, 28% {
        background: var(--accent);
        transform: scale(1.35);
        box-shadow: 0 0 6px rgba(228, 118, 60, 0.7), 0 0 0 2px rgba(228, 118, 60, 0.22);
    }
    34%, 94% {
        background: rgba(228, 118, 60, 0.35);
        transform: scale(0.9);
        box-shadow: 0 0 0 0 rgba(228, 118, 60, 0);
    }
    100% {
        background: var(--accent);
        transform: scale(1.35);
        box-shadow: 0 0 6px rgba(228, 118, 60, 0.7), 0 0 0 2px rgba(228, 118, 60, 0.22);
    }
}

@keyframes textShiftGlow {
    0%, 28% {
        color: var(--ink);
    }
    34%, 94% {
        color: var(--ink-soft);
    }
    100% {
        color: var(--ink);
    }
}

/* 3-phase staggered cycle (3.6s total, 1.2s shift per item) */
.eyebrow-pill-1 .eyebrow-dot {
    animation: dotShiftBreathe 3.6s infinite ease-in-out 0s;
}
.eyebrow-pill-1 .eyebrow-text {
    animation: textShiftGlow 3.6s infinite ease-in-out 0s;
}

.eyebrow-pill-2 .eyebrow-dot {
    animation: dotShiftBreathe 3.6s infinite ease-in-out 1.2s;
}
.eyebrow-pill-2 .eyebrow-text {
    animation: textShiftGlow 3.6s infinite ease-in-out 1.2s;
}

.eyebrow-pill-3 .eyebrow-dot {
    animation: dotShiftBreathe 3.6s infinite ease-in-out 2.4s;
}
.eyebrow-pill-3 .eyebrow-text {
    animation: textShiftGlow 3.6s infinite ease-in-out 2.4s;
}

.eyebrow-pill-item:only-child .eyebrow-dot {
    animation: dotShiftBreathe 2.4s infinite ease-in-out 0s;
}

@media (prefers-reduced-motion: reduce) {
    .eyebrow-pill-item .eyebrow-dot,
    .eyebrow-pill-item .eyebrow-text {
        animation: none !important;
    }
    .eyebrow-pill-1 .eyebrow-dot {
        background: var(--accent);
        box-shadow: 0 0 0 4px rgba(228, 118, 60, 0.18);
    }
}

.hero-title {
    font-size: clamp(38px, 6.2vw, 76px);
    font-weight: 800;
    letter-spacing: -0.042em;
    line-height: 1.03;
    margin-bottom: 22px;
    text-shadow: 0 2px 28px rgba(15, 17, 21, 0.16);
}
.highlight-text {
    font-family: var(--serif);
    font-style: italic;
    font-weight: 600;
    letter-spacing: -0.015em;
    background: linear-gradient(100deg, var(--brand), var(--brand-soft) 45%, var(--accent));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}
/* Rotating word: JS types/deletes the text content, this just gives the
   caret something to blink against at the current typing position. */
.type-word { display: inline-block; min-height: 1em; }
.type-cursor {
    display: inline-block;
    width: 3px;
    height: 0.82em;
    margin-left: 5px;
    vertical-align: -0.08em;
    background: var(--accent);
    animation: type-cursor-blink 900ms steps(1) infinite;
}
@keyframes type-cursor-blink { 0%, 49% { opacity: 1; } 50%, 100% { opacity: 0; } }

.hero-description {
    max-width: 52ch;
    font-size: clamp(16px, 1.2vw, 18.5px);
    color: var(--ink-soft);
    margin-bottom: 32px;
    text-shadow: 0 1px 16px rgba(15, 17, 21, 0.1);
}
/* Hero CTA Glass Buttons --------------------------------------------------- */
.hero-ctas {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 14px;
    margin-top: 10px;
}

.hero-ctas .btn {
    border-radius: var(--r-pill);
    -webkit-backdrop-filter: blur(18px) saturate(170%);
    backdrop-filter: blur(18px) saturate(170%);
    transition: all 340ms cubic-bezier(0.16, 1, 0.3, 1);
}

.hero-ctas .btn::before {
    display: none;
}

/* Primary Glass Button ("Explore EduGulf") */
.hero-ctas .btn-primary {
    background: rgba(36, 69, 123, 0.84);
    color: #FFFFFF;
    border: 1px solid rgba(255, 255, 255, 0.32);
    box-shadow: 0 8px 24px rgba(36, 69, 123, 0.28), inset 0 1px 1.5px rgba(255, 255, 255, 0.45);
}

.hero-ctas .btn-primary:hover,
.hero-ctas .btn-primary:focus-visible {
    background: rgba(36, 69, 123, 0.96);
    color: #FFFFFF;
    border-color: rgba(255, 255, 255, 0.55);
    box-shadow: 0 12px 32px rgba(36, 69, 123, 0.38), inset 0 1px 2px rgba(255, 255, 255, 0.65);
    transform: translateY(-2px);
}

/* Secondary Glass Button ("Discover Events") */
.hero-ctas .btn-outline {
    background: rgba(255, 255, 255, 0.62);
    color: var(--ink);
    border: 1px solid rgba(255, 255, 255, 0.85);
    box-shadow: 0 6px 20px rgba(15, 17, 21, 0.05), inset 0 1px 1.5px rgba(255, 255, 255, 0.9);
}

.hero-ctas .btn-outline:hover,
.hero-ctas .btn-outline:focus-visible {
    background: rgba(255, 255, 255, 0.9);
    color: var(--ink);
    border-color: #FFFFFF;
    box-shadow: 0 10px 28px rgba(15, 17, 21, 0.1), inset 0 1px 2px #FFFFFF;
    transform: translateY(-2px);
}

/* Dark Mode Hero CTA Glass */
[data-theme="dark"] .hero-ctas .btn-primary {
    background: rgba(61, 108, 176, 0.52);
    color: #FFFFFF;
    border-color: rgba(255, 255, 255, 0.22);
    box-shadow: 0 8px 26px rgba(0, 0, 0, 0.45), inset 0 1px 1px rgba(255, 255, 255, 0.3);
}

[data-theme="dark"] .hero-ctas .btn-primary:hover {
    background: rgba(61, 108, 176, 0.75);
    border-color: rgba(255, 255, 255, 0.4);
    box-shadow: 0 12px 34px rgba(0, 0, 0, 0.6), inset 0 1px 1.5px rgba(255, 255, 255, 0.45);
}

[data-theme="dark"] .hero-ctas .btn-outline {
    background: rgba(255, 255, 255, 0.09);
    color: #FFFFFF;
    border-color: rgba(255, 255, 255, 0.18);
    box-shadow: 0 6px 22px rgba(0, 0, 0, 0.4), inset 0 1px 1px rgba(255, 255, 255, 0.15);
}

[data-theme="dark"] .hero-ctas .btn-outline:hover {
    background: rgba(255, 255, 255, 0.18);
    color: #FFFFFF;
    border-color: rgba(255, 255, 255, 0.32);
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.55), inset 0 1px 1.5px rgba(255, 255, 255, 0.25);
}

.hero-trust-badge { margin-top: 40px; }
.trust-stats {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 8px 22px;
}
.trust-stat-item { display: grid; grid-template-columns: auto auto; align-items: baseline; justify-items: center; }
.stat-num, .stat-suffix {
    font-family: var(--display);
    font-size: clamp(28px, 3vw, 38px);
    font-weight: 800;
    letter-spacing: -0.04em;
    line-height: 1;
    font-variant-numeric: tabular-nums;
}
.stat-suffix { color: var(--accent); }
.stat-label {
    grid-column: 1 / -1;
    margin-top: 6px;
    font-size: 13px;
    color: var(--ink-soft);
}
.stat-divider { width: 1px; height: 34px; background: var(--border-strong); }

/* Inner page hero */
.page-hero {
    position: relative;
    overflow: hidden;
    padding-top: calc(var(--header-h) + var(--space-40));
    padding-bottom: var(--space-32);
}
.page-hero::after {
    content: "";
    position: absolute;
    top: -240px; left: 50%;
    width: min(1000px, 120vw);
    aspect-ratio: 2 / 1;
    transform: translateX(-50%);
    border-radius: 50%;
    pointer-events: none;
    background: radial-gradient(ellipse at center, var(--tint-blue), transparent 66%);
    filter: blur(60px);
    opacity: 0.8;
}
[data-theme="dark"] .page-hero::after { opacity: 0.45; }
/* The hero already carries generous bottom padding — don't stack a full
   section rhythm on top of it. */
.page-hero + .section { padding-top: var(--section-py-sm); }

.page-hero-content { max-width: 820px; margin: 0 auto; }
.page-title {
    font-size: clamp(34px, 5.2vw, 62px);
    font-weight: 800;
    letter-spacing: -0.04em;
}
.page-subtitle {
    max-width: 60ch;
    margin: 0 auto;
    font-size: clamp(16px, 1.2vw, 18.5px);
    color: var(--ink-soft);
}

/* Handwriting Text & Hero Component ---------------------------------------- */
.handwriting-text-wrapper {
    position: relative;
    display: inline-flex;
    align-items: baseline;
    justify-content: flex-start;
    vertical-align: baseline;
    color: var(--accent);
    min-height: 1.15em;
    margin-left: 0.18em;
    line-height: 1;
    transition: color 240ms var(--ease);
}
[data-theme="dark"] .handwriting-text-wrapper {
    color: var(--accent-soft);
}

.handwriting-svg {
    display: inline-block;
    vertical-align: -0.15em;
    overflow: visible;
    color: currentColor;
    filter: drop-shadow(0 2px 8px rgba(228, 118, 60, 0.22));
    transition: opacity 0.28s cubic-bezier(0.16, 1, 0.3, 1), transform 0.28s cubic-bezier(0.16, 1, 0.3, 1);
}
.handwriting-svg.is-leaving {
    opacity: 0 !important;
    transform: translateY(-6px) scale(0.96) !important;
    pointer-events: none !important;
}
[data-theme="dark"] .handwriting-svg {
    filter: drop-shadow(0 2px 14px rgba(240, 163, 117, 0.38));
}

.handwriting-fallback {
    font-family: var(--serif);
    font-style: italic;
    font-weight: 600;
    letter-spacing: -0.015em;
    color: var(--accent);
    display: inline-block;
    transition: opacity 0.25s ease;
}
[data-theme="dark"] .handwriting-fallback {
    color: var(--accent-soft);
}

.handwriting-hero {
    position: relative;
    overflow: hidden;
    padding-top: calc(var(--header-h) + var(--space-40));
    padding-bottom: var(--space-32);
}
.handwriting-hero .hero-handwriting-title {
    font-size: clamp(34px, 5.2vw, 64px);
    font-weight: 800;
    letter-spacing: -0.04em;
    line-height: 1.12;
    margin-bottom: 22px;
}
.handwriting-hero .hero-handwriting-title .title-lead {
    display: inline;
}
.handwriting-hero .hero-ctas {
    margin-top: 30px;
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
}
.handwriting-hero .hero-trust-badge {
    margin-top: clamp(28px, 3.5vw, 44px);
    display: flex;
    justify-content: center;
}
.handwriting-hero .hero-ambient-orb {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    filter: blur(80px);
    opacity: 0.65;
    z-index: -1;
}
.handwriting-hero .hero-ambient-orb-1 {
    top: -90px;
    right: 8%;
    width: clamp(260px, 32vw, 420px);
    aspect-ratio: 1;
    background: radial-gradient(circle, var(--tint-peach), transparent 70%);
}
.handwriting-hero .hero-ambient-orb-2 {
    bottom: -60px;
    left: 6%;
    width: clamp(280px, 35vw, 460px);
    aspect-ratio: 1;
    background: radial-gradient(circle, var(--tint-blue), transparent 70%);
}
[data-theme="dark"] .handwriting-hero .hero-ambient-orb {
    opacity: 0.32;
}

/* The handwriting word is an SVG whose inline width can exceed a phone
   viewport for long words — clamp it so it never forces a horizontal scroll. */
.handwriting-text-wrapper {
    max-width: 100%;
}
.handwriting-svg {
    max-width: 100%;
    height: auto;
}

@media (max-width: 768px) {
    .handwriting-hero .hero-handwriting-title {
        font-size: clamp(28px, 7.4vw, 42px);
        line-height: 1.18;
        overflow-wrap: break-word;
    }
    .handwriting-text-wrapper {
        margin-left: 0.08em;
    }
}

/* 6. Pillars & events ------------------------------------------------------ */
.pillars-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: clamp(16px, 1.8vw, 24px);
}
.pillar-card {
    border-radius: var(--r-lg);
    background: var(--surface);
    border: 1px solid var(--border);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
    transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease),
                border-color var(--dur) var(--ease);
}
.pillar-card:hover {
    transform: translateY(-6px);
    box-shadow: var(--shadow-md);
    border-color: var(--border-strong);
}
.pillar-card-inner {
    display: flex;
    flex-direction: column;
    height: 100%;
    padding: clamp(24px, 2.4vw, 32px);
}
.pillar-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 22px;
}
.pillar-number {
    font-family: var(--serif);
    font-size: 32px;
    font-weight: 600;
    line-height: 1;
    color: var(--ink-faint);
}
.pillar-icon {
    width: 46px; height: 46px;
    display: grid; place-items: center;
    border-radius: 14px;
    color: var(--brand);
    background: var(--tint-blue);
    transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
.pillar-icon svg.icon { font-size: 22px; }
.pillar-card:nth-child(2) .pillar-icon { background: var(--tint-lav); }
.pillar-card:nth-child(3) .pillar-icon { background: var(--tint-mint); }
.pillar-card:nth-child(4) .pillar-icon { background: var(--tint-peach); color: var(--accent); }
.pillar-card:hover .pillar-icon { background: var(--brand); color: var(--on-brand); }
.pillar-card:nth-child(4):hover .pillar-icon { background: var(--accent); color: #fff; }

.pillar-title { font-size: clamp(19px, 1.6vw, 22px); }
.pillar-desc { font-size: 15px; color: var(--ink-soft); margin-bottom: 24px; }
.pillar-footer {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: auto;
    padding-top: 18px;
    border-top: 1px solid var(--border);
}
.pillar-accent-dot {
    width: 7px; height: 7px;
    flex: none;
    border-radius: 50%;
    background: var(--accent);
}
.pillar-action {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 13.5px;
    font-weight: 600;
    color: var(--brand);
}
.pillar-action svg.icon { font-size: 15px; transition: transform var(--dur) var(--ease); }
.pillar-card:hover .pillar-action svg.icon { transform: translateX(4px); }

/* Carousel shell */
.carousel-controls { display: flex; gap: 10px; flex: none; }
.carousel-btn {
    width: 46px; height: 46px;
    display: grid; place-items: center;
    border-radius: 50%;
    border: 1px solid var(--border-strong);
    background: var(--surface);
    color: var(--ink);
    cursor: pointer;
    transition: background-color 260ms var(--ease), color 260ms var(--ease),
                transform 260ms var(--ease), opacity 260ms var(--ease);
}
.carousel-btn svg.icon { font-size: 19px; }
.carousel-btn:hover:not(:disabled) { background: var(--ink); color: var(--bg); transform: translateY(-2px); }
.carousel-btn:disabled { opacity: 0.3; cursor: default; }

.carousel-container { position: relative; }
.event-carousel-track {
    display: flex;
    gap: clamp(16px, 2vw, 24px);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    padding-bottom: 6px;
    scrollbar-width: none;
    -ms-overflow-style: none;
}
.event-carousel-track::-webkit-scrollbar { display: none; }
.event-carousel-track > * {
    flex: 0 0 clamp(290px, 32%, 390px);
    scroll-snap-align: start;
}
.event-carousel-track.is-dragging { cursor: grabbing; scroll-behavior: auto; }

.carousel-progress-wrapper {
    position: relative;
    height: 3px;
    margin-top: 28px;
    border-radius: 3px;
    background: var(--border);
    overflow: hidden;
}
.carousel-progress-bar {
    position: absolute;
    inset: 0 auto 0 0;
    width: 30%;
    border-radius: 3px;
    background: var(--brand);
    transition: width 240ms var(--ease), transform 240ms var(--ease);
}

/* Event card — full-bleed photo card with a "hover-reveal" group effect:
   hovering (or focusing) one card gently dims/blurs the others so the
   active card reads as clearly in focus. Pure CSS via :has(), with a
   graceful no-op fallback for browsers without it. */
.event-card {
    position: relative;
    border-radius: var(--r-lg);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
    /* No `filter` in this transition: blurring the unhovered siblings meant
       re-rasterizing every other card's full-bleed photo for 480ms on each
       hover. See the :has() rule below. */
    transition: transform 480ms var(--ease), box-shadow 480ms var(--ease),
                opacity 480ms var(--ease);
}
.event-card:hover, .event-card:focus-within {
    transform: translateY(-6px);
    box-shadow: var(--shadow-lg);
}
.event-card-link {
    position: relative;
    display: block;
    height: clamp(360px, 30vw, 440px);
    color: #fff;
}
.event-card-link:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }

.event-image {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 720ms var(--ease);
}
.event-card:hover .event-image, .event-card:focus-within .event-image { transform: scale(1.06); }

.event-card-scrim {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top,
        rgba(10, 12, 16, 0.92) 0%, rgba(10, 12, 16, 0.55) 38%,
        rgba(10, 12, 16, 0.08) 68%, transparent 85%);
    pointer-events: none;
}

.event-card-badges {
    position: absolute;
    top: 16px; left: 16px; right: 16px;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    pointer-events: none;
}

.event-badge {
    position: relative;
    top: auto; left: auto;
    display: inline-flex;
    align-items: center;
    padding: 6px 12px;
    border-radius: var(--r-pill);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ink);
    background: var(--glass-strong);
    border: 1px solid var(--border);
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
}

.event-status-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 12px;
    border-radius: var(--r-pill);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}
.status-indicator-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    display: inline-block;
}
.event-status-pill.status-completed {
    background: rgba(15, 23, 42, 0.78);
    color: #CBD5E1;
    border: 1px solid rgba(255, 255, 255, 0.16);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
}
.event-status-pill.status-completed .status-indicator-dot {
    background: #94A3B8;
}
.event-status-pill.status-upcoming {
    background: rgba(16, 185, 129, 0.88);
    color: #FFFFFF;
    border: 1px solid rgba(255, 255, 255, 0.3);
    box-shadow: 0 2px 10px rgba(16, 185, 129, 0.4);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
}
.event-status-pill.status-upcoming .status-indicator-dot {
    background: #FFFFFF;
    box-shadow: 0 0 6px #FFFFFF;
}

/* Event Status Filter Tabs on Events Catalog */
.events-filter-bar {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 10px;
    margin: 0 auto 36px;
}
.event-filter-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 22px;
    border-radius: var(--r-pill);
    background: var(--surface, #FFFFFF);
    border: 1px solid var(--border);
    color: var(--ink-soft);
    font-family: var(--sans);
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 260ms var(--ease);
}
.event-filter-pill:hover {
    color: var(--ink);
    border-color: var(--brand);
    transform: translateY(-2px);
}
.event-filter-pill.is-active {
    background: var(--brand);
    color: var(--on-brand, #FFFFFF);
    border-color: var(--brand);
    box-shadow: 0 6px 18px -4px rgba(202, 138, 4, 0.4);
}
.event-filter-pill .pill-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
}
.event-filter-pill .upcoming-dot {
    background: #10B981;
}
.event-filter-pill.is-active .upcoming-dot {
    background: #FFFFFF;
}
.event-filter-pill .completed-dot {
    background: #64748B;
}
.event-filter-pill.is-active .completed-dot {
    background: #FFFFFF;
}

.event-card-content {
    position: absolute;
    left: 0; right: 0; bottom: 0;
    z-index: 1;
    padding: 22px 22px 24px;
}
.event-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 14px;
    margin-bottom: 10px;
}
.meta-item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.02em;
    color: rgba(255, 255, 255, 0.82);
}
.meta-item svg.icon { font-size: 14px; color: var(--accent-soft); }
.meta-loc svg.icon { color: #fff; }

.event-title {
    font-size: clamp(18px, 1.6vw, 22px);
    font-weight: 700;
    letter-spacing: -0.01em;
    color: #fff;
    margin-bottom: 12px;
}
.event-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 13.5px;
    font-weight: 600;
    color: #fff;
    opacity: 0.85;
}
.arrow-wrap { display: inline-flex; transition: transform var(--dur) var(--ease); }
.arrow-wrap svg.icon { font-size: 15px; }
.event-card:hover .arrow-wrap, .event-card:focus-within .arrow-wrap { transform: translateX(4px); }

@supports selector(:has(*)) {
    /* De-emphasise the other cards with opacity + scale only. The blur that
       used to live here (`filter: blur(1.5px) saturate(0.85)`) forced the
       browser to blur up to eleven full-bleed card photos at once, on the
       main thread, for the whole 480ms transition — the most expensive
       hover on the page and a reliable source of stutter in this section. */
    .event-carousel-track:has(.event-card:hover, .event-card:focus-within) .event-card:not(:hover):not(:focus-within),
    .events-grid-layout:has(.event-card:hover, .event-card:focus-within) .event-card:not(:hover):not(:focus-within) {
        opacity: 0.55;
        transform: scale(0.98);
    }
}

/* Touch/mobile: sticky :hover/:focus would leave adjacent cards permanently blurred */
@media (max-width: 768px) {
    .event-carousel-track:has(.event-card:hover, .event-card:focus-within) .event-card:not(:hover):not(:focus-within),
    .events-grid-layout:has(.event-card:hover, .event-card:focus-within) .event-card:not(:hover):not(:focus-within) {
        opacity: 1;
        transform: none;
    }
}

.events-grid-layout {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: clamp(18px, 2vw, 26px);
}

/* 7. Gallery --------------------------------------------------------------- */
.gallery-filters {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
    margin-bottom: clamp(28px, 3.5vw, 46px);
}
.filter-btn {
    padding: 10px 20px;
    border-radius: var(--r-pill);
    border: 1px solid var(--border-strong);
    background: transparent;
    color: var(--ink-soft);
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 260ms var(--ease), color 260ms var(--ease),
                border-color 260ms var(--ease), transform 260ms var(--ease);
}
.filter-btn:hover { background: var(--surface); color: var(--ink); transform: translateY(-1px); }
.filter-btn.active {
    background: var(--ink);
    color: var(--bg);
    border-color: var(--ink);
}

/* Uniform tiles: the item count comes from the media library, so a fixed
   masonry rhythm would strand tiles and open gaps whenever it doesn't divide
   evenly. Equal 4:3 cards stay correct at any count. */
/* Gallery Grid & Cards (4 cards per row, hover lift) ----------------------- */
.gallery-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: clamp(18px, 2vw, 24px);
    padding: 8px 0 40px;
}

.gallery-grid-full {
    grid-template-columns: repeat(4, 1fr);
}

.gallery-item {
    position: relative;
    transition: opacity 0.3s ease, transform 0.3s ease;
}

.gallery-item.is-hidden {
    display: none !important;
}

.gallery-card {
    position: relative;
    display: flex;
    flex-direction: column;
    height: 440px;
    border-radius: 22px;
    overflow: hidden;
    cursor: pointer;
    background: #111317;
    border: 1px solid rgba(255, 255, 255, 0.14);
    box-shadow: 0 8px 24px rgba(15, 17, 21, 0.08);
    transition: transform 0.42s cubic-bezier(0.16, 1, 0.3, 1),
                box-shadow 0.42s cubic-bezier(0.16, 1, 0.3, 1),
                border-color 0.35s ease;
}

/* Hover Lift Effect (Card lifts to top on hover with ambient glow) */
.gallery-item:hover .gallery-card,
.gallery-card:focus-visible {
    transform: translateY(-18px);
    box-shadow: 0 28px 56px -8px rgba(15, 17, 21, 0.45), 0 14px 28px -4px rgba(0, 0, 0, 0.3);
    border-color: rgba(255, 255, 255, 0.35);
}

/* Category-tinted glowing ambient shadows on hover */
.gallery-item.glow-purple:hover .gallery-card {
    box-shadow: 0 28px 56px -8px rgba(124, 58, 237, 0.45), 0 12px 24px rgba(0, 0, 0, 0.35);
}
.gallery-item.glow-blue:hover .gallery-card {
    box-shadow: 0 28px 56px -8px rgba(2, 132, 199, 0.45), 0 12px 24px rgba(0, 0, 0, 0.35);
}
.gallery-item.glow-green:hover .gallery-card {
    box-shadow: 0 28px 56px -8px rgba(16, 185, 129, 0.45), 0 12px 24px rgba(0, 0, 0, 0.35);
}
.gallery-item.glow-emerald:hover .gallery-card {
    box-shadow: 0 28px 56px -8px rgba(13, 148, 136, 0.45), 0 12px 24px rgba(0, 0, 0, 0.35);
}

.gallery-card-bg {
    position: absolute;
    inset: 0;
    z-index: 0;
    overflow: hidden;
}

.gallery-card-bg .gallery-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.65s cubic-bezier(0.16, 1, 0.3, 1);
}

.gallery-item:hover .gallery-card-bg .gallery-img {
    transform: scale(1.08);
}

.gallery-card-overlay {
    position: absolute;
    inset: 0;
    z-index: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 22px 20px 20px;
    background: linear-gradient(to top, rgba(12, 14, 18, 0.95) 0%, rgba(12, 14, 18, 0.62) 44%, rgba(12, 14, 18, 0.12) 72%, transparent 100%);
    pointer-events: none;
}

.gallery-card-top {
    display: flex;
    align-items: flex-start;
}

.gallery-card-pill {
    display: inline-flex;
    align-items: center;
    padding: 5px 12px;
    border-radius: var(--r-pill);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    background: rgba(255, 255, 255, 0.18);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    color: #FFFFFF;
    border: 1px solid rgba(255, 255, 255, 0.28);
}

.gallery-card-bottom {
    display: flex;
    flex-direction: column;
}

.gallery-card-title {
    font-family: var(--display);
    font-size: 21px;
    font-weight: 750;
    color: #FFFFFF;
    line-height: 1.22;
    margin: 0 0 6px 0;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.4);
}

.gallery-card-meta {
    font-size: 13px;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.75);
    margin: 0 0 14px 0;
    line-height: 1.35;
}

.gallery-card-action {
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 10px 18px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.12);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.22);
    color: #FFFFFF;
    font-size: 13.5px;
    font-weight: 600;
    transition: all 0.3s ease;
}

.gallery-card-action .action-icon {
    display: flex;
    align-items: center;
    transition: transform 0.3s ease;
}

.gallery-item:hover .gallery-card-action {
    background: rgba(255, 255, 255, 0.24);
    border-color: rgba(255, 255, 255, 0.45);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}

.gallery-item:hover .gallery-card-action .action-icon {
    transform: translateX(4px);
}

.gallery-cta { margin-top: clamp(34px, 4vw, 56px); }
.gallery-empty {
    grid-column: 1 / -1;
    padding: 60px 0;
    text-align: center;
    font-size: 17px;
    color: var(--ink-soft);
}

/* --- Gallery Media Tabs (Image Gallery vs Video Gallery) --- */
.gallery-media-tabs-wrap {
    display: flex;
    justify-content: center;
    margin-bottom: clamp(24px, 3.5vw, 36px);
}

.gallery-media-tabs {
    display: inline-flex;
    align-items: center;
    padding: 6px;
    border-radius: 999px;
    background: rgba(15, 23, 42, 0.05);
    border: 1px solid rgba(15, 23, 42, 0.1);
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.04), 0 4px 18px rgba(0, 0, 0, 0.03);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    gap: 6px;
    position: relative;
    max-width: 100%;
}

.media-tab-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 10px 24px;
    border-radius: 999px;
    border: 1px solid transparent;
    background: transparent;
    color: var(--ink-soft);
    font-family: var(--font-sans);
    font-size: 15px;
    font-weight: 600;
    letter-spacing: -0.01em;
    cursor: pointer;
    transition: all 260ms cubic-bezier(0.2, 0.8, 0.2, 1);
    white-space: nowrap;
}

.media-tab-btn .media-tab-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: inherit;
    transition: transform 260ms ease;
}

.media-tab-btn .media-tab-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 700;
    background: rgba(15, 23, 42, 0.08);
    color: var(--ink-soft);
    transition: all 260ms ease;
}

.media-tab-btn:hover {
    color: var(--ink);
    background: rgba(255, 255, 255, 0.6);
}

.media-tab-btn:hover .media-tab-icon {
    transform: scale(1.1);
}

.media-tab-btn.active {
    background: #0f172a;
    color: #ffffff;
    border-color: rgba(255, 255, 255, 0.1);
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.2), 0 2px 6px rgba(15, 23, 42, 0.12);
}

.media-tab-btn.active .media-tab-pill {
    background: rgba(255, 255, 255, 0.22);
    color: #ffffff;
}

/* --- Video Card Overlays & Badges --- */
.gallery-card.is-video-card .gallery-img {
    filter: brightness(0.92);
    transition: transform 600ms cubic-bezier(0.16, 1, 0.3, 1), filter 350ms ease;
}

.gallery-item:hover .gallery-card.is-video-card .gallery-img {
    filter: brightness(1.02);
}

.gallery-video-play-wrap {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    z-index: 3;
}

.gallery-video-play-btn {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: rgba(15, 23, 42, 0.65);
    border: 1.5px solid rgba(255, 255, 255, 0.45);
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4), 0 0 0 0 rgba(255, 255, 255, 0.35);
    transition: all 340ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

.gallery-video-play-btn svg {
    margin-left: 3px;
    width: 26px;
    height: 26px;
    fill: currentColor;
    transition: transform 300ms ease;
}

.gallery-item:hover .gallery-video-play-btn {
    transform: scale(1.15);
    background: #0284c7;
    border-color: rgba(255, 255, 255, 0.85);
    box-shadow: 0 16px 36px rgba(2, 132, 199, 0.5), 0 0 0 10px rgba(2, 132, 199, 0.2);
}

.gallery-item:hover .gallery-video-play-btn svg {
    transform: scale(1.08);
}

.gallery-duration-pill,
.gallery-video-tag {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 6px 12px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
    color: #ffffff;
    background: rgba(15, 23, 42, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.25);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
    letter-spacing: 0.02em;
}

.gallery-duration-pill svg,
.gallery-video-tag svg {
    flex-shrink: 0;
}

/* Gallery Responsive Breakpoints */
@media (max-width: 1200px) {
    .gallery-grid,
    .gallery-grid-full {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 860px) {
    .gallery-grid,
    .gallery-grid-full {
        grid-template-columns: repeat(2, 1fr);
        gap: 18px;
    }
    .gallery-card {
        height: 400px;
    }
}

@media (max-width: 540px) {
    .gallery-grid,
    .gallery-grid-full {
        grid-template-columns: 1fr;
    }
    .gallery-card {
        height: 380px;
    }
}

/* Mobile: keep the media switcher + filter bar inside the viewport */
@media (max-width: 560px) {
    .page-gallery-main {
        overflow-x: clip;
    }
    .gallery-media-tabs {
        display: flex;
        width: 100%;
        max-width: 100%;
        gap: 4px;
        padding: 5px;
    }
    .media-tab-btn {
        flex: 1 1 0;
        min-width: 0;
        justify-content: center;
        padding: 9px 8px;
        font-size: 12.5px;
        gap: 6px;
    }
    .media-tab-btn .media-tab-label {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    .media-tab-btn .media-tab-pill {
        padding: 2px 6px;
        font-size: 11px;
    }
    .gallery-filters {
        gap: 6px;
        margin-inline: auto;
        max-width: 100%;
    }
    .filter-btn {
        padding: 8px 14px;
        font-size: 13px;
    }
}

/* Collage marquee — progressive enhancement over .gallery-grid. Rows of
   duplicated tiles scroll continuously in alternating directions so the
   grid reads as an infinite, self-arranging collage. */
.gallery-grid.is-marquee { display: block; }
.gallery-marquee {
    display: flex;
    flex-direction: column;
    gap: clamp(12px, 1.4vw, 18px);
}
.gallery-marquee-row {
    overflow: hidden;
    -webkit-mask-image: linear-gradient(to right, transparent, #000 4%, #000 96%, transparent);
    mask-image: linear-gradient(to right, transparent, #000 4%, #000 96%, transparent);
}
.gallery-marquee-track {
    display: flex;
    align-items: stretch;
    width: max-content;
    gap: clamp(12px, 1.4vw, 18px);
    animation: gallery-marquee-left 42s linear infinite;
    will-change: transform;
}
.gallery-marquee-row.is-reverse .gallery-marquee-track { animation-name: gallery-marquee-right; }
.gallery-marquee:hover .gallery-marquee-track,
.gallery-marquee-track:focus-within { animation-play-state: paused; }

.gallery-marquee-row .gallery-item { flex: 0 0 auto; }
.gallery-marquee-row .gallery-card,
.gallery-marquee-row .gallery-media-wrap { height: 100%; }
.gallery-marquee-row .gallery-img { width: 100%; height: 100%; aspect-ratio: auto; }

/* Collage rhythm: rows 1 & 3 run wide landscape tiles, row 2 runs taller
   portrait tiles, so the wall reads as a collage rather than a strict grid. */
.gallery-marquee-row:nth-child(1) .gallery-item,
.gallery-marquee-row:nth-child(3) .gallery-item {
    width: clamp(220px, 23vw, 320px);
    height: clamp(170px, 14vw, 226px);
}
.gallery-marquee-row:nth-child(2) .gallery-item {
    width: clamp(180px, 17vw, 246px);
    height: clamp(230px, 19vw, 316px);
}

@keyframes gallery-marquee-left {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}
@keyframes gallery-marquee-right {
    from { transform: translateX(-50%); }
    to   { transform: translateX(0); }
}

@media (max-width: 720px) {
    .gallery-marquee-row:nth-child(1) .gallery-item,
    .gallery-marquee-row:nth-child(3) .gallery-item {
        width: clamp(180px, 52vw, 240px);
        height: clamp(140px, 40vw, 190px);
    }
    .gallery-marquee-row:nth-child(2) .gallery-item {
        width: clamp(150px, 40vw, 200px);
        height: clamp(190px, 52vw, 250px);
    }
}

/* 8. Partners -------------------------------------------------------------- */
.partners-wrapper {
    margin-top: 24px;
}

.partner-cards-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: clamp(16px, 2vw, 24px);
}

.partner-card {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-height: 290px;
    padding: 26px 24px 22px 24px;
    border-radius: 20px;
    background: var(--surface);
    border: 1px solid var(--border);
    box-shadow: 0 4px 18px rgba(15, 17, 21, 0.04), 0 1px 3px rgba(15, 17, 21, 0.02);
    overflow: hidden;
    /* Explicitly prevent traditional card growing */
    transform: none !important;
    transition: border-color 0.35s ease, box-shadow 0.35s ease, background-color 0.35s ease;
}

.partner-card:hover {
    /* No scale / grow transform on the card container */
    transform: none !important;
    border-color: var(--border-strong);
    box-shadow: 0 10px 30px rgba(15, 17, 21, 0.07);
}

.partner-card-link-overlay {
    position: absolute;
    inset: 0;
    z-index: 10;
    cursor: pointer;
}

/* Header: Badge & Date */
.partner-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: relative;
    z-index: 2;
}

.partner-badge {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.12);
    transition: transform 0.4s var(--ease);
}

.partner-logo-box {
    height: 48px;
    max-width: 140px;
    display: flex;
    align-items: center;
    justify-content: flex-start;
}

.partner-logo-img {
    max-height: 44px;
    width: auto;
    object-fit: contain;
    border-radius: 8px;
}

.partner-badge svg {
    width: 22px;
    height: 22px;
}

.partner-card:hover .partner-badge {
    transform: rotate(-4deg) scale(1.04);
}

.partner-date {
    font-size: 13px;
    font-weight: 600;
    color: var(--ink-faint);
    letter-spacing: -0.01em;
}

/* Body: Eyebrow, Title, Year */
.partner-card-body {
    position: relative;
    z-index: 2;
    margin-top: 24px;
    margin-bottom: 20px;
    display: flex;
    flex-direction: column;
}

.partner-meta-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 8px;
}

.partner-eyebrow {
    font-size: 12.5px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--accent, #9E7422);
}

.partner-title {
    font-family: var(--display);
    font-size: 20px;
    font-weight: 750;
    line-height: 1.28;
    letter-spacing: -0.02em;
    color: var(--ink);
    margin-bottom: 6px;
}

.partner-year {
    font-family: var(--sans);
    font-size: 12.5px;
    font-weight: 600;
    color: var(--ink-faint);
    background: rgba(120, 120, 140, 0.08);
    padding: 2px 8px;
    border-radius: var(--r-pill, 100px);
}

.partner-event-pill {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin-top: 10px;
    padding: 5px 12px;
    background: rgba(202, 138, 4, 0.08);
    border: 1px solid rgba(202, 138, 4, 0.22);
    border-radius: var(--r-pill, 100px);
    font-size: 12px;
    font-weight: 600;
    color: var(--gold-deep, #CA8A04);
    max-width: 100%;
}

.partner-event-pill svg {
    width: 13px;
    height: 13px;
    flex-shrink: 0;
}

.partner-event-pill span {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Footer: Location */
.partner-card-footer {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
}

.partner-location {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    font-weight: 500;
    color: var(--ink-soft);
}

.partner-location svg {
    width: 14px;
    height: 14px;
    color: var(--accent, #9E7422);
    flex-shrink: 0;
}

/* Distinct Card Shapes / Silhouettes */
.partner-card.shape-contours {
    border-radius: 28px 12px 28px 12px;
}
.partner-card.shape-dotwave {
    border-radius: 16px 28px 16px 28px;
}
.partner-card.shape-chevrons {
    border-radius: 28px 28px 12px 28px;
}
.partner-card.shape-bubbles {
    border-radius: 22px;
}
.partner-card.shape-hatch {
    border-radius: 32px 14px 20px 14px;
}
.partner-card.shape-confetti {
    border-radius: 14px 32px 14px 28px;
}

/* Decorative Corner Shapes (Move on hover instead of card growing) */
.partner-card-shape {
    position: absolute;
    bottom: -10px;
    right: -10px;
    width: 155px;
    height: 155px;
    pointer-events: none;
    z-index: 1;
    transform-origin: bottom right;
    transition: transform 0.65s cubic-bezier(0.16, 1, 0.3, 1), filter 0.45s ease, opacity 0.4s ease;
}

.partner-card-shape .partner-svg {
    width: 100%;
    height: 100%;
    display: block;
}

/* Specific shape hover transforms (Move on hover) */
.partner-card.shape-contours:hover .partner-card-shape {
    transform: translate(-14px, -12px) scale(1.12) rotate(-5deg);
    filter: drop-shadow(0 0 12px rgba(168, 85, 247, 0.35));
}

.partner-card.shape-dotwave:hover .partner-card-shape {
    transform: translate(-12px, -10px) scale(1.1) rotate(6deg);
    filter: drop-shadow(0 0 10px rgba(56, 189, 248, 0.35));
}

.partner-card.shape-chevrons:hover .partner-card-shape {
    transform: translate(-16px, -16px);
    filter: drop-shadow(0 0 12px rgba(245, 158, 11, 0.4));
}

.partner-card.shape-bubbles:hover .partner-card-shape {
    transform: scale(1.18) rotate(-15deg);
    filter: drop-shadow(0 0 12px rgba(16, 185, 129, 0.35));
}

.partner-card.shape-hatch:hover .partner-card-shape {
    transform: translate(-12px, -10px) scale(1.08) rotate(10deg);
    filter: drop-shadow(0 0 12px rgba(234, 179, 8, 0.35));
}

.partner-card.shape-confetti:hover .partner-card-shape {
    transform: translate(-10px, -10px) scale(1.2) rotate(16deg);
    filter: drop-shadow(0 0 12px rgba(239, 68, 68, 0.35));
}

/* Dark Mode Appearance (matches the design in screenshot) */
[data-theme="dark"] .partner-card {
    background: #18191D;
    border-color: rgba(255, 255, 255, 0.08);
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.45);
}

[data-theme="dark"] .partner-card:hover {
    border-color: rgba(255, 255, 255, 0.16);
    box-shadow: 0 12px 36px rgba(0, 0, 0, 0.6);
}

[data-theme="dark"] .partner-title,
[data-theme="dark"] .partner-year {
    color: #FFFFFF;
}

[data-theme="dark"] .partner-date {
    color: #8E929B;
}

[data-theme="dark"] .partner-eyebrow,
[data-theme="dark"] .partner-location {
    color: #9AA0A8;
}

/* Responsive Grid */
@media (max-width: 980px) {
    .partner-cards-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 600px) {
    .partner-cards-grid {
        grid-template-columns: 1fr;
    }
    .partner-card {
        min-height: 270px;
    }
}

.partner-note { margin-top: clamp(28px, 3vw, 42px); color: var(--ink-soft); }
.partner-note a {
    font-weight: 600;
    color: var(--brand);
}

.partner-inquiry-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: clamp(24px, 4vw, 56px);
    padding: clamp(32px, 4.5vw, 64px);
    border-radius: var(--r-xl);
    background: linear-gradient(150deg, var(--tint-blue), var(--tint-lav) 70%, var(--tint-peach));
    border: 1px solid var(--border);
}
.partner-inquiry-card h2 { font-size: clamp(26px, 3vw, 38px); }
.partner-inquiry-card p { color: var(--tint-ink); max-width: 54ch; margin-bottom: 0; }
.inquiry-action { flex: none; }

/* 9. About ----------------------------------------------------------------- */
.section-about-intro {
    padding: var(--section-y) 0;
    background: var(--bg-soft, #F8FAFC);
}

.about-intro-showcase-grid {
    display: grid;
    grid-template-columns: 1fr 1.05fr;
    gap: clamp(24px, 3.2vw, 44px);
    align-items: stretch;
}

/* Left Card: Story & Purpose */
.about-story-card {
    background: var(--surface, #FFFFFF);
    border-radius: 28px;
    padding: clamp(36px, 4vw, 56px);
    border: 1px solid var(--border-soft, rgba(226, 232, 240, 0.9));
    box-shadow: 0 10px 30px -10px rgba(15, 23, 42, 0.05);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 100%;
    box-sizing: border-box;
    transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease);
}
.about-story-card:hover {
    box-shadow: 0 16px 40px -12px rgba(15, 23, 42, 0.08);
}
.about-story-header {
    margin-bottom: clamp(24px, 3vw, 40px);
}
.about-story-eyebrow {
    display: inline-block;
    color: #F97316;
    font-size: clamp(14px, 1.1vw, 15.5px);
    font-weight: 700;
    letter-spacing: -0.01em;
    margin-bottom: 16px;
    text-transform: none;
}
.about-story-title {
    font-family: var(--display);
    font-size: clamp(28px, 3.2vw, 44px);
    font-weight: 800;
    line-height: 1.18;
    letter-spacing: -0.03em;
    color: var(--ink);
    margin: 0;
}
.about-story-content {
    display: flex;
    flex-direction: column;
    gap: 16px;
}
.about-story-p {
    font-size: clamp(14px, 1.02vw, 15px);
    line-height: 1.76;
    color: var(--ink-soft, #475569);
    margin: 0;
}

/* Right Column: Media Banner + 2x2 Stats */
.about-media-stats-col {
    display: flex;
    flex-direction: column;
    gap: clamp(20px, 2.4vw, 28px);
    justify-content: space-between;
    height: 100%;
}

.about-image-card {
    position: relative;
    width: 100%;
    height: clamp(250px, 25vw, 320px);
    border-radius: 24px;
    overflow: hidden;
    border: 1px solid var(--border-soft, rgba(226, 232, 240, 0.9));
    box-shadow: 0 10px 30px -10px rgba(15, 23, 42, 0.05);
    background: var(--surface, #FFFFFF);
}
.about-feature-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 25%;
    display: block;
    transition: transform 0.6s var(--ease);
}
.about-image-card:hover .about-feature-img {
    transform: scale(1.03);
}

.about-stats-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: clamp(16px, 1.8vw, 24px);
}
.about-stat-card {
    background: var(--surface, #FFFFFF);
    border-radius: 20px;
    padding: clamp(24px, 2.5vw, 32px);
    border: 1px solid var(--border-soft, rgba(226, 232, 240, 0.9));
    box-shadow: 0 4px 18px -4px rgba(15, 23, 42, 0.04);
    display: flex;
    flex-direction: column;
    justify-content: center;
    transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease);
}
.about-stat-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 28px -8px rgba(15, 23, 42, 0.08);
}
.about-stat-number {
    font-family: var(--display);
    font-size: clamp(32px, 3.2vw, 44px);
    font-weight: 800;
    letter-spacing: -0.035em;
    line-height: 1;
    color: var(--ink);
    display: flex;
    align-items: baseline;
    gap: 1px;
    margin-bottom: 8px;
}
.about-stat-suffix {
    font-size: 0.82em;
    font-weight: 800;
    color: var(--ink);
}
.about-stat-label {
    font-size: clamp(12.5px, 0.95vw, 14px);
    font-weight: 500;
    color: var(--ink-soft, #64748B);
    line-height: 1.35;
}

/* Responsive Breakpoints */
@media (max-width: 991px) {
    .about-intro-showcase-grid {
        grid-template-columns: 1fr;
        gap: 28px;
    }
    .about-media-stats-col {
        gap: 24px;
    }
    .about-image-card {
        height: clamp(260px, 45vw, 360px);
    }
}

@media (max-width: 540px) {
    .about-stats-grid {
        grid-template-columns: 1fr 1fr;
        gap: 12px;
    }
    .about-stat-card {
        padding: 18px 16px;
        border-radius: 16px;
    }
    .about-stat-number {
        font-size: 28px;
    }
    .about-story-card {
        padding: 26px 20px;
        border-radius: 20px;
    }
    .about-image-card {
        border-radius: 18px;
        height: 220px;
    }
}

/* Dark Mode Support */
[data-theme="dark"] .section-about-intro {
    background: var(--bg-soft, #0F172A);
}
[data-theme="dark"] .about-story-card,
[data-theme="dark"] .about-image-card,
[data-theme="dark"] .about-stat-card {
    background: var(--surface, #1E293B);
    border-color: var(--border, rgba(255, 255, 255, 0.08));
    box-shadow: 0 10px 30px -10px rgba(0, 0, 0, 0.3);
}
[data-theme="dark"] .about-story-p,
[data-theme="dark"] .about-stat-label {
    color: var(--ink-soft, #94A3B8);
}
[data-theme="dark"] .about-story-eyebrow {
    color: #FB923C;
}

/* Legacy Support */
.about-intro-grid {
    display: grid;
    grid-template-columns: 1fr 0.95fr;
    gap: clamp(34px, 5vw, 76px);
    align-items: center;
}
.lead-paragraph {
    font-size: clamp(17px, 1.4vw, 20px);
    font-weight: 500;
    color: var(--ink);
    margin-bottom: 18px;
}

.values-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: clamp(16px, 2vw, 26px);
}
.value-card {
    padding: clamp(26px, 3vw, 38px);
    border-radius: var(--r-lg);
    background: var(--surface);
    border: 1px solid var(--border);
    box-shadow: var(--shadow-sm);
    transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.value-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-md); }
.value-icon {
    width: 52px; height: 52px;
    display: grid; place-items: center;
    margin-bottom: 22px;
    border-radius: 16px;
    color: var(--brand);
    background: var(--tint-blue);
}
.value-icon svg.icon { font-size: 25px; }
.value-card:nth-child(2) .value-icon { background: var(--tint-mint); }
.value-card:nth-child(3) .value-icon { background: var(--tint-peach); color: var(--accent); }
.value-title { font-size: clamp(19px, 1.7vw, 23px); }
.value-desc { font-size: 15px; color: var(--ink-soft); margin: 0; }

/* 10. Contact & forms ------------------------------------------------------ */
.contact-layout-grid {
    display: grid;
    grid-template-columns: 0.85fr 1.15fr;
    gap: clamp(28px, 4vw, 64px);
    align-items: start;
}
.contact-panel-title { font-size: clamp(25px, 2.8vw, 34px); }
.contact-panel-desc { color: var(--ink-soft); margin-bottom: 32px; }

.contact-cards-stack { display: grid; gap: 14px; }
.contact-info-card {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 20px;
    border-radius: var(--r-md);
    background: var(--surface);
    border: 1px solid var(--border);
    transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.contact-info-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-sm); }
.info-card-icon {
    width: 44px; height: 44px;
    flex: none;
    display: grid; place-items: center;
    border-radius: 14px;
    color: var(--brand);
    background: var(--tint-blue);
}
.info-card-icon svg.icon { font-size: 20px; }
.contact-info-card:nth-child(2) .info-card-icon { background: var(--tint-mint); }
.contact-info-card:nth-child(3) .info-card-icon { background: var(--tint-peach); color: var(--accent); }
.contact-info-card:nth-child(4) .info-card-icon { background: var(--tint-lav); }
.info-card-text { display: grid; gap: 3px; min-width: 0; }
.info-label {
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--ink-faint);
}
.info-val { font-size: 15.5px; font-weight: 600; word-break: break-word; }
a.info-val { transition: color 240ms var(--ease); }
a.info-val:hover { color: var(--brand); }

.contact-form-card {
    padding: clamp(26px, 3.4vw, 46px);
    border-radius: var(--r-xl);
    background: var(--surface);
    border: 1px solid var(--border);
    box-shadow: var(--shadow-md);
}
.form-card-title { font-size: clamp(21px, 2.2vw, 27px); margin-bottom: 8px; }
.form-card-subtitle { font-size: 15px; color: var(--ink-soft); margin-bottom: 28px; }

.form-row { display: grid; gap: 0 18px; }
.form-row-split { grid-template-columns: 1fr 1fr; }
.form-group { display: grid; gap: 8px; margin-bottom: 18px; }
.form-label { font-size: 13.5px; font-weight: 600; color: var(--ink-soft); }
.req { color: var(--accent); }

.form-control {
    width: 100%;
    padding: 14px 16px;
    border-radius: var(--r-sm);
    border: 1px solid var(--border-strong);
    background: var(--bg);
    color: var(--ink);
    font: inherit;
    font-size: 15.5px;
    transition: border-color 240ms var(--ease), background-color 240ms var(--ease),
                box-shadow 240ms var(--ease);
}
.form-control::placeholder { color: var(--ink-faint); }
textarea.form-control { resize: vertical; min-height: 140px; }
select.form-control,
.wpcf7-select,
.rsvp-select,
.registration-select {
    appearance: none;
    -webkit-appearance: none;
    padding-right: 42px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5l5-5' fill='none' stroke='%2362676F' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 16px center;
    background-size: 12px;
    cursor: pointer;
    accent-color: var(--brand);
    color-scheme: light;
}
/* Native option dropdown styling fallback */
select.form-control option,
.wpcf7-select option,
.rsvp-select option,
.registration-select option {
    background-color: var(--surface);
    color: var(--ink);
    padding: 10px 14px;
    font-family: var(--sans);
    font-size: 14.5px;
}
select.form-control option:checked,
.wpcf7-select option:checked,
.rsvp-select option:checked,
.registration-select option:checked {
    background-color: var(--brand);
    color: #ffffff;
}

.form-control:focus {
    outline: none;
    border-color: var(--brand);
    background: var(--surface);
    box-shadow: 0 0 0 4px rgba(61, 108, 176, 0.14);
}
.form-group.has-error .form-control {
    border-color: #D2694B;
    box-shadow: 0 0 0 4px rgba(210, 105, 75, 0.12);
}

/* --------------------------------------------------------------------------
   Custom Themed Select Component (Matches Brand Palette & Rounded Design)
   -------------------------------------------------------------------------- */
.eg-select-native-hidden {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

.eg-select-custom {
    position: relative;
    width: 100%;
    font-family: var(--sans);
    outline: none;
    user-select: none;
}

.eg-select-trigger {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    min-height: 52px;
    padding: 13px 16px;
    border-radius: var(--r-sm);
    border: 1px solid var(--border-strong);
    background: var(--bg);
    color: var(--ink);
    font: inherit;
    font-size: 15.5px;
    line-height: 1.4;
    cursor: pointer;
    box-sizing: border-box;
    transition: border-color 220ms var(--ease),
                background-color 220ms var(--ease),
                box-shadow 220ms var(--ease);
}

.eg-select-trigger:hover {
    border-color: rgba(36, 69, 123, 0.4);
    background: var(--surface);
}

.eg-select-custom:focus > .eg-select-trigger,
.eg-select-custom.is-open > .eg-select-trigger {
    outline: none;
    border-color: var(--brand);
    background: var(--surface);
    box-shadow: 0 0 0 4px rgba(61, 108, 176, 0.14);
}

.eg-select-custom.is-invalid > .eg-select-trigger,
.form-group.has-error .eg-select-trigger {
    border-color: #D2694B !important;
    box-shadow: 0 0 0 4px rgba(210, 105, 75, 0.12) !important;
}

.eg-select-value {
    flex: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    padding-right: 12px;
    color: var(--ink);
    font-weight: 500;
}

.eg-select-value.is-placeholder {
    color: var(--ink-faint);
    font-weight: 400;
}

.eg-select-arrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    color: var(--ink-soft);
    flex-shrink: 0;
    transition: transform 240ms var(--ease), color 200ms ease;
}

.eg-select-arrow svg {
    width: 11px;
    height: 8px;
    display: block;
}

.eg-select-custom:hover .eg-select-arrow {
    color: var(--brand);
}

.eg-select-custom.is-open .eg-select-arrow {
    transform: rotate(180deg);
    color: var(--brand);
}

.eg-select-dropdown {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    right: 0;
    z-index: 150;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-sm);
    box-shadow: 0 12px 36px rgba(36, 69, 123, 0.14),
                0 4px 12px rgba(25, 27, 31, 0.05);
    padding: 6px;
    max-height: 270px;
    overflow-y: auto;
    overscroll-behavior: contain;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(-8px);
    transition: opacity 180ms ease,
                transform 180ms var(--ease),
                visibility 180ms;
    scrollbar-width: thin;
    scrollbar-color: rgba(36, 69, 123, 0.25) transparent;
}

.eg-select-dropdown::-webkit-scrollbar {
    width: 5px;
}

.eg-select-dropdown::-webkit-scrollbar-thumb {
    background: rgba(36, 69, 123, 0.25);
    border-radius: var(--r-pill);
}

.eg-select-dropdown::-webkit-scrollbar-thumb:hover {
    background: var(--brand);
}

.eg-select-custom.is-open .eg-select-dropdown {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(0);
}

.eg-select-custom.is-dropup .eg-select-dropdown {
    top: auto;
    bottom: calc(100% + 6px);
    transform: translateY(8px);
}

.eg-select-custom.is-dropup.is-open .eg-select-dropdown {
    transform: translateY(0);
}

.eg-select-option {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 14px;
    border-radius: 8px;
    color: var(--ink);
    font-size: 14.5px;
    line-height: 1.4;
    cursor: pointer;
    position: relative;
    transition: background-color 150ms ease, color 150ms ease;
}

.eg-select-option:hover,
.eg-select-option.is-highlighted {
    background-color: var(--tint-blue);
    color: var(--brand);
    font-weight: 500;
}

.eg-select-option.is-selected {
    background-color: var(--brand);
    color: #ffffff;
    font-weight: 600;
}

.eg-select-option.is-selected:hover,
.eg-select-option.is-selected.is-highlighted {
    background-color: var(--brand-soft);
    color: #ffffff;
}

.eg-select-option-label {
    flex: 1;
    text-align: left;
}

.eg-select-option-check {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    opacity: 0;
    transform: scale(0.6);
    transition: opacity 160ms ease, transform 160ms ease;
    flex-shrink: 0;
    color: currentColor;
}

.eg-select-option.is-selected .eg-select-option-check {
    opacity: 1;
    transform: scale(1);
}

.form-submit-wrap { margin-top: 26px; }
.form-feedback {
    margin-top: 18px;
    padding: 14px 18px;
    border-radius: var(--r-sm);
    font-size: 14.5px;
    font-weight: 600;
}
.form-feedback.is-success { color: #1E6B50; background: var(--tint-mint); }
.form-feedback.is-error   { color: #A8452A; background: var(--tint-peach); }
[data-theme="dark"] .form-feedback.is-success { color: #7FD9B4; }
[data-theme="dark"] .form-feedback.is-error   { color: #F0A98C; }

/* Contact Form 7 Custom Theming & Layouts */
.wpcf7-form-control-wrap {
    display: block;
    width: 100%;
    position: relative;
}
.wpcf7-not-valid-tip {
    font-size: 12.5px;
    color: #ef4444;
    font-weight: 500;
    margin-top: 5px;
    display: block;
}
.wpcf7 form.invalid .wpcf7-response-output,
.wpcf7 form.unaccepted .wpcf7-response-output {
    border: 1px solid rgba(239, 68, 68, 0.3) !important;
    background: rgba(239, 68, 68, 0.08) !important;
    color: #dc2626 !important;
    border-radius: var(--r-sm);
    padding: 14px 18px !important;
    margin: 18px 0 0 !important;
    font-size: 14px;
    font-weight: 600;
}
.wpcf7 form.sent .wpcf7-response-output {
    border: 1px solid rgba(16, 185, 129, 0.3) !important;
    background: rgba(16, 185, 129, 0.08) !important;
    color: #059669 !important;
    border-radius: var(--r-sm);
    padding: 14px 18px !important;
    margin: 18px 0 0 !important;
    font-size: 14px;
    font-weight: 600;
}
.wpcf7-spinner {
    margin-left: 10px;
    vertical-align: middle;
}
.contact-form-card .wpcf7-submit {
    cursor: pointer;
    border: none;
    outline: none;
    font-family: inherit;
    font-size: 15.5px;
    font-weight: 600;
}
.event-rsvp-card .wpcf7-submit {
    cursor: pointer;
    border: none;
    outline: none;
    font-family: inherit;
    font-size: 13.5px;
    font-weight: 600;
    width: 100%;
}
.event-rsvp-card .wpcf7-form {
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.event-rsvp-card .rsvp-submit-wrap {
    margin-top: 6px;
}

/* Contact Form 7 Honeypot Anti-Spam Trap */
.wpcf7-hp-wrap {
    display: none !important;
    visibility: hidden !important;
    position: absolute !important;
    left: -9999px !important;
    top: -9999px !important;
    width: 0 !important;
    height: 0 !important;
    opacity: 0 !important;
    pointer-events: none !important;
    clip: rect(0, 0, 0, 0) !important;
}

/* Contact Form Submission Popup Modal & Registration Dialog */
body.modal-open {
    overflow: hidden !important;
    touch-action: none !important;
}

body.modal-open .site-header {
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    transform: translateY(-24px) !important;
    transition: opacity 220ms ease, visibility 220ms ease, transform 220ms ease !important;
}

.edugulf-modal-backdrop {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    height: 100dvh !important;
    z-index: 9999999 !important;
    background: rgba(10, 16, 28, 0.85) !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 24px 16px !important;
    box-sizing: border-box !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.3s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.edugulf-modal-backdrop.is-active {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
}

.edugulf-modal-box {
    position: relative;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-xl, 20px);
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25), 0 0 0 1px rgba(255, 255, 255, 0.08);
    max-width: 480px;
    width: 100%;
    padding: clamp(28px, 4vw, 42px) clamp(24px, 3.5vw, 36px);
    text-align: center;
    transform: scale(0.92) translateY(12px);
    transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.edugulf-modal-backdrop.is-active .edugulf-modal-box {
    transform: scale(1) translateY(0);
}

.modal-close-btn {
    position: absolute;
    top: 16px;
    right: 16px;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 1px solid var(--border-soft);
    background: var(--bg);
    color: var(--ink-soft);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease, border-color 0.2s ease;
    padding: 0;
}

.modal-close-btn svg {
    width: 18px;
    height: 18px;
}

.modal-close-btn:hover {
    background: var(--bg-hover, rgba(0,0,0,0.06));
    color: var(--ink);
    border-color: var(--border-strong);
    transform: scale(1.08);
}

[data-theme="dark"] .modal-close-btn:hover {
    background: rgba(255,255,255,0.1);
}

/* ---- Dark-mode overrides for Event Registration Modal & Form ---- */
[data-theme="dark"] .edugulf-modal-box-registration {
    background: var(--surface) !important;
    border-color: var(--border-strong) !important;
    box-shadow: 0 25px 60px -15px rgba(0, 0, 0, 0.7), 0 0 0 1px rgba(255, 255, 255, 0.08) !important;
}

[data-theme="dark"] .event-modal-header .section-eyebrow {
    color: var(--accent);
}
[data-theme="dark"] .event-modal-main-title {
    color: var(--ink);
}
[data-theme="dark"] .event-modal-sub {
    color: var(--ink-soft);
}

/* Spotlight card in dark mode */
[data-theme="dark"] .event-spotlight-card {
    background: linear-gradient(135deg, rgba(127, 169, 232, 0.08) 0%, rgba(240, 137, 80, 0.06) 100%);
    border-color: rgba(127, 169, 232, 0.18);
}
[data-theme="dark"] .spotlight-cat-badge {
    background: var(--tint-blue);
    color: var(--brand);
}
[data-theme="dark"] .spotlight-event-name {
    color: var(--ink);
}
[data-theme="dark"] .spotlight-meta-item {
    color: var(--ink-soft);
}
[data-theme="dark"] .spotlight-meta-item svg {
    color: var(--brand);
}
[data-theme="dark"] .spotlight-status-indicator {
    color: #4ade80;
}
[data-theme="dark"] .spotlight-pulse-dot {
    background: #4ade80;
    box-shadow: 0 0 0 3px rgba(74, 222, 128, 0.2);
}

/* Form labels & inputs in dark mode */
[data-theme="dark"] .form-group-registration label {
    color: var(--ink-soft);
}
[data-theme="dark"] .form-group-registration label .req {
    color: var(--accent);
}
[data-theme="dark"] .registration-input,
[data-theme="dark"] .registration-select,
[data-theme="dark"] select.registration-select {
    color: var(--ink) !important;
    background: var(--bg) !important;
    border-color: var(--border-strong) !important;
}
[data-theme="dark"] .registration-input::placeholder {
    color: var(--ink-faint) !important;
}
[data-theme="dark"] .registration-input:hover,
[data-theme="dark"] .registration-select:hover,
[data-theme="dark"] select.registration-select:hover {
    border-color: rgba(127, 169, 232, 0.4) !important;
    background: var(--surface) !important;
}
[data-theme="dark"] .registration-input:focus,
[data-theme="dark"] .registration-select:focus,
[data-theme="dark"] select.registration-select:focus {
    border-color: var(--brand) !important;
    background: var(--surface) !important;
    box-shadow: 0 0 0 4px rgba(127, 169, 232, 0.16) !important;
}

/* Select dropdown option text */
[data-theme="dark"] .registration-select option,
[data-theme="dark"] select.registration-select option {
    background: var(--surface-2) !important;
    color: var(--ink) !important;
}

/* Submit button in dark mode */
[data-theme="dark"] .registration-submit-btn {
    background: var(--brand);
    color: var(--on-brand);
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.3);
}
[data-theme="dark"] .registration-submit-btn:hover {
    background: var(--brand-soft);
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.4);
}

/* CF7 response / validation messages */
[data-theme="dark"] .event-registration-form-wrap .wpcf7-response-output {
    color: var(--ink-soft) !important;
    border-color: var(--border) !important;
}
[data-theme="dark"] .event-registration-form-wrap .wpcf7-not-valid-tip {
    color: #f87171 !important;
}

/* Success state in dark mode */
[data-theme="dark"] .reg-success-title {
    color: var(--ink);
}
[data-theme="dark"] .reg-success-event-notice {
    color: var(--ink);
}
[data-theme="dark"] .reg-success-event-notice strong {
    color: var(--brand);
}
[data-theme="dark"] .reg-success-desc {
    color: var(--ink-soft);
}
[data-theme="dark"] .reg-success-icon-wrap {
    background: rgba(74, 222, 128, 0.12);
    color: #4ade80;
}

/* ---- Dark-mode: Moderator & Speaker Cards (Events Page & Single Event) ---- */
[data-theme="dark"] .moderator-card,
[data-theme="dark"] .single-mod-card {
    background: var(--surface) !important;
    border-color: var(--border) !important;
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.45) !important;
}

[data-theme="dark"] .mod-avatar-box,
[data-theme="dark"] .single-mod-avatar-wrap {
    background: var(--surface-2) !important;
    border-color: rgba(240, 137, 80, 0.35) !important;
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.4) !important;
}

[data-theme="dark"] .mod-name,
[data-theme="dark"] .single-mod-name {
    color: var(--ink) !important;
}

[data-theme="dark"] .mod-designation,
[data-theme="dark"] .single-mod-designation {
    color: var(--ink-soft) !important;
}

[data-theme="dark"] .mod-designation strong,
[data-theme="dark"] .single-mod-designation .role,
[data-theme="dark"] .single-mod-designation strong {
    color: var(--ink) !important;
}

[data-theme="dark"] .mod-bio-text,
[data-theme="dark"] .single-mod-bio {
    color: var(--ink-soft) !important;
}

/* Badge pills & outline tags */
[data-theme="dark"] .badge-outline,
[data-theme="dark"] .badge-pill.badge-outline {
    background: rgba(255, 255, 255, 0.06) !important;
    border-color: rgba(255, 255, 255, 0.18) !important;
    color: var(--ink-soft) !important;
}

[data-theme="dark"] .badge-pill:not(.badge-outline) {
    background: var(--gold-bg) !important;
    color: var(--gold-deep) !important;
    border-color: rgba(251, 191, 36, 0.28) !important;
}

[data-theme="dark"] .mod-connect-link,
[data-theme="dark"] .single-mod-social-btn {
    background: rgba(127, 169, 232, 0.14) !important;
    color: var(--brand) !important;
    border-color: rgba(127, 169, 232, 0.25) !important;
}

[data-theme="dark"] .mod-connect-link:hover,
[data-theme="dark"] .single-mod-social-btn:hover {
    background: var(--brand) !important;
    color: var(--on-brand) !important;
}

/* Session Theme Pills */
[data-theme="dark"] .mod-topic-tag,
[data-theme="dark"] .single-mod-topic-badge {
    background: rgba(127, 169, 232, 0.08) !important;
    border-color: rgba(127, 169, 232, 0.2) !important;
}
[data-theme="dark"] .mod-topic-tag:hover,
[data-theme="dark"] .single-mod-topic-badge:hover {
    background: rgba(127, 169, 232, 0.12) !important;
    border-color: rgba(127, 169, 232, 0.3) !important;
}
[data-theme="dark"] .mod-topic-badge-label,
[data-theme="dark"] .single-mod-topic-badge .topic-tag-label {
    color: var(--brand) !important;
    background: var(--tint-blue) !important;
}
[data-theme="dark"] .mod-topic-title,
[data-theme="dark"] .single-mod-topic-badge .topic-tag-text {
    color: var(--ink) !important;
}

/* ---- Dark-mode: Distinguished Panelists Section ---- */
[data-theme="dark"] .panelists-eyebrow-pill {
    background: rgba(251, 191, 36, 0.12) !important;
    border-color: rgba(251, 191, 36, 0.3) !important;
    color: var(--gold-deep) !important;
}
[data-theme="dark"] .panelists-main-title {
    color: var(--ink) !important;
}
[data-theme="dark"] .panelists-main-subtitle {
    color: var(--ink-soft) !important;
}
[data-theme="dark"] .panelist-card {
    background: var(--surface) !important;
    border-color: var(--border) !important;
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.35) !important;
}
[data-theme="dark"] .panelist-card:hover {
    border-color: rgba(240, 137, 80, 0.4) !important;
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.55) !important;
}
[data-theme="dark"] .panelist-avatar-box {
    background: var(--surface-2) !important;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.3) !important;
}
[data-theme="dark"] .panelist-avatar-placeholder {
    background: var(--surface-2) !important;
    color: var(--ink-faint) !important;
}
[data-theme="dark"] .panelist-avatar-box .panelist-social-btn {
    background: var(--surface-2) !important;
    border-color: var(--border) !important;
    color: var(--brand) !important;
}
[data-theme="dark"] .panelist-name {
    color: var(--ink) !important;
}
[data-theme="dark"] .panelist-designation {
    color: var(--ink-soft) !important;
}
[data-theme="dark"] .panelist-designation .role {
    color: var(--ink) !important;
}
[data-theme="dark"] .panelist-topic-badge {
    background: rgba(251, 191, 36, 0.12) !important;
    color: var(--gold-deep) !important;
}
[data-theme="dark"] .panelist-bio {
    color: var(--ink-soft) !important;
}

/* ---- Dark-mode: Speaker Cards (Single Event & Round-tables) ---- */
[data-theme="dark"] .event-speakers-section {
    background: var(--surface) !important;
    border-color: var(--border) !important;
}
[data-theme="dark"] .speakers-heading {
    color: var(--ink) !important;
}
[data-theme="dark"] .speakers-subheading {
    color: var(--ink-soft) !important;
}
[data-theme="dark"] .speaker-card {
    background: var(--surface-2) !important;
    border-color: var(--border) !important;
}
[data-theme="dark"] .speaker-card:hover {
    border-color: rgba(240, 137, 80, 0.4) !important;
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.4) !important;
}
[data-theme="dark"] .speaker-avatar-wrap {
    background: var(--surface) !important;
}
[data-theme="dark"] .speaker-avatar-placeholder {
    background: var(--surface) !important;
    color: var(--ink-faint) !important;
}
[data-theme="dark"] .speaker-name {
    color: var(--ink) !important;
}
[data-theme="dark"] .speaker-role {
    color: var(--ink-soft) !important;
}

/* ---- Dark-mode: Guest of Honour Section ---- */
[data-theme="dark"] .goh-spotlight-card {
    background: var(--surface) !important;
    border-color: var(--border) !important;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5) !important;
}
[data-theme="dark"] .goh-name {
    color: var(--ink) !important;
}
[data-theme="dark"] .goh-role-org {
    color: var(--ink-soft) !important;
}
[data-theme="dark"] .goh-role-org .goh-role {
    color: var(--gold-deep) !important;
}

/* ---- Dark-mode: Showcase Event Masthead on Events Page ---- */
[data-theme="dark"] .showcase-event-badge {
    background: rgba(251, 191, 36, 0.12) !important;
    border-color: rgba(251, 191, 36, 0.3) !important;
    color: var(--gold-deep) !important;
}
[data-theme="dark"] .showcase-event-title {
    color: var(--ink) !important;
}
[data-theme="dark"] .showcase-event-subtext {
    color: var(--ink-soft) !important;
}
[data-theme="dark"] .showcase-event-meta .meta-tag {
    background: var(--surface) !important;
    border-color: var(--border) !important;
    color: var(--ink-soft) !important;
}
[data-theme="dark"] .showcase-event-meta .meta-link {
    background: rgba(251, 191, 36, 0.1) !important;
    border-color: rgba(251, 191, 36, 0.3) !important;
    color: var(--gold-deep) !important;
}
[data-theme="dark"] .showcase-event-meta .meta-link:hover {
    background: var(--gold-deep) !important;
    color: #0F1115 !important;
}

/* ---- Dark-mode: Single Event Sidebar & Action Cards ---- */
[data-theme="dark"] .event-action-card,
[data-theme="dark"] .event-rsvp-card,
[data-theme="dark"] .sponsor-action-card,
[data-theme="dark"] .sponsor-highlights-box,
[data-theme="dark"] .gallery-action-card,
[data-theme="dark"] .related-gallery-card {
    background: var(--surface) !important;
    border-color: var(--border) !important;
    box-shadow: 0 14px 34px rgba(0, 0, 0, 0.4) !important;
}
[data-theme="dark"] .card-header-status,
[data-theme="dark"] .sponsor-action-card .card-headline,
[data-theme="dark"] .gallery-action-card .card-badge-header {
    border-bottom-color: var(--border) !important;
}
[data-theme="dark"] .card-header-status .card-headline,
[data-theme="dark"] .sponsor-highlights-box .highlights-title,
[data-theme="dark"] .gallery-action-card .card-headline,
[data-theme="dark"] .sponsor-action-card .card-headline {
    color: var(--ink) !important;
}
[data-theme="dark"] .event-details-list li,
[data-theme="dark"] .sponsor-details-list li,
[data-theme="dark"] .gallery-details-list li {
    border-bottom-color: var(--border) !important;
}
[data-theme="dark"] .event-details-list .detail-label,
[data-theme="dark"] .sponsor-details-list .detail-label,
[data-theme="dark"] .gallery-details-list .detail-label {
    color: var(--ink-faint) !important;
}
[data-theme="dark"] .event-details-list .detail-value,
[data-theme="dark"] .sponsor-details-list .detail-value,
[data-theme="dark"] .gallery-details-list .detail-value {
    color: var(--ink) !important;
}
[data-theme="dark"] .single-event-meta-bar .meta-pill,
[data-theme="dark"] .single-sponsor-meta-bar .meta-pill,
[data-theme="dark"] .single-gallery-meta-bar .meta-pill {
    background: var(--surface) !important;
    border-color: var(--border) !important;
    color: var(--ink-soft) !important;
}

/* ---- Dark-mode: Contact Page & Form Controls ---- */
[data-theme="dark"] .contact-info-card,
[data-theme="dark"] .contact-form-card {
    background: var(--surface) !important;
    border-color: var(--border) !important;
}
[data-theme="dark"] .contact-panel-title,
[data-theme="dark"] .form-card-title {
    color: var(--ink) !important;
}
[data-theme="dark"] .contact-panel-desc,
[data-theme="dark"] .form-card-subtitle {
    color: var(--ink-soft) !important;
}
[data-theme="dark"] .info-val {
    color: var(--ink) !important;
}
[data-theme="dark"] .info-label {
    color: var(--ink-faint) !important;
}
[data-theme="dark"] .form-label {
    color: var(--ink-soft) !important;
}
[data-theme="dark"] .form-control {
    background: var(--bg) !important;
    border-color: var(--border-strong) !important;
    color: var(--ink) !important;
}
[data-theme="dark"] .form-control::placeholder {
    color: var(--ink-faint) !important;
}
[data-theme="dark"] .form-control:focus {
    background: var(--surface) !important;
    border-color: var(--brand) !important;
}
[data-theme="dark"] select.form-control,
[data-theme="dark"] .wpcf7-select,
[data-theme="dark"] .rsvp-select {
    color-scheme: dark !important;
    background-color: var(--bg) !important;
    color: var(--ink) !important;
    border-color: var(--border-strong) !important;
}
[data-theme="dark"] select.form-control option,
[data-theme="dark"] .wpcf7-select option,
[data-theme="dark"] .rsvp-select option {
    background-color: var(--surface-2) !important;
    color: var(--ink) !important;
}
[data-theme="dark"] .eg-select-trigger {
    background: var(--bg) !important;
    border-color: var(--border-strong) !important;
    color: var(--ink) !important;
}
[data-theme="dark"] .eg-select-dropdown {
    background: var(--surface) !important;
    border-color: var(--border) !important;
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.6) !important;
}
[data-theme="dark"] .eg-select-option {
    color: var(--ink) !important;
}
[data-theme="dark"] .eg-select-option:hover,
[data-theme="dark"] .eg-select-option.is-highlighted {
    background-color: var(--tint-blue) !important;
    color: var(--brand) !important;
}

/* ---- Dark-mode: Global Typography & Post Content ---- */
[data-theme="dark"] .entry-content h1,
[data-theme="dark"] .entry-content h2,
[data-theme="dark"] .entry-content h3,
[data-theme="dark"] .entry-content h4,
[data-theme="dark"] .entry-content h5,
[data-theme="dark"] .entry-content h6,
[data-theme="dark"] .page-title,
[data-theme="dark"] .section-title {
    color: var(--ink) !important;
}

[data-theme="dark"] .entry-content p,
[data-theme="dark"] .entry-content li {
    color: var(--ink-soft) !important;
}

[data-theme="dark"] .entry-content strong,
[data-theme="dark"] .entry-content b {
    color: var(--ink) !important;
}

[data-theme="dark"] .entry-content blockquote {
    background: var(--surface-2) !important;
    border-left-color: var(--brand) !important;
    color: var(--ink-soft) !important;
}

[data-theme="dark"] .entry-content table th {
    background: var(--surface-2) !important;
    color: var(--ink) !important;
    border-color: var(--border) !important;
}

[data-theme="dark"] .entry-content table td {
    border-color: var(--border) !important;
    color: var(--ink-soft) !important;
}

[data-theme="dark"] .pagination a,
[data-theme="dark"] .page-numbers:not(.current) {
    background: var(--surface) !important;
    border-color: var(--border) !important;
    color: var(--ink) !important;
}


.modal-icon-circle {
    width: 64px;
    height: 64px;
    margin: 0 auto 18px;
    border-radius: 50%;
    background: rgba(16, 185, 129, 0.12);
    color: #10b981;
    display: flex;
    align-items: center;
    justify-content: center;
}

.modal-icon-circle svg {
    width: 36px;
    height: 36px;
}

.modal-title {
    font-size: clamp(20px, 2.2vw, 24px);
    font-weight: 700;
    color: var(--ink);
    margin: 0 0 10px;
    letter-spacing: -0.02em;
}

.modal-desc {
    font-size: 15px;
    color: var(--ink-soft);
    line-height: 1.55;
    margin: 0 0 24px;
}

.modal-footer-btn {
    display: flex;
    justify-content: center;
}

.modal-action-btn {
    min-width: 150px;
    padding: 12px 28px;
    font-size: 15px;
}

/* ==========================================================================
   Event Registration Popup Modal & Form Styles
   Aligned with EduGulf Theme Color Palette
   ========================================================================== */
.edugulf-modal-box-registration {
    position: relative !important;
    max-width: 640px !important;
    width: 100% !important;
    margin: auto 0 !important;
    box-sizing: border-box !important;
    max-height: calc(100vh - 32px) !important;
    max-height: calc(100dvh - 32px) !important;
    min-height: min(680px, 85vh) !important;
    overflow-y: auto !important;
    overscroll-behavior: contain !important;
    -webkit-overflow-scrolling: touch !important;
    text-align: left !important;
    padding: clamp(28px, 4.5vw, 42px) !important;
    border-radius: var(--r-xl, 20px) !important;
    background: var(--surface) !important;
    border: 1px solid var(--border) !important;
    box-shadow: 0 25px 60px -15px rgba(10, 16, 28, 0.4), 0 0 0 1px rgba(255, 255, 255, 0.12) !important;
    scrollbar-width: thin;
    scrollbar-color: rgba(36, 69, 123, 0.25) transparent;
    transform: scale(0.94) translateY(14px);
    transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.3s ease;
}

.edugulf-modal-backdrop.is-active .edugulf-modal-box-registration {
    transform: scale(1) translateY(0) !important;
}

.edugulf-modal-box-registration::-webkit-scrollbar {
    width: 6px;
}
.edugulf-modal-box-registration::-webkit-scrollbar-thumb {
    background: rgba(36, 69, 123, 0.25);
    border-radius: 999px;
}
.edugulf-modal-box-registration::-webkit-scrollbar-thumb:hover {
    background: var(--brand);
}

.event-modal-header {
    margin-bottom: 18px;
    padding-right: 42px;
}
.event-modal-header .section-eyebrow {
    display: inline-block;
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: 0.08em;
    color: var(--accent);
    margin-bottom: 6px;
}
.event-modal-main-title {
    font-size: clamp(22px, 2.5vw, 28px);
    font-weight: 700;
    color: var(--ink);
    margin: 0 0 6px 0;
    font-family: var(--display, var(--sans));
    letter-spacing: -0.02em;
}
.event-modal-sub {
    font-size: 14.5px;
    color: var(--ink-soft);
    margin: 0;
    line-height: 1.5;
}

/* Event Spotlight Card */
.event-spotlight-card {
    background: linear-gradient(135deg, rgba(36, 69, 123, 0.05) 0%, rgba(228, 118, 60, 0.05) 100%);
    border: 1px solid rgba(36, 69, 123, 0.12);
    border-radius: var(--r-md);
    padding: 16px 20px;
    margin-bottom: 22px;
}
.spotlight-top-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 8px;
}
.spotlight-cat-badge {
    display: inline-block;
    background: var(--tint-blue);
    color: var(--brand);
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 3px 10px;
    border-radius: var(--r-pill);
}
.spotlight-status-indicator {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    font-weight: 600;
    color: #166534;
}
.spotlight-pulse-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #16a34a;
    box-shadow: 0 0 0 3px rgba(22, 163, 74, 0.2);
}
.spotlight-event-name {
    font-size: clamp(17px, 1.8vw, 20px);
    font-weight: 700;
    color: var(--ink);
    margin: 0 0 10px 0;
    line-height: 1.35;
    font-family: var(--display, var(--sans));
}
.spotlight-meta-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 16px;
}
.spotlight-meta-item {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 13px;
    color: var(--ink-soft);
    font-weight: 500;
}
.spotlight-meta-item svg {
    width: 14px;
    height: 14px;
    color: var(--brand);
    flex-shrink: 0;
}

/* Event Registration Form Container & Grid */
.event-registration-form-wrap form {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px 18px;
}
.event-registration-form-wrap form > p {
    display: contents;
}
.form-group-registration {
    display: flex;
    flex-direction: column;
    gap: 6px;
    position: relative;
    width: 100%;
}
.form-group-registration label {
    font-size: 13px;
    font-weight: 600;
    color: var(--ink-soft);
    letter-spacing: 0.01em;
}
.form-group-registration label .req {
    color: var(--accent);
}

.registration-input {
    width: 100%;
    padding: 12px 14px;
    font-size: 14.5px;
    font-family: var(--sans);
    color: var(--ink);
    background: var(--bg);
    border: 1px solid var(--border-strong);
    border-radius: var(--r-sm);
    box-sizing: border-box;
    transition: border-color 200ms var(--ease),
                background-color 200ms var(--ease),
                box-shadow 200ms var(--ease);
}
.registration-input::placeholder {
    color: var(--ink-faint);
}
.registration-input:hover {
    border-color: rgba(36, 69, 123, 0.35);
    background: var(--surface);
}
.registration-input:focus {
    outline: none;
    border-color: var(--brand);
    background: var(--surface);
    box-shadow: 0 0 0 4px rgba(61, 108, 176, 0.14);
}
.registration-input.wpcf7-not-valid,
.has-error .registration-input {
    border-color: #D2694B !important;
    box-shadow: 0 0 0 4px rgba(210, 105, 75, 0.12) !important;
}

/* Select dropdowns inside Registration Form */
.registration-select,
select.registration-select {
    width: 100%;
    padding: 12px 14px;
    font-size: 14.5px;
    font-family: var(--sans);
    color: var(--ink);
    background: var(--bg);
    border: 1px solid var(--border-strong);
    border-radius: var(--r-sm);
    box-sizing: border-box;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M3 4.5L6 7.5L9 4.5' stroke='%2362676F' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round' fill='none'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 14px center;
    background-size: 14px;
    padding-right: 36px;
    cursor: pointer;
    transition: border-color 200ms var(--ease),
                background-color 200ms var(--ease),
                box-shadow 200ms var(--ease);
}
.registration-select:hover,
select.registration-select:hover {
    border-color: rgba(36, 69, 123, 0.35);
    background-color: var(--surface);
}
.registration-select:focus,
select.registration-select:focus {
    outline: none;
    border-color: var(--brand);
    background-color: var(--surface);
    box-shadow: 0 0 0 4px rgba(61, 108, 176, 0.14);
}

/* Textarea inside Registration Form */
textarea.registration-input {
    min-height: 85px;
    resize: vertical;
}

/* Grid Span Layout */
.event-registration-form-wrap .form-group-registration:has(input[name="registration-name"]),
.event-registration-form-wrap .form-group-registration:has(textarea[name="registration-about"]),
.event-registration-form-wrap .registration-submit-wrap,
.event-registration-form-wrap .form-turnstile-wrap,
.event-registration-form-wrap .wpcf7-response-output {
    grid-column: 1 / -1;
}

/* Fallback span for browsers without :has */
.event-registration-form-wrap .registration-submit-wrap,
.event-registration-form-wrap .form-turnstile-wrap {
    grid-column: 1 / -1;
}

/* Submit button */
.registration-submit-btn {
    width: 100%;
    padding: 14px 24px;
    font-size: 15.5px;
    font-weight: 600;
    border-radius: var(--r-pill);
    background: var(--brand);
    color: #ffffff;
    border: none;
    cursor: pointer;
    transition: all 220ms var(--ease);
    box-shadow: 0 4px 14px rgba(36, 69, 123, 0.18);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.registration-submit-btn:hover {
    background: var(--brand-soft);
    transform: translateY(-1px);
    box-shadow: 0 6px 18px rgba(36, 69, 123, 0.25);
}
.registration-submit-btn:active {
    transform: translateY(0);
}

/* Success Confirmation State */
.event-registration-success {
    text-align: center;
    padding: 24px 12px 12px;
}
.reg-success-icon-wrap {
    width: 64px;
    height: 64px;
    margin: 0 auto 16px;
    border-radius: 50%;
    background: var(--tint-mint);
    color: #16a34a;
    display: flex;
    align-items: center;
    justify-content: center;
}
.reg-success-icon-wrap svg {
    width: 32px;
    height: 32px;
}
.reg-success-title {
    font-size: clamp(22px, 2.4vw, 26px);
    font-weight: 700;
    color: var(--ink);
    margin: 0 0 10px;
    font-family: var(--display, var(--sans));
}
.reg-success-event-notice {
    font-size: 15px;
    color: var(--ink);
    margin: 0 0 12px;
}
.reg-success-event-notice strong {
    color: var(--brand);
}
.reg-success-desc {
    font-size: 14px;
    color: var(--ink-soft);
    line-height: 1.6;
    max-width: 480px;
    margin: 0 auto 24px;
}
.reg-success-actions {
    display: flex;
    flex-direction: column;
    gap: 10px;
    max-width: 340px;
    margin: 0 auto;
}

@media (max-width: 640px) {
    .edugulf-modal-backdrop {
        padding: 14px 10px !important;
        align-items: flex-start !important; /* allows full vertical scrolling on mobile */
    }

    .edugulf-modal-box-registration {
        max-width: 100% !important;
        padding: 22px 14px 18px !important;
        border-radius: 16px !important;
        max-height: calc(100dvh - 24px) !important;
        margin: 6px auto !important;
    }

    .modal-close-btn {
        top: 12px !important;
        right: 12px !important;
        width: 32px !important;
        height: 32px !important;
    }

    .event-modal-header {
        margin-bottom: 14px !important;
        padding-right: 36px !important;
    }

    .event-modal-main-title {
        font-size: 20px !important;
        line-height: 1.25 !important;
    }

    .event-modal-sub {
        font-size: 13px !important;
        line-height: 1.4 !important;
    }

    .event-spotlight-card {
        padding: 12px 14px !important;
        margin-bottom: 16px !important;
    }

    .spotlight-event-name {
        font-size: 15.5px !important;
        line-height: 1.35 !important;
    }

    .spotlight-meta-row {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 6px !important;
    }

    .spotlight-meta-item {
        font-size: 12px !important;
    }

    /* Single column form layout on mobile */
    .event-registration-form-wrap form {
        display: flex !important;
        flex-direction: column !important;
        gap: 12px !important;
    }

    .form-group-registration {
        width: 100% !important;
        gap: 5px !important;
    }

    .form-group-registration label {
        font-size: 12.5px !important;
    }

    .registration-input {
        padding: 11px 12px !important;
        font-size: 14px !important;
    }

    textarea.registration-input {
        min-height: 75px !important;
    }

    .registration-submit-btn {
        padding: 12px 18px !important;
        font-size: 15px !important;
    }

    .form-turnstile-wrap {
        width: 100% !important;
        overflow: hidden !important;
    }

    .form-turnstile-wrap .cf-turnstile,
    .form-turnstile-wrap iframe {
        max-width: 100% !important;
    }
}

@media (max-width: 360px) {
    .edugulf-modal-backdrop {
        padding: 10px 6px !important;
    }

    .edugulf-modal-box-registration {
        padding: 18px 10px 14px !important;
        border-radius: 14px !important;
    }

    .event-modal-main-title {
        font-size: 18px !important;
    }

    .spotlight-event-name {
        font-size: 14.5px !important;
    }

    .form-turnstile-wrap .cf-turnstile {
        transform: scale(0.85);
        transform-origin: 0 0;
        margin-bottom: -8px;
    }
}

/* 11. CTA & footer --------------------------------------------------------- */
.cta-banner {
    position: relative;
    overflow: hidden;
    padding: clamp(44px, 6vw, 90px) clamp(26px, 5vw, 72px);
    border-radius: var(--r-xl);
    background: linear-gradient(120deg,
        var(--tint-peach), var(--tint-yellow), var(--tint-mint),
        var(--tint-yellow), var(--tint-peach));
    background-size: 300% 300%;
    animation: cta-flow 18s ease-in-out infinite;
    border: 1px solid var(--border);
    text-align: center;
}
@keyframes cta-flow {
    0%   { background-position: 0% 50%; }
    50%  { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}
.cta-content { position: relative; z-index: 1; max-width: 680px; margin: 0 auto; }
.cta-banner .cta-eyebrow { justify-content: center; color: var(--brand); }
.cta-title { font-size: clamp(28px, 3.6vw, 46px); }
.cta-text { color: var(--tint-ink); font-size: clamp(15.5px, 1.2vw, 18px); }
.cta-buttons, .cta-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    justify-content: center;
    margin-top: 30px;
}
.cta-banner .btn-outline { border-color: rgba(25, 27, 31, 0.24); }
[data-theme="dark"] .cta-banner .btn-outline { border-color: var(--border-strong); }

.cta-decoration { position: absolute; inset: 0; pointer-events: none; }
.cta-shape { position: absolute; border-radius: 50%; filter: blur(48px); opacity: 0.55; }
.cta-shape-1 { width: 300px; height: 300px; top: -110px; left: -80px; background: #FFFFFF; }
.cta-shape-2 { width: 340px; height: 340px; bottom: -140px; right: -90px; background: var(--tint-lav); }

.section-cta {
    position: relative;
    z-index: 1;
    padding-top: var(--section-py);
    padding-bottom: var(--space-24);
    /* Dotted layer is viewport-anchored so it runs seamlessly into the footer */
    background-image:
        radial-gradient(var(--closing-dot, rgba(25, 27, 31, 0.10)) 1.2px, transparent 1.3px),
        linear-gradient(180deg,
            rgba(255, 255, 255, 0) 0%,
            var(--bg-soft) 25%,
            var(--tint-blue) 70%,
            var(--tint-lav) 100%);
    background-size: 22px 22px, 100% 100%;
    /* `background-attachment: fixed` on the dot layer forced the browser to
       re-paint this whole band against the viewport on every scroll frame,
       and it disqualifies the element from being composited — the textbook
       cause of scroll stutter. The dots are a uniform 22px grid, so anchoring
       them to the element instead costs nothing visually, and aligning the
       CTA's grid to its bottom edge and the footer's to its top edge keeps
       the pattern continuous across the seam exactly as before. */
    background-position: 0 100%, 0 0;
    background-attachment: scroll, scroll;
    background-repeat: repeat, no-repeat;
}

[data-theme="dark"] .section-cta {
    --closing-dot: rgba(255, 255, 255, 0.09);
    background-image:
        radial-gradient(var(--closing-dot) 1.2px, transparent 1.3px),
        linear-gradient(180deg,
            rgba(15, 17, 21, 0) 0%,
            var(--bg-soft) 25%,
            var(--tint-blue) 70%,
            var(--tint-lav) 100%);
    background-size: 22px 22px, 100% 100%;
    background-position: 0 100%, 0 0;
    background-attachment: scroll, scroll;
    background-repeat: repeat, no-repeat;
}

.section-cta-compact { padding-bottom: clamp(80px, 9vw, 140px); }
.cta-compact-inner {
    max-width: 660px;
    margin: 0 auto;
    padding: clamp(34px, 4.5vw, 62px);
    border-radius: var(--r-xl);
    background: var(--surface);
    border: 1px solid var(--border);
    box-shadow: var(--shadow-md);
}
.cta-compact-inner h2 { font-size: clamp(25px, 3vw, 36px); }
.cta-compact-inner p { color: var(--ink-soft); }

/* Footer — continuous blended gradient with CTA,
   and giant low-contrast wordmark bleeding off the bottom edge. */
.site-footer {
    position: relative;
    z-index: 1;
    overflow: hidden;
    margin-top: -1px;
    padding-top: clamp(8px, 1.5vw, 20px);
    /* Same viewport-anchored dot grid + a gradient that continues from .section-cta */
    background-image:
        radial-gradient(var(--closing-dot, rgba(25, 27, 31, 0.10)) 1.2px, transparent 1.3px),
        linear-gradient(180deg,
            var(--tint-lav) 0%,
            var(--tint-lav) 30%,
            var(--tint-blue) 75%,
            var(--tint-lav) 100%);
    background-size: 22px 22px, 100% 100%;
    background-position: 0 0, 0 0;
    background-attachment: scroll, scroll;
    background-repeat: repeat, no-repeat;
}
[data-theme="dark"] .site-footer {
    --closing-dot: rgba(255, 255, 255, 0.09);
}

.cta-glow,
.footer-glow,
.footer-dots {
    display: none !important;
}

.footer-top {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: clamp(24px, 4vw, 56px);
    padding: clamp(56px, 7vw, 92px) 0 clamp(40px, 5vw, 60px);
}

.footer-col-brand {
    display: grid;
    gap: 16px;
    justify-items: start;
    padding-left: clamp(24px, 4.5vw, 64px);
}
.footer-logo .site-logo-img, .footer-logo .custom-logo { max-height: 88px; width: auto; }
[data-theme="dark"] .footer-logo .site-logo-img,
[data-theme="dark"] .footer-logo .logo-on-dark { max-height: 96px; }
.footer-logo .site-logo-link--text { font-size: 28px; }
.footer-logo .logo-mark { width: 48px; height: 48px; font-size: 18px; }
.footer-social { display: flex; align-items: center; gap: 10px; }
.footer-social-link {
    display: grid;
    place-items: center;
    width: 34px; height: 34px;
    border-radius: 50%;
    color: var(--ink);
    border: 1px solid var(--border-strong);
    transition: background-color 260ms var(--ease), color 260ms var(--ease),
                border-color 260ms var(--ease), transform 260ms var(--ease);
}
.footer-social-link svg.icon { font-size: 15px; }
.footer-social-link:hover {
    background: var(--ink);
    color: var(--bg);
    border-color: var(--ink);
    transform: translateY(-2px);
}
.footer-email { font-size: 15px; font-weight: 600; color: var(--ink); transition: color 240ms var(--ease); }
.footer-email:hover { color: var(--brand); }
.footer-address { font-style: normal; font-size: 13.5px; line-height: 1.6; color: var(--ink-soft); }
.footer-legal-inline {
    display: flex;
    align-items: center;
    gap: 9px;
    margin-top: 2px;
}
.footer-legal-inline a { font-size: 12.5px; color: var(--ink-faint); transition: color 240ms var(--ease); }
.footer-legal-inline a:hover { color: var(--brand); }
.footer-legal-dot { width: 3px; height: 3px; border-radius: 50%; background: var(--ink-faint); flex: none; }

.footer-col-cta {
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Flowing Animated Gradient Back to Top Pill Button */
.footer-top-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 13px 32px;
    border-radius: var(--r-pill);
    font-family: var(--sans);
    font-size: 15px;
    font-weight: 700;
    letter-spacing: -0.01em;
    cursor: pointer;
    overflow: hidden;
    z-index: 1;
    border: 1px solid rgba(255, 255, 255, 0.7);
    color: #0F172A;
    /* Continuous flowing gradient tailored to Light Theme */
    background: linear-gradient(
        115deg,
        #2563EB 0%,
        #38BDF8 22%,
        #E0F2FE 44%,
        #FED7AA 68%,
        #F97316 86%,
        #2563EB 100%
    );
    background-size: 280% 280%;
    animation: footerTopGradientFlow 6s ease infinite;
    box-shadow: 0 10px 25px -4px rgba(37, 99, 235, 0.35),
                0 4px 12px rgba(0, 0, 0, 0.05),
                inset 0 1px 1px rgba(255, 255, 255, 0.8);
    transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1),
                box-shadow 0.35s cubic-bezier(0.16, 1, 0.3, 1),
                border-color 0.3s ease;
}

[data-theme="dark"] .footer-top-btn {
    color: #FFFFFF;
    border: 1px solid rgba(255, 255, 255, 0.28);
    /* Continuous flowing gradient tailored to Dark Theme */
    background: linear-gradient(
        115deg,
        #1D4ED8 0%,
        #38BDF8 24%,
        #8B5CF6 48%,
        #F08950 72%,
        #EC4899 88%,
        #1D4ED8 100%
    );
    background-size: 280% 280%;
    animation: footerTopGradientFlow 6s ease infinite;
    box-shadow: 0 10px 30px -4px rgba(56, 189, 248, 0.45),
                0 0 20px rgba(240, 137, 80, 0.25),
                inset 0 1px 1px rgba(255, 255, 255, 0.4);
}

.footer-top-btn:hover,
.footer-top-btn:focus-visible {
    transform: translateY(-3px) scale(1.02);
    box-shadow: 0 16px 36px -4px rgba(37, 99, 235, 0.48),
                0 6px 16px rgba(0, 0, 0, 0.1),
                inset 0 1px 1px rgba(255, 255, 255, 0.9);
}

[data-theme="dark"] .footer-top-btn:hover,
[data-theme="dark"] .footer-top-btn:focus-visible {
    box-shadow: 0 16px 40px -4px rgba(56, 189, 248, 0.6),
                0 0 28px rgba(240, 137, 80, 0.4),
                inset 0 1px 1px rgba(255, 255, 255, 0.5);
}

.footer-top-btn:active {
    transform: translateY(-1px) scale(0.99);
}

.footer-top-btn-icon {
    display: inline-flex;
    align-items: center;
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.footer-top-btn-icon svg.icon {
    font-size: 16px;
    stroke-width: 2.4;
}

.footer-top-btn:hover .footer-top-btn-icon,
.footer-top-btn:focus-visible .footer-top-btn-icon {
    transform: translateY(-3px);
}

@keyframes footerTopGradientFlow {
    0% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
    100% {
        background-position: 0% 50%;
    }
}

.footer-col-nav {
    display: flex;
    justify-content: flex-end;
}

.footer-links {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    align-items: center;
    gap: 8px 24px;
}

/* Main nav items render as text links; legal/copyright stay as secondary text below
   them, each forced onto its own row via flex-basis. */
.footer-links .menu-item:not(.menu-item-legal):not(.menu-item-copyright) a {
    display: inline-block;
    padding: 4px 0;
    font-size: 15px;
    font-weight: 600;
    color: var(--ink);
    text-decoration: none;
    transition: color 200ms var(--ease);
}
.footer-links .menu-item:not(.menu-item-legal):not(.menu-item-copyright) a:hover {
    color: var(--brand);
}

.footer-links .menu-item-legal {
    flex-basis: 100%;
    text-align: right;
}
.footer-links .menu-item-legal:first-of-type { margin-top: 10px; }
.footer-links .menu-item-legal a {
    font-size: 13px;
    font-weight: 500;
    color: var(--ink-faint);
    transition: color 240ms var(--ease);
}
.footer-links .menu-item-legal a:hover { color: var(--brand); }

.footer-links .menu-item-copyright {
    flex-basis: 100%;
    margin-top: 4px;
    text-align: right;
}
.footer-links .footer-copyright {
    display: block;
    font-size: 12px;
    color: var(--ink-faint);
    line-height: 1.5;
}

.footer-wordmark {
    position: relative;
    z-index: 0;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: clamp(14px, 4.5vw, 90px);
    white-space: nowrap;
    overflow: hidden;
    line-height: 0.82;
    margin-top: clamp(8px, 1.8vw, 22px);
    padding-bottom: clamp(6px, 1.4vw, 18px);
    font-family: var(--display);
    font-weight: 800;
    letter-spacing: -0.02em;
    text-transform: uppercase;
    max-width: 100%;
    padding-inline: clamp(6px, 1.5vw, 22px);
    font-size: clamp(48px, 19vw, 250px);
    color: transparent;
    background: linear-gradient(180deg, var(--ink) 0%, transparent 92%);
    -webkit-background-clip: text;
    background-clip: text;
    opacity: 0.15;
    user-select: none;
    pointer-events: none;
}

/* Editor content (default page / blog templates) */
.entry-content { max-width: 78ch; }
.entry-content > * { margin-bottom: 1.2em; }
.entry-content h2 { font-size: clamp(24px, 2.6vw, 34px); margin-top: 1.6em; }
.entry-content h3 { font-size: clamp(20px, 2vw, 25px); margin-top: 1.4em; }
.entry-content a { color: var(--brand); border-bottom: 1px solid var(--border-strong); }
.entry-content a:hover { border-color: currentColor; }
.entry-content img { border-radius: var(--r-md); }
.entry-content blockquote {
    margin: 1.6em 0;
    padding: 20px 26px;
    border-left: 3px solid var(--brand);
    border-radius: 0 var(--r-md) var(--r-md) 0;
    background: var(--bg-soft);
    font-size: 18px;
}
.entry-content ul, .entry-content ol { padding-left: 1.3em; }
.entry-content li { margin-bottom: 0.5em; }

.page-links {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 2em;
    font-size: 14.5px;
    font-weight: 600;
    color: var(--ink-soft);
}

.pagination { margin-top: clamp(36px, 4vw, 56px); }
.pagination .nav-links { display: flex; flex-wrap: wrap; gap: 8px; }
.pagination .page-numbers {
    display: grid;
    place-items: center;
    min-width: 42px; height: 42px;
    padding: 0 12px;
    border-radius: var(--r-pill);
    border: 1px solid var(--border-strong);
    font-size: 14.5px;
    font-weight: 600;
    color: var(--ink-soft);
    transition: background-color 240ms var(--ease), color 240ms var(--ease);
}
.pagination .page-numbers:hover { background: var(--surface); color: var(--ink); }
.pagination .page-numbers.current {
    background: var(--ink);
    color: var(--bg);
    border-color: var(--ink);
}

/* 12. Lightbox, motion, responsive ----------------------------------------- */
.gallery-lightbox {
    position: fixed;
    inset: 0;
    z-index: 999999 !important;
    display: grid;
    place-items: center;
    padding: clamp(52px, 7vh, 72px) clamp(20px, 4vw, 50px) clamp(24px, 4vh, 40px);
    visibility: hidden;
    pointer-events: none;
}
.gallery-lightbox.is-open { visibility: visible; pointer-events: auto; }
.lightbox-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(3, 5, 8, 0.98);
    -webkit-backdrop-filter: blur(28px);
    backdrop-filter: blur(28px);
    opacity: 0;
    transition: opacity 300ms var(--ease);
}
.gallery-lightbox.is-open .lightbox-backdrop { opacity: 1; }

body.lightbox-open {
    overflow: hidden !important;
}

body.lightbox-open .site-header {
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    transform: translateY(-24px) !important;
    transition: opacity 220ms ease, visibility 220ms ease, transform 220ms ease !important;
}

.lightbox-content {
    position: relative;
    z-index: 2;
    max-width: min(1080px, 92vw);
    max-height: calc(100vh - 80px);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    opacity: 0;
    transform: scale(0.96);
    transition: opacity 320ms var(--ease), transform 320ms var(--ease);
}
.gallery-lightbox.is-open .lightbox-content { opacity: 1; transform: none; }
.lightbox-header-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 16px;
    margin-bottom: 16px;
    width: 100%;
}
.lightbox-counter {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.15);
    border: 1px solid rgba(255, 255, 255, 0.28);
    color: #FFFFFF;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.04em;
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
}
.lightbox-media-wrapper {
    position: relative;
    line-height: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    max-width: 100%;
}
.lightbox-img {
    max-height: 70vh;
    max-width: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
    margin: 0 auto;
    border-radius: var(--r-lg);
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.7);
    transition: opacity 220ms ease;
}
.lightbox-img.is-switching {
    opacity: 0.3;
}
.lightbox-video-wrapper {
    width: min(960px, 90vw, calc((78vh - 120px) * 16 / 9));
    max-height: calc(78vh - 120px);
    aspect-ratio: 16 / 9;
    margin: 0 auto;
    border-radius: var(--r-lg);
    overflow: hidden;
    box-shadow: 0 25px 65px rgba(0, 0, 0, 0.65);
    background: #000000;
    position: relative;
}
.lightbox-video-wrapper iframe {
    width: 100%;
    height: 100%;
    border: none;
    display: block;
}
.lightbox-nav-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;
    width: 58px;
    height: 58px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    border: 1.5px solid rgba(255, 255, 255, 0.45);
    background: rgba(15, 23, 42, 0.85);
    color: #FFFFFF;
    cursor: pointer;
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
    transition: all 240ms cubic-bezier(0.2, 0.8, 0.2, 1);
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.5);
}
.lightbox-nav-btn svg { width: 28px; height: 28px; stroke-width: 2.4; stroke: #FFFFFF; }
.lightbox-nav-btn:hover {
    background: var(--accent, #E4763C);
    border-color: var(--accent, #E4763C);
    color: #FFFFFF;
    transform: translateY(-50%) scale(1.1);
    box-shadow: 0 12px 32px rgba(228, 118, 60, 0.6);
}
.lightbox-prev { left: -72px; }
.lightbox-next { right: -72px; }
@media (max-width: 1200px) {
    .lightbox-prev { left: 16px; }
    .lightbox-next { right: 16px; }
}
.lightbox-caption-bar {
    margin-top: 16px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}
.lightbox-caption {
    font-size: 15px;
    color: rgba(255, 255, 255, 0.9);
    line-height: 1.5;
    max-width: 650px;
}
.lightbox-dots {
    display: flex;
    gap: 8px;
    align-items: center;
    justify-content: center;
}
.lightbox-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.3);
    border: none;
    cursor: pointer;
    transition: all 200ms ease;
    padding: 0;
}
.lightbox-dot.active {
    width: 22px;
    border-radius: 999px;
    background: #FFFFFF;
}
.lightbox-close {
    position: relative;
    top: 8px;
    width: 44px; height: 44px;
    display: flex; align-items: center; justify-content: center;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.3);
    background: rgba(15, 23, 42, 0.8);
    color: #fff;
    cursor: pointer;
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
    transition: background-color 240ms var(--ease), transform 240ms var(--ease), border-color 240ms var(--ease);
}
.lightbox-close svg.icon { font-size: 20px; }
.lightbox-close:hover {
    background: var(--accent, #E4763C);
    border-color: var(--accent, #E4763C);
    color: #FFFFFF;
    transform: scale(1.08);
}

.lightbox-youtube-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 7px 18px;
    border-radius: 999px;
    background: rgba(255, 0, 0, 0.18);
    border: 1px solid rgba(255, 0, 0, 0.45);
    color: #FFFFFF;
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    letter-spacing: 0.02em;
    transition: all 240ms cubic-bezier(0.2, 0.8, 0.2, 1);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    margin-top: 6px;
}
.lightbox-youtube-btn svg {
    color: #FF0000;
    transition: transform 200ms ease;
}
.lightbox-youtube-btn:hover {
    background: #FF0000;
    border-color: #FF0000;
    color: #FFFFFF;
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(255, 0, 0, 0.45);
}
.lightbox-youtube-btn:hover svg {
    color: #FFFFFF;
    transform: scale(1.1);
}

/* Gallery card multi-photo count pill badge */
.gallery-photo-count {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 10px;
    border-radius: 999px;
    background: rgba(15, 23, 42, 0.65);
    border: 1px solid rgba(255, 255, 255, 0.3);
    color: #FFFFFF;
    font-size: 11.5px;
    font-weight: 600;
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
}
.gallery-photo-count svg { width: 12px; height: 12px; }

/* Entrance & scroll reveals — only hidden when JS can bring them back. */
.js .scroll-reveal, .js .hero-animate {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity 720ms var(--ease), transform 720ms var(--ease);
}
.js .hero-animate { transform: translateY(18px); }
.js .scroll-reveal.is-visible, .js .hero-animate.is-visible {
    opacity: 1;
    transform: none;
}

@media (max-width: 1180px) {
    .pillars-grid { grid-template-columns: repeat(2, 1fr); }
    .events-grid-layout { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 1024px) {
    :root {
        --header-h: 84px;
        --section-py: 48px;
        --section-py-sm: 32px;
        --section-py-lg: 64px;
        --section-y: var(--section-py);
    }
    body { font-size: 16px; }

    .main-navigation { display: none; }
    .btn-header-cta { display: none; }
    .mobile-menu-toggle { display: flex; }
    .site-header.is-stuck .header-inner { max-width: 640px; }

    .about-intro-grid { grid-template-columns: 1fr; }
    .contact-layout-grid { grid-template-columns: 1fr; }
    .values-grid { grid-template-columns: 1fr; }
    .partners-grid { grid-template-columns: repeat(2, 1fr); }
    .partner-inquiry-card { flex-direction: column; align-items: flex-start; }
    .event-carousel-track > * { flex-basis: clamp(270px, 64%, 340px); }
}

@media (max-width: 720px) {
    :root {
        --r-xl: 28px;
        --r-lg: 22px;
        --section-py: 40px;
        --section-py-sm: 24px;
        --section-py-lg: 48px;
        --section-y: var(--section-py);
    }

    .section-head-split { flex-direction: column; align-items: flex-start; }
    .pillars-grid, .events-grid-layout, .partners-grid { grid-template-columns: 1fr; }
    .form-row-split { grid-template-columns: 1fr; }

    /* Footer collapses to a single centered column at phone/tablet widths. */
    .footer-top { grid-template-columns: 1fr; justify-items: center; text-align: center; gap: 36px; }
    .footer-col-brand { justify-items: center; padding-left: 0; }
    .footer-col-nav { justify-content: center; }
    .footer-links { justify-content: center; }
    .footer-links .menu-item-legal,
    .footer-links .menu-item-copyright { text-align: center; }
    .footer-links .footer-copyright { text-align: center; }
    .footer-wordmark {
        /* One line, scaled up to fill the width */
        font-size: clamp(52px, 20.5vw, 210px);
        gap: clamp(6px, 2.4vw, 20px);
        padding-inline: 6px;
    }

    .trust-stats { gap: 8px 18px; }
    .stat-divider { display: none; }

    .hero-ctas .btn, .cta-buttons .btn { flex: 1 1 auto; }
    .event-carousel-track > * { flex-basis: 84%; }
    .about-img-badge { left: 0; padding: 14px 18px; }

    /* Hero eyebrow on mobile: kept in a single line on top of "Where Education Meets" */
    .hero-eyebrow {
        display: inline-flex !important;
        padding: 5px 12px;
        margin-bottom: 16px;
        white-space: nowrap;
        max-width: calc(100vw - 32px);
        box-sizing: border-box;
    }
    .eyebrow-pills {
        display: inline-flex;
        align-items: center;
        flex-wrap: nowrap;
        gap: 8px;
    }
    .eyebrow-pill-item {
        display: inline-flex;
        align-items: center;
        gap: 4.5px;
        white-space: nowrap;
    }
    .eyebrow-pill-item .eyebrow-text {
        font-size: 9.5px;
        letter-spacing: 0.08em;
    }
    .eyebrow-pill-item .eyebrow-dot {
        width: 5.5px;
        height: 5.5px;
        flex-shrink: 0;
    }

    /* Hero image corridor — cqw sizing scales with the container's own
       width, so on a narrow phone viewport the cards render tiny and the
       page-colored scrim dulls them further. Scale the scene up from the
       bottom edge and pull the scrim back so the photos read at full
       strength. */
    .hero-stream-bg .image-corridor { transform: scale(2.1); transform-origin: 50% 100%; }
    .hero-stream-scrim {
        background:
            linear-gradient(to bottom, var(--bg) 0%, transparent 14%),
            linear-gradient(to top, var(--bg) 0%, transparent 20%);
    }

    .hero-ctas { margin-bottom: 18px; }
}

/* ==========================================================================
   Sponsor Cards & Single Sponsor Template
   ========================================================================== */
.partner-card {
    position: relative;
}
.partner-card-link-overlay {
    position: absolute;
    inset: 0;
    z-index: 10;
    cursor: pointer;
    border-radius: inherit;
}

.single-sponsor-header {
    padding: clamp(120px, 14vw, 160px) 0 44px;
    background: radial-gradient(circle at 50% 0%, var(--gold-bg) 0%, transparent 65%), var(--bg);
    border-bottom: 1px solid var(--border-soft);
}
.single-sponsor-breadcrumbs {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 20px;
    font-size: 14px;
    font-weight: 500;
}
.single-sponsor-breadcrumbs .back-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--ink-soft);
    text-decoration: none;
    transition: color 240ms var(--ease);
}
.single-sponsor-breadcrumbs .back-link:hover {
    color: var(--gold-deep);
}
.sponsor-badge {
    display: inline-flex;
    align-items: center;
    padding: 4px 14px;
    border-radius: var(--r-pill);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}
.single-sponsor-title {
    font-family: var(--serif);
    font-size: clamp(32px, 4.5vw, 54px);
    font-weight: 400;
    line-height: 1.15;
    color: var(--ink);
    margin: 0 0 24px;
}
.single-sponsor-meta-bar {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}
.single-sponsor-meta-bar .meta-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    background: var(--card-bg);
    border: 1px solid var(--border-soft);
    border-radius: var(--r-pill);
    font-size: 13.5px;
    color: var(--ink-soft);
}
.single-sponsor-meta-bar .meta-icon {
    color: var(--gold-deep);
    display: flex;
    align-items: center;
}

.single-sponsor-media-section {
    padding: 40px 0 20px;
}
.single-sponsor-featured-image {
    position: relative;
    border-radius: var(--r-card, 16px);
    overflow: hidden;
    max-height: 420px;
    box-shadow: 0 12px 36px rgba(0,0,0,0.08);
}
.sponsor-hero-img {
    width: 100%;
    height: 100%;
    max-height: 420px;
    object-fit: cover;
    display: block;
}

.single-sponsor-body-section {
    padding: 50px 0 90px;
}
.single-sponsor-layout-grid {
    display: grid;
    grid-template-columns: 1fr 360px;
    gap: 48px;
    align-items: start;
}
.single-sponsor-content-col .entry-content {
    font-size: 17px;
    line-height: 1.75;
    color: var(--ink-soft);
}
.single-sponsor-content-col h3 {
    font-family: var(--serif);
    font-size: 26px;
    color: var(--ink);
    margin: 32px 0 16px;
}
.sponsor-highlights-box {
    margin-top: 36px;
    padding: 24px 28px;
    background: var(--card-bg);
    border: 1px solid var(--border-soft);
    border-left-width: 4px;
    border-radius: var(--r-card, 12px);
}
.sponsor-highlights-box .highlights-title {
    font-family: var(--sans);
    font-size: 17px;
    font-weight: 700;
    color: var(--ink);
    margin: 0 0 10px;
}
.sponsor-action-card {
    background: var(--card-bg);
    border: 1px solid var(--border-soft);
    border-radius: var(--r-card, 16px);
    overflow: hidden;
    position: sticky;
    top: 100px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.05);
}
.card-badge-header {
    padding: 28px 24px 20px;
    border-bottom: 1px solid;
}
.card-badge-header .badge-tag {
    display: inline-block;
    padding: 3px 10px;
    border-radius: var(--r-pill);
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 12px;
}
.card-badge-header .card-headline {
    font-family: var(--serif);
    font-size: 22px;
    color: var(--ink);
    margin: 0;
}
.sponsor-details-list {
    list-style: none;
    margin: 0;
    padding: 20px 24px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}
.sponsor-details-list li {
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-size: 14px;
    border-bottom: 1px solid var(--border-soft);
    padding-bottom: 12px;
}
.sponsor-details-list li:last-child {
    border-bottom: none;
    padding-bottom: 0;
}
.sponsor-details-list .detail-label {
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--ink-faint, #94a3b8);
}
.sponsor-details-list .detail-value {
    font-weight: 600;
    color: var(--ink);
}
.sponsor-details-list .detail-value a {
    color: var(--gold-deep);
    text-decoration: none;
}
.sponsor-card-cta {
    padding: 0 24px 24px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.sponsor-card-cta .btn-block {
    width: 100%;
}

/* ==========================================================================
   Single Event
   ========================================================================== */
.single-event-header {
    padding: clamp(120px, 14vw, 160px) 0 44px;
    background: radial-gradient(circle at 50% 0%, var(--gold-bg) 0%, transparent 65%), var(--bg);
    border-bottom: 1px solid var(--border-soft);
}
.single-event-breadcrumbs {
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 16px;
}
.single-event-breadcrumbs .back-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--ink-soft);
    text-decoration: none;
    font-size: 13.5px;
    font-weight: 500;
    transition: color 240ms var(--ease);
}
.single-event-breadcrumbs .back-link:hover {
    color: var(--gold-deep);
}
.single-event-breadcrumbs .breadcrumb-sep {
    color: var(--ink-faint, #94a3b8);
    display: inline-block;
    line-height: 1;
}
.single-event-category-pill {
    position: static !important;
    display: inline-flex !important;
    align-items: center;
    padding: 4px 12px;
    border-radius: var(--r-pill, 9999px);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    background: rgba(184, 148, 86, 0.12);
    color: var(--gold-deep, #9c6c29);
    border: 1px solid rgba(184, 148, 86, 0.28);
    line-height: 1.4;
    vertical-align: middle;
}
.single-event-title {
    font-family: var(--serif);
    font-size: clamp(32px, 4.5vw, 54px);
    font-weight: 400;
    line-height: 1.15;
    color: var(--ink);
    margin: 0 0 24px;
}
.single-event-meta-bar {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}
.single-event-meta-bar .meta-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    background: var(--card-bg);
    border: 1px solid var(--border-soft);
    border-radius: var(--r-pill);
    font-size: 13.5px;
    color: var(--ink-soft);
}
.single-event-meta-bar .meta-icon {
    color: var(--gold-deep);
    display: flex;
    align-items: center;
}

.single-event-media-section {
    padding: 40px 0 20px;
}
.single-event-featured-image {
    position: relative;
    border-radius: var(--r-card, 16px);
    overflow: hidden;
    max-height: 460px;
    box-shadow: 0 12px 36px rgba(0,0,0,0.08);
}
.event-hero-img {
    width: 100%;
    height: 100%;
    max-height: 460px;
    object-fit: cover;
    display: block;
}
.featured-image-scrim {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(0,0,0,0.18), transparent 45%);
    pointer-events: none;
}

.single-event-body-section {
    padding: 50px 0 90px;
}
.single-event-layout-grid {
    display: grid;
    grid-template-columns: 1fr 360px;
    gap: 48px;
    align-items: start;
}
.single-event-content-col .entry-content {
    font-size: 17px;
    line-height: 1.75;
    color: var(--ink-soft);
}
.single-event-content-col .entry-content > * + * {
    margin-top: 1.1em;
}
.single-event-content-col .entry-content h2,
.single-event-content-col .entry-content h3 {
    font-family: var(--serif);
    font-size: 26px;
    color: var(--ink);
    margin: 32px 0 16px;
}

.event-speakers-section {
    margin-top: 40px;
    padding: 36px;
    background: var(--card-bg);
    border: 1px solid var(--border-soft);
    border-radius: var(--r-card, 18px);
    box-shadow: 0 4px 20px rgba(0,0,0,0.04);
}
.event-speakers-section .speakers-heading {
    font-family: var(--serif);
    font-size: 26px;
    color: var(--ink);
    margin: 0 0 8px;
}
.event-speakers-section .speakers-subheading {
    font-size: 14px;
    color: var(--ink-soft);
    margin: 0 0 28px;
    line-height: 1.5;
}
.speakers-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 18px;
}
.speaker-card {
    display: flex;
    flex-direction: column;
    gap: 0;
    background: var(--surface, #fff);
    border: 1px solid var(--border-soft);
    border-radius: var(--r-card, 14px);
    overflow: hidden;
    transition: box-shadow 0.25s ease, border-color 0.25s ease;
}
.speaker-card:hover {
    box-shadow: 0 8px 24px rgba(0,0,0,0.08);
    border-color: rgba(184,148,86,0.35);
}
.speaker-avatar-wrap {
    width: 100%;
    height: 140px;
    overflow: hidden;
    background: linear-gradient(135deg, var(--gold-bg), rgba(184,148,86,0.06));
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}
.speaker-avatar-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.speaker-avatar-placeholder {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    background: rgba(184,148,86,0.15);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--gold-deep);
}
.speaker-avatar-placeholder svg {
    width: 36px;
    height: 36px;
}
.speaker-card-body {
    padding: 18px 18px 16px;
    flex: 1;
}
.speaker-info .speaker-name {
    font-size: 15px;
    font-weight: 700;
    color: var(--ink);
    margin: 0 0 4px;
    line-height: 1.3;
}
.speaker-info .speaker-role {
    font-size: 12.5px;
    color: var(--ink-soft);
    margin: 0;
    line-height: 1.4;
}
/* Legacy flat avatar style fallback */
.speaker-avatar {
    flex-shrink: 0;
    width: 46px;
    height: 46px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--gold-bg);
    color: var(--gold-deep);
}

.single-event-sidebar-col {
    position: sticky;
    top: 104px;
}

.event-flip-card-container {
    background-color: transparent;
    perspective: 1200px;
    width: 100%;
    min-height: 400px;
}

.event-flip-card-inner {
    position: relative;
    width: 100%;
    transition: transform 0.65s cubic-bezier(0.4, 0, 0.2, 1);
    transform-style: preserve-3d;
}

.event-flip-card-container.is-flipped .event-flip-card-inner {
    transform: rotateY(180deg);
}

.event-card-face {
    width: 100%;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    border-radius: var(--r-card, 16px);
}

.event-card-front {
    transform: rotateY(0deg);
}

.event-card-back {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    transform: rotateY(180deg);
}

.event-action-card {
    background: var(--card-bg);
    border: 1px solid var(--border-soft);
    border-radius: var(--r-card, 16px);
    overflow: hidden;
    box-shadow: 0 8px 26px rgba(0,0,0,0.05);
}

.card-header-status {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 15px 20px 13px;
    border-bottom: 1px solid var(--border-soft);
}

.card-header-status .card-headline {
    font-family: var(--serif);
    font-size: 18px;
    color: var(--ink);
    margin: 0;
    line-height: 1.25;
}

.status-tag {
    display: inline-flex;
    align-items: center;
    padding: 2.5px 8px;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    border-radius: var(--r-pill, 9999px);
    line-height: 1.3;
}

.status-ended {
    background: rgba(239, 68, 68, 0.12);
    color: #ef4444;
    border: 1px solid rgba(239, 68, 68, 0.25);
}

.status-upcoming {
    background: rgba(16, 185, 129, 0.12);
    color: #10b981;
    border: 1px solid rgba(16, 185, 129, 0.25);
}

.status-rsvp {
    background: rgba(184, 148, 86, 0.12);
    color: var(--gold-deep, #9c6c29);
    border: 1px solid rgba(184, 148, 86, 0.25);
}

.event-details-list {
    list-style: none;
    margin: 0;
    padding: 13px 20px;
    display: flex;
    flex-direction: column;
    gap: 9px;
}

.event-details-list li {
    display: flex;
    flex-direction: column;
    gap: 3px;
    font-size: 13.5px;
    border-bottom: 1px solid var(--border-soft);
    padding-bottom: 7px;
}

.event-details-list li:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.event-details-list .detail-label {
    font-size: 10.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--ink-faint, #94a3b8);
}

.event-details-list .detail-value {
    font-weight: 600;
    color: var(--ink);
    line-height: 1.35;
}

.event-card-cta {
    padding: 0 20px 18px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.event-card-cta .btn-block {
    width: 100%;
}

.event-card-cta .btn {
    padding: 11px 18px !important;
    font-size: 14px !important;
    min-height: 42px !important;
    border-radius: var(--r-pill, 999px) !important;
}

.event-card-cta .btn svg {
    width: 14px;
    height: 14px;
}

.btn-event-ended {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background: rgba(148, 163, 184, 0.15) !important;
    color: var(--ink-muted, #64748b) !important;
    border: 1px solid rgba(148, 163, 184, 0.3) !important;
    cursor: not-allowed !important;
    font-weight: 600;
    padding: 11px 18px !important;
    font-size: 14px !important;
    min-height: 42px !important;
    border-radius: var(--r-btn, 10px);
    width: 100%;
}

/* Backside RSVP Form Card */
.event-rsvp-card {
    padding: 24px;
    background: var(--card-bg);
}

.rsvp-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 14px;
}

.btn-flip-back {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: none;
    border: none;
    font-size: 13px;
    font-weight: 600;
    color: var(--ink-muted);
    cursor: pointer;
    padding: 4px 8px;
    border-radius: 6px;
    transition: all 0.2s ease;
}

.btn-flip-back:hover {
    color: var(--gold-deep);
    background: rgba(184, 148, 86, 0.08);
}

.rsvp-card-title {
    font-family: var(--serif);
    font-size: 20px;
    color: var(--ink);
    margin: 0 0 4px;
}

.rsvp-card-subtitle {
    font-size: 13px;
    color: var(--ink-soft);
    margin: 0 0 16px;
    line-height: 1.4;
}

.event-rsvp-form {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.form-group-rsvp {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.form-group-rsvp label {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--ink-muted, #64748b);
}

.rsvp-input {
    width: 100%;
    padding: 9px 12px;
    font-size: 13px;
    background: var(--surface, #fff);
    border: 1px solid var(--border-soft);
    border-radius: 8px;
    color: var(--ink);
    font-family: inherit;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
    box-sizing: border-box;
}

.rsvp-select {
    width: 100%;
    padding: 9px 38px 9px 12px;
    font-size: 13px;
    background-color: var(--surface, #fff);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 10px center;
    background-size: 16px;
    border: 1px solid var(--border-soft);
    border-radius: 8px;
    color: var(--ink);
    font-family: inherit;
    cursor: pointer;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
    box-sizing: border-box;
}

.rsvp-input:focus,
.rsvp-select:focus {
    outline: none;
    border-color: var(--gold-deep, #9c6c29);
    box-shadow: 0 0 0 3px rgba(184, 148, 86, 0.15);
}

.rsvp-select:hover {
    border-color: var(--border-strong, #94a3b8);
}

/* Style the select dropdown option list */
.rsvp-select option {
    background: var(--surface, #fff);
    color: var(--ink);
    padding: 8px 12px;
    font-size: 13px;
}

.form-row-rsvp {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

.rsvp-submit-btn {
    margin-top: 8px;
}

.rsvp-success-state {
    position: relative;
    text-align: center;
    padding: 24px 12px 16px;
}

.btn-rsvp-success-close {
    position: absolute;
    top: -6px;
    right: 0;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    border: 1px solid var(--border-soft);
    background: var(--surface);
    color: var(--ink-soft);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease, border-color 0.2s ease;
    padding: 0;
}

.btn-rsvp-success-close svg {
    width: 17px;
    height: 17px;
}

.btn-rsvp-success-close:hover {
    background: var(--bg-hover, rgba(0,0,0,0.05));
    color: var(--ink);
    border-color: var(--border-strong);
    transform: scale(1.08);
}

[data-theme="dark"] .btn-rsvp-success-close:hover {
    background: rgba(255,255,255,0.08);
}

.rsvp-success-state .success-icon {
    width: 48px;
    height: 48px;
    margin: 0 auto 14px;
    color: #10b981;
    display: flex;
    align-items: center;
    justify-content: center;
}

.rsvp-success-state .success-icon svg {
    width: 44px;
    height: 44px;
}

.rsvp-success-state h4 {
    font-family: var(--serif);
    font-size: 20px;
    color: var(--ink);
    margin: 0 0 8px;
}

.rsvp-success-state p {
    font-size: 13px;
    color: var(--ink-soft);
    line-height: 1.5;
    margin: 0 0 20px;
}
/* ==========================================================================
   Single Sponsor Page Styles
   ========================================================================== */
.single-sponsor-main {
    padding-top: clamp(24px, 4vw, 40px);
}
.single-sponsor-breadcrumbs {
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 16px;
}
.single-sponsor-breadcrumbs .back-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--ink-soft);
    text-decoration: none;
    font-size: 13.5px;
    font-weight: 500;
    transition: color 240ms var(--ease);
}
.single-sponsor-breadcrumbs .back-link:hover {
    color: var(--gold-deep);
}
.single-sponsor-breadcrumbs .breadcrumb-sep {
    color: var(--ink-faint, #94a3b8);
    display: inline-block;
    line-height: 1;
}
.sponsor-badge {
    position: static !important;
    display: inline-flex !important;
    align-items: center;
    padding: 4px 14px;
    border-radius: var(--r-pill, 9999px);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    line-height: 1.4;
    vertical-align: middle;
    box-shadow: 0 2px 6px rgba(0,0,0,0.12);
}
.single-sponsor-title {
    font-family: var(--serif);
    font-size: clamp(32px, 4.5vw, 54px);
    font-weight: 400;
    line-height: 1.15;
    color: var(--ink);
    margin: 0 0 24px;
}
.single-sponsor-meta-bar {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}
.single-sponsor-meta-bar .meta-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    background: var(--card-bg);
    border: 1px solid var(--border-soft);
    border-radius: var(--r-pill);
    font-size: 13.5px;
    color: var(--ink-soft);
}
.single-sponsor-meta-bar .meta-icon {
    color: var(--gold-deep);
    display: flex;
    align-items: center;
}
.single-sponsor-media-section {
    padding: 36px 0 20px;
}
.single-sponsor-featured-image {
    position: relative;
    border-radius: var(--r-card, 16px);
    overflow: hidden;
    max-height: 440px;
    box-shadow: 0 12px 36px rgba(0,0,0,0.08);
}
.sponsor-hero-img {
    width: 100%;
    height: 100%;
    max-height: 440px;
    object-fit: cover;
    display: block;
}
.single-sponsor-body-section {
    padding: 40px 0 90px;
}
.single-sponsor-layout-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 360px;
    gap: 48px;
    align-items: start;
}
.single-sponsor-content-col {
    min-width: 0;
}
.single-sponsor-content-col .entry-content {
    font-size: 17px;
    line-height: 1.75;
    color: var(--ink-soft);
    max-width: 100%;
}
.single-sponsor-content-col .entry-content > * + * {
    margin-top: 1.1em;
}
.sponsor-highlights-box {
    margin-top: 36px;
    padding: 24px 28px;
    background: var(--card-bg);
    border: 1px solid var(--border-soft);
    border-left: 4px solid var(--gold-deep);
    border-radius: 0 var(--r-card, 14px) var(--r-card, 14px) 0;
}
.sponsor-highlights-box .highlights-title {
    font-family: var(--serif);
    font-size: 19px;
    color: var(--ink);
    margin: 0 0 10px;
}
.sponsor-highlights-box p {
    font-size: 14.5px;
    line-height: 1.65;
    color: var(--ink-soft);
    margin: 0;
}
.sponsor-action-card {
    background: var(--card-bg);
    border: 1px solid var(--border-soft);
    border-radius: var(--r-card, 16px);
    overflow: hidden;
    position: sticky;
    top: 100px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.05);
}
.sponsor-action-card .card-headline {
    font-family: var(--serif);
    font-size: 22px;
    color: var(--ink);
    margin: 0;
    padding: 24px 24px 18px;
    border-bottom: 1px solid var(--border-soft);
}
.sponsor-details-list {
    list-style: none;
    margin: 0;
    padding: 20px 24px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}
.sponsor-details-list li {
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-size: 14px;
    border-bottom: 1px solid var(--border-soft);
    padding-bottom: 12px;
}
.sponsor-details-list li:last-child {
    border-bottom: none;
    padding-bottom: 0;
}
.sponsor-details-list .detail-label {
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--ink-faint, #94a3b8);
}
.sponsor-details-list .detail-value {
    font-weight: 600;
    color: var(--ink);
}
.sponsor-card-cta {
    padding: 0 24px 24px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.sponsor-card-cta .btn-block {
    width: 100%;
}
@media (max-width: 900px) {
    .single-sponsor-layout-grid {
        grid-template-columns: 1fr;
        gap: 32px;
    }
}

/* ==========================================================================
   Events Page: Guest of Honour Section
   ========================================================================== */
.section-guest-of-honour {
    padding: var(--section-y) 0;
}
.goh-spotlight-card {
    position: relative;
    background: var(--card-bg);
    border: 1px solid var(--border-soft);
    border-radius: var(--r-card-lg, 24px);
    padding: clamp(32px, 5vw, 64px);
    overflow: hidden;
    box-shadow: 0 20px 60px rgba(0,0,0,0.06);
}
.goh-spotlight-card::before {
    content: "";
    position: absolute;
    top: -120px;
    right: -120px;
    width: 360px;
    height: 360px;
    background: radial-gradient(circle, rgba(202, 138, 4, 0.12) 0%, transparent 70%);
    border-radius: 50%;
    pointer-events: none;
}
.goh-layout-grid {
    display: grid;
    grid-template-columns: 320px 1fr;
    gap: clamp(32px, 5vw, 56px);
    align-items: center;
}
.goh-portrait-wrap {
    position: relative;
    border-radius: var(--r-card, 18px);
    overflow: hidden;
    aspect-ratio: 4/5;
    box-shadow: 0 16px 40px rgba(0,0,0,0.12);
}
.goh-portrait-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 600ms var(--ease);
}
.goh-portrait-wrap:hover .goh-portrait-img {
    transform: scale(1.03);
}
.goh-portrait-frame {
    position: absolute;
    inset: 0;
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: inherit;
    pointer-events: none;
}
.goh-floating-tag {
    position: absolute;
    bottom: 16px;
    left: 16px;
    right: 16px;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    background: rgba(15, 23, 42, 0.88);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: var(--r-pill);
    color: #F8FAFC;
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}
.goh-floating-tag svg {
    color: #FBBF24;
    width: 14px;
    height: 14px;
}
.goh-badge-row {
    margin-bottom: 14px;
}
.badge-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 14px;
    background: var(--gold-bg);
    color: var(--gold-deep);
    border: 1px solid rgba(202, 138, 4, 0.25);
    border-radius: var(--r-pill);
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}
.badge-outline {
    background: transparent;
    border-color: var(--border-soft);
    color: var(--ink-soft);
}
.goh-name {
    font-family: var(--serif);
    font-size: clamp(28px, 3.5vw, 42px);
    font-weight: 400;
    line-height: 1.2;
    color: var(--ink);
    margin: 0 0 8px;
}
.goh-role-org {
    font-size: 16px;
    color: var(--ink-soft);
    margin: 0 0 24px;
}
.goh-role-org .goh-role {
    font-weight: 600;
    color: var(--gold-deep);
}
.goh-role-org .sep {
    margin: 0 6px;
    opacity: 0.4;
}
.goh-keynote-banner {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    padding: 16px 20px;
    background: linear-gradient(135deg, rgba(202, 138, 4, 0.08) 0%, rgba(202, 138, 4, 0.02) 100%);
    border: 1px solid rgba(202, 138, 4, 0.2);
    border-radius: var(--r-card, 12px);
    margin-bottom: 22px;
}
.goh-keynote-banner .keynote-icon {
    color: var(--gold-deep);
    font-size: 22px;
    flex-shrink: 0;
    margin-top: 2px;
}
.keynote-label {
    display: block;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--gold-deep);
    margin-bottom: 4px;
}
.keynote-title {
    font-size: 15px;
    font-weight: 600;
    color: var(--ink);
    margin: 0;
    line-height: 1.4;
}
.goh-bio-body {
    font-size: 15px;
    line-height: 1.7;
    color: var(--ink-soft);
    margin-bottom: 24px;
}
.goh-quote-callout {
    position: relative;
    margin: 0;
    padding: 16px 22px;
    border-left: 3px solid var(--gold-deep);
    background: var(--bg-soft, rgba(0,0,0,0.02));
    border-radius: 0 var(--r-card, 8px) var(--r-card, 8px) 0;
    font-style: italic;
    font-size: 15px;
    line-height: 1.6;
    color: var(--ink);
}

/* ==========================================================================
   Events Page: Upcoming Summit Masthead & Moderator Section
   ========================================================================== */
.section-moderator {
    padding: 30px 0 50px;
}
.showcase-event-masthead {
    text-align: center;
    max-width: 840px;
    margin: 0 auto 36px;
    padding-bottom: 24px;
}
.showcase-event-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 16px;
    background: rgba(202, 138, 4, 0.1);
    border: 1px solid rgba(202, 138, 4, 0.3);
    border-radius: var(--r-pill, 100px);
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: 0.1em;
    color: var(--gold-deep, #ca8a04);
    text-transform: uppercase;
    margin-bottom: 14px;
}
.live-pulse-dot {
    width: 8px;
    height: 8px;
    background: #10B981;
    border-radius: 50%;
    box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.7);
    animation: livePulse 2s infinite;
}
@keyframes livePulse {
    0% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.7); }
    70% { transform: scale(1); box-shadow: 0 0 0 8px rgba(16, 185, 129, 0); }
    100% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(16, 185, 129, 0); }
}
.showcase-event-title {
    font-family: var(--serif, 'Cinzel', serif);
    font-size: clamp(26px, 3.2vw, 38px);
    color: var(--ink, #0f172a);
    margin: 0 0 12px;
    line-height: 1.25;
    font-weight: 700;
}
.showcase-event-meta {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 12px;
}
.showcase-event-meta .meta-tag {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    background: var(--bg-soft, rgba(0,0,0,0.03));
    border: 1px solid var(--border-soft, #e2e8f0);
    border-radius: var(--r-pill, 100px);
    font-size: 13.5px;
    font-weight: 500;
    color: var(--ink-soft, #475569);
}
.showcase-event-meta .meta-tag svg {
    width: 14px;
    height: 14px;
    color: var(--gold-deep, #ca8a04);
}
.showcase-event-meta .meta-link {
    color: var(--gold-deep, #ca8a04);
    font-weight: 600;
    text-decoration: none;
    background: rgba(202, 138, 4, 0.08);
    border-color: rgba(202, 138, 4, 0.25);
    transition: all 200ms ease;
}
.showcase-event-meta .meta-link:hover {
    background: var(--gold-deep, #ca8a04);
    color: #ffffff;
}
.showcase-event-meta .meta-link:hover svg {
    color: #ffffff;
}
.showcase-event-subtext {
    font-size: 15px;
    color: var(--ink-soft, #64748b);
    max-width: 620px;
    margin: 0 auto;
    line-height: 1.6;
}

.moderator-card {
    background: var(--card-bg, #ffffff);
    border: 1px solid var(--border-soft, #e2e8f0);
    border-radius: var(--r-card, 20px);
    padding: clamp(24px, 4vw, 38px);
    box-shadow: 0 12px 34px rgba(0,0,0,0.05);
}
.moderator-inner-grid {
    display: grid;
    grid-template-columns: 220px 1fr;
    gap: 36px;
    align-items: center;
}
@media (max-width: 768px) {
    .moderator-inner-grid {
        grid-template-columns: 1fr;
        text-align: center;
    }
}
.mod-avatar-box {
    position: relative;
    width: 220px;
    height: 270px;
    border-radius: 16px;
    overflow: hidden;
    margin: 0 auto;
    box-shadow: 0 12px 28px rgba(0,0,0,0.09);
    border: 2px solid rgba(202, 138, 4, 0.28);
    background: #ffffff;
}
@media (max-width: 768px) {
    .mod-avatar-box {
        width: 100%;
        max-width: 240px;
        height: 280px;
    }
}
.mod-avatar-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top center;
    display: block;
}
.mod-header-line {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 8px;
}
@media (max-width: 768px) {
    .mod-header-line {
        justify-content: center;
        gap: 16px;
    }
}
.mod-connect-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    font-weight: 600;
    color: #0A66C2;
    text-decoration: none;
    padding: 4px 12px;
    background: rgba(10, 102, 194, 0.08);
    border-radius: var(--r-pill, 100px);
    transition: all 200ms var(--ease);
}
.mod-connect-link:hover {
    background: #0A66C2;
    color: #ffffff;
}
.mod-name {
    font-family: var(--serif, 'Cinzel', serif);
    font-size: clamp(24px, 2.8vw, 32px);
    color: var(--ink, #0f172a);
    margin: 0 0 6px;
    font-weight: 700;
}
.mod-designation {
    font-size: 15px;
    color: var(--ink-soft, #475569);
    margin: 0 0 14px;
    line-height: 1.45;
}
.mod-designation strong {
    color: var(--ink, #0f172a);
}
.mod-designation .sep {
    margin: 0 6px;
    opacity: 0.4;
}
.mod-topic-tag {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    padding: 12px 16px;
    background: rgba(36, 69, 123, 0.04);
    border: 1px solid rgba(36, 69, 123, 0.14);
    border-radius: var(--r-md, 12px);
    font-size: 13.5px;
    color: var(--ink, #0f172a);
    margin-bottom: 14px;
    max-width: 100%;
    box-sizing: border-box;
    transition: background 0.2s ease, border-color 0.2s ease;
}
.mod-topic-tag:hover {
    background: rgba(36, 69, 123, 0.07);
    border-color: rgba(36, 69, 123, 0.22);
}
.mod-topic-badge-label {
    display: inline-flex;
    align-items: center;
    font-size: 10.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--brand, #24457B);
    background: var(--tint-blue, #DCEEFF);
    padding: 3px 9px;
    border-radius: var(--r-pill, 100px);
    flex-shrink: 0;
    line-height: 1.35;
}
.mod-topic-title {
    font-weight: 600;
    color: var(--ink, #0f172a);
    line-height: 1.45;
    word-break: break-word;
}
@media (max-width: 640px) {
    .mod-topic-tag {
        display: flex !important;
        flex-direction: column !important;
        align-items: flex-start !important;
        text-align: left !important;
        gap: 6px !important;
        padding: 10px 12px !important;
        border-radius: 10px !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }
    .mod-topic-badge-label {
        align-self: flex-start !important;
        margin: 0 0 2px 0 !important;
    }
    .mod-topic-title {
        text-align: left !important;
        font-size: 13px !important;
        line-height: 1.4 !important;
    }
}
.mod-topic-badge-label svg {
    width: 13px;
    height: 13px;
}
.mod-topic-title {
    font-weight: 600;
    color: var(--ink, #0f172a);
    line-height: 1.35;
}
.mod-bio-text {
    font-size: 14.5px;
    line-height: 1.65;
    color: var(--ink-soft, #475569);
    margin: 0;
}

/* ==========================================================================
   Events Page: Highlighted Distinguished Panel Section
   ========================================================================== */
.section-panelists {
    padding: 50px 0 80px;
}
.panelists-section-head {
    text-align: center;
    max-width: 760px;
    margin: 0 auto 36px;
}
.panelists-eyebrow-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 18px;
    background: rgba(202, 138, 4, 0.1);
    border: 1px solid rgba(202, 138, 4, 0.3);
    border-radius: var(--r-pill, 100px);
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: 0.12em;
    color: var(--gold-deep, #b45309);
    text-transform: uppercase;
    margin-bottom: 14px;
}
.panelists-eyebrow-pill svg {
    width: 14px;
    height: 14px;
}
.panelists-main-title {
    font-family: var(--serif, 'Cinzel', serif);
    font-size: clamp(30px, 3.5vw, 42px);
    font-weight: 700;
    color: var(--ink, #0f172a);
    margin: 0 0 14px;
    line-height: 1.2;
    letter-spacing: -0.01em;
}
.panelists-accent-bar {
    width: 64px;
    height: 3px;
    background: linear-gradient(90deg, transparent, var(--gold-deep, #ca8a04), transparent);
    margin: 0 auto 16px;
    border-radius: 2px;
}
.panelists-main-subtitle {
    font-size: clamp(16px, 1.3vw, 18px);
    color: var(--ink-soft, #475569);
    line-height: 1.65;
    margin: 0 auto;
    font-weight: 400;
}

.panelists-grid-layout {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 28px;
    margin-top: 24px;
}
.panelist-card {
    background: var(--card-bg, #ffffff);
    border: 1px solid var(--border-soft, #e2e8f0);
    border-radius: var(--r-card, 18px);
    padding: 16px 16px 24px;
    display: flex;
    flex-direction: column;
    transition: transform 380ms var(--ease), box-shadow 380ms var(--ease), border-color 380ms var(--ease);
}
.panelist-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 18px 40px rgba(0,0,0,0.09);
    border-color: rgba(202, 138, 4, 0.4);
}
.panelist-avatar-box {
    position: relative;
    width: 100%;
    height: 280px;
    border-radius: 14px;
    overflow: hidden;
    background: #e2e8f0;
    margin-bottom: 18px;
    box-shadow: 0 4px 14px rgba(0,0,0,0.06);
}
.panelist-avatar-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top center;
    display: block;
    transition: transform 500ms cubic-bezier(0.16, 1, 0.3, 1);
}
.panelist-card:hover .panelist-avatar-img {
    transform: scale(1.04);
}
.panelist-avatar-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--ink-soft, #94a3b8);
    background: #f1f5f9;
}
.panelist-avatar-box .panelist-social-btn {
    position: absolute;
    top: 12px;
    right: 12px;
    z-index: 2;
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.92);
    backdrop-filter: blur(6px);
    border: 1px solid rgba(0,0,0,0.08);
    color: #0A66C2;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: all 200ms ease;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}
.panelist-avatar-box .panelist-social-btn:hover {
    background: #0A66C2;
    color: #ffffff;
    transform: translateY(-2px);
}
.panelist-card-body {
    padding: 0 4px;
}
.panelist-name {
    font-family: var(--serif, 'Cinzel', serif);
    font-size: 20px;
    font-weight: 700;
    color: var(--ink, #0f172a);
    margin: 0 0 6px;
    line-height: 1.3;
}
.panelist-designation {
    font-size: 13.5px;
    color: var(--ink-soft, #475569);
    margin: 0 0 14px;
    line-height: 1.45;
}
.panelist-designation .role {
    font-weight: 600;
    color: var(--ink, #0f172a);
}
.panelist-designation .org-sep {
    margin: 0 4px;
    opacity: 0.4;
}
.panelist-topic-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    background: var(--gold-bg, rgba(202,138,4,0.1));
    border-radius: var(--r-pill, 100px);
    font-size: 12px;
    font-weight: 600;
    color: var(--gold-deep, #ca8a04);
    margin-bottom: 10px;
}
.panelist-topic-badge .topic-dot {
    width: 6px;
    height: 6px;
    background: var(--gold-deep, #ca8a04);
    border-radius: 50%;
}
.panelist-bio {
    font-size: 13.5px;
    line-height: 1.6;
    color: var(--ink-soft, #475569);
    margin: 0;
}

/* ==========================================================================
   Single Event Page: Moderator & Panelists Section Styles
   ========================================================================== */
.single-event-mod-section {
    margin-top: 40px;
    padding-top: 36px;
    border-top: 1px solid var(--border-soft, #e2e8f0);
}
.single-mod-card {
    background: var(--card-bg, #ffffff);
    border: 1px solid var(--border-soft, #e2e8f0);
    border-radius: 18px;
    padding: 24px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.04);
    margin-top: 18px;
}
.single-mod-grid {
    display: grid;
    grid-template-columns: 190px 1fr;
    gap: 28px;
    align-items: center;
}
@media (max-width: 640px) {
    .single-mod-grid {
        grid-template-columns: 1fr;
        text-align: center;
    }
}
.single-mod-avatar-wrap {
    width: 190px;
    height: 230px;
    border-radius: 14px;
    overflow: hidden;
    border: 2px solid rgba(202, 138, 4, 0.25);
    box-shadow: 0 8px 20px rgba(0,0,0,0.08);
    margin: 0 auto;
    background: #fff;
}
@media (max-width: 640px) {
    .single-mod-avatar-wrap {
        width: 100%;
        max-width: 220px;
        height: 250px;
    }
}
.single-mod-avatar-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top center;
    display: block;
}
.single-mod-header-line {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 8px;
}
@media (max-width: 640px) {
    .single-mod-header-line {
        justify-content: center;
        gap: 14px;
    }
}
.single-mod-name {
    font-family: var(--serif, 'Cinzel', serif);
    font-size: 22px;
    font-weight: 700;
    color: var(--ink, #0f172a);
    margin: 0;
}
.single-mod-social-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    font-weight: 600;
    color: #0A66C2;
    text-decoration: none;
    padding: 5px 12px;
    background: rgba(10, 102, 194, 0.08);
    border-radius: var(--r-pill, 100px);
    transition: all 200ms ease;
}
.single-mod-social-btn:hover {
    background: #0A66C2;
    color: #ffffff;
}
.single-mod-designation {
    font-size: 14px;
    color: var(--ink-soft, #475569);
    margin: 0 0 12px;
    line-height: 1.45;
}
.single-mod-designation .role {
    font-weight: 600;
    color: var(--ink, #0f172a);
}
.single-mod-topic-badge {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    padding: 12px 16px;
    background: rgba(36, 69, 123, 0.04);
    border: 1px solid rgba(36, 69, 123, 0.14);
    border-radius: var(--r-md, 12px);
    font-size: 13.5px;
    margin-bottom: 14px;
    max-width: 100%;
    box-sizing: border-box;
    transition: background 0.2s ease, border-color 0.2s ease;
}
.single-mod-topic-badge:hover {
    background: rgba(36, 69, 123, 0.07);
    border-color: rgba(36, 69, 123, 0.22);
}
.single-mod-topic-badge .topic-tag-label {
    display: inline-flex;
    align-items: center;
    font-size: 10.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--brand, #24457B);
    background: var(--tint-blue, #DCEEFF);
    padding: 3px 9px;
    border-radius: var(--r-pill, 100px);
    flex-shrink: 0;
    line-height: 1.35;
}
.single-mod-topic-badge .topic-tag-text {
    font-weight: 600;
    color: var(--ink, #0f172a);
    line-height: 1.45;
    word-break: break-word;
}
@media (max-width: 640px) {
    .single-mod-topic-badge {
        display: flex !important;
        flex-direction: column !important;
        align-items: flex-start !important;
        text-align: left !important;
        gap: 6px !important;
        padding: 10px 12px !important;
        border-radius: 10px !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }
    .single-mod-topic-badge .topic-tag-label {
        align-self: flex-start !important;
        margin: 0 0 2px 0 !important;
    }
    .single-mod-topic-badge .topic-tag-text {
        text-align: left !important;
        font-size: 13px !important;
        line-height: 1.4 !important;
    }
}
.single-mod-bio {
    font-size: 14px;
    line-height: 1.6;
    color: var(--ink-soft, #64748b);
    margin: 0;
}

.event-speakers-section {
    margin-top: 44px;
    padding-top: 36px;
    border-top: 1px solid var(--border-soft, #e2e8f0);
}
.speakers-header {
    margin-bottom: 24px;
}
.speakers-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 14px;
    background: rgba(202, 138, 4, 0.1);
    border: 1px solid rgba(202, 138, 4, 0.3);
    border-radius: var(--r-pill, 100px);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.1em;
    color: var(--gold-deep, #ca8a04);
    text-transform: uppercase;
    margin-bottom: 10px;
}
.speakers-heading {
    font-family: var(--serif, 'Cinzel', serif);
    font-size: 26px;
    color: var(--ink, #0f172a);
    margin: 0 0 8px;
    font-weight: 700;
}
.speakers-subheading {
    font-size: 14.5px;
    color: var(--ink-soft, #64748b);
    margin: 0;
    line-height: 1.55;
}
.speakers-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 20px;
    margin-top: 20px;
}
.speaker-card {
    background: var(--card-bg, #ffffff);
    border: 1px solid var(--border-soft, #e2e8f0);
    border-radius: 16px;
    padding: 14px;
    transition: transform 300ms ease, box-shadow 300ms ease, border-color 300ms ease;
}
.speaker-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 14px 30px rgba(0,0,0,0.08);
    border-color: rgba(202, 138, 4, 0.35);
}
.speaker-avatar-wrap {
    width: 100%;
    height: 220px;
    border-radius: 12px;
    overflow: hidden;
    background: #e2e8f0;
    margin-bottom: 12px;
}
.speaker-avatar-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top center;
    display: block;
}
.speaker-avatar-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--ink-soft, #94a3b8);
    background: #f1f5f9;
}
.speaker-card-body {
    padding: 2px 4px 6px;
}
.speaker-name {
    font-family: var(--serif, 'Cinzel', serif);
    font-size: 16px;
    font-weight: 700;
    color: var(--ink, #0f172a);
    margin: 0 0 6px;
    line-height: 1.3;
}
.speaker-role {
    font-size: 13px;
    color: var(--ink-soft, #64748b);
    line-height: 1.45;
    margin: 0;
}

/* ==========================================================================
   Handwriting Hero: Lead title block display
   Ensures line 1 contains exclusively black title text, while line 2 contains
   exclusively the animated handwriting text without unwanted wrapping.
   ========================================================================== */
.handwriting-hero .title-lead {
    display: block;
    margin-bottom: 6px;
}

/* ==========================================================================
   Single Event Template Styles
   ========================================================================== */
.single-event-header {
    padding: clamp(120px, 14vw, 160px) 0 44px;
    background: radial-gradient(circle at 50% 0%, var(--gold-bg) 0%, transparent 65%), var(--bg);
    border-bottom: 1px solid var(--border-soft);
}
.single-event-breadcrumbs {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 20px;
    font-size: 14px;
    font-weight: 500;
}
.single-event-breadcrumbs .back-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--ink-soft);
    text-decoration: none;
    transition: color 240ms var(--ease);
}
.single-event-breadcrumbs .back-link:hover {
    color: var(--gold-deep);
}
.single-event-breadcrumbs .breadcrumb-sep {
    color: var(--border-soft);
}
.single-event-breadcrumbs .event-badge {
    display: inline-flex;
    align-items: center;
    padding: 4px 14px;
    background: var(--gold-bg);
    color: var(--gold-deep);
    border: 1px solid rgba(202, 138, 4, 0.25);
    border-radius: var(--r-pill);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}
.single-event-title {
    font-family: var(--serif);
    font-size: clamp(32px, 4.5vw, 54px);
    font-weight: 400;
    line-height: 1.15;
    color: var(--ink);
    margin: 0 0 24px;
}
.single-event-meta-bar {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}
.single-event-meta-bar .meta-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    background: var(--card-bg);
    border: 1px solid var(--border-soft);
    border-radius: var(--r-pill);
    font-size: 13.5px;
    color: var(--ink-soft);
}
.single-event-meta-bar .meta-icon {
    color: var(--gold-deep);
    display: flex;
    align-items: center;
}

.single-event-media-section {
    padding: 40px 0 20px;
}
.single-event-featured-image {
    position: relative;
    border-radius: var(--r-card, 16px);
    overflow: hidden;
    max-height: 480px;
    box-shadow: 0 12px 36px rgba(0,0,0,0.08);
}
.event-hero-img {
    width: 100%;
    height: 100%;
    max-height: 480px;
    object-fit: cover;
    display: block;
}

.single-event-body-section {
    padding: 50px 0 90px;
}
.single-event-layout-grid {
    display: grid;
    grid-template-columns: 1fr 360px;
    gap: 48px;
    align-items: start;
}
.single-event-content-col .entry-content {
    font-size: 17px;
    line-height: 1.75;
    color: var(--ink-soft);
}
.single-event-content-col h3 {
    font-family: var(--serif);
    font-size: 26px;
    color: var(--ink);
    margin: 32px 0 16px;
}
.event-speakers-section {
    margin-top: 48px;
    padding-top: 36px;
    border-top: 1px solid var(--border-soft);
}
.speakers-heading {
    font-family: var(--serif);
    font-size: 24px;
    color: var(--ink);
    margin: 0 0 24px;
}
.speakers-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 20px;
}
.speaker-card {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px 20px;
    background: var(--card-bg);
    border: 1px solid var(--border-soft);
    border-radius: var(--r-card, 14px);
    transition: transform 240ms var(--ease), box-shadow 240ms var(--ease);
}
.speaker-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 24px rgba(0,0,0,0.06);
}
.speaker-avatar {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: var(--gold-bg);
    color: var(--gold-deep);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.speaker-avatar svg {
    width: 22px;
    height: 22px;
}
.speaker-name {
    font-size: 15.5px;
    font-weight: 700;
    color: var(--ink);
    margin: 0 0 4px;
}
.speaker-role {
    font-size: 13px;
    color: var(--ink-soft);
    margin: 0;
}

@media (max-width: 900px) {
    .goh-layout-grid {
        grid-template-columns: 1fr;
    }
    .goh-portrait-wrap {
        max-width: 360px;
        margin: 0 auto;
    }
    .single-sponsor-layout-grid {
        grid-template-columns: 1fr;
    }
    .single-sponsor-sidebar-col .sponsor-action-card {
        position: static;
    }
    .single-event-layout-grid {
        grid-template-columns: 1fr;
    }
    .single-event-sidebar-col .event-action-card {
        position: static;
    }
}

@media (max-width: 640px) {
    .moderator-inner-grid {
        grid-template-columns: 1fr;
        text-align: center;
    }
    .mod-header-line {
        justify-content: center;
        gap: 12px;
    }
    .panelists-grid-layout {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 420px) {
    .gallery-grid { grid-template-columns: 1fr; }
    .carousel-btn { width: 42px; height: 42px; }
}

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
    .js .scroll-reveal, .js .hero-animate { opacity: 1; transform: none; }
}

/* ==========================================================================
   Vision & Mission Cards — About Page
   ========================================================================== */
.section-vision-mission {
    background: var(--bg);
    padding: var(--section-y) 0;
    position: relative;
}

.vm-cards-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 32px;
    margin-top: 48px;
}

.vm-card {
    position: relative;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-xl);
    padding: clamp(32px, 4vw, 48px);
    box-shadow: var(--shadow-sm);
    transition: transform 0.35s cubic-bezier(0.25, 1, 0.5, 1), box-shadow 0.35s cubic-bezier(0.25, 1, 0.5, 1), border-color 0.35s ease;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.vm-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, var(--brand), var(--brand-soft));
    opacity: 0.85;
}

.vm-card--mission::before {
    background: linear-gradient(90deg, var(--accent), var(--accent-soft));
}

.vm-card:hover {
    transform: translateY(-6px);
    box-shadow: var(--shadow-lg);
    border-color: var(--border-strong);
}

.vm-card-icon {
    width: 64px;
    height: 64px;
    border-radius: var(--r-md);
    background: var(--tint-blue);
    color: var(--brand);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 24px;
    transition: transform 0.35s ease;
}

.vm-card--mission .vm-card-icon {
    background: var(--tint-peach);
    color: var(--accent);
}

.vm-card:hover .vm-card-icon {
    transform: scale(1.08) rotate(3deg);
}

.vm-card-tag {
    display: inline-block;
    align-self: flex-start;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--brand);
    background: rgba(36, 69, 123, 0.08);
    padding: 6px 14px;
    border-radius: var(--r-pill);
    margin-bottom: 16px;
}

.vm-card-tag--mission {
    color: var(--accent);
    background: rgba(228, 118, 60, 0.1);
}

.vm-card-title {
    font-size: clamp(1.35rem, 2vw, 1.65rem);
    font-weight: 700;
    color: var(--ink);
    line-height: 1.3;
    margin: 0 0 16px 0;
}

.vm-card-desc {
    font-size: 1rem;
    line-height: 1.65;
    color: var(--ink-soft);
    margin: 0 0 28px 0;
    flex-grow: 1;
}

.vm-card-points {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
    border-top: 1px solid var(--border);
    padding-top: 24px;
}

.vm-card-points li {
    position: relative;
    padding-left: 28px;
    font-size: 0.94rem;
    font-weight: 500;
    color: var(--ink);
    line-height: 1.45;
}

.vm-card-points li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--brand);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
    background-size: 11px;
    background-position: center;
    background-repeat: no-repeat;
}

.vm-card--mission .vm-card-points li::before {
    background-color: var(--accent);
}

/* ==========================================================================
   FAQ Section — About Page
   ========================================================================== */
.section-faq {
    background: var(--surface-2);
    padding: var(--section-y) 0;
    border-top: 1px solid var(--border);
}

.faq-layout {
    display: grid;
    grid-template-columns: 360px 1fr;
    gap: clamp(32px, 5vw, 64px);
    align-items: start;
}

.faq-sidebar {
    position: sticky;
    top: calc(var(--header-h) + 24px);
}

.faq-sidebar-title {
    font-size: clamp(1.8rem, 2.5vw, 2.3rem);
    font-weight: 800;
    color: var(--ink);
    line-height: 1.2;
    margin: 12px 0 16px 0;
    letter-spacing: -0.02em;
}

.faq-sidebar-desc {
    font-size: 1.05rem;
    line-height: 1.6;
    color: var(--ink-soft);
    margin: 0 0 28px 0;
}

.faq-list {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.faq-item {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
    transition: border-color 0.25s ease, box-shadow 0.25s ease;
}

.faq-item:hover {
    border-color: var(--border-strong);
    box-shadow: var(--shadow-md);
}

.faq-item--open {
    border-color: rgba(36, 69, 123, 0.35);
    box-shadow: var(--shadow-md);
}

.faq-question {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 22px 28px;
    background: transparent;
    border: none;
    cursor: pointer;
    text-align: left;
    font-family: inherit;
    color: var(--ink);
    transition: background-color 0.2s ease;
}

.faq-question:hover {
    background: rgba(25, 27, 31, 0.015);
}

.faq-q-text {
    font-size: 1.05rem;
    font-weight: 600;
    line-height: 1.4;
    color: var(--ink);
    transition: color 0.2s ease;
}

.faq-item--open .faq-q-text {
    color: var(--brand);
}

.faq-icon {
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--bg-soft);
    color: var(--ink-soft);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.3s cubic-bezier(0.2, 0.8, 0.2, 1), background-color 0.25s ease, color 0.25s ease;
}

.faq-item--open .faq-icon {
    transform: rotate(45deg);
    background: var(--brand);
    color: #fff;
}

.faq-answer {
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    transition: max-height 0.35s cubic-bezier(0.25, 1, 0.5, 1), opacity 0.3s ease, padding 0.35s ease;
    padding: 0 28px;
}

.faq-item--open .faq-answer {
    max-height: 500px;
    opacity: 1;
    padding: 0 28px 24px 28px;
}

.faq-answer p {
    margin: 0;
    font-size: 0.98rem;
    line-height: 1.7;
    color: var(--ink-soft);
}

@media (max-width: 900px) {
    .vm-cards-grid {
        grid-template-columns: 1fr;
        gap: 24px;
    }
    .faq-layout {
        grid-template-columns: 1fr;
        gap: 36px;
    }
    .faq-sidebar {
        position: static;
        text-align: center;
    }
    .faq-sidebar-desc {
        max-width: 500px;
        margin-left: auto;
        margin-right: auto;
    }
}

/* ==========================================================================
   FAQ Section — Homepage & Global (Theme-Aligned Accordion)
   ========================================================================== */
.section-faq-home {
    background: var(--bg);
    position: relative;
    padding: var(--section-y) 0;
}

.faq-list-standalone {
    max-width: 860px;
    margin: var(--space-32) auto 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-16);
}

.faq-list-standalone .faq-item {
    background: var(--surface, #FFFFFF);
    border: 1px solid var(--border);
    border-radius: var(--r-xl, 20px);
    box-shadow: 0 4px 18px rgba(15, 17, 21, 0.04);
    transition: transform 280ms cubic-bezier(0.16, 1, 0.3, 1), box-shadow 280ms cubic-bezier(0.16, 1, 0.3, 1), border-color 280ms ease, background 280ms ease;
    overflow: hidden;
    position: relative;
}

.faq-list-standalone .faq-item::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 4px;
    background: var(--brand);
    opacity: 0;
    transition: opacity 260ms ease, background-color 260ms ease;
}

.faq-list-standalone .faq-item:hover {
    transform: translateY(-2px);
    border-color: rgba(36, 69, 123, 0.3);
    box-shadow: 0 10px 28px -4px rgba(15, 17, 21, 0.08);
}

.faq-list-standalone .faq-item--open {
    background: var(--surface, #FFFFFF);
    border-color: rgba(36, 69, 123, 0.35);
    box-shadow: 0 14px 36px -6px rgba(36, 69, 123, 0.12);
}

.faq-list-standalone .faq-item--open::before {
    opacity: 1;
}

.faq-list-standalone .faq-question {
    padding: 24px 30px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    width: 100%;
    background: transparent;
    border: none;
    cursor: pointer;
    text-align: left;
    transition: background-color 200ms ease;
}

.faq-list-standalone .faq-question:hover {
    background: rgba(36, 69, 123, 0.02);
}

.faq-list-standalone .faq-q-text {
    font-family: var(--display);
    font-size: 1.08rem;
    font-weight: 700;
    line-height: 1.42;
    color: var(--ink);
    transition: color 220ms ease;
}

.faq-list-standalone .faq-item--open .faq-q-text {
    color: var(--brand);
}

.faq-list-standalone .faq-icon {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--bg-soft);
    border: 1px solid var(--border);
    color: var(--ink-soft);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: transform 320ms cubic-bezier(0.16, 1, 0.3, 1), background-color 260ms ease, color 260ms ease, border-color 260ms ease, box-shadow 260ms ease;
}

.faq-list-standalone .faq-question:hover .faq-icon {
    background: var(--brand);
    color: #FFFFFF;
    border-color: var(--brand);
}

.faq-list-standalone .faq-item--open .faq-icon {
    transform: rotate(45deg);
    background: var(--accent, #E4763C);
    border-color: var(--accent, #E4763C);
    color: #FFFFFF;
    box-shadow: 0 4px 14px rgba(228, 118, 60, 0.35);
}

.faq-list-standalone .faq-answer {
    padding: 0 30px;
    transition: max-height 380ms cubic-bezier(0.25, 1, 0.5, 1), opacity 300ms ease, padding 380ms ease;
}

.faq-list-standalone .faq-item--open .faq-answer {
    padding: 0 30px 26px 30px;
}

.faq-list-standalone .faq-answer p {
    font-size: 15.5px;
    line-height: 1.75;
    color: var(--ink-soft);
    margin: 0;
}

/* Dark Theme FAQ */
[data-theme="dark"] .faq-list-standalone .faq-item {
    background: rgba(22, 26, 35, 0.88);
    border-color: rgba(255, 255, 255, 0.08);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
}

[data-theme="dark"] .faq-list-standalone .faq-item::before {
    background: var(--accent);
}

[data-theme="dark"] .faq-list-standalone .faq-item:hover {
    border-color: rgba(228, 118, 60, 0.4);
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.55);
}

[data-theme="dark"] .faq-list-standalone .faq-item--open {
    background: rgba(26, 31, 44, 0.96);
    border-color: rgba(228, 118, 60, 0.45);
    box-shadow: 0 16px 42px -10px rgba(0, 0, 0, 0.65);
}

[data-theme="dark"] .faq-list-standalone .faq-item--open .faq-q-text {
    color: var(--accent-soft, #F5A26F);
}

[data-theme="dark"] .faq-list-standalone .faq-question:hover {
    background: rgba(255, 255, 255, 0.02);
}

[data-theme="dark"] .faq-list-standalone .faq-icon {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(255, 255, 255, 0.1);
    color: var(--ink-soft);
}

[data-theme="dark"] .faq-list-standalone .faq-question:hover .faq-icon {
    background: var(--accent);
    border-color: var(--accent);
    color: #FFFFFF;
}

/* ==========================================================================
   Circular Orbital Gallery Section — Homepage
   ========================================================================== */
.section-gallery-orbit {
    position: relative;
    background: var(--bg);
    color: var(--ink);
    padding: var(--section-y) 0 0;
    overflow: hidden;
}

/* The arc already leaves whitespace at its base — no extra void before Partners */
.section-gallery-orbit + .section {
    padding-top: var(--space-24);
}

.gallery-orbit-glow {
    position: absolute;
    top: 46%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: min(760px, 92vw);
    height: min(760px, 92vw);
    background: radial-gradient(circle at center, rgba(228, 118, 60, 0.16) 0%, rgba(228, 118, 60, 0.05) 45%, transparent 70%);
    border-radius: 50%;
    pointer-events: none;
    filter: blur(44px);
    z-index: 1;
}

.gallery-orbit-container {
    position: relative;
    z-index: 2;
}

.orbit-stage {
    /* Large radius = shallow, flat arc that reads as a true half-circle */
    --orbit-radius: clamp(360px, 42vw, 500px);
    --card-size: clamp(92px, 8.6vw, 122px);
    --card-radius: clamp(16px, 1.8vw, 24px);
    --orbit-speed: 55s;
    /* How far below the ring's horizontal diameter stays visible (smaller = closer to a clean half) */
    --arc-bottom: 56px;

    position: relative;
    width: 100%;
    /* Clip just past the diameter so only the top half-circle shows */
    height: calc(var(--orbit-radius) + var(--card-size) / 2 + var(--arc-bottom));
    overflow: hidden;
    /* The ring turns forever; keep its repaints from reaching the rest of
       the page. The height is explicit and `overflow: hidden` already
       clips to this box, so containment changes nothing visually. */
    contain: layout paint style;
}

/* Continuous orbital rotation */
@keyframes orbit-spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

.orbit-ring {
    position: absolute;
    /* Ring centre sits low so cards arc across the top like a dome */
    top: calc(var(--orbit-radius) + var(--card-size) / 2 + 12px);
    left: 50%;
    width: 0;
    height: 0;
    animation: orbit-spin var(--orbit-speed) linear infinite;
    transform-origin: 0 0;
    z-index: 2;
    pointer-events: none;
    /* Twenty-two photo cards hang off this element and it rotates without
       stopping. Un-promoted, that means the browser re-paints all of them,
       on the main thread, every single frame — which is what made this
       section stutter. Hinting `transform` lifts the whole ring onto one
       compositor layer: painted once, then turned by the GPU. */
    will-change: transform;
    backface-visibility: hidden;
}

.orbit-item {
    position: absolute;
    top: 0;
    left: 0;
    width: var(--card-size);
    height: var(--card-size);
    margin-top: calc(var(--card-size) / -2);
    margin-left: calc(var(--card-size) / -2);
    /* Trailing rotate(90deg) keeps each card tangent to the arc (rotated with it) */
    transform: rotate(var(--angle)) translateX(var(--orbit-radius)) rotate(90deg);
    pointer-events: auto;
}

.orbit-card-facer,
.orbit-card-spinner {
    width: 100%;
    height: 100%;
}

/* Stop the arc ONLY while a card itself is hovered/focused */
.orbit-stage:has(.orbit-card:hover) .orbit-ring,
.orbit-stage:has(.orbit-card:focus-visible) .orbit-ring {
    animation-play-state: paused;
}

.orbit-card {
    width: 100%;
    height: 100%;
    border-radius: var(--card-radius);
    overflow: hidden;
    position: relative;
    box-shadow: 0 12px 30px rgba(17, 20, 28, 0.22), 0 3px 8px rgba(17, 20, 28, 0.12);
    border: 1px solid var(--border-soft);
    transition: transform 0.35s cubic-bezier(0.25, 1, 0.5, 1), border-color 0.3s ease, box-shadow 0.35s ease;
    cursor: pointer;
    background: var(--surface);
    display: block;
}

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

.orbit-card:hover {
    transform: scale(1.16);
    border-color: var(--accent);
    box-shadow: 0 20px 46px rgba(17, 20, 28, 0.32), 0 0 22px rgba(228, 118, 60, 0.4);
    z-index: 25;
}

.orbit-card:hover img {
    transform: scale(1.08);
}

.orbit-card-tag {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 26px 10px 10px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    background: linear-gradient(to top, rgba(10, 12, 17, 0.92) 0%, rgba(10, 12, 17, 0.55) 45%, rgba(10, 12, 17, 0) 100%);
    text-align: center;
    opacity: 0;
    transform: translateY(8px);
    transition: opacity 0.3s var(--ease), transform 0.3s var(--ease);
    pointer-events: none;
}

.orbit-card-tag .tag-title {
    max-width: 100%;
    font-size: 0.72rem;
    font-weight: 600;
    line-height: 1.25;
    color: #FFFFFF;
    letter-spacing: 0.005em;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.orbit-card-tag .tag-sub {
    font-size: 0.56rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: rgba(255, 255, 255, 0.62);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}

.orbit-card:hover .orbit-card-tag {
    opacity: 1;
    transform: translateY(0);
}

/* Static Center Hub — centred inside the dome (no transform, so scroll-reveal keeps working) */
.orbit-center-hub {
    position: absolute;
    left: 0;
    right: 0;
    margin-inline: auto;
    top: calc(var(--orbit-radius) * 0.43);
    z-index: 5;
    width: min(90vw, calc(var(--orbit-radius) * 0.92));
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    pointer-events: auto;
    padding: clamp(12px, 2vw, 24px);
}

.orbit-center-hub .section-eyebrow {
    color: var(--accent);
    background: rgba(228, 118, 60, 0.14);
    border: 1px solid rgba(228, 118, 60, 0.28);
    display: inline-block;
    padding: 6px 18px;
    border-radius: 999px;
    font-size: 0.74rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    margin-bottom: 16px;
    text-align: center;
}

.orbit-hub-title {
    color: var(--ink);
    font-size: clamp(1.7rem, 3vw, 2.6rem);
    font-weight: 800;
    line-height: 1.15;
    letter-spacing: -0.025em;
    margin: 0 0 12px 0;
    text-align: center;
    width: 100%;
}

.orbit-hub-desc {
    color: var(--ink-soft);
    font-size: clamp(0.9rem, 1.1vw, 1.02rem);
    line-height: 1.6;
    margin: 0 auto 22px;
    text-align: center;
    width: 100%;
}

.orbit-hub-desc p,
.orbit-hub-desc * {
    text-align: center;
    margin-left: auto;
    margin-right: auto;
}

.orbit-hub-cta {
    display: flex;
    justify-content: center;
    width: 100%;
}

.orbit-hub-cta .orbit-btn {
    background: var(--ink);
    color: var(--bg);
    border: none;
    font-weight: 700;
    padding: 12px 28px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    box-shadow: 0 8px 22px rgba(17, 20, 28, 0.22);
    transition: transform 0.25s ease, background-color 0.25s ease, color 0.25s ease, box-shadow 0.25s ease;
}

.orbit-hub-cta .orbit-btn:hover {
    background: var(--accent);
    color: #FFFFFF;
    transform: translateY(-3px);
    box-shadow: 0 12px 28px rgba(228, 118, 60, 0.4);
}

/* ==========================================================================
   Mobile-only cover-flow carousel (desktop keeps the orbit above, untouched)
   ========================================================================== */
.gallery-coverflow {
    display: none;
}

.gallery-coverflow-head {
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    margin-bottom: 22px;
}
.gallery-coverflow-head .section-eyebrow {
    color: var(--accent);
    background: rgba(228, 118, 60, 0.14);
    border: 1px solid rgba(228, 118, 60, 0.28);
    display: inline-block;
    padding: 5px 16px;
    border-radius: 999px;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}
.gallery-coverflow-title {
    color: var(--ink);
    font-size: clamp(1.5rem, 6.5vw, 2rem);
    font-weight: 800;
    line-height: 1.15;
    letter-spacing: -0.02em;
    margin: 0;
}
.cf-head-btn {
    margin-top: 2px;
}

.cf-stage {
    position: relative;
    width: 100%;
    height: 340px;
    perspective: 1100px;
    overflow: hidden;
}

.cf-track {
    position: absolute;
    inset: 0;
    transform-style: preserve-3d;
}

.cf-card {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 190px;
    height: 250px;
    margin: -125px 0 0 -95px;
    padding: 0;
    border: none;
    border-radius: 20px;
    overflow: hidden;
    background: var(--surface);
    box-shadow: 0 18px 40px rgba(17, 20, 28, 0.28);
    cursor: pointer;
    opacity: 0;
    pointer-events: none;
    transition: transform 0.5s var(--ease), opacity 0.5s var(--ease), filter 0.5s var(--ease), box-shadow 0.5s var(--ease);
    will-change: transform, opacity;
}

/* Only five cards are ever placed (is-active, is-prev/next, is-prev/next-2);
   the rest sit at opacity 0 behind them. `will-change` on all twenty-two
   still asked the compositor for twenty-two layers holding twenty-two photos,
   on phones, for five visible cards. Releasing the hint on the unplaced ones
   is invisible — they are fully transparent — and it is reinstated by the
   base rule above the moment JS gives one a slot, before its 0.5s move. */
.cf-card:not(.is-active):not(.is-prev):not(.is-next):not(.is-prev-2):not(.is-next-2) {
    will-change: auto;
}
.cf-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    filter: grayscale(1) contrast(0.95) brightness(0.9);
    transition: filter 0.5s var(--ease);
}

/* Position slots relative to the active card */
.cf-card.is-active {
    opacity: 1;
    pointer-events: auto;
    z-index: 5;
    transform: translateX(0) translateZ(0) rotateY(0deg) scale(1);
    box-shadow: 0 26px 60px rgba(17, 20, 28, 0.4), 0 0 0 1px rgba(228, 118, 60, 0.35);
}
.cf-card.is-active img {
    filter: grayscale(0) contrast(1) brightness(1);
}
.cf-card.is-prev,
.cf-card.is-next {
    opacity: 1;
    pointer-events: auto;
    z-index: 3;
}
.cf-card.is-prev {
    transform: translateX(-64%) translateZ(-140px) rotateY(38deg) scale(0.86);
}
.cf-card.is-next {
    transform: translateX(64%) translateZ(-140px) rotateY(-38deg) scale(0.86);
}
.cf-card.is-prev-2,
.cf-card.is-next-2 {
    opacity: 0.5;
    z-index: 1;
}
.cf-card.is-prev-2 {
    transform: translateX(-112%) translateZ(-280px) rotateY(42deg) scale(0.7);
}
.cf-card.is-next-2 {
    transform: translateX(112%) translateZ(-280px) rotateY(-42deg) scale(0.7);
}

.cf-card-caption {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 30px 12px 12px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    text-align: center;
    background: linear-gradient(to top, rgba(10, 12, 17, 0.9), rgba(10, 12, 17, 0));
    opacity: 0;
    transition: opacity 0.4s var(--ease);
}
.cf-card.is-active .cf-card-caption {
    opacity: 1;
}
.cf-cap-title {
    font-size: 0.82rem;
    font-weight: 600;
    line-height: 1.25;
    color: #FFFFFF;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.cf-cap-sub {
    font-size: 0.6rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: rgba(255, 255, 255, 0.62);
}

.cf-controls {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 18px;
    margin-top: 18px;
}
.cf-nav {
    width: 46px;
    height: 46px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    border: 1px solid var(--border-soft);
    background: var(--surface);
    color: var(--ink);
    box-shadow: 0 6px 18px rgba(17, 20, 28, 0.16);
    cursor: pointer;
    transition: transform 0.2s var(--ease), background-color 0.2s var(--ease), color 0.2s var(--ease);
}
.cf-nav:hover {
    background: var(--ink);
    color: var(--bg);
}
.cf-nav svg {
    width: 18px;
    height: 18px;
}
.cf-prev svg {
    transform: scaleX(-1);
}
.cf-nav:active {
    transform: scale(0.92);
}

/* Responsiveness */
@media (max-width: 900px) {
    .orbit-stage {
        --orbit-radius: clamp(300px, 46vw, 400px);
        --card-size: clamp(66px, 9vw, 86px);
        --card-radius: 16px;
        --arc-bottom: 84px;
    }
    .orbit-center-hub {
        top: calc(var(--orbit-radius) * 0.3);
    }
}

@media (max-width: 600px) {
    /* Swap the orbit for the cover-flow carousel */
    .section-gallery-orbit .orbit-stage,
    .section-gallery-orbit .gallery-orbit-glow {
        display: none;
    }
    .section-gallery-orbit {
        padding-bottom: clamp(24px, 6vw, 40px);
    }
    /* Full-bleed the carousel out of the container gutter (mobile only) */
    .gallery-coverflow {
        display: block;
        margin-inline: calc(-1 * var(--gutter));
    }
    .gallery-coverflow-head {
        padding-inline: var(--gutter);
    }
    .cf-stage {
        height: 360px;
    }
    .cf-card {
        width: 210px;
        height: 272px;
        margin: -136px 0 0 -105px;
    }
    .cf-card.is-prev {
        transform: translateX(-58%) translateZ(-130px) rotateY(35deg) scale(0.82);
    }
    .cf-card.is-next {
        transform: translateX(58%) translateZ(-130px) rotateY(-35deg) scale(0.82);
    }
    .cf-card.is-prev-2 {
        transform: translateX(-104%) translateZ(-260px) rotateY(40deg) scale(0.64);
    }
    .cf-card.is-next-2 {
        transform: translateX(104%) translateZ(-260px) rotateY(-40deg) scale(0.64);
    }
}

/* ==========================================================================
   Legal Pages (Privacy Policy & Terms and Conditions)
   ========================================================================== */
.section-legal {
    padding-top: clamp(24px, 4vw, 44px);
    padding-bottom: clamp(60px, 8vw, 100px);
    background: var(--bg);
}

.legal-meta-strip {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 16px 24px;
    padding: 16px 24px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    box-shadow: var(--shadow-sm);
    margin-bottom: clamp(32px, 5vw, 48px);
}

.legal-meta-item {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.legal-meta-item .meta-label {
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--ink-faint);
}

.legal-meta-item .meta-value {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--ink);
}

.btn-legal-action {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 18px;
    font-size: 0.84rem;
    font-weight: 600;
    color: var(--ink);
    background: var(--bg-soft);
    border: 1px solid var(--border);
    border-radius: 999px;
    cursor: pointer;
    transition: all 0.2s var(--ease);
}

.btn-legal-action:hover {
    background: var(--ink);
    color: var(--bg);
    border-color: var(--ink);
}

.btn-legal-action svg {
    width: 14px;
    height: 14px;
}

/* Two-column layout */
.legal-layout {
    display: grid;
    grid-template-columns: 280px 1fr;
    gap: clamp(28px, 4vw, 56px);
    align-items: start;
}

/* Sidebar sticky TOC */
.legal-sidebar {
    position: sticky;
    top: calc(var(--header-h) + 24px);
}

.legal-sidebar-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    padding: 24px;
    box-shadow: var(--shadow-sm);
}

.legal-toc-title {
    font-size: 0.88rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--ink);
    margin: 0 0 16px 0;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--border);
}

.legal-toc-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.legal-toc-link {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 8px 12px;
    border-radius: var(--r-sm);
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--ink-soft);
    text-decoration: none;
    transition: all 0.2s ease;
    line-height: 1.35;
}

.legal-toc-link .toc-num {
    font-size: 0.76rem;
    font-weight: 700;
    color: var(--accent);
    padding-top: 1px;
}

.legal-toc-link:hover {
    color: var(--ink);
    background: var(--bg-soft);
}

.legal-sidebar-help {
    margin-top: 24px;
    padding-top: 18px;
    border-top: 1px solid var(--border);
    display: flex;
    align-items: center;
    gap: 12px;
}

.legal-sidebar-help .help-icon {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: rgba(228, 118, 60, 0.12);
    color: var(--accent);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.legal-sidebar-help .help-icon svg {
    width: 18px;
    height: 18px;
}

.legal-sidebar-help .help-title {
    display: block;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    color: var(--ink-faint);
}

.legal-sidebar-help .help-link {
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--brand);
    text-decoration: none;
}

.legal-sidebar-help .help-link:hover {
    text-decoration: underline;
}

/* Main Content Area */
.legal-lead-card {
    background: linear-gradient(135deg, rgba(36, 69, 123, 0.05) 0%, rgba(228, 118, 60, 0.05) 100%);
    border: 1px solid var(--border);
    border-left: 4px solid var(--brand);
    border-radius: var(--r-md);
    padding: clamp(20px, 3vw, 28px);
    margin-bottom: 32px;
}

.legal-lead-text {
    font-size: 1.08rem;
    line-height: 1.7;
    color: var(--ink);
    font-weight: 500;
    margin: 0;
}

.legal-sections-wrapper {
    display: flex;
    flex-direction: column;
    gap: 28px;
}

.legal-section-block {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    padding: clamp(24px, 3.5vw, 36px);
    box-shadow: var(--shadow-sm);
    scroll-margin-top: calc(var(--header-h) + 24px);
    transition: border-color 0.25s ease, box-shadow 0.25s ease;
}

.legal-section-block:hover {
    border-color: var(--border-strong);
    box-shadow: var(--shadow-md);
}

.legal-section-header {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 18px;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--border);
}

.section-num-badge {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    background: var(--brand);
    color: #FFFFFF;
    font-size: 0.82rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.legal-section-header .section-heading {
    font-size: clamp(1.2rem, 2vw, 1.45rem);
    font-weight: 700;
    color: var(--ink);
    margin: 0;
    line-height: 1.3;
}

/* Entry prose formatting */
.entry-prose {
    color: var(--ink-soft);
    font-size: 0.98rem;
    line-height: 1.75;
}

.entry-prose p {
    margin: 0 0 16px 0;
}

.entry-prose p:last-child {
    margin-bottom: 0;
}

.entry-prose ul, .entry-prose ol {
    margin: 14px 0 18px 0;
    padding-left: 24px;
}

.entry-prose li {
    margin-bottom: 10px;
    line-height: 1.6;
}

.entry-prose strong {
    color: var(--ink);
    font-weight: 600;
}

.entry-prose a {
    color: var(--brand);
    text-decoration: underline;
    text-underline-offset: 3px;
}

.entry-prose a:hover {
    color: var(--accent);
}

/* Contact Card at Bottom */
.legal-contact-card {
    margin-top: 36px;
    background: var(--surface-2);
    border: 1px solid var(--border-strong);
    border-radius: var(--r-md);
    padding: clamp(24px, 3.5vw, 36px);
    display: flex;
    align-items: flex-start;
    gap: 20px;
}

.contact-card-icon {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: rgba(36, 69, 123, 0.12);
    color: var(--brand);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.contact-card-icon svg {
    width: 22px;
    height: 22px;
}

.contact-card-info {
    flex: 1;
}

.contact-card-title {
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--ink);
    margin: 0 0 8px 0;
}

.contact-card-desc {
    font-size: 0.92rem;
    color: var(--ink-soft);
    line-height: 1.6;
    margin: 0 0 18px 0;
}

.contact-card-links {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

/* Responsive */
@media (max-width: 900px) {
    .legal-layout {
        grid-template-columns: 1fr;
    }
    .legal-sidebar {
        position: static;
    }
    .legal-meta-strip {
        flex-direction: column;
        align-items: flex-start;
    }
    .btn-legal-action {
        width: 100%;
        justify-content: center;
    }
}

/* Hidden by default on screen */
.print-doc-header,
.print-doc-footer {
    display: none !important;
}

/* ==========================================================================
   About The Founder Section
   ========================================================================== */
.section-founder {
    position: relative;
    background-color: var(--surface-2);
    padding: var(--section-y) 0;
    overflow: hidden;
    border-bottom: 1px solid var(--border);
}

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

.founder-grid {
    display: grid;
    grid-template-columns: 1.15fr 0.85fr;
    align-items: center;
    gap: clamp(32px, 5vw, 64px);
}

/* Left Column: Content */
.founder-content {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.founder-heading-wrap {
    margin-bottom: clamp(16px, 2vw, 24px);
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.founder-sub-title {
    font-family: var(--sans);
    font-size: clamp(12px, 0.95vw, 13.5px);
    font-weight: 700;
    line-height: 1.3;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--accent, #9E7422);
    display: inline-block;
    margin-bottom: 8px;
}

.founder-main-title {
    font-family: var(--display);
    font-size: clamp(28px, 3.2vw, 42px);
    font-weight: 800;
    line-height: 1.15;
    text-transform: uppercase;
    letter-spacing: -0.015em;
    color: var(--ink);
    margin: 0;
}

.founder-bio {
    font-family: var(--sans);
    font-size: clamp(13.5px, 0.95vw, 15px);
    line-height: 1.7;
    color: var(--ink-soft);
    margin-bottom: clamp(24px, 2.5vw, 32px);
    max-width: 580px;
}

.founder-bio p {
    margin: 0 0 12px 0;
}

.founder-bio p:last-child {
    margin-bottom: 0;
}

/* Bottom Highlight Counters (Placed side-by-side) */
.founder-highlights {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: clamp(10px, 1.6vw, 18px);
    padding-top: clamp(20px, 2.2vw, 28px);
    border-top: 1px solid var(--border, rgba(25, 27, 31, 0.08));
    width: 100%;
    max-width: 580px;
}

.founder-hl-item {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: clamp(14px, 1.4vw, 18px) clamp(14px, 1.6vw, 20px);
    background: var(--surface-1, #FFFFFF);
    border: 1px solid var(--border, rgba(25, 27, 31, 0.08));
    border-radius: 16px;
    box-shadow: 0 4px 14px -4px rgba(25, 27, 31, 0.05);
    transition: transform 0.25s var(--ease), box-shadow 0.25s var(--ease), border-color 0.25s var(--ease);
}

.founder-hl-item:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 24px -6px rgba(25, 27, 31, 0.1);
    border-color: rgba(197, 154, 39, 0.35);
}

.founder-hl-num {
    font-family: var(--display);
    font-size: clamp(24px, 2.4vw, 34px);
    font-weight: 800;
    line-height: 1.05;
    letter-spacing: -0.02em;
    color: var(--ink);
    font-variant-numeric: tabular-nums;
    display: flex;
    align-items: baseline;
    gap: 1px;
}

.founder-hl-suffix {
    font-size: 0.72em;
    font-weight: 700;
    color: var(--accent, #9E7422);
    margin-left: 2px;
}

.founder-hl-label {
    font-family: var(--sans);
    font-size: clamp(11px, 0.82vw, 12.5px);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--ink-muted, #6B7280);
    margin-top: 6px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}

/* Right Column: Founder Media & Enlarged Card */
.founder-media-col {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
}

.founder-card {
    position: relative;
    width: 100%;
    max-width: 390px;
    border-radius: clamp(20px, 2.5vw, 28px);
    background: #FFFFFF;
    box-shadow: 0 16px 40px -12px rgba(25, 27, 31, 0.10), 0 4px 14px rgba(25, 27, 31, 0.04);
    border: 1px solid rgba(25, 27, 31, 0.08);
    overflow: hidden;
    transition: transform 0.45s var(--ease), box-shadow 0.45s var(--ease), border-color 0.45s var(--ease);
}

.founder-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 28px 70px -15px rgba(25, 27, 31, 0.18), 0 6px 18px rgba(25, 27, 31, 0.08);
    border-color: rgba(25, 27, 31, 0.14);
}

.founder-image-frame {
    position: relative;
    width: 100%;
    aspect-ratio: 3 / 4;
    background: linear-gradient(180deg, #F3F4F6 0%, #E5E7EB 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.founder-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 15%;
    display: block;
    transition: transform 0.6s var(--ease);
}

.founder-card:hover .founder-img {
    transform: scale(1.025);
}

/* Dark Mode Overrides */
[data-theme="dark"] .section-founder {
    background-color: #121418;
    border-bottom-color: rgba(255, 255, 255, 0.08);
}

[data-theme="dark"] .founder-sub-title {
    color: #FBBF24;
}

[data-theme="dark"] .founder-main-title {
    color: #FFFFFF;
}

[data-theme="dark"] .founder-bio {
    color: #A2AAB5;
}

[data-theme="dark"] .founder-highlights {
    border-top-color: rgba(255, 255, 255, 0.08);
}

[data-theme="dark"] .founder-hl-item {
    background: #191D23;
    border-color: rgba(255, 255, 255, 0.08);
    box-shadow: 0 4px 16px -4px rgba(0, 0, 0, 0.4);
}

[data-theme="dark"] .founder-hl-item:hover {
    border-color: rgba(245, 158, 11, 0.4);
    box-shadow: 0 10px 24px -6px rgba(0, 0, 0, 0.6);
}

[data-theme="dark"] .founder-hl-num {
    color: #FFFFFF;
}

[data-theme="dark"] .founder-hl-suffix {
    color: #FBBF24;
}

[data-theme="dark"] .founder-hl-label {
    color: #9CA3AF;
}

[data-theme="dark"] .founder-card {
    background: #191D23;
    border-color: rgba(255, 255, 255, 0.08);
    box-shadow: 0 16px 40px -12px rgba(0, 0, 0, 0.5);
}

[data-theme="dark"] .founder-card:hover {
    border-color: rgba(255, 255, 255, 0.16);
    box-shadow: 0 24px 60px -15px rgba(0, 0, 0, 0.7);
}

[data-theme="dark"] .founder-image-frame {
    background: linear-gradient(180deg, #1E232B 0%, #15181E 100%);
}

/* Responsive Breakpoints */
@media (max-width: 991px) {
    .founder-grid {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .founder-media-col {
        order: -1;
        max-width: 360px;
        margin: 0 auto;
    }

    .founder-card {
        max-width: 360px;
    }

    .founder-content {
        align-items: flex-start;
    }
}

@media (max-width: 600px) {
    .section-founder {
        padding: 56px 0;
    }

    .founder-highlights {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 8px;
        padding-top: 18px;
    }

    .founder-hl-item {
        padding: 12px 10px;
        border-radius: 12px;
    }

    .founder-hl-num {
        font-size: 20px;
    }

    .founder-hl-label {
        font-size: 10px;
        letter-spacing: 0.04em;
    }

    .founder-card {
        max-width: 300px;
        border-radius: 20px;
        margin: 0 auto;
    }
}

/* ==========================================================================
   Print Document / PDF Export Styles
   ========================================================================== */
@media print {
    /* 1. Hide all non-document website chrome */
    #masthead,
    .site-header,
    .mobile-menu,
    .page-hero,
    .hero-handwriting,
    .legal-meta-strip,
    .legal-sidebar,
    .legal-contact-card,
    .section-cta,
    .cta-banner,
    #colophon,
    .site-footer,
    .footer-wordmark,
    .footer-glow,
    .footer-dots,
    .cursor-glow-layer,
    .gallery-lightbox,
    #wpadminbar,
    .btn-legal-action {
        display: none !important;
    }

    /* 2. Reset base colors for high-contrast crisp paper/PDF print */
    *, *::before, *::after {
        box-shadow: none !important;
        text-shadow: none !important;
    }

    html, body {
        background: #FFFFFF !important;
        color: #111827 !important;
        font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif !important;
        font-size: 10.5pt !important;
        line-height: 1.55 !important;
        margin: 0 !important;
        padding: 0 !important;
        width: 100% !important;
    }

    .site-main,
    .page-legal-main,
    .section-legal {
        background: transparent !important;
        padding: 0 !important;
        margin: 0 !important;
    }

    .container {
        max-width: 100% !important;
        width: 100% !important;
        padding: 0 10mm !important;
        margin: 0 !important;
    }

    .legal-layout {
        display: block !important;
        grid-template-columns: none !important;
        gap: 0 !important;
    }

    .legal-content-col {
        width: 100% !important;
        max-width: 100% !important;
        opacity: 1 !important;
        transform: none !important;
        visibility: visible !important;
    }

    .scroll-reveal,
    .hero-animate,
    .legal-sections-wrapper,
    .legal-section-block,
    .legal-lead-card,
    .entry-prose {
        opacity: 1 !important;
        transform: none !important;
        visibility: visible !important;
    }

    /* 3. Formal Document Header */
    .print-doc-header {
        display: block !important;
        margin-top: 5mm !important;
        margin-bottom: 8mm !important;
    }

    .print-doc-brand-row {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        padding-bottom: 12px !important;
        border-bottom: 2px solid #24457B !important;
    }

    .print-doc-logo img {
        height: 38px !important;
        width: auto !important;
        display: block !important;
    }

    .print-doc-org {
        text-align: right !important;
        display: flex !important;
        flex-direction: column !important;
        gap: 2px !important;
    }

    .print-doc-org .org-name {
        font-size: 11pt !important;
        font-weight: 700 !important;
        color: #24457B !important;
    }

    .print-doc-org .org-loc {
        font-size: 8.5pt !important;
        color: #4B5563 !important;
    }

    .print-doc-title-block {
        margin-top: 14px !important;
        margin-bottom: 14px !important;
    }

    .print-doc-eyebrow {
        display: inline-block !important;
        font-size: 8pt !important;
        font-weight: 700 !important;
        letter-spacing: 0.1em !important;
        text-transform: uppercase !important;
        color: #E4763C !important;
        margin-bottom: 4px !important;
    }

    .print-doc-title {
        font-size: 20pt !important;
        font-weight: 800 !important;
        color: #111827 !important;
        margin: 0 0 6px 0 !important;
        line-height: 1.2 !important;
    }

    .print-doc-desc {
        font-size: 10.5pt !important;
        color: #4B5563 !important;
        margin: 0 !important;
        line-height: 1.4 !important;
    }

    .print-doc-meta-row {
        display: flex !important;
        gap: 20px !important;
        background: #F3F4F6 !important;
        border: 1px solid #E5E7EB !important;
        border-radius: 6px !important;
        padding: 8px 14px !important;
        margin-top: 12px !important;
        font-size: 9pt !important;
        -webkit-print-color-adjust: exact !important;
        print-color-adjust: exact !important;
    }

    .print-doc-meta-row .meta-cell strong {
        color: #111827 !important;
    }

    .print-doc-rule {
        height: 1px !important;
        background: #E5E7EB !important;
        margin: 14px 0 0 0 !important;
    }

    /* 4. Lead Card */
    .legal-lead-card {
        background: #F8FAFC !important;
        border: 1px solid #CBD5E1 !important;
        border-left: 4px solid #24457B !important;
        border-radius: 6px !important;
        padding: 12px 16px !important;
        margin-bottom: 18px !important;
        page-break-inside: avoid !important;
        -webkit-print-color-adjust: exact !important;
        print-color-adjust: exact !important;
    }

    .legal-lead-text {
        font-size: 10.5pt !important;
        color: #1E293B !important;
        line-height: 1.5 !important;
    }

    /* 5. Sections */
    .legal-sections-wrapper {
        display: block !important;
        gap: 0 !important;
    }

    .legal-section-block {
        border: none !important;
        border-bottom: 1px solid #E5E7EB !important;
        border-radius: 0 !important;
        padding: 14px 0 !important;
        margin: 0 !important;
        page-break-inside: avoid !important;
        break-inside: avoid !important;
    }

    .legal-section-header {
        display: flex !important;
        align-items: center !important;
        gap: 10px !important;
        border-bottom: none !important;
        margin-bottom: 8px !important;
        padding-bottom: 0 !important;
    }

    .section-num-badge {
        width: 26px !important;
        height: 26px !important;
        background: #24457B !important;
        color: #FFFFFF !important;
        border-radius: 6px !important;
        font-size: 8.5pt !important;
        font-weight: 700 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        flex-shrink: 0 !important;
        -webkit-print-color-adjust: exact !important;
        print-color-adjust: exact !important;
    }

    .legal-section-header .section-heading {
        font-size: 13pt !important;
        font-weight: 700 !important;
        color: #0F172A !important;
        margin: 0 !important;
        line-height: 1.25 !important;
    }

    .entry-prose {
        color: #334155 !important;
        font-size: 10pt !important;
        line-height: 1.6 !important;
    }

    .entry-prose p {
        margin: 0 0 10px 0 !important;
    }

    .entry-prose ul, .entry-prose ol {
        margin: 6px 0 10px 22px !important;
        padding: 0 !important;
    }

    .entry-prose li {
        margin-bottom: 6px !important;
        line-height: 1.5 !important;
    }

    .entry-prose strong {
        color: #0F172A !important;
        font-weight: 700 !important;
    }

    /* 6. Formal Document Footer */
    .print-doc-footer {
        display: block !important;
        margin-top: 14mm !important;
        page-break-inside: avoid !important;
        break-inside: avoid !important;
    }

    .print-doc-footer .print-doc-rule {
        height: 1px !important;
        background: #24457B !important;
        margin-bottom: 8px !important;
    }

    .print-footer-content {
        display: flex !important;
        justify-content: space-between !important;
        font-size: 8pt !important;
        color: #64748B !important;
        padding-top: 4px !important;
    }
}




/* ==========================================================================
   Rendering performance layer
   --------------------------------------------------------------------------
   Nothing below changes geometry, colour or timing of anything on screen.
   It only changes *when* and *on which thread* the browser rasterizes work
   that is already being drawn, so scrolling keeps a free frame budget.
   ========================================================================== */

/* --- 1. Offscreen animation parking ---------------------------------------
   Several decorative animations here are `infinite` and animate paint-only
   properties (background-position, box-shadow, background, color). Those
   cannot be composited, so each one repaints on the main thread 60 times a
   second for as long as the tab is open — including while it is scrolled far
   out of view, which is most of the time. That is the budget scrolling needs.

   main.js toggles `.perf-paused` from an IntersectionObserver. Pausing is
   imperceptible: the element is outside the viewport, and a paused animation
   resumes from the exact frame it stopped on, so there is never a jump. */
.perf-paused,
.perf-paused::before,
.perf-paused::after {
    animation-play-state: paused !important;
}

/* Two of the parked animations live on a descendant rather than on the
   observed element itself, because the element that actually animates is a
   poor observation target:

   - `.orbit-ring` is a 0x0 point at the foot of the dome. Observing it meant
     watching a single pixel, so the arc could sit frozen while its cards
     were plainly in view. The stage is observed instead — that is the box
     the cards actually occupy.
   - the corridor cards are generated by JS, so the parked element is the
     `[data-corridor]` container that exists in the markup.

   These are the two heaviest infinite animations on the homepage: a rotating
   22-card photo ring and twenty photo cards flying through a 3D corridor.
   Parking them while their section is offscreen is where most of the
   scrolling budget comes back. */
.perf-paused .orbit-ring,
.perf-paused .corridor-card {
    animation-play-state: paused !important;
}

/* --- 2. Cursor fog: stop spinning a 38px blur when nothing is moving ------
   `.cursor-glow-layer::before` spins a blurred conic-gradient forever. A
   rotating `filter: blur(38px)` has to be re-rasterized every single frame,
   and the parent's `mix-blend-mode` means the compositor must re-blend it
   against the page underneath as well. While the pointer is still — which
   includes the whole time the user is scrolling — the fog is stationary, so
   the spin cannot be seen; only its cost is real. main.js adds `.is-idle`
   ~400ms after the last pointer movement and drops it on the next move. */
.cursor-glow-layer.is-idle::before {
    animation-play-state: paused;
}

/* Until the first pointer move the layer is fully transparent, yet a
   blend-mode layer still forces a compositing pass on every frame. Take it
   out of the pipeline entirely until it is actually in use. The delayed
   `visibility` keeps the existing 600ms fade intact in both directions. */
.cursor-glow-layer:not(.is-active) {
    visibility: hidden;
    transition: opacity 600ms var(--ease), visibility 0s linear 600ms;
}

/* --- 3. Cache the large static blurs as GPU textures ----------------------
   These decorative blobs carry `filter: blur(38–80px)`. An un-promoted
   filtered element is re-blurred whenever its containing layer repaints;
   blurring a 460px orb by 80px is one of the most expensive single paint
   operations on the page. `translateZ(0)` gives each one its own layer, so
   the blur is rasterized once and then only re-used. Pixel-identical. */
body::before {
    /* Fixed 84px grid behind everything — promoting it means the root
       scrolling layer no longer repaints it as content moves past. */
    transform: translateZ(0);
}

.page-hero::after {
    /* keeps the original -50% centring, adds layer promotion */
    transform: translateX(-50%) translateZ(0);
}

.handwriting-hero .hero-ambient-orb,
.cta-shape {
    transform: translateZ(0);
}

.gallery-orbit-glow {
    /* keeps the original centring, adds layer promotion */
    transform: translate(-50%, -50%) translateZ(0);
}

/* --- 4. Keep card repaints from invalidating their whole section ----------
   `layout` + `style` containment tells the browser that a card's internal
   changes (hover lift, reveal transition, counter tick) cannot affect
   anything outside it, so hovering one card no longer triggers a style and
   layout pass across the whole section. None of these cards has an
   absolutely-positioned descendant or a fixed-position overlay inside it —
   every overlay (lightbox, drawer, modal) is a root-level sibling — so
   becoming a containing block changes no positioning here. */
.event-card,
.gallery-card,
.pillar-card,
.faq-item {
    contain: layout style;
}

/* These three also take `paint`, which lets the browser skip painting the
   subtree entirely while the card is out of view. They already declare
   `overflow: hidden`, so the clip is exactly what was being clipped anyway,
   and each card's own box-shadow is painted by the card rather than a
   descendant, so hover shadows still escape the box.

   `.event-card` is deliberately excluded: it has no background of its own,
   and `.event-badge` / `.event-status-pill` inside it use `backdrop-filter`.
   Paint containment would make the card a new backdrop root, so those pills
   would stop sampling anything painted behind the card — a change we cannot
   rule out visually. The other three are opaque, so their backdrop-filter
   descendants (if any) could only ever have sampled the card itself. */
.gallery-card,
.pillar-card,
.faq-item {
    contain: layout style paint;
}

/* ==========================================================================
   404 Page Directory Styles
   ========================================================================== */
.page-404-main {
    min-height: 80vh;
}
.section-404-directory {
    padding: var(--section-py-sm) 0 var(--section-py);
}
.quick-nav-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 24px;
    margin-top: 36px;
}
.quick-nav-card {
    display: flex;
    flex-direction: column;
    padding: 28px;
    background: var(--surface, #ffffff);
    border: 1px solid var(--border, rgba(0, 0, 0, 0.08));
    border-radius: var(--r-lg, 24px);
    transition: transform 0.28s var(--ease), box-shadow 0.28s var(--ease), border-color 0.28s var(--ease);
    text-decoration: none;
    color: inherit;
    position: relative;
    box-shadow: 0 4px 18px rgba(15, 17, 21, 0.03);
}
.quick-nav-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 16px 36px rgba(0, 0, 0, 0.08);
    border-color: var(--accent, #9E7422);
}
[data-theme="dark"] .quick-nav-card {
    background: #18191D;
    border-color: rgba(255, 255, 255, 0.08);
}
[data-theme="dark"] .quick-nav-card:hover {
    box-shadow: 0 16px 36px rgba(0, 0, 0, 0.45);
    border-color: rgba(255, 255, 255, 0.2);
}
.quick-nav-icon-badge {
    width: 48px;
    height: 48px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
    flex-shrink: 0;
}
.quick-nav-icon-badge svg {
    width: 24px;
    height: 24px;
}
.quick-nav-title {
    font-size: 19px;
    font-weight: 700;
    margin: 0 0 8px 0;
    color: var(--ink);
}
.quick-nav-desc {
    font-size: 14px;
    line-height: 1.6;
    color: var(--ink-soft);
    margin: 0 0 18px 0;
    flex-grow: 1;
}
.quick-nav-link {
    font-size: 13.5px;
    font-weight: 700;
    color: var(--accent, #9E7422);
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

/* ==========================================================================
   Theme switch — instant
   --------------------------------------------------------------------------
   The palette swap is applied in one go, with no cross-fade. The previous
   version put a 240ms colour transition on every container, card, pill,
   button, form control *and* every heading, paragraph, link, span, list
   item and label via `!important`. On this page that is thousands of
   elements all interpolating background-color, border-color and color
   simultaneously — none of which the compositor can take over, so the main
   thread repainted the entire document for a quarter of a second. That is
   the delay and the stutter on toggle.

   `.theme-instant` is on <html> only for the single frame in which the
   theme attribute flips. It suppresses the colour transitions that
   individual components declare for their own hover states, so those do not
   all fire at once off the palette change. One style recalc and one repaint,
   then it is removed. Nothing animates, so nothing can lag.
   ========================================================================== */
:root.theme-instant *,
:root.theme-instant *::before,
:root.theme-instant *::after {
    transition: none !important;
}

/* ==========================================================================
   Single Gallery Item / Collection Styles
   ========================================================================== */
.single-gallery-main {
    background: var(--bg);
}
.single-gallery-header {
    padding: clamp(120px, 14vw, 160px) 0 44px;
    background: radial-gradient(circle at 50% 0%, var(--gold-bg, rgba(228, 118, 60, 0.08)) 0%, transparent 65%), var(--bg);
    border-bottom: 1px solid var(--border-soft);
}
.single-gallery-breadcrumbs {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 20px;
    font-size: 14px;
    font-weight: 500;
}
.single-gallery-breadcrumbs .back-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--ink-soft);
    text-decoration: none;
    transition: color 240ms var(--ease);
}
.single-gallery-breadcrumbs .back-link:hover {
    color: var(--accent);
}
.single-gallery-header .gallery-badge {
    display: inline-flex;
    align-items: center;
    padding: 4px 14px;
    border-radius: var(--r-pill);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    background: var(--accent);
    color: #FFFFFF;
}
.single-gallery-title {
    font-family: var(--serif);
    font-size: clamp(30px, 4vw, 50px);
    font-weight: 400;
    line-height: 1.15;
    color: var(--ink);
    margin: 0 0 24px;
}
.single-gallery-meta-bar {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}
.single-gallery-meta-bar .meta-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    background: var(--card-bg, var(--surface));
    border: 1px solid var(--border-soft);
    border-radius: var(--r-pill);
    font-size: 13.5px;
    color: var(--ink-soft);
}
.single-gallery-meta-bar .meta-icon {
    color: var(--accent);
    display: flex;
    align-items: center;
}
.single-gallery-media-section {
    padding: 40px 0 20px;
}
.single-gallery-featured-image {
    position: relative;
    border-radius: var(--r-card, 16px);
    overflow: hidden;
    max-height: 520px;
    box-shadow: 0 16px 40px rgba(0,0,0,0.1);
    border: 1px solid var(--border-soft);
}
.single-gallery-featured-image .gallery-hero-img {
    width: 100%;
    height: 100%;
    max-height: 520px;
    object-fit: cover;
    display: block;
}
.single-gallery-video-wrapper {
    position: relative;
    width: 100%;
    padding-top: 56.25%;
    border-radius: var(--r-card, 16px);
    overflow: hidden;
    box-shadow: 0 16px 40px rgba(0,0,0,0.15);
    background: #000;
}
.single-gallery-iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: none;
}
.single-gallery-body-section {
    padding: 50px 0 90px;
}
.single-gallery-layout-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 360px;
    gap: 48px;
    align-items: start;
}
.single-gallery-content-col {
    min-width: 0;
}
.single-gallery-content-col .entry-content {
    max-width: 100%;
}
.single-gallery-sidebar-col {
    min-width: 0;
}
.gallery-story-text,
.gallery-lead-text {
    font-size: 17px;
    line-height: 1.8;
    color: var(--ink-soft);
    margin-bottom: 40px;
}
.gallery-collection-block {
    margin-top: 30px;
}
.collection-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 24px;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--border-soft);
}
.collection-heading {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-family: var(--serif);
    font-size: 24px;
    font-weight: 500;
    color: var(--ink);
    margin: 0;
}
.collection-heading svg {
    color: var(--accent);
}
.collection-count {
    font-size: 13.5px;
    font-weight: 600;
    color: var(--ink-soft);
    background: var(--surface);
    padding: 4px 12px;
    border-radius: var(--r-pill);
    border: 1px solid var(--border-soft);
}
.single-gallery-photo-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}
.single-photo-card,
.single-photo-card.gallery-card {
    position: relative;
    border-radius: 14px;
    overflow: hidden;
    height: auto !important;
    max-height: none !important;
    aspect-ratio: 4 / 3 !important;
    cursor: pointer;
    background: var(--surface);
    border: 1px solid var(--border-soft);
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.06);
    transition: transform 0.3s cubic-bezier(0.2, 0.9, 0.3, 1), box-shadow 0.3s ease, border-color 0.3s ease;
}
.single-photo-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.4s ease;
}
.single-photo-card:hover {
    transform: translateY(-4px);
    border-color: var(--accent);
    box-shadow: 0 14px 30px rgba(0, 0, 0, 0.14);
}
.single-photo-card:hover img {
    transform: scale(1.06);
}
.single-photo-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(0,0,0,0) 40%, rgba(0,0,0,0.7) 100%);
    opacity: 0;
    transition: opacity 0.3s ease;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 14px;
}
.single-photo-card:hover .single-photo-overlay {
    opacity: 1;
}
.single-photo-overlay .zoom-icon {
    position: absolute;
    top: 14px;
    right: 14px;
    width: 32px;
    height: 32px;
    background: rgba(255,255,255,0.9);
    color: #111;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}
.single-photo-overlay .photo-caption-tag {
    color: #FFF;
    font-size: 13px;
    font-weight: 500;
    line-height: 1.4;
}

/* Sidebar Action Card */
.gallery-action-card {
    background: var(--card-bg, var(--surface));
    border: 1px solid var(--border-soft);
    border-radius: var(--r-card, 16px);
    padding: 30px 26px;
    box-shadow: 0 12px 32px rgba(0,0,0,0.06);
    position: sticky;
    top: 100px;
}
.gallery-action-card .card-badge-header {
    margin-bottom: 22px;
    padding-bottom: 18px;
    border-bottom: 1px solid var(--border-soft);
}
.gallery-action-card .card-badge-header .badge-tag {
    display: inline-block;
    padding: 3px 12px;
    border-radius: var(--r-pill);
    background: rgba(228, 118, 60, 0.12);
    color: var(--accent);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    margin-bottom: 10px;
}
.gallery-action-card .card-headline {
    font-size: 20px;
    font-weight: 600;
    color: var(--ink);
    margin: 0;
    line-height: 1.35;
}
.gallery-details-list {
    list-style: none;
    padding: 0;
    margin: 0 0 26px 0;
}
.gallery-details-list li {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 11px 0;
    border-bottom: 1px dashed var(--border-soft);
    font-size: 14px;
}
.gallery-details-list .detail-label {
    color: var(--ink-soft);
}
.gallery-details-list .detail-value {
    font-weight: 600;
    color: var(--ink);
}
.gallery-card-cta {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* Related Galleries Section */
.section-related-galleries {
    padding: 60px 0 80px;
    background: var(--surface-alt, rgba(0,0,0,0.02));
    border-top: 1px solid var(--border-soft);
}
.related-galleries-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 28px;
    margin-top: 36px;
}
.related-gallery-card {
    background: var(--card-bg, var(--surface));
    border: 1px solid var(--border-soft);
    border-radius: var(--r-card, 16px);
    overflow: hidden;
    text-decoration: none;
    color: var(--ink);
    box-shadow: 0 4px 18px rgba(0,0,0,0.05);
    transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
    display: flex;
    flex-direction: column;
}
.related-gallery-card:hover {
    transform: translateY(-5px);
    border-color: var(--accent);
    box-shadow: 0 16px 36px rgba(0,0,0,0.12);
}
.related-card-img-wrap {
    position: relative;
    aspect-ratio: 16 / 10;
    overflow: hidden;
}
.related-card-img-wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s ease;
}
.related-gallery-card:hover .related-card-img-wrap img {
    transform: scale(1.06);
}
.related-card-badge {
    position: absolute;
    top: 12px;
    left: 12px;
    background: rgba(0,0,0,0.65);
    backdrop-filter: blur(8px);
    color: #FFF;
    padding: 3px 10px;
    border-radius: var(--r-pill);
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}
.related-card-body {
    padding: 20px;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}
.related-card-title {
    font-size: 17px;
    font-weight: 600;
    line-height: 1.4;
    margin: 0 0 14px 0;
    color: var(--ink);
}
.related-card-link-text {
    margin-top: auto;
    font-size: 13.5px;
    font-weight: 600;
    color: var(--accent);
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: gap 0.2s ease;
}
.related-gallery-card:hover .related-card-link-text {
    gap: 10px;
}

/* Responsive adjustments */
@media (max-width: 1100px) {
    .single-gallery-layout-grid {
        grid-template-columns: minmax(0, 1fr) 320px;
        gap: 32px;
    }
}
@media (max-width: 991px) {
    .single-gallery-layout-grid {
        grid-template-columns: 1fr;
        gap: 40px;
    }
    .related-galleries-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}
@media (max-width: 768px) {
    .single-gallery-photo-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 14px;
    }
}
@media (max-width: 520px) {
    .related-galleries-grid {
        grid-template-columns: 1fr;
    }
    .single-gallery-photo-grid {
        grid-template-columns: 1fr;
        gap: 14px;
    }
}

/* ==========================================================================
   NAVIGATION DROPDOWNS (DESKTOP & MOBILE)
   ========================================================================== */

/* Desktop Header Dropdowns */
.nav-menu .menu-item-has-children {
    position: relative;
}
.nav-menu .menu-item-has-children > a {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding-right: 14px;
}
.nav-menu .menu-item-has-children > a::after {
    content: '';
    display: inline-block;
    width: 6px;
    height: 6px;
    border-right: 1.8px solid currentColor;
    border-bottom: 1.8px solid currentColor;
    transform: rotate(45deg) translateY(-2px);
    transition: transform 240ms var(--ease);
}
.nav-menu .menu-item-has-children:hover > a::after,
.nav-menu .menu-item-has-children:focus-within > a::after {
    transform: rotate(-135deg) translateY(-2px);
}
.nav-menu .menu-item-has-children > .sub-menu {
    position: absolute;
    top: calc(100% + 10px);
    left: 50%;
    transform: translateX(-50%) translateY(8px);
    min-width: 220px;
    padding: 8px;
    background: rgba(255, 255, 255, 0.95);
    -webkit-backdrop-filter: blur(24px) saturate(180%);
    backdrop-filter: blur(24px) saturate(180%);
    border: 1px solid var(--border);
    border-radius: 16px;
    box-shadow: 0 18px 40px -10px rgba(15, 17, 21, 0.16), 0 0 0 1px rgba(255, 255, 255, 0.6) inset;
    list-style: none;
    margin: 0;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 240ms cubic-bezier(0.16, 1, 0.3, 1), transform 240ms cubic-bezier(0.16, 1, 0.3, 1), visibility 240ms;
    z-index: 120;
}
/* Invisible hover bridge */
.nav-menu .menu-item-has-children > .sub-menu::before {
    content: '';
    position: absolute;
    top: -16px;
    left: 0;
    right: 0;
    height: 16px;
}
.nav-menu .menu-item-has-children:hover > .sub-menu,
.nav-menu .menu-item-has-children:focus-within > .sub-menu {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateX(-50%) translateY(0);
}
.nav-menu .sub-menu li {
    margin: 0;
}
.nav-menu .sub-menu a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 14px;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 550;
    color: var(--ink);
    white-space: nowrap;
    transition: background-color 200ms ease, color 200ms ease, transform 200ms ease;
}
.nav-menu .sub-menu a:hover {
    background: var(--bg-soft);
    color: var(--brand);
    transform: translateX(4px);
}
.nav-menu .sub-menu .current-menu-item > a,
.nav-menu .sub-menu .active > a {
    background: rgba(36, 69, 123, 0.08);
    color: var(--brand);
    font-weight: 600;
}

[data-theme="dark"] .nav-menu .menu-item-has-children > .sub-menu {
    background: rgba(20, 24, 32, 0.94);
    border-color: rgba(255, 255, 255, 0.12);
    box-shadow: 0 20px 50px -10px rgba(0, 0, 0, 0.65), 0 0 0 1px rgba(255, 255, 255, 0.08) inset;
}
[data-theme="dark"] .nav-menu .sub-menu a {
    color: #F0F2F7;
}
[data-theme="dark"] .nav-menu .sub-menu a:hover {
    background: rgba(255, 255, 255, 0.08);
    color: var(--accent-soft);
}
[data-theme="dark"] .nav-menu .sub-menu .current-menu-item > a,
[data-theme="dark"] .nav-menu .sub-menu .active > a {
    background: rgba(228, 118, 60, 0.15);
    color: var(--accent-soft);
}

/* Mobile Drawer Sub-Menu */
.mobile-nav-list .menu-item-has-children {
    display: flex;
    flex-direction: column;
}
.mobile-nav-list .menu-item-has-children > a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
}
.mobile-nav-list .menu-item-has-children > a::after {
    content: '';
    display: inline-block;
    width: 8px;
    height: 8px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(45deg);
    margin-right: 8px;
    opacity: 0.65;
    transition: transform 260ms cubic-bezier(0.4, 0, 0.2, 1), opacity 200ms ease;
}
.mobile-nav-list .menu-item-has-children.is-expanded > a::after {
    transform: rotate(-135deg);
    opacity: 1;
}
.mobile-nav-list .sub-menu {
    list-style: none;
    margin: 0;
    padding: 0 0 0 14px;
    border-left: 2px solid var(--border);
    display: none;
    flex-direction: column;
    gap: 4px;
    overflow: hidden;
    transition: all 260ms ease;
}
.mobile-nav-list .menu-item-has-children.is-expanded > .sub-menu {
    display: flex;
    margin: 6px 0 10px 18px;
    padding: 4px 0 4px 14px;
}
.mobile-nav-list .sub-menu a {
    font-size: 16px;
    font-weight: 600;
    padding: 8px 12px;
    border-radius: 8px;
    color: var(--ink-soft);
}
.mobile-nav-list .sub-menu a:hover {
    color: var(--brand);
    background: rgba(255, 255, 255, 0.5);
    transform: translateX(4px);
}
.mobile-nav-list .sub-menu .current-menu-item > a,
.mobile-nav-list .sub-menu .active > a {
    color: var(--brand);
    font-weight: 700;
    background: rgba(36, 69, 123, 0.08);
}
[data-theme="dark"] .mobile-nav-list .sub-menu {
    border-left-color: rgba(255, 255, 255, 0.15);
}
[data-theme="dark"] .mobile-nav-list .sub-menu a {
    color: rgba(255, 255, 255, 0.8);
}
[data-theme="dark"] .mobile-nav-list .sub-menu a:hover {
    color: var(--accent-soft);
    background: rgba(255, 255, 255, 0.08);
}
[data-theme="dark"] .mobile-nav-list .sub-menu .current-menu-item > a,
[data-theme="dark"] .mobile-nav-list .sub-menu .active > a {
    color: var(--accent-soft);
    background: rgba(228, 118, 60, 0.12);
}

/* ==========================================================================
   PUBLICATIONS, MAGAZINES & NEWS STYLES
   ========================================================================== */

/* --- MAGAZINE SPOTLIGHT --- */
.section-magazine-spotlight {
    padding-top: var(--space-16);
    padding-bottom: var(--section-py-sm);
}
.magazine-spotlight-card {
    display: grid;
    grid-template-columns: 360px minmax(0, 1fr);
    gap: 48px;
    align-items: center;
    padding: 36px 40px;
    border-radius: var(--r-xl, 24px);
    background: var(--surface, #FFFFFF);
    border: 1px solid var(--border);
    box-shadow: var(--shadow-lg, 0 20px 45px -10px rgba(15, 17, 21, 0.08));
    position: relative;
    overflow: hidden;
}
.magazine-spotlight-card::before {
    content: '';
    position: absolute;
    top: 0; right: 0;
    width: 380px; height: 380px;
    background: radial-gradient(circle, rgba(36, 69, 123, 0.06) 0%, transparent 70%);
    pointer-events: none;
}
[data-theme="dark"] .magazine-spotlight-card {
    background: rgba(22, 26, 35, 0.85);
    border-color: rgba(255, 255, 255, 0.1);
    box-shadow: 0 24px 60px -15px rgba(0, 0, 0, 0.5);
}
[data-theme="dark"] .magazine-spotlight-card::before {
    background: radial-gradient(circle, rgba(228, 118, 60, 0.08) 0%, transparent 70%);
}

/* 3D Cover in Spotlight */
.spotlight-media-col {
    display: flex;
    justify-content: center;
}
.spotlight-cover-link {
    display: block;
    position: relative;
    perspective: 1200px;
    text-decoration: none;
}
.spotlight-cover-frame {
    position: relative;
    width: 290px;
    aspect-ratio: 3 / 4;
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 
        -10px 14px 28px rgba(15, 17, 21, 0.22),
        -3px 4px 10px rgba(15, 17, 21, 0.15),
        inset 0 0 0 1px rgba(255, 255, 255, 0.25);
    transition: transform 380ms cubic-bezier(0.16, 1, 0.3, 1), box-shadow 380ms cubic-bezier(0.16, 1, 0.3, 1);
    transform: rotateY(-6deg) rotateX(2deg);
}
.spotlight-cover-link:hover .spotlight-cover-frame {
    transform: rotateY(0deg) rotateX(0deg) translateY(-8px) scale(1.02);
    box-shadow: 
        0 24px 45px rgba(15, 17, 21, 0.3),
        0 8px 16px rgba(15, 17, 21, 0.12);
}
.spotlight-cover-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.spotlight-cover-frame .cover-shine {
    position: absolute;
    inset: 0;
    background: linear-gradient(115deg, rgba(255,255,255,0.3) 0%, rgba(255,255,255,0) 45%, rgba(0,0,0,0.18) 100%);
    pointer-events: none;
}
.spotlight-badge {
    position: absolute;
    top: 14px; right: 14px;
    background: var(--brand, #24457B);
    color: #FFFFFF;
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: 0.06em;
    padding: 5px 12px;
    border-radius: var(--r-pill);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
}
.spotlight-overlay-hover {
    position: absolute;
    inset: 0;
    background: rgba(15, 17, 21, 0.55);
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 280ms var(--ease);
}
.spotlight-cover-link:hover .spotlight-overlay-hover {
    opacity: 1;
}
.spotlight-overlay-hover .overlay-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: #FFFFFF;
    color: #0F1115;
    padding: 10px 18px;
    border-radius: var(--r-pill);
    font-size: 13.5px;
    font-weight: 700;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);
}

/* Spotlight Content */
.spotlight-header-meta {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 14px;
}
.badge-accent {
    background: rgba(228, 118, 60, 0.12);
    color: var(--accent, #E4763C);
    border: 1px solid rgba(228, 118, 60, 0.28);
    font-size: 12px;
    font-weight: 700;
    padding: 4px 12px;
    border-radius: var(--r-pill);
    letter-spacing: 0.04em;
}
.spotlight-date {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13.5px;
    font-weight: 500;
    color: var(--ink-soft);
}
.spotlight-title {
    font-family: var(--display);
    font-size: clamp(24px, 2.5vw, 34px);
    font-weight: 800;
    line-height: 1.22;
    letter-spacing: -0.025em;
    color: var(--ink);
    margin: 0 0 14px 0;
}
.spotlight-title a {
    color: inherit;
    text-decoration: none;
    transition: color 200ms ease;
}
.spotlight-title a:hover {
    color: var(--brand);
}
[data-theme="dark"] .spotlight-title a:hover {
    color: var(--accent-soft);
}
.spotlight-excerpt {
    font-size: 16px;
    line-height: 1.65;
    color: var(--ink-soft);
    margin-bottom: 24px;
    max-width: 680px;
}
.spotlight-actions {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
}
.btn-spotlight-download {
    padding: 13px 26px;
    font-size: 15px;
    box-shadow: 0 8px 24px rgba(36, 69, 123, 0.28);
}

/* --- MAGAZINE CARDS GRID --- */
.section-magazine-catalog {
    padding-top: var(--space-16);
    padding-bottom: var(--section-py);
}
.magazine-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 32px;
    margin-top: 48px;
}
.magazine-card {
    display: flex;
    flex-direction: column;
    background: var(--surface, #FFFFFF);
    border-radius: var(--r-xl, 22px);
    border: 1px solid var(--border);
    overflow: hidden;
    box-shadow: var(--shadow-sm, 0 4px 16px rgba(15, 17, 21, 0.05));
    transition: transform 320ms cubic-bezier(0.16, 1, 0.3, 1), box-shadow 320ms cubic-bezier(0.16, 1, 0.3, 1), border-color 320ms ease;
}
.magazine-card:hover {
    transform: translateY(-8px);
    box-shadow: var(--shadow-lg, 0 20px 40px -8px rgba(15, 17, 21, 0.14));
    border-color: rgba(36, 69, 123, 0.3);
}
[data-theme="dark"] .magazine-card {
    background: rgba(24, 28, 38, 0.85);
    border-color: rgba(255, 255, 255, 0.09);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
}
[data-theme="dark"] .magazine-card:hover {
    border-color: var(--accent);
    box-shadow: 0 22px 50px -10px rgba(0, 0, 0, 0.6);
}

/* Magazine Card Media (Book Cover) */
.magazine-card-media {
    padding: 24px 24px 12px;
    display: flex;
    justify-content: center;
    background: linear-gradient(180deg, var(--bg-soft) 0%, transparent 100%);
}
[data-theme="dark"] .magazine-card-media {
    background: linear-gradient(180deg, rgba(255,255,255,0.03) 0%, transparent 100%);
}
.magazine-cover-link {
    display: block;
    width: 100%;
    max-width: 240px;
    text-decoration: none;
}
.magazine-cover-wrapper {
    position: relative;
    width: 100%;
    aspect-ratio: 3 / 4;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 
        -6px 10px 22px rgba(15, 17, 21, 0.2),
        -2px 3px 6px rgba(15, 17, 21, 0.12),
        inset 0 0 0 1px rgba(255, 255, 255, 0.2);
    transition: transform 320ms var(--ease), box-shadow 320ms var(--ease);
}
.magazine-card:hover .magazine-cover-wrapper {
    transform: scale(1.025);
    box-shadow: -8px 16px 32px rgba(15, 17, 21, 0.3);
}
.magazine-cover-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.magazine-book-spine {
    position: absolute;
    left: 0; top: 0; bottom: 0;
    width: 12px;
    background: linear-gradient(90deg, rgba(0,0,0,0.35) 0%, rgba(255,255,255,0.2) 40%, rgba(0,0,0,0.15) 100%);
    pointer-events: none;
}
.magazine-book-glare {
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(255,255,255,0.25) 0%, rgba(255,255,255,0) 50%, rgba(0,0,0,0.2) 100%);
    pointer-events: none;
}
.magazine-card-badge {
    position: absolute;
    top: 10px; right: 10px;
    background: rgba(15, 17, 21, 0.75);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    color: #FFFFFF;
    font-size: 11px;
    font-weight: 700;
    padding: 3px 9px;
    border-radius: var(--r-pill);
    box-shadow: 0 2px 8px rgba(0,0,0,0.3);
}
.magazine-hover-veil {
    position: absolute;
    inset: 0;
    background: rgba(15, 17, 21, 0.6);
    -webkit-backdrop-filter: blur(3px);
    backdrop-filter: blur(3px);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 260ms var(--ease);
}
.magazine-card:hover .magazine-hover-veil {
    opacity: 1;
}
.veil-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: #FFFFFF;
    color: #0F1115;
    padding: 8px 15px;
    border-radius: var(--r-pill);
    font-size: 12.5px;
    font-weight: 700;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.3);
}

/* Card Body */
.magazine-card-body {
    padding: 16px 24px 24px;
    display: flex;
    flex-direction: column;
    flex: 1;
}
.magazine-meta-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--ink-soft);
    margin-bottom: 10px;
}
.magazine-date {
    display: inline-flex;
    align-items: center;
    gap: 5px;
}
.magazine-card-title {
    font-family: var(--display);
    font-size: 17px;
    font-weight: 700;
    line-height: 1.35;
    letter-spacing: -0.015em;
    color: var(--ink);
    margin: 0 0 8px 0;
}
.magazine-card-title a {
    color: inherit;
    text-decoration: none;
    transition: color 200ms ease;
}
.magazine-card-title a:hover {
    color: var(--brand);
}
[data-theme="dark"] .magazine-card-title a:hover {
    color: var(--accent-soft);
}
.magazine-card-excerpt {
    font-size: 13.5px;
    line-height: 1.55;
    color: var(--ink-soft);
    margin-bottom: 18px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Magazine Card Footer Actions */
.magazine-card-footer {
    margin-top: auto;
    display: flex;
    align-items: center;
    gap: 10px;
    padding-top: 14px;
    border-top: 1px solid var(--border);
}
.btn-magazine-download {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex: 1;
    padding: 10px 14px;
    background: var(--ink);
    color: var(--bg);
    border-radius: var(--r-pill);
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    transition: background-color 220ms ease, transform 220ms ease, box-shadow 220ms ease;
    justify-content: center;
}
.btn-magazine-download:hover {
    background: var(--brand);
    color: #FFFFFF;
    transform: translateY(-2px);
    box-shadow: 0 6px 18px rgba(36, 69, 123, 0.25);
}
[data-theme="dark"] .btn-magazine-download {
    background: var(--brand);
    color: #FFFFFF;
}
[data-theme="dark"] .btn-magazine-download:hover {
    background: var(--accent);
}

/* ==========================================================================
   NEWS PAGE STYLES (Cards-Only Grid from 'news' CPT)
   ========================================================================== */

.section-news-grid {
    padding-top: 20px;
    padding-bottom: 70px;
}
.news-cards-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 30px;
    margin-top: 44px;
}
.news-card {
    background: var(--surface, #FFFFFF);
    border-radius: var(--r-xl, 20px);
    border: 1px solid var(--border);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
    display: flex;
    flex-direction: column;
    transition: transform 300ms var(--ease), box-shadow 300ms var(--ease);
}
.news-card:hover {
    transform: translateY(-6px);
    box-shadow: var(--shadow-lg);
}
[data-theme="dark"] .news-card {
    background: rgba(22, 26, 35, 0.85);
    border-color: rgba(255, 255, 255, 0.08);
}
.news-card-media {
    position: relative;
    width: 100%;
    height: 220px;
    overflow: hidden;
}
.news-card-media-link {
    display: block;
    width: 100%;
    height: 100%;
}
.news-card-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 400ms var(--ease);
}
.news-card:hover .news-card-img {
    transform: scale(1.05);
}
.news-card-badge {
    position: absolute;
    top: 14px; left: 14px;
    background: rgba(15, 17, 21, 0.8);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    color: #FFFFFF;
    font-size: 11px;
    font-weight: 700;
    padding: 4px 10px;
    border-radius: var(--r-pill);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
	word-spacing:4px;
}
.news-card-body {
    padding: 22px 24px 26px;
    display: flex;
    flex-direction: column;
    flex: 1;
}
.news-card-meta {
    display: flex;
    align-items: center;
    gap: 14px;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--ink-soft);
    margin-bottom: 10px;
}
.meta-date {
    display: inline-flex;
    align-items: center;
    gap: 5px;
}
.news-card-title {
    font-family: var(--display);
    font-size: 19px;
    font-weight: 700;
    line-height: 1.35;
    color: var(--ink);
    margin: 0 0 10px 0;
}
.news-card-title a {
    color: inherit;
    text-decoration: none;
    transition: color 200ms ease;
}
.news-card-title a:hover {
    color: var(--brand);
}
[data-theme="dark"] .news-card-title a:hover {
    color: var(--accent);
}
.news-card-excerpt {
    font-size: 14px;
    line-height: 1.6;
    color: var(--ink-soft);
    margin-bottom: 18px;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.news-card-footer {
    margin-top: auto;
    padding-top: 14px;
    border-top: 1px solid var(--border);
}
.btn-read-news {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: transparent;
    color: var(--brand);
    font-size: 13.5px;
    font-weight: 700;
    text-decoration: none;
    transition: gap 220ms ease, color 220ms ease;
}
.btn-read-news .btn-icon {
    display: inline-flex;
    align-items: center;
    transition: transform 220ms ease;
}
.btn-read-news:hover {
    gap: 12px;
    color: var(--accent);
}
.btn-read-news:hover .btn-icon {
    transform: translateX(4px);
}
[data-theme="dark"] .btn-read-news {
    color: var(--accent-soft);
}
[data-theme="dark"] .btn-read-news:hover {
    color: #FFFFFF;
}


/* ==========================================================================
   SINGLE NEWS POST — TWO-COLUMN EDITORIAL LAYOUT
   Left: Title, Content, Source Button | Right: Featured Image
   ========================================================================== */
.single-news-main {
    padding-top: calc(var(--header-h) + var(--space-32));
    padding-bottom: var(--space-48);
    background: transparent;
}

.single-news-container {
    max-width: 1240px;
}

/* Top Breadcrumbs / Meta Bar */
.single-news-topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-16);
    padding-bottom: var(--space-16);
    margin-bottom: var(--space-24);
    border-bottom: 1px solid var(--border);
    flex-wrap: wrap;
}
.single-news-back-link {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 13.5px;
    font-weight: 700;
    color: var(--brand);
    text-decoration: none;
    transition: all 200ms ease;
}
.single-news-back-link:hover {
    color: var(--accent);
    transform: translateX(-3px);
}
[data-theme="dark"] .single-news-back-link {
    color: var(--accent-soft);
}
.topbar-meta {
    display: inline-flex;
    align-items: center;
    gap: 12px;
}
.topbar-date {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    font-weight: 600;
    color: var(--ink-soft);
}

/* Two-Column Split Grid */
.single-news-split-layout {
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) minmax(320px, 0.95fr);
    gap: 56px;
    align-items: start;
}

/* Left Column: Title, Content, Source Button */
.single-news-content-col {
    display: flex;
    flex-direction: column;
}

.single-news-headline {
    font-family: var(--display);
    font-size: clamp(28px, 3.4vw, 42px);
    font-weight: 800;
    line-height: 1.24;
    letter-spacing: -0.025em;
    color: var(--ink);
    margin: 0 0 20px 0;
}

.single-news-lead-text {
    font-size: 18.5px;
    line-height: 1.65;
    font-weight: 500;
    color: var(--ink);
    padding-bottom: 24px;
    margin-bottom: 28px;
    border-bottom: 1px solid var(--border);
}

.single-news-rich-text {
    font-size: 16.5px;
    line-height: 1.85;
    color: var(--ink-soft);
    margin-bottom: 36px;
}
.single-news-rich-text p {
    margin-bottom: 20px;
}
.single-news-rich-text blockquote {
    margin: 28px 0;
    padding: 22px 28px;
    border-left: 4px solid var(--brand);
    background: var(--bg-soft);
    border-radius: 0 16px 16px 0;
    font-style: italic;
    font-size: 17.5px;
    line-height: 1.65;
    color: var(--ink);
}
[data-theme="dark"] .single-news-rich-text blockquote {
    border-left-color: var(--accent);
    background: rgba(255, 255, 255, 0.04);
}

/* Official Source Button Card */
.single-news-source-card {
    margin-top: 10px;
    margin-bottom: 32px;
    padding: 28px 32px;
    border-radius: var(--r-xl, 20px);
    background: linear-gradient(135deg, rgba(36, 69, 123, 0.06) 0%, rgba(228, 118, 60, 0.06) 100%);
    border: 1px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    flex-wrap: wrap;
    box-shadow: 0 6px 20px rgba(15, 17, 21, 0.04);
}
[data-theme="dark"] .single-news-source-card {
    background: linear-gradient(135deg, rgba(36, 69, 123, 0.22) 0%, rgba(228, 118, 60, 0.15) 100%);
    border-color: rgba(255, 255, 255, 0.1);
}
.source-card-text {
    flex: 1;
    min-width: 240px;
}
.source-card-eyebrow {
    display: block;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.08em;
    color: var(--accent);
    margin-bottom: 6px;
}
.source-card-title {
    font-family: var(--display);
    font-size: 19px;
    font-weight: 700;
    color: var(--ink);
    margin: 0 0 6px 0;
}
.source-card-desc {
    font-size: 13.5px;
    line-height: 1.55;
    color: var(--ink-soft);
    margin: 0;
}
.source-card-action {
    flex-shrink: 0;
}
.btn-source-action {
    padding: 13px 26px;
    font-size: 14.5px;
    box-shadow: 0 8px 24px rgba(36, 69, 123, 0.25);
}

/* Right Column: Featured Image Sticky */
.single-news-sidebar-col {
    position: relative;
}
.single-news-sticky-media {
    position: sticky;
    top: calc(var(--header-h) + 24px);
    display: flex;
    flex-direction: column;
    gap: 20px;
}
.single-news-image-card {
    position: relative;
    border-radius: var(--r-xl, 22px);
    overflow: hidden;
    box-shadow: var(--shadow-lg, 0 20px 48px -10px rgba(15, 17, 21, 0.16));
    border: 1px solid var(--border);
    background: var(--surface);
}
[data-theme="dark"] .single-news-image-card {
    border-color: rgba(255, 255, 255, 0.1);
    box-shadow: 0 24px 60px -10px rgba(0, 0, 0, 0.6);
}
.news-feature-photo {
    width: 100%;
    height: 380px;
    max-height: 50vw;
    object-fit: cover;
    display: block;
    transition: transform 500ms cubic-bezier(0.16, 1, 0.3, 1);
}
.single-news-image-card:hover .news-feature-photo {
    transform: scale(1.025);
}
.image-floating-badge {
    position: absolute;
    top: 16px; left: 16px;
    background: rgba(15, 17, 21, 0.85);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    color: #FFFFFF;
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: 0.05em;
    padding: 5px 12px;
    border-radius: var(--r-pill);
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.3);
}

.news-media-info-pill {
    padding: 20px 24px;
    border-radius: var(--r-lg, 16px);
    background: var(--surface);
    border: 1px solid var(--border);
    box-shadow: var(--shadow-sm);
    display: flex;
    flex-direction: column;
    gap: 12px;
}
[data-theme="dark"] .news-media-info-pill {
    background: rgba(22, 26, 35, 0.85);
    border-color: rgba(255, 255, 255, 0.08);
}
.info-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    font-size: 13px;
}
.info-label {
    color: var(--ink-soft);
    font-weight: 500;
}
.info-value {
    color: var(--ink);
    font-weight: 700;
}
.info-row-source {
    padding-top: 10px;
    border-top: 1px solid var(--border);
    justify-content: flex-start;
}
.meta-source-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12.5px;
    font-weight: 700;
    color: var(--accent);
    text-decoration: none;
}
.meta-source-link:hover {
    text-decoration: underline;
}

@media (max-width: 991px) {
    .single-news-split-layout {
        grid-template-columns: 1fr;
        gap: 36px;
    }
    .single-news-sidebar-col {
        order: -1;
    }
    .single-news-sticky-media {
        position: static;
    }
    .news-feature-photo {
        height: 320px;
    }
}

/* Media Desk Card */
.section-media-desk {
    padding-bottom: 70px;
}
.media-desk-card {
    display: flex;
    align-items: center;
    gap: 28px;
    padding: 32px 40px;
    border-radius: var(--r-xl);
    background: linear-gradient(135deg, rgba(36, 69, 123, 0.08) 0%, rgba(228, 118, 60, 0.08) 100%);
    border: 1px solid var(--border);
}
[data-theme="dark"] .media-desk-card {
    background: linear-gradient(135deg, rgba(36, 69, 123, 0.25) 0%, rgba(228, 118, 60, 0.15) 100%);
}
.media-desk-icon {
    width: 60px; height: 60px;
    border-radius: 16px;
    background: var(--brand);
    color: #FFFFFF;
    display: grid;
    place-items: center;
    font-size: 26px;
    flex: none;
    box-shadow: 0 8px 20px rgba(36, 69, 123, 0.3);
}
.media-desk-text {
    flex: 1;
}
.desk-title {
    font-family: var(--display);
    font-size: 20px;
    font-weight: 700;
    color: var(--ink);
    margin: 0 0 6px 0;
}
.desk-desc {
    font-size: 14.5px;
    line-height: 1.55;
    color: var(--ink-soft);
    margin: 0;
}

/* ==========================================================================
   PUBLICATIONS HUB STYLES
   ========================================================================== */

.section-publications-hub {
    padding-top: 10px;
    padding-bottom: 80px;
}
.publications-channels-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 36px;
    margin-top: 48px;
}
.pub-channel-card {
    background: var(--surface, #FFFFFF);
    border-radius: var(--r-xl, 24px);
    border: 1px solid var(--border);
    overflow: hidden;
    box-shadow: var(--shadow-md);
    display: flex;
    flex-direction: column;
    transition: transform 320ms var(--ease), box-shadow 320ms var(--ease);
}
.pub-channel-card:hover {
    transform: translateY(-8px);
    box-shadow: var(--shadow-lg);
}
[data-theme="dark"] .pub-channel-card {
    background: rgba(22, 26, 35, 0.85);
    border-color: rgba(255, 255, 255, 0.1);
}
.channel-card-media {
    position: relative;
    width: 100%;
    height: 280px;
    overflow: hidden;
}
.channel-preview-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 500ms var(--ease);
}
.pub-channel-card:hover .channel-preview-img {
    transform: scale(1.04);
}
.channel-badge {
    position: absolute;
    top: 18px; left: 18px;
    background: var(--brand);
    color: #FFFFFF;
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: 0.05em;
    padding: 5px 12px;
    border-radius: var(--r-pill);
}
.card-channel-news .channel-badge {
    background: var(--accent);
}
.channel-card-body {
    padding: 30px 32px 36px;
    display: flex;
    flex-direction: column;
    flex: 1;
}
.channel-icon-pill {
    width: 48px; height: 48px;
    border-radius: 14px;
    background: var(--bg-soft);
    color: var(--brand);
    display: grid;
    place-items: center;
    font-size: 22px;
    margin-bottom: 16px;
    border: 1px solid var(--border);
}
.card-channel-news .channel-icon-pill {
    color: var(--accent);
}
.channel-title {
    font-family: var(--display);
    font-size: 24px;
    font-weight: 800;
    color: var(--ink);
    margin: 0 0 10px 0;
}
.channel-desc {
    font-size: 15px;
    line-height: 1.65;
    color: var(--ink-soft);
    margin-bottom: 20px;
}
.channel-features {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 26px;
}
.ch-feat {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 13.5px;
    font-weight: 600;
    color: var(--ink);
}
.ch-feat svg {
    color: #10B981;
    font-size: 16px;
}
.channel-action {
    margin-top: auto;
}

/* Responsive adjustments */
@media (max-width: 991px) {
    .magazine-spotlight-card {
        grid-template-columns: 1fr;
        gap: 32px;
        padding: 28px 24px;
    }
    .spotlight-cover-frame {
        width: 240px;
        transform: none;
    }
    .publications-channels-grid {
        grid-template-columns: 1fr;
        gap: 28px;
    }
    .media-desk-card {
        flex-direction: column;
        align-items: flex-start;
        gap: 20px;
        padding: 24px;
    }
}
@media (max-width: 640px) {
    .magazine-grid {
        grid-template-columns: 1fr;
    }
    .news-cards-grid {
        grid-template-columns: 1fr;
    }
    .spotlight-actions {
        flex-direction: column;
        align-items: stretch;
    }
    .btn-spotlight-download {
        width: 100%;
        justify-content: center;
    }
}

.section-eyebrow::before,
.section-eyebrow::after {
    content: none !important;
    display: none !important;
}