/* ============================================================
   AI HUNTSVILLE — DESIGN SYSTEM
   Tokens → primitives → components → page blocks → responsive
   Reference width 1440px · tablet 768–1024 · mobile 375–430
   ============================================================ */

/* ---------- 1. TOKENS ---------- */
:root {
  /* color */
  --primary-blue: #487ae6;
  --dark-blue: #3861d9;
  --white: #ffffff;
  --bg:         #EEF2F5;
  --surface:    var(--white);
  --fg:         #111417;
  --muted:      #48515A;
  --border:     #D7DEE6;
  --border-soft:#E6ECF2;
  /* --accent carries text and text-bearing fills, so it must clear WCAG AA.
     #487AE6 measures 4.07:1 on white and 3.61:1 on --bg (fails 4.5:1), and
     white-on-#487AE6 fails too. #3861D9 clears both (5.41:1 / 4.80:1).
     --primary-blue stays available for decorative tints. */
  --accent:     var(--dark-blue);
  --accent-ink: var(--navy-deep);
  --navy:       var(--dark-blue);
  --navy-deep:  #2448B8;
  --pale-blue:  #D9E7F5;
  --pale-tint:  #F4F7FA;

  --ok:      #1B7F53;
  --ok-bg:   #E4F3EB;
  --warn:    #8A6212;
  --warn-bg: #FBF1DC;
  --err:     #B3261E;
  --err-bg:  #FBE9E7;

  /* type */
  --font-display: 'Inter Tight', 'Space Grotesk', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  --font-body:    'Inter', 'Source Sans 3', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  --font-mono:    'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  /* space — sized for a 1440px institutional reference. The container was
     1280px and the section rhythm 64–112px, which read as compacted at the
     reference width; both now carry the intended editorial air. */
  --gutter: 32px;
  --maxw: 1400px;
  --sec: clamp(58px, 5.5vw, 88px);

  /* radius */
  --r-lg: 24px;
  --r-md: 14px;
  --r-sm: 8px;

  /* motion */
  --ease: cubic-bezier(.2,.6,.2,1);
  --t: 190ms var(--ease);
}

/* ---------- 2. RESET / BASE ---------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-body);
  font-size: 18px;
  line-height: 1.66;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}
img, svg, video { display: block; max-width: 100%; }
/* Component display rules (.state-panel, .slider, …) out-specify the UA
   [hidden] rule, which left every "no results" / "error" panel permanently
   visible. This restores hidden as authoritative. */
[hidden] { display: none !important; }
button, input, select, textarea { font: inherit; color: inherit; }
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 3px; }

:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 2px;
  border-radius: 3px;
}
.dark-panel :focus-visible, .site-footer :focus-visible, .mobile-nav :focus-visible {
  outline-color: #9EC2FF;
}

.skip-link {
  position: absolute; left: 16px; top: -60px; z-index: 200;
  background: var(--accent); color: #fff; padding: 12px 20px;
  border-radius: var(--r-sm); font-weight: 600; transition: top var(--t);
}
.skip-link:focus { top: 16px; text-decoration: none; }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ---------- 3. LAYOUT PRIMITIVES ---------- */
.wrap { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gutter); }
.section { padding-block: var(--sec); }
.section--tight { padding-block: clamp(38px, 4vw, 62px); }
.stack > * + * { margin-top: 22px; }

/* ---------- 4. TYPOGRAPHY ---------- */
.eyebrow {
  font-family: var(--font-mono);
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--accent);
}
.eyebrow--light { color: #9EC2FF; }
.eyebrow--muted { color: var(--muted); }

h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 650; letter-spacing: -.025em; line-height: 1.08; text-wrap: balance; }

.h-hero  { font-size: clamp(40px, 5.4vw, 88px); line-height: 1.04; }
.h-page  { font-size: clamp(38px, 4.4vw, 68px); line-height: 1.06; }
.h-sec   { font-size: clamp(32px, 3.3vw, 50px); line-height: 1.1; }
.h-card  { font-size: clamp(20px, 1.62vw, 25px); line-height: 1.22; }
.h-sub   { font-size: clamp(17px, 1.25vw, 20px); line-height: 1.32; }

.lead { font-size: clamp(18px, 1.45vw, 22px); color: var(--muted); max-width: 62ch; text-wrap: pretty; }
.body { color: var(--muted); max-width: 66ch; text-wrap: pretty; }
.body--ink { color: var(--fg); }
.meta { font-family: var(--font-mono); font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }

.sec-num {
  font-family: var(--font-display);
  font-size: clamp(34px, 3.4vw, 52px);
  font-weight: 600;
  letter-spacing: -.03em;
  color: var(--accent);
  opacity: .38;
  line-height: 1;
}

/* dynamic-content placeholder token */
.ph-token {
  font-family: var(--font-mono);
  font-size: .82em;
  letter-spacing: .04em;
  color: var(--accent-ink);
  background: var(--pale-blue);
  border: 1px dashed rgba(7,87,217,.42);
  border-radius: 5px;
  padding: 1px 6px;
  white-space: nowrap;
}
.dark-panel .ph-token, .site-footer .ph-token {
  color: #C9DDFF; background: rgba(158,194,255,.14); border-color: rgba(158,194,255,.42);
}

