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

:root {
    --white: #ffffff;
    --off-white: #f9f8f6;
    --surface-1: #f4f3f0;
    --surface-2: #eeede9;
    --ink-900: #111110;
    --ink-700: #2d2d2b;
    --ink-500: #5a5a57;
    --ink-400: #7c7c79;
    --ink-300: #a8a8a5;
    --ink-200: #d1d1ce;
    --ink-100: #e8e7e4;
    --gold: #b5924a;
    --gold-l: #c9a55d;
    --gold-pale: #fdf6ea;
    --navy: #0B1E4A;
    --navy-m: #1a3280;
    --navy-xs: rgba(11,30,74,.12);
    --navy-2xs: rgba(11,30,74,.05);
    --ink: #1a1a18;
    --ink-m: #4a4a48;
    --ink-l: #7c7c79;
    --border: rgba(0,0,0,.07);
    --border-l: rgba(0,0,0,.05);
    --shadow-sm: 0 1px 3px rgba(0,0,0,.06),0 1px 2px rgba(0,0,0,.04);
    --shadow-md: 0 4px 16px rgba(0,0,0,.07),0 2px 6px rgba(0,0,0,.05);
    --shadow-lg: 0 12px 40px rgba(0,0,0,.09),0 4px 12px rgba(0,0,0,.05);
    --shadow-xl: 0 24px 64px rgba(0,0,0,.10),0 8px 24px rgba(0,0,0,.06);
    --r-sm: 10px;
    --r-md: 16px;
    --r-lg: 24px;
    --r-xl: 32px;
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: 'DM Sans', sans-serif;
    background: var(--white);
    color: var(--ink-700);
    line-height: 1.72;
    font-size: 1.02rem;
    overflow-x: hidden;
}

/* ══ GATE ══ */
#gate {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    background: var(--white);
}

    #gate.gone {
        display: none;
    }

.gate-panel {
    flex: 1;
    height: 100%;
    position: relative;
    overflow: hidden;
    background: var(--white);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

    .gate-panel::before {
        content: '';
        position: absolute;
        inset: 0;
        background-image: linear-gradient(rgba(17,17,16,.025) 1px,transparent 1px),linear-gradient(90deg,rgba(17,17,16,.025) 1px,transparent 1px);
        background-size: 48px 48px;
    }

.gate-panel-l {
    border-right: 1px solid var(--ink-200);
    transform: translateX(-100%);
    animation: gateEnterL .7s cubic-bezier(.34,1.4,.64,1) .1s forwards, gateOpenL 1s cubic-bezier(.76,0,.24,1) 2s forwards;
}

.gate-panel-r {
    border-left: 1px solid var(--ink-200);
    transform: translateX(100%);
    animation: gateEnterR .7s cubic-bezier(.34,1.4,.64,1) .1s forwards, gateOpenR 1s cubic-bezier(.76,0,.24,1) 2s forwards;
}

@keyframes gateEnterL {
    to {
        transform: translateX(0);
    }
}

@keyframes gateEnterR {
    to {
        transform: translateX(0);
    }
}

@keyframes gateOpenL {
    to {
        transform: translateX(-100%);
    }
}

@keyframes gateOpenR {
    to {
        transform: translateX(100%);
    }
}

.gate-seam {
    position: absolute;
    top: 0;
    bottom: 0;
    right: -1px;
    width: 2px;
    background: linear-gradient(180deg,transparent,rgba(17,17,16,.12) 35%,rgba(17,17,16,.22) 50%,rgba(17,17,16,.12) 65%,transparent);
    animation: seamPulse 1s ease-in-out .6s 3;
}

@keyframes seamPulse {
    0%, 100% {
        opacity: .4
    }

    50% {
        opacity: 1
    }
}

.gate-body {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 2rem 1.5rem;
    text-align: center;
    animation: gateBodyOut .3s ease-in 1.85s forwards;
}

@keyframes gateBodyOut {
    to {
        opacity: 0;
    }
}

.gate-tag {
    font-size: .6rem;
    font-weight: 600;
    letter-spacing: 3.5px;
    text-transform: uppercase;
    color: var(--ink-300);
    margin-bottom: 16px;
}

.gate-orn {
    width: 32px;
    height: 1px;
    background: var(--ink-200);
    margin-bottom: 20px;
}

.gate-uni {
    font-family: 'Playfair Display',serif;
    font-size: clamp(.8rem,3vw,1.15rem);
    font-weight: 700;
    color: var(--ink-700);
    line-height: 1.5;
}

.gate-num {
    font-family: 'Playfair Display',serif;
    font-size: clamp(3rem,10vw,7rem);
    font-weight: 900;
    color: var(--ink-900);
    line-height: 1;
    margin: 12px 0 4px;
}

    .gate-num sup {
        font-size: .28em;
        vertical-align: super;
        color: var(--ink-300);
    }

.gate-lbl {
    font-size: .6rem;
    font-weight: 600;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: var(--ink-300);
}

.gate-title {
    font-family: 'Playfair Display',serif;
    font-size: clamp(.75rem,3.5vw,1.1rem);
    font-weight: 600;
    color: var(--ink-700);
    line-height: 1.7;
    max-width: 240px;
}

.gate-dtag {
    margin-top: 20px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    border: 1px solid var(--ink-200);
    padding: 7px 14px;
    border-radius: 50px;
    font-size: .65rem;
    color: var(--ink-400);
    font-weight: 500;
    letter-spacing: .5px;
}

/* ══ BUTTONS ══ */
.btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 22px;
    border-radius: var(--r-sm);
    font-family: 'DM Sans',sans-serif;
    font-size: .84rem;
    font-weight: 600;
    letter-spacing: .3px;
    text-decoration: none;
    transition: all .22s ease;
    cursor: pointer;
    border: none;
    white-space: nowrap;
}

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

    .btn-gold:hover {
        background: var(--gold-l);
        transform: translateY(-2px);
        box-shadow: var(--shadow-md);
    }

.btn-ghost {
    background: rgba(255,255,255,.08);
    color: rgba(255,255,255,.75);
    border: 1px solid rgba(255,255,255,.15);
}

    .btn-ghost:hover {
        background: rgba(255,255,255,.13);
        border-color: rgba(255,255,255,.3);
        transform: translateY(-2px);
    }

.btn-navy {
    background: var(--navy);
    color: #fff;
}

    .btn-navy:hover {
        background: var(--navy-m);
        transform: translateY(-2px);
        box-shadow: var(--shadow-md);
    }

.btn-outline-navy {
    background: transparent;
    color: var(--navy);
    border: 1px solid var(--navy-xs);
}

    .btn-outline-navy:hover {
        background: var(--navy-2xs);
        transform: translateY(-2px);
    }

.btn-outline {
    background: transparent;
    color: var(--ink-700);
    border: 1px solid var(--ink-200);
}

    .btn-outline:hover {
        border-color: var(--ink-400);
        transform: translateY(-2px);
    }

/* ══ SHARED ══ */
.section-tag {
    display: inline-block;
    font-size: .62rem;
    font-weight: 600;
    letter-spacing: 2.5px;
    text-transform: uppercase;
    color: var(--ink-400);
    margin-bottom: 14px;
}

.section-title {
    font-family: 'Playfair Display',serif;
    font-size: clamp(1.9rem,4.4vw,3rem);
    font-weight: 900;
    color: var(--ink-900);
    letter-spacing: -1px;
    line-height: 1.15;
    margin-bottom: 16px;
}

    .section-title em {
        font-style: italic;
        color: var(--ink-500);
    }

.s-hdr {
    text-align: center;
    margin-bottom: 40px;
}

.section-sub {
    font-size: .92rem;
    color: var(--ink-400);
    line-height: 1.75;
    max-width: 600px;
}

/* ══ HERO ══ */
.hero {
    position: relative;
    min-height: 100svh;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    background: #06101e;
}

.hero-bg {
    position: absolute;
    inset: 0;
    background-image: url('~/img/mainimages/lawmainvideo.mp4');
    background-size: cover;
    background-position: center top;
    opacity: 1;
    will-change: transform;
    background-attachment: fixed;
}
.hero-video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
    background-attachment: fixed;
}
/* Dark overlay — protects text on the left, fully reveals image on the right */
.hero-vignette {
    position: absolute;
    inset: 0;
    background-attachment: fixed;
    background: linear-gradient(to right, rgba(4,9,20,.18) 16%, rgba(4,9,20,.10) 55%, rgba(4,9,20,.05) 80%, rgba(4,9,20,.02) 90%, rgba(4,9,20,0) 100% ), linear-gradient(to bottom, rgba(4,9,20,.08) 0%, transparent 40%, transparent 85%, rgba(4,9,20,.10) 100% );
}
.hero-grid {
    position: absolute;
    inset: 0;
    background-attachment: fixed;
    pointer-events: none;
    background-image: linear-gradient(rgba(196,205,217,.016) 1px,transparent 1px),linear-gradient(90deg,rgba(196,205,217,.016) 1px,transparent 1px);
    background-size: 72px 72px;
    mask-image: radial-gradient(ellipse at center,black 20%,transparent 72%);
    -webkit-mask-image: radial-gradient(ellipse at center,black 20%,transparent 72%);
}

