/* ===========================================================================
   ProPlug -- site stylesheet

   Everything is driven by the custom properties (the --name: value pairs)
   in the :root block below. Change a color there and it changes everywhere
   on the site. You should not need to hunt through the rest of the file.
   =========================================================================== */

/* ---------------------------------------------------------------------------
   1. DESIGN TOKENS
   ------------------------------------------------------------------------ */
:root {
  /* --- Brand colors. Taken from the corporate reference design. --- */
  --navy:        #16324a;
  --navy-dark:   #0e2233;
  --navy-deep:   #091823;
  --steel:       #5b6b78;
  --steel-dark:  #46545f;   /* passes AA on white for small text */
  --line:        #d4d9de;
  --line-soft:   #e7eaee;
  --surface:     #f4f6f8;
  --white:       #ffffff;
  --ink:         #212a31;

  --accent:      #b23a2e;   /* muted marine red. Buttons and rules. */
  --accent-dark: #8f2e24;   /* hover state */
  --accent-text: #96301f;   /* darker cut for small text on white (AA) */

  --good:        #3c6b32;
  --good-bg:     #e2ecdf;
  --bad-bg:      #f3e3e1;

  /* --- Type --- */
  --font-body: Arial, "Helvetica Neue", Helvetica, sans-serif;
  --font-head: "Arial Narrow", "Helvetica Neue Condensed", "Liberation Sans Narrow",
               Arial, sans-serif;

  --fs-xs:   0.75rem;    /* 12px  eyebrow labels */
  --fs-sm:   0.8125rem;  /* 13px  nav, footer */
  --fs-base: 0.9375rem;  /* 15px  body */
  --fs-md:   1rem;
  --fs-lg:   1.125rem;
  --fs-h3:   1.25rem;
  --fs-h2:   1.75rem;
  --fs-h1:   2.5rem;

  --lh-body: 1.6;
  --lh-head: 1.15;

  /* --- Spacing scale --- */
  --s-1: 0.25rem;
  --s-2: 0.5rem;
  --s-3: 0.75rem;
  --s-4: 1rem;
  --s-5: 1.5rem;
  --s-6: 2rem;
  --s-7: 3rem;
  --s-8: 4rem;
  --s-9: 5.5rem;

  /* --- Layout --- */
  --wrap:      1080px;
  --wrap-wide: 1280px;
  --gutter:    1.5rem;

  --radius: 0;             /* the reference design uses square corners */
  --border: 1px solid var(--line);
  --shadow: 0 1px 3px rgba(14, 34, 51, 0.08);
  --shadow-lg: 0 8px 28px rgba(14, 34, 51, 0.14);

  --focus: 3px solid #1f6feb;
  --focus-offset: 2px;

  --header-h: 76px;
}

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

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  font-family: var(--font-body);
  font-size: var(--fs-base);
  line-height: var(--lh-body);
  color: var(--ink);
  background: var(--white);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5 {
  font-family: var(--font-head);
  line-height: var(--lh-head);
  letter-spacing: 0.01em;
  font-weight: 700;
}
h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); color: var(--navy); }
h3 { font-size: var(--fs-h3); color: var(--navy); }

p { max-width: 68ch; }
p + p { margin-top: var(--s-4); }

a { color: var(--navy); }
a:hover { color: var(--accent-text); }

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

ul, ol { list-style: none; }

/* Visible focus for keyboard users everywhere. */
:focus-visible {
  outline: var(--focus);
  outline-offset: var(--focus-offset);
}

.wrap { max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gutter); }
.wrap-wide { max-width: var(--wrap-wide); margin-inline: auto; padding-inline: var(--gutter); }

