/* ============================================================
   ALPHA LAMBDA PSI MILITARY FRATERNITY, INCORPORATED
   styles.css — Brand Design System
   ============================================================ */

/* ─── RESET / BASE ─────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; font-size: 16px; }
body {
  font-family: var(--font-body);
  background: var(--alp-white);
  color: var(--alp-indigo);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; }
button { cursor: pointer; border: none; background: none; font-family: inherit; }

/* ─── VARIABLES ─────────────────────────────────────────────── */
:root {
  /* Brand Colors */
  --alp-indigo:          #0B1F3A;
  --alp-indigo-deep:     #061426;
  --alp-indigo-mid:      #102d52;
  --alp-carolina:        #74B9E6;
  --alp-carolina-light:  #A7D5F2;
  --alp-silver:          #C7CCD1;
  --alp-silver-light:    #EEF1F4;
  --alp-white:           #FFFFFF;
  --alp-charcoal:        #1B2530;
  --alp-black:           #111111;
  --alp-overlay:         rgba(6, 20, 38, 0.88);
  --alp-overlay-mid:     rgba(11, 31, 58, 0.75);

  /* Typography */
  --font-heading: 'Cormorant Garamond', 'Libre Baskerville', Georgia, serif;
  --font-body:    'Inter', 'Source Sans 3', system-ui, sans-serif;

  /* Spacing */
  --section-pad:  44px;
  --section-sm:   34px;
  --container:    1240px;
  --container-sm: 900px;
  --gutter:       clamp(16px, 4vw, 32px);

  /* Transitions */
  --trans: 0.25s ease;
  --trans-slow: 0.45s ease;

  /* Radii */
  --radius:  4px;
  --radius-lg: 8px;
}

/* ─── TYPOGRAPHY ─────────────────────────────────────────────── */
h1, h2, h3, h4 { font-family: var(--font-heading); line-height: 1.15; }
h1 { font-size: clamp(2rem, 5vw, 3.5rem); font-weight: 700; }
h2 { font-size: clamp(1.75rem, 3.5vw, 2.6rem); font-weight: 600; }
h3 { font-size: clamp(1.1rem, 2vw, 1.4rem); font-weight: 600; }
p  { font-size: 1rem; }

.section-label {
  font-family: var(--font-body);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--alp-carolina);
  display: block;
  margin-bottom: 10px;
}
.section-label--dark { color: var(--alp-indigo); }

.section-heading { color: var(--alp-indigo); margin-bottom: 12px; }
.section-heading--light { color: var(--alp-white); }
.section-heading--carolina { color: var(--alp-carolina); }

.section-sub {
  font-size: 1rem;
  color: var(--alp-charcoal);
  max-width: 640px;
  margin-bottom: 24px;
}
.section-sub--light { color: var(--alp-silver-light); }

.greek-letters {
  font-family: var(--font-heading);
  font-size: 1.4rem;
  letter-spacing: 0.15em;
  color: var(--alp-carolina);
}

/* ─── LAYOUT ─────────────────────────────────────────────────── */
.container {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--gutter);
}
.container--sm { max-width: var(--container-sm); }

.section-pad {
  padding: var(--section-pad) 0;
}
.section-pad--sm {
  padding: var(--section-sm) 0;
}

/* Two-column grid utility */
.two-col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 56px;
  align-items: start;
}
.two-col--center { align-items: center; }
/* Vision / Tonya section: image column stretches to match copy height */
.visionary-layout {
  display: grid;
  grid-template-columns: minmax(300px, 0.82fr) minmax(0, 1.35fr);
  gap: 56px;
  align-items: stretch;
}

/* Divider line */
.divider-line {
  width: 60px;
  height: 2px;
  background: var(--alp-carolina);
  margin: 14px 0 22px;
}
.divider-line--silver { background: var(--alp-silver); }
.divider-line--center { margin: 14px auto 22px; }

/* ─── BUTTONS ────────────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 13px 28px;
  font-family: var(--font-body);
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  border-radius: var(--radius);
  transition: background var(--trans), color var(--trans), border-color var(--trans), transform var(--trans);
}
.btn-primary {
  background: var(--alp-carolina);
  color: var(--alp-indigo-deep);
  border: 2px solid var(--alp-carolina);
}
.btn-primary:hover, .btn-primary:focus-visible {
  background: var(--alp-carolina-light);
  border-color: var(--alp-carolina-light);
  transform: translateY(-2px);
}
.btn-secondary {
  background: transparent;
  color: var(--alp-white);
  border: 2px solid var(--alp-silver);
}
.btn-secondary:hover, .btn-secondary:focus-visible {
  border-color: var(--alp-carolina);
  color: var(--alp-carolina);
  transform: translateY(-2px);
}
.btn-outline-dark {
  background: transparent;
  color: var(--alp-indigo);
  border: 2px solid var(--alp-indigo);
}
.btn-outline-dark:hover, .btn-outline-dark:focus-visible {
  background: var(--alp-indigo);
  color: var(--alp-white);
}
.btn-ghost-light {
  background: transparent;
  color: var(--alp-carolina);
  border: 2px solid var(--alp-carolina);
}
.btn-ghost-light:hover, .btn-ghost-light:focus-visible {
  background: var(--alp-carolina);
  color: var(--alp-indigo-deep);
}
.btn-lg { padding: 13px 28px; min-height: 48px; font-size: 0.85rem; }

/* ─── TRIDENT SVG ────────────────────────────────────────────── */
.trident-icon {
  color: var(--alp-carolina);
  display: inline-block;
}
.trident-icon--sm  { width: 28px; height: 42px; }
.trident-icon--md  { width: 42px; height: 63px; }
.trident-icon--lg  { width: 60px; height: 90px; }
.trident-icon--xl  { width: 80px; height: 120px; }
.trident-icon--white { color: rgba(255,255,255,0.18); }
.trident-icon--silver { color: var(--alp-silver); }

/* ─── HEADER ─────────────────────────────────────────────────── */
#site-header {
  position: sticky;
  top: 0;
  z-index: 1000;
  background: var(--alp-indigo-deep);
  border-bottom: 1px solid rgba(116, 185, 230, 0.15);
  transition: box-shadow var(--trans);
}
#site-header.header-scrolled {
  box-shadow: 0 4px 24px rgba(0,0,0,0.4);
}

/* 2026-08-30: intentional same-page section-anchor targets — the
   sticky header is 76px tall (.header-inner min-height below), so
   each of these gets scroll-margin-top: header height + ~16px, per
   the site-wide nav/scroll cleanup. Plain page-to-page links need no
   such treatment: loading a new HTML document already starts at the
   top by default, and this site has no client-side router to add
   scroll-restoration logic to. */
#contact-form,
#membership-interest,
#footer-newsletter {
  scroll-margin-top: 92px;
}

.header-inner {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--gutter);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  min-height: 76px;
}

.header-brand { display: flex; align-items: center; gap: 14px; flex-shrink: 0; }
.header-brand a { display: flex; align-items: center; gap: 14px; }

.header-crest {
  height: 56px;
  width: auto;
  object-fit: contain;
  flex-shrink: 0;
}

.brand-text { display: flex; flex-direction: column; }
.brand-name {
  font-family: var(--font-heading);
  font-size: 1rem;
  font-weight: 700;
  color: var(--alp-white);
  letter-spacing: 0.08em;
  line-height: 1.1;
}
.brand-sub {
  font-family: var(--font-body);
  font-size: 0.6rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--alp-silver);
  line-height: 1.2;
}
.brand-motto {
  font-family: var(--font-body);
  font-size: 0.62rem;
  color: var(--alp-carolina);
  font-style: italic;
  margin-top: 2px;
}

/* ─── NAVIGATION ─────────────────────────────────────────────── */
.header-nav-wrapper {
  display: flex;
  align-items: center;
  gap: 20px;
}

.nav-list {
  display: flex;
  align-items: center;
  gap: 2px;
}
.nav-list li a {
  display: block;
  padding: 8px 10px;
  font-family: var(--font-body);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--alp-silver-light);
  position: relative;
  transition: color var(--trans);
}
.nav-list li a::after {
  content: '';
  position: absolute;
  bottom: 4px;
  left: 10px;
  right: 10px;
  height: 1px;
  background: var(--alp-carolina);
  transform: scaleX(0);
  transition: transform var(--trans);
  transform-origin: left;
}
.nav-list li a:hover,
.nav-list li a:focus-visible { color: var(--alp-carolina); }
.nav-list li a:hover::after,
.nav-list li a:focus-visible::after { transform: scaleX(1); }

.members-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 9px 18px;
  background: var(--alp-carolina);
  color: var(--alp-indigo-deep);
  font-family: var(--font-body);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border-radius: var(--radius);
  flex-shrink: 0;
  transition: background var(--trans), transform var(--trans);
}
.members-btn:hover, .members-btn:focus-visible {
  background: var(--alp-carolina-light);
  transform: translateY(-1px);
}
.members-btn .member-icon { font-size: 0.9rem; }

.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 40px;
  height: 40px;
  gap: 6px;
  background: transparent;
  border: none;
  cursor: pointer;
  flex-shrink: 0;
}
.nav-toggle span {
  display: block;
  width: 26px;
  height: 2px;
  background: var(--alp-carolina);
  border-radius: 2px;
  transition: transform var(--trans), opacity var(--trans);
}
.nav-toggle.is-open span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
.nav-toggle.is-open span:nth-child(2) { opacity: 0; transform: scaleX(0); }
.nav-toggle.is-open span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

/* ─── HERO ───────────────────────────────────────────────────── */
.hero {
  position: relative;
  width: 100%;
  min-height: 470px;
  height: clamp(440px, 31vw, 540px);
  display: flex;
  align-items: center;
  overflow: hidden;
  /* new image has dark-left composition built in — no solid colour block needed */
  background-color: #041929;
}
/* Left-side blend — dissolves the navy text panel into the Poseidon image so the
   two halves read as one continuous scene instead of a hard center seam. */
.hero::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    #041929 0%,
    #041929 18%,
    rgba(4,25,41,.95) 32%,
    rgba(4,25,41,.72) 46%,
    rgba(4,25,41,.35) 58%,
    rgba(4,25,41,0)   70%
  );
  pointer-events: none;
  z-index: 1;
}
/* Hero image — contain keeps the full Poseidon figure (head, trident, feet) visible;
   right-aligned so the artwork stays anchored to the right edge of the hero. */
.hero-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: right center;
  z-index: 0;
}
/* Container-aligned wrapper so the text column lines up with the header's
   max-width/gutter — i.e. with the crest above it — instead of a viewport-relative offset. */
.hero-inner {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--gutter);
}
.hero-content {
  position: relative;
  z-index: 2;
  width: min(520px, 42%);
  margin-left: 24px;
  padding-top: 48px;
  padding-bottom: 42px;
}

.hero-label {
  font-family: var(--font-body);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--alp-carolina);
  margin-bottom: 20px;
  line-height: 1.6;
}
.hero-headline {
  font-family: var(--font-heading);
  font-size: clamp(2.4rem, 3vw, 3.4rem);
  font-weight: 700;
  color: var(--alp-white);
  line-height: 1.02;
  margin-bottom: 12px;
  letter-spacing: -0.015em;
}
.hero-highlight { color: var(--alp-carolina); }

.hero-divider {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 26px 0;
  color: var(--alp-carolina);
}
.hero-divider::before,
.hero-divider::after {
  content: '';
  flex: 1;
  max-width: 60px;
  height: 1px;
  background: var(--alp-carolina);
  opacity: 0.5;
}

.hero-motto {
  font-family: var(--font-heading);
  font-size: clamp(1.3rem, 2.5vw, 1.8rem);
  font-weight: 600;
  color: var(--alp-white);
  margin-bottom: 22px;
  font-style: italic;
}
.hero-copy {
  font-size: 1rem;
  color: var(--alp-silver-light);
  line-height: 1.7;
  margin-bottom: 0;
  max-width: 520px;
}

/* 2026-08-30: Home hero height reduced to match the Programs hero
   exactly (height clamp/min-height copied verbatim from .programs-hero
   below -- not guessed). Everything else -- image, copy, buttons,
   fonts, colors, gradient, left alignment -- is unchanged; .hero-bg
   stays object-fit:contain so the artwork only scales down to fit,
   never crops or stretches.
   The Home hero's text block (2-line label + 2-line headline + motto
   + copy paragraph) is taller than the Programs hero's shorter copy,
   so at the old min(520px,42%) content width the headline was wide
   enough to wrap onto 4 lines at several breakpoints -- content that
   fit (barely) inside the old 470-540px box no longer fits inside the
   new 380-420px box and was being clipped top and bottom. Widening
   the content column lets the headline wrap back to its intended 2
   lines, and trimming the vertical padding/margins by the same
   proportion recovers the rest -- same text, same font sizes, same
   left edge, just tuned spacing so it's vertically balanced (not
   clipped) in the shorter hero at every breakpoint. */
#hero {
  height: clamp(380px, 26vw, 420px);
  min-height: 380px;
}
#hero .hero-bg { object-fit: cover; object-position: 75% 11%; }
#hero .hero-content {
  width: min(740px, 60%);
  padding-top: 28px;
  padding-bottom: 24px;
}
#hero .hero-label { margin-bottom: 10px; }
#hero .hero-headline { margin-bottom: 6px; }
#hero .hero-motto { margin-bottom: 12px; }
@media (max-width: 900px) {
  #hero .hero-content {
    width: min(600px, 74%);
    padding-top: 22px;
    padding-bottom: 20px;
  }
}
@media (max-width: 640px) {
  #hero .hero-content {
    width: 100%;
    margin-left: 0;
    padding-left: 0;
    padding-right: 0;
    padding-top: 16px;
    padding-bottom: 14px;
  }
  #hero .hero-label { margin-bottom: 8px; }
  #hero .hero-headline { margin-bottom: 4px; }
  #hero .hero-motto { margin-bottom: 10px; }
}

/* ─── GET TO KNOW US ─────────────────────────────────────────── */
.section-get-to-know {
  background: var(--alp-white);
  padding-top: 44px;
  /* Deliberate white gap before the timeline section's colored background begins —
     do not remove: without it the two sections visually touch. */
  padding-bottom: 36px;
}

.founder-photo-wrap {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: 0 12px 48px rgba(11,31,58,0.15);
  max-width: 380px;
  width: 100%;
}
.founder-photo {
  width: 100%;
  height: auto;
  object-fit: contain;
  display: block;
}

/* Visionary image wrapper — derives height from adjacent copy column */
.visionary-image-wrap {
  height: 100%;
  min-height: 0;
  display: flex;
}

/* Photo frame: label + border accent */
.visionary-photo-frame {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
}
.visionary-photo-label {
  display: block;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--alp-carolina);
  margin-bottom: 10px;
}
/* Subtle Carolina Blue left accent bar */
.visionary-photo-accent {
  position: absolute;
  left: -6px;
  top: 32px; /* below the label */
  bottom: 0;
  width: 2px;
  background: var(--alp-carolina);
  opacity: 0.55;
  border-radius: 2px;
}

/* Visionary Tonya Rankins portrait — used in Get to Know Us */
.visionary-photo {
  display: block;
  width: 100%;
  flex: 1;
  min-height: 0;
  object-fit: cover;
  object-position: center top;
  border-radius: 4px;
  border: 1px solid rgba(100, 185, 230, 0.35); /* subtle Carolina Blue border */
  box-shadow: 0 12px 48px rgba(11,31,58,0.15);
}

/* Copy column — flex column, space-between */
.visionary-copy {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

/* ── Introductory statement */
.visionary-intro {
  margin-bottom: 22px;
}
.visionary-intro-statement {
  font-family: var(--font-heading);
  font-size: clamp(1.35rem, 2.2vw, 1.6rem);
  font-style: italic;
  color: var(--alp-indigo);
  line-height: 1.3;
  margin: 0 0 14px;
}
.visionary-intro-line {
  width: 48px;
  height: 2px;
  background: var(--alp-carolina);
  border-radius: 2px;
}

/* ── Historical paragraphs */
.visionary-history p {
  color: var(--alp-charcoal);
  margin-bottom: 14px;
  font-size: 1rem;
  line-height: 1.75;
}

/* ── Significance paragraph */
.visionary-significance {
  font-size: 0.92rem !important;
  color: var(--alp-indigo) !important;
  border-left: 2px solid rgba(100, 185, 230, 0.45);
  padding-left: 14px;
  margin-top: 4px !important;
  line-height: 1.65 !important;
}

/* ── Compact milestone timeline */
.visionary-milestones {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin: 20px 0 0;
  padding: 16px 0;
  border-top: 1px solid var(--alp-silver);
  border-bottom: 1px solid var(--alp-silver);
}
.visionary-milestone {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.vm-year {
  font-family: var(--font-heading);
  font-size: 1.45rem;
  font-weight: 700;
  color: var(--alp-carolina);
  line-height: 1;
}
.vm-label {
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--alp-indigo);
  line-height: 1.3;
}

/* ── Identification block */
.visionary-signature {
  margin-top: 18px;
  padding-top: 0;
  border-top: none;
}
.signature-name {
  font-family: var(--font-heading);
  font-size: 1.45rem;
  font-style: italic;
  color: var(--alp-indigo);
  display: block;
  margin-bottom: 4px;
}
.signature-title {
  font-size: 0.78rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--alp-charcoal);
  display: block;
  margin-bottom: 6px;
}
.signature-sub {
  font-family: var(--font-heading);
  font-size: 0.92rem;
  font-style: italic;
  color: var(--alp-carolina);
  display: block;
}

/* ── Closing row: Visionary signature (left) + Sister Organization callout
   (right). Uses the space already open beneath the timeline/signature --
   deliberately restrained spacing so this reads as part of the Visionary
   story rather than a new CTA section. .visionary-signature above is
   unchanged; it's simply now the first grid item instead of a standalone
   block. */
.visionary-closing-row {
  display: grid;
  grid-template-columns: 1fr 1.35fr;
  align-items: center;
  gap: 48px;
  margin-top: 26px;
}
.sister-organization-callout {
  border-left: 2px solid rgba(95, 181, 229, 0.65);
  padding-left: 40px;
}
.sister-org-eyebrow {
  display: block;
  font-family: var(--font-body);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--alp-carolina);
  margin-bottom: 8px;
}
.sister-org-heading {
  font-family: var(--font-heading);
  font-size: clamp(1.35rem, 2vw, 1.8rem);
  line-height: 1.2;
  font-style: italic;
  font-weight: 700;
  color: var(--alp-indigo);
  margin: 0 0 10px;
}
.sister-org-body {
  font-family: var(--font-body);
  font-size: 0.94rem;
  line-height: 1.55;
  color: var(--alp-charcoal);
  max-width: 520px;
  margin: 0 0 14px;
}
.sister-org-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-body);
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--alp-carolina);
  text-decoration: none;
  border-bottom: 1px solid currentColor;
  padding-bottom: 4px;
  transition: color 0.2s ease;
}
.sister-org-arrow { display: inline-block; transition: transform 0.2s ease; }
.sister-org-link:hover,
.sister-org-link:focus-visible {
  color: #4A93C7; /* a modest darkening of --alp-carolina (#74B9E6) for hover, matching the "slightly darken" spec */
}
.sister-org-link:hover .sister-org-arrow,
.sister-org-link:focus-visible .sister-org-arrow {
  transform: translateX(3px);
}
.sister-org-link:focus-visible {
  outline: 2px solid var(--alp-carolina);
  outline-offset: 3px;
}

@media (max-width: 900px) {
  .visionary-closing-row { grid-template-columns: 0.9fr 1.1fr; gap: 30px; }
  .sister-organization-callout { padding-left: 30px; }
}

@media (max-width: 640px) {
  .visionary-closing-row { grid-template-columns: 1fr; gap: 22px; margin-top: 22px; }
  .sister-organization-callout {
    border-left: 0;
    border-top: 1px solid rgba(95, 181, 229, 0.45);
    padding-left: 0;
    padding-top: 22px;
  }
}

/* Legacy selector kept for safety */
.founder-story p {
  color: var(--alp-charcoal);
  margin-bottom: 14px;
  font-size: 1rem;
  line-height: 1.75;
}

/* ─── TIMELINE / VISION TO BROTHERHOOD ──────────────────────── */
.section-timeline {
  background: var(--alp-silver-light);
  overflow: hidden;
  padding-top: 36px;
  padding-bottom: 0;
}
.timeline-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  position: relative;
  margin-top: 16px;
}
.timeline-grid::before {
  content: '';
  position: absolute;
  top: 38px;
  left: 16.67%;
  right: 16.67%;
  height: 2px;
  background: linear-gradient(to right, var(--alp-indigo), var(--alp-carolina), var(--alp-indigo));
  z-index: 0;
}
.timeline-item {
  position: relative;
  z-index: 1;
  text-align: center;
  padding: 0 24px 32px;
}
.timeline-dot {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--alp-carolina);
  border: 3px solid var(--alp-white);
  box-shadow: 0 0 0 2px var(--alp-indigo);
  margin: 0 auto 20px;
}
.timeline-year {
  font-family: var(--font-heading);
  font-size: 2rem;
  font-weight: 700;
  color: var(--alp-indigo);
  display: block;
  margin-bottom: 8px;
}
.timeline-item h3 {
  font-size: 1rem;
  font-weight: 700;
  color: var(--alp-carolina);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 8px;
}
.timeline-item p {
  font-size: 0.92rem;
  color: var(--alp-charcoal);
  line-height: 1.6;
}

/* ─── MISSION / VISION ───────────────────────────────────────── */
.section-mission {
  background: var(--alp-indigo);
  position: relative;
  overflow: hidden;
}
.section-mission::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at 80% 50%, rgba(116,185,230,0.06) 0%, transparent 60%);
  pointer-events: none;
}

.mission-col { padding: 0; }
.mission-col + .mission-col {
  padding-left: 48px;
  border-left: 1px solid rgba(199,204,209,0.2);
}

.mission-col h3 {
  font-family: var(--font-body);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--alp-carolina);
  margin-bottom: 20px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.mission-col h3 svg { flex-shrink: 0; }

.mission-col p {
  color: var(--alp-silver-light);
  font-size: 0.97rem;
  line-height: 1.8;
  margin-bottom: 16px;
}

/* ─── CORE VALUES ────────────────────────────────────────────── */
.section-values { background: var(--alp-white); }

.values-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 20px;
  margin-top: 12px;
}
.value-card {
  background: var(--alp-white);
  border: 1px solid var(--alp-silver);
  border-radius: var(--radius-lg);
  padding: 32px 20px;
  text-align: center;
  transition: transform var(--trans), box-shadow var(--trans), border-color var(--trans);
}
.value-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 10px 32px rgba(11,31,58,0.1);
  border-color: var(--alp-carolina);
}
.value-icon {
  width: 52px;
  height: 52px;
  background: var(--alp-silver-light);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 18px;
  color: var(--alp-indigo);
  transition: background var(--trans), color var(--trans);
}
.value-card:hover .value-icon {
  background: var(--alp-carolina);
  color: var(--alp-indigo-deep);
}
.value-card h3 {
  font-family: var(--font-body);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--alp-indigo);
  margin-bottom: 10px;
}
.value-card p {
  font-size: 0.88rem;
  color: var(--alp-charcoal);
  line-height: 1.6;
}

/* ─── TRIDENT CHARACTERISTICS ────────────────────────────────── */
.section-trident-char {
  background: var(--alp-indigo-deep);
  position: relative;
  overflow: hidden;
}
.section-trident-char::after {
  content: '';
  position: absolute;
  right: -80px;
  top: 50%;
  transform: translateY(-50%);
  width: 320px;
  height: 480px;
  background-image: url('../images/trident-bg.webp');
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  opacity: 0.06;
  pointer-events: none;
}

.char-intro {
  color: var(--alp-silver-light);
  font-size: 1.05rem;
  max-width: 640px;
  line-height: 1.75;
  margin-bottom: 32px;
}
.char-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}
.char-card {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(116,185,230,0.18);
  border-radius: var(--radius-lg);
  padding: 28px 22px;
  transition: background var(--trans), border-color var(--trans), transform var(--trans);
}
.char-card:hover {
  background: rgba(116,185,230,0.08);
  border-color: rgba(116,185,230,0.4);
  transform: translateY(-3px);
}
.char-card h3 {
  font-family: var(--font-body);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--alp-carolina);
  margin-bottom: 8px;
}
.char-card p {
  font-size: 0.9rem;
  color: var(--alp-silver-light);
  line-height: 1.6;
}
.char-closing {
  margin-top: 40px;
  font-family: var(--font-heading);
  font-size: 1.1rem;
  font-style: italic;
  color: var(--alp-silver);
  text-align: center;
}

/* ─── SCRIPTURE ──────────────────────────────────────────────── */
.section-scripture {
  background: var(--alp-silver-light);
  text-align: center;
  padding: 34px 0 34px;
}
.scripture-ref {
  font-family: var(--font-body);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--alp-indigo);
  display: block;
  margin: 14px 0 24px;
}
.scripture-text {
  font-family: var(--font-heading);
  font-size: clamp(1.2rem, 2.5vw, 1.7rem);
  font-style: italic;
  color: var(--alp-indigo);
  max-width: 720px;
  margin: 0 auto;
  line-height: 1.6;
}
.scripture-divider {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  margin: 24px auto;
  color: var(--alp-carolina);
  max-width: 300px;
}
.scripture-divider::before,
.scripture-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--alp-silver);
}

/* ─── MOTTO SECTION ──────────────────────────────────────────── */
.section-motto {
  background: var(--alp-indigo);
  text-align: center;
  position: relative;
  overflow: hidden;
  padding: 52px 0;
}
.section-motto::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url('../images/waters-edge.webp');
  background-size: cover;
  background-position: center;
  opacity: 0.08;
}
.motto-content { position: relative; z-index: 1; }
.motto-headline {
  font-family: var(--font-heading);
  font-size: clamp(2rem, 4.5vw, 3.6rem);
  font-weight: 700;
  color: var(--alp-white);
  margin-bottom: 24px;
}
.motto-copy {
  font-size: 1.05rem;
  color: var(--alp-silver-light);
  max-width: 600px;
  margin: 0 auto 40px;
  line-height: 1.75;
}
.motto-proclamation {
  font-family: var(--font-body);
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--alp-silver);
  line-height: 1.9;
}

/* ─── PROGRAMS ───────────────────────────────────────────────── */
.section-programs { background: var(--alp-white); }
.programs-intro {
  color: var(--alp-charcoal);
  font-size: 1rem;
  max-width: 620px;
  line-height: 1.75;
  margin-bottom: 36px;
}
.programs-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.program-card {
  background: var(--alp-white);
  border: 1px solid var(--alp-silver);
  border-radius: var(--radius-lg);
  padding: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transition: transform var(--trans), box-shadow var(--trans), border-color var(--trans);
}
.program-card-img {
  aspect-ratio: 3 / 2;
  overflow: hidden;
  flex-shrink: 0;
}
.program-card-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  transition: transform 0.4s ease;
}
.program-card:hover .program-card-img img { transform: scale(1.04); }
.program-card-body {
  padding: 24px 24px 28px;
  display: flex;
  flex-direction: column;
  flex: 1;
}
.program-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 40px rgba(11,31,58,0.1);
  border-color: var(--alp-carolina);
}
.program-card--wide {
  grid-column: span 2;
}
.program-icon-wrap {
  width: 50px;
  height: 50px;
  background: var(--alp-silver-light);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 18px;
  color: var(--alp-indigo);
  transition: background var(--trans);
}
.program-card:hover .program-icon-wrap {
  background: var(--alp-carolina);
}
.program-card h3 {
  font-family: var(--font-body);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--alp-indigo);
  margin-bottom: 10px;
}
.program-card p {
  font-size: 0.92rem;
  color: var(--alp-charcoal);
  line-height: 1.7;
  flex: 1;
}
.program-pillars {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  margin-top: 18px;
}
.pillar-tag {
  text-align: center;
  padding: 8px 6px;
  background: var(--alp-silver-light);
  border-radius: var(--radius);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--alp-indigo);
}
.programs-cta { margin-top: 44px; text-align: center; }

/* ─── PROMINENT GENTLEMAN ────────────────────────────────────── */
.section-gentleman {
  background: var(--alp-indigo-deep);
  position: relative;
  overflow: hidden;
  padding: 56px 0;
}
.section-gentleman::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url('../images/handshake-alp.webp');
  background-size: cover;
  background-position: center;
  opacity: 0.08;
}
.gentleman-content { position: relative; z-index: 1; }
.gentleman-intro {
  font-size: 1.05rem;
  color: var(--alp-silver-light);
  max-width: 680px;
  line-height: 1.8;
  margin-bottom: 36px;
}
.gentleman-pillars {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-bottom: 36px;
}
.gentleman-pillar h3 {
  font-family: var(--font-body);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--alp-carolina);
  margin-bottom: 10px;
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(116,185,230,0.25);
}
.gentleman-pillar p {
  font-size: 0.92rem;
  color: var(--alp-silver-light);
  line-height: 1.7;
}
.gentleman-proclamation {
  font-family: var(--font-heading);
  font-size: clamp(1.1rem, 2vw, 1.4rem);
  font-style: italic;
  color: var(--alp-silver);
  margin-bottom: 16px;
}
.gentleman-motto {
  font-family: var(--font-heading);
  font-size: 1.1rem;
  color: var(--alp-carolina);
  margin-bottom: 36px;
}
.gentleman-cta { display: flex; gap: 16px; flex-wrap: wrap; }

