/**
 * WPP Base — Page Builder Section Styles
 *
 * Styles for the 9 reusable page section template parts used by the
 * page section builder. Each section is wrapped in `.page-section` with
 * a modifier class `.page-{section-name}`.
 *
 * All colors, fonts, and spacing use CSS custom properties defined in
 * inc/css-variables.php and driven by site-config.json. No hardcoded
 * branding values.
 */

/* ================================================================
   Shared: .page-section wrapper + colored-square accent
   ================================================================ */
.page-section {
  width: 100%;
}
.page-section .container {
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 20px;
}

/* Colored square accent used by page-section-header and article grid */
.page-section .square {
  display: inline-block;
  width: 14px;
  height: 14px;
  background: var(--navy);
  margin-right: 10px;
  vertical-align: middle;
  flex-shrink: 0;
}
.page-section .square.navy        { background: var(--navy); }
.page-section .square.dark-navy   { background: var(--dark-navy); }
.page-section .square.blue        { background: var(--blue); }
.page-section .square.yellow      { background: var(--yellow); }
.page-section .square.red         { background: var(--red); }

/* Common bg color modifiers */
.page-section.bg-white     { background: var(--white); }
.page-section.bg-gray      { background: var(--gray-bg); }
.page-section.bg-navy      { background: var(--navy); color: var(--white); }
.page-section.bg-dark-navy { background: var(--dark-navy); color: var(--white); }

/* Page canvas: an optional per-page background color (builder metabox →
   "Page background") painted behind all full-layout sections. White/default
   sections go transparent so the canvas shows through; sections explicitly
   set to Gray/Navy keep their own band. The :not() chain outranks both the
   per-type white defaults (.page-rich-text etc.) and .page-section.bg-white. */
.bsm-page-canvas .page-section:not(.bg-gray):not(.bg-navy):not(.bg-dark-navy) {
  background: transparent;
}

/* Code Block / Section Header colored bands need breathing room the white
   default doesn't — here the padding IS the colored band, so it stays at 40px
   rather than following the tightened default above. */
.page-code-block.bg-gray,
.page-code-block.bg-navy { padding: 40px 0; }

/* Full Width: drop the content column so pasted designs can run edge-to-edge
   (color bands, hero art). Their markup owns its own inner width from here. */
.page-code-block.is-full-width > .container {
  max-width: none;
  width: 100%;
  padding-left: 0;
  padding-right: 0;
}

/* Spacing: declared AFTER the colored-band rule above so an explicit choice
   wins at equal specificity — a flush band must be able to reach 0. */
.page-code-block.spacing-none  { padding: 0; }
.page-code-block.spacing-large { padding: 60px 0; }
.page-section-header.bg-gray,
.page-section-header.bg-navy { padding: 24px 0; }

/* ================================================================
   Dark-background text inversion
   ----------------------------------------------------------------
   Two dark contexts share one palette: a section explicitly set to
   Navy, and any section showing through a dark page canvas (the
   canvas takes an arbitrary color, so PHP flags it with .is-dark).
   Without this, components keep their dark default text and wash
   out — the column-block twin (.block-article-list) has had these
   inversions since Phase 20; the section versions never did.
   ================================================================ */
.bsm-page-canvas.is-dark .page-section:not(.bg-white):not(.bg-gray) {
  color: var(--white);
}

/* Article Grid cards */
.page-article-grid.bg-navy .page-article-category,
.bsm-page-canvas.is-dark .page-article-grid:not(.bg-white):not(.bg-gray) .page-article-category {
  color: var(--yellow);
}
.page-article-grid.bg-navy .page-article-title,
.page-article-grid.bg-navy .page-article-title a,
.bsm-page-canvas.is-dark .page-article-grid:not(.bg-white):not(.bg-gray) .page-article-title,
.bsm-page-canvas.is-dark .page-article-grid:not(.bg-white):not(.bg-gray) .page-article-title a {
  color: var(--white);
}
.page-article-grid.bg-navy .page-article-title a:hover,
.bsm-page-canvas.is-dark .page-article-grid:not(.bg-white):not(.bg-gray) .page-article-title a:hover {
  color: rgba(255,255,255,0.75);
}
.page-article-grid.bg-navy .page-article-byline,
.bsm-page-canvas.is-dark .page-article-grid:not(.bg-white):not(.bg-gray) .page-article-byline {
  color: rgba(255,255,255,0.75);
}
.page-article-grid.bg-navy .page-article-excerpt,
.bsm-page-canvas.is-dark .page-article-grid:not(.bg-white):not(.bg-gray) .page-article-excerpt {
  color: rgba(255,255,255,0.85);
}
.page-article-grid.bg-navy .page-article-grid-header h2,
.bsm-page-canvas.is-dark .page-article-grid:not(.bg-white):not(.bg-gray) .page-article-grid-header h2,
.page-article-grid.bg-navy .page-article-grid-subtitle,
.bsm-page-canvas.is-dark .page-article-grid:not(.bg-white):not(.bg-gray) .page-article-grid-subtitle {
  color: var(--white);
}
.page-article-grid.bg-navy .page-article-grid-button,
.bsm-page-canvas.is-dark .page-article-grid:not(.bg-white):not(.bg-gray) .page-article-grid-button {
  border-color: rgba(255,255,255,0.6);
  color: var(--white);
}
.page-article-grid.bg-navy .page-article-grid-button:hover,
.bsm-page-canvas.is-dark .page-article-grid:not(.bg-white):not(.bg-gray) .page-article-grid-button:hover {
  background: var(--white);
  color: var(--navy);
}

/* Section header + rich text on a dark canvas */
.bsm-page-canvas.is-dark .page-section-header:not(.bg-white):not(.bg-gray) h2,
.bsm-page-canvas.is-dark .page-section-header:not(.bg-white):not(.bg-gray) .page-header-subtitle,
.bsm-page-canvas.is-dark .page-rich-text:not(.bg-white):not(.bg-gray),
.bsm-page-canvas.is-dark .page-rich-text:not(.bg-white):not(.bg-gray) h1,
.bsm-page-canvas.is-dark .page-rich-text:not(.bg-white):not(.bg-gray) h2,
.bsm-page-canvas.is-dark .page-rich-text:not(.bg-white):not(.bg-gray) h3,
.bsm-page-canvas.is-dark .page-rich-text:not(.bg-white):not(.bg-gray) h4 {
  color: var(--white);
}
.bsm-page-canvas.is-dark .page-rich-text:not(.bg-white):not(.bg-gray) a {
  color: var(--white);
  text-decoration: underline;
}

/* The Article Grid paints white by default; a navy band must win over it. */
.page-article-grid.bg-navy { background: var(--navy); color: var(--white); }
.page-article-grid.bg-gray { background: var(--gray-bg); }

/* Dark background links */
.page-section.bg-navy a,
.page-section.bg-dark-navy a { color: var(--white); }

