/* ============================================================
   Marine Engineering Society — public site
   Palette and typographic structure follow the sponsorship
   proposal: navy headings, teal accents, ruled section heads
   and navy-header data tables.
   ============================================================ */

:root {
  --navy: #093c50;
  --navy-deep: #062c3c;
  --navy-mid: #0d4c62;
  /* Darkened from the original #07859a: that shade cleared only 3.97:1 on --pale
     and 4.27:1 on --paper, short of AA (4.5:1) for the normal-size teal labels
     and links used throughout. Solved against the worst real composite, not just
     the flat tokens — the project-brief card is --pale at 96% opacity over the
     hero water band, which measured a full point darker than flat --pale on
     screen. This clears 4.5:1 against that with margin, and only improves the
     white-on-teal button cases. */
  --teal: #067587;
  --teal-light: #70c2cd;
  /* Lifted teal for small caps over the water bands: --teal-light only reaches
     3.3:1 against the lightest part of the photograph, short of AA at 10.5px. */
  --teal-pale: #b8e2e9;
  --pale: #eef6f8;
  --pale-deep: #dfeef1;
  --paper: #fcfdfd;
  --ink: #173746;
  --body: #3f5f6e;
  --muted: #5c7180;
  --line: #cbe0e5;
  --line-soft: #dceaee;
  --white: #fff;
  --max: 1140px;
  --ease: cubic-bezier(.2, .6, .3, 1);
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--body);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 17px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

img { display: block; max-width: 100%; }
a { color: inherit; }
button, input, textarea, select { font: inherit; }
h1, h2, h3, p { margin-top: 0; }
h1, h2, h3 { color: var(--navy); line-height: 1.1; }
h1 { margin-bottom: 20px; font-size: clamp(42px, 5.4vw, 66px); letter-spacing: -.035em; }
h2 { margin-bottom: 0; font-size: clamp(30px, 3.4vw, 42px); letter-spacing: -.025em; }
h3 { margin-bottom: 7px; font-size: 20px; letter-spacing: -.015em; }

.container { width: min(calc(100% - 48px), var(--max)); margin-inline: auto; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.skip-link { position: fixed; z-index: 100; top: -60px; left: 18px; padding: 10px 14px; border: 2px solid var(--teal); background: var(--white); color: var(--navy); font-weight: 700; }
.skip-link:focus { top: 18px; }
:focus-visible { outline: 2px solid var(--teal); outline-offset: 3px; }

/* ---------- Header ---------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 20;
  border-bottom: 1px solid transparent;
  background: rgba(252, 253, 253, .94);
  backdrop-filter: blur(10px);
  transition: border-color .25s var(--ease);
}
.site-header.scrolled { border-color: var(--line); }
.nav-wrap { display: flex; align-items: center; justify-content: space-between; min-height: 88px; gap: 24px; }

.brand { display: flex; align-items: center; min-width: 0; gap: 13px; color: var(--navy); text-decoration: none; }
.brand img { width: 62px; height: 62px; object-fit: contain; }
.brand strong, .brand small { display: block; line-height: 1.1; }
.brand strong { font-size: 17px; letter-spacing: .03em; }
.brand small { margin-top: 3px; color: var(--muted); font-size: 10px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; }

.site-nav, .nav-links { display: flex; align-items: center; gap: 22px; }
.site-nav a { color: var(--navy); font-size: 14.5px; font-weight: 600; text-decoration: none; }
.nav-links a { position: relative; padding: 4px 0; transition: color .2s var(--ease); }
.nav-links a::after {
  position: absolute;
  bottom: 0; left: 0;
  width: 100%; height: 2px;
  background: var(--teal);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .25s var(--ease);
  content: "";
}
.nav-links a:hover, .nav-links a:focus-visible, .nav-links a.active { color: var(--teal); }
.nav-links a:hover::after, .nav-links a.active::after { transform: scaleX(1); }

.nav-cta { padding: 9px 15px; border: 1px solid var(--teal); color: var(--teal) !important; transition: background-color .2s var(--ease), color .2s var(--ease); }
.nav-cta:hover, .nav-cta:focus-visible { background: var(--teal); color: var(--white) !important; }

.menu-toggle { display: none; padding: 9px; border: 0; background: none; cursor: pointer; }
.menu-toggle span { display: block; width: 24px; height: 2px; margin: 5px 0; background: var(--navy); transition: transform .25s var(--ease), opacity .2s var(--ease); }
.menu-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.menu-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.menu-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ---------- Shared type ---------- */

.eyebrow, .section-label, .table-caption, .brief-title, .funding-label {
  margin: 0 0 13px;
  color: var(--teal);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.lead { max-width: 720px; margin: 0; color: var(--muted); font-size: 18px; line-height: 1.55; }

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 46px;
  padding: 11px 20px;
  border: 1px solid transparent;
  /* Every other .button on the page is an <a>; a <button> would otherwise pick
     up the user agent's grey buttonface and not match. */
  background: transparent;
  font-size: 15px;
  font-weight: 650;
  text-decoration: none;
  transition: background-color .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease);
}
.button-primary { border-color: var(--teal); background: var(--teal); color: var(--white); }
.button-primary:hover, .button-primary:focus-visible { border-color: var(--navy); background: var(--navy); }
.button-quiet { border-color: var(--line); color: var(--navy); }
.button-quiet:hover, .button-quiet:focus-visible { border-color: var(--teal); background: var(--pale); color: var(--teal); }
.button-outline { border-color: var(--teal-light); color: var(--white); }
.button-outline:hover, .button-outline:focus-visible { border-color: var(--white); background: var(--white); color: var(--navy); }

