/* ═══════════════════════════════════════════
   UBWF / ФПБУ — Main stylesheet
   Light theme only · Bilingual · Fully responsive
   Font: Otoiwo Grotesk Extended
   ═══════════════════════════════════════════ */

/* ── Custom fonts ────────────────────────────────────────────────────────── */
@font-face {
    font-family: 'OtoiwoGrotesk';
    src: url('/static/fonts/OtoiwoGroteskExtended-Regular.otf') format('opentype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'OtoiwoGrotesk';
    src: url('/static/fonts/OtoiwoGroteskExtended-ExtBd.otf') format('opentype');
    font-weight: 800;
    font-style: normal;
    font-display: swap;
}

/* ── Variables ──────────────────────────────────────────────────────────── */
:root {
    --brand:        #FF3B00;
    --brand-dark:   #CC2F00;
    --brand-hover:  #FF5020;
    --brand-bg:     #FFF0EB;
    --accent:       #F0D5A8;
    --accent-dark:  #E8C89A;
    --accent-light: #FAF0DF;

    --bg:           #FFFFFF;
    --surface:      #FAFAF8;
    --surface-2:    #FFF8F5;
    --border:       #EAE4DC;
    --border-light: #F3EDE6;

    --text:         #0D0D0C;
    --text-sec:     #4A4540;
    --muted:        #8A8075;
    --muted-light:  #B5AFA8;

    --container:    1600px;
    --gutter:       clamp(16px, 4vw, 60px);
    --section-gap:  clamp(3rem, 9vw, 6rem);
    --section-inner-gap: 1.5rem;

    --fs-900: clamp(2.2rem, 5vw, 4.5rem);
    --fs-800: clamp(1.6rem, 3.5vw, 2.75rem);
    --fs-700: clamp(1.25rem, 2.5vw, 1.875rem);
    --fs-600: clamp(1.1rem, 2vw, 1.375rem);
    --fs-500: clamp(0.9375rem, 1.5vw, 1.0625rem);
    --fs-400: 0.9375rem;
    --fs-300: 0.875rem;
    --fs-200: 0.8125rem;

    --r-sm:   8px;
    --r-md:   12px;
    --r-lg:   16px;
    --r-xl:   20px;
    --r-2xl:  28px;
    --r-full: 9999px;

    --shadow-xs: 0 1px 2px rgba(0,0,0,0.05);
    --shadow-sm: 0 2px 8px rgba(0,0,0,0.06);
    --shadow-md: 0 4px 20px rgba(0,0,0,0.08);
    --shadow-lg: 0 10px 40px rgba(0,0,0,0.1);

    --t-fast: 0.15s;
    --t-med:  0.25s;
    --ease:   cubic-bezier(0.25, 1, 0.5, 1);
}

/* ── Reset ───────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; overflow-x: clip; }
body {
    font-family: 'OtoiwoGrotesk', 'Inter', system-ui, -apple-system, sans-serif;
    font-size: var(--fs-500);
    line-height: 1.65;
    color: var(--text);
    background: var(--bg);
    -webkit-font-smoothing: antialiased;
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
    overflow-x: clip;
}
main  { flex: 1; }
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { cursor: pointer; font: inherit; }
ul, ol { list-style: none; }

/* ── Typography ──────────────────────────────────────────────────────────── */
h1, h2, h3, h4 { font-weight: 800; line-height: 1.2; letter-spacing: -0.02em; }
h1 { font-size: var(--fs-900); }
h2 { font-size: var(--fs-800); }
h3 { font-size: var(--fs-700); }
h4 { font-size: var(--fs-600); }
p  { color: var(--text-sec); }

.section-title { font-size: var(--fs-800); font-weight: 800; letter-spacing: -0.02em; margin-bottom: 0.25rem; }
.section-subtitle { color: var(--muted); font-size: var(--fs-400); margin-bottom: var(--section-inner-gap); }

/* ── Layout ──────────────────────────────────────────────────────────────── */
.container {
    width: 100%;
    max-width: var(--container);
    margin-inline: auto;
    padding-inline: var(--gutter);
}
.section { padding-block: var(--section-gap); }

/* Responsive grids */
.grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.5rem; }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; }
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.25rem; }

@media (max-width: 1100px) { .grid-4 { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 860px)  { .grid-3, .grid-4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 540px)  { .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; } }

/* ── ━━━━━━━━━━━━ HEADER ━━━━━━━━━━━━ ────────────────────────────────────── */
.site-header {
    position: sticky;
    top: 0;
    /* safe-area for iPhone notch/dynamic island */
    padding-top: env(safe-area-inset-top);
    z-index: 200;
    background: rgba(255,255,255,0.97);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-bottom: 1px solid var(--border-light);
    transition: box-shadow var(--t-med) var(--ease), transform 0.3s ease;
}

.site-header.scrolled { box-shadow: 0 2px 16px rgba(0,0,0,0.07); }
.site-header.hdr-hidden { transform: translateY(-100%); pointer-events: none; }

.hdr-inner {
    display: flex;
    align-items: center;
    /* min-height instead of fixed height — won't clip content */
    min-height: 68px;
    padding-block: 10px;
    gap: 1.25rem;
}

/* Logo */
.hdr-logo {
    display: flex;
    align-items: center;
    gap: 9px;
    flex-shrink: 0;
    color: var(--brand);
    transition: opacity var(--t-fast);
}
.hdr-logo:hover { opacity: 0.82; }

.hdr-logo-mark { width: 34px; height: 34px; flex-shrink: 0; object-fit: contain; }

.hdr-logo-text { display: flex; flex-direction: column; line-height: 1.15; }
.hdr-logo-text .ln1 {
    font-size: 0.65rem;
    font-weight: 600;
    color: var(--muted);
    letter-spacing: 0.05em;
    text-transform: uppercase;
    white-space: nowrap;
}
.hdr-logo-text .ln2 {
    font-size: 0.9375rem;
    font-weight: 800;
    color: var(--brand);
    letter-spacing: -0.01em;
    white-space: nowrap;
}

/* Desktop nav */
.hdr-nav {
    display: flex;
    align-items: center;
    gap: 2px;
    margin-left: auto;
    flex-wrap: nowrap;
}

.hdr-pill {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 0.375rem 0.75rem;
    border-radius: var(--r-full);
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--text-sec);
    white-space: nowrap;
    transition: background var(--t-fast), color var(--t-fast);
}
.hdr-pill:hover, .hdr-pill.active { background: var(--brand-bg); color: var(--brand); }
button.hdr-pill { background: none; border: none; cursor: pointer; font-family: inherit; }

/* Dropdown */
.hdr-dropdown { position: relative; }

.hdr-dropdown-menu {
    display: none;
    position: absolute;
    top: 100%;
    padding-top: 6px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 300;
}
.hdr-dropdown-menu-inner {
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    box-shadow: var(--shadow-lg);
    padding: 0.375rem;
    min-width: 180px;
}
.hdr-dropdown.open .hdr-dropdown-menu,
.hdr-dropdown:focus-within .hdr-dropdown-menu { display: block; }

.hdr-dropdown-link {
    display: block;
    padding: 0.45rem 0.7rem;
    border-radius: var(--r-sm);
    font-size: var(--fs-300);
    font-weight: 500;
    color: var(--text-sec);
    transition: background var(--t-fast), color var(--t-fast);
}
.hdr-dropdown-link:hover, .hdr-dropdown-link.active { background: var(--brand-bg); color: var(--brand); }

/* Language switcher */
.lang-switcher {
    display: flex;
    align-items: center;
    border: 1.5px solid var(--border);
    border-radius: var(--r-full);
    overflow: hidden;
    flex-shrink: 0;
    margin-left: 0.5rem;
}
.lang-btn {
    display: flex;
    align-items: center;
    padding: 0.3rem 0.6rem;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    color: var(--muted);
    transition: all var(--t-fast);
}
.lang-btn.active { background: var(--brand); color: #fff; }
.lang-btn:not(.active):hover { background: var(--brand-bg); color: var(--brand); }

/* Mobile toggle */
.mob-menu-btn {
    display: none;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: var(--r-md);
    border: 1.5px solid var(--border);
    background: none;
    color: var(--text);
    flex-shrink: 0;
    transition: all var(--t-fast);
}
.mob-menu-btn:hover { background: var(--brand-bg); border-color: var(--brand); color: var(--brand); }

@media (max-width: 960px) {
    .hdr-nav { display: none; }
    .mob-menu-btn { display: flex; margin-left: auto; }
    .lang-switcher { display: none; }
}

/* ── Mobile nav overlay ──────────────────────────────────────────────────── */
.mob-nav {
    display: none; /* shown via .open class */
    position: fixed;
    top: calc(env(safe-area-inset-top) + 77px); /* below header: 76px hdr-inner + 1px border */
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1000;
    background: var(--bg);
    flex-direction: column;
    overflow: hidden; /* clip nav-body overflow so mob-lang is always visible */
    padding-top: 0.75rem;
    /* no padding-inline here — each child handles its own horizontal padding */
    border-top: 1px solid var(--border-light);
}
.mob-nav.open {
    display: flex;
    animation: mob-nav-in 0.28s cubic-bezier(0.4, 0, 0.2, 1) both;
}
.mob-nav.is-closing {
    animation: mob-nav-out 0.24s cubic-bezier(0.4, 0, 0.2, 1) both;
}
@keyframes mob-nav-in {
    from { opacity: 0; transform: translateY(-10px); }
    to   { opacity: 1; transform: translateY(0); }
}
@keyframes mob-nav-out {
    from { opacity: 1; transform: translateY(0); }
    to   { opacity: 0; transform: translateY(-10px); }
}

/* Hamburger ↔ Close icon toggle */
.mob-icon-close { display: none; }
.mob-menu-btn.is-open .mob-icon-open { display: none; }
.mob-menu-btn.is-open .mob-icon-close { display: flex; }

.mob-nav-body {
    flex: 1 1 0;
    overflow-y: auto;
    min-height: 0;
    padding-inline: var(--gutter); /* moved here from .mob-nav */
    -webkit-overflow-scrolling: touch;
}

.mob-nav-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-bottom: 1rem;
    margin-bottom: 1rem;
    border-bottom: 1px solid var(--border);
    flex-shrink: 0;
}

.mob-nav-close {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: var(--r-md);
    border: 1.5px solid var(--border);
    background: none;
    color: var(--text);
    font-size: 1.25rem;
    line-height: 1;
    transition: all var(--t-fast);
}
.mob-nav-close:hover { background: var(--brand-bg); border-color: var(--brand); color: var(--brand); }

.mob-nav-link {
    display: block;
    padding: 0.8rem 0;
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--text);
    border-bottom: 1px solid var(--border-light);
    transition: color var(--t-fast);
}
.mob-nav-link:hover, .mob-nav-link.active { color: var(--brand); }
.mob-acc-btn.active { color: var(--brand); }

.mob-nav-sub {
    display: block;
    padding: 0.5rem 0 0.5rem 1rem;
    font-size: var(--fs-400);
    font-weight: 500;
    color: var(--text-sec);
    border-bottom: 1px solid var(--border-light);
    transition: color var(--t-fast);
}
.mob-nav-sub:hover, .mob-nav-sub.active { color: var(--brand); }

.mob-acc { border-bottom: 1px solid var(--border-light); }
.mob-acc-btn {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 0.8rem 0;
    background: none;
    border: none;
    cursor: pointer;
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--text);
    text-align: left;
    transition: color var(--t-fast);
}
.mob-acc-btn:hover,
.mob-acc.open .mob-acc-btn { color: var(--brand); }
.mob-acc-icon {
    flex-shrink: 0;
    transition: transform 0.22s ease;
}
.mob-acc.open .mob-acc-icon { transform: rotate(180deg); }
.mob-acc-panel {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.28s ease;
}
.mob-acc.open .mob-acc-panel { max-height: 500px; }

.mob-lang {
    flex-shrink: 0;
    display: flex;
    gap: 0.5rem;
    padding: 0.75rem var(--gutter) calc(env(safe-area-inset-bottom) + 0.75rem);
    background: var(--bg);
    border-top: 1px solid var(--border);
}
.mob-lang a {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.6rem;
    border-radius: var(--r-md);
    border: 1.5px solid var(--border);
    font-size: var(--fs-300);
    font-weight: 700;
    color: var(--muted);
    transition: all var(--t-fast);
}
.mob-lang a.active { background: var(--brand); color: #fff; border-color: var(--brand); }
.mob-lang a:not(.active):hover { background: var(--brand-bg); color: var(--brand); border-color: var(--brand); }

/* ── Hero ────────────────────────────────────────────────────────────────── */
.hero {
    background: var(--brand);
    color: #fff;
    padding-block: clamp(3rem, 10vw, 7rem);
    position: relative;
    overflow: hidden;
}
.hero::after {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at 80% 50%, rgba(255,90,0,0.35) 0%, transparent 65%);
    pointer-events: none;
}

.hero-inner {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: 2rem;
}

.hero-tag {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: rgba(255,255,255,0.16);
    border: 1px solid rgba(255,255,255,0.28);
    border-radius: var(--r-full);
    padding: 0.3rem 0.875rem;
    font-size: var(--fs-200);
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    margin-bottom: 1.25rem;
}

.hero-title {
    font-size: var(--fs-900);
    font-weight: 900;
    color: #fff;
    line-height: 1.08;
    letter-spacing: -0.03em;
    margin-bottom: 1.25rem;
}
.hero-title span { color: var(--accent); }

.hero-desc {
    font-size: var(--fs-600);
    color: rgba(255,255,255,0.82);
    max-width: 500px;
    margin-bottom: 2rem;
    line-height: 1.55;
}

.hero-actions { display: flex; gap: 0.75rem; flex-wrap: wrap; }

.hero-mark { width: clamp(120px, 18vw, 240px); color: rgba(255,255,255,0.15); flex-shrink: 0; }

@media (max-width: 720px) {
    .hero-inner { grid-template-columns: 1fr; }
    .hero-mark  { display: none; }
    .hero-title { font-size: clamp(2rem, 8vw, 3rem); }
}