.hero-inner {
    position: relative;
    z-index: 2;
    max-width: 1200px;
    width: 100%;
    padding: 90px clamp(1.2rem,5vw,4rem) 130px;
    display: grid;
    grid-template-columns: 1fr 285px;
    gap: clamp(2rem,4vw,5rem);
    align-items: center;
}

.hero-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    font-size: .62rem;
    font-weight: 600;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: rgba(232,196,106,.95);
    margin-bottom: 18px;
    text-shadow: 0 1px 8px rgba(0,0,0,.75);
}

    .hero-eyebrow .dot {
        width: 5px;
        height: 5px;
        border-radius: 50%;
        background: var(--gold);
        opacity: .8;
        animation: dp 2.5s ease infinite;
    }

@keyframes dp {
    0%, 100% {
        opacity: .8;
        transform: scale(1)
    }

    50% {
        opacity: .3;
        transform: scale(.6)
    }
}

.hero-fac {
    font-size: .74rem;
    color: rgba(220,228,240,.90);
    letter-spacing: .7px;
    margin-bottom: 11px;
    font-weight: 400;
    text-shadow: 0 1px 10px rgba(0,0,0,.75);
}

.hero-h1 {
    font-size: clamp(1.7rem,6.5vw,3.6rem);
    line-height: 1.18;
    letter-spacing: -.5px;
    color: #ffffff;
    margin-bottom: 70px;
    text-shadow: 0 2px 8px rgba(0,0,0,.8), 0 4px 24px rgba(0,0,0,.6), 0 8px 48px rgba(0,0,0,.4);
    font-family: 'Cormorant Garamond',serif;
}


    .hero-h1 em {
        font-style: italic;
        color: #e8c06a;
        font-weight: 600;
        text-shadow: 0 2px 10px rgba(0,0,0,.7), 0 0 20px rgba(232,192,106,.3);
    }

.hero-meta {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
    margin-bottom: 28px;
}

.hero-mi {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: .76rem;
    color: rgba(220,232,248,.95);
    text-shadow: 0 1px 6px rgba(0,0,0,.65);
}

    .hero-mi svg {
        opacity: .85;
        flex-shrink: 0;
    }

.hero-mdv {
    width: 1px;
    height: 13px;
    background: rgba(196,205,217,.1);
}

.hero-cta {
    display: flex;
    gap: 11px;
    flex-wrap: wrap;
    margin-bottom: 32px;
}

.hero-milestones {
    display: flex;
    align-items: stretch;
    flex-wrap: wrap;
    padding-top: 20px;
    border-top: 1px solid rgba(196,205,217,4.06);
}

.hm-item {
    flex: 1;
    min-width: 0;
    padding-right: 8px;
}

.hm-step {
    font-size: .5rem;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: rgba(184,151,90,.32);
    margin-bottom: 5px;
    display: flex;
    align-items: center;
    gap: 6px;
}

    .hm-step::before {
        content: '';
        display: inline-block;
        width: 14px;
        height: 1px;
        background: rgba(184,151,90,.25);
    }

.hm-num {
    font-family: 'Cormorant Garamond',serif;
    font-size: 1rem;
    font-weight: 700;
    color: rgba(215,225,240,.82);
    line-height: 1;
    margin-bottom: 4px;
}

.hm-lbl {
    font-size: .48rem;
    font-weight: 600;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: rgba(140,160,195,.28);
}

.hm-sep {
    width: 1px;
    background: rgba(196,205,217,.07);
    margin: 0 8px;
    flex-shrink: 0;
    align-self: stretch;
}

/* Hero Card */
.hero-card {
    /*background: rgba(255,255,255,.09);*/
    border: 1px solid rgba(196,205,217,.22);
    backdrop-filter: blur(1px);
    border-radius: 5px;
    padding: 24px 20px;
    box-shadow: 0 24px 60px rgba(0,0,0,.38),inset 0 1px 0 rgba(255,255,255,.04);
    background: linear-gradient(#109246, #109246, #19974e) !important;
}

.hc-lbl {
    font-size: .58rem;
    font-weight: 600;
    letter-spacing: 2.5px;
    text-transform: uppercase;
    color: rgba(189,199,30,1.0);
    margin-bottom: 14px;
    display: flex;
    align-items: center;
    gap: 7px;
}

    .hc-lbl::before {
        content: '';
        width: 12px;
        height: 1px;
        background: rgba(184,151,90,.3);
    }

.countdown {
    display: grid;
    grid-template-columns: repeat(4,1fr);
    gap: 5px;
    margin-bottom: 18px;
}

.cd-i {
    background: rgba(255,255,255,.032);
    border: 1px solid rgba(196,205,217,.055);
    border-radius: 4px;
    padding: 10px 4px;
    text-align: center;
}

.cd-n {
    font-family: 'Cormorant Garamond',serif;
    font-size: 1.4rem;
    font-weight: 700;
    color: rgba(220,230,244,.86);
    display: block;
    line-height: 1;
}

.cd-u {
    font-size: .5rem;
    color: rgba(190,200,210,1);
    text-transform: uppercase;
    letter-spacing: .5px;
    margin-top: 3px;
    display: block;
}

.hc-sep {
    height: 1px;
    background: rgba(196,205,217,1);
    margin-bottom: 14px;
}

.hc-row {
    display: flex;
    align-items: center;
    gap: 9px;
    font-size: .72rem;
    color: rgba(196,205,217,1);
    margin-bottom: 8px;
}

    .hc-row:last-child {
        margin-bottom: 0;
    }

.hc-ico {
    width: 22px;
    height: 22px;
    border-radius: 4px;
    background: rgba(184,151,90,.07);
    border: 1px solid rgba(184,151,90,.09);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

/* ══════════════════════════════
   Hero Dates Bar — Redesigned
══════════════════════════════ */
.hero-dates-wrap {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 12;
    display: flex;
    justify-content: center;
    padding: 0 clamp(1.2rem,5vw,4rem);
}

.hero-dates {
    display: grid;
    grid-template-columns: repeat(4,1fr);
    width: 100%;
    max-width: 1200px;
    background: rgba(255,255,255,.92);
    border: 1px solid rgba(255,255,255,.7);
    border-bottom: none;
    border-radius: 16px 16px 0 0;
    overflow: hidden;
    box-shadow: 0 -8px 40px rgba(11,24,41,.12);
}

.hd-c {
    padding: 18px 20px;
    border-right: 1px solid rgba(91,33,182,.08);
    transition: background .25s, transform .2s;
    position: relative;
    overflow: hidden;
}
.hd-c::before {
    content: '';
    position: absolute; top: 0; left: 0; right: 0; height: 3px;
    background: linear-gradient(90deg, var(--primary), var(--gold));
    opacity: 0;
    transition: opacity .25s;
    border-radius: 0;
}
.hd-c:hover { background: rgba(91,33,182,.04); }
.hd-c:hover::before { opacity: 1; }

.hd-c:last-child {
    border-right: none;
}

.hd-step {
    width: 22px;
    height: 22px;
    border-radius: 6px;
    background: linear-gradient(135deg, rgba(91,33,182,.12), rgba(201,168,76,.1));
    border: 1px solid rgba(91,33,182,.15);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: .55rem;
    font-weight: 800;
    color: var(--primary);
    margin-bottom: 8px;
    letter-spacing: .5px;
}

.hd-lbl {
    font-size: .56rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1.8px;
    color: var(--muted);
    margin-bottom: 4px;
    line-height: 1.3;
}

.hd-date {
    font-family: 'Cormorant Garamond', serif;
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--dark);
    line-height: 1.2;
}

/* Hero Curve */
.hero-curve {
    position: absolute;
    bottom: -1px;
    left: 0;
    right: 0;
    overflow: hidden;
    line-height: 0;
    z-index: 5;
}

    .hero-curve svg {
        display: block;
        width: 100%;
        height: 95px;
    }

/* ══ ABOUT ══ */
.about-sec {
    padding: clamp(2.5rem,5vw,4.5rem) clamp(1.5rem,5vw,5rem);
    background: var(--white);
}

.about-inner {
    max-width: 100%;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    gap: 4rem;
    align-items: center;
}

.about-gallery {
    position: relative;
    height: 340px;
}

.ag-main {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 110%;
    border-radius: var(--r-lg);
    overflow: hidden;
    box-shadow: var(--shadow-xl);
    z-index: 2;
}

    .ag-main img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

.ag-top-right {
    position: absolute;
    top: 0;
    right: 0;
    width: 36%;
    height: 48%;
    border-radius: var(--r-md);
    overflow: hidden;
    box-shadow: var(--shadow-lg);
    z-index: 3;
}

    .ag-top-right img, .ag-bottom-right img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

.ag-bottom-right {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 36%;
    height: 48%;
    border-radius: var(--r-md);
    overflow: hidden;
    box-shadow: var(--shadow-lg);
    z-index: 3;
}

.ag-badge {
    position: absolute;
    bottom: 18px;
    left: 18px;
    z-index: 4;
    background: rgba(255,255,255,.97);
    border-radius: var(--r-sm);
    padding: 12px 16px;
    box-shadow: var(--shadow-lg);
}

.ag-badge-n {
    font-family: 'Playfair Display',serif;
    font-size: 1.5rem;
    font-weight: 900;
    color: var(--ink-900);
    line-height: 1;
}

.ag-badge-l {
    font-size: .58rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    color: var(--ink-400);
    margin-top: 3px;
}

.ag-deco {
    position: absolute;
    top: -18px;
    right: -18px;
    width: 120px;
    height: 120px;
    border: 1.5px solid var(--navy-xs);
    border-radius: var(--r-lg);
    z-index: 1;
}

.ag-deco2 {
    position: absolute;
    bottom: -14px;
    left: -14px;
    width: 72px;
    height: 72px;
    background: var(--navy-2xs);
    border-radius: var(--r-md);
    z-index: 1;
}

.about-text p {
    font-size: .92rem;
    color: var(--ink-500);
    line-height: 1.85;
    margin-bottom: 14px;
}

    .about-text p strong {
        color: var(--ink-700);
        font-weight: 600;
    }

.about-pillars {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin: 18px 0 22px;
}

.ap-box {
    background: var(--off-white);
    border: 1px solid var(--border-l);
    border-radius: var(--r-md);
    padding: 14px;
    display: flex;
    align-items: flex-start;
    gap: 10px;
}

.ap-icon {
    width: 30px;
    height: 30px;
    border-radius: 7px;
    background: var(--navy);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

    .ap-icon svg {
        width: 13px;
        height: 13px;
        stroke: #fff;
        fill: none;
    }

.ap-title {
    font-size: .79rem;
    font-weight: 600;
    color: var(--ink);
    margin-bottom: 1px;
}

.ap-sub {
    font-size: .7rem;
    color: var(--ink-l);
    line-height: 1.4;
}

/* ══ THEMES ══ */
.themes-sec {
    background: var(--white);
    padding: clamp(3rem,5vw,5rem) clamp(1.2rem,4vw,3.5rem);
    overflow: hidden;
    position: relative;
}

    .themes-sec::before {
        content: '';
        position: absolute;
        inset: 0;
        background-image: radial-gradient(ellipse at 20% 50%,rgba(11,30,74,.04) 0%,transparent 60%),radial-gradient(ellipse at 80% 20%,rgba(181,146,74,.04) 0%,transparent 55%);
        pointer-events: none;
    }

.themes-header {
    text-align: center;
    padding: 0 clamp(1.5rem,5vw,5rem);
    margin-bottom: 48px;
    position: relative;
    z-index: 2;
}

    .themes-header .section-tag {
        background: rgba(11,30,74,.06);
        border: 1px solid rgba(11,30,74,.08);
        padding: 5px 14px;
        border-radius: 50px;
        color: var(--navy);
        font-size: .58rem;
        letter-spacing: 2.5px;
    }

.themes-intro {
    max-width: 700px;
    margin: 0 auto;
}

    .themes-intro p {
        font-size: .93rem;
        color: var(--ink-400);
        line-height: 1.8;
    }

.theme-featured {
    display: grid;
    grid-template-columns: 1fr 1.1fr;
    min-height: 300px;
    margin-bottom: 4px;
    position: relative;
    border-radius: var(--r-md);
    overflow: hidden;
    box-shadow: 0 2px 12px rgba(11,30,74,.10);
}

.tf-visual {
    position: relative;
    overflow: hidden;
}

    .tf-visual img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        transition: transform .8s ease;
    }

.theme-featured:hover .tf-visual img {
    transform: scale(1.06);
}

.tf-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(105deg,rgba(11,30,74,.72) 0%,rgba(11,30,74,.28) 100%);
}