/* ---------- Photographic bands ----------
   A quiet aerial wave loop adds maritime movement at the right edge of the hero.
   Open-water texture sits behind the closing call to action and funding panel.
   Type never sits unprotected on a photograph: the hero copy stays on paper,
   while the two navy blocks use a scrim mixed from --navy. Every band keeps its
   flat palette colour as the real background, so one whose image fails to load
   still preserves the layout and contrast.

   The image is laid out taller than its band; app.js drifts it within that
   overhang while the band crosses the viewport. */

.section-media { position: absolute; z-index: 0; inset: 0; overflow: hidden; pointer-events: none; }
/* max-width has to be released here: the global `img` rule would otherwise clamp
   the horizontal overhang to 100% and the drift would slide the photo off its
   own edge. */
.section-media img { position: absolute; inset: -12% -3%; width: 106%; max-width: none; height: 124%; object-fit: cover; }
.section-media::after { position: absolute; inset: 0; content: ""; }

/* The overhang above carries two independent movements: app.js writes the
   scroll drift to `translate`, and this writes a slow set-and-drift to
   `transform`, so the two compose without either having to know about the
   other. One pass takes most of a minute — it reads as atmosphere rather than
   an animation. */
@keyframes backdrop-drift {
  0%, 100% { transform: translate3d(-1.6%, .5%, 0); }
  50% { transform: translate3d(1.6%, -.5%, 0); }
}

/* ---------- Hero ---------- */

.hero { position: relative; overflow: hidden; padding: 76px 0 72px; border-bottom: 1px solid var(--line); background: var(--paper); }
.hero > .container { position: relative; z-index: 1; }
.hero-media { left: 42%; }
.hero-media video {
  position: absolute;
  inset: -4% -3%;
  width: 106%;
  max-width: none;
  height: 108%;
  object-fit: cover;
  object-position: 50% 50%;
  background: var(--navy);
  filter: saturate(.9) hue-rotate(8deg) contrast(1.08) brightness(.9);
}
.hero-media::after {
  background:
    linear-gradient(90deg, var(--paper) 0%, rgba(252, 253, 253, .82) 14%, rgba(252, 253, 253, .1) 53%, rgba(252, 253, 253, 0) 100%),
    linear-gradient(180deg, rgba(9, 60, 80, .01), rgba(9, 60, 80, .1));
}
.hero-grid, .project-intro { display: grid; grid-template-columns: minmax(0, 1fr) minmax(320px, .62fr); align-items: start; gap: 80px; }
.hero-grid > *, .project-intro > * { min-width: 0; }
.source-panel { margin-top: 56px; }
.source-panel dt a { color: var(--teal); text-underline-offset: 3px; }
.section-tint .panel { background: var(--white); }
.hero-copy > .eyebrow { margin-bottom: 18px; }
.intro { max-width: 620px; margin-bottom: 30px; color: var(--body); font-size: 20px; line-height: 1.5; }
.hero-actions, .contact-actions { display: flex; flex-wrap: wrap; gap: 11px; }

