:root {
  --navy: #0a2342; --blue: #1565c0; --sky: #2196f3;
  --light-blue: #e3f2fd; --ice: #f0f7ff;
  --white: #ffffff; --gold: #c9a84c;
  --text: #0d1b2a; --muted: #5a6a7e;
  /* Heading font — overridable per-tenant via /admin/site-design. The admin
     can choose from a curated list of Google Fonts; the public _site-design
     partial injects a <style>:root override to swap this variable. */
  --heading-font: var(--heading-font);
}
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body { font-family: 'DM Sans', sans-serif; color: var(--text); background: var(--white); overflow-x: hidden; }
img { max-width: 100%; }

/* ── NAV ── */
/*
  Top-bar uses --nav-bg-top (a translucent fill so content shows softly
  through). Mobile drawer uses --nav-bg-drawer (fully opaque). Both
  variables are overridable per-tenant via views/public/_site-design.ejs.
  Defaults reproduce the original MILK appearance:
    top bar = rgba(10,35,66,0.96)  (--navy at 96% opacity)
    drawer  = var(--navy)          (whatever --navy resolves to)
*/
:root {
  --nav-bg-top:    rgba(10,35,66,0.96);
  --nav-bg-drawer: var(--navy);
}
nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 48px; height: 72px;
  background: var(--nav-bg-top); backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(255,255,255,0.08);
}
.nav-logo img { height: 38px; filter: brightness(0) invert(1); }
.nav-links { display: flex; align-items: center; gap: 32px; list-style: none; }
.nav-links a { color: rgba(255,255,255,0.75); text-decoration: none; font-size: 13px;
  font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase; transition: color 0.2s; }
.nav-links a:hover { color: var(--white); }
.nav-cta { background: var(--button-bg); color: var(--button-text) !important; padding: 10px 22px;
  border-radius: 4px; font-weight: 700 !important; transition: background 0.2s, transform 0.15s !important; }
.nav-cta:hover { background: var(--button-bg-hover) !important; transform: translateY(-1px); }

/* ── HAMBURGER BUTTON ── */
.nav-hamburger {
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  width: 44px; height: 44px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 8px;
  border-radius: 6px;
  transition: background 0.2s;
  flex-shrink: 0;
}
.nav-hamburger:hover { background: rgba(255,255,255,0.08); }
.nav-hamburger span {
  display: block;
  width: 22px; height: 2px;
  background: rgba(255,255,255,0.85);
  border-radius: 2px;
  transition: transform 0.32s cubic-bezier(0.4,0,0.2,1),
              opacity  0.2s ease,
              width    0.2s ease;
  transform-origin: center;
}
/* Hamburger → X animation when nav-open */
body.nav-open .nav-hamburger span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
body.nav-open .nav-hamburger span:nth-child(2) { opacity: 0; width: 0; }
body.nav-open .nav-hamburger span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ── MOBILE NAV OVERLAY ── */
.nav-overlay {
  position: fixed; inset: 0;
  background: rgba(4,14,27,0.65);
  z-index: 200;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
}
body.nav-open .nav-overlay { opacity: 1; pointer-events: all; }

/* ── MOBILE NAV DRAWER ── */
.nav-drawer {
  position: fixed;
  top: 0; right: 0; bottom: 0;
  width: min(320px, 85vw);
  background: var(--nav-bg-drawer);
  z-index: 300;
  display: flex;
  flex-direction: column;
  transform: translateX(100%);
  transition: transform 0.35s cubic-bezier(0.4,0,0.2,1);
  overflow-y: auto;
  box-shadow: -8px 0 40px rgba(0,0,0,0.45);
}
body.nav-open .nav-drawer { transform: translateX(0); }

/* Prevent body scroll when drawer is open */
body.nav-open { overflow: hidden; }

.nav-drawer-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 24px;
  border-bottom: 1px solid rgba(255,255,255,0.1);
  flex-shrink: 0;
}
.nav-drawer-header img { height: 30px; filter: brightness(0) invert(1); }
.nav-drawer-close {
  width: 40px; height: 40px;
  background: rgba(255,255,255,0.07);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 8px;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  color: rgba(255,255,255,0.7);
  transition: background 0.2s, color 0.2s;
  flex-shrink: 0;
}
.nav-drawer-close:hover { background: rgba(255,255,255,0.14); color: var(--white); }

/* ── DRAWER LINKS ── */
.nav-drawer-links {
  list-style: none;
  padding: 16px 0 32px;
  flex: 1;
}
.nav-drawer-links li { border-bottom: 1px solid rgba(255,255,255,0.06); }
.nav-drawer-links a {
  display: block;
  padding: 15px 28px;
  color: rgba(255,255,255,0.75);
  text-decoration: none;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  transition: color 0.2s, background 0.2s, padding-left 0.25s;
}
.nav-drawer-links a:hover {
  color: var(--white);
  background: rgba(255,255,255,0.05);
  padding-left: 36px;
}
.nav-drawer-cta-item {
  border-bottom: none !important;
  padding: 24px 28px 0;
}
.nav-drawer-cta {
  display: block !important;
  background: var(--button-bg) !important;
  color: var(--button-text) !important;
  text-align: center;
  padding: 16px 24px !important;
  border-radius: 4px;
  font-weight: 700 !important;
  letter-spacing: 0.08em;
  transition: background 0.2s, transform 0.15s !important;
}
.nav-drawer-cta:hover {
  background: var(--button-bg-hover) !important;
  padding-left: 24px !important;
  transform: translateY(-1px);
}

/* ── HERO ── */
/*
  Hero overlay is a 3-stop gradient layered on top of the hero background
  image. Each stop is exposed as its own CSS variable so the per-tenant
  Site Design Settings can override them via views/public/_site-design.ejs.
  Defaults below reproduce the original MILK navy → blue → navy overlay
  (with 88% / 75% / 92% opacity, which the admin page does NOT expose —
  admins pick a hex color, opacity stays fixed).
*/
:root {
  --hero-overlay-stop-1: rgba(10,35,66,0.88);   /* top-left corner   */
  --hero-overlay-stop-2: rgba(21,101,192,0.75); /* middle highlight  */
  --hero-overlay-stop-3: rgba(10,35,66,0.92);   /* bottom-right edge */
}
.hero {
  min-height: 100vh;
  background: linear-gradient(165deg,
                var(--hero-overlay-stop-1) 0%,
                var(--hero-overlay-stop-2) 60%,
                var(--hero-overlay-stop-3) 100%),
    url('https://assets.swoogo.com/uploads/medium/5293863-6813b784c0c02.jpg') center/cover no-repeat;
  display: flex; flex-direction: column; justify-content: center;
  /* 140px top padding matches the agenda/speakers/exhibitors/sponsors/
     activities hero spacing — single shared "space above the hero text"
     value across every page. Bottom padding stays at the original 80px
     since the home hero is full-viewport (min-height: 100vh) and the
     content centers vertically inside the available space. */
  padding: 140px 48px 80px; position: relative; overflow: hidden;
}
.hero::before {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(ellipse 80% 60% at 70% 50%, rgba(33,150,243,0.18) 0%, transparent 70%);
  pointer-events: none;
}
.hero-eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  color: var(--gold); font-size: 12px; font-weight: 600;
  letter-spacing: 0.18em; text-transform: uppercase; margin-bottom: 24px;
}
.hero-eyebrow::before { content: ''; display: block; width: 32px; height: 2px; background: var(--gold); }
.hero-logo { width: 340px; max-width: 90%; margin-bottom: 36px; }
/* Unified hero h1 typography — see the shared rule near the speakers
   header below. Home hero just adds its own max-width constraint
   because it spans the full viewport (100vw) and the headline would
   otherwise stretch end-to-end. */
.hero h1 { max-width: 800px; }
.hero-emphasis {
  /* color set directly by scroll JS — starts at emphasis_color_before, lerps to emphasis_color_after */
  /* initial value overridden immediately on DOMContentLoaded; fallback is the before color */
  color: #1a0e00;
  display: inline;
}
.hero-sub { font-size: 20px; font-weight: 300; color: rgba(255,255,255,0.85);
  max-width: 520px; line-height: 1.6; margin-bottom: 48px; }