.tf-visual-body {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 36px;
}

.tf-num {
    font-family: 'Cormorant Garamond',serif;
    font-size: 7rem;
    font-weight: 700;
    color: rgba(255,255,255,.07);
    line-height: 1;
    position: absolute;
    top: 18px;
    left: 28px;
    letter-spacing: -4px;
}

.tf-tag {
    font-size: .56rem;
    font-weight: 700;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: var(--gold-l);
    margin-bottom: 10px;
}

.tf-title {
    font-family: 'Playfair Display',serif;
    font-size: clamp(1.4rem,3vw,2rem);
    font-weight: 900;
    color: #fff;
    line-height: 1.2;
}

.tf-content {
    padding: clamp(2rem,4vw,44px) clamp(1.5rem,4vw,52px);
    display: flex;
    flex-direction: column;
    justify-content: center;
    background: var(--white);
    border: 1px solid var(--ink-100);
    border-left: none;
}

.tf-step-badge {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 20px;
}

.tf-step-line {
    width: 28px;
    height: 1px;
    background: var(--gold);
}

.tf-step-txt {
    font-size: .58rem;
    font-weight: 700;
    letter-spacing: 2.5px;
    text-transform: uppercase;
    color: var(--gold);
}

.tf-heading {
    font-family: 'Playfair Display',serif;
    font-size: clamp(1.1rem,2.5vw,1.65rem);
    font-weight: 700;
    color: var(--ink-900);
    line-height: 1.3;
    margin-bottom: 16px;
}

.tf-desc {
    font-size: .88rem;
    color: var(--ink-500);
    line-height: 1.85;
    margin-bottom: 24px;
}

.tf-points {
    display: flex;
    flex-direction: column;
    gap: 9px;
}

.tf-point {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    font-size: .82rem;
    color: var(--ink-500);
}

.tf-point-dot {
    width: 17px;
    height: 17px;
    border-radius: 50%;
    background: var(--navy-2xs);
    border: 1px solid var(--navy-xs);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    margin-top: 1px;
}

    .tf-point-dot svg {
        width: 8px;
        height: 8px;
        stroke: var(--navy);
        fill: none;
        stroke-width: 2.5;
    }

.themes-pair {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px;
}

.theme-pair-card {
    position: relative;
    min-height: 260px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    cursor: default;
    background: var(--ink-900);
    border: 2px solid rgba(255,255,255,.18);
}

.tpc-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: .65;
    transition: opacity .5s ease,transform .6s ease;
}

.theme-pair-card:hover .tpc-img {
    opacity: .80;
    transform: scale(1.05);
}

.tpc-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg,transparent 20%,rgba(7,13,25,.82) 100%);
}

.tpc-body {
    position: relative;
    z-index: 2;
    padding: 28px;
}

.tpc-num {
    font-family: 'Cormorant Garamond',serif;
    font-size: 3rem;
    font-weight: 700;
    color: rgba(181,146,74,.18);
    line-height: 1;
    margin-bottom: 8px;
}

.tpc-step {
    font-size: .52rem;
    font-weight: 700;
    letter-spacing: 2.5px;
    text-transform: uppercase;
    color: var(--gold-l);
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    gap: 8px;
}

    .tpc-step::before {
        content: '';
        width: 20px;
        height: 1px;
        background: var(--gold);
        opacity: .55;
    }

.tpc-title {
    font-family: 'Playfair Display',serif;
    font-size: 1.1rem;
    font-weight: 700;
    color: rgba(255,255,255,.95);
    line-height: 1.3;
    margin-bottom: 8px;
}

.tpc-desc {
    font-size: .78rem;
    color: rgba(255,255,255,.80);
    line-height: 1.7;
    max-height: 120px;
    overflow: hidden;
    opacity: 1;
}

.theme-pair-card:hover .tpc-desc {
    color: rgba(255,255,255,.95);
}

.tpc-bar {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg,var(--gold),var(--gold-l));
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .45s cubic-bezier(.22,1,.36,1);
}

.theme-pair-card:hover .tpc-bar {
    transform: scaleX(1);
}

.themes-bottom-row {
    display: grid;
    grid-template-columns: 1.35fr 1fr;
    gap: 6px;
}

.theme-light-card {
    background: #f0f3f8;
    padding: clamp(1.5rem,3vw,36px) clamp(1.5rem,3vw,40px);
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 240px;
    position: relative;
    overflow: hidden;
    border: 2px solid rgba(11,30,74,.12);
    transition: background .3s, box-shadow .3s;
}

    .theme-light-card:hover {
        background: #e8edf5;
        box-shadow: 0 8px 32px rgba(11,30,74,.10);
    }

.tlc-deco {
    position: absolute;
    right: -24px;
    top: -24px;
    width: 160px;
    height: 160px;
    border: 1.5px solid var(--ink-100);
    border-radius: 50%;
}

.tlc-deco2 {
    position: absolute;
    right: 20px;
    top: 20px;
    width: 100px;
    height: 100px;
    border: 1px solid var(--ink-200);
    border-radius: 50%;
    opacity: .4;
}

.tlc-icon {
    width: 44px;
    height: 44px;
    border-radius: 11px;
    background: var(--navy);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
    flex-shrink: 0;
    box-shadow: 0 8px 24px rgba(11,30,74,.2);
}

    .tlc-icon svg {
        width: 20px;
        height: 20px;
        stroke: #fff;
        fill: none;
        stroke-width: 1.7;
    }

.tlc-step {
    font-size: .54rem;
    font-weight: 700;
    letter-spacing: 2.5px;
    text-transform: uppercase;
    color: var(--gold);
    margin-bottom: 9px;
    display: flex;
    align-items: center;
    gap: 8px;
}

    .tlc-step::before {
        content: '';
        width: 20px;
        height: 1px;
        background: var(--gold);
        opacity: .6;
    }

.tlc-title {
    font-family: 'Playfair Display',serif;
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--ink-900);
    line-height: 1.3;
    margin-bottom: 12px;
}

.tlc-desc {
    font-size: .82rem;
    color: var(--ink-500);
    line-height: 1.8;
}