/* ─── SYMBOLS ────────────────────────────────────────────────── */
.section-symbols { background: var(--alp-silver-light); }
.symbols-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  margin-top: 12px;
}
.symbol-card {
  text-align: center;
  padding: 36px 20px;
  background: var(--alp-white);
  border-radius: var(--radius-lg);
  border: 1px solid var(--alp-silver);
  transition: transform var(--trans), box-shadow var(--trans);
}
.symbol-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 28px rgba(11,31,58,0.1);
}
.symbol-img {
  width: 90px;
  height: 90px;
  object-fit: contain;
  margin: 0 auto 18px;
  border-radius: var(--radius);
}
.symbol-placeholder {
  width: 90px;
  height: 90px;
  margin: 0 auto 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--alp-carolina);
}
.symbol-card h3 {
  font-family: var(--font-body);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--alp-indigo);
  margin-bottom: 6px;
}
.symbol-card p {
  font-size: 0.85rem;
  color: var(--alp-charcoal);
}
.symbol-card .symbol-label {
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--alp-silver);
  display: block;
  margin-bottom: 4px;
}

/* ─── FOUNDERS ───────────────────────────────────────────────── */
.section-founders {
  background: var(--alp-white);
  padding-top: 36px;
  padding-bottom: 36px;
}

/* ─── OUT OF THE SEA WE RISE ────────────────────────────────── */
.sea-rise-section {
  position: relative;
  width: 100%;
  height: 340px;
  min-height: 300px;
  max-height: 360px;
  background-image: url('../images/look.webp');
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  display: flex;
  align-items: center;
  overflow: hidden;
  margin: 0;
  padding: 0;
}
.sea-rise-content {
  width: min(90%, 1200px);
  margin: 0 auto;
  padding-left: 40px;
}
.sea-rise-content h2 {
  margin: 0;
  color: #ffffff;
  font-family: var(--font-heading);
  font-size: clamp(2.2rem, 3.2vw, 3.5rem);
  line-height: 1.02;
  font-weight: 500;
  letter-spacing: -0.01em;
}
.sea-rise-content p {
  margin: 16px 0 0;
  color: #ffffff;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}
.founders-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
  margin-top: 12px;
}
.founder-card { text-align: center; }
.founder-photo-wrap-sm {
  width: 180px;
  height: 220px;
  margin: 0 auto 20px;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--alp-silver-light);
  border: 2px solid var(--alp-silver);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--alp-silver);
}
.founder-photo-wrap-sm img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top;
}
.founder-card h3 {
  font-family: var(--font-heading);
  font-size: 1.2rem;
  color: var(--alp-indigo);
  margin-bottom: 4px;
}
.founder-card .founder-sobriquet {
  font-style: italic;
  color: var(--alp-carolina);
  font-size: 0.9rem;
  display: block;
  margin-bottom: 4px;
}
.founder-card .founder-role {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--alp-silver);
}

/* Home memorial bridge -- a restrained acknowledgment beneath the
   Founder cards that points into the full Omega Chapter memorial
   experience. Deliberately kept low-intensity relative to Omega
   itself: no imagery, just a soft pale-blue panel, the Omega symbol,
   and a link. */
.home-memorial-bridge {
  position: relative;
  margin-top: 28px;
  display: flex;
  align-items: flex-start;
  gap: 22px;
  padding: 28px 30px;
  background: linear-gradient(135deg, rgba(238, 246, 252, 0.98) 0%, rgba(226, 239, 248, 0.98) 100%);
  border: 1px solid rgba(122, 183, 224, 0.32);
  border-left: 3px solid #79bde8;
  border-radius: 0 6px 6px 0;
  overflow: hidden;
}
/* Subtle memorial light effect */
.home-memorial-bridge::before {
  content: "";
  position: absolute;
  top: -40px;
  right: 8%;
  width: 260px;
  height: 160px;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.72) 0%, rgba(255, 255, 255, 0.24) 38%, rgba(255, 255, 255, 0) 72%);
  pointer-events: none;
}
/* Omega symbol */
.home-memorial-bridge__symbol {
  position: relative;
  z-index: 1;
  flex: 0 0 auto;
  margin-top: 2px;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 42px;
  line-height: 1;
  color: #b89a55;
}
/* Text container */
.home-memorial-bridge__content {
  position: relative;
  z-index: 1;
  flex: 1;
}
/* Eyebrow */
.home-memorial-bridge__eyebrow {
  margin: 0 0 5px;
  color: #0b2c50;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
/* Names */
.home-memorial-bridge__names {
  margin: 0 0 10px;
  color: #0b2c50;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(18px, 2vw, 23px);
  font-weight: 500;
  line-height: 1.35;
}
.home-memorial-bridge__dot {
  display: inline-block;
  margin: 0 7px;
  color: #79bde8;
}
/* Body copy */
.home-memorial-bridge__copy {
  max-width: 980px;
  margin: 0 0 12px;
  color: #35495c;
  font-size: 15px;
  line-height: 1.7;
}
/* Link */
.home-memorial-bridge__link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #0b4d8d;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.10em;
  text-decoration: none;
  text-transform: uppercase;
  transition: color 0.2s ease, gap 0.2s ease;
}
.home-memorial-bridge__link:hover {
  color: #061d3b;
  gap: 12px;
}
@media (max-width: 900px) {
  .home-memorial-bridge { padding: 24px 24px; }
}
@media (max-width: 700px) {
  .home-memorial-bridge {
    flex-direction: column;
    gap: 10px;
    padding: 22px 20px;
  }
  .home-memorial-bridge__symbol { font-size: 34px; }
  .home-memorial-bridge__dot { display: none; }
  .home-memorial-bridge__names {
    display: flex;
    flex-direction: column;
    gap: 2px;
  }
  .home-memorial-bridge__copy {
    font-size: 14px;
    line-height: 1.65;
  }
}
@media (prefers-reduced-motion: reduce) {
  .home-memorial-bridge__link { transition: none; }
}

/* ─── LEADERSHIP ─────────────────────────────────────────────── */
.section-leadership { background: var(--alp-indigo); }
.leadership-card {
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: 48px;
  align-items: center;
  max-width: 820px;
}
.leadership-photo {
  width: 240px;
  height: 300px;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--alp-indigo-mid);
  border: 2px solid rgba(116,185,230,0.25);
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(116,185,230,0.3);
  flex-shrink: 0;
}
.leadership-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top;
}
.leadership-title-label {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--alp-carolina);
  display: block;
  margin-bottom: 8px;
}
.leadership-info h3 {
  font-family: var(--font-heading);
  font-size: 2rem;
  color: var(--alp-white);
  margin-bottom: 16px;
}
.leadership-info p {
  font-size: 0.97rem;
  color: var(--alp-silver-light);
  line-height: 1.75;
  margin-bottom: 28px;
}
.leadership-cta-link {
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--alp-carolina);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: gap var(--trans);
}
.leadership-cta-link:hover { gap: 12px; }

/* ─── WHO WE UNITE ───────────────────────────────────────────── */
.section-unite { background: var(--alp-white); }
.unite-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-top: 12px;
}
.unite-card {
  background: var(--alp-silver-light);
  border-radius: var(--radius-lg);
  padding: 28px 24px;
  display: flex;
  align-items: flex-start;
  gap: 16px;
  border: 1px solid var(--alp-silver);
  transition: border-color var(--trans), transform var(--trans);
}
.unite-card:hover {
  border-color: var(--alp-carolina);
  transform: translateY(-3px);
}
.unite-icon {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--alp-indigo);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--alp-carolina);
  flex-shrink: 0;
}
.unite-card h3 {
  font-family: var(--font-body);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--alp-indigo);
  margin-bottom: 4px;
}
.unite-card p {
  font-size: 0.88rem;
  color: var(--alp-charcoal);
  line-height: 1.55;
}
.unite-cta { margin-top: 40px; }

/* ─── CHAPTERS ───────────────────────────────────────────────── */
.section-chapters { background: var(--alp-indigo-deep); }
/* Chapter map — image-based layout per spec */
.chapter-map {
  width: 100%;
  max-width: 1000px;
  margin: 30px auto 0;
}
.chapter-map img {
  display: block;
  width: 100%;
  height: auto;
  max-height: 300px;
  object-fit: contain;
}
.chapter-map-caption {
  text-align: center;
  margin-top: 20px;
}
.chapter-map-caption p {
  color: var(--alp-silver-light);
  font-size: 1rem;
  margin-bottom: 6px;
}
.chapter-map-caption span {
  font-size: 0.85rem;
  color: var(--alp-silver);
  font-style: italic;
}
/* Legacy container — retained for JS compatibility */
.chapter-map-container { display: none; }
#chapter-placeholder {
  position: relative;
  z-index: 1;
}
#chapter-placeholder p {
  color: var(--alp-silver-light);
  font-size: 1rem;
  margin-bottom: 8px;
}
#chapter-placeholder span {
  font-size: 0.8rem;
  color: var(--alp-silver);
  font-style: italic;
}
#chapter-list { display: none; }
.chapters-cta { margin-top: 32px; }

/* ─── WATERS EDGE ────────────────────────────────────────────── */
.section-waters-edge {
  min-height: 400px;
  background:
    linear-gradient(
      rgba(5,20,38,0.55),
      rgba(5,20,38,0.68)
    ),
    url('../images/waters-edge.webp');
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  text-align: center;
  padding: 52px 0;
}
.section-waters-edge::before { display: none; }
.waters-edge-content { position: relative; z-index: 1; }
.waters-tagline {
  font-family: var(--font-body);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--alp-carolina);
  margin-bottom: 24px;
  display: block;
}
.waters-headline {
  font-family: var(--font-heading);
  font-size: clamp(2.5rem, 3.8vw, 4rem);
  font-weight: 700;
  color: var(--alp-white);
  line-height: 1.05;
  margin-bottom: 20px;
}
.waters-org {
  font-family: var(--font-body);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--alp-silver);
  margin-bottom: 12px;
  display: block;
}
.waters-motto {
  font-family: var(--font-heading);
  font-size: 1.3rem;
  font-style: italic;
  color: var(--alp-carolina);
}

/* ─── MEMBERSHIP CTA ─────────────────────────────────────────── */
.section-membership-cta {
  background: var(--alp-carolina);
  text-align: center;
}
.membership-cta-headline {
  font-family: var(--font-heading);
  font-size: clamp(1.8rem, 3.5vw, 3rem);
  font-weight: 700;
  color: var(--alp-indigo-deep);
  margin-bottom: 18px;
}
.membership-cta-copy {
  font-size: 1.05rem;
  color: var(--alp-indigo);
  max-width: 600px;
  margin: 0 auto 36px;
  line-height: 1.7;
}
.membership-cta-buttons { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; }
.btn-indigo {
  background: var(--alp-indigo);
  color: var(--alp-white);
  border: 2px solid var(--alp-indigo);
}
.btn-indigo:hover, .btn-indigo:focus-visible {
  background: var(--alp-indigo-deep);
  border-color: var(--alp-indigo-deep);
  transform: translateY(-2px);
}
.btn-outline-indigo {
  background: transparent;
  color: var(--alp-indigo);
  border: 2px solid var(--alp-indigo);
}
.btn-outline-indigo:hover, .btn-outline-indigo:focus-visible {
  background: var(--alp-indigo);
  color: var(--alp-white);
  transform: translateY(-2px);
}

/* ─── FOOTER ─────────────────────────────────────────────────── */
#site-footer {
  background: var(--alp-indigo-deep);
  border-top: 1px solid rgba(116,185,230,0.12);
}
.footer-main {
  padding: 30px 0;
}

/* ─── FOOTER GRID ────────────────────────────────────────────── */
.footer-grid {
  display: grid;
  grid-template-columns: 1.15fr 1fr 1fr 1.35fr;
  gap: 44px 56px;
  align-items: start;
}

/* ─── IDENTITY COLUMN ────────────────────────────────────────── */
/* width:fit-content shrinks the lockup to the width of its widest row (the
   seal+name row) instead of stretching across the full grid column — this is
   what lets the motto below center against the LOCKUP rather than the column.
   The column position itself is untouched: a fit-content grid item still
   sits at the start (left) edge of its own grid area. */
.footer-identity {
  display: flex;
  flex-direction: column;
  gap: 15px;
  width: fit-content;
}
/* Brand lockup — seal + name read as one unit. align-items:center vertically
   centers the seal against the full three-line text block (no arbitrary
   margins needed). */
.footer-identity-brand {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 0;
}
.footer-crest {
  width: 72px;
  height: auto;
  object-fit: contain;
  flex-shrink: 0;
  margin: 0;
}
.footer-brand-text {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  gap: 4px;
  margin: 0;
}
.footer-brand-name {
  font-family: var(--font-body);
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--alp-white);
  letter-spacing: 0.10em;
  text-transform: uppercase;
  line-height: 1.3;
  display: block;
}
.footer-brand-sub {
  font-size: 0.6rem;
  color: var(--alp-silver);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  display: block;
  line-height: 1.55;
}
/* Centered beneath the ENTIRE seal+name row above (width:100% of the
   fit-content .footer-identity wrapper), not just under the text column. */
.footer-motto {
  font-family: var(--font-heading);
  font-size: 0.9rem;
  font-style: italic;
  color: var(--alp-carolina);
  line-height: 1.5;
  width: 100%;
  text-align: center;
  margin: 0;
}

/* ─── COLUMN SHARED ──────────────────────────────────────────── */
.footer-col-heading {
  font-family: var(--font-body);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--alp-carolina);
  margin-bottom: 14px;
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(199,204,209,0.12);
}
.footer-col-links {
  display: flex;
  flex-direction: column;
  gap: 12px;
  list-style: none;
}
.footer-col-links li a {
  font-size: 0.86rem;
  color: var(--alp-silver);
  transition: color var(--trans);
}
.footer-col-links li a:hover,
.footer-col-links li a:focus-visible {
  color: var(--alp-carolina);
}

/* ─── CONTACT COLUMN ─────────────────────────────────────────── */
.footer-contact-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}
.footer-contact-item svg {
  width: 15px;
  height: 15px;
  margin-top: 3px;
  color: var(--alp-carolina);
  flex-shrink: 0;
}
.footer-contact-item a {
  font-size: 0.86rem;
  color: var(--alp-silver);
  transition: color var(--trans);
}
.footer-contact-item a:hover,
.footer-contact-item a:focus-visible {
  color: var(--alp-carolina);
}

/* ─── NEWSLETTER COLUMN ──────────────────────────────────────── */
.footer-newsletter-copy {
  font-size: 0.85rem;
  color: var(--alp-silver);
  line-height: 1.65;
  margin-bottom: 16px;
}
.footer-newsletter-form {
  display: flex;
  gap: 0;
}
.footer-newsletter-form input[type="email"] {
  flex: 1;
  min-width: 0;
  height: 42px;
  padding: 0 14px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.18);
  border-right: none;
  color: var(--alp-white);
  font-family: var(--font-body);
  font-size: 0.83rem;
  outline: none;
  transition: border-color var(--trans);
}
.footer-newsletter-form input[type="email"]::placeholder {
  color: rgba(255,255,255,.38);
  font-size: 0.78rem;
}
.footer-newsletter-form input[type="email"]:focus {
  border-color: var(--alp-carolina);
}
.footer-newsletter-form button {
  height: 42px;
  padding: 0 16px;
  background: var(--alp-carolina);
  color: var(--alp-indigo-deep);
  border: none;
  font-family: var(--font-body);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: .10em;
  text-transform: uppercase;
  cursor: pointer;
  white-space: nowrap;
  transition: background var(--trans);
  flex-shrink: 0;
}
.footer-newsletter-form button:hover,
.footer-newsletter-form button:focus-visible {
  background: var(--alp-carolina-light);
}

/* 2026-09-02: mobile-only visibility fix -- the translucent-white-on-
   navy input above (approved, unchanged for desktop) reads as almost
   invisible against the dark footer at phone/small-tablet widths. A
   solid light field with dark navy text restores a clear boundary,
   readable placeholder and obvious tap target without touching the
   footer's copy, the Subscribe button's wording/color, or anything
   above 768px. border-color (not the border shorthand) is used so it
   only recolors the existing 1px/solid border already set above --
   it does not disturb the seam where the input meets the Subscribe
   button (border-right:none here, border-bottom:none in the ≤640
   stacked layout below), which is what keeps the "no gap" join
   intact. */
@media (max-width: 768px) {
  .footer-newsletter-form input[type="email"] {
    min-height: 52px;
    padding: 0 16px;
    background: #ffffff;
    border-color: rgba(8,24,45,.22);
    border-radius: 0;
    color: var(--alp-indigo);
    font-size: 16px;
  }
  .footer-newsletter-form input[type="email"]::placeholder {
    color: rgba(8,24,45,.55);
    opacity: 1;
  }
  .footer-newsletter-form input[type="email"]:focus {
    outline: 2px solid var(--alp-carolina);
    outline-offset: 2px;
    border-color: var(--alp-carolina);
  }
}

/* ─── LEGAL BAR ──────────────────────────────────────────────── */
/* Separate band from .footer-main — a different, slightly brighter ALP
   blue is the only divider; no border needed between the two. */
.footer-bottom-bar {
  background: var(--alp-indigo-mid);
}
.footer-bottom {
  padding: 20px 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
}
.footer-copyright {
  font-size: 0.78rem;
  color: rgba(199,204,209,0.7);
}
.footer-legal {
  display: flex;
  gap: 20px;
}
.footer-legal a {
  font-size: 0.76rem;
  color: rgba(199,204,209,0.7);
  transition: color var(--trans);
}
.footer-legal a:hover { color: var(--alp-carolina); }

/* ─── RESPONSIVE ─────────────────────────────────────────────── */
@media (max-width: 1100px) {
  .values-grid { grid-template-columns: repeat(3, 1fr); }
  .char-grid   { grid-template-columns: repeat(2, 1fr); }
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 32px 40px; }
}

@media (max-width: 900px) {
  :root { --section-pad: 40px; --section-sm: 30px; }

  /* Nav collapses -- see the consolidated "MOBILE NAVIGATION" block
     below (single source of truth for the mobile nav panel, rows,
     Chapters submenu, Members Area button and backdrop) for
     everything else nav-related at this breakpoint. */
  .nav-toggle { display: flex; }

  .two-col { grid-template-columns: 1fr; gap: 36px; }
  .visionary-layout { grid-template-columns: 1fr; }
  .visionary-image-wrap { height: auto; }
  .visionary-photo-frame { height: auto; }
  .visionary-photo { height: auto; object-fit: contain; flex: none; }
  .visionary-photo-accent { display: none; }
  .visionary-copy { margin-top: 32px; }
  .leadership-card { grid-template-columns: 1fr; }
  .leadership-photo { width: 200px; height: 250px; margin: 0 auto; }
  .programs-grid { grid-template-columns: 1fr 1fr; }
  .program-card--wide { grid-column: span 2; }
  .gentleman-pillars { grid-template-columns: 1fr; }
  .symbols-grid { grid-template-columns: repeat(2, 1fr); }
  .founders-grid { grid-template-columns: repeat(2, 1fr); }
  .unite-grid { grid-template-columns: repeat(2, 1fr); }
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 32px 40px; }
  .timeline-grid::before { display: none; }
  .timeline-grid { grid-template-columns: 1fr; }
}

@media (max-width: 640px) {
  :root { --section-pad: 36px; --section-sm: 26px; }

  .sea-rise-section { height: 280px; min-height: 280px; }
  .section-get-to-know { padding-top: 28px; padding-bottom: 36px; }
  .section-timeline { padding-top: 24px; padding-bottom: 0; }
  .section-founders { padding-top: 24px; padding-bottom: 24px; }
  .visionary-copy { margin-top: 28px; }
  .visionary-photo-frame { height: auto; }
  .visionary-photo { height: auto; object-fit: contain; flex: none; }
  .visionary-photo-accent { display: none; }
  .visionary-milestones { grid-template-columns: repeat(3, 1fr); gap: 10px; }
  .vm-year { font-size: 1.2rem; }

  .brand-text .brand-sub { display: none; }
  .hero-content { width: 100%; margin-left: 0; padding-left: 0; padding-right: 0; }
  .values-grid { grid-template-columns: 1fr; }
  .char-grid { grid-template-columns: 1fr; }
  .programs-grid { grid-template-columns: 1fr; }
  .program-card--wide { grid-column: span 1; }
  .program-pillars { grid-template-columns: repeat(2, 1fr); }
  .symbols-grid { grid-template-columns: 1fr 1fr; }
  .founders-grid { grid-template-columns: 1fr; }
  .unite-grid { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr; gap: 34px; }
  .footer-bottom { flex-direction: column; text-align: center; }
  .footer-bottom .footer-legal { justify-content: center; }
  .footer-newsletter-form { flex-direction: column; }
  .footer-newsletter-form input[type="email"] { border-right: 1px solid rgba(8,24,45,.22); border-bottom: none; }
  .footer-newsletter-form button { width: 100%; }
}

/* ─── ACCESSIBILITY ───────────────────────────────────────────── */
:focus-visible {
  outline: 2px solid var(--alp-carolina);
  outline-offset: 3px;
}
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}
a:focus-visible, button:focus-visible { border-radius: var(--radius); }

/* ─── ANIMATIONS ─────────────────────────────────────────────── */
.reveal {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 0.55s ease, transform 0.55s ease;
}
.reveal.revealed {
  opacity: 1;
  transform: translateY(0);
}
.reveal-delay-1 { transition-delay: 0.1s; }
.reveal-delay-2 { transition-delay: 0.2s; }
.reveal-delay-3 { transition-delay: 0.3s; }
.reveal-delay-4 { transition-delay: 0.4s; }
.reveal-delay-5 { transition-delay: 0.5s; }

/* Nav slide-down for mobile */
.header-nav-slide {
  display: none;
  flex-direction: column;
  background: var(--alp-indigo-deep);
  border-top: 1px solid rgba(116,185,230,0.12);
  padding-bottom: 8px;
}
.header-nav-slide.nav-open { display: flex; }

/* ════════════════════════════════════════════════════════════════
   MOBILE NAVIGATION (≤1360px) — single source of truth
   2026-09-02: rebuilt from a buggy setup where .nav-list (a
   position:fixed, display:flex, width:auto column) collapsed to a
   ~32px-wide sliver hugging the right edge instead of spanning the
   viewport -- browsers resolve an auto width on a fixed-position
   FLEX container by shrink-to-fit rather than the plain left/right
   stretch formula, so "left:0;right:0" alone was not enough; the
   fix is the explicit width:100% below. .header-nav-wrapper (not
   .nav-list alone) is now the one broad panel -- it already contains
   the primary <ul class="nav-list"> links followed by the Members
   Area link in that DOM order on every page, so reusing it avoids
   adding a second, duplicate nav structure. Chevron/submenu toggle
   behavior, aria-expanded and Escape handling are untouched (see
   initNavDropdown()/initMobileNav() in js/main.js); this block only
   restyles the existing markup.
   2026-09-02 (audit pass): threshold raised from 900px to 1360px
   after the site-wide responsiveness audit found the desktop row nav
   (brand + 7 links + Members Area button, all on one line) needs
   ~1300-1360px of real width to lay out without overflowing its own
   header -- below that the row nav was overflowing the viewport
   horizontally at tablet/small-desktop widths (confirmed broken at
   1024px, first clean at 1360px in a binary search) even though it
   looked fine at the 1440px width it was actually approved at,
   because a comfortable outer margin there was quietly absorbing the
   overflow. Compressing the row nav enough to fit ~1024-1360px would
   mean shrinking brand text/nav labels below their approved sizes,
   so this reuses the already-approved broad mobile panel for that
   whole range instead -- the panel itself scales to any width
   trivially and needed no changes. Desktop (>1360px, e.g. the
   approved 1440px width) is governed entirely by the un-media-
   queried rules above and is untouched. */
@media (max-width: 1360px) {
  .nav-toggle { display: flex; }
  .header-nav-wrapper {
    position: fixed;
    top: 76px;
    left: 0;
    right: 0;
    width: 100%;
    max-height: calc(100dvh - 76px);
    overflow-y: auto;
    overflow-x: hidden;
    background: var(--alp-indigo-deep);
    border-top: 1px solid rgba(116,185,230,0.15);
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 8px 0 22px;
    z-index: 999;
    box-shadow: 0 16px 36px rgba(0,0,0,0.22);
    transform: translateY(-12px);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: transform 0.25s ease, opacity 0.25s ease, visibility 0.25s;
  }
  .header-nav-wrapper:has(.nav-list.nav-open) {
    transform: translateY(0);
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
  }

  .nav-list {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    width: 100%;
    gap: 0;
  }
  .nav-list li a {
    width: 100%;
    min-height: 54px;
    display: flex;
    align-items: center;
    padding: 14px 24px;
    border-bottom: 1px solid rgba(255,255,255,.08);
    font-size: 1rem;
    font-weight: 600;
    letter-spacing: 0.10em;
    text-transform: uppercase;
    color: var(--alp-white);
    text-align: left;
    white-space: normal;
  }
  .nav-list li a::after { display: none; }
  .nav-list li a:hover,
  .nav-list li a:focus-visible {
    background: rgba(104,183,232,.12);
    color: var(--alp-carolina);
  }

  /* Members Area stays visually emphasized, not just another row. */
  .members-btn {
    margin: 18px 24px 4px;
    width: calc(100% - 48px);
    min-height: 50px;
    justify-content: center;
    background: var(--alp-carolina);
    color: var(--alp-indigo-deep);
    border: 1px solid rgba(255,255,255,.15);
    font-weight: 700;
  }
  .members-btn:hover, .members-btn:focus-visible {
    background: var(--alp-carolina-light);
  }

  /* Backdrop -- created once by initMobileNav() in js/main.js and
     appended inside #site-header (so it shares that element's own
     stacking context/z-index:1000 and reliably paints beneath this
     panel); shown purely by CSS via the same :has() the panel uses.
     inset starts at the header's own height so the header itself
     (crest, wordmark, close button) is never covered. */
  .mobile-nav-backdrop {
    position: fixed;
    inset: 76px 0 0 0;
    background: rgba(2,16,30,.52);
    z-index: 998;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.25s ease;
  }
  #site-header:has(.nav-list.nav-open) .mobile-nav-backdrop {
    opacity: 1;
    pointer-events: auto;
  }
}

body.mobile-nav-open { overflow: hidden; }


/* ════════════════════════════════════════════════════════════════
   HOMEPAGE REDESIGNED SECTIONS — PROGRAMS, MISSION/VISION, PRESENCE
   ════════════════════════════════════════════════════════════════ */

/* ─── SHARED BUTTON ADDITIONS ────────────────────────────────── */
.btn-outline-light {
  background: transparent;
  color: var(--alp-white);
  border: 2px solid rgba(255,255,255,0.65);
}
.btn-outline-light:hover,
.btn-outline-light:focus-visible {
  background: rgba(255,255,255,0.12);
  border-color: var(--alp-white);
  color: var(--alp-white);
}

/* ─── DIVIDER VARIANTS ───────────────────────────────────────── */
.divider-line--light { background: rgba(255,255,255,0.35); }

/* ══════════════════════════════════════════════════════════════
   SECTION 1: OUR PURPOSE IN ACTION
   ══════════════════════════════════════════════════════════════ */
.section-programs-v2 {
  background: linear-gradient(180deg, #ffffff 0%, #f4f7f9 100%);
  /* Deliberate white gap so "What We Do" doesn't sit flush against the
     Fraternal Scripture section above it — this section's own background
     starts pure white, so the padding reads as breathing room, not color. */
  padding-top: 32px;
  padding-bottom: 0;
}
.programs-v2-intro {
  max-width: 720px;
  margin-bottom: 24px;
}
.programs-v2-sub {
  font-family: var(--font-heading);
  font-size: clamp(1.1rem, 1.8vw, 1.4rem);
  font-style: italic;
  color: var(--alp-indigo);
  margin-bottom: 14px;
}
.programs-v2-body {
  font-size: 1rem;
  color: var(--alp-charcoal);
  line-height: 1.75;
  max-width: 680px;
}

/* Program Grid */
.program-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 28px;
}
.program-card {
  background: #ffffff;
  border: 1px solid rgba(11,31,58,.12);
  box-shadow: 0 14px 40px rgba(4,20,38,.08);
  overflow: hidden;
  transition: transform .25s ease, box-shadow .25s ease;
  display: flex;
  flex-direction: column;
  position: relative;
}
.program-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: var(--alp-carolina);
  z-index: 1;
}
.program-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 20px 50px rgba(4,20,38,.13);
}
.program-card__media {
  aspect-ratio: 16 / 9;
  overflow: hidden;
}
.program-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .5s ease;
}
.program-card:hover .program-card__media img {
  transform: scale(1.04);
}
.program-card__body {
  padding: 30px 32px 36px;
  display: flex;
  flex-direction: column;
  flex: 1;
}
.program-card__label {
  display: block;
  font-family: var(--font-body);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--alp-carolina);
  margin-bottom: 10px;
}
.program-card__heading {
  font-family: var(--font-heading);
  font-size: clamp(1.35rem, 1.8vw, 1.75rem);
  font-weight: 600;
  color: var(--alp-indigo);
  line-height: 1.2;
  margin-bottom: 14px;
}
.program-card__copy {
  font-size: 0.97rem;
  color: var(--alp-charcoal);
  line-height: 1.68;
  flex: 1;
}