/* ================================================================
   1. PAGE HERO
   ================================================================ */
.page-hero {
  position: relative;
  width: 100%;
  overflow: hidden;
  background: var(--navy);
}
.page-hero.min-small  { min-height: 300px; }
.page-hero.min-medium { min-height: 400px; }
.page-hero.min-large  { min-height: 500px; }

.page-hero .page-hero-image {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
}
.page-hero .page-hero-overlay {
  position: absolute;
  inset: 0;
}
.page-hero .page-hero-overlay.navy {
  background: linear-gradient(180deg, rgba(16, 41, 77, 0.35) 0%, rgba(16, 41, 77, 0.85) 100%);
}
.page-hero .page-hero-overlay.dark-navy {
  background: linear-gradient(180deg, rgba(7, 22, 45, 0.35) 0%, rgba(7, 22, 45, 0.92) 100%);
}
.page-hero .page-hero-overlay.blue {
  background: linear-gradient(180deg, rgba(30, 93, 158, 0.35) 0%, rgba(30, 93, 158, 0.88) 100%);
}
.page-hero .page-hero-overlay.none {
  background: transparent;
}
.page-hero .container {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: flex-end;
  min-height: inherit;
  padding-top: 60px;
  padding-bottom: 40px;
}
.page-hero.min-small  .container { min-height: 300px; }
.page-hero.min-medium .container { min-height: 400px; }
.page-hero.min-large  .container { min-height: 500px; }

.page-hero .page-hero-content {
  max-width: 720px;
  color: var(--white);
}
.page-hero.align-center .container  { justify-content: center; text-align: center; }
.page-hero.align-center .page-hero-content { margin: 0 auto; }
.page-hero.align-right  .container  { justify-content: flex-end; text-align: right; }

.page-hero h1 {
  font-family: var(--font-condensed);
  font-size: 48px;
  font-weight: 700;
  line-height: 1.1;
  color: var(--white);
  margin: 0 0 14px;
  text-shadow: 0 2px 16px rgba(0, 0, 0, 0.35);
}
.page-hero .page-hero-subtitle {
  font-size: 18px;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.92);
  margin: 0;
  text-shadow: 0 1px 10px rgba(0, 0, 0, 0.35);
}

/* ================================================================
   2. PAGE SECTION HEADER (square accent + title)
   ================================================================ */