.theme-dark-card {
    background: var(--navy);
    padding: clamp(1.5rem,3vw,36px) clamp(1.5rem,3vw,40px);
    display: flex;
    flex-direction: column;
    justify-content: center;
    position: relative;
    overflow: hidden;
    min-height: 240px;
    border: 2px solid rgba(255,255,255,.12);
    transition: background .3s;
}

    .theme-dark-card:hover {
        background: var(--navy-m);
    }

.tdc-grid {
    position: absolute;
    inset: 0;
    background-image: linear-gradient(rgba(255,255,255,.025) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.025) 1px,transparent 1px);
    background-size: 36px 36px;
}

.tdc-step {
    font-size: .54rem;
    font-weight: 700;
    letter-spacing: 2.5px;
    text-transform: uppercase;
    color: rgba(181,146,74,.6);
    margin-bottom: 9px;
    display: flex;
    align-items: center;
    gap: 8px;
    position: relative;
    z-index: 2;
}

    .tdc-step::before {
        content: '';
        width: 20px;
        height: 1px;
        background: rgba(181,146,74,.5);
    }

.tdc-title {
    font-family: 'Playfair Display',serif;
    font-size: 1.25rem;
    font-weight: 700;
    color: rgba(255,255,255,.95);
    line-height: 1.3;
    margin-bottom: 12px;
    position: relative;
    z-index: 2;
}

.tdc-desc {
    font-size: .82rem;
    color: rgba(255,255,255,.48);
    line-height: 1.8;
    position: relative;
    z-index: 2;
}

.tdc-corner {
    position: absolute;
    bottom: -30px;
    right: -30px;
    width: 130px;
    height: 130px;
    border: 1px solid rgba(255,255,255,.05);
    border-radius: 50%;
}

/* ══ IMPORTANT DATES ══ */
.dates-sec {
    background-color: #fff;
    position: relative;
    overflow: hidden;
    padding-bottom: clamp(3rem,6vw,6rem);
    border-top: 1px solid rgba(11,30,74,.06);
}

.dates-bg-grid {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background-color: white;
    background-size: 60px 60px;
}

.dates-glow {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
}

.dates-glow-1 {
    width: 700px;
    height: 700px;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    background-color: white;
}

.dates-glow-2 {
    width: 400px;
    height: 400px;
    bottom: 10%;
    left: 8%;
    background: radial-gradient(circle,rgba(181,146,74,.06) 0%,transparent 70%);
}

.dates-year-bg {
    position: absolute;
    bottom: -60px;
    left: 50%;
    transform: translateX(-50%);
    font-family: 'Cormorant Garamond',serif;
    font-size: clamp(6rem,12vw,16rem);
    font-weight: 700;
    letter-spacing: -8px;
    line-height: 1;
    color: rgba(11,30,74,.04);
    pointer-events: none;
    user-select: none;
    white-space: nowrap;
}

.dates-hero {
    text-align: center;
    position: relative;
    z-index: 2;
    padding: clamp(2.5rem,5vw,5rem) clamp(1.5rem,5vw,5rem) clamp(1.5rem,4vw,4rem);
}

.dates-hero-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    font-size: .55rem;
    font-weight: 700;
    letter-spacing: 3.5px;
    text-transform: uppercase;
    color: var(--gold);
    margin-bottom: 18px;
}

    .dates-hero-eyebrow::before, .dates-hero-eyebrow::after {
        content: '';
        width: 44px;
        height: 1px;
        background: linear-gradient(90deg,transparent,rgba(181,146,74,.35));
    }

    .dates-hero-eyebrow::after {
        background: linear-gradient(90deg,rgba(181,146,74,.35),transparent);
    }

.dates-hero-title {
    font-family: 'Cormorant Garamond',serif;
    font-size: clamp(2.5rem,6.5vw,5.2rem);
    font-weight: 700;
    color: var(--ink-900);
    line-height: 1.08;
    letter-spacing: -2px;
    margin-bottom: 12px;
}

    .dates-hero-title em {
        font-style: italic;
        color: var(--gold);
    }

.dates-hero-sub {
    font-size: .84rem;
    color: var(--ink-500);
    max-width: 400px;
    margin: 0 auto;
    line-height: 1.8;
}

/* Timeline */
.timeline-wrap {
    position: relative;
    max-width: 980px;
    margin: 0 auto;
    padding: 0 clamp(1.2rem,4vw,4rem) 1rem;
    z-index: 2;
}

.tl-line {
    position: absolute;
    left: 50%;
    top: 0;
    bottom: 50px;
    width: 1px;
    background: linear-gradient(180deg,transparent 0%,rgba(181,146,74,.2) 3%,rgba(181,146,74,.55) 14%,var(--gold) 50%,rgba(181,146,74,.55) 86%,rgba(181,146,74,.2) 97%,transparent 100%);
    transform: translateX(-50%);
    transform-origin: top center;
}

.tl-item {
    display: grid;
    grid-template-columns: 1fr 64px 1fr;
    align-items: center;
    margin-bottom: clamp(1.4rem,3vw,2.8rem);
    position: relative;
}

.tl-dot {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: linear-gradient(135deg,#0c1e46,#1a3280);
    border: 1.5px solid var(--gold);
    display: flex;
    align-items: center;
    justify-content: center;
    justify-self: center;
    z-index: 3;
    position: relative;
    box-shadow: 0 0 0 5px rgba(181,146,74,.07),0 4px 18px rgba(0,0,0,.45);
}

.tl-dot-num {
    font-family: 'Cormorant Garamond',serif;
    font-size: .78rem;
    font-weight: 700;
    color: var(--gold-l);
    line-height: 1;
}

.tl-item.tl-final .tl-dot {
    width: 46px;
    height: 46px;
    background: linear-gradient(135deg,var(--gold),var(--gold-l));
    border-color: rgba(255,255,255,.25);
    box-shadow: 0 0 0 6px rgba(181,146,74,.12),0 0 24px rgba(181,146,74,.3),0 4px 18px rgba(0,0,0,.4);
}

.tl-item.tl-final .tl-dot-num {
    color: #fff;
    font-size: .84rem;
}

@keyframes dotGlow {
    0%, 100% {
        box-shadow: 0 0 0 5px rgba(181,146,74,.08),0 0 18px rgba(181,146,74,.18),0 4px 18px rgba(0,0,0,.45)
    }

    50% {
        box-shadow: 0 0 0 9px rgba(181,146,74,.05),0 0 30px rgba(181,146,74,.28),0 4px 18px rgba(0,0,0,.45)
    }
}

.tl-card {
    background: #fff;
    border-radius: var(--r-xl);
    overflow: hidden;
    box-shadow: 0 8px 32px rgba(11,30,74,.10),0 2px 8px rgba(11,30,74,.06);
    border: 1px solid rgba(11,30,74,.06);
    position: relative;
    will-change: transform,opacity;
}

    .tl-card:hover {
        box-shadow: 0 16px 48px rgba(11,30,74,.14),0 4px 12px rgba(11,30,74,.08);
    }

.tl-item-left .tl-card {
    grid-column: 1;
    grid-row: 1;
    margin-right: 16px;
}

.tl-item-left .tl-dot {
    grid-column: 2;
    grid-row: 1;
}

.tl-item-right .tl-dot {
    grid-column: 2;
    grid-row: 1;
}

.tl-item-right .tl-card {
    grid-column: 3;
    grid-row: 1;
    margin-left: 16px;
}

.tl-card-bar {
    height: 3px;
    background: var(--ink-200);
}

.tl-item.tl-deadline .tl-card-bar {
    background: #e8a87c;
}

.tl-item.tl-notice .tl-card-bar {
    background: #7cb9a8;
}

.tl-item.tl-final .tl-card-bar {
    background: linear-gradient(90deg,var(--gold),var(--gold-l));
}

.tl-card-inner {
    padding: clamp(.9rem,2vw,1.5rem) clamp(1rem,2vw,1.6rem);
    position: relative;
}

.tl-card-ghost {
    position: absolute;
    top: -8px;
    right: 8px;
    font-family: 'Cormorant Garamond',serif;
    font-size: 4.5rem;
    font-weight: 700;
    line-height: 1;
    color: rgba(17,17,16,.04);
    letter-spacing: -2px;
    pointer-events: none;
    user-select: none;
}

.tl-card-step {
    font-size: .52rem;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--gold);
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 14px;
}

    .tl-card-step::before {
        content: '';
        width: 18px;
        height: 1px;
        background: var(--gold);
        opacity: .6;
    }

.tl-card-date {
    display: flex;
    align-items: baseline;
    gap: 7px;
    margin-bottom: 8px;
}

.tl-card-day {
    font-family: 'Cormorant Garamond',serif;
    font-size: clamp(1.8rem,3.5vw,2.8rem);
    font-weight: 700;
    color: var(--ink-900);
    line-height: 1;
}

.tl-card-day-range {
    font-family: 'Cormorant Garamond',serif;
    font-size: 1.2rem;
    font-weight: 600;
    color: var(--ink-300);
    line-height: 1;
}