/* ---------- 5. BUTTONS + LINKS ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  min-height: 48px; padding: 12px 22px;
  border-radius: var(--r-sm); border: 1px solid transparent;
  font-family: var(--font-body); font-size: 15.5px; font-weight: 600; letter-spacing: -.005em;
  cursor: pointer; text-decoration: none; transition: background var(--t), color var(--t), border-color var(--t), transform var(--t);
}
.btn:hover { text-decoration: none; }
.btn-primary { background: var(--accent); color: #fff; }
.btn-primary:hover { background: var(--accent-ink); }
.btn-secondary { background: var(--surface); color: var(--fg); border-color: var(--border); }
.btn-secondary:hover { border-color: var(--accent); color: var(--accent); }
.btn-outline { background: transparent; color: var(--accent); border-color: rgba(7,87,217,.45); }
.btn-outline:hover { background: var(--pale-blue); }
.btn-onnavy { background: rgba(255,255,255,.1); color: #fff; border-color: rgba(255,255,255,.28); backdrop-filter: blur(6px); }
.btn-onnavy:hover { background: rgba(255,255,255,.19); }
.btn-block { width: 100%; }
.btn[aria-disabled="true"] { opacity: .5; pointer-events: none; }

.ext { flex: none; width: 13px; height: 13px; opacity: .85; }

.arrow-link {
  display: inline-flex; align-items: center; gap: 10px;
  min-height: 44px;
  font-weight: 600; font-size: 15px; color: var(--accent);
}
.arrow-link svg { transition: transform var(--t); }
.arrow-link:hover svg { transform: translateX(5px); }
.arrow-link--light { color: #fff; }

.arrow-btn {
  width: 40px; height: 40px; flex: none;
  display: grid; place-items: center;
  border-radius: 999px; border: 1px solid var(--border); background: var(--surface);
  color: var(--accent); transition: background var(--t), border-color var(--t), transform var(--t);
}
.arrow-btn svg { transition: transform var(--t); }
a:hover > .arrow-btn, .card:hover .arrow-btn { background: var(--accent); border-color: var(--accent); color: #fff; }

/* ---------- 6. MEDIA PLACEHOLDERS (documentary photo slots) ---------- */
.ph-media {
  position: relative; overflow: hidden;
  border-radius: var(--r-md);
  background:
    radial-gradient(circle at 1.5px 1.5px, rgba(255,255,255,.22) 1.4px, transparent 1.5px) 0 0/16px 16px,
    linear-gradient(148deg, #3861D9 0%, #2F56CA 52%, #2448B8 100%);
  color: #fff;
  display: grid; align-content: end;
  padding: 18px;
  min-height: 210px;
  isolation: isolate;
}
.media-image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.ph-media.has-image > .media-image {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.ph-media::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, rgba(9,40,74,0) 40%, rgba(6,25,47,.72) 100%);
}
.ph-media.has-image::after { z-index: 1; pointer-events: none; }
.ph-media__label {
  font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .1em;
  text-transform: uppercase; color: rgba(255,255,255,.8); line-height: 1.5;
  border-left: 2px solid rgba(158,194,255,.7); padding-left: 9px;
}
.ph-media--pale {
  background:
    radial-gradient(circle at 1.5px 1.5px, rgba(7,87,217,.16) 1.4px, transparent 1.5px) 0 0/16px 16px,
    linear-gradient(148deg, #E3ECF6 0%, #D9E7F5 100%);
}
.ph-media--pale::after { background: none; }
.ph-media--pale .ph-media__label { color: var(--muted); border-left-color: var(--accent); }
.ph-media--lg { border-radius: var(--r-lg); min-height: 520px; }
.ph-media--ratio { aspect-ratio: 4 / 3; min-height: 0; }
.ph-media--wide { aspect-ratio: 16 / 9; min-height: 0; }

/* ---------- 7. HEADER ---------- */
.site-header {
  position: sticky; top: 0; z-index: 90;
  background: var(--bg);
  transition: background var(--t), box-shadow var(--t), border-color var(--t);
  border-bottom: 1px solid transparent;
}
.site-header.is-stuck {
  background: rgba(238,242,245,.94);
  backdrop-filter: saturate(160%) blur(12px);
  border-bottom-color: var(--accent);
  box-shadow: 0 1px 14px rgba(9,40,74,.07);
}
.header-inner {
  display: flex; align-items: center; gap: 18px;
  min-height: 92px;
}
.brand { display: flex; align-items: center; text-decoration: none; flex: none; }
.brand:hover { text-decoration: none; }
/* Official logo lockup. height drives the size; width stays auto so the
   asset's own ratio governs and the intrinsic width attribute reserves
   space before load. */
.brand__logo { display: block; height: 54px; width: auto; flex: none; }
/* One asset serves both surfaces: brightness(0) flattens the ink to black,
   invert(1) lifts it to white, and alpha is untouched — so the mark reads
   white on the navy footer and mobile nav without a second file. */
.brand__logo--light { filter: brightness(0) invert(1); }

.endorse {
  font-size: 11.5px; line-height: 1.3; color: var(--muted);
  padding-left: 14px; border-left: 1px solid var(--border); flex: none;
}
.endorse a { color: var(--muted); font-weight: 500; display: inline-flex; align-items: center; gap: 4px; }
.endorse a:hover { color: var(--accent); }

.primary-nav { margin-left: auto; display: flex; align-items: center; gap: 4px; }
.nav-item { position: relative; }
.nav-link {
  display: inline-flex; align-items: center; gap: 6px;
  min-height: 44px; padding: 0 14px; border-radius: var(--r-sm);
  font-size: 15px; font-weight: 500; color: var(--fg);
  background: none; border: 0; cursor: pointer;
  transition: color var(--t), background var(--t);
}
.nav-link:hover { color: var(--accent); text-decoration: none; background: rgba(7,87,217,.06); }
.nav-link[aria-current="page"] { color: var(--accent); font-weight: 600; }
.nav-link[aria-current="page"]::after {
  content: ""; position: absolute; left: 14px; right: 14px; bottom: 14px; height: 2px; background: var(--accent); border-radius: 2px;
}
.nav-link .chev { transition: transform var(--t); }
.nav-link[aria-expanded="true"] .chev { transform: rotate(180deg); }

.dropdown {
  position: absolute; top: calc(100% + 6px); left: 0; min-width: 268px;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-md);
  box-shadow: 0 18px 42px rgba(9,40,74,.14);
  padding: 8px; display: none; z-index: 95;
}
/* Hover bridge. The panel sits 6px below the trigger; without this the pointer
   crosses unhovered pixels on its way down, mouseleave fires on .nav-item and
   the menu closes before an item can be reached. The bridge extends the
   hoverable area back up over that gap (and 4px past it for diagonal travel). */
.dropdown::before {
  content: ""; position: absolute; left: 0; right: 0; top: -10px; height: 10px;
}
.nav-item.is-open .dropdown { display: block; }
.dropdown a {
  display: block; padding: 11px 14px; min-height: 44px;
  border-radius: var(--r-sm); font-size: 14.5px; font-weight: 500; color: var(--fg);
}
.dropdown a:hover { background: var(--pale-tint); color: var(--accent); text-decoration: none; }
.dropdown hr { border: 0; border-top: 1px solid var(--border-soft); margin: 6px 10px; }

.utility { display: flex; align-items: center; gap: 10px; flex: none; }
.icon-btn {
  width: 44px; height: 44px; display: grid; place-items: center;
  border-radius: var(--r-sm); border: 1px solid transparent; background: none;
  color: var(--fg); cursor: pointer; transition: background var(--t), color var(--t);
}
.icon-btn:hover { background: rgba(7,87,217,.08); color: var(--accent); }
.menu-btn { display: none; }

.search-panel {
  display: none; border-top: 1px solid var(--border); background: var(--surface);
}
.search-panel.is-open { display: block; }
.search-panel form { display: flex; gap: 12px; padding-block: 18px; align-items: center; }
.search-panel input { flex: 1; }
.search-note { font-size: 12.5px; color: var(--muted); padding-bottom: 18px; }

