/* =========================================================
   Developer Training Program on Data Protection
   Palette:  #780000 maroon | #c1121f red | #fdf0d5 cream
             #003049 navy   | #669bbc steel
   Type:     Playfair Display (display) / Source Sans 3 (body)
             JetBrains Mono (data / time / labels)
   ========================================================= */
/* ===== Self-hosted fonts (no internet required) ===== */
@font-face {
    font-family: 'Playfair Display';
    src: url('../fonts/PlayfairDisplay-Medium.ttf') format('truetype');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Playfair Display';
    src: url('../fonts/PlayfairDisplay-SemiBold.ttf') format('truetype');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Playfair Display';
    src: url('../fonts/PlayfairDisplay-Bold.ttf') format('truetype');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Playfair Display';
    src: url('../fonts/PlayfairDisplay-ExtraBold.ttf') format('truetype');
    font-weight: 800;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Playfair Display';
    src: url('../fonts/PlayfairDisplay-Black.ttf') format('truetype');
    font-weight: 900;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Playfair Display';
    src: url('../fonts/PlayfairDisplay-SemiBoldItalic.ttf') format('truetype');
    font-weight: 600;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Playfair Display';
    src: url('../fonts/PlayfairDisplay-BoldItalic.ttf') format('truetype');
    font-weight: 700;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Source Sans 3';
    src: url('../fonts/SourceSans3-Regular.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Source Sans 3';
    src: url('../fonts/SourceSans3-Medium.ttf') format('truetype');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Source Sans 3';
    src: url('../fonts/SourceSans3-SemiBold.ttf') format('truetype');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Source Sans 3';
    src: url('../fonts/SourceSans3-Bold.ttf') format('truetype');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'JetBrains Mono';
    src: url('../fonts/JetBrainsMono-Regular.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'JetBrains Mono';
    src: url('../fonts/JetBrainsMono-Medium.ttf') format('truetype');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'JetBrains Mono';
    src: url('../fonts/JetBrainsMono-SemiBold.ttf') format('truetype');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

:root {
    --maroon: #780000;
    --red: #c1121f;
    --cream: #fdf0d5;
    --navy: #003049;
    --steel: #669bbc;

    --cream-dim: #f4e6c8;
    --navy-soft: #0a4162;

    --font-display: 'Playfair Display', Georgia, serif;
    --font-body: 'Source Sans 3', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --font-mono: 'JetBrains Mono', 'SFMono-Regular', Consolas, monospace;

    --max-w: 1180px;
    --radius: 14px;
    --ease: cubic-bezier(.22, .68, .35, 1);
}

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

html {
    scroll-behavior: smooth;
    font-size: 18px;
}

body {
    margin: 0;
    font-family: var(--font-body);
    color: var(--navy);
    background: var(--cream);
    line-height: 1.65;
    font-size: 1.06rem;
    -webkit-font-smoothing: antialiased;
}

img {
    max-width: 100%;
    display: block;
}

a {
    color: inherit;
}

h1,
h2,
h3 {
    font-family: var(--font-display);
    margin: 0 0 .5em;
    line-height: 1.15;
}

p {
    margin: 0 0 1em;
}

ul,
ol {
    margin: 0;
    padding: 0;
    list-style: none;
}

svg {
    width: 100%;
    height: 100%;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.6;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.section-inner {
    max-width: var(--max-w);
    margin: 0 auto;
    padding: 0 24px;
}

.skip-link {
    position: absolute;
    left: -999px;
    top: 0;
    background: var(--navy);
    color: var(--cream);
    padding: .75rem 1.25rem;
    z-index: 200;
    border-radius: 0 0 8px 0;
}

.skip-link:focus {
    left: 0;
}

:focus-visible {
    outline: 3px solid var(--steel);
    outline-offset: 3px;
}

.eyebrow {
    font-family: var(--font-mono);
    font-size: .95rem;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--steel);
    margin: 0 0 .6em;
}

.eyebrow--dark {
    color: var(--red);
}

.section-title {
    font-size: clamp(1.9rem, 3.6vw, 2.7rem);
    font-weight: 700;
    color: var(--navy);
    max-width: 32ch;
}

.section-title--light {
    color: var(--cream);
}

/* =========================== BUTTONS =========================== */
.btn {
    display: inline-flex;
    align-items: center;
    gap: .5em;
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 1.08rem;
    padding: .85em 1.8em;
    border-radius: 100px;
    text-decoration: none;
    transition: transform .25s var(--ease), box-shadow .25s var(--ease), background .25s;
    border: 2px solid transparent;
}

.btn--primary {
    background: var(--red);
    color: var(--cream);
    box-shadow: 0 8px 20px -8px rgba(193, 18, 31, .6);
}

.btn--primary:hover {
    background: var(--maroon);
    transform: translateY(-2px);
    box-shadow: 0 12px 26px -8px rgba(120, 0, 0, .55);
}

.btn--ghost {
    background: transparent;
    color: var(--cream);
    border-color: rgba(253, 240, 213, .5);
}

.btn--ghost:hover {
    border-color: var(--cream);
    background: rgba(253, 240, 213, .08);
}

.masthead {
    background: var(--cream);
    border-bottom: 4px solid var(--red);
}

.site-header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1000;
}

.site-nav {
    background: var(--navy);
    border-bottom: 1px solid rgba(102, 155, 188, .3);
    position: relative;
}

.site-nav__inner {
    max-width: var(--max-w);
    margin: 0 auto;
    display: none;
    align-items: center;
    justify-content: center;
    gap: 2.2rem;
    padding: .9rem 24px;
}

.site-nav__inner a {
    font-family: var(--font-mono);
    font-size: .92rem;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: rgba(253, 240, 213, .8);
    text-decoration: none;
    position: relative;
    padding: .2rem 0;
    transition: color .25s;
}

.site-nav__inner a::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -4px;
    width: 0;
    height: 2px;
    background: var(--red);
    transition: width .25s var(--ease);
}

.site-nav__inner a:hover {
    color: var(--cream);
}

.site-nav__inner a:hover::after {
    width: 100%;
}

.site-nav__toggle {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 44px;
    height: 44px;
    margin: 0 auto;
    background: none;
    border: none;
    cursor: pointer;
}

.site-nav__toggle span {
    display: block;
    width: 24px;
    height: 2px;
    background: var(--cream);
    margin: 0 auto;
    transition: transform .25s var(--ease), opacity .25s;
}

/* Desktop: show horizontal links, hide the burger */
@media (min-width:800px) {
    .site-nav__inner {
        display: flex;
    }

    .site-nav__toggle {
        display: none;
    }
}

/* Mobile: burger toggles a stacked dropdown */
@media (max-width:799px) {
    .site-nav__inner {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: flex-start;
        gap: 0;
        padding: 0;
        max-height: 0;
        overflow: hidden;
        transition: max-height .35s var(--ease);
    }

    .site-nav__inner a {
        width: 100%;
        text-align: center;
        padding: .9rem 0;
        border-top: 1px solid rgba(102, 155, 188, .18);
    }

    .site-nav.is-open .site-nav__inner {
        max-height: 600px;
    }

    .site-nav.is-open .site-nav__toggle span:nth-child(1) {
        transform: translateY(7px) rotate(45deg);
    }

    .site-nav.is-open .site-nav__toggle span:nth-child(2) {
        opacity: 0;
    }

    .site-nav.is-open .site-nav__toggle span:nth-child(3) {
        transform: translateY(-7px) rotate(-45deg);
    }
}

.masthead__inner {
    max-width: var(--max-w);
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    padding: .9rem 24px;
}

.masthead__org {
    display: flex;
    align-items: center;
    gap: 1rem;
    min-width: 0;
}

.masthead__org--right {
    flex-direction: row-reverse;
    text-align: right;
}

.masthead__logo {
    height: 72px;
    width: auto;
    object-fit: contain;
}

.masthead__org-fallback {
    display: none;
    align-items: center;
    gap: .7rem;
}

.masthead__org.logo-fallback .masthead__logo {
    display: none;
}

.masthead__org.logo-fallback .masthead__org-fallback {
    display: flex;
}

.masthead__org--right .masthead__org-fallback {
    flex-direction: row-reverse;
}

.fallback-emblem {
    width: 52px;
    height: 52px;
    flex: 0 0 auto;
    fill: var(--maroon);
    stroke: none;
}

.fallback-emblem--cdac {
    fill: var(--navy);
}

.masthead__org-text {
    font-family: var(--font-mono);
    font-size: .85rem;
    line-height: 1.4;
    color: var(--navy);
    letter-spacing: .01em;
}

.masthead__divider {
    width: 1px;
    height: 44px;
    background: linear-gradient(var(--steel), transparent);
    flex: 0 0 auto;
    display: none;
}

@media (min-width:640px) {
    .masthead__divider {
        display: block;
    }
}

@media (max-width:520px) {
    .masthead__logo {
        height: 52px;
    }
}

/* =========================== HERO =========================== */
.hero {
    position: relative;
    background: radial-gradient(120% 140% at 15% 0%, var(--navy-soft) 0%, var(--navy) 55%, #002233 100%);
    color: var(--cream);
    overflow: hidden;
    padding: clamp(3.5rem, 9vw, 7rem) 24px clamp(4rem, 9vw, 7.5rem);
}

/* --- ambient colour field: slow drifting blurred blobs, no repeating grid --- */
.hero__aurora {
    position: absolute;
    inset: 0;
    overflow: hidden;
}

.aurora {
    position: absolute;
    border-radius: 50%;
    filter: blur(70px);
    opacity: .5;
    will-change: transform;
}

.aurora--a {
    width: 52vw;
    height: 52vw;
    max-width: 620px;
    max-height: 620px;
    background: radial-gradient(circle, rgba(193, 18, 31, .55), transparent 70%);
    top: -14%;
    right: -10%;
    animation: drift-a 26s ease-in-out infinite;
}

.aurora--b {
    width: 40vw;
    height: 40vw;
    max-width: 480px;
    max-height: 480px;
    background: radial-gradient(circle, rgba(102, 155, 188, .5), transparent 70%);
    bottom: -16%;
    left: -8%;
    animation: drift-b 32s ease-in-out infinite;
}

.aurora--c {
    width: 28vw;
    height: 28vw;
    max-width: 340px;
    max-height: 340px;
    background: radial-gradient(circle, rgba(120, 0, 0, .55), transparent 70%);
    top: 30%;
    left: 38%;
    animation: drift-c 22s ease-in-out infinite;
}

@keyframes drift-a {

    0%,
    100% {
        transform: translate(0, 0) scale(1);
    }

    50% {
        transform: translate(-4%, 6%) scale(1.08);
    }
}

@keyframes drift-b {

    0%,
    100% {
        transform: translate(0, 0) scale(1);
    }

    50% {
        transform: translate(5%, -5%) scale(1.05);
    }
}

@keyframes drift-c {

    0%,
    100% {
        transform: translate(0, 0) scale(1);
    }

    50% {
        transform: translate(-6%, -8%) scale(1.12);
    }
}

/* --- watermark shield with a continuously traced outline (security "scan") --- */
.hero__scan-shield {
    position: absolute;
    right: 6%;
    top: 50%;
    transform: translateY(-50%);
    /* was right:-4% */
    width: min(38vw, 380px);
    height: auto;
    /* was min(46vw,420px) */
    opacity: .9;
    pointer-events: none;
}

.scan-shield__outline {
    fill: none;
    stroke: rgba(253, 240, 213, .08);
    stroke-width: 2;
}

.scan-shield__trace {
    fill: none;
    stroke: var(--red);
    stroke-width: 2.4;
    stroke-linecap: round;
    stroke-dasharray: 70 900;
    stroke-dashoffset: 0;
    filter: drop-shadow(0 0 6px rgba(193, 18, 31, .7));
    animation: trace-shield 7s linear infinite;
}

@keyframes trace-shield {
    from {
        stroke-dashoffset: 0;
    }

    to {
        stroke-dashoffset: -970;
    }
}

.hero__inner {
    position: relative;
    max-width: var(--max-w);
    margin: 0 auto;
}

.hero__title {
    font-size: clamp(2.8rem, 7.2vw, 5.2rem);
    font-weight: 800;
    color: var(--cream);
    max-width: 14ch;
}

.hero__title-accent {
    font-style: italic;
    font-weight: 700;
    color: var(--steel);
    position: relative;
}

.hero__tagline {
    font-size: clamp(1.15rem, 1.8vw, 1.4rem);
    max-width: 46ch;
    color: rgba(253, 240, 213, .88);
    margin-bottom: 2.2rem;
}

.hero__facts {
    display: flex;
    flex-wrap: wrap;
    gap: .8rem 1.4rem;
    margin-bottom: 2.4rem;
}

.fact {
    display: flex;
    align-items: center;
    gap: .6rem;
    font-family: var(--font-mono);
    font-size: 1rem;
    letter-spacing: .02em;
    color: var(--cream);
    padding: .6em 1.1em;
    border: 1px solid rgba(102, 155, 188, .4);
    border-radius: 100px;
    background: rgba(253, 240, 213, .05);
}

.fact__icon {
    width: 18px;
    height: 18px;
    color: var(--red);
    flex: 0 0 auto;
}

.fact__icon svg {
    stroke: var(--red);
}

.hero__cta {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    margin-bottom: 1rem;
}

.hero__seats {
    font-family: var(--font-mono);
    font-size: .9rem;
    letter-spacing: .03em;
    color: var(--steel);
}

/* =========================== OVERVIEW =========================== */
.overview {
    padding: clamp(3.5rem, 8vw, 6rem) 0;
}

.overview__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 3rem;
    align-items: center;
}

@media (min-width:840px) {
    .overview__grid {
        grid-template-columns: 1.15fr .85fr;
        gap: 4rem;
    }
}

.overview__lead {
    font-size: 1.2rem;
    color: var(--navy);
}

.overview__copy p:last-child {
    color: #2c5570;
    font-size: 1.05rem;
}

.overview__visual {
    display: flex;
    justify-content: center;
}

.shield-graphic {
    max-width: 230px;
    filter: drop-shadow(0 18px 30px rgba(120, 0, 0, .25));
}

/* =========================== LEARNING AREAS =========================== */
.learning {
    background: var(--navy);
    color: var(--cream);
    padding: clamp(3.5rem, 8vw, 6rem) 0;
}

.learning .eyebrow--dark {
    color: #ff8a80;
}

.learning .section-title {
    color: var(--cream);
}

.learning__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.2rem;
    margin: 2.6rem 0 0;
}