/* Service Callout Bar */
.service-callout {
  margin-top: 28px;
  background: var(--alp-indigo);
  padding: 30px 36px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
}
.service-callout__eyebrow {
  display: block;
  font-family: var(--font-body);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--alp-carolina);
  margin-bottom: 8px;
}
.service-callout__text p {
  font-size: 0.97rem;
  color: rgba(255,255,255,0.85);
  line-height: 1.65;
  max-width: 580px;
  margin: 0;
}
.service-callout .btn {
  flex-shrink: 0;
}

/* ══════════════════════════════════════════════════════════════
   MEMBERSHIP CTA (carried over unchanged)
   ══════════════════════════════════════════════════════════════ */
.section-membership-cta {
  background: #F2F5F7;
  padding: 30px 24px 30px;
  text-align: center;
}
.membership-cta-inner {
  max-width: 760px;
  margin: 0 auto;
}
.membership-eyebrow {
  font-family: var(--font-body);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--alp-carolina);
  display: block;
  margin-bottom: 12px;
}
.membership-cta-headline {
  font-family: var(--font-heading);
  font-size: clamp(1.8rem, 3vw, 3rem);
  color: var(--alp-indigo);
  line-height: 1.1;
  margin-bottom: 20px;
  font-weight: 600;
}
.membership-cta-copy {
  font-size: 1rem;
  color: var(--alp-charcoal);
  line-height: 1.75;
  margin-bottom: 12px;
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
}
.membership-cta-secondary {
  font-size: 0.95rem;
  color: rgba(11,31,58,0.55);
  font-style: italic;
  margin-bottom: 20px;
  display: block;
}
.membership-cta-buttons {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  justify-content: center;
}

/* ══════════════════════════════════════════════════════════════
   RESPONSIVE
   ══════════════════════════════════════════════════════════════ */
@media (max-width: 900px) {
  .service-callout {
    flex-direction: column;
    align-items: flex-start;
  }
}

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

}

@media (max-width: 768px) {
  .section-get-to-know    { padding-top: 36px; padding-bottom: 36px; }
  .section-timeline       { padding-top: 28px; padding-bottom: 0; }
  .section-founders       { padding-top: 28px; padding-bottom: 28px; }
  .section-scripture      { padding: 26px 0 26px; }
  .section-programs-v2    { padding-top: 32px; padding-bottom: 0; }
  .section-membership-cta { padding: 26px 20px 26px; }
}

@media (max-width: 640px) {
  .section-get-to-know    { padding-top: 28px; padding-bottom: 36px; }
  .section-timeline       { padding-top: 24px; padding-bottom: 0; }
  .section-founders       { padding-top: 24px; padding-bottom: 24px; }
  .section-scripture      { padding: 22px 0 22px; }
  .section-programs-v2    { padding-top: 32px; padding-bottom: 0; }
  .section-membership-cta { padding: 22px 20px 22px; }
  .service-callout        { padding: 22px 20px; }
  .membership-cta-headline br { display: none; }
  .membership-cta-buttons {
    flex-direction: column;
    align-items: center;
  }
  .membership-cta-buttons .btn {
    width: 100%;
    max-width: 320px;
    justify-content: center;
  }
}


/* ════════════════════════════════════════════════════════════════
   PROGRAMS PAGE (programs.html) — scoped additions only.
   Reuses existing tokens/utilities: .container, .section-label,
   .section-heading, .divider-line, .btn*, .reveal, .hero*, .program-grid,
   .program-card*, .program-icon-wrap. Nothing here touches Home page rules.
   ════════════════════════════════════════════════════════════════ */

/* ─── HERO (height modifier only — everything else inherited from .hero) ─── */
.programs-hero {
  height: clamp(380px, 26vw, 420px);
  min-height: 380px;
}
.programs-hero .hero-bg { object-fit: cover; object-position: center 30%; }
.programs-hero .hero-content { width: min(560px, 46%); }

/* ─── SHARED: line-icon sizing ──────────────────────────────────── */
.icon-line {
  color: var(--alp-carolina);
  flex-shrink: 0;
  display: block;
}

/* ─── SECTION 2: SERVICE BEYOND THE BROTHERHOOD ─────────────────── */
.svc-section {
  background: var(--alp-white);
  padding: 48px 0 44px;
}
.svc-split {
  display: grid;
  grid-template-columns: clamp(180px, 20vw, 230px) 1fr;
  gap: 48px;
  align-items: center;
}
.svc-seal-wrap { display: flex; justify-content: center; }
.svc-seal {
  width: 100%;
  max-width: 230px;
  height: auto;
  object-fit: contain;
}
.svc-copy h2 { margin-bottom: 16px; }
.svc-copy p {
  font-size: 1rem;
  color: var(--alp-charcoal);
  line-height: 1.75;
  max-width: 640px;
  margin-bottom: 14px;
}
.svc-copy p:last-child { margin-bottom: 0; }

/* ─── SECTION 3: VETERAN SERVICE & ADVOCACY ─────────────────────── */
.veteran-section {
  background: var(--alp-silver-light);
  padding: 50px 0 46px;
}
.veteran-split {
  display: grid;
  grid-template-columns: minmax(0, 0.92fr) minmax(0, 1fr);
  gap: 44px;
  align-items: center;
  margin-bottom: 36px;
}
.veteran-photo-wrap {
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: var(--radius-lg);
  box-shadow: 0 14px 40px rgba(4,20,38,.1);
}
.veteran-photo-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 30%;
}
.veteran-copy p {
  font-size: 1rem;
  color: var(--alp-charcoal);
  line-height: 1.75;
  margin-bottom: 14px;
}
.veteran-copy p:last-child { margin-bottom: 0; }

/* ─── SHARED: compact 4-item icon-feature rows ──────────────────── */
.icon-feature-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 26px;
}
.icon-feature {
  display: flex;
  gap: 12px;
  align-items: flex-start;
}
.icon-feature svg { width: 36px; height: 36px; margin-top: 2px; }
.icon-feature h3 {
  font-family: var(--font-body);
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--alp-indigo);
  margin-bottom: 6px;
}
.icon-feature p {
  font-size: 0.86rem;
  color: var(--alp-charcoal);
  line-height: 1.55;
}

/* ─── SECTION 4: PROJECT TRIDENT (signature — deep navy) ────────── */
.trident-section {
  background: var(--alp-indigo-deep);
  padding: 52px 0 48px;
}
.trident-split {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 48px;
  align-items: center;
  margin-bottom: 36px;
}
.trident-copy h2 { color: var(--alp-white); margin-bottom: 16px; }
.trident-copy p {
  font-size: 1rem;
  color: var(--alp-silver-light);
  line-height: 1.75;
  margin-bottom: 14px;
  max-width: 560px;
}
.trident-copy p:last-child { margin-bottom: 0; }
.trident-media-wrap {
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: var(--radius-lg);
  box-shadow: 0 14px 40px rgba(0,0,0,.35);
  background: #000;
}
.trident-media-wrap img { width: 100%; height: 100%; object-fit: cover; }
.trident-media-wrap video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.trident-section .icon-feature h3 { color: var(--alp-carolina-light); }
.trident-section .icon-feature p { color: var(--alp-silver-light); }

/* ─── SECTION 5+6: THE ALPHA WAY + FOUR PILLARS (one section — no gap between them) ─── */
.alpha-way-section {
  background: var(--alp-white);
  padding: 48px 0 44px;
}
.alpha-way-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  align-items: center;
}
.alpha-way-copy h2 { margin-bottom: 16px; }
.alpha-way-copy p {
  font-size: 1rem;
  color: var(--alp-charcoal);
  line-height: 1.75;
  margin-bottom: 14px;
}
.alpha-way-history {
  display: block;
  font-family: var(--font-body);
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--alp-carolina);
  margin-top: 4px;
}
.alpha-way-photo-wrap {
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: var(--radius-lg);
  box-shadow: 0 14px 40px rgba(4,20,38,.1);
}
.alpha-way-photo-wrap img { width: 100%; height: 100%; object-fit: cover; }

.pillars-block { margin-top: 34px; }
.pillars-heading {
  font-family: var(--font-body);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--alp-indigo);
  margin-bottom: 20px;
}
.pillars-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 26px;
}
.pillar-item { text-align: left; }
.pillar-item svg { width: 36px; height: 36px; margin-bottom: 10px; }
.pillar-item h3 {
  font-family: var(--font-body);
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--alp-indigo);
  margin-bottom: 6px;
}
.pillar-item .pillar-tagline {
  font-family: var(--font-heading);
  font-style: italic;
  font-size: 0.92rem;
  color: var(--alp-charcoal);
  margin-bottom: 6px;
}
.pillar-item p {
  font-size: 0.85rem;
  color: var(--alp-charcoal);
  line-height: 1.55;
}

/* ─── SECTION 7: MENTORSHIP FOR THE WHOLE YOUNG MAN (compact) ───── */
.wym-section {
  background: var(--alp-silver-light);
  padding: 38px 0 34px;
}
.wym-intro {
  font-size: 0.97rem;
  color: var(--alp-charcoal);
  line-height: 1.7;
  max-width: 680px;
  margin-bottom: 26px;
}
.wym-row {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 20px;
}
.wym-item { text-align: center; }
.wym-item svg { width: 32px; height: 32px; margin: 0 auto 10px; }
.wym-item span {
  display: block;
  font-family: var(--font-body);
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--alp-indigo);
}

/* ─── SECTION 8: EDUCATION & SCHOLARSHIPS ────────────────────────── */
.education-section {
  background: var(--alp-white);
  padding: 48px 0 46px;
}
.education-split {
  display: grid;
  grid-template-columns: 0.9fr 1fr;
  gap: 44px;
  align-items: center;
  margin-bottom: 32px;
}
.education-photo-wrap {
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: var(--radius-lg);
  box-shadow: 0 14px 40px rgba(4,20,38,.1);
}
.education-photo-wrap img { width: 100%; height: 100%; object-fit: cover; object-position: center 20%; }
.education-copy p {
  font-size: 1rem;
  color: var(--alp-charcoal);
  line-height: 1.75;
  margin-bottom: 14px;
}
.education-copy p:last-child { margin-bottom: 0; }
.scholarship-cards .program-card__body { gap: 0; }

/* ─── SECTION 9: SERVICE HAPPENS LOCALLY (compact) ───────────────── */
.local-section {
  background: var(--alp-silver-light);
  padding: 36px 0 34px;
}
.local-split {
  display: grid;
  grid-template-columns: minmax(220px, 0.55fr) 1fr;
  gap: 40px;
  align-items: center;
}
.local-photo-wrap {
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: var(--radius-lg);
  box-shadow: 0 10px 30px rgba(4,20,38,.1);
  max-width: 420px;
}
.local-photo-wrap img { width: 100%; height: 100%; object-fit: cover; }
.local-copy p {
  font-size: 0.97rem;
  color: var(--alp-charcoal);
  line-height: 1.7;
  margin-bottom: 12px;
}
.local-copy p:last-child { margin-bottom: 0; }

/* ─── SECTION 10: OUR COLLECTIVE IMPACT ──────────────────────────
   2026-09-04: redesigned as a "Vision to Impact in 2026" scorecard --
   structure/sophistication modeled on a sister-org reference site's own
   "Vision to Impact" section (decorative hairlines flanking the
   heading, a circular icon above each metric, a thin accent rule under
   each label, a small italic "2026 Goal" caption) but rebuilt entirely
   in this site's own --alp-* tokens -- no green/gold anywhere. The
   soft Carolina-tint gradient background (same family used by Events'
   .stay-informed- band) is kept from the previous version; the
   border-left column dividers are dropped in favor of each metric
   being its own self-contained icon-to-caption column, which is what
   keeps four columns of uneven source-number lengths (4,000+ vs 70)
   reading as evenly weighted. */
.collective-impact-section {
  background: linear-gradient(135deg, rgba(116,185,230,.20), rgba(116,185,230,.08));
  padding: 46px 0 44px;
}
.collective-impact-intro {
  width: 100%;
  max-width: 760px;
  margin: 0 auto;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.collective-impact-intro .section-label { justify-content: center; }
.collective-impact-heading-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  margin-top: 4px;
}
.collective-impact-heading-row .section-heading { margin-bottom: 0; }
/* Short decorative hairlines flanking the heading, per the reference
   section -- Carolina blue only, kept deliberately short (44px) so
   they read as ornament rather than a divider rule. */
.collective-impact-hr {
  display: block;
  width: 44px;
  height: 2px;
  background: var(--alp-carolina);
  flex: 0 0 auto;
}
.collective-impact-intro .section-sub {
  width: 100%;
  max-width: 640px;
  margin: 14px auto 0;
  text-align: center;
}
.collective-impact-metrics {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  max-width: 1020px;
  margin: 32px auto 0;
  align-items: start;
}
.collective-impact-metric {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 0 18px;
}
.collective-impact-icon {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--alp-white);
  margin-bottom: 20px;
}
.collective-impact-icon svg { width: 28px; height: 28px; }
.collective-impact-icon--carolina { background: var(--alp-carolina); }
.collective-impact-icon--navy { background: var(--alp-indigo-mid); }
.collective-impact-number {
  display: block;
  font-family: var(--font-heading);
  font-size: clamp(2.1rem, 3.5vw, 3.2rem);
  font-weight: 700;
  line-height: 1;
  color: var(--alp-indigo);
  margin-bottom: 10px;
}
.collective-impact-label {
  display: block;
  font-family: var(--font-body);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--alp-indigo);
}
/* Thin accent rule + small italic "2026 Goal" caption under each
   metric -- the explicit visual cue (repeated on all four) that these
   are organizational GOALS, not reported/completed results. */
.collective-impact-line {
  display: block;
  width: 30px;
  height: 2px;
  background: var(--alp-carolina);
  margin: 16px 0 12px;
}
.collective-impact-goal {
  display: block;
  font-family: var(--font-body);
  font-size: 0.7rem;
  font-style: italic;
  color: rgba(11,31,58,.62);
}
.collective-impact-note {
  width: 100%;
  max-width: 640px;
  margin: 30px auto 0;
  text-align: center;
  font-style: italic;
  font-size: 0.86rem;
  line-height: 1.6;
  color: rgba(11,31,58,.68);
}

/* ─── SECTION 11: CLOSING CTA (full-bleed image band) ────────────── */
/* 2026-08-30: was a fixed height:340px (min 300/max 360) with content
   purely flex-centered -- the buttons sat as close to the bottom edge
   (and the footer right after) as the label sat to the top, with no
   dedicated breathing room of its own. Switched height to min-height
   (content-driven instead of a hard cap) and added padding-bottom on
   the content column itself (see .programs-closing-cta
   .closing-cta-content below) so the extra room lands specifically
   below the button row against the footer, not symmetrically -- the
   section grows by only the added padding, not "dramatically taller". */
.programs-closing-cta {
  position: relative;
  width: 100%;
  min-height: 340px;
  background-image: url('../images/waters-edge.webp');
  background-size: cover;
  background-position: center 60%;
  background-repeat: no-repeat;
  display: flex;
  align-items: center;
  overflow: hidden;
}
.programs-closing-cta .closing-cta-content {
  padding-top: 30px;
  padding-bottom: 50px;
}
/* 2026-08-30: lightened from a near-black overlay (rgba(6,20,38,...),
   i.e. --alp-indigo-deep) to a medium-navy taper based on the site's
   own --alp-indigo-mid token (#102d52), so the waters-edge.webp photo
   stays visible on the right without the section reading near-black --
   a deliberately different medium-blue family than Membership's
   slate-blue treatment above, for rhythm across the two similar
   full-bleed CTA bands. */
.programs-closing-cta::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    rgba(16,45,82,.90) 0%,
    rgba(16,45,82,.74) 38%,
    rgba(16,45,82,.40) 62%,
    rgba(16,45,82,.12) 100%
  );
}
@media (max-width: 640px) {
  .programs-closing-cta .closing-cta-content { padding-top: 24px; padding-bottom: 40px; }
}
.closing-cta-content {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--gutter);
}
.closing-cta-content .section-label { color: var(--alp-carolina); }
.closing-cta-content h2 {
  color: var(--alp-white);
  max-width: 620px;
  margin-bottom: 14px;
  font-size: clamp(1.6rem, 3vw, 2.4rem);
}
.closing-cta-copy {
  font-size: 0.98rem;
  color: var(--alp-silver-light);
  line-height: 1.7;
  max-width: 540px;
  margin-bottom: 26px;
}
.closing-cta-buttons { display: flex; gap: 16px; flex-wrap: wrap; }

/* ─── PROGRAMS PAGE — RESPONSIVE ─────────────────────────────────── */
@media (max-width: 900px) {
  .svc-split,
  .veteran-split,
  .trident-split,
  .alpha-way-split,
  .education-split,
  .local-split {
    grid-template-columns: 1fr;
    gap: 32px;
  }
  .svc-seal-wrap { justify-content: flex-start; }
  .icon-feature-grid,
  .pillars-grid { grid-template-columns: repeat(2, 1fr); gap: 24px; }
  .wym-row { grid-template-columns: repeat(3, 1fr); gap: 22px 16px; }
  .trident-media-wrap { order: -1; }
  .local-photo-wrap { max-width: 100%; }
}

@media (max-width: 768px) {
  .svc-section       { padding: 40px 0 36px; }
  .veteran-section    { padding: 40px 0 36px; }
  .trident-section     { padding: 42px 0 38px; }
  .alpha-way-section    { padding: 40px 0 36px; }
  .wym-section        { padding: 32px 0 28px; }
  .education-section  { padding: 40px 0 36px; }
  .local-section      { padding: 30px 0 28px; }
  .collective-impact-section { padding: 34px 0 32px; }
  .pillars-block { margin-top: 30px; }

  /* Tablet: keep the four-across scorecard row as long as there's
     room; only drop to 2x2 at the mobile breakpoint below. */
  .collective-impact-metrics { max-width: 700px; gap: 24px 12px; }
  .collective-impact-metric { padding: 0 10px; }
  .collective-impact-icon { width: 52px; height: 52px; margin-bottom: 16px; }
  .collective-impact-icon svg { width: 24px; height: 24px; }
  .collective-impact-hr { width: 32px; }
  .collective-impact-heading-row { gap: 12px; }
}

@media (max-width: 640px) {
  .programs-hero .hero-content { width: 100%; margin-left: 0; padding-left: 0; padding-right: 0; }
  .svc-section       { padding: 34px 0 30px; }
  .veteran-section    { padding: 32px 0 28px; }
  .trident-section     { padding: 34px 0 30px; }
  .alpha-way-section    { padding: 32px 0 28px; }
  .wym-section        { padding: 32px 0 28px; }
  .education-section  { padding: 32px 0 28px; }
  .local-section      { padding: 30px 0 26px; }
  .collective-impact-section { padding: 32px 0 30px; }
  .pillars-block { margin-top: 28px; }

  .icon-feature-grid,
  .pillars-grid { grid-template-columns: repeat(2, 1fr); gap: 22px; }
  .wym-row { grid-template-columns: repeat(2, 1fr); gap: 20px; }

  /* Mobile: short decorative hairlines start crowding a heading this
     narrow -- drop them rather than shrink them further; the eyebrow
     above the heading already establishes the section, so the lines
     are purely ornamental here and not missed. */
  .collective-impact-hr { display: none; }
  .collective-impact-heading-row { gap: 0; }

  /* Mobile: 2x2 metric grid -- vertical dividers don't translate to
     a two-column layout, so swap them for a subtle top divider on
     the second row only (never before the first metric). */
  .collective-impact-metrics {
    grid-template-columns: repeat(2, 1fr);
    gap: 28px 14px;
    max-width: 420px;
  }
  .collective-impact-metric { padding: 0; }
  .collective-impact-icon { width: 50px; height: 50px; margin-bottom: 14px; }
  .collective-impact-icon svg { width: 22px; height: 22px; }
  .collective-impact-metric:nth-child(n+3) {
    border-top: 1px solid rgba(11,31,58,.18);
    padding-top: 20px;
  }

  .closing-cta-buttons { flex-direction: column; align-items: stretch; }
  .closing-cta-buttons .btn { justify-content: center; }
}


/* ════════════════════════════════════════════════════════════════
   MEMBERS AREA PAGE (members.html) — scoped additions only.
   Reuses existing tokens/utilities: .container, .section-label,
   .section-heading, .divider-line, .btn*, .reveal, .hero* (crest hero),
   .footer-contact-item svg (phone icon). Nothing here touches Home
   or Programs page rules.
   ════════════════════════════════════════════════════════════════ */

/* ─── SECTION 1: MEMBERS HERO (Poseidon artwork, matches Home hero) ─── */
/* 2026-08-31: Members Area hero now reuses the exact hero-brotherhood
   (1).webp Poseidon artwork approved for Home, and this block mirrors
   #hero's own override values verbatim (height, hero-bg object-fit/
   position, hero-content width/padding, label/headline/motto margins,
   and the 900px/640px responsive steps below) so the two Poseidon
   heroes are intentionally, visibly related, per the user's explicit
   request. The old content-left/crest-right two-column layout (and its
   .hero-inner flex/space-between override, narrower .hero-content) is
   removed along with it -- the decorative crest was already deleted
   from the HTML in the 2026-08-30 seal/crest cleanup, so that layout
   was purely vestigial. .members-hero-crest-wrap / .members-hero-crest
   rules are left in place (still unused) per this codebase's established
   practice of not touching unrelated code. Members keeps its OWN copy
   (label/headline/copy paragraph) -- only the image and hero chrome
   match Home. */
.members-hero {
  height: clamp(380px, 26vw, 420px);
  min-height: 380px;
}
.members-hero .hero-bg { object-fit: cover; object-position: 75% 11%; }
.members-hero .hero-content {
  width: min(740px, 60%);
  padding-top: 28px;
  padding-bottom: 24px;
}
.members-hero .hero-label { margin-bottom: 10px; }
.members-hero .hero-headline { margin-bottom: 6px; }
.members-hero .hero-motto { margin-bottom: 12px; }
@media (max-width: 900px) {
  .members-hero .hero-content {
    width: min(600px, 74%);
    padding-top: 22px;
    padding-bottom: 20px;
  }
}
.members-hero-crest-wrap { flex-shrink: 0; display: flex; justify-content: flex-end; }
.members-hero-crest {
  width: clamp(300px, 26vw, 460px);
  height: auto;
  object-fit: contain;
  filter: drop-shadow(0 14px 34px rgba(0,0,0,.55));
}

/* ─── SECTION 2: COMING SOON (compact, centered) ─────────────────── */
.coming-soon-section {
  background: var(--alp-white);
  padding: 42px 0 38px;
  text-align: center;
}
.coming-soon-inner { max-width: 680px; margin: 0 auto; }
.coming-soon-inner .section-label { justify-content: center; }
.coming-soon-inner .divider-line { margin-left: auto; margin-right: auto; }
.coming-soon-inner h2 { margin-bottom: 14px; }
.coming-soon-inner p {
  font-size: 1rem;
  color: var(--alp-charcoal);
  line-height: 1.75;
}

/* ─── SECTION 3: MEMBER PORTAL PREVIEW ───────────────────────────── */
.portal-preview-section {
  background: var(--alp-silver-light);
  padding: 44px 0 40px;
}
.portal-preview-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}
.portal-preview-item {
  padding: 0 24px;
  border-left: 1px solid rgba(11,31,58,.1);
}
.portal-preview-item:first-child { border-left: none; padding-left: 0; }
.portal-preview-item:last-child { padding-right: 0; }
.portal-preview-item svg {
  width: 46px;
  height: 46px;
  color: var(--alp-carolina);
  margin-bottom: 14px;
}
.portal-preview-item h3 {
  font-family: var(--font-body);
  font-size: 0.86rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--alp-indigo);
  margin-bottom: 10px;
}
.portal-preview-item .divider-line { margin: 0 0 12px; }
.portal-preview-item p {
  font-size: 0.9rem;
  color: var(--alp-charcoal);
  line-height: 1.6;
  margin-bottom: 16px;
}
.portal-preview-image {
  width: 100%;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: var(--radius-lg);
}
.portal-preview-image img { width: 100%; height: 100%; object-fit: cover; }

/* ─── SECTION 4: SECURE MEMBER ACCESS (compact navy strip) ───────── */
.secure-access-section {
  position: relative;
  background: var(--alp-indigo-deep);
  padding: 26px 0;
  overflow: hidden;
}
.secure-access-inner {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 22px;
}
.secure-access-inner svg {
  width: 38px;
  height: 38px;
  color: var(--alp-carolina);
  flex-shrink: 0;
}
.secure-access-text h2 {
  color: var(--alp-white);
  font-size: clamp(1.1rem, 1.8vw, 1.4rem);
  margin-bottom: 6px;
}
.secure-access-text p {
  color: var(--alp-silver-light);
  font-size: 0.94rem;
  line-height: 1.6;
  max-width: 620px;
  margin: 0;
}
.secure-access-watermark {
  position: absolute;
  right: -10px;
  top: 50%;
  transform: translateY(-50%);
  width: 130px;
  height: 130px;
  color: var(--alp-carolina);
  opacity: 0.12;
  pointer-events: none;
}

/* ─── SECTION 5: NEED ASSISTANCE (compact CTA strip) ─────────────── */
.assistance-section {
  background: var(--alp-silver-light);
  padding: 30px 0;
}
.assistance-inner {
  display: flex;
  align-items: center;
  gap: 22px;
}
.assistance-inner svg {
  width: 34px;
  height: 34px;
  color: var(--alp-carolina);
  flex-shrink: 0;
}
.assistance-text { flex: 1; }
.assistance-text h2 {
  color: var(--alp-indigo);
  font-size: clamp(1.05rem, 1.6vw, 1.3rem);
  margin-bottom: 4px;
}
.assistance-text p {
  color: var(--alp-charcoal);
  font-size: 0.94rem;
  margin: 0;
}
.assistance-inner .btn { flex-shrink: 0; }

/* ─── MEMBERS AREA — RESPONSIVE ──────────────────────────────────── */
@media (max-width: 900px) {
  .portal-preview-grid { grid-template-columns: repeat(2, 1fr); gap: 32px 0; }
  .portal-preview-item { border-left: none; padding: 0; border-top: 1px solid rgba(11,31,58,.1); padding-top: 24px; }
  .portal-preview-item:nth-child(1),
  .portal-preview-item:nth-child(2) { border-top: none; padding-top: 0; }
  .assistance-inner { flex-wrap: wrap; }
  .assistance-inner .btn { width: 100%; justify-content: center; order: 3; }
}

@media (max-width: 768px) {
  .coming-soon-section    { padding: 34px 0 30px; }
  .portal-preview-section { padding: 36px 0 32px; }
}

@media (max-width: 640px) {
  /* 2026-08-31: mirrors #hero's own 640px step verbatim -- same hero
     height (the clamp's own 380px min-height carries through, no more
     height:auto/min-height:0 override), same content-column reflow. */
  .members-hero .hero-content {
    width: 100%;
    margin-left: 0;
    padding-left: 0;
    padding-right: 0;
    padding-top: 16px;
    padding-bottom: 14px;
  }
  .members-hero .hero-label { margin-bottom: 8px; }
  .members-hero .hero-headline { margin-bottom: 4px; }
  .members-hero .hero-motto { margin-bottom: 10px; }
  .members-hero-crest-wrap { width: 100%; justify-content: flex-start; }
  .members-hero-crest { width: min(260px, 60vw); }

  .coming-soon-section    { padding: 30px 0 28px; }
  .portal-preview-section { padding: 32px 0 28px; }
  .portal-preview-grid { grid-template-columns: 1fr; gap: 28px; }
  .portal-preview-item { border-top: none !important; padding-top: 0 !important; }
  .secure-access-section { padding: 22px 0; }
  .secure-access-inner { flex-direction: column; text-align: center; gap: 14px; }
  .secure-access-watermark { display: none; }
  .assistance-section { padding: 26px 0; }
  .assistance-inner { flex-direction: column; text-align: center; }
}


/* ════════════════════════════════════════════════════════════════
   CONTACT PAGE (contact.html) — scoped additions only.
   Reuses existing tokens/utilities: .container, .section-label,
   .section-heading, .divider-line, .btn*, .reveal, .hero* (crest hero
   pattern), .footer-contact-item svg icons. Nothing here touches Home,
   Programs, or Members Area page rules.
   ════════════════════════════════════════════════════════════════ */

