/* =====================================================================
   Aurora University Investment Club (AUIC)
   styles.css  —  Global design system + all page styles

   STRUCTURE
   1.  Design tokens (colors, type, spacing)
   2.  Reset & base elements
   3.  Layout helpers (container, section, grid)
   4.  Typography utilities (eyebrow, display, lead)
   5.  Components (buttons, cards, stat rows, avatars, tags, forms)
   6.  Navbar
   7.  Footer
   8.  Page sections (hero, pillars, speakers, cta, page headers)
   9.  Motion (scroll reveal)
   10. Responsive breakpoints
   ===================================================================== */

/* ---------------------------------------------------------------------
   1. DESIGN TOKENS
   --------------------------------------------------------------------- */
:root {
  /* Brand */
  --navy:       #00467F;   /* primary  */
  --navy-deep:  #002d52;   /* footer / depth */
  --green:      #47AA42;   /* secondary accent */
  --green-dark: #3a8f36;

  /* Neutrals */
  --ink:    #0f1a24;       /* body text (navy-tinted near-black) */
  --slate:  #5c6b7a;       /* muted text */
  --line:   #e4e9ef;       /* hairlines / borders */
  --mist:   #f5f7fa;       /* tinted section background */
  --white:  #ffffff;

  /* Type roles */
  --font-display: 'Bebas Neue', Impact, sans-serif;      /* headlines + logo */
  --font-body:    'Poppins', 'Helvetica Neue', Arial, sans-serif;
  --font-mono:    'IBM Plex Mono', 'SFMono-Regular', Consolas, monospace;

  /* Spacing scale (8px base) */
  --s-1: 0.5rem;   /* 8  */
  --s-2: 1rem;     /* 16 */
  --s-3: 1.5rem;   /* 24 */
  --s-4: 2rem;     /* 32 */
  --s-5: 3rem;     /* 48 */
  --s-6: 4rem;     /* 64 */
  --s-7: 6rem;     /* 96 */

  /* Layout */
  --container: 1200px;
  --radius: 4px;              /* restrained corners — institutional, not soft */
  --shadow: 0 18px 40px -24px rgba(0, 45, 82, 0.35);
  --nav-h: 76px;
}

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

html { scroll-behavior: smooth; }

body {
  font-family: var(--font-body);
  color: var(--ink);
  background: var(--white);
  line-height: 1.6;
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

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

a { color: inherit; text-decoration: none; }

ul { list-style: none; }

/* ---------------------------------------------------------------------
   3. LAYOUT HELPERS
   --------------------------------------------------------------------- */
.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--s-3);
}

.section { padding-block: var(--s-7); }
.section--tight { padding-block: var(--s-6); }
.section--mist { background: var(--mist); }
.section--navy { background: var(--navy); color: var(--white); }

.grid { display: grid; gap: var(--s-3); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-2 { grid-template-columns: repeat(2, 1fr); }

/* A shared block for a section's intro (eyebrow + heading + lead) */
.section-head { max-width: 720px; margin-bottom: var(--s-5); }
.section-head--center { margin-inline: auto; text-align: center; }

/* ---------------------------------------------------------------------
   4. TYPOGRAPHY UTILITIES
   --------------------------------------------------------------------- */

/* Eyebrow: mono, uppercase, tracked — the "research note" label voice */
.eyebrow {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--green);
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  margin-bottom: var(--s-2);
}
.eyebrow::before {
  content: "";
  width: 26px;
  height: 2px;
  background: var(--green);
  display: inline-block;
}
.section--navy .eyebrow { color: var(--green); }

/* Display headings use Bebas — big, condensed, uppercase */
.display {
  font-family: var(--font-display);
  font-weight: 400;
  line-height: 0.92;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  color: var(--ink);
}
.section--navy .display { color: var(--white); }

.display-xl { font-size: clamp(3.2rem, 8vw, 6.5rem); }
.display-lg { font-size: clamp(2.6rem, 5.5vw, 4.2rem); }
.display-md { font-size: clamp(2rem, 4vw, 3rem); }

/* Poppins subheads for card titles etc. */
.title { font-family: var(--font-body); font-weight: 600; line-height: 1.25; }

.lead {
  font-size: 1.12rem;
  color: var(--slate);
  max-width: 60ch;
}
.section--navy .lead { color: rgba(255,255,255,0.78); }

.muted { color: var(--slate); }

/* ---------------------------------------------------------------------
   5. COMPONENTS
   --------------------------------------------------------------------- */

