/* =====================================================================
   STYLESHEET
   Tokens, reset, shared components (buttons, container), site header
   with dropdown menus, and page sections.
   Breakpoints: 768 (container), 992 (desktop nav), 1200 (wide desktop).
   ===================================================================== */


/* =========================================================
   TOKENS
   ========================================================= */
:root{
  /* Brand */
  --blue: #021EF1;              /* primary: buttons, links, labels */
  --blue-dark: #01107F;         /* primary hover */
  --blue-light: #AEBBFF;        /* primary tint for hover states on dark photo backgrounds */
  --red: #FF0D01;               /* accent: decorative only, fails AA as small text on white */
  --red-text: #D10A00;          /* red for small text on white: passes AA */
  --blue-deep: #0114A6;
  --red-deep: #A80800;
  /* Gradient fills for buttons and badges. The fill is wider than the element, so
     hover slides it toward the dark end instead of swapping colors. */
  --fill-blue: linear-gradient(120deg, var(--blue) 0%, var(--blue-deep) 50%, var(--blue-dark) 100%) 0 0 / 220% 100% border-box;
  --fill-blue-hover: linear-gradient(120deg, var(--blue) 0%, var(--blue-deep) 50%, var(--blue-dark) 100%) 100% 0 / 220% 100% border-box;
  /* Gradient accent bars: x for horizontal edges, y for vertical edges */
  --bar-blue-x: linear-gradient(to right, var(--blue), var(--blue-deep));
  --bar-blue-y: linear-gradient(to bottom, var(--blue), var(--blue-deep));
  --bar-red-x: linear-gradient(to right, var(--red), var(--red-deep));
  --bar-red-y: linear-gradient(to bottom, var(--red), var(--red-deep));

  /* Surfaces */
  --bg: #F1F4F5;                /* page background, tinted panels */
  --surface: #FAFBFC;           /* near-white section background */
  --white: #FFFFFF;

  /* Text */
  --ink: #000000;               /* headings */
  --ink-soft: #5B6369;          /* body text, secondary links */

  /* Lines */
  --rule: #C1C3C4;
  --rule-soft: #F1F4F5;

  /* Type. The fallback faces are metric-matched to limit font-swap layout shift. */
  --sans: "Figtree", "Figtree Fallback", Arial, sans-serif;

  /* Layout */
  --container: 1090px;
  --gutter: 15px;
  /* Where side panels stick while scrolling: just below the fixed header */
  --sticky-top: 120px;
}
@media (min-width: 1200px){
  :root{
    --container: 1290px;
    --sticky-top: 154px;
  }
}

@font-face{
  font-family: "Figtree Fallback";
  src: local("Arial");
  font-weight: 400;
  size-adjust: 101.2%;
}
@font-face{
  font-family: "Figtree Fallback";
  src: local("Arial Bold"), local("Arial-BoldMT"), local("Arial");
  font-weight: 600 700;
  size-adjust: 95.9%;
}


/* =========================================================
   RESET / BASE
   ========================================================= */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--sans);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.5;
  color: var(--ink-soft);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
body.nav-open { overflow: hidden; }
img, picture, svg { display: block; max-width: 100%; }
button { font: inherit; cursor: pointer; }
a { color: var(--blue); text-decoration: none; }
a:hover, a:focus { color: #222; text-decoration: underline; }
h1, h2, h3, h4, h5, h6 {
  margin: 0;
  font-family: var(--sans);
  font-weight: 700;
  line-height: 1.2;
  color: var(--ink);
}
p {
  margin: 0 0 24px;
  font-size: clamp(15px, calc(15px + 3 * (100vw - 320px) / 1010), 18px);
  line-height: clamp(24px, calc(24px + 8 * (100vw - 320px) / 1010), 32px);
}
ul { margin: 0; padding: 0; list-style: none; }
:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }

.skip-link {
  position: absolute;
  left: 8px;
  top: -60px;
  z-index: 200;
  padding: 10px 16px;
  background: var(--white);
  color: var(--blue);
  font-weight: 700;
}
.skip-link:focus { top: 8px; }


/* =========================================================
   SHARED COMPONENTS
   ========================================================= */
.container {
  position: relative;
  display: block;
  margin-right: auto;
  margin-left: auto;
}
@media (min-width: 768px){
  .container { max-width: var(--container); }
}

.button {
  display: inline-block;
  padding: 12px 25px 9px;
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: .6px;
  text-align: center;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--white);
  background: var(--fill-blue);
  border: 1px solid transparent;
  border-radius: 0;
  transition: all .3s ease-in-out;
}
.button:hover, .button:focus {
  color: var(--white);
  background: var(--fill-blue-hover);
  border-color: transparent;
  text-decoration: none;
}

/* Uppercase letterspaced label */
.eyebrow, .category {
  font-weight: 600;
  letter-spacing: 2px;
  text-transform: uppercase;
}


/* =========================================================
   SITE HEADER
   Transparent over the hero, then a white bar with the full-color
   logo once the page is scrolled. Below 992px it is a sticky bar
   with a full-screen menu behind a round toggle; from 992px it is
   fixed, with inline nav.
   ========================================================= */
.site-header {
  position: sticky;
  top: 0;
  left: 0;
  right: 0;
  z-index: 10;
  padding: 8px 15px;
  background: transparent;
  box-shadow: 2px 0 56px -9px transparent;
  transition: all .4s ease;
}
.site-header.is-scrolled {
  /* Just short of solid, with a light blur so content passing underneath stays soft */
  background: rgba(255,255,255,.94);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  box-shadow: 0 1px 5px rgba(0,0,0,.2);
}

.brand {
  display: flex;
  align-items: center;
  height: 60px;
}
/* Both logos are stacked in one box so they can cross-fade, and the box
   itself changes size, so the swap and the resize animate together. */
.brand a {
  position: relative;
  display: block;
  width: 85px;
  height: 60px;
  transition: width .4s ease, height .4s ease, transform .2s ease;
}
.brand img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  transition: opacity .4s ease;
}
/* White mark over the hero, full-color mark once the bar turns white */
.brand .logo-color { opacity: 0; }
.site-header.is-scrolled .logo-white { opacity: 0; }
.site-header.is-scrolled .logo-color { opacity: 1; }

/* Menu toggle */
.menu-toggle {
  position: absolute;
  top: 8px;
  right: 0;
  z-index: 15;
  /* Flex column so the bars start at the top padding edge instead of being centered by the button */
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  width: 44px;
  height: 44px;
  padding: 19px 9px 9px;
  background: transparent;
  border: 0;
}
.menu-toggle .bar {
  position: relative;
  display: block;
  width: 26px;
  height: 2px;
  margin: 0 auto;
  background: var(--white);
  transition: .2s ease all;
}
.menu-toggle .bar--top { transform: translateY(-5px); }
.menu-toggle .bar--bottom { transform: translateY(5px); }
/* Dark lines once the bar is white, and on the open menu's white panel */
.site-header.is-scrolled .menu-toggle .bar { background: var(--ink); }
.menu-toggle[aria-expanded="true"] .bar { background: var(--ink); }
.menu-toggle[aria-expanded="true"] .bar--top { left: 1.5px; transform: rotate(45deg) translateY(3px); }
.menu-toggle[aria-expanded="true"] .bar--middle { opacity: 0; }
.menu-toggle[aria-expanded="true"] .bar--bottom { left: 1.5px; transform: rotate(-45deg) translateY(-3px); }

/* Nav wrapper: full-screen panel on small screens */
.nav-wrap {
  display: none;
  position: absolute;
  width: 100vw;
  height: 100%;
  background: var(--white);
}
.nav-wrap.is-open {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  position: fixed;
  top: 0;
  left: 0;
  padding-top: 76px;
  padding-bottom: 65px;
  overflow-y: scroll;
}

/* Utility links */
.utility-nav {
  display: block;
  padding: 20px 0;
  text-align: left;
}
.utility-nav a {
  display: block;
  padding: 12px 15px;
  font-size: 14px;
  line-height: 1.5;
  color: var(--ink-soft);
  text-decoration: underline;
  text-decoration-color: transparent;
  transition: text-decoration-color .4s ease-in-out;
}
.utility-nav a:hover, .utility-nav a:focus { text-decoration-color: inherit; }

/* Primary nav */
.main-nav {
  order: -1;
  width: 100%;
}
.primary-menu { border-top: 1px solid var(--rule); }
.nav-toggle, .nav-link {
  display: block;
  width: 100%;
  padding: 20px 15px;
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 700;
  line-height: 20px;
  letter-spacing: .6px;
  text-align: left;
  text-transform: uppercase;
  color: var(--ink);
  background: none;
  border: 0;
  border-bottom: 1px solid var(--rule);
  border-radius: 0;
  transition: color .25s ease-in-out;
}
.nav-toggle:hover, .nav-toggle:focus, .nav-link:hover, .nav-link:focus { color: var(--blue); text-decoration: none; }
/* Small chevron that flips when the menu is open */
.nav-toggle::after {
  content: "";
  display: inline-block;
  width: 7px;
  height: 7px;
  margin: 0 0 3px 10px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg);
  transition: transform .25s ease;
}
.nav-toggle[aria-expanded="true"]::after { transform: rotate(-135deg) translate(-3px, -3px); }

/* Dropdown: inline accordion on small screens */
.dropdown {
  display: none;
  padding: 8px 0 12px;
  background: var(--bg);
}
.dropdown.is-open { display: block; }
.dropdown a {
  display: block;
  padding: 10px 15px 10px 28px;
  font-size: 16px;
  line-height: 22px;
  color: var(--ink-soft);
  text-decoration: none;
}
.dropdown a:hover, .dropdown a:focus { color: var(--blue); }