/* ─── SECTION 1: CONTACT HERO (content left, crest right) ────────── */
.contact-hero {
  height: clamp(320px, 22vw, 370px);
  min-height: 320px;
}
/* 2026-08-31: object-fit:cover was enlarging/cropping the photo until the
   laptop and phone -- the whole reason this photo was chosen -- fell
   outside the frame. Switched to a CSS background-image, deliberately
   SMALLER than the hero box (82% of hero width, full photo, nothing
   cropped horizontally), right-anchored so the photo sits toward
   center/right and the left ~18% is a gap of clean navy. Height is
   "auto" (not a fixed px) so the photo keeps its own aspect ratio
   rather than being stretched -- this means the RENDERED photo is
   taller than the short hero box, so some vertical cropping still
   happens (top of the laptop screen and the very bottom of the phone/
   notebook), but that crop is controlled by `background-position`'s
   vertical value, not by an enlarge-and-crop fit mode -- centered
   vertically, this window lands on the lower portion of the laptop
   screen (contact-form fields + Send button), the full keyboard, the
   phone's "Contact Us" heading, most of the mug, and most of the
   notebook+pen -- i.e. exactly the recognizable portions the user
   asked for. #061d2b is a Contact-specific deep-navy match for this
   photo's own tones, per the user's explicit starting value -- close
   to but distinct from the sitewide `.hero` base `#041929`. Tried
   78%/solid-to-32% first per the request's own starting numbers, but
   that kept the gradient's solid zone wide enough to bury the laptop
   and phone (which sit in the photo's own LEFT portion) almost
   entirely -- see the dated project-memory entry for the reasoning;
   82% + an earlier, faster fade (below) is what actually keeps them
   both recognizable while the copy stays legible. */
.contact-hero {
  background-image: url('../images/contact-page-professional-2f1178.webp');
  background-size: 82% auto;
  background-position: right center;
  background-repeat: no-repeat;
  background-color: #061d2b;
}
/* Custom gradient (not the shared base .hero::after): that gradient is
   tuned for a full-bleed cover-fit photo whose pixels start at x=0.
   Here the photo doesn't even begin until ~18% of hero width (82% size,
   right-anchored leaves an 18% gap), and the laptop/phone -- the photo's
   own leftmost objects -- land at roughly 22%-58% and 28%-47% of hero
   width respectively once scaled and right-anchored. A gradient with a
   wide solid zone (matching the "left 30-35%" description in the
   request) would bury both under near-opaque navy. This shape instead
   stays solid only to 16% (just past the photo's own boundary, still
   comfortably behind the hero-content copy column) then fades out
   quickly, fully clear by 60% -- copy stays legible (verified via
   screenshot at every breakpoint) while the laptop and phone read
   clearly. */
.contact-hero::after {
  background: linear-gradient(
    90deg,
    #061d2b 0%,
    #061d2b 16%,
    rgba(6,29,43,.55) 26%,
    rgba(6,29,43,.3)  36%,
    rgba(6,29,43,.12) 48%,
    rgba(6,29,43,0)   60%
  );
}
.contact-hero .hero-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
}
.contact-hero .hero-content { width: min(540px, 50%); margin-left: 0; }
.contact-hero-crest-wrap { flex-shrink: 0; display: flex; justify-content: flex-end; }
.contact-hero-crest {
  width: clamp(280px, 22vw, 420px);
  height: auto;
  object-fit: contain;
  filter: drop-shadow(0 14px 34px rgba(0,0,0,.5));
}

/* ─── SECTION 2: REACH US DIRECTLY ───────────────────────────────── */
.reach-us-section {
  background: var(--alp-white);
  padding: 42px 0 38px;
}
.reach-us-intro { text-align: center; margin-bottom: 30px; }
.reach-us-intro .section-heading { margin-bottom: 0; }
.reach-us-grid {
  display: grid;
  /* 2026-09-03: Phone column removed (site no longer publishes a phone
     number) -- now a centered 2-item layout instead of the previous
     stretched 3-column grid, so EMAIL + WEBSITE read as intentionally
     designed rather than a 3-column grid with one slot missing. */
  grid-template-columns: repeat(2, minmax(200px, 260px));
  justify-content: center;
}
.reach-us-item {
  text-align: center;
  padding: 0 24px;
  border-left: 1px solid rgba(11,31,58,.1);
}
.reach-us-item:first-child { border-left: none; }
.reach-us-icon-badge {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: var(--alp-silver-light);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 14px;
}
.reach-us-icon-badge svg { width: 26px; height: 26px; color: var(--alp-carolina); }
.reach-us-item .reach-us-label {
  display: block;
  font-family: var(--font-body);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--alp-indigo);
  margin-bottom: 6px;
}
.reach-us-item a {
  font-size: 1rem;
  color: var(--alp-charcoal);
  transition: color var(--trans);
}
.reach-us-item a:hover, .reach-us-item a:focus-visible { color: var(--alp-carolina); }

/* ─── SECTION 3: MAIN CONTACT AREA (form + inquiry guide) ────────── */
.contact-main-section {
  background: var(--alp-silver-light);
  padding: 46px 0 44px;
}
.contact-main-grid {
  display: grid;
  grid-template-columns: 1.6fr 1fr;
  gap: 48px;
  align-items: start;
}

/* Form panel */
.contact-form-panel {
  background: var(--alp-white);
  border-radius: var(--radius-lg);
  padding: 34px 36px;
  box-shadow: 0 14px 40px rgba(4,20,38,.08);
}
.contact-form-panel .section-heading { margin-bottom: 10px; }
.contact-form-intro {
  font-size: 0.95rem;
  color: var(--alp-charcoal);
  line-height: 1.65;
  max-width: 560px;
  margin-bottom: 26px;
}
.contact-form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px 20px;
}
.form-group { display: flex; flex-direction: column; }
.form-group--full { grid-column: 1 / -1; }
.form-group label {
  font-family: var(--font-body);
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--alp-indigo);
  margin-bottom: 7px;
}
.form-group .required-mark { color: var(--alp-carolina); margin-left: 2px; }
.form-group input,
.form-group select,
.form-group textarea {
  font-family: var(--font-body);
  font-size: 0.94rem;
  color: var(--alp-indigo);
  background: var(--alp-white);
  border: 1px solid var(--alp-silver);
  border-radius: var(--radius);
  padding: 0 14px;
  height: 48px;
  transition: border-color var(--trans), box-shadow var(--trans);
}
.form-group select { appearance: auto; }
.form-group textarea {
  height: 160px;
  padding: 12px 14px;
  resize: vertical;
  line-height: 1.5;
}
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
  outline: none;
  border-color: var(--alp-carolina);
  box-shadow: 0 0 0 3px rgba(116,185,230,.25);
}
.contact-form-submit {
  margin-top: 22px;
  display: flex;
  justify-content: flex-start;
}
.contact-form-submit svg { width: 16px; height: 16px; }

/* Inquiry guide panel */
.inquiry-guide-panel {
  padding-top: 4px;
}
.inquiry-guide-panel .section-label { display: block; }
.inquiry-guide-panel h2 { margin-bottom: 20px; }
.inquiry-list { display: flex; flex-direction: column; }
.inquiry-item {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  padding: 16px 0;
  border-top: 1px solid rgba(11,31,58,.1);
}
.inquiry-item:first-child { border-top: none; padding-top: 0; }
.inquiry-item svg {
  width: 30px;
  height: 30px;
  color: var(--alp-carolina);
  flex-shrink: 0;
  margin-top: 2px;
}
.inquiry-item h3 {
  font-family: var(--font-body);
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--alp-indigo);
  margin-bottom: 4px;
}
.inquiry-item p {
  font-size: 0.86rem;
  color: var(--alp-charcoal);
  line-height: 1.55;
}

/* ─── SECTION 4: THANK YOU / RESPONSE NOTE ───────────────────────── */
.thank-you-section {
  background: var(--alp-carolina-light);
  padding: 26px 0;
}
.thank-you-inner {
  display: flex;
  align-items: center;
  gap: 18px;
}
.thank-you-inner svg {
  width: 34px;
  height: 34px;
  color: var(--alp-indigo);
  flex-shrink: 0;
}
.thank-you-text h2 {
  color: var(--alp-indigo);
  font-size: clamp(1.05rem, 1.6vw, 1.3rem);
  margin-bottom: 4px;
}
.thank-you-text p {
  color: var(--alp-indigo);
  opacity: .85;
  font-size: 0.92rem;
  line-height: 1.6;
  margin: 0;
  max-width: 720px;
}

/* ─── SECTION 5: WORK WITH US ─────────────────────────────────────── */
.work-with-section {
  background: var(--alp-white);
  padding: 42px 0 44px;
  text-align: center;
}
.work-with-inner { max-width: 680px; margin: 0 auto; }
.work-with-inner .section-label { justify-content: center; }
.work-with-inner h2 { margin-bottom: 14px; }
.work-with-inner p {
  font-size: 1rem;
  color: var(--alp-charcoal);
  line-height: 1.7;
  margin-bottom: 26px;
}
.work-with-buttons { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; }

/* ─── CONTACT PAGE — RESPONSIVE ──────────────────────────────────── */
@media (max-width: 900px) {
  .contact-main-grid { grid-template-columns: 1fr; gap: 36px; }
  .inquiry-guide-panel { padding-top: 0; }
}

@media (max-width: 768px) {
  .reach-us-section       { padding: 34px 0 30px; }
  .contact-main-section   { padding: 38px 0 36px; }
  .work-with-section      { padding: 34px 0 32px; }
  .contact-form-panel     { padding: 28px 24px; }
}

@media (max-width: 640px) {
  .contact-hero { height: auto; min-height: 0; }
  .contact-hero .hero-inner { flex-direction: column; align-items: flex-start; gap: 22px; padding-top: 32px; padding-bottom: 28px; }
  .contact-hero .hero-content { width: 100%; margin-left: 0; padding-top: 0; padding-bottom: 0; }
  .contact-hero-crest-wrap { width: 100%; justify-content: flex-start; }
  .contact-hero-crest { width: min(240px, 55vw); }

  .reach-us-section     { padding: 30px 0 26px; }
  .reach-us-grid        { grid-template-columns: 1fr; gap: 26px; }
  .reach-us-item        { border-left: none; padding: 0; }
  /* subtle horizontal divider between stacked items instead of the
     desktop vertical divider */
  .reach-us-item:not(:first-child) { border-top: 1px solid rgba(11,31,58,.1); padding-top: 22px; }
  .contact-main-section { padding: 32px 0 28px; }
  .contact-form-panel   { padding: 24px 18px; }
  .contact-form-grid    { grid-template-columns: 1fr; }
  .work-with-section    { padding: 30px 0 28px; }
  .work-with-buttons    { flex-direction: column; align-items: stretch; }
  .work-with-buttons .btn { justify-content: center; }
  .thank-you-inner      { flex-direction: column; text-align: center; gap: 10px; }
}


/* ════════════════════════════════════════════════════════════════
   MEMBERSHIP PAGE (membership.html) — scoped additions only.
   This is the PUBLIC membership-interest page (prospective members),
   distinct from the Members Area (existing Brothers). Reuses existing
   tokens/utilities: .container, .section-label, .section-heading,
   .divider-line, .btn*, .reveal, .hero* (crest hero pattern),
   .closing-cta-content/.closing-cta-copy/.closing-cta-buttons (from
   Programs), .contact-form-panel/.contact-form-grid/.form-group/
   .contact-form-submit (from Contact). Nothing here touches Home,
   Programs, Members Area, or Contact page rules.
   ════════════════════════════════════════════════════════════════ */

/* ─── SECTION 1: MEMBERSHIP HERO (content left, crest right) ────── */
.membership-hero {
  height: clamp(420px, 28vw, 480px);
  min-height: 400px;
}
.membership-hero .hero-bg { object-fit: cover; object-position: 55% 29%; }
.membership-hero .hero-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
}
.membership-hero .hero-content { width: min(560px, 52%); margin-left: 0; }
.membership-hero .hero-motto { margin-bottom: 20px; }
.membership-hero .btn { margin-top: 6px; }
.membership-hero-crest-wrap { flex-shrink: 0; display: flex; justify-content: flex-end; }
.membership-hero-crest {
  width: clamp(260px, 20vw, 380px);
  height: auto;
  object-fit: contain;
  filter: drop-shadow(0 14px 34px rgba(0,0,0,.5));
}

/* ─── SECTION 2: MORE THAN MEMBERSHIP ────────────────────────────── */
.principles-section {
  background: var(--alp-white);
  padding: 46px 0 42px;
}
.principles-intro { max-width: 720px; margin-bottom: 30px; }
.principles-intro p {
  font-size: 0.98rem;
  color: var(--alp-charcoal);
  line-height: 1.7;
  margin-top: 4px;
}
.principles-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 20px;
}
.principle-card {
  min-width: 0;
  background: var(--alp-white);
  border: 1px solid rgba(11,31,58,.12);
  border-radius: var(--radius-lg);
  padding: 22px 18px 24px;
  text-align: center;
  transition: border-color var(--trans), box-shadow var(--trans), transform var(--trans);
}
.principle-card h3 { overflow-wrap: break-word; }
.principle-card:hover {
  border-color: var(--alp-carolina);
  box-shadow: 0 12px 32px rgba(4,20,38,.08);
  transform: translateY(-3px);
}
.principle-icon-badge {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: var(--alp-silver-light);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 14px;
  color: var(--alp-indigo);
}
.principle-icon-badge svg { width: 24px; height: 24px; }
.principle-card h3 {
  font-family: var(--font-body);
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--alp-indigo);
  margin-bottom: 8px;
}
.principle-card p { font-size: 0.86rem; color: var(--alp-charcoal); line-height: 1.55; }

/* ─── SECTION 3: WHO CAN PURSUE MEMBERSHIP? ──────────────────────── */
.eligibility-section {
  background: var(--alp-silver-light);
  padding: 44px 0 42px;
}
.eligibility-split {
  display: grid;
  grid-template-columns: minmax(0,.85fr) minmax(0,1fr);
  gap: 48px;
  align-items: center;
}
.eligibility-photo-wrap { border-radius: var(--radius-lg); overflow: hidden; }
.eligibility-photo-wrap img { width: 100%; height: 100%; object-fit: cover; display: block; }
.eligibility-copy p { margin-bottom: 14px; }
.eligibility-accent {
  display: block;
  font-family: var(--font-heading);
  font-style: italic;
  font-size: clamp(1.1rem, 1.8vw, 1.35rem);
  color: var(--alp-indigo);
  border-left: 3px solid var(--alp-carolina);
  padding-left: 16px;
  margin: 20px 0 24px;
  line-height: 1.5;
}

/* ─── SECTION 4: THE PATH TO BROTHERHOOD (6-step journey) ────────── */
.journey-section {
  background: var(--alp-white);
  padding: 46px 0 40px;
}
.journey-intro { max-width: 760px; }
.journey-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 0;
  position: relative;
  margin-top: 34px;
}
.journey-grid::before {
  content: '';
  position: absolute;
  top: 26px;
  left: 8.33%;
  right: 8.33%;
  height: 2px;
  background: linear-gradient(to right, var(--alp-indigo), var(--alp-carolina), var(--alp-indigo));
  z-index: 0;
}
.journey-step { position: relative; z-index: 1; text-align: center; padding: 0 12px; }
.journey-num {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: var(--alp-carolina);
  color: var(--alp-indigo-deep);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 1.1rem;
  border: 3px solid var(--alp-white);
  box-shadow: 0 0 0 2px var(--alp-indigo);
  margin: 0 auto 16px;
}
.journey-step h3 {
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--alp-indigo);
  margin-bottom: 8px;
}
.journey-step p { font-size: 0.84rem; color: var(--alp-charcoal); line-height: 1.55; }

/* ─── SECTION 5: WHAT WE EXPECT OF OUR BROTHERS ──────────────────── */
.standard-section {
  background: var(--alp-indigo-deep);
  padding: 44px 0 40px;
}
.standard-section .section-label { color: var(--alp-carolina); }
.standard-section h2 { color: var(--alp-white); }
.standard-intro {
  max-width: 720px;
  color: var(--alp-silver-light);
  font-size: 0.98rem;
  line-height: 1.7;
  margin-bottom: 32px;
}
.standard-words-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 24px;
}
.standard-word {
  min-width: 0;
  text-align: center;
  border-left: 1px solid rgba(255,255,255,.15);
  padding: 0 16px;
}
.standard-word h3 { overflow-wrap: break-word; }
.standard-word:first-child { border-left: none; }
.standard-word h3 {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: clamp(0.95rem, 1.3vw, 1.2rem);
  color: var(--alp-carolina);
  letter-spacing: 0.01em;
  text-transform: uppercase;
  margin-bottom: 10px;
  white-space: nowrap;
}
.standard-word p { font-size: 0.86rem; color: var(--alp-silver-light); line-height: 1.55; }

/* ─── SECTION 6: MEMBERSHIP INTEREST (photo + form) ──────────────── */
.interest-section {
  background: var(--alp-silver-light);
  padding: 46px 0 44px;
}
.interest-grid {
  display: grid;
  grid-template-columns: minmax(0,.85fr) minmax(0,1.15fr);
  gap: 44px;
  align-items: stretch;
}
.interest-photo-wrap { border-radius: var(--radius-lg); overflow: hidden; min-height: 320px; }
.interest-photo-wrap img { width: 100%; height: 100%; object-fit: cover; display: block; }
.interest-privacy-note {
  font-size: 0.8rem;
  color: rgba(11,31,58,.6);
  line-height: 1.6;
  margin-top: 14px;
  max-width: 480px;
}

/* ─── SECTION 7: FINAL CTA (short ocean band) ────────────────────── */
.membership-closing-cta {
  position: relative;
  width: 100%;
  height: clamp(220px, 16vw, 280px);
  min-height: 220px;
  max-height: 280px;
  background-image: url('../images/ocean-cta.webp');
  background-size: cover;
  background-position: center 55%;
  background-repeat: no-repeat;
  display: flex;
  align-items: center;
  overflow: hidden;
}
/* 2026-08-30: lightened from a near-black overlay (rgba(6,20,38,...),
   i.e. --alp-indigo-deep) to a medium slate-blue taper, using the hex
   triplet suggested for this section (#173a5e/#24527a/#315f87) --
   same left-to-right taper shape/opacity steps as before, just a
   lighter color family, so the ocean-cta.webp photo stays legible
   under the text on the left without the section reading near-black. */
.membership-closing-cta::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    rgba(23,58,94,.88) 0%,
    rgba(36,82,122,.68) 42%,
    rgba(49,95,135,.36) 70%,
    rgba(49,95,135,.10) 100%
  );
}
/* Button removed from this section 2026-08-30 -- the copy paragraph
   no longer needs the margin that used to separate it from the
   button row, so the block re-centers cleanly in the still-vertically-
   centered flex band instead of leaving trailing empty space. */
.closing-cta-copy--noButton { margin-bottom: 0; }

/* ─── MEMBERSHIP PAGE — RESPONSIVE ───────────────────────────────── */
@media (max-width: 900px) {
  .principles-grid     { grid-template-columns: repeat(3, 1fr); gap: 18px; }
  .eligibility-split   { grid-template-columns: 1fr; gap: 30px; }
  .journey-grid        { grid-template-columns: repeat(3, 1fr); row-gap: 30px; }
  .journey-grid::before { display: none; }
  .standard-words-grid { grid-template-columns: repeat(3, 1fr); row-gap: 26px; }
  .standard-word       { border-left: none; }
  .interest-grid       { grid-template-columns: 1fr; gap: 34px; }
  .interest-photo-wrap { min-height: 260px; }
}

@media (max-width: 768px) {
  .membership-hero    { height: auto; min-height: 0; }
  .principles-section { padding: 38px 0 34px; }
  .eligibility-section{ padding: 38px 0 34px; }
  .journey-section     { padding: 38px 0 34px; }
  .standard-section    { padding: 38px 0 34px; }
  .interest-section    { padding: 38px 0 34px; }
}

@media (max-width: 640px) {
  .membership-hero .hero-inner { flex-direction: column; align-items: flex-start; gap: 22px; padding-top: 32px; padding-bottom: 28px; }
  .membership-hero .hero-content { width: 100%; margin-left: 0; padding-top: 0; padding-bottom: 0; }
  .membership-hero-crest-wrap { width: 100%; justify-content: flex-start; }
  .membership-hero-crest { width: min(220px, 55vw); }

  .principles-section  { padding: 32px 0 28px; }
  .principles-grid     { grid-template-columns: 1fr; gap: 16px; }
  .eligibility-section { padding: 32px 0 28px; }
  .journey-section      { padding: 32px 0 28px; }
  .journey-grid         { grid-template-columns: 1fr; row-gap: 26px; }
  .standard-section     { padding: 32px 0 28px; }
  .standard-words-grid  { grid-template-columns: 1fr; row-gap: 20px; }
  .standard-word        { border-left: none; border-top: 1px solid rgba(255,255,255,.15); padding: 18px 0 0; }
  .standard-word:first-child { border-top: none; padding-top: 0; }
  .interest-section     { padding: 30px 0 28px; }
  .interest-photo-wrap  { min-height: 200px; }
  .contact-form-grid    { grid-template-columns: 1fr; }
}


/* ════════════════════════════════════════════════════════════════
   EVENTS PAGE (events.html) — scoped additions only.
   2026-09-02, FULL PAGE REBUILD: replaces the previous bordered-card
   design (old .past-events-grid, .event-card, .event-artwork-area,
   .event-flyer-photo, .event-category, .event-card-* variants, and
   .events-stay-connected — all removed, not just overridden, so
   nothing from the old layout is left hidden in CSS). The original
   .events-hero rules just below were briefly removed in that same
   rebuild, then restored exactly as they were per a follow-up
   request — same values throughout, nothing new.
   Reuses existing tokens/utilities: .container, .section-label,
   .section-heading, .section-sub, .divider-line/.divider-line--center,
   .reveal, .reach-us-icon-badge (icon-badge circle, from Contact),
   .media-preview-trigger (generic flyer hover/lightbox, from
   initMediaPreviewTriggers() in js/main.js — unchanged, just reused).
   Nothing here touches Home, Programs, Members Area, Contact,
   Membership, Leadership, About, Chapters or the global header/
   footer/nav rules.
   ════════════════════════════════════════════════════════════════ */

/* ─── SECTION 1: EVENTS HERO (short, content left, crest right) ─── */
.events-hero {
  height: clamp(330px, 23vw, 380px);
  min-height: 320px;
}
.events-hero .hero-bg { object-fit: cover; object-position: center 55%; }
.events-hero .hero-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
}
.events-hero .hero-content { width: min(560px, 54%); margin-left: 0; padding-top: 0; padding-bottom: 0; }
.events-hero .hero-motto { margin-bottom: 14px; }
.events-hero .hero-copy { margin-bottom: 0; }
.events-hero-crest-wrap { flex-shrink: 0; display: flex; justify-content: flex-end; }
.events-hero-crest {
  width: clamp(260px, 22vw, 360px);
  height: auto;
  object-fit: contain;
  filter: drop-shadow(0 14px 34px rgba(0,0,0,.5));
}

/* ─── Past Events intro — dedicated flex-column version ──────────
   2026-09-02: converted from a plain text-align:center block to a
   flex column (same technique as .events-upcoming-intro below) to
   fix the paragraph/divider centering on a real user report -- a
   flex column makes every child (eyebrow, heading, paragraph,
   divider) center on the exact same axis regardless of its own
   width, instead of relying on each child's own max-width/margin
   lining up. */
.past-events-intro {
  width: 100%;
  max-width: 820px;
  margin: 0 auto 26px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.past-events-intro .section-label { justify-content: center; }
.past-events-intro p {
  width: 100%;
  max-width: 680px;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}
.past-events-intro .divider-line {
  margin-left: auto;
  margin-right: auto;
}

/* ─── Upcoming Events intro — dedicated flex-column version ──────
   2026-09-02: split off from the shared .events-intro (now renamed
   .past-events-intro) above to fix the paragraph/divider centering
   on a real user report -- a flex column makes every child (eyebrow,
   heading, paragraph, divider) center on the exact same axis
   regardless of its own width, instead of relying on each child's
   own max-width/margin lining up. */
.events-upcoming-intro {
  width: 100%;
  max-width: 760px;
  margin: 0 auto 26px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.events-upcoming-intro .section-label { justify-content: center; }
.events-upcoming-intro p {
  width: 100%;
  max-width: 650px;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}
.events-upcoming-intro .divider-line {
  margin-left: auto;
  margin-right: auto;
}

/* ─── SECTION 2: UPCOMING EVENTS ─────────────────────────────────── */
.upcoming-section {
  background: var(--alp-white);
  padding: 36px 0 26px;
  text-align: center;
}
.upcoming-events-list { text-align: left; }
.events-empty-state {
  max-width: 980px;
  margin: 0 auto;
  text-align: center;
  background: rgba(255,255,255,.72);
  border: 1px solid rgba(10,48,84,.12);
  border-radius: 8px;
  padding: 36px 30px 38px;
}
.events-empty-state .reach-us-icon-badge { margin: 0 auto 14px; }
.events-empty-title {
  font-family: var(--font-heading);
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--alp-indigo);
  margin-bottom: 8px;
}
.events-empty-copy { font-size: 0.92rem; color: var(--alp-charcoal); line-height: 1.6; margin: 0 auto; max-width: 480px; }

/* ─── SECTION 3: STAY INFORMED BAND (compact, not a big CTA) ─────── */
.stay-informed-band {
  background: linear-gradient(135deg, rgba(116,185,230,0.14), rgba(116,185,230,0.06));
}
.stay-informed-inner {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 28px;
  max-width: 980px;
  margin: 0 auto;
  padding: 22px 24px;
}
.stay-informed-icon {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: rgba(116,185,230,.2);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--alp-indigo);
  flex-shrink: 0;
}
.stay-informed-icon svg { width: 20px; height: 20px; }
.stay-informed-eyebrow {
  display: block;
  font-family: var(--font-body);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--alp-indigo);
  margin-bottom: 4px;
}
.stay-informed-copy {
  font-family: var(--font-body);
  font-size: 0.92rem;
  color: var(--alp-charcoal);
  line-height: 1.55;
  margin: 0;
  max-width: 480px;
}
.stay-informed-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-body);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--alp-indigo);
  padding-left: 26px;
  border-left: 1px solid rgba(11,31,58,.18);
  white-space: nowrap;
  transition: color 0.2s ease;
}
.stay-informed-cta-arrow { display: inline-block; transition: transform 0.2s ease; }
.stay-informed-cta:hover, .stay-informed-cta:focus-visible { color: var(--alp-carolina); }
.stay-informed-cta:hover .stay-informed-cta-arrow,
.stay-informed-cta:focus-visible .stay-informed-cta-arrow { transform: translateX(3px); }
.stay-informed-cta:focus-visible { outline: 2px solid var(--alp-indigo); outline-offset: 3px; }

/* ─── SECTION 4: PAST EVENTS ──────────────────────────────────────── */
.past-events-section {
  background: var(--alp-white);
  padding: 38px 0 42px;
  text-align: center;
}

/* ─── Editorial event layout (flyer + copy, alternating sides) ──── */
.event-editorial {
  display: grid;
  align-items: center;
  gap: 48px;
  max-width: 1120px;
  margin: 0 auto;
  text-align: left;
}
.event-editorial--media-left  { grid-template-columns: 1.2fr .85fr; }
.event-editorial--media-right { grid-template-columns: .9fr .75fr; gap: 54px; }

.event-editorial-media { display: flex; justify-content: center; min-width: 0; }
.event-editorial-content { min-width: 0; }
/* Hover/click zoom behavior (.event-editorial-media .media-preview-trigger)
   lives with the rest of the generic media-preview rules further down
   this file, alongside the About-page president-portrait equivalent. */
/* The flyer is displayed as-is (object-fit:contain, no cropping) at its
   own natural aspect ratio. Landscape (Founders' Day) is allowed to run
   wider than portrait (Backpack Drive), matching each poster's own
   proportions rather than forcing matching widths. */
.event-editorial-flyer {
  display: block;
  width: 100%;
  height: auto;
  object-fit: contain;
  box-shadow: 0 16px 36px rgba(0,0,0,.14);
  border-radius: 3px;
  margin: 0 auto;
}
.event-editorial-flyer--landscape { max-width: 600px; }
.event-editorial-flyer--portrait  { max-width: 420px; }

/* Embedded event video (National Line Lambda, Delta Community Service) --
   a fixed 16:9 box rather than the flyer's object-fit:contain/height:auto
   treatment, since a video needs a stable aspect ratio instead of
   following its own poster's natural dimensions. max-width:100% (not a
   fixed px cap) so this fills its grid column exactly the way
   .wreaths-video-wrapper already does (2026-09-04 -- previously capped at
   600px, which left this video visibly smaller than the Wreaths video
   once the shared 1120px-max-width container reached its full size,
   since Wreaths' wrapper was never capped below 100%; removing the cap
   here is what actually makes all three event videos match in size, on
   top of the matching column-width fractions in
   event-editorial--media-left / event-editorial--video-match-right).
   Same border-radius/shadow treatment as the flyers, just no lightbox
   wiring (see .media-preview-trigger notes elsewhere; this element
   intentionally never carries that class). */
.event-editorial-video {
  display: block;
  width: 100%;
  max-width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  margin: 0 auto;
  border-radius: 3px;
  box-shadow: 0 16px 36px rgba(0,0,0,.14);
}

/* Dedicated player for the Wreaths Across America memorial video ONLY
   (2026-09-04 quality fix) -- separate from .event-editorial-video above
   so this element carries no inherited filter/transform/blend-mode/
   opacity/scale from any other rule on the site. object-fit:contain (not
   cover) so the complete 1920x1080 frame is always visible; small navy
   letterboxing is expected and acceptable rather than cropping the
   memorial photography. Every rendering-affecting property below is
   explicitly reset to a no-op (filter:none, transform:none, opacity:1,
   mix-blend-mode:normal, backdrop-filter:none) -- do not add filters,
   transforms, overlays, or GPU-acceleration hints to this player. */
