/* ============================================================
   1st UAE National Congress on NCDs 2026 — uaencds.ae
   Shared stylesheet. Design tokens per build brief Section 3.
   READABILITY RULES (Section 3.3):
   - Body text on light backgrounds: --ink. Never grey lighter
     than #4A5568. Never cyan on light backgrounds.
   - Cyan is an accent for DARK backgrounds only.
   ============================================================ */

:root {
  --navy-900: #0B1F4B;
  --navy-700: #14306E;
  --cyan-400: #2FD3F5;
  --ink: #16233F;
  --bg-light: #FFFFFF;
  --bg-tint: #F4F6FA;
  --line: #D8DEE9;
  --muted: #4A5568; /* darkest grey permitted on light backgrounds */
  --max-w: 1200px;
  --radius: 10px;
  --shadow: 0 4px 18px rgba(11, 31, 75, 0.08);
  --font: 'Montserrat', 'Segoe UI', Arial, sans-serif;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; scroll-padding-top: 90px; }

body {
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.6;
  color: var(--ink);
  background: var(--bg-light);
}

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

/* ---------- Focus visibility (keyboard) ---------- */
a:focus-visible,
button:focus-visible,
[tabindex]:focus-visible {
  outline: 3px solid var(--navy-700);
  outline-offset: 3px;
  border-radius: 2px;
}
.on-dark a:focus-visible,
.on-dark button:focus-visible,
.site-header a:focus-visible,
.site-header button:focus-visible,
.site-footer a:focus-visible {
  outline-color: var(--cyan-400);
}

/* ---------- Typography ---------- */
h1, h2, h3, h4 { line-height: 1.25; color: var(--navy-900); }
h1 { font-size: clamp(1.9rem, 4vw, 3rem); font-weight: 800; }
h2 { font-size: clamp(1.5rem, 3vw, 2.15rem); font-weight: 800; }
h3 { font-size: 1.25rem; font-weight: 700; }
h4 { font-size: 1.05rem; font-weight: 700; }
p { margin-bottom: 1rem; }
p:last-child { margin-bottom: 0; }