/* Call to action: pinned to the bottom of the open menu */
.extra-buttons {
  position: fixed;
  bottom: 0;
  left: 0;
  display: flex;
  justify-content: center;
  width: 100%;
  padding: 10px 0;
  background: var(--white);
  border-top: 1px solid var(--rule-soft);
}

@media (min-width: 992px){
  /* Fixed over the page so it can change height on scroll without moving the content */
  .site-header {
    position: fixed;
    --logo-h: 80px;
  }

  .header-inner { display: flex; }
  .menu-toggle { display: none; }

  .brand {
    flex: 0 0 150px;
    height: auto;
  }
  .brand a {
    width: 113px;
    height: 80px;
  }
  .brand a:hover, .brand a:focus { transform: scale(1.05); }

  .nav-wrap, .nav-wrap.is-open {
    display: block;
    position: static;
    flex: 1;
    width: auto;
    height: auto;
    padding: 0;
    overflow: visible;
    background: none;
  }

  .utility-nav {
    --slot-open: 40px;
    display: flex;
    justify-content: flex-end;
  }
  .utility-nav ul { margin-top: 8px; }
  .utility-nav li { display: inline-block; }
  .utility-nav a {
    padding: 0 10px;
    font-size: 13px;
    color: rgba(255,255,255,.8);
  }
  .utility-nav a:hover, .utility-nav a:focus { color: rgba(255,255,255,.8); }

  .main-nav {
    order: 2;
    display: flex;
    justify-content: flex-end;
    width: auto;
  }
  .primary-menu {
    display: flex;
    flex: 1;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    border-top: 0;
  }
  .has-dropdown { position: relative; }
  .nav-toggle, .nav-link {
    width: auto;
    color: var(--white);
    border-bottom: 0;
  }
  .nav-toggle:hover, .nav-toggle:focus, .nav-toggle[aria-expanded="true"],
  .nav-link:hover, .nav-link:focus { color: var(--blue-light); }

  /* Dropdown: small panel under its menu item; opens on click, hover, or keyboard focus */
  .dropdown {
    display: block;
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 100;
    min-width: 270px;
    padding: 10px 0;
    background: var(--white);
    border-top: 3px solid var(--blue);
    border-image: var(--bar-blue-x) 1;
    box-shadow: 0 18px 40px -14px rgba(0,0,0,.5);
    visibility: hidden;
    opacity: 0;
    transform: translateY(6px);
    transition: opacity .2s ease, transform .2s ease, visibility 0s linear .2s;
  }
  .dropdown.is-open,
  .has-dropdown:hover > .dropdown,
  .has-dropdown:focus-within > .dropdown {
    visibility: visible;
    opacity: 1;
    transform: none;
    transition: opacity .2s ease, transform .2s ease;
  }
  .dropdown a {
    padding: 10px 24px;
    font-size: 15px;
    white-space: nowrap;
    color: var(--ink);
    transition: background-color .2s ease, color .2s ease;
  }
  .dropdown a:hover, .dropdown a:focus {
    color: var(--blue);
    background: var(--surface);
  }

  .extra-buttons {
    position: relative;
    align-items: center;
    width: auto;
    padding: 0;
    background: none;
    border: 0;
  }
  .extra-buttons .button {
    background: transparent;
    border-color: rgba(255,255,255,.5);
  }
  .extra-buttons .button:hover, .extra-buttons .button:focus {
    color: var(--blue);
    background: var(--white);
    border-color: var(--white);
  }
}

@media (min-width: 1200px){
  .site-header {
    padding: 15px;
    --logo-h: 100px;
  }
  .brand { flex: 0 0 190px; }
  .brand a {
    width: 141px;
    height: 100px;
  }
  .utility-nav { --slot-open: 42px; }
  .utility-nav ul { margin-top: 6px; }
  .nav-toggle, .nav-link { padding: 20px 1.6vw; }
  .has-dropdown > .dropdown { left: calc(1.6vw - 24px); }
}

/* Once the bar turns white the logo steps down a size. --logo-h follows it so the
   menu stays centered beside the logo. */
@media (min-width: 992px){
  .site-header.is-scrolled { --logo-h: 68px; }
  .site-header.is-scrolled .brand a {
    width: 96px;
    height: 68px;
  }
  .utility-nav { transition: height .4s ease; }
}
@media (min-width: 1200px){
  .site-header.is-scrolled { --logo-h: 84px; }
  .site-header.is-scrolled .brand a {
    width: 118px;
    height: 84px;
  }
}

/* Scrolled header on desktop: the top links travel off the top of the screen with
   the scroll while the menu rises into their place; a little further down the bar
   turns white with the full-color logo. The bar keeps its size. */
@media (min-width: 992px){
  /* Top link row, tied to scroll position. --p runs from 0 at the top of the
     page to 1 after 150px of scrolling (set in site.js). As it rises, the links
     travel up and off the top of the screen while their slot closes to the
     height that leaves the menu centered beside the logo. */
  .utility-nav {
    --slot-closed: calc((var(--logo-h) - 60px) / 2);
    height: calc(var(--slot-open) - var(--p, 0) * (var(--slot-open) - var(--slot-closed)));
    padding: 0;
    align-items: flex-start;
    overflow: visible;
  }
  .utility-nav ul { transform: translateY(calc(var(--p, 0) * -56px)); }
  /* Fully off screen: also remove the links from keyboard and screen reader order */
  .site-header.is-moved .utility-nav ul { visibility: hidden; }
  .site-header.is-scrolled .nav-toggle,
  .site-header.is-scrolled .nav-link { color: var(--ink); }
  .site-header.is-scrolled .nav-toggle:hover,
  .site-header.is-scrolled .nav-toggle:focus,
  .site-header.is-scrolled .nav-toggle[aria-expanded="true"],
  .site-header.is-scrolled .nav-link:hover,
  .site-header.is-scrolled .nav-link:focus { color: var(--blue); }
  .site-header.is-scrolled .extra-buttons .button {
    color: var(--white);
    background: var(--fill-blue);
    border-color: transparent;
  }
  .site-header.is-scrolled .extra-buttons .button:hover,
  .site-header.is-scrolled .extra-buttons .button:focus {
    color: var(--white);
    background: var(--fill-blue-hover);
    border-color: transparent;
  }
}


/* =========================================================
   HOME HERO
   Full-bleed photo under a gradual black scrim, copy on the left
   and stacked link tiles on the right. The section is pulled up
   under the header so the photo runs to the top of the page.
   ========================================================= */
.hero {
  position: relative;
  display: flex;
  align-items: center;
  margin-top: -85px;
  overflow: hidden;
  color: var(--white);
  /* Dark base behind the photo: shows while it loads and gives contrast tools a real backdrop */
  background-color: #1A1A1A;
}
@media (min-width: 768px){ .hero { margin-top: -115px; } }
@media (min-width: 992px){
  .hero {
    min-height: clamp(660px, 100vh, 900px);
    margin-top: 0;
  }
}

.hero-bg {
  position: absolute;
  inset: 0;
  overflow: hidden;
  isolation: isolate;
}
.hero-bg img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 62% 50%;
  /* Slow zoom and drift, back and forth */
  transform-origin: 60% 45%;
  animation: ken-burns 28s ease-in-out infinite alternate;
  will-change: transform;
}
@keyframes ken-burns {
  from { transform: scale(1) translate(0, 0); }
  to { transform: scale(1.14) translate(-1.5%, -1%); }
}
/* Gradual black scrim: a soft band behind the header, and a wash that is
   deepest behind the copy on the left and fades out toward the right */
/* Second photo: sits on top of the first and fades in and out, so the two alternate */
.hero-slide-2 img {
  object-position: 50% 50%;
  opacity: 0;
  animation: ken-burns 28s ease-in-out infinite alternate, hero-swap 20s ease-in-out infinite;
  will-change: transform, opacity;
}
@keyframes hero-swap {
  0%, 40% { opacity: 0; }
  50%, 90% { opacity: 1; }
  100% { opacity: 0; }
}
.hero-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(ellipse 72% 78% at 0% 0%, rgba(0,0,0,.48) 0%, rgba(0,0,0,0) 100%),
    linear-gradient(to bottom, rgba(0,0,0,.45) 0%, rgba(0,0,0,0) 30%),
    linear-gradient(to right, rgba(0,0,0,.72) 0%, rgba(0,0,0,.56) 38%, rgba(0,0,0,.26) 68%, rgba(0,0,0,.14) 100%);
  /* Above the animated photo; .hero-bg is its own stacking context, so this stays below the hero content */
  z-index: 1;
}
/* Phones and tablets: the text runs the full width, so the shade is lighter but
   covers the whole photo instead of being weighted to the left */
@media (max-width: 991px){
  .hero-bg::after {
    background-image:
      linear-gradient(to bottom, rgba(0,0,0,.56) 0%, rgba(0,0,0,.46) 45%, rgba(0,0,0,.4) 100%);
  }
}

.hero .container {
  width: 100%;
  padding: 150px 15px 56px;
}
.hero-row {
  display: flex;
  flex-direction: column;
  gap: 36px;
}
.hero .eyebrow {
  display: block;
  margin-bottom: 20px;
  font-size: 14px;
  color: var(--white);
}
.hero h1 {
  max-width: 720px;
  margin: 0 0 24px;
  /* On phones the size follows the screen width (up to 44px) so the first line fills the row without wrapping */
  font-size: max(clamp(38px, calc(38px + 24 * (100vw - 320px) / 1010), 62px), min(calc((100vw - 30px) / 7.8), 44px));
  line-height: 1.05;
  letter-spacing: -.5px;
  color: var(--white);
}
.hero-copy p {
  max-width: 780px;
  color: var(--white);
  /* Avoids a short last line */
  text-wrap: pretty;
}
.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 8px;
}