.tl-card-date-meta {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.tl-card-month {
    font-size: .62rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.6px;
    color: var(--ink-400);
}

.tl-card-year {
    font-size: .56rem;
    color: var(--ink-300);
}

.tl-card-divider {
    height: 1px;
    background: var(--ink-100);
    margin: 11px 0;
}

.tl-card-label {
    font-size: .72rem;
    font-weight: 700;
    color: var(--ink-900);
    margin-bottom: 5px;
    line-height: 1.3;
}

.tl-card-note {
    font-size: .68rem;
    color: var(--ink-400);
    line-height: 1.6;
}

.tl-item.tl-final .tl-card {
    background: var(--navy);
    box-shadow: 0 20px 56px rgba(11,30,74,.55),0 4px 16px rgba(0,0,0,.28);
}

.tl-item.tl-final .tl-card-ghost {
    color: rgba(181,146,74,.07);
}

.tl-item.tl-final .tl-card-day {
    color: rgba(255,255,255,.92);
}

.tl-item.tl-final .tl-card-day-range {
    color: rgba(255,255,255,.38);
}

.tl-item.tl-final .tl-card-month {
    color: rgba(255,255,255,.35);
}

.tl-item.tl-final .tl-card-year {
    color: rgba(255,255,255,.2);
}

.tl-item.tl-final .tl-card-divider {
    background: rgba(255,255,255,.07);
}

.tl-item.tl-final .tl-card-label {
    color: rgba(255,255,255,.87);
}

.tl-item.tl-final .tl-card-note {
    color: rgba(255,255,255,.35);
}

.tl-item.tl-final .tl-card-inner::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: linear-gradient(rgba(255,255,255,.02) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.02) 1px,transparent 1px);
    background-size: 32px 32px;
    pointer-events: none;
}

.tl-card-glow {
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at 50% 0%,rgba(181,146,74,.12) 0%,transparent 65%);
    pointer-events: none;
}

.tl-end {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-top: 8px;
    gap: 8px;
    position: relative;
    z-index: 2;
}

.tl-end-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--gold);
    box-shadow: 0 0 0 4px rgba(181,146,74,.14);
    animation: dotGlow 2.5s ease infinite;
}

.tl-end-lbl {
    font-size: .52rem;
    font-weight: 700;
    letter-spacing: 2.5px;
    text-transform: uppercase;
    color: var(--gold);
}

.dates-strip-wrap {
    max-width: 980px;
    margin: 2.5rem auto 0;
    padding: 0 clamp(1.2rem,4vw,4rem);
    position: relative;
    z-index: 2;
}

.dates-strip {
    display: flex;
    align-items: center;
    padding: 14px 20px;
    background: var(--off-white);
    border: 1px solid rgba(11,30,74,.08);
    border-radius: var(--r-lg);
}

.ds-item {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 9px;
}

.ds-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: rgba(181,146,74,.25);
    flex-shrink: 0;
}

    .ds-dot.active {
        background: var(--gold);
    }

.ds-line {
    flex: 1;
    height: 1px;
    background: rgba(181,146,74,.08);
    position: relative;
    margin: 0 10px;
}

    .ds-line.filled::after {
        content: '';
        position: absolute;
        inset: 0;
        background: linear-gradient(90deg,var(--gold),transparent);
    }

.ds-lbl {
    font-size: .54rem;
    font-weight: 600;
    color: var(--ink-500);
    white-space: nowrap;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

    .ds-lbl strong {
        color: var(--ink-900);
        font-weight: 700;
    }

/* ══ COMMITTEE ══ */
.committee-sec {
    padding: 0;
    background-color: white;
    position: relative;
    overflow: hidden;
}

    .committee-sec::before {
        content: '';
        position: absolute;
        inset: 0;
        background-image: radial-gradient(ellipse at 70% 20%,rgba(11,30,74,.04) 0%,transparent 55%),radial-gradient(ellipse at 20% 80%,rgba(181,146,74,.03) 0%,transparent 55%);
        pointer-events: none;
    }

.committee-inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: clamp(2.5rem,5vw,5rem) clamp(1.5rem,5vw,5rem) clamp(2rem,4vw,4rem);
}

    .committee-inner .s-hdr {
        margin-bottom: 36px;
        position: relative;
        padding-bottom: 24px;
    }

        .committee-inner .s-hdr::after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 50%;
            transform: translateX(-50%);
            width: 48px;
            height: 2px;
            background: linear-gradient(90deg,transparent,var(--gold),transparent);
            border-radius: 2px;
        }

.comm-leaders {
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: 18px;
    margin-bottom: 20px;
}

.comm-member {
    background: var(--white);
    border: 1px solid var(--ink-100);
    border-radius: var(--r-lg);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
    transition: box-shadow .3s,border-color .3s,transform .35s cubic-bezier(.23,1,.32,1);
    transform-style: preserve-3d;
    will-change: transform;
}

    .comm-member:hover {
        box-shadow: var(--shadow-lg);
        border-color: var(--ink-200);
    }

.comm-photo {
    width: 100%;
    aspect-ratio: 4/3;
    overflow: hidden;
    position: relative;
    background: var(--navy);
}

    .comm-photo img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: center top;
        display: block;
        transition: transform .5s ease;
    }

.comm-member:hover .comm-photo img {
    transform: scale(1.05);
}

.comm-photo::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg,transparent 50%,rgba(11,30,74,.7) 100%);
}

.comm-photo-bar {
    position: absolute;
    bottom: 12px;
    left: 50%;
    transform: translateX(-50%);
    width: 28px;
    height: 3px;
    background: var(--gold);
    border-radius: 2px;
    z-index: 2;
}

.comm-initials-fb {
    position: absolute;
    inset: 0;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Cormorant Garamond',serif;
    font-size: 2.8rem;
    font-weight: 700;
    color: rgba(255,255,255,.18);
    letter-spacing: 3px;
}

.comm-body {
    padding: 16px 20px;
}

.comm-name {
    font-family: 'Playfair Display',serif;
    font-size: .98rem;
    font-weight: 700;
    color: var(--ink);
    margin-bottom: 3px;
}

.comm-role {
    font-size: .62rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    color: var(--gold);
    margin-bottom: 12px;
}

.comm-links {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.comm-link {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: .72rem;
    color: var(--ink-l);
    text-decoration: none;
    transition: color .2s;
}

    .comm-link:hover {
        color: var(--navy);
    }

    .comm-link svg {
        opacity: .45;
        flex-shrink: 0;
        width: 11px;
        height: 11px;
        stroke: currentColor;
        fill: none;
        stroke-width: 2;
    }

.comm-mini-label {
    font-size: .56rem;
    font-weight: 700;
    letter-spacing: 2.5px;
    text-transform: uppercase;
    color: var(--ink-400);
    margin-bottom: 14px;
    display: flex;
    align-items: center;
    gap: 10px;
}

    .comm-mini-label::after {
        content: '';
        flex: 1;
        height: 1px;
        background: var(--ink-100);
    }

.comm-more-grid {
    display: grid;
    grid-template-columns: repeat(4,1fr);
    gap: 10px;
    margin-bottom: 28px;
}

.comm-mini {
    background: var(--white);
    border: 1px solid var(--ink-100);
    border-radius: var(--r-md);
    padding: 11px 14px;
    display: flex;
    align-items: center;
    gap: 10px;
    transition: background .2s,border-color .2s,box-shadow .2s,transform .25s ease;
    border-left: 3px solid var(--ink-200);
}

    .comm-mini:hover {
        border-color: var(--ink-200);
        box-shadow: var(--shadow-md);
        transform: translateY(-2px);
    }

    .comm-mini.role-organizing {
        border-left-color: var(--gold);
    }

    .comm-mini.role-scientific {
        border-left-color: var(--navy);
    }

    .comm-mini.role-faculty {
        border-left-color: #7cb9a8;
    }

.cm-dot {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--navy-2xs);
    border: 1px solid var(--navy-xs);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-family: 'Cormorant Garamond',serif;
    font-size: .8rem;
    font-weight: 700;
    color: var(--navy);
}

.cm-name {
    font-size: .76rem;
    font-weight: 500;
    color: var(--ink);
    line-height: 1.3;
}

.cm-role-mini {
    font-size: .62rem;
    color: var(--ink-l);
}

.comm-cta {
    text-align: center;
    padding-top: 4px;
}

.comm-count {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--navy-2xs);
    border: 1px solid var(--navy-xs);
    border-radius: 50px;
    padding: 7px 18px;
    font-size: .76rem;
    color: var(--ink-m);
    margin-bottom: 14px;
}

    .comm-count strong {
        color: var(--navy);
    }

/* ══ CTA ══ */
.cta-sec {
    background: var(--ink-900);
    padding: clamp(3rem,7vw,7rem) clamp(1.5rem,5vw,5rem);
    text-align: center;
    position: relative;
    overflow: hidden;
}

    .cta-sec::before {
        content: '';
        position: absolute;
        inset: 0;
        background-image: linear-gradient(rgba(255,255,255,.02) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.02) 1px,transparent 1px);
        background-size: 56px 56px;
    }

.cta-inner {
    position: relative;
    z-index: 2;
    max-width: 740px;
    margin: 0 auto;
}

.cta-h {
    font-family: 'Playfair Display',serif;
    font-size: clamp(2rem,5vw,4rem);
    font-weight: 900;
    line-height: 1.08;
    letter-spacing: -1.5px;
    color: var(--white);
    margin-bottom: 18px;
}

    .cta-h em {
        font-style: italic;
        color: rgba(255,255,255,.5);
    }