@media (min-width:640px) {
    .learning__grid {
        grid-template-columns: 1fr 1fr;
    }
}

@media (min-width:1000px) {
    .learning__grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

.learning-card {
    background: rgba(253, 240, 213, .045);
    border: 1px solid rgba(102, 155, 188, .28);
    border-radius: var(--radius);
    padding: 1.8rem 1.6rem;
    transition: transform .3s var(--ease), background .3s, border-color .3s;
}

.learning-card:hover {
    transform: translateY(-4px);
    background: rgba(253, 240, 213, .08);
    border-color: var(--steel);
}

.learning-card__icon {
    display: inline-flex;
    width: 42px;
    height: 42px;
    color: var(--red);
    margin-bottom: 1rem;
}

.learning-card h3 {
    font-size: 1.25rem;
    color: var(--cream);
    margin-bottom: .45rem;
}

.learning-card p {
    font-size: 1.02rem;
    color: rgba(253, 240, 213, .75);
    margin: 0;
}

/* =========================== SPEAKERS STRIP =========================== */
.speakers-strip {
    background: var(--red);
    color: var(--cream);
    padding: 2rem 0;
}

.speakers-strip__inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.4rem;
    text-align: center;
}

.speakers-strip__label {
    margin: 0;
    font-family: var(--font-mono);
    font-size: .9rem;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: rgba(253, 240, 213, .8);
}

.speakers-strip__logos {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 2.4rem;
}

.speakers-strip__logo-item {
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--cream);
    border-radius: 12px;
    padding: 1.1rem 2rem;
    height: 96px;
    box-shadow: 0 8px 18px -8px rgba(0, 0, 0, .35);
}

.speakers-strip__logo-item img {
    height: 100%;
    width: auto;
    max-width: 220px;
    object-fit: contain;
}

.speakers-strip__fallback {
    display: none;
    font-family: var(--font-mono);
    font-weight: 600;
    color: var(--navy);
    font-size: 1rem;
}