.hero-side { display: grid; align-content: start; gap: 18px; }

.contact-card { padding: 22px; border: 1px solid var(--line); background: var(--white); }
.contact-card .brief-title { margin-bottom: 10px; }
.contact-card-line { margin: 0 0 16px; }
.email-copy { position: relative; padding: 0; border: 0; background: transparent; color: var(--navy); cursor: pointer; font-size: 17px; font-weight: 650; text-align: left; text-decoration: underline; text-underline-offset: 4px; }
.email-copy:hover, .email-copy:focus-visible { color: var(--teal); }
.email-copy::after { position: absolute; top: 50%; left: calc(100% + 8px); color: var(--muted); content: "Click to copy"; font-size: 11px; font-weight: 500; opacity: 0; pointer-events: none; text-decoration: none; transform: translate(-3px, -50%); transition: opacity .16s var(--ease), transform .16s var(--ease); white-space: nowrap; }
.email-copy:hover::after, .email-copy:focus-visible::after, .email-copy.is-copied::after { opacity: .72; transform: translate(0, -50%); }
.email-copy.is-copied::after { color: var(--teal); content: "Copied"; }
.contact-card-note { margin: 0; color: var(--muted); font-size: 14.5px; }
.contact-card-note .email-copy { color: inherit; font: inherit; font-weight: 650; }