.cta-sub {
    font-size: .92rem;
    color: rgba(255,255,255,.38);
    margin-bottom: 36px;
    line-height: 1.8;
}

.cta-contacts {
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: 12px;
}

.cta-card {
    background: rgba(255,255,255,.04);
    border: 1px solid rgba(255,255,255,.07);
    border-radius: var(--r-md);
    padding: 18px;
    text-align: left;
    transition: background .25s,border-color .25s;
}

    .cta-card:hover {
        background: rgba(255,255,255,.07);
        border-color: rgba(255,255,255,.14);
    }

.ccc-name {
    font-size: .86rem;
    font-weight: 600;
    color: var(--white);
    margin-bottom: 2px;
}

.ccc-role {
    font-size: .64rem;
    color: #fff;
    margin-bottom: 10px;
    text-transform: capitalize;
    letter-spacing: 1px;
}

.ccc-link {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: .74rem;
    color: #fff;
    text-decoration: none;
    margin-bottom: 5px;
    transition: color .2s;
}

    .ccc-link:last-child {
        margin-bottom: 0;
    }

    .ccc-link:hover {
        color: rgba(255,255,255,.8);
    }

/* ══ SCROLL REVEAL ══ */
.will-reveal {
    opacity: 0;
    transform: translateY(24px);
}

.will-reveal-left {
    opacity: 0;
    transform: translateX(-28px);
}

.will-reveal-scale {
    opacity: 0;
    transform: translateY(22px) scale(.97);
}

/* ══════════════════════════════════════════
                   RESPONSIVE — TABLET (max-width: 1100px)
                   ══════════════════════════════════════════ */
@media (max-width: 1100px) {
    .theme-featured {
        grid-template-columns: 1fr;
        min-height: auto;
    }

    .tf-visual {
        min-height: 260px;
    }

    .tf-content {
        border-left: 1px solid var(--ink-100);
        border-top: none;
    }

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

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

/* ══════════════════════════════════════════
                   RESPONSIVE — TABLET (max-width: 900px)
                   ══════════════════════════════════════════ */
@media (max-width: 900px) {
    .hero-inner {
        grid-template-columns: 1fr;
        padding-bottom: 100px;
    }

    .hero-card {
        display: none;
    }

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

    .hero-h1 {
        font-size: clamp(1.9rem,5.5vw,2.8rem);
    }

    .about-inner {
        grid-template-columns: 1fr;
        gap: 2.5rem;
    }

    .about-gallery {
        height: 280px;
    }

    .comm-leaders {
        grid-template-columns: 1fr 1fr;
    }

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

    .themes-pair {
        grid-template-columns: 1fr;
    }

    .themes-bottom-row {
        grid-template-columns: 1fr;
    }
    /* Timeline single column */
    .tl-item {
        grid-template-columns: 44px 1fr;
        gap: 0;
    }

    .tl-line {
        left: 22px;
    }

    .tl-item-left .tl-card,
    .tl-item-right .tl-card {
        grid-column: 2;
        grid-row: 1;
        margin: 0 0 0 14px;
    }

    .tl-item-left .tl-dot,
    .tl-item-right .tl-dot {
        grid-column: 1;
        grid-row: 1;
        justify-self: center;
    }

    .dates-strip {
        display: none;
    }

    .cta-contacts {
        grid-template-columns: 1fr 1fr;
    }
}

/* ══════════════════════════════════════════
                   RESPONSIVE — MOBILE (max-width: 640px)
                   ══════════════════════════════════════════ */
@media (max-width: 640px) {
    /* Gate */
    .gate-body {
        padding: 1.5rem 1rem;
    }

    .gate-num {
        font-size: clamp(2.5rem,12vw,4rem);
    }
    /* Hero */
    .hero {
        min-height: 100svh;
    }

    .hero-inner {
        padding: 80px 1.2rem 110px;
        gap: 1.5rem;
    }

    .hero-eyebrow {
        font-size: .56rem;
        letter-spacing: 2px;
    }

    .hero-fac {
        font-size: .68rem;
    }

    .hero-h1 {
        font-size: clamp(1.7rem,6.5vw,2.4rem);
        margin-bottom: 16px;
    }

    .hero-meta {
        gap: 10px;
        margin-bottom: 22px;
    }

    .hero-mi {
        font-size: .7rem;
    }

    .hero-mdv {
        display: none;
    }

    .hero-cta {
        gap: 8px;
        margin-bottom: 24px;
    }

    .btn {
        padding: 11px 18px;
        font-size: .8rem;
    }
    /* Hero milestones — 2x2 grid */
    .hero-milestones {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 12px;
        padding-top: 16px;
        border-top: 1px solid rgba(196,205,217,.06);
    }

    .hm-sep {
        display: none;
    }

    .hm-item {
        padding-right: 0;
    }

    .hm-num {
        font-size: .9rem;
    }

    .hm-lbl {
        font-size: .46rem;
        letter-spacing: 1px;
    }
    /* Hero dates bar — 2x2 */
    .hero-dates {
        grid-template-columns: repeat(2,1fr);
    }

    .hd-c {
        padding: 14px 14px;
    }

    .hd-lbl {
        font-size: .48rem;
        letter-spacing: 1px;
    }

    .hd-date {
        font-size: .85rem;
    }
    /* About */
    .about-sec {
        padding: 2.5rem 1.2rem;
    }

    .about-gallery {
        height: 220px;
    }

    .ag-top-right, .ag-bottom-right {
        display: none;
    }

    .ag-main {
        width: 100%;
    }

    .about-text p {
        font-size: .88rem;
    }

    .about-pillars {
        grid-template-columns: 1fr;
        gap: 8px;
    }
    /* Themes */
    .themes-sec {
        padding: 2.5rem 0;
    }

    .themes-header {
        padding: 0 1.2rem;
        margin-bottom: 32px;
    }

    .tf-visual {
        min-height: 220px;
    }

    .tf-content {
        padding: 1.8rem 1.5rem;
    }

    .tf-heading {
        font-size: 1.1rem;
    }

    .tf-desc {
        font-size: .84rem;
        margin-bottom: 18px;
    }

    .tpc-body {
        padding: 20px;
    }

    .tpc-title {
        font-size: 1rem;
    }

    .theme-light-card, .theme-dark-card {
        padding: 2rem 1.5rem;
        min-height: auto;
    }

    .tlc-title, .tdc-title {
        font-size: 1.1rem;
    }

    .theme-pair-card {
        min-height: 250px;
    }
    /* Dates / Timeline */
    .dates-hero {
        padding: 2rem 1.2rem 1.5rem;
    }

    .dates-hero-title {
        font-size: clamp(1.8rem,7vw,3rem);
        letter-spacing: -1.5px;
    }

    .dates-hero-eyebrow {
        gap: 8px;
        font-size: .5rem;
    }

        .dates-hero-eyebrow::before, .dates-hero-eyebrow::after {
            width: 24px;
        }

    .dates-hero-sub {
        font-size: .78rem;
    }

    .timeline-wrap {
        padding: 0 1.2rem 1rem;
    }

    .tl-line {
        left: 19px;
    }

    .tl-item {
        grid-template-columns: 38px 1fr;
        margin-bottom: 1.2rem;
    }

    .tl-dot {
        width: 34px;
        height: 34px;
    }

    .tl-item.tl-final .tl-dot {
        width: 38px;
        height: 38px;
    }

    .tl-card-inner {
        padding: .9rem 1.1rem;
    }

    .tl-card-step {
        font-size: .48rem;
        margin-bottom: 10px;
    }

    .tl-card-day {
        font-size: 1.8rem;
    }

    .tl-card-label {
        font-size: .7rem;
    }

    .tl-card-note {
        font-size: .64rem;
    }

    .tl-card-ghost {
        font-size: 3rem;
        top: -4px;
        right: 6px;
    }
    /* Committee */
    .committee-inner {
        padding: 2rem 1.2rem;
    }

    .comm-leaders {
        grid-template-columns: 1fr;
        gap: 14px;
    }

    .comm-more-grid {
        grid-template-columns: 1fr 1fr;
        gap: 8px;
    }

    .comm-mini {
        padding: 10px 12px;
        gap: 8px;
    }

    .cm-dot {
        width: 28px;
        height: 28px;
        font-size: .72rem;
    }

    .cm-name {
        font-size: .72rem;
    }

    .cm-role-mini {
        font-size: .58rem;
    }
    /* CTA */
    .cta-sec {
        padding: 2.5rem 1.2rem;
    }

    .cta-contacts {
        grid-template-columns: 1fr;
        gap: 10px;
    }

    .cta-h {
        font-size: clamp(1.6rem,6vw,2.4rem);
    }

    .cta-sub {
        font-size: .84rem;
        margin-bottom: 24px;
    }
    /* Wave transitions */
    .hero-curve svg {
        height: 60px;
    }
    /* Section titles */
    .section-title {
        letter-spacing: -.5px;
    }
}

/* ══ Very small phones ══ */
@media (max-width: 380px) {
    .hero-h1 {
        font-size: 1.55rem;
    }

    .btn {
        padding: 10px 14px;
        font-size: .76rem;
    }

    .hero-milestones {
        grid-template-columns: 1fr 1fr;
        gap: 8px;
    }

    .hero-dates {
        grid-template-columns: 1fr 1fr;
    }

    .comm-more-grid {
        grid-template-columns: 1fr;
    }

    .tf-heading {
        font-size: 1rem;
    }
}

/* ══════════════════════════════════════════
   FEATURED SPEAKERS SECTION (Index)
══════════════════════════════════════════ */
.idx-spk-sec {
    padding: clamp(4rem,7vw,6rem) clamp(1.2rem,5vw,4rem);
    background: var(--off-white);
    border-top: 1px solid var(--border-l);
}
.idx-spk-inner { max-width: 1200px; margin: 0 auto; }
.idx-spk-hdr {
    display: flex; align-items: flex-end; justify-content: space-between;
    flex-wrap: wrap; gap: 16px; margin-bottom: 48px;
}
.idx-spk-hdr-left .section-tag { margin-bottom: 8px; display: block; }
.idx-spk-hdr-left .section-title { margin: 0; }
.idx-spk-view-all {
    display: inline-flex; align-items: center; gap: 8px;
    font-size: .78rem; font-weight: 700; color: var(--navy);
    text-decoration: none; letter-spacing: .5px;
    border: 1px solid rgba(11,30,74,.2);
    padding: 10px 20px; border-radius: 50px;
    transition: background .25s, color .25s, border-color .25s;
    white-space: nowrap;
}
.idx-spk-view-all:hover {
    background: var(--navy); color: var(--white);
    border-color: var(--navy);
}
.idx-spk-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}
.idx-spk-card {
    background: var(--white);
    border: 1px solid var(--border-l);
    border-radius: var(--r-lg);
    overflow: hidden;
    box-shadow: var(--shadow-md);
    transition: transform .3s, box-shadow .3s;
    display: flex; flex-direction: column;
}
.idx-spk-card:hover {
    transform: translateY(-6px);
    box-shadow: var(--shadow-xl);
}
.idx-spk-photo {
    position: relative; height: 240px; overflow: hidden;
    background: linear-gradient(135deg,#0C1828,#1a3280);
}
.idx-spk-photo img {
    width: 100%; height: 100%; object-fit: cover;
    transition: transform .5s;
}
.idx-spk-card:hover .idx-spk-photo img { transform: scale(1.05); }
.idx-spk-photo-overlay {
    position: absolute; inset: 0;
    background: linear-gradient(to top, rgba(11,30,74,.7) 0%, transparent 55%);
}
.idx-spk-theme {
    position: absolute; top: 14px; left: 14px;
    font-size: .58rem; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase;
    color: var(--gold); background: rgba(11,30,74,.75);
    padding: 4px 10px; border-radius: 50px;
}
.idx-spk-body { padding: 22px 22px 18px; flex: 1; }
.idx-spk-name {
    font-family: 'Playfair Display', serif;
    font-size: 1.05rem; font-weight: 700; color: var(--ink-900);
    line-height: 1.3; margin-bottom: 4px;
}
.idx-spk-title {
    font-size: .73rem; color: var(--navy-m); font-weight: 600;
    margin-bottom: 8px; line-height: 1.4;
}
.idx-spk-affil {
    font-size: .7rem; color: var(--ink-400);
    display: flex; align-items: center; gap: 5px;
}
.idx-spk-foot {
    padding: 14px 22px 20px;
    border-top: 1px solid var(--border-l);
}
.idx-spk-profile-btn {
    display: inline-flex; align-items: center; gap: 7px;
    font-size: .75rem; font-weight: 700; color: var(--navy);
    text-decoration: none;
    transition: gap .2s, color .2s;
}
.idx-spk-profile-btn:hover { gap: 11px; color: var(--gold); }

@media (max-width: 900px) {
    .idx-spk-grid { grid-template-columns: repeat(2,1fr); }
    .idx-spk-hdr { flex-direction: column; align-items: flex-start; }
}
@media (max-width: 560px) {
    .idx-spk-grid { grid-template-columns: 1fr; }
}

/* ══════════════════════════════════════════
   COMBINED SPEAKERS + COMMITTEE SWIPER SECTION
══════════════════════════════════════════ */
.idx-slider-sec {
    padding: clamp(3rem,5vw,4.5rem) 0;
    overflow: hidden;
    background: var(--white);
}

.idx-slider-block { margin-bottom: 32px; }
.idx-slider-block:last-child { margin-bottom: 0; }

.idx-slider-hdr {
    display: flex; align-items: flex-end; justify-content: space-between;
    flex-wrap: wrap; gap: 16px;
    padding: 0 clamp(1.2rem,5vw,4rem);
    margin-bottom: 36px;
}
.idx-slider-hdr-left .section-tag { display: block; margin-bottom: 6px; }
.idx-slider-hdr-left .section-title { margin: 0; }

.idx-view-all-btn {
    display: inline-flex; align-items: center; gap: 8px;
    font-size: .78rem; font-weight: 700; color: var(--navy);
    text-decoration: none; letter-spacing: .5px;
    border: 1px solid rgba(11,30,74,.22);
    padding: 10px 22px; border-radius: 50px;
    transition: background .25s, color .25s, border-color .25s;
    white-space: nowrap; flex-shrink: 0;
}
.idx-view-all-btn:hover { background: var(--navy); color: #fff; border-color: var(--navy); }

.idx-slider-divider {
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--border-l) 20%, var(--border-l) 80%, transparent);
    margin: 20px clamp(1.2rem,5vw,4rem) 20px;
}

