/* ==========================================================================
   CompEdTech 2027 — 5th ICCCE-2027
   Jakarta, Indonesia | 24–25 February 2027
   Palette: #df2531 (brand) / #ffffff / #000000
   ========================================================================== */

:root {
  --brand: #df2531;
  --brand-dark: #b0161f;
  --brand-deep: #7d0d14;
  --brand-soft: #fdecee;
  --brand-tint: #fbd7da;

  /* Red used as TEXT rather than as a ground. Separate tokens because the dark
     theme has to lift them: #df2531 only reaches 2.9:1 on a #131319 card and
     #b0161f is worse, while both stay correct as button/badge backgrounds.
     Anything painting a red *background* keeps --brand / --brand-dark. */
  --brand-ink: var(--brand);
  --brand-ink-deep: var(--brand-dark);

  /* Card / panel grounds. In light mode every card is white; the dark theme
     re-points these once instead of re-stating #fff in a hundred rules. */
  --surface: #ffffff;        /* the standard card */
  --surface-2: #ffffff;      /* chips and controls sitting on a card */
  --surface-3: #fafbfd;      /* panel headings, table stubs, sunken rows */

  /* Near-black used as a GROUND under white type (table heads, numbered chips,
     the featured package). --ink itself inverts to white in the dark theme, so
     anything painting a dark ground has to use this instead or it turns into
     white-on-white. */
  --ink-ground: var(--ink);

  --ink: #000000;
  --ink-2: #14141a;
  --ink-3: #2b2b33;
  --muted: #5d5d68;
  --muted-2: #8a8a95;

  --line: #e9e9ee;
  --line-2: #f2f2f5;

  --bg: #ffffff;
  --bg-soft: #f8f8fa;
  --bg-dark: #0b0b0e;

  --radius-sm: 10px;
  --radius: 16px;
  --radius-lg: 22px;
  --radius-xl: 28px;

  --shadow-xs: 0 2px 8px rgba(0, 0, 0, .05);
  --shadow-sm: 0 6px 18px rgba(0, 0, 0, .07);
  --shadow: 0 14px 38px rgba(0, 0, 0, .10);
  --shadow-lg: 0 26px 64px rgba(0, 0, 0, .16);
  --shadow-brand: 0 14px 32px rgba(223, 37, 49, .32);

  --header-h: 84px;

  --font-head: 'Poppins', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-body: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;

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

/* ---------- base ---------- */
* { -webkit-tap-highlight-color: transparent; }

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

body {
  font-family: var(--font-body);
  color: var(--ink-3);
  background: var(--bg);
  font-size: 16px;
  line-height: 1.7;
  overflow-x: clip;
}

h1, h2, h3, h4, h5, h6, .display-1, .display-2 {
  font-family: var(--font-head);
  color: var(--ink);
  font-weight: 700;
  line-height: 1.22;
  letter-spacing: -.015em;
}

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

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

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

:focus-visible {
  outline: 3px solid var(--brand);
  outline-offset: 3px;
  border-radius: 4px;
}

/* Widen the container only at xxl. A bare `.container{max-width}` here would
   beat Bootstrap's own per-breakpoint rules on source order (media queries add
   no specificity) and leave the container full-bleed at every smaller width —
   which makes every `g-5` row's -24px margins bleed past the viewport. */
@media (min-width: 1400px) {
  .container { max-width: 1240px; }
}

/* ---------- utility ---------- */
.text-brand { color: var(--brand-ink) !important; }
.bg-brand { background: var(--brand) !important; }
.bg-soft { background: var(--bg-soft) !important; }
.bg-ink { background: var(--bg-dark) !important; }
.fw-800 { font-weight: 800 !important; }

.section { padding: 84px 0; }
/* Light neutral ground with two soft radial washes instead of the ruled grid —
   enough to lift the section without competing with the dates. */
.section2 {
    background-image: linear-gradient(rgba(0, 0, 0, 0.08) 1px, rgba(20, 0, 0, 0) 1px), linear-gradient(90deg, rgba(20, 0, 0, 0.05) 1px, rgba(68, 0, 0, 0) 1px);
    background-repeat: repeat;
    background-size: 18px 22px;
    padding: 84px 0px;
}
.section-sm { padding: 60px 0; }

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-head);
  font-size: .92rem;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--brand-ink);
  background: var(--brand-soft);
  border: 1px solid var(--brand-tint);
  padding: 9px 20px;
  border-radius: 999px;
  margin-bottom: 18px;
}
.eyebrow i { font-size: 1.05rem; }
/* steps back down on phones so the longest labels stay on one line */
@media (max-width: 575.98px) {
  .eyebrow { font-size: .8rem; padding: 8px 16px; letter-spacing: .12em; }
  .eyebrow i { font-size: .95rem; }
}
.eyebrow.on-dark {
  color: #fff;
  background: rgba(223, 37, 49, .18);
  border-color: rgba(255, 255, 255, .22);
}

.section-title {
  font-size: clamp(1.75rem, 3.2vw, 2.6rem);
  margin-bottom: 14px;
}
.section-title span { color: var(--brand-ink); }
/* .section-lead { color: var(--muted); max-width: 820px; } */
.text-center .section-lead { margin-inline: auto; }

.rule {
  width: 68px;
  height: 4px;
  border-radius: 4px;
  background: linear-gradient(90deg, var(--brand), var(--brand-deep));
  margin-bottom: 22px;
}
.text-center .rule { margin-inline: auto; }

/* ---------- buttons ---------- */
.btn {
  font-family: var(--font-head);
  font-weight: 600;
  border-radius: 999px;
  padding: 12px 28px;
  transition: all .3s var(--ease);
  border-width: 2px;
}
.btn-brand {
  background: var(--brand);
  border-color: var(--brand);
  color: #fff;
  box-shadow: var(--shadow-brand);
}
.btn-brand:hover, .btn-brand:focus {
  background: var(--brand-dark);
  border-color: var(--brand-dark);
  color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 18px 40px rgba(223, 37, 49, .40);
}
.btn-ink {
  background: var(--ink-ground); border-color: var(--ink-ground); color: #fff;
}
.btn-ink:hover { background: var(--brand); border-color: var(--brand); color: #fff; transform: translateY(-2px); }
.btn-outline-brand { background: transparent; border-color: var(--brand); color: var(--brand-ink); }
.btn-outline-brand:hover { background: var(--brand); color: #fff; transform: translateY(-2px); }
.btn-ghost-light { background: rgba(255,255,255,.10); border-color: rgba(255,255,255,.45); color: #fff; backdrop-filter: blur(8px); }
.btn-ghost-light:hover { background: #fff; border-color: #fff; color: var(--ink); transform: translateY(-2px); }
.btn-lg { padding: 15px 34px; font-size: 1rem; }

/* ==========================================================================
   HEADER / NAVIGATION
   ========================================================================== */
.site-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 1040;
  transition: background .35s var(--ease), box-shadow .35s var(--ease), padding .35s var(--ease);
  padding: 14px 0;
  background: transparent;
}
.site-header.is-solid {
  background: rgba(255, 255, 255, .92);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  box-shadow: 0 6px 26px rgba(0, 0, 0, .10);
  padding: 8px 0;
  border-bottom: 1px solid rgba(0, 0, 0, .05);
}
/* pages without a dark hero start solid */
body.has-light-top .site-header { background: rgba(255,255,255,.92); box-shadow: 0 6px 26px rgba(0,0,0,.08); }

.navbar { padding: 0; }

.brand-logo { display: inline-flex; align-items: center; }
.brand-logo__img {
  display: block;
  height: 56px; width: auto; max-width: 100%;
  transition: height .35s var(--ease), padding .35s var(--ease), background .35s var(--ease);
}
/* the mark carries dark navy type — plate it while the header floats over the dark hero */
.brand-logo--plated,
.site-header:not(.is-solid) .brand-logo {
  background: #fff;
  border-radius: 14px;
  padding: 7px 12px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .18);
}
body.has-light-top .site-header .brand-logo {
  background: none; border-radius: 0; padding: 0; box-shadow: none;
}
.site-header.is-solid .brand-logo__img { height: 48px; }

/* --- desktop nav --- */
.main-nav .nav-link {
  font-family: var(--font-head);
  font-weight: 600;
  font-size: .94rem;
  color: rgba(255, 255, 255, .92);
  padding: 10px 15px !important;
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: color .28s var(--ease);
}
.site-header.is-solid .main-nav .nav-link,
body.has-light-top .main-nav .nav-link { color: var(--ink-2); }

/* hover underline animation */
.main-nav .nav-link::after {
  content: '';
  position: absolute;
  left: 15px; right: 15px; bottom: 2px;
  height: 2px;
  background: var(--brand);
  border-radius: 2px;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform .32s var(--ease);
}
.main-nav .nav-item:hover > .nav-link::after,
.main-nav .nav-link:focus-visible::after,
.main-nav .nav-link.active::after,
.main-nav .nav-item.show > .nav-link::after { transform: scaleX(1); }

.main-nav .nav-link.active,
.main-nav .nav-item:hover > .nav-link,
.main-nav .nav-item.show > .nav-link { color: var(--brand-ink); }

.main-nav .nav-link .caret {
  font-size: .72rem;
  transition: transform .3s var(--ease);
}
.main-nav .nav-item:hover > .nav-link .caret,
.main-nav .nav-item.show > .nav-link .caret { transform: rotate(180deg); }

.main-nav .dropdown-toggle::after { display: none; }

/* --- mega menu (glassmorphism panel) --- */
/* Load-bearing: without it the panels and the hover bridges below resolve
   against .navbar instead of their own item, so every bridge spans the whole
   nav and hovering one trigger opens all four (the last one wins). */
.main-nav .nav-item { position: relative; }

.mega {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translate(-50%, 14px);
  min-width: 560px;
  padding: 22px;
  margin: 0;
  border: 1px solid rgba(255, 255, 255, .7);
  border-radius: var(--radius-lg);
  /* Frosted, but opaque enough to stay legible over the near-black hero —
     at .82 the hero headline read straight through the panel. */
  background: rgba(255, 255, 255, .97);
  backdrop-filter: saturate(180%) blur(26px);
  -webkit-backdrop-filter: saturate(180%) blur(26px);
  box-shadow: 0 30px 70px rgba(0, 0, 0, .45);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  /* `visibility` must flip as a step, not be interpolated: transitioning it
     leaves the computed value `hidden` at t=0, so the panel is unfocusable
     for the whole fade and ArrowDown cannot move into it. Delay it on close
     so the fade-out is still visible; fire it instantly on open. */
  transition: opacity .28s var(--ease), transform .28s var(--ease), visibility 0s linear .28s;
  display: block;
}
.mega--wide { min-width: 760px; }

.nav-item.has-mega:hover > .mega,
.nav-item.has-mega.show > .mega,
.mega:focus-within {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translate(-50%, 6px);
  transition: opacity .28s var(--ease), transform .28s var(--ease), visibility 0s linear 0s;
}
/* invisible bridge so the pointer can travel from link to panel */
.nav-item.has-mega::after {
  content: '';
  position: absolute;
  left: 0; right: 0; top: 100%;
  height: 16px;
}

.mega__head {
  display: flex; align-items: center; gap: 12px;
  padding: 0 10px 14px;
  margin-bottom: 12px;
  border-bottom: 1px solid rgba(0, 0, 0, .07);
}
.mega__head i {
  width: 40px; height: 40px; flex: 0 0 40px;
  display: grid; place-items: center;
  border-radius: 12px;
  background: var(--brand); color: #fff; font-size: 1.05rem;
}
.mega__title {
  font-family: var(--font-head); font-weight: 700; font-size: 1rem;
  color: var(--ink); margin: 0; line-height: 1.3;
}
.mega__desc { font-size: .8rem; color: var(--muted); margin: 0; line-height: 1.45; }

.mega__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px; }
.mega--wide .mega__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }

.mega__link {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 11px 12px;
  border-radius: 12px;
  color: var(--ink-2);
  transition: background .25s var(--ease), transform .25s var(--ease);
}
.mega__link:hover, .mega__link:focus-visible {
  background: rgba(223, 37, 49, .08);
  color: var(--brand-ink);
  transform: translateX(3px);
}
.mega__link.active { background: var(--brand-soft); color: var(--brand-ink); }
.mega__link i {
  font-size: 1.02rem;
  color: var(--brand-ink);
  margin-top: 2px;
  flex: 0 0 20px;
}
.mega__link b {
  display: block;
  font-family: var(--font-head); font-weight: 600; font-size: .9rem; line-height: 1.35;
}
.mega__link small { display: block; color: var(--muted); font-size: .76rem; line-height: 1.4; }
.mega__link:hover small { color: var(--brand-ink-deep); }