/* Link tiles */
.hero-tiles {
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.hero-tile {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 16px 26px 16px 16px;
  color: var(--ink);
  /* Slightly see-through, with a light blur so the photo behind stays soft */
  background: rgba(255,255,255,.9);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  border-left: 6px solid var(--blue);
  border-image: var(--bar-blue-y) 1;
  box-shadow: 0 4px 10px rgba(0,0,0,.3), 0 28px 60px -8px rgba(0,0,0,.75);
  transition: transform .3s ease, box-shadow .3s ease;
}
.hero-tile:nth-child(2) { border-left-color: var(--red); border-image: var(--bar-red-y) 1; }
.hero-tile:hover, .hero-tile:focus {
  color: var(--ink);
  text-decoration: none;
  box-shadow: 0 6px 14px rgba(0,0,0,.35), 0 36px 70px -8px rgba(0,0,0,.8);
  transform: translateX(6px);
}
.hero-tile picture { flex: 0 0 100px; }
.hero-tile img {
  width: 100px;
  height: 100px;
  object-fit: cover;
}
.hero-tile .category {
  display: block;
  margin-bottom: 5px;
  font-size: 12px;
  color: var(--blue);
}
.hero-tile-title {
  display: block;
  font-size: 21px;
  font-weight: 700;
  line-height: 25px;
  letter-spacing: -.3px;
}
.hero-tile-arrow {
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
  margin-left: auto;
  fill: none;
  stroke: var(--blue);
  stroke-width: 2;
}

@media (min-width: 992px){
  .hero .container { padding: 180px 15px 90px; }
  .hero-row {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 40px;
  }
  .hero-copy {
    flex: 0 1 60%;
    min-width: 0;
    max-width: 60%;
  }
  .hero-tiles { flex: 0 0 380px; }
}
@media (min-width: 1200px){
  .hero-tiles { flex-basis: 430px; }
}

/* New members bar: its own thin section under the hero. The feed widget brings
   its own inline styles (200px tiles), so these rules are scoped to out-rank them. */
.members-bar {
  display: flex;
  align-items: center;
  min-height: 120px;
  color: var(--ink);
  background: var(--bg);
}
/* Script greeting above the label */
.members-bar-welcome {
  font-family: "Dancing Script", "Brush Script MT", cursive;
  font-size: 40px;
  font-weight: 700;
  letter-spacing: 0;
  line-height: .95;
  text-transform: none;
}
/* Hidden until the feed has members to show */
.members-bar:not(:has(.mni-sponsors-has-data)) { display: none; }
.members-bar-label {
  flex: 0 0 auto;
  align-self: stretch;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 6px;
  margin: 0;
  padding: 0 90px 0 max(15px, calc((100vw - var(--container)) / 2 + 15px));
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 2px;
  line-height: 1;
  text-transform: uppercase;
  color: var(--white);
  background: #050A3A;
  /* Slanted right edge */
  clip-path: polygon(0 0, 100% 0, calc(100% - 52px) 100%, 0 100%);
}
.members-bar-feed {
  flex: 1;
  min-width: 0;
  padding: 18px max(15px, calc((100vw - var(--container)) / 2 + 15px)) 18px 28px;
}
.members-bar .mni-sponsors-widget .mni-sponsors-container { overflow: visible; }
/* Names stacked one per row, each row running the width of the bar */
.members-bar .mni-sponsors-widget .sponsors {
  display: flex;
  flex-direction: column;
  width: 100%;
}
/* Four or more: two columns so the bar does not grow too tall */
.members-bar .mni-sponsors-widget .sponsors:has(> li:nth-child(4)) {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  column-gap: 48px;
}
.members-bar .mni-sponsors-widget .sponsor {
  display: block;
  width: auto;
  height: auto;
  text-align: left;
  border-bottom: 1px solid var(--rule);
}
.members-bar .mni-sponsors-widget .sponsor:last-child { border-bottom: 0; }
.members-bar .mni-sponsors-widget .sponsor a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 11px 0 9px;
  color: var(--ink);
  text-decoration: none;
  transition: color .25s ease, padding .25s ease;
}
/* Arrow at the end of each row */
.members-bar .mni-sponsors-widget .sponsor a::after {
  content: "\2192";
  flex: 0 0 auto;
  font-size: 20px;
  line-height: 1;
  color: var(--red-text);
  transition: transform .25s ease;
}
.members-bar .mni-sponsors-widget .sponsor a:hover,
.members-bar .mni-sponsors-widget .sponsor a:focus {
  padding-left: 8px;
  color: var(--blue);
}
.members-bar .mni-sponsors-widget .sponsor a:hover::after,
.members-bar .mni-sponsors-widget .sponsor a:focus::after { transform: translateX(4px); }
.members-bar .mni-sponsors-widget .sponsor .sponsor-name {
  height: auto;
  padding: 0;
  font-size: clamp(18px, 2vw, 27px);
  font-weight: 700;
  letter-spacing: -.3px;
  line-height: 1.2;
}
/* Members with a logo show it on a small white chip */
.members-bar .mni-sponsors-widget .sponsors .sponsor-image {
  display: flex;
  align-items: center;
  width: auto;
  height: 46px;
  padding: 5px 12px;
  background: var(--white);
  border: 1px solid var(--rule-soft);
}
.members-bar .mni-sponsors-widget .sponsors .sponsor-image img,
.members-bar .mni-sponsors-widget .sponsors .sponsor-image image {
  width: auto;
  max-width: 140px;
  height: 36px;
  object-fit: contain;
}
/* Phones: the label sits on top as its own strip and the names run full width */
@media (max-width: 599px) {
  .members-bar { flex-direction: column; align-items: stretch; }
  .members-bar-label {
    flex-direction: row;
    align-items: baseline;
    justify-content: flex-start;
    gap: 12px;
    padding: 24px 15px 14px;
    clip-path: none;
  }
  /* Colon after the label; pulled back over the flex gap and the letter spacing */
  .members-bar-label::after { content: ":"; margin-left: -14px; }
  .members-bar-feed { padding: 8px 15px; }
  .members-bar .mni-sponsors-widget .sponsors:has(> li:nth-child(4)) { display: flex; }
}



/* =========================================================
   UPCOMING EVENTS
   Centered section heading, then the live events feed shown as
   three cards.
   ========================================================= */
.events {
  position: relative;
  overflow: hidden;
  padding: clamp(56px, 6vw, 96px) 0;
  background: var(--surface);
}
/* Oversized, faint horse mark behind the section content */
.events::before {
  content: "";
  position: absolute;
  top: 50%;
  right: 6%;
  height: 96%;
  aspect-ratio: 1764 / 1858;
  background: url("images/aubrey-chamber-horse-mark-red.svg") center / contain no-repeat;
  opacity: .05;
  transform: translateY(-50%);
  pointer-events: none;
}
.events-banner, .events .container { position: relative; }
.events-banner {
  padding: 0 15px 44px;
  text-align: center;
}
.events-banner .eyebrow {
  display: block;
  margin-bottom: 12px;
  font-size: 14px;
  color: var(--blue);
}
.events-banner h2 {
  font-size: clamp(30px, calc(30px + 14 * (100vw - 320px) / 1010), 44px);
  line-height: 1.1;
  letter-spacing: -.5px;
}
.events-banner p {
  max-width: 560px;
  margin: 14px auto 0;
}
.events .container { padding: 0 15px; }
.events-foot {
  margin-top: 40px;
  text-align: center;
}

/* Events feed: the widget outputs a flat list (.mn-scroll-item with date, linked
   name, and location). Laid out here as cards; only the next three are shown. */
.events-feed { min-height: 240px; }
.events-feed .mn-scroll-container {
  height: auto !important;
  overflow: visible !important;
}
.events-feed .mn-scroll-slider {
  position: static !important;
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
}
.events-feed .mn-scroll-item {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  min-height: 240px;
  padding: 34px 30px 28px;
  background: var(--white);
  border-bottom: 5px solid var(--blue);
  border-image: var(--bar-blue-x) 1;
  box-shadow: 0 2px 6px rgba(0,0,0,.08), 0 28px 56px -18px rgba(0,0,0,.5);
  transition: transform .3s ease, border-color .3s ease, box-shadow .3s ease;
}
.events-feed .mn-scroll-item:nth-child(n+4) { display: none; }
.events-feed .mn-scroll-item:hover, .events-feed .mn-scroll-item:focus-within {
  border-bottom-color: var(--red);
  border-image: var(--bar-red-x) 1;
  box-shadow: 0 4px 10px rgba(0,0,0,.1), 0 36px 64px -18px rgba(0,0,0,.55);
  transform: translateY(-6px);
}
.events-feed .mn-scroll-date {
  margin-bottom: 14px;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--red-text);
}
.events-feed .mn-scroll-name {
  display: block;
  margin-bottom: 12px;
  font-size: 24px;
  font-weight: 700;
  line-height: 28px;
  letter-spacing: -.3px;
  color: var(--ink);
}
.events-feed .mn-scroll-name { transition: color .25s ease; }
.events-feed .mn-scroll-item:hover .mn-scroll-name,
.events-feed .mn-scroll-name:hover, .events-feed .mn-scroll-name:focus {
  color: var(--blue-dark);
  text-decoration: none;
}
/* Stretch the event link over the whole card */
.events-feed .mn-scroll-name::after {
  content: "";
  position: absolute;
  inset: 0;
}
.events-feed .mn-scroll-location {
  font-size: 15px;
  line-height: 23px;
  color: var(--ink-soft);
}
.events-feed .mn-scroll-item::after {
  content: "Event Details \2192";
  margin-top: auto;
  padding-top: 18px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .6px;
  text-transform: uppercase;
  color: var(--blue);
}
.events-feed .mn-message-empty, .events-feed.mn-widget-empty {
  padding: 34px 30px;
  font-size: 18px;
  color: var(--ink-soft);
  background: var(--white);
}