/* Swiper track */
.idx-swiper { overflow: visible !important; padding: 20px 0 30px; }
.idx-swiper .swiper-wrapper { align-items: flex-start; }

/* ── Floating cards animation ── */
@keyframes cardFloat {
    0%,100% { transform: translateY(0px)   rotate( 0.25deg); }
    50%      { transform: translateY(-9px) rotate(-0.25deg); }
}

.idx-swipe-card {
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 8px 30px rgba(0,0,0,.10), 0 2px 8px rgba(0,0,0,.06);
    background: var(--white);
    border: 1px solid var(--border-l);
    transition: box-shadow .35s;
    will-change: transform;
    animation: cardFloat 4.5s ease-in-out infinite;
    cursor: grab;
}
.idx-swipe-card:active { cursor: grabbing; }
.idx-swipe-card:hover  { box-shadow: 0 18px 50px rgba(11,30,74,.14); }

/* Stagger float phases */
.swiper-slide:nth-child(2n) .idx-swipe-card  { animation-delay: -1.5s; }
.swiper-slide:nth-child(3n) .idx-swipe-card  { animation-delay: -3s; }
.swiper-slide:nth-child(4n) .idx-swipe-card  { animation-delay: -0.75s; }
.swiper-slide:nth-child(5n) .idx-swipe-card  { animation-delay: -2.25s; }

/* ── Speaker swipe card ── */
.idx-spk-swiper .swiper-slide { width: 260px; }