.wreaths-video-wrapper {
  position: relative;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--alp-indigo-deep);
  border-radius: 4px;
  box-shadow: 0 16px 36px rgba(0,0,0,.14);
  isolation: isolate;
}
.wreaths-video-wrapper .wreaths-memorial-video {
  display: block;
  width: 100%;
  max-width: 100%;
  height: 100%;
  min-width: 0;
  object-fit: contain;
  object-position: center center;
  background: var(--alp-indigo-deep);
  filter: none;
  backdrop-filter: none;
  transform: none;
  opacity: 1;
  mix-blend-mode: normal;
  image-rendering: auto;
}

.event-editorial-category {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-body);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--alp-carolina);
  margin-bottom: 10px;
}
.event-editorial-category svg { width: 14px; height: 14px; }
.event-editorial-title {
  font-family: var(--font-heading);
  font-size: clamp(2rem, 3vw, 3rem);
  font-weight: 700;
  color: var(--alp-indigo);
  line-height: 1.08;
  margin-bottom: 16px;
}
.event-editorial-date {
  font-family: var(--font-body);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--alp-indigo-mid);
  margin-bottom: 10px;
}
.event-editorial-meta { margin-bottom: 16px; }
.event-editorial-meta p {
  font-family: var(--font-body);
  font-size: 0.95rem;
  font-weight: 500;
  color: var(--alp-charcoal);
  line-height: 1.5;
  margin-bottom: 6px;
}
.event-editorial-meta p:last-child { margin-bottom: 0; }
.event-editorial-desc {
  font-family: var(--font-body);
  font-size: 1rem;
  color: var(--alp-charcoal);
  line-height: 1.68;
  margin: 0 0 20px;
  max-width: 520px;
}
/* Small closing line (e.g. "Remember. Honor. Serve.") -- an optional,
   understated editorial sign-off for a milestone event; distinct from
   .event-editorial-desc (smaller, italic, Carolina-blue) so it reads as a
   quiet closing statement rather than another body paragraph. */
.event-editorial-closing-line {
  font-family: var(--font-heading);
  font-style: italic;
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--alp-carolina);
  letter-spacing: 0.02em;
  margin: 4px 0 0;
  max-width: 520px;
}
/* "VIEW EVENT FLYER" text link — elegant editorial style, no filled
   button. Reuses the exact same .media-preview-trigger click/keyboard/
   lightbox wiring as the flyer image itself (same data-photo/data-name),
   so it opens the identical preview rather than a second interaction;
   the base .media-preview-trigger's cursor:zoom-in is intentionally
   overridden below to a normal pointer for this text-link variant. */
.event-flyer-link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-body);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--alp-carolina);
  border-bottom: 1px solid currentColor;
  padding-bottom: 4px;
  transition: color 0.2s ease;
}
/* Compound selector (not just .event-flyer-link) so this reliably beats
   the shared .media-preview-trigger{cursor:zoom-in} rule regardless of
   the two blocks' order in the stylesheet -- this text link should read
   as a normal clickable link, not a zoom target, even though it shares
   the same click/keyboard/lightbox wiring as the flyer image. */
.event-flyer-link.media-preview-trigger { cursor: pointer; }
.event-flyer-link-arrow { display: inline-block; transition: transform 0.2s ease; }
.event-flyer-link:hover, .event-flyer-link:focus-visible { color: #4A93C7; }
.event-flyer-link:hover .event-flyer-link-arrow,
.event-flyer-link:focus-visible .event-flyer-link-arrow { transform: translateX(3px); }
.event-flyer-link:focus-visible { outline: 2px solid var(--alp-carolina); outline-offset: 3px; }

.event-editorial-divider {
  max-width: 1120px;
  margin: 30px auto;
  border-top: 1px solid rgba(10,48,84,.16);
}

/* Delta Chapter Community Service & Outreach -- desktop splits the text
   column into two stacked blocks (heading above the video, body below)
   while the video spans both rows so it reads centered against the full
   text-column height. row-gap is overridden down from the base gap
   (meant for the text/video column gap, not internal spacing between the
   two text blocks) -- the heading block's own margin-bottom already
   provides the visual separation. Scoped to >=901px only: below that,
   .event-editorial-content is left as a normal block (not
   display:contents) so its three children -- heading block, video, body
   block -- simply stack in DOM/source order on mobile, no extra rules
   needed.
   2026-09-04 restagger: this event moved from media-right to
   event-editorial--media-left (video left / text right), so the two text
   blocks now sit in grid-column 2 (right) and the video in grid-column 1
   (left) -- the video also now benefits from media-left's wider 1.2fr
   column fraction, matching the Wreaths video's displayed size with no
   extra override needed (unlike National Line Lambda below, which is on
   the right and needs event-editorial--video-match-right for the same
   result). */
@media (min-width: 901px) {
  .event-editorial--delta-video {
    grid-template-rows: auto auto;
    row-gap: 0;
  }
  .event-editorial--delta-video .event-editorial-content { display: contents; }
  .event-editorial--delta-video .delta-heading-block {
    grid-column: 2;
    grid-row: 1;
    min-width: 0;
  }
  .event-editorial--delta-video .delta-body-block {
    grid-column: 2;
    grid-row: 2;
    min-width: 0;
  }
  .event-editorial--delta-video .event-editorial-media {
    grid-column: 1;
    grid-row: 1 / 3;
    align-self: center;
  }
}

/* National Line Lambda video-column width parity (2026-09-04 restagger)
   -- this event moved from media-left to event-editorial--media-right
   (text left / video right). The base media-right ratio (.9fr/.75fr) is
   tuned for a flyer/text split (see Founders' Day, Back to School
   Backpack Drive) and would leave this video's grid column narrower than
   the Wreaths and Delta video columns (both under media-left's wider
   1.2fr fraction) -- even though all three videos share the same
   .event-editorial-video max-width:600px cap, a too-narrow column means
   the video renders smaller than that cap instead of reaching it. This
   extra class mirrors the media-left ratio (wide fraction on the video
   side, here the right column) and its 48px gap, so this video displays
   at the same size as Wreaths/Delta without touching the shared
   media-left/media-right classes used by the flyer events. Scoped to
   >=901px to match the existing tablet/mobile collapse in the responsive
   block below, which still fires correctly off the article's own
   event-editorial--media-right class. */
@media (min-width: 901px) {
  .event-editorial--video-match-right {
    grid-template-columns: .85fr 1.2fr;
    gap: 48px;
  }
}

/* National Line Lambda — GODSON'S Noble Brothers Of Selection (2026-09-04,
   desktop-only alignment correction) -- desktop splits the text column
   into two stacked blocks: heading (eyebrow/title) on row 1, body (date
   onward) on row 2. The video sits in the right column on row 2 with
   align-self:start so its TOP EDGE lines up with the top of the body row
   -- i.e. the bottom of the "National Line Lambda -- GODSON'S Noble
   Brothers Of Selection" title -- rather than starting level with the
   eyebrow/title. Same split-block technique as event-editorial--delta-video,
   event-editorial--gamma-video and event-editorial--wreaths-aligned above,
   mirrored for this event's media-right (text left / video right)
   orientation. row-gap is overridden down to 0 so the heading block's own
   margin-bottom provides the spacing between the two text rows instead of
   the base media-right gap. No transform/translate or absolute positioning
   used -- pure grid-row/align-self placement. Scoped to >=901px only:
   below that, .event-editorial-content is left as a normal block so its
   three children -- heading block, video, body block -- simply stack in
   DOM/source order on mobile (eyebrow/title, then video, then date/body
   copy/WATCH VIDEO), unchanged from the existing mobile reading order. */
@media (min-width: 901px) {
  .event-editorial--nll-aligned {
    grid-template-rows: auto auto;
    row-gap: 0;
  }
  .event-editorial--nll-aligned .event-editorial-content { display: contents; }
  .event-editorial--nll-aligned .nll-heading-block {
    grid-column: 1;
    grid-row: 1;
    min-width: 0;
  }
  .event-editorial--nll-aligned .nll-body-block {
    grid-column: 1;
    grid-row: 2;
    min-width: 0;
    align-self: start;
  }
  .event-editorial--nll-aligned .event-editorial-media {
    grid-column: 2;
    grid-row: 2;
    align-self: start;
  }
}

/* Gamma Chapter — Christmas Giving Through Project Trident (2026-09-04,
   desktop-only alignment correction) -- desktop splits the text column
   into three stacked rows: heading (eyebrow/title/location), then the
   chapter/org line on its own row, then the body copy row. The video
   sits in the right column on that THIRD row only (not spanning rows 1-2
   as an earlier version of this layout did) with align-self:start so its
   TOP EDGE lines up with the top of the body row -- i.e. the first body
   paragraph ("Gamma Chapter brought the spirit...") -- rather than being
   vertically centered against the whole text column or aligned with the
   title/org line. Same split-block technique as
   event-editorial--delta-video above, mirrored for this event's
   media-right (text left / video right) orientation. row-gap is
   overridden down to 0 so each block's own margin-bottom (not the
   .85fr/1.2fr column's 48px gap from event-editorial--video-match-right,
   which this article also carries) provides the spacing between the
   text rows. No transform/translate or absolute positioning used --
   pure grid-row/align-self placement. Scoped to >=901px only: below
   that, .event-editorial-content is left as a normal block so its four
   children -- heading block, video, org-line block, body block --
   simply stack in DOM/source order on mobile exactly as before this
   correction (video still appears between the org line and location,
   unaffected by this desktop-only change). */
@media (min-width: 901px) {
  .event-editorial--gamma-video {
    grid-template-rows: auto auto auto;
    row-gap: 0;
  }
  .event-editorial--gamma-video .event-editorial-content { display: contents; }
  .event-editorial--gamma-video .gamma-heading-block {
    grid-column: 1;
    grid-row: 1;
    min-width: 0;
  }
  .event-editorial--gamma-video .gamma-org-block {
    grid-column: 1;
    grid-row: 2;
    min-width: 0;
  }
  .event-editorial--gamma-video .gamma-body-block {
    grid-column: 1;
    grid-row: 3;
    min-width: 0;
    align-self: start;
  }
  .event-editorial--gamma-video .event-editorial-media {
    grid-column: 2;
    grid-row: 3;
    align-self: start;
  }
}

/* National Wreaths Across America Day (2026-09-04, desktop-only
   alignment correction) -- desktop splits the text column into two
   stacked blocks: heading (eyebrow/title) on row 1, body (date onward)
   on row 2. The video sits in the left column on row 2 with
   align-self:start so its TOP EDGE lines up with the top of the body
   row -- i.e. the DECEMBER 13, 2025 date line -- rather than being
   vertically centered against the whole text column or aligned with the
   title/eyebrow. Same split-block technique as event-editorial--delta-video
   and event-editorial--gamma-video above. row-gap is overridden down to
   0 so the heading block's own margin-bottom provides the spacing
   between the two text rows instead of the base media-left gap. No
   transform/translate or absolute positioning used -- pure grid-row/
   align-self placement. Scoped to >=901px only: below that,
   .event-editorial-content is left as a normal block so its two
   children -- heading block, body block -- simply stack in DOM/source
   order on mobile, unchanged from the existing mobile layout. */
@media (min-width: 901px) {
  .event-editorial--wreaths-aligned {
    grid-template-rows: auto auto;
    row-gap: 0;
  }
  .event-editorial--wreaths-aligned .event-editorial-content { display: contents; }
  .event-editorial--wreaths-aligned .wreaths-heading-block {
    grid-column: 2;
    grid-row: 1;
    min-width: 0;
  }
  .event-editorial--wreaths-aligned .wreaths-body-block {
    grid-column: 2;
    grid-row: 2;
    min-width: 0;
    align-self: start;
  }
  .event-editorial--wreaths-aligned .event-editorial-media {
    grid-column: 1;
    grid-row: 2;
    align-self: start;
  }
}

/* Single Parent Fuel Relief (2026-09-16, desktop-only alignment
   correction) -- desktop splits the text column into two stacked
   blocks: heading (category/title/date) on row 1, body (location/org
   meta onward) on row 2. The video sits in the left column on row 2
   with align-self:start so its TOP EDGE lines up with the top of the
   body row -- i.e. the "Killeen, Texas" location line -- rather than
   being vertically centered against the whole text column or aligned
   with the title/date. Same split-block technique as
   event-editorial--wreaths-aligned/--delta-video/--gamma-video/
   --nll-aligned above. row-gap is overridden down to 0 so the heading
   block's own margin-bottom provides the spacing between the two text
   rows instead of the base media-left gap. No transform/translate or
   absolute positioning used -- pure grid-row/align-self placement.
   Scoped to >=901px only: below that, .event-editorial-content is left
   as a normal block so its two children -- heading block, body block --
   simply stack in DOM/source order on mobile, unchanged from the
   original mobile layout. Does not affect any other Past Event. */
@media (min-width: 901px) {
  .event-editorial--fuel-relief-aligned {
    grid-template-rows: auto auto;
    row-gap: 0;
  }
  .event-editorial--fuel-relief-aligned .event-editorial-content { display: contents; }
  .event-editorial--fuel-relief-aligned .fuel-relief-heading-block {
    grid-column: 2;
    grid-row: 1;
    min-width: 0;
  }
  .event-editorial--fuel-relief-aligned .fuel-relief-body-block {
    grid-column: 2;
    grid-row: 2;
    min-width: 0;
    align-self: start;
  }
  .event-editorial--fuel-relief-aligned .event-editorial-media {
    grid-column: 1;
    grid-row: 2;
    align-self: start;
  }
}

/* ─── EVENTS PAGE — RESPONSIVE ────────────────────────────────────── */
@media (max-width: 768px) {
  .events-hero { height: auto; min-height: 0; }
}

@media (max-width: 900px) {
  /* Tablet: collapse to one column rather than force a cramped
     flyer/text split — text stays readable, flyer keeps its own
     natural size instead of being squeezed. */
  .event-editorial,
  .event-editorial--media-left,
  .event-editorial--media-right {
    grid-template-columns: 1fr;
    gap: 30px;
  }
  .upcoming-section    { padding: 32px 0 24px; }
  .past-events-section { padding: 34px 0 36px; }
}

@media (max-width: 640px) {
  .events-hero .hero-inner { flex-direction: column; align-items: flex-start; gap: 20px; padding-top: 28px; padding-bottom: 26px; }
  .events-hero .hero-content { width: 100%; margin-left: 0; }
  .events-hero-crest-wrap { width: 100%; justify-content: flex-start; }
  .events-hero-crest { width: min(200px, 55vw); }

  .upcoming-section    { padding: 28px 0 22px; }
  .events-empty-state  { padding: 28px 20px 30px; }
  .past-events-section { padding: 30px 0 32px; }

  .stay-informed-inner {
    grid-template-columns: 1fr;
    gap: 14px;
    padding: 22px 20px;
    text-align: left;
  }
  .stay-informed-cta {
    border-left: none;
    padding-left: 0;
    padding-top: 14px;
    border-top: 1px solid rgba(11,31,58,.18);
    width: 100%;
    justify-content: flex-start;
  }

  .event-editorial,
  .event-editorial--media-left,
  .event-editorial--media-right { gap: 22px; }
  .event-editorial-flyer--landscape { max-width: 100%; }
  .event-editorial-flyer--portrait  { max-width: 78%; }
  .event-editorial-video { max-width: 100%; }
  .event-editorial-title { margin-bottom: 12px; }
  .event-editorial-divider { margin: 26px auto; }
}


/* ════════════════════════════════════════════════════════════════
   GLOBAL HEADER — CHAPTERS DROPDOWN
   This is the one shared-component exception in this codebase: the
   Chapters build explicitly required converting the CHAPTERS nav
   link into an accessible dropdown, so this block (and the matching
   markup change) is applied identically to every page's header —
   Home, Programs, Members Area, Contact, Membership, Events and the
   new Chapters/Chapter-placeholder pages. Nothing else in any of
   those pages was touched. Desktop: hover OR keyboard focus-within
   OR a click on the chevron button reveals the submenu. Mobile
   (≤900px, inside the existing slide-down nav): only the chevron
   button toggles the submenu open/closed — the CHAPTERS text itself
   still navigates to chapters.html normally. See js/main.js
   initNavDropdown().
   ════════════════════════════════════════════════════════════════ */
/* 2026-08-30: root-cause fix for the CHAPTERS nav item — the chevron
   button was dropping onto its own line beneath the word. Cause:
   .nav-list li a (a few lines above) sets display:block on every nav
   link so its full clickable/underline area works; a block-level
   element consumes the whole line box, so its next sibling (this
   dropdown's chevron button) had nowhere to sit but a new line below
   it. Making the parent <li> a flex container puts both the (still
   block) link and the button in one row as flex items — the intended
   fix, not a wrapper/width/position hack. */
.nav-item-has-dropdown {
  position: relative;
  display: inline-flex;
  align-items: center;
}
.nav-dropdown-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  margin-left: -4px;
  color: var(--alp-silver-light);
  vertical-align: middle;
}
.nav-dropdown-toggle .nav-dropdown-chevron {
  width: 14px;
  height: 14px;
  transition: transform var(--trans);
}
.nav-item-has-dropdown:hover .nav-dropdown-toggle,
.nav-item-has-dropdown:focus-within .nav-dropdown-toggle,
.nav-item-has-dropdown.dropdown-open .nav-dropdown-toggle { color: var(--alp-carolina); }
.nav-item-has-dropdown:hover .nav-dropdown-chevron,
.nav-item-has-dropdown:focus-within .nav-dropdown-chevron,
.nav-item-has-dropdown.dropdown-open .nav-dropdown-chevron { transform: rotate(180deg); }

.nav-dropdown-menu {
  list-style: none;
  margin: 0;
  padding: 0;
}
/* 2026-08-30: root-cause fix for the Chapter name/location running
   together with no break ("Alpha ChapterColumbia, South Carolina").
   Cause: the site-wide .nav-list li a rule sets display:block with
   higher specificity (0,0,1,2) than the plain .nav-dropdown-menu a
   selector below (0,0,1,1), so display:block always won and this
   rule's flex-direction/gap had no effect -- the two spans, both
   inline by default, just sat side by side. Fixing by adding the
   intermediate li to the selector (matching the real ul>li>a
   structure) raises specificity to a tie, which this later rule then
   wins on source order -- same technique already used for the
   CHAPTERS chevron-wrap fix above, no HTML change needed. */
.nav-dropdown-menu li a {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.nav-dropdown-name {
  display: block;
  font-family: var(--font-body);
  font-weight: 600;
  letter-spacing: 0.06em;
  line-height: 1.3;
}
.nav-dropdown-location {
  display: block;
  font-family: var(--font-body);
  font-weight: 500;
  letter-spacing: 0.02em;
  text-transform: none;
  opacity: 0.7;
  line-height: 1.3;
}

@media (min-width: 1361px) {
  .nav-dropdown-menu {
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 240px;
    background: var(--alp-indigo-deep);
    border: 1px solid rgba(116,185,230,0.18);
    border-radius: var(--radius);
    box-shadow: 0 16px 36px rgba(0,0,0,0.4);
    padding: 6px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-6px);
    transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s;
    pointer-events: none;
    z-index: 1001;
  }
  .nav-item-has-dropdown:hover .nav-dropdown-menu,
  .nav-item-has-dropdown:focus-within .nav-dropdown-menu,
  .nav-item-has-dropdown.dropdown-open .nav-dropdown-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    pointer-events: auto;
  }
  .nav-dropdown-menu li { border-radius: calc(var(--radius) - 1px); }
  .nav-dropdown-menu a {
    padding: 9px 12px;
    border-radius: calc(var(--radius) - 1px);
    font-size: 0.76rem;
    text-transform: uppercase;
    color: var(--alp-silver-light);
  }
  .nav-dropdown-menu a:hover,
  .nav-dropdown-menu a:focus-visible {
    background: rgba(116,185,230,0.12);
    color: var(--alp-carolina);
  }
  .nav-dropdown-menu a::after { display: none; }
}

@media (max-width: 1360px) {
  /* CHAPTERS split row: the CHAPTERS link + chevron button share one
     full-width row with its own border-bottom (matching the other
     primary rows in .nav-list li a above) -- the link itself carries
     none of its own so the divider isn't doubled or cut short under
     just the text. ".nav-list li.nav-item-has-dropdown > a" (2 classes
     + 2 types) is written to reliably out-rank the general
     ".nav-list li a" rule (1 class + 2 types) regardless of source
     order. */
  .nav-item-has-dropdown {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    min-height: 54px;
    border-bottom: 1px solid rgba(255,255,255,.08);
  }
  .nav-list li.nav-item-has-dropdown > a {
    flex: 1;
    min-height: auto;
    border-bottom: none;
  }
  .nav-dropdown-toggle {
    width: 48px;
    height: 48px;
    margin-right: 8px;
    color: var(--alp-carolina);
  }
  .nav-dropdown-toggle .nav-dropdown-chevron {
    width: 18px;
    height: 18px;
    transition: transform 0.22s ease;
  }
  .nav-item-has-dropdown.dropdown-open .nav-dropdown-toggle .nav-dropdown-chevron { transform: rotate(180deg); }

  /* Chapter submenu: a subtly different navy tint sets it apart from
     the primary rows above, per the requested visual hierarchy. */
  .nav-dropdown-menu {
    flex-basis: 100%;
    max-height: 0;
    overflow: hidden;
    background: rgba(255,255,255,.035);
    transition: max-height 0.3s ease;
  }
  .nav-item-has-dropdown.dropdown-open .nav-dropdown-menu { max-height: 400px; }
  .nav-dropdown-menu a {
    min-height: 46px;
    padding: 12px 24px 12px 42px;
    font-size: 0.92rem;
    letter-spacing: 0.04em;
    color: rgba(255,255,255,.90);
    border-bottom: 1px solid rgba(255,255,255,.05);
  }
  .nav-dropdown-menu a:hover,
  .nav-dropdown-menu a:focus-visible { color: var(--alp-carolina); }
  .nav-dropdown-location { font-size: 0.76rem; }
}


/* ════════════════════════════════════════════════════════════════
   HEADER — MEMBERSHIP DROPDOWN (2026-09-17, corrected placement)
   The APPLY link (external JotForm, opens in a new tab) was
   originally added to the blue MEMBERS AREA button, then moved here
   per follow-up request: MEMBERS AREA is restored to its original
   plain single-link behavior (see .members-btn above, unchanged),
   and MEMBERSHIP -- the regular nav-list item between CHAPTERS and
   EVENTS -- is converted into a dropdown instead, using the exact
   same architecture as CHAPTERS with no overrides needed at all:
   .nav-item-has-dropdown / .nav-dropdown-toggle / .nav-dropdown-
   chevron / .nav-dropdown-menu are all reused as-is (this is a plain
   nav-list <li>, just like Chapters, not a standalone button, so none
   of the compound-selector overrides the earlier Members Area attempt
   needed are required here). initNavDropdown() in js/main.js wires it
   up with zero JS changes -- desktop hover/focus-within reveal,
   mobile tap-to-expand collapse, outside-click/Escape close, and
   aria-expanded are all inherited for free. CHAPTERS itself is
   untouched. */

/* ════════════════════════════════════════════════════════════════
   CHAPTERS PAGE (chapters.html) — scoped additions only.
   Reuses existing tokens/utilities: .container, .section-label,
   .section-heading, .divider-line, .greek-letters, .btn*, .reveal,
   .hero* (base structure only -- object-fit/position and the ::after
   gradient are overridden below), .assistance-section/.assistance-inner
   (from Members Area), .coming-soon-section/.coming-soon-inner (also
   from Members Area, reused again below for the Chapter placeholder
   pages). Nothing here touches Home, Programs, Members Area, Contact,
   Membership or Events beyond the shared header dropdown above.
   ════════════════════════════════════════════════════════════════ */
/* Desktop max height nudged from the prior 420px to 440px -- still well
   under Membership's 480px (the tallest hero on the site, established
   precedent), and needed so the requested clamp(2.7rem,3.5vw,4rem)
   headline plus tagline/paragraph never gets clipped by .hero's
   overflow:hidden in the vertically-centered text pane (confirmed via
   Playwright: content would otherwise be cut off by ~22px at 1920px
   before this + the spacing trims below). */
.chapters-hero { height: clamp(380px, 26vw, 440px); min-height: 380px; background-color: #061b2f; }
/* 2026-08-31, EDITORIAL SPLIT REDESIGN: supersedes the CINEMATIC
   COMPOSITION REFINEMENT block that used to live here (a full-bleed
   photo with a long fade gradient + blurred backdrop layer). User
   feedback on that version: it faded Brothers 1-2 into near-invisibility
   under the navy overlay, which is unacceptable for an official/
   documentary Brotherhood photo where every Brother and every charter
   must always read clearly. New approach: a true two-column editorial
   split, entirely different in kind from every other decorative
   photographic hero on the site (Programs/Events/Contact/Home) --
   intentionally so, per the user's explicit framing of this photo as
   "not decoration, part of the story." No .hero::after gradient, no
   blur, no darkening: the photo pane shows the complete, unmodified
   image at essentially full brightness. */
.chapters-hero::after { content: none; }
.chapters-hero .hero-inner {
  display: flex;
  align-items: stretch;
  height: 100%;
  gap: 32px;
}
/* Text pane: fixed ~38% of the hero-inner content width (not a min()
   cap like other heroes -- here the RATIO to the photo pane is the
   point, per the user's explicit "LEFT 38% / RIGHT 62%" composition).
   flex-shrink:0 keeps it from being squeezed by the photo pane; the
   inner flex column + justify-content:center vertically centers the
   eyebrow/headline/tagline/paragraph stack within the full hero height. */
.chapters-hero .hero-content {
  width: 38%;
  min-width: 0;
  margin-left: 0;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-top: 0;
  padding-bottom: 0;
}
.chapters-hero .hero-label { margin-bottom: 10px; }
/* Headline sized to the user's explicit clamp(2.7rem,3.5vw,4rem) target
   for this narrower (38%, not ~52%) text pane -- smaller than the prior
   cinematic-refinement's clamp(3rem,4vw,4.4rem) since that was tuned for
   a wider column. line-height:1.0 (not 1.02) per the user's explicit
   value. At this pane width "ONE BROTHERHOOD." may wrap to its own line
   above "FIVE CHAPTERS." at some breakpoints -- the user's spec
   explicitly pre-approves this 3-line fallback ("ONE / BROTHERHOOD. /
   FIVE CHAPTERS. is also acceptable"), so no forced line-break markup
   was added/removed in the HTML; it wraps naturally. */
.chapters-hero .hero-headline {
  font-size: clamp(2.7rem, 3.5vw, 4rem);
  line-height: 1.0;
  font-weight: 600;
  margin-bottom: 10px;
}
/* Tagline keeps the Carolina-blue uppercase treatment established by the
   prior cinematic-refinement pass -- the user's new spec explicitly says
   "keep the Carolina-blue tagline treatment," so this block is carried
   over unchanged from that version. */
.chapters-hero .hero-motto {
  font-family: var(--font-body);
  font-size: clamp(1rem, 1.3vw, 1.1rem);
  font-weight: 600;
  font-style: normal;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--alp-carolina);
  margin-bottom: 14px;
}
.chapters-hero .hero-copy { max-width: none; margin-bottom: 0; line-height: 1.5; }

/* Photo pane: ~62% of hero-inner, full hero height. The photograph is
   shown COMPLETE and UNCROPPED (object-fit:contain, never cover) so all
   five Brothers and all five charters are always fully visible -- no
   blur, no darkening overlay on top of it. At most breakpoints this
   photo's own 1.874 aspect ratio nearly fills the pane already (measured
   via Playwright); any small unused margin object-fit:contain leaves is
   simply the hero's navy background-color showing through, exactly as
   the spec explicitly allows ("use the hero's navy background behind the
   image if small unused areas occur" -- the complete group matters more
   than filling every pixel). */
.chapters-hero-photo-wrap {
  position: relative;
  width: 62%;
  height: 100%;
  flex-shrink: 0;
  overflow: hidden;
}
.chapters-hero-photo {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center center;
}
/* Restrained ~28px feathered seam at the PHOTO PANE'S OWN left edge only
   -- explicitly NOT a long gradient across the photograph, and it sits
   well clear of Brother 1 (who has margin from the frame's own left
   edge in the source photo). This softens the navy-pane-to-photo-pane
   seam into a brief blend instead of a hard vertical line, without
   darkening any part of a Brother or a charter. */