/* --- Buttons --- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.92rem;
  padding: 0.85rem 1.6rem;
  border-radius: var(--radius);
  border: 1.5px solid transparent;
  cursor: pointer;
  transition: transform .18s ease, background .18s ease, color .18s ease, border-color .18s ease;
  white-space: nowrap;
}
.btn:hover { transform: translateY(-2px); }

.btn-primary { background: var(--navy); color: var(--white); }
.btn-primary:hover { background: var(--navy-deep); }

.btn-accent { background: var(--green); color: var(--white); }
.btn-accent:hover { background: var(--green-dark); }

.btn-ghost { background: transparent; color: var(--ink); border-color: var(--line); }
.btn-ghost:hover { border-color: var(--navy); color: var(--navy); }

.section--navy .btn-ghost { color: var(--white); border-color: rgba(255,255,255,0.35); }
.section--navy .btn-ghost:hover { border-color: var(--white); background: rgba(255,255,255,0.08); }

.btn-arrow::after { content: "\2192"; font-family: var(--font-mono); }

/* --- Cards --- */
.card {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: var(--s-4);
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
  height: 100%;
}
.card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow);
  border-color: transparent;
}

/* Numbered pillar cards */
.pillar__num {
  font-family: var(--font-mono);
  font-size: 0.8rem;
  color: var(--green);
  letter-spacing: 0.1em;
  margin-bottom: var(--s-3);
}
.pillar__title { font-size: 1.35rem; margin-bottom: var(--s-1); }
.pillar__body { color: var(--slate); font-size: 0.98rem; }

/* --- Stat / tearsheet rows (the signature motif) --- */
.statbar {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  margin-top: var(--s-5);
}
.stat {
  padding: var(--s-3) var(--s-3) var(--s-3) 0;
  border-left: 1px solid var(--line);
  padding-left: var(--s-3);
}
.stat:first-child { border-left: none; padding-left: 0; }
.stat__num {
  font-family: var(--font-mono);
  font-size: 1.9rem;
  font-weight: 600;
  color: var(--navy);
  line-height: 1;
}
.stat__label {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--slate);
  margin-top: 0.5rem;
}
.section--navy .stat { border-color: rgba(255,255,255,0.18); }
.section--navy .stat__num { color: var(--white); }
.section--navy .stat__label { color: rgba(255,255,255,0.6); }

/* --- Monogram avatars (placeholder headshots) --- */
.avatar {
  width: 100%;
  aspect-ratio: 1 / 1;
  border-radius: var(--radius);
  background: linear-gradient(135deg, var(--navy), var(--navy-deep));
  color: var(--white);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-size: clamp(2.5rem, 6vw, 3.5rem);
  letter-spacing: 0.05em;
  position: relative;
  overflow: hidden;
}
.avatar::after {
  /* subtle diagonal sheen so placeholders don't read as flat blocks */
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(120deg, transparent 55%, rgba(71,170,66,0.28) 100%);
}
.avatar--sm { font-size: 1.4rem; }

/* --- Tags / chips --- */
.tag {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 0.3rem 0.65rem;
  border-radius: 2px;
}
.tag--speaker { background: rgba(0,70,127,0.09); color: var(--navy); }
.tag--workshop { background: rgba(71,170,66,0.12); color: var(--green-dark); }
.tag--meeting { background: var(--mist); color: var(--slate); }
.tag--past { background: #eef0f2; color: #7a8794; }

/* --- Date chip (events) --- */
.datechip {
  flex-shrink: 0;
  width: 72px;
  text-align: center;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 0.6rem 0;
  line-height: 1;
}
.datechip__mon {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--green);
}
.datechip__day {
  font-family: var(--font-display);
  font-size: 2rem;
  color: var(--navy);
  margin-top: 0.15rem;
}