.idx-swipe-spk-photo {
    position: relative; height: 220px; overflow: hidden;
    background: linear-gradient(135deg, #0a1628, #1a3280);
}
.idx-swipe-spk-photo img {
    width: 100%; height: 100%; object-fit: cover; object-position: top;
    transition: transform .5s;
}
.idx-swipe-card:hover .idx-swipe-spk-photo img { transform: scale(1.06); }
.idx-swipe-spk-overlay {
    position: absolute; inset: 0;
    background: linear-gradient(to top, rgba(11,30,74,.72) 0%, transparent 50%);
}
.idx-swipe-spk-theme {
    position: absolute; top: 12px; left: 12px;
    font-size: .55rem; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase;
    color: var(--gold); background: rgba(5,13,26,.72);
    padding: 3px 9px; border-radius: 50px;
}
.idx-swipe-spk-body { padding: 18px 18px 14px; }
.idx-swipe-spk-name {
    font-family: 'Playfair Display', serif;
    font-size: .95rem; font-weight: 700; color: var(--ink-900);
    line-height: 1.3; margin-bottom: 4px;
}
.idx-swipe-spk-title {
    font-size: .68rem; color: var(--navy-m); font-weight: 600;
    margin-bottom: 7px; line-height: 1.4;
}
.idx-swipe-spk-affil {
    font-size: .66rem; color: var(--ink-400);
    display: flex; align-items: center; gap: 4px;
}
.idx-swipe-spk-foot {
    padding: 12px 18px 16px;
    border-top: 1px solid var(--border-l);
}
.idx-swipe-profile-btn {
    display: inline-flex; align-items: center; gap: 6px;
    font-size: .72rem; font-weight: 700; color: var(--navy);
    text-decoration: none; transition: gap .2s, color .2s;
}
.idx-swipe-profile-btn:hover { gap: 10px; color: var(--gold); }

/* ── Committee swipe card ── */
.idx-comm-swiper .swiper-slide { width: 220px; }

.idx-swipe-comm-card {
    padding: 26px 20px 22px;
    text-align: center;
}
.idx-swipe-comm-avatar {
    width: 62px; height: 62px; border-radius: 50%;
    background: linear-gradient(135deg, var(--navy), var(--navy-m));
    color: #fff; font-family: 'Playfair Display', serif;
    font-size: 1.1rem; font-weight: 700;
    display: flex; align-items: center; justify-content: center;
    margin: 0 auto 14px;
    box-shadow: 0 4px 16px rgba(11,30,74,.25);
}
.idx-swipe-comm-name {
    font-family: 'Playfair Display', serif;
    font-size: .88rem; font-weight: 700; color: var(--ink-900);
    line-height: 1.3; margin-bottom: 5px;
}
.idx-swipe-comm-role {
    font-size: .65rem; font-weight: 600; color: var(--navy-m);
    text-transform: uppercase; letter-spacing: 1px; margin-bottom: 4px;
}
.idx-swipe-comm-affil {
    font-size: .63rem; color: var(--ink-400); line-height: 1.4;
}

@media (max-width: 600px) {
    .idx-spk-swiper .swiper-slide  { width: 220px; }
    .idx-comm-swiper .swiper-slide { width: 190px; }
    .idx-slider-hdr { flex-direction: column; align-items: flex-start; }
}

/* ══════════════════════════════════════════════════════
   RESEARCH TRACKS — Redesigned
══════════════════════════════════════════════════════ */

/* Track 01 — Featured */
.trk-featured {
    display: grid;
    grid-template-columns: 1fr 1.05fr;
    min-height: 320px;
    margin: 0 0 8px;
    border-radius: 16px;
    overflow: hidden;
    border: 1.5px solid rgba(11,30,74,.12);
    box-shadow: 0 4px 24px rgba(11,30,74,.09);
}

.trk-feat-img {
    position: relative;
    overflow: hidden;
    min-height: 280px;
}
.trk-feat-img img {
    width: 100%; height: 100%;
    object-fit: cover;
    transition: transform .7s ease;
    display: block;
}
.trk-featured:hover .trk-feat-img img { transform: scale(1.05); }

.trk-feat-img-overlay {
    position: absolute; inset: 0;
    background: linear-gradient(120deg, rgba(11,30,74,.60) 0%, rgba(11,30,74,.20) 100%);
}

.trk-feat-badge {
    position: absolute;
    bottom: 24px; left: 24px;
    display: flex; align-items: center; gap: 10px;
}
.trk-num-badge {
    font-family: 'Cormorant Garamond', serif;
    font-size: 2.6rem; font-weight: 700;
    color: rgba(255,255,255,.95);
    line-height: 1;
    text-shadow: 0 2px 12px rgba(0,0,0,.5);
}
.trk-tag-badge {
    font-size: .55rem; font-weight: 700;
    letter-spacing: 2.5px; text-transform: uppercase;
    color: var(--gold-l);
    background: rgba(0,0,0,.35);
    padding: 4px 10px; border-radius: 50px;
    border: 1px solid rgba(181,146,74,.35);
}

.trk-feat-body {
    background: #fff;
    padding: clamp(1.8rem,3.5vw,3rem) clamp(1.5rem,3.5vw,3rem);
    display: flex; flex-direction: column; justify-content: center;
    border-left: 1.5px solid rgba(11,30,74,.08);
}
.trk-feat-eyebrow {
    font-size: .58rem; font-weight: 700;
    letter-spacing: 2.5px; text-transform: uppercase;
    color: var(--gold);
    display: flex; align-items: center; gap: 8px;
    margin-bottom: 12px;
}
.trk-feat-eyebrow::before {
    content: ''; width: 24px; height: 1.5px;
    background: var(--gold);
}
.trk-feat-title {
    font-family: 'Playfair Display', serif;
    font-size: clamp(1.3rem,2.5vw,1.9rem);
    font-weight: 800; color: var(--ink-900);
    line-height: 1.2; margin-bottom: 14px;
}
.trk-feat-desc {
    font-size: .88rem; color: var(--ink-500);
    line-height: 1.85; margin-bottom: 20px;
}
.trk-feat-list {
    list-style: none; padding: 0; margin: 0;
    display: flex; flex-direction: column; gap: 8px;
}
.trk-feat-list li {
    font-size: .82rem; color: var(--ink-500);
    display: flex; align-items: flex-start; gap: 10px;
    line-height: 1.5;
}
.trk-feat-list li::before {
    content: '';
    width: 6px; height: 6px; border-radius: 50%;
    background: var(--navy); flex-shrink: 0;
    margin-top: 6px;
}

/* Tracks 02 & 03 — Image cards */
.trk-pair-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin-bottom: 8px;
}

.trk-img-card {
    position: relative;
    min-height: 280px;
    border-radius: 16px;
    overflow: hidden;
    border: 1.5px solid rgba(255,255,255,.15);
    box-shadow: 0 4px 20px rgba(0,0,0,.15);
    display: flex; flex-direction: column; justify-content: flex-end;
    cursor: default;
    background: #0b1828;
}
.trk-img-card-bg {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    object-fit: cover;
    opacity: .75;
    transition: opacity .5s ease, transform .6s ease;
    display: block;
}
.trk-img-card:hover .trk-img-card-bg {
    opacity: .90; transform: scale(1.05);
}
.trk-img-card-overlay {
    position: absolute; inset: 0;
    background: linear-gradient(0deg, rgba(7,14,28,.90) 0%, rgba(7,14,28,.45) 50%, rgba(7,14,28,.10) 100%);
}
.trk-img-card-body {
    position: relative; z-index: 2;
    padding: 24px 26px;
}
.trk-img-num {
    font-family: 'Cormorant Garamond', serif;
    font-size: 2rem; font-weight: 700;
    color: rgba(181,146,74,.35); line-height: 1;
    display: block; margin-bottom: 6px;
}
.trk-img-track {
    font-size: .52rem; font-weight: 700;
    letter-spacing: 2.5px; text-transform: uppercase;
    color: var(--gold-l);
    display: flex; align-items: center; gap: 7px;
    margin-bottom: 8px;
}
.trk-img-track::before {
    content: ''; width: 16px; height: 1px;
    background: var(--gold); opacity: .7;
}
.trk-img-title {
    font-family: 'Playfair Display', serif;
    font-size: 1.15rem; font-weight: 700;
    color: #fff; line-height: 1.25; margin-bottom: 10px;
}
.trk-img-desc {
    font-size: .78rem; color: rgba(220,232,248,.82);
    line-height: 1.7;
}
.trk-img-card-bar {
    position: absolute; bottom: 0; left: 0; right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--gold), var(--gold-l));
    transform: scaleX(0); transform-origin: left;
    transition: transform .4s cubic-bezier(.22,1,.36,1);
}
.trk-img-card:hover .trk-img-card-bar { transform: scaleX(1); }

/* Tracks 04 & 05 — Plain content cards */
.trk-plain-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}

.trk-plain-card {
    border-radius: 16px;
    padding: clamp(1.8rem,3vw,2.8rem);
    position: relative; overflow: hidden;
    border: 1.5px solid transparent;
    transition: transform .25s, box-shadow .25s;
}
.trk-plain-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 40px rgba(11,30,74,.14);
}

.trk-plain-light {
    background: #f4f7fc;
    border-color: rgba(11,30,74,.12);
}
.trk-plain-dark {
    background: var(--navy);
    border-color: rgba(255,255,255,.10);
}

.trk-plain-num {
    font-family: 'Cormorant Garamond', serif;
    font-size: 4.5rem; font-weight: 700; line-height: 1;
    position: absolute; top: 14px; right: 20px;
    pointer-events: none;
}
.trk-plain-light .trk-plain-num { color: rgba(11,30,74,.07); }
.trk-plain-dark  .trk-plain-num { color: rgba(255,255,255,.06); }

.trk-plain-icon {
    width: 46px; height: 46px; border-radius: 12px;
    display: flex; align-items: center; justify-content: center;
    margin-bottom: 18px; flex-shrink: 0;
}
.trk-plain-light .trk-plain-icon {
    background: var(--navy);
    color: #fff;
    box-shadow: 0 6px 20px rgba(11,30,74,.25);
}
.trk-plain-dark .trk-plain-icon {
    background: rgba(255,255,255,.10);
    color: var(--gold-l);
    border: 1px solid rgba(181,146,74,.25);
}
.trk-plain-icon svg { width: 22px; height: 22px; }

.trk-plain-track {
    font-size: .54rem; font-weight: 700;
    letter-spacing: 2.5px; text-transform: uppercase;
    margin-bottom: 10px;
    display: flex; align-items: center; gap: 8px;
}
.trk-plain-light .trk-plain-track { color: var(--gold); }
.trk-plain-dark  .trk-plain-track { color: rgba(181,146,74,.75); }
.trk-plain-track::before {
    content: ''; width: 18px; height: 1.5px;
}
.trk-plain-light .trk-plain-track::before { background: var(--gold); }
.trk-plain-dark  .trk-plain-track::before { background: rgba(181,146,74,.5); }

.trk-plain-title {
    font-family: 'Playfair Display', serif;
    font-size: clamp(1.05rem,2vw,1.35rem);
    font-weight: 700; line-height: 1.3; margin-bottom: 12px;
}
.trk-plain-light .trk-plain-title { color: var(--ink-900); }
.trk-plain-dark  .trk-plain-title { color: rgba(235,242,252,.95); }

.trk-plain-desc {
    font-size: .84rem; line-height: 1.8;
}
.trk-plain-light .trk-plain-desc { color: var(--ink-500); }
.trk-plain-dark  .trk-plain-desc { color: rgba(196,212,232,.75); }

/* Responsive */
@media (max-width: 900px) {
    .trk-featured { grid-template-columns: 1fr; }
    .trk-feat-img  { min-height: 220px; }
    .trk-pair-row, .trk-plain-row { grid-template-columns: 1fr; }
    .trk-img-card  { min-height: 220px; }
}