/* Text present for screen readers only. */
.visually-hidden {
  position: absolute; width: 1px; height: 1px;
  margin: -1px; padding: 0; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

/* ---------------------------------------------------------------------------
   3. SKIP LINK
   ------------------------------------------------------------------------ */
.skip-link {
  position: absolute; left: var(--s-4); top: -100px; z-index: 200;
  background: var(--accent); color: #fff;
  padding: var(--s-3) var(--s-5);
  font-weight: 700; font-size: var(--fs-sm);
  text-transform: uppercase; letter-spacing: 0.06em;
  text-decoration: none;
  transition: top 0.15s ease;
}
.skip-link:focus { top: var(--s-4); color: #fff; }

/* ---------------------------------------------------------------------------
   4. UTILITY BAR
   ------------------------------------------------------------------------ */
.utilbar {
  background: var(--navy-dark);
  color: #c3d0da;
  font-size: var(--fs-xs);
}
.utilbar .wrap-wide {
  display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-5);
  justify-content: space-between; align-items: center;
  padding-block: var(--s-2);
}
.utilbar a { color: #c3d0da; text-decoration: none; }
.utilbar a:hover { color: #fff; text-decoration: underline; }
.utilbar__meta { display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-4); }

/* ---------------------------------------------------------------------------
   5. HEADER AND NAVIGATION
   ------------------------------------------------------------------------ */
.header {
  background: var(--white);
  border-bottom: 3px solid var(--navy);
  position: relative;
  z-index: 100;
}
.header__inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--s-5);
  padding-block: var(--s-4);
}
.brand { display: flex; align-items: center; text-decoration: none; flex-shrink: 0; }
.brand img { width: 132px; height: auto; }

/* --- The mobile menu button. Hidden until the JS flag is set (see below),
       so that with JavaScript off the full menu is simply always visible. --- */