/* --- Forms --- */
.form { display: grid; gap: var(--s-3); }
.field { display: grid; gap: 0.45rem; }
.field label {
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.02em;
}
.field .req { color: var(--green); }
.field input,
.field select,
.field textarea {
  font-family: var(--font-body);
  font-size: 0.95rem;
  color: var(--ink);
  padding: 0.8rem 0.95rem;
  border: 1.5px solid var(--line);
  border-radius: var(--radius);
  background: var(--white);
  transition: border-color .15s ease, box-shadow .15s ease;
  width: 100%;
}
.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--navy);
  box-shadow: 0 0 0 3px rgba(0,70,127,0.12);
}
.field textarea { resize: vertical; min-height: 120px; }
.field--error input,
.field--error select,
.field--error textarea { border-color: #c0392b; }
.field__msg { font-size: 0.78rem; color: #c0392b; min-height: 1em; }

.form-note { font-size: 0.85rem; color: var(--slate); }

/* Inline success banner (JS-driven) */
.form-success {
  background: rgba(71,170,66,0.1);
  border: 1px solid rgba(71,170,66,0.4);
  color: var(--green-dark);
  padding: var(--s-3);
  border-radius: var(--radius);
  font-weight: 500;
  display: none;
}
.form-success.is-visible { display: block; }

/* ---------------------------------------------------------------------
   6. NAVBAR
   --------------------------------------------------------------------- */
.nav {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(255,255,255,0.92);
  backdrop-filter: saturate(160%) blur(10px);
  border-bottom: 1px solid transparent;
  transition: border-color .2s ease, box-shadow .2s ease;
}
.nav.is-scrolled {
  border-bottom-color: var(--line);
  box-shadow: 0 2px 20px -14px rgba(0,45,82,0.5);
}
.nav__inner {
  height: var(--nav-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* Logo lockup: bull mark + (AURORA UNIVERSITY over INVESTMENT CLUB) */
.logo { display: flex; align-items: center; gap: 0.7rem; line-height: 1; }
.logo__mark { height: 44px; width: auto; display: block; }
.logo__text { display: flex; flex-direction: column; line-height: 1; }
.logo--footer .logo__mark { height: 48px; }

/* Navbar shows only the wordmark next to the mark — give it presence */
.nav .logo__univ { font-size: 0.82rem; letter-spacing: 0.2em; color: var(--navy); }
.logo__univ {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.62rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--slate);
}
.logo__club {
  font-family: var(--font-display);
  font-size: 1.6rem;
  letter-spacing: 0.02em;
  color: var(--navy);
  margin-top: 0.2rem;
}
.logo__club .accent { color: var(--green); }

.nav__links { display: flex; align-items: center; gap: var(--s-3); }
.nav__link {
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--ink);
  position: relative;
  padding: 0.25rem 0;
}
.nav__link::after {
  content: "";
  position: absolute;
  left: 0; bottom: -2px;
  width: 0; height: 2px;
  background: var(--green);
  transition: width .22s ease;
}
.nav__link:hover::after,
.nav__link.is-active::after { width: 100%; }
.nav__link.is-active { color: var(--navy); }

.nav__cta { margin-left: var(--s-2); }

/* Mobile toggle */
.nav__toggle {
  display: none;
  flex-direction: column;
  gap: 5px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 6px;
}
.nav__toggle span {
  width: 24px; height: 2px;
  background: var(--navy);
  transition: transform .25s ease, opacity .25s ease;
}
.nav.is-open .nav__toggle span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav.is-open .nav__toggle span:nth-child(2) { opacity: 0; }
.nav.is-open .nav__toggle span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ---------------------------------------------------------------------
   7. FOOTER
   --------------------------------------------------------------------- */
.footer {
  background: var(--navy-deep);
  color: rgba(255,255,255,0.7);
  padding-block: var(--s-6) var(--s-4);
}
.footer__grid {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr 1.2fr;
  gap: var(--s-4);
  padding-bottom: var(--s-5);
  border-bottom: 1px solid rgba(255,255,255,0.12);
}
.footer .logo__univ { color: rgba(255,255,255,0.55); }
.footer .logo__club { color: var(--white); }
.footer__blurb { margin-top: var(--s-2); font-size: 0.9rem; max-width: 34ch; }
.footer__col h4 {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--green);
  margin-bottom: var(--s-2);
}
.footer__col a { display: block; font-size: 0.9rem; padding: 0.25rem 0; transition: color .15s ease; }
.footer__col a:hover { color: var(--white); }
.footer__bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--s-2);
  padding-top: var(--s-3);
  font-size: 0.8rem;
  font-family: var(--font-mono);
  letter-spacing: 0.04em;
  color: rgba(255,255,255,0.5);
}

/* ---------------------------------------------------------------------
   8. PAGE SECTIONS
   --------------------------------------------------------------------- */

/* --- Hero (home) --- */
.hero {
  padding-block: var(--s-7) var(--s-6);
  background:
    radial-gradient(1100px 500px at 85% -10%, rgba(0,70,127,0.06), transparent 60%),
    var(--white);
}
.hero__grid {
  display: grid;
  grid-template-columns: 1.35fr 1fr;
  gap: var(--s-6);
  align-items: center;
}
.hero__title { margin-bottom: var(--s-3); }
.hero__sub { font-size: 1.18rem; color: var(--slate); max-width: 48ch; margin-bottom: var(--s-4); }
.hero__actions { display: flex; gap: var(--s-2); flex-wrap: wrap; }

/* Right-side "tearsheet" card — reinforces the finance-firm signature */
.tearsheet {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--white);
  box-shadow: var(--shadow);
  overflow: hidden;
}
.tearsheet__head {
  background: var(--navy);
  color: var(--white);
  padding: var(--s-3);
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.tearsheet__head .k {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.7);
}
.tearsheet__head .v { font-family: var(--font-display); font-size: 1.4rem; }
.tearsheet__row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: var(--s-2) var(--s-3);
  border-bottom: 1px solid var(--line);
}
.tearsheet__row:last-child { border-bottom: none; }
.tearsheet__row .label { font-size: 0.85rem; color: var(--slate); }
.tearsheet__row .figure { font-family: var(--font-mono); font-weight: 600; color: var(--navy); }
.tearsheet__row .figure.up { color: var(--green); }

/* --- Page header (inner pages) --- */
.pagehead {
  padding-block: var(--s-6) var(--s-5);
  background: var(--mist);
  border-bottom: 1px solid var(--line);
}
.pagehead__title { margin-bottom: var(--s-2); }
.pagehead .lead { font-size: 1.15rem; }