@media (min-width: 768px){
  .events-feed .mn-scroll-slider { grid-template-columns: repeat(2, 1fr); }
  /* Two across: keep the grid even by showing two */
  .events-feed .mn-scroll-item:nth-child(3) { display: none; }
}
@media (min-width: 992px){
  .events-feed .mn-scroll-slider {
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
  }
  .events-feed .mn-scroll-item:nth-child(3) { display: flex; }
}

/* =========================================================
   MEMBERSHIP VALUE
   Intro copy and actions on the left, three benefits on the right,
   each with a round topic icon.
   ========================================================= */
.why {
  padding: clamp(56px, 7vw, 112px) 0;
  background: var(--bg);
}
.why .container { padding: 0 15px; }
.why-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 48px;
}
.why .eyebrow {
  display: block;
  margin-bottom: 14px;
  font-size: 14px;
  color: var(--blue);
}
.why h2 {
  margin-bottom: 22px;
  font-size: clamp(30px, calc(30px + 14 * (100vw - 320px) / 1010), 44px);
  line-height: 1.1;
  letter-spacing: -.5px;
}
.why-intro p { max-width: 540px; }
.why-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px 28px;
  margin-top: 8px;
}
.why-link {
  font-size: 14px;
  font-weight: 700;
  letter-spacing: .6px;
  text-transform: uppercase;
  text-decoration: underline;
  text-underline-offset: 5px;
}
.why-list {
  display: grid;
  gap: 34px;
}
.why-list li {
  position: relative;
  padding-left: 76px;
}
/* Round icon marker for each benefit */
.why-icon {
  position: absolute;
  top: -6px;
  left: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 54px;
  height: 54px;
  color: var(--blue);
  background: var(--white);
  border-radius: 50%;
  box-shadow: 0 2px 6px rgba(0,0,0,.08);
}
.why-icon svg {
  width: 24px;
  height: 24px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.why-list h3 {
  margin-bottom: 10px;
  font-size: clamp(22px, calc(22px + 6 * (100vw - 320px) / 1010), 28px);
  line-height: 1.15;
  letter-spacing: -.4px;
}
.why-list p {
  margin: 0;
  font-size: 17px;
  line-height: 28px;
}
@media (min-width: 992px){
  .why-row {
    grid-template-columns: 1fr 1fr;
    gap: 96px;
    align-items: start;
  }
}

/* =========================================================
   EXPLORE THE AREA
   Dark band with a photo-tile mosaic: four equal tiles around one
   tall tile in the middle.
   ========================================================= */
.explore {
  padding: clamp(56px, 7vw, 104px) 0;
  color: var(--white);
  background: #0A1238;
}
.explore .container { padding: 0 15px; }
.explore-head {
  margin-bottom: 40px;
  text-align: center;
}
.explore h2 {
  font-size: clamp(30px, calc(30px + 14 * (100vw - 320px) / 1010), 44px);
  line-height: 1.1;
  letter-spacing: -.5px;
  color: var(--white);
}
.explore-head p {
  margin: 14px 0 0;
  color: rgba(255,255,255,.85);
}
.explore-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}
.explore-tile {
  position: relative;
  display: flex;
  align-items: flex-end;
  height: 220px;
  overflow: hidden;
  color: var(--white);
  background: #16205A;
  transition: box-shadow .35s ease;
}
/* Soft white glow around the tile on hover */
.explore-tile:hover, .explore-tile:focus-visible {
  box-shadow: 0 0 26px rgba(255,255,255,.28);
}
.explore-tile img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .6s ease;
}
/* Scrim so the name reads over any photo */
.explore-tile::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,.78) 0%, rgba(0,0,0,.2) 55%, rgba(0,0,0,.1) 100%);
  transition: background-color .3s ease;
}
.explore-name {
  position: relative;
  z-index: 1;
  margin: 0 24px 24px;
  padding: 2px 0 2px 16px;
  font-size: clamp(24px, calc(24px + 8 * (100vw - 320px) / 1010), 32px);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -.4px;
  border-left: 5px solid var(--red);
  border-image: var(--bar-red-y) 1;
}
a.explore-tile:hover, a.explore-tile:focus {
  color: var(--white);
  text-decoration: none;
}
a.explore-tile:hover img, a.explore-tile:focus img { transform: scale(1.06); }
/* Tile without a photo: brand field with the horse mark */
.explore-tile--plain {
  background: linear-gradient(140deg, var(--blue) 0%, var(--blue-dark) 100%);
}
.explore-tile--plain::before {
  content: "";
  position: absolute;
  top: 44%;
  right: 9%;
  width: 82%;
  aspect-ratio: 1764 / 1858;
  background-color: var(--white);
  -webkit-mask: url("images/aubrey-chamber-horse-mark-red.svg") center / contain no-repeat;
  mask: url("images/aubrey-chamber-horse-mark-red.svg") center / contain no-repeat;
  opacity: .14;
  transform: translateY(-50%);
}
.explore-tile--plain::after { background: linear-gradient(to top, rgba(0,0,0,.35), rgba(0,0,0,0) 70%); }
/* From tablet up: four equal tiles around one tall tile in the middle */
@media (min-width: 768px){
  .explore-grid {
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: 260px 260px;
    grid-template-areas:
      "aubrey kru pv"
      "cross  kru oak";
    gap: 20px;
  }
  .explore-aubrey { grid-area: aubrey; }
  .explore-pv { grid-area: pv; }
  .explore-cross { grid-area: cross; }
  .explore-kru { grid-area: kru; }
  .explore-oak { grid-area: oak; }
  .explore-tile { height: 100%; }
}

/* =========================================================
   MEMBER TIERS
   Two columns: the top tier with one large logo, and the next
   tier as a ruled logo grid. No boxes, fills, or shadows; hairlines
   only, and the logos are transparent.
   ========================================================= */
.tiers {
  padding: clamp(56px, 6vw, 96px) 0;
  background: var(--white);
}
.tiers .container { padding: 0 15px; }
.tiers-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 56px;
}
.tier h2 {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 28px;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 3px;
  line-height: 20px;
  text-transform: uppercase;
  color: var(--ink);
}
/* Short hairline before the label, then a hairline to the column edge */
.tier h2::before {
  content: "";
  flex: 0 0 28px;
  height: 1px;
  background: var(--rule);
}
.tier h2::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--rule);
}

/* Shimmer: a soft band of light sweeps across the label and its lines, then
   rests. Diamond catches an icy blue, platinum a cool silver. */