.speakers-strip__logo-item.logo-fallback img {
    display: none;
}

.speakers-strip__logo-item.logo-fallback .speakers-strip__fallback {
    display: block;
}

@media (max-width:520px) {
    .speakers-strip__logos {
        gap: 1.2rem;
    }

    .speakers-strip__logo-item {
        height: 72px;
        padding: .8rem 1.4rem;
    }
}

/* =========================== SCHEDULE / TIMELINE =========================== */
.schedule {
    padding: clamp(3.5rem, 8vw, 6rem) 0 0;
}

.schedule__lead {
    color: #2c5570;
    max-width: 46ch;
    font-size: 1.08rem;
}

.timeline {
    position: relative;
    max-width: var(--max-w);
    margin: 2.8rem auto 0;
    padding: 1rem 24px clamp(3rem, 8vw, 5rem);
}

.timeline__track {
    position: absolute;
    left: 50%;
    top: 0;
    bottom: clamp(3rem, 8vw, 5rem);
    width: 3px;
    transform: translateX(-50%);
    background: rgba(102, 155, 188, .28);
    border-radius: 3px;
}

.timeline__progress {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 0%;
    background: linear-gradient(var(--red), var(--maroon));
    border-radius: 3px;
    transition: height .15s linear;
}

.timeline__list {
    position: relative;
}

.timeline__item {
    position: relative;
    display: grid;
    grid-template-columns: 1fr;
    padding-left: 76px;
    margin-bottom: 2.6rem;
}

.timeline__item:last-child {
    margin-bottom: 0;
}

.timeline__node {
    position: absolute;
    left: 16px;
    top: 0;
    width: 46px;
    height: 46px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--cream);
    border: 3px solid var(--steel);
    color: var(--steel);
    transform: scale(.72);
    transition: transform .5s var(--ease), border-color .4s, color .4s, background .4s, box-shadow .4s;
    z-index: 2;
}

.timeline__node--break {
    width: 40px;
    height: 40px;
    left: 19px;
    opacity: .9;
}

.node-icon {
    width: 22px;
    height: 22px;
    transition: transform .4s var(--ease);
}

/* revealed: node has been scrolled past, stays "visited" in outline red */
.timeline__item.in-view .timeline__node {
    transform: scale(1);
    border-color: var(--red);
    color: var(--red);
}

/* active: currently the centred / focused session — icon fills solid */
.timeline__item.is-active .timeline__node {
    background: var(--red);
    border-color: var(--maroon);
    color: var(--cream);
    box-shadow: 0 0 0 7px rgba(193, 18, 31, .16), 0 10px 24px -8px rgba(120, 0, 0, .45);
    transform: scale(1.12);
}

.timeline__item.is-active .node-icon {
    transform: scale(1.08);
}

.timeline__card {
    background: #fff;
    border: 1px solid rgba(102, 155, 188, .3);
    border-radius: var(--radius);
    padding: 1.7rem 1.7rem;
    opacity: 0;
    transform: translateY(18px) scale(.98);
    transition: opacity .6s var(--ease), transform .6s var(--ease), border-color .4s, box-shadow .4s;
}

.timeline__item.in-view .timeline__card {
    opacity: 1;
    transform: translateY(0) scale(1);
}

.timeline__item.is-active .timeline__card {
    border-color: var(--red);
    box-shadow: 0 14px 30px -14px rgba(120, 0, 0, .35);
}

.timeline__card--break {
    background: var(--cream-dim);
    border-style: dashed;
    padding: 1.2rem 1.7rem;
}

.timeline__card--break h3 {
    font-size: 1.08rem;
    margin: 0;
    color: #2c5570;
    font-weight: 600;
    font-family: var(--font-body);
}

.timeline__time {
    display: inline-block;
    font-family: var(--font-mono);
    font-size: .92rem;
    letter-spacing: .03em;
    color: var(--red);
    margin-bottom: .55rem;
}

.timeline__card h3 {
    font-size: 1.3rem;
    color: var(--navy);
    margin-bottom: .55rem;
}

.timeline__meta {
    font-size: .95rem;
    color: var(--steel);
    margin-bottom: .4rem;
}

.timeline__card p:last-child {
    margin-bottom: 0;
    color: #294a5f;
    font-size: 1.04rem;
}

.speaker {
    display: flex;
    align-items: center;
    gap: .8rem;
    margin: .7rem 0 .9rem;
}

.speaker__avatar {
    width: clamp(64px, 22vw, 150px);
    height: clamp(64px, 22vw, 150px);
    border-radius: 50%;
    overflow: hidden;
    flex: 0 0 auto;
    background: linear-gradient(135deg, var(--steel), var(--navy));
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid var(--cream-dim);
    box-shadow: 0 0 0 1px rgba(102, 155, 188, .4);
}

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

.speaker__meta {
    display: flex;
    flex-direction: column;
    line-height: 1.35;
}

.speaker__meta strong {
    font-size: clamp(1.05rem, 4.6vw, 1.5rem);
    color: var(--navy);
}

.speaker__meta em {
    font-style: normal;
    font-family: var(--font-mono);
    font-size: .85rem;
    color: var(--steel);
}

/* Desktop: alternate sides around a centred spine */
@media (min-width:760px) {
    .timeline__track {
        left: 50%;
    }

    .timeline__item {
        grid-template-columns: 1fr 46px 1fr;
        column-gap: 2.4rem;
        padding-left: 0;
    }

    .timeline__item .timeline__card {
        grid-column: 1;
    }

    .timeline__item .timeline__node {
        position: relative;
        left: auto;
        top: auto;
        grid-column: 2;
        align-self: start;
    }

    .timeline__item::after {
        content: "";
        grid-column: 3;
    }

    .timeline__item--right {
        grid-template-columns: 1fr 46px 1fr;
    }

    /* Default = Left */
    .timeline__item .timeline__card {
        grid-column: 1;
    }

    .timeline__item::after {
        content: "";
        grid-column: 3;
    }

    /* Every even item goes to the right automatically */
    .timeline__item:nth-child(even) .timeline__card {
        grid-column: 3;
    }

    .timeline__item:nth-child(even)::before {
        content: "";
        grid-column: 1;
    }

    .timeline__item:nth-child(even)::after {
        content: none;
    }

    /* Animation direction */
    .timeline__item:nth-child(odd) .timeline__card {
        transform: translateX(-18px) scale(.98);
    }

    .timeline__item:nth-child(even) .timeline__card {
        transform: translateX(18px) scale(.98);
    }

    .timeline__item.in-view .timeline__card {
        transform: translateX(0) scale(1);
    }

    .timeline__item.in-view .timeline__card {
        transform: translateX(0) scale(1);
    }
}

/* =========================== REGISTRATION =========================== */
.register {
    background: linear-gradient(160deg, var(--maroon), var(--navy) 78%);
    color: var(--cream);
    padding: clamp(3.5rem, 8vw, 6rem) 0;
}

.register__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2.6rem;
    align-items: center;
}

@media (min-width:800px) {
    .register__grid {
        grid-template-columns: 1.2fr .8fr;
    }
}

.register__copy p {
    color: rgba(253, 240, 213, .85);
    font-size: 1.08rem;
}

.register__link {
    display: inline-flex;
    align-items: center;
    gap: .6rem;
    font-family: var(--font-mono);
    font-weight: 600;
    font-size: 1.4rem;
    color: var(--cream);
    background: rgba(253, 240, 213, .08);
    border: 2px solid var(--red);
    border-radius: 100px;
    padding: .7em 1.4em;
    text-decoration: none;
    margin: .5rem 0 1.1rem;
    transition: background .25s, transform .25s var(--ease);
    max-width: 100%;
    word-break: break-word;
}

.register__link:hover {
    background: rgba(253, 240, 213, .16);
    transform: translateY(-2px);
}

.register__link svg {
    width: 20px;
    height: 20px;
    color: var(--red);
    flex: 0 0 auto;
}

.register__email {
    font-size: 1.02rem;
}

.register__email a {
    color: var(--steel);
    text-decoration: underline;
}

.register__qr {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .9rem;
}