/* ── Buttons ──────────────────────────────────────────────────────────────── */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    padding: 0.65rem 1.375rem;
    border-radius: var(--r-full);
    font-size: var(--fs-400);
    font-weight: 700;
    border: 2px solid transparent;
    transition: all var(--t-fast) var(--ease);
    white-space: nowrap;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    min-height: 40px;
}
.btn-primary  { background: var(--text);  color: #fff; border-color: var(--text); }
.btn-primary:hover  { background: #000; border-color: #000; transform: translateY(-1px); box-shadow: 0 4px 12px rgba(0,0,0,0.25); }
.btn-outline  { background: transparent; color: #fff; border-color: rgba(255,255,255,0.45); }
.btn-outline:hover  { background: rgba(255,255,255,0.12); border-color: rgba(255,255,255,0.8); }
.btn-brand    { background: var(--brand); color: #fff; border-color: var(--brand); }
.btn-brand:hover    { background: var(--brand-dark); border-color: var(--brand-dark); transform: translateY(-1px); box-shadow: 0 4px 12px rgba(255,59,0,0.3); }
.btn-ghost    { background: transparent; color: var(--brand); border-color: var(--border); }
.btn-ghost:hover    { background: var(--brand-bg); border-color: var(--brand); }
.btn-sm       { padding: 0.4rem 0.875rem; font-size: var(--fs-300); }

/* ── Cards ───────────────────────────────────────────────────────────────── */
.card {
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    overflow: hidden;
    transition: box-shadow var(--t-med) var(--ease), transform var(--t-med) var(--ease), border-color var(--t-med);
}
.card:hover { box-shadow: var(--shadow-md); border-color: var(--border-light); transform: translateY(-2px); }

/* News card */
.news-card { display: flex; flex-direction: column; }

.news-card-img {
    aspect-ratio: 16/9;
    background: var(--accent-light);
    overflow: hidden;
    position: relative;
}
.news-card-img img {
    width: 100%; height: 100%;
    object-fit: cover;
    transition: transform 0.4s var(--ease);
}
.news-card:hover .news-card-img img { transform: scale(1.04); }

.news-card-placeholder {
    width: 100%; height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--accent-light) 0%, var(--brand-bg) 100%);
}
.news-card-placeholder svg { width: 48px; height: 48px; color: var(--brand); opacity: 0.3; }

.news-card-body { padding: 1.125rem; flex: 1; display: flex; flex-direction: column; }

.news-card-meta {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    margin-bottom: 0.5rem;
    font-size: var(--fs-200);
    color: var(--muted);
    font-weight: 500;
}

.news-card-title {
    font-size: var(--fs-400);
    font-weight: 700;
    color: var(--text);
    line-height: 1.4;
    margin-bottom: auto;
    padding-bottom: 0.75rem;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    transition: color var(--t-fast);
}
.news-card:hover .news-card-title { color: var(--brand); }

.news-card-link {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: var(--fs-300);
    font-weight: 600;
    color: var(--brand);
    margin-top: 0.75rem;
    padding-top: 0.75rem;
    border-top: 1px solid var(--border-light);
    transition: gap var(--t-fast);
}
.news-card-link:hover { gap: 8px; }

/* ── Tags ────────────────────────────────────────────────────────────────── */
.tag {
    display: inline-flex;
    align-items: center;
    padding: 0.175rem 0.55rem;
    border-radius: var(--r-full);
    font-size: var(--fs-200);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    white-space: nowrap;
}
.tag-brand  { background: var(--brand-bg); color: var(--brand); }
.tag-accent { background: var(--accent-light); color: var(--text-sec); }
.tag-green  { background: #ECFDF5; color: #059669; }
.tag-blue   { background: #EFF6FF; color: #2563EB; }

/* ── Section head ────────────────────────────────────────────────────────── */
.section-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: var(--section-inner-gap);
    flex-wrap: wrap;
}

/* ── Events ──────────────────────────────────────────────────────────────── */
.event-item {
    display: grid;
    grid-template-columns: 52px 1fr auto;
    align-items: center;
    gap: 1rem;
    padding: 0.875rem 1.125rem;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    transition: border-color var(--t-fast), box-shadow var(--t-fast);
}
.event-item:hover { border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-bg); }

.event-date-box {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 52px;
    background: var(--brand);
    border-radius: var(--r-sm);
    color: #fff;
    flex-shrink: 0;
}
.event-date-box .day { font-size: 1.25rem; font-weight: 900; line-height: 1; }
.event-date-box .mon { font-size: 0.6rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; opacity: 0.85; }

.event-title { font-size: var(--fs-400); font-weight: 700; color: var(--text); margin-bottom: 0.2rem; }
.event-meta  { display: flex; align-items: center; gap: 0.625rem; font-size: var(--fs-200); color: var(--muted); flex-wrap: wrap; }
.event-meta span { display: flex; align-items: center; gap: 4px; }

@media (max-width: 540px) {
    .event-item { grid-template-columns: 46px 1fr; }
    .event-item > .tag { display: none; }
}

/* ── Athlete card ────────────────────────────────────────────────────────── */
.athlete-card {
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    overflow: hidden;
    transition: box-shadow var(--t-med), transform var(--t-med);
}
.athlete-card:hover { box-shadow: var(--shadow-md); transform: translateY(-3px); }

.athlete-photo {
    aspect-ratio: 3/4;
    background: linear-gradient(160deg, var(--accent-light) 0%, var(--brand-bg) 100%);
    position: relative;
    overflow: hidden;
}
.athlete-photo img { width: 100%; height: 100%; object-fit: cover; }

.athlete-photo-placeholder {
    display: flex;
    align-items: flex-end;
    justify-content: center;
    height: 100%;
    padding-bottom: 1rem;
}
.athlete-photo-placeholder svg { width: 60%; color: var(--brand); opacity: 0.22; }

.athlete-body { padding: 0.875rem 1rem 1rem; }
.athlete-name   { font-size: var(--fs-400); font-weight: 800; color: var(--text); margin-bottom: 0.3rem; }
.athlete-weight {
    display: inline-flex;
    font-size: var(--fs-200); font-weight: 700; color: var(--brand);
    background: var(--brand-bg); padding: 0.15rem 0.5rem;
    border-radius: var(--r-full); margin-bottom: 0.3rem;
}
.athlete-region       { font-size: var(--fs-200); color: var(--muted); }
.athlete-achievements { font-size: 0.75rem; color: var(--text-sec); line-height: 1.45; margin-top: 0.375rem; }

/* ── Calendar table ──────────────────────────────────────────────────────── */
.cal-table { width: 100%; border-collapse: collapse; }
.cal-table th {
    padding: 0.75rem 1rem;
    text-align: left;
    font-size: var(--fs-200);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--muted);
    border-bottom: 2px solid var(--border);
    background: var(--surface);
    white-space: nowrap;
}
.cal-table td { padding: 0.875rem 1rem; border-bottom: 1px solid var(--border-light); font-size: var(--fs-400); vertical-align: top; }
.cal-table tr:last-child td { border-bottom: none; }
.cal-table tr:hover td { background: var(--surface-2); }
.cal-dates { font-size: var(--fs-300); font-weight: 700; color: var(--brand); white-space: nowrap; }

@media (max-width: 640px) {
    .cal-hide-mobile { display: none; }
}

/* ── Documents ─────────────────────────────────────────────────────────────── */
.doc-category-title {
    font-size: var(--fs-500); font-weight: 700; color: var(--text);
    margin-bottom: 0.75rem; padding-bottom: 0.5rem;
    border-bottom: 2px solid var(--brand); display: inline-block;
}
/* ── Docs tabs ───────────────────────────────────────────────────────────── */
.docs-tabs {
    display: flex;
    gap: 0;
    margin-bottom: 2.5rem;
    border-bottom: 2px solid var(--border);
}
.docs-tab {
    padding: 0.55rem 1.5rem;
    font-size: var(--fs-400); font-weight: 700;
    color: var(--muted);
    border-bottom: 2px solid transparent;
    margin-bottom: -2px;
    transition: color var(--t-fast), border-color var(--t-fast);
    text-decoration: none;
}
.docs-tab:hover { color: var(--text); }
.docs-tab--active { color: var(--brand); border-bottom-color: var(--brand); }

/* ── Docs list — 2-column grid ──────────────────────────────────────────── */
.docs-list {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.5rem;
}
.docs-list .empty-state { grid-column: 1 / -1; }
@media (max-width: 860px) { .docs-list { grid-template-columns: 1fr; } }

.doc-item {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0.875rem 1rem;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    transition: border-color var(--t-fast), box-shadow var(--t-fast);
}
.doc-item:hover { border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-bg); }
.doc-icon {
    width: 40px; height: 40px; border-radius: var(--r-sm);
    background: var(--brand-bg); color: var(--brand);
    display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.doc-title   { font-size: var(--fs-400); font-weight: 600; color: var(--text); flex: 1; min-width: 0; }
.doc-meta    { font-size: var(--fs-200); color: var(--muted); margin-top: 2px; }
.doc-download {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 0.35rem 0.75rem; border-radius: var(--r-full);
    border: 1px solid var(--border); font-size: var(--fs-300); font-weight: 600;
    color: var(--brand); background: var(--brand-bg);
    transition: all var(--t-fast); white-space: nowrap; flex-shrink: 0;
}
.doc-download:hover { background: var(--brand); color: #fff; border-color: var(--brand); }

@media (max-width: 520px) {
    .doc-item     { flex-wrap: wrap; }
    .doc-download { width: 100%; justify-content: center; }
}

/* ── Gallery ──────────────────────────────────────────────────────────────── */
.gallery-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(280px, 100%), 1fr));
    gap: 0.75rem;
}
.gallery-item { aspect-ratio: 4/3; background: var(--accent-light); border-radius: var(--r-md); overflow: hidden; cursor: pointer; }
.gallery-item img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s var(--ease); }
.gallery-item:hover img { transform: scale(1.06); }

/* ── Article ──────────────────────────────────────────────────────────────── */
.article-body { max-width: 720px; }
.article-body h2 { font-size: var(--fs-700); margin: 2rem 0 0.75rem; }
.article-body h3 { font-size: var(--fs-600); margin: 1.5rem 0 0.5rem; }
.article-body p  { margin-bottom: 1rem; color: var(--text-sec); line-height: 1.75; }
.article-body ul, .article-body ol { padding-left: 1.5rem; margin-bottom: 1rem; color: var(--text-sec); }
.article-body li { margin-bottom: 0.4rem; }
.article-body blockquote {
    border-left: 4px solid var(--brand); margin: 1.5rem 0;
    padding: 1rem 1.5rem; background: var(--brand-bg);
    border-radius: 0 var(--r-md) var(--r-md) 0; font-style: italic; color: var(--text-sec);
}

/* Article layout */
.article-layout { display: grid; grid-template-columns: 1fr 300px; gap: 3rem; align-items: start; }
@media (max-width: 860px) {
    .article-layout { grid-template-columns: 1fr; }
    .article-sidebar { display: none; }
}

/* ── Pagination ─────────────────────────────────────────────────────────── */
.pagination { display: flex; align-items: center; justify-content: center; gap: 0.375rem; margin-top: 3rem; flex-wrap: wrap; }
.page-btn {
    display: flex; align-items: center; justify-content: center;
    width: 38px; height: 38px;
    border-radius: var(--r-sm); border: 1px solid var(--border);
    font-size: var(--fs-300); font-weight: 600; color: var(--text-sec); background: var(--bg);
    transition: all var(--t-fast);
}
.page-btn:hover  { border-color: var(--brand); color: var(--brand); background: var(--brand-bg); }
.page-btn.active { background: var(--brand); color: #fff; border-color: var(--brand); }

/* ── Breadcrumb ─────────────────────────────────────────────────────────── */
.breadcrumb { display: flex; align-items: center; gap: 0.5rem; font-size: var(--fs-300); color: var(--muted); margin-bottom: 1.25rem; flex-wrap: wrap; }
.breadcrumb a { color: var(--muted); }
.breadcrumb a:hover { color: var(--brand); }
.breadcrumb .sep { opacity: 0.4; }
.breadcrumb .cur { color: var(--text-sec); font-weight: 600; }

/* ── Page hero (light) ───────────────────────────────────────────────────── */
.page-hero {
    background: var(--surface-2);
    border-bottom: 1px solid var(--border);
    padding: 2.25rem 0 1.75rem;
    position: relative;
    overflow: hidden;
}
.page-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background: url('/static/uploads/gallery/IMG_9443.JPG') center 30% / cover no-repeat;
    opacity: 0.06;
    z-index: 0;
}
.page-hero .container,
.page-hero > .container { position: relative; z-index: 1; width: 100%; }
.page-hero-tag {
    display: inline-flex; align-items: center; gap: 6px;
    background: var(--brand-bg); color: var(--brand);
    padding: 0.2rem 0.7rem; border-radius: var(--r-full);
    font-size: var(--fs-200); font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em;
    margin-bottom: 0.625rem;
}
.page-hero-title { font-size: var(--fs-800); font-weight: 900; letter-spacing: -0.025em; margin-bottom: 0.4rem; }
.page-hero-desc  { font-size: var(--fs-500); color: var(--text-sec); max-width: 580px; }

/* ── Page hero dark variant (photo bg + dark overlay + light text) ────────── */
.page-hero--dark {
    background: #0D0D0C;
    border-bottom: none;
    padding: clamp(3rem, 8vw, 5rem) 0 clamp(2.5rem, 6vw, 4rem);
    min-height: clamp(360px, 46vh, 520px);
    display: flex;
    align-items: center;
}
.page-hero--dark::before {
    opacity: 0.3;
}
.page-hero--dark::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(10,4,0,0.88) 0%, rgba(10,4,0,0.65) 60%, rgba(26,7,0,0.55) 100%);
    z-index: 0;
    pointer-events: none;
}
.page-hero--dark .page-hero-tag {
    background: rgba(255,59,0,0.18);
    border: 1px solid rgba(255,59,0,0.35);
    color: var(--brand);
}
.page-hero--dark .page-hero-title { color: #fff; }
.page-hero--dark .page-hero-desc  { color: rgba(255,255,255,0.65); }
.page-hero--dark .breadcrumb      { color: rgba(255,255,255,0.35); }
.page-hero--dark .breadcrumb a    { color: rgba(255,255,255,0.4); }
.page-hero--dark .breadcrumb .cur { color: rgba(255,255,255,0.6); }

/* ── Page hero per-page photo overrides ─────────────────────────────────── */
.page-hero--news::before {
    background-image: url('/static/uploads/gallery/IMG_9446.JPG');
    background-position: center 40%;
    opacity: 0.55;
}
.page-hero--news.page-hero--dark::after,
.page-hero--calendar.page-hero--dark::after,
.page-hero--about.page-hero--dark::after,
.page-hero--leadership.page-hero--dark::after,
.page-hero--committees.page-hero--dark::after,
.page-hero--secretariat.page-hero--dark::after,
.page-hero--champions.page-hero--dark::after {
    background: linear-gradient(to bottom,
        rgba(10,4,0,0.72) 0%,
        rgba(10,4,0,0.42) 50%,
        rgba(10,4,0,0.22) 100%
    );
}
.page-hero--calendar::before {
    opacity: 0.55;
}
.page-hero--about::before {
    background-image: url('/static/uploads/gallery/IMG_9967.JPG');
    background-position: center 25%;
    opacity: 0.55;
}
.page-hero--leadership::before {
    background-image: url('/static/uploads/gallery/IMG_9430.JPG');
    background-position: center 40%;
    opacity: 0.55;
}
.page-hero--committees::before {
    background-image: url('/static/uploads/gallery/IMG_9971.JPG');
    background-size: 100% auto;
    background-position: center 40%;
    opacity: 0.55;
}
.page-hero--secretariat::before {
    background-image: url('/static/uploads/gallery/IMG_7324.JPG');
    background-size: cover;
    background-position: center center;
    opacity: 0.55;
}
.page-hero--champions::before {
    background-image: url('/static/uploads/gallery/IMG_7328.JPG');
    background-size: cover;
    background-position: center center;
    opacity: 0.55;
}
.page-hero--gallery::before {
    background-image: url('/static/uploads/gallery/IMG_9976.JPG');
    background-size: cover;
    background-position: center center;
    opacity: 0.55;
}
.page-hero--gallery.page-hero--dark::after {
    background: linear-gradient(to bottom,
        rgba(10,4,0,0.72) 0%,
        rgba(10,4,0,0.42) 50%,
        rgba(10,4,0,0.22) 100%
    );
}
.page-hero--regions::before {
    background-image: url('/static/uploads/gallery/IMG_9968.JPG');
    background-position: center 40%;
    opacity: 0.55;
}
.page-hero--regions.page-hero--dark::after {
    background: linear-gradient(to bottom,
        rgba(10,4,0,0.72) 0%,
        rgba(10,4,0,0.42) 50%,
        rgba(10,4,0,0.22) 100%
    );
}
.page-hero--documents::before {
    background-image: url('/static/uploads/gallery/IMG_9431.JPG');
    background-position: center 70%;
    opacity: 0.55;
}
.page-hero--documents.page-hero--dark::after {
    background: linear-gradient(to bottom,
        rgba(10,4,0,0.72) 0%,
        rgba(10,4,0,0.42) 50%,
        rgba(10,4,0,0.22) 100%
    );
}
.page-hero--antidoping::before {
    background-image: url('/static/uploads/gallery/IMG_9463.JPG');
    background-position: center 40%;
    opacity: 0.55;
}
.page-hero--antidoping.page-hero--dark::after {
    background: linear-gradient(to bottom,
        rgba(10,4,0,0.72) 0%,
        rgba(10,4,0,0.42) 50%,
        rgba(10,4,0,0.22) 100%
    );
}
.page-hero--contacts::before {
    background-image: url('/static/uploads/gallery/IMG_9970.JPG');
    background-position: center 40%;
    opacity: 0.55;
}
.page-hero--contacts.page-hero--dark::after {
    background: linear-gradient(to bottom,
        rgba(10,4,0,0.72) 0%,
        rgba(10,4,0,0.42) 50%,
        rgba(10,4,0,0.22) 100%
    );
}
.social-btn {
    display: flex; align-items: center; gap: 7px;
    padding: 0.45rem 0.875rem;
    border: 1.5px solid var(--border);
    border-radius: var(--r-full);
    font-size: var(--fs-300); font-weight: 600;
    color: var(--text-sec);
    text-decoration: none;
    transition: border-color var(--t-fast), color var(--t-fast);
}
.social-btn:hover { border-color: var(--brand); color: var(--brand); }

/* ── Leaders section (light theme, champion-card style) ──────────────────── */
.leaders-section {
    background: var(--bg);
    padding-block: var(--section-gap);
}
.leaders-section-bg { display: none; }
.ldr-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    overflow: hidden;
    transition: box-shadow var(--t-med), border-color var(--t-med), transform var(--t-med);
}
.ldr-card:hover {
    border-color: var(--brand-bg);
    box-shadow: var(--shadow-md);
    transform: translateY(-2px);
}
.ldr-photo {
    aspect-ratio: 1/1;
    background: linear-gradient(160deg, var(--brand-bg) 0%, var(--surface-2) 100%);
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--brand);
}
.ldr-photo img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
}
.ldr-body { padding: 1rem 1.125rem 1.25rem; }
.ldr-name { font-size: var(--fs-400); font-weight: 800; color: var(--text); margin-bottom: 0.3rem; }
.ldr-role {
    display: inline-flex;
    font-size: var(--fs-200);
    font-weight: 700;
    color: var(--brand);
    background: var(--brand-bg);
    border: 1px solid transparent;
    padding: 0.15rem 0.6rem;
    border-radius: var(--r-full);
    margin-bottom: 0.625rem;
}
.ldr-bio { font-size: var(--fs-300); color: var(--text-sec); line-height: 1.55; }