.nav-toggle { display: none; }
.js .nav-toggle {
  display: none;                     /* shown only at narrow widths, see @media */
  align-items: center; gap: var(--s-2);
  background: var(--navy); color: #fff; border: 0;
  font: 700 var(--fs-sm)/1 var(--font-body);
  text-transform: uppercase; letter-spacing: 0.08em;
  padding: var(--s-3) var(--s-4);
  cursor: pointer;
}
.nav-toggle__bars { display: block; width: 18px; height: 2px; background: #fff; position: relative; }
.nav-toggle__bars::before,
.nav-toggle__bars::after {
  content: ""; position: absolute; left: 0; width: 18px; height: 2px; background: #fff;
}
.nav-toggle__bars::before { top: -6px; }
.nav-toggle__bars::after  { top: 6px; }

.nav > ul {
  display: flex; flex-wrap: wrap; align-items: center; gap: 2px;
}
.nav a, .nav__button {
  display: block;
  padding: var(--s-3) var(--s-4);
  font: 700 var(--fs-sm)/1.2 var(--font-body);
  text-transform: uppercase; letter-spacing: 0.05em;
  color: var(--navy); text-decoration: none;
  background: none; border: 0; cursor: pointer;
  white-space: nowrap;
}
.nav a:hover, .nav__button:hover { background: var(--surface); color: var(--navy); }
.nav a[aria-current="page"] { box-shadow: inset 0 -3px 0 var(--accent); }
.nav .cta { background: var(--accent); color: #fff; }
.nav .cta:hover { background: var(--accent-dark); color: #fff; }

/* --- Drop-down menus ---
   These open on hover, and on keyboard focus (:focus-within), so they work
   with no JavaScript at all. JavaScript only adds click-to-open and Escape. */
.nav__item { position: relative; }
.nav__button { display: inline-flex; align-items: center; gap: 6px; }
.nav__caret { width: 8px; height: 8px; border-right: 2px solid currentColor;
              border-bottom: 2px solid currentColor; transform: rotate(45deg) translate(-2px, -2px); }

.nav__menu {
  position: absolute; top: 100%; left: 0; min-width: 250px;
  background: var(--white);
  border: var(--border); border-top: 3px solid var(--accent);
  box-shadow: var(--shadow-lg);
  padding: var(--s-2) 0;
  display: none;
}
.nav__item:hover > .nav__menu,
.nav__item:focus-within > .nav__menu,
.nav__item > .nav__menu[data-open="true"] { display: block; }

.nav__menu a {
  text-transform: none; letter-spacing: 0;
  font-weight: 400; font-size: var(--fs-base);
  padding: var(--s-2) var(--s-5);
  white-space: normal;
}
.nav__menu a:hover { background: var(--surface); }
.nav__menu .nav__outlet {
  display: block; font-size: var(--fs-xs); font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.1em; color: var(--steel-dark);
}

/* ---------------------------------------------------------------------------
   6. SECTIONS
   ------------------------------------------------------------------------ */
.section { padding-block: var(--s-8); }
.section--tight { padding-block: var(--s-7); }
.section--alt {
  background: var(--surface);
  border-block: 1px solid var(--line);
}

.section__label {
  font-size: var(--fs-xs); font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.18em;
  color: var(--accent-text);
  margin-bottom: var(--s-2);
}
.section__title { margin-bottom: var(--s-3); }
.section__intro { color: var(--steel-dark); max-width: 62ch; margin-bottom: var(--s-6); }
.section__head { margin-bottom: var(--s-6); }

/* ---------------------------------------------------------------------------
   7. BUTTONS
   ------------------------------------------------------------------------ */
.btn {
  display: inline-block;
  padding: var(--s-3) var(--s-6);
  font: 700 var(--fs-sm)/1.3 var(--font-body);
  text-transform: uppercase; letter-spacing: 0.08em;
  text-decoration: none; border: 2px solid transparent;
  cursor: pointer;
}
.btn--primary { background: var(--accent); border-color: var(--accent); color: #fff; }
.btn--primary:hover { background: var(--accent-dark); border-color: var(--accent-dark); color: #fff; }
.btn--ghost { border-color: currentColor; color: #fff; }
.btn--ghost:hover { background: rgba(255,255,255,0.15); color: #fff; }
.btn--navy { background: var(--navy); border-color: var(--navy); color: #fff; }
.btn--navy:hover { background: var(--navy-dark); border-color: var(--navy-dark); color: #fff; }

.btn-row { display: flex; flex-wrap: wrap; gap: var(--s-3); margin-top: var(--s-5); }

/* An inline "read more" style link with an arrow. */
.arrow-link {
  display: inline-block; margin-top: var(--s-5);
  font-weight: 700; font-size: var(--fs-sm);
  text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--navy); text-decoration: none;
  border-bottom: 2px solid var(--accent);
  padding-bottom: 2px;
}
.arrow-link::after { content: " \2192"; }
.arrow-link:hover { color: var(--accent-text); }

/* ---------------------------------------------------------------------------
   8. HERO
   ------------------------------------------------------------------------ */
.hero { position: relative; background: var(--navy-dark); color: #fff; overflow: hidden; }
.hero__media { position: absolute; inset: 0; }
.hero__media img { width: 100%; height: 100%; object-fit: cover; object-position: 55% 50%; }
.hero__media::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(100deg,
              rgba(9,24,35,0.90) 0%,
              rgba(9,24,35,0.78) 42%,
              rgba(9,24,35,0.35) 78%,
              rgba(9,24,35,0.22) 100%);
}
.hero__inner { position: relative; padding-block: var(--s-9); }
.hero__kicker {
  font-size: var(--fs-xs); font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.2em;
  color: #ffcfc7; margin-bottom: var(--s-3);
}
.hero h1 { max-width: 26ch; }
.hero__text { font-size: var(--fs-lg); max-width: 46ch; margin-top: var(--s-4); color: #dbe4ec; }
.hero .btn-row { margin-top: var(--s-6); }

/* ---------------------------------------------------------------------------
   9. PAGE HEADER (inner pages)
   ------------------------------------------------------------------------ */
.pagehead { position: relative; background: var(--navy-dark); color: #fff; overflow: hidden; }
.pagehead__media { position: absolute; inset: 0; }
.pagehead__media img { width: 100%; height: 100%; object-fit: cover; }
.pagehead__media::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(9,24,35,0.90) 0%, rgba(9,24,35,0.62) 100%);
}
.pagehead__inner { position: relative; padding-block: var(--s-7); }
.pagehead h1 { font-size: 2.125rem; }

.crumbs { font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: 0.14em;
          margin-bottom: var(--s-3); color: #b8c7d3; }
.crumbs ol { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.crumbs li:not(:last-child)::after { content: "/"; margin-left: var(--s-2); color: #7d919f; }
.crumbs a { color: #b8c7d3; text-decoration: none; }
.crumbs a:hover { color: #fff; text-decoration: underline; }

/* ---------------------------------------------------------------------------
   10. COMPARISON CARDS
   ------------------------------------------------------------------------ */
.compare { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-6); }
.card { background: var(--white); border: var(--border); display: flex; flex-direction: column; }
.card__media { aspect-ratio: 16 / 9; overflow: hidden; border-bottom: var(--border); }
.card__media img { width: 100%; height: 100%; object-fit: cover; }
.card__body { padding: var(--s-5); }
.card__tag {
  display: inline-block; font-size: var(--fs-xs); font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.08em;
  padding: 3px var(--s-3); margin-bottom: var(--s-3);
}
.card__tag--bad  { background: var(--bad-bg);  color: var(--accent-text); }
.card__tag--good { background: var(--good-bg); color: var(--good); }
.card h3 { text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: var(--s-3); }

.ticklist li {
  position: relative; padding: var(--s-3) 0 var(--s-3) var(--s-6);
  border-bottom: 1px solid var(--line-soft);
}
.ticklist li:last-child { border-bottom: 0; padding-bottom: 0; }
.ticklist li::before {
  position: absolute; left: 0; top: var(--s-3); font-weight: 700; font-size: 1rem;
}
.ticklist--bad  li::before { content: "\2715"; color: var(--accent-text); }
.ticklist--good li::before { content: "\2713"; color: var(--good); }

/* ---------------------------------------------------------------------------
   11. SPLIT / FEATURE ROWS
   ------------------------------------------------------------------------ */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-7); align-items: center; }
.split__media img { width: 100%; border: var(--border); }
.split--reverse .split__media { order: 2; }

/* ---------------------------------------------------------------------------
   11b. OUR MISSION PAGE
   An opening statement, then four numbered parts. The photograph and the
   text sit on the same content grid as every other page, so the left edge
   of the text lines up all the way down. The alternating background gives
   the page rhythm without moving anything off the grid.
   ------------------------------------------------------------------------ */

/* --- Opening statement, directly under the dark page title band --- */
.lead {
  background: var(--surface);
  border-bottom: 1px solid var(--line);
  padding-block: var(--s-7);
}
.lead__text {
  font-family: var(--font-head);
  font-size: 1.625rem; line-height: 1.3; font-weight: 700;
  color: var(--navy);
  max-width: 52ch;
}

/* --- The numbered parts --- */
.mission { padding-block: var(--s-8); }
.mission--alt { background: var(--surface); border-block: 1px solid var(--line); }

.mission__row {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: var(--s-8); align-items: center;
}
.mission__row--reverse .mission__figure { order: 2; }

/* The photograph, with a thin accent outline offset behind it. The offset
   runs into the gap between the columns, so it never reaches the edge of
   the screen. */
.mission__figure { position: relative; }
.mission__figure img {
  position: relative; z-index: 1;
  width: 100%; aspect-ratio: 4 / 3; object-fit: cover;
}
/* A solid navy block sitting behind the photograph and peeking out at the
   bottom and along the inner edge. The offset only ever runs into the gap
   between the two columns, so it cannot reach the edge of the screen. */
.mission__figure::after {
  content: ""; position: absolute; z-index: 0;
  top: var(--s-5); bottom: calc(var(--s-5) * -1);
  left: var(--s-5); right: calc(var(--s-5) * -1);
  background: var(--navy);
}
.mission__row--reverse .mission__figure::after {
  left: calc(var(--s-5) * -1); right: var(--s-5);
}

/* The 01 / 02 / 03 marker: a small filled square in the brand red with the
   number reversed out of it. Sits above the heading, clear of it. */
.mission__body { position: relative; }
.mission__num {
  display: grid; place-items: center;
  width: 3rem; height: 3rem;
  background: var(--accent); color: #fff;
  font-family: var(--font-head);
  font-size: 1.375rem; font-weight: 700; line-height: 1;
  margin-bottom: var(--s-4);
}

.mission__title {
  position: relative;
  font-size: 2.125rem; color: var(--navy);
  padding-bottom: var(--s-4);
  margin-bottom: var(--s-4);
}
.mission__title::after {
  content: ""; position: absolute; left: 0; bottom: 0;
  width: 64px; height: 3px; background: var(--line);
}
.mission__body p:not(.mission__num) { font-size: var(--fs-md); max-width: 46ch; }

/* ---------------------------------------------------------------------------
   12. PROGRAM / BURGEE GRID
   ------------------------------------------------------------------------ */
/* Flex rather than grid, because the number of clubs is not a round number.
   A grid would leave a ragged gap on the last row; flex with centering
   leaves the leftover cards centered under the ones above. Change the
   divisor in `width` to show more or fewer per row. */
.programs {
  display: flex; flex-wrap: wrap; gap: var(--s-4); justify-content: center;
}
.program {
  width: calc((100% - 3 * var(--s-4)) / 4);
  background: var(--white); border: var(--border);
  display: flex; flex-direction: column; text-align: center;
}
.program__media {
  aspect-ratio: 4 / 3; display: grid; place-items: center;
  padding: var(--s-5); background: var(--white);
}
.program__media img { max-height: 100%; width: auto; object-fit: contain; }
.program__name {
  border-top: var(--border); padding: var(--s-3) var(--s-2);
  font-family: var(--font-head); font-size: var(--fs-xs); font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.06em; color: var(--navy);
  margin-top: auto;
  /* Room for two lines, so the dividing rule sits at the same height on
     every card even when a club name wraps. */
  min-height: 3.9em; display: grid; align-content: center;
}

/* ---------------------------------------------------------------------------
   13. COLOR BAND
   ------------------------------------------------------------------------ */
.colorband__head {
  display: grid; grid-template-columns: 320px 1fr;
  gap: var(--s-7); align-items: end;
  margin-bottom: var(--s-5);
}
.colorband__head .section__title { margin-bottom: 0; }
.colorband__media { border: var(--border); }
.colorband__media img { width: 100%; }
@media (max-width: 900px) {
  .colorband__head { grid-template-columns: 1fr; gap: var(--s-4); align-items: start; }
}

/* A run of paragraphs with no image beside them. The heading sits in a left
   rail and the text beside it, so a short statement fills the page width
   instead of leaving a large empty band on the right. */
.prose-block { display: grid; grid-template-columns: 320px 1fr; gap: var(--s-7); }
.prose-block .section__title { margin-bottom: 0; }
@media (max-width: 900px) {
  .prose-block { grid-template-columns: 1fr; gap: var(--s-4); }
}

/* ---------------------------------------------------------------------------
   14. PRESS LIST
   ------------------------------------------------------------------------ */
.press-list { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--s-4); }
.press-item { border: var(--border); background: var(--white); }

/* The link fills the whole card, so the entire card is the click target. */
.press-item__link {
  display: block; height: 100%;
  padding: var(--s-4) var(--s-5);
  text-decoration: none; color: var(--navy);
  border-left: 3px solid transparent;
  transition: background 0.15s ease, border-color 0.15s ease;
}
.press-item__link:hover,
.press-item__link:focus-visible {
  background: var(--surface);
  border-left-color: var(--accent);
  color: var(--navy);
}
.press-item__link:hover .press-item__title { text-decoration: underline; }

.press-item__outlet {
  display: block; font-size: var(--fs-xs); font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.1em; color: var(--steel-dark);
  margin-bottom: var(--s-1);
}
.press-item__title { display: block; font-weight: 700; }
.press-item__title::after { content: " \2197"; color: var(--accent-text); }

/* ---------------------------------------------------------------------------
   15. PERSON
   ------------------------------------------------------------------------ */
.person { display: grid; grid-template-columns: 400px 1fr; gap: var(--s-7); align-items: start; }
/* The headshot is a wide photograph. Cropping it to an upright rectangle in
   the browser gives it more presence beside the text without needing a
   separately cropped file. */
.person__media img {
  width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: center 30%;
  border: var(--border);
}
.person__name { font-size: var(--fs-h2); color: var(--navy); }
.person__role {
  font-size: var(--fs-xs); font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.16em; color: var(--accent-text);
  margin-bottom: var(--s-4);
}

/* ---------------------------------------------------------------------------
   16. VIDEO
   ------------------------------------------------------------------------ */
.video-frame {
  position: relative; aspect-ratio: 16 / 9;
  background: var(--navy-dark); border: var(--border); margin-top: var(--s-5);
}
.video-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* ---------------------------------------------------------------------------
   17. CONTACT
   ------------------------------------------------------------------------ */
.contact-grid { display: grid; grid-template-columns: 1.4fr 1fr; gap: var(--s-7); align-items: start; }
.form-frame { border: var(--border); background: var(--white); }
/* The contact form is a Google Form in an iframe. Because it is served from
   another domain we cannot measure it, so the height is set by hand. If you
   add or remove questions from the form, adjust these two numbers. */
.form-frame iframe { width: 100%; min-height: 830px; border: 0; display: block; }

.info-card { background: var(--surface); border: var(--border); padding: var(--s-5); }
.info-card h3 { margin-bottom: var(--s-4); }
.info-card dt {
  font-size: var(--fs-xs); font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.1em; color: var(--steel-dark); margin-top: var(--s-4);
}
.info-card dt:first-of-type { margin-top: 0; }
.info-card dd { margin-top: var(--s-1); }
.info-card address { font-style: normal; }

/* ---------------------------------------------------------------------------
   18. CTA BAND
   ------------------------------------------------------------------------ */
.cta { position: relative; background: var(--navy-deep); color: #fff; overflow: hidden; }
.cta__media { position: absolute; inset: 0; }
.cta__media img { width: 100%; height: 100%; object-fit: cover; }
.cta__media::after { content: ""; position: absolute; inset: 0; background: rgba(9,24,35,0.78); }
.cta__inner { position: relative; padding-block: var(--s-7); text-align: center; }
.cta h2 { color: #fff; }
.cta p { color: #cfdae4; margin-inline: auto; margin-top: var(--s-3); }
.cta .btn-row { justify-content: center; }

/* ---------------------------------------------------------------------------
   19. FOOTER
   ------------------------------------------------------------------------ */
.footer { background: var(--navy-dark); color: #b3c1cd; font-size: var(--fs-sm); }
.footer__grid {
  display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: var(--s-6);
  padding-block: var(--s-7);
}
.footer h2, .footer h3 {
  color: #fff; font-size: var(--fs-xs);
  text-transform: uppercase; letter-spacing: 0.14em; margin-bottom: var(--s-4);
}
.footer a { color: #b3c1cd; text-decoration: none; }
.footer a:hover { color: #fff; text-decoration: underline; }
.footer li a { display: block; padding-block: 3px; }
.footer__brand img { width: 118px; margin-bottom: var(--s-4); }
.footer address { font-style: normal; }
.footer__social { display: flex; gap: var(--s-4); margin-top: var(--s-4); }
.footer__legal {
  border-top: 1px solid #26405a; padding-block: var(--s-4);
  font-size: var(--fs-xs); color: #8b9dab;
  display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-4); justify-content: space-between;
}

/* ---------------------------------------------------------------------------
   20. 404
   ------------------------------------------------------------------------ */
.notfound { padding-block: var(--s-9); text-align: center; }
.notfound ul { display: flex; flex-wrap: wrap; gap: var(--s-3); justify-content: center; margin-top: var(--s-6); }
.notfound li a {
  display: block; border: var(--border); padding: var(--s-3) var(--s-5);
  text-decoration: none; font-weight: 700; font-size: var(--fs-sm);
  text-transform: uppercase; letter-spacing: 0.06em;
}
.notfound li a:hover { background: var(--surface); }

/* ---------------------------------------------------------------------------
   21. RESPONSIVE
   ------------------------------------------------------------------------ */
@media (max-width: 1000px) {
  .program { width: calc((100% - 2 * var(--s-4)) / 3); }
  .person { grid-template-columns: 300px 1fr; }
}

@media (max-width: 900px) {
  :root { --fs-h1: 2rem; --fs-h2: 1.5rem; }

  /* --- Mobile navigation ---
     With JavaScript on, the menu collapses behind the Menu button.
     With JavaScript off (.js is never added), the menu stays open and every
     link remains reachable. */
  .js .nav-toggle { display: inline-flex; }

  /* With JavaScript off there is no Menu button, so the full list drops onto
     its own row underneath the logo rather than squeezing in beside it. */
  .header__inner { flex-wrap: wrap; }
  .nav { flex: 1 1 100%; }

  .js .nav {
    display: none;
    position: absolute; left: 0; right: 0; top: 100%;
    background: var(--white);
    border-bottom: 3px solid var(--navy);
    box-shadow: var(--shadow-lg);
    max-height: calc(100vh - var(--header-h));
    overflow-y: auto;
  }
  .js .nav[data-open="true"] { display: block; }

  .nav > ul { flex-direction: column; align-items: stretch; gap: 0; }
  .nav > ul > li { border-top: 1px solid var(--line-soft); }
  .nav a, .nav__button { width: 100%; padding: var(--s-4) var(--gutter); text-align: left; }
  .nav__button { justify-content: space-between; }
  .nav .cta { text-align: center; }

  /* Sub-menus become plain indented lists rather than floating panels. */
  .nav__menu {
    position: static; display: block; min-width: 0;
    border: 0; border-top: 1px solid var(--line-soft);
    box-shadow: none; background: var(--surface); padding: var(--s-2) 0;
  }
  .js .nav__menu { display: none; }
  .js .nav__item > .nav__menu[data-open="true"] { display: block; }
  .js .nav__item:hover > .nav__menu { display: none; }
  .js .nav__item:focus-within > .nav__menu { display: block; }
  .nav__menu a { padding-left: calc(var(--gutter) + var(--s-4)); }

  .compare, .split, .contact-grid, .press-list { grid-template-columns: 1fr; }
  .split--reverse .split__media { order: 0; }

  /* Mission parts stack: photograph on top, text underneath, every time.
     The offset outline is dropped because there is no column gap left for
     it to sit in. */
  .mission__row { grid-template-columns: 1fr; gap: var(--s-5); }
  .mission__row--reverse .mission__figure { order: 0; }
  .mission__figure::after { display: none; }
  .mission__figure img { aspect-ratio: 16 / 10; }
  .mission__title { font-size: 1.625rem; }
  .mission__num { width: 2.5rem; height: 2.5rem; font-size: 1.125rem; }
  .mission__body p:not(.mission__num) { max-width: none; }
  .lead__text { font-size: 1.25rem; max-width: none; }
  .person { grid-template-columns: 1fr; gap: var(--s-5); }
  .person__media { max-width: 340px; }
  .footer__grid { grid-template-columns: 1fr 1fr; }
  .hero__inner { padding-block: var(--s-8); }
  .hero__media::after {
    background: linear-gradient(180deg, rgba(9,24,35,0.72) 0%, rgba(9,24,35,0.88) 100%);
  }
  .form-frame iframe { min-height: 1120px; }
}

@media (max-width: 620px) {
  :root { --gutter: 1.125rem; --fs-h1: 1.75rem; --s-8: 2.75rem; --s-9: 3.5rem; }
  .program { width: calc((100% - var(--s-4)) / 2); }
  .footer__grid { grid-template-columns: 1fr; gap: var(--s-5); }
  .utilbar .wrap-wide { justify-content: flex-start; }
  .btn { width: 100%; text-align: center; }
  .btn-row { flex-direction: column; }
  .notfound li a { width: 100%; }
}

/* Only drop the burgees to a single column on very narrow phones. Two
   columns reads better and keeps the page from getting extremely long. */
@media (max-width: 340px) {
  .program { width: 100%; }
}

/* ---------------------------------------------------------------------------
   22. MOTION AND PRINT
   ------------------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

@media print {
  .utilbar, .nav-toggle, .nav, .cta, .skip-link { display: none !important; }
  body { font-size: 11pt; color: #000; }
  .hero__media, .pagehead__media { display: none; }
  .hero, .pagehead { background: none; color: #000; }
  .hero h1, .pagehead h1 { color: #000; }
}