/* --- Speaker cards --- */
.speaker { display: flex; flex-direction: column; }
.speaker .avatar { margin-bottom: var(--s-3); }
.speaker__name { font-size: 1.15rem; font-weight: 600; }
.speaker__role { font-size: 0.9rem; color: var(--slate); margin-top: 0.15rem; }
.speaker__co {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  color: var(--navy);
  margin-top: 0.5rem;
}

/* --- Event rows --- */
.event {
  display: flex;
  gap: var(--s-3);
  align-items: flex-start;
  padding: var(--s-3);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--white);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.event:hover { transform: translateY(-3px); box-shadow: var(--shadow); border-color: transparent; }
.event__body { flex: 1; }
.event__top { display: flex; gap: 0.6rem; align-items: center; margin-bottom: 0.5rem; flex-wrap: wrap; }
.event__title { font-size: 1.15rem; font-weight: 600; }
.event__meta {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  color: var(--slate);
  letter-spacing: 0.04em;
  margin-top: 0.4rem;
}
.event__desc { color: var(--slate); font-size: 0.95rem; margin-top: 0.6rem; }
.event--past { opacity: 0.82; }

/* --- Split feature (about / difference) --- */
.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s-6);
  align-items: center;
}
.valuelist { display: grid; gap: var(--s-3); margin-top: var(--s-4); }
.value {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--s-2);
  align-items: start;
}
.value__mark {
  font-family: var(--font-mono);
  color: var(--green);
  font-weight: 600;
  padding-top: 2px;
}
.value h4 { font-size: 1.05rem; font-weight: 600; }
.value p { color: var(--slate); font-size: 0.95rem; }

/* --- Process steps (join) --- */
.steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s-3); counter-reset: step; }
.step { border-top: 2px solid var(--navy); padding-top: var(--s-2); }
.step__n {
  font-family: var(--font-display);
  font-size: 2.4rem;
  color: var(--navy);
  line-height: 1;
}
.step h4 { font-size: 1.05rem; font-weight: 600; margin: 0.4rem 0 0.3rem; }
.step p { color: var(--slate); font-size: 0.9rem; }

/* --- CTA band --- */
.cta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--s-4);
  flex-wrap: wrap;
}
.cta__actions { display: flex; gap: var(--s-2); flex-wrap: wrap; }

/* --- Contact --- */
.contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-6); align-items: start; }
.contact-item { padding: var(--s-3) 0; border-bottom: 1px solid var(--line); }
.contact-item h4 {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--green);
  margin-bottom: 0.5rem;
}
.contact-item a, .contact-item p { font-size: 1.05rem; font-weight: 500; }
.contact-item a:hover { color: var(--navy); }
.socials { display: flex; gap: var(--s-2); margin-top: var(--s-2); }
.social {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 0.6rem 1rem;
  font-size: 0.88rem;
  font-weight: 500;
  transition: border-color .15s ease, color .15s ease, transform .15s ease;
}
.social:hover { border-color: var(--navy); color: var(--navy); transform: translateY(-2px); }

/* ---------------------------------------------------------------------
   9. MOTION — scroll reveal (progressive; content is visible without JS)
   --------------------------------------------------------------------- */
.reveal { opacity: 0; transform: translateY(18px); transition: opacity .6s ease, transform .6s ease; }
.reveal.is-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  * { scroll-behavior: auto !important; }
  .reveal { opacity: 1; transform: none; transition: none; }
  .btn:hover, .card:hover, .event:hover, .social:hover { transform: none; }
}

/* ---------------------------------------------------------------------
   10. RESPONSIVE
   --------------------------------------------------------------------- */
@media (max-width: 900px) {
  .hero__grid { grid-template-columns: 1fr; gap: var(--s-5); }
  .split, .contact-grid { grid-template-columns: 1fr; gap: var(--s-4); }
  .grid-3 { grid-template-columns: repeat(2, 1fr); }
  .steps { grid-template-columns: repeat(2, 1fr); }
  .footer__grid { grid-template-columns: 1fr 1fr; gap: var(--s-4); }
  .statbar { grid-template-columns: repeat(2, 1fr); }
  .stat { border-left: none; padding-left: 0; }

  /* Mobile navigation kicks in here — six menu items get tight above this */
  .nav__toggle { display: flex; }
  .nav__links {
    position: fixed;
    inset: var(--nav-h) 0 auto 0;
    background: var(--white);
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    padding: var(--s-2) var(--s-3) var(--s-3);
    border-bottom: 1px solid var(--line);
    box-shadow: var(--shadow);
    transform: translateY(-140%);
    transition: transform .3s ease;
    height: auto;
  }
  .nav.is-open .nav__links { transform: translateY(0); }
  .nav__link { width: 100%; padding: 0.75rem 0; border-bottom: 1px solid var(--line); }
  .nav__link::after { display: none; }
  .nav__cta { margin: var(--s-2) 0 0; width: 100%; }
  .nav__cta .btn { width: 100%; }
}