/* ── About page: fullscreen hero (same overlay system as homepage) ───────── */
.about-hero-section {
    position: relative;
    height: calc(100dvh - 68px);
    min-height: 520px;
    display: flex;
    align-items: flex-end;
    overflow: hidden;
}
/* Reuses .hero-bg-wrap, .hero-bg-img, .hero-overlay-bottom, .hero-overlay-top */
/* Custom red glow blob (positioned differently from homepage) */
.about-hero-glow {
    position: absolute;
    bottom: 8rem; left: 4rem;
    width: 28rem; height: 28rem;
    background: rgba(255,59,0,0.13);
    border-radius: 50%;
    filter: blur(90px);
    z-index: 1;
    pointer-events: none;
}
/* Content block */
.about-hero-content-wrap {
    position: relative;
    z-index: 2;
    width: 100%;
    max-width: var(--container);
    margin-inline: auto;
    padding-inline: var(--gutter);
    padding-bottom: clamp(3rem, 6vw, 5rem);
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
}
.about-hero-breadcrumb       { color: rgba(255,255,255,0.35); }
.about-hero-breadcrumb a     { color: rgba(255,255,255,0.45); }
.about-hero-breadcrumb .cur  { color: rgba(255,255,255,0.65); }
.about-hero-tag {
    background: rgba(255,59,0,0.18) !important;
    border: 1px solid rgba(255,59,0,0.35) !important;
    color: var(--brand) !important;
    width: fit-content;
}
.about-hero-title {
    font-size: var(--fs-800);
    font-weight: 900;
    letter-spacing: -0.025em;
    color: #fff;
    line-height: 1.1;
}
.about-hero-desc {
    font-size: var(--fs-500);
    color: rgba(255,255,255,0.65);
    line-height: 1.65;
}
/* ── About page: who-we-are grid ────────────────────────────────────────── */
.about-who-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
    align-items: center;
}
@media (max-width: 860px) { .about-who-grid { grid-template-columns: 1fr; } }

.about-who-collage {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 210px 210px;
    gap: 0.625rem;
    border-radius: var(--r-xl);
    overflow: hidden;
}
.about-who-photo {
    background-size: cover;
    background-position: center;
}
.about-who-photo-tall { grid-row: 1 / 3; }

/* ── About page: stats dark section ─────────────────────────────────────── */
.about-stats-section {
    position: relative;
    background: #0d0d0c;
    padding-block: clamp(3rem, 7vw, 5rem);
    overflow: hidden;
}
.about-stats-bg {
    position: absolute; inset: 0;
    background: url('/static/uploads/gallery/IMG_9446.JPG') center 40% / cover no-repeat;
    opacity: 0.2;
    z-index: 0;
}
.about-stats-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.25rem;
}
@media (max-width: 860px) { .about-stats-grid { grid-template-columns: repeat(2, 1fr); } }
.about-stat-card {
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: var(--r-xl);
    padding: 2rem 1.5rem;
    text-align: center;
    backdrop-filter: blur(4px);
    transition: background var(--t-med);
}
.about-stat-card:hover { background: rgba(255,255,255,0.1); }
.about-stat-num {
    font-size: clamp(2.25rem, 4vw, 3.25rem);
    font-weight: 900;
    color: #fff;
    letter-spacing: -0.035em;
    line-height: 1;
    margin-bottom: 0.625rem;
}
.about-stat-label {
    font-size: var(--fs-300);
    color: rgba(255,255,255,0.55);
    line-height: 1.4;
}

/* ── About page: mission grid ───────────────────────────────────────────── */
.about-mission-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 5rem;
    align-items: center;
}
@media (max-width: 860px) { .about-mission-grid { grid-template-columns: 1fr; gap: 2.5rem; } }

/* ── Gallery album cards ─────────────────────────────────────────────────── */
.album-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(280px, 100%), 1fr));
    gap: 1.25rem;
}
.album-card {
    display: flex;
    flex-direction: column;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: var(--r-xl);
    overflow: hidden;
    text-decoration: none;
    transition: box-shadow var(--t-med) var(--ease), transform var(--t-med) var(--ease), border-color var(--t-med);
}
.album-card:hover { box-shadow: var(--shadow-md); transform: translateY(-3px); border-color: var(--brand-bg); }
.album-cover {
    aspect-ratio: 4/3;
    background: var(--accent-light);
    overflow: hidden;
    position: relative;
}
.album-cover img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s var(--ease); }
.album-card:hover .album-cover img { transform: scale(1.06); }
.album-cover-count {
    position: absolute;
    bottom: 0.625rem; right: 0.625rem;
    background: rgba(0,0,0,0.65);
    backdrop-filter: blur(8px);
    color: #fff;
    font-size: var(--fs-200);
    font-weight: 700;
    padding: 0.2rem 0.6rem;
    border-radius: var(--r-full);
}
.album-body {
    padding: 1rem 1.125rem 1.125rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
}
.album-name  { font-size: var(--fs-500); font-weight: 800; color: var(--text); }
.album-arrow { color: var(--brand); flex-shrink: 0; transition: transform var(--t-fast); }
.album-card:hover .album-arrow { transform: translateX(4px); }

/* ── Gallery lightbox ────────────────────────────────────────────────────── */
.lightbox-overlay {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 99999;
    background: rgba(0,0,0,0.95);
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 4rem 1rem 2rem;
    box-sizing: border-box;
}
.lightbox-overlay.open { display: flex; }
.lightbox-img-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 1 1 auto;
    min-height: 0;
    width: 100%;
}
.lightbox-img-wrap img {
    max-width: min(90vw, 100%);
    max-height: calc(100vh - 9rem);
    object-fit: contain;
    border-radius: var(--r-md);
    user-select: none;
    display: block;
}
.lightbox-bar {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-top: 1rem;
    flex-shrink: 0;
}
.lightbox-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px; height: 44px;
    border-radius: 50%;
    background: rgba(255,255,255,0.12);
    border: none;
    color: #fff;
    cursor: pointer;
    transition: background var(--t-fast);
    font-size: 1.5rem;
    line-height: 1;
    text-decoration: none;
}
.lightbox-btn:hover { background: rgba(255,255,255,0.22); }
.lightbox-dl-btn { background: var(--brand); }
.lightbox-dl-btn:hover { background: var(--brand-dark); }
.lightbox-counter { font-size: var(--fs-300); color: rgba(255,255,255,0.5); min-width: 60px; text-align: center; }
.lightbox-top-actions {
    position: absolute;
    top: 1rem; right: 1rem;
    display: flex; align-items: center; gap: 0.5rem;
    z-index: 2;
}
.lightbox-close {
    width: 44px; height: 44px;
    border-radius: 50%;
    background: rgba(255,255,255,0.12);
    border: none;
    color: #fff;
    cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    transition: background var(--t-fast);
    flex-shrink: 0;
}
.lightbox-close:hover { background: rgba(255,59,0,0.6); }

/* ── Gallery album download button ───────────────────────────────────────── */
.album-dl-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1.75rem;
    flex-wrap: wrap;
}
.album-dl-bar h1 { font-size: var(--fs-700); font-weight: 900; margin: 0; }
.album-dl-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.65rem 1.375rem;
    background: var(--brand); color: #fff;
    border-radius: var(--r-full);
    font-size: var(--fs-400); font-weight: 700;
    text-decoration: none;
    transition: all var(--t-fast);
    white-space: nowrap;
    flex-shrink: 0;
}
.album-dl-btn:hover { background: var(--brand-dark); transform: translateY(-1px); box-shadow: 0 4px 12px rgba(255,59,0,0.3); }
.album-body-info { display: flex; flex-direction: column; gap: 0.2rem; min-width: 0; flex: 1; }
.album-date {
    display: inline-flex; align-items: center; gap: 0.3rem;
    font-size: var(--fs-200); color: var(--muted); line-height: 1.3;
}

/* ── Two-col page layout ─────────────────────────────────────────────────── */
.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 3.5rem; align-items: center; }
@media (max-width: 768px) { .two-col { grid-template-columns: 1fr; gap: 2rem; } }
@media (max-width: 768px) { .contacts-right { order: -1; } }

.two-col-text { display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; }
@media (max-width: 768px) { .two-col-text { grid-template-columns: 1fr; gap: 2rem; } }

/* ── Stat box ────────────────────────────────────────────────────────────── */
.stat-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; }
@media (max-width: 860px)  { .stat-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 400px)  { .stat-grid { grid-template-columns: 1fr 1fr; gap: 0.75rem; } }

/* ── Footer ──────────────────────────────────────────────────────────────── */
.site-footer {
    background: #0D0D0C;
    color: rgba(255,255,255,0.65);
    padding-block: 3.5rem 2rem;
    /* safe area for iPhone home bar */
    padding-bottom: max(2rem, env(safe-area-inset-bottom));
}
.footer-grid {
    display: grid;
    grid-template-columns: 1.9fr 1fr 1fr 1fr;
    gap: 1.5rem 3.5rem;
    margin-bottom: 2.5rem;
}
@media (max-width: 900px) { .footer-grid { grid-template-columns: 1fr 1fr; gap: 2rem; } }
@media (max-width: 520px) { .footer-grid { grid-template-columns: 1fr; gap: 1.75rem; } }

.footer-logo-mark { width: 48px; height: 48px; margin-bottom: 0.875rem; object-fit: contain; }
.footer-org-name  { font-size: var(--fs-500); font-weight: 800; color: #fff; line-height: 1.35; margin-bottom: 0.625rem; }
.footer-desc      { font-size: var(--fs-300); color: rgba(255,255,255,0.5); line-height: 1.6; }
.footer-col-title { font-size: var(--fs-200); font-weight: 700; color: #fff; text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 0.875rem; }
.footer-link      { display: block; font-size: var(--fs-300); color: rgba(255,255,255,0.5); line-height: 1.25; margin-bottom: 0.65rem; transition: color var(--t-fast); }
.footer-link:hover, .footer-link.active { color: var(--brand); }

.footer-contact-item { display: flex; align-items: flex-start; gap: 0.5rem; font-size: var(--fs-300); color: rgba(255,255,255,0.5); margin-bottom: 0.5rem; }
.footer-contact-item svg { width: 14px; height: 14px; flex-shrink: 0; margin-top: 3px; color: var(--brand); }

.social-links { display: flex; gap: 0.5rem; margin-top: 1rem; flex-wrap: wrap; }
.social-link {
    display: flex; align-items: center; justify-content: center;
    width: 34px; height: 34px; min-width: 34px;
    border-radius: var(--r-md);
    background: rgba(255,255,255,0.07);
    color: rgba(255,255,255,0.55);
    transition: all var(--t-fast);
}
.social-link:hover { background: var(--brand); color: #fff; }

.footer-bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding-top: 1.75rem;
    border-top: 1px solid rgba(255,255,255,0.08);
    font-size: var(--fs-200);
    color: rgba(255,255,255,0.3);
    flex-wrap: wrap;
}

/* ── Form inputs ─────────────────────────────────────────────────────────── */
.form-input, .form-textarea {
    width: 100%;
    padding: 0.65rem 0.875rem;
    border: 1.5px solid var(--border);
    border-radius: var(--r-md);
    font: inherit;
    font-size: var(--fs-400);
    background: var(--bg);
    color: var(--text);
    outline: none;
    transition: border-color var(--t-fast);
    -webkit-appearance: none;
}
.form-input:focus, .form-textarea:focus { border-color: var(--brand); }
.form-textarea { resize: vertical; min-height: 100px; }
.form-label { display: block; font-size: var(--fs-300); font-weight: 600; margin-bottom: 0.3rem; color: var(--text-sec); }

/* ── Transitions ─────────────────────────────────────────────────────────── */
.content-entering { animation: fadeUp 0.28s var(--ease) both; }
@keyframes fadeUp {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ── Utils ───────────────────────────────────────────────────────────────── */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border-width: 0; }
.text-brand  { color: var(--brand); }
.text-muted  { color: var(--muted); }
.text-center { text-align: center; }
.divider { border: none; border-top: 1px solid var(--border); margin-block: 2rem; }
.empty-state { text-align: center; padding: 4rem 1.5rem; color: var(--muted); }
.empty-state svg { width: 48px; height: 48px; margin: 0 auto 1rem; color: var(--muted-light); }
.sticky-sidebar { position: sticky; top: calc(68px + 1.5rem); }

/* ── Touch-friendly tap targets ─────────────────────────────────────────── */
@media (hover: none) {
    .btn, .hdr-pill, .page-btn, .lang-btn { min-height: 44px; }
    .mob-nav-link, .mob-nav-sub { min-height: 48px; }
}

/* ── Achievement marquee ─────────────────────────────────────────────────── */
.marquee-wrap {
    background: var(--text);
    padding-block: 0.875rem;
    overflow: hidden;
    border-top: 1px solid rgba(255,255,255,0.06);
    border-bottom: 1px solid rgba(255,255,255,0.06);
    position: relative;
}
.marquee-wrap::before,
.marquee-wrap::after {
    content: '';
    position: absolute;
    top: 0; bottom: 0;
    width: 5rem;
    z-index: 2;
    pointer-events: none;
}
.marquee-wrap::before { left: 0; background: linear-gradient(to right, var(--text), transparent); }
.marquee-wrap::after  { right: 0; background: linear-gradient(to left,  var(--text), transparent); }
.marquee-track {
    display: flex;
    gap: 0;
    width: max-content;
    animation: marqueeScroll 36s linear infinite;
}
.marquee-wrap:hover .marquee-track { animation-play-state: paused; }
.marquee-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding-inline: 2rem;
    font-size: var(--fs-200);
    font-weight: 700;
    color: rgba(255,255,255,0.75);
    white-space: nowrap;
    text-transform: uppercase;
    letter-spacing: 0.07em;
}
.marquee-item svg { color: var(--brand); flex-shrink: 0; }
.marquee-item .dot {
    width: 3px; height: 3px;
    border-radius: 50%;
    background: rgba(255,255,255,0.2);
    flex-shrink: 0;
    margin-left: 0.5rem;
}
@keyframes marqueeScroll {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}

/* ── Hall of Champions (home feature) ──────────────────────────────────── */
.champs-section {
    background: #0D0D0C;
    padding-block: var(--section-gap);
    position: relative;
    overflow: hidden;
}
.champs-section::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at 30% 50%, rgba(255,59,0,0.12) 0%, transparent 60%);
    pointer-events: none;
}
.champs-header { position: relative; z-index: 1; margin-bottom: var(--section-inner-gap); }
.champs-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: rgba(255,59,0,0.15);
    border: 1px solid rgba(255,59,0,0.3);
    border-radius: var(--r-full);
    padding: 0.25rem 0.75rem;
    font-size: var(--fs-200);
    font-weight: 800;
    color: var(--brand);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    margin-bottom: 0.875rem;
}
.champs-title {
    font-size: var(--fs-800);
    font-weight: 800;
    color: #fff;
    letter-spacing: -0.02em;
    margin-bottom: 0.5rem;
}
.champs-title span { color: var(--accent); }
.champs-sub { font-size: var(--fs-500); color: rgba(255,255,255,0.55); max-width: 540px; }