.tier {
  --shine: #A7B2BD;
  --shine-line: #7C8894;
}
.tier--diamond {
  --shine: #7FA6FF;
  --shine-line: #5B8CFF;
}
.tier h2 {
  background-image: linear-gradient(100deg, var(--ink) 0%, var(--ink) 44%, var(--shine) 50%, var(--ink) 56%, var(--ink) 100%);
  background-size: 300% 100%;
  background-position: 120% 0;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: tier-shine 5.5s ease-in-out infinite;
}
.tier h2::before, .tier h2::after {
  background-image: linear-gradient(100deg, var(--rule) 0%, var(--rule) 42%, var(--shine-line) 50%, var(--rule) 58%, var(--rule) 100%);
  background-size: 300% 100%;
  background-position: 120% 0;
  animation: tier-shine 5.5s ease-in-out infinite;
}
.tier h2::after { animation-delay: .25s; }
.tier--platinum h2, .tier--platinum h2::before { animation-delay: .9s; }
.tier--platinum h2::after { animation-delay: 1.15s; }
@keyframes tier-shine {
  0% { background-position: 120% 0; }
  45%, 100% { background-position: -20% 0; }
}
@media (prefers-reduced-motion: reduce){
  .tier h2, .tier h2::before, .tier h2::after { animation: none; }
}
.tier-logos {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
/* Hairlines between cells only: none on the outer edges */
.tier-logos li {
  border-top: 1px solid var(--rule-soft);
  border-left: 1px solid var(--rule-soft);
}
.tier-logos li:nth-child(-n+2) { border-top: 0; }
.tier-logos li:nth-child(2n+1) { border-left: 0; }
.tier-logos a {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 150px;
  padding: 24px;
}
.tier-logos img {
  width: auto;
  height: auto;
  max-width: 88%;
  max-height: 74px;
  transition: transform .3s ease;
}
.tier-logos a:hover img, .tier-logos a:focus img { transform: scale(1.05); }
.tier-logos--single { grid-template-columns: 1fr; }
.tier-logos--single li { border: 0 !important; }
.tier-logos--single a { height: 240px; }
.tier-logos--single img { max-height: 190px; }

@media (min-width: 768px){
  .tier-logos { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .tier-logos li:nth-child(n) { border-top: 1px solid var(--rule-soft); border-left: 1px solid var(--rule-soft); }
  .tier-logos li:nth-child(-n+3) { border-top: 0; }
  .tier-logos li:nth-child(3n+1) { border-left: 0; }
  .tier-logos--single { grid-template-columns: 1fr; }
  .tier-logos a { height: 160px; padding: 28px 34px; }
  .tier-logos img { max-width: min(182px, 100%); max-height: 80px; }
}
@media (min-width: 992px){
  .tiers-row {
    grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
    gap: 72px;
  }
  .tier { display: flex; flex-direction: column; min-width: 0; }
  .tier-logos { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .tier-logos img { max-width: min(182px, 100%); }
  .tier-logos { flex: 1; }
  .tier-logos a { height: 100%; min-height: 160px; }
  .tier-logos--single a { min-height: 320px; }
  .tier-logos--single img { max-width: 260px; max-height: 220px; }
}

/* =========================================================
   INNER PAGE HEADER
   Dark band behind the transparent site header, with the page
   title, intro, and an optional search form.
   ========================================================= */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
.page-hero {
  position: relative;
  z-index: 2;
  margin-top: -85px;
  color: var(--white);
  background: radial-gradient(120% 120% at 0% 0%, #020E6E 0%, #030B52 50%, #050A3A 100%);
}
@media (min-width: 768px){ .page-hero { margin-top: -115px; } }
@media (min-width: 992px){ .page-hero { margin-top: 0; } }
/* Faint horse mark on the right */
.page-hero::before {
  content: "";
  position: absolute;
  top: 50%;
  right: 3%;
  height: 92%;
  aspect-ratio: 1764 / 1858;
  background-color: var(--white);
  -webkit-mask: url("images/aubrey-chamber-horse-mark-red.svg") center / contain no-repeat;
  mask: url("images/aubrey-chamber-horse-mark-red.svg") center / contain no-repeat;
  opacity: .07;
  transform: translateY(-50%);
  pointer-events: none;
}
.page-hero .container {
  padding: 150px 15px 56px;
}
@media (min-width: 992px){
  .page-hero .container { padding: 200px 15px 80px; }
}
.page-hero h1 {
  margin-bottom: 18px;
  font-size: clamp(36px, calc(36px + 22 * (100vw - 320px) / 1010), 58px);
  line-height: 1.05;
  letter-spacing: -.5px;
  color: var(--white);
}
.page-hero p {
  max-width: 760px;
  margin-bottom: 0;
  color: var(--white);
}

/* Directory search: vendor widget. Its own styles are scoped by id, so these
   rules carry the id as well to take precedence. */
.dir-search {
  max-width: 720px;
  min-height: 54px;
  margin-top: 28px;
}
.dir-search [id^="mni-search"] .mn-widget-searchbox-form {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.dir-search [id^="mni-search"] .mn-widget-searchbox-fieldwrapper {
  flex: 1 1 260px;
  min-width: 0;
  margin: 0;
}
#main .dir-search [id^="mni-search"] .mn-widget-searchbox-field input {
  height: 54px;
  padding: 0 18px;
  font-family: var(--sans);
  font-size: 17px;
  line-height: normal;
  color: var(--ink);
  background: var(--white);
  border: 2px solid var(--white);
  border-radius: 0;
}
#main .dir-search [id^="mni-search"] .mn-widget-searchbox-field input::placeholder { color: var(--ink-soft); }
#main .dir-search [id^="mni-search"] .mn-widget-searchbox-field input:focus-visible {
  outline: 3px solid var(--blue-light);
  outline-offset: 2px;
}
#main .dir-search [id^="mni-search"] .mn-widget-searchbox-searchbtn {
  height: 54px;
  padding: 0 32px;
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: .6px;
  text-transform: uppercase;
  color: var(--blue);
  background: var(--white);
  border: 1px solid var(--white);
  border-radius: 0;
  transition: all .3s ease-in-out;
}
#main .dir-search [id^="mni-search"] .mn-widget-searchbox-searchbtn:hover,
#main .dir-search [id^="mni-search"] .mn-widget-searchbox-searchbtn:focus {
  color: var(--white);
  background: var(--red-text);
  border-color: var(--red-text);
}
/* Suggestions list */
#main .dir-search [id^="mni-search"] .mn-widget-searchbox-autocomplete ul {
  margin-top: 6px;
  padding: 6px;
  background: var(--white);
  border: 0;
  border-radius: 0;
  box-shadow: 0 18px 40px -14px rgba(0,0,0,.55);
}
#main .dir-search [id^="mni-search"] .mn-autocomplete {
  padding: 10px 14px;
  font-family: var(--sans);
  font-size: 16px;
  line-height: 22px;
  color: var(--ink);
  border-radius: 0;
}
#main .dir-search [id^="mni-search"] .mn-autocomplete:hover,
#main .dir-search [id^="mni-search"] .mn-autocomplete:focus {
  margin: 0;
  background: var(--bg);
  border: 0;
}
#main .dir-search [id^="mni-search"] .mn-autocomplete-name { font-weight: 700; }
#main .dir-search [id^="mni-search"] .mn-autocomplete-type {
  font-size: 12px;
  font-style: normal;
  font-weight: 600;
  letter-spacing: 1.5px;
  line-height: 18px;
  text-transform: uppercase;
  color: var(--blue);
}


/* =========================================================
   DIRECTORY CATEGORIES
   ========================================================= */
.dir-cats {
  padding: clamp(56px, 6vw, 96px) 0;
  background: var(--white);
}
.dir-cats .container { padding: 0 15px; }
.dir-cats-head {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 20px;
  margin-bottom: 64px;
}
.dir-cats-head .eyebrow {
  display: block;
  margin-bottom: 12px;
  font-size: 14px;
  color: var(--blue);
}
.dir-cats-head h2, .cta-band h2 {
  font-size: clamp(28px, calc(28px + 12 * (100vw - 320px) / 1010), 40px);
  line-height: 1.1;
  letter-spacing: -.5px;
}
/* Category links: plain columns with hairline dividers, read down each column */
.cat-grid {
  column-count: 1;
  column-gap: 48px;
}
.cat-grid li { break-inside: avoid; }
.cat-grid a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 0;
  font-size: 17px;
  font-weight: 600;
  line-height: 24px;
  color: var(--ink);
  text-decoration: none;
  border-bottom: 1px solid var(--rule-soft);
  transition: color .25s ease, border-color .25s ease;
}
.cat-grid a:hover, .cat-grid a:focus {
  color: var(--blue);
  border-bottom-color: var(--blue);
}
.cat-grid svg {
  flex: 0 0 14px;
  width: 14px;
  height: 14px;
  fill: none;
  stroke: var(--blue);
  stroke-width: 2;
  transition: transform .25s ease;
}
.cat-grid a:hover svg, .cat-grid a:focus svg { transform: translateX(4px); }
@media (min-width: 640px){ .cat-grid { column-count: 2; } }
@media (min-width: 768px){
  .dir-cats-head {
    flex-direction: row;
    align-items: flex-end;
    justify-content: space-between;
  }
}
@media (min-width: 992px){ .cat-grid { column-count: 3; } }


/* =========================================================
   CALL-TO-ACTION BAND
   Full-width photo under a dark scrim, with the message and
   actions centered.
   ========================================================= */
.cta-band {
  position: relative;
  padding: clamp(64px, 8vw, 120px) 15px;
  text-align: center;
  color: var(--white);
  /* Dark base shows while the photo loads and backs the text for contrast tools */
  background: #14161C url("images/aubrey-texas-main-street-mural-american-flag-1024.jpg") 60% 45% / cover;
  background-image: image-set(
    url("images/aubrey-texas-main-street-mural-american-flag-1024.webp") type("image/webp"),
    url("images/aubrey-texas-main-street-mural-american-flag-1024.jpg") type("image/jpeg"));
}
.cta-band::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(rgba(0,0,0,.62), rgba(0,0,0,.72));
}
.cta-band .container { position: relative; }
.cta-band h2 {
  font-size: clamp(28px, calc(28px + 12 * (100vw - 320px) / 1010), 40px);
  line-height: 1.1;
  letter-spacing: -.5px;
  color: var(--white);
}
.cta-band p {
  margin: 12px 0 0;
  color: var(--white);
}
.cta-band-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  margin-top: 28px;
}
/* Primary action is solid blue on the photo; the secondary stays outlined in white */
.cta-band .button--white {
  color: var(--white);
  background: var(--fill-blue);
  border-color: transparent;
}
.cta-band .button--white:hover, .cta-band .button--white:focus {
  background: var(--fill-blue-hover);
  border-color: transparent;
}
.cta-band .button--ghost { border-color: rgba(255,255,255,.7); }


.button--white {
  color: var(--blue);
  background: var(--white);
  border-color: var(--white);
}
.button--white:hover, .button--white:focus {
  color: var(--white);
  background: var(--fill-blue-hover);
  border-color: transparent;
}
.button--ghost {
  background: transparent;
  border-color: rgba(255,255,255,.6);
}
.button--ghost:hover, .button--ghost:focus {
  color: var(--blue);
  background: var(--white);
  border-color: var(--white);
}

/* Current page in the utility links */
.utility-nav a[aria-current="page"] { text-decoration-color: currentColor; }

/* =========================================================
   EVENTS PAGE
   Upcoming events list (live feed) beside a month calendar
   (live widget).
   ========================================================= */
.events-page {
  padding: clamp(56px, 6vw, 96px) 0;
  background: var(--surface);
}
.events-page .container {
  display: grid;
  grid-template-columns: 1fr;
  gap: 48px;
  padding: 0 15px;
}
.events-page h2 {
  margin-bottom: 26px;
  font-size: clamp(26px, calc(26px + 10 * (100vw - 320px) / 1010), 36px);
  line-height: 1.1;
  letter-spacing: -.5px;
}
.events-page .eyebrow {
  display: block;
  margin-bottom: 12px;
  font-size: 14px;
  color: var(--blue);
}
.events-page-foot { margin-top: 32px; }