.mega__cta {
  margin-top: 14px;
  padding: 14px 16px;
  border-radius: var(--radius);
  background: linear-gradient(120deg, var(--ink-ground), #2a2a33);
  color: #fff;
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  flex-wrap: wrap;
}
.mega__cta p { margin: 0; font-size: .84rem; color: rgba(255, 255, 255, .8); }
.mega__cta strong { display: block; font-family: var(--font-head); font-size: .95rem; color: #fff; }

/* --- third level (multi-level dropdown) --- */
.has-sub { position: relative; }
.sub-menu {
  position: absolute;
  top: -8px; left: calc(100% - 6px);
  min-width: 240px;
  padding: 10px;
  border-radius: var(--radius);
  background: rgba(255, 255, 255, .98);
  backdrop-filter: blur(18px);
  border: 1px solid rgba(0, 0, 0, .06);
  box-shadow: 0 22px 50px rgba(0, 0, 0, .32);
  opacity: 0; visibility: hidden; pointer-events: none;
  transform: translateX(-8px);
  transition: opacity .26s var(--ease), transform .26s var(--ease), visibility 0s linear .26s;
  z-index: 5;
}
.has-sub:hover > .sub-menu,
.has-sub:focus-within > .sub-menu {
  opacity: 1; visibility: visible; pointer-events: auto; transform: translateX(0);
  transition: opacity .26s var(--ease), transform .26s var(--ease), visibility 0s linear 0s;
}
.sub-menu a {
  display: flex; align-items: center; gap: 9px;
  padding: 9px 11px; border-radius: 10px;
  font-size: .85rem; font-weight: 500; color: var(--ink-2);
  transition: background .22s var(--ease), color .22s var(--ease);
}
.sub-menu a:hover { background: var(--brand-soft); color: var(--brand-ink); }
.sub-menu a i { color: var(--brand-ink); font-size: .95rem; }
.has-sub > .mega__link .chev { margin-left: auto; font-size: .8rem; opacity: .55; }

/* --- header actions --- */
.header-actions { display: flex; align-items: center; gap: 10px; }
/* Never let the CTA shrink into a two-line label — that doubles the header height. */
.header-actions .btn { white-space: nowrap; flex-shrink: 0; }
.header-actions .icon-btn, .header-actions .nav-toggle { flex-shrink: 0; }
.brand-logo { flex-shrink: 0; }

.icon-btn {
  width: 42px; height: 42px;
  display: grid; place-items: center;
  border-radius: 50%;
  border: 1.5px solid rgba(255, 255, 255, .35);
  background: rgba(255, 255, 255, .10);
  color: #fff;
  font-size: 1.02rem;
  transition: all .28s var(--ease);
}
.icon-btn:hover { background: var(--brand); border-color: var(--brand); color: #fff; transform: translateY(-2px); }
.site-header.is-solid .icon-btn,
body.has-light-top .icon-btn { border-color: var(--line); background: #fff; color: var(--ink-2); }
.site-header.is-solid .icon-btn:hover,
body.has-light-top .icon-btn:hover { background: var(--brand); border-color: var(--brand); color: #fff; }

.nav-toggle {
  width: 46px; height: 46px;
  display: grid; place-items: center;
  border-radius: 13px;
  border: 1.5px solid rgba(255, 255, 255, .35);
  background: rgba(255, 255, 255, .10);
  color: #fff; font-size: 1.35rem;
  transition: all .28s var(--ease);
}
.site-header.is-solid .nav-toggle,
body.has-light-top .nav-toggle { border-color: var(--line); background: #fff; color: var(--ink); }
.nav-toggle:hover { background: var(--brand); border-color: var(--brand); color: #fff; }

/* --- search panel --- */
.search-panel .offcanvas-body { display: grid; place-items: center; }
.search-form { width: min(760px, 92vw); }
.search-form input {
  border: 0; border-bottom: 2px solid var(--line);
  border-radius: 0; padding: 18px 6px;
  font-family: var(--font-head); font-size: clamp(1.1rem, 3vw, 1.7rem); font-weight: 600;
}
.search-form input:focus { box-shadow: none; border-color: var(--brand); }

/* --- offcanvas (mobile) --- */
.nav-offcanvas { width: min(400px, 92vw); border: 0; }
.nav-offcanvas .offcanvas-header {
  padding: 20px 22px; border-bottom: 1px solid var(--line);
}
.nav-offcanvas .offcanvas-body { padding: 14px 16px 24px; }

.mnav-link {
  display: flex; align-items: center; gap: 12px;
  padding: 14px 14px;
  border-radius: 13px;
  font-family: var(--font-head); font-weight: 600; font-size: .98rem;
  color: var(--ink-2);
  transition: background .25s var(--ease), color .25s var(--ease);
}
.mnav-link i { color: var(--brand-ink); font-size: 1.1rem; }
.mnav-link:hover, .mnav-link.active { background: var(--brand-soft); color: var(--brand-ink); }

.nav-offcanvas .accordion-item { border: 0; background: transparent; }
.nav-offcanvas .accordion-button {
  padding: 14px 14px;
  border-radius: 13px !important;
  font-family: var(--font-head); font-weight: 600; font-size: .98rem;
  color: var(--ink-2); background: transparent;
  box-shadow: none !important;
  gap: 12px;
}
.nav-offcanvas .accordion-button i.lead-icon { color: var(--brand-ink); font-size: 1.1rem; }
.nav-offcanvas .accordion-button:not(.collapsed) { background: var(--brand-soft); color: var(--brand-ink); }
.nav-offcanvas .accordion-button::after {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23df2531'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
  width: 1rem; height: 1rem; background-size: 1rem;
}
.nav-offcanvas .accordion-body { padding: 4px 0 10px 16px; }
.nav-offcanvas .accordion-body a {
  display: flex; align-items: center; gap: 10px;
  padding: 11px 12px;
  border-radius: 10px;
  font-size: .89rem; font-weight: 500; color: var(--muted);
  border-left: 2px solid var(--line-2);
  transition: all .24s var(--ease);
}
.nav-offcanvas .accordion-body a:hover,
.nav-offcanvas .accordion-body a.active {
  color: var(--brand-ink); border-left-color: var(--brand); background: var(--brand-soft);
}
.nav-offcanvas .accordion-body a i { font-size: .95rem; color: var(--brand-ink); }
.nav-offcanvas .accordion-body .sub-group { margin-left: 14px; }

.offcanvas-foot {
  margin-top: 22px; padding-top: 20px; border-top: 1px solid var(--line);
}
.offcanvas-foot a.contact-row {
  display: flex; align-items: center; gap: 11px;
  padding: 9px 0; font-size: .87rem; color: var(--muted); font-weight: 500;
}
.offcanvas-foot a.contact-row i { color: var(--brand-ink); font-size: 1rem; }

/* ==========================================================================
   HERO / BANNER
   ========================================================================== */
.hero {
    position: relative;
    display: flex;
    align-items: center;
    padding: calc(var(--header-h) + 46px) 0 60px;
    background: linear-gradient(219deg, #0000004f, #0000005c), url(../../img/banner2.png);
    color: #fff;
    overflow: hidden;
    background-repeat: no-repeat;
    background-size: cover;
}
.hero::before {
  content: '';
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(255, 255, 255, .045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .045) 1px, transparent 1px);
  background-size: 62px 62px;
  mask-image: radial-gradient(circle at 50% 40%, #000 0%, transparent 78%);
  -webkit-mask-image: radial-gradient(circle at 50% 40%, #000 0%, transparent 78%);
  pointer-events: none;
}
.hero__glow {
  position: absolute;
  width: 620px; height: 620px;
  border-radius: 50%;
  filter: blur(120px);
  opacity: .34;
  pointer-events: none;
}
.hero__glow--a { background: var(--brand); top: -180px; right: -140px; animation: float 14s ease-in-out infinite; }
.hero__glow--b { background: #ff5a63; bottom: -220px; left: -160px; animation: float 18s ease-in-out infinite reverse; }

@keyframes float {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
  50% { transform: translate3d(28px, -34px, 0) scale(1.09); }
}

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

.hero__badge {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 9px 20px;
  border-radius: 999px;
  background: rgba(223, 37, 49, .16);
  border: 1px solid rgba(223, 37, 49, .48);
  color: #ffd7da;
  font-family: var(--font-head); font-weight: 600; font-size: .82rem;
  letter-spacing: .04em;
  backdrop-filter: blur(8px);
}
.hero__badge i { color: var(--brand-ink); }

/* short brand above the conference name — the heaviest type in the hero */
.hero__brand {
  font-family: var(--font-head);
  font-weight: 800;
  font-size: clamp(2.2rem, 5.4vw, 4rem);
  line-height: 1.05;
  letter-spacing: -.02em;
  color: #fff;                      /* the year sits plain white beside the name */
  margin: 20px 0 6px;
}
/* Only the conference name takes the warm red gradient — the year stays white.
   color: is the fallback for engines without background-clip: text, and has to
   be a light red rather than the brand red because the hero ground is dark. */
.hero__brand-name {
  color: #ff8f96;
  background: linear-gradient(95deg, #ff5a63, var(--brand) 55%, #ff8f96);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.hero__title {
  font-size: clamp(1.55rem, 3.5vw, 2.5rem);
  font-weight: 500;                 /* a step lighter, so the brand leads */
  color: rgba(255, 255, 255, .94);
  line-height: 1.18;
  letter-spacing: -.01em;
  margin: 0 0 10px;
}
.hero__title em {
  display: inline;                  /* the name now reads as one medium line */
  font-style: italic;
  font-weight: 600;
  color: #fff;                      /* plain white; the gradient moved to .hero__brand */
}
.hero__code {
  font-family: var(--font-head); font-weight: 600;
  font-size: clamp(1rem, 2vw, 1.35rem);
  color: rgba(255, 255, 255, .72);
  letter-spacing: .02em;
}

.hero__theme {
  display: inline-flex; align-items: flex-start; gap: 14px;
  margin-top: 24px;
  padding: 16px 24px;
  border-radius: var(--radius-lg);
  background: rgba(255, 255, 255, .07);
  border: 1px solid rgba(255, 255, 255, .16);
  backdrop-filter: blur(14px);
  max-width: 760px;
  text-align: left;
}
.hero__theme .ico {
  width: 44px; height: 44px; flex: 0 0 44px;
  border-radius: 13px;
  display: grid; place-items: center;
  background: var(--brand); color: #fff; font-size: 1.2rem;
  box-shadow: var(--shadow-brand);
}
.hero__theme span {
  display: block; font-size: .72rem; font-weight: 700;
  letter-spacing: .18em; text-transform: uppercase; color: var(--brand-ink);
  margin-bottom: 3px;
}
.hero__theme p {
  margin: 0; font-family: var(--font-head); font-weight: 600;
  font-size: clamp(.95rem, 1.5vw, 1.1rem); color: #fff; line-height: 1.45;
}

.hero__meta {
  display: flex; flex-wrap: wrap; gap: 10px 22px;
  margin-top: 22px;
  font-size: .95rem; color: rgba(255, 255, 255, .82); font-weight: 500;
}
.hero__meta span { display: inline-flex; align-items: center; gap: 8px; }
.hero__meta i { color: var(--brand-ink); font-size: 1.05rem; }

.hero__hybrid {
  margin-top: 16px; max-width: 640px;
  font-size: .92rem; color: rgba(255, 255, 255, .66);
}
.hero__hybrid b { color: #fff; }

.hero__actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 30px; }

.hero__org {
  display: flex; align-items: center; gap: 14px;
  margin-top: 30px; padding-top: 24px;
  border-top: 1px solid rgba(255, 255, 255, .13);
  max-width: 560px;
}
.hero__org .logo-chip {
  display: grid; place-items: center;
  padding: 10px 16px;
  border-radius: 13px;
  background: #fff;
  font-family: var(--font-head); font-weight: 800; font-size: 1.15rem;
  color: var(--brand-ink); letter-spacing: -.02em;
  box-shadow: var(--shadow-sm);
}
.hero__org small {
  display: block; font-size: .7rem; letter-spacing: .16em;
  text-transform: uppercase; color: rgba(255, 255, 255, .5); margin-bottom: 2px;
}
.hero__org strong { font-family: var(--font-head); font-size: .98rem; color: #fff; font-weight: 600; }

/* --- info tiles row --- */
.hero-tiles { margin-top: 46px; }
.hero-tiles .row { --bs-gutter-x: 0; }

.tile {
  padding: 22px 18px;
  text-align: center;
  color: #fff;
  height: 100%;
  position: relative;
  transition: transform .35s var(--ease);
}
.tile:hover { transform: translateY(-6px); }
.tile--1 { background: var(--brand); }
.tile--2 { background: #17171d; }
.tile--3 { background: var(--brand-deep); }
.tile--4 { background: #2a2a33; }
.tile__ico {
  width: 48px; height: 48px; margin: 0 auto 12px;
  display: grid; place-items: center;
  border-radius: 14px;
  background: rgba(255, 255, 255, .16);
  font-size: 1.3rem;
}
.tile small {
  display: block; font-size: .68rem; font-weight: 700;
  letter-spacing: .15em; text-transform: uppercase;
  color: rgba(255, 255, 255, .72); margin-bottom: 5px;
}
.tile strong {
  display: block; font-family: var(--font-head);
  font-size: 1.02rem; font-weight: 700; line-height: 1.3;
}

.tile-card {
  height: 100%;
  padding: 24px 26px;
  background: rgba(255, 255, 255, .06);
  border: 1px solid rgba(255, 255, 255, .14);
  backdrop-filter: blur(14px);
  color: #fff;
}
.tile-card h4 {
  font-size: 1.32rem; font-weight: 800; color: var(--brand-ink);
  font-style: italic; margin-bottom: 8px;
}
.tile-card p { font-size: .86rem; color: rgba(255, 255, 255, .82); margin-bottom: 6px; line-height: 1.55; }
.tile-card p.theme-line { color: rgba(255, 255, 255, .6); font-size: .8rem; margin: 0; }
.tile-card p.theme-line b { color: var(--brand-ink); }

.hero-tiles .row > [class*="col-"] { display: flex; }
.hero-tiles .row > [class*="col-"] > * { width: 100%; }
.hero-tiles .tile-wrap:first-child .tile { border-radius: var(--radius) 0 0 var(--radius); }
.hero-tiles .tile-card { border-radius: 0 var(--radius) var(--radius) 0; }

/* --- hero feature strip --- */
.hero-features {
  margin-top: 34px;
  padding: 26px 8px 6px;
  border-top: 1px solid rgba(255, 255, 255, .12);
}
.hero-feature { display: flex; gap: 13px; align-items: flex-start; }
.hero-feature i {
  width: 42px; height: 42px; flex: 0 0 42px;
  display: grid; place-items: center;
  border-radius: 12px;
  background: rgba(223, 37, 49, .18);
  border: 1px solid rgba(223, 37, 49, .38);
  color: var(--brand-ink); font-size: 1.15rem;
}
.hero-feature b {
  display: block; font-family: var(--font-head);
  font-size: .9rem; font-weight: 700; color: #fff; margin-bottom: 2px;
}
.hero-feature span { font-size: .78rem; color: rgba(255, 255, 255, .6); line-height: 1.5; display: block; }

/* indexing partners, closing the hero. The badges are dark artwork on a
   transparent ground, so each takes a white plate to read against the
   photograph — the same treatment the dark theme gives them further down the
   page. Wraps rather than squeezing, so a narrow screen stacks them. */
.hero-pubs {
  margin-top: 26px;
  padding: 22px 8px 4px;
  border-top: 1px solid rgba(255, 255, 255, .12);
  text-align: center;
}
.hero-pubs__label {
  display: block; margin-bottom: 15px;
  font-family: var(--font-head); font-weight: 600;
  font-size: .7rem; letter-spacing: .18em; text-transform: uppercase;
  color: rgba(255, 255, 255, .58);
}
.hero-pubs__row {
  display: flex; flex-wrap: wrap;
  align-items: center; justify-content: center;
  gap: clamp(10px, 2vw, 22px);
}
.hero-pubs__row img {
  height: clamp(26px, 4vw, 42px); width: auto;
  object-fit: contain;
  background: #fff;
  border-radius: 8px;
  padding: 6px 10px;
  box-shadow: 0 6px 18px rgba(0, 0, 0, .3);
}

/* ==========================================================================
   ASSOCIATES STRIP
   ========================================================================== */
/* ---------- associates carousel (partners.php) ----------
   Each mark is dark artwork on a transparent ground, so it takes a white plate
   rather than sitting straight on the section — that is what keeps it legible
   when the page flips to the dark theme. */
.assoc-car { position: relative; }
.assoc-row {
  list-style: none; margin: 0; padding: 8px 0;
  display: flex; flex-wrap: wrap;
  align-items: center; justify-content: center;
  gap: clamp(16px, 3vw, 42px);
}
.assoc-row li { display: flex; }
.assoc-row img {
  height: clamp(46px, 6vw, 76px); width: auto;
  max-width: 190px;
  object-fit: contain;
  background: #fff;
  border-radius: 12px;
  padding: 10px 16px;
  box-shadow: var(--shadow-xs);
  /* the source page keeps these near full colour and lifts them on hover */
  filter: grayscale(10%);
  transition: filter .3s var(--ease), transform .3s var(--ease), box-shadow .3s var(--ease);
}
.assoc-row img:hover {
  filter: grayscale(0);
  transform: scale(1.05);
  box-shadow: var(--shadow-sm);
}
/* [data-bs-target], not `button`: Bootstrap styles these as
   `.carousel-indicators [data-bs-target]`, which is two class-level selectors —
   a plain `.assoc-car__dots button` loses to it and the dots come out as its
   default 30x3 bars. Same shape the SDG carousel below uses. */
.assoc-car__dots { position: static; margin: 30px 0 0; }
.assoc-car__dots [data-bs-target] {
  width: 9px; height: 9px; border-radius: 50%;
  background-color: var(--muted-2); border: 0; opacity: 1;
  margin: 0 5px;
  transition: background-color .3s var(--ease), width .3s var(--ease);
}
.assoc-car__dots .active { background-color: var(--brand); width: 26px; border-radius: 999px; }

@media (prefers-reduced-motion: reduce) {
  .assoc-row img { transition: none; }
  .assoc-row img:hover { transform: none; }
}

/* ==========================================================================
   PARTNER LOGO MARQUEE
   ========================================================================== */
.logo-strip {
  padding: 24px 0;
  /* background: #fff; */
  border-bottom: 1px solid var(--line);
  overflow: hidden;
}
/* Jakarta skyline line-art across the top of the Glimpses section.
   The pseudo-element needs three things the bare rule was missing: a width
   (left/right, or it collapses to 0 and never shows), a positioned parent to
   resolve against, and a stacking order that keeps it behind the content. */
.glimpse {
    position: relative;
    overflow: hidden;
    background: #fff6f6;
}
.glimpse::before {
  content: "";
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 200px;
  /* anchored to the bottom edge so the buildings stand on the section floor */
  background: url('../../img/pattern.png') bottom center / auto 200px repeat-x;
  opacity: .5;
  /* fade upwards: solid where the skyline meets the floor, gone at the rooftops */
  mask-image: linear-gradient(transparent, #000 55%);
  -webkit-mask-image: linear-gradient(transparent, #000 55%);
  pointer-events: none;
  z-index: 0;
}
.glimpse > .container { position: relative; z-index: 1; }
.logo-strip .gall-1 { display: block; width: 100%; }
/* the source logos arrive at wildly different intrinsic sizes — pin the height
   and let width follow so the strip reads as one row */
.logo-strip .gall-1 img {
  height: 60px; width: auto;
  margin: 0 20px;
  vertical-align: middle;
  object-fit: contain;
  filter: grayscale(1);
  opacity: .68;
  transition: filter .3s var(--ease), opacity .3s var(--ease);
}
.logo-strip .gall-1 img:hover { filter: none; opacity: 1; }
[data-theme="dark"] .logo-strip { background: #fff; }

.assoc { padding: 46px 0; background: var(--bg-soft); border-bottom: 1px solid var(--line); }
.assoc__label {
  font-family: var(--font-head); font-size: .74rem; font-weight: 700;
  letter-spacing: .18em; text-transform: uppercase; color: var(--muted-2);
  text-align: center; margin-bottom: 26px;
}
.assoc__track { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; }
.assoc__item {
  min-width: 170px;
  padding: 18px 24px;
  border-radius: var(--radius);
  background: var(--surface);
  border: 1px solid var(--line);
  text-align: center;
  font-family: var(--font-head); font-weight: 700; font-size: .95rem;
  color: var(--ink-2);
  box-shadow: var(--shadow-xs);
  transition: all .3s var(--ease);
}
.assoc__item small { display: block; font-weight: 500; font-size: .72rem; color: var(--muted); letter-spacing: .04em; }
.assoc__item:hover { transform: translateY(-5px); border-color: var(--brand); box-shadow: var(--shadow-sm); color: var(--brand-ink); }

/* ==========================================================================
   QUICK DOWNLOADS
   ========================================================================== */
.dl-card {
  display: flex; align-items: center; gap: 14px;
  height: 100%;
  padding: 18px 18px;
  border-radius: var(--radius);
  background: var(--surface);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-xs);
  transition: all .32s var(--ease);
  color: var(--ink-2);
}
.dl-card:hover {
  transform: translateY(-6px);
  border-color: var(--brand);
  box-shadow: var(--shadow);
  color: var(--brand-ink);
}
.dl-card__ico {
  width: 46px; height: 46px; flex: 0 0 46px;
  display: grid; place-items: center;
  border-radius: 13px;
  background: var(--brand-soft);
  color: var(--brand-ink); font-size: 1.2rem;
  transition: all .32s var(--ease);
}
.dl-card:hover .dl-card__ico { background: var(--brand); color: #fff; }
.dl-card b { display: block; font-family: var(--font-head); font-size: .92rem; font-weight: 600; line-height: 1.35; }
.dl-card small { color: var(--muted); font-size: .74rem; letter-spacing: .06em; text-transform: uppercase; font-weight: 600; }
.dl-card .arrow { margin-left: auto; color: var(--brand-ink); font-size: 1.1rem; opacity: .5; transition: all .3s var(--ease); }
.dl-card:hover .arrow { opacity: 1; transform: translateY(2px); }

/* The Quick Downloads grid is set a step larger than the shared .dl-card
   defaults above. Scoped to #downloads because the speaker-enquiry cards
   further down index.php reuse .dl-card and should keep their original size. */
#downloads .dl-card { padding: 20px; gap: 16px; }
#downloads .dl-card__ico { width: 52px; height: 52px; flex: 0 0 52px; font-size: 1.4rem; }
#downloads .dl-card b { font-size: 1.08rem; }
#downloads .dl-card small { font-size: .82rem; }
/* The blush band this grid sits on. .section2 paints only the ruled grid, so
   the colour goes underneath it and the rules still read over the top. The
   white cards are what carries the contrast, so the tint stays light. */
#downloads { background-color: var(--brand-tint); }
/* The dark theme cannot take the blush band — it would be the one bright
   panel on the page — so it gets a deep red wash of the same hue instead. */
[data-theme="dark"] #downloads { background-color: #1b0d10; }

/* The download affordance is a plain glyph rather than a disc: the card is
   already a link, so a second button-looking element only competes with it.
   The base rule sets opacity .5, so full strength is restored here. */
#downloads .dl-card .arrow {
  font-size: 1.25rem;
  opacity: 1;
  color: var(--brand-ink);
}
#downloads .dl-card:hover .arrow { transform: translateY(2px); }
@media (prefers-reduced-motion: reduce) {
  #downloads .dl-card:hover .arrow { transform: none; }
}


/* ==========================================================================
   SESSION PAGES — JOIN CTA
   The pair above Core Objectives on session-1.php … session-10.php.
   ========================================================================== */
.ses-join { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; }
@media (max-width: 575.98px) {
  .ses-join { flex-direction: column; }
  .ses-join .btn { width: 100%; }
}

/* ==========================================================================
   WELCOME / ABOUT
   ========================================================================== */
.welcome-visual {
  position: relative;
  border-radius: var(--radius-xl);
  overflow: hidden;
  background: linear-gradient(150deg, #0b0b0e, #1e0508);
  min-height: 420px;
  display: grid; place-items: center;
  color: #fff; text-align: center;
  padding: 40px;
  box-shadow: var(--shadow);
}
.welcome-visual::after {
  content: '';
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px);
  background-size: 46px 46px;
  mask-image: radial-gradient(circle at 50% 50%, #000, transparent 72%);
  -webkit-mask-image: radial-gradient(circle at 50% 50%, #000, transparent 72%);
}
.welcome-visual > * { position: relative; z-index: 1; }
.welcome-visual .big {
  font-family: var(--font-head); font-weight: 800;
  font-size: clamp(2.4rem, 6vw, 3.8rem); line-height: 1;
  background: linear-gradient(95deg, #ff5a63, var(--brand));
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.welcome-visual .sub { font-size: .9rem; color: rgba(255,255,255,.68); letter-spacing: .16em; text-transform: uppercase; font-weight: 600; }

.stat-strip {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 1px; background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  margin-top: 26px;
}
.stat-strip div { background: var(--surface); padding: 20px 12px; text-align: center; }
.stat-strip b {
  display: block; font-family: var(--font-head); font-weight: 800;
  font-size: 1.6rem; color: var(--brand-ink); line-height: 1.1;
}
.stat-strip small { font-size: .74rem; color: var(--muted); font-weight: 600; letter-spacing: .06em; text-transform: uppercase; }

.about-para { color: var(--muted); margin-bottom: 18px; text-align: justify; }

/* ==========================================================================
   SDG
   ========================================================================== */
.sdg-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(78px, 1fr));
  gap: 10px;
}
.sdg-goal {
  border-radius: 8px; overflow: hidden; aspect-ratio: 1;
  transition: transform .3s var(--ease), box-shadow .3s var(--ease);
  position: relative;
}
.sdg-goal img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sdg-goal:hover { transform: translateY(-4px) scale(1.12); box-shadow: var(--shadow); z-index: 2; }

.sdg-table-wrap {
  border-radius: var(--radius);
  border: 1px solid var(--line);
  overflow: hidden;
  box-shadow: var(--shadow-xs);
  background: var(--surface);
}
.sdg-table { margin: 0; min-width: 720px; }
.sdg-table thead th {
  background: var(--ink-ground);
  color: #fff;
  font-family: var(--font-head); font-weight: 600; font-size: .82rem;
  letter-spacing: .06em; text-transform: uppercase;
  padding: 16px 18px; border: 0; white-space: nowrap;
}
.sdg-table tbody td {
  padding: 15px 18px; vertical-align: top;
  border-color: var(--line-2); font-size: .88rem; color: var(--muted);
}
.sdg-table tbody tr:hover td { background: var(--brand-soft); }
.sdg-table tbody td:first-child {
  font-family: var(--font-head); font-weight: 600; color: var(--ink); font-size: .92rem;
}
.sdg-pill {
  display: inline-block;
  padding: 4px 11px; margin: 2px 3px 2px 0;
  border-radius: 999px;
  background: var(--brand-soft); border: 1px solid var(--brand-tint);
  color: var(--brand-ink-deep); font-size: .74rem; font-weight: 600;
  white-space: nowrap;
}
.table-scroll { overflow-x: auto; }

/* ==========================================================================
   IMPORTANT DATES
   ========================================================================== */
/* ---------- header hierarchy ---------- */
#dates .section-title { font-size: clamp(2rem, 4.4vw, 3.1rem); margin-bottom: 0; }
#dates .rule { margin-top: 18px; }
#dates .section-lead { margin-top: 18px; font-size: 1rem; }

/* ---------- card ----------
   Dark card on the light section: white title, red icon tile, yellow date.
   The 01-04 rail above the cards was removed on request, so the columns carry
   no pseudo-elements any more. */
.date-card {
  position: relative;
  height: 100%;
  /* column layout so the category chip sits on a shared baseline even when a
     longer date wraps to two lines */
  display: flex; flex-direction: column; align-items: center;
  padding: 30px 24px 26px;
  border-radius: 18px;
  background: #0e0e11;
  border: 1px solid rgba(255, 255, 255, .08);
  box-shadow: 0 10px 28px rgba(17, 17, 17, .14);
  overflow: hidden;
  text-align: center;
  transition: transform .28s var(--ease), box-shadow .28s var(--ease), border-color .28s var(--ease);
}
/* accent drawn in along the floor on hover */
.date-card::after {
  content: "";
  position: absolute; inset: auto 0 0 0; height: 3px;
  background: linear-gradient(90deg, var(--brand), #ffe01a);
  transform: scaleX(0);
  transition: transform .3s var(--ease);
}
.date-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 22px 46px rgba(17, 17, 17, .26);
  border-color: rgba(255, 255, 255, .16);
}
.date-card:hover::after { transform: scaleX(1); }

.date-card__ico {
  width: 52px; height: 52px; margin: 0 auto 16px;
  display: grid; place-items: center;
  border-radius: 14px;
  background: var(--brand); color: #fff; font-size: 1.25rem;
  transition: background .28s var(--ease), transform .28s var(--ease);
}
.date-card:hover .date-card__ico { background: var(--brand-dark); }

.date-card h5 {
  font-size: 1rem; font-weight: 600; line-height: 1.45;
  color: #fff; margin-bottom: 3px;
}
/* the date is the strongest thing in the card */
.date-card .d {
    display: block;
    font-family: var(--font-head);
    font-weight: 600;
    font-size: 16px;
    letter-spacing: 0.04em;
    color: #ffd891;
    transition: color .28s var(--ease);
    margin-bottom: 6px;
}
.date-card:hover .d { color: #fff36b; }

.date-card__tag {
  margin-top: auto;
  padding: 4px 11px; border-radius: 999px;
  background: #f2f2f4; border: 1px solid rgba(255, 255, 255, .1);
  font-family: var(--font-head); font-size: .6rem; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase; color: #55585f;
  transition: background .28s var(--ease), color .28s var(--ease);
}
.date-card:hover .date-card__tag { background: #fff; color: var(--brand); }

@media (max-width: 575.98px) {
  /* align-items on the card would keep everything centred, so it has to flip
     too — text-align alone does nothing here */
  .date-card { align-items: flex-start; text-align: left; padding: 24px 22px; }
  .date-card__ico { margin-inline: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .date-card, .date-card::after, .date-card__ico, .date-card .d, .date-card__tag { transition: none; }
  .date-card:hover { transform: none; }
}
/* ==========================================================================
   CALL FOR PAPERS
   ========================================================================== */
.track-card {
  display: flex; align-items: center; gap: 16px;
  height: 100%;
  padding: 18px 20px;
  border-radius: var(--radius);
  background: var(--surface);
  border: 1px solid var(--line);
  border-left: 4px solid var(--brand);
  box-shadow: var(--shadow-xs);
  transition: all .32s var(--ease);
  text-decoration: none; color: inherit;   /* the card itself is the link */
}
.track-card:hover { transform: translateY(-5px) scale(1.02); box-shadow: var(--shadow); border-left-color: var(--ink); }
.track-card:focus-visible { outline: 3px solid var(--brand); outline-offset: 3px; }
.track-card__no {
  width: 46px; height: 46px; flex: 0 0 46px;
  display: grid; place-items: center;
  border-radius: 13px;
  background: var(--ink-ground); color: #fff;
  font-family: var(--font-head); font-weight: 800; font-size: 1rem;
  transition: all .32s var(--ease);
}
.track-card:hover .track-card__no { background: var(--brand); }
.track-card__body { flex: 1; min-width: 0; }
.track-card b { display: block; font-family: var(--font-head); font-weight: 600; font-size: .95rem; color: var(--ink); line-height: 1.4; }

/* the SDGs this track maps to — decorative, the title already names the track */
.track-card__sdg { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 9px; }
.track-card__sdg img {
  width: 30px; height: 30px;
  border-radius: 6px;
  object-fit: cover;
  box-shadow: 0 1px 4px rgba(0, 0, 0, .18);
}

/* ==========================================================================
   GALLERY
   ========================================================================== */
.gal {
  position: relative;
  border-radius: var(--radius);
  overflow: hidden;
  aspect-ratio: 4 / 3;
  background: linear-gradient(150deg, #17171d, #2a0508);
  display: grid; place-items: center;
  color: rgba(255, 255, 255, .38);
  font-size: 2rem;
  box-shadow: var(--shadow-xs);
}
.gal img { width: 100%; height: 100%; object-fit: cover; transition: transform .55s var(--ease); }
.gal:hover img { transform: scale(1.09); }
.gal__cap {
  position: absolute; inset: auto 0 0 0;
  padding: 34px 16px 14px;
  background: linear-gradient(transparent, rgba(0, 0, 0, .82));
  color: #fff; font-size: .8rem; font-weight: 600;
  font-family: var(--font-head);
  transform: translateY(6px); opacity: 0;
  transition: all .35s var(--ease);
}
.gal:hover .gal__cap { transform: translateY(0); opacity: 1; }

/* ==========================================================================
   PUBLICATION PACKAGES
   ========================================================================== */
/* indexing badge row — stays on one line at every width, so the badges scale
   with the viewport instead of wrapping (all five are 120x62 at source) */
.pub-logos {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: center;
  gap: clamp(10px, 2.4vw, 30px);
  
}
.pub-logos img {
  flex: 0 1 auto;
  min-width: 0;
  height: clamp(30px, 5.6vw, 62px);
  width: auto;
  object-fit: contain;
  border: 1px solid #00000038;
}
.vol-req{
  background: #df2531;
  
}
.pack {
  position: relative;
  height: 100%;
  padding: 30px 26px;
  border-radius: var(--radius-lg);
  background: var(--surface);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-xs);
  transition: all .34s var(--ease);
  text-align: center;
}
.pack:hover { transform: translateY(-9px); box-shadow: var(--shadow); border-color: var(--brand); }
.pack--featured { background: linear-gradient(160deg, var(--ink-ground), #26262f); border-color: var(--ink-ground); color: #fff; }
.pack--featured h4, .pack--featured .q { color: #fff; }
.pack--featured p { color: rgba(255, 255, 255, .72); }
.pack__ribbon {
  position: absolute; top: 16px; right: -34px;
  transform: rotate(38deg);
  background: var(--brand); color: #fff;
  font-family: var(--font-head); font-size: .64rem; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase;
  padding: 5px 40px;
  box-shadow: var(--shadow-sm);
}
.pack .q {
  font-family: var(--font-head); font-weight: 800;
  font-size: 2.6rem; line-height: 1; color: var(--brand-ink);
  display: block; margin-bottom: 6px;
}
.pack small { display: block; font-size: .76rem; color: var(--muted); letter-spacing: .1em; text-transform: uppercase; font-weight: 600; margin-bottom: 14px; }
.pack--featured small { color: rgba(255, 255, 255, .6); }
.pack h4 { font-size: 1.08rem; margin-bottom: 8px; }
.pack p { font-size: .84rem; color: var(--muted); margin: 0; }

/* ==========================================================================
   WHY ATTEND
   ========================================================================== */
.why-card {
  height: 100%;
  padding: 30px 26px;
  border-radius: var(--radius-lg);
  background: var(--surface);
  border: 1px solid var(--line);
  border-bottom: 4px solid var(--brand);
  box-shadow: var(--shadow-xs);
  transition: all .34s var(--ease);
}
.why-card:hover { transform: translateY(-8px) scale(1.02); box-shadow: var(--shadow); }
.why-card__ico {
  width: 54px; height: 54px; margin-bottom: 18px;
  display: grid; place-items: center;
  border-radius: 16px;
background: #df2531;
    color: #ffffff;  font-size: 1.35rem;
  transition: all .34s var(--ease);
}
.why-card:hover .why-card__ico { background: var(--brand); color: #fff; transform: rotate(-8deg); }
.why-card h4 { font-size: 1.05rem; margin-bottom: 10px; }
.why-card p { font-size: .88rem; color: var(--muted); margin: 0; }

.tick-list { list-style: none; padding: 0; margin: 0; }
.tick-list li {
  display: flex; align-items: flex-start; gap: 11px;
  padding: 4px 0;
  font-size: .92rem; color: var(--muted);
}
.tick-list li i { color: var(--brand-ink); font-size: 1.05rem; margin-top: 3px; flex: 0 0 18px; }

/* ==========================================================================
   SPEAKER / AMBASSADOR / VOLUNTEER CAROUSEL
   ========================================================================== */
.opp-slider { border-radius: var(--radius-xl); overflow: hidden; box-shadow: var(--shadow); }
.opp-slide {
  padding: 56px clamp(24px, 5vw, 68px);
  min-height: 400px;
  display: flex; align-items: center;
  background:
    radial-gradient(700px 420px at 88% 12%, rgba(223, 37, 49, .30), transparent 62%),
    linear-gradient(140deg, #0b0b0e, #1c0507 60%, #0b0b0e);
  color: #fff;
}
.opp-slide h3 { color: #fff; font-size: clamp(1.5rem, 3.4vw, 2.3rem); margin-bottom: 14px; }
.opp-slide p { color: rgba(255, 255, 255, .76); max-width: 640px; }
.opp-slide .tick-list li { color: rgba(255, 255, 255, .8); }

.opp-slider .carousel-indicators { margin-bottom: 18px; }
.opp-slider .carousel-indicators [data-bs-target] {
  width: 34px; height: 4px; border-radius: 4px;
  background: rgba(255, 255, 255, .4); border: 0; opacity: 1;
}
.opp-slider .carousel-indicators .active { background: var(--brand); }
.opp-slider .carousel-control-prev, .opp-slider .carousel-control-next { width: 7%; opacity: .55; }
.opp-slider .carousel-control-prev:hover, .opp-slider .carousel-control-next:hover { opacity: 1; }

/* ==========================================================================
   VOLUNTEER / ROLES
   ========================================================================== */
.role-tabs .nav-link {
  font-family: var(--font-head); font-weight: 600; font-size: .92rem;
  color: var(--ink-2); border: 1px solid var(--line); background: #fff;
  border-radius: 999px; padding: 11px 26px; margin: 0 6px 10px 0;
  transition: all .3s var(--ease);
}
.role-tabs .nav-link:hover { border-color: var(--brand); color: var(--brand-ink); }
.role-tabs .nav-link.active { background: var(--brand); border-color: var(--brand); color: #fff; box-shadow: var(--shadow-brand); }

/* ---------- volunteer role cards ---------- */
.vrole-intro { max-width: 780px; margin: 0 auto 34px; }
.vrole-intro__title {
  font-family: var(--font-head); font-weight: 800;
  font-size: clamp(1.4rem, 2.4vw, 1.85rem);
  letter-spacing: -.02em; margin: 12px 0 10px;
}
.vrole-intro__title span { color: var(--brand-ink); }
.vrole-intro .section-lead { font-size: .93rem; }

.vrole {
  position: relative;
  height: 100%;
  display: flex; flex-direction: column;
  padding: 30px 26px;
  border-radius: var(--radius-lg);
  background: var(--surface);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-xs);
  overflow: hidden;
  transition: transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s var(--ease);
}
/* accent bar that draws across the top edge on hover */
.vrole::before {
  content: '';
  position: absolute; inset: 0 auto auto 0;
  height: 3px; width: 100%;
  background: linear-gradient(90deg, var(--brand), var(--brand-deep));
  transform: scaleX(0); transform-origin: left;
  transition: transform .35s var(--ease);
}
.vrole:hover { transform: translateY(-6px); box-shadow: var(--shadow); border-color: var(--brand-tint); }
.vrole:hover::before { transform: scaleX(1); }

.vrole__icon {
  width: 54px; height: 54px;
  display: grid; place-items: center;
  margin-bottom: 18px;
  border-radius: 15px;
  background: var(--brand-soft);
  color: var(--brand-ink);
  font-size: 1.35rem;
  transition: background .3s var(--ease), color .3s var(--ease), transform .3s var(--ease);
}
.vrole:hover .vrole__icon { background: var(--brand); color: #fff; transform: scale(1.06); }

.vrole__title {
  font-family: var(--font-head); font-weight: 700; font-size: 1.06rem;
  color: var(--ink-2); margin-bottom: 10px;
}
.vrole__lead {
  font-size: .87rem; line-height: 1.65; color: var(--muted);
  margin-bottom: 16px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--line-2);
}
.vrole__list { list-style: none; padding: 0; margin: 0 auto 0 0; }
.vrole__list li {
  display: flex; align-items: flex-start; gap: 9px;
  margin-bottom: 9px;
  font-size: .85rem; line-height: 1.55; color: var(--ink-3);
}
.vrole__list li:last-child { margin-bottom: 0; }
.vrole__list li i { color: var(--brand-ink); font-size: .9rem; margin-top: .18em; flex-shrink: 0; }

@media (max-width: 575.98px) {
  .vrole { padding: 24px 20px; }
  .vrole__icon { width: 48px; height: 48px; font-size: 1.2rem; margin-bottom: 14px; }
}
@media (prefers-reduced-motion: reduce) {
  .vrole, .vrole::before, .vrole__icon { transition: none; }
  .vrole:hover { transform: none; }
  .vrole:hover .vrole__icon { transform: none; }
  .vrole:hover::before { transform: scaleX(1); }
}

/* ==========================================================================
   FORMS
   ========================================================================== */
/* ==========================================================================
   SUBMISSION GUIDELINES — cards, panels, timelines, doc downloads
   ========================================================================== */
.gcard {
  height: 100%;
  display: flex; flex-direction: column;
  padding: 30px 26px;
  border-radius: var(--radius-lg);
  background: var(--surface); border: 1px solid var(--line);
  box-shadow: var(--shadow-xs);
  transition: transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s var(--ease);
}
.gcard:hover { transform: translateY(-5px); box-shadow: var(--shadow-sm); border-color: var(--brand-tint); }
.gcard__ico {
  width: 50px; height: 50px; margin-bottom: 16px;
  display: grid; place-items: center; border-radius: 14px;
  background: var(--brand-soft); color: var(--brand-ink); font-size: 1.25rem;
  transition: background .3s var(--ease), color .3s var(--ease);
}
.gcard:hover .gcard__ico { background: var(--brand); color: #fff; }
.gcard__title { font-family: var(--font-head); font-weight: 700; font-size: 1.02rem; color: var(--ink-2); margin-bottom: 8px; }
.gcard__text { font-size: .87rem; line-height: 1.65; color: var(--muted); margin: 0; }
/* a bare numeral in the icon tile, for the 6-6-6 rule */
.gcard__ico--num { font-family: var(--font-head); font-weight: 800; font-size: 1.5rem; }
.gcard--compact .gcard__ico--num { font-size: 1.4rem; }
.gcard .check-list { margin-top: 4px; }
.check-list--sm li { font-size: .84rem; margin-bottom: 9px; }

.gcard--compact { padding: 26px 22px; }
.gcard--compact .gcard__ico { width: 44px; height: 44px; font-size: 1.1rem; margin-bottom: 14px; }
.gcard--compact .gcard__title { font-size: .95rem; }
.gcard--compact .gcard__text { font-size: .83rem; }

/* generic bordered panel used for the requirement blocks */
.panel {
  padding: clamp(24px, 3vw, 34px);
  border-radius: var(--radius-lg);
  background: var(--surface); border: 1px solid var(--line);
  box-shadow: var(--shadow-xs);
}
.panel__head {
  display: flex; align-items: flex-start; gap: 14px;
  padding-bottom: 18px; margin-bottom: 20px;
  border-bottom: 1px solid var(--line);
}
.panel__ico {
  width: 46px; height: 46px; flex: 0 0 46px;
  display: grid; place-items: center; border-radius: 13px;
  background: var(--brand-soft); color: var(--brand-ink); font-size: 1.15rem;
}
.panel__title { font-family: var(--font-head); font-weight: 700; font-size: 1.08rem; color: var(--ink-2); margin: 0 0 3px; }
.panel__sub { font-size: .84rem; color: var(--muted); margin: 0; }
.panel__para { font-size: .89rem; line-height: 1.75; color: var(--muted); margin-bottom: 14px; }
.panel__para:last-child { margin-bottom: 0; }

.check-list { list-style: none; padding: 0; margin: 0; }
.check-list li {
  display: flex; align-items: flex-start; gap: 11px;
  margin-bottom: 12px;
  font-size: .89rem; line-height: 1.6; color: var(--ink-3);
}
.check-list li:last-child { margin-bottom: 0; }
.check-list li i { color: var(--brand-ink); font-size: .95rem; margin-top: .2em; flex-shrink: 0; }
@media (min-width: 768px) {
  .check-list--cols { columns: 2; column-gap: 34px; }
  .check-list--cols li { break-inside: avoid; }
}

/* numbered vertical sequence inside a panel */
.numseq { list-style: none; padding: 0; margin: 0; counter-reset: none; }
.numseq li {
  display: flex; align-items: center; gap: 14px;
  padding: 11px 0;
  border-bottom: 1px dashed var(--line);
}
.numseq li:last-child { border-bottom: 0; padding-bottom: 0; }
.numseq__n {
  flex: 0 0 34px;
  font-family: var(--font-head); font-weight: 800; font-size: .82rem;
  color: var(--brand-ink); letter-spacing: .04em;
}
.numseq__label { font-family: var(--font-head); font-weight: 600; font-size: .92rem; color: var(--ink-2); }

/* big numbered steps */
.steps { list-style: none; padding: 0; margin: 0; }
.steps__item {
  position: relative;
  display: flex; gap: 22px;
  padding-bottom: 30px;
}
.steps__item:last-child { padding-bottom: 0; }
/* connector down the left rail */
.steps__item:not(:last-child)::before {
  content: '';
  position: absolute; top: 58px; bottom: 6px; left: 27px;
  width: 2px;
  background: repeating-linear-gradient(180deg, var(--brand-tint) 0 7px, transparent 7px 13px);
}
.steps__num {
  flex: 0 0 56px; height: 56px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: #fff; border: 2px solid var(--brand);
  color: var(--brand-ink);
  font-family: var(--font-head); font-weight: 800; font-size: .95rem;
  position: relative; z-index: 1;
}
.steps__body { padding-top: 6px; }
.steps__title { font-family: var(--font-head); font-weight: 700; font-size: 1.02rem; color: var(--ink-2); margin-bottom: 5px; }
.steps__body p { font-size: .89rem; color: var(--muted); margin: 0; line-height: 1.65; }

/* CTA panel */
.cta-panel {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 26px;
  padding: clamp(26px, 3.5vw, 40px);
  border-radius: var(--radius-xl);
  background: var(--brand-soft);
  border: 1px solid var(--brand-tint);
}
.cta-panel__text { flex: 1 1 380px; }
.cta-panel__title { font-family: var(--font-head); font-weight: 800; font-size: clamp(1.25rem, 2.4vw, 1.65rem); color: var(--ink); margin-bottom: 8px; letter-spacing: -.02em; }
.cta-panel__text p { font-size: .92rem; color: var(--ink-3); margin: 0; max-width: 60ch; }
.cta-panel__actions { display: flex; flex-wrap: wrap; gap: 12px; }

/* downloadable template cards */
.doc-card {
  height: 100%;
  display: flex; flex-direction: column;
  border-radius: var(--radius-lg);
  background: var(--surface); border: 1px solid var(--line);
  box-shadow: var(--shadow-xs);
  overflow: hidden;
  transition: transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s var(--ease);
}
.doc-card:hover { transform: translateY(-5px); box-shadow: var(--shadow); border-color: var(--brand-tint); }
/* a suggestion of a page, not a full mock preview */
.doc-card__page {
  position: relative;
  display: grid; place-items: center;
  padding: 34px 0 30px;
  background:
    repeating-linear-gradient(180deg, transparent 0 26px, var(--line-2) 26px 27px),
    var(--bg-soft);
  border-bottom: 1px solid var(--line);
  color: var(--brand-ink); font-size: 3rem; line-height: 1;
}
.doc-card__ext {
  position: absolute; right: 18px; top: 18px;
  padding: 4px 10px; border-radius: 6px;
  background: var(--brand); color: #fff;
  font-family: var(--font-head); font-size: .62rem; font-weight: 700; letter-spacing: .1em;
}
.doc-card__body { display: flex; flex-direction: column; flex: 1; padding: 26px 24px; }
.doc-card__title { font-family: var(--font-head); font-weight: 700; font-size: 1.08rem; color: var(--ink-2); margin-bottom: 9px; }
.doc-card__body p { font-size: .87rem; color: var(--muted); line-height: 1.65; }
.doc-card__meta {
  list-style: none; padding: 0; margin: 4px 0 20px;
  display: flex; flex-wrap: wrap; gap: 8px 18px;
}
.doc-card__body .btn { margin-top: auto; }   /* keeps the two cards' buttons level */
.doc-card__meta li {
  display: flex; align-items: center; gap: 6px;
  font-size: .78rem; font-weight: 600; color: var(--muted-2);
}
.doc-card__meta i { color: var(--brand-ink); }

/* horizontal process timeline */
.proc {
  list-style: none; padding: 0; margin: 0;
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px;
}
.proc__step { position: relative; text-align: center; }
.proc__num {
  position: relative; z-index: 1;
  width: 58px; height: 58px; margin: 0 auto 16px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: #fff; border: 2px solid var(--brand); color: var(--brand);
  font-family: var(--font-head); font-weight: 800; font-size: .95rem;
  box-shadow: var(--shadow-xs);
}
.proc__step:not(:last-child)::after {
  content: '';
  position: absolute; top: 28px; left: calc(50% + 40px); right: calc(-50% + 40px);
  height: 2px;
  background: repeating-linear-gradient(90deg, var(--brand-tint) 0 7px, transparent 7px 13px);
}
.proc__title { font-family: var(--font-head); font-weight: 700; font-size: 1rem; color: var(--ink-2); margin-bottom: 6px; }
.proc__body p { font-size: .86rem; color: var(--muted); margin: 0; line-height: 1.6; }

/* vertical review timeline */
.vtl { list-style: none; padding: 0; margin: 0; }
.vtl__item { position: relative; display: flex; gap: 20px; padding-bottom: 22px; }
.vtl__item:last-child { padding-bottom: 0; }
.vtl__item:not(:last-child)::before {
  content: '';
  position: absolute; top: 52px; bottom: 4px; left: 23px;
  width: 2px; background: var(--line);
}
.vtl__badge {
  flex: 0 0 48px; height: 48px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: #fff; border: 2px solid var(--line); color: var(--muted);
  font-family: var(--font-head); font-weight: 800; font-size: .85rem;
  position: relative; z-index: 1;
  transition: all .3s var(--ease);
}
.vtl__body {
  flex: 1;
  padding: 16px 20px;
  border-radius: var(--radius);
  background: var(--surface); border: 1px solid var(--line);
}
.vtl__title {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
  font-family: var(--font-head); font-weight: 700; font-size: 1rem; color: var(--ink-2);
  margin-bottom: 5px;
}
.vtl__body p { font-size: .87rem; color: var(--muted); margin: 0; line-height: 1.65; }
/* the pivotal stage of the review reads as the centre of the timeline */
.vtl__item--key .vtl__badge { background: var(--brand); border-color: var(--brand); color: #fff; box-shadow: var(--shadow-brand); }
.vtl__item--key .vtl__body { background: var(--brand-soft); border-color: var(--brand-tint); }
.vtl__tag {
  padding: 4px 10px; border-radius: 999px;
  background: var(--brand); color: #fff;
  font-family: var(--font-head); font-size: .6rem; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase;
}

/* help / contact band */
.help-band {
  display: flex; flex-wrap: wrap; align-items: center; gap: 20px;
  padding: clamp(22px, 3vw, 30px);
  border-radius: var(--radius-lg);
  background: var(--surface); border: 1px solid var(--line);
  box-shadow: var(--shadow-xs);
}
.help-band__ico {
  width: 52px; height: 52px; flex: 0 0 52px;
  display: grid; place-items: center; border-radius: 15px;
  background: var(--brand-soft); color: var(--brand-ink); font-size: 1.3rem;
}
.help-band__text { flex: 1 1 320px; }
.help-band__title { font-family: var(--font-head); font-weight: 700; font-size: 1.1rem; color: var(--ink-2); margin-bottom: 5px; }
.help-band__text p { font-size: .88rem; color: var(--muted); margin: 0; }
.help-band__mail {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 12px 20px; border-radius: 999px;
  background: var(--brand); color: #fff;
  font-family: var(--font-head); font-weight: 600; font-size: .9rem;
  transition: background .3s var(--ease);
  word-break: break-all;
}
.help-band__mail:hover { background: var(--brand-dark); color: #fff; }

@media (max-width: 991.98px) {
  .proc { grid-template-columns: repeat(2, 1fr); gap: 30px 22px; }
  /* the connector would point at the wrong neighbour once the grid wraps */
  .proc__step::after { display: none; }
}
@media (max-width: 767.98px) {
  /* horizontal timeline becomes a vertical one */
  .proc { grid-template-columns: 1fr; gap: 0; }
  .proc__step { display: flex; gap: 18px; text-align: left; padding-bottom: 26px; }
  .proc__step:last-child { padding-bottom: 0; }
  .proc__num { margin: 0; }
  .proc__step:not(:last-child)::after {
    display: block;
    top: 62px; bottom: 6px; left: 28px; right: auto;
    width: 2px; height: auto;
    background: repeating-linear-gradient(180deg, var(--brand-tint) 0 7px, transparent 7px 13px);
  }
  .cta-panel__actions { width: 100%; }
  .cta-panel__actions .btn { flex: 1 1 100%; justify-content: center; }
  .help-band__mail { width: 100%; justify-content: center; }
}
@media (max-width: 575.98px) {
  .steps__item { gap: 16px; }
  .steps__num { flex-basis: 46px; height: 46px; font-size: .85rem; }
  .steps__item:not(:last-child)::before { top: 48px; left: 22px; }
  .vtl__item { gap: 14px; }
  .vtl__badge { flex-basis: 40px; height: 40px; font-size: .78rem; }
  .vtl__item:not(:last-child)::before { top: 44px; left: 19px; }
}
@media (prefers-reduced-motion: reduce) {
  .gcard, .gcard__ico, .doc-card, .vtl__badge, .help-band__mail { transition: none; }
  .gcard:hover, .doc-card:hover { transform: none; }
}

/* soft pink ground for the "Why should you attend" section */
#why-attend { background:linear-gradient(45deg, black, #190608); }

/* ==========================================================================
   JOURNAL PUBLICATION SUPPORT PROGRAM  (index.php)
   ========================================================================== */
.jpack {
  height: 100%;
  display: flex; flex-direction: column;
  border-radius: var(--radius-lg);
  background: var(--surface);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-xs);
  overflow: hidden;
  transition: transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s var(--ease);
}
.jpack:hover { transform: translateY(-6px); box-shadow: var(--shadow); border-color: var(--brand-tint); }

/* the strip is always rendered, even when empty, so all four bodies line up */
.jpack__flag {
  display: flex; align-items: center; justify-content: center; gap: 7px;
  min-height: 34px;
  background: var(--bg-soft);
  color: #fff;
  font-family: var(--font-head); font-size: .78rem; font-weight: 700;
}
.jpack--gold .jpack__flag { background: linear-gradient(90deg, #d79a06, #f5b301); }
.jpack--teal .jpack__flag { background: linear-gradient(90deg, #12a3ac, #2bc0c8); }
.jpack__flag i { font-size: .8rem; }

.jpack__body {
  display: flex; flex-direction: column; align-items: center;
  flex: 1;
  padding: 26px 22px 24px;
  text-align: center;
}
.jpack__q {
  width: 78px; height: 78px; margin-bottom: 16px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: linear-gradient(150deg, var(--brand), var(--brand-deep));
  box-shadow: var(--shadow-brand);
  color: #fff;
  font-family: var(--font-head); font-weight: 800; font-size: 1.6rem;
  letter-spacing: -.02em;
}
.jpack--gold .jpack__q { background: linear-gradient(150deg, #f5b301, #d79a06); box-shadow: 0 12px 26px rgba(215, 154, 6, .38); }
.jpack--teal .jpack__q { background: linear-gradient(150deg, #2bc0c8, #12a3ac); box-shadow: 0 12px 26px rgba(18, 163, 172, .34); }

.jpack__title { font-family: var(--font-head); font-weight: 700; font-size: 1.02rem; color: var(--ink-2); margin-bottom: 12px; }
.jpack__pill {
  padding: 7px 18px; margin-bottom: 14px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--bg-soft);
  font-family: var(--font-head); font-size: .68rem; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--ink-2);
}
.jpack__text { font-size: .84rem; line-height: 1.65; color: var(--muted); margin-bottom: 20px; }
.jpack__cta { width: 100%; margin-top: auto; }   /* buttons level across the row */

@media (prefers-reduced-motion: reduce) {
  .jpack { transition: none; }
  .jpack:hover { transform: none; }
}

/* ==========================================================================
   SDG SESSION CAROUSEL  (index.php)
   ========================================================================== */
/* The section itself carries the dark ground now, so the rail is transparent.
   The inline padding is the gutter the arrows live in — see .sdg-car__nav,
   which anchors to Bootstrap's position:relative .carousel, not to this box. */
.sdg-car { position: relative; padding: 8px 0; }
@media (min-width: 768px) { .sdg-car { padding-inline: 62px; } }
.sdg-car .carousel-item { padding-bottom: 8px; }

.sdg-sess {
  padding: 15px 18px;
  border-radius: var(--radius);
  background: rgba(255, 255, 255, .045);
  border: 1px solid rgba(255, 255, 255, .1);
}
.sdg-sess + .sdg-sess { margin-top: 10px; }
/* the title now lives inside the left column, above Mapped SDGs */
.sdg-sess__head { display: flex; align-items: center; gap: 11px; margin-bottom: 10px; }
.sdg-sess__ico {
  width: 36px; height: 36px; flex: 0 0 36px;
  display: grid; place-items: center; border-radius: 10px;
  background: rgba(223, 37, 49, .18); color: #ff5a63; font-size: .95rem;
}
.sdg-sess__title {
  font-family: var(--font-head); font-weight: 700; font-size: .98rem;
  color: #fff; margin: 0;
}
/* Left column: session title + Mapped SDGs. Right column: Focus Areas. */
.sdg-sess__cols { display: grid; grid-template-columns: 1.4fr 1fr; gap: 8px 26px; align-items: start; }
.sdg-sess__label {
  display: block;
  font-family: var(--font-head); font-size: .6rem; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase;
  color: rgba(255, 255, 255, .45);
  margin: 5px 0 4px;
}

/* SDG badge art on the left, the goal wording on the right — laid out in a row
   so a session with two goals shows them side by side, wrapping only if the
   column runs out of room (the one three-goal session). */
.sdg-map { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 9px 18px; }
.sdg-map li {
  display: flex; align-items: center; gap: 9px;
  flex: 0 1 auto; min-width: 0;
}
.sdg-map img {
  width: 38px; height: 38px; flex: 0 0 38px;
  border-radius: 7px; object-fit: cover;
}
.sdg-map span { display: flex; flex-direction: column; line-height: 1.25; }
.sdg-map b { font-family: var(--font-head); font-size: .78rem; color: #fff; }
.sdg-map small { font-size: .72rem; color: rgba(255, 255, 255, .62); }

.sdg-focus { list-style: none; padding: 0; margin: 0; }
.sdg-focus li {
  display: flex; align-items: flex-start; gap: 3px;
  margin-bottom: 5px;
  font-size: .8rem; color: rgba(255, 255, 255, .76);
}
.sdg-focus li:last-child { margin-bottom: 0; }
.sdg-focus i { color: #ff5a63; font-size: 1rem; line-height: 1.2; flex-shrink: 0; }

/* round chevron controls, replacing Bootstrap's background-image arrows */
.sdg-car__nav {
  width: 44px; height: 44px;
  top: 50%; transform: translateY(-50%);
  display: grid; place-items: center;
  border-radius: 50%;
  background: rgba(255, 255, 255, .1);
  border: 1px solid rgba(255, 255, 255, .22);
  color: #fff; font-size: 1.1rem;
  opacity: 1;
  transition: background .3s var(--ease), border-color .3s var(--ease);
}
.sdg-car__nav:hover, .sdg-car__nav:focus-visible { background: var(--brand); border-color: var(--brand); color: #fff; opacity: 1; }
/* negative, so they sit in .sdg-car's gutter rather than on top of the cards */
.carousel-control-prev.sdg-car__nav { left: -53px; }
.carousel-control-next.sdg-car__nav { right: -53px; }

.sdg-car__dots { position: static; margin: 18px 0 0; }
.sdg-car__dots [data-bs-target] {
  width: 26px; height: 4px; border-radius: 4px;
  background: rgba(255, 255, 255, .3); border: 0; opacity: 1;
}
.sdg-car__dots .active { background: var(--brand); }

/* keep SDG-left / focus-right down to small tablets before stacking */
@media (max-width: 575.98px) {
  .sdg-sess__cols { grid-template-columns: 1fr; gap: 12px; }
}
@media (max-width: 767.98px) {
  .sdg-car { padding: 4px 0; }
  /* the arrows would sit on top of the cards at this width */
  .sdg-car__nav { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .sdg-car__nav { transition: none; }
}

/* ==========================================================================
   JOURNALS & PUBLICATIONS
   ========================================================================== */
/* browser-chrome frame, so the section has a visual anchor without shipping
   an image asset that does not exist yet */
.mockup {
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
  background: var(--surface);
}
.mockup__bar {
  display: flex; align-items: center; gap: 7px;
  padding: 12px 14px;
  background: var(--bg-soft);
  border-bottom: 1px solid var(--line);
}
.mockup__dot { width: 10px; height: 10px; border-radius: 50%; background: var(--line); }
.mockup__dot:nth-child(1) { background: #ff5f57; }
.mockup__dot:nth-child(2) { background: #febc2e; }
.mockup__dot:nth-child(3) { background: #28c840; }
.mockup__url {
  flex: 1; margin-left: 10px; padding: 5px 12px;
  border-radius: 999px; background: var(--surface); border: 1px solid var(--line);
  font-size: .7rem; color: var(--muted-2);
}
.mockup__screen {
  position: relative;
  min-height: 260px;
  display: grid; place-items: center;
  padding: 34px 26px;
  background:
    radial-gradient(520px 260px at 70% 30%, rgba(223, 37, 49, .34), transparent 62%),
    radial-gradient(420px 240px at 20% 80%, rgba(223, 37, 49, .18), transparent 60%),
    linear-gradient(155deg, #0a0a0d, #16070a 60%, #0a0a0d);
  color: #fff; text-align: center;
}
.mockup__screen h3 { font-size: 1.25rem; color: #fff; margin-bottom: 8px; }
.mockup__screen p { font-size: .86rem; color: rgba(255, 255, 255, .74); margin: 0; max-width: 34ch; }


/* numbered accordion, for the step-by-step publishing sequence */
.acc-num {
  flex: 0 0 34px;
  font-family: var(--font-head); font-weight: 800; font-size: .8rem;
  color: var(--brand-ink); letter-spacing: .04em;
}
.faq-acc .accordion-button.collapsed .acc-num { color: var(--muted-2); }
.faq-acc .accordion-body ul { list-style: none; padding: 0; margin: 0; }
.faq-acc .accordion-body ul li {
  position: relative; padding-left: 18px; margin-bottom: 9px;
}
.faq-acc .accordion-body ul li:last-child { margin-bottom: 0; }
.faq-acc .accordion-body ul li::before {
  content: ''; position: absolute; left: 0; top: .62em;
  width: 6px; height: 6px; border-radius: 50%; background: var(--brand-tint);
}

.jrnl-table thead th {
  font-family: var(--font-head); font-size: .72rem; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase; color: var(--muted-2);
  border-bottom-color: var(--line);
}
.jrnl-table td { font-size: .87rem; color: var(--ink-3); border-color: var(--line-2); }
.jrnl-table td:first-child { color: var(--brand-ink); font-weight: 700; width: 48px; }
.jrnl-table td:last-child { white-space: nowrap; font-size: .82rem; color: var(--muted); }
.jrnl-table tbody tr:last-child td { border-bottom: 0; }

.indexed-by {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: 14px 34px;
  padding-top: 26px; margin-top: 30px;
  border-top: 1px solid var(--line);
}
.indexed-by__label {
  width: 100%; text-align: center;
  font-family: var(--font-head); font-size: .68rem; font-weight: 700;
  letter-spacing: .18em; text-transform: uppercase; color: var(--muted-2);
}
.indexed-by__item {
  display: inline-flex; align-items: center; gap: 9px;
  font-family: var(--font-head); font-weight: 700; font-size: 1rem;
  color: var(--muted);
}
.indexed-by__item i { color: var(--brand-ink); font-size: 1.15rem; }

/* pull quote that opens the journey section */
.quote-lead {
  position: relative;
  padding: 30px 32px;
  border-radius: var(--radius-lg);
  background: var(--brand-soft);
  border: 1px solid var(--brand-tint);
  font-size: .95rem; line-height: 1.8; color: var(--ink-3);
}
.quote-lead i { color: var(--brand-ink); font-size: 1.4rem; }

/* ---------- .proc--icons: an icon inside the dot, number as a corner chip ----------
   Scoped to this modifier so the plain 4-step .proc on the guidelines page is
   untouched. The larger 74px dot moves the connector, so its offsets are
   re-derived here: 37px is the new centre, 48px clears the new radius. */
.proc--icons .proc__num {
  width: 74px; height: 74px;
  font-size: 1.45rem;
  background: var(--brand-soft);
  border-color: var(--brand-tint);
  color: var(--brand-ink);
  transition: transform .55s var(--ease), background .55s var(--ease),
              color .55s var(--ease), border-color .55s var(--ease), box-shadow .55s var(--ease);
}
.proc--icons .proc__n {
  position: absolute; top: -5px; right: -5px;
  min-width: 27px; height: 27px; padding: 0 7px;
  display: grid; place-items: center;
  border-radius: 999px;
  background: #fff; border: 2px solid var(--brand);
  color: var(--brand-ink);
  font-family: var(--font-head); font-weight: 800; font-size: .66rem;
  transition: background .55s var(--ease), color .55s var(--ease);
}
.proc--icons .proc__step:not(:last-child)::after {
  top: 37px;
  left: calc(50% + 48px); right: calc(-50% + 48px);
}

/* the spotlight that cycles through the steps */
.proc--icons .proc__step { transition: transform .55s var(--ease); transform-origin: center top; }
.proc--icons .proc__step.is-zoom { transform: scale(1.07); z-index: 2; }
.proc--icons .proc__step.is-zoom .proc__num {
  background: var(--brand); border-color: var(--brand); color: #fff;
  box-shadow: var(--shadow-brand);
}
.proc--icons .proc__step.is-zoom .proc__title { color: var(--brand-ink); }

/* Five steps wrapped 3 + 2. The rail has to survive the row break, so an
   elbow connector bridges step 3 down and back across to step 4.
   Geometry: columns are (100% - 2*gap)/3 wide, so a dot centre sits
   (100% - 2*gap)/6 in from its edge — that is where the elbow's arms land. */
.proc--wrap { grid-template-columns: repeat(3, 1fr); }

/* Only the 3-across layout needs the elbow; below 1200px the rail is a single
   vertical line and already runs 3 → 4 on its own. */
@media (min-width: 1200px) {
  .proc--wrap .proc__link { grid-column: 1 / -1; position: relative; height: 54px; }
  .proc--wrap .proc__link::before {
    content: '';
    position: absolute;
    left: calc((100% - 44px) / 6);
    right: calc((100% - 44px) / 6);
    top: 0; bottom: 0;
    border-right: 2px dashed var(--brand-tint);
    border-bottom: 2px dashed var(--brand-tint);
    border-bottom-right-radius: 20px;
  }
  /* short stub carrying the line down into step 4's dot */
  .proc--wrap .proc__link::after {
    content: '';
    position: absolute;
    left: calc((100% - 44px) / 6);
    top: 100%; height: 22px;
    border-left: 2px dashed var(--brand-tint);
  }
  /* step 3 ends its row — a sideways connector would point at nothing */
  .proc--wrap .proc__step--rowend::after { display: none; }
}
@media (max-width: 1199.98px) {
  .proc--wrap { grid-template-columns: 1fr; gap: 0; }
  .proc--wrap .proc__link { display: none; }   /* the vertical rail links 3 → 4 already */
  .proc--wrap .proc__step { display: flex; gap: 18px; text-align: left; padding-bottom: 26px; }
  .proc--wrap .proc__step:last-child { padding-bottom: 0; }
  .proc--wrap .proc__num { margin: 0; flex-shrink: 0; }
  .proc--wrap .proc__step:not(:last-child)::after {
    display: block;
    top: 62px; bottom: 6px; left: 28px; right: auto;
    width: 2px; height: auto;
    background: repeating-linear-gradient(180deg, var(--brand-tint) 0 7px, transparent 7px 13px);
  }
  /* vertical rail: re-centre on the 74px dot and scale from the left edge so
     the zoom cannot push the card off the right of the screen */
  .proc--wrap.proc--icons .proc__step:not(:last-child)::after { top: 80px; left: 36px; }
  .proc--icons .proc__step { transform-origin: left center; }
  .proc--icons .proc__step.is-zoom { transform: scale(1.03); }
}

/* publishing partner cards, on the dark band */
.section--dark {
  background: linear-gradient(160deg, #0b0b0e, #16070a 55%, #0b0b0e);
  color: #fff;
}
.section--dark .section-title { color: #fff; }
.section--dark .section-lead { color: rgba(255, 255, 255, .7); }
.partner-card {
  height: 100%;
  display: flex; flex-direction: column;
  padding: 26px 22px;
  border-radius: var(--radius-lg);
  background: var(--surface);
  border: 1px solid rgba(255, 255, 255, .1);
  box-shadow: var(--shadow-lg);
  transition: transform .3s var(--ease);
}
.partner-card:hover { transform: translateY(-6px); }
.partner-card__ico {
  width: 46px; height: 46px; margin-bottom: 16px;
  display: grid; place-items: center; border-radius: 13px;
  background: var(--brand-soft); color: var(--brand-ink); font-size: 1.1rem;
}
.partner-card__title { font-family: var(--font-head); font-weight: 700; font-size: 1.05rem; color: var(--ink-2); margin-bottom: 9px; }
.partner-card__text { font-size: .83rem; line-height: 1.6; color: var(--muted); margin-bottom: 16px; }
.partner-card__tags { margin: 0 0 18px; padding: 0; list-style: none; }
.partner-card__tags li {
  font-family: var(--font-head); font-size: .64rem; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase; color: var(--brand-ink);
  margin-bottom: 5px;
}
.partner-card .btn { margin-top: auto; }

@media (max-width: 575.98px) {
  .mockup__screen { min-height: 200px; padding: 26px 20px; }
}
@media (prefers-reduced-motion: reduce) {
  .partner-card { transition: none; }
  .partner-card:hover { transform: none; }
}

/* ==========================================================================
   PAYMENT METHODS
   ========================================================================== */
/* .alert-band with an action pinned to the right */
.alert-band--flex {
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 20px;
}
.alert-band--flex > div { flex: 1 1 420px; }
.btn-phone {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 12px 22px; border-radius: 999px;
  background: #fff; border: 1px solid var(--brand-tint);
  color: var(--brand-ink);
  font-family: var(--font-head); font-weight: 700; font-size: .92rem;
  white-space: nowrap;
  box-shadow: var(--shadow-xs);
  transition: background .3s var(--ease), color .3s var(--ease);
}
.btn-phone:hover { background: var(--brand); color: #fff; }

/* the three method cards build on .gcard */
.pay-card { position: relative; }
.pay-card__cta { margin-top: auto; padding-top: 18px; }
.pay-card__flag {
  position: absolute; top: 0; right: 0;
  padding: 6px 12px;
  border-radius: 0 var(--radius-lg) 0 var(--radius);
  background: var(--brand); color: #fff;
  font-family: var(--font-head); font-size: .58rem; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase;
}
.pay-card--featured { border-color: var(--brand-tint); }

/* bank details */
.bank-grid {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 2px 40px;
}
.bank-field { padding: 14px 0; border-bottom: 1px solid var(--line-2); }
.bank-field__label {
  display: block;
  font-size: .68rem; font-weight: 700; letter-spacing: .12em;
  text-transform: uppercase; color: var(--muted-2);
  margin-bottom: 5px;
}
.bank-field__value {
  display: flex; align-items: center; gap: 10px;
  font-size: .96rem; font-weight: 600; color: var(--ink-2);
  word-break: break-word;
}
/* codes and the account number read as data, not prose */
.bank-field__value--mono {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  letter-spacing: .04em;
}
.bank-copy {
  margin-left: auto; flex-shrink: 0;
  width: 32px; height: 32px;
  display: grid; place-items: center;
  border: 1px solid var(--line); border-radius: 9px;
  background: var(--surface); color: var(--muted);
  font-size: .85rem;
  transition: border-color .25s var(--ease), color .25s var(--ease), background .25s var(--ease);
}
.bank-copy:hover { border-color: var(--brand); color: var(--brand-ink); background: var(--brand-soft); }
.bank-copy.is-done { border-color: var(--brand); background: var(--brand); color: #fff; }

@media (max-width: 767.98px) {
  .bank-grid { grid-template-columns: 1fr; gap: 0; }
  .alert-band--flex .btn-phone { width: 100%; justify-content: center; }
}
@media (prefers-reduced-motion: reduce) {
  .btn-phone, .bank-copy { transition: none; }
}

/* ==========================================================================
   FAQ PAGE
   ========================================================================== */
/* Bootstrap joins accordion items into one block; these are separate cards. */
.faq-acc .accordion-item {
  margin-bottom: 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius) !important;
  background: var(--surface);
  overflow: hidden;
  box-shadow: var(--shadow-xs);
}
.faq-acc .accordion-item:last-child { margin-bottom: 0; }
.faq-acc .accordion-button {
  padding: 20px 22px;
  font-family: var(--font-head); font-weight: 600; font-size: .98rem;
  color: var(--ink-2);
  background: var(--surface);
  border-radius: var(--radius) !important;
  box-shadow: none;
}
.faq-acc .accordion-button:not(.collapsed) { color: var(--brand); background: #fff; }
.faq-acc .accordion-button:focus { box-shadow: none; border-color: transparent; }
.faq-acc .accordion-button::after {
  width: 1.1rem; height: 1.1rem; background-size: 1.1rem;
  transition: transform .3s var(--ease);
}
.faq-acc .accordion-body {
  padding: 0 22px 20px;
  font-size: .9rem; line-height: 1.75; color: var(--muted);
}
.faq-acc .accordion-body a { font-weight: 600; }

.faq-aside {
  position: sticky; top: calc(var(--header-h) + 20px);
  padding: 28px 26px;
  border-radius: var(--radius-lg);
  background: var(--bg-soft);
  border: 1px solid var(--line);
}
.faq-aside__title {
  display: flex; align-items: center; gap: 10px;
  font-family: var(--font-head); font-weight: 700; font-size: 1.1rem;
  color: var(--brand-ink); margin-bottom: 12px;
}
.faq-aside p { font-size: .88rem; line-height: 1.7; color: var(--muted); margin-bottom: 20px; }
.faq-aside__meta { list-style: none; padding: 0; margin: 18px 0 0; }
.faq-aside__meta li {
  display: flex; align-items: center; gap: 9px;
  font-size: .84rem; margin-bottom: 9px; color: var(--muted);
}
.faq-aside__meta li:last-child { margin-bottom: 0; }
.faq-aside__meta i { color: var(--brand-ink); }

/* Two-up accordion: the row supplies the spacing, so drop the stacked margin.
   Every selector here doubles the class (.faq-acc.faq-acc--*) on purpose — the
   base .faq-acc rules live further down the sheet, so a single-class modifier
   would lose to them at equal specificity. */
.faq-acc.faq-acc--grid .accordion-item { margin-bottom: 0; }

/* Dark card surface. The chevron is a background-image SVG, so it is inverted
   rather than recoloured; brand red is lifted to #ff5a63 because #df2531 only
   reaches 3.9:1 against this background. */
.faq-acc.faq-acc--dark .accordion-item {
  background: #14141a;
  border-color: rgba(255, 255, 255, .1);
  box-shadow: var(--shadow-sm);
}
.faq-acc.faq-acc--dark .accordion-button { background: #14141a; color: #fff; }
/* Open state is signalled by the number chip turning red and the chevron
   rotating; the label stays white, which reads better on this surface. */
.faq-acc.faq-acc--dark .accordion-button:not(.collapsed) { background: #14141a; }
.faq-acc.faq-acc--dark .accordion-button::after { filter: invert(1) grayscale(1) brightness(1.9); }
.faq-acc.faq-acc--dark .accordion-button:focus-visible { outline-offset: -3px; }
.faq-acc.faq-acc--dark .accordion-body { color: rgba(255, 255, 255, .74); }
.faq-acc.faq-acc--dark .accordion-body a { color: #ff8b91; }
.faq-acc.faq-acc--dark .accordion-body a:hover { color: #fff; }
.faq-acc.faq-acc--dark .accordion-body ul li::before { background: rgba(255, 90, 99, .7); }
.faq-acc.faq-acc--dark .acc-num { color: #ff5a63; }
.faq-acc.faq-acc--dark .accordion-button.collapsed .acc-num { color: rgba(255, 255, 255, .42); }

/* ==========================================================================
   REGISTRATION GUIDELINES
   ========================================================================== */
.refund-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.refund-stat {
  padding: 20px 16px;
  border-radius: var(--radius);
  background: var(--bg-soft);
  border: 1px solid var(--line);
  text-align: center;
}
.refund-stat__pct {
  display: block;
  font-family: var(--font-head); font-weight: 800; font-size: 1.9rem;
  color: var(--brand-ink); line-height: 1.1;
}
.refund-stat--none .refund-stat__pct { color: var(--muted-2); }
.refund-stat__label {
  display: block;
  font-size: .74rem; font-weight: 600; letter-spacing: .04em;
  color: var(--muted); margin: 4px 0 8px;
}
.refund-stat__note { font-size: .8rem; line-height: 1.5; color: var(--muted); margin: 0; }

/* Quieter sibling of .alert-band, for a note that is not an alert.
   Doubled class: .alert-band is defined later in this file, so a single-class
   modifier would lose the background at equal specificity. */
.alert-band.alert-band--muted {
  background: var(--bg-soft);
  border-color: var(--line);
  border-left-color: var(--brand);
}
.alert-band.alert-band--muted h5 { color: var(--ink-2); font-size: .92rem; }
.alert-band.alert-band--muted h5 i { color: var(--brand-ink); }

.deliver-list { list-style: none; padding: 0; margin: 0; }
.deliver-list li {
  display: flex; align-items: center; gap: 12px;
  padding: 11px 0;
  border-bottom: 1px solid var(--line-2);
  font-size: .89rem; color: var(--ink-3);
}
.deliver-list li:last-child { border-bottom: 0; padding-bottom: 0; }
.deliver-list li:first-child { padding-top: 0; }
.deliver-list i {
  width: 32px; height: 32px; flex: 0 0 32px;
  display: grid; place-items: center; border-radius: 9px;
  background: var(--brand-soft); color: var(--brand-ink); font-size: .9rem;
}

.assist-card {
  padding: 30px 26px;
  border-radius: var(--radius-lg);
  background: linear-gradient(160deg, var(--brand), var(--brand-deep));
  color: #fff; text-align: center;
  box-shadow: var(--shadow-brand);
}
.assist-card__ico {
  width: 52px; height: 52px; margin: 0 auto 16px;
  display: grid; place-items: center; border-radius: 15px;
  background: rgba(255, 255, 255, .16); color: #fff; font-size: 1.3rem;
}
.assist-card__title { font-family: var(--font-head); font-weight: 700; font-size: 1.15rem; margin-bottom: 8px; }
.assist-card p { font-size: .85rem; line-height: 1.65; color: rgba(255, 255, 255, .88); margin-bottom: 20px; }
.assist-card__mail {
  display: block;
  padding: 12px 18px; border-radius: 10px;
  background: #fff; color: var(--brand);
  font-family: var(--font-head); font-weight: 700; font-size: .9rem;
  word-break: break-all;
  transition: background .3s var(--ease), color .3s var(--ease);
}
.assist-card__mail:hover { background: var(--ink-ground); color: #fff; }

.reg-sticky { position: sticky; top: calc(var(--header-h) + 20px); }

@media (max-width: 575.98px) {
  .refund-grid { grid-template-columns: 1fr; }
}
@media (max-width: 991.98px) {
  .faq-aside, .reg-sticky { position: static; }
}
@media (prefers-reduced-motion: reduce) {
  .faq-acc .accordion-button::after, .assist-card__mail { transition: none; }
}

/* ==========================================================================
   SUB-PAGE HEADER  (pages that set $lightTop — no dark hero to sit under)
   ========================================================================== */
.page-head {
  /* the header is fixed and solid on these pages, so clear it explicitly */
  padding: calc(var(--header-h) + 42px) 0 40px;
  background:
    radial-gradient(720px 300px at 50% -30%, var(--brand-soft), transparent 70%),
    var(--bg);
  border-bottom: 1px solid var(--line);
  text-align: center;
}
.page-head__crumbs { margin-bottom: 16px; }
.page-head__crumbs ol {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-wrap: wrap; justify-content: center; gap: 8px;
  font-size: .8rem; color: var(--muted-2);
}
.page-head__crumbs a { color: var(--muted); }
.page-head__crumbs a:hover { color: var(--brand-ink); }
.page-head__crumbs li[aria-current] { color: var(--ink-2); font-weight: 600; }
.page-head__title {
  font-family: var(--font-head); font-weight: 800;
  font-size: clamp(1.75rem, 4vw, 2.7rem);
  letter-spacing: -.03em; line-height: 1.15;
  margin: 12px 0 0;
}
.page-head__title span { color: var(--brand-ink); }
.page-head .rule { margin: 18px auto 0; }

/* ---------- banner variant ----------
   Drop `page-head--banner` on the section and set $lightTop = false so the nav
   starts transparent over it. The artwork is decorative (no text of its own),
   so it lives in CSS rather than as an <img>. */
.page-head--banner {
  position: relative;
  /* the overlay keeps the type legible over the bright red glow the artwork
     carries top-right and bottom-left */
  padding: calc(var(--header-h) + 58px) 0 60px;   /* a little more room than the plain band */
  background:
    linear-gradient(180deg, rgba(6, 6, 8, .58) 0%, rgba(6, 6, 8, .42) 55%, rgba(6, 6, 8, .66) 100%),
    url('../../img/banner.png') center / cover no-repeat,
    var(--bg-dark);
  border-bottom: 0;
  color: #fff;
}
.page-head--banner .page-head__title { color: #fff; }
.page-head--banner .page-head__title span { color: #ff5a63; }  /* lifted off --brand for contrast on black */
.page-head--banner .page-head__crumbs { color: rgba(255, 255, 255, .62); }
.page-head--banner .page-head__crumbs a { color: rgba(255, 255, 255, .82); }
.page-head--banner .page-head__crumbs a:hover { color: #fff; }
.page-head--banner .page-head__crumbs li[aria-current] { color: #fff; }
.page-head--banner .section-lead { color: rgba(255, 255, 255, .8); }

.lead-para { font-size: 1rem; line-height: 1.85; color: var(--muted); }

/* conference context strip above a form */
.conf-fact {
  height: 100%;
  display: flex; align-items: flex-start; gap: 14px;
  padding: 20px 22px;
  border-radius: var(--radius);
  background: var(--surface); border: 1px solid var(--line);
  box-shadow: var(--shadow-xs);
}
.conf-fact__ico {
  width: 42px; height: 42px; flex: 0 0 42px;
  display: grid; place-items: center; border-radius: 12px;
  background: var(--brand-soft); color: var(--brand-ink); font-size: 1.05rem;
}
.conf-fact__label {
  display: block;
  font-family: var(--font-head); font-size: .68rem; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase; color: var(--muted-2);
  margin-bottom: 3px;
}
.conf-fact strong { font-size: .9rem; color: var(--ink-2); line-height: 1.45; }

/* grouping heading inside a long form */
.form-legend {
  display: flex; align-items: center; gap: 10px;
  font-family: var(--font-head); font-weight: 700; font-size: .95rem;
  color: var(--ink-2);
  margin: 0 0 2px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--line);
}
.form-legend i { color: var(--brand-ink); font-size: 1.05rem; }
.form-hint {
  display: flex; align-items: flex-start; gap: 7px;
  margin: 8px 0 0;
  font-size: .8rem; color: var(--muted);
}
.form-hint i { color: var(--brand-ink); margin-top: .2em; }

/* file upload */
.dropzone {
  position: relative;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 4px;
  width: 100%;
  padding: 34px 24px;
  border: 2px dashed var(--line);
  border-radius: var(--radius);
  background: var(--bg-soft);
  text-align: center;
  cursor: pointer;
  transition: border-color .28s var(--ease), background .28s var(--ease);
}
.dropzone:hover, .dropzone.is-over { border-color: var(--brand); background: var(--brand-soft); }
.dropzone.is-filled { border-style: solid; border-color: var(--brand); background: var(--surface); }
/* the input stays focusable for keyboard users, it is just not drawn */
.dropzone__input {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  opacity: 0; cursor: pointer;
}
.dropzone__input:focus-visible + .dropzone__ico { outline: 3px solid var(--brand); outline-offset: 4px; border-radius: 50%; }
.dropzone__ico { font-size: 1.9rem; color: var(--brand-ink); line-height: 1; margin-bottom: 6px; }
.dropzone__title { font-family: var(--font-head); font-weight: 700; font-size: .95rem; color: var(--ink-2); }
.dropzone__hint { font-size: .8rem; color: var(--muted); }
.dropzone__file {
  margin-top: 10px; padding: 6px 14px;
  border-radius: 999px; background: var(--brand-soft); color: var(--brand-ink-deep);
  font-size: .8rem; font-weight: 600;
  word-break: break-all;
}

@media (prefers-reduced-motion: reduce) {
  .dropzone { transition: none; }
}

.form-card {
  padding: clamp(26px, 4vw, 44px);
  border-radius: var(--radius-xl);
  background: var(--surface);
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
}
.form-label {
  font-family: var(--font-head); font-weight: 600; font-size: .83rem;
  color: var(--ink-2); margin-bottom: 7px;
}
.form-label .req { color: var(--brand-ink); }
.form-control, .form-select {
  border: 1.5px solid var(--line);
  border-radius: 12px;
  padding: 12px 16px;
  font-size: .92rem;
  transition: all .26s var(--ease);
  background-color: var(--bg-soft);   /* not the shorthand: it would strip .form-select's caret */
}
.form-control:focus, .form-select:focus {
  border-color: var(--brand);
  box-shadow: 0 0 0 4px rgba(223, 37, 49, .12);
  background-color: var(--surface);
}
.form-control::placeholder { color: var(--muted-2); }

/* ==========================================================================
   SERVICES
   ========================================================================== */
.svc-card {
  height: 100%;
  padding: 30px 26px;
  border-radius: var(--radius-lg);
  background: var(--surface); border: 1px solid var(--line);
  box-shadow: var(--shadow-xs);
  transition: all .34s var(--ease);
  position: relative; overflow: hidden;
}
.svc-card::before {
  content: ''; position: absolute; inset: auto 0 0 0; height: 4px;
  background: linear-gradient(90deg, var(--brand), var(--brand-deep));
  transform: scaleX(0); transform-origin: left;
  transition: transform .4s var(--ease);
}
.svc-card:hover::before { transform: scaleX(1); }
.svc-card:hover { transform: translateY(-8px); box-shadow: var(--shadow); border-color: var(--brand-tint); }
.svc-card__ico {
  width: 54px; height: 54px; margin-bottom: 18px;
  display: grid; place-items: center; border-radius: 16px;
  background: var(--ink-ground); color: #fff; font-size: 1.35rem;
  transition: all .34s var(--ease);
}
.svc-card:hover .svc-card__ico { background: var(--brand); }
.svc-card h4 { font-size: 1.05rem; margin-bottom: 9px; }
.svc-card p { font-size: .87rem; color: var(--muted); margin-bottom: 16px; }
.svc-card .go {
  font-family: var(--font-head); font-weight: 600; font-size: .85rem;
  display: inline-flex; align-items: center; gap: 7px;
}
.svc-card .go i { transition: transform .3s var(--ease); }
.svc-card:hover .go i { transform: translateX(5px); }

/* ==========================================================================
   CTA BANDS
   ========================================================================== */
.cta-band {
  border-radius: var(--radius-xl);
  padding: clamp(34px, 5vw, 58px);
  background:
    radial-gradient(620px 380px at 85% 15%, rgba(223, 37, 49, .32), transparent 62%),
    linear-gradient(135deg, #0b0b0e, #1c0507);
  color: #fff;
  position: relative; overflow: hidden;
}
.cta-band::after {
  content: ''; position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px);
  background-size: 48px 48px;
  mask-image: radial-gradient(circle at 70% 30%, #000, transparent 75%);
  -webkit-mask-image: radial-gradient(circle at 70% 30%, #000, transparent 75%);
  pointer-events: none;
}
.cta-band > * { position: relative; z-index: 1; }
.cta-band h2 { color: #fff; font-size: clamp(1.5rem, 3.4vw, 2.35rem); }
.cta-band p { color: rgba(255, 255, 255, .76); }

/* ---------- get involved: cards on a photographic ground ---------- */
.join-band {
  position: relative;
  background: url('../../img/banner2.png') center / cover no-repeat fixed, var(--bg-dark);
}
/* Scrim, so the card text keeps its contrast over the photograph. The shot is
   already dark, so this is lighter than a scrim over bright artwork would be —
   enough to hold contrast while the skyline still reads. */
.join-band::before {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(6, 6, 8, .8) 0%, rgba(6, 6, 8, .62) 45%, rgba(6, 6, 8, .82) 100%);
}
/* background-attachment:fixed is janky on touch — pin it per-section instead */
@media (max-width: 991.98px), (prefers-reduced-motion: reduce) {
  .join-band { background-attachment: scroll; }
}
.join-band > .container { position: relative; z-index: 1; }
.join-band .section-title { color: #fff; }

.join-card {
  height: 100%;
  display: flex; flex-direction: column;
  padding: 30px 26px;
  border-radius: var(--radius-lg);
  background: rgba(255, 255, 255, .06);
  border: 1px solid rgba(255, 255, 255, .12);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  text-align: center;
  transition: transform .3s var(--ease), background .3s var(--ease), border-color .3s var(--ease);
}
.join-card:hover {
  transform: translateY(-6px);
  background: rgba(255, 255, 255, .1);
  border-color: var(--brand);
}
.join-card__ico {
  width: 58px; height: 58px; margin: 0 auto 18px;
  display: grid; place-items: center; border-radius: 17px;
  background: rgba(223, 37, 49, .2);
  border: 1px solid rgba(255, 255, 255, .14);
  color: #ff5a63; font-size: 1.45rem;
  transition: background .3s var(--ease), color .3s var(--ease);
}
.join-card:hover .join-card__ico { background: var(--brand); color: #fff; }
.join-card__title {
  font-family: var(--font-head); font-weight: 700; font-size: 1.05rem;
  color: #fff; margin-bottom: 10px;
}
.join-card p {
  font-size: .86rem; line-height: 1.65;
  color: rgba(255, 255, 255, .72);
  margin-bottom: 20px;
}
/* buttons land on one line whatever the copy length above them */
.join-card .btn { margin-top: auto; align-self: center; }

@media (prefers-reduced-motion: reduce) {
  .join-card, .join-card__ico { transition: none; }
  .join-card:hover { transform: none; }
}

/* ---------- welcome collage ----------
   A 12x10 grid the four pieces are placed onto by grid-area, which is what
   produces the overlap without any absolute positioning. */
/* A tiled 4x4 layout rather than an overlapping stack: a tall lead photograph
   down the left, the second photograph top-right, and the two figures as wide
   bars beneath it. Nothing sits on top of anything else, so no faces are
   covered and every number is readable against its own ground. */
.wcollage {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(4, 1fr);
  gap: clamp(10px, 1.8vw, 16px);
  aspect-ratio: 1 / 1;
  max-width: 560px;
  margin-inline: auto;
}
.wcollage__shot {
  margin: 0; overflow: hidden;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
}
.wcollage__shot img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform .6s var(--ease);
}
.wcollage__shot:hover img { transform: scale(1.06); }

/* The lead shot is a wide group photograph, so it gets the full-width banner
   slot — a tall crop would cut half the delegates out of frame. */
.wcollage__shot--a { grid-area: 1 / 1 / 3 / 5; }   /* wide lead photo, on top */
.wcollage__shot--b { grid-area: 3 / 1 / 5 / 3; }   /* second photo, lower left */

/* the figures read as wide bars, so the label sits beside the number */
.wcollage__stat {
  display: flex; align-items: center; gap: 12px;
  padding: clamp(12px, 2vw, 18px);
  border-radius: var(--radius-lg);
  color: #fff;
  box-shadow: var(--shadow);
}
.wcollage__stat b {
  font-family: var(--font-head); font-weight: 800;
  font-size: clamp(1.5rem, 4vw, 2.1rem);
  line-height: 1; letter-spacing: -.03em;
  flex-shrink: 0;
}
.wcollage__stat sup { font-size: .5em; top: -.6em; }
.wcollage__stat span {
  font-size: clamp(.66rem, 1.3vw, .78rem);
  font-weight: 600; line-height: 1.3;
  color: rgba(255, 255, 255, .86);
}
.wcollage__stat--brand {
  grid-area: 3 / 3 / 4 / 5;
  background: linear-gradient(135deg, var(--brand), var(--brand-deep));
}
.wcollage__stat--dark {
  grid-area: 4 / 3 / 5 / 5;
  background: linear-gradient(135deg, #12121a, #0b0b0e);
}
/* the banner slot is 2:1, so relax the square and let the block below breathe */
.wcollage { aspect-ratio: 5 / 4; }

@media (max-width: 575.98px) {
  /* square tiles get too small to read — go to a plain stacked 2x2 */
  .wcollage {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto auto;
    aspect-ratio: auto;
  }
  .wcollage__shot--a, .wcollage__shot--b,
  .wcollage__stat--brand, .wcollage__stat--dark { grid-area: auto; }
  .wcollage__shot { aspect-ratio: 4 / 3; border-radius: var(--radius); }
  .wcollage__stat { border-radius: var(--radius); min-height: 92px; }
}
@media (prefers-reduced-motion: reduce) {
  .wcollage__shot img { transition: none; }
  .wcollage__shot:hover img { transform: none; }
}

/* ---------- venue band ---------- */
.venue-band {
  position: relative;
  margin: 0;
  border-radius: var(--radius-xl);
  overflow: hidden;
  box-shadow: var(--shadow);
  line-height: 0;                 /* kills the inline-image gap under the figure */
}
.venue-band img { display: block; width: 100%; height: auto; }
.venue-band__cta {
  position: absolute;
  right: clamp(14px, 2.4vw, 30px);
  bottom: clamp(14px, 2.4vw, 30px);
  display: inline-flex; align-items: center; gap: 9px;
  padding: 12px 22px;
  border-radius: 999px;
  background: var(--brand); color: #fff;
  font-family: var(--font-head); font-weight: 700; font-size: .9rem;
  line-height: 1;
  box-shadow: var(--shadow-brand);
  transition: background .3s var(--ease), transform .3s var(--ease);
}
.venue-band__cta:hover { background: var(--brand-dark); color: #fff; transform: translateY(-2px); }
.venue-band__cta i { transition: transform .3s var(--ease); }
.venue-band__cta:hover i { transform: translate(3px, -3px); }

@media (max-width: 575.98px) {
  /* the artwork's own caption fills the strip at this size — drop the CTA below
     it rather than covering the wording */
  .venue-band { border-radius: var(--radius); }
  .venue-band__cta {
    position: static;
    display: flex; justify-content: center;
    border-radius: 0;
    box-shadow: none;
  }
  .venue-band__cta:hover { transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .venue-band__cta, .venue-band__cta i { transition: none; }
  .venue-band__cta:hover { transform: none; }
  .venue-band__cta:hover i { transform: none; }
}

/* ---------- scholarship / subscribe pair ---------- */
.schol-card {
  display: flex; flex-direction: column;
  padding: clamp(26px, 3.4vw, 40px);
}
/* the card is a flex column, so inline-flex children would otherwise stretch */
.schol-card > .eyebrow, .subs-card .eyebrow { align-self: flex-start; }
.schol-card__ico {
  width: 52px; height: 52px; margin-bottom: 18px;
  display: grid; place-items: center; border-radius: 15px;
  background: rgba(255, 255, 255, .1);
  border: 1px solid rgba(255, 255, 255, .16);
  color: #fff; font-size: 1.35rem;
}
.schol-card h2 { font-size: clamp(1.3rem, 2.5vw, 1.8rem); margin-bottom: 10px; }
/* beats .cta-band p, which is one element more specific than a bare class */
.cta-band .schol-card__tag {
  font-family: var(--font-head); font-weight: 700; font-size: .95rem;
  color: #fff; margin-bottom: 12px;
}
.schol-card__label {
  display: block; margin: 18px 0 8px;
  font-family: var(--font-head); font-size: .62rem; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase;
  color: rgba(255, 255, 255, .5);
}
/* the shared tick-list is grey-on-white by default — unreadable on this card */
.cta-band .tick-list li { color: rgba(255, 255, 255, .8); font-size: .88rem; }
.cta-band .tick-list li i { color: #ff5a63; }

.schol-card__foot {
  margin-top: auto; padding-top: 24px;
  display: flex; flex-wrap: wrap; align-items: center; gap: 14px;
}
.schol-card__foot small { font-size: .76rem; color: rgba(255, 255, 255, .55); }

.subs-card { display: flex; flex-direction: column; padding: clamp(26px, 3.4vw, 40px); }
.subs-card .section-title { font-size: clamp(1.3rem, 2.5vw, 1.8rem); margin-bottom: 10px; }
.subs-card .section-lead { font-size: .9rem; }

/* ==========================================================================
   FAQ LINKS / VENUE
   ========================================================================== */
.faq-link {
  display: flex; align-items: center; gap: 15px;
  height: 100%;
  padding: 22px 24px;
  border-radius: var(--radius);
  background: var(--surface); border: 1px solid var(--line);
  box-shadow: var(--shadow-xs);
  color: var(--ink-2);
  transition: all .32s var(--ease);
}
.faq-link:hover { transform: translateY(-6px); border-color: var(--brand); color: var(--brand-ink); box-shadow: var(--shadow); }
.faq-link i.lead { font-size: 1.5rem; color: var(--brand-ink); }
.faq-link b { font-family: var(--font-head); font-weight: 600; font-size: .98rem; display: block; }
.faq-link small { color: var(--muted); font-size: .78rem; }
.faq-link .arrow { margin-left: auto; color: var(--brand-ink); }

.venue-card {
  border-radius: var(--radius-xl);
  overflow: hidden;
  border: 1px solid var(--line);
  box-shadow: var(--shadow-xs);
  background: var(--surface);
  height: 100%;
}
.venue-card iframe { width: 100%; height: 100%; min-height: 340px; border: 0; display: block; }

/* ==========================================================================
   REVIEWS
   ========================================================================== */
.review-card {
  height: 100%;
  padding: 26px 24px;
  border-radius: var(--radius-lg);
  background: var(--surface); border: 1px solid var(--line);
  box-shadow: var(--shadow-xs);
  transition: all .32s var(--ease);
}
.review-card:hover { transform: translateY(-6px); box-shadow: var(--shadow); }
.review-card .stars { color: #f5a623; font-size: .95rem; margin-bottom: 12px; letter-spacing: 2px; }
.review-card p { font-size: .89rem; color: var(--muted); font-style: italic; }
.review-card .who { display: flex; align-items: center; gap: 12px; margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--line-2); }
.review-card .who .av {
  width: 42px; height: 42px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--brand-soft); color: var(--brand-ink);
  font-family: var(--font-head); font-weight: 700; font-size: .95rem;
}
.review-card .who b { display: block; font-family: var(--font-head); font-size: .88rem; }
.review-card .who small { color: var(--muted-2); font-size: .76rem; }

/* ---------- testimonial carousel ----------
   A scroll-snap rail rather than a Bootstrap carousel: the number of cards per
   view changes with the breakpoint, which a slide-based carousel can only do by
   regrouping its slides on every resize. Native overflow scrolling also gives
   touch swipe and keyboard scrolling for free. */
.tcar { position: relative; }
.tcar__viewport {
  display: flex;
  align-items: stretch;
  gap: 24px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  /* deliberately NOT scroll-behavior:smooth — that would make the JS's
     behavior:'instant' (the reduced-motion path) animate anyway. The nav
     buttons pass their own behavior instead. */
  padding: 6px 4px 10px;      /* room for the cards' hover lift and focus ring */
  margin: -6px -4px 0;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.tcar__viewport::-webkit-scrollbar { display: none; }
.tcar__viewport:focus-visible { outline: 3px solid var(--brand); outline-offset: 3px; border-radius: var(--radius-lg); }

.tcar__item {
  flex: 0 0 calc((100% - 48px) / 3);   /* 3 up, minus the two 24px gaps */
  scroll-snap-align: start;
  display: flex; flex-direction: column;
  margin: 0;
  /* .review-card sets height:100%, which is not `auto` and so opts the card out
     of align-items:stretch — cards would then size to their own text and come
     out ragged. Back to auto so the row equalises. */
  height: auto;
}
.tcar__quote { font-size: 1.5rem; color: var(--brand-ink); opacity: .5; line-height: 1; margin-bottom: 6px; }
.tcar__quote-body { margin: 0; }
.tcar__quote-body p:last-child { margin-bottom: 0; }
/* long reviews are clamped; the toggle is added by JS only where it overflows */
.tcar__quote-body { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 9; line-clamp: 9; overflow: hidden; }
.tcar__item.is-expanded .tcar__quote-body { -webkit-line-clamp: unset; line-clamp: unset; overflow: visible; }
.tcar__more {
  align-self: flex-start;
  margin-top: 10px; padding: 0; border: 0; background: none;
  font-family: var(--font-head); font-weight: 600; font-size: .78rem;
  color: var(--brand-ink);
  transition: color .3s var(--ease);
}
.tcar__more:hover { color: var(--brand-ink-deep); text-decoration: underline; }
.tcar__item .who { margin-top: auto; }   /* attribution pinned to the card floor */

.tcar__nav {
  position: absolute; top: 50%; transform: translateY(-50%);
  z-index: 3;
  width: 44px; height: 44px;
  display: grid; place-items: center;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: var(--surface); color: var(--ink-2);
  box-shadow: var(--shadow-sm);
  transition: background .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease);
}
.tcar__nav:hover { background: var(--brand); border-color: var(--brand); color: #fff; }
.tcar__nav--prev { left: -20px; }
.tcar__nav--next { right: -20px; }

.tcar__dots { display: flex; justify-content: center; gap: 8px; margin-top: 22px; }
.tcar__dots button {
  width: 9px; height: 9px; padding: 0;
  border: 0; border-radius: 50%;
  background: var(--line);
  transition: width .3s var(--ease), background .3s var(--ease);
}
.tcar__dots button.is-active { width: 26px; border-radius: 5px; background: var(--brand); }

@media (max-width: 991.98px) {
  .tcar__item { flex-basis: calc((100% - 24px) / 2); }
  .tcar__nav--prev { left: -10px; }
  .tcar__nav--next { right: -10px; }
}
@media (max-width: 767.98px) {
  .tcar__item { flex-basis: 100%; }
  /* the rail is swipeable on touch, so the arrows only crowd the layout here */
  .tcar__nav { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .tcar__nav, .tcar__dots button, .tcar__more { transition: none; }
}

/* ==========================================================================
   ALERT BAND
   ========================================================================== */
.alert-band {
  border-radius: var(--radius);
  background: var(--brand-soft);
  border: 1px solid var(--brand-tint);
  border-left: 5px solid var(--brand);
  padding: 22px 26px;
}
.alert-band h5 { color: var(--brand-ink); font-size: 1rem; display: flex; align-items: center; gap: 9px; margin-bottom: 8px; }
.alert-band p { font-size: .87rem; color: var(--ink-3); margin: 0; }

/* ==========================================================================
   SELECTED PUBLICATIONS
   Palette is scoped to the section so the academic navy/red can sit beside
   the site brand without leaking into the rest of the page.
   ========================================================================== */
.pub-section {
  /* dark palette — reds are lifted off --brand because #df2531 only reaches
     3.9:1 against this surface */
  --pub-navy: #ffffff;         /* card headings */
  --pub-red: #ff2f38;
  --pub-red-ink: #ff7a80;
  --pub-bg: #0b0b0e;
  --pub-text: rgba(255, 255, 255, .84);
  --pub-muted: rgba(255, 255, 255, .6);
  --pub-surface: #15151c;
  --pub-line: rgba(255, 255, 255, .11);

  position: relative;
  /* dot grid over a brand-tinted wash — the pattern sits on top so the
     gradient does not wash it out */
  background-image:
    radial-gradient(rgba(255, 255, 255, .055) 1px, transparent 1px),
    radial-gradient(760px 420px at 82% 0%, rgba(223, 37, 49, .2), transparent 62%),
    radial-gradient(620px 380px at 10% 100%, rgba(223, 37, 49, .12), transparent 60%),
    linear-gradient(165deg, #0b0b0e, #16070a 55%, #0b0b0e);
  background-size: 24px 24px, auto, auto, auto;
  border-top: 1px solid rgba(255, 255, 255, .07);
}
/* section header sits directly on the pattern */
.pub-section .section-title { color: #fff; }
.pub-section .section-lead { color: rgba(255, 255, 255, .7); }

/* ---------- toolbar: type chips + search + year ---------- */
.pub-toolbar {
  display: flex; flex-wrap: wrap;
  align-items: center; justify-content: space-between;
  gap: 16px; margin-bottom: 18px;
}
.pub-filters { display: flex; gap: 8px; }
/* type chips removed — centre what is left of the toolbar */
.pub-toolbar--tools-only { justify-content: center; }
.pub-chip {
  flex: 0 0 auto;
  padding: 9px 18px;
  border: 1px solid var(--pub-line); border-radius: 999px;
  background: var(--pub-surface);
  color: var(--pub-muted);
  font-family: var(--font-head); font-weight: 600; font-size: .84rem;
  white-space: nowrap;
  transition: background .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease);
}
.pub-chip:hover { color: #fff; border-color: rgba(255, 255, 255, .3); }
/* brand red rather than --pub-navy: that token is now white, which would give
   a white chip with white text */
.pub-chip.is-active { background: var(--brand); border-color: var(--brand); color: #fff; }

.pub-tools { display: flex; gap: 10px; }
.pub-search { position: relative; }
.pub-search > i {
  position: absolute; left: 14px; top: 50%; transform: translateY(-50%);
  color: var(--pub-muted); font-size: .88rem; pointer-events: none;
}
.pub-search .form-control {
  width: 260px;
  padding: 10px 16px 10px 38px;
  border-radius: 999px; border: 1px solid var(--pub-line);
  background: var(--pub-surface); color: var(--pub-text);
  font-size: .88rem;
}
.pub-year {
  width: auto;
  padding: 10px 36px 10px 16px;
  border-radius: 999px; border: 1px solid var(--pub-line);
  background-color: var(--pub-surface); color: var(--pub-text);
  font-size: .88rem;
}
.pub-search .form-control:focus, .pub-year:focus {
  border-color: var(--brand);
  background-color: var(--pub-surface); color: var(--pub-text);
  box-shadow: 0 0 0 3px rgba(223, 37, 49, .22);
}
.pub-search .form-control::placeholder { color: rgba(255, 255, 255, .42); }
.pub-year option { background: #15151c; color: #fff; }
.pub-count { font-size: .82rem; color: var(--pub-muted); margin-bottom: 22px; }

/* ---------- card ---------- */
.pub-card {
  position: relative;
  height: 100%;
  display: flex; flex-direction: column;
  padding: 28px;
  background: var(--pub-surface);
  border: 1px solid var(--pub-line);
  border-radius: 16px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, .3);
  transition: transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s var(--ease);
}
/* accent rail, revealed on hover */
.pub-card::before {
  content: '';
  position: absolute; inset: 0 auto 0 0;
  width: 3px; border-radius: 16px 0 0 16px;
  background: var(--pub-red);
  opacity: 0; transition: opacity .3s var(--ease);
}
.pub-card:hover { transform: translateY(-5px); box-shadow: 0 18px 40px rgba(0, 0, 0, .5); border-color: rgba(255, 255, 255, .2); }
.pub-card:hover::before { opacity: 1; }

.pub-card__badges { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 16px; }
.pub-badge {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 5px 11px; border-radius: 6px;
  font-family: var(--font-head); font-size: .64rem; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase;
  transition: background .3s var(--ease), color .3s var(--ease);
}
.pub-badge--conf { background: rgba(255, 255, 255, .12); color: #fff; }
.pub-badge--article { background: rgba(255, 255, 255, .08); color: rgba(255, 255, 255, .72); }
.pub-badge--oa { background: rgba(255, 47, 56, .18); color: var(--pub-red-ink); }
.pub-card:hover .pub-badge--conf { background: #fff; color: #14141a; }
.pub-card:hover .pub-badge--oa { background: var(--brand); color: #fff; }

.pub-card__title {
  font-family: var(--font-head);
  font-size: 1.02rem; font-weight: 700; line-height: 1.45;
  color: var(--pub-navy);
  margin-bottom: 12px;
  display: -webkit-box; -webkit-box-orient: vertical;
  -webkit-line-clamp: 3; line-clamp: 3;
  overflow: hidden;
}
/* "Read more" also releases the clamp, so long titles stay reachable */
.pub-card.is-open .pub-card__title { -webkit-line-clamp: unset; line-clamp: unset; overflow: visible; }

.pub-card__authors {
  display: flex; align-items: flex-start; gap: 8px;
  font-size: .85rem; color: var(--pub-text); margin-bottom: 0;
}
.pub-card__authors i { color: var(--pub-muted); font-size: .8rem; margin-top: .28em; }

.pub-card__divider { border: 0; border-top: 1px solid var(--pub-line); margin: 16px 0; opacity: 1; }

.pub-card__source {
  display: flex; align-items: flex-start; gap: 8px;
  font-size: .84rem; line-height: 1.55; color: var(--pub-muted); margin-bottom: 8px;
}
.pub-card__source i { color: var(--pub-navy); font-size: .82rem; margin-top: .22em; }
.pub-card__source--none { font-style: italic; opacity: .8; }
.pub-card__meta {
  font-family: var(--font-head); font-size: .78rem; font-weight: 600;
  color: var(--pub-navy); margin-bottom: 0;
}

.pub-details { margin-top: 14px; padding: 14px 16px; background: rgba(255, 255, 255, .05); border-radius: 10px; }
.pub-details dl {
  display: grid; grid-template-columns: auto 1fr; gap: 5px 14px;
  margin: 0; font-size: .8rem;
}
.pub-details dt { font-weight: 600; color: var(--pub-muted); }
.pub-details dd { margin: 0; color: var(--pub-text); }

.pub-card__actions {
  display: flex; align-items: center; flex-wrap: wrap; gap: 14px;
  margin-top: auto; padding-top: 20px;   /* margin-top:auto pins this to the card floor */
}
.pub-link {
  display: inline-flex; align-items: center; gap: 7px;
  font-family: var(--font-head); font-weight: 600; font-size: .85rem;
  color: var(--pub-red-ink);
}
.pub-link:hover { color: var(--pub-red-ink); }
.pub-link i { transition: transform .3s var(--ease); }
.pub-link:hover i, .pub-card:hover .pub-link i { transform: translateX(4px); }

.pub-more {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 0; border: 0; background: none;
  font-family: var(--font-head); font-weight: 600; font-size: .82rem;
  color: var(--pub-muted);
  transition: color .3s var(--ease);
}
.pub-more:hover { color: var(--pub-navy); }
.pub-more i { font-size: .75rem; transition: transform .3s var(--ease); }
.pub-card.is-open .pub-more i { transform: rotate(180deg); }

.pub-doi {
  margin-left: auto;
  padding: 5px 10px; border-radius: 6px;
  border: 1px solid var(--pub-line); color: var(--pub-muted);
  font-family: var(--font-head); font-weight: 700; font-size: .7rem; letter-spacing: .08em;
  transition: color .3s var(--ease), border-color .3s var(--ease);
}
.pub-doi:hover { color: var(--pub-navy); border-color: var(--pub-navy); }

.pub-empty { text-align: center; padding: 56px 20px; }
.pub-empty i { display: block; margin-bottom: 14px; font-size: 2.4rem; color: var(--pub-muted); opacity: .55; }
.pub-empty h3 { color: var(--pub-navy); }
.pub-empty p { color: var(--pub-muted); font-size: .9rem; }

@keyframes pubIn { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.pub-col--enter { animation: pubIn .45s var(--ease) both; }

/* ---------- publications rail (reuses the .tcar shell) ---------- */
.pubcar { margin-top: 4px; }
/* Gutter so the arrows sit beside the cards rather than on them. Offsets are
   POSITIVE here: .pubcar is itself the positioned ancestor, so 0 is its own
   edge and the arrows belong inside the 56px padding. */
@media (min-width: 768px) {
  .pubcar { padding-inline: 56px; }
  .pubcar .tcar__nav--prev { left: 4px; }
  .pubcar .tcar__nav--next { right: 4px; }
}
.pubcar .tcar__nav {
  background: rgba(255, 255, 255, .1);
  border-color: rgba(255, 255, 255, .22);
  color: #fff;
}
.pubcar .tcar__nav:hover { background: var(--brand); border-color: var(--brand); color: #fff; }
.pubcar .tcar__dots button { background: rgba(255, 255, 255, .28); }
.pubcar .tcar__dots button.is-active { background: var(--brand); }
/* nothing to page through — hide the controls rather than show dead ones */
.pubcar.is-single .tcar__nav, .pubcar.is-single .tcar__dots { display: none; }
.pubcar .tcar__viewport:focus-visible { outline-color: var(--brand); }

/* ---------- dark theme ---------- */
[data-theme="dark"] .pub-section {
  --pub-navy: #8ecbf0;
  --pub-red-ink: #ff7378;
  --pub-bg: #0f0f14;
  --pub-text: #e6e6ee;
  --pub-muted: #9aa4b2;
  --pub-surface: #17171f;
  --pub-line: rgba(255, 255, 255, .09);
}
[data-theme="dark"] .pub-badge--conf { background: rgba(142, 203, 240, .14); }
[data-theme="dark"] .pub-badge--article { background: rgba(255, 255, 255, .08); color: #c3cad6; }
[data-theme="dark"] .pub-badge--oa { background: rgba(255, 115, 120, .16); }
[data-theme="dark"] .pub-card:hover { border-color: rgba(255, 255, 255, .16); box-shadow: 0 18px 40px rgba(0, 0, 0, .5); }
[data-theme="dark"] .pub-card:hover .pub-badge--conf,
[data-theme="dark"] .pub-card:hover .pub-badge--oa { color: #0b1620; }

@media (max-width: 991.98px) {
  /* filters scroll sideways instead of wrapping into a tall stack.
     min-width:0 throughout is load-bearing: a flex item defaults to
     min-width:auto, which lets it grow past the viewport instead of
     letting overflow-x actually clip and scroll. */
  /* nowrap matters: in a *wrapping* column container each flex line is sized to
     its widest item's max-content, so align-items:stretch would stretch the rows
     to the chip strip's full width instead of to the container. */
  .pub-toolbar { flex-direction: column; flex-wrap: nowrap; align-items: stretch; gap: 14px; }
  .pub-filters {
    min-width: 0;
    overflow-x: auto; -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    padding: 3px 3px 6px;   /* room for the focus ring, which overflow would clip */
    margin: -3px -3px 0;
  }
  .pub-tools { flex-wrap: nowrap; min-width: 0; }
  .pub-search { flex: 1 1 auto; min-width: 0; }
  .pub-search .form-control { width: 100%; min-width: 0; }
  .pub-year { flex: 0 0 auto; }
}

@media (max-width: 575.98px) {
  .pub-card { padding: 22px 20px; }
  .pub-card__actions { gap: 10px; padding-top: 18px; }
  .pub-link {
    width: 100%; justify-content: center;
    padding: 11px 16px; border-radius: 10px;
    background: var(--pub-navy); color: #fff;
  }
  .pub-link:hover { color: #fff; }
  .pub-more { width: 100%; justify-content: center; }
  .pub-doi { margin-left: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .pub-col--enter { animation: none; }
  .pub-card, .pub-card::before, .pub-badge, .pub-link i, .pub-more i, .pub-chip { transition: none; }
  .pub-card:hover { transform: none; }
  .pub-link:hover i, .pub-card:hover .pub-link i { transform: none; }
}

/* ==========================================================================
   FOOTER
   ========================================================================== */
.site-footer {
  background: linear-gradient(160deg, #0b0b0e, #16070a 55%, #0b0b0e);
  color: rgba(255, 255, 255, .68);
  padding: 70px 0 0;
  position: relative;
  overflow: hidden;
}
.site-footer::before {
  content: ''; position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px);
  background-size: 56px 56px;
  mask-image: radial-gradient(circle at 20% 0%, #000, transparent 70%);
  -webkit-mask-image: radial-gradient(circle at 20% 0%, #000, transparent 70%);
  pointer-events: none;
}
.site-footer .container { position: relative; z-index: 1; }
.site-footer h5 {
  color: #fff; font-size: .96rem; margin-bottom: 20px;
  letter-spacing: .04em; position: relative; padding-bottom: 12px;
}
.site-footer h5::after {
  content: ''; position: absolute; left: 0; bottom: 0;
  width: 36px; height: 3px; border-radius: 3px; background: var(--brand);
}
.site-footer p { font-size: .89rem; line-height: 1.75; }
.footer-links { list-style: none; padding: 0; margin: 0; }
.footer-links li { margin-bottom: 10px; }
.footer-links a {
  color: rgba(255, 255, 255, .68); font-size: .89rem;
  display: inline-flex; align-items: center; gap: 8px;
  transition: all .26s var(--ease);
}
.footer-links a i { font-size: .78rem; color: var(--brand-ink); transition: transform .26s var(--ease); }
.footer-links a:hover { color: #fff; }
.footer-links a:hover i { transform: translateX(4px); }

.footer-contact { list-style: none; padding: 0; margin: 0; }
.footer-contact li { display: flex; gap: 13px; margin-bottom: 17px; font-size: .89rem; }
.footer-contact li i {
  width: 38px; height: 38px; flex: 0 0 38px;
  display: grid; place-items: center; border-radius: 11px;
  background: rgba(223, 37, 49, .16); border: 1px solid rgba(223, 37, 49, .32);
  color: var(--brand-ink); font-size: 1rem;
}
.footer-contact li b { display: block; color: #fff; font-family: var(--font-head); font-size: .84rem; font-weight: 600; }
.footer-contact li a { color: rgba(255, 255, 255, .68); }
.footer-contact li a:hover { color: var(--brand-ink); }

.social-row { display: flex; gap: 10px; margin-top: 22px; }
.social-row a {
  width: 40px; height: 40px;
  display: grid; place-items: center; border-radius: 12px;
  background: rgba(255, 255, 255, .07);
  border: 1px solid rgba(255, 255, 255, .13);
  color: #fff; font-size: 1rem;
  transition: all .28s var(--ease);
}
.social-row a:hover { background: var(--brand); border-color: var(--brand); transform: translateY(-4px); }

.footer-bottom {
  margin-top: 56px; padding: 22px 0;
  border-top: 1px solid rgba(255, 255, 255, .1);
  font-size: .84rem; color: rgba(255, 255, 255, .5);
}
.footer-bottom a { color: rgba(255, 255, 255, .62); }
.footer-bottom a:hover { color: var(--brand-ink); }

/* floating actions */
.float-actions {
  position: fixed; right: 20px; bottom: 22px; z-index: 1035;
  display: flex; flex-direction: column; gap: 12px;
}
.float-btn {
  width: 54px; height: 54px;
  display: grid; place-items: center;
  border-radius: 50%; color: #fff; font-size: 1.5rem;
  box-shadow: var(--shadow);
  border: 0;
  transition: all .3s var(--ease);
}
.float-btn:hover { transform: translateY(-5px) scale(1.06); color: #fff; }
.float-btn--wa { background: #25d366; }
.float-btn--chat { background: var(--ink-ground); font-size: 1.25rem; }
.float-btn--top {
  background: var(--brand); font-size: 1.25rem;
  opacity: 0; visibility: hidden; transform: translateY(14px);
}
.float-btn--top.show { opacity: 1; visibility: visible; transform: translateY(0); }

/* ==========================================================================
   DARK THEME
   --------------------------------------------------------------------------
   Three rules keep this section honest:

   1. A component that paints a LIGHT ground (a card, a panel head, a table
      stub) must re-point --surface / --surface-2 / --surface-3 rather than
      restate a hex, so text tokens keep flipping with it.
   2. A component that paints a DARK ground under white type uses --ink-ground,
      never --ink: --ink inverts to #fff here and would go white-on-white.
   3. Red used as TEXT comes from --brand-ink / --brand-ink-deep, which lift to
      a light red. #df2531 only reaches 2.9:1 on a #131319 card and #b0161f is
      worse; both stay correct as button and badge GROUNDS, so --brand and
      --brand-dark are left alone.
   ========================================================================== */
[data-theme="dark"] {
  --ink: #ffffff;
  --ink-2: #f2f2f5;
  --ink-3: #d5d5dd;
  --muted: #a3a3ae;
  --muted-2: #7c7c88;
  --line: #26262e;
  --line-2: #1e1e25;
  --bg: #0b0b0e;
  --bg-soft: #121218;
  --brand-soft: rgba(223, 37, 49, .14);
  --brand-tint: rgba(223, 37, 49, .3);

  /* red as text — 5.4:1 and 6.9:1 on #131319 */
  --brand-ink: #ff7a80;
  --brand-ink-deep: #ff9aa0;

  /* card grounds; a dark theme reads better with a lifted card than an
     inverted one, so these sit above --bg rather than below it */
  --surface: #131319;
  --surface-2: #1a1a22;
  --surface-3: #16161d;

  /* stays dark so white type on it still reads */
  --ink-ground: #2b2b36;

  /* Bootstrap keys .text-muted, .form-text, .invalid-feedback, borders and
     link colours off these. The framework ships dark values for them, but only
     under [data-bs-theme="dark"] — this site switches on its own [data-theme],
     so that block never activates and the defaults stayed near-black on
     near-black. Values below are Bootstrap's own dark-mode ones, except the
     link pair, which takes the brand red rather than #6ea8fe. */
  --bs-body-color: #d5d5dd;
  --bs-body-color-rgb: 213, 213, 221;
  --bs-body-bg: #0b0b0e;
  --bs-body-bg-rgb: 11, 11, 14;
  --bs-secondary-color: rgba(222, 226, 230, .75);
  --bs-emphasis-color: #ffffff;
  --bs-border-color: #26262e;
  --bs-form-valid-color: #75b798;
  --bs-form-valid-border-color: #75b798;
  --bs-form-invalid-color: #ea868f;
  --bs-form-invalid-border-color: #ea868f;
  --bs-link-color: #ff7a80;
  --bs-link-color-rgb: 255, 122, 128;
  --bs-link-hover-color: #ff9aa0;

  --shadow-xs: 0 2px 8px rgba(0, 0, 0, .5);
  --shadow-sm: 0 6px 18px rgba(0, 0, 0, .55);
  --shadow: 0 14px 38px rgba(0, 0, 0, .6);
}
[data-theme="dark"] body { background: var(--bg); color: var(--ink-3); }

/* ---------- header / navigation ---------- */
[data-theme="dark"] .site-header.is-solid { background: rgba(11, 11, 14, .9); border-bottom-color: rgba(255,255,255,.07); }
[data-theme="dark"] .site-header.is-solid .main-nav .nav-link { color: #fff; }
/* dark theme keeps the header dark even when solid — the logo needs its plate */
[data-theme="dark"] .site-header .brand-logo,
[data-theme="dark"] .nav-offcanvas .brand-logo {
  background: #fff; border-radius: 14px; padding: 7px 12px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .3);
}
/* A white header bar (pages that set $lightTop, and any page once the header
   turns solid on scroll) paints its controls white with near-black glyphs. The
   bar is dark here, so the controls have to follow it or the glyphs disappear. */
[data-theme="dark"] body.has-light-top .site-header {
  background: rgba(11, 11, 14, .92);
  box-shadow: 0 6px 26px rgba(0, 0, 0, .5);
}
[data-theme="dark"] body.has-light-top .main-nav .nav-link { color: #fff; }
[data-theme="dark"] body.has-light-top .icon-btn,
[data-theme="dark"] body.has-light-top .nav-toggle,
[data-theme="dark"] .site-header.is-solid .icon-btn,
[data-theme="dark"] .site-header.is-solid .nav-toggle {
  background: rgba(255, 255, 255, .10);
  border-color: rgba(255, 255, 255, .28);
  color: #fff;
}
[data-theme="dark"] .mega,
[data-theme="dark"] .sub-menu { background: rgba(18, 18, 24, .93); border-color: rgba(255, 255, 255, .09); }
[data-theme="dark"] .mega__link, [data-theme="dark"] .sub-menu a { color: #e6e6ee; }
[data-theme="dark"] .mega__link small { color: var(--muted); }
[data-theme="dark"] .mega__head { border-bottom-color: rgba(255,255,255,.09); }
[data-theme="dark"] .nav-offcanvas,
[data-theme="dark"] .offcanvas { background: #0f0f14; color: var(--ink-3); }
[data-theme="dark"] .nav-offcanvas .accordion-button,
[data-theme="dark"] .mnav-link { color: #e6e6ee; }
[data-theme="dark"] .nav-offcanvas .accordion-item,
[data-theme="dark"] .nav-offcanvas .accordion-body { background: transparent; }

/* ---------- section grounds ---------- */
[data-theme="dark"] .assoc { background: #0f0f14; }
[data-theme="dark"] .bg-soft { background: #0f0f14 !important; }
[data-theme="dark"] .bg-white { background: var(--bg) !important; }

/* ---------- cards that only needed a text colour ---------- */
[data-theme="dark"] .date-card,
[data-theme="dark"] .role-card { background: var(--surface); color: var(--ink-3); }
[data-theme="dark"] .role-tabs .nav-link { background: var(--surface); color: #e6e6ee; }

/* ---------- white controls that sit on a dark or brand ground ----------
   These keep their white plate in the dark theme, so their label cannot use
   --ink / --ink-2 (both invert to white) and is pinned to a near-black. */
[data-theme="dark"] .btn-ghost-light:hover,
[data-theme="dark"] .vn-cta__ghost:hover,
[data-theme="dark"] .rg-group__btn,
[data-theme="dark"] .sg-card__side .sg-btn--ghost:hover,
[data-theme="dark"] .sg-help__mail { color: #14141a; }

/* Same reasoning for the red chips: --brand-ink is tuned for a #131319 card
   and only reaches 2.5:1 on the white plates these keep, so they stay on the
   light-theme red (4.72:1 on white). */
[data-theme="dark"] .hero__org .logo-chip,
[data-theme="dark"] .steps__num,
[data-theme="dark"] .proc__num,
[data-theme="dark"] .proc--icons .proc__n,
[data-theme="dark"] .btn-phone,
[data-theme="dark"] .ab-viz__node,
[data-theme="dark"] .rg-offer__ico,
[data-theme="dark"] .sg-help__ico,
[data-theme="dark"] .sg-tri__card--warn .sg-tri__ico,
[data-theme="dark"] .date-card:hover .date-card__tag,
[data-theme="dark"] .assist-card__mail,
[data-theme="dark"] .vn-place__badge,
[data-theme="dark"] .panel--accent .panel__ico { color: var(--brand); }
[data-theme="dark"] .vtl__badge { color: #5d5d68; }

/* ---------- forms ----------
   background-COLOR, never the `background` shorthand: .form-select carries its
   caret as a background-image with its own repeat / position / size longhands,
   and the shorthand resets all three — which tiles the caret right across the
   field. */
[data-theme="dark"] .form-control,
[data-theme="dark"] .form-select { background-color: #16161d; color: #e6e6ee; border-color: var(--line); }
[data-theme="dark"] .form-control:focus,
[data-theme="dark"] .form-select:focus { background-color: #1b1b23; color: #fff; }
[data-theme="dark"] .form-control::placeholder { color: var(--muted-2); }
/* The caret Bootstrap bakes into .form-select is stroked #343a40 and is all but
   invisible on #16161d — same path, redrawn in the muted grey.
   Override the VARIABLE, not background-image: 5.3 composes the select's
   background as `var(--bs-form-select-bg-img), var(--bs-form-select-bg-icon)`,
   so setting the variable keeps the caret correct in the validated states too,
   where Bootstrap adds its tick/cross as the second layer. Overriding
   background-image would drop that icon the moment a form is submitted. */
[data-theme="dark"] .form-select {
  --bs-form-select-bg-img: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23a3a3ae' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
}
/* the native dropdown list is painted by the OS, not the page — on Windows it
   stays light unless the control declares a dark scheme */
[data-theme="dark"] .form-select,
[data-theme="dark"] .form-control { color-scheme: dark; }
[data-theme="dark"] .form-select option { background-color: #16161d; color: #e6e6ee; }
[data-theme="dark"] .form-label { color: var(--ink-2); }
[data-theme="dark"] .form-check-label { color: var(--ink-3); }
[data-theme="dark"] .dropzone { background: var(--surface-3); border-color: var(--line); }
[data-theme="dark"] .form-card__aside,
[data-theme="dark"] .form-note { color: var(--muted); }

/* ---------- tables ---------- */
/* .sdg-table thead used --ink, which is white here; --ink-ground keeps the
   white column labels on a dark band */
[data-theme="dark"] .sdg-table tbody td { color: var(--muted); }
[data-theme="dark"] .sdg-table tbody tr { background: var(--surface); }
[data-theme="dark"] .table { --bs-table-color: var(--ink-3); --bs-table-bg: transparent; }

/* ---------- accordions ---------- */
[data-theme="dark"] .faq-acc .accordion-button { color: var(--ink-2); }
[data-theme="dark"] .faq-acc .accordion-button:not(.collapsed) {
  background: var(--surface); color: var(--brand-ink);
}
[data-theme="dark"] .faq-acc .accordion-button::after { filter: invert(1) grayscale(1) brightness(1.9); }
[data-theme="dark"] .faq-acc .accordion-body { background: var(--surface); color: var(--muted); }

/* ---------- carousels ---------- */
[data-theme="dark"] .tcar__nav { color: var(--ink-2); }
/* :not(.active) matters — without it this outranks each carousel's own active-dot
   rule (.sdg-car__dots .active and friends are only two class-level selectors)
   and every carousel loses its red current-slide marker in the dark theme. */
[data-theme="dark"] .carousel-indicators [data-bs-target]:not(.active) {
  background-color: rgba(255, 255, 255, .35);
}

/* ---------- Bootstrap components we never restyled ----------
   These take --bs-body-bg / --bs-body-color, which Bootstrap resolves to white
   and near-black regardless of our theme attribute, so they have to be told. */
[data-theme="dark"] .modal-content { background: var(--surface); color: var(--ink-3); }
[data-theme="dark"] .modal-title { color: var(--ink); }
[data-theme="dark"] .btn-close { filter: invert(1) grayscale(1) brightness(1.8); }
[data-theme="dark"] .form-check-input {
  background-color: #16161d; border-color: var(--muted-2);
}
[data-theme="dark"] .form-check-input:checked { background-color: var(--brand); border-color: var(--brand); }
[data-theme="dark"] hr { border-color: var(--line); }

/* ---------- journal package cards (index.php) ---------- */
[data-theme="dark"] .jpack__flag { background: var(--surface-2); color: var(--ink-2); }
[data-theme="dark"] .jpack__pill { background: var(--surface-2); border-color: var(--line); color: var(--ink-2); }

/* ---------- the featured package keeps a dark ground, one step off the card -- */
[data-theme="dark"] .pack--featured { background: linear-gradient(160deg, #26262f, #14141a); }

/* ---------- registration (conference-registration.php) ----------
   The fee tables were the worst offender: the row stubs painted #f8f9fc and
   took --ink-2, which is white here, so every category label vanished. */
[data-theme="dark"] .rg-offer { background: linear-gradient(160deg, rgba(223, 37, 49, .18), rgba(223, 37, 49, .06)); }
[data-theme="dark"] .rg-offer--alt { background: linear-gradient(160deg, rgba(223, 37, 49, .06), rgba(223, 37, 49, .18)); }
[data-theme="dark"] .rg-offer__body { background: rgba(11, 11, 14, .55); }
[data-theme="dark"] .rg-step__ico--ok   { background: rgba(31, 157, 85, .18); color: #56d38c; }
[data-theme="dark"] .rg-step__ico--cart { background: rgba(216, 68, 47, .18); color: #ff8a75; }
[data-theme="dark"] .rg-table tbody th { color: var(--ink-2); }
[data-theme="dark"] .rg-table tbody th small { color: var(--muted); }
[data-theme="dark"] .rg-table thead th { color: var(--brand-ink-deep); }
[data-theme="dark"] .rg-total { color: var(--ink-2); }
[data-theme="dark"] .rg-total b { color: var(--brand-ink); }
[data-theme="dark"] .rg-pack--gold { background: rgba(246, 177, 43, .12); border-color: rgba(246, 177, 43, .34); }
[data-theme="dark"] .rg-pack--teal { background: rgba(13, 148, 136, .12); border-color: rgba(13, 148, 136, .34); }
[data-theme="dark"] .rg-pack__badge { background: #d99400; color: #1a1206; }
[data-theme="dark"] .rg-pack--teal .rg-pack__badge { background: #14b3a4; color: #05201d; }
[data-theme="dark"] .rg-add:has(input:checked) { background: rgba(223, 37, 49, .16); }
[data-theme="dark"] .rg-auto { color: var(--muted); }
[data-theme="dark"] .rg-addhead span { color: var(--brand-ink-deep); }
[data-theme="dark"] .rg-prem input:checked + .rg-prem__box { background: #1f9d55; border-color: #1f9d55; }
[data-theme="dark"] .rg-pack__add.is-added { background: #1f9d55; color: #05200f; }
[data-theme="dark"] .rg-bank th { color: var(--muted); }
[data-theme="dark"] .rg-bank td { color: var(--ink-2); }

/* ---------- submission guidelines (submission-guidelines.php) ---------- */
[data-theme="dark"] .sg-card--gold::before,
[data-theme="dark"] .sg-card--brand::before { opacity: .9; }
[data-theme="dark"] .sg-spec { background: var(--surface-3); border-color: var(--line); }
[data-theme="dark"] .sg-help { background: rgba(223, 37, 49, .12); }

/* ---------- publication ethics (publication-ethics.php) ---------- */
[data-theme="dark"] .pe-stat--ok { border-left-color: #2fbd6d; }
[data-theme="dark"] .pe-stat--ok .pe-stat__fig { color: #56d38c; }   /* 7.4:1 on #131319 */

/* ---------- sessions & tracks (session-tracks.php) ----------
   .st scopes its own palette, so the card side of the block flips by
   re-pointing the tokens. The section ground is the one exception: it is a
   photograph under a hardcoded light scrim, which has to be re-mixed dark or
   the dark cards float on a bright band. */
[data-theme="dark"] .st {
  background:
    linear-gradient(180deg, rgba(15, 15, 20, .93) 0%, rgba(15, 15, 20, .88) 45%, rgba(15, 15, 20, .96) 100%),
    url("../../img/glims/web/16-bg.jpg") center / cover no-repeat fixed,
    #0f0f14;
}
@media (max-width: 991.98px), (prefers-reduced-motion: reduce) {
  [data-theme="dark"] .st { background-attachment: scroll, scroll, scroll; }
}
[data-theme="dark"] .st {
  --st-bg: #0f0f14;
  --st-card: #131319;
  --st-ink: #f2f2f5;
  --st-muted: #a3a3ae;
  --st-accent: #ff7a80;                 /* 5.4:1 on the card */
  --st-accent-soft: rgba(255, 122, 128, .13);
  --st-line: #26262e;
}
[data-theme="dark"] .st-card__n { color: rgba(255, 255, 255, .07); }
[data-theme="dark"] .st-card:hover .st-card__n { color: rgba(255, 122, 128, .22); }
[data-theme="dark"] .st-card:hover .st-card__ico,
[data-theme="dark"] .st-card:hover .st-card__go { color: #14141a; }   /* on the light accent */
[data-theme="dark"] .st-badge { border-color: rgba(255, 122, 128, .3); }

/* ---------- about us (about-us.php) ---------- */
/* two banded sections wash from a near-white tint down to #fff */
[data-theme="dark"] #why-attend.ab-why-band,
[data-theme="dark"] #objectives.ab-obj-band {
  background:
    radial-gradient(95% 58% at 50% 0%, rgba(223, 37, 49, .16), transparent 64%),
    linear-gradient(180deg, #101016 0%, var(--bg) 78%);
}
[data-theme="dark"] .abc {
  --abc-ink: #ffffff;
  --abc-ink-2: #e8e8ee;
  --abc-red: #ff5a63;
  --abc-red-ink: #ff8b91;
  --abc-body: #a3a3ae;
  --abc-soft: #16161d;
  --abc-line: #26262e;
  --abc-tint: rgba(227, 38, 50, .14);
}
[data-theme="dark"] .abc-tag {
  background: rgba(19, 19, 25, .93);
  border-color: rgba(255, 255, 255, .14);
}

/* ---------- selected publications ----------
   .pub-section is dark in both themes; only the surrounding chrome moves. */
[data-theme="dark"] .pub-section { border-top-color: rgba(255, 255, 255, .09); }

/* ---------- imagery ----------
   Photographs and logo sheets are printed for a white ground, so they keep one
   rather than being dimmed into the page. */
/* indexing badges are dark artwork on a transparent ground — they need a plate */
[data-theme="dark"] .pub-logos img { background: #fff; border-radius: 6px; padding: 4px 6px; }

/* the gallery band paints a pale pink ground the section titles are read on */
[data-theme="dark"] .glimpse { background: #14090b; }

/* ==========================================================================
   REVEAL ANIMATION
   ========================================================================== */
.reveal { opacity: 0; transform: translateY(26px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
.reveal.in { opacity: 1; transform: none; }

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
/* 1200–1399px: the desktop nav is live but the container is only 1140px wide,
   so brand + 5 items + 3 actions has to be tightened to stay on one line.
   Below 1200 the desktop nav is hidden entirely (`d-none d-xl-flex`). */
@media (max-width: 1399.98px) {
  .main-nav .nav-link { padding: 10px 11px !important; font-size: .88rem; }
  .main-nav .nav-link::after { left: 11px; right: 11px; }
  .header-actions .btn { padding: 12px 20px; font-size: .88rem; }
  .header-actions { gap: 8px; }
  .mega { min-width: 650px; }
  .mega--wide { min-width: 680px; }
}

@media (max-width: 991.98px) {
  :root { --header-h: 74px; }
  .section { padding: 62px 0; }
  .hero { min-height: auto; padding: calc(var(--header-h) + 40px) 0 56px; }
  .hero-tiles .tile-wrap:first-child .tile,
  .hero-tiles .tile-card { border-radius: 0; }
  .hero-tiles .row > .col-lg-8 > .row { border-radius: var(--radius) var(--radius) 0 0; overflow: hidden; }
  .hero-tiles .tile-card { border-radius: 0 0 var(--radius) var(--radius); }
}

@media (max-width: 767.98px) {
  body { font-size: 15px; }
  .section { padding: 52px 0; }
  .section-sm { padding: 42px 0; }
  .hero__theme { flex-direction: column; gap: 12px; padding: 18px 20px; }
  .hero__actions .btn { width: 100%; justify-content: center; }
  .hero-tiles .tile-wrap:first-child .tile { border-radius: var(--radius) 0 0 0; }
  .hero-tiles .tile-wrap:nth-child(2) .tile { border-radius: 0 var(--radius) 0 0; }
  .stat-strip { grid-template-columns: 1fr; }
  .float-actions { right: 14px; bottom: 14px; }
  .float-btn { width: 48px; height: 48px; font-size: 1.3rem; }
  .opp-slide { padding: 40px 24px; min-height: auto; }
  .opp-slider .carousel-control-prev, .opp-slider .carousel-control-next { display: none; }
}

@media (max-width: 575.98px) {
  /* `.container` only carries 12px of padding at xs, so a g-5 row's -24px
     margins bleed past the viewport. Cap the gutter to match the padding. */
  .row.g-5, .row.gx-5 { --bs-gutter-x: 1.5rem; }

  /* keep the header on one line: brand + 3 action controls must fit 360px */
  .brand-logo--plated,
  .site-header:not(.is-solid) .brand-logo { padding: 5px 8px; border-radius: 11px; }
  .brand-logo__img { height: 40px; }
  .site-header.is-solid .brand-logo__img { height: 36px; }
  .logo-strip { padding: 16px 0; }
  .logo-strip .gall-1 img { height: 42px; margin: 0 12px; }
  .header-actions { gap: 7px; }
  .icon-btn { width: 38px; height: 38px; font-size: .95rem; }
  .nav-toggle { width: 42px; height: 42px; font-size: 1.25rem; border-radius: 11px; }

  .hero__org { flex-wrap: wrap; }
  .assoc__item { min-width: calc(50% - 7px); padding: 14px 12px; font-size: .84rem; }
  .pack__ribbon { right: -40px; font-size: .58rem; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
  .reveal { opacity: 1; transform: none; }
}

@media print {
  .site-header, .float-actions, .site-footer, .offcanvas { display: none !important; }
}

/* ==========================================================================
   VENUE PAGE (venue.php)
   ========================================================================== */
.vn-hero {
  position: relative;
  padding: calc(var(--header-h) + 72px) 0 78px;
  background:
    linear-gradient(180deg, rgba(6, 6, 8, .82) 0%, rgba(6, 6, 8, .6) 45%, rgba(6, 6, 8, .88) 100%),
    url("../../img/banner2.png") center / cover no-repeat;
  color: #fff; text-align: center;
}
.vn-hero__crumbs { margin-bottom: 18px; }
.vn-hero__crumbs ol {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-wrap: wrap; justify-content: center; gap: 8px;
  font-size: .8rem; color: rgba(255, 255, 255, .6);
}
.vn-hero__crumbs a { color: rgba(255, 255, 255, .85); }
.vn-hero__crumbs a:hover { color: #fff; }
.vn-hero__crumbs li[aria-current] { color: #fff; font-weight: 600; }
.vn-hero__title {
  font-family: var(--font-head); font-weight: 800;
  font-size: clamp(2rem, 5.2vw, 3.6rem);
  letter-spacing: -.03em; line-height: 1.1;
  color: #fff; margin: 12px 0 0;
}
.vn-hero__pin { color: #ff5a63; font-size: .78em; margin-right: .3em; }
.vn-hero__sub { margin: 14px 0 0; font-size: 1.02rem; color: rgba(255, 255, 255, .78); }

/* ---------- introduction ---------- */
.vn-intro__shot {
  margin: 0; overflow: hidden;
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow);
}
.vn-intro__shot img { width: 100%; height: auto; display: block; }
.vn-highlights {
  list-style: none; padding: 0; margin: 26px 0 0;
  display: grid; grid-template-columns: 1fr 1fr; gap: 12px 20px;
}
.vn-highlights li {
  display: flex; align-items: center; gap: 10px;
  font-size: .9rem; font-weight: 600; color: var(--ink-2);
}
.vn-highlights i {
  width: 34px; height: 34px; flex: 0 0 34px;
  display: grid; place-items: center; border-radius: 10px;
  background: var(--brand-soft); color: var(--brand-ink); font-size: .9rem;
}

/* ---------- bento grid of places ----------
   The featured card spans two rows on the left; the other four fill a 2x2
   beside it. Each card paints its photograph OVER a branded gradient, so a
   missing file degrades to the gradient rather than a broken image. */
.vn-bento {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: 1fr;
  gap: 20px;
}
.vn-place {
  display: flex; flex-direction: column;
  border-radius: var(--radius-lg);
  background: var(--surface); border: 1px solid var(--line);
  box-shadow: var(--shadow-xs);
  overflow: hidden;
  transition: transform .28s var(--ease), box-shadow .28s var(--ease), border-color .28s var(--ease);
}
.vn-place:hover { transform: translateY(-6px); box-shadow: var(--shadow); border-color: var(--brand-tint); }
.vn-place--featured { grid-row: span 2; }

.vn-place__media {
  position: relative;
  min-height: 180px; flex-shrink: 0;
  background:
    var(--shot, none) center / cover no-repeat,
    linear-gradient(150deg, #1b1b22, #2a0508 70%, #3a070c);
}
.vn-place--featured .vn-place__media { min-height: 320px; flex: 1; }
.vn-place__badge {
  position: absolute; left: 16px; bottom: 16px;
  width: 42px; height: 42px;
  display: grid; place-items: center; border-radius: 12px;
  background: rgba(255, 255, 255, .92); color: var(--brand); font-size: 1.05rem;
  box-shadow: var(--shadow-xs);
}
.vn-place__flag {
  position: absolute; right: 0; top: 16px;
  padding: 6px 14px; border-radius: var(--radius) 0 0 var(--radius);
  background: var(--brand); color: #fff;
  font-family: var(--font-head); font-size: .6rem; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase;
}
.vn-place__body { display: flex; flex-direction: column; padding: 22px 22px 20px; }
.vn-place__name {
  font-family: var(--font-head); font-weight: 700; font-size: 1.05rem;
  color: var(--ink-2); margin-bottom: 8px;
}
.vn-place--featured .vn-place__name { font-size: 1.35rem; }
.vn-place__loc,
.vn-place__time,
.vn-place__idea {
  display: flex; align-items: flex-start; gap: 8px;
  font-size: .82rem; line-height: 1.55; margin-bottom: 8px;
}
.vn-place__loc { color: var(--muted); }
.vn-place__time { color: var(--ink-3); }
.vn-place__idea {
  color: var(--muted); margin-bottom: 0;
  padding-top: 10px; margin-top: 12px;
  border-top: 1px dashed var(--line);
}
.vn-place__loc i, .vn-place__time i, .vn-place__idea i { color: var(--brand-ink); margin-top: .18em; flex-shrink: 0; }
.vn-place__time b, .vn-place__idea b { color: var(--ink-2); }
.vn-place__desc { font-size: .86rem; line-height: 1.65; color: var(--muted); margin-bottom: 0; }
.vn-place__more {
  margin-top: 14px;
  display: inline-flex; align-items: center; gap: 7px;
  font-family: var(--font-head); font-weight: 600; font-size: .82rem; color: var(--brand-ink);
}
.vn-place__more i { transition: transform .28s var(--ease); }
.vn-place:hover .vn-place__more i { transform: translateX(4px); }

/* ---------- travel highlights ---------- */
.vn-travel { display: grid; grid-template-columns: repeat(5, 1fr); gap: 16px; }
.vn-travel__item {
  display: flex; flex-direction: column; align-items: center; gap: 12px;
  padding: 26px 16px;
  border-radius: var(--radius-lg);
  background: var(--surface); border: 1px solid var(--line);
  box-shadow: var(--shadow-xs);
  text-align: center;
  transition: transform .28s var(--ease), box-shadow .28s var(--ease), border-color .28s var(--ease);
}
.vn-travel__item:hover { transform: translateY(-5px); box-shadow: var(--shadow-sm); border-color: var(--brand-tint); }
.vn-travel__item span {
  width: 52px; height: 52px;
  display: grid; place-items: center; border-radius: 15px;
  background: var(--brand-soft); color: var(--brand-ink); font-size: 1.3rem;
  transition: background .28s var(--ease), color .28s var(--ease);
}
.vn-travel__item:hover span { background: var(--brand); color: #fff; }
.vn-travel__item b { font-family: var(--font-head); font-size: .92rem; color: var(--ink-2); }

/* ---------- contact ---------- */
.vn-contact {
  height: 100%; text-align: center;
  padding: 28px 22px;
  border-radius: var(--radius-lg);
  background: var(--surface); border: 1px solid var(--line);
  box-shadow: var(--shadow-xs);
  transition: transform .28s var(--ease), box-shadow .28s var(--ease);
}
.vn-contact:hover { transform: translateY(-5px); box-shadow: var(--shadow-sm); }
.vn-contact__ico {
  width: 52px; height: 52px; margin: 0 auto 16px;
  display: grid; place-items: center; border-radius: 15px;
  background: var(--brand-soft); color: var(--brand-ink); font-size: 1.25rem;
}
.vn-contact h3 {
  font-family: var(--font-head); font-weight: 700; font-size: .95rem;
  color: var(--ink-2); margin-bottom: 8px;
}
.vn-contact p { font-size: .87rem; line-height: 1.6; color: var(--muted); margin: 0; }
.vn-contact a { color: var(--muted); }
.vn-contact a:hover { color: var(--brand-ink); }

/* ---------- final CTA ---------- */
.vn-cta {
  background:
    linear-gradient(180deg, rgba(6, 6, 8, .86), rgba(6, 6, 8, .78)),
    url("../../img/banner2.png") center / cover no-repeat;
}
.vn-cta__inner { padding: 74px 0; text-align: center; color: #fff; }
.vn-cta__inner h2 {
  font-family: var(--font-head); font-weight: 800;
  font-size: clamp(1.6rem, 3.6vw, 2.6rem);
  color: #fff; margin: 10px auto 26px; max-width: 20ch;
}
.vn-cta__actions { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; }
.vn-cta__ghost { border-color: rgba(255, 255, 255, .5); color: #fff; }
.vn-cta__ghost:hover { background: #fff; border-color: #fff; color: var(--ink); }

@media (max-width: 991.98px) {
  .vn-bento { grid-template-columns: repeat(2, 1fr); }
  .vn-place--featured { grid-row: auto; grid-column: span 2; }
  .vn-place--featured .vn-place__media { min-height: 240px; flex: none; }
  .vn-travel { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 575.98px) {
  .vn-bento { grid-template-columns: 1fr; }
  .vn-place--featured { grid-column: auto; }
  .vn-travel { grid-template-columns: repeat(2, 1fr); }
  .vn-highlights { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .vn-place, .vn-travel__item, .vn-contact, .vn-place__more i, .vn-travel__item span { transition: none; }
  .vn-place:hover, .vn-travel__item:hover, .vn-contact:hover { transform: none; }
  .vn-place:hover .vn-place__more i { transform: none; }
}

/* ==========================================================================
   ABOUT PAGE (about-us.php)
   About Conference / Conference Theme / Why Attend / Objectives.
   The copy and markup are fixed; everything below is presentation only.
   ========================================================================== */

/* ---------- shared: faint engineering grid ground ----------
   Drawn in CSS rather than shipped as an image, and masked so it fades out
   before it reaches the copy. Decorative, so it is pointer-inert and sits
   behind a promoted .container. */
.ab-grid-bg { position: relative; overflow: hidden; }
.ab-grid-bg::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image:
    linear-gradient(to right,  rgba(20, 20, 28, .05) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(20, 20, 28, .05) 1px, transparent 1px);
  background-size: 58px 58px;
  -webkit-mask-image: radial-gradient(120% 78% at 50% 0%, #000 12%, transparent 74%);
          mask-image: radial-gradient(120% 78% at 50% 0%, #000 12%, transparent 74%);
}
.ab-grid-bg > .container { position: relative; z-index: 1; }

/* ---------- about: lede ---------- */
.ab-lede {
  font-size: 1.06rem; line-height: 1.7; color: var(--ink-2);
  padding-left: 18px; border-left: 3px solid var(--brand);
  margin-bottom: 26px;
}
.ab-lede b { font-family: var(--font-head); }
.ab-code { color: var(--brand-ink); font-weight: 700; white-space: nowrap; }
.ab-lede .ab-theme { display: block; margin-top: 6px; color: var(--muted); }

/* ---------- about: node / circuit panel ----------
   A centred core with four satellites sitting on a dashed ring. The ring is
   inset 12%, so its radius is 38% of the box - the node coordinates below are
   the four points where that circle meets the vertical and horizontal axes. */
.ab-viz {
  position: relative;
  aspect-ratio: 1;
  border-radius: var(--radius-xl);
  background:
    radial-gradient(60% 60% at 50% 45%, rgba(223, 37, 49, .28), transparent 70%),
    linear-gradient(150deg, #16161d, #24050a 62%, #35070d);
  box-shadow: var(--shadow);
  overflow: hidden;
}
.ab-viz::after {
    content: "";
    position: absolute;
    inset: 0;
    background-image: url(../../img/gallery/gallery11.jpg);
    background-size: cover;
    /* -webkit-mask-image: radial-gradient(circle at 50% 50%, transparent 34%, #000 78%); */
    /* mask-image: radial-gradient(circle at 50% 50%, transparent 34%, #000 78%); */
}
.ab-viz::before {                         /* the ring the nodes sit on */
  content: ""; position: absolute; inset: 12%;
  border: 1px dashed rgba(255, 255, 255, .22);
  border-radius: 50%;
  animation: ab-spin 34s linear infinite;
}
@keyframes ab-spin { to { transform: rotate(360deg); } }

.ab-viz__core {
  position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
  width: 44%; aspect-ratio: 1;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 4px; text-align: center;
  border-radius: 50%;
  background: rgba(255, 255, 255, .1);
  border: 1px solid rgba(255, 255, 255, .2);
  backdrop-filter: blur(6px);
  color: #fff;
}
.ab-viz__core b { font-family: var(--font-head); font-size: 1.5rem; letter-spacing: .04em; }
.ab-viz__core small {
  font-size: .58rem; font-weight: 600; letter-spacing: .1em;
  text-transform: uppercase; color: rgba(255, 255, 255, .68);
  max-width: 11ch; line-height: 1.4;
}
.ab-viz__node {
  position: absolute; z-index: 2;
  transform: translate(-50%, -50%);
  width: 52px; height: 52px;
  display: grid; place-items: center;
  border-radius: 16px;
  background: rgba(255, 255, 255, .95);
  color: var(--brand-ink); font-size: 1.15rem;
  box-shadow: 0 10px 26px rgba(0, 0, 0, .34);
  animation: ab-float 6s var(--ease) infinite;
}
.ab-viz__node--1 { top: 12%; left: 50%; }
.ab-viz__node--2 { top: 50%; left: 88%; animation-delay: 1.5s; }
.ab-viz__node--3 { top: 88%; left: 50%; animation-delay: 3s; }
.ab-viz__node--4 { top: 50%; left: 12%; animation-delay: 4.5s; }
@keyframes ab-float {
  0%, 100% { transform: translate(-50%, -50%) scale(1); }
  50%      { transform: translate(-50%, -50%) scale(1.09); }
}

/* ---------- about: purpose & vision ----------
   Three cards. The first is a solid brand panel carrying a CTA, with an
   oversized bottom-right corner; the other two are photo-topped. Cards are
   stretched to equal height so the accent panel squares off against its
   neighbours, and its CTA is pushed to the bottom with margin-top:auto. */
.ab-purpose {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 30px;
  margin-top: 8px;
}
.ab-pv { display: flex; flex-direction: column; }

/* Shared typography FIRST. `.ab-pv--fill h3` and `.ab-pv h3` have identical
   specificity (0,1,1), so whichever is written last wins — with the base
   below, the accent card's white type was being repainted dark on a red
   ground. Base rules before modifiers; do not reorder these. */
.ab-pv h3 {
  font-family: var(--font-head); font-weight: 700;
  font-size: 1.12rem; letter-spacing: -.01em; line-height: 1.35;
  color: var(--ink-2); margin-bottom: 12px;
}
.ab-pv p {
  margin: 0;
  font-size: .89rem; line-height: 1.75; color: var(--muted);
}

/* ---- solid accent card ---- */
.ab-pv--fill {
  padding: 34px 32px 30px;
  background: linear-gradient(150deg, var(--brand) 0%, var(--brand-deep) 100%);
  color: #fff;
  /* the big sweep is on the bottom-right only, as in the reference */
  border-radius: var(--radius-lg) var(--radius-lg) 110px var(--radius-lg);
  box-shadow: 0 18px 40px rgba(223, 37, 49, .22);
  transition: transform .28s var(--ease), box-shadow .28s var(--ease);
}
.ab-pv--fill:hover { transform: translateY(-5px); box-shadow: 0 24px 50px rgba(223, 37, 49, .3); }
.ab-pv--fill h3 { color: #fff; font-size: 1.5rem; line-height: 1.25; margin-bottom: 16px; }
.ab-pv--fill p { color: rgba(255, 255, 255, .9); font-size: .93rem; }

.ab-pv__more {
  margin-top: auto; padding-top: 22px;
  display: inline-flex; align-items: center; gap: 9px;
  align-self: flex-start;
  font-family: var(--font-head); font-weight: 700;
  font-size: .74rem; letter-spacing: .14em; text-transform: uppercase;
  color: #fff;
}
.ab-pv__more:hover { color: #fff; }
.ab-pv__more i { transition: transform .28s var(--ease); font-size: .9rem; }
.ab-pv__more:hover i { transform: translateX(5px); }

/* ---- photo cards ---- */
.ab-pv__shot {
  margin: 0 0 20px;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--bg-soft);
}
.ab-pv__shot img {
  display: block; width: 100%; height: auto;
  aspect-ratio: 16 / 9; object-fit: cover;
  transition: transform .5s var(--ease);
}
.ab-pv:hover .ab-pv__shot img { transform: scale(1.05); }

/* ---------- about: key features ----------
   Five cards on a flex row rather than a grid, so the two that wrap onto the
   second line centre themselves instead of leaving a hole on the right. */
.ab-keyfeat { margin-top: 56px; }
.ab-features { display: flex; flex-wrap: wrap; justify-content: center; gap: 18px; }
.ab-feature {
  flex: 0 1 calc((100% - 36px) / 3);
  padding: 24px 22px;
  border-radius: var(--radius-lg);
  background: var(--surface); border: 1px solid var(--line);
  box-shadow: var(--shadow-xs);
  transition: transform .28s var(--ease), box-shadow .28s var(--ease), border-color .28s var(--ease);
}
.ab-feature:hover { transform: translateY(-5px); box-shadow: var(--shadow-sm); border-color: var(--brand-tint); }
.ab-feature__ico {
  width: 48px; height: 48px; margin-bottom: 14px;
  display: grid; place-items: center; border-radius: 14px;
  background: var(--brand-soft); color: var(--brand-ink); font-size: 1.25rem;
  transition: background .28s var(--ease), color .28s var(--ease);
}
.ab-feature:hover .ab-feature__ico { background: var(--brand); color: #fff; }
.ab-feature h3 {
  font-family: var(--font-head); font-weight: 700; font-size: .96rem;
  color: var(--ink-2); margin-bottom: 6px;
}
.ab-feature p { font-size: .84rem; line-height: 1.6; color: var(--muted); margin: 0; }

/* ==========================================================================
   CONFERENCE THEME BAND
   ========================================================================== */
.ab-theme-band {
  position: relative; overflow: hidden;
  padding: 84px 0;
  background:
    radial-gradient(80% 120% at 50% 0%, rgba(223, 37, 49, .3), transparent 62%),
    linear-gradient(160deg, #101017, #1c0409 58%, #2d060c);
  color: #fff;
  text-align: center;
}
.ab-theme-band::before {                 /* circuit traces */
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image:
    linear-gradient(to right,  rgba(255, 255, 255, .06) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255, 255, 255, .06) 1px, transparent 1px);
  background-size: 62px 62px;
  -webkit-mask-image: radial-gradient(90% 100% at 50% 50%, #000, transparent 76%);
          mask-image: radial-gradient(90% 100% at 50% 50%, #000, transparent 76%);
}
.ab-theme-band::after {                  /* network nodes on the trace crossings */
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image: radial-gradient(rgba(255, 120, 128, .5) 1.6px, transparent 1.7px);
  background-size: 62px 62px; background-position: 31px 31px;
  -webkit-mask-image: radial-gradient(70% 90% at 50% 50%, #000, transparent 72%);
          mask-image: radial-gradient(70% 90% at 50% 50%, #000, transparent 72%);
}
.ab-theme-band__inner { position: relative; z-index: 1; }
.ab-theme-band__head {
  margin: 20px auto 0; max-width: 68ch;
  font-family: var(--font-head); font-weight: 700;
  font-size: clamp(1.15rem, 2.4vw, 1.7rem);
  line-height: 1.3; letter-spacing: -.01em;
  color: rgba(255, 255, 255, .9);
}
/* No max-width here: `ch` would be measured in this element's own (small)
   font, and the 4rem headline inside would overflow it and be clipped by the
   band's overflow:hidden. Constrain the sub-line instead, where the units
   match the type. */
.ab-theme-band__statement {
  margin: 22px auto 0;
  font-family: var(--font-head); font-weight: 800;
  letter-spacing: -.03em; line-height: 1.15;
}
.ab-theme-band__hi {
  display: block;
  font-size: clamp(2.1rem, 6vw, 4rem);
  background: linear-gradient(100deg, #fff 18%, #ff8f96 52%, #fff 86%);
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
}
.ab-theme-band__rest {
  display: block; margin: 10px auto 0; max-width: 30ch;
  font-size: clamp(1rem, 2.1vw, 1.5rem);
  font-weight: 600; letter-spacing: -.01em;
  color: rgba(255, 255, 255, .8);
}
.ab-theme-band__note {
  margin: 24px auto 0; max-width: 62ch;
  font-size: .93rem; line-height: 1.75; color: rgba(255, 255, 255, .62);
}

/* ==========================================================================
   WHY ATTEND - bento
   Five cards on a SIX-column track: the two `--wide` cards span 3 each and
   fill row 1; the three plain cards span 2 each and fill row 2. Both rows
   resolve exactly, so there are no holes and no need for dense packing.
   `--shot` cards carry a photograph behind a dark scrim; the rest stay light.
   ========================================================================== */
/* Qualified with the id on purpose. index.php has its own `#why-attend` section
   carrying a flat pink `background`, and an ID beats a class — reusing the id
   here meant that rule painted this band instead. ID + class wins it back
   without touching the home page. */
#why-attend.ab-why-band {
  position: relative;
  background:
    radial-gradient(95% 58% at 50% 0%, rgba(223, 37, 49, .085), transparent 64%),
    linear-gradient(180deg, #fbf8f9 0%, #fff 76%);
}
#why-attend .section-lead { max-width: 76ch; color: var(--muted); }

.ab-bento { display: grid; grid-template-columns: repeat(6, 1fr); gap: 20px; }
.ab-why {
  grid-column: span 2;
  position: relative; overflow: hidden;
  display: flex; flex-direction: column;
  padding: 26px 24px;
  border-radius: var(--radius-lg);
  background: var(--surface); border: 1px solid var(--line);
  box-shadow: var(--shadow-xs);
  transition: transform .28s var(--ease), box-shadow .28s var(--ease), border-color .28s var(--ease);
}
.ab-why--wide { grid-column: span 3; }
.ab-why:hover { transform: translateY(-6px); box-shadow: var(--shadow); border-color: var(--brand-tint); }
.ab-why > * { position: relative; z-index: 1; }

/* ---------- head row: number badge left, icon right ---------- */
.ab-why__head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; margin-bottom: 16px;
}
.ab-why__num {
  width: 42px; height: 42px;
  display: grid; place-items: center; border-radius: 13px;
  background: var(--brand); color: #fff;
  font-family: var(--font-head); font-weight: 800; font-size: 1rem;
  letter-spacing: .02em;
  box-shadow: 0 8px 20px rgba(223, 37, 49, .28);
}
.ab-why__ico {
  width: 38px; height: 38px;
  display: grid; place-items: center; border-radius: 12px;
  background: var(--brand-soft); border: 1px solid var(--brand-tint);
  color: var(--brand-ink); font-size: 1.05rem;
  transition: background .28s var(--ease), color .28s var(--ease), border-color .28s var(--ease);
}
.ab-why:hover .ab-why__ico { background: var(--brand); border-color: var(--brand); color: #fff; }

.ab-why__title {
  font-family: var(--font-head); font-weight: 700;
  font-size: 1.12rem; letter-spacing: -.01em;
  color: var(--brand-ink); margin-bottom: 14px;
}
.ab-why--wide .ab-why__title { font-size: 1.3rem; }

/* Top-aligned, NOT pinned to the bottom with `margin-top:auto`. The cards in a
   row are stretched to equal height, and card 05 carries a fourth point — with
   the list pushed down, its shorter neighbours showed the dashed divider
   floating in the middle of an empty card. Trailing space at the bottom reads
   better than a gap in the middle. */
.ab-why__list {
  list-style: none; margin: 0; padding: 15px 0 0;
  border-top: 1px dashed var(--line);
  display: grid; gap: 11px;
}
.ab-why__list li { display: flex; align-items: flex-start; gap: 9px; }
.ab-why__list i {
  flex: 0 0 18px; width: 18px; height: 18px; margin-top: .18em;
  display: grid; place-items: center; border-radius: 50%;
  background: var(--brand); color: #fff; font-size: .62rem;
}
.ab-why__list span { font-size: .84rem; line-height: 1.6; color: var(--muted); }
.ab-why__list b { color: var(--ink-2); font-weight: 700; }

/* ---------- photographic variant ----------
   The scrim is opaque enough that white type clears WCAG AA over the busiest
   part of either photo. It also degrades safely: if the file 404s the card is
   still a legible dark gradient rather than white-on-white. */
.ab-why--shot {
  border-color: transparent;
  background:
    linear-gradient(155deg, rgba(10, 10, 13, .72) 0%, rgba(12, 4, 6, .84) 52%, rgba(26, 3, 8, .94) 100%),
    var(--shot, none) center / cover no-repeat,
    linear-gradient(150deg, #1b1b22, #2a0508 70%, #3a070c);
}
.ab-why--shot:hover { border-color: rgba(255, 255, 255, .28); }
.ab-why--shot .ab-why__title { color: #ff8f96; }
.ab-why--shot .ab-why__list { border-top-color: rgba(255, 255, 255, .22); }
.ab-why--shot .ab-why__list span { color: rgba(255, 255, 255, .82); }
.ab-why--shot .ab-why__list b { color: #fff; }
.ab-why--shot .ab-why__ico {
  background: rgba(255, 255, 255, .14);
  border-color: rgba(255, 255, 255, .3);
  color: #fff;
}
.ab-why--shot:hover .ab-why__ico { background: #fff; border-color: #fff; color: var(--brand); }

/* ==========================================================================
   OBJECTIVES - card grid
   Seven cards, four tracks. Row 2 carries three and leaves the fourth slot
   empty rather than stretching or centring them, which is how the reference
   lays it out.

   `#objectives.ab-obj-band` is qualified defensively, not correctively: no
   `#objectives` rule competes today, but `#why-attend` did (bug-055), and any
   page that later reuses this id would otherwise outrank the class. Nothing
   here depends on the id — the class alone carries every declaration.
   ========================================================================== */
#objectives.ab-obj-band {
  position: relative;
  background:
    radial-gradient(95% 58% at 50% 0%, rgba(223, 37, 49, .07), transparent 64%),
    linear-gradient(180deg, #fbf8fa 0%, #fff 78%);
}

.ab-objg {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px;
  counter-reset: none;
}
.ab-objc {
  position: relative; overflow: hidden;
  display: flex; flex-direction: column;
  padding: 24px 22px;
  border-radius: var(--radius-lg);
  background: var(--surface); border: 1px solid var(--line);
  box-shadow: var(--shadow-xs);
  transition: transform .28s var(--ease), box-shadow .28s var(--ease), border-color .28s var(--ease);
}
.ab-objc:hover { transform: translateY(-6px); box-shadow: var(--shadow); border-color: var(--brand-tint); }
.ab-objc > * { position: relative; z-index: 1; }

/* faint watermark glyph, top-right */
.ab-objc__ghost {
  position: absolute; right: 14px; top: 12px; z-index: 0;
  font-size: 1.5rem; line-height: 1;
  color: var(--brand-ink); opacity: .16;
  transition: opacity .28s var(--ease), transform .28s var(--ease);
}
.ab-objc:hover .ab-objc__ghost { opacity: .34; transform: scale(1.08); }

.ab-objc__num {
  display: block; margin-bottom: 12px;
  font-family: var(--font-head); font-weight: 800;
  font-size: 1.5rem; letter-spacing: .01em; line-height: 1;
  color: var(--muted-2);
  transition: color .28s var(--ease);
}
.ab-objc:hover .ab-objc__num { color: var(--brand-ink); }

.ab-objc__title {
  font-family: var(--font-head); font-weight: 700;
  font-size: 1rem; line-height: 1.35; letter-spacing: -.01em;
  color: var(--brand-ink); margin-bottom: 12px;
}
.ab-objc__list {
  list-style: none; margin: 0; padding: 13px 0 0;
  border-top: 1px dashed var(--line);
  display: grid; gap: 9px;
}
.ab-objc__list li {
  position: relative; padding-left: 17px;
  font-size: .83rem; line-height: 1.6; color: var(--muted);
}
.ab-objc__list li::before {            /* small brand dot instead of a bullet glyph */
  content: ""; position: absolute; left: 2px; top: .58em;
  width: 5px; height: 5px; border-radius: 50%;
  background: var(--brand);
}

/* ---------- responsive ---------- */
@media (max-width: 1199.98px) {
  /* Two tracks. Five cards cannot fill a 2-track grid evenly, so the last card
     is widened to span both — that is the only arrangement here with no hole. */
  .ab-bento { grid-template-columns: repeat(2, 1fr); }
  .ab-why, .ab-why--wide { grid-column: span 1; }
  .ab-why:last-child { grid-column: span 2; }
  .ab-why--wide .ab-why__title { font-size: 1.12rem; }
}
@media (max-width: 1199.98px) {
  .ab-objg { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 991.98px) {
  .ab-viz { max-width: 420px; margin-inline: auto; }
  .ab-feature { flex-basis: calc((100% - 18px) / 2); }
  .ab-objg { grid-template-columns: repeat(2, 1fr); }
  /* one column: the accent card loses its oversized sweep, which reads as a
     mistake once the card is full-bleed rather than a third of a row */
  .ab-purpose { grid-template-columns: 1fr; gap: 24px; }
  .ab-pv--fill { border-radius: var(--radius-lg) var(--radius-lg) 72px var(--radius-lg); }
}
@media (max-width: 575.98px) {
  .ab-feature { flex-basis: 100%; }
  .ab-pv--fill { padding: 28px 24px 26px; border-radius: var(--radius-lg) var(--radius-lg) 56px var(--radius-lg); }
  .ab-pv--fill h3 { font-size: 1.3rem; }
  .ab-bento { grid-template-columns: 1fr; }
  .ab-why, .ab-why--wide, .ab-why:last-child { grid-column: span 1; }
  .ab-theme-band { padding: 62px 0; }
  .ab-lede { padding-left: 14px; }
  .ab-why { padding: 24px 20px; }
  .ab-objg { grid-template-columns: 1fr; }
  .ab-objc { padding: 22px 20px; }
}
@media (prefers-reduced-motion: reduce) {
  .ab-viz::before, .ab-viz__node { animation: none; }
  .ab-feature, .ab-why, .ab-objc, .ab-objc__num, .ab-objc__ghost,
  .ab-feature__ico, .ab-why__ico,
  .ab-pv--fill, .ab-pv__more i, .ab-pv__shot img { transition: none; }
  .ab-pv--fill:hover { transform: none; }
  .ab-pv:hover .ab-pv__shot img { transform: none; }
  .ab-pv__more:hover i { transform: none; }
  .ab-feature:hover, .ab-why:hover, .ab-objc:hover { transform: none; }
  .ab-objc:hover .ab-objc__ghost { transform: none; }
}


/* ==========================================================================
   CONTACT PAGE (contact-us.php)
   Photograph on one side, the three channels stacked on the other.
   ========================================================================== */

/* ---------- photograph ----------
   The offset accent panel sits BEHIND the picture via a negative z-index on a
   ::before, so it needs no extra element. The figure is z-indexed above it. */
.ct-shot {
  position: relative;
  margin: 0;
  border-radius: var(--radius-xl);
  overflow: hidden;
  box-shadow: var(--shadow);
  isolation: isolate;
}
.ct-shot::after {                        /* warm the photo towards the brand */
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(155deg, transparent 45%, rgba(223, 37, 49, .16));
}
.ct-shot img {
  display: block; width: 100%; height: auto;
  aspect-ratio: 6 / 5; object-fit: cover;
}

/* ---------- lead paragraph ---------- */
.ct-lead {
  margin: 0 0 26px;
  font-size: 1rem; line-height: 1.78; color: var(--muted);
}

/* ---------- the three channels ---------- */
.ct-list { display: grid; gap: 14px; }
.ct-row {
  position: relative;
  display: flex; align-items: flex-start; gap: 16px;
  padding: 20px 22px;
  border-radius: var(--radius-lg);
  background: var(--surface); border: 1px solid var(--line);
  box-shadow: var(--shadow-xs);
  transition: transform .28s var(--ease), box-shadow .28s var(--ease), border-color .28s var(--ease);
}
.ct-row:hover { transform: translateX(5px); box-shadow: var(--shadow-sm); border-color: var(--brand-tint); }

.ct-row__ico {
  flex: 0 0 50px; width: 50px; height: 50px;
  display: grid; place-items: center; border-radius: 15px;
  background: var(--brand-soft); border: 1px solid var(--brand-tint);
  color: var(--brand-ink); font-size: 1.25rem;
  transition: background .28s var(--ease), color .28s var(--ease), border-color .28s var(--ease);
}
.ct-row:hover .ct-row__ico { background: var(--brand); border-color: var(--brand); color: #fff; }

.ct-row__body { min-width: 0; }          /* lets the email wrap instead of overflowing */
.ct-row__body h3 {
  font-family: var(--font-head); font-weight: 700;
  font-size: .72rem; letter-spacing: .14em; text-transform: uppercase;
  color: var(--muted-2); margin-bottom: 6px;
}
/* the actionable line — biggest type in the row */
.ct-row__body address,
.ct-row__val {
  margin: 0 0 5px;
  font-family: var(--font-head); font-weight: 700; font-style: normal;
  font-size: 1rem; line-height: 1.5;
  color: var(--ink-2);
  overflow-wrap: anywhere;
}
.ct-row__body address a,
.ct-row__val a { color: inherit; }
.ct-row__body address a:hover,
.ct-row__val a:hover { color: var(--brand-ink); }
.ct-row__body > p:last-child {
  margin: 0;
  font-size: .85rem; line-height: 1.6; color: var(--muted);
}

@media (max-width: 991.98px) {
  .ct-shot { max-width: 620px; margin-inline: auto; }
}
@media (max-width: 575.98px) {
  .ct-row { padding: 18px; gap: 13px; }
  .ct-row__ico { flex-basis: 44px; width: 44px; height: 44px; font-size: 1.1rem; }
  .ct-shot img { aspect-ratio: 4 / 3; }
}
@media (prefers-reduced-motion: reduce) {
  .ct-row, .ct-row__ico { transition: none; }
  .ct-row:hover { transform: none; }
}

/* ==========================================================================
   COMMITTEE PAGES
   committee.php / committee-nomination.php / committee-eligibility.php
   ========================================================================== */

/* ---------- roles list: bold lead-in before the colon ---------- */
.cm-roles li b { color: var(--ink-2); font-weight: 700; }

/* ---------- closing CTA band ---------- */
.cm-cta {
  position: relative; overflow: hidden;
  background:
    radial-gradient(80% 120% at 50% 0%, rgba(223, 37, 49, .3), transparent 62%),
    linear-gradient(160deg, #101017, #1c0409 58%, #2d060c);
  color: #fff;
}
.cm-cta::before {                        /* faint grid, matching the theme band */
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image:
    linear-gradient(to right,  rgba(255, 255, 255, .06) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255, 255, 255, .06) 1px, transparent 1px);
  background-size: 62px 62px;
  -webkit-mask-image: radial-gradient(90% 100% at 50% 50%, #000, transparent 76%);
          mask-image: radial-gradient(90% 100% at 50% 50%, #000, transparent 76%);
}
.cm-cta__inner { position: relative; z-index: 1; padding: 74px 0; text-align: center; }
.cm-cta__inner h2 {
  font-family: var(--font-head); font-weight: 800;
  font-size: clamp(1.6rem, 3.6vw, 2.5rem);
  color: #fff; margin: 16px auto 12px; max-width: 24ch;
}
.cm-cta__inner p {
  margin: 0 auto 28px; max-width: 56ch;
  font-size: .97rem; line-height: 1.75; color: rgba(255, 255, 255, .74);
}

/* ---------- "will update soon" placeholder ---------- */
.cm-soon {
  position: relative; overflow: hidden;
  text-align: center;
  padding: 44px 32px 38px;
  border-radius: var(--radius-xl);
  background: var(--surface);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-sm);
}
.cm-soon::before {                       /* brand rule across the very top */
  content: ""; position: absolute; inset: 0 0 auto; height: 3px;
  background: linear-gradient(90deg, var(--brand), var(--brand-deep) 55%, var(--brand-tint));
}
.cm-soon__ico {
  width: 62px; height: 62px; margin: 0 auto 18px;
  display: grid; place-items: center; border-radius: 19px;
  background: var(--brand-soft); border: 1px solid var(--brand-tint);
  color: var(--brand-ink); font-size: 1.5rem;
}
.cm-soon__title {
  font-family: var(--font-head); font-weight: 700;
  font-size: 1.24rem; color: var(--ink-2); margin-bottom: 10px;
}
.cm-soon__text {
  margin: 0 0 14px;
  font-family: var(--font-head); font-weight: 700; font-size: 1.02rem;
  color: var(--brand-ink);
}
.cm-soon__note {
  margin: 0 auto; max-width: 54ch;
  font-size: .88rem; line-height: 1.72; color: var(--muted);
}

/* ---------- onward route cards ---------- */
.cm-route {
  display: flex; flex-direction: column; height: 100%;
  padding: 28px 26px;
  border-radius: var(--radius-lg);
  background: var(--surface); border: 1px solid var(--line);
  box-shadow: var(--shadow-xs);
  text-align: center; align-items: center;
  transition: transform .28s var(--ease), box-shadow .28s var(--ease), border-color .28s var(--ease);
}
.cm-route:hover { transform: translateY(-6px); box-shadow: var(--shadow); border-color: var(--brand-tint); }
.cm-route__ico {
  width: 54px; height: 54px; margin-bottom: 16px;
  display: grid; place-items: center; border-radius: 16px;
  background: var(--brand-soft); border: 1px solid var(--brand-tint);
  color: var(--brand-ink); font-size: 1.3rem;
  transition: background .28s var(--ease), color .28s var(--ease), border-color .28s var(--ease);
}
.cm-route:hover .cm-route__ico { background: var(--brand); border-color: var(--brand); color: #fff; }
.cm-route h3 {
  font-family: var(--font-head); font-weight: 700; font-size: 1.05rem;
  color: var(--ink-2); margin-bottom: 8px;
}
.cm-route p { font-size: .87rem; line-height: 1.65; color: var(--muted); margin-bottom: 16px; }
.cm-route__more {
  margin-top: auto;
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-head); font-weight: 600; font-size: .84rem;
  color: var(--brand-ink);
}
.cm-route__more i { transition: transform .28s var(--ease); }
.cm-route:hover .cm-route__more i { transform: translateX(4px); }

/* ---------- radio group in the application form ----------
   Bootstrap only reveals .invalid-feedback next to the invalid control, and a
   radio group has no single control to hang it on, so the message is forced
   visible with .d-block and hidden again once the group is valid. */
.cm-radios { display: flex; flex-wrap: wrap; gap: 8px 22px; padding-top: 6px; }
.cm-radios__err { display: none !important; }
.was-validated .cm-radios:has(:invalid) ~ .cm-radios__err { display: block !important; }
fieldset > legend.form-label { float: none; width: auto; margin-bottom: 4px; font-size: .84rem; }

@media (max-width: 575.98px) {
  .cm-soon { padding: 34px 22px 30px; }
  .cm-cta__inner { padding: 58px 0; }
}
@media (prefers-reduced-motion: reduce) {
  .cm-route, .cm-route__ico, .cm-route__more i { transition: none; }
  .cm-route:hover { transform: none; }
  .cm-route:hover .cm-route__more i { transform: none; }
}

/* ==========================================================================
   OTHER SERVICES BY IFERP (services.php)
   Two-by-two card grid. Cards are the anchor targets for the mega-menu
   sub-items, so each carries an id.
   ========================================================================== */
/* no margin-top: the cards sit directly under the banner and the section's own
   padding is the only spacing wanted */
.sv-grid {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px;
}
.sv-card {
  position: relative; overflow: hidden;
  display: flex; flex-direction: column;
  padding: 30px 28px 26px;
  border-radius: var(--radius-lg);
  background: var(--surface); border: 1px solid var(--line);
  box-shadow: var(--shadow-xs);
  transition: transform .28s var(--ease), box-shadow .28s var(--ease), border-color .28s var(--ease);
  text-decoration: none; color: inherit;   /* the whole card is the link */
}
.sv-card:focus-visible { outline: 3px solid var(--brand); outline-offset: 3px; }
.sv-card::before {                       /* corner wash, brightens on hover */
  content: ""; position: absolute; right: -44px; top: -44px;
  width: 152px; height: 152px; border-radius: 50%;
  background: radial-gradient(circle, var(--brand-soft), transparent 68%);
  opacity: .85; transition: opacity .28s var(--ease); pointer-events: none;
}
.sv-card:hover { transform: translateY(-6px); box-shadow: var(--shadow); border-color: var(--brand-tint); }
.sv-card:hover::before { opacity: 1; }
.sv-card > * { position: relative; z-index: 1; }

/* the anchored card flashes its border so a menu jump is visible */
.sv-card:target { border-color: var(--brand); box-shadow: var(--shadow-sm); }

.sv-card__ico {
  width: 46px; height: 46px; margin-bottom: 18px;
  display: grid; place-items: center; border-radius: 14px;
  background: var(--brand-soft); border: 1px solid var(--brand-tint);
  color: var(--brand-ink); font-size: 1.15rem;
  transition: background .28s var(--ease), color .28s var(--ease), border-color .28s var(--ease);
}
.sv-card:hover .sv-card__ico { background: var(--brand); border-color: var(--brand); color: #fff; }

.sv-card__title {
  font-family: var(--font-head); font-weight: 700;
  font-size: 1.08rem; letter-spacing: -.01em;
  color: var(--ink-2); margin-bottom: 10px;
}
.sv-card__text {
  margin: 0 0 20px;
  font-size: .88rem; line-height: 1.72; color: var(--muted);
}
/* the call to action at the foot of the card; the card itself carries the href */
.sv-card__more {
  margin-top: auto;
  display: inline-flex; align-items: center; gap: 8px;
  align-self: flex-start;
  font-family: var(--font-head); font-weight: 700;
  font-size: .7rem; letter-spacing: .14em; text-transform: uppercase;
  color: var(--brand-ink);
}
.sv-card__more i { font-size: .85rem; transition: transform .28s var(--ease); }
.sv-card:hover .sv-card__more i { transform: translateX(4px); }

@media (max-width: 767.98px) {
  .sv-grid { grid-template-columns: 1fr; }
}
@media (max-width: 575.98px) {
  .sv-card { padding: 26px 22px 24px; }
}
@media (prefers-reduced-motion: reduce) {
  .sv-card, .sv-card__ico, .sv-card::before, .sv-card__more i { transition: none; }
  .sv-card:hover { transform: none; }
  .sv-card:hover .sv-card__more i { transform: none; }
}

/* ==========================================================================
   CONTACT HERO (contact-us.php)
   Skyline on the right, dark scrim on the left so the type stays legible, red
   sweep across the bottom.
   ========================================================================== */
.ct-hero {
  position: relative;
  overflow: hidden;
  padding: calc(var(--header-h) + 62px) 0 132px;   /* bottom clears the sweep */
  color: #fff;
  /* The photo sits under a scrim that is near-opaque on the left and clears to
     the right, which is what keeps the headline readable over a bright skyline.
     NOTE ../../ — this rule lives in assets/css/style.css, so url() resolves
     against the STYLESHEET, not the page (bug-050). */
  background:
    linear-gradient(100deg,
      rgba(8, 8, 12, .96) 0%,
      rgba(10, 9, 14, .92) 32%,
      rgba(12, 6, 10, .72) 52%,
      rgba(16, 6, 10, .42) 72%,
      rgba(20, 6, 10, .3) 100%),
    url("../../img/hero-jakarta.jpg") right center / cover no-repeat,
    #0a0a0e;
}
/* network-node texture over the photo, fading out towards the copy */
.ct-hero::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image:
    linear-gradient(to right,  rgba(255, 255, 255, .05) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255, 255, 255, .05) 1px, transparent 1px),
    radial-gradient(rgba(255, 140, 148, .45) 1.5px, transparent 1.6px);
  background-size: 58px 58px, 58px 58px, 58px 58px;
  background-position: 0 0, 0 0, 29px 29px;
  -webkit-mask-image: linear-gradient(100deg, transparent 34%, #000 72%);
          mask-image: linear-gradient(100deg, transparent 34%, #000 72%);
}
.ct-hero > .container { position: relative; z-index: 2; }

.ct-hero__sweep {
  position: absolute; left: 0; right: 0; bottom: -1px;
  width: 100%; height: 130px;
  z-index: 1;
  display: block;
}

.ct-hero__crumbs { margin-bottom: 26px; }
.ct-hero__crumbs ol {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: 8px;
  font-size: .8rem; color: rgba(255, 255, 255, .58);
}
.ct-hero__crumbs a { color: rgba(255, 255, 255, .85); }
.ct-hero__crumbs a:hover { color: #fff; }
.ct-hero__crumbs li[aria-current] { color: #fff; font-weight: 600; }

.ct-hero__kicker {
  margin: 0 0 10px;
  font-family: var(--font-head); font-weight: 700;
  font-size: .92rem; letter-spacing: .02em;
  color: #ff5a63;                        /* lifted off --brand for contrast on black */
}
.ct-hero__title {
  margin: 0 0 18px;
  font-family: var(--font-head); font-weight: 800;
  font-size: clamp(2.4rem, 6.4vw, 4.6rem);
  line-height: 1.02; letter-spacing: -.035em;
  text-transform: uppercase;
  color: #fff;
}
.ct-hero__text {
  margin: 0 0 34px;
  font-size: 1rem; line-height: 1.72;
  color: rgba(255, 255, 255, .82);
}

/* ---------- quick-contact strip ---------- */
.ct-quick {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-wrap: wrap; align-items: center;
  gap: 18px 30px;
}
.ct-quick li {
  display: flex; align-items: center; gap: 13px;
  padding-right: 30px;
  border-right: 1px solid rgba(255, 255, 255, .2);
}
.ct-quick li:last-child { border-right: 0; padding-right: 0; }
.ct-quick__ico {
  width: 44px; height: 44px; flex: 0 0 44px;
  display: grid; place-items: center; border-radius: 50%;
  background: var(--brand); color: #fff; font-size: 1.05rem;
  box-shadow: 0 8px 20px rgba(223, 37, 49, .38);
}
.ct-quick__body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ct-quick__body b {
  font-family: var(--font-head); font-weight: 700; font-size: .84rem; color: #fff;
}
.ct-quick__body a,
.ct-quick__body > span {
  font-size: .86rem; color: rgba(255, 255, 255, .78);
  overflow-wrap: anywhere;
}
.ct-quick__body a:hover { color: #fff; }

@media (max-width: 991.98px) {
  /* the skyline is cropped hard at this width, so centre the frame and lean on
     a flatter scrim instead of the left-to-right one */
  .ct-hero {
    padding: calc(var(--header-h) + 46px) 0 110px;
    background:
      linear-gradient(180deg, rgba(8, 8, 12, .93) 0%, rgba(12, 6, 10, .82) 55%, rgba(18, 6, 10, .88) 100%),
      url("../../img/hero-jakarta.jpg") center / cover no-repeat,
      #0a0a0e;
  }
  .ct-hero::before {
    -webkit-mask-image: linear-gradient(180deg, transparent 20%, #000 90%);
            mask-image: linear-gradient(180deg, transparent 20%, #000 90%);
  }
  .ct-hero__sweep { height: 96px; }
}
@media (max-width: 767.98px) {
  /* stacked: the vertical rules become bottom rules */
  .ct-quick { flex-direction: column; align-items: flex-start; gap: 0; }
  .ct-quick li {
    width: 100%;
    padding: 13px 0; border-right: 0;
    border-bottom: 1px solid rgba(255, 255, 255, .16);
  }
  .ct-quick li:first-child { padding-top: 0; }
  .ct-quick li:last-child { border-bottom: 0; padding-bottom: 0; }
}
@media (max-width: 575.98px) {
  .ct-hero { padding: calc(var(--header-h) + 36px) 0 88px; }
  .ct-hero__text br { display: none; }   /* let it wrap naturally at this width */
  .ct-hero__sweep { height: 72px; }
}



/* ==========================================================================
   CONFERENCE REGISTRATION (conference-registration.php)
   Two-column: fee/packages/details on the left, a sticky order summary right.
   Scoped --rg-* tokens; the accent stays the site brand.
   ========================================================================== */
.rg-main {
  --rg-accent: var(--brand);
  --rg-accent-soft: var(--brand-soft);
  --rg-gold: #f6b12b;
  --rg-gold-soft: #fff6e3;
  --rg-teal: #0d9488;
}

/* ---------- offer cards ---------- */
.rg-offer {
  position: relative; height: 100%;
  padding: 26px 24px;
  border-radius: var(--radius-lg);
  background: linear-gradient(160deg, var(--brand-soft), #fbdde0);
  border: 1px solid var(--brand-tint);
  text-align: center;
}
.rg-offer--alt { background: linear-gradient(160deg, #fff5f6, var(--brand-soft)); }
.rg-offer__ico {
  width: 46px; height: 46px; margin: 0 auto 12px;
  display: grid; place-items: center; border-radius: 50%;
  background: #fff; color: var(--brand); font-size: 1.15rem;
  box-shadow: var(--shadow-xs);
}
.rg-offer__title {
  margin: 0 auto 12px; max-width: 44ch;
  font-family: var(--font-head); font-weight: 700; font-size: .95rem; line-height: 1.55;
  color: var(--ink-2);                                  /* 7.9:1 on the cream ground */
}
.rg-offer__title--lg { font-size: 1.25rem; }
.rg-offer__pill {
  display: inline-block; margin-bottom: 14px;
  padding: 5px 14px; border-radius: 999px;
  background: var(--brand); color: #fff;            /* 4.72:1 */
  font-family: var(--font-head); font-weight: 700; font-size: .74rem;
  letter-spacing: .06em; text-transform: uppercase;
}

.rg-offer__more { text-align: left; }
.rg-offer__more > summary {
  display: inline-flex; align-items: center; gap: 9px;
  margin: 0 auto; padding: 10px 22px;
  border-radius: var(--radius-sm);
  background: var(--brand); color: #fff;                 /* 4.72:1 */
  font-family: var(--font-head); font-weight: 700; font-size: .84rem;
  cursor: pointer; list-style: none;
  width: fit-content;
  transition: background .26s var(--ease);
}
.rg-offer--alt .rg-offer__more > summary { background: var(--brand); color: #fff; }
.rg-offer__more > summary::-webkit-details-marker { display: none; }
.rg-offer__more > summary:hover { background: var(--brand-dark); }
.rg-offer--alt .rg-offer__more > summary:hover { background: var(--brand-dark); }
.rg-offer__more > summary i { transition: transform .26s var(--ease); }
.rg-offer__more[open] > summary i { transform: rotate(180deg); }
/* the summary is inline-flex, so centre it with a flex parent */
.rg-offer__more { display: flex; flex-direction: column; align-items: center; }

.rg-offer__body {
  width: 100%; margin-top: 16px; padding: 16px 18px;
  border-radius: var(--radius-sm);
  background: rgba(255, 255, 255, .8);
  border: 1px solid var(--brand-tint);
  text-align: left;
}
.rg-offer__body p { margin: 0 0 10px; font-size: .84rem; line-height: 1.7; color: var(--ink-3); }
.rg-offer__body ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.rg-offer__body li { display: flex; align-items: flex-start; gap: 9px; }
.rg-offer__body li i {
  flex: 0 0 17px; width: 17px; height: 17px; margin-top: .18em;
  display: grid; place-items: center; border-radius: 50%;
  background: #1f9d55; color: #fff; font-size: .6rem;
}
.rg-offer__body li span { font-size: .83rem; line-height: 1.6; color: var(--ink-3); }
.rg-offer__body li b { color: var(--ink-2); }

/* ---------- step rail ---------- */
.rg-steps-band { padding: 58px 0; background: var(--bg); border-block: 1px solid var(--line); }
.rg-steps {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px;
}
.rg-step {
  position: relative;
  display: flex; flex-direction: column; align-items: center; gap: 12px; text-align: center;
}
.rg-step + .rg-step::before {
  content: ""; position: absolute; z-index: 0;
  top: 60px; right: calc(50% + 34px); left: calc(-50% + 34px);
  border-top: 2px dashed var(--brand-tint);
}
.rg-step__label { font-family: var(--font-head); font-weight: 700; font-size: .95rem; color: var(--ink-2); }
.rg-step__ico {
  position: relative; z-index: 1;
  width: 54px; height: 54px;
  display: grid; place-items: center; border-radius: 50%;
  background: var(--brand-soft); color: var(--brand-ink); font-size: 1.3rem;
}
.rg-step__ico--ok   { background: #e6f6ec; color: #1f9d55; }
.rg-step__ico--cart { background: #fdecec; color: #d8442f; }
.rg-step__text { font-size: .82rem; line-height: 1.55; color: var(--ink-3); }

/* ---------- panels ---------- */
.rg-panel {
  margin-bottom: 24px;
  border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--surface); box-shadow: var(--shadow-xs); overflow: hidden;
}
.rg-panel__head {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  padding: 15px 20px; border-bottom: 1px solid var(--line);
  background: var(--surface-3);
}
.rg-panel__head h3 {
  display: flex; align-items: center; gap: 11px; margin: 0;
  font-family: var(--font-head); font-weight: 700; font-size: 1.02rem; color: var(--ink-2);
}
.rg-num {
  width: 26px; height: 26px; flex: 0 0 26px;
  display: grid; place-items: center; border-radius: 50%;
  background: var(--rg-accent); color: #fff;
  font-size: .8rem; font-weight: 700;
}
.rg-num--light { background: rgba(255, 255, 255, .22); }
.rg-panel__tag {
  padding: 5px 13px; border-radius: 999px;
  background: var(--brand-soft); border: 1px solid var(--brand-tint);
  color: var(--brand-ink-deep);                          /* 6.18:1 */
  font-family: var(--font-head); font-weight: 700; font-size: .72rem;
  letter-spacing: .06em; text-transform: uppercase; white-space: nowrap;
}
.rg-panel__body { padding: 20px; }
.rg-panel__lead { margin: 0 0 20px; font-size: .89rem; line-height: 1.7; color: var(--muted); }

/* ---------- tabs ---------- */
.rg-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 18px; }
.rg-tab {
  padding: 8px 18px; border-radius: 999px;
  border: 1px solid var(--line); background: var(--surface);
  font-family: var(--font-head); font-weight: 600; font-size: .82rem; color: var(--ink-3);
  cursor: pointer;
  transition: background .22s var(--ease), color .22s var(--ease), border-color .22s var(--ease);
}
.rg-tab:hover { border-color: var(--rg-accent); color: var(--rg-accent); }
.rg-tab.is-active { background: var(--rg-accent); border-color: var(--rg-accent); color: #fff; }
.rg-tab:focus-visible { outline: 3px solid var(--brand); outline-offset: 2px; }
.rg-tabpanel[hidden] { display: none; }

/* ---------- fee tables ---------- */
.rg-tbar {
  margin: 0 0 0; padding: 10px 16px;
  background: var(--rg-accent); color: #fff;   /* 9.6:1 */
  font-family: var(--font-head); font-weight: 700; font-size: .8rem;
  letter-spacing: .05em; text-transform: uppercase; text-align: center;
  border-radius: var(--radius-sm) var(--radius-sm) 0 0;
}
.rg-tbar--alt { margin-top: 22px; }

.rg-table { width: 100%; margin: 0 0 4px; border-collapse: collapse; min-width: 440px; }
.rg-table thead th {
  padding: 10px 12px; background: var(--rg-accent-soft);
  font-family: var(--font-head); font-weight: 700; font-size: .73rem;
  color: var(--brand-ink-deep); text-align: left; white-space: nowrap;
}
.rg-table tbody th, .rg-table tbody td {
  border: 1px solid #0000000f;
  padding: 10px 12px; border-top: 1px solid var(--line-2);
  font-size: .78rem; color: var(--ink-3); vertical-align: middle;
}
.rg-table tbody th { font-weight: 600; text-align: left; color: var(--ink-2); background: var(--surface-3); }
.rg-table tbody th small { display: block; font-weight: 400; font-size: .71rem; color: var(--muted); }
.rg-table tbody tr:hover th, .rg-table tbody tr:hover td { background: var(--brand-soft); }
.rg-table label {
  display: inline-flex; align-items: center; gap: 8px; margin: 0;
  cursor: pointer; font-weight: 600; color: var(--ink-2);
}
.rg-table input[type="radio"] { accent-color: var(--brand); width: 15px; height: 15px; }
.rg-na { color: var(--muted-2); }
.rg-ast { color: var(--brand-ink); }


/* ---------- local rates ---------- */
.rg-locals { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 20px; }
.rg-local {
  display: flex; align-items: center; gap: 14px;
  padding: 14px 16px;
  border: 1px solid var(--line); border-radius: var(--radius-sm);
  background: var(--surface);
}
.rg-local__ico {
  flex: 0 0 44px; width: 44px; height: 44px;
  display: grid; place-items: center; border-radius: 12px;
  background: var(--brand-soft); color: var(--brand-ink); font-size: 1.15rem;
}
.rg-local p { margin: 0; }
.rg-local b { display: block; font-family: var(--font-head); font-size: .92rem; color: var(--ink-2); }
.rg-local small { font-size: .76rem; color: var(--muted); }

/* ---------- group CTA ---------- */
.rg-group {
  display: flex; align-items: center; flex-wrap: wrap; gap: 16px;
  margin-top: 20px; padding: 20px;
  border-radius: var(--radius-sm);
  background: linear-gradient(140deg, #101017, #1c0409 60%, #2d060c);
  color: #fff;
}
.rg-group__ico {
  flex: 0 0 46px; width: 46px; height: 46px;
  display: grid; place-items: center; border-radius: 13px;
  background: rgba(255, 255, 255, .12); color: #ff8f96; font-size: 1.2rem;
}
.rg-group > div { flex: 1 1 240px; }
.rg-group b { display: block; font-family: var(--font-head); font-size: .98rem; margin-bottom: 4px; }
.rg-group p { margin: 0; font-size: .82rem; line-height: 1.6; color: rgba(255, 255, 255, .78); }
.rg-group__btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 18px; border-radius: var(--radius-sm);
  background: #fff; color: var(--ink-2);
  font-family: var(--font-head); font-weight: 600; font-size: .82rem;
  text-decoration: none; white-space: nowrap;
  transition: background .26s var(--ease), color .26s var(--ease);
}
.rg-group__btn:hover { background: var(--brand); color: #fff; }

.rg-note {
  margin: 18px 0 0; padding: 13px 16px;
  border-left: 3px solid var(--brand); border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  background: var(--brand-soft);
  font-size: .82rem; line-height: 1.7; color: var(--ink-3);
}

/* ---------- publication packages ---------- */
.rg-packs { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.rg-pack {
  position: relative;
  padding: 20px 18px 18px;
  border: 1px solid var(--line); border-radius: var(--radius-sm);
  background: var(--surface);
  transition: border-color .26s var(--ease), box-shadow .26s var(--ease);
}
.rg-pack:hover { border-color: var(--brand-tint); box-shadow: var(--shadow-xs); }
.rg-pack--gold { background: var(--rg-gold-soft, #fff6e3); border-color: #f3d9a4; }
.rg-pack--teal { background: #eefbf8; border-color: #b7e7de; }
.rg-pack.is-added { border-color: var(--brand); box-shadow: 0 0 0 2px var(--brand-tint); }
.rg-pack__badge {
  position: absolute; top: -10px; left: 16px;
  padding: 3px 11px; border-radius: 999px;
  background: #b06a00; color: #fff;
  font-family: var(--font-head); font-weight: 700; font-size: .66rem;
  letter-spacing: .04em;
}
.rg-pack--teal .rg-pack__badge { background: #0d7d72; }
.rg-pack__q {
  margin: 0 0 12px;
  font-family: var(--font-head); font-weight: 700; font-size: .88rem; color: var(--ink-2);
}
.rg-pack__q span {
  display: block; margin-top: 3px;
  font-size: .68rem; letter-spacing: .1em; text-transform: uppercase; color: var(--muted);
}
.rg-pack__price {
  margin: 0 0 2px;
  font-family: var(--font-head); font-weight: 800; font-size: 1.5rem; color: var(--brand-ink);
}
.rg-pack__price small {
  display: block; font-family: var(--font-body); font-weight: 600;
  font-size: .68rem; letter-spacing: .06em; text-transform: uppercase; color: var(--muted);
}
.rg-pack__was { margin: 0 0 14px; font-size: .76rem; color: var(--muted); text-decoration: line-through; }
.rg-pack__act { display: flex; flex-wrap: wrap; gap: 8px; }
.rg-pack__add {
  flex: 1 1 auto;
  padding: 9px 16px; border: 0; border-radius: var(--radius-sm);
  background: var(--rg-accent); color: #fff;
  font-family: var(--font-head); font-weight: 600; font-size: .8rem;
  cursor: pointer;
  transition: background .26s var(--ease);
}
.rg-pack__add:hover { background: var(--brand-dark); }
.rg-pack__add.is-added { background: #1f7a45; }
.rg-pack__add:focus-visible { outline: 3px solid var(--brand); outline-offset: 2px; }
.rg-pack__link {
  flex: 1 1 auto; text-align: center;
  padding: 9px 16px; border: 1px solid var(--line); border-radius: var(--radius-sm);
  font-family: var(--font-head); font-weight: 600; font-size: .8rem;
  color: var(--ink-2); text-decoration: none; background: var(--surface);
  transition: border-color .26s var(--ease), color .26s var(--ease);
}
.rg-pack__link:hover { border-color: var(--brand); color: var(--brand-ink); }

/* ---------- addons ---------- */
.rg-addhead { margin: 26px 0 14px; text-align: center; }
.rg-addhead span {
  display: inline-block; padding: 5px 18px; border-radius: 999px;
  background: var(--rg-accent-soft); color: var(--brand-ink-deep);
  font-family: var(--font-head); font-weight: 700; font-size: .76rem;
  letter-spacing: .1em; text-transform: uppercase;
}
.rg-addons { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.rg-add {
  display: flex; flex-direction: column; gap: 6px;
  margin: 0; padding: 14px;
  border: 1px solid var(--line); border-radius: var(--radius-sm);
  background: var(--surface); cursor: pointer;
  transition: border-color .22s var(--ease), background .22s var(--ease);
}
.rg-add:hover { border-color: var(--brand-tint); }
.rg-add:has(input:checked) { border-color: var(--brand); background: var(--brand-soft); }
.rg-add input { accent-color: var(--brand); width: 15px; height: 15px; }
.rg-add__name { font-size: .78rem; line-height: 1.5; color: var(--ink-2); }
.rg-add__price { font-family: var(--font-head); font-weight: 700; font-size: .84rem; color: var(--brand-ink); }
.rg-fine { margin: 14px 0 0; font-size: .74rem; line-height: 1.6; color: var(--muted); text-align: center; }

/* ---------- local participant rate, as a selectable button ----------
   A radio dressed as a button so it joins the name="fee" group: picking one
   deselects whatever was chosen in the tables above, exactly as a delegate
   would expect, and it flows straight into the order summary. */
.rg-localfee { display: inline-flex; flex-direction: column; gap: 5px; margin: 0; cursor: pointer; }
.rg-localfee input { position: absolute; opacity: 0; width: 0; height: 0; }
.rg-localfee__btn {
  display: inline-flex; align-items: baseline; gap: 7px;
  padding: 9px 18px; border-radius: 999px;
  border: 1.5px solid var(--brand-tint); background: var(--surface);
  font-family: var(--font-head); font-weight: 700; font-size: .92rem;
  color: var(--brand-ink); white-space: nowrap;
  transition: background .24s var(--ease), border-color .24s var(--ease), color .24s var(--ease);
}
.rg-localfee__btn small { font-size: .68rem; font-weight: 600; letter-spacing: .04em; opacity: .8; }
.rg-localfee:hover .rg-localfee__btn { border-color: var(--brand); }
.rg-localfee input:checked + .rg-localfee__btn {
  background: var(--rg-accent); border-color: var(--rg-accent); color: #fff;   /* 4.72:1 */
}
.rg-localfee input:focus-visible + .rg-localfee__btn { outline: 3px solid var(--brand); outline-offset: 3px; }
.rg-localfee__usd { font-size: .71rem; color: var(--muted); }

/* auto-filled fields read as output, not input */
.rg-auto { background: var(--surface-3); cursor: default; }

/* ---------- sticky sidebar ---------- */
.rg-side { position: sticky; top: calc(var(--header-h) + 16px); }

.rg-summary {
  border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--surface); box-shadow: var(--shadow-xs); overflow: hidden;
}
.rg-summary__head {
  display: flex; align-items: center; gap: 11px;
  padding: 14px 18px;
  background: var(--rg-accent); color: #fff;
  font-family: var(--font-head); font-weight: 700; font-size: 1rem;
}
.rg-line {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 14px 18px 4px;
  font-size: .85rem; color: var(--ink-3);
}
.rg-line b { font-family: var(--font-head); font-size: 1rem; color: var(--ink-2); white-space: nowrap; }
.rg-line__note {
  margin: 0; padding: 0 18px 12px;
  font-size: .74rem; line-height: 1.5; color: var(--muted);
  border-bottom: 1px solid var(--line-2);
}
.rg-line__note.is-set { color: var(--brand-ink-deep); font-weight: 600; }
.rg-line__note.is-error { color: var(--brand-ink); font-weight: 700; }

.rg-prem {
  display: flex; align-items: flex-start; gap: 10px;
  margin: 0; padding: 14px 18px 6px; cursor: pointer;
}
.rg-prem input { position: absolute; opacity: 0; width: 0; height: 0; }
.rg-prem__box {
  flex: 0 0 20px; width: 20px; height: 20px; margin-top: .05em;
  display: grid; place-items: center; border-radius: 6px;
  border: 1px solid var(--muted-2); background: var(--surface);
  color: transparent; font-size: .8rem;
  transition: background .22s var(--ease), border-color .22s var(--ease), color .22s var(--ease);
}
.rg-prem input:checked + .rg-prem__box { background: #1f7a45; border-color: #1f7a45; color: #fff; }
.rg-prem input:focus-visible + .rg-prem__box { outline: 3px solid var(--brand); outline-offset: 2px; }
.rg-prem__text {
  font-family: var(--font-head); font-weight: 600; font-size: .82rem; line-height: 1.45;
  color: var(--ink-2);
}

.rg-total {
  display: flex; align-items: center; justify-content: space-between;
  padding: 15px 18px; margin-top: 4px;
  background: var(--rg-accent-soft);
  font-family: var(--font-head); font-weight: 800; font-size: 1rem; color: var(--ink-2);
  text-transform: uppercase; letter-spacing: .04em;
}
.rg-total b { font-size: 1.2rem; color: var(--rg-accent); }
.rg-checkout {
  display: flex; align-items: center; justify-content: center; gap: 9px;
  width: calc(100% - 36px); margin: 16px 18px;
  padding: 13px 20px; border: 0; border-radius: var(--radius-sm);
  background: var(--rg-accent); color: #fff;   /* 9.6:1 */
  font-family: var(--font-head); font-weight: 700; font-size: .92rem;
  letter-spacing: .04em; text-transform: uppercase; cursor: pointer;
  transition: background .26s var(--ease);
}
.rg-checkout:hover { background: var(--brand-dark); }
.rg-checkout:focus-visible { outline: 3px solid var(--brand); outline-offset: 2px; }

.rg-advisory {
  margin-top: 18px; padding: 18px;
  border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--surface-3);
}
.rg-advisory__head {
  display: flex; align-items: center; gap: 9px; margin: 0 0 10px;
  font-family: var(--font-head); font-weight: 700; font-size: .9rem; color: var(--ink-2);
}
.rg-advisory__head span {
  width: 30px; height: 30px; flex: 0 0 30px;
  display: grid; place-items: center; border-radius: 9px;
  background: var(--brand-soft); color: var(--brand-ink); font-size: .9rem;
}
.rg-advisory p { margin: 0 0 10px; font-size: .74rem; line-height: 1.7; color: var(--muted); }
.rg-advisory__contact { display: flex; flex-wrap: wrap; gap: 6px 16px; margin: 0; }
.rg-advisory__contact a {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: .75rem; font-weight: 600; color: var(--brand-ink-deep);
}
.rg-advisory__contact a:hover { color: var(--brand-ink); }

/* ---------- inclusions ---------- */
.rg-incl { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
.rg-inclcard {
  padding: 22px 20px;
  border: 1px solid var(--line); border-radius: var(--radius-sm);
  background: var(--surface); box-shadow: var(--shadow-xs);
  transition: transform .26s var(--ease), box-shadow .26s var(--ease), border-color .26s var(--ease);
}
.rg-inclcard:hover { transform: translateY(-4px); box-shadow: var(--shadow-sm); border-color: var(--brand-tint); }
.rg-inclcard__ico {
  width: 40px; height: 40px; margin-bottom: 12px;
  display: grid; place-items: center; border-radius: 11px;
  background: var(--brand-soft); color: var(--brand-ink); font-size: 1.05rem;
}
.rg-inclcard h3 {
  margin: 0 0 7px;
  font-family: var(--font-head); font-weight: 700; font-size: .92rem; color: var(--brand-ink-deep);
}
.rg-inclcard p { margin: 0; font-size: .82rem; line-height: 1.65; color: var(--muted); }

.rg-cta2 { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; margin-top: 34px; }
.rg-cta2__btn {
  padding: 13px 30px; border-radius: 999px;
  font-family: var(--font-head); font-weight: 700; font-size: .9rem;
  text-decoration: none;
  transition: transform .26s var(--ease), background .26s var(--ease);
}
.rg-cta2__btn--gold { background: var(--brand); color: #fff; }        /* 4.72:1 */
.rg-cta2__btn--gold:hover { background: var(--brand-dark); color: #fff; transform: translateY(-2px); }
.rg-cta2__btn--blue { background: var(--brand); color: #fff; }
.rg-cta2__btn--blue:hover { background: var(--brand-dark); color: #fff; transform: translateY(-2px); }

/* ---------- payment + bank ---------- */
.rg-pay, .rg-bankcard {
  padding: clamp(24px, 4vw, 38px);
  border-radius: var(--radius);
  background: var(--brand-soft); border: 1px solid var(--brand-tint);
}
.rg-bankcard { margin-top: 22px; }
.rg-pay__head {
  margin: 0 0 16px;
  font-family: var(--font-head); font-weight: 800;
  font-size: clamp(1.3rem, 2.6vw, 1.8rem); color: var(--ink-2);
}
.rg-pay p { font-size: .89rem; line-height: 1.8; color: var(--ink-3); }
.rg-pay__list { list-style: none; margin: 16px 0; padding: 0; display: grid; gap: 8px; }
.rg-pay__list li {
  display: flex; align-items: center; gap: 6px;
  font-size: .88rem; font-weight: 600; color: var(--ink-2);
}
.rg-pay__list i { color: var(--brand-ink); font-size: 1.1rem; }
.rg-pay__strong { font-weight: 600; color: var(--ink-2); }

.rg-bank { width: 100%; margin: 0; border-collapse: collapse; min-width: 420px; background: var(--surface); }
.rg-bank th, .rg-bank td {
  padding: 12px 16px; border-bottom: 1px solid var(--line);
  font-size: .87rem; text-align: left;
}
.rg-bank th { width: 40%; font-weight: 600; color: var(--muted); }
.rg-bank td { font-weight: 600; color: var(--ink-2); }
.rg-bank tr:last-child th, .rg-bank tr:last-child td { border-bottom: 0; }
.rg-bankcard__note { margin: 18px 0; font-size: .87rem; line-height: 1.8; color: var(--ink-3); }
.rg-dl {
  display: inline-flex; align-items: center;
  padding: 12px 26px; border-radius: var(--radius-sm);
  background: var(--brand); color: #fff;
  font-family: var(--font-head); font-weight: 700; font-size: .86rem;
  letter-spacing: .04em; text-transform: uppercase; text-decoration: none;
  transition: background .26s var(--ease);
}
.rg-dl:hover { background: var(--brand-dark); color: #fff; }

/* ---------- responsive ---------- */
@media (max-width: 1199.98px) {
  .rg-addons { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 991.98px) {
  /* the summary stops being sticky once it drops below the main column,
     otherwise it pins to the top of a section it no longer sits beside */
  .rg-side { position: static; }
  .rg-steps { grid-template-columns: repeat(2, 1fr); gap: 30px 20px; }
  .rg-step + .rg-step::before { display: none; }
  .rg-incl { grid-template-columns: 1fr; }
}
@media (max-width: 767.98px) {
  .rg-packs { grid-template-columns: 1fr; }
  .rg-locals { grid-template-columns: 1fr; }
}
@media (max-width: 575.98px) {
  .rg-steps { grid-template-columns: 1fr; }
  .rg-addons { grid-template-columns: 1fr; }
  .rg-panel__head { flex-direction: column; align-items: flex-start; gap: 8px; }
  .rg-cta2__btn { width: 100%; text-align: center; }
}
@media (prefers-reduced-motion: reduce) {
  .rg-tab, .rg-pack, .rg-pack__add, .rg-pack__link, .rg-add, .rg-inclcard,
  .rg-checkout, .rg-cta2__btn, .rg-group__btn, .rg-prem__box,
  .rg-offer__more > summary, .rg-offer__more > summary i, .rg-dl { transition: none; }
  .rg-inclcard:hover, .rg-cta2__btn:hover { transform: none; }
  .rg-offer__more[open] > summary i { transform: none; }
}

/* ==========================================================================
   GUIDELINES & SUBMISSION (submission-guidelines.php)
   Layout follows the supplied reference — chip row, two split cards with a
   tinted requirement panel, numbered evaluation cards, assistance panel.
   Colours are the SITE palette, not the reference's navy/gold.
   ========================================================================== */
.sg-intro { padding: 0 0 40px; background: var(--bg); }
.sg-intro__inner { max-width: 760px; margin-inline: auto; text-align: center; }
.sg-intro__lead {
  margin: 0 0 22px;
  font-size: 1rem; line-height: 1.8; color: var(--muted);
}
.sg-chips { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }
.sg-chips a {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 9px 20px;
  border: 1px solid var(--line); border-radius: var(--radius-sm);
  background: #df2531; box-shadow: var(--shadow-xs);
  font-family: var(--font-head); font-weight: 600; font-size: .84rem;
  color: #fff; text-decoration: none;
  transition: border-color .24s var(--ease), color .24s var(--ease), transform .24s var(--ease);
}
.sg-chips a i { color: #ffffff; }
.sg-chips a:hover { border-color: var(--brand); color: var(--brand-ink); transform: translateY(-2px); }

/* ---------- split cards ---------- */
.sg-card {
  position: relative; overflow: hidden;
  border: 1px solid var(--line); border-radius: var(--radius-lg);
  background: var(--surface); box-shadow: var(--shadow-xs);
}
/* the accent rule across the top — the reference uses gold on the first card
   and navy on the second; here it is the brand and a deeper brand */
.sg-card::before {
  content: ""; position: absolute; inset: 0 0 auto; height: 4px;
}
.sg-card--gold::before  { background: linear-gradient(90deg, var(--brand), #f6b12b); }
.sg-card--brand::before { background: linear-gradient(90deg, var(--brand-deep), var(--brand)); }

.sg-card__grid { display: grid; grid-template-columns: 5fr 7fr; gap: 0; }
.sg-card__grid--flip { grid-template-columns: 7fr 5fr; }

.sg-card__side { padding: 32px 30px; min-width: 0; }
.sg-card__ico {
  width: 44px; height: 44px; margin-bottom: 14px;
  display: grid; place-items: center; border-radius: 12px;
  background: var(--brand-soft); color: var(--brand-ink); font-size: 1.2rem;
}
.sg-card__title {
  margin: 0 0 12px;
  font-family: var(--font-head); font-weight: 800;
  font-size: clamp(1.5rem, 2.6vw, 1.95rem); line-height: 1.15; letter-spacing: -.03em;
  color: var(--ink-2);
}
.sg-card__desc { margin: 0 0 18px; font-size: .88rem; line-height: 1.75; color: var(--muted); }

/* spec pills */
.sg-specs { margin: 0 0 20px; display: grid; gap: 10px; }
.sg-spec {
  display: flex; align-items: center; gap: 12px;
  padding: 11px 14px;
  border: 1px solid var(--line); border-radius: var(--radius-sm);
  background: var(--bg-soft);
}
.sg-spec__ico {
  flex: 0 0 30px; width: 30px; height: 30px;
  display: grid; place-items: center; border-radius: 9px;
  background: var(--surface); border: 1px solid var(--line);
  color: var(--brand-ink); font-size: .85rem;
}
.sg-spec dt {
  font-size: .68rem; font-weight: 500; letter-spacing: .08em;
  text-transform: uppercase; color: var(--muted);
}
.sg-spec dd {
  margin: 1px 0 0;
  font-family: var(--font-head); font-weight: 700; font-size: .9rem; color: var(--ink-2);
}

.sg-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.sg-btn {
  flex: 1 1 auto;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 11px 20px; border-radius: var(--radius-sm);
  font-family: var(--font-head); font-weight: 600; font-size: .85rem;
  text-decoration: none; white-space: nowrap;
  transition: background .24s var(--ease), color .24s var(--ease), border-color .24s var(--ease);
}
.sg-btn--ghost { border: 1px solid var(--line); background: var(--surface); color: var(--ink-2); }
.sg-btn--ghost:hover { border-color: var(--brand); color: var(--brand-ink); }
.sg-btn--solid { border: 1px solid var(--brand); background: var(--brand); color: #fff; }  /* 4.72:1 */
.sg-btn--solid:hover { background: var(--brand-dark); border-color: var(--brand-dark); color: #fff; }

/* tinted requirements panel */
.sg-card__panel { padding: 32px 30px; min-width: 0; background: var(--bg-soft); border-left: 1px solid var(--line); }
.sg-card__grid--flip .sg-card__panel { border-left: 0; border-right: 1px solid var(--line); }
.sg-panel__head {
  margin: 0 0 14px;
  font-family: var(--font-head); font-weight: 700; font-size: 1rem; color: var(--ink-2);
}
.sg-panel__head + .sg-reqs { margin-bottom: 26px; }
.sg-reqs { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.sg-reqs li { display: flex; align-items: flex-start; gap: 10px; }
.sg-reqs li i { color: var(--brand-ink); font-size: .95rem; margin-top: .18em; flex-shrink: 0; }
.sg-reqs li span { font-size: .855rem; line-height: 1.7; color: var(--ink-3); }
.sg-reqs li b { color: var(--ink-2); }

/* full-paper inner split */
.sg-split { display: grid; grid-template-columns: 1fr 1fr; gap: 26px; }
.sg-dots { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
.sg-dots li {
  position: relative; padding-left: 17px;
  font-size: .83rem; line-height: 1.65; color: var(--ink-3);
}
.sg-dots li::before {
  content: ""; position: absolute; left: 2px; top: .58em;
  width: 6px; height: 6px; border-radius: 50%; background: var(--brand);
}
.sg-dots li b { color: var(--ink-2); }

.sg-box {
  padding: 15px 16px; border-radius: var(--radius-sm);
  background: var(--surface); border: 1px solid var(--line);
}
.sg-box p { margin: 0 0 9px; font-size: .82rem; line-height: 1.65; color: var(--ink-3); }
.sg-box b { color: var(--ink-2); }

.sg-note {
  margin-top: 12px; padding: 13px 16px;
  border-radius: var(--radius-sm);
  background: var(--brand-soft); border: 1px solid var(--brand-tint);
}
.sg-note__tag {
  display: block; margin-bottom: 5px;
  font-family: var(--font-head); font-weight: 700; font-size: .66rem;
  letter-spacing: .12em; text-transform: uppercase; color: var(--brand-ink-deep);
}
.sg-note p { margin: 0; font-size: .8rem; line-height: 1.6; color: var(--ink-3); }

/* ---------- evaluation steps ---------- */
.sg-steps {
  list-style: none; margin: 0 0 30px; padding: 0;
  display: grid; grid-template-columns: repeat(5, 1fr); gap: 16px;
}
.sg-step {
  position: relative;
  padding: 30px 20px 22px;
  border: 1px solid var(--line); border-radius: var(--radius-sm);
  background: var(--surface); box-shadow: var(--shadow-xs); text-align: center;
  transition: transform .26s var(--ease), box-shadow .26s var(--ease), border-color .26s var(--ease);
}
.sg-step:hover { transform: translateY(-5px); box-shadow: var(--shadow-sm); border-color: var(--brand-tint); }
/* the badge straddles the top edge, so the card needs the padding above */
.sg-step__n {
  position: absolute; top: -15px; left: 50%; transform: translateX(-50%);
  width: 30px; height: 30px;
  display: grid; place-items: center; border-radius: 9px;
  background: var(--brand); color: #fff;
  font-family: var(--font-head); font-weight: 700; font-size: .82rem;
  box-shadow: var(--shadow-xs);
}
.sg-step h3 {
  margin: 0 0 8px;
  font-family: var(--font-head); font-weight: 700; font-size: .92rem;
  line-height: 1.35; color: var(--ink-2);
}
.sg-step p { margin: 0; font-size: .8rem; line-height: 1.65; color: var(--muted); }

/* ---------- assistance ---------- */
.sg-help {
  padding: clamp(30px, 4vw, 46px);
  border-radius: var(--radius-lg);
  background: var(--brand-soft); border: 1px solid var(--brand-tint);
  text-align: center;
}
.sg-help__ico {
  width: 48px; height: 48px; margin: 0 auto 14px;
  display: grid; place-items: center; border-radius: 50%;
  background: #fff; color: var(--brand); font-size: 1.25rem;
  box-shadow: var(--shadow-xs);
}
.sg-help h2 {
  margin: 0 0 10px;
  font-family: var(--font-head); font-weight: 800;
  font-size: clamp(1.3rem, 2.6vw, 1.7rem); color: var(--ink-2);
}
.sg-help p { margin: 0 auto 20px; max-width: 62ch; font-size: .9rem; line-height: 1.75; color: var(--ink-3); }
.sg-help__mail {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 11px 24px; border-radius: var(--radius-sm);
  background: #fff; border: 1px solid var(--line);
  font-family: var(--font-head); font-weight: 600; font-size: .88rem;
  color: var(--ink-2); text-decoration: none;
  transition: border-color .24s var(--ease), color .24s var(--ease);
}
.sg-help__mail i { color: var(--brand-ink); }
.sg-help__mail:hover { border-color: var(--brand); color: var(--brand-ink); }

/* ---------- responsive ---------- */
@media (max-width: 1199.98px) {
  .sg-steps { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 991.98px) {
  /* both cards stack, and the flipped one must put its identity block FIRST so
     the reading order stays title -> requirements on every card */
  .sg-card__grid, .sg-card__grid--flip { grid-template-columns: 1fr; }
  .sg-card__grid--flip .sg-card__side { order: -1; }
  .sg-card__panel { border-left: 0; border-top: 1px solid var(--line); }
  .sg-card__grid--flip .sg-card__panel { border-right: 0; border-top: 1px solid var(--line); }
}
@media (max-width: 767.98px) {
  .sg-steps { grid-template-columns: repeat(2, 1fr); }
  .sg-split { grid-template-columns: 1fr; gap: 22px; }
}
@media (max-width: 575.98px) {
  .sg-steps { grid-template-columns: 1fr; }
  .sg-card__side, .sg-card__panel { padding: 26px 20px; }
  .sg-chips a { flex: 1 1 100%; justify-content: center; }
  /* The long labels ("Sample Full Paper Template") are nowrap, so their
     min-content width propagates up through the grid and pushes the whole
     single column past the viewport. Let them wrap and stack here. */
  .sg-btn { flex: 1 1 100%; white-space: normal; }
}
@media (prefers-reduced-motion: reduce) {
  .sg-chips a, .sg-step, .sg-btn, .sg-help__mail { transition: none; }
  .sg-chips a:hover, .sg-step:hover { transform: none; }
}

/* the "Your abstract should:" / "Required Content Sections:" lead-ins */
.sg-panel__intro {
  margin: -6px 0 12px;
  font-size: .84rem; line-height: 1.6; color: var(--muted);
}
/* the short three-line summary above the annotated required-sections list */
.sg-brief {
  margin: 0 0 16px; padding: 12px 14px 12px 32px;
  border-radius: var(--radius-sm);
  background: var(--surface); border: 1px solid var(--line);
  display: grid; gap: 5px;
}
.sg-brief li { font-size: .82rem; line-height: 1.6; color: var(--ink-3); }
.sg-brief li::marker { color: var(--brand-ink); font-weight: 700; }
/* the inline "Submit your Full paper here" link */
.sg-card__desc a { color: var(--brand-ink); font-weight: 600; }
.sg-card__desc a:hover { color: var(--brand-ink-deep); }

/* ---------- Abstract Evaluation Process: three cards on one row ---------- */
.sg-tri { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.sg-tri__card {
  padding: 26px 24px;
  border: 1px solid var(--line); border-radius: var(--radius-sm);
  background: var(--surface); box-shadow: var(--shadow-xs);
  transition: transform .26s var(--ease), box-shadow .26s var(--ease), border-color .26s var(--ease);
}
.sg-tri__card:hover { transform: translateY(-5px); box-shadow: var(--shadow-sm); border-color: var(--brand-tint); }
.sg-tri__ico {
  width: 44px; height: 44px; margin-bottom: 14px;
  display: grid; place-items: center; border-radius: 12px;
  background: var(--brand-soft); color: var(--brand-ink); font-size: 1.15rem;
}
.sg-tri__card h3 {
  margin: 0 0 8px;
  font-family: var(--font-head); font-weight: 700; font-size: 1rem; color: var(--ink-2);
}
.sg-tri__card p { margin: 0; font-size: .85rem; line-height: 1.7; color: var(--muted); }
/* the Important Note reads as a caution, matching .sg-note elsewhere */
.sg-tri__card--warn { background: var(--brand-soft); border-color: var(--brand-tint); }
.sg-tri__card--warn .sg-tri__ico { background: #fff; border: 1px solid var(--brand-tint); }
.sg-tri__card--warn p { color: var(--ink-3); }

@media (max-width: 991.98px) { .sg-tri { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) {
  .sg-tri__card { transition: none; }
  .sg-tri__card:hover { transform: none; }
}

/* ==========================================================================
   SESSION DETAIL PAGES (intelligence-in-everyday-computing.php, ...)
   Mostly reuses .panel / .check-list / .cm-cta; only these few are new.
   ========================================================================== */
.trk-alias {
  margin: 14px 0 0;
  font-family: var(--font-head); font-weight: 600; font-size: .84rem;
  letter-spacing: .06em; text-transform: uppercase;
  color: rgba(255, 255, 255, .66);
}

/* three core-objective cards on one row */
.trk-tri { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.trk-card {
  display: flex; align-items: flex-start; gap: 14px;
  padding: 24px 22px;
  border: 1px solid var(--line); border-radius: var(--radius-lg);
  background: var(--surface); box-shadow: var(--shadow-xs);
  transition: transform .26s var(--ease), box-shadow .26s var(--ease), border-color .26s var(--ease);
}
.trk-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-sm); border-color: var(--brand-tint); }
.trk-card__n {
  flex: 0 0 36px; width: 36px; height: 36px;
  display: grid; place-items: center; border-radius: 11px;
  background: var(--brand); color: #fff;                 /* 4.72:1 */
  font-family: var(--font-head); font-weight: 700; font-size: .82rem;
}
.trk-card p { margin: 0; font-size: .88rem; line-height: 1.7; color: var(--ink-3); }


@media (max-width: 991.98px) { .trk-tri { grid-template-columns: 1fr; } }
@media (max-width: 575.98px) {
}
@media (prefers-reduced-motion: reduce) {
  .trk-card { transition: none; }
  .trk-card:hover { transform: none; }
}

/* ---------- accent panel (session-N.php) ----------
   The red treatment lives on a MODIFIER, not on `.panel` itself: `.panel` is
   shared with journals-publications, payment-methods, presentation-guidelines,
   registration-guidelines and committee-eligibility, whose inner text is dark
   and becomes illegible on a red ground. */
.panel--accent {
  background: var(--brand);
  border-color: var(--brand);
}
.panel--accent .panel__head { border-bottom-color: rgba(255, 255, 255, .45); }
/* white chip so the red glyph keeps 4.72:1 */
.panel--accent .panel__ico { background: #fff; color: var(--brand); }
/* 1.18rem = 18.88px at 700 weight, which clears the WCAG large-text threshold
   (18.66px bold) — black on this red is 4.45:1, under the 4.5 needed for normal
   text but comfortably over the 3.0 needed for large text */
.panel--accent .panel__title { color: #000; font-size: 1.18rem; }
.panel--accent .panel__sub,
.panel--accent .panel__para { color: #fff; }              /* 4.72:1 */
/* the inline section number is only 12px, so it takes white rather than the
   title's black, which would be 4.45:1 at that size */
.panel--accent .trk-num--sm { background: transparent; color: #fff; box-shadow: none; }

/* ---------- numbered section markers (session-N.php) ----------
   Restored: these are used by all ten session pages. `.trk-num` is the standalone
   chip beside a centred section title; `--sm` is the inline variant that sits
   before a panel title. On `.panel--accent` the chip would be red-on-red, so the
   override further down turns it into plain white type instead. */
.trk-head {
  display: flex; align-items: center; justify-content: center;
  gap: 14px; margin-bottom: 14px;
}
.trk-num {
  flex: 0 0 44px; width: 44px; height: 44px;
  display: grid; place-items: center; border-radius: 13px;
  background: var(--brand); color: #fff;                 /* 4.72:1 */
  font-family: var(--font-head); font-weight: 800; font-size: 1rem;
  box-shadow: var(--shadow-brand);
}
.trk-num--sm {
  flex: none; display: inline-grid;
  width: 26px; height: 26px; margin-right: 10px;
  border-radius: 8px; font-size: .76rem;
  box-shadow: none;
}
.panel__title { display: flex; align-items: center; }

/* ---------- focus areas (session-N.php) ---------- */
.trk-focus { list-style: none; margin: 0; padding: 0; display: grid; gap: 11px; }
.trk-focus li {
  display: flex; align-items: flex-start; gap: 11px;
  font-size: .89rem; line-height: 1.6; color: var(--ink-3);
}
.trk-focus i { color: var(--brand-ink); font-size: .95rem; margin-top: .1em; flex-shrink: 0; }

/* ---------- mapped SDGs on the outcomes panel ---------- */
.trk-sdg__label {
  display: block; margin: 20px 0 12px;
  padding-top: 16px; border-top: 1px solid var(--line);
  font-family: var(--font-head); font-weight: 700;
  font-size: .68rem; letter-spacing: .14em; text-transform: uppercase;
  color: var(--muted);
}
.trk-sdg { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 12px; }
.trk-sdg li { display: flex; align-items: center; gap: 9px; }
.trk-sdg img { width: 42px; height: 42px; border-radius: 8px; object-fit: cover; flex-shrink: 0; }
.trk-sdg b {
  display: block; font-family: var(--font-head); font-size: .78rem; color: var(--ink-2); line-height: 1.2;
}
.trk-sdg small { display: block; font-size: .7rem; color: var(--muted); line-height: 1.35; max-width: 20ch; }

/* ---------- previous / next session ---------- */
/* Three equal columns rather than space-between: the first and last sessions
   have only one neighbour, and with flex the empty side would drag the "All
   sessions" pill off centre. */
.trk-nav {
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 16px;
  margin-top: 42px; padding-top: 26px;
  border-top: 1px solid var(--line);
}
.trk-nav__link {
  display: flex; align-items: center; gap: 12px;
  text-decoration: none; color: var(--ink-2);
  transition: color .26s var(--ease);
}
.trk-nav__link--next { justify-content: flex-end; }
.trk-nav__link:hover { color: var(--brand-ink); }
.trk-nav__link i {
  width: 38px; height: 38px; flex: 0 0 38px;
  display: grid; place-items: center; border-radius: 50%;
  border: 1px solid var(--line); background: var(--surface);
  color: var(--brand-ink); font-size: .85rem;
  transition: background .26s var(--ease), border-color .26s var(--ease), color .26s var(--ease);
}
.trk-nav__link:hover i { background: var(--brand); border-color: var(--brand); color: #fff; }
.trk-nav__link--next { text-align: right; }
.trk-nav__link small {
  display: block; font-size: .68rem; letter-spacing: .12em; text-transform: uppercase;
  color: var(--muted); margin-bottom: 2px;
}
.trk-nav__link b { font-family: var(--font-head); font-weight: 600; font-size: .88rem; line-height: 1.35; }
.trk-nav__all {
  display: inline-flex; align-items: center; gap: 8px; flex-shrink: 0;
  padding: 9px 18px; border-radius: 999px;
  border: 1px solid var(--line); background: var(--surface);
  font-family: var(--font-head); font-weight: 600; font-size: .82rem;
  color: var(--ink-2); text-decoration: none; white-space: nowrap;
  transition: border-color .26s var(--ease), color .26s var(--ease);
}
.trk-nav__all:hover { border-color: var(--brand); color: var(--brand-ink); }

@media (max-width: 575.98px) {
  .trk-head { gap: 11px; }
  .trk-num { flex-basis: 38px; width: 38px; height: 38px; font-size: .9rem; }
  /* the two titles will not fit either side of the pill at this width */
  .trk-nav { grid-template-columns: 1fr; }
  .trk-nav__link--next { flex-direction: row-reverse; justify-content: flex-end; text-align: left; }
  .trk-nav__all { justify-content: center; }
}

/* ==========================================================================
   SESSION & TRACKS (session-tracks.php)
   Editorial intro panel beside a two-column card grid.
   Palette is the supplied one, scoped to --st-* on .st so it cannot leak into
   the rest of the site. Contrast verified per pair:
     #101828 on #FFFFFF 17.75:1 · #667085 on #FFFFFF 4.97:1 ·
     #B51F3D on #FFFFFF 6.51:1 · #B51F3D on #FFF3F5 6.01:1 · #fff on #B51F3D 6.51:1
   #F4C542 is 1.63:1 on white, so it is used ONLY as a decorative glow and a
   hover indicator bar — never for text.
   ========================================================================== */
.st {
  --st-bg: #F7F8FA;
  --st-card: #FFFFFF;
  --st-ink: #101828;
  --st-muted: #667085;
  --st-accent: #B51F3D;
  --st-gold: #F4C542;
  --st-accent-soft: #FFF3F5;
  --st-line: #E7E9EE;
  --st-r: 20px;                                  /* spec: 18-24px */
  --st-ease: cubic-bezier(.22, .61, .36, 1);

  position: relative;
  padding: clamp(48px, 6vw, 88px) 0;
  /* Conference photograph behind the section. Every piece of text on this
     page sits inside an OPAQUE card or the intro panel, so nothing reads
     directly off this ground and the scrim is a purely aesthetic choice.
     NOTE ../../ — this rule lives in assets/css/style.css, so url() resolves
     against the STYLESHEET, not the page (bug-050). */
  background:
    linear-gradient(180deg, rgba(247, 248, 250, .93) 0%, rgba(247, 248, 250, .86) 45%, rgba(247, 248, 250, .95) 100%),
    url("../../img/glims/web/16-bg.jpg") center / cover no-repeat fixed,
    var(--st-bg);
}
/* `fixed` gives a light parallax on desktop but is expensive and janky on
   touch, so it scrolls normally there */
@media (max-width: 991.98px), (prefers-reduced-motion: reduce) {
  .st { background-attachment: scroll, scroll, scroll; }
}

/* 31 / 69 split — Bootstrap has no 30/70, so the columns take explicit bases */
.st-row { display: flex; flex-wrap: wrap; margin: 0 -14px; }
.st-col-intro, .st-col-cards { padding: 0 14px; }
.st-col-intro { flex: 0 0 100%; max-width: 100%; }
.st-col-cards { flex: 0 0 100%; max-width: 100%; }
@media (min-width: 992px) {
  .st-col-intro { flex: 0 0 31%; max-width: 31%; }
  .st-col-cards { flex: 0 0 69%; max-width: 69%; }
}

/* ---------- introduction panel ---------- */
.st-intro {
  position: relative; overflow: hidden;
  padding: 34px 30px 30px;
  border-radius: var(--st-r);
  background: var(--st-card);
  border: 1px solid var(--st-line);
  box-shadow: 0 1px 2px rgba(16, 24, 40, .04), 0 12px 28px rgba(16, 24, 40, .05);
}
@media (min-width: 992px) { .st-intro { position: sticky; top: calc(var(--header-h) + 24px); } }

/* faint grid + a warm glow, both decorative */
.st-intro::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image:
    linear-gradient(to right,  rgba(16, 24, 40, .035) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(16, 24, 40, .035) 1px, transparent 1px);
  background-size: 46px 46px;
  -webkit-mask-image: radial-gradient(120% 80% at 90% 0%, #000, transparent 72%);
          mask-image: radial-gradient(120% 80% at 90% 0%, #000, transparent 72%);
}
.st-intro::after {
  content: ""; position: absolute; right: -70px; top: -70px;
  width: 210px; height: 210px; border-radius: 50%;
  background: radial-gradient(circle, rgba(244, 197, 66, .38), rgba(181, 31, 61, .12) 55%, transparent 72%);
  pointer-events: none;
}
.st-intro > * { position: relative; z-index: 1; }

/* oversized transparent number behind the copy */
.st-ghost {
  position: absolute; right: 14px; bottom: -18px; z-index: 0;
  font-family: var(--font-head); font-weight: 800; font-size: 7.5rem; line-height: 1;
  color: rgba(16, 24, 40, .045);
  pointer-events: none; user-select: none;
}

.st-eyebrow {
  display: inline-block; margin-bottom: 14px;
  font-family: var(--font-head); font-weight: 700;
  font-size: .7rem; letter-spacing: .18em; text-transform: uppercase;
  color: var(--st-accent);                        /* 6.51:1 */
}
.st-title {
  margin: 0 0 16px;
  font-family: var(--font-head); font-weight: 800;
  /* 3.6vw so the desktop floor at 1200px is 43.2px, inside the 42-52px the
     spec asks for; clamps to 52px from ~1444px up, and to 32px on mobile */
  font-size: clamp(2rem, 3.6vw, 3.25rem);
  line-height: 1.08; letter-spacing: -.03em;
  color: var(--st-ink);
}
.st-rule {
  display: block; width: 54px; height: 4px; margin-bottom: 22px;
  border-radius: 4px;
  background: linear-gradient(90deg, var(--st-accent), var(--st-gold));
  transition: width .35s var(--st-ease);
}
.st-intro:hover .st-rule { width: 84px; }

.st-kicker {
  margin: 0 0 8px;
  font-family: var(--font-head); font-weight: 700; font-size: 1rem;
  color: var(--st-ink);
}
.st-lead {
  margin: 0 0 12px;
  font-size: .88rem; line-height: 1.65; font-weight: 600; color: var(--st-accent);
}
.st-desc { margin: 0 0 26px; font-size: .9rem; line-height: 1.8; color: var(--st-muted); }

.st-badge {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 9px 16px; border-radius: 999px;
  background: var(--st-accent-soft); border: 1px solid rgba(181, 31, 61, .16);
  font-family: var(--font-head); font-weight: 700; font-size: .78rem;
  color: var(--st-accent);                        /* 6.01:1 on the soft ground */
}

/* ---------- card grid ----------
   The timeline rail is the grid's own ::before — a hairline down the left with
   a soft fade at each end so it reads as a guide, not a border. */
.st-grid {
  position: relative;
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px;
}
@media (min-width: 992px) {
  .st-grid { padding-left: 26px; }
  .st-grid::before {
    content: ""; position: absolute; left: 0; top: 8px; bottom: 8px;
    width: 1px;
    background: linear-gradient(180deg, transparent, var(--st-line) 12%, var(--st-line) 88%, transparent);
  }
}

.st-card {
  position: relative; overflow: hidden;
  display: flex; align-items: flex-start; gap: 14px;
  padding: 22px 20px;
  border-radius: var(--st-r);
  background: var(--st-card);
  border: 1px solid var(--st-line);
  box-shadow: 0 1px 2px rgba(16, 24, 40, .04);
  text-decoration: none;
  transition: transform .3s var(--st-ease), box-shadow .3s var(--st-ease),
              border-color .3s var(--st-ease);
}
/* thin accent indicator that wipes in from the left on hover */
.st-card::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0;
  width: 3px; background: linear-gradient(180deg, var(--st-accent), var(--st-gold));
  transform: scaleY(0); transform-origin: top;
  transition: transform .3s var(--st-ease);
}
.st-card:hover, .st-card:focus-visible {
  transform: translateY(-4px);
  box-shadow: 0 2px 4px rgba(16, 24, 40, .04), 0 16px 32px rgba(16, 24, 40, .10);
  border-color: rgba(181, 31, 61, .35);
}
.st-card:hover::before, .st-card:focus-visible::before { transform: scaleY(1); }
.st-card:focus-visible { outline: 3px solid var(--st-accent); outline-offset: 3px; }

/* background number — faint at rest, readable on hover */
.st-card__n {
  position: absolute; right: 16px; bottom: 6px; z-index: 0;
  font-family: var(--font-head); font-weight: 800; font-size: 2.6rem; line-height: 1;
  color: rgba(16, 24, 40, .05);
  transition: color .3s var(--st-ease);
  pointer-events: none;
}
.st-card:hover .st-card__n { color: rgba(181, 31, 61, .16); }

.st-card__ico {
  position: relative; z-index: 1;
  flex: 0 0 42px; width: 42px; height: 42px;
  display: grid; place-items: center;
  border-radius: 12px;
  background: var(--st-accent-soft); border: 1px solid rgba(181, 31, 61, .14);
  color: var(--st-accent); font-size: 1.05rem;    /* 6.01:1 */
  transition: background .3s var(--st-ease), color .3s var(--st-ease), border-color .3s var(--st-ease);
}
.st-card:hover .st-card__ico {
  background: var(--st-accent); border-color: var(--st-accent); color: #fff;   /* 6.51:1 */
}

.st-card__body { position: relative; z-index: 1; flex: 1; min-width: 0; }
.st-card__title {
  display: block; margin-bottom: 5px;
  font-family: var(--font-head); font-weight: 700;
  font-size: .97rem; line-height: 1.35; letter-spacing: -.01em;
  color: var(--st-ink);                           /* 17.75:1 */
}
.st-card__text {
  display: block;
  font-size: .83rem; line-height: 1.6; color: var(--st-muted);   /* 4.97:1 */
  /* the spec caps descriptions at 2-3 lines */
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;
  overflow: hidden;
}

/* the SDGs this track maps to */
.st-card__sdg { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.st-card__sdg img {
  width: 32px; height: 32px;
  border-radius: 6px;
  object-fit: cover;
  box-shadow: 0 1px 4px rgba(16, 24, 40, .18);
}

/* decorative — the whole card is the link */
.st-card__go {
  position: relative; z-index: 1;
  flex: 0 0 32px; width: 32px; height: 32px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--st-card); border: 1px solid var(--st-line);
  color: var(--st-ink); font-size: .8rem;
  transition: background .3s var(--st-ease), color .3s var(--st-ease),
              border-color .3s var(--st-ease), transform .3s var(--st-ease);
}
.st-card:hover .st-card__go {
  background: var(--st-accent); border-color: var(--st-accent); color: #fff;
  transform: translateX(4px);
}

/* ---------- responsive ---------- */
@media (max-width: 991.98px) {
  /* tablet: intro becomes a normal block on top, cards stay two-up */
  .st-col-intro { margin-bottom: 26px; }
  .st-intro { padding: 30px 26px 26px; }
  .st-ghost { font-size: 6rem; }
}
@media (max-width: 767.98px) {
  .st-grid { grid-template-columns: 1fr; }
}
@media (max-width: 575.98px) {
  .st-card { padding: 18px 16px; gap: 12px; }
  .st-card__ico { flex-basis: 38px; width: 38px; height: 38px; font-size: .95rem; }
  .st-card__go { flex-basis: 28px; width: 28px; height: 28px; font-size: .72rem; }
  .st-card__n { font-size: 2.1rem; }
}
@media (prefers-reduced-motion: reduce) {
  .st-card, .st-card::before, .st-card__n, .st-card__ico, .st-card__go, .st-rule { transition: none; }
  .st-card:hover, .st-card:focus-visible { transform: none; }
  .st-card:hover .st-card__go { transform: none; }
  .st-intro:hover .st-rule { width: 54px; }
}

/* ==========================================================================
   SCHOLARSHIP BAND (registration-guidelines.php)
   ========================================================================== */
.schol-band {
  position: relative;
  padding: clamp(52px, 7vw, 92px) 0;
  /* the scrim is deliberately heavy — the card on top is translucent, so the
     photo has to be dark everywhere for the white type to hold.
     NOTE ../../ : this rule lives in assets/css/style.css, so url() resolves
     against the STYLESHEET, not the page (bug-050). */
  background:
    linear-gradient(180deg, rgba(9, 5, 7, .90) 0%, rgba(12, 6, 8, .84) 50%, rgba(9, 5, 7, .92) 100%),
    url("../../img/hero-jakarta.jpg") center / cover no-repeat,
    #0b0b0e;
}

.schol-card {
  max-width: 560px; margin-inline: auto;
  padding: clamp(30px, 4vw, 46px) clamp(24px, 4vw, 44px);
  border-radius: 26px;
  /* the card carries its own photograph under a heavy scrim, so it reads as a
     distinct panel against the skyline behind it. The scrim is opaque enough
     that the white type holds over the brightest part of the picture —
     verified by sampling the rendered pixels, not by trusting the rgba().
     ../../ because this rule lives in style.css, not the page (bug-050). */
  background:
    linear-gradient(165deg, rgba(14, 7, 9, .90) 0%, rgba(20, 8, 11, .84) 50%, rgba(12, 6, 8, .92) 100%),
    url("../../img/glims/web/12.jpg") center / cover no-repeat,
    #12080a;
  border: 1px solid rgba(255, 255, 255, .14);
  box-shadow: 0 24px 60px rgba(0, 0, 0, .45);
  overflow: hidden;
  text-align: center;
}
.schol-card__ico {
  width: 62px; height: 62px; margin: 0 auto 22px;
  display: grid; place-items: center;
  border-radius: 18px;
  background: var(--brand); color: #fff;                 /* 4.72:1 */
  font-size: 1.5rem;
  box-shadow: 0 12px 28px rgba(223, 37, 49, .34);
}
.schol-card__title {
  margin: 0 0 14px;
  font-family: var(--font-head); font-weight: 700;
  font-size: clamp(1.25rem, 2.4vw, 1.6rem); letter-spacing: -.01em;
  color: #fff;
}
.schol-card__text {
  margin: 0 auto 26px; max-width: 46ch;
  font-size: .95rem; line-height: 1.8;
  color: rgba(255, 255, 255, .82);
}
.schol-card__btn {
  display: inline-block;
  padding: 14px 34px; border-radius: 999px;
  background: var(--brand); color: #fff;                 /* 4.72:1 */
  font-family: var(--font-head); font-weight: 700; font-size: .95rem;
  text-decoration: none;
  box-shadow: 0 12px 28px rgba(223, 37, 49, .34);
  transition: background .28s var(--ease), transform .28s var(--ease);
}
.schol-card__btn:hover { background: var(--brand-dark); color: #fff; transform: translateY(-2px); }
.schol-card__btn:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }

@media (max-width: 575.98px) {
  .schol-card { border-radius: 20px; }
  .schol-card__btn { display: block; }
}
@media (prefers-reduced-motion: reduce) {
  .schol-card__btn { transition: none; }
  .schol-card__btn:hover { transform: none; }
}

/* ---------- dark glass identity column ----------
   The side becomes a dark glass panel over its own photograph while the
   requirements panel beside it stays light — the contrast between the two is
   what gives the card its structure. Every child that carried dark type is
   re-coloured here; the scrim is verified by sampling the render, since a
   translucent stack cannot be reasoned about from the declared rgba().
   ../../ because these rules live in style.css, not the page (bug-050). */
.sg-card__side {
  position: relative;
  background-repeat: no-repeat; background-size: cover; background-position: center;
  border-right: 1px solid rgba(255, 255, 255, .10);
}
.sg-card--gold .sg-card__side {
  background-image:
    linear-gradient(150deg, rgba(13, 7, 9, .90) 0%, rgba(22, 9, 12, .84) 48%, rgba(11, 6, 8, .93) 100%),
    url("../../img/glims/web/03.jpg");
}
.sg-card--brand .sg-card__side {
  background-image:
    linear-gradient(150deg, rgba(13, 7, 9, .90) 0%, rgba(22, 9, 12, .84) 48%, rgba(11, 6, 8, .93) 100%),
    url("../../img/glims/web/06.jpg");
}
/* the flipped card puts the side on the right, so the divider swaps sides */
.sg-card__grid--flip .sg-card__side { border-right: 0; border-left: 1px solid rgba(255, 255, 255, .10); }

/* --- re-colour everything that lived on white --- */
.sg-card__side .sg-card__ico {
  background: rgba(255, 255, 255, .12);
  border: 1px solid rgba(255, 255, 255, .22);
  color: #ff8f96;
}
.sg-card__side .sg-card__title { color: #fff; }
.sg-card__side .sg-card__desc  { color: rgba(255, 255, 255, .78); }
.sg-card__side .sg-card__desc a { color: #ff8f96; }
.sg-card__side .sg-card__desc a:hover { color: #fff; }

.sg-card__side .sg-spec {
  background: rgba(255, 255, 255, .07);
  border-color: rgba(255, 255, 255, .16);
}
.sg-card__side .sg-spec__ico {
  background: rgba(255, 255, 255, .10);
  border-color: rgba(255, 255, 255, .20);
  color: #ff8f96;
}
.sg-card__side .sg-spec dt { color: rgba(255, 255, 255, .66); }
.sg-card__side .sg-spec dd { color: #fff; }

.sg-card__side .sg-btn--ghost {
  background: rgba(255, 255, 255, .10);
  border-color: rgba(255, 255, 255, .38);
  color: #fff;
}
.sg-card__side .sg-btn--ghost:hover { background: #fff; border-color: #fff; color: var(--ink-2); }

/* ==========================================================================
   PUBLICATION ETHICS (publication-ethics.php)
   ========================================================================== */
.pe-stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }
.pe-stat {
  display: flex; align-items: center; gap: 20px;
  padding: 26px 26px;
  border: 1px solid var(--line); border-radius: var(--radius-lg);
  background: var(--surface); box-shadow: var(--shadow-xs);
  border-left: 4px solid var(--brand);
}
.pe-stat--ok { border-left-color: #1f7a45; }
.pe-stat__fig {
  flex: 0 0 auto;
  font-family: var(--font-head); font-weight: 800;
  font-size: clamp(2.1rem, 4vw, 2.9rem); line-height: 1;
  color: var(--brand-ink);                                   /* 4.72:1 on white */
  letter-spacing: -.03em;
}
.pe-stat--ok .pe-stat__fig { color: #1f7a45; }            /* 4.86:1 on white */
.pe-stat p { margin: 0; font-size: .87rem; line-height: 1.65; color: var(--muted); }
.pe-stat p b {
  display: block; margin-bottom: 3px;
  font-family: var(--font-head); font-size: .95rem; color: var(--ink-2);
}

/* ---------- closing CTA ---------- */
.pe-cta {
  display: flex; align-items: center; flex-wrap: wrap; gap: 24px;
  justify-content: space-between;
  padding: clamp(26px, 4vw, 40px);
  border-radius: var(--radius-lg);
  background: linear-gradient(140deg, #101017, #1c0409 60%, #2d060c);
  color: #fff;
}
.pe-cta h2 {
  margin: 0 0 8px;
  font-family: var(--font-head); font-weight: 800;
  font-size: clamp(1.3rem, 2.6vw, 1.75rem); color: #fff;
}
.pe-cta p { margin: 0; max-width: 52ch; font-size: .9rem; line-height: 1.7; color: rgba(255, 255, 255, .78); }
.pe-cta__actions { display: flex; flex-wrap: wrap; gap: 12px; }

@media (max-width: 767.98px) {
  .pe-stats { grid-template-columns: 1fr; }
  .pe-stat { gap: 16px; padding: 22px 20px; }
}
@media (max-width: 575.98px) {
  .pe-cta { flex-direction: column; align-items: flex-start; }
  .pe-cta__actions { width: 100%; }
  .pe-cta__actions .btn { width: 100%; justify-content: center; }
}

/* ---------- speaker photo on the Oral tab (presentation-guidelines.php) ----------
   The artwork is circular with its own ring and carries a pure-white surround
   (flood-filled to exactly #FFFFFF when the derivative was made), so it needs
   no frame — but it ONLY blends while this section stays white. If that
   background ever changes, regenerate the file with a transparent surround. */
.pg-shot { margin: 0; text-align: center; }
.pg-shot img { width: 100%; height: auto; max-width: 480px; display: inline-block; }

@media (max-width: 991.98px) {
  .pg-shot img { max-width: 380px; }
}

/* ---------- tab switch animation (presentation-guidelines.php) ----------
   The animation runs on the PANE, not its children: every child already
   carries `.reveal`, which owns opacity and translateY via the
   IntersectionObserver in main.js. Animating both would fight for the same
   properties, so the pane slides its whole content in as one block and the
   parent/child transforms simply compose.
   `both` fill + a class that is re-applied on every activation means this
   replays on each click rather than only the first. */
@keyframes pg-pane-in {
  from { opacity: 0; transform: translateY(12px) scale(.995); }
  to   { opacity: 1; transform: none; }
}
#modes .tab-pane.show.active {
  animation: pg-pane-in .42s var(--ease) both;
}

/* the photo gets a slightly longer, later move so it reads as leading the pane */
@keyframes pg-shot-in {
  from { opacity: 0; transform: translateY(18px) scale(.97); }
  to   { opacity: 1; transform: none; }
}
#modes .tab-pane.show.active .pg-shot img {
  animation: pg-shot-in .55s var(--ease) .06s both;
}

/* press feedback on the tab buttons themselves */
#modes .nav-link { transition: transform .18s var(--ease); }
#modes .nav-link:active { transform: scale(.96); }

@media (prefers-reduced-motion: reduce) {
  #modes .tab-pane.show.active,
  #modes .tab-pane.show.active .pg-shot img { animation: none; }
  #modes .nav-link { transition: none; }
  #modes .nav-link:active { transform: none; }
}

/* ==========================================================================
   ABOUT CONFERENCE (about-us.php #about-conference)
   Editorial intro + numbered content blocks beside a sticky conference photo.
   The supplied palette is scoped to --abc-* on .abc so it cannot leak into the
   rest of the site. Contrast verified per pair:
     #111111 on #FFFFFF 18.88:1 - #626775 on #FFFFFF 5.65:1 -
     #626775 on #F8F9FB 5.35:1 - #E32632 on #FFFFFF 4.57:1
   #E32632 clears 4.5:1 but only just, so small text uses the darker #C41E29
   (5.89:1) and #E32632 is reserved for display type, rules and fills.
   ========================================================================== */
.abc {
  --abc-ink: #111111;
  --abc-ink-2: #252525;
  --abc-red: #E32632;          /* display only */
  --abc-red-ink: #C41E29;      /* small text on light */
  --abc-body: #626775;
  --abc-soft: #F8F9FB;
  --abc-line: #E8E8EC;
  --abc-tint: #FDEEEF;
  --abc-ease: cubic-bezier(.22, .61, .36, 1);
}

/* Grid, not a flex row: the photo has to span the intro AND the blocks on
   desktop, which wrapped columns cannot do. The mobile areas put the image
   between the heading and the detailed content, as the brief asks. */
.abc-grid {
  display: grid;
  gap: 30px;
  grid-template-areas: "intro" "media" "blocks";
}
.abc-intro  { grid-area: intro; }
.abc-media  { grid-area: media; }
.abc-blocks { grid-area: blocks; }

@media (min-width: 992px) {
  .abc-grid {
    grid-template-columns: minmax(0, 57fr) minmax(0, 43fr);
    grid-template-areas:
      "intro  media"
      "blocks media";
    column-gap: clamp(32px, 4vw, 60px);
    row-gap: 34px;
    align-items: start;
  }
}

/* ---------- heading ---------- */
.abc-label {
  display: inline-flex; align-items: center; gap: 9px;
  margin-bottom: 16px;
  font-family: var(--font-head); font-weight: 700;
  font-size: .72rem; letter-spacing: .2em; text-transform: uppercase;
  color: var(--abc-red-ink);                       /* 5.89:1 */
}
/* the small red lead-in line, one of the thin geometric accents */
.abc-label::before {
  content: ""; width: 26px; height: 2px; border-radius: 2px;
  background: var(--abc-red);
}

.abc-head {
  margin: 0 0 18px;
  font-family: var(--font-head); font-weight: 800;
  font-size: clamp(2.25rem, 4vw, 3.5rem);          /* 36px mobile to 56px desktop */
  line-height: 1.06; letter-spacing: -.03em;
  color: var(--abc-ink);
}
.abc-head span { color: var(--abc-red); }

.abc-rule {
  display: block; width: 58px; height: 4px; border-radius: 4px;
  margin-bottom: 26px;
  background: var(--abc-red);
  transition: width .4s var(--abc-ease);
}
.abc-intro:hover .abc-rule { width: 92px; }

/* ---------- identity card ---------- */
.abc-idcard {
  position: relative;
  padding: 24px 26px 24px 30px;
  border-radius: 16px;
  background: var(--surface);
  border: 1px solid var(--abc-line);
  box-shadow: 0 1px 2px rgba(17, 17, 17, .04), 0 14px 34px rgba(17, 17, 17, .06);
  transition: transform .3s var(--abc-ease), box-shadow .3s var(--abc-ease);
}
/* thin red vertical accent, inset so it follows the rounded corner */
.abc-idcard::before {
  content: ""; position: absolute; left: 0; top: 14px; bottom: 14px;
  width: 4px; border-radius: 0 4px 4px 0;
  background: var(--abc-red);
}
.abc-idcard:hover {
  transform: translateY(-4px);
  box-shadow: 0 2px 4px rgba(17, 17, 17, .05), 0 20px 44px rgba(17, 17, 17, .10);
}

.abc-idcard__name {
  margin: 0 0 10px;
  font-family: var(--font-head); font-weight: 700;
  font-size: clamp(1.05rem, 1.5vw, 1.24rem); line-height: 1.4;
  letter-spacing: -.01em;
  color: var(--abc-ink);
}
.abc-idcard__code { color: var(--abc-red); white-space: nowrap; }
.abc-idcard__theme {
  margin: 0;
  font-style: italic; font-size: .95rem; line-height: 1.7;
  color: var(--abc-body);                          /* 5.65:1 */
}

/* ---------- content blocks ---------- */
.abc-blocks { display: grid; gap: 24px; }

.abc-block {
  display: flex; align-items: flex-start; gap: 20px;
  padding: 4px 0;
  transition: transform .3s var(--abc-ease);
}
.abc-block--panel {
  padding: 26px 28px;
  border-radius: 16px;
  background: var(--abc-soft);
  border: 1px solid var(--abc-line);
}
.abc-block:hover { transform: translateY(-3px); }

.abc-block__n {
  position: relative;
  flex: 0 0 auto;
  padding-top: 5px;
  font-family: var(--font-head); font-weight: 800;
  font-size: 1.05rem; line-height: 1; letter-spacing: .02em;
  color: var(--abc-red-ink);                       /* 5.89:1 */
}
/* short hairline under each number, tying the blocks into one column */
.abc-block__n::after {
  content: ""; position: absolute; left: 0; top: 30px; bottom: -6px;
  width: 1px;
  background: linear-gradient(180deg, var(--abc-tint), transparent);
}

.abc-block__body { min-width: 0; }
.abc-block__title {
  margin: 0 0 10px;
  font-family: var(--font-head); font-weight: 700;
  font-size: clamp(1.1rem, 1.6vw, 1.3rem); line-height: 1.35;
  letter-spacing: -.015em;
  color: var(--abc-ink-2);
}
.abc-block__text {
  margin: 0;
  
  font-size: 1.0625rem;                            /* 17px */
  line-height: 1.8;
  color: var(--abc-body);                          /* 5.65:1 */
}
.abc-block__text strong { color: var(--abc-ink-2); font-weight: 700; }

/* SDG badge, sits inline in the running sentence */
.abc-pill {
  display: inline; padding: 3px 10px;
  border-radius: 999px;
  /* without this the pill breaks into two flat-edged fragments when the
     sentence wraps mid-badge, which it does on mobile */
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
  background: var(--abc-tint);
  box-shadow: 0 0 0 1px rgba(227, 38, 50, .18) inset;
  font-weight: 700;
  color: var(--abc-red-ink);                       /* 5.89:1 on the tint */
}

/* ---------- photograph ---------- */
.abc-media { position: relative; }
@media (min-width: 992px) {
  .abc-media { position: sticky; top: calc(var(--header-h) + 26px); }
}

.abc-shot {
  position: relative; z-index: 1;
  margin: 0;
  border-radius: 4px 4px 30px 30px;
  overflow: hidden;
  box-shadow: 0 2px 6px rgba(17, 17, 17, .06), 0 22px 50px rgba(17, 17, 17, .12);
}
/* the thin red accent across the top edge */
.abc-shot::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 4px; z-index: 2;
  background: var(--abc-red);
}
.abc-shot img {
  display: block; width: 100%;
  height: clamp(360px, 42vw, 500px);
  object-fit: cover;
  object-position: center 34%;   /* the IFERP banner sits along the lower band
                                    of these photos, so the crop favours the top */
  transition: transform .5s var(--abc-ease);
}
.abc-shot:hover img { transform: scale(1.045); }

/* floating white glass badge overlapping the bottom-left */
.abc-tag {
  position: absolute; left: 18px; bottom: 18px; z-index: 2;
  padding: 12px 18px;
  border-radius: 12px;
  background: rgba(255, 255, 255, .93);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, .8);
  box-shadow: 0 8px 24px rgba(17, 17, 17, .18);
}
.abc-tag b {
  display: block;
  font-family: var(--font-head); font-weight: 800; font-size: 1rem;
  letter-spacing: -.01em; color: var(--abc-ink);
}
.abc-tag span {
  display: block; margin-top: 2px;
  font-size: .74rem; letter-spacing: .04em; color: var(--abc-body);
}

/* cybernetics node motif behind the photo, decorative only */
.abc-media::before {
  content: ""; position: absolute; z-index: 0;
  right: -16px; top: -22px; width: 130px; height: 130px;
  background-image: radial-gradient(rgba(227, 38, 50, .30) 1.6px, transparent 1.7px);
  background-size: 15px 15px;
  pointer-events: none;
}

/* ---------- statistics ---------- */
.abc-stats {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  margin-top: clamp(38px, 5vw, 58px);
  padding-top: clamp(30px, 4vw, 42px);
  border-top: 1px solid var(--abc-line);
}
.abc-stat {
  padding: 20px 18px;
  border-radius: 14px;
  background: var(--surface);
  border: 1px solid var(--abc-line);
  transition: transform .3s var(--abc-ease), border-color .3s var(--abc-ease),
              box-shadow .3s var(--abc-ease);
}
.abc-stat:hover {
  transform: translateY(-4px);
  border-color: rgba(227, 38, 50, .35);
  box-shadow: 0 12px 28px rgba(17, 17, 17, .08);
}
.abc-stat__fig {
  display: block; margin-bottom: 4px;
  font-family: var(--font-head); font-weight: 800;
  font-size: clamp(1.35rem, 2.2vw, 1.75rem); line-height: 1.1;
  letter-spacing: -.02em;
  color: var(--abc-red);                           /* display size, large text */
}
.abc-stat__label {
  display: block;
  font-size: .82rem; line-height: 1.5; color: var(--abc-body);
}

/* ---------- responsive ---------- */
@media (max-width: 991.98px) {
  .abc-shot img { height: clamp(300px, 46vw, 420px); }
  .abc-media::before { right: -8px; top: -14px; width: 100px; height: 100px; }
}
@media (max-width: 767.98px) {
  .abc-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 575.98px) {
  .abc-grid { gap: 26px; }
  .abc-idcard { padding: 20px 20px 20px 24px; }
  .abc-block { gap: 14px; }
  .abc-block--panel { padding: 22px 20px; }
  .abc-block__text { font-size: 1rem; }
  .abc-shot img { height: 280px; }
  .abc-tag { left: 14px; bottom: 14px; padding: 10px 14px; }
}
@media (prefers-reduced-motion: reduce) {
  .abc-idcard, .abc-block, .abc-stat, .abc-shot img, .abc-rule { transition: none; }
  .abc-idcard:hover, .abc-block:hover, .abc-stat:hover { transform: none; }
  .abc-shot:hover img { transform: none; }
  .abc-intro:hover .abc-rule { width: 58px; }
}

/* ==========================================================================
   REDEFINE YOUR RESEARCH JOURNEY  (index.php, journals-publications.php)
   The six stages, the pull quote and the dotted rail are one Lottie artboard
   (assets/lottie/research-journey.json), so this only has to frame it: a
   reserved stage plus the two calls to action underneath.
   ========================================================================== */
.rj-title em { font-style: normal; color: var(--brand-ink); }

/* aspect-ratio matches the 2100x1080 artboard, so the height is reserved
   before the animation loads and nothing below the section jumps. */
.rj-stage {
  max-width: 1100px;
  margin: 34px auto 30px;
  aspect-ratio: 2100 / 1080;
  border-radius: var(--radius);
  background: #fff;
  overflow: hidden;
}
.rj-anim { width: 100%; height: 100%; }

/* The artboard draws its own labels in dark ink, so the stage keeps a white
   ground in the dark theme — the same treatment .logo-strip gets. The border
   stands in for the contrast the soft ground supplies in light mode. */
[data-theme="dark"] .rj-stage { border: 1px solid var(--line); }

.rj-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 14px;
}
.rj-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 15px 30px;
  border: 0;
  border-radius: var(--radius-sm);
  font-family: var(--font-head);
  font-size: .95rem;
  font-weight: 700;
  text-decoration: none;
  transition: filter .25s var(--ease), transform .25s var(--ease);
}
.rj-btn--primary { background: var(--brand); color: #fff; }
.rj-btn--talk    { background: var(--ink-ground); color: #fff; }
.rj-btn:hover { color: #fff; filter: brightness(1.12); transform: translateY(-2px); }
.rj-btn i { font-size: 1.05rem; }

@media (max-width: 575.98px) {
  .rj-stage { margin: 24px auto 22px; }
  .rj-actions > * { width: 100%; justify-content: center; }
}
@media (prefers-reduced-motion: reduce) {
  .rj-btn { transition: none; }
  .rj-btn:hover { transform: none; }
}

/* ==========================================================================
   OUR HISTORY (history.php)
   A timeline of past editions: ordinal badge on the rail, details in the
   middle, proceedings cover on the right. Collapses to a stack on mobile,
   where the rail and its markers are dropped.
   ========================================================================== */
.hist-list {
  position: relative;
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 26px;
}
/* the rail the badges sit on; starts and ends at the first/last badge centre */
.hist-list::before {
  content: "";
  position: absolute;
  top: 44px; bottom: 44px; left: 27px;
  width: 2px;
  background: linear-gradient(180deg, transparent, var(--brand-tint) 12%, var(--brand-tint) 88%, transparent);
}

.hist-card {
  position: relative;
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr) 175px;
  align-items: center;
  gap: 26px;
  padding: 20px 26px 20px 0;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-xs);
  transition: transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s var(--ease);
}
.hist-card:hover {
  transform: translateY(-4px);
  border-color: var(--brand);
  box-shadow: var(--shadow-sm);
}

/* the badge straddles the card's left edge so it reads as a marker on the rail */
.hist-card__marker { display: flex; justify-content: center; }
.hist-card__badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px; height: 56px;
  margin-left: -28px;
  border-radius: 50%;
  background: var(--brand);
  color: #fff;
  font-family: var(--font-head);
  font-weight: 800;
  font-size: 1.15rem;
  box-shadow: var(--shadow-brand);
}
.hist-card__badge sup { font-size: .62em; margin-left: 1px; }

.hist-card__title {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 1.1rem;
  line-height: 1.45;
  color: var(--ink-2);
  margin: 0 0 14px;
}

.hist-card__meta {
  list-style: none;
  margin: 0 0 18px;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 22px;
}
.hist-card__meta li {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: .9rem;
  color: var(--muted);
}
.hist-card__meta i { color: var(--brand-ink); font-size: 1rem; }

/* The covers are portrait but not all the same size, so the plate fixes the
   ratio and each cover letterboxes inside it instead of being stretched. */
.hist-card__shot {
  aspect-ratio: 21 / 29;
  border-radius: var(--radius-sm);
  background: #fff;
  border: 1px solid var(--line);
  overflow: hidden;
}
.hist-card__shot img { width: 100%; height: 100%; object-fit: contain; display: block; }

/* ---------- closing band ---------- */
.hist-legacy {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 22px;
  margin-top: 40px;
  padding: 30px 32px;
  border-radius: var(--radius);
  background: var(--brand-soft);
  border: 1px solid var(--brand-tint);
}
.hist-legacy__ico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 60px; height: 60px;
  border-radius: 50%;
  background: var(--brand);
  color: #fff;
  font-size: 1.5rem;
}
.hist-legacy__text { flex: 1 1 320px; }
.hist-legacy__text h3 {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 1.25rem;
  color: var(--ink-2);
  margin: 0 0 6px;
}
.hist-legacy__text p { margin: 0; color: var(--muted); font-size: .94rem; line-height: 1.7; }

@media (max-width: 991.98px) {
  .hist-card { grid-template-columns: 56px minmax(0, 1fr) 160px; gap: 18px; }
}

/* Below this the rail and its markers go: a single stacked column has nothing
   to thread together, and the badge would only eat width from the title. */
@media (max-width: 767.98px) {
  .hist-list::before { display: none; }
  .hist-card {
    grid-template-columns: 1fr;
    gap: 18px;
    padding: 22px;
    text-align: center;
  }
  .hist-card__marker { justify-content: center; }
  .hist-card__badge { margin-left: 0; }
  .hist-card__meta { justify-content: center; }
  .hist-card__shot { max-width: 220px; margin-inline: auto; }
  .hist-legacy { text-align: center; justify-content: center; padding: 26px 22px; }
  .hist-legacy__text { flex-basis: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .hist-card { transition: none; }
  .hist-card:hover { transform: none; }
}

/* ==========================================================================
   THE 17 GLOBAL GOALS (includes/sdg-goals-grid.php, inside #sdg)
   A white panel on the dark SDG band, so the official UN tiles sit on the
   ground they are drawn for. #sdg is dark in both themes, so the panel's
   colours are fixed rather than themed.
   ========================================================================== */
.gg-panel {
  padding: clamp(24px, 3vw, 38px);
  margin-bottom: 46px;
  border-radius: var(--radius-lg);
  background: #fff;
  border: 1px solid rgba(255, 255, 255, .12);
  box-shadow: var(--shadow-lg);
}

.gg-top {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 20px 30px;
  padding-bottom: 22px;
  border-bottom: 1px solid var(--line);
}

.gg-intro h3 {
  margin: 0;
  font-family: var(--font-head);
  font-weight: 800;
  font-size: clamp(1.25rem, 2.4vw, 1.7rem);
  letter-spacing: -.02em;
  color: #14141a;
}
.gg-intro p { margin: 8px 0 0; font-size: .92rem; color: #5d5d68; }

/* Counters read off the track data, so they cannot drift from the grid */
.gg-counts { display: flex; flex-wrap: wrap; gap: 12px 34px; margin: 0; }
.gg-counts dt {
  font-family: var(--font-head);
  font-weight: 800;
  font-size: clamp(1.5rem, 2.6vw, 2rem);
  line-height: 1;
  letter-spacing: -.03em;
  color: var(--brand);
}
.gg-counts dd {
  margin: 6px 0 0;
  font-family: var(--font-head);
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #8a8a95;
}

/* 9 across on desktop, so the seventeen fall as 9 + 8 like the UN sheet */
.gg-grid {
  display: grid;
  grid-template-columns: repeat(9, 1fr);
  align-items: start;
  gap: 16px 12px;
  margin: 26px 0 0;
  padding: 0;
  list-style: none;
}

.gg-goal { display: flex; flex-direction: column; gap: 9px; }
.gg-goal img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: 8px;
  /* the tiles are flat colour — a hairline keeps the pale ones off the card */
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .10);
  transition: transform .25s var(--ease), box-shadow .25s var(--ease);
}
.gg-goal:hover img {
  transform: translateY(-4px);
  box-shadow: 0 12px 24px rgba(0, 0, 0, .22);
}

.gg-goal-name {
  font-size: .69rem;
  font-weight: 600;
  line-height: 1.35;
  color: #5d5d68;
}

/* the goals this conference actually maps a track to */
.gg-goal.is-priority .gg-goal-name { color: #14141a; font-weight: 800; }
.gg-goal.is-priority img {
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .10), 0 0 0 2px rgba(223, 37, 49, .6);
}

.gg-actions { display: flex; justify-content: center; margin-top: 28px; }

@media (max-width: 1199.98px) {
  .gg-grid { grid-template-columns: repeat(6, 1fr); }
}
@media (max-width: 767.98px) {
  .gg-top { align-items: flex-start; }
  .gg-counts { gap: 12px 24px; }
  .gg-grid { grid-template-columns: repeat(4, 1fr); gap: 14px 10px; }
  .gg-goal-name { font-size: .64rem; }
}
@media (max-width: 479.98px) {
  .gg-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (prefers-reduced-motion: reduce) {
  .gg-goal img { transition: none; }
  .gg-goal:hover img { transform: none; }
}