.champion-card {
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: var(--r-lg);
    overflow: hidden;
    transition: border-color var(--t-med), background var(--t-med), transform var(--t-med);
    display: flex;
    flex-direction: column;
}
.champion-card:hover {
    border-color: rgba(255,59,0,0.4);
    background: rgba(255,59,0,0.06);
    transform: translateY(-2px);
}
.champion-photo {
    aspect-ratio: 1/1;
    background: linear-gradient(160deg, rgba(255,59,0,0.1) 0%, rgba(255,255,255,0.03) 100%);
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    padding-bottom: 1rem;
}
.champion-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.champion-photo svg { width: 55%; color: rgba(255,255,255,0.15); }

.champion-medal {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px; height: 32px;
    border-radius: 50%;
    font-size: 1rem;
    font-weight: 900;
    flex-shrink: 0;
    margin-bottom: 0.625rem;
}
.medal-gold   { background: linear-gradient(135deg, #FFD700, #FFA500); }
.medal-silver { background: linear-gradient(135deg, #C0C0C0, #A0A0A0); }
.medal-bronze { background: linear-gradient(135deg, #CD7F32, #A0522D); }

.champion-body { padding: 1rem 1.125rem 1.125rem; flex: 1; }
.champion-name { font-size: var(--fs-400); font-weight: 800; color: #fff; margin-bottom: 0.25rem; }
.champion-comp { font-size: var(--fs-200); color: var(--brand); font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: 0.2rem; }
.champion-year { font-size: var(--fs-200); color: rgba(255,255,255,0.45); }
.champion-medals { font-size: 0.75rem; color: rgba(255,255,255,0.4); margin-top: 0.375rem; line-height: 1.4; }

/* Champion body: flex-row so medal group/circle is always a visible right column */
.champs-section .champion-body,
.champs-page .champion-body {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 0.75rem;
    padding: 0.875rem 0.875rem 0.875rem 1.125rem;
}
.champion-text { flex: 1; min-width: 0; }

/* Multi-medal group: column of circles on the right side of the body */
.champion-medals-group {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    flex-shrink: 0;
    align-self: flex-start;
    margin-top: 0.125rem;
}
.champion-medals-group .champion-medal {
    width: 28px;
    height: 28px;
    font-size: 0.75rem;
    margin-bottom: 0;
}

/* Standalone medal circle in flex-row body */
.champs-section .champion-body > .champion-medal,
.champs-page .champion-body > .champion-medal {
    flex-shrink: 0;
    align-self: flex-start;
    margin-bottom: 0;
    margin-top: 0.125rem;
}

/* ── Partners section ────────────────────────────────────────────────────── */
.partners-section { background: var(--surface); border-block: 1px solid var(--border); padding-block: clamp(2.5rem,7vw,4.5rem); scroll-margin-top: 72px; }
.partners-grid {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 1.25rem;
    margin-bottom: 2rem;
}
.partner-item {
    display: flex; align-items: center; justify-content: center;
    min-width: 140px; height: 72px;
    background: var(--bg);
    border: 1.5px solid var(--border);
    border-radius: var(--r-md);
    padding: 0.875rem 1.5rem;
    color: var(--muted);
    font-size: var(--fs-300); font-weight: 700;
    letter-spacing: 0.03em;
    transition: all var(--t-med);
    text-transform: uppercase;
}
.partner-item:hover { border-color: var(--brand); color: var(--brand); box-shadow: 0 0 0 3px var(--brand-bg); }
.partner-item img { max-height: 40px; max-width: 120px; object-fit: contain; filter: grayscale(1); opacity: 0.6; transition: all var(--t-med); }
.partner-item:hover img { filter: grayscale(0); opacity: 1; }
.partners-cta { display: flex; align-items: center; justify-content: center; gap: 1rem; flex-wrap: wrap; }

/* ── Hero image variant ──────────────────────────────────────────────────── */
.hero-image-wrap {
    position: relative;
    width: clamp(180px, 22vw, 320px);
    flex-shrink: 0;
}
.hero-image-wrap img {
    width: 100%; border-radius: var(--r-2xl);
    object-fit: cover; aspect-ratio: 3/4;
    display: block;
}
.hero-image-placeholder {
    width: clamp(180px, 22vw, 300px);
    color: rgba(255,255,255,0.14);
    flex-shrink: 0;
}
.hero-logo-badge {
    width: clamp(180px, 22vw, 280px);
    height: auto;
    flex-shrink: 0;
    opacity: 0.92;
    filter: drop-shadow(0 8px 32px rgba(0,0,0,0.2));
}
@media (max-width: 720px) { .hero-logo-badge { display: none; } }

/* ── Leadership cards ────────────────────────────────────────────────────── */
.leader-card {
    display: flex; align-items: flex-start; gap: 1.25rem;
    padding: 1.375rem;
    background: var(--bg); border: 1px solid var(--border); border-radius: var(--r-lg);
    transition: box-shadow var(--t-med), border-color var(--t-med);
}
.leader-card:hover { box-shadow: var(--shadow-md); border-color: var(--brand-bg); }
.leader-photo {
    width: 72px; height: 72px; border-radius: 50%;
    background: linear-gradient(135deg, var(--brand-bg), var(--accent-light));
    flex-shrink: 0; overflow: hidden;
    display: flex; align-items: center; justify-content: center;
    color: var(--brand);
}
.leader-photo img { width: 100%; height: 100%; object-fit: cover; }
.leader-name { font-size: var(--fs-500); font-weight: 800; color: var(--text); margin-bottom: 0.2rem; }
.leader-role { display: inline-flex; font-size: var(--fs-200); font-weight: 700; color: var(--brand); background: var(--brand-bg); padding: 0.15rem 0.5rem; border-radius: var(--r-full); margin-bottom: 0.5rem; }
.leader-bio  { font-size: var(--fs-300); color: var(--text-sec); line-height: 1.55; }

/* ── History timeline (old left-edge, kept for standalone page) ──────────── */
.timeline { position: relative; padding-left: 2rem; }
.timeline::before {
    content: '';
    position: absolute; left: 0; top: 0; bottom: 0;
    width: 2px; background: var(--border);
}
.timeline-item { position: relative; padding-bottom: 2.25rem; }
.timeline-item::before {
    content: '';
    position: absolute; left: -2.44rem; top: 0.375rem;
    width: 14px; height: 14px; border-radius: 50%;
    background: var(--brand); border: 3px solid var(--bg);
    box-shadow: 0 0 0 2px var(--brand);
}
.timeline-year { font-size: var(--fs-300); font-weight: 800; color: var(--brand); text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 0.25rem; }
.timeline-title { font-size: var(--fs-500); font-weight: 800; color: var(--text); margin-bottom: 0.375rem; }
.timeline-desc  { font-size: var(--fs-400); color: var(--text-sec); line-height: 1.6; }

/* ── Center-line alternating timeline (about page) ───────────────────────── */
.tl2 {
    position: relative;
    padding: 1rem 0 2rem;
}
/* Vertical center line */
.tl2::before {
    content: '';
    position: absolute;
    left: 50%; top: 0; bottom: 0;
    width: 2px;
    background: linear-gradient(to bottom, transparent, rgba(180,140,90,0.35) 4%, rgba(180,140,90,0.35) 96%, transparent);
    transform: translateX(-50%);
    z-index: 0;
}
/* Each row: 2-col grid, card left OR right */
.tl2-item {
    position: relative;
    display: grid;
    grid-template-columns: 1fr 1fr;
    margin-bottom: 3rem;
    align-items: start;
}
/* Left item: card in col 1 */
.tl2-card-wrap {
    grid-column: 1;
    padding-right: 3rem;
}
/* Right item: card in col 2 */
.tl2-item--right .tl2-card-wrap {
    grid-column: 2;
    padding-right: 0;
    padding-left: 3rem;
}
/* Dot: always centered on the line via absolute + left:50% */
.tl2-dot-marker {
    position: absolute;
    left: 50%;
    top: 1.625rem;
    transform: translateX(-50%);
    z-index: 2;
    line-height: 0;
}
.tl2-dot-marker span {
    display: block;
    width: 16px; height: 16px;
    border-radius: 50%;
    background: var(--brand);
    border: 3px solid #F6EFE3;
    box-shadow: 0 0 0 2px var(--brand);
}
/* Card — horizontal: photo outer, text inner (closer to timeline line) */
.tl2-card {
    background: #fff;
    border: 1px solid rgba(180,140,90,0.22);
    border-radius: var(--r-xl);
    overflow: hidden;
    box-shadow: 0 2px 12px rgba(0,0,0,0.05);
    display: flex;
    flex-direction: row;        /* left card: photo left, text right */
}
.tl2-item--right .tl2-card {
    flex-direction: row-reverse; /* right card: text left, photo right */
}
.tl2-photo-slot {
    width: 160px;
    height: 213px; /* fixed 3:4 — same crop on every screen width */
    flex-shrink: 0;
    align-self: flex-start;
    background: rgba(180,140,90,0.08);
    border-right: 1.5px dashed rgba(180,140,90,0.3);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    color: rgba(150,110,60,0.6);
    font-size: var(--fs-200);
    overflow: hidden;
}
.tl2-photo-slot img {
    width: 100%; height: 100%;
    object-fit: cover; display: block;
}
.tl2-item--right .tl2-photo-slot {
    border-right: none;
    border-left: 1.5px dashed rgba(180,140,90,0.3);
}
.tl2-card-body { padding: 1.25rem 1.5rem; flex: 1; }
.tl2-card-year {
    display: inline-block;
    font-size: var(--fs-200); font-weight: 800;
    color: var(--brand);
    text-transform: uppercase; letter-spacing: 0.06em;
    margin-bottom: 0.375rem;
}
.tl2-card-title {
    font-size: var(--fs-500); font-weight: 800;
    color: var(--text);
    margin-bottom: 0.375rem; line-height: 1.3;
}
.tl2-card-desc {
    font-size: 12px; color: var(--text-sec); line-height: 1.6;
}
/* Scroll animation — animate card-wrap, dot stays visible */
.tl2.is-ready .tl2-card-wrap {
    opacity: 0;
    transform: translateX(-28px);
    transition: opacity 0.55s ease, transform 0.55s ease;
}
.tl2.is-ready .tl2-item--right .tl2-card-wrap {
    transform: translateX(28px);
}
.tl2.is-ready .tl2-item.is-visible .tl2-card-wrap {
    opacity: 1;
    transform: translateX(0);
}
/* Mobile + tablet: horizontal scrolling timeline */
@media (max-width: 860px) {
    /* disable entrance animation */
    .tl2.is-ready .tl2-card-wrap,
    .tl2.is-ready .tl2-item--right .tl2-card-wrap {
        opacity: 1; transform: none; transition: none;
    }

    /* horizontal scroll container, edge-to-edge */
    /* padding-top: 6px gives room for dot's 2px box-shadow above scroll container */
    .tl2 {
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        align-items: stretch; /* all items same height → equal-height cards */
        gap: 0;               /* gap handled by item margin so ::before lines connect */
        padding: 6px var(--gutter) 1.25rem;
        margin-inline: calc(-1 * var(--gutter));
    }
    .tl2::-webkit-scrollbar { display: none; }

    /* hide global vertical line */
    .tl2::before { display: none; }

    /* each item: fixed-width column, stretch to tallest sibling */
    .tl2-item,
    .tl2-item--right {
        display: flex;
        flex-direction: column;
        align-items: center;
        flex: 0 0 210px;
        padding-left: 0;
        margin-bottom: 0;
        margin-right: 0.75rem; /* gap between items (replaces flex gap) */
        padding-top: calc(16px + 0.75rem); /* space for absolute dot */
        position: relative;
    }
    .tl2-item:last-child,
    .tl2-item--right:last-child { margin-right: 0; }

    /* continuous horizontal line: extend into neighbour's margin so segments touch */
    .tl2-item::before,
    .tl2-item--right::before {
        content: '';
        position: absolute;
        left: 0;
        right: -0.75rem; /* bridge the gap to the next card */
        top: 8px; /* center of 16px dot — aligns line through dot center */
        height: 2px;
        background: rgba(180,140,90,0.35);
        z-index: 0;
    }
    .tl2-item:last-child::before,
    .tl2-item--right:last-child::before {
        right: 0; /* last item: don't extend past the edge */
    }

    /* dot pinned top-center of item */
    .tl2-dot-marker {
        position: absolute;
        top: 0;
        left: 50%;
        transform: translateX(-50%);
        z-index: 2;
        line-height: 0;
    }

    /* card-wrap: fills item height so card can stretch */
    .tl2-card-wrap,
    .tl2-item--right .tl2-card-wrap {
        padding: 0;
        grid-column: unset;
        width: 100%;
        flex: 1;
        display: flex;
        flex-direction: column;
    }

    /* card: vertical — photo top, text bottom; fills card-wrap */
    .tl2-card,
    .tl2-item--right .tl2-card {
        flex-direction: column;
        flex: 1;
    }

    /* photo slot: full width, landscape ratio */
    .tl2-photo-slot,
    .tl2-item--right .tl2-photo-slot {
        width: 100%;
        height: auto;
        aspect-ratio: 3/4;
        align-self: auto;
        border-right: none;
        border-left: none;
        border-bottom: 1.5px dashed rgba(180,140,90,0.3);
    }

    /* card body: flex column — year at top, title+desc pushed to bottom */
    .tl2-card-body {
        flex: 1;
        display: flex;
        flex-direction: column;
        padding: 0.75rem 1rem;
    }
    .tl2-card-year { margin-bottom: 0; }
    .tl2-card-title {
        font-size: var(--fs-400);
        margin-top: auto; /* push title (and desc below it) to bottom */
        padding-top: 0.5rem;
    }
}

/* ── Regions ─────────────────────────────────────────────────────────────── */
.region-list { display: flex; flex-direction: column; gap: 1rem; }
.region-card {
    background: var(--bg); border: 1px solid var(--border); border-radius: var(--r-lg);
    padding: 1.75rem 2.25rem;
    transition: box-shadow var(--t-med), border-color var(--t-med);
    display: grid;
    grid-template-columns: 1fr 220px;
    gap: 1rem 3rem;
    align-items: center;
}
.region-card:hover { box-shadow: var(--shadow-md); border-color: var(--border-light); }
@media (max-width: 680px) { .region-card { grid-template-columns: 1fr; } }

.region-name { font-size: var(--fs-500); font-weight: 800; color: var(--text); margin-bottom: 0.375rem; }
.region-card-meta { display: flex; flex-direction: column; gap: 0.3rem; margin-top: 0.4rem; }
.region-info-row { display: flex; align-items: center; gap: 0.4rem; line-height: 1.4; font-size: var(--fs-300); color: var(--muted); }
.region-info-row > svg { flex-shrink: 0; color: var(--muted-light); }
.region-info-row > a { color: var(--brand); text-decoration: none; transition: opacity var(--t-fast); }
.region-info-row > a:hover { opacity: 0.7; text-decoration: underline; }
.region-role { color: var(--muted-light); font-weight: 600; }
.region-card-contacts {
    display: flex; flex-direction: column; gap: 0.4rem;
    align-items: flex-start; flex-shrink: 0;
}

/* Featured national federation card */
.region-card--featured {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 1.5rem 3rem;
    align-items: center;
    padding: 2rem 2.25rem;
    background: var(--surface);
    border: 1px solid var(--border);
    border-left: 3px solid var(--brand);
    border-radius: var(--r-lg);
    margin-bottom: 2.5rem;
}
.region-featured-tag {
    display: inline-flex; align-items: center; gap: 5px;
    font-size: var(--fs-200); font-weight: 700;
    text-transform: uppercase; letter-spacing: 0.05em;
    color: var(--brand); margin-bottom: 0.5rem;
}
.region-card--featured .region-name { font-size: var(--fs-600); margin-bottom: 0; }
.region-featured-desc {
    font-size: var(--fs-300); color: var(--text-sec);
    max-width: 500px; margin-top: 0.4rem; line-height: 1.55;
}
.region-featured-contacts {
    display: flex; flex-direction: column;
    gap: 0.5rem; align-items: flex-start; flex-shrink: 0; width: 220px;
}
.region-featured-contacts .region-info-row { font-size: var(--fs-300); color: var(--muted); }
@media (max-width: 680px) { .region-card--featured { grid-template-columns: 1fr; } }

/* Regions bottom CTA */
.region-contact-cta {
    background: var(--surface);
    border-top: 1px solid var(--border);
    padding: clamp(3rem, 7vw, 5rem) 0;
    text-align: center;
}
.region-contact-cta-inner {
    max-width: 620px; margin: 0 auto;
    display: flex; flex-direction: column; align-items: center; gap: 1rem;
}
.region-contact-cta-title {
    font-size: var(--fs-700); font-weight: 900;
    letter-spacing: -0.025em; color: var(--text); line-height: 1.15;
}
.region-contact-cta-desc { font-size: var(--fs-400); color: var(--text-sec); line-height: 1.65; }

/* ── Committees ──────────────────────────────────────────────────────────── */
.committee-card {
    background: var(--bg); border: 1px solid var(--border); border-radius: var(--r-lg);
    padding: 1.5rem; transition: box-shadow var(--t-med), border-color var(--t-med);
    position: relative;
}
.committee-card:hover { box-shadow: var(--shadow-md); border-color: var(--brand-bg); }
.committee-name { font-size: var(--fs-600); font-weight: 800; color: var(--text); margin-bottom: 0.25rem; padding-right: 5.5rem; line-height: 1.2; }
.committee-head { font-size: var(--fs-300); color: var(--brand); font-weight: 600; margin-bottom: 0.75rem; }
.committee-desc { font-size: var(--fs-400); color: var(--text-sec); line-height: 1.6; }
.committee-contacts {
    position: absolute;
    top: 1.25rem;
    right: 1.25rem;
    display: flex;
    gap: 0.4rem;
}
.committee-contact-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border-radius: var(--r-full);
    background: var(--brand-bg);
    color: var(--brand);
    text-decoration: none;
    transition: background var(--t-fast), color var(--t-fast);
    flex-shrink: 0;
}
.committee-contact-btn:hover { background: var(--brand); color: #fff; }
.committee-contact-btn svg { width: 14px; height: 14px; }

/* ── Secretariat ─────────────────────────────────────────────────────────── */
.sec-card {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    padding: 1.25rem;
    transition: box-shadow var(--t-med), border-color var(--t-med);
}
.sec-card:hover { box-shadow: var(--shadow-md); border-color: var(--brand-bg); }
.sec-avatar {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: var(--brand-bg);
    color: var(--brand);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    font-size: 1.125rem;
    flex-shrink: 0;
}
.sec-info { flex: 1; min-width: 0; }
.sec-name { font-size: var(--fs-500); font-weight: 800; color: var(--text); margin-bottom: 0.2rem; }
.sec-role { font-size: var(--fs-300); color: var(--brand); font-weight: 600; margin-bottom: 0.625rem; }
.sec-contacts { display: flex; flex-direction: column; gap: 0.3rem; }
.sec-contact-link {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    font-size: var(--fs-300);
    color: var(--text-sec);
    text-decoration: none;
    transition: color var(--t-fast);
}
.sec-contact-link:hover { color: var(--brand); }
.sec-contact-link svg { width: 13px; height: 13px; flex-shrink: 0; opacity: 0.6; }
.sec-contact-link:hover svg { opacity: 1; }

/* ── Year filter pills ───────────────────────────────────────────────────── */
.year-select-wrap {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--text-sec);
}
.year-select {
    appearance: none;
    -webkit-appearance: none;
    border: 1.5px solid var(--border);
    border-radius: var(--r-full);
    padding: 0.375rem 2.25rem 0.375rem 0.875rem;
    font-size: var(--fs-300);
    font-weight: 700;
    color: var(--text);
    background: var(--surface);
    cursor: pointer;
    outline: none;
    transition: border-color var(--t-fast), box-shadow var(--t-fast);
    font-family: inherit;
}
.year-select:hover  { border-color: var(--brand); }
.year-select:focus  { border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-bg); }
.year-select-chevron {
    position: absolute;
    right: 0.625rem;
    pointer-events: none;
    color: var(--muted);
}

/* ── Calendar PDF attachments ────────────────────────────────────────────── */
.cal-attach {
    display: flex; flex-wrap: wrap; gap: 0.375rem; margin-top: 0.375rem;
}
.cal-attach-link {
    display: inline-flex; align-items: center; gap: 3px;
    padding: 0.15rem 0.5rem; border-radius: var(--r-sm);
    border: 1px solid var(--border); font-size: 0.75rem; font-weight: 600;
    color: var(--brand); background: var(--brand-bg);
    transition: all var(--t-fast);
}
.cal-attach-link:hover { background: var(--brand); color: #fff; border-color: var(--brand); }

/* ── Stat grid 2-column variant ─────────────────────────────────────────── */
.stat-grid--2col { grid-template-columns: repeat(2, 1fr) !important; }

/* ── Champion medal numeric badge ────────────────────────────────────────── */
.champion-medal {
    font-size: 0.75rem;
    font-weight: 900;
    font-variant-numeric: tabular-nums;
    line-height: 1;
    letter-spacing: -0.01em;
}

/* ── Mobile nav language flag badge ─────────────────────────────────────── */
.mob-lang-flag {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px; height: 18px;
    border-radius: 4px;
    background: var(--border);
    font-size: 0.65rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    color: var(--text-sec);
    flex-shrink: 0;
}

/* ═══ FULL-BLEED HERO (ukrainejudo-style) ════════════════════════════════ */
@keyframes slow-zoom {
    0%, 100% { transform: scale(1); }
    50%       { transform: scale(1.06); }
}
@keyframes hero-gradient-shift {
    0%, 100% { background-position: 0% 50%; }
    50%       { background-position: 100% 50%; }
}

.hero-fullbleed {
    position: relative;
    height: calc(100dvh - 68px);
    min-height: 520px;
    display: flex;
    align-items: flex-end;
    overflow: hidden;
}

/* Bottom separator line instead of white gradient */
.hero-fullbleed::after {
    content: '';
    position: absolute;
    bottom: 0; left: 0; right: 0;
    height: 0;
    z-index: 3;
    pointer-events: none;
}

/* Background photo */
.hero-bg-wrap {
    position: absolute;
    inset: 0;
    z-index: 0;
}
.hero-bg-img {
    width: 100%; height: 100%;
    object-fit: cover;
    object-position: center 85%;
    display: block;
    animation: slow-zoom 20s ease-in-out infinite;
    will-change: transform;
}

/* Overlays */
.hero-overlay-bottom {
    position: absolute; inset: 0; z-index: 1;
    background: linear-gradient(to top, #1a0700 0%, rgba(26,7,0,0.82) 45%, rgba(26,7,0,0.35) 75%, transparent 100%);
}
.hero-overlay-top {
    position: absolute; inset: 0; z-index: 1;
    background: linear-gradient(to bottom, rgba(10,4,0,0.75) 0%, rgba(10,4,0,0.3) 40%, transparent 100%);
}

/* Ambient glow blob */
.hero-glow-blob {
    position: absolute;
    bottom: 5rem; left: 8rem;
    width: 24rem; height: 24rem;
    background: rgba(255,59,0,0.12);
    border-radius: 50%;
    filter: blur(80px);
    z-index: 1;
    animation: pulse 6s ease-in-out infinite;
    animation-delay: 1s;
}
@keyframes pulse {
    0%, 100% { opacity: 0.7; transform: scale(1); }
    50%       { opacity: 1;   transform: scale(1.08); }
}

/* Content */
.hero-content-wrap {
    position: relative;
    z-index: 2;
    width: 100%;
    max-width: var(--container);
    margin-inline: auto;
    padding-inline: var(--gutter);
    padding-top: clamp(2.5rem, 6vw, 5rem);
    padding-bottom: clamp(2rem, 4vw, 4rem);
}

/* Official site badge */
.hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 0.5rem 1.125rem;
    background: rgba(255,255,255,0.13);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(255,255,255,0.28);
    border-radius: var(--r-full);
    font-size: var(--fs-300);
    font-weight: 600;
    color: #fff;
    margin-bottom: 1rem;
}

/* Federation label row */
.hero-fed-label {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 1rem;
}
.hero-fed-bar {
    width: 4px;
    height: 3rem;
    border-radius: 2px;
    background: linear-gradient(to bottom, var(--brand), var(--accent));
    flex-shrink: 0;
}
.hero-fed-label span {
    font-size: var(--fs-400);
    font-weight: 700;
    color: rgba(255,255,255,0.88);
    text-transform: uppercase;
    letter-spacing: 0.15em;
}

/* Main title */
.hero-main-title {
    font-size: clamp(2.5rem, 5vw, 5rem);
    font-weight: 900;
    color: #fff;
    text-transform: uppercase;
    letter-spacing: -0.02em;
    line-height: 0.95;
    margin-bottom: 1rem;
    filter: drop-shadow(0 4px 24px rgba(0,0,0,0.4));
}
.hero-title-gradient {
    display: block;
    margin-top: 0.2em;
    background: linear-gradient(90deg, var(--brand) 0%, #FF6030 35%, var(--accent) 100%);
    background-size: 200% auto;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: hero-gradient-shift 3s ease infinite;
}

/* Subtitle */
.hero-subtitle {
    font-size: clamp(0.875rem, 1.4vw, 1.0625rem);
    color: rgba(255,255,255,0.78);
    max-width: 580px;
    margin-bottom: 1.75rem;
    line-height: 1.55;
    font-weight: 300;
}
.hero-subtitle strong { font-weight: 700; color: var(--accent); }

/* Buttons */
.hero-btns { display: flex; align-items: center; gap: 0.875rem; margin-bottom: 1.5rem; flex-wrap: wrap; }

.hero-btn-primary {
    display: inline-flex; align-items: center; gap: 0.625rem;
    padding: 0.875rem 1.875rem;
    background: var(--brand); color: #fff;
    font-size: var(--fs-500); font-weight: 700;
    border-radius: var(--r-lg); border: none;
    text-decoration: none;
    transition: all var(--t-med) var(--ease);
    position: relative; overflow: hidden;
}
.hero-btn-primary::after {
    content: '';
    position: absolute; inset: 0;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.18), transparent);
    transform: translateX(-100%);
    transition: transform 0.6s ease;
}
.hero-btn-primary:hover { background: var(--brand-dark); transform: translateY(-2px); box-shadow: 0 8px 24px rgba(255,59,0,0.45); }
.hero-btn-primary:hover::after { transform: translateX(100%); }

.hero-btn-glass {
    display: inline-flex; align-items: center; gap: 0.5rem;
    padding: 0.875rem 1.625rem;
    background: rgba(255,255,255,0.13); color: #fff;
    font-size: var(--fs-500); font-weight: 600;
    border-radius: var(--r-lg);
    border: 1.5px solid rgba(255,255,255,0.35);
    backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
    text-decoration: none;
    transition: all var(--t-med) var(--ease);
}
.hero-btn-glass:hover { background: rgba(255,255,255,0.22); border-color: rgba(255,255,255,0.6); transform: translateY(-2px); }

.hero-btn-border {
    display: inline-flex; align-items: center;
    padding: 0.875rem 1.625rem;
    background: transparent; color: rgba(255,255,255,0.85);
    font-size: var(--fs-500); font-weight: 600;
    border-radius: var(--r-lg);
    border: 1.5px solid rgba(255,255,255,0.25);
    text-decoration: none;
    transition: all var(--t-med) var(--ease);
}
.hero-btn-border:hover { background: rgba(255,255,255,0.1); border-color: rgba(255,255,255,0.5); transform: translateY(-2px); }

/* Stats row */
.hero-stats-row {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    flex-wrap: wrap;
}
.hero-stat-item {
    display: flex; align-items: center; gap: 0.625rem;
    color: rgba(255,255,255,0.65);
}
.hero-stat-val { font-size: var(--fs-500); font-weight: 800; color: rgba(255,255,255,0.9); }
.hero-stat-lbl { font-size: var(--fs-200); font-weight: 500; text-transform: uppercase; letter-spacing: 0.05em; }
.hero-stat-sep { width: 1px; height: 1.25rem; background: rgba(255,255,255,0.2); }

/* ── Enlarged header logo ────────────────────────────────────────────────── */
.hdr-logo-mark { width: 50px !important; height: 50px !important; }
.hdr-inner { min-height: 76px; }

/* ── Hero photo (right side) ─────────────────────────────────────────────── */
.hero-photo-wrap {
    position: relative;
    width: clamp(220px, 28vw, 400px);
    flex-shrink: 0;
    align-self: stretch;
    margin-right: -40px;
}
.hero-athlete-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
    display: block;
    min-height: 320px;
}

/* ── Hero tag with flag ────────────────────────────────────────────────────── */
.hero-tag-flag { font-style: normal; margin-right: 2px; }
.hero-tag-sep  { opacity: 0.5; margin-inline: 4px; }

/* ── Achievement cards section ────────────────────────────────────────────── */
.achievements-section { background: var(--surface); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }

.achievement-card {
    display: flex;
    flex-direction: column;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: var(--r-xl);
    padding: 2rem 1.75rem;
    text-decoration: none;
    transition: all var(--t-med) var(--ease);
    position: relative;
    overflow: hidden;
}
.achievement-card::before {
    content: '';
    position: absolute;
    top: 0; left: 0;
    width: 4px; height: 100%;
    background: var(--brand);
    transform: scaleY(0);
    transform-origin: top;
    transition: transform var(--t-med) var(--ease);
}
.achievement-card:hover { box-shadow: var(--shadow-lg); transform: translateY(-4px); border-color: var(--brand-bg); }
.achievement-card:hover::before { transform: scaleY(1); }

.achievement-num  { font-size: clamp(2.75rem, 4vw, 4rem); font-weight: 900; line-height: 1; color: var(--brand); margin-bottom: 0.25rem; letter-spacing: -0.02em; }
.achievement-cat  { font-size: var(--fs-200); font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted); margin-bottom: 0.875rem; }
.achievement-title { font-size: var(--fs-600); font-weight: 800; color: var(--text); margin-bottom: 0.5rem; line-height: 1.3; }
.achievement-desc  { font-size: var(--fs-400); color: var(--text-sec); line-height: 1.65; flex: 1; margin-bottom: 1.5rem; }
.achievement-link  { display: inline-flex; align-items: center; gap: 5px; font-size: var(--fs-300); font-weight: 700; color: var(--brand); margin-top: auto; transition: gap var(--t-fast); }
.achievement-card:hover .achievement-link { gap: 9px; }

/* ── Partner placeholder cards ─────────────────────────────────────────────── */
.partners-grid-new {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.25rem;
    margin-bottom: 2rem;
}
.partner-card-placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.875rem;
    padding: 2rem 1.5rem;
    background: var(--bg);
    border: 2px dashed var(--border);
    border-radius: var(--r-xl);
    text-align: center;
    transition: border-color var(--t-fast);
}
.partner-card-placeholder:hover { border-color: var(--brand); }
.partner-logo-area {
    width: 100px; height: 60px;
    background: var(--surface-2);
    border-radius: var(--r-md);
    display: flex; align-items: center; justify-content: center;
    color: var(--muted-light);
    font-size: var(--fs-200); font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}
.partner-card-name { font-size: var(--fs-500); font-weight: 800; color: var(--text-sec); }
.partner-card-desc { font-size: var(--fs-300); color: var(--muted); line-height: 1.55; }

/* ── Athlete tabs ──────────────────────────────────────────────────────────── */
.athlete-filters-wrap {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    margin-bottom: 1.75rem;
}
.athlete-filter-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}
.athlete-tab {
    display: inline-flex; align-items: center; gap: 0.35rem;
    padding: 0.4rem 1rem;
    font-size: var(--fs-300); font-weight: 600;
    color: var(--text-sec); text-decoration: none;
    border: 1.5px solid var(--border);
    border-radius: var(--r-full);
    background: var(--bg);
    transition: border-color var(--t-fast), color var(--t-fast), background var(--t-fast);
    white-space: nowrap; user-select: none;
}
.athlete-tab:hover  { border-color: rgba(255,59,0,0.4); color: var(--brand); }
.athlete-tab.active { border-color: var(--brand); color: var(--brand); font-weight: 700; background: rgba(255,59,0,0.05); }

/* ── Sort dropdown ────────────────────────────────────────────────────────── */
.sort-dd {
    position: relative;
    display: inline-block;
}
.sort-dd-btn {
    display: inline-flex; align-items: center; gap: 0.45rem;
    padding: 0.4rem 0.875rem;
    font-size: var(--fs-300); font-weight: 600;
    color: var(--text-sec);
    border: 1.5px solid var(--border);
    border-radius: var(--r-full);
    background: var(--bg);
    cursor: pointer;
    transition: border-color var(--t-fast), color var(--t-fast);
    white-space: nowrap;
}
.sort-dd-btn:hover,
.sort-dd.open .sort-dd-btn { border-color: var(--brand); color: var(--brand); }
.sort-dd-btn svg { flex-shrink: 0; transition: transform 0.2s; }
.sort-dd.open .sort-dd-btn svg:last-child { transform: rotate(180deg); }

.sort-dd-panel {
    display: none;
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    min-width: 220px;
    background: var(--bg);
    border: 1.5px solid var(--border);
    border-radius: var(--r-lg);
    box-shadow: 0 8px 24px rgba(0,0,0,0.1);
    padding: 0.375rem;
    z-index: 50;
}
.sort-dd.open .sort-dd-panel { display: block; }

.sort-radio-row {
    display: flex; align-items: flex-start; gap: 0.65rem;
    padding: 0.55rem 0.75rem;
    border-radius: var(--r-md);
    cursor: pointer;
    font-size: var(--fs-300); font-weight: 500; color: var(--text-sec);
    transition: background var(--t-fast), color var(--t-fast);
}
.sort-radio-row:hover { background: var(--surface); color: var(--text); }
.sort-radio-row.active { color: var(--brand); font-weight: 700; }
.sort-radio-row input[type="radio"] { display: none; }
.sort-radio-dot {
    width: 16px; height: 16px; flex-shrink: 0;
    margin-top: 2px;
    border: 2px solid var(--border);
    border-radius: 50%;
    background: var(--bg);
    transition: border-color var(--t-fast), background var(--t-fast);
    display: flex; align-items: center; justify-content: center;
}
.sort-radio-dot::after {
    content: '';
    width: 7px; height: 7px;
    border-radius: 50%;
    background: var(--brand);
    display: none;
}
.sort-radio-row.active .sort-radio-dot {
    border-color: var(--brand);
}
.sort-radio-row.active .sort-radio-dot::after { display: block; }
.sort-radio-text { display: flex; flex-direction: column; }
.sort-lbl-row { display: flex; align-items: center; gap: 3px; }
.sort-dir-icon { flex-shrink: 0; opacity: 0.5; margin-top: 0px; }
.sort-radio-row.active .sort-dir-icon { opacity: 0.85; }
.sort-radio-desc {
    font-size: 0.675rem;
    font-weight: 400;
    color: var(--muted);
    margin-top: 1px;
    line-height: 1.3;
}
.sort-radio-row.active .sort-radio-desc { color: rgba(255,59,0,0.6); }

/* ── Privacy Policy page ─────────────────────────────────────────────────── */
.privacy-body { display: flex; flex-direction: column; gap: 0; }
.privacy-section { padding-block: 2rem; border-bottom: 1px solid var(--border); }
.privacy-section:last-child { border-bottom: none; }
.privacy-section h2 {
    font-size: var(--fs-500); font-weight: 800; letter-spacing: -0.01em;
    margin-bottom: 1rem; color: var(--text);
}
.privacy-section p { color: var(--text-sec); line-height: 1.75; margin-bottom: 0.875rem; }
.privacy-section p:last-child { margin-bottom: 0; }
.privacy-section ul { color: var(--text-sec); line-height: 1.75; padding-left: 1.25rem; margin-bottom: 0.875rem; }
.privacy-section ul li { margin-bottom: 0.5rem; }
.privacy-note {
    background: var(--surface); border-left: 3px solid var(--brand);
    border-radius: 0 var(--r-md) var(--r-md) 0;
    padding: 0.75rem 1rem; font-size: var(--fs-300);
}
.privacy-card {
    background: var(--surface); border: 1px solid var(--border);
    border-radius: var(--r-lg); overflow: hidden; margin-top: 0.75rem;
}
.privacy-card-row {
    display: flex; gap: 1rem; padding: 0.65rem 1rem;
    border-bottom: 1px solid var(--border); font-size: var(--fs-300);
}
.privacy-card-row:last-child { border-bottom: none; }
.privacy-card-label { min-width: 130px; font-weight: 600; color: var(--text); flex-shrink: 0; }
.privacy-table-wrap { overflow-x: auto; margin-top: 0.75rem; }
.privacy-table {
    width: 100%; border-collapse: collapse; font-size: var(--fs-300);
}
.privacy-table th {
    text-align: left; padding: 0.6rem 0.875rem;
    background: var(--surface); color: var(--text); font-weight: 700;
    border-bottom: 2px solid var(--border);
}
.privacy-table td {
    padding: 0.7rem 0.875rem; vertical-align: top;
    color: var(--text-sec); border-bottom: 1px solid var(--border);
    line-height: 1.55;
}
.privacy-table tr:last-child td { border-bottom: none; }
.privacy-table td:first-child { color: var(--text); font-weight: 500; width: 55%; }
.privacy-ext-link { color: var(--brand); text-decoration: underline; }
.privacy-ext-link:hover { opacity: 0.8; }
.privacy-section code {
    font-family: monospace; font-size: 0.85em;
    background: var(--surface); padding: 0.1em 0.4em;
    border-radius: 4px; color: var(--text);
}

/* ── Federation about section (photo bg) ─────────────────────────────────── */
.fed-about-section {
    position: relative;
    overflow: hidden;
    padding-block: clamp(4rem, 10vw, 7rem);
}
.fed-about-bg {
    position: absolute; inset: 0; z-index: 0;
}
.fed-about-bg img {
    width: 100%; height: 100%;
    object-fit: cover; object-position: center 40%;
    display: block;
}
.fed-about-overlay {
    position: absolute; inset: 0; z-index: 1;
    background: linear-gradient(135deg, rgba(10,4,0,0.92) 0%, rgba(10,4,0,0.78) 50%, rgba(26,7,0,0.7) 100%);
}
.fed-about-content { position: relative; z-index: 2; }
.fed-about-eyebrow {
    font-size: var(--fs-200); font-weight: 800; text-transform: uppercase;
    letter-spacing: 0.1em; color: var(--brand); margin-bottom: 0.75rem;
}
.fed-about-title {
    font-size: clamp(1.75rem, 3.5vw, 3rem);
    font-weight: 900; color: #fff; line-height: 1.1;
    letter-spacing: -0.02em; margin-bottom: 1.25rem;
}
.fed-about-title span { color: var(--accent); display: inline; }
.fed-about-desc {
    font-size: var(--fs-500); color: rgba(255,255,255,0.75);
    max-width: 560px; line-height: 1.7; margin-bottom: 2rem;
    font-weight: 300;
}
.fed-about-stats {
    display: flex; align-items: flex-start; gap: 2.5rem;
    flex-wrap: wrap; padding: 1.5rem 0; border-top: 1px solid rgba(255,255,255,0.12);
}
.fed-stat { display: flex; flex-direction: column; gap: 3px; }
.fed-stat-n { font-size: 1.875rem; font-weight: 900; color: #fff; line-height: 1; }
.fed-stat-l { font-size: var(--fs-200); color: rgba(255,255,255,0.45); text-transform: uppercase; letter-spacing: 0.06em; }

/* ── Medal SVG icons ────────────────────────────────────────────────────────── */
.medal-icon-wrap { display: inline-flex; align-items: center; flex-shrink: 0; }

/* ── Athletes ranking page ──────────────────────────────────────────────────── */
.athletes-hero-page {
    background: var(--text);
    color: #fff;
    padding-block: clamp(3rem, 8vw, 5.5rem);
    position: relative;
    overflow: hidden;
}
.athletes-hero-page::after {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at 20% 60%, rgba(255,59,0,0.18) 0%, transparent 60%);
    pointer-events: none;
}
.athletes-hero-page .container { position: relative; z-index: 1; }
.athletes-hero-eyebrow {
    display: inline-flex; align-items: center; gap: 6px;
    background: rgba(255,59,0,0.15); border: 1px solid rgba(255,59,0,0.3);
    border-radius: var(--r-full); padding: 0.25rem 0.875rem;
    font-size: var(--fs-200); font-weight: 800; color: var(--brand);
    letter-spacing: 0.06em; text-transform: uppercase; margin-bottom: 1rem;
}
.athletes-hero-title { font-size: var(--fs-800); font-weight: 900; color: #fff; margin-bottom: 0.5rem; letter-spacing: -0.02em; }
.athletes-hero-title span { color: var(--accent); }
.athletes-hero-sub   { font-size: var(--fs-500); color: rgba(255,255,255,0.55); max-width: 560px; }
.athletes-stats-bar  { display: flex; gap: 2.5rem; margin-top: 2rem; flex-wrap: wrap; }
.athletes-stat { display: flex; flex-direction: column; gap: 2px; }
.athletes-stat-n { font-size: 1.75rem; font-weight: 900; color: #fff; line-height: 1; }
.athletes-stat-l { font-size: var(--fs-200); color: rgba(255,255,255,0.45); text-transform: uppercase; letter-spacing: 0.05em; }

.filter-bar {
    display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap;
    margin-bottom: 1.5rem; padding: 0.875rem 1.25rem;
    background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg);
}
.filter-label { font-size: var(--fs-200); font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); white-space: nowrap; }
.filter-sep   { width: 1px; height: 18px; background: var(--border); margin-inline: 0.25rem; flex-shrink: 0; }
.filter-pill  {
    display: inline-flex; align-items: center;
    padding: 0.3rem 0.875rem; border-radius: var(--r-full);
    border: 1.5px solid var(--border); font-size: var(--fs-200); font-weight: 600;
    color: var(--text-sec); text-decoration: none; transition: all var(--t-fast); white-space: nowrap;
}
.filter-pill:hover  { border-color: var(--brand); color: var(--brand); background: var(--brand-bg); }
.filter-pill.active { background: var(--brand); color: #fff; border-color: var(--brand); }

.athlete-rank-list { display: flex; flex-direction: column; gap: 0.625rem; }
.athlete-rank-card {
    display: grid; grid-template-columns: 36px 72px 1fr auto;
    align-items: center; gap: 1.25rem;
    padding: 1rem 1.25rem; background: var(--bg);
    border: 1px solid var(--border); border-radius: var(--r-lg);
    transition: all var(--t-fast);
}
.athlete-rank-card:hover { border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-bg); transform: translateX(3px); }

.rank-num  { font-size: 1rem; font-weight: 900; color: var(--muted-light); text-align: center; }
.rank-num.top3 { color: var(--brand); font-size: 1.1rem; }

.rank-photo {
    width: 64px; height: 64px; border-radius: var(--r-md);
    background: linear-gradient(135deg, var(--accent-light), var(--brand-bg));
    overflow: hidden; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center; color: var(--brand);
}
.rank-photo img { width: 100%; height: 100%; object-fit: cover; }
.rank-photo svg { width: 32px; height: 32px; opacity: 0.35; }

.rank-info { display: flex; flex-direction: column; gap: 0.3rem; min-width: 0; }
.rank-name  { font-size: var(--fs-500); font-weight: 800; color: var(--text); }
.rank-meta  { display: flex; align-items: center; gap: 0.625rem; flex-wrap: wrap; font-size: var(--fs-200); color: var(--muted); }
.rank-meta .tag { font-size: 0.7rem; }

.rank-medals { display: flex; align-items: center; gap: 0.4rem; flex-shrink: 0; }
.rank-no-medals { font-size: var(--fs-200); color: var(--muted-light); }

/* Medal circular badges — same visual language as .champion-medal on homepage */
.rank-medal-badge {
    display: flex; align-items: center; justify-content: center;
    width: 28px; height: 28px;
    border-radius: 50%;
    font-size: 0.725rem; font-weight: 900;
    line-height: 1; flex-shrink: 0;
    box-shadow: 0 1px 4px rgba(0,0,0,0.18);
}
.rank-medal-gold   { background: linear-gradient(135deg, #FFD700, #FFA500); color: #5a3800; }
.rank-medal-silver { background: linear-gradient(135deg, #D8D8D8, #A8A8A8); color: #2a2a2a; }
.rank-medal-bronze { background: linear-gradient(135deg, #CD7F32, #A0522D); color: #fff; }

/* ── Athletes pagination ─────────────────────────────────────────────────── */
.pagination { display: flex; align-items: center; justify-content: center; gap: 0.375rem; margin-top: 2.5rem; flex-wrap: wrap; }
.pag-btn {
    display: flex; align-items: center; justify-content: center;
    min-width: 40px; height: 40px; padding-inline: 0.5rem;
    border-radius: var(--r-md); border: 1.5px solid var(--border);
    font-size: var(--fs-300); font-weight: 700; color: var(--text-sec);
    background: var(--bg); text-decoration: none;
    transition: all var(--t-fast); cursor: pointer;
}
.pag-btn:hover     { border-color: var(--brand); color: var(--brand); background: var(--brand-bg); }
.pag-current       { background: var(--brand) !important; color: #fff !important; border-color: var(--brand) !important; cursor: default; }
.pag-arrow         { color: var(--text-sec); }
.pag-disabled      { opacity: 0.35; cursor: default; pointer-events: none; }
.pag-dots          { display: flex; align-items: center; justify-content: center; width: 32px; height: 40px; color: var(--muted); font-size: var(--fs-300); }
.pagination-meta   { text-align: center; margin-top: 0.875rem; font-size: var(--fs-200); color: var(--muted); }

/* ── Calendar card redesign ──────────────────────────────────────────────────── */
.cal-card {
    display: grid; grid-template-columns: 72px 1fr auto;
    align-items: center; gap: 1.5rem;
    padding: 1.25rem 1.5rem; background: var(--bg);
    border: 1px solid var(--border); border-radius: var(--r-lg);
    margin-bottom: 0.75rem; transition: all var(--t-fast);
}
.cal-card:hover { border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-bg); transform: translateX(4px); }
.cal-card.is-featured { border-left: 4px solid var(--brand); background: var(--brand-bg); }

.cal-date-pill {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    width: 64px; height: 68px; border-radius: var(--r-md);
    background: var(--brand); color: #fff; flex-shrink: 0; text-align: center;
}
.cal-date-pill .dd { font-size: 1.625rem; font-weight: 900; line-height: 1; }
.cal-date-pill .mm { font-size: 0.62rem; font-weight: 700; opacity: 0.9; margin-top: 0; white-space: nowrap; }
.cal-date-pill .yy { font-size: 0.58rem; font-weight: 600; opacity: 0.7; margin-top: 0; }
.cal-date-pill.past { background: var(--surface-2); color: var(--text-sec); border: 1px solid var(--border); }
.cal-date-pill.past .dd { color: var(--text-sec); }
.cal-date-pill.past .mm { color: var(--muted); }
.cal-date-pill.past .yy { color: var(--muted-light); }

.cal-card-info  { display: flex; flex-direction: column; gap: 0.35rem; min-width: 0; }
.cal-card-title { font-size: var(--fs-500); font-weight: 800; color: var(--text); }
.cal-card-meta  { display: flex; align-items: center; gap: 0.75rem; font-size: var(--fs-300); color: var(--muted); flex-wrap: wrap; }
.cal-card-meta span { display: flex; align-items: center; gap: 4px; }
.cal-card-cat { margin-top: 0.35rem; }
.cal-card-docs  {
    display: flex; flex-direction: column; align-items: stretch; gap: 0.5rem; flex-shrink: 0;
}
.cal-card-docs .cal-dl-btn { justify-content: center; }

.cal-dl-btn {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 0.5rem 1rem; border-radius: var(--r-full);
    font-size: var(--fs-300); font-weight: 700;
    border: 1.5px solid var(--border); background: var(--bg); color: var(--text-sec);
    text-decoration: none; transition: all var(--t-fast); white-space: nowrap;
}
.cal-dl-btn:hover          { border-color: var(--brand); color: var(--brand); background: var(--brand-bg); }
.cal-dl-btn.primary        { background: var(--brand); color: #fff; border-color: var(--brand); }
.cal-dl-btn.primary:hover  { background: var(--brand-dark); border-color: var(--brand-dark); }

.cal-docs-soon {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 0.4rem 0.875rem; border-radius: var(--r-full);
    border: 1.5px dashed var(--border); background: var(--surface-2);
    font-size: var(--fs-200); font-weight: 600; color: var(--muted);
    white-space: nowrap;
}

/* ── Partners infinite ticker ─────────────────────────────────────────────── */
@keyframes partners-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }

.partners-ticker-wrap {
    overflow: hidden;
    position: relative;
    margin-block: 1.5rem;
    padding-block: 0.5rem;
}
.partners-ticker-wrap::before,
.partners-ticker-wrap::after {
    content: '';
    position: absolute;
    top: 0; bottom: 0;
    width: 5rem;
    z-index: 2;
    pointer-events: none;
}
.partners-ticker-wrap::before { left: 0; background: linear-gradient(to right, var(--surface), transparent); }
.partners-ticker-wrap::after  { right: 0; background: linear-gradient(to left,  var(--surface), transparent); }

.partners-ticker {
    display: flex;
    gap: 1.5rem;
    width: max-content;
    animation: partners-scroll 30s linear infinite;
}
.partners-ticker:hover { animation-play-state: paused; }

.partners-ticker-item {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    min-width: 140px;
    height: 64px;
    background: var(--bg);
    border: 1.5px solid var(--border);
    border-radius: var(--r-md);
    padding: 0.875rem 1.25rem;
    transition: border-color var(--t-fast);
}
.partners-ticker-item:hover { border-color: var(--brand); }
.partners-ticker-item img { max-height: 36px; max-width: 110px; object-fit: contain; filter: grayscale(1); opacity: 0.6; transition: all var(--t-med); }
.partners-ticker-item:hover img { filter: grayscale(0); opacity: 1; }
.partners-ticker-item span { font-size: var(--fs-300); font-weight: 700; color: var(--muted); }
.partner-ticker-placeholder {
    font-size: var(--fs-200); font-weight: 700;
    color: var(--muted-light); letter-spacing: 0.04em;
    text-transform: uppercase;
}

/* ── Facts / Achievement rows ─────────────────────────────────────────────── */
.fact-row {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    padding: 1rem 1.125rem;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    text-decoration: none;
    transition: all var(--t-fast);
}
.fact-row:hover { border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-bg); transform: translateX(3px); }
.fact-row:hover .fact-arrow { stroke: var(--brand); }

.fact-row-num   { font-size: 1.75rem; font-weight: 900; color: var(--brand); line-height: 1; min-width: 3.5rem; flex-shrink: 0; }
.fact-row-label { font-size: var(--fs-400); font-weight: 700; color: var(--text); margin-bottom: 2px; }
.fact-row-desc  { font-size: var(--fs-300); color: var(--muted); line-height: 1.45; }
.fact-arrow     { flex-shrink: 0; transition: stroke var(--t-fast), transform var(--t-fast); }
.fact-row:hover .fact-arrow { transform: translateX(3px); }

/* ── Calendar category pills ──────────────────────────────────────────────── */
.cal-cat-pill {
    display: inline-flex; align-items: center;
    padding: 0.3rem 0.875rem; border-radius: var(--r-full);
    border: 1.5px solid var(--border); font-size: var(--fs-300); font-weight: 600;
    color: var(--text-sec); text-decoration: none; transition: all var(--t-fast); white-space: nowrap;
    background: var(--bg);
}
.cal-cat-pill:hover  { border-color: var(--brand); color: var(--brand); background: var(--brand-bg); }
.cal-cat-pill.active { background: var(--brand); color: #fff; border-color: var(--brand); }

/* ── Section eyebrow label ────────────────────────────────────────────────── */
.section-eyebrow {
    display: inline-flex; align-items: center; gap: 6px;
    font-size: var(--fs-200); font-weight: 800; text-transform: uppercase;
    letter-spacing: 0.1em; color: var(--brand); margin-bottom: 0.375rem;
}

/* ── Google Fonts removed — using local Otoiwo only ─────────────────────── */

/* ══ Benefit Cards section ══════════════════════════════════════════════ */
.benefit-cards-section { background: var(--surface); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.benefit-cards-sub {
    font-size: var(--fs-500); color: var(--text-sec); max-width: 640px;
    line-height: 1.7; margin-bottom: var(--section-inner-gap);
}
.benefit-cards-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.25rem;
}
@media (max-width: 1100px) { .benefit-cards-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px)  { .benefit-cards-grid { grid-template-columns: 1fr; } }

.benefit-card {
    display: flex; flex-direction: column;
    background: var(--bg); border: 1.5px solid var(--border);
    border-radius: var(--r-xl); padding: 1.25rem 1.25rem;
    transition: all var(--t-med) var(--ease);
    position: relative; overflow: hidden;
}
.benefit-card::after {
    content: ''; position: absolute; bottom: 0; left: 0; right: 0;
    height: 3px; background: var(--brand);
    transform: scaleX(0); transform-origin: left;
    transition: transform var(--t-med) var(--ease);
}
.benefit-card:hover { box-shadow: var(--shadow-lg); transform: translateY(-4px); border-color: var(--brand-bg); }
.benefit-card:hover::after { transform: scaleX(1); }

.benefit-card-icon {
    display: flex; align-items: center; justify-content: center;
    width: 36px; height: 36px; border-radius: var(--r-md);
    background: var(--brand-bg); color: var(--brand);
    margin-bottom: 0.875rem; flex-shrink: 0;
}
.benefit-card-eyebrow {
    font-size: var(--fs-200); font-weight: 800; text-transform: uppercase;
    letter-spacing: 0.08em; color: var(--brand); margin-bottom: 0.25rem;
}
.benefit-card-title {
    font-size: 1rem; font-weight: 800; color: var(--text);
    line-height: 1.25; margin-bottom: 0.625rem;
}
.benefit-card-desc {
    font-size: var(--fs-300); color: var(--text-sec);
    line-height: 1.6; flex: 1; margin-bottom: 1rem;
}
.benefit-card-link {
    display: inline-flex; align-items: center; gap: 4px;
    font-size: var(--fs-300); font-weight: 700; color: var(--brand);
    text-decoration: none; transition: gap var(--t-fast); margin-top: auto;
    white-space: nowrap;
}
.benefit-card:hover .benefit-card-link { gap: 8px; }
@media (max-width: 1100px) and (min-width: 561px) {
    .benefit-card-link { font-size: 0.75rem; }
}

/* ══ Asymmetric News Grid ════════════════════════════════════════════════ */
.news-asymmetric {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.25rem;
    align-items: stretch;
}
@media (max-width: 860px) { .news-asymmetric { grid-template-columns: 1fr; } }

.news-card-big {
    display: flex; flex-direction: column;
    border-radius: var(--r-xl); overflow: hidden;
    background: var(--bg); border: 1px solid var(--border);
    text-decoration: none; transition: all var(--t-med) var(--ease);
}
.news-card-big:hover { box-shadow: var(--shadow-lg); transform: translateY(-3px); border-color: var(--brand-bg); }
.news-card-big-img {
    height: 280px; overflow: hidden; flex-shrink: 0;
    background: var(--surface); position: relative;
}
.news-card-big-img img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s ease; display: block; }
.news-card-big:hover .news-card-big-img img { transform: scale(1.04); }
.news-card-big-body { padding: 1.5rem; flex: 1; display: flex; flex-direction: column; }
.news-card-big-title {
    font-size: var(--fs-600); font-weight: 800; color: var(--text);
    line-height: 1.3; flex: 1;
}

.news-small-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    gap: 1.25rem;
}
@media (max-width: 560px) { .news-small-grid { grid-template-columns: 1fr; } }

/* ══ About 2-Column section ══════════════════════════════════════════════ */
.about-2col-section { background: var(--bg); }
.about-2col-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 5rem;
    align-items: stretch;
}
@media (max-width: 860px) { .about-2col-grid { grid-template-columns: 1fr; gap: 3rem; } }

.about-2col-title {
    font-size: clamp(1.75rem, 3vw, 2.5rem);
    font-weight: 900; color: var(--text); line-height: 1.15;
    letter-spacing: -0.02em; margin: 0.75rem 0 1.25rem;
}
.about-2col-title span { color: var(--brand); }
.about-2col-desc {
    font-size: var(--fs-400); color: var(--text-sec); line-height: 1.7;
}
.about-2col-stats {
    display: flex;
    gap: 2rem;
    flex-wrap: wrap;
    padding-top: 1.5rem;
    border-top: 1px solid var(--border);
    width: 100%;
    justify-content: space-between;
}
.about-stat { display: flex; flex-direction: column; gap: 3px; }
.about-stat-n { font-size: 1.875rem; font-weight: 900; color: var(--brand); line-height: 1; }
.about-stat-l { font-size: var(--fs-200); color: var(--muted); text-transform: uppercase; letter-spacing: 0.06em; }

.about-2col-content {
    display: flex;
    flex-direction: column;
}
.about-2col-logo-side {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 2rem;
}
.about-logo-center {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}
.about-logo-img {
    width: 100%;
    max-width: 380px;
    height: auto;
    display: block;
}
@media (max-width: 860px) {
    .about-logo-center { display: none; }
    .about-2col-logo-side { flex-direction: row; gap: 0; }
    .about-2col-stats {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        padding-top: 0;
        border-top: none;
        gap: 0;
        flex-wrap: nowrap;
    }
    .about-stat {
        position: relative;
        padding: 1.25rem 1rem;
        justify-content: center;
    }
    .about-stat::after {
        content: '';
        position: absolute;
        right: 0; top: 50%;
        transform: translateY(-50%);
        width: 1px; height: 50%;
        background: var(--border);
    }
    .about-stat:last-child::after { display: none; }
}
@media (max-width: 480px) {
    .about-2col-stats { grid-template-columns: repeat(2, 1fr); }
    .about-stat::after { display: block; }
    .about-stat:nth-child(2)::after  { display: none; }
    .about-stat:nth-child(4)::after  { display: none; }
    .about-stat:nth-child(3),
    .about-stat:nth-child(4) { border-top: 1px solid var(--border); }
}

/* ══ Philosophy section ══════════════════════════════════════════════════ */
.philosophy-section {
    position: relative;
    background: #0d0d0d; color: #fff;
    padding-block: clamp(3.5rem, 8vw, 6rem);
    overflow: hidden;
}
.philosophy-bg {
    position: absolute; inset: 0;
    background: url('/static/uploads/gallery/IMG_8813.JPG') center/cover no-repeat;
    opacity: 0.18;
    z-index: 0;
}
.philosophy-title {
    font-size: clamp(1.75rem, 3vw, 2.5rem);
    font-weight: 900; color: #fff; letter-spacing: -0.02em;
    margin-top: 0.5rem;
}
.philosophy-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
    align-items: stretch;
}
@media (max-width: 860px) { .philosophy-grid { grid-template-columns: 1fr; } }

.philosophy-card {
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: var(--r-xl); padding: 2rem 1.75rem;
    transition: background var(--t-med);
    display: flex; flex-direction: column;
}
.philosophy-card:hover { background: rgba(255,255,255,0.08); }
.philosophy-icon {
    width: 46px; height: 46px;
    border-radius: 12px;
    background: var(--brand);
    display: flex; align-items: center; justify-content: center;
    margin-bottom: 1.375rem;
    color: #fff;
    flex-shrink: 0;
}
.philosophy-card-title {
    font-size: var(--fs-500); font-weight: 800; color: #fff;
    margin-bottom: 0.75rem; line-height: 1.25;
}
.philosophy-card-desc {
    font-size: var(--fs-400); color: rgba(255,255,255,0.6); line-height: 1.7;
}

/* ══ CTA section ═════════════════════════════════════════════════════════ */
.cta-section {
    background: var(--surface);
    border-top: 1px solid var(--border);
    padding-block: clamp(3rem, 7vw, 5rem);
}
.cta-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
    align-items: center;
}
@media (max-width: 860px) { .cta-grid { grid-template-columns: 1fr; } }
.cta-content {
    display: flex; flex-direction: column; gap: 0;
}
.cta-content .section-eyebrow { margin-bottom: 0.5rem; }
.cta-content .cta-title        { margin-bottom: 0.875rem; }
.cta-content .cta-desc         { margin-bottom: 1.75rem; }
.cta-title {
    font-size: clamp(1.5rem, 2.5vw, 2.1rem);
    font-weight: 900; color: var(--text);
    letter-spacing: -0.02em; line-height: 1.2;
}
.cta-desc {
    font-size: var(--fs-400); color: var(--text-sec); line-height: 1.7;
}
.cta-collage {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 195px 195px;
    gap: 0.625rem;
}
.cta-photo {
    background-size: cover;
    background-position: center;
    border-radius: var(--r-lg);
}
.cta-photo-tall {
    grid-row: 1 / 3;
}

/* ══ Footer logo — larger horizontal logo ════════════════════════════════ */
.footer-logo-round {
    width: 120px; height: 120px;
    display: block; margin-bottom: 1rem;
    border-radius: 50%;
}

/* ══ Gallery search ══════════════════════════════════════════════════════ */
.gallery-search-wrap {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    background: var(--surface);
    border: 1.5px solid var(--border);
    border-radius: var(--r-full);
    padding: 0.45rem 0.875rem;
    transition: border-color var(--t-fast);
    color: var(--muted);
    min-width: 220px;
}
.gallery-search-wrap:focus-within {
    border-color: var(--brand);
    color: var(--brand);
}
.gallery-search-input {
    border: none;
    background: transparent;
    font-family: inherit;
    font-size: var(--fs-300);
    color: var(--text);
    outline: none;
    width: 100%;
}
.gallery-search-input::placeholder { color: var(--muted-light); }
.gallery-search-input::-webkit-search-cancel-button { cursor: pointer; }

/* ══ Article share buttons ════════════════════════════════════════════════ */
.article-footer-row {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 1rem;
    margin-bottom: 0;
}
.share-block {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.5rem;
}
.share-label {
    font-size: var(--fs-200);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--muted);
}
.share-btns {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}
.share-btn {
    padding-top: 0.65rem;
    padding-bottom: 0.65rem;
    line-height: 1.5;
}
.share-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.45rem 0.875rem;
    border-radius: var(--r-full);
    border: 1.5px solid var(--border);
    background: transparent;
    font-family: inherit;
    font-size: var(--fs-300);
    font-weight: 600;
    color: var(--text-sec);
    cursor: pointer;
    transition: background var(--t-fast) var(--ease),
                border-color var(--t-fast) var(--ease),
                color var(--t-fast) var(--ease),
                box-shadow var(--t-fast) var(--ease);
    white-space: nowrap;
    line-height: 1;
    min-height: 40px;
}
.share-btn:hover {
    border-color: transparent;
    color: #fff;
    box-shadow: var(--shadow-sm);
}
.share-btn--telegram:hover { background: #2AABEE; }
.share-btn--facebook:hover { background: #1877F2; }
.share-btn--x:hover        { background: #0f0f0f; }
.share-btn--copy:hover     { background: var(--brand); }
.share-btn--copied         { background: #22c55e !important; border-color: transparent !important; color: #fff !important; }

/* ── Contact Form — phone field, error states, consent, success ────────────── */

/* Phone field: unified input with country code select on the left */
.phone-field {
    display: flex;
    border: 1.5px solid var(--border);
    border-radius: var(--r-lg);
    overflow: hidden;
    background: var(--surface);
    transition: border-color var(--t-fast), box-shadow var(--t-fast);
}
.phone-field:focus-within {
    border-color: var(--brand);
    box-shadow: 0 0 0 3px var(--brand-bg);
}
.phone-code-select {
    flex-shrink: 0;
    min-width: 92px;
    border: none;
    border-right: 1.5px solid var(--border);
    background: var(--surface-2);
    padding: 0 0.5rem 0 0.625rem;
    font-family: inherit;
    font-size: var(--fs-300);
    font-weight: 600;
    color: var(--text);
    cursor: pointer;
    outline: none;
    appearance: none;
    -webkit-appearance: none;
    line-height: 1;
}
.phone-num-input {
    flex: 1;
    min-width: 0;
    border: none;
    background: transparent;
    padding: 0.65rem 0.875rem;
    font-size: var(--fs-400);
    font-family: inherit;
    color: var(--text);
    outline: none;
}
.phone-num-input::placeholder { color: var(--muted); }

/* Required asterisk */
.cf-req {
    color: #dc2626;
    font-size: 0.85em;
    margin-left: 2px;
}

/* Error message */
.cf-err {
    font-size: var(--fs-200);
    color: #dc2626;
    margin-top: 4px;
    min-height: 1.1em;
    line-height: 1.4;
}

/* Field group error state */
.cf-has-error .form-input,
.cf-has-error .form-textarea,
.cf-has-error .phone-field {
    border-color: #dc2626;
}
.cf-has-error .phone-field:focus-within {
    box-shadow: 0 0 0 3px rgba(220,38,38,0.1);
}

/* Global send error box */
.cf-send-error {
    background: #fef2f2;
    border: 1px solid #fecaca;
    border-radius: var(--r-md);
    color: #dc2626;
    font-size: var(--fs-300);
    padding: 0.75rem 1rem;
    line-height: 1.5;
}

/* Consent checkbox label */
.cf-consent-label {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    font-size: var(--fs-300);
    color: var(--text-sec);
    cursor: pointer;
    line-height: 1.55;
}
.cf-consent-label input[type="checkbox"] {
    margin-top: 2px;
    accent-color: var(--brand);
    flex-shrink: 0;
    width: 15px;
    height: 15px;
    cursor: pointer;
}
.cf-consent-link {
    color: var(--brand) !important;
    text-decoration: underline;
    text-underline-offset: 2px;
}

/* Inline text links (email, phone, etc.) that need hover feedback */
.contact-link {
    color: var(--text);
    text-decoration: none;
    transition: color var(--t-fast);
}
.contact-link:hover { color: var(--brand); }

/* Success state */
.cf-success-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    padding: 2.5rem 1rem;
    text-align: center;
}
.cf-success-icon {
    width: 60px;
    height: 60px;
    background: #dcfce7;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #16a34a;
    flex-shrink: 0;
}

/* ══ Hero — mobile layout ═════════════════════════════════════════════════ */
@media (max-width: 640px) {

    /* Stack: photo on top, content below — fills exactly the space under the header */
    .hero-fullbleed {
        display: flex;
        flex-direction: column;
        /* header = env(safe-area-inset-top) + 80px hdr-inner + 1px border */
        height: calc(100dvh - env(safe-area-inset-top) - 81px);
        min-height: 0;
        align-items: stretch;
    }

    /* Photo: always 40% of hero height, image fills with object-fit: cover */
    .hero-fullbleed .hero-bg-wrap {
        position: relative;
        inset: auto;
        width: 100%;
        flex: 0 0 40%;
        overflow: hidden;
        z-index: 0;
    }

    /* Gradient over the bottom of the photo fading to solid black */
    .hero-fullbleed .hero-bg-wrap::after {
        content: '';
        position: absolute;
        inset: 0;
        background: linear-gradient(to bottom,
            transparent 15%,
            rgba(26,7,0,0.45) 55%,
            #1a0700 100%);
        pointer-events: none;
    }

    /* Show full landscape composition */
    .hero-fullbleed .hero-bg-img {
        object-position: center center;
        animation: none;
    }

    /* Hide original overlays — replaced by ::after on bg-wrap */
    .hero-fullbleed .hero-overlay-bottom,
    .hero-fullbleed .hero-overlay-top,
    .hero-glow-blob {
        display: none;
    }

    /* Content: solid dark background, flush below the photo */
    .hero-content-wrap {
        position: relative;
        background: #1a0700;
        padding-top: 1rem;
        padding-bottom: 1rem;
        flex: 1;
        min-height: 0;
        overflow: hidden; /* clip if content somehow still overflows */
        margin-top: -1px; /* prevent 1px gap between photo and content */
    }

    /* Slightly smaller title on mobile */
    .hero-main-title {
        font-size: clamp(1.75rem, 9vw, 2.5rem);
        margin-bottom: 0.5rem;
    }

    /* Shorter subtitle */
    .hero-subtitle {
        font-size: var(--fs-300);
        margin-bottom: 0.875rem;
    }

    /* Buttons: full width, stacked, max 40px tall */
    .hero-btns {
        flex-direction: column;
        gap: 0.5rem;
        margin-bottom: 0.875rem;
    }

    .hero-btn-primary,
    .hero-btn-glass {
        width: 100%;
        justify-content: center;
        padding: 0 1.25rem;
        height: 40px;
        font-size: var(--fs-400);
    }

    /* All .btn elements on mobile — cap at 40px */
    .btn:not(.btn-sm) {
        min-height: unset;
        height: 40px;
        padding-top: 0;
        padding-bottom: 0;
    }

    /* ── Champs section header: stack vertically on mobile ─────────────── */
    .champs-header-wrap {
        display: flex !important;
        flex-direction: column;
        align-items: flex-start;
        gap: 0.75rem;
        margin-bottom: 1.25rem !important;
    }
    .champs-header-wrap > .btn {
        width: 100%;
        justify-content: center;
    }
    .champs-title {
        font-size: var(--fs-700);
    }
    .champs-sub {
        font-size: var(--fs-300);
    }

    /* ── Champion cards: horizontal layout, fixed height so all cards equal + photos square ── */
    .champs-section .champion-card {
        display: flex;
        flex-direction: row;
        height: 114px; /* 88×1.3 — photo width matches to keep square */
    }
    .champs-section .champion-photo {
        width: 114px;
        min-width: 114px;
        flex-shrink: 0;
        aspect-ratio: unset;
        align-self: stretch; /* stretches to card height = 114px = photo width → square */
        padding-bottom: 0;
        align-items: center;
    }
    .champs-section .champion-body {
        flex: 1;
        padding: 0.625rem 0.75rem 0.625rem 0.875rem;
        min-width: 0;
        gap: 0.5rem;
    }
    .champs-section .champion-name {
        font-size: var(--fs-300); /* 14px */
    }
    .champs-section .champion-comp {
        font-size: 11px;
    }
    .champs-section .champion-year {
        font-size: 11px;
    }
    .champs-section .champion-medals {
        font-size: 11px;
    }

    /* ── Champions page (/champions): same horizontal layout as homepage ─── */
    .champs-page .champion-card {
        display: flex;
        flex-direction: row;
        height: 114px;
    }
    .champs-page .champion-photo {
        width: 114px;
        min-width: 114px;
        flex-shrink: 0;
        aspect-ratio: unset;
        align-self: stretch;
        padding-bottom: 0;
        align-items: center;
    }
    .champs-page .champion-body {
        flex: 1;
        padding: 0.625rem 0.75rem 0.625rem 0.875rem;
        min-width: 0;
        gap: 0.5rem;
    }
    .champs-page .champion-name { font-size: var(--fs-300); }
    .champs-page .champion-comp { font-size: 11px; }
    .champs-page .champion-year { font-size: 11px; }
    .champs-page .champion-medals { font-size: 11px; }

    /* ── Leadership cards: vertical layout, role badge stays inline ─ */
    .ldr-card:hover { transform: none; }
    .ldr-role { display: inline-flex; }

    /* ── Calendar cards: 2-row layout (date+info top, docs bottom) ────── */
    .cal-card {
        grid-template-columns: 58px 1fr;
        grid-template-areas:
            "date info"
            "docs docs";
        gap: 0.75rem 0.875rem;
        padding: 0.875rem 1rem;
    }
    .cal-card:hover { transform: none; }
    .cal-date-pill {
        grid-area: date;
        width: 58px;
        height: 62px;
        align-self: start;
    }
    .cal-date-pill .dd { font-size: 1.375rem; }
    .cal-card-info { grid-area: info; }
    .cal-card-title { font-size: var(--fs-400); }
    .cal-card-docs {
        grid-area: docs;
        flex-direction: row;
        flex-wrap: wrap;
        gap: 0.5rem;
    }
    .cal-dl-btn, .cal-docs-soon { flex: 1 1 auto; justify-content: center; }

    /* ── Partners CTA buttons: stack on mobile ──────────────────────────── */
    .partners-cta-btns { flex-direction: column; align-items: stretch !important; }
    .partners-cta-btns .btn { text-align: center; justify-content: center; }

    /* ── Athletes hero: breadcrumb top, title/stats bottom ──────────────── */
    .athletes-hero-page {
        display: flex;
        flex-direction: column;
        height: 480px;
        padding-top: 1.25rem;
        padding-bottom: 1.75rem;
        overflow: hidden;
    }
    .athletes-hero-page .container {
        flex: 1;
        display: flex;
        flex-direction: column;
        min-height: 0;
    }
    .athletes-hero-bottom {
        margin-top: auto;
    }

    /* ── Athletes hero stats: single row ────────────────────────────────── */
    .athletes-stats-bar {
        flex-wrap: nowrap;
        gap: 0;
        margin-top: 1.25rem;
    }
    .athletes-stat {
        flex: 1;
        padding-inline: 0.75rem;
        border-right: 1px solid rgba(255,255,255,0.12);
    }
    .athletes-stat:first-child { padding-left: 0; }
    .athletes-stat:last-child  { border-right: none; }
    .athletes-stat-n { font-size: 1.25rem; }
    .athletes-stat-l { font-size: 10px; letter-spacing: 0; white-space: nowrap; }

    /* ── Secondary page heroes: breadcrumb top, title/desc bottom ───────── */
    .page-hero {
        display: flex;
        flex-direction: column;
        min-height: 300px;
        padding-top: 1.25rem;
        padding-bottom: 1.5rem;
    }
    .page-hero .container,
    .page-hero > .container {
        flex: 1;
        display: flex;
        flex-direction: column;
    }
    /* margin-bottom: auto on breadcrumb pushes title+desc to the bottom */
    .page-hero .breadcrumb {
        margin-bottom: auto;
        padding-bottom: 1rem;
        flex-shrink: 0;
    }
    /* prevent tag/badge from stretching full width in flex column */
    .page-hero-tag { align-self: flex-start; }

    /* ── Gallery search + sort: one row on mobile ───────────────────────── */
    .gallery-search-wrap {
        min-width: 0;
        flex: 1;
    }
    /* override inline flex-wrap:wrap so search+sort stay on one line */
    .athlete-filters-wrap .athlete-filter-row:first-child {
        flex-wrap: nowrap !important;
    }

    /* ── Athletes page: scrollable weight row, edge-to-edge ─────────────── */
    .athlete-filters-wrap { gap: 0.5rem; margin-bottom: 1.25rem; }
    /* only the weight row (2nd) gets horizontal scroll — keeps dropdown visible */
    .athlete-filters-wrap .athlete-filter-row:nth-child(2) {
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        margin-inline: calc(-1 * var(--gutter));
        padding-inline: var(--gutter);
        padding-bottom: 2px;
    }
    .athlete-filters-wrap .athlete-filter-row:nth-child(2)::-webkit-scrollbar { display: none; }

    /* ── Athletes ranking cards: no rank number, no photo, 2-column ─────── */
    .athlete-rank-card {
        grid-template-columns: 1fr auto;
        gap: 0.5rem 0.75rem;
        padding: 0.75rem 0.875rem;
    }
    .rank-num   { display: none; }
    .rank-photo { display: none; }
    .rank-name  { font-size: var(--fs-400); }
    .rank-medal-badge { width: 24px; height: 24px; font-size: 10px; }
    .rank-medals { gap: 0.25rem; }

    /* ── About hero: photo on top (natural height), content flush below ──── */
    .about-hero-section {
        display: flex;
        flex-direction: column;
        height: auto;
        min-height: 0;
        align-items: stretch;
        position: relative; /* containing block for absolute breadcrumb */
    }
    .about-hero-section .hero-bg-wrap {
        position: relative;
        inset: auto;
        width: 100%;
        height: 58vw; /* proportional to landscape photo */
        overflow: hidden;
        z-index: 0;
    }
    .about-hero-section .hero-bg-wrap::after {
        content: '';
        position: absolute;
        inset: 0;
        background: linear-gradient(to bottom, transparent 15%, rgba(26,7,0,0.45) 55%, #1a0700 100%);
        pointer-events: none;
    }
    .about-hero-section .hero-bg-img {
        object-position: center center;
        animation: none;
    }
    .about-hero-section .hero-overlay-bottom,
    .about-hero-section .hero-overlay-top,
    .about-hero-glow { display: none; }
    .about-hero-content-wrap {
        position: static; /* breadcrumb positions relative to section, not here */
        background: #1a0700;
        margin-top: -1px;
        padding-top: 1.25rem;
        padding-bottom: 1.75rem;
        display: flex;
        flex-direction: column;
        gap: 0.5rem;
    }
    /* breadcrumb overlaid on the photo, anchored to top of the whole hero section */
    .about-hero-breadcrumb {
        position: absolute;
        top: 1.25rem;
        left: var(--gutter);
        right: var(--gutter);
        z-index: 10;
        margin-bottom: 0;
        flex-shrink: 0;
    }

    /* ── Mobile nav: starts below the taller mobile header ─────────────── */
    .mob-nav {
        top: calc(env(safe-area-inset-top) + 81px); /* 80px hdr-inner + 1px border */
    }

    /* ── Header: logo bigger, text closer, btn pinned right ────────────── */
    .hdr-logo-mark {
        width: 60px !important;
        height: 60px !important;
    }
    .hdr-logo {
        gap: 3px;
    }
    .hdr-inner {
        min-height: 80px;
        gap: 0.75rem;
    }
    .mob-menu-btn {
        margin-left: auto;
    }
}