/* Upcoming list: the feed's flat items laid out as rows */
.events-list { min-height: 320px; }
.events-list .mn-scroll-container {
  height: auto !important;
  overflow: visible !important;
}
.events-list .mn-scroll-slider {
  position: static !important;
  display: grid;
  gap: 16px;
}
.events-list .mn-scroll-item {
  position: relative;
  display: grid;
  grid-template-columns: 92px 1fr 20px;
  column-gap: 24px;
  align-items: center;
  padding: 18px 24px 18px 18px;
  background: var(--white);
  border-left: 4px solid var(--blue);
  border-image: var(--bar-blue-y) 1;
  box-shadow: 0 2px 6px rgba(0,0,0,.06), 0 14px 28px -18px rgba(0,0,0,.4);
  transition: transform .3s ease, border-color .3s ease;
}
.events-list .mn-scroll-item:hover, .events-list .mn-scroll-item:focus-within {
  border-left-color: var(--red);
  border-image: var(--bar-red-y) 1;
  transform: translateX(4px);
}
.events-list .mn-scroll-date {
  grid-row: 1 / span 2;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 64px;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--white);
  background: var(--fill-blue);
}
.events-list .mn-scroll-name {
  grid-column: 2;
  font-size: 20px;
  font-weight: 700;
  line-height: 25px;
  letter-spacing: -.3px;
  color: var(--ink);
}
.events-list .mn-scroll-name:hover, .events-list .mn-scroll-name:focus {
  color: var(--blue);
  text-decoration: none;
}
/* Stretch the event link over the whole row */
.events-list .mn-scroll-name::after {
  content: "";
  position: absolute;
  inset: 0;
}
.events-list .mn-scroll-location {
  grid-column: 2;
  margin-top: 4px;
  font-size: 15px;
  line-height: 22px;
  color: var(--ink-soft);
}
.events-list .mn-scroll-location br { display: none; }
.events-list .mn-scroll-item::after {
  content: "\2192";
  grid-column: 3;
  grid-row: 1 / span 2;
  font-size: 18px;
  color: var(--blue);
}
.events-list .mn-message-empty, .events-list.mn-widget-empty {
  padding: 28px;
  font-size: 18px;
  background: var(--white);
}

/* Month calendar: vendor widget. Days with events are links. */
.events-cal {
  padding: 26px 24px 24px;
  background: var(--white);
  border-top: 5px solid var(--blue);
  border-image: var(--bar-blue-x) 1;
  box-shadow: 0 2px 6px rgba(0,0,0,.08), 0 28px 56px -18px rgba(0,0,0,.5);
}
.events-cal-widget { min-height: 330px; }
.events-cal .mn-widget-calendar-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 18px;
}
.events-cal .mn-widget-calendar-date {
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -.3px;
  color: var(--ink);
}
.events-cal .mn-widget-calendar-prev a, .events-cal .mn-widget-calendar-next a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  font-size: 0;
  color: var(--blue);
  border: 1px solid var(--rule);
  transition: all .25s ease;
}
.events-cal .mn-widget-calendar-prev a::before { content: "\2190"; font-size: 18px; }
.events-cal .mn-widget-calendar-next a::before { content: "\2192"; font-size: 18px; }
.events-cal .mn-widget-calendar-prev a:hover, .events-cal .mn-widget-calendar-next a:hover,
.events-cal .mn-widget-calendar-prev a:focus, .events-cal .mn-widget-calendar-next a:focus {
  color: var(--white);
  background: var(--fill-blue);
  border-color: transparent;
  text-decoration: none;
}
.events-cal .mn-widget-calendar-weekdays, .events-cal .mn-widget-calendar-week {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 4px;
}
.events-cal .mn-widget-calendar-week { margin-top: 4px; }
.events-cal .mn-widget-calendar-clear { display: none; }
.events-cal .mn-widget-calendar-weekday {
  padding: 6px 0;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1px;
  text-align: center;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.events-cal .mn-widget-calendar-day {
  display: flex;
  align-items: center;
  justify-content: center;
  float: none;
  width: auto;
  aspect-ratio: 1;
  font-size: 15px;
  color: var(--ink);
  background: var(--bg);
}
.events-cal .mn-widget-calendar-day-prev, .events-cal .mn-widget-calendar-day-next {
  color: #6B7378;
  background: none;
}
.events-cal .mn-widget-calendar-day a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  font-weight: 700;
  color: var(--white);
  background: var(--fill-blue);
  transition: background-color .25s ease;
}
.events-cal .mn-widget-calendar-day a:hover, .events-cal .mn-widget-calendar-day a:focus {
  background: var(--red-text);
  text-decoration: none;
}
.events-cal-key {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 18px 0 0;
  font-size: 14px;
  line-height: 20px;
}
.events-cal-key::before {
  content: "";
  flex: 0 0 14px;
  height: 14px;
  background: var(--fill-blue);
}

@media (max-width: 575px){
  .events-list .mn-scroll-item {
    grid-template-columns: 76px 1fr;
    column-gap: 16px;
    padding: 14px 16px 14px 14px;
  }
  .events-list .mn-scroll-item::after { display: none; }
  .events-list .mn-scroll-date { font-size: 13px; letter-spacing: 1.5px; }
}
@media (min-width: 992px){
  .events-page .container {
    grid-template-columns: 1fr 400px;
    gap: 56px;
    align-items: start;
  }
  .events-cal-col {
    position: sticky;
    top: var(--sticky-top);
  }
}

/* =========================================================
   COMMUNITY PAGES
   Contact cards beside a photo, then links to the other
   communities.
   ========================================================= */
.city {
  padding: clamp(56px, 6vw, 96px) 0;
  background: var(--surface);
}
.city .container {
  display: grid;
  grid-template-columns: 1fr;
  gap: 40px;
  padding: 0 15px;
}
.city-head .eyebrow {
  display: block;
  margin-bottom: 12px;
  font-size: 14px;
  color: var(--blue);
}
.city-head h2 {
  margin-bottom: 28px;
  font-size: clamp(26px, calc(26px + 10 * (100vw - 320px) / 1010), 36px);
  line-height: 1.1;
  letter-spacing: -.5px;
}
.contact-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
}
.contact-card {
  padding: 28px 28px 24px;
  background: var(--white);
  border-top: 4px solid var(--blue);
  border-image: var(--bar-blue-x) 1;
  box-shadow: 0 2px 6px rgba(0,0,0,.06), 0 14px 28px -18px rgba(0,0,0,.4);
}
.contact-card h3 {
  margin-bottom: 14px;
  font-size: 22px;
  line-height: 27px;
  letter-spacing: -.3px;
}
.contact-card address {
  margin-bottom: 14px;
  font-size: 16px;
  font-style: normal;
  line-height: 25px;
}
.contact-card p {
  margin: 0 0 14px;
  font-size: 15px;
  line-height: 24px;
}
.contact-list {
  margin: 0;
  font-size: 16px;
  line-height: 24px;
}
.contact-list div {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 2px 16px;
  padding: 9px 0;
  border-top: 1px solid var(--rule-soft);
}
.contact-list dt { color: var(--ink-soft); }
.contact-list dd {
  margin: 0;
  font-weight: 700;
  color: var(--ink);
  overflow-wrap: anywhere;
}
.contact-list a { color: var(--blue); }
.city-web { margin-top: 28px; }

/* Photo beside the cards */
.city-photo {
  margin: 0;
  background: var(--white);
  box-shadow: 0 2px 6px rgba(0,0,0,.08), 0 28px 56px -18px rgba(0,0,0,.5);
}
.city-photo img {
  width: 100%;
  height: auto;
}
.city-emergency {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 24px 0 0;
  padding: 18px 22px;
  font-size: 16px;
  font-weight: 700;
  line-height: 24px;
  color: var(--white);
  background: var(--red-text);
}
.city-emergency svg {
  flex: 0 0 22px;
  width: 22px;
  height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Other communities */
.city-more {
  padding: clamp(48px, 5vw, 80px) 0;
  color: var(--white);
  background: #0A1238;
}
.city-more .container { padding: 0 15px; }
.city-more h2 {
  margin-bottom: 28px;
  font-size: clamp(24px, calc(24px + 8 * (100vw - 320px) / 1010), 32px);
  line-height: 1.1;
  letter-spacing: -.4px;
  color: var(--white);
}
.city-more-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
}
.city-more-grid .explore-tile { height: 170px; }
.city-more-grid .explore-name {
  margin: 0 16px 16px;
  font-size: 20px;
}

@media (min-width: 768px){
  .contact-grid { grid-template-columns: repeat(2, 1fr); }
  .city-more-grid { grid-template-columns: repeat(4, 1fr); gap: 20px; }
  .city-more-grid .explore-tile { height: 200px; }
}
@media (min-width: 1200px){
  .city .container {
    grid-template-columns: 1fr 400px;
    gap: 56px;
    align-items: start;
  }
  .city-aside {
    position: sticky;
    top: var(--sticky-top);
  }
}

/* =========================================================
   LOCATION MAP
   Map embed directly above the footer, with a narrow gutter on each side.
   ========================================================= */
.map-band {
  padding: 0 20px;
  line-height: 0;
  /* Gutters fade from the section above into the footer color below */
  background: linear-gradient(to bottom, var(--bg) 0%, #050A3A 100%);
}
.map-band iframe {
  display: block;
  width: 100%;
  height: clamp(320px, 38vw, 480px);
}

/* =========================================================
   CHAMBER PAGES (about, board, executive director)
   ========================================================= */
.prose-section {
  padding: clamp(56px, 6vw, 96px) 0;
  background: var(--surface);
}
.prose-section .container {
  display: grid;
  grid-template-columns: 1fr;
  gap: 44px;
  padding: 0 15px;
}
.prose .eyebrow {
  display: block;
  margin-bottom: 12px;
  font-size: 14px;
  color: var(--blue);
}
.prose h2 {
  margin-bottom: 24px;
  font-size: clamp(26px, calc(26px + 10 * (100vw - 320px) / 1010), 36px);
  line-height: 1.1;
  letter-spacing: -.5px;
}
.prose p { max-width: 720px; }
.prose p:last-child { margin-bottom: 0; }
.prose .lead {
  font-size: clamp(18px, calc(18px + 3 * (100vw - 320px) / 1010), 21px);
  line-height: 1.6;
  color: var(--ink);
}
.prose-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px 24px;
  margin-top: 28px;
}
.credit {
  margin: 20px 0 0;
  font-size: 14px;
  line-height: 22px;
}

