/* ==================================================================
   EngiTech 2027 - 16th ICRCET
   Theme stylesheet

   The content PDF supplies no palette or type spec, so the identity below
   was built for the conference subject (engineering + technology) and the
   IFERP house style:
     #071A33 midnight   #0B2545 navy    #123A6B steel
     #0E5FD8 brand blue #3FA9F5 azure   #F5A524 amber (highlight)
     #EEF4FC mist       #F7FAFD cloud
   Typography: Space Grotesk (display / headings), Inter (body copy)
   ================================================================== */

/* ------------------------------- 1. Tokens ------------------------ */
:root {
    --ic-midnight: #071A33;
    --ic-navy:     #0B2545;
    --ic-steel:    #123A6B;
    --ic-brand:    #0E5FD8;
    --ic-azure:    #3FA9F5;
    /* The same colours as bare R, G, B channels, for rgba(var(--x-rgb), .5)
       tints - so a theme only has to redefine the tokens, not ~320 rules. */
    --ic-midnight-rgb: 7, 26, 51;
    --ic-navy-rgb:     11, 37, 69;
    --ic-steel-rgb:    18, 58, 107;
    --ic-brand-rgb:    14, 95, 216;
    --ic-azure-rgb:    63, 169, 245;
    --ic-brand-dark:   #0a4fb8;
    /* Pale tints of azure for text on navy. */
    --ic-azure-soft:   #a3d2ff;
    --ic-azure-pale:   #cfe6fb;
    --ic-amber:    #F5A524;

    --ic-mist:  #EEF4FC;
    --ic-cloud: #F7FAFD;
    --ic-white: #ffffff;

    --ic-ink:  #0E1A2B;
    --ic-body: #4A5A6E;
    /* Secondary text - a step lighter than body, a step darker than mute.
       Used by 19 rules that were referencing it before it was defined (they
       fell back to the inherited colour, which is why the SDG codes in the
       Call for Papers list came out link-blue). */
    --ic-slate: #5A6A7F;
    --ic-mute: #7A8CA3;
    --ic-line: rgba(11, 37, 69, .10);

    --font-display: 'Space Grotesk', 'Segoe UI', sans-serif;
    --font-body:    'Inter', 'Segoe UI', sans-serif;

    --radius-sm: 10px;
    --radius:    16px;
    --radius-lg: 24px;

    --shadow-sm: 0 4px 14px rgba(var(--ic-navy-rgb), .07);
    --shadow:    0 14px 40px rgba(var(--ic-navy-rgb), .10);
    --shadow-lg: 0 26px 70px rgba(var(--ic-midnight-rgb), .20);

    --ease: cubic-bezier(.22, .61, .36, 1);

    --header-h: 84px;
}

/* ---------- Theme: crimson & navy (site-wide) ----------
   From the supplied palette: #151C2E deep navy, #243B55 / #384B68 slate
   navies, #FFA06B peach, #B8142E crimson, #5E1A2B wine. Redefining the
   tokens on <body> re-colours everything below it - including the ~290
   tints that read the *-rgb channels. includes/header.php puts the class
   on every page; $body_class overrides it. */
body.theme-crimson {
    --ic-midnight: #151C2E;   --ic-midnight-rgb: 21, 28, 46;
    --ic-navy:     #1F2A44;   --ic-navy-rgb:     31, 42, 68;
    --ic-steel:    #384B68;   --ic-steel-rgb:    56, 75, 104;
    --ic-brand:    #B8142E;   --ic-brand-rgb:    184, 20, 46;
    --ic-azure:    #FFA06B;   --ic-azure-rgb:    255, 160, 107;
    --ic-brand-dark: #8E0F24;
    --ic-azure-soft: #FFC4A3;
    --ic-azure-pale: #FFE3D3;
    --ic-wine:     #5E1A2B;
    /* Light grounds warm up to match - the blue-tinted mist would clash. */
    --ic-mist:  #FBF1EE;
    --ic-cloud: #FDF8F6;
    /* --ic-line is resolved where it is declared (:root), so it has to be
       restated here or it keeps the old navy. */
    --ic-line: rgba(31, 42, 68, .10);
}

/* ---------- Theme: "Ember" (index-ember.php) ----------
   The same six supplied colours as the live theme, pushed harder: the wine
   and the peach do real work instead of sitting in reserve. Everything is
   scoped to body.theme-ember, so the rest of the site is untouched. */
body.theme-ember {
    --ic-midnight: #151C2E;   --ic-midnight-rgb: 21, 28, 46;
    --ic-navy:     #243B55;   --ic-navy-rgb:     36, 59, 85;
    --ic-steel:    #384B68;   --ic-steel-rgb:    56, 75, 104;
    --ic-brand:    #C0142F;   --ic-brand-rgb:    192, 20, 47;
    --ic-azure:    #FFA068;   --ic-azure-rgb:    255, 160, 104;
    --ic-brand-dark: #8E0F24;
    --ic-wine:     #5E1A2B;   --ic-wine-rgb:     94, 26, 43;
    --ic-azure-soft: #FFC4A3;
    --ic-azure-pale: #FFE3D3;
    /* Light grounds carry a hint of the peach rather than being plain grey. */
    --ic-mist:  #FDF0E8;
    --ic-cloud: #FFF8F4;
    --ic-line:  rgba(94, 26, 43, .12);
}