/* WYSIWYG-rendered body is now wrapped in a <div>; reset default <p> margins
   inside it so the visual matches the previous single-<p> rendering. */
.hero-sub p { margin: 0 0 12px 0; }
.hero-sub p:last-child { margin-bottom: 0; }
.hero-sub a { color: var(--gold); text-decoration: underline; }
.hero-sub strong { color: #fff; font-weight: 600; }
/* About body content (WYSIWYG-rendered or legacy plain-text-converted-to-<p>).
   Scoped to .about-body wrapper so it does NOT bleed into the buttons that
   sit elsewhere inside .about-content. */
.about-body > p:first-of-type { margin-top: 24px; }
.about-body p { font-size: 17px; line-height: 1.8; color: var(--muted); margin-top: 24px; }
.about-body p:first-child { margin-top: 0; }
.about-body ul, .about-body ol { margin: 16px 0 16px 24px; padding: 0; font-size: 17px; line-height: 1.8; color: var(--muted); }
.about-body a { color: var(--blue); text-decoration: underline; }
.about-body strong { color: var(--text); }
.hero-meta { display: flex; flex-wrap: wrap; gap: 24px; margin-bottom: 48px; }
.hero-meta-item { display: flex; align-items: center; gap: 10px;
  color: rgba(255,255,255,0.9); font-size: 15px; font-weight: 500; }
.hero-meta-item svg { opacity: 0.6; flex-shrink: 0; }
.hero-actions { display: flex; gap: 16px; flex-wrap: wrap; }

/* ── HERO 2-COLUMN LAYOUT (with countdown) ──
   When a countdown is rendered, the hero becomes a 2-column flex row on
   desktop (>=1024px): content on the left, countdown on the right. On
   smaller viewports it falls back to the original single-column stack,
   with the countdown landing AFTER .hero-content (i.e. after the
   Register button) per the design spec.
   .hero-content wraps the existing eyebrow → logo → headline → sub →
   meta → actions block. .hero-scroll is absolutely positioned at the
   bottom so it sits outside this row layout. */
.hero-content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  flex: 1 1 auto;
  min-width: 0;
}
@media (min-width: 1024px) {
  .hero { flex-direction: row; align-items: center; gap: 64px; }
}

/* ── HERO COUNTDOWN TIMER ──
   Four SVG-ring units showing days / hours / minutes / seconds until the
   admin-configured countdown_target. Numbers in DM Sans Bold, labels in
   the same letter-spaced uppercase style as .hero-eyebrow. Transparent
   background — sits on top of the hero gradient overlay.
   Ring math: r=46 in a 100x100 viewBox → circumference ≈ 289. The JS
   updates strokeDashoffset on each tick to animate progress around each
   ring. SVG itself is rotated -90deg so the arc starts at 12 o'clock.

   Sizing strategy: CSS custom properties (--ring-size, --value-font,
   etc.) defined on .hero-countdown. The mobile defaults stay close to
   the original sizes; the desktop media query (>=1024px) bumps them up
   significantly (~2x at the max) and uses `vw` in the middle of the
   clamp() so the rings smoothly scale down as the browser narrows —
   right up until the mobile breakpoint, where the layout switches to
   stacked-below-the-buttons and the smaller mobile sizes kick in. */
.hero-countdown {
  /* Default (mobile / <1024px) sizing. Overridden in the desktop media
     query below. Keeping these as variables means each downstream rule
     references one source of truth per breakpoint. */
  --ring-size:    clamp(75px, 12vw, 110px);
  --value-font:   clamp(24px, 3.2vw, 34px);
  --label-font:   11px;
  --label-margin: 14px;

  display: grid;
  grid-template-columns: repeat(4, minmax(60px, 1fr));
  gap: 20px;
  flex: 0 0 auto;
  justify-items: center;
  align-items: start;
}
.hero-countdown[hidden] { display: none; }
.countdown-unit {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.countdown-ring {
  width:  var(--ring-size);
  height: var(--ring-size);
  /* rotate(-90deg) puts the SVG circle's path origin (which is at the
     3 o'clock position by spec) up at the 12 o'clock position.
     scaleX(-1) mirrors horizontally so the path direction reverses
     from CW to CCW — meaning the arc now grows counter-clockwise from
     12, and as time decreases the trailing edge retreats clockwise
     instead of counter-clockwise (the visual "drain direction"). */
  transform: scaleX(-1) rotate(-90deg);
}
.countdown-ring-bg {
  fill: none;
  stroke: rgba(255,255,255,0.18);
  stroke-width: 3;
}
.countdown-ring-fg {
  fill: none;
  stroke: rgba(255,255,255,0.95);
  stroke-width: 3;
  stroke-linecap: round;
  transition: stroke-dashoffset 0.5s ease;
}
.countdown-value {
  position: absolute;
  /* Vertically center over the SVG ring (which is the first child).
     Half the ring height places the value's center on the ring's center. */
  top: calc(var(--ring-size) / 2);
  left: 50%;
  transform: translate(-50%, -50%);
  font-family: 'DM Sans', sans-serif;
  font-weight: 700;
  font-size: var(--value-font);
  color: #fff;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
  pointer-events: none;
}
.countdown-label {
  margin-top: var(--label-margin);
  font-family: 'DM Sans', sans-serif;
  font-size: var(--label-font);
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.7);
}

/* Desktop (>=1024px): bigger rings than mobile but scaled back ~30%
   from the initial 2x bump after the first design pass felt too
   bulky on narrow/mid desktops. `vw` in the middle of the clamp
   keeps the smooth shrink as the window narrows. At 1024px the vw
   value resolves to ~102px; at very wide screens (2200px+) the
   ceiling at 220px kicks in, preserving the original "big" feel
   for ultrawide displays. Common laptop/desktop widths (1280-1700)
   land in the 128-170px range. */
@media (min-width: 1024px) {
  .hero-countdown {
    --ring-size:    clamp(100px, 10vw,  220px);
    --value-font:   clamp(32px,  3.7vw, 68px);
    --label-font:   11px;
    --label-margin: 16px;
    gap: 18px;
  }
}

/* Mobile (<1024px): countdown drops below the Register button (handled
   by .hero flex-direction: column at this breakpoint). Add margin so it
   doesn't sit right against the button, center it within the hero
   padding, and cap its width so on tablet it doesn't span the full
   hero. */
@media (max-width: 1023px) {
  .hero-countdown {
    margin-top: 40px;
    justify-content: center;
    width: 100%;
    max-width: 460px;
  }
}

/* Very narrow phones: 4-across is cramped. Drop to a 2x2 grid. */
@media (max-width: 480px) {
  .hero-countdown {
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
    max-width: 320px;
  }
}

.hero-scroll {
  position: absolute; bottom: 36px; left: 50%; transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  color: rgba(255,255,255,0.5); font-size: 11px; letter-spacing: 0.15em; text-transform: uppercase;
  animation: scrollBob 2s ease-in-out infinite;
}
@keyframes scrollBob {
  0%,100% { transform: translateX(-50%) translateY(0); }
  50%      { transform: translateX(-50%) translateY(6px); }
}

/* ── BUTTONS ── */
/*
  Primary CTA buttons (Register Now, .btn-primary / .btn-gold / .nav-cta /
  .nav-drawer-cta) all share one pair of CSS variables so the per-tenant
  Site Design Settings can override their color + hover color in one place.
  Defaults reproduce the original MILK gold-with-lighter-gold-on-hover look.
  The hover var is decoupled (not auto-derived from the base) so admins
  picking a non-gold base can specify a coherent hover shade.
*/
:root {
  --button-bg:       var(--gold);
  --button-bg-hover: #e0bc6a;
  /* Label color on the four primary CTA buttons. Defaults to the tenant's
     dark color (var(--navy)) so legacy MILK keeps its dark-text-on-gold
     look; per-tenant Site Design Settings can override this when the
     button background is light and a different label color is needed. */
  --button-text:     var(--navy);
}