/* mobile nav */
.mobile-nav {
  position: fixed; inset: 0; z-index: 120; background: var(--navy); color: #fff;
  display: none; flex-direction: column; overflow-y: auto;
}
.mobile-nav.is-open { display: flex; }
.mobile-nav__top { display: flex; align-items: center; justify-content: space-between; min-height: 84px; }
.mobile-nav .brand__logo { height: 44px; }
.mobile-nav .icon-btn { color: #fff; }
.mobile-nav .icon-btn:hover { background: rgba(255,255,255,.12); color: #fff; }
.mnav-list { list-style: none; border-top: 1px solid rgba(255,255,255,.14); }
.mnav-list > li { border-bottom: 1px solid rgba(255,255,255,.14); }
.mnav-link {
  display: flex; align-items: center; justify-content: space-between; width: 100%;
  min-height: 60px; padding: 14px 0; background: none; border: 0; cursor: pointer;
  font-family: var(--font-display); font-size: 22px; font-weight: 600; color: #fff; letter-spacing: -.02em;
}
.mnav-link:hover { text-decoration: none; color: #fff; }
.mnav-sub { list-style: none; display: none; padding-bottom: 12px; }
.mnav-link[aria-expanded="true"] + .mnav-sub { display: block; }
.mnav-link[aria-expanded="true"] .chev { transform: rotate(180deg); }
.mnav-sub a { display: block; min-height: 48px; padding: 12px 0 12px 16px; color: rgba(255,255,255,.82); font-size: 16px; border-left: 2px solid rgba(158,194,255,.4); margin-bottom: 2px; }
.mnav-sub a:hover { color: #fff; }
.mobile-nav__foot { margin-top: auto; padding-block: 28px; display: grid; gap: 12px; }
.mobile-nav__foot .endorse { display: block; border-left: 0; padding-left: 0; color: rgba(255,255,255,.66); line-height: 1.6; }
.mobile-nav__foot .endorse a { color: rgba(255,255,255,.86); }

/* ---------- 8. CARDS ---------- */
.card {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-md);
  padding: 28px; display: flex; flex-direction: column; gap: 14px;
  transition: transform var(--t), border-color var(--t), box-shadow var(--t);
}
a.card, .card--link { text-decoration: none; color: inherit; }
a.card:hover, .card--link:hover { text-decoration: none; transform: translateY(-3px); border-color: rgba(7,87,217,.4); box-shadow: 0 12px 28px rgba(9,40,74,.08); }
.card__foot { margin-top: auto; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-top: 6px; }

.tag {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase;
  padding: 5px 9px; border-radius: 5px; background: var(--pale-blue); color: var(--accent-ink);
}
.tag--neutral { background: var(--pale-tint); color: var(--muted); border: 1px solid var(--border); }
.status { display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; font-weight: 500; }
.status::before { content: ""; width: 7px; height: 7px; border-radius: 999px; background: currentColor; }
.status--open { color: var(--ok); }
.status--soon { color: var(--warn); }
.status--closed { color: var(--muted); }

/* ---------- 9. HERO ---------- */
.hero { padding-top: 20px; }
.hero__frame {
  position: relative; z-index: 0;
  border-radius: var(--r-lg); overflow: hidden;
  /* The brief calls for the hero to occupy most of the first viewport; the
     previous 62vh/660px cap left it sitting as a banner instead. */
  min-height: clamp(560px, 78vh, 800px);
  display: grid; align-content: end;
  padding: clamp(32px, 4vw, 64px);
  background:
    radial-gradient(circle at 1.7px 1.7px, rgba(255,255,255,.16) 1.4px, transparent 1.5px) 0 0/18px 18px,
    linear-gradient(160deg, #16406C 0%, #0B2E54 46%, #071E39 100%);
  color: #fff;
}
.hero__frame::before {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(6,25,47,.15) 0%, rgba(6,25,47,.30) 45%, rgba(6,25,47,.86) 100%);
  z-index: 1; pointer-events: none;
}
.hero__frame > .media-image { position: absolute; inset: 0; z-index: 0; }
.hero__inner { position: relative; z-index: 2; max-width: 860px; }
.hero__inner .h-hero { color: #fff; margin-top: 16px; }
.hero__copy { color: rgba(255,255,255,.84); font-size: clamp(16px, 1.2vw, 18.5px); max-width: 58ch; margin-top: 20px; text-wrap: pretty; }
.hero__actions { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; margin-top: 30px; }
.hero__endorse {
  position: relative; display: flex; flex-wrap: wrap; gap: 14px 34px; align-items: center;
  margin-top: 38px; padding-top: 22px; border-top: 1px solid rgba(255,255,255,.18);
}
.endorse-item { display: flex; align-items: center; gap: 11px; font-size: 12.5px; line-height: 1.35; color: rgba(255,255,255,.8); }
.endorse-item svg { flex: none; opacity: .8; }
.hero__media-note { position: absolute; top: 20px; right: 20px; }

.play-link { display: inline-flex; align-items: center; gap: 11px; color: #fff; font-size: 15px; font-weight: 500; min-height: 48px; }
.play-link:hover { text-decoration: none; }
.play-link .play-ring {
  width: 40px; height: 40px; border-radius: 999px; display: grid; place-items: center;
  border: 1px solid rgba(255,255,255,.5); transition: background var(--t);
}
.play-link:hover .play-ring { background: rgba(255,255,255,.18); }

/* page hero (interior) */
.page-hero { padding-top: 20px; }
.page-hero__grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(28px, 3.4vw, 56px); align-items: center; }
.page-hero .ph-media { min-height: 460px; }
.breadcrumb { display: flex; flex-wrap: wrap; gap: 8px; font-family: var(--font-mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); margin-bottom: 26px; }
.breadcrumb a { color: var(--muted); }
.breadcrumb a:hover { color: var(--accent); }

/* ---------- 10. RAILS ---------- */
.rail-head { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 18px; margin-bottom: 34px; }
/* ---------- 10a. SLIDER (paged, no visible scrollbar) ----------
   Replaces the old free-scrolling rails. Cards are sized so exactly
   --per fit the viewport, so a page never ends on a sliced card. The
   viewport still scrolls natively (touch swipe works) but the bar is
   hidden and paging is driven by the arrow / dot controls. */
.slider { --per: 3; --gap: 24px; position: relative; }
.slider__viewport {
  overflow-x: auto; overflow-y: hidden;
  scrollbar-width: none; -ms-overflow-style: none;
  overscroll-behavior-x: contain;
  /* The arrows page in whole cards, but a trackpad/touch swipe is free
     scrolling and would strand a card sliced down the middle — the exact
     problem the paged controls were added to solve. Snapping applies the
     same rule to the gesture. */
  scroll-snap-type: x mandatory;
  container-type: inline-size;
  /* room for the card hover lift + shadow, which would otherwise clip */
  padding: 6px 0 14px;
}
.slider__viewport::-webkit-scrollbar { display: none; }
.slider__track {
  display: flex; gap: var(--gap); align-items: stretch;
  width: max-content; min-width: 100%;
}
/* The track is max-content wide, so a % basis would resolve against the
   track rather than the visible frame. Container query units measure the
   viewport, which is what "exactly --per cards fit" has to mean. */
.slider__track > * {
  flex: 0 0 calc((100cqi - (var(--per) - 1) * var(--gap)) / var(--per));
  width: calc((100cqi - (var(--per) - 1) * var(--gap)) / var(--per));
  /* the snap targets `scroll-snap-type` on the viewport needs — without this
     the mandatory snap has nothing to snap to and does nothing at all */
  scroll-snap-align: start;
}
.slider.is-static .slider__track { width: 100%; }
.slider.is-static .slider__controls { display: none; }

.slider__nav { display: inline-flex; gap: 8px; }
.slider__btn {
  width: 46px; height: 46px; border-radius: 999px; cursor: pointer;
  background: var(--surface); border: 1px solid var(--border); color: var(--accent);
  display: grid; place-items: center;
  transition: background var(--t), border-color var(--t), color var(--t), opacity var(--t);
}
.slider__btn:hover:not([disabled]) { background: var(--accent); border-color: var(--accent); color: #fff; }
.slider__btn[disabled] { opacity: .32; cursor: default; }
.blue-panel .slider__btn, .dark-panel .slider__btn {
  background: rgba(255,255,255,.1); border-color: rgba(255,255,255,.34); color: #fff;
}
.blue-panel .slider__btn:hover:not([disabled]), .dark-panel .slider__btn:hover:not([disabled]) {
  background: #fff; border-color: #fff; color: var(--dark-blue);
}
.slider__controls { display: flex; align-items: center; justify-content: space-between; gap: 18px; margin-top: 20px; }
.slider__dots { display: flex; gap: 9px; }
.slider__dot {
  width: 30px; height: 4px; border-radius: 99px; border: 0; padding: 0; cursor: pointer;
  background: var(--border); transition: background var(--t), width var(--t);
}
.slider__dot.is-active { background: var(--accent); width: 46px; }
.blue-panel .slider__dot, .dark-panel .slider__dot { background: rgba(255,255,255,.28); }
.blue-panel .slider__dot.is-active, .dark-panel .slider__dot.is-active { background: #fff; }
.slider__btn:focus-visible, .slider__dot:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.blue-panel .slider__btn:focus-visible, .blue-panel .slider__dot:focus-visible { outline-color: #fff; }

/* Cards-per-page by width. Declared after the per-slider defaults below
   so the narrower tiers win on equal specificity. */
.updates-slider   { --per: 4; --gap: 24px; }
.committee-slider { --per: 3; --gap: 22px; }
@media (max-width: 1180px) { .slider { --per: 2; } }
@media (max-width: 760px)  { .slider { --per: 1; } }

/* Was a 1fr/96px split — a postage-stamp thumbnail wedged beside the copy,
   the single most compacted element on the page. Now a full-bleed image
   above the copy, matching the reference rail. */
.update-card { display: flex; flex-direction: column; gap: 0; padding: 0; overflow: hidden; }
.update-card .ph-media { order: -1; min-height: 184px; border-radius: 0; padding: 14px; }
.update-card__body { display: flex; flex-direction: column; gap: 11px; flex: 1; padding: 24px 24px 0; }
.update-card__body .h-card { font-size: 20px; line-height: 1.28; }
.update-card .card__foot { padding: 18px 24px 22px; }

.next-event {
  background: var(--navy); color: #fff; border-color: var(--navy);
  display: flex; flex-direction: column; gap: 16px; padding: 28px;
}
.next-event .eyebrow { color: #9EC2FF; }
.date-block {
  background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.16);
  border-radius: var(--r-md); padding: 14px; text-align: center;
}
.date-block .m { font-family: var(--font-mono); font-size: 12px; letter-spacing: .18em; color: #9EC2FF; }
.date-block .d { font-family: var(--font-display); font-size: 44px; font-weight: 650; line-height: 1.05; letter-spacing: -.03em; }
.date-block .y { font-family: var(--font-mono); font-size: 11.5px; letter-spacing: .16em; color: rgba(255,255,255,.6); }

/* ---------- 11. SPLIT FEATURE ---------- */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 3.6vw, 64px); align-items: center; }
.split--flip .split__media { order: 2; }
.split .ph-media { min-height: 520px; }
.split__body { display: flex; flex-direction: column; gap: 24px; }
.fact-list { display: grid; gap: 16px; }
.fact { display: grid; grid-template-columns: 20px 1fr; gap: 13px; align-items: start; font-family: var(--font-mono); font-size: 12.5px; letter-spacing: .06em; text-transform: uppercase; line-height: 1.5; color: var(--fg); }
.fact svg { color: var(--accent); margin-top: 2px; }
.split__actions { display: flex; flex-wrap: wrap; gap: 12px; }

/* ---------- 12. NUMBERED COLUMNS ---------- */
.num-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; }
.num-card {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-md);
  padding: 36px; display: flex; flex-direction: column; gap: 16px;
  transition: border-color var(--t), transform var(--t);
}
.num-card:hover { border-color: rgba(7,87,217,.4); transform: translateY(-3px); }
.num-card__top { display: flex; align-items: center; gap: 14px; }
.num-card--a { background: linear-gradient(180deg, #F2F6FB 0%, var(--surface) 62%); }
.num-card--b { background: linear-gradient(180deg, #EEF3FF 0%, var(--surface) 62%); }
.num-card--b .sec-num { color: var(--dark-blue); }
.num-card--c { background: linear-gradient(180deg, #F0F6F8 0%, var(--surface) 62%); }
.num-card--c .sec-num { color: #16607F; }

/* ---------- 13. BLUE BANDS ---------- */
.dark-panel { background: var(--navy); color: #fff; }
.blue-panel { background: var(--dark-blue); color: #fff; }
.dark-panel .body, .blue-panel .body, .dark-panel .lead, .blue-panel .lead { color: rgba(255,255,255,.84); }
.dark-panel h2, .blue-panel h2 { color: #fff; }
.band { border-radius: var(--r-lg); padding: clamp(48px, 5.2vw, 88px) clamp(28px, 3.4vw, 64px); }
.band-full { padding-block: var(--sec); }

.comm-card {
  background: var(--surface); border-radius: var(--r-md); overflow: hidden;
  display: flex; flex-direction: column; color: var(--fg); text-decoration: none;
  transition: transform var(--t), box-shadow var(--t);
}
.comm-card:hover { transform: translateY(-4px); text-decoration: none; box-shadow: 0 16px 34px rgba(6,25,47,.22); }
.comm-card .ph-media { border-radius: 0; min-height: 180px; }
.comm-card__body { padding: 24px; display: flex; flex-direction: column; gap: 12px; flex: 1; }
.comm-card__icon {
  width: 42px; height: 42px; border-radius: 999px; background: var(--surface);
  border: 1px solid var(--border); display: grid; place-items: center; color: var(--accent);
  margin-top: -39px; margin-bottom: 4px; position: relative; z-index: 2;
}
.comm-card p { font-size: 15.5px; color: var(--muted); line-height: 1.6; }
.comm-card .card__foot { border-top: 1px solid var(--border-soft); margin-top: auto; }

/* ---------- 14. NETWORK DIAGRAM ---------- */
/* The diagram and its six sector descriptions. Previously a three-column
   grid that also absorbed the "Why participate" card, which forced the six
   descriptions to be split arbitrarily across two columns and left the
   diagram's own labels colliding with the hub. Now: copy + one swapping
   detail panel on the left, diagram on the right, participate its own section. */
.network-grid { display: grid; grid-template-columns: 1fr 1.08fr; gap: clamp(32px, 4.5vw, 76px); align-items: center; }
.network-copy { display: grid; gap: 20px; align-content: center; }
.radial-wrap { display: grid; gap: 18px; }
.radial { width: 100%; height: auto; }

/* sector chips — keyboard-reachable equivalent of hovering the diagram */
.sector-tabs { display: flex; flex-wrap: wrap; gap: 8px; }
.sector-tab {
  font: 500 13.5px/1 var(--font-body); letter-spacing: .01em;
  padding: 9px 15px; border-radius: 999px; cursor: pointer;
  background: var(--surface); color: var(--muted);
  border: 1px solid var(--border); transition: color var(--t), border-color var(--t), background var(--t);
}
.sector-tab:hover { color: var(--accent-ink); border-color: rgba(7,87,217,.4); }
.sector-tab[aria-selected="true"] { background: var(--accent); border-color: var(--accent); color: #fff; }

.sector-detail {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-md);
  padding: 28px 30px; min-height: 178px; display: grid; gap: 10px; align-content: start;
}
.sector-detail__k { font-family: var(--font-mono); font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--accent); }
.sector-detail h3 { font-size: 24px; letter-spacing: -.02em; }
.sector-detail p { font-size: 16.5px; line-height: 1.6; color: var(--muted); max-width: 46ch; text-wrap: pretty; }
.sector-detail .node-item { display: none; }
.sector-detail .node-item.is-active { display: grid; gap: 10px; }
.radial { width: 100%; height: auto; }
.radial .node-g { cursor: pointer; }
.radial .node-ring { fill: var(--accent); transition: r var(--t), fill var(--t); }
.radial .node-g:hover .node-ring, .radial .node-g:focus .node-ring { fill: var(--accent-ink); }
.radial .spoke { stroke: var(--accent); stroke-opacity: .28; stroke-width: 1.4; stroke-dasharray: 3 5; }
.radial .orbit { fill: none; stroke: var(--accent); stroke-opacity: .18; stroke-dasharray: 3 6; }
.radial text { font-family: var(--font-body); }
.node-item { display: grid; gap: 6px; }
.node-item h3 { font-size: 17px; font-family: var(--font-display); }
.node-item p { font-size: 15px; color: var(--muted); line-height: 1.6; }
.sector-detail .node-item.is-active h3 { color: var(--fg); }
.network-stack { display: none; }

/* .pathway now composes onto .obj (icon stacked above the copy). .obj is
   declared later in this file, so its display/type rules win — that is
   deliberate, not an accident of ordering. */
.pathway__icon { width: 52px; height: 52px; border-radius: var(--r-sm); background: var(--pale-blue); color: var(--accent-ink); display: grid; place-items: center; margin-bottom: 4px; }
.pathway h3 { margin-bottom: 6px; }

/* ---------- 15. EVENT LIST ---------- */
.event-list { display: grid; gap: 14px; }
.event-row {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-md);
  display: grid; grid-template-columns: 88px 168px minmax(0, 1fr) 200px 172px 44px;
  gap: 26px; align-items: center; padding: 22px 26px;
  color: inherit; text-decoration: none;
  transition: border-color var(--t), box-shadow var(--t), transform var(--t);
}
.event-row:hover { text-decoration: none; border-color: rgba(7,87,217,.42); transform: translateY(-2px); box-shadow: 0 10px 24px rgba(9,40,74,.07); }
.event-row__date { font-family: var(--font-mono); line-height: 1.15; }
.event-row__date .m { display: block; font-size: 11px; letter-spacing: .16em; color: var(--accent); }
.event-row__date .d { display: block; font-family: var(--font-display); font-size: 27px; font-weight: 650; letter-spacing: -.02em; }
.event-row__date .y { display: block; font-size: 10.5px; letter-spacing: .12em; color: var(--muted); }
.event-row__time { font-family: var(--font-mono); font-size: 12px; letter-spacing: .06em; color: var(--muted); }
/* __main was an inline span, so title and category ran together on one line
   and the sub's margin-top was silently dropped. */
.event-row__main { display: block; min-width: 0; }
.event-row__title { display: block; font-family: var(--font-display); font-size: 19px; font-weight: 600; letter-spacing: -.015em; line-height: 1.28; text-wrap: pretty; }
.event-row__sub { display: block; font-size: 13.5px; color: var(--muted); margin-top: 6px; line-height: 1.5; }
.event-row__loc { font-size: 14px; color: var(--muted); }
.routing-note { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--muted); margin-top: 18px; }

.event-card { padding: 0; overflow: hidden; }
.event-card .ph-media { border-radius: 0; min-height: 200px; }
.event-card__body { padding: 26px; display: flex; flex-direction: column; gap: 13px; flex: 1; }

/* media-row — image + copy + arrow (committee directory, past events) */
.media-row { display: grid; grid-template-columns: 268px 1fr auto; gap: 32px; align-items: center; padding: 26px; }
.media-row--sm { grid-template-columns: 208px 1fr auto; gap: 28px; padding: 22px; }
.media-row__body { display: grid; gap: 12px; }
.media-row .ph-media { min-height: 0; }

/* gallery */
.gallery-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.gallery-grid .span-2 { grid-column: span 2; aspect-ratio: 2 / 1; }

@media (max-width: 860px) {
  .media-row, .media-row--sm { grid-template-columns: 168px 1fr; }
  .media-row .arrow-btn { grid-column: 2; justify-self: start; }
  .gallery-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
  .media-row, .media-row--sm { grid-template-columns: 1fr; gap: 16px; }
  .media-row .arrow-btn { grid-column: 1; }
  .gallery-grid { grid-template-columns: 1fr; }
  .gallery-grid .span-2 { grid-column: auto; aspect-ratio: 16 / 10; }
}

/* ---------- 16. CONTROLS: filters / tabs / search ---------- */
.controls { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; justify-content: space-between; margin-bottom: 34px; }
.control-group { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
/* Filter chips wrap on anything roomy — a hidden horizontal scroller was
   burying filters off-screen with no affordance. Scrolling chips are kept
   only on phones, where the brief calls for a chip strip. */
.chips { display: flex; flex-wrap: wrap; gap: 9px; padding-bottom: 4px; scrollbar-width: none; }
.chips::-webkit-scrollbar { display: none; }
@media (max-width: 600px) {
  .chips { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .chips > * { flex: 0 0 auto; }
}
.chip {
  min-height: 44px; padding: 9px 16px; border-radius: 999px; white-space: nowrap;
  border: 1px solid var(--border); background: var(--surface); color: var(--fg);
  font-size: 14px; font-weight: 500; cursor: pointer; transition: all var(--t);
}
.chip:hover { border-color: var(--accent); color: var(--accent); }
.chip[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: #fff; }

.segmented { display: inline-flex; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-sm); padding: 4px; gap: 4px; }
.segmented button { min-height: 40px; padding: 8px 16px; border: 0; border-radius: 6px; background: none; font-size: 14px; font-weight: 500; cursor: pointer; color: var(--muted); transition: all var(--t); }
.segmented button[aria-selected="true"] { background: var(--pale-blue); color: var(--accent-ink); font-weight: 600; }

.search-field { position: relative; flex: 1; min-width: 240px; }
.search-field svg { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: var(--muted); pointer-events: none; }
.search-field input { padding-left: 42px; }

/* ---------- 17. FORMS ---------- */
.field { display: grid; gap: 7px; }
.field > label { font-size: 14px; font-weight: 600; }
.field .hint { font-size: 12.5px; color: var(--muted); }
.input, .select, .textarea {
  width: 100%; min-height: 48px; padding: 12px 14px;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-sm);
  font-size: 15.5px; transition: border-color var(--t), box-shadow var(--t);
}
.textarea { min-height: 140px; resize: vertical; line-height: 1.55; }
.select { appearance: none; background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5l5-5' stroke='%2348515A' stroke-width='1.6' fill='none' stroke-linecap='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; padding-right: 40px; }
.input:hover, .select:hover, .textarea:hover { border-color: #B9C6D4; }
.input:focus, .select:focus, .textarea:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(7,87,217,.16); outline: none; }
.input[aria-invalid="true"], .select[aria-invalid="true"], .textarea[aria-invalid="true"] { border-color: var(--err); background: var(--err-bg); }

/* Range — a real slider, not a text field wearing .input. The thumb centre
   travels from thumb/2 to (width - thumb/2), so a naive
   `linear-gradient(... 0 var(--pct))` fill drifts away from the thumb at both
   ends: at max the bar reads full while the thumb still sits half a thumb
   short of the rail. --fill re-maps the percentage onto the thumb's actual
   travel so the fill terminates exactly under the thumb centre at every value.
   --pct is written by site.js on input. */
.range {
  --thumb: 22px; --rail: 6px; --pct: 0;
  --fill: calc(var(--pct) * (100% - var(--thumb)) + var(--thumb) / 2);
  -webkit-appearance: none; appearance: none;
  display: block; box-sizing: content-box;
  width: 100%; height: var(--rail);
  /* padding, not height — keeps the rail 6px while the drag/tap target is the
     44px the accessibility spec asks for. */
  padding: calc((44px - var(--rail)) / 2) 0;
  margin: 0; border: 0; background: transparent; cursor: pointer;
}
.range::-webkit-slider-runnable-track {
  height: var(--rail); border-radius: 999px;
  background: linear-gradient(90deg, var(--accent) 0 var(--fill), var(--pale-blue) var(--fill) 100%);
}
.range::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: var(--thumb); height: var(--thumb); border-radius: 50%;
  background: var(--surface); border: 2px solid var(--accent);
  box-shadow: 0 1px 3px rgba(9,40,74,.26);
  margin-top: calc((var(--rail) - var(--thumb)) / 2);
  transition: transform var(--t), box-shadow var(--t);
}
.range::-moz-range-track { height: var(--rail); border-radius: 999px; background: var(--pale-blue); }
.range::-moz-range-progress { height: var(--rail); border-radius: 999px; background: var(--accent); }
.range::-moz-range-thumb {
  width: var(--thumb); height: var(--thumb); border-radius: 50%; box-sizing: border-box;
  background: var(--surface); border: 2px solid var(--accent);
  box-shadow: 0 1px 3px rgba(9,40,74,.26);
  transition: transform var(--t), box-shadow var(--t);
}
.range:hover::-webkit-slider-thumb { transform: scale(1.08); }
.range:hover::-moz-range-thumb { transform: scale(1.08); }
.range:active::-webkit-slider-thumb { transform: scale(1.14); }
.range:active::-moz-range-thumb { transform: scale(1.14); }
.range:focus { outline: none; }
.range:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 4px rgba(7,87,217,.22); }
.range:focus-visible::-moz-range-thumb { box-shadow: 0 0 0 4px rgba(7,87,217,.22); }
.range-head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; }
.range-head > label { font-size: 14px; font-weight: 600; }
.range-value {
  font-family: var(--font-mono); font-size: 13px; font-variant-numeric: tabular-nums;
  color: var(--accent-ink); background: var(--pale-blue);
  padding: 3px 9px; border-radius: 999px;
}
.field-error { display: none; align-items: center; gap: 6px; font-size: 13px; color: var(--err); font-weight: 500; }
.field.has-error .field-error { display: flex; }
.checkbox { display: grid; grid-template-columns: 22px 1fr; gap: 12px; align-items: start; font-size: 14px; color: var(--muted); cursor: pointer; min-height: 44px; padding-top: 2px; }
.checkbox input { width: 22px; height: 22px; accent-color: var(--accent); margin-top: 1px; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.form-grid .span-2 { grid-column: 1 / -1; }
.form-status { display: none; gap: 10px; align-items: start; padding: 14px 16px; border-radius: var(--r-sm); font-size: 14.5px; }
.form-status.is-visible { display: flex; }
.form-status--ok { background: var(--ok-bg); color: var(--ok); }
.form-status--err { background: var(--err-bg); color: var(--err); }

/* ---------- 18. STATES ---------- */
.skeleton {
  background: linear-gradient(100deg, #E7ECF2 30%, #F3F6F9 48%, #E7ECF2 66%);
  background-size: 240% 100%; animation: shimmer 1.5s linear infinite;
  border-radius: 6px;
}
@keyframes shimmer { to { background-position: -240% 0; } }
.sk-line { height: 12px; }
.sk-line.w70 { width: 70%; } .sk-line.w45 { width: 45%; } .sk-line.w88 { width: 88%; }
.sk-block { height: 132px; border-radius: var(--r-md); }

.state-panel {
  background: var(--surface); border: 1px dashed var(--border); border-radius: var(--r-md);
  padding: clamp(34px, 4vw, 56px) 24px; text-align: center;
  display: flex; flex-direction: column; align-items: center; gap: 14px;
}
.state-panel__icon { width: 52px; height: 52px; border-radius: 999px; display: grid; place-items: center; background: var(--pale-blue); color: var(--accent-ink); }
.state-panel--error { border-color: rgba(179,38,30,.35); background: var(--err-bg); }
.state-panel--error .state-panel__icon { background: rgba(179,38,30,.12); color: var(--err); }
.state-panel p { max-width: 46ch; color: var(--muted); font-size: 15px; }

/* ---------- Events coming soon ---------- */
.coming-soon-section { padding-top: clamp(30px, 3.5vw, 52px); }
.coming-soon-panel {
  position: relative;
  isolation: isolate;
  min-height: clamp(460px, 54vw, 610px);
  overflow: hidden;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(260px, .72fr);
  align-items: center;
  gap: clamp(36px, 7vw, 104px);
  padding: clamp(42px, 7vw, 96px);
  border: 1px solid rgba(255,255,255,.62);
  border-radius: clamp(24px, 3vw, 42px);
  background: rgba(255,255,255,.67);
  box-shadow: 0 36px 90px rgba(36,72,184,.13), inset 0 1px 0 rgba(255,255,255,.86);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
}
.coming-soon-panel::after {
  content: "";
  position: absolute;
  inset: 1px;
  z-index: -1;
  border-radius: inherit;
  background: linear-gradient(135deg, rgba(255,255,255,.4), rgba(217,231,245,.28));
}
.coming-soon-orb { position: absolute; z-index: -2; border-radius: 50%; filter: blur(18px); opacity: .72; }
.coming-soon-orb--one { width: 410px; height: 410px; right: -90px; top: -150px; background: rgba(72,122,230,.38); }
.coming-soon-orb--two { width: 350px; height: 350px; left: 31%; bottom: -220px; background: rgba(126,93,222,.24); }
.coming-soon-grid {
  position: absolute;
  inset: 0;
  z-index: -1;
  opacity: .32;
  background-image: linear-gradient(rgba(56,97,217,.09) 1px, transparent 1px), linear-gradient(90deg, rgba(56,97,217,.09) 1px, transparent 1px);
  background-size: 44px 44px;
  mask-image: linear-gradient(to right, transparent 0, #000 52%, #000 100%);
}
.coming-soon-content { max-width: 720px; }
.coming-soon-kicker {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 28px;
  padding: 8px 13px;
  border: 1px solid rgba(56,97,217,.18);
  border-radius: 999px;
  background: rgba(255,255,255,.56);
  color: var(--navy-deep);
  font: 500 11px/1 var(--font-mono);
  letter-spacing: .13em;
  text-transform: uppercase;
}
.coming-soon-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--primary-blue); box-shadow: 0 0 0 5px rgba(72,122,230,.12); }
.coming-soon-title {
  max-width: 12ch;
  color: var(--fg);
  font-family: var(--font-display);
  font-size: clamp(42px, 6.1vw, 86px);
  font-weight: 600;
  letter-spacing: -.055em;
  line-height: .97;
  text-wrap: balance;
}
.coming-soon-title span { color: var(--dark-blue); }
.coming-soon-copy { max-width: 58ch; margin-top: 26px; color: var(--muted); font-size: clamp(16px, 1.45vw, 19px); line-height: 1.72; }
.coming-soon-status {
  width: fit-content;
  display: flex;
  align-items: center;
  gap: 13px;
  margin-top: 34px;
  padding: 13px 16px 13px 13px;
  border: 1px solid rgba(56,97,217,.15);
  border-radius: 14px;
  background: rgba(255,255,255,.56);
  box-shadow: 0 12px 32px rgba(36,72,184,.08);
}
.coming-soon-status__icon { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 11px; background: var(--dark-blue); color: #fff; }
.coming-soon-status strong, .coming-soon-status small { display: block; }
.coming-soon-status strong { color: var(--fg); font-family: var(--font-display); font-size: 15px; font-weight: 600; }
.coming-soon-status small { margin-top: 3px; color: var(--muted); font-size: 12.5px; }
.coming-soon-mark {
  justify-self: center;
  width: clamp(220px, 25vw, 330px);
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  position: relative;
  color: rgba(36,72,184,.68);
  border: 1px solid rgba(56,97,217,.16);
  border-radius: 50%;
  background: rgba(255,255,255,.28);
  box-shadow: inset 0 0 60px rgba(72,122,230,.10), 0 24px 70px rgba(36,72,184,.12);
}
.coming-soon-mark::before, .coming-soon-mark::after { content: ""; position: absolute; border-radius: 50%; border: 1px solid rgba(56,97,217,.15); }
.coming-soon-mark::before { inset: 12%; }
.coming-soon-mark::after { inset: 25%; }
.coming-soon-mark span { font: 500 clamp(19px, 2.2vw, 28px)/1 var(--font-mono); letter-spacing: .28em; text-indent: .28em; }
.coming-soon-mark i { position: absolute; width: 7px; height: 7px; border-radius: 50%; background: var(--primary-blue); box-shadow: 0 0 18px rgba(72,122,230,.75); }
.coming-soon-mark i:nth-of-type(1) { top: 8%; left: 48%; }
.coming-soon-mark i:nth-of-type(2) { right: 14%; bottom: 24%; }
.coming-soon-mark i:nth-of-type(3) { left: 16%; bottom: 20%; }
.events-empty-compact {
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  gap: 18px;
  min-height: 150px;
  padding: 30px 34px;
  border: 1px solid rgba(255,255,255,.7);
  border-radius: var(--r-lg);
  background: rgba(255,255,255,.64);
  box-shadow: 0 20px 48px rgba(36,72,184,.09), inset 0 1px 0 rgba(255,255,255,.86);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}
.events-empty-compact::after { content: ""; position: absolute; width: 240px; height: 240px; right: -90px; top: -120px; z-index: -1; border-radius: 50%; background: rgba(72,122,230,.18); filter: blur(20px); }
.events-empty-compact strong { display: block; color: var(--fg); font-family: var(--font-display); font-size: clamp(20px, 2vw, 26px); font-weight: 600; letter-spacing: -.02em; }
.events-empty-compact p { margin-top: 5px; color: var(--muted); font-size: 15px; }

@media (max-width: 800px) {
  .coming-soon-panel { grid-template-columns: 1fr; min-height: 560px; padding: 38px 28px; }
  .coming-soon-mark { position: absolute; right: -70px; bottom: -90px; opacity: .55; }
  .coming-soon-content { position: relative; z-index: 1; min-width: 0; }
  .coming-soon-copy { max-width: 100%; }
}

@media (prefers-reduced-motion: no-preference) {
  .coming-soon-mark { animation: coming-soon-float 7s ease-in-out infinite; }
  .coming-soon-dot { animation: coming-soon-pulse 2.4s ease-in-out infinite; }
}
@keyframes coming-soon-float { 50% { transform: translateY(-10px); } }
@keyframes coming-soon-pulse { 50% { box-shadow: 0 0 0 8px rgba(72,122,230,.06); } }

/* ---------- 19. ACCORDION ---------- */
.accordion { border-top: 1px solid var(--border); }
.accordion__item { border-bottom: 1px solid var(--border); }
.accordion__btn {
  width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 18px;
  min-height: 64px; padding: 16px 0; background: none; border: 0; cursor: pointer; text-align: left;
  font-family: var(--font-display); font-size: 19px; font-weight: 600; letter-spacing: -.02em;
}
.accordion__btn .chev { transition: transform var(--t); color: var(--accent); flex: none; }
.accordion__btn[aria-expanded="true"] .chev { transform: rotate(180deg); }
.accordion__panel { display: none; padding-bottom: 22px; }
.accordion__btn[aria-expanded="true"] + .accordion__panel { display: block; }

/* ---------- 20. OBJECTIVE / PRINCIPLE GRIDS ---------- */
.obj-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); gap: 26px; }
.obj-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.obj {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-md);
  padding: 34px; display: flex; flex-direction: column; gap: 12px;
}
.obj__num { font-family: var(--font-mono); font-size: 11.5px; letter-spacing: .14em; color: var(--accent); }
.obj h3 { font-size: 21px; }
.obj p { font-size: 15.5px; color: var(--muted); line-height: 1.6; text-wrap: pretty; }

/* ---------- 20b. FORMAT INDEX (symposium program categories) ----------
   Replaces eight identical cards that each read "Schedule forthcoming".
   The repetition was the content, so the layout carries the meaning
   instead: an even 4x2 index of confirmed formats, one status line. */
.fmt-index { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; border-top: 1px solid rgba(255,255,255,.24); }
.fmt {
  padding: 26px 26px 26px 0; display: grid; gap: 8px; align-content: start;
  border-bottom: 1px solid rgba(255,255,255,.24);
  border-right: 1px solid rgba(255,255,255,.24);
}
.fmt:nth-child(4n) { border-right: 0; padding-right: 0; }
.fmt:not(:nth-child(4n)) { padding-right: 26px; }
.fmt:not(:nth-child(4n)) + .fmt { padding-left: 26px; }
/* ---- Symposium agenda ------------------------------------------------- */
.agenda__days { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 34px; }
.day-tab {
  display: inline-flex; flex-direction: column; gap: 3px; align-items: flex-start;
  min-height: 44px; padding: 11px 22px; cursor: pointer;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-md);
  color: var(--fg); font-family: inherit; text-align: left;
  transition: background var(--t), border-color var(--t), color var(--t);
}
.day-tab:hover { border-color: var(--accent); color: var(--accent); }
.day-tab .dt-n { font-family: var(--font-mono); font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }
.day-tab .dt-d { font-size: 16px; font-weight: 600; letter-spacing: -.01em; }
.day-tab[aria-selected="true"] { background: var(--accent); border-color: var(--accent); color: #fff; }
.day-tab[aria-selected="true"] .dt-n { color: rgba(255,255,255,.74); }

.agenda__day { display: grid; gap: 0; border-top: 1px solid var(--border); }
.ses {
  display: grid; grid-template-columns: 172px 1fr; gap: 30px;
  padding: 26px 0; border-bottom: 1px solid var(--border-soft);
}
.ses__when { display: flex; flex-direction: column; gap: 8px; }
.ses__time { font-family: var(--font-mono); font-size: 13.5px; letter-spacing: .04em; color: var(--fg); font-weight: 500; }
.ses__room { font-size: 13px; color: var(--muted); }
.ses__body { min-width: 0; }
.ses h3 { font-size: 21px; line-height: 1.3; letter-spacing: -.015em; color: var(--fg); text-wrap: balance; }
.ses__meta { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 9px; }
.ses__desc { font-size: 15.5px; line-height: 1.6; color: var(--muted); margin-top: 9px; max-width: 62ch; text-wrap: pretty; }
.ses__people { display: flex; flex-direction: column; gap: 5px; margin-top: 15px; }
.ses__person { font-size: 14.5px; line-height: 1.45; color: var(--fg); }
.ses__person span { color: var(--muted); }
.ses--break { background: var(--pale-tint); }
.ses--break h3 { font-size: 17px; font-weight: 600; color: var(--muted); }
.ses--break .ses__when, .ses--break .ses__body { padding-inline: 20px; }
.track {
  display: inline-flex; align-items: center; min-height: 24px; padding: 0 10px;
  border-radius: 999px; font-family: var(--font-mono); font-size: 10.5px;
  letter-spacing: .14em; text-transform: uppercase; font-weight: 500;
  background: var(--pale-blue); color: var(--navy-deep);
}
.track--keynote { background: var(--accent); color: #fff; }
.track--panel { background: #E4DFF8; color: #35299B; }
.track--technical { background: #D8E9DF; color: #1E5B3A; }
.track--workshop { background: #FAE3D2; color: #8A4413; }
.track--community { background: var(--pale-blue); color: var(--navy-deep); }

.fmt__n { font-family: var(--font-mono); font-size: 11px; letter-spacing: .16em; color: rgba(255,255,255,.6); }
.fmt h3 { font-size: 19px; color: #fff; letter-spacing: -.015em; line-height: 1.25; }
.fmt p { font-size: 14.5px; line-height: 1.55; color: rgba(255,255,255,.76); text-wrap: pretty; }

/* ---------- 20c. CONTACT DIRECTORY ----------
   Five pathways as an editorial index rather than a card grid; a 4-up
   auto-fit grid left a two-card orphan row with dead space below both. */
.dir { border-top: 1px solid var(--border); }
.dir__row {
  display: grid; grid-template-columns: 264px minmax(0, 1fr); gap: clamp(20px, 3vw, 56px);
  padding: 26px 0; border-bottom: 1px solid var(--border); align-items: baseline;
}
.dir__row h3 { font-size: 20px; letter-spacing: -.015em; }
.dir__row p { font-size: 16px; color: var(--muted); line-height: 1.6; max-width: 62ch; text-wrap: pretty; }
.dir-email {
  margin-top: 30px; display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px;
  background: var(--pale-blue); border-radius: var(--r-md); padding: 22px 28px;
}
.dir-email__label { font-family: var(--font-mono); font-size: 11.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--accent-ink); }
.dir-email a { font-family: var(--font-display); font-size: clamp(20px, 2.2vw, 26px); font-weight: 600; letter-spacing: -.02em; }

.stage-flow { display: grid; grid-template-columns: repeat(4, 1fr); gap: 26px; counter-reset: stage; }
.stage { position: relative; padding-top: 30px; border-top: 2px solid var(--border); }
.stage::before {
  counter-increment: stage; content: "0" counter(stage);
  position: absolute; top: -13px; left: 0; background: var(--bg); padding-right: 12px;
  font-family: var(--font-mono); font-size: 12px; letter-spacing: .14em; color: var(--accent);
}
.stage.on-surface::before { background: var(--surface); }
.blue-panel .stage::before { background: var(--dark-blue); color: #fff; }
.dark-panel .stage::before { background: var(--navy); color: #9EC2FF; }
.stage h3 { font-size: 21px; margin-bottom: 10px; }
.stage p { font-size: 15.5px; color: var(--muted); line-height: 1.6; }

/* ---------- 21. CTA BAND ---------- */
.cta-band { text-align: center; display: flex; flex-direction: column; align-items: center; gap: 20px; }
.cta-band .h-sec { max-width: 20ch; }
.cta-band .lead { text-align: center; margin-inline: auto; }
.cta-band__actions { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; }
.cta-band .endorse-line { font-size: 13px; color: rgba(255,255,255,.62); display: flex; align-items: center; gap: 7px; }

/* ---------- 22. FOOTER ---------- */
.site-footer { margin-top: clamp(48px, 5vw, 80px); }
.site-footer__inner {
  background: var(--navy); color: #fff;
  border-radius: var(--r-lg) var(--r-lg) 0 0;
  padding: clamp(44px, 4.4vw, 72px) clamp(24px, 3vw, 56px) 32px;
}
.footer-grid { display: grid; grid-template-columns: 1.5fr 1fr 1.2fr 1fr 1.5fr; gap: clamp(24px, 2.4vw, 40px); }
.site-footer .brand__logo { height: 58px; }
.footer-mission { font-size: 15px; color: rgba(255,255,255,.7); line-height: 1.65; margin-top: 18px; max-width: 34ch; }
.footer-col h3 { font-family: var(--font-mono); font-size: 11.5px; letter-spacing: .16em; text-transform: uppercase; color: #9EC2FF; font-weight: 500; margin-bottom: 16px; }
.footer-col ul { list-style: none; display: grid; gap: 2px; }
.footer-col a { color: rgba(255,255,255,.82); font-size: 15.5px; display: inline-flex; align-items: center; gap: 7px; min-height: 42px; }
.footer-col a:hover { color: #fff; }
.social-row { display: flex; gap: 8px; margin: 10px 0 14px; }
.social-row a {
  width: 40px; height: 40px; min-height: 40px; border-radius: 8px; display: grid; place-items: center;
  background: rgba(255,255,255,.09); color: #fff; transition: background var(--t);
}
.social-row a:hover { background: rgba(255,255,255,.2); }
.subscribe { display: flex; gap: 8px; margin-top: 14px; flex-wrap: wrap; }
.subscribe .input { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.22); color: #fff; flex: 1; min-width: 160px; }
.subscribe .input::placeholder { color: rgba(255,255,255,.5); }
.footer-note { font-size: 12px; color: rgba(255,255,255,.55); margin-top: 12px; line-height: 1.55; }
.footer-legal {
  margin-top: 40px; padding-top: 22px; border-top: 1px solid rgba(255,255,255,.14);
  display: flex; flex-wrap: wrap; gap: 10px 26px; align-items: center; justify-content: space-between;
  font-size: 12.5px; color: rgba(255,255,255,.6);
}
.footer-legal nav { display: flex; flex-wrap: wrap; gap: 8px 22px; }
.footer-legal a { color: rgba(255,255,255,.72); min-height: 40px; display: inline-flex; align-items: center; gap: 6px; }

/* ---------- 23. MOTION REVEAL ---------- */
.reveal { opacity: 0; transform: translateY(16px); transition: opacity 560ms var(--ease), transform 560ms var(--ease); }
.reveal.is-in { opacity: 1; transform: none; }

/* ---------- 24. INDEX / LAUNCHER ---------- */
.launcher-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr)); gap: 24px; }

/* ---------- 25. RESPONSIVE ---------- */
@media (max-width: 1180px) {
  .footer-grid { grid-template-columns: 1.4fr 1fr 1.2fr; row-gap: 36px; }
  .fmt-index { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fmt:nth-child(4n) { border-right: 1px solid rgba(255,255,255,.24); padding-right: 26px; }
  .fmt:nth-child(2n) { border-right: 0; padding-right: 0; }
  .fmt:nth-child(odd) + .fmt { padding-left: 26px; }
}
@media (max-width: 1024px) {
  :root { --gutter: 26px; }
  .endorse { display: none; }
  .primary-nav { display: none; }
  .utility .search-toggle { display: none; }
  .menu-btn { display: grid; }
  .header-inner { min-height: 76px; }
  .num-grid { grid-template-columns: 1fr; }
  .split { grid-template-columns: 1fr; }
  .split--flip .split__media { order: 0; }
  .split .ph-media, .page-hero .ph-media { min-height: 340px; }
  .header-inner { gap: 20px; }
  .page-hero__grid { grid-template-columns: 1fr; }
  .stage-flow { grid-template-columns: 1fr 1fr; }
  .event-row { grid-template-columns: 74px 1fr 44px; gap: 8px 16px; align-items: start; }
  .event-row__date  { grid-column: 1; grid-row: 1 / span 4; }
  .event-row__main  { grid-column: 2; grid-row: 1; }
  .event-row__time  { grid-column: 2; grid-row: 2; }
  .event-row__loc   { grid-column: 2; grid-row: 3; }
  .event-row__status{ grid-column: 2; grid-row: 4; }
  .event-row__arrow { grid-column: 3; grid-row: 1; }
  .form-grid { grid-template-columns: 1fr; }
}
@media (max-width: 900px) {
  .dir__row { grid-template-columns: 1fr; gap: 8px; }
}
@media (max-width: 860px) {
  /* below this width the diagram is unreadable, so the stacked timeline
     replaces it — and the swap panel with it, since every sector shows. */
  .radial-wrap, .sector-tabs, .sector-detail { display: none; }
  .network-grid { grid-template-columns: 1fr; }
  .network-stack { display: grid; gap: 0; position: relative; padding-left: 26px; }
  .network-stack::before { content: ""; position: absolute; left: 9px; top: 12px; bottom: 12px; width: 2px; background: rgba(7,87,217,.28); }
  .network-stack .node-item { position: relative; padding: 16px 0; border-bottom: 1px solid var(--border); }
  .network-stack .node-item::before { content: ""; position: absolute; left: -22px; top: 22px; width: 12px; height: 12px; border-radius: 999px; background: var(--accent); border: 3px solid var(--bg); }
}
@media (max-width: 720px) {
  :root { --gutter: 20px; --r-lg: 18px; }
  body { font-size: 16.5px; }
  .utility { margin-left: auto; }
  .utility > .btn { display: none; }
  .coming-soon-panel { width: calc(100vw - 40px); max-width: calc(100vw - 40px); }
  .hero__frame { min-height: 560px; padding: 24px; }
  .hero__actions .btn { width: 100%; }
  .hero__media-note { position: static; margin-bottom: 14px; }
  .stage-flow { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr; row-gap: 30px; }
  .controls { flex-direction: column; align-items: stretch; }
  .update-card .ph-media { min-height: 156px; }
  /* :not(.update-card) — this rule sits after the base .update-card
     { padding: 0 } and would otherwise re-pad the full-bleed rail card. */
  .card:not(.update-card) { padding: 24px; }
  .num-card { padding: 28px; }
  .obj { padding: 26px; }
  .obj-grid--3 { grid-template-columns: 1fr; }
  .event-row { padding: 18px 20px; }
  .ses { grid-template-columns: 1fr; gap: 12px; padding: 22px 0; }
  .ses__when { flex-direction: row; align-items: baseline; gap: 12px; }
  .ses--break .ses__when, .ses--break .ses__body { padding-inline: 16px; }
  .day-tab { padding: 10px 16px; }
  .fmt-index { grid-template-columns: 1fr; }
  .fmt, .fmt:nth-child(4n), .fmt:not(:nth-child(4n)), .fmt:nth-child(2n) { padding: 20px 0; border-right: 0; }
  .fmt:not(:nth-child(4n)) + .fmt, .fmt:nth-child(odd) + .fmt { padding-left: 0; }
  .dir-email { padding: 20px 22px; }
  .cta-band__actions { flex-direction: column; width: 100%; }
  .cta-band__actions .btn { width: 100%; }
  .footer-legal { flex-direction: column; align-items: flex-start; }
}
@media (max-width: 430px) {
  .brand__logo, .mobile-nav .brand__logo { height: 40px; }
  .split__actions .btn, .cta-band .btn { width: 100%; }
}

/* ---------- 26. REDUCED MOTION + PRINT ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important; animation-iteration-count: 1 !important;
    transition-duration: .001ms !important; scroll-behavior: auto !important;
  }
  .reveal { opacity: 1; transform: none; }
}
@media print {
  .site-header, .mobile-nav, .arrow-btn, .chips, .segmented { display: none !important; }
  body { background: #fff; font-size: 11pt; }
  .ph-media { border: 1px solid #999; background: #f2f2f2; color: #333; }
}