.chapters-hero-photo-wrap::before {
  content: '';
  position: absolute;
  inset: 0 auto 0 0;
  width: 28px;
  background: linear-gradient(90deg, #061b2f 0%, rgba(6,27,47,0) 100%);
  z-index: 1;
  pointer-events: none;
}

/* ─── SECTION 2: OUR CHAPTERS ─────────────────────────────────── */
.our-chapters-section { background: var(--alp-white); padding: 46px 0 42px; }
.chapters-intro { max-width: 720px; margin: 0 auto 32px; text-align: center; }
.chapters-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 20px;
}
.chapter-card {
  min-width: 0;
  background: var(--alp-white);
  border: 1px solid rgba(11,31,58,.12);
  border-radius: var(--radius-lg);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: border-color var(--trans), box-shadow var(--trans), transform var(--trans);
}
.chapter-card:hover {
  border-color: var(--alp-carolina);
  box-shadow: 0 12px 32px rgba(4,20,38,.1);
  transform: translateY(-3px);
}
.chapter-card-media { width: 100%; aspect-ratio: 4 / 3; overflow: hidden; background: var(--alp-silver-light); }
.chapter-card-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.chapter-card-body { padding: 20px 18px 22px; text-align: center; flex: 1; display: flex; flex-direction: column; }
.chapter-card-body h3 { margin-top: 6px; margin-bottom: 2px; overflow-wrap: break-word; }
.chapter-card-location {
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--alp-charcoal);
  margin-bottom: 14px;
}
.chapter-card-body .divider-line { margin: 0 auto 14px; width: 40px; }
.chapter-card-copy { font-size: 0.86rem; color: var(--alp-charcoal); line-height: 1.6; margin-bottom: 18px; flex: 1; }
.chapter-card-body .btn { margin: 0 auto; }

/* ─── SECTION 3: BROTHERHOOD • LEADERSHIP • SERVICE (compact) ───── */
.chapters-values-section {
  position: relative;
  background: var(--alp-indigo-deep);
  overflow: hidden;
  padding: 40px 0;
}
.chapters-values-section::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url('../images/ocean-texture-contact.webp');
  background-size: cover;
  background-position: center;
  opacity: 0.1;
}
.chapters-values-grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
  text-align: center;
}
.chapters-value-icon-badge {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  border: 1.5px solid rgba(116,185,230,.35);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 16px;
}
.chapters-value-icon-badge svg { width: 26px; height: 26px; color: var(--alp-carolina); }
.chapters-value-item h3 { color: var(--alp-white); margin-bottom: 8px; }
.chapters-value-item p { color: var(--alp-silver-light); font-size: 0.9rem; line-height: 1.6; }


/* ════════════════════════════════════════════════════════════════
   CHAPTER PLACEHOLDER PAGES (chapters-alpha.html, chapters-beta.html,
   chapters-gamma.html, chapters-delta.html, chapters-epsilon.html)
   — scoped additions only. Deliberately minimal per spec: these five
   pages are a temporary shared placeholder, not individually designed.
   Reuses .coming-soon-section/.coming-soon-inner verbatim (Members
   Area) plus .section-label/.section-heading/.divider-line/.btn*.
   ════════════════════════════════════════════════════════════════ */
.chapter-placeholder-crest { width: 64px; height: auto; margin: 0 auto 18px; display: block; }
.chapter-placeholder-location { color: var(--alp-charcoal); font-size: 1rem; margin-bottom: 2px; }
.chapter-placeholder-back { margin-top: 22px; }


/* ─── CHAPTERS + PLACEHOLDER — RESPONSIVE ────────────────────────── */
@media (max-width: 1100px) {
  .chapters-grid { grid-template-columns: repeat(3, 1fr); }
  .chapter-card:nth-child(4), .chapter-card:nth-child(5) { max-width: 340px; margin: 0 auto; }
}

@media (max-width: 900px) {
  /* 2026-08-31, EDITORIAL SPLIT REDESIGN -- TABLET: "preserve the split
     presentation as long as practical... allow approximately 40% text /
     60% photograph. Reduce headline size before sacrificing the photo."
     The hero keeps its existing shorter tablet/mobile height clamp
     (contain-fit means no crop risk regardless of box size, so no height
     change was needed to protect the photo); only the pane ratio and
     headline size are adjusted for the narrower column. */
  .chapters-hero { height: clamp(320px, 46vw, 400px); min-height: 300px; }
  .chapters-hero .hero-content { width: 40%; }
  .chapters-hero-photo-wrap { width: 60%; }
  .chapters-hero .hero-headline { font-size: clamp(2.2rem, 4.2vw, 2.8rem); margin-bottom: 8px; }
  .chapters-hero .hero-label { margin-bottom: 8px; }
  .chapters-hero .hero-motto { margin-bottom: 10px; }

  .chapters-grid { grid-template-columns: repeat(2, 1fr); }
  .chapter-card:nth-child(4), .chapter-card:nth-child(5) { max-width: none; margin: 0; }
  .chapters-values-grid { grid-template-columns: 1fr; gap: 30px; }
}

@media (max-width: 640px) {
  .our-chapters-section { padding: 34px 0 30px; }
  .chapters-grid { grid-template-columns: 1fr; gap: 22px; }
  .chapters-values-section { padding: 32px 0; }
  .chapter-placeholder-crest { width: 56px; }

  /* 2026-08-31, EDITORIAL SPLIT REDESIGN -- MOBILE: "do not try to squeeze
     the desktop split into a phone -- stack the hero: navy text area,
     then full-width charter photograph, complete group, object-fit:
     contain." The side-by-side pane layout is dropped for a simple
     top-to-bottom stack; the hero's fixed height becomes auto since the
     photo's own aspect ratio (not a fixed box) now determines its height. */
  .chapters-hero { height: auto; min-height: 0; }
  .chapters-hero .hero-inner { flex-direction: column; align-items: stretch; gap: 0; }
  .chapters-hero .hero-content {
    width: 100%;
    padding-top: 28px;
    padding-bottom: 22px;
  }
  .chapters-hero .hero-label { margin-bottom: 10px; }
  .chapters-hero .hero-headline { font-size: 2.1rem; line-height: 1.04; margin-bottom: 12px; }
  .chapters-hero .hero-motto { margin-bottom: 14px; }
  .chapters-hero-photo-wrap { width: 100%; height: auto; padding-bottom: 26px; }
  .chapters-hero-photo { width: 100%; height: auto; object-fit: contain; }
  /* No feathered seam when stacked -- there is no side-by-side navy/photo
     boundary to soften on mobile. */
  .chapters-hero-photo-wrap::before { content: none; }
}


/* ════════════════════════════════════════════════════════════════
   LEADERSHIP PAGE (leadership.html) — scoped additions only.
   Reuses existing tokens/utilities: .container, .section-label,
   .section-heading/.section-heading--light, .section-sub, .hero*
   (base cover-photo pattern, no crest overlay — see hero comment in
   the HTML), .reveal. Leadership cards are rendered client-side from
   js/main.js's `leadership` data object (renderLeadershipCards()),
   not hard-coded — see the HTML comment above #executive-council-cards
   for why that's the honest approach here. Nothing here touches Home,
   Programs, Members Area, Contact, Membership, Events or Chapters.
   ════════════════════════════════════════════════════════════════ */
/* 2026-08-30: hero-height rule below is UNCHANGED -- the fix for this
   hero sitting too close to Executive Council lives entirely inside
   the hero's own text spacing/sizing, not its height. At the old
   width:min(540px,50%) content column, the headline "LEADING WITH
   PURPOSE." was wide enough at the sitewide clamp's larger sizes to
   wrap onto 4 lines instead of its intended 2 (same root cause as the
   Home hero fix) -- content that was taller than the (already tight)
   340-390px box, clipped top and bottom by the hero's overflow:hidden.
   Widened the column so the headline reliably wraps to 2 lines at
   desktop widths, reduced the headline size ~9% and tightened its
   line-height, tightened the label/headline/motto gaps, and gave the
   content block noticeably more padding-bottom than padding-top --
   the box is still centered by .hero's flex align-items:center, but
   the asymmetric padding shifts the visible text group upward within
   it (roughly the "45% not 50%" position asked for) and is what
   creates the 35-50px clearance below the final paragraph, matching
   the Events/Chapters hero treatment. Nothing below 900px is touched
   here -- the existing @media(max-width:900px) block further down
   already switches this hero to height:auto (it grows to fit, so
   there was never a clipping risk there) and resets hero-content back
   to width:100%; the tightened font-size/line-height/gaps above still
   apply at those widths since they're unscoped by breakpoint. */
.leadership-hero { height: clamp(340px, 24vw, 390px); min-height: 320px; }
.leadership-hero .hero-bg { object-fit: cover; object-position: center 55%; }
.leadership-hero .hero-content {
  width: min(700px, 60%);
  margin-left: 0;
  padding-top: 14px;
  padding-bottom: 40px;
}
.leadership-hero .hero-label { margin-bottom: 10px; }
.leadership-hero .hero-headline {
  font-size: clamp(2.2rem, 2.7vw, 3.1rem);
  line-height: 0.98;
  margin-bottom: 14px;
}
.leadership-hero .hero-motto { margin-bottom: 16px; }

/* ─── Shared section shell ────────────────────────────────────── */
.leadership-section { background: var(--alp-white); padding: 46px 0 42px; }
.leadership-section--tint { background: var(--alp-silver-light); }
.leadership-intro { max-width: 720px; margin-bottom: 30px; }
.leadership-intro .section-sub { margin-bottom: 0; }

/* ─── Officer card (shared component) ─────────────────────────── */
/* Named `.officer-card`, not `.leadership-card` — a dead, unused
   `.leadership-card` rule already exists near line 1299 (display:grid,
   240px-photo two-column layout, zero HTML references anywhere on the
   site) from an earlier draft. Reusing that name silently pulled in
   its `display:grid` and broke this grid's cards at 1440px before this
   rename — picked a distinct name instead of touching or deleting
   that pre-existing dead rule, which is out of scope here. */
.officer-card {
  min-width: 0;
  background: var(--alp-white);
  border: 1px solid rgba(11,31,58,.12);
  border-radius: var(--radius-lg);
  padding: 26px 16px 24px;
  text-align: center;
  transition: border-color var(--trans), box-shadow var(--trans), transform var(--trans);
}
.officer-card:hover {
  border-color: var(--alp-carolina);
  box-shadow: 0 12px 32px rgba(4,20,38,.08);
  transform: translateY(-3px);
}
.leadership-photo-placeholder {
  width: 104px;
  height: 104px;
  border-radius: 50%;
  background: var(--alp-silver-light);
  border: 1px solid rgba(11,31,58,.1);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 16px;
  overflow: hidden;
  flex-shrink: 0;
}
.officer-card--large .leadership-photo-placeholder,
.officer-card--featured .leadership-photo-placeholder { width: 128px; height: 128px; }
.leadership-photo-placeholder img { width: 100%; height: 100%; object-fit: cover; object-position: center top; display: block; }
/* 2026-08-31: James Williams' Dean of Pledges portrait is already framed
   with comfortable headroom, so it is centered rather than top-aligned.
   Scoped to the lower International Leadership officer row only — does
   not affect the featured International President photo. */
#international-officers-cards .leadership-photo-placeholder img { object-position: center center; }
.leadership-photo-placeholder span {
  font-family: var(--font-body);
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(11,31,58,.45);
  line-height: 1.5;
  padding: 0 8px;
  white-space: pre-line;
}
.officer-card h3 {
  font-family: var(--font-body);
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--alp-indigo);
  margin-bottom: 4px;
  overflow-wrap: break-word;
}
.leadership-name {
  font-family: var(--font-heading);
  font-size: 1.02rem;
  font-weight: 600;
  color: var(--alp-charcoal);
  overflow-wrap: break-word;
}
.officer-card--featured { max-width: 300px; padding: 30px 20px 28px; }
.officer-card--featured .leadership-photo-placeholder {
  border: 3px solid var(--alp-white);
  box-shadow: 0 0 0 2px var(--alp-carolina);
}
.officer-card--featured h3 { color: var(--alp-carolina); font-size: 0.8rem; }
.officer-card--featured .leadership-name { font-size: 1.2rem; }
.officer-card--large { padding: 30px 22px 28px; }
.officer-card--large .leadership-name { font-size: 1.1rem; }

/* ─── Leadership portrait preview (hover) + lightbox (tap/click/keyboard) ──
   2026-09-01. Added by initLeadershipPhotoPreview() in js/main.js, only for
   cards with a real photo -- PHOTO COMING SOON placeholders never get a
   `.leadership-photo-trigger` button, so they stay non-interactive exactly
   as before. Every rule here is additive: the circular card photo itself
   (`.leadership-photo-placeholder`, its size, its `object-fit:cover` img)
   is completely unchanged; the trigger button just fills that existing
   circle edge-to-edge so the same clipping still applies to it. ────────── */
.leadership-photo-trigger {
  display: block;
  width: 100%;
  height: 100%;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: zoom-in;
  -webkit-tap-highlight-color: transparent;
}
.leadership-photo-trigger img { transition: transform 200ms ease; }
.leadership-photo-placeholder:has(.leadership-photo-trigger:hover) img,
.leadership-photo-placeholder:has(.leadership-photo-trigger:focus-visible) img {
  transform: scale(1.04);
}
.leadership-photo-placeholder:has(.leadership-photo-trigger:hover),
.leadership-photo-placeholder:has(.leadership-photo-trigger:focus-visible) {
  border-color: var(--alp-carolina);
}
.leadership-photo-trigger:focus-visible {
  outline: 2px solid var(--alp-carolina);
  outline-offset: 3px;
}

/* Floating full-portrait preview (desktop hover / keyboard focus only --
   showFloatingPreview() in main.js checks `(hover:hover) and (pointer:fine)`
   before ever displaying it, so touch devices never see this element at
   all and rely on the lightbox below instead). A single shared node
   appended to <body> and repositioned per-trigger, so it can never shift
   any card's layout. */
.leadership-photo-preview {
  position: fixed;
  z-index: 900;
  width: 300px;
  max-width: min(300px, 80vw);
  background: var(--alp-white);
  border-radius: 8px;
  border: 1px solid rgba(5,29,44,.10);
  box-shadow: 0 18px 45px rgba(5,29,44,.22);
  padding: 6px;
  pointer-events: none;
  opacity: 0;
  transform: scale(0.97);
  transition: opacity 200ms ease, transform 200ms ease;
}
.leadership-photo-preview.is-visible { opacity: 1; transform: scale(1); }
.leadership-photo-preview img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: contain;
  border-radius: 4px;
}

/* Lightbox modal (mobile/tablet tap, desktop click, keyboard Enter/Space).
   Shows the same full portrait plus name/title and a close control. */
.leadership-lightbox {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
.leadership-lightbox[hidden] { display: none; }
.leadership-lightbox-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(5,29,44,.82);
  opacity: 0;
  transition: opacity 200ms ease;
}
.leadership-lightbox-content {
  position: relative;
  z-index: 1;
  max-width: 420px;
  max-height: 80%;
  width: 100%;
  background: var(--alp-white);
  border-radius: 10px;
  padding: 14px 14px 18px;
  text-align: center;
  opacity: 0;
  transform: scale(0.97);
  transition: opacity 200ms ease, transform 200ms ease;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.leadership-lightbox.is-visible .leadership-lightbox-backdrop { opacity: 1; }
.leadership-lightbox.is-visible .leadership-lightbox-content { opacity: 1; transform: scale(1); }
.leadership-lightbox-photo {
  display: block;
  max-width: 100%;
  max-height: 80vh;
  width: auto;
  height: auto;
  object-fit: contain;
  border-radius: 4px;
  margin: 0 auto;
}
.leadership-lightbox-caption { margin-top: 12px; }
.leadership-lightbox-name {
  font-family: var(--font-heading);
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--alp-charcoal);
}
.leadership-lightbox-title {
  font-family: var(--font-body);
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--alp-carolina);
  margin-top: 2px;
}
.leadership-lightbox-close {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 1px solid rgba(11,31,58,.12);
  background: var(--alp-white);
  color: var(--alp-indigo);
  font-size: 1.3rem;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
.leadership-lightbox-close:hover,
.leadership-lightbox-close:focus-visible { border-color: var(--alp-carolina); color: var(--alp-carolina); }
.leadership-lightbox-close:focus-visible { outline: 2px solid var(--alp-carolina); outline-offset: 2px; }
body.leadership-lightbox-open { overflow: hidden; }

@media (prefers-reduced-motion: reduce) {
  .leadership-photo-trigger img,
  .leadership-photo-preview,
  .leadership-lightbox-backdrop,
  .leadership-lightbox-content {
    transition-duration: 0.01ms;
  }
}

@media (max-width: 640px) {
  .leadership-photo-preview { display: none; }
}

/* ─── Grids ────────────────────────────────────────────────────── */
.leadership-grid { display: grid; gap: 20px; }
/* 2026-09-01: reduced from 4 to 3 columns -- the Founder moved into his
   own centered .leadership-founder-row above (see dated project-memory
   entry), leaving only the two Chiefs of Staff + Chief of Branding &
   Marketing here. max-width+margin:auto keeps the 3-card row from
   stretching edge-to-edge across the full section width, so it visually
   reads as a compact group centered beneath the Founder rather than a
   full-width grid. */
.leadership-grid--exec { grid-template-columns: repeat(3, 1fr); max-width: 900px; margin: 0 auto; }
/* Founder row -- identical pattern to .leadership-president-row below
   (International President), kept as its own class since it belongs to
   a different section and may need independent tuning later. */
.leadership-founder-row { display: flex; justify-content: center; margin-bottom: 26px; }
.leadership-president-row { display: flex; justify-content: center; margin-bottom: 26px; }
/* 2026-08-31: widened from 5 to 6 columns for the new International Dean
   of Pledges card (see dated project-memory entry). gap trimmed 20px->18px
   per the six-card layout so card width doesn't shrink more than needed;
   align-items:stretch is CSS Grid's own default and is listed explicitly
   here only to match the approved spec -- it was already in effect. */
.leadership-grid--intl { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 18px; align-items: stretch; }
/* Keeps title-row height consistent across the 6 International Leadership
   officer cards regardless of whether a given title wraps to one or two
   lines (e.g. "International Secretary" vs "1st International Vice
   President"), so every card's sample name lines up on the same row.
   Scoped to .leadership-grid--intl only -- Executive Council and Regional
   Directors cards are untouched. */
.leadership-grid--intl .officer-card h3 {
  min-height: 2.6em;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}

/* ─── Section 4: Leadership in Action (From Vision to Execution) ─
   2026-09-03: replaces the former Regional Directors grid in this exact
   spot. Editorial three-column layout, no cards/boxes/shadows -- text
   only, separated by the same hairline-divider pattern used elsewhere on
   the site (.reach-us-item on the Contact page). Heading treatment reuses
   the existing .pillar-item h3 typographic pattern (font-body, 700,
   uppercase, letter-spacing, indigo) for consistency with the rest of the
   site rather than inventing a new one. No icons -- intentionally
   text-only per spec. */
.leadership-pillars {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  max-width: 1040px;
}
.leadership-pillar {
  padding: 0 32px;
  border-left: 1px solid rgba(11,31,58,.1);
}
.leadership-pillar:first-child { border-left: none; padding-left: 0; }
.leadership-pillar h3 {
  font-family: var(--font-body);
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--alp-indigo);
  margin-bottom: 10px;
}
.leadership-pillar p {
  font-size: 0.95rem;
  color: var(--alp-charcoal);
  line-height: 1.7;
}

/* ─── Section 5: Our Commitment ───────────────────────────────── */
/* 2026-08-30: lightened from --alp-indigo-deep (near-black) to a
   deep-medium blue within the suggested #173a5e-#28577f range --
   texture ::before and white text below both stay as-is, contrast is
   still strong against this lighter navy (~9.8:1 for white text). */
.leadership-commitment-section {
  position: relative;
  background: #1d466d;
  overflow: hidden;
  padding: 42px 0;
}
.leadership-commitment-section::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url('../images/ocean-texture-contact.webp');
  background-size: cover;
  background-position: center;
  opacity: 0.12;
}
.leadership-commitment-inner {
  position: relative;
  z-index: 1;
  max-width: 720px;
  text-align: center;
  margin: 0 auto;
}
.leadership-commitment-inner .section-label { justify-content: center; }
.leadership-commitment-inner p {
  color: var(--alp-silver-light);
  font-size: 1rem;
  line-height: 1.75;
  margin-top: 4px;
}

/* ─── LEADERSHIP — RESPONSIVE ─────────────────────────────────── */
@media (max-width: 1100px) {
  .leadership-grid--intl { grid-template-columns: repeat(3, 1fr); row-gap: 24px; }
}

@media (max-width: 900px) {
  .leadership-hero { height: auto; min-height: 0; }
  .leadership-hero .hero-inner { flex-direction: column; align-items: flex-start; gap: 22px; padding-top: 32px; padding-bottom: 28px; }
  .leadership-hero .hero-content { width: 100%; margin-left: 0; }

  .leadership-grid--exec { grid-template-columns: repeat(2, 1fr); }
  .leadership-grid--intl { grid-template-columns: repeat(3, 1fr); }

  /* Leadership in Action: three short paragraphs don't split cleanly into
     2+1 at tablet width, so this goes straight to a single stacked column
     with a horizontal divider replacing the desktop vertical one -- reuses
     the same breakpoint the other Leadership grids already switch at. */
  .leadership-pillars { grid-template-columns: 1fr; gap: 24px; max-width: 520px; }
  .leadership-pillar { border-left: none; padding: 0; }
  .leadership-pillar:not(:first-child) { border-top: 1px solid rgba(11,31,58,.1); padding-top: 20px; }
}

@media (max-width: 640px) {
  .leadership-section { padding: 34px 0 30px; }
  .leadership-grid--exec { grid-template-columns: 1fr; gap: 22px; }
  .leadership-grid--intl { grid-template-columns: 1fr; gap: 22px; }
  .officer-card--featured { max-width: none; }
  .leadership-commitment-section { padding: 32px 0; }
}

/* ================================================================
   ABOUT PAGE (about.html)
   Two dormant, fully-designed components from an earlier homepage
   draft — .section-values/.values-grid/.value-card/.value-icon and
   .section-motto/.motto-content/.motto-headline/.motto-copy — are
   revived below (they had zero HTML references anywhere on the
   site) rather than duplicated under new names. Every other class
   in this block is new; each was grepped against the full
   stylesheet first to rule out a collision with live OR dormant
   code, per the lesson learned twice already on this project
   (.leadership-card / #chapter-placeholder).
================================================================= */

/* ─── ABOUT HERO ─────────────────────────────────────────────── */
/* 2026-08-30: same fix, same root cause, as the Leadership hero
   (see the dated comment on .leadership-hero further up) -- at the
   old width:min(560px,50%) column, "MORE THAN LETTERS. / A
   BROTHERHOOD WITH PURPOSE." was wrapping onto 4 lines instead of 2
   at desktop widths, leaving no real clearance below the final
   paragraph before "FROM THE INTERNATIONAL PRESIDENT". Height itself
   is untouched. Widened the column so the headline wraps back to 2
   lines, reduced its size ~9% with a tighter line-height, tightened
   the internal gaps, and made hero-content's padding asymmetric
   (more bottom than top) so the text group sits slightly above
   center and the freed room lands specifically below the last line. */
.about-hero { height: clamp(360px, 25vw, 420px); min-height: 360px; }
.about-hero .hero-bg { object-fit: cover; object-position: 68% 38%; }
.about-hero .hero-content {
  width: min(860px, 71%);
  margin-left: 0;
  padding-top: 16px;
  padding-bottom: 42px;
}
.about-hero .hero-label { margin-bottom: 12px; }
.about-hero .hero-headline {
  font-size: clamp(2.2rem, 2.7vw, 3.1rem);
  line-height: 0.98;
  margin-bottom: 14px;
}
.about-hero .hero-motto { margin-bottom: 16px; }

/* ─── FROM THE INTERNATIONAL PRESIDENT ──────────────────────── */
.president-section { background: var(--alp-silver-light); }
.president-inner {
  display: grid;
  grid-template-columns: 148px 220px 1fr;
  gap: 36px;
  align-items: start;
  margin-top: 18px;
}
.president-photo-wrap {
  width: 148px;
  height: 184px;
  border-radius: var(--radius-lg);
  background: var(--alp-white);
  border: 1px solid var(--alp-silver);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  flex-shrink: 0;
}
.president-photo-wrap span {
  font-family: var(--font-body);
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--alp-silver);
  text-align: center;
  padding: 0 12px;
  line-height: 1.6;
}
.president-photo-wrap img { width: 100%; height: 100%; object-fit: cover; object-position: center top; display: block; }

.president-name {
  font-family: var(--font-heading);
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--alp-indigo);
  margin-bottom: 4px;
}
.president-title {
  font-family: var(--font-body);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--alp-carolina-light);
  background: var(--alp-indigo);
  display: inline-block;
  padding: 4px 10px;
  border-radius: var(--radius);
  margin-bottom: 12px;
}
.president-recognition {
  font-family: var(--font-heading);
  font-style: italic;
  font-size: 0.95rem;
  color: var(--alp-charcoal);
  line-height: 1.5;
}

.president-message p {
  font-size: 1rem;
  color: var(--alp-charcoal);
  line-height: 1.75;
  margin-bottom: 20px;
}
.president-quote {
  border-left: 3px solid var(--alp-carolina);
  padding-left: 20px;
  margin: 0;
}
.president-quote p {
  font-family: var(--font-heading);
  font-style: italic;
  font-size: 1.2rem;
  color: var(--alp-indigo);
  line-height: 1.5;
  margin-bottom: 8px;
}
.president-quote cite {
  font-style: normal;
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  color: var(--alp-charcoal);
}

/* ─── PRESIDENTIAL WELCOME AUDIO (about.html) ─────────────────
   2026-09-04 visual refinement: redrawn as a low-profile horizontal
   editorial strip rather than a boxed/carded widget -- no filled
   background, no border-radius, just a subtle top rule that reads as
   part of the identification block's own typography rather than a
   separate bolted-on component. Nested inside .president-id (see the
   president-audio comment in renderPresidentCard(), main.js), so it
   sits in the same grid column as the identification block at every
   breakpoint: flush with the left edge of the President name/title/
   COMSEC text on desktop/tablet, and directly above the longer written
   message once .president-inner collapses to a single stacked column
   on mobile (width:100% there, no horizontal overflow). The progress
   row is always rendered at full size from first paint (0:00 / 0:00
   until metadata loads) specifically so starting playback never shifts
   layout -- only the play/pause icon swap and the fill width change. */
.president-audio {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid rgba(116, 185, 230, 0.4);
}
.president-audio-eyebrow {
  font-family: var(--font-body);
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--alp-indigo-mid);
  margin-bottom: 8px;
}
.president-audio-row {
  display: flex;
  align-items: center;
  gap: 10px;
}
.president-audio-play {
  flex-shrink: 0;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--alp-carolina);
  border: none;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--alp-white);
  cursor: pointer;
  transition: background-color var(--trans);
}
.president-audio-play:hover { background: var(--alp-indigo-mid); }
.president-audio-play:focus-visible {
  outline: 2px solid var(--alp-indigo);
  outline-offset: 2px;
}
.president-audio-icon { width: 12px; height: 12px; }
/* Icon swap driven by the .is-playing class, not the HTML `hidden`
   attribute -- Chromium does not apply the UA [hidden]{display:none}
   rule to inline <svg> elements, so toggling .hidden on these icons
   silently no-ops (see initPresidentAudio() in main.js). */
.president-audio-icon--pause { display: none; }
.president-audio.is-playing .president-audio-icon--play { display: none; }
.president-audio.is-playing .president-audio-icon--pause { display: block; }

.president-audio-copy { min-width: 0; }
.president-audio-title {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 0.88rem;
  color: var(--alp-indigo);
  line-height: 1.25;
}
.president-audio-sub {
  font-family: var(--font-body);
  font-size: 0.7rem;
  color: var(--alp-charcoal);
  opacity: 0.8;
  margin-top: 1px;
}

.president-audio-progress-row {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-top: 9px;
}
.president-audio-time {
  font-family: var(--font-body);
  font-size: 0.64rem;
  font-variant-numeric: tabular-nums;
  color: var(--alp-charcoal);
  opacity: 0.7;
  flex-shrink: 0;
  min-width: 24px;
}
.president-audio-time:last-child { text-align: right; }
.president-audio-progress {
  flex: 1;
  min-width: 0;
  padding: 7px 0;
  cursor: pointer;
  border-radius: var(--radius);
}
.president-audio-progress-track {
  position: relative;
  height: 2px;
  border-radius: 1px;
  background: rgba(11, 31, 58, 0.14);
  overflow: hidden;
}
.president-audio-progress-fill {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  width: 0%;
  background: var(--alp-carolina);
  border-radius: 1px;
}
.president-audio-progress:focus-visible {
  outline: 2px solid var(--alp-indigo);
  outline-offset: 3px;
}

/* ─── OUR PURPOSE & DIRECTION (MISSION / VISION) ────────────── */
.purpose-section { background: var(--alp-white); }
.purpose-grid {
  display: grid;
  grid-template-columns: 1.75fr 1fr;
  gap: 0;
  margin-top: 20px;
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.mission-panel, .vision-panel { padding: 40px; }
.mission-panel {
  background: var(--alp-indigo);
}
.mission-panel h3 {
  font-family: var(--font-body);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--alp-carolina);
  margin-bottom: 18px;
}
.mission-panel p {
  color: var(--alp-silver-light);
  font-size: 0.97rem;
  line-height: 1.8;
  margin-bottom: 16px;
  text-align: left;
}
.mission-panel p:last-child { margin-bottom: 0; }

.vision-panel {
  background: var(--alp-silver-light);
}
.vision-panel h3 {
  font-family: var(--font-body);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--alp-indigo);
  margin-bottom: 18px;
}
.vision-panel p {
  color: var(--alp-charcoal);
  font-size: 0.95rem;
  line-height: 1.75;
}
.vision-drivers-label {
  font-family: var(--font-body);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--alp-indigo);
  margin-bottom: 14px;
}
.vision-drivers {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
}
.vision-driver-item {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.84rem;
  font-weight: 600;
  color: var(--alp-indigo);
}
.vision-driver-icon { width: 20px; height: 20px; color: var(--alp-carolina); flex-shrink: 0; }