/*
  Decorative monoline accent icons. Currently used in the Hotel section
  (location pin, dollar sign, check) and reserved for any future themed
  icon decoration. Opt-in via class="icon-themed" on the <svg>; the SVG's
  inline stroke="..." attribute stays as a graceful fallback for when the
  stylesheet hasn't loaded yet, but the class wins via CSS specificity.
  Default tracks --gold (= accent_color) so an admin who only changes
  accent_color sees the icons + their soft backing tint follow along.
*/
:root {
  --icon-color: var(--gold);
}
.icon-themed { stroke: var(--icon-color); }
.btn-primary {
  display: inline-block; background: var(--button-bg); color: var(--button-text);
  padding: 16px 36px; border-radius: 4px; font-weight: 700; font-size: 14px;
  letter-spacing: 0.08em; text-transform: uppercase; text-decoration: none;
  transition: background 0.2s, transform 0.15s, box-shadow 0.2s;
}
.btn-primary:hover { background: var(--button-bg-hover); transform: translateY(-2px); box-shadow: 0 8px 32px rgba(201,168,76,0.4); }
.btn-outline {
  display: inline-block; border: 1.5px solid rgba(255,255,255,0.45); color: var(--white);
  padding: 15px 32px; border-radius: 4px; font-weight: 500; font-size: 14px;
  letter-spacing: 0.06em; text-transform: uppercase; text-decoration: none;
  transition: border-color 0.2s, background 0.2s;
}
.btn-outline:hover { border-color: var(--white); background: rgba(255,255,255,0.08); }
/*
  .btn-blue was originally the "secondary CTA" family — solid-fill blue
  for buttons like "View Agenda" / "Inquire About Sponsoring". Folded
  into the unified Primary Button variables in the Site Design pass so
  the entire site has a single user-controllable button color. Keeps its
  own dimensions (padding/font-size) — only the colors merged. The class
  name is left intact rather than refactored to .btn-primary to avoid a
  churn-heavy markup pass; both classes now resolve to identical color
  treatment via the shared variables.
*/
.btn-blue {
  display: inline-block; background: var(--button-bg); color: var(--button-text);
  padding: 14px 32px; border-radius: 4px; font-weight: 600; font-size: 13px;
  letter-spacing: 0.08em; text-transform: uppercase; text-decoration: none;
  transition: background 0.2s, transform 0.15s;
}
.btn-blue:hover { background: var(--button-bg-hover); transform: translateY(-1px); }
.btn-outline-blue {
  display: inline-block; border: 1.5px solid var(--blue); color: var(--blue);
  padding: 13px 28px; border-radius: 4px; font-weight: 600; font-size: 13px;
  letter-spacing: 0.08em; text-transform: uppercase; text-decoration: none;
  transition: background 0.2s;
}
.btn-outline-blue:hover { background: var(--light-blue); }
.btn-gold {
  display: inline-block; background: var(--button-bg); color: var(--button-text);
  padding: 14px 32px; border-radius: 4px; font-weight: 700; font-size: 13px;
  letter-spacing: 0.08em; text-transform: uppercase; text-decoration: none;
  margin-top: 32px; transition: background 0.2s, transform 0.15s;
}
.btn-gold:hover { background: var(--button-bg-hover); transform: translateY(-1px); }

/* ── SECTION BASE ── */
section { padding: 96px 48px; }
.section-eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  color: var(--blue); font-size: 11px; font-weight: 700;
  letter-spacing: 0.2em; text-transform: uppercase; margin-bottom: 16px;
}
.section-eyebrow::before { content: ''; display: block; width: 24px; height: 2px; background: var(--blue); }
h2 { font-family: var(--heading-font); font-size: clamp(32px, 4vw, 52px);
  font-weight: 700; line-height: 1.15; color: var(--navy); }

/* ── STATS ── */
.stats { background: var(--navy); padding: 56px 48px; display: flex; justify-content: center; }
.stats-inner { display: flex; flex-wrap: wrap; gap: 0; max-width: 1200px; width: 100%; }
.stat-item { flex: 1 1 200px; text-align: center; padding: 24px 32px;
  border-right: 1px solid rgba(255,255,255,0.1); }
.stat-item:last-child { border-right: none; }
.stat-num { font-family: var(--heading-font); font-size: 48px; font-weight: 700;
  color: var(--gold); line-height: 1; margin-bottom: 8px; }
.stat-label { font-size: 12px; font-weight: 600; color: rgba(255,255,255,0.55);
  letter-spacing: 0.14em; text-transform: uppercase; }

/* ── ABOUT ── */
.about { background: var(--ice); position: relative; overflow: hidden; }
.about::after {
  content: ''; position: absolute; right: -120px; top: -80px;
  width: 600px; height: 600px; border-radius: 50%;
  background: radial-gradient(circle, rgba(33,150,243,0.07) 0%, transparent 70%);
  pointer-events: none;
}
.about-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 80px;
  align-items: center; max-width: 1200px; margin: 0 auto; }
.about-content p { font-size: 17px; line-height: 1.8; color: var(--muted); margin-top: 24px; }
.about-img { border-radius: 12px; overflow: hidden; position: relative;
  box-shadow: 0 40px 80px rgba(10,35,66,0.18); }
.about-img > img { width: 100%; display: block; aspect-ratio: 4/3; object-fit: cover; }
.about-img::before {
  content: ''; position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background: linear-gradient(135deg, rgba(21,101,192,0.15), transparent);
}

/* About photo slider: up to 5 images stack absolutely; the .active one
   fades to opacity 1, the rest stay at 0. The container itself reserves
   the same 4/3 aspect ratio as a single image so the surrounding layout
   doesn't jump as slides switch. The decorative .about-img::before
   gradient sits at z-index: 2, above the slides (z-index: 0/1) so it
   keeps its overlay effect regardless of which slide is active. */
.about-slider {
  position: relative;
  width: 100%;
  aspect-ratio: 4/3;
}
.about-slide {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 0.7s ease;
  z-index: 0;
}
.about-slide.active {
  opacity: 1;
  z-index: 1;
}