.qr-frame {
    background: var(--cream);
    padding: 16px;
    border-radius: 16px;
    box-shadow: 0 20px 40px -14px rgba(0, 0, 0, .45);
    width: 190px;
    height: 190px;
    max-width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.qr-frame img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.qr-fallback__label {
    display: none;
    flex-direction: column;
    align-items: center;
    gap: .5rem;
    color: var(--navy);
    text-align: center;
    font-family: var(--font-mono);
    font-size: .78rem;
}

.qr-fallback__label svg {
    width: 68px;
    height: 68px;
    color: var(--red);
}

.qr-frame.qr-fallback img {
    display: none;
}

.qr-frame.qr-fallback .qr-fallback__label {
    display: flex;
}

.qr-caption {
    margin: 0;
    font-family: var(--font-mono);
    font-size: .88rem;
    color: var(--steel);
}

/* ---- Mobile fix: shrink the register pill and centre everything ---- */
@media (max-width:520px) {
    .register__grid {
        justify-items: center;
        text-align: center;
    }

    .register__link {
        font-size: 1.05rem;
        padding: .65em 1.1em;
        border-radius: 14px;
        white-space: normal;
        text-align: center;
        justify-content: center;
    }

    .qr-frame {
        width: 150px;
        height: 150px;
        padding: 12px;
    }
}

/* =========================== FOOTER =========================== */
.site-footer {
    background: #001824;
    color: rgba(253, 240, 213, .7);
    padding: 2.8rem 0;
}

.site-footer__inner {
    display: flex;
    flex-direction: column;
    gap: 2rem;
    justify-content: space-between;
}

@media (min-width:700px) {
    .site-footer__inner {
        flex-direction: row;
        align-items: flex-start;
    }
}

.site-footer__brand {
    max-width: 32ch;
}

.site-footer__title {
    display: block;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 1.15rem;
    color: var(--cream);
}

.site-footer__meta {
    display: block;
    font-size: .92rem;
    margin-top: .4rem;
    color: rgba(253, 240, 213, .6);
}

.site-footer__contact h3 {
    font-family: var(--font-mono);
    font-size: .85rem;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--steel);
    margin: 0 0 .8rem;
    font-weight: 600;
}

.site-footer__contact ul {
    display: flex;
    flex-direction: column;
    gap: .55rem;
}

.site-footer__contact li {
    font-size: .95rem;
    max-width: 42ch;
    line-height: 1.5;
}

.site-footer__contact a {
    text-decoration: underline;
    color: var(--cream);
}

/* =========================== MOTION PREFERENCES =========================== */
@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    .aurora,
    .scan-shield__trace {
        animation: none;
    }

    .timeline__card,
    .timeline__node,
    .node-icon,
    .btn {
        transition: none;
    }

    .timeline__item .timeline__card {
        opacity: 1;
        transform: none;
    }

    .timeline__node {
        transform: scale(1);
    }
}

/* =========================== BACK TO TOP =========================== */
.back-to-top {
    position: fixed;
    right: 22px;
    bottom: 22px;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    border: none;
    background: var(--red);
    color: var(--cream);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 10px 24px -8px rgba(120, 0, 0, .55);
    opacity: 0;
    visibility: hidden;
    transform: translateY(12px);
    transition: opacity .3s var(--ease), transform .3s var(--ease), background .25s;
    z-index: 150;
}

.back-to-top svg {
    width: 22px;
    height: 22px;
}

.back-to-top.is-visible {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.back-to-top:hover {
    background: var(--maroon);
}

@media (prefers-reduced-motion: reduce) {
    .back-to-top {
        transition: opacity .2s, visibility .2s;
    }
}

/* =========================== VENUE MAP =========================== */
.venue {
    padding: clamp(3.5rem, 8vw, 6rem) 0;
}

.venue__lead {
    color: #2c5570;
    font-size: 1.08rem;
    max-width: 52ch;
}

.venue__map-wrap {
    margin-top: 2.2rem;
    position: relative;
    width: 100%;
    height: clamp(280px, 42vw, 460px);
    border-radius: var(--radius);
    overflow: hidden;
    border: 1px solid rgba(102, 155, 188, .3);
    box-shadow: 0 16px 34px -18px rgba(0, 0, 0, .35);
}

.venue__map {
    position: absolute;
    inset: 0;
    width: 100% !important;
    height: 100% !important;
    border: 0;
    display: block;
}

.fact--link {
    display: flex;
    align-items: center;
    gap: inherit;
    color: inherit;
    text-decoration: none;
}

.fact--link:hover {
    border-color: var(--cream);
}

/* =========================== SPEAKER: NAME + LINKEDIN ICON =========================== */
.speaker__meta strong {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .45rem;
}

@media (max-width: 480px) {
    .speaker {
        gap: .55rem;
    }

    .speaker__linkedin {
        width: 24px;
        height: 24px;
    }
}

.speaker__linkedin {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    overflow: hidden;
    flex: 0 0 auto;
    background: var(--cream);
    border: 1px solid rgba(102, 155, 188, .4);
    box-shadow: 0 2px 6px -2px rgba(0, 0, 0, .3);
    transition: border-color .25s, transform .25s var(--ease), box-shadow .25s;
}

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

.speaker__linkedin:hover {
    border-color: var(--red);
    transform: translateY(-1px);
    box-shadow: 0 4px 10px -2px rgba(120, 0, 0, .4);
}

/* =========================== SPEAKER BIO PARAGRAPH =========================== */
.speaker__bio {
    font-size: .98rem;
    color: #2c5570;
    text-align: justify;
    background: var(--cream-dim);
    border-left: 3px solid var(--steel);
    border-radius: 0 8px 8px 0;
    padding: .85rem 1rem;
    margin: 0 0 1rem;
}

.timeline__item.is-active .speaker__bio {
    border-left-color: var(--red);
}

/* =========================== MULTIPLE SPEAKERS IN ONE CARD =========================== */
.speaker--secondary {
    margin-top: 1.4rem;
    padding-top: 1.4rem;
    border-top: 1px dashed rgba(102, 155, 188, .35);
}

.session-heading {
    margin: 1.4rem 0 .7rem;
    padding-bottom: .35rem;
    border-bottom: 2px solid rgba(102, 155, 188, .25);
    font-family: 'Playfair Display';
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--red);
    letter-spacing: .04em;
    display: flex;
    align-items: center;
    gap: .55rem;
}

.session-heading:first-of-type {
    margin-top: 1rem;
}

/* =========================== TIMELINE GALLERY TRIGGER BUTTON =========================== */
.timeline__gallery {
    margin-top: 1rem;
}

.timeline__gallery-btn {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    padding: .45rem .9rem;
    border: 1px solid rgba(102, 155, 188, .35);
    border-radius: 100px;
    background: var(--cream-dim);
    color: var(--navy);
    font-family: var(--font-mono);
    font-size: .85rem;
    cursor: pointer;
    transition: background .2s, border-color .2s, transform .2s var(--ease);
}

.timeline__gallery-btn:hover {
    background: #eddcb8;
    border-color: var(--red);
    transform: translateY(-1px);
}

.camera-icon {
    width: 18px;
    height: 18px;
    color: var(--red);
    flex: 0 0 auto;
}

/* =========================== FULLSCREEN LIGHTBOX =========================== */
.lightbox {
    position: fixed;
    inset: 0;
    background: rgba(0, 8, 16, .96);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    padding: 2rem 4rem 7rem;
}

.lightbox.is-open {
    display: flex;
}

.lightbox__image {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
    border-radius: 4px;
    box-shadow: 0 20px 60px -20px rgba(0, 0, 0, .7);
}

.lightbox__counter {
    position: absolute;
    top: 1.2rem;
    left: 1.5rem;
    color: var(--cream);
    font-family: var(--font-mono);
    font-size: .95rem;
    letter-spacing: .05em;
    z-index: 5;
}

.lightbox__close {
    position: absolute;
    top: 1rem;
    right: 1.5rem;
    width: 44px;
    height: 44px;
    border: none;
    background: rgba(253, 240, 213, .08);
    color: var(--cream);
    font-size: 1.8rem;
    line-height: 1;
    border-radius: 50%;
    cursor: pointer;
    transition: background .2s;
    z-index: 5;
}

.lightbox__close:hover {
    background: rgba(253, 240, 213, .18);
}

.lightbox__prev,
.lightbox__next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 52px;
    height: 52px;
    border: none;
    border-radius: 50%;
    background: rgba(253, 240, 213, .08);
    color: var(--cream);
    font-size: 1.4rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background .2s;
    z-index: 5;
}