/* ─── OUR CORE VALUES (revived .section-values / .values-grid /
       .value-card / .value-icon — see banner comment above) ──── */

/* ─── OUR STORY (dark navy timeline, distinct from the light-bg
       .section-timeline / .timeline-grid already used on the
       homepage's own founding-story section) ───────────────────── */
/* 2026-08-30: lightened from --alp-indigo-deep (near-black) to a
   muted slate-navy, preserving the "editorial" dark band rather than
   going white/pale -- distinct from Leadership's Our Commitment blue
   (#1d466d) for rhythm across pages. No texture was already present
   here to preserve. */
.story-section {
  background: #1a3a58;
  overflow: hidden;
}
.story-timeline-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 0;
  position: relative;
  margin-top: 28px;
}
.story-timeline-grid::before {
  content: '';
  position: absolute;
  top: 10px;
  left: 10%;
  right: 10%;
  height: 2px;
  background: linear-gradient(to right, transparent, var(--alp-carolina), transparent);
  z-index: 0;
}
.story-timeline-item {
  position: relative;
  z-index: 1;
  text-align: center;
  padding: 0 14px;
}
.story-timeline-dot {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--alp-carolina);
  /* 2026-08-30: border color matched to .story-section's new
     background (#1a3a58, was --alp-indigo-deep) -- this border is a
     cutout ring, not a real border, so it must equal the section's
     own background exactly or a mismatched ring appears around every
     dot. */
  border: 3px solid #1a3a58;
  box-shadow: 0 0 0 2px var(--alp-carolina);
  margin: 0 auto 18px;
}
.story-timeline-year {
  font-family: var(--font-heading);
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--alp-carolina);
  display: block;
  margin-bottom: 6px;
}
.story-timeline-item h3 {
  font-size: 0.86rem;
  font-weight: 700;
  color: var(--alp-white);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 8px;
}
.story-timeline-item p {
  font-size: 0.82rem;
  color: var(--alp-silver);
  line-height: 1.6;
  text-align: left;
}

/* ─── MORE THAN A MOTTO (additive to the revived .section-motto
       family — see banner comment above) ──────────────────────── */
.motto-icon-badge {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  border: 1px solid rgba(199,204,209,0.35);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 20px;
  color: var(--alp-carolina);
}
.motto-icon-badge svg { width: 26px; height: 26px; }
.motto-copy--supporting {
  font-size: 0.92rem;
  color: var(--alp-silver);
  margin-top: 0;
}

/* ─── THE CHARACTER BEHIND THE LETTERS ──────────────────────── */
.character-section { background: var(--alp-silver-light); }
.character-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 16px;
  margin-top: 16px;
}
.character-item {
  text-align: center;
  padding: 20px 8px;
}
.character-icon-badge {
  width: 48px;
  height: 48px;
  background: var(--alp-white);
  border: 1px solid var(--alp-silver);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 12px;
  color: var(--alp-indigo);
}
.character-icon-badge svg { width: 20px; height: 20px; }
.character-item span {
  font-family: var(--font-body);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--alp-indigo);
  line-height: 1.4;
  display: block;
}
.character-closing {
  text-align: center;
  font-family: var(--font-heading);
  font-style: italic;
  font-size: 1.1rem;
  color: var(--alp-indigo);
  margin-top: 32px;
}

/* ─── OUR IMPACT ─────────────────────────────────────────────── */
.impact-section { background: var(--alp-carolina-light); }
.impact-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-top: 16px;
}
.impact-item { text-align: center; padding: 4px 12px; }
.impact-icon-badge {
  width: 48px;
  height: 48px;
  background: var(--alp-white);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 14px;
  color: var(--alp-indigo);
}
.impact-icon-badge svg { width: 22px; height: 22px; }
.impact-item h3 {
  font-family: var(--font-body);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--alp-indigo);
  margin-bottom: 6px;
}
.impact-item p { font-size: 0.86rem; color: var(--alp-charcoal); }

/* ─── STRONGER MEN. STRONGER COMMUNITIES. (closing band) ────── */
/* 2026-08-30: this was --alp-indigo-deep -- the exact same near-black
   as the footer right below it, so the two visually merged into one
   long dark block with no seam. Went with the "pale blue/silver with
   dark navy typography" option offered for this section rather than
   another medium-navy (the other 5 sections in this pass already
   cover that range) -- gives the strongest possible separation from
   the still-dark footer and adds a genuine light beat to the site's
   overall rhythm instead of six near-identical dark bands. The photo
   texture (ocean-texture-contact.webp at .12 opacity) is disabled
   here -- at this light a background even a faint photo overlay read
   as a smudge rather than a texture; .story-section and
   .leadership-commitment-section above keep their own texture since
   they stayed dark. Headline/sub/motto colors below are all
   explicitly re-pointed to dark navy/charcoal since the shared
   .section-heading--light and the silver/carolina-light tokens they
   used were tuned for a dark background and would fail contrast here
   -- scoped to .about-closing-section only, so Leadership's identical
   .section-heading--light usage (still on a dark section) is untouched. */
.about-closing-section {
  background: linear-gradient(135deg, #e8eff5 0%, #dce8f2 100%);
  position: relative;
  overflow: hidden;
  padding: 44px 0;
  text-align: center;
}
.about-closing-section::before { display: none; }
.about-closing-section .section-heading--light { color: var(--alp-indigo); }
.about-closing-inner { position: relative; z-index: 1; }
.about-closing-sub {
  font-family: var(--font-heading);
  font-style: italic;
  font-size: 1.15rem;
  color: var(--alp-indigo-mid);
  margin-top: 10px;
}
.about-closing-motto {
  font-family: var(--font-body);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--alp-charcoal);
  margin-top: 18px;
}

/* ─── ABOUT — RESPONSIVE ─────────────────────────────────────── */
@media (max-width: 1100px) {
  .character-grid { grid-template-columns: repeat(4, 1fr); row-gap: 24px; }
}

@media (max-width: 900px) {
  .about-hero { height: auto; min-height: 0; }
  .about-hero .hero-inner { flex-direction: column; align-items: flex-start; gap: 22px; padding-top: 32px; padding-bottom: 28px; }
  .about-hero .hero-content { width: 100%; margin-left: 0; }

  .president-inner { grid-template-columns: 130px 1fr; }
  .president-message { grid-column: 1 / -1; }

  .purpose-grid { grid-template-columns: 1fr; }
  .mission-panel, .vision-panel { padding: 32px; }

  .story-timeline-grid { grid-template-columns: repeat(3, 1fr); row-gap: 32px; }
  .story-timeline-grid::before { display: none; }

  .character-grid { grid-template-columns: repeat(4, 1fr); }

  .impact-grid { grid-template-columns: repeat(3, 1fr); gap: 16px; }
}

@media (max-width: 768px) {
  .president-inner { grid-template-columns: 1fr; }
  .president-photo-wrap { margin-bottom: 4px; }
}

@media (max-width: 640px) {
  .president-section, .purpose-section, .story-section,
  .character-section, .impact-section { padding: 34px 0 30px; }
  .section-motto { padding: 34px 0; }
  .about-closing-section { padding: 32px 0; }

  .president-inner { gap: 20px; }

  .mission-panel, .vision-panel { padding: 26px 22px; }

  .story-timeline-grid { grid-template-columns: 1fr; row-gap: 0; }
  .story-timeline-item {
    text-align: left;
    padding: 0 0 26px 28px;
    border-left: 2px solid rgba(116,185,230,0.3);
    margin-left: 8px;
  }
  .story-timeline-item:last-child { padding-bottom: 0; }
  .story-timeline-dot { margin: 0 0 12px -33px; }

  .vision-drivers { grid-template-columns: 1fr 1fr; }

  .character-grid { grid-template-columns: repeat(2, 1fr); gap: 20px; }

  .impact-grid { grid-template-columns: 1fr; gap: 24px; }
}

/* ══════════════════════════════════════════════════════════════════════════
   CHAPTER PAGE — MASTER TEMPLATE
   2026-08-30. One reusable structure shared verbatim by chapters-alpha.html,
   chapters-beta.html, chapters-gamma.html, chapters-delta.html and
   chapters-epsilon.html — content is entirely data-driven (see the
   `chapters` object + renderChapterPage() in js/main.js), so these rules
   never need touching to add or edit a Chapter's content, only to change
   the shared layout for all five pages at once. Colour rhythm requested:
   hero (photo+navy gradient) → about (white) → leadership (silver-light)
   → service (white) → gallery (soft gray) → highlights (light blue/silver,
   Alpha only for now) → connect (deep navy) → existing footer.
   ══════════════════════════════════════════════════════════════════════ */

/* ─── Hero ────────────────────────────────────────────────────────────── */
.chapter-hero { height: clamp(360px, 26vw, 420px); min-height: 360px; }
.chapter-hero--no-photo { background: linear-gradient(135deg, var(--alp-indigo-deep), var(--alp-indigo-mid)); }
/* Base .hero-bg (used by the homepage's Poseidon artwork) is object-fit:contain,
   right-aligned -- wrong for full-bleed chapter location photography. Each
   chapter's <img> also sets object-fit/object-position inline (data-driven via
   heroPosition in js/main.js), so this class rule is a CSS-only safety net. */
.chapter-hero .hero-bg { object-fit: cover; object-position: center center; }
.chapter-hero-location {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 14px;
  font-family: var(--font-body);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  color: var(--alp-silver-light);
}
.chapter-hero-location svg { width: 16px; height: 16px; color: var(--alp-carolina); flex-shrink: 0; }

/* ─── About + Pillars ─────────────────────────────────────────────────── */
.chapter-about-section { background: var(--alp-white); }
.chapter-about-grid {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 44px;
  align-items: start;
}
.chapter-about-copy p { font-size: 1rem; line-height: 1.75; color: var(--alp-charcoal); }
.chapter-pillars-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
}
.chapter-pillar-card {
  background: var(--alp-silver-light);
  border: 1px solid rgba(11,31,58,.1);
  border-radius: var(--radius-lg);
  padding: 20px 18px;
}
.chapter-pillar-icon {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--alp-white);
  color: var(--alp-carolina);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 12px;
}
.chapter-pillar-icon svg { width: 19px; height: 19px; }
.chapter-pillar-card h3 {
  font-family: var(--font-body);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--alp-indigo);
  margin-bottom: 6px;
}
.chapter-pillar-card p { font-size: 0.86rem; line-height: 1.55; color: var(--alp-charcoal); margin: 0; }

/* ─── Leadership ──────────────────────────────────────────────────────── */
.chapter-leadership-section { background: var(--alp-silver-light); text-align: center; }
.chapter-leadership-section .section-sub { margin-left: auto; margin-right: auto; }
.chapter-leadership-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 18px;
  margin-top: 30px;
  text-align: center;
}
.officer-card-org {
  font-family: var(--font-body);
  font-size: 0.72rem;
  color: var(--alp-carolina);
  margin-top: 2px;
}

/* ─── Service in Action ───────────────────────────────────────────────── */
.chapter-service-section { background: var(--alp-white); }
.chapter-service-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  margin-top: 28px;
}
.service-card {
  background: var(--alp-indigo-deep);
  border-radius: var(--radius-lg);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
/* 2026-09-04: click/tap-to-open lightbox for Service in Action cards that
   have a real photo (see initServiceInActionLightbox() in js/main.js,
   which reuses the same Brotherhood in Action lightbox mechanics/visual
   design) -- cursor + focus ring only, mirrors .brotherhood-action-card
   above; "PHOTO COMING SOON" placeholder cards never get this class and
   stay inert. */
.service-card--clickable { cursor: pointer; }
.service-card--clickable:focus-visible {
  outline: 2px solid var(--alp-carolina);
  outline-offset: 2px;
}
.service-card-category {
  font-family: var(--font-body);
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--alp-white);
  padding: 10px 14px;
}
.service-card-image {
  aspect-ratio: 4 / 3;
  background: var(--alp-silver-light);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.service-card-image img { width: 100%; height: 100%; object-fit: cover; display: block; }
.service-card-image span {
  font-family: var(--font-body);
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(11,31,58,.4);
  text-align: center;
  line-height: 1.6;
  padding: 0 10px;
}
.service-card-body { background: var(--alp-white); padding: 16px 16px 20px; flex: 1; }
.service-card-body h3 {
  font-family: var(--font-heading);
  font-size: 1.02rem;
  font-weight: 600;
  color: var(--alp-indigo);
  margin-bottom: 6px;
}
.service-card-meta {
  font-family: var(--font-body);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--alp-carolina);
  margin-bottom: 8px;
}
.service-card-body p:last-child { font-size: 0.86rem; line-height: 1.55; color: var(--alp-charcoal); margin: 0; }

/* ─── Community Gallery ───────────────────────────────────────────────── */
.chapter-gallery-section { background: var(--alp-silver-light); }
.chapter-gallery-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  margin-top: 28px;
}
.chapter-gallery-item {
  aspect-ratio: 4 / 3;
  border-radius: var(--radius-lg);
  background: var(--alp-white);
  border: 1px solid rgba(11,31,58,.08);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.chapter-gallery-item img { width: 100%; height: 100%; object-fit: cover; display: block; }
.chapter-gallery-item span {
  font-family: var(--font-body);
  font-size: 0.64rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(11,31,58,.35);
  text-align: center;
  line-height: 1.6;
}
.chapter-gallery-caption {
  margin: 22px 0 0;
  text-align: center;
  font-family: var(--font-heading);
  font-style: italic;
  font-size: 1.05rem;
  color: var(--alp-indigo);
}

/* 2026-09-04: the "Chapter Highlights" section/band CSS that lived here
   (.chapter-highlights-section/-head/-grid/-stat/-value/-label) is
   removed -- it existed solely for that section, which no chapter now
   renders (chapterHighlightsHTML() in js/main.js returns '' whenever a
   chapter's `highlights` array is empty, which is true for all five
   chapters again after Alpha's sample placeholder data was cleared per
   the user's explicit removal request). See that function's own
   comment if this section is ever reintroduced with real data. */

/* ─── Connect CTA ─────────────────────────────────────────────────────── */
/* 2026-08-31: lightened from a flat --alp-indigo-deep fill (the same
   near-black #061426 used by #site-footer itself) to a medium slate-blue
   diagonal gradient, matching the direction already established for
   Programs' and Membership's closing CTA bands on 2026-08-30 (both moved
   off --alp-indigo-deep toward a lighter medium-blue family). Because
   this section has no background photo to taper into (unlike those two),
   the requested three-stop gradient is used directly rather than as an
   overlay. This section had been using the exact same color as the
   footer background, which is why it was visually merging into it --
   the new lighter gradient (lightest at #477da1) now reads clearly
   distinct from both #site-footer (#061426) and .footer-bottom-bar
   (#102d52) below it. Text (.chapter-connect-text) and the button
   (.btn-primary) are untouched -- both already have sufficient contrast
   against this lighter range, matching how they read against the
   similarly-lightened Programs/Membership CTA bands. Applies to all
   five chapters-*.html pages via the single shared chapterConnectHTML()
   template in js/main.js -- chapters.html (the landing page) does not
   use this class and is unaffected. */
.chapter-connect-section {
  background: linear-gradient(135deg, #2b587c 0%, #376b91 55%, #477da1 100%);
  padding: var(--section-sm) 0;
}
.chapter-connect-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 30px;
  flex-wrap: wrap;
}
.chapter-connect-text { max-width: 620px; }
.chapter-connect-text .section-label { color: var(--alp-carolina); }
.chapter-connect-text h2 {
  font-family: var(--font-heading);
  font-size: clamp(1.3rem, 2.2vw, 1.7rem);
  font-weight: 700;
  color: var(--alp-white);
  margin: 6px 0 8px;
}
.chapter-connect-text p { font-size: 0.92rem; color: var(--alp-silver-light); margin: 0; }
.chapter-connect-inner .btn { flex-shrink: 0; }

/* ─── Chapter Page — Responsive ───────────────────────────────────────── */
@media (max-width: 1100px) {
  .chapter-leadership-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 900px) {
  .chapter-about-grid { grid-template-columns: 1fr; gap: 30px; }
  .chapter-service-grid { grid-template-columns: repeat(2, 1fr); }
  .chapter-leadership-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 768px) {
  .chapter-gallery-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .chapter-pillars-grid { grid-template-columns: 1fr; }
  .chapter-service-grid { grid-template-columns: 1fr; }
  .chapter-leadership-grid { grid-template-columns: repeat(2, 1fr); }
  .chapter-connect-inner { flex-direction: column; align-items: flex-start; }
  .chapter-connect-inner .btn { width: 100%; text-align: center; }
}

/* ─── Generic Media Preview (Events flyers, About page President portrait) ───
   Independent from the Leadership page's own .leadership-photo-* hover/
   lightbox feature (separate class names, separate DOM nodes created by
   initMediaPreviewTriggers() in js/main.js) so wiring it up here can never
   affect Leadership's already-verified implementation. Same restrained
   visual language (floating card preview + modal lightbox) reused for
   consistency across the site. */
.media-preview-trigger {
  padding: 0;
  border: 0;
  background: transparent;
  cursor: zoom-in;
  -webkit-tap-highlight-color: transparent;
}
.media-preview-trigger img { transition: transform 200ms ease; }
.media-preview-trigger:focus-visible {
  outline: 2px solid var(--alp-carolina);
  outline-offset: 3px;
}
/* Fill-parent sizing for a fixed-box photo (About page President portrait). */
.president-photo-wrap .media-preview-trigger { display: block; width: 100%; height: 100%; }
.president-photo-wrap:has(.media-preview-trigger:hover) img,
.president-photo-wrap:has(.media-preview-trigger:focus-visible) img {
  transform: scale(1.03);
}
.president-photo-wrap:has(.media-preview-trigger:hover),
.president-photo-wrap:has(.media-preview-trigger:focus-visible) {
  border-color: var(--alp-carolina);
}
/* Content-hugging sizing for a naturally-sized poster image (Events
   flyers) sitting inside .event-editorial-media -- the trigger must not
   stretch to fill the column's full height or it would create an
   oversized invisible click target around the (shorter) flyer image.
   2026-09-02: updated from the old .event-artwork-area (removed along
   with the rest of the pre-rebuild Events card layout) to
   .event-editorial-media, its replacement in the new editorial layout;
   same rules, same behavior. */
.event-editorial-media .media-preview-trigger { display: block; line-height: 0; }
.event-editorial-media .media-preview-trigger:hover img,
.event-editorial-media .media-preview-trigger:focus-visible img {
  transform: scale(1.02);
}

.media-preview {
  position: fixed;
  z-index: 900;
  max-width: min(420px, 85vw);
  max-height: 70vh;
  background: var(--alp-white);
  border-radius: 8px;
  border: 1px solid rgba(5,29,44,.10);
  box-shadow: 0 18px 45px rgba(5,29,44,.22);
  padding: 8px;
  pointer-events: none;
  opacity: 0;
  transform: scale(0.97);
  transition: opacity 200ms ease, transform 200ms ease;
}
.media-preview.is-visible { opacity: 1; transform: scale(1); }
.media-preview img {
  display: block;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: calc(70vh - 16px);
  object-fit: contain;
  border-radius: 4px;
}

.media-lightbox {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
.media-lightbox[hidden] { display: none; }
.media-lightbox-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(5,29,44,.82);
  opacity: 0;
  transition: opacity 200ms ease;
}
.media-lightbox-content {
  position: relative;
  z-index: 1;
  max-width: min(560px, 92vw);
  max-height: 88%;
  width: 100%;
  background: var(--alp-white);
  border-radius: 10px;
  padding: 14px 14px 18px;
  text-align: center;
  opacity: 0;
  transform: scale(0.97);
  transition: opacity 200ms ease, transform 200ms ease;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.media-lightbox.is-visible .media-lightbox-backdrop { opacity: 1; }
.media-lightbox.is-visible .media-lightbox-content { opacity: 1; transform: scale(1); }
.media-lightbox-photo {
  display: block;
  max-width: 100%;
  max-height: 78vh;
  width: auto;
  height: auto;
  object-fit: contain;
  border-radius: 4px;
  margin: 0 auto;
}
.media-lightbox-caption { margin-top: 12px; }
.media-lightbox-name {
  font-family: var(--font-heading);
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--alp-charcoal);
}
.media-lightbox-title {
  font-family: var(--font-body);
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--alp-carolina);
  margin-top: 2px;
}
.media-lightbox-close {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 1px solid rgba(11,31,58,.12);
  background: var(--alp-white);
  color: var(--alp-indigo);
  font-size: 1.3rem;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
.media-lightbox-close:hover,
.media-lightbox-close:focus-visible { border-color: var(--alp-carolina); color: var(--alp-carolina); }
.media-lightbox-close:focus-visible { outline: 2px solid var(--alp-carolina); outline-offset: 2px; }
body.media-lightbox-open { overflow: hidden; }

@media (prefers-reduced-motion: reduce) {
  .media-preview-trigger img,
  .media-preview,
  .media-lightbox-backdrop,
  .media-lightbox-content {
    transition-duration: 0.01ms;
  }
}

@media (max-width: 640px) {
  .media-preview { display: none; }
}


/* ════════════════════════════════════════════════════════════════
   LEGAL PAGES — Privacy Policy & Terms of Use
   2026-09-02: new compact navy hero + document-style content
   template, shared by both legal pages only. Deliberately independent
   of the sitewide .hero class (that class assumes a 440-540px tall
   photographic hero with a right-anchored image/Poseidon artwork) --
   the legal hero is much shorter and has no image at all, per the
   "no tall photographic hero" requirement: solid navy with a very
   subtle diagonal gradient only.
   ════════════════════════════════════════════════════════════════ */

/* ─── LEGAL HERO ─────────────────────────────────────────────── */
.legal-hero {
  position: relative;
  width: 100%;
  height: clamp(220px, 16vw, 260px);
  min-height: 220px;
  display: flex;
  align-items: center;
  background: linear-gradient(155deg, var(--alp-indigo) 0%, var(--alp-indigo-deep) 100%);
}
.legal-hero-inner {
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--gutter);
}
.legal-eyebrow {
  font-family: var(--font-body);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--alp-carolina);
  margin-bottom: 14px;
}
.legal-hero-heading {
  font-family: var(--font-heading);
  font-size: clamp(2rem, 3.6vw, 2.9rem);
  font-weight: 700;
  color: var(--alp-white);
  line-height: 1.1;
  margin-bottom: 8px;
  letter-spacing: 0.01em;
}
.legal-hero-sub {
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 500;
  color: var(--alp-carolina-light);
}

@media (max-width: 640px) {
  .legal-hero { height: clamp(180px, 30vw, 210px); min-height: 180px; }
  .legal-hero-heading { font-size: clamp(1.6rem, 7vw, 2.1rem); }
  .legal-hero-sub { font-size: 0.88rem; }
}

/* ─── LEGAL CONTENT ──────────────────────────────────────────── */
.legal-content-section {
  background: var(--alp-white);
  padding: 48px 0 54px;
}
.legal-content {
  max-width: 920px;
  margin: 0 auto;
  padding: 0 24px;
}
.legal-effective-date {
  display: inline-block;
  font-family: var(--font-body);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--alp-charcoal);
  opacity: 0.62;
  margin-bottom: 28px;
}
.legal-intro p {
  font-size: 1rem;
  line-height: 1.7;
  color: var(--alp-charcoal);
  margin-bottom: 12px;
}
.legal-intro { margin-bottom: 20px; }
.legal-section {
  margin-bottom: 32px;
  padding-top: 28px;
  border-top: 1px solid rgba(116, 185, 230, 0.25);
}
.legal-content > .legal-intro + .legal-section {
  border-top: none;
  padding-top: 0;
}
.legal-section-heading {
  font-family: var(--font-heading);
  font-size: clamp(1.2rem, 2vw, 1.5rem);
  font-weight: 700;
  color: var(--alp-indigo);
  line-height: 1.25;
  margin-bottom: 14px;
  display: flex;
  align-items: baseline;
  gap: 12px;
}
.legal-section-number {
  font-family: var(--font-heading);
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--alp-carolina);
  letter-spacing: 0.03em;
  flex-shrink: 0;
}
.legal-subheading {
  font-family: var(--font-heading);
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--alp-indigo-mid);
  margin: 18px 0 8px;
}
.legal-section p {
  font-size: 1rem;
  line-height: 1.7;
  color: var(--alp-charcoal);
  margin-bottom: 12px;
}
.legal-section p:last-child { margin-bottom: 0; }
.legal-section ul {
  margin: 0 0 12px;
}
.legal-section ul li {
  position: relative;
  padding-left: 22px;
  font-size: 1rem;
  line-height: 1.7;
  color: var(--alp-charcoal);
  margin-bottom: 8px;
}
.legal-section ul li::before {
  content: '';
  position: absolute;
  left: 4px;
  top: 0.72em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--alp-carolina);
}
.legal-section ul li:last-child { margin-bottom: 0; }
.legal-section ul + p { margin-top: 0; }
.legal-section a {
  color: var(--alp-indigo-mid);
  text-decoration: underline;
  text-decoration-color: var(--alp-carolina);
  text-underline-offset: 2px;
  transition: color 0.2s ease;
}
.legal-section a:hover, .legal-section a:focus-visible {
  color: var(--alp-carolina);
}
.legal-contact-block {
  font-size: 1rem;
  line-height: 1.85;
  color: var(--alp-charcoal);
}
.legal-contact-block strong { color: var(--alp-indigo); font-weight: 700; }

.legal-cross-link {
  margin-top: 40px;
  padding-top: 24px;
  border-top: 1px solid rgba(116, 185, 230, 0.35);
}

.legal-back-to-top {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 26px;
  font-family: var(--font-body);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--alp-indigo-mid);
  border: 1px solid var(--alp-silver);
  border-radius: var(--radius);
  padding: 8px 14px;
  transition: color 0.2s ease, border-color 0.2s ease;
}
.legal-back-to-top:hover, .legal-back-to-top:focus-visible {
  color: var(--alp-carolina);
  border-color: var(--alp-carolina);
}

@media (max-width: 640px) {
  .legal-content-section { padding: 34px 0 40px; }
  .legal-content { padding: 0 20px; }
  .legal-section-heading { font-size: 1.15rem; }
  .legal-section { margin-bottom: 26px; padding-top: 24px; }
}

/* ============================================================
   BROTHERHOOD IN ACTION — Home page photo carousel (index.html only)
   Reuses existing tokens/utilities: .container, .section-label,
   .section-heading, .section-sub, .reveal. Photos are real files from
   images/brotherhood-in-action/ only, rendered client-side by js/main.js
   (BROTHERHOOD_ACTION_PHOTOS + initBrotherhoodActionCarousel()) so the
   image source can later be swapped for an automatic folder reader
   without touching this CSS or the HTML skeleton in index.html.
============================================================ */
.brotherhood-action-section {
  background: var(--alp-white);
  padding: var(--section-pad) 0;
}
.brotherhood-action-heading {
  text-align: center;
  max-width: 720px;
  margin: 0 auto 32px;
}
.brotherhood-action-heading .section-label { justify-content: center; }
.brotherhood-action-heading .section-sub { margin: 0 auto; }

.brotherhood-action-carousel { position: relative; }

.brotherhood-action-viewport {
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  -ms-overflow-style: none;
  cursor: grab;
}
.brotherhood-action-viewport::-webkit-scrollbar { display: none; }
.brotherhood-action-viewport.is-dragging { cursor: grabbing; }
.brotherhood-action-viewport:focus-visible { outline: 2px solid var(--alp-carolina); outline-offset: 4px; }

.brotherhood-action-track {
  display: flex;
  gap: 14px;
  width: max-content;
}

.brotherhood-action-card {
  position: relative;
  flex: 0 0 auto;
  width: 72vw;
  max-width: 260px;
  aspect-ratio: 4 / 3;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: 0 6px 18px rgba(11,31,58,.14);
  background: var(--alp-silver-light);
  /* 2026-09-04: click/tap-to-open lightbox (see initBrotherhoodActionLightbox()
     in js/main.js) -- cursor + focus ring only, no other carousel styling
     touched. */
  cursor: pointer;
}
.brotherhood-action-card:focus-visible {
  outline: 2px solid var(--alp-carolina);
  outline-offset: 2px;
}
.brotherhood-action-card img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: center 30%;
  transition: transform 0.5s ease;
  -webkit-user-drag: none;
  user-select: none;
  pointer-events: none;
}
@media (hover: hover) and (pointer: fine) {
  .brotherhood-action-card::after {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(11,31,58,0);
    transition: background 0.35s ease;
    pointer-events: none;
    border-radius: var(--radius-lg);
  }
  .brotherhood-action-card:hover img { transform: scale(1.04); }
  .brotherhood-action-card:hover::after { background: rgba(11,31,58,.08); }
}

