:root {
  --ink: #303b42;
  --blue: #2c9cc8;
  --slate: #687f91;
  --deep: #263740;
  --line: #d9e1e5;
  --soft: #f5f8f9;
  --benefit: #eaf6ea;
  --green: #4f8b56;
}
* {
  box-sizing: border-box;
}
html {
  scroll-behavior: smooth;
}
body {
  margin: 0;
  background: #fff;
  color: var(--ink);
  font-family: Georgia, "Times New Roman", serif;
  font-size: 16px;
  line-height: 1.55;
}
.site-nav {
  max-width: 1080px;
  margin: 0 auto;
  padding: 14px 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid var(--line);
  gap: 24px;
}
.brand-wrap {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
}
.brand-mark {
  display: flex;
  text-decoration: none;
}
.brand-text {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}
.brand-name {
  text-decoration: none;
  color: var(--ink);
  font-family: Arial, Helvetica, sans-serif;
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.035em;
  white-space: nowrap;
}
.brand-contact {
  margin: 0;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 11px;
  font-weight: 400;
  letter-spacing: normal;
  text-transform: none;
  color: #65727a;
  text-align: center;
}
.brand-contact a {
  color: inherit;
  text-decoration: none;
}
.brand-contact a:hover {
  color: var(--blue);
  text-decoration: underline;
}
.mark {
  flex: none;
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  background: var(--deep);
  color: #fff;
  font-family: Arial, sans-serif;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
}
.nav-links {
  display: flex;
  gap: 25px;
}
.nav-links a {
  color: #65727a;
  text-decoration: none;
  font:
    700 11px/1 Arial,
    Helvetica,
    sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  padding: 9px 0;
  border-bottom: 2px solid transparent;
}
.nav-links a:hover,
.nav-links .active {
  color: var(--blue);
  border-color: var(--blue);
}
h1,
h2,
h3 {
  font-family: Arial, Helvetica, sans-serif;
  color: var(--deep);
}
h1 {
  font-size: clamp(38px, 6vw, 69px);
  line-height: 1.02;
  letter-spacing: -0.04em;
  margin: 0;
}
h2 {
  font-size: 29px;
  line-height: 1.12;
  letter-spacing: -0.025em;
  margin: 0;
}
h3 {
  font-size: 18px;
  line-height: 1.2;
  margin: 7px 0 10px;
}
.home-main {
  max-width: 1080px;
  margin: 0 auto;
}
.hero {
  padding: 92px 0 80px;
  max-width: 920px;
}
.eyebrow,
.section-number {
  margin: 0 0 15px;
  color: var(--blue);
  font:
    700 11px/1 Arial,
    Helvetica,
    sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.12em;
}
.hero .hero-lead {
  max-width: 880px;
  font-size: 21px;
  line-height: 1.55;
  color: #46555e;
  margin: 31px 0 17px;
}
.hero > p:last-of-type {
  max-width: 820px;
  color: #68757b;
}
.hero-actions {
  display: flex;
  gap: 12px;
  margin-top: 32px;
}
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 13px 18px;
  text-decoration: none;
  font:
    700 11px/1 Arial,
    Helvetica,
    sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  border: 1px solid var(--blue);
}
.button.primary {
  background: var(--blue);
  color: #fff;
}
.button.secondary {
  color: var(--blue);
}
.definition {
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding: 58px 0;
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: 72px;
}
.definition-copy p {
  margin: 0 0 17px;
  color: #526169;
  font-size: 18px;
}
.pillars {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  margin: 64px 0;
}
.pillars article {
  background: #fff;
  padding: 30px;
}
.pillars span {
  color: var(--blue);
  font:
    700 10px/1 Arial,
    Helvetica,
    sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.1em;
}
.pillars p {
  font-size: 14px;
  color: #637078;
  margin: 0;
}
.landscape-links {
  display: grid;
  grid-template-columns: 0.8fr 1.2fr;
  gap: 72px;
  padding: 20px 0 85px;
}
.landscape-links > div > p:last-child {
  color: #647078;
}
.feature-links {
  display: grid;
  gap: 15px;
}
.feature-links a {
  padding: 24px;
  border: 1px solid var(--line);
  border-left: 4px solid var(--blue);
  text-decoration: none;
  color: var(--ink);
  transition:
    transform 0.15s,
    box-shadow 0.15s;
}
.feature-links a:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 22px rgba(38, 55, 64, 0.08);
}
.feature-links small {
  display: block;
  color: var(--blue);
  font:
    700 10px/1 Arial,
    Helvetica,
    sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.1em;
}
.feature-links strong {
  display: block;
  font:
    700 19px/1.2 Arial,
    Helvetica,
    sans-serif;
  margin: 8px 0;
}
.feature-links span {
  font-size: 14px;
  color: #617078;
}
.directory-header {
  max-width: 1080px;
  margin: 0 auto;
  padding: 38px 0 24px;
  border-bottom: 1px solid var(--line);
}
.directory-header h1 {
  font-size: clamp(28px, 3.4vw, 38px);
}
.directory-header p:last-child {
  max-width: 760px;
  color: #65727a;
  font-size: 17px;
  line-height: 1.45;
  margin: 14px 0 0;
}
.directory-main {
  max-width: 1080px;
  margin: 0 auto;
  padding: 24px 0 60px;
}
.scope-note {
  display: grid;
  grid-template-columns: 110px 1fr;
  background: var(--benefit);
  border-left: 4px solid var(--green);
  padding: 17px 20px;
  margin-bottom: 42px;
  font-size: 14px;
  color: #4d5c53;
}
.scope-note strong {
  font-family: Arial, Helvetica, sans-serif;
  text-transform: uppercase;
  font-size: 11px;
  letter-spacing: 0.08em;
}
.cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
}
.card {
  --accent: var(--blue);
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 8px;
  overflow: hidden;
  padding: 0 20px 20px;
  display: flex;
  flex-direction: column;
  min-height: 430px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.035);
}
.card:nth-child(even) {
  --accent: var(--slate);
}
.meta {
  background: var(--accent);
  color: #fff;
  margin: 0 -20px 20px;
  padding: 13px 16px;
  display: flex;
  justify-content: space-between;
  gap: 12px;
  font:
    700 10px/1.25 Arial,
    Helvetica,
    sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.meta b {
  text-align: right;
}
.card h2 {
  font-size: 20px;
  font-weight: 600;
  text-transform: uppercase;
  margin: 0 0 12px;
}
.aka {
  display: block;
  margin-top: 6px;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 13px;
  line-height: 1.3;
  font-weight: 400;
  text-transform: none;
  color: #707070;
  letter-spacing: 0;
}
.focus {
  background: var(--soft);
  border-left: 3px solid var(--accent);
  padding: 10px 12px;
  margin: 0 0 16px;
  font:
    13px/1.35 Arial,
    Helvetica,
    sans-serif;
  color: #555;
}
.focus small {
  display: block;
  color: var(--accent);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  margin-bottom: 2px;
}
.card p {
  font-size: 14px;
  color: #575f64;
  margin: 0 0 14px;
}
.card ul {
  background: var(--benefit);
  border: 1px solid #cfe5cf;
  border-radius: 7px;
  margin: 0 0 18px;
  padding: 14px 14px 14px 34px;
  color: #4b5b4d;
  font-size: 13px;
}
.card li {
  padding: 2px 0;
}
.card li::marker {
  color: var(--green);
}
.card > a {
  margin-top: auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: var(--accent);
  color: #fff;
  padding: 12px 14px;
  font:
    700 11px/1 Arial,
    Helvetica,
    sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  text-decoration: none;
}
.university-category {
  margin: 0 0 36px;
}
.category-title {
  display: flex;
  align-items: center;
  gap: 15px;
  background: var(--blue);
  color: #fff;
  padding: 12px 16px;
}
.university-category:nth-child(even) .category-title {
  background: var(--slate);
}
.category-title span {
  font:
    700 12px/1 Arial,
    Helvetica,
    sans-serif;
}
.category-title h2 {
  font-size: 18px;
  color: #fff;
  letter-spacing: 0;
}
.university-table {
  border: 1px solid var(--line);
  border-top: 0;
}
.table-head,
.university-row {
  display: grid;
  grid-template-columns: 1.1fr 2.25fr 0.9fr 1.15fr;
}
.table-head {
  background: #526875;
  color: #fff;
  font:
    700 11px/1.2 Arial,
    Helvetica,
    sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.table-head span,
.university-row > span {
  padding: 10px 12px;
  border-right: 1px solid var(--line);
}
.table-head span:last-child,
.university-row > span:last-child {
  border-right: 0;
}
.university-row {
  color: var(--ink);
  text-decoration: none;
  border-top: 1px solid var(--line);
  font-size: 13px;
  line-height: 1.38;
  transition: background 0.12s;
}
.university-row:nth-child(odd) {
  background: #f3f8fa;
}
.university-category:nth-child(even) .university-row:nth-child(odd) {
  background: #f1f4f6;
}
.university-row:hover {
  background: #e8f5fa;
}
.university-name {
  position: relative;
  padding-left: 43px !important;
}
.university-name i {
  position: absolute;
  left: 12px;
  top: 10px;
  font-style: normal;
  font-size: 17px;
  line-height: 1;
}
.university-name b,
.university-name small,
.university-name em {
  display: block;
}
.university-name b {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 13px;
}
.university-name small {
  color: #6c7a82;
  margin-top: 3px;
}
.university-name em {
  color: var(--blue);
  font:
    700 10px/1.2 Arial,
    Helvetica,
    sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-top: 8px;
}
footer {
  max-width: 1080px;
  margin: 0 auto;
  padding: 16px 0 18px;
  border-top: 1px solid var(--line);
  display: flex;
  justify-content: space-between;
  gap: 20px;
  color: #77838a;
  font-size: 12px;
}
footer a {
  color: inherit;
  text-decoration: none;
}
footer a:hover {
  color: var(--blue);
  text-decoration: underline;
}
@media (max-width: 1140px) {
  .site-nav,
  .home-main,
  .directory-header,
  .directory-main,
  footer {
    margin-left: 28px;
    margin-right: 28px;
  }
}
@media (max-width: 980px) {
  .cards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
/* The single-row nav (brand + join button + 5-item menu) needs more room
   than the general 980px tablet breakpoint leaves once the 1140px rule's
   side margins kick in; below this it stacks into three centered rows
   instead of clipping the last menu item off the edge. */
@media (max-width: 1060px) {
  .site-nav {
    align-items: flex-start;
    flex-wrap: wrap;
  }
  .brand-wrap {
    order: 1;
  }
  .brand-text {
    display: none;
  }
  .nav-join {
    order: 2;
    width: 100%;
    justify-content: center;
  }
  .nav-links {
    order: 3;
    width: 100%;
    justify-content: center;
    flex-wrap: wrap;
    gap: 12px;
  }
}
@media (max-width: 820px) {
  .definition,
  .landscape-links {
    grid-template-columns: 1fr;
    gap: 28px;
  }
  .pillars {
    grid-template-columns: 1fr;
  }
  .cards {
    grid-template-columns: 1fr;
  }
  .table-head {
    display: none;
  }
  .university-row {
    grid-template-columns: 1fr 1fr;
  }
  .university-row > span {
    border-bottom: 1px solid var(--line);
  }
  .university-name {
    grid-column: 1/-1;
  }
  .hero {
    padding-top: 58px;
  }
}
@media (max-width: 560px) {
  .site-nav,
  .home-main,
  .directory-header,
  .directory-main,
  footer {
    margin-left: 18px;
    margin-right: 18px;
  }
  .site-nav {
    gap: 10px;
  }
  .nav-links a {
    font-size: 10px;
  }
  .hero-actions {
    align-items: stretch;
    flex-direction: column;
  }
  .university-row {
    grid-template-columns: 1fr;
  }
  .university-name {
    grid-column: auto;
  }
  .scope-note {
    grid-template-columns: 1fr;
    gap: 7px;
  }
  footer {
    display: block;
  }
  .directory-header {
    padding-top: 32px;
  }
}

.nav-links {
  align-items: center;
}

.resource-menu {
  position: relative;
}

/* Bridges the 8px gap between the summary and its panel below so the mouse
   doesn't drop out of hover crossing it (which used to snap the menu shut
   before you could reach it). Absolutely positioned, so — unlike padding —
   it adds nothing to this element's layout height, keeping Membership/About
   Us/Resources the same height as the plain Home/Vision links beside them. */
.resource-menu::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  height: 8px;
}

/* Recent Chromium hides <details> content via an internal ::details-content
   layer (content-visibility) whenever [open] is absent, which silently broke
   our hover-to-reveal trick even though click-to-open (native <details>
   behavior) kept working. This opts the content back into normal rendering
   so our own display:none/block toggle below is what controls visibility. */
.resource-menu::details-content {
  block-size: auto;
  overflow: visible;
  content-visibility: visible;
}

.resource-menu summary {
  list-style: none;
  cursor: pointer;
  color: #65727a;
  font: 700 11px/1 Arial, Helvetica, sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  padding: 9px 0;
  border-bottom: 2px solid transparent;
  white-space: nowrap;
}

.resource-menu summary::-webkit-details-marker {
  display: none;
}

.resource-menu summary::after {
  content: "▾";
  font-size: 9px;
  margin-left: 6px;
}

.resource-menu.active > summary,
.resource-menu[open] > summary,
.resource-menu:hover > summary {
  color: var(--blue);
  border-color: var(--blue);
}

.resource-menu-panel {
  position: absolute;
  right: 0;
  top: calc(100% + 8px);
  z-index: 20;
  display: none;
  width: 230px;
  padding: 0;
  background: #fff;
  border: 1px solid var(--line);
  border-top: 3px solid var(--blue);
  box-shadow: 0 12px 30px rgba(38, 55, 64, 0.14);
}

.resource-menu[open] .resource-menu-panel,
.resource-menu:hover .resource-menu-panel {
  display: block;
}

.resource-menu-panel a {
  display: block;
  padding: 12px 18px !important;
  border: 0 !important;
  border-bottom: 1px solid var(--line) !important;
  color: #465158 !important;
  font-family: Georgia, "Times New Roman", serif !important;
  font-size: 14px !important;
  text-transform: none !important;
  letter-spacing: normal !important;
  font-weight: 400 !important;
}

.resource-menu-panel a:last-child {
  border-bottom: 0 !important;
}

.resource-menu-panel a:hover,
.resource-menu-panel a.active {
  background: var(--soft);
  color: var(--blue) !important;
}

.about-intro {
  max-width: 820px;
  font-size: 18px !important;
  line-height: 1.45;
  margin: 14px 0 0 !important;
}

.about-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
  margin-bottom: 40px;
}

.about-panel {
  border-top: 4px solid var(--blue);
  background: var(--soft);
  padding: 26px;
}

.about-panel h2 {
  font-size: 20px;
  margin-bottom: 12px;
}

.about-panel p {
  margin: 0;
  color: #59676f;
  font-size: 15px;
}

.about-panel a {
  color: var(--blue);
  text-decoration: none;
}

.about-panel a:hover {
  text-decoration: underline;
}

.about-statement {
  display: grid;
  grid-template-columns: 0.8fr 1.2fr;
  gap: 64px;
  padding: 36px 0;
  border-top: 1px solid var(--line);
}

.about-statement h2 {
  font-size: 32px;
}

.about-statement p {
  margin-top: 0;
  color: #59676f;
  font-size: 17px;
}

.about-statement .button {
  margin-top: 8px;
}

@media (max-width: 820px) {
  .about-grid {
    grid-template-columns: 1fr;
  }

  .about-statement {
    grid-template-columns: 1fr;
    gap: 18px;
  }
}

@media (max-width: 560px) {
  .resource-menu summary {
    font-size: 10px;
  }

  .resource-menu-panel {
    position: fixed;
    left: 18px;
    right: 18px;
    top: 180px;
    width: auto;
    max-height: calc(100vh - 200px);
    overflow-y: auto;
  }

  .about-intro {
    font-size: 17px !important;
  }
}

/* Header "Join Now" button + membership dialog */
.nav-join {
  display: flex;
  align-items: center;
  gap: 10px;
}
.join-btn {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #fff;
  background: var(--blue);
  border: none;
  border-radius: 16px;
  padding: 8px 16px;
  cursor: pointer;
  white-space: normal;
  max-width: 200px;
  line-height: 1.4;
  text-align: center;
}
.join-btn:hover {
  background: var(--deep);
}
.join-dialog {
  position: relative;
  border: none;
  border-radius: 8px;
  padding: 36px;
  max-width: 420px;
  width: calc(100% - 48px);
  box-shadow: 0 20px 60px rgba(38, 55, 64, 0.25);
  font-family: Georgia, "Times New Roman", serif;
  color: var(--ink);
}
.join-dialog::backdrop {
  background: rgba(38, 55, 64, 0.55);
}
.join-dialog h2 {
  margin: 0 0 12px;
}
.join-dialog p {
  margin: 0;
  color: var(--slate);
}
.join-dialog-close {
  position: absolute;
  top: 12px;
  right: 14px;
  border: none;
  background: none;
  font-size: 22px;
  line-height: 1;
  color: var(--slate);
  cursor: pointer;
}
@media (max-width: 820px) {
  .join-btn {
    padding: 9px 16px;
    font-size: 10px;
  }
}
@media (max-width: 560px) {
  .join-btn {
    white-space: normal;
    width: 100%;
    max-width: none;
    text-align: center;
    padding: 9px 14px;
  }
}

/* In-page section index (e.g. Initiatives page) */
.section-index {
  margin: 12px 0 0;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 13px;
  font-weight: 700;
  color: #65727a;
}
.section-index a {
  color: var(--blue);
  text-decoration: none;
}
.section-index a:hover {
  text-decoration: underline;
}

/* Initiatives page content grid */
.initiatives-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
  margin-bottom: 40px;
}
@media (max-width: 560px) {
  .initiatives-grid {
    grid-template-columns: 1fr;
  }
}

/* Member-page password gate */
html.gate-locked body > *:not(.gate-overlay) {
  display: none !important;
}
.gate-overlay {
  position: fixed;
  inset: 0;
  background: var(--deep);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  z-index: 999;
}
.gate-box {
  background: #fff;
  border-radius: 10px;
  padding: 36px;
  max-width: 360px;
  width: 100%;
  text-align: center;
  box-shadow: 0 20px 60px rgba(38, 55, 64, 0.35);
}
.gate-box h2 {
  font-size: 22px;
  margin-bottom: 8px;
}
.gate-box p {
  color: var(--slate);
  font-size: 14px;
  margin: 0 0 18px;
}
.gate-form {
  display: flex;
  gap: 8px;
}
.gate-input {
  flex: 1;
  min-width: 0;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 6px;
  font-size: 15px;
  font-family: Georgia, "Times New Roman", serif;
}
.gate-form .button {
  white-space: nowrap;
  cursor: pointer;
  background: var(--blue);
}
.gate-error {
  color: #b23b3b;
  font-size: 13px;
  margin-top: 14px;
}