/* ==========================================================================
   ICMDRSE-2027 / EduFusion 2027
   Design system implemented from Website-Content-ICMDRSE-2027.pdf
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Design tokens
   -------------------------------------------------------------------------- */
:root {
    /* Brand colours */
    --oxford:        #26303B;   /* Primary brand / primary text */
    --oxford-2:      #34404D;   /* Hero gradient stop */
    --oxford-dark:   #1D252D;   /* Secondary button hover */
    --bronze:        #9A694E;   /* Secondary brand */
    --bronze-dark:   #845842;   /* Primary button hover */
    --bronze-soft:   rgba(154, 105, 78, .12);
    --ivory:         #EEEBDD;   /* Background */
    --white:         #FFFFFF;   /* Surface */
    --warm-ivory:    #F8F6F1;   /* Light surface */
    --cream:         #F5F3EE;   /* Testimonials background */
    --card-tint:     #FCFBF8;   /* Speaker cards */
    --partner-tint:  #FAF9F6;   /* Publication partner cards */
    --contact-card:  #32404D;   /* Contact cards */
    --hero-sub:      #DAD8CF;   /* Hero subheading */
    --line:          #DDD7CB;   /* Borders */

    /* Text */
    --text:          #26303B;
    --text-2:        #000000;   /* Secondary text */
    --text-body:     #000;   /* Paragraph */
    --text-small:    #7A8086;   /* Small text */

    /* Status */
    --success: #2E7D32;
    --warning: #F9A825;
    --info:    #4A6B8A;
    --error:   #D32F2F;

    /* Typography */
    --font-display: "Cormorant Garamond", Georgia, "Times New Roman", serif;
    --font-ui:      "Manrope", "Segoe UI", system-ui, sans-serif;
    --font-body:    "Inter", "Segoe UI", system-ui, -apple-system, sans-serif;
    --font-num:     "Space Grotesk", "Manrope", system-ui, sans-serif;

    /* Shape & depth (PDF: rounded 16-18px cards, restrained shadows) */
    --r-sm: 10px;
    --r:    16px;
    --r-lg: 18px;
    --r-xl: 24px;
    --shadow-sm: 0 2px 10px rgba(38, 48, 59, .05);
    --shadow:    0 10px 30px rgba(38, 48, 59, .07);
    --shadow-md: 0 16px 44px rgba(38, 48, 59, .10);
    --shadow-bronze: 0 14px 34px rgba(154, 105, 78, .18);

    /* Rhythm */
    --section-y: 50px;
    --nav-h: 76px;
}

/* --------------------------------------------------------------------------
   2. Base
   -------------------------------------------------------------------------- */
* { box-sizing: border-box; }

html { scroll-behavior: smooth; scroll-padding-top: calc(var(--nav-h) + 12px); }

body {
    font-family: var(--font-body);
    font-size: 1rem;
    line-height: 1.75;
    color: var(--text-body);
    background: var(--white);
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
}

h1, h2, h3, h4, h5, h6 { color: var(--text); font-family: var(--font-ui); font-weight: 700; line-height: 1.25; }

p { color: var(--text-body); }

a { color: var(--bronze); text-decoration: none; transition: color .25s ease; }
a:hover { color: var(--bronze-dark); }

img, svg { max-width: 100%; }

::selection { background: var(--bronze); color: #fff; }

/* Focus visibility — accessibility */
a:focus-visible,
button:focus-visible,
.btn:focus-visible,
.form-control:focus-visible,
.accordion-button:focus-visible {
    outline: 2px solid var(--bronze);
    outline-offset: 3px;
    box-shadow: none;
}

/* --------------------------------------------------------------------------
   3. Typography scale
   -------------------------------------------------------------------------- */
.display-hero {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: clamp(2.35rem, 5.4vw, 4.25rem);
    line-height: 1.1;
    letter-spacing: -.01em;
    color: var(--ivory);
    margin-bottom: 1rem;
}
.display-hero .hl { color: var(--bronze); }

.section-title {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: clamp(1.9rem, 3.6vw, 2.9rem);
    line-height: 1.2;
    color: var(--oxford);
    margin-bottom: .85rem;
}
.on-dark .section-title { color: var(--ivory); }

.eyebrow {
    font-family: var(--font-ui);
    font-weight: 700;
    font-size: .75rem;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--bronze);
    display: inline-flex;
    align-items: center;
    gap: .6rem;
    margin-bottom: .75rem;
}
.eyebrow::before {
    content: "";
    width: 30px;
    height: 1px;
    background: var(--bronze);
}

.section-lead {
        font-size: 15px;
    color: var(--text-2);
    /* max-width: 92%; */
    text-align: justify;
    line-height: 30px;
}
.on-dark .section-lead, .on-dark p { color: var(--hero-sub); }

.section-head { margin-bottom: 3rem; }
.section-head.center { text-align: center; }
/* .section-lead sets text-align: justify, and a declaration on the element beats
   the centring it would otherwise inherit from the parent - so a centred head has
   to restate it (bug-009 was the same trap with .rule-bronze). */
.section-head.center .section-lead { margin-inline: auto; text-align: center; }
.section-head.center .eyebrow::after {
    content: "";
    width: 30px;
    height: 1px;
    background: var(--bronze);
}

/* Thin bronze divider (PDF signature element) */
.rule-bronze {
    width: 64px;
    height: 2px;
    background: var(--bronze);
    border: 0;
    opacity: 1;
    margin: 1.25rem 0;
}
.center .rule-bronze,
.text-center > .rule-bronze { margin-inline: auto; }

/* --------------------------------------------------------------------------
   4. Section shells
   -------------------------------------------------------------------------- */
.section        { padding: var(--section-y) 0; position: relative; }
.section--white { background: var(--white); }
.section--warm  { background: var(--warm-ivory); }
.section--ivory { background: var(--ivory); }
.section--cream { background: var(--cream); }
.section--night { background: var(--oxford); }

/* Soft paper texture inspired by journals (PDF signature element) */
.paper-grain::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    opacity: .5;
    background-image:
        radial-gradient(circle at 20% 25%, rgba(154, 105, 78, .05) 0, transparent 42%),
        radial-gradient(circle at 82% 72%, rgba(38, 48, 59, .045) 0, transparent 46%);
}
.paper-grain > .container { position: relative; z-index: 1; }

/* --------------------------------------------------------------------------
   5. Button system (PDF: Button System)
   -------------------------------------------------------------------------- */
.btn {
    font-family: var(--font-ui);
    font-weight: 600;
    font-size: .95rem;
    letter-spacing: .01em;
    border-radius: 999px;
    padding: .8rem 1.75rem;
    border: 1px solid transparent;
    transition: background-color .25s ease, color .25s ease, border-color .25s ease, transform .25s ease, box-shadow .25s ease;
}
.btn:active { transform: translateY(1px); }

.btn-primary-brand {background: #b44d0d;color: #fff;}
.btn-primary-brand:hover,
.btn-primary-brand:focus {background: #9d1829;color: #fff;box-shadow: var(--shadow-bronze);}

.btn-secondary-brand { background: var(--oxford); color: #fff; }
.btn-secondary-brand:hover,
.btn-secondary-brand:focus { background: var(--oxford-dark); color: #fff; }

.btn-outline-brand { border-color: var(--bronze); color: var(--bronze); background: transparent; }
.btn-outline-brand:hover,
.btn-outline-brand:focus { background: var(--bronze); color: #fff; }

/* Hero secondary: transparent with ivory border */
.btn-ghost-ivory { border-color: var(--ivory); color: var(--ivory); background: transparent; }
.btn-ghost-ivory:hover,
.btn-ghost-ivory:focus { background: var(--ivory); color: var(--oxford); }

.btn-lg-brand { padding: .95rem 2.1rem; font-size: 1rem; }

.link-arrow {
    font-family: var(--font-ui);
    font-weight: 600;
    font-size: .92rem;
    display: inline-flex;
    align-items: center;
    gap: .45rem;
}
.link-arrow i { transition: transform .25s ease; }
.link-arrow:hover i { transform: translateX(4px); }

/* --------------------------------------------------------------------------
   6. Top bar
   -------------------------------------------------------------------------- */
.topbar {
    background: #f5eded;
    color: var(--hero-sub);
    font-size: .82rem;
    /* No fixed height: it used to be 60px against ~38px of content, and the
       leftover showed as a band once the banner was pulled up behind it. */
    padding: .55rem 0;
}
.topbar a { color: var(--hero-sub); }
.topbar a:hover { color: var(--bronze); }
.topbar .tb-item { display: inline-flex; align-items: center; gap: .45rem;color: #000;    font-weight: 500; }
.topbar i { color: #580800; }
.topbar .tb-flag {
    background: var(--bronze-soft);
    border: 1px solid rgba(154, 105, 78, .35);
    color: #5d000b;
    border-radius: 999px;
    padding: .12rem .8rem;
    font-family: var(--font-ui);
    font-weight: 600;
}

/* --------------------------------------------------------------------------
   7. Navigation (PDF: Navigation)
   -------------------------------------------------------------------------- */
.site-nav {
    background: var(--oxford);
    min-height: var(--nav-h);
    padding: .35rem 0;
    transition: box-shadow .3s ease, background-color .3s ease;
}
.site-nav.is-stuck { box-shadow: 0 8px 28px rgba(38, 48, 59, .28); }

.nav-logo { display: flex; align-items: center; }
/* The supplied logo is a JPEG on white, so it sits on its own white plate
   rather than being knocked out against the dark nav. */
.nav-logo .brand-img {
    display: block;
    height: 54px;
    width: auto;
    flex: none;
    box-sizing: border-box;
    object-fit: contain;
    background: #fff;
    border-radius: 10px;
    padding: 5px 9px;
    box-shadow: 0 2px 10px rgba(38, 48, 59, .18);
}

.site-nav .navbar-nav .nav-link {
    font-family: var(--font-ui);
    font-weight: 600;
    font-size: .92rem;
    color: #fff;
    padding: .55rem .85rem;
    position: relative;
}
.site-nav .navbar-nav .nav-link:hover,
.site-nav .navbar-nav .nav-link:focus,
.site-nav .navbar-nav .nav-link.active,
.site-nav .navbar-nav .show > .nav-link {color: #fff;}

/* Bootstrap 5.3 gives .nav-link:focus-visible a blue box-shadow at (0,2,0), which
   outranks the site-wide a:focus-visible rule. Replace it with the brand ring
   rather than removing it - keyboard users still need to see where they are. */
.site-nav .navbar-nav .nav-link:focus,
.site-nav .navbar-nav .nav-link:focus-visible {
    box-shadow: none;
    outline: none;
}
.site-nav .navbar-nav .nav-link:focus-visible {
   
    outline-offset: 2px;
    border-radius: 8px;
}

.site-nav .navbar-nav .nav-link::after {
    content: "";
    position: absolute;
    left: .85rem; right: .85rem; bottom: .28rem;
    height: 1px;
    background: var(--bronze);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .28s ease;
}
.site-nav .navbar-nav .nav-link:hover::after,
.site-nav .navbar-nav .nav-link.active::after {/* transform: scaleX(1); */}
.site-nav .dropdown-toggle::after { margin-left: .35rem; vertical-align: .12em; }

.site-nav .dropdown-menu {
    border: 0;
    border-top: 2px solid var(--bronze);
    border-radius: var(--r-sm);
    box-shadow: var(--shadow-md);
    padding: .5rem;
    min-width: 260px;
    background: var(--white);
}
.site-nav .dropdown-item {
    font-family: var(--font-ui);
    font-size: .88rem;
    font-weight: 500;
    color: var(--text);
    border-radius: 8px;
    padding: .55rem .75rem;
}
.site-nav .dropdown-item:hover,
.site-nav .dropdown-item:focus { background: var(--warm-ivory); color: var(--bronze); }

.navbar-toggler {
    border: 1px solid rgba(238, 235, 221, .35);
    color: var(--ivory);
    padding: .35rem .6rem;
}
.navbar-toggler:focus { box-shadow: none; }
.navbar-toggler i { font-size: 1.35rem; line-height: 1; }

/* --------------------------------------------------------------------------
   8. Hero (PDF: Hero Section)
   -------------------------------------------------------------------------- */
/*
 * The photo is set inline on the element (background-image), never via a custom
 * property - a relative url() inside a var() resolves against the stylesheet.
 * ::before carries the brand gradient over it; ::after keeps the bronze wash.
 */
.hero {
    position: relative;
    background-color: var(--oxford);
    background-image: none;          /* the page supplies the photo inline */
    background-size: cover;
    background-position: center 42%;
    background-repeat: no-repeat;
    color: var(--ivory);
    padding: clamp(64px, 8vw, 108px) 0 clamp(72px, 9vw, 120px);
    overflow: hidden;
}
.hero::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background: linear-gradient(115deg,
        rgba(38, 48, 59, .95) 0%,
        rgba(38, 48, 59, .88) 38%,
        rgba(52, 64, 77, .74) 68%,
        rgba(52, 64, 77, .60) 100%);
}
.hero::after {
    /* subtle geometric research-network wash */
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    background-image:
        radial-gradient(circle at 88% 12%, rgba(154, 105, 78, .28) 0, transparent 38%),
        radial-gradient(circle at 8% 82%, rgba(154, 105, 78, .14) 0, transparent 34%);
    pointer-events: none;
}
.hero > .container { position: relative; z-index: 2; }

.hero-badges { display: flex; flex-wrap: wrap; gap: .6rem; margin-bottom: 1.5rem; }
.hero-badge {
    font-family: var(--font-ui);
    font-size: .8rem;
    font-weight: 600;
    color: var(--ivory);
    background: rgba(238, 235, 221, .08);
    border: 1px solid rgba(238, 235, 221, .22);
    backdrop-filter: blur(6px);
    border-radius: 999px;
    padding: .4rem 1rem;
    display: inline-flex;
    align-items: center;
    gap: .45rem;
}
.hero-badge i { color: var(--bronze); }
.hero-badge.is-bronze { background: var(--bronze); border-color: var(--bronze); color: #fff; }
.hero-badge.is-bronze i { color: #fff; }

.hero-edition {
    font-family: var(--font-ui);
    font-weight: 700;
    font-size: .78rem;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: var(--bronze);
    margin-bottom: .9rem;
}
.hero-title-sub {
    font-family: var(--font-ui);
    font-weight: 600;
    font-size: clamp(.98rem, 1.6vw, 1.12rem);
    color: var(--ivory);
    margin-bottom: 1rem;
    line-height: 1.5;
}
.hero-theme {
    font-size: 1.02rem;
    color: var(--hero-sub);
    max-width: 60ch;
    margin-bottom: 1.9rem;
    border-left: 2px solid var(--bronze);
    padding-left: 1.1rem;
}
.hero-theme b { color: var(--ivory); font-weight: 600; }

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

/* Countdown */
.countdown {
    display: flex;
    gap: .65rem;
    margin-top: 2.4rem;
    flex-wrap: wrap;
}
.cd-cell {
    background: rgba(238, 235, 221, .07);
    border: 1px solid rgba(238, 235, 221, .18);
    border-radius: var(--r);
    padding: .75rem 1.05rem;
    min-width: 84px;
    text-align: center;
    backdrop-filter: blur(8px);
}
.cd-cell b {
    display: block;
    font-family: var(--font-num);
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--ivory);
    line-height: 1.15;
}
.cd-cell span {
    font-family: var(--font-ui);
    font-size: .68rem;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--bronze);
    font-weight: 700;
}

/* Hero illustration */
.hero-art { position: relative; }
.hero-art svg { width: 100%; height: auto; display: block; }
.hero-art .float-card {
    position: absolute;
    background: rgba(255, 255, 255, .09);
    border: 1px solid rgba(238, 235, 221, .2);
    backdrop-filter: blur(10px);
    border-radius: var(--r);
    padding: .7rem 1rem;
    display: flex;
    align-items: center;
    gap: .65rem;
    box-shadow: var(--shadow-md);
}
.hero-art .float-card i { color: var(--bronze); font-size: 1.15rem; }
.hero-art .float-card b {
    font-family: var(--font-num);
    color: var(--ivory);
    font-size: 1rem;
    display: block;
    line-height: 1.2;
}
.hero-art .float-card span {
    font-family: var(--font-ui);
    font-size: .7rem;
    color: var(--hero-sub);
    letter-spacing: .06em;
}
.hero-art .fc-1 { top: 8%;  left: -4%;  animation: floaty 6s ease-in-out infinite; }
.hero-art .fc-2 { bottom: 12%; right: -2%; animation: floaty 6s ease-in-out infinite 1.6s; }

@keyframes floaty {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-10px); }
}

/* Marquee strip under hero */
.hero-strip {
    background: var(--oxford-dark);
    border-top: 1px solid rgba(238, 235, 221, .1);
    padding: .85rem 0;
    overflow: hidden;
}
.marquee { display: flex; gap: 3rem; width: max-content; animation: marquee 34s linear infinite; }
.hero-strip:hover .marquee { animation-play-state: paused; }
.marquee span {
    font-family: var(--font-ui);
    font-size: .82rem;
    font-weight: 600;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--hero-sub);
    display: inline-flex;
    align-items: center;
    gap: .8rem;
    white-space: nowrap;
}
.marquee span::after { content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--bronze); }
@keyframes marquee { to { transform: translateX(-50%); } }

/* --------------------------------------------------------------------------
   9. About (PDF: About EduFusion — white bg, oxford heading, bronze icons)
   -------------------------------------------------------------------------- */
.about-visual {
    border-radius: var(--r-xl);
    overflow: hidden;
    background: linear-gradient(150deg, var(--oxford), var(--oxford-2));
    padding: 2.25rem;
    color: var(--ivory);
    position: relative;
    box-shadow: var(--shadow-md);
}
.about-visual .av-quote {
    font-family: var(--font-display);
    font-size: 1.5rem;
    line-height: 1.45;
    color: var(--ivory);
}
.about-visual .av-meta {
    font-family: var(--font-ui);
    font-size: .8rem;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--bronze);
    font-weight: 700;
    margin-top: 1.1rem;
}
.about-visual .bi-quote { font-size: 2.4rem; color: var(--bronze); line-height: 1; }

.about-mini {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    /* The dividers were a 1px grid gap. With three 1fr columns the first gap
       kept landing on a sub-pixel boundary and rounding away, so only the
       second line drew. Real borders render on every boundary. */
    gap: 0;
    background: var(--oxford);
    border-radius: var(--r);
    overflow: hidden;
    margin-top: 1.75rem;
}
.about-mini > div { background: var(--oxford); padding: 1rem .75rem; text-align: center; }
.about-mini > div + div { border-left: 1px solid rgba(238, 235, 221, .34); }
.about-mini b {
    font-family: var(--font-num);
    font-size: 1.75rem;
    color: var(--ivory);
    display: block;
}
/* Direct child only: the figures now carry a .count span of their own. */
.about-mini > div > span {
    display: block;
    font-family: var(--font-ui);
    font-size: .7rem;
    color: var(--bronze);
    letter-spacing: .1em;
    text-transform: uppercase;
    margin-top: .15rem;
}
/* A bare span.count rule (34px / #ff5b00, section 12) leaks in here, so the
   figures are handed back to .about-mini b explicitly. */
.about-mini b .count {
    color: inherit;
    font-size: inherit;
    font-family: inherit;
    font-variant-numeric: tabular-nums;
}
.about-mini b sup { font-size: .55em; }

.feature-row { display: flex; gap: 1.1rem; padding: 1.35rem 0; border-bottom: 1px solid var(--line); }
.feature-row:last-child { border-bottom: 0; }
.feature-row .fi {
    width: 52px; height: 52px;
    flex: none;
    border-radius: 14px;
    display: grid; place-items: center;
    background: var(--bronze-soft);
    color: var(--bronze);
    font-size: 1.35rem;
    transition: background-color .3s ease, color .3s ease;
}
.feature-row:hover .fi { background: var(--bronze); color: #fff; }
.feature-row h3 { font-size: 1.08rem; margin-bottom: .3rem; }
.feature-row p { font-size: .95rem; margin: 0; }

/* --------------------------------------------------------------------------
   10. Theme section (PDF: ivory bg, white cards, animated keywords)
   -------------------------------------------------------------------------- */
.theme-statement {
    font-family: var(--font-display);
    font-size: clamp(1.85rem, 4vw, 3rem);
    line-height: 1.22;
    color: var(--oxford);
    max-width: 22ch;
}
.theme-statement .hl { color: var(--bronze); }

.kw-rotator {
    background: var(--white);
    border-radius: var(--r-lg);
    padding: 1.9rem 2rem;
    box-shadow: var(--shadow);
    border-left: 3px solid var(--bronze);
}
.kw-rotator .kw-label {
    font-family: var(--font-ui);
    font-size: .72rem;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--text-small);
    font-weight: 700;
}
.kw-rotator .kw-stage {
    height: 2.9rem;
    position: relative;
    overflow: hidden;
    margin-top: .35rem;
}
.kw-rotator .kw-item {
    position: absolute;
    inset: 0;
    font-family: var(--font-display);
    font-size: clamp(1.5rem, 3vw, 2.1rem);
    font-weight: 700;
    color: var(--bronze);
    opacity: 0;
    transform: translateY(100%);
    transition: opacity .5s ease, transform .5s ease;
    display: flex;
    align-items: center;
}
.kw-rotator .kw-item.is-active { opacity: 1; transform: translateY(0); }
.kw-rotator .kw-item.is-out { opacity: 0; transform: translateY(-100%); }

.kw-chips { display: flex; flex-wrap: wrap; gap: .55rem; margin-top: 1.75rem; }
.kw-chip {
    font-family: var(--font-ui);
    font-size: .82rem;
    font-weight: 600;
    color: var(--text-2);
    background: var(--white);
    border: 1px solid var(--line);
    border-radius: 999px;
    padding: .45rem 1.05rem;
    transition: all .25s ease;
    cursor: default;
}
.kw-chip:hover, .kw-chip.is-active { background: var(--bronze); border-color: var(--bronze); color: #fff; }

.theme-card {
    background: var(--white);
    border-radius: var(--r-lg);
    padding: 1.6rem;
    height: 100%;
    box-shadow: var(--shadow-sm);
    transition: transform .3s ease, box-shadow .3s ease;
}
.theme-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-md); }
.theme-card i { color: var(--bronze); font-size: 1.6rem; }
.theme-card h3 { font-size: 1rem; margin: .9rem 0 .35rem; }
.theme-card p { font-size: .9rem; margin: 0; color: var(--text-2); }

/* --------------------------------------------------------------------------
   12. Speakers (PDF: white bg, #FCFBF8 cards, bronze button)
   -------------------------------------------------------------------------- */
.speaker-card {
    background: var(--card-tint);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    padding: 1.75rem;
    height: 100%;
    text-align: center;
    transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}
.speaker-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-md); border-color: var(--bronze); }

.sp-avatar {
    width: 96px; height: 96px;
    margin: 0 auto 1.1rem;
    border-radius: 50%;
    display: grid; place-items: center;
    background: linear-gradient(145deg, var(--oxford), var(--oxford-2));
    color: var(--ivory);
    font-family: var(--font-display);
    font-size: 2rem;
    font-weight: 700;
    position: relative;
}
.sp-avatar::after {
    content: "";
    position: absolute;
    inset: -6px;
    border-radius: 50%;
    border: 1px solid var(--bronze);
    opacity: .55;
}
.speaker-card .sp-role {
    font-family: var(--font-ui);
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--bronze);
}
.speaker-card h3 { font-size: 1.08rem; margin: .5rem 0 .25rem; color: var(--oxford); }
.speaker-card .sp-inst { font-size: .88rem; color: var(--text-2); margin-bottom: .85rem; }
.speaker-card .sp-topic {
    font-size: .86rem;
    color: var(--text-body);
    border-top: 1px solid var(--line);
    padding-top: .85rem;
    font-style: italic;
}

/* --------------------------------------------------------------------------
   13. Important dates (PDF: warm ivory, bronze timeline, oxford date badge)
   -------------------------------------------------------------------------- */
.timeline { position: relative; }
.timeline::before {
    content: "";
    position: absolute;
    left: 27px; top: 12px; bottom: 12px;
    width: 2px;
    background: linear-gradient(180deg, var(--bronze), rgba(154, 105, 78, .18));
}
.tl-item { display: flex; gap: 1.5rem; padding-bottom: 1.5rem; position: relative; }
.tl-item:last-child { padding-bottom: 0; }
.tl-no {
    width: 56px; height: 56px;
    flex: none;
    border-radius: 50%;
    display: grid; place-items: center;
    background: var(--oxford);
    color: var(--ivory);
    font-family: var(--font-num);
    font-weight: 700;
    font-size: 1rem;
    z-index: 1;
    border: 3px solid var(--warm-ivory);
    transition: background-color .3s ease;
}
.tl-item:hover .tl-no { background: var(--bronze); }
.tl-body {
    background: var(--white);
    border: 1px solid var(--line);
    border-radius: var(--r);
    padding: 1.15rem 1.35rem;
    flex: 1;
    transition: transform .3s ease, box-shadow .3s ease;
}
.tl-item:hover .tl-body { transform: translateX(5px); box-shadow: var(--shadow); }
.tl-date {
    font-family: var(--font-num);
    font-weight: 700;
    font-size: .88rem;
    color: var(--bronze);
    letter-spacing: .02em;
}
.tl-body h3 { font-size: 1.05rem; margin: .2rem 0 .3rem; }
.tl-body p { font-size: .9rem; margin: 0; color: var(--text-2); }

.dates-aside {
    background: var(--oxford);
    color: var(--ivory);
    border-radius: var(--r-xl);
    padding: 2.25rem;
    position: sticky;
    top: calc(var(--nav-h) + 24px);
    box-shadow: var(--shadow-md);
}
.dates-aside h3 { color: var(--ivory); font-family: var(--font-display); font-size: 1.7rem; }
.dates-aside p { color: var(--hero-sub); font-size: .95rem; }
.dates-aside .da-row {
    display: flex; justify-content: space-between; gap: 1rem;
    padding: .8rem 0;
    border-bottom: 1px solid rgba(238, 235, 221, .14);
    font-size: .9rem;
}
.dates-aside .da-row:last-of-type { border-bottom: 0; }
.dates-aside .da-row span { color: var(--hero-sub); }
.dates-aside .da-row b { color: var(--ivory); font-family: var(--font-ui); text-align: right; }

/* --------------------------------------------------------------------------
   14. Registration (PDF: white bg, featured plan bronze header)
   -------------------------------------------------------------------------- */
.plan {
    background: var(--white);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    overflow: hidden;
    height: 100%;
    display: flex;
    flex-direction: column;
    transition: transform .3s ease, box-shadow .3s ease;
}
.plan:hover { transform: translateY(-6px); box-shadow: var(--shadow-md); }
.plan-head { padding: 1.5rem; text-align: center; border-bottom: 1px solid var(--line); }
.plan-head h3 { font-size: 1.15rem; margin: 0 0 .2rem; }
.plan-head .plan-note { font-size: .82rem; color: var(--text-small); margin: 0; }
.plan-price {
    font-family: var(--font-num);
    font-size: 2.15rem;
    font-weight: 700;
    color: var(--oxford);
    padding: 1.4rem 1.5rem .35rem;
    text-align: center;
    line-height: 1.1;
}
.plan-price small { display: block; font-family: var(--font-body); font-size: .78rem; color: var(--text-small); font-weight: 400; margin-top: .3rem; }
.plan-features { list-style: none; margin: 0; padding: 1.1rem 1.6rem 1.6rem; flex: 1; }
.plan-features li {
    font-size: .92rem;
    color: var(--text-body);
    padding: .48rem 0 .48rem 1.7rem;
    position: relative;
}
.plan-features li::before {
    content: "\F633"; /* bi-check-lg */
    font-family: "bootstrap-icons";
    position: absolute;
    left: 0; top: .42rem;
    color: var(--bronze);
    font-size: .95rem;
}
.plan-foot { padding: 0 1.6rem 1.75rem; }

.plan.is-featured { border-color: transparent; box-shadow: var(--shadow-md); }
.plan.is-featured .plan-head { background: var(--bronze); border-bottom-color: transparent; }
.plan.is-featured .plan-head h3 { color: #fff; }
.plan.is-featured .plan-head .plan-note { color: rgba(255, 255, 255, .85); }
.plan-flag {
    display: inline-block;
    font-family: var(--font-ui);
    font-size: .66rem;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    background: rgba(255, 255, 255, .2);
    color: #fff;
    border-radius: 999px;
    padding: .18rem .75rem;
    margin-bottom: .55rem;
}

.reg-note {
    background: var(--warm-ivory);
    border: 1px solid var(--line);
    border-left: 3px solid var(--bronze);
    border-radius: var(--r);
    padding: 1.15rem 1.4rem;
    font-size: .92rem;
    color: var(--text-2);
}

/* --------------------------------------------------------------------------
   15. Research & Innovation Hub (PDF signature section)
   -------------------------------------------------------------------------- */
.hub { background: var(--oxford); color: var(--ivory); position: relative; overflow: hidden; }
.hub::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image:
        radial-gradient(circle at 15% 20%, rgba(154, 105, 78, .22) 0, transparent 40%),
        radial-gradient(circle at 85% 78%, rgba(154, 105, 78, .16) 0, transparent 42%);
}
.hub > .container { position: relative; z-index: 1; }

.hub-map { position: relative; border-radius: var(--r-xl); overflow: hidden; }
.hub-map svg { width: 100%; height: auto; display: block; }
.map-dot { fill: var(--bronze); cursor: pointer; transition: r .25s ease, fill .25s ease; }
.map-dot:hover { fill: var(--ivory); }
.map-pulse { fill: var(--bronze); opacity: .5; transform-origin: center; animation: pulse 2.6s ease-out infinite; }
@keyframes pulse {
    0%   { transform: scale(.6); opacity: .55; }
    70%  { transform: scale(2.6); opacity: 0; }
    100% { transform: scale(2.6); opacity: 0; }
}
.map-link { stroke: var(--bronze); stroke-width: 1; fill: none; opacity: .35; stroke-dasharray: 4 5; animation: dash 12s linear infinite; }
@keyframes dash { to { stroke-dashoffset: -180; } }

.map-tip {
    position: absolute;
    background: rgba(255, 255, 255, .1);
    border: 1px solid rgba(238, 235, 221, .28);
    backdrop-filter: blur(8px);
    border-radius: 10px;
    padding: .4rem .8rem;
    font-family: var(--font-ui);
    font-size: .78rem;
    color: var(--ivory);
    pointer-events: none;
    opacity: 0;
    transform: translate(-50%, -140%);
    transition: opacity .2s ease;
    white-space: nowrap;
    z-index: 3;
}
.map-tip.is-on { opacity: 1; }


.counter-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
    gap: 1rem;
    margin-top: 2.75rem;
}
.counter-card {
    background: #fffffff7;
    border: 1px solid rgba(238, 235, 221, .16);
    backdrop-filter: blur(10px);
    border-radius: var(--r-lg);
    padding: 1.5rem 1.15rem;
    text-align: center;
    transition: transform .3s ease, border-color .3s ease, background-color .3s ease;
}
.counter-card:hover { transform: translateY(-5px); border-color: var(--bronze); background: rgba(154, 105, 78, .12); }
.counter-card b {
    display: block;
    font-family: var(--font-num);
    font-size: clamp(1.9rem, 3.4vw, 2.6rem);
    font-weight: 700;
    color: var(--ivory);
    line-height: 1.1;
}
.counter-card b .suffix { 
        color: var(--bronze);
    font-size: 23px;
 }


.counter-card span {
    font-family: var(--font-ui);
    font-size: 17px;
    font-weight: 600;
    letter-spacing: 0;
    text-transform: math-auto;
    color: #000;
    line-height: 31px;
}
span.count {
    font-size: 34px;
    color: #ff5b00;
}
.hub-point { display: flex; gap: .9rem; padding: .85rem 0; }
.hub-point i { color: var(--bronze); font-size: 1.25rem; flex: none; margin-top: .15rem; }
.hub-point h3 {    color: var(--ivory);
    font-size: 17px;
    margin-bottom: 9px;}
.hub-point p { color: var(--hero-sub); font-size: .9rem; margin: 0; }

/* --------------------------------------------------------------------------
   17. Sponsors (PDF: warm ivory bg, white logo cards, soft bronze shadow hover)
   -------------------------------------------------------------------------- */
.sponsor-card {
    background: var(--white);
    border: 1px solid var(--line);
    border-radius: var(--r);
    height: 100%;
    min-height: 108px;
    display: grid;
    place-items: center;
    padding: 1.25rem 1rem;
    text-align: center;
    font-family: var(--font-ui);
    font-weight: 600;
    font-size: .93rem;
    color: var(--text-2);
    transition: box-shadow .3s ease, transform .3s ease, color .3s ease;
}
.sponsor-card:hover { box-shadow: var(--shadow-bronze); transform: translateY(-4px); color: var(--bronze); }

/* --------------------------------------------------------------------------
   18. Testimonials (PDF: #F5F3EE bg, white cards, bronze quote icon)
   -------------------------------------------------------------------------- */
.testi-card {
    background: var(--white);
    border-radius: var(--r-lg);
    padding: 1.9rem;
    height: 100%;
    box-shadow: var(--shadow-sm);
    display: flex;
    flex-direction: column;
    transition: transform .3s ease, box-shadow .3s ease;
}
.testi-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-md); }
.testi-card .bi-quote { font-size: 2.2rem; color: var(--bronze); line-height: 1; }
.testi-card p { font-size: .96rem; color: var(--text-body); flex: 1; margin: .75rem 0 1.25rem; }
.testi-meta { display: flex; align-items: center; gap: .8rem; border-top: 1px solid var(--line); padding-top: 1.1rem; }
.testi-meta .tm-avatar {
    width: 42px; height: 42px;
    border-radius: 50%;
    display: grid; place-items: center;
    background: var(--bronze-soft);
    color: var(--bronze);
    font-family: var(--font-ui);
    font-weight: 700;
    font-size: .9rem;
    flex: none;
}
.testi-meta b { display: block; font-family: var(--font-ui); font-size: .92rem; color: var(--oxford); }
.testi-meta span { font-size: .8rem; color: var(--text-small); }

/* --------------------------------------------------------------------------
   19. FAQ (PDF: white bg, white accordion, bronze left border when open)
   -------------------------------------------------------------------------- */
.faq .accordion-item {
    background: var(--white);
    border: 1px solid var(--line);
    border-radius: var(--r) !important;
    margin-bottom: .85rem;
    overflow: hidden;
    border-left: 3px solid transparent;
    transition: border-color .3s ease, box-shadow .3s ease;
}
.faq .accordion-item:has(.accordion-button:not(.collapsed)) {
    border-left-color: var(--bronze);
    box-shadow: var(--shadow);
}
.faq .accordion-button {
    font-family: var(--font-ui);
    font-weight: 600;
    font-size: 1rem;
    color: var(--oxford);
    background: var(--white);
    padding: 1.15rem 1.4rem;
    box-shadow: none;
}
.faq .accordion-button:not(.collapsed) { color: var(--bronze); background: var(--white); }
.faq .accordion-button::after {
    content: "\F64D"; /* bi-plus-lg */
    font-family: "bootstrap-icons";
    background-image: none;
    font-size: .95rem;
    width: auto; height: auto;
    color: var(--bronze);
    transition: transform .3s ease;
}
.faq .accordion-button:not(.collapsed)::after { transform: rotate(45deg); }
.faq .accordion-body { padding: 0 1.4rem 1.3rem; font-size: .95rem; color: var(--text-body); }

.faq-aside {
    background: var(--warm-ivory);
    border: 1px solid var(--line);
    border-radius: var(--r-xl);
    padding: 2rem;
}
.faq-aside h3 { font-family: var(--font-display); font-size: 1.6rem; }

/* --------------------------------------------------------------------------
   20. Contact (PDF: #26303B bg, #32404D cards, bronze icons, white text)
   -------------------------------------------------------------------------- */
.contact { background: var(--oxford); color: #fff; }
.contact-card {
    background: var(--contact-card);
    border: 1px solid rgba(238, 235, 221, .1);
    border-radius: var(--r-lg);
    padding: 1.6rem;
    height: 100%;
    transition: transform .3s ease, border-color .3s ease;
}
.contact-card:hover { transform: translateY(-5px); border-color: var(--bronze); }
.contact-card .cc-icon {
    width: 48px; height: 48px;
    border-radius: 12px;
    display: grid; place-items: center;
    background: var(--bronze-soft);
    color: var(--bronze);
    font-size: 1.25rem;
    margin-bottom: 1rem;
}
.contact-card h3 { color: #fff; font-size: 1rem; margin-bottom: .4rem; }
.contact-card p, .contact-card a { color: var(--hero-sub); font-size: .92rem; margin: 0; }
.contact-card a:hover { color: var(--bronze); }

.contact-form {
    background: var(--contact-card);
    border: 1px solid rgba(238, 235, 221, .1);
    border-radius: var(--r-xl);
    padding: 2rem;
}
.contact-form .form-label {
    font-family: var(--font-ui);
    font-size: .8rem;
    font-weight: 600;
    letter-spacing: .06em;
    color: var(--hero-sub);
    margin-bottom: .35rem;
}
.contact-form .form-control,
.contact-form .form-select {
    background: rgba(255, 255, 255, .06);
    border: 1px solid rgba(238, 235, 221, .18);
    color: #fff;
    border-radius: var(--r-sm);
    padding: .7rem .9rem;
    font-size: .93rem;
}
.contact-form .form-control::placeholder { color: rgba(218, 216, 207, .5); }
.contact-form .form-control:focus,
.contact-form .form-select:focus {
    background: rgba(255, 255, 255, .1);
    border-color: var(--bronze);
    color: #fff;
    box-shadow: none;
}
.contact-form .form-select option { background: var(--oxford); color: #fff; }
.contact-form .invalid-feedback { font-size: .78rem; color: #ff8f8f; }
.form-status { font-family: var(--font-ui); font-size: .9rem; border-radius: var(--r-sm); padding: .7rem 1rem; margin-top: 1rem; }
.form-status.ok  { background: rgba(46, 125, 50, .18); color: #A5D6A7; border: 1px solid rgba(46, 125, 50, .4); }
.form-status.err { background: rgba(211, 47, 47, .16); color: #EF9A9A; border: 1px solid rgba(211, 47, 47, .4); }

/* --------------------------------------------------------------------------
   21. Footer (PDF: oxford bg, ivory links, bronze hover, bronze social icons)
   -------------------------------------------------------------------------- */
/*
 * Footer photograph. The url() sits directly in this stylesheet, so it is
 * resolved relative to assets/css/ - hence ../img/. A scrim in ::before keeps
 * the small link text readable; the photo reads as texture, not subject.
 */
.site-footer {
    position: relative;
    background-color: var(--oxford);
    /* Lowercase .jpg: that is the file on disk, and the deployment target
       is case-sensitive even though Windows is not. */
    background-image: url("../img/kl-skyline-hero.jpg");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    color: var(--hero-sub);
    padding-top: 4rem;
    overflow: hidden;
}
.site-footer::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(288deg, #511F00 -14.95%, rgba(17, 26, 37, .94) 41%);
}
.site-footer > .container { position: relative; z-index: 1; }
.site-footer h4 {
    font-family: var(--font-ui);
    font-size: .82rem;
    font-weight: 700;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--bronze);
    margin-bottom: 1.15rem;
}
.site-footer p { color: var(--hero-sub); font-size: .92rem; }
.footer-links { list-style: none; padding: 0; margin: 0; }
.footer-links li { margin-bottom: .55rem; }
.footer-links a { color: var(--ivory); font-size: .92rem; }
.footer-links a:hover { color: var(--bronze); padding-left: 4px; }
.footer-links a { transition: color .25s ease, padding-left .25s ease; display: inline-block; }

.social-row { display: flex; gap: .6rem; margin-top: 1.25rem; }
.social-row a {
    width: 40px; height: 40px;
    border-radius: 50%;
    display: grid; place-items: center;
    border: 1px solid rgba(154, 105, 78, .5);
    color: var(--bronze);
    font-size: 1rem;
    transition: background-color .25s ease, color .25s ease, transform .25s ease;
}
.social-row a:hover { background: var(--bronze); color: #fff; transform: translateY(-3px); }

.footer-note {
    background: rgba(255, 255, 255, .04);
    border: 1px solid rgba(238, 235, 221, .1);
    border-radius: var(--r);
    padding: 1rem 1.25rem;
    font-size: .82rem;
    color: var(--hero-sub);
}
.footer-bar {
    border-top: 1px solid rgba(238, 235, 221, .12);
    margin-top: 3rem;
    padding: 1.35rem 0;
    font-size: .85rem;
}
.footer-bar a { color: var(--ivory); }
.footer-bar a:hover { color: var(--bronze); }

/* --------------------------------------------------------------------------
   22. Utilities: back-to-top, reveal animation, scroll progress
   -------------------------------------------------------------------------- */
.scroll-progress {
    position: fixed;
    top: 0; left: 0;
    height: 3px;
    width: 0;
    background: var(--bronze);
    z-index: 1080;
    transition: width .1s linear;
}

.to-top {
    position: fixed;
    right: 22px; bottom: 22px;
    width: 46px; height: 46px;
    border-radius: 50%;
    background: var(--bronze);
    color: #fff;
    display: grid; place-items: center;
    border: 0;
    box-shadow: var(--shadow-bronze);
    opacity: 0;
    visibility: hidden;
    transform: translateY(12px);
    transition: opacity .3s ease, transform .3s ease, visibility .3s, background-color .25s ease;
    z-index: 1050;
}
.to-top.is-on { opacity: 1; visibility: visible; transform: translateY(0); }
.to-top:hover { background: var(--bronze-dark); color: #fff; }

.reveal { opacity: 0; transform: translateY(26px); transition: opacity .7s ease, transform .7s ease; }
.reveal.is-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    .reveal { opacity: 1; transform: none; transition: none; }
    .marquee, .map-pulse, .map-link, .hero-art .float-card { animation: none; }
    * { transition-duration: .01ms !important; }
}

/* --------------------------------------------------------------------------
   23. Responsive
   -------------------------------------------------------------------------- */
@media (max-width: 1199.98px) {
    :root { --section-y: 84px; }
    .site-nav .navbar-nav .nav-link { padding: .55rem .6rem; font-size: .88rem; }
}

@media (max-width: 991.98px) {
    :root { --section-y: 72px; }

    .site-nav .navbar-collapse {
        background: var(--oxford-dark);
        border-radius: var(--r);
        margin-top: .75rem;
        padding: .75rem;
        max-height: 72vh;
        overflow-y: auto;
    }
    .site-nav .navbar-nav .nav-link::after { display: none; }
    .site-nav .dropdown-menu {
        background: transparent;
        border: 0;
        border-left: 2px solid var(--bronze);
        border-radius: 0;
        box-shadow: none;
        margin: .25rem 0 .5rem .85rem;
        padding-left: .5rem;
    }
    .site-nav .dropdown-item { color: var(--hero-sub); }
    .site-nav .dropdown-item:hover { background: rgba(255, 255, 255, .06); color: var(--bronze); }
    .site-nav .nav-cta { margin-top: .75rem; display: block; }

    .hero-art { margin-top: 3rem; }
    .hero-art .float-card { display: none; }
    .dates-aside { position: static; margin-top: 2rem; }
    .theme-statement { max-width: none; }
}

@media (max-width: 767.98px) {
    :root { --section-y: 60px; }
    body { font-size: .96rem; }
    .hero-theme { padding-left: .9rem; }
    .cd-cell { min-width: 72px; padding: .6rem .8rem; flex: 1; }
    .cd-cell b { font-size: 1.4rem; }
    .timeline::before { left: 21px; }
    .tl-no { width: 44px; height: 44px; font-size: .88rem; }
    .tl-item { gap: 1rem; }
    .about-visual, .contact-form, .faq-aside, .dates-aside { padding: 1.5rem; }
    .counter-grid { grid-template-columns: repeat(2, 1fr); }
    .footer-note { font-size: .78rem; }
}

@media (max-width: 575.98px) {
    .hero-badges { gap: .45rem; }
    .hero-badge { font-size: .72rem; padding: .32rem .8rem; }
    .hero-actions .btn { width: 100%; }
    .counter-grid { grid-template-columns: 1fr; }
    .to-top { right: 14px; bottom: 14px; }
}

/* --------------------------------------------------------------------------
   24. Inner pages: banner, breadcrumb, jump nav
   -------------------------------------------------------------------------- */
.page-hero {
    background: linear-gradient(135deg, var(--oxford) 0%, var(--oxford-2) 100%);
    color: var(--ivory);
    padding: clamp(48px, 6vw, 76px) 0 clamp(52px, 6.5vw, 82px);
    position: relative;
    overflow: hidden;
}
.page-hero::after {
    content: "";
    position: absolute;
    inset: 0;
    background-image:
        radial-gradient(circle at 90% 15%, rgba(154, 105, 78, .26) 0, transparent 42%),
        radial-gradient(circle at 5% 90%, rgba(154, 105, 78, .14) 0, transparent 38%);
    pointer-events: none;
}
.page-hero > .container { position: relative; z-index: 1; }

.page-hero-title {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: clamp(2rem, 4.4vw, 3.25rem);
    line-height: 1.15;
    color: var(--ivory);
    margin: 0 0 .65rem;
}
.page-hero-sub {
    font-size: 1.02rem;
    color: var(--hero-sub);
    max-width: 62ch;
    margin: 0;
}

.crumbs {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    padding: 0;
    margin: 0 0 1.1rem;
    font-family: var(--font-ui);
    font-size: .78rem;
    font-weight: 600;
    letter-spacing: .06em;
}
.crumbs li { color: var(--hero-sub); display: flex; align-items: center; gap: .5rem; }
.crumbs li + li::before { content: "/"; color: var(--bronze); }
.crumbs a { color: var(--bronze); }
.crumbs a:hover { color: var(--ivory); }
.crumbs li[aria-current] { color: var(--ivory); }

.page-hero-meta {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    margin-top: 1.5rem;
}
.page-hero-meta span {
    font-family: var(--font-ui);
    font-size: .8rem;
    font-weight: 600;
    color: var(--ivory);
    background: rgba(238, 235, 221, .08);
    border: 1px solid rgba(238, 235, 221, .22);
    border-radius: 999px;
    padding: .38rem 1rem;
    display: inline-flex;
    align-items: center;
    gap: .45rem;
}
.page-hero-meta i { color: var(--bronze); }

.jump-nav {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    padding: .5rem;
    background: var(--warm-ivory);
    border: 1px solid var(--line);
    border-radius: 999px;
    width: fit-content;
    max-width: 100%;
}
.jump-nav a {
    font-family: var(--font-ui);
    font-size: .86rem;
    font-weight: 600;
    color: var(--text-2);
    border-radius: 999px;
    padding: .45rem 1.1rem;
    white-space: nowrap;
    transition: background-color .25s ease, color .25s ease;
}
.jump-nav a:hover { background: var(--bronze-soft); color: var(--bronze); }
.jump-nav a.active { background: var(--bronze); color: #fff; }

/* --------------------------------------------------------------------------
   25. Guideline page components
   -------------------------------------------------------------------------- */
.sub-heading {
    font-family: var(--font-ui);
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--bronze);
    margin: 2rem 0 .85rem;
}

.spec-list { margin: 0; }
.spec-row {
    display: grid;
    grid-template-columns: 190px 1fr;
    gap: 1.25rem;
    padding: 1.05rem 0;
    border-bottom: 1px solid var(--line);
}
.spec-row:first-child { border-top: 1px solid var(--line); }
.spec-row dt {
    font-family: var(--font-ui);
    font-weight: 700;
    font-size: .95rem;
    color: var(--oxford);
}
.spec-row dd { margin: 0; font-size: .96rem; color: var(--text-body); }

.check-list { list-style: none; padding: 0; margin: 0; }
.check-list li {
    position: relative;
    padding: .45rem 0 .45rem 1.9rem;
    font-size: .96rem;
    color: var(--text-body);
}
.check-list li::before {
    content: "\F633"; /* bi-check-lg */
    font-family: "bootstrap-icons";
    position: absolute;
    left: 0; top: .42rem;
    color: var(--bronze);
}

.rule-card {
    background: var(--white);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    padding: 1.35rem 1.5rem;
    height: 100%;
    display: flex;
    gap: 1rem;
    align-items: flex-start;
    transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}
.rule-card:hover { transform: translateY(-4px); box-shadow: var(--shadow); border-color: var(--bronze); }
.rule-card .rc-no {
    font-family: var(--font-num);
    font-weight: 700;
    font-size: .85rem;
    color: var(--bronze);
    background: var(--bronze-soft);
    border-radius: 8px;
    padding: .3rem .6rem;
    flex: none;
}
.rule-card p { margin: 0; font-size: .96rem; }

.section-card {
    background: var(--warm-ivory);
    border: 1px solid var(--line);
    border-radius: var(--r);
    padding: 1.35rem;
    height: 100%;
    transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}
.section-card:hover { transform: translateY(-4px); box-shadow: var(--shadow); border-color: var(--bronze); }
.section-card .sc-no {
    font-family: var(--font-num);
    font-weight: 700;
    font-size: .78rem;
    color: var(--bronze);
    letter-spacing: .1em;
}
.section-card h4 {
    font-family: var(--font-ui);
    font-size: 1rem;
    color: var(--oxford);
    margin: .45rem 0 .35rem;
}
.section-card p { font-size: .88rem; color: var(--text-2); margin: 0; }

.side-card {
    background: var(--warm-ivory);
    border: 1px solid var(--line);
    border-radius: var(--r-xl);
    padding: 2rem;
    position: sticky;
    top: calc(var(--nav-h) + 24px);
}
.side-card h3 { font-family: var(--font-display); font-size: 1.6rem; margin: 0; }
.qr-row {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    padding: .7rem 0;
    border-bottom: 1px solid var(--line);
    font-size: .9rem;
}
.qr-row:last-of-type { border-bottom: 0; }
.qr-row span { color: var(--text-2); }
.qr-row b { font-family: var(--font-ui); color: var(--oxford); text-align: right; }

.cta-band { padding: clamp(48px, 5vw, 68px) 0; }

/* FAQ question numbering */
.faq .q-no {
    font-family: var(--font-num);
    font-size: .78rem;
    font-weight: 700;
    color: var(--bronze);
    background: var(--bronze-soft);
    border-radius: 6px;
    padding: .18rem .5rem;
    margin-right: .8rem;
    flex: none;
}

/* --------------------------------------------------------------------------
   26. Light form card (submission page)
   -------------------------------------------------------------------------- */
.conf-callout {
    background: var(--oxford);
    color: var(--ivory);
    border-radius: var(--r-xl);
    padding: 2rem;
    box-shadow: var(--shadow-md);
}
.conf-callout h3 { font-family: var(--font-display); font-size: 1.5rem; color: var(--ivory); margin: 0; }
.conf-callout .cc-row {
    padding: .8rem 0;
    border-bottom: 1px solid rgba(238, 235, 221, .14);
    font-size: .9rem;
}
.conf-callout .cc-row:last-of-type { border-bottom: 0; }
.conf-callout .cc-row span {
    display: block;
    font-family: var(--font-ui);
    font-size: .7rem;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--bronze);
    font-weight: 700;
    margin-bottom: .2rem;
}
.conf-callout .cc-row b { color: var(--ivory); font-weight: 500; line-height: 1.5; }
.conf-callout .cc-links { display: flex; flex-direction: column; gap: .5rem; margin-top: 1.35rem; }

.form-card {
    background: var(--white);
    border: 1px solid var(--line);
    border-radius: var(--r-xl);
    padding: clamp(1.5rem, 3vw, 2.5rem);
    box-shadow: var(--shadow);
}

.conf-strip {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr;
    gap: 1.25rem;
    background: var(--warm-ivory);
    border: 1px solid var(--line);
    border-left: 3px solid var(--bronze);
    border-radius: var(--r);
    padding: 1.15rem 1.35rem;
    margin-bottom: 2rem;
}
.conf-strip span {
    display: block;
    font-family: var(--font-ui);
    font-size: .68rem;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--bronze);
    font-weight: 700;
    margin-bottom: .25rem;
}
.conf-strip b { font-size: .9rem; color: var(--oxford); font-weight: 600; line-height: 1.45; }

.form-legend {
    font-family: var(--font-ui);
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--oxford);
    padding-bottom: .75rem;
    margin-bottom: 1.35rem;
    border-bottom: 1px solid var(--line);
    position: relative;
}
.form-legend::after {
    content: "";
    position: absolute;
    left: 0; bottom: -1px;
    width: 56px; height: 2px;
    background: var(--bronze);
}

.form-card .form-label {
    font-family: var(--font-ui);
    font-size: .82rem;
    font-weight: 600;
    color: var(--oxford);
    margin-bottom: .35rem;
}
.form-card .req { color: var(--bronze); }
.form-card .form-control,
.form-card .form-select {
    background: var(--warm-ivory);
    border: 1px solid var(--line);
    color: var(--text);
    border-radius: var(--r-sm);
    padding: .7rem .9rem;
    font-size: .93rem;
}
.form-card .form-control::placeholder { color: var(--text-small); }
.form-card .form-control:focus,
.form-card .form-select:focus {
    background: var(--white);
    border-color: var(--bronze);
    box-shadow: 0 0 0 3px var(--bronze-soft);
}
.form-card .form-control.is-invalid,
.form-card .form-select.is-invalid {
    border-color: var(--error);
    background-image: none;
}
.form-card .invalid-feedback { font-size: .78rem; color: var(--error); }

.form-hint {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    font-size: .78rem;
    color: var(--text-small);
    margin-top: .4rem;
}
.form-hint .is-good { color: var(--success); font-weight: 600; }
.form-hint .is-over { color: var(--error); font-weight: 600; }

.form-foot-note { font-size: .85rem; color: var(--text-small); }

/* File dropzone */
.dropzone {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .3rem;
    text-align: center;
    width: 100%;
    padding: 2rem 1.25rem;
    background: var(--warm-ivory);
    border: 2px dashed var(--line);
    border-radius: var(--r);
    cursor: pointer;
    transition: border-color .25s ease, background-color .25s ease;
}
.dropzone:hover, .dropzone.is-dragging { border-color: var(--bronze); background: var(--bronze-soft); }
.dropzone i { font-size: 1.9rem; color: var(--bronze); }
.dropzone b { font-family: var(--font-ui); font-size: .95rem; color: var(--oxford); word-break: break-word; }
.dropzone span { font-size: .8rem; color: var(--text-small); }
.dropzone.has-file { border-style: solid; border-color: var(--success); background: rgba(46, 125, 50, .06); }
.dropzone.has-file i { color: var(--success); }
.dropzone.has-file i::before { content: "\F26B"; } /* bi-check-circle */
.dropzone.is-invalid { border-color: var(--error); background: rgba(211, 47, 47, .05); }

/* Status messages on a light background */
.form-card .form-status.ok  { background: rgba(46, 125, 50, .1);  color: #1B5E20; border: 1px solid rgba(46, 125, 50, .3); }
.form-card .form-status.err { background: rgba(211, 47, 47, .08); color: #B71C1C; border: 1px solid rgba(211, 47, 47, .28); }
.form-card .form-status ul { padding-left: 1.15rem; font-size: .88rem; margin-bottom: 0; }

/* --------------------------------------------------------------------------
   27. Inner-page responsive
   -------------------------------------------------------------------------- */
@media (max-width: 991.98px) {
    .side-card { position: static; margin-top: 2rem; }
    .conf-strip { grid-template-columns: 1fr 1fr; }
    .conf-strip > div:first-child { grid-column: 1 / -1; }
}

@media (max-width: 767.98px) {
    .spec-row { grid-template-columns: 1fr; gap: .3rem; }
    .conf-strip { grid-template-columns: 1fr; }
    .jump-nav { border-radius: var(--r); width: 100%; }
    .jump-nav a { flex: 1 1 auto; text-align: center; }
    .conf-callout, .side-card, .form-card { padding: 1.5rem; }
    .faq .q-no { display: block; margin: 0 0 .4rem; width: fit-content; }
    .cta-band .text-lg-end { text-align: left !important; }
    .cta-band .btn { width: 100%; }
}

/* --------------------------------------------------------------------------
   28. Photographic page banner
   -------------------------------------------------------------------------- */
/*
 * The photo is set inline on the element itself (background-image), NOT through a
 * custom property: a relative url() inside a CSS variable is resolved against the
 * stylesheet, so `assets/img/x.jpg` would be fetched from assets/css/ and 404.
 * The scrim then goes in ::before, which paints above the element background.
 * Scrim is heaviest on the left, behind the breadcrumb and headline, and thins
 * to the right so the photo reads.
 */
.page-hero--image {
    background-color: var(--oxford);
    background-size: cover;
    background-position: center 35%;
    background-repeat: no-repeat;
}
.page-hero--image::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background: linear-gradient(100deg,
        rgba(38, 48, 59, .95) 0%,
        rgba(38, 48, 59, .86) 34%,
        rgba(38, 48, 59, .60) 62%,
        rgba(38, 48, 59, .36) 100%);
}
.page-hero--image > .container { position: relative; z-index: 2; }

/* Narrow screens: text spans the full width, so darken top-to-bottom instead. */
@media (max-width: 767.98px) {
    .page-hero--image::before {
        background: linear-gradient(180deg,
            rgba(38, 48, 59, .90) 0%,
            rgba(38, 48, 59, .82) 45%,
            rgba(38, 48, 59, .70) 100%);
    }
}

/* --------------------------------------------------------------------------
   29. Mode of Presentation
   -------------------------------------------------------------------------- */

/* Mode chooser cards */
.mode-card {
    display: flex;
    flex-direction: column;
    height: 100%;
    background: var(--white);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    padding: 1.75rem 1.6rem;
    position: relative;
    overflow: hidden;
    color: inherit;
    transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}
.mode-card::before {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    background: var(--bronze);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .35s ease;
}
.mode-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-md); border-color: transparent; color: inherit; }
.mode-card:hover::before { transform: scaleX(1); }

.mode-card .mc-icon {
    width: 54px; height: 54px;
    border-radius: 14px;
    display: grid; place-items: center;
    background: var(--bronze-soft);
    color: var(--bronze);
    font-size: 1.4rem;
    margin-bottom: 1.1rem;
    transition: background-color .3s ease, color .3s ease;
}
.mode-card:hover .mc-icon { background: var(--bronze); color: #fff; }
.mode-card h3 { font-size: 1.15rem; color: var(--oxford); margin-bottom: .45rem; }
.mode-card p { font-size: .93rem; color: var(--text-2); margin-bottom: 1rem; }

.mode-card .mc-meta {
    font-family: var(--font-ui);
    font-size: .78rem;
    font-weight: 600;
    color: var(--bronze);
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    margin-bottom: 1rem;
}
.mode-card .mc-link { margin-top: auto; color: var(--bronze); }

/* Photo figures */
.media-figure {
    margin: 0;
    border-radius: var(--r-xl);
    overflow: hidden;
    box-shadow: var(--shadow-md);
    background: var(--warm-ivory);
}
.media-figure img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    aspect-ratio: 3 / 2;
    transition: transform .6s ease;
}
.media-figure:hover img { transform: scale(1.03); }

/* Offset bronze frame behind the photo */
.media-figure--framed { position: relative; isolation: isolate; }
.media-figure--framed::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: var(--r-xl);
    border: 1px solid rgba(154, 105, 78, .5);
    transform: translate(16px, 16px);
    z-index: -1;
    pointer-events: none;
}
.media-figure--right::after { transform: translate(-16px, 16px); }

/* Intro split (photo + copy) */
.intro-split {
    display: grid;
    grid-template-columns: 1fr 1.15fr;
    gap: 2.25rem;
    align-items: center;
    background: var(--warm-ivory);
    border: 1px solid var(--line);
    border-radius: var(--r-xl);
    padding: 1.5rem;
}
.intro-split .media-figure { box-shadow: var(--shadow); }
.intro-split .media-figure img { aspect-ratio: 4 / 3; }
.intro-split p { font-size: .96rem; }

/* Facts row under each mode intro */
.mode-facts {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1px;
    background: var(--line);
    border: 1px solid var(--line);
    border-radius: var(--r);
    overflow: hidden;
    margin-top: 1.75rem;
}
.mode-facts > div { background: var(--white); padding: .95rem 1rem; }
.mode-facts span {
    display: block;
    font-family: var(--font-ui);
    font-size: .66rem;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--bronze);
    margin-bottom: .2rem;
}
.mode-facts b { font-family: var(--font-ui); font-size: .92rem; color: var(--oxford); }
.section--white .mode-facts > div { background: var(--warm-ivory); }

/* Eyebrow with a leading icon */
.eyebrow i { font-size: 1rem; }

/* Virtual presentation option chips */
.option-chips { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: 1.35rem; }
.option-chip {
    font-family: var(--font-ui);
    font-size: .85rem;
    font-weight: 600;
    color: var(--oxford);
    background: var(--white);
    border: 1px solid var(--line);
    border-left: 3px solid var(--bronze);
    border-radius: var(--r-sm);
    padding: .55rem 1rem;
    display: inline-flex;
    align-items: center;
    gap: .55rem;
}
.option-chip i { color: var(--bronze); font-size: 1.05rem; }

/* Guideline group cards */
.guide-card {
    background: var(--white);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    padding: 1.6rem;
    height: 100%;
    transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}
.guide-card:hover { transform: translateY(-4px); box-shadow: var(--shadow); border-color: var(--bronze); }
.guide-card .gc-icon {
    width: 46px; height: 46px;
    border-radius: 12px;
    display: grid; place-items: center;
    background: var(--bronze-soft);
    color: var(--bronze);
    font-size: 1.2rem;
    margin-bottom: 1rem;
}
.guide-card h4 {
    font-family: var(--font-ui);
    font-size: 1.05rem;
    color: var(--oxford);
    margin-bottom: .6rem;
}
.guide-card .check-list li { padding-top: .35rem; padding-bottom: .35rem; font-size: .93rem; }
.section--ivory .guide-card, .section--warm .guide-card { background: var(--white); }

/* 6-6-6 rule callout */
.rule-666 {
    background: var(--oxford);
    color: var(--ivory);
    border-radius: var(--r-xl);
    padding: 1.9rem;
    height: 100%;
    box-shadow: var(--shadow-md);
}
.rule-666 h3 {
    font-family: var(--font-display);
    font-size: 2rem;
    color: var(--ivory);
    margin-bottom: 1.25rem;
}
.rule-666 .eyebrow { color: var(--bronze); }
.r6-row {
    display: flex;
    gap: 1rem;
    align-items: flex-start;
    padding: .85rem 0;
    border-top: 1px solid rgba(238, 235, 221, .14);
}
.r6-row b {
    font-family: var(--font-num);
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--bronze);
    line-height: 1;
    flex: none;
    width: 34px;
}
.r6-row span {
    display: block;
    font-family: var(--font-ui);
    font-size: .92rem;
    font-weight: 600;
    color: var(--ivory);
}
.r6-row p { font-size: .84rem; color: var(--hero-sub); margin: .15rem 0 0; }

/* Poster dimension diagram, drawn to the real 2:3 ratio */
.poster-spec {
    background: var(--warm-ivory);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    padding: 1.75rem 1.5rem 1.35rem;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.ps-frame {
    position: relative;
    width: min(200px, 62%);
    aspect-ratio: 2 / 3;
    border: 2px solid var(--bronze);
    border-radius: var(--r-sm);
    background: var(--white);
    margin: 1.5rem 0 1.75rem;
}
.ps-inner {
    position: absolute;
    inset: 10px;
    border: 1px dashed rgba(154, 105, 78, .45);
    border-radius: 6px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .2rem;
    text-align: center;
}
.ps-inner i { font-size: 1.6rem; color: var(--bronze); }
.ps-inner b { font-family: var(--font-ui); font-size: .88rem; color: var(--oxford); }
.ps-inner span { font-size: .72rem; color: var(--text-small); }

.ps-w, .ps-h {
    position: absolute;
    font-family: var(--font-num);
    font-size: .78rem;
    font-weight: 700;
    color: var(--bronze);
    background: var(--warm-ivory);
    padding: 0 .4rem;
    white-space: nowrap;
}
.ps-w { top: -.7rem; left: 50%; transform: translateX(-50%); }
.ps-h { top: 50%; right: -1.7rem; transform: translateY(-50%) rotate(90deg); }

.ps-note {
    font-size: .82rem;
    color: var(--text-small);
    text-align: center;
    margin: 0;
}

/* --------------------------------------------------------------------------
   30. Mode of Presentation responsive
   -------------------------------------------------------------------------- */
@media (max-width: 991.98px) {
    .intro-split { grid-template-columns: 1fr; gap: 1.5rem; }
    .media-figure--framed::after { transform: translate(10px, 10px); }
    .media-figure--right::after { transform: translate(-10px, 10px); }
}

@media (max-width: 575.98px) {
    .mode-facts { grid-template-columns: 1fr; }
    .media-figure--framed::after { display: none; }
    .ps-frame { width: min(180px, 70%); }
    .rule-666 { padding: 1.5rem; }
    .guide-card { padding: 1.35rem; }
}

/* --------------------------------------------------------------------------
   31. Scientific Sessions — title cards
   -------------------------------------------------------------------------- */
.session-card {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
    padding: 0;
    text-align: left;
    background: var(--white);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    overflow: hidden;
    cursor: pointer;
    position: relative;
    transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}
.session-card:hover,
.session-card:focus-visible {
    transform: translateY(-6px);
    box-shadow: var(--shadow-md);
    border-color: var(--bronze);
}

/* Thumbnail */
.session-card .sc-media {
    display: block;
    position: relative;
    overflow: hidden;
    background: var(--oxford);
}
.session-card .sc-media img {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    transition: transform .6s ease, opacity .3s ease;
    opacity: .92;
}
.session-card:hover .sc-media img { transform: scale(1.06); opacity: 1; }
.session-card .sc-media::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(38, 48, 59, 0) 45%, rgba(38, 48, 59, .55) 100%);
}

.session-card .sc-num {
    position: absolute;
    top: .85rem; left: .85rem;
    z-index: 2;
    font-family: var(--font-num);
    font-size: .8rem;
    font-weight: 700;
    color: #fff;
    background: var(--bronze);
    border-radius: 8px;
    padding: .2rem .6rem;
    letter-spacing: .04em;
}

/* Body — the title is the whole point of this card */
.session-card .sc-body {
    display: flex;
    flex-direction: column;
    flex: 1;
    padding: 1.4rem 1.4rem 1.25rem;
    position: relative;
}
.session-card .sc-icon {
    position: absolute;
    top: -22px; right: 1.2rem;
    width: 44px; height: 44px;
    border-radius: 12px;
    display: grid; place-items: center;
    background: var(--white);
    border: 1px solid var(--line);
    color: var(--bronze);
    font-size: 1.15rem;
    box-shadow: var(--shadow-sm);
    transition: background-color .3s ease, color .3s ease, border-color .3s ease;
}
.session-card:hover .sc-icon { background: var(--bronze); color: #fff; border-color: var(--bronze); }

.session-card h3 { margin: 0 0 1rem; padding-right: 2.5rem; }
.session-card .sc-trigger {
    font-family: var(--font-ui);
    font-weight: 700;
    font-size: 1.02rem;
    line-height: 1.4;
    color: var(--oxford);
    background: none;
    border: 0;
    padding: 0;
    text-align: left;
    cursor: pointer;
    transition: color .25s ease;
}
.session-card:hover .sc-trigger { color: var(--bronze); }
.session-card .sc-trigger:focus-visible { outline: 2px solid var(--bronze); outline-offset: 3px; }
.session-card .sc-cta {
    margin-top: auto;
    font-family: var(--font-ui);
    font-size: .84rem;
    font-weight: 600;
    color: var(--bronze);
    display: inline-flex;
    align-items: center;
    gap: .45rem;
}
.session-card .sc-cta i { transition: transform .25s ease; }
.session-card:hover .sc-cta i { transform: translateX(4px); }

/* --------------------------------------------------------------------------
   32. Focus-area chips (session detail page)
   -------------------------------------------------------------------------- */
/* Focus area chips */
.focus-chips { display: flex; flex-wrap: wrap; gap: .5rem; }
.focus-chip {
    font-family: var(--font-ui);
    font-size: .83rem;
    font-weight: 600;
    color: var(--oxford);
    background: var(--bronze-soft);
    border: 1px solid rgba(154, 105, 78, .28);
    border-radius: 999px;
    padding: .38rem 1rem;
}



/* --------------------------------------------------------------------------
   33. Sessions responsive
   -------------------------------------------------------------------------- */
@media (max-width: 767.98px) {
    .session-card .sc-trigger { font-size: .98rem; }
}

/* --------------------------------------------------------------------------
   34. Session detail page
   -------------------------------------------------------------------------- */
.page-hero--session { padding-bottom: clamp(44px, 5.5vw, 68px); }

.session-badge {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    font-family: var(--font-ui);
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: #fff;
    background: var(--bronze);
    border-radius: 999px;
    padding: .32rem .95rem;
    margin-bottom: 1rem;
}
.session-badge i { font-size: .95rem; }

.section-tight { padding: clamp(36px, 4vw, 52px) 0; }

/* Objective callout */
.objective-band {
    display: flex;
    gap: 1.25rem;
    align-items: flex-start;
    background: var(--oxford);
    border-radius: var(--r-xl);
    padding: 1.6rem 1.75rem;
    margin: 2rem 0 2.5rem;
    box-shadow: var(--shadow-md);
}
.objective-band .ob-icon {
    width: 46px; height: 46px;
    flex: none;
    border-radius: 12px;
    display: grid; place-items: center;
    background: rgba(154, 105, 78, .25);
    color: var(--bronze);
    font-size: 1.2rem;
}
.objective-band h3 {
    font-family: var(--font-ui);
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--bronze);
    margin-bottom: .35rem;
}
.objective-band p { color: var(--ivory); font-size: 1rem; margin: 0; }

/* Core objective cards */
.objective-card {
    display: flex;
    gap: .95rem;
    align-items: flex-start;
    background: var(--warm-ivory);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    padding: 1.25rem 1.35rem;
    height: 100%;
    transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}
.objective-card:hover { transform: translateY(-4px); box-shadow: var(--shadow); border-color: var(--bronze); }
.objective-card .oc-no {
    font-family: var(--font-num);
    font-size: .82rem;
    font-weight: 700;
    color: var(--bronze);
    background: var(--white);
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: .28rem .55rem;
    flex: none;
}
.objective-card p { margin: 0; font-size: .95rem; color: var(--text-body); }

/* Focus chips on the detail page carry a leading dot */
.session-detail-page .focus-chip,
.focus-chips .focus-chip i { line-height: 1; }
.focus-chips .focus-chip i { margin-left: -.35rem; color: var(--bronze); font-size: 1.1rem; }

/* Expected outcomes */
.outcome-band {
    background: var(--warm-ivory);
    border: 1px solid var(--line);
    border-left: 3px solid var(--bronze);
    border-radius: var(--r-lg);
    padding: 1.5rem 1.6rem;
    margin-top: 2.5rem;
}
.outcome-band .eyebrow { margin-bottom: .5rem; }
.outcome-band p { margin: 0; font-size: 1rem; color: var(--text-body); }

.side-contact {
    font-size: .85rem;
    color: var(--text-small);
    margin: 1.35rem 0 0;
    padding-top: 1.15rem;
    border-top: 1px solid var(--line);
}

/* Previous / next navigation */
.session-nav {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    gap: 1rem;
    align-items: stretch;
}
.sn-item {
    display: flex;
    flex-direction: column;
    gap: .3rem;
    background: var(--white);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    padding: 1.1rem 1.35rem;
    color: inherit;
    transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}
.sn-item:not(.is-empty):hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow);
    border-color: var(--bronze);
    color: inherit;
}
.sn-item.is-empty { background: transparent; border-color: transparent; }
.sn-item span {
    font-family: var(--font-ui);
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--bronze);
    display: inline-flex;
    align-items: center;
    gap: .45rem;
}
.sn-item b {
    font-family: var(--font-ui);
    font-size: .95rem;
    font-weight: 600;
    color: var(--oxford);
    line-height: 1.4;
}
.sn-next { text-align: right; }
.sn-next span { justify-content: flex-end; }

.sn-all {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .3rem;
    min-width: 108px;
    background: var(--oxford);
    color: var(--ivory);
    border-radius: var(--r-lg);
    padding: 1.1rem;
    font-family: var(--font-ui);
    font-size: .8rem;
    font-weight: 600;
    text-align: center;
    transition: background-color .3s ease, color .3s ease;
}
.sn-all i { font-size: 1.2rem; color: var(--bronze); transition: color .3s ease; }
.sn-all:hover { background: var(--bronze); color: #fff; }
.sn-all:hover i { color: #fff; }

/* Compact links to the other sessions */
.mini-session {
    display: flex;
    align-items: center;
    gap: .85rem;
    height: 100%;
    background: var(--warm-ivory);
    border: 1px solid var(--line);
    border-radius: var(--r);
    padding: .95rem 1.1rem;
    color: inherit;
    transition: background-color .3s ease, border-color .3s ease, transform .3s ease;
}
.mini-session:hover {
    background: var(--white);
    border-color: var(--bronze);
    transform: translateX(4px);
    color: inherit;
}
.mini-session .ms-no {
    font-family: var(--font-num);
    font-size: .8rem;
    font-weight: 700;
    color: var(--bronze);
    flex: none;
}
.mini-session .ms-title {
    font-family: var(--font-ui);
    font-size: .92rem;
    font-weight: 600;
    color: var(--oxford);
    line-height: 1.35;
    flex: 1;
}
.mini-session > i { color: var(--bronze); flex: none; transition: transform .25s ease; }
.mini-session:hover > i { transform: translateX(3px); }

/* Session card title works as a link as well as a button */
.session-card a.sc-trigger { display: inline-block; text-decoration: none; }

/* --------------------------------------------------------------------------
   35. Session detail responsive
   -------------------------------------------------------------------------- */
@media (max-width: 767.98px) {
    .session-nav { grid-template-columns: 1fr; }
    .session-nav .sn-item.is-empty { display: none; }
    .sn-all { order: 3; flex-direction: row; }
    .sn-next { text-align: left; }
    .sn-next span { justify-content: flex-start; }
    .objective-band { flex-direction: column; gap: .9rem; padding: 1.35rem; }
}

/* ==========================================================================
   38. Sessions & SDG Alignment — design variants (review page)
   ========================================================================== */

/* Label above each variant */
.variant-label {
    display: flex;
    gap: 1.25rem;
    align-items: flex-start;
    padding-bottom: 1.5rem;
    margin-bottom: 2.5rem;
    border-bottom: 1px solid var(--line);
}
.variant-label .vl-no {
    font-family: var(--font-num);
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: #fff;
    background: var(--bronze);
    border-radius: 999px;
    padding: .35rem .95rem;
    flex: none;
    white-space: nowrap;
}
.variant-label h2 {
    font-family: var(--font-display);
    font-size: clamp(1.5rem, 2.6vw, 2.1rem);
    color: var(--oxford);
    margin: 0 0 .35rem;
}
.variant-label p { font-size: .95rem; color: var(--text-2); margin: 0; max-width: 68ch; }
.variant-label.on-dark { border-bottom-color: rgba(238, 235, 221, .18); }
.variant-label.on-dark h2 { color: var(--ivory); }
.variant-label.on-dark p { color: var(--hero-sub); }

/* --------------------------------------------------------------------------
   Variant 01 — split feature cards
   -------------------------------------------------------------------------- */
.v1-card {
    display: grid;
    grid-template-columns: 168px minmax(0, 1fr);
    height: 100%;
    background: var(--white);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    overflow: hidden;
    transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}
.v1-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-md); border-color: var(--bronze); }

.v1-media { position: relative; display: block; overflow: hidden; background: var(--oxford); }
.v1-media img {
    width: 100%; height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .6s ease;
}
.v1-card:hover .v1-media img { transform: scale(1.07); }
.v1-no {
    position: absolute;
    top: .7rem; left: .7rem;
    font-family: var(--font-num);
    font-size: .78rem;
    font-weight: 700;
    color: #fff;
    background: var(--bronze);
    border-radius: 7px;
    padding: .18rem .55rem;
}

.v1-body {
    display: flex;
    flex-direction: column;
    padding: 1.35rem 1.4rem;
}
.v1-body h3 {
    font-family: var(--font-ui);
    font-size: 1.02rem;
    font-weight: 700;
    line-height: 1.4;
    margin: 0 0 .9rem;
}
.v1-body h3 a { color: var(--oxford); }
.v1-card:hover .v1-body h3 a { color: var(--bronze); }

.v1-sdg { display: flex; gap: .4rem; flex-wrap: wrap; margin-bottom: 1rem; }
.v1-sdg img { width: 44px; height: 44px; border-radius: 6px; display: block; }

.v1-cue {
    margin-top: auto;
    font-family: var(--font-ui);
    font-size: .8rem;
    font-weight: 600;
    color: var(--bronze);
    display: inline-flex;
    align-items: center;
    gap: .4rem;
}
.v1-cue i { transition: transform .25s ease; }
.v1-card:hover .v1-cue i { transform: translateX(4px); }

/* --------------------------------------------------------------------------
   Variant 02 — filter by goal
   -------------------------------------------------------------------------- */
.v2-filter { display: flex; flex-wrap: wrap; gap: .55rem; margin-bottom: 1.25rem; }
.v2-chip {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    font-family: var(--font-ui);
    font-size: .85rem;
    font-weight: 600;
    color: var(--text-2);
    background: var(--white);
    border: 1px solid var(--line);
    border-radius: 999px;
    padding: .38rem .85rem .38rem .45rem;
    cursor: pointer;
    transition: border-color .25s ease, color .25s ease, background-color .25s ease, box-shadow .25s ease;
}
.v2-chip > i { margin-left: .4rem; color: var(--bronze); }
.v2-chip img { width: 30px; height: 30px; border-radius: 6px; display: block; }
.v2-chip:hover { border-color: var(--bronze); color: var(--oxford); }
.v2-chip.is-active {
    border-color: var(--bronze);
    background: var(--white);
    color: var(--oxford);
    box-shadow: 0 0 0 2px var(--bronze-soft);
}
.v2-count {
    font-family: var(--font-num);
    font-size: .72rem;
    font-weight: 700;
    color: var(--bronze);
    background: var(--bronze-soft);
    border-radius: 999px;
    padding: .05rem .45rem;
}

.v2-status { font-size: .85rem; color: var(--text-small); margin-bottom: 1.25rem; }

.v2-list {
    background: var(--white);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    overflow: hidden;
}
.v2-row {
    display: grid;
    grid-template-columns: 44px 44px minmax(0, 1fr) auto 20px;
    gap: 1rem;
    align-items: center;
    padding: .9rem 1.35rem;
    border-top: 1px solid var(--line);
    color: inherit;
    transition: background-color .25s ease, padding-left .25s ease;
}
.v2-row:first-child { border-top: 0; }
.v2-row:hover { background: var(--warm-ivory); color: inherit; padding-left: 1.6rem; }
.v2-row.is-hidden { display: none; }

.v2-no { font-family: var(--font-num); font-size: 1rem; font-weight: 700; color: var(--bronze); }
.v2-icon {
    width: 40px; height: 40px;
    border-radius: 10px;
    display: grid; place-items: center;
    background: var(--bronze-soft);
    color: var(--bronze);
    font-size: 1.1rem;
}
.v2-title b {
    display: block;
    font-family: var(--font-ui);
    font-size: .98rem;
    font-weight: 700;
    color: var(--oxford);
    line-height: 1.35;
}
.v2-title small { display: block; font-size: .78rem; color: var(--text-small); margin-top: .15rem; }
.v2-goals { display: flex; gap: .35rem; }
.v2-goals img { width: 38px; height: 38px; border-radius: 6px; display: block; }
.v2-arrow { color: var(--bronze); opacity: 0; transition: opacity .25s ease, transform .25s ease; }
.v2-row:hover .v2-arrow { opacity: 1; transform: translateX(3px); }

.v2-empty {
    text-align: center;
    color: var(--text-small);
    font-size: .95rem;
    padding: 2rem 0 0;
}

/* --------------------------------------------------------------------------
   Variant 03 — mosaic wall
   -------------------------------------------------------------------------- */
.v3-mosaic {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
}
.v3-tile {
    position: relative;
    display: block;
    aspect-ratio: 1 / 1;
    border-radius: var(--r-lg);
    overflow: hidden;
    background: var(--oxford-2);
    color: inherit;
}
.v3-tile.is-wide { grid-column: span 2; aspect-ratio: 2 / 1; }

.v3-tile img {
    position: absolute;
    inset: 0;
    width: 100%; height: 100%;
    object-fit: cover;
    transition: transform .7s ease;
}
.v3-tile:hover img { transform: scale(1.08); }

.v3-scrim {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(38, 48, 59, .18) 0%, rgb(0 0 0 / 62%) 52%, rgb(0 0 0 / 93%) 100%);
    transition: background-color .3s ease;
}
.v3-tile:hover .v3-scrim { background-color: rgba(154, 105, 78, .18); }

.v3-goals {
    position: absolute;
    top: .8rem; right: .8rem;
    display: flex;
    gap: .3rem;
    z-index: 2;
}
.v3-goals img {
    position: static;
    width: 36px; height: 36px;
    border-radius: 6px;
    border: 1px solid rgba(255, 255, 255, .35);
    transition: transform .3s ease;
}
.v3-tile:hover .v3-goals img { transform: translateY(-3px); }

.v3-text {
    position: absolute;
    left: 0; right: 0; bottom: 0;
    z-index: 2;
    padding: 1.1rem 1.15rem;
}
.v3-no {
    display: block;
    font-family: var(--font-ui);
    font-size: .66rem;
    font-weight: 700;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--bronze);
    margin-bottom: .3rem;
}
.v3-text b {
    font-family: var(--font-ui);
    font-size: .95rem;
    font-weight: 700;
    line-height: 1.35;
    color: var(--ivory);
    display: block;
}
.v3-tile.is-wide .v3-text b { font-size: 1.15rem; }

/* --------------------------------------------------------------------------
   39. Variants responsive
   -------------------------------------------------------------------------- */
@media (max-width: 1199.98px) {
    .v3-mosaic { grid-template-columns: repeat(3, 1fr); }
    .v3-tile.is-wide { grid-column: span 2; }
}

@media (max-width: 991.98px) {
    .variant-label { flex-direction: column; gap: .8rem; }
    .v2-row { grid-template-columns: 38px minmax(0, 1fr) auto; }
    .v2-icon, .v2-arrow { display: none; }
    .v3-mosaic { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 767.98px) {
    .v1-card { grid-template-columns: 120px minmax(0, 1fr); }
    .v1-body { padding: 1.1rem; }
    .v1-sdg img { width: 38px; height: 38px; }

    .v2-row {
        grid-template-columns: 34px minmax(0, 1fr);
        grid-template-areas: "no title" "goals goals";
        gap: .6rem .8rem;
    }
    .v2-no    { grid-area: no; }
    .v2-title { grid-area: title; }
    .v2-goals { grid-area: goals; }
    .v2-row:hover { padding-left: 1.35rem; }
    .v2-chip { font-size: .8rem; }
}

@media (max-width: 575.98px) {
    .v1-card { grid-template-columns: 1fr; }
    .v1-media { aspect-ratio: 16 / 9; }
    .v3-mosaic { grid-template-columns: 1fr; gap: .8rem; }
    .v3-tile, .v3-tile.is-wide { grid-column: span 1; aspect-ratio: 16 / 10; }
    .v3-goals img { width: 32px; height: 32px; }
}

/* --------------------------------------------------------------------------
   Variant 04 — alignment matrix
   -------------------------------------------------------------------------- */
.v4-scroll {
    overflow-x: auto;
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    background: var(--white);
    box-shadow: var(--shadow-sm);
    -webkit-overflow-scrolling: touch;
}

.v4-matrix {
    width: 100%;
    min-width: 880px;
    border-collapse: collapse;
    font-family: var(--font-ui);
}

/* Column headings — the goal badges */
.v4-matrix thead th {
    background: var(--oxford);
    padding: .85rem .5rem;
    vertical-align: bottom;
    text-align: center;
    font-weight: 700;
}
.v4-goal img {
    width: 40px;
    height: 40px;
    border-radius: 6px;
    display: block;
    margin: 0 auto .4rem;
}
.v4-goal span {
    font-family: var(--font-num);
    font-size: .72rem;
    letter-spacing: .04em;
    color: var(--bronze);
    cursor: help;
}
.v4-corner {
    text-align: left !important;
    font-size: .68rem;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--bronze);
    padding-left: 1.25rem !important;
    min-width: 300px;
    position: sticky;
    left: 0;
    z-index: 2;
    background: var(--oxford);
}

/* Row headings — the session titles */
.v4-session {
    text-align: left;
    font-weight: 400;
    padding: .8rem 1.1rem .8rem 1.25rem;
    border-top: 1px solid var(--line);
    background: var(--white);
    position: sticky;
    left: 0;
    z-index: 1;
    min-width: 300px;
}
.v4-matrix tbody tr:hover .v4-session { background: var(--warm-ivory); }
.v4-no {
    font-family: var(--font-num);
    font-size: .78rem;
    font-weight: 700;
    color: var(--bronze);
    margin-right: .6rem;
}
.v4-session a {
    font-size: .92rem;
    font-weight: 600;
    color: var(--oxford);
}
.v4-matrix tbody tr:hover .v4-session a { color: var(--bronze); }

/* Intersections */
.v4-matrix tbody td {
    border-top: 1px solid var(--line);
    border-left: 1px solid var(--line);
    text-align: center;
    padding: .8rem .5rem;
    transition: background-color .2s ease;
}
.v4-matrix tbody tr:hover td { background: var(--warm-ivory); }

.v4-dot {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    display: inline-grid;
    place-items: center;
    background: var(--bronze);
    color: #fff;
    font-size: .78rem;
    transition: transform .25s ease;
}
.v4-matrix tbody tr:hover .v4-dot { transform: scale(1.15); }

/* Totals */
.v4-matrix tfoot th,
.v4-matrix tfoot td {
    border-top: 2px solid var(--bronze);
    background: var(--warm-ivory);
    padding: .7rem .5rem;
    text-align: center;
}
.v4-total-label {
    text-align: left !important;
    font-size: .72rem;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--text-small);
    font-weight: 700;
}
.v4-total {
    font-family: var(--font-num);
    font-size: 1rem;
    font-weight: 700;
    color: var(--oxford);
}

/* --------------------------------------------------------------------------
   Variant 05 — browse panel (master / detail)
   -------------------------------------------------------------------------- */
.v5-browse {
    display: grid;
    grid-template-columns: 320px minmax(0, 1fr);
    gap: 1.25rem;
    align-items: start;
}

/* Title rail */
.v5-rail {
    display: flex;
    gap: .35rem;
    background: var(--white);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    padding: .6rem;
    max-height: 620px;
    overflow-y: auto;
}
.v5-tab {
    display: grid;
    grid-template-columns: 30px minmax(0, 1fr) 14px;
    gap: .5rem;
    align-items: center;
    width: 100%;
    text-align: left;
    background: none;
    border: 0;
    border-radius: var(--r-sm);
    padding: .7rem .8rem;
    cursor: pointer;
    transition: background-color .25s ease, color .25s ease;
}
.v5-tab:hover { background: var(--warm-ivory); }
.v5-tab.active { background: var(--oxford); }
.v5-tab-no {
    font-family: var(--font-num);
    font-size: .78rem;
    font-weight: 700;
    color: var(--bronze);
}
.v5-tab-title {
    font-family: var(--font-ui);
    font-size: .88rem;
    font-weight: 600;
    line-height: 1.35;
    color: var(--oxford);
}
.v5-tab.active .v5-tab-title { color: var(--ivory); }
.v5-tab > i { color: var(--bronze); font-size: .8rem; opacity: 0; transition: opacity .25s ease; }
.v5-tab:hover > i, .v5-tab.active > i { opacity: 1; }

/* Detail panel */
.v5-panel {
    background: var(--white);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    overflow: hidden;
}
.v5-media { position: relative; background: var(--oxford); }
.v5-media img {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 5;
    object-fit: cover;
    opacity: .85;
}
.v5-badge {
    position: absolute;
    left: 1.25rem; bottom: 1.1rem;
    font-family: var(--font-ui);
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: #fff;
    background: var(--bronze);
    border-radius: 999px;
    padding: .28rem .9rem;
}

.v5-body { padding: 1.6rem 1.75rem 1.75rem; }
.v5-body h3 {
    font-family: var(--font-display);
    font-size: clamp(1.35rem, 2.4vw, 1.85rem);
    line-height: 1.25;
    color: var(--oxford);
    margin: 0 0 .65rem;
}
.v5-body > p { font-size: .96rem; color: var(--text-body); margin: 0 0 1.35rem; }

.v5-goals {
    display: flex;
    flex-wrap: wrap;
    gap: .6rem;
    padding: 1.1rem 0;
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
    margin-bottom: 1.25rem;
}
.v5-goal { display: flex; align-items: center; gap: .6rem; }
.v5-goal > img { width: 44px; height: 44px; border-radius: 7px; display: block; flex: none; }
.v5-goal b {
    display: block;
    font-family: var(--font-num);
    font-size: .82rem;
    color: var(--bronze);
    line-height: 1.2;
}
.v5-goal small { display: block; font-size: .78rem; color: var(--text-2); line-height: 1.3; }

.v5-focus { display: flex; flex-wrap: wrap; gap: .45rem; }

/* --------------------------------------------------------------------------
   40. Variants 04 and 05 responsive
   -------------------------------------------------------------------------- */
@media (max-width: 991.98px) {
    .v5-browse { grid-template-columns: 1fr; }
    .v5-rail {
        flex-direction: row;
        max-height: none;
        overflow-x: auto;
        overflow-y: hidden;
    }
    .v5-tab {
        grid-template-columns: 26px minmax(0, 1fr);
        min-width: 210px;
        flex: none;
    }
    .v5-tab > i { display: none; }
}

@media (max-width: 767.98px) {
    .v4-corner, .v4-session { min-width: 220px; }
    .v4-matrix { min-width: 760px; }
    .v5-body { padding: 1.35rem; }
    .v5-media img { aspect-ratio: 16 / 7; }
}

/* --------------------------------------------------------------------------
   41. Glimpses of Past Conferences — filmstrip + lightbox
   -------------------------------------------------------------------------- */
.gallery { overflow: hidden; }

.gallery-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 2rem;
    margin-bottom: 2.5rem;
}
.gallery-head .section-title { margin-bottom: .85rem; }
.gallery-head .section-lead { margin-bottom: 0; }

.gallery-nav { display: flex; gap: .6rem; flex: none; }
.g-arrow {
    width: 46px; height: 46px;
    border-radius: 50%;
    display: grid; place-items: center;
    background: var(--white);
    border: 1px solid var(--line);
    color: var(--oxford);
    font-size: 1rem;
    cursor: pointer;
    transition: background-color .25s ease, color .25s ease, border-color .25s ease, opacity .25s ease;
}
.g-arrow:hover:not(:disabled) { background: var(--bronze); border-color: var(--bronze); color: #fff; }
.g-arrow:disabled { opacity: .35; cursor: default; }

/* Filmstrip runs edge to edge but starts aligned to the container */
.gallery-strip {
    display: flex;
    gap: 1rem;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    padding: .5rem max(1rem, calc((100% - 1320px) / 2)) 1.5rem;
    scrollbar-width: thin;
    scrollbar-color: var(--bronze) transparent;
}
.gallery-strip::-webkit-scrollbar { height: 6px; }
.gallery-strip::-webkit-scrollbar-track { background: transparent; }
.gallery-strip::-webkit-scrollbar-thumb { background: var(--line); border-radius: 999px; }
.gallery-strip:hover::-webkit-scrollbar-thumb { background: var(--bronze); }
.gallery-strip.is-dragging { scroll-behavior: auto; cursor: grabbing; scroll-snap-type: none; }

.g-item {
    position: relative;
    flex: none;
    width: 340px;
    aspect-ratio: 3 / 2;
    padding: 0;
    border: 0;
    border-radius: var(--r-lg);
    overflow: hidden;
    background: var(--oxford);
    scroll-snap-align: start;
    cursor: pointer;
    transition: transform .35s ease, box-shadow .35s ease;
}
.g-item.is-tall { width: 240px; aspect-ratio: 2 / 3; }
.g-item:hover { transform: translateY(-5px); box-shadow: var(--shadow-md); }
.g-item:focus-visible { outline: 2px solid var(--bronze); outline-offset: 3px; }

.g-item img {
    width: 100%; height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .6s ease, opacity .3s ease;
}
.g-item:hover img { transform: scale(1.06); }

.g-zoom {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    background: rgba(38, 48, 59, .45);
    color: var(--ivory);
    font-size: 1.4rem;
    opacity: 0;
    transition: opacity .3s ease;
}
.g-item:hover .g-zoom,
.g-item:focus-visible .g-zoom { opacity: 1; }

.gallery-hint {
    font-size: .85rem;
    color: var(--text-small);
    margin: .5rem 0 0;
    display: flex;
    align-items: center;
}
.gallery-hint i { color: var(--bronze); }

/* Lightbox */
.lightbox .modal-content {
    background: transparent;
    border: 0;
    box-shadow: none;
    align-items: center;
}
.lightbox .modal-dialog { max-width: min(1180px, 94vw); }

.lb-figure { margin: 0; text-align: center; width: 100%; }
.lb-figure img {
    max-width: 100%;
    max-height: 78vh;
    border-radius: var(--r-lg);
    box-shadow: 0 30px 80px rgba(0, 0, 0, .5);
    display: block;
    margin: 0 auto;
}
.lb-figure figcaption {
    font-family: var(--font-ui);
    font-size: .88rem;
    color: var(--ivory);
    margin-top: 1rem;
    text-shadow: 0 1px 8px rgba(0, 0, 0, .6);
}

.lb-close {
    position: absolute;
    top: -52px; right: 0;
    width: 42px; height: 42px;
    border-radius: 50%;
    border: 1px solid rgba(238, 235, 221, .35);
    background: rgba(38, 48, 59, .6);
    color: var(--ivory);
    display: grid; place-items: center;
    z-index: 3;
    transition: background-color .25s ease, border-color .25s ease;
}
.lb-close:hover { background: var(--bronze); border-color: var(--bronze); color: #fff; }

.lb-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 48px; height: 48px;
    border-radius: 50%;
    border: 1px solid rgba(238, 235, 221, .3);
    background: rgba(38, 48, 59, .55);
    backdrop-filter: blur(6px);
    color: var(--ivory);
    display: grid; place-items: center;
    font-size: 1.1rem;
    z-index: 3;
    transition: background-color .25s ease, border-color .25s ease;
}
.lb-nav:hover { background: var(--bronze); border-color: var(--bronze); color: #fff; }
.lb-prev { left: -64px; }
.lb-next { right: -64px; }

/* --------------------------------------------------------------------------
   42. Gallery responsive
   -------------------------------------------------------------------------- */
@media (max-width: 1399.98px) {
    .lb-prev { left: 8px; }
    .lb-next { right: 8px; }
}

@media (max-width: 991.98px) {
    .gallery-head { flex-direction: column; align-items: flex-start; gap: 1.25rem; }
    .gallery-nav { display: none; }
    .g-item { width: 300px; }
    .g-item.is-tall { width: 210px; }
}

@media (max-width: 575.98px) {
    .g-item { width: 260px; border-radius: var(--r); }
    .g-item.is-tall { width: 185px; }
    .gallery-strip { gap: .75rem; }
    .lb-figure img { max-height: 68vh; }
    .lb-close { top: -46px; }
    .lb-nav { width: 40px; height: 40px; }
}

/* ==========================================================================
   43. Past-conference gallery — design variants (review page)
   ========================================================================== */

/* --------------------------------------------------------------------------
   Variant 01 — spotlight
   -------------------------------------------------------------------------- */
.gv1-main { margin: 0 0 1rem; }
.gv1-open {
    position: relative;
    display: block;
    width: 100%;
    padding: 0;
    border: 0;
    border-radius: var(--r-xl);
    overflow: hidden;
    background: var(--oxford);
    cursor: zoom-in;
    box-shadow: var(--shadow-md);
}
.gv1-open img {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
}
.gv1-zoom {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    background: rgba(38, 48, 59, .4);
    color: var(--ivory);
    font-size: 1.6rem;
    opacity: 0;
    transition: opacity .3s ease;
}
.gv1-open:hover .gv1-zoom,
.gv1-open:focus-visible .gv1-zoom { opacity: 1; }

.gv1-caption {
    font-family: var(--font-ui);
    font-size: .88rem;
    color: var(--text-2);
    text-align: center;
    margin-bottom: 1.25rem;
}

.gv1-rail {
    display: grid;
    grid-template-columns: repeat(10, 1fr);
    gap: .55rem;
}
.gv1-thumb {
    padding: 0;
    border: 0;
    border-radius: var(--r-sm);
    overflow: hidden;
    background: var(--oxford);
    cursor: pointer;
    position: relative;
    transition: transform .25s ease, box-shadow .25s ease;
}
.gv1-thumb img {
    display: block;
    width: 100%;
    aspect-ratio: 3 / 2;
    object-fit: cover;
    opacity: .55;
    transition: opacity .25s ease;
}
.gv1-thumb:hover img { opacity: .85; }
.gv1-thumb.is-active img { opacity: 1; }
.gv1-thumb.is-active {
    outline: 2px solid var(--bronze);
    outline-offset: 2px;
    transform: translateY(-3px);
}
.gv1-thumb:focus-visible { outline: 2px solid var(--bronze); outline-offset: 3px; }

/* --------------------------------------------------------------------------
   Variant 02 — collage
   -------------------------------------------------------------------------- */
.gv2 {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: repeat(4, 190px);
    grid-template-areas:
        "a a b c"
        "a a d d"
        "e e f g"
        "h i f j";
    gap: .9rem;
}
.gv2-item {
    position: relative;
    padding: 0;
    border: 0;
    border-radius: var(--r);
    overflow: hidden;
    background: var(--oxford);
    cursor: zoom-in;
    transition: transform .35s ease, box-shadow .35s ease;
}
.gv2-item:hover { transform: scale(1.02); box-shadow: var(--shadow-md); z-index: 2; }
.gv2-item:focus-visible { outline: 2px solid var(--bronze); outline-offset: 3px; z-index: 2; }
.gv2-item img {
    width: 100%; height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .6s ease;
}
.gv2-item:hover img { transform: scale(1.06); }

.gv2-zoom {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    background: rgba(38, 48, 59, .42);
    color: var(--ivory);
    font-size: 1.3rem;
    opacity: 0;
    transition: opacity .3s ease;
}
.gv2-item:hover .gv2-zoom,
.gv2-item:focus-visible .gv2-zoom { opacity: 1; }

/* --------------------------------------------------------------------------
   Variant 03 — drifting ribbon
   -------------------------------------------------------------------------- */
.gv3-section { overflow: hidden; }
.gv3 { display: flex; flex-direction: column; gap: 1rem; margin-top: 2.5rem; }
.gv3-row { overflow: hidden; }

.gv3-track {
    display: flex;
    gap: 1rem;
    width: max-content;
    animation: gv3-drift 46s linear infinite;
}
.gv3-row.is-reverse .gv3-track { animation-direction: reverse; }
.gv3-row:hover .gv3-track { animation-play-state: paused; }

@keyframes gv3-drift { to { transform: translateX(-50%); } }

.gv3-item {
    flex: none;
    width: 300px;
    aspect-ratio: 3 / 2;
    padding: 0;
    border: 0;
    border-radius: var(--r);
    overflow: hidden;
    background: var(--oxford-2);
    cursor: zoom-in;
    transition: transform .3s ease;
}
.gv3-item img {
    width: 100%; height: 100%;
    object-fit: cover;
    display: block;
    opacity: .78;
    transition: opacity .3s ease;
}
.gv3-item:hover { transform: translateY(-4px); }
.gv3-item:hover img { opacity: 1; }
.gv3-item:focus-visible { outline: 2px solid var(--bronze); outline-offset: 3px; }

@media (prefers-reduced-motion: reduce) {
    .gv3-track { animation: none; }
    .gv3-row { overflow-x: auto; }
}

/* --------------------------------------------------------------------------
   44. Gallery variants responsive
   -------------------------------------------------------------------------- */
@media (max-width: 991.98px) {
    .gv1-rail { grid-template-columns: repeat(5, 1fr); }

    /* Drop the named areas and let the items flow, with the first one
       and the portrait shot keeping some prominence. */
    .gv2 {
        grid-template-columns: repeat(2, 1fr);
        grid-template-rows: none;
        grid-template-areas: none;
        grid-auto-rows: 168px;
    }
    .gv2-item { grid-area: auto !important; }
    .gv2-item:nth-child(1) { grid-column: span 2; grid-row: span 2; }
    .gv2-item:nth-child(7) { grid-row: span 2; }

    .gv3-item { width: 240px; }
}

@media (max-width: 575.98px) {
    .gv1-rail { grid-template-columns: repeat(4, 1fr); gap: .4rem; }
    .gv1-open img { aspect-ratio: 4 / 3; }

    .gv2 {
        grid-template-columns: 1fr;
        grid-template-rows: none;
        grid-template-areas: none;
        gap: .7rem;
    }
    .gv2-item { grid-area: auto !important; aspect-ratio: 3 / 2; }

    .gv3-item { width: 200px; }
}

.vl-tag {
    font-family: var(--font-ui);
    font-size: .62rem;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--text-small);
    background: var(--white);
    border: 1px solid var(--line);
    border-radius: 999px;
    padding: .18rem .7rem;
    vertical-align: middle;
    margin-left: .5rem;
}

/* --------------------------------------------------------------------------
   45. Publication Opportunities
   -------------------------------------------------------------------------- */
.pub-quote {
    position: relative;
    text-align: center;
    margin: 0 0 1.75rem;
    padding: 0 1rem;
}
.pub-quote .bi-quote { font-size: 2.4rem; color: var(--bronze); line-height: 1; }
.pub-quote p {
    font-family: var(--font-display);
    font-size: clamp(1.3rem, 2.6vw, 1.85rem);
    font-weight: 600;
    line-height: 1.35;
    color: var(--oxford);
    margin: .35rem auto 0;
    max-width: 55ch;
}

.pub-lead {
    font-size: 1rem;
    color: var(--text-body);
    text-align: center;
    /* max-width: 82ch; */
    margin: 0 auto;
}

/* Indexing database logos */
.index-row {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 1rem;
    margin-top: 1.5rem;
}
.index-card {
    background: var(--white);
    border: 1px solid var(--line);
    border-radius: var(--r);
    padding: 1.1rem 1.6rem;
    display: grid;
    place-items: center;
    min-width: 172px;
    min-height: 92px;
    transition: border-color .3s ease, transform .3s ease, box-shadow .3s ease;
}
.index-card:hover { border-color: var(--bronze); transform: translateY(-4px); box-shadow: var(--shadow); }
.index-card img {
    display: block;
    max-width: 128px;
    height: auto;
    /* filter: grayscale(1);
    opacity: .8;
    transition: filter .3s ease, opacity .3s ease; */
}
.index-card:hover img { filter: none; opacity: 1; }

.pub-note {
    background: var(--white);
    border: 1px solid var(--line);
    border-left: 3px solid var(--bronze);
    border-radius: var(--r);
    padding: 1rem 1.35rem;
    font-size: .88rem;
    color: var(--text-2);
    margin: 2rem 0 0;
}
.pub-note b { color: var(--oxford); }

/* Journal Publication Support Program */
.pkg {
    position: relative;
    background: var(--white);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    padding: 2rem 1.5rem 1.5rem;
    height: 100%;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}
.pkg:hover { transform: translateY(-6px); box-shadow: var(--shadow-md); border-color: var(--bronze); }

.pkg-flag {
    position: absolute;
    top: -12px;
    left: 50%;
    transform: translateX(-50%);
    white-space: nowrap;
    font-family: var(--font-ui);
    font-size: .64rem;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: #fff;
    background: var(--oxford);
    border-radius: 999px;
    padding: .25rem .85rem;
}
.pkg.is-featured .pkg-flag { background: var(--bronze); }

.pkg-q {
    font-family: var(--font-num);
    font-size: 2.6rem;
    font-weight: 700;
    line-height: 1;
    color: var(--bronze);
}
.pkg.is-featured .pkg-q { color: var(--oxford); }
.pkg-sub {
    font-family: var(--font-ui);
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--text-small);
    margin-top: .3rem;
}
.pkg h3 {
    font-family: var(--font-ui);
    font-size: 1.05rem;
    color: var(--oxford);
    margin: .85rem 0 1.1rem;
    padding-top: .85rem;
    border-top: 1px solid var(--line);
    width: 100%;
}
.pkg-link {
    margin-top: auto;
    font-family: var(--font-ui);
    font-size: .84rem;
    font-weight: 600;
    color: var(--bronze);
    display: inline-flex;
    align-items: center;
    gap: .4rem;
}
.pkg-link i { transition: transform .25s ease; }
.pkg:hover .pkg-link i { transform: translateX(4px); }

.pkg.is-featured {
    border-color: transparent;
    box-shadow: var(--shadow-md);
    background: linear-gradient(180deg, rgba(154, 105, 78, .10) 0%, var(--white) 42%);
}

/* Scopus band */
.scopus-band { padding: clamp(52px, 5.5vw, 76px) 0; }
.scopus-band .eyebrow { color: var(--bronze); }
.scopus-band .eyebrow i { font-size: 1rem; }
.scopus-band .section-title { font-size: clamp(1.5rem, 3vw, 2.2rem); margin-bottom: .85rem; }

/* --------------------------------------------------------------------------
   46. Publication responsive
   -------------------------------------------------------------------------- */
@media (max-width: 767.98px) {
    .index-card { min-width: 140px; min-height: 80px; padding: .9rem 1.1rem; }
    .index-card img { max-width: 104px; }
    .pub-lead { text-align: left; }
    .scopus-band .text-lg-end { text-align: left !important; }
    .scopus-band .btn { width: 100%; }
}

@media (max-width: 575.98px) {
    .index-row { gap: .7rem; }
    .index-card { min-width: calc(50% - .35rem); }
    .pkg { padding: 1.85rem 1.25rem 1.35rem; }
}

/* --------------------------------------------------------------------------
   47. Redefine Your Research Journey — numbered editorial steps
   Deliberately not the icon-circle-and-arrow pattern: outlined numerals,
   hairline rules and generous whitespace, in keeping with the journal-inspired
   direction in the brand document.
   -------------------------------------------------------------------------- */
.journey-grid {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 4rem;
}

.journey-step {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 1.5rem;
    align-items: start;
    padding: 1.85rem .25rem;
    border-top: 1px solid var(--line);
    position: relative;
}
/* Bronze rule slides across the top of a step on hover. */
.journey-step::before {
    content: "";
    position: absolute;
    top: -1px; left: 0;
    width: 100%;
    height: 1px;
    background: var(--bronze);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .45s ease;
}
.journey-step:hover::before { transform: scaleX(1); }

.js-no {
    font-family: var(--font-num);
    font-size: clamp(2.6rem, 4.4vw, 3.4rem);
    font-weight: 700;
    line-height: .9;
    letter-spacing: -.02em;
    color: transparent;
    -webkit-text-stroke: 1.5px var(--bronze);
    text-stroke: 1.5px var(--bronze);
    transition: color .35s ease, transform .35s ease;
    user-select: none;
}
.journey-step:hover .js-no { color: var(--bronze); transform: translateY(-2px); }

/* Browsers without text-stroke get a solid, lighter numeral instead of nothing. */
@supports not (-webkit-text-stroke: 1px red) {
    .js-no { color: rgba(154, 105, 78, .38); }
}

.js-body h3 {
    font-family: var(--font-ui);
    font-size: 1.08rem;
    font-weight: 700;
    color: var(--oxford);
    margin: .2rem 0 .45rem;
    transition: color .3s ease;
}
.journey-step:hover .js-body h3 { color: var(--bronze); }
.js-body p { font-size: .94rem; color: var(--text-2); margin: 0; }

/* --------------------------------------------------------------------------
   48. Research journey responsive
   -------------------------------------------------------------------------- */
@media (max-width: 991.98px) {
    .journey-grid { column-gap: 2.5rem; }
    .journey-step { gap: 1.15rem; padding: 1.5rem .1rem; }
}

@media (max-width: 767.98px) {
    .journey-grid { grid-template-columns: minmax(0, 1fr); }
    .js-no { font-size: 2.4rem; }
}

/* ==========================================================================
   49. Research journey — step-process variants (review page)
   ========================================================================== */

/* --------------------------------------------------------------------------
   Variant 01 — connected spine
   -------------------------------------------------------------------------- */
.jv1 {
    list-style: none;
    margin: 0;
    padding: 0;
    position: relative;
}
.jv1::before {
    content: "";
    position: absolute;
    left: 50%;
    top: 18px;
    bottom: 18px;
    width: 2px;
    margin-left: -1px;
    background: linear-gradient(180deg,
        var(--bronze) 0%,
        var(--bronze) 88%,
        rgba(154, 105, 78, .15) 100%);
}

.jv1-step {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 84px minmax(0, 1fr);
    align-items: center;
    margin-bottom: 1.25rem;
}
.jv1-step:last-child { margin-bottom: 0; }

.jv1-node {
    grid-column: 2;
    justify-self: center;
    width: 54px; height: 54px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: var(--white);
    border: 2px solid var(--bronze);
    color: var(--bronze);
    font-family: var(--font-num);
    font-size: .92rem;
    font-weight: 700;
    position: relative;
    z-index: 2;
    transition: background-color .3s ease, color .3s ease, transform .3s ease;
}
.jv1-step:hover .jv1-node { background: var(--bronze); color: #fff; transform: scale(1.08); }

.jv1-card {
    background: var(--white);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    padding: 1.35rem 1.5rem;
    position: relative;
    transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}
.jv1-step:hover .jv1-card { box-shadow: var(--shadow); border-color: var(--bronze); }

.jv1-step:nth-child(odd) .jv1-card  { grid-column: 1; grid-row: 1; text-align: right; }
.jv1-step:nth-child(even) .jv1-card { grid-column: 3; grid-row: 1; }
.jv1-step:nth-child(odd):hover .jv1-card  { transform: translateX(-4px); }
.jv1-step:nth-child(even):hover .jv1-card { transform: translateX(4px); }

/* Small connector from the card to the spine */
.jv1-card::after {
    content: "";
    position: absolute;
    top: 50%;
    width: 15px;
    height: 1px;
    background: var(--bronze);
    opacity: .5;
}
.jv1-step:nth-child(odd) .jv1-card::after  { right: -15px; }
.jv1-step:nth-child(even) .jv1-card::after { left: -15px; }

.jv1-card h3 {
    font-family: var(--font-ui);
    font-size: 1.05rem;
    color: var(--oxford);
    margin: 0 0 .4rem;
}
.jv1-card p { font-size: .92rem; color: var(--text-2); margin: 0; }

/* --------------------------------------------------------------------------
   Variant 02 — chevron ribbon
   -------------------------------------------------------------------------- */
.jv2 {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0;
}
.jv2-step {
    position: relative;
    padding: 1.6rem 2.6rem 1.6rem 2rem;
    background: rgba(255, 255, 255, .07);
    border: 1px solid rgba(238, 235, 221, .14);
    border-right: 0;
    clip-path: polygon(0 0, calc(100% - 26px) 0, 100% 50%, calc(100% - 26px) 100%, 0 100%, 26px 50%);
    margin-left: -22px;
    transition: background-color .3s ease;
}
.jv2-step.is-alt { background: rgba(154, 105, 78, .16); }
.jv2-step:hover  { background: rgba(154, 105, 78, .3); }

/* First segment in each row has a flat left edge. */
.jv2-step:nth-child(3n + 1) {
    clip-path: polygon(0 0, calc(100% - 26px) 0, 100% 50%, calc(100% - 26px) 100%, 0 100%);
    margin-left: 0;
    border-radius: var(--r) 0 0 var(--r);
}

.jv2-no {
    font-family: var(--font-num);
    font-size: .74rem;
    font-weight: 700;
    letter-spacing: .12em;
    color: var(--bronze);
    display: block;
    margin-bottom: .4rem;
}
.jv2-step h3 {
    font-family: var(--font-ui);
    font-size: 1rem;
    color: var(--ivory);
    margin: 0 0 .45rem;
}
.jv2-step p { font-size: .86rem; color: var(--hero-sub); margin: 0; }

/* --------------------------------------------------------------------------
   Variant 03 — descending staircase
   -------------------------------------------------------------------------- */
.jv3 { list-style: none; margin: 0; padding: 0; }
.jv3-step {
    display: grid;
    grid-template-columns: 62px minmax(0, 1fr);
    gap: 1.35rem;
    align-items: start;
    background: var(--white);
    border: 1px solid var(--line);
    border-left: 3px solid var(--bronze);
    border-radius: var(--r);
    padding: 1.3rem 1.5rem;
    margin-bottom: .85rem;
    /* Each stage steps further across than the last. */
    margin-left: calc(var(--step) * 46px);
    transition: transform .3s ease, box-shadow .3s ease;
}
.jv3-step:last-child { margin-bottom: 0; }
.jv3-step:hover { transform: translateX(6px); box-shadow: var(--shadow); }

.jv3-no {
    font-family: var(--font-num);
    font-size: 1.9rem;
    font-weight: 700;
    line-height: 1;
    color: var(--bronze);
    opacity: .55;
    transition: opacity .3s ease;
}
.jv3-step:hover .jv3-no { opacity: 1; }

.jv3-body h3 {
    font-family: var(--font-ui);
    font-size: 1.05rem;
    color: var(--oxford);
    margin: 0 0 .35rem;
}
.jv3-body p { font-size: .93rem; color: var(--text-2); margin: 0; }

/* --------------------------------------------------------------------------
   50. Journey variants responsive
   -------------------------------------------------------------------------- */
@media (max-width: 991.98px) {
    /* Spine moves to the left and every card sits to its right. */
    .jv1::before { left: 27px; margin-left: 0; }
    .jv1-step { grid-template-columns: 54px minmax(0, 1fr); gap: 1.25rem; }
    .jv1-node { grid-column: 1; }
    .jv1-step:nth-child(odd) .jv1-card,
    .jv1-step:nth-child(even) .jv1-card { grid-column: 2; grid-row: 1; text-align: left; }
    .jv1-step:nth-child(odd) .jv1-card::after { right: auto; left: -15px; }
    .jv1-step:hover .jv1-card { transform: translateX(4px); }

    .jv2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .jv2-step:nth-child(3n + 1) {
        clip-path: polygon(0 0, calc(100% - 26px) 0, 100% 50%, calc(100% - 26px) 100%, 0 100%, 26px 50%);
        margin-left: -22px;
        border-radius: 0;
    }
    .jv2-step:nth-child(2n + 1) {
        clip-path: polygon(0 0, calc(100% - 26px) 0, 100% 50%, calc(100% - 26px) 100%, 0 100%);
        margin-left: 0;
        border-radius: var(--r) 0 0 var(--r);
    }

    .jv3-step { margin-left: calc(var(--step) * 26px); }
}

@media (max-width: 767.98px) {
    /* Chevrons stack and point downward. */
    .jv2 { grid-template-columns: minmax(0, 1fr); }
    .jv2-step,
    .jv2-step:nth-child(3n + 1),
    .jv2-step:nth-child(2n + 1) {
        clip-path: polygon(0 0, 100% 0, 100% calc(100% - 20px), 50% 100%, 0 calc(100% - 20px));
        margin-left: 0;
        margin-top: -14px;
        padding: 1.4rem 1.4rem 2.4rem;
        border-radius: 0;
        border-right: 1px solid rgba(238, 235, 221, .14);
    }
    .jv2-step:first-child { margin-top: 0; border-radius: var(--r) var(--r) 0 0; }

    .jv3-step { margin-left: 0; border-left-width: 3px; }
    .jv3-step:nth-child(n) { margin-left: 0; }
}

/* --------------------------------------------------------------------------
   Variant 04 — progress stepper
   -------------------------------------------------------------------------- */
.jv4-rail {
    display: flex;
    position: relative;
    flex-wrap: nowrap;
    margin-bottom: 2rem;
}
/* Track runs between the first and last dot centres (half a column each side). */
.jv4-rail::before,
.jv4-rail::after {
    content: "";
    position: absolute;
    top: 21px;
    height: 2px;
    left: 8.333%;
}
.jv4-rail::before { width: 83.334%; background: var(--line); }
.jv4-rail::after {
    width: calc(83.334% * var(--fill, 0) / 100);
    background: var(--bronze);
    transition: width .45s ease;
}

.jv4-node {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .65rem;
    background: none;
    border: 0;
    padding: 0 .35rem;
    cursor: pointer;
}
.jv4-dot {
    width: 44px; height: 44px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: var(--warm-ivory);
    border: 2px solid var(--line);
    color: var(--text-small);
    font-family: var(--font-num);
    font-size: .8rem;
    font-weight: 700;
    position: relative;
    z-index: 1;
    transition: background-color .3s ease, border-color .3s ease, color .3s ease, transform .3s ease;
}
.jv4-node:hover .jv4-dot { border-color: var(--bronze); color: var(--bronze); }
.jv4-node.is-done .jv4-dot { background: var(--white); border-color: var(--bronze); color: var(--bronze); }
.jv4-node.active .jv4-dot {
    background: var(--bronze);
    border-color: var(--bronze);
    color: #fff;
    transform: scale(1.12);
}
.jv4-label {
    font-family: var(--font-ui);
    font-size: .78rem;
    font-weight: 600;
    line-height: 1.3;
    color: var(--text-small);
    text-align: center;
    transition: color .3s ease;
}
.jv4-node.active .jv4-label,
.jv4-node.is-done .jv4-label { color: var(--oxford); }
.jv4-node:focus-visible { outline: 2px solid var(--bronze); outline-offset: 4px; border-radius: var(--r-sm); }

.jv4-panel {
    background: var(--white);
    border: 1px solid var(--line);
    border-left: 3px solid var(--bronze);
    border-radius: var(--r-lg);
    padding: 1.85rem 2rem;
}
.jv4-stage {
    font-family: var(--font-num);
    font-size: .74rem;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--bronze);
    display: block;
    margin-bottom: .5rem;
}
.jv4-stage em { font-style: normal; color: var(--text-small); }
.jv4-panel h3 {
    font-family: var(--font-display);
    font-size: clamp(1.35rem, 2.4vw, 1.75rem);
    color: var(--oxford);
    margin: 0 0 .5rem;
}
.jv4-panel p { font-size: .98rem; color: var(--text-body); margin: 0; max-width: 74ch; }

/* --------------------------------------------------------------------------
   Variant 05 — expanding ladder
   -------------------------------------------------------------------------- */
.jv5 { position: relative; }
/* Continuous rail behind the rungs, aligned with the numerals. */
.jv5::before {
    content: "";
    position: absolute;
    left: 30px;
    top: 22px;
    bottom: 22px;
    width: 2px;
    background: linear-gradient(180deg, var(--bronze), rgba(154, 105, 78, .2));
}

.jv5-item {
    background: transparent;
    border: 0;
    margin-bottom: .6rem;
}
.jv5-item:last-child { margin-bottom: 0; }

.jv5 .accordion-button {
    display: flex;
    align-items: center;
    gap: 1.1rem;
    background: var(--white);
    border: 1px solid var(--line);
    border-radius: var(--r) !important;
    padding: .95rem 1.35rem;
    box-shadow: none;
    transition: border-color .3s ease, box-shadow .3s ease;
}
.jv5 .accordion-button:not(.collapsed) {
    border-color: var(--bronze);
    box-shadow: var(--shadow-sm);
}
.jv5 .accordion-button::after {
    content: "\F64D"; /* bi-plus-lg */
    font-family: "bootstrap-icons";
    background-image: none;
    width: auto; height: auto;
    font-size: .88rem;
    color: var(--bronze);
    transition: transform .3s ease;
}
.jv5 .accordion-button:not(.collapsed)::after { transform: rotate(45deg); }

.jv5-no {
    width: 40px; height: 40px;
    flex: none;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: var(--warm-ivory);
    border: 2px solid var(--line);
    color: var(--bronze);
    font-family: var(--font-num);
    font-size: .78rem;
    font-weight: 700;
    position: relative;
    z-index: 1;
    transition: background-color .3s ease, border-color .3s ease, color .3s ease;
}
.jv5 .accordion-button:not(.collapsed) .jv5-no {
    background: var(--bronze);
    border-color: var(--bronze);
    color: #fff;
}
.jv5-title {
    font-family: var(--font-ui);
    font-size: 1.02rem;
    font-weight: 700;
    color: var(--oxford);
    line-height: 1.35;
}
.jv5 .accordion-button:not(.collapsed) .jv5-title { color: var(--bronze); }

.jv5 .accordion-body {
    padding: .9rem 1.35rem .5rem calc(1.35rem + 40px + 1.1rem);
    font-size: .94rem;
    color: var(--text-2);
}

/* --------------------------------------------------------------------------
   51. Variants 04 and 05 responsive
   -------------------------------------------------------------------------- */
@media (max-width: 991.98px) {
    .jv4-label { font-size: .7rem; }
    .jv4-panel { padding: 1.5rem 1.5rem; }
}

@media (max-width: 767.98px) {
    /* The rail scrolls sideways rather than crushing six labels together. */
    .jv4-rail {
        overflow-x: auto;
        padding-bottom: .5rem;
        scrollbar-width: thin;
    }
    .jv4-rail::before, .jv4-rail::after { display: none; }
    .jv4-node { flex: 0 0 118px; }

    .jv5::before { display: none; }
    .jv5 .accordion-button { gap: .8rem; padding: .85rem 1.1rem; }
    .jv5-no { width: 34px; height: 34px; font-size: .72rem; }
    .jv5-title { font-size: .95rem; }
    .jv5 .accordion-body { padding-left: 1.1rem; }
}

/* --------------------------------------------------------------------------
   52. Why attend
   -------------------------------------------------------------------------- */
.why-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1rem;
}
.why-card {
    position: relative;
    background: var(--warm-ivory);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    padding: 2.1rem 1.35rem 1.5rem;
    overflow: hidden;
    transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease, background-color .3s ease;
}
.why-card::before {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    background: var(--bronze);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .35s ease;
}
.why-card:hover {
    transform: translateY(-6px);
    box-shadow: var(--shadow-md);
    border-color: transparent;
    background: var(--white);
}
.why-card:hover::before { transform: scaleX(1); }

.why-no {
    position: absolute;
    top: .7rem; right: 1rem;
    font-family: var(--font-num);
    font-size: 2.4rem;
    font-weight: 700;
    line-height: 1;
    color: var(--bronze);
    opacity: .13;
    transition: opacity .3s ease;
}
.why-card:hover .why-no { opacity: .28; }

.why-icon {
    width: 48px; height: 48px;
    border-radius: 13px;
    display: grid;
    place-items: center;
    background: var(--bronze-soft);
    color: var(--bronze);
    font-size: 1.3rem;
    margin-bottom: 1rem;
    transition: background-color .3s ease, color .3s ease;
}
.why-card:hover .why-icon { background: var(--bronze); color: #fff; }

.why-card h3 {
    font-family: var(--font-ui);
    font-size: 1rem;
    color: var(--oxford);
    margin: 0 0 .4rem;
}
.why-card p { font-size: .89rem; color: var(--text-2); margin: 0; }

@media (max-width: 767.98px) {
    .why-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 479.98px) {
    .why-grid { grid-template-columns: minmax(0, 1fr); }
}

/* Centre the eyebrow's flanking rules when it sits in centred text. */
.eyebrow.justify-content-center::after {
    content: "";
    width: 30px;
    height: 1px;
    background: var(--bronze);
}


/* --------------------------------------------------------------------------
   54. Welcome section — past-conference collage above the theme card
   -------------------------------------------------------------------------- */
.about-media {
    display: grid;
    grid-template-columns: 1.4fr 1fr;
    grid-template-rows: repeat(2, 1fr);
    gap: .75rem;
    height: 290px;
    margin-bottom: 1.1rem;
}
/* The first photograph takes the full height of the left column. */
.about-media > :first-child { grid-row: span 2; }

.am-shot {
    position: relative;
    padding: 0;
    border: 0;
    border-radius: var(--r);
    overflow: hidden;
    background: var(--oxford);
    cursor: zoom-in;
    transition: transform .35s ease, box-shadow .35s ease;
}
.am-shot:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.am-shot:focus-visible { outline: 2px solid var(--bronze); outline-offset: 3px; }

.am-shot img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .6s ease;
}
.am-shot:hover img { transform: scale(1.07); }

.am-zoom {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    background: rgba(38, 48, 59, .45);
    color: var(--ivory);
    font-size: 1.1rem;
    opacity: 0;
    transition: opacity .3s ease;
}
.am-shot:hover .am-zoom,
.am-shot:focus-visible .am-zoom { opacity: 1; }

@media (max-width: 991.98px) {
    .about-media { height: 240px; }
}

@media (max-width: 575.98px) {
    /* Three equal thumbnails in a row rather than a tall collage. */
    .about-media {
        grid-template-columns: repeat(3, 1fr);
        grid-template-rows: 1fr;
        height: 110px;
        gap: .5rem;
    }
    .about-media > :first-child { grid-row: span 1; }
}

/* --------------------------------------------------------------------------
   55. Welcome intro block
   -------------------------------------------------------------------------- */
.welcome-lead {
    font-size: 1.02rem;
    line-height: 1.85;
    color: var(--text-body);
    max-width: 92ch;
    margin: 0 auto;
    text-align: left;
}

@media (max-width: 767.98px) {
    .welcome-lead { font-size: .97rem; line-height: 1.8; }
}

/* ==========================================================================
   56. Welcome section — design variants (review page)
   ========================================================================== */

/* --------------------------------------------------------------------------
   Variant 01 — asymmetric split
   -------------------------------------------------------------------------- */
.wv1 {
    display: grid;
    grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr);
    gap: 3.5rem;
    align-items: start;
}
.wv1-head .section-title { margin-bottom: 0; }
.wv1-head .rule-bronze { margin: 1.25rem 0; }
.wv1-meta {
    font-family: var(--font-ui);
    font-size: .85rem;
    font-weight: 600;
    line-height: 1.7;
    color: var(--text-small);
    margin: 0;
}
.wv1-body {
    border-left: 1px solid var(--line);
    padding-left: 3.5rem;
}
.wv1-body p {
    font-size: 1.02rem;
    line-height: 1.9;
    color: var(--text-body);
    margin: 0;
}

/* --------------------------------------------------------------------------
   Variant 02 — framed statement with a drop capital
   -------------------------------------------------------------------------- */
.wv2 {
    position: relative;
    background: var(--white);
    border: 1px solid var(--line);
    border-radius: var(--r-xl);
    padding: clamp(2rem, 4vw, 3.25rem);
    box-shadow: var(--shadow-sm);
}
/* Bronze corner rules, drawn as two L-shaped brackets. */
.wv2::before,
.wv2::after {
    content: "";
    position: absolute;
    width: 46px;
    height: 46px;
    border: 2px solid var(--bronze);
    pointer-events: none;
}
.wv2::before {
    top: 16px; left: 16px;
    border-right: 0; border-bottom: 0;
    border-radius: var(--r) 0 0 0;
}
.wv2::after {
    bottom: 16px; right: 16px;
    border-left: 0; border-top: 0;
    border-radius: 0 0 var(--r) 0;
}

.wv2-body {
    font-size: 1.02rem;
    line-height: 1.9;
    color: var(--text-body);
    max-width: 86ch;
    margin: 1.5rem auto 0;
}
.wv2-body::first-letter {
    float: left;
    font-family: var(--font-display);
    font-size: 4.1rem;
    font-weight: 700;
    line-height: .82;
    color: var(--bronze);
    margin: .06em .14em 0 0;
}

/* --------------------------------------------------------------------------
   Variant 03 — journal columns
   -------------------------------------------------------------------------- */
.wv3-body {
    column-count: 2;
    column-gap: 3.5rem;
    column-rule: 1px solid var(--line);
    margin-top: 1.75rem;
}
.wv3-body p {
    font-size: .99rem;
    line-height: 1.9;
    color: var(--text-body);
    margin: 0;
    text-align: justify;
    hyphens: auto;
}
.wv3-body p::first-line {
    font-variant-caps: small-caps;
    letter-spacing: .02em;
    color: var(--oxford);
}

/* --------------------------------------------------------------------------
   57. Welcome variants responsive
   -------------------------------------------------------------------------- */
@media (max-width: 991.98px) {
    .wv1 { grid-template-columns: minmax(0, 1fr); gap: 1.75rem; }
    .wv1-body { border-left: 0; border-top: 1px solid var(--line); padding-left: 0; padding-top: 1.75rem; }

    .wv3-body { column-count: 1; }
    .wv3-body p { text-align: left; }
}

@media (max-width: 575.98px) {
    .wv2::before, .wv2::after { width: 30px; height: 30px; }
    .wv2-body::first-letter { font-size: 3.2rem; }
}

/* --------------------------------------------------------------------------
   58. Purpose card — sits under the theme card in the About column
   -------------------------------------------------------------------------- */
.purpose-card {
    display: flex;
    gap: 1.1rem;
    align-items: flex-start;
    background: var(--warm-ivory);
    border: 1px solid var(--line);
    border-left: 3px solid var(--bronze);
    border-radius: var(--r-lg);
    padding: 1.5rem 1.6rem;
    margin-top: 1.1rem;
    transition: transform .3s ease, box-shadow .3s ease;
}
.purpose-card:hover { transform: translateY(-4px); box-shadow: var(--shadow); }

.purpose-card .pc-icon {
    width: 46px; height: 46px;
    flex: none;
    border-radius: 13px;
    display: grid;
    place-items: center;
    background: var(--bronze-soft);
    color: var(--bronze);
    font-size: 1.2rem;
    transition: background-color .3s ease, color .3s ease;
}
.purpose-card:hover .pc-icon { background: var(--bronze); color: #fff; }

.purpose-card h3 {
    font-family: var(--font-ui);
    font-size: 1.05rem;
    color: var(--oxford);
    margin: .15rem 0 .4rem;
        margin-bottom: 13px;
}
.purpose-card p {     font-size: 15px;
    line-height: 30px;
    color: var(--text-2);
    margin: 0; }

@media (max-width: 575.98px) {
    .purpose-card { flex-direction: column; gap: .9rem; padding: 1.35rem; }
}

/* ==========================================================================
   59. Banner & Important Dates — design variants (review page)
   ========================================================================== */

/* Caption strip above each variant */
.vl-strip {
    font-size: .92rem;
    color: var(--text-2);
    background: var(--white);
    border: 1px solid var(--line);
    border-left: 3px solid var(--bronze);
    border-radius: var(--r-sm);
    padding: .8rem 1.1rem;
    margin: 2.5rem 0 1.25rem;
}
.vl-strip .vl-no { margin-right: .6rem; }
.vl-strip.on-dark {
    background: rgba(255, 255, 255, .06);
    border-color: rgba(238, 235, 221, .16);
    border-left-color: var(--bronze);
    color: var(--hero-sub);
    margin-top: 0;
}

/* Shared banner bits */
.bv1, .bv2, .bv3 {
    position: relative;
    background-color: var(--oxford);
    background-size: cover;
    background-position: center 42%;
    background-repeat: no-repeat;
    color: var(--ivory);
    overflow: hidden;
}
.bv1 > .container, .bv2 > .container, .bv3 > .container,
.bv3 > .bv3-bar { position: relative; z-index: 2; }

.bv-edition {
    font-family: var(--font-ui);
    font-weight: 700;
    font-size: .76rem;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: var(--bronze);
    margin-bottom: .9rem;
}
.bv-sub {
    font-family: var(--font-ui);
    font-weight: 600;
    font-size: clamp(.95rem, 1.5vw, 1.08rem);
    color: var(--ivory);
    margin-bottom: 1.15rem;
}

section#inclusions {
    background: #ffefe6;
}


/* --------------------------------------------------------------------------
   Banner 01 — centred spotlight
   -------------------------------------------------------------------------- */
.bv1 { padding: clamp(64px, 8vw, 104px) 0; text-align: center; }
.bv1::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    background:
      radial-gradient(ellipse at 50% 45%, rgba(38, 48, 59, .72) 0%, rgb(38 48 59 / 19%) 70%), linear-gradient(180deg, rgba(38, 48, 59, .5) 0%, rgb(38 48 59 / 71%) 100%);
}
.bv1 .display-hero { margin-bottom: .75rem; }
.bv1-theme {
    font-family: var(--font-display);
    font-size: clamp(1.1rem, 2.2vw, 1.5rem);
    color: var(--hero-sub);
    max-width: 44ch;
    margin: 1.5rem auto 1.9rem;
    padding-top: 1.4rem;
    border-top: 1px solid rgba(238, 235, 221, .22);
}
.bv1 .countdown { margin-top: 2.5rem; }

/* --------------------------------------------------------------------------
   Banner 02 — glass panel
   -------------------------------------------------------------------------- */
.bv2 { padding: clamp(48px, 6vw, 84px) 0; }
.bv2::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(100deg, rgba(38, 48, 59, .72) 0%, rgba(38, 48, 59, .28) 55%, rgba(38, 48, 59, .15) 100%);
}
.bv2-panel {
    max-width: 620px;
    background: rgba(29, 37, 45, .82);
    backdrop-filter: blur(14px);
    border: 1px solid rgba(238, 235, 221, .18);
    border-radius: var(--r-xl);
    padding: clamp(1.75rem, 3.5vw, 2.75rem);
    box-shadow: 0 24px 60px rgba(0, 0, 0, .35);
}
.bv2-theme {
    font-size: .98rem;
    color: var(--hero-sub);
    border-left: 2px solid var(--bronze);
    padding-left: 1rem;
    margin-bottom: 1.5rem;
}
.bv2-theme b { color: var(--ivory); font-weight: 600; }

.bv2-meta {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1px;
    background: rgba(238, 235, 221, .16);
    border: 1px solid rgba(238, 235, 221, .16);
    border-radius: var(--r);
    overflow: hidden;
    margin-bottom: 1.6rem;
}
.bv2-meta > div { background: rgba(29, 37, 45, .75); padding: .85rem .9rem; }
.bv2-meta span {
    display: block;
    font-family: var(--font-ui);
    font-size: .64rem;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--bronze);
    margin-bottom: .2rem;
}
.bv2-meta b { font-family: var(--font-ui); font-size: .88rem; color: var(--ivory); }

/* --------------------------------------------------------------------------
   Banner 03 — full bleed with a data bar
   -------------------------------------------------------------------------- */
.bv3 { padding: 0; }
.bv3::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(180deg, rgba(38, 48, 59, .82) 0%, rgba(38, 48, 59, .55) 55%, rgba(38, 48, 59, .78) 100%);
}
.bv3-top { padding: clamp(64px, 8vw, 112px) var(--bs-gutter-x, 1.5rem) clamp(56px, 7vw, 92px); }
.bv3-theme {
    font-family: var(--font-display);
    font-size: clamp(1.15rem, 2.4vw, 1.65rem);
    color: var(--hero-sub);
    max-width: 40ch;
    margin: .5rem 0 1.9rem;
}

.bv3-bar {
    background: rgba(29, 37, 45, .92);
    backdrop-filter: blur(10px);
    border-top: 1px solid rgba(154, 105, 78, .45);
}
.bv3-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr)) auto;
    gap: 1.5rem;
    align-items: center;
    padding: 1.2rem 0;
}
.bv3-grid > div:not(.countdown) span {
    display: block;
    font-family: var(--font-ui);
    font-size: .64rem;
    font-weight: 700;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--bronze);
    margin-bottom: .25rem;
}
.bv3-grid > div:not(.countdown) b { font-family: var(--font-ui); font-size: .92rem; color: var(--ivory); }
.bv3-grid .countdown { margin: 0; gap: .5rem; }
.bv3-grid .cd-cell { min-width: 68px; padding: .5rem .7rem; }
.bv3-grid .cd-cell b { font-size: 1.25rem; }

/* --------------------------------------------------------------------------
   Dates 01 — milestone track
   -------------------------------------------------------------------------- */
.dv1 {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    position: relative;
}
.dv1::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 12.5%;
    width: 75%;
    height: 2px;
    background: linear-gradient(90deg, var(--bronze), rgba(154, 105, 78, .25));
    transform: translateY(-50%);
}
.dv1-step {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 0 .75rem;
}
.dv1-date {
    font-family: var(--font-num);
    font-size: .92rem;
    font-weight: 700;
    color: var(--bronze);
    margin-bottom: 1.1rem;
    min-height: 2.6rem;
}
.dv1-dot {
    width: 46px; height: 46px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: var(--white);
    border: 2px solid var(--bronze);
    color: var(--oxford);
    font-family: var(--font-num);
    font-size: .82rem;
    font-weight: 700;
    position: relative;
    z-index: 1;
    transition: background-color .3s ease, color .3s ease, transform .3s ease;
}
.dv1-step:hover .dv1-dot { background: var(--bronze); color: #fff; transform: scale(1.1); }
.dv1-label {
    font-family: var(--font-ui);
    font-size: .9rem;
    font-weight: 600;
    color: var(--oxford);
    line-height: 1.4;
    margin-top: 1.1rem;
    max-width: 20ch;
}

/* --------------------------------------------------------------------------
   Dates 02 — calendar tiles
   -------------------------------------------------------------------------- */
.dates-card {
    background: var(--warm-ivory);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    padding: 1.5rem;
    height: 100%;
    text-align: center;
    transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}
.dates-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-md); border-color: var(--bronze); }

.dates-tile {
    width: 92px;
    margin: 0 auto 1.1rem;
    border-radius: var(--r);
    overflow: hidden;
    border: 1px solid var(--line);
    background: var(--white);
    box-shadow: var(--shadow-sm);
}
.dates-tile b {
    display: block;
    font-family: var(--font-num);
    font-size: 2.3rem;
    font-weight: 700;
    line-height: 1.15;
    color: var(--oxford);
    padding: .5rem 0 .35rem;
}
.dates-tile span {
    display: block;
    background: var(--bronze);
    color: #fff;
    font-family: var(--font-ui);
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .12em;
    padding: .3rem 0;
}
.dates-card h3 {
    font-family: var(--font-ui);
    font-size: 1rem;
    color: var(--oxford);
    margin: 0 0 .45rem;
}
.dates-card p { font-size: .86rem; color: var(--text-2); margin: 0; }

/* --------------------------------------------------------------------------
   Dates 03 — deadline ledger
   -------------------------------------------------------------------------- */
.dv3-next {
    background: rgba(154, 105, 78, .16);
    border: 1px solid var(--bronze);
    border-radius: var(--r-xl);
    padding: 1.75rem;
}
.dv3-next > span {
    font-family: var(--font-ui);
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--bronze);
}
.dv3-next b {
    display: block;
    font-family: var(--font-num);
    font-size: 1.8rem;
    font-weight: 700;
    color: var(--ivory);
    margin: .35rem 0 .2rem;
}
.dv3-next p { font-size: .92rem; color: var(--hero-sub); margin: 0; }

.dv3-list { list-style: none; margin: 0; padding: 0; }
.dv3-list li {
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr) auto;
    gap: 1rem;
    align-items: center;
    padding: 1rem .25rem;
    border-bottom: 1px solid rgba(238, 235, 221, .14);
    transition: padding-left .25s ease;
}
.dv3-list li:first-child { border-top: 1px solid rgba(238, 235, 221, .14); }
.dv3-list li:hover { padding-left: 1rem; }
.dv3-no { font-family: var(--font-num); font-size: .8rem; font-weight: 700; color: var(--bronze); }
.dv3-label { font-family: var(--font-ui); font-size: .98rem; font-weight: 600; color: var(--ivory); }
.dv3-date { font-family: var(--font-num); font-size: .92rem; font-weight: 700; color: var(--hero-sub); white-space: nowrap; }

/* --------------------------------------------------------------------------
   60. Banner & dates variants responsive
   -------------------------------------------------------------------------- */
@media (max-width: 991.98px) {
    .bv3-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.1rem; }
    .bv3-grid .countdown { grid-column: 1 / -1; }

    .dv1 { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 2.5rem; }
    .dv1::before { display: none; }
}

@media (max-width: 767.98px) {
    .bv2-panel { max-width: none; }
    .bv2-meta { grid-template-columns: minmax(0, 1fr); }
    .bv1-theme { padding-top: 1.1rem; }
    .dv1 { grid-template-columns: minmax(0, 1fr); }
    .dv3-list li { grid-template-columns: 34px minmax(0, 1fr); }
    .dv3-date { grid-column: 2; }
}

/* --------------------------------------------------------------------------
   61. Banner variant 04 — key-visual layout from the supplied artwork
   Every rule is class-scoped; no bare descendant `span` selectors, since the
   text blocks nest a span inside a span (see buglog bug-002).
   -------------------------------------------------------------------------- */
.bv4 {
    background: linear-gradient(120deg, #F3EFE6 0%, #EFE9DC 46%, #E7DDCB 100%);
    color: var(--oxford);
    overflow: hidden;
}

/* Faint dot grid, top-left and top-right, as in the artwork */
.bv4-main {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
    align-items: center;
    gap: 2rem;
    max-width: 1320px;
    margin: 0 auto;
    padding: clamp(2rem, 4vw, 3.25rem) var(--bs-gutter-x, 1.5rem);
}
.bv4-main::before,
.bv4-main::after {
    content: "";
    position: absolute;
    top: 1.5rem;
    width: 92px;
    height: 68px;
    background-image: radial-gradient(var(--bronze) 1.6px, transparent 1.7px);
    background-size: 15px 15px;
    opacity: .35;
    pointer-events: none;
}
.bv4-main::before { left: 1.5rem; }
.bv4-main::after  { right: 1.5rem; }

.bv4-left { position: relative; z-index: 2; }

/* Edition pill */
.bv4-pill {
    display: inline-flex;
    align-items: center;
    background: linear-gradient(135deg, #8A5A3B, #6E442B);
    border-radius: 999px;
    padding: .3rem .3rem .3rem .3rem;
    margin-bottom: 1.35rem;
    box-shadow: 0 8px 20px rgba(110, 68, 43, .28);
}
.bv4-pill-icon {
    width: 44px; height: 44px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: linear-gradient(140deg, #A9744E, #7A4E33);
    color: #F6EFE4;
    font-size: 1.15rem;
    border: 2px solid rgba(246, 239, 228, .55);
    flex: none;
}
.bv4-pill-a, .bv4-pill-b {
    font-family: var(--font-ui);
    font-weight: 700;
    font-size: .95rem;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: #F6EFE4;
    padding: 0 1.1rem;
    white-space: nowrap;
}
.bv4-pill-b { border-left: 1px solid rgba(246, 239, 228, .45); }

/* Wordmark */
.bv4-word {
    font-family: var(--font-ui);
    font-weight: 800;
    font-size: clamp(2.9rem, 7.2vw, 5.6rem);
    line-height: 1;
    letter-spacing: -.02em;
    color: #2B2B2B;
    margin: 0 0 .9rem;
}
.bv4-word .bv4-word-b { color: #8A5A3B; }
.bv4-word .bv4-year {
    font-family: var(--font-display);
    font-style: italic;
    font-weight: 600;
    font-size: .42em;
    color: #8A5A3B;
    margin-left: .12em;
    vertical-align: baseline;
    position: relative;
    top: -.08em;
}

.bv4-sub {
    font-family: var(--font-ui);
    font-weight: 600;
    font-size: clamp(.95rem, 1.5vw, 1.12rem);
    line-height: 1.55;
    color: #3A3A3A;
    margin: 0 0 1.5rem;
}

/* Theme bar */
.bv4-theme {
    display: inline-flex;
    align-items: center;
    gap: 1rem;
    background: linear-gradient(135deg, #8A5A3B, #6E442B);
    border-radius: 999px;
    padding: .45rem 1.9rem .45rem .45rem;
    margin-bottom: 1.9rem;
    box-shadow: 0 10px 26px rgba(110, 68, 43, .26);
    max-width: 100%;
}
.bv4-theme-icon {
    width: 64px; height: 64px;
    flex: none;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: linear-gradient(140deg, #A9744E, #6E442B);
    color: #F6EFE4;
    font-size: 1.6rem;
    border: 3px solid rgba(246, 239, 228, .5);
}
.bv4-theme-text {
    font-family: var(--font-ui);
    font-weight: 500;
    font-size: clamp(.95rem, 1.6vw, 1.18rem);
    line-height: 1.35;
    color: #F6EFE4;
}
.bv4-theme-text b { display: block; font-weight: 700; }

/* Fact row */
.bv4-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1.25rem;
}
.bv4-fact {
    display: flex;
    align-items: center;
    gap: .8rem;
    padding-right: 1.25rem;
    border-right: 1px solid rgba(110, 68, 43, .28);
}
.bv4-fact:last-child { border-right: 0; padding-right: 0; }
.bv4-fi {
    width: 52px; height: 52px;
    flex: none;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: linear-gradient(140deg, #8A5A3B, #6E442B);
    color: #F6EFE4;
    font-size: 1.25rem;
}
.bv4-ft {
    font-family: var(--font-ui);
    font-size: .95rem;
    line-height: 1.35;
    color: #2B2B2B;
}
.bv4-ft b { display: block; font-weight: 700; }
.bv4-fs { display: block; font-weight: 500; color: #4A4A4A; }

/* Arc-framed photograph */
.bv4-right { position: relative; z-index: 1; }
.bv4-arc {
    background: linear-gradient(150deg, #C89A6B 0%, #8A5A3B 55%, #6E442B 100%);
    border-radius: 240px 20px 20px 240px;
    padding: 16px 0 16px 16px;
    box-shadow: 0 18px 44px rgba(110, 68, 43, .26);
}
.bv4-photo {
    border-radius: 226px 12px 12px 226px;
    overflow: hidden;
    background: var(--oxford);
}
.bv4-photo img {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 10;
    object-fit: cover;
}

/* Bottom feature band */
.bv4-band {
    background: linear-gradient(100deg, #7A4E33 0%, #6E442B 45%, #8A5A3B 100%);
    border-top: 1px solid rgba(246, 239, 228, .18);
}
.bv4-band-inner {
    max-width: 1320px;
    margin: 0 auto;
    padding: 1.15rem var(--bs-gutter-x, 1.5rem);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1.5rem;
}
.bv4-point {
    display: flex;
    align-items: center;
    gap: .8rem;
    flex: 1 1 190px;
    padding-right: 1.5rem;
    border-right: 1px solid rgba(246, 239, 228, .22);
}
.bv4-point:last-of-type { border-right: 0; }
.bv4-pi {
    width: 50px; height: 50px;
    flex: none;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: linear-gradient(140deg, rgba(246, 239, 228, .22), rgba(246, 239, 228, .08));
    border: 1px solid rgba(246, 239, 228, .38);
    color: #F6EFE4;
    font-size: 1.2rem;
}
.bv4-pt {
    font-family: var(--font-ui);
    font-size: .92rem;
    line-height: 1.35;
    color: #F6EFE4;
}
.bv4-pt b { display: block; font-weight: 700; }
.bv4-ps { display: block; font-weight: 400; color: rgba(246, 239, 228, .85); }

.bv4-tracks {
    display: flex;
    align-items: center;
    gap: .85rem;
    flex: 0 0 auto;
    border: 1px solid rgba(246, 239, 228, .45);
    border-radius: var(--r);
    padding: .7rem 1.35rem;
}
.bv4-count { font-family: var(--font-num); font-size: 1.7rem; line-height: 1; }

/* --------------------------------------------------------------------------
   62. Banner variant 04 responsive
   -------------------------------------------------------------------------- */
@media (max-width: 991.98px) {
    .bv4-main { grid-template-columns: minmax(0, 1fr); gap: 2rem; }
    .bv4-main::before, .bv4-main::after { display: none; }
    .bv4-arc { border-radius: 20px; padding: 12px; }
    .bv4-photo { border-radius: 12px; }
    .bv4-photo img { aspect-ratio: 16 / 8; }
    .bv4-point { flex: 1 1 45%; border-right: 0; padding-right: 0; }
    .bv4-tracks { flex: 1 1 100%; justify-content: center; }
}

@media (max-width: 575.98px) {
    .bv4-pill-a, .bv4-pill-b { font-size: .8rem; padding: 0 .8rem; }
    .bv4-theme { border-radius: var(--r-lg); padding: .8rem 1.1rem; gap: .8rem; }
    .bv4-theme-icon { width: 48px; height: 48px; font-size: 1.2rem; }
    .bv4-fact { border-right: 0; padding-right: 0; flex: 1 1 100%; }
    .bv4-fi { width: 44px; height: 44px; font-size: 1.05rem; }
    .bv4-point { flex: 1 1 100%; }
}

/* ==========================================================================
   63. Registration pages — guidelines, payment methods, FAQ
   ========================================================================== */

/* Registration process steps */
.reg-step {
    position: relative;
    background: var(--warm-ivory);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    padding: 1.75rem 1.5rem 1.5rem;
    height: 100%;
    overflow: hidden;
    transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease, background-color .3s ease;
}
.reg-step::before {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    background: var(--bronze);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .35s ease;
}
.reg-step:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-md);
    border-color: transparent;
    background: var(--white);
}
.reg-step:hover::before { transform: scaleX(1); }

.reg-step .rs-no {
    position: absolute;
    top: .7rem; right: 1rem;
    font-family: var(--font-num);
    font-size: 2.2rem;
    font-weight: 700;
    line-height: 1;
    color: var(--bronze);
    opacity: .14;
}
.reg-step .rs-icon {
    width: 48px; height: 48px;
    border-radius: 13px;
    display: grid;
    place-items: center;
    background: var(--bronze-soft);
    color: var(--bronze);
    font-size: 1.25rem;
    margin-bottom: 1rem;
    transition: background-color .3s ease, color .3s ease;
}
.reg-step:hover .rs-icon { background: var(--bronze); color: #fff; }
.reg-step h3 { font-family: var(--font-ui); font-size: 1.02rem; color: var(--oxford); margin: 0 0 .4rem; }
.reg-step p { font-size: .92rem; color: var(--text-2); margin: 0; }

/* Deliverables */
.deliverables {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1rem;
}
.deliverable {
    display: flex;
    align-items: center;
    gap: .95rem;
    background: var(--white);
    border: 1px solid var(--line);
    border-left: 3px solid var(--bronze);
    border-radius: var(--r);
    padding: 1.1rem 1.35rem;
    transition: transform .3s ease, box-shadow .3s ease;
}
.deliverable:hover { transform: translateX(5px); box-shadow: var(--shadow); }
.deliverable .dl-icon {
    width: 42px; height: 42px;
    flex: none;
    border-radius: 11px;
    display: grid;
    place-items: center;
    background: var(--bronze-soft);
    color: var(--bronze);
    font-size: 1.15rem;
}
.deliverable b {
    font-family: var(--font-ui);
    font-size: .95rem;
    font-weight: 600;
    color: var(--oxford);
    line-height: 1.35;
}

/* Refund tiers */
.refund-card {
    background: var(--warm-ivory);
    border: 1px solid var(--line);
    border-radius: var(--r-xl);
    padding: 2rem 1.6rem;
    height: 100%;
    text-align: center;
    transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}
.refund-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-md); border-color: var(--bronze); }
.refund-card .rc-amount {
    display: block;
    font-family: var(--font-num);
    font-size: 3rem;
    font-weight: 700;
    line-height: 1;
    color: var(--bronze);
}
.refund-card .rc-label {
    display: block;
    font-family: var(--font-ui);
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--text-small);
    margin: .45rem 0 1rem;
}
.refund-card p {
    font-size: .93rem;
    color: var(--text-2);
    margin: 0;
    padding-top: 1rem;
    border-top: 1px solid var(--line);
}
.refund-card.is-none .rc-amount { color: var(--error); font-size: 2.4rem; }

/* Payment method cards */
.pay-card {
    position: relative;
    background: var(--warm-ivory);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    padding: 2rem 1.5rem 1.6rem;
    height: 100%;
    text-align: center;
    overflow: hidden;
    transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease, background-color .3s ease;
}
.pay-card:hover {
    transform: translateY(-6px);
    box-shadow: var(--shadow-md);
    border-color: var(--bronze);
    background: var(--white);
}
.pay-card .pay-no {
    position: absolute;
    top: .6rem; left: 1rem;
    font-family: var(--font-num);
    font-size: 2rem;
    font-weight: 700;
    line-height: 1;
    color: var(--bronze);
    opacity: .14;
}
.pay-card .pay-icon {
    width: 62px; height: 62px;
    margin: 0 auto 1.1rem;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: var(--bronze-soft);
    color: var(--bronze);
    font-size: 1.6rem;
    transition: background-color .3s ease, color .3s ease;
}
.pay-card:hover .pay-icon { background: var(--bronze); color: #fff; }
.pay-card h3 { font-family: var(--font-ui); font-size: 1.08rem; color: var(--oxford); margin: 0 0 .35rem; }
.pay-card p { font-size: .9rem; color: var(--text-2); margin: 0; }

/* Coordinator callout */
.pay-callout {
    display: flex;
    gap: 1.15rem;
    align-items: flex-start;
    background: var(--oxford);
    border-radius: var(--r-xl);
    padding: 1.6rem 1.75rem;
    box-shadow: var(--shadow-md);
}
.pay-callout .pc-icon {
    width: 48px; height: 48px;
    flex: none;
    border-radius: 13px;
    display: grid;
    place-items: center;
    background: rgba(154, 105, 78, .25);
    color: var(--bronze);
    font-size: 1.25rem;
}
.pay-callout h3 {
    font-family: var(--font-ui);
    font-size: 1.05rem;
    color: var(--ivory);
    margin: .1rem 0 .35rem;
}
.pay-callout p { font-size: .95rem; color: var(--hero-sub); margin: 0; }
.pay-callout a { color: var(--bronze); }
.pay-callout a:hover { color: var(--ivory); }

/* Bank details */
.bank-card {
    background: var(--white);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    padding: .35rem 1.6rem;
    box-shadow: var(--shadow-sm);
}
.bank-list { margin: 0; }
.bank-row {
    display: grid;
    grid-template-columns: 190px minmax(0, 1fr);
    gap: 1.25rem;
    padding: 1rem 0;
    border-bottom: 1px solid var(--line);
}
.bank-row:last-child { border-bottom: 0; }
.bank-row dt {
    font-family: var(--font-ui);
    font-size: .74rem;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--text-small);
    align-self: center;
}
.bank-row dd {
    margin: 0;
    font-family: var(--font-num);
    font-size: 1rem;
    font-weight: 600;
    color: var(--oxford);
    word-break: break-word;
}

.pay-charges {
    font-size: .85rem;
    color: var(--text-small);
    margin: 1rem 0 0;
    padding-top: .9rem;
    border-top: 1px solid var(--line);
}
.pay-charges i { color: var(--warning); }

/* --------------------------------------------------------------------------
   64. Registration pages responsive
   -------------------------------------------------------------------------- */
@media (max-width: 991.98px) {
    .deliverables { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 575.98px) {
    .deliverables { grid-template-columns: minmax(0, 1fr); }
    .bank-row { grid-template-columns: minmax(0, 1fr); gap: .25rem; padding: .85rem 0; }
    .pay-callout { flex-direction: column; gap: .9rem; padding: 1.35rem; }
    .refund-card { padding: 1.6rem 1.35rem; }
}

/* ==========================================================================
   65. Publication ethics & FAQ pages
   ========================================================================== */

/* Similarity threshold figures */
.threshold-card {
    position: relative;
    background: var(--warm-ivory);
    border: 1px solid var(--line);
    border-radius: var(--r-xl);
    padding: 2.25rem 1.75rem;
    height: 100%;
    text-align: center;
    transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}
.threshold-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-md); }
.threshold-card .th-figure {
    display: block;
    font-family: var(--font-num);
    font-size: clamp(3rem, 6vw, 4.2rem);
    font-weight: 700;
    line-height: 1;
}
.threshold-card h3 {
    font-family: var(--font-ui);
    font-size: 1.05rem;
    color: var(--oxford);
    margin: .75rem 0 .6rem;
}
.threshold-card p {
    font-size: .92rem;
    color: var(--text-2);
    margin: 0;
    padding-top: .9rem;
    border-top: 1px solid var(--line);
}
.threshold-card.is-limit  { border-top: 3px solid var(--error); }
.threshold-card.is-limit .th-figure  { color: var(--error); }
.threshold-card.is-limit:hover { border-color: var(--error); }
.threshold-card.is-target { border-top: 3px solid var(--success); }
.threshold-card.is-target .th-figure { color: var(--success); }
.threshold-card.is-target:hover { border-color: var(--success); }

/* Numbered policy lists */
.policy-list { list-style: none; margin: 0; padding: 0; }
.policy-list li {
    display: grid;
    grid-template-columns: 46px minmax(0, 1fr);
    gap: 1.1rem;
    align-items: start;
    background: var(--white);
    border: 1px solid var(--line);
    border-left: 3px solid var(--bronze);
    border-radius: var(--r);
    padding: 1.1rem 1.35rem;
    margin-bottom: .7rem;
    transition: transform .3s ease, box-shadow .3s ease;
}
.policy-list li:last-child { margin-bottom: 0; }
.policy-list li:hover { transform: translateX(5px); box-shadow: var(--shadow); }
.section--ivory .policy-list li { background: var(--white); }

.policy-list .pl-no {
    font-family: var(--font-num);
    font-size: .82rem;
    font-weight: 700;
    color: var(--bronze);
    background: var(--bronze-soft);
    border-radius: 8px;
    padding: .3rem .55rem;
    text-align: center;
}
.policy-list .pl-text {
    font-size: .95rem;
    line-height: 1.7;
    color: var(--text-body);
}
.policy-list .pl-text b { color: var(--oxford); }

/* "Need more help" contact cards */
.help-row { display: grid; gap: .75rem; }
.help-card {
    display: flex;
    align-items: center;
    gap: .9rem;
    background: rgba(255, 255, 255, .07);
    border: 1px solid rgba(238, 235, 221, .18);
    border-radius: var(--r-lg);
    padding: 1rem 1.25rem;
    color: inherit;
    transition: background-color .3s ease, border-color .3s ease, transform .3s ease;
}
.help-card:hover {
    background: rgba(154, 105, 78, .18);
    border-color: var(--bronze);
    transform: translateX(4px);
    color: inherit;
}
.help-card .hc-icon {
    width: 44px; height: 44px;
    flex: none;
    border-radius: 12px;
    display: grid;
    place-items: center;
    background: rgba(154, 105, 78, .25);
    color: var(--bronze);
    font-size: 1.15rem;
}
.help-card .hc-text b {
    display: block;
    font-family: var(--font-ui);
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--bronze);
}
.help-card .hc-text > span {
    display: block;
    font-family: var(--font-ui);
    font-size: .95rem;
    color: var(--ivory);
    word-break: break-word;
}

@media (max-width: 575.98px) {
    .policy-list li { grid-template-columns: minmax(0, 1fr); gap: .5rem; }
    .policy-list .pl-no { justify-self: start; }
    .threshold-card { padding: 1.85rem 1.35rem; }
}

/* ==========================================================================
   66. Tentative programme
   ========================================================================== */

/* Day switcher */
.day-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: .75rem;
    justify-content: center;
    margin-bottom: 2.5rem;
}
.day-tab {
    background: var(--white);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    padding: .85rem 1.75rem;
    text-align: center;
    cursor: pointer;
    transition: background-color .3s ease, border-color .3s ease, transform .3s ease;
}
.day-tab:hover { border-color: var(--bronze); transform: translateY(-2px); }
.day-tab.active { background: var(--oxford); border-color: var(--oxford); }
.day-tab .dt-day {
    display: block;
    font-family: var(--font-ui);
    font-size: 1.02rem;
    font-weight: 700;
    color: var(--oxford);
}
.day-tab .dt-date {
    display: block;
    font-family: var(--font-num);
    font-size: .78rem;
    color: var(--text-small);
    margin-top: .15rem;
}
.day-tab.active .dt-day  { color: var(--ivory); }
.day-tab.active .dt-date { color: var(--bronze); }
.day-tab:focus-visible { outline: 2px solid var(--bronze); outline-offset: 3px; }

/* Programme rows */
.agenda-list { list-style: none; margin: 0; padding: 0; }
.agenda-row {
    display: grid;
    grid-template-columns: 210px minmax(0, 1fr);
    gap: 1.75rem;
    padding: 1.35rem 0;
    border-top: 1px solid var(--line);
}
.agenda-row:last-child { border-bottom: 1px solid var(--line); }

.ag-time {
    display: flex;
    align-items: flex-start;
    gap: .5rem;
    font-family: var(--font-num);
    font-size: .88rem;
    font-weight: 700;
    color: var(--bronze);
    line-height: 1.5;
    padding-top: .15rem;
}
.ag-time i { font-size: .95rem; opacity: .8; margin-top: .05rem; }

.ag-head {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .75rem;
    margin-bottom: .5rem;
}
.ag-icon {
    width: 38px; height: 38px;
    flex: none;
    border-radius: 10px;
    display: grid;
    place-items: center;
    background: var(--bronze-soft);
    color: var(--bronze);
    font-size: 1.05rem;
}
.ag-head h3 {
    font-family: var(--font-ui);
    font-size: 1.05rem;
    color: var(--oxford);
    margin: 0;
}
.ag-text { font-size: .94rem; line-height: 1.75; color: var(--text-2); margin: 0; }

.ag-panel-title {
    font-family: var(--font-display);
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--bronze);
    margin: 0 0 .5rem;
}

/* Open slots */
.agenda-row.is-slot .ag-body {
    border: 1px dashed rgba(154, 105, 78, .55);
    border-radius: var(--r);
    padding: 1rem 1.25rem;
    background: rgba(154, 105, 78, .05);
}
.ag-badge {
    font-family: var(--font-ui);
    font-size: .66rem;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--bronze);
    border: 1px solid var(--bronze);
    border-radius: 999px;
    padding: .18rem .7rem;
}
.ag-slot-note { font-size: .88rem; color: var(--text-small); margin: 0; }

/* Breaks */
.agenda-row.is-break .ag-body {
    background: var(--warm-ivory);
    border-radius: var(--r);
    padding: 1rem 1.25rem;
}
.agenda-row.is-break .ag-icon { background: var(--white); }

/* Panel row */
.agenda-row.is-panel .ag-body {
    border-left: 3px solid var(--bronze);
    background: var(--warm-ivory);
    border-radius: var(--r);
    padding: 1.15rem 1.35rem;
}

/* Speaker card inside the inaugural row */
.ag-speaker {
    display: grid;
    grid-template-columns: 76px minmax(0, 1fr);
    gap: 1.25rem;
    background: var(--oxford);
    border-radius: var(--r-lg);
    padding: 1.5rem;
    margin-top: 1.1rem;
    box-shadow: var(--shadow);
}
.ags-avatar {
    width: 76px; height: 76px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: linear-gradient(145deg, var(--bronze), #b9835f);
    color: #fff;
    font-family: var(--font-display);
    font-size: 1.6rem;
    font-weight: 700;
}
.ags-role {
    display: block;
    font-family: var(--font-ui);
    font-size: .66rem;
    font-weight: 700;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--bronze);
    margin-bottom: .3rem;
}
.ags-body h4 {
    font-family: var(--font-display);
    font-size: 1.35rem;
    color: var(--ivory);
    margin: 0 0 .2rem;
}
.ags-title { font-family: var(--font-ui); font-size: .9rem; color: var(--hero-sub); margin: 0 0 .75rem; }
.ags-doing {
    font-size: .92rem;
    color: var(--ivory);
    margin: 0 0 .75rem;
    padding-left: .9rem;
    border-left: 2px solid var(--bronze);
}
.ags-bio {
    font-size: .88rem;
    line-height: 1.75;
    color: var(--hero-sub);
    margin: 0;
    padding-top: .85rem;
    border-top: 1px solid rgba(238, 235, 221, .16);
}

/* --------------------------------------------------------------------------
   67. Programme responsive
   -------------------------------------------------------------------------- */
@media (max-width: 767.98px) {
    .agenda-row { grid-template-columns: minmax(0, 1fr); gap: .75rem; }
    .ag-time { padding-top: 0; }
    .ag-speaker { grid-template-columns: minmax(0, 1fr); gap: 1rem; }
    .ags-avatar { width: 62px; height: 62px; font-size: 1.35rem; }
    .day-tab { flex: 1 1 100%; }
}

/* ==========================================================================
   68. Venue page
   ========================================================================== */

/* Address block */
.venue-address {
    display: flex;
    gap: 1rem;
    align-items: flex-start;
    background: var(--warm-ivory);
    border: 1px solid var(--line);
    border-left: 3px solid var(--bronze);
    border-radius: var(--r);
    padding: 1.15rem 1.35rem;
    margin-bottom: 1.5rem;
}
.venue-address .va-icon {
    width: 42px; height: 42px;
    flex: none;
    border-radius: 11px;
    display: grid;
    place-items: center;
    background: var(--bronze-soft);
    color: var(--bronze);
    font-size: 1.15rem;
}
.venue-address p { font-size: .96rem; line-height: 1.7; color: var(--text-body); margin: 0; }

.venue-facts {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1px;
    background: var(--line);
    border: 1px solid var(--line);
    border-radius: var(--r);
    overflow: hidden;
}
.venue-facts > div { background: var(--white); padding: .9rem 1rem; }
.venue-facts span {
    display: block;
    font-family: var(--font-ui);
    font-size: .64rem;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--bronze);
    margin-bottom: .2rem;
}
.venue-facts b { font-family: var(--font-ui); font-size: .88rem; color: var(--oxford); }

/* Click-to-load map */
.venue-map {
    position: relative;
    border-radius: var(--r-xl);
    overflow: hidden;
    box-shadow: var(--shadow-md);
    background: var(--oxford);
    aspect-ratio: 4 / 3;
}
.venue-map img,
.venue-map iframe {
    display: block;
    width: 100%;
    height: 100%;
    border: 0;
    object-fit: cover;
}
.venue-map-load {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .9rem;
    background: rgba(38, 48, 59, .55);
    border: 0;
    color: var(--ivory);
    cursor: pointer;
    transition: background-color .3s ease;
}
.venue-map-load:hover { background: rgba(38, 48, 59, .7); }
.venue-map-load .vm-icon {
    width: 52px; height: 52px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: var(--bronze);
    color: #fff;
    font-size: 1.35rem;
    flex: none;
}
.venue-map-load .vm-text {
    text-align: left;
    font-family: var(--font-ui);
    font-size: .82rem;
    color: var(--hero-sub);
}
.venue-map-load .vm-text b { display: block; font-size: 1rem; color: var(--ivory); }

/* Hotel gallery */
.venue-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1rem;
}
.vg-shot,
.pm-shot {
    position: relative;
    padding: 0;
    border: 0;
    border-radius: var(--r);
    overflow: hidden;
    background: var(--oxford);
    cursor: zoom-in;
    transition: transform .35s ease, box-shadow .35s ease;
}
.vg-shot img { display: block; width: 100%; aspect-ratio: 3 / 2; object-fit: cover; transition: transform .6s ease; }
.vg-shot:hover, .pm-shot:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.vg-shot:hover img { transform: scale(1.06); }
.vg-shot:focus-visible, .pm-shot:focus-visible { outline: 2px solid var(--bronze); outline-offset: 3px; }

.vg-zoom {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    background: rgba(38, 48, 59, .45);
    color: var(--ivory);
    font-size: 1.15rem;
    opacity: 0;
    transition: opacity .3s ease;
}
.vg-shot:hover .vg-zoom, .vg-shot:focus-visible .vg-zoom,
.pm-shot:hover .vg-zoom, .pm-shot:focus-visible .vg-zoom { opacity: 1; }

/* Places — alternating rows */
.place-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 2.75rem;
    align-items: center;
    padding: 2.25rem 0;
    border-top: 1px solid var(--line);
}
.place-row:first-of-type { border-top: 0; padding-top: 0; }
.place-row.is-flipped .place-media { order: 2; }

.place-media {
    display: grid;
    grid-template-columns: 1.35fr 1fr;
    gap: .85rem;
    height: 300px;
}
.place-media .pm-shot img {
    display: block;
    width: 100%; height: 100%;
    object-fit: cover;
    transition: transform .6s ease;
}
.place-media .pm-shot:hover img { transform: scale(1.06); }

.place-body { position: relative; }
.place-no {
    font-family: var(--font-num);
    font-size: .8rem;
    font-weight: 700;
    letter-spacing: .12em;
    color: var(--bronze);
    background: var(--bronze-soft);
    border-radius: 7px;
    padding: .25rem .6rem;
}
.place-body h3 {
    font-family: var(--font-display);
    font-size: clamp(1.5rem, 2.8vw, 2rem);
    color: var(--oxford);
    margin: .85rem 0 .2rem;
}
.place-sub {
    font-family: var(--font-ui);
    font-size: .85rem;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--bronze);
    margin: 0 0 .9rem;
}
.place-text { font-size: .97rem; line-height: 1.8; color: var(--text-2); margin: 0; }

/* --------------------------------------------------------------------------
   69. Venue page responsive
   -------------------------------------------------------------------------- */
@media (max-width: 991.98px) {
    .venue-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .place-row { grid-template-columns: minmax(0, 1fr); gap: 1.5rem; }
    .place-row.is-flipped .place-media { order: 0; }
    .place-media { height: 240px; }
}

@media (max-width: 575.98px) {
    .venue-grid { grid-template-columns: minmax(0, 1fr); }
    .venue-facts { grid-template-columns: minmax(0, 1fr); }
    .place-media { grid-template-columns: minmax(0, 1fr); height: auto; }
    .place-media .pm-shot img { aspect-ratio: 3 / 2; }
    .venue-map { aspect-ratio: 4 / 3.4; }
}

/* ==========================================================================
   70. Committee page
   ========================================================================== */

/* "Will be updated soon" placeholder */
.soon-card {
    background: var(--warm-ivory);
    border: 1px dashed rgba(154, 105, 78, .5);
    border-radius: var(--r-xl);
    padding: 2.75rem 2rem;
    text-align: center;
}
.soon-card .soon-icon {
    width: 64px; height: 64px;
    margin: 0 auto 1.25rem;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: var(--bronze-soft);
    color: var(--bronze);
    font-size: 1.7rem;
}
.soon-card h3 {
    font-family: var(--font-display);
    font-size: clamp(1.35rem, 2.6vw, 1.8rem);
    color: var(--oxford);
    margin: 0 0 .6rem;
}
.soon-card p {
    font-size: .96rem;
    color: var(--text-2);
    max-width: 54ch;
    margin: 0 auto;
}

/* Eligibility criteria */
.elig-grid { display: grid; gap: .75rem; }
.elig-item {
    display: flex;
    align-items: center;
    gap: 1rem;
    background: var(--white);
    border: 1px solid var(--line);
    border-left: 3px solid var(--bronze);
    border-radius: var(--r);
    padding: 1rem 1.25rem;
    transition: transform .3s ease, box-shadow .3s ease;
}
.elig-item:hover { transform: translateX(5px); box-shadow: var(--shadow); }
.elig-item .el-icon {
    width: 42px; height: 42px;
    flex: none;
    border-radius: 11px;
    display: grid;
    place-items: center;
    background: var(--bronze-soft);
    color: var(--bronze);
    font-size: 1.1rem;
}
.elig-item p { font-size: .95rem; color: var(--text-body); margin: 0; }
.elig-item p b { color: var(--oxford); }

/* Roles and responsibilities */
.role-card {
    background: var(--warm-ivory);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    padding: 1.75rem 1.5rem;
    height: 100%;
    transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease, background-color .3s ease;
}
.role-card:hover {
    transform: translateY(-6px);
    box-shadow: var(--shadow-md);
    border-color: var(--bronze);
    background: var(--white);
}
.role-card .rc-icon {
    width: 50px; height: 50px;
    border-radius: 13px;
    display: grid;
    place-items: center;
    background: var(--bronze-soft);
    color: var(--bronze);
    font-size: 1.3rem;
    margin-bottom: 1.1rem;
    transition: background-color .3s ease, color .3s ease;
}
.role-card:hover .rc-icon { background: var(--bronze); color: #fff; }
.role-card h3 {
    font-family: var(--font-ui);
    font-size: 1.05rem;
    color: var(--oxford);
    margin: 0 0 .4rem;
}
.role-card p { font-size: .93rem; color: var(--text-2); margin: 0; }

@media (max-width: 575.98px) {
    .soon-card { padding: 2rem 1.35rem; }
    .elig-item { flex-direction: column; align-items: flex-start; gap: .75rem; }
}

/* ==========================================================================
   71. About page
   ========================================================================== */

/* Theme essay on the dark band */
.theme-essay {
    font-size: 1.02rem;
    line-height: 1.9;
    color: var(--hero-sub);
    max-width: 92ch;
    margin: 1.75rem auto 0;
    columns: 2;
    column-gap: 3.5rem;
    text-align: justify;
    hyphens: auto;
}

/* Objectives — numbered title + description */
.objective-card .obj-title {
    font-family: var(--font-ui);
    font-size: 1.02rem;
    font-weight: 700;
    color: var(--oxford);
    margin: 0 0 .35rem;
}
.objective-card:hover .obj-title { color: var(--bronze); }
.section--warm .objective-card { background: var(--white); }

/* Key reasons checklist */
.reasons-card {
    background: var(--warm-ivory);
    border: 1px solid var(--line);
    border-left: 3px solid var(--bronze);
    border-radius: var(--r-xl);
    padding: 2rem;
}
.reasons-card h3 {
    font-family: var(--font-display);
    font-size: clamp(1.35rem, 2.4vw, 1.7rem);
    color: var(--oxford);
    margin: 0;
}

/* The dark theme band needs the centred rule and a lighter divider */
.section--night .rule-bronze { margin-inline: auto; }

@media (max-width: 991.98px) {
    .theme-essay { columns: 1; text-align: left; }
}

@media (max-width: 575.98px) {
    .reasons-card { padding: 1.5rem; }
}

/* ==========================================================================
   72. Other services by IFERP
   ========================================================================== */
.service-card {
    position: relative;
    display: flex;
    flex-direction: column;
    height: 100%;
    background: var(--warm-ivory);
    border: 1px solid var(--line);
    border-radius: var(--r-xl);
    padding: 2rem 1.85rem 1.6rem;
    overflow: hidden;
    color: inherit;
    transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease, background-color .3s ease;
}
.service-card::before {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    background: var(--bronze);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .35s ease;
}
.service-card:hover {
    transform: translateY(-6px);
    box-shadow: var(--shadow-md);
    border-color: transparent;
    background: var(--white);
    color: inherit;
}
.service-card:hover::before { transform: scaleX(1); }
.service-card:focus-visible { outline: 2px solid var(--bronze); outline-offset: 3px; }

.service-card .sv-no {
    position: absolute;
    top: .8rem; right: 1.25rem;
    font-family: var(--font-num);
    font-size: 2.6rem;
    font-weight: 700;
    line-height: 1;
    color: var(--bronze);
    opacity: .12;
}
.service-card .sv-icon {
    width: 58px; height: 58px;
    border-radius: 15px;
    display: grid;
    place-items: center;
    background: var(--bronze-soft);
    color: var(--bronze);
    font-size: 1.5rem;
    margin-bottom: 1.2rem;
    transition: background-color .3s ease, color .3s ease;
}
.service-card:hover .sv-icon { background: var(--bronze); color: #fff; }

.service-card h3 {
    font-family: var(--font-display);
    font-size: clamp(1.3rem, 2.2vw, 1.6rem);
    color: var(--oxford);
    margin: 0 0 .5rem;
}
.service-card p {
    font-size: .95rem;
    line-height: 1.75;
    color: var(--text-2);
    margin: 0 0 1.35rem;
}
.service-card .sv-cta {
    margin-top: auto;
    font-family: var(--font-ui);
    font-size: .88rem;
    font-weight: 700;
    color: var(--bronze);
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    padding-top: 1rem;
    border-top: 1px solid var(--line);
}
.service-card .sv-cta i { transition: transform .25s ease; }
.service-card:hover .sv-cta i { transform: translateX(5px); }

@media (max-width: 575.98px) {
    .service-card { padding: 1.6rem 1.35rem 1.35rem; }
    .service-card .sv-no { font-size: 2.1rem; }
}

/* ==========================================================================
   73. Mega-menu dropdowns
   Every rule is class-scoped: .mega-item nests spans inside spans, so a bare
   descendant selector would hit the wrong element (see buglog bug-002).
   ========================================================================== */
.site-nav .mega {
    width: min(680px, calc(100vw - 2rem));
    padding: 1.15rem;
    background: linear-gradient(180deg, var(--white) 0%, var(--warm-ivory) 100%);
    border: 1px solid var(--line);
    border-top: 3px solid var(--bronze);
    border-radius: var(--r-lg);
    box-shadow: 0 24px 60px rgba(38, 48, 59, .22);
    margin-top: -0.1rem;
}
.site-nav .mega--narrow { width: min(380px, calc(100vw - 2rem)); }

/* The panel is centred on the bar, not hung off its trigger: at 680px wide,
   aligning it to an item near either end pushed it past the viewport edge.
   Making .mega-drop static hands the absolute panel to .site-nav .container,
   so 'centre' means the centre of the bar itself. */
@media (min-width: 992px) {
    .site-nav > .container { position: relative; }
    .site-nav .nav-item.mega-drop { position: static; }
    .site-nav .mega {
        top: 100%;
        left: 50%;
        right: auto;
        transform: translateX(-50%);
    }
}

/* Panel header */
.mega-head {
    display: flex;
    align-items: baseline;
    gap: .7rem;
    padding: 0 .35rem .5rem;
}
.mega-title {
    font-family: var(--font-ui);
    font-size: .74rem;
    font-weight: 700;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--bronze);
}
.mega-count {
    font-family: var(--font-num);
    font-size: .7rem;
    font-weight: 700;
    color: var(--text-small);
    background: var(--warm-ivory);
    border: 1px solid var(--line);
    border-radius: 999px;
    padding: .1rem .5rem;
}
.mega-lead {
    font-size: .84rem;
    color: var(--text-small);
    margin: 0 .35rem .85rem;
    padding-bottom: .85rem;
    border-bottom: 1px solid var(--line);
}

.mega-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .5rem;
    align-items: start;
}
.mega--narrow .mega-grid { grid-template-columns: minmax(0, 1fr); }

/* Cards */
.site-nav .mega-item {
    display: grid;
    grid-template-columns: 38px minmax(0, 1fr) 14px;
    gap: .75rem;
    align-items: center;
    padding: .7rem .8rem;
    border: 1px solid var(--line);
    border-radius: var(--r-sm);
    background: linear-gradient(135deg, var(--warm-ivory) 0%, var(--white) 100%);
    transition: background .25s ease, border-color .25s ease, transform .25s ease, box-shadow .25s ease;
}
.site-nav .mega-item:hover,
.site-nav .mega-item:focus-visible {
    background: linear-gradient(135deg, rgba(154, 105, 78, .13) 0%, var(--white) 70%);
    border-color: var(--bronze);
    transform: translateX(2px);
    box-shadow: 0 6px 18px rgba(38, 48, 59, .08);
}
.site-nav .mega-item.is-current {
    background: linear-gradient(135deg, rgba(154, 105, 78, .2) 0%, rgba(154, 105, 78, .06) 100%);
    border-color: var(--bronze);
}

.mega-item .mi-icon {
    width: 38px; height: 38px;
    border-radius: 10px;
    display: grid;
    place-items: center;
    background: linear-gradient(145deg, rgba(234, 152, 107, .22) 0%, rgba(154, 105, 78, .07) 100%);
    border: 1px solid rgba(154, 105, 78, .3);
    color: var(--bronze);
    font-size: 1rem;
    transition: background .25s ease, color .25s ease, border-color .25s ease;
}
.site-nav .mega-item:hover .mi-icon,
.mega-item.is-current .mi-icon {
    background: linear-gradient(145deg, #B9835F 0%, #B44D0D 55%, #B44D0D 100%);
    border-color: transparent;
    color: #fff;
}

.mega-item .mi-text b {
    display: block;
    font-family: var(--font-ui);
    font-size: .88rem;
    font-weight: 700;
    line-height: 1.3;
    color: var(--oxford);
}
.mega-item .mi-text > span {
    display: block;
    font-size: .76rem;
    line-height: 1.4;
    color: var(--text-small);
    margin-top: .1rem;
}
.mega-item .mi-chev { color: var(--bronze); font-size: .75rem; opacity: 0; transition: opacity .25s ease; }
.site-nav .mega-item:hover .mi-chev { opacity: 1; }

/* Third level — a flyout that opens under its card on hover or keyboard focus */
.mega-cell.has-subs { position: relative; }

.mega-subs {
    list-style: none;
    position: absolute;
    top: calc(100% - 4px);
    left: 0;
    right: 0;
    z-index: 5;
    margin: 0;
    padding: .75rem .4rem .4rem;      /* top padding bridges the gap to the card */
    opacity: 0;
    visibility: hidden;
    transform: translateY(-6px);
    transition: opacity .22s ease, transform .22s ease, visibility .22s;
}
.mega-subs::before {
    content: "";
    position: absolute;
    inset: .55rem 0 0;
    background: var(--white);
    border: 1px solid rgba(154, 105, 78, .3);
    border-radius: var(--r-sm);
    box-shadow: 0 12px 28px rgba(38, 48, 59, .16);
    z-index: -1;
}
.mega-cell.has-subs:hover .mega-subs,
.mega-cell.has-subs:focus-within .mega-subs {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.mega-subs li { margin: 0; }
.site-nav .mega-subs a {
    display: block;
    font-family: var(--font-ui);
    font-size: .8rem;
    font-weight: 500;
    color: var(--text-2);
    padding: .38rem .7rem;
    border-radius: 6px;
    transition: background-color .2s ease, color .2s ease, padding-left .2s ease;
}
.site-nav .mega-subs a:hover,
.site-nav .mega-subs a:focus-visible { background: var(--warm-ivory); color: var(--bronze); padding-left: .95rem; }

/* The down arrow stays visible and flips while the flyout is open. */
.mega-cell.has-subs .mi-chev { opacity: .6; transition: opacity .25s ease, transform .25s ease; }
.mega-cell.has-subs:hover .mi-chev,
.mega-cell.has-subs:focus-within .mi-chev { opacity: 1; transform: rotate(180deg); }

/* --------------------------------------------------------------------------
   74. Mega-menu on the collapsed mobile navigation
   -------------------------------------------------------------------------- */
@media (max-width: 991.98px) {
    .site-nav .mega,
    .site-nav .mega--narrow {
        width: auto;
        background: transparent;
        border: 0;
        border-left: 2px solid var(--bronze);
        border-radius: 0;
        box-shadow: none;
        margin: .25rem 0 .5rem .85rem;
        padding: .25rem 0 .25rem .5rem;
    }
    .mega-head, .mega-lead { display: none; }
    .mega-grid { grid-template-columns: minmax(0, 1fr); gap: .25rem; }

    .site-nav .mega-item {
        background: transparent;
        grid-template-columns: 30px minmax(0, 1fr);
        padding: .5rem .4rem;
    }
    .site-nav .mega-item:hover,
    .site-nav .mega-item:focus-visible { background: rgba(255, 255, 255, .06); transform: none; }
    .site-nav .mega-item.is-current { background: rgba(154, 105, 78, .22); border-color: transparent; }

    .mega-item .mi-icon {
        width: 30px; height: 30px;
        background: rgba(255, 255, 255, .06);
        border-color: rgba(238, 235, 221, .18);
        font-size: .85rem;
    }
    .mega-item .mi-text b { color: var(--ivory); font-size: .86rem; }
    .mega-item .mi-text > span { display: none; }
    .mega-item .mi-chev { display: none; }

    /* No hover on touch: the sub-list stays open, inline under its card. */
    .mega-subs {
        position: static;
        opacity: 1;
        visibility: visible;
        transform: none;
        margin: .1rem 0 .35rem .9rem;
        padding: .1rem 0 .1rem .9rem;
        border-left: 2px solid rgba(154, 105, 78, .5);
    }
    .mega-subs::before { display: none; }
    .site-nav .mega-subs a { color: var(--hero-sub); font-size: .8rem; padding: .3rem .5rem; }
    .site-nav .mega-subs a:hover,
    .site-nav .mega-subs a:focus-visible {
        background: rgba(255, 255, 255, .06);
        color: var(--bronze);
        padding-left: .5rem;
    }
}

/* --------------------------------------------------------------------------
   75. Mega menu — the header card
   The panel title, item count and lead sit in one card carrying the bronze
   accent gradient. It is the single strong element in the panel, so the cards
   below stay uniform.
   -------------------------------------------------------------------------- */
.mega-headcard {
    background: linear-gradient(100deg,
        rgba(233, 116, 52, .22) 0%,
        rgba(154, 105, 78, .09) 45%,
        var(--white) 100%);
    border: 1px solid rgba(154, 105, 78, .38);
    border-radius: var(--r-sm);
    padding: .8rem 1rem .85rem;
    margin-bottom: .75rem;
}
.mega-headcard .mega-head { padding: 0 0 .35rem; }
.mega-headcard .mega-lead {
    margin: 0;
    padding: 0;
    border-bottom: 0;
    color: var(--text-2);
}
.mega-headcard .mega-count {
    background: rgba(255, 255, 255, .75);
    border-color: rgba(154, 105, 78, .3);
    color: var(--bronze);
}

@media (max-width: 991.98px) {
    /* The collapsed navbar is dark; the panel header is redundant there. */
    .mega-headcard { display: none; }
}

/* --------------------------------------------------------------------------
   76. Mega menu — hover bridge
   The panel sits .6rem below the nav link. Without this the pointer crosses
   dead space on the way down and the panel closes. The pseudo-element makes
   that gap part of the panel, so the hover is continuous.
   -------------------------------------------------------------------------- */
@media (min-width: 992px) {
    .site-nav .mega::before {
        content: "";
        position: absolute;
        top: -.7rem;
        left: 0;
        right: 0;
        height: .7rem;
    }
    /* The whole tab is the hover target, gap included. */
    .site-nav .mega-drop { position: relative; }
}

/* --------------------------------------------------------------------------
   77. Pre-composed banner artwork
   breadcrumb-image.png already carries its own dark-to-image gradient, so the
   standard scrim would darken it twice. This variant only deepens the left
   edge enough to hold the ivory text, and lets the artwork through elsewhere.
   -------------------------------------------------------------------------- */
.page-hero--art {
    background-position: center right;
}
.page-hero--art::before {
    background: linear-gradient(100deg, rgb(154 105 78 / 43%) 0%, rgba(38, 48, 59, .46) 32%, rgba(38, 48, 59, .14) 62%, rgba(38, 48, 59, .04) 100%);
}
/* Keep the headline legible against the artwork's own lighter passages. */
.page-hero--art .page-hero-title,
.page-hero--art .page-hero-sub { text-shadow: 0 2px 14px rgba(20, 26, 33, .55); }

@media (max-width: 767.98px) {
    /* Stacked text spans the full width, so darken top-to-bottom instead. */
    .page-hero--art { background-position: center; }
    .page-hero--art::before {
        background: linear-gradient(180deg,
            rgba(38, 48, 59, .74) 0%,
            rgba(38, 48, 59, .62) 50%,
            rgba(38, 48, 59, .52) 100%);
    }
}

/* --------------------------------------------------------------------------
   78. Homepage banner artwork
   banner-bg.png is composed for this layout: dark navy on the left for the
   wording, Kuala Lumpur skyline, Saloma Link and the globe network on the
   right. It only needs a light scrim to settle it into the brand palette —
   the standard hero gradient would flatten the whole right-hand side.
   -------------------------------------------------------------------------- */
.hero--art {
    background-position: center right;
}
.hero--art::before {
    background: linear-gradient(100deg,
        rgba(38, 48, 59, .82) 0%,
        rgba(38, 48, 59, .58) 26%,
        rgba(38, 48, 59, .20) 52%,
        rgba(38, 48, 59, .06) 100%);
}
/* The artwork carries its own bronze glow, so soften ours. */
.hero--art::after { opacity: .45; }

.hero--art .display-hero,
.hero--art .hero-title-sub,
.hero--art .hero-theme { text-shadow: 0 2px 16px rgba(18, 24, 30, .5); }

@media (max-width: 991.98px) {
    /* Text spans the full width below the lg breakpoint, so darken evenly. */
    .hero--art { background-position: center; }
    .hero--art::before {
        background: linear-gradient(180deg,
            rgba(38, 48, 59, .86) 0%,
            rgba(38, 48, 59, .74) 55%,
            rgba(38, 48, 59, .68) 100%);
    }
}

/* ==========================================================================
   79. Conference registration page
   ========================================================================== */

/* Premium membership + early bird offer cards */
.offer-card {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    height: 100%;
    border-radius: var(--r-xl);
    padding: 2.15rem 2rem;
    overflow: hidden;
}
.offer-card > * { position: relative; z-index: 1; }

.oc-badge {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    font-family: var(--font-ui);
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    border-radius: 999px;
    padding: .3rem .95rem;
    margin-bottom: 1.15rem;
}
.offer-card h2 {
    font-family: var(--font-display);
    font-size: clamp(1.4rem, 2.5vw, 1.95rem);
    line-height: 1.28;
    margin: 0 0 .8rem;
}
.oc-note {
    display: flex;
    align-items: flex-start;
    gap: .55rem;
    font-size: .93rem;
    line-height: 1.7;
    margin: 0 0 1.6rem;
}
.oc-note i { flex: none; margin-top: .2rem; color: var(--bronze); }
.oc-cta { margin-top: auto; }

/* Dark treatment — the paid upgrade */
.offer-card--premium {
    background: linear-gradient(115deg, var(--oxford) 0%, #33414f 55%, #4a3529 100%);
    box-shadow: var(--shadow-md);
}
.offer-card--premium::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: radial-gradient(circle at 88% 18%, rgba(154, 105, 78, .4) 0, transparent 48%);
}
.offer-card--premium .oc-badge { background: var(--bronze); color: #fff; }
.offer-card--premium h2 { color: var(--ivory); }
.offer-card--premium .oc-note { color: var(--hero-sub); }

/* Light treatment — the deadline reminder */
.offer-card--early {
    background: var(--warm-ivory);
    border: 1px solid var(--line);
    border-left: 3px solid var(--bronze);
}
.offer-card--early .oc-badge {
    background: var(--bronze-soft);
    color: var(--bronze);
    border: 1px solid rgba(154, 105, 78, .3);
}
.offer-card--early h2 { color: var(--oxford); }
.offer-card--early .oc-note { color: var(--text-2); }
/* At a glance */
.glance-card {
    background: var(--white);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    padding: 1.75rem;
    height: 100%;
}
.glance-card h3 {
    display: flex;
    align-items: center;
    gap: .6rem;
    font-family: var(--font-ui);
    font-size: 1.02rem;
    color: var(--oxford);
    margin: 0 0 1rem;
    padding-bottom: .85rem;
    border-bottom: 1px solid var(--line);
}
.glance-card h3 i { color: var(--bronze); }

/* Next-step links */
.next-step {
    display: flex;
    align-items: center;
    gap: .9rem;
    height: 100%;
    background: var(--white);
    border: 1px solid var(--line);
    border-radius: var(--r);
    padding: 1rem 1.15rem;
    color: inherit;
    transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}
.next-step:hover { transform: translateY(-4px); box-shadow: var(--shadow); border-color: var(--bronze); color: inherit; }
.next-step .ns-icon {
    width: 42px; height: 42px;
    flex: none;
    border-radius: 11px;
    display: grid;
    place-items: center;
    background: var(--bronze-soft);
    color: var(--bronze);
    font-size: 1.1rem;
}
.next-step .ns-text {
    flex: 1;
    font-size: .8rem;
    color: var(--text-small);
    line-height: 1.35;
}
.next-step .ns-text b {
    display: block;
    font-family: var(--font-ui);
    font-size: .93rem;
    color: var(--oxford);
    line-height: 1.3;
}
.next-step > i { color: var(--bronze); flex: none; transition: transform .25s ease; }
.next-step:hover > i { transform: translateX(3px); }

/* --------------------------------------------------------------------------
   80. Information modals (premium membership, early bird)
   -------------------------------------------------------------------------- */
.info-modal .modal-content {
    border: 0;
    border-radius: var(--r-xl);
    overflow: hidden;
    background: var(--white);
    box-shadow: 0 30px 80px rgba(38, 48, 59, .28);
}
.im-head {
    position: relative;
    background: linear-gradient(115deg, var(--oxford) 0%, #33414f 60%, #4a3529 100%);
    padding: 1.75rem 1.9rem;
}
.im-badge {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    font-family: var(--font-ui);
    font-size: .66rem;
    font-weight: 700;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: #fff;
    background: var(--bronze);
    border-radius: 999px;
    padding: .22rem .8rem;
    margin-bottom: .7rem;
}
.im-head .modal-title {
    font-family: var(--font-display);
    font-size: clamp(1.4rem, 3vw, 2rem);
    color: var(--ivory);
    margin: 0;
    padding-right: 2.5rem;
}
.im-close {
    position: absolute;
    top: 1.1rem; right: 1.1rem;
    width: 38px; height: 38px;
    border-radius: 50%;
    border: 1px solid rgba(238, 235, 221, .3);
    background: rgba(38, 48, 59, .5);
    color: var(--ivory);
    display: grid; place-items: center;
    font-size: .9rem;
    transition: background-color .25s ease, border-color .25s ease;
}
.im-close:hover { background: var(--bronze); border-color: var(--bronze); color: #fff; }

.info-modal .modal-body { padding: 1.75rem 1.9rem; }
.im-note {
    background: var(--bronze-soft);
    border: 1px solid rgba(154, 105, 78, .28);
    border-radius: var(--r-sm);
    padding: .7rem 1rem;
    font-family: var(--font-ui);
    font-size: .88rem;
    font-weight: 600;
    color: var(--oxford);
    margin: 0 0 1.1rem;
}
.im-note i { color: var(--bronze); }
.im-intro { font-size: .98rem; line-height: 1.8; color: var(--text-body); margin: 0 0 1.5rem; }

/* Premium benefit list */
.benefit-list { list-style: none; margin: 0; padding: 0; }
.benefit-list li {
    display: flex;
    align-items: center;
    gap: .9rem;
    padding: .8rem 0;
    border-top: 1px solid var(--line);
    font-size: .95rem;
    color: var(--text-body);
}
.benefit-list li:last-child { border-bottom: 1px solid var(--line); }
.benefit-list .bl-icon {
    width: 40px; height: 40px;
    flex: none;
    border-radius: 11px;
    display: grid;
    place-items: center;
    background: var(--bronze-soft);
    color: var(--bronze);
    font-size: 1.05rem;
}

/* Early bird list */
.eb-list { list-style: none; margin: 0; padding: 0; }
.eb-list li {
    display: grid;
    grid-template-columns: 46px minmax(0, 1fr);
    gap: 1.1rem;
    padding: 1rem 0;
    border-top: 1px solid var(--line);
}
.eb-list li:first-child { border-top: 0; padding-top: 0; }
.eb-icon {
    width: 46px; height: 46px;
    border-radius: 12px;
    display: grid;
    place-items: center;
    background: var(--bronze-soft);
    color: var(--bronze);
    font-size: 1.15rem;
}
.eb-list h3 {
    font-family: var(--font-ui);
    font-size: 1rem;
    color: var(--oxford);
    margin: .15rem 0 .3rem;
}
.eb-list p { font-size: .92rem; line-height: 1.7; color: var(--text-2); margin: 0; }

.im-foot {
    border-top: 1px solid var(--line);
    background: var(--warm-ivory);
    padding: 1.1rem 1.9rem;
    gap: .6rem;
}

/* --------------------------------------------------------------------------
   81. Registration page responsive
   -------------------------------------------------------------------------- */
@media (max-width: 767.98px) {
    .offer-card { padding: 1.65rem 1.35rem; }
    .offer-card .oc-cta { width: 100%; }
    .info-modal .modal-body, .im-head, .im-foot { padding-left: 1.35rem; padding-right: 1.35rem; }
    .im-foot { flex-direction: column; }
    .im-foot .btn { width: 100%; margin: 0; }
    .benefit-list li { align-items: flex-start; }
}

/* ==========================================================================
   82. Booking instruction strip
   ========================================================================== */
.flow-steps {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1rem;
}
.flow-step {
        position: relative;
    text-align: center;
    background: #ffffff75;
    border: 1px solid #9a694e;
    border-radius: var(--r-lg);
    padding: 1.6rem 1.1rem;
    box-shadow: var(--shadow-sm);
    transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}
.flow-step:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow);
    border-color: var(--bronze);
}
/* Dashed connector between the icons, drawn behind them. */
.flow-step + .flow-step::before {
    content: "";
    position: absolute;
    top: 103px;                       /* level with the centre of the 56px icon */
    right: 100%;
    width: 1rem;                     /* exactly the grid gap */
    border-top: 2px dashed #000000;
}
.fs-no {
    display: block;
    font-family: var(--font-ui);
    font-size: .82rem;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: .04em;
    color: var(--oxford);
    margin-bottom: .85rem;
}
.flow-step:nth-child(2) .fs-no { color: var(--bronze); }
.fs-icon {
    position: relative;
    z-index: 1;
    width: 56px;
    height: 56px;
    margin: 0 auto .9rem;
    border-radius: 50%;
    display: grid;
    place-items: center;
    font-size: 1.35rem;
    background: var(--bronze-soft);
    color: var(--bronze);
    border: 2px solid transparent;
    transition: background-color .3s ease, color .3s ease;
}
.flow-step:hover .fs-icon { background: var(--bronze); color: #fff; }
.flow-step:nth-child(1) .fs-icon { background: rgba(78, 140, 106, .13); color: #4E8C6A; }
.flow-step:nth-child(1):hover .fs-icon { background: #4E8C6A; color: #fff; }
.flow-step:nth-child(4) .fs-icon { background: rgba(38, 48, 59, .09); color: var(--oxford); }
.flow-step:nth-child(4):hover .fs-icon { background: var(--oxford); color: var(--ivory); }
.fs-text {
    display: block;
    font-family: var(--font-ui);
    font-size: .86rem;
    font-weight: 600;
    line-height: 1.45;
    color: var(--text-body);
    max-width: 20ch;
    margin: 0 auto;
}

/* Numbered step chip used in the section eyebrows */
.step-no {
    display: inline-grid;
    place-items: center;
    width: 22px;
    height: 22px;
    margin-right: .5rem;
    border-radius: 50%;
    background: var(--bronze);
    color: #fff;
    font-family: var(--font-num);
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: 0;
}

/* ==========================================================================
   83. Fee tables
   ========================================================================== */
.fee-group { margin-bottom: 3rem; }
.fee-group:last-of-type { margin-bottom: 0; }

.fg-head { margin-bottom: 1.1rem; }
.fg-head h3 {
    font-family: var(--font-display);
    font-size: clamp(1.3rem, 2.4vw, 1.75rem);
    color: var(--oxford);
    margin: 0 0 .3rem;
}
.fg-head p { font-size: .95rem; color: var(--text-2); margin: 0; }

.fee-table {
    width: 100%;
    min-width: 640px;
    border-collapse: separate;
    border-spacing: 0;
    margin-bottom: 1rem;
    background: var(--white);
    border: 1px solid var(--line);
    border-radius: var(--r);
    overflow: hidden;
}
.fee-table thead th {
    background: var(--oxford);
    color: var(--ivory);
    font-family: var(--font-ui);
    font-size: .85rem;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
    padding: .9rem 1.1rem;
    text-align: left;
    border-bottom: 0;
}
.fee-table thead th.fee-col { text-align: center; width: 18%; }

.fee-table tbody th {
    text-align: left;
    font-weight: 400;
    padding: .95rem 1.1rem;
    border-top: 1px solid var(--line);
    vertical-align: middle;
}
.fee-table tbody th b {
    display: block;
    font-family: var(--font-ui);
    font-size: .95rem;
    font-weight: 600;
    color: var(--oxford);
    line-height: 1.35;
}
.fee-table tbody th em {
    display: block;
    font-size: .78rem;
    font-style: italic;
    color: var(--text-small);
    margin-top: .2rem;
}
.fee-table tbody td {
    padding: .6rem .55rem;
    border-top: 1px solid var(--line);
    text-align: center;
    vertical-align: middle;
}
.fee-table tbody tr:hover th,
.fee-table tbody tr:hover td { background: var(--warm-ivory); }
.fee-table tbody tr.is-featured th,
.fee-table tbody tr.is-featured td { background: var(--bronze-soft); }

.fee-badge {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    font-family: var(--font-ui);
    font-size: .64rem;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: #fff;
    background: var(--bronze);
    border-radius: 999px;
    padding: .18rem .6rem;
    margin-bottom: .4rem;
}

/* A selectable rate */
.fee-cell {
    position: relative;
    display: block;
    cursor: pointer;
    border: 1px solid var(--line);
    border-radius: var(--r-sm);
    background: var(--white);
    padding: .6rem .5rem .45rem;
    transition: border-color .2s ease, background-color .2s ease, box-shadow .2s ease;
}
.fee-cell:hover { border-color: var(--bronze); box-shadow: var(--shadow-sm); }
.fee-radio {
    position: absolute;
    opacity: 0;
    width: 1px;
    height: 1px;
}
.fee-price {
    display: block;
    font-family: var(--font-num);
    font-size: 1.22rem;
    font-weight: 700;
    color: var(--oxford);
    line-height: 1.1;
}
.fee-price .fc { font-size: .72em; color: var(--bronze); margin-right: .06em; }
.fee-pick {
    display: block;
    font-family: var(--font-ui);
    font-size: .66rem;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--text-small);
    margin-top: .2rem;
}
.fee-pick i { display: none; }
.fee-radio:checked ~ .fee-price { color: var(--bronze-dark); }
.fee-radio:checked ~ .fee-pick { color: var(--bronze); }
.fee-radio:checked ~ .fee-pick i { display: inline; }
.fee-cell:has(.fee-radio:checked),
.fee-cell.is-picked {
    border-color: var(--bronze);
    background: var(--bronze-soft);
    box-shadow: 0 0 0 2px rgba(154, 105, 78, .2);
}
.fee-radio:focus-visible ~ .fee-price { outline: 2px solid var(--bronze); outline-offset: 4px; }

.fg-note {
    font-size: .88rem;
    font-style: italic;
    color: var(--text-2);
    margin: .35rem 0 0;
}
.fg-note i { color: var(--bronze); font-style: normal; }

/* Group booking callout */
.group-cta {
    height: 100%;
    background: linear-gradient(140deg, var(--oxford) 0%, #3a4753 100%);
    border-radius: var(--r-lg);
    padding: 1.9rem;
    color: var(--ivory);
}
.gc-icon {
    width: 48px;
    height: 48px;
    border-radius: 13px;
    display: grid;
    place-items: center;
    background: var(--bronze);
    color: #fff;
    font-size: 1.25rem;
    margin-bottom: 1rem;
}
.group-cta h3 {
    font-family: var(--font-display);
    font-size: 1.35rem;
    color: var(--ivory);
    margin: 0 0 .6rem;
}
.group-cta p {
    font-size: .93rem;
    line-height: 1.7;
    color: var(--hero-sub);
    margin: 0 0 1.25rem;
}
.group-cta .btn-outline-brand {
    border-color: rgba(238, 235, 221, .4);
    color: var(--ivory);
}
.group-cta .btn-outline-brand:hover { background: var(--bronze); border-color: var(--bronze); color: #fff; }

/* Package conditions */
.fee-notes {
    height: 100%;
    background: var(--warm-ivory);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    padding: 1.9rem;
}
.fee-notes h3 {
    display: flex;
    align-items: center;
    gap: .55rem;
    font-family: var(--font-ui);
    font-size: 1.02rem;
    color: var(--oxford);
    margin: 0 0 1rem;
}
.fee-notes h3 i { color: var(--bronze); }
.fn-extra {
    font-size: .9rem;
    line-height: 1.7;
    color: var(--text-body);
    background: var(--white);
    border-left: 3px solid var(--bronze);
    border-radius: var(--r-sm);
    padding: .8rem 1rem;
    margin: 1.1rem 0 0;
}
.fn-extra i { color: var(--bronze); }

/* ==========================================================================
   84. Publication support packages and addons
   ========================================================================== */
.pkg-card {
    position: relative;
    display: flex;
    flex-direction: column;
    height: 100%;
    cursor: pointer;
    text-align: center;
    background: var(--white);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    padding: 2rem 1.35rem 1.35rem;
    transition: transform .3s ease, box-shadow .3s ease, border-color .2s ease;
}
.pkg-card:hover { transform: translateY(-5px); box-shadow: var(--shadow); border-color: var(--bronze); }
.pkg-card.is-flagged { padding-top: 2.6rem; }
.pkg-radio { position: absolute; opacity: 0; width: 1px; height: 1px; }

.pkg-card .pkg-flag {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translate(-50%, -50%);
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    white-space: nowrap;
    font-family: var(--font-ui);
    font-size: .66rem;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: #fff;
    background: var(--bronze);
    border-radius: 999px;
    padding: .3rem .85rem;
    box-shadow: var(--shadow-sm);
}
.pkg-card .pkg-q {
    display: block;
    font-family: var(--font-display);
    font-size: 2.4rem;
    line-height: 1;
    color: var(--bronze);
}
.pkg-card .pkg-journal {
    display: block;
    font-family: var(--font-ui);
    font-size: .74rem;
    font-weight: 600;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--text-small);
    margin-top: .2rem;
}
.pkg-card .pkg-name {
    display: block;
    font-family: var(--font-ui);
    font-size: .84rem;
    font-weight: 700;
    letter-spacing: .1em;
    color: var(--oxford);
    margin: .9rem 0 1rem;
    padding-top: .9rem;
    border-top: 1px solid var(--line);
}
.pkg-card .pkg-price { display: block; margin-bottom: .3rem; }
.pkg-card .pkg-price em {
    display: block;
    font-family: var(--font-ui);
    font-size: .7rem;
    font-style: normal;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--bronze);
}
.pkg-card .pkg-price b {
    display: block;
    font-family: var(--font-num);
    font-size: 2rem;
    font-weight: 700;
    color: var(--oxford);
    line-height: 1.15;
}
.pkg-card .pkg-price .fc { font-size: .58em; vertical-align: .34em; color: var(--bronze); }
.pkg-card .pkg-was {
    display: block;
    font-size: .8rem;
    color: var(--text-small);
    margin-bottom: 1.1rem;
}
.pkg-card .pkg-pick {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .4rem;
    margin-top: auto;
    font-family: var(--font-ui);
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--bronze);
    border: 1px solid var(--bronze);
    border-radius: 999px;
    padding: .5rem .9rem;
    transition: background-color .2s ease, color .2s ease;
}
.pkg-card:hover .pkg-pick { background: var(--bronze); color: #fff; }
.pkg-radio:checked ~ .pkg-pick { background: var(--bronze); color: #fff; }
.pkg-card:has(.pkg-radio:checked) {
    border-color: var(--bronze);
    box-shadow: 0 0 0 2px rgba(154, 105, 78, .22), var(--shadow);
}
.pkg-radio:focus-visible ~ .pkg-pick { outline: 2px solid var(--oxford); outline-offset: 3px; }

.btn-linkish {
    background: none;
    border: 0;
    padding: 0;
    font-family: var(--font-ui);
    font-size: .85rem;
    font-weight: 600;
    color: var(--text-small);
    text-decoration: underline;
    text-underline-offset: 3px;
    transition: color .2s ease;
}
.btn-linkish:hover { color: var(--bronze); }

/* Addons */
.addon-title {
    font-family: var(--font-display);
    font-size: 1.5rem;
    color: var(--oxford);
    text-align: center;
    margin: 0 0 1.25rem;
}
.addon-grid { display: grid; gap: .7rem; }
.addon {
    position: relative;
    display: grid;
    grid-template-columns: auto auto minmax(0, 1fr) auto;
    align-items: center;
    gap: .85rem;
    cursor: pointer;
    background: var(--white);
    border: 1px solid var(--line);
    border-radius: var(--r);
    padding: .8rem 1.1rem;
    transition: border-color .2s ease, box-shadow .2s ease;
}
.addon:hover { border-color: var(--bronze); box-shadow: var(--shadow-sm); }
.addon-check { position: absolute; opacity: 0; width: 1px; height: 1px; }
.ad-box {
    width: 22px;
    height: 22px;
    border: 2px solid var(--line);
    border-radius: 6px;
    display: grid;
    place-items: center;
    color: #fff;
    font-size: .72rem;
    transition: background-color .2s ease, border-color .2s ease;
}
.ad-box i { opacity: 0; }
.addon-check:checked ~ .ad-box { background: var(--bronze); border-color: var(--bronze); }
.addon-check:checked ~ .ad-box i { opacity: 1; }
.addon:has(.addon-check:checked) { border-color: var(--bronze); background: var(--bronze-soft); }
.addon-check:focus-visible ~ .ad-box { outline: 2px solid var(--bronze); outline-offset: 3px; }
.ad-icon {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    display: grid;
    place-items: center;
    background: var(--bronze-soft);
    color: var(--bronze);
    font-size: 1rem;
}
.ad-name {
    font-family: var(--font-ui);
    font-size: .93rem;
    font-weight: 600;
    color: var(--oxford);
}
.ad-price {
    font-family: var(--font-num);
    font-size: 1.02rem;
    font-weight: 700;
    color: var(--bronze);
    white-space: nowrap;
}
.ad-price em {
    font-family: var(--font-ui);
    font-size: .68rem;
    font-style: normal;
    font-weight: 600;
    color: var(--text-small);
}
.addon-foot {
    font-size: .85rem;
    color: var(--text-small);
    text-align: center;
    margin: 1.25rem 0 0;
}

/* ==========================================================================
   85. Order summary
   ========================================================================== */
.order-summary {
    position: sticky;
    top: 110px;
    background: var(--white);
    border: 1px solid var(--line);
    border-top: 3px solid var(--bronze);
    border-radius: var(--r-lg);
    padding: 1.6rem;
    box-shadow: var(--shadow);
}
.os-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    padding-top: .9rem;
}
.os-label {
    font-family: var(--font-ui);
    font-size: .85rem;
    font-weight: 600;
    color: var(--text-2);
}
.os-value {
    font-family: var(--font-num);
    font-size: 1.02rem;
    font-weight: 700;
    color: var(--oxford);
    white-space: nowrap;
}
.os-row.is-credit .os-value { color: #4E8C6A; }
.os-detail {
    font-size: .8rem;
    line-height: 1.5;
    color: var(--text-small);
    margin: .15rem 0 0;
    padding-bottom: .9rem;
    border-bottom: 1px solid var(--line);
}

.os-premium {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: .7rem;
    align-items: start;
    cursor: pointer;
    background: var(--bronze-soft);
    border: 1px solid rgba(154, 105, 78, .26);
    border-radius: var(--r-sm);
    padding: .8rem .9rem;
    margin-top: 1rem;
}
.os-premium .form-check-input { margin: .15rem 0 0; flex: none; }
.os-premium .form-check-input:checked { background-color: var(--bronze); border-color: var(--bronze); }
.os-premium span {
    font-size: .78rem;
    line-height: 1.5;
    color: var(--text-2);
}
.os-premium b {
    display: block;
    font-family: var(--font-ui);
    font-size: .87rem;
    color: var(--oxford);
    margin-bottom: .1rem;
}

.os-total {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    margin: 1.2rem 0 .2rem;
    padding-top: 1.1rem;
    border-top: 2px solid var(--oxford);
}
.os-total span {
    font-family: var(--font-ui);
    font-size: .95rem;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--oxford);
}
.os-total b {
    font-family: var(--font-num);
    font-size: 1.9rem;
    font-weight: 700;
    color: var(--bronze);
    line-height: 1;
}
.os-total .fc { font-size: .6em; vertical-align: .3em; }
.os-currency {
    font-size: .75rem;
    color: var(--text-small);
    text-align: right;
    margin: 0 0 1.1rem;
}
.os-foot {
    font-size: .76rem;
    line-height: 1.6;
    color: var(--text-small);
    margin: 1rem 0 0;
    padding-top: .9rem;
    border-top: 1px solid var(--line);
}
.os-foot i { color: var(--bronze); }

.order-summary .form-status {
    display: none;
    font-size: .85rem;
    line-height: 1.5;
    border-radius: var(--r-sm);
    padding: .7rem .9rem;
    margin-top: .9rem;
}
.order-summary .form-status.ok,
.order-summary .form-status.err { display: block; }
.order-summary .form-status.ok  { background: rgba(78, 140, 106, .12); color: #35674E; }
.order-summary .form-status.err { background: rgba(176, 74, 60, .1);  color: #9A3F32; }

/* Auto-filled, read-only category fields */
.form-card .form-control.is-auto {
    background: var(--warm-ivory);
    color: var(--oxford);
    font-weight: 600;
    cursor: default;
}

/* ==========================================================================
   86. Publication support inclusions
   ========================================================================== */
.inclusion {
    height: 100%;
    background: var(--white);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    padding: 1.6rem;
    transition: transform .3s ease, box-shadow .3s ease;
}
.inclusion:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
.inc-icon {
    width: 46px;
    height: 46px;
    border-radius: 12px;
    display: grid;
    place-items: center;
    background: var(--bronze-soft);
    color: var(--bronze);
    font-size: 1.2rem;
    margin-bottom: 1rem;
}
.inclusion h3 {
    font-family: var(--font-ui);
    font-size: 1.02rem;
    color: var(--oxford);
    margin: 0 0 .5rem;
}
.inclusion p {
    font-size: .91rem;
    line-height: 1.75;
    color: var(--text-2);
    margin: 0;
}

/* ==========================================================================
   87. Registration flow — responsive
   ========================================================================== */
@media (max-width: 991.98px) {
    .order-summary { position: static; margin-top: 1.5rem; }
}

@media (max-width: 767.98px) {
    .flow-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .flow-step:nth-child(odd)::before { display: none; }
    .fee-group { margin-bottom: 2.25rem; }
    .group-cta, .fee-notes { padding: 1.4rem; }
    .addon { grid-template-columns: auto auto minmax(0, 1fr); row-gap: .4rem; }
    .ad-price { grid-column: 3; justify-self: end; }
}

@media (max-width: 575.98px) {
    .flow-steps { grid-template-columns: minmax(0, 1fr); }
    .flow-step::before { display: none !important; }
    .fs-text { max-width: none; }
    .pkg-card { padding: 1.75rem 1.15rem 1.15rem; }
    .order-summary { padding: 1.25rem; }
}

/* ==========================================================================
   88. Booking column blocks
   ========================================================================== */
.booking-block {
    margin-top: 3.25rem;
    padding-top: 3rem;
    border-top: 1px solid var(--line);
}
.booking-block .section-head { margin-bottom: 1.5rem; }
.booking-block .addon-foot { text-align: left; }

/* The fee tables lose room in the left column; let them scroll rather than
   squeeze, and keep the sticky summary clear of the fixed header. */
#booking .table-responsive { margin-inline: -1px; }

@media (min-width: 1200px) {
    #summary .order-summary { top: 120px; }
}

@media (max-width: 1199.98px) {
    .booking-block { margin-top: 2.75rem; padding-top: 2.5rem; }
}

/* ==========================================================================
   89. Fee category tabs
   ========================================================================== */
.fee-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    margin-bottom: 1.75rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--line);
}
.fee-tab {
    background: var(--white);
    border: 1px solid var(--line);
    border-radius: 999px;
    padding: .6rem 1.35rem;
    font-family: var(--font-ui);
    font-size: .88rem;
    font-weight: 600;
    color: var(--text-2);
    cursor: pointer;
    transition: background-color .25s ease, border-color .25s ease, color .25s ease;
}
.fee-tab:hover { border-color: var(--bronze); color: var(--bronze); }
.fee-tab.active {
    background: var(--oxford);
    border-color: var(--oxford);
    color: var(--ivory);
}
.fee-tab.active:hover { color: var(--ivory); }

/* The group heading now lives in the tab, so only the lead line remains. */
.fg-lead {
    font-size: .95rem;
    color: var(--text-2);
    margin: 0 0 1.1rem;
}

/* Panes carry no bottom margin — the tab strip already separates them. */
#fee .fee-group { margin-bottom: 0; }

@media (max-width: 575.98px) {
    .fee-tabs { gap: .4rem; }
    .fee-tab { padding: .5rem 1rem; font-size: .82rem; }
}
/* ==========================================================================
   90. Deliverables over a conference photograph
   ========================================================================== */

/* The photo sits on the section itself and the scrim goes in ::before — the
   reverse (photo in ::before under a scrim) is what made bug-007 render as a
   flat block. The path is relative to THIS stylesheet, as with .site-footer. */
#deliverables {
    position: relative;
    background-image: url("../img/conf-6.JPG");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}
#deliverables::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        linear-gradient(180deg,
            var(--ivory) 0%,
            rgba(238, 235, 221, .90) 22%,
            rgba(238, 235, 221, .86) 50%,
            rgba(238, 235, 221, .90) 78%,
            var(--ivory) 100%);
}
#deliverables > .container { position: relative; z-index: 1; }

/* Lift the cards off the photograph. */
#deliverables .deliverable {
    box-shadow: 0 6px 22px rgba(38, 48, 59, .10);
    border-color: rgba(221, 215, 203, .9);
}
#deliverables .deliverable:hover { box-shadow: var(--shadow-md); }

/* ==========================================================================
   91. Journals & Publications page
   Every rule is qualified by its component root — style.css is one sheet and
   bare class selectors have collided twice already (bug-004, bug-010).
   ========================================================================== */

/* Publication routes */
.route-card {
    display: flex;
    flex-direction: column;
    height: 100%;
    background: var(--white);
    border: 1px solid var(--line);
    border-top: 3px solid var(--bronze);
    border-radius: var(--r-lg);
    padding: 1.9rem;
    transition: transform .3s ease, box-shadow .3s ease;
}
.route-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-md); }
.route-card .rc-icon {
    width: 52px;
    height: 52px;
    border-radius: 14px;
    display: grid;
    place-items: center;
    background: var(--bronze-soft);
    color: var(--bronze);
    font-size: 1.3rem;
    margin-bottom: 1.1rem;
    transition: background-color .3s ease, color .3s ease;
}
.route-card:hover .rc-icon { background: var(--bronze); color: #fff; }
.route-card h3 {
    font-family: var(--font-display);
    font-size: 1.5rem;
    color: var(--oxford);
    margin: 0 0 .55rem;
}
.route-card > p {
    font-size: .95rem;
    line-height: 1.75;
    color: var(--text-2);
    margin: 0 0 1.2rem;
}
.route-card .rc-issues {
    list-style: none;
    margin: 0 0 1.4rem;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
}
.route-card .rc-issues li {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    font-family: var(--font-ui);
    font-size: .82rem;
    font-weight: 600;
    color: var(--oxford);
    background: var(--warm-ivory);
    border: 1px solid var(--line);
    border-radius: 999px;
    padding: .35rem .85rem;
}
.route-card .rc-issues i { color: var(--bronze); font-size: .9em; }
.route-card .rc-cta { margin-top: auto; align-self: flex-start; }

/* Research guidance */
.guidance-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: .7rem;
}
.guidance-grid .guidance-item {
    display: flex;
    align-items: center;
    gap: .7rem;
    background: var(--white);
    border: 1px solid var(--line);
    border-radius: var(--r);
    padding: .85rem 1.1rem;
    font-family: var(--font-ui);
    font-size: .92rem;
    font-weight: 600;
    color: var(--oxford);
    transition: border-color .25s ease, transform .25s ease;
}
.guidance-grid .guidance-item:hover { border-color: var(--bronze); transform: translateX(4px); }
.guidance-grid .guidance-item i {
    flex: none;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: var(--bronze-soft);
    color: var(--bronze);
    font-size: .72rem;
}

/* Publication enquiry */
.enquiry-card {
    text-align: center;
    background: var(--oxford);
    border-radius: var(--r-xl);
    padding: 3rem 2rem;
    box-shadow: var(--shadow-md);
}
.enquiry-card .eq-icon {
    width: 60px;
    height: 60px;
    margin: 0 auto 1.4rem;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: rgba(238, 235, 221, .07);
    color: var(--bronze);
    font-size: 1.5rem;
}
.enquiry-card h2 {
    font-family: var(--font-display);
    font-size: clamp(1.6rem, 3.2vw, 2.2rem);
    color: var(--ivory);
    margin: 0 0 .9rem;
}
.enquiry-card p {
    font-size: .98rem;
    line-height: 1.85;
    color: var(--hero-sub);
    max-width: 62ch;
    margin: 0 auto 1.8rem;
}



/* Ethics and malpractice */
.ethic-card {
    height: 100%;
    background: var(--white);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    padding: 1.6rem;
    transition: transform .3s ease, box-shadow .3s ease;
}
.ethic-card:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
.ethic-card.is-brief {
    display: flex;
    align-items: center;
    gap: .9rem;
    background: var(--warm-ivory);
}
.ethic-card .ec-icon {
    width: 44px;
    height: 44px;
    flex: none;
    border-radius: 12px;
    display: grid;
    place-items: center;
    background: var(--bronze-soft);
    color: var(--bronze);
    font-size: 1.15rem;
    margin-bottom: .95rem;
}
.ethic-card.is-brief .ec-icon { margin-bottom: 0; }
.ethic-card .ec-icon.is-warn { background: rgba(176, 74, 60, .1); color: #9A3F32; }
.ethic-card h4 {
    font-family: var(--font-ui);
    font-size: 1.02rem;
    color: var(--oxford);
    margin: 0 0 .7rem;
}
.ethic-card.is-brief h4 { margin: 0; }
.ethic-card .check-list { margin: 0; }
.ethic-card .check-list li { font-size: .9rem; }

@media (max-width: 575.98px) {
    .route-card, .ethic-card { padding: 1.35rem; }
    .enquiry-card { padding: 1.75rem 1.25rem; }
    .guidance-grid { grid-template-columns: minmax(0, 1fr); }
}

/* ==========================================================================
   92. Ethics section — design variants (review page)
   Every rule is qualified by its variant root; see the Do-Not-Repeat note.
   ========================================================================== */

/* ---- Variant 01: facing pages ---- */
.ev1 {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.5rem;
}
.ev1 .ev1-col {
    background: var(--white);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    padding: 1.9rem;
}
.ev1 .ev1-col--do   { border-top: 4px solid #4E8C6A; }
.ev1 .ev1-col--dont { border-top: 4px solid #9A3F32; }
.ev1 .ev1-col header { padding-bottom: 1.1rem; margin-bottom: 1.2rem; border-bottom: 1px solid var(--line); }
.ev1 .ev1-badge {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    font-family: var(--font-ui);
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .16em;
    text-transform: uppercase;
    border-radius: 999px;
    padding: .25rem .85rem;
    margin-bottom: .7rem;
}
.ev1 .ev1-col--do   .ev1-badge { background: rgba(78, 140, 106, .14); color: #3B6E52; }
.ev1 .ev1-col--dont .ev1-badge { background: rgba(154, 63, 50, .12);  color: #9A3F32; }
.ev1 .ev1-col h3 {
    font-family: var(--font-display);
    font-size: 1.5rem;
    color: var(--oxford);
    margin: 0;
}
.ev1 .ev1-list { list-style: none; margin: 0; padding: 0; counter-reset: ev1; }
.ev1 .ev1-list > li {
    counter-increment: ev1;
    position: relative;
    padding: .95rem 0 .95rem 2.4rem;
    border-top: 1px solid var(--line);
}
.ev1 .ev1-list > li:first-child { border-top: 0; padding-top: 0; }
.ev1 .ev1-list > li::before {
    content: counter(ev1, decimal-leading-zero);
    position: absolute;
    left: 0;
    top: .95rem;
    font-family: var(--font-num);
    font-size: .8rem;
    font-weight: 700;
    color: var(--bronze);
    opacity: .6;
}
.ev1 .ev1-list > li:first-child::before { top: 0; }
.ev1 .ev1-list > li > b {
    display: block;
    font-family: var(--font-ui);
    font-size: .98rem;
    color: var(--oxford);
    margin-bottom: .3rem;
}
.ev1 .ev1-list ul { margin: 0; padding-left: 1.05rem; }
.ev1 .ev1-list ul li {
    font-size: .88rem;
    line-height: 1.7;
    color: var(--text-2);
    margin-bottom: .2rem;
}

/* ---- Variant 02: tabs over an accordion ---- */
.ev2 .accordion-item {
    background: var(--white);
    border: 1px solid var(--line);
    border-radius: var(--r) !important;
    margin-bottom: .6rem;
    overflow: hidden;
}
.ev2 .accordion-button {
    display: flex;
    align-items: center;
    gap: .85rem;
    font-family: var(--font-ui);
    font-size: .98rem;
    font-weight: 600;
    color: var(--oxford);
    background: var(--white);
    box-shadow: none;
    padding: 1rem 1.3rem;
}
.ev2 .accordion-button:not(.collapsed) { color: var(--bronze); background: var(--warm-ivory); }
.ev2 .ev2-icon {
    flex: none;
    width: 38px;
    height: 38px;
    border-radius: 11px;
    display: grid;
    place-items: center;
    background: var(--bronze-soft);
    color: var(--bronze);
    font-size: 1rem;
}
.ev2 .ev2-icon.is-warn { background: rgba(154, 63, 50, .1); color: #9A3F32; }
.ev2 .accordion-body { padding: 0 1.3rem 1.2rem 4.15rem; }
.ev2 .accordion-body .check-list { margin: 0; }
.ev2 .ev2-tbc { font-size: .9rem; font-style: italic; color: var(--text-small); margin: 0; }

/* ---- Variant 03: code of conduct ---- */
.ev3 { max-width: 62rem; margin-inline: auto; }
.ev3 .ev3-group {
    font-family: var(--font-ui);
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: var(--bronze);
    padding-bottom: .8rem;
    margin: 0 0 .5rem;
    border-bottom: 2px solid var(--oxford);
}
.ev3 .ev3-group--warn { color: #9A3F32; margin-top: 3.5rem; }
.ev3 .ev3-clause {
    display: grid;
    grid-template-columns: 5.5rem minmax(0, 1fr);
    gap: 1.5rem;
    padding: 1.6rem 0;
    border-bottom: 1px solid var(--line);
}
.ev3 .ev3-no {
    font-family: var(--font-num);
    font-size: 2.6rem;
    font-weight: 700;
    line-height: 1;
    color: transparent;
    -webkit-text-stroke: 1px var(--bronze);
    text-align: right;
}
.ev3 .ev3-no.is-warn { -webkit-text-stroke-color: #9A3F32; }
.ev3 .ev3-body h3 {
    display: flex;
    align-items: center;
    gap: .6rem;
    font-family: var(--font-ui);
    font-size: 1.12rem;
    color: var(--oxford);
    margin: 0 0 .6rem;
}
.ev3 .ev3-body h3 i { color: var(--bronze); font-size: 1rem; }
.ev3 .ev3-body p {
    font-size: .95rem;
    line-height: 1.8;
    color: var(--text-body);
    margin: 0 0 .45rem;
}
.ev3 .ev3-body p:last-child { margin-bottom: 0; }

@media (max-width: 991.98px) {
    .ev1 { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 575.98px) {
    .ev1 .ev1-col { padding: 1.35rem; }
    .ev2 .accordion-body { padding-left: 1.3rem; }
    .ev3 .ev3-clause { grid-template-columns: minmax(0, 1fr); gap: .5rem; }
    .ev3 .ev3-no { text-align: left; font-size: 2rem; }
}

/* ==========================================================================
   93. Publishing process — two columns of dark collapsible bars
   ========================================================================== */
.proc-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: start;              /* an open panel must not stretch its neighbour */
    gap: 1rem 1.25rem;
}
.proc-grid .proc-head { margin: 0; }
.proc-grid .proc-btn {
    display: flex;
    align-items: center;
    gap: 1rem;
    width: 100%;
    text-align: left;
    background: var(--oxford);
    border: 1px solid var(--oxford);
    border-radius: var(--r);
    padding: 1.05rem 1.35rem;
    cursor: pointer;
    transition: background-color .25s ease, border-color .25s ease, border-radius .25s ease;
}
.proc-grid .proc-btn:hover { background: var(--oxford-dark); border-color: var(--bronze); }
.proc-grid .proc-btn:not(.collapsed) {
    background: var(--oxford-dark);
    border-color: var(--bronze);
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
}
.proc-grid .proc-btn:focus-visible { outline: 2px solid var(--bronze); outline-offset: 3px; }

.proc-grid .proc-no {
    flex: none;
    font-family: var(--font-num);
    font-size: .85rem;
    font-weight: 700;
    letter-spacing: .02em;
    color: var(--bronze);
}
.proc-grid .proc-title {
    flex: 1;
    font-family: var(--font-ui);
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.35;
    color: var(--ivory);
}
.proc-grid .proc-chev {
    flex: none;
    color: var(--hero-sub);
    font-size: .95rem;
    transition: transform .25s ease, color .25s ease;
}
.proc-grid .proc-btn:not(.collapsed) .proc-chev { transform: rotate(180deg); color: var(--bronze); }

.proc-grid .proc-panel {
    display: flex;
    gap: 1rem;
    background: var(--white);
    border: 1px solid var(--bronze);
    border-top: 0;
    border-radius: 0 0 var(--r) var(--r);
    padding: 1.25rem 1.35rem;
}
.proc-grid .proc-icon {
    flex: none;
    width: 40px;
    height: 40px;
    border-radius: 11px;
    display: grid;
    place-items: center;
    background: var(--bronze-soft);
    color: var(--bronze);
    font-size: 1.05rem;
}
.proc-grid .proc-panel .check-list { margin: 0; flex: 1; }
.proc-grid .proc-panel .check-list li { font-size: .9rem; }

@media (max-width: 767.98px) {
    .proc-grid { grid-template-columns: minmax(0, 1fr); gap: .75rem; }
    .proc-grid .proc-btn { padding: .9rem 1.1rem; gap: .75rem; }
    .proc-grid .proc-title { font-size: .93rem; }
    .proc-grid .proc-panel { flex-direction: column; gap: .8rem; padding: 1.1rem; }
}
/* ==========================================================================
   94. Important Dates — design variants (review page)
   Every rule is qualified by its variant root; see the Do-Not-Repeat note.
   ========================================================================== */

/* A variant label sitting on a dark band needs light text. */
.variant-label.is-dark h2 { color: var(--ivory); }
.variant-label.is-dark p  { color: var(--hero-sub); }

/* ---- Variant 01: step cards on a dark band ---- */
.dv1-band { background: linear-gradient(160deg, var(--oxford) 0%, #1d252d 100%); }
.dv1-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1.25rem;
}
.dv1-grid .dv1-card {
    background: var(--white);
    border-radius: var(--r-lg);
    padding: 1.5rem;
    box-shadow: var(--shadow-md);
    transition: transform .3s ease;
}
.dv1-grid .dv1-card:hover { transform: translateY(-6px); }
.dv1-grid .dv1-card header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: .75rem;
    margin-bottom: 1rem;
}
.dv1-grid .dv1-step {
    font-family: var(--font-ui);
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--text-small);
}
.dv1-grid .dv1-chip {
    width: 32px;
    height: 32px;
    border-radius: 9px;
    display: grid;
    place-items: center;
    background: var(--bronze-soft);
    color: var(--bronze);
    font-size: .85rem;
}
.dv1-grid .dv1-date {
    display: flex;
    align-items: flex-start;
    gap: .5rem;
    margin: 0 0 .9rem;
}
.dv1-grid .dv1-date b {
    font-family: var(--font-num);
    font-size: 2.6rem;
    font-weight: 700;
    line-height: .95;
    color: var(--oxford);
}
.dv1-grid .dv1-date span { display: block; padding-top: .2rem; }
.dv1-grid .dv1-date em {
    display: block;
    font-family: var(--font-ui);
    font-style: normal;
    font-size: .74rem;
    font-weight: 700;
    letter-spacing: .1em;
    line-height: 1.35;
    color: var(--bronze);
}
.dv1-grid .dv1-date em + em { color: var(--text-small); }
.dv1-grid .dv1-card h3 {
    font-family: var(--font-ui);
    font-size: .95rem;
    line-height: 1.4;
    color: var(--oxford);
    margin: 0 0 1.1rem;
    min-height: 2.7em;
}
.dv1-grid .dv1-pill {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    font-family: var(--font-ui);
    font-size: .76rem;
    font-weight: 700;
    color: #3B6E52;
    background: rgba(78, 140, 106, .13);
    border-radius: 999px;
    padding: .3rem .8rem;
}
.dv1-grid .dv1-pill.is-closed { color: #9A3F32; background: rgba(154, 63, 50, .12); }

.dates-facts {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: .75rem 2.5rem;
    margin-top: 2.5rem;
    padding-top: 1.75rem;
    border-top: 1px solid rgba(238, 235, 221, .14);
}
.dates-facts span {
    display: block;
    font-family: var(--font-ui);
    font-size: .66rem;
    font-weight: 700;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--bronze);
    margin-bottom: .2rem;
}
.dates-facts b {
    font-family: var(--font-ui);
    font-size: .92rem;
    color: var(--ivory);
}

/* ---- Variant 02: glass cards over a photograph ---- */
.dates-panel {
    position: relative;
    border-radius: var(--r-xl);
    padding: 2.75rem 2.25rem 3rem;
    overflow: hidden;
    background-image: url("../img/conf-9.JPG");
    background-size: cover;
    background-position: center;
    box-shadow: var(--shadow-md);
}
.dates-panel::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(115deg, rgb(0 0 0 / 93%) 0%, rgb(43 27 18 / 88%) 55%, rgb(26 10 2 / 77%) 100%);
}
.dates-panel > * { position: relative; z-index: 1; }
.dates-panel .dates-title {
    font-family: var(--font-display);
    font-size: clamp(1.8rem, 4vw, 2.6rem);
    text-align: center;
    color: var(--ivory);
    margin: 0 0 2rem;
}
.dates-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1.25rem;
}
.dates-grid .dates-card {
    text-align: center;
    background: rgba(238, 235, 221, .12);
    border: 1px solid rgba(238, 235, 221, .22);
    border-radius: var(--r-lg);
    padding: 1.75rem 1.15rem;
    backdrop-filter: blur(7px);
    -webkit-backdrop-filter: blur(7px);
    transition: background-color .3s ease, transform .3s ease;
}
.dates-grid .dates-card:hover { background: rgba(238, 235, 221, .2); transform: translateY(-5px); }
.dates-grid .dates-tile {
    width: 54px;
    height: 54px;
    margin: 0 auto 1.05rem;
    border-radius: 14px;
    display: grid;
    place-items: center;
    font-size: 1.5rem;
    color: #fff;
    background: linear-gradient(145deg, var(--bronze) 0%, #b84700 100%);
    box-shadow: var(--shadow-bronze);
}
.dates-grid .dates-card h3 {
    font-family: var(--font-ui);
    font-size: .98rem;
    line-height: 1.45;
    color: var(--ivory);
    margin: 0 0 .55rem;
}
.dates-grid .dates-when {
    font-family: var(--font-num);
    font-size: .95rem;
    font-weight: 600;
    color: var(--hero-sub);
    margin: 0;
}

/* ---- Variant 03: horizontal rail ---- */
.dv3-rail {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1.5rem;
}
.dv3-rail .dv3-stop { position: relative; text-align: center; }
.dv3-rail .dv3-stop + .dv3-stop::before {
    content: "";
    position: absolute;
    top: 78px;                       /* level with the centre of the 44px node */
    right: 50%;
    left: -50%;
    border-top: 2px dashed var(--line);
}
.dv3-rail .dv3-date {
    font-family: var(--font-num);
    font-size: 1.65rem;
    font-weight: 700;
    line-height: 1.15;
    color: var(--oxford);
    margin: 0 0 .7rem;
}
.dv3-rail .dv3-date span {
    display: block;
    font-family: var(--font-ui);
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .16em;
    color: var(--bronze);
}
.dv3-rail .dv3-node {
    position: relative;
    z-index: 1;
    width: 44px;
    height: 44px;
    margin: 0 auto 1rem;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: var(--bronze);
    color: #fff;
    font-size: 1rem;
    box-shadow: 0 0 0 6px var(--white), var(--shadow-sm);
}
.dv3-rail .dv3-body h3 {
    font-family: var(--font-ui);
    font-size: .98rem;
    line-height: 1.4;
    color: var(--oxford);
    margin: 0 0 .5rem;
}
.dv3-rail .dv3-left {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    font-family: var(--font-ui);
    font-size: .76rem;
    font-weight: 700;
    color: #3B6E52;
    background: rgba(78, 140, 106, .13);
    border-radius: 999px;
    padding: .25rem .75rem;
    margin: 0 0 .6rem;
}
.dv3-rail .dv3-left.is-closed { color: #9A3F32; background: rgba(154, 63, 50, .12); }
.dv3-rail .dv3-note {
    font-size: .85rem;
    line-height: 1.65;
    color: var(--text-2);
    margin: 0;
}

@media (max-width: 991.98px) {
    .dv1-grid, .dates-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .dv3-rail { grid-template-columns: minmax(0, 1fr); gap: 2rem; }
    .dv3-rail .dv3-stop + .dv3-stop::before { display: none; }
}
@media (max-width: 575.98px) {
    .dv1-grid, .dates-grid { grid-template-columns: minmax(0, 1fr); }
    .dates-panel { padding: 1.75rem 1.15rem 2rem; }
    .dv1-grid .dv1-card h3 { min-height: 0; }
    .dates-facts { gap: .75rem 1.5rem; }
}

/* ==========================================================================
   95. Panel discussion banner
   ========================================================================== */
.panel-banner {
    position: relative;
    display: block;
    border-radius: var(--r-xl);
    overflow: hidden;
    box-shadow: var(--shadow-md);
    transition: transform .35s ease, box-shadow .35s ease;
}
.panel-banner:hover { transform: translateY(-4px); box-shadow: 0 22px 60px rgba(38, 48, 59, .16); }
.panel-banner img {
    display: block;
    width: 100%;
    height: auto;
}
.panel-banner .pnl-cta {
    position: absolute;
    right: 1.25rem;
    bottom: 1.25rem;
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    font-family: var(--font-ui);
    font-size: .82rem;
    font-weight: 700;
    color: var(--oxford);
    background: rgba(255, 255, 255, .92);
    border-radius: 999px;
    padding: .5rem 1.05rem;
    box-shadow: var(--shadow-sm);
    transition: background-color .25s ease, color .25s ease;
}
.panel-banner:hover .pnl-cta { background: var(--bronze); color: #fff; }
.panel-banner .pnl-cta i { transition: transform .25s ease; }
.panel-banner:hover .pnl-cta i { transform: translateX(3px); }

@media (max-width: 575.98px) {
    .panel-banner { border-radius: var(--r); }
    .panel-banner .pnl-cta {
        position: static;
        display: flex;
        justify-content: center;
        border-radius: 0;
        box-shadow: none;
        background: var(--oxford);
        color: var(--ivory);
        padding: .75rem;
    }
}
/* ==========================================================================
   96. Hub — the six reasons, two abreast beside the map
   ========================================================================== */
.hub .hub-points {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .2rem 1.75rem;
    margin-top: .5rem;
}
.hub .hub-caption {
    display: flex;
    align-items: flex-start;
    gap: .5rem;
    font-size: .82rem;
    line-height: 1.6;
    color: var(--hero-sub);
    margin: 1rem 0 0;
}
.hub .hub-caption i { color: var(--bronze); flex: none; margin-top: .15rem; }

@media (max-width: 991.98px) {
    .hub .hub-points { grid-template-columns: minmax(0, 1fr); }
}
/* ==========================================================================
   97. Theme section — session titles and session tiles
   ========================================================================== */

/* Session titles are far longer than the old one-word keywords. */
.kw-stage.is-sessions .kw-item {
    font-size: clamp(1.2rem, 2.4vw, 1.75rem);
    line-height: 1.25;
    white-space: normal;
}

.theme-carousel {
    position: relative;
    margin-top: 1.75rem;
}
.theme-carousel .tc-track {
    display: flex;
    gap: .85rem;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    scrollbar-width: none;             /* the arrows are the control */
    -ms-overflow-style: none;
}
.theme-carousel .tc-track::-webkit-scrollbar { display: none; }
.theme-carousel .tc-track:focus-visible { outline: 2px solid var(--bronze); outline-offset: 4px; }
.theme-carousel .theme-tile {
    flex: 0 0 calc((100% - 1.7rem) / 3);
    scroll-snap-align: start;
}

/* Arrows sit just outside the track and fade in with the section. */
.theme-carousel .tc-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 3;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: var(--white);
    border: 1px solid var(--line);
    color: var(--oxford);
    font-size: .95rem;
    box-shadow: var(--shadow);
    transition: background-color .25s ease, color .25s ease, opacity .25s ease;
}
.theme-carousel .tc-nav:hover { background: var(--bronze); border-color: var(--bronze); color: #fff; }
.theme-carousel .tc-nav:disabled { opacity: .35; pointer-events: none; }
.theme-carousel .tc-prev { left: -14px; }
.theme-carousel .tc-next { right: -14px; }

.theme-carousel .theme-tile {
    position: relative;
    display: block;
    aspect-ratio: 4 / 3;
    border-radius: var(--r);
    overflow: hidden;
    background: var(--oxford);
    transition: transform .35s ease, box-shadow .35s ease;
}
.theme-carousel .theme-tile:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.theme-carousel .theme-tile img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .5s ease;
}
.theme-carousel .theme-tile:hover img { transform: scale(1.05); }
.theme-carousel .tt-scrim {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(38, 48, 59, .1) 35%, rgba(29, 37, 45, .9) 100%);
}
.theme-carousel .tt-goals {
    position: absolute;
    top: .5rem;
    right: .5rem;
    display: flex;
    gap: .2rem;
    z-index: 2;
}
.theme-carousel .tt-goals img {
    position: static;
    width: 26px;
    height: 26px;
    border-radius: 4px;
    object-fit: contain;
}
.theme-carousel .theme-tile:hover .tt-goals img { transform: none; }
.theme-carousel .tt-text {
    position: absolute;
    left: .75rem;
    right: .75rem;
    bottom: .7rem;
    z-index: 2;
}
.theme-carousel .tt-no {
    display: block;
    font-family: var(--font-ui);
    font-size: .6rem;
    font-weight: 700;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--bronze);
    margin-bottom: .15rem;
}
.theme-carousel .tt-text b {
    display: block;
    font-family: var(--font-ui);
    font-size: .8rem;
    font-weight: 700;
    line-height: 1.3;
    color: var(--ivory);
}
.theme-more { margin: 1.1rem 0 0; }

@media (max-width: 575.98px) {
    .theme-carousel .theme-tile { flex: 0 0 calc((100% - .85rem) / 2); }
    .theme-carousel .tc-prev { left: -8px; }
    .theme-carousel .tc-next { right: -8px; }
}
/* ==========================================================================
   98. Goals advanced across the ten sessions
   ========================================================================== */
.sdg-used-label {
    font-family: var(--font-ui);
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--text-small);
    margin: 2rem 0 .85rem;
}
.sdg-used {
    display: flex;
    flex-wrap: wrap;
    gap: .45rem;
}
.sdg-used img {
  width: 110px;
    height: 110px;
    border-radius: 6px;
    display: block;
    box-shadow: var(--shadow-sm);
    transition: transform .25s ease;
    margin-right: 12px;
}
.sdg-used img:hover { transform: translateY(-3px); }

@media (max-width: 575.98px) {
    .sdg-used img { width: 40px; height: 40px; }
}

/* The submission note also appears on the dark sessions band. */
.reg-note.is-dark {
    background: rgba(238, 235, 221, .07);
    border-color: rgba(238, 235, 221, .18);
    color: var(--hero-sub);
}
.reg-note.is-dark code, .reg-note.is-dark b { color: var(--ivory); }

/* ==========================================================================
   99. Research-journey Lottie stage
   ========================================================================== */
.rj-stage {
    max-width: 1100px;
    margin: 0 auto;
    aspect-ratio: 2100 / 1080;   /* matches the artboard, so no reflow on load */
}
.rj-stage .rj-anim { width: 100%; height: 100%; }
.rj-stage svg { display: block; }

.rj-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: .85rem;
    margin-top: 2rem;
}

@media (max-width: 575.98px) {
    .rj-actions > * { width: 100%; justify-content: center; }
}

/* ==========================================================================
   100. Engagement blocks — Volunteer, Scholarship, Subscribe, Join as Speaker
   Every rule is qualified by its component root; see the Do-Not-Repeat note.
   ========================================================================== */
.engage-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.5rem;
}
.engage-grid .engage-card {
    display: flex;
    flex-direction: column;
    height: 100%;
    background: var(--white);
    border: 1px solid var(--line);
    border-top: 3px solid var(--bronze);
    border-radius: var(--r-lg);
    padding: 2rem 1.9rem;
    transition: transform .3s ease, box-shadow .3s ease;
}
.engage-grid .engage-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-md); }
.engage-grid .eg-icon {
    width: 52px;
    height: 52px;
    border-radius: 14px;
    display: grid;
    place-items: center;
    background: var(--bronze-soft);
    color: var(--bronze);
    font-size: 1.3rem;
    margin-bottom: 1.1rem;
    transition: background-color .3s ease, color .3s ease;
}
.engage-grid .engage-card:hover .eg-icon { background: var(--bronze); color: #fff; }
.engage-grid .eg-eyebrow {
    font-family: var(--font-ui);
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--bronze);
    margin: 0 0 .4rem;
}
.engage-grid .engage-card h3 {
    font-family: var(--font-display);
    font-size: clamp(1.3rem, 2.2vw, 1.7rem);
    line-height: 1.25;
    color: var(--oxford);
    margin: 0 0 .6rem;
}
.engage-grid .eg-tagline {
    font-family: var(--font-ui);
    font-size: .85rem;
    font-weight: 700;
    color: var(--text-2);
    margin: 0 0 .9rem;
    padding-bottom: .9rem;
    border-bottom: 1px solid var(--line);
}
.engage-grid .eg-text {
    font-size: .94rem;
    line-height: 1.8;
    color: var(--text-body);
    margin: 0 0 1rem;
}
.engage-grid .eg-points { margin: 0 0 1rem; }
.engage-grid .eg-points li { font-size: .92rem; }
.engage-grid .eg-map {
    display: flex;
    align-items: flex-start;
    gap: .5rem;
    font-size: .85rem;
    line-height: 1.6;
    color: var(--text-small);
    margin: 0 0 1.2rem;
}
.engage-grid .eg-map i { color: var(--bronze); flex: none; margin-top: .15rem; }
.engage-grid .eg-cta { margin-top: auto; align-self: flex-start; }

/* Speaker bureau address in its pop-up */
.speaker-mail {
    display: inline-flex;
    align-items: center;
    gap: .6rem;
    font-family: var(--font-ui);
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--bronze);
    background: var(--bronze-soft);
    border: 1px solid rgba(154, 105, 78, .28);
    border-radius: 999px;
    padding: .7rem 1.4rem;
    transition: background-color .25s ease, color .25s ease;
}
.speaker-mail:hover { background: var(--bronze); color: #fff; }

/* The subscribe form sits inside a modal, so it drops the card chrome. */
#subscribeModal .form-card {
    background: none;
    border: 0;
    padding: 0;
    box-shadow: none;
}
#subscribeModal .form-status {
    display: none;
    font-size: .85rem;
    line-height: 1.5;
    border-radius: var(--r-sm);
    padding: .7rem .9rem;
    margin-top: 1rem;
}
#subscribeModal .form-status.ok,
#subscribeModal .form-status.err { display: block; }
#subscribeModal .form-status.ok  { background: rgba(78, 140, 106, .12); color: #35674E; }
#subscribeModal .form-status.err { background: rgba(176, 74, 60, .1);  color: #9A3F32; }

@media (max-width: 767.98px) {
    .engage-grid { grid-template-columns: minmax(0, 1fr); gap: 1.1rem; }
    .engage-grid .engage-card { padding: 1.5rem 1.35rem; }
    .engage-grid .eg-cta { width: 100%; }
}

/* ==========================================================================
   101. FAQ topic links (homepage FAQ sidebar)
   ========================================================================== */
.faq-links {
    background: var(--warm-ivory);
    border: 1px solid var(--line);
    border-radius: var(--r);
    padding: 1.3rem 1.4rem;
}
.faq-links h3 {
    font-family: var(--font-ui);
    font-size: .98rem;
    color: var(--oxford);
    margin: 0 0 .9rem;
}
.faq-links a {
    display: flex;
    align-items: center;
    gap: .7rem;
    font-family: var(--font-ui);
    font-size: .9rem;
    font-weight: 600;
    color: var(--text-2);
    background: var(--white);
    border: 1px solid var(--line);
    border-radius: var(--r-sm);
    padding: .65rem .9rem;
    margin-bottom: .5rem;
    transition: border-color .25s ease, color .25s ease, transform .25s ease;
}
.faq-links a:last-child { margin-bottom: 0; }
.faq-links a:hover { border-color: var(--bronze); color: var(--bronze); transform: translateX(3px); }
.faq-links a > i:first-child { color: var(--bronze); font-size: 1rem; flex: none; }
.faq-links a > i:last-child { margin-left: auto; color: var(--bronze); font-size: .85rem; }

/* ==========================================================================
   102. About IFERP, speakers and conference FAQ
   Every rule is qualified by its component root; see the Do-Not-Repeat note.
   ========================================================================== */

/* Body paragraphs after the lead on About IFERP */
.iferp-para {
    font-size: .98rem;
    line-height: 1.9;
    color: var(--text-body);
    margin: 0 0 1.2rem;
}
.iferp-para:last-child { margin-bottom: 0; }

/* Mission and vision, on the dark band */
.mv-card {
    height: 100%;
    background: rgba(238, 235, 221, .06);
    border: 1px solid rgba(238, 235, 221, .16);
    border-left: 3px solid var(--bronze);
    border-radius: var(--r-lg);
    padding: 2rem 1.9rem;
    margin: 0;
}
.mv-card .mv-icon {
    width: 48px;
    height: 48px;
    border-radius: 13px;
    display: grid;
    place-items: center;
    background: var(--bronze);
    color: #fff;
    font-size: 1.2rem;
    margin-bottom: 1.1rem;
}
.mv-card .mv-label {
    font-family: var(--font-ui);
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--bronze);
    margin: 0 0 .6rem;
}
.mv-card .mv-text {
    font-family: var(--font-display);
    font-size: clamp(1.15rem, 2vw, 1.4rem);
    line-height: 1.6;
    color: var(--ivory);
    margin: 0;
}

/* Speaker boards — tall composite artwork, so cap the height on wide screens
   and let it scroll rather than stretching the section to 1750px. */
.speaker-board {
    max-width: 1100px;
    margin: 0 auto;
    background: var(--white);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    padding: .75rem;
    box-shadow: var(--shadow);
    overflow: hidden;
}
.speaker-board img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: var(--r-sm);
}

@media (max-width: 575.98px) {
    .mv-card { padding: 1.5rem 1.35rem; }
    .speaker-board { padding: .4rem; }
}

/* A sub-page link marks the page currently open. */
.site-nav .mega-subs a.is-current {
    color: var(--bronze);
    font-weight: 700;
}

/* ==========================================================================
   103. Contact page — secretariat detail cards
   ========================================================================== */
.reach-card {
    height: 100%;
    text-align: center;
    background: var(--white);
    border: 1px solid var(--line);
    border-top: 3px solid var(--bronze);
    border-radius: var(--r-lg);
    padding: 1.9rem 1.35rem;
    transition: transform .3s ease, box-shadow .3s ease;
}
.reach-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-md); }
.reach-card .rh-icon {
    width: 52px;
    height: 52px;
    margin: 0 auto 1.1rem;
    border-radius: 14px;
    display: grid;
    place-items: center;
    background: var(--bronze-soft);
    color: var(--bronze);
    font-size: 1.25rem;
    transition: background-color .3s ease, color .3s ease;
}
.reach-card:hover .rh-icon { background: var(--bronze); color: #fff; }
.reach-card h3 {
    font-family: var(--font-ui);
    font-size: 1rem;
    color: var(--oxford);
    margin: 0 0 .7rem;
}
.reach-card p {
    font-size: .93rem;
    line-height: 1.7;
    color: var(--text-2);
    margin: 0 0 .2rem;
}
.reach-card p:last-child { margin-bottom: 0; }
.reach-card a { color: var(--bronze); font-weight: 600; }
.reach-card a:hover { text-decoration: underline; }

@media (max-width: 575.98px) {
    .reach-card { padding: 1.5rem 1.15rem; }
}

/* ==========================================================================
   104. About page — design variants (review page)
   Every rule is qualified by its variant root; see the Do-Not-Repeat note.
   ========================================================================== */

/* ---- Variant 01: photo essay ---- */
.av1 { display: grid; gap: 3.5rem; }
.av1 .av1-row {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 2.5rem;
    align-items: center;
}
.av1 .av1-row.is-flipped .av1-media { order: 2; }
.av1 .av1-media {
    margin: 0;
    border-radius: var(--r-xl);
    overflow: hidden;
    box-shadow: var(--shadow-md);
    aspect-ratio: 4 / 3;
}
.av1 .av1-media img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .6s ease;
}
.av1 .av1-row:hover .av1-media img { transform: scale(1.04); }
.av1 .av1-body p { font-size: .98rem; line-height: 1.85; color: var(--text-body); }
.av1 .av1-aims {
    list-style: none;
    margin: 1.4rem 0 0;
    padding: 0;
    counter-reset: av1;
}
.av1 .av1-aims li {
    counter-increment: av1;
    position: relative;
    padding: .8rem 0 .8rem 2.6rem;
    border-top: 1px solid var(--line);
}
.av1 .av1-aims li::before {
    content: counter(av1, decimal-leading-zero);
    position: absolute;
    left: 0;
    top: .95rem;
    font-family: var(--font-num);
    font-size: .8rem;
    font-weight: 700;
    color: var(--bronze);
}
.av1 .av1-aims b {
    display: block;
    font-family: var(--font-ui);
    font-size: .96rem;
    color: var(--oxford);
    margin-bottom: .15rem;
}
.av1 .av1-aims span { font-size: .9rem; line-height: 1.7; color: var(--text-2); }

/* ---- Variant 02: the tenth edition ---- */
.av2-hero {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 2.5rem;
    align-items: center;
    margin-bottom: 3rem;
}
.av2-hero .av2-num {
    display: flex;
    align-items: flex-start;
    font-family: var(--font-display);
    line-height: .8;
    color: var(--bronze);
}
.av2-hero .av2-num span { font-size: clamp(6rem, 14vw, 11rem); font-weight: 700; }
.av2-hero .av2-num em { font-size: clamp(1.6rem, 3vw, 2.6rem); font-style: normal; padding-top: .35em; }
.av2-hero .av2-lead p:last-child { font-size: .98rem; line-height: 1.85; color: var(--text-body); margin: 0; }

.av2-strip-label {
    font-family: var(--font-ui);
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--text-small);
    margin: 0 0 .9rem;
}
.av2-strip {
    display: flex;
    gap: 1rem;
    overflow-x: auto;
    padding-bottom: .75rem;
    scrollbar-width: thin;
}
.av2-strip .av2-edition {
    flex: 0 0 128px;
    margin: 0;
    text-align: center;
}
.av2-strip .av2-edition img {
    display: block;
    width: 100%;
    aspect-ratio: 3 / 4;
    object-fit: cover;
    border-radius: var(--r-sm);
    border: 1px solid var(--line);
    background: var(--white);
    transition: transform .3s ease, box-shadow .3s ease;
}
.av2-strip .av2-edition:hover img { transform: translateY(-4px); box-shadow: var(--shadow); }
.av2-strip .av2-edition figcaption {
    font-family: var(--font-ui);
    font-size: .78rem;
    font-weight: 700;
    color: var(--text-small);
    margin-top: .5rem;
}
.av2-strip .av2-edition.is-next .av2-next {
    display: grid;
    place-items: center;
    aspect-ratio: 3 / 4;
    border-radius: var(--r-sm);
    border: 2px dashed var(--bronze);
    background: var(--bronze-soft);
    color: var(--bronze);
    font-family: var(--font-ui);
    font-size: .95rem;
    font-weight: 700;
    gap: .3rem;
}
.av2-strip .av2-edition.is-next figcaption { color: var(--bronze); }

.av2-band {
    position: relative;
    margin-top: 3rem;
    border-radius: var(--r-xl);
    overflow: hidden;
    background-image: url("../img/conf-7.JPG");
    background-size: cover;
    background-position: center;
}
.av2-band::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(150deg, rgba(38, 48, 59, .95) 0%, rgba(74, 53, 41, .9) 100%);
}
.av2-band .av2-band-inner {
    position: relative;
    z-index: 1;
    padding: 3rem 2.25rem;
    text-align: center;
}
.av2-band .section-title { color: var(--ivory); }
.av2-band .av2-purpose {
    font-size: .98rem;
    line-height: 1.85;
    color: var(--hero-sub);
    max-width: 70ch;
    margin: 0 auto 2rem;
}
.av2-band .av2-aims {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 1.25rem;
    text-align: left;
}
.av2-band .av2-aim {
    background: rgba(238, 235, 221, .07);
    border: 1px solid rgba(238, 235, 221, .16);
    border-radius: var(--r);
    padding: 1.2rem;
}
.av2-band .av2-aim span {
    font-family: var(--font-num);
    font-size: .78rem;
    font-weight: 700;
    color: var(--bronze);
}
.av2-band .av2-aim b {
    display: block;
    font-family: var(--font-ui);
    font-size: .95rem;
    color: var(--ivory);
    margin: .3rem 0 .35rem;
}
.av2-band .av2-aim p { font-size: .86rem; line-height: 1.7; color: var(--hero-sub); margin: 0; }

/* ---- Variant 03: sticky rail ---- */
.av3 {
    display: grid;
    grid-template-columns: 220px minmax(0, 1fr);
    gap: 3rem;
    align-items: start;
}
.av3 .av3-rail { position: sticky; top: 110px; }
.av3 .av3-rail-title {
    font-family: var(--font-ui);
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--text-small);
    margin: 0 0 .9rem;
}
.av3 .av3-rail a {
    display: block;
    font-family: var(--font-ui);
    font-size: .9rem;
    font-weight: 600;
    color: var(--text-2);
    border-left: 2px solid var(--line);
    padding: .55rem 0 .55rem .9rem;
    transition: border-color .25s ease, color .25s ease;
}
.av3 .av3-rail a:hover { border-left-color: var(--bronze); color: var(--bronze); }

.av3 .av3-body { display: grid; gap: 3rem; }
.av3 .av3-block { scroll-margin-top: 120px; }
.av3 .av3-block > img {
    display: block;
    width: 100%;
    aspect-ratio: 21 / 9;
    object-fit: cover;
    border-radius: var(--r-lg);
    margin-bottom: 1.5rem;
    box-shadow: var(--shadow);
}
.av3 .av3-text p { font-size: .98rem; line-height: 1.85; color: var(--text-body); }
.av3 .av3-features {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.1rem;
    margin-top: 1.2rem;
}
.av3 .av3-feature { display: flex; gap: .8rem; }
.av3 .av3-feature i { color: var(--bronze); font-size: 1.15rem; flex: none; margin-top: .15rem; }
.av3 .av3-feature b {
    display: block;
    font-family: var(--font-ui);
    font-size: .95rem;
    color: var(--oxford);
    margin-bottom: .15rem;
}
.av3 .av3-feature p { font-size: .88rem; line-height: 1.7; color: var(--text-2); margin: 0; }

@media (max-width: 991.98px) {
    .av1 .av1-row { grid-template-columns: minmax(0, 1fr); gap: 1.5rem; }
    .av1 .av1-row.is-flipped .av1-media { order: 0; }
    .av2-hero { grid-template-columns: minmax(0, 1fr); gap: 1rem; }
    .av3 { grid-template-columns: minmax(0, 1fr); gap: 2rem; }
    .av3 .av3-rail { position: static; display: flex; flex-wrap: wrap; gap: .5rem; }
    .av3 .av3-rail-title { width: 100%; }
    .av3 .av3-rail a { border-left: 0; border: 1px solid var(--line); border-radius: 999px; padding: .45rem 1rem; }
}
@media (max-width: 575.98px) {
    .av2-band .av2-band-inner { padding: 2rem 1.25rem; }
    .av3 .av3-features { grid-template-columns: minmax(0, 1fr); }
    .av3 .av3-block > img { aspect-ratio: 16 / 9; }
}

/* ==========================================================================
   105. About IFERP — organisation page components
   Every rule is qualified by its variant root; see the Do-Not-Repeat note.
   ========================================================================== */

/* ---- Variant 01: editorial with a photo stack ---- */
.org-lead {
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
    gap: 3rem;
    align-items: start;
}
.org-lead .org-copy p {
    font-size: .98rem;
    line-height: 1.9;
    color: var(--text-body);
    margin: 0 0 1.1rem;
}
.org-lead .org-copy p:last-child { margin-bottom: 0; }
.org-lead .org-first::first-letter {
    float: left;
    font-family: var(--font-display);
    font-size: 3.4rem;
    line-height: .82;
    color: var(--bronze);
    padding: .1em .12em 0 0;
}

.org-does {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr);
    gap: 3rem;
    margin-top: 4rem;
    padding-top: 3rem;
    border-top: 1px solid var(--line);
}
.org-does .org-does-head p { font-size: .95rem; line-height: 1.8; color: var(--text-2); margin: 0; }
.org-does .org-ledger { list-style: none; margin: 0; padding: 0; counter-reset: iv1; }
.org-does .org-ledger li {
    counter-increment: iv1;
    display: grid;
    grid-template-columns: 46px minmax(0, 1fr);
    gap: 1.1rem;
    padding: 1.1rem 0;
    border-bottom: 1px solid var(--line);
}
.org-does .org-ledger li:first-child { padding-top: 0; }
.org-does .org-ic {
    width: 46px;
    height: 46px;
    border-radius: 12px;
    display: grid;
    place-items: center;
    background: var(--bronze-soft);
    color: var(--bronze);
    font-size: 1.1rem;
}
.org-does .org-ledger b {
    display: block;
    font-family: var(--font-ui);
    font-size: 1rem;
    color: var(--oxford);
    margin-bottom: .25rem;
}
.org-does .org-ledger b::before {
    content: counter(iv1, decimal-leading-zero) " ";
    font-family: var(--font-num);
    font-size: .78rem;
    color: var(--bronze);
    margin-right: .4rem;
}
.org-does .org-ledger p { font-size: .92rem; line-height: 1.75; color: var(--text-2); margin: 0; }

.org-quote {
    height: 100%;
    background: var(--warm-ivory);
    border: 1px solid var(--line);
    border-left: 3px solid var(--bronze);
    border-radius: var(--r-lg);
    padding: 1.9rem;
    margin: 0;
}
.org-quote > i { font-size: 1.6rem; color: var(--bronze); opacity: .5; }
.org-quote .org-q-label {
    font-family: var(--font-ui);
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--bronze);
    margin: .5rem 0 .5rem;
}
.org-quote .org-q-text {
    font-family: var(--font-display);
    font-size: clamp(1.15rem, 2vw, 1.4rem);
    line-height: 1.6;
    color: var(--oxford);
    margin: 0;
}

/* ---- Variant 02: dark statement page ---- */
.iv2-band {
    position: relative;
    background-image: url("../img/conf-6.JPG");
    background-size: cover;
    background-position: center;
    overflow: hidden;
}
.iv2-band::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(160deg, rgba(29, 37, 45, .96) 0%, rgba(38, 48, 59, .94) 55%, rgba(74, 53, 41, .93) 100%);
}
.iv2-band > .container { position: relative; z-index: 1; }

.iv2-band .iv2-open { text-align: center; max-width: 60rem; margin: 0 auto 3rem; }
.iv2-band .iv2-statement {
    font-family: var(--font-display);
    font-size: clamp(1.5rem, 3.6vw, 2.7rem);
    line-height: 1.4;
    color: var(--ivory);
    margin: .8rem 0 .9rem;
}
.iv2-band .iv2-attrib {
    font-family: var(--font-ui);
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: var(--bronze);
    margin: 0;
}
.iv2-band .iv2-para {
    font-size: .96rem;
    line-height: 1.9;
    color: var(--hero-sub);
    margin: 0 0 1.1rem;
}

.iv2-band .iv2-rail-label {
    font-family: var(--font-ui);
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: var(--bronze);
    margin: 3rem 0 1.1rem;
    padding-bottom: .8rem;
    border-bottom: 1px solid rgba(238, 235, 221, .16);
}
.iv2-band .iv2-rail {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 1.1rem;
}
.iv2-band .iv2-item {
    background: rgba(238, 235, 221, .06);
    border: 1px solid rgba(238, 235, 221, .14);
    border-radius: var(--r);
    padding: 1.3rem 1.15rem;
    transition: background-color .3s ease, transform .3s ease;
}
.iv2-band .iv2-item:hover { background: rgba(238, 235, 221, .11); transform: translateY(-4px); }
.iv2-band .iv2-no {
    font-family: var(--font-num);
    font-size: .76rem;
    font-weight: 700;
    color: var(--bronze);
}
.iv2-band .iv2-item > i { display: block; font-size: 1.3rem; color: var(--bronze); margin: .55rem 0 .7rem; }
.iv2-band .iv2-item b {
    display: block;
    font-family: var(--font-ui);
    font-size: .92rem;
    line-height: 1.35;
    color: var(--ivory);
    margin-bottom: .4rem;
}
.iv2-band .iv2-item p { font-size: .84rem; line-height: 1.7; color: var(--hero-sub); margin: 0; }

.iv2-band .iv2-vision {
    text-align: center;
    max-width: 62rem;
    margin: 3rem auto 0;
    padding: 2rem;
    border: 1px dashed rgba(238, 235, 221, .28);
    border-radius: var(--r-lg);
}
.iv2-band .iv2-v-label {
    display: inline-block;
    font-family: var(--font-ui);
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: var(--bronze);
    margin-bottom: .7rem;
}
.iv2-band .iv2-vision p {
    font-family: var(--font-display);
    font-size: clamp(1.1rem, 2.2vw, 1.5rem);
    line-height: 1.6;
    color: var(--ivory);
    margin: 0;
}

.iv2-band .iv2-links {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: .7rem;
    margin-top: 2.5rem;
}
.iv2-band .iv2-links a {
    display: inline-flex;
    align-items: center;
    gap: .55rem;
    font-family: var(--font-ui);
    font-size: .88rem;
    font-weight: 700;
    color: var(--ivory);
    border: 1px solid rgba(238, 235, 221, .3);
    border-radius: 999px;
    padding: .6rem 1.3rem;
    transition: background-color .25s ease, border-color .25s ease, color .25s ease;
}
.iv2-band .iv2-links a:hover { background: var(--bronze); border-color: var(--bronze); color: #fff; }
.iv2-band .iv2-links a i:first-child { color: var(--bronze); }
.iv2-band .iv2-links a:hover i { color: #fff; }

/* ---- Variant 03: profile card and expandable list ---- */
.iv3 {
    display: grid;
    grid-template-columns: 320px minmax(0, 1fr);
    gap: 2.5rem;
    align-items: start;
}
.iv3 .iv3-card {
    position: sticky;
    top: 110px;
    background: var(--white);
    border: 1px solid var(--line);
    border-top: 3px solid var(--bronze);
    border-radius: var(--r-lg);
    padding: 1.75rem;
    box-shadow: var(--shadow);
}
.iv3 .iv3-logo img {
    display: block;
    height: 46px;
    width: auto;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 10px;
    padding: 5px 9px;
    box-sizing: border-box;
    object-fit: contain;
}
.iv3 .iv3-card h3 {
    font-family: var(--font-display);
    font-size: 1.5rem;
    color: var(--oxford);
    margin: 1rem 0 .2rem;
}
.iv3 .iv3-tag { font-size: .82rem; color: var(--text-small); margin: 0 0 1.3rem; }
.iv3 .iv3-mv {
    padding-top: 1rem;
    margin-top: 1rem;
    border-top: 1px solid var(--line);
}
.iv3 .iv3-mv span {
    display: flex;
    align-items: center;
    gap: .45rem;
    font-family: var(--font-ui);
    font-size: .66rem;
    font-weight: 700;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--bronze);
    margin-bottom: .4rem;
}
.iv3 .iv3-mv p { font-size: .87rem; line-height: 1.7; color: var(--text-2); margin: 0; }
.iv3 .iv3-links { margin-top: 1.3rem; padding-top: 1.2rem; border-top: 1px solid var(--line); }
.iv3 .iv3-links a {
    display: flex;
    align-items: center;
    gap: .6rem;
    font-family: var(--font-ui);
    font-size: .87rem;
    font-weight: 600;
    color: var(--text-2);
    padding: .5rem 0;
    transition: color .25s ease, padding-left .25s ease;
}
.iv3 .iv3-links a:hover { color: var(--bronze); padding-left: .3rem; }
.iv3 .iv3-links a i:first-child { color: var(--bronze); }
.iv3 .iv3-links a i:last-child { margin-left: auto; font-size: .78rem; }

.iv3 .iv3-para { font-size: .96rem; line-height: 1.9; color: var(--text-body); margin: 0 0 1.1rem; }
.iv3 .iv3-sub {
    font-family: var(--font-display);
    font-size: 1.6rem;
    color: var(--oxford);
    margin: 2.5rem 0 .5rem;
}
.iv3 .iv3-lead { font-size: .94rem; line-height: 1.8; color: var(--text-2); margin: 0 0 1.3rem; }
.iv3 .iv3-list .accordion-item {
    background: var(--white);
    border: 1px solid var(--line);
    border-radius: var(--r) !important;
    margin-bottom: .6rem;
    overflow: hidden;
}
.iv3 .iv3-list .accordion-button {
    display: flex;
    align-items: center;
    gap: .85rem;
    font-family: var(--font-ui);
    font-size: .96rem;
    font-weight: 600;
    color: var(--oxford);
    background: var(--white);
    box-shadow: none;
    padding: .95rem 1.25rem;
}
.iv3 .iv3-list .accordion-button:not(.collapsed) { color: var(--bronze); background: var(--warm-ivory); }
.iv3 .iv3-ic {
    flex: none;
    width: 36px;
    height: 36px;
    border-radius: 10px;
    display: grid;
    place-items: center;
    background: var(--bronze-soft);
    color: var(--bronze);
    font-size: .98rem;
}
.iv3 .iv3-list .accordion-body {
    padding: 0 1.25rem 1.15rem 3.95rem;
    font-size: .92rem;
    line-height: 1.8;
    color: var(--text-2);
}

@media (max-width: 991.98px) {
    .org-lead, .org-does { grid-template-columns: minmax(0, 1fr); gap: 2rem; }
    .iv2-band .iv2-rail { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .iv3 { grid-template-columns: minmax(0, 1fr); }
    .iv3 .iv3-card { position: static; }
}
@media (max-width: 575.98px) {
    .iv2-band .iv2-rail { grid-template-columns: minmax(0, 1fr); }
    .iv3 .iv3-list .accordion-body { padding-left: 1.25rem; }
}

/* The activities column was a tall empty gutter beside the ledger; a conference
   photograph fills it and keeps the two columns balanced. */
/* The ratio sits on the figure, not the <img>. aspect-ratio on a replaced
   element competes with its width/height attributes and any inherited height;
   a plain block with an absolutely-filled image cannot be argued with. */
.org-does { align-items: start; }
.org-does .org-does-media {
    position: relative;
    aspect-ratio: 4 / 3;
    margin: 1.6rem 0 0;
    border-radius: var(--r-lg);
    overflow: hidden;
    box-shadow: var(--shadow);
}
.org-does .org-does-media img {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .6s ease;
}
.org-does .org-does-head:hover .org-does-media img { transform: scale(1.04); }

@media (max-width: 991.98px) {
    .org-does .org-does-media { aspect-ratio: 16 / 9; }
}

/* --------------------------------------------------------------------------
   Variant 01 photo collage — a lead photograph with two frames breaking out
   of it. The wrapper holds a fixed ratio so every child can be placed in
   percentages; that keeps the composition identical at any column width.
   -------------------------------------------------------------------------- */
.org-collage {
    position: relative;
    aspect-ratio: 1 / 1.04;
}
.org-collage figure {
    position: absolute;
    margin: 0;
    overflow: hidden;
    border-radius: var(--r-lg);
    background: var(--white);
}
.org-collage figure img {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .6s ease;
}
.org-collage figure:hover img { transform: scale(1.05); }

/* Lead frame, top-left. */
.org-collage .oc-main {
    top: 0;
    left: 0;
    width: 80%;
    height: 56%;
    box-shadow: var(--shadow-md);
}

/* Breaks out over the lead frame's bottom-right corner. */
.org-collage .oc-over {
    right: 0;
    top: 40%;
    width: 54%;
    height: 34%;
    z-index: 2;
    border: 6px solid var(--white);
    box-shadow: 0 18px 44px rgba(38, 48, 59, .18);
}

/* Sits under both, offset the other way. */
.org-collage .oc-low {
    left: 6%;
    bottom: 0;
    width: 66%;
    height: 30%;
    border: 6px solid var(--white);
    box-shadow: var(--shadow);
}

/* Floating label, clear of all three frames. */
.org-collage .oc-badge {
    position: absolute;
    left: 0;
    bottom: 34%;
    z-index: 3;
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    font-family: var(--font-ui);
    font-size: .82rem;
    font-weight: 700;
    color: var(--oxford);
    background: var(--white);
    border-radius: 999px;
    padding: .55rem 1.1rem;
    box-shadow: 0 10px 28px rgba(38, 48, 59, .16);
    white-space: nowrap;
}
.org-collage .oc-badge i { color: var(--bronze); font-size: .95rem; }

/* Below the split the column is full width, so the overlap stops earning its
   keep — three plain frames read better and nothing can collide. */
@media (max-width: 991.98px) {
    .org-collage {
        aspect-ratio: auto;
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: .9rem;
    }
    .org-collage figure {
        position: relative;
        inset: auto;
        width: auto;
        height: auto;
        aspect-ratio: 3 / 2;
        border: 0;
        box-shadow: var(--shadow);
    }
    .org-collage .oc-main { grid-column: 1 / -1; }
    .org-collage .oc-badge { position: static; align-self: start; justify-self: start; }
}
@media (max-width: 575.98px) {
    .org-collage { grid-template-columns: minmax(0, 1fr); }
}

/* ==========================================================================
   106. About the Conference — ported from edufusion_about_page/
   The supplied design's palette (navy / brown / cream) is the site's own
   oxford / bronze / ivory, so it maps onto the existing tokens rather than
   introducing a second set. Everything is scoped under .abt.
   ========================================================================== */
.abt .hl { color: var(--bronze); }

/* Short accent rule under each heading. */
.abt .abt-rule {
    display: block;
    width: 36px;
    height: 3px;
    background: var(--bronze);
    margin: .9rem 0 1.4rem;
}

.abt p { font-size: .98rem; line-height: 1.8; color: var(--text-body); }
.abt .abt-lead { font-weight: 500; color: var(--oxford); }

/* --- Opening figures --- */
.abt .abt-stats {
    display: flex;
    margin-top: 1.6rem;
    padding: 1.1rem 0;
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
}
.abt .abt-stats > div {
    flex: 1;
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr);
    column-gap: .75rem;
    border-right: 1px solid var(--line);
    padding: 0 1.1rem;
}
.abt .abt-stats > div:first-child { padding-left: 0; }
.abt .abt-stats > div:last-child { border-right: 0; }
.abt .abt-stat-icon {
    grid-row: 1 / 3;
    width: 42px;
    height: 42px;
    padding: 9px;
    border-radius: 50%;
    background: var(--bronze-soft);
    color: var(--bronze);
    display: grid;
    place-items: center;
}
.abt .abt-stats b {
    font-family: var(--font-num);
    font-size: clamp(1.35rem, 2.2vw, 1.7rem);
    font-weight: 700;
    color: var(--oxford);
    line-height: 1.15;
    align-self: end;
}
.abt .abt-stats small {
    font-family: var(--font-ui);
    font-size: .84rem;
    font-weight: 600;
    color: var(--text-small);
    line-height: 1.35;
}

/* Inlined icons take the colour of whatever contains them. */
.abt .abt-svg { width: 100%; height: 100%; display: block; }

/* --- Arched photo frame --- */
.abt .abt-frame { position: relative; padding-left: 28px; }
.abt .abt-frame::before {
    content: "";
    position: absolute;
    inset: 14px 0 -14px 5px;
    border: 2px solid var(--bronze);
    border-radius: 50% 0 0 50%;
    z-index: 0;
}
.abt .abt-frame img {
    position: relative;
    z-index: 1;
    display: block;
    width: 100%;
    height: 310px;
    object-fit: cover;
    border-radius: 145px 0 0 145px;
    box-shadow: 0 18px 40px rgba(38, 48, 59, .15);
}
.abt .abt-badge {
    position: absolute;
    z-index: 2;
    left: 8px;
    bottom: 16px;
    width: 104px;
    height: 104px;
    border-radius: 50%;
    background: var(--bronze);
    color: #fff;
    border: 7px solid var(--white);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    font-family: var(--font-ui);
    font-size: .74rem;
    line-height: 1.35;
    box-shadow: 0 8px 18px rgba(0, 0, 0, .18);
}
.abt .abt-badge strong { font-size: 1rem; }

/* --- Key features --- */
.abt .abt-feature {
    height: 100%;
    background: var(--white);
    border: 1px solid var(--line);
    border-top: 3px solid var(--bronze);
    border-radius: var(--r);
    padding: 1.25rem 1rem;
    text-align: center;
    transition: transform .3s ease, box-shadow .3s ease;
}
.abt .abt-feature:hover { transform: translateY(-5px); box-shadow: var(--shadow); }
.abt .abt-feature .abt-svg {
    width: 38px;
    height: 38px;
    margin: 0 auto .8rem;
    color: var(--bronze);
}
.abt .abt-feature h3 {
    font-family: var(--font-ui);
    font-size: .88rem;
    line-height: 1.35;
    color: var(--oxford);
    margin: 0 0 .45rem;
}
.abt .abt-feature p { font-size: .8rem; line-height: 1.6; color: var(--text-2); margin: 0; }

/* --- Conference theme --- */
.abt .abt-theme-img { position: relative; border-radius: var(--r-xl); overflow: hidden; }
.abt .abt-theme-img img {
    display: block;
    width: 100%;
    height: 420px;
    object-fit: cover;
}
.abt .abt-theme-overlay {
    position: absolute;
    inset: 0;
    display: grid;
    align-content: center;
    padding: 2rem;
    background: linear-gradient(160deg, rgba(38, 48, 59, .86) 0%, rgba(74, 53, 41, .78) 100%);
    font-family: var(--font-display);
    font-size: clamp(1.3rem, 2.6vw, 1.9rem);
    line-height: 1.35;
    color: var(--ivory);
    letter-spacing: .01em;
}

/* --- Reasons and objectives --- */
.abt .abt-checks { display: grid; gap: .7rem; }
.abt .abt-checks > div {
    display: grid;
    grid-template-columns: 22px minmax(0, 1fr);
    gap: .7rem;
    align-items: start;
    font-size: .93rem;
    line-height: 1.7;
    color: var(--text-body);
}
.abt .abt-checks .abt-svg,
.abt .abt-obj-list .abt-svg { width: 22px; height: 22px; margin-top: .15rem; color: var(--bronze); }

.abt .abt-obj {
    background: var(--warm-ivory);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    padding: 1.9rem;
}
.abt .abt-obj-list { display: grid; gap: .85rem; }
.abt .abt-obj-list > div {
    display: grid;
    grid-template-columns: 22px minmax(0, 1fr);
    gap: .7rem;
    align-items: start;
}
.abt .abt-obj-list p { font-size: .92rem; line-height: 1.7; color: var(--text-2); margin: 0; }
.abt .abt-obj-list b { font-family: var(--font-ui); color: var(--oxford); }

/* --- Why attend --- */
.abt .abt-why {
    padding: 4rem 0;
    background: linear-gradient(150deg, var(--oxford) 0%, #1d252d 100%);
}
.abt .abt-why .section-title { color: var(--ivory); }
.abt .abt-why p { color: var(--hero-sub); margin-bottom: 1.6rem; }
.abt .abt-cta {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    font-family: var(--font-ui);
    font-size: .92rem;
    font-weight: 700;
    color: #fff;
    background: var(--bronze);
    border-radius: 999px;
    padding: .8rem 1.6rem;
    transition: background-color .25s ease, transform .25s ease;
}
.abt .abt-cta:hover { background: var(--bronze-dark); transform: translateY(-2px); color: #fff; }
.abt .abt-cta i { transition: transform .25s ease; }
.abt .abt-cta:hover i { transform: translateX(3px); }

.abt .abt-why-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1rem;
}
.abt .abt-why-grid > div {
    text-align: center;
    background: rgba(238, 235, 221, .07);
    border: 1px solid rgba(238, 235, 221, .16);
    border-radius: var(--r);
    padding: 1.3rem .9rem;
    transition: background-color .25s ease, transform .25s ease;
}
.abt .abt-why-grid > div:hover { background: rgba(238, 235, 221, .13); transform: translateY(-4px); }
.abt .abt-why-grid .abt-svg {
    width: 34px;
    height: 34px;
    margin: 0 auto .7rem;
    color: var(--bronze);
}
.abt .abt-why-grid b {
    display: block;
    font-family: var(--font-ui);
    font-size: .87rem;
    line-height: 1.35;
    color: var(--ivory);
}

@media (max-width: 991.98px) {
    .abt .abt-frame { padding-left: 0; }
    .abt .abt-frame::before { display: none; }
    .abt .abt-frame img { border-radius: var(--r-xl); height: 280px; }
    .abt .abt-badge { left: 16px; }
    .abt .abt-theme-img img { height: 300px; }
    .abt .abt-obj { padding: 1.4rem; }
}
@media (max-width: 575.98px) {
    .abt .abt-stats { flex-wrap: wrap; gap: 1rem 0; }
    .abt .abt-stats > div { flex: 0 0 50%; border-right: 0; padding-left: 0; }
    .abt .abt-why-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .abt .abt-badge { width: 84px; height: 84px; font-size: .68rem; }
}

/* --------------------------------------------------------------------------
   About page revisions: centred rule, animated figures, and Purpose & Vision
   as a numbered timeline instead of five identical rows.
   -------------------------------------------------------------------------- */
.abt .abt-rule.is-centred { margin-inline: auto; }

/* The count animates from 0, so reserve its width or the row jumps. */
.abt .abt-stats b .count { font-variant-numeric: tabular-nums; }

/* Purpose & Vision — numbered timeline */
.abt .abt-aims {
    list-style: none;
    margin: 0;
    padding: 0;
    position: relative;
}
.abt .abt-aims::before {
    content: "";
    position: absolute;
    left: 21px;
    top: .6rem;
    bottom: .6rem;
    width: 2px;
    background: linear-gradient(var(--bronze), rgba(154, 105, 78, .15));
}
.abt .abt-aims li {
    position: relative;
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr);
    column-gap: 1.4rem;
    padding: 0 0 1.9rem;
}
.abt .abt-aims li:last-child { padding-bottom: 0; }

.abt .abt-aim-icon {
    position: relative;
    z-index: 1;
    grid-row: 1 / 3;
    width: 44px;
    height: 44px;
    padding: 10px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: var(--white);
    border: 2px solid var(--bronze);
    color: var(--bronze);
    transition: background-color .3s ease, color .3s ease;
}
.abt .abt-aims li:hover .abt-aim-icon { background: var(--bronze); color: #fff; }

.abt .abt-aim-no {
    grid-column: 2;
    font-family: var(--font-num);
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .12em;
    color: var(--bronze);
    margin-bottom: .2rem;
}
.abt .abt-aim-body { grid-column: 2; }
.abt .abt-aim-body b {
    display: block;
    font-family: var(--font-ui);
    font-size: 1.05rem;
    color: var(--oxford);
    margin-bottom: .3rem;
}
.abt .abt-aim-body p { font-size: .92rem; line-height: 1.75; color: var(--text-2); margin: 0; }

@media (max-width: 575.98px) {
    .abt .abt-aims::before { display: none; }
    .abt .abt-aims li { grid-template-columns: 38px minmax(0, 1fr); column-gap: 1rem; }
    .abt .abt-aim-icon { width: 38px; height: 38px; padding: 8px; }
}

/* The reasons column runs short beside the seven objectives; a conference
   photograph fills the gap. Ratio on the figure, not the <img> — see bug-012. */
.abt .abt-reasons-media {
    position: relative;
    aspect-ratio: 4 / 3;
    margin: 1.8rem 0 0;
    border-radius: var(--r-lg);
    overflow: hidden;
    box-shadow: var(--shadow);
}
.abt .abt-reasons-media img {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .6s ease;
}
.abt .abt-reasons-media:hover img { transform: scale(1.04); }

@media (max-width: 991.98px) {
    .abt .abt-reasons-media { aspect-ratio: 16 / 9; }
}

/* The figures now sit below both columns at container width, so they need
   their own top spacing rather than the tight margin they had in the column. */
.abt .abt-stats {
    margin-top: 3rem;
    padding-top: 1.6rem;
}

/* ==========================================================================
   107. History — past editions and archive gallery
   ========================================================================== */
.hist-shelf {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
    gap: 1.5rem;
}
.hist-shelf .hist-card {
    display: block;
    color: inherit;
    transition: transform .3s ease;
}
.hist-shelf a.hist-card:hover { transform: translateY(-6px); color: inherit; }

.hist-shelf .hc-cover {
    position: relative;
    aspect-ratio: 3 / 4;
    margin: 0 0 .9rem;
    border-radius: var(--r);
    overflow: hidden;
    background: var(--warm-ivory);
    border: 1px solid var(--line);
    box-shadow: var(--shadow-sm);
    transition: box-shadow .3s ease, border-color .3s ease;
}
.hist-shelf a.hist-card:hover .hc-cover { box-shadow: var(--shadow-md); border-color: var(--bronze); }
.hist-shelf .hc-cover img {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.hist-shelf .hc-year {
    position: absolute;
    left: .5rem;
    bottom: .5rem;
    z-index: 2;
    font-family: var(--font-num);
    font-size: .74rem;
    font-weight: 700;
    letter-spacing: .04em;
    color: #fff;
    background: rgba(38, 48, 59, .82);
    border-radius: 999px;
    padding: .22rem .7rem;
}

/* The current edition has no cover yet, so it gets a marker instead. */
.hist-shelf .is-current .hc-cover {
    display: grid;
    place-items: center;
    background: var(--bronze-soft);
    border: 2px dashed var(--bronze);
}
.hist-shelf .hc-next {
    display: grid;
    justify-items: center;
    gap: .4rem;
    font-family: var(--font-ui);
    font-size: .84rem;
    font-weight: 700;
    color: var(--bronze);
    text-align: center;
    padding: 0 .5rem;
}
.hist-shelf .hc-next i { font-size: 1.5rem; }
.hist-shelf .is-current .hc-year { background: var(--bronze); }

.hist-shelf .hc-body b {
    display: block;
    font-family: var(--font-ui);
    font-size: .96rem;
    color: var(--oxford);
    margin-bottom: .15rem;
}
.hist-shelf .hc-go {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    font-family: var(--font-ui);
    font-size: .78rem;
    font-weight: 600;
    color: var(--text-small);
    transition: color .25s ease;
}
.hist-shelf a.hist-card:hover .hc-go { color: var(--bronze); }
.hist-shelf .is-current .hc-go { color: var(--bronze); }

.hist-note {
    font-size: .88rem;
    font-style: italic;
    color: var(--text-small);
    text-align: center;
    margin: 2.5rem 0 0;
}
.hist-note i { color: var(--bronze); font-style: normal; }

/* Archive gallery */
.hist-gallery {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1rem;
}
.hist-gallery .hg-shot {
    position: relative;
    display: block;
    aspect-ratio: 4 / 3;
    padding: 0;
    border: 0;
    border-radius: var(--r-lg);
    overflow: hidden;
    cursor: zoom-in;
    background: var(--oxford);
}
.hist-gallery .hg-shot img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .5s ease, opacity .3s ease;
}
.hist-gallery .hg-shot:hover img { transform: scale(1.06); opacity: .8; }
.hist-gallery .hg-zoom {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    color: var(--ivory);
    font-size: 1.3rem;
    opacity: 0;
    transition: opacity .3s ease;
}
.hist-gallery .hg-shot:hover .hg-zoom,
.hist-gallery .hg-shot:focus-visible .hg-zoom { opacity: 1; }
.hist-gallery .hg-shot:focus-visible { outline: 2px solid var(--bronze); outline-offset: 3px; }

@media (max-width: 767.98px) {
    .hist-shelf { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.1rem; }
    .hist-gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ==========================================================================
   108. Host destination spotlight (homepage venue) + hub photograph
   ========================================================================== */
.venue-spotlight {
    position: relative;
    overflow: hidden;
    padding-bottom: 0;
    background: var(--warm-ivory);
}

/* Five landmark photographs as vertical panels, washed back so the copy on
   top stays readable. Paths are set inline, resolved against the document. */
.venue-spotlight .vs-backdrop {
    position: absolute;
    inset: 0 0 190px;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    pointer-events: none;
}
/* One wash, not two: the panels stay at full opacity and the scrim alone
   decides how much shows through. Fading both made them invisible. */
.venue-spotlight .vs-backdrop span {
    background-size: cover;
    background-position: center;
}
.venue-spotlight .vs-backdrop::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgb(248 246 241 / 0%) 0%, rgb(248 246 241 / 94%) 32%, rgba(248, 246, 241, .93) 62%, #f8f6f1 100%);
}
.venue-spotlight > .container { position: relative; z-index: 1; }

.venue-spotlight .vs-city {
    font-size: clamp(2rem, 5vw, 3.4rem);
    line-height: 1.1;
    margin-bottom: 1.2rem;
}
.venue-spotlight .vs-copy {
    font-size: .98rem;
    line-height: 1.85;
    color: var(--text-body);
    max-width: 68ch;
    margin: 0 0 1.8rem;
}

.venue-spotlight .vs-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1rem;
}
.venue-spotlight .vs-pill {
    display: inline-flex;
    align-items: center;
    gap: .8rem;
    background: var(--bronze-soft);
    border: 1px solid rgba(154, 105, 78, .28);
    border-radius: var(--r);
    padding: .8rem 1.2rem;
}
.venue-spotlight .vs-pill > i { color: var(--bronze); font-size: 1.25rem; flex: none; }
.venue-spotlight .vs-pill span {
    font-size: .82rem;
    line-height: 1.5;
    color: var(--text-2);
}
.venue-spotlight .vs-pill b {
    display: block;
    font-family: var(--font-ui);
    font-size: 1rem;
    letter-spacing: .02em;
    text-transform: uppercase;
    color: var(--bronze-dark);
}

/* Venue photograph and its map link */
.venue-spotlight .vs-shot {
    position: relative;
    aspect-ratio: 4 / 3;
    margin: 0;
    border-radius: var(--r-xl);
    overflow: hidden;
    box-shadow: var(--shadow-md);
}
.venue-spotlight .vs-shot img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .6s ease;
}
.venue-spotlight .vs-shot:hover img { transform: scale(1.04); }

.venue-spotlight .vs-maps {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    margin-top: -1.4rem;
    margin-left: 1.4rem;
    position: relative;
    z-index: 2;
    font-family: var(--font-ui);
    font-size: .84rem;
    font-weight: 700;
    color: var(--oxford);
    background: var(--white);
    border-radius: 999px;
    padding: .65rem 1.25rem;
    box-shadow: var(--shadow);
    transition: background-color .25s ease, color .25s ease;
}
.venue-spotlight .vs-maps:hover { background: var(--bronze); color: #fff; }
.venue-spotlight .vs-maps i { color: var(--bronze); }
.venue-spotlight .vs-maps:hover i { color: #fff; }

/* Destination strip along the foot of the section */
.venue-spotlight .vs-strip {
    /* position: relative; */
    z-index: 1;
    display: grid;
    /* grid-template-columns: repeat(5, 1fr); */
    /* margin-top: 3.5rem; */
}
.venue-spotlight .vs-tile {
    position: relative;
    display: block;
    aspect-ratio: 5 / 4;
    padding: 0;
    border: 0;
    overflow: hidden;
    cursor: zoom-in;
    background: var(--oxford);
}
.venue-spotlight .vs-tile img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .5s ease, opacity .3s ease;
}
.venue-spotlight .vs-tile:hover img { transform: scale(1.07); opacity: .82; }
.venue-spotlight .vs-tile:focus-visible { outline: 2px solid var(--bronze); outline-offset: -3px; }

/* --- Hub photograph, in place of the world map --- */
.hub .hub-shot {
    position: relative;
    aspect-ratio: 4 / 3;
    margin: 0;
    border-radius: var(--r-xl);
    overflow: hidden;
    box-shadow: var(--shadow-md);
}
.hub .hub-shot img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

@media (max-width: 991.98px) {
    .venue-spotlight .vs-backdrop { inset: 0 0 120px; }
    .venue-spotlight .vs-strip { grid-template-columns: repeat(3, 1fr); }
    .venue-spotlight .vs-strip .vs-tile:nth-child(n+4) { display: none; }
    .venue-spotlight .vs-maps { margin-left: 0; }
}
@media (max-width: 575.98px) {
    .venue-spotlight .vs-strip { grid-template-columns: repeat(2, 1fr); }
    .venue-spotlight .vs-strip .vs-tile:nth-child(n+3) { display: none; }
    .venue-spotlight .vs-pill { width: 100%; }
    .venue-spotlight .vs-actions .btn { width: 100%; }
}

/* --------------------------------------------------------------------------
   Destination strip and SDG row as continuous marquees. Both duplicate their
   items, so translating by -50% lands exactly on the second copy and loops
   without a seam. Hover pauses; reduced motion stops it and lets the reader
   scroll instead.
   -------------------------------------------------------------------------- */
.venue-spotlight .vs-strip {
    /* display: block; */
    /* overflow: hidden; */
}
.venue-spotlight .vs-marquee {
    display: flex;
    width: max-content;
    animation: marquee 46s linear infinite;
}
.venue-spotlight .vs-strip:hover .vs-marquee,
.venue-spotlight .vs-strip:focus-within .vs-marquee { animation-play-state: paused; }
.venue-spotlight .vs-marquee .vs-tile {
    flex: 0 0 20vw;
    max-width: 320px;
}

.sdg-used { overflow: hidden; }
.sdg-used .sdg-marquee {
    display: flex;
    gap: .45rem;
    width: max-content;
    animation: marquee 38s linear infinite;
}
.sdg-used:hover .sdg-marquee { animation-play-state: paused; }
.sdg-used .sdg-marquee img { flex: none; }

@media (prefers-reduced-motion: reduce) {
    .venue-spotlight .vs-marquee,
    .sdg-used .sdg-marquee { animation: none; }
    .venue-spotlight .vs-strip,
    .sdg-used { overflow-x: auto; }
}

@media (max-width: 991.98px) {
    /* The marquee shows everything in turn, so the old tile-hiding rules go. */
    .venue-spotlight .vs-strip .vs-tile:nth-child(n+4) { display: block; }
    .venue-spotlight .vs-marquee .vs-tile { flex: 0 0 42vw; }
}
@media (max-width: 575.98px) {
    .venue-spotlight .vs-strip .vs-tile:nth-child(n+3) { display: block; }
    .venue-spotlight .vs-marquee .vs-tile { flex: 0 0 62vw; }
}

/* ==========================================================================
   109. Banner variant 05 — floating header over a dark hero (review page)
   ========================================================================== */
.bv5 {
    position: relative;
    background: var(--oxford-dark);
    padding-top: 1.5rem;
}

/* --- The floating navigation pill --- */
.bv5 .bv5-nav {
    position: relative;
    z-index: 3;
    display: flex;
    align-items: center;
    gap: 1.5rem;
    background: var(--white);
    border-radius: 999px;
    padding: .6rem .7rem .6rem 1.1rem;
    box-shadow: 0 14px 40px rgba(0, 0, 0, .28);
}
.bv5 .bv5-brand img {
    display: block;
    height: 38px;
    width: auto;
    object-fit: contain;
}
.bv5 .bv5-links {
    display: flex;
    align-items: center;
    gap: 1.35rem;
    list-style: none;
    margin: 0 auto;
    padding: 0;
}
.bv5 .bv5-links a {
    font-family: var(--font-ui);
    font-size: .82rem;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--text-2);
    white-space: nowrap;
    transition: color .25s ease;
}
.bv5 .bv5-links a:hover,
.bv5 .bv5-links a.is-current { color: var(--bronze); }
.bv5 .bv5-cta {
    flex: none;
    font-family: var(--font-ui);
    font-size: .86rem;
    font-weight: 700;
    color: #fff;
    background: var(--bronze);
    border-radius: 999px;
    padding: .7rem 1.6rem;
    transition: background-color .25s ease;
}
.bv5 .bv5-cta:hover { background: var(--bronze-dark); color: #fff; }

/* --- The hero itself --- */
.bv5 .bv5-stage {
    position: relative;
    margin-top: -2.6rem;
    padding: 7rem 0 4.5rem;
    overflow: hidden;
}
.bv5 .bv5-stage::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 78% 45%, rgba(154, 105, 78, .3) 0, transparent 55%),
        linear-gradient(100deg, var(--oxford-dark) 0%, var(--oxford) 55%, #2f3b47 100%);
}
/* A faint grid, as in the reference. */
.bv5 .bv5-stage::after {
    content: "";
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(238, 235, 221, .045) 1px, transparent 1px),
        linear-gradient(90deg, rgba(238, 235, 221, .045) 1px, transparent 1px);
    background-size: 64px 64px;
    pointer-events: none;
}
.bv5 .bv5-stage > .container { position: relative; z-index: 2; }

/* Artwork bleeding off the right edge. */
.bv5 .bv5-art {
    position: absolute;
    right: -4%;
    top: 50%;
    transform: translateY(-50%);
    width: 52%;
    max-width: 760px;
    z-index: 1;
    opacity: .9;
    mix-blend-mode: screen;
    pointer-events: none;
}

.bv5 .bv5-body { max-width: 40rem; }
.bv5 .bv5-eyebrow {
    font-family: var(--font-ui);
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: var(--bronze);
    margin: 0 0 .9rem;
}
.bv5 .bv5-title {
    font-family: var(--font-display);
    font-size: clamp(2.4rem, 6vw, 4.2rem);
    font-weight: 700;
    line-height: 1.05;
    color: var(--ivory);
    margin: 0 0 1.2rem;
}
.bv5 .bv5-title span { color: var(--bronze); }
.bv5 .bv5-lead {
    font-size: 1rem;
    line-height: 1.8;
    color: var(--hero-sub);
    margin: 0 0 2rem;
    max-width: 34rem;
}

/* --- Fact cards --- */
.bv5 .bv5-facts {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    gap: .85rem;
    margin-bottom: 2rem;
}
.bv5 .bv5-fact {
    background: rgba(238, 235, 221, .06);
    border: 1px solid rgba(238, 235, 221, .2);
    border-radius: var(--r);
    padding: 1rem 1.2rem;
    min-width: 150px;
}
.bv5 .bv5-fact i { display: block; color: var(--bronze); font-size: 1.15rem; margin-bottom: .5rem; }
.bv5 .bv5-fact span {
    display: block;
    font-family: var(--font-ui);
    font-size: .66rem;
    font-weight: 700;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--bronze);
    margin-bottom: .25rem;
}
.bv5 .bv5-fact b {
    font-family: var(--font-ui);
    font-size: .95rem;
    line-height: 1.4;
    color: var(--ivory);
}
.bv5 .bv5-fact.is-theme {
    flex: 1 1 22rem;
    background: var(--white);
    border-color: var(--white);
}
.bv5 .bv5-fact.is-theme span { color: var(--bronze); }
.bv5 .bv5-fact.is-theme b { color: var(--oxford); font-weight: 600; }

/* --- Calls to action --- */
.bv5 .bv5-actions { display: flex; flex-wrap: wrap; gap: .8rem; }
.bv5 .bv5-btn {
    display: inline-flex;
    align-items: center;
    gap: .7rem;
    font-family: var(--font-ui);
    font-size: .92rem;
    font-weight: 700;
    color: #fff;
    background: var(--bronze);
    border: 1px solid var(--bronze);
    border-radius: 999px;
    padding: .8rem 1rem .8rem 1.6rem;
    transition: background-color .25s ease, transform .25s ease;
}
.bv5 .bv5-btn i {
    display: grid;
    place-items: center;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .22);
    font-size: .8rem;
    transition: transform .25s ease;
}
.bv5 .bv5-btn:hover { background: var(--bronze-dark); color: #fff; transform: translateY(-2px); }
.bv5 .bv5-btn:hover i { transform: translateX(2px); }
.bv5 .bv5-btn.is-ghost {
    background: transparent;
    border-color: rgba(238, 235, 221, .38);
    color: var(--ivory);
}
.bv5 .bv5-btn.is-ghost i { background: rgba(238, 235, 221, .16); }
.bv5 .bv5-btn.is-ghost:hover { background: rgba(238, 235, 221, .12); color: var(--ivory); }

@media (max-width: 1199.98px) {
    .bv5 .bv5-links { gap: 1rem; }
    .bv5 .bv5-links a { font-size: .76rem; }
}
@media (max-width: 991.98px) {
    .bv5 .bv5-links { display: none; }
    .bv5 .bv5-nav { justify-content: space-between; }
    .bv5 .bv5-art { width: 78%; right: -14%; opacity: .35; }
    .bv5 .bv5-body { max-width: none; }
}
@media (max-width: 575.98px) {
    .bv5 .bv5-stage { padding: 5rem 0 3rem; }
    .bv5 .bv5-fact { min-width: 0; flex: 1 1 100%; }
    .bv5 .bv5-btn { width: 100%; justify-content: space-between; }
}

/* ==========================================================================
   110. Banner variant 06 — supplied key visual with a live text panel
   The artwork carries no wording, so every figure, date and link below is
   real text over it rather than pixels.
   ========================================================================== */
.bv6 {
    position: relative;
    isolation: isolate;
    min-height: 640px;
    display: flex;
    align-items: center;
    overflow: hidden;
    background: var(--paper, #fffdf9);
}
.bv6 .bv6-art {
    position: absolute;
    inset: 0;
    z-index: -2;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 65% center;
}
/* Cream wash over the left two-thirds so the panel stays readable while the
   skyline and globe keep their colour on the right. */
.bv6 .bv6-veil {
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(100deg,
        rgba(255, 253, 249, .98) 0%,
        rgba(255, 253, 249, .96) 44%,
        rgba(255, 253, 249, .74) 56%,
        rgba(255, 253, 249, .18) 66%,
        rgba(255, 253, 249, 0) 74%);
}
.bv6 .bv6-inner {
    position: relative;
    width: 100%;
    max-width: 1320px;
    margin-inline: auto;
    padding: 3rem 1.5rem;
}
.bv6 .bv6-panel { max-width: 54rem; }

/* --- Logo lockup --- */
/* Two marks either side of a hairline, as in the supplied artwork. */
.bv6 .bv6-logos { display: flex; align-items: center; gap: 1.1rem; margin-bottom: 1.4rem; }
.bv6 .bv6-logos img { display: block; width: auto; object-fit: contain; }
.bv6 .bv6-logo-a { height: 62px; }
.bv6 .bv6-logo-b { height: 46px; }
.bv6 .bv6-div {
    width: 1px;
    align-self: stretch;
    min-height: 46px;
    background: var(--line);
}

.bv6 .bv6-pill {
    display: inline-block;
    font-family: var(--font-ui);
    font-size: .92rem;
    font-weight: 700;
    color: #fff;
    background: var(--bronze);
    border-radius: 999px;
    padding: .45rem 1.4rem;
    margin: 0 0 1.1rem;
}

/* --- Title --- */
.bv6 .bv6-title { margin: 0 0 .9rem; font-family: var(--font-ui); }
.bv6 .bv6-title > span { display: block; }
.bv6 .bv6-t1 {
    font-size: clamp(1.1rem, 2.2vw, 1.75rem);
    font-weight: 700;
    letter-spacing: .01em;
    text-transform: uppercase;
    color: var(--oxford);
}
.bv6 .bv6-t2 {
    font-size: clamp(1.45rem, 3.1vw, 2.55rem);
    font-weight: 800;
    line-height: 1.12;
    text-transform: uppercase;
    color: var(--bronze);
    margin: .2rem 0;
}
/* Inline, so it sits on the same line as the word it follows. */
.bv6 .bv6-t3 {
    display: inline;
    font-style: normal;
    font-size: clamp(1.2rem, 2.4vw, 1.9rem);
    font-weight: 800;
    text-transform: uppercase;
    color: var(--oxford);
    white-space: nowrap;
}
.bv6 .bv6-title sup { font-size: .55em; }
.bv6 .bv6-theme {
    font-size: clamp(.95rem, 1.5vw, 1.15rem);
    color: var(--text-body);
    margin: 0 0 1.5rem;
}

/* --- Fact cards --- */
.bv6 .bv6-cards {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    gap: .9rem;
    margin-bottom: 1.6rem;
}
.bv6 .bv6-card {
    background: rgba(255, 255, 255, .82);
    border: 1px solid var(--line);
    border-radius: var(--r);
    padding: 1rem 1.15rem;
    backdrop-filter: blur(4px);
    flex: 0 1 auto;
}
.bv6 .bv6-cards > .bv6-card:nth-child(1) { flex: 0 0 10.5rem; }
.bv6 .bv6-cards > .bv6-card:nth-child(1) p { white-space: nowrap; }
.bv6 .bv6-cards > .bv6-card:nth-child(2) { flex: 0 1 17.5rem; }
.bv6 .bv6-card.is-wide { flex: 1 1 16rem; }
.bv6 .bv6-ci {
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    border-radius: 12px;
    background: var(--bronze);
    color: #fff;
    font-size: 1.1rem;
    margin-bottom: .7rem;
}
.bv6 .bv6-card b {
    display: block;
    font-family: var(--font-ui);
    font-size: .84rem;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--oxford);
    margin-bottom: .25rem;
}
.bv6 .bv6-card p { font-size: .9rem; line-height: 1.55; color: var(--text-body); margin: 0; }
.bv6 .bv6-card .bv6-cn {
    font-size: .82rem;
    color: var(--text-2);
    margin-top: .5rem;
    padding-top: .5rem;
    border-top: 1px solid var(--line);
}
.bv6 .bv6-card a {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    font-family: var(--font-ui);
    font-size: .82rem;
    font-weight: 600;
    color: var(--bronze);
    margin-top: .5rem;
}
.bv6 .bv6-card a:hover { text-decoration: underline; }

/* --- Calls to action --- */
.bv6 .bv6-cta { display: flex; flex-wrap: wrap; gap: 1.5rem; margin-bottom: 1.8rem; }
.bv6 .bv6-cta > div { text-align: center; }
.bv6 .bv6-btn {
    display: inline-flex;
    align-items: center;
    gap: .8rem;
    font-family: var(--font-ui);
    font-size: 1.02rem;
    font-weight: 700;
    color: #fff;
    background: var(--bronze);
    border-radius: 999px;
    padding: .85rem 2rem;
    transition: background-color .25s ease, transform .25s ease;
}
.bv6 .bv6-btn:hover { background: var(--bronze-dark); color: #fff; transform: translateY(-2px); }
.bv6 .bv6-btn.is-dark { background: var(--oxford); }
.bv6 .bv6-btn.is-dark:hover { background: var(--oxford-dark); }
.bv6 .bv6-cta span {
    display: block;
    font-family: var(--font-ui);
    font-size: .84rem;
    color: var(--text-2);
    margin-top: .5rem;
}

/* --- Figures along the foot --- */
.bv6 .bv6-stats {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem 0;
    padding-top: 1.2rem;
    border-top: 1px solid var(--line);
}
.bv6 .bv6-stats > div {
    display: flex;
    align-items: flex-start;
    gap: .6rem;
    padding: 0 1.4rem;
    border-right: 1px solid var(--line);
}
.bv6 .bv6-stats > div:first-child { padding-left: 0; }
.bv6 .bv6-stats > div:last-child { border-right: 0; }
.bv6 .bv6-stats i { color: var(--bronze); font-size: 1.3rem; margin-top: .1rem; }
.bv6 .bv6-stats b {
    display: block;
    font-family: var(--font-num);
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--oxford);
    line-height: 1.2;
}
.bv6 .bv6-stats span { font-size: .8rem; color: var(--text-2); }
.bv6 .bv6-stats em {
    display: block;
    font-size: .74rem;
    font-style: normal;
    color: var(--text-small);
}

/* --- Handwritten accents over the artwork --- */
.bv6 .bv6-script {
    position: absolute;
    z-index: 1;
    font-family: var(--font-display);
    font-style: italic;
    font-size: clamp(.95rem, 1.5vw, 1.35rem);
    line-height: 1.35;
    color: var(--oxford);
    margin: 0;
    text-shadow: 0 1px 10px rgba(255, 255, 255, .6);
}
.bv6 .bv6-script-a { left: 58%; top: 12%; }
.bv6 .bv6-script-b { right: 3%; top: 6%; color: var(--bronze); text-align: right; }

/* --- Values over the lower-right corner --- */
.bv6 .bv6-values {
    position: absolute;
    right: 2%;
    bottom: 5%;
    z-index: 1;
    display: flex;
    gap: 1.6rem;
    list-style: none;
    margin: 0;
    padding: 0;
}
.bv6 .bv6-values li {
    display: grid;
    justify-items: center;
    gap: .35rem;
    text-align: center;
    font-family: var(--font-ui);
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    line-height: 1.3;
    color: var(--ivory);
    text-shadow: 0 1px 8px rgba(0, 0, 0, .5);
}
.bv6 .bv6-values i { font-size: 1.4rem; }

@media (max-width: 1199.98px) {
    .bv6 .bv6-script, .bv6 .bv6-values { display: none; }
    .bv6 .bv6-veil {
        background: linear-gradient(100deg,
            rgba(255, 253, 249, .98) 0%,
            rgba(255, 253, 249, .95) 55%,
            rgba(255, 253, 249, .55) 78%,
            rgba(255, 253, 249, .2) 100%);
    }
}
@media (max-width: 767.98px) {
    .bv6 { min-height: 0; }
    .bv6 .bv6-art { object-position: 72% center; }
    .bv6 .bv6-veil { background: rgba(255, 253, 249, .95); }
    .bv6 .bv6-cards .bv6-card { flex: 1 1 100%; min-width: 0; }
    .bv6 .bv6-cta { gap: 1rem; }
    .bv6 .bv6-cta > div, .bv6 .bv6-btn { width: 100%; }
    .bv6 .bv6-btn { justify-content: center; }
    .bv6 .bv6-stats > div {
        flex: 1 1 50%;
        padding: 0 .8rem;
        border-right: 0;
    }
}

/* ==========================================================================
   111. Homepage key-visual banner (from the supplied package)
   Ported from edufusion_2027_banner_code_with_background_and_globe/. The
   package's own class names (.banner, .content, .copy, .btn, .icon, .theme,
   .stats) all mean something else on this site, so every one is scoped under
   .hero-kv and renamed. Its hard-coded colours map onto the site's tokens.
   ========================================================================== */
.hero-kv {
    position: relative;
    width: 100%;
    height: 750px;
    overflow: hidden;
    background: var(--ivory);
}
.hero-kv .hkv-bg {
    position: absolute;
    inset: 0;
    z-index: 1;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}
.hero-kv .hkv-shade {
    position: absolute;
    inset: 0;
    z-index: 4;
    background: linear-gradient(90deg,
        rgba(249, 245, 237, .96) 0%,
        rgba(249, 245, 237, .86) 39%,
        rgba(249, 245, 237, .15) 64%,
        rgba(249, 245, 237, 0) 100%);
}
.hero-kv .hkv-content {
    position: relative;
    z-index: 6;
    height: 100%;
    /* padding: 40px 5.2%; */
}

.hero-kv .hkv-pill {
    display: inline-block;
    background: var(--bronze);
    color: #fff;
    border-radius: 28px;
    padding: 7px 24px;
    font-family: var(--font-ui);
    font-size: 1.25rem;
    font-weight: 700;
    margin: 0 0 13px;
    text-transform: uppercase;
}

.hero-kv .hkv-copy { width: 55%; }
.hero-kv .hkv-copy h1 {
    margin: 0;
    font-family: var(--font-ui);
    font-size: 34px;
    line-height: 42px;
    font-weight: 900;
    letter-spacing: -0.5px;
    text-transform: capitalize;
    color: var(--oxford);
}
.hero-kv .hkv-copy h1 span { color: var(--bronze); }
.hero-kv .hkv-copy h1 b { font-size: .7em; color: var(--oxford); white-space: nowrap; }
.hero-kv .hkv-copy h1 sup { font-size: .45em; }
.hero-kv .hkv-theme {
    font-size: 1.1rem;
    font-weight: 500;
    color: var(--oxford);
    margin: 10px 0 16px;
}

/* --- Fact cards --- */
.hero-kv .hkv-cards {
    display: grid;
    grid-template-columns: 165px 1.45fr 1.55fr;
    gap: 12px;
}
.hero-kv .hkv-card {
    min-height: 118px;
    display: flex;
    gap: 11px;
    padding: 13px;
    border: 1px solid rgba(38, 48, 59, .32);
    border-radius: 15px;
    background: rgba(255, 255, 255, .82);
    backdrop-filter: blur(6px);
}
.hero-kv .hkv-card > .hkv-icon {
    width: 42px;
    height: 42px;
    min-width: 42px;
    border-radius: 50%;
    background: var(--bronze);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.19rem;
}
.hero-kv .hkv-card small {
    display: block;
    font-family: var(--font-ui);
    font-size: .8rem;
    font-weight: 800;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--oxford);
}
.hero-kv .hkv-card strong {
    display: block;
    font-family: var(--font-ui);
    font-size: 13px;
    font-weight: 700;
    line-height: 1.35;
    margin-top: 5px;
    color: var(--oxford);
}
.hero-kv .hkv-card > div span {
    display: block;
    font-size: 12px;
    line-height: 1.45;
    color: var(--text-body);
}
.hero-kv .hkv-card a {
    display: block;
    font-family: var(--font-ui);
    font-size: .8rem;
    font-weight: 700;
    color: var(--bronze-dark);
    margin-top: 7px;
}
.hero-kv .hkv-card a:hover { text-decoration: underline; }

/* --- Buttons, with their captions sitting beneath --- */
.hero-kv .hkv-buttons {display: flex;gap: 18px;margin-top: 27px;}
.hero-kv .hkv-btn {
    position: relative;
    min-width: 245px;
    height: 47px;
    border-radius: 26px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 25px;text-transform: uppercase;
    font-family: var(--font-ui);
    font-size: 1rem;
    font-weight: 700;
    color: #fff;
    transition: transform .25s ease, filter .25s ease;
}
.hero-kv .hkv-btn:hover { color: #fff; transform: translateY(-2px); filter: brightness(1.08); }
.hero-kv .hkv-btn.is-presenter { background: var(--bronze); }
.hero-kv .hkv-btn.is-listener  { background: var(--oxford); }

/* --- Figures --- */
.hero-kv .hkv-stats {
    position: absolute;
    left: 5.2%;
    bottom: 15px;
    z-index: 8;
    display: flex;
}
.hero-kv .hkv-stats > div {
    min-width: 150px;
    padding: 0 16px;
    border-right: 1px solid rgba(38, 48, 59, .3);
    display: grid;
    grid-template-columns: 32px 1fr;
    column-gap: 7px;
    align-items: center;
}
.hero-kv .hkv-stats > div:last-child { border-right: 0; }
.hero-kv .hkv-stats i { grid-row: 1 / 3; color: var(--bronze); font-size: 1.7rem; }
.hero-kv .hkv-stats b { font-family: var(--font-num); font-size: 1.25rem; font-weight: 700; color: var(--oxford); }
.hero-kv .hkv-stats span {
    font-family: var(--font-ui);
    font-size: .74rem;
    font-weight: 600;
    color: var(--text-body);
    white-space: nowrap;
}

/* --- Values, over the artwork's corner --- */
.hero-kv .hkv-impact {
    position: absolute;
    right: 0;
    bottom: 0;
    z-index: 8;
    display: flex;
    gap: 20px;
    padding: 14px 18px 13px 23px;
    border-radius: 80px 0 0 0;
    background: rgba(37, 43, 48, .84);
    color: #fff;
}
.hero-kv .hkv-impact div {
    min-width: 78px;
    text-align: center;
    font-family: var(--font-ui);
    font-size: .66rem;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
}
.hero-kv .hkv-impact i { display: block; font-size: 1.44rem; margin-bottom: 3px; color: var(--ivory); }
.hero-kv .hkv-impact b { font-size: .66rem; font-weight: 800; }

@media (max-width: 1050px) {
    .hero-kv .hkv-copy { width: 62%; }
    .hero-kv .hkv-copy h1 { font-size: 1.81rem; }
    .hero-kv .hkv-cards { grid-template-columns: 1fr 1fr; }
    .hero-kv .hkv-card.is-hybrid { grid-column: 1 / -1; }
    .hero-kv .hkv-impact { display: none; }
}
@media (max-width: 767.98px) {
    .hero-kv { height: auto; min-height: 760px; }
    .hero-kv .hkv-shade {
        background: linear-gradient(180deg,
            rgba(249, 245, 237, .96) 0%,
            rgba(249, 245, 237, .84) 48%,
            rgba(249, 245, 237, .22) 100%);
    }
    .hero-kv .hkv-content { padding: 15px 18px 25px; }
    .hero-kv .hkv-copy { width: 100%; }
    .hero-kv .hkv-copy h1 { font-size: 1.5rem; }
    .hero-kv .hkv-theme { font-size: .88rem; }
    .hero-kv .hkv-cards { grid-template-columns: 1fr; }
    .hero-kv .hkv-card.is-hybrid { grid-column: auto; }
    .hero-kv .hkv-buttons { flex-direction: column; gap: 12px; }
    .hero-kv .hkv-btn { width: 100%; }
    .hero-kv .hkv-stats {
        position: relative;
        left: auto;
        bottom: auto;
        margin-top: 20px;
        display: grid;
        grid-template-columns: 1fr 1fr;
    }
    .hero-kv .hkv-stats > div { margin-bottom: 10px; border-right: 0; }
}


/* --------------------------------------------------------------------------
   Key-visual colour and weight, taken from the supplied package rather than
   the site tokens. Its brown is a redder terracotta than our bronze and its
   navy is a shade cooler than our oxford; this variant is meant to match the
   artwork exactly, so it uses the package's own values. Sizes stay at the
   enlarged, legible settings.
   -------------------------------------------------------------------------- */
.hero-kv {
       --hkv-navy: #21303c;
    --hkv-ink: #26303b;
    --hkv-brown: #a9564e;
    --hkv-clay: #985d40;
    --hkv-link: #8a4d36;
    --hkv-body: #3e474c;
}

.hero-kv .hkv-pill { background: #92332a; }

.hero-kv .hkv-copy h1        { color: var(--hkv-navy); font-weight: 900; }
.hero-kv .hkv-copy h1 span   { color: #92332a; }
.hero-kv .hkv-copy h1 b      { color: var(--hkv-navy); font-weight: 900; }
.hero-kv .hkv-theme          { color: var(--hkv-ink); font-weight: 400; }

.hero-kv .hkv-card > .hkv-icon { background: #92332a; }
.hero-kv .hkv-card small       { color: var(--hkv-navy); font-weight: 800; }
.hero-kv .hkv-card strong      { color: var(--hkv-navy); font-weight: 700; }
.hero-kv .hkv-card > div span  { color: var(--hkv-body); font-weight: 400; }
.hero-kv .hkv-card a           { color: var(--hkv-link); font-weight: 700; }

.hero-kv .hkv-btn.is-presenter { background: #92332a; }
.hero-kv .hkv-btn.is-listener  { background: #20323e; }

.hero-kv .hkv-stats i    { color: #92332a; }
.hero-kv .hkv-stats b    { color: var(--hkv-ink); font-weight: 700; }
.hero-kv .hkv-stats span { color: var(--hkv-ink); font-weight: 400; }

.hero-kv .hkv-impact    { background: rgba(37, 43, 48, .84); }
.hero-kv .hkv-impact i  { color: #f4e9dc; }
.hero-kv .hkv-impact div { font-weight: 400; }
.hero-kv .hkv-impact b  { font-weight: 700; }

/* ==========================================================================
   112. Navigation carried over a banner (.site-nav--over)
   The bar has no background of its own while it sits on the key visual, and
   takes the solid oxford bar back the moment the reader scrolls off it. The
   homepage banner is light on the left, so the links run dark until then.
   ========================================================================== */
/* The bar stays in normal flow - taking it out of flow put it on top of the
   contact bar above. The banner is pulled up behind it instead. */
.site-nav--over {
    z-index: 1030;
    background: transparent;
    box-shadow: none;
}

/* A soft scrim under the bar so light links stay legible on the artwork,
   fading out so the banner is not visibly boxed in. */
/* An even band rather than a vertical fade. The fade left the links legible
   at the top of the bar and washed out at the bottom, and its warm stop read
   as an orange stripe across the sky. A flat tint plus a blur holds the same
   contrast over the bright sky on the right and the dark temple on the left. */
.site-nav--over:not(.is-stuck) {
    background: rgba(30, 18, 14, .52);
    backdrop-filter: blur(9px) saturate(1.05);
    -webkit-backdrop-filter: blur(9px) saturate(1.05);
    border-bottom: 1px solid rgba(238, 235, 221, .14);
        padding: 6px 11px;
    border-radius: 50px;
    position: relative;
    top: 12px;
}

/* Once it leaves the banner it becomes the ordinary sticky bar again. */
.site-nav--over.is-stuck {
    background: #ffffff;
    box-shadow: 0 8px 28px rgba(38, 48, 59, .28);
}

/* The stuck bar turns white, so the links must turn dark with it. The rule
   here used to read '.site-nav--over.is-stuck .site-nav .nav-link', which
   looked for a .site-nav nested inside the bar - there is none, so the links
   stayed ivory on white and disappeared while scrolling. */
.site-nav--over.is-stuck .navbar-nav .nav-link { color: var(--oxford); }
.site-nav--over.is-stuck .navbar-nav .nav-link:hover,
.site-nav--over.is-stuck .navbar-nav .nav-link:focus,
.site-nav--over.is-stuck .navbar-nav .nav-link.active,
.site-nav--over.is-stuck .navbar-nav .show > .nav-link { color: var(--bronze); }
.site-nav--over.is-stuck .navbar-toggler {
    color: var(--oxford);
    border-color: rgba(38, 48, 59, .22);
}

/* The banner starts under the bar, so its content clears it. */
.site-nav--over + .hero-kv .hkv-content {padding-top: calc(var(--nav-over-h, 59px) + 61px);}

@media (max-width: 991.98px) {
    /* The collapsed menu needs something to sit on. */
    .site-nav--over .navbar-collapse.show,
    .site-nav--over .navbar-collapse.collapsing {
        background: var(--oxford);
        border-radius: var(--r);
        margin-top: .5rem;
        padding: .75rem 1rem;
    }
    .site-nav--over .navbar-collapse.show .nav-link { color: var(--ivory); }
}

/* ==========================================================================
   113. Institution logo rail
   Sixty marks scrolling under the banner. The set is rendered twice so the
   track translates by exactly -50% and loops without a seam.
   ========================================================================== */
.logo-rail {
    padding: 2.25rem 0 2rem;
    background: var(--white);
    border-bottom: 1px solid var(--line);
    overflow: hidden;
}
.logo-rail .lr-label {
    text-align: center;
    font-family: var(--font-ui);
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: var(--text-small);
    margin: 0 0 1.4rem;
}
.logo-rail .lr-track {
    display: flex;
    align-items: center;
    gap: 3rem;
    width: max-content;
    animation: marquee 140s linear infinite;
}
.logo-rail:hover .lr-track { animation-play-state: paused; }
.logo-rail .lr-item {
    flex: none;
    display: grid;
    place-items: center;
    height: 62px;
}
.logo-rail .lr-item img {
    display: block;
    max-height: 62px;
    width: auto;
    max-width: 150px;
    object-fit: contain;
}

@media (prefers-reduced-motion: reduce) {
    .logo-rail .lr-track { animation: none; }
    .logo-rail { overflow-x: auto; }
}
@media (max-width: 767.98px) {
    .logo-rail { padding: 1.75rem 0 1.5rem; }
    .logo-rail .lr-track { gap: 2rem; }
    .logo-rail .lr-item, .logo-rail .lr-item img { height: 48px; max-height: 48px; }
}

/* The overlay bar sits directly under the contact strip, so it does not need
   the breathing room the solid bar has above it. */
.site-nav--over {
    min-height: 0;
    padding-top: .15rem;
    padding-bottom: .15rem;
}
/* --nav-over-h is measured by main.js; the fallback matches the 54px logo
   plus the bar's own padding, so the first paint is already close. */
.site-nav--over + .hero-kv,
.site-nav--over + .page-hero {margin-top: calc(-1 * var(--nav-over-h, 59px));}

/* An inner page's banner is shorter than the key visual, so it only needs
   the bar's height back as padding rather than the extra breathing room. */
.site-nav--over + .page-hero > .container { padding-top: calc(var(--nav-over-h, 59px) + 18px); }

/* The links are centred on the viewport, not on the space left over beside the
   logo: taking the list out of flow means the logo on one side and the button
   on the other cannot pull it off centre. Desktop only - below 992px the list
   sits inside the collapsed panel and stacks. */
@media (min-width: 992px) {
    .site-nav > .container { position: relative; }
    .site-nav .navbar-collapse { justify-content: flex-end; }
    .site-nav .navbar-nav {
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
    }
}

/* The bar is a .container itself now, but .site-nav--over's padding shorthand
   zeroes the column's own gutter, so the inner container supplies it. That
   puts the logo on the same line as the banner copy below it. */
.site-nav--over > .container { max-width: 100%; }

/* Off the banner the bar is full-bleed, so the inset comes from the bar
   itself and the inner gutter would only double it. */
.site-nav--over.is-stuck > .container { padding-left: 0; padding-right: 0; }

/* Off the banner the bar drops the column and spans the window. */
.site-nav--over.is-stuck {
    max-width: 100%;
    padding-left: clamp(1rem, 3vw, 2.0rem);
    padding-right: clamp(1rem, 3vw, 1.5rem);
}

/* ==========================================================================
   114. Quick downloads
   ========================================================================== */
.dl-pill {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    font-family: var(--font-ui);
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--bronze);
    background: var(--bronze-soft);
    border: 1px solid rgba(154, 105, 78, .28);
    border-radius: 999px;
    padding: .45rem 1.2rem;
    margin: 0 0 1rem;
}

.dl-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1rem;
}
.dl-grid .dl-card {
    /* Overridden per card by download_vars(); these are the fallbacks. */
    --dl-accent: var(--bronze);
    --dl-soft: var(--bronze-soft);
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    gap: 1rem;
    background: var(--white);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    padding: 1.1rem 1.25rem;
    color: inherit;
    transition: transform .35s cubic-bezier(.22, .61, .36, 1),
                box-shadow .35s ease, border-color .35s ease;
}

/* Accent bar down the left edge, drawn on from the middle out. */
.dl-grid .dl-card::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 3px;
    background: var(--dl-accent);
    transform: scaleY(0);
    transition: transform .35s cubic-bezier(.22, .61, .36, 1);
}
.dl-grid .dl-card:hover::before { transform: scaleY(1); }

/* A wash of the card's own colour, bleeding in from the icon side. */
.dl-grid .dl-card::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(100deg, var(--dl-soft), transparent 62%);
    opacity: 0;
    transition: opacity .35s ease;
    pointer-events: none;
}
.dl-grid .dl-card:hover::after { opacity: 1; }

/* Keep the contents above both pseudo-elements. */
.dl-grid .dl-file,
.dl-grid .dl-text,
.dl-grid .dl-go { position: relative; z-index: 1; }

.dl-grid a.dl-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 16px 34px rgba(38, 48, 59, .13);
    border-color: var(--dl-accent);
    color: inherit;
}

.dl-grid .dl-file {
    flex: none;
    width: 46px;
    height: 46px;
    border-radius: 12px;
    display: grid;
    place-items: center;
    background: var(--dl-soft);
    color: var(--dl-accent);
    font-size: 1.2rem;
    transition: background-color .3s ease, color .3s ease,
                transform .45s cubic-bezier(.34, 1.56, .64, 1);
}
.dl-grid .dl-card:hover .dl-file {
    background: var(--dl-accent);
    color: #fff;
    transform: translateY(-2px) rotate(-6deg);
}

.dl-grid .dl-text { flex: 1; min-width: 0; }
.dl-grid .dl-text b {
    display: block;
    font-family: var(--font-ui);
    font-size: .98rem;
    color: var(--oxford);
    line-height: 1.3;
    transition: color .3s ease;
}
.dl-grid .dl-card:hover .dl-text b { color: var(--dl-accent); }
.dl-grid .dl-text em {
    font-family: var(--font-ui);
    font-size: .76rem;
    font-style: normal;
    font-weight: 600;
    letter-spacing: .04em;
    color: var(--text-small);
}
.dl-grid .dl-go {
    flex: none;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: var(--dl-soft);
    color: var(--dl-accent);
    font-size: .95rem;
    transition: background-color .25s ease, color .25s ease;
}
.dl-grid a.dl-card:hover .dl-go { background: var(--dl-accent); color: #fff; }
.dl-grid a.dl-card:hover .dl-go i { animation: dl-nudge .8s ease infinite; }

@keyframes dl-nudge {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(3px); }
}

/* A file that is not on disk yet says so instead of linking nowhere. It still
   carries its colour, but does not lift — nothing there to click. */
.dl-grid .dl-card.is-pending {
    background: var(--warm-ivory);
    border-style: dashed;
}
.dl-grid .dl-card.is-pending .dl-file { opacity: .82; }
.dl-grid .dl-card.is-pending .dl-go {background: rgb(255 227 209 / 88%);color: var(--text-small);}
.dl-grid .dl-card.is-pending .dl-text b { color: var(--text-2); }
.dl-grid .dl-card.is-pending:hover {
    border-style: solid;
    border-color: var(--dl-accent);
}
.dl-grid .dl-card.is-pending:hover .dl-go i { animation: dl-turn 1.8s ease infinite; }

@keyframes dl-turn {
    0%, 55%, 100% { transform: rotate(0); }
    75%           { transform: rotate(180deg); }
}

@media (prefers-reduced-motion: reduce) {
    .dl-grid .dl-card,
    .dl-grid .dl-card::before,
    .dl-grid .dl-card::after,
    .dl-grid .dl-file { transition-duration: .01ms; }
    .dl-grid a.dl-card:hover { transform: none; }
    .dl-grid .dl-card:hover .dl-file { transform: none; }
    .dl-grid .dl-go i { animation: none !important; }
}

@media (max-width: 991.98px) {
    .dl-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 575.98px) {
    .dl-grid { grid-template-columns: minmax(0, 1fr); }
}

/* ==========================================================================
   115. Quick Downloads — design variants (review page)
   Every rule is qualified by its variant root; see the Do-Not-Repeat note.
   ========================================================================== */
.dwn-chip {
    font-family: var(--font-ui);
    font-size: .68rem;
    font-weight: 800;
    letter-spacing: .08em;
    color: var(--bronze);
    background: var(--bronze-soft);
    border-radius: 999px;
    padding: .2rem .65rem;
}

/* ---- Variant 01: document ledger ---- */
.dwn1 {
    background: var(--white);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    overflow: hidden;
}
.dwn1 .dwn1-row {
    display: grid;
    grid-template-columns: 46px minmax(0, 1fr) auto auto;
    align-items: center;
    gap: 1rem;
    padding: .95rem 1.35rem;
    border-top: 1px solid var(--line);
    color: inherit;
    transition: background-color .25s ease;
}
.dwn1 .dwn1-row:first-child { border-top: 0; }
.dwn1 a.dwn1-row:hover { background: var(--warm-ivory); color: inherit; }
.dwn1 .dwn1-ic {
    width: 46px;
    height: 46px;
    border-radius: 12px;
    display: grid;
    place-items: center;
    background: var(--bronze-soft);
    color: var(--bronze);
    font-size: 1.15rem;
}
.dwn1 .dwn1-name { font-family: var(--font-ui); font-size: .98rem; color: var(--oxford); }
.dwn1 .dwn1-go {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    font-family: var(--font-ui);
    font-size: .84rem;
    font-weight: 700;
    color: var(--bronze);
    white-space: nowrap;
}
.dwn1 .dwn1-row.is-pending { background: var(--warm-ivory); }
.dwn1 .dwn1-row.is-pending .dwn1-ic { background: rgba(38, 48, 59, .07); color: var(--text-small); }
.dwn1 .dwn1-row.is-pending .dwn1-name { color: var(--text-2); }
.dwn1 .dwn1-row.is-pending .dwn1-go { color: var(--text-small); font-weight: 600; }
.dwn1 .dwn1-row.is-pending .dwn-chip { background: rgba(38, 48, 59, .07); color: var(--text-small); }

/* ---- Variant 02: dark tiles ---- */
.dwn2 {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1.1rem;
}
.dwn2 .dwn2-tile {
    position: relative;
    display: block;
    background: rgba(238, 235, 221, .06);
    border: 1px solid rgba(238, 235, 221, .18);
    border-radius: var(--r-lg);
    padding: 1.6rem 1.4rem;
    color: inherit;
    transition: background-color .3s ease, transform .3s ease, border-color .3s ease;
}
.dwn2 a.dwn2-tile:hover {
    background: rgba(238, 235, 221, .12);
    border-color: var(--bronze);
    transform: translateY(-5px);
    color: inherit;
}
.dwn2 .dwn2-badge {
    position: absolute;
    top: 1rem;
    right: 1rem;
    font-family: var(--font-ui);
    font-size: .64rem;
    font-weight: 800;
    letter-spacing: .1em;
    color: var(--bronze);
    background: rgba(154, 105, 78, .22);
    border-radius: 999px;
    padding: .2rem .6rem;
}
.dwn2 .dwn2-tile > i { display: block; font-size: 1.9rem; color: var(--bronze); margin-bottom: .9rem; }
.dwn2 .dwn2-tile b {
    display: block;
    font-family: var(--font-ui);
    font-size: 1.02rem;
    color: var(--ivory);
    margin-bottom: .7rem;
}
.dwn2 .dwn2-go {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    font-family: var(--font-ui);
    font-size: .82rem;
    font-weight: 700;
    color: var(--bronze);
}
.dwn2 .dwn2-tile.is-pending { border-style: dashed; }
.dwn2 .dwn2-tile.is-pending > i,
.dwn2 .dwn2-tile.is-pending .dwn2-go { color: var(--hero-sub); }
.dwn2 .dwn2-tile.is-pending .dwn2-badge { background: rgba(238, 235, 221, .12); color: var(--hero-sub); }

/* ---- Variant 03: grouped by purpose ---- */
.dwn3 {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.5rem;
}
.dwn3 .dwn3-col {
    background: var(--white);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    padding: 1.6rem;
}
.dwn3 .dwn3-head { margin: 0 0 1.1rem; }
.dwn3 .dwn3-head span {
    display: inline-grid;
    place-items: center;
    width: 40px;
    height: 40px;
    border-radius: 11px;
    background: var(--bronze-soft);
    color: var(--bronze);
    font-size: 1.05rem;
    margin-bottom: .7rem;
}
.dwn3 .dwn3-head b {
    display: block;
    font-family: var(--font-display);
    font-size: 1.3rem;
    color: var(--oxford);
}
.dwn3 .dwn3-head em {
    font-size: .88rem;
    font-style: normal;
    color: var(--text-2);
}
.dwn3 .dwn3-row {
    display: grid;
    grid-template-columns: 24px minmax(0, 1fr) 20px;
    align-items: center;
    gap: .85rem;
    padding: .8rem 0;
    border-top: 1px solid var(--line);
    color: inherit;
    transition: padding-left .25s ease;
}
.dwn3 a.dwn3-row:hover { padding-left: .35rem; color: inherit; }
.dwn3 .dwn3-row > i:first-child { color: var(--bronze); font-size: 1.1rem; }
.dwn3 .dwn3-row b {
    display: block;
    font-family: var(--font-ui);
    font-size: .95rem;
    color: var(--oxford);
    line-height: 1.3;
}
.dwn3 .dwn3-row em {
    font-family: var(--font-ui);
    font-size: .74rem;
    font-style: normal;
    font-weight: 600;
    color: var(--text-small);
}
.dwn3 .dwn3-go { color: var(--bronze); font-size: .95rem; }
.dwn3 .dwn3-row.is-pending > i:first-child,
.dwn3 .dwn3-row.is-pending .dwn3-go { color: var(--text-small); }
.dwn3 .dwn3-row.is-pending b { color: var(--text-2); }

@media (max-width: 991.98px) {
    .dwn2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .dwn3 { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 575.98px) {
    .dwn1 .dwn1-row { grid-template-columns: 40px minmax(0, 1fr) auto; row-gap: .4rem; }
    .dwn1 .dwn1-go { grid-column: 2 / -1; }
    .dwn2 { grid-template-columns: minmax(0, 1fr); }
}

/* ==========================================================================
   116. Quick Downloads — variants 04–06 (review page)
   Every rule is qualified by its variant root; see the Do-Not-Repeat note.
   ========================================================================== */

/* --- 04. Editorial index ------------------------------------------------ */
.dwn4 {
    display: grid;
    grid-template-columns: minmax(0, 340px) minmax(0, 1fr);
    gap: clamp(2rem, 5vw, 4.5rem);
    align-items: start;
}
.dwn4 .dwn4-aside .eyebrow { margin-bottom: .5rem; }
.dwn4 .dwn4-aside .section-title { margin-bottom: 0; }
.dwn4 .dwn4-aside .rule-bronze { margin: 1rem 0 1.1rem; }
.dwn4 .dwn4-aside p:last-child {
    margin: 0;
    color: var(--text-2);
    font-size: .95rem;
    line-height: 1.75;
}

.dwn4 .dwn4-list {
    list-style: none;
    margin: 0;
    padding: 0;
    border-top: 1px solid var(--line);
}
.dwn4 .dwn4-list > li {
    display: grid;
    grid-template-columns: 3.25rem minmax(0, 1fr) auto;
    align-items: baseline;
    gap: 0 1rem;
    padding: 1.05rem 0;
    border-bottom: 1px solid var(--line);
}
.dwn4 .dwn4-no {
    font-family: var(--font-num);
    font-size: .82rem;
    font-weight: 600;
    letter-spacing: .04em;
    color: var(--bronze);
}
.dwn4 .dwn4-name {
    font-family: var(--font-display);
    font-size: clamp(1.18rem, 2vw, 1.4rem);
    font-weight: 600;
    line-height: 1.3;
    color: var(--oxford);
    text-decoration: none;
    background-image: linear-gradient(var(--bronze), var(--bronze));
    background-repeat: no-repeat;
    background-size: 0 1px;
    background-position: 0 100%;
    transition: background-size .35s ease, color .25s ease;
}
.dwn4 a.dwn4-name:hover,
.dwn4 a.dwn4-name:focus-visible { color: var(--bronze); background-size: 100% 1px; }
.dwn4 .dwn4-meta {
    font-family: var(--font-ui);
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--text-small);
    white-space: nowrap;
}
.dwn4 .dwn4-list > li.is-pending .dwn4-no,
.dwn4 .dwn4-list > li.is-pending .dwn4-name { color: var(--text-2); }

/* --- 05. Formal table --------------------------------------------------- */
.dwn5-table {
    width: 100%;
    margin: 0;
    border-collapse: collapse;
    background: #fff;
    border: 1px solid var(--line);
}
.dwn5-table thead th {
    font-family: var(--font-ui);
    font-size: .68rem;
    font-weight: 800;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--ivory);
    background: var(--oxford);
    padding: .85rem 1.25rem;
    white-space: nowrap;
}
.dwn5-table tbody th,
.dwn5-table tbody td {
    padding: 1rem 1.25rem;
    border-top: 1px solid var(--line);
    vertical-align: middle;
}
.dwn5-table tbody th {
    font-family: var(--font-body);
    font-size: 1rem;
    font-weight: 600;
    color: var(--oxford);
    white-space: nowrap;
}
.dwn5-table tbody th > i {
    color: var(--bronze);
    font-size: 1.05rem;
    margin-right: .7rem;
    vertical-align: -.08em;
}
.dwn5-table tbody tr:nth-child(even) { background: var(--warm-ivory); }
.dwn5-table tbody tr:hover { background: var(--bronze-soft); }
.dwn5-table .dwn5-go {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    font-family: var(--font-ui);
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--bronze);
    text-decoration: none;
    white-space: nowrap;
}
.dwn5-table .dwn5-go i { transition: transform .25s ease; }
.dwn5-table .dwn5-go:hover i { transform: translateY(2px); }
.dwn5-table .dwn5-soon {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    font-family: var(--font-ui);
    font-size: .78rem;
    font-weight: 600;
    color: var(--text-small);
    white-space: nowrap;
}
.dwn5-table tbody tr.is-pending th,
.dwn5-table tbody tr.is-pending th > i { color: var(--text-2); }

/* --- 06. Single strip --------------------------------------------------- */
.dwn6 {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem 2.5rem;
    padding: 1.6rem clamp(1.25rem, 3vw, 2.25rem);
    background: var(--warm-ivory);
    border: 1px solid var(--line);
    border-left: 3px solid var(--bronze);
    border-radius: 4px;
}
.dwn6 .dwn6-head { display: flex; align-items: center; gap: 1rem; }
.dwn6 .dwn6-head > span {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    flex: 0 0 44px;
    border-radius: 50%;
    background: var(--oxford);
    color: var(--ivory);
    font-size: 1.15rem;
}
.dwn6 .dwn6-head b {
    display: block;
    font-family: var(--font-display);
    font-size: 1.3rem;
    font-weight: 600;
    color: var(--oxford);
    line-height: 1.25;
}
.dwn6 .dwn6-head em {
    display: block;
    font-style: normal;
    font-family: var(--font-ui);
    font-size: .78rem;
    color: var(--text-2);
    margin-top: .15rem;
}
.dwn6 .dwn6-links { display: flex; flex-wrap: wrap; gap: .55rem; }
.dwn6 .dwn6-link {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    padding: .5rem .9rem;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 999px;
    font-family: var(--font-ui);
    font-size: .82rem;
    font-weight: 600;
    color: var(--oxford);
    text-decoration: none;
    transition: border-color .25s ease, color .25s ease, box-shadow .25s ease;
}
.dwn6 .dwn6-link > i { color: var(--bronze); font-size: .95rem; }
.dwn6 .dwn6-link em {
    font-style: normal;
    font-size: .66rem;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--text-small);
}
.dwn6 a.dwn6-link:hover,
.dwn6 a.dwn6-link:focus-visible {
    border-color: var(--bronze);
    color: var(--bronze);
    box-shadow: 0 6px 18px rgba(38, 48, 59, .08);
}
.dwn6 .dwn6-link.is-pending { opacity: .6; }
.dwn6 .dwn6-link.is-pending > i { color: var(--text-small); }

@media (max-width: 991.98px) {
    .dwn4 { grid-template-columns: minmax(0, 1fr); gap: 2rem; }
    .dwn6 { justify-content: flex-start; }
}
@media (max-width: 575.98px) {
    .dwn4 .dwn4-list > li { grid-template-columns: 2.5rem minmax(0, 1fr); row-gap: .3rem; }
    .dwn4 .dwn4-meta { grid-column: 2; }
    .dwn5-table tbody th,
    .dwn5-table tbody td,
    .dwn5-table thead th { padding: .8rem .9rem; }
    .dwn6 .dwn6-links { width: 100%; }
}

/* ==========================================================================
   117. Delegate testimonials — carousel
   Reuses the .js-tcarousel behaviour; every rule is scoped to .testi-carousel
   so it cannot reach the sessions carousel that shares the .tc-* names.
   ========================================================================== */
.testi-carousel {
    position: relative;
    margin-top: 2.25rem;
}
.testi-carousel .tc-track {
    display: flex;
    align-items: stretch;
    gap: 1.5rem;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    scrollbar-width: none;             /* the arrows are the control */
    -ms-overflow-style: none;
    padding: .35rem .35rem 1rem;       /* room for the cards' hover lift */
}
.testi-carousel .tc-track::-webkit-scrollbar { display: none; }
.testi-carousel .tc-track:focus-visible { outline: 2px solid var(--bronze); outline-offset: 4px; }

.testi-carousel .testi-card {
    flex: 0 0 calc((100% - 3rem) / 3);
    scroll-snap-align: start;
}

/* The quotation is clamped until the reader opens it. Max-height rather than
   line-clamp, because a card may hold more than one paragraph. */
.testi-carousel .tst-text {
    position: relative;
    flex: 1;
    max-height: 11.5em;
    overflow: hidden;
    margin: .75rem 0 .5rem;
    transition: max-height .35s ease;
}
.testi-carousel .testi-card.is-open .tst-text { max-height: 200em; }

/* The clamp cuts mid-line, so it is faded rather than sliced. Anchored to
   the padding box, it stays at the visible edge and does nothing on a
   quotation short enough not to reach it. */
.testi-carousel .testi-card:not(.is-open) .tst-text::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 2.4em;
    background: linear-gradient(rgba(255, 255, 255, 0), var(--white));
    pointer-events: none;
}
.testi-carousel .tst-text p {
    font-size: .96rem;
    color: var(--text-body);
    margin: 0 0 .8rem;
}
.testi-carousel .tst-text p:last-child { margin-bottom: 0; }

.testi-carousel .tst-more {
    align-self: flex-start;
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    margin: 0 0 1.1rem;
    padding: 0;
    background: none;
    border: 0;
    font-family: var(--font-ui);
    font-size: .82rem;
    font-weight: 700;
    color: var(--bronze);
    transition: gap .25s ease;
}
.testi-carousel .tst-more:hover { gap: .6rem; text-decoration: underline; }
.testi-carousel .tst-more i { font-size: .75rem; transition: transform .3s ease; }
.testi-carousel .testi-card.is-open .tst-more i { transform: rotate(180deg); }

/* The meta row is pinned to the foot so the names line up across the row. */
.testi-carousel .testi-meta { margin-top: auto; }

/* Arrows sit just outside the track, matching the sessions carousel. */
.testi-carousel .tc-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 3;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: var(--white);
    border: 1px solid var(--line);
    color: var(--oxford);
    font-size: 1rem;
    box-shadow: var(--shadow);
    transition: background-color .25s ease, color .25s ease, opacity .25s ease;
}
.testi-carousel .tc-nav:hover { background: var(--bronze); border-color: var(--bronze); color: #fff; }
.testi-carousel .tc-nav:disabled { opacity: .3; pointer-events: none; }
.testi-carousel .tc-prev { left: -18px; }
.testi-carousel .tc-next { right: -18px; }

@media (max-width: 991.98px) {
    .testi-carousel .testi-card { flex-basis: calc((100% - 1.5rem) / 2); }
    .testi-carousel .tc-prev { left: -8px; }
    .testi-carousel .tc-next { right: -8px; }
}
@media (max-width: 575.98px) {
    .testi-carousel .testi-card { flex-basis: 100%; }
    .testi-carousel .tc-nav { top: auto; bottom: -12px; transform: none; }
    .testi-carousel .tc-prev { left: calc(50% - 52px); }
    .testi-carousel .tc-next { right: calc(50% - 52px); }
}

/* ==========================================================================
   118. "More ways to take part" — design variants (review page)
   Every rule is qualified by its variant root; see the Do-Not-Repeat note.
   Ratios sit on the <figure>, never on the <img> (see buglog: an aspect-ratio
   on a replaced element fights its own width/height attributes).
   ========================================================================== */

/* --- 01. Photo-topped cards --------------------------------------------- */
.eng1 {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.75rem;
    align-items: start;
}
.eng1 .eng1-card {
    display: flex;
    flex-direction: column;
    background: var(--white);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
    transition: transform .35s ease, box-shadow .35s ease, border-color .35s ease;
}
.eng1 .eng1-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-md);
    border-color: var(--bronze);
}
.eng1 .eng1-media {
    position: relative;
    margin: 0;
    aspect-ratio: 16 / 8;
    overflow: hidden;
    background: var(--oxford);
}
.eng1 .eng1-media img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .6s ease;
}
.eng1 .eng1-card:hover .eng1-media img { transform: scale(1.05); }
.eng1 .eng1-media figcaption {
    position: absolute;
    left: 1rem;
    bottom: 1rem;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    padding: .4rem .9rem;
    border-radius: 999px;
    background: rgba(38, 48, 59, .82);
    backdrop-filter: blur(6px);
    font-family: var(--font-ui);
    font-size: .7rem;
    font-weight: 800;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--ivory);
}
.eng1 .eng1-media figcaption i { color: var(--bronze); font-size: .9rem; }

.eng1 .eng1-body {
    display: flex;
    flex-direction: column;
    flex: 1;
    padding: 1.6rem 1.7rem 1.8rem;
}
.eng1 .eng1-body h3 { font-size: 1.3rem; margin-bottom: .6rem; }
.eng1 .eng1-tag {
    font-family: var(--font-ui);
    font-size: .82rem;
    font-weight: 700;
    color: var(--bronze);
    margin-bottom: .8rem;
}
.eng1 .eng1-body p { font-size: .95rem; color: var(--text-body); }
.eng1 .eng1-body .check-list { margin: 0 0 1rem; }
.eng1 .eng1-go { align-self: flex-start; margin-top: auto; }

/* --- 02. Alternating feature rows ---------------------------------------- */
.eng2 { display: flex; flex-direction: column; gap: 3.5rem; }
.eng2 .eng2-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: clamp(1.75rem, 4vw, 3.5rem);
    align-items: center;
}
.eng2 .eng2-row.is-flipped .eng2-media { order: 2; }

.eng2 .eng2-media {
    position: relative;
    margin: 0;
    aspect-ratio: 4 / 3;
    border-radius: var(--r-lg);
    overflow: hidden;
    background: var(--oxford);
    box-shadow: var(--shadow-md);
}
.eng2 .eng2-media img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.eng2 .eng2-no {
    position: absolute;
    left: 0;
    bottom: 0;
    z-index: 2;
    padding: .55rem 1.1rem;
    border-radius: 0 var(--r) 0 0;
    background: var(--bronze);
    font-family: var(--font-num);
    font-size: 1rem;
    font-weight: 700;
    color: #fff;
}
.eng2 .eng2-body h3 { font-size: clamp(1.35rem, 2.4vw, 1.8rem); margin-bottom: 0; }
.eng2 .eng2-body .rule-bronze { margin: .9rem 0 1.1rem; }
.eng2 .eng2-tag {
    font-family: var(--font-ui);
    font-size: .88rem;
    font-weight: 700;
    color: var(--bronze);
}
.eng2 .eng2-body p { color: var(--text-body); }
.eng2 .eng2-body .check-list { margin-bottom: 1.1rem; }

/* --- 03. One lead, three shortcuts — ADOPTED as the homepage #engage ------ */
.take-part {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
    gap: 1.75rem;
    align-items: stretch;
}
.take-part .tp-hero {
    position: relative;
    min-height: 420px;
    border-radius: var(--r-lg);
    overflow: hidden;
    display: flex;
    align-items: flex-end;
}
.take-part .tp-hero img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.take-part .tp-hero::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(23, 29, 36, .1) 0%, rgba(23, 29, 36, .88) 68%, rgba(23, 29, 36, .96) 100%);
}
.take-part .tp-hero-copy { position: relative; z-index: 2; padding: 2rem 2rem 2.1rem; }
.take-part .tp-hero-copy h3 { color: var(--ivory); font-size: 1.55rem; margin-bottom: .7rem; }
.take-part .tp-hero-copy p { color: var(--hero-sub); font-size: .95rem; margin-bottom: 1.3rem; }
.take-part .tp-tag {
    font-family: var(--font-ui);
    font-size: .82rem;
    font-weight: 700;
    color: var(--bronze) !important;
    margin-bottom: .7rem !important;
}
.take-part .tp-map {
    display: flex;
    align-items: flex-start;
    gap: .5rem;
    font-size: .86rem !important;
}
.take-part .tp-map i { color: var(--bronze); margin-top: .15rem; }
.take-part .tp-map a { color: var(--ivory); text-decoration: underline; text-underline-offset: 3px; }
.take-part .tp-map a:hover { color: var(--bronze); }

.take-part .tp-flag {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    font-family: var(--font-ui);
    font-size: .7rem;
    font-weight: 800;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--bronze);
    margin-bottom: .6rem;
}
.take-part .tp-flag i { font-size: .95rem; }

.take-part .tp-list { display: flex; flex-direction: column; gap: 1.75rem; }
.take-part .tp-row {
    display: grid;
    grid-template-columns: 128px minmax(0, 1fr);
    gap: 1.25rem;
    flex: 1;
    padding: 1.15rem;
    background: rgba(238, 235, 221, .05);
    border: 1px solid rgba(238, 235, 221, .14);
    border-radius: var(--r);
    transition: border-color .3s ease, background-color .3s ease, transform .3s ease;
}
.take-part .tp-row:hover {
    border-color: var(--bronze);
    background: rgba(154, 105, 78, .12);
    transform: translateX(4px);
}
.take-part .tp-row figure {
    position: relative;
    margin: 0;
    aspect-ratio: 1 / 1;
    border-radius: 10px;
    overflow: hidden;
    background: var(--oxford);
}
.take-part .tp-row figure img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.take-part .tp-row h4 { color: var(--ivory); font-size: 1.05rem; margin-bottom: .35rem; }
.take-part .tp-row p {
    color: var(--hero-sub);
    font-size: .86rem;
    line-height: 1.65;
    margin: 0 0 .7rem;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
/* .tp-go is an <a> for a plain link and a <button> for the two that open a
   pop-up, so the button chrome has to be reset for them to match. */
.take-part .tp-go {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    padding: 0;
    background: none;
    border: 0;
    font-family: var(--font-ui);
    font-size: .8rem;
    font-weight: 700;
    color: var(--bronze);
    text-decoration: none;
    transition: gap .25s ease;
}
.take-part .tp-go:hover,
.take-part .tp-go:focus-visible { color: var(--bronze); gap: .7rem; text-decoration: underline; }
.take-part .tp-row:hover .tp-go { gap: .7rem; }

@media (max-width: 991.98px) {
    .eng1 { grid-template-columns: minmax(0, 1fr); }
    .eng2 .eng2-row { grid-template-columns: minmax(0, 1fr); }
    .eng2 .eng2-row.is-flipped .eng2-media { order: 0; }
    .take-part { grid-template-columns: minmax(0, 1fr); }
    .take-part .tp-hero { min-height: 340px; }
}
@media (max-width: 575.98px) {
    .take-part .tp-row { grid-template-columns: minmax(0, 1fr); }
    .take-part .tp-row figure { aspect-ratio: 16 / 9; }
}

/* ==========================================================================
   119. Footer — design variants (review page)
   Every rule is qualified by its variant root; see the Do-Not-Repeat note.
   ========================================================================== */

/* --- 01. Four columns, alert band ---------------------------------------- */
.ftv1 {
    position: relative;
    overflow: hidden;
    background: var(--oxford);
    color: var(--hero-sub);
    padding: 3.5rem 0 0;
    margin-top: 2rem;
}

/* The venue photograph sits at full opacity and the scrim over it sets the
   wash. Dimming the image itself AND stacking a heavy scrim on top is what
   made an earlier backdrop invisible (buglog: venue spotlight). */
.ftv1 .ftv1-bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 38%;
}
.ftv1::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg,
        rgba(23, 29, 36, .74) 0%,
        rgba(23, 29, 36, .88) 42%,
        rgba(23, 29, 36, .96) 78%,
        rgba(23, 29, 36, .99) 100%);
}
.ftv1 > .container { position: relative; z-index: 2; }
.ftv1 .ftv1-grid {
    display: grid;
    grid-template-columns: 1.5fr 1fr 1.35fr 1.2fr;
    gap: 2.5rem;
    padding-bottom: 2.5rem;
}
.ftv1 h4 {
    font-family: var(--font-ui);
    font-size: .95rem;
    font-weight: 800;
    letter-spacing: .04em;
    color: var(--ivory);
    margin-bottom: 1.1rem;
    padding-bottom: .65rem;
    border-bottom: 1px solid rgba(238, 235, 221, .16);
}
.ftv1 .ftv1-brand img {
    height: 62px;
    width: auto;
    background: #fff;
    border-radius: 10px;
    padding: 5px 9px;
    margin-bottom: 1rem;
}
.ftv1 .ftv1-brand p { font-size: .9rem; line-height: 1.8; margin-bottom: 1.1rem; }

.ftv1 .ftv1-social { display: flex; gap: .55rem; }
.ftv1 .ftv1-social a {
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: rgba(238, 235, 221, .08);
    border: 1px solid rgba(238, 235, 221, .16);
    color: var(--ivory);
    font-size: 1rem;
    transition: background-color .25s ease, border-color .25s ease, transform .25s ease;
}
.ftv1 .ftv1-social a:hover {
    background: var(--bronze);
    border-color: var(--bronze);
    color: #fff;
    transform: translateY(-3px);
}

.ftv1 .ftv1-links { list-style: none; margin: 0; padding: 0; }
.ftv1 .ftv1-links li { margin-bottom: .6rem; }
.ftv1 .ftv1-links a {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    font-size: .9rem;
    color: var(--hero-sub);
    transition: color .25s ease, gap .25s ease;
}
.ftv1 .ftv1-links a i { font-size: .7rem; color: var(--bronze); }
.ftv1 .ftv1-links a:hover { color: var(--bronze); gap: .7rem; }

.ftv1 .ftv1-contact { list-style: none; margin: 0; padding: 0; }
.ftv1 .ftv1-contact li { display: flex; gap: .75rem; margin-bottom: .95rem; }
.ftv1 .ftv1-ic {
    display: grid;
    place-items: center;
    flex: none;
    width: 34px;
    height: 34px;
    border-radius: 9px;
    background: rgba(154, 105, 78, .18);
    color: var(--bronze);
    font-size: .9rem;
}
.ftv1 .ftv1-contact em {
    display: block;
    font-style: normal;
    font-family: var(--font-ui);
    font-size: .68rem;
    font-weight: 800;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: rgba(238, 235, 221, .55);
}
.ftv1 .ftv1-contact a { font-size: .92rem; color: var(--ivory); transition: color .25s ease; }
.ftv1 .ftv1-contact a:hover { color: var(--bronze); }

.ftv1 .ftv1-venue { font-size: .9rem; line-height: 1.8; margin-bottom: .9rem; }
.ftv1 .ftv1-map {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    font-family: var(--font-ui);
    font-size: .84rem;
    font-weight: 700;
    color: var(--bronze);
}
.ftv1 .ftv1-map:hover { text-decoration: underline; }

.ftv1 .ftv1-alert {
    display: flex;
    gap: .9rem;
    padding: 1.1rem 1.35rem;
    border-radius: var(--r);
    background: rgba(214, 158, 46, .12);
    border: 1px solid rgba(214, 158, 46, .38);
}
.ftv1 .ftv1-alert > i { color: #E0A93B; font-size: 1.2rem; flex: none; margin-top: .1rem; }
.ftv1 .ftv1-alert p { margin: 0; font-size: .86rem; line-height: 1.75; color: rgba(238, 235, 221, .9); }
.ftv1 .ftv1-alert b { color: #E9BE63; }
.ftv1 .ftv1-alert a { color: #E9BE63; text-decoration: underline; }

.ftv1 .ftv1-bar {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: .6rem 1.5rem;
    margin-top: 2rem;
    padding: 1.15rem 0;
    border-top: 1px solid rgba(238, 235, 221, .14);
    font-size: .82rem;
}
.ftv1 .ftv1-bar a { color: var(--hero-sub); margin-left: 1.35rem; }
.ftv1 .ftv1-bar a:first-child { margin-left: 0; }
.ftv1 .ftv1-bar a:hover { color: var(--bronze); }

/* --- 02. Contact card ---------------------------------------------------- */
.ftv2 {
    background: var(--oxford);
    color: var(--hero-sub);
    padding: 2.5rem 0 0;
    margin-top: 2rem;
}
.ftv2 .ftv2-alert {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 1.1rem;
    align-items: start;
    padding: 1.1rem 1.35rem;
    border-radius: var(--r);
    background: rgba(214, 158, 46, .1);
    border-left: 3px solid #E0A93B;
}
.ftv2 .ftv2-alert > span {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    white-space: nowrap;
    font-family: var(--font-ui);
    font-size: .72rem;
    font-weight: 800;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: #E9BE63;
}
.ftv2 .ftv2-alert p { margin: 0; font-size: .86rem; line-height: 1.75; }
.ftv2 .ftv2-alert a { color: #E9BE63; text-decoration: underline; }

.ftv2 .ftv2-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
    gap: 3rem;
    padding: 2.75rem 0;
}
.ftv2 .ftv2-logo {
    height: 62px;
    width: auto;
    background: #fff;
    border-radius: 10px;
    padding: 5px 9px;
    margin-bottom: 1rem;
}
.ftv2 .ftv2-blurb { font-size: .9rem; line-height: 1.8; margin-bottom: 1.75rem; max-width: 46ch; }
.ftv2 h4 {
    font-family: var(--font-ui);
    font-size: .72rem;
    font-weight: 800;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--bronze);
    margin-bottom: .9rem;
}
.ftv2 .ftv2-links {
    list-style: none;
    margin: 0 0 1.75rem;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .55rem 1.5rem;
}
.ftv2 .ftv2-links a { font-size: .9rem; color: var(--ivory); transition: color .25s ease; }
.ftv2 .ftv2-links a:hover { color: var(--bronze); }

.ftv2 .ftv2-social { display: flex; gap: .55rem; }
.ftv2 .ftv2-social a {
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    border-radius: 9px;
    background: rgba(238, 235, 221, .08);
    color: var(--ivory);
    transition: background-color .25s ease, color .25s ease;
}
.ftv2 .ftv2-social a:hover { background: var(--bronze); color: #fff; }

.ftv2 .ftv2-card {
    background: linear-gradient(160deg, rgba(238, 235, 221, .07), rgba(238, 235, 221, .02));
    border: 1px solid rgba(238, 235, 221, .16);
    border-top: 3px solid var(--bronze);
    border-radius: var(--r-lg);
    padding: 1.6rem 1.65rem;
    box-shadow: 0 20px 44px rgba(0, 0, 0, .28);
}
.ftv2 .ftv2-card-head {
    display: flex;
    align-items: center;
    gap: .55rem;
    font-family: var(--font-ui);
    font-size: .78rem;
    font-weight: 800;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--ivory);
    margin-bottom: 1.25rem;
}
.ftv2 .ftv2-card-head i { color: var(--bronze); font-size: 1.05rem; }
.ftv2 .ftv2-row {
    display: grid;
    grid-template-columns: 1.4rem minmax(0, 1fr);
    gap: .85rem;
    padding: .8rem 0;
    border-top: 1px solid rgba(238, 235, 221, .12);
}
.ftv2 .ftv2-row:first-of-type { border-top: 0; padding-top: 0; }
.ftv2 .ftv2-row > i { color: var(--bronze); font-size: 1rem; margin-top: .15rem; }
.ftv2 .ftv2-row em {
    display: block;
    font-style: normal;
    font-family: var(--font-ui);
    font-size: .66rem;
    font-weight: 800;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: rgba(238, 235, 221, .5);
    margin-bottom: .1rem;
}
.ftv2 .ftv2-row a { font-size: .9rem; line-height: 1.6; color: var(--ivory); transition: color .25s ease; }
.ftv2 .ftv2-row a:hover { color: var(--bronze); }

.ftv2 .ftv2-bar {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: .6rem 1.5rem;
    padding: 1.15rem 0;
    border-top: 1px solid rgba(238, 235, 221, .14);
    font-size: .82rem;
}
.ftv2 .ftv2-bar a { color: var(--hero-sub); margin-left: 1.35rem; }
.ftv2 .ftv2-bar a:first-child { margin-left: 0; }
.ftv2 .ftv2-bar a:hover { color: var(--bronze); }

/* --- 03. Centred ribbon --------------------------------------------------- */
.ftv3 {
    background: var(--oxford);
    color: var(--hero-sub);
    margin-top: 2rem;
}
.ftv3 .ftv3-alert {
    background: #7A5312;
    color: #FBEFD8;
    padding: .85rem 0;
}
.ftv3 .ftv3-alert .container {
    display: flex;
    gap: .8rem;
    align-items: flex-start;
}
.ftv3 .ftv3-alert i { font-size: 1.05rem; flex: none; margin-top: .1rem; }
.ftv3 .ftv3-alert p { margin: 0; font-size: .84rem; line-height: 1.7; }
.ftv3 .ftv3-alert a { color: #fff; text-decoration: underline; }

.ftv3 .ftv3-ribbon {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: .35rem 0;
    padding: 1.4rem 0;
    border-bottom: 1px solid rgba(238, 235, 221, .14);
}
.ftv3 .ftv3-ribbon a {
    padding: 0 1.15rem;
    font-family: var(--font-ui);
    font-size: .86rem;
    font-weight: 600;
    color: var(--ivory);
    border-right: 1px solid rgba(238, 235, 221, .2);
    transition: color .25s ease;
}
.ftv3 .ftv3-ribbon a:last-child { border-right: 0; }
.ftv3 .ftv3-ribbon a:hover { color: var(--bronze); }

.ftv3 .ftv3-core { text-align: center; padding: 2.5rem 0 2rem; }
.ftv3 .ftv3-core > img {
    height: 66px;
    width: auto;
    background: #fff;
    border-radius: 10px;
    padding: 5px 9px;
    margin-bottom: 1.1rem;
}
.ftv3 .ftv3-blurb {
    max-width: 68ch;
    margin: 0 auto 1.5rem;
    font-size: .9rem;
    line-height: 1.8;
}
.ftv3 .ftv3-contact {
    list-style: none;
    margin: 0 0 1.5rem;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: .6rem 2rem;
}
.ftv3 .ftv3-contact li { display: inline-flex; align-items: center; gap: .5rem; }
.ftv3 .ftv3-contact i { color: var(--bronze); font-size: .95rem; }
.ftv3 .ftv3-contact a { font-size: .9rem; color: var(--ivory); transition: color .25s ease; }
.ftv3 .ftv3-contact a:hover { color: var(--bronze); }

.ftv3 .ftv3-social { display: flex; justify-content: center; gap: .55rem; }
.ftv3 .ftv3-social a {
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 1px solid rgba(238, 235, 221, .2);
    color: var(--ivory);
    transition: background-color .25s ease, border-color .25s ease, color .25s ease;
}
.ftv3 .ftv3-social a:hover { background: var(--bronze); border-color: var(--bronze); color: #fff; }

.ftv3 .ftv3-bar {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: .6rem 1.5rem;
    padding: 1.15rem 0;
    border-top: 1px solid rgba(238, 235, 221, .14);
    font-size: .82rem;
}
.ftv3 .ftv3-bar a { color: var(--hero-sub); margin-left: 1.35rem; }
.ftv3 .ftv3-bar a:first-child { margin-left: 0; }
.ftv3 .ftv3-bar a:hover { color: var(--bronze); }

@media (max-width: 991.98px) {
    .ftv1 .ftv1-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .ftv2 .ftv2-grid { grid-template-columns: minmax(0, 1fr); gap: 2rem; }
    .ftv2 .ftv2-alert { grid-template-columns: minmax(0, 1fr); gap: .5rem; }
}
@media (max-width: 575.98px) {
    .ftv1 .ftv1-grid { grid-template-columns: minmax(0, 1fr); }
    .ftv1 .ftv1-alert { flex-direction: column; gap: .5rem; }
    .ftv2 .ftv2-links { grid-template-columns: minmax(0, 1fr); }
    .ftv3 .ftv3-ribbon a { border-right: 0; padding: .25rem 1rem; }
}

/* ==========================================================================
   120. Composed page banner (history.php)
   A pre-made image carrying its own text, shown in place of .page-hero.
   ========================================================================== */
.page-banner { display: block; background: var(--oxford); }
.page-banner img { display: block; width: 100%; height: auto; }

/* ==========================================================================
   121. Guide panels — grouped rules inside a card (volunteer roles, CFP guidelines)
   Everything is scoped under .guide-panel: pages reuse .sub-heading and
   .check-list from section 25, and only override them inside the panel.
   ========================================================================== */
.guide-panel {
    height: 100%;
    background: var(--white);
    border: 1px solid var(--line);
    border-radius: var(--r-xl);
    padding: 2.1rem 1.9rem 1.9rem;
    box-shadow: 0 1px 2px rgba(38, 48, 59, .04);
    transition: box-shadow .28s ease, transform .28s ease;
}
.guide-panel:hover {
    transform: translateY(-3px);
    box-shadow: 0 18px 40px rgba(38, 48, 59, .09);
}

.guide-panel .gp-head { padding-bottom: 1.15rem; border-bottom: 1px solid var(--line); }
.guide-panel .gp-flag {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    font-family: var(--font-ui);
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--bronze);
    background: rgba(154, 105, 78, .09);
    border-radius: 999px;
    padding: .32rem .8rem;
    margin-bottom: .85rem;
}
.guide-panel .gp-head h3 {
    font-family: var(--font-display);
    font-size: 1.6rem;
    line-height: 1.25;
    color: var(--oxford);
    margin: 0 0 .5rem;
}
.guide-panel .gp-head p { margin: 0; font-size: .95rem; color: var(--text-muted); }

/* Group heading: .sub-heading's 2rem top margin is too airy stacked this often. */
.guide-panel .gp-group .sub-heading {
    display: flex;
    align-items: center;
    gap: .55rem;
    font-size: 1.02rem;
    margin: 1.5rem 0 .5rem;
}
.guide-panel .gp-group:first-of-type .sub-heading { margin-top: 1.25rem; }
.guide-panel .gp-group .sub-heading i { font-size: 1.05rem; color: var(--bronze); }
.guide-panel .gp-group .check-list li { padding-top: .3rem; padding-bottom: .3rem; }

@media (max-width: 575.98px) {
    .guide-panel { padding: 1.7rem 1.35rem 1.4rem; }
    .guide-panel .gp-head h3 { font-size: 1.4rem; }
}

/* ==========================================================================
   122. Footer — contact rows and the fraud alert
   Scoped under .site-footer / .foot-alert: .fc-* already belongs to the hero
   artwork (section 8), so the contact rows use .ftc-* instead.
   ========================================================================== */
.site-footer .foot-contact { list-style: none; padding: 0; margin: 0; }
.site-footer .foot-contact li {
    display: flex;
    align-items: flex-start;
    gap: .75rem;
    padding: .5rem 0;
}
.site-footer .foot-contact .ftc-icon {
    flex: 0 0 34px;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: rgba(154, 105, 78, .14);
    border: 1px solid rgba(154, 105, 78, .38);
    color: var(--bronze);
    font-size: .92rem;
}
.site-footer .foot-contact .ftc-body { display: flex; flex-direction: column; gap: .1rem; min-width: 0; }
.site-footer .foot-contact .ftc-body b {
    font-family: var(--font-ui);
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--bronze);
}
.site-footer .foot-contact .ftc-body a {
    color: var(--ivory);
    font-size: .92rem;
    line-height: 1.45;
    overflow-wrap: anywhere;
    transition: color .25s ease;
}
.site-footer .foot-contact .ftc-body a:hover { color: var(--bronze); }

.site-footer .foot-alert {
    display: flex;
    align-items: flex-start;
    gap: .9rem;
    margin-top: 2.75rem;
    padding: 1.15rem 1.35rem;
    background: rgba(255, 255, 255, .04);
    border: 1px solid rgba(238, 235, 221, .1);
    border-left: 3px solid var(--warning, #C9A227);
    border-radius: var(--r);
}
.site-footer .foot-alert .fa-icon { color: var(--warning, #C9A227); font-size: 1.1rem; line-height: 1.5; }
.site-footer .foot-alert p { margin: 0; font-size: .84rem; line-height: 1.65; color: var(--hero-sub); }
.site-footer .foot-alert p b { color: var(--ivory); }
.site-footer .foot-alert p a { color: var(--bronze); text-decoration: underline; }

@media (max-width: 575.98px) {
    .site-footer .foot-alert { padding: 1rem 1.05rem; gap: .7rem; }
}

/* ==========================================================================
   123. Call-for-papers block on the sessions page
   The three actions, the nested sub-points inside a .guide-panel, and the
   "haven't heard from us" notes. All scoped under their own roots.
   ========================================================================== */

/* Nested points under a .check-list item, e.g. Structure > Body > Background. */
.guide-panel .gp-sub {
    list-style: none;
    margin: .4rem 0 .2rem;
    padding: 0 0 0 .35rem;
    border-left: 2px solid rgba(154, 105, 78, .22);
}
.guide-panel .gp-sub li {
    position: relative;
    padding: .28rem 0 .28rem 1.1rem;
    font-size: .93rem;
    color: var(--text-body);
}
.guide-panel .gp-sub li::before {
    content: "";
    position: absolute;
    left: .35rem; top: .95rem;
    width: 5px; height: 5px;
    border-radius: 50%;
    background: var(--bronze);
    opacity: .55;
}

/* The three actions under the tracks. */
.cfp-actions {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1.25rem;
}
.cfp-actions .cfp-act {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: .55rem;
    background: var(--white);
    border: 1px solid var(--line);
    border-radius: var(--r-xl);
    padding: 1.6rem 1.5rem;
    transition: box-shadow .28s ease, transform .28s ease;
}
.cfp-actions .cfp-act:hover {
    transform: translateY(-3px);
    box-shadow: 0 16px 36px rgba(38, 48, 59, .09);
}
.cfp-actions .cfp-act > b {
    font-family: var(--font-display);
    font-size: 1.35rem;
    color: var(--oxford);
}
.cfp-actions .cfp-act > span {
    font-size: .9rem;
    color: var(--text-muted);
    margin-bottom: .35rem;
}
.cfp-actions .cfp-act .btn { margin-top: auto; }
.cfp-actions .cfp-act.is-soon .btn {
    pointer-events: none;
    opacity: .55;
}

/* "In Case You Haven't Heard From Us Yet". */
.heard-list { list-style: none; padding: 0; margin: 0; display: grid; gap: .9rem; }
.heard-list li {
    display: flex;
    align-items: flex-start;
    gap: .9rem;
    background: var(--white);
    border: 1px solid var(--line);
    border-left: 3px solid var(--bronze);
    border-radius: var(--r);
    padding: 1rem 1.2rem;
    font-size: .95rem;
    color: var(--text-body);
    line-height: 1.6;
}
.heard-list li .hl-icon {
    flex: 0 0 auto;
    color: var(--bronze);
    font-size: 1.05rem;
    line-height: 1.55;
}
.heard-list li a { color: var(--bronze); text-decoration: underline; overflow-wrap: anywhere; }

@media (max-width: 991.98px) {
    .cfp-actions { grid-template-columns: 1fr; }
}

/* ==========================================================================
   124. Floating WhatsApp button
   Bottom-left, opposite .to-top (section 22) so the two never collide. Always
   on, since it is a contact route rather than a scroll affordance.
   ========================================================================== */
.wa-float {
    position: fixed;
    left: 22px; bottom: 22px;
    width: 52px; height: 52px;
    border-radius: 50%;
    display: grid; place-items: center;
    background: #25D366;
    color: #fff;
    font-size: 1.55rem;
    line-height: 1;
    box-shadow: 0 8px 22px rgba(37, 211, 102, .38);
    z-index: 1050;
    transition: transform .25s ease, box-shadow .25s ease, background-color .25s ease;
}
.wa-float:hover,
.wa-float:focus-visible {
    background: #1EBE5A;
    color: #fff;
    transform: translateY(-3px);
    box-shadow: 0 12px 28px rgba(37, 211, 102, .48);
}
.wa-float:focus-visible { outline: 3px solid rgba(37, 211, 102, .45); outline-offset: 3px; }

/* A quiet pulse, so the button reads as live without demanding attention. */
.wa-float::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 2px solid rgba(37, 211, 102, .55);
    animation: wa-pulse 2.4s ease-out infinite;
}
@keyframes wa-pulse {
    0%   { transform: scale(1);    opacity: .7; }
    70%  { transform: scale(1.45); opacity: 0; }
    100% { transform: scale(1.45); opacity: 0; }
}

@media (max-width: 575.98px) {
    .wa-float { left: 14px; bottom: 14px; width: 46px; height: 46px; font-size: 1.35rem; }
}
@media (prefers-reduced-motion: reduce) {
    .wa-float::after { animation: none; }
}

/* ==========================================================================
   125. Proof of Scopus Indexing
   An inset dark plaque rather than a full-bleed band: the rounded oxford panel
   sitting on the warm section above is what makes it read differently from its
   neighbours, while the palette stays oxford + bronze + ivory. Children use the
   idx- prefix because .sp-* already belongs to the speaker cards (section 12).
   ========================================================================== */
.scopus-proof {
    position: relative;
    overflow: hidden;
    border-radius: clamp(20px, 2.4vw, 34px);
    background:
        radial-gradient(circle at 88% 8%, rgba(154, 105, 78, .3) 0, transparent 52%),
        radial-gradient(circle at 6% 96%, rgba(154, 105, 78, .16) 0, transparent 46%),
        linear-gradient(160deg, #2E3945 0%, var(--oxford) 55%, #1F2831 100%);
    border: 1px solid rgba(154, 105, 78, .34);
    box-shadow: 0 26px 60px rgba(38, 48, 59, .22);
    padding: clamp(2.4rem, 4.4vw, 3.6rem) clamp(1.4rem, 3.6vw, 3.2rem);
}

/* A hairline of bronze along the top edge, the way a certificate is banded. */
.scopus-proof::before {
    content: "";
    position: absolute;
    inset: 0 0 auto;
    height: 3px;
    background: linear-gradient(90deg, transparent, var(--bronze), transparent);
}

.scopus-proof .idx-head { text-align: center; margin-bottom: clamp(1.8rem, 3vw, 2.6rem); }
.scopus-proof .idx-head .eyebrow { color: var(--bronze); }
.scopus-proof .idx-head .eyebrow i { font-size: 1rem; }
.scopus-proof .idx-head h2 {
    font-family: var(--font-display);
    font-size: clamp(1.9rem, 4vw, 2.9rem);
    font-weight: 700;
    color: var(--ivory);
    margin: 0 0 .35rem;
}
.scopus-proof .idx-head h2 em { font-style: normal; color: var(--bronze); }
.scopus-proof .idx-head .rule-bronze { margin: .9rem auto 1.1rem; }
.scopus-proof .idx-head p {
    max-width: 62ch;
    margin: 0 auto;
    font-size: .95rem;
    line-height: 1.7;
    color: var(--hero-sub);
}

/* ---- The carousel, borrowing .tc-track / .tc-nav from .js-tcarousel ---- */
.scopus-proof .idx-carousel { position: relative; }
.scopus-proof .tc-track {
    display: flex;
    align-items: stretch;
    gap: 1.5rem;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    scrollbar-width: none;             /* the arrows are the control */
    -ms-overflow-style: none;
    padding: .35rem .35rem 1rem;       /* room for the cards' hover lift */
}
.scopus-proof .tc-track::-webkit-scrollbar { display: none; }
.scopus-proof .tc-track:focus-visible { outline: 2px solid var(--bronze); outline-offset: 4px; }

.scopus-proof .idx-card {
    flex: 0 0 calc((100% - 3rem) / 3);
    scroll-snap-align: start;
    display: flex;
    flex-direction: column;
    gap: .75rem;
    background: rgba(255, 255, 255, .045);
    border: 1px solid rgba(238, 235, 221, .13);
    border-radius: var(--r);
    padding: 1.35rem 1.3rem;
    transition: transform .3s ease, border-color .3s ease, background-color .3s ease;
}
.scopus-proof .idx-card:hover {
    transform: translateY(-4px);
    background: rgba(255, 255, 255, .07);
    border-color: rgba(154, 105, 78, .55);
}

.scopus-proof .idx-tags { display: flex; flex-wrap: wrap; gap: .45rem; }
.scopus-proof .idx-tag {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    font-family: var(--font-ui);
    font-size: .64rem;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--hero-sub);
    background: rgba(238, 235, 221, .09);
    border: 1px solid rgba(238, 235, 221, .16);
    border-radius: 6px;
    padding: .3rem .55rem;
}
.scopus-proof .idx-tag.is-open {
    color: #fff;
    background: var(--bronze);
    border-color: var(--bronze);
}

.scopus-proof .idx-card h3 {
    font-family: var(--font-ui);
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.4;
    color: var(--ivory);
    margin: 0;
}

.scopus-proof .idx-authors,
.scopus-proof .idx-source {
    display: flex;
    align-items: flex-start;
    gap: .5rem;
    margin: 0;
    font-size: .84rem;
    line-height: 1.55;
    color: var(--bronze);
}
.scopus-proof .idx-authors { color: var(--hero-sub); }
.scopus-proof .idx-authors i,
.scopus-proof .idx-source i { flex: 0 0 auto; opacity: .8; line-height: 1.55; }

/* Separator above the journal, the way a citation sits under its authors. */
.scopus-proof .idx-source {
    padding-top: .75rem;
    border-top: 1px solid rgba(238, 235, 221, .12);
}
.scopus-proof .idx-source.is-pending { color: rgba(238, 235, 221, .45); font-style: italic; }

.scopus-proof .idx-meta {
    margin: auto 0 0;
    padding-top: .5rem;
    font-family: var(--font-ui);
    font-size: .8rem;
    font-weight: 700;
    color: var(--ivory);
}

.scopus-proof .tc-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 38px; height: 38px;
    border-radius: 50%;
    display: grid; place-items: center;
    background: rgba(38, 48, 59, .9);
    border: 1px solid rgba(238, 235, 221, .28);
    color: var(--ivory);
    z-index: 2;
    transition: background-color .25s ease, border-color .25s ease, color .25s ease;
}
.scopus-proof .tc-nav:hover { background: var(--bronze); border-color: var(--bronze); color: #fff; }
.scopus-proof .tc-nav:disabled { opacity: .3; pointer-events: none; }
.scopus-proof .tc-prev { left: -18px; }
.scopus-proof .tc-next { right: -18px; }

@media (max-width: 991.98px) {
    .scopus-proof .idx-card { flex-basis: calc((100% - 1.5rem) / 2); }
    .scopus-proof .tc-prev { left: -8px; }
    .scopus-proof .tc-next { right: -8px; }
}
@media (max-width: 575.98px) {
    .scopus-proof .idx-card { flex-basis: 100%; }
    .scopus-proof .tc-nav { top: auto; bottom: -14px; transform: none; }
    .scopus-proof .tc-prev { left: calc(50% - 52px); }
    .scopus-proof .tc-next { right: calc(50% - 52px); }
}

/* ==========================================================================
   126. Proof of Scopus Indexing — stacked-rows variant (review page)
   Two full-width rows to a page inside the same .scopus-proof plaque. Each
   flex child of the track is a whole page, so one arrow click moves two rows
   and .tc-dots maps to pages one-to-one.
   ========================================================================== */
.idxv-carousel { position: relative; }
.idxv-carousel .tc-track {
    display: flex;
    align-items: stretch;
    gap: 1.5rem;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    scrollbar-width: none;
    -ms-overflow-style: none;
    padding: .35rem .35rem 1rem;
}
.idxv-carousel .tc-track::-webkit-scrollbar { display: none; }
.idxv-carousel .tc-track:focus-visible { outline: 2px solid var(--bronze); outline-offset: 4px; }

.idxv-carousel .idxv-page {
    flex: 0 0 100%;
    scroll-snap-align: start;
    display: grid;
    gap: 1.15rem;
    align-content: start;
}

.idxv-carousel .idxv-row {
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
    gap: 1.5rem 2.25rem;
    background: rgba(255, 255, 255, .045);
    border: 1px solid rgba(238, 235, 221, .13);
    border-radius: var(--r);
    padding: 1.5rem 1.6rem;
    transition: transform .3s ease, border-color .3s ease, background-color .3s ease;
}
.idxv-carousel .idxv-row:hover {
    transform: translateY(-3px);
    background: rgba(255, 255, 255, .07);
    border-color: rgba(154, 105, 78, .55);
}

.idxv-carousel .idxv-main { display: flex; flex-direction: column; gap: .7rem; min-width: 0; }
.idxv-carousel .idxv-main h3 {
    font-family: var(--font-ui);
    font-size: 1.12rem;
    font-weight: 700;
    line-height: 1.38;
    color: var(--ivory);
    margin: 0;
}

/* The citation half, ruled off the title on wide screens. */
.idxv-carousel .idxv-side {
    display: flex;
    flex-direction: column;
    gap: .55rem;
    min-width: 0;
    padding-left: 2.25rem;
    border-left: 1px solid rgba(238, 235, 221, .12);
    margin-left: -2.25rem;
}
.idxv-carousel .idxv-label {
    font-family: var(--font-ui);
    font-size: .64rem;
    font-weight: 700;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--bronze);
    margin: 0;
}

/* The row carries its own rule, so the card's top border is not wanted here. */
.idxv-carousel .idx-source { padding-top: 0; border-top: 0; }
.idxv-carousel .idx-meta { margin-top: .2rem; padding-top: 0; }

/* ---- Dot indicators (main.js fills .tc-dots when one is present) ---- */
.tc-dots {
    display: flex;
    justify-content: center;
    gap: .5rem;
    margin-top: 1.4rem;
}
.tc-dots .tc-dot {
    width: 26px;
    height: 4px;
    border: 0;
    border-radius: 999px;
    padding: 0;
    background: rgba(238, 235, 221, .28);
    cursor: pointer;
    transition: background-color .25s ease, width .25s ease;
}
.tc-dots .tc-dot:hover { background: rgba(238, 235, 221, .5); }
.tc-dots .tc-dot.is-on { width: 34px; background: var(--bronze); }
.tc-dots .tc-dot:focus-visible { outline: 2px solid var(--bronze); outline-offset: 3px; }

.idxv-carousel .tc-nav {
    position: absolute;
    top: calc(50% - .7rem);
    transform: translateY(-50%);
    width: 38px; height: 38px;
    border-radius: 50%;
    display: grid; place-items: center;
    background: rgba(38, 48, 59, .9);
    border: 1px solid rgba(238, 235, 221, .28);
    color: var(--ivory);
    z-index: 2;
    transition: background-color .25s ease, border-color .25s ease, color .25s ease;
}
.idxv-carousel .tc-nav:hover { background: var(--bronze); border-color: var(--bronze); color: #fff; }
.idxv-carousel .tc-nav:disabled { opacity: .3; pointer-events: none; }
.idxv-carousel .tc-prev { left: -18px; }
.idxv-carousel .tc-next { right: -18px; }

@media (max-width: 991.98px) {
    .idxv-carousel .idxv-row { grid-template-columns: 1fr; gap: 1.1rem; }
    .idxv-carousel .idxv-side {
        padding-left: 0;
        margin-left: 0;
        border-left: 0;
        padding-top: 1.1rem;
        border-top: 1px solid rgba(238, 235, 221, .12);
    }
    .idxv-carousel .tc-prev { left: -8px; }
    .idxv-carousel .tc-next { right: -8px; }
}
@media (max-width: 575.98px) {
    .idxv-carousel .idxv-row { padding: 1.25rem 1.15rem; }
    .idxv-carousel .tc-nav { top: auto; bottom: -50px; transform: none; }
    .idxv-carousel .tc-prev { left: calc(50% - 96px); }
    .idxv-carousel .tc-next { right: calc(50% - 96px); }
    .tc-dots { margin-top: 1.1rem; }
}

/* ==========================================================================
   127. Mega-menu promo strip
   The deadline and the one action that matters, at the foot of a panel that
   declares a `promo`. Scoped under .mega so it cannot reach the page body.
   ========================================================================== */
.mega .mega-promo {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: .75rem 1.25rem;
    padding: .8rem 1rem .85rem;
    background: rgba(154, 105, 78, .08);
    border: 1px solid rgba(154, 105, 78, .25);
    border-radius: var(--r-sm);
}
/* As the panel's head band it takes .mega-headcard's spacing and gradient,
   so a panel with a promo and one without still line up. */
.mega .mega-promo.is-head {
    margin-bottom: .75rem;
    background: linear-gradient(100deg,
        rgba(233, 116, 52, .22) 0%,
        rgba(154, 105, 78, .09) 45%,
        var(--white) 100%);
    border-color: rgba(154, 105, 78, .38);
}
.mega .mega-promo .mp-copy { display: flex; flex-direction: column; gap: .15rem; min-width: 0; }
.mega .mega-promo .mp-copy b {
    font-family: var(--font-ui);
    font-size: .95rem;
    font-weight: 700;
    color: var(--oxford);
}
.mega .mega-promo .mp-copy span { font-size: .85rem; color: var(--text-muted); }
.mega .mega-promo .mp-cta {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    flex: none;
    font-family: var(--font-ui);
    font-size: .85rem;
    font-weight: 700;
    color: #fff;
    background: #B44D0D;
    border-radius: 999px;
    padding: .55rem 1.1rem;
    transition: background-color .25s ease, transform .25s ease;
}
/* A darker orange, not --bronze-dark: that would flip the button to brown. */
.mega .mega-promo .mp-cta:hover {
    background: #8F3E0A;
    color: #fff;
    transform: translateX(2px);
}

/* ==========================================================================
   128. Floating conference actions
   Presenter and listener, side by side along the foot of the window. The two
   bottom corners are already taken - .wa-float on the left, and the Tawk.to
   bubble with .to-top on the right - so the pair sits centred between them.
   ========================================================================== */
.float-actions {
    position: fixed;
    left: 50%;
    bottom: 22px;
    transform: translateX(-50%);
    display: flex;
    gap: .5rem;
    z-index: 1049;                     /* just under .to-top and .wa-float */
}
.float-actions .fa-act {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    padding: .62rem 1rem;
    border-radius: 999px;
    font-family: var(--font-ui);
    font-size: .82rem;
    font-weight: 700;
    white-space: nowrap;
    box-shadow: 0 8px 22px rgba(38, 48, 59, .22);
    transition: transform .25s ease, box-shadow .25s ease, background-color .25s ease;
}
.float-actions .fa-act i { font-size: .95rem; }
/* The banner's red, as a literal: --bv8-red is declared on .bv8 itself, so the
   token does not resolve out here. Hover is its partner, --bv8-red-dark. */
.float-actions .fa-act.is-presenter { background: #8C1F2B; color: #fff; }
.float-actions .fa-act.is-presenter:hover { background: #6E1721; color: #fff; }
.float-actions .fa-act.is-listener {
    background: var(--oxford);
    color: var(--ivory);
    border: 1px solid rgba(238, 235, 221, .28);
}
.float-actions .fa-act.is-listener:hover { background: #1F2831; color: #fff; }
.float-actions .fa-act:hover { transform: translateY(-2px); box-shadow: 0 12px 28px rgba(38, 48, 59, .28); }
.float-actions .fa-act:focus-visible { outline: 3px solid var(--bronze); outline-offset: 3px; }

@media (max-width: 991.98px) {
    /* Labels would cover the page at this width; the icons still say enough. */
    .float-actions .fa-act span { display: none; }
    .float-actions .fa-act { width: 46px; height: 46px; padding: 0; justify-content: center; }
    .float-actions .fa-act i { font-size: 1.15rem; }
    .float-actions { bottom: 14px; }
}

/* ==========================================================================
   129. Publication quote - the sentence alone, in quotation marks
   ========================================================================== */
.pub-quote.is-inline p { text-wrap: balance; }

/* ==========================================================================
   130. Destination strip - static row, no marquee
   The strip used to duplicate its five tiles so a marquee could translate by
   -50% and loop. The duplicates read as repeated images, so both the copies
   (index.php) and the animation (here) are gone; section 108's grid governs.
   ========================================================================== */
.venue-spotlight .vs-strip {
    display: grid;
    grid-template-columns: repeat(5, 1fr);   /* commented out for the marquee; back now */
    overflow: visible;
}
/* The marquee rules above hid tiles 4-5 on tablet, then re-showed them. With a
   static grid every tile fits, so they all stay. */
@media (max-width: 991.98px) {
    .venue-spotlight .vs-strip { grid-template-columns: repeat(3, 1fr); }
    .venue-spotlight .vs-strip .vs-tile:nth-child(n+4) { display: block; }
}
@media (max-width: 575.98px) {
    .venue-spotlight .vs-strip { grid-template-columns: repeat(2, 1fr); }
    .venue-spotlight .vs-strip .vs-tile:nth-child(n+3) { display: block; }
}

/* ==========================================================================
   131. Hero organiser line
   Sits under .hkv-theme (section 111), quieter than the theme it follows.
   ========================================================================== */
.hero-kv .hkv-org {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    font-family: var(--font-ui);
    font-size: .9rem;
    color: var(--text-body);
    background: rgba(154, 105, 78, .1);
    border: 1px solid rgba(154, 105, 78, .28);
    border-radius: 999px;
    padding: .35rem .85rem;
    margin: 0 0 16px;
}
.hero-kv .hkv-org i { color: var(--bronze); font-size: .95rem; }
.hero-kv .hkv-org b { font-weight: 700; color: var(--oxford); }

@media (max-width: 767.98px) {
    .hero-kv .hkv-org { font-size: .8rem; padding: .3rem .7rem; }
}

/* ==========================================================================
   132. Registration page — presenter / listener routes
   Sits above the payment step. Every rule is scoped under .reg-cta: .rc-icon
   already belongs to .role-card (section 70) and .route-card (section 91).
   ========================================================================== */
.reg-cta {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.25rem;
}
.reg-cta .rc-act {
    display: flex;
    align-items: center;
    gap: 1rem;
    background: var(--white);
    border: 1px solid var(--line);
    border-radius: var(--r-xl);
    padding: 1.4rem 1.5rem;
    transition: transform .28s ease, box-shadow .28s ease, border-color .28s ease;
}
.reg-cta .rc-act:hover {
    transform: translateY(-3px);
    border-color: rgba(154, 105, 78, .55);
    box-shadow: 0 16px 36px rgba(38, 48, 59, .09);
}
.reg-cta .rc-icon {
    flex: 0 0 48px;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    font-size: 1.2rem;
    background: rgba(154, 105, 78, .12);
    color: var(--bronze);
    transition: background-color .28s ease, color .28s ease;
}
.reg-cta .rc-act:hover .rc-icon { background: var(--bronze); color: #fff; }
.reg-cta .rc-text { display: flex; flex-direction: column; gap: .15rem; min-width: 0; }
.reg-cta .rc-text b {
    font-family: var(--font-display);
    font-size: 1.3rem;
    color: var(--oxford);
}
.reg-cta .rc-text span { font-size: .9rem; color: var(--text-muted); }
.reg-cta .rc-go { margin-left: auto; color: var(--bronze); transition: transform .28s ease; }
.reg-cta .rc-act:hover .rc-go { transform: translateX(4px); }

@media (max-width: 767.98px) {
    .reg-cta { grid-template-columns: 1fr; }
    .reg-cta .rc-text b { font-size: 1.15rem; }
}

/* ==========================================================================
   133. Fee card quoted in another currency
   The rate the organisers publish sits large; the USD actually charged at
   checkout is named under it, so the two can never be confused.
   ========================================================================== */
.fee-cell .fee-price .fee-conv {
    display: block;
    font-family: var(--font-ui);
    font-size: .62rem;
    font-weight: 600;
    font-style: normal;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--text-muted);
    margin-top: .15rem;
}

/* ==========================================================================
   134. Payment advisory
   A warning panel, so it reads as caution without shouting: the amber rule and
   icon carry the alarm, the body stays ordinary reading text. Everything is
   scoped under .pay-advisory (.pa-icon/.pa-ic are local to it).
   ========================================================================== */
.pay-advisory {
    background: var(--white);
    border: 1px solid var(--line);
    border-left: 4px solid var(--warning);
    border-radius: var(--r-xl);
    padding: clamp(1.6rem, 3vw, 2.4rem) clamp(1.3rem, 3vw, 2.4rem);
    box-shadow: 0 10px 30px rgba(38, 48, 59, .06);
}

.pay-advisory .pa-head { display: flex; align-items: center; gap: 1rem; margin-bottom: 1.1rem; }
.pay-advisory .pa-icon {
    flex: 0 0 48px;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    font-size: 1.25rem;
    color: var(--warning);
    background: rgba(249, 168, 37, .14);
}
.pay-advisory .pa-flag {
    font-family: var(--font-ui);
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--bronze);
    margin: 0 0 .15rem;
}
.pay-advisory .pa-head h2 {
    font-family: var(--font-display);
    font-size: clamp(1.5rem, 3vw, 2rem);
    color: var(--oxford);
    margin: 0;
}

.pay-advisory .pa-rule {
    font-family: var(--font-ui);
    font-size: .95rem;
    font-weight: 700;
    color: var(--oxford);
    background: rgba(249, 168, 37, .12);
    border: 1px solid rgba(249, 168, 37, .38);
    border-radius: var(--r-sm);
    padding: .7rem 1rem;
    margin: 0 0 1.1rem;
}

.pay-advisory .pa-text {
    font-size: .96rem;
    line-height: 1.75;
    color: var(--text-body);
    text-align: justify;
    margin: 0 0 1.5rem;
}

.pay-advisory .pa-contact {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
}
.pay-advisory .pa-item {
    display: flex;
    align-items: center;
    gap: .85rem;
    background: var(--warm-ivory);
    border: 1px solid var(--line);
    border-radius: var(--r);
    padding: .95rem 1.1rem;
    transition: border-color .25s ease, transform .25s ease;
}
.pay-advisory .pa-item:hover { border-color: rgba(154, 105, 78, .55); transform: translateY(-2px); }
.pay-advisory .pa-ic {
    flex: 0 0 38px;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: rgba(154, 105, 78, .12);
    color: var(--bronze);
    font-size: .95rem;
}
.pay-advisory .pa-body { display: flex; flex-direction: column; gap: .1rem; min-width: 0; }
.pay-advisory .pa-body b {
    font-family: var(--font-ui);
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--bronze);
}
.pay-advisory .pa-body span { font-size: .95rem; color: var(--oxford); overflow-wrap: anywhere; }

@media (max-width: 767.98px) {
    .pay-advisory .pa-contact { grid-template-columns: 1fr; }
    .pay-advisory .pa-text { text-align: left; }
    .pay-advisory .pa-rule { font-size: .85rem; }
}

/* ==========================================================================
   135. Talk to us form — the paired fields
   Scoped under their own roots; both sit inside .form-card, so the controls
   already carry the form styling and only the pairing is defined here.
   ========================================================================== */
.talk-phone {
    display: grid;
    grid-template-columns: 96px minmax(0, 1fr);
    gap: .5rem;
}

.talk-range {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    align-items: center;
    gap: .6rem;
}
.talk-range .tr-sep {
    font-family: var(--font-ui);
    font-size: .82rem;
    font-weight: 600;
    color: var(--text-muted);
}

@media (max-width: 575.98px) {
    .talk-range { grid-template-columns: 1fr; }
    .talk-range .tr-sep { justify-self: center; }
}

/* ==========================================================================
   136. Session banner — SDGs aligned
   The official marks alone, square, under .page-hero-meta on session-detail.php.
   No caption: the goal name rides on the image's alt/title instead.
   ========================================================================== */
.page-hero--session .hero-sdg { margin-top: 1.35rem; }

.page-hero--session .hs-label {
    font-family: var(--font-ui);
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--bronze);
    margin: 0 0 .55rem;
}

.page-hero--session .hs-list {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: .55rem;
    padding: 0;
    margin: 0;
}

/* Square, and sized by the tile rather than the image, so an icon that is not
   perfectly square still fills it without distorting. */
.page-hero--session .hs-badge {
    width: 62px;
    height: 62px;
    border-radius: 6px;
    overflow: hidden;
    border: 1px solid rgba(238, 235, 221, .3);
    background: rgba(12, 18, 25, .35);
    transition: transform .25s ease, border-color .25s ease;
}
.page-hero--session .hs-badge:hover {
    transform: translateY(-2px);
    border-color: rgba(238, 235, 221, .6);
}
.page-hero--session .hs-badge img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

@media (max-width: 575.98px) {
    .page-hero--session .hs-badge { width: 50px; height: 50px; }
}

/* ==========================================================================
   137. Quick Links rail (About pages)
   Sits at the top right, under the banner. Right-aligned so it reads as
   secondary navigation rather than as the page's own content.
   ========================================================================== */
.quick-rail {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: .5rem .85rem;
}
.quick-rail .qr-label {
    font-family: var(--font-ui);
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--bronze);
}
.quick-rail ul {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: .5rem;
    padding: 0;
    margin: 0;
}
.quick-rail .qr-link {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    font-family: var(--font-ui);
    font-size: .82rem;
    font-weight: 600;
    color: var(--oxford);
    background: var(--warm-ivory);
    border: 1px solid var(--line);
    border-radius: 999px;
    padding: .4rem .9rem;
    transition: border-color .25s ease, background-color .25s ease, color .25s ease;
}
.quick-rail .qr-link i { color: var(--bronze); font-size: .9rem; }
.quick-rail a.qr-link:hover {
    background: var(--bronze);
    border-color: var(--bronze);
    color: #fff;
}
.quick-rail a.qr-link:hover i { color: #fff; }

/* The page you are already on: shown, but not offered as somewhere to go. */
.quick-rail .qr-link.is-here {
    background: transparent;
    border-style: dashed;
    color: var(--text-small);
    cursor: default;
}
.quick-rail .qr-link.is-here i { color: var(--text-small); }

@media (max-width: 767.98px) {
    .quick-rail,
    .quick-rail ul { justify-content: flex-start; }
}

/* ==========================================================================
   138. About IFERP — supplied infographics
   Both are wide PNGs with their own white ground, so they sit on a plain card
   rather than being cropped or given a coloured backdrop that would clash.
   ========================================================================== */
.org-figure {
    margin: 2.75rem 0 0;
    background: var(--white);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    padding: clamp(.75rem, 1.6vw, 1.4rem);
    overflow: hidden;
}
.org-figure img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: var(--r-sm);
}

/* Beside the mission statements it is a column, not a trailing band. */
#mission .org-figure { margin: 0; }

@media (max-width: 991.98px) {
    .org-figure { margin-top: 2rem; }
}

/* ==========================================================================
   139. Banner variant 08 — supplied key visual (review page)
   ban-bg.png is the skyline, ban-side.png the globe on its own layer above it.
   Everything is scoped under .bv8 so this cannot touch the live banner, which
   is .hero-kv (section 111).

   The reference artwork is deep maroon rather than the site's bronze, so the
   accent is a local token here. Swap --bv8-red for var(--bronze) to put this
   variant back on the site palette.
   ========================================================================== */
.bv8 {
    --bv8-red:      #8C1F2B;
    --bv8-red-dark: #6E1721;

    position: relative;
    overflow: hidden;
    background: var(--warm-ivory);          /* shows through while the PNG loads */
    /* The artwork is 1920x819, so the section keeps its proportions instead of
       squeezing the composition into an arbitrary height. */
    aspect-ratio: 1920 / 819;
    min-height: 420px;
    display: flex;
    align-items: center;
}

.bv8 .bv8-bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

.bv8 .bv8-inner {
    width: 100%;
    max-width: 1350px;
    margin-inline: auto;
    padding: 0 clamp(1rem, 3.5vw, 3.5rem);
    display: grid;
    /* Copy, then the gap the globe sits in, then the card. */
    grid-template-columns: minmax(0, 1fr) minmax(0, .58fr);
    align-items: center;
    gap: clamp(1rem, 6vw, 5.5rem);
}

/* Both text layers sit above the globe. Without an explicit z-index the card is
   unpositioned and the absolutely positioned globe paints straight over it. */
.bv8 .bv8-copy,
.bv8 .bv8-facts { position: relative; z-index: 2; min-width: 0; }

/* ---- Left: the wording ---- */
.bv8 .bv8-pill {
    display: inline-block;
    font-family: var(--font-ui);
    font-size: clamp(.72rem, .95vw, .95rem);
    font-weight: 700;
    letter-spacing: .1em;
    color: #fff;
    background: var(--bv8-red);
    border-radius: 999px;
    padding: .62rem 1.7rem;
    margin: 0 0 clamp(.9rem, 1.6vw, 1.5rem);
}
.bv8 .bv8-copy h1 {
    font-family: var(--font-ui);
    /* Held to three-quarters of the copy column so the headline breaks well
       clear of the globe instead of running up against it. */
    width: 75%;
    /* Smaller ceiling than the old three-word theme needed: this headline is
       the full conference name, so it runs to three or four lines. */
    font-size: clamp(1.3rem, 2.5vw, 2.5rem);
    font-weight: 800;
    line-height: 1.16;
    letter-spacing: -.015em;
    text-wrap: balance;
    color: #14233A;
    margin: 0 0 clamp(.7rem, 1.3vw, 1.15rem);
}
.bv8 .bv8-copy h1 em { font-style: normal; color: var(--bv8-red); }
.bv8 .bv8-lead {
    max-width: 52ch;                        /* lets "Multi-Disciplinary Research
                                               Studies and Education" hold one line */
    font-size: clamp(.82rem, 1.05vw, 1.08rem);
    line-height: 1.55;
    color: #000;
    margin: 0 0 clamp(1.1rem, 2.2vw, 2rem);
    font-style: italic;
}
/* Upright, so the label reads as a label against the italic theme beside it. */
.bv8 .bv8-lead b { font-style: normal; font-weight: 700; color: var(--bv8-red); }

.bv8 .bv8-actions { display: flex; flex-wrap: wrap; gap: clamp(.6rem, 1.2vw, 1.15rem); }
.bv8 .bv8-btn {
    display: inline-flex;
    align-items: center;
    gap: .75rem;
    font-family: var(--font-ui);
    font-size: clamp(.8rem, .98vw, 1rem);
    font-weight: 700;
    border-radius: 999px;
    padding: clamp(.6rem, .8vw, .95rem) clamp(1.1rem, 2vw, 2rem);
    transition: transform .25s ease, background-color .25s ease, color .25s ease;
}
.bv8 .bv8-btn i { font-size: 1.05em; }
.bv8 .bv8-btn.is-primary { background: var(--bv8-red); color: #fff; }
.bv8 .bv8-btn.is-primary:hover { background: var(--bv8-red-dark); color: #fff; transform: translateY(-2px); }
.bv8 .bv8-btn.is-ghost {
    background: rgba(255, 255, 255, .72);
    border: 1.5px solid var(--bv8-red);
    color: var(--bv8-red);
}
.bv8 .bv8-btn.is-ghost:hover { background: var(--bv8-red); color: #fff; transform: translateY(-2px); }

/* ---- Centre: the globe, on its own layer so it can be moved freely ----
   Centred on 62% of the banner's width and 96% of its height, matching where it
   falls in the reference: overlapping neither the copy nor the card's text, but
   tucking its lower-right icons just behind the card. Percentages resolve against
   .bv8 because this is a direct child of it. */
.bv8 .bv8-globe {
    position: absolute;
    z-index: 1;
    top: 55%;
    left: 63.5%;
    transform: translate(-50%, -50%);
    height: 80%;
    width: auto;
    max-width: none;
    pointer-events: none;
}

/* ---- Right: the fact card ---- */
.bv8 .bv8-facts {
    justify-self: end;
    width: min(100%, 360px);
    background: rgba(58, 34, 28, .74);
    border: 1px solid rgba(255, 255, 255, .22);
    border-radius: clamp(14px, 1.6vw, 26px);
    padding: clamp(1.1rem, 1.9vw, 1.9rem) clamp(1rem, 1.7vw, 1.7rem);
    backdrop-filter: blur(5px);
    color: #fff;
}
.bv8 .bv8-row {
    display: flex;
    align-items: flex-start;
    gap: .8rem;
    margin: 0;
    /* Not inherited from .bv8-facts: these rows are <p>, and the bare
       `p { color: var(--text-body) }` in section 3 is a rule on the element
       itself, so it beats the card's inherited white and renders them black
       on the dark card. .bv8-mode states its colour for the same reason. */
    color: #fff;
    padding: clamp(.6rem, 1.1vw, 1.05rem) 0;
    border-bottom: 1px solid rgba(255, 255, 255, .28);
    font-size: clamp(.8rem, .98vw, 1.02rem);
    line-height: 1.45;
}
.bv8 .bv8-row:first-child { padding-top: 0; }
.bv8 .bv8-row i { color: #E8A33D; font-size: 1.15em; line-height: 1.35; flex: none; }
.bv8 .bv8-row b { font-weight: 600; }
.bv8 .bv8-mode {
    margin: clamp(.6rem, 1.1vw, 1.05rem) 0 0;
    font-size: clamp(.74rem, .9vw, .95rem);
    line-height: 1.45;
    color: rgba(255, 255, 255, .92);
}
.bv8 .bv8-org {
    margin-top: clamp(.8rem, 1.4vw, 1.3rem);
    padding-top: clamp(.7rem, 1.2vw, 1.15rem);
    border-top: 1px solid rgba(255, 255, 255, .28);
}
.bv8 .bv8-org span {
    display: block;
    font-family: var(--font-ui);
    font-size: clamp(.78rem, .92vw, .98rem);
    color: #E8A33D;
    margin-bottom: .2rem;
}
.bv8 .bv8-org b {
    font-family: var(--font-ui);
    font-size: clamp(.85rem, 1.02vw, 1.08rem);
    font-weight: 700;
}

/* ---- Narrow: the artwork's composition stops working, so it reflows ---- */
@media (max-width: 1199.98px) {
    .bv8 .bv8-globe { left: 64%; height: 82%; }
    .bv8 .bv8-facts { width: min(100%, 300px); }
}
@media (max-width: 991.98px) {
    .bv8 {
        aspect-ratio: auto;
        min-height: 0;
        padding: clamp(2rem, 5vw, 3rem) 0;
    }
    .bv8 .bv8-inner { grid-template-columns: 1fr; gap: 1.75rem; }
    .bv8 .bv8-globe { display: none; }
    /* The 75% only exists to break the headline clear of the globe. With the
       globe gone there is nothing to clear, and holding the width just wraps
       the title to five lines with the column's right quarter left empty. */
    .bv8 .bv8-copy h1 { width: auto; }
    .bv8 .bv8-facts { justify-self: start; width: 100%; max-width: min(420px, 100%); }
    .bv8 .bv8-bg { object-position: 72% center; }
}
@media (max-width: 575.98px) {
    .bv8 .bv8-btn { width: 100%; justify-content: center; }
    .bv8 .bv8-bg { object-position: 22% center; }
    /* A light wash so the oxford heading and body keep their contrast
       wherever the artwork happens to crop to. */
    .bv8::after {
        content: "";
        position: absolute;
        inset: 0;
        z-index: 1;
        pointer-events: none;
        background: linear-gradient(180deg, rgba(255, 252, 248, .82) 0%,
                                            rgba(255, 252, 248, .62) 58%,
                                            rgba(255, 252, 248, .28) 100%);
    }
    .bv8 .bv8-inner { position: relative; z-index: 2; }
}

/* ==========================================================================
   140. Key visual as the homepage hero
   .bv8 (section 139) adopted onto index.php. Only the things a hero needs that
   a review-page specimen does not: clearance for the overlaid nav bar, and the
   map link inside the fact card.
   ========================================================================== */

/* The overlay bar sits on top of the banner, so the banner is pulled up under
   it and given that height back as padding - the same trick .hero-kv used. */
.site-nav--over + .bv8--hero { margin-top: calc(-1 * var(--nav-over-h, 59px)); }
.bv8--hero { padding-top: var(--nav-over-h, 59px); }

.bv8 .bv8-map {
    /* Its own line: the address wraps to two lines, and inline the link ran on
       from "Malaysia" and read as part of the address. */
    display: flex;
    width: fit-content;
    align-items: center;
    gap: .35rem;
    margin-top: .3rem;
    font-size: .82em;
    color: #E8A33D;
    text-decoration: underline;
    text-underline-offset: 2px;
}
.bv8 .bv8-map:hover { color: #fff; }

/* ---- The strip that carries what the old banner held in its corners ---- */
.kv-proof {
    background: var(--oxford);
    color: var(--ivory);
    padding: 1.15rem 0;
}
.kv-proof > .container {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1rem 2rem;
}

.kv-proof .kvp-stats { display: flex; flex-wrap: wrap; gap: .5rem 1.75rem; }
.kv-proof .kvp-stats > div {
    display: grid;
    grid-template-columns: 26px auto 1fr;
    align-items: center;
    column-gap: .55rem;
}
.kv-proof .kvp-stats i { color: var(--bronze); font-size: 1.15rem; }
.kv-proof .kvp-stats b {
    font-family: var(--font-ui);
    font-size: 1.25rem;
    font-weight: 800;
    line-height: 1;
}
/* Direct child: the counting figure is a span too, one level deeper inside
   <b>, and a bare descendant rule here would set it to label size. */
.kv-proof .kvp-stats > div > span { font-size: .82rem; color: var(--hero-sub); }
/* Hands the counting figure back to this band. A bare `span.count { font-size:
   34px; color: #ff5b00 }` lives in the counter-card section and would otherwise
   render these orange at 34px - the same fault logged as bug-018. */
.kv-proof .kvp-stats b .count {
    color: inherit;
    font-size: inherit;
    font-family: inherit;
    font-weight: inherit;
    font-variant-numeric: tabular-nums;
}

.kv-proof .kvp-impact { display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; }
.kv-proof .kvp-impact > div { display: flex; align-items: center; gap: .5rem; }
.kv-proof .kvp-impact i { color: var(--bronze); font-size: 1.05rem; }
.kv-proof .kvp-impact span {
    font-family: var(--font-ui);
    font-size: .72rem;
    line-height: 1.25;
    color: var(--hero-sub);
}
.kv-proof .kvp-impact b { display: block; font-weight: 700; color: var(--ivory); }

/* Three stats and four pillars need about 1158px side by side, but the
   container is only 1140px at 1400 and 960px at 1200, so the pillars wrapped
   to a line of their own and sat stranded at the left. Dropping the third
   stat buys back enough width for the whole band to hold one line.
   Below 992 the band is left-aligned by design, so this stops at 1100. */
@media (min-width: 1100px) and (max-width: 1399.98px) {
    .kv-proof .kvp-stats > div:nth-child(3) { display: none; }
    .kv-proof > .container { gap: 1rem 1.25rem; }
    .kv-proof .kvp-stats { gap: .5rem 1.4rem; }
    .kv-proof .kvp-impact { gap: .5rem 1.15rem; }
}
@media (max-width: 991.98px) {
    .kv-proof > .container { justify-content: flex-start; }
}
@media (max-width: 575.98px) {
    .kv-proof .kvp-impact { display: none; }   /* four taglines is too much here */
    .kv-proof .kvp-stats { gap: .5rem 1.1rem; }
}

/* ==========================================================================
   141. Partners page — the logo wall and its closing call
   --------------------------------------------------------------------------
   Sixty marks from sixty different institutions, each supplied at its own size
   and on its own background. The cell does the levelling: a fixed box, a white
   ground and object-fit: contain, so no logo is cropped or stretched and the
   grid reads as one wall rather than sixty loose images.

   Every rule is scoped under .partner-* and nothing here is a bare class.
   ========================================================================== */
.partner-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
    gap: 1rem;
    margin: 2.5rem 0 0;
    padding: 0;
    list-style: none;
}
.partner-cell {
    display: grid;
    place-items: center;
    height: 120px;
    padding: 1rem;
    background: var(--white);
    border: 1px solid var(--line);
    border-radius: var(--r);
    transition: border-color .25s ease, box-shadow .25s ease, transform .25s ease;
}
.partner-cell:hover {
    border-color: rgba(154, 105, 78, .45);
    box-shadow: 0 12px 26px rgba(38, 48, 59, .09);
    transform: translateY(-3px);
}
/* contain, never cover: these are wordmarks, and cropping one makes it wrong.
   min-width/min-height must be 0: a grid item defaults to min-*: auto, which
   refuses to shrink below the image's intrinsic size, and max-height: 100%
   then never applies - 40 of these 60 logos spilled out of their cells. */
.partner-cell img {
    min-width: 0;
    min-height: 0;
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
}

.partner-note {
    display: flex;
    align-items: flex-start;
    gap: .55rem;
    max-width: 70ch;
    margin: 2rem auto 0;
    font-size: .85rem;
    line-height: 1.6;
    color: var(--text-2);
    text-align: left;
}
.partner-note i { color: var(--bronze); margin-top: .15rem; }

.partner-cta {
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
    align-items: center;
    gap: clamp(1.5rem, 4vw, 3rem);
    padding: clamp(1.75rem, 3.5vw, 2.75rem);
    background: var(--white);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
}
.partner-cta h2 {
    margin: 0 0 .6rem;
    font-family: var(--font-display);
    font-size: clamp(1.5rem, 2.6vw, 2.1rem);
    color: var(--oxford);
}
.partner-cta p { margin: 0; color: var(--text-2); font-size: .95rem; line-height: 1.7; }
.partner-cta__actions { display: flex; flex-wrap: wrap; gap: .7rem; }

@media (max-width: 767.98px) {
    .partner-grid { grid-template-columns: repeat(auto-fill, minmax(135px, 1fr)); gap: .7rem; }
    .partner-cell { height: 96px; padding: .7rem; }
    .partner-cta { grid-template-columns: 1fr; }
    .partner-cta__actions .btn { width: 100%; justify-content: center; }
}

/* The "view all" line under the homepage logo strip. Scoped to .logo-rail so
   it cannot reach the partners page's own grid. */
.logo-rail .lr-more { margin: 1.4rem 0 0; text-align: center; }
.logo-rail .lr-more a {
    display: inline-flex;
    align-items: center;
    font-family: var(--font-ui);
    font-size: .88rem;
    font-weight: 700;
    color: var(--bronze);
}
.logo-rail .lr-more a:hover { color: var(--bronze-dark); }