/* three properties the lifted rules below still reference. They lived in
   style.css's :root; the rest of that file's variables went with it. */
:root {
    --black: #000;
    --white: #fff;
    --font-primary: "Plus Jakarta Sans", "Inter", "Segoe UI", sans-serif;
}


/* =====================================================
   TEMPLATE BASE (lifted out of assets/css/style.css)
   style.css was 6,424 lines of which the site used about a dozen
   rules: the bare element resets, which nothing else restates, and
   the hero. They are inlined here so the template sheet no longer
   has to be downloaded on every page.
   ===================================================== */
html {
  overflow-x: hidden;
}
body {
  font-family: var(--font-primary);
  margin: auto;
  font-size: clamp(13px, 0.84vw, 16px);
  /* position: fixed dropped - the template set it and icset.css had to
     undo it for the page to scroll at all */
}
a,
button,
img,
svg path {
  transition: 0.4s ease;
}
img {
  max-width: 100%;
}
a {
  text-decoration: none;
  display: inline-block;
  color: var(--black);
}
a:hover {
  color: var(--ul-primary);
}
i {
  display: inline-flex;
}
p {
  line-height: 1.75;
}
ul {
  padding: 0;
  margin: 0;
  list-style: none inside;
}
input {
  background-color: transparent;
}
input:focus, input:focus-visible, input:focus-within {
  outline: none;
}
/* Chrome, Safari, Edge, Opera */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
/* clears the ‘X’ from Chrome */
input[type=search]::-webkit-search-decoration,
input[type=search]::-webkit-search-cancel-button,
input[type=search]::-webkit-search-results-button,
input[type=search]::-webkit-search-results-decoration {
  display: none;
}
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
  color: var(--black) !important;
  -webkit-text-fill-color: var(--black) !important;
  -webkit-box-shadow: 0 0 0 1000px transparent inset !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
}
button {
  background: none;
  border: none;
}
.wow {
  animation-duration: 1s !important;
}
@media screen and (max-width: 991px) {
}
@media screen and (max-width: 991px) {
    .ul-header-megamenu.active {
        margin-top: 15px;
    }
}
.ul-banner {
  background: var(--ul-gradient);
  color: var(--white);
  padding: 0 15px;
  padding-top: clamp(120px, 10.51vw, 200px);
  text-align: center;
  position: relative;
  z-index: 1;
  padding-bottom: clamp(0px, 26.96vw, 513px);
}

@media screen and (max-width: 479px) {
    .ul-banner {
        padding-bottom: clamp(130px, 26.96vw, 513px);
    }
}
.ul-banner::before {
  content: "";
  position: absolute;
  inset: 0;
  background: url(../img/banner-bg-shape.svg) no-repeat center center/cover;
  z-index: -1;
  mix-blend-mode: multiply;
}
.ul-banner-sub-title {
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 999px;
  padding: clamp(6px, 0.47vw, 9px) clamp(13px, 0.84vw, 16px);
  display: inline-flex;
  align-items: center;
  font-weight: 700;
  margin-bottom: clamp(7px, 0.63vw, 12px);
}
.ul-banner-sub-title::before {
  content: "";
  background: url(../img/banner-sub-title-icon.svg) no-repeat center center/cover;
  display: inline-block;
  width: clamp(15px, 1.05vw, 20px);
  height: clamp(13px, 0.95vw, 18px);
  margin-right: clamp(5px, 0.53vw, 10px);
}
.ul-banner-title {
  font-size: clamp(25px, 3.68vw, 70px);
  color: var(--white);
  font-weight: 800;
  max-width: clamp(300px, 55.6vw, 1058px);
  margin: auto;
  margin-bottom: clamp(8px, 0.84vw, 16px);
}

@media screen and (max-width: 767px) {
    .ul-banner-title {
        max-width: 100%;
    }
}
.ul-banner-vectors img {
  position: absolute;
  z-index: 2;
}
.ul-banner-vectors .vector-1 {
  left: clamp(350px, 37.62vw, 716px);
  bottom: clamp(68px, 5.68vw, 108px);
  max-width: clamp(88px, 9.35vw, 178px);
}

@media screen and (max-width: 991px) {
    .ul-banner-vectors .vector-1 {
        display: none;
    }
}
.ul-banner-vectors .vector-2 {
  right: clamp(25px, 2.63vw, 50px);
  bottom: clamp(15px, 12.09vw, 230px);
  max-width: clamp(295px, 31vw, 590px);
}

@media screen and (max-width: 991px) {
    .ul-banner-vectors .vector-2 {
        display: none;
    }
}
.ul-banner-stats {
  display: flex;
  position: absolute;
  bottom: clamp(28px, 3.05vw, 58px);
  right: 0;
}

@media screen and (max-width: 1199px) {
    .ul-banner-stats {
        position: static;
        justify-content: center;
        padding: 30px 15px;
    }
}

@media screen and (max-width: 767px) {
    .ul-banner-stats {
        flex-wrap: wrap;
        gap: 20px 0;
    }
}
.ul-banner-stat {
  text-align: left;
  padding-right: clamp(30px, 3.42vw, 65px);
  margin-right: clamp(30px, 3.42vw, 65px);
  border-right: 1px solid rgba(255, 255, 255, 0.2);
}

@media screen and (max-width: 479px) {
    .ul-banner-stat {
        padding-right: 10px;
        margin-right: 10px;
        flex-grow: 1;
    }
}
.ul-banner-stat:last-child {
  border-right: none;
  padding-right: 0;
}
.ul-banner-stat-number {
  font-weight: 700;
  font-size: clamp(20px, 1.26vw, 24px);
  line-height: 0.7;
  margin-bottom: 5px;
  display: block;
}
.ul-banner-stat-text {
  color: rgba(255, 255, 255, 0.6);
  font-size: 14px;
  font-weight: 400;
}
@media screen and (max-width: 767px) {
}
/* =====================================================
   ICSET-2027 / SustainEdTech 2027 - site styles
   Loaded after bootstrap 5.3 + the template style.css,
   so it overrides both.
   ===================================================== */

/* ---------- palette: SustainEdTech 2027 design system ----------
   Core Navy #00203F | Neon Mint #36ECDE | Soft Gray #E6E9EC
   White #FFFFFF | Graphite Black #2F2F2F
   ---------------------------------------------------------------- */
:root {
    /* brand */
    --navy: #00203F;
    --navy-2: #01335A;
    --mint: #36ECDE;
    --mint-hover: #29D2C5;
    --soft-gray: #E6E9EC;
    --graphite: #2F2F2F;
    --surface: #FFFFFF;
    --surface-alt: #F9FBFC;
    --surface-tint: #F6FAFB;
    --border-line: #D8DEE3;
    --text-subhead: #DCE4EA;
    --text-muted: #666666;

    /* status */
    --success: #2ECC71;
    --warning: #F4B400;
    --info: #36ECDE;
    --error: #E53935;

    /* template variables, re-pointed to the ICSET theme */
    --ul-primary: #00203F;
    --ul-secondary: #01335A;
    --ul-gradient: linear-gradient(180deg, #00203F 0%, #01335A 100%);
    --ul-2-primary: #36ECDE;
    --ul-c3: #E6E9EC;
    --ul-c4: #00203F;
    --ul-c5: #01335A;

    /* semantic aliases used through this file */
    --color-primary: #00203F;
    --color-secondary: #01335A;
    --color-accent: #36ECDE;
    --color-mint: #36ECDE;
    --color-ink: #00203F;
    --color-body: #2F2F2F;
    --color-dark: #00203F;
    --color-light: #E6E9EC;
    --gradient: linear-gradient(160deg, #00203F 0%, #01335A 100%);
    --gradient-flip: linear-gradient(160deg, #01335A 0%, #00203F 100%);
    --shadow-soft: 0 24px 60px rgba(0, 32, 63, .10);
    --shadow-hard: 0 30px 70px rgba(0, 32, 63, .20);
    --radius: 24px;

    /* type stack */
    --font-head: "Manrope", "Segoe UI", sans-serif;
    --font-body: "Inter", "Segoe UI", sans-serif;
    --font-btn: "Manrope", "Segoe UI", sans-serif;
    --font-num: "Space Grotesk", "Manrope", sans-serif;
}

/* the template pins the body while its preloader runs - keep it scrollable */
body {
    position: static;
    font-family: var(--font-body);
    font-size: 16px;
    color: var(--color-body);
    background: #fff;
    /* "clip" contains the overflow without creating a scroll container,
       so position: sticky still works inside. "hidden" is the fallback
       for browsers that do not know clip. */
    overflow-x: hidden;
    overflow-x: clip;
}

/* style.css sets overflow-x: hidden on html, which breaks sticky too */
html {
    overflow-x: hidden;
    overflow-x: clip;
    scroll-behavior: smooth;
}

/* =====================================================
   SCROLLBAR
   A 6px mint-to-navy line, no stepper arrows, brand palette.
   ===================================================== */

/* Firefox, and any engine without the WebKit pseudo-elements.
   Deliberately scoped: Chrome throws away every ::-webkit-scrollbar rule
   on an element that also sets scrollbar-width/scrollbar-color, and its
   own "thin" is around 11px - wider than the line we want, with the
   platform stepper arrows still attached. */
@supports not selector(::-webkit-scrollbar) {
    html {
        scrollbar-width: thin;
        scrollbar-color: var(--mint) rgba(0, 32, 63, .07);
    }
}

/* WebKit / Blink - a 6px line. NB: 4x is not a length; the old value
   here was dropped as invalid, which is why the bar came back native. */
::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

::-webkit-scrollbar-track {
    background: rgba(0, 32, 63, .06);
    border-radius: 999px;
}

/* no transparent border at this width - it would eat the whole thumb */
::-webkit-scrollbar-thumb {
    border-radius: 999px;
    background: linear-gradient(180deg, var(--mint) 0%, var(--navy-2) 100%);
    transition: background .3s ease;
}

::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(180deg, var(--mint-hover) 0%, var(--navy) 100%);
}

::-webkit-scrollbar-corner {
    background: transparent;
}

/* no stepper arrows at the ends - just the line */
::-webkit-scrollbar-button,
::-webkit-scrollbar-button:single-button,
::-webkit-scrollbar-button:start:decrement,
::-webkit-scrollbar-button:end:increment,
::-webkit-scrollbar-button:vertical:start:increment,
::-webkit-scrollbar-button:vertical:end:decrement,
::-webkit-scrollbar-button:horizontal:start:increment,
::-webkit-scrollbar-button:horizontal:end:decrement {
    display: none;
    width: 0;
    height: 0;
    -webkit-appearance: none;
    appearance: none;
    background: transparent;
}

/* on dark surfaces the track inverts so the thumb stays visible */
.section-dark ::-webkit-scrollbar-track,
.site-footer ::-webkit-scrollbar-track,
.icset-offcanvas ::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, .08);
}

section[id] {
    scroll-margin-top: 110px;
}

/* =====================================================
   TYPOGRAPHY
   Headings ......... Manrope Bold (700)
   Body ............. Inter
   Buttons .......... Manrope SemiBold (600)
   Numbers & stats .. Space Grotesk
   ===================================================== */
body,
p,
li,
dd,
dt,
td,
th,
label,
blockquote,
figcaption,
input,
textarea,
select {
    font-family: var(--font-body);
}

h1,
h2,
h3,
h4,
h5,
h6,
.ul-banner-title {
    font-family: var(--font-head);
    font-weight: 700;
    letter-spacing: -.01em;
}

.icset-btn {
    font-family: var(--font-btn);
    font-weight: 600;
}

/* figures, counters, dates - Space Grotesk with tabular figures */
.ul-banner-stat-number {
    font-family: var(--font-num);
    font-feature-settings: "tnum" 1;
    font-variant-numeric: tabular-nums;
}

.skip-link {
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: 2000;
    background: var(--color-ink);
    color: #fff;
    padding: 12px 20px;
    border-radius: 0 0 12px 0;
}

.skip-link:focus {
    left: 0;
    color: #fff;
}

/* =====================================================
   HEADER / NAVBAR (Bootstrap 5.3)
   ===================================================== */
.icset-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1030;
    /* the ribbon supplies the top space at rest; once it folds away the
       scrolled rule below restores the original 10px band */
    padding: 0 0 20px;
    transition: padding .35s ease;
}

.icset-header.scrolled {
    padding: 10px 0;
}

.icset-header-container {
    max-width: clamp(0px, 92.64vw, 1763px);
    width: 100%;
    margin: 0 auto;
    padding: 0 15px;
}

/* navigation sits on Core Navy with white links (design system) */
.icset-navbar {
    background: var(--navy);
    border-radius: 999px;
    padding: 10px 14px 10px 22px;
    border: 1px solid rgba(54, 236, 222, .18);
    box-shadow: 0 18px 45px rgba(0, 32, 63, .28);
    transition: box-shadow .35s ease, border-radius .35s ease;
}

.icset-header.scrolled .icset-navbar {
    box-shadow: 0 14px 34px rgba(0, 32, 63, .45);
}

/* brand: the logo sits on a white plate so its own colours stay readable
   against the Core Navy bar */
.icset-navbar .navbar-brand {
    display: inline-flex;
    align-items: center;
    padding: 7px 14px;
    margin-right: 10px;
    background: #fff;
    border-radius: 14px;
    box-shadow: 0 8px 20px rgba(0, 32, 63, .18);
    transition: transform .3s ease;
}

.icset-navbar .navbar-brand:hover {
    transform: translateY(-2px);
}

.icset-navbar .navbar-brand img {
    display: block;
    width: auto;
    height: clamp(34px, 2.6vw, 40px);
}

/* white toggler icon on the navy bar */
.icset-navbar .navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255,255,255,0.85%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

/* nav pills */
.icset-navbar .navbar-nav {
    gap: 6px;
    align-items: center;
}

.icset-navbar .nav-link {
    position: relative;
    padding: .6rem 1.1rem;
    border: none;
    background: none;
    font-family: var(--font-head);
    font-weight: 700;
    font-size: 15px;
    color: #fff;
    transition: color .3s ease;
}

/* animated underline for hover / active */
.icset-navbar .nav-link::before {
    content: "";
    position: absolute;
    left: 1.1rem;
    right: 1.1rem;
    bottom: .35rem;
    height: 2px;
    border-radius: 2px;
    background: var(--mint);
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform .35s cubic-bezier(.22, .61, .36, 1);
}

.icset-navbar .nav-link:hover,
.icset-navbar .nav-link:focus,
.icset-navbar .nav-link.active,
.icset-navbar .nav-item.show > .nav-link {
    color: var(--mint);
}

.icset-navbar .nav-link:hover::before,
.icset-navbar .nav-link:focus::before,
.icset-navbar .nav-link.active::before,
.icset-navbar .nav-item.show > .nav-link::before {
    transform: scaleX(1);
}

.icset-navbar .dropdown-toggle::after {
    margin-left: .45em;
    vertical-align: .15em;
}

/* no focus rectangle around an opened menu - the gradient underline above
   already marks the focused item */
.icset-navbar .nav-link:focus,
.icset-navbar .nav-link:focus-visible,
.icset-navbar .navbar-brand:focus,
.icset-navbar .navbar-brand:focus-visible,
.icset-navbar .dropdown-item:focus,
.icset-navbar .dropdown-item:focus-visible,
.icset-navbar .dropdown-menu:focus,
.offcanvas-closer:focus,
.offcanvas-closer:focus-visible {
    outline: 0;
    box-shadow: none;
}

.icset-navbar .dropdown-menu {
    border: none;
    border-radius: 18px;
    padding: 10px;
    margin-top: 10px;
    box-shadow: 0 24px 60px rgba(0, 32, 63, .18);
    min-width: 250px;
    max-width: 320px;
}

.icset-navbar .dropdown-item {
    white-space: normal;
    line-height: 1.45;
}

/* the last dropdown must not spill off the right edge */
.icset-navbar .nav-item.dropdown:last-child .dropdown-menu {
    right: 0;
    left: auto;
}

/* Dropdown open/close is driven by Bootstrap only (see icset.js), so exactly
   one menu can carry .show at a time - CSS just animates that state. */
@media (min-width: 992px) {
    .icset-navbar .dropdown-menu {
        display: block;
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        transform: translateY(12px);
        transition: opacity .28s ease, transform .28s ease, visibility .28s;
    }

    .icset-navbar .dropdown-menu::before {
        /* hover bridge so the pointer can travel into the menu */
        content: "";
        position: absolute;
        left: 0;
        right: 0;
        top: -14px;
        height: 14px;
    }

    .icset-navbar .dropdown-menu.show {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
        transform: translateY(0);
    }
}

.icset-navbar .dropdown-item {
    border-radius: 12px;
    padding: 10px 14px;
    font-weight: 600;
    font-size: 15px;
    color: var(--color-ink);
}

.icset-navbar .dropdown-item:hover,
.icset-navbar .dropdown-item:focus,
.icset-navbar .dropdown-item.active {
    background: rgba(54, 236, 222, .12);
    color: var(--color-primary);
}

/* CTA - styling comes from .icset-btn--solid, this only handles placement */
.header-cta {
    flex-shrink: 0;
}

/* toggler */
.icset-navbar .navbar-toggler {
    border: 1px solid rgba(0, 32, 63, .18);
    border-radius: 14px;
    padding: 8px 12px;
}

.icset-navbar .navbar-toggler:focus {
    box-shadow: 0 0 0 .2rem rgba(54, 236, 222, .25);
}

/* desktop: the offcanvas is just inline nav content */
@media (min-width: 992px) {
    .icset-navbar .offcanvas-lg {
        flex-grow: 1;
    }

    .icset-navbar .offcanvas-lg .offcanvas-body {
        width: 100%;
        align-items: center;
    }
}

/* ---------- mobile drawer (Bootstrap offcanvas, slides right to left) ---------- */
.icset-offcanvas .offcanvas-header {
    align-items: center;
    padding: 22px 22px 18px;
    border-bottom: 1px solid rgba(0, 32, 63, .08);
}

.offcanvas-closer {
    width: 44px;
    height: 44px;
    flex-shrink: 0;
    border: none;
    border-radius: 50%;
    background: var(--gradient);
    color: #fff;
    font-size: 26px;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 12px 26px rgba(0, 32, 63, .3);
    transition: transform .3s ease, background .3s ease;
}

.offcanvas-closer:hover,
.offcanvas-closer:focus {
    background: var(--gradient-flip);
    transform: rotate(90deg);
}

@media (max-width: 991.98px) {
    .icset-navbar {
        border-radius: 26px;
        padding: 12px 16px;
    }

    .icset-offcanvas.offcanvas-lg {
        --bs-offcanvas-width: min(86vw, 380px);
        --bs-offcanvas-transition: transform .45s cubic-bezier(.22, .61, .36, 1);
        border: none;
        box-shadow: -20px 0 60px rgba(0, 32, 63, .25);
    }

    /* the drawer is already a white surface - the plate is not needed */
    .icset-offcanvas .navbar-brand {
        padding: 0;
        background: none;
        box-shadow: none;
    }

    .icset-offcanvas .offcanvas-body {
        display: flex;
        flex-direction: column;
        padding: 8px 22px 28px;
    }

    .icset-offcanvas .navbar-nav {
        gap: 0;
        align-items: stretch;
        width: 100%;
    }

    .icset-offcanvas .nav-item {
        border-bottom: 1px solid rgba(0, 32, 63, .1);
    }

    .icset-offcanvas .nav-link {
        position: relative;
        border: none;
        border-radius: 0;
        background: none;
        box-shadow: none;
        padding: 16px 34px 16px 0;
        font-size: 17px;
        color: var(--color-ink);
    }

    .icset-offcanvas .nav-link.active,
    .icset-offcanvas .nav-item.show > .nav-link {
        background: none;
        color: var(--color-secondary);
        box-shadow: none;
    }

    /* the drawer has no underline - the row divider does that job */
    .icset-offcanvas .nav-link::before,
    .icset-offcanvas .nav-link:hover::before,
    .icset-offcanvas .nav-link.active::before,
    .icset-offcanvas .nav-item.show > .nav-link::before {
        content: none;
        display: none;
    }

    /* "+" / "-" expander replaces the desktop caret (::after, so it can never
       collide with the underline that lives on ::before) */
    .icset-offcanvas .dropdown-toggle::after {
        content: "+";
        position: absolute;
        right: 4px;
        top: 50%;
        transform: translateY(-50%);
        width: auto;
        height: auto;
        margin: 0;
        border: 0;
        vertical-align: baseline;
        font-size: 22px;
        font-weight: 500;
        line-height: 1;
        color: var(--color-secondary);
    }

    .icset-offcanvas .nav-item.show .dropdown-toggle::after {
        content: "\2013";
    }

    .icset-offcanvas .dropdown-menu {
        position: static !important;
        transform: none !important;
        float: none;
        width: 100%;
        margin: 0 0 10px;
        padding: 4px 0 4px 6px;
        border: none;
        box-shadow: none;
        background: transparent;
    }

    .icset-offcanvas .dropdown-item {
        padding: 10px 12px;
        font-size: 15px;
        color: var(--color-body);
    }

    .header-cta {
        margin-top: 26px;
        width: 100%;
        justify-content: center;
        height: 52px;
    }
}

/* =====================================================
   BANNER tweaks
   ===================================================== */
.ul-banner-title {
    font-family: var(--font-head);
    letter-spacing: -.015em;
}

.ul-banner-sub-title {
    font-family: var(--font-head);
    max-width: min(92vw, 720px);
    text-align: center;
    line-height: 1.45;
}

/* participation note under the theme */
.ul-banner-descr {
    max-width: clamp(300px, 46vw, 720px);
    margin: 0 auto;
    color: var(--text-subhead);
    font-size: clamp(14px, 1.05vw, 17px);
    line-height: 1.7;
}

/* host credit under the buttons */
.ul-banner-host {
    margin: clamp(22px, 2vw, 34px) 0 0;
    font-size: 14px;
    letter-spacing: .04em;
    color: rgba(255, 255, 255, .68);
}

.ul-banner-host strong {
    font-family: var(--font-head);
    font-weight: 700;
    color: #fff;
}

.ul-banner-stat-text {
    font-family: var(--font-body);
}

/* =====================================================
   BUTTONS - one reusable system for the whole site
   -----------------------------------------------------
   <a class="icset-btn icset-btn--solid">Primary</a>
   <a class="icset-btn icset-btn--ghost">Secondary</a>

   modifiers:  .on-dark   use on a dark/gradient background
               .icset-btn--lg / --sm   size
               .icset-btn-group        wraps a row of buttons
   ===================================================== */
.icset-btn-group {
    display: flex;
    flex-wrap: wrap;
    gap: clamp(10px, .9vw, 16px);
}

.icset-btn-group.is-centered {
    justify-content: center;
}

.icset-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 15px 30px;
    border: none;
    border-radius: 999px;
    font-family: var(--font-btn);
    font-weight: 600;
    font-size: 15px;
    line-height: 1;
    white-space: nowrap;
    cursor: pointer;
    transition: transform .3s ease, box-shadow .35s ease, background .35s ease, color .35s ease;
}

.icset-btn i {
    font-size: 12px;
    transition: transform .3s ease;
}

.icset-btn:hover i {
    transform: translate(3px, -3px);
}

.icset-btn:focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: 3px;
}

.icset-btn--lg {
    padding: 18px 36px;
    font-size: 16px;
}

.icset-btn--sm {
    padding: 11px 22px;
    font-size: 14px;
}

/* --- variant 1: PRIMARY - Neon Mint on Core Navy text --- */
.icset-btn--solid {
    background: var(--mint);
    color: var(--navy);
    box-shadow: 0 16px 34px rgba(54, 236, 222, .3);
}

.icset-btn--solid:hover,
.icset-btn--solid:focus {
    background: var(--mint-hover);
    color: var(--navy);
    transform: translateY(-3px);
    box-shadow: 0 22px 42px rgba(54, 236, 222, .38);
}

/* --- variant 2: SECONDARY - Core Navy with white text --- */
.icset-btn--secondary {
    background: var(--navy);
    color: #fff;
    box-shadow: 0 16px 34px rgba(0, 32, 63, .28);
}

.icset-btn--secondary:hover,
.icset-btn--secondary:focus {
    background: var(--navy-2);
    color: #fff;
    transform: translateY(-3px);
    box-shadow: 0 22px 42px rgba(0, 32, 63, .34);
}

.icset-btn--secondary.on-dark {
    background: #fff;
    color: var(--navy);
}

.icset-btn--secondary.on-dark:hover,
.icset-btn--secondary.on-dark:focus {
    background: var(--text-subhead);
    color: var(--navy);
}

/* --- variant 3: OUTLINE - border only until hovered ---
   On light surfaces the outline is Core Navy: Neon Mint text on white
   is about 1.6:1 and would fail WCAG. On dark surfaces it is Neon Mint,
   exactly as the design system specifies. */
.icset-btn--ghost {
    background: transparent;
    color: var(--navy);
    box-shadow: inset 0 0 0 2px var(--navy);
}

.icset-btn--ghost:hover,
.icset-btn--ghost:focus {
    background: var(--navy);
    color: #fff;
    transform: translateY(-3px);
    box-shadow: inset 0 0 0 2px var(--navy), 0 18px 36px rgba(0, 32, 63, .26);
}

.icset-btn--ghost.on-dark {
    color: var(--mint);
    box-shadow: inset 0 0 0 2px var(--mint);
}

.icset-btn--ghost.on-dark:hover,
.icset-btn--ghost.on-dark:focus {
    background: var(--mint);
    color: var(--navy);
    box-shadow: inset 0 0 0 2px var(--mint), 0 18px 36px rgba(54, 236, 222, .3);
}

@media (max-width: 575.98px) {
    .icset-btn {
        width: 100%;
    }
}

/* =====================================================
   HERO PHOTO CORRIDOR  [DEMO - see icset.BEFORE-HERO.css to revert]
   Two rails of conference photos angled inward on a shared
   perspective, drifting in opposite directions. Each rail holds
   its set twice, so translateX(-50%) loops without a seam.
   ===================================================== */
/* the four angled slabs used to hang below the copy; without them the
   template's huge bottom padding just leaves a gap */
.ul-banner {
    --par: 0;
    padding-bottom: clamp(0px, 6.96vw, 145px);
}

.hero-corridor {
    position: absolute;
    inset: 0;
    z-index: 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    perspective: 688px;
    perspective-origin: 50% 73%;
    overflow: hidden;
    pointer-events: none;
}

.corridor-rail {
    position: relative;
    z-index: 0;
    width: 56%;
    max-width: 900px;
    overflow: hidden;
    transform-style: preserve-3d;
    will-change: transform;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 16%, #000 92%, transparent);
    mask-image: linear-gradient(90deg, transparent, #000 16%, #000 92%, transparent);
}

.corridor-rail--left {
    transform:
        rotateY(44deg)
        translateZ(calc(-190px - var(--par) * 260px))
        translateX(-4%)
        translateY(calc(var(--par) * 130px));
}

.corridor-rail--right {
    transform:
        rotateY(-44deg)
        translateZ(calc(-190px - var(--par) * 260px))
        translateX(4%)
        translateY(calc(var(--par) * 130px));
}

.corridor-track {
    display: flex;
    align-items: center;
    width: max-content;
    gap: clamp(12px, 1.4vw, 22px);
    animation: corridor-drift 46s linear infinite;
}

/* the right rail runs the other way, so the two never march in step */
.corridor-track--reverse {
    animation-name: corridor-drift-reverse;
    animation-duration: 52s;
}

@keyframes corridor-drift {
    from {
        transform: translateX(0);
    }

    to {
        transform: translateX(-50%);
    }
}

@keyframes corridor-drift-reverse {
    from {
        transform: translateX(-50%);
    }

    to {
        transform: translateX(0);
    }
}

.corridor-panel {
    flex-shrink: 0;
    width: clamp(260px, 27vw, 440px);
    height: clamp(280px, 29vw, 460px);
    border-radius: 16px;
    overflow: hidden;
    border: 2px solid rgba(255, 255, 255, .22);
    box-shadow:
        0 30px 60px rgba(0, 8, 20, .5),
        0 0 0 1px rgba(54, 236, 222, .14);
}

.corridor-panel img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    filter: saturate(1.12) contrast(1.04);
}

/* Navy only where the copy sits; the photos stay bright at the edges.
   z-index puts it over the rails but under the pattern. */
.hero-corridor::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    background:
        radial-gradient(42% 56% at 50% 50%, rgba(0, 32, 63, .94) 26%, rgba(0, 32, 63, .5) 62%, rgba(0, 32, 63, .12) 100%),
        linear-gradient(180deg, rgba(0, 32, 63, .3) 0%, rgba(0, 32, 63, .18) 45%, rgba(0, 32, 63, .58) 100%);
    pointer-events: none;
}

/* the template's banner shape, back on top of the photos */
.hero-corridor::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 2;
    background: url("../img/banner-bg-shape.svg") no-repeat center center / cover;
    mix-blend-mode: soft-light;
    opacity: .85;
    transform: scale(calc(1 + var(--par) * .14));
    pointer-events: none;
}

/* the copy has to sit above the corridor */
.ul-banner-txt,
.ul-banner-vectors {
    position: relative;
    z-index: 2;
}

.ul-banner-txt {
    transform: translateY(calc(var(--par) * -60px));
    opacity: calc(1 - var(--par) * .6);
    will-change: transform, opacity;
}

/* below tablet the perspective has no room - flatten to a plain drift */
@media (max-width: 991.98px) {
    .hero-corridor {
        perspective: none;
    }

    .corridor-rail {
        width: 50%;
    }

    .corridor-rail--left,
    .corridor-rail--right {
        transform: none;
        opacity: .5;
    }
}

@media (max-width: 575.98px) {
    .corridor-panel {
        width: 190px;
    }
}

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

    .corridor-track {
        animation: none;
    }

    .ul-banner {
        --par: 0 !important;
    }
}

/* key facts row, sitting under the hero title */
.ul-banner-txt .ul-banner-stats {
    position: static;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    row-gap: 18px;
    padding: 0;
    margin: clamp(24px, 2.3vw, 40px) auto clamp(28px, 2.5vw, 44px);
}

.ul-banner-txt .ul-banner-stat {
    padding-right: clamp(18px, 2.1vw, 40px);
    margin-right: clamp(18px, 2.1vw, 40px);
}

.ul-banner-txt .ul-banner-stat:last-child {
    padding-right: 0;
    margin-right: 0;
    border-right: none;
}

.ul-banner-stat-number {
    white-space: nowrap;
    line-height: 1.1;
}

.ul-banner-stat-text {
    white-space: nowrap;
}

@media screen and (max-width: 575px) {
    .ul-banner-txt .ul-banner-stat {
        padding-right: 14px;
        margin-right: 14px;
    }

    .ul-banner-txt .ul-banner-stat:nth-child(2) {
        padding-right: 0;
        margin-right: 0;
        border-right: none;
    }
}

/* =====================================================
   SECTIONS
   ===================================================== */
.section {
    padding: clamp(64px, 7vw, 120px) 0;
    position: relative;
}

.section-white {
    background: #fff;
}

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

.section-dark {
    background: radial-gradient(circle at 12% 0%, rgba(54, 236, 222, .45), transparent 45%), var(--color-dark);
    color: rgba(255, 255, 255, .78);
}

/* the signature SDG band carries the pattern photo under the navy wash */
#sdg-impact {
    position: relative;
    isolation: isolate;
}

#sdg-impact::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: url("../../img/background-1.jpg") no-repeat center center / cover;
}

/* :where() keeps these as fall-through defaults: they still style plain
   markup, but any component class now outranks them per property. */
:where(.section) h1,
:where(.section) h2,
:where(.section) h3,
:where(.section) h4 {
    font-family: var(--font-head);
    color: var(--color-ink);
    font-weight: 700;
    line-height: 1.18;
}

:where(.section) h2 {
    font-size: clamp(28px, 2.6vw, 44px);
    margin-bottom: 18px;
}

:where(.section) h3 {
    font-size: clamp(18px, 1.25vw, 22px);
    margin-bottom: 10px;
}

:where(.section) h4 {
    font-size: 17px;
    margin-bottom: 6px;
}

:where(.section) p {
    font-size: clamp(15px, 1vw, 17px);
    line-height: 1.8;
    margin-bottom: 16px;
}

.section-dark h1,
.section-dark h2,
.section-dark h3,
.section-dark h4 {
    color: #fff;
}

.section-header p {
    margin-bottom: 0;
}

.eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: var(--font-head);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--color-secondary);
    margin-bottom: 16px;
}

.eyebrow::before {
    content: "";
    width: 26px;
    height: 2px;
    border-radius: 2px;
    background: currentColor;
}

.text-mint {
    color: var(--color-accent) !important;
}

.list-check {
    list-style: none;
    padding: 0;
    margin: 24px 0;
}

.list-check li {
    position: relative;
    padding-left: 34px;
    margin-bottom: 12px;
    font-size: 16px;
    line-height: 1.6;
}

.list-check li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 2px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--mint);
    box-shadow: inset 0 0 0 3px #fff, 0 0 0 1px rgba(0, 32, 63, .18);
}

.section-dark .list-check li::before {
    background: var(--color-accent);
    box-shadow: inset 0 0 0 3px var(--color-dark);
}

/* ---------- scroll animation (Animate.css + WOW.js) ---------- */
:root {
    --animate-duration: .9s;
    --animate-delay: .15s;
}

.wow {
    visibility: hidden;
}

/* if the animation library never loads, nothing stays hidden */
.no-wow .wow {
    visibility: visible !important;
}

@media (prefers-reduced-motion: reduce) {
    .wow {
        visibility: visible !important;
        animation: none !important;
    }
}

/* ---------- smooth zoom in / zoom out on every image ---------- */
.image-card,
.gallery-item,
.venue-card {
    position: relative;
    overflow: hidden;
    transition: transform .5s ease, box-shadow .5s ease;
}

/* ---------- gloss sweep across images on hover ----------
   A skewed highlight parked off the left edge that slides across
   the frame once,
on top of the zoom. */
.gallery-item::after,
.venue-card::after,
.dates-visual::after,
.indexing-logo::after,
.download-icon::after {
    content: "";
    position: absolute;
    top: 0;
    left: -85%;
    z-index: 2;
    width: 55%;
    height: 100%;
    pointer-events: none;
    transform: skewX(-22deg);
    background: linear-gradient(120deg,
            rgba(255, 255, 255, 0) 0%,
            rgba(255, 255, 255, .55) 50%,
            rgba(255, 255, 255, 0) 100%);
}

.gallery-item:hover::after,
.venue-card:hover::after,
.dates-visual:hover::after,
.indexing-logo:hover::after,
.download-card:hover .download-icon::after {
    animation: icset-shine .95s cubic-bezier(.22, .61, .36, 1);
}

@keyframes icset-shine {
    100% {
        left: 130%;
    }
}

/* the sweep needs a clipped, positioned frame */
.dates-visual,
.indexing-logo,
.download-icon {
    position: relative;
    overflow: hidden;
}

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

    .gallery-item:hover::after,
.venue-card:hover::after,
.dates-visual:hover::after,
.indexing-logo:hover::after,
.download-card:hover .download-icon::after {
        animation: none;
    }
}

.image-card img,
.gallery-item img,
.venue-card img {
    display: block;
    transform: scale(1);
    transition: transform 1.1s cubic-bezier(.22, .61, .36, 1);
    will-change: transform;
    backface-visibility: hidden;
}

.image-card:hover img,
.gallery-item:hover img,
.venue-card:hover img {
    transform: scale(1.12);
}

/* =====================================================
   WELCOME / ABOUT - overlapping photo collage
   The small card and the cap drift gently up and down.
   ===================================================== */
.about-welcome {
    position: relative;
    overflow: hidden;
    background: #fff;
}

.about-welcome .theme-decor {
    opacity: .1;
}

.aw-collage {
    /* A grid, not four absolutely-positioned percentages. The old version
       let the small photo hang off the left edge and put the avatar stack
       under the main shot's corner; on a grid the pieces line up and the
       stats card has a cell of its own. */
    position: relative;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    /* the rows carry the height, so the block is one number to tune and
       the photos fill whatever it is rather than each setting its own */
    grid-template-rows: minmax(0, 1.5fr) minmax(0, 1fr);
    min-height: clamp(500px, 50vw, 690px);
    gap: clamp(10px, 1.1vw, 16px);
}

/* mint wash sitting behind the stack */
.aw-collage::before {
    content: "";
    position: absolute;
    z-index: -1;
    left: 4%;
    top: 6%;
    width: 72%;
    height: 76%;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(54, 236, 222, .2), transparent 68%);
    filter: blur(6px);
}

.aw-shot {
    position: relative;
    margin: 0;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 22px 48px rgba(0, 32, 63, .2);
}

.aw-shot img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.aw-shot--main {
    grid-column: 1 / span 2;
    grid-row: 1;
}

/* the tall one, running the full height of the block */
.aw-shot--side {
    grid-column: 3;
    grid-row: 1 / span 2;
    border: 5px solid #fff;
}

.aw-shot--float {
    grid-column: 1;
    grid-row: 2;
    border: 5px solid #fff;
    border-radius: 16px;
    box-shadow: 0 18px 38px rgba(0, 32, 63, .24);
}

/* ---------- the stats card ---------- */
.aw-stats {
    grid-column: 2;
    grid-row: 2;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: clamp(6px, .8vw, 12px);
    margin: 0;
    padding: clamp(12px, 1.4vw, 20px);
    border-radius: 18px;
    background: var(--gradient);
    box-shadow: 0 20px 44px rgba(0, 32, 63, .28);
}

.aw-stats > div {
    display: flex;
    align-items: baseline;
    gap: 8px;
}

.aw-stats > div + div {
    padding-top: clamp(6px, .8vw, 12px);
    border-top: 1px solid rgba(255, 255, 255, .16);
}

.about-welcome .aw-stats dt {
    margin: 0;
    font-family: var(--font-num);
    font-variant-numeric: tabular-nums;
    font-weight: 700;
    font-size: clamp(19px, 1.9vw, 27px);
    line-height: 1;
    color: var(--mint);
}

.about-welcome .aw-stats dt sup {
    font-size: .5em;
    line-height: 0;
}

.about-welcome .aw-stats dd {
    margin: 0;
    font-family: var(--font-head);
    font-size: clamp(11px, .88vw, 12.5px);
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .8);
}

/* dashed route + mortarboard, over the seam at the top */
.aw-path {
    position: absolute;
    z-index: 2;
    top: -6%;
    left: 46%;
    width: 30%;
    color: var(--mint);
    opacity: .85;
    pointer-events: none;
    animation: aw-float 6.2s ease-in-out infinite alternate-reverse;
}

@keyframes aw-float {
    from {
        transform: translateY(0);
    }

    to {
        transform: translateY(-12px);
    }
}

.aw-path svg {
    width: 100%;
    height: auto;
    display: block;
}

.aw-path i {
    position: absolute;
    top: 2%;
    right: -6%;
    font-size: clamp(24px, 2.4vw, 34px);
    color: var(--mint);
    filter: drop-shadow(0 6px 14px rgba(54, 236, 222, .45));
}

/* ---------- avatar stack ---------- */
.aw-people {
    /* rides the corner where the two lower cells meet */
    position: absolute;
    left: clamp(8px, 1.4vw, 18px);
    bottom: clamp(8px, 1.2vw, 16px);
    z-index: 3;
    display: flex;
    align-items: center;
}

.aw-people img,
.aw-people-more {
    width: clamp(38px, 3.4vw, 48px);
    height: clamp(38px, 3.4vw, 48px);
    border-radius: 50%;
    object-fit: cover;
    border: 3px solid #fff;
    margin-left: -14px;
    transition: transform .35s cubic-bezier(.22, .61, .36, 1);
}

.aw-people img:first-child {
    margin-left: 0;
}

.aw-people img:hover {
    transform: translateY(-6px) scale(1.08);
}

.aw-people-more {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--mint);
    color: var(--navy);
    font-size: 20px;
    text-decoration: none;
}

.aw-people-more:hover,
.aw-people-more:focus-visible {
    transform: translateY(-6px) scale(1.08);
    background: var(--mint-hover);
    color: var(--navy);
}

/* ---------- copy column ---------- */
.aw-copy h2 {
    margin-bottom: 18px;
}

.aw-copy > p {
    color: var(--color-body);
}

.aw-points {
    list-style: none;
    margin: clamp(22px, 2.2vw, 32px) 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.aw-points li {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
    align-items: center;
    gap: clamp(14px, 1.6vw, 26px);
}

.aw-point-head {
    display: flex;
    align-items: center;
    gap: 12px;
    font-family: var(--font-head);
    font-weight: 700;
    font-size: clamp(15px, 1.15vw, 17px);
    line-height: 1.35;
    color: var(--navy);
}

.aw-point-head i {
    flex-shrink: 0;
    font-size: 22px;
    font-weight: 700;
    color: var(--mint-hover);
}

.aw-point-note {
    padding-left: clamp(14px, 1.4vw, 22px);
    border-left: 2px solid var(--mint);
    font-size: 13.5px;
    line-height: 1.6;
    color: var(--text-muted);
}

@media (max-width: 767.98px) {
    .aw-collage {
        min-height: 0;
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 12px;
    }

    .aw-shot {
        position: static;
        width: auto;
        height: auto;
        aspect-ratio: 3 / 4;
    }

    .aw-shot--float {
        grid-column: span 2;
        aspect-ratio: 16 / 9;
        border-width: 5px;
        animation: none;
    }

    .aw-path,
    .aw-collage::before {
        display: none;
    }

    .aw-people {
        position: static;
        grid-column: span 2;
        justify-content: center;
    }

    .aw-points li {
        grid-template-columns: minmax(0, 1fr);
        gap: 8px;
    }

    .aw-point-note {
        padding-left: 34px;
        border-left: 0;
    }
}

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

    .aw-shot--float,
    .aw-path {
        animation: none;
    }

    .aw-people img,
    .aw-people-more {
        transition: none;
    }
}

/* =====================================================
   ABOUT CONFERENCE - SVG pattern background
   ===================================================== */
.about-conference {
    position: relative;
    isolation: isolate;
    background:
        radial-gradient(ellipse at 12% 8%, rgba(54, 236, 222, .16), transparent 52%),
        radial-gradient(ellipse at 88% 92%, rgba(0, 32, 63, .08), transparent 52%),
        linear-gradient(180deg, #fff 0%, var(--surface-tint) 100%);
}

/* repeating SVG tile, faded out towards the edges */
.about-conference::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: url("../../img/pattern/p-topo.svg") repeat 0 0 / 220px 160px;
    -webkit-mask-image: radial-gradient(ellipse 80% 78% at 50% 50%, #000 42%, transparent 100%);
    mask-image: radial-gradient(ellipse 80% 78% at 50% 50%, #000 42%, transparent 100%);
}

/* ---- left column: eyebrow, split heading, copy, four pillars ---- */
.ac-eyebrow {
    display: inline-flex;
    align-items: center;
    margin-bottom: clamp(18px, 1.8vw, 26px);
    padding: 7px 16px;
    border-radius: 999px;
    font-family: var(--font-head);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--navy-2);
    background: rgba(255, 255, 255, .8);
    border: 1px solid var(--border-line);
}

.ac-title {
    margin-bottom: clamp(16px, 1.6vw, 24px);
    font-size: clamp(30px, 3.4vw, 50px);
    line-height: 1.12;
    letter-spacing: -.01em;
    color: var(--navy);
}

.ac-lead {
    max-width: 54ch;
    font-size: clamp(15px, 1.05vw, 16.5px);
    line-height: 1.85;
    color: var(--color-body);
}

.ac-lead + .ac-lead {
    margin-top: -4px;
}

.ac-pillars {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(18px, 1.8vw, 28px) clamp(16px, 1.8vw, 30px);
    margin-top: clamp(24px, 2.4vw, 38px);
}

.ac-pillar {
    display: flex;
    align-items: flex-start;
    gap: 14px;
}

.ac-pillar-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 42px;
    height: 42px;
    border-radius: 12px;
    font-size: 18px;
    color: var(--navy);
    background: rgba(54, 236, 222, .18);
    border: 1px solid rgba(54, 236, 222, .34);
    transition: background .35s ease, transform .35s cubic-bezier(.22, .61, .36, 1);
}

.ac-pillar:hover .ac-pillar-icon {
    background: var(--mint);
    transform: translateY(-3px);
}

.about-conference .ac-pillar-title {
    margin: 2px 0 5px;
    font-size: clamp(15px, 1.15vw, 17px);
    line-height: 1.3;
    color: var(--navy);
}

.about-conference .ac-pillar-text {
    margin: 0;
    font-size: clamp(12.5px, .95vw, 13.5px);
    line-height: 1.65;
    color: var(--text-muted);
}

/* ---- right column: the overlapping collage ----
   One aspect-ratio box with everything placed in percentages, so the
   pieces keep their relationship to each other at any width instead of
   sliding apart the way fixed offsets would. */
.ac-collage {
    position: relative;
    width: 100%;
    aspect-ratio: 1 / 1.06;
}

.ac-shot {
    position: absolute;
    margin: 0;
    overflow: hidden;
    background: var(--gradient);
    transition: transform .5s cubic-bezier(.22, .61, .36, 1), box-shadow .5s ease;
}

.ac-shot img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* the wide photo behind everything */
.ac-shot--back {
    top: 0;
    right: 0;
    width: 79%;
    height: 84%;
    border-radius: 26px;
    box-shadow: 0 26px 60px rgba(0, 32, 63, .22);
}

/* the stage photo the theme card sits across */
.ac-shot--front {
    left: 0;
    top: 33%;
    width: 55%;
    height: 51%;
    border-radius: 20px;
    box-shadow: 0 22px 50px rgba(0, 32, 63, .28);
}

/* the small round one, bottom right */
.ac-shot--dot {
    right: 2%;
    bottom: 0;
    width: 27%;
    aspect-ratio: 1;
    height: auto;
    border-radius: 50%;
    border: 5px solid #fff;
    box-shadow: 0 18px 40px rgba(0, 32, 63, .24);
}

.ac-collage:hover .ac-shot--back {
    transform: translateY(-5px);
}

.ac-collage:hover .ac-shot--front {
    transform: translateY(5px);
}

/* ---- the floating theme card ---- */
.ac-theme-card {
    position: absolute;
    left: 7%;
    top: 36%;
    z-index: 3;
    width: 86%;
    padding: clamp(16px, 1.8vw, 28px) clamp(18px, 2vw, 30px);
    border-radius: 18px;
    background: linear-gradient(150deg, rgba(0, 22, 44, .93) 0%, rgba(1, 45, 79, .9) 100%);
    border: 1px solid rgba(54, 236, 222, .22);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    box-shadow: 0 26px 60px rgba(0, 12, 26, .42);
}

.ac-theme-tag {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
    font-family: var(--font-head);
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--mint);
}

.ac-theme-tag i {
    font-size: 14px;
}

.about-conference .ac-theme-text {
    margin: 0;
    font-family: var(--font-head);
    font-weight: 700;
    font-size: clamp(16px, 1.5vw, 23px);
    line-height: 1.35;
    color: #fff;
}

/* ---- the benefits strip under both columns ---- */
.ac-benefits {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px 12px;
    margin: clamp(34px, 3.4vw, 56px) 0 0;
    padding: 0;
    list-style: none;
}

.ac-benefits li {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 18px;
    border-radius: 999px;
    font-family: var(--font-head);
    font-size: 13.5px;
    font-weight: 600;
    color: var(--navy);
    background: rgba(255, 255, 255, .78);
    border: 1px solid var(--border-line);
    box-shadow: 0 8px 20px rgba(0, 32, 63, .05);
}

.ac-benefits i {
    font-size: 14px;
    color: var(--mint-hover);
}

/* ---- responsive ----
   The collage needs room for four overlapping pieces. Below the tablet
   break there is not enough of it, so it unstacks into a plain photo with
   the theme card underneath - which is what the layout is actually saying. */
@media (max-width: 991.98px) {
    .ac-collage {
        margin-top: clamp(24px, 4vw, 40px);
    }
}

@media (max-width: 767.98px) {
    .ac-collage {
        aspect-ratio: auto;
    }

    .ac-shot,
    .ac-theme-card {
        position: static;
        width: 100%;
    }

    .ac-shot--back {
        height: 240px;
        border-radius: 20px;
    }

    .ac-shot--front,
    .ac-shot--dot {
        display: none;
    }

    .ac-theme-card {
        margin-top: -34px;
        width: calc(100% - 28px);
        margin-left: auto;
        margin-right: auto;
    }
}

@media (max-width: 575.98px) {
    .ac-pillars {
        grid-template-columns: 1fr;
    }
}

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

    .ac-shot,
    .ac-pillar-icon {
        transition: none;
    }

    .ac-collage:hover .ac-shot--back,
    .ac-collage:hover .ac-shot--front,
    .ac-pillar:hover .ac-pillar-icon {
        transform: none;
    }
}
/* ---------- decorative vector, used by the About panel ---------- */
.theme-decor {
    position: absolute;
    right: -4%;
    bottom: -8%;
    width: clamp(220px, 26vw, 400px);
    height: clamp(220px, 26vw, 400px);
    background: url("../../img/pattern/why-choose-us-vector-2.png") no-repeat center center / contain;
    opacity: .22;
    pointer-events: none;
}

/* ---------- important dates ---------- */
.dates-title {
    font-size: clamp(28px, 3vw, 46px);
    color: var(--navy);
    margin-bottom: clamp(24px, 2.6vw, 40px);
}

.dates-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: clamp(14px, 1.4vw, 20px);
}

.date-box {
    position: relative;
    overflow: hidden;
    padding: clamp(18px, 1.8vw, 24px) clamp(18px, 1.8vw, 26px) clamp(20px, 2vw, 26px);
    border-radius: 22px;
    background: linear-gradient(155deg, #EFFCFB 0%, #FFFFFF 62%);
    border: 1px solid rgba(0, 32, 63, .07);
    box-shadow: 0 14px 32px rgba(0, 32, 63, .06);
    transition: transform .4s cubic-bezier(.22, .61, .36, 1), box-shadow .4s ease, border-color .4s ease;
}

/* ::before - mint rail across the top, drawn in on hover */
.date-box::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, var(--mint), var(--navy-2));
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform .5s cubic-bezier(.22, .61, .36, 1);
}

/* ::after - mint glow that blooms out of the bottom-right corner */
.date-box::after {
    content: "";
    position: absolute;
    right: -60px;
    bottom: -60px;
    width: 170px;
    height: 170px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(54, 236, 222, .45), transparent 68%);
    transform: scale(.4);
    opacity: 0;
    transition: transform .55s cubic-bezier(.22, .61, .36, 1), opacity .45s ease;
}

.date-box:hover {
    transform: translateY(-6px);
    border-color: var(--mint);
    box-shadow: 0 24px 48px rgba(0, 32, 63, .16);
}

.date-box:hover::before {
    transform: scaleX(1);
}

.date-box:hover::after {
    transform: scale(1);
    opacity: 1;
}

.date-box-head,
.date-box-main {
    position: relative;
    z-index: 1;
}

.date-box-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: clamp(16px, 1.8vw, 26px);
}

.date-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    border-radius: 999px;
    background: #fff;
    font-family: var(--font-head);
    font-weight: 700;
    font-size: clamp(12.5px, .95vw, 14px);
    color: var(--navy);
    white-space: nowrap;
    box-shadow: 0 4px 14px rgba(0, 32, 63, .08);
    transition: background .35s ease, color .35s ease;
}

.date-chip .bi {
    font-size: 15px;
    color: var(--navy-2);
    transition: color .35s ease;
}

.date-box:hover .date-chip {
    background: var(--navy);
    color: #fff;
}

.date-box:hover .date-chip .bi {
    color: var(--mint);
}

.date-note {
    font-size: 12.5px;
    font-weight: 600;
    color: var(--text-muted);
    white-space: nowrap;
}

/* the date itself: big day number, month and year stacked beside it */
.date-box-main {
    display: flex;
    align-items: center;
    gap: 12px;
}

.date-day {
    font-family: var(--font-num);
    font-weight: 700;
    font-size: clamp(38px, 3.8vw, 56px);
    line-height: .9;
    color: var(--navy);
    font-variant-numeric: tabular-nums;
}

.date-day sup {
    font-size: .38em;
    font-weight: 600;
    top: -.85em;
    margin-left: 1px;
    color: var(--navy-2);
}

.date-rest {
    display: flex;
    flex-direction: column;
    line-height: 1.2;
}

.date-rest strong {
    font-family: var(--font-head);
    font-weight: 700;
    font-size: clamp(15px, 1.2vw, 19px);
    color: var(--navy);
}

.date-rest em {
    font-family: var(--font-num);
    font-style: normal;
    font-weight: 600;
    font-size: clamp(13px, 1vw, 15px);
    color: var(--text-muted);
}

/* Animate.css on hover */
.date-box:hover .date-day {
    animation-name: pulse;
    animation-duration: .8s;
    animation-fill-mode: both;
}

.date-box:hover .date-chip .bi {
    animation-name: heartBeat;
    animation-duration: .9s;
    animation-fill-mode: both;
}

@media (max-width: 575.98px) {
    .dates-grid {
        grid-template-columns: 1fr;
    }
}

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

    .date-box:hover .date-day,
    .date-box:hover .date-chip .bi {
        animation: none;
    }
}
/* image beside the list */
.dates-visual {
    position: relative;
}

.dates-visual img {
    width: 100%;
    height: clamp(320px, 34vw, 450px);
    object-fit: cover;
    border-radius: 24px;
    box-shadow: var(--shadow-hard);
}

.dates-dots {
    position: absolute;
    right: -18px;
    bottom: -22px;
    width: clamp(110px, 12vw, 170px);
    height: clamp(90px, 10vw, 130px);
    z-index: -1;
    background-image: radial-gradient(var(--navy) 2px, transparent 2px);
    background-size: 20px 20px;
    opacity: .28;
}

@media (max-width: 575.98px) {
    .dates-visual img {
        height: 260px;
    }
}
/* ---------- gallery ----------
   Mosaic: one tall feature on the left, a 3 x 2 grid beside it.
   Every frame opens in Magnific Popup. */
.gallery-grid {
    display: grid;
    grid-template-columns: 2fr repeat(3, 1fr);
    grid-auto-rows: clamp(150px, 15.5vw, 215px);
    gap: clamp(10px, 1vw, 16px);
    margin-top: clamp(26px, 2.6vw, 44px);
}

.gallery-item {
    margin: 0;
    border-radius: 14px;
    overflow: hidden;
    box-shadow: var(--shadow-soft);
}

.gallery-item--feature {
    grid-column: 1;
    grid-row: 1 / span 2;
}

.gallery-link {
    position: relative;
    display: block;
    width: 100%;
    height: 100%;
    cursor: zoom-in;
}

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

/* navy veil + magnifier, both parked until hover */
.gallery-link::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 2;
    background: linear-gradient(180deg, rgba(0, 32, 63, 0), rgba(0, 32, 63, .62));
    opacity: 0;
    transition: opacity .4s ease;
}

.gallery-zoom {
    position: absolute;
    z-index: 3;
    right: 12px;
    bottom: 12px;
    width: 42px;
    height: 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--mint);
    color: var(--navy);
    font-size: 18px;
    opacity: 0;
    transform: translateY(10px) scale(.85);
    transition: opacity .4s ease, transform .4s cubic-bezier(.22, .61, .36, 1);
}

.gallery-link:hover::before,
.gallery-link:focus-visible::before,
.gallery-link:hover .gallery-zoom,
.gallery-link:focus-visible .gallery-zoom {
    opacity: 1;
}

.gallery-link:hover .gallery-zoom,
.gallery-link:focus-visible .gallery-zoom {
    transform: translateY(0) scale(1);
}

.gallery-link:focus {
    outline: 0;
}

.gallery-link:focus-visible {
    outline: 2px solid var(--mint);
    outline-offset: 3px;
}

.gallery-item:hover {
    transform: translateY(-6px);
    box-shadow: var(--shadow-hard);
}

/* ---------- magnific popup, in brand colours ---------- */
.mfp-bg {
    background: #00203F;
    opacity: .94;
}

.mfp-figure::after {
    box-shadow: 0 24px 60px rgba(0, 0, 0, .6);
    border-radius: 10px;
}

.mfp-img {
    border-radius: 10px;
}

.mfp-title {
    padding-top: 10px;
    font-family: var(--font-body);
    font-size: 14px;
    color: var(--text-subhead);
}

.mfp-counter {
    font-family: var(--font-num);
    color: var(--mint);
}

.mfp-arrow::before,
.mfp-arrow::after {
    border-color: transparent;
}

.mfp-arrow-left::after {
    border-right-color: var(--mint);
}

.mfp-arrow-right::after {
    border-left-color: var(--mint);
}

.mfp-close {
    color: #fff !important;
    opacity: .85;
}

.mfp-close:hover {
    color: var(--mint) !important;
    opacity: 1;
}

.mfp-zoom-in .mfp-figure {
    opacity: 0;
    transform: scale(.92);
    transition: all .3s ease-out;
}

.mfp-zoom-in.mfp-ready .mfp-figure {
    opacity: 1;
    transform: scale(1);
}

.mfp-zoom-in.mfp-removing .mfp-figure {
    opacity: 0;
    transform: scale(.92);
}

@media (max-width: 991.98px) {
    .gallery-grid {
        grid-template-columns: repeat(3, 1fr);
        grid-auto-rows: clamp(130px, 20vw, 190px);
    }

    .gallery-item--feature {
        grid-column: 1 / span 3;
        grid-row: auto;
        height: clamp(220px, 42vw, 340px);
    }
}

@media (max-width: 575.98px) {
    .gallery-grid {
        grid-template-columns: repeat(2, 1fr);
        grid-auto-rows: 140px;
    }

    .gallery-item--feature {
        grid-column: 1 / span 2;
    }

    .gallery-zoom {
        width: 34px;
        height: 34px;
        font-size: 15px;
    }
}

/* =====================================================
   PROCEEDINGS & PUBLICATIONS
   Indexing logos, the T&C note, then the Lottie journey.
   ===================================================== */
.proceedings-section {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    background: #fff;
}

/* corner vector only - nothing sits behind the logos */
.proceedings-section::before {
    content: "";
    position: absolute;
    z-index: -1;
    left: -6%;
    bottom: -12%;
    width: min(420px, 40vw);
    height: min(420px, 40vw);
    background: url("../../img/pattern/about-2-img-vector-2.png") no-repeat center / contain;
    opacity: .16;
    pointer-events: none;
}

/* ---------- indexing logos ---------- */
.pp-logos {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: clamp(12px, 1.6vw, 24px);
    margin-top: clamp(28px, 2.8vw, 44px);
}

.pp-logo {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: clamp(26px, 3.4vw, 56px);
    /* padding: clamp(9px, .9vw, 13px) clamp(14px, 1.3vw, 20px); */
    box-sizing: content-box;
    border: 1px solid #cbcbcb;
    /* border-radius: 12px; */
    background: #fff;
    transition: border-color .35s ease, box-shadow .35s ease, transform .35s cubic-bezier(.22, .61, .36, 1);
}

.pp-logo:hover {
    border-color: var(--mint);
    box-shadow: 0 12px 26px rgba(0, 32, 63, .1);
    transform: translateY(-4px);
}

.pp-logo img {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
    transition: transform .35s cubic-bezier(.22, .61, .36, 1);
}

.pp-logo:hover img {
    transform: scale(1.05);
}

.pp-note {
    max-width: 900px;
    margin: clamp(22px, 2.2vw, 34px) auto 0;
    text-align: center;
    font-size: clamp(13px, .95vw, 14.5px);
    line-height: 1.8;
    color: var(--text-muted);
}

/* ---------- research journey ---------- */
.pp-journey {
    margin-top: clamp(34px, 3.4vw, 56px);
    padding-top: clamp(30px, 3vw, 48px);
    border-top: 1px dashed var(--border-line);
    text-align: center;
}

.proceedings-section .pp-journey-title {
    /* the gap under the title used to come from .pp-lottie; that element
       is gone, so the heading owns its own spacing */
    margin: 0 0 clamp(26px, 3vw, 46px);
    font-size: clamp(22px, 2.2vw, 34px);
    line-height: 1.25;
    color: var(--navy);
}

.pp-cta {
    /* clear of the last row of journey steps, whose text sits close to
       the baseline of its column */
    margin-top: clamp(34px, 4vw, 60px);
}

/* =====================================================
   INNER PAGES - head band, submission form, guidelines
   ===================================================== */
.page-head {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    padding: clamp(130px, 12vw, 190px) 0 clamp(46px, 4.6vw, 76px);
    background: var(--gradient);
    text-align: center;
}

/* Mumbai skyline behind every inner-page breadcrumb band. The scrim is
   part of the same layer, so the heading keeps its contrast over the
   bright monument on the left. */
.page-head::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(90deg, rgb(0 32 63 / 8%) 0%, rgba(0, 32, 63, .74) 42%, rgb(0 32 63 / 15%) 100%), url(../../img/br-3.jpg) no-repeat center center / cover;
}

.page-head::after {
    content: "";
    position: absolute;
    z-index: -1;
    top: -30%;
    right: -8%;
    width: min(520px, 54vw);
    height: min(520px, 54vw);
    background: radial-gradient(circle, rgba(54, 236, 222, .24), transparent 66%);
    pointer-events: none;
}

.page-head .page-head-title {
    margin: 0;
    font-family: var(--font-head);
    font-weight: 700;
    font-size: clamp(28px, 3.2vw, 48px);
    line-height: 1.18;
    color: #fff;
}

.page-crumbs {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-bottom: 14px;
    font-size: 13.5px;
    color: var(--text-subhead);
}

.page-crumbs a {
    color: var(--mint);
}

.page-crumbs a:hover {
    color: var(--mint-hover);
}

.page-crumbs span[aria-hidden] {
    opacity: .5;
}

/* On a phone the band is nearly square, so "cover" crops the wide
   panorama down to its empty middle. Sizing to the full width instead
   keeps the whole skyline visible and centred, with the section's own
   navy showing above and below it. */
@media (max-width: 767.98px) {
    .page-head {
        padding: clamp(112px, 26vw, 140px) 0 clamp(34px, 8vw, 48px);
    }

    .page-head::before {
        background:
            linear-gradient(180deg, rgba(0, 32, 63, .9) 0%, rgba(0, 32, 63, .74) 45%, rgba(0, 32, 63, .92) 100%),
            url("../../img/br-3.jpg") no-repeat center center / 100% auto;
    }
}

/* ---------- submission page ---------- */
.submission-section {
    background: var(--surface-tint);
}

.submission-intro {
    max-width: 900px;
    margin: 0 auto;
    text-align: center;
}

.submission-intro p {
    font-size: clamp(15px, 1.1vw, 17px);
    line-height: 1.85;
}

/* ---------- the form ---------- */
.sub-form {
    max-width: 1000px;
    margin: 0 auto;
}

.sub-panel {
    margin-top: clamp(26px, 2.6vw, 42px);
    padding: clamp(24px, 2.6vw, 44px);
    border: 1px solid var(--border-line);
    border-radius: 20px;
    background: #fff;
    box-shadow: 0 14px 34px rgba(0, 32, 63, .07);
}

/* grouping for screen readers; visually it is all one sheet */
.sub-block {
    margin: 0;
    padding: 0;
    border: 0;
}

.sub-block + .sub-block {
    margin-top: clamp(26px, 2.6vw, 40px);
}

.sub-legend {
    float: none;
    width: auto;
    margin-bottom: clamp(16px, 1.6vw, 24px);
    padding: 0 0 12px;
    border-bottom: 1px solid var(--border-line);
    font-family: var(--font-head);
    font-weight: 700;
    font-size: clamp(17px, 1.35vw, 21px);
    color: var(--navy);
}

.icset-form .form-label {
    margin-bottom: 7px;
    font-family: var(--font-body);
    font-weight: 500;
    font-size: 13.5px;
    color: var(--navy);
}

.icset-form .req {
    color: var(--error);
}

.icset-form .form-control[readonly] {
    background-color: var(--surface-tint);
    color: var(--navy);
    font-weight: 500;
    cursor: default;
}

.icset-form .form-control[readonly]:focus {
    border-color: var(--border-line);
    box-shadow: none;
}

/* ---------- file drop ---------- */
.sub-drop {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: clamp(28px, 3vw, 46px) 20px;
    border: 2px dashed var(--border-line);
    border-radius: 16px;
    background: var(--surface-tint);
    text-align: center;
    cursor: pointer;
    transition: border-color .3s ease, background .3s ease;
}

.sub-drop:hover,
.sub-drop:focus-within {
    border-color: var(--mint);
    background: rgba(54, 236, 222, .07);
}

.sub-drop-icon {
    width: 52px;
    height: 52px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(54, 236, 222, .18);
    color: var(--navy);
    font-size: 24px;
}

.sub-drop-text {
    font-family: var(--font-head);
    font-weight: 700;
    font-size: clamp(15px, 1.1vw, 17px);
    color: var(--navy);
}

.sub-drop-hint {
    font-size: 12.5px;
    color: var(--text-muted);
}

.sub-file-name {
    margin: 12px 0 0;
    font-size: 13.5px;
    color: var(--navy);
}

.sub-file-name:empty {
    margin: 0;
}

.sub-submit {
    margin-top: clamp(20px, 2vw, 30px);
}

/* ---------- guidelines page ---------- */
.guidelines-section {
    background: var(--surface-tint);
}

.gl-block {
    max-width: 980px;
    margin: 0 auto clamp(18px, 1.8vw, 28px);
    padding: clamp(22px, 2.2vw, 36px);
    border-radius: 20px;
    background: #fff;
    border: 1px solid var(--border-line);
    box-shadow: 0 14px 34px rgba(0, 32, 63, .07);
}

.gl-block h2 {
    margin: 0 0 6px;
    font-size: clamp(19px, 1.6vw, 26px);
    color: var(--navy);
}

.gl-block h3 {
    margin: clamp(20px, 2vw, 28px) 0 10px;
    font-size: clamp(15px, 1.15vw, 18px);
    color: var(--navy);
}

.gl-list {
    list-style: none;
    margin: 14px 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.gl-list li {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    font-size: clamp(14px, 1.02vw, 15.5px);
    line-height: 1.75;
    color: var(--color-body);
}

.gl-list li i {
    flex-shrink: 0;
    width: 22px;
    height: 22px;
    margin-top: 4px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(54, 236, 222, .18);
    color: var(--navy);
    font-size: 12px;
}

.gl-list b {
    font-family: var(--font-head);
    font-weight: 700;
    color: var(--navy);
}

/* numbered steps, for the evaluation flow */
.gl-steps {
    counter-reset: gl;
    list-style: none;
    margin: 14px 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.gl-steps li {
    position: relative;
    padding-left: 46px;
    font-size: clamp(14px, 1.02vw, 15.5px);
    line-height: 1.75;
    color: var(--color-body);
}

.gl-steps li::before {
    counter-increment: gl;
    content: counter(gl, decimal-leading-zero);
    position: absolute;
    left: 0;
    top: 1px;
    width: 30px;
    height: 30px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 9px;
    background: var(--gradient);
    color: #fff;
    font-family: var(--font-num);
    font-weight: 700;
    font-size: 12.5px;
}

.gl-steps b {
    font-family: var(--font-head);
    font-weight: 700;
    color: var(--navy);
}

/* two abreast, for lists where each step is short */
.gl-steps--two {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: clamp(18px, 2vw, 34px);
    row-gap: clamp(14px, 1.5vw, 22px);
}

.gl-steps--two li {
    padding: 16px 18px 16px 58px;
    border-radius: 14px;
    background: var(--surface-tint);
    border: 1px solid var(--border-line);
    transition: background .3s ease, border-color .3s ease, transform .3s cubic-bezier(.22, .61, .36, 1);
}

.gl-steps--two li::before {
    left: 16px;
    top: 16px;
}

.gl-steps--two li:hover {
    background: #fff;
    border-color: var(--mint);
    transform: translateY(-4px);
}

.gl-cta {
    margin-top: clamp(20px, 2vw, 28px);
}

.gl-help {
    max-width: 980px;
    margin: 0 auto;
    padding: clamp(20px, 2vw, 30px);
    border-radius: 20px;
    background: var(--gradient);
    color: var(--text-subhead);
    text-align: center;
}

.gl-help p {
    margin: 0;
    color: var(--text-subhead);
}

.gl-help a {
    font-family: var(--font-head);
    font-weight: 700;
    color: var(--mint);
}

.gl-help a:hover {
    color: var(--mint-hover);
}

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

    .sub-drop {
        transition: none;
    }
}

/* =====================================================
   MODE OF PRESENTATION - tabbed guidelines
   ===================================================== */
.presentation-section {
    background: var(--surface-tint);
}

.pm-tabs {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(10px, 1.1vw, 18px);
    padding: 0;
    margin: 0 0 clamp(24px, 2.4vw, 40px);
    border: 0;
    list-style: none;
}

.pm-tab {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    padding: clamp(18px, 1.9vw, 28px) 14px;
    border: 1px solid var(--border-line);
    border-radius: 18px;
    background: #fff;
    cursor: pointer;
    transition: transform .35s cubic-bezier(.22, .61, .36, 1), border-color .35s ease, box-shadow .35s ease;
}

/* navy fill that wipes up from the bottom when the tab is chosen */
.pm-tab::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: var(--gradient);
    transform: translateY(101%);
    transition: transform .4s cubic-bezier(.22, .61, .36, 1);
}

.pm-tab:hover {
    transform: translateY(-4px);
    border-color: var(--mint);
    box-shadow: 0 16px 34px rgba(0, 32, 63, .12);
}

.pm-tab.active {
    border-color: transparent;
    box-shadow: 0 20px 42px rgba(0, 32, 63, .24);
}

.pm-tab.active::before {
    transform: translateY(0);
}

.pm-tab-icon {
    width: clamp(48px, 4vw, 58px);
    height: clamp(48px, 4vw, 58px);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(54, 236, 222, .18);
    color: var(--navy);
    font-size: clamp(20px, 1.7vw, 24px);
    transition: background .35s ease, color .35s ease, transform .35s cubic-bezier(.22, .61, .36, 1);
}

.pm-tab.active .pm-tab-icon {
    background: var(--mint);
    color: var(--navy);
    transform: scale(1.06);
}

.pm-tab-text {
    font-family: var(--font-head);
    font-weight: 700;
    font-size: clamp(13.5px, 1.05vw, 16px);
    line-height: 1.35;
    color: var(--navy);
    transition: color .35s ease;
}

.pm-tab.active .pm-tab-text {
    color: #fff;
}

.pm-tab:focus {
    outline: 0;
}

.pm-tab:focus-visible {
    outline: 2px solid var(--navy);
    outline-offset: 3px;
}

/* ---------- panes ---------- */
.pm-content {
    padding: clamp(22px, 2.4vw, 40px);
    border: 1px solid var(--border-line);
    border-radius: 20px;
    background: #fff;
    box-shadow: 0 14px 34px rgba(0, 32, 63, .07);
}

/* one tall shot beside two stacked, with a seal over the corner */
.pm-collage {
    position: relative;
    display: grid;
    grid-template-columns: 1.55fr 1fr;
    grid-template-rows: repeat(2, 1fr);
    gap: clamp(10px, 1vw, 16px);
    padding-bottom: clamp(26px, 2.6vw, 40px);
}

.pm-shot {
    margin: 0;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 16px 34px rgba(0, 32, 63, .14);
}

.pm-shot--main {
    grid-column: 1;
    grid-row: 1 / span 2;
}

.pm-shot img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.pm-shot--main img {
    aspect-ratio: 3 / 4;
}

.pm-shot:not(.pm-shot--main) img {
    aspect-ratio: 4 / 3;
}

/* ---------- circular seal ---------- */
.pm-badge {
    position: absolute;
    left: clamp(-14px, -1vw, -6px);
    bottom: 0;
    z-index: 3;
    width: clamp(96px, 9.5vw, 132px);
    height: clamp(96px, 9.5vw, 132px);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--mint);
    box-shadow: 0 14px 32px rgba(0, 32, 63, .28);
    border: 4px solid #fff;
}

.pm-badge-ring {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    animation: pm-seal 22s linear infinite;
}

.pm-badge-ring text {
    font-family: var(--font-num);
    font-weight: 700;
    font-size: 9.4px;
    letter-spacing: .12em;
    fill: var(--navy);
}

@keyframes pm-seal {
    to {
        transform: rotate(360deg);
    }
}

.pm-badge > i {
    position: relative;
    z-index: 1;
    font-size: clamp(24px, 2.4vw, 34px);
    color: var(--navy);
}

.presentation-section .pm-title {
    margin: 0 0 6px;
    font-size: clamp(21px, 1.8vw, 28px);
    color: var(--navy);
}

.presentation-section .pm-sub {
    margin: clamp(20px, 2vw, 28px) 0 4px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--border-line);
    font-size: clamp(16px, 1.25vw, 19px);
    color: var(--navy);
}

.presentation-section .pm-minor {
    margin: clamp(18px, 1.8vw, 24px) 0 2px;
    font-family: var(--font-head);
    font-weight: 700;
    font-size: clamp(14px, 1.08vw, 16px);
    color: var(--navy-2);
}

/* the 6-6-6 rule, nested under its bullet */
.pm-subrules {
    list-style: none;
    margin: 8px 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.pm-subrules li {
    position: relative;
    padding-left: 18px;
    font-size: 13.5px;
    color: var(--text-muted);
}

.pm-subrules li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 9px;
    width: 7px;
    height: 2px;
    border-radius: 2px;
    background: var(--mint);
}

/* poster size callout */
.pm-spec {
    margin-top: clamp(14px, 1.4vw, 20px);
    padding: clamp(16px, 1.6vw, 22px);
    border-radius: 16px;
    background: var(--gradient);
    text-align: center;
}

.pm-spec-label {
    display: block;
    font-family: var(--font-num);
    font-weight: 600;
    font-size: 11px;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--mint);
}

.pm-spec-value {
    display: block;
    margin: 4px 0 2px;
    font-family: var(--font-num);
    font-weight: 700;
    font-size: clamp(22px, 2vw, 30px);
    color: #fff;
}

.pm-spec-note {
    display: block;
    font-size: 12.5px;
    color: var(--text-subhead);
}

/* the two virtual formats */
.pm-types {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: clamp(14px, 1.4vw, 20px);
}

.pm-type {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    border-radius: 12px;
    background: var(--surface-tint);
    border: 1px solid var(--border-line);
    font-family: var(--font-head);
    font-weight: 700;
    font-size: 13.5px;
    color: var(--navy);
    transition: border-color .3s ease, background .3s ease;
}

.pm-type i {
    color: var(--navy-2);
    font-size: 17px;
}

.pm-type:hover {
    background: #fff;
    border-color: var(--mint);
}

.pm-cta {
    margin-top: clamp(24px, 2.4vw, 38px);
}

@media (max-width: 767.98px) {
    .pm-tabs {
        grid-template-columns: minmax(0, 1fr);
    }

    .pm-tab {
        flex-direction: row;
        justify-content: flex-start;
        padding: 14px 18px;
    }

    .pm-tab-icon {
        width: 42px;
        height: 42px;
        font-size: 18px;
    }
}

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

    .pm-shot--main {
        grid-column: 1 / span 2;
        grid-row: 1;
    }

    .pm-shot--main img {
        aspect-ratio: 16 / 10;
    }

    .pm-badge {
        left: auto;
        right: 8px;
    }
}

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

    .pm-tab,
    .pm-tab::before,
    .pm-tab-icon,
    .pm-tab-text,
    .pm-type {
        transition: none;
    }

    .pm-badge-ring {
        animation: none;
    }
}

/* =====================================================
   REGISTRATION GUIDELINES
   ===================================================== */
/* highlighted aside, used for the T&C and refund notes */
.rg-note {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin: clamp(20px, 2vw, 28px) 0 0;
    padding: 14px 18px;
    border-radius: 12px;
    background: rgba(54, 236, 222, .1);
    border: 1px solid rgba(54, 236, 222, .45);
    font-size: clamp(13.5px, 1vw, 15px);
    line-height: 1.7;
    color: var(--color-body);
}

.rg-note i {
    flex-shrink: 0;
    margin-top: 3px;
    color: var(--navy);
    font-size: 16px;
}

.rg-note b {
    font-family: var(--font-head);
    color: var(--navy);
}

/* ---------- what delegates receive ---------- */
.rg-deliverables {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: clamp(10px, 1.1vw, 16px);
    margin-top: clamp(16px, 1.6vw, 24px);
}

.rg-deliverable {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 18px;
    border-radius: 14px;
    background: var(--surface-tint);
    border: 1px solid var(--border-line);
    font-family: var(--font-head);
    font-weight: 700;
    font-size: clamp(13.5px, 1vw, 15px);
    line-height: 1.4;
    color: var(--navy);
    transition: background .3s ease, border-color .3s ease, transform .3s cubic-bezier(.22, .61, .36, 1);
}

.rg-deliverable:hover {
    background: #fff;
    border-color: var(--mint);
    transform: translateY(-4px);
}

.rg-deliverable-icon {
    flex-shrink: 0;
    width: 42px;
    height: 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    background: rgba(54, 236, 222, .18);
    color: var(--navy);
    font-size: 19px;
    transition: background .3s ease;
}

.rg-deliverable:hover .rg-deliverable-icon {
    background: var(--mint);
}

/* ---------- refund tiers ---------- */
.rg-refunds {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(12px, 1.2vw, 20px);
    margin-top: clamp(16px, 1.6vw, 24px);
}

.rg-refund {
    position: relative;
    overflow: hidden;
    padding: clamp(18px, 1.8vw, 26px);
    border-radius: 16px;
    background: #fff;
    border: 1px solid var(--border-line);
    box-shadow: 0 10px 26px rgba(0, 32, 63, .06);
    transition: transform .35s cubic-bezier(.22, .61, .36, 1), box-shadow .35s ease;
}

/* the tier colour, as a cap along the top */
.rg-refund::before {
    content: "";
    position: absolute;
    inset: 0 0 auto;
    height: 4px;
    background: var(--tone, var(--mint));
}

.rg-refund:hover {
    transform: translateY(-5px);
    box-shadow: 0 20px 40px rgba(0, 32, 63, .14);
}

.rg-refund-value {
    display: block;
    margin-bottom: 6px;
    font-family: var(--font-num);
    font-weight: 700;
    font-size: clamp(19px, 1.7vw, 25px);
    color: var(--tone, var(--navy));
}

.rg-refund-note {
    display: block;
    font-size: 13.5px;
    line-height: 1.65;
    color: var(--text-muted);
}

@media (max-width: 767.98px) {
    .rg-refunds {
        grid-template-columns: minmax(0, 1fr);
    }

    .gl-steps--two {
        grid-template-columns: minmax(0, 1fr);
    }
}

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

    .gl-steps--two li,
    .rg-deliverable,
    .rg-deliverable-icon,
    .rg-refund {
        transition: none;
    }
}

/* =====================================================
   VOLUNTEER GUIDELINES  (call-for-volunteers.php)
   Bootstrap 5.3 utilities do the layout, spacing, borders,
   shadows and type in the markup. What is left here is only
   what Bootstrap has no utility for: brand gradients, mint
   glows, hover choreography and the segmented switch.
   ===================================================== */

/* ---------- shared brand bits ---------- */
.vg-mint {
    color: var(--mint);
}

.vg-subhead {
    color: var(--text-subhead);
}

.vg-dark {
    background: var(--gradient);
}

.vg-hairline {
    border-color: rgba(255, 255, 255, .16) !important;
}

/* section number, above every heading */
.vg-num {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
    font-family: var(--font-num);
    font-weight: 700;
    font-size: 12px;
    letter-spacing: .2em;
    color: var(--navy-2);
}

.vg-num::after {
    content: "";
    width: 26px;
    height: 2px;
    border-radius: 2px;
    background: var(--mint);
}

.vg-num--light {
    color: var(--mint);
}

/* round icon chip, three sizes / two tones */
.vg-icon {
    width: clamp(44px, 3.8vw, 54px);
    height: clamp(44px, 3.8vw, 54px);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--surface-tint);
    color: var(--navy);
    font-size: clamp(19px, 1.7vw, 23px);
    transition: background .35s ease, border-color .35s ease, transform .4s cubic-bezier(.22, .61, .36, 1);
}

.vg-icon--navy {
    background: var(--gradient);
    border: 0;
    color: var(--mint);
}

.vg-icon--lg {
    width: 62px;
    height: 62px;
    font-size: 25px;
}

/* small mint tick in the duty lists */
.vg-tick {
    width: 20px;
    height: 20px;
    margin-top: 2px;
    background: rgba(54, 236, 222, .2);
    color: var(--navy);
    font-size: 11px;
}

/* ---------- 01. hero ---------- */
.vg-hero {
    isolation: isolate;
    min-height: clamp(500px, 56vw, 600px);
    padding: clamp(130px, 12vw, 175px) 0 clamp(56px, 5vw, 84px);
    background: var(--gradient);
}

.vg-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -2;
    background: url("../../img/pattern/p-orbit-dark.svg") repeat;
    opacity: .34;
}

.vg-glow {
    z-index: -1;
    border-radius: 50%;
    pointer-events: none;
}

.vg-glow--a {
    top: -22%;
    right: -6%;
    width: min(560px, 58vw);
    height: min(560px, 58vw);
    background: radial-gradient(circle, rgba(54, 236, 222, .3), transparent 66%);
}

.vg-glow--b {
    bottom: -34%;
    left: -10%;
    width: min(480px, 52vw);
    height: min(480px, 52vw);
    background: radial-gradient(circle, rgba(54, 236, 222, .16), transparent 68%);
}

.vg-lines {
    z-index: -1;
    pointer-events: none;
    background-image: repeating-linear-gradient(115deg,
            rgba(255, 255, 255, .06) 0 1px,
            transparent 1px 96px);
    -webkit-mask-image: linear-gradient(180deg, transparent, #000 40%, transparent);
    mask-image: linear-gradient(180deg, transparent, #000 40%, transparent);
}

.vg-badge {
    background: rgba(255, 255, 255, .08);
    border: 1px solid rgba(54, 236, 222, .45);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    font-family: var(--font-num);
    font-weight: 600;
    font-size: 11.5px;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--mint);
}

.vg-dot {
    width: 7px;
    height: 7px;
    background: var(--mint);
    box-shadow: 0 0 0 4px rgba(54, 236, 222, .22);
}

.vg-hero .vg-title {
    font-size: clamp(32px, 4.2vw, 60px);
    line-height: 1.08;
    letter-spacing: -.01em;
}

.vg-shot {
    border-color: rgba(255, 255, 255, .16) !important;
    box-shadow: 0 34px 70px rgba(0, 8, 20, .5);
}

.vg-shot img {
    aspect-ratio: 4 / 3;
    object-fit: cover;
}

/* glass panel over the photo */
.vg-glass {
    background: rgba(255, 255, 255, .1);
    border: 1px solid rgba(255, 255, 255, .2);
    -webkit-backdrop-filter: blur(16px) saturate(150%);
    backdrop-filter: blur(16px) saturate(150%);
    box-shadow: 0 18px 40px rgba(0, 8, 20, .4);
}

/* ---------- 02. why volunteer ---------- */
.vg-sticky {
    position: sticky;
    top: 120px;
}

.vg-rule {
    width: 64px;
    height: 3px;
    background: linear-gradient(90deg, var(--mint), rgba(54, 236, 222, 0));
}

.vg-arrow-link {
    color: var(--navy);
    transition: gap .3s ease, color .3s ease;
}

.vg-arrow-link i {
    color: var(--mint-hover);
    transition: transform .3s cubic-bezier(.22, .61, .36, 1);
}

.vg-arrow-link:hover,
.vg-arrow-link:focus-visible {
    gap: 14px !important;
    color: var(--navy-2);
}

.vg-arrow-link:hover i {
    transform: translateX(3px);
}

.vg-why-shot img {
    aspect-ratio: 4 / 5;
    object-fit: cover;
}

.vg-why-cap {
    background: linear-gradient(180deg, transparent, rgba(0, 32, 63, .88));
    color: #fff;
}

/* rows, not cards: a tint sweeps in and a mint marker grows */
.vg-benefit {
    isolation: isolate;
    transition: padding-left .4s cubic-bezier(.22, .61, .36, 1);
}

.vg-benefit::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(90deg, rgba(54, 236, 222, .13), rgba(54, 236, 222, 0) 72%);
    opacity: 0;
    transform: translateX(-16px);
    transition: opacity .4s ease, transform .45s cubic-bezier(.22, .61, .36, 1);
}

.vg-benefit::after {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    width: 3px;
    height: 0;
    border-radius: 3px;
    background: var(--mint);
    transform: translateY(-50%);
    transition: height .4s cubic-bezier(.22, .61, .36, 1);
}

.vg-benefit:hover {
    padding-left: 1.75rem;
}

.vg-benefit:hover::before {
    opacity: 1;
    transform: translateX(0);
}

.vg-benefit:hover::after {
    height: 62%;
}

.vg-benefit-no {
    font-size: clamp(22px, 2.1vw, 30px);
    font-family: var(--font-num);
    color: var(--border-line);
    transition: color .35s ease;
}

.vg-benefit:hover .vg-benefit-no {
    color: var(--mint-hover);
}

.vg-benefit:hover .vg-icon {
    background: var(--mint);
    border-color: transparent !important;
    transform: translateY(-3px) rotate(-6deg);
}

/* ---------- 03. opportunities ---------- */
.vg-switch {
    --bs-nav-link-padding-x: 0;
}

.vg-switch-btn {
    background: transparent;
    font-family: var(--font-head);
    font-size: clamp(13px, 1vw, 15px);
    line-height: 1.3;
    color: var(--navy);
    cursor: pointer;
    transition: background .35s ease, color .35s ease, box-shadow .35s ease;
}

.vg-switch-btn i {
    font-size: 17px;
}

.vg-switch-btn:hover {
    background: var(--surface-tint);
}

.vg-switch-btn.active {
    background: var(--gradient);
    color: #fff;
    box-shadow: 0 12px 26px rgba(0, 32, 63, .3);
}

.vg-switch-btn:focus {
    outline: 0;
}

.vg-switch-btn:focus-visible {
    outline: 2px solid var(--navy);
    outline-offset: 3px;
}

/* the fact chips under the switch */
.vg-chip {
    background: #fff;
    border: 1px solid var(--border-line);
    color: var(--navy);
    transition: border-color .3s ease, transform .3s cubic-bezier(.22, .61, .36, 1);
}

.vg-chip i {
    color: var(--mint-hover);
    font-size: 15px;
}

.vg-chip:hover {
    border-color: var(--mint);
    transform: translateY(-2px);
}

/* ---------- role cards ----------
   A navy head band carries the icon, title and number; the duties sit
   on white below it. No floating accent line - the band is the accent. */
.vg-role {
    border: 1px solid var(--border-line);
    box-shadow: 0 12px 30px rgba(0, 32, 63, .07);
    transition: transform .4s cubic-bezier(.22, .61, .36, 1), box-shadow .4s ease, border-color .4s ease;
}

.vg-role-head {
    position: relative;
    isolation: isolate;
    background: var(--gradient);
}

/* mint wash that fills the band from the left on hover */
.vg-role-head::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(90deg, rgba(54, 236, 222, .35), rgba(54, 236, 222, 0) 78%);
    opacity: 0;
    transition: opacity .45s ease;
}

/* hairline of mint along the bottom of the band */
.vg-role-head::after {
    content: "";
    position: absolute;
    inset: auto 0 0;
    height: 2px;
    background: var(--mint);
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform .5s cubic-bezier(.22, .61, .36, 1);
}

.vg-role-icon {
    width: 42px;
    height: 42px;
    background: rgba(54, 236, 222, .18);
    color: var(--mint);
    font-size: 19px;
    transition: background .35s ease, color .35s ease, transform .4s cubic-bezier(.22, .61, .36, 1);
}

.vg-role-no {
    font-family: var(--font-num);
    font-size: 22px;
    color: rgba(255, 255, 255, .28);
    transition: color .35s ease;
}

.vg-role:hover {
    transform: translateY(-6px);
    border-color: rgba(54, 236, 222, .55);
    box-shadow: 0 24px 48px rgba(0, 32, 63, .18);
}

.vg-role:hover .vg-role-head::before,
.vg-role:hover .vg-role-head::after {
    opacity: 1;
    transform: scaleX(1);
}

.vg-role:hover .vg-role-icon {
    background: var(--mint);
    color: var(--navy);
    transform: rotate(-8deg);
}

.vg-role:hover .vg-role-no {
    color: var(--mint);
}

.vg-role:hover .vg-tick {
    background: var(--mint);
}

.vg-tick {
    transition: background .35s ease;
}

/* ---------- 04. requirements ----------
   Cards on a dashed rail: each number badge punches through the card's
   bottom edge and drops a short stem onto the line beneath. */
.vg-track {
    padding-bottom: 6rem;
}

.vg-req {
    transition: background .35s ease, border-color .35s ease, transform .35s cubic-bezier(.22, .61, .36, 1);
}

.vg-req:hover {
    background: #fff !important;
    border-color: var(--mint) !important;
    transform: translateY(-4px);
}

/* the requirement's icon, kept as a faint watermark */
.vg-req-mark {
    top: 14px;
    right: 18px;
    font-size: 58px;
    line-height: 1;
    color: rgba(0, 32, 63, .06);
    transition: color .35s ease, transform .4s cubic-bezier(.22, .61, .36, 1);
}

.vg-req:hover .vg-req-mark {
    color: rgba(54, 236, 222, .3);
    transform: translateY(-3px) rotate(-6deg);
}

/* number badge, half outside the card */
.vg-req-no {
    right: 26px;
    bottom: -38px;
    width: 76px;
    height: 76px;
    background: var(--surface-tint);
    border: 8px solid #fff;
    color: var(--navy);
    font-family: var(--font-num);
    font-size: 22px;
    transition: background .35s ease, color .35s ease, transform .4s cubic-bezier(.22, .61, .36, 1);
}

/* the stem down to the rail, with a dot where it leaves the badge */
.vg-req-no::before {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    width: 5px;
    height: 5px;
    margin-left: -2.5px;
    border-radius: 50%;
    background: var(--navy-2);
    opacity: .55;
}

.vg-req-no::after {
    content: "";
    position: absolute;
    top: calc(100% + 5px);
    left: 50%;
    width: 0;
    height: 22px;
    margin-left: -1px;
    border-left: 2px dashed rgba(1, 51, 90, .45);
}

.vg-req:hover .vg-req-no {
    background: var(--mint);
    color: var(--navy);
    transform: translateY(-4px);
}

/* the dashed rail itself */
.vg-track-line {
    bottom: 1.9rem;
    height: 0;
    border-top: 2px dashed rgba(1, 51, 90, .45);
}

.vg-track-line::before,
.vg-track-line::after {
    content: "";
    position: absolute;
    top: -5px;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--navy-2);
}

.vg-track-line::before {
    left: -4px;
}

.vg-track-line::after {
    right: -4px;
}

/* the rail only reads with four cards abreast */
@media (max-width: 1199.98px) {
    .vg-track {
        padding-bottom: 3.5rem;
    }

    .vg-track-line {
        display: none;
    }

    .vg-req-no::before,
    .vg-req-no::after {
        display: none;
    }

    .vg-req-no {
        right: 20px;
        bottom: -30px;
        width: 62px;
        height: 62px;
        border-width: 6px;
        font-size: 18px;
    }
}

@media (max-width: 767.98px) {
    .vg-track {
        padding-bottom: 2.5rem;
    }
}

/* ---------- 05. how to apply ---------- */
/* ---------- 05. how to apply: one row, read left to right ----------
   The dashed run and the chevrons live on the steps themselves rather
   than on a line behind them, so the connector cannot fall out of step
   with the cards when the grid reflows. */
.vg-flow {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: clamp(16px, 1.8vw, 30px);
    align-items: stretch;
}

.vg-flow-step {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: clamp(22px, 2.2vw, 32px) clamp(16px, 1.6vw, 24px) clamp(22px, 2.2vw, 30px);
    border-radius: 20px;
    background: #fff;
    border: 1px solid var(--border-line);
    box-shadow: 0 14px 32px rgba(0, 32, 63, .07);
    transition: transform .4s cubic-bezier(.22, .61, .36, 1), border-color .4s ease, box-shadow .4s ease;
}

.vg-flow-step:hover {
    transform: translateY(-6px);
    border-color: var(--mint);
    box-shadow: 0 26px 52px rgba(0, 32, 63, .14);
}

/* the last step is the deadline, so it carries the mint tint */
.vg-flow-step--last {
    background: linear-gradient(160deg, #fff 0%, rgba(54, 236, 222, .16) 100%);
    border-color: var(--mint);
}

/* the run across the gap to the next step */
.vg-flow-step:not(:last-child)::after {
    content: "";
    position: absolute;
    top: calc(clamp(22px, 2.2vw, 32px) + 27px);
    left: 100%;
    width: clamp(16px, 1.8vw, 30px);
    border-top: 2px dashed color-mix(in srgb, var(--mint) 60%, var(--border-line));
    pointer-events: none;
}

.vg-flow-arrow {
    position: absolute;
    top: calc(clamp(22px, 2.2vw, 32px) + 27px);
    left: 100%;
    z-index: 1;
    transform: translate(calc(clamp(16px, 1.8vw, 30px) / 2 - 50%), -50%);
    width: 22px;
    height: 22px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--mint);
    color: var(--navy);
    font-size: 11px;
    box-shadow: 0 4px 10px rgba(0, 32, 63, .16);
}

/* ---------- the node ---------- */
.vg-flow-no {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 54px;
    height: 54px;
    margin-bottom: clamp(14px, 1.4vw, 20px);
    border-radius: 50%;
    background: var(--gradient);
    color: var(--mint);
    font-family: var(--font-num);
    font-variant-numeric: tabular-nums;
    font-weight: 700;
    font-size: 16px;
    box-shadow: 0 10px 22px rgba(0, 32, 63, .22);
    transition: transform .4s cubic-bezier(.22, .61, .36, 1);
}

.vg-flow-step:hover .vg-flow-no {
    transform: translateY(-3px) scale(1.05);
}

.vg-flow-step--last .vg-flow-no {
    background: linear-gradient(145deg, var(--mint) 0%, var(--mint-hover) 100%);
    color: var(--navy);
}

/* ---------- the wording ---------- */
.vg-flow-title {
    margin: 0 0 8px;
    font-family: var(--font-head);
    font-weight: 700;
    font-size: clamp(14.5px, 1.15vw, 16.5px);
    line-height: 1.35;
    color: var(--navy);
}

.vg-flow-text {
    margin: 0;
    font-size: clamp(12.5px, .95vw, 13.5px);
    line-height: 1.7;
    color: var(--text-muted);
}

/* whatever closes a step sits on the same baseline across the row */
/* whatever closes a step sits on the same baseline across the row.
   NB: no padding here - the class lands on the button itself, and zeroing
   padding-top would cancel half of .icset-btn--sm and push the label up. */
.vg-flow-end {
    margin-top: auto;
    align-self: center;
}

/* the button carries a wide mint glow for full-width use; inside a card
   this narrow it just smudges the corner, so bring it in */
.vg-flow-step .icset-btn--solid.vg-flow-end {
    box-shadow: 0 8px 18px rgba(54, 236, 222, .34);
}

.vg-flow-step .icset-btn--solid.vg-flow-end:hover {
    box-shadow: 0 12px 24px rgba(54, 236, 222, .42);
}

.vg-flow-step > .vg-flow-title + .vg-flow-text {
    margin-bottom: clamp(14px, 1.4vw, 20px);
}

/* ---------- responsive ----------
   Two across still reads as a route; one across turns the run upright.
   Either way the horizontal connector has to go, or it points into a gap
   that is no longer there. */
@media (max-width: 991.98px) {
    .vg-flow {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .vg-flow-step:not(:last-child)::after,
    .vg-flow-arrow {
        display: none;
    }
}

@media (max-width: 575.98px) {
    .vg-flow {
        grid-template-columns: minmax(0, 1fr);
    }

    /* upright run between the stacked steps */
    .vg-flow-step:not(:last-child)::after {
        display: block;
        top: 100%;
        left: 50%;
        width: 0;
        height: clamp(16px, 1.8vw, 30px);
        border-top: 0;
        border-left: 2px dashed color-mix(in srgb, var(--mint) 60%, var(--border-line));
    }
}

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

    .vg-flow-step,
    .vg-flow-no {
        transition: none;
    }

    .vg-flow-step:hover,
    .vg-flow-step:hover .vg-flow-no {
        transform: none;
    }
}

.vg-deadline {
    align-self: flex-start;
    background: var(--gradient);
    color: #fff;
    font-family: var(--font-num);
    font-size: clamp(13px, 1vw, 15px);
}

.vg-deadline i {
    color: var(--mint);
}

/* ---------- 06. apply ---------- */
.vg-file-btn {
    background: var(--gradient);
    color: #fff;
    font-family: var(--font-btn);
    font-size: 14px;
    cursor: pointer;
    transition: transform .3s cubic-bezier(.22, .61, .36, 1), box-shadow .3s ease;
}

.vg-file-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 24px rgba(0, 32, 63, .26);
}

.vg-file:focus-within .vg-file-btn,
input[type="file"]:focus-visible + .vg-file-btn {
    outline: 2px solid var(--mint);
    outline-offset: 3px;
}

#vg-cv-name.is-set {
    font-family: var(--font-head);
    font-weight: 700;
    color: var(--navy) !important;
}

.vg-aside-img {
    aspect-ratio: 16 / 10;
    object-fit: cover;
}

/* ---------- 07. contact ---------- */
.vg-mail {
    background: var(--mint);
    color: var(--navy);
    font-family: var(--font-head);
    font-size: clamp(14px, 1.1vw, 16px);
    transition: background .3s ease, transform .3s cubic-bezier(.22, .61, .36, 1);
}

.vg-mail:hover,
.vg-mail:focus-visible {
    background: var(--mint-hover);
    color: var(--navy);
    transform: translateY(-3px);
}

/* ---------- 08. final CTA ---------- */
.vg-cta {
    isolation: isolate;
    background: var(--gradient);
}

.vg-cta::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -2;
    background: url("../../img/pattern/p-lattice-dark.svg") repeat;
    opacity: .3;
}

.vg-cta h2 {
    font-size: clamp(24px, 2.8vw, 40px);
    line-height: 1.2;
}

/* ---------- responsive ---------- */
@media (min-width: 992px) {
    .vg-switch {
        border-radius: 999px !important;
    }
}

@media (max-width: 991.98px) {
    .vg-hero {
        min-height: 0;
    }

    .vg-sticky {
        position: static;
    }
}

@media (max-width: 575.98px) {
    .vg-glass {
        left: 0;
    }

    .vg-file-btn {
        width: 100%;
        justify-content: center;
    }
}

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

    .vg-benefit,
    .vg-benefit::before,
    .vg-benefit::after,
    .vg-benefit-no,
    .vg-icon,
    .vg-role,
    .vg-role-head::before,
    .vg-role-head::after,
    .vg-role-icon,
    .vg-role-no,
    .vg-chip,
    .vg-tick,
    .vg-req,
    .vg-req-mark,
    .vg-req-no,
    .vg-flow-step,
    .vg-flow-no,
    .vg-switch-btn,
    .vg-file-btn,
    .vg-mail,
    .vg-arrow-link,
    .vg-arrow-link i {
        transition: none;
    }
}

/* =====================================================
   JOURNALS & PUBLICATIONS
   ===================================================== */
/* tighter than a full .section - this block is only three lines of copy */
.jp-intro {
    position: relative;
    padding: clamp(44px, 4.6vw, 76px) 0 clamp(28px, 3vw, 46px);
}

.jp-quote {
    font-family: var(--font-head);
    font-size: clamp(15px, 1.35vw, 20px);
    line-height: 1.55;
    color: var(--navy);
}

/* ---------- indexing database panel ---------- */
.jp-index-section {
    position: relative;
    padding: clamp(20px, 2.4vw, 40px) 0 clamp(56px, 6vw, 100px);
    background: #fff;
}

.jp-panel {
    isolation: isolate;
    background: var(--gradient);
    box-shadow: 0 26px 60px rgba(0, 32, 63, .26);
}

.jp-panel::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -2;
    background: url("../../img/pattern/p-dots.svg") repeat;
    opacity: .3;
}

.jp-panel::after {
    content: "";
    position: absolute;
    z-index: -1;
    top: -34%;
    right: -8%;
    width: min(460px, 52vw);
    height: min(460px, 52vw);
    border-radius: 50%;
    background: radial-gradient(circle, rgba(54, 236, 222, .24), transparent 66%);
    pointer-events: none;
}

.jp-panel-title {
    font-family: var(--font-head);
    font-weight: 700;
    font-size: clamp(24px, 2.6vw, 38px);
    line-height: 1.2;
}

.jp-panel-note {
    max-width: 760px;
    font-size: clamp(13.5px, 1vw, 15.5px);
    line-height: 1.8;
    color: var(--text-subhead);
}

/* the shared logo chips sit on white inside the navy panel */
.jp-panel .pp-logo {
    border-color: transparent;
    box-shadow: 0 8px 20px rgba(0, 8, 20, .28);
}

.jp-panel .pp-logo:hover {
    border-color: var(--mint);
    box-shadow: 0 14px 28px rgba(0, 8, 20, .38);
}

/* ---------- publications in journals ----------
   Testimonial layout: a quoted panel with the icon medallion punching
   through its lower edge, and the name and issue types beneath. */
.pj-section {
    isolation: isolate;
    background: var(--gradient);
}

.pj-section::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -2;
    background: url("../../img/pattern/p-lattice.svg") repeat;
    opacity: .32;
}

.pj-section .eyebrow {
    color: var(--mint);
}

.pj-section .section-header h2 {
    color: #fff;
}

.pj-section .section-header p {
    color: var(--text-subhead);
}

/* navy-on-navy would vanish, so the gradient words go mint */
.pj-section .text-gradient {
    background: linear-gradient(105deg, var(--mint) 0%, #7BF7EC 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.pj-panel {
    background: rgba(255, 255, 255, .06);
    border: 1px solid rgba(255, 255, 255, .1);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    transition: background .4s ease, border-color .4s ease, transform .4s cubic-bezier(.22, .61, .36, 1);
}

.pj-card:hover .pj-panel {
    background: rgba(255, 255, 255, .1);
    border-color: rgba(54, 236, 222, .45);
    transform: translateY(-6px);
}

/* the oversized quote mark, half above the panel */
.pj-mark {
    margin-top: -26px;
    font-size: 58px;
    line-height: 1;
    color: var(--mint);
    text-shadow: 0 8px 22px rgba(54, 236, 222, .35);
    transition: transform .4s cubic-bezier(.22, .61, .36, 1);
}

.pj-card:hover .pj-mark {
    transform: translateY(-3px);
}

.pj-text {
    font-size: clamp(13.5px, 1vw, 15px);
    color: var(--text-subhead);
}

/* name block, divided from the quote above it */
.pj-meta {
    border-top: 1px solid rgba(255, 255, 255, .12);
    transition: border-color .4s ease;
}

.pj-card:hover .pj-meta {
    border-color: rgba(54, 236, 222, .35);
}

.pj-card--top .pj-meta {
    border-color: rgba(54, 236, 222, .3);
}

/* medallion punching through the panel's lower edge */
.pj-avatar {
    bottom: -36px;
    z-index: 2;
    width: 72px;
    height: 72px;
    background: linear-gradient(140deg, var(--mint) 0%, var(--mint-hover) 100%);
    border: 6px solid var(--navy);
    color: var(--navy);
    font-size: 26px;
    box-shadow: 0 12px 28px rgba(0, 8, 20, .5);
    transition: transform .4s cubic-bezier(.22, .61, .36, 1), box-shadow .4s ease;
}

.pj-card:hover .pj-avatar {
    transform: translateX(-50%) translateY(-4px) rotate(-8deg);
    box-shadow: 0 16px 34px rgba(54, 236, 222, .38);
}

/* each issue type carries its own colour in --tone */
.pj-tag {
    background: color-mix(in srgb, var(--tone) 16%, transparent);
    border: 1px solid color-mix(in srgb, var(--tone) 45%, transparent);
    font-family: var(--font-head);
    font-weight: 700;
    font-size: 11.5px;
    line-height: 1.4;
    color: var(--tone);
    transition: background .3s ease, border-color .3s ease, transform .3s cubic-bezier(.22, .61, .36, 1);
}

.pj-tag i {
    font-size: 12px;
}

.pj-card:hover .pj-tag {
    background: color-mix(in srgb, var(--tone) 26%, transparent);
    border-color: var(--tone);
    transform: translateY(-2px);
}

/* the premium tier reads as lit before any interaction */
.pj-card--top .pj-panel {
    background: rgba(54, 236, 222, .1);
    border-color: rgba(54, 236, 222, .5);
}

.pj-card--top .pj-avatar {
    box-shadow: 0 14px 32px rgba(54, 236, 222, .45);
}

@media (max-width: 575.98px) {
    .pj-mark {
        font-size: 48px;
    }

    .pj-avatar {
        width: 62px;
        height: 62px;
        bottom: -31px;
        font-size: 22px;
    }
}

/* ---------- publication queries modal ---------- */
.pq-lead {
    font-family: var(--font-head);
    font-size: clamp(17px, 1.5vw, 22px);
    color: var(--navy-2);
}

.pq-journal {
    margin-top: 4px;
    font-family: var(--font-num);
    font-weight: 600;
    font-size: 12px;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--mint-hover);
}

.pq-journal:empty {
    display: none !important;
}

/* labels sit to the left of their field, as in the reference */
.pq-form .col-form-label {
    font-family: var(--font-body);
    font-size: 14px;
    line-height: 1.5;
    color: var(--color-body);
}

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

    .pj-panel,
    .pj-mark,
    .pj-avatar,
    .pj-tag {
        transition: none;
    }
}

.jp-lead {
    font-size: clamp(14px, 1.02vw, 15.5px);
    line-height: 1.85;
    color: var(--text-muted);
}

/* =====================================================
   ABOUT CONFERENCE  (about.php)
   Layout comes from Bootstrap utilities; these are the brand bits.
   ===================================================== */
.ab-text {
    font-size: clamp(14px, 1.02vw, 15.5px);
    line-height: 1.9;
    color: var(--color-body);
}

/* ---------- overview ----------
   A photo sitting on an offset mint outline, with a circular inset
   overlapping its left edge, beside the copy column. */
.ov-visual {
    padding: clamp(18px, 2.2vw, 32px) clamp(18px, 2.2vw, 32px) 0 clamp(30px, 4vw, 56px);
}

/* the outline the photo is offset against */
.ov-frame {
    left: clamp(12px, 1.6vw, 24px);
    top: clamp(38px, 4.4vw, 66px);
    right: clamp(38px, 4.4vw, 66px);
    bottom: clamp(-34px, -3.4vw, -20px);
    border: 3px solid var(--mint);
    border-radius: 20px;
    pointer-events: none;
}

.ov-shot {
    box-shadow: 0 26px 56px rgba(0, 32, 63, .2);
}

.ov-shot img {
    width: 100%;
    display: block;
    aspect-ratio: 4 / 4.6;
    object-fit: cover;
}

/* the round inset, hanging off the left edge */
.ov-inset {
    left: 0;
    top: 38%;
    width: clamp(110px, 15vw, 190px);
    aspect-ratio: 1;
    border: 6px solid #fff;
    box-shadow: 0 18px 40px rgba(0, 32, 63, .26);
}

.ov-inset img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* ---------- copy column ---------- */
.ov-tag {
    background: var(--mint);
    color: var(--navy);
    font-family: var(--font-num);
    font-size: 11.5px;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.ov-title {
    font-size: clamp(26px, 3vw, 44px);
    line-height: 1.15;
}

.ov-lead {
    font-size: clamp(14px, 1.05vw, 16px);
    line-height: 1.9;
    color: var(--text-muted);
}

/* the two headline facts */
.ov-fact {
    padding: 14px 16px;
    border-radius: 14px;
    background: var(--surface-tint);
    border: 1px solid var(--border-line);
    transition: background .3s ease, border-color .3s ease;
}

.ov-fact:hover {
    background: #fff;
    border-color: var(--mint);
}

.ov-fact-icon {
    width: 46px;
    height: 46px;
    background: #fff;
    border: 1px solid var(--border-line);
    color: var(--navy);
    font-size: 20px;
    transition: background .3s ease, border-color .3s ease;
}

.ov-fact:hover .ov-fact-icon {
    background: var(--mint);
    border-color: transparent;
}

.ov-fact-value {
    font-family: var(--font-num);
    font-size: clamp(18px, 1.6vw, 23px);
    color: var(--navy);
}

.ov-fact-label {
    color: var(--text-muted);
}

/* organiser mark beside the takeaways */
.ov-split {
    padding-top: clamp(18px, 2vw, 26px);
    border-top: 1px solid var(--border-line);
}

.ov-host {
    padding-right: clamp(18px, 2vw, 28px);
    border-right: 1px solid var(--border-line);
}

.ov-host-logo {
    width: clamp(120px, 13vw, 160px);
    height: auto;
    filter: brightness(0) saturate(100%) invert(9%) sepia(38%) saturate(2492%) hue-rotate(184deg) brightness(95%) contrast(101%);
}

.ov-host-label {
    color: var(--text-muted);
}

.ov-points li {
    font-size: clamp(13px, .98vw, 14.5px);
    line-height: 1.6;
    color: var(--color-body);
}

.ov-points i {
    flex-shrink: 0;
    color: var(--mint-hover);
    font-size: 16px;
}

.ov-btn {
    background: var(--mint);
    border-color: transparent;
}

.ov-btn:hover,
.ov-btn:focus-visible {
    background: var(--mint-hover);
    border-color: transparent;
}

.ov-btn .ws-btn-chip {
    background: var(--navy);
    border-color: transparent;
    color: var(--mint);
}

@media (max-width: 991.98px) {
    .ov-visual {
        padding-bottom: clamp(26px, 5vw, 40px);
    }
}

@media (max-width: 575.98px) {
    .ov-host {
        padding-right: 0;
        border-right: 0;
        padding-bottom: 14px;
        border-bottom: 1px solid var(--border-line);
        width: 100%;
    }
}

/* ---------- facts strip ---------- */
.ab-facts {
    background: var(--gradient);
    box-shadow: 0 22px 50px rgba(0, 32, 63, .2);
}

.ab-fact {
    border-right: 1px solid rgba(255, 255, 255, .12);
    transition: background .35s ease;
}

.ab-fact:hover {
    background: rgba(255, 255, 255, .06);
}

.ab-facts .col:last-child .ab-fact {
    border-right: 0;
}

.ab-fact-icon {
    width: 46px;
    height: 46px;
    background: rgba(54, 236, 222, .18);
    color: var(--mint);
    font-size: 20px;
}

.ab-fact-value {
    font-family: var(--font-num);
    font-size: clamp(20px, 1.9vw, 27px);
    color: #fff;
}

.ab-fact-label {
    color: var(--text-subhead);
}

/* ---------- purpose & vision ---------- */
.ab-rail-line {
    top: 66px;
    height: 0;
    border-top: 2px dashed rgba(1, 51, 90, .3);
    z-index: 0;
}

.ab-purpose {
    z-index: 1;
    transition: transform .35s cubic-bezier(.22, .61, .36, 1), border-color .35s ease, box-shadow .35s ease;
}

.ab-purpose:hover {
    transform: translateY(-6px);
    border-color: var(--mint) !important;
    box-shadow: 0 20px 42px rgba(0, 32, 63, .12);
}

.ab-purpose-no {
    width: 52px;
    height: 52px;
    background: var(--gradient);
    color: var(--mint);
    font-family: var(--font-num);
    font-size: 16px;
    transition: background .35s ease, color .35s ease, transform .4s cubic-bezier(.22, .61, .36, 1);
}

.ab-purpose:hover .ab-purpose-no {
    background: var(--mint);
    color: var(--navy);
    transform: rotate(-6deg);
}

.ab-purpose p {
    font-size: clamp(13.5px, 1vw, 15px);
    color: var(--color-body);
}

/* ---------- conference features: a bento row ----------
   One photo tile carries the keynote, three sit light beside it and
   networking closes the row on navy. --hero / --light / --dark. */
.ab-bento-head h2 {
    font-size: clamp(26px, 2.8vw, 40px);
    line-height: 1.15;
}

.ab-bento-sub {
    font-size: clamp(13.5px, 1.02vw, 15.5px);
    line-height: 1.75;
    color: var(--mint-hover);
}

.ab-tile {
    min-height: clamp(160px, 15vw, 196px);
    transition: transform .4s cubic-bezier(.22, .61, .36, 1), box-shadow .4s ease, border-color .4s ease;
}

.ab-tile:hover {
    transform: translateY(-6px);
}

/* the oversized glyph in the corner of every tile */
.ab-tile-mark {
    right: -12px;
    bottom: -18px;
    font-size: clamp(58px, 5.4vw, 82px);
    line-height: 1;
    pointer-events: none;
    transition: transform .5s cubic-bezier(.22, .61, .36, 1), opacity .4s ease;
}

.ab-tile:hover .ab-tile-mark {
    transform: translate(-6px, -6px) rotate(-8deg);
}

.ab-tile-title {
    font-family: var(--font-head);
    font-weight: 700;
    font-size: clamp(16px, 1.25vw, 19px);
    line-height: 1.3;
    color: var(--navy);
}

.ab-tile-text {
    font-size: clamp(13px, .98vw, 14.5px);
    line-height: 1.75;
    color: var(--text-muted);
}

/* ---------- light tile ---------- */
.ab-tile--light {
    background: #fff;
    border: 1px solid var(--border-line);
    box-shadow: 0 12px 30px rgba(0, 32, 63, .06);
}

.ab-tile--light:hover {
    border-color: var(--mint);
    box-shadow: 0 24px 48px rgba(0, 32, 63, .12);
}

.ab-tile--light .ab-tile-mark {
    color: rgba(0, 32, 63, .05);
}

.ab-tile-icon {
    width: 46px;
    height: 46px;
    background: var(--surface-tint);
    border: 1px solid var(--border-line);
    color: var(--navy);
    font-size: 19px;
    transition: background .35s ease, border-color .35s ease, color .35s ease;
}

.ab-tile--light:hover .ab-tile-icon {
    background: var(--mint);
    border-color: transparent;
}

/* ---------- dark tile ---------- */
.ab-tile--dark {
    background: var(--gradient);
    box-shadow: 0 18px 42px rgba(0, 32, 63, .28);
}

.ab-tile--dark .ab-tile-title {
    color: var(--mint);
}

.ab-tile--dark .ab-tile-text {
    color: var(--text-subhead);
}

.ab-tile--dark .ab-tile-icon {
    background: rgba(54, 236, 222, .16);
    border-color: rgba(54, 236, 222, .4);
    color: var(--mint);
}

.ab-tile--dark .ab-tile-mark {
    color: rgba(54, 236, 222, .1);
}

.ab-tile--dark:hover {
    box-shadow: 0 28px 58px rgba(0, 32, 63, .38);
}

/* ---------- hero tile ---------- */
.ab-tile--hero {
    isolation: isolate;
    min-height: clamp(220px, 21vw, 268px);
    justify-content: flex-end;
    background: var(--gradient);
    box-shadow: 0 22px 50px rgba(0, 32, 63, .3);
}

/* the photo is a real <img>. A url() carried in a custom property is
   resolved against the stylesheet that reads it, not the page, so it
   used to 404 as assets/css/img/... and the tile fell back to navy. */
.ab-tile-shot {
    inset: 0;
    z-index: -2;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
    transition: transform 1.1s cubic-bezier(.22, .61, .36, 1);
}

.ab-tile--hero:hover .ab-tile-shot {
    transform: scale(1.06);
}

.ab-tile--hero::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(180deg, rgba(0, 32, 63, .2) 0%, rgba(0, 32, 63, .5) 46%, rgba(0, 22, 44, .9) 100%);
    pointer-events: none;
}

.ab-tile--hero .ab-tile-title {
    font-size: clamp(22px, 2.4vw, 34px);
    color: #fff;
}

.ab-tile--hero .ab-tile-text {
    font-size: clamp(13.5px, 1.02vw, 15.5px);
    color: var(--text-subhead);
}

.ab-tile--hero .ab-tile-mark {
    color: rgba(54, 236, 222, .3);
}

.ab-tile-tag {
    background: var(--mint);
    color: var(--navy);
    font-family: var(--font-num);
    font-size: 10.5px;
    letter-spacing: .14em;
    text-transform: uppercase;
}

/* ---------- conference theme band ---------- */
.ab-theme,
.ab-cta {
    isolation: isolate;
    background: var(--gradient);
}

.ab-theme::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -2;
    background: url("../../img/gallery/07.jpg") no-repeat center center / cover;
    opacity: .28;
}

.ab-theme::after,
.ab-cta::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background:
        url("../../img/pattern/p-topo-dark.svg") repeat,
        linear-gradient(180deg, rgba(0, 32, 63, .88), rgba(0, 32, 63, .94));
    pointer-events: none;
}

.ab-cta::before {
    background:
        url("../../img/pattern/p-topo-dark.svg") repeat,
        var(--gradient);
    opacity: .9;
}

.ab-theme-glow {
    z-index: -1;
    top: -40%;
    left: 50%;
    width: min(760px, 90vw);
    height: min(760px, 90vw);
    margin-left: min(-380px, -45vw);
    border-radius: 50%;
    background: radial-gradient(circle, rgba(54, 236, 222, .22), transparent 66%);
    pointer-events: none;
}

.ab-theme .eyebrow,
.ab-cta .eyebrow {
    color: var(--mint);
}

.ab-theme-title {
    font-family: var(--font-head);
    font-weight: 700;
    font-size: clamp(24px, 2.8vw, 42px);
    line-height: 1.2;
}

.ab-cta h2 {
    font-size: clamp(24px, 2.6vw, 38px);
    line-height: 1.2;
}

/* ---------- reasons: each card takes its own accent ---------- */
.ab-reason {
    border: 1px solid var(--border-line);
    transition: transform .35s cubic-bezier(.22, .61, .36, 1), border-color .35s ease, box-shadow .35s ease;
}

.ab-reason::before {
    content: "";
    position: absolute;
    inset: 0 0 auto;
    height: 3px;
    background: var(--tone, var(--mint));
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform .45s cubic-bezier(.22, .61, .36, 1);
}

.ab-reason:hover {
    transform: translateY(-6px);
    border-color: color-mix(in srgb, var(--tone) 55%, transparent);
    box-shadow: 0 20px 42px color-mix(in srgb, var(--tone) 22%, transparent);
}

.ab-reason:hover::before {
    transform: scaleX(1);
}

.ab-reason-no {
    font-family: var(--font-num);
    font-size: clamp(24px, 2.2vw, 32px);
    color: color-mix(in srgb, var(--tone) 45%, transparent);
    transition: color .35s ease;
}

.ab-reason:hover .ab-reason-no {
    color: var(--tone);
}

/* ---------- objectives, as a timeline ---------- */
.ab-timeline {
    position: relative;
}

.ab-objective {
    padding-bottom: clamp(18px, 2vw, 28px);
}

/* the line linking the icons */
.ab-objective::before {
    content: "";
    position: absolute;
    left: clamp(24px, 2.1vw, 25px);
    top: 50px;
    bottom: 0;
    width: 2px;
    background: repeating-linear-gradient(180deg, var(--border-line) 0 7px, transparent 7px 13px);
}

.ab-objective:last-child {
    padding-bottom: 0;
}

.ab-objective:last-child::before {
    display: none;
}

.ab-objective-icon {
    position: relative;
    z-index: 1;
    width: 50px;
    height: 50px;
    background: #fff;
    border: 1px solid var(--border-line);
    color: var(--navy);
    font-size: 21px;
    transition: background .35s ease, border-color .35s ease, transform .4s cubic-bezier(.22, .61, .36, 1);
}

.ab-objective:hover .ab-objective-icon {
    background: var(--mint);
    border-color: transparent;
    transform: rotate(-6deg);
}

.ab-objective-body {
    background: var(--surface-tint);
    border: 1px solid var(--border-line);
    transition: background .35s ease, border-color .35s ease, transform .35s cubic-bezier(.22, .61, .36, 1);
}

.ab-objective:hover .ab-objective-body {
    background: #fff;
    border-color: var(--mint);
    transform: translateX(4px);
}

.ab-objective-no {
    font-family: var(--font-num);
    font-size: 11.5px;
    letter-spacing: .16em;
    color: var(--mint-hover);
}

/* ---------- why attend: numbered cards ----------
   White card, mint icon disc, ghost number, and a footer button with
   its own arrow chip. One card carries a photo and runs double width. */
.ws-card {
    background: #fff;
    border: 1px solid var(--border-line);
    box-shadow: 0 12px 30px rgba(0, 32, 63, .06);
    transition: transform .4s cubic-bezier(.22, .61, .36, 1), box-shadow .4s ease, border-color .4s ease;
}

.ws-card:hover {
    transform: translateY(-6px);
    border-color: var(--mint);
    box-shadow: 0 24px 48px rgba(0, 32, 63, .13);
}

.ws-icon {
    width: 52px;
    height: 52px;
    background: var(--mint);
    color: var(--navy);
    font-size: 22px;
    box-shadow: 0 10px 22px rgba(54, 236, 222, .35);
    transition: transform .4s cubic-bezier(.22, .61, .36, 1);
}

.ws-card:hover .ws-icon {
    transform: rotate(-8deg);
}

.ws-no {
    font-family: var(--font-num);
    font-size: clamp(24px, 2.2vw, 32px);
    color: var(--border-line);
    transition: color .35s ease;
}

.ws-card:hover .ws-no {
    color: var(--mint-hover);
}

.ws-title {
    font-family: var(--font-head);
    font-weight: 700;
    font-size: clamp(15px, 1.15vw, 17.5px);
    line-height: 1.35;
    color: var(--navy);
}

.ws-text {
    font-size: clamp(13px, .98vw, 14.5px);
    line-height: 1.7;
    color: var(--text-muted);
}

/* ---------- the footer button ---------- */
.ws-btn {
    background: var(--surface-tint);
    border: 1px solid var(--border-line);
    font-family: var(--font-btn);
    font-size: 13.5px;
    color: var(--navy);
    text-decoration: none;
    transition: background .3s ease, border-color .3s ease, color .3s ease;
}

.ws-btn:hover,
.ws-btn:focus-visible {
    background: #fff;
    border-color: var(--mint);
    color: var(--navy);
}

.ws-btn-chip {
    width: 34px;
    height: 34px;
    background: #fff;
    border: 1px solid var(--border-line);
    color: var(--navy);
    font-size: 15px;
    transition: background .3s ease, border-color .3s ease, transform .35s cubic-bezier(.22, .61, .36, 1);
}

.ws-btn:hover .ws-btn-chip {
    background: var(--mint);
    border-color: transparent;
    transform: translate(2px, -2px);
}

/* ---------- the wide card with the photo ---------- */
.ws-card--shot {
    isolation: isolate;
    border-color: transparent;
    background: var(--gradient);
    box-shadow: 0 20px 46px rgba(0, 32, 63, .28);
}

.ws-shot {
    inset: 0;
    z-index: -2;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center right;
}

/* the photo shows on the right, the copy sits on solid navy */
.ws-card--shot::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(90deg, rgba(0, 32, 63, .97) 0%, rgba(0, 32, 63, .9) 42%, rgba(0, 32, 63, .18) 100%);
    pointer-events: none;
}

.ws-card--shot .ws-title,
.ws-card--shot .ws-text {
    max-width: 420px;
}

.ws-card--shot .ws-title {
    color: #fff;
}

.ws-card--shot .ws-text {
    color: var(--text-subhead);
}

.ws-card--shot .ws-no {
    color: rgba(255, 255, 255, .28);
}

.ws-card--shot:hover .ws-no {
    color: var(--mint);
}

.ws-card--shot .ws-btn {
    align-self: flex-start;
    min-width: 230px;
    background: rgba(255, 255, 255, .1);
    border-color: rgba(255, 255, 255, .2);
    color: #fff;
}

.ws-card--shot .ws-btn:hover {
    background: rgba(255, 255, 255, .16);
    border-color: var(--mint);
    color: #fff;
}

.ws-card--shot .ws-btn-chip {
    background: var(--mint);
    border-color: transparent;
    color: var(--navy);
}

@media (max-width: 575.98px) {
    .ws-card--shot::after {
        background: linear-gradient(180deg, rgba(0, 32, 63, .94) 0%, rgba(0, 32, 63, .88) 60%, rgba(0, 32, 63, .5) 100%);
    }

    .ws-card--shot .ws-btn {
        width: 100%;
    }
}

@media (max-width: 575.98px) {
    .ab-fact {
        border-right: 0;
        border-bottom: 1px solid rgba(255, 255, 255, .12);
    }

    .ab-objective::before {
        display: none;
    }
}

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

    .ab-fact,
    .ov-fact,
    .ov-fact-icon,
    .ab-purpose,
    .ab-purpose-no,
    .ab-tile,
    .ab-tile-mark,
    .ab-tile-icon,
    .ab-tile-shot,
    .ab-reason,
    .ab-reason::before,
    .ab-reason-no,
    .ab-objective-icon,
    .ab-objective-body,
    .ws-card,
    .ws-icon,
    .ws-no,
    .ws-btn,
    .ws-btn-chip {
        transition: none;
    }
}

/* =====================================================
   SPEAKER MODAL  (includes/footer.php)
   A navy panel with a mint bloom, opened from the Submission
   cards and the Ambassador panel. Every rule is scoped to
   .speaker-modal so the other modals keep their white sheet.
   ===================================================== */
.speaker-modal .modal-content {
    background: var(--gradient);
    box-shadow: 0 44px 96px rgba(0, 12, 24, .55);
}

.speaker-modal .sp-glow {
    inset: -45% -25% auto auto;
    width: 78%;
    aspect-ratio: 1;
    background: radial-gradient(circle at 70% 30%, rgba(54, 236, 222, .32) 0%, rgba(54, 236, 222, 0) 62%);
    pointer-events: none;
}

/* the oversized watermark mic, bottom left */
.speaker-modal .sp-mark {
    left: -26px;
    bottom: -46px;
    font-size: clamp(150px, 17vw, 220px);
    line-height: 1;
    color: rgba(54, 236, 222, .07);
    pointer-events: none;
}

.speaker-modal .sp-close {
    top: 18px;
    right: 18px;
    z-index: 3;
    filter: invert(1) grayscale(1) brightness(2);
    opacity: .55;
    transition: opacity .3s ease, transform .3s ease;
}

.speaker-modal .sp-close:hover {
    opacity: 1;
    transform: rotate(90deg);
}

.speaker-modal .sp-icon {
    width: clamp(58px, 5vw, 70px);
    height: clamp(58px, 5vw, 70px);
    background: rgba(54, 236, 222, .15);
    border: 1px solid rgba(54, 236, 222, .45);
    color: var(--mint);
    font-size: clamp(24px, 2.2vw, 30px);
}

.speaker-modal .sp-eyebrow {
    font-family: var(--font-num);
    font-weight: 600;
    font-size: 11.5px;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--mint);
}

.speaker-modal .sp-title {
    font-family: var(--font-head);
    font-weight: 700;
    font-size: clamp(21px, 2.2vw, 32px);
    line-height: 1.22;
    color: #fff;
}

.speaker-modal .sp-text {
    max-width: 560px;
    font-size: clamp(13.5px, 1.02vw, 15.5px);
    line-height: 1.85;
    color: var(--text-subhead);
}

/* the session formats a speaker can take */
.speaker-modal .sp-chip {
    background: rgba(255, 255, 255, .07);
    border: 1px solid rgba(255, 255, 255, .16);
    font-family: var(--font-num);
    font-weight: 600;
    font-size: 12px;
    color: var(--text-subhead);
    transition: background .3s ease, border-color .3s ease, color .3s ease;
}

.speaker-modal .sp-chip i {
    font-size: 13px;
    color: var(--mint);
}

.speaker-modal .sp-chip:hover {
    background: rgba(54, 236, 222, .14);
    border-color: rgba(54, 236, 222, .45);
    color: #fff;
}

.speaker-modal .sp-lead {
    font-family: var(--font-head);
    font-weight: 700;
    font-size: clamp(15px, 1.2vw, 18px);
    line-height: 1.6;
    color: #fff;
}

/* the mail CTA reads as a card, not just a link */
.speaker-modal .sp-cta {
    background: var(--mint);
    color: var(--navy);
    text-decoration: none;
    box-shadow: 0 18px 38px rgba(54, 236, 222, .3);
    transition: transform .35s cubic-bezier(.22, .61, .36, 1), box-shadow .35s ease, background .35s ease;
}

.speaker-modal .sp-cta i {
    font-size: 20px;
}

.speaker-modal .sp-cta-label {
    font-family: var(--font-num);
    font-weight: 600;
    font-size: 10.5px;
    letter-spacing: .14em;
    text-transform: uppercase;
    opacity: .72;
}

.speaker-modal .sp-cta-mail {
    font-family: var(--font-head);
    font-weight: 700;
    font-size: clamp(14px, 1.15vw, 17px);
    line-height: 1.3;
}

.speaker-modal .sp-cta:hover {
    background: #fff;
    color: var(--navy);
    transform: translateY(-3px);
    box-shadow: 0 26px 50px rgba(54, 236, 222, .42);
}

.speaker-modal .sp-cta:focus {
    outline: 0;
}

.speaker-modal .sp-cta:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 4px;
}

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

    .speaker-modal .sp-close,
    .speaker-modal .sp-chip,
    .speaker-modal .sp-cta {
        transition: none;
    }
}

/* =====================================================
   SUBMISSION / JOIN CARDS  (index.php)
   Photo cards that close on a coloured CTA. Each card sets
   its own --tone, and every accent is mixed from it.
   ===================================================== */
.join-card {
    min-height: clamp(340px, 32vw, 430px);
    background: var(--navy);
    box-shadow: 0 18px 44px rgba(0, 32, 63, .16);
    transition: transform .45s cubic-bezier(.22, .61, .36, 1), box-shadow .45s ease;
}

.join-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 30px 62px rgba(0, 32, 63, .28);
}

.join-shot {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .8s cubic-bezier(.22, .61, .36, 1);
}

.join-card:hover .join-shot {
    transform: scale(1.08);
}

/* the veil keeps the title legible whatever the photo does, and picks up
   the card's own tone on hover */
.join-veil {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(0, 32, 63, .12) 0%, rgba(0, 32, 63, .55) 46%, rgba(0, 18, 36, .93) 100%);
    transition: background .45s ease;
    pointer-events: none;
}

.join-card:hover .join-veil {
    background: linear-gradient(180deg, color-mix(in srgb, var(--tone) 34%, transparent) 0%, rgba(0, 32, 63, .6) 46%, rgba(0, 18, 36, .95) 100%);
}

.join-icon {
    width: 44px;
    height: 44px;
    background: var(--tone);
    color: #fff;
    font-size: 19px;
    box-shadow: 0 10px 24px rgba(0, 0, 0, .34);
    transition: transform .45s cubic-bezier(.22, .61, .36, 1);
}

.join-card:hover .join-icon {
    transform: translateY(-3px) scale(1.06);
}

.join-card .join-title {
    margin: 0;
    font-family: var(--font-head);
    font-weight: 700;
    font-size: clamp(18px, 1.5vw, 22px);
    line-height: 1.3;
    color: #fff;
}

.join-btn {
    background: var(--tone);
    color: #fff;
    font-family: var(--font-btn);
    font-weight: 700;
    font-size: clamp(13.5px, 1.05vw, 15px);
    text-decoration: none;
    cursor: pointer;
    box-shadow: 0 14px 28px color-mix(in srgb, var(--tone) 45%, transparent);
    transition: filter .35s ease, box-shadow .35s ease, transform .35s cubic-bezier(.22, .61, .36, 1);
}

.join-btn i {
    font-size: 16px;
}

.join-btn:hover,
.join-btn:focus {
    color: #fff;
    filter: brightness(1.08);
    transform: translateY(-2px);
    box-shadow: 0 20px 38px color-mix(in srgb, var(--tone) 55%, transparent);
}

.join-btn:focus {
    outline: 0;
}

.join-btn:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 3px;
}

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

    .join-card,
    .join-shot,
    .join-veil,
    .join-icon,
    .join-btn {
        transition: none;
    }
}

/* =====================================================
   CONFERENCE REGISTRATION  (conference-registration.php)
   Two colour-led offer panels and the four-step flow.
   Bootstrap utilities carry the layout; these rules add
   the palettes, the glow and the hover states.
   ===================================================== */
.cr-offer {
    isolation: isolate;
    min-height: clamp(280px, 26vw, 340px);
    transition: transform .4s cubic-bezier(.22, .61, .36, 1), box-shadow .4s ease;
}

.cr-offer:hover {
    transform: translateY(-6px);
}

/* the premium panel - warm gold over deep navy */
.cr-offer--gold {
    background: linear-gradient(135deg, #6a4a0e 0%, #0b2a49 58%, var(--navy) 100%);
    box-shadow: 0 24px 52px rgba(106, 74, 14, .3);
}

.cr-offer--gold:hover {
    box-shadow: 0 32px 64px rgba(106, 74, 14, .4);
}

.cr-offer--gold .cr-offer-glow {
    background: radial-gradient(circle at 82% 12%, rgba(247, 195, 74, .5) 0%, rgba(247, 195, 74, 0) 62%);
}

.cr-offer--gold .cr-offer-chip {
    background: rgba(247, 195, 74, .18);
    border: 1px solid rgba(247, 195, 74, .45);
    color: #F7C34A;
}

.cr-offer--gold .cr-offer-title {
    background: linear-gradient(92deg, #FFE9A8 0%, #F7C34A 52%, #E0A32B 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.cr-offer--gold .cr-offer-btn {
    background: linear-gradient(92deg, #F7C34A 0%, #E0A32B 100%);
    color: #3A2703;
    box-shadow: 0 14px 30px rgba(247, 195, 74, .34);
}

.cr-offer--gold .cr-offer-btn:hover {
    box-shadow: 0 20px 40px rgba(247, 195, 74, .5);
}

.cr-offer--gold .cr-offer-mark {
    color: rgba(247, 195, 74, .12);
}

/* the early bird panel - mint over navy */
.cr-offer--mint {
    background: linear-gradient(135deg, #0c5a56 0%, #0b2a49 56%, var(--navy) 100%);
    box-shadow: 0 24px 52px rgba(0, 32, 63, .3);
}

.cr-offer--mint:hover {
    box-shadow: 0 32px 64px rgba(0, 32, 63, .4);
}

.cr-offer--mint .cr-offer-glow {
    background: radial-gradient(circle at 82% 12%, rgba(54, 236, 222, .42) 0%, rgba(54, 236, 222, 0) 62%);
}

.cr-offer--mint .cr-offer-chip {
    background: rgba(54, 236, 222, .16);
    border: 1px solid rgba(54, 236, 222, .45);
    color: var(--mint);
}

.cr-offer--mint .cr-offer-title {
    background: linear-gradient(92deg, #DFFFFB 0%, var(--mint) 54%, var(--mint-hover) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.cr-offer--mint .cr-offer-btn {
    background: linear-gradient(92deg, var(--mint) 0%, var(--mint-hover) 100%);
    color: var(--navy);
    box-shadow: 0 14px 30px rgba(54, 236, 222, .3);
}

.cr-offer--mint .cr-offer-btn:hover {
    box-shadow: 0 20px 40px rgba(54, 236, 222, .46);
}

.cr-offer--mint .cr-offer-mark {
    color: rgba(54, 236, 222, .12);
}

/* shared offer pieces */
.cr-offer-glow {
    inset: -30% -20% auto auto;
    width: 70%;
    aspect-ratio: 1;
    z-index: -1;
    pointer-events: none;
}

.cr-offer-chip {
    font-family: var(--font-num);
    font-weight: 600;
    font-size: 11.5px;
    letter-spacing: .1em;
    text-transform: uppercase;
}

.cr-offer-kicker {
    max-width: 460px;
    font-size: clamp(13.5px, 1.05vw, 15.5px);
    line-height: 1.7;
    color: var(--text-subhead);
}

/* .section h2 repaints headings dark ink, so this has to outrank it */
.cr-offer .cr-offer-title {
    font-family: var(--font-head);
    font-weight: 800;
    font-size: clamp(26px, 3vw, 42px);
    line-height: 1.15;
}

.cr-offer-btn {
    font-family: var(--font-btn);
    font-weight: 700;
    font-size: clamp(13.5px, 1.05vw, 15px);
    cursor: pointer;
    transition: box-shadow .35s ease, transform .35s cubic-bezier(.22, .61, .36, 1);
}

.cr-offer-btn i {
    font-size: 16px;
    transition: transform .35s cubic-bezier(.22, .61, .36, 1);
}

.cr-offer-btn:hover {
    transform: translateY(-2px);
}

.cr-offer-btn:hover i {
    transform: translateX(4px);
}

.cr-offer-btn:focus {
    outline: 0;
}

.cr-offer-btn:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 3px;
}

.cr-offer-mark {
    right: -22px;
    bottom: -34px;
    z-index: -1;
    font-size: clamp(140px, 15vw, 200px);
    line-height: 1;
    pointer-events: none;
}

/* ---------- the four steps ---------- */
.cr-steps-section {
    isolation: isolate;
    background: linear-gradient(180deg, #fff 0%, var(--surface-tint) 100%);
}

.cr-steps-section::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: url("../../img/pattern/p-grid.svg") repeat 0 0 / 120px 120px;
    -webkit-mask-image: radial-gradient(ellipse 78% 66% at 50% 40%, #000 34%, transparent 100%);
    mask-image: radial-gradient(ellipse 78% 66% at 50% 40%, #000 34%, transparent 100%);
}

.cr-step {
    border-color: var(--border-line) !important;
    box-shadow: 0 14px 34px rgba(0, 32, 63, .06);
    transition: transform .35s cubic-bezier(.22, .61, .36, 1), border-color .35s ease, box-shadow .35s ease;
}

.cr-step:hover {
    transform: translateY(-6px);
    border-color: var(--mint) !important;
    box-shadow: 0 26px 50px rgba(0, 32, 63, .13);
}

.cr-step-no {
    width: 42px;
    height: 42px;
    background: var(--gradient);
    color: #fff;
    font-family: var(--font-num);
    font-weight: 700;
    font-size: 14px;
    box-shadow: 0 12px 24px rgba(0, 32, 63, .24);
}

.cr-step-icon {
    font-size: clamp(26px, 2.4vw, 32px);
    line-height: 1;
    color: var(--mint-hover);
}

.cr-step-title {
    font-family: var(--font-head);
    font-weight: 700;
    font-size: clamp(15px, 1.2vw, 17.5px);
    line-height: 1.35;
    color: var(--navy);
}

.cr-step-text {
    font-size: clamp(12.5px, .95vw, 14px);
    line-height: 1.75;
    color: var(--text-muted);
}

/* the dashed link between steps, wide screens only */
@media (min-width: 1200px) {
    .cr-steps > li {
        position: relative;
    }

    .cr-steps > li:not(:last-child)::after {
        content: "";
        position: absolute;
        top: 52px;
        right: calc(var(--bs-gutter-x, 1.5rem) * -.5);
        width: calc(var(--bs-gutter-x, 1.5rem));
        height: 2px;
        background: repeating-linear-gradient(90deg, var(--border-line) 0 7px, transparent 7px 14px);
    }
}

/* ---------- the benefit rows inside both modals ---------- */
.cr-modal-intro {
    font-size: clamp(13.5px, 1vw, 15px);
    line-height: 1.85;
    color: var(--text-muted);
}

.cr-benefit {
    background: var(--surface-tint);
    border: 1px solid var(--border-line);
    transition: background .3s ease, border-color .3s ease, transform .3s cubic-bezier(.22, .61, .36, 1);
}

.cr-benefit:hover {
    background: #fff;
    border-color: var(--mint);
    transform: translateX(4px);
}

.cr-benefit-icon {
    width: 36px;
    height: 36px;
    background: rgba(54, 236, 222, .18);
    color: var(--navy);
    font-size: 17px;
}

.cr-benefit-text {
    font-size: clamp(13px, .98vw, 14.5px);
    line-height: 1.75;
    color: var(--color-body);
}

.cr-benefit-text b {
    font-family: var(--font-head);
    color: var(--navy);
}

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

    .cr-offer,
    .cr-offer-btn,
    .cr-offer-btn i,
    .cr-step,
    .cr-benefit {
        transition: none;
    }
}

/* ---------- the supplied step graphic ---------- */
.cr-flow-img {
    max-width: 1000px;
    height: auto;
}

/* ---------- fee tables ---------- */
/* the rule between step 1 and step 2 - one section, two beats */
.cr-rule {
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--border-line) 18%, var(--border-line) 82%, transparent);
    border: 0;
    opacity: 1;
}

/* the running confirmation of what was picked */
.cr-picked {
    width: fit-content;
    background: rgba(54, 236, 222, .14);
    border: 1px solid rgba(54, 236, 222, .5);
    font-family: var(--font-num);
    font-weight: 600;
    font-size: clamp(12.5px, .95vw, 14px);
    color: var(--navy);
}

.cr-picked i {
    font-size: 15px;
    color: var(--mint-hover);
}

.cr-table {
    border: 1px solid var(--border-line);
    border-radius: 16px;
    border-collapse: separate;
    border-spacing: 0;
    overflow: hidden;
    background: #fff;
}

.cr-table th,
.cr-table td {
    border-bottom: 1px solid var(--border-line);
    border-right: 1px solid var(--border-line);
    vertical-align: middle;
}

.cr-table th:last-child,
.cr-table td:last-child {
    border-right: 0;
}

.cr-table tfoot tr:last-child th,
.cr-table tfoot tr:last-child td {
    border-bottom: 0;
}

.cr-table thead th {
    padding: 12px 14px;
    background: var(--surface-tint);
    font-family: var(--font-num);
    font-weight: 600;
    font-size: 11.5px;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--navy);
    text-align: center;
}

.cr-table .cr-th-cat {
    min-width: 200px;
    padding: 12px 16px;
    font-family: var(--font-head);
    font-size: clamp(13px, .98vw, 14.5px);
    letter-spacing: 0;
    text-transform: none;
    color: var(--navy);
    text-align: left;
}

.cr-table tbody .cr-th-cat {
    background: #fff;
    font-weight: 700;
}

.cr-fee-none {
    color: var(--text-muted);
    text-align: center;
}

.cr-table tfoot th,
.cr-table tfoot td {
    padding: 12px 16px;
    background: var(--surface-tint);
    font-family: var(--font-num);
    font-weight: 600;
    font-size: 13px;
    color: var(--navy-2);
}

/* the price cell doubles as the radio */
.cr-fee {
    background: var(--surface-tint);
    border: 1px solid transparent;
    font-family: var(--font-num);
    font-weight: 600;
    font-size: clamp(13px, 1vw, 15px);
    color: var(--navy);
    cursor: pointer;
    transition: background .3s ease, border-color .3s ease, color .3s ease, transform .3s cubic-bezier(.22, .61, .36, 1);
}

.cr-fee-cur {
    font-size: .8em;
    color: var(--text-muted);
    transition: color .3s ease;
}

.cr-fee-tick {
    width: 0;
    font-size: 15px;
    opacity: 0;
    overflow: hidden;
    transition: width .3s ease, opacity .3s ease;
}

[data-fee]:checked + .cr-fee .cr-fee-tick {
    width: 15px;
    opacity: 1;
}

.cr-fee:hover {
    background: #fff;
    border-color: var(--mint);
    transform: translateY(-2px);
}

[data-fee]:checked + .cr-fee {
    background: var(--gradient);
    border-color: transparent;
    color: #fff;
    box-shadow: 0 12px 24px rgba(0, 32, 63, .24);
}

[data-fee]:checked + .cr-fee .cr-fee-cur {
    color: var(--mint);
}

[data-fee]:focus-visible + .cr-fee {
    outline: 2px solid var(--navy);
    outline-offset: 2px;
}

/* ---------- the form band ---------- */
.cr-form-section {
    isolation: isolate;
    background: linear-gradient(180deg, #fff 0%, var(--surface-tint) 100%);
}

.cr-form-section::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: url("../../img/pattern/p-dots.svg") repeat 0 0 / 80px 80px;
    -webkit-mask-image: radial-gradient(ellipse 78% 66% at 50% 40%, #000 34%, transparent 100%);
    mask-image: radial-gradient(ellipse 78% 66% at 50% 40%, #000 34%, transparent 100%);
}

.cr-form {
    border-color: var(--border-line) !important;
    box-shadow: 0 18px 44px rgba(0, 32, 63, .07);
}

/* ---------- order summary ---------- */
.cr-summary {
    position: sticky;
    top: clamp(96px, 9vw, 124px);
    align-self: flex-start;
    background: var(--gradient);
    box-shadow: 0 22px 50px rgba(0, 32, 63, .24);
}

.cr-summary .cr-summary-title {
    font-family: var(--font-head);
    font-weight: 700;
    font-size: clamp(17px, 1.4vw, 20px);
    color: #fff;
}

.cr-summary-title i {
    color: var(--mint);
}

.cr-summary-empty {
    font-size: clamp(13px, .98vw, 14.5px);
    line-height: 1.8;
    color: var(--text-subhead);
}

.cr-summary-pick {
    background: rgba(255, 255, 255, .07);
    border: 1px solid rgba(54, 236, 222, .3);
    font-size: clamp(12.5px, .95vw, 14px);
    line-height: 1.7;
    color: var(--mint);
}

.cr-summary-list > div + div {
    border-top: 1px solid rgba(255, 255, 255, .12);
}

.cr-summary-list dt {
    font-size: clamp(13px, .98vw, 14.5px);
    font-weight: 400;
    color: var(--text-subhead);
}

.cr-summary-list dd {
    font-family: var(--font-num);
    font-weight: 600;
    font-size: clamp(13px, .98vw, 14.5px);
    color: #fff;
    white-space: nowrap;
}

.cr-summary-total {
    border-top: 1px solid rgba(54, 236, 222, .35) !important;
}

.cr-summary-total dt {
    font-family: var(--font-head);
    font-weight: 700;
    color: #fff;
}

.cr-summary-total dd {
    font-size: clamp(17px, 1.5vw, 22px);
    color: var(--mint);
}

.cr-summary-note {
    background: rgba(255, 255, 255, .06);
    font-size: 11px;
    line-height: 1.55;
    color: var(--text-subhead);
}

.cr-summary-note i {
    margin-top: 1px;
    font-size: 12.5px;
    color: var(--mint);
}

@media (prefers-reduced-motion: reduce) {
    .cr-fee {
        transition: none;
    }
}

/* =====================================================
   VENUE  (venue.php)
   Bootstrap utilities carry the layout; these rules supply
   the theme colours, the photo frames and the fallback tile
   that stands in until the landmark photos are added.
   ===================================================== */
.vn-fact {
    border-color: var(--border-line) !important;
    box-shadow: 0 10px 24px rgba(0, 32, 63, .05);
    transition: transform .3s cubic-bezier(.22, .61, .36, 1), border-color .3s ease, box-shadow .3s ease;
}

.vn-fact:hover {
    transform: translateY(-3px);
    border-color: var(--mint) !important;
    box-shadow: 0 18px 32px rgba(0, 32, 63, .1);
}

.vn-fact-icon {
    width: 38px;
    height: 38px;
    background: rgba(54, 236, 222, .18);
    color: var(--navy);
    font-size: 17px;
}

.vn-fact-label {
    font-family: var(--font-num);
    font-weight: 600;
    font-size: 10.5px;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--navy-2);
}

.vn-fact-value {
    font-size: clamp(13px, .98vw, 14.5px);
    line-height: 1.5;
    color: var(--color-body);
}

.vn-note {
    background: var(--surface-tint);
    border: 1px solid var(--border-line);
    border-left: 3px solid var(--mint);
    font-size: clamp(13px, .98vw, 14.5px);
    line-height: 1.7;
    color: var(--text-muted);
}

.vn-note i {
    margin-top: 3px;
    font-size: 16px;
    color: var(--mint-hover);
}

/* ---------- the venue photo ---------- */
.vn-hero {
    box-shadow: 0 26px 54px rgba(0, 32, 63, .16);
}

.vn-hero img {
    display: block;
    width: 100%;
    height: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
}

/* ---------- popular places ---------- */
.vn-places {
    isolation: isolate;
    background: linear-gradient(180deg, #fff 0%, var(--surface-tint) 100%);
}

.vn-places::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: url("../../img/pattern/p-topo.svg") repeat 0 0 / 220px 160px;
    -webkit-mask-image: radial-gradient(ellipse 78% 66% at 50% 40%, #000 34%, transparent 100%);
    mask-image: radial-gradient(ellipse 78% 66% at 50% 40%, #000 34%, transparent 100%);
}

/* ---------- the places mosaic ----------
   Six photos on a three-column grid. The lead tile claims a 2x2 block and
   everything else auto-flows around it, so the running order in $places is
   the layout - no per-tile placement rules to keep in step. */
.vn-mosaic {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    /* the top two rows - the ones Gateway of India spans - run taller than
       the bottom row, so the lead photo gains height without stretching the
       four small tiles with it */
    grid-template-rows: repeat(2, clamp(160px, 15vw, 198px)) clamp(146px, 13.5vw, 178px);
    grid-auto-rows: clamp(146px, 13.5vw, 178px);
    gap: clamp(12px, 1.2vw, 18px);
}

.vn-tile {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    display: flex;
    align-items: flex-end;
    border-radius: 16px;
    /* shows through if a photo is missing, so the caption stays readable */
    background: var(--gradient);
    box-shadow: 0 16px 38px rgba(0, 32, 63, .18);
    transition: transform .45s cubic-bezier(.22, .61, .36, 1), box-shadow .45s ease;
}

.vn-tile--lead {
    grid-column: span 2;
    grid-row: span 2;
}

/* the mint ring on hover, drawn inside so the grid never shifts */
.vn-tile::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 2;
    border-radius: inherit;
    box-shadow: inset 0 0 0 0 var(--mint);
    pointer-events: none;
    transition: box-shadow .35s ease;
}

/* the scrim: clear at the top, near-solid where the words sit */
.vn-tile::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(180deg, rgba(0, 16, 32, 0) 28%, rgba(0, 16, 32, .58) 62%, rgba(0, 12, 26, .93) 100%);
    pointer-events: none;
}

.vn-tile-img {
    position: absolute;
    inset: 0;
    z-index: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 1.1s cubic-bezier(.22, .61, .36, 1);
}

.vn-tile:hover {
    transform: translateY(-4px);
    box-shadow: 0 28px 58px rgba(0, 32, 63, .3);
}

.vn-tile:hover::before {
    box-shadow: inset 0 0 0 2px var(--mint);
}

.vn-tile:hover .vn-tile-img {
    transform: scale(1.08);
}

/* ---------- the caption ---------- */
.vn-tile-body {
    position: relative;
    z-index: 2;
    width: 100%;
    padding: clamp(14px, 1.4vw, 20px);
}

.vn-tile--lead .vn-tile-body {
    padding: clamp(18px, 2vw, 30px);
}

.vn-tile-name {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 4px;
    font-family: var(--font-head);
    font-weight: 700;
    font-size: clamp(15px, 1.15vw, 17px);
    line-height: 1.3;
    color: #fff;
    text-shadow: 0 2px 12px rgba(0, 12, 26, .5);
}

.vn-tile--lead .vn-tile-name {
    margin-bottom: 8px;
    font-size: clamp(18px, 1.7vw, 24px);
}

.vn-tile-name i {
    flex-shrink: 0;
    font-size: 1.05em;
    color: var(--mint);
}

.vn-tile-text {
    margin: 0;
    max-width: 52ch;
    font-size: clamp(12px, .92vw, 13.5px);
    line-height: 1.6;
    color: rgba(255, 255, 255, .82);
    text-shadow: 0 2px 10px rgba(0, 12, 26, .55);
}

.vn-tile--lead .vn-tile-text {
    font-size: clamp(13px, 1vw, 14.5px);
    line-height: 1.7;
}

/* ---------- responsive ----------
   Two columns keeps the lead tile dominant; below that the mosaic is a
   single stack, where a 2x2 span would only make one photo enormous. */
@media (max-width: 991.98px) {
    .vn-mosaic {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        grid-template-rows: none;
        grid-auto-rows: clamp(140px, 20vw, 170px);
    }
}

@media (max-width: 575.98px) {
    .vn-mosaic {
        grid-template-columns: 1fr;
        grid-template-rows: none;
        grid-auto-rows: 200px;
    }

    .vn-tile--lead {
        grid-column: auto;
        grid-row: span 2;
    }
}

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

    .vn-fact,
    .vn-tile,
    .vn-tile-img {
        transition: none;
    }

    .vn-tile:hover {
        transform: none;
    }

    .vn-tile:hover .vn-tile-img {
        transform: none;
    }
}

/* =====================================================
   SUBMISSION GUIDELINES + NOTICE  (scientific-tracks.php)
   Bootstrap utilities carry all of the layout; these rules
   only supply the theme colours, type and the hover states
   utilities cannot express.
   ===================================================== */
.sg-head {
    background: var(--gradient);
    box-shadow: 0 14px 30px rgba(0, 32, 63, .18);
}

.sg-head-icon {
    width: 46px;
    height: 46px;
    background: rgba(255, 255, 255, .14);
    color: var(--mint);
    font-size: 20px;
}

.sg-head-title {
    font-family: var(--font-head);
    font-weight: 700;
    font-size: clamp(16px, 1.3vw, 20px);
    line-height: 1.3;
    color: #fff;
}

/* ---------- the four fact boxes ---------- */
.sg-box {
    border-color: var(--border-line) !important;
    box-shadow: 0 10px 24px rgba(0, 32, 63, .05);
    transition: transform .3s cubic-bezier(.22, .61, .36, 1), border-color .3s ease, box-shadow .3s ease;
}

.sg-box:hover {
    transform: translateY(-4px);
    border-color: var(--mint) !important;
    box-shadow: 0 18px 34px rgba(0, 32, 63, .1);
}

.sg-box-icon {
    width: 34px;
    height: 34px;
    background: rgba(54, 236, 222, .18);
    color: var(--navy);
    font-size: 16px;
}

.sg-box-label {
    font-family: var(--font-head);
    font-weight: 700;
    font-size: clamp(13.5px, 1vw, 15px);
    line-height: 1.3;
    color: var(--navy);
}

.sg-box-desc {
    font-size: clamp(12.5px, .95vw, 13.5px);
    line-height: 1.6;
    color: var(--text-muted);
}

/* ---------- the nested guideline list ---------- */
.sg-guide li {
    font-size: clamp(13.5px, 1vw, 15px);
    line-height: 1.8;
    color: var(--color-body);
}

.sg-guide > li + li {
    margin-top: 14px;
}

.sg-guide > li::marker {
    color: var(--mint-hover);
}

.sg-guide ul {
    list-style: circle;
}

.sg-guide ul ul {
    list-style: square;
}

.sg-guide ul li::marker {
    color: var(--text-muted);
}

.sg-guide b {
    font-family: var(--font-head);
    color: var(--navy);
}

.sg-guide-head {
    font-family: var(--font-head);
    font-weight: 700;
    font-size: clamp(14.5px, 1.1vw, 16px);
    color: var(--navy);
}

/* ---------- the notice card ---------- */
.sg-notice {
    background: var(--gradient);
    box-shadow: 0 22px 50px rgba(0, 32, 63, .2);
}

/* a soft mint bloom in the top corner, purely decorative */
.sg-notice::before {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(120% 140% at 100% 0%, rgba(54, 236, 222, .16) 0%, rgba(54, 236, 222, 0) 48%);
    pointer-events: none;
}

.sg-notice > * {
    position: relative;
}

.sg-notice-icon {
    width: 42px;
    height: 42px;
    background: rgba(54, 236, 222, .16);
    color: var(--mint);
    font-size: 20px;
}

/* .section h2 repaints headings dark ink, so this has to be
   scoped to outrank it - the card sits on the navy gradient. */
.sg-notice .sg-notice-title {
    font-family: var(--font-head);
    font-weight: 700;
    font-size: clamp(17px, 1.6vw, 22px);
    line-height: 1.25;
    color: #fff;
}

.sg-notice-check {
    width: 20px;
    height: 20px;
    margin-top: 3px;
    background: var(--mint);
    color: var(--navy);
    font-size: 11px;
}

.sg-notice p {
    font-size: clamp(13.5px, 1vw, 14.5px);
    line-height: 1.6;
    color: var(--text-subhead);
}

.sg-notice strong {
    font-family: var(--font-head);
    color: #fff;
}

/* the email pill */
.sg-chip {
    background: rgba(255, 255, 255, .07);
    border: 1px solid rgba(54, 236, 222, .38);
    color: var(--mint);
    font-family: var(--font-num);
    font-weight: 600;
    font-size: 13px;
    vertical-align: middle;
    transition: background .3s ease, color .3s ease, border-color .3s ease, transform .3s cubic-bezier(.22, .61, .36, 1);
}

.sg-chip:hover {
    background: var(--mint);
    border-color: var(--mint);
    color: var(--navy);
    transform: translateY(-1px);
}

.sg-badge {
    display: inline-block;
    background: rgba(54, 236, 222, .18);
    color: var(--mint);
    font-family: var(--font-num);
    font-weight: 600;
    font-size: 13px;
}

@media (max-width: 575.98px) {
    .sg-chip {
        white-space: normal;
        word-break: break-all;
        font-size: 13px;
    }
}

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

    .sg-box,
    .sg-chip {
        transition: none;
    }
}

/* =====================================================
   SCIENTIFIC SESSIONS  (scientific-tracks.php)
   Navy pill headers carrying the track name and its SDG badges;
   the body opens underneath as a white sheet.
   ===================================================== */
/* Three layers, back to front: a tinted ground, two soft blooms in the
   dead corners, then the orbit rings concentrated behind the header. The
   rings suit the subject - ten sessions circling one conference theme. */
.st-section {
    isolation: isolate;
    background:
        radial-gradient(ellipse 92% 52% at 50% 0%, rgba(54, 236, 222, .1) 0%, rgba(54, 236, 222, 0) 72%),
        linear-gradient(180deg, #fff 0%, var(--surface-tint) 100%);
}

.st-section::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -2;
    background:
        radial-gradient(circle 38vw at 6% 10%, rgba(54, 236, 222, .2) 0%, rgba(54, 236, 222, 0) 62%),
        radial-gradient(circle 42vw at 97% 86%, rgba(0, 32, 63, .11) 0%, rgba(0, 32, 63, 0) 64%);
    pointer-events: none;
}

.st-section::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: url("../../img/pattern/p-orbit.svg") repeat 0 0 / clamp(150px, 15vw, 230px);
    -webkit-mask-image: radial-gradient(ellipse 84% 60% at 50% 30%, #000 18%, transparent 92%);
    mask-image: radial-gradient(ellipse 84% 60% at 50% 30%, #000 18%, transparent 92%);
    pointer-events: none;
}

/* a mint hairline closes the band off from the section below */
.st-section .container::after {
    content: "";
    display: block;
    height: 1px;
    margin-top: clamp(34px, 3.4vw, 56px);
    background: linear-gradient(90deg, transparent, rgba(54, 236, 222, .55) 22%, rgba(54, 236, 222, .55) 78%, transparent);
}

.cr-tabs .cr-tab {
    padding: 12px clamp(18px, 2vw, 34px);
    background: #fff;
    border: 1px solid var(--border-line);
    font-family: var(--font-head);
    font-weight: 700;
    font-size: clamp(13.5px, 1.05vw, 15.5px);
    color: var(--navy);
    transition: background .35s ease, border-color .35s ease, color .35s ease, box-shadow .35s ease, transform .35s cubic-bezier(.22, .61, .36, 1);
}

.cr-tabs .cr-tab i {
    font-size: 16px;
    color: var(--mint-hover);
    transition: color .35s ease;
}

.cr-tabs .cr-tab:hover {
    border-color: var(--mint);
    color: var(--navy);
    transform: translateY(-2px);
}

.cr-tabs .cr-tab.active {
    background: var(--gradient);
    border-color: transparent;
    color: #fff;
    box-shadow: 0 16px 34px rgba(0, 32, 63, .28);
}

.cr-tabs .cr-tab.active i {
    color: var(--mint);
}

.cr-tabs .cr-tab:focus {
    outline: 0;
}

.cr-tabs .cr-tab:focus-visible {
    outline: 2px solid var(--navy);
    outline-offset: 3px;
}
/* the SDG badges {
    gap: 6px;
}
/* the chevron chip,
sized for the navy pill. Bootstrap only sets
   background-repeat {
    order: 3;
    flex-shrink: 0;
    margin-left: 0;
    width: 34px;
    height: 34px;
    border: 1px solid rgba(54, 236, 222, .45);
    border-radius: 50%;
    background-color: rgba(255, 255, 255, .1);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%2336ECDE' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.6 6.2 8 10.6l4.4-4.4'/%3E%3C/svg%3E");
    background-size: 15px 15px;
    background-position: center center;
    background-repeat: no-repeat;
    transform: rotate(0deg);
    transition: transform .4s cubic-bezier(.22, .61, .36, 1), background-color .35s ease, border-color .35s ease;
}
.st-about {
    font-size: clamp(13.5px, 1vw, 15px);
    line-height: 1.8;
    color: var(--text-muted);
}

.st-about b {
    font-family: var(--font-head);
    color: var(--navy);
}

/* =====================================================
   AGENDA  (agenda.php)
   A sticky time badge on the left, a card on the right. Every colour
   comes from the site tokens; all rules are scoped to .ag-*.
   ===================================================== */
.ag-tz {
    max-width: 780px;
    background: var(--gradient);
    color: var(--text-subhead);
    font-size: clamp(12.5px, .98vw, 14px);
    box-shadow: 0 16px 36px rgba(0, 32, 63, .22);
}

.ag-tz b {
    font-family: var(--font-head);
    color: #fff;
}

.ag-tz i {
    color: var(--mint);
    font-size: 14px;
}

.ag-tz-sep {
    width: 1px;
    height: 18px;
    background: rgba(255, 255, 255, .22);
}

/* ---------- day pills ---------- */
.ag-day {
    min-width: 160px;
    background: #fff;
    border: 1px solid var(--border-line);
    color: var(--navy);
    line-height: 1.3;
    cursor: pointer;
    transition: background .35s ease, border-color .35s ease, color .35s ease, box-shadow .35s ease, transform .35s cubic-bezier(.22, .61, .36, 1);
}

.ag-day-label {
    font-family: var(--font-head);
    font-size: clamp(15px, 1.15vw, 17px);
}

.ag-day-date {
    font-family: var(--font-num);
    color: var(--text-muted);
    transition: color .35s ease;
}

.ag-day:hover {
    border-color: var(--mint);
    transform: translateY(-2px);
}

.ag-day.active {
    background: var(--gradient);
    border-color: transparent;
    color: #fff;
    box-shadow: 0 16px 34px rgba(0, 32, 63, .3);
}

.ag-day.active .ag-day-date {
    color: var(--mint);
}

.ag-day:focus {
    outline: 0;
}

.ag-day:focus-visible {
    outline: 2px solid var(--navy);
    outline-offset: 3px;
}

/* ---------- the timeline ---------- */
.ag-timeline {
    position: relative;
    counter-reset: none;
}

.ag-row {
    position: relative;
    padding-bottom: clamp(16px, 1.8vw, 26px);
}

/* the line linking the time badges */
.ag-row:not(:last-child)::before {
    content: "";
    position: absolute;
    left: calc(var(--bs-gutter-x, 1.5rem) * .5 + 26px);
    top: 56px;
    bottom: 0;
    width: 2px;
    background: repeating-linear-gradient(180deg, var(--border-line) 0 7px, transparent 7px 14px);
}

.ag-slot {
    position: sticky;
    top: clamp(96px, 9vw, 124px);
    background: var(--gradient);
    color: #fff;
    box-shadow: 0 12px 28px rgba(0, 32, 63, .22);
}

.ag-slot i {
    color: var(--mint);
    font-size: 17px;
}

.ag-slot-time {
    font-family: var(--font-num);
    font-size: clamp(14px, 1.05vw, 16px);
    letter-spacing: .01em;
}

.ag-slot-end {
    font-family: var(--font-num);
    color: var(--text-subhead);
}

/* ---------- the session card ---------- */
.ag-card {
    background: #fff;
    border: 1px solid var(--border-line);
    box-shadow: 0 12px 30px rgba(0, 32, 63, .05);
    transition: transform .35s cubic-bezier(.22, .61, .36, 1), box-shadow .35s ease, border-color .35s ease;
}

/* the accent bar across the top, by session kind */
.ag-card::before {
    content: "";
    position: absolute;
    inset: 0 0 auto;
    height: 3px;
    background: linear-gradient(90deg, var(--mint), rgba(54, 236, 222, 0));
}

.ag-card--break::before {
    background: linear-gradient(90deg, var(--warning), rgba(244, 180, 0, 0));
}

.ag-card--ceremony::before {
    background: var(--gradient);
}

.ag-card--slot::before {
    background: linear-gradient(90deg, var(--border-line), transparent);
}

.ag-card:hover {
    transform: translateY(-4px);
    border-color: rgba(54, 236, 222, .55);
    box-shadow: 0 22px 44px rgba(0, 32, 63, .12);
}

.ag-card--slot {
    background: var(--surface-tint);
    border-style: dashed;
}

.ag-kind,
.ag-local {
    font-family: var(--font-num);
    font-weight: 600;
    font-size: 10.5px;
    letter-spacing: .1em;
    text-transform: uppercase;
}

.ag-kind {
    background: rgba(54, 236, 222, .16);
    color: var(--navy);
}

.ag-kind i {
    font-size: 12px;
}

.ag-card--break .ag-kind {
    background: rgba(244, 180, 0, .18);
}

.ag-card--slot .ag-kind {
    background: rgba(0, 32, 63, .07);
    color: var(--text-muted);
}

.ag-local {
    background: var(--surface-tint);
    border: 1px solid var(--border-line);
    color: var(--text-muted);
    text-transform: none;
    letter-spacing: .02em;
}

.ag-local i {
    color: var(--mint-hover);
    font-size: 12px;
}

.ag-title {
    font-family: var(--font-head);
    font-weight: 700;
    font-size: clamp(16px, 1.3vw, 20px);
    line-height: 1.35;
    color: var(--navy);
}

.ag-slot-flag {
    font-family: var(--font-num);
    font-weight: 600;
    font-size: 13px;
    color: var(--text-muted);
}

.ag-text {
    font-size: clamp(13.5px, 1vw, 15px);
    line-height: 1.8;
    color: var(--text-muted);
}

.ag-text b {
    font-family: var(--font-head);
    color: var(--navy);
}

/* ---------- speaker row ---------- */
.ag-speaker {
    border-top: 1px solid var(--border-line);
}

.ag-speaker-photo {
    width: 76px;
    height: 76px;
    object-fit: cover;
    box-shadow: 0 10px 22px rgba(0, 32, 63, .18);
}

.ag-speaker-name {
    font-family: var(--font-head);
    font-size: clamp(15px, 1.15vw, 17px);
    color: var(--navy);
}

.ag-speaker-role {
    color: var(--mint-hover);
}

.ag-speaker-org {
    color: var(--text-muted);
}

.ag-speaker-org i {
    color: var(--mint-hover);
    font-size: 13px;
}

.ag-speaker-topic {
    font-style: italic;
    color: var(--text-muted);
}

.ag-details {
    background: transparent;
    border: 1px solid var(--navy);
    color: var(--navy);
    font-family: var(--font-btn);
    font-size: 13px;
    cursor: pointer;
    transition: background .3s ease, color .3s ease, transform .3s cubic-bezier(.22, .61, .36, 1);
}

.ag-details:hover {
    background: var(--navy);
    color: var(--mint);
    transform: translateY(-2px);
}

.ag-details:focus {
    outline: 0;
}

.ag-details:focus-visible {
    outline: 2px solid var(--mint);
    outline-offset: 3px;
}

/* ---------- speaker panel ---------- */
.ag-panel {
    width: min(420px, 92vw);
}

.ag-panel .offcanvas-header {
    padding: 20px 24px;
    border-bottom: 1px solid var(--border-line);
}

.ag-panel .offcanvas-title {
    font-family: var(--font-head);
    font-weight: 700;
    color: var(--navy);
}

.ag-panel .offcanvas-body {
    padding: 24px;
}

.ag-panel-photo {
    aspect-ratio: 4 / 3;
    object-fit: cover;
}

.ag-panel-name {
    font-family: var(--font-head);
    font-size: clamp(18px, 1.5vw, 22px);
    color: var(--navy);
}

.ag-panel-role {
    font-family: var(--font-num);
    font-size: 12px;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--mint-hover);
}

.ag-panel-meta div + div {
    border-top: 1px solid var(--border-line);
}

.ag-panel-meta dt {
    color: var(--mint-hover);
    font-size: 16px;
}

.ag-panel-meta dd {
    font-size: 13.5px;
    line-height: 1.7;
    color: var(--color-body);
}

.ag-panel-heading {
    color: var(--navy);
}

.ag-panel-bio {
    font-size: 13.5px;
    line-height: 1.85;
    color: var(--text-muted);
}

/* ---------- responsive ---------- */
@media (max-width: 991.98px) {
    .ag-slot {
        position: static;
        display: inline-flex !important;
    }

    .ag-row::before {
        display: none;
    }

    .ag-speaker {
        justify-content: center;
        text-align: center;
    }

    .ag-speaker-org {
        justify-content: center;
    }
}

@media (max-width: 575.98px) {
    .ag-day {
        min-width: 140px;
    }

    .ag-details {
        width: 100%;
        justify-content: center;
    }
}

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

    .ag-day,
    .ag-card,
    .ag-details {
        transition: none;
    }
}

/* =====================================================
   COMMITTEE  (committee-members.php)
   Content panels beside a sticky quick-links rail; the rail
   highlights whichever panel is in view (see the page script).
   ===================================================== */
.cm-panel {
    background: #fff;
    border: 1px solid var(--border-line);
    box-shadow: 0 14px 34px rgba(0, 32, 63, .06);
    scroll-margin-top: 120px;
}

.cm-eyebrow {
    font-family: var(--font-num);
    font-weight: 600;
    font-size: 11.5px;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--text-muted);
}

.cm-eyebrow i {
    color: var(--mint-hover);
    font-size: 14px;
}
.cm-title {
    font-family: var(--font-head);
    font-weight: 700;
    font-size: clamp(22px, 2.2vw, 32px);
    line-height: 1.2;
    color: var(--navy);
}

.cm-lead {
    font-size: clamp(14px, 1.05vw, 16px);
    line-height: 1.85;
    color: var(--text-muted);
}
/* ---------- the "will update soon" state ---------- */
.cm-empty {
    background: var(--surface-tint);
    border: 1px dashed var(--border-line);
}

.cm-empty-icon {
    width: 48px;
    height: 48px;
    background: rgba(54, 236, 222, .18);
    color: var(--navy);
    font-size: 20px;
}

.cm-empty-title {
    font-family: var(--font-head);
    font-size: clamp(15px, 1.1vw, 17px);
    color: var(--navy);
}

.cm-empty-note {
    color: var(--text-muted);
}

/* ---------- eligibility page ---------- */
.el-heading {
    position: relative;
    padding-left: 16px;
    font-family: var(--font-head);
    font-weight: 700;
    font-size: clamp(17px, 1.5vw, 22px);
    color: var(--navy);
}

.el-heading::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    width: 4px;
    height: 22px;
    margin-top: -11px;
    border-radius: 4px;
    background: var(--mint);
}

.el-item {
    background: var(--surface-tint);
    border: 1px solid var(--border-line);
    font-size: clamp(13.5px, 1vw, 15px);
    line-height: 1.6;
    color: var(--color-body);
    transition: background .3s ease, border-color .3s ease, transform .3s cubic-bezier(.22, .61, .36, 1);
}

.el-item:hover {
    background: #fff;
    border-color: var(--mint);
    transform: translateY(-3px);
}

.el-tick {
    margin-top: 2px;
    font-size: 17px;
    color: var(--mint-hover);
    transition: color .3s ease;
}

.el-item:hover .el-tick {
    color: var(--navy);
}

.el-role-icon {
    width: 30px;
    height: 30px;
    margin-top: 1px;
    background: #fff;
    border: 1px solid var(--border-line);
    color: var(--navy);
    font-size: 14px;
    transition: background .3s ease, border-color .3s ease;
}

.el-item--role:hover .el-role-icon {
    background: var(--mint);
    border-color: transparent;
}

.el-role-name {
    font-family: var(--font-head);
    color: var(--navy);
}

/* the closing call to action */
.el-cta {
    isolation: isolate;
    background: var(--surface-tint);
    border: 1px solid var(--border-line);
}

.el-cta::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background:
        radial-gradient(60% 80% at 50% 0%, rgba(54, 236, 222, .22), transparent 66%),
        url("../../img/pattern/p-lattice-dark.svg") repeat;
    opacity: .8;
    pointer-events: none;
}

.el-cta-title {
    font-family: var(--font-head);
    font-weight: 700;
    font-size: clamp(19px, 1.7vw, 26px);
    color: var(--navy);
}

.el-cta-text {
    max-width: 560px;
    margin-inline: auto;
    font-size: clamp(13.5px, 1vw, 15.5px);
    line-height: 1.75;
    color: var(--text-muted);
}

/* ---------- quick links rail ----------
   Sticks below the fixed header on every committee page. */
.cm-rail-col {
    align-self: flex-start;
    position: sticky;
    top: clamp(96px, 9vw, 124px);
}

.cm-rail {
    position: sticky;
    top: clamp(96px, 9vw, 124px);
    background: #fff;
    border: 1px solid var(--border-line);
    box-shadow: 0 14px 34px rgba(0, 32, 63, .06);
}

.cm-rail-title {
    position: relative;
    padding-bottom: 14px;
    font-family: var(--font-head);
    font-weight: 700;
    font-size: clamp(18px, 1.5vw, 22px);
    color: var(--navy);
}

/* the two-tone underline from the reference */
.cm-rail-title::before,
.cm-rail-title::after {
    content: "";
    position: absolute;
    bottom: 0;
    height: 3px;
    border-radius: 3px;
}

.cm-rail-title::before {
    left: 0;
    width: 26px;
    background: var(--navy);
}

.cm-rail-title::after {
    left: 32px;
    width: 48px;
    background: var(--mint);
}

.cm-rail-link {
    background: var(--surface-tint);
    border: 1px solid var(--border-line);
    font-size: clamp(13.5px, 1vw, 15px);
    line-height: 1.35;
    color: var(--navy);
    text-decoration: none;
    transition: background .3s ease, border-color .3s ease, color .3s ease, transform .3s cubic-bezier(.22, .61, .36, 1);
}

.cm-rail-link i {
    font-size: 15px;
    color: var(--text-muted);
    transition: transform .3s cubic-bezier(.22, .61, .36, 1), color .3s ease;
}

.cm-rail-link:hover {
    background: #fff;
    border-color: var(--mint);
    color: var(--navy);
    transform: translateX(3px);
}

.cm-rail-link:hover i {
    color: var(--navy);
    transform: translateX(3px);
}

/* the section currently in view */
.cm-rail-link.is-active {
    background: var(--gradient);
    border-color: transparent;
    color: #fff;
    box-shadow: 0 12px 26px rgba(0, 32, 63, .26);
}

.cm-rail-link.is-active i {
    color: var(--mint);
}

.cm-rail-help {
    border-top: 1px solid var(--border-line);
}

/* the radio pair on the apply form */
.icset-form .form-check-input {
    width: 18px;
    height: 18px;
    margin-top: 2px;
    border-color: var(--border-line);
}

.icset-form .form-check-input:checked {
    background-color: var(--navy);
    border-color: var(--navy);
}

.icset-form .form-check-input:focus {
    border-color: var(--mint);
    box-shadow: 0 0 0 3px rgba(54, 236, 222, .25);
}

.icset-form .form-check-label {
    font-family: var(--font-body);
    font-size: 14.5px;
    color: var(--color-body);
}

.cm-rail-help-label {
    color: var(--text-muted);
}

.cm-rail-help-link {
    font-family: var(--font-head);
    font-size: 14.5px;
    color: var(--navy);
}

.cm-rail-help-link:hover {
    color: var(--navy-2);
}

@media (max-width: 991.98px) {

    .cm-rail-col,
    .cm-rail {
        position: static;
    }
}

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

    .cm-rail-link,
    .cm-rail-link i,
    .el-item,
    .el-tick,
    .el-role-icon {
        transition: none;
    }
}

/* =====================================================
   CONTACT  (contact.php)
   Three channel cards over a faint map, each with a gradient
   icon tile and its own oversized glyph in the corner.
   ===================================================== */
.ct-section {
    isolation: isolate;
    background: linear-gradient(180deg, #fff 0%, var(--surface-tint) 100%);
}

/* the office-location artwork, kept faint so it reads as texture */
.ct-section::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: url("../../img/pattern/office-location-map.png") no-repeat center center / cover;
    opacity: .07;
    pointer-events: none;
}

.ct-card {
    background: #fff;
    border: 1px solid var(--border-line);
    box-shadow: 0 14px 34px rgba(0, 32, 63, .06);
    transition: transform .4s cubic-bezier(.22, .61, .36, 1), border-color .4s ease, box-shadow .4s ease;
}

/* mint hairline that draws across the top on hover */
.ct-card::before {
    content: "";
    position: absolute;
    inset: 0 0 auto;
    height: 3px;
    background: var(--mint);
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform .45s cubic-bezier(.22, .61, .36, 1);
}

.ct-card:hover {
    transform: translateY(-8px);
    border-color: rgba(54, 236, 222, .6);
    box-shadow: 0 26px 52px rgba(0, 32, 63, .14);
}

.ct-card:hover::before {
    transform: scaleX(1);
}

.ct-icon {
    width: 60px;
    height: 60px;
    background: var(--gradient);
    color: var(--mint);
    font-size: 24px;
    box-shadow: 0 14px 30px rgba(0, 32, 63, .26);
    transition: transform .4s cubic-bezier(.22, .61, .36, 1), border-radius .4s ease;
}

.ct-card:hover .ct-icon {
    transform: translateY(-3px) rotate(-8deg);
    border-radius: 50% !important;
}

.ct-label {
    font-family: var(--font-num);
    font-weight: 600;
    font-size: 11px;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--text-muted);
}

.ct-value {
    font-family: var(--font-head);
    font-weight: 700;
    font-size: clamp(16px, 1.3vw, 20px);
    line-height: 1.45;
    color: var(--navy);
    word-break: break-word;
}

.ct-note {
    line-height: 1.7;
    color: var(--text-muted);
}

.ct-action {
    font-size: 13.5px;
    color: var(--navy);
    text-decoration: none;
    transition: gap .3s ease, color .3s ease;
}

.ct-action i {
    color: var(--mint-hover);
    font-size: 15px;
    transition: transform .3s cubic-bezier(.22, .61, .36, 1);
}

.ct-action:hover,
.ct-action:focus-visible {
    gap: 12px !important;
    color: var(--navy-2);
}

.ct-action:hover i {
    transform: translate(2px, -2px);
}

/* the oversized glyph bleeding off the corner */
.ct-mark {
    right: -16px;
    bottom: -20px;
    font-size: clamp(80px, 7vw, 110px);
    line-height: 1;
    color: rgba(0, 32, 63, .045);
    pointer-events: none;
    transition: transform .5s cubic-bezier(.22, .61, .36, 1), color .4s ease;
}

.ct-card:hover .ct-mark {
    color: rgba(54, 236, 222, .16);
    transform: translate(-6px, -6px) rotate(-8deg);
}

/* ---------- book a call ---------- */
.ct-panel {
    isolation: isolate;
    background: var(--gradient);
    box-shadow: 0 22px 50px rgba(0, 32, 63, .24);
}

.ct-panel::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -2;
    background: url("../../img/pattern/p-dots.svg") repeat;
    opacity: .3;
}

.ct-panel::after {
    content: "";
    position: absolute;
    z-index: -1;
    right: -80px;
    top: -80px;
    width: 280px;
    height: 280px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(54, 236, 222, .28), transparent 68%);
    pointer-events: none;
}

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

    .ct-card,
    .ct-card::before,
    .ct-icon,
    .ct-mark,
    .ct-action,
    .ct-action i {
        transition: none;
    }
}

/* =====================================================
   ABOUT IFERP  (about-iferp.php)
   Reuses the .ab-tile bento vocabulary; these are the extras.
   ===================================================== */
/* one measured column, so the three paragraphs read as one passage */
.if-intro {
    max-width: 880px;
}

.if-intro p:last-child {
    margin-bottom: 0;
}

.if-reach {
    padding-top: clamp(20px, 2.2vw, 32px);
    border-top: 1px solid var(--border-line);
}

.if-reach-label {
    font-family: var(--font-num);
    font-size: 11.5px;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--text-muted);
}

.if-reach-label i {
    color: var(--mint-hover);
    font-size: 14px;
}

.if-reach-chip {
    background: var(--surface-tint);
    border: 1px solid var(--border-line);
    font-family: var(--font-head);
    font-weight: 700;
    font-size: 13px;
    color: var(--navy);
    transition: background .3s ease, border-color .3s ease, transform .3s cubic-bezier(.22, .61, .36, 1);
}

.if-reach-chip:hover {
    background: #fff;
    border-color: var(--mint);
    transform: translateY(-2px);
}

/* ---------- the diagram band ---------- */
.if-map {
    isolation: isolate;
    background: linear-gradient(180deg, #fff 0%, var(--surface-tint) 100%);
}

.if-map::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: url("../../img/pattern/p-grid.svg") repeat 0 0 / 120px 120px;
    -webkit-mask-image: radial-gradient(ellipse 76% 70% at 50% 50%, #000 34%, transparent 100%);
    mask-image: radial-gradient(ellipse 76% 70% at 50% 50%, #000 34%, transparent 100%);
}

.if-map-figure {
    max-width: 1100px;
    margin-inline: auto !important;
}

/* ---------- mission & vision ---------- */
.if-mv-figure img {
    max-width: 480px;
    margin-inline: auto;
}

.if-mv {
    overflow: hidden;
    background: #fff;
    border: 1px solid var(--border-line);
    box-shadow: 0 14px 34px rgba(0, 32, 63, .07);
    transition: transform .35s cubic-bezier(.22, .61, .36, 1), border-color .35s ease, box-shadow .35s ease;
}

.if-mv::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 4px;
    background: var(--mint);
}

.if-mv:hover {
    transform: translateY(-4px);
    border-color: var(--mint);
    box-shadow: 0 22px 44px rgba(0, 32, 63, .12);
}

.if-mv-icon {
    width: 50px;
    height: 50px;
    background: rgba(54, 236, 222, .18);
    color: var(--navy);
    font-size: 21px;
    transition: background .35s ease, transform .4s cubic-bezier(.22, .61, .36, 1);
}

.if-mv:hover .if-mv-icon {
    background: var(--mint);
    transform: rotate(-8deg);
}

.if-mv-title {
    font-family: var(--font-head);
    font-weight: 700;
    font-size: clamp(17px, 1.4vw, 21px);
    color: var(--navy);
}

.if-mv-text {
    font-size: clamp(14px, 1.05vw, 16px);
    line-height: 1.85;
    color: var(--text-muted);
}

/* the vision card runs on navy, so the pair reads as a set */
.if-mv--dark {
    background: var(--gradient);
    border-color: transparent;
}

.if-mv--dark .if-mv-title {
    color: #fff;
}

.if-mv--dark .if-mv-text {
    color: var(--text-subhead);
}

.if-mv--dark .if-mv-icon {
    background: rgba(54, 236, 222, .18);
    color: var(--mint);
}

.if-mv--dark:hover {
    border-color: transparent;
    box-shadow: 0 26px 52px rgba(0, 32, 63, .3);
}

/* ---------- the three links: one compact row each ---------- */
.if-link {
    background: var(--surface-tint);
    border: 1px solid var(--border-line);
    text-decoration: none;
    transition: background .3s ease, border-color .3s ease, transform .3s cubic-bezier(.22, .61, .36, 1);
}

.if-link:hover,
.if-link:focus-visible {
    transform: translateY(-3px);
    background: #fff;
    border-color: var(--mint);
}

.if-link-icon {
    width: 42px;
    height: 42px;
    background: #fff;
    border: 1px solid var(--border-line);
    color: var(--navy);
    font-size: 18px;
    transition: background .3s ease, border-color .3s ease;
}

.if-link:hover .if-link-icon {
    background: var(--mint);
    border-color: transparent;
}

.if-link-title {
    font-family: var(--font-head);
    font-weight: 700;
    font-size: 15px;
    line-height: 1.3;
    color: var(--navy);
}

.if-link-sub {
    color: var(--text-muted);
    word-break: break-word;
}

.if-link-arrow {
    color: var(--text-muted);
    font-size: 16px;
    transition: color .3s ease, transform .3s cubic-bezier(.22, .61, .36, 1);
}

.if-link:hover .if-link-arrow {
    color: var(--navy);
    transform: translate(2px, -2px);
}

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

    .if-reach-chip,
    .if-mv,
    .if-mv-icon,
    .if-link,
    .if-link-icon,
    .if-link-arrow {
        transition: none;
    }
}

/* =====================================================
   PLAGIARISM POLICY
   The two thresholds the whole policy turns on, each carrying
   its own colour in --tone.
   ===================================================== */
/* the default card: plain, on the section's own tint */
.pp-threshold {
    background: #fff;
    border: 1px solid var(--border-line);
    box-shadow: 0 14px 34px rgba(0, 32, 63, .07);
    transition: transform .35s cubic-bezier(.22, .61, .36, 1), box-shadow .35s ease, border-color .35s ease;
}

.pp-threshold::before {
    content: "";
    position: absolute;
    inset: 0 0 auto;
    z-index: 1;
    height: 4px;
    background: var(--tone, var(--mint));
}

.pp-threshold:hover {
    transform: translateY(-5px);
    border-color: transparent;
    box-shadow: 0 22px 44px color-mix(in srgb, var(--tone) 26%, transparent);
}

.pp-threshold-icon {
    position: relative;
    width: 56px;
    height: 56px;
    background: color-mix(in srgb, var(--tone) 14%, #fff);
    color: var(--tone);
    font-size: 24px;
    transition: background .35s ease, color .35s ease, border-color .35s ease;
}

.pp-threshold:hover .pp-threshold-icon {
    background: var(--tone);
    color: #fff;
}

.pp-threshold-value {
    font-family: var(--font-num);
    font-weight: 700;
    font-size: clamp(30px, 3vw, 44px);
    letter-spacing: -.02em;
    color: var(--tone);
}

.pp-threshold-label {
    font-family: var(--font-head);
    font-size: clamp(14px, 1.05vw, 16px);
    color: var(--navy);
}

.pp-threshold p {
    color: var(--text-muted);
}

/* ---------- the maximum-similarity card only ----------
   Photo behind a navy scrim, so the hard limit carries the weight. */
.pp-threshold--shot {
    isolation: isolate;
    background: var(--gradient);
    border-color: transparent;
    box-shadow: 0 20px 46px rgba(0, 32, 63, .28);
}

.pp-threshold--shot::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background:
        linear-gradient(120deg, rgba(0, 32, 63, .92) 0%, rgba(0, 32, 63, .7) 55%, rgba(0, 32, 63, .88) 100%),
        url("../../img/br-3.jpg") no-repeat center center / cover;
}

.pp-threshold--shot:hover {
    box-shadow: 0 28px 56px rgba(0, 32, 63, .38);
}

.pp-threshold--shot .pp-threshold-icon {
    background: color-mix(in srgb, var(--tone) 30%, transparent);
    border: 1px solid color-mix(in srgb, var(--tone) 65%, transparent);
    color: #fff;
}

.pp-threshold--shot:hover .pp-threshold-icon {
    background: var(--tone);
    border-color: transparent;
}

.pp-threshold--shot .pp-threshold-value {
    color: #fff;
}

.pp-threshold--shot .pp-threshold-label {
    color: var(--mint);
}

.pp-threshold--shot p {
    color: var(--text-subhead);
}

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

    .pp-threshold,
    .pp-threshold-icon,
    .custom-accordion .accordion-item,
    .custom-accordion .accordion-item::before,
    .custom-accordion .accordion-button,
    .custom-accordion .accordion-button::after,
    .faq-no {
        transition: none;
    }
}

/* =====================================================
   RESEARCH GUIDANCE + PUBLISHING STEPS + ETHICS
   ===================================================== */
/* vertical pill tabs */
.rg-tab {
    background: #fff;
    border: 1px solid rgba(0, 32, 63, .18);
    font-family: var(--font-head);
    font-size: clamp(14px, 1.05vw, 16px);
    color: var(--navy);
    text-align: left;
    cursor: pointer;
    transition: background .3s ease, color .3s ease, border-color .3s ease, box-shadow .3s ease, transform .3s cubic-bezier(.22, .61, .36, 1);
}

.rg-tab i {
    font-size: 17px;
    color: var(--navy-2);
    transition: color .3s ease;
}

.rg-tab:hover {
    border-color: var(--mint);
    transform: translateX(3px);
}

.rg-tab.active {
    background: var(--gradient);
    border-color: transparent;
    color: #fff;
    box-shadow: 0 14px 30px rgba(0, 32, 63, .3);
}

.rg-tab.active i {
    color: var(--mint);
}

.rg-tab:focus {
    outline: 0;
}

.rg-tab:focus-visible {
    outline: 2px solid var(--navy);
    outline-offset: 3px;
}

/* the checklist beside the tabs */
.rg-checks li {
    font-size: clamp(13.5px, 1vw, 15px);
    line-height: 1.6;
    color: var(--color-body);
}

.rg-checks i {
    margin-top: 3px;
    font-size: 15px;
    color: var(--navy);
    transition: color .3s ease;
}

.rg-checks li:hover i {
    color: var(--mint-hover);
}

/* support panel */
.rg-contact {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    background: var(--gradient);
}

.rg-contact::after {
    content: "";
    position: absolute;
    z-index: -1;
    right: -70px;
    top: -70px;
    width: 240px;
    height: 240px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(54, 236, 222, .28), transparent 68%);
    pointer-events: none;
}

.rg-contact-icon {
    width: 62px;
    height: 62px;
    background: rgba(54, 236, 222, .18);
    color: var(--mint);
    font-size: 26px;
}

/* the ethical-guideline headings, as listed */
.rg-pill {
    background: var(--surface-tint);
    border: 1px solid var(--border-line);
    font-family: var(--font-head);
    font-weight: 700;
    font-size: 12.5px;
    color: var(--navy);
    transition: background .3s ease, border-color .3s ease;
}

.rg-pill:hover {
    background: #fff;
    border-color: var(--mint);
}

/* the closing note reads as a standing reminder, not body copy */
.rg-closing {
    isolation: isolate;
    max-width: 940px;
    background: var(--gradient);
    box-shadow: 0 24px 54px rgba(0, 32, 63, .24);
}

.rg-closing::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -2;
    background: url("../../img/pattern/p-topo.svg") repeat;
    opacity: .28;
}

.rg-closing::after {
    content: "";
    position: absolute;
    z-index: -1;
    left: 50%;
    top: -60%;
    width: min(560px, 80vw);
    height: min(560px, 80vw);
    margin-left: min(-280px, -40vw);
    border-radius: 50%;
    background: radial-gradient(circle, rgba(54, 236, 222, .26), transparent 66%);
    pointer-events: none;
}

.rg-closing-icon {
    width: 62px;
    height: 62px;
    background: rgba(54, 236, 222, .18);
    border: 1px solid rgba(54, 236, 222, .45);
    color: var(--mint);
    font-size: 26px;
}

.faq-page .rg-closing h2 {
    color: #fff;
}

.rg-closing-lead {
    max-width: 760px;
    margin-inline: auto;
    font-size: clamp(14.5px, 1.15vw, 17px);
    line-height: 1.85;
    color: var(--text-subhead);
}

.rg-closing-lead b {
    font-family: var(--font-head);
    color: #fff;
}

/* the consequence, called out rather than buried in the paragraph */
.rg-closing-warn {
    background: rgba(244, 180, 0, .14);
    border: 1px solid rgba(244, 180, 0, .45);
    font-family: var(--font-head);
    font-weight: 700;
    font-size: clamp(12.5px, .98vw, 14.5px);
    line-height: 1.6;
    text-align: left;
    color: #FFD766;
}

.rg-closing-warn i {
    flex-shrink: 0;
    font-size: 16px;
    color: var(--warning);
}

@media (max-width: 575.98px) {
    .rg-closing-warn {
        border-radius: 14px !important;
    }
}

/* the steps accordion reuses the FAQ chip, which is scoped to .faq-page,
   so the layout parts are repeated here rather than widened globally */
.rg-steps .accordion-button {
    align-items: flex-start;
}

.rg-steps .faq-no {
    min-width: 40px;
}

.rg-steps .accordion-button:not(.collapsed) .faq-no {
    background: var(--mint);
    color: var(--navy);
}

@media (max-width: 991.98px) {
    .rg-tabs {
        flex-direction: row !important;
        flex-wrap: wrap;
    }

    .rg-tab {
        width: auto !important;
    }
}

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

    .rg-tab,
    .rg-tab i,
    .rg-checks i,
    .rg-pill {
        transition: none;
    }
}

/* =====================================================
   PAYMENT METHODS
   ===================================================== */
.pa-card {
    position: relative;
    overflow: hidden;
    max-width: 980px;
    margin: 0 auto clamp(18px, 1.8vw, 28px);
    padding: clamp(24px, 2.4vw, 40px);
    border-radius: 20px;
    background: linear-gradient(160deg, #fff 0%, var(--surface-tint) 100%);
    border: 1px solid var(--border-line);
    box-shadow: 0 18px 44px rgba(0, 32, 63, .1);
}

/* colour bar across the top, so the advisory reads as a notice */
.pa-card::before {
    content: "";
    position: absolute;
    inset: 0 0 auto;
    height: 5px;
    background: linear-gradient(90deg, var(--navy) 0%, var(--mint) 55%, var(--warning) 100%);
}

.pa-head {
    display: flex;
    align-items: center;
    gap: clamp(14px, 1.5vw, 22px);
    margin-bottom: clamp(18px, 1.8vw, 26px);
}

.pa-shield {
    flex-shrink: 0;
    width: clamp(54px, 4.6vw, 68px);
    height: clamp(54px, 4.6vw, 68px);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 18px;
    background: var(--gradient);
    color: var(--mint);
    font-size: clamp(24px, 2.1vw, 30px);
    box-shadow: 0 14px 30px rgba(0, 32, 63, .28);
}

.pa-eyebrow {
    display: inline-flex;
    margin-bottom: 6px;
    padding: 4px 12px;
    border-radius: 999px;
    background: rgba(54, 236, 222, .18);
    font-family: var(--font-num);
    font-weight: 700;
    font-size: 11px;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--navy);
}

.guidelines-section .pa-title {
    margin: 0;
    font-size: clamp(23px, 2.2vw, 34px);
    color: var(--navy);
}

/* ---------- the two verdict pills ---------- */
.pa-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: clamp(18px, 1.8vw, 26px);
}

.pa-pill {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 10px 18px;
    border-radius: 999px;
    font-family: var(--font-head);
    font-weight: 700;
    font-size: clamp(13px, .98vw, 14.5px);
    line-height: 1.3;
}

.pa-pill i {
    font-size: 15px;
}

.pa-pill--ok {
    background: rgba(46, 204, 113, .12);
    border: 1px solid rgba(46, 204, 113, .4);
    color: #1B7A44;
}

.pa-pill--bad {
    background: rgba(229, 57, 53, .1);
    border: 1px solid rgba(229, 57, 53, .35);
    color: #B32B27;
}

.pa-text {
    margin: 0;
    font-size: clamp(14px, 1.05vw, 16px);
    line-height: 1.9;
    color: var(--color-body);
}

.pa-mark {
    padding: 2px 8px;
    border-radius: 6px;
    font-family: var(--font-head);
    font-weight: 700;
    background: transparent;
}

.pa-mark--ok {
    background: rgba(46, 204, 113, .16);
    color: #1B7A44;
}

.pa-mark--bad {
    background: rgba(229, 57, 53, .13);
    color: #B32B27;
}

/* ---------- contact buttons ---------- */
.pa-contacts {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    margin-top: clamp(20px, 2vw, 30px);
}

.pa-contact {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    padding: 14px 22px;
    border-radius: 12px;
    text-decoration: none;
    transition: transform .3s cubic-bezier(.22, .61, .36, 1), box-shadow .3s ease;
}

.pa-contact:hover,
.pa-contact:focus-visible {
    transform: translateY(-3px);
    box-shadow: 0 16px 30px rgba(0, 32, 63, .24);
}

.pa-contact--mail {
    background: var(--gradient);
    color: #fff;
}

.pa-contact--call {
    background: linear-gradient(135deg, var(--warning) 0%, #F2994A 100%);
    color: var(--navy);
}

.pa-contact-icon {
    width: 34px;
    height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(255, 255, 255, .2);
    font-size: 15px;
}

.pa-contact--call .pa-contact-icon {
    background: rgba(0, 32, 63, .12);
}

.pa-contact-label {
    display: block;
    font-family: var(--font-num);
    font-weight: 600;
    font-size: 10.5px;
    letter-spacing: .13em;
    text-transform: uppercase;
    opacity: .8;
}

.pa-contact-value {
    display: block;
    font-family: var(--font-head);
    font-weight: 700;
    font-size: clamp(14px, 1.05vw, 16px);
}

/* ---------- the three routes ---------- */
.pm-methods {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(12px, 1.3vw, 20px);
    margin-top: clamp(18px, 1.8vw, 26px);
}

.pm-method {
    position: relative;
    overflow: hidden;
    padding: clamp(20px, 2vw, 28px);
    border-radius: 16px;
    background: var(--surface-tint);
    border: 1px solid var(--border-line);
    transition: background .3s ease, border-color .3s ease, transform .35s cubic-bezier(.22, .61, .36, 1);
}

.pm-method:hover {
    background: #fff;
    border-color: var(--mint);
    transform: translateY(-5px);
}

.pm-method-no {
    position: absolute;
    top: 10px;
    right: 14px;
    font-family: var(--font-num);
    font-weight: 700;
    font-size: 34px;
    line-height: 1;
    color: rgba(0, 32, 63, .07);
}

.pm-method-icon {
    width: 46px;
    height: 46px;
    margin-bottom: 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 13px;
    background: rgba(54, 236, 222, .18);
    color: var(--navy);
    font-size: 20px;
    transition: background .3s ease;
}

.pm-method:hover .pm-method-icon {
    background: var(--mint);
}

.pm-method-title {
    display: block;
    font-family: var(--font-head);
    font-weight: 700;
    font-size: clamp(15px, 1.15vw, 17px);
    color: var(--navy);
}

.pm-method-note {
    display: block;
    margin-top: 4px;
    font-size: 13px;
    line-height: 1.6;
    color: var(--text-muted);
}

/* ---------- beneficiary details ---------- */
.pm-bank {
    margin: clamp(16px, 1.6vw, 24px) 0 0;
    border: 1px solid var(--border-line);
    border-radius: 16px;
    overflow: hidden;
}

.pm-bank-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr);
}

.pm-bank-row + .pm-bank-row {
    border-top: 1px solid var(--border-line);
}

.pm-bank dt,
.pm-bank dd {
    margin: 0;
    padding: 14px 18px;
    font-size: clamp(13.5px, 1vw, 15px);
    line-height: 1.6;
}

.pm-bank dt {
    display: flex;
    align-items: center;
    background: var(--surface-tint);
    font-family: var(--font-num);
    font-weight: 600;
    font-size: 11.5px;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--text-muted);
}

.pm-bank dd {
    background: #fff;
    font-family: var(--font-head);
    font-weight: 700;
    color: var(--navy);
    word-break: break-word;
}

@media (max-width: 767.98px) {
    .pm-methods {
        grid-template-columns: minmax(0, 1fr);
    }

    .pm-bank-row {
        grid-template-columns: minmax(0, 1fr);
    }

    .pm-bank dd {
        padding-top: 6px;
    }

    .pa-contact {
        width: 100%;
    }
}

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

    .pa-contact,
    .pm-method,
    .pm-method-icon {
        transition: none;
    }
}

/* =====================================================
   FAQ PAGE
   Same accordion as the home page, plus a Q-number chip.
   ===================================================== */
.faq-page {
    background: var(--surface-tint);
}

.faq-page-list {
    max-width: 900px;
    margin: clamp(28px, 2.8vw, 46px) auto 0;
}

.faq-page .accordion-button {
    align-items: flex-start;
}

/* the Q1..Q7 chip */
.faq-no {
    flex-shrink: 0;
    min-width: 40px;
    padding: 5px 10px;
    border-radius: 9px;
    background: var(--gradient);
    color: #fff;
    font-family: var(--font-num);
    font-weight: 700;
    font-size: 12.5px;
    line-height: 1.5;
    text-align: center;
    transition: background .35s ease, color .35s ease;
}

.faq-page .accordion-button:not(.collapsed) .faq-no {
    background: var(--mint);
    color: var(--navy);
}

.faq-lead {
    margin: 0 0 12px;
}

.faq-points {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.faq-points li {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    line-height: 1.7;
}

.faq-points i {
    flex-shrink: 0;
    width: 22px;
    height: 22px;
    margin-top: 3px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(54, 236, 222, .18);
    color: var(--navy);
    font-size: 12px;
}

.faq-points b {
    font-family: var(--font-head);
    font-weight: 700;
    color: var(--navy);
}

.faq-page .gl-help {
    margin-top: clamp(26px, 2.6vw, 42px);
}

.faq-page-cta {
    margin-top: clamp(20px, 2vw, 30px);
}

@media (max-width: 575.98px) {
    .faq-page .accordion-button {
        gap: 10px;
        font-size: 15px;
    }
}

/* =====================================================
   TALK TO US MODAL
   ===================================================== */
.talk-modal .modal-content {
    border: 0;
    border-radius: 18px;
    box-shadow: 0 40px 90px rgba(0, 32, 63, .35);
}

.talk-modal .modal-header {
    align-items: center;
    padding: clamp(18px, 1.8vw, 24px) clamp(20px, 2vw, 30px);
    border-bottom: 1px solid var(--border-line);
}

.talk-modal .modal-title {
    margin: 0;
    font-family: var(--font-head);
    font-weight: 700;
    font-size: clamp(19px, 1.6vw, 24px);
    color: var(--navy);
}

.talk-modal .btn-close {
    opacity: .6;
    transition: opacity .3s ease, transform .3s ease;
}

.talk-modal .btn-close:hover {
    opacity: 1;
    transform: rotate(90deg);
}

.talk-modal .modal-body {
    padding: clamp(20px, 2vw, 30px);
}

.icset-form .form-control,
.icset-form .form-select,
.icset-form textarea.form-control {
    height: 50px;
    padding: 0 16px;
    border: 1px solid var(--border-line);
    border-radius: 10px;
    font-family: var(--font-body);
    font-size: 14.5px;
    color: var(--color-body);
    background-color: #fff;
    transition: border-color .3s ease, box-shadow .3s ease;
}

.icset-form textarea.form-control {
    height: auto;
    padding: 14px 16px;
    line-height: 1.7;
    resize: vertical;
}

.icset-form .form-control::placeholder {
    color: #9AA5AE;
}

.icset-form .form-control:focus,
.icset-form .form-select:focus {
    border-color: var(--mint);
    box-shadow: 0 0 0 3px rgba(54, 236, 222, .25);
}

.icset-form .form-control.is-invalid,
.icset-form .form-select.is-invalid {
    border-color: var(--error);
    box-shadow: 0 0 0 3px rgba(229, 57, 53, .18);
}

.talk-label {
    display: block;
    margin-bottom: 8px;
    font-family: var(--font-body);
    font-size: 14px;
    color: var(--text-muted);
}

.talk-range {
    display: flex;
    align-items: center;
    gap: 12px;
}

.talk-range .form-control {
    flex: 1;
    min-width: 0;
}

.talk-range-sep {
    flex-shrink: 0;
    font-size: 13px;
    color: var(--text-muted);
}

.talk-hint {
    margin: 8px 0 0;
    font-size: 12.5px;
    color: var(--text-muted);
}

.talk-hint.is-error {
    color: var(--error);
}

/* the dial-code picker is rendered on <body>, outside the modal */
.iti--container {
    z-index: 1080;
}

.icset-form .iti {
    display: block;
    width: 100%;
}

@media (max-width: 575.98px) {
    .talk-range {
        flex-direction: column;
        align-items: stretch;
        gap: 8px;
    }

    .talk-range-sep {
        text-align: center;
    }
}

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

    .pp-logo img,
    .talk-modal .btn-close {
        transition: none;
    }
}

/* =====================================================
   JOURNAL PUBLICATION SUPPORT
   Four quartile tiers, each with its own colour pair in
   --tier / --tier-2. Domed colour cap, quartile mark inside,
   flag straddling the seam.
   ===================================================== */
.jp-section {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    background: linear-gradient(180deg, #fff 0%, var(--surface-tint) 100%);
}

/* one soft wash per tier colour, spread across the row */
.jp-section::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background:
        radial-gradient(30% 46% at 8% 74%, rgba(54, 236, 222, .2), transparent 62%),
        radial-gradient(28% 44% at 36% 20%, rgba(244, 180, 0, .16), transparent 62%),
        radial-gradient(28% 44% at 64% 78%, rgba(108, 75, 244, .16), transparent 62%),
        radial-gradient(30% 46% at 92% 22%, rgba(46, 204, 113, .16), transparent 62%);
    pointer-events: none;
}

.jp-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: clamp(12px, 1.2vw, 20px);
    align-items: stretch;
    margin-top: clamp(30px, 3vw, 52px);
}

/* ---------- the card: badge on the left, wording on the right ---------- */
.jp-card {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    display: flex;
    align-items: center;
    gap: clamp(12px, 1.1vw, 18px);
    padding: clamp(16px, 1.5vw, 22px);
    border-radius: 18px;
    background: #fff;
    border: 1px solid var(--border-line);
    box-shadow: 0 14px 32px rgba(0, 32, 63, .08);
    transition: transform .45s cubic-bezier(.22, .61, .36, 1), box-shadow .45s ease, border-color .45s ease;
}

/* a wash of the tier colour bleeding in from the badge side */
.jp-card::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(100deg, color-mix(in srgb, var(--tier) 14%, transparent) 0%, transparent 58%);
    opacity: .8;
    transition: opacity .45s ease;
    pointer-events: none;
}

.jp-card:hover {
    transform: translateY(-6px);
    border-color: color-mix(in srgb, var(--tier) 45%, var(--border-line));
    box-shadow: 0 26px 52px color-mix(in srgb, var(--tier) 28%, transparent);
}

.jp-card:hover::before {
    opacity: 1;
}

/* ---------- the quartile badge ---------- */
.jp-badge {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: clamp(46px, 4.2vw, 58px);
    height: clamp(46px, 4.2vw, 58px);
    border-radius: 16px;
    background: linear-gradient(145deg, var(--tier) 0%, var(--tier-2) 100%);
    color: #fff;
    font-family: var(--font-num);
    font-variant-numeric: tabular-nums;
    font-weight: 700;
    font-size: clamp(17px, 1.5vw, 21px);
    line-height: 1;
    box-shadow: 0 10px 22px color-mix(in srgb, var(--tier) 40%, transparent);
    transition: transform .45s cubic-bezier(.22, .61, .36, 1), border-radius .45s ease;
}

.jp-card:hover .jp-badge {
    transform: translateY(-2px) rotate(-6deg);
    border-radius: 50%;
}

/* ---------- the wording ---------- */
.jp-body {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 7px;
    min-width: 0;
    flex: 1;
}

.jp-label {
    font-family: var(--font-head);
    font-weight: 700;
    font-size: clamp(13.5px, 1.05vw, 16px);
    line-height: 1.25;
    color: var(--navy);
}

/* only Q1 and Q2 carry a flag; the CTA is pushed down by margin rather
   than by a reserved gap, so all four buttons still land on one line */
.jp-flag {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 9px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--tier) 14%, #fff);
    border: 1px solid color-mix(in srgb, var(--tier) 34%, transparent);
    color: var(--tier);
    font-family: var(--font-num);
    font-weight: 700;
    font-size: 9.5px;
    letter-spacing: .09em;
    text-transform: uppercase;
    white-space: nowrap;
}

.jp-flag i {
    font-size: 10px;
}

/* ---------- the call to action ---------- */
.jp-cta {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin-top: auto;
    padding: 8px 15px;
    border-radius: 999px;
    background: linear-gradient(145deg, var(--tier) 0%, var(--tier-2) 100%);
    color: #fff;
    font-family: var(--font-btn);
    font-weight: 600;
    font-size: clamp(12px, .92vw, 13.5px);
    line-height: 1.2;
    white-space: nowrap;
    text-decoration: none;
    box-shadow: 0 8px 18px color-mix(in srgb, var(--tier) 34%, transparent);
    transition: transform .35s cubic-bezier(.22, .61, .36, 1), box-shadow .35s ease, filter .35s ease;
}

.jp-cta i {
    font-size: 11px;
    transition: transform .35s cubic-bezier(.22, .61, .36, 1);
}

.jp-cta:hover,
.jp-cta:focus-visible {
    transform: translateY(-2px);
    filter: saturate(1.15);
    box-shadow: 0 14px 26px color-mix(in srgb, var(--tier) 46%, transparent);
    color: #fff;
}

.jp-cta:hover i,
.jp-cta:focus-visible i {
    transform: translate(3px, -3px);
}

.jp-cta:focus {
    outline: 0;
}

.jp-cta:focus-visible {
    outline: 2px solid var(--tier);
    outline-offset: 3px;
}

/* ---------- responsive ----------
   The compact card holds four across much further down than the old domed
   one did. Below tablet the badge stacks over the wording so the row can
   keep all four rather than breaking into a grid. */
@media (max-width: 991.98px) {
    .jp-card {
        flex-direction: column;
        align-items: flex-start;
        text-align: left;
        gap: 12px;
    }
}

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

    .jp-card {
        flex-direction: row;
        align-items: center;
    }
}

@media (max-width: 379.98px) {
    .jp-grid {
        grid-template-columns: minmax(0, 1fr);
    }
}

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

    .jp-card,
    .jp-card::before,
    .jp-badge,
    .jp-cta,
    .jp-cta i {
        transition: none;
    }

    .jp-card:hover,
    .jp-card:hover .jp-badge {
        transform: none;
    }
}

/* =====================================================
   PROOF OF SCOPUS INDEXING
   Paper cards on a rail, with a progress bar instead of dots.
   ===================================================== */
.proof-section {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    background: linear-gradient(180deg, var(--surface-tint) 0%, #fff 100%);
}

.proof-section::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: url("../../img/pattern/p-grid.svg") repeat 0 0 / 120px 120px;
    -webkit-mask-image: radial-gradient(ellipse 78% 74% at 50% 46%, #000 38%, transparent 100%);
    mask-image: radial-gradient(ellipse 78% 74% at 50% 46%, #000 38%, transparent 100%);
}

.proof-slider {
    margin-top: clamp(28px, 2.8vw, 46px);
}

.proof-viewport {
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    scrollbar-width: none;
    -ms-overflow-style: none;
    margin: 0 -6px;
    padding: 6px;
}

.proof-viewport::-webkit-scrollbar {
    display: none;
}

.proof-viewport:focus {
    outline: 0;
}

.proof-viewport:focus-visible {
    outline: 2px solid var(--navy);
    outline-offset: 4px;
    border-radius: 18px;
}

.proof-track {
    display: flex;
    gap: clamp(14px, 1.5vw, 24px);
    align-items: stretch;
}

/* ---------- the paper card ---------- */
.proof-card {
    position: relative;
    flex: 0 0 calc((100% - clamp(14px, 1.5vw, 24px)) / 2);
    scroll-snap-align: start;
    display: flex;
    align-items: center;
    margin: 0;
    padding: clamp(22px, 2.2vw, 34px) clamp(20px, 2vw, 30px) clamp(20px, 2vw, 28px);
    background: #fff;
    border: 1px solid var(--border-line);
    border-radius: 16px;
    box-shadow: 0 12px 30px rgba(0, 32, 63, .08);
    overflow: hidden;
    transition: transform .4s cubic-bezier(.22, .61, .36, 1), box-shadow .4s ease, border-color .4s ease;
}

/* mint rule along the top, drawn in on hover */
.proof-card::before {
    content: "";
    position: absolute;
    inset: 0 0 auto;
    height: 3px;
    background: var(--mint);
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform .45s cubic-bezier(.22, .61, .36, 1);
}

/* faint quote mark behind the record */
.proof-card::after {
    content: "";
    position: absolute;
    z-index: -1;
    right: -30px;
    bottom: -30px;
    width: 150px;
    height: 150px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(54, 236, 222, .3), transparent 70%);
    opacity: 0;
    transition: opacity .45s ease;
}

.proof-card:hover {
    transform: translateY(-6px);
    border-color: var(--mint);
    box-shadow: 0 24px 48px rgba(0, 32, 63, .16);
}

.proof-card:hover::before {
    transform: scaleX(1);
}

.proof-card:hover::after {
    opacity: 1;
}

.proof-card img {
    width: 100%;
    height: auto;
    display: block;
}

.proof-badge {
    position: absolute;
    top: 0;
    right: 0;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    border-radius: 0 16px 0 12px;
    background: var(--navy);
    color: var(--mint);
    font-family: var(--font-num);
    font-weight: 600;
    font-size: 10.5px;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.proof-badge i {
    font-size: 12px;
}

/* ---------- progress bar + arrows ---------- */
.proof-nav {
    display: flex;
    align-items: center;
    gap: clamp(18px, 2vw, 34px);
    margin-top: clamp(20px, 2vw, 30px);
}

.proof-progress {
    flex: 1;
    height: 3px;
    border-radius: 3px;
    background: var(--border-line);
    overflow: hidden;
}

.proof-progress-fill {
    display: block;
    width: 25%;
    height: 100%;
    border-radius: 3px;
    background: var(--gradient);
    transition: width .4s cubic-bezier(.22, .61, .36, 1), margin-left .4s cubic-bezier(.22, .61, .36, 1);
}

.proof-arrows {
    display: flex;
    gap: 10px;
}

.proof-arrow {
    width: 46px;
    height: 46px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    border: 1px solid var(--border-line);
    background: #fff;
    color: var(--navy);
    font-size: 17px;
    cursor: pointer;
    transition: background .3s ease, color .3s ease, border-color .3s ease, transform .3s ease;
}

.proof-arrow:hover:not(:disabled) {
    background: var(--navy);
    border-color: var(--navy);
    color: var(--mint);
    transform: translateY(-3px);
}

.proof-arrow:focus {
    outline: 0;
}

.proof-arrow:focus-visible {
    outline: 2px solid var(--navy);
    outline-offset: 3px;
}

.proof-arrow:disabled {
    opacity: .35;
    cursor: default;
}

.proof-note {
    max-width: 820px;
    margin: clamp(26px, 2.6vw, 42px) auto 0;
    text-align: center;
    font-size: clamp(15px, 1.15vw, 17px);
    line-height: 1.7;
    color: var(--color-body);
}

.proof-note b {
    font-family: var(--font-head);
    font-weight: 700;
    color: var(--navy);
}

/* the count sits with the arrows, so the rail says "1 / 5" even when only
   one card fits */
.proof-count {
    flex-shrink: 0;
    font-family: var(--font-num);
    font-variant-numeric: tabular-nums;
    font-size: 13px;
    font-weight: 600;
    color: var(--text-muted);
}

.proof-count b {
    color: var(--navy);
}

@media (max-width: 767.98px) {
    /* a fifth of the next card shows, so the rail reads as a rail. At 88%
       the neighbour was a sliver and the section looked like one static
       image with no sign that four more followed. */
    .proof-card {
        flex-basis: 80%;
    }

    .proof-nav {
        gap: 14px;
    }

    .proof-progress {
        height: 4px;
    }
}

@media (max-width: 399.98px) {
    .proof-card {
        flex-basis: 84%;
    }

    /* the arrows would push the bar to nothing on the narrowest screens */
    .proof-progress {
        display: none;
    }
}

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

    .proof-viewport {
        scroll-behavior: auto;
    }

    .proof-card,
    .proof-card::before,
    .proof-card::after,
    .proof-arrow,
    .proof-progress-fill {
        transition: none;
    }
}

/* ---------- why attend ---------- */
.wa-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: clamp(18px, 1.8vw, 30px);
    margin-top: clamp(38px, 4vw, 64px);
}

.wa-card {
    position: relative;
    display: flex;
    flex-direction: column;
    margin-top: 18px;;
    padding: clamp(24px, 2.4vw, 34px);
    padding-right: clamp(52px, 5vw, 76px);
    background: #fff;
    border: 1px solid rgba(0, 32, 63, .06);
    /* notch at the top-right so the icon badge sits in a cut-out corner */
    border-radius: 20px 0 20px 20px;
    box-shadow: 0 14px 34px rgba(0, 32, 63, .07);
    transition: transform .4s cubic-bezier(.22, .61, .36, 1), box-shadow .4s ease, background .4s ease;
}

.wa-card:hover {
    transform: translateY(-6px);
    background: #fff;
    box-shadow: 0 24px 48px rgba(0, 32, 63, .12);
}

/* circular icon badge straddling the top-right corner */
.wa-icon {
    position: absolute;
    top: clamp(-26px, -2.2vw, -16px);
    right: clamp(-6px, -.4vw, 0px);
    width: clamp(56px, 5vw, 70px);
    height: clamp(56px, 5vw, 70px);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    /* each card sets its own --wa-accent / --wa-accent-soft inline */
    background: var(--wa-accent-soft, #fff);
    border: 1px solid var(--wa-accent, rgba(0, 32, 63, .08));
    color: var(--wa-accent, var(--navy-2));
    font-size: clamp(22px, 2vw, 28px);
    box-shadow: 0 10px 24px rgba(0, 32, 63, .08);
    transition: background .4s ease, color .4s ease, transform .4s ease, box-shadow .4s ease;
}

.wa-card:hover .wa-icon {
    background: var(--wa-accent, var(--mint));
    color: #fff;
    transform: scale(1.08) rotate(-6deg);
    box-shadow: 0 14px 28px var(--wa-accent-soft, rgba(0, 32, 63, .12));
}

/* the accent carries through to the card edge and the toggle */
.wa-card:hover {
    border-color: var(--wa-accent, rgba(0, 32, 63, .06));
}

.wa-toggle:hover,
.wa-toggle:focus-visible {
    color: var(--wa-accent, var(--navy-2));
}

.wa-card h3 {
    font-size: clamp(17px, 1.35vw, 21px);
    color: var(--navy);
    margin-bottom: 14px;
    padding-right: 8px;
}

/* three lines until the card is opened */
.wa-text {
    margin-bottom: 18px;
}

.wa-text p,
.wa-text ul {
    margin: 0;
    font-size: clamp(14px, 1vw, 15.5px);
    line-height: 1.75;
    color: var(--color-body);
}

.wa-text p {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.wa-text ul {
    display: none;
    list-style: none;
    padding: 0;
    margin-top: 14px;
}

.wa-text ul li {
    position: relative;
    padding-left: 22px;
    margin-bottom: 8px;
}

.wa-text ul li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 9px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--wa-accent, var(--mint));
}

.wa-card.is-open .wa-text p {
    -webkit-line-clamp: unset;
    overflow: visible;
}

.wa-card.is-open .wa-text ul {
    display: block;
}

/* toggle */
.wa-toggle {
    margin-top: auto;
    align-self: flex-start;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 0;
    background: none;
    border: none;
    cursor: pointer;
    font-family: var(--font-head);
    font-weight: 700;
    font-size: clamp(13.5px, 1vw, 15px);
    color: var(--navy);
    transition: color .3s ease;
}

.wa-toggle .bi {
    font-size: 15px;
    transition: transform .35s ease;
}

.wa-toggle:hover .bi {
    transform: translateX(4px);
}

.wa-card.is-open .wa-toggle .bi {
    transform: rotate(90deg);
}

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

@media (max-width: 575.98px) {
    .wa-grid {
        grid-template-columns: 1fr;
    }
}
/* =====================================================
   PARTNER MARQUEE - continuous right-to-left scroll
   ===================================================== */
.partners-section {
    position: relative;
    overflow: hidden;
    padding: clamp(20px, 2.4vw, 38px) 0;
    background: #0E3757;
    border-bottom: 1px solid rgba(255, 255, 255, .08);
}

/* a faint grid replaces the old brand illustration - the dark variant,
   since the strip runs on navy. It is faded at both edges on the same
   line as the marquee mask, so the logos always pass over clean ground. */
.partners-section::before {
    content: "";
    position: absolute;
    inset: 0;
    background: url("../../img/pattern/p-grid-dark.svg") repeat 0 0 / 120px 120px;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 22%, #000 78%, transparent);
    mask-image: linear-gradient(90deg, transparent, #000 22%, #000 78%, transparent);
    opacity: .5;
    pointer-events: none;
}

.marquee {
    position: relative;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
    mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}

.marquee-track {
    display: flex;
    width: max-content;
    animation: marquee-rtl 90s linear infinite;
}

.marquee:hover .marquee-track {
    animation-play-state: paused;
}

.marquee-group {
    display: flex;
    align-items: center;
    flex-shrink: 0;
}

.marquee-item {
    flex: 0 0 auto;
    width: clamp(104px, 8.6vw, 138px);
    height: clamp(52px, 4.4vw, 70px);
    margin: 0 clamp(5px, .5vw, 9px);
    padding: 6px 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fff;
    border: 1px solid rgba(0, 32, 63, .07);
    border-radius: 12px;
    transition: transform .35s ease, box-shadow .35s ease, border-color .35s ease;
}

.marquee-item img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.marquee-item:hover {
    transform: translateY(-4px);
    border-color: rgba(54, 236, 222, .55);
    box-shadow: 0 14px 30px rgba(0, 0, 0, .3);
}

@keyframes marquee-rtl {
    from {
        transform: translateX(0);
    }

    to {
        transform: translateX(-50%);
    }
}

@media (max-width: 767.98px) {
    .marquee-track {
        animation-duration: 55s;
    }
}

@media (prefers-reduced-motion: reduce) {
    .marquee-track {
        animation: none;
    }

    .marquee {
        overflow-x: auto;
    }
}

/* =====================================================
   SDG ALIGNMENT
   A ten-session slider in glass, then all 17 goals as a wall.
   Each card carries its official UN colour in --goal.
   ===================================================== */
.sdg-section {
    position: relative;
    overflow: hidden;
}

.eyebrow--center {
    justify-content: center;
}

.eyebrow--center::after {
    content: "";
    width: 26px;
    height: 2px;
    border-radius: 2px;
    background: currentColor;
}

/* ---------- session slider: five glass cards per view ---------- */
.sdg-focus {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    margin-top: clamp(30px, 3vw, 52px);
    padding: clamp(20px, 2.2vw, 32px);
    border-radius: 28px;
    background: rgba(255, 255, 255, .3);
    border: 1px solid rgba(255, 255, 255, .7);
    box-shadow: var(--shadow-soft);
}

/* extra colour for the glass to blur, over the section image */
.sdg-focus::before {
    content: "";
    position: absolute;
    inset: -25%;
    z-index: -2;
    background:
        radial-gradient(26% 40% at 8% 30%, rgba(197, 25, 45, .2), transparent 60%),
        radial-gradient(24% 38% at 30% 78%, rgba(253, 105, 37, .18), transparent 62%),
        radial-gradient(26% 40% at 52% 18%, rgba(253, 157, 36, .2), transparent 60%),
        radial-gradient(24% 38% at 74% 80%, rgba(63, 126, 68, .18), transparent 62%),
        radial-gradient(26% 42% at 94% 26%, rgba(25, 72, 106, .2), transparent 60%);
    animation: sdg-focus-mesh 26s ease-in-out infinite alternate;
}

.sdg-focus::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: url("../../img/pattern/p-orbit.svg") repeat;
    opacity: .35;
    pointer-events: none;
}

@keyframes sdg-focus-mesh {
    from {
        transform: translate3d(0, 0, 0) scale(1);
    }

    to {
        transform: translate3d(-3%, 3%, 0) scale(1.09);
    }
}

/* ---------- the rail ---------- */
.sdg-slider-viewport {
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    scrollbar-width: none;
    -ms-overflow-style: none;
    margin: 0 -4px;
    padding: 4px;
}

.sdg-slider-viewport::-webkit-scrollbar {
    display: none;
}

.sdg-slider-viewport:focus {
    outline: 0;
}

.sdg-slider-viewport:focus-visible {
    outline: 2px solid var(--navy);
    outline-offset: 4px;
    border-radius: 20px;
}

.sdg-slider-track {
    display: flex;
    gap: clamp(10px, 1vw, 16px);
    align-items: stretch;
}

/* ---------- glass card ---------- */
.sdg-focus-card {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    flex: 0 0 calc((100% - 4 * clamp(10px, 1vw, 16px)) / 5);
    scroll-snap-align: start;
    display: flex;
    flex-direction: column;
    padding: clamp(18px, 1.7vw, 24px);
    border-radius: 20px;
    background: rgba(255, 255, 255, .5);
    border: 1px solid rgba(255, 255, 255, .75);
    -webkit-backdrop-filter: blur(18px) saturate(160%);
    backdrop-filter: blur(18px) saturate(160%);
    box-shadow: 0 12px 34px rgba(0, 32, 63, .12);
    transition: transform .4s cubic-bezier(.22, .61, .36, 1), background .4s ease, box-shadow .4s ease, border-color .4s ease;
}

/* sheen down the top edge - what makes the surface read as glass */
.sdg-focus-card::before {
    content: "";
    position: absolute;
    inset: 0 0 auto;
    height: 45%;
    border-radius: inherit;
    background: linear-gradient(180deg, rgba(255, 255, 255, .62), rgba(255, 255, 255, 0));
    pointer-events: none;
}

/* the goal colour, held back until hover */
.sdg-focus-card::after {
    content: "";
    position: absolute;
    z-index: -1;
    right: -34px;
    bottom: -34px;
    width: 132px;
    height: 132px;
    border-radius: 50%;
    background: radial-gradient(circle, var(--goal, var(--mint)), transparent 70%);
    opacity: 0;
    transform: scale(.65);
    transition: opacity .45s ease, transform .55s cubic-bezier(.22, .61, .36, 1);
}

.sdg-focus-card:hover {
    transform: translateY(-8px);
    background: rgba(255, 255, 255, .7);
    border-color: rgba(255, 255, 255, .95);
    box-shadow: 0 22px 46px rgba(0, 32, 63, .2);
}

.sdg-focus-card:hover::after {
    opacity: .4;
    transform: scale(1);
}

.sdg-focus-imgs {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    margin-bottom: 16px;
}

.sdg-focus-img {
    display: block;
    width: clamp(42px, 3.6vw, 50px);
    height: clamp(42px, 3.6vw, 50px);
    border-radius: 11px;
    overflow: hidden;
    box-shadow: 0 10px 22px rgba(0, 32, 63, .22);
    transition: transform .45s cubic-bezier(.22, .61, .36, 1);
}

.sdg-focus-card:hover .sdg-focus-img {
    transform: translateY(-3px) rotate(-4deg);
}

.sdg-focus-card:hover .sdg-focus-img:nth-child(2) {
    transform: translateY(-3px) rotate(4deg);
}

.sdg-focus-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.sdg-focus-no {
    display: block;
    margin-bottom: 6px;
    font-family: var(--font-num);
    font-weight: 700;
    font-size: 11.5px;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--goal-ink, var(--goal, var(--navy)));
}

.sdg-focus-title {
    margin: 0 0 8px;
    font-size: clamp(15px, 1.15vw, 18px);
    line-height: 1.35;
    color: var(--navy);
}

.sdg-focus-card p {
    margin: 0;
    font-size: 12.5px;
    line-height: 1.55;
    color: var(--text-muted);
}

/* ---------- arrows: outline circles between two hairlines ---------- */
.sdg-slider-nav {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-top: clamp(20px, 2vw, 30px);
}

.sdg-slider-nav::before,
.sdg-slider-nav::after {
    content: "";
    flex: 1;
    height: 1px;
    background: var(--navy-2);
    opacity: .5;
}

.sdg-slider-nav::before {
    margin-right: 16px;
}

.sdg-slider-nav::after {
    margin-left: 16px;
}

.sdg-arrow {
    flex-shrink: 0;
    width: 44px;
    height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    border: 1px solid var(--navy-2);
    background: transparent;
    color: var(--navy-2);
    font-size: 17px;
    line-height: 1;
    cursor: pointer;
    transition: background .3s ease, color .3s ease, border-color .3s ease, transform .3s ease;
}

.sdg-arrow:hover:not(:disabled) {
    background: var(--navy);
    border-color: var(--navy);
    color: var(--mint);
    transform: translateY(-3px);
}

.sdg-arrow:focus {
    outline: 0;
}

.sdg-arrow:focus-visible {
    outline: 2px solid var(--navy);
    outline-offset: 3px;
}

.sdg-arrow:disabled {
    opacity: .35;
    cursor: default;
}

/* ---------- dots ---------- */
.sdg-dots {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-top: 16px;
}

.sdg-dot {
    width: 8px;
    height: 8px;
    padding: 0;
    border: 0;
    border-radius: 99px;
    background: rgba(0, 32, 63, .22);
    cursor: pointer;
    transition: width .35s cubic-bezier(.22, .61, .36, 1), background .3s ease;
}

.sdg-dot:hover {
    background: rgba(0, 32, 63, .45);
}

.sdg-dot.is-active {
    width: 26px;
    background: var(--navy);
}

.sdg-dot:focus {
    outline: 0;
}

.sdg-dot:focus-visible {
    outline: 2px solid var(--navy);
    outline-offset: 3px;
}

/* ---------- the wall of 17 ---------- */
.sdg-wall {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    margin-top: clamp(18px, 1.8vw, 28px);
    padding: clamp(24px, 2.6vw, 40px);
    border-radius: 26px;
    background: rgba(255, 255, 255, .42);
    -webkit-backdrop-filter: blur(14px) saturate(140%);
    backdrop-filter: blur(14px) saturate(140%);
    border: 1px solid rgba(255, 255, 255, .7);
    box-shadow: var(--shadow-soft);
}

.sdg-wall::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: url("../../img/pattern/p-orbit.svg") repeat;
    opacity: .6;
    pointer-events: none;
}

.sdg-wall::after {
    content: "";
    position: absolute;
    z-index: -1;
    top: -80px;
    right: -70px;
    width: min(360px, 40vw);
    height: min(360px, 40vw);
    background: url("../../img/pattern/why-choose-us-vector-2.png") no-repeat center / contain;
    opacity: .18;
    pointer-events: none;
}

.sdg-wall-head {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 18px;
    margin-bottom: clamp(20px, 2vw, 30px);
}

.sdg-wall-head h3 {
    margin: 0 0 4px;
    font-size: clamp(19px, 1.6vw, 25px);
    color: var(--navy);
}

.sdg-wall-head p {
    margin: 0;
    font-size: 14px;
    color: var(--text-muted);
}

.sdg-stats {
    display: flex;
    gap: clamp(16px, 1.8vw, 30px);
}

.sdg-stat {
    display: flex;
    flex-direction: column;
    line-height: 1.2;
    font-size: 12px;
    color: var(--text-muted);
}

.sdg-stat b {
    font-family: var(--font-num);
    font-weight: 700;
    font-size: clamp(22px, 2vw, 30px);
    font-variant-numeric: tabular-nums;
    color: var(--navy);
}

.sdg-wall-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: clamp(10px, 1vw, 16px);
}

.sdg-tile {
    position: relative;
    width: clamp(82px, 8.4vw, 112px);
    margin: 0;
    text-align: center;
}

.sdg-tile img {
    width: 100%;
    aspect-ratio: 1;
    object-fit: cover;
    border-radius: 12px;
    box-shadow: 0 8px 18px rgba(0, 32, 63, .16);
    transition: transform .4s cubic-bezier(.22, .61, .36, 1), box-shadow .4s ease;
}

/* colour halo, revealed behind the tile on hover */
.sdg-tile::before {
    content: "";
    position: absolute;
    inset: -8px -8px auto;
    z-index: -1;
    aspect-ratio: 1;
    border-radius: 18px;
    background: var(--goal, var(--mint));
    opacity: 0;
    transform: scale(.85);
    transition: opacity .4s ease, transform .45s cubic-bezier(.22, .61, .36, 1);
}

.sdg-tile:hover::before {
    opacity: .22;
    transform: scale(1);
}

.sdg-tile:hover img {
    transform: translateY(-6px) scale(1.05);
    box-shadow: 0 16px 30px rgba(0, 32, 63, .3);
}

.sdg-tile figcaption {
    margin-top: 8px;
    font-size: 11px;
    line-height: 1.35;
    color: var(--text-muted);
    transition: color .3s ease;
}

.sdg-tile:hover figcaption {
    color: var(--navy);
    font-weight: 600;
}

.sdg-wall-cta {
    margin-top: clamp(22px, 2.2vw, 34px);
}

@media (max-width: 1199.98px) {
    .sdg-focus-card {
        flex-basis: calc((100% - 3 * clamp(10px, 1vw, 16px)) / 4);
    }
}

@media (max-width: 991.98px) {
    .sdg-focus-card {
        flex-basis: calc((100% - 2 * clamp(10px, 1vw, 16px)) / 3);
    }
}

@media (max-width: 767.98px) {
    .sdg-focus-card {
        flex-basis: calc((100% - clamp(10px, 1vw, 16px)) / 2);
    }

    .sdg-wall-head {
        align-items: flex-start;
    }

    .sdg-stats {
        width: 100%;
        justify-content: space-between;
    }
}

@media (max-width: 575.98px) {
    .sdg-focus-card {
        flex-basis: 84%;
    }

    .sdg-tile {
        width: calc(33.333% - 8px);
    }

    .sdg-tile figcaption {
        font-size: 10px;
    }
}

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

    .sdg-focus::before {
        animation: none;
    }

    .sdg-slider-viewport {
        scroll-behavior: auto;
    }

    .sdg-focus-card,
    .sdg-focus-card::after,
    .sdg-focus-img,
    .sdg-tile img,
    .sdg-tile::before,
    .sdg-tile figcaption,
    .sdg-dot,
    .sdg-arrow {
        transition: none;
    }
}

/* =====================================================
   CALL FOR PAPERS
   Dark glass cards on a navy field - the one dark break
   between the SDG and Important Dates sections.
   ===================================================== */
.cfp-section {
    position: relative;
    overflow: hidden;
    background: var(--gradient);
}

/* faint grid + a mint glow bleeding in from the top right */
.cfp-section::before {
    content: "";
    position: absolute;
    inset: 0;
    background: url("../../img/pattern/p-lattice.svg") repeat;
    opacity: .35;
    pointer-events: none;
}

.cfp-section::after {
    content: "";
    position: absolute;
    top: -22%;
    right: -12%;
    width: min(620px, 60vw);
    height: min(620px, 60vw);
    background:
        url("../../img/pattern/banner-3-vector-2.png") no-repeat center / contain,
        radial-gradient(circle, rgba(54, 236, 222, .22), rgba(54, 236, 222, 0) 68%);
    opacity: .55;
    pointer-events: none;
    animation: cfp-drift 16s ease-in-out infinite alternate;
}

/* a second vector anchored bottom left, so the field is not one-sided */
.cfp-grid::before {
    content: "";
    position: absolute;
    left: -9%;
    bottom: -14%;
    z-index: -1;
    width: min(460px, 46vw);
    height: min(460px, 46vw);
    background: url("../../img/pattern/why-choose-us-vector-2.png") no-repeat center / contain;
    opacity: .3;
    pointer-events: none;
    animation: cfp-drift 20s ease-in-out infinite alternate-reverse;
}

@keyframes cfp-drift {
    from {
        transform: translate3d(0, 0, 0) rotate(0deg);
    }

    to {
        transform: translate3d(-18px, 22px, 0) rotate(6deg);
    }
}

.cfp-section > .container {
    position: relative;
    z-index: 1;
}

.cfp-section .eyebrow {
    color: var(--mint);
}

.cfp-section .section-header h2 {
    color: #fff;
}

.cfp-section .section-header p {
    color: var(--text-subhead);
}

/* the site gradient is navy-on-navy here, so recolour it in mint */
.cfp-section .text-gradient {
    background: linear-gradient(105deg, var(--mint) 0%, #7BF7EC 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.cfp-grid {
    position: relative;
    isolation: isolate;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
    gap: clamp(14px, 1.4vw, 22px);
    margin-top: clamp(30px, 3vw, 52px);
}

/* ---------- the card ---------- */
.cfp-card {
    position: relative;
    isolation: isolate;
    display: flex;
    flex-direction: column;
    padding: clamp(20px, 1.9vw, 28px);
    border-radius: 22px;
    background: rgba(255, 255, 255, .055);
    border: 1px solid rgba(255, 255, 255, .12);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    overflow: hidden;
    transition: transform .4s cubic-bezier(.22, .61, .36, 1), background .4s ease, box-shadow .4s ease;
}

/* gradient hairline ring, drawn with a mask so only the border shows */
.cfp-card::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 2;
    padding: 1px;
    border-radius: inherit;
    background: linear-gradient(140deg, var(--mint), rgba(54, 236, 222, 0) 58%);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    opacity: 0;
    pointer-events: none;
    transition: opacity .4s ease;
}

.cfp-card::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    border-radius: inherit;
    background:
        url("../../img/cover.png") no-repeat right -30px bottom -30px / 62%,
        radial-gradient(120% 90% at 100% 0%, rgba(54, 236, 222, .18), rgba(54, 236, 222, 0) 60%);
    opacity: 0;
    transform: scale(1.08);
    pointer-events: none;
    transition: opacity .45s ease, transform .6s cubic-bezier(.22, .61, .36, 1);
}

.cfp-card:hover::after {
    opacity: 1;
    transform: scale(1);
}

.cfp-card:hover {
    transform: translateY(-8px);
    background: rgba(255, 255, 255, .09);
    box-shadow: 0 26px 54px rgba(0, 0, 0, .35);
}

.cfp-card:hover::before {
    opacity: 1;
}

/* oversized number sunk into the corner */
.cfp-watermark {
    position: absolute;
    top: -18px;
    right: 4px;
    z-index: -1;
    font-family: var(--font-num);
    font-weight: 700;
    font-size: clamp(72px, 7vw, 104px);
    line-height: 1;
    letter-spacing: -.04em;
    color: rgba(255, 255, 255, .06);
    transition: color .4s ease, transform .5s cubic-bezier(.22, .61, .36, 1);
}

.cfp-card:hover .cfp-watermark {
    color: rgba(54, 236, 222, .14);
    transform: translateY(4px) scale(1.04);
}

.cfp-num {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
    font-family: var(--font-num);
    font-weight: 600;
    font-size: 11.5px;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--mint);
}

.cfp-num::after {
    content: "";
    width: 22px;
    height: 1px;
    background: var(--mint);
    opacity: .6;
    transition: width .4s cubic-bezier(.22, .61, .36, 1);
}

.cfp-card:hover .cfp-num::after {
    width: 46px;
}

.cfp-section .cfp-card-title {
    margin: 0 0 18px;
    font-size: clamp(16px, 1.25vw, 19px);
    line-height: 1.35;
    color: #fff;
    transition: color .3s ease;
}

.cfp-card:hover .cfp-card-title {
    color: var(--mint);
}

/* ---------- SDG tiles ---------- */
.cfp-goals {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: auto;
}

.cfp-goal {
    position: relative;
    display: inline-block;
    width: clamp(38px, 3.4vw, 46px);
    height: clamp(38px, 3.4vw, 46px);
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 6px 16px rgba(0, 0, 0, .3);
    cursor: help;
    transition: transform .35s cubic-bezier(.22, .61, .36, 1), box-shadow .35s ease;
}

/* mint hairline that only shows on hover */
.cfp-goal::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    box-shadow: inset 0 0 0 2px var(--mint);
    opacity: 0;
    transition: opacity .3s ease;
}

.cfp-goal:hover {
    transform: translateY(-4px) scale(1.06);
    box-shadow: 0 12px 24px rgba(0, 0, 0, .4);
}

.cfp-goal:hover::after {
    opacity: 1;
}

.cfp-goal img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.cfp-cta {
    margin-top: clamp(26px, 2.6vw, 42px);
}

@media (max-width: 575.98px) {
    .cfp-card {
        border-radius: 18px;
    }

    .cfp-watermark {
        font-size: 68px;
    }
}

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

    .cfp-card,
    .cfp-card::before,
    .cfp-card::after,
    .cfp-watermark,
    .cfp-num::after,
    .cfp-goal,
    .cfp-goal::after {
        transition: none;
    }

    .cfp-section::after,
    .cfp-grid::before {
        animation: none;
    }
}

/* =====================================================
   INDEXING DATABASES
   ===================================================== */
.indexing-section {
    position: relative;
    overflow: hidden;
    isolation: isolate;
    background:
        radial-gradient(ellipse at 15% 0%, rgba(54, 236, 222, .14), transparent 55%),
        radial-gradient(ellipse at 85% 100%, rgba(0, 32, 63, .07), transparent 55%),
        linear-gradient(180deg, #fff 0%, var(--surface-tint) 100%);
}

/* pattern artwork, faded out towards the edges */
.indexing-section::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: url("../../img/pattern/blogs-3-bg.png") no-repeat center center / cover;
    opacity: .55;
    -webkit-mask-image: radial-gradient(ellipse 78% 75% at 50% 50%, #000 40%, transparent 100%);
    mask-image: radial-gradient(ellipse 78% 75% at 50% 50%, #000 40%, transparent 100%);
}

.indexing-decor {
    position: absolute;
    top: -170px;
    right: -150px;
    width: 480px;
    height: 480px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(54, 236, 222, .28), transparent 66%);
    pointer-events: none;
    z-index: -1;
}

/* mint hairline framing the band */
.indexing-section::after {
    content: "";
    position: absolute;
    inset: auto 0 0 0;
    height: 3px;
    background: linear-gradient(90deg, transparent, var(--mint), transparent);
}

.text-gradient {
    background: var(--gradient);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

/* centred two-tone heading */
.indexing-title {
    text-align: center;
    font-size: clamp(28px, 3vw, 48px);
    color: var(--navy);
    margin-bottom: 0;
}

.indexing-title span {
    color: var(--mint-hover);
}

/* compact centred row of logo chips */
.indexing-logos {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: stretch;
    gap: clamp(10px, 1vw, 18px);
    margin-top: clamp(26px, 2.8vw, 44px);
}

.indexing-logo {
    display: flex;
    align-items: center;
    justify-content: center;
    width: clamp(118px, 10.5vw, 152px);
    height: clamp(62px, 5.4vw, 78px);
    padding: 10px 14px;
    background: rgba(255, 255, 255, .96);
    border: 1px solid var(--border-line);
    border-radius: 10px;
    box-shadow: 0 6px 18px rgba(0, 32, 63, .06);
    transition: transform .35s ease, box-shadow .35s ease, border-color .35s ease;
}

.indexing-logo img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.indexing-logo:hover {
    transform: translateY(-5px);
    border-color: var(--mint);
    box-shadow: 0 16px 32px rgba(0, 32, 63, .14);
}

/* proceedings note: plain centred text */
.indexing-note {
    max-width: 860px;
    margin: clamp(26px, 2.6vw, 40px) auto 0;
    text-align: center;
    font-size: clamp(15px, 1.05vw, 17px);
    line-height: 1.85;
    color: var(--color-body);
}

.indexing-note b {
    font-family: var(--font-head);
    font-weight: 700;
    color: var(--navy);
}

.indexing-note-tc {
    font-size: 13px;
    font-style: italic;
    color: var(--text-muted);
    white-space: nowrap;
}

@media (max-width: 575.98px) {
    .indexing-logo {
        width: clamp(104px, 40vw, 140px);
    }
}
/* =====================================================
   QUICK DOWNLOADS
   Glass cards over the section image, each wiping to navy on hover.
   ===================================================== */
/* No photograph and no decorative PNG behind this section any more - the
   ground is gradients only, so it stays clean at any size and costs
   nothing to load. */
.downloads-section {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    background:
        radial-gradient(42% 44% at 4% 0%, rgba(54, 236, 222, .16), transparent 62%),
        radial-gradient(38% 40% at 98% 96%, rgba(1, 51, 90, .07), transparent 64%),
        linear-gradient(180deg, var(--surface-tint) 0%, #fff 74%);
}

.download-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: clamp(14px, 1.4vw, 22px);
    margin-top: clamp(32px, 3.4vw, 54px);
}

.download-card {
    position: relative;
    isolation: isolate;
    display: flex;
    align-items: center;
    gap: 16px;
    padding: clamp(16px, 1.6vw, 22px);
    /* a real surface, not frosted glass: there is no longer a photograph
       underneath for a backdrop-filter to pick up */
    background: var(--surface);
    border: 1px solid var(--border-line);
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 12px 30px rgba(0, 32, 63, .1);
    transition: transform .35s ease, box-shadow .35s ease, border-color .35s ease, background .35s ease;
}

/* navy wipe, parked off the left edge until hover */
.download-card::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: var(--gradient);
    transform: translateX(-101%);
    transition: transform .45s cubic-bezier(.22, .61, .36, 1);
}

/* sheen down the top edge - what reads as glass, and it survives the wipe */
.download-card::after {
    content: "";
    position: absolute;
    inset: 0 0 auto;
    z-index: -1;
    height: 55%;
    background: linear-gradient(180deg, rgba(255, 255, 255, .55), rgba(255, 255, 255, 0));
    pointer-events: none;
    transition: opacity .45s ease;
}

.download-card:hover::after,
.download-card:focus-visible::after {
    opacity: .28;
}

.download-card:hover,
.download-card:focus-visible {
    transform: translateY(-6px);
    background: rgba(255, 255, 255, .16);
    border-color: rgba(54, 236, 222, .55);
    box-shadow: 0 22px 44px rgba(0, 32, 63, .28);
}

.download-card:hover::before,
.download-card:focus-visible::before {
    transform: translateX(0);
}

.download-icon,
.download-text,
.download-arrow {
    position: relative;
    z-index: 1;
}

.download-icon {
    flex-shrink: 0;
    width: clamp(46px, 3.6vw, 54px);
    height: clamp(46px, 3.6vw, 54px);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 14px;
    background: rgba(54, 236, 222, .22);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .6);
    color: var(--navy);
    font-size: clamp(20px, 1.6vw, 24px);
    transition: background .35s ease, color .35s ease, transform .35s ease;
}

.download-card:hover .download-icon {
    background: var(--mint);
    color: var(--navy);
    transform: scale(1.06);
}

.download-text {
    flex: 1;
    min-width: 0;
}

.download-title {
    display: block;
    font-family: var(--font-head);
    font-weight: 700;
    font-size: clamp(15px, 1.1vw, 17px);
    color: var(--navy);
    line-height: 1.35;
    transition: color .35s ease;
}

.download-meta {
    display: block;
    margin-top: 3px;
    font-family: var(--font-num);
    font-size: 12px;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--text-muted);
    transition: color .35s ease;
}

.download-card:hover .download-title {
    color: #fff;
}

.download-card:hover .download-meta {
    color: var(--mint);
}

.download-arrow {
    flex-shrink: 0;
    width: 34px;
    height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    border: 1px solid rgba(0, 32, 63, .18);
    background: rgba(255, 255, 255, .4);
    color: var(--navy);
    font-size: 14px;
    transition: all .35s ease;
}

.download-card:hover .download-arrow {
    border-color: var(--mint);
    background: var(--mint);
    color: var(--navy);
    transform: translateY(3px);
}

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

@media (max-width: 575.98px) {
    .download-grid {
        grid-template-columns: 1fr;
    }
}

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

    .downloads-section::after {
        animation: none;
    }

    .download-card,
    .download-card::before,
    .download-card::after,
    .download-icon,
    .download-arrow {
        transition: none;
    }
}
/* ---------- ambassador ---------- */
.ambassador-panel {
    position: relative;
    overflow: hidden;
    background:
        url("../../img/pattern/banner-3-vector-3.png") no-repeat right -60px bottom -80px / clamp(220px, 24vw, 340px) auto,
        linear-gradient(120deg, rgba(0, 32, 63, .5), rgba(54, 236, 222, .35));
    border: 1px solid rgba(255, 255, 255, .12);
}

.ambassador-panel h2 {
    margin-bottom: 12px;
}

.ambassador-panel p {
    margin-bottom: 0;
}

/* ---------- accordion ----------
   Used by every FAQ and by the guidance/ethics lists. Bootstrap's chevron
   is replaced with a round chip holding a plus, which rotates into a
   cross when the panel opens - built from two gradient bars, so there is
   no icon font or SVG to load. */
.custom-accordion {
    --bs-accordion-btn-focus-box-shadow: none;
}

.custom-accordion .accordion-item {
    position: relative;
    overflow: hidden;
    margin-bottom: 14px;
    background: #fff;
    border: 1px solid var(--border-line);
    border-radius: 16px !important;
    box-shadow: 0 10px 26px rgba(0, 32, 63, .05);
    transition: border-color .35s ease, box-shadow .35s ease, transform .35s cubic-bezier(.22, .61, .36, 1);
}

.custom-accordion .accordion-item:last-child {
    margin-bottom: 0;
}

/* mint rail down the left edge, drawn only when the panel is open */
.custom-accordion .accordion-item::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    z-index: 2;
    width: 4px;
    height: 0;
    border-radius: 0 4px 4px 0;
    background: var(--mint);
    transform: translateY(-50%);
    transition: height .4s cubic-bezier(.22, .61, .36, 1);
}

.custom-accordion .accordion-item:hover {
    border-color: rgba(54, 236, 222, .55);
    transform: translateY(-2px);
}

.custom-accordion .accordion-item:has(.accordion-button:not(.collapsed)) {
    border-color: var(--mint);
    box-shadow: 0 18px 40px rgba(0, 32, 63, .12);
}

.custom-accordion .accordion-item:has(.accordion-button:not(.collapsed))::before {
    height: 62%;
}

.custom-accordion .accordion-button {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 20px 22px;
    background: #fff;
    font-family: var(--font-head);
    font-weight: 700;
    font-size: clamp(15px, 1.05vw, 17.5px);
    line-height: 1.4;
    text-align: left;
    color: var(--navy);
    box-shadow: none;
    transition: background .35s ease, color .35s ease;
}

.custom-accordion .accordion-button:not(.collapsed) {
    color: var(--navy);
    background: linear-gradient(90deg, rgba(54, 236, 222, .14), rgba(54, 236, 222, .04));
}

.custom-accordion .accordion-button:focus {
    box-shadow: none;
}

.custom-accordion .accordion-button:focus-visible {
    outline: 2px solid var(--navy);
    outline-offset: -3px;
}

/* ---------- the plus / cross toggle ---------- */
.custom-accordion .accordion-button::after {
    flex-shrink: 0;
    width: 34px;
    height: 34px;
    margin-left: auto;
    border-radius: 50%;
    background-color: var(--surface-tint);
    background-image:
        linear-gradient(var(--navy), var(--navy)),
        linear-gradient(var(--navy), var(--navy));
    background-size: 13px 2px, 2px 13px;
    background-position: center center;
    background-repeat: no-repeat;
    transform: rotate(0deg);
    transition: transform .4s cubic-bezier(.22, .61, .36, 1), background-color .35s ease;
}

.custom-accordion .accordion-button:hover::after {
    background-color: rgba(54, 236, 222, .28);
}

/* the plus turns into a cross */
.custom-accordion .accordion-button:not(.collapsed)::after {
    background-color: var(--mint);
    transform: rotate(135deg);
}

.custom-accordion .accordion-body {
    padding: 4px 22px 22px;
    line-height: 1.8;
    color: var(--color-body);
}

/* =====================================================
   CONTACT / GOOGLE REVIEWS
   ===================================================== */
.contact-review {
    position: relative;
    overflow: hidden;
    isolation: isolate;
    /* the pattern folder is at the project root, so it is two levels up
       from assets/css - "../img/..." would look inside assets/img/ */
    background: url("../../img/pattern/projects-bg-shape-2-2.png") no-repeat center center / cover;
}

/* wash over the artwork: lighter on the left so the image reads through,
   near-opaque on the right so the review cards stay legible */
/* .contact-review::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(100deg,
            rgba(255, 255, 255, .40) 0%,
            rgba(255, 255, 255, .78) 34%,
            rgba(246, 250, 251, .95) 62%,
            rgba(246, 250, 251, .99) 100%);
} */

/* stronger crop of the same artwork down the left edge */
.cr-bg {
    position: absolute;
    inset: 0 auto 0 0;
    z-index: -1;
    width: 34%;
    background: url("../../img/sub-2.jpg") no-repeat left center / cover;
    clip-path: polygon(0 0, 100% 0, 82% 100%, 0 100%);
}

.contact-review .container {
    position: relative;
    z-index: 1;
}

/* ---- form card ---- */
.cr-form-wrapper {
    padding: clamp(26px, 2.8vw, 44px);
    border-radius: 24px;
    background:
        radial-gradient(ellipse at 100% 0%, rgba(54, 236, 222, .22), transparent 55%),
        var(--gradient);
    box-shadow: 0 34px 70px rgba(0, 32, 63, .35);
    color: var(--text-subhead);
}

.cr-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: var(--font-head);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--mint);
    margin-bottom: 10px;
}

.cr-eyebrow::before {
    content: "";
    width: 24px;
    height: 2px;
    border-radius: 2px;
    background: currentColor;
}

.cr-form-wrapper h2 {
    font-size: clamp(23px, 2.1vw, 33px);
    color: #fff;
    margin-bottom: clamp(20px, 2vw, 30px);
}

.cr-form label {
    display: block;
    margin-bottom: 7px;
    font-family: var(--font-head);
    font-size: 13px;
    font-weight: 700;
    color: var(--text-subhead);
}

.cr-form input,
.cr-form textarea {
    width: 100%;
    padding: 13px 16px;
    border: 1px solid transparent;
    border-radius: 10px;
    background: #fff;
    font-family: var(--font-body);
    font-size: 14.5px;
    color: var(--navy);
    transition: border-color .3s ease, box-shadow .3s ease;
}

.cr-form input::placeholder,
.cr-form textarea::placeholder {
    color: #9AA3B2;
}

.cr-form input:focus,
.cr-form textarea:focus {
    outline: none;
    border-color: var(--mint);
    box-shadow: 0 0 0 4px rgba(54, 236, 222, .25);
}

.cr-form input.is-invalid {
    border-color: var(--error);
    box-shadow: 0 0 0 4px rgba(229, 57, 53, .2);
}

.cr-form textarea {
    resize: vertical;
    min-height: 110px;
}

.cr-submit {
    width: 100%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 15px 26px;
    border: none;
    border-radius: 10px;
    background: var(--mint);
    color: var(--navy);
    font-family: var(--font-btn);
    font-weight: 600;
    font-size: 15px;
    cursor: pointer;
    box-shadow: 0 14px 30px rgba(54, 236, 222, .3);
    transition: background .35s ease, color .35s ease, transform .3s ease, box-shadow .35s ease;
}

.cr-submit:hover,
.cr-submit:focus-visible {
    background: var(--mint-hover);
    color: var(--navy);
    transform: translateY(-2px);
    box-shadow: 0 20px 38px rgba(54, 236, 222, .42);
}

.cr-submit .bi {
    transition: transform .3s ease;
}

.cr-submit:hover .bi {
    transform: translateX(4px);
}

/* intl-tel-input sits inside our white field */
.cr-form .iti {
    width: 100%;
}

.cr-form .iti__flag-container {
    border-radius: 10px 0 0 10px;
}

.cr-form .iti--separate-dial-code .iti__selected-flag {
    background: transparent;
    border-radius: 10px 0 0 10px;
}

.cr-form .iti__selected-dial-code {
    font-family: var(--font-num);
    font-weight: 600;
    color: var(--navy);
}

/* the dropdown inherits the card's pale text otherwise - force readable colours */
.cr-form .iti__country-list {
    border-radius: 12px;
    border: 1px solid var(--border-line);
    background: #fff;
    box-shadow: 0 20px 44px rgba(0, 32, 63, .22);
    color: var(--navy);
}

.cr-form .iti__country {
    padding: 9px 12px;
    color: var(--navy);
    font-family: var(--font-body);
    font-size: 14.5px;
}

.cr-form .iti__country-name {
    color: var(--navy);
}

.cr-form .iti__dial-code {
    font-family: var(--font-num);
    font-weight: 600;
    color: var(--text-muted);
}

.cr-form .iti__country.iti__highlight,
.cr-form .iti__country:hover {
    background: rgba(54, 236, 222, .18);
}

.cr-form .iti__country.iti__highlight .iti__country-name,
.cr-form .iti__country:hover .iti__country-name {
    color: var(--navy);
}

.cr-form .iti__country.iti__active {
    background: var(--navy);
}

.cr-form .iti__country.iti__active .iti__country-name,
.cr-form .iti__country.iti__active .iti__dial-code {
    color: #fff;
}

.cr-form .iti__divider {
    border-bottom-color: var(--border-line);
}

/* search box in newer builds */
.cr-form .iti__search-input {
    color: var(--navy);
    border-bottom: 1px solid var(--border-line);
}

/* ---- reviews ---- */
.cr-reviews .eyebrow .bi {
    font-size: 15px;
}

.cr-reviews h2 {
    font-size: clamp(24px, 2.2vw, 36px);
    color: var(--navy);
    margin-bottom: 14px;
}

.review-slider {
    overflow: hidden;
    margin-top: clamp(22px, 2.4vw, 34px);
}

.review-track {
    display: flex;
    transition: transform .55s cubic-bezier(.22, .61, .36, 1);
}

.review-card {
    flex: 0 0 100%;
    padding: clamp(22px, 2.2vw, 32px);
    background: #fff;
    border: 1px solid var(--border-line);
    border-radius: 18px;
    box-shadow: 0 18px 40px rgba(0, 32, 63, .08);
}

.review-top {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 16px;
}

.review-avatar {
    flex-shrink: 0;
    width: 58px;
    height: 58px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--surface-tint);
    border: 1px solid var(--border-line);
    color: var(--navy-2);
    font-size: 26px;
}

.review-who {
    flex: 1;
    min-width: 0;
}

.review-who h3 {
    font-size: clamp(15px, 1.15vw, 18px);
    color: var(--navy);
    margin-bottom: 2px;
}

.review-who h4 {
    font-size: 13px;
    font-weight: 500;
    font-family: var(--font-body);
    color: var(--text-muted);
    margin-bottom: 6px;
}

.review-stars {
    display: inline-flex;
    gap: 3px;
    color: #F4B400;
    font-size: 13px;
}

.review-quote {
    flex-shrink: 0;
    align-self: flex-start;
    font-size: 30px;
    line-height: 1;
    color: var(--mint);
}

.review-text {
    margin: 0;
    font-size: clamp(14px, 1vw, 15.5px);
    line-height: 1.8;
    color: var(--color-body);
}

/* sits inside the card, under the quote, like a card footer */
.review-more {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    margin-top: 16px;
    padding-top: 14px;
    border-top: 1px solid var(--border-line);
    font-family: var(--font-head);
    font-weight: 700;
    font-size: 14px;
    color: var(--navy);
    transition: color .3s ease;
}

.review-more i {
    font-size: 13px;
    transition: transform .3s ease;
}

.review-more:hover,
.review-more:focus-visible {
    color: var(--navy-2);
}

.review-more:hover i,
.review-more:focus-visible i {
    transform: translate(3px, -3px);
}

/* two outlined circles centred between two rules */
.review-nav {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-top: clamp(20px, 2vw, 30px);
}

.review-nav::before,
.review-nav::after {
    content: "";
    flex: 1;
    height: 1px;
    background: var(--navy-2);
    opacity: .5;
}

.review-nav::before {
    margin-right: 16px;
}

.review-nav::after {
    margin-left: 16px;
}

.review-nav button {
    flex-shrink: 0;
    width: 44px;
    height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    border: 1px solid var(--navy-2);
    background: transparent;
    color: var(--navy-2);
    font-size: 17px;
    line-height: 1;
    cursor: pointer;
    transition: background .3s ease, color .3s ease, border-color .3s ease, transform .3s ease;
}

.review-nav button:hover,
.review-nav button:focus-visible {
    background: var(--navy);
    border-color: var(--navy);
    color: var(--mint);
    transform: translateY(-3px);
}

@media (max-width: 991.98px) {
    .cr-bg {
        display: none;
    }
}

/* =====================================================
   VOLUNTEER / SCHOLARSHIP
   A conference photo under a navy wash, two glass cards on top.
   NB: headings need the section prefix - plain .vol-heading loses
   to .section h2, which is why they rendered dark before.
   ===================================================== */
.volunteer-section {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    background: var(--navy);
}

/* the conference photo */
.volunteer-section::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -2;
    background: url("../../img/gallery/01.jpg") no-repeat center center / cover;
    transform: scale(1.04);
}

/* navy wash + mint glow, so the photo reads as texture behind the glass */
.volunteer-section::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background:
        radial-gradient(58% 44% at 50% -4%, rgba(54, 236, 222, .3), transparent 60%),
        radial-gradient(46% 40% at 100% 100%, rgba(54, 236, 222, .14), transparent 62%),
        linear-gradient(180deg, rgba(0, 32, 63, .93) 0%, rgba(0, 32, 63, .88) 45%, rgba(0, 22, 44, .95) 100%);
    pointer-events: none;
}

/* ---------- cards ---------- */
.vol-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(18px, 1.8vw, 30px);
    align-items: stretch;
}

.vol-card {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    padding: clamp(26px, 2.6vw, 42px);
    border-radius: 24px;
    background: rgba(255, 255, 255, .07);
    border: 1px solid rgba(255, 255, 255, .14);
    -webkit-backdrop-filter: blur(18px) saturate(150%);
    backdrop-filter: blur(18px) saturate(150%);
    box-shadow: 0 22px 54px rgba(0, 8, 20, .38);
    transition: transform .45s cubic-bezier(.22, .61, .36, 1), background .45s ease, box-shadow .45s ease;
}

/* gradient hairline ring, drawn with a mask so only the border shows */
.vol-card::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 2;
    padding: 1px;
    border-radius: inherit;
    background: linear-gradient(150deg, rgba(54, 236, 222, .9), rgba(54, 236, 222, 0) 52%);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    opacity: .5;
    pointer-events: none;
    transition: opacity .45s ease;
}

/* mint bloom, held back until hover */
.vol-card::after {
    content: "";
    position: absolute;
    z-index: -1;
    right: -50px;
    top: -50px;
    width: 200px;
    height: 200px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(54, 236, 222, .5), rgba(54, 236, 222, 0) 70%);
    opacity: 0;
    transform: scale(.6);
    transition: opacity .5s ease, transform .6s cubic-bezier(.22, .61, .36, 1);
}

.vol-card:hover {
    transform: translateY(-10px);
    background: rgba(255, 255, 255, .11);
    box-shadow: 0 34px 70px rgba(0, 8, 20, .5);
}

.vol-card:hover::before {
    opacity: 1;
}

.vol-card:hover::after {
    opacity: 1;
    transform: scale(1);
}

/* ---------- icon ---------- */
.vol-icon {
    position: relative;
    width: clamp(52px, 4.2vw, 62px);
    height: clamp(52px, 4.2vw, 62px);
    margin-bottom: clamp(20px, 2vw, 28px);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 18px;
    background: linear-gradient(140deg, var(--mint) 0%, var(--mint-hover) 100%);
    color: var(--navy);
    font-size: clamp(22px, 1.9vw, 26px);
    box-shadow: 0 12px 28px rgba(54, 236, 222, .4);
    transition: transform .45s cubic-bezier(.22, .61, .36, 1), border-radius .45s ease;
}

.vol-card:hover .vol-icon {
    transform: translateY(-4px) rotate(-8deg);
    border-radius: 50%;
}

/* ---------- type ---------- */
.volunteer-section .vol-heading {
    margin: 0 0 14px;
    font-size: clamp(21px, 1.75vw, 28px);
    line-height: 1.28;
    color: #fff;
    text-wrap: balance;
}

/* the three phrases stay on one line */
.vol-tagline {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: clamp(7px, .8vw, 12px);
    margin: 0 0 18px;
    font-family: var(--font-head);
    font-weight: 700;
    font-size: clamp(12.5px, 1vw, 15px);
    letter-spacing: .01em;
    color: var(--mint);
}

.vol-tagline > span {
    white-space: nowrap;
}

.vol-sep {
    opacity: .45;
}

.vol-card .vol-lead {
    margin: 0;
    font-size: clamp(14px, 1.05vw, 15.5px);
    line-height: 1.8;
    color: var(--text-subhead);
    text-align: left;
}

/* ---------- check list ---------- */
.vol-list {
    list-style: none;
    margin: clamp(20px, 2vw, 28px) 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.vol-list li {
    display: flex;
    align-items: flex-start;
    gap: 13px;
    padding: 11px 15px;
    border-radius: 12px;
    background: rgba(255, 255, 255, .05);
    border: 1px solid rgba(255, 255, 255, .08);
    font-family: var(--font-head);
    font-weight: 700;
    font-size: clamp(13.5px, 1vw, 15px);
    line-height: 1.45;
    color: #fff;
    transition: background .3s ease, border-color .3s ease, transform .3s ease;
}

.vol-list li:hover {
    background: rgba(54, 236, 222, .1);
    border-color: rgba(54, 236, 222, .4);
    transform: translateX(4px);
}

.vol-list i {
    flex-shrink: 0;
    width: 22px;
    height: 22px;
    margin-top: 1px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(54, 236, 222, .18);
    color: var(--mint);
    font-size: 13px;
    font-weight: 700;
    transition: background .3s ease, color .3s ease;
}

.vol-list li:hover i {
    background: var(--mint);
    color: var(--navy);
}

/* ---------- closing lines + CTA ---------- */
.vol-note {
    margin: clamp(20px, 2vw, 28px) 0 0;
    padding-top: clamp(18px, 1.8vw, 24px);
    border-top: 1px solid rgba(255, 255, 255, .14);
    font-size: clamp(14px, 1.05vw, 15.5px);
    line-height: 1.8;
    color: var(--text-subhead);
}

.vol-note--plain {
    margin-top: 12px;
    padding-top: 0;
    border-top: 0;
}

/* pinned low so both cards' buttons sit on the same line */
.vol-card-cta {
    margin-top: auto;
    padding-top: clamp(22px, 2.2vw, 30px);
}

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

    .volunteer-section::before {
        background-position: center top;
    }
}

@media (max-width: 575.98px) {
    .vol-card {
        padding: 24px 20px;
        border-radius: 20px;
    }

    .vol-tagline {
        flex-wrap: wrap;
    }

    .vol-list li {
        padding: 10px 13px;
    }
}

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

    .vol-card,
    .vol-card::before,
    .vol-card::after,
    .vol-icon,
    .vol-list li,
    .vol-list i {
        transition: none;
    }
}

/* ---------- venue banner ----------
   Photo background behind a navy scrim, with the venue shot on top. */
.venue-banner {
    position: relative;
    isolation: isolate;
    overflow: hidden;
}

.venue-banner::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -2;
    background: url("../../img/banner.png") no-repeat center center / cover;
}

/* the photo is bright and busy - this keeps the heading legible */
.venue-banner::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background:
        radial-gradient(ellipse 70% 60% at 50% 8%, rgba(54, 236, 222, .16) 0%, rgba(54, 236, 222, 0) 60%),
        linear-gradient(180deg, rgba(0, 32, 63, .78) 0%, rgba(0, 32, 63, .6) 42%, rgba(0, 18, 36, .88) 100%);
    pointer-events: none;
}

.venue-head {
    max-width: 760px;
    margin-bottom: clamp(20px, 2vw, 30px);
}

.venue-pin {
    background: rgba(54, 236, 222, .14);
    border: 1px solid rgba(54, 236, 222, .45);
    font-family: var(--font-num);
    font-weight: 600;
    font-size: 11.5px;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--mint);
}

.venue-pin i {
    font-size: 13px;
}

.venue-banner .venue-title {
    font-family: var(--font-head);
    font-weight: 800;
    font-size: clamp(30px, 3.6vw, 56px);
    line-height: 1.12;
    color: #fff;
    text-shadow: 0 2px 24px rgba(0, 12, 26, .5);
}

/* the place name carries the mint, the label stays white */
.venue-place {
    background: linear-gradient(92deg, #DFFFFB 0%, var(--mint) 46%, var(--mint-hover) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.venue-sub {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 10px;
    font-family: var(--font-num);
    font-weight: 500;
    font-size: clamp(12.5px, 1vw, 14.5px);
    letter-spacing: .02em;
    color: var(--text-subhead);
}

/* one flex item per fact, so "11th" cannot be torn off its date. The gap
   on .venue-sub then separates the two facts, not every text run. */
.venue-fact {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
}

.venue-sub i {
    font-size: 15px;
    color: var(--mint);
}

.venue-sub sup {
    font-size: .62em;
    /* keeps the superscript on the line it belongs to */
    line-height: 0;
}

@media (max-width: 575.98px) {
    .venue-sub {
        gap: 8px;
        font-size: 12px;
    }

    .venue-sub i {
        font-size: 13.5px;
    }
}

/* below this the two facts cannot share a row without shrinking the type
   past reading size, so they stack as two whole lines instead */
@media (max-width: 399.98px) {
    .venue-dot {
        display: none;
    }

    .venue-sub {
        flex-direction: column;
        gap: 6px;
    }
}

.venue-dot {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: rgba(54, 236, 222, .6);
}

@media (max-width: 575.98px) {
    .venue-dot {
        display: none;
    }

    .venue-sub {
        flex-direction: column;
        gap: 6px;
    }
}

.venue-cta {
    margin-bottom: clamp(26px, 2.8vw, 44px);
}

.venue-shot {
    margin: 0;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 28px 60px rgba(0, 12, 26, .45);
}

.venue-shot img {
    width: 100%;
    height: auto;
    display: block;
}

/* ---------- venue ---------- */
.venue-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px;
}

.venue-card {
    border-radius: 24px;
    overflow: hidden;
    height: 220px;
    box-shadow: var(--shadow-hard);
}

.venue-card:first-child {
    grid-column: span 2;
    height: 280px;
}

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

/* ---------- footer ---------- */
/* Graphite Black footer, pattern artwork pinned to the top-right */
.site-footer {
    position: relative;
    overflow: hidden;
    background: var(--graphite);
    color: #fff;
    padding: clamp(56px, 5vw, 90px) 0 32px;
}

.site-footer::before {
    content: "";
    position: absolute;
    top: -30px;
    right: -40px;
    width: clamp(280px, 34vw, 560px);
    height: clamp(120px, 12vw, 200px);
    background: url("../../img/pattern/brands-vector.png") no-repeat right top / contain;
    opacity: .3;
    pointer-events: none;
}

.site-footer::after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    width: 55%;
    height: 60%;
    background: radial-gradient(ellipse at 100% 0%, rgba(54, 236, 222, .16), transparent 65%);
    pointer-events: none;
}

.site-footer .container {
    position: relative;
    z-index: 1;
}

/* footer logo, on a white plate against Graphite Black */
.footer-logo {
    display: inline-flex;
    padding: 10px 16px;
    margin-bottom: 18px;
    background: #fff;
    border-radius: 14px;
    transition: transform .3s ease;
}

.footer-logo:hover {
    transform: translateY(-3px);
}

.footer-logo img {
    display: block;
    width: auto;
    height: clamp(46px, 3.6vw, 60px);
}

.site-footer h3,
.site-footer h4 {
    color: #fff;
    font-weight: 700;
}

.site-footer h3 {
    font-size: 22px;
    margin-bottom: 14px;
}

.site-footer h4 {
    font-size: 17px;
    margin-bottom: 16px;
}

.site-footer p {
    font-size: 15px;
    line-height: 1.8;
}

/* links white, Neon Mint on hover */
.site-footer a {
    color: #fff;
    transition: color .3s ease;
}

.site-footer a:hover,
.site-footer a:focus {
    color: var(--mint);
}

.footer-links {
    list-style: none;
    padding: 0;
    margin: 0;
}

.footer-links li {
    margin-bottom: 10px;
}

.footer-links a {
    position: relative;
    padding-left: 0;
    transition: color .3s ease, padding-left .3s ease;
}

.footer-links a:hover {
    padding-left: 6px;
}

/* contact list with Bootstrap Icons */
.footer-contact {
    list-style: none;
    padding: 0;
    margin: 0;
}

.footer-contact li {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 14px;
    font-size: 15px;
    line-height: 1.5;
}

.footer-contact .bi {
    flex-shrink: 0;
    width: 34px;
    height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    background: rgba(54, 236, 222, .12);
    border: 1px solid rgba(54, 236, 222, .3);
    color: var(--mint);
    font-size: 15px;
    transition: background .3s ease, transform .3s ease;
}

.footer-contact li:hover .bi {
    background: var(--mint);
    color: var(--navy);
    transform: translateY(-2px);
}

/* ---- social icons: Neon Mint, filling from the bottom on hover ---- */
.footer-social-title {
    display: block;
    margin-top: 26px;
    margin-bottom: 12px;
    font-family: var(--font-head);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--mint);
}

.footer-social {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.footer-social a {
    position: relative;
    width: 44px;
    height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border-radius: 50%;
    border: 1px solid rgba(54, 236, 222, .4);
    background: rgba(54, 236, 222, .08);
    color: var(--mint);
    font-size: 17px;
    line-height: 1;
    z-index: 1;
    transition: color .35s ease, transform .35s ease, box-shadow .35s ease, border-color .35s ease;
}

/* mint disc that rises to fill the circle */
.footer-social a::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(160deg, var(--mint), var(--mint-hover));
    transform: translateY(101%);
    transition: transform .4s cubic-bezier(.22, .61, .36, 1);
}

.footer-social a:hover::before,
.footer-social a:focus::before {
    transform: translateY(0);
}

.footer-social a:hover,
.footer-social a:focus {
    color: var(--navy);
    border-color: var(--mint);
    transform: translateY(-4px);
    box-shadow: 0 12px 26px rgba(54, 236, 222, .35);
}

.footer-social a i {
    transition: transform .35s ease;
}

.footer-social a:hover i {
    transform: scale(1.15);
}

.footer-bottom {
    border-color: rgba(255, 255, 255, .12) !important;
}

.footer-bottom p {
    margin-bottom: 0;
    font-size: 14px;
}

/* ---------- speaker modal ---------- */
.modal-content {
    border: none;
    box-shadow: var(--shadow-hard);
}

.modal-header h2 {
    font-size: clamp(22px, 1.8vw, 30px);
    font-weight: 700;
    color: var(--color-ink);
    margin-bottom: 0;
}

.modal-header .eyebrow {
    color: var(--color-secondary);
    margin-bottom: 0;
}

.modal-body p {
    line-height: 1.8;
}
/* =====================================================
   RESPONSIVE
   ===================================================== */
@media (max-width: 1199.98px) {
    .timeline {
        grid-template-columns: repeat(2, 1fr);
    }

    .timeline::before {
        display: none;
    }
}

@media (max-width: 767.98px) {
    .venue-grid,
    .timeline {
        grid-template-columns: 1fr;
    }

    .venue-card:first-child {
        grid-column: auto;
        height: 240px;
    }
}

/* =====================================================
   OTHER SERVICES BY IFERP
   Four cards on a tinted field. Each card carries its own --tone,
   which colours the number, the icon tile and the hover bloom; the
   surfaces stay white so mint keeps its 8% share of the page.
   NB: card headings need the section prefix - plain .os-title loses
   to .section h3 and would come back at the wrong size.
   ===================================================== */
.os-section {
    position: relative;
    isolation: isolate;
    background: var(--surface-tint);
}

/* two soft blooms and a hairline grid, so the field is not flat white */
.os-section::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background:
        radial-gradient(48% 38% at 8% 0%, rgba(54, 236, 222, .16), transparent 62%),
        radial-gradient(42% 36% at 96% 22%, rgba(1, 51, 90, .08), transparent 64%);
    pointer-events: none;
}

.os-section::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background-image:
        linear-gradient(to right, rgba(0, 32, 63, .045) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(0, 32, 63, .045) 1px, transparent 1px);
    background-size: 64px 64px;
    -webkit-mask-image: radial-gradient(72% 62% at 50% 40%, #000 0%, transparent 78%);
    mask-image: radial-gradient(72% 62% at 50% 40%, #000 0%, transparent 78%);
    pointer-events: none;
}

/* ---------- the grid ---------- */
.os-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(18px, 1.9vw, 30px);
    margin-top: clamp(34px, 3.4vw, 58px);
}

/* ---------- the card ---------- */
.os-card {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    padding: clamp(28px, 2.7vw, 44px);
    border-radius: var(--radius);
    background: var(--surface);
    border: 1px solid var(--border-line);
    box-shadow: 0 18px 44px rgba(0, 32, 63, .07);
    transition: transform .45s cubic-bezier(.22, .61, .36, 1), box-shadow .45s ease, border-color .45s ease;
}

/* tone bar across the top edge, drawn in from the left on hover */
.os-card::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    z-index: 2;
    background: linear-gradient(90deg, var(--tone), rgba(255, 255, 255, 0));
    transform: scaleX(.18);
    transform-origin: left center;
    transition: transform .55s cubic-bezier(.22, .61, .36, 1);
}

/* tone bloom in the far corner, held back until hover */
.os-card::after {
    content: "";
    position: absolute;
    z-index: -1;
    right: -70px;
    bottom: -70px;
    width: 240px;
    height: 240px;
    border-radius: 50%;
    background: radial-gradient(circle, color-mix(in srgb, var(--tone) 38%, transparent), transparent 70%);
    opacity: 0;
    transform: scale(.6);
    transition: opacity .5s ease, transform .6s cubic-bezier(.22, .61, .36, 1);
}

.os-card:hover,
.os-card:focus-within {
    transform: translateY(-10px);
    border-color: color-mix(in srgb, var(--tone) 45%, var(--border-line));
    box-shadow: 0 34px 70px rgba(0, 32, 63, .16);
}

.os-card:hover::before,
.os-card:focus-within::before {
    transform: scaleX(1);
}

.os-card:hover::after,
.os-card:focus-within::after {
    opacity: 1;
    transform: scale(1);
}

/* ---------- the ghosted running number ---------- */
.os-index {
    position: absolute;
    top: clamp(14px, 1.4vw, 22px);
    right: clamp(18px, 1.8vw, 30px);
    font-family: var(--font-num);
    font-variant-numeric: tabular-nums;
    font-weight: 700;
    font-size: clamp(46px, 4.6vw, 74px);
    line-height: 1;
    color: color-mix(in srgb, var(--tone) 22%, transparent);
    transition: color .45s ease, transform .55s cubic-bezier(.22, .61, .36, 1);
    pointer-events: none;
}

.os-card:hover .os-index,
.os-card:focus-within .os-index {
    color: color-mix(in srgb, var(--tone) 42%, transparent);
    transform: translateY(-4px);
}

/* ---------- icon tile ---------- */
.os-icon {
    position: relative;
    width: clamp(54px, 4.3vw, 64px);
    height: clamp(54px, 4.3vw, 64px);
    margin-bottom: clamp(20px, 2vw, 28px);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 18px;
    background: linear-gradient(140deg, var(--tone) 0%, color-mix(in srgb, var(--tone) 62%, var(--navy)) 100%);
    color: var(--navy);
    font-size: clamp(23px, 1.9vw, 27px);
    box-shadow: 0 12px 28px color-mix(in srgb, var(--tone) 38%, transparent);
    transition: transform .45s cubic-bezier(.22, .61, .36, 1), border-radius .45s ease;
}

.os-card:hover .os-icon,
.os-card:focus-within .os-icon {
    transform: translateY(-4px) rotate(-8deg);
    border-radius: 50%;
}

/* ---------- type ---------- */
.os-section .os-title {
    margin: 0 0 12px;
    font-size: clamp(20px, 1.6vw, 26px);
    line-height: 1.25;
    color: var(--color-ink);
}

.os-section .os-text {
    margin: 0;
    max-width: 46ch;
    font-size: clamp(15px, .98vw, 16.5px);
    line-height: 1.8;
    color: var(--color-body);
}

/* ---------- capability chips ---------- */
.os-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: clamp(18px, 1.8vw, 26px) 0 0;
    padding: 0;
}

.os-tags li {
    font-family: var(--font-head);
    font-size: 12.5px;
    font-weight: 600;
    letter-spacing: .01em;
    padding: 5px 12px;
    border-radius: 999px;
    color: var(--navy-2);
    background: color-mix(in srgb, var(--tone) 12%, var(--surface-alt));
    border: 1px solid color-mix(in srgb, var(--tone) 28%, var(--border-line));
}

/* ---------- the call to action ---------- */
.os-cta {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    align-self: flex-start;
    margin-top: auto;
    padding-top: clamp(20px, 2vw, 28px);
    font-family: var(--font-btn);
    font-weight: 600;
    font-size: 15px;
    color: var(--navy);
    text-decoration: none;
    transition: color .3s ease, gap .35s cubic-bezier(.22, .61, .36, 1);
}

/* mint rule under the label only, growing from the left */
.os-cta span {
    position: relative;
}

.os-cta span::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -4px;
    width: 100%;
    height: 2px;
    border-radius: 2px;
    background: var(--tone);
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform .45s cubic-bezier(.22, .61, .36, 1);
}

/* the arrow sits in a ring that fills with the tone */
.os-cta i {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    font-size: 14px;
    border: 1.5px solid color-mix(in srgb, var(--tone) 55%, var(--border-line));
    transition: background .35s ease, border-color .35s ease, transform .45s cubic-bezier(.22, .61, .36, 1);
}

.os-card:hover .os-cta,
.os-card:focus-within .os-cta {
    gap: 14px;
}

.os-card:hover .os-cta span::after,
.os-card:focus-within .os-cta span::after {
    transform: scaleX(1);
}

.os-card:hover .os-cta i,
.os-card:focus-within .os-cta i {
    background: var(--tone);
    border-color: var(--tone);
    transform: translateX(2px);
}

/* the whole card is the hit area, so the keyboard ring goes on the card */
.os-cta.stretched-link:focus-visible {
    outline: none;
}

.os-card:focus-within {
    outline: 3px solid color-mix(in srgb, var(--tone) 70%, transparent);
    outline-offset: 3px;
}

/* ---------- closing help band ---------- */
.os-help {
    background: var(--surface);
    padding-top: 0;
}

.os-help-panel {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: clamp(24px, 3vw, 56px);
    padding: clamp(32px, 3.4vw, 60px);
    border-radius: 28px;
    background: var(--gradient);
    box-shadow: var(--shadow-hard);
}

.os-help-panel::before {
    content: "";
    position: absolute;
    z-index: -1;
    top: -40%;
    right: -6%;
    width: min(460px, 60%);
    height: min(460px, 130%);
    background: radial-gradient(circle, rgba(54, 236, 222, .3), transparent 66%);
    pointer-events: none;
}

.os-help-copy {
    max-width: 60ch;
}

.os-help-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 14px;
    font-family: var(--font-head);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--mint);
}

.os-help .os-help-title {
    margin: 0 0 12px;
    font-size: clamp(21px, 1.9vw, 30px);
    line-height: 1.3;
    color: #fff;
}

.os-help .os-help-text {
    margin: 0;
    font-size: clamp(15px, 1vw, 16.5px);
    line-height: 1.8;
    color: var(--text-subhead);
}

.os-help-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    flex-shrink: 0;
}

/* ---------- responsive ---------- */
@media (max-width: 991.98px) {
    .os-grid {
        grid-template-columns: 1fr;
    }

    .os-help-panel {
        flex-direction: column;
        align-items: flex-start;
        text-align: left;
    }
}

@media (max-width: 575.98px) {
    .os-index {
        font-size: 46px;
    }

    .os-help-actions {
        width: 100%;
    }
}

/* the tone bar and blooms are decoration; hold them still on request */
@media (prefers-reduced-motion: reduce) {

    .os-card,
    .os-card::before,
    .os-card::after,
    .os-icon,
    .os-index,
    .os-cta,
    .os-cta i,
    .os-cta span::after {
        transition: none;
    }

    .os-card:hover,
    .os-card:focus-within {
        transform: none;
    }
}

/* =====================================================
   HISTORY - past editions behind a rail of year tabs
   The rail is a Bootstrap tablist wearing its own clothes; the pane
   below is a book on the left, the record on the right.
   NB: the conference name needs the section prefix - plain .hs-name
   loses to .section h3 and would come back at 22px.
   ===================================================== */
.hs-section {
    position: relative;
    isolation: isolate;
    background: var(--surface-tint);
}

.hs-section::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background:
        radial-gradient(46% 36% at 6% 0%, rgba(54, 236, 222, .16), transparent 62%),
        radial-gradient(40% 34% at 98% 30%, rgba(1, 51, 90, .08), transparent 64%);
    pointer-events: none;
}

/* ---------- the year rail ---------- */
.hs-rail-wrap {
    position: relative;
    display: flex;
    justify-content: center;
    margin-top: clamp(30px, 3vw, 52px);
}

/* the bar hugs its five tabs and is centred by the wrapper, rather than
   stretching the full container width */
.hs-rail {
    display: flex;
    justify-content: flex-start;
    width: -moz-max-content;
    width: max-content;
    max-width: 100%;
    gap: clamp(8px, .9vw, 14px);
    padding: 10px;
    overflow-x: auto;
    scrollbar-width: none;
    border-radius: 999px;
    background: rgba(255, 255, 255, .7);
    border: 1px solid var(--border-line);
    box-shadow: 0 14px 36px rgba(0, 32, 63, .07);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
}

.hs-rail::-webkit-scrollbar {
    display: none;
}

.hs-year {
    position: relative;
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    padding: 12px clamp(18px, 2vw, 30px);
    border: none;
    border-radius: 999px;
    background: transparent;
    color: var(--navy);
    cursor: pointer;
    transition: background .35s ease, color .35s ease, transform .35s cubic-bezier(.22, .61, .36, 1);
}

.hs-year-num {
    font-family: var(--font-num);
    font-variant-numeric: tabular-nums;
    font-weight: 700;
    font-size: clamp(19px, 1.5vw, 24px);
    line-height: 1.1;
}

.hs-year-edition {
    font-family: var(--font-head);
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--text-muted);
    transition: color .35s ease;
}

.hs-year:hover {
    background: var(--surface-alt);
    transform: translateY(-2px);
}

.hs-year.active {
    background: var(--gradient);
    color: #fff;
    box-shadow: 0 16px 34px rgba(0, 32, 63, .24);
}

.hs-year.active .hs-year-edition {
    color: var(--mint);
}

.hs-year:focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: 3px;
}

/* ---------- the pane ---------- */
.hs-panes {
    margin-top: clamp(26px, 2.6vw, 44px);
}

.hs-card {
    display: grid;
    grid-template-columns: minmax(0, 300px) minmax(0, 1fr);
    gap: clamp(28px, 3.4vw, 60px);
    align-items: center;
    padding: clamp(26px, 3vw, 52px);
    border-radius: var(--radius);
    background: var(--surface);
    border: 1px solid var(--border-line);
    box-shadow: var(--shadow-soft);
}

/* ---------- the book ---------- */
.hs-book {
    position: relative;
    justify-self: center;
    width: 100%;
    max-width: 300px;
}

.hs-book-link {
    position: relative;
    display: block;
    border-radius: 6px 14px 14px 6px;
    overflow: hidden;
    /* a spine on the left and a page block on the right, so the flat
       cover image reads as an object standing on the shelf */
    box-shadow:
        inset 9px 0 12px -8px rgba(0, 0, 0, .55),
        inset -4px 0 6px -4px rgba(255, 255, 255, .5),
        0 26px 46px rgba(0, 32, 63, .26);
    transform: perspective(1200px) rotateY(-9deg);
    transform-origin: left center;
    transition: transform .55s cubic-bezier(.22, .61, .36, 1), box-shadow .55s ease;
}

.hs-book-link img {
    display: block;
    width: 100%;
    height: auto;
    /* every IFERP cover runs about 0.72 wide-to-tall, so 5:7 crops nothing */
    aspect-ratio: 5 / 7;
    object-fit: cover;
    background: var(--soft-gray);
}

.hs-book-link:hover {
    transform: perspective(1200px) rotateY(0deg) translateY(-6px);
    box-shadow:
        inset 9px 0 12px -8px rgba(0, 0, 0, .55),
        0 36px 62px rgba(0, 32, 63, .34);
}

/* navy veil carrying a mint chip, revealed on hover */
.hs-book-open {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 32, 63, .55);
    opacity: 0;
    transition: opacity .4s ease;
}

.hs-book-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 22px;
    border-radius: 999px;
    font-family: var(--font-btn);
    font-weight: 600;
    font-size: 14px;
    color: var(--navy);
    background: var(--mint);
    box-shadow: 0 16px 34px rgba(0, 8, 20, .35);
    transform: translateY(8px);
    transition: transform .45s cubic-bezier(.22, .61, .36, 1);
}

.hs-book-chip i {
    font-size: 13px;
}

.hs-book-link:hover .hs-book-open,
.hs-book-link:focus-visible .hs-book-open {
    opacity: 1;
}

.hs-book-link:hover .hs-book-chip,
.hs-book-link:focus-visible .hs-book-chip {
    transform: translateY(0);
}

/* the shelf the book stands on */
.hs-book-shelf {
    display: block;
    height: 14px;
    margin: 14px auto 0;
    width: 88%;
    border-radius: 50%;
    background: radial-gradient(ellipse at center, rgba(0, 32, 63, .22), transparent 70%);
}

/* ---------- the record ---------- */
.hs-tag {
    display: inline-flex;
    align-items: center;
    margin-bottom: 14px;
    padding: 6px 14px;
    border-radius: 999px;
    font-family: var(--font-head);
    font-size: 12.5px;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--navy-2);
    background: rgba(54, 236, 222, .16);
    border: 1px solid rgba(54, 236, 222, .4);
}

.hs-section .hs-name {
    margin: 0 0 clamp(16px, 1.6vw, 22px);
    font-size: clamp(21px, 2vw, 31px);
    line-height: 1.28;
    color: var(--color-ink);
}

.hs-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 26px;
    margin: 0 0 clamp(22px, 2.2vw, 32px);
    padding: 0;
}

.hs-meta li {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-size: 15px;
    color: var(--color-body);
}

.hs-meta i {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    flex-shrink: 0;
    border-radius: 50%;
    font-size: 14px;
    color: var(--navy);
    background: rgba(54, 236, 222, .18);
}

.hs-meta sup {
    font-size: .62em;
}

/* ---------- actions ---------- */
.hs-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.hs-section .hs-pending {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 18px 0 0;
    font-size: 14px;
    color: var(--text-muted);
}

.hs-section .hs-pending i {
    color: var(--warning);
}

.hs-source {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: clamp(18px, 1.8vw, 26px);
    font-family: var(--font-head);
    font-size: 14px;
    font-weight: 600;
    color: var(--navy-2);
    text-decoration: none;
    border-bottom: 1px solid transparent;
    transition: color .3s ease, border-color .3s ease, gap .35s ease;
}

.hs-source:hover {
    color: var(--navy);
    border-color: var(--mint);
    gap: 12px;
}

.hs-source i {
    font-size: 12px;
}

/* ---------- responsive ---------- */
@media (max-width: 991.98px) {
    .hs-rail {
        justify-content: flex-start;
        border-radius: 22px;
    }

    .hs-card {
        grid-template-columns: 1fr;
        gap: clamp(24px, 4vw, 38px);
        text-align: left;
    }

    .hs-book {
        max-width: 230px;
    }

    .hs-book-link {
        transform: none;
    }

    .hs-book-link:hover {
        transform: translateY(-6px);
    }
}

@media (max-width: 575.98px) {
    .hs-meta {
        flex-direction: column;
        gap: 12px;
    }

    .hs-actions .icset-btn {
        width: 100%;
    }
}

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

    .hs-year,
    .hs-book-link,
    .hs-book-open,
    .hs-source {
        transition: none;
    }

    .hs-year:hover,
    .hs-book-link:hover {
        transform: none;
    }
}

/* the feature bento is a compact band - it sits between two full-height
   sections, so it takes about two thirds of the standard section padding */
#key-features {
    padding: clamp(44px, 4.6vw, 78px) 0;
}

/* =====================================================
   REGISTRATION FLOW - the inlined four-step graphic
   The SVG file already carries .animated-icon on its four badges and
   .animated-txt on its four "Step N" labels; the titles and the dashed
   rule are picked out by id. Everything hangs off .is-playing on the
   root, so icset.js replays the whole sequence with one class toggle
   instead of touching every node.
   NB: SVG children need transform-box: fill-box, or transform-origin
   resolves against the whole canvas and the pop flies off sideways.
   ===================================================== */
.cr-flow-img .animated-icon,
.cr-flow-img .animated-txt,
.cr-flow-img [id="Select the Preferable admittance category"],
.cr-flow-img [id="Fill out the Form"],
.cr-flow-img [id="Proceed to Checkout"],
.cr-flow-img [id="Get Official Conference Invitation Letter"] {
    transform-box: fill-box;
    transform-origin: center;
}

/* the badges: pop in, then catch a mint glow as the wave passes */
.cr-flow-img.is-playing .animated-icon {
    animation:
        cr-flow-pop 1.05s cubic-bezier(.22, .9, .3, 1.15) both,
        cr-flow-glow 1.4s ease-in-out both;
}

.cr-flow-img.is-playing #select-cat {
    animation-delay: 0s, 1.3s;
}

.cr-flow-img.is-playing #fill-form {
    animation-delay: .18s, 1.48s;
}

.cr-flow-img.is-playing #check-out {
    animation-delay: .36s, 1.66s;
}

.cr-flow-img.is-playing #payment {
    animation-delay: .54s, 1.84s;
}

/* the "Step N" labels ride in just behind their badge */
.cr-flow-img.is-playing .animated-txt {
    animation: cr-flow-rise .7s cubic-bezier(.22, .61, .36, 1) both;
}

.cr-flow-img.is-playing [id="Step-1"] {
    animation-delay: .30s;
}

.cr-flow-img.is-playing [id="Step-2"] {
    animation-delay: .48s;
}

.cr-flow-img.is-playing [id="Step-3"] {
    animation-delay: .66s;
}

.cr-flow-img.is-playing [id="Step-4"] {
    animation-delay: .84s;
}

/* then the wording underneath fades up last */
.cr-flow-img.is-playing [id="Select the Preferable admittance category"],
.cr-flow-img.is-playing [id="Fill out the Form"],
.cr-flow-img.is-playing [id="Proceed to Checkout"],
.cr-flow-img.is-playing [id="Get Official Conference Invitation Letter"] {
    animation: cr-flow-rise .75s cubic-bezier(.22, .61, .36, 1) both;
}

.cr-flow-img.is-playing [id="Select the Preferable admittance category"] {
    animation-delay: .55s;
}

.cr-flow-img.is-playing [id="Fill out the Form"] {
    animation-delay: .73s;
}

.cr-flow-img.is-playing [id="Proceed to Checkout"] {
    animation-delay: .91s;
}

.cr-flow-img.is-playing [id="Get Official Conference Invitation Letter"] {
    animation-delay: 1.09s;
}

/* the dashed rule between the badges: marching ants, always running, and
   it turns mint so the eye has something to follow left to right */
.cr-flow-img [id="line-1"] {
    stroke: var(--mint-hover);
    animation: cr-flow-march 1.1s linear infinite;
}

/* pointer reward: lift whichever step you are reading */
.cr-flow-img .animated-icon {
    transition: transform .4s cubic-bezier(.22, .61, .36, 1);
}

.cr-flow-img .animated-icon:hover {
    transform: scale(1.07);
}

@keyframes cr-flow-pop {
    0% {
        opacity: 0;
        transform: scale(.5) translateY(16px);
    }

    62% {
        opacity: 1;
        transform: scale(1.09) translateY(0);
    }

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

@keyframes cr-flow-rise {
    from {
        opacity: 0;
        transform: translateY(12px);
    }

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

/* one pass of light per badge - the filter is cheap enough at four nodes */
@keyframes cr-flow-glow {

    0%,
    100% {
        filter: none;
    }

    50% {
        filter: drop-shadow(0 0 12px rgba(54, 236, 222, .85));
    }
}

@keyframes cr-flow-march {
    to {
        stroke-dashoffset: -16;
    }
}

/* nothing moves on request: the graphic simply sits there, fully drawn */
@media (prefers-reduced-motion: reduce) {

    .cr-flow-img.is-playing .animated-icon,
    .cr-flow-img.is-playing .animated-txt,
    .cr-flow-img [id="line-1"],
    .cr-flow-img.is-playing [id="Select the Preferable admittance category"],
    .cr-flow-img.is-playing [id="Fill out the Form"],
    .cr-flow-img.is-playing [id="Proceed to Checkout"],
    .cr-flow-img.is-playing [id="Get Official Conference Invitation Letter"] {
        animation: none;
    }

    .cr-flow-img .animated-icon {
        transition: none;
    }

    .cr-flow-img .animated-icon:hover {
        transform: none;
    }
}

/* =====================================================
   IFERP SERVICES - four photo cards, wording on a sliding panel
   Each card carries its own --shot behind a navy wash. At rest you get
   the artwork and the name; on hover a panel slides up from the bottom
   with the description and the button. One transform, no JS.
   ===================================================== */
.svc-section {
    position: relative;
    isolation: isolate;
    background: linear-gradient(180deg, var(--surface-tint) 0%, #fff 62%, var(--surface-tint) 100%);
}

.svc-section::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background:
        radial-gradient(38% 40% at 6% 12%, rgba(54, 236, 222, .18), transparent 62%),
        radial-gradient(34% 38% at 96% 84%, rgba(1, 51, 90, .1), transparent 64%);
    pointer-events: none;
}

.svc-row {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: clamp(12px, 1.2vw, 20px);
    margin-top: clamp(30px, 3vw, 52px);
}

/* ---------- the card ---------- */
.svc-card {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-end;
    min-height: clamp(226px, 19.5vw, 262px);
    padding: clamp(20px, 2vw, 28px);
    border-radius: 22px;
    background: var(--navy);
    box-shadow: 0 18px 42px rgba(0, 32, 63, .18);
    transition: transform .45s cubic-bezier(.22, .61, .36, 1), box-shadow .45s ease;
}

/* The photo. It is an <img> rather than a background-image because a
   url() handed to the stylesheet through a custom property is resolved
   against assets/css/, where img/gallery/... does not exist. Every other
   photo on the site is either an <img> or written as ../../img/. */
.svc-photo {
    position: absolute;
    inset: 0;
    z-index: -2;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 1.1s cubic-bezier(.22, .61, .36, 1);
}

/* the navy wash that keeps white type legible over any photo */
.svc-card::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(180deg, rgba(0, 22, 44, .58) 0%, rgba(0, 22, 44, .74) 52%, rgba(0, 16, 32, .9) 100%);
    transition: opacity .45s ease;
    pointer-events: none;
}

.svc-card:hover,
.svc-card:focus-within {
    transform: translateY(-6px);
    box-shadow: 0 30px 64px rgba(0, 32, 63, .32);
}

.svc-card:hover .svc-photo,
.svc-card:focus-within .svc-photo {
    transform: scale(1.07);
}

/* ---------- resting face ---------- */
.svc-no {
    position: absolute;
    top: clamp(12px, 1.2vw, 18px);
    right: clamp(14px, 1.4vw, 22px);
    font-family: var(--font-num);
    font-variant-numeric: tabular-nums;
    font-weight: 700;
    font-size: clamp(26px, 2.6vw, 38px);
    line-height: 1;
    color: rgba(255, 255, 255, .22);
    pointer-events: none;
}

.svc-art {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: clamp(52px, 4.6vw, 62px);
    height: clamp(52px, 4.6vw, 62px);
    margin-bottom: auto;
    border-radius: 18px;
    background: rgba(255, 255, 255, .16);
    border: 1px solid rgba(255, 255, 255, .24);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    transition: transform .45s cubic-bezier(.22, .61, .36, 1), border-radius .45s ease;
}

.svc-art img {
    width: 66%;
    height: 66%;
    object-fit: contain;
}

.svc-card:hover .svc-art,
.svc-card:focus-within .svc-art {
    transform: translateY(-4px) rotate(-6deg);
    border-radius: 50%;
}

.svc-section .svc-title {
    position: relative;
    margin: 0;
    font-size: clamp(17px, 1.45vw, 21px);
    line-height: 1.25;
    color: #fff;
    text-shadow: 0 2px 12px rgba(0, 12, 26, .5);
}

/* ---------- the panel that slides up over the card ---------- */
.svc-slide {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 2;
    padding: clamp(20px, 2vw, 28px);
    background: linear-gradient(180deg, rgba(0, 32, 63, .9) 0%, rgba(0, 22, 44, .97) 100%);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    transform: translateY(101%);
    transition: transform .5s cubic-bezier(.22, .61, .36, 1);
}

.svc-card:hover .svc-slide,
.svc-card:focus-within .svc-slide {
    transform: translateY(0);
}

.svc-section .svc-slide-title {
    margin: 0 0 8px;
    font-size: clamp(16px, 1.35vw, 20px);
    line-height: 1.25;
    color: #fff;
}

.svc-section .svc-text {
    margin: 0 0 clamp(14px, 1.4vw, 18px);
    font-size: clamp(12.5px, .95vw, 13.5px);
    line-height: 1.65;
    color: rgba(255, 255, 255, .84);
}

.svc-cta {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    border-radius: 999px;
    background: var(--mint);
    color: var(--navy);
    font-family: var(--font-btn);
    font-weight: 600;
    font-size: 13.5px;
    line-height: 1;
    white-space: nowrap;
    text-decoration: none;
    box-shadow: 0 12px 26px rgba(54, 236, 222, .3);
    transition: background .3s ease, gap .35s ease;
}

.svc-cta i {
    font-size: 12px;
}

.svc-cta:hover,
.svc-cta:focus-visible {
    background: var(--mint-hover);
    color: var(--navy);
    gap: 12px;
}

/* the whole card is the hit area, so the ring belongs to the card */
.svc-cta.stretched-link:focus-visible {
    outline: none;
}

.svc-card:focus-within {
    outline: 3px solid rgba(54, 236, 222, .75);
    outline-offset: 3px;
}

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

/* A slide-up panel needs a pointer to trigger it. On touch there is none,
   so below the tablet break the panel simply sits open. */
@media (max-width: 767.98px) {
    .svc-slide {
        position: static;
        transform: none;
        margin: clamp(14px, 3vw, 18px) calc(clamp(20px, 2vw, 28px) * -1) calc(clamp(20px, 2vw, 28px) * -1);
        background: rgba(0, 22, 44, .5);
    }

    .svc-card {
        min-height: 0;
    }
}

@media (max-width: 575.98px) {
    .svc-row {
        grid-template-columns: minmax(0, 1fr);
    }
}

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

    .svc-card,
    .svc-photo,
    .svc-art,
    .svc-slide,
    .svc-cta {
        transition: none;
    }

    .svc-card:hover,
    .svc-card:focus-within {
        transform: none;
    }

    .svc-card:hover .svc-photo,
    .svc-card:focus-within .svc-photo,
    .svc-card:hover .svc-art,
    .svc-card:focus-within .svc-art {
        transform: none;
    }
}

/* =====================================================
   FAQ LINKS (home page)
   A navy panel split in two - the ask on the left, the three guides as
   full-width rows on the right. Deliberately not another centred header
   over a grid of cards; the page already has several of those.
   NB: .faq-page / .faq-no belong to the standalone FAQ pages and are a
   different component. Nothing here touches them.
   ===================================================== */
.faq-links {
    background: #fff;
}

.faq-panel {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: clamp(26px, 3vw, 56px);
    align-items: center;
    padding: clamp(28px, 3.2vw, 58px);
    border-radius: 28px;
    background: var(--gradient);
    box-shadow: var(--shadow-hard);
}

.faq-panel::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background:
        radial-gradient(46% 60% at 4% 0%, rgba(54, 236, 222, .26), transparent 62%),
        radial-gradient(40% 56% at 98% 100%, rgba(54, 236, 222, .14), transparent 64%);
    pointer-events: none;
}

/* the oversized question mark sitting behind the split */
.faq-mark {
    position: absolute;
    z-index: -1;
    right: 40%;
    top: 50%;
    transform: translate(50%, -52%);
    font-family: var(--font-head);
    font-weight: 700;
    font-size: clamp(240px, 30vw, 420px);
    line-height: 1;
    color: rgba(255, 255, 255, .05);
    pointer-events: none;
    user-select: none;
}

/* ---------- the ask ---------- */
.faq-head .eyebrow {
    color: var(--mint);
}

.faq-links .faq-head h2 {
    margin: 0 0 12px;
    font-size: clamp(23px, 2.2vw, 34px);
    line-height: 1.22;
    color: #fff;
}

.faq-links .faq-head p {
    margin: 0;
    font-size: clamp(14.5px, 1vw, 16px);
    line-height: 1.75;
    color: var(--text-subhead);
}

/* ---------- the three guides ---------- */
.faq-list {
    display: flex;
    flex-direction: column;
    gap: clamp(10px, 1vw, 14px);
}

.faq-row {
    display: flex;
    align-items: center;
    gap: clamp(14px, 1.3vw, 20px);
    padding: clamp(14px, 1.4vw, 20px) clamp(16px, 1.6vw, 24px);
    border-radius: 16px;
    background: rgba(255, 255, 255, .07);
    border: 1px solid rgba(255, 255, 255, .14);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    text-decoration: none;
    transition: background .35s ease, border-color .35s ease, transform .4s cubic-bezier(.22, .61, .36, 1);
}

.faq-row:hover,
.faq-row:focus-visible {
    transform: translateX(6px);
    background: rgba(255, 255, 255, .12);
    border-color: rgba(54, 236, 222, .5);
}

.faq-row:focus-visible {
    outline: 2px solid var(--mint);
    outline-offset: 3px;
}

.faq-row-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: clamp(40px, 3.4vw, 48px);
    height: clamp(40px, 3.4vw, 48px);
    border-radius: 13px;
    background: rgba(54, 236, 222, .16);
    border: 1px solid rgba(54, 236, 222, .34);
    color: var(--mint);
    font-size: clamp(16px, 1.35vw, 19px);
    transition: background .35s ease, color .35s ease;
}

.faq-row:hover .faq-row-icon,
.faq-row:focus-visible .faq-row-icon {
    background: var(--mint);
    color: var(--navy);
}

.faq-row-copy {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
    flex: 1;
}

.faq-row-title {
    font-family: var(--font-head);
    font-weight: 700;
    font-size: clamp(15px, 1.15vw, 17px);
    line-height: 1.25;
    color: #fff;
}

.faq-row-text {
    font-size: clamp(12.5px, .92vw, 13.5px);
    line-height: 1.55;
    color: rgba(255, 255, 255, .7);
}

.faq-row-go {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, .24);
    color: #fff;
    font-size: 13px;
    transition: background .35s ease, border-color .35s ease, color .35s ease, transform .4s cubic-bezier(.22, .61, .36, 1);
}

.faq-row:hover .faq-row-go,
.faq-row:focus-visible .faq-row-go {
    background: var(--mint);
    border-color: var(--mint);
    color: var(--navy);
    transform: translateX(3px);
}

/* ---------- responsive ---------- */
@media (max-width: 991.98px) {
    .faq-panel {
        grid-template-columns: minmax(0, 1fr);
        align-items: start;
    }

    .faq-mark {
        right: auto;
        left: 50%;
        top: 0;
        transform: translate(-50%, -18%);
        font-size: 260px;
    }
}

@media (max-width: 575.98px) {
    .faq-row {
        align-items: flex-start;
    }

    .faq-row-go {
        align-self: center;
    }
}

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

    .faq-row,
    .faq-row-icon,
    .faq-row-go {
        transition: none;
    }

    .faq-row:hover,
    .faq-row:focus-visible {
        transform: none;
    }

    .faq-row:hover .faq-row-go,
    .faq-row:focus-visible .faq-row-go {
        transform: none;
    }
}

/* =====================================================
   SESSION PHOTOS (scientific-tracks.php)
   Ten tiles on a four-across row. Flex rather than grid, because ten does
   not divide by four and flex is what lets the short last row sit centred
   instead of hanging off the left edge.
   ===================================================== */
.st-shots {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: clamp(12px, 1.2vw, 18px);
}

.st-shot {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    flex: 0 0 calc(25% - clamp(12px, 1.2vw, 18px) * 3 / 4);
    margin: 0;
    /* the session photos are all 600x350; matching the tile to them
       means object-fit: cover has nothing to crop */
    aspect-ratio: 600 / 350;
    border-radius: 18px;
    background: var(--gradient);
    box-shadow: 0 14px 32px rgba(0, 32, 63, .12);
    transition: transform .45s cubic-bezier(.22, .61, .36, 1), box-shadow .45s ease;
}

.st-shot img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 1.1s cubic-bezier(.22, .61, .36, 1), filter .45s ease;
}

/* the navy veil the caption rides in on, held back until hover */
.st-shot::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(180deg, rgba(0, 22, 44, 0) 34%, rgba(0, 22, 44, .72) 68%, rgba(0, 16, 32, .93) 100%);
    opacity: 0;
    transition: opacity .45s ease;
    pointer-events: none;
}

.st-shot:hover,
.st-shot:focus-within {
    transform: translateY(-6px);
    box-shadow: 0 26px 52px rgba(0, 32, 63, .24);
}

.st-shot:hover img,
.st-shot:focus-within img {
    transform: scale(1.09);
}

.st-shot:hover::after,
.st-shot:focus-within::after {
    opacity: 1;
}

/* ---------- the caption ---------- */
/* the whole tile is the hit area; the caption sits above it, so it has to
   let clicks through or the link would be dead where the words are */
.st-shot-link {
    position: absolute;
    inset: 0;
    z-index: 3;
}

.st-shot-cap {
    pointer-events: none;
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 2;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: clamp(12px, 1.2vw, 18px);
    opacity: 0;
    transform: translateY(14px);
    transition: opacity .4s ease, transform .45s cubic-bezier(.22, .61, .36, 1);
}

.st-shot:hover .st-shot-cap,
.st-shot:focus-within .st-shot-cap {
    opacity: 1;
    transform: translateY(0);
}

.st-shot-no {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    border-radius: 10px;
    background: var(--mint);
    color: var(--navy);
    font-family: var(--font-num);
    font-variant-numeric: tabular-nums;
    font-weight: 700;
    font-size: 13px;
}

.st-shot-name {
    font-family: var(--font-head);
    font-weight: 700;
    font-size: clamp(12.5px, .95vw, 14px);
    line-height: 1.3;
    color: #fff;
    text-shadow: 0 2px 10px rgba(0, 12, 26, .6);
}

/* ---------- responsive ----------
   The gap subtraction has to follow the column count, or the tiles stop
   filling the row. */
@media (max-width: 991.98px) {
    .st-shot {
        flex-basis: calc(50% - clamp(12px, 1.2vw, 18px) / 2);
    }
}

/* no hover on touch, so the caption simply stays up */
@media (hover: none) {
    .st-shot::after,
    .st-shot-cap {
        opacity: 1;
    }

    .st-shot-cap {
        transform: none;
    }
}

@media (max-width: 479.98px) {
    .st-shot {
        flex-basis: 100%;
    }
}

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

    .st-shot,
    .st-shot img,
    .st-shot::after,
    .st-shot-cap {
        transition: none;
    }

    .st-shot:hover,
    .st-shot:focus-within {
        transform: none;
    }

    .st-shot:hover img,
    .st-shot:focus-within img {
        transform: none;
    }
}

/* =====================================================
   SESSION PAGE (session-1.php ... session-10.php)
   One centred reading column. The lead is centred, everything under it
   is left aligned - centred body copy stops being readable past a couple
   of lines, and these sessions run longer than that.
   NB: headings need the section prefix - plain .ss-h loses to .section h2.
   ===================================================== */
.ss-section {
    position: relative;
    isolation: isolate;
    background: var(--surface-tint);
}

.ss-section::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: url("../../img/pattern/p-lattice.svg") repeat 0 0 / 64px 64px;
    -webkit-mask-image: radial-gradient(ellipse 76% 68% at 50% 36%, #000 34%, transparent 100%);
    mask-image: radial-gradient(ellipse 76% 68% at 50% 36%, #000 34%, transparent 100%);
}

/* two mint blooms, so the card is not floating on flat tint */
.ss-section::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background:
        radial-gradient(34% 30% at 6% 6%, rgba(54, 236, 222, .22), transparent 64%),
        radial-gradient(30% 28% at 96% 88%, rgba(1, 51, 90, .1), transparent 64%);
    pointer-events: none;
}

.ss-wrap {
    max-width: 900px;
    margin: 0 auto;
}

.ss-body {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    padding: clamp(28px, 3.4vw, 60px) clamp(22px, 3vw, 56px) clamp(28px, 3vw, 50px);
    border-radius: 26px;
    background: #fff;
    border: 1px solid var(--border-line);
    box-shadow: 0 26px 60px rgba(0, 32, 63, .1);
}

/* mint hairline across the top edge of the card */
.ss-body::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, var(--mint) 0%, var(--navy-2) 68%, transparent 100%);
}

/* ---------- the lead ---------- */
.ss-lead {
    text-align: center;
    max-width: 62ch;
    margin: 0 auto clamp(28px, 3vw, 44px);
    padding-bottom: clamp(24px, 2.6vw, 38px);
    border-bottom: 1px solid var(--border-line);
}

.ss-badge {
    display: inline-flex;
    align-items: center;
    margin-bottom: 14px;
    padding: 7px 18px;
    border-radius: 999px;
    background: rgba(54, 236, 222, .16);
    border: 1px solid rgba(54, 236, 222, .4);
    color: var(--navy-2);
    font-family: var(--font-num);
    font-variant-numeric: tabular-nums;
    font-weight: 700;
    font-size: 12px;
    letter-spacing: .14em;
    text-transform: uppercase;
}

.ss-section .ss-h {
    margin: 0 0 12px;
    font-size: clamp(17px, 1.4vw, 21px);
    line-height: 1.3;
    color: var(--navy);
}

/* the two headings that sit on the centre line */
.ss-section .ss-h--lead,
.ss-section .ss-h--centred {
    text-align: center;
}

.ss-section .ss-h--lead {
    font-size: clamp(19px, 1.7vw, 25px);
}

.ss-section .ss-lead-text {
    margin: 0;
    font-size: clamp(15px, 1.1vw, 17.5px);
    line-height: 1.85;
    color: var(--color-body);
}

/* ---------- the blocks ---------- */
.ss-block + .ss-block,
.ss-panels + .ss-block {
    margin-top: clamp(24px, 2.4vw, 36px);
}

/* a mint tick before every block heading, so the page has a rhythm the
   eye can follow without another box around each section */
.ss-section .ss-block > .ss-h:not(.ss-h--centred) {
    position: relative;
    padding-left: 16px;
}

.ss-section .ss-block > .ss-h:not(.ss-h--centred)::before {
    content: "";
    position: absolute;
    left: 0;
    top: .18em;
    bottom: .18em;
    width: 4px;
    border-radius: 2px;
    background: linear-gradient(180deg, var(--mint) 0%, var(--navy-2) 100%);
}

.ss-section .ss-text {
    margin: 0;
    font-size: clamp(14.5px, 1.02vw, 16px);
    line-height: 1.85;
    color: var(--color-body);
}

/* ---------- core objectives: two numbered cards per row ---------- */
.ss-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(10px, 1vw, 14px);
    margin: 0;
    padding: 0;
}

.ss-list li {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: clamp(13px, 1.3vw, 17px) clamp(14px, 1.4vw, 18px);
    border-radius: 14px;
    background: var(--surface-tint);
    border: 1px solid var(--border-line);
    font-size: clamp(13.5px, 1vw, 15px);
    line-height: 1.65;
    color: var(--color-body);
    transition: transform .35s cubic-bezier(.22, .61, .36, 1), border-color .35s ease, box-shadow .35s ease;
}

.ss-list li:hover {
    transform: translateY(-3px);
    border-color: var(--mint);
    box-shadow: 0 14px 28px rgba(0, 32, 63, .09);
}

.ss-list-no {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    border-radius: 9px;
    background: linear-gradient(145deg, var(--mint) 0%, var(--mint-hover) 100%);
    color: var(--navy);
    font-family: var(--font-num);
    font-variant-numeric: tabular-nums;
    font-weight: 700;
    font-size: 12px;
}

/* ---------- focus areas / expected outcomes ---------- */
.ss-panels {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(12px, 1.2vw, 18px);
    margin-top: clamp(24px, 2.4vw, 36px);
}

.ss-panel {
    position: relative;
    overflow: hidden;
    padding: clamp(18px, 1.8vw, 24px);
    border-radius: 18px;
    background: linear-gradient(160deg, rgba(54, 236, 222, .1) 0%, var(--surface-tint) 62%);
    border: 1px solid var(--border-line);
}

.ss-panel--out {
    background: linear-gradient(160deg, rgba(46, 204, 113, .12) 0%, var(--surface-tint) 62%);
}

.ss-panel-label {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
    font-family: var(--font-head);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--navy-2);
}

.ss-panel-label i {
    font-size: 15px;
    color: var(--mint-hover);
}

.ss-panel--out .ss-panel-label i {
    color: var(--success);
}

.ss-section .ss-panel-text {
    margin: 0;
    font-size: clamp(13.5px, .98vw, 15px);
    line-height: 1.7;
    color: var(--color-body);
}

/* ---------- the SDG tiles, at the 60px the artwork is drawn for ---------- */
.ss-goals-block {
    padding-top: clamp(22px, 2.2vw, 32px);
    border-top: 1px solid var(--border-line);
}

.ss-goals {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: clamp(10px, 1vw, 14px);
    margin: 0;
    padding: 0;
}

.ss-goal {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 18px 8px 8px;
    border-radius: 16px;
    background: color-mix(in srgb, var(--tone) 8%, #fff);
    border: 1px solid color-mix(in srgb, var(--tone) 30%, var(--border-line));
    transition: transform .35s cubic-bezier(.22, .61, .36, 1), box-shadow .35s ease;
}

.ss-goal:hover {
    transform: translateY(-3px);
    box-shadow: 0 14px 28px color-mix(in srgb, var(--tone) 26%, transparent);
}

.ss-goal img {
    display: block;
    width: 60px;
    height: 60px;
    flex-shrink: 0;
    border-radius: 12px;
    object-fit: cover;
}

.ss-goal-copy {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.ss-goal-no {
    font-family: var(--font-num);
    font-variant-numeric: tabular-nums;
    font-weight: 700;
    font-size: 13px;
    color: var(--tone);
}

.ss-goal-name {
    font-family: var(--font-head);
    font-weight: 600;
    font-size: 13.5px;
    line-height: 1.3;
    color: var(--navy);
}

.ss-cta {
    margin-top: clamp(26px, 2.6vw, 40px);
}

/* ---------- previous / next ---------- */
.ss-pager {
    display: flex;
    justify-content: space-between;
    gap: clamp(12px, 1.2vw, 20px);
    max-width: 900px;
    margin: clamp(24px, 2.6vw, 40px) auto 0;
}

.ss-pager-link {
    display: flex;
    align-items: center;
    gap: 12px;
    max-width: 46%;
    padding: 14px 20px;
    border-radius: 16px;
    background: #fff;
    border: 1px solid var(--border-line);
    text-decoration: none;
    transition: transform .35s cubic-bezier(.22, .61, .36, 1), border-color .35s ease, box-shadow .35s ease;
}

.ss-pager-link:hover {
    transform: translateY(-3px);
    border-color: var(--mint);
    box-shadow: 0 16px 32px rgba(0, 32, 63, .1);
}

.ss-pager-link--next {
    margin-left: auto;
    text-align: right;
}

.ss-pager-link i {
    flex-shrink: 0;
    font-size: 15px;
    color: var(--mint-hover);
}

.ss-pager-link span {
    display: block;
    min-width: 0;
}

.ss-pager-label {
    font-family: var(--font-num);
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--text-muted);
}

.ss-pager-name {
    font-family: var(--font-head);
    font-weight: 700;
    font-size: clamp(13px, 1vw, 15px);
    line-height: 1.3;
    color: var(--navy);
}

/* ---------- responsive ---------- */
@media (max-width: 767.98px) {
    .ss-list,
    .ss-panels {
        grid-template-columns: minmax(0, 1fr);
    }
}

@media (max-width: 575.98px) {
    .ss-pager {
        flex-direction: column;
    }

    .ss-pager-link,
    .ss-pager-link--next {
        max-width: none;
        margin-left: 0;
        text-align: left;
    }

    .ss-pager-link--next {
        flex-direction: row-reverse;
        justify-content: flex-end;
    }
}

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

    .ss-list li,
    .ss-goal,
    .ss-pager-link {
        transition: none;
    }

    .ss-list li:hover,
    .ss-goal:hover,
    .ss-pager-link:hover {
        transform: none;
    }
}

/* ---------- SDG chips in the page head (session pages) ----------
   Small, straight under the session name. The band is a photo under a
   navy scrim, so each thumbnail carries its own light ring to stay
   readable wherever the skyline behind it happens to be bright. */
.ph-goals {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    margin: 18px 0 0;
    padding: 0;
}

.ph-goals li {
    display: inline-flex;
}

.ph-goals img {
    display: block;
    width: 38px;
    height: 38px;
    border-radius: 9px;
    object-fit: cover;
    background: rgba(255, 255, 255, .12);
    box-shadow: 0 0 0 1px rgba(255, 255, 255, .35), 0 8px 18px rgba(0, 12, 26, .35);
    transition: transform .35s cubic-bezier(.22, .61, .36, 1), box-shadow .35s ease;
}

.ph-goals img:hover {
    transform: translateY(-3px);
    box-shadow: 0 0 0 1px var(--mint), 0 12px 24px rgba(0, 12, 26, .45);
}

@media (max-width: 575.98px) {
    .ph-goals img {
        width: 34px;
        height: 34px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .ph-goals img {
        transition: none;
    }

    .ph-goals img:hover {
        transform: none;
    }
}

/* ---------- footer fraud alert ----------
   Amber, not mint: this is a warning, and the design system keeps semantic
   colour separate from the brand accent. Sits on the footer's graphite
   ground, so it carries its own tinted panel rather than borrowing one. */
.footer-alert {
    display: flex;
    align-items: flex-start;
    gap: clamp(12px, 1.3vw, 18px);
    margin-top: clamp(28px, 3vw, 44px);
    padding: clamp(16px, 1.8vw, 24px) clamp(16px, 2vw, 26px);
    border-radius: 16px;
    background: rgba(244, 180, 0, .09);
    border: 1px solid rgba(244, 180, 0, .32);
    border-left: 4px solid var(--warning);
}

.footer-alert-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    border-radius: 12px;
    background: rgba(244, 180, 0, .16);
    color: var(--warning);
    font-size: 20px;
}

.footer-alert-title {
    display: block;
    margin-bottom: 5px;
    font-family: var(--font-head);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--warning);
}

.site-footer .footer-alert-text {
    margin: 0;
    max-width: 108ch;
    font-size: clamp(13.5px, 1vw, 14.5px);
    line-height: 1.75;
    color: rgba(255, 255, 255, .82);
}

.site-footer .footer-alert-text a {
    color: var(--warning);
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 3px;
}

.site-footer .footer-alert-text a:hover {
    color: #fff;
}

@media (max-width: 575.98px) {
    .footer-alert {
        flex-direction: column;
        gap: 12px;
    }
}

/* ---------- utility ribbon above the nav ----------
   Folds to nothing on scroll, so .icset-header.scrolled is the same height
   it always was and section scroll-margin-top: 110px still lands right.
   The height it adds at rest is published as --ribbon-gap, and the two
   page-top paddings add it back rather than each guessing a number. */
:root {
    /* 10 + 12 padding + a 33px bar, less the 20px of header padding the
       ribbon replaced */
    --ribbon-gap: 36px;
}

.icset-ribbon {
    /* the wrapper only folds - the surface belongs to the bar inside, so
       the ribbon lines up with the nav pill instead of bleeding edge to
       edge behind it */
    overflow: hidden;
    max-height: 110px;
    opacity: 1;
    padding: 10px 0 12px;
    transition: max-height .35s ease, opacity .3s ease, padding .35s ease;
}

.icset-header.scrolled .icset-ribbon {
    max-height: 0;
    opacity: 0;
    padding-top: 0;
    padding-bottom: 0;
}

/* sits in the same container as .icset-navbar, so it is exactly the
   width of the menu; the pill radius matches it too */
.icset-ribbon-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px 24px;
    padding: 7px 22px;
    border-radius: 999px;
    background: rgba(0, 22, 44, .86);
    border: 1px solid rgba(54, 236, 222, .18);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    box-shadow: 0 10px 26px rgba(0, 32, 63, .2);
}

.ribbon-facts,
.ribbon-social {
    display: flex;
    align-items: center;
    gap: 8px 22px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.ribbon-facts li {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 13.5px;
    line-height: 1.4;
    color: var(--text-subhead);
}

.ribbon-facts i {
    font-size: 12.5px;
    color: var(--mint);
}

.ribbon-facts a {
    color: var(--text-subhead);
    text-decoration: none;
    transition: color .3s ease;
}

.ribbon-facts a:hover {
    color: var(--mint);
}

/* ---------- the icons, right corner ---------- */
.ribbon-social {
    gap: 6px;
    flex-shrink: 0;
}

.ribbon-social a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    color: var(--text-subhead);
    font-size: 13px;
    border: 1px solid rgba(255, 255, 255, .16);
    transition: background .3s ease, color .3s ease, border-color .3s ease, transform .3s ease;
}

.ribbon-social a:hover,
.ribbon-social a:focus-visible {
    background: var(--mint);
    border-color: var(--mint);
    color: var(--navy);
    transform: translateY(-2px);
}

/* the ribbon only exists at the top of the page, so the two things that
   sit directly under the header get its height back */
.ul-banner {
    padding-top: calc(clamp(120px, 10.51vw, 200px) + var(--ribbon-gap));
}

.page-head {
    padding-top: calc(clamp(130px, 12vw, 190px) + var(--ribbon-gap));
}

@media (max-width: 767.98px) {
    .icset-ribbon-bar {
        justify-content: center;
        flex-wrap: wrap;
        gap: 6px 16px;
        padding: 8px 18px;
        border-radius: 22px;
    }

    .ribbon-facts {
        justify-content: center;
        flex-wrap: wrap;
        gap: 4px 16px;
    }

    .ribbon-facts li {
        font-size: 12.5px;
    }

    .icset-ribbon {
        max-height: 160px;
    }

    :root {
        --ribbon-gap: 62px;
    }
}

@media (max-width: 479.98px) {
    /* four icons and three facts will not both fit; the icons repeat in
       the footer, the phone and email do not */
    .ribbon-social {
        display: none;
    }

    :root {
        --ribbon-gap: 44px;
    }
}

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

    .icset-ribbon,
    .ribbon-facts a,
    .ribbon-social a {
        transition: none;
    }

    .ribbon-social a:hover,
    .ribbon-social a:focus-visible {
        transform: none;
    }
}

/* =====================================================
   RESEARCH JOURNEY (index.php, journals-and-publication.php)
   Nodes on a dashed path, not a grid of boxes. Each step is a circular
   badge carrying its number as a chip, with the wording centred beneath -
   so the row reads as one route rather than six separate cards.
   Numbering is kept because the content really is a sequence.
   NB: headings need the section prefix; plain .rj-title loses to .section h4.
   ===================================================== */
.rj-quote {
    max-width: 74ch;
    margin: 0 auto clamp(36px, 4vw, 60px);
    padding: clamp(18px, 2vw, 28px) clamp(22px, 2.6vw, 38px) clamp(18px, 2vw, 28px) clamp(44px, 4vw, 62px);
    border-radius: 18px;
    background: linear-gradient(150deg, rgba(54, 236, 222, .14) 0%, rgba(54, 236, 222, .05) 100%);
    border: 1px solid rgba(54, 236, 222, .28);
    position: relative;
}

.rj-quote::before {
    content: "\201C";
    position: absolute;
    top: clamp(2px, .6vw, 10px);
    left: clamp(16px, 1.6vw, 24px);
    font-family: var(--font-head);
    font-weight: 700;
    font-size: clamp(46px, 4.4vw, 66px);
    line-height: 1;
    color: var(--mint-hover);
    opacity: .75;
    pointer-events: none;
}

.proceedings-section .rj-quote blockquote,
.gl-block .rj-quote blockquote {
    margin: 0;
    font-size: clamp(14.5px, 1.1vw, 16.5px);
    line-height: 1.85;
    color: var(--color-body);
}

/* ---------- the route ---------- */
.rj-flow {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(34px, 4vw, 58px) clamp(16px, 2vw, 30px);
    margin: 0;
    padding: 0;
}

.rj-step {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 0 clamp(4px, 1vw, 14px);
}

/* the dashed run to the next node, level with the badge centre */
.rj-step:not(:nth-child(3n))::after {
    content: "";
    position: absolute;
    top: clamp(34px, 3.2vw, 42px);
    left: calc(50% + clamp(40px, 3.8vw, 50px));
    right: calc(-50% + clamp(40px, 3.8vw, 50px));
    border-top: 2px dashed color-mix(in srgb, var(--mint) 60%, var(--border-line));
    pointer-events: none;
}

/* ---------- the node ---------- */
.rj-head {
    position: relative;
    margin-bottom: clamp(16px, 1.7vw, 24px);
}

.rj-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: clamp(68px, 6.4vw, 84px);
    height: clamp(68px, 6.4vw, 84px);
    border-radius: 50%;
    background: rgba(54, 236, 222, .16);
    border: 1px solid rgba(54, 236, 222, .34);
    color: var(--navy);
    font-size: clamp(24px, 2.2vw, 30px);
    transition: background .4s ease, color .4s ease, border-color .4s ease, transform .4s cubic-bezier(.22, .61, .36, 1), box-shadow .4s ease;
}

/* the number rides the badge, the way a step marker does on a map */
.rj-no {
    position: absolute;
    top: -4px;
    right: -6px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--surface);
    border: 1.5px solid rgba(54, 236, 222, .5);
    color: var(--navy-2);
    font-family: var(--font-num);
    font-variant-numeric: tabular-nums;
    font-weight: 700;
    font-size: 11.5px;
    transition: background .4s ease, color .4s ease, border-color .4s ease;
}

.rj-step:hover .rj-icon,
.rj-step:focus-within .rj-icon {
    background: var(--gradient);
    border-color: transparent;
    color: var(--mint);
    transform: translateY(-4px);
    box-shadow: 0 18px 34px rgba(0, 32, 63, .26);
}

.rj-step:hover .rj-no,
.rj-step:focus-within .rj-no {
    background: var(--mint);
    border-color: var(--mint);
    color: var(--navy);
}

/* ---------- wording ---------- */
.proceedings-section .rj-title,
.gl-block .rj-title {
    margin: 0 0 8px;
    font-family: var(--font-head);
    font-weight: 700;
    font-size: clamp(15px, 1.2vw, 17.5px);
    line-height: 1.3;
    color: var(--navy);
    transition: color .35s ease;
}

.rj-step:hover .rj-title,
.rj-step:focus-within .rj-title {
    color: var(--mint-hover);
}

.proceedings-section .rj-text,
.gl-block .rj-text {
    margin: 0;
    max-width: 34ch;
    font-size: clamp(13px, .97vw, 14.5px);
    line-height: 1.75;
    color: var(--text-muted);
}

/* ---------- responsive ----------
   The run has to follow the column count, or it points into a row break. */
@media (max-width: 991.98px) {
    .rj-flow {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .rj-step:not(:nth-child(3n))::after {
        display: none;
    }

    .rj-step:not(:nth-child(2n))::after {
        content: "";
        display: block;
        position: absolute;
        top: clamp(34px, 3.2vw, 42px);
        left: calc(50% + clamp(40px, 3.8vw, 50px));
        right: calc(-50% + clamp(40px, 3.8vw, 50px));
        border-top: 2px dashed color-mix(in srgb, var(--mint) 60%, var(--border-line));
    }
}

@media (max-width: 575.98px) {
    .rj-flow {
        grid-template-columns: minmax(0, 1fr);
        gap: clamp(26px, 6vw, 34px);
    }

    /* stacked, so the run stands upright between the badges */
    .rj-step:not(:nth-child(2n))::after,
    .rj-step:not(:last-child)::after {
        content: "";
        display: block;
        position: absolute;
        top: calc(clamp(68px, 6.4vw, 84px) + 6px);
        left: 50%;
        right: auto;
        width: 0;
        height: calc(100% - clamp(68px, 6.4vw, 84px) + clamp(26px, 6vw, 34px) - 12px);
        border-top: 0;
        border-left: 2px dashed color-mix(in srgb, var(--mint) 60%, var(--border-line));
    }

    .rj-step:last-child::after {
        display: none;
    }
}

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

    .rj-icon,
    .rj-no,
    .rj-title {
        transition: none;
    }

    .rj-step:hover .rj-icon,
    .rj-step:focus-within .rj-icon {
        transform: none;
    }
}

/* ---------- collage on smaller screens ----------
   Three columns of photographs stop being readable on a phone; two cells
   per row keeps every piece big enough to see. */
@media (max-width: 575.98px) {
    .aw-collage {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        /* three rows here, not two, so the cells size themselves and the
           desktop height stops applying */
        grid-template-rows: auto auto auto;
        min-height: 0;
    }

    .aw-shot--main {
        grid-column: 1 / span 2;
        aspect-ratio: 4 / 3;
    }

    .aw-shot--side {
        grid-column: 1;
        grid-row: 2;
        aspect-ratio: 3 / 4;
    }

    .aw-stats {
        grid-column: 2;
        grid-row: 2;
    }

    .aw-shot--float {
        grid-column: 1 / span 2;
        grid-row: 3;
        aspect-ratio: 16 / 9;
    }

    .aw-path {
        display: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .aw-path {
        animation: none;
    }
}

/* =====================================================
   DESKTOP DROPDOWNS
   Icon tiles, a caret pointing at the parent item, and a mint sweep on
   hover. Everything here is inside min-width: 992px on purpose - below
   that the same markup moves into .icset-offcanvas, which keeps the
   plain drawer styling it already had.
   ===================================================== */
@media (min-width: 992px) {

    .icset-navbar .dropdown-menu {
        padding: 12px;
        margin-top: 14px;
        min-width: 286px;
        max-width: 340px;
        border: 1px solid rgba(0, 32, 63, .07);
        border-radius: 20px;
        background: var(--surface);
        box-shadow:
            0 2px 6px rgba(0, 32, 63, .06),
            0 30px 64px rgba(0, 32, 63, .22);
    }

    /* the caret that ties the panel to the item that opened it */
    .icset-navbar .dropdown-menu::after {
        content: "";
        position: absolute;
        top: -7px;
        left: 30px;
        width: 14px;
        height: 14px;
        background: var(--surface);
        border-left: 1px solid rgba(0, 32, 63, .07);
        border-top: 1px solid rgba(0, 32, 63, .07);
        transform: rotate(45deg);
        border-radius: 3px 0 0 0;
    }

    /* the last menu is right-aligned, so its caret follows */
    .icset-navbar .nav-item.dropdown:last-child .dropdown-menu::after {
        left: auto;
        right: 30px;
    }

    .icset-navbar .dropdown-item {
        display: flex;
        align-items: center;
        gap: 12px;
        padding: 9px 12px;
        border-radius: 13px;
        font-size: 14.5px;
        font-weight: 600;
        line-height: 1.4;
        color: var(--color-ink);
        transition: background .28s ease, color .28s ease, transform .3s cubic-bezier(.22, .61, .36, 1);
    }

    .icset-navbar .dropdown-item + .dropdown-item {
        margin-top: 2px;
    }

    /* ---------- the icon tile ---------- */
    .dd-ico {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        flex: none;
        width: 34px;
        height: 34px;
        border-radius: 10px;
        background: rgba(54, 236, 222, .14);
        border: 1px solid rgba(54, 236, 222, .26);
        color: var(--navy-2);
        font-size: 15px;
        transition: background .28s ease, color .28s ease, border-color .28s ease, transform .3s cubic-bezier(.22, .61, .36, 1);
    }

    .icset-navbar .dropdown-item:hover,
    .icset-navbar .dropdown-item:focus,
    .icset-navbar .dropdown-item:focus-visible,
    .icset-navbar .dropdown-item.active {
        background: rgba(54, 236, 222, .13);
        color: var(--navy);
        transform: translateX(3px);
    }

    .icset-navbar .dropdown-item:hover .dd-ico,
    .icset-navbar .dropdown-item:focus .dd-ico,
    .icset-navbar .dropdown-item:focus-visible .dd-ico,
    .icset-navbar .dropdown-item.active .dd-ico {
        background: var(--gradient);
        border-color: transparent;
        color: var(--mint);
        transform: rotate(-6deg);
    }

    /* the open page keeps a standing mark, not just a hover one */
    .icset-navbar .dropdown-item.active {
        background: rgba(54, 236, 222, .18);
    }
}

/* the drawer keeps the plain list it always had */
@media (max-width: 991.98px) {
    .dd-ico {
        display: none;
    }
}

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

    .icset-navbar .dropdown-item,
    .dd-ico {
        transition: none;
    }

    .icset-navbar .dropdown-item:hover,
    .icset-navbar .dropdown-item:focus,
    .icset-navbar .dropdown-item.active {
        transform: none;
    }

    .icset-navbar .dropdown-item:hover .dd-ico,
    .icset-navbar .dropdown-item:focus .dd-ico,
    .icset-navbar .dropdown-item.active .dd-ico {
        transform: none;
    }
}