.page-section-header {
  padding: 30px 0 10px;
  background: var(--white);
}
.page-section-header .ListH-header,
.page-section-header .page-header-inner {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--gray-border);
}
.page-section-header h2 {
  font-family: var(--font-condensed);
  font-size: 22px;
  font-weight: 700;
  color: var(--dark-navy);
  margin: 0;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.page-section-header .page-header-subtitle {
  margin: 6px 0 0 24px;
  font-size: 14px;
  color: var(--gray-text);
}

/* ================================================================
   3. PAGE CARD GRID
   ================================================================ */
.page-card-grid {
  padding: 30px 0 40px;
  background: var(--white);
}
.page-card-grid .page-card-grid-inner {
  display: grid;
  gap: 24px;
}
.page-card-grid.cols-2 .page-card-grid-inner { grid-template-columns: repeat(2, 1fr); }
.page-card-grid.cols-3 .page-card-grid-inner { grid-template-columns: repeat(3, 1fr); }
.page-card-grid.cols-4 .page-card-grid-inner { grid-template-columns: repeat(4, 1fr); }

.page-card {
  background: var(--white);
  border: 1px solid var(--gray-border);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: inherit;
  transition: box-shadow 0.2s ease, transform 0.2s ease;
}
.page-card:hover {
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
  transform: translateY(-2px);
}
.page-card-media {
  width: 100%;
  aspect-ratio: 16 / 9;
  background: var(--gray-bg);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
.page-card-grid.fit-contain .page-card-media {
  background-size: contain;
  background-color: #f5f5f5;
}
.page-card-body {
  padding: 16px 18px 20px;
  display: flex;
  flex-direction: column;
  flex: 1;
}
.page-card-title {
  font-family: var(--font-condensed);
  font-size: 20px;
  font-weight: 700;
  color: var(--dark-navy);
  margin: 0 0 8px;
  line-height: 1.25;
}
.page-card:hover .page-card-title { color: var(--blue); }
.page-card-desc {
  font-size: 14px;
  line-height: 1.55;
  color: var(--gray-text-dark, #333);
  margin: 0 0 12px;
  flex: 1;
}
/* wysiwyg content brings its own <p> — let the wrapper own the spacing */
.page-card-desc > :first-child { margin-top: 0; }
.page-card-desc > :last-child  { margin-bottom: 0; }
.page-card-cta {
  font-family: var(--font-condensed);
  font-size: 13px;
  font-weight: 700;
  color: var(--blue);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-top: auto;
}
.page-card-cta::after { content: " \203A"; }

/* ================================================================
   4. PAGE LOGO GRID
   ================================================================ */
.page-logo-grid {
  padding: 30px 0;
  background: var(--gray-bg);
}
.page-logo-grid.bg-white { background: var(--white); }
.page-logo-grid.bg-navy  { background: var(--navy); }

.page-logo-grid-inner {
  display: grid;
  gap: 24px;
  align-items: center;
  justify-items: center;
}
.page-logo-grid.cols-2 .page-logo-grid-inner { grid-template-columns: repeat(2, 1fr); }
.page-logo-grid.cols-3 .page-logo-grid-inner { grid-template-columns: repeat(3, 1fr); }
.page-logo-grid.cols-4 .page-logo-grid-inner { grid-template-columns: repeat(4, 1fr); }
.page-logo-grid.cols-5 .page-logo-grid-inner { grid-template-columns: repeat(5, 1fr); }
.page-logo-grid.cols-6 .page-logo-grid-inner { grid-template-columns: repeat(6, 1fr); }

.page-logo-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: inherit;
  padding: 12px;
  transition: transform 0.2s ease;
}
.page-logo-item:hover { transform: scale(1.05); }
.page-logo-item img {
  max-width: 100%;
  max-height: 80px;
  width: auto;
  height: auto;
  object-fit: contain;
  display: block;
}
.page-logo-item .page-logo-label {
  font-family: var(--font-condensed);
  font-size: 13px;
  font-weight: 700;
  text-align: center;
  color: var(--dark-navy);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.page-logo-grid.bg-navy .page-logo-item .page-logo-label { color: var(--white); }

/* ================================================================
   5. PAGE SPLIT LAYOUT
   ================================================================ */
.page-split {
  margin: 48px 0;
  padding: 0;
  background: var(--navy);
  color: var(--white);
}
@media (max-width: 768px) {
  .page-split { margin: 32px 0; }
}
.page-split.bg-white     { background: var(--white); color: var(--dark-navy); }
.page-split.bg-gray      { background: var(--gray-bg); color: var(--dark-navy); }
.page-split.bg-navy      { background: var(--navy); color: var(--white); }
.page-split.bg-dark-navy { background: var(--dark-navy); color: var(--white); }

.page-split .page-split-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  align-items: stretch;
  min-height: 320px;
}
.page-split .page-split-image {
  background-size: cover;
  background-position: center;
  background-color: var(--gray-bg);
  min-height: 280px;
}
.page-split .page-split-text {
  padding: 40px 44px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.page-split.image-right .page-split-inner .page-split-image { order: 2; }
.page-split.image-right .page-split-inner .page-split-text  { order: 1; }

.page-split h2 {
  font-family: var(--font-condensed);
  font-size: 34px;
  font-weight: 700;
  margin: 0 0 14px;
  line-height: 1.15;
  color: inherit;
}
.page-split .page-split-desc {
  font-size: 16px;
  line-height: 1.6;
  margin: 0 0 22px;
  color: inherit;
  opacity: 0.92;
}
.page-split .page-split-desc p:last-child { margin-bottom: 0; }
/* Links must read as links without hovering (same convention as .page-rich-text) */
.page-split-desc a { color: var(--blue); text-decoration: underline; }
.page-split-desc a:hover { color: var(--dark-navy); }
.page-split.bg-navy .page-split-desc a { color: inherit; }
.page-split .page-split-btn {
  display: inline-block;
  padding: 12px 24px;
  font-family: var(--font-condensed);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  text-decoration: none;
  background: var(--blue);
  color: var(--white);
  border: none;
  border-radius: 3px;
  align-self: flex-start;
  transition: background 0.2s ease;
}
.page-split .page-split-btn:hover { background: var(--dark-navy); }
.page-split.bg-white .page-split-btn,
.page-split.bg-gray  .page-split-btn {
  background: var(--navy);
  color: var(--white);
}
.page-split.bg-white .page-split-btn:hover,
.page-split.bg-gray  .page-split-btn:hover { background: var(--blue); }

/* ================================================================
   6. PAGE RICH TEXT
   ================================================================ */
.page-rich-text {
  padding: 40px 0;
  background: var(--white);
}
.page-rich-text.bg-gray  { background: var(--gray-bg); }
.page-rich-text.bg-white { background: var(--white); }

.page-rich-text .page-rich-text-inner {
  margin: 0 auto;
  padding: 0 20px;
}
.page-rich-text.width-narrow .page-rich-text-inner { max-width: 720px; }
.page-rich-text.width-medium .page-rich-text-inner { max-width: 900px; }
.page-rich-text.width-wide   .page-rich-text-inner { max-width: 1100px; }
.page-rich-text.width-full   .page-rich-text-inner { max-width: 100%; }

.page-rich-text.align-left   .page-rich-text-inner { text-align: left; }
.page-rich-text.align-center .page-rich-text-inner { text-align: center; }

.page-rich-text .page-rich-text-inner {
  font-size: 17px;
  line-height: 1.7;
  color: var(--gray-text-dark, #222);
}
.page-rich-text h1,
.page-rich-text h2,
.page-rich-text h3,
.page-rich-text h4 {
  font-family: var(--font-condensed);
  color: var(--dark-navy);
  line-height: 1.2;
  margin: 1.4em 0 0.5em;
}
.page-rich-text h2 { font-size: 30px; }
.page-rich-text h3 { font-size: 24px; }
.page-rich-text h4 { font-size: 19px; }
.page-rich-text p { margin: 0 0 1.1em; }
.page-rich-text ul,
.page-rich-text ol { margin: 0 0 1.1em 1.4em; }
.page-rich-text ul { list-style: disc; } /* restore bullets killed by the base.css ul reset */
.page-rich-text ol { list-style: decimal; }
.page-rich-text li { margin-bottom: 0.5em; }
.page-rich-text a { color: var(--blue); text-decoration: underline; }
.page-rich-text a:hover { color: var(--dark-navy); }
.page-rich-text blockquote {
  border-left: 4px solid var(--navy);
  padding: 4px 0 4px 20px;
  margin: 1.4em 0;
  font-style: italic;
  color: var(--gray-text);
}

/* ================================================================
   6b. PAGE CODE BLOCK
   ================================================================ */
.page-code-block {
  /* 20px, not 40: stacked code blocks have no margins, so each one's padding
     adds to its neighbour's — 40px each read as an 80px gap between pasted
     designs. 20px each lands the visible gap at the 40px the client asked for.
     Colored bands override this below, where the padding is the band itself. */
  padding: 20px 0;
  background: var(--white);
}
.page-code-block-title {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 20px;
}
.page-code-block-content {
  font-size: 17px;
  line-height: 1.7;
  color: var(--gray-text-dark, #222);
  margin-bottom: 20px;
}

/* ================================================================
   7. PAGE ARTICLE GRID
   ================================================================ */
.page-article-grid {
  padding: 30px 0 40px;
  background: var(--white);
}
.page-article-grid .page-article-grid-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-bottom: 12px;
  margin-bottom: 22px;
  border-bottom: 1px solid var(--gray-border);
}
.page-article-grid .page-article-grid-header h2 {
  font-family: var(--font-condensed);
  font-size: 22px;
  font-weight: 700;
  color: var(--dark-navy);
  margin: 0;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.page-article-grid .page-article-grid-subtitle {
  margin: -10px 0 22px;
  font-size: 15px;
  line-height: 1.5;
  color: var(--gray-text, #666);
  max-width: 70ch;
}

.page-article-grid-inner {
  display: grid;
  gap: 26px;
}

/* Optional "more" button under the grid */
.page-article-grid-actions {
  margin-top: 28px;
  text-align: center;
}
.page-article-grid-button {
  display: inline-block;
  padding: 10px 28px;
  font-family: var(--font-condensed);
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  text-decoration: none;
  color: var(--navy);
  background: transparent;
  border: 2px solid var(--navy);
  transition: background 0.15s ease, color 0.15s ease;
}
.page-article-grid-button:hover,
.page-article-grid-button:focus-visible {
  background: var(--navy);
  color: #fff;
}
.page-article-grid.cols-2 .page-article-grid-inner { grid-template-columns: repeat(2, 1fr); }
.page-article-grid.cols-3 .page-article-grid-inner { grid-template-columns: repeat(3, 1fr); }
.page-article-grid.cols-4 .page-article-grid-inner { grid-template-columns: repeat(4, 1fr); }

.page-article-grid .page-article-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.page-article-grid .page-article-card-media {
  width: 100%;
  aspect-ratio: 16 / 9;
  background: var(--gray-bg);
  background-size: cover;
  background-position: center;
  overflow: hidden;
}
.page-article-grid .page-article-card-media a { display: block; height: 100%; }
.page-article-grid .page-article-category {
  font-family: var(--font-condensed);
  font-size: 12px;
  font-weight: 700;
  color: var(--navy);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-top: 4px;
}
.page-article-grid .page-article-title {
  font-family: var(--font-condensed);
  font-size: 20px;
  font-weight: 700;
  color: var(--dark-navy);
  margin: 0;
  line-height: 1.25;
}
.page-article-grid .page-article-title a { color: inherit; text-decoration: none; }
.page-article-grid .page-article-title a:hover { color: var(--blue); }
.page-article-grid .page-article-byline {
  font-size: 13px;
  color: var(--gray-text);
}
.page-article-grid .page-article-excerpt {
  font-size: 14px;
  line-height: 1.55;
  color: var(--gray-text-dark, #333);
  margin: 0;
}

/* ================================================================
   8. PAGE TEAM
   ================================================================ */
.page-team {
  padding: 40px 0;
  background: var(--white);
}
.page-team .page-team-heading {
  font-family: var(--font-condensed);
  font-size: 24px;
  font-weight: 700;
  color: var(--dark-navy);
  text-align: center;
  margin: 0 0 28px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.page-team .page-team-inner {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
}
.page-team.count-1 .page-team-inner,
.page-team.count-2 .page-team-inner { grid-template-columns: repeat(2, 1fr); max-width: 820px; margin: 0 auto; }
.page-team.count-4 .page-team-inner { grid-template-columns: repeat(4, 1fr); }

.page-team-member {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.page-team-photo {
  width: 150px;
  height: 150px;
  border-radius: 50%;
  background: var(--gray-bg);
  background-size: cover;
  background-position: center;
  margin-bottom: 14px;
  border: 3px solid var(--white);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
}
.page-team-name {
  font-family: var(--font-condensed);
  font-size: 20px;
  font-weight: 700;
  color: var(--dark-navy);
  margin: 0 0 4px;
}
.page-team-title {
  font-size: 13px;
  font-weight: 700;
  color: var(--blue);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin: 0 0 10px;
}
.page-team-bio {
  font-size: 14px;
  line-height: 1.55;
  color: var(--gray-text-dark, #333);
  margin: 0 0 10px;
}
/* wysiwyg content brings its own <p> — let the wrapper own the spacing */
.page-team-bio > :first-child { margin-top: 0; }
.page-team-bio > :last-child  { margin-bottom: 0; }
.page-team-email {
  font-size: 13px;
  color: var(--blue);
  text-decoration: none;
  word-break: break-word;
}
.page-team-email:hover { text-decoration: underline; }

/* ================================================================
   9. PAGE SPONSOR BAR
   ================================================================ */
.page-sponsor-bar {
  padding: 24px 0;
  background: var(--gray-bg);
  border-top: 1px solid var(--gray-border);
  border-bottom: 1px solid var(--gray-border);
}
.page-sponsor-bar .page-sponsor-label {
  text-align: center;
  font-family: var(--font-condensed);
  font-size: 12px;
  font-weight: 700;
  color: var(--gray-text);
  text-transform: uppercase;
  letter-spacing: 1px;
  margin: 0 0 14px;
}
.page-sponsor-bar .page-sponsor-inner {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 36px;
}
.page-sponsor-bar .page-sponsor-item {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 6px 10px;
  transition: opacity 0.2s ease;
}
.page-sponsor-bar .page-sponsor-item:hover { opacity: 0.75; }
.page-sponsor-bar .page-sponsor-item img {
  max-height: 60px;
  max-width: 180px;
  width: auto;
  height: auto;
  object-fit: contain;
  display: block;
}

/* ================================================================
   RESPONSIVE BREAKPOINTS
   ================================================================ */
@media (max-width: 960px) {
  .page-card-grid.cols-4 .page-card-grid-inner { grid-template-columns: repeat(2, 1fr); }
  .page-article-grid.cols-4 .page-article-grid-inner { grid-template-columns: repeat(2, 1fr); }
  .page-logo-grid.cols-5 .page-logo-grid-inner,
  .page-logo-grid.cols-6 .page-logo-grid-inner { grid-template-columns: repeat(3, 1fr); }
  .page-team .page-team-inner,
  .page-team.count-4 .page-team-inner { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 768px) {
  .page-hero h1 { font-size: 34px; }
  .page-hero .page-hero-subtitle { font-size: 16px; }
  .page-hero.min-large  { min-height: 380px; }
  .page-hero.min-medium { min-height: 320px; }
  .page-hero.min-small  { min-height: 260px; }

  .page-section-header h2 { font-size: 18px; }

  .page-card-grid.cols-3 .page-card-grid-inner,
  .page-card-grid.cols-4 .page-card-grid-inner { grid-template-columns: repeat(2, 1fr); }

  .page-logo-grid.cols-3 .page-logo-grid-inner,
  .page-logo-grid.cols-4 .page-logo-grid-inner,
  .page-logo-grid.cols-5 .page-logo-grid-inner,
  .page-logo-grid.cols-6 .page-logo-grid-inner { grid-template-columns: repeat(3, 1fr); }

  .page-split .page-split-inner {
    grid-template-columns: 1fr;
  }
  .page-split.image-right .page-split-inner .page-split-image { order: 1; }
  .page-split.image-right .page-split-inner .page-split-text  { order: 2; }
  .page-split .page-split-image { min-height: 220px; }
  .page-split .page-split-text { padding: 28px 24px; }
  .page-split h2 { font-size: 26px; }

  .page-article-grid.cols-3 .page-article-grid-inner,
  .page-article-grid.cols-4 .page-article-grid-inner { grid-template-columns: repeat(2, 1fr); }

  .page-team .page-team-inner,
  .page-team.count-4 .page-team-inner { grid-template-columns: repeat(2, 1fr); gap: 24px; }
  .page-team-photo { width: 120px; height: 120px; }

  .page-sponsor-bar .page-sponsor-inner { gap: 24px; }
  .page-sponsor-bar .page-sponsor-item img { max-height: 48px; max-width: 140px; }

  .page-rich-text { padding: 30px 0; }
  .page-rich-text .page-rich-text-inner { font-size: 16px; }
  .page-rich-text h2 { font-size: 26px; }
  .page-rich-text h3 { font-size: 21px; }
}

@media (max-width: 480px) {
  .page-hero h1 { font-size: 28px; }
  .page-hero .page-hero-subtitle { font-size: 15px; }
  .page-hero .container { padding-top: 40px; padding-bottom: 28px; }

  .page-card-grid.cols-2 .page-card-grid-inner,
  .page-card-grid.cols-3 .page-card-grid-inner,
  .page-card-grid.cols-4 .page-card-grid-inner { grid-template-columns: 1fr; }

  .page-logo-grid .page-logo-grid-inner { grid-template-columns: repeat(2, 1fr) !important; }

  .page-article-grid.cols-2 .page-article-grid-inner,
  .page-article-grid.cols-3 .page-article-grid-inner,
  .page-article-grid.cols-4 .page-article-grid-inner { grid-template-columns: 1fr; }

  .page-team .page-team-inner { grid-template-columns: 1fr !important; }
  .page-team-photo { width: 140px; height: 140px; }

  .page-split h2 { font-size: 22px; }
  .page-split .page-split-desc { font-size: 15px; }
  .page-split .page-split-text { padding: 24px 18px; }

  .page-sponsor-bar .page-sponsor-inner { gap: 18px; }
  .page-sponsor-bar .page-sponsor-item img { max-height: 40px; max-width: 110px; }
}

/* =========================================================================
   Page Image (standalone image section)
   ========================================================================= */
.page-image {
    padding: 32px 0;
}
.page-image .page-image-figure {
    margin: 0 auto;
}
.page-image.width-narrow .page-image-figure { max-width: 720px; }
.page-image.width-medium .page-image-figure { max-width: 900px; }
.page-image.width-wide .page-image-figure { max-width: 1100px; }
.page-image.width-full .page-image-figure { max-width: 100%; }

.page-image.align-left .page-image-figure { margin-left: 0; }
.page-image.align-right .page-image-figure { margin-right: 0; }
.page-image.align-center .page-image-figure { margin-left: auto; margin-right: auto; }

.page-image-img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 4px;
}
.page-image-caption {
    margin-top: 8px;
    font-size: 14px;
    color: var(--gray-text);
    line-height: 1.4;
}
.page-image-caption-text {
    display: block;
}
.page-image-credit {
    display: inline-block;
    margin-top: 4px;
    font-size: 12px;
    color: var(--gray-text);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* =========================================================================
   Override Brightspot's oversized inline styles for vpm-highlights cards
   ========================================================================= */
.vpm-highlights .vpm-card h3 {
    font-size: 1.5rem !important;
}
.vpm-highlights .vpm-card p {
    font-size: 1rem !important;
}
.vpm-highlights .vpm-card ul li {
    font-size: 0.95rem !important;
}
.vpm-highlights {
    padding: 3rem 1.5rem !important;
    border-radius: 8px;
}
.vpm-highlights .vpm-card {
    padding: 1.5rem 2rem !important;
    min-height: 180px !important;
}

/* =====================================================================
   Inline section embeds — [vpm_section] inside post/page content.
   Sections render constrained to the content column (no full-bleed).
   ===================================================================== */
.bsm-inline-section {
    margin: 24px 0;
    max-width: 100%;
    overflow-x: hidden;
}
.bsm-inline-section > * {
    max-width: 100%;
}
/* Sections assume a page-width .container with horizontal padding;
   inside the article column that padding doubles up — remove it. */
.bsm-inline-section .container {
    max-width: 100%;
    padding-left: 0;
    padding-right: 0;
}

/* =====================================================================
   Grid / Columns section (page_grid) + blocks
   ===================================================================== */
.page-grid { padding: 48px 0; }
.page-grid.bg-gray { background: #f5f5f5; }
.page-grid.bg-navy { background: var(--navy); color: var(--white); }
.page-grid.bg-navy a { color: inherit; }
.page-grid-header { display: flex; align-items: center; gap: 10px; margin-bottom: 28px; }
.page-grid-title { margin: 0; font-size: 28px; }
.page-grid-cols { display: grid; gap: 32px; }
/* Column vertical alignment (when one column is taller than another).
   Default is stretch — set on the Grid section's "Column Vertical Alignment". */
.page-grid-cols.valign-top    { align-items: start; }
.page-grid-cols.valign-center { align-items: center; }
.page-grid-cols.valign-bottom { align-items: end; }
.page-grid-cols.cols-1 { grid-template-columns: 1fr; }
.page-grid-cols.cols-2 { grid-template-columns: repeat(2, 1fr); }
.page-grid-cols.cols-3 { grid-template-columns: repeat(3, 1fr); }
.page-grid-cols.cols-4 { grid-template-columns: repeat(4, 1fr); }
/* Weighted layouts (matches the site's 70/30 archive pattern) */
.page-grid-cols.cols-2-70-30 { grid-template-columns: 7fr 3fr; }
.page-grid-cols.cols-2-30-70 { grid-template-columns: 3fr 7fr; }
.page-grid-cols.cols-3-50-25-25 { grid-template-columns: 2fr 1fr 1fr; }
@media (max-width: 1023px) {
    .page-grid-cols.cols-3,
    .page-grid-cols.cols-3-50-25-25,
    .page-grid-cols.cols-4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 767px) {
    .page-grid-cols.cols-2,
    .page-grid-cols.cols-2-70-30,
    .page-grid-cols.cols-2-30-70,
    .page-grid-cols.cols-3,
    .page-grid-cols.cols-3-50-25-25,
    .page-grid-cols.cols-4 { grid-template-columns: 1fr; }
}
.page-grid-col { min-width: 0; }
.page-grid-block { margin: 0 0 24px; }
.page-grid-block:last-child { margin-bottom: 0; }

/* Per-item "Top Spacing" — an empty spacer rendered before a column item to
   push it down (e.g. align a sidebar card with a neighbor column that opens
   with a section header, ~72px). Sizes track bsm_grid_space_top_field().
   Collapsed on mobile, where columns stack and alignment is moot. */
.bsm-col-spacer { width: 100%; }
.bsm-col-spacer--small  { height: 24px; }
.bsm-col-spacer--medium { height: 48px; }
.bsm-col-spacer--large  { height: 72px; }
@media (max-width: 668px) {
    .bsm-col-spacer { height: 0; }
}

/* Section instances inside a grid column: strip the full-width margin/padding
   that sections normally carry and collapse their .container widths so they
   fit the column without overflowing. */
.page-grid-col > .page-section { margin: 0 0 24px; padding: 0; }
.page-grid-col > .page-section:last-child { margin-bottom: 0; }
.page-grid-col .page-section > .container { width: 100%; max-width: none; padding-left: 0; padding-right: 0; }
.block-heading.align-center { text-align: center; }
.block-rich-text ul,
.block-rich-text ol { margin: 0 0 1.1em 1.4em; }
.block-rich-text ul { list-style: disc; } /* restore bullets killed by the base.css ul reset */
.block-rich-text ol { list-style: decimal; }
/* Links must read as links without hovering — same convention as .page-rich-text.
   On .page-grid.bg-navy the `a { color: inherit }` override keeps them white;
   the underline still applies there. */
.block-rich-text a { color: var(--blue); text-decoration: underline; }
.block-rich-text a:hover { color: var(--dark-navy); }
.block-image .block-image-img { max-width: 100%; height: auto; display: block; }
.block-image-caption { font-size: 13px; color: #666; margin-top: 6px; }
.page-grid.bg-navy .block-image-caption { color: rgba(255,255,255,0.75); }
.block-button.align-center { text-align: center; }
.block-button-link {
    display: inline-block;
    padding: 12px 28px;
    font-weight: 700;
    text-decoration: none;
    transition: opacity 0.15s ease;
}
.block-button-link:hover { opacity: 0.85; }
.block-button-link.style-primary { background: var(--navy); color: #fff; }
.page-grid.bg-navy .block-button-link.style-primary { background: #fff; color: var(--navy); }
.block-button-link.style-outline { border: 2px solid currentColor; color: var(--navy); }
.page-grid.bg-navy .block-button-link.style-outline { color: #fff; }
.block-mini-feed { list-style: none; margin: 0; padding: 0; }
.block-mini-feed-item { padding: 10px 0; border-bottom: 1px solid rgba(0,0,0,0.08); }
.page-grid.bg-navy .block-mini-feed-item { border-bottom-color: rgba(255,255,255,0.2); }
.block-mini-feed-title { display: block; font-weight: 700; text-decoration: none; }
.block-mini-feed-date { font-size: 13px; color: #666; }
.page-grid.bg-navy .block-mini-feed-date { color: rgba(255,255,255,0.75); }
/* Optional heading above a Mini Article Feed (matches the Article List block header). */
.block-mini-feed-heading {
    font-family: var(--font-condensed);
    font-size: 16px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--dark-navy);
    margin: 0 0 12px;
    padding-bottom: 8px;
    border-bottom: 2px solid var(--navy);
}
.page-grid.bg-navy .block-mini-feed-heading { color: var(--yellow); border-bottom-color: var(--yellow); }
.block-divider { border: 0; border-top: 1px solid rgba(0,0,0,0.12); }
.page-grid.bg-navy .block-divider { border-top-color: rgba(255,255,255,0.25); }
.block-divider.spacing-small { margin: 12px 0; }
.block-divider.spacing-medium { margin: 24px 0; }
.block-divider.spacing-large { margin: 48px 0; }

/* ---- Article List block ---- */
.block-article-list-title {
    font-family: var(--font-condensed);
    font-size: 16px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--dark-navy);
    margin: 0 0 16px;
    padding-bottom: 8px;
    border-bottom: 2px solid var(--navy);
}
.page-grid.bg-navy .block-article-list-title { color: var(--yellow); border-bottom-color: var(--yellow); }

/* Inner 2-column grid within the host column */
.block-article-list.cols-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; }
.block-article-list.cols-1 { display: block; }

/* Cards inherit .page-article-grid styles but need a media aspect when
   living in a narrow column — enforce 16/9 via aspect-ratio. */
.block-article-list .page-article-card { display: flex; flex-direction: column; gap: 8px; }
.block-article-list .page-article-card-media {
    width: 100%;
    aspect-ratio: 16 / 9;
    min-height: 100px;
    background: var(--gray-bg);
    overflow: hidden;
}
.block-article-list .page-article-card-media a { display: block; height: 100%; }
.block-article-list .page-article-category {
    font-family: var(--font-condensed);
    font-size: 12px;
    font-weight: 700;
    color: var(--navy);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-top: 4px;
}
.page-grid.bg-navy .block-article-list .page-article-category { color: var(--yellow); }
.block-article-list .page-article-title {
    font-family: var(--font-condensed);
    font-size: 18px;
    font-weight: 700;
    color: var(--dark-navy);
    margin: 0;
    line-height: 1.25;
}
.page-grid.bg-navy .block-article-list .page-article-title { color: var(--white); }
.block-article-list .page-article-title a { color: inherit; text-decoration: none; }
.block-article-list .page-article-title a:hover { color: var(--blue); }
.page-grid.bg-navy .block-article-list .page-article-title a:hover { color: rgba(255,255,255,0.75); }
.block-article-list .page-article-byline { font-size: 13px; color: var(--gray-text); }
.page-grid.bg-navy .block-article-list .page-article-byline { color: rgba(255,255,255,0.75); }
.block-article-list .page-article-excerpt { font-size: 13px; line-height: 1.5; color: var(--gray-text-dark, #333); margin: 0; }
.page-grid.bg-navy .block-article-list .page-article-excerpt { color: rgba(255,255,255,0.85); }

/* Stacking: add bottom margin between cards (cols-1 flow, cols-2 grid gap handles it) */
.block-article-list.cols-1 .page-article-card { margin-bottom: 20px; }
.block-article-list.cols-1 .page-article-card:last-child { margin-bottom: 0; }

/* Responsive: collapse inner 2-col to 1 on mobile */
@media (max-width: 767px) {
    .block-article-list.cols-2 { grid-template-columns: 1fr; }
}

/* ---- Call to Action block ---- */
.block-cta { padding: 24px; border-radius: 4px; }
.block-cta.bg-white { background: var(--white); border: 1px solid var(--gray-border, #e0e0e0); }
.block-cta.bg-gray  { background: var(--gray-bg, #f5f5f5); }
.block-cta.bg-navy  { background: var(--navy); color: var(--white); }
.block-cta-title {
    font-family: var(--font-condensed);
    font-size: 20px;
    font-weight: 700;
    margin: 0 0 12px;
    line-height: 1.2;
}
.block-cta.bg-navy .block-cta-title { color: var(--white); }
.block-cta-text { font-size: 14px; line-height: 1.6; margin-bottom: 20px; }
.block-cta.bg-navy .block-cta-text a { color: rgba(255,255,255,0.85); }
.block-cta-button {
    display: inline-block;
    padding: 12px 28px;
    font-weight: 700;
    font-size: 14px;
    text-decoration: none;
    border-radius: 2px;
    transition: opacity 0.15s ease;
}
.block-cta-button:hover { opacity: 0.85; }
.block-cta-button.style-primary { background: var(--navy); color: #fff; }
.block-cta.bg-navy .block-cta-button.style-primary { background: #fff; color: var(--navy); }
.block-cta-button.style-outline { border: 2px solid var(--navy); color: var(--navy); background: transparent; }
.block-cta.bg-navy .block-cta-button.style-outline { border-color: #fff; color: #fff; }

/* Category builder pages reuse the archive shell */
.CategoryBuilder-page { padding-bottom: 40px; }

/* Load More on Category Articles AND Episodes Feed builder sections.
   Mirrors .ShowP-more-link (cpt.css), which doesn't load on category or
   builder pages — plus <button> UA-style resets (the show pages use the
   same class on a button too, but cpt.css carries it there). */
.CategoryFeed .EpisodesFeed-more,
.page-episodes-feed .EpisodesFeed-more {
    text-align: center;
    margin-top: 24px;
}
.CategoryFeed .bsm-load-more,
.page-episodes-feed .bsm-load-more {
    display: inline-block;
    padding: 10px 28px;
    background: transparent;
    border: 2px solid var(--navy, #003865);
    border-radius: 4px;
    color: var(--navy, #003865);
    font-family: inherit;
    font-size: 14px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    text-decoration: none;
    cursor: pointer;
    transition: background-color 0.2s ease, color 0.2s ease;
}
.CategoryFeed .bsm-load-more:hover,
.page-episodes-feed .bsm-load-more:hover {
    background: var(--navy, #003865);
    color: var(--white, #fff);
}

/* ---- Facebook Feed section ---- */
.page-facebook-feed .page-facebook-feed-embed {
    display: flex;
}
.page-facebook-feed.align-center .page-facebook-feed-embed {
    justify-content: center;
}
.page-facebook-feed.align-left .page-facebook-feed-embed {
    justify-content: flex-start;
}

/* ================================================================
   PAGE STATS ROW ("By the Numbers")
   ================================================================ */
.page-stats {
  padding: 48px 0;
}
.page-stats.bg-navy  { background: var(--navy); }
.page-stats.bg-white { background: var(--white); }
.page-stats.bg-gray  { background: var(--gray-bg); }

.page-stats-title {
  font-family: var(--font-primary);
  font-size: 18px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin: 0 0 32px;
}
.page-stats.bg-navy .page-stats-title { color: var(--yellow); }
.page-stats.bg-white .page-stats-title,
.page-stats.bg-gray  .page-stats-title { color: var(--navy); }

.page-stats-grid {
  display: grid;
  gap: 32px;
}
.page-stats.cols-2 .page-stats-grid { grid-template-columns: repeat(2, 1fr); }
.page-stats.cols-3 .page-stats-grid { grid-template-columns: repeat(3, 1fr); }
.page-stats.cols-4 .page-stats-grid { grid-template-columns: repeat(4, 1fr); }

.page-stats-item {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-left: 20px;
  border-left: 3px solid rgba(255, 255, 255, 0.25);
}
.page-stats.bg-white .page-stats-item,
.page-stats.bg-gray  .page-stats-item { border-left-color: rgba(0, 56, 101, 0.2); }

.page-stats-number {
  font-family: var(--font-condensed);
  font-size: 48px;
  font-weight: 700;
  line-height: 1;
}
.page-stats.bg-navy .page-stats-number { color: var(--yellow); }
.page-stats.bg-white .page-stats-number,
.page-stats.bg-gray  .page-stats-number { color: var(--navy); }

.page-stats-label {
  font-size: 15px;
  line-height: 1.45;
}
.page-stats.bg-navy .page-stats-label { color: rgba(255, 255, 255, 0.92); }
.page-stats.bg-white .page-stats-label,
.page-stats.bg-gray  .page-stats-label { color: var(--gray-text); }

@media (max-width: 900px) {
  .page-stats.cols-3 .page-stats-grid,
  .page-stats.cols-4 .page-stats-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
  .page-stats.cols-2 .page-stats-grid,
  .page-stats.cols-3 .page-stats-grid,
  .page-stats.cols-4 .page-stats-grid { grid-template-columns: 1fr; }
  .page-stats-grid { gap: 24px; }
  .page-stats-number { font-size: 40px; }
}

/* ================================================================
   PAGE GALLERY
   ================================================================ */
.page-gallery {
  padding: 56px 0;
}

.page-gallery-title {
  font-family: var(--font-primary);
  font-size: 22px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin: 0 0 32px;
}
.page-gallery.bg-navy .page-gallery-title { color: var(--yellow); }
.page-gallery.bg-white .page-gallery-title,
.page-gallery.bg-gray  .page-gallery-title { color: var(--navy); }
.page-gallery.bg-navy .bsm-gallery-item { color: var(--white, #fff); }

/* When a background color is set the section reads as a contained band —
   inset the content so the heading + images don't run to the band edges.
   White (no visible band) keeps the standard content-column alignment. */
.page-gallery.bg-gray,
.page-gallery.bg-navy {
  padding: 48px 0;
}
.page-gallery.bg-gray .container,
.page-gallery.bg-navy .container {
  padding-left: 40px;
  padding-right: 40px;
}

@media (max-width: 680px) {
  .page-gallery { padding: 40px 0; }
  .page-gallery.bg-gray .container,
  .page-gallery.bg-navy .container {
    padding-left: 24px;
    padding-right: 24px;
  }
}

/* ================================================================
   PAGE HERO — ZERO STATE (no background image configured)
   Compact, content-height navy band with a yellow accent rule.
   ================================================================ */
.page-hero.page-hero--no-image,
.page-hero.page-hero--no-image.min-small,
.page-hero.page-hero--no-image.min-medium,
.page-hero.page-hero--no-image.min-large {
  min-height: 0;
  background: linear-gradient(135deg, var(--navy) 0%, var(--dark-navy) 100%);
}
.page-hero.page-hero--no-image .container,
.page-hero.page-hero--no-image.min-small  .container,
.page-hero.page-hero--no-image.min-medium .container,
.page-hero.page-hero--no-image.min-large  .container {
  min-height: 0;
  align-items: flex-start;
  padding-top: 56px;
  padding-bottom: 56px;
}
.page-hero.page-hero--no-image .page-hero-content::before {
  content: "";
  display: block;
  width: 64px;
  height: 5px;
  background: var(--yellow);
  margin-bottom: 20px;
}
.page-hero.page-hero--no-image.align-center .page-hero-content::before { margin-left: auto; margin-right: auto; }
.page-hero.page-hero--no-image.align-right  .page-hero-content::before { margin-left: auto; }
.page-hero.page-hero--no-image h1,
.page-hero.page-hero--no-image .page-hero-subtitle { text-shadow: none; }

@media (max-width: 680px) {
  .page-hero.page-hero--no-image .container,
  .page-hero.page-hero--no-image.min-small  .container,
  .page-hero.page-hero--no-image.min-medium .container,
  .page-hero.page-hero--no-image.min-large  .container {
    padding-top: 40px;
    padding-bottom: 40px;
  }
}

/* ---- Scrolling Ticker section ---- */
.page-ticker { overflow: hidden; }
.page-ticker__viewport {
    display: block;
    padding: 10px 0;
    text-decoration: none;
    overflow: hidden;
    white-space: nowrap;
}
.page-ticker__track {
    display: inline-block;
    white-space: nowrap;
    animation: bsm-ticker-scroll 30s linear infinite;
    will-change: transform;
}
.page-ticker--slow   .page-ticker__track { animation-duration: 50s; }
.page-ticker--fast   .page-ticker__track { animation-duration: 18s; }
.page-ticker__item {
    display: inline-block;
    padding: 0 48px;
    font-weight: 700;
    font-size: 15px;
    letter-spacing: 0.02em;
}
.page-ticker--navy   { background: var(--navy, #003865); }
.page-ticker--navy   .page-ticker__item { color: var(--white, #fff); }
.page-ticker--green  { background: #4a9462; }
.page-ticker--green  .page-ticker__item { color: var(--white, #fff); }
.page-ticker--yellow { background: var(--yellow, #fdc626); }
.page-ticker--yellow .page-ticker__item { color: var(--navy, #003865); }
.page-ticker--red    { background: #b51224; }
.page-ticker--red    .page-ticker__item { color: var(--white, #fff); }
.page-ticker__viewport:hover .page-ticker__track { animation-play-state: paused; }
@keyframes bsm-ticker-scroll {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
    .page-ticker__track { animation: none; text-align: center; display: block; }
    .page-ticker__item:not(:first-child) { display: none; }
    .page-ticker__item:first-child { padding: 0 16px; white-space: normal; }
}

/* ================================================================
   PROMO LIST (curated content cards — Brightspot "promos")
   Mirrors the Article Grid card recipe; .square comes from the
   shared section-header pattern.
   ================================================================ */
.page-promo-list { padding: 28px 0; }
.page-promo-list .page-promo-list-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-bottom: 12px;
  margin-bottom: 22px;
  border-bottom: 1px solid var(--gray-border);
}
.page-promo-list .page-promo-list-header h2 {
  font-family: var(--font-condensed);
  font-size: 22px;
  font-weight: 700;
  color: var(--dark-navy);
  margin: 0;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.page-promo-list-inner {
  display: grid;
  gap: 26px;
}
.page-promo-list.cols-2 .page-promo-list-inner { grid-template-columns: repeat(2, 1fr); }
.page-promo-list.cols-3 .page-promo-list-inner { grid-template-columns: repeat(3, 1fr); }
.page-promo-list.cols-4 .page-promo-list-inner { grid-template-columns: repeat(4, 1fr); }
.page-promo-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.page-promo-card .page-promo-card-media {
  width: 100%;
  aspect-ratio: 16 / 9;
  background: var(--gray-bg);
  overflow: hidden;
}
.page-promo-card .page-promo-category {
  font-family: var(--font-condensed);
  font-size: 12px;
  font-weight: 700;
  color: var(--navy);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-top: 4px;
}
.page-promo-card .page-promo-title {
  font-family: var(--font-condensed);
  font-size: 18px;
  font-weight: 700;
  color: var(--dark-navy);
  margin: 0;
  line-height: 1.25;
}
.page-promo-card .page-promo-title a { color: inherit; text-decoration: none; }
.page-promo-card .page-promo-title a:hover { color: var(--blue); }
.page-promo-card .page-promo-excerpt {
  font-size: 14px;
  line-height: 1.55;
  color: var(--gray-text-dark, #333);
  margin: 0;
}
@media (max-width: 1023px) {
  .page-promo-list.cols-3 .page-promo-list-inner,
  .page-promo-list.cols-4 .page-promo-list-inner { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
  .page-promo-list.cols-2 .page-promo-list-inner,
  .page-promo-list.cols-3 .page-promo-list-inner,
  .page-promo-list.cols-4 .page-promo-list-inner { grid-template-columns: 1fr; }
}
/* Anchored promo lists: land below the sticky header on jump-to clicks */
.page-promo-list[id] { scroll-margin-top: 140px; }

/* ================================================================
   INTRO + JUMP-TO NAV (page_anchor_nav)
   Banner + intro + auto-discovered anchor buttons. Ported from the
   Brightspot arts-and-culture "Header Intro - Cards" raw module.
   ================================================================ */
html:has(.page-anchor-nav) { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html:has(.page-anchor-nav) { scroll-behavior: auto; }
}
.page-anchor-nav-banner,
.page-anchor-nav-intro { width: 100vw; position: relative; left: 50%; margin-left: -50vw; }
.page-anchor-nav-banner { line-height: 0; }
.page-anchor-nav-banner img { display: block; width: 100%; height: auto; }
.page-anchor-nav-intro {
  background: var(--white, #fff);
  border-bottom: 4px solid var(--yellow, #E0E721);
  padding: 44px 40px 48px;
  font-family: var(--font-primary, Helvetica, Arial, sans-serif);
}
.page-anchor-nav-inner { max-width: 1100px; margin: 0 auto; display: flex; flex-direction: column; gap: 32px; }
.page-anchor-nav-text { font-size: 16px; line-height: 1.7; color: #444; }
.page-anchor-nav-text p { margin: 0 0 0.8em; }
.page-anchor-nav-text p:last-child { margin-bottom: 0; }
.page-anchor-nav-text strong { color: var(--gray-text-dark, #101820); font-weight: 700; }
.page-anchor-nav-links { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.page-anchor-nav-label {
  font-size: 14px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase;
  color: #B2B4B2; margin-right: 4px; flex-shrink: 0;
}
.page-anchor-nav-links a {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 9px 16px;
  border: 1.5px solid var(--navy, #003865); border-radius: 2px;
  font-size: 14px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--navy, #003865); text-decoration: none; background: transparent;
  transition: background 0.15s ease, color 0.15s ease;
}
.page-anchor-nav-links a:hover { background: var(--navy, #003865); color: #fff; }
.page-anchor-nav-links a svg { width: 10px; height: 10px; opacity: 0.5; flex-shrink: 0; }
.page-anchor-nav-links a:hover svg { opacity: 0.8; }
@media (max-width: 600px) {
  .page-anchor-nav-intro { padding: 32px 20px 36px; }
  .page-anchor-nav-links a { font-size: 13px; padding: 8px 13px; }
}

/* Resolved Brightspot inline images (bsm_resolve_bsp_images) in rich text */
.page-rich-text .bsm-inline-image { margin: 1.5em 0; }
.page-rich-text .bsm-inline-image img { display: block; width: 100%; height: auto; }
.page-rich-text .bsm-inline-image figcaption { font-size: 13px; color: #555; margin-top: 6px; line-height: 1.4; }
.page-rich-text .bsm-inline-image figcaption .credit { color: #888; }

/* Resolved Brightspot embeds (bsp-module/bsp-video rawHtml iframes) */
.page-rich-text .bsm-embed { margin: 1.5em 0; }
.page-rich-text .bsm-embed iframe { max-width: 100%; }
.page-rich-text .instagram-media { margin: 1.5em auto !important; }

/* Whole-card click without nested anchors: a stretched-link overlay covers the
   card; links inside the description are elevated above it so they stay live. */
.page-card.has-link { position: relative; }
.page-card .page-card-link { position: absolute; inset: 0; z-index: 1; border: 0; background: transparent; }
.page-card.has-link .page-card-desc a { position: relative; z-index: 2; }

/* Recovered Brightspot intro text (bsp-intro-text) */
.page-rich-text .bsm-intro { font-size: 1.15em; line-height: 1.5; color: #333; font-weight: 500; margin: 0 0 1em; }