.render-frame { margin: 0; }
.render-frame img { width: 100%; border: 1px solid var(--line); }
.render-placeholder { display: grid; place-items: center; aspect-ratio: 16 / 10; border: 1px solid var(--line); background: var(--pale); }
.render-placeholder span { color: var(--muted); font-size: 11.5px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
.render-frame figcaption { padding-top: 12px; color: var(--muted); font-size: 13.5px; }

.project-brief { border-top: 3px solid var(--teal); background: rgba(238, 246, 248, .96); }
.project-brief .brief-title { margin: 0; padding: 18px 22px 12px; }
.project-brief dl { margin: 0; }
.project-brief dl > div { padding: 13px 22px; border-top: 1px solid var(--line); }
.project-brief dt { margin-bottom: 3px; color: var(--muted); font-size: 10.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.project-brief dd { margin: 0; color: var(--navy); font-size: 16px; font-weight: 650; line-height: 1.3; }

/* ---------- Metric band ---------- */

/* The key figures already form a full-bleed strip with hard edges top and
   bottom, so the open-water texture can add energy without asking for another
   content block. */
.metric-band { position: relative; overflow: hidden; background: var(--navy); color: #d9ecf0; }
.metric-band > .container { position: relative; z-index: 1; }
.metric-band .section-media img { filter: saturate(1.28) brightness(1.06); }
.metric-band .section-media::after {
  background: linear-gradient(101deg, rgba(9, 60, 80, .8) 12%, rgba(9, 60, 80, .5) 56%, rgba(6, 44, 60, .72) 100%);
}
.metric-grid { display: grid; grid-template-columns: repeat(4, 1fr); }
.metric-grid > div { min-height: 152px; padding: 36px 24px 36px 0; }
.metric-grid > div + div { padding-left: 26px; border-left: 1px solid rgba(112, 194, 205, .3); }
.metric-grid span, .metric-grid strong { display: block; }
.metric-grid span { margin-bottom: 9px; color: var(--teal-pale); font-size: 10.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.metric-grid strong { color: var(--white); font-size: 22px; font-weight: 700; line-height: 1.2; letter-spacing: -.01em; }

/* ---------- Section scaffolding ---------- */

.section { padding: 104px 0; scroll-margin-top: 88px; }
.section-tint {
  border-block: 1px solid var(--line);
  background:
    radial-gradient(ellipse 78% 52% at 8% 2%, rgba(255, 255, 255, .82), transparent 66%),
    radial-gradient(ellipse 65% 54% at 96% 96%, rgba(112, 194, 205, .09), transparent 72%),
    linear-gradient(150deg, #f1f8f9 0%, var(--pale) 52%, #eaf4f6 100%);
}
.section-head { margin-bottom: 52px; padding-bottom: 24px; border-bottom: 1px solid var(--navy); }
.section-head h2 { margin-bottom: 0; }
.section-head .lead { margin-top: 18px; }
.subsection { margin-top: 64px; }

/* ---------- Definition grid ---------- */

.def-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 46px; }
.def-grid > div { padding-top: 20px; border-top: 1px solid var(--line); }
.def-grid h3 { margin-bottom: 6px; color: var(--navy); font-size: 17px; font-weight: 700; }
.def-grid p { margin: 0; color: var(--muted); font-size: 15px; line-height: 1.55; }

/* ---------- Data tables ---------- */

.table-wrap { overflow-x: auto; border: 1px solid var(--line); }
.data-table { width: 100%; min-width: 560px; border-collapse: collapse; font-size: 15px; }
.data-table th, .data-table td { padding: 11px 16px; text-align: left; vertical-align: top; }
.data-table thead { background: var(--navy); }
.data-table thead th { color: var(--white); font-size: 12px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; }
.data-table tbody tr { border-top: 1px solid var(--line-soft); }
.data-table tbody th, .data-table tbody td { color: var(--body); }
.data-table tbody th { color: var(--navy); font-weight: 650; }
.data-table .num { text-align: right; font-variant-numeric: tabular-nums; }
.data-table .row-group th, .data-table .row-group td { background: var(--pale); color: var(--navy); font-weight: 700; }
.row-toggle { display: inline-flex; align-items: center; gap: 9px; width: 100%; padding: 0; border: 0; background: none; color: inherit; font: inherit; font-weight: inherit; text-align: left; cursor: pointer; }
.row-toggle::after { width: 7px; height: 7px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(-45deg) translate(-1px, -2px); transition: transform .2s var(--ease); content: ""; }
.row-toggle[aria-expanded="true"]::after { transform: rotate(45deg) translate(-2px, -2px); }
.row-toggle:hover { color: var(--teal); }
.data-table .row-item { padding-left: 30px; color: var(--muted); }
.data-table tfoot tr { border-top: 2px solid var(--navy); }
.data-table tfoot th, .data-table tfoot td { color: var(--navy); font-weight: 750; }
.table-note { margin: 12px 0 0; color: var(--muted); font-size: 13.5px; }
.table-hint { margin: -6px 0 12px; color: var(--muted); font-size: 14px; }

/* ---------- Delivery schedule / timeline ----------
   One row set serves both views. Switching to the timeline expands the track
   column out of the table rather than swapping in a separate chart, so the
   date and title columns hold their position throughout. */

.head-row { display: flex; align-items: flex-end; justify-content: space-between; flex-wrap: wrap; gap: 20px; }

.view-toggle { display: inline-flex; border: 1px solid var(--line); background: var(--white); }
.view-btn { padding: 8px 15px; border: 0; background: none; color: var(--muted); font-size: 11.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; cursor: pointer; transition: background-color .2s var(--ease), color .2s var(--ease); }
.view-btn + .view-btn { border-left: 1px solid var(--line); }
.view-btn:hover { color: var(--teal); }
.view-btn.is-on { background: var(--navy); color: var(--white); }

.schedule { border-top: 1px solid var(--line); }
.sched-rows { margin: 0; padding: 0; list-style: none; }

.sched-row { display: flex; align-items: center; gap: 20px; height: 62px; overflow: hidden; border-bottom: 1px solid var(--line); transition: height .45s var(--ease), opacity .35s var(--ease); }
.sched-date { flex: 0 0 118px; margin: 0; color: var(--teal); font-size: 13px; font-weight: 700; letter-spacing: .04em; }
.sched-title { flex: 1 1 auto; min-width: 0; margin: 0; color: var(--navy); font-size: 17px; font-weight: 650; letter-spacing: -.01em; transition: font-size .4s var(--ease); }
.sched-track { position: relative; flex: 0 0 0%; height: 100%; opacity: 0; background-image: var(--sched-grid); transition: flex-basis .5s var(--ease), opacity .3s var(--ease); }

.sched-row[data-extra] { height: 0; opacity: 0; border-bottom-color: transparent; }
.sched-row.is-key { background: var(--pale-deep); }
.sched-row.is-key .sched-date { color: var(--navy); }
.sched-head { height: 0; opacity: 0; border-bottom: 0; transition: height .45s var(--ease), opacity .3s var(--ease); }

.schedule[data-view="chart"] .sched-row { height: 46px; }
.schedule[data-view="chart"] .sched-row[data-extra] { opacity: 1; border-bottom-color: var(--line); }
.schedule[data-view="chart"] .sched-title { font-size: 15px; }
.schedule[data-view="chart"] .sched-track { flex-basis: 62%; opacity: 1; }
.schedule[data-view="chart"] .sched-head { height: 30px; opacity: 1; }

.sched-bar {
  position: absolute;
  top: 50%;
  left: calc(var(--s, 0) * 100%);
  width: calc((var(--e, 0) - var(--s, 0)) * 100%);
  height: 13px;
  min-width: 3px;
  margin-top: -6.5px;
  background: var(--teal);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform .55s var(--ease);
  transition-delay: calc(var(--i, 0) * 26ms);
}
.schedule[data-view="chart"] .sched-bar { transform: scaleX(1); }
.sched-bar.is-event { background: var(--navy); }
.sched-bar.is-conditional { background: transparent; border: 1px dashed var(--teal); }
.sched-bar.is-point { width: 12px; min-width: 0; height: 12px; margin: -6px 0 0 -6px; background: var(--navy); transform: rotate(45deg) scale(0); transform-origin: center; }
.schedule[data-view="chart"] .sched-bar.is-point { transform: rotate(45deg) scale(1); }

.sched-axis-label { position: absolute; top: 50%; left: calc(var(--p) * 100%); color: var(--muted); font-size: 11px; font-weight: 700; letter-spacing: .1em; transform: translate(6px, -50%); }

.sched-legend { display: flex; align-items: center; height: 0; margin: 0; overflow: hidden; opacity: 0; color: var(--muted); font-size: 12.5px; transition: height .4s var(--ease), margin .4s var(--ease), opacity .3s var(--ease); }
.schedule[data-view="chart"] .sched-legend { height: 20px; margin-top: 18px; opacity: 1; }
.key-swatch { display: inline-block; width: 16px; height: 8px; margin-right: 8px; background: var(--teal); }
.key-swatch:not(:first-child) { margin-left: 20px; }
.key-swatch.is-event { background: var(--navy); }
.key-swatch.is-conditional { background: transparent; border: 1px dashed var(--teal); }

/* ---------- Team ---------- */

.team-groups { display: grid; gap: 40px; }
.team-group > h3 { margin-bottom: 15px; color: var(--teal); font-size: 12px; font-weight: 700; letter-spacing: .13em; text-transform: uppercase; }
.people-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 34px 40px; }
.person-card { display: grid; grid-template-columns: 58px minmax(0, 1fr); gap: 15px; align-items: start; padding-top: 18px; border-top: 1px solid var(--line); }
.person-body { min-width: 0; }
.person-photo { display: grid; width: 58px; height: 58px; place-items: center; overflow: hidden; background: var(--navy); color: var(--white); font-size: 19px; font-weight: 700; letter-spacing: -.04em; }
.person-photo img { width: 100%; height: 100%; object-fit: cover; }
.person-body h3 { margin-bottom: 2px; font-size: 17px; }
.person-role { margin-bottom: 0; color: var(--teal); font-size: 13.5px; font-weight: 650; line-height: 1.35; }
.person-bio { margin: 9px 0 0; color: var(--muted); font-size: 14px; line-height: 1.45; }
.person-link { display: inline-block; margin-top: 9px; color: var(--navy); font-size: 14px; font-weight: 650; text-underline-offset: 3px; }

.advisor-wrap { margin-top: 52px; padding-top: 30px; border-top: 1px solid var(--line); }
.advisor-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 34px; }
.advisor-card { padding-top: 16px; border-top: 1px solid var(--line); }
.advisor-card h3 { margin: 0; font-size: 16px; }
.advisor-name { color: inherit; text-decoration: none; }
.advisor-name:hover, .advisor-name:focus-visible { color: inherit; text-decoration: none; }
.advisor-card p { margin: 5px 0 0; color: var(--muted); font-size: 13.5px; }

/* ---------- Updates ---------- */

.update-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; }
.update-item { padding-top: 20px; border-top: 2px solid var(--teal); }
.update-item time { display: block; margin-bottom: 11px; color: var(--teal); font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.update-item h3 { font-size: 18px; }
.update-item p { margin-bottom: 0; color: var(--muted); font-size: 15.5px; }
.update-item a { display: inline-block; margin-top: 14px; color: var(--navy); font-size: 14.5px; font-weight: 650; text-underline-offset: 3px; }
.empty-state { margin: 0; padding: 22px; border: 1px dashed var(--line); color: var(--muted); }

/* ---------- Sponsorship ---------- */

.funding-panel {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 40px;
  padding: 32px;
  overflow: hidden;
  background: var(--navy);
  color: #d9ecf0;
}
.funding-panel > :not(.section-media) { position: relative; z-index: 1; }
.funding-panel .section-media img { filter: saturate(1.25) brightness(1.1); }
.funding-panel .section-media::after { background: linear-gradient(103deg, rgba(9, 60, 80, .88) 26%, rgba(9, 60, 80, .62) 100%); }
.funding-panel .funding-label { color: var(--teal-light); }
.funding-figure { margin: 0 0 12px; color: var(--white); font-size: 34px; font-weight: 700; line-height: 1.1; letter-spacing: -.025em; }
.funding-figure span { color: var(--teal-light); font-size: 15px; font-weight: 600; letter-spacing: 0; }
.funding-panel p:last-child { margin: 0; max-width: 620px; font-size: 15.5px; }

.panel { padding: 28px; border: 1px solid var(--line); background: var(--white); }

.lead-in-list { margin: 0; }
.lead-in-list > div + div { margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--line-soft); }
.lead-in-list dt { margin-bottom: 3px; color: var(--navy); font-size: 15.5px; font-weight: 700; }
.lead-in-list dd { margin: 0; color: var(--muted); font-size: 15px; }

.partner-list { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
.partner-item { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 18px; align-items: center; padding: 18px; border: 1px solid var(--line); background: var(--white); transition: border-color .25s var(--ease); }
.partner-item:hover { border-color: var(--teal-light); }
.partner-logo { display: grid; width: 62px; height: 54px; place-items: center; overflow: hidden; background: var(--pale); color: var(--navy); font-size: 14px; font-weight: 700; text-align: center; }
.partner-logo img { width: 100%; height: 100%; padding: 6px; object-fit: contain; }
.partner-tier { display: block; margin-bottom: 5px; color: var(--teal); font-size: 10.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.partner-item h3 { margin-bottom: 3px; font-size: 17px; }
.partner-item p { margin-bottom: 0; color: var(--muted); font-size: 14.5px; }

/* ---------- Contact ---------- */

.contact { position: relative; padding: 76px 0; background: var(--navy); color: #d9ecf0; }
.contact > .container { position: relative; z-index: 1; }
.contact .section-media img { filter: saturate(1.25) brightness(1.1); }
.contact .section-media::after {
  background: linear-gradient(101deg, rgba(9, 60, 80, .86) 18%, rgba(9, 60, 80, .55) 62%, rgba(6, 44, 60, .68) 100%);
}
.contact h2, .contact h3 { color: var(--white); }
.contact .section-label { color: var(--teal-light); }
.contact h2 { margin-bottom: 16px; }
.contact p:not(.section-label) { max-width: 620px; margin-bottom: 0; font-size: 17px; }
.contact-inner { display: flex; align-items: center; justify-content: space-between; gap: 52px; }
.contact-email { margin-top: 18px !important; }
.contact-email span { color: var(--teal-light); font-size: 11.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.contact-email .email-copy { color: var(--white); }
.contact-email .email-copy:hover, .contact-email .email-copy:focus-visible { color: var(--teal-light); }
.contact-email .email-copy::after { color: var(--teal-light); }
.contact .button-primary { border-color: var(--teal); background: var(--teal); }
.contact .button-primary:hover, .contact .button-primary:focus-visible { border-color: var(--white); background: var(--white); color: var(--navy); }

/* ---------- Footer ---------- */

.site-footer { background: var(--navy-deep); color: #b9d6dd; }
.footer-inner { display: flex; align-items: center; justify-content: space-between; min-height: 140px; gap: 30px; padding-block: 28px; font-size: 13px; }
.footer-inner img { width: 190px; height: auto; filter: brightness(0) invert(1); opacity: .9; }
.footer-identity strong, .footer-identity span { display: block; }
.footer-identity strong { color: var(--white); font-size: 15px; }
.footer-identity span { margin-top: 4px; }
.footer-stamp:empty { display: none; }
.footer-stamp { color: #7f9fa9; font-size: 12px; }
.footer-meta { display: flex; align-items: center; gap: 16px; }
.footer-links { display: flex; gap: 14px; }
.footer-links a, .footer-admin { color: var(--teal-light); font-weight: 650; text-underline-offset: 3px; }
.footer-links .footer-social { display: inline-grid; width: 26px; height: 26px; place-items: center; color: var(--teal-light); text-decoration: none; }
.footer-social svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.7; }
.footer-social .social-dot { fill: currentColor; stroke: none; }
.footer-social:hover, .footer-social:focus-visible { color: var(--white); text-decoration: none; }
.footer-admin { padding-left: 16px; border-left: 1px solid rgba(112, 194, 205, .35); color: #7f9fa9 !important; font-size: 11px; font-weight: 500; letter-spacing: .04em; opacity: .65; }
.footer-admin:hover { color: var(--teal-light) !important; }

/* ---------- Privacy notice ----------
   Borrows the project-brief card: teal top rule, square corners, --line border.
   It sits in the bottom corner rather than across the page because it is asking
   a question, not blocking the content behind it. */

.privacy-notice {
  position: fixed;
  z-index: 30;
  bottom: 20px; left: 20px;
  width: min(378px, calc(100% - 40px));
  padding: 20px 22px 22px;
  border: 1px solid var(--line);
  border-top: 3px solid var(--teal);
  background: var(--white);
  box-shadow: 0 14px 38px rgba(9, 60, 80, .16);
}
.privacy-notice .brief-title { margin-bottom: 9px; }
.privacy-copy { margin: 0 0 18px; color: var(--muted); font-size: 14px; line-height: 1.5; }
.privacy-actions { display: flex; flex-wrap: wrap; gap: 10px; }
/* Equal footprint for both answers — the refusal is never the smaller target. */
.privacy-actions .button { flex: 1 1 0; min-height: 42px; padding: 9px 16px; font-size: 14.5px; }

.motion .privacy-notice { opacity: 0; transform: translateY(12px); }
.motion .privacy-notice.is-in { opacity: 1; transform: none; transition: opacity .4s var(--ease), transform .4s var(--ease); }

.footer-privacy {
  padding: 0;
  border: 0;
  background: none;
  color: var(--teal-light);
  font-size: 13px;
  font-weight: 650;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.footer-privacy:hover, .footer-privacy:focus-visible { color: var(--white); }

/* ---------- Motion ----------
   The `motion` class is set by app.js only when the visitor has not
   asked for reduced motion, so content stays visible without JS. */

.motion .reveal { opacity: 0; transform: translateY(14px); }
.motion .reveal.in { opacity: 1; transform: none; transition: opacity .55s var(--ease), transform .55s var(--ease); }

/* Set by app.js only while it is actually driving the backdrops. Without it the
   water is simply still — no drift, and no compositing layer promoted for
   nothing. This is also what keeps the animation out of reduced-motion, which
   the @media block below cannot do on its own since it only stops transitions. */
.parallax .section-media img {
  animation: backdrop-drift 52s ease-in-out infinite;
  will-change: transform, translate;
}

/* Set when the admin turns animations off. Mirrors the reduced-motion block
   below so "off" also covers smooth scrolling and hover transitions. */
.no-motion { scroll-behavior: auto; }
.no-motion * { transition: none !important; }

/* ---------- Responsive ---------- */

@media (max-width: 1040px) {
  .site-nav, .nav-links { gap: 16px; }
  .site-nav a { font-size: 13.5px; }
  .hero-grid, .project-intro { grid-template-columns: 1fr; gap: 44px; }
  .hero-media { left: 40%; opacity: .62; }
  .hero-media::after { background: linear-gradient(90deg, var(--paper) 0%, rgba(252, 253, 253, .86) 38%, rgba(252, 253, 253, .22) 78%, rgba(252, 253, 253, .04) 100%); }
  .def-grid { grid-template-columns: repeat(2, 1fr); }
  .funding-panel { grid-template-columns: 1fr; align-items: start; gap: 26px; }
  .advisor-grid { grid-template-columns: repeat(2, 1fr); }
  .people-grid, .update-grid { grid-template-columns: repeat(2, 1fr); }
  .contact-inner { display: block; }
  .contact-actions { margin-top: 30px; }
}

@media (max-width: 760px) {
  body { font-size: 16px; }
  .container { width: min(calc(100% - 32px), var(--max)); }

  .nav-wrap { min-height: 72px; }
  .brand img { width: 46px; height: 46px; }
  .brand strong { font-size: 15px; }
  .brand small { font-size: 9px; }
  .menu-toggle { display: block; }
  .site-nav {
    position: absolute;
    top: 72px;
    right: 0; left: 0;
    display: none;
    padding: 16px;
    border-bottom: 1px solid var(--line);
    background: var(--paper);
  }
  .site-nav.open { display: grid; gap: 6px; }
  .nav-links { display: grid; gap: 2px; }
  .site-nav a { padding: 10px 4px; font-size: 15px; }
  .nav-links a::after { display: none; }
  .nav-cta { margin-top: 6px; text-align: center; }

  .hero { padding: 48px 0 52px; }
  .hero-media { display: none; }
  h1 { font-size: clamp(36px, 10vw, 48px); }
  h2 { font-size: 29px; }
  .intro { font-size: 18px; }
  .lead { font-size: 16.5px; }

  .metric-grid { grid-template-columns: repeat(2, 1fr); }
  .metric-grid > div { min-height: 0; padding: 18px 16px 18px 0; }
  .metric-grid > div + div { padding-left: 16px; }
  .metric-grid > div:nth-child(odd) { padding-left: 0; border-left: 0; }
  .metric-grid > div:nth-child(n + 3) { border-top: 1px solid rgba(112, 194, 205, .3); }
  .metric-grid strong { font-size: 19px; }

  .section { padding: 58px 0; scroll-margin-top: 72px; }
  .section-head { margin-bottom: 32px; padding-bottom: 20px; }
  .subsection { margin-top: 40px; }

  .def-grid, .people-grid, .advisor-grid, .update-grid { grid-template-columns: 1fr; }
  .def-grid > div { padding: 22px 20px; }

  /* The timeline needs more width than a phone has: let it scroll sideways
     rather than crushing the bars into unreadable slivers. */
  .schedule[data-view="chart"] { overflow-x: auto; }
  .schedule[data-view="chart"] .sched-row { min-width: 600px; }
  .sched-row { gap: 14px; }
  .sched-date { flex-basis: 100px; font-size: 12px; }
  .sched-title { font-size: 16px; }
  .schedule[data-view="chart"] .sched-title { font-size: 14px; }

  .panel, .funding-panel { padding: 24px; }
  .funding-figure { font-size: 29px; }

  .privacy-notice { bottom: 12px; left: 12px; width: calc(100% - 24px); padding: 18px 18px 20px; }

  .contact { padding: 56px 0; }
  .footer-inner { display: grid; justify-items: start; gap: 20px; }
  .footer-inner img { width: 172px; }
  .footer-meta { flex-wrap: wrap; gap: 12px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition: none !important; }
}

@media print {
  .motion .reveal { opacity: 1 !important; transform: none !important; }
  /* (0,2,0) beats the global [hidden] rule, so a collapsed cost table still
     prints in full. */
  .cost-items[hidden] { display: table-row-group !important; }
  .row-toggle::after { display: none; }
  .site-header, .menu-toggle, .skip-link, .hero-actions, .contact-actions, .section-media, .privacy-notice { display: none; }
  /* Printers drop backgrounds, which would leave the metric band's light type
     on white paper. Put it back on the page palette instead. */
  .metric-band { background: none; }
  .metric-grid span { color: var(--muted); }
  .metric-grid strong { color: var(--navy); }
  .metric-grid > div + div { border-left-color: var(--line); }
  body { font-size: 12pt; }
  .section { padding: 24pt 0; }
  .table-wrap { overflow: visible; }
}