@media (max-width: 640px) {
  .section { padding-block: var(--s-6); }
  .hero { padding-block: var(--s-5) var(--s-5); }

  .grid-3, .grid-2 { grid-template-columns: 1fr; }
  .steps { grid-template-columns: 1fr; }
  .footer__grid { grid-template-columns: 1fr; }
  .footer__bottom { flex-direction: column; align-items: flex-start; }
  .cta { flex-direction: column; align-items: flex-start; }
}

/* =====================================================================
   11. NEW PAGE COMPONENTS  (Gallery · Weekly Meetings · Resources)
   ===================================================================== */

/* --- Gallery --------------------------------------------------------- */
.gallery-filters { display: flex; gap: 0.5rem; flex-wrap: wrap; margin-bottom: var(--s-4); }
.filter-btn {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 0.5rem 0.95rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--white);
  color: var(--slate);
  cursor: pointer;
  transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.filter-btn:hover { border-color: var(--navy); color: var(--navy); }
.filter-btn.is-active { background: var(--navy); color: var(--white); border-color: var(--navy); }

.gallery-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-2); }
.tile {
  position: relative;
  border-radius: var(--radius);
  overflow: hidden;
  aspect-ratio: 4 / 3;
  border: 1px solid var(--line);
  background: var(--mist);
  cursor: pointer;
}
.tile img, .tile video { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .4s ease; }
.tile:hover img, .tile:hover video { transform: scale(1.05); }
.tile.is-hidden { display: none; }

/* Placeholder tiles (until real media is added) */
.tile--ph {
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, var(--navy), var(--navy-deep));
  color: rgba(255,255,255,0.45);
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.tile__badge {
  position: absolute; top: 0.7rem; right: 0.7rem;
  background: rgba(255,255,255,0.92);
  color: var(--navy);
  font-family: var(--font-mono);
  font-size: 0.6rem; letter-spacing: 0.1em; text-transform: uppercase;
  padding: 0.25rem 0.5rem; border-radius: 2px;
}
.tile__cap {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 1.4rem 0.9rem 0.8rem;
  background: linear-gradient(transparent, rgba(0,45,82,0.88));
  color: var(--white);
  font-size: 0.85rem; font-weight: 500;
  opacity: 0; transform: translateY(8px); transition: opacity .25s ease, transform .25s ease;
}
.tile:hover .tile__cap { opacity: 1; transform: none; }
.tile__play {
  position: absolute; inset: 0; margin: auto;
  width: 54px; height: 54px; border-radius: 50%;
  background: rgba(255,255,255,0.92);
  display: flex; align-items: center; justify-content: center;
  pointer-events: none;
}
.tile__play::after {
  content: ""; margin-left: 4px;
  border-left: 15px solid var(--navy);
  border-top: 9px solid transparent; border-bottom: 9px solid transparent;
}

/* Lightbox */
.lightbox {
  position: fixed; inset: 0; z-index: 200;
  background: rgba(4,20,34,0.92);
  display: none; align-items: center; justify-content: center;
  padding: var(--s-4);
}
.lightbox.is-open { display: flex; }
.lightbox__content { max-width: 900px; max-height: 85vh; }
.lightbox__content img, .lightbox__content video { max-width: 100%; max-height: 85vh; border-radius: var(--radius); display: block; }
.lightbox__cap { color: rgba(255,255,255,0.8); font-size: 0.9rem; margin-top: var(--s-2); text-align: center; }
.lightbox__close {
  position: absolute; top: var(--s-3); right: var(--s-3);
  background: none; border: none; color: var(--white);
  font-size: 2.2rem; line-height: 1; cursor: pointer;
}

/* --- Weekly Meetings ------------------------------------------------- */
.meeting-banner {
  display: grid; grid-template-columns: repeat(3, 1fr);
  border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden;
  background: var(--white);
}
.meeting-banner__item { padding: var(--s-4); border-left: 1px solid var(--line); }
.meeting-banner__item:first-child { border-left: none; }
.meeting-banner__k {
  font-family: var(--font-mono); font-size: 0.68rem;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--green);
  margin-bottom: 0.6rem;
}
.meeting-banner__v { font-family: var(--font-display); font-size: 1.9rem; color: var(--navy); line-height: 1; }
.meeting-banner__sub { color: var(--slate); font-size: 0.9rem; margin-top: 0.4rem; }

.sched { border-top: 1px solid var(--line); }
.sched__row {
  display: grid; grid-template-columns: 130px 1fr; gap: var(--s-3);
  padding: var(--s-3) 0; border-bottom: 1px solid var(--line); align-items: baseline;
}
.sched__wk { font-family: var(--font-mono); font-size: 0.78rem; letter-spacing: 0.05em; color: var(--navy); }
.sched__title { font-weight: 600; }
.sched__desc { color: var(--slate); font-size: 0.92rem; margin-top: 0.2rem; }