.lightbox__prev:hover,
.lightbox__next:hover {
    background: rgba(253, 240, 213, .18);
}

.lightbox__prev {
    left: 1.5rem;
}

.lightbox__next {
    right: 1.5rem;
}

.lightbox__thumbs {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 1.2rem;
    display: flex;
    gap: .6rem;
    justify-content: center;
    padding: 0 2rem;
    overflow-x: auto;
    scrollbar-width: thin;
}

.lightbox__thumb {
    width: 76px;
    height: 76px;
    object-fit: cover;
    border-radius: 6px;
    flex: 0 0 auto;
    cursor: pointer;
    opacity: .5;
    border: 2px solid transparent;
    transition: opacity .2s, border-color .2s;
}

.lightbox__thumb:hover {
    opacity: .85;
}

.lightbox__thumb.is-active {
    opacity: 1;
    border-color: var(--red);
}

@media (max-width: 640px) {
    .lightbox {
        padding: 4rem 1rem 6.5rem;
    }

    .lightbox__prev,
    .lightbox__next {
        width: 42px;
        height: 42px;
    }

    .lightbox__thumb {
        width: 54px;
        height: 54px;
    }
}

/* =========================== VIDEO TRIGGER (icon next to a talk title) =========================== */
.video-trigger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    flex: 0 0 auto;
    border-radius: 50%;
    border: 1px solid rgba(102, 155, 188, .4);
    background: var(--cream-dim);
    color: var(--red);
    cursor: pointer;
    padding: 0;
    transition: background .2s, transform .2s var(--ease), border-color .2s;
}

.video-trigger:hover {
    background: #eddcb8;
    border-color: var(--red);
    transform: translateY(-1px);
}

.video-trigger svg {
    width: 14px;
    height: 14px;
}

/* highlights whichever trigger's talk is currently loaded in the player */
.video-trigger.is-playing {
    background: var(--red);
    color: var(--cream);
    border-color: var(--maroon);
}

/* h3 titles that carry a trigger need the same inline layout as .session-heading */
.timeline__card h3.has-video {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .6rem;
}

/* =========================== DEDICATED VIDEOS SECTION =========================== */
.videos {
    background: var(--navy);
    color: var(--cream);
    /* padding: clamp(3.5rem, 8vw, 6rem) 0; */
    padding: 2rem 0 6rem;
}

.videos .eyebrow--dark {
    color: #ff8a80;
}

.videos .section-title {
    color: var(--cream);
}

.videos__lead {
    color: rgba(253, 240, 213, .75);
    max-width: 56ch;
    font-size: 1.05rem;
}

.videos__layout {
    margin-top: 2.4rem;
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.6rem;
}

/* the shared player: a 16:9 embed with a prev/next/close footer */
.video-panel {
    border: 1px solid rgba(102, 155, 188, .35);
    border-radius: var(--radius);
    overflow: hidden;
    background: #001824;
    animation: video-panel-in .35s var(--ease);
}

.video-panel[hidden] {
    display: none;
}

@keyframes video-panel-in {
    from {
        opacity: 0;
        transform: translateY(-8px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.video-panel__frame {
    position: relative;
    width: 100%;
    padding-top: 56.25%;
    /* 16:9 */
    background: #000;
}

.video-panel__iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

.video-panel__footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .6rem;
    padding: .65rem .9rem;
    color: var(--cream);
}

.video-panel__title {
    font-family: var(--font-mono);
    font-size: .8rem;
    flex: 1;
    text-align: center;
    color: rgba(253, 240, 213, .85);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.video-panel__nav {
    background: none;
    border: 1px solid rgba(102, 155, 188, .5);
    color: var(--cream);
    font-family: var(--font-mono);
    font-size: .78rem;
    padding: .35rem .7rem;
    border-radius: 100px;
    cursor: pointer;
    white-space: nowrap;
    transition: background .2s, border-color .2s;
}

.video-panel__nav:hover:not(:disabled) {
    background: rgba(253, 240, 213, .12);
    border-color: var(--steel);
}

.video-panel__nav:disabled {
    opacity: .35;
    cursor: default;
}

.video-panel__close {
    background: none;
    border: none;
    color: var(--cream);
    font-size: 1.3rem;
    line-height: 1;
    cursor: pointer;
    padding: 0 .3rem;
}

.video-panel__close:hover {
    color: var(--red);
}

@media (max-width: 480px) {
    .video-panel__title {
        display: none;
        /* not enough room next to Prev/Next/Close on small phones */
    }
}

/* the browsable list below/beside the player: one pill per talk,
   grouped visually by card (a small gap between groups) */
.video-list {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.video-list__group {
    display: flex;
    flex-wrap: wrap;
    gap: .6rem;
    padding-bottom: 1rem;
    border-bottom: 1px dashed rgba(102, 155, 188, .25);
}

.video-list__group:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

/* list items reuse .video-trigger's colours but need room for a label */
.video-trigger.video-trigger--listed {
    width: auto;
    height: auto;
    border-radius: 100px;
    padding: .55rem 1rem .55rem .7rem;
    gap: .55rem;
    background: rgba(253, 240, 213, .06);
    border-color: rgba(102, 155, 188, .3);
    color: var(--cream);
    font-family: var(--font-mono);
    font-size: .85rem;
    text-align: left;
}

.video-trigger.video-trigger--listed svg {
    width: 16px;
    height: 16px;
    color: var(--red);
    flex: 0 0 auto;
}

.video-trigger.video-trigger--listed:hover {
    background: rgba(253, 240, 213, .12);
    border-color: var(--steel);
}

.video-trigger.video-trigger--listed.is-playing {
    background: var(--red);
    border-color: var(--maroon);
    color: var(--cream);
}

.video-trigger.video-trigger--listed.is-playing svg {
    color: var(--cream);
}

@media (min-width: 900px) {
    .videos__layout {
        grid-template-columns: 1.5fr 1fr;
        align-items: start;
    }
}

.video-panel__title {
    min-width: 0;
    /* <-- add this: lets the flex item actually shrink and ellipsis */
}

.video-panel__footer {
    flex-wrap: wrap;
    /* fallback if it still can't fit */
    row-gap: .4rem;
    justify-content: center;
}

.video-panel__nav,
.video-panel__close {
    flex-shrink: 0;
    /* buttons keep their shape, only the title shrinks */
}

html,
body {
    overflow-x: hidden;
    max-width: 100%;
}

/* Anywhere you truncate text inside a flex row, always pair it with min-width:0 */
.video-panel__title,
.speaker__meta {
    min-width: 0;
}

/* Let each pill shrink/wrap instead of overflowing its row */
.video-list__group {
    align-items: stretch;
}

.video-trigger.video-trigger--listed {
    width: auto;
    max-width: 100%;
    white-space: normal;
    /* allow the label to wrap onto a second line */
    text-align: left;
    line-height: 1.35;
}

.video-trigger.video-trigger--listed svg {
    margin-top: 0.15rem;
    /* keeps the play icon aligned to the first line once text wraps */
    align-self: flex-start;
}

main {
    padding-top: 190px;
}

@media (max-width: 799px) {
    main {
        padding-top: 155px;
    }
}

/* #########################################################################
   PORTAL / WEBINAR SITE ADDITIONS
   (merged from the second stylesheet - shared base rules such as fonts,
   :root tokens, buttons, header, hero, footer, back-to-top and the
   register block were identical and are NOT repeated here)
   ######################################################################### */

/* ===== Portal-specific additions ===== */
.hero--page {
    padding-bottom: clamp(2.5rem, 6vw, 4rem);
}

.hero--page .hero__title {
    font-size: clamp(2.4rem, 6vw, 4rem);
    max-width: 18ch;
}

.plain {
    padding: clamp(3.5rem, 8vw, 6rem) 0;
}

.rules-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.2rem;
    margin: 2.6rem 0 0;
}

@media (min-width: 640px) {
    .rules-grid {
        grid-template-columns: 1fr 1fr;
    }
}

@media (min-width: 1000px) {
    .rules-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

.rule-ref {
    font-family: var(--font-mono);
    font-size: .85rem;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: #ff8a80;
    margin: 0 0 .4rem;
}

.webinars {
    padding: clamp(3.5rem, 8vw, 6rem) 0;
}

.webinar-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 1.4rem;
    margin-top: 2.4rem;
}

.webinar {
    background: #fff;
    border: 1px solid rgba(0, 48, 73, .12);
    border-top: 5px solid var(--red);
    border-radius: var(--radius);
    padding: 1.8rem 1.6rem;
    box-shadow: 0 14px 30px -20px rgba(0, 48, 73, .4);
}

.webinar h3 {
    font-size: 1.5rem;
    color: var(--navy);
}

.webinar__meta {
    font-family: var(--font-mono);
    font-size: .9rem;
    color: #2c5570;
}

.pill {
    display: inline-block;
    font-family: var(--font-mono);
    font-size: .8rem;
    letter-spacing: .06em;
    text-transform: uppercase;
    padding: .25em .8em;
    border-radius: 100px;
    background: rgba(102, 155, 188, .2);
    color: var(--navy);
    margin-bottom: .8rem;
}

.webinar .btn--primary {
    margin-top: .6rem;
}

.webinar .soon {
    font-style: italic;
    color: #2c5570;
    margin: 0;
}

.cta-strip {
    background: var(--cream);
    border-top: 4px solid var(--red);
    color: var(--navy);
    padding: clamp(2.5rem, 6vw, 4rem) 0;
    text-align: center;
}

.cta-strip__inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1.4rem;
}

.cta-strip h2 {
    margin: 0;
    max-width: 26ch;
    font-size: clamp(1.5rem, 3vw, 2.1rem);
    color: var(--navy);
}

.cta-strip .btn {
    background: var(--red);
    color: var(--cream);
}

.cta-strip .btn:hover {
    background: var(--maroon);
    color: var(--cream);
}

.tile {
    display: block;
    text-decoration: none;
    color: var(--cream);
}

.tile__go {
    display: block;
    margin-top: 1rem;
    font-family: var(--font-mono);
    font-size: .9rem;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--steel);
}

.tile:hover .tile__go {
    color: var(--cream);
}

.reveal {
    opacity: 0;
    transform: translateY(18px);
    transition: opacity .6s var(--ease), transform .6s var(--ease);
}

.reveal.is-in {
    opacity: 1;
    transform: none;
}

.narrow {
    max-width: 820px;
}

/* FAQ accordion */
.acc details {
    background: #fff;
    border: 1px solid rgba(0, 48, 73, .14);
    border-radius: var(--radius);
    margin-bottom: .8rem;
    transition: border-color .25s;
}

.acc details[open] {
    border-color: var(--red);
}

.acc summary {
    cursor: pointer;
    padding: 1rem 1.3rem;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 1.15rem;
    color: var(--navy);
}

.acc details p {
    padding: 0 1.3rem;
    margin: 0 0 1.1rem;
    color: #2c5570;
}

/* Search + glossary */
.search {
    display: block;
    font-family: var(--font-mono);
    font-size: .9rem;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--red);
    margin-bottom: 1.6rem;
}

