:root {
    color-scheme: light;
    --bg: #FFFFFF;
    --surface: #EEF4F6;
    --ink: #0A2E44;
    --ink-2: #4C6B7A;
    --accent: #1B5B78;
    --accent-ink: #FFFFFF;
    --accent-soft: #DCE9EE;
    --line: #CFDDE2;
    --hero-bg: #0B3D5C;
    --hero-ink: #FFFFFF;
    --hero-ink-2: #C9DBE3;
    --hero-line: rgba(255,255,255,.35);
    box-sizing: border-box;
    padding-top: env(safe-area-inset-top, 0px);
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }
  @media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
      color-scheme: dark;
      --bg: #07202F;
      --surface: #0D2C3E;
      --ink: #E6EFF3;
      --ink-2: #A9BFCB;
      --accent: #7FB3CC;
      --accent-ink: #07202F;
      --accent-soft: #163A4F;
      --line: #22475A;
      --hero-bg: #0B3D5C;
      --hero-ink: #FFFFFF;
      --hero-ink-2: #C9DBE3;
      --hero-line: rgba(255,255,255,.3);
    }
  }
  :root[data-theme="dark"] {
    color-scheme: dark;
    --bg: #07202F;
    --surface: #0D2C3E;
    --ink: #E6EFF3;
    --ink-2: #A9BFCB;
    --accent: #7FB3CC;
    --accent-ink: #07202F;
    --accent-soft: #163A4F;
    --line: #22475A;
    --hero-bg: #0B3D5C;
    --hero-ink: #FFFFFF;
    --hero-ink-2: #C9DBE3;
    --hero-line: rgba(255,255,255,.3);
  }
  html { scroll-padding-top: env(safe-area-inset-top, 0px); scroll-behavior: smooth; }
  @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
  *, *::before, *::after { box-sizing: inherit; }
  body {
    margin: 0;
    background: var(--bg);
    color: var(--ink);
    font-family: "Source Sans 3", "Segoe UI", Helvetica, Arial, sans-serif;
    font-size: 1.0625rem;
    line-height: 1.55;
  }
  h1, h2, h3 {
    font-family: Spectral, Georgia, "Times New Roman", serif;
    font-weight: 500;
    line-height: 1.15;
    margin: 0 0 .6em;
    letter-spacing: -0.005em;
  }
  h1 { font-size: clamp(2.1rem, 5.2vw, 3.6rem); font-weight: 400; }
  h2 { font-size: clamp(1.6rem, 3vw, 2.2rem); }
  h3 { font-size: 1.25rem; font-weight: 600; }
  p { margin: 0 0 1em; max-width: 68ch; }
  a { color: var(--accent); text-decoration-thickness: 1px; text-underline-offset: 3px; }
  a:focus-visible, button:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
  .wrap { width: min(1080px, 100% - 2.5rem); margin: 0 auto; }

  header.top {
    border-bottom: 1px solid var(--line);
    background: var(--surface);
  }
  header.top .wrap {
    display: flex; align-items: center; justify-content: space-between;
    gap: 1rem; padding: 1rem 0; flex-wrap: wrap;
  }
  .wordmark {
    font-family: Spectral, Georgia, serif; font-size: 1.25rem; font-weight: 600;
    color: var(--ink); text-decoration: none; display: flex; align-items: center; gap: .6rem;
  }
  .wordmark img { height: 368px; width: auto; display: block; max-width: 100%; margin: 0 auto; }
  @media (max-width: 900px) { .wordmark img { height: auto; width: min(100%, 560px); } }
  header.top { background: #FFFFFF; }
  header.top .wrap { padding: 1.2rem 0 .9rem; flex-direction: column; align-items: center; gap: .6rem; }
  .wordmark { width: 100%; justify-content: center; }
  nav.primary { justify-content: center; }
  nav.primary { display: flex; gap: 1.4rem; flex-wrap: wrap; }
  nav.primary a { color: #4C6B7A; text-decoration: none; font-weight: 500; font-size: .97rem; }
  nav.primary a:hover { color: #0B3D5C; }
  header.top { border-bottom-color: #CFDDE2; }

  .hero {
    position: relative; overflow: hidden;
    background: #0B3D5C; color: #FFFFFF;
    padding: clamp(2.8rem, 5vw, 4rem) 0 clamp(2.8rem, 5vw, 4rem);
  }
  .hero svg.fibers {
    position: absolute; inset: 0; width: 100%; height: 100%;
    color: #A8C0D0; opacity: .27; pointer-events: none;
  }
  .hero .wrap { position: relative; width: min(960px, 100% - 2.5rem); margin: 0 auto; }
  .hero .kicker {
    font-family: Spectral, Georgia, serif; font-style: italic;
    color: #C9DBE8; margin-bottom: 1rem; font-size: .98rem;
  }
  .hero p.dek { font-size: 1.02rem; max-width: 60ch; color: #D3E2EB; margin-top: 1.25rem; }
  .hero .dates {
    display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 1.5rem;
    margin: 1.7rem 0 1.25rem;
    border-top: 1px solid rgba(210,228,239,.48); border-bottom: 1px solid rgba(210,228,239,.48); padding: 1rem 0;
  }
  .hero .dates div { min-width: 0; }
  .hero .dates strong { display: block; font-family: Spectral, Georgia, serif; font-size: 1.12rem; font-weight: 500; line-height: 1.35; }
  .hero .dates span { display: block; color: #C9DBE8; font-size: .92rem; line-height: 1.4; margin-top: .2rem; }
  .hero .btn { border-color: #FFFFFF; color: #FFFFFF; }
  .hero .btn.primary { background: #FFFFFF; color: var(--hero-bg); }
  .hero .soon { color: #C9DBE8; }
  .hero a:focus-visible { outline-color: #FFFFFF; }
  .actions { display: flex; gap: .8rem; flex-wrap: wrap; }
  .btn {
    display: inline-block; padding: .7rem 1.25rem; border-radius: 999px;
    font-weight: 600; text-decoration: none; border: 1.5px solid var(--accent);
    color: var(--accent); background: transparent; font-size: .98rem;
  }
  .btn.primary { background: var(--accent); color: var(--accent-ink); }
  .btn[aria-disabled="true"] { opacity: .55; cursor: not-allowed; }
  .soon { display: block; font-size: .85rem; color: var(--ink-2); margin-top: .5rem; }

  section { padding: clamp(2.8rem, 6vw, 4.5rem) 0; border-top: 1px solid var(--line); }
  section.tint { background: var(--surface); }
  .two { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr); gap: 2.5rem 4rem; }
  .two > aside h2 { position: sticky; top: calc(1rem + env(safe-area-inset-top, 0px)); }
  @media (max-width: 760px) { .two { grid-template-columns: 1fr; gap: .6rem; } }

  .timeline { list-style: none; padding: 0; margin: 1rem 0 0; border-left: 2px solid var(--accent); }
  .timeline li { position: relative; padding: 0 0 1.6rem 1.6rem; }
  .timeline li:last-child { padding-bottom: 0; }
  .timeline li::before {
    content: ""; position: absolute; left: -7px; top: .5rem; width: 12px; height: 12px;
    border-radius: 50%; background: var(--accent); border: 2px solid var(--bg);
  }
  .timeline h3 { margin-bottom: .2em; }
  .timeline p { margin-bottom: 0; color: var(--ink-2); }

  .facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: 1.4rem 2.5rem; margin-top: .5rem; }
  .facts h3 { margin-bottom: .25em; }
  .facts p { margin: 0; color: var(--ink-2); }

  .scope ul { padding-left: 1.2rem; margin: .4rem 0 1.2rem; max-width: 66ch; }
  .scope li { margin-bottom: .35rem; }
  .note {
    background: var(--accent-soft); border-radius: 10px; padding: 1rem 1.2rem; max-width: 66ch;
  }
  .note p { margin: 0; }

  .people { list-style: none; padding: 0; margin: .5rem 0 0; columns: 2; column-gap: 3rem; }
  @media (max-width: 640px) { .people { columns: 1; } }
  .people li { break-inside: avoid; padding: .7rem 0; border-bottom: 1px solid var(--line); }
  .people strong { display: block; font-weight: 600; }
  .people span { color: var(--ink-2); font-size: .97rem; }
  .chair { color: var(--accent); font-weight: 600; font-size: .9rem; margin-left: .4rem; }

  table { border-collapse: collapse; width: 100%; max-width: 40rem; margin: .5rem 0 1.2rem; }
  th, td { text-align: left; padding: .65rem .4rem; border-bottom: 1px solid var(--line); }
  th { font-weight: 600; font-size: .95rem; color: var(--ink-2); }
  td:last-child, th:last-child { text-align: right; font-variant-numeric: tabular-nums; }
  .tablewrap { overflow-x: auto; }

  .contact-card {
    background: var(--surface); border: 1px solid var(--line); border-radius: 14px;
    padding: 1.6rem 1.8rem; max-width: 34rem;
  }
  .contact-card p { margin-bottom: .5rem; }
  .contact-card .who { font-family: Spectral, Georgia, serif; font-size: 1.3rem; font-weight: 500; }

  footer { border-top: 1px solid var(--line); padding: 2rem 0 2.5rem; color: var(--ink-2); font-size: .93rem; }
  footer .wrap { display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
  footer p { margin: 0; }

/* Screenshot-matched hero refinements */
.hero h1 {
  max-width: 27ch;
  font-size: clamp(2.25rem, 3.25vw, 3rem);
  line-height: 1.12;
  letter-spacing: 0;
  margin-bottom: 1.05rem;
}
.hero .actions { gap: .7rem; }
.hero .btn { padding: .58rem 1.15rem; font-size: .9rem; }
.hero .btn.primary { background: #FFFFFF; color: #0B3D5C; }
.hero .btn:not(.primary) { background: transparent; color: #D3E2EB; border-color: #D3E2EB; }
.hero .soon { margin-top: .55rem; font-size: .8rem; }
@media (max-width: 760px) {
  .hero { padding: 2.5rem 0; }
  .hero .wrap { width: min(100% - 2rem, 960px); }
  .hero h1 { font-size: clamp(2rem, 7vw, 2.6rem); }
  .hero .dates { grid-template-columns: 1fr; gap: .8rem; }
}