.faq details { border-bottom: 1px solid var(--line); }
.faq summary {
  cursor: pointer; list-style: none; font-weight: 600;
  display: flex; justify-content: space-between; align-items: center;
  padding: var(--s-3) 0;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-family: var(--font-mono); color: var(--green); font-size: 1.3rem; }
.faq details[open] summary::after { content: "\2013"; }
.faq p { color: var(--slate); padding: 0 0 var(--s-3); max-width: 65ch; }

/* --- Resources (link-tree replacement) ------------------------------- */
.resource-group { margin-bottom: var(--s-5); }
.resource-group__label {
  font-family: var(--font-mono); font-size: 0.72rem;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--green);
  margin-bottom: var(--s-2);
}
.resource-list { display: grid; gap: var(--s-2); }
.resource {
  display: flex; align-items: center; gap: var(--s-3);
  padding: var(--s-3);
  border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--white);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.resource:hover { transform: translateY(-3px); box-shadow: var(--shadow); border-color: transparent; }
.resource__icon {
  width: 46px; height: 46px; flex-shrink: 0; border-radius: var(--radius);
  background: var(--mist); color: var(--navy);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display); font-size: 1.35rem;
}
.resource__body { flex: 1; min-width: 0; }
.resource__title { font-weight: 600; }
.resource__desc { color: var(--slate); font-size: 0.88rem; }
.resource__arrow { font-family: var(--font-mono); color: var(--slate); transition: transform .18s ease, color .18s ease; }
.resource:hover .resource__arrow { color: var(--green); transform: translateX(4px); }

/* --- Responsive for new components ----------------------------------- */
@media (max-width: 900px) {
  .meeting-banner { grid-template-columns: 1fr; }
  .meeting-banner__item { border-left: none; border-top: 1px solid var(--line); }
  .meeting-banner__item:first-child { border-top: none; }
}
@media (max-width: 640px) {
  .gallery-grid { grid-template-columns: repeat(2, 1fr); }
  .sched__row { grid-template-columns: 1fr; gap: 0.3rem; }
}

/* =====================================================================
   ADDITIONS — speaker photos, brand icons, photo hero
   ===================================================================== */

/* --- Photo headshots (overrides the monogram avatar) --- */
.avatar--photo {
  background: var(--mist);
  padding: 0;
}
.avatar--photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 30%;
  display: block;
}
.avatar--photo::after { display: none; }

/* --- Speaker LinkedIn link --- */
.speaker__li {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  margin-top: auto;
  padding-top: var(--s-3);
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--slate);
  transition: color .15s ease;
}
.speaker__li svg { width: 16px; height: 16px; fill: currentColor; flex-shrink: 0; }
.speaker__li:hover { color: var(--navy); }

/* --- Brand icons (resource rows + footer) --- */
.icon-brand { width: 20px; height: 20px; fill: currentColor; display: block; }
.footer__col a.with-icon {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  width: fit-content;
}
.footer__col a.with-icon svg { width: 15px; height: 15px; fill: currentColor; flex-shrink: 0; }

/* --- Hero with photo background --- */
.hero--photo {
  position: relative;
  background-color: var(--navy-deep);
  background-image:
    linear-gradient(100deg,
      rgba(0,28,51,0.93) 0%,
      rgba(0,28,51,0.84) 48%,
      rgba(0,28,51,0.62) 100%),
    url("../images/hero.jpg");
  background-position: center 45%;
  background-size: cover;
  background-repeat: no-repeat;
}
.hero--photo .hero__title { color: #fff; }
.hero--photo .hero__sub { color: rgba(255,255,255,0.88); }
.hero--photo .btn-ghost { color: #fff; border-color: rgba(255,255,255,0.45); }
.hero--photo .btn-ghost:hover { background: rgba(255,255,255,0.12); }

/* Single column below 900px — flatten the gradient so text stays legible */
@media (max-width: 900px) {
  .hero--photo {
    background-image:
      linear-gradient(180deg, rgba(0,28,51,0.91) 0%, rgba(0,28,51,0.87) 100%),
      url("../images/hero.jpg");
    background-position: center center;
  }
}

/* =====================================================================
   MOBILE FIXES — speaker cards + brand icons
   ===================================================================== */

/* Brand icons were reading small against the display-font glyphs */
.icon-brand { width: 22px; height: 22px; }
.footer__col a.with-icon svg { width: 16px; height: 16px; }

/* Tablet: cards go 2-up — stop headshots from ballooning */
@media (max-width: 900px) and (min-width: 641px) {
  .speaker .avatar { max-width: 220px; }
}

@media (max-width: 640px) {
  /* Speaker cards go horizontal: small headshot left, details right */
  .speaker {
    display: grid;
    grid-template-columns: 88px 1fr;
    column-gap: var(--s-2);
    align-content: start;
  }
  .speaker .avatar {
    grid-column: 1;
    grid-row: 1 / span 4;
    align-self: start;
    margin-bottom: 0;
  }
  .speaker__name { font-size: 1.05rem; }
  .speaker__li {
    margin-top: var(--s-1);
    padding-top: 0;
  }

  /* Resource rows: tighten so the description isn't squeezed to 3 lines */
  .resource { padding: var(--s-2); gap: var(--s-2); }
  .resource__icon { width: 40px; height: 40px; }
}

/* =====================================================================
   STEPS — FLOW VARIANT  (.steps.steps--flow)
   Connected timeline: navy nodes on a rail, green arrows between.
   ===================================================================== */
.steps--flow { position: relative; }

.steps--flow .step {
  position: relative;
  border-top: none;
  padding-top: 0;
  text-align: center;
}

/* Rail: runs from this node's centre to the next one, across the gap */
.steps--flow .step::before {
  content: "";
  position: absolute;
  top: 21px;
  left: 50%;
  width: calc(100% + var(--s-3));
  height: 2px;
  background: var(--line);
  z-index: 0;
}
.steps--flow .step:last-child::before { display: none; }

/* Arrow: sits at the midpoint of the gap, pointing to the next step */
.steps--flow .step::after {
  content: "";
  position: absolute;
  top: 17px;
  left: calc(100% + var(--s-3) / 2);
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border-top: 5px solid transparent;
  border-bottom: 5px solid transparent;
  border-left: 8px solid var(--green);
  border-right: none;
  z-index: 2;
}
.steps--flow .step:last-child::after { display: none; }

/* Node: solid navy circle, punches through the rail */
.steps--flow .step__n {
  position: relative;
  z-index: 1;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--navy);
  color: var(--white);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  margin: 0 auto var(--s-2);
}

.step__time {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--green);
  margin-bottom: 0.3rem;
}