.search input,
#g-input {
    font: inherit;
    font-size: 1.05rem;
    text-transform: none;
    letter-spacing: 0;
    color: var(--navy);
    padding: .7em 1.1em;
    border: 2px solid var(--steel);
    border-radius: 100px;
    background: #fff;
    display: block;
    width: 100%;
    max-width: 26rem;
    margin-top: .4rem;
}

.gloss {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1rem 1.2rem;
    margin: 0;
}

.gloss div {
    background: #fff;
    border-left: 4px solid var(--maroon);
    border-radius: 0 var(--radius) var(--radius) 0;
    padding: 1rem 1.2rem;
}

.gloss dt {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 1.15rem;
}

.gloss dd {
    margin: .2rem 0 0;
    color: #2c5570;
}

/* Flash cards */
.flash-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 1.2rem;
}

.flip {
    perspective: 900px;
    background: none;
    border: 0;
    padding: 0;
    min-height: 220px;
    cursor: pointer;
    font: inherit;
    text-align: left;
}

.flip__in {
    position: relative;
    display: block;
    height: 100%;
    min-height: 220px;
    transition: transform .6s var(--ease);
    transform-style: preserve-3d;
}

.flip.is-flipped .flip__in {
    transform: rotateY(180deg);
}

.flip__face {
    position: absolute;
    inset: 0;
    backface-visibility: hidden;
    border-radius: var(--radius);
    padding: 1.4rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.flip__front {
    background: var(--navy);
    color: var(--cream);
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 1.2rem;
    border: 1px solid rgba(102, 155, 188, .4);
}

.flip__back {
    background: #fff;
    color: var(--navy);
    transform: rotateY(180deg);
    border: 2px solid var(--red);
}

.flip__hint {
    font-family: var(--font-mono);
    font-size: .8rem;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--steel);
    margin-top: .8rem;
    font-weight: 400;
}

/* Game */
.game-box {
    background: #fff;
    border-radius: var(--radius);
    border-top: 5px solid var(--red);
    padding: 2rem 1.8rem;
    box-shadow: 0 14px 30px -20px rgba(0, 48, 73, .4);
}

.clue {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: clamp(1.3rem, 2.6vw, 1.8rem);
    min-height: 4.2rem;
}

#g-form {
    display: flex;
    flex-wrap: wrap;
    gap: .8rem;
    align-items: center;
}

#g-input {
    flex: 1 1 15rem;
    margin: 0;
}

#g-msg {
    min-height: 1.7rem;
    font-weight: 600;
    margin: 1rem 0 .3rem;
}

#g-msg.ok {
    color: #1b6b3a;
}

#g-msg.no {
    color: var(--red);
}

.btn--dark {
    background: transparent;
    color: var(--navy);
    border-color: rgba(0, 48, 73, .35);
}

.btn--dark:hover {
    border-color: var(--navy);
}

.progress {
    font-family: var(--font-mono);
    font-size: .95rem;
    color: #2c5570;
}

@media (prefers-reduced-motion: reduce) {
    .reveal {
        opacity: 1;
        transform: none;
        transition: none;
    }

    .flip__in {
        transition: none;
    }
}

.section-cta {
    text-align: center;
    margin-top: 2.4rem;
}

/* ===== Webinar timeline (vertical list) =====
   NOTE: the session site's schedule also uses the class ".timeline".
   The rules below are scoped with :has(.tl-item) so they only apply to the
   webinar list and never touch the session schedule's .timeline. */
.timeline:has(.tl-item) {
    position: relative;
    display: grid;
    gap: 1.6rem;
    list-style: none;
    max-width: none;
    margin: 0;
    padding: 0;
}

/* vertical spine running through the icon nodes (node is 40px wide, so centre = 19px) */
.timeline:has(.tl-item)::before {
    content: "";
    position: absolute;
    left: 19px;
    top: 8px;
    bottom: 8px;
    width: 2px;
    background: linear-gradient(var(--red), var(--steel));
}

.tl-group {
    padding-left: 4.4rem;
    margin-top: .6rem;
    display: flex;
    align-items: center;
    gap: .9rem;
    font-family: var(--font-mono);
    font-size: .95rem;
    font-weight: 600;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--navy);
}

.tl-group::after {
    content: "";
    flex: 1;
    height: 1px;
    background: rgba(0, 48, 73, .18);
}

.tl-item {
    position: relative;
    padding-left: 4.4rem;
}

.tl-node {
    position: absolute;
    left: 0;
    top: 1rem;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    padding: 0;
    border-radius: 50%;
    border: 3px solid var(--cream);
    color: var(--cream);
    z-index: 1;
}

.tl-node svg {
    display: block;
    flex: none;
    width: 20px;
    height: 20px;
    stroke-width: 2.4;
}

.tl-item--past .tl-node {
    background: var(--navy);
    box-shadow: 0 0 0 3px rgba(0, 48, 73, .18);
}

.tl-item--upcoming .tl-node {
    background: var(--red);
    box-shadow: 0 0 0 3px rgba(193, 18, 31, .25);
    animation: tl-pulse 2s ease-out infinite;
}

.tl-item--past .webinar {
    border-top-color: var(--steel);
}

.tl-item--upcoming .webinar {
    border-color: rgba(193, 18, 31, .4);
    border-top-color: var(--red);
}

.tl-item .webinar {
    transition: transform .3s var(--ease), box-shadow .3s var(--ease);
}

.tl-item .webinar:hover {
    transform: translateY(-4px);
    box-shadow: 0 20px 36px -18px rgba(0, 48, 73, .5);
}