/* Milestones beside the history */
.milestones {
  padding: 30px 30px 10px;
  background: var(--white);
  border-top: 4px solid var(--blue);
  border-image: var(--bar-blue-x) 1;
  box-shadow: 0 2px 6px rgba(0,0,0,.06), 0 14px 28px -18px rgba(0,0,0,.4);
}
.milestones h2 {
  margin-bottom: 8px;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 2px;
  line-height: 20px;
  text-transform: uppercase;
  color: var(--blue);
}
.milestones li {
  padding: 18px 0;
  border-top: 1px solid var(--rule-soft);
}
.milestones li:first-child { border-top: 0; }
.milestones strong {
  display: block;
  margin-bottom: 4px;
  font-size: 30px;
  line-height: 1.1;
  letter-spacing: -.5px;
  color: var(--ink);
}
.milestones span {
  font-size: 15px;
  line-height: 23px;
}

/* Links to the people pages: face thumbnails, title, and a text link */
.people-links {
  padding: clamp(56px, 6vw, 96px) 0;
  background: var(--white);
}
.people-links .container { padding: 0 15px; }
.people-links-head {
  margin-bottom: 36px;
  text-align: center;
}
.people-links-head .eyebrow {
  display: block;
  margin-bottom: 12px;
  font-size: 14px;
  color: var(--blue);
}
.people-links-head h2 {
  font-size: clamp(26px, calc(26px + 10 * (100vw - 320px) / 1010), 36px);
  line-height: 1.1;
  letter-spacing: -.5px;
}
.people-links-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
}
.people-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 22px;
  padding: 44px 32px 38px;
  text-align: center;
  color: var(--ink-soft);
  background: var(--surface);
  transition: background-color .3s ease, box-shadow .3s ease, transform .3s ease;
}
.people-card:hover, .people-card:focus {
  color: var(--ink-soft);
  text-decoration: none;
  background: var(--white);
  box-shadow: 0 2px 6px rgba(0,0,0,.06), 0 28px 56px -22px rgba(0,0,0,.45);
  transform: translateY(-4px);
}
/* Overlapping round portraits */
.people-faces {
  display: flex;
  align-items: center;
  justify-content: center;
  /* Same height in both cards so the titles line up */
  min-height: 104px;
}
.people-faces img {
  width: 84px;
  height: 84px;
  margin-left: -18px;
  object-fit: cover;
  object-position: 50% 18%;
  border: 4px solid var(--white);
  border-radius: 50%;
  box-shadow: 0 6px 16px -6px rgba(0,0,0,.4);
}
.people-faces img:first-child { margin-left: 0; }
.people-faces--one img {
  width: 104px;
  height: 104px;
  object-position: 50% 14%;
}
.people-card-text strong {
  display: block;
  margin-bottom: 8px;
  font-size: 26px;
  line-height: 30px;
  letter-spacing: -.4px;
  color: var(--ink);
}
.people-card-text span {
  font-size: 17px;
  line-height: 26px;
}
.people-card-go {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: .6px;
  text-transform: uppercase;
  color: var(--blue);
}
.people-card-go svg {
  width: 14px;
  height: 14px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  transition: transform .3s ease;
}
.people-card:hover .people-card-go svg, .people-card:focus .people-card-go svg { transform: translateX(4px); }

/* Board grid */
.board {
  padding: clamp(56px, 6vw, 96px) 0;
  background: var(--surface);
}
.board .container { padding: 0 15px; }
.board-head { margin-bottom: 36px; }
.board-head .eyebrow {
  display: block;
  margin-bottom: 12px;
  font-size: 14px;
  color: var(--blue);
}
.board-head h2 {
  font-size: clamp(26px, calc(26px + 10 * (100vw - 320px) / 1010), 36px);
  line-height: 1.1;
  letter-spacing: -.5px;
}
.board-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
}
.person {
  display: flex;
  flex-direction: column;
  background: var(--white);
  border-bottom: 5px solid var(--blue);
  border-image: var(--bar-blue-x) 1;
  box-shadow: 0 2px 6px rgba(0,0,0,.08), 0 22px 44px -20px rgba(0,0,0,.45);
}
.person-photo {
  position: relative;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  /* Soft gray, close to the studio backdrop in the portraits */
  background: linear-gradient(160deg, #E4E8EB 0%, #CBD2D7 100%);
}
.person-photo img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* No photo on file: initials on the brand field */
.person-initials {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: clamp(40px, 6vw, 64px);
  font-weight: 700;
  letter-spacing: 2px;
  color: #7C8791;
}
.person-body {
  display: flex;
  flex: 1;
  flex-direction: column;
  padding: 20px 20px 18px;
}
.person-role {
  margin-bottom: 8px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 2px;
  line-height: 18px;
  text-transform: uppercase;
  color: var(--red-text);
}
.person h3 {
  margin-bottom: 4px;
  font-size: 20px;
  line-height: 25px;
  letter-spacing: -.3px;
}
.person-org {
  margin: 0 0 12px;
  font-size: 15px;
  line-height: 22px;
}
.person-email {
  font-size: 14px;
  font-weight: 700;
  line-height: 20px;
  overflow-wrap: anywhere;
}
@media (min-width: 768px){
  .board-grid { grid-template-columns: repeat(3, 1fr); gap: 24px; }
  .people-links-grid { grid-template-columns: repeat(2, 1fr); gap: 28px; }
}
@media (min-width: 1200px){
  .board-grid { grid-template-columns: repeat(4, 1fr); gap: 28px; }
}

/* Portrait beside a biography */
.bio-photo {
  margin: 0;
  background: var(--white);
  box-shadow: 0 2px 6px rgba(0,0,0,.08), 0 28px 56px -18px rgba(0,0,0,.5);
}
.bio-photo img { width: 100%; height: auto; }
@media (min-width: 992px){
  .prose-section--aside .container {
    grid-template-columns: 1fr 380px;
    gap: 64px;
    align-items: start;
  }
  .prose-section--bio .container {
    grid-template-columns: 400px 1fr;
    gap: 64px;
    align-items: start;
  }
  .prose-aside, .bio-photo-col {
    position: sticky;
    top: var(--sticky-top);
  }
}

/* =========================================================
   MEMBER BENEFITS PAGE
   Three headline benefits, then the benefits-by-level table.
   ========================================================= */
.benefit-cards {
  padding: clamp(56px, 6vw, 96px) 0;
  background: var(--surface);
}
.benefit-cards .container { padding: 0 15px; }
.benefit-head {
  max-width: none;
  margin-bottom: 40px;
}
.benefit-head .eyebrow {
  display: block;
  margin-bottom: 12px;
  font-size: 14px;
  color: var(--blue);
}
.benefit-head h2 {
  margin-bottom: 16px;
  font-size: clamp(26px, calc(26px + 10 * (100vw - 320px) / 1010), 36px);
  line-height: 1.1;
  letter-spacing: -.5px;
}
.benefit-head p { text-wrap: pretty; }
.benefit-head p:last-child { margin-bottom: 0; }
.benefit-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
}
.benefit-card {
  padding: 34px 30px 30px;
  background: var(--white);
  border-bottom: 5px solid var(--blue);
  border-image: var(--bar-blue-x) 1;
  box-shadow: 0 2px 6px rgba(0,0,0,.08), 0 28px 56px -18px rgba(0,0,0,.45);
}
.benefit-card .why-icon {
  position: static;
  margin-bottom: 20px;
  background: var(--bg);
  box-shadow: none;
}
.benefit-card h3 {
  margin-bottom: 12px;
  font-size: 24px;
  line-height: 28px;
  letter-spacing: -.4px;
}
.benefit-card p {
  margin: 0 0 14px;
  font-size: 16px;
  line-height: 26px;
}
.benefit-card p:last-child { margin-bottom: 0; }
@media (min-width: 992px){
  .benefit-grid { grid-template-columns: repeat(3, 1fr); gap: 28px; }
}