.on-dark h1, .on-dark h2, .on-dark h3, .on-dark h4 { color: #FFFFFF; }
.on-dark p { color: #FFFFFF; }

/* Eyebrow labels: cyan permitted ONLY on dark */
.eyebrow {
  display: block;
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin-bottom: 0.75rem;
  color: var(--navy-700);
}
.on-dark .eyebrow { color: var(--cyan-400); }

/* Links on light backgrounds: navy, underline on hover — never cyan */
main a:not(.btn) { color: var(--navy-700); text-decoration: none; font-weight: 600; }
main a:not(.btn):hover { text-decoration: underline; }
.on-dark a:not(.btn) { color: #FFFFFF; text-decoration: underline; }

/* ---------- Layout helpers ---------- */
.container { max-width: var(--max-w); margin: 0 auto; padding: 0 24px; }
.section { padding: 72px 0; }
.section--tint { background: var(--bg-tint); }
.section--dark { background: var(--navy-900); }
.section-intro { max-width: 780px; margin: 0 auto 2.5rem; text-align: center; }
.section-intro h2 { margin-bottom: 0.75rem; }

/* ============================================================
   HEADER (sticky, navy)
   ============================================================ */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--navy-900);
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}
.header-inner {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 24px;
  min-height: 72px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.brand { display: flex; align-items: center; gap: 18px; padding: 12px 0; }
.brand img { height: 40px; width: auto; }

.main-nav { display: flex; align-items: center; gap: 6px; }
.main-nav a:not(.btn) {
  color: #FFFFFF;
  text-decoration: none;
  font-size: 0.9rem;
  font-weight: 600;
  padding: 10px 12px;
  border-radius: 6px;
}
.main-nav a:not(.btn):hover { background: rgba(255, 255, 255, 0.1); }
.main-nav a.active { box-shadow: inset 0 -3px 0 var(--cyan-400); border-radius: 6px 6px 0 0; }
.main-nav .btn { margin-left: 10px; }

.nav-toggle {
  display: none;
  background: none;
  border: 2px solid rgba(255, 255, 255, 0.5);
  border-radius: 6px;
  color: #FFFFFF;
  font-size: 1.4rem;
  line-height: 1;
  padding: 6px 12px;
  cursor: pointer;
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-block;
  font-family: var(--font);
  font-weight: 700;
  font-size: 0.95rem;
  padding: 13px 26px;
  border-radius: 8px;
  text-decoration: none;
  border: 2px solid transparent;
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.btn:hover { transform: translateY(-1px); box-shadow: 0 6px 16px rgba(11, 31, 75, 0.25); }
/* Cyan button: dark/navy sections only */
.btn--cyan { background: var(--cyan-400); color: var(--navy-900); }
/* Navy button: light sections */
.btn--navy { background: var(--navy-900); color: #FFFFFF; }
.btn--outline-light { background: transparent; color: #FFFFFF; border-color: #FFFFFF; }
.btn--outline-light:hover { background: rgba(255, 255, 255, 0.1); }
.btn--lg { font-size: 1.05rem; padding: 16px 34px; }

/* ============================================================
   HERO
   ============================================================ */
.hero {
  position: relative;
  background: var(--navy-900);
  overflow: hidden;
  /* Gives the contain-fit video more vertical room to grow into instead
     of being squeezed down to whatever height the text content needs. */
  min-height: 640px;
}
.hero-bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: right center;
  background-repeat: no-repeat;
}
.hero-bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, var(--navy-900) 34%, rgba(11, 31, 75, 0.55) 70%, rgba(11, 31, 75, 0.25) 100%);
}
/* Hero banner video (home page only). Sits inside .hero-bg so it still
   gets the same dark gradient overlay (.hero-bg::after) on top of it. */
.hero-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  /* Fill the hero box edge-to-edge (matches the mobile breakpoint below) —
     contain was tried to avoid cropping, but it pillarboxes badly on wide
     desktop monitors since the hero box is much wider than the video's
     16:9 source. */
  object-fit: cover;
  /* Vertical anchor is "top", not "center": the UAE flag graphic sits near
     the top of the source frame, close to the edge. Center-cropping this
     16:9 video into the hero's wider box eats symmetrically from top and
     bottom, and on tall/wide viewports that top crop was enough to slice
     the flag off entirely. Anchoring to the top means all vertical crop
     comes from the bottom instead, so the flag is never cut. */
  object-position: 35% top;
}
.hero-content {
  position: relative;
  z-index: 1;
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 76px 24px 80px;
  animation: heroContentUp 0.8s ease-out both;
}
.hero-crest { height: 60px; width: auto; margin-bottom: 2.25rem; }
.hero h1 { color: #FFFFFF; max-width: 700px; margin-bottom: 1rem; }
.hero .hero-sub {
  color: #FFFFFF;
  font-size: clamp(1.05rem, 2vw, 1.3rem);
  font-weight: 600;
  max-width: 640px;
  margin-bottom: 1.75rem;
}
.hero-chips { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 2.25rem; }
.hero-chips .chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #FFFFFF;
  font-size: 0.9rem;
  font-weight: 600;
  border: 1px solid rgba(255, 255, 255, 0.4);
  border-radius: 999px;
  padding: 9px 18px;
  background: rgba(20, 48, 110, 0.55);
  text-decoration: none;
}
a.chip:hover { background: rgba(20, 48, 110, 0.85); border-color: rgba(255, 255, 255, 0.7); }
.hero-chips .chip svg { flex: none; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 14px; }

/* Page hero (inner pages) */
.page-hero { background: var(--navy-900); position: relative; overflow: hidden; }
/* Fill the hero band edge-to-edge — auto 100% was tried to avoid cropping,
   but at these wide/short hero proportions it pillarboxes the image down
   to a narrow, washed-out sliver instead of giving it real presence. */
.page-hero .hero-bg {
  background-size: cover;
  /* Slow Ken Burns drift — continuous subtle life on an otherwise static
     hero image. overflow:hidden on .page-hero clips the excess scale. */
  animation: heroKenBurns 26s ease-in-out infinite alternate;
}
@keyframes heroKenBurns {
  from { transform: scale(1); }
  to   { transform: scale(1.08); }
}
.page-hero .hero-bg::after {
  z-index: 1;
  background: linear-gradient(90deg, var(--navy-900) 40%, rgba(11, 31, 75, 0.6) 100%);
}
/* Slow, looping light sweep — subtle continuous life on an otherwise
   static hero, not a one-off flash. The site's universal reduced-motion
   rule (bottom of file) neutralizes this automatically for users who
   prefer no motion. */
.page-hero .hero-bg::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background: linear-gradient(115deg, transparent 40%, rgba(255, 255, 255, 0.16) 50%, transparent 60%);
  background-size: 250% 100%;
  animation: heroShimmer 4.5s ease-in-out infinite;
}
@keyframes heroShimmer {
  from { background-position: 150% 0; }
  to   { background-position: -50% 0; }
}
.page-hero-content {
  position: relative;
  z-index: 1;
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 68px 24px 64px;
  animation: heroContentUp 0.8s ease-out both;
}
@keyframes heroContentUp {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: translateY(0); }
}
.page-hero h1 { color: #FFFFFF; margin-bottom: 0.75rem; }
.page-hero p { color: #FFFFFF; max-width: 760px; font-size: 1.05rem; }

/* ============================================================
   WELCOME MESSAGES
   ============================================================ */
.welcome-block {
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: 48px;
  align-items: start;
  padding: 56px 0;
}
.welcome-block + .welcome-block { border-top: 1px solid var(--line); }
.welcome-block.reverse { grid-template-columns: 1fr 240px; }
.welcome-block.reverse .welcome-photo { order: 2; }
/* Square + 14% radius matches the curvature already baked into the
   supplied headshots (see .person-photo) instead of fighting it with a
   differently-shaped/differently-rounded box. */
.welcome-photo img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  object-position: top center;
  border-radius: 14%;
  box-shadow: var(--shadow);
}
.welcome-quote {
  font-size: 1rem;
  color: var(--ink);
  margin-bottom: 1.5rem;
}
/* A single large opening mark reads better than italicizing a long
   quote — italics get harder to read over this many lines. */
.welcome-quote::before {
  content: '\201C';
  display: block;
  font-size: 4rem;
  line-height: 1;
  font-weight: 800;
  color: var(--navy-700);
  margin-bottom: 0.25rem;
}
.welcome-name { font-weight: 800; color: var(--navy-900); font-size: 1.1rem; }
.welcome-role { color: var(--muted); font-size: 0.95rem; font-weight: 600; }

/* Photo placeholder (initials) */
.photo-placeholder {
  width: 100%;
  aspect-ratio: 4 / 5;
  border-radius: var(--radius);
  background: linear-gradient(160deg, var(--navy-700), var(--navy-900));
  display: flex;
  align-items: center;
  justify-content: center;
  color: #FFFFFF;
  font-size: 3rem;
  font-weight: 800;
  letter-spacing: 0.05em;
}

/* ============================================================
   CARD GRIDS (themes, audience, why-partner)
   ============================================================ */
.card-grid { display: grid; gap: 22px; }
.grid-4 { grid-template-columns: repeat(4, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-2 { grid-template-columns: repeat(2, 1fr); }

.icon-card {
  background: var(--bg-light);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 28px 22px;
  text-align: center;
  box-shadow: var(--shadow);
}
.icon-card .card-icon {
  width: 56px;
  height: 56px;
  margin: 0 auto 16px;
  border-radius: 50%;
  background: var(--bg-tint);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--navy-700);
}
.icon-card h3 { font-size: 1.02rem; color: var(--navy-900); }
.icon-card p { font-size: 0.95rem; color: var(--ink); margin-top: 0.5rem; }
/* min-height reserves room for 2 lines so the description paragraph
   below always starts at the same Y position, whether a given card's
   subheading wraps to 1 line or 2 (e.g. "GPs & Family Physicians" vs
   "Cardio, Endo, Oncology, Respiratory" on the Target Audience cards). */
.icon-card .card-sub { font-size: 0.85rem; font-weight: 600; color: var(--muted); display: block; margin-top: 2px; line-height: 1.35; min-height: 37px; }

/* ============================================================
   CTA BAND (navy)
   ============================================================ */
.cta-band { position: relative; background: var(--navy-900); overflow: hidden; }
.cta-band .hero-bg::after {
  background: linear-gradient(90deg, rgba(11, 31, 75, 0.92) 30%, rgba(11, 31, 75, 0.65) 100%);
}
.cta-inner {
  position: relative;
  z-index: 1;
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 72px 24px;
  text-align: center;
}
.cta-inner h2 { color: #FFFFFF; margin-bottom: 1.75rem; }
.cta-inner .hero-actions { justify-content: center; }

/* ============================================================
   COMMITTEE
   ============================================================ */
.person-card {
  background: var(--bg-light);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 24px 20px 22px;
  text-align: center;
}
/* Solo-track wrapper (heading + card stacked) inside a shared grid row —
   stretches to the row's full height so the card itself (flex: 1) fills
   any leftover space, keeping card bottoms level even when role text
   lengths differ between the three tracks sharing the row. */
.track-card {
  display: flex;
  flex-direction: column;
  height: 100%;
}
.track-card .person-card {
  flex: 1;
}
/* Photo carries its own rounding (14% ~ matches the curvature already
   baked into the supplied headshots) and sits with clear padding inside
   the card, so the card's own corner radius never touches — and never
   visibly conflicts with — the photo's corner radius. Uniform max-width
   here is the Scientific Committee size; .person-photo--lg (Steering
   Committee) is intentionally a notch bigger, never smaller, so no
   section reads as "less important." */
.person-photo {
  width: 100%;
  max-width: 168px;
  aspect-ratio: 1 / 1;
  margin: 0 auto 16px;
  border-radius: 14%;
  overflow: hidden;
  background: var(--bg-tint);
}
.person-photo--lg { max-width: 196px; }
.person-photo img { width: 100%; height: 100%; object-fit: cover; object-position: top center; }
.person-photo .photo-placeholder { aspect-ratio: auto; height: 100%; border-radius: 14%; }
.person-body { padding: 0; }
.person-body h3 { font-size: 1.02rem; margin-bottom: 4px; }
.person-body .person-role { font-size: 0.88rem; color: var(--muted); font-weight: 600; }
.linkedin-link { display: inline-flex; vertical-align: middle; margin-left: 6px; color: var(--navy-700); }
.linkedin-link:hover { color: var(--navy-900); }
.linkedin-link svg { display: block; }
.welcome-name .linkedin-link { margin-left: 8px; }
.track-group { margin-bottom: 40px; }
/* Every track name — whether it heads a pair or (for the three
   single-member tracks that share one row) an individual card — uses
   this same small icon + centered heading, so no track reads as more
   or less prominent than another. */
.track-title {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  color: var(--navy-900);
  font-size: 1rem;
  font-weight: 700;
  margin-bottom: 20px;
}
.track-title svg { flex: none; color: var(--navy-700); }
.track-title--card { margin-bottom: 14px; }

/* ============================================================
   AGENDA
   ============================================================ */
.agenda-note {
  background: var(--bg-tint);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 14px 20px;
  font-weight: 600;
  color: var(--ink);
  margin-bottom: 28px;
}
.agenda-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 34px;
}
.agenda-tab {
  font-family: var(--font);
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--navy-900);
  background: var(--bg-light);
  border: 2px solid var(--navy-900);
  border-radius: 8px;
  padding: 12px 22px;
  cursor: pointer;
}
.agenda-tab[aria-selected="true"] { background: var(--navy-900); color: #FFFFFF; }
.agenda-day[hidden] { display: none; }

.pillar-header {
  color: var(--navy-900);
  font-size: 1.1rem;
  font-weight: 800;
  margin: 34px 0 14px;
}
.pillar-header:first-child { margin-top: 0; }

.session-row {
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: 18px;
  background: var(--bg-light);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 14px 18px;
  margin-bottom: 10px;
  font-size: 15px;
}
.session-time { color: var(--navy-900); font-weight: 600; white-space: nowrap; }
.session-title { color: var(--ink); font-weight: 600; }
.session-speaker { color: var(--muted); font-size: 0.88rem; font-weight: 600; margin-top: 4px; }

/* Parallel halls + full-width bands each carry their own time inside
   their own box (same pattern as .session-row) — no separate shared
   time column. A "band" row is one full-width box; a paired-hall row
   is two boxes side by side, each self-contained with time + title. */
.parallel-block { margin: 8px 0; }
.parallel-heads {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 14px;
}
.parallel-heads--halls { margin-bottom: 10px; }
.parallel-heads--pillars { margin-bottom: 14px; }
.hall-header {
  background: var(--navy-900);
  color: #FFFFFF;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-align: center;
  border-radius: 8px;
  padding: 10px;
}
.parallel-heads .pillar-header { margin: 0; font-size: 1rem; }

.parallel-rows--mobile { display: none; }

.agenda-row {
  display: flex;
  align-items: stretch;
  gap: 14px;
  margin-bottom: 10px;
}

/* Mobile-only grouped render (hidden on desktop, see media query below):
   one heading per hall, then that hall's full run of sessions — a hard
   stop and reset between Hall A's block and Hall B's block. */
.hall-group + .hall-group { margin-top: 16px; }
.hall-group .hall-header { margin-bottom: 10px; }
.hall-group .row-cell { margin-bottom: 10px; }
.hall-group .row-cell:last-child { margin-bottom: 0; }

.row-cell {
  flex: 1;
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: 12px;
  row-gap: 4px;
  align-items: start;
  padding: 14px 18px;
  font-size: 15px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--bg-light);
}
.row-cell .session-time { grid-column: 1; white-space: nowrap; }
.row-cell .session-title { grid-column: 2; }
.row-cell .session-speaker { grid-column: 1 / -1; }
.row-cell--symposium { background: var(--navy-700); border-color: var(--navy-700); }
.row-cell--symposium .session-title { color: #FFFFFF; }
.row-cell--symposium .session-time { color: #FFFFFF; }
.row-cell--general { background: var(--bg-tint); }
.row-cell, .session-row, .band-box { transition: border-color 0.18s ease; }
@media (hover: hover) {
  .row-cell:hover, .session-row:hover, .band-box:hover { border-color: var(--navy-700); }
  .band-box--ceremony:hover, .band-box--symposium:hover, .row-cell--symposium:hover { border-color: var(--cyan-400); }
}

/* Full-width bands (ceremony / symposium / breaks / oral abstracts) apply
   to the whole audience at once: one full-width box holding the time and
   title side by side on the same line — time pinned to the left (never
   splitting onto its own line), title taking the remaining space. */
.band-box {
  display: flex;
  align-items: baseline;
  gap: 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 14px 18px;
  margin-bottom: 10px;
}
.band-box .band-time { flex: 0 0 auto; font-weight: 700; font-size: 0.85rem; white-space: nowrap; }
.band-box .band-title { flex: 1; text-align: center; font-size: 15px; font-weight: 700; }
.band-box--ceremony { background: var(--navy-900); color: #FFFFFF; border-color: var(--navy-900); }
.band-box--symposium { background: var(--navy-700); color: #FFFFFF; border-color: var(--navy-700); }
.band-box--break { background: var(--bg-tint); border-style: dashed; color: var(--ink); }
.band-box--general { background: var(--bg-tint); color: var(--ink); }

/* Day-3 placeholder */
.placeholder-panel {
  background: var(--bg-tint);
  border: 1px dashed var(--line);
  border-radius: var(--radius);
  padding: 56px 24px;
  text-align: center;
}
.placeholder-panel h3 { color: var(--navy-900); margin-bottom: 6px; }
.placeholder-panel p { color: var(--ink); }

/* ============================================================
   REGISTRATION
   ============================================================ */
.table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); }
.fees-table { width: 100%; border-collapse: collapse; min-width: 720px; background: var(--bg-light); }
.fees-table th, .fees-table td { padding: 16px 18px; text-align: left; font-size: 0.95rem; }
.fees-table thead th {
  background: var(--navy-900);
  color: #FFFFFF;
  font-weight: 700;
  font-size: 0.9rem;
}
.fees-table thead th small { display: block; font-weight: 600; font-size: 0.78rem; color: #FFFFFF; opacity: 1; }
.fees-table tbody tr:nth-child(even) { background: var(--bg-tint); }
.fees-table tbody td { color: var(--ink); border-top: 1px solid var(--line); }
.fees-table tbody td:first-child { font-weight: 700; color: var(--navy-900); }
.fee-cell { display: flex; align-items: center; gap: 10px; }
.fee-icon {
  flex: none;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--bg-light);
  border: 1px solid var(--line);
  color: var(--navy-700);
  display: flex;
  align-items: center;
  justify-content: center;
}
@media (hover: hover) {
  .fees-table tbody tr:hover { background: rgba(20, 48, 110, 0.07); }
}

/* Benefits matrix (sponsors page): tier value columns centered;
   ticks are navy — cyan is never used on light backgrounds. */
.benefits-table th:not(:first-child),
.benefits-table td:not(:first-child) { text-align: center; }
.benefits-table thead th sup { color: var(--cyan-400); }
.benefits-table .tick { color: var(--navy-700); font-weight: 800; font-size: 1.05rem; letter-spacing: 2px; }
.benefits-table .dash { color: var(--muted); }

.notes-list { list-style: none; margin-top: 28px; }
.notes-list li {
  position: relative;
  padding: 0 0 14px 30px;
  color: var(--ink);
  font-size: 0.95rem;
}
.notes-list li::before {
  content: '';
  position: absolute;
  left: 4px;
  top: 7px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--navy-700);
}
.vat-note { font-weight: 700; color: var(--navy-900); }

/* ============================================================
   SPONSORS
   ============================================================ */
.tier-card {
  background: var(--bg-light);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 30px 24px;
  text-align: center;
  box-shadow: var(--shadow);
}
.tier-card h3 { letter-spacing: 0.12em; font-size: 1.05rem; }
.tier-card h3 sup { font-size: 0.7em; color: var(--navy-700); }
/* Same small icon slot on every card (same size/position for all 4 tiers)
   so the CTA below always lands on the same line — a text-only tag on
   just one card was pushing that card's CTA out of alignment with the
   other three. */
.tier-icon {
  width: 44px;
  height: 44px;
  margin: 0 auto 14px;
  border-radius: 50%;
  background: var(--bg-tint);
  color: var(--navy-700);
  display: flex;
  align-items: center;
  justify-content: center;
}
.tier-cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 16px;
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--navy-900);
  text-decoration: none;
  border-bottom: 2px solid var(--navy-700);
  padding-bottom: 2px;
}
.tier-cta svg { flex: none; }
.tier-cta:hover { color: var(--navy-700); text-decoration: none; }
.tier-footnote {
  font-size: 0.85rem;
  color: var(--muted);
  text-align: center;
  margin-top: 24px;
}