/* ── REGISTRATION ── */
.registration { max-width: 1200px; margin: 0 auto; }
.reg-header { margin-bottom: 56px; }
.reg-header p { font-size: 17px; color: var(--muted); margin-top: 16px; max-width: 560px; line-height: 1.7; }
.reg-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 24px; margin-bottom: 40px; }
.reg-card {
  border: 1.5px solid #e2ecf7; border-radius: 12px; padding: 36px 32px;
  background: var(--white); transition: border-color 0.2s, box-shadow 0.2s, transform 0.2s;
  position: relative; overflow: hidden;
}
.reg-card:hover { border-color: var(--sky); box-shadow: 0 16px 48px rgba(21,101,192,0.1); transform: translateY(-4px); }
.reg-card.featured { border-color: var(--blue); background: linear-gradient(135deg, #f0f7ff, #e3f2fd); }
/* The "EARLY BIRD" pill in the top-right is a separate class so it can be
   applied per-tier — only when that tier actually has an early_bird_price
   configured. .featured (background + border) is independent and is applied
   to every tier during the early-bird window. */
.reg-card.eb-pill::after {
  content: 'EARLY BIRD'; position: absolute; top: 16px; right: 16px;
  background: var(--gold); color: var(--navy); font-size: 10px; font-weight: 700;
  letter-spacing: 0.1em; padding: 4px 10px; border-radius: 20px;
}
.reg-type { font-size: 12px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--blue); margin-bottom: 12px; }
.reg-title { font-family: var(--heading-font); font-size: 22px; font-weight: 700;
  color: var(--navy); margin-bottom: 20px; }
.reg-prices { display: flex; align-items: baseline; gap: 12px; margin-bottom: 16px; flex-wrap: wrap; }
.reg-price-pair { display: inline-flex; align-items: baseline; gap: 6px; }
.reg-price-early { font-size: 38px; font-weight: 700; color: var(--navy);
  font-family: var(--heading-font); }
.reg-price-std { font-size: 18px; color: var(--muted); text-decoration: line-through; }
/* "(early bird)" / "(standard)" labels next to each price. Match .reg-title
   typography (Playfair Display serif, 22px, 700 navy). Sits inside
   .reg-price-pair so it stays glued to its price; text-decoration:none stops
   the strikethrough from .reg-price-std bleeding onto the adjacent label. */
.reg-price-label {
  font-family: var(--heading-font);
  font-size: 22px; font-weight: 700;
  color: var(--navy);
  text-decoration: none;
}
.reg-note { font-size: 13px; color: var(--muted); line-height: 1.6;
  border-top: 1px solid #e2ecf7; padding-top: 16px; margin-top: 16px; }
.reg-deadline {
  display: inline-flex; align-items: center; gap: 10px;
  background: #fff8e5; border: 1px solid #f0d87e; border-radius: 8px;
  padding: 14px 20px; font-size: 14px; font-weight: 600; color: #7a5800;
}

/* ── HOTEL ── */
.hotel { background: var(--navy); position: relative; overflow: hidden; padding: 96px 48px; }
.hotel::before {
  content: ''; position: absolute; inset: 0;
  /* Screened-back background image, sourced from --hotel-bg-image which
     the public index.ejs sets inline on the .hotel section from
     hotel.image. So when the admin changes the foreground photo in
     /admin/hotel, this 12%-opacity backdrop follows automatically. The
     fallback URL inside var() covers the edge case where the inline
     style isn't present (e.g. stale render or future refactor); it
     matches the same URL the inline EJS uses when hotel.image is blank. */
  background: var(--hotel-bg-image, url('https://assets.swoogo.com/uploads/medium/5293863-6813b784c0c02.jpg')) center/cover no-repeat;
  opacity: 0.12;
}
.hotel-inner { max-width: 1200px; margin: 0 auto; display: grid;
  grid-template-columns: 1fr 1fr; gap: 80px; align-items: center; position: relative; z-index: 1; }
.hotel .section-eyebrow::before { background: var(--gold); }
.hotel .section-eyebrow { color: var(--gold); }
.hotel h2 { color: var(--white); }
.hotel-detail { display: flex; align-items: flex-start; gap: 16px; margin-top: 28px;
  padding: 24px; border-radius: 10px; background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.1); }
.hotel-detail-icon { width: 40px; height: 40px; border-radius: 8px;
  /* Soft tinted circle behind the monoline icon. color-mix derives a 20%
     opacity version of --icon-color so the backing follows whatever color
     the admin picks (or whatever accent_color it falls back to). The
     rgba(201,168,76,0.2) fallback covers the case where color-mix isn't
     supported (Chrome <111, Safari <16.2, Firefox <113 — all from 2023). */
  background: rgba(201,168,76,0.2);
  background: color-mix(in srgb, var(--icon-color) 20%, transparent);
  display: flex; align-items: center;
  justify-content: center; flex-shrink: 0; }
.hotel-detail-text h4 { color: var(--white); font-size: 15px; font-weight: 600; margin-bottom: 4px; }
.hotel-detail-text p { color: rgba(255,255,255,0.6); font-size: 14px; line-height: 1.6; }
.hotel-img-wrap { border-radius: 12px; overflow: hidden; box-shadow: 0 40px 80px rgba(0,0,0,0.5); }
.hotel-img-wrap img { width: 100%; display: block; aspect-ratio: 4/3; object-fit: cover; }

/* ── FLIGHT STRIP ── */
.flight-strip { background: linear-gradient(135deg, var(--blue), var(--navy));
  padding: 56px 48px; text-align: center; }
.flight-strip h3 { font-family: var(--heading-font); font-size: 28px;
  color: var(--white); margin-bottom: 12px; }
.flight-strip p { color: rgba(255,255,255,0.7); font-size: 15px; margin-bottom: 28px; }

/* ── AWARDS ── */
.awards-section { background: var(--ice); padding: 96px 48px; }
.awards-inner { max-width: 1200px; margin: 0 auto; }
.awards-header { margin-bottom: 56px; }
.awards-header p { font-size: 16px; color: var(--muted); margin-top: 16px; }
.awards-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
.award-card { background: var(--white); border-radius: 12px; overflow: hidden;
  border: 1.5px solid #e2ecf7; transition: transform 0.2s, box-shadow 0.2s;
  display: flex; flex-direction: column; }
.award-card:hover { transform: translateY(-6px); box-shadow: 0 20px 60px rgba(21,101,192,0.12); }
.award-card img { width: 100%; display: block; }

/* Per-card title shown above the image (only rendered when populated).
   Needs its own padding because the image below bleeds edge-to-edge. */
.award-card-title {
  font-family: var(--heading-font);
  font-size: 20px; font-weight: 700;
  color: var(--navy);
  margin: 0;
  padding: 20px 24px 12px;
  line-height: 1.25;
}

/* Body + button area below the image (only rendered when populated) */
.award-card-content { padding: 20px 24px 24px; display: flex; flex-direction: column;
  gap: 16px; flex: 1; }
.award-card-body { font-size: 14px; line-height: 1.55; color: #4b5563; }
.award-card-body p { margin: 0 0 10px 0; }
.award-card-body p:last-child { margin-bottom: 0; }
.award-card-body a { color: var(--blue); text-decoration: underline; }
.award-card-body a:hover { opacity: 0.85; }
.award-card-body ul,
.award-card-body ol { margin: 0 0 10px 20px; padding: 0; }
.award-card-body strong { color: #1f2937; }

.award-card-button { display: inline-block; align-self: flex-start; margin-top: auto;
  padding: 10px 18px; background: var(--button-bg); color: var(--button-text); text-decoration: none;
  border-radius: 6px; font-weight: 600; font-size: 14px; transition: background 0.15s; }
.award-card-button:hover { background: var(--button-bg-hover); }

/* "All Awards Information" — full-width block below the three-card grid.
   Each piece (headline + body) renders only when populated. */
.awards-info {
  margin-top: 48px;
  padding: 32px 36px;
  background: var(--white);
  border-radius: 12px;
  border: 1.5px solid #e2ecf7;
}
.awards-info-headline {
  font-family: var(--heading-font);
  font-size: 22px; font-weight: 700;
  color: var(--navy);
  margin: 0 0 16px 0;
  line-height: 1.3;
}
.awards-info-body { font-size: 16px; line-height: 1.7; color: #4b5563; }
.awards-info-body p { margin: 0 0 12px 0; }
.awards-info-body p:last-child { margin-bottom: 0; }
.awards-info-body a { color: var(--blue); text-decoration: underline; }
.awards-info-body a:hover { opacity: 0.85; }
.awards-info-body ul, .awards-info-body ol { margin: 0 0 12px 22px; padding: 0; }
.awards-info-body strong { color: #1f2937; }

/* ── SPONSORS ── */
#sponsors { padding: 96px 48px; }
.sponsor-section { max-width: 1200px; margin: 0 auto; }
.sponsor-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: center; }
.sponsor-content p { font-size: 17px; color: var(--muted); line-height: 1.8; margin-top: 20px; }
.sponsor-actions { display: flex; gap: 16px; margin-top: 32px; flex-wrap: wrap; }
.sponsor-visual { background: linear-gradient(135deg, var(--light-blue), #dbeeff);
  border-radius: 16px; padding: 56px; text-align: center; }
.sponsor-visual p { font-family: var(--heading-font); font-size: 22px;
  color: var(--navy); line-height: 1.4; margin-bottom: 8px; }
.sponsor-visual span { font-size: 14px; color: var(--muted); }
/* When the admin uploads a visual image, drop the gradient/padding so the
   image fills the column edge-to-edge with rounded corners. */
.sponsor-visual--image { background: none; padding: 0; }
.sponsor-visual--image img {
  width: 100%; height: auto; display: block;
  border-radius: 16px;
}
/* When no image is set, collapse the right column so the sponsor content
   isn't stranded next to an empty gap. */
.sponsor-grid--single { grid-template-columns: 1fr; }

/* ── CTA BAND ── */
.cta-band { background: var(--navy); padding: 96px 48px; text-align: center;
  position: relative; overflow: hidden; }
.cta-band::before {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(ellipse 70% 60% at 50% 50%, rgba(33,150,243,0.15) 0%, transparent 70%);
}
.cta-band h2 { color: var(--white); margin-bottom: 16px; position: relative; }
.cta-band p { color: rgba(255,255,255,0.65); font-size: 17px; margin-bottom: 36px; position: relative; }

/* ── FOOTER ── */
footer { background: #040e1b; padding: 56px 48px 32px; }
.footer-top { display: flex; justify-content: space-between; align-items: flex-start;
  flex-wrap: wrap; gap: 32px; padding-bottom: 40px;
  border-bottom: 1px solid rgba(255,255,255,0.08); margin-bottom: 32px; }
.footer-logo img { height: 32px; filter: brightness(0) invert(1); opacity: 0.7; }
.footer-links { display: flex; gap: 24px; flex-wrap: wrap; list-style: none; }
.footer-links a { color: rgba(255,255,255,0.45); font-size: 12px; text-decoration: none; transition: color 0.2s; }
.footer-links a:hover { color: rgba(255,255,255,0.8); }
.social-links { display: flex; gap: 12px; }
.social-btn { width: 36px; height: 36px; border-radius: 50%;
  background: rgba(255,255,255,0.07); display: flex; align-items: center;
  justify-content: center; transition: background 0.2s; }
.social-btn:hover { background: rgba(255,255,255,0.15); }
.social-btn img { width: 16px; height: 16px; filter: brightness(0) invert(1); opacity: 0.6; }
.footer-bottom { display: flex; justify-content: space-between; align-items: center;
  flex-wrap: wrap; gap: 12px; }
.footer-copy { color: rgba(255,255,255,0.3); font-size: 12px; }

/* ── ANIMATIONS ── */
@keyframes fadeUp { from { opacity: 0; transform: translateY(28px); } to { opacity: 1; transform: translateY(0); } }
.hero-eyebrow { animation: fadeUp 0.7s ease both; }
.hero-logo     { animation: fadeUp 0.7s 0.1s ease both; }
.hero h1       { animation: fadeUp 0.7s 0.2s ease both; }
.hero-sub      { animation: fadeUp 0.7s 0.3s ease both; }
.hero-meta     { animation: fadeUp 0.7s 0.4s ease both; }
.hero-actions  { animation: fadeUp 0.7s 0.5s ease both; }

/* ── REDUCED MOTION ── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.1ms !important; }
}

/* ── RESPONSIVE ── */
@media (max-width: 900px) {
  /* Show hamburger, hide desktop nav links */
  .nav-links { display: none; }
  .nav-hamburger { display: flex; }

  nav { padding: 0 24px; }
  section, .hotel, .awards-section, #sponsors { padding: 72px 24px; }
  .hero { padding: 120px 24px 72px; }  /* mobile padding-top matches the agenda's mobile (.speakers-header below) so above-text spacing is consistent on narrow viewports too */
  .about-grid, .hotel-inner, .sponsor-grid { grid-template-columns: 1fr; gap: 40px; }
  .awards-grid { grid-template-columns: 1fr; }
  .stats { padding: 40px 24px; }
  .stat-item { border-right: none; border-bottom: 1px solid rgba(255,255,255,0.1); padding: 20px; }
  .stat-item:last-child { border-bottom: none; }
  .flight-strip { padding: 40px 24px; }
  footer { padding: 40px 24px 24px; }
  .sponsor-visual { padding: 36px 28px; }
  .reg-cards { grid-template-columns: 1fr; }
}

@media (max-width: 480px) {
  .hero-logo { width: 240px; }
  /* Home hero h1 mobile sizing removed — covered by the unified
     hero-h1 rule's clamp(36px, 5vw, 64px), which already scales
     down nicely on narrow viewports. */
  .hero-scroll { display: none; }
  .nav-drawer { width: 100vw; }
}

/* ── NAV ACTIVE STATE ── */
.nav-active { color: var(--white) !important; border-bottom: 2px solid var(--gold); padding-bottom: 2px; }

/* ── SPEAKERS PAGE HEADER ── */
.speakers-header {
  background: var(--navy);
  padding: 140px 48px 72px;
  position: relative;
  overflow: hidden;
}
/* When a background image is set via inline style, disable the default radial glow */
.speakers-header--img::before { display: none; }
.speakers-header::before {
  content: '';
  position: absolute; inset: 0;
  background: radial-gradient(ellipse 80% 60% at 70% 50%, rgba(33,150,243,0.14) 0%, transparent 70%);
  pointer-events: none;
}
/* Background image support — image is set as inline style by EJS */
.speakers-header--img {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
.speakers-header-inner { max-width: 1200px; margin: 0 auto; position: relative; }
/* Conference logo at the top of a page hero (agenda/speakers/etc.).
   Sized smaller than the homepage .hero-logo (340px) since these sub-page
   heroes are shorter strips, not full-viewport heroes. max-width keeps the
   logo from overflowing on narrow viewports; the auto-height preserves the
   logo's natural aspect ratio. */
.page-header-logo {
  display: block;
  width: 220px;
  max-width: 60%;
  height: auto;
  margin-bottom: 24px;
}

/* ── Hero photo slider 2-column layout ──
   When the agenda or exhibitors hero has photos to show (the .has-hero-slider
   modifier class is set by the EJS), the inner container becomes a 2-column
   grid: text on the left, slider on the right. With no photos, no slider
   renders and the text takes the full inner width as before.
   On viewports under 900px the columns stack with the slider beneath the
   text, since the slider's natural width would crowd the text otherwise. */
.has-hero-slider .speakers-header-inner,
.has-hero-slider .exhibitors-hero-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  align-items: center;
}
.has-hero-slider .hero-text-col { min-width: 0; }
@media (max-width: 900px) {
  .has-hero-slider .speakers-header-inner,
  .has-hero-slider .exhibitors-hero-inner {
    grid-template-columns: 1fr;
    gap: 32px;
  }
}
/* Border + shadow treatment on hero-context sliders so they read as a
   distinct visual element against the navy hero background. The
   homepage About slider already gets a similar treatment via .about-img
   wrapping it, so this rule scopes to the hero context only. */
.has-hero-slider .about-slider {
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 30px 60px rgba(0,0,0,0.35);
}
/* Unified hero h1 typography — applies to every page hero so headlines
   are visually consistent regardless of which sub-page a visitor is on.
   The home hero adds a max-width constraint above; everything else
   inherits its container width via the .*-header-inner wrappers. */
.hero h1,
.speakers-header h1,
.exhibitors-hero h1,
.sponsors-header h1,
.activities-header h1 {
  font-family: var(--heading-font);
  font-size: clamp(36px, 5vw, 64px);
  font-weight: 900;
  color: var(--white);
  line-height: 1.1;
  margin-bottom: 16px;
}
.speakers-header p { font-size: 18px; color: rgba(255,255,255,0.7); max-width: 560px; line-height: 1.6; }
.speakers-synced {
  display: inline-flex; align-items: center; gap: 7px;
  margin-top: 20px; font-size: 12px; color: rgba(255,255,255,0.35);
  letter-spacing: 0.04em;
}

/* ── SPEAKERS SECTION + GRID ── */
.speakers-section { padding: 72px 48px; background: var(--ice); min-height: 400px; }
.speakers-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 28px;
  max-width: 1200px;
  margin: 0 auto;
}

/* ── SPEAKER CARD ── */
.speaker-card {
  background: var(--white);
  border: 1.5px solid #e2ecf7;
  border-radius: 14px;
  padding: 32px 28px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  transition: border-color 0.2s, box-shadow 0.2s, transform 0.2s;
}
.speaker-card:hover {
  border-color: var(--sky);
  box-shadow: 0 16px 48px rgba(21,101,192,0.1);
  transform: translateY(-4px);
}

/* ── SPEAKER PHOTO ── */
.speaker-photo-wrap { margin-bottom: 20px; }
.speaker-photo, .speaker-initials {
  width: 200px;
  height: 200px;
  border-radius: 50%;
  object-fit: cover;
  object-position: top;
  display: block;
}
.speaker-photo { border: 3px solid var(--light-blue); }
.speaker-initials {
  background: linear-gradient(135deg, var(--navy), var(--blue));
  display: flex; align-items: center; justify-content: center;
  font-family: var(--heading-font);
  font-size: 64px; font-weight: 700;
  color: var(--white); letter-spacing: 0.04em;
  border: 3px solid rgba(33,150,243,0.2);
}

/* ── SPEAKER INFO ── */
.speaker-info { flex: 1; display: flex; flex-direction: column; width: 100%; }
.speaker-name {
  font-family: var(--heading-font);
  font-size: 20px; font-weight: 700;
  color: var(--navy); margin-bottom: 4px;
  line-height: 1.2;
}
.speaker-name a { color: inherit; text-decoration: none; transition: color 0.2s; }
.speaker-name a:hover { color: var(--blue); }
.speaker-title { font-size: 13px; font-weight: 600; color: var(--gold); margin-bottom: 2px; letter-spacing: 0.02em; }
.speaker-company { font-size: 13px; color: var(--muted); margin-bottom: 14px; }
.speaker-bio {
  font-size: 14px; color: var(--muted); line-height: 1.65;
  margin-bottom: 16px;
}

/* ── SESSION TAGS ── */
.speaker-sessions { display: flex; flex-wrap: wrap; gap: 6px; margin-top: auto; padding-top: 14px; }
.session-tag {
  background: var(--light-blue); color: var(--blue);
  font-size: 11px; font-weight: 600; letter-spacing: 0.06em;
  padding: 4px 10px; border-radius: 20px; line-height: 1.4;
}

/* ── TWITTER LINK ── */
.speaker-twitter {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 12px; color: var(--muted); text-decoration: none;
  margin-top: 10px; transition: color 0.2s;
}
.speaker-twitter:hover { color: var(--navy); }

/* ── EXPAND BUTTON ── */
.speaker-expand-btn {
  display: inline-flex; align-items: center; gap: 5px;
  margin-top: 12px;
  background: none; border: none; padding: 0; cursor: pointer;
  font-family: 'DM Sans', sans-serif;
  font-size: 13px; font-weight: 600;
  color: var(--blue); letter-spacing: 0.02em;
  transition: color 0.2s, gap 0.2s;
}
.speaker-expand-btn:hover { color: var(--navy); gap: 8px; }

/* ── SPEAKER MODAL ── */
.speaker-modal-overlay {
  position: fixed; inset: 0; z-index: 1000;
  background: rgba(10,35,66,0.72);
  backdrop-filter: blur(4px);
  display: flex; align-items: center; justify-content: center;
  padding: 24px;
  opacity: 0; pointer-events: none;
  transition: opacity 0.25s ease;
}
.speaker-modal-overlay[aria-hidden="false"] {
  opacity: 1; pointer-events: all;
}
body.modal-open { overflow: hidden; }

.speaker-modal {
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 24px 80px rgba(10,35,66,0.3);
  max-width: 760px; width: 100%;
  max-height: 90vh; overflow-y: auto;
  position: relative;
  transform: translateY(16px);
  transition: transform 0.25s ease;
}
.speaker-modal-overlay[aria-hidden="false"] .speaker-modal {
  transform: translateY(0);
}

.speaker-modal-close {
  position: absolute; top: 16px; right: 16px; z-index: 10;
  background: rgba(10,35,66,0.08); border: none;
  width: 36px; height: 36px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; color: var(--navy);
  transition: background 0.2s;
}
.speaker-modal-close:hover { background: rgba(10,35,66,0.16); }

.speaker-modal-inner {
  display: flex; gap: 36px; padding: 48px;
  align-items: flex-start;
}

/* Photo column */
.speaker-modal-photo-wrap { flex-shrink: 0; }
.speaker-modal-photo {
  width: 180px; height: 180px;
  border-radius: 50%; object-fit: cover; object-position: top;
  border: 4px solid var(--light-blue); display: block;
}
.speaker-modal-initials {
  width: 180px; height: 180px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--navy), var(--blue));
  display: flex; align-items: center; justify-content: center;
  font-family: var(--heading-font);
  font-size: 56px; font-weight: 700;
  color: #fff; letter-spacing: 0.04em;
}

/* Text column */
.speaker-modal-body { flex: 1; min-width: 0; }
.speaker-modal-name {
  font-family: var(--heading-font);
  font-size: 26px; font-weight: 700;
  color: var(--navy); margin-bottom: 6px; line-height: 1.2;
}
.speaker-modal-title {
  font-size: 13px; font-weight: 600; color: var(--gold);
  letter-spacing: 0.04em; margin-bottom: 2px;
}
.speaker-modal-company {
  font-size: 13px; color: var(--muted); margin-bottom: 20px;
}
.speaker-modal-bio {
  font-size: 15px; color: #374151; line-height: 1.75;
  margin-bottom: 20px;
}
.speaker-modal-sessions {
  display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 16px;
}
.speaker-modal-links {
  display: flex; flex-wrap: wrap; gap: 12px; margin-top: 4px;
}
.speaker-modal-link {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 13px; font-weight: 600; color: var(--blue);
  text-decoration: none; transition: color 0.2s;
}
.speaker-modal-link:hover { color: var(--navy); }

/* Modal responsive */
@media (max-width: 600px) {
  .speaker-modal-inner { flex-direction: column; align-items: center; padding: 36px 24px; gap: 24px; }
  .speaker-modal-body { text-align: center; }
  .speaker-modal-sessions, .speaker-modal-links { justify-content: center; }
}

/* ── EMPTY STATE ── */
.speakers-empty {
  max-width: 480px; margin: 64px auto; text-align: center;
  display: flex; flex-direction: column; align-items: center; gap: 16px;
}
.speakers-empty h3 { font-family: var(--heading-font); font-size: 24px; color: var(--navy); }
.speakers-empty p { font-size: 15px; color: var(--muted); line-height: 1.6; }
.speakers-empty code { background: #eef2f7; padding: 2px 6px; border-radius: 4px; font-size: 13px; }

/* ── RESPONSIVE: speakers ── */
@media (max-width: 900px) {
  .speakers-header { padding: 120px 24px 56px; }
  .speakers-section { padding: 48px 24px; }
  .speakers-grid { grid-template-columns: 1fr 1fr; gap: 20px; }
}
@media (max-width: 600px) {
  .speakers-grid { grid-template-columns: 1fr; }
}

/* ═══════════════════════════════════════════════════════════════════════════════
   AGENDA PAGE
   ═══════════════════════════════════════════════════════════════════════════════ */

.agenda-header { padding-bottom: 32px; }

/* ── Track filter pills ── */
.agenda-filters {
  display: flex; flex-wrap: wrap; gap: 8px;
  max-width: 900px; margin: 0 auto 28px;
  padding: 0 32px;
}
.agenda-filter-btn {
  padding: 7px 16px; border-radius: 20px; border: 2px solid transparent;
  font-family: 'DM Sans', sans-serif; font-size: 13px; font-weight: 600;
  cursor: pointer; transition: all 0.18s ease;
  background: #eef2f7; color: var(--muted);
}
.agenda-filter-btn:hover { background: var(--light-blue); color: var(--blue); }
.agenda-filter-btn.active { background: var(--navy); color: #fff; border-color: var(--navy); }
.agenda-filter-btn[data-track]:not([data-track="all"]).active {
  background: var(--track-color, var(--blue));
  border-color: var(--track-color, var(--blue));
  color: #fff;
}

/* ── Day tabs ── */
.agenda-tabs {
  display: flex; gap: 0;
  max-width: 900px; margin: 0 auto 36px;
  padding: 0 32px;
  border-bottom: 2px solid #e2e8f0;
}
.agenda-tab {
  padding: 12px 24px; border: none; background: none;
  font-family: 'DM Sans', sans-serif; font-size: 14px; font-weight: 600;
  color: var(--muted); cursor: pointer;
  border-bottom: 3px solid transparent; margin-bottom: -2px;
  transition: color 0.18s, border-color 0.18s;
}
.agenda-tab:hover { color: var(--navy); }
.agenda-tab.active { color: var(--navy); border-bottom-color: var(--gold); }

/* ── Day panel ── */
.agenda-days { max-width: 900px; margin: 0 auto; padding: 0 32px 64px; }
.agenda-day { display: none; }
.agenda-day.active { display: block; }
.agenda-day-label {
  font-family: var(--heading-font);
  font-size: 22px; font-weight: 700; color: var(--navy);
  margin-bottom: 28px; padding-bottom: 12px;
  border-bottom: 2px solid var(--light-blue);
}

/* ── Session list ── */
.agenda-session-list { display: flex; flex-direction: column; gap: 12px; }

/* ── Session card ── */
.agenda-card {
  display: flex; gap: 0;
  background: #fff;
  border-radius: 10px;
  box-shadow: 0 2px 8px rgba(10,35,66,0.07);
  overflow: hidden;
  transition: box-shadow 0.2s, transform 0.2s;
}
.agenda-card:hover {
  box-shadow: 0 6px 24px rgba(10,35,66,0.12);
  transform: translateY(-1px);
}

/* Time column */
.agenda-card-time {
  flex-shrink: 0; width: 140px;
  padding: 20px 20px;
  background: var(--navy);
  color: rgba(255,255,255,0.9);
  font-size: 13px; font-weight: 600;
  display: flex; flex-direction: column;
  align-items: flex-start; justify-content: center;
  line-height: 1.5;
  letter-spacing: 0.01em;
}
.agenda-time-sep { display: block; color: rgba(255,255,255,0.4); font-size: 11px; margin: 2px 0; }

/* Body column */
.agenda-card-body {
  flex: 1; padding: 20px 24px;
  display: flex; flex-direction: column; gap: 8px;
}
.agenda-session-name {
  font-family: var(--heading-font);
  font-size: 17px; font-weight: 700;
  color: var(--navy); line-height: 1.3; margin: 0;
}

/* Meta row (track + location) */
.agenda-card-meta {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
}
.agenda-track-pill {
  display: inline-block;
  padding: 3px 10px; border-radius: 20px;
  font-size: 11px; font-weight: 700; letter-spacing: 0.06em;
  color: #fff; text-transform: uppercase;
}
.agenda-location {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 12px; color: var(--muted); font-weight: 500;
}

/* Speakers row */
.agenda-speakers {
  display: flex; align-items: center; gap: 6px;
  font-size: 13px; color: #374151; font-weight: 500;
}
.agenda-speakers svg { flex-shrink: 0; color: var(--muted); }

/* Session description (raw HTML from Swoogo WYSIWYG; only shown when non-empty) */
.agenda-session-description {
  margin-top: 4px;
  font-size: 14px; line-height: 1.55; color: #4b5563;
}
.agenda-session-description p { margin: 0 0 8px 0; }
.agenda-session-description p:last-child { margin-bottom: 0; }
.agenda-session-description a { color: var(--blue); text-decoration: underline; }
.agenda-session-description a:hover { opacity: 0.85; }
.agenda-session-description ul,
.agenda-session-description ol { margin: 0 0 8px 20px; padding: 0; }
.agenda-session-description img { max-width: 100%; height: auto; border-radius: 6px; margin: 4px 0; }
.agenda-session-description strong { color: #1f2937; }

/* ── Responsive ── */
@media (max-width: 700px) {
  .agenda-filters, .agenda-tabs, .agenda-days { padding: 0 16px; }
  .agenda-tabs { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .agenda-tab { padding: 12px 16px; white-space: nowrap; }
  .agenda-card { flex-direction: column; }
  .agenda-card-time {
    width: 100%; flex-direction: row; gap: 6px;
    padding: 10px 16px; align-items: center;
  }
  .agenda-time-sep { display: inline; margin: 0 4px; }
  .agenda-card-body { padding: 16px; }
}

/* ─────────────────────────────────────────────────────────────────────────────
   FAQ SECTION
   ───────────────────────────────────────────────────────────────────────────── */
.faq-section { background: var(--ice); padding: 80px 48px; }
.faq-inner { max-width: 760px; margin: 0 auto; }
.faq-inner h2 {
  font-family: var(--heading-font);
  font-size: clamp(1.6rem, 3vw, 2.2rem);
  color: var(--navy);
  margin-top: 16px;
  margin-bottom: 40px;
}

.faq-list { display: flex; flex-direction: column; gap: 0; }

.faq-item {
  border-top: 1px solid #d1dce8;
}
.faq-item:last-child { border-bottom: 1px solid #d1dce8; }

.faq-question {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 20px 0;
  font-size: 17px;
  font-weight: 600;
  color: var(--navy);
  cursor: pointer;
  list-style: none;
  user-select: none;
}
/* Remove default marker in all browsers */
.faq-question::-webkit-details-marker { display: none; }
.faq-question::marker { display: none; }

.faq-chevron {
  flex-shrink: 0;
  color: var(--blue);
  transition: transform 0.25s ease;
}
.faq-item[open] .faq-chevron { transform: rotate(180deg); }

.faq-answer {
  padding: 0 0 20px;
  animation: faqFadeIn 0.2s ease;
}
.faq-answer p {
  font-size: 16px;
  color: var(--muted);
  line-height: 1.8;
  margin: 0;
}

@keyframes faqFadeIn {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
  .faq-chevron { transition: none; }
  .faq-answer  { animation: none; }
}

@media (max-width: 700px) {
  .faq-section  { padding: 56px 24px; }
  .faq-question { font-size: 15px; }
}

/* ─────────────────────────────────────────────────────────────────────────────
   SPONSORS PAGE
   ───────────────────────────────────────────────────────────────────────────── */
.sponsors-page { min-height: 100vh; background: var(--white); }

/* Page header — left-justified to match the agenda hero. Top padding
   bumped from 80px to 140px so above-text spacing matches every other
   page hero. */
.sponsors-header {
  background: var(--navy);
  padding: 140px 48px 64px;
  text-align: left;
}
.sponsors-header-inner { max-width: 1200px; margin: 0 auto; }
.sponsors-header .section-eyebrow { color: var(--gold); }
.sponsors-header .section-eyebrow::before { background: var(--gold); }
/* Typography for .sponsors-header h1 lives in the unified hero-h1
   rule above. Top margin removed; the eyebrow's own margin-bottom
   creates the spacing between eyebrow and headline. */
.sponsors-header p {
  color: rgba(255,255,255,0.65);
  font-size: 17px;
  max-width: 560px;
  margin: 16px 0 0;
  line-height: 1.7;
}

/* Tier sections */
.sponsors-body { max-width: 1200px; margin: 0 auto; padding: 64px 48px 80px; }

.sp-tier { margin-bottom: 64px; }
.sp-tier:last-of-type { margin-bottom: 0; }

.sp-tier-header {
  display: flex; align-items: center; gap: 16px;
  margin-bottom: 32px;
}
.sp-tier-label {
  font-family: var(--heading-font);
  font-size: clamp(1.3rem, 2.5vw, 1.75rem);
  color: var(--navy);
  font-weight: 700;
}
.sp-tier-line {
  flex: 1; height: 1px; background: var(--light-blue);
}
.sp-tier-count {
  font-size: 0.78rem; color: var(--muted);
  background: var(--light-blue); padding: 3px 10px; border-radius: 10px;
  font-weight: 600; white-space: nowrap;
}

/* Logo grids — three size tiers */
.sp-grid {
  display: grid;
  gap: 20px;
}
.sp-grid-large  { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
.sp-grid-medium { grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); }
.sp-grid-small  { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }

/* Individual sponsor card */
.sp-card {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  background: var(--white);
  border: 1.5px solid var(--border, #e2e8f0);
  border-radius: 10px;
  padding: 16px;
  text-decoration: none;
  color: var(--text);
  transition: box-shadow 0.2s, border-color 0.2s, transform 0.2s;
}
.sp-card:hover {
  box-shadow: 0 6px 24px rgba(0,0,0,0.1);
  border-color: var(--blue);
  transform: translateY(-2px);
}
.sp-card-inner { display: flex; flex-direction: column; align-items: center; width: 100%; }

/* 1.5:1 logo box (width:height = 3:2) */
.sp-logo-box {
  width: 100%;
  aspect-ratio: 3 / 2;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: #f8fafc;
  border-radius: 6px;
  padding: 12px;
}
.sp-logo-box img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  display: block;
}

/* Company name below logo box — always shown */
.sp-sponsor-name {
  font-size: 0.78rem;
  font-weight: 500;
  text-align: center;
  color: var(--text);
  margin-top: 10px;
  line-height: 1.3;
  word-break: break-word;
}

/* "Become a Sponsor" CTA at page bottom */
.sponsors-cta {
  background: var(--ice);
  border-top: 1px solid var(--light-blue);
  padding: 64px 48px;
  text-align: center;
}
.sponsors-cta h2 {
  font-family: var(--heading-font);
  font-size: clamp(1.5rem, 3vw, 2.2rem);
  color: var(--navy);
  margin-bottom: 12px;
}
.sponsors-cta p {
  color: var(--muted);
  font-size: 16px;
  max-width: 520px;
  margin: 0 auto 28px;
  line-height: 1.7;
}
.sponsors-cta-actions { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; }

/* Empty state */
.sponsors-empty {
  text-align: center;
  padding: 80px 48px;
  color: var(--muted);
}
.sponsors-empty p { font-size: 16px; margin-top: 8px; }

/* Responsive */
@media (max-width: 900px) {
  .sponsors-header { padding: 120px 24px 48px; }  /* mobile top padding aligned to agenda's 120px */
  .sponsors-body   { padding: 48px 24px 64px; }
  .sponsors-cta    { padding: 48px 24px; }
}
@media (max-width: 600px) {
  .sp-grid-large, .sp-grid-medium { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
  .sp-grid-small  { grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); }
}

/* ─── ACTIVITIES PAGE ────────────────────────────────────────────────────── */
.activities-header {
  background: var(--navy);
  /* Top padding bumped from 80px to 140px so above-text spacing matches
     every other page hero. Left-justified to match the agenda hero. */
  padding: 140px 48px 64px;
  text-align: left;
}
.activities-header-inner { max-width: 1200px; margin: 0 auto; }
.activities-header .section-eyebrow { color: var(--gold); }
.activities-header .section-eyebrow::before { background: var(--gold); }

/* ── EXHIBITORS PAGE ────────────────────────────────────────────────────────
   Free-form recruitment surface: hero strip on top of the standard nav-aware
   page padding, then a body region with an admin-managed sequence of
   WYSIWYG blocks and a smart-distributed button grid below them.

   NOTE: do NOT add a `.exhibitors-page section { padding: 0 }` reset here —
   it would clobber the body section's vertical padding via element-selector
   specificity. Explicit per-element padding below is the right way.
*/
.exhibitors-hero {
  background: var(--navy);
  color: #fff;
  padding: 140px 48px 80px;
  /* Left-justified to match the agenda hero. Was text-align: center
     during the initial build; the wider site treatment leans
     left-aligned across sub-page heroes for consistency. */
  text-align: left;
}
.exhibitors-hero-inner { max-width: 1200px; margin: 0 auto; }
/* Typography for .exhibitors-hero h1 lives in the unified hero-h1
   rule above. Page-specific top margin removed; the shared rule
   uses margin-bottom: 16px and inherits zero top margin. */
.exhibitors-hero-subhead {
  font-family: var(--heading-font);
  font-size: clamp(22px, 3vw, 32px);
  font-weight: 600;
  color: rgba(255,255,255,0.88);
  margin: 0;
}

/* Body section gets deliberately more vertical padding than other site
   sections (120px vs. the global 96px default) so the page reads as a
   focused recruitment surface with clear breathing room above the
   headline and below the button stack. */
.exhibitors-body { padding: 120px 48px; background: var(--bg, #f4f6f9); }
.exhibitors-body-inner { max-width: 920px; margin: 0 auto; }
.exhibitors-body-headline {
  font-family: var(--heading-font);
  font-size: clamp(28px, 4vw, 38px);
  color: var(--navy);
  font-weight: 700;
  text-align: center;
  margin: 0 0 32px;
}
.exhibitors-body-block {
  font-size: 16px;
  line-height: 1.7;
  color: #1a1a2e;
  margin-bottom: 24px;
}
.exhibitors-body-block:last-child { margin-bottom: 32px; }
.exhibitors-body-block p { margin-bottom: 12px; }
.exhibitors-body-block p:last-child { margin-bottom: 0; }
.exhibitors-body-block ul,
.exhibitors-body-block ol { margin: 0 0 16px 24px; }
.exhibitors-body-block li { margin-bottom: 6px; }
.exhibitors-body-block a { color: var(--blue); text-decoration: underline; }
.exhibitors-body-block strong { color: var(--navy); }

/* Smart-distributed button grid.
   Each row is an independent flex container with `flex: 1 1 0` children, so
   N children share the row's width equally — N comes from data-cols set
   server-side by the distribution algorithm. */
.exhibitors-button-stack {
  display: flex; flex-direction: column;
  gap: 16px; margin-top: 28px;
}
.exhibitors-button-row { display: flex; gap: 16px; flex-wrap: nowrap; }
.exhibitors-button-row .btn-primary {
  flex: 1 1 0; min-width: 0; text-align: center;
  padding: 16px 18px; box-sizing: border-box;
}
/* On narrow viewports the multi-column rows would crowd; stack to 1-per-row. */
@media (max-width: 640px) {
  .exhibitors-button-row { flex-wrap: wrap; }
  .exhibitors-button-row .btn-primary { flex: 1 1 100%; }
}
/* Typography for .activities-header h1 lives in the unified hero-h1
   rule above. Top margin removed; the eyebrow's own margin-bottom
   creates the spacing between eyebrow and headline. */
.activities-header p {
  color: rgba(255,255,255,0.65);
  font-size: 17px;
  max-width: 640px;
  /* Was `16px auto 0` (centered via auto horizontal); switched to
     left-aligned to match the agenda hero. */
  margin: 16px 0 0;
  line-height: 1.7;
}

.activities-body {
  max-width: 1200px;
  margin: 0 auto;
  padding: 64px 48px 40px;
}

.act-group { margin-bottom: 64px; }
.act-group:last-of-type { margin-bottom: 0; }

.act-group-header {
  display: flex; align-items: center; gap: 16px;
  margin-bottom: 28px;
}
.act-group-label {
  font-family: var(--heading-font);
  font-size: clamp(1.4rem, 2.4vw, 1.85rem);
  color: var(--navy);
  margin: 0;
  flex-shrink: 0;
}
.act-group-line {
  flex: 1;
  height: 1px;
  background: var(--border, #e5e7eb);
}
.act-group-count {
  font-size: 0.85rem;
  color: var(--muted);
  letter-spacing: 0.02em;
}

.act-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 18px;
}

.act-card {
  background: #fff;
  border: 1px solid var(--border, #e5e7eb);
  border-radius: 10px;
  padding: 20px 22px;
  display: flex;
  flex-direction: column;
  transition: border-color 0.15s, box-shadow 0.15s, transform 0.15s;
}
.act-card:hover {
  border-color: var(--gold, #c9a84c);
  box-shadow: 0 6px 20px rgba(0,0,0,0.04);
  transform: translateY(-2px);
}

.act-card-top {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 14px;
  margin-bottom: 6px;
}
.act-name {
  font-family: var(--heading-font);
  font-size: 1.2rem;
  color: var(--navy);
  margin: 0;
  line-height: 1.25;
}
.act-cost {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--gold, #c9a84c);
  white-space: nowrap;
  flex-shrink: 0;
}
.act-category {
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted);
  margin-bottom: 12px;
}
.act-description {
  font-size: 0.95rem;
  line-height: 1.6;
  color: var(--text, #1a1a1a);
  margin: 0 0 14px;
  flex: 1;
}
.act-description a { color: var(--blue); text-decoration: none; }
.act-description a:hover { text-decoration: underline; }
.act-notes {
  font-size: 0.85rem;
  color: var(--muted);
  border-top: 1px solid #f1f1f1;
  padding-top: 10px;
  line-height: 1.5;
  word-break: break-word;
}
.act-notes a { color: var(--blue); text-decoration: none; }
.act-notes a:hover { text-decoration: underline; }

.activities-footer-note {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 48px 64px;
  font-size: 0.85rem;
  color: var(--muted);
  text-align: center;
  line-height: 1.6;
}

.activities-empty {
  text-align: center;
  padding: 80px 48px;
  color: var(--muted);
}
.activities-empty p { font-size: 16px; margin-top: 8px; }

@media (max-width: 900px) {
  .activities-header { padding: 120px 24px 48px; }  /* mobile top padding aligned to agenda's 120px */
  .activities-body   { padding: 48px 24px 32px; }
  .activities-footer-note { padding: 0 24px 48px; }
}
@media (max-width: 600px) {
  .act-grid { grid-template-columns: 1fr; }
  .act-card-top { flex-direction: column; gap: 4px; }
  .act-cost { align-self: flex-start; }
}