/* Benefits by level */
.levels {
  padding: clamp(56px, 6vw, 96px) 0;
  background: var(--white);
}
.levels .container { padding: 0 15px; }
.levels-head {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 20px;
  margin-bottom: 32px;
}
.levels-head .eyebrow {
  display: block;
  margin-bottom: 12px;
  font-size: 14px;
  color: var(--blue);
}
.levels-head h2 {
  font-size: clamp(26px, calc(26px + 10 * (100vw - 320px) / 1010), 36px);
  line-height: 1.1;
  letter-spacing: -.5px;
}
.levels-head p { margin: 12px 0 0; max-width: 620px; }
/* The table scrolls sideways inside this wrapper on narrow screens */
.levels-scroll {
  overflow-x: auto;
  border: 1px solid var(--rule-soft);
  -webkit-overflow-scrolling: touch;
}
.levels-table {
  width: 100%;
  min-width: 860px;
  border-collapse: collapse;
  font-size: 15px;
  line-height: 22px;
}
.levels-table th, .levels-table td {
  padding: 13px 10px;
  text-align: center;
  border-bottom: 1px solid var(--rule-soft);
}
.levels-table thead th {
  position: sticky;
  top: 0;
  padding: 18px 10px 16px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1.5px;
  line-height: 16px;
  text-transform: uppercase;
  vertical-align: bottom;
  color: var(--white);
  background: #050A3A;
  border-bottom: 0;
}
.levels-table thead th strong {
  display: block;
  margin-bottom: 6px;
  font-size: 20px;
  letter-spacing: -.3px;
  line-height: 24px;
}
.levels-table thead th:first-child, .levels-table tbody th {
  width: 40%;
  padding-left: 22px;
  text-align: left;
}
.levels-table tbody th {
  font-weight: 400;
  color: var(--ink);
}
.levels-table tbody th small {
  display: block;
  font-size: 13px;
  font-weight: 700;
  color: var(--ink-soft);
}
.levels-table tbody tr:nth-child(even) { background: var(--surface); }
.levels-table tbody tr:hover { background: #EAF0FF; }
/* Included mark */
.levels-table .yes::before {
  content: "";
  display: inline-block;
  width: 14px;
  height: 8px;
  margin-bottom: 3px;
  border-left: 2.5px solid var(--blue);
  border-bottom: 2.5px solid var(--blue);
  transform: rotate(-45deg);
}
.levels-note {
  margin: 18px 0 0;
  font-size: 15px;
  font-weight: 700;
  line-height: 22px;
}
.levels-note a {
  text-decoration: underline;
  text-underline-offset: 4px;
}
@media (min-width: 768px){
  .levels-head {
    flex-direction: row;
    align-items: flex-end;
    justify-content: space-between;
  }
}

/* =========================================================
   MEMBER SPOTLIGHT PAGE
   Featured award, sponsor logos, and member name lists.
   ========================================================= */
.award {
  padding: clamp(56px, 6vw, 96px) 0;
  background: var(--surface);
}
.award .container {
  display: grid;
  grid-template-columns: 1fr;
  gap: 36px;
  align-items: center;
  padding: 0 15px;
}
.award-photo {
  max-width: 400px;
  margin: 0;
  background: var(--white);
  box-shadow: 0 2px 6px rgba(0,0,0,.08), 0 28px 56px -18px rgba(0,0,0,.5);
}
.award-photo img { width: 100%; height: auto; }
.award .eyebrow {
  display: block;
  margin-bottom: 14px;
  font-size: 14px;
  color: var(--red-text);
}
.award h2 {
  margin-bottom: 18px;
  font-size: clamp(34px, calc(34px + 22 * (100vw - 320px) / 1010), 56px);
  line-height: 1.05;
  letter-spacing: -.5px;
}
.award p { max-width: 520px; }
@media (min-width: 768px){
  .award .container {
    grid-template-columns: 400px 1fr;
    gap: 64px;
  }
}

.spot-tiers { border-top: 1px solid var(--rule-soft); }

/* Name lists for the remaining levels: two white panels, each with a colored
   level badge and the names set in columns with hairline dividers. */
.member-lists {
  padding: clamp(56px, 6vw, 96px) 0;
  background: var(--bg);
}
.member-lists .container {
  display: grid;
  grid-template-columns: 1fr;
  gap: 28px;
  padding: 0 15px;
}
.member-list {
  --level: #B8860B;
  padding: clamp(26px, 3vw, 44px);
  background: var(--white);
  border-top: 4px solid var(--level);
  box-shadow: 0 2px 6px rgba(0,0,0,.05), 0 22px 44px -26px rgba(0,0,0,.4);
}
.member-list + .member-list { --level: #7C8791; }
.member-list h2 {
  display: flex;
  align-items: baseline;
  gap: 14px;
  margin-bottom: 22px;
  font-size: clamp(24px, calc(24px + 6 * (100vw - 320px) / 1010), 30px);
  line-height: 1.15;
  letter-spacing: -.4px;
}
/* Count of members at this level */
.member-list h2 span {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--level);
}
.member-list ul {
  column-count: 1;
  column-gap: 44px;
}
.member-list li {
  break-inside: avoid;
  padding: 11px 0;
  font-size: 16px;
  line-height: 23px;
  color: var(--ink);
  border-bottom: 1px solid var(--rule-soft);
}
@media (min-width: 576px){
  .member-list ul { column-count: 2; }
}
@media (min-width: 992px){
  .member-list ul { column-count: 3; }
}

/* =========================================================
   SCHOOLS PAGE
   Two groups of contact cards.
   ========================================================= */
.schools {
  padding: clamp(56px, 6vw, 96px) 0;
  background: var(--surface);
}
.schools .container { padding: 0 15px; }
.schools-group + .schools-group { margin-top: clamp(48px, 5vw, 72px); }
@media (min-width: 992px){
  .contact-grid--3 { grid-template-columns: repeat(3, 1fr); }
}

/* =========================================================
   SITE FOOTER
   ========================================================= */
.site-footer {
  color: rgba(255,255,255,.85);
  background: #050A3A;
}
.site-footer .container { padding: 0 15px; }
.footer-top {
  display: grid;
  grid-template-columns: 1fr;
  gap: 44px;
  padding: clamp(48px, 5vw, 76px) 0 44px;
}
.footer-brand img {
  width: 170px;
  height: 120px;
  margin-bottom: 22px;
}
@media (min-width: 992px){
  .footer-brand img { width: 128px; height: 90px; }
}
.footer-brand address {
  font-size: 16px;
  font-style: normal;
  line-height: 26px;
}
.footer-brand address a {
  font-weight: 700;
  color: var(--white);
}
.footer-social {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  justify-self: center;
  width: 44px;
  height: 44px;
  color: var(--white);
  border: 1px solid rgba(255,255,255,.45);
  border-radius: 50%;
  transition: background-color .3s ease, color .3s ease;
}
.footer-social:hover, .footer-social:focus {
  color: var(--blue);
  background: var(--white);
}
.footer-social svg {
  width: 20px;
  height: 20px;
  fill: currentColor;
}
.footer-nav {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 36px 24px;
}
.footer-nav h3 {
  margin-bottom: 16px;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 1.5px;
  line-height: 20px;
  text-transform: uppercase;
  color: var(--white);
}
.footer-nav li { margin-bottom: 10px; }
.footer-nav a {
  font-size: 15px;
  line-height: 22px;
  color: rgba(255,255,255,.82);
}
.footer-nav a:hover, .footer-nav a:focus,
.footer-brand address a:hover, .footer-brand address a:focus,
.footer-bottom a:hover, .footer-bottom a:focus { color: var(--white); }
/* Social link left, copyright and policy link centered */
.footer-bottom {
  display: grid;
  grid-template-columns: 1fr;
  justify-items: center;
  align-items: center;
  gap: 14px;
  padding: 22px 0 26px;
  text-align: center;
  border-top: 1px solid rgba(255,255,255,.16);
}
.footer-bottom p {
  margin: 0;
  font-size: 14px;
  line-height: 22px;
}
.footer-bottom a {
  font-size: 14px;
  line-height: 22px;
  color: rgba(255,255,255,.85);
  text-decoration: underline;
}

.footer-bottom .footer-credit { display: inline-flex; }
.footer-credit img { display: block; width: 72px; height: auto; opacity: .55; transition: opacity .3s ease; }
.footer-credit:hover img, .footer-credit:focus img { opacity: 1; }

/* Phones: center the logo and address block */
@media (max-width: 767px){
  .footer-brand { text-align: center; }
  .footer-brand img { margin: 0 auto 22px; }
}
@media (min-width: 768px){
  .footer-nav { grid-template-columns: repeat(4, 1fr); }
  .footer-bottom { grid-template-columns: 1fr auto 1fr; }
  .footer-bottom .footer-social { order: -1; justify-self: start; }
  .footer-bottom .footer-credit { justify-self: end; }
}
@media (min-width: 1200px){
  .footer-top { grid-template-columns: 260px 1fr; gap: 72px; }
}

/* =========================================================
   MOTION
   Entrance for the top of each page (CSS only), and a fade-and-rise
   for sections as they scroll into view (classes added by site.js,
   so content is fully visible without JavaScript).
   ========================================================= */
@keyframes rise-in {
  from { opacity: 0; transform: translateY(16px); }
  to { opacity: 1; transform: none; }
}
/* Page-top text slides without fading: fading it in from invisible delays the
   page's largest paint and costs speed score. */
@keyframes slide-in {
  from { transform: translateY(14px); }
  to { transform: none; }
}
.hero-copy > *, .page-hero .container > * {
  animation: slide-in .7s ease backwards;
}
.hero-tile {
  animation: rise-in .7s ease backwards;
}
.hero-copy > :nth-child(2), .page-hero .container > :nth-child(2) { animation-delay: .1s; }
.hero-copy > :nth-child(3), .page-hero .container > :nth-child(3) { animation-delay: .2s; }
.hero-copy > :nth-child(4) { animation-delay: .3s; }
/* Tiles arrive after the copy has settled, one after the other */
.hero-tile { animation-delay: .9s; }
.hero-tile:nth-child(2) { animation-delay: 1.35s; }

.reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .6s ease, transform .6s ease;
  transition-delay: var(--reveal-delay, 0s);
}
.reveal.is-in {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce){
  *, *::before, *::after {
    transition-duration: .01ms !important;
    animation: none !important;
  }
  .reveal { opacity: 1; transform: none; }
}

/* Narrow desktop (992 to 1199px): tighter menu spacing keeps every item on one row */
@media (min-width: 992px) and (max-width: 1199px){
  .primary-menu { flex-wrap: nowrap; }
  .nav-toggle, .nav-link {
    padding-left: 9px;
    padding-right: 9px;
    font-size: 13px;
    letter-spacing: .3px;
    white-space: nowrap;
  }
  .extra-buttons .button { padding-left: 16px; padding-right: 16px; white-space: nowrap; }
  .tiers-row { gap: 40px; }
  .tier-logos a { padding: 20px 16px; }
}