/* ---- Mobile: rotate the flow to a vertical timeline ---- */
@media (max-width: 900px) {
  .steps--flow {
    grid-template-columns: 1fr;
    gap: var(--s-4);
  }
  .steps--flow .step {
    display: grid;
    grid-template-columns: 44px 1fr;
    column-gap: var(--s-3);
    text-align: left;
  }
  .steps--flow .step__n {
    grid-column: 1;
    grid-row: 1 / span 3;
    margin: 0;
  }
  .steps--flow .step::before {
    top: 44px;
    left: 22px;
    transform: translateX(-50%);
    width: 2px;
    height: calc(100% + var(--s-4) - 44px);
  }
  .steps--flow .step::after {
    top: auto;
    bottom: calc(var(--s-4) / -2);
    left: 22px;
    transform: translate(-50%, 50%);
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 8px solid var(--green);
    border-bottom: none;
  }
}

/* =====================================================================
   SCHEDULE — colour + special-event rows
   ===================================================================== */
.sched { border-top: 2px solid var(--navy); }

.sched__row {
  grid-template-columns: 190px 1fr;
  padding: var(--s-3);
  border-left: 3px solid transparent;
  transition: background .15s ease, border-color .15s ease;
}
.sched__row:nth-child(odd) { background: rgba(0, 70, 127, 0.025); }
.sched__row:hover {
  background: rgba(0, 70, 127, 0.06);
  border-left-color: var(--green);
}

.sched__wk {
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--green);
}
.sched__title { color: var(--navy); font-size: 1.02rem; }

/* Special events — mirrors the blue rows in your planning sheet */
.sched__row--special,
.sched__row--special:nth-child(odd) { background: rgba(0, 70, 127, 0.08); }
.sched__row--special { border-left-color: var(--navy); }
.sched__row--special .sched__wk { color: var(--navy); }

.sched__tag {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 0.62rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 0.18rem 0.5rem;
  border-radius: 3px;
  margin-left: 0.5rem;
  vertical-align: 0.14em;
  background: var(--navy);
  color: var(--white);
}
.sched__tag--green { background: var(--green); }

/* Must come after the rules above — restores the mobile stack */
@media (max-width: 640px) {
  .sched__row {
    grid-template-columns: 1fr;
    gap: 0.35rem;
    padding: var(--s-2);
  }
  .sched__wk { font-size: 0.95rem; }
  .sched__tag { margin-left: 0; margin-top: 0.35rem; }
}

/* =====================================================================
   PAGE HEADER — photo variant (.pagehead.pagehead--photo)
   Matches the hero treatment: same image, same navy overlay.
   ===================================================================== */