/* Shared subtle-lift hover — committee cards, icon cards (Scientific
   Pillars / Target Audience / Why Partner), and sponsor tier cards all
   get the same minimal life-on-hover treatment. */
.person-card, .icon-card, .tier-card {
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}
@media (hover: hover) {
  .person-card:hover, .icon-card:hover, .tier-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 24px rgba(11, 31, 75, 0.14);
    border-color: var(--navy-700);
  }
}

/* Sponsorship CTA band: lives inside the footer (not a separate card) so
   it reads as one continuous navy region flowing straight into the
   footer below it, instead of a floating box with a gap either side. */
.footer-cta {
  position: relative;
  overflow: hidden;
  padding: 64px 24px;
  text-align: center;
}
/* Text is centered over imagery, so use a uniform dark wash rather than
   the default left-to-right hero gradient. */
.footer-cta .hero-bg::after {
  background: linear-gradient(180deg, rgba(11, 31, 75, 0.88) 0%, rgba(11, 31, 75, 0.78) 100%);
}
.footer-cta-inner { position: relative; z-index: 1; max-width: var(--max-w); margin: 0 auto; }
.footer-cta h2 { color: #FFFFFF; margin-bottom: 1.25rem; }
.footer-cta p { color: #FFFFFF; }
.footer-cta .contact-lines { margin-bottom: 1.75rem; }
.footer-cta a:not(.btn) { color: #FFFFFF; }

/* ============================================================
   ABSTRACTS
   ============================================================ */
.deadline-callout {
  background: var(--navy-900);
  border-radius: var(--radius);
  padding: 26px 30px;
  display: flex;
  align-items: center;
  gap: 18px;
  margin: 32px 0;
}
.deadline-callout .deadline-icon { color: var(--cyan-400); flex: none; }
.deadline-callout p { color: #FFFFFF; font-weight: 700; font-size: 1.05rem; margin: 0; }

/* Review criteria — plain icon + heading + copy rows rather than an
   accordion, so all criteria are readable at a glance without clicking. */
.criteria-list { display: flex; flex-direction: column; gap: 26px; margin-top: 1.5rem; }
.criteria-item { display: flex; gap: 18px; align-items: flex-start; }
.criteria-icon {
  flex: none;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: var(--bg-tint);
  color: var(--navy-700);
  display: flex;
  align-items: center;
  justify-content: center;
}
.criteria-item h3 { color: var(--navy-900); font-size: 1.05rem; margin-bottom: 4px; }
.criteria-item p { color: var(--ink); font-size: 0.95rem; margin: 0; }

.card-grid .notes-list { margin-top: 14px; }

/* ============================================================
   FOOTER (dark navy)
   ============================================================ */
.site-footer { background: var(--navy-900); color: #FFFFFF; }
.footer-cols {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 60px 24px 40px;
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap: 48px;
}
.site-footer h3 {
  color: #FFFFFF;
  font-size: 1rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 1.1rem;
}
.site-footer p, .site-footer li, .site-footer a { color: #FFFFFF; font-size: 0.93rem; }
.site-footer ul { list-style: none; }
.site-footer li { margin-bottom: 10px; }
.site-footer a { text-decoration: none; }
.site-footer a:hover { text-decoration: underline; }
.footer-logo { height: 46px; width: auto; margin-bottom: 1.1rem; }
.footer-social {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border: 1px solid rgba(255, 255, 255, 0.4);
  border-radius: 8px;
  color: #FFFFFF;
  margin-top: 1rem;
}
.footer-social:hover { background: rgba(255, 255, 255, 0.1); }
.footer-contact li { display: flex; gap: 10px; align-items: flex-start; }
.footer-contact svg { flex: none; margin-top: 3px; color: var(--cyan-400); }

.footer-bottom { border-top: 1px solid rgba(255, 255, 255, 0.15); }
.footer-bottom-inner {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 20px 24px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.footer-bottom p { font-size: 0.85rem; color: #FFFFFF; margin: 0; }
.managed-by { display: inline-flex; align-items: center; gap: 12px; font-size: 0.85rem; color: #FFFFFF; white-space: nowrap; }
/* Wiredin logo is white-on-transparent: dark navy backgrounds ONLY.
   The wordmark's own visual weight sits low in its canvas (the accent
   dot above the "i" adds empty headroom), so nudge it up to look
   vertically centered against the "Managed by:" text. */
.managed-by img { position: relative; top: -4px; height: 26px; width: auto; display: block; }

@media (max-width: 700px) {
  /* When the bottom bar wraps, center both lines instead of leaving
     the Managed by / Wiredin lockup hanging left and misaligned. */
  .footer-bottom-inner {
    flex-direction: column;
    justify-content: center;
    text-align: center;
  }
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 1020px) {
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
  .grid-3 { grid-template-columns: repeat(2, 1fr); }
  .main-nav a:not(.btn) { padding: 10px 8px; font-size: 0.85rem; }
}

@media (max-width: 860px) {
  /* On a narrow viewport the text stacks tall (h1 + subtext + two chips +
     two buttons), which makes the hero box far taller than the video's
     16:9 shape. contain would center that short video band mid-box,
     landing it right on top of the chips/buttons. cover fills the whole
     tall box cleanly instead — the tradeoff (full-shot / no-crop) only
     really matters on the wide desktop hero anyway. */
  .hero-video { object-fit: cover; object-position: right 22%; }
  .nav-toggle { display: block; }
  .main-nav {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--navy-900);
    flex-direction: column;
    align-items: stretch;
    padding: 12px 24px 20px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.15);
  }
  .main-nav.open { display: flex; }
  .main-nav a:not(.btn) { padding: 14px 8px; font-size: 1rem; }
  .main-nav a.active { box-shadow: inset 4px 0 0 var(--cyan-400); border-radius: 0; }
  .main-nav .btn { margin: 12px 0 0; text-align: center; }

  .welcome-block, .welcome-block.reverse { grid-template-columns: 1fr; gap: 26px; }
  .welcome-block.reverse .welcome-photo { order: 0; }
  .welcome-photo { max-width: 220px; }

  /* Mobile swaps the desktop's side-by-side interleaved rows for a fully
     grouped render: Hall A's complete run of sessions, then Hall B's —
     an attendee picks a hall and reads straight down it instead of
     hopping between halls every row. The big "HALL A" / "HALL B" bars
     up top are redundant once each hall has its own heading below, so
     they hide; the pillar names stay, stacked, each prefixed with which
     hall it belongs to. */
  .parallel-heads--halls { display: none; }
  .parallel-heads--pillars { grid-template-columns: 1fr; row-gap: 6px; }
  .parallel-heads--pillars > *:first-child::before { content: 'Hall A — '; color: var(--navy-700); }
  .parallel-heads--pillars > *:last-child::before { content: 'Hall B — '; color: var(--navy-700); }
  .parallel-rows--desktop { display: none; }
  .parallel-rows--mobile { display: block; }
  .footer-cols { grid-template-columns: 1fr; gap: 36px; }
}

@media (max-width: 560px) {
  .grid-4, .grid-3, .grid-2 { grid-template-columns: 1fr; }
  .section { padding: 52px 0; }
  .hero-content { padding: 60px 20px 60px; }
  .hero-crest { height: 48px; }
  /* The extra min-height that gives the video room to breathe on wide
     screens just pushes the hero content tall enough on a phone that the
     (short, wide) video band ends up centered mid-hero, overlapping the
     chips/buttons instead of sitting behind them. Let mobile size the
     hero to its content, same as before. */
  .hero { min-height: 0; }
}

/* ---------- Scroll reveal ---------- */
/* Gentle fade-up as elements enter the viewport (main.js toggles
   .is-visible via IntersectionObserver, and sets transition-delay
   inline per item for a row-by-row cascade). Falls back to fully
   visible if JS never runs. */
.reveal-up {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}
.reveal-up.is-visible { opacity: 1; transform: translateY(0); }

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
  }
}