/* Dark sections become a wine-to-navy sweep instead of flat midnight. */
body.theme-ember .bg-navy {
    background:
        radial-gradient(900px 420px at 88% 8%, rgba(var(--ic-brand-rgb), .30), transparent 62%),
        linear-gradient(140deg, var(--ic-midnight) 0%, #22203A 45%, var(--ic-wine) 100%);
}
/* Buttons: crimson into wine, with a peach edge picked up on hover. */
body.theme-ember .btn-brand {
    background: linear-gradient(135deg, var(--ic-brand), var(--ic-wine));
    border-color: transparent;
    box-shadow: 0 12px 26px rgba(var(--ic-brand-rgb), .34);
}
body.theme-ember .btn-brand:hover,
body.theme-ember .btn-brand:focus {
    background: linear-gradient(135deg, var(--ic-azure), var(--ic-brand));
    border-color: transparent;
    color: #fff;
}
/* Highlighted words in headings run crimson into peach. */
body.theme-ember .section-title .accent,
body.theme-ember .cta-title .accent {
    background: linear-gradient(100deg, var(--ic-brand), #E8563F 55%, var(--ic-azure));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}
/* On dark grounds the gradient would disappear, so keep those peach. */
body.theme-ember .bg-navy .section-title .accent,
body.theme-ember .hero-title .accent {
    background: none;
    -webkit-text-fill-color: var(--ic-azure);
    color: var(--ic-azure);
}
/* Section labels get the wine tint rather than a flat blue-grey chip. */
body.theme-ember .eyebrow {
    background: linear-gradient(120deg, rgba(var(--ic-brand-rgb), .12), rgba(var(--ic-azure-rgb), .18));
    border-color: rgba(var(--ic-brand-rgb), .26);
}
/* Banner: warm the veil so the photograph sits in the palette. */
body.theme-ember .hero-veil {
    background:
        radial-gradient(ellipse 80% 65% at 50% 48%, rgba(var(--ic-midnight-rgb), .62) 0%, rgba(var(--ic-wine-rgb), .28) 60%, rgba(var(--ic-midnight-rgb), .80) 100%),
        linear-gradient(180deg, rgba(var(--ic-midnight-rgb), .78) 0%, rgba(var(--ic-wine-rgb), .42) 45%, rgba(var(--ic-midnight-rgb), .94) 100%);
}
/* Cards lift with a warm glow instead of a grey shadow. */
body.theme-ember .cfp-ladder li:hover,
body.theme-ember .gg-panel,
body.theme-ember .reason-card:hover,
body.theme-ember .involve-card:hover {
    box-shadow: 0 18px 40px rgba(var(--ic-wine-rgb), .16);
}
body.theme-ember .cfp-ladder li { border-top-color: var(--ic-brand); }
/* The two counters and the ordinals pick up the peach. */
body.theme-ember .gg-counts dt,
body.theme-ember .cl-num { color: var(--ic-wine); }
body.theme-ember .cl-num { -webkit-text-stroke-color: rgba(var(--ic-brand-rgb), .45); }

/* Ember header: the flat navy bar read as blue against the warm page, so
   both bars become wine-to-navy sweeps with a peach hairline between them. */
/* The top bar stays flat midnight (the base rule) - only the nav bar below
   it carries the wine sweep. */
/* White header. The topbar above it stays dark, so the two read as a dark
   strip over a white bar rather than one block. */
body.theme-ember .site-header {
    background: var(--ic-white);
    border-bottom: 1px solid var(--ic-line);
    box-shadow: 0 2px 20px rgba(var(--ic-midnight-rgb), .07);
}
/* Scrolled state: the same white, just translucent over what passes under. */
body.theme-ember .site-header.is-stuck {
    background: rgba(255, 255, 255, .97);
    box-shadow: 0 8px 28px rgba(var(--ic-midnight-rgb), .12);
}

/* Everything in the bar was written for a dark background and has to turn
   over with it: the nav sat at 85% white, which is invisible on white. */
body.theme-ember .mn-link { color: var(--ic-ink); }
body.theme-ember .mn-link:hover,
body.theme-ember .mn-link.active,
body.theme-ember .has-panel.is-open .mn-link { color: var(--ic-brand); }
/* Crimson underline, not the peach - peach on white is about 1.9:1. */
body.theme-ember .mn-link::after { background: var(--ic-brand); }
/* The hamburger bars are #fff in the base rule. */
body.theme-ember .toggler-bar { background: var(--ic-ink); }
body.theme-ember .topbar-info i,
body.theme-ember .topbar-info a:hover { color: var(--ic-azure); }
body.theme-ember .topbar-social a:hover { background: var(--ic-azure); color: var(--ic-midnight); }

/* Ember banner: the scrim was navy-on-navy and read cool against the warm
   header. Wine at the edges, deep midnight through the middle where the
   heading sits, plus a low crimson glow so it belongs to the palette. */
body.theme-ember .page-banner.has-photo .pb-veil {
    /* Same veil as the home banner, so the two read as one design. */
    background:
        radial-gradient(ellipse 80% 65% at 50% 48%, rgba(var(--ic-midnight-rgb), .62) 0%, rgba(var(--ic-wine-rgb), .28) 60%, rgba(var(--ic-midnight-rgb), .80) 100%),
        linear-gradient(180deg, rgba(var(--ic-midnight-rgb), .78) 0%, rgba(var(--ic-wine-rgb), .42) 45%, rgba(var(--ic-midnight-rgb), .94) 100%);
}
/* The plain (no photograph) banner gets the same warmth. */
body.theme-ember .page-banner {
    background: linear-gradient(115deg, var(--ic-midnight) 0%, #2A2036 52%, var(--ic-wine) 100%);
}

/* ------------------------------- 2. Base -------------------------- */
* { scroll-margin-top: 110px; }

html { scroll-behavior: smooth; }

body {
    font-family: var(--font-body);
    font-size: 1rem;
    line-height: 1.75;
    color: #000000;
    background: var(--ic-white);
    overflow-x: hidden;
}

/* `clip` contains the stray half-gutter a Bootstrap row leaves at narrow
   widths without turning the page into a scroll container - which is what
   `overflow: hidden` would do, breaking every position: sticky element.
   Declared after the rule above so browsers without `clip` keep the
   `hidden` fallback on body alone. */
@supports (overflow: clip) {
    html, body { overflow-x: clip; }
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-display);
    color: var(--ic-ink);
    font-weight: 700;
    line-height: 1.25;
    letter-spacing: -.01em;
}

a { text-decoration: none; color: var(--ic-brand); transition: color .25s var(--ease); }
a:hover { color: var(--ic-steel); }

img { max-width: 100%; height: auto; }

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

::-webkit-scrollbar { width: 10px; }
::-webkit-scrollbar-track { background: var(--ic-mist); }
::-webkit-scrollbar-thumb { background: var(--ic-steel); border-radius: 20px; }
::-webkit-scrollbar-thumb:hover { background: var(--ic-brand); }

/* Hidden by clipping rather than by an off-canvas offset, so it never
   contributes to the document width. */
.skip-link {
    position: absolute;
    top: 0; left: 0;
    z-index: 2000;
    background: var(--ic-brand);
    color: #fff;
    padding: 12px 22px;
    border-radius: 0 0 var(--radius-sm) 0;
    clip-path: inset(50%);
}
.skip-link:focus { clip-path: none; color: #fff; }

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

/* ------------------------------- 3. Helpers ----------------------- */
.section { padding: 44px 0; position: relative; }
.section-tight { padding: 48px 0; position: relative; }

.bg-mist  { background: linear-gradient(180deg, var(--ic-cloud) 0%, var(--ic-mist) 100%); }
.bg-cloud { background: var(--ic-cloud); }
.bg-navy  { background: var(--ic-midnight); }

.section-head { max-width: 820px; margin: 0 auto 56px; text-align: center; }
.section-head-sm { margin-bottom: 34px; }

.eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: var(--font-display);
    /* QA #10/#12: .76rem read as too small. Raised for every section label
       at once so they stay one size across the site. */
    font-size: .92rem;
    font-weight: 600;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--ic-brand);
    background: rgba(var(--ic-brand-rgb), .08);
    border: 1px solid rgba(var(--ic-brand-rgb), .18);
    padding: 9px 22px;
    border-radius: 40px;
    margin-bottom: 18px;
}
.eyebrow::before {
    content: '';
    width: 7px; height: 7px;
    border-radius: 50%;
    background: var(--ic-azure);
}

.section-title {
    font-size: clamp(1.75rem, 3.3vw, 2.6rem);
    margin-bottom: 16px;
}
.section-title .accent { color: var(--ic-brand); }
.section-sub { font-size: 1.02rem; margin-bottom: 0; color: var(--ic-body); }

.block-title {
    font-size: clamp(1.25rem, 2vw, 1.6rem);
    margin-bottom: 28px;
}

/* Dark-section overrides */
.bg-navy { color: rgba(255, 255, 255, .78); }
.bg-navy h1, .bg-navy h2, .bg-navy h3, .bg-navy h4, .bg-navy h5, .bg-navy h6 { color: #fff; }
.bg-navy .section-sub { color: rgba(255, 255, 255, .72); }
.bg-navy .section-title .accent { color: var(--ic-azure); }
.bg-navy .eyebrow {
    color: var(--ic-azure);
    background: rgba(var(--ic-azure-rgb), .12);
    border-color: rgba(var(--ic-azure-rgb), .28);
}

/* ------------------------------- 4. Buttons ----------------------- */
.btn {
    font-family: var(--font-display);
    font-weight: 600;
    border-radius: 40px;
    padding: 12px 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    border: 2px solid transparent;
    transition: all .3s var(--ease);
}
.btn-lg { padding: 15px 34px; font-size: 1rem; }
.btn-sm { padding: 9px 20px; font-size: .88rem; }

.btn-brand {
    background: var(--ic-brand);
    border-color: var(--ic-brand);
    color: #fff;
    box-shadow: 0 10px 24px rgba(var(--ic-brand-rgb), .28);
}
.btn-brand:hover,
.btn-brand:focus {
    background: var(--ic-steel);
    border-color: var(--ic-steel);
    color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 16px 32px rgba(var(--ic-brand-rgb), .34);
}

.btn-outline-brand {
    border-color: var(--ic-brand);
    color: var(--ic-brand);
    background: transparent;
}
.btn-outline-brand:hover,
.btn-outline-brand:focus {
    background: var(--ic-brand);
    color: #fff;
    transform: translateY(-2px);
}

.btn-ghost {
    border-color: rgba(255, 255, 255, .55);
    color: #fff;
    background: rgba(255, 255, 255, .06);
    backdrop-filter: blur(6px);
}
.btn-ghost:hover,
.btn-ghost:focus {
    background: #fff;
    border-color: #fff;
    color: var(--ic-navy);
    transform: translateY(-2px);
}

/* ------------------------------- 5. Preloader --------------------- */
#preloader {
    position: fixed;
    inset: 0;
    z-index: 3000;
    display: grid;
    place-items: center;
    background: var(--ic-midnight);
    transition: opacity .5s var(--ease), visibility .5s var(--ease);
}
#preloader.is-done { opacity: 0; visibility: hidden; }

.preloader-mark { text-align: center; }
.pm-hex {
    display: grid;
    place-items: center;
    width: 76px; height: 76px;
    margin: 0 auto 16px;
    border-radius: 20px;
    background: linear-gradient(135deg, var(--ic-azure), var(--ic-brand));
    color: #fff;
    font-size: 2rem;
    animation: pmPulse 1.4s var(--ease) infinite;
}
.pm-text {
    font-family: var(--font-display);
    font-weight: 600;
    letter-spacing: .18em;
    text-transform: uppercase;
    font-size: .82rem;
    color: rgba(255, 255, 255, .72);
}
@keyframes pmPulse {
    0%, 100% { transform: scale(1);    box-shadow: 0 0 0 0 rgba(var(--ic-azure-rgb), .45); }
    50%      { transform: scale(1.07); box-shadow: 0 0 0 18px rgba(var(--ic-azure-rgb), 0); }
}

/* ------------------------------- 6. Top bar ----------------------- */
.topbar {
    background: var(--ic-midnight);
    color: rgba(255, 255, 255, .72);
    font-size: .85rem;
    padding: 9px 0;
}
.topbar-info { display: flex; gap: 28px; flex-wrap: wrap; }
.topbar-info li { display: flex; align-items: center; }
.topbar-info a, .topbar-info span { color: rgba(255, 255, 255, .74); display: inline-flex; align-items: center; gap: 8px; }
.topbar-info a:hover { color: var(--ic-azure); }
.topbar-info i { color: var(--ic-azure); }

.topbar-social { display: flex; gap: 8px; }
.topbar-social a {
    width: 30px; height: 30px;
    display: grid; place-items: center;
    border-radius: 50%;
    background: rgba(255, 255, 255, .08);
    color: rgba(255, 255, 255, .8);
    font-size: .85rem;
}
.topbar-social a:hover { background: var(--ic-brand); color: #fff; transform: translateY(-2px); }

/* ------------------------------- 7. Header / nav ------------------ */
.site-header {
    position: sticky;
    top: 0;
    z-index: 1100;
    background: var(--ic-navy);
    box-shadow: 0 2px 20px rgba(var(--ic-midnight-rgb), .18);
    transition: background .3s var(--ease), box-shadow .3s var(--ease);
}
.site-header.is-stuck { background: rgba(var(--ic-midnight-rgb), .97); backdrop-filter: blur(10px); }

.site-header .navbar { padding: 0; }
.site-header .container { display: flex; align-items: center; justify-content: space-between; }

.navbar-brand { padding: 12px 0; margin: 0; }
.brand-logo { height: 56px; width: auto; display: block; }

.main-nav {
    display: flex;
    align-items: center;
    gap: 4px;
    list-style: none;
    margin: 0;
    padding: 0;
}
.main-nav > li { position: relative; }

.mn-link {
    font-family: var(--font-display);
    font-size: .95rem;
    font-weight: 500;
    color: rgba(255, 255, 255, .85);
    background: none;
    border: 0;
    padding: 30px 15px;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    line-height: 1;
    position: relative;
}
.mn-link::after {
    content: '';
    position: absolute;
    left: 15px; right: 15px; bottom: 22px;
    height: 2px;
    background: var(--ic-azure);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .3s var(--ease);
}
.mn-link:hover, .mn-link.active, .has-panel.is-open .mn-link { color: #fff; }
.mn-link:hover::after, .mn-link.active::after, .has-panel.is-open .mn-link::after { transform: scaleX(1); }
.mn-link .caret { font-size: .7rem; transition: transform .3s var(--ease); }
.has-panel.is-open .caret { transform: rotate(180deg); }

.nav-cta { margin-left: 12px; }

/* Mega panel */
.mega-panel {
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translate(-50%, 14px);
    width: min(780px, 92vw);
    background: #fff;
    border-radius: var(--radius);
    box-shadow: var(--shadow-lg);
    opacity: 0;
    visibility: hidden;
    transition: opacity .28s var(--ease), transform .28s var(--ease), visibility .28s;
    overflow: hidden;
}
.has-panel.is-open .mega-panel { opacity: 1; visibility: visible; transform: translate(-50%, 6px); }

/* Anchor the wide Explore/Submission panels inside the viewport. */
.main-nav > li:nth-last-child(2) .mega-panel { left: auto; right: 0; transform: translate(0, 14px); }
.main-nav > li:nth-last-child(2).is-open .mega-panel { transform: translate(0, 6px); }

.mp-split { display: grid; grid-template-columns: 300px 1fr; min-height: 260px; }

.mp-rail { background: var(--ic-mist); padding: 14px; display: flex; flex-direction: column; gap: 2px; }
.mp-tab {
    display: flex;
    align-items: center;
    gap: 11px;
    width: 100%;
    text-align: left;
    background: none;
    border: 0;
    border-radius: var(--radius-sm);
    padding: 11px 13px;
    font-size: .9rem;
    font-weight: 500;
    color: var(--ic-navy);
    transition: background .2s var(--ease), color .2s var(--ease);
}
.mp-tab i:first-child { color: var(--ic-brand); font-size: 1.05rem; flex: none; }
.mp-tab span { flex: 1; }
.mp-caret { font-size: .7rem; opacity: .5; }
.mp-tab:hover { background: rgba(255, 255, 255, .8); }
.mp-tab.is-active { background: var(--ic-brand); color: #fff; }
.mp-tab.is-active i { color: #fff; }

.mp-detail { padding: 26px 30px; position: relative; }
.mp-pane { display: none; animation: mpFade .25s var(--ease); }
.mp-pane.is-active { display: block; }
@keyframes mpFade { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

.mp-title { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.mp-title i { color: var(--ic-brand); font-size: 1.2rem; }
.mp-title h6 { margin: 0; font-size: 1.05rem; }
.mp-desc { font-size: .9rem; color: var(--ic-body); margin-bottom: 14px; }

.mp-links { list-style: none; padding: 0; margin: 0 0 16px; display: grid; gap: 4px; }
.mp-links a {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: .88rem;
    color: var(--ic-body);
    padding: 5px 0;
}
.mp-links a i { font-size: .68rem; color: var(--ic-azure); }
.mp-links a:hover { color: var(--ic-brand); }

.mp-go {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: var(--font-display);
    font-weight: 600;
    font-size: .9rem;
    color: var(--ic-brand);
}
.mp-go:hover { gap: 12px; }

/* ------------------------------------------------------------------ *
   Dropdown variant 2 - COMPACT LIST
   A classic narrow dropdown; children open in a flyout beside it.
 * ------------------------------------------------------------------ */
.drop-panel {
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 300px;
    background: #fff;
    border-radius: var(--radius);
    box-shadow: var(--shadow-lg);
    padding: 10px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(14px);
    transition: opacity .26s var(--ease), transform .26s var(--ease), visibility .26s;
    z-index: 10;
}
.has-panel.is-open .drop-panel { opacity: 1; visibility: visible; transform: translateY(4px); }

/* Keep the last menus from running off the right edge. */
.main-nav > li:nth-last-child(2) .drop-panel,
.main-nav > li:nth-last-child(3) .drop-panel { left: auto; right: 0; }

.dp-list { list-style: none; margin: 0; padding: 0; }
.dp-list > li { position: relative; }
.dp-list > li > a {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 11px 14px;
    border-radius: var(--radius-sm);
    font-size: .92rem;
    color: var(--ic-navy);
    white-space: nowrap;
}
.dp-list > li > a > i:first-child { color: var(--ic-brand); font-size: 1.05rem; flex: none; }
.dp-list > li > a > span { flex: 1; }
.dp-caret, .dp-ext { font-size: .7rem; opacity: .5; }
.dp-list > li > a:hover,
.dp-list > li:hover > a,
.dp-list > li:focus-within > a { background: var(--ic-mist); color: var(--ic-brand); }

.dp-flyout {
    position: absolute;
    top: -10px;
    left: 100%;
    min-width: 250px;
    list-style: none;
    margin: 0;
    padding: 10px;
    background: #fff;
    border-radius: var(--radius);
    box-shadow: var(--shadow-lg);
    opacity: 0;
    visibility: hidden;
    transform: translateX(10px);
    transition: opacity .22s var(--ease), transform .22s var(--ease), visibility .22s;
}
.dp-list > li:hover > .dp-flyout,
.dp-list > li:focus-within > .dp-flyout { opacity: 1; visibility: visible; transform: none; }

/* Flip the flyout inward on the menus nearest the right edge. */
.main-nav > li:nth-last-child(2) .dp-flyout,
.main-nav > li:nth-last-child(3) .dp-flyout {
    left: auto;
    right: 100%;
    transform: translateX(-10px);
}
.main-nav > li:nth-last-child(2) .dp-list > li:hover > .dp-flyout,
.main-nav > li:nth-last-child(3) .dp-list > li:hover > .dp-flyout { transform: none; }

.dp-flyout a {
    display: block;
    padding: 9px 13px;
    border-radius: var(--radius-sm);
    font-size: .88rem;
    color: var(--ic-body);
    white-space: nowrap;
}
.dp-flyout a:hover { background: var(--ic-mist); color: var(--ic-brand); }

/* ------------------------------------------------------------------ *
   Dropdown variants 3 and 4 - COLUMN MEGA and FEATURE PANEL
   Every page is visible at once; 'feature' adds a promo card.
 * ------------------------------------------------------------------ */
.wide-panel {
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translate(-50%, 14px);
    width: min(860px, 94vw);
    background: #fff;
    border-radius: var(--radius);
    box-shadow: var(--shadow-lg);
    overflow: hidden;
    opacity: 0;
    visibility: hidden;
    transition: opacity .28s var(--ease), transform .28s var(--ease), visibility .28s;
    z-index: 10;
}
.wide-panel.has-promo { width: min(1000px, 96vw); display: grid; grid-template-columns: 1fr 280px; }
.has-panel.is-open .wide-panel { opacity: 1; visibility: visible; transform: translate(-50%, 6px); }

.main-nav > li:nth-last-child(2) .wide-panel { left: auto; right: 0; transform: translate(0, 14px); }
.main-nav > li:nth-last-child(2).is-open .wide-panel { transform: translate(0, 6px); }

/* The promo card is taller than a short menu's item grid, so the grid takes
   the leftover height and centres in it - otherwise menus with three or five
   items leave a block of dead space under the last row. */
.wp-body { padding: 24px 26px; display: flex; flex-direction: column; }
.wp-head {
    display: flex;
    align-items: center;
    gap: 13px;
    
    border-bottom: 1px solid var(--ic-line);
}
.wp-head > i {
    width: 44px; height: 44px;
    flex: none;
    display: grid; place-items: center;
    border-radius: 13px;
    background: rgba(var(--ic-brand-rgb), .10);
    color: var(--ic-brand);
    font-size: 1.15rem;
}
.wp-head h6 { margin: 0 0 2px; font-size: 1.05rem; }
.wp-head p { font-size: .86rem; color: var(--ic-body); }

/* flex:1 + centred rows: the promo card is taller than a short menu's grid,
   so without this a three- or five-item menu leaves dead space under the
   last row. Menus taller than the promo are unaffected. */
.wp-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 4px 10px;
    flex: 1;
    align-content: center;
}
.wide-panel:not(.has-promo) .wp-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }

.wp-item {
    display: flex;
    align-items: flex-start;
    gap: 11px;
    padding: 11px 12px;
    border-radius: var(--radius-sm);
    transition: background .22s var(--ease);
}
.wp-item:hover { background: var(--ic-mist); }
.wp-ico {
    width: 34px; height: 34px;
    flex: none;
    display: grid; place-items: center;
    border-radius: 10px;
    background: var(--ic-mist);
    color: var(--ic-brand);
    font-size: .95rem;
    transition: background .22s var(--ease), color .22s var(--ease);
}
.wp-item:hover .wp-ico { background: var(--ic-brand); color: #fff; }
.wp-copy { display: flex; flex-direction: column; min-width: 0; }
.wp-copy b {
    font-family: var(--font-display);
    font-size: .9rem;
    font-weight: 600;
    color: var(--ic-navy);
    line-height: 1.35;
}
.wp-copy b i { font-size: .68rem; opacity: .55; margin-left: 4px; }
.wp-copy em {
    font-style: normal;
    font-size: .79rem;
    color: var(--ic-mute);
    line-height: 1.4;
    margin-top: 2px;
}

/* Sub-pages flyout. The panel is overflow:hidden, so the flyout is placed
   over the neighbouring column rather than outside the panel. */
.wp-cell { position: relative; }
.wp-caret { margin-left: auto; align-self: center; font-size: .7rem; color: var(--ic-mute); }
.wp-cell.has-sub:hover .wp-caret,
.wp-cell.has-sub:focus-within .wp-caret { color: var(--ic-brand); }
.wp-sub {
    position: absolute;
    top: 0;
    left: calc(100% + 6px);
    z-index: 3;
    width: max-content;
    max-width: 240px;
    list-style: none;
    margin: 0;
    padding: 8px;
    background: #fff;
    border: 1px solid var(--ic-line);
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow);
    opacity: 0;
    visibility: hidden;
    transform: translateX(-6px);
    transition: opacity .22s var(--ease), transform .22s var(--ease), visibility .22s;
}
.wp-cell.has-sub:hover .wp-sub,
.wp-cell.has-sub:focus-within .wp-sub { opacity: 1; visibility: visible; transform: none; }
.wp-sub a {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 8px 10px;
    border-radius: var(--radius-sm);
    font-family: var(--font-display);
    font-size: .84rem;
    font-weight: 500;
    color: var(--ic-navy);
    transition: background .22s var(--ease), color .22s var(--ease);
}
.wp-sub a i { font-size: .66rem; color: var(--ic-brand); }
.wp-sub a:hover { background: var(--ic-mist); color: var(--ic-brand); }
/* Last column: open to the left so the flyout stays inside the panel. */
.wp-grid > .wp-cell:nth-child(2n) .wp-sub { left: auto; right: calc(100% + 6px); transform: translateX(6px); }
.wide-panel:not(.has-promo) .wp-grid > .wp-cell:nth-child(2n) .wp-sub { left: calc(100% + 6px); right: auto; transform: translateX(-6px); }
.wide-panel:not(.has-promo) .wp-grid > .wp-cell:nth-child(3n) .wp-sub { left: auto; right: calc(100% + 6px); transform: translateX(6px); }
.wp-cell:nth-child(2n).has-sub:hover .wp-sub,
.wp-cell:nth-child(3n).has-sub:hover .wp-sub,
.wp-cell:nth-child(2n).has-sub:focus-within .wp-sub,
.wp-cell:nth-child(3n).has-sub:focus-within .wp-sub { transform: none; }

/* Mobile drawer: sub-pages listed inline, indented under their parent. */
.mnav-sub2 { list-style: none; margin: 0 0 4px; padding: 0 0 0 34px; }
.mnav-sub2 a {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 7px 4px;
    font-size: .84rem;
    color: rgba(255, 255, 255, .55);
    border-left: 0;
}
.mnav-sub2 a i { color: var(--ic-azure); font-size: 1rem; }
.mnav-sub2 a:hover { color: #fff; }

/* Promo card (feature variant only) */
.wp-promo {
    background: linear-gradient(160deg, var(--ic-midnight), var(--ic-steel));
    color: rgba(255, 255, 255, .78);
    padding: 24px 22px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.wpp-tag {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    align-self: flex-start;
    background: rgba(var(--ic-azure-rgb), .16);
    border: 1px solid rgba(var(--ic-azure-rgb), .3);
    border-radius: 30px;
    padding: 5px 13px;
    font-family: var(--font-display);
    font-size: .7rem;
    font-weight: 600;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--ic-azure);
}
.wpp-title { color: #fff; font-size: 1.2rem; margin: 0; }
.wpp-meta { font-size: .84rem; line-height: 1.9; margin: 0; }
.wpp-meta i { color: var(--ic-azure); width: 18px; }

.wpp-date {
    background: rgba(255, 255, 255, .07);
    border: 1px solid rgba(255, 255, 255, .14);
    border-radius: var(--radius-sm);
    padding: 12px 14px;
    margin-top: auto;
}
.wpp-date span {
    display: block;
    font-size: .7rem;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--ic-mute);
    margin-bottom: 3px;
}
.wpp-date b { font-family: var(--font-display); color: #fff; font-size: .95rem; }

.wpp-link {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-family: var(--font-display);
    font-size: .84rem;
    font-weight: 600;
    color: var(--ic-azure);
}
.wpp-link:hover { gap: 11px; color: #fff; }

/* Toggler */
.nav-toggle {
    background: none;
    border: 0;
    width: 44px; height: 44px;
    display: grid;
    place-content: center;
    gap: 5px;
    padding: 0;
}
.toggler-bar {
    display: block;
    width: 26px; height: 2px;
    background: #fff;
    border-radius: 2px;
    transition: transform .3s var(--ease), opacity .2s var(--ease);
}
.nav-toggle.is-open .toggler-bar:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle.is-open .toggler-bar:nth-child(2) { opacity: 0; }
.nav-toggle.is-open .toggler-bar:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Mobile nav */
.mobile-nav {
    position: fixed;
    top: 0; right: 0;
    width: min(400px, 88vw);
    height: 100dvh;
    background: var(--ic-navy);
    padding: 26px 22px 40px;
    overflow-y: auto;
    /* Kept out of the layout entirely while closed, so the off-canvas
       drawer can never widen the document on small screens. */
    visibility: hidden;
    transform: translateX(105%);
    transition: transform .35s var(--ease), visibility .35s var(--ease);
    z-index: 1200;
}
.mobile-nav.is-open { visibility: visible; transform: none; }

.mn-list { list-style: none; padding: 0; margin: 40px 0 26px; }
.mn-list > li { border-bottom: 1px solid rgba(255, 255, 255, .09); }

.mnav-link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    background: none;
    border: 0;
    padding: 14px 4px;
    font-family: var(--font-display);
    font-weight: 500;
    font-size: 1rem;
    color: rgba(255, 255, 255, .88);
    text-align: left;
}
.mnav-link:hover, .mnav-link.active { color: var(--ic-azure); }
.mnav-link i { transition: transform .3s var(--ease); font-size: .9rem; }
.mnav-toggle[aria-expanded="true"] i { transform: rotate(45deg); color: var(--ic-azure); }

.mnav-sub {
    list-style: none;
    padding: 0 0 12px;
    margin: 0;
    display: none;
}
.mnav-sub.is-open { display: block; }
.mnav-sub a {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 4px 9px 12px;
    font-size: .9rem;
    color: rgba(255, 255, 255, .68);
    border-left: 2px solid rgba(var(--ic-azure-rgb), .3);
}
.mnav-sub a i { color: var(--ic-azure); font-size: .95rem; }
.mnav-sub a:hover { color: #fff; border-left-color: var(--ic-azure); }

.mnav-foot { padding-top: 8px; }
.mnav-contact {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 7px 0;
    font-size: .9rem;
    color: rgba(255, 255, 255, .72);
}
.mnav-contact i { color: var(--ic-azure); }
.mnav-contact:hover { color: #fff; }

.nav-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(var(--ic-midnight-rgb), .6);
    backdrop-filter: blur(3px);
    z-index: 1150;
    opacity: 0;
    transition: opacity .3s var(--ease);
}
.nav-backdrop.is-visible { opacity: 1; }

body.nav-open { overflow: hidden; }

/* ------------------------------- 8. Hero -------------------------- */
.hero {
    position: relative;
    min-height: clamp(600px, 88vh, 860px);
    display: flex;
    align-items: center;
    padding: 90px 0 70px;
    overflow: hidden;
    color: #fff;
}
.hero-media { position: absolute; inset: 0; z-index: 0; }
.hero-media img { width: 100%; height: 100%; object-fit: cover; }

.hero-veil {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(105deg, rgba(var(--ic-midnight-rgb), .96) 0%, rgba(var(--ic-navy-rgb), .90) 46%, rgba(var(--ic-steel-rgb), .68) 100%);
}
.hero-grid {
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(var(--ic-azure-rgb), .10) 1px, transparent 1px),
        linear-gradient(90deg, rgba(var(--ic-azure-rgb), .10) 1px, transparent 1px);
    background-size: 62px 62px;
    mask-image: radial-gradient(circle at 72% 44%, #000 0%, transparent 68%);
    -webkit-mask-image: radial-gradient(circle at 72% 44%, #000 0%, transparent 68%);
}

.hero-inner { position: relative; z-index: 2; }

.hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    background: rgba(var(--ic-azure-rgb), .14);
    border: 1px solid rgba(var(--ic-azure-rgb), .34);
    color: var(--ic-azure-pale);
    font-size: .8rem;
    font-weight: 500;
    letter-spacing: .04em;
    padding: 8px 18px;
    border-radius: 40px;
    margin-bottom: 22px;
}
.hero-badge i { color: var(--ic-azure); }

.hero-kicker {
    font-family: var(--font-display);
    font-size: .84rem;
    font-weight: 600;
    letter-spacing: .28em;
    text-transform: uppercase;
    color: var(--ic-azure);
    margin-bottom: 10px;
}

.hero-title {
    color: #fff;
    font-size: clamp(1.75rem, 3.6vw, 3rem);
    line-height: 1.18;
    margin-bottom: 20px;
}
.hero-title .ht-brand {
    display: block;
    font-size: clamp(2.5rem, 6vw, 4.4rem);
    line-height: 1;
    letter-spacing: -.03em;
    margin-bottom: 10px;
    background: linear-gradient(100deg, #ffffff 20%, var(--ic-azure) 90%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}
.hero-title .accent { color: var(--ic-azure); }

.hero-theme {
    font-family: var(--font-display);
    font-size: clamp(1rem, 1.6vw, 1.2rem);
    font-weight: 500;
    font-style: italic;
    color: #d8e7f7;
    border-left: 3px solid var(--ic-azure);
    padding-left: 16px;
    margin-bottom: 24px;
}
.hero-theme i { color: var(--ic-azure); margin-right: 0; }
/* Opening mark lifted 4px, by request - it rides above the closing one
   rather than level with it. :not() so it cannot catch the closing mark,
   which carries its own lift below. */
.hero-theme i:not(.hq-close) {
    position: relative;
    top: -4px;
}
/* Closing mark: the same glyph turned half a turn, so the pair match
   exactly instead of mixing an icon with a typed " character.

   The turn also moves the ink from the top of the glyph box to the bottom,
   which dropped the closing mark 4px below the opening one. Lifting it by
   .21em puts the two back on the same line; em, so it holds as the clamped
   font-size changes. Translate is listed first so it applies in normal
   screen space, before the rotation flips the axes. */
.hero-theme .hq-close {
    display: inline-block;
    margin: 0;
    transform: translateY(-.21em) rotate(180deg);
}

.hero-meta { display: flex; flex-wrap: wrap; gap: 12px 26px; margin-bottom: 16px; }
.hero-meta li {
    display: flex;
    align-items: center;
    gap: 10px;
    font-family: var(--font-display);
    font-weight: 500;
    font-size: 1rem;
    color: #eaf3fc;
}
.hero-meta i {
    width: 34px; height: 34px;
    display: grid; place-items: center;
    border-radius: 10px;
    background: rgba(var(--ic-azure-rgb), .16);
    color: var(--ic-azure);
    font-size: 1rem;
}

.hero-note { color: rgba(255, 255, 255, .72); font-size: .95rem; margin-bottom: 28px; max-width: 560px; }

.hero-actions { display: flex; flex-wrap: wrap; gap: 14px; margin-bottom: 30px; }

.hero-org { display: flex; align-items: center; gap: 14px; }
.hero-org span { font-size: .8rem; letter-spacing: .12em; text-transform: uppercase; color: rgba(255, 255, 255, .55); }
.hero-org img {
    height: 46px;
    width: auto;
    background: #fff;
    border-radius: 10px;
    padding: 7px 12px;
}

/* Hero card / countdown */
.hero-card {
    background: rgba(255, 255, 255, .07);
    border: 1px solid rgba(255, 255, 255, .16);
    backdrop-filter: blur(14px);
    border-radius: var(--radius-lg);
    padding: 30px;
    box-shadow: var(--shadow-lg);
}
.hc-title {
    color: #fff;
    font-size: 1.05rem;
    display: flex;
    align-items: center;
    gap: 9px;
    margin-bottom: 20px;
}
.hc-title i { color: var(--ic-azure); }

.hc-countdown { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-bottom: 24px; }
.cd-cell {
    background: rgba(var(--ic-midnight-rgb), .45);
    border: 1px solid rgba(255, 255, 255, .12);
    border-radius: var(--radius-sm);
    padding: 14px 6px;
    text-align: center;
}
.cd-cell b {
    display: block;
    font-family: var(--font-display);
    font-size: clamp(1.4rem, 2.4vw, 1.9rem);
    font-weight: 700;
    color: #fff;
    line-height: 1;
    font-variant-numeric: tabular-nums;
}
.cd-cell span {
    font-size: .68rem;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .6);
}

.hc-dates { display: grid; gap: 2px; margin-bottom: 18px; }
.hc-dates li {
    display: grid;
    grid-template-columns: 28px 1fr auto;
    align-items: center;
    gap: 10px;
    padding: 11px 0;
    border-bottom: 1px dashed rgba(255, 255, 255, .14);
}
.hc-dates li:last-child { border-bottom: 0; }
.hc-dates i { color: var(--ic-azure); }
.hcd-label { font-size: .86rem; color: rgba(255, 255, 255, .78); line-height: 1.4; }
.hcd-date {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: .84rem;
    color: #fff;
    white-space: nowrap;
}

.hc-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: var(--font-display);
    font-weight: 600;
    font-size: .9rem;
    color: var(--ic-azure);
}
.hc-link:hover { gap: 12px; color: #fff; }

/* ---------- Hero variant 2: CENTRED FULL-BLEED ---------- */
/* Centred text sits over the busiest part of the photograph, so the veil
   stays dark through the middle - at .62 the headline was unreadable over
   the delegates. A radial lift keeps the edges of the image visible. */
.hero-is-centered .hero-veil {
    background:
      radial-gradient(ellipse 80% 65% at 50% 48%, rgba(var(--ic-midnight-rgb), 0.68) 0%, rgba(var(--ic-midnight-rgb), 0.02) 60%, rgba(var(--ic-midnight-rgb), .68) 100%), linear-gradient(180deg, rgba(var(--ic-midnight-rgb), .78) 0%, rgba(var(--ic-midnight-rgb), .60) 45%, rgba(var(--ic-midnight-rgb), .92) 100%);
}
.hero-is-centered .hero-grid {
    mask-image: radial-gradient(circle at 50% 40%, #000 0%, transparent 72%);
    -webkit-mask-image: radial-gradient(circle at 50% 40%, #000 0%, transparent 72%);
}
.hero-is-centered .hero-title { max-width: 1000px; margin-inline: auto; margin-bottom: 20px; }
.hero-is-centered .hero-theme {
    border-left: 0;
    padding-left: 0;
    max-width: 760px;
    margin-inline: auto;
    margin-bottom: 26px;
}
.hero-is-centered .hero-meta { justify-content: center; }
.hero-is-centered .hero-actions { justify-content: center; margin-bottom: 40px; }

.hero-strip {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 18px 34px;
    max-width: 880px;
    margin: 0 auto;
    background: rgba(255, 255, 255, .07);
    border: 1px solid rgba(255, 255, 255, .16);
    backdrop-filter: blur(12px);
    border-radius: var(--radius-lg);
    padding: 20px 30px;
}
.hs-label {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    font-family: var(--font-display);
    font-size: .8rem;
    font-weight: 600;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .7);
}
.hs-label i { color: var(--ic-azure); }
.hs-cells { display: flex; gap: 10px; }
.hero-strip .cd-cell { min-width: 74px; }
.hs-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: var(--font-display);
    font-weight: 600;
    font-size: .88rem;
    color: var(--ic-azure);
}
.hs-link:hover { gap: 12px; color: #fff; }

/* The frame wrapper is inert unless a centred sub-style styles it. */
.hero-frame { display: block; }

/* ---------- Centred · Glass Frame ---------- */
.hero-c-frame .hero-frame {
    max-width: 980px;
    margin: 0 auto;
    background: rgba(var(--ic-midnight-rgb), .55);
    border: 1px solid rgba(255, 255, 255, .16);
    backdrop-filter: blur(14px);
    border-radius: var(--radius-lg);
    padding: 48px 52px 42px;
    box-shadow: var(--shadow-lg);
}
/* The panel provides the contrast, so the veil can lift off the photo. */
.hero-c-frame .hero-veil {
    background: linear-gradient(180deg, rgba(var(--ic-midnight-rgb), .72) 0%, rgba(var(--ic-midnight-rgb), .48) 45%, rgba(var(--ic-midnight-rgb), .82) 100%);
}
.hero-c-frame .hero-strip {
    background: rgba(255, 255, 255, .09);
    border-color: rgba(255, 255, 255, .2);
    backdrop-filter: none;
}

/* ---------- Centred · No Photo ---------- */
.hero-c-solid {
    background: linear-gradient(140deg, var(--ic-midnight) 0%, var(--ic-navy) 45%, var(--ic-steel) 100%);
}
.hero-c-solid .hero-veil {
    background: radial-gradient(ellipse 70% 60% at 50% 40%, rgba(var(--ic-azure-rgb), .16), transparent 70%);
}
/* Without a photograph the grid carries the texture, so show more of it. */
.hero-c-solid .hero-grid {
    mask-image: radial-gradient(circle at 50% 45%, #000 0%, transparent 85%);
    -webkit-mask-image: radial-gradient(circle at 50% 45%, #000 0%, transparent 85%);
}

/* ---------- Centred · Countdown Ribbon ---------- */
.hero-ribbon {
    display: inline-flex;
    align-items: baseline;
    flex-wrap: wrap;
    justify-content: center;
    gap: 6px 8px;
    background: rgba(var(--ic-azure-rgb), .14);
    border: 1px solid rgba(var(--ic-azure-rgb), .34);
    border-radius: 40px;
    padding: 9px 22px;
    margin-bottom: 22px;
}
.hr-label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: var(--font-display);
    font-size: .76rem;
    font-weight: 600;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .7);
    margin-right: 4px;
}
.hr-label i { color: var(--ic-azure); }
.hero-ribbon b {
    font-family: var(--font-display);
    font-size: 1.15rem;
    font-weight: 700;
    color: #fff;
    font-variant-numeric: tabular-nums;
}
.hero-ribbon > span:not(.hr-label) {
    font-size: .78rem;
    color: rgba(255, 255, 255, .62);
    margin-right: 6px;
}

/* ---------- Hero variant 3: FLANKED BY PHOTOS ---------- */
/* The printed-banner arrangement: facts in the middle, a portrait photograph
   holding each end. The centred family's rules are keyed to .hero-is-centered,
   so the few this layout needs are restated here. */
.hero-is-flanked .hero-veil {
    background: linear-gradient(180deg, rgba(var(--ic-midnight-rgb), .82) 0%, rgba(var(--ic-midnight-rgb), .66) 45%, rgba(var(--ic-midnight-rgb), .90) 100%);
}
.hero-is-flanked .hero-grid {
    mask-image: radial-gradient(circle at 50% 40%, #000 0%, transparent 72%);
    -webkit-mask-image: radial-gradient(circle at 50% 40%, #000 0%, transparent 72%);
}
.hero-flank {
    display: grid;
    grid-template-columns: 300px minmax(0, 1fr) 300px;
    align-items: center;
    gap: 20px;
}
/* The card carries the shape, the border and the shadow; the photographs
   inside are stacked and crossfaded, so they must not each own a radius.
   overflow:hidden clips them to the card instead. */
.hf-photo {
    position: relative;
    margin: 0;
    aspect-ratio: 3 / 4;
    background: var(--ic-midnight);
    border-radius: 42px;
    border: 1px solid rgba(255, 255, 255, .2);
    box-shadow: 0 26px 60px rgba(4, 16, 34, .55);
    overflow: hidden;
    isolation: isolate;
}
/* `>` matters: .hero-org carries the IFERP logo, which is an img too. */
.hf-photo > img {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
/* Crossfade with a slow settle out of a slight zoom.
   The incoming frame fades in *over* the outgoing one, which stays fully
   opaque underneath until the fade finishes - fading both at once left the
   card half-transparent mid-transition and the banner showed through. */
.hf-photo > .hfp-img {
    opacity: 0;
    z-index: 0;
    transform: scale(1.06);
    transition: opacity 1.1s var(--ease), transform 5.4s var(--ease);
}
.hf-photo > .hfp-img.is-prev {
    opacity: 1;
    z-index: 1;
    transform: scale(1);
    transition: none;
}
.hf-photo > .hfp-img.is-active {
    opacity: 1;
    z-index: 2;
    transform: scale(1);
}
.hero-is-flanked .hero-title { margin-bottom: 18px; font-size: clamp(1.7rem, 2.6vw, 2.5rem); }
.hero-is-flanked .hero-theme {
    border-left: 0;
    padding-left: 0;
    margin-inline: auto;
    margin-bottom: 22px;
}
.hero-is-flanked .hero-meta { justify-content: center; margin-bottom: 18px; }
.hero-is-flanked .hero-org { justify-content: center; margin: 0 0 22px; }
/* The countdown is no longer inside this column, so nothing follows it. */
.hero-is-flanked .hero-actions { justify-content: center; margin-bottom: 0; }
/* Its own block under .hero-flank, so it needs the gap the middle column used
   to give it. .col-md-9 sets the width, .mx-auto centres it. */
.hero-is-flanked .hero-strip {
    max-width: 100%;
    margin-top: 34px;
    padding: 16px 26px;
    gap: 14px 28px;
}

@media (max-width: 1199.98px) {
    .hero-flank { grid-template-columns: 230px minmax(0, 1fr) 230px; gap: 26px; }
    .hf-photo { border-radius: 32px; }
}
/* Below the tablet break the photographs move under the copy as a pair, so
   the title gets the full width instead of a 200px sliver. */
@media (max-width: 991.98px) {
    .hero-flank { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
    .hf-body { grid-column: 1 / -1; order: -1; margin-bottom: 8px; }
    .hf-photo { aspect-ratio: 4 / 5; border-radius: 26px; }
}

/* ---------- Hero variant 4: SPLIT SCREEN ---------- */
.hero-is-panel { padding: 0; min-height: 0; display: block; color: #fff; }
.hero-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }

.hs-panel {
    background: linear-gradient(150deg, var(--ic-midnight) 0%, var(--ic-navy) 55%, var(--ic-steel) 100%);
    display: flex;
    align-items: center;
    padding: 80px 0 80px 6vw;
    position: relative;
    overflow: hidden;
}
.hs-panel::after {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(var(--ic-azure-rgb), .10) 1px, transparent 1px),
        linear-gradient(90deg, rgba(var(--ic-azure-rgb), .10) 1px, transparent 1px);
    background-size: 58px 58px;
    mask-image: radial-gradient(circle at 20% 30%, #000 0%, transparent 70%);
    -webkit-mask-image: radial-gradient(circle at 20% 30%, #000 0%, transparent 70%);
    pointer-events: none;
}
.hsp-inner { position: relative; z-index: 1; max-width: 620px; padding-right: 40px; }

.hs-photo { position: relative; min-height: 620px; }
.hs-photo > img { width: 100%; height: 100%; object-fit: cover; display: block; }

.hsp-count {
    position: absolute;
    left: 32px; bottom: 32px;
    background: rgba(var(--ic-midnight-rgb), .82);
    border: 1px solid rgba(255, 255, 255, .18);
    backdrop-filter: blur(10px);
    border-radius: var(--radius);
    padding: 16px 20px;
}
.hspc-label {
    display: block;
    font-family: var(--font-display);
    font-size: .68rem;
    font-weight: 600;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--ic-azure);
    margin-bottom: 10px;
}
.hspc-cells { display: flex; gap: 8px; }
.hsp-count .cd-cell { min-width: 62px; padding: 10px 4px; }

/* ---------- Hero variant 5: LIGHT TYPOGRAPHIC ---------- */
.hero-is-minimal {
    color: var(--ic-body);
    background: linear-gradient(180deg, var(--ic-cloud) 0%, var(--ic-mist) 100%);
    min-height: 0;
    padding: 70px 0 0;
}
.hero-is-minimal .hero-media { display: none; }
.hero-is-minimal .hero-badge {
    background: rgba(var(--ic-brand-rgb), .08);
    border-color: rgba(var(--ic-brand-rgb), .2);
    color: var(--ic-brand);
}
.hero-is-minimal .hero-kicker { color: var(--ic-brand); }
.hero-is-minimal .hero-title { color: var(--ic-ink); }
.hero-is-minimal .hero-title .ht-brand {
    background: none;
    -webkit-background-clip: initial;
    background-clip: initial;
    color: var(--ic-navy);
}
.hero-is-minimal .hero-title .accent { color: var(--ic-brand); }
.hero-is-minimal .hero-theme { color: var(--ic-body); border-left-color: var(--ic-brand); }
.hero-is-minimal .hero-note { color: var(--ic-body); }

.hero-shot { position: relative; border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow); }
.hero-shot > img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block; }
.hs-org {
    position: absolute;
    left: 18px; bottom: 18px;
    display: flex;
    align-items: center;
    gap: 10px;
    background: rgba(255, 255, 255, .94);
    border-radius: 40px;
    padding: 7px 16px 7px 14px;
    box-shadow: var(--shadow-sm);
}
.hs-org span {
    font-size: .68rem;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--ic-mute);
}
.hs-org img { height: 26px; width: auto; }

.hero-facts {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1px;
    margin: 56px 0 0;
    background: var(--ic-line);
    border: 1px solid var(--ic-line);
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    overflow: hidden;
}
.hero-facts li {
    display: flex;
    align-items: center;
    gap: 14px;
    background: #fff;
    padding: 22px 24px;
}
.hero-facts i {
    width: 42px; height: 42px;
    flex: none;
    display: grid; place-items: center;
    border-radius: 13px;
    background: rgba(var(--ic-brand-rgb), .10);
    color: var(--ic-brand);
    font-size: 1.05rem;
}
/* Only the outer span is the label; the inner [data-cd] span sits inside
   <b> and must inherit the bold figure styling, not the label styling. */
.hero-facts li > span {
    display: flex;
    flex-direction: column;
    min-width: 0;
    font-size: .8rem;
    color: var(--ic-mute);
}
.hero-facts b {
    font-family: var(--font-display);
    font-size: 1rem;
    color: var(--ic-ink);
    line-height: 1.3;
}

/* ------------------------------- 9. Trust strip ------------------- */
.trust-strip { background: var(--ic-cloud); padding: 34px 0; border-bottom: 1px solid var(--ic-line); }
.ts-head {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 12px 20px;
    text-align: center;
    margin-bottom: 22px;
    font-size: .94rem;
    color: var(--ic-body);
}
.ts-iso {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: #fff;
    border: 1px solid var(--ic-line);
    border-radius: 40px;
    padding: 7px 16px;
    font-family: var(--font-display);
    font-weight: 600;
    font-size: .84rem;
    color: var(--ic-navy);
    box-shadow: var(--shadow-sm);
}
.ts-iso i { color: #2E9E5B; }
.ts-head .tc { color: var(--ic-mute); font-size: .8rem; }

/* Associates row, beneath the indexing marquee. A hairline and a small
   label keep the two bands from reading as one. */
.ts-associates { margin-top: 26px; padding-top: 24px; border-top: 1px solid var(--ic-line); }
/* Associates are now the strip's only row, so it no longer needs the
   divider that separated it from the indexing marquee above. */
.ts-only-associates { padding: 26px 0; }
.ts-only-associates .ts-associates { margin-top: 0; padding-top: 0; border-top: 0; }

/* ---------- Indexing band inside the home banner (QA #6) ---------- */
/* The banner is a row flexbox that vertically centres its one child; with a
   second child it has to stack instead, or the band would sit beside the
   content. .hero-is-panel sets display:block and is unaffected. */
.hero { flex-direction: column; justify-content: center; align-items: stretch; }
.hero-index-wrap { position: relative; z-index: 2; margin-top: 34px; }
/* Sits straight on the banner - no card - with the copy in white and the
   journal logos at full colour. The Associates strip further down keeps its
   own greyscale treatment; only these logos are exempt. */
.hero-index { color: rgba(255, 255, 255, .86); }
.hero-index .ts-head { margin-bottom: 18px; font-size: .92rem; color: rgba(255, 255, 255, .86); }
.hero-index .ts-head strong { color: #fff; }
.hero-index .ts-head .tc { color: rgba(255, 255, 255, .55); }
/* The shared marquee fades to --ic-cloud at each edge, which would draw two
   pale strips over the photograph. */
.hero-index .logo-marquee::before,
.hero-index .logo-marquee::after { display: none; }
.hero-index .lm-item img { filter: none; opacity: 1; }
.hero-index .lm-item img:hover { filter: none; opacity: 1; }
/* Springer's logo is dark navy on a transparent ground - at full colour it
   vanishes into the banner. The other logos carry their own white box in the
   image file (Scopus is orange, so it reads without one); Springer is given a
   matching one here. */
.hero-index .lm-item img[src*="springer"] {
    background: #fff;
    padding: 6px 12px;
    box-sizing: content-box;
    max-height: 34px;
}
.ts-label {
    display: block;
    text-align: center;
    margin-bottom: 14px;
    font-family: var(--font-display);
    font-size: .68rem;
    font-weight: 600;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--ic-mute);
}

/* Logo marquee */
.logo-marquee { overflow: hidden; position: relative; }
.logo-marquee::before,
.logo-marquee::after {
    content: '';
    position: absolute;
    top: 0; bottom: 0;
    width: 90px;
    z-index: 2;
    pointer-events: none;
}
.logo-marquee::before { left: 0;  background: linear-gradient(90deg, var(--ic-cloud), transparent); }
.logo-marquee::after  { right: 0; background: linear-gradient(270deg, var(--ic-cloud), transparent); }
.partners-strip .logo-marquee::before { background: linear-gradient(90deg, #fff, transparent); }
.partners-strip .logo-marquee::after  { background: linear-gradient(270deg, #fff, transparent); }

.lm-track {
    display: flex;
    align-items: center;
    gap: 46px;
    width: max-content;
    animation: lmScroll 46s linear infinite;
}
.logo-marquee[data-marquee-reverse] .lm-track { animation-direction: reverse; }
.logo-marquee:hover .lm-track { animation-play-state: paused; }

.lm-item { flex: none; display: grid; place-items: center; }
.lm-item img {
    max-height: 46px;
    width: auto;
    filter: grayscale(1);
    opacity: .62;
    transition: filter .3s var(--ease), opacity .3s var(--ease);
}
.lm-item img:hover { filter: none; opacity: 1; }
.logo-marquee-lg .lm-item img { max-height: 62px; }

@keyframes lmScroll {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}

/* ------------------------------ 10. Quick downloads --------------- */
.downloads { background: #fff; }
.dl-wrap {
    background: linear-gradient(120deg, var(--ic-navy) 0%, var(--ic-steel) 100%);
    border-radius: var(--radius-lg);
    padding: 30px 34px;
    display: grid;
    grid-template-columns: 260px 1fr;
    gap: 26px;
    align-items: center;
    box-shadow: var(--shadow);
    position: relative;
    overflow: hidden;
}
.dl-wrap::after {
    content: '';
    position: absolute;
    right: -60px; top: -60px;
    width: 240px; height: 240px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(var(--ic-azure-rgb), .25), transparent 70%);
}
.dl-lead { display: flex; align-items: center; gap: 14px; position: relative; z-index: 1; }
.dl-lead > i {
    width: 50px; height: 50px;
    flex: none;
    display: grid; place-items: center;
    border-radius: 14px;
    background: rgba(var(--ic-azure-rgb), .18);
    color: var(--ic-azure);
    font-size: 1.4rem;
}
.dl-lead h2 { color: #fff; font-size: 1.3rem; margin: 0 0 2px; }
.dl-lead p { color: rgba(255, 255, 255, .64); font-size: .86rem; }

.dl-list {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    position: relative;
    z-index: 1;
}
.dl-list a {
    display: flex;
    align-items: center;
    gap: 10px;
    background: rgba(255, 255, 255, .07);
    border: 1px solid rgba(255, 255, 255, .13);
    border-radius: var(--radius-sm);
    padding: 11px 14px;
    font-size: .88rem;
    color: rgba(255, 255, 255, .88);
    transition: all .28s var(--ease);
}
.dl-list a > i:first-child { color: var(--ic-azure); font-size: 1.05rem; }
.dl-list a span { flex: 1; }
.dl-go { opacity: 0; transform: translateX(-6px); transition: all .28s var(--ease); }
.dl-list a:hover {
    background: #fff;
    border-color: #fff;
    color: var(--ic-navy);
    transform: translateY(-2px);
}
.dl-list a:hover > i:first-child { color: var(--ic-brand); }
.dl-list a:hover .dl-go { opacity: 1; transform: none; color: var(--ic-brand); }

/* Asset not supplied yet - shown, but plainly unavailable. */
.dl-pending {
    display: flex;
    align-items: center;
    gap: 10px;
    background: rgba(255, 255, 255, .04);
    border: 1px dashed rgba(255, 255, 255, .18);
    border-radius: var(--radius-sm);
    padding: 11px 14px;
    font-size: .88rem;
    color: rgba(255, 255, 255, .48);
    cursor: not-allowed;
}
.dl-pending > i:first-child { font-size: 1.05rem; }
.dl-pending > span { flex: 1; }
.dl-pending em {
    font-style: normal;
    font-size: .68rem;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--ic-amber);
    white-space: nowrap;
}

/* ------------------------------ 11. Welcome ----------------------- */
.welcome-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px; }

.welcome-visual { position: relative; border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow); }
.welcome-visual img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 4 / 3; }
.wv-chip {
    position: absolute;
    left: 24px; bottom: 24px;
    background: rgba(var(--ic-midnight-rgb), .88);
    backdrop-filter: blur(8px);
    color: #fff;
    border-radius: var(--radius);
    padding: 14px 20px;
    display: flex;
    align-items: center;
    gap: 12px;
}
.wv-chip b {
    font-family: var(--font-display);
    font-size: 2rem;
    line-height: 1;
    color: var(--ic-azure);
}
.wv-chip span { font-size: .82rem; letter-spacing: .08em; text-transform: uppercase; color: rgba(255, 255, 255, .78); }

/* ------------------------------ 12. About ------------------------- */
.about-visual { border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow); }
.about-visual img { width: 100%; aspect-ratio: 5 / 4; object-fit: cover; }

.theme-quote {
    background: #fff;
    border-left: 4px solid var(--ic-brand);
    border-radius: var(--radius);
    padding: 22px 24px;
    margin-bottom: 24px;
    box-shadow: var(--shadow-sm);
    position: relative;
}
.theme-quote > i {
    color: var(--ic-azure);
    font-size: 1.3rem;
    position: absolute;
    top: 16px; left: -14px;
    background: #fff;
    border-radius: 50%;
    padding: 2px;
}
.theme-quote p { font-size: 1rem; color: var(--ic-ink); }

/* Stacked aims - still used by the home page About section. */
.aim-list { display: grid; gap: 14px; margin: 22px 0; }
.aim-list li { display: flex; align-items: flex-start; gap: 14px; }

/* Four aims across one hairline-divided band (About Us, 'split' variant). The
   1px gap over a line-coloured ground is what draws the dividers - cheaper
   than four borders that would double up where the cells meet. */
.aim-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1px;
    margin: 32px 0 26px;
    background: var(--ic-line);
    border: 1px solid var(--ic-line);
    border-radius: var(--radius-lg);
    overflow: hidden;
}
.aim-cell {
    position: relative;
    background: #fff;
    padding: 26px 24px 24px;
    transition: background .3s var(--ease);
}
.aim-cell:hover { background: var(--ic-cloud); }
/* Accent rule wipes in from the left on hover. */
.aim-cell::before {
    content: '';
    position: absolute;
    inset: 0 0 auto 0;
    height: 3px;
    background: var(--ic-brand);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .35s var(--ease);
}
.aim-cell:hover::before { transform: scaleX(1); }
.aim-n {
    position: absolute;
    top: 18px; right: 20px;
    font-family: var(--font-display);
    font-size: 1.9rem;
    font-weight: 700;
    line-height: 1;
    color: transparent;
    -webkit-text-stroke: 1.5px rgba(var(--ic-brand-rgb), .20);
    pointer-events: none;
}
.aim-grid .aim-ico { margin-bottom: 14px; }
.aim-cell p { font-size: .93rem; color: var(--ic-slate); }

.aim-ico {
    width: 42px; height: 42px;
    flex: none;
    display: grid; place-items: center;
    border-radius: 12px;
    background: rgba(var(--ic-brand-rgb), .10);
    color: var(--ic-brand);
    font-size: 1.05rem;
}
.about-close {
    font-family: var(--font-display);
    font-weight: 500;
    color: var(--ic-navy);
    background: rgba(var(--ic-brand-rgb), .06);
    border-radius: var(--radius);
    padding: 16px 20px;
}

/* ------------------------------ 13. SDG table --------------------- */
/* CURRENTLY UNUSED. The home page SDG Alignment section was removed when the
   Call for Papers block became a carousel, which shows each track's goals
   itself. Kept because ticket #1204 asks About Us to reuse this component -
   drop the markup back in and it styles itself. (.sdg-card, further down, is
   a different thing and is live on session.php.) */
.sdg-table {
    border: 1px solid var(--ic-line);
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
    background: #fff;
}
.sdg-row {
    display: grid;
    grid-template-columns: 110px minmax(0, 1.15fr) minmax(0, 1.35fr);
    gap: 18px;
    align-items: center;
    padding: 18px 24px;
    border-bottom: 1px solid var(--ic-line);
    transition: background .25s var(--ease);
}
.sdg-row:last-child { border-bottom: 0; }
.sdg-row:not(.sdg-head):hover { background: var(--ic-cloud); }

.sdg-head {
    background: var(--ic-navy);
    font-family: var(--font-display);
    font-size: .76rem;
    font-weight: 600;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .78);
}

.sdg-no {
    font-family: var(--font-display);
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--ic-azure);
    line-height: 1;
}
.sdg-title {
    font-family: var(--font-display);
    font-weight: 600;
    color: var(--ic-ink);
    display: flex;
    align-items: flex-start;
    gap: 11px;
    line-height: 1.4;
}
.sdg-title i { color: var(--ic-brand); font-size: 1.15rem; margin-top: 2px; flex: none; }

.sdg-goals { display: flex; flex-wrap: wrap; gap: 8px; }
.sdg-chip {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    background: var(--ic-mist);
    border: 1px solid rgba(var(--ic-brand-rgb), .14);
    border-radius: 40px;
    padding: 5px 14px 5px 5px;
    font-size: .78rem;
    line-height: 1.3;
    color: var(--ic-body);
    max-width: 100%;
}
.sdg-chip img { border-radius: 8px; flex: none; }
.sdg-chip > span { display: flex; flex-direction: column; min-width: 0; }
.sc-no {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: .74rem;
    color: var(--ic-brand);
    letter-spacing: .04em;
}

/* ------------------------------ 14. Important dates --------------- */
.dates-track {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 22px;
    counter-reset: dt;
    position: relative;
}
.dates-track::before {
    content: '';
    position: absolute;
    left: 6%; right: 6%; top: 34px;
    height: 2px;
    /* background: linear-gradient(90deg, transparent, rgba(var(--ic-azure-rgb), .45), transparent); */
}
.dates-track li {
    position: relative;
    text-align: center;
    background: rgba(255, 255, 255, .05);
    border: 1px solid rgba(255, 255, 255, .12);
    border-radius: var(--radius-lg);
    padding: 0 22px 26px;
    transition: transform .3s var(--ease), border-color .3s var(--ease), background .3s var(--ease);
}
.dates-track li:hover {
    transform: translateY(-6px);
    border-color: rgba(var(--ic-azure-rgb), .5);
    background: rgba(var(--ic-azure-rgb), .08);
}
.dt-node {
    width: 68px; height: 68px;
    display: grid; place-items: center;
    margin: 34px auto 16px;
    border-radius: 20px;
    background: linear-gradient(135deg, var(--ic-azure), var(--ic-brand));
    color: #fff;
    font-size: 1.5rem;
    box-shadow: 0 10px 26px rgba(var(--ic-brand-rgb), .4);
    position: relative;
    z-index: 1;
}
.dt-step {
    display: inline-block;
    font-family: var(--font-display);
    font-size: .7rem;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--ic-azure);
    margin-bottom: 8px;
}
.dt-label { font-size: 1.02rem; color: #fff; margin-bottom: 10px; }
.dt-date {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 1.05rem;
    color: var(--ic-azure-soft);
}

/* ------------------------------ 15. Track cards ------------------- */
.track-card {
    height: 100%;
    background: #fff;
    border: 1px solid var(--ic-line);
    border-radius: var(--radius-lg);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: transform .35s var(--ease), box-shadow .35s var(--ease), border-color .35s var(--ease);
}
.track-card:hover {
    transform: translateY(-8px);
    box-shadow: var(--shadow);
    border-color: rgba(var(--ic-brand-rgb), .3);
}

.tc-media { position: relative; aspect-ratio: 16 / 9; overflow: hidden; }
.tc-media img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease); }
.track-card:hover .tc-media img { transform: scale(1.07); }
.tc-media::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(var(--ic-midnight-rgb), 0) 40%, rgba(var(--ic-midnight-rgb), .68) 100%);
}
.tc-no {
    position: absolute;
    top: 14px; left: 14px;
    z-index: 1;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: .84rem;
    color: #fff;
    background: rgba(var(--ic-midnight-rgb), .72);
    backdrop-filter: blur(6px);
    border: 1px solid rgba(255, 255, 255, .2);
    border-radius: 10px;
    padding: 5px 11px;
}

.tc-body { padding: 22px 22px 8px; flex: 1; position: relative; }
.tc-ico {
    position: absolute;
    top: -26px; right: 20px;
    width: 50px; height: 50px;
    display: grid; place-items: center;
    border-radius: 14px;
    background: var(--ic-brand);
    color: #fff;
    font-size: 1.25rem;
    box-shadow: 0 10px 22px rgba(var(--ic-brand-rgb), .35);
}
.tc-title { font-size: 1.05rem; margin-bottom: 14px; }

.tc-sdgs { display: flex; flex-wrap: wrap; gap: 6px; }
.tc-sdgs li {
    font-family: var(--font-display);
    font-size: .72rem;
    font-weight: 600;
    letter-spacing: .04em;
    color: var(--ic-brand);
    background: rgba(var(--ic-brand-rgb), .09);
    border-radius: 30px;
    padding: 4px 11px;
    cursor: help;
}

.tc-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 14px 22px 20px;
    font-family: var(--font-display);
    font-weight: 600;
    font-size: .88rem;
    color: var(--ic-brand);
}
.tc-link:hover { gap: 13px; }

/* ------------------------------ 16. Gallery ----------------------- */
.gallery-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 14px;
}
.g-item {
    position: relative;
    border: 0;
    padding: 0;
    border-radius: var(--radius);
    overflow: hidden;
    aspect-ratio: 4 / 3;
    background: var(--ic-mist);
    cursor: zoom-in;
}
.g-item img { width: 100%; height: 100%; object-fit: cover; transition: transform .55s var(--ease); }
.g-item:hover img { transform: scale(1.08); }
.g-zoom {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    background: rgba(var(--ic-midnight-rgb), .55);
    color: #fff;
    font-size: 1.3rem;
    opacity: 0;
    transition: opacity .3s var(--ease);
}
.g-item:hover .g-zoom, .g-item:focus-visible .g-zoom { opacity: 1; }

.lightbox {
    position: fixed;
    inset: 0;
    z-index: 2500;
    background: rgba(4, 14, 28, .94);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px 16px;
}
.lb-figure { margin: 0; max-width: min(1100px, 92vw); text-align: center; }
.lb-figure img { max-height: 78vh; width: auto; border-radius: var(--radius); box-shadow: var(--shadow-lg); }
.lb-figure figcaption { color: rgba(255, 255, 255, .78); font-size: .9rem; margin-top: 14px; }

.lb-close, .lb-nav {
    position: absolute;
    background: rgba(255, 255, 255, .12);
    border: 1px solid rgba(255, 255, 255, .22);
    color: #fff;
    width: 48px; height: 48px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    font-size: 1.1rem;
    transition: background .25s var(--ease);
}
.lb-close:hover, .lb-nav:hover { background: var(--ic-brand); border-color: var(--ic-brand); }
.lb-close { top: 24px; right: 24px; }
.lb-prev  { left: 24px; }
.lb-next  { right: 24px; }

/* ------------------------------ 17. Publications ------------------ */
.pkg-row { margin-bottom: 64px; }
.pkg-card {
    height: 100%;
    background: #fff;
    border: 1px solid var(--ic-line);
    border-radius: var(--radius-lg);
    padding: 30px 26px 26px;
    text-align: center;
    position: relative;
    transition: transform .35s var(--ease), box-shadow .35s var(--ease), border-color .35s var(--ease);
}
.pkg-card:hover { transform: translateY(-6px); box-shadow: var(--shadow); border-color: rgba(var(--ic-brand-rgb), .3); }
.pkg-card.is-featured {
    border-color: var(--ic-brand);
    box-shadow: 0 18px 44px rgba(var(--ic-brand-rgb), .18);
}
.pkg-tag {
    position: absolute;
    top: -13px; left: 50%;
    transform: translateX(-50%);
    white-space: nowrap;
    font-family: var(--font-display);
    font-size: .72rem;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
    background: var(--ic-amber);
    color: #3a2600;
    border-radius: 30px;
    padding: 5px 16px;
}
.pkg-card.is-featured .pkg-tag { background: var(--ic-brand); color: #fff; }
.pkg-q {
    display: grid;
    place-items: center;
    width: 66px; height: 66px;
    margin: 6px auto 14px;
    border-radius: 20px;
    background: linear-gradient(135deg, var(--ic-mist), #dbe9fb);
    font-family: var(--font-display);
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--ic-brand);
}
.pkg-card.is-featured .pkg-q { background: linear-gradient(135deg, var(--ic-azure), var(--ic-brand)); color: #fff; }
.pkg-kind { font-size: .82rem; letter-spacing: .1em; text-transform: uppercase; color: var(--ic-mute); margin-bottom: 4px; }
.pkg-name { font-size: 1.18rem; margin-bottom: 16px; }
.pkg-link {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-family: var(--font-display);
    font-weight: 600;
    font-size: .88rem;
}
.pkg-link:hover { gap: 11px; }

.scopus-band {
    background: linear-gradient(120deg, var(--ic-cloud), var(--ic-mist));
    border: 1px solid var(--ic-line);
    border-radius: var(--radius-lg);
    padding: 40px;
}
.proof-head {
    display: flex;
    align-items: center;
    gap: 9px;
    font-size: 1rem;
    margin: 8px 0 16px;
}
.proof-head i { color: #2E9E5B; }

.proof-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 14px;
    max-height: 430px;
    overflow-y: auto;
    padding-right: 6px;
}
.proof-card {
    margin: 0;
    background: #fff;
    border: 1px solid var(--ic-line);
    border-radius: var(--radius);
    padding: 14px 16px;
    box-shadow: var(--shadow-sm);
    transition: transform .3s var(--ease), box-shadow .3s var(--ease);
}
.proof-card:hover { transform: translateY(-3px); box-shadow: var(--shadow); }
.proof-card img { width: 100%; height: auto; display: block; }

/* ------------------------------ 18. Why attend -------------------- */
.why-card {
    height: 100%;
    background: #fff;
    border: 1px solid var(--ic-line);
    border-radius: var(--radius-lg);
    padding: 32px 28px;
    transition: transform .35s var(--ease), box-shadow .35s var(--ease);
    position: relative;
    overflow: hidden;
}
.why-card::before {
    content: '';
    position: absolute;
    inset: 0 0 auto;
    height: 4px;
    background: linear-gradient(90deg, var(--ic-azure), var(--ic-brand));
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .4s var(--ease);
}
.why-card:hover { transform: translateY(-8px); box-shadow: var(--shadow); }
.why-card:hover::before { transform: scaleX(1); }

.why-ico {
    width: 58px; height: 58px;
    display: grid; place-items: center;
    border-radius: 18px;
    background: rgba(var(--ic-brand-rgb), .10);
    color: var(--ic-brand);
    font-size: 1.5rem;
    margin-bottom: 18px;
    transition: background .35s var(--ease), color .35s var(--ease);
}
.why-card:hover .why-ico { background: var(--ic-brand); color: #fff; }
.why-title { font-size: 1.12rem; margin-bottom: 12px; }
.why-card p { font-size: .94rem; }

.why-feature { background: linear-gradient(135deg, var(--ic-navy), var(--ic-steel)); border-color: transparent; }
.why-feature .why-title, .why-feature p { color: #fff; }
.why-feature p { color: rgba(255, 255, 255, .76); }
.why-feature .why-ico { background: rgba(var(--ic-azure-rgb), .2); color: var(--ic-azure); }
.why-feature:hover .why-ico { background: var(--ic-azure); color: var(--ic-navy); }
.why-list { display: grid; gap: 9px; }
.why-list li {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: .9rem;
    color: rgba(255, 255, 255, .84);
}
.why-list i { color: var(--ic-azure); margin-top: 4px; }

/* ---------- Why Attend variant 2: FEATURE SPLIT ----------
   Lifetime Access is the only benefit with sub-points, so it gets a panel of
   its own instead of being a sixth identical card. */
.why-split { display: grid; grid-template-columns: 400px minmax(0, 1fr); gap: 34px; align-items: start; }
.ws-feature {
    position: sticky;
    top: 104px;
    border-radius: var(--radius-lg);
    padding: 34px 32px;
    color: rgba(255, 255, 255, .78);
    box-shadow: var(--shadow);
    overflow: hidden;
    isolation: isolate;
}
/* Direct child only - a bare `.ws-feature img` would catch anything added
   to the copy later and blow it up to fill the panel. */
.ws-feature > img {
    position: absolute;
    inset: 0;
    width: 100%; height: 100%;
    object-fit: cover;
    z-index: -2;
}
/* The gradient does the legibility work, so it stays nearly opaque at the
   top where the heading sits and lifts only towards the foot. */
.ws-feature::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(160deg, rgba(var(--ic-navy-rgb), .94) 0%, rgba(var(--ic-steel-rgb), .9) 45%, rgba(var(--ic-navy-rgb), .82) 100%);
}
.wsf-ico {
    width: 58px; height: 58px;
    display: grid; place-items: center;
    border-radius: 18px;
    background: rgba(var(--ic-azure-rgb), .2);
    color: var(--ic-azure);
    font-size: 1.5rem;
    margin-bottom: 18px;
}
.wsf-tag {
    display: inline-block;
    font-family: var(--font-display);
    font-size: .68rem;
    font-weight: 600;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--ic-azure);
    margin-bottom: 8px;
}
.wsf-title { color: #fff; font-size: 1.3rem; margin-bottom: 12px; }
.wsf-lead { font-size: .93rem; margin-bottom: 18px; }

.ws-reasons { display: grid; gap: 14px; margin: 0; }
.ws-reasons li {
    display: flex;
    align-items: flex-start;
    gap: 18px;
    background: #fff;
    border: 1px solid var(--ic-line);
    border-radius: var(--radius);
    padding: 20px 24px;
    transition: transform .3s var(--ease), border-color .3s var(--ease), box-shadow .3s var(--ease);
}
.ws-reasons li:hover { transform: translateX(5px); border-color: rgba(var(--ic-brand-rgb), .28); box-shadow: var(--shadow-sm); }
.wsr-no {
    flex: none;
    font-family: var(--font-display);
    font-size: .82rem;
    font-weight: 700;
    color: rgba(var(--ic-brand-rgb), .45);
    padding-top: 12px;
    font-variant-numeric: tabular-nums;
}
.wsr-ico {
    width: 46px; height: 46px;
    flex: none;
    display: grid; place-items: center;
    border-radius: 14px;
    background: rgba(var(--ic-brand-rgb), .10);
    color: var(--ic-brand);
    font-size: 1.15rem;
}
.wsr-title { font-size: 1.05rem; margin-bottom: 5px; }
.ws-reasons p { font-size: .91rem; }

/* ---------- Why Attend variant 3: HAIRLINE BAND ----------
   No cards at all - five columns divided by rules. */
.why-band {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    margin-bottom: 34px;
}
.wb-item { padding: 6px 26px; border-left: 1px solid var(--ic-line); }
.wb-item:first-child { border-left: 0; padding-left: 0; }
.wb-item:last-child { padding-right: 0; }
.wb-ico {
    display: block;
    color: var(--ic-brand);
    font-size: 1.6rem;
    margin-bottom: 14px;
}
.wb-title { font-size: 1rem; margin-bottom: 8px; }
.wb-item p { font-size: .87rem; color: var(--ic-mute); line-height: 1.6; }

.why-strip {
    background: linear-gradient(120deg, var(--ic-navy), var(--ic-steel));
    border-radius: var(--radius-lg);
    padding: 32px 36px;
    color: rgba(255, 255, 255, .78);
    box-shadow: var(--shadow);
}
.wst-head { display: flex; align-items: center; gap: 20px; margin-bottom: 22px; }
.wst-ico {
    width: 54px; height: 54px;
    flex: none;
    display: grid; place-items: center;
    border-radius: 17px;
    background: rgba(var(--ic-azure-rgb), .2);
    color: var(--ic-azure);
    font-size: 1.4rem;
}
.wst-title { color: #fff; font-size: 1.25rem; margin-bottom: 5px; }
.wst-head p { font-size: .93rem; }
.wst-points { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 28px; }
.wst-points li { display: flex; gap: 11px; font-size: .91rem; }
.wst-points i { color: var(--ic-azure); flex: none; margin-top: 4px; }

/* ---------- Why Attend variant 4: INVERTED PANEL ---------- */
.why-glass {
    height: 100%;
    background: rgba(255, 255, 255, .05);
    border: 1px solid rgba(255, 255, 255, .12);
    border-radius: var(--radius-lg);
    padding: 30px 28px;
    transition: transform .3s var(--ease), background .3s var(--ease), border-color .3s var(--ease);
}
.why-glass:hover { transform: translateY(-6px); background: rgba(255, 255, 255, .08); border-color: rgba(var(--ic-azure-rgb), .4); }
.wg-ico {
    width: 56px; height: 56px;
    display: grid; place-items: center;
    border-radius: 18px;
    background: rgba(var(--ic-azure-rgb), .16);
    color: var(--ic-azure);
    font-size: 1.4rem;
    margin-bottom: 18px;
    box-shadow: 0 0 0 1px rgba(var(--ic-azure-rgb), .2), 0 8px 24px rgba(var(--ic-azure-rgb), .12);
}
.wg-title { color: #fff; font-size: 1.1rem; margin-bottom: 10px; }
.why-glass p { font-size: .93rem; color: rgba(255, 255, 255, .74); }
/* The feature card earns a brighter ground than the other five. */
.wg-feature {
    background: linear-gradient(150deg, rgba(var(--ic-azure-rgb), .16), rgba(var(--ic-brand-rgb), .1));
    border-color: rgba(var(--ic-azure-rgb), .34);
}
.wg-lead { margin-bottom: 16px; }

/* ------------------------------ 19. Reviews ----------------------- */
.reviews-band {
    background: linear-gradient(120deg, var(--ic-cloud), var(--ic-mist));
    border: 1px solid var(--ic-line);
    border-radius: var(--radius-lg);
    padding: 44px;
}
.google-badge {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    background: #fff;
    border: 1px solid var(--ic-line);
    border-radius: 40px;
    padding: 10px 20px 10px 12px;
    box-shadow: var(--shadow-sm);
    color: var(--ic-ink);
}
.google-badge:hover { transform: translateY(-2px); color: var(--ic-ink); }
.gb-g {
    width: 38px; height: 38px;
    display: grid; place-items: center;
    border-radius: 50%;
    background: conic-gradient(#EA4335 0 25%, #FBBC05 0 50%, #34A853 0 75%, #4285F4 0);
    color: #fff;
    font-family: var(--font-display);
    font-weight: 700;
}
.gb-body { display: flex; flex-direction: column; line-height: 1.3; }
.gb-body b { font-family: var(--font-display); font-size: .95rem; }
.gb-stars { color: var(--ic-amber); font-size: .8rem; }

/* Reviews carousel - three cards to a page, advanced on a timer. */
.rv-viewport { overflow: hidden; }
.rv-track {
    display: flex;
    transition: transform .5s var(--ease);
    will-change: transform;
}
.review-card {
    /* Two per page. These are full testimonials, not one-liners - at three
       up in this column the measure drops to about four words a line. */
    flex: 0 0 calc((100% - 16px) / 2);
    margin-right: 16px;
    display: flex;
    flex-direction: column;
    background: #fff;
    border: 1px solid var(--ic-line);
    border-radius: var(--radius);
    padding: 22px;
    box-shadow: var(--shadow-sm);
}
.rc-stars { color: var(--ic-amber); font-size: .85rem; }
/* The real testimonials vary from 40 to 120 words, so the quote scrolls
   inside the card rather than stretching every card to the longest one. */
.rc-text {
    flex: 1;
    font-size: .88rem;
    line-height: 1.6;
    margin: 12px 0 18px;
    color: var(--ic-body);
    max-height: 190px;
    overflow-y: auto;
    padding-right: 6px;
}
.rc-text::-webkit-scrollbar { width: 4px; }
.rc-text::-webkit-scrollbar-thumb { background: var(--ic-line); border-radius: 4px; }
.rc-who { display: flex; align-items: center; gap: 12px; margin-top: auto; }
.rc-avatar {
    width: 40px; height: 40px;
    flex: none;
    display: grid; place-items: center;
    border-radius: 50%;
    background: var(--ic-brand);
    color: #fff;
    font-family: var(--font-display);
    font-size: 1rem;
    font-weight: 700;
}

.rv-controls {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    margin-top: 20px;
}
.rv-nav {
    width: 38px; height: 38px;
    display: grid; place-items: center;
    border: 1px solid var(--ic-line);
    border-radius: 50%;
    background: #fff;
    color: var(--ic-brand);
    transition: background .22s var(--ease), color .22s var(--ease), border-color .22s var(--ease);
}
.rv-nav:hover { background: var(--ic-brand); border-color: var(--ic-brand); color: #fff; }
.rv-dots { display: flex; gap: 7px; }
.rv-dots button {
    width: 8px; height: 8px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: var(--ic-line);
    transition: width .25s var(--ease), background .25s var(--ease);
}
.rv-dots button.is-active { width: 22px; border-radius: 4px; background: var(--ic-brand); }
.rc-who b { display: block; font-family: var(--font-display); font-size: .9rem; color: var(--ic-ink); }
.rc-who em { font-style: normal; font-size: .8rem; color: var(--ic-mute); }

/* ------------------------------ 20. Get involved ------------------ */
.involve-card {
    height: 100%;
    background: rgba(255, 255, 255, .05);
    border: 1px solid rgba(255, 255, 255, .13);
    border-radius: var(--radius-lg);
    padding: 34px 30px;
    transition: transform .35s var(--ease), border-color .35s var(--ease), background .35s var(--ease);
}
.involve-card:hover {
    transform: translateY(-6px);
    border-color: rgba(var(--ic-azure-rgb), .45);
    background: rgba(var(--ic-azure-rgb), .08);
}
.iv-ico {
    width: 58px; height: 58px;
    display: grid; place-items: center;
    border-radius: 18px;
    background: rgba(var(--ic-azure-rgb), .16);
    color: var(--ic-azure);
    font-size: 1.5rem;
    margin-bottom: 18px;
}
.iv-title { font-size: 1.3rem; margin-bottom: 6px; }
.iv-lead {
    font-family: var(--font-display);
    font-weight: 500;
    color: var(--ic-azure);
    font-size: .95rem;
    margin-bottom: 14px;
}
.iv-text { color: rgba(255, 255, 255, .74); font-size: .95rem; }
.iv-list { display: grid; gap: 10px; margin: 18px 0 24px; }
.iv-list li {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: .92rem;
    color: rgba(255, 255, 255, .82);
}
.iv-list i { color: var(--ic-azure); margin-top: 4px; }
/* Closing lines after the list; the last one sits above the button. */
.iv-close { color: rgba(255, 255, 255, .74); font-size: .95rem; margin-bottom: 12px; }
.iv-close:last-of-type { margin-bottom: 24px; }
.iv-close strong { color: #fff; }

.speaker-modal { border: 0; border-radius: var(--radius-lg); overflow: hidden; }
.speaker-modal .modal-header { background: var(--ic-navy); color: #fff; border: 0; }
.speaker-modal .modal-title { color: #fff; font-size: 1.1rem; display: flex; align-items: center; gap: 9px; }
.speaker-modal .modal-title i { color: var(--ic-azure); }
.speaker-modal .btn-close { filter: invert(1) grayscale(1); }
.speaker-modal .modal-body { padding: 30px; }
.speaker-mail {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 1.05rem;
    background: var(--ic-mist);
    border-radius: 40px;
    padding: 12px 24px;
}

/* ------------------------------ 21. CTA band ---------------------- */
.cta-band {
    background:
        linear-gradient(115deg, rgba(var(--ic-midnight-rgb), .95), rgba(var(--ic-brand-rgb), .88)),
        url('../images/about-visual.jpg') center / cover fixed;
    padding: 72px 0;
}
.cta-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 34px;
    flex-wrap: wrap;
}
.cta-band .eyebrow {
    color: #fff;
    background: rgba(255, 255, 255, .12);
    border-color: rgba(255, 255, 255, .3);
}
.cta-title {
    color: #fff;
    font-size: clamp(1.3rem, 2.4vw, 1.9rem);
    max-width: 720px;
    margin: 0;
}
.cta-actions { display: flex; gap: 14px; flex-wrap: wrap; }

/* Subscribe band (home page, QA #17) - icon, copy, one button. */
.subscribe-band { padding: 56px 0; }
.subscribe-band .cta-inner { flex-wrap: nowrap; gap: 30px; }
.sub-ico {
    flex: none;
    width: 92px; height: 92px;
    display: grid; place-items: center;
    border-radius: 24px;
    background: rgba(255, 255, 255, .12);
    border: 1px solid rgba(255, 255, 255, .22);
    color: #fff;
    font-size: 2.6rem;
}
.sub-copy { flex: 1; min-width: 0; }
.subscribe-band .eyebrow { margin-bottom: 12px; }
.subscribe-band .cta-title { margin-bottom: 10px; }
.sub-text { color: rgba(255, 255, 255, .8); max-width: 760px; font-size: .98rem; }
.subscribe-band .cta-actions { flex: none; }
.subscribe-band .cta-actions .btn { display: inline-flex; align-items: center; gap: 8px; }
@media (max-width: 767.98px) {
    .subscribe-band .cta-inner { flex-wrap: wrap; }
    .sub-ico { width: 66px; height: 66px; font-size: 1.9rem; border-radius: 18px; }
    /* Icon on its own row above the copy, so the text gets the full width. */
    .sub-copy { flex-basis: 100%; }
    .subscribe-band .cta-actions, .subscribe-band .cta-actions .btn { width: 100%; justify-content: center; }
}
/* The button on a cta-band is white, because the band behind it is already
   crimson. These carry body.theme-ember so they outrank the themed
   .btn-brand gradient (0,2,1), which otherwise paints crimson on crimson
   and makes the button all but disappear. */
.cta-actions .btn-brand,
body.theme-ember .cta-actions .btn-brand {
    background: #fff;
    border-color: #fff;
    color: var(--ic-brand);
}
.cta-actions .btn-brand:hover,
.cta-actions .btn-brand:focus,
body.theme-ember .cta-actions .btn-brand:hover,
body.theme-ember .cta-actions .btn-brand:focus {
    background: var(--ic-azure);
    border-color: var(--ic-azure);
    color: var(--ic-wine);
}

/* ------------------------------ 22. FAQ cards --------------------- */
.faq-card {
    display: block;
    height: 100%;
    background: #fff;
    border: 1px solid var(--ic-line);
    border-radius: var(--radius-lg);
    padding: 30px 28px;
    color: var(--ic-body);
    transition: transform .35s var(--ease), box-shadow .35s var(--ease), border-color .35s var(--ease);
}
.faq-card:hover {
    transform: translateY(-6px);
    box-shadow: var(--shadow);
    border-color: rgba(var(--ic-brand-rgb), .3);
    color: var(--ic-body);
}
.fq-ico {
    width: 54px; height: 54px;
    display: grid; place-items: center;
    border-radius: 16px;
    background: rgba(var(--ic-brand-rgb), .10);
    color: var(--ic-brand);
    font-size: 1.4rem;
    margin-bottom: 16px;
}
.fq-title { font-size: 1.1rem; margin-bottom: 10px; }
.faq-card p { font-size: .93rem; }
.fq-go {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 16px;
    font-family: var(--font-display);
    font-weight: 600;
    font-size: .88rem;
    color: var(--ic-brand);
}
.faq-card:hover .fq-go { gap: 12px; }

/* ------------------------------ 23. Services ---------------------- */
.svc-card {
    height: 100%;
    background: #fff;
    border: 1px solid var(--ic-line);
    border-radius: var(--radius-lg);
    padding: 30px 26px;
    text-align: center;
    transition: transform .35s var(--ease), box-shadow .35s var(--ease);
}
.svc-card:hover { transform: translateY(-8px); box-shadow: var(--shadow); }
.svc-ico {
    width: 62px; height: 62px;
    display: grid; place-items: center;
    margin: 0 auto 18px;
    border-radius: 20px;
    background: linear-gradient(135deg, var(--ic-mist), #dbe9fb);
    color: var(--ic-brand);
    font-size: 1.6rem;
    transition: background .35s var(--ease), color .35s var(--ease);
}
.svc-card .svc-ico { background: linear-gradient(135deg, var(--ic-azure), var(--ic-brand)); color: #fff; }
.svc-title { font-size: 1.1rem; margin-bottom: 10px; }
.svc-text { font-size: .92rem; margin-bottom: 16px; }
.svc-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: var(--font-display);
    font-weight: 600;
    font-size: .88rem;
}
.svc-link:hover { gap: 12px; }

/* ------------------------------ 24. Subscribe --------------------- */
.subscribe-section { padding-bottom: 96px; }
.subscribe-card {
    background: linear-gradient(125deg, var(--ic-midnight) 0%, var(--ic-steel) 100%);
    border-radius: var(--radius-lg);
    padding: 48px;
    color: rgba(255, 255, 255, .78);
    position: relative;
    overflow: hidden;
    box-shadow: var(--shadow-lg);
}
.subscribe-card::after {
    content: '';
    position: absolute;
    left: -80px; bottom: -110px;
    width: 320px; height: 320px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(var(--ic-azure-rgb), .28), transparent 68%);
}
.subscribe-card .row { position: relative; z-index: 1; }
.subscribe-card .section-title { color: #fff; }
.subscribe-card .section-title .accent { color: var(--ic-azure); }
.subscribe-card .eyebrow {
    color: var(--ic-azure);
    background: rgba(var(--ic-azure-rgb), .14);
    border-color: rgba(var(--ic-azure-rgb), .3);
}

.form-label {
    font-family: var(--font-display);
    font-size: .84rem;
    font-weight: 500;
    color: rgba(255, 255, 255, .82);
    margin-bottom: 6px;
}
.form-label .req { color: var(--ic-azure); }

.subscribe-form .form-control,
.subscribe-form .form-select {
    background: rgba(255, 255, 255, .08);
    border: 1px solid rgba(255, 255, 255, .18);
    color: #fff;
    border-radius: var(--radius-sm);
    padding: 12px 16px;
    font-size: .94rem;
}
.subscribe-form .form-control::placeholder { color: rgba(255, 255, 255, .4); }
.subscribe-form .form-control:focus,
.subscribe-form .form-select:focus {
    background: rgba(255, 255, 255, .14);
    border-color: var(--ic-azure);
    box-shadow: 0 0 0 .2rem rgba(var(--ic-azure-rgb), .18);
    color: #fff;
}
.subscribe-form .form-select option { color: var(--ic-ink); }
.subscribe-form .is-invalid { border-color: #ff8080; }

.hp-field { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.form-feedback { font-size: .9rem; }
.form-feedback.is-ok    { color: #7BE3A6; }
.form-feedback.is-error { color: #FF9B9B; }

/* ------------------------------ 25. Footer ------------------------ */
.site-footer {
    background: var(--ic-midnight);
    color: rgba(255, 255, 255, .68);
    padding: 72px 0 0;
    font-size: .94rem;
}
.footer-brand { display: inline-block; margin-bottom: 18px; }
.footer-brand img { height: 62px; width: auto; }
.footer-blurb { max-width: 380px; margin-bottom: 22px; }

.footer-social { display: flex; gap: 10px; }
.footer-social a {
    width: 38px; height: 38px;
    display: grid; place-items: center;
    border-radius: 12px;
    background: rgba(255, 255, 255, .07);
    color: rgba(255, 255, 255, .8);
}
.footer-social a:hover { background: var(--ic-brand); color: #fff; transform: translateY(-3px); }

.footer-head {
    color: #fff;
    font-size: 1rem;
    margin-bottom: 20px;
    position: relative;
    padding-bottom: 12px;
}
.footer-head::after {
    content: '';
    position: absolute;
    left: 0; bottom: 0;
    width: 34px; height: 2px;
    background: var(--ic-azure);
}

.footer-links { display: grid; gap: 10px; }
.footer-links a {
    display: flex;
    align-items: center;
    gap: 8px;
    color: rgba(255, 255, 255, .68);
    font-size: .92rem;
}
.footer-links a i { font-size: .72rem; color: var(--ic-azure); }
.footer-links a:hover { color: #fff; transform: translateX(4px); }

.footer-pending {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: .92rem;
    color: rgba(255, 255, 255, .38);
}
.footer-pending i { font-size: .82rem; }
.footer-pending em {
    font-style: normal;
    font-size: .68rem;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--ic-amber);
}

.footer-contact { display: grid; gap: 16px; }
.footer-contact li { display: flex; gap: 12px; }
.footer-contact > li > i {
    width: 36px; height: 36px;
    flex: none;
    display: grid; place-items: center;
    border-radius: 12px;
    background: rgba(var(--ic-azure-rgb), .14);
    color: var(--ic-azure);
}
.fc-label {
    display: block;
    font-size: .74rem;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--ic-mute);
}
.footer-contact a { color: rgba(255, 255, 255, .82); font-size: .9rem; }
.footer-contact a:hover { color: var(--ic-azure); }

.footer-alert {
    display: flex;
    gap: 14px;
    align-items: flex-start;
    background: rgb(96 34 50 / 44%);
    border: 1px solid rgba(245, 165, 36, .3);
    border-radius: var(--radius);
    padding: 18px 22px;
    margin-top: 52px;
    font-size: .88rem;
    color: rgba(255, 255, 255, .78);
}
.footer-alert > i { color: var(--ic-amber); font-size: 1.2rem; margin-top: 2px; }
.footer-alert strong { color: var(--ic-amber); }
.footer-alert a { color: var(--ic-azure); }

.footer-bottom {
    margin-top: 30px;
    padding: 22px 0;
    border-top: 1px solid rgba(255, 255, 255, .09);
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
    font-size: .86rem;
    color: var(--ic-mute);
}
.footer-bottom ul { display: flex; gap: 20px; flex-wrap: wrap; }
.footer-bottom a { color: var(--ic-mute); }
.footer-bottom a:hover { color: var(--ic-azure); }

/* ------------------------------ 26. Floating utilities ------------ */
.float-whatsapp {
    position: fixed;
    left: 22px; bottom: 22px;
    z-index: 1000;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: #25D366;
    color: #fff;
    border-radius: 40px;
    padding: 12px 20px 12px 14px;
    font-family: var(--font-display);
    font-weight: 600;
    font-size: .9rem;
    box-shadow: 0 12px 30px rgba(37, 211, 102, .38);
    transition: transform .3s var(--ease);
}
.float-whatsapp i { font-size: 1.3rem; }
.float-whatsapp:hover { transform: translateY(-3px); color: #fff; }

.back-to-top {
    position: fixed;
    right: 22px; bottom: 22px;
    z-index: 1000;
    width: 48px; height: 48px;
    border: 0;
    border-radius: 50%;
    background: var(--ic-brand);
    color: #fff;
    font-size: 1.1rem;
    box-shadow: 0 12px 30px rgba(var(--ic-brand-rgb), .38);
    opacity: 0;
    visibility: hidden;
    transform: translateY(12px);
    transition: all .35s var(--ease);
}
.back-to-top.is-visible { opacity: 1; visibility: visible; transform: none; }
.back-to-top:hover { background: var(--ic-navy); }

/* Presenter / Listener pair, centred at the foot of the viewport between the
   WhatsApp button (left) and back-to-top (right). */
.float-cta {
    position: fixed;
    left: 50%; bottom: 22px;
    z-index: 999;
    display: flex;
    gap: 8px;
    padding: 6px;
    background: rgba(var(--ic-midnight-rgb), .88);
    border: 1px solid rgba(255, 255, 255, .14);
    border-radius: 50px;
    box-shadow: 0 16px 40px rgba(4, 16, 34, .35);
    backdrop-filter: blur(10px);
    opacity: 0;
    visibility: hidden;
    transform: translate(-50%, 16px);
    transition: opacity .35s var(--ease), transform .35s var(--ease), visibility .35s;
}
.float-cta.is-visible { opacity: 1; visibility: visible; transform: translate(-50%, 0); }
.fc-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 11px 22px;
    border-radius: 40px;
    font-family: var(--font-display);
    font-size: .9rem;
    font-weight: 600;
    white-space: nowrap;
    transition: background .25s var(--ease), color .25s var(--ease);
}
.fc-presenter { background: var(--ic-brand); color: #fff; }
.fc-presenter:hover { background: var(--ic-brand-dark); color: #fff; }
.fc-listener { color: #fff; border: 1px solid rgba(255, 255, 255, .28); }
.fc-listener:hover { background: #fff; color: var(--ic-navy); }

/* ==================================================================
   INNER PAGES
   Components below are shared by every non-home page.
   ================================================================== */

/* ------------------------------ 27a. Page banner ------------------ */
/* Inset card rather than a full-bleed strip, with every line centred on the
   page axis - eyebrow, heading, standfirst and breadcrumb alike. */
.page-banner {
    position: relative;
    width: min(100% - 48px, 1320px);
    margin: 26px auto 0;
    padding: 68px 0 60px;
    background: linear-gradient(115deg, var(--ic-midnight) 0%, var(--ic-steel) 100%);
    color: rgba(255, 255, 255, .78);
    border-radius: var(--radius-lg);
    overflow: hidden;
    text-align: center;
}
.pb-media { position: absolute; inset: 0; overflow: hidden; }
.pb-veil {
    position: absolute;
    right: -120px; top: -140px;
    width: 460px; height: 460px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(var(--ic-azure-rgb), .28), transparent 68%);
}

/* ---------- Banner with a photograph ---------- *
   The supplied city banner is bright (sky, pale stone), so the veil has to
   carry the contrast for the white heading and the breadcrumb. The copy is
   centred, so the veil is heaviest through the middle and eases towards the
   edges - that keeps the photograph readable either side of the text. */
.page-banner.has-photo .pb-media img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 62%;
}
.page-banner.has-photo .pb-veil {
    inset: 0;
    right: auto; top: auto;
    width: 100%; height: 100%;
    border-radius: 0;
    background:
        linear-gradient(90deg,
            rgba(var(--ic-navy-rgb), .62) 0%,
            rgba(var(--ic-midnight-rgb), .90) 28%,
            rgba(var(--ic-midnight-rgb), .93) 50%,
            rgba(var(--ic-midnight-rgb), .90) 72%,
            rgba(var(--ic-navy-rgb), .62) 100%);
}
/* The circuit grid would fight the photograph. */
.page-banner.has-photo .pb-grid { opacity: .45; }
.pb-grid {
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(var(--ic-azure-rgb), .09) 1px, transparent 1px),
        linear-gradient(90deg, rgba(var(--ic-azure-rgb), .09) 1px, transparent 1px);
    background-size: 58px 58px;
    mask-image: radial-gradient(circle at 78% 40%, #000 0%, transparent 70%);
    -webkit-mask-image: radial-gradient(circle at 78% 40%, #000 0%, transparent 70%);
}
.pb-inner { position: relative; z-index: 1; }
.page-banner .eyebrow {
    color: var(--ic-azure);
    background: rgba(var(--ic-azure-rgb), .12);
    border-color: rgba(var(--ic-azure-rgb), .28);
}
.pb-title {
    color: #fff;
    font-size: clamp(1.9rem, 4vw, 3rem);
    margin-bottom: 12px;
}
/* auto margins, or the 620px box would stay pinned to the left. */
.pb-text { color: rgba(255, 255, 255, .74); max-width: 620px; margin: 0 auto 20px; }

.pb-crumbs ol {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 8px 10px;
    list-style: none;
    padding: 0;
    margin: 0;
    font-size: .86rem;
}
.pb-crumbs li { display: flex; align-items: center; gap: 10px; color: rgba(255, 255, 255, .72); }
.pb-crumbs li + li::before { content: '/'; color: rgba(255, 255, 255, .38); }
/* Links sit back; the page you are on is the brightest thing in the trail.
   Peach on the mauve banner read as muddy, so it is kept for hover only. */
.pb-crumbs a { color: rgba(255, 255, 255, .72); display: inline-flex; align-items: center; gap: 6px; }
.pb-crumbs a:hover { color: var(--ic-azure); }
.pb-crumbs [aria-current] { color: #fff; font-weight: 600; }

/* ------------------------------ 27b. Jump nav --------------------- */
.jump-nav {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    padding: 14px;
    background: var(--ic-cloud);
    border: 1px solid var(--ic-line);
    border-radius: var(--radius-lg);
}
.jump-nav a {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 16px;
    border-radius: 40px;
    background: #fff;
    border: 1px solid var(--ic-line);
    font-family: var(--font-display);
    font-size: .86rem;
    font-weight: 500;
    color: var(--ic-navy);
}
.jump-nav a i { color: var(--ic-brand); }
.jump-nav a:hover { background: var(--ic-brand); border-color: var(--ic-brand); color: #fff; }
.jump-nav a:hover i { color: #fff; }

/* ------------------------------ 27c. Intro block ------------------ */
.sub-intro {
    display: flex;
    gap: 22px;
    background: linear-gradient(120deg, var(--ic-cloud), var(--ic-mist));
    border: 1px solid var(--ic-line);
    border-radius: var(--radius-lg);
    padding: 30px 34px;
}
.si-mark {
    width: 62px; height: 62px;
    flex: none;
    display: grid; place-items: center;
    border-radius: 18px;
    background: linear-gradient(135deg, var(--ic-azure), var(--ic-brand));
    color: #fff;
    font-size: 1.6rem;
    box-shadow: 0 12px 26px rgba(var(--ic-brand-rgb), .3);
}
.sub-intro p { font-size: 1.02rem; }
.sub-intro p + p { margin-bottom: 0; }

/* ------------------------------ 27d. Conference context ----------- */
.conf-context {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2px;
    background: var(--ic-line);
    border: 1px solid var(--ic-line);
    border-radius: var(--radius-lg);
    overflow: hidden;
}
.conf-context li {
    background: #fff;
    padding: 22px 24px;
    display: grid;
    grid-template-columns: 40px 1fr;
    grid-template-areas: 'icon label' 'icon value';
    gap: 2px 14px;
    align-content: start;
}
.conf-context i {
    grid-area: icon;
    width: 40px; height: 40px;
    display: grid; place-items: center;
    border-radius: 12px;
    background: rgba(var(--ic-brand-rgb), .10);
    color: var(--ic-brand);
    font-size: 1.05rem;
}
.cc-label {
    grid-area: label;
    font-size: .72rem;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--ic-mute);
}
.cc-value {
    grid-area: value;
    font-family: var(--font-display);
    font-weight: 600;
    color: var(--ic-ink);
    font-size: .96rem;
    line-height: 1.45;
}

/* ------------------------------ 27e. Light forms ------------------ */
.form-card {
    background: #fff;
    border: 1px solid var(--ic-line);
    border-radius: var(--radius-lg);
    padding: 34px;
    box-shadow: var(--shadow-sm);
}
.form-legend {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 1.2rem;
    padding-bottom: 16px;
    margin-bottom: 24px;
    border-bottom: 1px solid var(--ic-line);
}
.form-legend i { color: var(--ic-brand); }

.form-card .form-label { color: var(--ic-navy); }

.form-card .form-control,
.form-card .form-select {
    background: var(--ic-cloud);
    border: 1px solid var(--ic-line);
    border-radius: var(--radius-sm);
    padding: 12px 15px;
    font-size: .95rem;
    color: var(--ic-ink);
}
.form-card .form-control::placeholder { color: var(--ic-mute); }
.form-card .form-control:focus,
.form-card .form-select:focus {
    background: #fff;
    border-color: var(--ic-brand);
    box-shadow: 0 0 0 .2rem rgba(var(--ic-brand-rgb), .12);
}
.form-card .is-invalid { border-color: #D94141; background: #FFF6F6; }

.field-hint { font-size: .82rem; color: var(--ic-mute); margin-top: 7px; }
#abstractCount { font-family: var(--font-display); font-weight: 600; color: var(--ic-body); }
#abstractCount.is-ok   { color: #2E9E5B; }
#abstractCount.is-over { color: #D94141; }

.form-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 18px;
    margin-top: 8px;
}
.form-foot { font-size: .84rem; color: var(--ic-mute); margin-top: 14px; }
.form-card .form-feedback.is-ok    { color: #1E7F45; }
.form-card .form-feedback.is-error { color: #C22A2A; }

/* Every Bootstrap modal on the site. Bootstrap's defaults (1055 / 1050) sit
   below the sticky header (1100) and its mega panels (1200), so a modal
   opened under them with its title and close button hidden. */
.modal          { --bs-modal-zindex: 1300; }
.modal-backdrop { --bs-backdrop-zindex: 1290; }

/* ---------- Publication Queries modal (journals-publications.php) ---------- */
.pub-modal .modal-content { border: 0; border-radius: var(--radius-lg); overflow: hidden; }
.pub-modal .modal-header { padding: 18px 26px; border-bottom: 1px solid var(--ic-line); }
.pub-modal .modal-title { font-size: 1.15rem; color: var(--ic-navy); margin: 0; }
.pub-modal .modal-body { padding: 24px 26px 26px; }
.pm-head {
    text-align: center;
    padding-bottom: 20px;
    margin-bottom: 22px;
    border-bottom: 1px solid var(--ic-line);
}
.pm-title { font-size: clamp(1.25rem, 2.4vw, 1.6rem); color: var(--ic-navy); margin-bottom: 6px; }
.pm-tag {
    font-family: var(--font-display);
    font-size: .74rem;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--ic-brand);
}
/* The page's .form-label is sized for dark bands; these sit on white. */
.pub-modal .form-label { color: var(--ic-ink); font-weight: 600; font-size: .86rem; }
.pub-modal .form-label .req { color: #D93636; }
.pm-foot { display: flex; align-items: center; flex-wrap: wrap; gap: 12px 18px; margin-top: 6px; }
.pm-foot p { font-size: .86rem; color: var(--ic-slate); }
.pub-modal .form-feedback { margin-top: 12px; }
.pub-modal .form-feedback.is-ok    { color: #1E7F45; }
.pub-modal .form-feedback.is-error { color: #C22A2A; }

/* Upload widget */
.upload-drop {
    display: flex;
    align-items: center;
    gap: 16px;
    width: 100%;
    padding: 22px 24px;
    border: 2px dashed rgba(var(--ic-brand-rgb), .3);
    border-radius: var(--radius);
    background: var(--ic-cloud);
    cursor: pointer;
    transition: border-color .25s var(--ease), background .25s var(--ease);
}
.upload-drop:hover,
.upload-drop.is-dragging { border-color: var(--ic-brand); background: rgba(var(--ic-brand-rgb), .05); }
.upload-drop.has-file { border-style: solid; border-color: #2E9E5B; background: rgba(46, 158, 91, .05); }
.upload-input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.ud-icon {
    width: 52px; height: 52px;
    flex: none;
    display: grid; place-items: center;
    border-radius: 16px;
    background: rgba(var(--ic-brand-rgb), .10);
    color: var(--ic-brand);
    font-size: 1.4rem;
}
.upload-drop.has-file .ud-icon { background: rgba(46, 158, 91, .12); color: #2E9E5B; }
.ud-copy { display: flex; flex-direction: column; }
.ud-copy b { font-family: var(--font-display); color: var(--ic-navy); }
.ud-copy em { font-style: normal; font-size: .82rem; color: var(--ic-mute); }
.ud-file {
    margin-left: auto;
    font-size: .88rem;
    color: #1E7F45;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    max-width: 45%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.ud-file em { font-style: normal; color: var(--ic-mute); }
.ud-clear {
    margin-top: 10px;
    background: none;
    border: 0;
    padding: 0;
    font-size: .84rem;
    color: #C22A2A;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.ud-clear:hover { text-decoration: underline; }

/* ------------------------------ 27f. Form sidebar ----------------- */
.form-aside {
    position: sticky;
    top: 110px;
    background: linear-gradient(150deg, var(--ic-cloud), var(--ic-mist));
    border: 1px solid var(--ic-line);
    border-radius: var(--radius-lg);
    padding: 28px 26px;
}
.aside-title {
    display: flex;
    align-items: center;
    gap: 9px;
    font-size: 1.05rem;
    margin-bottom: 16px;
}
.aside-title i { color: var(--ic-brand); }
.aside-list { display: grid; gap: 11px; margin-bottom: 20px; }
.aside-list li { display: flex; gap: 10px; font-size: .9rem; }
.aside-list i { color: var(--ic-brand); margin-top: 3px; flex: none; }

.aside-downloads { display: grid; gap: 8px; margin-bottom: 22px; }
.aside-downloads a,
.aside-downloads .ad-pending {
    display: flex;
    align-items: center;
    gap: 10px;
    background: #fff;
    border: 1px solid var(--ic-line);
    border-radius: var(--radius-sm);
    padding: 11px 14px;
    font-size: .88rem;
    color: var(--ic-navy);
}
.aside-downloads a:hover { border-color: var(--ic-brand); color: var(--ic-brand); }
.aside-downloads .ad-pending { color: var(--ic-mute); border-style: dashed; }
.aside-downloads em {
    font-style: normal;
    font-size: .68rem;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--ic-amber);
    white-space: nowrap;
}

.aside-help {
    display: flex;
    gap: 12px;
    background: #fff;
    border: 1px solid var(--ic-line);
    border-radius: var(--radius);
    padding: 18px;
}
.aside-help > i { color: var(--ic-brand); font-size: 1.2rem; margin-top: 2px; }
.aside-help b { font-family: var(--font-display); color: var(--ic-ink); display: block; margin-bottom: 4px; }
.aside-help p { font-size: .86rem; }

/* ------------------------------ 27g. Rule cards ------------------- */
.rule-card {
    height: 100%;
    background: #fff;
    border: 1px solid var(--ic-line);
    border-radius: var(--radius-lg);
    padding: 26px 24px;
    transition: transform .35s var(--ease), box-shadow .35s var(--ease), border-color .35s var(--ease);
}
.rule-card:hover { transform: translateY(-5px); box-shadow: var(--shadow); border-color: rgba(var(--ic-brand-rgb), .28); }
.rule-ico {
    width: 50px; height: 50px;
    display: grid; place-items: center;
    border-radius: 15px;
    background: rgba(var(--ic-brand-rgb), .10);
    color: var(--ic-brand);
    font-size: 1.3rem;
    margin-bottom: 15px;
}
.rule-title { font-size: 1.05rem; margin-bottom: 9px; }
.rule-card p { font-size: .93rem; }

/* ------------------------------ 27h. Panels and lists ------------- */
.panel-note {
    background: linear-gradient(120deg, var(--ic-cloud), var(--ic-mist));
    border: 1px solid var(--ic-line);
    border-left: 4px solid var(--ic-brand);
    border-radius: var(--radius);
    padding: 26px 28px;
}
.panel-title {
    display: flex;
    align-items: center;
    gap: 9px;
    font-size: 1.08rem;
    margin-bottom: 12px;
}
.panel-title i { color: var(--ic-brand); }

.tick-list { display: grid; gap: 12px; }
.tick-list li { display: flex; align-items: flex-start; gap: 12px; }
.tick-list i {
    width: 24px; height: 24px;
    flex: none;
    display: grid; place-items: center;
    border-radius: 50%;
    background: rgba(var(--ic-brand-rgb), .12);
    color: var(--ic-brand);
    font-size: .78rem;
    margin-top: 3px;
}
.bg-navy .tick-list i { background: rgba(var(--ic-azure-rgb), .18); color: var(--ic-azure); }

.cta-row { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 24px; }
.btn.is-disabled { opacity: .55; cursor: not-allowed; pointer-events: none; }

/* Left-aligned section heads on inner pages. */
.section-head.text-start { margin-left: 0; text-align: left !important; }

/* ------------------------------ 27i. Format preview --------------- */
.format-preview {
    background: #fff;
    border: 1px solid var(--ic-line);
    border-radius: var(--radius-lg);
    padding: 24px;
    box-shadow: var(--shadow-sm);
}
.format-preview figcaption {
    font-family: var(--font-display);
    font-size: .74rem;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--ic-mute);
    margin-bottom: 14px;
}
.fp-sheet {
    border: 1px solid var(--ic-line);
    border-radius: var(--radius-sm);
    padding: 24px 26px;
    background: var(--ic-cloud);
}
.fp-title {
    text-align: center;
    font-family: var(--font-display);
    font-weight: 700;
    color: var(--ic-ink);
    font-size: 1rem;
    margin-bottom: 8px;
}
.fp-authors { text-align: center; font-size: .88rem; margin-bottom: 4px; color: var(--ic-body); }
.fp-affil   { text-align: center; font-size: .8rem; color: var(--ic-mute); margin-bottom: 16px; }
.fp-body { display: grid; gap: 7px; margin-bottom: 16px; }
.fp-body span {
    display: block;
    height: 7px;
    border-radius: 4px;
    background: rgba(var(--ic-navy-rgb), .12);
}
.fp-body span.short { width: 62%; }
.fp-bio {
    font-family: var(--font-display);
    font-size: .78rem;
    font-weight: 600;
    color: var(--ic-brand);
    margin-bottom: 8px;
}
.fp-legend { display: grid; gap: 8px; margin-top: 16px; font-size: .84rem; color: var(--ic-body); }
.fp-legend li { display: flex; align-items: center; gap: 9px; }
.fpl-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--ic-azure); flex: none; }

/* ------------------------------ 27j. Section cards ---------------- */
.sect-card {
    height: 100%;
    background: rgba(255, 255, 255, .05);
    border: 1px solid rgba(255, 255, 255, .12);
    border-radius: var(--radius);
    padding: 24px 22px;
    transition: transform .35s var(--ease), border-color .35s var(--ease), background .35s var(--ease);
}
.sect-card:hover {
    transform: translateY(-5px);
    border-color: rgba(var(--ic-azure-rgb), .45);
    background: rgba(var(--ic-azure-rgb), .08);
}
.sc-num {
    display: block;
    font-family: var(--font-display);
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--ic-azure);
    line-height: 1;
    margin-bottom: 10px;
}
.sc-title { font-size: 1.02rem; margin-bottom: 8px; }
.sect-card p { font-size: .9rem; color: rgba(255, 255, 255, .74); }

.submit-band {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 24px;
    background: rgba(var(--ic-azure-rgb), .10);
    border: 1px solid rgba(var(--ic-azure-rgb), .28);
    border-radius: var(--radius-lg);
    padding: 30px 34px;
}
.sb-title { font-size: 1.25rem; margin-bottom: 6px; }
.submit-band p { color: rgba(255, 255, 255, .76); }
.submit-band .cta-row { margin-top: 0; }

/* ------------------------------ 27k. Evaluation flow -------------- */
.eval-flow { display: grid; gap: 18px; position: relative; }
.eval-flow li { display: flex; gap: 20px; position: relative; }
.eval-flow li:not(:last-child)::before {
    content: '';
    position: absolute;
    left: 29px; top: 62px; bottom: -18px;
    width: 2px;
    background: linear-gradient(180deg, rgba(var(--ic-brand-rgb), .35), rgba(var(--ic-brand-rgb), .06));
}
.ef-node {
    width: 60px; height: 60px;
    flex: none;
    display: grid; place-items: center;
    border-radius: 18px;
    background: linear-gradient(135deg, var(--ic-azure), var(--ic-brand));
    color: #fff;
    font-size: 1.3rem;
    box-shadow: 0 10px 24px rgba(var(--ic-brand-rgb), .28);
}
.ef-body {
    flex: 1;
    background: #fff;
    border: 1px solid var(--ic-line);
    border-radius: var(--radius);
    padding: 20px 24px;
    box-shadow: var(--shadow-sm);
}
.ef-step {
    font-family: var(--font-display);
    font-size: .7rem;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--ic-brand);
}
.ef-title { font-size: 1.08rem; margin: 4px 0 8px; }
.ef-body p { font-size: .94rem; }
.ef-meta {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin-top: 12px;
    background: var(--ic-mist);
    border-radius: 30px;
    padding: 5px 14px;
    font-family: var(--font-display);
    font-size: .8rem;
    font-weight: 600;
    color: var(--ic-navy);
}
.ef-meta i { color: var(--ic-brand); }

/* ------------------------------ 27l. Note cards ------------------- */
.note-card {
    height: 100%;
    display: flex;
    gap: 16px;
    background: #fff;
    border: 1px solid var(--ic-line);
    border-left: 4px solid var(--ic-brand);
    border-radius: var(--radius);
    padding: 22px 24px;
    box-shadow: var(--shadow-sm);
}
.note-card.is-warn { border-left-color: var(--ic-amber); background: rgba(245, 165, 36, .05); }
.nc-ico {
    width: 44px; height: 44px;
    flex: none;
    display: grid; place-items: center;
    border-radius: 14px;
    background: rgba(var(--ic-brand-rgb), .10);
    color: var(--ic-brand);
    font-size: 1.15rem;
}
.note-card.is-warn .nc-ico { background: rgba(245, 165, 36, .16); color: #B77400; }
.nc-title { font-size: 1.02rem; margin-bottom: 6px; }
.note-card p { font-size: .93rem; }

/* ------------------------------ 27n. Presentation modes ----------- */
.mode-card {
    display: flex;
    flex-direction: column;
    height: 100%;
    position: relative;
    background: #fff;
    border: 1px solid var(--ic-line);
    border-radius: var(--radius-lg);
    padding: 28px 26px;
    color: var(--ic-body);
    overflow: hidden;
    transition: transform .35s var(--ease), box-shadow .35s var(--ease), border-color .35s var(--ease);
}
.mode-card::before {
    content: '';
    position: absolute;
    inset: 0 0 auto;
    height: 4px;
    background: linear-gradient(90deg, var(--ic-azure), var(--ic-brand));
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .4s var(--ease);
}
.mode-card:hover {
    transform: translateY(-6px);
    box-shadow: var(--shadow);
    border-color: rgba(var(--ic-brand-rgb), .28);
    color: var(--ic-body);
}
.mode-card:hover::before { transform: scaleX(1); }

.mc-no {
    position: absolute;
    top: 20px; right: 24px;
    font-family: var(--font-display);
    font-size: 2.4rem;
    font-weight: 700;
    color: rgba(var(--ic-brand-rgb), .10);
    line-height: 1;
}
.mc-ico {
    width: 56px; height: 56px;
    display: grid; place-items: center;
    border-radius: 17px;
    background: rgba(var(--ic-brand-rgb), .10);
    color: var(--ic-brand);
    font-size: 1.45rem;
    margin-bottom: 16px;
    transition: background .35s var(--ease), color .35s var(--ease);
}
.mode-card:hover .mc-ico { background: var(--ic-brand); color: #fff; }
.mc-title { font-size: 1.15rem; margin-bottom: 8px; }
.mc-text { font-size: .93rem; margin-bottom: 14px; }
.mc-meta {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--ic-mist);
    border-radius: 30px;
    padding: 6px 14px;
    font-family: var(--font-display);
    font-size: .8rem;
    font-weight: 600;
    color: var(--ic-navy);
    align-self: flex-start;
}
.mc-meta i { color: var(--ic-brand); }
.mc-go {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: auto;
    padding-top: 18px;
    font-family: var(--font-display);
    font-weight: 600;
    font-size: .88rem;
    color: var(--ic-brand);
}
.mode-card:hover .mc-go { gap: 12px; }

.lead-text { font-size: 1.04rem; color: var(--ic-body); }

.mode-stat { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 22px; }
.mode-stat span {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    background: #fff;
    border: 1px solid var(--ic-line);
    border-radius: 40px;
    padding: 9px 18px;
    font-size: .9rem;
    box-shadow: var(--shadow-sm);
}
.mode-stat i { color: var(--ic-brand); }
.mode-stat b { font-family: var(--font-display); color: var(--ic-ink); }

.mode-figure {
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow);
    background: var(--ic-mist);
}
.mode-figure img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; display: block; }

.guide-head {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 1.3rem;
    margin: 52px 0 26px;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--ic-line);
}
.guide-head i { color: var(--ic-brand); }

.guide-card {
    height: 100%;
    background: #fff;
    border: 1px solid var(--ic-line);
    border-radius: var(--radius-lg);
    padding: 26px 24px;
    transition: transform .35s var(--ease), box-shadow .35s var(--ease);
}
.guide-card:hover { transform: translateY(-5px); box-shadow: var(--shadow); }
.gc-ico {
    width: 48px; height: 48px;
    display: grid; place-items: center;
    border-radius: 14px;
    background: rgba(var(--ic-brand-rgb), .10);
    color: var(--ic-brand);
    font-size: 1.2rem;
    margin-bottom: 14px;
}
.gc-title { font-size: 1.05rem; margin-bottom: 14px; }
.guide-card .tick-list { gap: 10px; }
.guide-card .tick-list li { font-size: .92rem; }
.guide-card-lg { padding: 30px 28px; }

/* The 6-6-6 rule */
.rule-666 {
    background: linear-gradient(150deg, var(--ic-navy), var(--ic-steel));
    border-radius: var(--radius-lg);
    padding: 28px 26px;
    color: rgba(255, 255, 255, .8);
    box-shadow: var(--shadow);
}
.r6-title { color: #fff; font-size: 1.1rem; margin-bottom: 18px; }
.rule-666 li {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 12px 0;
    border-bottom: 1px dashed rgba(255, 255, 255, .16);
}
.rule-666 li:last-child { border-bottom: 0; padding-bottom: 0; }
.r6-num {
    width: 52px; height: 52px;
    flex: none;
    display: grid; place-items: center;
    border-radius: 15px;
    background: rgba(var(--ic-azure-rgb), .18);
    color: var(--ic-azure);
    font-family: var(--font-display);
    font-size: 1.6rem;
    font-weight: 700;
}
.r6-text { font-size: .82rem; line-height: 1.45; text-transform: uppercase; letter-spacing: .06em; }
.r6-text b { display: block; font-size: .95rem; color: #fff; text-transform: none; letter-spacing: 0; }

/* Virtual presentation types */
.type-list { display: grid; gap: 12px; margin-top: 24px; }
.type-list li {
    display: flex;
    align-items: center;
    gap: 14px;
    background: #fff;
    border: 1px solid var(--ic-line);
    border-radius: var(--radius);
    padding: 14px 20px;
    font-family: var(--font-display);
    font-weight: 600;
    color: var(--ic-navy);
    box-shadow: var(--shadow-sm);
}
.tl-ico {
    width: 42px; height: 42px;
    flex: none;
    display: grid; place-items: center;
    border-radius: 13px;
    background: rgba(var(--ic-brand-rgb), .10);
    color: var(--ic-brand);
    font-size: 1.1rem;
}

/* Poster size, drawn to scale (2ft wide x 3ft tall) */
.poster-spec {
    background: #fff;
    border: 1px solid var(--ic-line);
    border-radius: var(--radius-lg);
    padding: 24px;
    box-shadow: var(--shadow-sm);
}
.poster-spec figcaption {
    font-family: var(--font-display);
    font-size: .74rem;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--ic-mute);
    margin-bottom: 18px;
}
.ps-frame { position: relative; padding: 0 0 0 30px; }
.ps-sheet {
    width: min(230px, 100%);
    aspect-ratio: 2 / 3;          /* the 2ft x 3ft spec, to scale */
    margin: 0 auto;
    background: var(--ic-cloud);
    border: 2px solid rgba(var(--ic-brand-rgb), .35);
    border-radius: 6px;
    padding: 16px 14px;
    display: flex;
    flex-direction: column;
    gap: 9px;
}
.ps-title { display: block; height: 13px; border-radius: 4px; background: rgba(var(--ic-brand-rgb), .35); }
.ps-row   { display: block; height: 7px; border-radius: 4px; background: rgba(var(--ic-navy-rgb), .14); }
.ps-row.short { width: 65%; }
.ps-blocks { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; flex: 1; }
.ps-blocks span { border-radius: 5px; background: rgba(var(--ic-azure-rgb), .22); }

.ps-dim {
    position: absolute;
    font-family: var(--font-display);
    font-size: .74rem;
    font-weight: 600;
    color: var(--ic-brand);
    letter-spacing: .04em;
}
.ps-width  { top: -8px; left: 50%; transform: translateX(-50%); }
.ps-height { left: -6px; top: 50%; transform: rotate(-90deg) translateX(50%); transform-origin: left center; }

.ps-note {
    margin-top: 18px;
    font-size: .86rem;
    color: var(--ic-body);
    display: flex;
    gap: 9px;
    align-items: flex-start;
}
.ps-note i { color: var(--ic-amber); margin-top: 3px; }

/* ------------------------------ 27o. FAQ page --------------------- */
.faq-toolbar { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 14px; }

.faq-search {
    flex: 1;
    min-width: 240px;
    display: flex;
    align-items: center;
    gap: 11px;
    background: #fff;
    border: 1px solid var(--ic-line);
    border-radius: 40px;
    padding: 11px 20px;
    box-shadow: var(--shadow-sm);
}
.faq-search i { color: var(--ic-brand); }
.faq-search input {
    flex: 1;
    border: 0;
    outline: 0;
    background: none;
    font-size: .94rem;
    color: var(--ic-ink);
}
.faq-search input::-webkit-search-cancel-button { cursor: pointer; }

.faq-expand {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    background: #fff;
    border: 1px solid var(--ic-line);
    border-radius: 40px;
    padding: 11px 20px;
    font-family: var(--font-display);
    font-size: .88rem;
    font-weight: 600;
    color: var(--ic-navy);
    box-shadow: var(--shadow-sm);
}
.faq-expand i { color: var(--ic-brand); }
.faq-expand:hover { border-color: var(--ic-brand); color: var(--ic-brand); }

.faq-count { font-size: .85rem; color: var(--ic-mute); margin-bottom: 18px; }

.faq-accordion { display: grid; gap: 12px; }
.faq-item {
    background: #fff;
    border: 1px solid var(--ic-line) !important;
    border-radius: var(--radius) !important;
    overflow: hidden;
    box-shadow: var(--shadow-sm);
}
.faq-item .accordion-button {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    background: #fff;
    padding: 20px 22px;
    font-family: var(--font-display);
    font-size: 1rem;
    font-weight: 600;
    color: var(--ic-ink);
    box-shadow: none;
}
.faq-item .accordion-button:not(.collapsed) { background: var(--ic-cloud); color: var(--ic-brand); }
.faq-item .accordion-button:focus { box-shadow: none; border-color: transparent; }
.faq-item .accordion-button::after { margin-left: auto; flex: none; }

.fi-num {
    flex: none;
    min-width: 34px;
    height: 26px;
    display: grid;
    place-items: center;
    border-radius: 30px;
    background: rgba(var(--ic-brand-rgb), .10);
    color: var(--ic-brand);
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: .04em;
    margin-top: 2px;
}
.faq-item .accordion-button:not(.collapsed) .fi-num { background: var(--ic-brand); color: #fff; }
.fi-q { flex: 1; line-height: 1.45; }

.faq-item .accordion-body { display: flex; gap: 14px; padding: 6px 22px 24px 22px; }
.fi-ico {
    width: 40px; height: 40px;
    flex: none;
    display: grid; place-items: center;
    border-radius: 12px;
    background: var(--ic-mist);
    color: var(--ic-brand);
    font-size: 1.05rem;
}
.fi-answer { flex: 1; }
.fi-answer p { font-size: .96rem; }
.fi-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 14px;
    font-family: var(--font-display);
    font-weight: 600;
    font-size: .88rem;
}
.fi-link:hover { gap: 12px; }

.criteria-list { display: grid; gap: 10px; margin-top: 4px; }
.criteria-list li {
    display: flex;
    align-items: baseline;
    gap: 12px;
    background: var(--ic-cloud);
    border-left: 3px solid var(--ic-brand);
    border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
    padding: 10px 16px;
    font-size: .93rem;
}
.criteria-list b { font-family: var(--font-display); color: var(--ic-ink); white-space: nowrap; }
.criteria-list span { color: var(--ic-body); }

.faq-empty {
    display: flex;
    align-items: center;
    gap: 12px;
    background: var(--ic-cloud);
    border: 1px dashed var(--ic-line);
    border-radius: var(--radius);
    padding: 22px 24px;
    margin-top: 14px;
    color: var(--ic-body);
    font-size: .94rem;
}
.faq-empty i { color: var(--ic-mute); font-size: 1.1rem; }

/* ------------------------------ 27p. Registration ----------------- */

/* Registration process: image anchor on the left, compact steps beside it,
   so the six short steps do not leave half the row empty. */
.reg-process {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: 40px;
    align-items: start;
}

.rp-visual { position: sticky; top: 110px; }

.rp-figure {
    position: relative;
    margin: 0 0 18px;
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow);
}
.rp-figure img {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    display: block;
}
.rp-figure::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(var(--ic-midnight-rgb), 0) 42%, rgba(var(--ic-midnight-rgb), .88) 100%);
}

.rp-caption {
    position: absolute;
    left: 22px; right: 22px; bottom: 20px;
    z-index: 1;
    display: flex;
    align-items: center;
    gap: 14px;
    color: rgba(255, 255, 255, .86);
    font-size: .9rem;
    line-height: 1.35;
}
.rp-count {
    flex: none;
    width: 58px; height: 58px;
    display: grid; place-items: center;
    border-radius: 18px;
    background: rgba(var(--ic-azure-rgb), .22);
    border: 1px solid rgba(255, 255, 255, .28);
    backdrop-filter: blur(6px);
    font-family: var(--font-display);
    font-size: 1.7rem;
    font-weight: 700;
    color: #fff;
}

.rp-aside { display: grid; gap: 12px; }
.rp-fact {
    display: flex;
    gap: 12px;
    background: var(--ic-cloud);
    border: 1px solid var(--ic-line);
    border-radius: var(--radius);
    padding: 16px 18px;
    font-size: .88rem;
    color: var(--ic-body);
}
.rp-fact i { color: var(--ic-brand); font-size: 1.05rem; margin-top: 2px; }

/* Steps */
.rp-steps {
    display: grid;
    gap: 12px;
    margin: 0;
    counter-reset: rp;
}
.rp-step {
    display: flex;
    gap: 18px;
    background: #fff;
    border: 1px solid var(--ic-line);
    border-radius: var(--radius);
    padding: 20px 24px;
    position: relative;
    transition: transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s var(--ease);
}
.rp-step:hover {
    transform: translateX(4px);
    box-shadow: var(--shadow);
    border-color: rgba(var(--ic-brand-rgb), .3);
}

.rps-num {
    flex: none;
    font-family: var(--font-display);
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--ic-brand);
    line-height: 1;
    padding-top: 2px;
    min-width: 34px;
    position: relative;
}
/* Hairline joining one step to the next. */
.rp-step:not(:last-child) .rps-num::after {
    content: '';
    position: absolute;
    left: 9px;
    top: 28px;
    height: calc(100% + 30px);
    width: 2px;
    background: linear-gradient(180deg, rgba(var(--ic-brand-rgb), .28), rgba(var(--ic-brand-rgb), .05));
}

.rps-title {
    display: flex;
    align-items: center;
    gap: 9px;
    font-size: 1.02rem;
    margin-bottom: 6px;
}
.rps-title i { color: var(--ic-brand); font-size: 1rem; }
.rp-step p { font-size: .92rem; }

.deliverable {
    height: 100%;
    display: flex;
    align-items: center;
    gap: 16px;
    background: #fff;
    border: 1px solid var(--ic-line);
    border-radius: var(--radius);
    padding: 20px 22px;
    transition: transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s var(--ease);
}
.deliverable:hover { transform: translateY(-4px); box-shadow: var(--shadow); border-color: rgba(var(--ic-brand-rgb), .28); }
.dv-ico {
    width: 46px; height: 46px;
    flex: none;
    display: grid; place-items: center;
    border-radius: 14px;
    background: rgba(var(--ic-brand-rgb), .10);
    color: var(--ic-brand);
    font-size: 1.15rem;
}
.dv-title { font-size: .98rem; line-height: 1.35; }

/* Deliverables over a conference photograph.
   A light wash rather than a dark one, so the section sits with the rest of
   the page instead of reading as a heavy band. The photo shows through
   softly and the cards stay white with dark text. */
.deliverables-band { position: relative; overflow: hidden; }
.db-media { position: absolute; inset: 0; z-index: 0; }
.db-media img { width: 100%; height: 100%; object-fit: cover; }
.db-veil {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(115deg,
            rgba(247, 250, 253, .95) 0%,
            rgba(238, 244, 252, .90) 45%,
            rgba(219, 233, 251, .86) 100%);
}
.db-inner { position: relative; z-index: 1; }

.deliverables-band .deliverable {
    background: rgba(255, 255, 255, .82);
    border-color: rgba(255, 255, 255, .9);
    backdrop-filter: blur(8px);
    box-shadow: 0 6px 20px rgba(var(--ic-navy-rgb), .08);
}
.deliverables-band .deliverable:hover {
    background: #fff;
    border-color: rgba(var(--ic-brand-rgb), .3);
    box-shadow: var(--shadow);
}

/* Refund tiers */
.refund-card {
    height: 100%;
    background: #fff;
    border: 1px solid var(--ic-line);
    border-top: 4px solid var(--ic-mute);
    border-radius: var(--radius-lg);
    padding: 26px 24px;
    text-align: center;
    transition: transform .3s var(--ease), box-shadow .3s var(--ease);
}
.refund-card:hover { transform: translateY(-5px); box-shadow: var(--shadow); }
.refund-card.is-good { border-top-color: #2E9E5B; }
.refund-card.is-warn { border-top-color: var(--ic-amber); }
.refund-card.is-bad  { border-top-color: #D94141; }

.rf-pct {
    display: block;
    font-family: var(--font-display);
    font-size: clamp(2.2rem, 4vw, 3rem);
    font-weight: 700;
    line-height: 1;
    color: var(--ic-ink);
}
.refund-card.is-good .rf-pct { color: #2E9E5B; }
.refund-card.is-warn .rf-pct { color: #B77400; }
.refund-card.is-bad  .rf-pct { color: #D94141; }
.rf-label {
    display: block;
    font-family: var(--font-display);
    font-size: .78rem;
    font-weight: 600;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--ic-mute);
    margin: 6px 0 14px;
}
.refund-card p { font-size: .93rem; }

/* Visa cards (on the navy band) */
.visa-card {
    height: 100%;
    background: rgba(255, 255, 255, .05);
    border: 1px solid rgba(255, 255, 255, .13);
    border-radius: var(--radius-lg);
    padding: 28px 26px;
    transition: transform .3s var(--ease), border-color .3s var(--ease), background .3s var(--ease);
}
.visa-card:hover {
    transform: translateY(-5px);
    border-color: rgba(var(--ic-azure-rgb), .45);
    background: rgba(var(--ic-azure-rgb), .08);
}
.vc-ico {
    width: 52px; height: 52px;
    display: grid; place-items: center;
    border-radius: 16px;
    background: rgba(var(--ic-azure-rgb), .16);
    color: var(--ic-azure);
    font-size: 1.3rem;
    margin-bottom: 16px;
}
.vc-title { font-size: 1.05rem; margin-bottom: 8px; }
.visa-card p { font-size: .93rem; color: rgba(255, 255, 255, .76); }

/* ------------------------------ 27p2. Registration offers --------- */
.offer-card {
    position: relative;
    height: 100%;
    border-radius: var(--radius-lg);
    padding: 34px 34px 32px;
    overflow: hidden;
}
.offer-premium {
    background: linear-gradient(125deg, var(--ic-midnight) 0%, var(--ic-steel) 100%);
    color: rgba(255, 255, 255, .82);
    box-shadow: var(--shadow);
}
.offer-premium::after {
    content: '';
    position: absolute;
    right: -70px; top: -70px;
    width: 250px; height: 250px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(var(--ic-azure-rgb), .28), transparent 70%);
}
.offer-early {
    background: #fff;
    border: 1px solid var(--ic-line);
    border-top: 4px solid var(--ic-amber);
    box-shadow: var(--shadow-sm);
}

.oc-ribbon {
    position: absolute;
    top: 20px; right: 22px;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    background: rgba(var(--ic-azure-rgb), .18);
    border: 1px solid rgba(var(--ic-azure-rgb), .34);
    border-radius: 30px;
    padding: 5px 14px;
    font-family: var(--font-display);
    font-size: .7rem;
    font-weight: 600;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--ic-azure);
}
.oc-ico {
    position: relative;
    z-index: 1;
    display: grid;
    place-items: center;
    width: 58px; height: 58px;
    border-radius: 18px;
    background: rgba(var(--ic-azure-rgb), .16);
    color: var(--ic-azure);
    font-size: 1.5rem;
    margin-bottom: 20px;
}
.offer-early .oc-ico { background: rgba(245, 165, 36, .16); color: #B77400; }

.oc-title {
    position: relative;
    z-index: 1;
    color: #fff;
    font-size: clamp(1.2rem, 2.2vw, 1.6rem);
    line-height: 1.35;
    margin-bottom: 12px;
}
.offer-early .oc-title { color: var(--ic-ink); }
.oc-title strong { color: var(--ic-azure); }
.oc-note { position: relative; z-index: 1; font-size: .95rem; }
.offer-early .oc-note { color: var(--ic-body); }
.offer-card .btn { position: relative; z-index: 1; }

/* Registration Instructions - four steps joined by a dashed rule */
.reg-instructions {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 24px;
    margin: 0;
    text-align: center;
}
.ri-step { position: relative; }

/* The dash runs from this step's circle to the next one's. */
.ri-step:not(:last-child)::after {
    content: '';
    position: absolute;
    top: 76px;
    left: calc(50% + 52px);
    right: calc(-50% + 52px);
    border-top: 2px dashed rgba(var(--ic-navy-rgb), .22);
}

.ri-label {
    display: block;
    font-family: var(--font-display);
    font-size: .92rem;
    font-weight: 600;
    color: var(--ic-body);
    margin-bottom: 14px;
}
.ri-mark {
    position: relative;
    z-index: 1;
    display: grid;
    place-items: center;
    width: 74px; height: 74px;
    margin: 0 auto 16px;
    border-radius: 50%;
    background: #fff;
    font-size: 1.75rem;
    box-shadow: 0 0 0 8px rgba(var(--ic-navy-rgb), .04);
    transition: transform .35s var(--ease), box-shadow .35s var(--ease);
}
.ri-step:hover .ri-mark { transform: translateY(-4px); }
.ri-text {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: .94rem;
    color: var(--ic-ink);
    line-height: 1.45;
    max-width: 220px;
    margin-inline: auto;
}

/* Per-step accents, drawn from the site palette. */
.ri-step.is-success .ri-label { color: #1E7F45; }
.ri-step.is-success .ri-mark  { background: rgba(46, 158, 91, .12); color: #2E9E5B; box-shadow: 0 0 0 8px rgba(46, 158, 91, .07); }
.ri-step.is-brand   .ri-label { color: var(--ic-brand); }
.ri-step.is-brand   .ri-mark  { background: rgba(var(--ic-brand-rgb), .12); color: var(--ic-brand); box-shadow: 0 0 0 8px rgba(var(--ic-brand-rgb), .07); }
.ri-step.is-amber   .ri-label { color: #B77400; }
.ri-step.is-amber   .ri-mark  { background: rgba(245, 165, 36, .16); color: #C98200; box-shadow: 0 0 0 8px rgba(245, 165, 36, .09); }
.ri-step.is-azure   .ri-label { color: #1B7CE0; }
.ri-step.is-azure   .ri-mark  { background: rgba(var(--ic-azure-rgb), .16); color: #1B7CE0; box-shadow: 0 0 0 8px rgba(var(--ic-azure-rgb), .09); }

/* Fee tables + order summary, side by side */
.fees-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 360px;
    gap: 32px;
    align-items: start;
}
/* A grid item defaults to min-width:auto, so the 720px-wide fee table would
   blow the column out past the viewport and be clipped instead of scrolling.
   This is what keeps .fee-scroll scrollable on a phone. */
.fees-layout > * { min-width: 0; }

/* Selectable rate buttons inside the table */
.fee-pick {
    /* QA #25: a radio mark sits before each amount, so the table reads as
       "pick one" at a glance. Flex keeps the mark and the price on one line. */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    white-space: nowrap;
    background: none;
    border: 1px solid transparent;
    border-radius: 30px;
    padding: 6px 12px;
    font-family: var(--font-display);
    font-weight: 600;
    font-size: .95rem;
    color: var(--ic-brand);
    transition: all .2s var(--ease);
    cursor: pointer;
}
.fee-pick:hover { background: rgba(var(--ic-brand-rgb), .09); border-color: rgba(var(--ic-brand-rgb), .3); }
.fee-pick.is-selected {
    background: var(--ic-brand);
    border-color: var(--ic-brand);
    color: #fff;
    box-shadow: 0 6px 16px rgba(var(--ic-brand-rgb), .28);
}
/* The radio itself - drawn, not an <input>, because checkout.js already owns
   the selection state through .is-selected on the button. */
.fp-radio {
    flex: none;
    position: relative;
    width: 16px; height: 16px;
    border-radius: 50%;
    border: 2px solid rgba(var(--ic-brand-rgb), .55);
    background: #fff;
    transition: border-color .2s var(--ease);
}
.fp-radio::after {
    content: '';
    position: absolute;
    inset: 3px;
    border-radius: 50%;
    background: var(--ic-brand);
    transform: scale(0);
    transition: transform .2s var(--ease);
}
.fee-pick:hover .fp-radio { border-color: var(--ic-brand); }
/* Selected: white ring on the blue pill, blue dot inside. */
.fee-pick.is-selected .fp-radio { border-color: #fff; }
.fee-pick.is-selected .fp-radio::after { transform: scale(1); }

/* Order summary */
.order-summary { position: sticky; top: 110px; }
.os-title {
    font-family: var(--font-display);
    font-size: 1.5rem;
    margin-bottom: 16px;
}
.os-card {
    background: #fff;
    border: 1px solid var(--ic-line);
    border-top: 4px solid var(--ic-brand);
    border-radius: var(--radius-lg);
    padding: 24px 24px 22px;
    box-shadow: var(--shadow);
}

.os-row { padding: 16px 0; border-bottom: 1px solid var(--ic-line); }
.os-row:first-child { padding-top: 0; }
.os-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    font-family: var(--font-display);
    font-weight: 600;
    color: var(--ic-ink);
    font-size: .98rem;
}
.os-amount { color: var(--ic-brand); font-size: 1rem; white-space: nowrap; }
.os-detail { font-size: .84rem; color: var(--ic-mute); margin: 5px 0 0; }

.os-premium {
    display: flex;
    gap: 12px;
    background: var(--ic-cloud);
    border: 1px solid var(--ic-line);
    border-radius: var(--radius-sm);
    padding: 14px 16px;
    margin: 16px 0;
    cursor: pointer;
}
.os-premium input { margin-top: 3px; flex: none; width: 17px; height: 17px; accent-color: var(--ic-brand); }
.os-premium b { display: block; font-family: var(--font-display); font-size: .9rem; color: var(--ic-ink); }
.os-premium em {
    display: block;
    font-style: normal;
    font-size: .78rem;
    color: var(--ic-mute);
    margin-top: 3px;
    line-height: 1.45;
}

.os-calc { display: grid; gap: 8px; }
.os-line {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    font-size: .88rem;
    color: var(--ic-body);
}
.os-line b { font-family: var(--font-display); color: var(--ic-ink); white-space: nowrap; }
.os-discount b { color: #1E7F45; }

.os-total {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    padding: 18px 0 4px;
    font-family: var(--font-display);
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    font-size: .84rem;
    color: var(--ic-ink);
}
.os-total b {
    font-size: 1.9rem;
    letter-spacing: -.02em;
    text-transform: none;
    color: var(--ic-brand);
    line-height: 1;
}
.os-currency { font-size: .78rem; color: var(--ic-mute); text-align: right; margin: 0 0 18px; }
.os-checkout { justify-content: center; }
.os-foot { font-size: .78rem; color: var(--ic-mute); text-align: center; margin-top: 12px; }

/* Fee tables */
.fee-block { margin-bottom: 34px; }
.fee-block:last-of-type { margin-bottom: 0; }

.fee-heading {
    display: flex;
    align-items: center;
    gap: 11px;
    flex-wrap: wrap;
    font-size: 1.15rem;
    margin-bottom: 16px;
}
.fee-heading i { color: var(--ic-brand); }
.fee-heading small {
    font-family: var(--font-body);
    font-size: .86rem;
    font-weight: 400;
    color: var(--ic-mute);
}

/* Wide tables scroll inside their own box, never the page. */
.fee-scroll {
    overflow-x: auto;
    background: #fff;
    border: 1px solid var(--ic-line);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
}
.fee-table {
    width: 100%;
    min-width: 720px;
    border-collapse: collapse;
    font-size: .95rem;
}
.fee-table th,
.fee-table td {
    padding: 14px 18px;
    text-align: center;
    border-bottom: 1px solid var(--ic-line);
    border-right: 1px solid var(--ic-line);
}
.fee-table tr > *:last-child { border-right: 0; }
.fee-table tbody tr:last-child > * { border-bottom: 0; }

.fee-table thead th {
    background: var(--ic-navy);
    color: #fff;
    font-family: var(--font-display);
    font-size: .88rem;
    font-weight: 600;
    border-right-color: rgba(255, 255, 255, .14);
    border-bottom-color: rgba(255, 255, 255, .14);
}
.fee-table thead .ft-group {
    background: var(--ic-steel);
    letter-spacing: .06em;
    text-transform: uppercase;
    font-size: .8rem;
}
.fee-table .ft-cat {
    text-align: left;
    font-family: var(--font-display);
    font-weight: 600;
    color: var(--ic-ink);
    background: var(--ic-cloud);
    white-space: nowrap;
}
.fee-table thead .ft-cat { color: #fff; background: var(--ic-navy); }

.fee-table tbody td {
    font-family: var(--font-display);
    font-weight: 600;
    color: var(--ic-brand);
}
/* The Abroad cells merged across two categories. */
.fee-table .ft-merged { background: rgba(var(--ic-brand-rgb), .04); vertical-align: middle; }
.fee-table tbody tr:hover > * { background: var(--ic-mist); }
.fee-table tbody tr:hover .ft-cat { background: var(--ic-mist); }

.fee-table .ft-extra td {
    color: var(--ic-body);
    font-family: var(--font-body);
    font-weight: 500;
    background: var(--ic-cloud);
}
.fee-table .ft-extra td::first-letter { font-weight: 700; }

.fee-foot {
    display: flex;
    align-items: flex-start;
    gap: 11px;
    margin: 26px 0 0;
    background: #fff;
    border: 1px solid var(--ic-line);
    border-left: 4px solid var(--ic-brand);
    border-radius: var(--radius);
    padding: 16px 20px;
    font-size: .92rem;
    color: var(--ic-body);
}
.fee-foot i { color: var(--ic-brand); margin-top: 3px; }

/* Fee table pending state */
.fees-pending {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 22px;
    margin-top: 34px;
    background: rgba(245, 165, 36, .08);
    border: 1px dashed rgba(245, 165, 36, .45);
    border-radius: var(--radius-lg);
    padding: 28px 32px;
}
.fp-ico {
    width: 56px; height: 56px;
    flex: none;
    display: grid; place-items: center;
    border-radius: 17px;
    background: rgba(245, 165, 36, .18);
    color: #B77400;
    font-size: 1.4rem;
}
.fp-copy { flex: 1; min-width: 280px; }
.fp-title { font-size: 1.12rem; margin-bottom: 6px; }
.fees-pending p { font-size: .94rem; }
.fp-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-left: auto; }
.fees-pending .btn-ghost { border-color: var(--ic-line); color: var(--ic-navy); background: #fff; }
.fees-pending .btn-ghost:hover { background: var(--ic-navy); border-color: var(--ic-navy); color: #fff; }

/* Deadlines + next steps */
.deadline-card {
    height: 100%;
    background: linear-gradient(150deg, var(--ic-navy), var(--ic-steel));
    border-radius: var(--radius-lg);
    padding: 30px 32px;
    color: rgba(255, 255, 255, .8);
    box-shadow: var(--shadow);
}
.dc-title { color: #fff; font-size: 1.1rem; display: flex; align-items: center; gap: 10px; margin-bottom: 20px; }
.dc-title i { color: var(--ic-azure); }
.dc-list { display: grid; gap: 2px; }
.dc-list li {
    display: flex;
    flex-direction: column;
    gap: 3px;
    padding: 14px 0;
    border-bottom: 1px dashed rgba(255, 255, 255, .16);
}
.dc-list li:last-child { border-bottom: 0; }
.dcl-label { font-size: .82rem; color: rgba(255, 255, 255, .62); }
.dc-list b { font-family: var(--font-display); font-size: 1.05rem; color: #fff; }
.dc-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 18px;
    font-family: var(--font-display);
    font-weight: 600;
    font-size: .88rem;
    color: var(--ic-azure);
}
.dc-link:hover { gap: 12px; color: #fff; }

.next-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
/* Full-width row (registration page, once the deadlines card went). */
.next-grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 991.98px) { .next-grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.next-tile {
    display: flex;
    flex-direction: column;
    gap: 4px;
    background: #fff;
    border: 1px solid var(--ic-line);
    border-radius: var(--radius);
    padding: 22px 24px;
    color: var(--ic-body);
    transition: transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s var(--ease);
}
.next-tile:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow);
    border-color: rgba(var(--ic-brand-rgb), .3);
    color: var(--ic-body);
}
.next-tile i { color: var(--ic-brand); font-size: 1.35rem; margin-bottom: 6px; }
.next-tile b { font-family: var(--font-display); color: var(--ic-ink); font-size: 1rem; }
.next-tile span { font-size: .86rem; color: var(--ic-mute); }
.next-tile.is-pending { border-style: dashed; opacity: .72; }
.next-tile.is-pending i { color: var(--ic-mute); }

/* Offer modals */
.offer-modal { border: 0; border-radius: var(--radius-lg); overflow: hidden; }
.offer-modal .modal-header {
    background: linear-gradient(120deg, var(--ic-midnight), var(--ic-steel));
    border: 0;
    padding: 20px 26px;
}
.offer-modal .modal-title {
    color: #fff;
    font-size: 1.15rem;
    display: flex;
    align-items: center;
    gap: 10px;
}
.offer-modal .modal-title i { color: var(--ic-azure); }
.offer-modal .btn-close { filter: invert(1) grayscale(1); opacity: .8; }
.offer-modal .modal-body { padding: 26px; }
.offer-modal .modal-footer {
    border-top: 1px solid var(--ic-line);
    padding: 16px 26px;
    gap: 10px;
    justify-content: space-between;
}

.om-lead {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    background: rgba(46, 158, 91, .10);
    border-radius: 30px;
    padding: 7px 16px;
    font-family: var(--font-display);
    font-size: .86rem;
    font-weight: 600;
    color: #1E7F45;
    margin-bottom: 16px;
}
.om-intro { font-size: .96rem; margin-bottom: 22px; }

.om-list { display: grid; gap: 10px; }
.om-list li {
    display: flex;
    align-items: center;
    gap: 14px;
    background: var(--ic-cloud);
    border: 1px solid var(--ic-line);
    border-radius: var(--radius-sm);
    padding: 13px 16px;
    font-size: .94rem;
    color: var(--ic-ink);
}
.oml-ico {
    width: 38px; height: 38px;
    flex: none;
    display: grid; place-items: center;
    border-radius: 12px;
    background: rgba(var(--ic-brand-rgb), .10);
    color: var(--ic-brand);
    font-size: 1rem;
}

.om-benefits { display: grid; gap: 16px; }
.om-benefits li { display: flex; gap: 16px; }
.omb-ico {
    width: 46px; height: 46px;
    flex: none;
    display: grid; place-items: center;
    border-radius: 14px;
    background: rgba(245, 165, 36, .16);
    color: #B77400;
    font-size: 1.15rem;
}
.om-benefits b { font-family: var(--font-display); color: var(--ic-ink); font-size: 1rem; display: block; margin-bottom: 3px; }
.om-benefits p { font-size: .93rem; }

.om-deadline {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    font-size: .88rem;
    color: var(--ic-body);
}
.om-deadline i { color: var(--ic-brand); }
.om-deadline b { font-family: var(--font-display); color: var(--ic-ink); }

/* ------------------------------ 27q. Payment methods -------------- */
.pay-card {
    height: 100%;
    position: relative;
    background: #fff;
    border: 1px solid var(--ic-line);
    border-radius: var(--radius-lg);
    padding: 28px 26px;
    overflow: hidden;
    transition: transform .35s var(--ease), box-shadow .35s var(--ease), border-color .35s var(--ease);
}
.pay-card:hover { transform: translateY(-6px); box-shadow: var(--shadow); border-color: rgba(var(--ic-brand-rgb), .28); }
.pc-no {
    position: absolute;
    top: 18px; right: 22px;
    font-family: var(--font-display);
    font-size: 2.2rem;
    font-weight: 700;
    color: rgba(var(--ic-brand-rgb), .10);
    line-height: 1;
}
.pc-ico {
    width: 56px; height: 56px;
    display: grid; place-items: center;
    border-radius: 17px;
    background: rgba(var(--ic-brand-rgb), .10);
    color: var(--ic-brand);
    font-size: 1.45rem;
    margin-bottom: 16px;
    transition: background .35s var(--ease), color .35s var(--ease);
}
.pay-card:hover .pc-ico { background: var(--ic-brand); color: #fff; }
.pc-title { font-size: 1.1rem; margin-bottom: 4px; }
.pc-note {
    display: block;
    font-size: .8rem;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--ic-mute);
    margin-bottom: 12px;
}
.pay-card p { font-size: .93rem; }

.coord-band {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 20px;
    background: linear-gradient(120deg, var(--ic-navy), var(--ic-steel));
    border-radius: var(--radius-lg);
    padding: 26px 32px;
    margin-top: 34px;
    color: rgba(255, 255, 255, .8);
    box-shadow: var(--shadow);
}
.cb-ico {
    width: 54px; height: 54px;
    flex: none;
    display: grid; place-items: center;
    border-radius: 16px;
    background: rgba(var(--ic-azure-rgb), .18);
    color: var(--ic-azure);
    font-size: 1.35rem;
}
.cb-copy { flex: 1; min-width: 260px; }
.cb-title { color: #fff; font-size: 1.1rem; margin-bottom: 4px; }
.coord-band p { font-size: .94rem; }
.coord-band .btn { margin-left: auto; }

/* Bank details */
.bank-card {
    background: #fff;
    border: 1px solid var(--ic-line);
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
}
.bank-list { display: grid; }
.bank-row {
    display: grid;
    grid-template-columns: 190px 1fr;
    gap: 16px;
    align-items: center;
    padding: 16px 24px;
    border-bottom: 1px solid var(--ic-line);
}
.bank-row:last-child { border-bottom: 0; }
.bank-row:nth-child(odd) { background: var(--ic-cloud); }
.bank-row dt {
    font-size: .74rem;
    font-weight: 600;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--ic-mute);
}
.bank-row dd {
    margin: 0;
    display: flex;
    align-items: center;
    gap: 10px;
}
.bank-value {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 1rem;
    color: var(--ic-ink);
    word-break: break-word;
}

.bank-copy {
    flex: none;
    width: 32px; height: 32px;
    display: grid;
    place-items: center;
    border: 1px solid var(--ic-line);
    border-radius: 9px;
    background: #fff;
    color: var(--ic-brand);
    font-size: .85rem;
    transition: all .25s var(--ease);
}
.bank-copy:hover { background: var(--ic-brand); border-color: var(--ic-brand); color: #fff; }
.bank-copy.is-copied { background: #2E9E5B; border-color: #2E9E5B; color: #fff; }
.bank-copy.is-failed { background: #D94141; border-color: #D94141; color: #fff; }

.bank-verify {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-top: 16px;
    font-size: .88rem;
    color: var(--ic-body);
}
.bank-verify i { color: #2E9E5B; margin-top: 3px; }

.after-pay { display: grid; gap: 14px; margin-bottom: 22px; }
.after-pay li {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    font-size: .93rem;
}
.ap-num {
    width: 26px; height: 26px;
    flex: none;
    display: grid; place-items: center;
    border-radius: 50%;
    background: var(--ic-brand);
    color: #fff;
    font-family: var(--font-display);
    font-size: .78rem;
    font-weight: 700;
}
.ap-text { flex: 1; }

/* The fraud notice, repeated in full on the page that carries account numbers. */
.pay-alert {
    display: flex;
    gap: 16px;
    align-items: flex-start;
    background: rgba(245, 165, 36, .10);
    border: 1px solid rgba(245, 165, 36, .38);
    border-radius: var(--radius-lg);
    padding: 22px 26px;
    margin-top: 40px;
    font-size: .93rem;
    color: var(--ic-body);
}
.pay-alert > i { color: #B77400; font-size: 1.4rem; margin-top: 2px; }
.pay-alert strong { color: #8A5800; }

.faq-intro {
    max-width: 780px;
    margin: 0 auto 34px;
    text-align: center;
    font-size: 1.02rem;
}

/* ------------------------------ 27r. Publication ethics ----------- */
.threshold-card {
    height: 100%;
    display: flex;
    gap: 20px;
    background: #fff;
    border: 1px solid var(--ic-line);
    border-left: 4px solid var(--ic-brand);
    border-radius: var(--radius-lg);
    padding: 28px 30px;
    box-shadow: var(--shadow-sm);
    transition: transform .3s var(--ease), box-shadow .3s var(--ease);
}
.threshold-card:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
.threshold-card.is-bad  { border-left-color: #D94141; }
.threshold-card.is-good { border-left-color: #2E9E5B; }

.th-ico {
    width: 54px; height: 54px;
    flex: none;
    display: grid; place-items: center;
    border-radius: 16px;
    background: rgba(var(--ic-brand-rgb), .10);
    color: var(--ic-brand);
    font-size: 1.35rem;
}
.threshold-card.is-bad  .th-ico { background: rgba(217, 65, 65, .10); color: #D94141; }
.threshold-card.is-good .th-ico { background: rgba(46, 158, 91, .12); color: #2E9E5B; }

.th-figure {
    display: block;
    font-family: var(--font-display);
    font-size: clamp(1.7rem, 3vw, 2.3rem);
    font-weight: 700;
    line-height: 1.05;
    color: var(--ic-ink);
}
.threshold-card.is-bad  .th-figure { color: #C22A2A; }
.threshold-card.is-good .th-figure { color: #1E7F45; }
.th-label {
    display: block;
    font-family: var(--font-display);
    font-size: .76rem;
    font-weight: 600;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--ic-mute);
    margin: 4px 0 10px;
}
.threshold-card p { font-size: .93rem; }

.threshold-note {
    display: flex;
    align-items: flex-start;
    gap: 11px;
    margin: 22px 0 0;
    background: var(--ic-cloud);
    border: 1px dashed var(--ic-line);
    border-radius: var(--radius);
    padding: 16px 20px;
    font-size: .92rem;
    color: var(--ic-body);
}
.threshold-note i { color: var(--ic-brand); margin-top: 3px; }

.policy-item {
    height: 100%;
    display: flex;
    gap: 16px;
    background: #fff;
    border: 1px solid var(--ic-line);
    border-radius: var(--radius);
    padding: 22px 24px;
    transition: transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s var(--ease);
}
.policy-item:hover { transform: translateY(-4px); box-shadow: var(--shadow); border-color: rgba(var(--ic-brand-rgb), .28); }
.pi-no {
    flex: none;
    font-family: var(--font-display);
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--ic-brand);
    background: rgba(var(--ic-brand-rgb), .09);
    border-radius: 11px;
    width: 42px; height: 42px;
    display: grid;
    place-items: center;
}
.policy-item p { font-size: .95rem; }

.terms-panel {
    background: #fff;
    border: 1px solid var(--ic-line);
    border-radius: var(--radius-lg);
    padding: 30px 34px;
    box-shadow: var(--shadow-sm);
}
.terms-panel .tick-list li { font-size: .96rem; }

/* ------------------------------ 27s. Agenda ----------------------- */
.day-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    margin-bottom: 20px;
}
.day-tab {
    flex: 1 1 260px;
    text-align: left;
    background: #fff;
    border: 1px solid var(--ic-line);
    border-radius: var(--radius-lg);
    padding: 20px 24px;
    box-shadow: var(--shadow-sm);
    transition: all .3s var(--ease);
}
.day-tab:hover { border-color: rgba(var(--ic-brand-rgb), .4); transform: translateY(-3px); }
.day-tab.is-active {
    background: linear-gradient(120deg, var(--ic-navy), var(--ic-steel));
    border-color: transparent;
    box-shadow: var(--shadow);
}
.dt-label {
    display: block;
    font-family: var(--font-display);
    font-size: .74rem;
    font-weight: 600;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--ic-brand);
    margin-bottom: 4px;
}
.day-tab.is-active .dt-label { color: var(--ic-azure); }
.dt-date {
    display: block;
    font-family: var(--font-display);
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--ic-azure-soft);
}
.day-tab.is-active .dt-date { color: #fff; }
.dt-count { display: block; font-size: .84rem; color: var(--ic-mute); margin-top: 3px; }
.day-tab.is-active .dt-count { color: rgba(255, 255, 255, .62); }

.program-note {
    display: flex;
    align-items: flex-start;
    gap: 11px;
    background: var(--ic-cloud);
    border: 1px dashed var(--ic-line);
    border-radius: var(--radius);
    padding: 15px 20px;
    margin-bottom: 38px;
    font-size: .92rem;
    color: var(--ic-body);
}
.program-note i { color: var(--ic-brand); margin-top: 3px; }

.day-panel { animation: dayFade .3s var(--ease); }
@keyframes dayFade { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

.day-heading {
    display: flex;
    align-items: baseline;
    gap: 14px;
    flex-wrap: wrap;
    font-size: clamp(1.3rem, 2.4vw, 1.8rem);
    margin-bottom: 28px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--ic-line);
}
.day-heading span {
    font-size: .72rem;
    font-weight: 600;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: #fff;
    background: var(--ic-brand);
    border-radius: 30px;
    padding: 5px 14px;
}

/* Timeline */
.agenda-list { display: grid; gap: 16px; position: relative; }

.ag-item {
    display: grid;
    grid-template-columns: 200px 1fr;
    gap: 22px;
    position: relative;
}
.ag-item::before {
    content: '';
    position: absolute;
    left: 200px;
    top: 34px; bottom: -16px;
    width: 2px;
    background: linear-gradient(180deg, rgba(var(--ic-brand-rgb), .22), rgba(var(--ic-brand-rgb), .04));
}
.ag-item:last-child::before { display: none; }

.ag-time {
    display: flex;
    align-items: center;
    gap: 9px;
    padding-top: 20px;
    font-family: var(--font-display);
    font-size: .88rem;
    font-weight: 600;
    color: var(--ic-navy);
    white-space: nowrap;
}
.ag-time i { color: var(--ic-brand); font-size: .95rem; }

.ag-body {
    background: #fff;
    border: 1px solid var(--ic-line);
    border-radius: var(--radius-lg);
    padding: 22px 26px;
    box-shadow: var(--shadow-sm);
    transition: transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s var(--ease);
}
.ag-item:hover .ag-body { transform: translateY(-3px); box-shadow: var(--shadow); }

.ag-head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.ag-ico {
    width: 42px; height: 42px;
    flex: none;
    display: grid; place-items: center;
    border-radius: 13px;
    background: rgba(var(--ic-brand-rgb), .10);
    color: var(--ic-brand);
    font-size: 1.05rem;
}
.ag-title { font-size: 1.08rem; margin: 0; flex: 1; min-width: 0; }
.ag-text { font-size: .93rem; margin-top: 12px; }

.ag-topic {
    font-family: var(--font-display);
    font-weight: 600;
    color: var(--ic-navy);
    background: var(--ic-mist);
    border-left: 3px solid var(--ic-brand);
    border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
    padding: 12px 16px;
    margin: 14px 0 0;
    font-size: .96rem;
}
.ag-topic i { color: var(--ic-brand); margin-right: 5px; }

/* Set pieces - ceremony, panel, valedictory */
.ag-item.is-highlight .ag-body { border-color: rgba(var(--ic-brand-rgb), .35); background: linear-gradient(140deg, #fff, var(--ic-cloud)); }
.ag-item.is-highlight .ag-ico { background: var(--ic-brand); color: #fff; }

/* Breaks - quieter than sessions */
.ag-item.is-break .ag-body { background: var(--ic-cloud); box-shadow: none; }
.ag-item.is-break .ag-ico { background: rgba(var(--ic-navy-rgb), .07); color: var(--ic-body); }
.ag-item.is-break .ag-title { font-weight: 600; color: var(--ic-body); }

/* Unassigned slots */
.ag-item.is-slot .ag-body { border-style: dashed; background: transparent; box-shadow: none; }
.ag-item.is-slot .ag-ico { background: rgba(245, 165, 36, .14); color: #B77400; }
.ag-item.is-slot .ag-title { color: var(--ic-body); }
/* An anchor now - it opens the plenary speaker application - so it needs a
   hover state and a border to read as something you can press. */
.ag-badge {
    display: inline-flex;
    align-items: center;
    font-family: var(--font-display);
    font-size: .7rem;
    font-weight: 600;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: #8A5800;
    background: rgba(245, 165, 36, .18);
    border: 1px solid rgba(245, 165, 36, .38);
    border-radius: 30px;
    padding: 4px 12px;
    transition: background .25s var(--ease), color .25s var(--ease), border-color .25s var(--ease);
}
a.ag-badge:hover,
a.ag-badge:focus-visible {
    color: #fff;
    background: #B77400;
    border-color: #B77400;
}
.ag-claim {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 12px;
    font-family: var(--font-display);
    font-weight: 600;
    font-size: .86rem;
}
.ag-claim:hover { gap: 12px; }

/* Speaker card inside a programme item */
.ag-speaker {
    display: flex;
    gap: 18px;
    margin-top: 18px;
    padding-top: 18px;
    border-top: 1px dashed var(--ic-line);
}
.asp-avatar {
    width: 64px; height: 64px;
    flex: none;
    display: grid; place-items: center;
    border-radius: 20px;
    background: linear-gradient(135deg, var(--ic-azure), var(--ic-brand));
    color: #fff;
    font-size: 1.7rem;
}
.asp-name { font-size: 1.05rem; margin: 0; }
.asp-role {
    display: inline-block;
    font-family: var(--font-display);
    font-size: .7rem;
    font-weight: 600;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--ic-brand);
    background: rgba(var(--ic-brand-rgb), .10);
    border-radius: 30px;
    padding: 4px 12px;
    margin: 6px 0 8px;
}
.asp-org { font-size: .92rem; color: var(--ic-body); }
.asp-note { font-size: .9rem; color: var(--ic-mute); margin: 6px 0 10px; }

.asp-bio summary {
    cursor: pointer;
    font-family: var(--font-display);
    font-weight: 600;
    font-size: .86rem;
    color: var(--ic-brand);
    list-style: none;
    display: inline-flex;
    align-items: center;
    gap: 7px;
}
.asp-bio summary::-webkit-details-marker { display: none; }
.asp-bio summary::after {
    content: '\F282';                 /* bi-chevron-down */
    font-family: 'bootstrap-icons';
    font-size: .7rem;
    transition: transform .25s var(--ease);
}
.asp-bio[open] summary::after { transform: rotate(180deg); }
.asp-bio p { font-size: .9rem; margin-top: 10px; }

/* ------------------------------ 27t. Journals & Publications ------ */
.pub-quote {
    max-width: 860px;
    margin: 0 auto 28px;
    text-align: center;
    position: relative;
    background: linear-gradient(120deg, var(--ic-cloud), var(--ic-mist));
    border: 1px solid var(--ic-line);
    border-radius: var(--radius-lg);
    padding: 34px 40px;
}
.pub-quote > i {
    display: block;
    font-size: 1.6rem;
    color: var(--ic-azure);
    margin-bottom: 10px;
}
.pub-quote p {
    font-family: var(--font-display);
    font-size: clamp(1.05rem, 2vw, 1.3rem);
    font-weight: 500;
    font-style: italic;
    color: var(--ic-navy);
    line-height: 1.55;
}

.pub-copy { max-width: 860px; margin: 0 auto; }
.pub-copy p { font-size: 1rem; }

/* Indexing logos */
.index-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 16px;
}
.index-grid li {
    background: #fff;
    border: 1px solid var(--ic-line);
    border-radius: var(--radius);
    padding: 18px 26px;
    display: grid;
    place-items: center;
    min-width: 172px;
    box-shadow: var(--shadow-sm);
    transition: transform .3s var(--ease), box-shadow .3s var(--ease);
}
.index-grid li:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
.index-grid img { max-height: 54px; width: auto; }

.proceedings-note {
    display: flex;
    align-items: flex-start;
    gap: 13px;
    max-width: 900px;
    margin: 28px auto 0;
    background: #fff;
    border: 1px solid rgba(46, 158, 91, .28);
    border-left: 4px solid #2E9E5B;
    border-radius: var(--radius);
    padding: 18px 24px;
    font-size: .96rem;
    color: var(--ic-body);
}
.proceedings-note > i { color: #2E9E5B; font-size: 1.2rem; margin-top: 2px; }
.proceedings-note .tc { color: var(--ic-mute); font-size: .84rem; }

/* Research journey 0: animated map (Lottie, shared with ICMDRSE). The ratio
   is the animation's own 2100x1080 artboard, so the box is the right size
   before the file arrives and nothing below it jumps. */
.rj-stage {
    max-width: 1100px;
    margin: 0 auto;
    aspect-ratio: 2100 / 1080;
}
.rj-stage .rj-anim { width: 100%; height: 100%; }
.rj-stage svg { display: block; }
/* "...with IFERP!!" is long enough that 820px left "IFERP!!" alone on a line. */
.section-head-wide { max-width: 1040px; }

/* Six-step research journey */
.journey-flow {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 52px 44px;
    margin: 0;
    text-align: center;
}
.jf-step { position: relative; }

/* Connector arrow to the next step in the same row. */
.jf-step:not(:nth-child(3n))::after {
    content: '';
    position: absolute;
    top: 46px;
    left: calc(50% + 62px);
    right: calc(-50% + 62px);
    height: 2px;
    background: linear-gradient(90deg, rgba(var(--ic-brand-rgb), .28), rgba(var(--ic-brand-rgb), .12));
}
.jf-step:not(:nth-child(3n))::before {
    content: '';
    position: absolute;
    top: 41px;
    right: calc(-50% + 60px);
    width: 0; height: 0;
    border-left: 7px solid rgba(var(--ic-brand-rgb), .3);
    border-top: 5px solid transparent;
    border-bottom: 5px solid transparent;
    z-index: 1;
}

.jf-mark {
    position: relative;
    display: grid;
    place-items: center;
    width: 92px; height: 92px;
    margin: 0 auto 18px;
    border-radius: 50%;
    border: 2px solid rgba(var(--ic-brand-rgb), .28);
    background: #fff;
    color: var(--ic-brand);
    font-size: 2rem;
    transition: all .35s var(--ease);
}
.jf-step:hover .jf-mark {
    background: var(--ic-brand);
    border-color: var(--ic-brand);
    color: #fff;
    transform: translateY(-4px);
    box-shadow: 0 14px 30px rgba(var(--ic-brand-rgb), .28);
}
.jf-no {
    position: absolute;
    right: -2px; bottom: -2px;
    width: 30px; height: 30px;
    display: grid; place-items: center;
    border-radius: 50%;
    background: var(--ic-brand);
    border: 3px solid #fff;
    color: #fff;
    font-family: var(--font-display);
    font-size: .8rem;
    font-weight: 700;
}
.jf-step:hover .jf-no { background: var(--ic-navy); }

.jf-title { font-size: 1.08rem; margin-bottom: 10px; }
.jf-text { font-size: .93rem; }

/* ---------- Journey variant 2: NUMBERED CARDS ---------- */
.journey-cards {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px;
    margin: 0;
}
.jc-card {
    position: relative;
    height: 100%;
    background: #fff;
    border: 1px solid var(--ic-line);
    border-radius: var(--radius-lg);
    padding: 30px 28px 26px;
    overflow: hidden;
    transition: transform .35s var(--ease), box-shadow .35s var(--ease), border-color .35s var(--ease);
}
.jc-card::before {
    content: '';
    position: absolute;
    inset: 0 0 auto;
    height: 4px;
    background: linear-gradient(90deg, var(--ic-azure), var(--ic-brand));
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .4s var(--ease);
}
.jc-card:hover { transform: translateY(-7px); box-shadow: var(--shadow); border-color: rgba(var(--ic-brand-rgb), .3); }
.jc-card:hover::before { transform: scaleX(1); }

.jc-ghost {
    position: absolute;
    top: -14px; right: 10px;
    font-family: var(--font-display);
    font-size: 6rem;
    font-weight: 700;
    line-height: 1;
    color: rgba(var(--ic-brand-rgb), .07);
    pointer-events: none;
}
.jc-ico {
    width: 56px; height: 56px;
    display: grid; place-items: center;
    border-radius: 17px;
    background: rgba(var(--ic-brand-rgb), .10);
    color: var(--ic-brand);
    font-size: 1.45rem;
    margin-bottom: 16px;
    transition: background .35s var(--ease), color .35s var(--ease);
}
.jc-card:hover .jc-ico { background: var(--ic-brand); color: #fff; }
.jc-title { font-size: 1.1rem; margin-bottom: 10px; }
.jc-text { font-size: .93rem; margin-bottom: 16px; }
.jc-step {
    display: inline-block;
    font-family: var(--font-display);
    font-size: .7rem;
    font-weight: 600;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--ic-brand);
    background: rgba(var(--ic-brand-rgb), .09);
    border-radius: 30px;
    padding: 5px 14px;
}

/* ---------- Journey variant 3: ZIGZAG TIMELINE ---------- */
.journey-timeline {
    position: relative;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 34px;
}
.journey-timeline::before {
    content: '';
    position: absolute;
    left: 50%;
    top: 10px; bottom: 10px;
    width: 2px;
    margin-left: -1px;
    background: linear-gradient(180deg,
        rgba(var(--ic-brand-rgb), .05), rgba(var(--ic-brand-rgb), .3) 12%,
        rgba(var(--ic-brand-rgb), .3) 88%, rgba(var(--ic-brand-rgb), .05));
}

.jt-item {
    position: relative;
    width: calc(50% - 46px);
    display: flex;
    justify-content: flex-end;
}
.jt-item.is-right { margin-left: auto; justify-content: flex-start; }

.jt-node {
    position: absolute;
    top: 24px;
    right: -63px;
    width: 52px; height: 52px;
    display: grid; place-items: center;
    border-radius: 50%;
    background: #fff;
    border: 2px solid rgba(var(--ic-brand-rgb), .3);
    color: var(--ic-brand);
    font-size: 1.15rem;
    z-index: 1;
    transition: all .35s var(--ease);
}
.jt-item.is-right .jt-node { right: auto; left: -63px; }
.jt-item:hover .jt-node {
    background: var(--ic-brand);
    border-color: var(--ic-brand);
    color: #fff;
    box-shadow: 0 10px 24px rgba(var(--ic-brand-rgb), .3);
}

.jt-body {
    background: #fff;
    border: 1px solid var(--ic-line);
    border-radius: var(--radius-lg);
    padding: 24px 28px;
    box-shadow: var(--shadow-sm);
    text-align: right;
    transition: transform .3s var(--ease), box-shadow .3s var(--ease);
}
.jt-item.is-right .jt-body { text-align: left; }
.jt-item:hover .jt-body { box-shadow: var(--shadow); }
.jt-step {
    font-family: var(--font-display);
    font-size: .7rem;
    font-weight: 600;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--ic-brand);
}
.jt-title { font-size: 1.1rem; margin: 5px 0 9px; }
.jt-body p { font-size: .93rem; }

/* ---------- Journey variant 4: SPLIT PANEL ---------- */
.journey-split {
    display: grid;
    grid-template-columns: minmax(0, 4fr) minmax(0, 7fr);
    gap: 48px;
    align-items: start;
}
.jsp-intro { position: sticky; top: 110px; }
.jsp-intro .section-title { margin-bottom: 14px; }
.jsp-intro p { font-size: .98rem; }

.jsp-meter { display: flex; gap: 6px; margin: 22px 0 10px; }
.jsp-meter span {
    height: 6px;
    flex: 1;
    border-radius: 4px;
    background: linear-gradient(90deg, var(--ic-azure), var(--ic-brand));
    opacity: .28;
}
.jsp-meter span:first-child { opacity: 1; }
.jsp-count { font-size: .86rem; color: var(--ic-mute); }
.jsp-count b { font-family: var(--font-display); color: var(--ic-ink); font-size: 1rem; }

.jsp-steps { display: grid; gap: 10px; margin: 0; }
.jsp-step {
    display: flex;
    gap: 18px;
    background: #fff;
    border: 1px solid var(--ic-line);
    border-radius: var(--radius);
    padding: 20px 24px;
    transition: transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s var(--ease);
}
.jsp-step:hover { transform: translateX(5px); box-shadow: var(--shadow); border-color: rgba(var(--ic-brand-rgb), .3); }
.jsp-num {
    flex: none;
    width: 38px; height: 38px;
    display: grid; place-items: center;
    border-radius: 12px;
    background: rgba(var(--ic-brand-rgb), .09);
    color: var(--ic-brand);
    font-family: var(--font-display);
    font-size: 1rem;
    font-weight: 700;
}
.jsp-step:hover .jsp-num { background: var(--ic-brand); color: #fff; }
.jsp-title {
    display: flex;
    align-items: center;
    gap: 9px;
    font-size: 1.03rem;
    margin-bottom: 6px;
}
.jsp-title i { color: var(--ic-brand); font-size: .98rem; }
.jsp-step p { font-size: .92rem; }

/* ---------- Publications in Journals ---------- */
.route-card {
    height: 100%;
    display: flex;
    flex-direction: column;
    background: #fff;
    border: 1px solid var(--ic-line);
    border-radius: var(--radius-lg);
    padding: 28px 26px;
    transition: transform .35s var(--ease), box-shadow .35s var(--ease), border-color .35s var(--ease);
}
.route-card:hover { transform: translateY(-6px); box-shadow: var(--shadow); border-color: rgba(var(--ic-brand-rgb), .3); }
.route-card.is-featured { border-color: var(--ic-brand); box-shadow: 0 14px 36px rgba(var(--ic-brand-rgb), .14); }

.rc-ico {
    width: 54px; height: 54px;
    display: grid; place-items: center;
    border-radius: 16px;
    background: rgba(var(--ic-brand-rgb), .10);
    color: var(--ic-brand);
    font-size: 1.35rem;
    margin-bottom: 16px;
}
.route-card.is-featured .rc-ico { background: var(--ic-brand); color: #fff; }
.rc-title { font-size: 1.08rem; margin-bottom: 10px; }
.rc-text { font-size: .9rem; margin-bottom: 16px; }

.rc-issues { display: grid; gap: 8px; margin-bottom: 20px; }
.rc-issues li {
    display: flex;
    align-items: center;
    gap: 9px;
    font-size: .88rem;
    color: var(--ic-body);
}
.rc-issues i { color: #2E9E5B; font-size: .82rem; }
.rc-cta { margin-top: auto; align-self: flex-start; }

/* ---------- Research Guidance ---------- */
.guidance-card {
    height: 100%;
    background: #fff;
    border: 1px solid var(--ic-line);
    border-radius: var(--radius-lg);
    padding: 28px 26px;
    transition: transform .3s var(--ease), box-shadow .3s var(--ease);
}
.guidance-card:hover { transform: translateY(-5px); box-shadow: var(--shadow); }
.gd-ico {
    width: 52px; height: 52px;
    display: grid; place-items: center;
    border-radius: 16px;
    background: rgba(var(--ic-brand-rgb), .10);
    color: var(--ic-brand);
    font-size: 1.3rem;
    margin-bottom: 16px;
}
.gd-title { font-size: 1.08rem; margin-bottom: 14px; }
.gd-list { display: grid; gap: 7px; }
.gd-list li {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: .92rem;
    color: var(--ic-body);
}
.gd-list i { color: var(--ic-brand); font-size: 1.1rem; flex: none; }

.inquiry-band {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 22px;
    background: linear-gradient(120deg, var(--ic-navy), var(--ic-steel));
    border-radius: var(--radius-lg);
    padding: 30px 34px;
    margin-top: 34px;
    color: rgba(255, 255, 255, .82);
    box-shadow: var(--shadow);
}
.ib-ico {
    width: 56px; height: 56px;
    flex: none;
    display: grid; place-items: center;
    border-radius: 17px;
    background: rgba(var(--ic-azure-rgb), .18);
    color: var(--ic-azure);
    font-size: 1.4rem;
}
.ib-copy { flex: 1; min-width: 280px; }
.ib-title { color: #fff; font-size: 1.15rem; margin-bottom: 6px; }
.inquiry-band p { font-size: .94rem; }
.inquiry-band .btn { margin-left: auto; }

/* ---------- Publishing steps accordion ---------- */
.steps-accordion { display: grid; gap: 10px; }
.step-item {
    background: #fff;
    border: 1px solid var(--ic-line) !important;
    border-radius: var(--radius) !important;
    overflow: hidden;
    box-shadow: var(--shadow-sm);
}
.step-item .accordion-button {
    display: flex;
    align-items: center;
    gap: 14px;
    background: #fff;
    padding: 18px 22px;
    font-family: var(--font-display);
    font-size: 1.02rem;
    font-weight: 600;
    color: var(--ic-ink);
    box-shadow: none;
}
.step-item .accordion-button:not(.collapsed) { background: var(--ic-cloud); color: var(--ic-brand); }
.step-item .accordion-button:focus { box-shadow: none; border-color: transparent; }
.step-item .accordion-button::after { margin-left: auto; flex: none; }

.si-num {
    flex: none;
    font-family: var(--font-display);
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--ic-brand);
    min-width: 30px;
}
.si-ico {
    flex: none;
    width: 38px; height: 38px;
    display: grid; place-items: center;
    border-radius: 12px;
    background: rgba(var(--ic-brand-rgb), .10);
    color: var(--ic-brand);
    font-size: 1rem;
}
.step-item .accordion-button:not(.collapsed) .si-ico { background: var(--ic-brand); color: #fff; }
.si-title { flex: 1; min-width: 0; }

.step-item .accordion-body { padding: 4px 24px 22px 24px; }
.si-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 14px;
    font-family: var(--font-display);
    font-weight: 600;
    font-size: .88rem;
}
.si-link:hover { gap: 12px; }

/* ---------- Ethics cards ---------- */
.ethic-card {
    height: 100%;
    background: #fff;
    border: 1px solid var(--ic-line);
    border-top: 3px solid var(--ic-brand);
    border-radius: var(--radius);
    padding: 24px 24px 22px;
    transition: transform .3s var(--ease), box-shadow .3s var(--ease);
}
.ethic-card:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
.ethic-card.is-warn { border-top-color: var(--ic-amber); }
/* Headings the source gives no detail text for. */
.ethic-card.is-brief { background: var(--ic-cloud); border-style: dashed; border-top-style: solid; }

.ec-ico {
    width: 44px; height: 44px;
    display: grid; place-items: center;
    border-radius: 13px;
    background: rgba(var(--ic-brand-rgb), .10);
    color: var(--ic-brand);
    font-size: 1.1rem;
    margin-bottom: 13px;
}
.ethic-card.is-warn .ec-ico { background: rgba(245, 165, 36, .16); color: #B77400; }
.ec-title { font-size: 1.02rem; margin-bottom: 12px; }
.ethic-card.is-brief .ec-title { margin-bottom: 0; }

.ec-list { display: grid; gap: 9px; }
.ec-list li { display: flex; align-items: flex-start; gap: 10px; font-size: .91rem; }
.ec-list i { color: var(--ic-brand); font-size: .8rem; margin-top: 5px; flex: none; }
.ethic-card.is-warn .ec-list i { color: #B77400; }

.block-title i { color: var(--ic-brand); margin-right: 9px; }

/* ---------- Malpractice variant 2: COLLAPSIBLE ROWS ---------- */
.mp-accordion { display: grid; gap: 8px; }
.mp-item {
    background: #fff;
    border: 1px solid var(--ic-line) !important;
    border-left: 3px solid var(--ic-amber) !important;
    border-radius: var(--radius) !important;
    overflow: hidden;
    box-shadow: var(--shadow-sm);
}
.mp-item .accordion-button {
    display: flex;
    align-items: center;
    gap: 13px;
    background: #fff;
    padding: 16px 20px;
    font-family: var(--font-display);
    font-size: 1rem;
    font-weight: 600;
    color: var(--ic-ink);
    box-shadow: none;
}
.mp-item .accordion-button:not(.collapsed) { background: rgba(245, 165, 36, .07); color: #8A5800; }
.mp-item .accordion-button:focus { box-shadow: none; border-color: transparent; }
.mp-item .accordion-button::after { margin-left: auto; flex: none; }
.mp-ico {
    flex: none;
    width: 38px; height: 38px;
    display: grid; place-items: center;
    border-radius: 12px;
    background: rgba(245, 165, 36, .16);
    color: #B77400;
    font-size: 1rem;
}
.mp-item .accordion-button:not(.collapsed) .mp-ico { background: var(--ic-amber); color: #3a2600; }
.mp-title { flex: 1; min-width: 0; }
.mp-item .accordion-body { padding: 2px 20px 20px 20px; }

/* ---------- Malpractice variant 3: CODE OF CONDUCT PANEL ---------- */
.mp-panel {
    background: linear-gradient(150deg, var(--ic-midnight), var(--ic-navy));
    border-radius: var(--radius-lg);
    padding: 12px 40px;
    box-shadow: var(--shadow-lg);
}
.mp-rules { display: grid; }
.mp-rules > li {
    display: flex;
    gap: 24px;
    padding: 26px 0;
    border-bottom: 1px solid rgba(255, 255, 255, .10);
}
.mp-rules > li:last-child { border-bottom: 0; }

.mpr-no {
    flex: none;
    font-family: var(--font-display);
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--ic-amber);
    line-height: 1.2;
    min-width: 42px;
}
.mpr-title {
    display: flex;
    align-items: center;
    gap: 10px;
    color: #fff;
    font-size: 1.08rem;
    margin-bottom: 10px;
}
.mpr-title i { color: var(--ic-azure); font-size: 1rem; }
.mpr-list { display: grid; gap: 7px; }
.mpr-list li {
    position: relative;
    padding-left: 18px;
    font-size: .93rem;
    color: rgba(255, 255, 255, .74);
}
.mpr-list li::before {
    content: '';
    position: absolute;
    left: 0; top: 10px;
    width: 6px; height: 6px;
    border-radius: 50%;
    background: rgba(245, 165, 36, .7);
}

/* ---------- Malpractice variant 4: NUMBERED GRID ---------- */
.mp-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
    margin: 0;
}
.mpg-card {
    height: 100%;
    position: relative;
    background: #fff;
    border: 1px solid var(--ic-line);
    border-radius: var(--radius);
    padding: 22px 22px 20px;
    overflow: hidden;
    transition: transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s var(--ease);
}
.mpg-card::after {
    content: '';
    position: absolute;
    left: 0; top: 0; bottom: 0;
    width: 3px;
    background: var(--ic-amber);
}
.mpg-card:hover { transform: translateY(-4px); box-shadow: var(--shadow); border-color: rgba(245, 165, 36, .5); }

.mpg-no {
    display: block;
    font-family: var(--font-display);
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1;
    color: rgba(245, 165, 36, .85);
    margin-bottom: 8px;
}
.mpg-title { font-size: 1rem; margin-bottom: 11px; }
.mpg-list { display: grid; gap: 8px; }
.mpg-list li {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    font-size: .88rem;
    color: var(--ic-body);
}
.mpg-list i { color: var(--ic-mute); font-size: .9rem; margin-top: 1px; flex: none; }

/* CTA band */
.pub-cta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 26px;
    background: linear-gradient(120deg, var(--ic-midnight), var(--ic-steel));
    border-radius: var(--radius-lg);
    padding: 38px 44px;
    box-shadow: var(--shadow);
}
.pub-cta .eyebrow {
    color: var(--ic-azure);
    background: rgba(var(--ic-azure-rgb), .14);
    border-color: rgba(var(--ic-azure-rgb), .3);
}
.pc-title { color: #fff; font-size: clamp(1.4rem, 2.6vw, 2rem); }

/* ------------------------------ 27v. About Us --------------------- */
.about-shot {
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow);
}
.about-shot img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; display: block; }

/* ---------- About variant 2: PHOTO BANNER ---------- */
.about-banner {
    position: relative;
    margin: 0 0 36px;
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow);
}
.about-banner img { width: 100%; aspect-ratio: 21 / 8; object-fit: cover; display: block; }
.about-banner figcaption {
    position: absolute;
    left: 0; right: 0; bottom: 0;
    padding: 60px 40px 30px;
    background: linear-gradient(180deg, transparent, rgba(var(--ic-midnight-rgb), .92) 62%);
    color: #fff;
    font-family: var(--font-display);
    font-size: clamp(.98rem, 1.7vw, 1.2rem);
    font-weight: 500;
    line-height: 1.5;
}

.about-columns { column-count: 2; column-gap: 44px; margin-bottom: 26px; }
.about-columns p { margin-bottom: 1rem; break-inside: avoid; }
.about-lead {
    font-family: var(--font-display);
    font-weight: 600;
    color: var(--ic-navy);
    margin-bottom: 22px;
}

.aim-card {
    height: 100%;
    background: #fff;
    border: 1px solid var(--ic-line);
    border-radius: var(--radius);
    padding: 24px 22px;
    transition: transform .3s var(--ease), box-shadow .3s var(--ease);
}
.aim-card:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
.aim-card .aim-ico { margin-bottom: 13px; }
.aim-card p { font-size: .93rem; }

/* ---------- About variant 3: EDITORIAL ---------- */
.about-editorial {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: 44px;
    align-items: start;
}
.ae-side { position: sticky; top: 110px; }
.ae-aims {
    background: linear-gradient(150deg, var(--ic-cloud), var(--ic-mist));
    border: 1px solid var(--ic-line);
    border-radius: var(--radius-lg);
    padding: 24px 26px;
    margin-top: 18px;
}
.ae-aims-title { font-size: 1rem; margin-bottom: 14px; }
.ae-aims ul { display: grid; gap: 12px; }
.ae-aims li { display: flex; align-items: flex-start; gap: 11px; font-size: .92rem; }
.ae-aims i { color: var(--ic-brand); font-size: 1rem; margin-top: 3px; flex: none; }

.ae-body .section-title { margin-bottom: 18px; }
.ae-standfirst {
    font-size: 1.08rem;
    color: var(--ic-ink);
    line-height: 1.7;
}

/* Purpose & Vision */
.purpose-card {
    height: 100%;
    display: flex;
    gap: 18px;
    background: #fff;
    border: 1px solid var(--ic-line);
    border-radius: var(--radius-lg);
    padding: 26px 28px;
    transition: transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s var(--ease);
}
.purpose-card:hover { transform: translateY(-4px); box-shadow: var(--shadow); border-color: rgba(var(--ic-brand-rgb), .28); }
.pc-ico {
    width: 50px; height: 50px;
    flex: none;
    display: grid; place-items: center;
    border-radius: 15px;
    background: rgba(var(--ic-brand-rgb), .10);
    color: var(--ic-brand);
    font-size: 1.25rem;
}
.purpose-card p { font-size: .98rem; color: var(--ic-body); }

/* Conference theme */
.theme-headline {
    margin: 0 0 20px;
    background: linear-gradient(120deg, var(--ic-cloud), var(--ic-mist));
    border-left: 4px solid var(--ic-brand);
    border-radius: 0 var(--radius) var(--radius) 0;
    padding: 26px 30px;
}
.theme-headline > i { display: block; color: var(--ic-azure); font-size: 1.4rem; margin-bottom: 8px; }
.theme-headline p {
    font-family: var(--font-display);
    font-size: clamp(1.15rem, 2.2vw, 1.55rem);
    font-weight: 600;
    font-style: italic;
    color: var(--ic-navy);
    line-height: 1.4;
}

/* Objectives (on the navy band) */
.objective-card {
    height: 100%;
    position: relative;
    background: rgba(255, 255, 255, .05);
    border: 1px solid rgba(255, 255, 255, .13);
    border-radius: var(--radius-lg);
    padding: 26px 24px;
    overflow: hidden;
    transition: transform .35s var(--ease), border-color .35s var(--ease), background .35s var(--ease);
}
.objective-card:hover {
    transform: translateY(-6px);
    border-color: rgba(var(--ic-azure-rgb), .45);
    background: rgba(var(--ic-azure-rgb), .08);
}
.ob-no {
    position: absolute;
    top: 14px; right: 18px;
    font-family: var(--font-display);
    font-size: 2rem;
    font-weight: 700;
    color: rgba(var(--ic-azure-rgb), .16);
    line-height: 1;
}
.ob-ico {
    width: 50px; height: 50px;
    display: grid; place-items: center;
    border-radius: 15px;
    background: rgba(var(--ic-azure-rgb), .16);
    color: var(--ic-azure);
    font-size: 1.25rem;
    margin-bottom: 15px;
}
.ob-title { font-size: 1rem; margin-bottom: 9px; line-height: 1.35; }
.objective-card p { font-size: .9rem; color: rgba(255, 255, 255, .74); }

/* Why attend */
.reason-card {
    height: 100%;
    background: #fff;
    border: 1px solid var(--ic-line);
    border-radius: var(--radius-lg);
    padding: 28px 26px;
    position: relative;
    overflow: hidden;
    transition: transform .35s var(--ease), box-shadow .35s var(--ease);
}
.reason-card::before {
    content: '';
    position: absolute;
    inset: 0 0 auto;
    height: 4px;
    background: linear-gradient(90deg, var(--ic-azure), var(--ic-brand));
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .4s var(--ease);
}
.reason-card:hover { transform: translateY(-6px); box-shadow: var(--shadow); }
.reason-card:hover::before { transform: scaleX(1); }
.rn-title { font-size: 1.05rem; margin-bottom: 10px; }
.reason-card p { font-size: .93rem; }

/* ---------- Why Attend variant 2: NUMBERED LIST ---------- */
.reason-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px 26px;
    margin: 0;
}
.reason-list > li {
    display: flex;
    gap: 16px;
    padding: 16px 18px;
    background: #fff;
    border: 1px solid var(--ic-line);
    border-radius: var(--radius);
    transition: transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s var(--ease);
}
.reason-list > li:hover { transform: translateX(4px); box-shadow: var(--shadow); border-color: rgba(var(--ic-brand-rgb), .28); }
.rl-num {
    flex: none;
    font-family: var(--font-display);
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--ic-brand);
    min-width: 30px;
    padding-top: 1px;
}
.rl-title {
    display: flex;
    align-items: center;
    gap: 9px;
    font-size: 1rem;
    margin-bottom: 5px;
}
.rl-title i { color: var(--ic-brand); font-size: .95rem; }
.reason-list p { font-size: .89rem; }

/* ---------- Why Attend variant 3: FEATURED + TILES ---------- */
/* The panel is shorter than the tile column, so it sits at the top and
   follows the scroll rather than stretching into a tall empty block. */
.reasons-is-feature .row > .col-lg-5 { align-self: flex-start; position: sticky; top: 96px; }
/* The padding moved to .rf-body so the photograph can run edge to edge under
   the card's own radius. No shadow and no fade over the photo - the panel is
   meant to sit flat against the section. */
.reason-feature {
    display: flex;
    flex-direction: column;
    height: 100%;
    background: linear-gradient(150deg, var(--ic-midnight), var(--ic-steel));
    border-radius: var(--radius-lg);
    overflow: hidden;
    color: rgba(255, 255, 255, .8);
}
.rf-photo { margin: 0; flex: none; }
/* `>` - .rf-body has no img, but the habit costs nothing and the card may
   gain a logo later. */
.rf-photo > img {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
}
.rf-body { padding: 26px 32px 32px; }
.rf-ico {
    width: 60px; height: 60px;
    display: grid; place-items: center;
    border-radius: 18px;
    background: rgba(var(--ic-azure-rgb), .18);
    color: var(--ic-azure);
    font-size: 1.55rem;
    margin-bottom: 18px;
}
.rf-tag {
    display: inline-block;
    font-family: var(--font-display);
    font-size: .7rem;
    font-weight: 600;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--ic-azure);
    margin-bottom: 8px;
}
.rf-title { color: #fff; font-size: 1.35rem; margin-bottom: 12px; }
.reason-feature p { font-size: .98rem; }

.reason-tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.reason-tile {
    display: flex;
    gap: 13px;
    background: #fff;
    border: 1px solid var(--ic-line);
    border-radius: var(--radius);
    padding: 16px 18px;
    transition: transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s var(--ease);
}
.reason-tile:hover { transform: translateY(-3px); box-shadow: var(--shadow); border-color: rgba(var(--ic-brand-rgb), .28); }
.rt-ico {
    width: 38px; height: 38px;
    flex: none;
    display: grid; place-items: center;
    border-radius: 12px;
    background: rgba(var(--ic-brand-rgb), .10);
    color: var(--ic-brand);
    font-size: 1rem;
}
.rt-title { font-size: .95rem; margin-bottom: 4px; }
.reason-tile p { font-size: .84rem; color: var(--ic-mute); }

/* ---------- Why Attend 4: BENTO MOSAIC ---------- */
/* A six-column grid where each tile declares its own span, so the rows fill
   exactly and no reason is left orphaned on a row of its own. */
.reason-bento {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 18px;
}
.rb-cell {
    grid-column: span var(--span, 2);
    background: #fff;
    border: 1px solid var(--ic-line);
    border-radius: var(--radius-lg);
    padding: 24px 26px;
    transition: transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s var(--ease);
}
.rb-cell:hover { transform: translateY(-4px); box-shadow: var(--shadow); border-color: rgba(var(--ic-brand-rgb), .28); }
.rb-ico {
    display: grid; place-items: center;
    width: 44px; height: 44px;
    border-radius: 14px;
    background: rgba(var(--ic-brand-rgb), .10);
    color: var(--ic-brand);
    font-size: 1.15rem;
    margin-bottom: 14px;
}
.rb-title {
    font-family: var(--font-display);
    font-size: 1rem;
    font-weight: 600;
    color: var(--ic-navy);
    margin-bottom: 8px;
}
.rb-cell p { font-size: .9rem; color: var(--ic-slate); }

/* The lead tile is taller as well as wider - it holds two rows open. */
.rb-cell.is-lead {
    grid-row: span 2;
    display: flex;
    flex-direction: column;
    justify-content: center;
    background: linear-gradient(140deg, var(--ic-midnight) 0%, var(--ic-steel) 100%);
    border-color: transparent;
    padding: 34px 36px;
}
.rb-cell.is-lead .rb-ico { background: rgba(255, 255, 255, .12); color: var(--ic-azure); width: 54px; height: 54px; font-size: 1.4rem; }
.rb-cell.is-lead .rb-title { color: #fff; font-size: 1.5rem; margin-bottom: 12px; }
.rb-cell.is-lead p { color: rgba(255, 255, 255, .78); font-size: 1rem; }
.rb-cell.is-lead:hover { border-color: transparent; }

/* ---------- Why Attend 5: TITLE SWITCHER ---------- */
/* No align-items:start - the panel should stretch to the rail's height, or a
   two-line reason leaves a column of dead space beside ten titles. */
.reason-switch {
    display: grid;
    grid-template-columns: 330px minmax(0, 1fr);
    gap: 26px;
}
.rs-rail { display: grid; gap: 6px; }
.rs-btn {
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr) 16px;
    align-items: center;
    gap: 10px;
    width: 100%;
    text-align: left;
    background: transparent;
    border: 1px solid transparent;
    border-radius: var(--radius);
    padding: 11px 14px;
    font-family: var(--font-display);
    font-size: .92rem;
    font-weight: 500;
    color: var(--ic-slate);
    transition: background .25s var(--ease), color .25s var(--ease), border-color .25s var(--ease);
}
.rs-btn:hover { background: #fff; border-color: var(--ic-line); color: var(--ic-navy); }
.rs-num { font-size: .74rem; font-weight: 700; letter-spacing: .08em; color: var(--ic-mute); }
.rs-btn i { opacity: 0; transition: opacity .25s var(--ease), transform .25s var(--ease); font-size: .8rem; }
.rs-btn.is-active {
    background: var(--ic-navy);
    border-color: var(--ic-navy);
    color: #fff;
    font-weight: 600;
}
.rs-btn.is-active .rs-num { color: var(--ic-azure); }
.rs-btn.is-active i { opacity: 1; }

.rs-stage { display: grid; gap: 16px; }
.rs-panel {
    background: #fff;
    border: 1px solid var(--ic-line);
    border-radius: var(--radius-lg);
    padding: 34px 36px;
    box-shadow: var(--shadow-sm);
}
/* Panels are all visible until reasons.js marks the container ready, so the
   layout still works with JavaScript switched off. */
.reason-switch.is-ready .rs-stage { display: block; }
.reason-switch.is-ready .rs-panel { display: none; }
.reason-switch.is-ready .rs-panel.is-active {
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: 100%;
    animation: rsFade .4s var(--ease) both;
}
@keyframes rsFade {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: none; }
}
.rs-ico {
    display: grid; place-items: center;
    width: 60px; height: 60px;
    border-radius: 18px;
    background: linear-gradient(135deg, var(--ic-azure), var(--ic-brand));
    color: #fff;
    font-size: 1.5rem;
    margin-bottom: 18px;
    box-shadow: 0 12px 26px rgba(var(--ic-brand-rgb), .28);
}
.rs-tag {
    display: block;
    font-family: var(--font-display);
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--ic-brand);
    margin-bottom: 8px;
}
.rs-title { font-family: var(--font-display); font-size: 1.4rem; font-weight: 600; color: var(--ic-navy); margin-bottom: 12px; }
.rs-panel p { font-size: 1rem; color: var(--ic-slate); }

/* ---------- Why Attend 6: ZIGZAG NUMERALS ---------- */
.reason-zig { max-width: 1000px; margin: 0 auto; }
.rz-item {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 110px minmax(0, 1fr);
    align-items: center;
    gap: 0 24px;
    padding: 26px 0;
}
.rz-item + .rz-item { border-top: 1px dashed var(--ic-line); }
.rz-num {
    grid-column: 2;
    justify-self: center;
    font-family: var(--font-display);
    font-size: 3.4rem;
    font-weight: 700;
    line-height: 1;
    color: transparent;
    -webkit-text-stroke: 1.5px rgba(var(--ic-brand-rgb), .28);
    transition: -webkit-text-stroke-color .3s var(--ease), color .3s var(--ease);
}
.rz-item:hover .rz-num { color: rgba(var(--ic-brand-rgb), .10); -webkit-text-stroke-color: var(--ic-brand); }
.rz-body { grid-column: 1; grid-row: 1; text-align: right; }
.rz-item.is-right .rz-body { grid-column: 3; text-align: left; }
.rz-title {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 9px;
    font-family: var(--font-display);
    font-size: 1.08rem;
    font-weight: 600;
    color: var(--ic-navy);
    margin-bottom: 6px;
}
.rz-item.is-right .rz-title { justify-content: flex-start; }
.rz-title i { color: var(--ic-brand); font-size: .95rem; }
.rz-body p { font-size: .92rem; color: var(--ic-slate); }

@media (max-width: 991.98px) {
    .reason-bento { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .rb-cell { grid-column: span 2; }
    .rb-cell.is-lead { grid-column: span 4; grid-row: auto; }
    .reason-switch { grid-template-columns: 1fr; }
    /* The numeral moves to a narrow gutter and every reason reads left. */
    .rz-item,
    .rz-item.is-right { grid-template-columns: 64px minmax(0, 1fr); gap: 0 16px; padding: 20px 0; }
    .rz-num { grid-column: 1; justify-self: start; font-size: 2.2rem; }
    .rz-body,
    .rz-item.is-right .rz-body { grid-column: 2; grid-row: 1; text-align: left; }
    .rz-title,
    .rz-item.is-right .rz-title { justify-content: flex-start; }
}
@media (max-width: 575.98px) {
    .reason-bento { grid-template-columns: 1fr; }
    .rb-cell,
    .rb-cell.is-lead { grid-column: span 1; }
    .rb-cell.is-lead { padding: 26px 22px; }
    .rb-cell.is-lead .rb-title { font-size: 1.25rem; }
    .rs-panel { padding: 24px 22px; }
    .rs-title { font-size: 1.2rem; }
}

/* ------------------------------ 27u. Committee -------------------- */
.committee-pending {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 22px;
    background: var(--ic-cloud);
    border: 1px dashed var(--ic-line);
    border-radius: var(--radius-lg);
    padding: 30px 34px;
}
.cp-ico {
    width: 58px; height: 58px;
    flex: none;
    display: grid; place-items: center;
    border-radius: 18px;
    background: rgba(var(--ic-brand-rgb), .10);
    color: var(--ic-brand);
    font-size: 1.5rem;
}
.committee-pending > div { flex: 1; min-width: 280px; }
.cp-title { font-size: 1.15rem; margin-bottom: 6px; }
.committee-pending p { font-size: .94rem; }
.committee-pending .btn { margin-left: auto; }

/* Eligibility criteria */
.elig-item {
    height: 100%;
    display: flex;
    align-items: center;
    gap: 15px;
    background: #fff;
    border: 1px solid var(--ic-line);
    border-radius: var(--radius);
    padding: 18px 22px;
    transition: transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s var(--ease);
}
.elig-item:hover { transform: translateY(-3px); box-shadow: var(--shadow); border-color: rgba(var(--ic-brand-rgb), .28); }
.ei-ico {
    width: 44px; height: 44px;
    flex: none;
    display: grid; place-items: center;
    border-radius: 13px;
    background: rgba(var(--ic-brand-rgb), .10);
    color: var(--ic-brand);
    font-size: 1.1rem;
}
.elig-item p { font-size: .95rem; color: var(--ic-body); }

/* Roles and responsibilities */
.role-card {
    height: 100%;
    background: #fff;
    border: 1px solid var(--ic-line);
    border-top: 3px solid var(--ic-brand);
    border-radius: var(--radius);
    padding: 24px 22px;
    transition: transform .3s var(--ease), box-shadow .3s var(--ease);
}
.role-card:hover { transform: translateY(-5px); box-shadow: var(--shadow); }
.rl-ico {
    width: 48px; height: 48px;
    display: grid; place-items: center;
    border-radius: 14px;
    background: rgba(var(--ic-brand-rgb), .10);
    color: var(--ic-brand);
    font-size: 1.2rem;
    margin-bottom: 14px;
}
.rl-title { font-size: 1.03rem; margin-bottom: 8px; }
.role-card p { font-size: .92rem; }

/* "Ready to Contribute and Lead?" */
.lead-band {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 24px;
    background: linear-gradient(120deg, var(--ic-midnight), var(--ic-steel));
    border-radius: var(--radius-lg);
    padding: 34px 38px;
    margin-top: 40px;
    color: rgba(255, 255, 255, .8);
    box-shadow: var(--shadow);
}
.lb-title { color: #fff; font-size: clamp(1.2rem, 2.2vw, 1.6rem); margin-bottom: 6px; }
.lead-band p { font-size: .98rem; }

/* The CV drop target shows its own error state. */
.upload-drop.is-invalid { border-color: #D94141; background: #FFF6F6; }

/* ------------------------------ 27w. Venue ------------------------ */
.venue-facts { display: grid; gap: 14px; margin: 26px 0; }
.venue-facts li { display: flex; align-items: center; gap: 14px; }
.vf-ico {
    width: 46px; height: 46px;
    flex: none;
    display: grid; place-items: center;
    border-radius: 14px;
    background: rgba(var(--ic-brand-rgb), .10);
    color: var(--ic-brand);
    font-size: 1.1rem;
}
.vf-label {
    display: block;
    font-family: var(--font-display);
    font-size: .7rem;
    font-weight: 600;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--ic-mute);
}
.vf-value { display: block; font-weight: 600; color: var(--ic-ink); }

/* Shown until the hotel is confirmed - dashed, so it reads as pending. */
.venue-pending {
    display: flex;
    gap: 18px;
    background: var(--ic-cloud);
    border: 1px dashed var(--ic-line);
    border-radius: var(--radius-lg);
    padding: 24px 26px;
}
.vp-ico {
    width: 50px; height: 50px;
    flex: none;
    display: grid; place-items: center;
    border-radius: 16px;
    background: rgba(var(--ic-brand-rgb), .10);
    color: var(--ic-brand);
    font-size: 1.3rem;
}
.vp-title { font-size: 1.05rem; margin-bottom: 6px; }
.venue-pending p { font-size: .92rem; }

.venue-map {
    margin-top: 44px;
    border-radius: var(--radius-lg);
    overflow: hidden;
    border: 1px solid var(--ic-line);
    box-shadow: var(--shadow);
    line-height: 0;
}
.venue-map iframe { width: 100%; height: 380px; border: 0; }

/* ---------- Venue: hotel address card ---------- */
.venue-address {
    display: flex;
    gap: 16px;
    margin: 24px 0 26px;
    padding: 22px 24px;
    background: linear-gradient(120deg, var(--ic-cloud), var(--ic-mist));
    border: 1px solid var(--ic-line);
    border-left: 4px solid var(--ic-brand);
    border-radius: var(--radius-lg);
}
.va-ico {
    flex: none;
    width: 46px; height: 46px;
    display: grid; place-items: center;
    border-radius: 14px;
    background: var(--ic-brand);
    color: #fff;
    font-size: 1.2rem;
}
.va-name { font-size: 1.12rem; margin-bottom: 6px; }
.va-line { font-style: normal; font-size: .94rem; color: var(--ic-slate); line-height: 1.6; }
.va-go { margin-top: 14px; }

/* ---------- Venue: city information ---------- */
.city-info {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
}
.city-info li {
    display: grid;
    grid-template-columns: 48px minmax(0, 1fr);
    grid-template-areas: 'icon label' 'icon value';
    gap: 4px 16px;
    align-content: start;
    background: #fff;
    border: 1px solid var(--ic-line);
    border-radius: var(--radius-lg);
    padding: 22px 22px;
    transition: transform .3s var(--ease), box-shadow .3s var(--ease);
}
.city-info li:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
.ci-ico {
    grid-area: icon;
    width: 48px; height: 48px;
    display: grid; place-items: center;
    border-radius: 14px;
    background: rgba(var(--ic-brand-rgb), .10);
    color: var(--ic-brand);
    font-size: 1.25rem;
}
.ci-label {
    grid-area: label;
    font-family: var(--font-display);
    font-size: .74rem;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--ic-brand);
}
.ci-value { grid-area: value; font-size: .95rem; color: var(--ic-ink); line-height: 1.55; }

/* ---------- Venue: airport-to-hotel route ---------- */
.reach-strip {
    background: linear-gradient(130deg, var(--ic-midnight), var(--ic-steel));
    border-radius: var(--radius-lg);
    padding: 26px 30px;
    margin-bottom: 26px;
    color: rgba(255, 255, 255, .8);
}
.rstr-ends {
    display: flex;
    align-items: center;
    gap: 16px;
    padding-bottom: 20px;
    margin-bottom: 20px;
    border-bottom: 1px solid rgba(255, 255, 255, .14);
}
.rstr-pt {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-family: var(--font-display);
    font-weight: 600;
    color: #fff;
}
.rstr-pt i { color: var(--ic-azure); font-size: 1.15rem; }
/* The dashed road between the two ends, distance riding on it. */
.rstr-line {
    flex: 1;
    position: relative;
    min-width: 60px;
    height: 2px;
    background: repeating-linear-gradient(90deg, rgba(255, 255, 255, .45) 0 8px, transparent 8px 14px);
}
.rstr-line b {
    position: absolute;
    left: 50%; top: 50%;
    transform: translate(-50%, -50%);
    font-family: var(--font-display);
    font-size: .82rem;
    color: var(--ic-midnight);
    background: var(--ic-azure);
    border-radius: 30px;
    padding: 3px 12px;
    white-space: nowrap;
}
.rstr-facts {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 18px;
}
.rstr-facts li { display: flex; gap: 12px; font-size: .9rem; }
.rstr-facts i { color: var(--ic-azure); font-size: 1.2rem; margin-top: 2px; flex: none; }
.rstr-facts b {
    display: block;
    font-family: var(--font-display);
    font-size: .74rem;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: #fff;
    margin-bottom: 3px;
}

.reach-card {
    height: 100%;
    background: #fff;
    border: 1px solid var(--ic-line);
    border-radius: var(--radius-lg);
    padding: 28px 30px;
}
.reach-card.is-recommended { border-color: var(--ic-brand); box-shadow: 0 14px 36px rgba(var(--ic-brand-rgb), .12); }
.rtc-head { display: flex; align-items: center; gap: 14px; margin-bottom: 18px; }
.rtc-ico {
    width: 50px; height: 50px;
    flex: none;
    display: grid; place-items: center;
    border-radius: 15px;
    background: rgba(var(--ic-brand-rgb), .10);
    color: var(--ic-brand);
    font-size: 1.35rem;
}
.reach-card.is-recommended .rtc-ico { background: var(--ic-brand); color: #fff; }
.rtc-title { font-size: 1.2rem; margin: 0; }
.rtc-badge {
    margin-left: auto;
    font-family: var(--font-display);
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: #0B7A4B;
    background: rgba(22, 163, 106, .12);
    border-radius: 30px;
    padding: 5px 12px;
}
/* Numbered steps drawn with a counter so the numerals can sit in circles. */
.rtc-steps { counter-reset: step; display: grid; gap: 12px; margin-bottom: 22px; }
.rtc-steps li {
    counter-increment: step;
    position: relative;
    padding-left: 38px;
    font-size: .94rem;
    color: var(--ic-slate);
    line-height: 1.55;
}
.rtc-steps li::before {
    content: counter(step);
    position: absolute;
    left: 0; top: 0;
    width: 26px; height: 26px;
    display: grid; place-items: center;
    border-radius: 50%;
    background: var(--ic-cloud);
    border: 1px solid var(--ic-line);
    font-family: var(--font-display);
    font-size: .78rem;
    font-weight: 700;
    color: var(--ic-brand);
}
.rtc-facts {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
    padding-top: 18px;
    border-top: 1px dashed var(--ic-line);
}
.rtc-facts dt {
    font-family: var(--font-display);
    font-size: .72rem;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--ic-mute);
    margin-bottom: 3px;
}
.rtc-facts dd { margin: 0; font-weight: 600; color: var(--ic-ink); font-size: .92rem; }
.reach-note {
    margin: 24px 0 0;
    font-size: .88rem;
    color: var(--ic-slate);
}
.reach-note i { color: var(--ic-brand); margin-right: 6px; }

@media (max-width: 991.98px) {
    .city-info { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .rstr-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 575.98px) {
    .city-info { grid-template-columns: 1fr; }
    .rstr-facts { grid-template-columns: 1fr; }
    .rstr-ends { flex-direction: column; align-items: flex-start; }
    .rstr-line { width: 2px; height: 34px; min-width: 0; flex: none; margin-left: 9px;
                 background: repeating-linear-gradient(180deg, rgba(255, 255, 255, .45) 0 6px, transparent 6px 11px); }
    .rstr-line b { left: 18px; transform: translateY(-50%); }
    .reach-strip, .reach-card { padding: 22px 20px; }
    .venue-address { flex-direction: column; }
}

/* Places to visit */
.place-card {
    height: 100%;
    display: flex;
    flex-direction: column;
    background: #fff;
    border: 1px solid var(--ic-line);
    border-radius: var(--radius-lg);
    overflow: hidden;
    transition: transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s var(--ease);
}
.place-card:hover { transform: translateY(-4px); box-shadow: var(--shadow); border-color: rgba(var(--ic-brand-rgb), .28); }
.pl-shot { margin: 0; overflow: hidden; }
.pl-shot img {
    display: block;
    width: 100%;
    height: 210px;
    object-fit: cover;
    transition: transform .5s var(--ease);
}
.place-card:hover .pl-shot img { transform: scale(1.05); }
/* Stand-in while a photograph is missing - same height, so rows stay level. */
.pl-shot-blank {
    height: 210px;
    display: grid; place-items: center;
    background: linear-gradient(140deg, var(--ic-cloud), rgba(var(--ic-azure-rgb), .16));
    color: var(--ic-brand);
    font-size: 2.4rem;
}
.pl-body { padding: 22px 24px 26px; }
.pl-title { font-size: 1.08rem; margin-bottom: 8px; }
.place-card p { font-size: .9rem; }

/* ---------- Places variant 2: PHOTO TILES ---------- */
.place-tile {
    position: relative;
    height: 100%;
    /* Tall enough that the photograph still reads above the caption block. */
    min-height: 420px;
    display: flex;
    align-items: flex-end;
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow);
    isolation: isolate;
}
.place-tile img {
    position: absolute;
    inset: 0;
    width: 100%; height: 100%;
    object-fit: cover;
    z-index: -2;
    transition: transform .6s var(--ease);
}
.place-tile:hover img { transform: scale(1.06); }
.pt-blank {
    position: absolute;
    inset: 0;
    z-index: -2;
    display: grid; place-items: center;
    background: linear-gradient(150deg, var(--ic-navy), var(--ic-steel));
    color: rgba(255, 255, 255, .35);
    font-size: 3rem;
}
/* The scrim is a separate layer so the photo can scale under it. */
.place-tile::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(to top, rgba(var(--ic-midnight-rgb), .95) 0%, rgba(var(--ic-midnight-rgb), .82) 34%, rgba(var(--ic-midnight-rgb), .22) 62%, rgba(var(--ic-midnight-rgb), 0) 88%);
}
.pt-body { padding: 26px 26px 28px; color: rgba(255, 255, 255, .84); }
.pt-ico {
    width: 42px; height: 42px;
    display: grid; place-items: center;
    border-radius: 13px;
    background: rgba(var(--ic-azure-rgb), .22);
    color: #fff;
    font-size: 1.05rem;
    margin-bottom: 12px;
}
.pt-title { color: #fff; font-size: 1.12rem; margin-bottom: 8px; }
.place-tile p { font-size: .88rem; }

/* ---------- Places variant 3: MEDIA ROWS ---------- */
.place-row {
    height: 100%;
    display: flex;
    background: #fff;
    border: 1px solid var(--ic-line);
    border-radius: var(--radius-lg);
    overflow: hidden;
    transition: transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s var(--ease);
}
.place-row:hover { transform: translateY(-3px); box-shadow: var(--shadow); border-color: rgba(var(--ic-brand-rgb), .28); }
.pr-shot { margin: 0; flex: none; width: 190px; overflow: hidden; }
.pr-shot img {
    display: block;
    width: 100%; height: 100%;
    object-fit: cover;
    transition: transform .5s var(--ease);
}
.place-row:hover .pr-shot img { transform: scale(1.05); }
.pr-shot-blank {
    display: grid; place-items: center;
    background: linear-gradient(140deg, var(--ic-cloud), rgba(var(--ic-azure-rgb), .16));
    color: var(--ic-brand);
    font-size: 1.9rem;
}
.pr-body { padding: 22px 24px; }
.pr-title { display: flex; align-items: center; gap: 9px; font-size: 1.05rem; margin-bottom: 7px; }
.pr-title i { color: var(--ic-brand); font-size: .98rem; }
.place-row p { font-size: .88rem; }

/* ------------------------------ 27x. Contact Us ------------------- */
.contact-card {
    height: 100%;
    display: flex;
    flex-direction: column;
    background: #fff;
    border: 1px solid var(--ic-line);
    border-radius: var(--radius-lg);
    padding: 28px 26px;
    transition: transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s var(--ease);
}
.contact-card:hover { transform: translateY(-4px); box-shadow: var(--shadow); border-color: rgba(var(--ic-brand-rgb), .28); }
.cc-ico {
    width: 52px; height: 52px;
    display: grid; place-items: center;
    border-radius: 16px;
    background: rgba(var(--ic-brand-rgb), .10);
    color: var(--ic-brand);
    font-size: 1.35rem;
    margin-bottom: 18px;
}
.cc-label {
    display: block;
    font-family: var(--font-display);
    font-size: .7rem;
    font-weight: 600;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--ic-mute);
    margin-bottom: 7px;
}
.cc-value {
    font-family: var(--font-display);
    font-size: 1.02rem;
    font-weight: 600;
    color: var(--ic-ink);
    text-decoration: none;
    word-break: break-word;
}
.cc-value:hover { color: var(--ic-brand); }
.cc-extra { display: block; font-size: .88rem; color: var(--ic-brand); word-break: break-word; }
/* Each line on its own row - an address must not run together. */
.cc-address { font-style: normal; }
.cc-address span { display: block; font-weight: 600; color: var(--ic-ink); font-size: .98rem; }
.contact-card p { font-size: .88rem; color: var(--ic-mute); margin-top: 12px; }

.contact-note {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-top: 30px;
    background: var(--ic-cloud);
    border: 1px solid var(--ic-line);
    border-radius: var(--radius);
    padding: 18px 22px;
}
.contact-note > i { color: var(--ic-brand); font-size: 1.2rem; flex: none; }
.contact-note p { font-size: .92rem; }

.contact-map {
    height: 100%;
    min-height: 380px;
    border-radius: var(--radius-lg);
    overflow: hidden;
    border: 1px solid var(--ic-line);
    box-shadow: var(--shadow);
    line-height: 0;
}
.contact-map iframe { width: 100%; height: 100%; min-height: 380px; border: 0; }


/* ------------------------------ 27y. IFERP services --------------- */
.service-panel {
    height: 100%;
    display: flex;
    gap: 20px;
    background: #fff;
    border: 1px solid var(--ic-line);
    border-radius: var(--radius-lg);
    padding: 30px 30px 32px;
    transition: transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s var(--ease);
}
.service-panel:hover { transform: translateY(-4px); box-shadow: var(--shadow); border-color: rgba(var(--ic-brand-rgb), .28); }
.sp-ico {
    width: 58px; height: 58px;
    flex: none;
    display: grid; place-items: center;
    border-radius: 18px;
    background: linear-gradient(140deg, rgba(var(--ic-brand-rgb), .12), rgba(var(--ic-azure-rgb), .18));
    color: var(--ic-brand);
    font-size: 1.5rem;
}
.sp-title { font-size: 1.18rem; margin-bottom: 9px; }
.sp-text { font-size: .93rem; margin-bottom: 16px; }
.sp-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: var(--font-display);
    font-weight: 600;
    font-size: .92rem;
    color: var(--ic-brand);
    text-decoration: none;
}
.sp-link i { transition: transform .3s var(--ease); }
.service-panel:hover .sp-link i { transform: translate(3px, -3px); }

.service-note {
    display: flex;
    align-items: center;
    gap: 10px;
    justify-content: center;
    margin: 30px 0 0;
    font-size: .89rem;
    color: var(--ic-mute);
}
.service-note i { color: var(--ic-brand); }

/* ------------------------------ 27z. About IFERP ------------------ */
.activity-card {
    position: relative;
    height: 100%;
    background: #fff;
    border: 1px solid var(--ic-line);
    border-radius: var(--radius-lg);
    padding: 30px 28px;
    overflow: hidden;
    transition: transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s var(--ease);
}
.activity-card:hover { transform: translateY(-4px); box-shadow: var(--shadow); border-color: rgba(var(--ic-brand-rgb), .28); }
.ac-no {
    position: absolute;
    top: 16px; right: 22px;
    font-family: var(--font-display);
    font-size: 2.1rem;
    font-weight: 700;
    color: rgba(var(--ic-brand-rgb), .09);
    line-height: 1;
}
.ac-ico {
    width: 54px; height: 54px;
    display: grid; place-items: center;
    border-radius: 17px;
    background: rgba(var(--ic-brand-rgb), .10);
    color: var(--ic-brand);
    font-size: 1.35rem;
    margin-bottom: 16px;
}
.ac-title { font-size: 1.08rem; margin-bottom: 8px; }
.activity-card p { font-size: .9rem; }

/* Mission and vision, on the dark band */
.mv-card {
    height: 100%;
    background: rgba(255, 255, 255, .05);
    border: 1px solid rgba(255, 255, 255, .12);
    border-radius: var(--radius-lg);
    padding: 32px 30px;
}
.mv-ico {
    width: 54px; height: 54px;
    display: grid; place-items: center;
    border-radius: 17px;
    background: rgba(var(--ic-azure-rgb), .18);
    color: var(--ic-azure);
    font-size: 1.35rem;
    margin-bottom: 16px;
}
.mv-title {
    color: #fff;
    font-size: .8rem;
    font-weight: 600;
    letter-spacing: .16em;
    text-transform: uppercase;
    margin-bottom: 14px;
}
.mv-card blockquote { position: relative; padding-left: 34px; margin: 0; }
.mv-card blockquote > i {
    position: absolute;
    top: 0; left: 0;
    color: var(--ic-azure);
    font-size: 1.4rem;
    line-height: 1;
}
.mv-card blockquote p {
    color: #fff;
    font-family: var(--font-display);
    font-size: 1.05rem;
    font-style: italic;
    line-height: 1.55;
}

/* ------------------------------ 27z2. Past speakers --------------- */
.speaker-board + .speaker-board { margin-top: 52px; }
.sb-title { display: flex; align-items: center; gap: 14px; font-size: 1.3rem; margin-bottom: 20px; }
.sb-ico {
    width: 46px; height: 46px;
    flex: none;
    display: grid; place-items: center;
    border-radius: 14px;
    background: rgba(var(--ic-brand-rgb), .10);
    color: var(--ic-brand);
    font-size: 1.15rem;
}
/* A button, not a link - it opens the viewer rather than navigating. */
.sb-shot {
    position: relative;
    display: block;
    width: 100%;
    padding: 0;
    background: #fff;
    border: 1px solid var(--ic-line);
    border-radius: var(--radius-lg);
    overflow: hidden;
    cursor: zoom-in;
    transition: box-shadow .3s var(--ease), border-color .3s var(--ease);
}
.sb-shot:hover { box-shadow: var(--shadow); border-color: rgba(var(--ic-brand-rgb), .28); }
.sb-shot img { display: block; width: 100%; height: auto; }
.sb-zoom {
    position: absolute;
    right: 16px; bottom: 16px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(var(--ic-midnight-rgb), .84);
    color: #fff;
    font-family: var(--font-display);
    font-size: .82rem;
    font-weight: 600;
    border-radius: 999px;
    padding: 8px 16px;
    opacity: 0;
    transform: translateY(6px);
    transition: opacity .3s var(--ease), transform .3s var(--ease);
}
.sb-shot:hover .sb-zoom,
.sb-shot:focus-visible .sb-zoom { opacity: 1; transform: none; }
.sb-missing {
    display: flex;
    align-items: center;
    gap: 16px;
    background: var(--ic-cloud);
    border: 1px dashed var(--ic-line);
    border-radius: var(--radius-lg);
    padding: 30px;
}
.sb-missing i { color: var(--ic-brand); font-size: 1.6rem; }

/* ------------------------------ 27z3. Volunteers ------------------ */
.vol-benefit {
    height: 100%;
    background: #fff;
    border: 1px solid var(--ic-line);
    border-radius: var(--radius-lg);
    padding: 28px 26px;
    transition: transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s var(--ease);
}
.vol-benefit:hover { transform: translateY(-4px); box-shadow: var(--shadow); border-color: rgba(var(--ic-brand-rgb), .28); }
.vb-ico {
    width: 52px; height: 52px;
    display: grid; place-items: center;
    border-radius: 16px;
    background: rgba(var(--ic-brand-rgb), .10);
    color: var(--ic-brand);
    font-size: 1.3rem;
    margin-bottom: 16px;
}
.vb-title { font-size: 1.06rem; margin-bottom: 8px; }
.vol-benefit p { font-size: .9rem; }

/* Roles and responsibilities */
.role-card {
    height: 100%;
    background: #fff;
    border: 1px solid var(--ic-line);
    border-radius: var(--radius-lg);
    padding: 26px 24px;
    transition: box-shadow .3s var(--ease), border-color .3s var(--ease);
}
.role-card:hover { box-shadow: var(--shadow); border-color: rgba(var(--ic-brand-rgb), .28); }
.rc-head {
    display: flex;
    align-items: center;
    gap: 13px;
    font-size: 1.05rem;
    margin-bottom: 16px;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--ic-line);
}
.rc-ico {
    width: 42px; height: 42px;
    flex: none;
    display: grid; place-items: center;
    border-radius: 13px;
    background: rgba(var(--ic-brand-rgb), .10);
    color: var(--ic-brand);
    font-size: 1.05rem;
}
.rc-list li { display: flex; gap: 10px; font-size: .89rem; color: var(--ic-body); }
.rc-list li + li { margin-top: 10px; }
.rc-list i { color: var(--ic-brand); font-size: .95rem; flex: none; margin-top: 2px; }

/* Requirements, on the dark band */
.vol-req {
    height: 100%;
    display: flex;
    gap: 18px;
    background: rgba(255, 255, 255, .05);
    border: 1px solid rgba(255, 255, 255, .12);
    border-radius: var(--radius-lg);
    padding: 26px 28px;
}
.vr-ico {
    width: 50px; height: 50px;
    flex: none;
    display: grid; place-items: center;
    border-radius: 16px;
    background: rgba(var(--ic-azure-rgb), .18);
    color: var(--ic-azure);
    font-size: 1.25rem;
}
.vr-title { color: #fff; font-size: 1.05rem; margin-bottom: 7px; }
.vol-req p { font-size: .9rem; color: rgba(255, 255, 255, .74); }

/* How to apply */
.vol-step {
    position: relative;
    height: 100%;
    background: #fff;
    border: 1px solid var(--ic-line);
    border-radius: var(--radius-lg);
    padding: 28px 24px;
    overflow: hidden;
}
.vs-no {
    position: absolute;
    top: 14px; right: 20px;
    font-family: var(--font-display);
    font-size: 2rem;
    font-weight: 700;
    color: rgba(var(--ic-brand-rgb), .09);
    line-height: 1;
}
.vs-ico {
    width: 48px; height: 48px;
    display: grid; place-items: center;
    border-radius: 15px;
    background: rgba(var(--ic-brand-rgb), .10);
    color: var(--ic-brand);
    font-size: 1.2rem;
    margin-bottom: 15px;
}
.vs-title { font-size: 1rem; margin-bottom: 7px; }
.vol-step p { font-size: .88rem; }

.vol-deadline {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 18px;
    margin-top: 32px;
    background: rgba(245, 165, 36, .08);
    border: 1px solid rgba(245, 165, 36, .35);
    border-radius: var(--radius-lg);
    padding: 22px 28px;
}
.vol-deadline > i { color: var(--ic-amber); font-size: 1.4rem; flex: none; }
.vol-deadline p { flex: 1; min-width: 220px; font-size: .96rem; }
.vol-deadline .btn { margin-left: auto; }

.vol-close {
    display: flex;
    gap: 22px;
    background: linear-gradient(120deg, var(--ic-navy), var(--ic-steel));
    border-radius: var(--radius-lg);
    padding: 32px 34px;
    color: rgba(255, 255, 255, .82);
    box-shadow: var(--shadow);
}
.vc-ico {
    width: 56px; height: 56px;
    flex: none;
    display: grid; place-items: center;
    border-radius: 17px;
    background: rgba(var(--ic-azure-rgb), .18);
    color: var(--ic-azure);
    font-size: 1.45rem;
}
.vc-title { color: #fff; font-size: 1.25rem; margin-bottom: 9px; }
.vol-close p { font-size: .96rem; }
.vol-close a { color: var(--ic-azure); }

/* ------------------------------ 27z4. Scientific sessions --------- */

/* One row per track, image and copy swapping sides. */
.track-row {
    display: grid;
    grid-template-columns: 420px 1fr;
    gap: 40px;
    align-items: center;
    /* Clears the sticky header when the home page links straight to a track. */
    scroll-margin-top: 110px;
}
.track-row + .track-row { margin-top: 56px; padding-top: 56px; border-top: 1px solid var(--ic-line); }
/* Flipping needs the track widths swapped too - `order` alone would leave the
   photo in the 1fr column and squeeze the copy into 420px. */
.track-row.is-flipped { grid-template-columns: 1fr 420px; }
.track-row.is-flipped .tr-shot { order: 2; }
.tr-shot {
    position: relative;
    margin: 0;
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow);
}
.tr-shot img { display: block; width: 100%; height: 260px; object-fit: cover; }
.tr-no {
    position: absolute;
    top: 16px; left: 16px;
    display: grid; place-items: center;
    min-width: 44px; height: 44px;
    padding: 0 12px;
    border-radius: 14px;
    background: rgba(var(--ic-midnight-rgb), .82);
    color: #fff;
    font-family: var(--font-display);
    font-size: 1.05rem;
    font-weight: 700;
}
.tr-ico {
    width: 52px; height: 52px;
    display: grid; place-items: center;
    border-radius: 16px;
    background: rgba(var(--ic-brand-rgb), .10);
    color: var(--ic-brand);
    font-size: 1.3rem;
    margin-bottom: 14px;
}
.tr-title { font-size: 1.35rem; margin-bottom: 18px; }
.tr-label {
    display: block;
    font-family: var(--font-display);
    font-size: .7rem;
    font-weight: 600;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--ic-mute);
    margin-bottom: 10px;
}
.tr-sdgs { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 20px; }
.tr-sdgs li {
    display: flex;
    align-items: center;
    gap: 10px;
    background: var(--ic-cloud);
    border: 1px solid var(--ic-line);
    border-radius: 999px;
    padding: 6px 16px 6px 6px;
}
.tr-sdgs img { border-radius: 8px; flex: none; }
.tr-sdgs span { display: flex; flex-direction: column; font-size: .82rem; color: var(--ic-body); line-height: 1.3; }
.tr-sdgs b { font-family: var(--font-display); font-size: .74rem; color: var(--ic-brand); }
.tr-cta {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: var(--font-display);
    font-weight: 600;
    font-size: .93rem;
    color: var(--ic-brand);
}
.tr-cta i { transition: transform .3s var(--ease); }
.tr-cta:hover i { transform: translateX(4px); }

/* Compact SDG pills, shared by the image-led layouts. */
.tt-sdgs { display: flex; flex-wrap: wrap; gap: 6px; }
.tt-sdgs li {
    font-family: var(--font-display);
    font-size: .7rem;
    font-weight: 600;
    letter-spacing: .04em;
    border-radius: 999px;
    padding: 4px 11px;
    background: rgba(var(--ic-brand-rgb), .10);
    color: var(--ic-brand);
    cursor: default;
}
/* Same pill with the goal icon in front (the 'chip' style). */
.tt-sdgs-ico li {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 3px 12px 3px 3px;
}
.tt-sdgs-ico img { width: 22px; height: 22px; border-radius: 6px; flex: none; }

/* ---------- Sessions variant 2: PHOTO TILES ---------- */
.track-tile {
    position: relative;
    height: 100%;
    min-height: 380px;
    display: flex;
    align-items: flex-end;
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow);
    isolation: isolate;
    scroll-margin-top: 110px;
}
/* Direct child only - a bare `.track-tile img` also swallows the SDG icons
   in the caption and blows them up to fill the tile. */
.track-tile > img {
    position: absolute;
    inset: 0;
    width: 100%; height: 100%;
    object-fit: cover;
    z-index: -2;
    transition: transform .6s var(--ease);
}
.track-tile:hover > img { transform: scale(1.06); }
.track-tile::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(to top, rgba(var(--ic-midnight-rgb), .95) 0%, rgba(var(--ic-midnight-rgb), .8) 36%, rgba(var(--ic-midnight-rgb), .2) 66%, rgba(var(--ic-midnight-rgb), 0) 90%);
}
.tt-no {
    position: absolute;
    top: 16px; left: 16px;
    display: grid; place-items: center;
    min-width: 42px; height: 42px;
    padding: 0 12px;
    border-radius: 13px;
    background: rgba(255, 255, 255, .16);
    backdrop-filter: blur(6px);
    color: #fff;
    font-family: var(--font-display);
    font-size: 1rem;
    font-weight: 700;
}
.tt-body { padding: 26px 24px 26px; }
.tt-ico {
    width: 42px; height: 42px;
    display: grid; place-items: center;
    border-radius: 13px;
    background: rgba(var(--ic-azure-rgb), .22);
    color: #fff;
    font-size: 1.05rem;
    margin-bottom: 13px;
}
.tt-title { color: #fff; font-size: 1.08rem; margin-bottom: 12px; }
.track-tile .tt-sdgs li { background: rgba(255, 255, 255, .16); color: #fff; }

/* Goal badges in the top corner, opposite the track number. */
.tt-goals {
    position: absolute;
    top: 14px; right: 14px;
    z-index: 1;
    display: flex;
    gap: 6px;
    margin: 0;
}
.tt-goals img {
    display: block;
    width: 44px; height: 44px;
    border-radius: 10px;
    box-shadow: 0 4px 12px rgba(var(--ic-midnight-rgb), .4);
}
/* A solid pill, not a text link - a thin azure link disappears against a
   photograph, however dark the scrim. */
.tt-more {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    margin-top: 16px;
    padding: 9px 18px;
    border-radius: 999px;
    background: var(--ic-brand);
    color: #fff;
    font-family: var(--font-display);
    font-weight: 600;
    font-size: .86rem;
    box-shadow: 0 6px 18px rgba(var(--ic-midnight-rgb), .35);
    transition: background .25s var(--ease), transform .25s var(--ease);
}
.tt-more:hover { background: #fff; color: var(--ic-navy); transform: translateY(-2px); }
.tt-more i { transition: transform .3s var(--ease); }
.track-tile:hover .tt-more i { transform: translateX(3px); }

/* ---------- Sessions variant 3: FEATURE + GRID ---------- */
.track-feature {
    display: grid;
    grid-template-columns: 1.15fr 1fr;
    background: #fff;
    border: 1px solid var(--ic-line);
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow);
    scroll-margin-top: 110px;
}
.tf-shot { margin: 0; overflow: hidden; }
.tf-shot img { display: block; width: 100%; height: 100%; min-height: 320px; object-fit: cover; }
.tf-body { padding: 36px 38px; align-self: center; }
.tf-tag {
    display: inline-block;
    font-family: var(--font-display);
    font-size: .7rem;
    font-weight: 600;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--ic-brand);
    margin-bottom: 10px;
}
.tf-title { font-size: 1.5rem; margin-bottom: 18px; }

.track-mini {
    height: 100%;
    display: flex;
    flex-direction: column;
    background: #fff;
    border: 1px solid var(--ic-line);
    border-radius: var(--radius-lg);
    overflow: hidden;
    scroll-margin-top: 110px;
    transition: transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s var(--ease);
}
.track-mini:hover { transform: translateY(-4px); box-shadow: var(--shadow); border-color: rgba(var(--ic-brand-rgb), .28); }
.tm-shot { position: relative; margin: 0; overflow: hidden; }
.tm-shot img { display: block; width: 100%; height: 160px; object-fit: cover; transition: transform .5s var(--ease); }
.track-mini:hover .tm-shot img { transform: scale(1.05); }
.tm-no {
    position: absolute;
    top: 12px; left: 12px;
    display: grid; place-items: center;
    min-width: 36px; height: 36px;
    padding: 0 10px;
    border-radius: 11px;
    background: rgba(var(--ic-midnight-rgb), .82);
    color: #fff;
    font-family: var(--font-display);
    font-size: .88rem;
    font-weight: 700;
}
.tm-body { padding: 18px 20px 22px; }
.tm-title { display: flex; gap: 9px; font-size: .98rem; margin-bottom: 12px; line-height: 1.4; }
.tm-title i { color: var(--ic-brand); font-size: .95rem; flex: none; margin-top: 3px; }

/* ---------- Sessions variant 4: SPLIT CARDS ---------- */
.track-split {
    height: 100%;
    display: flex;
    background: #fff;
    border: 1px solid var(--ic-line);
    border-radius: var(--radius-lg);
    overflow: hidden;
    scroll-margin-top: 110px;
    transition: transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s var(--ease);
}
.track-split:hover { transform: translateY(-3px); box-shadow: var(--shadow); border-color: rgba(var(--ic-brand-rgb), .28); }
.ts-shot { position: relative; margin: 0; flex: none; width: 200px; overflow: hidden; }
.ts-shot img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .5s var(--ease); }
.track-split:hover .ts-shot img { transform: scale(1.05); }
.ts-no {
    position: absolute;
    top: 12px; left: 12px;
    display: grid; place-items: center;
    min-width: 34px; height: 34px;
    padding: 0 9px;
    border-radius: 11px;
    background: rgba(var(--ic-midnight-rgb), .82);
    color: #fff;
    font-family: var(--font-display);
    font-size: .84rem;
    font-weight: 700;
}
.ts-body { padding: 22px 24px; align-self: center; }
.ts-ico {
    width: 40px; height: 40px;
    display: grid; place-items: center;
    border-radius: 12px;
    background: rgba(var(--ic-brand-rgb), .10);
    color: var(--ic-brand);
    font-size: 1rem;
    margin-bottom: 12px;
}
.ts-title { font-size: 1.02rem; margin-bottom: 12px; line-height: 1.4; }

/* ---------- Sessions variant 5: CINEMATIC BANDS ---------- */
.track-band {
    position: relative;
    display: flex;
    align-items: center;
    min-height: 260px;
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow);
    isolation: isolate;
    scroll-margin-top: 110px;
}
.track-band + .track-band { margin-top: 20px; }
/* Direct child only, as with .track-tile - the caption can hold SDG icons. */
.track-band > img {
    position: absolute;
    inset: 0;
    width: 100%; height: 100%;
    object-fit: cover;
    z-index: -2;
    transition: transform .7s var(--ease);
}
.track-band:hover > img { transform: scale(1.04); }
/* Reads left to right, so the gradient is horizontal rather than vertical. */
.track-band::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(to right, rgba(var(--ic-midnight-rgb), .95) 0%, rgba(var(--ic-midnight-rgb), .86) 34%, rgba(var(--ic-midnight-rgb), .45) 62%, rgba(var(--ic-midnight-rgb), .12) 100%);
}
.tb-body { padding: 34px 38px; max-width: 620px; color: rgba(255, 255, 255, .82); }
.tb-no {
    display: block;
    font-family: var(--font-display);
    font-size: 2.4rem;
    font-weight: 700;
    line-height: 1;
    color: rgba(var(--ic-azure-rgb), .55);
    margin-bottom: 10px;
}
.tb-title {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    color: #fff;
    font-size: 1.45rem;
    margin-bottom: 16px;
}
.tb-title i { color: var(--ic-azure); font-size: 1.2rem; margin-top: 4px; flex: none; }
.track-band .tt-sdgs li { background: rgba(255, 255, 255, .16); color: #fff; }

/* ---------- Sessions variant 6: CAROUSEL ---------- */
.track-slider { max-width: 100%; }
.tsl-stage {
    position: relative;
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow);
    background: var(--ic-midnight);
}
.tsl-slide {
    position: relative;
    display: grid;
    grid-template-columns: 1.1fr 1fr;
    min-height: 420px;
    scroll-margin-top: 110px;
}
.tsl-slide[hidden] { display: none; }
/* Direct child only - a bare `.tsl-slide img` also blows up the SDG icons. */
.tsl-slide > img { width: 100%; height: 100%; min-height: 420px; object-fit: cover; display: block; }
.tsl-body { padding: 42px 46px; align-self: center; color: rgba(255, 255, 255, .8); }
.tsl-tag {
    display: inline-block;
    font-family: var(--font-display);
    font-size: .7rem;
    font-weight: 600;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--ic-azure);
    margin-bottom: 12px;
}
.tsl-title { color: #fff; font-size: 1.55rem; margin-bottom: 20px; outline: none; }
.tsl-body .tr-sdgs li { background: rgba(255, 255, 255, .1); border-color: rgba(255, 255, 255, .18); }
.tsl-body .tr-sdgs span { color: rgba(255, 255, 255, .8); }
.tsl-body .tr-sdgs b { color: var(--ic-azure); }
.tsl-body .tr-cta { color: var(--ic-azure); }

.tsl-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 2;
    width: 46px; height: 46px;
    display: grid; place-items: center;
    border: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, .18);
    backdrop-filter: blur(6px);
    color: #fff;
    font-size: 1.1rem;
    transition: background .22s var(--ease);
}
.tsl-nav:hover { background: var(--ic-brand); }
.tsl-prev { left: 16px; }
.tsl-next { right: 16px; }

.tsl-rail {
    display: flex;
    gap: 10px;
    margin-top: 16px;
    padding-bottom: 6px;
    overflow-x: auto;
    /* sessions.js nudges scrollLeft to keep the active thumbnail in view.
       scroll-behavior does not inherit, so the rail needs its own. */
    scroll-behavior: smooth;
}
.tsl-thumb {
    position: relative;
    flex: none;
    width: 104px; height: 66px;
    padding: 0;
    border: 2px solid transparent;
    border-radius: var(--radius-sm);
    overflow: hidden;
    background: none;
    opacity: .58;
    transition: opacity .22s var(--ease), border-color .22s var(--ease);
}
.tsl-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.tsl-thumb span {
    position: absolute;
    left: 6px; bottom: 5px;
    font-family: var(--font-display);
    font-size: .72rem;
    font-weight: 700;
    color: #fff;
    text-shadow: 0 1px 3px rgba(0, 0, 0, .8);
}
.tsl-thumb:hover { opacity: .85; }
.tsl-thumb.is-active { opacity: 1; border-color: var(--ic-brand); }

/* ---------- Sessions variant 7: EXPANDING ROWS ---------- */
.track-acc { display: grid; gap: 10px; }
.ta-item {
    background: #fff;
    border: 1px solid var(--ic-line);
    border-radius: var(--radius-lg);
    overflow: hidden;
    scroll-margin-top: 110px;
}
/* Reset Bootstrap's own accordion chrome; the rest is ours. */
.ta-head.accordion-button {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 12px 18px;
    background: #fff;
    box-shadow: none;
    font-family: var(--font-display);
}
.ta-head.accordion-button:not(.collapsed) { background: var(--ic-cloud); color: var(--ic-navy); }
.ta-head.accordion-button:focus { box-shadow: none; border-color: transparent; }
.ta-head::after { margin-left: auto; flex: none; }
.ta-thumb { width: 72px; height: 48px; object-fit: cover; border-radius: 10px; flex: none; }
.ta-no {
    font-size: .8rem;
    font-weight: 700;
    color: var(--ic-brand);
    flex: none;
}
.ta-title { font-size: 1rem; font-weight: 600; color: var(--ic-navy); }
.ta-body {
    display: grid;
    grid-template-columns: 1.1fr 1fr;
    gap: 28px;
    align-items: center;
    padding: 22px 20px 26px;
}
.ta-shot { margin: 0; border-radius: var(--radius); overflow: hidden; }
.ta-shot img { display: block; width: 100%; height: 240px; object-fit: cover; }

/* ---------- Sessions variant 8: POSTER WALL ---------- */
.poster-wall {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 18px;
}
.track-poster {
    display: flex;
    flex-direction: column;
    background: #fff;
    border: 1px solid var(--ic-line);
    border-radius: var(--radius-lg);
    overflow: hidden;
    scroll-margin-top: 110px;
    transition: transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s var(--ease);
}
.track-poster:hover { transform: translateY(-5px); box-shadow: var(--shadow); border-color: rgba(var(--ic-brand-rgb), .28); }
.tp-shot { position: relative; margin: 0; overflow: hidden; }
/* Portrait crop - the source photographs are landscape. */
.tp-shot img { display: block; width: 100%; aspect-ratio: 3 / 4; object-fit: cover; transition: transform .5s var(--ease); }
.track-poster:hover .tp-shot img { transform: scale(1.05); }
.tp-no {
    position: absolute;
    top: 10px; left: 10px;
    display: grid; place-items: center;
    min-width: 32px; height: 32px;
    padding: 0 9px;
    border-radius: 10px;
    background: rgba(var(--ic-midnight-rgb), .82);
    color: #fff;
    font-family: var(--font-display);
    font-size: .8rem;
    font-weight: 700;
}
/* Sits inside the frame: .tp-shot clips for the zoom, so an overhanging
   badge would be cut in half. */
.tp-ico {
    position: absolute;
    right: 10px; bottom: 10px;
    width: 38px; height: 38px;
    display: grid; place-items: center;
    border-radius: 12px;
    background: var(--ic-brand);
    color: #fff;
    font-size: .95rem;
    box-shadow: var(--shadow);
}
.tp-body { padding: 18px 16px 20px; }
.tp-title { font-size: .92rem; line-height: 1.4; margin-bottom: 10px; }
.track-poster .tt-sdgs li { font-size: .66rem; padding: 3px 9px; }

/* ------------------------------ 27z5. Session detail -------------- */
.sd-shot { position: relative; border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow); }
.sd-shot img { display: block; width: 100%; height: 380px; object-fit: cover; }
.sd-no {
    position: absolute;
    top: 18px; left: 18px;
    display: grid; place-items: center;
    min-width: 52px; height: 52px;
    padding: 0 14px;
    border-radius: 16px;
    background: rgba(var(--ic-midnight-rgb), .84);
    color: #fff;
    font-family: var(--font-display);
    font-size: 1.25rem;
    font-weight: 700;
}
.sd-ico {
    width: 56px; height: 56px;
    display: grid; place-items: center;
    border-radius: 17px;
    background: rgba(var(--ic-brand-rgb), .10);
    color: var(--ic-brand);
    font-size: 1.4rem;
    margin-bottom: 16px;
}
.sd-title { font-size: 1.75rem; margin: 6px 0 16px; }
.sd-lead { font-size: 1.02rem; }
.sd-objective {
    display: flex;
    gap: 16px;
    background: var(--ic-cloud);
    border-left: 3px solid var(--ic-brand);
    border-radius: var(--radius);
    padding: 20px 22px;
}
.so-ico {
    width: 44px; height: 44px;
    flex: none;
    display: grid; place-items: center;
    border-radius: 13px;
    background: rgba(var(--ic-brand-rgb), .10);
    color: var(--ic-brand);
    font-size: 1.1rem;
}
.so-label {
    display: block;
    font-family: var(--font-display);
    font-size: .7rem;
    font-weight: 600;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--ic-mute);
    margin-bottom: 4px;
}
.sd-objective p { font-size: .96rem; color: var(--ic-ink); }

/* SDGs mapped */
.sd-sdgs { display: flex; flex-wrap: wrap; gap: 16px; justify-content: center; }
.sdg-card {
    display: flex;
    align-items: center;
    gap: 16px;
    background: #fff;
    border: 1px solid var(--ic-line);
    border-radius: var(--radius-lg);
    padding: 18px 26px 18px 18px;
    box-shadow: var(--shadow-sm, none);
}
.sdg-card img { border-radius: 12px; flex: none; }
.sc-num {
    display: block;
    font-family: var(--font-display);
    font-size: .74rem;
    font-weight: 700;
    letter-spacing: .1em;
    color: var(--ic-brand);
}
.sc-name { font-size: 1.02rem; margin: 2px 0 0; }

/* Focus areas */
.focus-grid { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; }
.focus-item {
    display: flex;
    align-items: center;
    gap: 12px;
    background: #fff;
    border: 1px solid var(--ic-line);
    border-radius: 999px;
    padding: 10px 24px 10px 10px;
    font-family: var(--font-display);
    font-weight: 600;
    font-size: .95rem;
    color: var(--ic-navy);
    transition: transform .3s var(--ease), border-color .3s var(--ease);
}
.focus-item:hover { transform: translateY(-3px); border-color: rgba(var(--ic-brand-rgb), .3); }
.fi-mark {
    width: 40px; height: 40px;
    flex: none;
    display: grid; place-items: center;
    border-radius: 50%;
    background: rgba(var(--ic-brand-rgb), .10);
    color: var(--ic-brand);
    font-size: 1rem;
}

/* Core objectives, on the dark band */
.core-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin: 0; }
.core-list li {
    display: flex;
    gap: 18px;
    align-items: center;
    background: rgba(255, 255, 255, .05);
    border: 1px solid rgba(255, 255, 255, .12);
    border-radius: var(--radius-lg);
    padding: 22px 26px;
}
.cl-no {
    font-family: var(--font-display);
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--ic-azure);
    flex: none;
    line-height: 1;
}
.core-list p { font-size: .97rem; color: rgba(255, 255, 255, .82); }

/* Expected outcomes */
.outcome-band {
    display: flex;
    gap: 22px;
    background: linear-gradient(120deg, rgba(var(--ic-brand-rgb), .07), rgba(var(--ic-azure-rgb), .12));
    border: 1px solid rgba(var(--ic-brand-rgb), .18);
    border-radius: var(--radius-lg);
    padding: 32px 34px;
}
.ob-ico {
    width: 56px; height: 56px;
    flex: none;
    display: grid; place-items: center;
    border-radius: 17px;
    background: var(--ic-brand);
    color: #fff;
    font-size: 1.35rem;
}
.outcome-band p { font-size: 1.05rem; color: var(--ic-ink); margin-top: 6px; }

/* Previous / next track */
.track-nav {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 18px;
    padding-top: 28px;
    border-top: 1px solid var(--ic-line);
}
.tn-link {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 18px;
    border: 1px solid var(--ic-line);
    border-radius: var(--radius);
    transition: border-color .3s var(--ease), background .3s var(--ease);
}
.tn-link:hover { border-color: rgba(var(--ic-brand-rgb), .3); background: var(--ic-cloud); }
.tn-next { justify-content: flex-end; text-align: right; }
.tn-link > i { color: var(--ic-brand); font-size: 1.1rem; flex: none; }
.tn-link em {
    display: block;
    font-style: normal;
    font-family: var(--font-display);
    font-size: .7rem;
    font-weight: 600;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--ic-mute);
}
.tn-link b { font-size: .93rem; color: var(--ic-navy); font-weight: 600; }
.tn-all {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: var(--font-display);
    font-weight: 600;
    font-size: .9rem;
    color: var(--ic-brand);
    white-space: nowrap;
}

/* ------------------------------ 27z6. Track actions + rules ------- */
.track-actions { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; }
.track-actions .btn { display: inline-flex; align-items: center; gap: 10px; }
/* The brochure button until the Zoho link arrives - visibly not a link. */
.track-actions .is-pending {
    opacity: .55;
    cursor: not-allowed;
    pointer-events: none;
}
.track-actions .is-pending em {
    font-style: normal;
    font-size: .66rem;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--ic-amber);
}

/* Abstract and Full Paper side by side. A divider between them rather than a
   box around each, so the two read as one comparison. */
.guide-split {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0 46px;
    align-items: start;
}
.guide-split > .guide-col + .guide-col {
    padding-left: 46px;
    margin-left: -46px;
}
.gc-head { margin-bottom: 24px; }
.gc-title { font-size: 1.5rem; margin: 8px 0 0; }
/* Half the width, so each column's own grid drops to one item per row. */
.guide-col .rule-grid { grid-template-columns: 1fr; }
.guide-col .guide-doc { max-width: none; }
.guide-col .guide-tabs { grid-template-columns: 1fr; gap: 16px; }
.guide-col .gt-rail { position: static; }

.rule-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
    align-items: start;
}
.rule-group {
    background: #fff;
    border: 1px solid var(--ic-line);
    border-radius: var(--radius-lg);
    padding: 26px 28px;
    transition: box-shadow .3s var(--ease), border-color .3s var(--ease);
}
.rule-group:hover { box-shadow: var(--shadow); border-color: rgba(var(--ic-brand-rgb), .28); }
.rg-head {
    display: flex;
    align-items: center;
    gap: 13px;
    font-size: 1.06rem;
    margin-bottom: 16px;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--ic-line);
}
.rg-ico {
    width: 42px; height: 42px;
    flex: none;
    display: grid; place-items: center;
    border-radius: 13px;
    background: rgba(var(--ic-brand-rgb), .10);
    color: var(--ic-brand);
    font-size: 1.05rem;
}
.rg-list > li { display: flex; gap: 11px; font-size: .92rem; color: var(--ic-body); }
.rg-list > li + li { margin-top: 11px; }
.rg-list > li > i { color: var(--ic-brand); font-size: .95rem; flex: none; margin-top: 3px; }
.rg-list b { color: var(--ic-ink); font-weight: 600; }
/* Nested steps (Body, Main Body) - indented and ruled, not bulleted twice. */
.rg-sub {
    margin: 9px 0 0;
    padding-left: 14px;
    border-left: 2px solid rgba(var(--ic-brand-rgb), .18);
}
.rg-sub li { font-size: .88rem; color: var(--ic-mute); }
.rg-sub li + li { margin-top: 6px; }

/* ---------- Guidelines variant 2: NUMBERED DOCUMENT ----------
   Deliberately not a card: hairline rules and hanging numerals, so it reads
   as an author kit rather than another panel. */
.guide-doc { max-width: 900px; margin: 0 auto; }
.gd-clause + .gd-clause { margin-top: 34px; padding-top: 34px; border-top: 1px solid var(--ic-line); }
.gd-heading {
    display: flex;
    align-items: baseline;
    gap: 14px;
    font-size: 1.22rem;
    margin-bottom: 18px;
}
.gd-num { font-family: var(--font-display); font-weight: 700; color: var(--ic-brand); }
.gd-rules { margin: 0; }
.gd-rules > li { display: flex; gap: 16px; }
.gd-rules > li + li { margin-top: 14px; }
.gd-rules > li > div { flex: 1; min-width: 0; }
.gd-rules span:not(.gd-ref) { font-size: .96rem; color: var(--ic-body); }
/* Tabular numerals keep the 1.1 / 1.10 refs in a straight column. */
.gd-ref {
    flex: none;
    width: 46px;
    font-family: var(--font-display);
    font-size: .82rem;
    font-weight: 600;
    color: var(--ic-mute);
    font-variant-numeric: tabular-nums;
    padding-top: 2px;
}
.gd-sub { margin: 10px 0 0; }
.gd-sub li { display: flex; gap: 16px; }
.gd-sub li + li { margin-top: 8px; }
.gd-sub span:not(.gd-ref) { font-size: .9rem; color: var(--ic-mute); }
.gd-sub .gd-ref { width: 52px; font-size: .76rem; }
.guide-doc b { color: var(--ic-ink); font-weight: 600; }

/* ---------- Guidelines variant 3: TABBED RAIL ---------- */
.guide-tabs {
    display: grid;
    grid-template-columns: 290px 1fr;
    gap: 24px;
    align-items: start;
}
.gt-rail { display: grid; gap: 6px; position: sticky; top: 104px; }
.gt-tab {
    display: flex;
    align-items: center;
    gap: 13px;
    width: 100%;
    padding: 13px 16px;
    border: 1px solid transparent;
    border-radius: var(--radius);
    background: none;
    text-align: left;
    transition: background .22s var(--ease), border-color .22s var(--ease);
}
.gt-tab:hover { background: rgba(var(--ic-brand-rgb), .06); }
.gt-tab.is-active { background: #fff; border-color: var(--ic-line); box-shadow: var(--shadow); }
.gt-ico {
    width: 38px; height: 38px;
    flex: none;
    display: grid; place-items: center;
    border-radius: 12px;
    background: rgba(var(--ic-brand-rgb), .10);
    color: var(--ic-brand);
    font-size: .98rem;
    transition: background .22s var(--ease), color .22s var(--ease);
}
.gt-tab.is-active .gt-ico { background: var(--ic-brand); color: #fff; }
.gt-label {
    flex: 1;
    font-family: var(--font-display);
    font-size: .93rem;
    font-weight: 600;
    color: var(--ic-navy);
    line-height: 1.3;
}
.gt-count {
    flex: none;
    min-width: 24px;
    padding: 2px 7px;
    border-radius: 999px;
    background: var(--ic-mist);
    color: var(--ic-mute);
    font-family: var(--font-display);
    font-size: .72rem;
    font-weight: 600;
    text-align: center;
}
.gt-tab.is-active .gt-count { background: rgba(var(--ic-brand-rgb), .12); color: var(--ic-brand); }

.gt-panels {
    background: #fff;
    border: 1px solid var(--ic-line);
    border-radius: var(--radius-lg);
    padding: 30px 34px 34px;
    min-height: 260px;
}
.gt-panel[hidden] { display: none; }
.gt-title {
    display: flex;
    align-items: center;
    gap: 14px;
    font-size: 1.2rem;
    margin-bottom: 20px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--ic-line);
}
.gt-step {
    font-family: var(--font-display);
    font-size: 1.6rem;
    font-weight: 700;
    color: rgba(var(--ic-brand-rgb), .18);
    line-height: 1;
}

/* "In case you haven't heard from us yet" */
.notice-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
/* Now the last section on sessions-and-tracks.php, so it sits navy-on-navy
   against the footer - a hairline keeps the two apart. */
#not-heard { border-bottom: 1px solid rgba(255, 255, 255, .10); }
.notice-item {
    display: flex;
    gap: 16px;
    background: rgba(255, 255, 255, .05);
    border: 1px solid rgba(255, 255, 255, .12);
    border-radius: var(--radius-lg);
    padding: 24px 26px;
}
.ni-ico {
    width: 46px; height: 46px;
    flex: none;
    display: grid; place-items: center;
    border-radius: 14px;
    background: rgba(var(--ic-azure-rgb), .18);
    color: var(--ic-azure);
    font-size: 1.15rem;
}
.notice-item p { font-size: .94rem; color: rgba(255, 255, 255, .78); }
.notice-item strong { color: #fff; }
.notice-item a { color: var(--ic-azure); }

/* ------------------------------ 27z7. Call for Papers table ------- */
.cfp-table {
    border: 1px solid var(--ic-line);
    border-radius: var(--radius-lg);
    overflow: hidden;
    background: #fff;
    margin-bottom: 40px;
}
.cfp-row {
    display: grid;
    grid-template-columns: 130px minmax(0, 1fr);
    align-items: center;
    gap: 16px;
    padding: 14px 24px;
    border-bottom: 1px solid var(--ic-line);
}
.cfp-row:last-child { border-bottom: 0; }
.cfp-row:not(.cfp-head):hover { background: var(--ic-cloud); }
.cfp-head {
    background: var(--ic-midnight);
    color: rgba(255, 255, 255, .8);
    font-family: var(--font-display);
    font-size: .72rem;
    font-weight: 600;
    letter-spacing: .14em;
    text-transform: uppercase;
    padding-top: 16px;
    padding-bottom: 16px;
}
.cfp-no {
    font-family: var(--font-display);
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--ic-brand);
    font-variant-numeric: tabular-nums;
}
.cfp-title a {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: .98rem;
    font-weight: 500;
    color: var(--ic-navy);
    transition: color .22s var(--ease);
}
.cfp-title a:hover { color: var(--ic-brand); }
.cfp-title i { color: var(--ic-brand); font-size: 1.05rem; flex: none; }

/* ---------- CFP variant 2: EDITORIAL INDEX ----------
   No card, no table, no border box - hairlines and type only.
   Two columns, filling left to right: 01 | 02 / 03 | 04 ... */
/* Each track is its own bordered card, with a brand rule along the top
   edge the way the reference card has one. */
.cfp-ladder {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px 22px;
    margin: 0 0 40px;
}
.cfp-ladder li {
    position: relative;
    background: #fff;
    border: 1px solid rgba(var(--ic-brand-rgb), .22);
    border-top: 3px solid var(--ic-brand);
    border-radius: 18px;
    box-shadow: 0 6px 18px rgba(3, 19, 51, .05);
    transition: border-color .3s var(--ease), box-shadow .3s var(--ease), transform .3s var(--ease);
}
.cfp-ladder li:hover {
    border-color: var(--ic-brand);
    box-shadow: 0 16px 34px rgba(var(--ic-brand-rgb), .14);
    transform: translateY(-3px);
}
.cfp-ladder a {
    display: flex;
    align-items: center;
    gap: 22px;
    height: 100%;
    padding: 20px 22px;
    border-radius: inherit;
}
/* Outlined numeral - the stroke is the whole point, so no fill. */
.cl-num {
    flex: none;
    width: 66px;
    font-family: var(--font-display);
    font-size: 2.2rem;
    font-weight: 700;
    line-height: 1;
    color: transparent;
    -webkit-text-stroke: 1.5px rgba(var(--ic-brand-rgb), .38);
    font-variant-numeric: tabular-nums;
    transition: -webkit-text-stroke-color .3s var(--ease), color .3s var(--ease);
}
.cfp-ladder a:hover .cl-num { color: var(--ic-brand); -webkit-text-stroke-color: transparent; }
/* Title with its SDG row beneath - the body takes the flex space the title
   used to. */
.cl-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 10px; }
.cl-title {
    font-family: var(--font-display);
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--ic-navy);
    line-height: 1.35;
}
.cl-sdgs { display: flex; align-items: center; flex-wrap: wrap; gap: 5px; }
.cl-sdgs > img {
    display: block;
    width: 30px; height: 30px;
    border-radius: 4px;
    transition: transform .25s var(--ease);
}
.cfp-ladder a:hover .cl-sdgs > img { transform: translateY(-2px); }
.cl-sdg-codes {
    margin-left: 8px;
    font-size: .82rem;
    font-weight: 500;
    color: var(--ic-slate);
}
.cl-go {
    flex: none;
    width: 40px; height: 40px;
    display: grid; place-items: center;
    border-radius: 50%;
    border: 1px solid rgba(var(--ic-navy-rgb), 0.17);
    color: var(--ic-brand);
    /* Always shown now - it was hover-only (opacity: 0). */
    transform: translateX(-8px);
    transition: opacity .3s var(--ease), transform .3s var(--ease);
}
.cfp-ladder a:hover .cl-go { opacity: 1; transform: none; }

/* ---------- CFP variant 3: TOPIC CLOUD ----------
   Flowing pills, centred - deliberately not a row or a grid. */
.cfp-cloud {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
    margin-bottom: 40px;
}
.cc-pill {
    display: inline-flex;
    align-items: center;
    gap: 11px;
    padding: 11px 22px 11px 11px;
    border: 1px solid var(--ic-line);
    border-radius: 999px;
    background: #fff;
    font-family: var(--font-display);
    font-size: .95rem;
    font-weight: 500;
    color: var(--ic-navy);
    transition: transform .28s var(--ease), border-color .28s var(--ease), box-shadow .28s var(--ease);
}
.cc-pill:hover {
    transform: translateY(-4px);
    border-color: rgba(var(--ic-brand-rgb), .35);
    box-shadow: var(--shadow);
    color: var(--ic-brand);
}
.cc-pill i { color: var(--ic-brand); font-size: 1rem; }
.ccp-no {
    width: 30px; height: 30px;
    flex: none;
    display: grid; place-items: center;
    border-radius: 50%;
    background: rgba(var(--ic-brand-rgb), .10);
    color: var(--ic-brand);
    font-size: .8rem;
    font-weight: 700;
}
.cc-pill:hover .ccp-no { background: var(--ic-brand); color: #fff; }

/* ---------- CFP variant 4: TICKET STUBS ---------- */
.cfp-tickets {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
    margin-bottom: 40px;
}
.cfp-ticket {
    display: flex;
    background: #fff;
    border: 1px solid var(--ic-line);
    border-radius: var(--radius);
    overflow: hidden;
    transition: transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s var(--ease);
}
.cfp-ticket:hover { transform: translateY(-3px); box-shadow: var(--shadow); border-color: rgba(var(--ic-brand-rgb), .3); }
/* The tear-off: a dashed rule plus two notches punched out of the edge. */
.ct-stub {
    position: relative;
    flex: none;
    width: 96px;
    display: grid;
    place-content: center;
    text-align: center;
    padding: 20px 10px;
    background: linear-gradient(150deg, var(--ic-navy), var(--ic-steel));
    color: #fff;
    border-right: 2px dashed rgba(255, 255, 255, .45);
}
.ct-stub::before,
.ct-stub::after {
    content: '';
    position: absolute;
    right: -9px;
    width: 16px; height: 16px;
    border-radius: 50%;
    background: var(--ic-cloud);
}
.ct-stub::before { top: -8px; }
.ct-stub::after { bottom: -8px; }
.cts-label {
    display: block;
    font-family: var(--font-display);
    font-size: .62rem;
    font-weight: 600;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--ic-azure);
}
.cts-no {
    display: block;
    font-family: var(--font-display);
    font-size: 1.9rem;
    font-weight: 700;
    line-height: 1.1;
    font-variant-numeric: tabular-nums;
}
.ct-body { padding: 18px 22px; display: flex; flex-direction: column; justify-content: center; gap: 8px; }
.ct-title {
    font-family: var(--font-display);
    font-size: .98rem;
    font-weight: 600;
    color: var(--ic-navy);
    line-height: 1.4;
}
.ct-go {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: .82rem;
    font-weight: 600;
    color: var(--ic-brand);
}
.ct-go i { transition: transform .3s var(--ease); }
.cfp-ticket:hover .ct-go i { transform: translateX(4px); }

/* ------------------------------ 27z9a. The 17 Global Goals -------- */
/* Home page #sdg (QA #11). Ported from the ICASET site so the two
   conference sites show the goals the same way; colours and type are
   ICRCET's own tokens. */
.gg-panel {
    padding: clamp(26px, 3vw, 40px);
    background: #fff;
    border: 1px solid var(--ic-line);
    border-radius: var(--radius-lg);
    box-shadow: 0 22px 55px rgba(3, 19, 51, .07);
}
.gg-top {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 22px 30px;
    padding-bottom: 24px;
    border-bottom: 1px solid var(--ic-line);
}
.gg-intro h3 {
    margin: 0;
    font-family: var(--font-display);
    font-size: clamp(1.35rem, 2.4vw, 1.85rem);
    font-weight: 700;
    color: var(--ic-navy);
}
.gg-intro p { margin: 8px 0 0; color: var(--ic-slate); font-size: .95rem; }
/* Counters are read off the data, so they cannot drift from the grid. */
.gg-counts { display: flex; flex-wrap: wrap; gap: 14px 34px; margin: 0; }
.gg-counts dt {
    font-family: var(--font-display);
    font-size: clamp(1.6rem, 2.6vw, 2.1rem);
    font-weight: 700;
    line-height: 1;
    color: var(--ic-navy);
}
.gg-counts dd {
    margin: 6px 0 0;
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .06em;
    color: var(--ic-slate);
}
/* Nine across, so the seventeen fall as 9 + 8, the way the UN sheet does. */
.gg-grid {
    display: grid;
    grid-template-columns: repeat(9, minmax(0, 1fr));
    align-items: start;
    gap: 16px 12px;
    margin: 28px 0 0;
    padding: 0;
}
.gg-goal { display: flex; flex-direction: column; gap: 9px; }
.gg-goal > img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 1;
    object-fit: cover;
    border-radius: 8px;
    /* Flat colour tiles - a hairline keeps the pale ones off the card. */
    box-shadow: inset 0 0 0 1px rgba(3, 19, 51, .10);
    transition: transform .25s var(--ease), box-shadow .25s var(--ease);
}
.gg-goal:hover > img { transform: translateY(-4px); box-shadow: 0 12px 24px rgba(3, 19, 51, .18); }
.gg-goal-ph {
    display: grid;
    place-items: center;
    aspect-ratio: 1;
    border-radius: 8px;
    background: var(--ic-cloud);
    font-family: var(--font-display);
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--ic-mute);
}
.gg-goal-name { font-size: .7rem; font-weight: 600; line-height: 1.35; color: var(--ic-slate); }
/* The goals this conference actually maps a track to. */
.gg-goal.is-priority .gg-goal-name { color: var(--ic-navy); font-weight: 700; }
.gg-goal.is-priority > img { box-shadow: inset 0 0 0 1px rgba(3, 19, 51, .10), 0 0 0 2px var(--ic-brand); }
.gg-actions { display: flex; justify-content: center; margin-top: 30px; }

@media (max-width: 1199.98px) { .gg-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
@media (max-width: 767.98px) {
    .gg-top { align-items: flex-start; }
    .gg-counts { gap: 12px 24px; }
    .gg-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px 10px; }
    .gg-goal-name { font-size: .64rem; }
}
@media (max-width: 480px) { .gg-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* ------------------------------ 27z9. SDG marquee ----------------- */
/* No longer on the home page (replaced by the 17 Global Goals grid above);
   kept in case the marquee is wanted back. */
/* Reuses .logo-marquee, but this section sits on white, so the edge fades
   have to match it rather than --ic-cloud. */
.sdg-marquee { margin: 6px 0 34px; }
.sdg-marquee::before { background: linear-gradient(90deg, #fff, transparent); }
.sdg-marquee::after  { background: linear-gradient(270deg, #fff, transparent); }
.sdg-marquee .lm-track { gap: 20px; animation-duration: 38s; }
.sdg-badge img {
    display: block;
    /* .lm-item img greys out and caps partner logos at 46px; the SDG tiles are
       official colour squares, so undo all three of those here. */
    max-height: none;
    filter: none;
    opacity: 1;
    width: 80px; height: 80px;
    border-radius: 12px;
    box-shadow: var(--shadow-sm);
    transition: transform .3s var(--ease), filter .3s var(--ease);
}
/* Every second tile runs mono, so the rail reads as a rhythm rather than a
   wall of colour. Hover restores the goal's own palette. */
.sdg-badge.is-mono img { filter: grayscale(1); }
.sdg-badge:hover img { filter: none; transform: translateY(-4px) scale(1.03); }

/* ------------------------------ 27z10. Conference history --------- */
/* A centre-spined timeline: editions alternate left and right of the rail on
   desktop and fall into a single column, rail on the left, below 900px. */
.hist-line {
    position: relative;
    max-width: 1060px;
    margin: 0 auto;
    padding: 6px 0;
}
.hist-line::before {
    content: '';
    position: absolute;
    top: 0; bottom: 0; left: 50%;
    width: 2px;
    margin-left: -1px;
    background: linear-gradient(180deg, transparent, var(--ic-line) 6%, var(--ic-line) 94%, transparent);
}
.hist-item {
    position: relative;
    width: 50%;
    padding-right: 52px;
    margin-bottom: 30px;
}
.hist-item.is-right { margin-left: 50%; padding-right: 0; padding-left: 52px; }

/* The node on the rail. */
.hist-item::before {
    content: '';
    position: absolute;
    top: 34px;
    right: -7px;
    width: 14px; height: 14px;
    border-radius: 50%;
    background: #fff;
    border: 3px solid var(--ic-brand);
    box-shadow: 0 0 0 4px rgba(var(--ic-brand-rgb), .12);
    z-index: 1;
}
.hist-item.is-right::before { right: auto; left: -7px; }

.hist-card {
    display: flex;
    gap: 16px;
    background: #fff;
    border: 1px solid var(--ic-line);
    border-radius: var(--radius-lg);
    padding: 16px;
    box-shadow: var(--shadow-sm);
    transition: transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s var(--ease);
}
.hist-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); border-color: rgba(var(--ic-brand-rgb), .3); }

/* `>` - the proceedings link carries an icon, not an img, but keep the habit. */
.hist-shot {
    flex: none;
    width: 112px; height: 112px;
    border-radius: var(--radius);
    overflow: hidden;
    background: var(--ic-cloud);
}
.hist-shot > img { display: block; width: 100%; height: 100%; object-fit: cover; }

.hist-body { min-width: 0; }
.hist-no {
    display: inline-block;
    font-family: var(--font-display);
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--ic-brand);
    margin-bottom: 6px;
}
.hist-title {
    font-family: var(--font-display);
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.35;
    color: var(--ic-navy);
    margin-bottom: 8px;
}
.hist-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 16px;
    font-size: .85rem;
    color: var(--ic-slate);
    margin-bottom: 10px;
}
.hist-meta i { color: var(--ic-brand); margin-right: 5px; }
.hist-pdf {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: var(--font-display);
    font-size: .86rem;
    font-weight: 600;
    color: var(--ic-brand);
}
.hist-pdf:hover { gap: 12px; color: var(--ic-navy); }

/* The upcoming edition closes the rail - navy, so it reads as "now". */
.hist-item.is-next .hist-card {
    background: linear-gradient(130deg, var(--ic-midnight), var(--ic-steel));
    border-color: transparent;
    color: rgba(255, 255, 255, .78);
}
.hist-item.is-next::before { border-color: var(--ic-azure); box-shadow: 0 0 0 5px rgba(var(--ic-azure-rgb), .18); }
.hist-item.is-next .hist-no { color: var(--ic-azure); }
.hist-item.is-next .hist-title { color: #fff; }
.hist-item.is-next .hist-meta { color: rgba(255, 255, 255, .7); }
.hist-item.is-next .hist-meta i { color: var(--ic-azure); }

/* A plain note on the rail - used where an edition is missing. */
.hist-gap {
    position: relative;
    width: 50%;
    padding-right: 52px;
    margin-bottom: 30px;
    font-size: .86rem;
    color: var(--ic-slate);
}
.hist-gap.is-right { margin-left: 50%; padding-right: 0; padding-left: 52px; }
.hist-gap p {
    background: var(--ic-cloud);
    border: 1px dashed var(--ic-line);
    border-radius: var(--radius);
    padding: 12px 16px;
    margin: 0;
}

@media (max-width: 899.98px) {
    .hist-line::before { left: 7px; }
    .hist-item,
    .hist-gap { width: 100%; padding-right: 0; padding-left: 34px; }
    .hist-item.is-right,
    .hist-gap.is-right { margin-left: 0; padding-left: 34px; }
    .hist-item::before,
    .hist-item.is-right::before { left: 0; right: auto; }
}
@media (max-width: 575.98px) {
    .hist-card { flex-direction: column; }
    .hist-shot { width: 100%; height: 150px; }
}

/* ---------- History collage ---------- */
/* Scattered prints. Everything inside is positioned as a percentage of a
   fixed-ratio box, so the overlaps survive every width instead of only the
   one they were drawn at. */
.hist-collage {
    position: relative;
    aspect-ratio: 1060 / 385;
    max-width: 1060px;
    margin: 0 auto 40px;
}
.hc-shot {
    position: absolute;
    margin: 0;
    padding: 8px;
    background: #fff;
    border-radius: 5px;
    box-shadow: 0 16px 36px rgba(4, 16, 34, .20);
    transition: transform .4s var(--ease), box-shadow .4s var(--ease);
}
/* `>` - the frame is the figure, so only its own photo should be sized. */
.hc-shot > img {
    display: block;
    width: 100%; height: 100%;
    object-fit: cover;
    border-radius: 2px;
    background: var(--ic-cloud);
}
/* Lift the print out of the pile on hover, straightening it as it comes. */
.hc-shot:hover { transform: translateY(-6px) rotate(0deg) scale(1.02); box-shadow: 0 24px 50px rgba(4, 16, 34, .28); z-index: 4; }

.hc-1 { left: 0;      top: 8%;  width: 34%;   height: 74%; transform: rotate(-2deg);   z-index: 1; }
.hc-2 { left: 31%;    top: 2%;  width: 23.5%; height: 88%; transform: rotate(1.4deg);  z-index: 2; }
.hc-3 { left: 44%;    top: 40%; width: 26.5%; height: 58%; transform: rotate(-1.2deg); z-index: 3; }
.hc-4 { right: 0;     top: 0;   width: 40.6%; height: 84%; transform: rotate(1deg);    z-index: 1; }

/* Below the phone break the overlaps stop working - too little width for
   anything to sit behind anything else - so the prints straighten out. */
@media (max-width: 575.98px) {
    .hist-collage {
        aspect-ratio: auto;
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 12px;
        margin-bottom: 30px;
    }
    .hc-shot,
    .hc-1, .hc-2, .hc-3, .hc-4 {
        position: static;
        left: auto; right: auto; top: auto;
        width: auto; height: 128px;
        transform: none;
        padding: 6px;
    }
}

/* ---------- History variant 2: PROCEEDINGS SHELF ---------- */
/* Portrait cover tiles. The whole tile is the anchor, so there is no separate
   button to aim at - the label at the foot is what a pointer reveals. */
.hist-shelf {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(208px, 1fr));
    gap: 24px;
}
.hs-book {
    position: relative;
    display: block;
    border-radius: 16px;
    overflow: hidden;
    background: var(--ic-midnight);
    box-shadow: var(--shadow);
    transition: transform .35s var(--ease), box-shadow .35s var(--ease);
}
.hs-book:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); }
.hs-cover { display: block; position: relative; aspect-ratio: 3 / 4; }
.hs-cover > img {
    display: block;
    width: 100%; height: 100%;
    object-fit: cover;
    transition: transform .6s var(--ease);
}
.hs-book:hover .hs-cover > img { transform: scale(1.05); }
/* The spine is what makes it read as a volume rather than a photo. */
.hs-spine {
    position: absolute;
    left: 0; top: 0; bottom: 0;
    width: 15px;
    background: linear-gradient(90deg, rgba(4, 16, 34, .85), rgba(4, 16, 34, .25));
    border-right: 1px solid rgba(255, 255, 255, .22);
}
.hs-veil {
    position: absolute;
    inset: 0;
    /* Several covers are bright at the foot (pale walls, projector screens),
       so the scrim has to be heavy where the caption sits. */
    background: linear-gradient(180deg, rgba(4, 16, 34, .10) 0%, rgba(4, 16, 34, .28) 38%, rgba(4, 16, 34, .82) 74%, rgba(4, 16, 34, .96) 100%);
}
.hs-year {
    position: absolute;
    top: 12px; right: 12px;
    font-family: var(--font-display);
    font-size: .74rem;
    font-weight: 700;
    letter-spacing: .06em;
    color: #fff;
    background: rgba(var(--ic-midnight-rgb), .72);
    border: 1px solid rgba(255, 255, 255, .22);
    border-radius: 30px;
    padding: 4px 11px;
    backdrop-filter: blur(6px);
}
.hs-body {
    position: absolute;
    left: 22px; right: 14px; bottom: 14px;
    display: grid;
    gap: 3px;
    color: rgba(255, 255, 255, .8);
}
.hs-ord {
    font-family: var(--font-display);
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--ic-azure);
}
.hs-name {
    font-family: var(--font-display);
    font-size: 1rem;
    font-weight: 600;
    color: #fff;
    line-height: 1.3;
}
.hs-city { font-size: .8rem; }
.hs-city i { margin-right: 5px; color: var(--ic-azure); }
/* Held back until hover on a pointer; always shown on touch, where there is
   no hover to reveal it. */
.hs-go {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin-top: 6px;
    font-family: var(--font-display);
    font-size: .78rem;
    font-weight: 600;
    color: #fff;
}
@media (hover: hover) {
    .hs-go { opacity: 0; transform: translateY(6px); transition: opacity .3s var(--ease), transform .3s var(--ease); }
    .hs-book:hover .hs-go { opacity: 1; transform: none; }
}
/* The two non-edition tiles. */
.hs-book.is-note {
    display: grid;
    place-items: center;
    aspect-ratio: 3 / 4;
    background: var(--ic-cloud);
    border: 1px dashed var(--ic-line);
    box-shadow: none;
}
.hs-book.is-note:hover { transform: none; box-shadow: none; }
.hs-book.is-note .hs-body { position: static; left: auto; right: auto; bottom: auto; padding: 20px; text-align: center; }
.hs-book.is-note .hs-ord { color: var(--ic-brand); }
.hs-book.is-note .hs-name { color: var(--ic-slate); font-size: .88rem; font-weight: 500; }
.hs-book.is-next { outline: 2px solid var(--ic-azure); outline-offset: 2px; }

/* ---------- History variant 3: YEAR FILMSTRIP ---------- */
.hist-rail-wrap { position: relative; }
.hist-rail {
    display: flex;
    gap: 20px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    padding: 4px 4px 16px;
    margin: 0 -4px;
}
.hr-card {
    flex: 0 0 300px;
    scroll-snap-align: start;
    display: flex;
    flex-direction: column;
    background: #fff;
    border: 1px solid var(--ic-line);
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
    transition: transform .3s var(--ease), box-shadow .3s var(--ease);
}
.hr-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.hr-shot { height: 158px; background: var(--ic-cloud); }
.hr-shot > img { display: block; width: 100%; height: 100%; object-fit: cover; }
.hr-body { position: relative; padding: 18px 20px 20px; flex: 1; }
/* Outlined, oversized and behind the copy - the year is the landmark. */
.hr-year {
    position: absolute;
    top: -14px; right: 14px;
    font-family: var(--font-display);
    font-size: 3.1rem;
    font-weight: 700;
    line-height: 1;
    color: transparent;
    -webkit-text-stroke: 1.5px rgba(var(--ic-brand-rgb), .22);
    pointer-events: none;
}
.hr-ord {
    display: block;
    font-family: var(--font-display);
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--ic-brand);
    margin-bottom: 6px;
}
.hr-title { font-family: var(--font-display); font-size: 1.05rem; font-weight: 600; color: var(--ic-navy); margin-bottom: 6px; }
.hr-city { font-size: .84rem; color: var(--ic-slate); margin-bottom: 12px; }
.hr-city i { color: var(--ic-brand); margin-right: 5px; }
.hr-pdf {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: var(--font-display);
    font-size: .84rem;
    font-weight: 600;
    color: var(--ic-brand);
}
.hr-pdf:hover { gap: 12px; }
.hr-card.is-note { background: var(--ic-cloud); border-style: dashed; box-shadow: none; flex: 0 0 250px; }
.hr-card.is-note:hover { transform: none; box-shadow: none; }
.hr-card.is-next { border-color: var(--ic-azure); box-shadow: 0 0 0 3px rgba(var(--ic-azure-rgb), .15); }
.hist-rail-hint {
    margin: 6px 0 0;
    font-size: .82rem;
    color: var(--ic-mute);
}
.hist-rail-hint i { margin-right: 7px; color: var(--ic-brand); }

/* ---------- History variant 4: ARCHIVE INDEX ---------- */
/* No photographs. A year sits in its own gutter with its editions beside it,
   which is how a library lists a series - and the only layout here that
   survives being printed. */
.hist-ledger { max-width: 1000px; margin: 0 auto; }
.hl-group {
    display: grid;
    grid-template-columns: 130px minmax(0, 1fr);
    gap: 0 24px;
    padding: 22px 0;
    border-top: 1px solid var(--ic-line);
}
.hl-group:last-child { border-bottom: 1px solid var(--ic-line); }
.hl-year {
    font-family: var(--font-display);
    font-size: 1.9rem;
    font-weight: 700;
    line-height: 1;
    color: var(--ic-navy);
    margin: 2px 0 0;
    position: sticky;
    top: 96px;
    align-self: start;
}
.hl-rows { margin: 0; }
.hl-row {
    display: grid;
    grid-template-columns: 54px minmax(0, 1fr) 180px 140px;
    align-items: baseline;
    gap: 6px 18px;
    padding: 12px 0;
}
.hl-row + .hl-row { border-top: 1px dashed var(--ic-line); }
.hl-ord {
    font-family: var(--font-display);
    font-size: .82rem;
    font-weight: 700;
    color: var(--ic-brand);
}
.hl-name { font-size: .94rem; color: var(--ic-ink); line-height: 1.45; }
.hl-city { font-size: .86rem; color: var(--ic-slate); }
.hl-pdf {
    justify-self: end;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: var(--font-display);
    font-size: .84rem;
    font-weight: 600;
    color: var(--ic-brand);
    white-space: nowrap;
}
.hl-pdf:hover { gap: 12px; }
.hl-pdf.is-muted { color: var(--ic-mute); font-weight: 500; }
.hl-row.is-note .hl-name { color: var(--ic-slate); font-style: italic; }
.hl-group.is-next .hl-year { color: var(--ic-brand); }
.hl-group.is-next .hl-name { font-weight: 600; }

@media (max-width: 991.98px) {
    .hl-row { grid-template-columns: 54px minmax(0, 1fr); }
    .hl-city, .hl-pdf { grid-column: 2; justify-self: start; }
}
@media (max-width: 767.98px) {
    .hl-group { grid-template-columns: 1fr; gap: 10px; }
    .hl-year { position: static; font-size: 1.5rem; }
    .hist-shelf { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 16px; }
    .hs-body { left: 20px; right: 12px; bottom: 12px; }
    .hs-name { font-size: .9rem; }
    .hr-card { flex-basis: 250px; }
}

/* ------------------------------ 27z8. Home page venue ------------- */
.venue-hero {
    position: relative;
    display: flex;
    align-items: flex-end;
    min-height: 470px;
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow);
    isolation: isolate;
}
/* Direct child only, so anything added to the copy is not blown up. */
.venue-hero > img {
    position: absolute;
    inset: 0;
    width: 100%; height: 100%;
    object-fit: cover;
    z-index: -2;
}
.venue-hero::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(to top, rgba(var(--ic-midnight-rgb), .92) 0%, rgba(var(--ic-midnight-rgb), .6) 45%, rgba(var(--ic-midnight-rgb), .1) 100%);
}
.vh-body {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 18px 30px;
    width: 100%;
    padding: 28px 32px;
}
.vh-facts { display: flex; flex-wrap: wrap; gap: 12px 28px; flex: 1; min-width: 260px; }
.vh-facts li {
    display: flex;
    align-items: center;
    gap: 10px;
    color: #fff;
    font-family: var(--font-display);
    font-size: .95rem;
    font-weight: 500;
}
.vh-facts i { color: var(--ic-azure); font-size: 1.05rem; }
.vh-body .btn { margin-left: auto; display: inline-flex; align-items: center; gap: 8px; }

.vh-label {
    display: block;
    margin: 34px 0 16px;
    font-family: var(--font-display);
    font-size: .7rem;
    font-weight: 600;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--ic-mute);
}
.venue-places { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 14px; }
.vp-tile {
    position: relative;
    display: block;
    border-radius: var(--radius);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
    isolation: isolate;
}
.vp-tile img {
    display: block;
    width: 100%;
    height: 132px;
    object-fit: cover;
    transition: transform .5s var(--ease);
}
.vp-tile:hover img { transform: scale(1.07); }
.vp-tile span {
    position: absolute;
    left: 0; right: 0; bottom: 0;
    padding: 22px 12px 10px;
    background: linear-gradient(to top, rgba(var(--ic-midnight-rgb), .92), transparent);
    color: #fff;
    font-family: var(--font-display);
    font-size: .78rem;
    font-weight: 600;
    line-height: 1.3;
}

/* ------------------------------ 27m. Help strip ------------------- */
.help-strip {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 20px;
    background: linear-gradient(120deg, var(--ic-navy), var(--ic-steel));
    border-radius: var(--radius-lg);
    padding: 28px 34px;
    color: rgba(255, 255, 255, .82);
    box-shadow: var(--shadow);
}
.help-strip > i {
    width: 54px; height: 54px;
    flex: none;
    display: grid; place-items: center;
    border-radius: 16px;
    background: rgba(var(--ic-azure-rgb), .18);
    color: var(--ic-azure);
    font-size: 1.4rem;
}
.help-strip p { flex: 1; min-width: 260px; font-size: .98rem; }
/* Inline links only - the button keeps its own white label. */
.help-strip a:not(.btn) { color: var(--ic-azure); }
.help-strip .btn { margin-left: auto; }

/* ------------------------------ 27. Reveal animation -------------- */
[data-reveal] {
    opacity: 0;
    transform: translateY(28px);
    transition: opacity .7s var(--ease), transform .7s var(--ease);
}
[data-reveal].is-visible { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
    * { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
    html, .tsl-rail { scroll-behavior: auto; }
    [data-reveal] { opacity: 1; transform: none; }
    .lm-track { animation: none; }
}

/* ------------------------------ 28. Responsive -------------------- */
@media (max-width: 1399.98px) {
    .mega-panel { width: min(700px, 94vw); }
    .mp-split { grid-template-columns: 270px 1fr; }
}

@media (max-width: 1199.98px) {
    .site-header .container { padding-top: 10px; padding-bottom: 10px; }
    .brand-logo { height: 48px; }
    .hero { min-height: auto; padding: 70px 0 60px; }
    .hero-card { margin-top: 12px; }
    /* The split screen stacks: panel first, then the photograph. */
    .hero-split { grid-template-columns: 1fr; }
    .hs-panel { padding: 60px 0; }
    .hsp-inner { max-width: none; padding: 0 var(--bs-gutter-x, 1.5rem); margin: 0 auto; width: min(100%, 720px); }
    .hs-photo { min-height: 340px; }
    .hero-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .dl-wrap { grid-template-columns: 1fr; }
    .dl-list { grid-template-columns: repeat(3, 1fr); }
    .dates-track { grid-template-columns: repeat(2, 1fr); row-gap: 48px; }
    .dates-track::before { display: none; }
    /* Five portrait cards get too narrow below 1200px. */
    .poster-wall { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

@media (max-width: 991.98px) {
    .section { padding: 64px 0; }
    .proof-grid { max-height: none; overflow: visible; }
    .dl-list { grid-template-columns: repeat(2, 1fr); }
    .conf-context { grid-template-columns: 1fr; }
    .form-aside { position: static; }
    .fp-actions { margin-left: 0; width: 100%; }
    .fp-actions .btn { flex: 1; }
    /* Summary drops below the tables and stops sticking. */
    .fees-layout { grid-template-columns: 1fr; gap: 28px; }
    .order-summary { position: static; }
    /* Two per row: the dash then follows every odd step, not every one. */
    .reg-instructions { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 34px 24px; }
    .ri-step:nth-child(2n)::after { display: none; }
    .reg-process { grid-template-columns: 1fr; gap: 30px; }
    .rp-visual { position: static; }
    /* Two per row: the arrow then follows every second step, not every third. */
    .journey-flow { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px 32px; }
    .journey-flow .jf-step:not(:nth-child(3n))::after,
    .journey-flow .jf-step:not(:nth-child(3n))::before { display: none; }
    .journey-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .journey-split { grid-template-columns: 1fr; gap: 32px; }
    .mp-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .mp-panel { padding: 8px 26px; }
    .jsp-intro { position: static; }
    /* The rail moves to the left edge and every step sits beside it. */
    .journey-timeline::before { left: 26px; }
    .jt-item, .jt-item.is-right { width: 100%; margin-left: 0; padding-left: 74px; justify-content: flex-start; }
    .jt-node, .jt-item.is-right .jt-node { left: 0; right: auto; }
    .jt-body, .jt-item.is-right .jt-body { text-align: left; }
    .pub-cta { padding: 28px; }
    .help-strip .btn { margin-left: 0; }
    .section-head { margin-bottom: 40px; }
    .scopus-band, .reviews-band, .subscribe-card { padding: 30px; }
    .sdg-row { grid-template-columns: 64px minmax(0, 1fr); row-gap: 12px; padding: 18px; }
    .sdg-head { display: none; }
    .sdg-goals { grid-column: 1 / -1; }
    .cta-band { background-attachment: scroll; }
    .cta-inner { justify-content: flex-start; }
    .footer-blurb { max-width: none; }
    .poster-wall { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .venue-places { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .venue-hero { min-height: 400px; }
    /* Feature panel above the list; five hairline columns become two rows. */
    .why-split { grid-template-columns: 1fr; gap: 26px; }
    .ws-feature { position: static; }
    .why-band { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 26px 0; }
    .wb-item:nth-child(odd) { border-left: 0; padding-left: 0; }
    .wb-item:last-child { padding-right: 26px; }
    .aim-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 767.98px) {
    .section { padding: 54px 0; }
    .hero-actions .btn, .cta-actions .btn { flex: 1 1 100%; }
    .hero-c-frame .hero-frame { padding: 26px 20px 24px; }
    .hero-ribbon { padding: 8px 16px; }
    .hero-strip { padding: 18px; gap: 14px; }
    .hero-strip .cd-cell { min-width: 0; flex: 1; }
    .hs-cells { width: 100%; }
    .hero-facts { grid-template-columns: 1fr; }
    .hsp-count { left: 16px; right: 16px; bottom: 16px; }
    .page-banner {
        width: min(100% - 24px, 1320px);
        margin-top: 14px;
        padding: 48px 0 44px;
        border-radius: var(--radius);
    }
    .sub-intro { flex-direction: column; gap: 16px; padding: 24px; }
    .form-card { padding: 24px 20px; }
    .upload-drop { flex-wrap: wrap; padding: 20px; }
    .ud-file { margin-left: 0; max-width: 100%; }
    .guide-head { margin: 38px 0 22px; font-size: 1.15rem; }
    .bank-row { grid-template-columns: 1fr; gap: 4px; padding: 14px 18px; }
    .coord-band { padding: 22px; }
    .coord-band .btn { margin-left: 0; width: 100%; }
    .pay-alert { padding: 18px 20px; }
    .deliverable { padding: 16px 18px; gap: 12px; }
    .dv-title { font-size: .9rem; }
    .threshold-card { padding: 22px; gap: 14px; }
    /* The timeline rail costs too much width on a phone - stack instead. */
    .ag-item { grid-template-columns: 1fr; gap: 8px; }
    .ag-item::before { display: none; }
    .ag-time { padding-top: 0; }
    .ag-body { padding: 18px 18px; }
    .day-tab { padding: 16px 18px; }
    .ag-speaker { flex-direction: column; gap: 12px; }
    .terms-panel { padding: 22px 20px; }
    .policy-item { padding: 18px 18px; gap: 12px; }
    .journey-flow { grid-template-columns: 1fr; gap: 32px; }
    .journey-cards { grid-template-columns: 1fr; }
    .jt-item, .jt-item.is-right { padding-left: 58px; }
    .jt-node, .jt-item.is-right .jt-node { width: 44px; height: 44px; font-size: 1rem; }
    .journey-timeline::before { left: 22px; }
    .jt-body, .jt-item.is-right .jt-body { padding: 18px 20px; }
    .jsp-step { padding: 16px 18px; gap: 14px; }
    .inquiry-band { padding: 22px; }
    .inquiry-band .btn { margin-left: 0; width: 100%; }
    .step-item .accordion-button { padding: 15px 16px; gap: 10px; font-size: .94rem; }
    .si-ico { display: none; }
    .step-item .accordion-body { padding: 2px 16px 18px; }
    .ethic-card { padding: 20px 18px; }
    .mp-grid { grid-template-columns: 1fr; }
    .mp-panel { padding: 6px 20px; }
    .mp-rules > li { gap: 14px; padding: 20px 0; }
    .mpr-no { font-size: 1.15rem; min-width: 32px; }
    .mp-item .accordion-button { padding: 14px 16px; font-size: .94rem; }
    .mp-item .accordion-body { padding: 2px 16px 18px; }
    .pub-quote { padding: 26px 22px; }
    .index-grid li { min-width: 140px; padding: 14px 20px; }
    .jf-mark { width: 76px; height: 76px; font-size: 1.7rem; }
    /* Single column: the dash becomes a vertical rule between steps. */
    .reg-instructions { grid-template-columns: 1fr; gap: 26px; }
    .ri-step:not(:last-child)::after,
    .ri-step:nth-child(2n)::after {
        display: block;
        top: auto;
        bottom: -26px;
        left: 50%;
        right: auto;
        width: 0;
        height: 26px;
        border-top: 0;
        border-left: 2px dashed rgba(var(--ic-navy-rgb), .22);
    }
    .ri-step:last-child::after { display: none; }
    .ri-mark { width: 64px; height: 64px; font-size: 1.5rem; }
    .committee-pending { padding: 22px; }
    .committee-pending .btn { margin-left: 0; width: 100%; }
    .venue-pending { padding: 20px; flex-direction: column; gap: 14px; }
    .venue-map { margin-top: 32px; }
    .venue-map iframe { height: 300px; }
    .pl-shot img, .pl-shot-blank { height: 190px; }
    /* Side-by-side is too narrow on a phone - stack the thumbnail on top. */
    .place-row { flex-direction: column; }
    .pr-shot { width: 100%; height: 180px; }
    .place-tile { min-height: 300px; }
    .contact-note { flex-direction: column; align-items: flex-start; gap: 10px; }
    .contact-map, .contact-map iframe { min-height: 300px; }
    /* The icon beside the copy is too tight below 768px. */
    .service-panel { flex-direction: column; padding: 26px 24px 28px; }
    .vol-req { flex-direction: column; gap: 14px; padding: 22px; }
    /* Stack the track rows; the image always leads. */
    /* .is-flipped must be matched with equal specificity or its two-column
       rule wins here and forces a 420px track into a 390px screen. */
    .track-row,
    .track-row.is-flipped { grid-template-columns: 1fr; gap: 24px; }
    .track-row.is-flipped .tr-shot { order: 0; }
    .track-feature { grid-template-columns: 1fr; }
    .tf-shot img { min-height: 220px; }
    .tf-body { padding: 26px 24px 30px; }
    .tf-title { font-size: 1.25rem; }
    /* A 200px thumbnail beside text is too narrow on a phone. */
    .track-split { flex-direction: column; }
    .ts-shot { width: 100%; height: 180px; }
    .track-tile { min-height: 340px; }
    /* The band gradient goes vertical once the copy sits over the whole image. */
    .track-band { min-height: 300px; align-items: flex-end; }
    .track-band::after {
        background: linear-gradient(to top, rgba(var(--ic-midnight-rgb), .95) 0%, rgba(var(--ic-midnight-rgb), .8) 40%, rgba(var(--ic-midnight-rgb), .25) 72%, rgba(var(--ic-midnight-rgb), .05) 100%);
    }
    .tb-body { padding: 24px 22px; max-width: none; }
    .tb-no { font-size: 1.8rem; }
    .tb-title { font-size: 1.2rem; }
    .tsl-slide { grid-template-columns: 1fr; min-height: 0; }
    .tsl-slide > img { height: 230px; min-height: 0; }
    .tsl-body { padding: 26px 22px 30px; }
    .tsl-title { font-size: 1.25rem; }
    .tsl-nav { width: 40px; height: 40px; top: 115px; }
    .tsl-thumb { width: 84px; height: 54px; }
    .ta-body { grid-template-columns: 1fr; gap: 20px; padding: 18px 16px 22px; }
    .ta-shot img { height: 190px; }
    .ta-head.accordion-button { gap: 12px; padding: 10px 14px; }
    .ta-thumb { width: 58px; height: 42px; }
    .ta-title { font-size: .92rem; }
    .poster-wall { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
    .rule-grid, .notice-grid { grid-template-columns: 1fr; }
    .rule-group { padding: 22px 20px; }
    /* A 130px number column wastes half a phone screen. */
    .cfp-row { grid-template-columns: 46px minmax(0, 1fr); gap: 12px; padding: 12px 16px; }
    .cfp-head { font-size: .64rem; letter-spacing: .1em; }
    .cfp-title a { font-size: .9rem; gap: 9px; }
    /* One column again; the top rule reverts to the first item only. */
    .cfp-ladder { grid-template-columns: 1fr; gap: 14px; }
    .cfp-ladder a { gap: 16px; padding: 16px 16px; }
    .cl-num { width: 48px; font-size: 1.8rem; }
    .cl-title { font-size: .96rem; }
    .cl-go { display: none; }
    .cc-pill { font-size: .86rem; padding: 9px 16px 9px 9px; }
    .ccp-no { width: 26px; height: 26px; font-size: .74rem; }
    .cfp-tickets { grid-template-columns: 1fr; }
    .ct-stub { width: 74px; }
    .cts-no { font-size: 1.5rem; }
    /* Side by side becomes stacked; the divider moves above the second set. */
    .guide-split { grid-template-columns: 1fr; gap: 40px; }
    .guide-split > .guide-col + .guide-col {
        padding-left: 0;
        margin-left: 0;
        border-left: 0;
        padding-top: 40px;
        border-top: 1px solid var(--ic-line);
    }
    .gc-title { font-size: 1.25rem; }
    /* The rail goes above the panel and scrolls sideways. */
    .guide-tabs { grid-template-columns: 1fr; gap: 16px; }
    .gt-rail {
        position: static;
        grid-auto-flow: column;
        grid-auto-columns: minmax(150px, auto);
        overflow-x: auto;
        padding-bottom: 6px;
    }
    .gt-tab { border-color: var(--ic-line); background: #fff; }
    .gt-label { font-size: .86rem; }
    .gt-count { display: none; }
    .gt-panels { padding: 24px 20px 26px; min-height: 0; }
    .gd-rules > li, .gd-sub li { gap: 10px; }
    .gd-ref { width: 38px; }
    .gd-sub .gd-ref { width: 44px; }
    .gd-heading { font-size: 1.1rem; }
    .track-actions { flex-direction: column; }
    .track-actions .btn { width: 100%; justify-content: center; }
    .sd-shot img { height: 260px; }
    .sd-title { font-size: 1.4rem; }
    .sd-objective { flex-direction: column; gap: 12px; padding: 18px; }
    .sdg-card { width: 100%; padding: 16px 18px; }
    .core-list { grid-template-columns: 1fr; }
    .outcome-band { flex-direction: column; gap: 16px; padding: 24px 22px; }
    /* Three columns collapse to a stack; the "all tracks" link leads. */
    .track-nav { grid-template-columns: 1fr; }
    .tn-all { order: -1; justify-content: center; }
    .tn-next { justify-content: flex-start; text-align: left; flex-direction: row-reverse; }
    .track-row + .track-row { margin-top: 40px; padding-top: 40px; }
    .tr-shot img { height: 220px; }
    .vol-close { flex-direction: column; gap: 16px; padding: 26px 22px; }
    .vol-deadline { padding: 20px 22px; }
    .vol-deadline .btn { margin-left: 0; width: 100%; }
    .about-columns { column-count: 1; }
    .about-editorial { grid-template-columns: 1fr; gap: 30px; }
    .ae-side { position: static; }
    .reason-list { grid-template-columns: 1fr; }
    .reason-tiles { grid-template-columns: 1fr; }
    .reasons-is-feature .row > .col-lg-5 { position: static; }
    .about-banner figcaption { padding: 40px 22px 20px; }
    .lead-band { padding: 24px; }
    .lead-band .btn { width: 100%; }
    .offer-card { padding: 26px 22px; }
    .oc-ribbon { position: static; display: inline-flex; margin-bottom: 14px; }
    .next-grid { grid-template-columns: 1fr; }
    .fees-pending { padding: 22px; }
    .offer-modal .modal-footer { flex-direction: column; align-items: stretch; }
    .offer-modal .modal-footer .btn { width: 100%; }
    .rp-step { padding: 16px 18px; gap: 14px; }
    .rps-num { min-width: 26px; font-size: 1.1rem; }
    .rp-step:not(:last-child) .rps-num::after { left: 7px; }
    .rp-caption { left: 16px; right: 16px; bottom: 16px; font-size: .84rem; }
    .rp-count { width: 48px; height: 48px; font-size: 1.4rem; }
    .rule-666 { padding: 22px 20px; }
    .mode-stat span { font-size: .84rem; padding: 8px 14px; }
    .faq-item .accordion-button { padding: 16px 16px; font-size: .94rem; }
    .faq-item .accordion-body { padding: 4px 16px 20px; }
    .fi-ico { display: none; }
    .criteria-list li { flex-direction: column; gap: 2px; }
    .eval-flow li { gap: 14px; }
    .eval-flow li:not(:last-child)::before { left: 23px; top: 52px; }
    .ef-node { width: 48px; height: 48px; font-size: 1.1rem; }
    .ef-body { padding: 16px 18px; }
    .submit-band, .help-strip { padding: 24px; }
    .form-actions { gap: 12px; }
    .form-actions .btn { width: 100%; }
    .hero-meta { gap: 10px 18px; }
    .hero-card { padding: 24px 20px; }
    .hc-countdown { gap: 8px; }
    .cd-cell { padding: 11px 4px; }
    .dl-wrap { padding: 24px; }
    .dl-list { grid-template-columns: 1fr 1fr; }
    .dl-lead h2 { font-size: 1.15rem; }
    .gallery-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
    .lb-close { top: 12px; right: 12px; }
    .lb-nav { width: 42px; height: 42px; }
    .lb-prev { left: 8px; }
    .lb-next { right: 8px; }
    .float-whatsapp span { display: none; }
    .float-whatsapp { padding: 14px; border-radius: 50%; }
    .footer-bottom { justify-content: center; text-align: center; }

    /* No room for a centred pill between the two round buttons on a phone,
       so the pair becomes a full-width bar along the bottom edge and the
       WhatsApp / back-to-top buttons ride above it. */
    .float-cta {
        left: 0; right: 0; bottom: 0;
        transform: translateY(100%);
        gap: 8px;
        padding: 10px 12px calc(10px + env(safe-area-inset-bottom));
        border-radius: 18px 18px 0 0;
        border-width: 1px 0 0;
    }
    .float-cta.is-visible { transform: none; }
    .fc-btn { flex: 1; justify-content: center; padding: 11px 10px; font-size: .86rem; }
    .float-whatsapp, .back-to-top { bottom: 86px; }
    /* Keep the footer's last line clear of the bar. */
    body { padding-bottom: 70px; }
}

@media (max-width: 575.98px) {
    .dates-track { grid-template-columns: 1fr; }
    .dl-list { grid-template-columns: 1fr; }
    .aim-grid { grid-template-columns: 1fr; }
    .aim-cell { padding: 22px 20px; }
    .subscribe-card, .scopus-band, .reviews-band { padding: 24px 20px; }
    .hero-title .ht-brand { font-size: clamp(2.1rem, 12vw, 3rem); }
    .sdg-chip { font-size: .74rem; }
    /* One review to a page on a phone. */
    .review-card { flex-basis: 100%; margin-right: 0; }
    .rc-text { max-height: 240px; }
    .sdg-marquee .lm-track { gap: 14px; }
    .venue-places { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
    .vp-tile img { height: 110px; }
    .venue-hero { min-height: 340px; }
    .vh-body { padding: 22px 20px; }
    .vh-body .btn { margin-left: 0; width: 100%; justify-content: center; }
    /* Single column: the dividing rules become stacked spacing. */
    .why-band { grid-template-columns: 1fr; gap: 24px; }
    .wb-item { border-left: 0; padding: 0 0 20px; border-bottom: 1px solid var(--ic-line); }
    .wb-item:last-child { border-bottom: 0; padding-bottom: 0; padding-right: 0; }
    .why-strip { padding: 24px 22px; }
    .wst-head { flex-direction: column; align-items: flex-start; gap: 14px; }
    .wst-points { grid-template-columns: 1fr; }
    .ws-reasons li { padding: 18px; gap: 13px; }
    .ws-feature { padding: 26px 22px; }
}

/* Theme label above the conference theme, in the banner. The centred hero
   variants have no left rule, so the label is centred with the line. */
.hero-theme .theme-tag {
    display: block;
    margin-bottom: 5px;
    font-family: var(--font-display);
    font-size: .72rem;
    font-weight: 700;
    font-style: normal;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--ic-azure);
}

/* ------------------------------------------------------------------
   Hero (centered variant): the pill moves from the hybrid badge to the
   theme line.

   The badge keeps its text and icon but loses its chrome, and the theme
   line takes over the tinted capsule - same azure fill and hairline the
   badge used, so the look is moved rather than re-invented.

   These come last in the file on purpose: they have to land after
   .hero-is-centered .hero-theme (which zeroes the left rule) and after
   .hero-theme .theme-tag (which sets it to block). Scoped to the live
   variant so the other four heroes keep their left-rule treatment.
   ------------------------------------------------------------------ */
.hero-is-centered .hero-badge {
    background: transparent;
    border-color: transparent;
    padding-inline: 0;
}

.hero-is-centered .hero-theme {
    /* inline-block so the capsule hugs its text; the hero centres it */
    display: inline-block;
    max-width: none;
    margin-inline: 0;
    padding: 9px 24px;
    border: 1px solid rgba(var(--ic-azure-rgb), .34);
    border-radius: 40px;
    background: rgba(var(--ic-azure-rgb), .14);
}

/* Label and theme on one line, rather than the label stacked above it. */
.hero-is-centered .hero-theme .theme-tag {
    display: inline;
    margin: 0 9px 0 0;
}