.pagehead--photo {
  position: relative;
  border-bottom: none;
  background-color: var(--navy-deep);
  background-image:
    linear-gradient(100deg,
      rgba(0,28,51,0.93) 0%,
      rgba(0,28,51,0.84) 48%,
      rgba(0,28,51,0.62) 100%),
    url("../images/hero.jpg");
  background-position: center 45%;
  background-size: cover;
  background-repeat: no-repeat;
}
.pagehead--photo .pagehead__title { color: #fff; }
.pagehead--photo .lead { color: rgba(255,255,255,0.86); }

@media (max-width: 900px) {
  .pagehead--photo {
    background-image:
      linear-gradient(180deg, rgba(0,28,51,0.91) 0%, rgba(0,28,51,0.87) 100%),
      url("../images/hero.jpg");
    background-position: center center;
  }
}

/* Meetings page uses its own header photo */
.pagehead--meetings {
  background-image:
    linear-gradient(100deg,
      rgba(0,28,51,0.93) 0%,
      rgba(0,28,51,0.84) 48%,
      rgba(0,28,51,0.62) 100%),
    url("../images/meetings-header.jpg");
  background-position: center 52%;
}
@media (max-width: 900px) {
  .pagehead--meetings {
    background-image:
      linear-gradient(180deg, rgba(0,28,51,0.91) 0%, rgba(0,28,51,0.87) 100%),
      url("../images/meetings-header.jpg");
    background-position: center center;
  }
}

/* Resources page uses its own header photo */
.pagehead--resources {
  background-image:
    linear-gradient(100deg,
      rgba(0,28,51,0.93) 0%,
      rgba(0,28,51,0.84) 48%,
      rgba(0,28,51,0.62) 100%),
    url("../images/resources-header.jpg");
  background-position: center 38%;
}
@media (max-width: 900px) {
  .pagehead--resources {
    background-image:
      linear-gradient(180deg, rgba(0,28,51,0.91) 0%, rgba(0,28,51,0.87) 100%),
      url("../images/resources-header.jpg");
    background-position: center 34%;
  }
}
/* Events page uses its own header photo */
.pagehead--events {
  background-image:
          linear-gradient(100deg,
          rgba(0,28,51,0.93) 0%,
          rgba(0,28,51,0.84) 48%,
          rgba(0,28,51,0.62) 100%),
          url("../images/events-header.jpg");
  background-position: center 40%;
}
@media (max-width: 900px) {
  .pagehead--events {
    background-image:
            linear-gradient(180deg, rgba(0,28,51,0.91) 0%,
            rgba(0,28,51,0.87) 100%),
            url("../images/events-header.jpg");
    background-position: center 30%;
  }
}
/* About page uses its own header photo */
.pagehead--about {
  background-image:
          linear-gradient(100deg,
          rgba(0,28,51,0.93) 0%,
          rgba(0,28,51,0.84) 48%,
          rgba(0,28,51,0.62) 100%),
          url("../images/about-header.jpg");
  background-position: center 55%;
}
@media (max-width: 900px) {
  .pagehead--about {
    background-image:
            linear-gradient(180deg, rgba(0,28,51,0.91) 0%,
            rgba(0,28,51,0.87) 100%),
            url("../images/about-header.jpg");
    background-position: center 45%;
  }
}
/* Pillar cards grow slightly on hover, on top of the existing lift effect */
.pillar:hover {
  transform: translateY(-4px) scale(1.04);
}
/* Fix: pillar titles were inheriting white text from .section--navy, invisible on the white cards */
.section--navy .pillar__title {
  color: var(--ink);
}
/* Gallery page uses its own header photo */
.pagehead--gallery {
  background-image:
          linear-gradient(100deg,
          rgba(0,28,51,0.93) 0%,
          rgba(0,28,51,0.84) 48%,
          rgba(0,28,51,0.62) 100%),
          url("../images/gallery-header.jpg");
  background-position: center 50%;
}
@media (max-width: 900px) {
  .pagehead--gallery {
    background-image:
            linear-gradient(180deg, rgba(0,28,51,0.91) 0%,
            rgba(0,28,51,0.87) 100%),
            url("../images/gallery-header.jpg");
    background-position: center 40%;
  }
}
/* Gallery tiles pop up and grow on hover, overlapping neighbors slightly */
.tile {
  transition: transform .25s ease, box-shadow .25s ease;
}
.tile:hover {
  transform: scale(1.12);
  box-shadow: var(--shadow);
  z-index: 5;
}
/* Give event cards a visible green outline so they stand out from the page */
.event {
  border: 1.5px solid var(--green);
}
/* Give the operating-principles pillar cards a green outline, matching the event cards */
.pillar {
  border: 1.5px solid var(--green);
}

/* New button variant */
.btn-navy {
  background: #12315B;
  color: #fff;
  border: 1px solid #12315B;
}
.btn-navy:hover,
.btn-navy:focus-visible {
  background: #0d2545;
  border-color: #0d2545;
}

/* Desktop: side by side */
.nav__cta--group {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
}

/* Mobile: stack full-width inside the open menu */
@media (max-width: 900px) {
  .nav__cta--group {
    display: flex;
    flex-direction: column;
    width: 100%;
    gap: .6rem;
    margin-top: .75rem;
  }
  .nav__cta--group .btn {
    width: 100%;
    justify-content: center;
    text-align: center;
    min-height: 44px;
  }
}