.tl-date {
    font-family: var(--font-mono);
    font-size: .9rem;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--red);
    margin: 0 0 .3rem;
}

.webinar .pill--upcoming {
    background: rgba(193, 18, 31, .12);
    color: var(--red);
}

.webinar .pill--past {
    background: rgba(0, 48, 73, .08);
    color: #2c5570;
}

@keyframes tl-pulse {
    0% {
        box-shadow: 0 0 0 3px rgba(193, 18, 31, .45);
    }

    100% {
        box-shadow: 0 0 0 14px rgba(193, 18, 31, 0);
    }
}

@media (max-width: 640px) {

    .tl-item,
    .tl-group {
        padding-left: 3.6rem;
    }

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

    .tl-node svg {
        width: 17px;
        height: 17px;
    }

    .timeline:has(.tl-item)::before {
        left: 16px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .tl-item--upcoming .tl-node {
        animation: none;
    }
}

/* ===== Webinar map ===== */
.webinar-map-section {
    padding-bottom: 0;
}

.webinar-map-section h2,
.timeline-title {
    color: var(--navy);
    margin: 0 0 .4rem;
}

.map-lead {
    margin: 0 0 .3rem;
    color: #2c5570;
}

.map-stats {
    font-family: var(--font-mono);
    font-size: .9rem;
    color: var(--red);
    margin: 0 0 1.2rem;
}

.webinar-map {
    height: clamp(420px, 78vh, 700px);
    border-radius: var(--radius);
    overflow: hidden;
    border: 1px solid rgba(0, 48, 73, .18);
    box-shadow: 0 14px 30px -20px rgba(0, 48, 73, .4);
    background: #eaf2f7;
    z-index: 0;
}

@media (max-width: 640px) {
    .webinar-map {
        height: 440px;
    }
}

.map-legend {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .6rem 1.6rem;
    font-size: .9rem;
    color: #2c5570;
    margin: .9rem 0 0;
}

.map-legend__item {
    display: inline-flex;
    align-items: center;
    gap: .6rem;
}

.map-legend__dot {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: var(--red);
    border: 2px solid var(--cream);
    box-shadow: 0 0 0 2px var(--red);
    flex: none;
}

.map-legend__dot--upcoming {
    background: var(--navy);
    box-shadow: 0 0 0 2px var(--navy);
}

.map-error {
    padding: 2rem;
    text-align: center;
    color: var(--navy);
}

.timeline-title {
    font-size: 1.6rem;
    margin-bottom: 1.6rem;
}

.map-pin span {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: var(--red);
    color: #fff;
    font: 700 1rem var(--font-body);
    border: 3px solid var(--cream);
    box-shadow: 0 0 0 3px rgba(193, 18, 31, .35), 0 6px 14px rgba(0, 48, 73, .4);
    transition: transform .2s var(--ease);
}

/* Upcoming marker: navy fill, pulsing ring, calendar badge (number stays) */
.map-pin--upcoming span {
    background: var(--navy);
    border-color: var(--cream);
    box-shadow: 0 0 0 3px rgba(0, 48, 73, .35), 0 6px 14px rgba(0, 48, 73, .45);
}

.map-pin--upcoming::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 3px solid var(--red);
    pointer-events: none;
    animation: pin-ring 1.8s ease-out infinite;
}

.map-pin__badge {
    position: absolute;
    top: -9px;
    right: -9px;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    padding: 0;
    border-radius: 50%;
    background: var(--red);
    color: #fff;
    border: 2px solid var(--cream);
    box-shadow: 0 2px 6px rgba(0, 48, 73, .4);
    z-index: 1;
}

.map-pin__badge svg {
    display: block;
    flex: none;
    width: 13px;
    height: 13px;
    stroke-width: 2.6;
}

@keyframes pin-ring {
    0% {
        transform: scale(1);
        opacity: .9;
    }

    100% {
        transform: scale(1.9);
        opacity: 0;
    }
}

.map-popup__tag {
    display: inline-block;
    margin-left: .4rem;
    padding: .1em .6em;
    border-radius: 100px;
    background: rgba(193, 18, 31, .12);
    color: var(--red);
    font-size: .7rem;
    letter-spacing: .06em;
    text-transform: uppercase;
}

@media (prefers-reduced-motion: reduce) {
    .map-pin--upcoming::after {
        animation: none;
    }
}

.map-pin:hover span,
.map-pin:focus span {
    transform: scale(1.12);
}

.map-pin:focus-visible span {
    outline: 3px solid var(--navy);
    outline-offset: 3px;
}

.leaflet-popup-content-wrapper {
    border-radius: var(--radius);
    border-top: 5px solid var(--red);
}

.map-popup {
    font-family: var(--font-body);
    color: var(--navy);
}

.map-popup h3 {
    font-size: 1.3rem;
    margin: 0;
    color: var(--navy);
}

.map-popup__count {
    margin: .1rem 0 .6rem;
    font-family: var(--font-mono);
    font-size: .8rem;
    color: #2c5570;
}

.map-popup__event {
    border-top: 1px solid rgba(0, 48, 73, .15);
    padding: .6rem 0 .2rem;
}

.map-popup__event p {
    margin: 0 0 .25rem;
    font-size: .95rem;
}

.map-popup__event .map-popup__date {
    font-family: var(--font-mono);
    font-size: .85rem;
    color: var(--red);
}

.map-popup__event .map-popup__venue {
    font-weight: 600;
}

.map-popup__event a {
    color: var(--red);
    font-weight: 600;
}

.map-popup .soon {
    font-style: italic;
    color: #2c5570;
}

/* ===== Flash card layout fixes ===== */
.fc {
    display: flex;
    flex-direction: column;
}

.fc .flip {
    display: block;
    width: 100%;
    height: 220px;
    min-height: 220px;
}

.fc .flip__in {
    width: 100%;
    height: 220px;
    min-height: 220px;
}

.fc .flip__front span:first-child {
    font-size: 1.15rem;
    line-height: 1.35;
}

.fc .flip__back {
    font-size: 1.05rem;
    line-height: 1.5;
    overflow-y: auto;
}

.fc .know {
    align-self: flex-start;
    margin-top: .7rem;
}

/* ===== What we do ===== */
.learning__lead {
    color: rgba(253, 240, 213, .78);
    max-width: 58ch;
    font-size: 1.1rem;
}

.pillars {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.2rem;
    margin: 2.4rem 0 3.4rem;
}

@media (min-width: 800px) {
    .pillars {
        grid-template-columns: repeat(3, 1fr);
    }
}

.pillar {
    background: linear-gradient(145deg, rgba(253, 240, 213, .1), rgba(253, 240, 213, .03));
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    border-top: 3px solid var(--red);
}

.pillar__num {
    font-family: var(--font-mono);
    font-size: .9rem;
    letter-spacing: .1em;
    color: #ff8a80;
    display: block;
    margin-bottom: .6rem;
}

.learning__sub {
    font-size: 1.5rem;
    color: var(--cream);
    margin: 0;
}

/* ===== Programs: tinted background so the glass has something to blur ===== */
.webinars {
    position: relative;
    overflow: hidden;
    background:
        radial-gradient(520px 320px at 10% 10%, rgba(193, 18, 31, .18), transparent 70%),
        radial-gradient(640px 400px at 92% 88%, rgba(102, 155, 188, .4), transparent 70%),
        var(--cream-dim);
}

.events-group {
    display: flex;
    align-items: center;
    gap: .9rem;
    font-family: var(--font-mono);
    font-size: .95rem;
    font-weight: 600;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--navy);
    margin: 2.4rem 0 1.2rem;
}

.events-group::after {
    content: "";
    flex: 1;
    height: 1px;
    background: rgba(0, 48, 73, .18);
}

.event-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 1.4rem;
}

/* Glass card */
.event-card {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 1.8rem 1.6rem;
    border-radius: var(--radius);
    background: rgba(255, 255, 255, .5);
    border: 1px solid rgba(255, 255, 255, .8);
    -webkit-backdrop-filter: blur(14px) saturate(140%);
    backdrop-filter: blur(14px) saturate(140%);
    box-shadow: 0 18px 40px -22px rgba(0, 48, 73, .45), inset 0 1px 0 rgba(255, 255, 255, .9);
    transition: opacity .6s var(--ease), transform .6s var(--ease), box-shadow .3s var(--ease), border-color .3s;
}