.brotherhood-action-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid var(--alp-silver);
  background: var(--alp-white);
  color: var(--alp-indigo);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 2;
  box-shadow: 0 4px 12px rgba(11,31,58,.16);
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.brotherhood-action-arrow:hover,
.brotherhood-action-arrow:focus-visible {
  background: var(--alp-indigo);
  color: var(--alp-white);
  border-color: var(--alp-indigo);
}
.brotherhood-action-arrow:focus-visible { outline: 2px solid var(--alp-carolina); outline-offset: 2px; }
.brotherhood-action-prev { left: 2px; }
.brotherhood-action-next { right: 2px; }

.brotherhood-action-instruction {
  text-align: center;
  margin-top: 18px;
  font-family: var(--font-body);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--alp-carolina);
}

@media (min-width: 640px) {
  .brotherhood-action-track { gap: 20px; }
  .brotherhood-action-card { width: 32vw; max-width: 300px; }
  .brotherhood-action-prev { left: 8px; }
  .brotherhood-action-next { right: 8px; }
}

@media (min-width: 1024px) {
  .brotherhood-action-track { gap: 24px; }
  .brotherhood-action-card { width: clamp(200px, 19vw, 250px); max-width: none; }
  .brotherhood-action-arrow { width: 44px; height: 44px; }
}

@media (prefers-reduced-motion: reduce) {
  .brotherhood-action-card img,
  .brotherhood-action-arrow {
    transition-duration: 0.01ms;
  }
}

/* ─── Brotherhood in Action — photo lightbox (2026-09-04) ────────────────
   One reusable component shared by all six Brotherhood in Action galleries
   (see initBrotherhoodActionLightbox() in js/main.js). Deliberately its
   own full-bleed dark design -- not a reuse of .leadership-lightbox/
   .media-lightbox's white-card style -- per this feature's spec: deep
   navy/near-black backdrop, image centered at full size (object-fit:
   contain, never cropped/stretched), no caption/card/thumbnails. The
   underlying open/close mechanics (hidden + is-visible fade, body
   scroll-lock class, close button/backdrop/Escape) intentionally mirror
   those two already-approved lightboxes. */
.brotherhood-lightbox {
  position: fixed;
  inset: 0;
  z-index: 1000;
}
.brotherhood-lightbox[hidden] { display: none; }
.brotherhood-lightbox-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(6,20,38,.92);
  opacity: 0;
  transition: opacity 200ms ease;
}
.brotherhood-lightbox.is-visible .brotherhood-lightbox-backdrop { opacity: 1; }
.brotherhood-lightbox-content {
  position: relative;
  z-index: 1;
  height: 100%;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  opacity: 0;
  transform: scale(0.98);
  transition: opacity 200ms ease, transform 200ms ease;
}
.brotherhood-lightbox.is-visible .brotherhood-lightbox-content { opacity: 1; transform: scale(1); }
.brotherhood-lightbox-img {
  display: block;
  max-width: 92vw;
  max-height: 86vh;
  width: auto;
  height: auto;
  object-fit: contain;
  margin: 0 auto;
  border-radius: 3px;
  box-shadow: 0 20px 50px rgba(0,0,0,.4);
}
.brotherhood-lightbox-close {
  position: fixed;
  top: 20px;
  right: 20px;
  z-index: 2;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,.32);
  background: rgba(255,255,255,.08);
  color: var(--alp-white);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: border-color 0.2s ease, color 0.2s ease, background 0.2s ease;
}
.brotherhood-lightbox-close:hover,
.brotherhood-lightbox-close:focus-visible { border-color: var(--alp-carolina); color: var(--alp-carolina); background: rgba(255,255,255,.14); }
.brotherhood-lightbox-close:focus-visible { outline: 2px solid var(--alp-carolina); outline-offset: 2px; }

.brotherhood-lightbox-arrow {
  position: fixed;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,.28);
  background: rgba(255,255,255,.06);
  color: var(--alp-white);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: border-color 0.2s ease, color 0.2s ease, background 0.2s ease;
}
.brotherhood-lightbox-arrow:hover,
.brotherhood-lightbox-arrow:focus-visible { border-color: var(--alp-carolina); color: var(--alp-carolina); background: rgba(255,255,255,.14); }
.brotherhood-lightbox-arrow:focus-visible { outline: 2px solid var(--alp-carolina); outline-offset: 2px; }
.brotherhood-lightbox-prev { left: 20px; }
.brotherhood-lightbox-next { right: 20px; }

body.brotherhood-lightbox-open { overflow: hidden; }

@media (max-width: 640px) {
  .brotherhood-lightbox-content { padding: 14px; }
  .brotherhood-lightbox-img { max-width: 94vw; max-height: 86vh; }
  .brotherhood-lightbox-close { top: 12px; right: 12px; width: 36px; height: 36px; }
  .brotherhood-lightbox-arrow { width: 40px; height: 40px; }
  .brotherhood-lightbox-prev { left: 8px; }
  .brotherhood-lightbox-next { right: 8px; }
}

@media (prefers-reduced-motion: reduce) {
  .brotherhood-lightbox-backdrop,
  .brotherhood-lightbox-content {
    transition-duration: 0.01ms;
  }
}

/* ============================================================
   Founder / Visionary tribute -- single global centered overlay
   (Home page only). Wraps the existing Kevin Rankins, Taybron
   Virgin, Dewayne Williams and Tonya Rankins portraits with a
   plain hover/tap trigger (.alp-tribute-trigger); the tribute
   artwork itself lives in ONE overlay/modal appended directly to
   <body> (see index.html), so no section's overflow, transform or
   stacking context can ever trap or clip it. Desktop: hover opens
   it, centered over the whole page; moving onto the modal itself
   keeps it open. Mobile (<=700px): tap opens it; the X button, a
   tap on the dark background, or Escape all close it.
   ============================================================ */

.alp-tribute-trigger {
  cursor: pointer;
}

.alp-tribute-overlay {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 30px;
  background: rgba(2, 16, 35, 0.82);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  z-index: 2147483000;
  transition: opacity 0.25s ease, visibility 0.25s ease;
}
.alp-tribute-overlay.active {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.alp-tribute-modal {
  position: relative;
  width: min(1180px, 92vw);
  max-height: 90vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #061d3b;
  border: 2px solid rgba(120, 190, 235, 0.95);
  border-radius: 12px;
  box-shadow: 0 35px 100px rgba(0, 0, 0, 0.65);
  overflow: hidden;
  transform: scale(0.95) translateY(10px);
  transition: transform 0.28s ease;
}
.alp-tribute-overlay.active .alp-tribute-modal {
  transform: scale(1) translateY(0);
}

#alpTributeImage {
  display: block;
  width: 100%;
  height: auto;
  max-width: 100%;
  max-height: 88vh;
  object-fit: contain;
  background: #061d3b;
}

.alp-tribute-close {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 42px;
  height: 42px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.75);
  border-radius: 50%;
  background: rgba(3, 23, 48, 0.92);
  color: #ffffff;
  font-family: Arial, sans-serif;
  font-size: 28px;
  font-weight: 300;
  line-height: 1;
  cursor: pointer;
  z-index: 5;
  transition: background 0.2s ease, transform 0.2s ease;
}
.alp-tribute-close:hover,
.alp-tribute-close:focus-visible {
  background: rgba(20, 83, 145, 0.98);
  transform: scale(1.06);
}
.alp-tribute-close:focus-visible {
  outline: 2px solid var(--alp-carolina);
  outline-offset: 2px;
}

body.alp-tribute-open {
  overflow: hidden;
}

@media (max-width: 700px) {
  .alp-tribute-overlay { padding: 14px; }
  .alp-tribute-modal {
    width: 96vw;
    max-height: 88vh;
    border-radius: 8px;
  }
  #alpTributeImage { max-height: 86vh; }
  .alp-tribute-close {
    width: 40px;
    height: 40px;
    top: 8px;
    right: 8px;
    font-size: 26px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .alp-tribute-overlay,
  .alp-tribute-modal,
  .alp-tribute-close {
    transition: none;
  }
}

/* ============================================================
   OMEGA CHAPTER — "In Loving Memory" memorial page (omega.html)
   Not an operating chapter -- a permanent, dignified remembrance
   page for departed Brothers. Reuses the site's existing .hero /
   .section-pad / .section-heading / .reveal / .alp-tribute-*
   components wherever possible; the rules below add only what
   those components don't already cover (the hero's memorial-
   specific lines, the three-column memorial-card grid, and the
   closing remembrance band). Colors are the site's existing
   --alp-* tokens throughout, plus one new restrained gold token
   (--alp-gold-muted) added here for the "restrained gold" accents
   the memorial spec calls for -- the site had no gold token yet.
   ============================================================ */

:root {
  --alp-gold-muted: #C9A961;
  --alp-gold-soft:  rgba(201, 169, 97, 0.55);
}

/* ─── Hero ───────────────────────────────────────────────────── */
/* Reuses images/hero-ocean.webp (deep navy ocean, clouds parting,
   light rays -- already an approved, crest-free asset in use on
   Leadership) -- it already matches the memorial hero's required
   look with no new asset needed. Cover-fit + custom position keeps
   the light break in frame across breakpoints, following the same
   per-page .hero-bg override pattern as every other hero on the
   site (see .leadership-hero, .about-hero, etc. above). */
/* Height matches the site's standard interior-page hero (see
   .about-hero / .chapter-hero above) instead of the taller homepage
   .hero default -- Omega is a chapter-style page, not a landing
   page, so its hero should read the same size as Leadership,
   Programs, About and the individual Chapter pages. */
.omega-hero { height: clamp(360px, 25vw, 420px); min-height: 360px; }
/* omega-hero.webp is a wide (~3:1) composition -- dark sky left,
   stairway/light center, Poseidon/trident anchored at the right
   edge, ocean along the bottom. object-position keeps the trident
   and stairway in frame instead of cropping toward the vertical
   center. */
.omega-hero .hero-bg { object-fit: cover; object-position: center 38%; }
.omega-hero .hero-content {
  width: min(620px, 50%);
  padding-top: 6px;
  padding-bottom: 6px;
}

.omega-hero-eyebrow {
  font-family: var(--font-heading);
  font-size: clamp(2rem, 2.8vw, 2.8rem);
  font-weight: 700;
  color: var(--alp-white);
  letter-spacing: 0.02em;
  line-height: 1.05;
  margin-bottom: 6px;
}
.omega-hero-subhead {
  font-family: var(--font-body);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--alp-gold-muted);
  margin-bottom: 8px;
}
.omega-hero-tagline {
  font-family: var(--font-heading);
  font-style: italic;
  font-size: clamp(0.92rem, 1.3vw, 1.05rem);
  color: var(--alp-carolina-light);
  margin-bottom: 8px;
}
/* Slightly tighter than the base .hero-copy line-height so the added
   music control (below) still fits inside the fixed interior-hero
   height without touching the wording itself. */
.omega-hero .hero-copy { margin-bottom: 0; line-height: 1.55; }
.omega-hero-scripture {
  margin-top: 10px;
  padding-top: 8px;
  border-top: 1px solid var(--alp-gold-soft);
  font-family: var(--font-heading);
  font-style: italic;
  font-size: 0.9rem;
  color: var(--alp-silver-light);
  max-width: 480px;
}
.omega-hero-scripture cite {
  display: block;
  margin-top: 4px;
  font-family: var(--font-body);
  font-style: normal;
  font-size: 0.64rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--alp-gold-muted);
}

/* Memorial background-music control -- a discreet pill, not a media
   player. Omega Chapter only. */
.omega-music-control {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin-top: 10px;
  padding: 6px 14px;
  border: 1px solid rgba(196, 168, 94, 0.55);
  border-radius: 999px;
  background: rgba(4, 23, 46, 0.50);
  backdrop-filter: blur(5px);
  color: rgba(255, 255, 255, 0.92);
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}
.omega-music-control:hover {
  background: rgba(8, 43, 79, 0.72);
  border-color: rgba(196, 168, 94, 0.85);
}
.omega-music-control__icon {
  color: #d2b66d;
  font-size: 15px;
  line-height: 1;
}
@media (prefers-reduced-motion: reduce) {
  .omega-music-control { transition: none; }
}

/* Below the interior-hero breakpoint, match .about-hero /
   .leadership-hero: let the hero grow with its stacked content
   instead of clipping it inside a fixed short box. */
@media (max-width: 900px) {
  .omega-hero { height: auto; min-height: 0; }
  .omega-hero .hero-inner {
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    padding-top: 32px;
    padding-bottom: 28px;
  }
  /* Cap the line length so text doesn't stretch across the full
     stacked width toward the bright stairway; the stronger ::after
     override below is the safety net for whatever text still lands
     over the lighter part of the image. */
  .omega-hero .hero-content { width: 100%; max-width: 300px; margin-left: 0; padding-top: 0; padding-bottom: 0; }
  /* At narrow (portrait-ish) widths, cover crops most of this wide
     image's width. Shift the crop window right so the stairway and
     the Poseidon/trident figure both stay in frame, rather than the
     default center crop which loses Poseidon off the right edge. */
  .omega-hero .hero-bg { object-position: 92% 38%; }
  /* Mobile/tablet: the full-width text column reaches further right
     than the desktop 50%-capped column, so the shared .hero::after
     gradient (tuned for that narrower column) fades out before the
     text does. Push the dark zone further right for legibility. */
  .omega-hero::after {
    background: linear-gradient(
      90deg,
      rgba(4, 25, 41, 0.96) 0%,
      rgba(4, 25, 41, 0.96) 35%,
      rgba(4, 25, 41, 0.85) 55%,
      rgba(4, 25, 41, 0.6) 75%,
      rgba(4, 25, 41, 0.35) 100%
    );
  }
}
@media (max-width: 700px) {
  .omega-music-control {
    margin-top: 14px;
    padding: 8px 12px;
    font-size: 10px;
  }
}

/* ─── Memorial Introduction ─────────────────────────────────── */
.omega-intro {
  background: var(--alp-white);
  text-align: center;
}
.omega-intro .container--sm { margin: 0 auto; }
.omega-intro .section-label,
.omega-intro .section-heading { text-align: center; }
.omega-intro .divider-line--center { width: 48px; }
.omega-intro-body p {
  font-size: 1.02rem;
  color: var(--alp-charcoal);
  line-height: 1.8;
  margin-bottom: 14px;
}
.omega-intro-legacy {
  margin-top: 18px;
  font-family: var(--font-heading);
  font-style: italic;
  font-size: 1.1rem;
  color: var(--alp-indigo);
}

/* ─── Brothers of Omega — memorial cards ────────────────────── */
.omega-brothers {
  background: var(--alp-indigo-deep);
  position: relative;
}
.omega-brothers .section-label { color: var(--alp-gold-muted); text-align: center; }
.omega-brothers .section-heading { color: var(--alp-white); text-align: center; }
.omega-brothers .section-sub {
  color: var(--alp-silver-light);
  text-align: center;
  max-width: none;
  margin: 0 auto;
}
.omega-section-heading__divider {
  width: 46px;
  height: 1px;
  margin: 18px auto 0;
  background: rgba(211, 185, 116, 0.88);
}

/* Memorial wall: a clean, consistent portrait leads every card (the
   full Celebration of Life / Founder tribute artwork opens in
   #omegaTributeModal instead of appearing as the card face), so all
   three Brothers present uniformly regardless of their source
   artwork's own shape. */
.omega-memorial-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 28px;
  align-items: stretch;
  margin-top: 38px;
}

.omega-memorial-card {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
  background: linear-gradient(180deg, #102f53 0%, #153f6c 100%);
  border: 1px solid rgba(199, 168, 90, 0.38);
  border-radius: 8px;
  box-shadow: 0 14px 32px rgba(0, 0, 0, 0.18);
}
/* Very faint Omega watermark -- noticed only on close inspection. */
.omega-memorial-card::after {
  content: "\03A9";
  position: absolute;
  right: 18px;
  bottom: 10px;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 96px;
  line-height: 1;
  color: rgba(255, 255, 255, 0.028);
  pointer-events: none;
}

.omega-memorial-card__portrait-button {
  position: relative;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  width: 100%;
  height: 290px;
  padding: 0;
  border: 0;
  border-bottom: 1px solid rgba(211, 185, 116, 0.32);
  overflow: hidden;
  cursor: pointer;
  background: linear-gradient(180deg, #0d4f8f 0%, #092f58 100%);
}
/* IMPORTANT: no object-fit: cover here -- these portraits must show the
   Brother's whole head rather than zoom in and crop it, even if that
   leaves visible background around the photo. */
.omega-memorial-card__portrait {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center bottom;
  transform-origin: center bottom;
  transition: opacity 0.35s ease;
}
/* Per-Brother scale -- each source photo frames its subject at a
   different distance, so a single universal scale left heads sitting at
   inconsistent apparent sizes across the three cards. */
.omega-portrait--aljanon {
  object-fit: contain;
  object-position: center center;
  transform: scale(0.90);
}
.omega-portrait--taybron {
  object-fit: contain;
  object-position: center bottom;
  transform: scale(0.90);
}
.omega-portrait--dewayne {
  object-fit: contain;
  object-position: center bottom;
  transform: scale(0.88);
}
.omega-memorial-card__portrait-button:hover .omega-memorial-card__portrait {
  opacity: 0.94;
}
.omega-memorial-card__portrait-button:focus-visible {
  outline: 2px solid var(--alp-gold-muted);
  outline-offset: -2px;
}
/* Discreet "view tribute" hint, shown only on hover-capable pointers so it
   never sits awkwardly on touch screens where hover can't be dismissed. */
@media (hover: hover) {
  .omega-memorial-card__portrait-button::after {
    content: "VIEW TRIBUTE";
    position: absolute;
    left: 50%;
    bottom: 12px;
    transform: translateX(-50%);
    padding: 5px 10px;
    background: rgba(4, 20, 38, 0.72);
    border: 1px solid rgba(211, 185, 116, 0.42);
    border-radius: 999px;
    color: rgba(255, 255, 255, 0.92);
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.12em;
    white-space: nowrap;
    opacity: 0;
    transition: opacity 0.2s ease;
    pointer-events: none;
  }
  .omega-memorial-card__portrait-button:hover::after {
    opacity: 1;
  }
}
@media (prefers-reduced-motion: reduce) {
  .omega-memorial-card__portrait-button::after { transition: none; }
}

.omega-memorial-card__content {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: 1;
  padding: 25px 28px 28px;
  text-align: center;
}
.omega-memorial-card__name {
  margin: 0 0 5px;
  color: var(--alp-white);
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(20px, 2vw, 24px);
  font-weight: 500;
  line-height: 1.25;
}
.omega-memorial-card__line-name {
  min-height: 21px;
  margin: 0 0 8px;
  color: #d3b974;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 14px;
  font-style: italic;
  line-height: 1.4;
}
.omega-memorial-card__dates {
  margin: 0;
  color: var(--alp-white);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.08em;
}
.omega-memorial-card__divider {
  width: 34px;
  height: 1px;
  margin: 15px 0 14px;
  background: rgba(211, 185, 116, 0.90);
}
.omega-memorial-card__statement {
  max-width: 310px;
  margin: 0 auto;
  color: rgba(255, 255, 255, 0.88);
  font-size: 15px;
  line-height: 1.65;
}
.omega-memorial-card__tribute-link {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-top: auto;
  padding-top: 22px;
  border: 0;
  background: transparent;
  color: #d3b974;
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  cursor: pointer;
  transition: color 0.2s ease, gap 0.2s ease;
}
.omega-memorial-card__tribute-link:hover {
  color: var(--alp-white);
  gap: 11px;
}
@media (prefers-reduced-motion: reduce) {
  .omega-memorial-card__portrait { transition: none; }
  .omega-memorial-card__tribute-link { transition: none; }
}

/* Tribute modal/lightbox -- Omega Chapter only. */
.omega-tribute-modal {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
.omega-tribute-modal.is-open { display: flex; }
.omega-tribute-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(2, 13, 26, 0.92);
  backdrop-filter: blur(4px);
}
.omega-tribute-modal__dialog {
  position: relative;
  z-index: 1;
  width: min(100%, 1000px);
  max-height: calc(100vh - 48px);
  display: flex;
  align-items: center;
  justify-content: center;
}
.omega-tribute-modal__image {
  display: block;
  max-width: 100%;
  max-height: calc(100vh - 70px);
  object-fit: contain;
  border: 1px solid rgba(211, 185, 116, 0.45);
  box-shadow: 0 25px 70px rgba(0, 0, 0, 0.52);
}
.omega-tribute-modal__close {
  position: absolute;
  top: -14px;
  right: -14px;
  z-index: 2;
  width: 38px;
  height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(211, 185, 116, 0.60);
  border-radius: 50%;
  background: #081c32;
  color: var(--alp-white);
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
}

@media (max-width: 1000px) {
  .omega-memorial-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .omega-memorial-grid > .omega-memorial-card:nth-child(3) {
    grid-column: 1 / -1;
    max-width: calc(50% - 14px);
    margin: 0 auto;
  }
}
@media (max-width: 700px) {
  .omega-memorial-grid {
    grid-template-columns: 1fr;
    gap: 22px;
  }
  .omega-memorial-grid > .omega-memorial-card:nth-child(3) {
    grid-column: auto;
    max-width: none;
    margin: 0;
  }
  .omega-memorial-card__portrait-button {
    height: 320px;
  }
  .omega-memorial-card__content {
    padding: 22px 22px 24px;
  }
}

/* ─── Closing Remembrance ────────────────────────────────────── */
.omega-closing {
  position: relative;
  background:
    linear-gradient(180deg, rgba(6,20,38,0.94) 0%, rgba(6,20,38,0.88) 100%),
    url('../images/waters-edge.webp');
  background-size: cover;
  background-position: center;
  text-align: center;
  color: var(--alp-silver-light);
}
.omega-closing .section-heading { color: var(--alp-white); text-align: center; }
.omega-closing .container--sm { margin: 0 auto; }
.omega-closing-body p {
  font-size: 1.02rem;
  line-height: 1.8;
  margin-bottom: 14px;
}
.omega-closing-line {
  margin-top: 18px;
  font-family: var(--font-heading);
  font-style: italic;
  font-size: 1.15rem;
  color: var(--alp-carolina-light);
}
.omega-closing-tagline {
  margin-top: 22px;
  padding-top: 18px;
  border-top: 1px solid var(--alp-gold-soft);
  display: inline-block;
  font-family: var(--font-body);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--alp-gold-muted);
}

/* ============================================================
   OMEGA CHAPTER LANDING FEATURE (chapters.html only)
   Memorial banner beneath the five active chapter cards -- not a
   sixth chapter card. Background is the collective portrait of the
   three departed Brothers; all wording sits over a dark gradient
   overlay for legibility. Colors below are given as literal values
   per the approved design (gold #d4b35f, deep navy overlay) rather
   than the site's --alp-* tokens, since none of the existing tokens
   are an exact match for this specific palette.
   ============================================================ */
.omega-chapter-feature {
    position: relative;
    width: 100%;
    min-height: 330px;
    margin-top: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border-radius: 6px;
    background-image:
        url("../images/omega-chapter-collective.webp");
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    box-shadow:
        0 16px 40px rgba(3, 25, 53, 0.16);
}
/* ==================================================
   DARK OVERLAY
================================================== */
.omega-chapter-feature__overlay {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(
            90deg,
            rgba(3, 19, 41, 0.88) 0%,
            rgba(3, 24, 52, 0.72) 32%,
            rgba(3, 24, 52, 0.58) 55%,
            rgba(3, 19, 41, 0.78) 100%
        );
    z-index: 1;
}
/* ==================================================
   CONTENT
================================================== */
.omega-chapter-feature__content {
    position: relative;
    z-index: 2;
    width: min(100%, 1100px);
    margin: 0 auto;
    padding: 42px 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 28px;
    text-align: center;
    color: #ffffff;
}
/* ==================================================
   OMEGA SYMBOL
================================================== */
.omega-chapter-feature__symbol {
    flex: 0 0 auto;
    font-family:
        Georgia,
        "Times New Roman",
        serif;
    font-size: clamp(88px, 9vw, 140px);
    font-weight: 500;
    line-height: 0.8;
    color: #d4b35f;
    text-shadow:
        0 4px 18px rgba(0, 0, 0, 0.28);
}
/* ==================================================
   TEXT AREA
================================================== */
.omega-chapter-feature__text {
    max-width: 720px;
}
/* Small memorial line */
.omega-chapter-feature__eyebrow {
    margin:
        0
        0
        6px;
    color: #d4b35f;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.22em;
    text-transform: uppercase;
}
/* Main heading */
.omega-chapter-feature h2 {
    margin:
        0
        0
        12px;
    color: #ffffff;
    font-family:
        Georgia,
        "Times New Roman",
        serif;
    font-size:
        clamp(38px, 5vw, 62px);
    font-weight: 500;
    line-height: 1.05;
    /* Not in the original spec: a soft shadow so the heading stays
       legible wherever it happens to fall across the collective
       portrait (faces, sky, columns), per the spec's own "overlay
       should provide enough darkness that all HTML wording is
       readable" requirement. */
    text-shadow: 0 2px 14px rgba(2, 12, 28, 0.65);
}
/* Description */
.omega-chapter-feature__description {
    max-width: 700px;
    margin:
        0
        auto
        12px;
    color:
        rgba(255, 255, 255, 0.96);
    font-size: 17px;
    line-height: 1.55;
    text-shadow: 0 1px 10px rgba(2, 12, 28, 0.55);
}
/* Brotherhood motto */
.omega-chapter-feature__motto {
    margin:
        8px
        0
        20px;
    color: #79bde8;
    font-family:
        Georgia,
        "Times New Roman",
        serif;
    font-size: 14px;
    letter-spacing: 0.20em;
    text-transform: uppercase;
}
/* ==================================================
   BUTTON
================================================== */
.omega-chapter-feature__button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    min-width: 245px;
    padding:
        14px
        26px;
    border:
        2px solid
        #d4b35f;
    border-radius: 4px;
    background:
        rgba(3, 28, 60, 0.88);
    color: #ffffff;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-decoration: none;
    text-transform: uppercase;
    transition:
        background-color 0.25s ease,
        color 0.25s ease,
        transform 0.25s ease,
        border-color 0.25s ease;
}
.omega-chapter-feature__button:hover {
    background:
        #d4b35f;
    color:
        #061d3b;
    border-color:
        #d4b35f;
    transform:
        translateY(-2px);
}
.omega-chapter-feature__button span {
    font-size: 20px;
    line-height: 1;
}
/* ==================================================
   TABLET
================================================== */
@media (max-width: 900px) {
    .omega-chapter-feature {
        min-height: 360px;
        background-position:
            center center;
    }
    .omega-chapter-feature__content {
        padding:
            38px
            28px;
        gap:
            18px;
    }
    .omega-chapter-feature__symbol {
        font-size:
            92px;
    }
    .omega-chapter-feature__description {
        font-size:
            16px;
    }
}
/* ==================================================
   MOBILE
================================================== */
@media (max-width: 700px) {
    /*
    Fix (not in the original spec, needed to satisfy it): the
    collective portrait is a wide ~3:1 image. At this breakpoint's
    much taller/narrower box (500px tall on a 375-700px-wide
    screen), background-size:cover has to zoom in so far that only
    the center Brother's face fills the entire banner -- the other
    two Brothers (and the columns/Poseidon figure) get cropped out
    completely, which section 7 of the spec explicitly forbids
    ("Do not crop a Brother completely out"; "all three Brothers
    should remain visible whenever reasonably possible"). Switching
    to contain + a navy fallback fill keeps the full, uncropped
    image (all three Brothers) always visible and letterboxed, with
    the HTML text sitting on the plain navy fill below it instead of
    over anyone's face.
    */
    .omega-chapter-feature {
        min-height:
            500px;
        margin-top:
            22px;
        background-size: contain;
        background-color: var(--alp-indigo-deep);
        background-position:
            top center;
    }
    /*
    Darken slightly more on mobile because
    the text will overlap more of the collective.
    */
    .omega-chapter-feature__overlay {
        background:
            linear-gradient(
                180deg,
                rgba(3, 20, 44, 0.72) 0%,
                rgba(3, 20, 44, 0.84) 50%,
                rgba(3, 20, 44, 0.94) 100%
            );
    }
    .omega-chapter-feature__content {
        min-height:
            500px;
        padding:
            36px
            22px;
        flex-direction:
            column;
        gap:
            10px;
        justify-content:
            flex-end;
    }
    .omega-chapter-feature__symbol {
        font-size:
            76px;
        margin-bottom:
            2px;
    }
    .omega-chapter-feature h2 {
        font-size:
            38px;
    }
    .omega-chapter-feature__description {
        font-size:
            15px;
        line-height:
            1.5;
    }
    .omega-chapter-feature__motto {
        font-size:
            11px;
        letter-spacing:
            0.15em;
    }
    .omega-chapter-feature__button {
        width:
            100%;
        max-width:
            300px;
    }
}
/* ==================================================
   VERY SMALL MOBILE
================================================== */
@media (max-width: 420px) {
    .omega-chapter-feature {
        min-height:
            520px;
    }
    .omega-chapter-feature__content {
        min-height:
            520px;
        padding:
            30px
            18px;
    }
    .omega-chapter-feature__symbol {
        font-size:
            68px;
    }
    .omega-chapter-feature h2 {
        font-size:
            34px;
    }
    .omega-chapter-feature__description {
        font-size:
            14px;
    }
}
/* ==================================================
   ACCESSIBILITY
================================================== */
@media (prefers-reduced-motion: reduce) {
    .omega-chapter-feature__button {
        transition: none;
    }
}