.event-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 24px 44px -20px rgba(0, 48, 73, .5), inset 0 1px 0 rgba(255, 255, 255, .9);
}

.event-card h3 {
    font-size: 1.5rem;
    color: var(--navy);
}

.event-card__meta {
    font-family: var(--font-mono);
    font-size: .9rem;
    color: #2c5570;
}

.event-card .btn {
    margin-top: auto;
}

.event-card--upcoming {
    background: rgba(255, 255, 255, .68);
    border-color: rgba(193, 18, 31, .4);
}

/* Status pills */
.pill--upcoming {
    display: inline-flex;
    align-items: center;
    gap: .55em;
    background: rgba(193, 18, 31, .12);
    color: var(--red);
}

.pill--upcoming::before {
    content: "";
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--red);
    animation: pulse-dot 1.8s ease-out infinite;
}

.pill--past {
    background: rgba(0, 48, 73, .08);
    color: #2c5570;
}

@keyframes pulse-dot {
    0% {
        box-shadow: 0 0 0 0 rgba(193, 18, 31, .5);
    }

    100% {
        box-shadow: 0 0 0 8px rgba(193, 18, 31, 0);
    }
}

@media (prefers-reduced-motion: reduce) {
    .pill--upcoming::before {
        animation: none;
    }
}

/* ===== Rules page: full rule cards ===== */
.webinar .rule-ref {
    color: var(--red);
}

/* two columns on desktop since these cards carry more text */
.rules-grid--full {
    grid-template-columns: 1fr;
}

@media (min-width: 900px) {
    .rules-grid--full {
        grid-template-columns: 1fr 1fr;
    }
}

.rules-grid--full .webinar h3 {
    font-size: 1.35rem;
}

.rules-grid--full .webinar>p:not(.rule-ref) {
    color: #2c5570;
    margin: 0;
}

.rule-points {
    display: grid;
    gap: .55rem;
    margin: 1rem 0 0;
}

.rule-points li {
    position: relative;
    padding-left: 1.1rem;
    font-size: .98rem;
    line-height: 1.5;
    color: #2c5570;
}

.rule-points li::before {
    content: "";
    position: absolute;
    left: 0;
    top: .6em;
    width: 6px;
    height: 6px;
    border-radius: 1px;
    background: var(--red);
}

.rule-points strong {
    color: var(--navy);
}

/* ===== Resources page ===== */
.resources {
    position: relative;
    overflow: hidden;
    padding: clamp(3rem, 7vw, 5rem) 0 clamp(3.5rem, 8vw, 6rem);
    background:
        radial-gradient(520px 320px at 8% 12%, rgba(193, 18, 31, .18), transparent 70%),
        radial-gradient(640px 400px at 94% 90%, rgba(102, 155, 188, .4), transparent 70%),
        var(--cream-dim);
}

.res-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.3rem;
}

@media (min-width: 640px) {
    .res-grid {
        grid-template-columns: 1fr 1fr;
    }
}

@media (min-width: 1000px) {
    .res-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

.res-card {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    text-decoration: none;
    color: var(--navy);
    padding: 1.8rem 1.6rem;
    border-radius: var(--radius);
    background: rgba(255, 255, 255, .55);
    border: 1px solid rgba(255, 255, 255, .85);
    -webkit-backdrop-filter: blur(14px) saturate(140%);
    backdrop-filter: blur(14px) saturate(140%);
    box-shadow: 0 18px 40px -22px rgba(0, 48, 73, .45), inset 0 1px 0 rgba(255, 255, 255, .9);
    transition: opacity .6s var(--ease), transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s;
}

.res-card:hover {
    transform: translateY(-4px);
    border-color: rgba(193, 18, 31, .45);
    box-shadow: 0 24px 44px -20px rgba(0, 48, 73, .5), inset 0 1px 0 rgba(255, 255, 255, .9);
}

.res-card__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 54px;
    height: 54px;
    padding: 13px;
    border-radius: 14px;
    background: rgba(193, 18, 31, .1);
    color: var(--red);
    margin-bottom: 1.1rem;
    transition: background .3s, color .3s;
}

.res-card:hover .res-card__icon {
    background: var(--red);
    color: var(--cream);
}

.res-card h3 {
    font-size: 1.4rem;
    color: var(--navy);
    margin-bottom: .4rem;
}

.res-card p {
    color: #2c5570;
    margin: 0;
    font-size: 1.02rem;
}

.res-card .tile__go {
    color: var(--red);
    margin-top: auto;
    padding-top: 1.1rem;
}

.res-card:hover .tile__go {
    color: var(--maroon);
}

/* Offset anchor jumps so sections clear the fixed header */
section[id] {
    scroll-margin-top: 160px;
}

@media (max-width: 799px) {
    section[id] {
        scroll-margin-top: 155px;
    }
}


/* =========================== SCHEDULE: GROUP LABEL (e.g. INAUGURATION) =========================== */
.timeline__group {
    position: relative;
    z-index: 3;
    /* sits above the vertical spine */
    display: flex;
    justify-content: center;
    margin: 0 0 1.8rem;
}

.timeline__group-title {
    margin: 0;
    display: inline-flex;
    align-items: center;
    gap: .7rem;
    font-family: var(--font-mono);
    font-size: .9rem;
    font-weight: 600;
    letter-spacing: .14em;
    text-transform: uppercase;
    line-height: 1.2;
    color: var(--cream);
    background: var(--navy);
    padding: .65em 1.4em;
    border-radius: 100px;
    border: 3px solid var(--cream);
    box-shadow: 0 0 0 1px rgba(102, 155, 188, .4),
        0 10px 22px -12px rgba(0, 48, 73, .6);
}

.timeline__group-title::before {
    content: "";
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--red);
    flex: 0 0 auto;
}

/* =========================== SPEAKER: "ABOUT SPEAKER" UNFOLD =========================== */
.speaker__about {
    margin-top: .2rem;
}

/* trigger: same pill look as .timeline__gallery-btn */
.speaker__about-btn {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    padding: .45rem .9rem;
    border: 1px solid rgba(102, 155, 188, .35);
    border-radius: 100px;
    background: var(--cream-dim);
    color: var(--navy);
    font-family: var(--font-mono);
    font-size: .85rem;
    cursor: pointer;
    transition: background .2s, border-color .2s, transform .2s var(--ease);
}

.speaker__about-btn:hover {
    background: #eddcb8;
    border-color: var(--red);
    transform: translateY(-1px);
}

.speaker__about-btn[aria-expanded="true"] {
    border-color: var(--red);
}

.about-icon {
    width: 18px;
    height: 18px;
    color: var(--red);
    flex: 0 0 auto;
}

.about-chevron {
    width: 16px;
    height: 16px;
    color: var(--red);
    flex: 0 0 auto;
    transition: transform .35s var(--ease);
}

.speaker__about-btn[aria-expanded="true"] .about-chevron {
    transform: rotate(180deg);
}

/* unfolding panel: animates 0 -> auto height using grid rows */
.speaker__about-panel {
    display: grid;
    grid-template-rows: 0fr;
    visibility: hidden;
    /* hides collapsed text from keyboard / screen readers */
    transition: grid-template-rows .4s var(--ease), visibility 0s linear .4s;
}

.speaker__about-panel.is-open {
    grid-template-rows: 1fr;
    visibility: visible;
    transition: grid-template-rows .4s var(--ease), visibility 0s;
}

.speaker__about-inner {
    min-height: 0;
    overflow: hidden;
}

.speaker__about-panel .speaker__bio {
    margin: .9rem 0 0;
}

@media (prefers-reduced-motion: reduce) {

    .speaker__about-panel,
    .speaker__about-panel.is-open,
    .about-chevron,
    .speaker__about-btn {
        transition: none;
    }
}

/* =========================== SCHEDULE: MULTIPLE PARTS IN ONE CARD (e.g. Registration + talk) =========================== */
.timeline__part+.timeline__part {
    margin-top: 1.4rem;
    padding-top: 1.4rem;
    border-top: 1px dashed rgba(102, 155, 188, .35);
}

/* the first heading of each part sits right under its time label */
.timeline__part .session-heading:first-of-type {
    margin-top: .4rem;
}